@laerdal/life-react-components 1.10.3-dev.2 → 1.10.3-dev.5

package/dist/Dropdown/BasicDropdown.js

@@ -1,5 +1,16 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _pt from "prop-types";
+
+var _BasicDropdown$propTy;
+
+var _excluded = ["id", "list", "placeholder", "messageOnNoResults", "itemsType", "action", "actionLabel", "actionVariant", "actionIcon", "actionLoading", "actionDisabled", "pinTopItem", "scrollable", "maxHeight", "disabled", "readOnly", "isButton", "activeValidationMessage", "autofilledMessage", "size", "margin", "minWidth", "className", "onBlur"];
+
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 import * as React from 'react';
 import { COLORS } from '../styles';
 import { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';
@@ -13,39 +24,35 @@ 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,
+      className = props.className,
+      onBlur = props.onBlur,
+      rest = _objectWithoutProperties(props, _excluded);
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -67,15 +74,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,9 +98,15 @@ 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 (actionLabel || multiSelect) return;
+    if (props.multiSelect === true) {
+      props.onSelect(values);
+    } else if (props.multiSelect === false || props.multiSelect === undefined) {
+      props.onSelect(values[0]);
+    } //don't close dropdown on item select if have custom action or multiselect
+
+
+    if (actionLabel || props.multiSelect) return;
 
     if (keyboardNavigated) {
       var _styledFieldRef$curre;
@@ -113,18 +121,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 +157,14 @@ var BasicDropdown = function BasicDropdown(_ref) {
     return listDisplayLabels.join(', ');
   };
 
+  var handleBlur = function handleBlur(e) {
+    // @ts-ignore
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      onBlur && onBlur(e);
+    }
+  };
+
+  var cls = (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? ' button ' : '').concat(className ? " ".concat(className) : '');
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(Dropdown, {
       ref: containerRef,
@@ -150,10 +173,11 @@ var BasicDropdown = function BasicDropdown(_ref) {
       readOnly: readOnly,
       disabled: disabled,
       margin: margin,
+      onBlur: handleBlur,
       minWidth: minWidth,
-      children: [/*#__PURE__*/_jsxs(StyledField, {
+      children: [/*#__PURE__*/_jsxs(StyledField, _objectSpread(_objectSpread({
         ref: styledFieldRef,
-        className: (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : ''),
+        className: cls,
         onMouseDown: defaultOnMouseDownHandler,
         onClick: function onClick(e) {
           if (!readOnly && !disabled) {
@@ -178,7 +202,8 @@ var BasicDropdown = function BasicDropdown(_ref) {
         placeholder: placeholder,
         showValidationMessage: !!activeValidationMessage,
         onKeyDown: handleKeyDown,
-        minWidth: minWidth,
+        minWidth: minWidth
+      }, rest), {}, {
         children: [/*#__PURE__*/_jsx(InputField, {
           ref: inputRef,
           type: "search",
@@ -201,7 +226,7 @@ var BasicDropdown = function BasicDropdown(_ref) {
             className: size ? size : ''
           })
         })]
-      }), !readOnly && !disabled && /*#__PURE__*/_jsx(DropdownContent, {
+      })), !readOnly && !disabled && /*#__PURE__*/_jsx(DropdownContent, {
         customizationProps: {
           itemsType: itemsType,
           action: action !== null && action !== void 0 ? action : function () {},
@@ -211,7 +236,7 @@ var BasicDropdown = function BasicDropdown(_ref) {
           scrollable: scrollable,
           onValueUpdate: handleValueSelect,
           items: list,
-          multiSelect: multiSelect,
+          multiSelect: props.multiSelect,
           pinTopItem: pinTopItem,
           maxHeight: maxHeight,
           actionIcon: actionIcon,
@@ -226,8 +251,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,10 +269,8 @@ var BasicDropdown = function BasicDropdown(_ref) {
       })]
     })]
   });
-};
-
-BasicDropdown.propTypes = {
-  id: _pt.string.isRequired,
+});
+BasicDropdown.propTypes = (_BasicDropdown$propTy = {
   list: _pt.array.isRequired,
   itemsType: _pt.oneOf(['normal', 'checkbox', 'radio']),
   action: _pt.func,
@@ -256,13 +279,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 +290,10 @@ BasicDropdown.propTypes = {
   activeValidationMessage: _pt.string,
   autofilledMessage: _pt.string,
   margin: _pt.string,
-  dropdownMenuValues: _pt.arrayOf(_pt.string)
-};
+  minWidth: _pt.string,
+  multiSelect: _pt.oneOf([true]).isRequired,
+  value: _pt.arrayOf(_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;
 //# sourceMappingURL=BasicDropdown.js.map

package/dist/Dropdown/BasicDropdown.js.map

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

package/dist/Dropdown/DropdownFilter.cjs

@@ -9,8 +9,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var React = _interopRequireWildcard(require("react"));
@@ -27,7 +31,7 @@ var _DropdownContent = _interopRequireDefault(require("./DropdownContent"));
 
 var _types = require("../types");
 
-var _styling = require("../InputFields/styling");
+var _InputFields = require("../InputFields");
 
 var _common = require("../common");
 
@@ -37,11 +41,17 @@ var _icons = require("../icons");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _excluded = ["id", "list", "placeholder", "onSelect", "onInputChange", "value", "required", "messageOnNoResults", "disabled", "readOnly", "scrollable", "activeValidationMessage", "autofilledMessage", "size", "disableFiltering", "buttonFontSize", "margin", "loading", "onFocus", "onBlur"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var DropdownFilter = function DropdownFilter(_ref) {
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var DropdownFilter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var id = _ref.id,
       list = _ref.list,
       placeholder = _ref.placeholder,
@@ -60,7 +70,10 @@ var DropdownFilter = function DropdownFilter(_ref) {
       buttonFontSize = _ref.buttonFontSize,
       _ref$margin = _ref.margin,
       margin = _ref$margin === void 0 ? '4px 0' : _ref$margin,
-      loading = _ref.loading;
+      loading = _ref.loading,
+      _onFocus = _ref.onFocus,
+      _onBlur = _ref.onBlur,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _React$useState = React.useState(false),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -106,6 +119,9 @@ var DropdownFilter = function DropdownFilter(_ref) {
   var inputRef = (0, _common.useFocusVisibleRef)([styledFieldRef]);
   var clearButtonRef = React.useRef(null);
   (0, _common.useActionWithin)(styledFieldRef, input && !readOnly && !disabled ? [clearButtonRef] : []);
+  React.useImperativeHandle(ref, function () {
+    return inputRef.current;
+  }, [inputRef]);
   var containerRef = (0, _common.useClickOutsideRef)(function () {
     return setIsOpen(false);
   }, [], (0, _common.useFocusOutsideRef)(function () {
@@ -199,7 +215,7 @@ var DropdownFilter = function DropdownFilter(_ref) {
       showValidationMessage: !!activeValidationMessage,
       onMouseDown: _common.defaultOnMouseDownHandler,
       "data-testid": "otherdiv_".concat(id),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyling.InputField, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyling.InputField, _objectSpread({
         id: id,
         ref: inputRef,
         autoComplete: 'off-' + Math.floor(Math.random() * 999999999999),
@@ -222,16 +238,18 @@ var DropdownFilter = function DropdownFilter(_ref) {
             }
           }
         },
-        onFocus: function onFocus() {
-          return setPlaceholderSearch('');
+        onFocus: function onFocus(e) {
+          setPlaceholderSearch('');
+          _onFocus && _onFocus(e);
         },
-        onBlur: function onBlur() {
-          return setPlaceholderSearch(placeholder || '');
+        onBlur: function onBlur(e) {
+          setPlaceholderSearch(placeholder || '');
+          _onBlur && _onBlur(e);
         },
         required: required,
         tabIndex: disabled || readOnly ? -1 : 0,
         disabled: disabled || false
-      }), input && !readOnly && !disabled && !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+      }, rest)), input && !readOnly && !disabled && !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
         action: handleInputClear,
         ref: clearButtonRef,
         useTransparentBackground: true,
@@ -296,14 +314,14 @@ var DropdownFilter = function DropdownFilter(_ref) {
         isButton: false,
         id: "".concat(id, "_dropdowncontent")
       })]
-    }), activeValidationMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ErrorMessage, {
+    }), activeValidationMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_InputFields.ErrorMessage, {
       className: size || '',
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.TechnicalWarning, {
         color: _styles.COLORS.critical_400
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         children: activeValidationMessage
       })]
-    }), autofilledMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.AutofilledMessage, {
+    }), autofilledMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_InputFields.AutofilledMessage, {
       className: size || '',
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Information, {
         color: _styles.COLORS.neutral_600
@@ -312,10 +330,8 @@ var DropdownFilter = function DropdownFilter(_ref) {
       })]
     })]
   });
-};
-
+});
 DropdownFilter.propTypes = {
-  id: _propTypes.default.string.isRequired,
   list: _propTypes.default.array.isRequired,
   placeholder: _propTypes.default.string,
   value: _propTypes.default.string,

package/dist/Dropdown/DropdownFilter.cjs.map

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

package/dist/Dropdown/DropdownFilter.d.ts

@@ -1,7 +1,7 @@
+import * as React from 'react';
 import { DropdownItem } from './DropdownContent';
 import { Size } from '../types';
-interface DropdownFilterProps {
-    id: string;
+interface DropdownFilterProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onSelect' | 'size' | 'list' | 'autoComplete' | 'type' | 'placeholder' | 'onKeyDown' | 'value' | 'onChange' | 'required' | 'tabIndex' | 'disabled' | 'readOnly'> {
     list: DropdownItem[];
     placeholder?: string;
     value?: string;
@@ -20,5 +20,5 @@ interface DropdownFilterProps {
     margin?: string;
     scrollable?: boolean;
 }
-declare const DropdownFilter: ({ id, list, placeholder, onSelect, onInputChange, value, required, messageOnNoResults, disabled, readOnly, scrollable, activeValidationMessage, autofilledMessage, size, disableFiltering, buttonFontSize, margin, loading, }: DropdownFilterProps) => JSX.Element;
+declare const DropdownFilter: React.ForwardRefExoticComponent<DropdownFilterProps & React.RefAttributes<unknown>>;
 export default DropdownFilter;