@laerdal/life-react-components 1.7.0 → 1.8.0-dev.10

package/dist/Dropdown/DropdownFilter.cjs

@@ -31,6 +31,10 @@ var _styling = require("../InputFields/styling");
 
 var _common = require("../common");
 
+var _Button = require("../Button");
+
+var _icons = require("../icons");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 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); }
@@ -43,47 +47,45 @@ var DropdownFilter = function DropdownFilter(_ref) {
       placeholder = _ref.placeholder,
       onSelect = _ref.onSelect,
       onInputChange = _ref.onInputChange,
-      initalValue = _ref.initalValue,
+      value = _ref.value,
       required = _ref.required,
-      disableSorting = _ref.disableSorting,
       messageOnNoResults = _ref.messageOnNoResults,
       disabled = _ref.disabled,
-      locked = _ref.locked,
+      readOnly = _ref.readOnly,
       scrollable = _ref.scrollable,
-      isButton = _ref.isButton,
       activeValidationMessage = _ref.activeValidationMessage,
       autofilledMessage = _ref.autofilledMessage,
       size = _ref.size,
+      disableFiltering = _ref.disableFiltering,
       buttonFontSize = _ref.buttonFontSize,
-      keepInitialValue = _ref.keepInitialValue,
-      icon = _ref.icon,
       _ref$margin = _ref.margin,
-      margin = _ref$margin === void 0 ? '4px 0' : _ref$margin;
+      margin = _ref$margin === void 0 ? '4px 0' : _ref$margin,
+      loading = _ref.loading;
 
   var _React$useState = React.useState(false),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
       isOpen = _React$useState2[0],
       setIsOpen = _React$useState2[1];
 
-  var _React$useState3 = React.useState(false),
+  var _React$useState3 = React.useState(),
       _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-      isLoading = _React$useState4[0],
-      setIsLoading = _React$useState4[1];
+      input = _React$useState4[0],
+      setInput = _React$useState4[1];
 
-  var _React$useState5 = React.useState(initalValue !== null && initalValue !== void 0 ? initalValue : ''),
+  var _React$useState5 = React.useState(placeholder || ''),
       _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
-      input = _React$useState6[0],
-      setInput = _React$useState6[1];
+      placeholderSearch = _React$useState6[0],
+      setPlaceholderSearch = _React$useState6[1];
 
-  var _React$useState7 = React.useState(placeholder || ''),
+  var _React$useState7 = React.useState(false),
       _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
-      placeholderSearch = _React$useState8[0],
-      setPlaceholderSearch = _React$useState8[1];
+      restartFilter = _React$useState8[0],
+      setRestartFilter = _React$useState8[1];
 
-  var _React$useState9 = React.useState(false),
+  var _React$useState9 = React.useState(),
       _React$useState10 = (0, _slicedToArray2.default)(_React$useState9, 2),
-      restartFilter = _React$useState10[0],
-      setRestartFilter = _React$useState10[1];
+      selectedItem = _React$useState10[0],
+      setSelectedItem = _React$useState10[1];
 
   var _React$useState11 = React.useState([]),
       _React$useState12 = (0, _slicedToArray2.default)(_React$useState11, 2),
@@ -95,104 +97,119 @@ var DropdownFilter = function DropdownFilter(_ref) {
       focused = _React$useState14[0],
       setFocused = _React$useState14[1];
 
-  var inputRef = React.useRef(null);
-  var styledFieldRef = (0, _common.useFocusVisibleRef)([inputRef]);
-
-  var handleKeyPress = function handleKeyPress(e) {
-    if (e.key === 'Enter' && !locked) {
-      var matches = list === null || list === void 0 ? void 0 : list.filter(function (c) {
-        return c.label.toLowerCase() === input.toLowerCase();
-      });
-
-      if (matches.length === 1 && onSelect) {
-        onSelect(matches[0].label);
-        setInput(matches[0].label);
-      }
+  var _React$useState15 = React.useState(true),
+      _React$useState16 = (0, _slicedToArray2.default)(_React$useState15, 2),
+      init = _React$useState16[0],
+      setInit = _React$useState16[1];
+
+  var styledFieldRef = (0, _common.useFocusVisibleRef)();
+  var inputRef = (0, _common.useFocusVisibleRef)([styledFieldRef]);
+  var clearButtonRef = React.useRef(null);
+  (0, _common.useActionWithin)(styledFieldRef, input && !readOnly && !disabled ? [clearButtonRef] : []);
+  var containerRef = (0, _common.useClickOutsideRef)(function () {
+    return setIsOpen(false);
+  }, [], (0, _common.useFocusOutsideRef)(function () {
+    return setIsOpen(false);
+  }));
+
+  var handleInputKeyDown = function handleInputKeyDown(e) {
+    if (e.key === 'Esc' || e.key === 'Escape') {
+      e.preventDefault();
+    }
 
-      if (!isOpen) setFocused(0);
-      setIsOpen(!isOpen);
+    if (e.key === 'ArrowDown' || e.key === 'Down' || e.key === 'ArrowUp' || e.key === 'Up') {
+      e.preventDefault();
 
-      if (matches.length === 0) {
-        setInput('');
+      if (!isOpen) {
+        setIsOpen(true);
       }
     }
   };
 
   React.useEffect(function () {
-    if (initalValue || initalValue === '') {
-      setInput(initalValue);
-      setRestartFilter(true);
-    }
-  }, [initalValue]);
+    setInit(true);
+    setSelectedValues(!!value ? [value] : []);
+  }, [value]);
   React.useEffect(function () {
-    if (!isOpen && !list.some(function (x) {
-      return x.label == input;
-    })) {
+    if (selectedValues !== null && selectedValues !== void 0 && selectedValues.length) {
+      var _ref2, _item$displayLabel;
+
+      var val = selectedValues[0];
+      var item = list.find(function (a) {
+        return a.value === val;
+      });
+      setSelectedItem(item);
+      setInput((_ref2 = (_item$displayLabel = item === null || item === void 0 ? void 0 : item.displayLabel) !== null && _item$displayLabel !== void 0 ? _item$displayLabel : item === null || item === void 0 ? void 0 : item.value) !== null && _ref2 !== void 0 ? _ref2 : '');
+      onSelect && !init && onSelect(val);
+    } else {
+      setSelectedItem(undefined);
+      onSelect && !init && onSelect('');
       setInput('');
-      setPlaceholderSearch(placeholder || '');
     }
-  }, [isOpen]);
+  }, [selectedValues]);
   React.useEffect(function () {
-    setIsLoading(false);
-    if (selectedValues.length > 0 && !list.some(function (x) {
-      return x.label == input;
-    })) setSelectedValues([]);
-
-    if (list.some(function (x) {
-      return x.label == input;
-    })) {
-      setSelectedValues([input]);
-      onSelect && onSelect(input);
+    if (!isOpen && !!selectedItem) {
+      var _ref3, _selectedItem$display;
+
+      setInput((_ref3 = (_selectedItem$display = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.displayLabel) !== null && _selectedItem$display !== void 0 ? _selectedItem$display : selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) !== null && _ref3 !== void 0 ? _ref3 : '');
     }
-  }, [input]);
 
-  var renderStandardDropdown = function renderStandardDropdown() {
+    setRestartFilter(true);
+  }, [isOpen, selectedItem]);
+
+  var handleInputClear = function handleInputClear(e) {
+    var _inputRef$current;
+
+    setInput('');
+    setSelectedValues([]);
+    onSelect && onSelect('');
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus({
+      focusVisible: (e === null || e === void 0 ? void 0 : e.detail) !== 1
+    });
+  };
+
+  var renderInput = function renderInput() {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyling.StyledField, {
       ref: styledFieldRef,
-      className: (isOpen ? 'expanded ' : '').concat(size ? size : ''),
+      className: size ? size : '',
       onClick: function onClick(e) {
-        if (!locked && !disabled) {
+        if (!readOnly && !disabled) {
           e.stopPropagation();
           setIsOpen(!isOpen);
 
           if (isOpen) {
-            var _inputRef$current;
+            var _inputRef$current2;
 
-            (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
+            (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.blur();
           } else {
-            var _inputRef$current2;
+            var _inputRef$current3;
 
-            (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
+            (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus();
           }
         }
       },
-      tabIndex: disabled || locked ? -1 : 0,
       disabled: disabled || false,
-      locked: locked || false,
+      readOnly: readOnly || false,
       isPlaceholder: !input,
       fontSize: buttonFontSize,
       showValidationMessage: !!activeValidationMessage,
-      onKeyPress: function onKeyPress(e) {
-        if (e.key === 'Enter') {
-          var _inputRef$current3;
-
-          setIsOpen(true);
-          (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus();
-        }
-      },
       onMouseDown: _common.defaultOnMouseDownHandler,
       "data-testid": "otherdiv_".concat(id),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyling.InputField, {
+        id: id,
         ref: inputRef,
         autoComplete: 'off-' + Math.floor(Math.random() * 999999999999),
         type: "search",
         placeholder: placeholderSearch,
+        onKeyDown: handleInputKeyDown,
         value: input,
-        className: size ? "".concat(size, " value") : 'value',
         onChange: function onChange(e) {
-          if (!locked && !disabled) {
+          if (!e.target.value) {
+            setSelectedValues([]);
+          }
+
+          if (!readOnly && !disabled && e.target.value !== input) {
             setRestartFilter(false);
-            setIsLoading(true);
             setIsOpen(true);
             setInput(e.target.value);
 
@@ -208,14 +225,29 @@ var DropdownFilter = function DropdownFilter(_ref) {
           return setPlaceholderSearch(placeholder || '');
         },
         required: required,
-        tabIndex: -1,
+        tabIndex: disabled || readOnly ? -1 : 0,
         disabled: disabled || false
-      }), isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicator.LoadingIndicator, {
-        size: _types.Size.Small,
-        color: _styles.COLORS.neutral_600
-      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      }), input && !readOnly && !disabled && !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+        action: handleInputClear,
+        ref: clearButtonRef,
+        useTransparentBackground: true,
+        shape: 'circular',
+        style: {
+          marginLeft: '-4px'
+        },
+        variant: 'secondary',
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Clear, {})
+      }), !disabled && !readOnly && loading && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          marginLeft: '-4xp'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicator.LoadingIndicator, {
+          size: _types.Size.Small,
+          color: _styles.COLORS.neutral_600
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: 'dropdown-arrow',
-        children: isOpen && !locked && !disabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.ArrowDropUp, {
+        children: isOpen && !readOnly && !disabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.ArrowDropUp, {
           size: "24px",
           className: size ? size : ''
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.ArrowDropDown, {
@@ -226,90 +258,45 @@ var DropdownFilter = function DropdownFilter(_ref) {
     });
   };
 
-  var renderButtonDropdown = function renderButtonDropdown() {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyling.ButtonDropdownWrapper, {
-      onClick: function onClick(e) {
-        e.stopPropagation();
-        setIsOpen(!isOpen);
-      },
-      disabled: disabled,
-      locked: locked,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyling.StyledField, {
-        ref: styledFieldRef,
-        className: (isOpen ? 'expanded ' : '').concat(size ? size + ' ' : '').concat(isButton ? 'button' : ''),
-        tabIndex: disabled || locked ? -1 : 0,
-        onKeyPress: handleKeyPress,
-        onMouseDown: _common.defaultOnMouseDownHandler,
-        disabled: disabled || false,
-        locked: locked || false,
-        showValidationMessage: !!activeValidationMessage,
-        fontSize: buttonFontSize,
-        children: [icon, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: 'value',
-          children: initalValue && keepInitialValue ? initalValue : input || placeholderSearch
-        }), isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicator.LoadingIndicator, {
-          size: _types.Size.Small,
-          color: _styles.COLORS.neutral_600
-        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: 'dropdown-arrow',
-          children: isOpen && !locked && !disabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.ArrowDropUp, {
-            size: "24px",
-            className: size ? size : ''
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.ArrowDropDown, {
-            size: "24px",
-            className: size ? size : ''
-          })
-        })]
-      })
-    });
-  };
-
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyling.Dropdown, {
-      isButton: isButton || false,
+      ref: containerRef,
       disabled: disabled,
-      locked: locked,
+      isButton: false,
+      readOnly: readOnly,
       className: size ? size : '',
       margin: margin,
-      children: [!isButton && renderStandardDropdown(), !!isButton && renderButtonDropdown(), !locked && !disabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownContent.default, {
-        isOpen: isOpen,
+      children: [renderInput(), !readOnly && !disabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownContent.default, {
+        isOpen: isOpen && !loading,
         messageOnNoResults: messageOnNoResults !== null && messageOnNoResults !== void 0 ? messageOnNoResults : '',
         selectedValues: selectedValues,
         setSelectedValues: setSelectedValues,
-        hideOnClickOutside: true,
         size: size !== null && size !== void 0 ? size : _types.Size.Small,
         focused: focused,
         setFocused: setFocused,
+        outline: false,
         customizationProps: {
           itemsType: 'normal',
           scrollable: scrollable,
           multiSelect: false,
           action: function action() {},
           onValueUpdate: function onValueUpdate(values) {
-            var _values$;
-
-            var val = (_values$ = values[0]) !== null && _values$ !== void 0 ? _values$ : '';
             setRestartFilter(true);
-            setInput(val);
+            setInit(false);
           },
-          items: list.map(function (x) {
-            return {
-              value: x.label,
-              customContent: x.customContent
-            };
-          })
+          items: list
         },
-        filter: !restartFilter ? input : '',
+        filter: !disableFiltering && !restartFilter ? input || '' : '',
         setIsOpen: setIsOpen,
         alignLeft: false,
-        isButton: isButton || false,
+        isButton: false,
         id: "".concat(id, "_dropdowncontent")
       })]
-    }), activeValidationMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.WarningMessage, {
+    }), activeValidationMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ErrorMessage, {
       className: size || '',
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.TechnicalWarning, {
         size: "20px",
-        color: _styles.COLORS.warning_400
+        color: _styles.COLORS.critical_400
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         children: activeValidationMessage
       })]
@@ -327,27 +314,22 @@ var DropdownFilter = function DropdownFilter(_ref) {
 
 DropdownFilter.propTypes = {
   id: _propTypes.default.string.isRequired,
-  list: _propTypes.default.arrayOf(_propTypes.default.shape({
-    label: _propTypes.default.string.isRequired,
-    customContent: _propTypes.default.node
-  })).isRequired,
+  list: _propTypes.default.array.isRequired,
   placeholder: _propTypes.default.string,
+  value: _propTypes.default.string,
   onSelect: _propTypes.default.func,
   onInputChange: _propTypes.default.func,
-  initalValue: _propTypes.default.string,
   required: _propTypes.default.bool,
-  disableSorting: _propTypes.default.bool,
-  messageOnNoResults: _propTypes.default.string,
   disabled: _propTypes.default.bool,
-  locked: _propTypes.default.bool,
-  isButton: _propTypes.default.bool,
+  readOnly: _propTypes.default.bool,
+  loading: _propTypes.default.bool,
+  disableFiltering: _propTypes.default.bool,
+  messageOnNoResults: _propTypes.default.string,
   activeValidationMessage: _propTypes.default.string,
   autofilledMessage: _propTypes.default.string,
-  scrollable: _propTypes.default.bool,
   buttonFontSize: _propTypes.default.string,
-  keepInitialValue: _propTypes.default.bool,
-  icon: _propTypes.default.node,
-  margin: _propTypes.default.string
+  margin: _propTypes.default.string,
+  scrollable: _propTypes.default.bool
 };
 var _default = DropdownFilter;
 exports.default = _default;

package/dist/Dropdown/DropdownFilter.cjs.map

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

package/dist/Dropdown/DropdownFilter.d.ts

@@ -1,30 +1,24 @@
-import * as React from 'react';
+import { DropdownItem } from './DropdownContent';
 import { Size } from '../types';
-export interface DropdownFilterItem {
-    label: string;
-    customContent?: React.ReactNode;
-}
 interface DropdownFilterProps {
     id: string;
-    list: DropdownFilterItem[];
+    list: DropdownItem[];
     placeholder?: string;
+    value?: string;
     onSelect?: (value: string) => void;
     onInputChange?: (input: string) => void;
-    initalValue?: string;
     required?: boolean;
-    disableSorting?: boolean;
-    messageOnNoResults?: string;
     disabled?: boolean;
-    locked?: boolean;
-    isButton?: boolean;
+    readOnly?: boolean;
+    loading?: boolean;
+    disableFiltering?: boolean;
+    messageOnNoResults?: string;
     activeValidationMessage?: string;
     autofilledMessage?: string;
     size?: Size.Small | Size.Medium;
-    scrollable?: boolean;
     buttonFontSize?: string;
-    keepInitialValue?: boolean;
-    icon?: React.ReactNode;
     margin?: string;
+    scrollable?: boolean;
 }
-declare const DropdownFilter: ({ id, list, placeholder, onSelect, onInputChange, initalValue, required, disableSorting, messageOnNoResults, disabled, locked, scrollable, isButton, activeValidationMessage, autofilledMessage, size, buttonFontSize, keepInitialValue, icon, margin, }: DropdownFilterProps) => JSX.Element;
+declare const DropdownFilter: ({ id, list, placeholder, onSelect, onInputChange, value, required, messageOnNoResults, disabled, readOnly, scrollable, activeValidationMessage, autofilledMessage, size, disableFiltering, buttonFontSize, margin, loading }: DropdownFilterProps) => JSX.Element;
 export default DropdownFilter;