@laerdal/life-react-components 1.10.3-dev.9.full → 1.11.0

package/dist/Dropdown/BasicDropdown.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dropdown/BasicDropdown.tsx"],"names":["BasicDropdown","React","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","rest","useState","isOpen","setIsOpen","isLoading","setIsLoading","input","setInput","focused","setFocused","keyboardNavigated","setKeyboardNavigated","inputRef","useRef","styledFieldRef","resetDropdown","containerRef","handleKeyDown","e","key","handleValueSelect","values","join","multiSelect","onSelect","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","defaultOnMouseDownHandler","stopPropagation","blur","Size","Small","COLORS","neutral_600","onValueUpdate","items","critical_400","disableSorting"],"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 BasicDropdownCommonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '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 = DropdownFilterMultiSelectProps | DropdownFilterSingleSelectProps;\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    ...rest\n  } = props;\n\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 [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const styledFieldRef = useFocusVisibleRef([inputRef]);\n\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<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                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            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            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"],"file":"BasicDropdown.cjs"}
+{"version":3,"sources":["../../src/Dropdown/BasicDropdown.tsx"],"names":["BasicDropdown","React","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","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","defaultOnMouseDownHandler","stopPropagation","blur","Size","Small","COLORS","neutral_600","onValueUpdate","items","critical_400","disableSorting"],"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';\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 [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                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            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            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"],"file":"BasicDropdown.cjs"}

package/dist/Dropdown/BasicDropdown.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DropdownItem } from './DropdownContent';
 import { Size } from '../types';
-interface BasicDropdownCommonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'placeholder' | 'tabIndex' | 'onMouseDown' | 'onClick' | 'onKeyDown'> {
+interface BasicDropdownCommonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'placeholder' | 'tabIndex' | 'onMouseDown' | 'onClick' | 'onKeyDown'> {
     list: DropdownItem[];
     itemsType?: 'normal' | 'checkbox' | 'radio';
     action?: () => void;
@@ -35,6 +35,6 @@ declare type DropdownFilterSingleSelectProps = BasicDropdownCommonProps & {
     value?: string;
     onSelect: (value: string) => void;
 };
-declare type DropdownFilterProps = DropdownFilterMultiSelectProps | DropdownFilterSingleSelectProps;
+declare type DropdownFilterProps = DropdownFilterSingleSelectProps | DropdownFilterMultiSelectProps;
 declare const BasicDropdown: React.ForwardRefExoticComponent<DropdownFilterProps & React.RefAttributes<unknown>>;
 export default BasicDropdown;

package/dist/Dropdown/BasicDropdown.js

@@ -5,7 +5,7 @@ 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"];
+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); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -52,6 +52,7 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
       minWidth = props.minWidth,
       className = props.className,
       onBlur = props.onBlur,
+      onSelect = props.onSelect,
       rest = _objectWithoutProperties(props, _excluded);
 
   var _React$useState = React.useState(false),
@@ -81,13 +82,15 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var inputRef = React.useRef(null);
   var styledFieldRef = useFocusVisibleRef([inputRef]);
+  var dropdownRef = React.useRef(null);
 
   var resetDropdown = function resetDropdown() {
     setIsOpen(false);
     setFocused(null);
   };
 
-  var containerRef = useClickOutsideRef(resetDropdown, [], useFocusOutsideRef(resetDropdown));
+  var containerRef = useFocusOutsideRef(resetDropdown, [dropdownRef]);
+  useClickOutsideRef(resetDropdown, [], containerRef);
 
   var handleKeyDown = function handleKeyDown(e) {
     if (e.key === 'Enter' || e.key === ' ') {
@@ -227,6 +230,8 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
           })
         })]
       })), !readOnly && !disabled && /*#__PURE__*/_jsx(DropdownContent, {
+        ref: dropdownRef,
+        containerRef: containerRef,
         customizationProps: {
           itemsType: itemsType,
           action: action !== null && action !== void 0 ? action : function () {},
@@ -291,8 +296,8 @@ BasicDropdown.propTypes = (_BasicDropdown$propTy = {
   autofilledMessage: _pt.string,
   margin: _pt.string,
   minWidth: _pt.string,
-  multiSelect: _pt.oneOf([true]).isRequired,
-  value: _pt.arrayOf(_pt.string),
+  multiSelect: _pt.oneOf([false]),
+  value: _pt.string,
   onSelect: _pt.func.isRequired
 }, _defineProperty(_BasicDropdown$propTy, "list", _pt.array.isRequired), _defineProperty(_BasicDropdown$propTy, "itemsType", _pt.oneOf(['normal', 'checkbox', 'radio'])), _BasicDropdown$propTy);
 export default BasicDropdown;

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","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","rest","useState","isOpen","setIsOpen","isLoading","setIsLoading","input","setInput","focused","setFocused","keyboardNavigated","setKeyboardNavigated","inputRef","useRef","styledFieldRef","resetDropdown","containerRef","handleKeyDown","e","key","handleValueSelect","values","join","multiSelect","onSelect","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"],"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 BasicDropdownCommonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '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 = DropdownFilterMultiSelectProps | DropdownFilterSingleSelectProps;\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    ...rest\n  } = props;\n\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 [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const styledFieldRef = useFocusVisibleRef([inputRef]);\n\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<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                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            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            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"],"file":"BasicDropdown.js"}
+{"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","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","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"],"mappings":";;;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAAQC,MAAR,QAAqB,WAArB;AACA,SAAQC,aAAR,EAAuBC,WAAvB,EAAoCC,WAApC,EAAiDC,gBAAjD,QAAwE,kCAAxE;AACA,SAAQC,gBAAR,QAA+B,qBAA/B;AACA,SAAQC,QAAR,EAAkBC,WAAlB,EAA+BC,UAA/B,QAAgD,iBAAhD;AACA,OAAOC,eAAP,MAA4C,mBAA5C;AACA,SAAQC,iBAAR,EAA2BC,YAA3B,QAA8C,wBAA9C;AACA,SAAQC,IAAR,QAAmB,UAAnB;AACA,SAAQC,yBAAR,EAAmCC,kBAAnC,EAAuDC,kBAAvD,QAAgF,WAAhF;AACA,SAAQC,kBAAR,QAAiC,WAAjC;;;;AA0CA,IAAMC,aAAa,gBAAGlB,KAAK,CAACmB,UAAN,CAAiB,UAACC,KAAD,EAA6BC,GAA7B,EAAqC;AAC1E,MACEC,EADF,GA2BIF,KA3BJ,CACEE,EADF;AAAA,MAEEC,IAFF,GA2BIH,KA3BJ,CAEEG,IAFF;AAAA,MAGEC,WAHF,GA2BIJ,KA3BJ,CAGEI,WAHF;AAAA,MAIEC,kBAJF,GA2BIL,KA3BJ,CAIEK,kBAJF;AAAA,yBA2BIL,KA3BJ,CAKEM,SALF;AAAA,MAKEA,SALF,iCAKc,QALd;AAAA,MAMEC,MANF,GA2BIP,KA3BJ,CAMEO,MANF;AAAA,MAOEC,WAPF,GA2BIR,KA3BJ,CAOEQ,WAPF;AAAA,MAQEC,aARF,GA2BIT,KA3BJ,CAQES,aARF;AAAA,MASEC,UATF,GA2BIV,KA3BJ,CASEU,UATF;AAAA,MAUEC,aAVF,GA2BIX,KA3BJ,CAUEW,aAVF;AAAA,MAWEC,cAXF,GA2BIZ,KA3BJ,CAWEY,cAXF;AAAA,MAYEC,UAZF,GA2BIb,KA3BJ,CAYEa,UAZF;AAAA,0BA2BIb,KA3BJ,CAaEc,UAbF;AAAA,MAaEA,UAbF,kCAae,IAbf;AAAA,MAcEC,SAdF,GA2BIf,KA3BJ,CAcEe,SAdF;AAAA,MAeEC,QAfF,GA2BIhB,KA3BJ,CAeEgB,QAfF;AAAA,MAgBEC,QAhBF,GA2BIjB,KA3BJ,CAgBEiB,QAhBF;AAAA,MAiBEC,QAjBF,GA2BIlB,KA3BJ,CAiBEkB,QAjBF;AAAA,MAkBEC,uBAlBF,GA2BInB,KA3BJ,CAkBEmB,uBAlBF;AAAA,MAmBEC,iBAnBF,GA2BIpB,KA3BJ,CAmBEoB,iBAnBF;AAAA,MAoBEC,IApBF,GA2BIrB,KA3BJ,CAoBEqB,IApBF;AAAA,sBA2BIrB,KA3BJ,CAqBEsB,MArBF;AAAA,MAqBEA,MArBF,8BAqBW,OArBX;AAAA,MAsBEC,QAtBF,GA2BIvB,KA3BJ,CAsBEuB,QAtBF;AAAA,MAuBEC,SAvBF,GA2BIxB,KA3BJ,CAuBEwB,SAvBF;AAAA,MAwBEC,MAxBF,GA2BIzB,KA3BJ,CAwBEyB,MAxBF;AAAA,MAyBEC,QAzBF,GA2BI1B,KA3BJ,CAyBE0B,QAzBF;AAAA,MA0BKC,IA1BL,4BA2BI3B,KA3BJ;;AA6BA,wBAA4BpB,KAAK,CAACgD,QAAN,CAAwB,KAAxB,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AACA,yBAAkClD,KAAK,CAACgD,QAAN,CAAwB,KAAxB,CAAlC;AAAA;AAAA,MAAOG,SAAP;AAAA,MAAkBC,YAAlB;;AACA,yBAA0BpD,KAAK,CAACgD,QAAN,CAAuB,EAAvB,CAA1B;AAAA;AAAA,MAAOK,KAAP;AAAA,MAAcC,QAAd;;AACA,yBAA8BtD,KAAK,CAACgD,QAAN,CAA8B,IAA9B,CAA9B;AAAA;AAAA,MAAOO,OAAP;AAAA,MAAgBC,UAAhB;;AACA,yBAAkDxD,KAAK,CAACgD,QAAN,CAAwB,KAAxB,CAAlD;AAAA;AAAA,MAAOS,iBAAP;AAAA,MAA0BC,oBAA1B;;AAEA,MAAMC,QAAQ,GAAG3D,KAAK,CAAC4D,MAAN,CAA+B,IAA/B,CAAjB;AACA,MAAMC,cAAc,GAAG7C,kBAAkB,CAAC,CAAC2C,QAAD,CAAD,CAAzC;AACA,MAAMG,WAAW,GAAG9D,KAAK,CAAC4D,MAAN,CAA6B,IAA7B,CAApB;;AAEA,MAAMG,aAAa,GAAG,SAAhBA,aAAgB,GAAM;AAC1Bb,IAAAA,SAAS,CAAC,KAAD,CAAT;AACAM,IAAAA,UAAU,CAAC,IAAD,CAAV;AACD,GAHD;;AAKA,MAAMQ,YAAY,GAAG/C,kBAAkB,CAAC8C,aAAD,EAAgB,CAACD,WAAD,CAAhB,CAAvC;AAEA/C,EAAAA,kBAAkB,CAACgD,aAAD,EAAgB,EAAhB,EAAoBC,YAApB,CAAlB;;AAEA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAA4C;AAChE,QAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAnC,EAAwC;AACtCjB,MAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;AACAS,MAAAA,oBAAoB,CAAC,IAAD,CAApB;AACD;AACF,GALD;;AAOA,MAAMU,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,MAAD,EAAsB;AAC9Cf,IAAAA,QAAQ,CAACe,MAAM,CAACC,IAAP,CAAY,IAAZ,CAAD,CAAR;;AAEA,QAAIlD,KAAK,CAACmD,WAAN,KAAsB,IAA1B,EAAgC;AAC9BnD,MAAAA,KAAK,CAAC0B,QAAN,CAAeuB,MAAf;AACD,KAFD,MAEO,IAAIjD,KAAK,CAACmD,WAAN,KAAsB,KAAtB,IAA+BnD,KAAK,CAACmD,WAAN,KAAsBC,SAAzD,EAAoE;AACzEpD,MAAAA,KAAK,CAAC0B,QAAN,CAAeuB,MAAM,CAAC,CAAD,CAArB;AACD,KAP6C,CAS9C;;;AACA,QAAIzC,WAAW,IAAIR,KAAK,CAACmD,WAAzB,EAAsC;;AAEtC,QAAId,iBAAJ,EAAuB;AAAA;;AACrB,+BAAAI,cAAc,CAACY,OAAf,gFAAwBC,KAAxB,CAA8B;AAACC,QAAAA,YAAY,EAAE;AAAf,OAA9B;AACD;;AACDzB,IAAAA,SAAS,CAAC,KAAD,CAAT;AACAM,IAAAA,UAAU,CAAC,IAAD,CAAV;AACD,GAjBD;;AAmBAxD,EAAAA,KAAK,CAAC4E,SAAN,CAAgB,YAAM;AACpB,QAAIxD,KAAK,CAACyD,KAAV,EAAiB;AACf,UAAIzD,KAAK,CAACmD,WAAV,EAAuB;AACrBjB,QAAAA,QAAQ,CAAClC,KAAK,CAACyD,KAAN,CAAYP,IAAZ,CAAiB,IAAjB,CAAD,CAAR;AACD,OAFD,MAEO,IAAIlD,KAAK,CAACmD,WAAN,KAAsB,KAAtB,IAA+BnD,KAAK,CAACmD,WAAN,KAAsBC,SAAzD,EAAoE;AACzElB,QAAAA,QAAQ,CAAClC,KAAK,CAACyD,KAAP,CAAR;AACD;AACF,KAND,MAMO;AACLvB,MAAAA,QAAQ,CAAC,EAAD,CAAR;AACD;AACF,GAVD,EAUG,CAAClC,KAAK,CAACyD,KAAP,EAAczD,KAAK,CAACmD,WAApB,CAVH;AAYAvE,EAAAA,KAAK,CAAC4E,SAAN,CAAgB,YAAM;AACpBxB,IAAAA,YAAY,CAAC,KAAD,CAAZ;AACD,GAFD,EAEG,CAACC,KAAD,CAFH;AAIArD,EAAAA,KAAK,CAAC4E,SAAN,CAAgB,YAAM;AACpB,KAAC3B,MAAD,IAAWS,oBAAoB,CAAC,KAAD,CAA/B;AACD,GAFD,EAEG,CAACT,MAAD,CAFH;AAIAjD,EAAAA,KAAK,CAAC8E,mBAAN,CAA0BzD,GAA1B,EAA+B;AAAA,WAAMsC,QAAQ,CAACc,OAAf;AAAA,GAA/B,EAAuD,CAACd,QAAD,CAAvD;;AAEA,MAAMoB,eAAe,GAAG,SAAlBA,eAAkB,CAAC9B,MAAD,EAAqB;AAC3CC,IAAAA,SAAS,CAACD,MAAD,CAAT;AACD,GAFD;;AAIA,MAAM+B,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AAC5B,QAAMX,MAAM,GAAGhB,KAAK,CAAC4B,KAAN,CAAY,GAAZ,EAAiBC,GAAjB,CAAqB,UAACC,GAAD;AAAA,aAASA,GAAG,CAACC,IAAJ,EAAT;AAAA,KAArB,CAAf;AACA,QAAMC,iBAAiB,GAAG9D,IAAI,CAAC+D,MAAL,CAAY,UAACC,IAAD;AAAA,aAAUlB,MAAM,CAACmB,QAAP,CAAgBD,IAAI,CAACV,KAArB,CAAV;AAAA,KAAZ,EAAmDK,GAAnD,CAAuD,UAACO,CAAD;AAAA,aAAOA,CAAC,CAACC,YAAT;AAAA,KAAvD,CAA1B;AACA,WAAOL,iBAAiB,CAACf,IAAlB,CAAuB,IAAvB,CAAP;AACD,GAJD;;AAMA,MAAMqB,UAAU,GAAG,SAAbA,UAAa,CAACzB,CAAD,EAAyC;AAC1D;AACA,QAAI,CAACA,CAAC,CAAC0B,aAAF,CAAgBC,QAAhB,CAAyB3B,CAAC,CAAC4B,aAA3B,CAAL,EAAgD;AAC9CjD,MAAAA,MAAM,IAAIA,MAAM,CAACqB,CAAD,CAAhB;AACD;AACF,GALD;;AAOA,MAAM6B,GAAG,GAAG,CAAC9C,MAAM,GAAG,WAAH,GAAiB,EAAxB,EAA4B+C,MAA5B,CAAmCvD,IAAI,GAAGA,IAAH,GAAU,EAAjD,EAAqDuD,MAArD,CAA4D1D,QAAQ,GAAG,UAAH,GAAgB,EAApF,EAAwF0D,MAAxF,CAA+FpD,SAAS,cAAOA,SAAP,IAAqB,EAA7H,CAAZ;AAEA,sBACE;AAAA,4BACE,MAAC,QAAD;AAAU,MAAA,GAAG,EAAEoB,YAAf;AACU,MAAA,QAAQ,EAAE1B,QAAQ,IAAI,KADhC;AAEU,MAAA,SAAS,EAAEG,IAAI,GAAGA,IAAH,GAAU,EAFnC;AAGU,MAAA,QAAQ,EAAEJ,QAHpB;AAIU,MAAA,QAAQ,EAAED,QAJpB;AAKU,MAAA,MAAM,EAAEM,MALlB;AAMU,MAAA,MAAM,EAAEiD,UANlB;AAOU,MAAA,QAAQ,EAAEhD,QAPpB;AAAA,8BAQE,MAAC,WAAD;AACE,QAAA,GAAG,EAAEkB,cADP;AAEE,QAAA,SAAS,EAAEkC,GAFb;AAGE,QAAA,WAAW,EAAEjF,yBAHf;AAIE,QAAA,OAAO,EAAE,iBAACoD,CAAD,EAAO;AACd,cAAI,CAAC7B,QAAD,IAAa,CAACD,QAAlB,EAA4B;AAC1B8B,YAAAA,CAAC,CAAC+B,eAAF;AACA/C,YAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;;AACA,gBAAIA,MAAJ,EAAY;AAAA;;AACV,mCAAAU,QAAQ,CAACc,OAAT,wEAAkByB,IAAlB;AACD,aAFD,MAEO;AAAA;;AACL,oCAAAvC,QAAQ,CAACc,OAAT,0EAAkBC,KAAlB;AACD;AACF;AACF,SAdH;AAeE,QAAA,QAAQ,EAAEtC,QAAQ,IAAIC,QAAZ,GAAuB,CAAC,CAAxB,GAA4B,CAfxC;AAgBE,QAAA,QAAQ,EAAED,QAAQ,IAAI,KAhBxB;AAiBE,QAAA,QAAQ,EAAEC,QAAQ,IAAI,KAjBxB;AAkBE,QAAA,aAAa,EAAE,CAACgB,KAlBlB;AAmBE,QAAA,WAAW,EAAE7B,WAnBf;AAoBE,QAAA,qBAAqB,EAAE,CAAC,CAACe,uBApB3B;AAqBE,QAAA,SAAS,EAAE0B,aArBb;AAsBE,QAAA,QAAQ,EAAEtB;AAtBZ,SAuBMI,IAvBN;AAAA,gCAwBE,KAAC,UAAD;AACE,UAAA,GAAG,EAAEY,QADP;AAEE,UAAA,IAAI,EAAC,QAFP;AAGE,UAAA,QAAQ,MAHV;AAIE,UAAA,WAAW,EAAEnC,WAJf;AAKE,UAAA,KAAK,EAAEwD,eAAe,EALxB;AAME,UAAA,SAAS,EAAEvC,IAAI,aAAMA,IAAN,cAAqB,OANtC;AAOE,UAAA,QAAQ,EAAE,CAAC,CAPb;AAQE,UAAA,QAAQ,EAAEL,QAAQ,IAAI;AARxB,UAxBF,EAkCGe,SAAS,gBAAG,KAAC,gBAAD;AAAkB,UAAA,IAAI,EAAEtC,IAAI,CAACsF,KAA7B;AAAoC,UAAA,KAAK,EAAElG,MAAM,CAACmG;AAAlD,UAAH,GAAsE,IAlClF,eAmCE;AAAK,UAAA,SAAS,EAAE,qBAAhB;AAAA,oBACGnD,MAAM,gBAAG,KAAC,WAAD;AAAa,YAAA,IAAI,EAAC,MAAlB;AAAyB,YAAA,SAAS,EAAER,IAAI,GAAGA,IAAH,GAAU;AAAlD,YAAH,gBACL,KAAC,aAAD;AAAe,YAAA,IAAI,EAAC,MAApB;AAA2B,YAAA,SAAS,EAAEA,IAAI,GAAGA,IAAH,GAAU;AAApD;AAFJ,UAnCF;AAAA,SARF,EAgDG,CAACJ,QAAD,IAAa,CAACD,QAAd,iBACC,KAAC,eAAD;AACE,QAAA,GAAG,EAAE0B,WADP;AAEE,QAAA,YAAY,EAAEE,YAFhB;AAGE,QAAA,kBAAkB,EAAE;AAClBtC,UAAAA,SAAS,EAAEA,SADO;AAElBC,UAAAA,MAAM,EAAEA,MAAF,aAAEA,MAAF,cAAEA,MAAF,GAAa,YAAM,CACxB,CAHiB;AAIlBC,UAAAA,WAAW,EAAEA,WAJK;AAKlBC,UAAAA,aAAa,EAAEA,aALG;AAMlBG,UAAAA,cAAc,EAAEA,cANE;AAOlBE,UAAAA,UAAU,EAAEA,UAPM;AAQlBmE,UAAAA,aAAa,EAAEjC,iBARG;AASlBkC,UAAAA,KAAK,EAAE/E,IATW;AAUlBgD,UAAAA,WAAW,EAAEnD,KAAK,CAACmD,WAVD;AAWlBtC,UAAAA,UAAU,EAAEA,UAXM;AAYlBE,UAAAA,SAAS,EAAEA,SAZO;AAalBL,UAAAA,UAAU,EAAEA,UAbM;AAclBC,UAAAA,aAAa,EAAEA;AAdG,SAHtB;AAmBE,QAAA,OAAO,EAAEwB,OAnBX;AAoBE,QAAA,UAAU,EAAEC,UApBd;AAqBE,QAAA,IAAI,EAAEf,IAAF,aAAEA,IAAF,cAAEA,IAAF,GAAU5B,IAAI,CAACsF,KArBrB;AAsBE,QAAA,MAAM,EAAE,EAtBV;AAuBE,QAAA,MAAM,EAAElD,MAvBV;AAwBE,QAAA,SAAS,EAAE8B,eAxBb;AAyBE,QAAA,kBAAkB,EAAEtD,kBAAF,aAAEA,kBAAF,cAAEA,kBAAF,GAAwB,EAzB5C;AA0BE,QAAA,OAAO,EAAEgC,iBA1BX;AA2BE,QAAA,QAAQ,EAAEnB,QAAQ,IAAI,KA3BxB;AA4BE,QAAA,cAAc,EAAElB,KAAK,CAACmD,WAAN,GAAoBnD,KAAK,CAACyD,KAAN,IAAe,EAAnC,GAAwC,CAACzD,KAAK,CAACyD,KAAN,IAAe,EAAhB,CA5B1D;AA6BE,QAAA,iBAAiB,EAAET,iBA7BrB;AA8BE,QAAA,EAAE,YAAK9C,EAAL;AA9BJ,QAjDJ;AAAA,MADF,EAoFGiB,uBAAuB,iBACtB,MAAC,YAAD;AAAA,8BACE,KAAC,gBAAD;AAAkB,QAAA,KAAK,EAAEtC,MAAM,CAACsG;AAAhC,QADF,eAEE;AAAA,kBAAOhE;AAAP,QAFF;AAAA,MArFJ,EA0FGC,iBAAiB,iBAChB,MAAC,iBAAD;AAAA,8BACE,KAAC,WAAD;AAAa,QAAA,KAAK,EAAEvC,MAAM,CAACmG;AAA3B,QADF,eAEE;AAAA,kBAAO5D;AAAP,QAFF;AAAA,MA3FJ;AAAA,IADF;AAmGD,CAvNqB,CAAtB;;AAtCEjB,EAAAA,I;AACAG,EAAAA,S,aAAY,Q,EAAW,U,EAAa,O;AACpCC,EAAAA,M;AACAC,EAAAA,W;AAEAE,EAAAA,U;AACAC,EAAAA,a;AACAC,EAAAA,c;AACAC,EAAAA,U;AACAC,EAAAA,U;AACAC,EAAAA,S;AACAX,EAAAA,W;AACAgF,EAAAA,c;AACA/E,EAAAA,kB;AACAW,EAAAA,Q;AACAC,EAAAA,Q;AACAC,EAAAA,Q;AACAC,EAAAA,uB;AACAC,EAAAA,iB;AAEAE,EAAAA,M;AACAC,EAAAA,Q;AAUA4B,EAAAA,W,aAAc,K;AACdM,EAAAA,K;AACA/B,EAAAA,Q;wIAhCY,Q,EAAW,U,EAAa,O;AA8PtC,eAAe5B,aAAf","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 [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                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            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            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"],"file":"BasicDropdown.js"}

package/dist/Dropdown/CommonStyling.cjs

@@ -27,7 +27,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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  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) {
+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) {
   return props.readOnly || props.disabled ? 'cursor: not-allowed;' : '';
@@ -62,7 +62,7 @@ var StyledField = _styledComponents.default.div(_templateObject7 || (_templateOb
 }, _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  right: 0;\n"])));
+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"])));

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    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  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  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"],"file":"CommonStyling.cjs"}
+{"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  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"],"file":"CommonStyling.cjs"}

package/dist/Dropdown/CommonStyling.js

@@ -7,7 +7,7 @@ import { CommonInteractionStyling } from '../common';
 import { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../styles';
 import { ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';
 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) {
+export var Dropdown = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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;' : '';
@@ -34,7 +34,7 @@ export var StyledField = styled.div(_templateObject7 || (_templateObject7 = _tag
 }, function (props) {
   return props.isPlaceholder ? placeholderStyling : '';
 }, CommonInteractionStyling, Z_INDEXES.dropdown + 1, focusStyles);
-export var ButtonDropdownContentStyling = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  min-width: 344px;\n  right: 0;\n"])));
+export var ButtonDropdownContentStyling = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  min-width: 344px;\n"])));
 export var TextButtonDropdownContent = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\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"])));
 export var TextButtonDropdownIcon = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  width: 24px;\n  height: 24px;\n"])));
 export var TextButtonDropdownArrow = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  width: 24px;\n  height: 24px;\n\n  svg {\n    pointer-events: none;\n  }\n"])));

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    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  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  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"],"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","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  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"],"file":"CommonStyling.js"}

package/dist/Dropdown/DropdownButton.cjs

@@ -39,7 +39,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  display: inline-block;\n"])));
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n"])));
 
 var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var items = _ref.items,
@@ -89,11 +89,13 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       keyboardNavigated = _React$useState8[0],
       setKeyboardNavigated = _React$useState8[1];
 
-  var containerRef = (0, _common.useClickOutsideRef)(function () {
+  var dropdownRef = React.useRef(null);
+  var containerRef = (0, _common.useFocusOutsideRef)(function () {
     return setDropdownOpen(false);
-  }, [], (0, _common.useFocusOutsideRef)(function () {
+  }, [dropdownRef]);
+  (0, _common.useClickOutsideRef)(function () {
     return setDropdownOpen(false);
-  }));
+  }, [], containerRef);
   React.useEffect(function () {
     !dropdownOpen && setKeyboardNavigated(false);
   }, [dropdownOpen]);
@@ -177,6 +179,8 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: className,
     ref: containerRef,
     children: [renderButton(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownContent.default, {
+      ref: dropdownRef,
+      containerRef: containerRef,
       customizationProps: {
         itemsType: itemsType,
         action: action !== null && action !== void 0 ? action : function () {},

package/dist/Dropdown/DropdownButton.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dropdown/DropdownButton.tsx"],"names":["Wrapper","styled","div","DropdownButton","React","forwardRef","ref","items","icon","disabled","onClick","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","size","width","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","className","value","rest","useState","dropdownOpen","setDropdownOpen","selectedValues","setSelectedValues","focused","setFocused","keyboardNavigated","setKeyboardNavigated","containerRef","useEffect","handleValueSelect","values","renderButton","type","event","detail","label","keepLabel","length","filter","a","includes","map","displayLabel","join","cls","defaultOnMouseDownHandler","e","key","preventDefault","stopPropagation","onValueUpdate"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {IconButton} from '../Button';\nimport DropdownContent from './DropdownContent';\nimport styled from 'styled-components';\n\n/**\n * Import custom types.\n */\nimport {DropdownButtonProps} from './DropdownButtonTypes';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusOutsideRef} from '../common';\nimport {\n  TextButtonDropdownArrow,\n  TextButtonDropdownContent,\n  TextButtonDropdownIcon,\n  TextButtonDropdownText,\n  TextButtonDropdownWrapper\n} from './CommonStyling';\nimport {ArrowDropDown, ArrowDropUp} from '../icons/systemicons/SystemIcons';\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n`;\n\nconst DropdownButton = React.forwardRef( ({\n                          items,\n                          icon,\n                          disabled,\n                          onClick,\n                          itemsType = 'normal',\n                          action,\n                          actionLabel = '',\n                          actionVariant,\n                          actionIcon,\n                          actionLoading,\n                          size,\n                          width,\n                          alignLeft,\n                          multiSelect = false,\n                          scrollable = false,\n                          pinTopItem = false,\n                          maxHeight,\n                          className,\n                          value,\n                          ...rest\n                        }: DropdownButtonProps, ref: React.Ref<HTMLButtonElement>) => {\n  // Globally used variables within the view.\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n\n  const containerRef = useClickOutsideRef(() => setDropdownOpen(false), [], useFocusOutsideRef(() => setDropdownOpen(false)));\n\n  React.useEffect(() => {\n    !dropdownOpen && setKeyboardNavigated(false)\n  }, [dropdownOpen]);\n\n  React.useEffect(() => {\n    disabled && setDropdownOpen(false)\n  }, [disabled]);\n\n  React.useEffect(() => {\n    setSelectedValues(value || []);\n  }, [value]);\n\n  const handleValueSelect = (values: string[]) => {\n    // Do all required actions\n    onClick(values);\n  };\n\n  /**\n   * Renders Icon Button dropdown menu.\n   * @returns HTML View for the Icon button dropdown menu.\n   */\n  const renderButton = () => {\n    switch (rest.type) {\n      case 'icon':\n        return (\n          <IconButton ref={ref}\n                      variant=\"secondary\"\n                      shape=\"circular\"\n                      action={(event: any) => {\n                        setDropdownOpen(!dropdownOpen);\n                        if (event?.detail !== 1) {\n                          setKeyboardNavigated(true);\n                        }\n                      }}\n                      disabled={disabled}>\n            {icon}\n          </IconButton>\n        );\n      case 'text':\n        const label = rest.keepLabel || !selectedValues?.length\n          ? rest.label\n          : items.filter(a => selectedValues.includes(a.value)).map(a => a.displayLabel ?? a.value).join(', ');\n        const cls = `${disabled && 'disabled'} ${dropdownOpen && 'expanded'} ${className}`;\n        return <TextButtonDropdownWrapper tabIndex={!disabled ? 0 : -1}\n                                          className={cls}\n                                          onMouseDown={defaultOnMouseDownHandler}\n                                          onKeyDown={e => {\n                                            if (e.key === 'Enter' || e.key === ' ') {\n                                              e.preventDefault();\n                                              e.stopPropagation();\n                                              setDropdownOpen(!dropdownOpen);\n                                              setKeyboardNavigated(true);\n                                            }\n                                          }}\n                                          onClick={() => !disabled && setDropdownOpen(!dropdownOpen)}>\n          <TextButtonDropdownContent>\n            {icon && <TextButtonDropdownIcon>{icon}</TextButtonDropdownIcon>}\n            <TextButtonDropdownText>{label}</TextButtonDropdownText>\n            <TextButtonDropdownArrow>\n              {\n                dropdownOpen\n                  ? <ArrowDropUp size=\"24px\"/>\n                  : <ArrowDropDown size=\"24px\"/>\n              }\n            </TextButtonDropdownArrow>\n          </TextButtonDropdownContent>\n        </TextButtonDropdownWrapper>\n    }\n  };\n\n  return (\n    <Wrapper className={className} ref={containerRef}>\n      {renderButton()}\n      <DropdownContent\n        customizationProps={{\n          itemsType: itemsType,\n          action: action ?? (() => {\n          }),\n          actionLabel: actionLabel,\n          actionVariant: actionVariant,\n          onValueUpdate: handleValueSelect,\n          multiSelect: multiSelect,\n          actionIcon: actionIcon,\n          actionLoading: actionLoading,\n          scrollable: scrollable,\n          pinTopItem: pinTopItem,\n          maxHeight: maxHeight,\n          items: items\n        }}\n        focused={focused}\n        setFocused={setFocused}\n        size={size}\n        width={width}\n        alignLeft={alignLeft}\n        isOpen={dropdownOpen}\n        setIsOpen={setDropdownOpen}\n        outline={keyboardNavigated}\n        filter=\"\"\n        selectedValues={rest.type === 'icon' && itemsType === 'normal' ? [] : selectedValues}\n        setSelectedValues={setSelectedValues}\n        messageOnNoResults=\"No results\"\n        isButton={true}\n        id=\"dropdown-content\"\n      />\n    </Wrapper>\n  );\n});\n\nexport default DropdownButton;\n"],"file":"DropdownButton.cjs"}
+{"version":3,"sources":["../../src/Dropdown/DropdownButton.tsx"],"names":["Wrapper","styled","div","DropdownButton","React","forwardRef","ref","items","icon","disabled","onClick","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","size","width","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","className","value","rest","useState","dropdownOpen","setDropdownOpen","selectedValues","setSelectedValues","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownRef","useRef","containerRef","useEffect","handleValueSelect","values","renderButton","type","event","detail","label","keepLabel","length","filter","a","includes","map","displayLabel","join","cls","defaultOnMouseDownHandler","e","key","preventDefault","stopPropagation","onValueUpdate"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {IconButton} from '../Button';\nimport DropdownContent from './DropdownContent';\nimport styled from 'styled-components';\n\n/**\n * Import custom types.\n */\nimport {DropdownButtonProps} from './DropdownButtonTypes';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusOutsideRef} from '../common';\nimport {\n  TextButtonDropdownArrow,\n  TextButtonDropdownContent,\n  TextButtonDropdownIcon,\n  TextButtonDropdownText,\n  TextButtonDropdownWrapper\n} from './CommonStyling';\nimport {ArrowDropDown, ArrowDropUp} from '../icons/systemicons/SystemIcons';\n\nconst Wrapper = styled.div`\n  display: inline-block;\n`;\n\nconst DropdownButton = React.forwardRef( ({\n                          items,\n                          icon,\n                          disabled,\n                          onClick,\n                          itemsType = 'normal',\n                          action,\n                          actionLabel = '',\n                          actionVariant,\n                          actionIcon,\n                          actionLoading,\n                          size,\n                          width,\n                          alignLeft,\n                          multiSelect = false,\n                          scrollable = false,\n                          pinTopItem = false,\n                          maxHeight,\n                          className,\n                          value,\n                          ...rest\n                        }: DropdownButtonProps, ref: React.Ref<HTMLButtonElement>) => {\n  // Globally used variables within the view.\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n  const dropdownRef = React.useRef<HTMLDivElement>(null);\n\n  const containerRef = useFocusOutsideRef(() => setDropdownOpen(false), [dropdownRef]);\n  useClickOutsideRef(() => setDropdownOpen(false), [], containerRef);\n\n  React.useEffect(() => {\n    !dropdownOpen && setKeyboardNavigated(false)\n  }, [dropdownOpen]);\n\n  React.useEffect(() => {\n    disabled && setDropdownOpen(false)\n  }, [disabled]);\n\n  React.useEffect(() => {\n    setSelectedValues(value || []);\n  }, [value]);\n\n  const handleValueSelect = (values: string[]) => {\n    // Do all required actions\n    onClick(values);\n  };\n\n  /**\n   * Renders Icon Button dropdown menu.\n   * @returns HTML View for the Icon button dropdown menu.\n   */\n  const renderButton = () => {\n    switch (rest.type) {\n      case 'icon':\n        return (\n          <IconButton ref={ref}\n                      variant=\"secondary\"\n                      shape=\"circular\"\n                      action={(event: any) => {\n                        setDropdownOpen(!dropdownOpen);\n                        if (event?.detail !== 1) {\n                          setKeyboardNavigated(true);\n                        }\n                      }}\n                      disabled={disabled}>\n            {icon}\n          </IconButton>\n        );\n      case 'text':\n        const label = rest.keepLabel || !selectedValues?.length\n          ? rest.label\n          : items.filter(a => selectedValues.includes(a.value)).map(a => a.displayLabel ?? a.value).join(', ');\n        const cls = `${disabled && 'disabled'} ${dropdownOpen && 'expanded'} ${className}`;\n        return <TextButtonDropdownWrapper tabIndex={!disabled ? 0 : -1}\n                                          className={cls}\n                                          onMouseDown={defaultOnMouseDownHandler}\n                                          onKeyDown={e => {\n                                            if (e.key === 'Enter' || e.key === ' ') {\n                                              e.preventDefault();\n                                              e.stopPropagation();\n                                              setDropdownOpen(!dropdownOpen);\n                                              setKeyboardNavigated(true);\n                                            }\n                                          }}\n                                          onClick={() => !disabled && setDropdownOpen(!dropdownOpen)}>\n          <TextButtonDropdownContent>\n            {icon && <TextButtonDropdownIcon>{icon}</TextButtonDropdownIcon>}\n            <TextButtonDropdownText>{label}</TextButtonDropdownText>\n            <TextButtonDropdownArrow>\n              {\n                dropdownOpen\n                  ? <ArrowDropUp size=\"24px\"/>\n                  : <ArrowDropDown size=\"24px\"/>\n              }\n            </TextButtonDropdownArrow>\n          </TextButtonDropdownContent>\n        </TextButtonDropdownWrapper>\n    }\n  };\n\n  return (\n    <Wrapper className={className} ref={containerRef}>\n      {renderButton()}\n      <DropdownContent\n        ref={dropdownRef}\n        containerRef={containerRef}\n        customizationProps={{\n          itemsType: itemsType,\n          action: action ?? (() => {\n          }),\n          actionLabel: actionLabel,\n          actionVariant: actionVariant,\n          onValueUpdate: handleValueSelect,\n          multiSelect: multiSelect,\n          actionIcon: actionIcon,\n          actionLoading: actionLoading,\n          scrollable: scrollable,\n          pinTopItem: pinTopItem,\n          maxHeight: maxHeight,\n          items: items\n        }}\n        focused={focused}\n        setFocused={setFocused}\n        size={size}\n        width={width}\n        alignLeft={alignLeft}\n        isOpen={dropdownOpen}\n        setIsOpen={setDropdownOpen}\n        outline={keyboardNavigated}\n        filter=\"\"\n        selectedValues={rest.type === 'icon' && itemsType === 'normal' ? [] : selectedValues}\n        setSelectedValues={setSelectedValues}\n        messageOnNoResults=\"No results\"\n        isButton={true}\n        id=\"dropdown-content\"\n      />\n    </Wrapper>\n  );\n});\n\nexport default DropdownButton;\n"],"file":"DropdownButton.cjs"}

package/dist/Dropdown/DropdownButton.js

@@ -25,7 +25,7 @@ import { TextButtonDropdownArrow, TextButtonDropdownContent, TextButtonDropdownI
 import { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  display: inline-block;\n"])));
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n"])));
 var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var items = _ref.items,
       icon = _ref.icon,
@@ -74,11 +74,13 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       keyboardNavigated = _React$useState8[0],
       setKeyboardNavigated = _React$useState8[1];
 
-  var containerRef = useClickOutsideRef(function () {
+  var dropdownRef = React.useRef(null);
+  var containerRef = useFocusOutsideRef(function () {
     return setDropdownOpen(false);
-  }, [], useFocusOutsideRef(function () {
+  }, [dropdownRef]);
+  useClickOutsideRef(function () {
     return setDropdownOpen(false);
-  }));
+  }, [], containerRef);
   React.useEffect(function () {
     !dropdownOpen && setKeyboardNavigated(false);
   }, [dropdownOpen]);
@@ -162,6 +164,8 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: className,
     ref: containerRef,
     children: [renderButton(), /*#__PURE__*/_jsx(DropdownContent, {
+      ref: dropdownRef,
+      containerRef: containerRef,
       customizationProps: {
         itemsType: itemsType,
         action: action !== null && action !== void 0 ? action : function () {},