@laerdal/life-react-components 2.0.1-dev.9.full → 2.1.0-dev.7

package/dist/ChipsInput/ChipDropdownInput.js

@@ -5,26 +5,22 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 /**
  * Import React libraries.
  */
 import * as React from 'react';
+
 /**
  * Import third-party libraries.
  */
-
 import styled from 'styled-components';
+
 /**
  * Import custom components.
  */
-
 import { ChipInputContainer, ChipInputField } from './ChipInputField';
 import { Size, States } from '../types';
 import { DropdownContent } from '../Dropdown';
@@ -36,80 +32,69 @@ 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);
-
+    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];
-
+    _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];
-
+    _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];
-
+    _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];
-
+    _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];
-
+    _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];
-
+    _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];
-
+    _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];
-
+    _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];
-
+    _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];
-
+    _React$useState20 = _slicedToArray(_React$useState19, 2),
+    focused = _React$useState20[0],
+    setFocused = _React$useState20[1];
   var containerRef = useClickOutsideRef(function () {
     return setDropdownIsOpen(false);
   }, [], useFocusOutsideRef(function () {
@@ -119,10 +104,10 @@ export var ChipDropdownInput = /*#__PURE__*/React.forwardRef(function (_ref, ref
   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) {
@@ -145,10 +130,10 @@ export var ChipDropdownInput = /*#__PURE__*/React.forwardRef(function (_ref, ref
     });
     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) {
@@ -162,27 +147,23 @@ export var ChipDropdownInput = /*#__PURE__*/React.forwardRef(function (_ref, ref
       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) {
@@ -191,10 +172,10 @@ export var ChipDropdownInput = /*#__PURE__*/React.forwardRef(function (_ref, ref
     });
     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;
@@ -206,14 +187,11 @@ export var ChipDropdownInput = /*#__PURE__*/React.forwardRef(function (_ref, ref
       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;
         })) {
@@ -222,27 +200,24 @@ export var ChipDropdownInput = /*#__PURE__*/React.forwardRef(function (_ref, ref
       }
     }
   };
+
   /**
    * 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,
@@ -252,31 +227,27 @@ export var ChipDropdownInput = /*#__PURE__*/React.forwardRef(function (_ref, ref
       };
     })) !== null && _filteredList$map !== void 0 ? _filteredList$map : []);
   }, [filteredList]);
-
   var addChip = function addChip(newChip) {
-    var newList = [].concat(_toConsumableArray(chips), [newChip]); // Let's add the chip
-
+    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];
     });
@@ -284,12 +255,11 @@ export var ChipDropdownInput = /*#__PURE__*/React.forwardRef(function (_ref, ref
     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) {
@@ -302,31 +272,29 @@ export var ChipDropdownInput = /*#__PURE__*/React.forwardRef(function (_ref, ref
         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
+    var newChips = _toConsumableArray(chips);
 
+    // Let's delete the chip
+    // If necessary, let's replace it with a different chip
+    newChips.splice(index, 1);
 
-    newChips.splice(index, 1); // Let's update the chip list
-
+    // 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({

package/dist/ChipsInput/ChipDropdownInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipDropdownInput.js","names":["React","styled","ChipInputContainer","ChipInputField","Size","States","DropdownContent","SystemIcons","useClickOutsideRef","useFocusOutsideRef","Z_INDEXES","Wrapper","div","dropdown","ChipDropdownInput","forwardRef","ref","list","onInputChange","disableSorting","messageOnNoResults","values","inputId","variants","placeholder","validationMessage","onValueChange","suggestion","loading","maxSelectedItems","multiLine","size","Medium","icon","disableFiltering","disabled","altPlaceholder","required","rest","useState","givenList","setGivenList","chips","setChips","activeDescendant","setActiveDescendant","value","setValue","restartFilter","setRestartFilter","filteredList","setFilteredList","dropdownIsOpen","setDropdownIsOpen","dropdownList","setDropdownList","dropdownValue","setDropdownValue","focused","setFocused","containerRef","inputRef","useRef","useImperativeHandle","current","useEffect","map","a","find","b","label","index","variant","Default","newList","e","options","filter","option","toUpperCase","indexOf","secondaryLabel","sort","push","o","length","handleClickOutside","contains","target","document","addEventListener","removeEventListener","x","displayLabel","noteLabel","addChip","newChip","handleInputValueChange","handleValueUpdate","item","focus","handleInputKeyDown","event","key","stopPropagation","handleOnChipRemoved","newChips","splice","chip","action","pinTopItem","itemsType","scrollable","actionLabel","multiSelect","onValueUpdate","items"],"sources":["../../src/ChipsInput/ChipDropdownInput.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom components.\n */\nimport {ChipInputContainer, ChipInputField} from './ChipInputField';\nimport {Size, States} from '../types';\nimport {DropdownContent, DropdownItem} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {ChipInputProps, ChipItem} from './ChipInputTypes';\nimport {useClickOutsideRef, useFocusOutsideRef} from '../common';\nimport {Z_INDEXES} from '../styles';\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n  width: 100%;\n\n  ${ChipInputContainer} {\n    position: relative;\n\n    &:focus, &.focus-visible-within {\n      z-index: ${Z_INDEXES.dropdown + 1} !important;\n    }\n  }\n`;\n\n\ninterface ListItem extends ChipItem {\n  secondaryLabel?: string;\n  value: string;\n}\n\ninterface ChipDropdownInputProps extends ChipInputProps {\n  list: ListItem[] | string[];\n  onInputChange?: (input: string) => void;\n  messageOnNoResults?: string;\n  suggestion?: ListItem;\n  loading?: boolean;\n  maxSelectedItems?: number;\n  disableSorting?: boolean;\n  disableFiltering?: boolean;\n}\n\nexport const ChipDropdownInput = React.forwardRef<HTMLInputElement | undefined, ChipDropdownInputProps>(({\n                                                                                               list,\n                                                                                               onInputChange,\n                                                                                               disableSorting,\n                                                                                               messageOnNoResults,\n                                                                                               values,\n                                                                                               inputId,\n                                                                                               variants,\n                                                                                               placeholder,\n                                                                                               validationMessage,\n                                                                                               onValueChange,\n                                                                                               suggestion,\n                                                                                               loading,\n                                                                                               maxSelectedItems,\n                                                                                               multiLine = true,\n                                                                                               size = Size.Medium,\n                                                                                               icon,\n                                                                                               disableFiltering,\n                                                                                               disabled,\n                                                                                               altPlaceholder,\n                                                                                               required,\n                                                                                               ...rest\n                                                                                             }: ChipDropdownInputProps, ref) => {\n  // Initiate states\n  const [givenList, setGivenList] = React.useState<ListItem[]>([]);\n  const [chips, setChips] = React.useState<ListItem[]>([]);\n\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [value, setValue] = React.useState<string>('');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [filteredList, setFilteredList] = React.useState<ListItem[]>();\n\n  const [dropdownIsOpen, setDropdownIsOpen] = React.useState<boolean>(false);\n  const [dropdownList, setDropdownList] = React.useState<DropdownItem[]>([]);\n  const [dropdownValue, setDropdownValue] = React.useState<string>('');\n\n  const [focused, setFocused] = React.useState<number | null>(null);\n\n  const containerRef = useClickOutsideRef(() => setDropdownIsOpen(false), [], useFocusOutsideRef(() => setDropdownIsOpen(false)));\n  const inputRef = React.useRef<any>();\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n\n  /**\n   * Sets initial values for the chips.\n   */\n  React.useEffect(() => {\n\n    const list =\n      values.map((a) => chips.find(b => b.value === a) || givenList.find(b => b.value === a) || {\n        label: a,\n        value: a,\n        icon: icon\n      })\n        .map((a, index) => ({...a, variant: a.variant || (variants && variants[index]) || States.Default}))\n        .map((a, index) => ({...a, icon: a.icon || icon}));\n\n    setChips(list);\n  }, [values, variants, icon, givenList]);\n\n  /**\n   * Convert string[] to List[] if necessary\n   */\n  React.useEffect(() => {\n    if (typeof list[0] === 'string') {\n      const newList: ListItem[] = (list as string[]).map((e: string) => ({label: e, value: e}));\n      setGivenList(newList);\n    } else {\n      setGivenList(list as ListItem[]);\n    }\n  }, [list]);\n\n  /**\n   * filter and sort list if remoteOperations is false\n   * */\n  React.useEffect(() => {\n    let options = [...givenList];\n    if (!disableFiltering) {\n      if (!restartFilter && value !== '') {\n        options = options.filter((option) => option.label.toUpperCase().indexOf(value.toUpperCase()) !== -1 ||\n          (option.secondaryLabel && option.secondaryLabel?.toUpperCase().indexOf(value.toUpperCase()) !== -1));\n      }\n    }\n\n    if (!disableSorting) {\n      options = options.sort();\n    }\n\n    suggestion && options.push(suggestion);\n\n    options = options.filter((o) => !chips.find(a => a.value === o.value));\n    setFilteredList(options);\n  }, [value, givenList, chips, disableFiltering, disableSorting]);\n\n  /**\n   * if there is only one active item in dropdown mark it as focused\n   * */\n  React.useEffect(() => {\n    if (dropdownIsOpen && !!value && dropdownList?.filter(a => !a.disabled).length === 1) {\n      setDropdownValue(dropdownList.find(a => !a.disabled)!.value);\n    } else {\n      setDropdownValue('');\n    }\n  }, [dropdownList, dropdownIsOpen, value]);\n\n  const handleClickOutside = (e: any) => {\n    if (!containerRef.current?.contains(e.target)) {\n      if (dropdownIsOpen) {\n        setDropdownIsOpen(false);\n        if (!givenList.find((e) => e.value === value)) {\n          setValue('');\n        }\n      }\n    }\n  };\n\n  /**\n   * register click outside event listener\n   * */\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  }, []);\n\n  /**\n   * update dropdown items when filtered list changes\n   * */\n  React.useEffect(() => {\n    setDropdownList(filteredList?.map(x => ({\n      value: x.value,\n      displayLabel: x.label,\n      noteLabel: x.secondaryLabel,\n      icon: (x.icon ?? icon) && SystemIcons[(x.icon || icon)!]({}),\n      disabled: x.disabled,\n    })) ?? []);\n  }, [filteredList]);\n\n  const addChip = (newChip: ListItem) => {\n    const newList = [...chips, newChip];\n    // Let's add the chip\n    setChips(newList);\n    onValueChange(newList.map(a => a.value));\n\n    setValue('');\n  };\n\n  const handleInputValueChange = (value: string) => {\n    setValue(value);\n    setRestartFilter(false);\n    setDropdownIsOpen(true);\n    onInputChange && onInputChange(value);\n  }\n\n  /**\n   * Add chip from dropdown\n   * */\n  const handleValueUpdate = (values: string[]) => {\n    const item = filteredList?.find(a => a.value === values[0]);\n    item && addChip(item);\n    setRestartFilter(true);\n    inputRef?.current?.focus();\n  }\n\n  /**\n   * Adds a chip to the chip list.\n   * @param event - Event handler from the key down event.\n   */\n  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n    // Let's trigger only on enter, comma and space key press\n    if ((event.key === 'Enter' || event.key === ' ') && value) {\n      if (dropdownList?.filter(a => !a.disabled).length === 1) {\n        handleValueUpdate([dropdownList!.find(a => !a.disabled)!.value]);\n        event.stopPropagation();\n      }\n    }\n\n    if ((event.key === 'ArrowDown' || event.key === 'Down' || event.key === 'ArrowUp' || event.key === 'Up') && !!dropdownList?.length) {\n      setDropdownIsOpen(true);\n    }\n  };\n\n  /**\n   * Removes a specific chip from the chip list.\n   * @param index - Index of the chip that needs to be removed.\n   */\n  const handleOnChipRemoved = (index: number): void => {\n    // Let's copy the chips\n    const newChips = [...chips];\n\n    // Let's delete the chip\n    // If necessary, let's replace it with a different chip\n    newChips.splice(index, 1);\n\n    // Let's update the chip list\n    setChips([...newChips]);\n    onValueChange(newChips.map((e) => e.value));\n  };\n\n  return (\n    <Wrapper ref={containerRef}>\n      <ChipInputField inputId={inputId}\n                      ref={inputRef}\n                      items={chips}\n                      required={required}\n                      inputValue={value}\n                      role=\"combobox\"\n                      aria-activedescendant={activeDescendant}\n                      size={size}\n                      placeholder={placeholder}\n                      altPlaceholder={altPlaceholder}\n                      disabled={disabled}\n                      multiLine={multiLine}\n                      validationMessage={validationMessage}\n                      loading={loading}\n                      onRemoveItem={(chip, index) => handleOnChipRemoved(index)}\n                      onInputValueChange={handleInputValueChange}\n                      onInputKeyDown={handleInputKeyDown}\n                      onActivationChange={(value) => setDropdownIsOpen(value)}\n                      {...rest}/>\n      <DropdownContent\n        containerRef={containerRef}\n        customizationProps={{\n          action: () => {\n          },\n          pinTopItem: true,\n\n          itemsType: 'normal',\n          scrollable: true,\n          actionLabel: '',\n          multiSelect: false,\n          onValueUpdate: handleValueUpdate,\n          items: dropdownList,\n        }}\n        ariaRolesType=\"input\"\n        focused={focused}\n        setFocused={setFocused}\n        onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n        selectedValues={[dropdownValue]}\n        messageOnNoResults={messageOnNoResults ?? ''}\n        setSelectedValues={() => {\n        }}\n        isOpen={(!maxSelectedItems || (!!maxSelectedItems && chips.length < maxSelectedItems)) && dropdownIsOpen}\n        setIsOpen={setDropdownIsOpen}\n        filter={''}\n        isButton={false}\n        id={`${inputId}_dropdowncontent`}/>\n\n    </Wrapper>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"ChipDropdownInput.js","names":["React","styled","ChipInputContainer","ChipInputField","Size","States","DropdownContent","SystemIcons","useClickOutsideRef","useFocusOutsideRef","Z_INDEXES","Wrapper","div","dropdown","ChipDropdownInput","forwardRef","ref","list","onInputChange","disableSorting","messageOnNoResults","values","inputId","variants","placeholder","validationMessage","onValueChange","suggestion","loading","maxSelectedItems","multiLine","size","Medium","icon","disableFiltering","disabled","altPlaceholder","required","rest","useState","givenList","setGivenList","chips","setChips","activeDescendant","setActiveDescendant","value","setValue","restartFilter","setRestartFilter","filteredList","setFilteredList","dropdownIsOpen","setDropdownIsOpen","dropdownList","setDropdownList","dropdownValue","setDropdownValue","focused","setFocused","containerRef","inputRef","useRef","useImperativeHandle","current","useEffect","map","a","find","b","label","index","variant","Default","newList","e","options","filter","option","toUpperCase","indexOf","secondaryLabel","sort","push","o","length","handleClickOutside","contains","target","document","addEventListener","removeEventListener","x","displayLabel","noteLabel","addChip","newChip","handleInputValueChange","handleValueUpdate","item","focus","handleInputKeyDown","event","key","stopPropagation","handleOnChipRemoved","newChips","splice","chip","action","pinTopItem","itemsType","scrollable","actionLabel","multiSelect","onValueUpdate","items"],"sources":["../../src/ChipsInput/ChipDropdownInput.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom components.\n */\nimport {ChipInputContainer, ChipInputField} from './ChipInputField';\nimport {Size, States} from '../types';\nimport {DropdownContent, DropdownItem} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {ChipInputProps, ChipItem} from './ChipInputTypes';\nimport {useClickOutsideRef, useFocusOutsideRef} from '../common';\nimport {Z_INDEXES} from '../styles';\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n  width: 100%;\n\n  ${ChipInputContainer} {\n    position: relative;\n\n    &:focus, &.focus-visible-within {\n      z-index: ${Z_INDEXES.dropdown + 1} !important;\n    }\n  }\n`;\n\n\ninterface ListItem extends ChipItem {\n  secondaryLabel?: string;\n  value: string;\n}\n\ninterface ChipDropdownInputProps extends Omit<ChipInputProps, 'autoSave'> {\n  list: ListItem[] | string[];\n  onInputChange?: (input: string) => void;\n  messageOnNoResults?: string;\n  suggestion?: ListItem;\n  loading?: boolean;\n  maxSelectedItems?: number;\n  disableSorting?: boolean;\n  disableFiltering?: boolean;\n}\n\nexport const ChipDropdownInput = React.forwardRef<HTMLInputElement | undefined, ChipDropdownInputProps>(({\n                                                                                               list,\n                                                                                               onInputChange,\n                                                                                               disableSorting,\n                                                                                               messageOnNoResults,\n                                                                                               values,\n                                                                                               inputId,\n                                                                                               variants,\n                                                                                               placeholder,\n                                                                                               validationMessage,\n                                                                                               onValueChange,\n                                                                                               suggestion,\n                                                                                               loading,\n                                                                                               maxSelectedItems,\n                                                                                               multiLine = true,\n                                                                                               size = Size.Medium,\n                                                                                               icon,\n                                                                                               disableFiltering,\n                                                                                               disabled,\n                                                                                               altPlaceholder,\n                                                                                               required,\n                                                                                               ...rest\n                                                                                             }: ChipDropdownInputProps, ref) => {\n  // Initiate states\n  const [givenList, setGivenList] = React.useState<ListItem[]>([]);\n  const [chips, setChips] = React.useState<ListItem[]>([]);\n\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [value, setValue] = React.useState<string>('');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [filteredList, setFilteredList] = React.useState<ListItem[]>();\n\n  const [dropdownIsOpen, setDropdownIsOpen] = React.useState<boolean>(false);\n  const [dropdownList, setDropdownList] = React.useState<DropdownItem[]>([]);\n  const [dropdownValue, setDropdownValue] = React.useState<string>('');\n\n  const [focused, setFocused] = React.useState<number | null>(null);\n\n  const containerRef = useClickOutsideRef(() => setDropdownIsOpen(false), [], useFocusOutsideRef(() => setDropdownIsOpen(false)));\n  const inputRef = React.useRef<any>();\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n\n  /**\n   * Sets initial values for the chips.\n   */\n  React.useEffect(() => {\n\n    const list =\n      values.map((a) => chips.find(b => b.value === a) || givenList.find(b => b.value === a) || {\n        label: a,\n        value: a,\n        icon: icon\n      })\n        .map((a, index) => ({...a, variant: a.variant || (variants && variants[index]) || States.Default}))\n        .map((a, index) => ({...a, icon: a.icon || icon}));\n\n    setChips(list);\n  }, [values, variants, icon, givenList]);\n\n  /**\n   * Convert string[] to List[] if necessary\n   */\n  React.useEffect(() => {\n    if (typeof list[0] === 'string') {\n      const newList: ListItem[] = (list as string[]).map((e: string) => ({label: e, value: e}));\n      setGivenList(newList);\n    } else {\n      setGivenList(list as ListItem[]);\n    }\n  }, [list]);\n\n  /**\n   * filter and sort list if remoteOperations is false\n   * */\n  React.useEffect(() => {\n    let options = [...givenList];\n    if (!disableFiltering) {\n      if (!restartFilter && value !== '') {\n        options = options.filter((option) => option.label.toUpperCase().indexOf(value.toUpperCase()) !== -1 ||\n          (option.secondaryLabel && option.secondaryLabel?.toUpperCase().indexOf(value.toUpperCase()) !== -1));\n      }\n    }\n\n    if (!disableSorting) {\n      options = options.sort();\n    }\n\n    suggestion && options.push(suggestion);\n\n    options = options.filter((o) => !chips.find(a => a.value === o.value));\n    setFilteredList(options);\n  }, [value, givenList, chips, disableFiltering, disableSorting]);\n\n  /**\n   * if there is only one active item in dropdown mark it as focused\n   * */\n  React.useEffect(() => {\n    if (dropdownIsOpen && !!value && dropdownList?.filter(a => !a.disabled).length === 1) {\n      setDropdownValue(dropdownList.find(a => !a.disabled)!.value);\n    } else {\n      setDropdownValue('');\n    }\n  }, [dropdownList, dropdownIsOpen, value]);\n\n  const handleClickOutside = (e: any) => {\n    if (!containerRef.current?.contains(e.target)) {\n      if (dropdownIsOpen) {\n        setDropdownIsOpen(false);\n        if (!givenList.find((e) => e.value === value)) {\n          setValue('');\n        }\n      }\n    }\n  };\n\n  /**\n   * register click outside event listener\n   * */\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  }, []);\n\n  /**\n   * update dropdown items when filtered list changes\n   * */\n  React.useEffect(() => {\n    setDropdownList(filteredList?.map(x => ({\n      value: x.value,\n      displayLabel: x.label,\n      noteLabel: x.secondaryLabel,\n      icon: (x.icon ?? icon) && SystemIcons[(x.icon || icon)!]({}),\n      disabled: x.disabled,\n    })) ?? []);\n  }, [filteredList]);\n\n  const addChip = (newChip: ListItem) => {\n    const newList = [...chips, newChip];\n    // Let's add the chip\n    setChips(newList);\n    onValueChange(newList.map(a => a.value));\n\n    setValue('');\n  };\n\n  const handleInputValueChange = (value: string) => {\n    setValue(value);\n    setRestartFilter(false);\n    setDropdownIsOpen(true);\n    onInputChange && onInputChange(value);\n  }\n\n  /**\n   * Add chip from dropdown\n   * */\n  const handleValueUpdate = (values: string[]) => {\n    const item = filteredList?.find(a => a.value === values[0]);\n    item && addChip(item);\n    setRestartFilter(true);\n    inputRef?.current?.focus();\n  }\n\n  /**\n   * Adds a chip to the chip list.\n   * @param event - Event handler from the key down event.\n   */\n  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n    // Let's trigger only on enter, comma and space key press\n    if ((event.key === 'Enter' || event.key === ' ') && value) {\n      if (dropdownList?.filter(a => !a.disabled).length === 1) {\n        handleValueUpdate([dropdownList!.find(a => !a.disabled)!.value]);\n        event.stopPropagation();\n      }\n    }\n\n    if ((event.key === 'ArrowDown' || event.key === 'Down' || event.key === 'ArrowUp' || event.key === 'Up') && !!dropdownList?.length) {\n      setDropdownIsOpen(true);\n    }\n  };\n\n  /**\n   * Removes a specific chip from the chip list.\n   * @param index - Index of the chip that needs to be removed.\n   */\n  const handleOnChipRemoved = (index: number): void => {\n    // Let's copy the chips\n    const newChips = [...chips];\n\n    // Let's delete the chip\n    // If necessary, let's replace it with a different chip\n    newChips.splice(index, 1);\n\n    // Let's update the chip list\n    setChips([...newChips]);\n    onValueChange(newChips.map((e) => e.value));\n  };\n\n  return (\n    <Wrapper ref={containerRef}>\n      <ChipInputField inputId={inputId}\n                      ref={inputRef}\n                      items={chips}\n                      required={required}\n                      inputValue={value}\n                      role=\"combobox\"\n                      aria-activedescendant={activeDescendant}\n                      size={size}\n                      placeholder={placeholder}\n                      altPlaceholder={altPlaceholder}\n                      disabled={disabled}\n                      multiLine={multiLine}\n                      validationMessage={validationMessage}\n                      loading={loading}\n                      onRemoveItem={(chip, index) => handleOnChipRemoved(index)}\n                      onInputValueChange={handleInputValueChange}\n                      onInputKeyDown={handleInputKeyDown}\n                      onActivationChange={(value) => setDropdownIsOpen(value)}\n                      {...rest}/>\n      <DropdownContent\n        containerRef={containerRef}\n        customizationProps={{\n          action: () => {\n          },\n          pinTopItem: true,\n\n          itemsType: 'normal',\n          scrollable: true,\n          actionLabel: '',\n          multiSelect: false,\n          onValueUpdate: handleValueUpdate,\n          items: dropdownList,\n        }}\n        ariaRolesType=\"input\"\n        focused={focused}\n        setFocused={setFocused}\n        onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n        selectedValues={[dropdownValue]}\n        messageOnNoResults={messageOnNoResults ?? ''}\n        setSelectedValues={() => {\n        }}\n        isOpen={(!maxSelectedItems || (!!maxSelectedItems && chips.length < maxSelectedItems)) && dropdownIsOpen}\n        setIsOpen={setDropdownIsOpen}\n        filter={''}\n        isButton={false}\n        id={`${inputId}_dropdowncontent`}/>\n\n    </Wrapper>\n  );\n});\n"],"mappings":"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"}

package/dist/ChipsInput/ChipInput.cjs

@@ -1,83 +1,65 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _types = require("../types");
-
 var _ChipInputField = require("./ChipInputField");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
-var _excluded = ["values", "inputId", "variants", "icon", "placeholder", "disabled", "altPlaceholder", "validationMessage", "onValueChange", "multiLine", "size"];
-
+var _excluded = ["values", "inputId", "variants", "icon", "placeholder", "disabled", "altPlaceholder", "validationMessage", "onValueChange", "multiLine", "size", "autoSave"];
 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; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var ChipInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var values = _ref.values,
-      inputId = _ref.inputId,
-      variants = _ref.variants,
-      icon = _ref.icon,
-      placeholder = _ref.placeholder,
-      disabled = _ref.disabled,
-      altPlaceholder = _ref.altPlaceholder,
-      validationMessage = _ref.validationMessage,
-      onValueChange = _ref.onValueChange,
-      _ref$multiLine = _ref.multiLine,
-      multiLine = _ref$multiLine === void 0 ? true : _ref$multiLine,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
+    inputId = _ref.inputId,
+    variants = _ref.variants,
+    icon = _ref.icon,
+    placeholder = _ref.placeholder,
+    disabled = _ref.disabled,
+    altPlaceholder = _ref.altPlaceholder,
+    validationMessage = _ref.validationMessage,
+    onValueChange = _ref.onValueChange,
+    _ref$multiLine = _ref.multiLine,
+    multiLine = _ref$multiLine === void 0 ? true : _ref$multiLine,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
+    _ref$autoSave = _ref.autoSave,
+    autoSave = _ref$autoSave === void 0 ? false : _ref$autoSave,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _React$useState = React.useState([]),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      chips = _React$useState2[0],
-      setChips = _React$useState2[1];
-
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    chips = _React$useState2[0],
+    setChips = _React$useState2[1];
   var _React$useState3 = React.useState(''),
-      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-      value = _React$useState4[0],
-      setValue = _React$useState4[1];
-
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    value = _React$useState4[0],
+    setValue = _React$useState4[1];
   var _React$useState5 = React.useState([]),
-      _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
-      chipItems = _React$useState6[0],
-      setChipItems = _React$useState6[1];
+    _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
+    chipItems = _React$useState6[0],
+    setChipItems = _React$useState6[1];
+
   /**
    * Sets initial values for the chips.
    */
-
-
   React.useEffect(function () {
     // Let's add initial chip values
     setChips(values);
   }, [values]);
+
   /**
    * Set chip items for chip input field
    * */
-
   React.useEffect(function () {
     setChipItems(chips.map(function (chip, index) {
       return {
@@ -88,11 +70,19 @@ var ChipInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       };
     }));
   }, [chips, variants, icon, size]);
+  var handleInputBlur = function handleInputBlur(event) {
+    var _event$target, _event$target$closest;
+    if (autoSave && value && !((_event$target = event.target) !== null && _event$target !== void 0 && (_event$target$closest = _event$target.closest("".concat(_ChipInputField.ChipInputContainer))) !== null && _event$target$closest !== void 0 && _event$target$closest.contains(event.relatedTarget))) {
+      setChips([].concat((0, _toConsumableArray2.default)(chips), [value]));
+      onValueChange([].concat((0, _toConsumableArray2.default)(chips), [value]));
+      setValue('');
+    }
+  };
+
   /**
    * Adds a chip to the chip list.
    * @param event - Event handler from the key down event.
    */
-
   var handleInputKeyDown = function handleInputKeyDown(event) {
     if ((event.key === 'Enter' || event.key === ' ') && value) {
       event.preventDefault();
@@ -101,23 +91,21 @@ var ChipInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       setValue('');
     }
   };
+
   /**
    * Removes a specific chip from the chip list.
    * @param index - Index of the chip that needs to be removed.
    */
-
-
   var onRemoveChip = function onRemoveChip(index) {
     var newChips = (0, _toConsumableArray2.default)(chips);
     newChips.splice(index, 1);
     setChips(newChips);
     onValueChange(newChips);
   };
+
   /**
    * Return Chip Input component.
    */
-
-
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipInputField.ChipInputField, _objectSpread({
     inputId: inputId,
     ref: ref,
@@ -135,7 +123,8 @@ var ChipInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     disabled: disabled,
     validationMessage: validationMessage,
     multiLine: multiLine,
-    size: size
+    size: size,
+    onBlur: handleInputBlur
   }, rest));
 });
 var _default = ChipInput;