@laerdal/life-react-components 3.5.1-dev.12 → 3.5.1-dev.13

package/dist/ChipsInput/ChipDropdownInput.js

@@ -1,230 +1,367 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+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 _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _excluded = ["list", "onInputChange", "disableSorting", "messageOnNoResults", "values", "inputId", "variants", "placeholder", "validationMessage", "onValueChange", "suggestion", "loading", "maxSelectedItems", "multiLine", "size", "icon", "disableFiltering", "disabled", "altPlaceholder", "required"];
+var _templateObject;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * Import React libraries.
- */
-import * as React from 'react';
+ */
+import * as React from 'react';
+
 /**
  * Import third-party libraries.
- */
-import styled from 'styled-components';
+ */
+import styled from 'styled-components';
+
 /**
  * Import custom components.
- */
-import { ChipInputContainer, ChipInputField } from './ChipInputField';
-import { Size, States } from '../types';
-import { DropdownContent } from '../Dropdown';
-import { useClickOutsideRef, useFocusOutsideRef } from '../common';
-import { Z_INDEXES } from '../styles';
-var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: inline-block;\n  width: 100%;\n\n  ", " {\n    position: relative;\n\n    &:focus, &.focus-visible-within {\n      z-index: ", " !important;\n    }\n  }\n"], ["\n  position: relative;\n  display: inline-block;\n  width: 100%;\n\n  ", " {\n    position: relative;\n\n    &:focus, &.focus-visible-within {\n      z-index: ", " !important;\n    }\n  }\n"])), ChipInputContainer, Z_INDEXES.dropdown + 1);
-export var ChipDropdownInput = React.forwardRef(function (_a, ref) {
-    var list = _a.list, onInputChange = _a.onInputChange, disableSorting = _a.disableSorting, messageOnNoResults = _a.messageOnNoResults, values = _a.values, inputId = _a.inputId, variants = _a.variants, placeholder = _a.placeholder, validationMessage = _a.validationMessage, onValueChange = _a.onValueChange, suggestion = _a.suggestion, loading = _a.loading, maxSelectedItems = _a.maxSelectedItems, _b = _a.multiLine, multiLine = _b === void 0 ? true : _b, _c = _a.size, size = _c === void 0 ? Size.Medium : _c, icon = _a.icon, disableFiltering = _a.disableFiltering, disabled = _a.disabled, altPlaceholder = _a.altPlaceholder, required = _a.required, rest = __rest(_a, ["list", "onInputChange", "disableSorting", "messageOnNoResults", "values", "inputId", "variants", "placeholder", "validationMessage", "onValueChange", "suggestion", "loading", "maxSelectedItems", "multiLine", "size", "icon", "disableFiltering", "disabled", "altPlaceholder", "required"]);
-    // Initiate states
-    var _d = React.useState([]), givenList = _d[0], setGivenList = _d[1];
-    var _e = React.useState([]), chips = _e[0], setChips = _e[1];
-    var _f = React.useState(), activeDescendant = _f[0], setActiveDescendant = _f[1];
-    var _g = React.useState(''), value = _g[0], setValue = _g[1];
-    var _h = React.useState(false), restartFilter = _h[0], setRestartFilter = _h[1];
-    var _j = React.useState(), filteredList = _j[0], setFilteredList = _j[1];
-    var _k = React.useState(false), dropdownIsOpen = _k[0], setDropdownIsOpen = _k[1];
-    var _l = React.useState([]), dropdownList = _l[0], setDropdownList = _l[1];
-    var _m = React.useState(''), dropdownValue = _m[0], setDropdownValue = _m[1];
-    var _o = React.useState(null), focused = _o[0], setFocused = _o[1];
-    var containerRef = useClickOutsideRef(function () { return setDropdownIsOpen(false); }, [], useFocusOutsideRef(function () { return setDropdownIsOpen(false); }));
-    var inputRef = React.useRef();
-    React.useImperativeHandle(ref, function () { return inputRef.current; }, [inputRef]);
-    /**
-     * Sets initial values for the chips.
-     */
-    React.useEffect(function () {
-        var list = values.map(function (a) { return chips.find(function (b) { return b.value === a; }) || givenList.find(function (b) { return b.value === a; }) || {
-            label: a,
-            value: a,
-            icon: icon
-        }; })
-            .map(function (a, index) { return (__assign(__assign({}, a), { variant: a.variant || (variants && variants[index]) || States.Default })); })
-            .map(function (a, index) { return (__assign(__assign({}, a), { icon: a.icon || icon })); });
-        setChips(list);
-    }, [values, variants, icon, givenList]);
-    /**
-     * Convert string[] to List[] if necessary
-     */
-    React.useEffect(function () {
-        if (typeof list[0] === 'string') {
-            var newList = list.map(function (e) { return ({ label: e, value: e }); });
-            setGivenList(newList);
-        }
-        else {
-            setGivenList(list);
-        }
-    }, [list]);
-    /**
-     * filter and sort list if remoteOperations is false
-     * */
-    React.useEffect(function () {
-        var options = __spreadArray([], givenList, true);
-        if (!disableFiltering) {
-            if (!restartFilter && value !== '') {
-                options = options.filter(function (option) {
-                    var _a;
-                    return option.label.toUpperCase().indexOf(value.toUpperCase()) !== -1 ||
-                        (option.secondaryLabel && ((_a = option.secondaryLabel) === null || _a === void 0 ? void 0 : _a.toUpperCase().indexOf(value.toUpperCase())) !== -1);
-                });
-            }
-        }
-        if (!disableSorting) {
-            options = options.sort();
-        }
-        suggestion && options.push(suggestion);
-        options = options.filter(function (o) { return !chips.find(function (a) { return a.value === o.value; }); });
-        setFilteredList(options);
-    }, [value, givenList, chips, disableFiltering, disableSorting]);
-    /**
-     * if there is only one active item in dropdown mark it as focused
-     * */
-    React.useEffect(function () {
-        if (dropdownIsOpen && !!value && (dropdownList === null || dropdownList === void 0 ? void 0 : dropdownList.filter(function (a) { return !a.disabled; }).length) === 1) {
-            setDropdownValue(dropdownList.find(function (a) { return !a.disabled; }).value);
-        }
-        else {
-            setDropdownValue('');
-        }
-    }, [dropdownList, dropdownIsOpen, value]);
-    var handleClickOutside = function (e) {
-        var _a;
-        if (!((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
-            if (dropdownIsOpen) {
-                setDropdownIsOpen(false);
-                if (!givenList.find(function (e) { return e.value === value; })) {
-                    setValue('');
-                }
-            }
-        }
-    };
-    /**
-     * register click outside event listener
-     * */
-    React.useEffect(function () {
-        document.addEventListener('click', handleClickOutside);
-        return function () {
-            document.removeEventListener('click', handleClickOutside);
-        };
-    }, []);
-    /**
-     * update dropdown items when filtered list changes
-     * */
-    React.useEffect(function () {
-        var _a;
-        setDropdownList((_a = filteredList === null || filteredList === void 0 ? void 0 : filteredList.map(function (x) {
-            var _a;
-            return ({
-                value: x.value,
-                displayLabel: x.label,
-                noteLabel: x.secondaryLabel,
-                icon: ((_a = x.icon) !== null && _a !== void 0 ? _a : icon),
-                disabled: x.disabled,
-            });
-        })) !== null && _a !== void 0 ? _a : []);
-    }, [filteredList]);
-    var addChip = function (newChip) {
-        var newList = __spreadArray(__spreadArray([], chips, true), [newChip], false);
-        // Let's add the chip
-        setChips(newList);
-        onValueChange(newList.map(function (a) { return a.value; }));
-        setValue('');
-    };
-    var handleInputValueChange = function (value) {
-        setValue(value);
-        setRestartFilter(false);
-        setDropdownIsOpen(true);
-        onInputChange && onInputChange(value);
-    };
-    /**
-     * Add chip from dropdown
-     * */
-    var handleValueUpdate = function (values) {
-        var _a;
-        var item = filteredList === null || filteredList === void 0 ? void 0 : filteredList.find(function (a) { return a.value === values[0]; });
-        item && addChip(item);
-        setRestartFilter(true);
-        (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    };
-    /**
-     * Adds a chip to the chip list.
-     * @param event - Event handler from the key down event.
-     */
-    var handleInputKeyDown = function (event) {
-        // Let's trigger only on enter, comma and space key press
-        if ((event.key === 'Enter' || event.key === ' ') && value) {
-            if ((dropdownList === null || dropdownList === void 0 ? void 0 : dropdownList.filter(function (a) { return !a.disabled; }).length) === 1) {
-                handleValueUpdate([dropdownList.find(function (a) { return !a.disabled; }).value]);
-                event.stopPropagation();
-            }
-        }
-        if ((event.key === 'ArrowDown' || event.key === 'Down' || event.key === 'ArrowUp' || event.key === 'Up') && !!(dropdownList === null || dropdownList === void 0 ? void 0 : dropdownList.length)) {
-            setDropdownIsOpen(true);
-        }
-    };
-    /**
-     * Removes a specific chip from the chip list.
-     * @param index - Index of the chip that needs to be removed.
-     */
-    var handleOnChipRemoved = function (index) {
-        // Let's copy the chips
-        var newChips = __spreadArray([], chips, true);
-        // Let's delete the chip
-        // If necessary, let's replace it with a different chip
-        newChips.splice(index, 1);
-        // Let's update the chip list
-        setChips(__spreadArray([], newChips, true));
-        onValueChange(newChips.map(function (e) { return e.value; }));
-    };
-    return (React.createElement(Wrapper, { ref: containerRef },
-        React.createElement(ChipInputField, __assign({ inputId: inputId, ref: inputRef, items: chips, required: required, inputValue: value, role: "combobox", "aria-activedescendant": activeDescendant, size: size, placeholder: placeholder, altPlaceholder: altPlaceholder, disabled: disabled, multiLine: multiLine, validationMessage: validationMessage, loading: loading, onRemoveItem: function (chip, index) { return handleOnChipRemoved(index); }, onInputValueChange: handleInputValueChange, onInputKeyDown: handleInputKeyDown, onActivationChange: function (value) { return setDropdownIsOpen(value); } }, rest)),
-        React.createElement(DropdownContent, { containerRef: containerRef, customizationProps: {
-                action: function () {
-                },
-                pinTopItem: true,
-                itemsType: 'normal',
-                scrollable: true,
-                actionLabel: '',
-                multiSelect: false,
-                onValueUpdate: handleValueUpdate,
-                items: dropdownList,
-            }, ariaRolesType: "input", focused: focused, setFocused: setFocused, onActiveDescendantChanged: function (e) { return setActiveDescendant(e); }, selectedValues: [dropdownValue], messageOnNoResults: messageOnNoResults !== null && messageOnNoResults !== void 0 ? messageOnNoResults : '', setSelectedValues: function () {
-            }, isOpen: (!maxSelectedItems || (!!maxSelectedItems && chips.length < maxSelectedItems)) && dropdownIsOpen, setIsOpen: setDropdownIsOpen, filter: '', isButton: false, id: "".concat(inputId, "_dropdowncontent") })));
-});
-var templateObject_1;
+ */
+import { ChipInputContainer, ChipInputField } from './ChipInputField';
+import { Size, States } from '../types';
+import { DropdownContent } from '../Dropdown';
+import { useClickOutsideRef, useFocusOutsideRef } from '../common';
+import { Z_INDEXES } from '../styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  display: inline-block;\n  width: 100%;\n\n  ", " {\n    position: relative;\n\n    &:focus, &.focus-visible-within {\n      z-index: ", " !important;\n    }\n  }\n"])), ChipInputContainer, Z_INDEXES.dropdown + 1);
+export var ChipDropdownInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var list = _ref.list,
+    onInputChange = _ref.onInputChange,
+    disableSorting = _ref.disableSorting,
+    messageOnNoResults = _ref.messageOnNoResults,
+    values = _ref.values,
+    inputId = _ref.inputId,
+    variants = _ref.variants,
+    placeholder = _ref.placeholder,
+    validationMessage = _ref.validationMessage,
+    onValueChange = _ref.onValueChange,
+    suggestion = _ref.suggestion,
+    loading = _ref.loading,
+    maxSelectedItems = _ref.maxSelectedItems,
+    _ref$multiLine = _ref.multiLine,
+    multiLine = _ref$multiLine === void 0 ? true : _ref$multiLine,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? Size.Medium : _ref$size,
+    icon = _ref.icon,
+    disableFiltering = _ref.disableFiltering,
+    disabled = _ref.disabled,
+    altPlaceholder = _ref.altPlaceholder,
+    required = _ref.required,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  // Initiate states
+  var _React$useState = React.useState([]),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    givenList = _React$useState2[0],
+    setGivenList = _React$useState2[1];
+  var _React$useState3 = React.useState([]),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    chips = _React$useState4[0],
+    setChips = _React$useState4[1];
+  var _React$useState5 = React.useState(),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    activeDescendant = _React$useState6[0],
+    setActiveDescendant = _React$useState6[1];
+  var _React$useState7 = React.useState(''),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    value = _React$useState8[0],
+    setValue = _React$useState8[1];
+  var _React$useState9 = React.useState(false),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    restartFilter = _React$useState10[0],
+    setRestartFilter = _React$useState10[1];
+  var _React$useState11 = React.useState(),
+    _React$useState12 = _slicedToArray(_React$useState11, 2),
+    filteredList = _React$useState12[0],
+    setFilteredList = _React$useState12[1];
+  var _React$useState13 = React.useState(false),
+    _React$useState14 = _slicedToArray(_React$useState13, 2),
+    dropdownIsOpen = _React$useState14[0],
+    setDropdownIsOpen = _React$useState14[1];
+  var _React$useState15 = React.useState([]),
+    _React$useState16 = _slicedToArray(_React$useState15, 2),
+    dropdownList = _React$useState16[0],
+    setDropdownList = _React$useState16[1];
+  var _React$useState17 = React.useState(''),
+    _React$useState18 = _slicedToArray(_React$useState17, 2),
+    dropdownValue = _React$useState18[0],
+    setDropdownValue = _React$useState18[1];
+  var _React$useState19 = React.useState(null),
+    _React$useState20 = _slicedToArray(_React$useState19, 2),
+    focused = _React$useState20[0],
+    setFocused = _React$useState20[1];
+  var containerRef = useClickOutsideRef(function () {
+    return setDropdownIsOpen(false);
+  }, [], useFocusOutsideRef(function () {
+    return setDropdownIsOpen(false);
+  }));
+  var inputRef = React.useRef();
+  React.useImperativeHandle(ref, function () {
+    return inputRef.current;
+  }, [inputRef]);
+
+  /**
+   * Sets initial values for the chips.
+   */
+  React.useEffect(function () {
+    var list = values.map(function (a) {
+      return chips.find(function (b) {
+        return b.value === a;
+      }) || givenList.find(function (b) {
+        return b.value === a;
+      }) || {
+        label: a,
+        value: a,
+        icon: icon
+      };
+    }).map(function (a, index) {
+      return _objectSpread(_objectSpread({}, a), {}, {
+        variant: a.variant || variants && variants[index] || States.Default
+      });
+    }).map(function (a, index) {
+      return _objectSpread(_objectSpread({}, a), {}, {
+        icon: a.icon || icon
+      });
+    });
+    setChips(list);
+  }, [values, variants, icon, givenList]);
+
+  /**
+   * Convert string[] to List[] if necessary
+   */
+  React.useEffect(function () {
+    if (typeof list[0] === 'string') {
+      var newList = list.map(function (e) {
+        return {
+          label: e,
+          value: e
+        };
+      });
+      setGivenList(newList);
+    } else {
+      setGivenList(list);
+    }
+  }, [list]);
+
+  /**
+   * filter and sort list if remoteOperations is false
+   * */
+  React.useEffect(function () {
+    var options = _toConsumableArray(givenList);
+    if (!disableFiltering) {
+      if (!restartFilter && value !== '') {
+        options = options.filter(function (option) {
+          var _option$secondaryLabe;
+          return option.label.toUpperCase().indexOf(value.toUpperCase()) !== -1 || option.secondaryLabel && ((_option$secondaryLabe = option.secondaryLabel) === null || _option$secondaryLabe === void 0 ? void 0 : _option$secondaryLabe.toUpperCase().indexOf(value.toUpperCase())) !== -1;
+        });
+      }
+    }
+    if (!disableSorting) {
+      options = options.sort();
+    }
+    suggestion && options.push(suggestion);
+    options = options.filter(function (o) {
+      return !chips.find(function (a) {
+        return a.value === o.value;
+      });
+    });
+    setFilteredList(options);
+  }, [value, givenList, chips, disableFiltering, disableSorting]);
+
+  /**
+   * if there is only one active item in dropdown mark it as focused
+   * */
+  React.useEffect(function () {
+    if (dropdownIsOpen && !!value && (dropdownList === null || dropdownList === void 0 ? void 0 : dropdownList.filter(function (a) {
+      return !a.disabled;
+    }).length) === 1) {
+      setDropdownValue(dropdownList.find(function (a) {
+        return !a.disabled;
+      }).value);
+    } else {
+      setDropdownValue('');
+    }
+  }, [dropdownList, dropdownIsOpen, value]);
+  var handleClickOutside = function handleClickOutside(e) {
+    var _containerRef$current;
+    if (!((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(e.target))) {
+      if (dropdownIsOpen) {
+        setDropdownIsOpen(false);
+        if (!givenList.find(function (e) {
+          return e.value === value;
+        })) {
+          setValue('');
+        }
+      }
+    }
+  };
+
+  /**
+   * register click outside event listener
+   * */
+  React.useEffect(function () {
+    document.addEventListener('click', handleClickOutside);
+    return function () {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, []);
+
+  /**
+   * update dropdown items when filtered list changes
+   * */
+  React.useEffect(function () {
+    var _filteredList$map;
+    setDropdownList((_filteredList$map = filteredList === null || filteredList === void 0 ? void 0 : filteredList.map(function (x) {
+      var _x$icon;
+      return {
+        value: x.value,
+        displayLabel: x.label,
+        noteLabel: x.secondaryLabel,
+        icon: (_x$icon = x.icon) !== null && _x$icon !== void 0 ? _x$icon : icon,
+        disabled: x.disabled
+      };
+    })) !== null && _filteredList$map !== void 0 ? _filteredList$map : []);
+  }, [filteredList]);
+  var addChip = function addChip(newChip) {
+    var newList = [].concat(_toConsumableArray(chips), [newChip]);
+    // Let's add the chip
+    setChips(newList);
+    onValueChange(newList.map(function (a) {
+      return a.value;
+    }));
+    setValue('');
+  };
+  var handleInputValueChange = function handleInputValueChange(value) {
+    setValue(value);
+    setRestartFilter(false);
+    setDropdownIsOpen(true);
+    onInputChange && onInputChange(value);
+  };
+
+  /**
+   * Add chip from dropdown
+   * */
+  var handleValueUpdate = function handleValueUpdate(values) {
+    var _inputRef$current;
+    var item = filteredList === null || filteredList === void 0 ? void 0 : filteredList.find(function (a) {
+      return a.value === values[0];
+    });
+    item && addChip(item);
+    setRestartFilter(true);
+    inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+  };
+
+  /**
+   * Adds a chip to the chip list.
+   * @param event - Event handler from the key down event.
+   */
+  var handleInputKeyDown = function handleInputKeyDown(event) {
+    // Let's trigger only on enter, comma and space key press
+    if ((event.key === 'Enter' || event.key === ' ') && value) {
+      if ((dropdownList === null || dropdownList === void 0 ? void 0 : dropdownList.filter(function (a) {
+        return !a.disabled;
+      }).length) === 1) {
+        handleValueUpdate([dropdownList.find(function (a) {
+          return !a.disabled;
+        }).value]);
+        event.stopPropagation();
+      }
+    }
+    if ((event.key === 'ArrowDown' || event.key === 'Down' || event.key === 'ArrowUp' || event.key === 'Up') && !!(dropdownList !== null && dropdownList !== void 0 && dropdownList.length)) {
+      setDropdownIsOpen(true);
+    }
+  };
+
+  /**
+   * Removes a specific chip from the chip list.
+   * @param index - Index of the chip that needs to be removed.
+   */
+  var handleOnChipRemoved = function handleOnChipRemoved(index) {
+    // Let's copy the chips
+    var newChips = _toConsumableArray(chips);
+
+    // Let's delete the chip
+    // If necessary, let's replace it with a different chip
+    newChips.splice(index, 1);
+
+    // Let's update the chip list
+    setChips(_toConsumableArray(newChips));
+    onValueChange(newChips.map(function (e) {
+      return e.value;
+    }));
+  };
+  return /*#__PURE__*/_jsxs(Wrapper, {
+    ref: containerRef,
+    children: [/*#__PURE__*/_jsx(ChipInputField, _objectSpread({
+      inputId: inputId,
+      ref: inputRef,
+      items: chips,
+      required: required,
+      inputValue: value,
+      role: "combobox",
+      "aria-activedescendant": activeDescendant,
+      size: size,
+      placeholder: placeholder,
+      altPlaceholder: altPlaceholder,
+      disabled: disabled,
+      multiLine: multiLine,
+      validationMessage: validationMessage,
+      loading: loading,
+      onRemoveItem: function onRemoveItem(chip, index) {
+        return handleOnChipRemoved(index);
+      },
+      onInputValueChange: handleInputValueChange,
+      onInputKeyDown: handleInputKeyDown,
+      onActivationChange: function onActivationChange(value) {
+        return setDropdownIsOpen(value);
+      }
+    }, rest)), /*#__PURE__*/_jsx(DropdownContent, {
+      containerRef: containerRef,
+      customizationProps: {
+        action: function action() {},
+        pinTopItem: true,
+        itemsType: 'normal',
+        scrollable: true,
+        actionLabel: '',
+        multiSelect: false,
+        onValueUpdate: handleValueUpdate,
+        items: dropdownList
+      },
+      ariaRolesType: "input",
+      focused: focused,
+      setFocused: setFocused,
+      onActiveDescendantChanged: function onActiveDescendantChanged(e) {
+        return setActiveDescendant(e);
+      },
+      selectedValues: [dropdownValue],
+      messageOnNoResults: messageOnNoResults !== null && messageOnNoResults !== void 0 ? messageOnNoResults : '',
+      setSelectedValues: function setSelectedValues() {},
+      isOpen: (!maxSelectedItems || !!maxSelectedItems && chips.length < maxSelectedItems) && dropdownIsOpen,
+      setIsOpen: setDropdownIsOpen,
+      filter: '',
+      isButton: false,
+      id: "".concat(inputId, "_dropdowncontent")
+    })]
+  });
+});
+ChipDropdownInput.propTypes = {
+  list: _pt.oneOfType([_pt.arrayOf(_pt.shape({
+    secondaryLabel: _pt.string,
+    value: _pt.string.isRequired
+  })), _pt.arrayOf(_pt.string)]).isRequired,
+  onInputChange: _pt.func,
+  messageOnNoResults: _pt.string,
+  suggestion: _pt.shape({
+    secondaryLabel: _pt.string,
+    value: _pt.string.isRequired
+  }),
+  loading: _pt.bool,
+  maxSelectedItems: _pt.number,
+  disableSorting: _pt.bool,
+  disableFiltering: _pt.bool
+};
+//# sourceMappingURL=ChipDropdownInput.js.map