From cc01235e9965575c6ac576707edc9513be54064c Mon Sep 17 00:00:00 2001 From: xavi-murcia Date: Tue, 24 Feb 2026 17:05:52 +0100 Subject: [PATCH 1/4] feat(components/molecule/autosuggest): setup autosuggest component --- .../src/components/SingleSelection/index.js | 10 +++++++--- components/molecule/autosuggest/src/index.js | 5 +++++ 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/components/molecule/autosuggest/src/components/SingleSelection/index.js b/components/molecule/autosuggest/src/components/SingleSelection/index.js index b81212f2a..7ed394cb5 100644 --- a/components/molecule/autosuggest/src/components/SingleSelection/index.js +++ b/components/molecule/autosuggest/src/components/SingleSelection/index.js @@ -31,6 +31,7 @@ const MoleculeAutosuggestSingleSelection = ({ onSelect, onToggle, placeholder, + readOnly, required, rightButton, rightIcon, @@ -39,7 +40,8 @@ const MoleculeAutosuggestSingleSelection = ({ tabIndex, type, value = '', - noBorder + noBorder, + ...rest }) => { const handleSelection = (ev, {value, ...args}) => { typeof onChange === 'function' && onChange(ev, {value, ...args}) @@ -53,7 +55,7 @@ const MoleculeAutosuggestSingleSelection = ({ } const handleClear = (ev, args = {}) => { - if (!disabled) { + if (!disabled && !readOnly) { typeof onChange === 'function' && onChange(null, {...args, value: ''}) typeof onClear === 'function' && onClear(ev) } @@ -76,7 +78,7 @@ const MoleculeAutosuggestSingleSelection = ({ autoFocus={autoFocus} button={rightButton} disabled={disabled} - iconClear={!disabled && iconClear} + iconClear={!disabled && !readOnly && iconClear} id={id} reference={refInput} inputMode={inputMode} @@ -89,6 +91,7 @@ const MoleculeAutosuggestSingleSelection = ({ onClickRightIcon={handleRightClick} onKeyDown={onInputKeyDown} placeholder={placeholder} + readOnly={readOnly} required={required} rightIcon={rightIcon} shape={shape} @@ -96,6 +99,7 @@ const MoleculeAutosuggestSingleSelection = ({ type={type} value={value} noBorder={noBorder} + {...rest} > diff --git a/components/molecule/autosuggest/src/index.js b/components/molecule/autosuggest/src/index.js index ded6fc170..7c3c79806 100644 --- a/components/molecule/autosuggest/src/index.js +++ b/components/molecule/autosuggest/src/index.js @@ -38,6 +38,7 @@ const MoleculeAutosuggest = ({ onFocus, onSelect, onToggle, + readOnly = false, refMoleculeAutosuggest: refMoleculeAutosuggestFromProps = {}, refMoleculeAutosuggestInput: refMoleculeAutosuggestInputFromProps = {}, state, @@ -215,6 +216,7 @@ const MoleculeAutosuggest = ({ onKeyDown: handleKeyDown, onSelect, onToggle: handleToggle, + readOnly, state, ...(!multiselection && {...accessibilityProps}), ...restProps @@ -315,6 +317,9 @@ MoleculeAutosuggest.propTypes = { /** list of values to be displayed on the select */ options: PropTypes.array, + /** if the component is read-only or not */ + readOnly: PropTypes.bool, + /** object generated w/ React.createRef method to get a DOM reference of wrapper div */ refMoleculeAutosuggest: PropTypes.object, From 59419b271f47de4afe8887f2b12d0401635da9ca Mon Sep 17 00:00:00 2001 From: xavi-murcia Date: Tue, 24 Feb 2026 17:06:27 +0100 Subject: [PATCH 2/4] feat(components/molecule/select): setup read only in molecules autosuggest --- .../select/src/components/MoleculeInputSelect.js | 16 ++++++++++++---- .../select/src/components/SingleSelection.js | 1 + components/molecule/select/src/config.js | 6 ++++-- components/molecule/select/src/index.js | 9 +++++---- components/molecule/select/src/styles/index.scss | 15 +++++++++++++++ 5 files changed, 37 insertions(+), 10 deletions(-) diff --git a/components/molecule/select/src/components/MoleculeInputSelect.js b/components/molecule/select/src/components/MoleculeInputSelect.js index 0d736c19b..36a5689ed 100644 --- a/components/molecule/select/src/components/MoleculeInputSelect.js +++ b/components/molecule/select/src/components/MoleculeInputSelect.js @@ -6,16 +6,21 @@ import Injector from '@s-ui/react-primitive-injector' import {CLASS_ARROW, CLASS_ARROW_DOWN, CLASS_ARROW_UP, CLASS_CONTAINER} from './config.js' const MoleculeInputSelect = props => { - const {onClick, iconArrowDown: iconArrow, isOpen, disabled, children, ...rest} = props + const {onClick, iconArrowDown: iconArrow, isOpen, disabled, readOnly, children, ...rest} = props const classNames = cx(CLASS_ARROW, { [CLASS_ARROW_DOWN]: !isOpen, [CLASS_ARROW_UP]: isOpen }) + const onClickInputHandler = ev => { + if (readOnly) return + onClick(ev) + } + return ( -
- +
+ {children} {iconArrow} @@ -38,7 +43,10 @@ MoleculeInputSelect.propTypes = { isOpen: PropTypes.bool, /** This Boolean attribute prevents the user from interacting with the input */ - disabled: PropTypes.bool + disabled: PropTypes.bool, + + /** This Boolean attribute prevents the user from interacting with the input */ + readOnly: PropTypes.bool } export default MoleculeInputSelect diff --git a/components/molecule/select/src/components/SingleSelection.js b/components/molecule/select/src/components/SingleSelection.js index 6a50ccef9..b0014b300 100644 --- a/components/molecule/select/src/components/SingleSelection.js +++ b/components/molecule/select/src/components/SingleSelection.js @@ -86,6 +86,7 @@ const MoleculeSelectSingleSelection = forwardRef( required={required} size={selectSize} tabIndex={tabIndex} + {...props} > diff --git a/components/molecule/select/src/config.js b/components/molecule/select/src/config.js index fd0f1fc75..7c07c5aaa 100644 --- a/components/molecule/select/src/config.js +++ b/components/molecule/select/src/config.js @@ -9,6 +9,7 @@ import {moleculeDropdownListSizes} from '@s-ui/react-molecule-dropdown-list' export const BASE_CLASS = `sui-MoleculeSelect` export const CLASS_FOCUS = `${BASE_CLASS}--focus` export const CLASS_DISABLED = `is-disabled` +export const CLASS_READ_ONLY = `is-read-only` export const SELECT_STATES = { ERROR: 'error', @@ -36,7 +37,7 @@ export const getOptionData = children => { return optionsData } -export const getClassName = ({state, errorState, disabled, className, isBorderless}) => +export const getClassName = ({state, errorState, disabled, readOnly, className, isBorderless}) => cx( BASE_CLASS, errorState && `${BASE_CLASS}--${SELECT_STATES.ERROR}`, @@ -44,7 +45,8 @@ export const getClassName = ({state, errorState, disabled, className, isBorderle state && `${BASE_CLASS}--${state}`, isBorderless && `${BASE_CLASS}--isBorderless`, { - [CLASS_DISABLED]: disabled + [CLASS_DISABLED]: disabled, + [CLASS_READ_ONLY]: readOnly }, className ) diff --git a/components/molecule/select/src/index.js b/components/molecule/select/src/index.js index 12009a60e..73ce9621b 100644 --- a/components/molecule/select/src/index.js +++ b/components/molecule/select/src/index.js @@ -67,6 +67,7 @@ const MoleculeSelect = forwardRef( }, forwardedRef ) => { + console.log('molecule select props', {props, disabled, readOnly}) const [focusedFirstOption, setFocusedFirstOption] = useState(false) const refOptions = useRef({}) const [innerValue, setInnerValue] = useControlledState(value, defaultValue) @@ -115,7 +116,7 @@ const MoleculeSelect = forwardRef( const numOptions = Children.toArray(extendedChildren).length - const className = getClassName({state, errorState, disabled, className: classNameFromProps, isBorderless}) + const className = getClassName({state, errorState, disabled, readOnly, className: classNameFromProps, isBorderless}) const handleToggle = useCallback( (ev, {isOpen, isOutsideEvent} = {isOutsideEvent: false}) => { @@ -151,13 +152,13 @@ const MoleculeSelect = forwardRef( const handleOutsideClick = useCallback( ev => { - if (disabled) return + if (disabled || readOnly) return if (refMoleculeSelect.current && !refMoleculeSelect.current.contains(ev.target)) { // outside click closeList(ev, {isOutsideEvent: true}) } }, - [closeList, disabled] + [closeList, disabled, readOnly] ) const focusFirstOption = useCallback( @@ -240,7 +241,7 @@ const MoleculeSelect = forwardRef( typeof onBlur === 'function' && onBlur(event) } - const handleFocusIn = () => !disabled && !hasSearch && onFocus && onFocus() + const handleFocusIn = () => !disabled && !readOnly && !hasSearch && onFocus && onFocus() const handleClick = ev => { ev.persist() diff --git a/components/molecule/select/src/styles/index.scss b/components/molecule/select/src/styles/index.scss index 9097d9cf9..09079b90b 100644 --- a/components/molecule/select/src/styles/index.scss +++ b/components/molecule/select/src/styles/index.scss @@ -52,6 +52,15 @@ $class-select-atom-search-container: '#{$class-select-atom-search}-container'; } } + &.is-read-only { + #{$class-input}-arrow { + cursor: default; + svg { + fill: $c-molecule-select-arrow-disabled !important; + } + } + } + .sui-MoleculeDropdownList { //position: absolute; z-index: $z-select-list; @@ -97,6 +106,12 @@ $class-select-atom-search-container: '#{$class-select-atom-search}-container'; opacity: 1; -webkit-appearance: none; } + + #{$class-select-atom-input-input}--readOnly { + caret-color: transparent; + background: $bgc-atom-input-read-only; + color: $c-atom-input-read-only; + } } &-arrow { From 4e78c3b89498bbc53e3670203465fdaca0ab1c41 Mon Sep 17 00:00:00 2001 From: xavi-murcia Date: Tue, 24 Feb 2026 17:54:03 +0100 Subject: [PATCH 3/4] feat(components/molecule/select): remove log --- components/molecule/select/src/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/components/molecule/select/src/index.js b/components/molecule/select/src/index.js index 73ce9621b..0433b6233 100644 --- a/components/molecule/select/src/index.js +++ b/components/molecule/select/src/index.js @@ -67,7 +67,6 @@ const MoleculeSelect = forwardRef( }, forwardedRef ) => { - console.log('molecule select props', {props, disabled, readOnly}) const [focusedFirstOption, setFocusedFirstOption] = useState(false) const refOptions = useRef({}) const [innerValue, setInnerValue] = useControlledState(value, defaultValue) From 3083bf29a568c056da586e87878a925a4d8487f6 Mon Sep 17 00:00:00 2001 From: xavi-murcia Date: Tue, 24 Feb 2026 18:07:32 +0100 Subject: [PATCH 4/4] feat(components/molecule/autosuggest): avoid rest --- .../molecule/autosuggest/src/components/SingleSelection/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/components/molecule/autosuggest/src/components/SingleSelection/index.js b/components/molecule/autosuggest/src/components/SingleSelection/index.js index 7ed394cb5..daf978c95 100644 --- a/components/molecule/autosuggest/src/components/SingleSelection/index.js +++ b/components/molecule/autosuggest/src/components/SingleSelection/index.js @@ -99,7 +99,6 @@ const MoleculeAutosuggestSingleSelection = ({ type={type} value={value} noBorder={noBorder} - {...rest} >