@laerdal/life-react-components 1.8.0-dev.7 → 1.8.0-dev.8

package/dist/Dropdown/BasicDropdown.js

@@ -6,7 +6,7 @@ import { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../ic
 import { LoadingIndicator } from '../LoadingIndicator';
 import { Dropdown, StyledField, InputField } from './CommonStyling';
 import DropdownContent from './DropdownContent';
-import { AutofilledMessage, ErrorMessage } from '../InputFields/styling';
+import { AutofilledMessage, WarningMessage } from '../InputFields/styling';
 import { Size } from '../types';
 import { defaultOnMouseDownHandler, useClickOutsideRef, useFocusVisibleRef } from '../common';
 import { useFocusOutsideRef } from '../common';
@@ -37,7 +37,7 @@ var BasicDropdown = function BasicDropdown(_ref) {
       scrollable = _ref$scrollable === void 0 ? true : _ref$scrollable,
       maxHeight = _ref.maxHeight,
       disabled = _ref.disabled,
-      readOnly = _ref.readOnly,
+      locked = _ref.locked,
       isButton = _ref.isButton,
       activeValidationMessage = _ref.activeValidationMessage,
       autofilledMessage = _ref.autofilledMessage,
@@ -147,7 +147,7 @@ var BasicDropdown = function BasicDropdown(_ref) {
       ref: containerRef,
       isButton: isButton || false,
       className: size ? size : '',
-      readOnly: readOnly,
+      locked: locked,
       disabled: disabled,
       margin: margin,
       minWidth: minWidth,
@@ -156,7 +156,7 @@ var BasicDropdown = function BasicDropdown(_ref) {
         className: (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : ''),
         onMouseDown: defaultOnMouseDownHandler,
         onClick: function onClick(e) {
-          if (!readOnly && !disabled) {
+          if (!locked && !disabled) {
             e.stopPropagation();
             setIsOpen(!isOpen);
 
@@ -171,9 +171,9 @@ var BasicDropdown = function BasicDropdown(_ref) {
             }
           }
         },
-        tabIndex: disabled || readOnly ? -1 : 0,
+        tabIndex: disabled || locked ? -1 : 0,
         disabled: disabled || false,
-        readOnly: readOnly || false,
+        locked: locked || false,
         isPlaceholder: !input,
         placeholder: placeholder,
         showValidationMessage: !!activeValidationMessage,
@@ -201,7 +201,7 @@ var BasicDropdown = function BasicDropdown(_ref) {
             className: size ? size : ''
           })
         })]
-      }), !readOnly && !disabled && /*#__PURE__*/_jsx(DropdownContent, {
+      }), !locked && !disabled && /*#__PURE__*/_jsx(DropdownContent, {
         customizationProps: {
           itemsType: itemsType,
           action: action !== null && action !== void 0 ? action : function () {},
@@ -230,10 +230,10 @@ var BasicDropdown = function BasicDropdown(_ref) {
         setSelectedValues: setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues,
         id: "".concat(id, "_dropdowncontent")
       })]
-    }), activeValidationMessage && /*#__PURE__*/_jsxs(ErrorMessage, {
+    }), activeValidationMessage && /*#__PURE__*/_jsxs(WarningMessage, {
       children: [/*#__PURE__*/_jsx(TechnicalWarning, {
         size: "20px",
-        color: COLORS.critical_400
+        color: COLORS.warning_400
       }), /*#__PURE__*/_jsx("span", {
         children: activeValidationMessage
       })]
@@ -268,7 +268,7 @@ BasicDropdown.propTypes = {
   disableSorting: _pt.bool,
   messageOnNoResults: _pt.string,
   disabled: _pt.bool,
-  readOnly: _pt.bool,
+  locked: _pt.bool,
   isButton: _pt.bool,
   activeValidationMessage: _pt.string,
   autofilledMessage: _pt.string,

package/dist/Dropdown/BasicDropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dropdown/BasicDropdown.tsx"],"names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","Dropdown","StyledField","InputField","DropdownContent","AutofilledMessage","ErrorMessage","Size","defaultOnMouseDownHandler","useClickOutsideRef","useFocusVisibleRef","useFocusOutsideRef","BasicDropdown","id","list","placeholder","onSelect","setDropdownMenuValues","initalValue","disableSorting","messageOnNoResults","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","actionDisabled","pinTopItem","multiSelect","scrollable","maxHeight","disabled","readOnly","isButton","activeValidationMessage","autofilledMessage","size","margin","dropdownMenuValues","minWidth","useState","isOpen","setIsOpen","isLoading","setIsLoading","input","setInput","focused","setFocused","selectedValues","setSelectedValues","keyboardNavigated","setKeyboardNavigated","inputRef","useRef","styledFieldRef","resetDropdown","containerRef","handleKeyDown","e","key","handleValueSelect","values","join","current","focus","focusVisible","useEffect","initValue","customSetIsOpen","getDisplayItems","split","map","val","trim","listDisplayLabels","filter","item","includes","value","l","displayLabel","concat","stopPropagation","blur","Small","neutral_600","onValueUpdate","items","critical_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {COLORS} from '../styles';\nimport {ArrowDropDown, ArrowDropUp, Information, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {Dropdown, StyledField, InputField} from './CommonStyling';\nimport DropdownContent, {DropdownItem} from './DropdownContent';\nimport {AutofilledMessage, ErrorMessage} from '../InputFields/styling';\nimport {Size} from '../types';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusVisibleRef} from '../common';\nimport {useFocusOutsideRef} from '../common';\n\ninterface DropdownFilterProps {\n  id: string;\n  list: DropdownItem[];\n  itemsType?: 'normal' | 'checkbox' | 'radio';\n  action?: () => void;\n  actionLabel?: string;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionDisabled?: boolean;\n  pinTopItem?: boolean;\n  multiSelect?: boolean;\n  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: string;\n  onSelect?: (value: string[]) => void;\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n  initalValue?: string;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  dropdownMenuValues?: string[];\n  minWidth?: string;\n}\n\nconst BasicDropdown = ({\n                         id,\n                         list,\n                         placeholder,\n                         onSelect,\n                         setDropdownMenuValues,\n                         initalValue,\n                         disableSorting,\n                         messageOnNoResults,\n                         itemsType = 'normal',\n                         action,\n                         actionLabel,\n                         actionVariant,\n                         actionIcon,\n                         actionLoading,\n                         actionDisabled,\n                         pinTopItem,\n                         multiSelect,\n                         scrollable = true,\n                         maxHeight,\n                         disabled,\n                         readOnly,\n                         isButton,\n                         activeValidationMessage,\n                         autofilledMessage,\n                         size,\n                         margin = '4px 0',\n                         dropdownMenuValues,\n                         minWidth,\n                       }: DropdownFilterProps) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [isLoading, setIsLoading] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>('');\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>(initalValue ? [initalValue] : []);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const styledFieldRef = useFocusVisibleRef([inputRef]);\n  const resetDropdown = () => {\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  const containerRef = useClickOutsideRef(resetDropdown, [], useFocusOutsideRef(resetDropdown));\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      setIsOpen(!isOpen);\n      setKeyboardNavigated(true);\n    }\n  };\n\n  const handleValueSelect = (values: string[]) => {\n    setInput(values.join(', '));\n    onSelect && onSelect(values);\n    //don't close dropdown on item select if have custom action or multiselect\n    if (actionLabel || multiSelect) return;\n\n    if (keyboardNavigated) {\n      styledFieldRef.current?.focus({focusVisible: true} as any);\n    }\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  React.useEffect(() => {\n    if (initalValue || dropdownMenuValues) {\n      const initValue = dropdownMenuValues ? dropdownMenuValues!.join(',') : initalValue ? initalValue : '';\n      setInput(initValue);\n      setSelectedValues([initValue]);\n    }\n  }, [initalValue, dropdownMenuValues]);\n\n  React.useEffect(() => {\n    setIsLoading(false);\n  }, [input]);\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false)\n  }, [isOpen]);\n\n  const customSetIsOpen = (isOpen: boolean) => {\n    setIsOpen(isOpen);\n  };\n\n  const getDisplayItems = () => {\n    const values = input.split(',').map((val) => val.trim());\n    const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n    return listDisplayLabels.join(', ');\n  };\n\n  return (\n    <>\n      <Dropdown ref={containerRef} isButton={isButton || false} className={size ? size : ''} readOnly={readOnly}\n                disabled={disabled} margin={margin} minWidth={minWidth}>\n        <StyledField\n          ref={styledFieldRef}\n          className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={(e) => {\n            if (!readOnly && !disabled) {\n              e.stopPropagation();\n              setIsOpen(!isOpen);\n              if (isOpen) {\n                inputRef.current?.blur();\n              } else {\n                inputRef.current?.focus();\n              }\n            }\n          }}\n          tabIndex={disabled || readOnly ? -1 : 0}\n          disabled={disabled || false}\n          readOnly={readOnly || false}\n          isPlaceholder={!input}\n          placeholder={placeholder}\n          showValidationMessage={!!activeValidationMessage}\n          onKeyDown={handleKeyDown}\n          minWidth={minWidth}>\n          <InputField\n            ref={inputRef}\n            type=\"search\"\n            readOnly\n            placeholder={placeholder}\n            value={getDisplayItems()}\n            className={size ? `${size} value` : 'value'}\n            tabIndex={-1}\n            disabled={disabled || false}\n          />\n          {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/> : null}\n          <div className={'icon dropdown-arrow'}>\n            {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\n              <ArrowDropDown size=\"24px\" className={size ? size : ''}/>}\n          </div>\n        </StyledField>\n        {!readOnly && !disabled && (\n          <DropdownContent\n            customizationProps={{\n              itemsType: itemsType,\n              action: action ?? (() => {\n              }),\n              actionLabel: actionLabel,\n              actionVariant: actionVariant,\n              actionDisabled: actionDisabled,\n              scrollable: scrollable,\n              onValueUpdate: handleValueSelect,\n              items: list,\n              multiSelect: multiSelect,\n              pinTopItem: pinTopItem,\n              maxHeight: maxHeight,\n              actionIcon: actionIcon,\n              actionLoading: actionLoading,\n            }}\n            focused={focused}\n            setFocused={setFocused}\n            size={size ?? Size.Small}\n            filter={''}\n            isOpen={isOpen}\n            setIsOpen={customSetIsOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            outline={keyboardNavigated}\n            isButton={isButton || false}\n            selectedValues={dropdownMenuValues ?? selectedValues}\n            setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <ErrorMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_400}/>\n          <span>{activeValidationMessage}</span>\n        </ErrorMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <Information size=\"20px\" color={COLORS.neutral_600}/>\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default BasicDropdown;\n"],"file":"BasicDropdown.js"}
+{"version":3,"sources":["../../src/Dropdown/BasicDropdown.tsx"],"names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","Dropdown","StyledField","InputField","DropdownContent","AutofilledMessage","WarningMessage","Size","defaultOnMouseDownHandler","useClickOutsideRef","useFocusVisibleRef","useFocusOutsideRef","BasicDropdown","id","list","placeholder","onSelect","setDropdownMenuValues","initalValue","disableSorting","messageOnNoResults","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","actionDisabled","pinTopItem","multiSelect","scrollable","maxHeight","disabled","locked","isButton","activeValidationMessage","autofilledMessage","size","margin","dropdownMenuValues","minWidth","useState","isOpen","setIsOpen","isLoading","setIsLoading","input","setInput","focused","setFocused","selectedValues","setSelectedValues","keyboardNavigated","setKeyboardNavigated","inputRef","useRef","styledFieldRef","resetDropdown","containerRef","handleKeyDown","e","key","handleValueSelect","values","join","current","focus","focusVisible","useEffect","initValue","customSetIsOpen","getDisplayItems","split","map","val","trim","listDisplayLabels","filter","item","includes","value","l","displayLabel","concat","stopPropagation","blur","Small","neutral_600","onValueUpdate","items","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {COLORS} from '../styles';\nimport {ArrowDropDown, ArrowDropUp, Information, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {Dropdown, StyledField, InputField} from './CommonStyling';\nimport DropdownContent, {DropdownItem} from './DropdownContent';\nimport {AutofilledMessage, WarningMessage} from '../InputFields/styling';\nimport {Size} from '../types';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusVisibleRef} from '../common';\nimport {useFocusOutsideRef} from '../common';\n\ninterface DropdownFilterProps {\n  id: string;\n  list: DropdownItem[];\n  itemsType?: 'normal' | 'checkbox' | 'radio';\n  action?: () => void;\n  actionLabel?: string;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionDisabled?: boolean;\n  pinTopItem?: boolean;\n  multiSelect?: boolean;\n  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: string;\n  onSelect?: (value: string[]) => void;\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n  initalValue?: string;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  locked?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  dropdownMenuValues?: string[];\n  minWidth?: string;\n}\n\nconst BasicDropdown = ({\n                         id,\n                         list,\n                         placeholder,\n                         onSelect,\n                         setDropdownMenuValues,\n                         initalValue,\n                         disableSorting,\n                         messageOnNoResults,\n                         itemsType = 'normal',\n                         action,\n                         actionLabel,\n                         actionVariant,\n                         actionIcon,\n                         actionLoading,\n                         actionDisabled,\n                         pinTopItem,\n                         multiSelect,\n                         scrollable = true,\n                         maxHeight,\n                         disabled,\n                         locked,\n                         isButton,\n                         activeValidationMessage,\n                         autofilledMessage,\n                         size,\n                         margin = '4px 0',\n                         dropdownMenuValues,\n                         minWidth,\n                       }: DropdownFilterProps) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [isLoading, setIsLoading] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>('');\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>(initalValue ? [initalValue] : []);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const styledFieldRef = useFocusVisibleRef([inputRef]);\n  const resetDropdown = () => {\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  const containerRef = useClickOutsideRef(resetDropdown, [], useFocusOutsideRef(resetDropdown));\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      setIsOpen(!isOpen);\n      setKeyboardNavigated(true);\n    }\n  };\n\n  const handleValueSelect = (values: string[]) => {\n    setInput(values.join(', '));\n    onSelect && onSelect(values);\n    //don't close dropdown on item select if have custom action or multiselect\n    if (actionLabel || multiSelect) return;\n\n    if (keyboardNavigated) {\n      styledFieldRef.current?.focus({focusVisible: true} as any);\n    }\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  React.useEffect(() => {\n    if (initalValue || dropdownMenuValues) {\n      const initValue = dropdownMenuValues ? dropdownMenuValues!.join(',') : initalValue ? initalValue : '';\n      setInput(initValue);\n      setSelectedValues([initValue]);\n    }\n  }, [initalValue, dropdownMenuValues]);\n\n  React.useEffect(() => {\n    setIsLoading(false);\n  }, [input]);\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false)\n  }, [isOpen]);\n\n  const customSetIsOpen = (isOpen: boolean) => {\n    setIsOpen(isOpen);\n  };\n\n  const getDisplayItems = () => {\n    const values = input.split(',').map((val) => val.trim());\n    const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n    return listDisplayLabels.join(', ');\n  };\n\n  return (\n    <>\n      <Dropdown ref={containerRef} isButton={isButton || false} className={size ? size : ''} locked={locked}\n                disabled={disabled} margin={margin} minWidth={minWidth}>\n        <StyledField\n          ref={styledFieldRef}\n          className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={(e) => {\n            if (!locked && !disabled) {\n              e.stopPropagation();\n              setIsOpen(!isOpen);\n              if (isOpen) {\n                inputRef.current?.blur();\n              } else {\n                inputRef.current?.focus();\n              }\n            }\n          }}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n          locked={locked || false}\n          isPlaceholder={!input}\n          placeholder={placeholder}\n          showValidationMessage={!!activeValidationMessage}\n          onKeyDown={handleKeyDown}\n          minWidth={minWidth}>\n          <InputField\n            ref={inputRef}\n            type=\"search\"\n            readOnly\n            placeholder={placeholder}\n            value={getDisplayItems()}\n            className={size ? `${size} value` : 'value'}\n            tabIndex={-1}\n            disabled={disabled || false}\n          />\n          {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/> : null}\n          <div className={'icon dropdown-arrow'}>\n            {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\n              <ArrowDropDown size=\"24px\" className={size ? size : ''}/>}\n          </div>\n        </StyledField>\n        {!locked && !disabled && (\n          <DropdownContent\n            customizationProps={{\n              itemsType: itemsType,\n              action: action ?? (() => {\n              }),\n              actionLabel: actionLabel,\n              actionVariant: actionVariant,\n              actionDisabled: actionDisabled,\n              scrollable: scrollable,\n              onValueUpdate: handleValueSelect,\n              items: list,\n              multiSelect: multiSelect,\n              pinTopItem: pinTopItem,\n              maxHeight: maxHeight,\n              actionIcon: actionIcon,\n              actionLoading: actionLoading,\n            }}\n            focused={focused}\n            setFocused={setFocused}\n            size={size ?? Size.Small}\n            filter={''}\n            isOpen={isOpen}\n            setIsOpen={customSetIsOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            outline={keyboardNavigated}\n            isButton={isButton || false}\n            selectedValues={dropdownMenuValues ?? selectedValues}\n            setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400}/>\n          <span>{activeValidationMessage}</span>\n        </WarningMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <Information size=\"20px\" color={COLORS.neutral_600}/>\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default BasicDropdown;\n"],"file":"BasicDropdown.js"}

package/dist/Dropdown/CommonStyling.cjs

@@ -30,7 +30,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var Dropdown = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  display: inline-block;\n\n  ", "\n  ", "\n  ", "\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  &:focus-within {\n    z-index: ", ";\n  }\n\n  input:hover + div {\n    color: ", ";\n  }\n\n  input:active + div {\n    color: ", ";\n  }\n\n\n"])), function (props) {
   return !props.isButton && (props !== null && props !== void 0 && props.minWidth ? "width: 100%; min-width: ".concat(props.minWidth, ";") : 'width: 100%; min-width: 344px;');
 }, function (props) {
-  return props.readOnly || props.disabled ? 'cursor: not-allowed;' : '';
+  return props.locked || props.disabled ? 'cursor: not-allowed;' : '';
 }, function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
 }, _zIndexes.Z_INDEXES.focus, _styles.COLORS.primary_600, _styles.COLORS.primary_800);
@@ -38,7 +38,7 @@ var Dropdown = _styledComponents.default.div(_templateObject || (_templateObject
 exports.Dropdown = Dropdown;
 var lockedState = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  color: ", ";\n  pointer-events: none;\n  cursor: not-allowed;\n\n  input {\n    color: ", " !important;\n  }\n\n  .dropdown-arrow {\n    color: ", " !important;\n  }\n"])), _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_600, _styles.COLORS.neutral_600, _styles.COLORS.neutral_300);
 var disabledState = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  color: ", ";\n  pointer-events: none;\n  cursor: not-allowed;\n\n  .dropdown-arrow {\n    color: ", " !important;\n  }\n\n  input {\n    color: ", " !important;\n\n    ::placeholder {\n      color: ", " !important;\n    }\n  }\n"])), _styles.COLORS.white, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
-var activeValidationMessage = (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: inset 0px 0px 0px 2px ", ";\n"])), _styles.COLORS.critical_400);
+var activeValidationMessage = (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: inset 0px 0px 0px 2px ", ";\n"])), _styles.COLORS.warning_400);
 var placeholderStyling = (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600));
 
 var InputField = _styledComponents.default.input(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ", " !important;\n  padding: 0;\n  flex-grow: 1;\n  display: flex;\n  justify-content: center;\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n"])), _styles.COLORS.black);
@@ -54,7 +54,7 @@ var StyledField = _styledComponents.default.div(_templateObject7 || (_templateOb
 }, _styles.COLORS.neutral_800, _styles.COLORS.neutral_20, function (props) {
   return props.disabled ? disabledState : '';
 }, function (props) {
-  return props.readOnly ? lockedState : '';
+  return props.locked ? lockedState : '';
 }, function (props) {
   return props.showValidationMessage ? activeValidationMessage : '';
 }, function (props) {

package/dist/Dropdown/CommonStyling.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dropdown/CommonStyling.tsx"],"names":["Dropdown","styled","div","props","isButton","minWidth","readOnly","disabled","margin","Z_INDEXES","focus","COLORS","primary_600","primary_800","lockedState","css","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","critical_400","placeholderStyling","ComponentTextStyle","Italic","InputField","input","black","StyledField","Regular","neutral_400","BREAKPOINTS","MEDIUM","isPlaceholder","undefined","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","CommonInteractionStyling","dropdown","focusStyles","ButtonDropdownContentStyling","TextButtonDropdownContent","TextButtonDropdownIcon","TextButtonDropdownArrow","TextButtonDropdownText","TextButtonDropdownWrapper","primary_20","primary_700","primary_100"],"mappings":"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","sourcesContent":["import styled, {css} from 'styled-components';\nimport {CommonInteractionStyling} from '../common';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {\n  ComponentMStyling,\n  ComponentLStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles/typography';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nexport const Dropdown = styled.div<{ isButton: boolean; readOnly?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\n  position: relative;\n  display: inline-block;\n\n  ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  &:focus-within {\n    z-index: ${Z_INDEXES.focus};\n  }\n\n  input:hover + div {\n    color: ${COLORS.primary_600};\n  }\n\n  input:active + div {\n    color: ${COLORS.primary_800};\n  }\n\n\n`;\n\nconst lockedState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n  color: ${COLORS.neutral_600};\n  pointer-events: none;\n  cursor: not-allowed;\n\n  input {\n    color: ${COLORS.neutral_600} !important;\n  }\n\n  .dropdown-arrow {\n    color: ${COLORS.neutral_300} !important;\n  }\n`;\n\nconst disabledState = css`\n  background-color: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n  color: ${COLORS.neutral_300};\n  pointer-events: none;\n  cursor: not-allowed;\n\n  .dropdown-arrow {\n    color: ${COLORS.neutral_300} !important;\n  }\n\n  input {\n    color: ${COLORS.neutral_300} !important;\n\n    ::placeholder {\n      color: ${COLORS.neutral_300} !important;\n    }\n  }\n`;\n\nconst activeValidationMessage = css`\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n`;\n\nconst placeholderStyling = css`\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const InputField = styled.input`\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ${COLORS.black} !important;\n  padding: 0;\n  flex-grow: 1;\n  display: flex;\n  justify-content: center;\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n`;\n\nexport const StyledField = styled.div<{ disabled: boolean; readOnly: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string; minWidth?: string }>`\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\n  width: 100%;\n\n  background: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  position: relative;\n\n  input {\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  &::placeholder {\n    ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 16px;\n    height: 56px;\n\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 12px 16px;\n    height: 48px;\n\n    &::placeholder {\n      ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    height: 56px;\n    padding: 16px;\n\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  .dropdown-arrow {\n    width: 24px;\n    height: 24px;\n    color: ${(props) => props.isPlaceholder ? COLORS.neutral_600 : undefined};\n  }\n\n  &:focus {\n    outline: 3px solid #ddd;\n  }\n\n  &:focus-within,\n  &.focus-visible-within {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &:hover:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_600};\n      }\n    }\n\n    .dropdown-arrow {\n      color: ${COLORS.primary_600};\n    }\n\n    cursor: pointer;\n  }\n\n  &:active:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_800};\n      }\n    }\n\n    .dropdown-arrow {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &.button {\n    ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ${COLORS.neutral_800};\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n\n  ${(props) => (props.disabled ? disabledState : '')}\n  ${(props) => (props.readOnly ? lockedState : '')}\n  ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n  ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n  ${CommonInteractionStyling};\n\n  &.focus-visible,\n  &.focus-visible-within {\n    z-index: ${Z_INDEXES.dropdown + 1} !important;\n    ${focusStyles}\n  }\n`;\n\nexport const ButtonDropdownContentStyling = css`\n  min-width: 344px;\n  right: 0;\n`;\n\n\n\nexport const TextButtonDropdownContent = styled.div`\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: 64px;\n  min-height: 32px;\n  padding: 4px 8px;\n  border-radius: 4px;\n`;\n\nexport const TextButtonDropdownIcon = styled.div`\n  width: 24px;\n  height: 24px;\n`;\n\nexport const TextButtonDropdownArrow = styled.div`\n  width: 24px;\n  height: 24px;\n`;\n\nexport const TextButtonDropdownText = styled.div`\n  flex: 1\n`;\n\nexport const TextButtonDropdownWrapper = styled.div`\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  cursor: pointer;\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n\n  .expanded {\n    color: ${COLORS.neutral_800};\n\n    ${TextButtonDropdownContent} {\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:hover:not(.disabled) {\n    ${TextButtonDropdownContent} {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n    }\n  }\n\n  &:active:not(.disabled) {\n    ${TextButtonDropdownContent} {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300};\n  }\n\n}`;\n"],"file":"CommonStyling.cjs"}
+{"version":3,"sources":["../../src/Dropdown/CommonStyling.tsx"],"names":["Dropdown","styled","div","props","isButton","minWidth","locked","disabled","margin","Z_INDEXES","focus","COLORS","primary_600","primary_800","lockedState","css","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","warning_400","placeholderStyling","ComponentTextStyle","Italic","InputField","input","black","StyledField","Regular","neutral_400","BREAKPOINTS","MEDIUM","isPlaceholder","undefined","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","CommonInteractionStyling","dropdown","focusStyles","ButtonDropdownContentStyling","TextButtonDropdownContent","TextButtonDropdownIcon","TextButtonDropdownArrow","TextButtonDropdownText","TextButtonDropdownWrapper","primary_20","primary_700","primary_100"],"mappings":"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","sourcesContent":["import styled, {css} from 'styled-components';\nimport {CommonInteractionStyling} from '../common';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {\n  ComponentMStyling,\n  ComponentLStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles/typography';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nexport const Dropdown = styled.div<{ isButton: boolean; locked?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\n  position: relative;\n  display: inline-block;\n\n  ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\n  ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : '')}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  &:focus-within {\n    z-index: ${Z_INDEXES.focus};\n  }\n\n  input:hover + div {\n    color: ${COLORS.primary_600};\n  }\n\n  input:active + div {\n    color: ${COLORS.primary_800};\n  }\n\n\n`;\n\nconst lockedState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n  color: ${COLORS.neutral_600};\n  pointer-events: none;\n  cursor: not-allowed;\n\n  input {\n    color: ${COLORS.neutral_600} !important;\n  }\n\n  .dropdown-arrow {\n    color: ${COLORS.neutral_300} !important;\n  }\n`;\n\nconst disabledState = css`\n  background-color: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n  color: ${COLORS.neutral_300};\n  pointer-events: none;\n  cursor: not-allowed;\n\n  .dropdown-arrow {\n    color: ${COLORS.neutral_300} !important;\n  }\n\n  input {\n    color: ${COLORS.neutral_300} !important;\n\n    ::placeholder {\n      color: ${COLORS.neutral_300} !important;\n    }\n  }\n`;\n\nconst activeValidationMessage = css`\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n`;\n\nconst placeholderStyling = css`\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const InputField = styled.input`\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ${COLORS.black} !important;\n  padding: 0;\n  flex-grow: 1;\n  display: flex;\n  justify-content: center;\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n`;\n\nexport const StyledField = styled.div<{ disabled: boolean; locked: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string; minWidth?: string }>`\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\n  width: 100%;\n\n  background: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  position: relative;\n\n  input {\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  &::placeholder {\n    ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 16px;\n    height: 56px;\n\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 12px 16px;\n    height: 48px;\n\n    &::placeholder {\n      ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    height: 56px;\n    padding: 16px;\n\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  .dropdown-arrow {\n    width: 24px;\n    height: 24px;\n    color: ${(props) => props.isPlaceholder ? COLORS.neutral_600 : undefined};\n  }\n\n  &:focus {\n    outline: 3px solid #ddd;\n  }\n\n  &:focus-within,\n  &.focus-visible-within {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &:hover:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_600};\n      }\n    }\n\n    .dropdown-arrow {\n      color: ${COLORS.primary_600};\n    }\n\n    cursor: pointer;\n  }\n\n  &:active:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_800};\n      }\n    }\n\n    .dropdown-arrow {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &.button {\n    ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ${COLORS.neutral_800};\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n\n  ${(props) => (props.disabled ? disabledState : '')}\n  ${(props) => (props.locked ? lockedState : '')}\n  ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n  ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n  ${CommonInteractionStyling};\n\n  &.focus-visible,\n  &.focus-visible-within {\n    z-index: ${Z_INDEXES.dropdown + 1} !important;\n    ${focusStyles}\n  }\n`;\n\nexport const ButtonDropdownContentStyling = css`\n  min-width: 344px;\n  right: 0;\n`;\n\n\nexport const TextButtonDropdownContent = styled.div`\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: 64px;\n  min-height: 32px;\n  padding: 4px 8px;\n  border-radius: 4px;\n`;\n\nexport const TextButtonDropdownIcon = styled.div`\n  width: 24px;\n  height: 24px;\n`;\n\nexport const TextButtonDropdownArrow = styled.div`\n  width: 24px;\n  height: 24px;\n`;\n\nexport const TextButtonDropdownText = styled.div`\n  flex: 1\n`;\n\nexport const TextButtonDropdownWrapper = styled.div<{ locked?: boolean; disabled?: boolean }>`\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  cursor: pointer;\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n\n  .expanded {\n    color: ${COLORS.neutral_800};\n\n    ${TextButtonDropdownContent} {\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:hover:not(.disabled) {\n    ${TextButtonDropdownContent} {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n    }\n  }\n\n  &:active:not(.disabled) {\n    ${TextButtonDropdownContent} {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300};\n  }\n\n}`;\n"],"file":"CommonStyling.cjs"}

package/dist/Dropdown/CommonStyling.d.ts

@@ -1,6 +1,6 @@
 export declare const Dropdown: import("styled-components").StyledComponent<"div", any, {
     isButton: boolean;
-    readOnly?: boolean | undefined;
+    locked?: boolean | undefined;
     disabled?: boolean | undefined;
     margin?: string | undefined;
     minWidth?: string | undefined;
@@ -8,7 +8,7 @@ export declare const Dropdown: import("styled-components").StyledComponent<"div"
 export declare const InputField: import("styled-components").StyledComponent<"input", any, {}, never>;
 export declare const StyledField: import("styled-components").StyledComponent<"div", any, {
     disabled: boolean;
-    readOnly: boolean;
+    locked: boolean;
     showValidationMessage?: boolean | undefined;
     isPlaceholder?: boolean | undefined;
     fontSize?: string | undefined;
@@ -19,4 +19,7 @@ export declare const TextButtonDropdownContent: import("styled-components").Styl
 export declare const TextButtonDropdownIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TextButtonDropdownArrow: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TextButtonDropdownText: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TextButtonDropdownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TextButtonDropdownWrapper: import("styled-components").StyledComponent<"div", any, {
+    locked?: boolean | undefined;
+    disabled?: boolean | undefined;
+}, never>;

package/dist/Dropdown/CommonStyling.js

@@ -10,13 +10,13 @@ import { Z_INDEXES } from '../styles/z-indexes';
 export var Dropdown = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  display: inline-block;\n\n  ", "\n  ", "\n  ", "\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  &:focus-within {\n    z-index: ", ";\n  }\n\n  input:hover + div {\n    color: ", ";\n  }\n\n  input:active + div {\n    color: ", ";\n  }\n\n\n"])), function (props) {
   return !props.isButton && (props !== null && props !== void 0 && props.minWidth ? "width: 100%; min-width: ".concat(props.minWidth, ";") : 'width: 100%; min-width: 344px;');
 }, function (props) {
-  return props.readOnly || props.disabled ? 'cursor: not-allowed;' : '';
+  return props.locked || props.disabled ? 'cursor: not-allowed;' : '';
 }, function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
 }, Z_INDEXES.focus, COLORS.primary_600, COLORS.primary_800);
 var lockedState = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  color: ", ";\n  pointer-events: none;\n  cursor: not-allowed;\n\n  input {\n    color: ", " !important;\n  }\n\n  .dropdown-arrow {\n    color: ", " !important;\n  }\n"])), COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_600, COLORS.neutral_600, COLORS.neutral_300);
 var disabledState = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  color: ", ";\n  pointer-events: none;\n  cursor: not-allowed;\n\n  .dropdown-arrow {\n    color: ", " !important;\n  }\n\n  input {\n    color: ", " !important;\n\n    ::placeholder {\n      color: ", " !important;\n    }\n  }\n"])), COLORS.white, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_300);
-var activeValidationMessage = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  box-shadow: inset 0px 0px 0px 2px ", ";\n"])), COLORS.critical_400);
+var activeValidationMessage = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  box-shadow: inset 0px 0px 0px 2px ", ";\n"])), COLORS.warning_400);
 var placeholderStyling = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", "\n"])), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600));
 export var InputField = styled.input(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ", " !important;\n  padding: 0;\n  flex-grow: 1;\n  display: flex;\n  justify-content: center;\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n"])), COLORS.black);
 export var StyledField = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: ", ";\n  width: 100%;\n\n  background: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  position: relative;\n\n  input {\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  &::placeholder {\n    ", "\n  }\n\n  ", " {\n    ", "\n    padding: 16px;\n    height: 56px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    padding: 12px 16px;\n    height: 48px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    ", "\n    height: 56px;\n    padding: 16px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  .dropdown-arrow {\n    width: 24px;\n    height: 24px;\n    color: ", ";\n  }\n\n  &:focus {\n    outline: 3px solid #ddd;\n  }\n\n  &:focus-within,\n  &.focus-visible-within {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &:hover:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ", ";\n\n    input {\n      ::placeholder {\n        color: ", ";\n      }\n    }\n\n    .dropdown-arrow {\n      color: ", ";\n    }\n\n    cursor: pointer;\n  }\n\n  &:active:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ", ";\n\n    input {\n      ::placeholder {\n        color: ", ";\n      }\n    }\n\n    .dropdown-arrow {\n      color: ", ";\n    }\n  }\n\n  &.button {\n    ", "\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ", ";\n      background: ", ";\n    }\n  }\n\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  ", ";\n\n  &.focus-visible,\n  &.focus-visible-within {\n    z-index: ", " !important;\n    ", "\n  }\n"])), ComponentSStyling(ComponentTextStyle.Regular, 'inherit'), function (props) {
@@ -28,7 +28,7 @@ export var StyledField = styled.div(_templateObject7 || (_templateObject7 = _tag
 }, COLORS.neutral_800, COLORS.neutral_20, function (props) {
   return props.disabled ? disabledState : '';
 }, function (props) {
-  return props.readOnly ? lockedState : '';
+  return props.locked ? lockedState : '';
 }, function (props) {
   return props.showValidationMessage ? activeValidationMessage : '';
 }, function (props) {

package/dist/Dropdown/CommonStyling.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dropdown/CommonStyling.tsx"],"names":["styled","css","CommonInteractionStyling","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","Z_INDEXES","Dropdown","div","props","isButton","minWidth","readOnly","disabled","margin","focus","primary_600","primary_800","lockedState","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","critical_400","placeholderStyling","Italic","InputField","input","black","StyledField","Regular","neutral_400","MEDIUM","isPlaceholder","undefined","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","dropdown","ButtonDropdownContentStyling","TextButtonDropdownContent","TextButtonDropdownIcon","TextButtonDropdownArrow","TextButtonDropdownText","TextButtonDropdownWrapper","primary_20","primary_700","primary_100"],"mappings":"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","sourcesContent":["import styled, {css} from 'styled-components';\nimport {CommonInteractionStyling} from '../common';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {\n  ComponentMStyling,\n  ComponentLStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles/typography';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nexport const Dropdown = styled.div<{ isButton: boolean; readOnly?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\n  position: relative;\n  display: inline-block;\n\n  ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  &:focus-within {\n    z-index: ${Z_INDEXES.focus};\n  }\n\n  input:hover + div {\n    color: ${COLORS.primary_600};\n  }\n\n  input:active + div {\n    color: ${COLORS.primary_800};\n  }\n\n\n`;\n\nconst lockedState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n  color: ${COLORS.neutral_600};\n  pointer-events: none;\n  cursor: not-allowed;\n\n  input {\n    color: ${COLORS.neutral_600} !important;\n  }\n\n  .dropdown-arrow {\n    color: ${COLORS.neutral_300} !important;\n  }\n`;\n\nconst disabledState = css`\n  background-color: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n  color: ${COLORS.neutral_300};\n  pointer-events: none;\n  cursor: not-allowed;\n\n  .dropdown-arrow {\n    color: ${COLORS.neutral_300} !important;\n  }\n\n  input {\n    color: ${COLORS.neutral_300} !important;\n\n    ::placeholder {\n      color: ${COLORS.neutral_300} !important;\n    }\n  }\n`;\n\nconst activeValidationMessage = css`\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n`;\n\nconst placeholderStyling = css`\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const InputField = styled.input`\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ${COLORS.black} !important;\n  padding: 0;\n  flex-grow: 1;\n  display: flex;\n  justify-content: center;\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n`;\n\nexport const StyledField = styled.div<{ disabled: boolean; readOnly: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string; minWidth?: string }>`\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\n  width: 100%;\n\n  background: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  position: relative;\n\n  input {\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  &::placeholder {\n    ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 16px;\n    height: 56px;\n\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 12px 16px;\n    height: 48px;\n\n    &::placeholder {\n      ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    height: 56px;\n    padding: 16px;\n\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  .dropdown-arrow {\n    width: 24px;\n    height: 24px;\n    color: ${(props) => props.isPlaceholder ? COLORS.neutral_600 : undefined};\n  }\n\n  &:focus {\n    outline: 3px solid #ddd;\n  }\n\n  &:focus-within,\n  &.focus-visible-within {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &:hover:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_600};\n      }\n    }\n\n    .dropdown-arrow {\n      color: ${COLORS.primary_600};\n    }\n\n    cursor: pointer;\n  }\n\n  &:active:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_800};\n      }\n    }\n\n    .dropdown-arrow {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &.button {\n    ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ${COLORS.neutral_800};\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n\n  ${(props) => (props.disabled ? disabledState : '')}\n  ${(props) => (props.readOnly ? lockedState : '')}\n  ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n  ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n  ${CommonInteractionStyling};\n\n  &.focus-visible,\n  &.focus-visible-within {\n    z-index: ${Z_INDEXES.dropdown + 1} !important;\n    ${focusStyles}\n  }\n`;\n\nexport const ButtonDropdownContentStyling = css`\n  min-width: 344px;\n  right: 0;\n`;\n\n\n\nexport const TextButtonDropdownContent = styled.div`\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: 64px;\n  min-height: 32px;\n  padding: 4px 8px;\n  border-radius: 4px;\n`;\n\nexport const TextButtonDropdownIcon = styled.div`\n  width: 24px;\n  height: 24px;\n`;\n\nexport const TextButtonDropdownArrow = styled.div`\n  width: 24px;\n  height: 24px;\n`;\n\nexport const TextButtonDropdownText = styled.div`\n  flex: 1\n`;\n\nexport const TextButtonDropdownWrapper = styled.div`\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  cursor: pointer;\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n\n  .expanded {\n    color: ${COLORS.neutral_800};\n\n    ${TextButtonDropdownContent} {\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:hover:not(.disabled) {\n    ${TextButtonDropdownContent} {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n    }\n  }\n\n  &:active:not(.disabled) {\n    ${TextButtonDropdownContent} {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300};\n  }\n\n}`;\n"],"file":"CommonStyling.js"}
+{"version":3,"sources":["../../src/Dropdown/CommonStyling.tsx"],"names":["styled","css","CommonInteractionStyling","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","Z_INDEXES","Dropdown","div","props","isButton","minWidth","locked","disabled","margin","focus","primary_600","primary_800","lockedState","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","warning_400","placeholderStyling","Italic","InputField","input","black","StyledField","Regular","neutral_400","MEDIUM","isPlaceholder","undefined","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","dropdown","ButtonDropdownContentStyling","TextButtonDropdownContent","TextButtonDropdownIcon","TextButtonDropdownArrow","TextButtonDropdownText","TextButtonDropdownWrapper","primary_20","primary_700","primary_100"],"mappings":";;;;AAAA,OAAOA,MAAP,IAAgBC,GAAhB,QAA0B,mBAA1B;AACA,SAAQC,wBAAR,QAAuC,WAAvC;AACA,SAAQC,WAAR,EAAqBC,MAArB,EAA6BC,kBAA7B,EAAiDC,WAAjD,QAAmE,WAAnE;AACA,SACEC,iBADF,EAGEC,iBAHF,EAIEC,kBAJF,EAKEC,mBALF,QAMO,sBANP;AAQA,SAAQC,SAAR,QAAwB,qBAAxB;AAEA,OAAO,IAAMC,QAAQ,GAAGZ,MAAM,CAACa,GAAV,kXAIjB,UAACC,KAAD;AAAA,SAAW,CAACA,KAAK,CAACC,QAAP,KAAoBD,KAAK,SAAL,IAAAA,KAAK,WAAL,IAAAA,KAAK,CAAEE,QAAP,qCAA6CF,KAAK,CAACE,QAAnD,SAAiE,gCAArF,CAAX;AAAA,CAJiB,EAKjB,UAACF,KAAD;AAAA,SAAYA,KAAK,CAACG,MAAN,IAAgBH,KAAK,CAACI,QAAtB,GAAiC,sBAAjC,GAA0D,EAAtE;AAAA,CALiB,EAMjB,UAACJ,KAAD;AAAA,SAAYA,KAAK,CAACK,MAAN,qBAA0BL,KAAK,CAACK,MAAhC,SAA4C,EAAxD;AAAA,CANiB,EAgBNR,SAAS,CAACS,KAhBJ,EAoBRhB,MAAM,CAACiB,WApBC,EAwBRjB,MAAM,CAACkB,WAxBC,CAAd;AA8BP,IAAMC,WAAW,GAAGtB,GAAH,yTACKG,MAAM,CAACoB,WADZ,EAEqBpB,MAAM,CAACqB,WAF5B,EAGNrB,MAAM,CAACsB,WAHD,EAQJtB,MAAM,CAACsB,WARH,EAYJtB,MAAM,CAACqB,WAZH,CAAjB;AAgBA,IAAME,aAAa,GAAG1B,GAAH,sXACGG,MAAM,CAACwB,KADV,EAEmBxB,MAAM,CAACoB,WAF1B,EAGRpB,MAAM,CAACqB,WAHC,EAQNrB,MAAM,CAACqB,WARD,EAYNrB,MAAM,CAACqB,WAZD,EAeJrB,MAAM,CAACqB,WAfH,CAAnB;AAoBA,IAAMI,uBAAuB,GAAG5B,GAAH,qHACSG,MAAM,CAAC0B,WADhB,CAA7B;AAIA,IAAMC,kBAAkB,GAAG9B,GAAH,kFACpBM,iBAAiB,CAACF,kBAAkB,CAAC2B,MAApB,EAA4B5B,MAAM,CAACsB,WAAnC,CADG,CAAxB;AAIA,OAAO,IAAMO,UAAU,GAAGjC,MAAM,CAACkC,KAAV,8bAKZ9B,MAAM,CAAC+B,KALK,CAAhB;AAmBP,OAAO,IAAMC,WAAW,GAAGpC,MAAM,CAACa,GAAV,+6DACpBL,iBAAiB,CAACH,kBAAkB,CAACgC,OAApB,EAA6B,SAA7B,CADG,EAKT,UAACvB,KAAD;AAAA,SAAYA,KAAK,CAACE,QAAN,aAAoBF,KAAK,CAACE,QAA1B,IAAuC,OAAnD;AAAA,CALS,EAQRZ,MAAM,CAACwB,KARC,EAScxB,MAAM,CAACkC,WATrB,EA0BlB5B,mBAAmB,CAACL,kBAAkB,CAAC2B,MAApB,EAA4B5B,MAAM,CAACsB,WAAnC,CA1BD,EA6BpBvB,WAAW,CAACoC,MA7BQ,EA8BlBhC,iBAAiB,CAACF,kBAAkB,CAACgC,OAApB,EAA6B,SAA7B,CA9BC,EAmChB5B,kBAAkB,CAACJ,kBAAkB,CAAC2B,MAApB,EAA4B5B,MAAM,CAACsB,WAAnC,CAnCF,EAwClBlB,iBAAiB,CAACH,kBAAkB,CAACgC,OAApB,EAA6B,SAA7B,CAxCC,EA6ChB3B,mBAAmB,CAACL,kBAAkB,CAAC2B,MAApB,EAA4B5B,MAAM,CAACsB,WAAnC,CA7CH,EAkDlBnB,iBAAiB,CAACF,kBAAkB,CAACgC,OAApB,EAA6B,SAA7B,CAlDC,EAuDhB5B,kBAAkB,CAACJ,kBAAkB,CAAC2B,MAApB,EAA4B5B,MAAM,CAACsB,WAAnC,CAvDF,EA8DX,UAACZ,KAAD;AAAA,SAAWA,KAAK,CAAC0B,aAAN,GAAsBpC,MAAM,CAACsB,WAA7B,GAA2Ce,SAAtD;AAAA,CA9DW,EAuEgBrC,MAAM,CAACkB,WAvEvB,EA2EgBlB,MAAM,CAACsC,WA3EvB,EA+EPtC,MAAM,CAACiB,WA/EA,EAoFTjB,MAAM,CAACiB,WApFE,EA2FgBjB,MAAM,CAACuC,WA3FvB,EA+FPvC,MAAM,CAACkB,WA/FA,EAoGTlB,MAAM,CAACkB,WApGE,EAyGlB,UAACR,KAAD;AAAA,SAAWN,iBAAiB,CAACH,kBAAkB,CAACuC,IAApB,EAA0B9B,KAAK,CAACI,QAAN,GAAiBd,MAAM,CAACqB,WAAxB,GAAsCrB,MAAM,CAACsB,WAAvE,CAA5B;AAAA,CAzGkB,EAqHTtB,MAAM,CAACyC,WArHE,EAsHJzC,MAAM,CAAC0C,UAtHH,EA2HpB,UAAChC,KAAD;AAAA,SAAYA,KAAK,CAACI,QAAN,GAAiBS,aAAjB,GAAiC,EAA7C;AAAA,CA3HoB,EA4HpB,UAACb,KAAD;AAAA,SAAYA,KAAK,CAACG,MAAN,GAAeM,WAAf,GAA6B,EAAzC;AAAA,CA5HoB,EA6HpB,UAACT,KAAD;AAAA,SAAYA,KAAK,CAACiC,qBAAN,GAA8BlB,uBAA9B,GAAwD,EAApE;AAAA,CA7HoB,EA8HpB,UAACf,KAAD;AAAA,SAAYA,KAAK,CAAC0B,aAAN,GAAsBT,kBAAtB,GAA2C,EAAvD;AAAA,CA9HoB,EAgIpB7B,wBAhIoB,EAoITS,SAAS,CAACqC,QAAV,GAAqB,CApIZ,EAqIlB1C,WArIkB,CAAjB;AAyIP,OAAO,IAAM2C,4BAA4B,GAAGhD,GAAH,2GAAlC;AAMP,OAAO,IAAMiD,yBAAyB,GAAGlD,MAAM,CAACa,GAAV,gPAA/B;AAWP,OAAO,IAAMsC,sBAAsB,GAAGnD,MAAM,CAACa,GAAV,4GAA5B;AAKP,OAAO,IAAMuC,uBAAuB,GAAGpD,MAAM,CAACa,GAAV,4GAA7B;AAKP,OAAO,IAAMwC,sBAAsB,GAAGrD,MAAM,CAACa,GAAV,sFAA5B;AAIP,OAAO,IAAMyC,yBAAyB,GAAGtD,MAAM,CAACa,GAAV,wmBAQlCL,iBAAiB,CAACH,kBAAkB,CAACuC,IAApB,EAA0BxC,MAAM,CAACsB,WAAjC,CARiB,EAWzBtB,MAAM,CAACyC,WAXkB,EAahCK,yBAbgC,EAclB9C,MAAM,CAAC0C,UAdW,EAmBhCxC,WAnBgC,EAuBhC4C,yBAvBgC,EAwBZ9C,MAAM,CAACmD,UAxBK,EAyBvBnD,MAAM,CAACoD,WAzBgB,EA8BhCN,yBA9BgC,EA+BZ9C,MAAM,CAACqD,WA/BK,EAgCvBrD,MAAM,CAACkB,WAhCgB,EAsCzBlB,MAAM,CAACqB,WAtCkB,CAA/B","sourcesContent":["import styled, {css} from 'styled-components';\nimport {CommonInteractionStyling} from '../common';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {\n  ComponentMStyling,\n  ComponentLStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles/typography';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nexport const Dropdown = styled.div<{ isButton: boolean; locked?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\n  position: relative;\n  display: inline-block;\n\n  ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\n  ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : '')}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  &:focus-within {\n    z-index: ${Z_INDEXES.focus};\n  }\n\n  input:hover + div {\n    color: ${COLORS.primary_600};\n  }\n\n  input:active + div {\n    color: ${COLORS.primary_800};\n  }\n\n\n`;\n\nconst lockedState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n  color: ${COLORS.neutral_600};\n  pointer-events: none;\n  cursor: not-allowed;\n\n  input {\n    color: ${COLORS.neutral_600} !important;\n  }\n\n  .dropdown-arrow {\n    color: ${COLORS.neutral_300} !important;\n  }\n`;\n\nconst disabledState = css`\n  background-color: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n  color: ${COLORS.neutral_300};\n  pointer-events: none;\n  cursor: not-allowed;\n\n  .dropdown-arrow {\n    color: ${COLORS.neutral_300} !important;\n  }\n\n  input {\n    color: ${COLORS.neutral_300} !important;\n\n    ::placeholder {\n      color: ${COLORS.neutral_300} !important;\n    }\n  }\n`;\n\nconst activeValidationMessage = css`\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n`;\n\nconst placeholderStyling = css`\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const InputField = styled.input`\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ${COLORS.black} !important;\n  padding: 0;\n  flex-grow: 1;\n  display: flex;\n  justify-content: center;\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n`;\n\nexport const StyledField = styled.div<{ disabled: boolean; locked: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string; minWidth?: string }>`\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\n  width: 100%;\n\n  background: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  position: relative;\n\n  input {\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  &::placeholder {\n    ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 16px;\n    height: 56px;\n\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 12px 16px;\n    height: 48px;\n\n    &::placeholder {\n      ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    height: 56px;\n    padding: 16px;\n\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  .dropdown-arrow {\n    width: 24px;\n    height: 24px;\n    color: ${(props) => props.isPlaceholder ? COLORS.neutral_600 : undefined};\n  }\n\n  &:focus {\n    outline: 3px solid #ddd;\n  }\n\n  &:focus-within,\n  &.focus-visible-within {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &:hover:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_600};\n      }\n    }\n\n    .dropdown-arrow {\n      color: ${COLORS.primary_600};\n    }\n\n    cursor: pointer;\n  }\n\n  &:active:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_800};\n      }\n    }\n\n    .dropdown-arrow {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &.button {\n    ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ${COLORS.neutral_800};\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n\n  ${(props) => (props.disabled ? disabledState : '')}\n  ${(props) => (props.locked ? lockedState : '')}\n  ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n  ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n  ${CommonInteractionStyling};\n\n  &.focus-visible,\n  &.focus-visible-within {\n    z-index: ${Z_INDEXES.dropdown + 1} !important;\n    ${focusStyles}\n  }\n`;\n\nexport const ButtonDropdownContentStyling = css`\n  min-width: 344px;\n  right: 0;\n`;\n\n\nexport const TextButtonDropdownContent = styled.div`\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: 64px;\n  min-height: 32px;\n  padding: 4px 8px;\n  border-radius: 4px;\n`;\n\nexport const TextButtonDropdownIcon = styled.div`\n  width: 24px;\n  height: 24px;\n`;\n\nexport const TextButtonDropdownArrow = styled.div`\n  width: 24px;\n  height: 24px;\n`;\n\nexport const TextButtonDropdownText = styled.div`\n  flex: 1\n`;\n\nexport const TextButtonDropdownWrapper = styled.div<{ locked?: boolean; disabled?: boolean }>`\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  cursor: pointer;\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n\n  .expanded {\n    color: ${COLORS.neutral_800};\n\n    ${TextButtonDropdownContent} {\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:hover:not(.disabled) {\n    ${TextButtonDropdownContent} {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n    }\n  }\n\n  &:active:not(.disabled) {\n    ${TextButtonDropdownContent} {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300};\n  }\n\n}`;\n"],"file":"CommonStyling.js"}

package/dist/Dropdown/DropdownFilter.cjs

@@ -51,7 +51,7 @@ var DropdownFilter = function DropdownFilter(_ref) {
       required = _ref.required,
       messageOnNoResults = _ref.messageOnNoResults,
       disabled = _ref.disabled,
-      readOnly = _ref.readOnly,
+      locked = _ref.locked,
       scrollable = _ref.scrollable,
       activeValidationMessage = _ref.activeValidationMessage,
       autofilledMessage = _ref.autofilledMessage,
@@ -105,7 +105,7 @@ var DropdownFilter = function DropdownFilter(_ref) {
   var styledFieldRef = (0, _common.useFocusVisibleRef)();
   var inputRef = (0, _common.useFocusVisibleRef)([styledFieldRef]);
   var clearButtonRef = React.useRef(null);
-  (0, _common.useActionWithin)(styledFieldRef, input && !readOnly && !disabled ? [clearButtonRef] : []);
+  (0, _common.useActionWithin)(styledFieldRef, input && !locked && !disabled ? [clearButtonRef] : []);
   var containerRef = (0, _common.useClickOutsideRef)(function () {
     return setIsOpen(false);
   }, [], (0, _common.useFocusOutsideRef)(function () {
@@ -173,7 +173,7 @@ var DropdownFilter = function DropdownFilter(_ref) {
       ref: styledFieldRef,
       className: size ? size : '',
       onClick: function onClick(e) {
-        if (!readOnly && !disabled) {
+        if (!locked && !disabled) {
           e.stopPropagation();
           setIsOpen(!isOpen);
 
@@ -189,7 +189,7 @@ var DropdownFilter = function DropdownFilter(_ref) {
         }
       },
       disabled: disabled || false,
-      readOnly: readOnly || false,
+      locked: locked || false,
       isPlaceholder: !input,
       fontSize: buttonFontSize,
       showValidationMessage: !!activeValidationMessage,
@@ -208,7 +208,7 @@ var DropdownFilter = function DropdownFilter(_ref) {
             setSelectedValues([]);
           }
 
-          if (!readOnly && !disabled && e.target.value !== input) {
+          if (!locked && !disabled && e.target.value !== input) {
             setRestartFilter(false);
             setIsOpen(true);
             setInput(e.target.value);
@@ -225,9 +225,9 @@ var DropdownFilter = function DropdownFilter(_ref) {
           return setPlaceholderSearch(placeholder || '');
         },
         required: required,
-        tabIndex: disabled || readOnly ? -1 : 0,
+        tabIndex: disabled || locked ? -1 : 0,
         disabled: disabled || false
-      }), input && !readOnly && !disabled && !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+      }), input && !locked && !disabled && !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
         action: handleInputClear,
         ref: clearButtonRef,
         useTransparentBackground: true,
@@ -237,7 +237,7 @@ var DropdownFilter = function DropdownFilter(_ref) {
         },
         variant: 'secondary',
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Clear, {})
-      }), !disabled && !readOnly && loading && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      }), !disabled && !locked && loading && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         style: {
           marginLeft: '-4xp'
         },
@@ -247,7 +247,7 @@ var DropdownFilter = function DropdownFilter(_ref) {
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: 'dropdown-arrow',
-        children: isOpen && !readOnly && !disabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.ArrowDropUp, {
+        children: isOpen && !locked && !disabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.ArrowDropUp, {
           size: "24px",
           className: size ? size : ''
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.ArrowDropDown, {
@@ -263,10 +263,10 @@ var DropdownFilter = function DropdownFilter(_ref) {
       ref: containerRef,
       disabled: disabled,
       isButton: false,
-      readOnly: readOnly,
+      locked: locked,
       className: size ? size : '',
       margin: margin,
-      children: [renderInput(), !readOnly && !disabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownContent.default, {
+      children: [renderInput(), !locked && !disabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownContent.default, {
         isOpen: isOpen && !loading,
         messageOnNoResults: messageOnNoResults !== null && messageOnNoResults !== void 0 ? messageOnNoResults : '',
         selectedValues: selectedValues,
@@ -292,11 +292,11 @@ var DropdownFilter = function DropdownFilter(_ref) {
         isButton: false,
         id: "".concat(id, "_dropdowncontent")
       })]
-    }), activeValidationMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ErrorMessage, {
+    }), activeValidationMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.WarningMessage, {
       className: size || '',
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.TechnicalWarning, {
         size: "20px",
-        color: _styles.COLORS.critical_400
+        color: _styles.COLORS.warning_400
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         children: activeValidationMessage
       })]
@@ -321,15 +321,15 @@ DropdownFilter.propTypes = {
   onInputChange: _propTypes.default.func,
   required: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
-  readOnly: _propTypes.default.bool,
-  loading: _propTypes.default.bool,
+  locked: _propTypes.default.bool,
   disableFiltering: _propTypes.default.bool,
   messageOnNoResults: _propTypes.default.string,
   activeValidationMessage: _propTypes.default.string,
   autofilledMessage: _propTypes.default.string,
   buttonFontSize: _propTypes.default.string,
   margin: _propTypes.default.string,
-  scrollable: _propTypes.default.bool
+  scrollable: _propTypes.default.bool,
+  loading: _propTypes.default.bool
 };
 var _default = DropdownFilter;
 exports.default = _default;

package/dist/Dropdown/DropdownFilter.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dropdown/DropdownFilter.tsx"],"names":["DropdownFilter","id","list","placeholder","onSelect","onInputChange","value","required","messageOnNoResults","disabled","readOnly","scrollable","activeValidationMessage","autofilledMessage","size","disableFiltering","buttonFontSize","margin","loading","React","useState","isOpen","setIsOpen","input","setInput","placeholderSearch","setPlaceholderSearch","restartFilter","setRestartFilter","selectedItem","setSelectedItem","selectedValues","setSelectedValues","focused","setFocused","init","setInit","styledFieldRef","inputRef","clearButtonRef","useRef","containerRef","handleInputKeyDown","e","key","preventDefault","useEffect","length","val","item","find","a","displayLabel","undefined","handleInputClear","current","focus","focusVisible","detail","renderInput","stopPropagation","blur","defaultOnMouseDownHandler","Math","floor","random","target","marginLeft","Size","Small","COLORS","neutral_600","itemsType","multiSelect","action","onValueUpdate","values","items","critical_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {COLORS} from '../styles';\nimport {ArrowDropDown, ArrowDropUp, Information, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {StyledField, Dropdown, InputField} from './CommonStyling';\nimport DropdownContent, {DropdownItem} from './DropdownContent';\nimport {Size} from '../types'\nimport {AutofilledMessage, ErrorMessage} from '../InputFields/styling';\nimport {\n  defaultOnMouseDownHandler,\n  useActionWithin,\n  useClickOutsideRef,\n  useFocusOutsideRef,\n  useFocusVisibleRef\n} from '../common';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\n\ninterface DropdownFilterProps {\n  id: string;\n  list: DropdownItem[];\n  placeholder?: string;\n\n  value?: string;\n  onSelect?: (value: string) => void;\n  onInputChange?: (input: string) => void;\n\n  required?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  loading?: boolean;\n\n  disableFiltering?: boolean;\n\n  messageOnNoResults?: string;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n\n  buttonFontSize?: string;\n  margin?: string;\n  scrollable?: boolean;\n}\n\nconst DropdownFilter = ({\n                          id,\n                          list,\n                          placeholder,\n                          onSelect,\n                          onInputChange,\n                          value,\n                          required,\n                          messageOnNoResults,\n                          disabled,\n                          readOnly,\n                          scrollable,\n                          activeValidationMessage,\n                          autofilledMessage,\n                          size,\n                          disableFiltering,\n                          buttonFontSize,\n                          margin = '4px 0',\n                          loading\n                        }: DropdownFilterProps) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>();\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [selectedItem, setSelectedItem] = React.useState<DropdownItem>();\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [init, setInit] = React.useState<boolean>(true);\n\n  const styledFieldRef = useFocusVisibleRef();\n  const inputRef = useFocusVisibleRef([styledFieldRef]);\n  const clearButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  useActionWithin(styledFieldRef, input && !readOnly && !disabled ? [clearButtonRef] : []);\n\n  const containerRef = useClickOutsideRef(() => setIsOpen(false), [], useFocusOutsideRef(() => setIsOpen(false)));\n\n  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Esc' || e.key === 'Escape') {\n      e.preventDefault();\n    }\n    if (e.key === 'ArrowDown' || e.key === 'Down' || e.key === 'ArrowUp' || e.key === 'Up') {\n      e.preventDefault();\n      if (!isOpen) {\n        setIsOpen(true);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    setInit(true);\n    setSelectedValues(!!value ? [value] : []);\n  }, [value]);\n\n  React.useEffect(() => {\n    if (selectedValues?.length) {\n      const val = selectedValues[0];\n      const item = list.find(a => a.value === val);\n      setSelectedItem(item);\n      setInput(item?.displayLabel ?? item?.value ?? '');\n      onSelect && !init && onSelect(val);\n    } else {\n      setSelectedItem(undefined);\n      onSelect && !init && onSelect('');\n      setInput('');\n    }\n  }, [selectedValues])\n\n  React.useEffect(() => {\n    if (!isOpen && !!selectedItem) {\n      setInput(selectedItem?.displayLabel ?? selectedItem?.value ?? '');\n    }\n\n    setRestartFilter(true);\n  }, [isOpen, selectedItem]);\n\n  const handleInputClear = (e: any) => {\n    setInput('');\n    setSelectedValues([]);\n    onSelect && onSelect('');\n    inputRef.current?.focus({focusVisible: e?.detail !== 1} as any)\n  };\n\n  const renderInput = () => {\n    return (\n      <StyledField\n        ref={styledFieldRef}\n        className={size ? size : ''}\n        onClick={(e: any) => {\n          if (!readOnly && !disabled) {\n            e.stopPropagation();\n            setIsOpen(!isOpen);\n            if (isOpen) {\n              inputRef.current?.blur();\n            } else {\n              inputRef.current?.focus();\n            }\n          }\n        }}\n        disabled={disabled || false}\n        readOnly={readOnly || false}\n        isPlaceholder={!input}\n        fontSize={buttonFontSize}\n        showValidationMessage={!!activeValidationMessage}\n        onMouseDown={defaultOnMouseDownHandler}\n        data-testid={`otherdiv_${id}`}>\n        <InputField\n          id={id}\n          ref={inputRef}\n          autoComplete={'off-' + Math.floor(Math.random() * 999999999999)}\n          type=\"search\"\n          placeholder={placeholderSearch}\n          onKeyDown={handleInputKeyDown}\n          value={input}\n          onChange={(e: any) => {\n            if (!e.target.value) {\n              setSelectedValues([])\n            }\n            if (!readOnly && !disabled && e.target.value !== input) {\n              setRestartFilter(false);\n              setIsOpen(true);\n              setInput(e.target.value);\n              if (onInputChange) {\n                onInputChange(e.target.value || '');\n              }\n            }\n          }}\n          onFocus={() => setPlaceholderSearch('')}\n          onBlur={() => setPlaceholderSearch(placeholder || '')}\n          required={required}\n          tabIndex={disabled || readOnly ? -1 : 0}\n          disabled={disabled || false}\n        />\n        {\n          input && !readOnly && !disabled && !loading &&\n          <IconButton action={handleInputClear}\n                      ref={clearButtonRef}\n                      useTransparentBackground={true}\n                      shape={'circular'}\n                      style={{marginLeft: '-4px'}}\n                      variant={'secondary'}>\n            <SystemIcons.Clear/>\n          </IconButton>\n        }\n\n        {\n          !disabled && !readOnly && loading &&\n          <div style={{marginLeft: '-4xp'}}>\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/>\n          </div>\n        }\n\n        <div className={'dropdown-arrow'}>\n          {isOpen && !readOnly && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\n            <ArrowDropDown size=\"24px\" className={size ? size : ''}/>}\n        </div>\n      </StyledField>\n    );\n  };\n\n  return (\n    <>\n      <Dropdown ref={containerRef}\n                disabled={disabled}\n                isButton={false}\n                readOnly={readOnly}\n                className={size ? size : ''}\n                margin={margin}>\n        {renderInput()}\n        {!readOnly && !disabled && (\n          <DropdownContent\n            isOpen={isOpen && !loading}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            selectedValues={selectedValues}\n            setSelectedValues={setSelectedValues}\n            size={size ?? Size.Small}\n            focused={focused}\n            setFocused={setFocused}\n            outline={false}\n            customizationProps={{\n              itemsType: 'normal',\n              scrollable: scrollable,\n              multiSelect: false,\n              action: () => {\n              },\n              onValueUpdate: (values: string[]) => {\n                setRestartFilter(true);\n                setInit(false);\n              },\n              items: list,\n            }}\n            filter={!disableFiltering && !restartFilter ? input || '' : ''}\n            setIsOpen={setIsOpen}\n            alignLeft={false}\n            isButton={false}\n            id={`${id}_dropdowncontent`}/>\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_400}/>\n          <span>{activeValidationMessage}</span>\n        </ErrorMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage className={size || ''}>\n          <Information size=\"20px\" color={COLORS.neutral_600}/>\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default DropdownFilter;\n"],"file":"DropdownFilter.cjs"}
+{"version":3,"sources":["../../src/Dropdown/DropdownFilter.tsx"],"names":["DropdownFilter","id","list","placeholder","onSelect","onInputChange","value","required","messageOnNoResults","disabled","locked","scrollable","activeValidationMessage","autofilledMessage","size","disableFiltering","buttonFontSize","margin","loading","React","useState","isOpen","setIsOpen","input","setInput","placeholderSearch","setPlaceholderSearch","restartFilter","setRestartFilter","selectedItem","setSelectedItem","selectedValues","setSelectedValues","focused","setFocused","init","setInit","styledFieldRef","inputRef","clearButtonRef","useRef","containerRef","handleInputKeyDown","e","key","preventDefault","useEffect","length","val","item","find","a","displayLabel","undefined","handleInputClear","current","focus","focusVisible","detail","renderInput","stopPropagation","blur","defaultOnMouseDownHandler","Math","floor","random","target","marginLeft","Size","Small","COLORS","neutral_600","itemsType","multiSelect","action","onValueUpdate","values","items","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {COLORS} from '../styles';\nimport {ArrowDropDown, ArrowDropUp, Information, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {StyledField, Dropdown, InputField} from './CommonStyling';\nimport DropdownContent, {DropdownItem} from './DropdownContent';\nimport {Size} from '../types'\nimport {AutofilledMessage, WarningMessage} from '../InputFields/styling';\nimport {\n  defaultOnMouseDownHandler,\n  useActionWithin,\n  useClickOutsideRef,\n  useFocusOutsideRef,\n  useFocusVisibleRef\n} from '../common';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\n\ninterface DropdownFilterProps {\n  id: string;\n  list: DropdownItem[];\n  placeholder?: string;\n\n  value?: string;\n  onSelect?: (value: string) => void;\n  onInputChange?: (input: string) => void;\n\n  required?: boolean;\n  disabled?: boolean;\n  locked?: boolean;\n\n  disableFiltering?: boolean;\n\n  messageOnNoResults?: string;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n\n  buttonFontSize?: string;\n  margin?: string;\n  scrollable?: boolean;\n\n  loading?: boolean;\n}\n\nconst DropdownFilter = ({\n                          id,\n                          list,\n                          placeholder,\n                          onSelect,\n                          onInputChange,\n                          value,\n                          required,\n                          messageOnNoResults,\n                          disabled,\n                          locked,\n                          scrollable,\n                          activeValidationMessage,\n                          autofilledMessage,\n                          size,\n                          disableFiltering,\n                          buttonFontSize,\n                          margin = '4px 0',\n                          loading\n                        }: DropdownFilterProps) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>();\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [selectedItem, setSelectedItem] = React.useState<DropdownItem>();\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [init, setInit] = React.useState<boolean>(true);\n\n  const styledFieldRef = useFocusVisibleRef();\n  const inputRef = useFocusVisibleRef([styledFieldRef]);\n  const clearButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  useActionWithin(styledFieldRef, input && !locked && !disabled ? [clearButtonRef] : []);\n\n  const containerRef = useClickOutsideRef(() => setIsOpen(false), [], useFocusOutsideRef(() => setIsOpen(false)));\n\n  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Esc' || e.key === 'Escape') {\n      e.preventDefault();\n    }\n    if (e.key === 'ArrowDown' || e.key === 'Down' || e.key === 'ArrowUp' || e.key === 'Up') {\n      e.preventDefault();\n      if (!isOpen) {\n        setIsOpen(true);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    setInit(true);\n    setSelectedValues(!!value ? [value] : []);\n  }, [value]);\n\n  React.useEffect(() => {\n    if (selectedValues?.length) {\n      const val = selectedValues[0];\n      const item = list.find(a => a.value === val);\n      setSelectedItem(item);\n      setInput(item?.displayLabel ?? item?.value ?? '');\n      onSelect && !init && onSelect(val);\n    } else {\n      setSelectedItem(undefined);\n      onSelect && !init && onSelect('');\n      setInput('');\n    }\n  }, [selectedValues])\n\n  React.useEffect(() => {\n    if (!isOpen && !!selectedItem) {\n      setInput(selectedItem?.displayLabel ?? selectedItem?.value ?? '');\n    }\n\n    setRestartFilter(true);\n  }, [isOpen, selectedItem]);\n\n  const handleInputClear = (e: any) => {\n    setInput('');\n    setSelectedValues([]);\n    onSelect && onSelect('');\n    inputRef.current?.focus({focusVisible: e?.detail !== 1} as any)\n  };\n\n  const renderInput = () => {\n    return (\n      <StyledField\n        ref={styledFieldRef}\n        className={size ? size : ''}\n        onClick={(e: any) => {\n          if (!locked && !disabled) {\n            e.stopPropagation();\n            setIsOpen(!isOpen);\n            if (isOpen) {\n              inputRef.current?.blur();\n            } else {\n              inputRef.current?.focus();\n            }\n          }\n        }}\n        disabled={disabled || false}\n        locked={locked || false}\n        isPlaceholder={!input}\n        fontSize={buttonFontSize}\n        showValidationMessage={!!activeValidationMessage}\n        onMouseDown={defaultOnMouseDownHandler}\n        data-testid={`otherdiv_${id}`}>\n        <InputField\n          id={id}\n          ref={inputRef}\n          autoComplete={'off-' + Math.floor(Math.random() * 999999999999)}\n          type=\"search\"\n          placeholder={placeholderSearch}\n          onKeyDown={handleInputKeyDown}\n          value={input}\n          onChange={(e: any) => {\n            if (!e.target.value) {\n              setSelectedValues([])\n            }\n            if (!locked && !disabled && e.target.value !== input) {\n              setRestartFilter(false);\n              setIsOpen(true);\n              setInput(e.target.value);\n              if (onInputChange) {\n                onInputChange(e.target.value || '');\n              }\n            }\n          }}\n          onFocus={() => setPlaceholderSearch('')}\n          onBlur={() => setPlaceholderSearch(placeholder || '')}\n          required={required}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n        />\n        {\n          input && !locked && !disabled && !loading &&\n          <IconButton action={handleInputClear}\n                      ref={clearButtonRef}\n                      useTransparentBackground={true}\n                      shape={'circular'}\n                      style={{marginLeft: '-4px'}}\n                      variant={'secondary'}>\n            <SystemIcons.Clear/>\n          </IconButton>\n        }\n\n        {\n          !disabled && !locked && loading &&\n          <div style={{marginLeft: '-4xp'}}>\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/>\n          </div>\n        }\n\n        <div className={'dropdown-arrow'}>\n          {isOpen && !locked && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\n            <ArrowDropDown size=\"24px\" className={size ? size : ''}/>}\n        </div>\n      </StyledField>\n    );\n  };\n\n  return (\n    <>\n      <Dropdown ref={containerRef}\n                disabled={disabled}\n                isButton={false}\n                locked={locked}\n                className={size ? size : ''}\n                margin={margin}>\n        {renderInput()}\n        {!locked && !disabled && (\n          <DropdownContent\n            isOpen={isOpen && !loading}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            selectedValues={selectedValues}\n            setSelectedValues={setSelectedValues}\n            size={size ?? Size.Small}\n            focused={focused}\n            setFocused={setFocused}\n            outline={false}\n            customizationProps={{\n              itemsType: 'normal',\n              scrollable: scrollable,\n              multiSelect: false,\n              action: () => {\n              },\n              onValueUpdate: (values: string[]) => {\n                setRestartFilter(true);\n                setInit(false);\n              },\n              items: list,\n            }}\n            filter={!disableFiltering && !restartFilter ? input || '' : ''}\n            setIsOpen={setIsOpen}\n            alignLeft={false}\n            isButton={false}\n            id={`${id}_dropdowncontent`}/>\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <WarningMessage className={size || ''}>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400}/>\n          <span>{activeValidationMessage}</span>\n        </WarningMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage className={size || ''}>\n          <Information size=\"20px\" color={COLORS.neutral_600}/>\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default DropdownFilter;\n"],"file":"DropdownFilter.cjs"}

package/dist/Dropdown/DropdownFilter.d.ts

@@ -9,8 +9,7 @@ interface DropdownFilterProps {
     onInputChange?: (input: string) => void;
     required?: boolean;
     disabled?: boolean;
-    readOnly?: boolean;
-    loading?: boolean;
+    locked?: boolean;
     disableFiltering?: boolean;
     messageOnNoResults?: string;
     activeValidationMessage?: string;
@@ -19,6 +18,7 @@ interface DropdownFilterProps {
     buttonFontSize?: string;
     margin?: string;
     scrollable?: boolean;
+    loading?: boolean;
 }
-declare const DropdownFilter: ({ id, list, placeholder, onSelect, onInputChange, value, required, messageOnNoResults, disabled, readOnly, scrollable, activeValidationMessage, autofilledMessage, size, disableFiltering, buttonFontSize, margin, loading }: DropdownFilterProps) => JSX.Element;
+declare const DropdownFilter: ({ id, list, placeholder, onSelect, onInputChange, value, required, messageOnNoResults, disabled, locked, scrollable, activeValidationMessage, autofilledMessage, size, disableFiltering, buttonFontSize, margin, loading }: DropdownFilterProps) => JSX.Element;
 export default DropdownFilter;