@laerdal/life-react-components 2.0.1-dev.9 → 2.1.0

package/dist/Dropdown/BasicDropdown.js

@@ -2,15 +2,10 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _pt from "prop-types";
-
 var _BasicDropdown$propTy;
-
 var _excluded = ["id", "list", "placeholder", "messageOnNoResults", "itemsType", "action", "actionLabel", "actionVariant", "actionIcon", "actionLoading", "actionDisabled", "pinTopItem", "scrollable", "maxHeight", "disabled", "readOnly", "isButton", "activeValidationMessage", "autofilledMessage", "size", "margin", "minWidth", "className", "onBlur", "onSelect"];
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import * as React from 'react';
 import { COLORS } from '../styles';
 import { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';
@@ -26,108 +21,92 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var id = props.id,
-      list = props.list,
-      placeholder = props.placeholder,
-      messageOnNoResults = props.messageOnNoResults,
-      _props$itemsType = props.itemsType,
-      itemsType = _props$itemsType === void 0 ? 'normal' : _props$itemsType,
-      action = props.action,
-      actionLabel = props.actionLabel,
-      actionVariant = props.actionVariant,
-      actionIcon = props.actionIcon,
-      actionLoading = props.actionLoading,
-      actionDisabled = props.actionDisabled,
-      pinTopItem = props.pinTopItem,
-      _props$scrollable = props.scrollable,
-      scrollable = _props$scrollable === void 0 ? true : _props$scrollable,
-      maxHeight = props.maxHeight,
-      disabled = props.disabled,
-      readOnly = props.readOnly,
-      isButton = props.isButton,
-      activeValidationMessage = props.activeValidationMessage,
-      autofilledMessage = props.autofilledMessage,
-      size = props.size,
-      _props$margin = props.margin,
-      margin = _props$margin === void 0 ? '4px 0' : _props$margin,
-      minWidth = props.minWidth,
-      className = props.className,
-      onBlur = props.onBlur,
-      onSelect = props.onSelect,
-      rest = _objectWithoutProperties(props, _excluded);
-
+    list = props.list,
+    placeholder = props.placeholder,
+    messageOnNoResults = props.messageOnNoResults,
+    _props$itemsType = props.itemsType,
+    itemsType = _props$itemsType === void 0 ? 'normal' : _props$itemsType,
+    action = props.action,
+    actionLabel = props.actionLabel,
+    actionVariant = props.actionVariant,
+    actionIcon = props.actionIcon,
+    actionLoading = props.actionLoading,
+    actionDisabled = props.actionDisabled,
+    pinTopItem = props.pinTopItem,
+    _props$scrollable = props.scrollable,
+    scrollable = _props$scrollable === void 0 ? true : _props$scrollable,
+    maxHeight = props.maxHeight,
+    disabled = props.disabled,
+    readOnly = props.readOnly,
+    isButton = props.isButton,
+    activeValidationMessage = props.activeValidationMessage,
+    autofilledMessage = props.autofilledMessage,
+    size = props.size,
+    _props$margin = props.margin,
+    margin = _props$margin === void 0 ? '4px 0' : _props$margin,
+    minWidth = props.minWidth,
+    className = props.className,
+    onBlur = props.onBlur,
+    onSelect = props.onSelect,
+    rest = _objectWithoutProperties(props, _excluded);
   var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      isOpen = _React$useState2[0],
-      setIsOpen = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isOpen = _React$useState2[0],
+    setIsOpen = _React$useState2[1];
   var _React$useState3 = React.useState(),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      activeDescendant = _React$useState4[0],
-      setActiveDescendant = _React$useState4[1];
-
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    activeDescendant = _React$useState4[0],
+    setActiveDescendant = _React$useState4[1];
   var _React$useState5 = React.useState(false),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      isLoading = _React$useState6[0],
-      setIsLoading = _React$useState6[1];
-
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    isLoading = _React$useState6[0],
+    setIsLoading = _React$useState6[1];
   var _React$useState7 = React.useState(''),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      input = _React$useState8[0],
-      setInput = _React$useState8[1];
-
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    input = _React$useState8[0],
+    setInput = _React$useState8[1];
   var _React$useState9 = React.useState(null),
-      _React$useState10 = _slicedToArray(_React$useState9, 2),
-      focused = _React$useState10[0],
-      setFocused = _React$useState10[1];
-
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    focused = _React$useState10[0],
+    setFocused = _React$useState10[1];
   var _React$useState11 = React.useState(false),
-      _React$useState12 = _slicedToArray(_React$useState11, 2),
-      keyboardNavigated = _React$useState12[0],
-      setKeyboardNavigated = _React$useState12[1];
-
+    _React$useState12 = _slicedToArray(_React$useState11, 2),
+    keyboardNavigated = _React$useState12[0],
+    setKeyboardNavigated = _React$useState12[1];
   var inputRef = React.useRef(null);
   var styledFieldRef = useFocusVisibleRef([inputRef]);
   var dropdownRef = React.useRef(null);
-
   var resetDropdown = function resetDropdown() {
     setIsOpen(false);
     setFocused(null);
   };
-
   var containerRef = useFocusOutsideRef(resetDropdown, [dropdownRef]);
   useClickOutsideRef(resetDropdown, [], containerRef);
-
   var handleKeyDown = function handleKeyDown(e) {
     if (e.key === 'Enter' || e.key === ' ') {
       setIsOpen(!isOpen);
       setKeyboardNavigated(true);
     }
   };
-
   var handleValueSelect = function handleValueSelect(values) {
     setInput(values.join(', '));
-
     if (props.multiSelect === true) {
       props.onSelect(values);
     } else if (props.multiSelect === false || props.multiSelect === undefined) {
       props.onSelect(values[0]);
-    } //don't close dropdown on item select if have custom action or multiselect
-
+    }
 
+    //don't close dropdown on item select if have custom action or multiselect
     if (actionLabel || props.multiSelect) return;
-
     if (keyboardNavigated) {
       var _styledFieldRef$curre;
-
       (_styledFieldRef$curre = styledFieldRef.current) === null || _styledFieldRef$curre === void 0 ? void 0 : _styledFieldRef$curre.focus({
         focusVisible: true
       });
     }
-
     setIsOpen(false);
     setFocused(null);
   };
-
   React.useEffect(function () {
     if (props.value) {
       if (props.multiSelect) {
@@ -148,11 +127,9 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
   React.useImperativeHandle(ref, function () {
     return inputRef.current;
   }, [inputRef]);
-
   var customSetIsOpen = function customSetIsOpen(isOpen) {
     setIsOpen(isOpen);
   };
-
   var getDisplayItems = function getDisplayItems() {
     var values = input.split(',').map(function (val) {
       return val.trim();
@@ -164,14 +141,12 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
     });
     return listDisplayLabels.join(', ');
   };
-
   var handleBlur = function handleBlur(e) {
     // @ts-ignore
     if (!e.currentTarget.contains(e.relatedTarget)) {
       onBlur && onBlur(e);
     }
   };
-
   var cls = (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? ' button ' : '').concat(className ? " ".concat(className) : '');
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(Dropdown, {
@@ -196,14 +171,11 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
           if (!readOnly && !disabled) {
             e.stopPropagation();
             setIsOpen(!isOpen);
-
             if (isOpen) {
               var _inputRef$current;
-
               (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
             } else {
               var _inputRef$current2;
-
               (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
             }
           }

package/dist/Dropdown/BasicDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"BasicDropdown.js","names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","Dropdown","StyledField","InputField","DropdownContent","AutofilledMessage","ErrorMessage","Size","defaultOnMouseDownHandler","useClickOutsideRef","useFocusVisibleRef","useFocusOutsideRef","BasicDropdown","forwardRef","props","ref","id","list","placeholder","messageOnNoResults","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","actionDisabled","pinTopItem","scrollable","maxHeight","disabled","readOnly","isButton","activeValidationMessage","autofilledMessage","size","margin","minWidth","className","onBlur","onSelect","rest","useState","isOpen","setIsOpen","activeDescendant","setActiveDescendant","isLoading","setIsLoading","input","setInput","focused","setFocused","keyboardNavigated","setKeyboardNavigated","inputRef","useRef","styledFieldRef","dropdownRef","resetDropdown","containerRef","handleKeyDown","e","key","handleValueSelect","values","join","multiSelect","undefined","current","focus","focusVisible","useEffect","value","useImperativeHandle","customSetIsOpen","getDisplayItems","split","map","val","trim","listDisplayLabels","filter","item","includes","l","displayLabel","handleBlur","currentTarget","contains","relatedTarget","cls","concat","stopPropagation","blur","Small","neutral_600","onValueUpdate","items","critical_400","disableSorting"],"sources":["../../src/Dropdown/BasicDropdown.tsx"],"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';\nimport numberField from '../InputFields/NumberField';\n\ninterface BasicDropdownCommonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'placeholder' | 'tabIndex' | 'onMouseDown' | 'onClick' | 'onKeyDown'>{\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  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: 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  minWidth?: string;\n}\n\ntype DropdownFilterMultiSelectProps = BasicDropdownCommonProps & {\n  multiSelect: true;\n  value?: string[];\n  onSelect: (value: string[]) => void;\n}\n\ntype DropdownFilterSingleSelectProps = BasicDropdownCommonProps & {\n  multiSelect?: false;\n  value?: string;\n  onSelect: (value: string) => void;\n}\n\ntype DropdownFilterProps = DropdownFilterSingleSelectProps | DropdownFilterMultiSelectProps;\n\nconst BasicDropdown = React.forwardRef((props: DropdownFilterProps, ref) => {\n  const {\n    id,\n    list,\n    placeholder,\n    messageOnNoResults,\n    itemsType = 'normal',\n    action,\n    actionLabel,\n    actionVariant,\n    actionIcon,\n    actionLoading,\n    actionDisabled,\n    pinTopItem,\n    scrollable = true,\n    maxHeight,\n    disabled,\n    readOnly,\n    isButton,\n    activeValidationMessage,\n    autofilledMessage,\n    size,\n    margin = '4px 0',\n    minWidth,\n    className,\n    onBlur,\n    onSelect,\n    ...rest\n  } = props;\n\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\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 [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const styledFieldRef = useFocusVisibleRef([inputRef]);\n  const dropdownRef = React.useRef<HTMLDivElement>(null);\n\n  const resetDropdown = () => {\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  const containerRef = useFocusOutsideRef(resetDropdown, [dropdownRef]);\n\n  useClickOutsideRef(resetDropdown, [], containerRef);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\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\n    if (props.multiSelect === true) {\n      props.onSelect(values);\n    } else if (props.multiSelect === false || props.multiSelect === undefined) {\n      props.onSelect(values[0]);\n    }\n\n    //don't close dropdown on item select if have custom action or multiselect\n    if (actionLabel || props.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 (props.value) {\n      if (props.multiSelect) {\n        setInput(props.value.join(', '));\n      } else if (props.multiSelect === false || props.multiSelect === undefined) {\n        setInput(props.value);\n      }\n    } else {\n      setInput('');\n    }\n  }, [props.value, props.multiSelect]);\n\n  React.useEffect(() => {\n    setIsLoading(false);\n  }, [input]);\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false);\n  }, [isOpen]);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\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  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n    // @ts-ignore\n    if (!e.currentTarget.contains(e.relatedTarget)) {\n      onBlur && onBlur(e);\n    }\n  };\n\n  const cls = (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? ' button ' : '').concat(className ? ` ${className}` : '');\n  \n  return (\n    <>\n      <Dropdown ref={containerRef}\n                aria-expanded={isOpen ? true : false}\n                aria-activedescendant={activeDescendant}\n                aria-controls={`${id}_dropdowncontent`}\n                role=\"listbox\"\n                aria-multiselectable={props.multiSelect}\n                isButton={isButton || false}\n                className={size ? size : ''}\n                readOnly={readOnly}\n                disabled={disabled}\n                margin={margin}\n                onBlur={handleBlur}\n                minWidth={minWidth}>\n        <StyledField\n          ref={styledFieldRef}\n          className={cls}\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          {...rest}>\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            ref={dropdownRef}\n            containerRef={containerRef}\n            onActiveDescendantChanged={(id) => setActiveDescendant(id)}\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: props.multiSelect,\n              pinTopItem: pinTopItem,\n              maxHeight: maxHeight,\n              actionIcon: actionIcon,\n              actionLoading: actionLoading,\n            }}\n            ariaRolesType=\"input\"\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={props.multiSelect ? props.value || [] : [props.value || '']}\n            setSelectedValues={handleValueSelect}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <ErrorMessage>\n          <TechnicalWarning color={COLORS.critical_400}/>\n          <span>{activeValidationMessage}</span>\n        </ErrorMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <Information color={COLORS.neutral_600}/>\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n});\n\nexport default BasicDropdown;\n"],"mappings":"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"}
+{"version":3,"file":"BasicDropdown.js","names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","Dropdown","StyledField","InputField","DropdownContent","AutofilledMessage","ErrorMessage","Size","defaultOnMouseDownHandler","useClickOutsideRef","useFocusVisibleRef","useFocusOutsideRef","BasicDropdown","forwardRef","props","ref","id","list","placeholder","messageOnNoResults","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","actionDisabled","pinTopItem","scrollable","maxHeight","disabled","readOnly","isButton","activeValidationMessage","autofilledMessage","size","margin","minWidth","className","onBlur","onSelect","rest","useState","isOpen","setIsOpen","activeDescendant","setActiveDescendant","isLoading","setIsLoading","input","setInput","focused","setFocused","keyboardNavigated","setKeyboardNavigated","inputRef","useRef","styledFieldRef","dropdownRef","resetDropdown","containerRef","handleKeyDown","e","key","handleValueSelect","values","join","multiSelect","undefined","current","focus","focusVisible","useEffect","value","useImperativeHandle","customSetIsOpen","getDisplayItems","split","map","val","trim","listDisplayLabels","filter","item","includes","l","displayLabel","handleBlur","currentTarget","contains","relatedTarget","cls","concat","stopPropagation","blur","Small","neutral_600","onValueUpdate","items","critical_400","disableSorting"],"sources":["../../src/Dropdown/BasicDropdown.tsx"],"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';\nimport numberField from '../InputFields/NumberField';\n\ninterface BasicDropdownCommonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'placeholder' | 'tabIndex' | 'onMouseDown' | 'onClick' | 'onKeyDown'>{\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  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: 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  minWidth?: string;\n}\n\ntype DropdownFilterMultiSelectProps = BasicDropdownCommonProps & {\n  multiSelect: true;\n  value?: string[];\n  onSelect: (value: string[]) => void;\n}\n\ntype DropdownFilterSingleSelectProps = BasicDropdownCommonProps & {\n  multiSelect?: false;\n  value?: string;\n  onSelect: (value: string) => void;\n}\n\ntype DropdownFilterProps = DropdownFilterSingleSelectProps | DropdownFilterMultiSelectProps;\n\nconst BasicDropdown = React.forwardRef((props: DropdownFilterProps, ref) => {\n  const {\n    id,\n    list,\n    placeholder,\n    messageOnNoResults,\n    itemsType = 'normal',\n    action,\n    actionLabel,\n    actionVariant,\n    actionIcon,\n    actionLoading,\n    actionDisabled,\n    pinTopItem,\n    scrollable = true,\n    maxHeight,\n    disabled,\n    readOnly,\n    isButton,\n    activeValidationMessage,\n    autofilledMessage,\n    size,\n    margin = '4px 0',\n    minWidth,\n    className,\n    onBlur,\n    onSelect,\n    ...rest\n  } = props;\n\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\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 [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const styledFieldRef = useFocusVisibleRef([inputRef]);\n  const dropdownRef = React.useRef<HTMLDivElement>(null);\n\n  const resetDropdown = () => {\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  const containerRef = useFocusOutsideRef(resetDropdown, [dropdownRef]);\n\n  useClickOutsideRef(resetDropdown, [], containerRef);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\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\n    if (props.multiSelect === true) {\n      props.onSelect(values);\n    } else if (props.multiSelect === false || props.multiSelect === undefined) {\n      props.onSelect(values[0]);\n    }\n\n    //don't close dropdown on item select if have custom action or multiselect\n    if (actionLabel || props.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 (props.value) {\n      if (props.multiSelect) {\n        setInput(props.value.join(', '));\n      } else if (props.multiSelect === false || props.multiSelect === undefined) {\n        setInput(props.value);\n      }\n    } else {\n      setInput('');\n    }\n  }, [props.value, props.multiSelect]);\n\n  React.useEffect(() => {\n    setIsLoading(false);\n  }, [input]);\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false);\n  }, [isOpen]);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\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  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n    // @ts-ignore\n    if (!e.currentTarget.contains(e.relatedTarget)) {\n      onBlur && onBlur(e);\n    }\n  };\n\n  const cls = (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? ' button ' : '').concat(className ? ` ${className}` : '');\n  \n  return (\n    <>\n      <Dropdown ref={containerRef}\n                aria-expanded={isOpen ? true : false}\n                aria-activedescendant={activeDescendant}\n                aria-controls={`${id}_dropdowncontent`}\n                role=\"listbox\"\n                aria-multiselectable={props.multiSelect}\n                isButton={isButton || false}\n                className={size ? size : ''}\n                readOnly={readOnly}\n                disabled={disabled}\n                margin={margin}\n                onBlur={handleBlur}\n                minWidth={minWidth}>\n        <StyledField\n          ref={styledFieldRef}\n          className={cls}\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          {...rest}>\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            ref={dropdownRef}\n            containerRef={containerRef}\n            onActiveDescendantChanged={(id) => setActiveDescendant(id)}\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: props.multiSelect,\n              pinTopItem: pinTopItem,\n              maxHeight: maxHeight,\n              actionIcon: actionIcon,\n              actionLoading: actionLoading,\n            }}\n            ariaRolesType=\"input\"\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={props.multiSelect ? props.value || [] : [props.value || '']}\n            setSelectedValues={handleValueSelect}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <ErrorMessage>\n          <TechnicalWarning color={COLORS.critical_400}/>\n          <span>{activeValidationMessage}</span>\n        </ErrorMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <Information color={COLORS.neutral_600}/>\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n});\n\nexport default BasicDropdown;\n"],"mappings":"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"}

package/dist/Dropdown/CommonStyling.cjs

@@ -1,32 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TextButtonDropdownWrapper = exports.TextButtonDropdownText = exports.TextButtonDropdownIcon = exports.TextButtonDropdownContent = exports.TextButtonDropdownArrow = exports.StyledField = exports.InputField = exports.Dropdown = exports.ButtonDropdownContentStyling = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
 var _common = require("../common");
-
 var _styles = require("../styles");
-
 var _typography = require("../styles/typography");
-
 var _zIndexes = require("../styles/z-indexes");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var Dropdown = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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) {
@@ -34,17 +22,13 @@ var Dropdown = _styledComponents.default.div(_templateObject || (_templateObject
 }, function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
 }, _zIndexes.Z_INDEXES.focus, _styles.COLORS.primary_600, _styles.COLORS.primary_800);
-
 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 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);
-
 exports.InputField = InputField;
-
 var StyledField = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\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    pointer-events: none;\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"])), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), function (props) {
   return props.minWidth ? "".concat(props.minWidth) : '344px';
 }, _styles.COLORS.white, _styles.COLORS.neutral_400, (0, _typography.ComponentXXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), (0, _typography.ComponentXXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), function (props) {
@@ -60,28 +44,17 @@ var StyledField = _styledComponents.default.div(_templateObject7 || (_templateOb
 }, function (props) {
   return props.isPlaceholder ? placeholderStyling : '';
 }, _common.CommonInteractionStyling, _zIndexes.Z_INDEXES.dropdown + 1, _styles.focusStyles);
-
 exports.StyledField = StyledField;
 var ButtonDropdownContentStyling = (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: 344px;\n"])));
 exports.ButtonDropdownContentStyling = ButtonDropdownContentStyling;
-
 var TextButtonDropdownContent = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\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"])));
-
 exports.TextButtonDropdownContent = TextButtonDropdownContent;
-
 var TextButtonDropdownIcon = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  width: 24px;\n  height: 24px;\n"])));
-
 exports.TextButtonDropdownIcon = TextButtonDropdownIcon;
-
 var TextButtonDropdownArrow = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  width: 24px;\n  height: 24px;\n\n  svg {\n    pointer-events: none;\n  }\n"])));
-
 exports.TextButtonDropdownArrow = TextButtonDropdownArrow;
-
 var TextButtonDropdownText = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1\n"])));
-
 exports.TextButtonDropdownText = TextButtonDropdownText;
-
 var TextButtonDropdownWrapper = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\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  ", "\n\n  .expanded {\n    color: ", ";\n\n    ", " {\n      background: ", ";\n    }\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:hover:not(.disabled) {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &:active:not(.disabled) {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    color: ", ";\n  }\n\n}"])), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600), _styles.COLORS.neutral_800, TextButtonDropdownContent, _styles.COLORS.neutral_20, _styles.focusStyles, TextButtonDropdownContent, _styles.COLORS.primary_20, _styles.COLORS.primary_700, TextButtonDropdownContent, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.neutral_300);
-
 exports.TextButtonDropdownWrapper = TextButtonDropdownWrapper;
 //# sourceMappingURL=CommonStyling.cjs.map

package/dist/Dropdown/CommonStyling.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CommonStyling.cjs","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","ComponentMStyling","ComponentTextStyle","Italic","InputField","input","black","StyledField","ComponentSStyling","Regular","neutral_400","ComponentXXSStyling","BREAKPOINTS","MEDIUM","ComponentXSStyling","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"],"sources":["../../src/Dropdown/CommonStyling.tsx"],"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  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    pointer-events: none;\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`;\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  svg {\n    pointer-events: none;\n  }\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"],"mappings":"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"}
+{"version":3,"file":"CommonStyling.cjs","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","ComponentMStyling","ComponentTextStyle","Italic","InputField","input","black","StyledField","ComponentSStyling","Regular","neutral_400","ComponentXXSStyling","BREAKPOINTS","MEDIUM","ComponentXSStyling","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"],"sources":["../../src/Dropdown/CommonStyling.tsx"],"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  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    pointer-events: none;\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`;\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  svg {\n    pointer-events: none;\n  }\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"],"mappings":"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"}

package/dist/Dropdown/CommonStyling.js

@@ -1,7 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
-
 import styled, { css } from 'styled-components';
 import { CommonInteractionStyling } from '../common';
 import { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../styles';

package/dist/Dropdown/CommonStyling.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommonStyling.js","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"],"sources":["../../src/Dropdown/CommonStyling.tsx"],"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  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    pointer-events: none;\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`;\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  svg {\n    pointer-events: none;\n  }\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"],"mappings":"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"}
+{"version":3,"file":"CommonStyling.js","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"],"sources":["../../src/Dropdown/CommonStyling.tsx"],"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  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    pointer-events: none;\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`;\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  svg {\n    pointer-events: none;\n  }\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"],"mappings":"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"}