@laerdal/life-react-components 1.9.8-dev.17 → 1.9.8-dev.19

package/dist/Dropdown/BasicDropdown.cjs

@@ -37,38 +37,34 @@ 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 BasicDropdown = function BasicDropdown(_ref) {
-  var id = _ref.id,
-      list = _ref.list,
-      placeholder = _ref.placeholder,
-      onSelect = _ref.onSelect,
-      setDropdownMenuValues = _ref.setDropdownMenuValues,
-      initalValue = _ref.initalValue,
-      disableSorting = _ref.disableSorting,
-      messageOnNoResults = _ref.messageOnNoResults,
-      _ref$itemsType = _ref.itemsType,
-      itemsType = _ref$itemsType === void 0 ? 'normal' : _ref$itemsType,
-      action = _ref.action,
-      actionLabel = _ref.actionLabel,
-      actionVariant = _ref.actionVariant,
-      actionIcon = _ref.actionIcon,
-      actionLoading = _ref.actionLoading,
-      actionDisabled = _ref.actionDisabled,
-      pinTopItem = _ref.pinTopItem,
-      multiSelect = _ref.multiSelect,
-      _ref$scrollable = _ref.scrollable,
-      scrollable = _ref$scrollable === void 0 ? true : _ref$scrollable,
-      maxHeight = _ref.maxHeight,
-      disabled = _ref.disabled,
-      readOnly = _ref.readOnly,
-      isButton = _ref.isButton,
-      activeValidationMessage = _ref.activeValidationMessage,
-      autofilledMessage = _ref.autofilledMessage,
-      size = _ref.size,
-      _ref$margin = _ref.margin,
-      margin = _ref$margin === void 0 ? '4px 0' : _ref$margin,
-      dropdownMenuValues = _ref.dropdownMenuValues,
-      minWidth = _ref.minWidth;
+var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var id = props.id,
+      list = props.list,
+      placeholder = props.placeholder,
+      messageOnNoResults = props.messageOnNoResults,
+      _props$itemsType = props.itemsType,
+      itemsType = _props$itemsType === void 0 ? 'normal' : _props$itemsType,
+      action = props.action,
+      actionLabel = props.actionLabel,
+      actionVariant = props.actionVariant,
+      actionIcon = props.actionIcon,
+      actionLoading = props.actionLoading,
+      actionDisabled = props.actionDisabled,
+      pinTopItem = props.pinTopItem,
+      _props$scrollable = props.scrollable,
+      scrollable = _props$scrollable === void 0 ? true : _props$scrollable,
+      maxHeight = props.maxHeight,
+      disabled = props.disabled,
+      readOnly = props.readOnly,
+      isButton = props.isButton,
+      activeValidationMessage = props.activeValidationMessage,
+      autofilledMessage = props.autofilledMessage,
+      size = props.size,
+      _props$margin = props.margin,
+      margin = _props$margin === void 0 ? '4px 0' : _props$margin,
+      minWidth = props.minWidth,
+      multiSelect = props.multiSelect,
+      onBlur = props.onBlur;
 
   var _React$useState = React.useState(false),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -90,15 +86,10 @@ var BasicDropdown = function BasicDropdown(_ref) {
       focused = _React$useState8[0],
       setFocused = _React$useState8[1];
 
-  var _React$useState9 = React.useState(initalValue ? [initalValue] : []),
+  var _React$useState9 = React.useState(false),
       _React$useState10 = (0, _slicedToArray2.default)(_React$useState9, 2),
-      selectedValues = _React$useState10[0],
-      setSelectedValues = _React$useState10[1];
-
-  var _React$useState11 = React.useState(false),
-      _React$useState12 = (0, _slicedToArray2.default)(_React$useState11, 2),
-      keyboardNavigated = _React$useState12[0],
-      setKeyboardNavigated = _React$useState12[1];
+      keyboardNavigated = _React$useState10[0],
+      setKeyboardNavigated = _React$useState10[1];
 
   var inputRef = React.useRef(null);
   var styledFieldRef = (0, _common.useFocusVisibleRef)([inputRef]);
@@ -119,7 +110,13 @@ var BasicDropdown = function BasicDropdown(_ref) {
 
   var handleValueSelect = function handleValueSelect(values) {
     setInput(values.join(', '));
-    onSelect && onSelect(values); //don't close dropdown on item select if have custom action or multiselect
+
+    if (props.multiSelect) {
+      props.onSelect(values);
+    } else if (props.multiSelect === false || props.multiSelect === undefined) {
+      props.onSelect(values[0]);
+    } //don't close dropdown on item select if have custom action or multiselect
+
 
     if (actionLabel || multiSelect) return;
 
@@ -136,18 +133,25 @@ var BasicDropdown = function BasicDropdown(_ref) {
   };
 
   React.useEffect(function () {
-    if (initalValue || dropdownMenuValues) {
-      var initValue = dropdownMenuValues ? dropdownMenuValues.join(',') : initalValue ? initalValue : '';
-      setInput(initValue);
-      setSelectedValues([initValue]);
+    if (props.value) {
+      if (props.multiSelect) {
+        setInput(props.value.join(', '));
+      } else if (props.multiSelect === false || props.multiSelect === undefined) {
+        setInput(props.value);
+      }
+    } else {
+      setInput('');
     }
-  }, [initalValue, dropdownMenuValues]);
+  }, [props.value, props.multiSelect]);
   React.useEffect(function () {
     setIsLoading(false);
   }, [input]);
   React.useEffect(function () {
     !isOpen && setKeyboardNavigated(false);
   }, [isOpen]);
+  React.useImperativeHandle(ref, function () {
+    return inputRef.current;
+  }, [inputRef]);
 
   var customSetIsOpen = function customSetIsOpen(isOpen) {
     setIsOpen(isOpen);
@@ -165,6 +169,13 @@ var BasicDropdown = function BasicDropdown(_ref) {
     return listDisplayLabels.join(', ');
   };
 
+  var handleBlur = function handleBlur(e) {
+    // @ts-ignore
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      onBlur && onBlur(e);
+    }
+  };
+
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyling.Dropdown, {
       ref: containerRef,
@@ -173,6 +184,7 @@ var BasicDropdown = function BasicDropdown(_ref) {
       readOnly: readOnly,
       disabled: disabled,
       margin: margin,
+      onBlur: handleBlur,
       minWidth: minWidth,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyling.StyledField, {
         ref: styledFieldRef,
@@ -249,8 +261,8 @@ var BasicDropdown = function BasicDropdown(_ref) {
         messageOnNoResults: messageOnNoResults !== null && messageOnNoResults !== void 0 ? messageOnNoResults : '',
         outline: keyboardNavigated,
         isButton: isButton || false,
-        selectedValues: dropdownMenuValues !== null && dropdownMenuValues !== void 0 ? dropdownMenuValues : selectedValues,
-        setSelectedValues: setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues,
+        selectedValues: props.multiSelect ? props.value || [] : [props.value || ''],
+        setSelectedValues: handleValueSelect,
         id: "".concat(id, "_dropdowncontent")
       })]
     }), activeValidationMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ErrorMessage, {
@@ -267,8 +279,7 @@ var BasicDropdown = function BasicDropdown(_ref) {
       })]
     })]
   });
-};
-
+});
 BasicDropdown.propTypes = {
   id: _propTypes.default.string.isRequired,
   list: _propTypes.default.array.isRequired,
@@ -279,13 +290,9 @@ BasicDropdown.propTypes = {
   actionLoading: _propTypes.default.bool,
   actionDisabled: _propTypes.default.bool,
   pinTopItem: _propTypes.default.bool,
-  multiSelect: _propTypes.default.bool,
   scrollable: _propTypes.default.bool,
   maxHeight: _propTypes.default.string,
   placeholder: _propTypes.default.string,
-  onSelect: _propTypes.default.func,
-  setDropdownMenuValues: _propTypes.default.func,
-  initalValue: _propTypes.default.string,
   disableSorting: _propTypes.default.bool,
   messageOnNoResults: _propTypes.default.string,
   disabled: _propTypes.default.bool,
@@ -294,7 +301,11 @@ BasicDropdown.propTypes = {
   activeValidationMessage: _propTypes.default.string,
   autofilledMessage: _propTypes.default.string,
   margin: _propTypes.default.string,
-  dropdownMenuValues: _propTypes.default.arrayOf(_propTypes.default.string)
+  minWidth: _propTypes.default.string,
+  onBlur: _propTypes.default.func,
+  multiSelect: _propTypes.default.oneOf([true]).isRequired,
+  value: _propTypes.default.arrayOf(_propTypes.default.string),
+  onSelect: _propTypes.default.func.isRequired
 };
 var _default = BasicDropdown;
 exports.default = _default;

package/dist/Dropdown/BasicDropdown.cjs.map

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

package/dist/Dropdown/BasicDropdown.d.ts

@@ -1,35 +1,42 @@
-import * as React from 'react';
-import { DropdownItem } from './DropdownContent';
-import { Size } from '../types';
-interface DropdownFilterProps {
-    id: string;
-    list: DropdownItem[];
-    itemsType?: 'normal' | 'checkbox' | 'radio';
-    action?: () => void;
-    actionLabel?: string;
-    actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;
-    actionIcon?: React.ReactNode;
-    actionLoading?: boolean;
-    actionDisabled?: boolean;
-    pinTopItem?: boolean;
-    multiSelect?: boolean;
-    scrollable?: boolean;
-    maxHeight?: string;
-    placeholder?: string;
-    onSelect?: (value: string[]) => void;
-    setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;
-    initalValue?: string;
-    disableSorting?: boolean;
-    messageOnNoResults?: string;
-    disabled?: boolean;
-    readOnly?: boolean;
-    isButton?: boolean;
-    activeValidationMessage?: string;
-    autofilledMessage?: string;
-    size?: Size.Small | Size.Medium;
-    margin?: string;
-    dropdownMenuValues?: string[];
-    minWidth?: string;
-}
-declare const BasicDropdown: ({ id, list, placeholder, onSelect, setDropdownMenuValues, initalValue, disableSorting, messageOnNoResults, itemsType, action, actionLabel, actionVariant, actionIcon, actionLoading, actionDisabled, pinTopItem, multiSelect, scrollable, maxHeight, disabled, readOnly, isButton, activeValidationMessage, autofilledMessage, size, margin, dropdownMenuValues, minWidth, }: DropdownFilterProps) => JSX.Element;
-export default BasicDropdown;
+import * as React from 'react';
+import { DropdownItem } from './DropdownContent';
+import { Size } from '../types';
+interface BasicDropdownCommonProps {
+    id: string;
+    list: DropdownItem[];
+    itemsType?: 'normal' | 'checkbox' | 'radio';
+    action?: () => void;
+    actionLabel?: string;
+    actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;
+    actionIcon?: React.ReactNode;
+    actionLoading?: boolean;
+    actionDisabled?: boolean;
+    pinTopItem?: boolean;
+    scrollable?: boolean;
+    maxHeight?: string;
+    placeholder?: string;
+    disableSorting?: boolean;
+    messageOnNoResults?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    isButton?: boolean;
+    activeValidationMessage?: string;
+    autofilledMessage?: string;
+    size?: Size.Small | Size.Medium;
+    margin?: string;
+    minWidth?: string;
+    onBlur?: (event: React.FocusEvent) => void;
+}
+declare type DropdownFilterMultiSelectProps = BasicDropdownCommonProps & {
+    multiSelect: true;
+    value?: string[];
+    onSelect: (value: string[]) => void;
+};
+declare type DropdownFilterSingleSelectProps = BasicDropdownCommonProps & {
+    multiSelect?: false | undefined;
+    value?: string;
+    onSelect: (value: string) => void;
+};
+declare type DropdownFilterProps = DropdownFilterMultiSelectProps | DropdownFilterSingleSelectProps;
+declare const BasicDropdown: React.ForwardRefExoticComponent<DropdownFilterProps & React.RefAttributes<unknown>>;
+export default BasicDropdown;

package/dist/Dropdown/BasicDropdown.js

@@ -13,39 +13,34 @@ import { useFocusOutsideRef } from '../common';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-
-var BasicDropdown = function BasicDropdown(_ref) {
-  var id = _ref.id,
-      list = _ref.list,
-      placeholder = _ref.placeholder,
-      onSelect = _ref.onSelect,
-      setDropdownMenuValues = _ref.setDropdownMenuValues,
-      initalValue = _ref.initalValue,
-      disableSorting = _ref.disableSorting,
-      messageOnNoResults = _ref.messageOnNoResults,
-      _ref$itemsType = _ref.itemsType,
-      itemsType = _ref$itemsType === void 0 ? 'normal' : _ref$itemsType,
-      action = _ref.action,
-      actionLabel = _ref.actionLabel,
-      actionVariant = _ref.actionVariant,
-      actionIcon = _ref.actionIcon,
-      actionLoading = _ref.actionLoading,
-      actionDisabled = _ref.actionDisabled,
-      pinTopItem = _ref.pinTopItem,
-      multiSelect = _ref.multiSelect,
-      _ref$scrollable = _ref.scrollable,
-      scrollable = _ref$scrollable === void 0 ? true : _ref$scrollable,
-      maxHeight = _ref.maxHeight,
-      disabled = _ref.disabled,
-      readOnly = _ref.readOnly,
-      isButton = _ref.isButton,
-      activeValidationMessage = _ref.activeValidationMessage,
-      autofilledMessage = _ref.autofilledMessage,
-      size = _ref.size,
-      _ref$margin = _ref.margin,
-      margin = _ref$margin === void 0 ? '4px 0' : _ref$margin,
-      dropdownMenuValues = _ref.dropdownMenuValues,
-      minWidth = _ref.minWidth;
+var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var id = props.id,
+      list = props.list,
+      placeholder = props.placeholder,
+      messageOnNoResults = props.messageOnNoResults,
+      _props$itemsType = props.itemsType,
+      itemsType = _props$itemsType === void 0 ? 'normal' : _props$itemsType,
+      action = props.action,
+      actionLabel = props.actionLabel,
+      actionVariant = props.actionVariant,
+      actionIcon = props.actionIcon,
+      actionLoading = props.actionLoading,
+      actionDisabled = props.actionDisabled,
+      pinTopItem = props.pinTopItem,
+      _props$scrollable = props.scrollable,
+      scrollable = _props$scrollable === void 0 ? true : _props$scrollable,
+      maxHeight = props.maxHeight,
+      disabled = props.disabled,
+      readOnly = props.readOnly,
+      isButton = props.isButton,
+      activeValidationMessage = props.activeValidationMessage,
+      autofilledMessage = props.autofilledMessage,
+      size = props.size,
+      _props$margin = props.margin,
+      margin = _props$margin === void 0 ? '4px 0' : _props$margin,
+      minWidth = props.minWidth,
+      multiSelect = props.multiSelect,
+      onBlur = props.onBlur;
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -67,15 +62,10 @@ var BasicDropdown = function BasicDropdown(_ref) {
       focused = _React$useState8[0],
       setFocused = _React$useState8[1];
 
-  var _React$useState9 = React.useState(initalValue ? [initalValue] : []),
+  var _React$useState9 = React.useState(false),
       _React$useState10 = _slicedToArray(_React$useState9, 2),
-      selectedValues = _React$useState10[0],
-      setSelectedValues = _React$useState10[1];
-
-  var _React$useState11 = React.useState(false),
-      _React$useState12 = _slicedToArray(_React$useState11, 2),
-      keyboardNavigated = _React$useState12[0],
-      setKeyboardNavigated = _React$useState12[1];
+      keyboardNavigated = _React$useState10[0],
+      setKeyboardNavigated = _React$useState10[1];
 
   var inputRef = React.useRef(null);
   var styledFieldRef = useFocusVisibleRef([inputRef]);
@@ -96,7 +86,13 @@ var BasicDropdown = function BasicDropdown(_ref) {
 
   var handleValueSelect = function handleValueSelect(values) {
     setInput(values.join(', '));
-    onSelect && onSelect(values); //don't close dropdown on item select if have custom action or multiselect
+
+    if (props.multiSelect) {
+      props.onSelect(values);
+    } else if (props.multiSelect === false || props.multiSelect === undefined) {
+      props.onSelect(values[0]);
+    } //don't close dropdown on item select if have custom action or multiselect
+
 
     if (actionLabel || multiSelect) return;
 
@@ -113,18 +109,25 @@ var BasicDropdown = function BasicDropdown(_ref) {
   };
 
   React.useEffect(function () {
-    if (initalValue || dropdownMenuValues) {
-      var initValue = dropdownMenuValues ? dropdownMenuValues.join(',') : initalValue ? initalValue : '';
-      setInput(initValue);
-      setSelectedValues([initValue]);
+    if (props.value) {
+      if (props.multiSelect) {
+        setInput(props.value.join(', '));
+      } else if (props.multiSelect === false || props.multiSelect === undefined) {
+        setInput(props.value);
+      }
+    } else {
+      setInput('');
     }
-  }, [initalValue, dropdownMenuValues]);
+  }, [props.value, props.multiSelect]);
   React.useEffect(function () {
     setIsLoading(false);
   }, [input]);
   React.useEffect(function () {
     !isOpen && setKeyboardNavigated(false);
   }, [isOpen]);
+  React.useImperativeHandle(ref, function () {
+    return inputRef.current;
+  }, [inputRef]);
 
   var customSetIsOpen = function customSetIsOpen(isOpen) {
     setIsOpen(isOpen);
@@ -142,6 +145,13 @@ var BasicDropdown = function BasicDropdown(_ref) {
     return listDisplayLabels.join(', ');
   };
 
+  var handleBlur = function handleBlur(e) {
+    // @ts-ignore
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      onBlur && onBlur(e);
+    }
+  };
+
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(Dropdown, {
       ref: containerRef,
@@ -150,6 +160,7 @@ var BasicDropdown = function BasicDropdown(_ref) {
       readOnly: readOnly,
       disabled: disabled,
       margin: margin,
+      onBlur: handleBlur,
       minWidth: minWidth,
       children: [/*#__PURE__*/_jsxs(StyledField, {
         ref: styledFieldRef,
@@ -226,8 +237,8 @@ var BasicDropdown = function BasicDropdown(_ref) {
         messageOnNoResults: messageOnNoResults !== null && messageOnNoResults !== void 0 ? messageOnNoResults : '',
         outline: keyboardNavigated,
         isButton: isButton || false,
-        selectedValues: dropdownMenuValues !== null && dropdownMenuValues !== void 0 ? dropdownMenuValues : selectedValues,
-        setSelectedValues: setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues,
+        selectedValues: props.multiSelect ? props.value || [] : [props.value || ''],
+        setSelectedValues: handleValueSelect,
         id: "".concat(id, "_dropdowncontent")
       })]
     }), activeValidationMessage && /*#__PURE__*/_jsxs(ErrorMessage, {
@@ -244,8 +255,7 @@ var BasicDropdown = function BasicDropdown(_ref) {
       })]
     })]
   });
-};
-
+});
 BasicDropdown.propTypes = {
   id: _pt.string.isRequired,
   list: _pt.array.isRequired,
@@ -256,13 +266,9 @@ BasicDropdown.propTypes = {
   actionLoading: _pt.bool,
   actionDisabled: _pt.bool,
   pinTopItem: _pt.bool,
-  multiSelect: _pt.bool,
   scrollable: _pt.bool,
   maxHeight: _pt.string,
   placeholder: _pt.string,
-  onSelect: _pt.func,
-  setDropdownMenuValues: _pt.func,
-  initalValue: _pt.string,
   disableSorting: _pt.bool,
   messageOnNoResults: _pt.string,
   disabled: _pt.bool,
@@ -271,7 +277,11 @@ BasicDropdown.propTypes = {
   activeValidationMessage: _pt.string,
   autofilledMessage: _pt.string,
   margin: _pt.string,
-  dropdownMenuValues: _pt.arrayOf(_pt.string)
+  minWidth: _pt.string,
+  onBlur: _pt.func,
+  multiSelect: _pt.oneOf([true]).isRequired,
+  value: _pt.arrayOf(_pt.string),
+  onSelect: _pt.func.isRequired
 };
 export default BasicDropdown;
 //# sourceMappingURL=BasicDropdown.js.map