@laerdal/life-react-components 3.5.1-dev.16 → 3.5.1-dev.18

package/dist/umd/Dropdown/ChipDropdownInput.js

@@ -1,515 +0,0 @@
-(function (global, factory) {
-  if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", "../Chips/index", "../icons/systemicons/SystemIcons", "../InputFields/styling", "../styles", "../Chips/ChipStyles", "../types", "./CommonStyling", "./DropdownContent", "../LoadingIndicator", "../styles/typography"], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../Chips/index"), require("../icons/systemicons/SystemIcons"), require("../InputFields/styling"), require("../styles"), require("../Chips/ChipStyles"), require("../types"), require("./CommonStyling"), require("./DropdownContent"), require("../LoadingIndicator"), require("../styles/typography"));
-  } else {
-    var mod = {
-      exports: {}
-    };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.index, global.SystemIcons, global.styling, global.styles, global.ChipStyles, global.types, global.CommonStyling, global.DropdownContent, global.LoadingIndicator, global.typography);
-    global.undefined = mod.exports;
-  }
-})(this, function (exports, _propTypes, _react, _styledComponents, _index, _SystemIcons, _styling, _styles, _ChipStyles, _types, _CommonStyling, _DropdownContent, _LoadingIndicator, _typography) {
-  "use strict";
-
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-
-  var _propTypes2 = _interopRequireDefault(_propTypes);
-
-  var React = _interopRequireWildcard(_react);
-
-  var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-  var _DropdownContent2 = _interopRequireDefault(_DropdownContent);
-
-  function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function (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 _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-      default: obj
-    };
-  }
-
-  /**
-   * Import React libraries.
-   */
-
-  /**
-   * Import third-party libraries.
-   */
-
-  /**
-   * Import custom components.
-   */
-
-  /**
-   * Import custom styles.
-   */
-
-  /**
-   * Import custom types.
-   */
-  const Wrapper = _styledComponents2.default.div`
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  min-width: 344px;
-`;
-  const StyledChipInputContainer = (0, _styledComponents2.default)(_ChipStyles.ChipInputContainer)`
-  padding: 2px 2px 2px 48px !important;
-  min-height: 56px;
-  max-height: 176px;
-  overflow-y: auto;
-  box-shadow: 0px 0px 0px 1px ${_styles.COLORS.neutral_400};
-
-  .medium {
-    margin-right: 8px !important;
-  }
-  .SearchIcon {
-    position: absolute;
-    left: 18px;
-    top: 18px;
-  }
-
-  &:active {
-    background-color: ${_styles.COLORS.primary_100};
-  }
-
-  &.invalid {
-    -webkit-box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.critical_400};
-    -moz-box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.critical_400};
-    box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.critical_400};
-  }
-  &.alreadyInOrganization {
-    -webkit-box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.warning_400};
-    -moz-box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.warning_400};
-    box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.warning_400};
-  }
-
-  &.empty:hover {
-    -webkit-box-shadow: 0px 0px 0px 2px ${_styles.COLORS.primary_600};
-    -moz-box-shadow: 0px 0px 0px 2px ${_styles.COLORS.primary_600};
-    box-shadow: 0px 0px 0px 2px ${_styles.COLORS.primary_600};
-  }
-
-  &.inputHasFocus {
-    -webkit-box-shadow: 0px 0px 0px 2px ${_styles.COLORS.primary_800};
-    -moz-box-shadow: 0px 0px 0px 2px ${_styles.COLORS.primary_800};
-    box-shadow: 0px 0px 0px 2px ${_styles.COLORS.primary_800};
-  }
-  &:hover {
-    -webkit-box-shadow: 0px 0px 0px 2px ${_styles.COLORS.primary_700};
-    -moz-box-shadow: 0px 0px 0px 2px ${_styles.COLORS.primary_700};
-    box-shadow: 0px 0px 0px 2px ${_styles.COLORS.primary_700};
-  }
-
-  /* width */
-  ::-webkit-scrollbar {
-    width: 4px;
-    cursor: pointer;
-  }
-
-  /* Track */
-  ::-webkit-scrollbar-track {
-    background: ${_styles.COLORS.white};
-  }
-
-  /* Handle */
-  ::-webkit-scrollbar-thumb {
-    background: ${_styles.COLORS.neutral_500};
-    border-radius: 8px;
-  }
-
-  /* Handle on hover */
-  ::-webkit-scrollbar-thumb:hover {
-    background: ${_styles.COLORS.neutral_700};
-    cursor: pointer;
-  }
-`;
-  const ChipInput = _styledComponents2.default.input`
-  height: 40px;
-  width: auto;
-  display: inline-flex;
-  border: none;
-  outline: none;
-  margin: 4px;
-
-  ${(0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black)}
-  color: ${_styles.COLORS.black} !important;
-  background-color: inherit;
-`;
-  const StyledDropdownButton = (0, _styledComponents2.default)(_CommonStyling.DropdownButton)`
-  display: flex;
-  width: 98%;
-  margin-left: 3px;
-  svg {
-    margin: auto 0 auto 0;
-  }
-`;
-  const Loading = _styledComponents2.default.div`
-  margin: auto 16px auto auto !important;
-  height: 20px;
-  div {
-    height: 20px;
-  }
-`;
-
-  const ChipDropdownInput = ({
-    list,
-    onInputChange,
-    disableSorting,
-    messageOnNoResults,
-    values,
-    inputId,
-    variants,
-    placeholder,
-    validationType,
-    validationMessage,
-    onValueChange,
-    suggestion,
-    excludeIcon,
-    loading,
-    maxSelectedItems
-  }) => {
-    // Initiate states
-    const [givenList, setGivenList] = React.useState([]);
-    const [chips, setChips] = React.useState([]);
-    const [value, setValue] = React.useState('');
-    const [dropdownIsOpen, setDropdownIsOpen] = React.useState(false);
-    const [currentSearchResult, setCurrentSearchResult] = React.useState();
-    const [restartFilter, setRestartFilter] = React.useState(false);
-    const [focused, setFocused] = React.useState(null); // Initiate refs
-
-    const chipInput = React.useRef();
-    const styledFieldRef = React.useRef(null);
-    /**
-     * Sets initial values for the chips.
-     */
-
-    React.useEffect(() => {
-      // Let's add initial chip values
-      setChips(values);
-    }, [values]);
-    /**
-     * Convert string[] to List[] if necessary
-     */
-
-    React.useEffect(() => {
-      if (typeof list[0] === 'string') {
-        const newList = list.map(e => ({
-          label: e,
-          value: e
-        }));
-        setGivenList(newList);
-      } else {
-        setGivenList(list);
-      }
-    }, [list]);
-
-    const addChip = newChip => {
-      // Let's add the chip
-      setChips([...chips, newChip]);
-      onValueChange([...chips, newChip]); // Let's clear the old value
-
-      chipInput.current.value = '';
-      setValue('');
-    };
-    /**
-     * Adds a chip to the chip list.
-     * @param event - Event handler from the key down event.
-     */
-
-
-    const onAddChip = event => {
-      // Let's trigger only on enter, comma and space key press
-      if ((event.keyCode === 13 || event.keyCode === 32 || event.keyCode === 188) && value) {
-        if (!givenList.find(e => e.value === value)) {
-          setValue('');
-          return;
-        } // Let's prevent default action - adding new key to the value
-
-
-        event.preventDefault();
-        addChip(value);
-      }
-
-      if (event.keyCode === 8 && value === '') {
-        onRemoveChip(chips.length - 1);
-      }
-    };
-    /**
-     * Removes a specific chip from the chip list.
-     * @param index - Index of the chip that needs to be removed.
-     * @param elementToAdd - Element which needs to be added in the deleted element place.
-     */
-
-
-    const onRemoveChip = (index, elementToAdd) => {
-      // Let's copy the chips
-      const newChips = [...chips]; // Let's delete the chip
-      // If necessary, let's replace it with a different chip
-
-      if (elementToAdd) {
-        newChips.splice(index, 1, elementToAdd);
-      } else {
-        newChips.splice(index, 1);
-      } // Let's update the chip list
-
-
-      setChips([...newChips]);
-      onValueChange([...newChips]);
-    };
-    /**
-     * Changes a status of the chip to edit.
-     * @param text - Text of the chip that is being edited.
-     * @param index - Index of the chip in the array.
-     */
-
-
-    const onEditChip = (text, index) => {
-      // Let's check if we have to add value as a chip (in case we have entered something in the input field)
-      if (chipInput.current.value !== '') {
-        // Let's replace the chip
-        onRemoveChip(index, chipInput.current.value);
-      } else {
-        // Let's just remove the chip
-        onRemoveChip(index);
-      } // Let's update the text value of input field
-
-
-      chipInput.current.value = text;
-      setValue(text);
-    };
-
-    React.useEffect(() => {
-      var options = [...givenList];
-
-      if (!restartFilter && value !== '') {
-        options = options.filter(option => option.label.toUpperCase().indexOf(value.toUpperCase()) !== -1);
-      }
-
-      if (!disableSorting) {
-        options = options.sort();
-      }
-
-      options = options.filter(o => !chips.includes(o.value));
-      setCurrentSearchResult(options);
-    }, [value, givenList, chips]);
-
-    const handleValueUpdate = values => {
-      setRestartFilter(true);
-      addChip(values[0]);
-      chipInput?.current?.focus();
-    };
-
-    const handleKeyPress = e => {
-      if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {
-        if (e.keyCode === 13) {
-          const matches = currentSearchResult?.filter(c => c.value.toLowerCase() === value.toLowerCase());
-
-          if (matches?.length === 1
-          /*&& onSelect*/
-          ) {
-            addChip(matches[0].value); //onSelect(chips);
-          } else if (e.target.value === suggestion?.label) {
-            addChip(e.target.value);
-          }
-
-          setDropdownIsOpen(!dropdownIsOpen);
-
-          if (matches?.length === 0) {
-            setValue('');
-          }
-        } else if (e.keyCode === 40) {
-          setDropdownIsOpen(!dropdownIsOpen);
-        }
-      }
-    };
-
-    const handleClickOutside = e => {
-      if (styledFieldRef?.current && !styledFieldRef.current.contains(e.target)) {
-        if (dropdownIsOpen) {
-          setDropdownIsOpen(false);
-
-          if (!givenList.find(e => e.value === value)) {
-            setValue('');
-          }
-        }
-      }
-    };
-
-    React.useEffect(() => {
-      document.addEventListener('keypress', handleKeyPress);
-      document.addEventListener('click', handleClickOutside);
-      return () => {
-        document.removeEventListener('keypress', handleKeyPress);
-        document.removeEventListener('click', handleClickOutside);
-      };
-    });
-    /**
-     * Return Chip Input component.
-     */
-
-    let dropdownItems = [];
-    if (currentSearchResult) dropdownItems = currentSearchResult.map(x => ({
-      value: x.value,
-      displayLabel: x.label,
-      noteLabel: x.secondaryLabel
-    }));
-    if (suggestion && !chips.includes(suggestion.value)) dropdownItems = [{
-      value: suggestion.value,
-      displayLabel: suggestion.label,
-      noteLabel: suggestion.secondaryLabel,
-      suggestion: true
-    }, ...dropdownItems];
-    return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(StyledChipInputContainer, {
-      id: inputId,
-      onClick: e => {
-        e.stopPropagation();
-        setDropdownIsOpen(true);
-        chipInput.current.focus();
-      },
-      className: validationType,
-      ref: styledFieldRef
-    }, /*#__PURE__*/React.createElement(_SystemIcons.Search, {
-      size: "24px",
-      className: "SearchIcon"
-    }), chips?.map((chip, index) => /*#__PURE__*/React.createElement(_index.InputChip, {
-      icon: givenList.find(l => l.value === chip) ? 'User' : undefined,
-      size: _types.Size.Medium,
-      variant: variants && variants?.length && variants[index] ? variants[index] : 'normal',
-      text: chip,
-      onRemove: () => onRemoveChip(index),
-      onClick: () => onEditChip(chip, index),
-      key: `chip_${index}`
-    })), /*#__PURE__*/React.createElement(ChipInput, {
-      type: "text",
-      onChange: event => {
-        setValue(event.target.value);
-        setRestartFilter(false);
-        setDropdownIsOpen(true);
-
-        if (onInputChange) {
-          onInputChange(event.target.value || '');
-        }
-      },
-      onKeyDown: event => {
-        onAddChip(event);
-      },
-      placeholder: placeholder && chips?.length === 0 ? placeholder : '',
-      onClick: e => {
-        e.stopPropagation();
-        setDropdownIsOpen(true);
-      },
-      onFocus: () => {
-        setDropdownIsOpen(true);
-      },
-      ref: chipInput
-    }), loading ? /*#__PURE__*/React.createElement(Loading, null, /*#__PURE__*/React.createElement(_LoadingIndicator.LoadingIndicator, {
-      size: _types.Size.Small,
-      color: _styles.COLORS.neutral_600
-    })) : null), (!maxSelectedItems || maxSelectedItems && chips.length < maxSelectedItems) && /*#__PURE__*/React.createElement(_DropdownContent2.default, {
-      customizationProps: {
-        action: () => {},
-        pinTopItem: true,
-        itemsType: 'normal',
-        scrollable: true,
-        actionLabel: '',
-        multiSelect: false,
-        onValueUpdate: handleValueUpdate,
-        items: dropdownItems
-      },
-      focused: focused,
-      setFocused: setFocused,
-      hideOnClickOutside: false,
-      selectedValues: [],
-      messageOnNoResults: messageOnNoResults ?? '',
-      setSelectedValues: () => {},
-      isOpen: dropdownIsOpen,
-      setIsOpen: setDropdownIsOpen,
-      filter: '',
-      isButton: false,
-      id: `${inputId}_dropdowncontent`
-    }), validationMessage && validationType === 'warning' ? /*#__PURE__*/React.createElement(_styling.WarningMessage, null, /*#__PURE__*/React.createElement(_SystemIcons.TechnicalWarning, {
-      size: "20px",
-      color: _styles.COLORS.critical_500
-    }), /*#__PURE__*/React.createElement("span", null, validationMessage)) : validationType === 'error' && /*#__PURE__*/React.createElement(_styling.ErrorMessage, null, /*#__PURE__*/React.createElement(_SystemIcons.TechnicalWarning, {
-      size: "20px",
-      color: _styles.COLORS.critical_400
-    }), /*#__PURE__*/React.createElement("span", null, validationMessage)));
-  };
-
-  ChipDropdownInput.propTypes = {
-    list: _propTypes2.default.oneOfType([_propTypes2.default.arrayOf(_propTypes2.default.shape({
-      label: _propTypes2.default.string.isRequired,
-      secondaryLabel: _propTypes2.default.string,
-      value: _propTypes2.default.string.isRequired
-    })), _propTypes2.default.arrayOf(_propTypes2.default.string)]).isRequired,
-    onInputChange: _propTypes2.default.func,
-    disableSorting: _propTypes2.default.bool,
-    messageOnNoResults: _propTypes2.default.string,
-    isButton: _propTypes2.default.bool,
-    autofilledMessage: _propTypes2.default.string,
-    suggestion: _propTypes2.default.shape({
-      label: _propTypes2.default.string.isRequired,
-      secondaryLabel: _propTypes2.default.string,
-      value: _propTypes2.default.string.isRequired
-    }),
-    excludeIcon: _propTypes2.default.bool,
-    loading: _propTypes2.default.bool,
-    maxSelectedItems: _propTypes2.default.number
-  };
-  exports.default = ChipDropdownInput;
-});
-//# sourceMappingURL=ChipDropdownInput.js.map

package/dist/umd/Dropdown/ChipDropdownInput.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Dropdown/ChipDropdownInput.tsx"],"names":["Wrapper","styled","div","StyledChipInputContainer","COLORS","neutral_400","primary_100","critical_400","warning_400","primary_600","primary_800","primary_700","white","neutral_500","neutral_700","ChipInput","input","ComponentMStyling","ComponentTextStyle","black","StyledDropdownButton","Loading","label","secondaryLabel","value","list","onInputChange","disableSorting","messageOnNoResults","isButton","autofilledMessage","suggestion","excludeIcon","loading","maxSelectedItems","ChipDropdownInput","React","chipInput","styledFieldRef","setChips","newList","e","setGivenList","addChip","newChip","onValueChange","setValue","onAddChip","event","givenList","onRemoveChip","chips","newChips","onEditChip","options","option","o","setCurrentSearchResult","handleValueUpdate","values","setRestartFilter","handleKeyPress","matches","currentSearchResult","c","setDropdownIsOpen","handleClickOutside","document","dropdownItems","x","displayLabel","noteLabel","l","Size","variants","index","placeholder","neutral_600","action","pinTopItem","itemsType","scrollable","actionLabel","multiSelect","onValueUpdate","items","inputId","validationMessage","validationType","critical_500"],"mappings":"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","sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled from 'styled-components';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport { InputChip } from '../Chips/index';\r\nimport { Search, TechnicalWarning, User } from '../icons/systemicons/SystemIcons';\r\nimport { WarningMessage, ErrorMessage } from '../InputFields/styling';\r\nimport { COLORS } from '../styles';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport { ChipInputContainer } from '../Chips/ChipStyles';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport { Size } from '../types';\r\nimport { ChipInputProps } from '../Chips/ChipTypes';\r\nimport { DropdownButton } from './CommonStyling';\r\nimport DropdownContent, { DropdownItem } from './DropdownContent';\r\nimport { LoadingIndicator } from '../LoadingIndicator';\r\nimport { ComponentMStyling, ComponentXXSStyling, ComponentTextStyle } from '../styles/typography';\r\n\r\nconst Wrapper = styled.div`\r\n  position: relative;\r\n  display: inline-block;\r\n  width: 100%;\r\n  min-width: 344px;\r\n`;\r\n\r\nconst StyledChipInputContainer = styled(ChipInputContainer)`\r\n  padding: 2px 2px 2px 48px !important;\r\n  min-height: 56px;\r\n  max-height: 176px;\r\n  overflow-y: auto;\r\n  box-shadow: 0px 0px 0px 1px ${COLORS.neutral_400};\r\n\r\n  .medium {\r\n    margin-right: 8px !important;\r\n  }\r\n  .SearchIcon {\r\n    position: absolute;\r\n    left: 18px;\r\n    top: 18px;\r\n  }\r\n\r\n  &:active {\r\n    background-color: ${COLORS.primary_100};\r\n  }\r\n\r\n  &.invalid {\r\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\r\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\r\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\r\n  }\r\n  &.alreadyInOrganization {\r\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\r\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\r\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\r\n  }\r\n\r\n  &.empty:hover {\r\n    -webkit-box-shadow: 0px 0px 0px 2px ${COLORS.primary_600};\r\n    -moz-box-shadow: 0px 0px 0px 2px ${COLORS.primary_600};\r\n    box-shadow: 0px 0px 0px 2px ${COLORS.primary_600};\r\n  }\r\n\r\n  &.inputHasFocus {\r\n    -webkit-box-shadow: 0px 0px 0px 2px ${COLORS.primary_800};\r\n    -moz-box-shadow: 0px 0px 0px 2px ${COLORS.primary_800};\r\n    box-shadow: 0px 0px 0px 2px ${COLORS.primary_800};\r\n  }\r\n  &:hover {\r\n    -webkit-box-shadow: 0px 0px 0px 2px ${COLORS.primary_700};\r\n    -moz-box-shadow: 0px 0px 0px 2px ${COLORS.primary_700};\r\n    box-shadow: 0px 0px 0px 2px ${COLORS.primary_700};\r\n  }\r\n\r\n  /* width */\r\n  ::-webkit-scrollbar {\r\n    width: 4px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  /* Track */\r\n  ::-webkit-scrollbar-track {\r\n    background: ${COLORS.white};\r\n  }\r\n\r\n  /* Handle */\r\n  ::-webkit-scrollbar-thumb {\r\n    background: ${COLORS.neutral_500};\r\n    border-radius: 8px;\r\n  }\r\n\r\n  /* Handle on hover */\r\n  ::-webkit-scrollbar-thumb:hover {\r\n    background: ${COLORS.neutral_700};\r\n    cursor: pointer;\r\n  }\r\n`;\r\n\r\nconst ChipInput = styled.input`\r\n  height: 40px;\r\n  width: auto;\r\n  display: inline-flex;\r\n  border: none;\r\n  outline: none;\r\n  margin: 4px;\r\n\r\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  color: ${COLORS.black} !important;\r\n  background-color: inherit;\r\n`;\r\n\r\nconst StyledDropdownButton = styled(DropdownButton)`\r\n  display: flex;\r\n  width: 98%;\r\n  margin-left: 3px;\r\n  svg {\r\n    margin: auto 0 auto 0;\r\n  }\r\n`;\r\n\r\nconst Loading = styled.div`\r\n  margin: auto 16px auto auto !important;\r\n  height: 20px;\r\n  div {\r\n    height: 20px;\r\n  }\r\n`;\r\n\r\ninterface List {\r\n  label: string;\r\n  secondaryLabel?: string;\r\n  value: string;\r\n}\r\n\r\ninterface ChipDropdownInputProps extends ChipInputProps {\r\n  list: List[] | string[];\r\n  onInputChange?: (input: string) => void;\r\n  disableSorting?: boolean;\r\n  messageOnNoResults?: string;\r\n  isButton?: boolean;\r\n  autofilledMessage?: string;\r\n  suggestion?: List;\r\n  excludeIcon?: boolean;\r\n  loading?: boolean;\r\n  maxSelectedItems?: number;\r\n}\r\n\r\nconst ChipDropdownInput: React.FunctionComponent<ChipDropdownInputProps> = ({\r\n  list,\r\n  onInputChange,\r\n  disableSorting,\r\n  messageOnNoResults,\r\n  values,\r\n  inputId,\r\n  variants,\r\n  placeholder,\r\n  validationType,\r\n  validationMessage,\r\n  onValueChange,\r\n  suggestion,\r\n  excludeIcon,\r\n  loading,\r\n  maxSelectedItems,\r\n}: ChipDropdownInputProps) => {\r\n  // Initiate states\r\n  const [givenList, setGivenList] = React.useState<List[]>([]);\r\n  const [chips, setChips] = React.useState<string[]>([]);\r\n  const [value, setValue] = React.useState<string>('');\r\n  const [dropdownIsOpen, setDropdownIsOpen] = React.useState<boolean>(false);\r\n  const [currentSearchResult, setCurrentSearchResult] = React.useState<List[]>();\r\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\r\n  const [focused, setFocused] = React.useState<number | null>(null);\r\n\r\n  // Initiate refs\r\n  const chipInput = React.useRef<any>();\r\n  const styledFieldRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  /**\r\n   * Sets initial values for the chips.\r\n   */\r\n  React.useEffect(() => {\r\n    // Let's add initial chip values\r\n    setChips(values);\r\n  }, [values]);\r\n\r\n  /**\r\n   * Convert string[] to List[] if necessary\r\n   */\r\n  React.useEffect(() => {\r\n    if (typeof list[0] === 'string') {\r\n      const newList: List[] = (list as string[]).map((e: string) => ({ label: e, value: e }));\r\n      setGivenList(newList);\r\n    } else {\r\n      setGivenList(list as List[]);\r\n    }\r\n  }, [list]);\r\n\r\n  const addChip = (newChip: string) => {\r\n    // Let's add the chip\r\n    setChips([...chips, newChip]);\r\n    onValueChange([...chips, newChip]);\r\n\r\n    // Let's clear the old value\r\n    chipInput.current.value = '';\r\n    setValue('');\r\n  };\r\n\r\n  /**\r\n   * Adds a chip to the chip list.\r\n   * @param event - Event handler from the key down event.\r\n   */\r\n  const onAddChip = (event: React.KeyboardEvent<HTMLInputElement>): void => {\r\n    // Let's trigger only on enter, comma and space key press\r\n    if ((event.keyCode === 13 || event.keyCode === 32 || event.keyCode === 188) && value) {\r\n      if (!givenList.find((e) => e.value === value)) {\r\n        setValue('');\r\n        return;\r\n      }\r\n      // Let's prevent default action - adding new key to the value\r\n      event.preventDefault();\r\n\r\n      addChip(value);\r\n    }\r\n    if (event.keyCode === 8 && value === '') {\r\n      onRemoveChip(chips.length - 1);\r\n    }\r\n  };\r\n\r\n  /**\r\n   * Removes a specific chip from the chip list.\r\n   * @param index - Index of the chip that needs to be removed.\r\n   * @param elementToAdd - Element which needs to be added in the deleted element place.\r\n   */\r\n  const onRemoveChip = (index: number, elementToAdd?: string): void => {\r\n    // Let's copy the chips\r\n    const newChips = [...chips];\r\n\r\n    // Let's delete the chip\r\n    // If necessary, let's replace it with a different chip\r\n    if (elementToAdd) {\r\n      newChips.splice(index, 1, elementToAdd);\r\n    } else {\r\n      newChips.splice(index, 1);\r\n    }\r\n\r\n    // Let's update the chip list\r\n    setChips([...newChips]);\r\n    onValueChange([...newChips]);\r\n  };\r\n\r\n  /**\r\n   * Changes a status of the chip to edit.\r\n   * @param text - Text of the chip that is being edited.\r\n   * @param index - Index of the chip in the array.\r\n   */\r\n  const onEditChip = (text: string, index: number): void => {\r\n    // Let's check if we have to add value as a chip (in case we have entered something in the input field)\r\n    if (chipInput.current.value !== '') {\r\n      // Let's replace the chip\r\n      onRemoveChip(index, chipInput.current.value);\r\n    } else {\r\n      // Let's just remove the chip\r\n      onRemoveChip(index);\r\n    }\r\n\r\n    // Let's update the text value of input field\r\n    chipInput.current.value = text;\r\n    setValue(text);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    var options = [...givenList];\r\n    if (!restartFilter && value !== '') {\r\n      options = options.filter((option) => option.label.toUpperCase().indexOf(value.toUpperCase()) !== -1);\r\n    }\r\n    if (!disableSorting) {\r\n      options = options.sort();\r\n    }\r\n    options = options.filter((o) => !chips.includes(o.value));\r\n    setCurrentSearchResult(options);\r\n  }, [value, givenList, chips]);\r\n\r\n  const handleValueUpdate = (values: string[]) => {\r\n    setRestartFilter(true);\r\n    addChip(values[0]);\r\n    chipInput?.current?.focus();\r\n  }\r\n\r\n  const handleKeyPress = (e: any) => {\r\n    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\r\n      if (e.keyCode === 13) {\r\n        const matches = currentSearchResult?.filter((c) => c.value.toLowerCase() === value.toLowerCase());\r\n        if (matches?.length === 1 /*&& onSelect*/) {\r\n          addChip(matches[0].value);\r\n          //onSelect(chips);\r\n        } else if (e.target.value === suggestion?.label) {\r\n          addChip(e.target.value);\r\n        }\r\n\r\n        setDropdownIsOpen(!dropdownIsOpen);\r\n        if (matches?.length === 0) {\r\n          setValue('');\r\n        }\r\n      } else if (e.keyCode === 40) {\r\n        setDropdownIsOpen(!dropdownIsOpen);\r\n      }\r\n    }\r\n  };\r\n\r\n  const handleClickOutside = (e: any) => {\r\n    if (styledFieldRef?.current && !styledFieldRef.current.contains(e.target)) {\r\n      if (dropdownIsOpen) {\r\n        setDropdownIsOpen(false);\r\n        if (!givenList.find((e) => e.value === value)) {\r\n          setValue('');\r\n        }\r\n      }\r\n    }\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    document.addEventListener('keypress', handleKeyPress);\r\n    document.addEventListener('click', handleClickOutside);\r\n    return () => {\r\n      document.removeEventListener('keypress', handleKeyPress);\r\n      document.removeEventListener('click', handleClickOutside);\r\n    };\r\n  });\r\n\r\n  /**\r\n   * Return Chip Input component.\r\n   */\r\n\r\n  let dropdownItems: DropdownItem[] = [];\r\n  if(currentSearchResult)\r\n    dropdownItems = currentSearchResult.map(x => ({ value: x.value, displayLabel: x.label, noteLabel: x.secondaryLabel }));\r\n  \r\n  if(suggestion && !chips.includes(suggestion.value))\r\n    dropdownItems = [{ value: suggestion.value, displayLabel: suggestion.label, noteLabel: suggestion.secondaryLabel, suggestion: true }, ...dropdownItems];\r\n\r\n  return (\r\n    <Wrapper>\r\n      <StyledChipInputContainer\r\n        id={inputId}\r\n        onClick={(e: any) => {\r\n          e.stopPropagation();\r\n          setDropdownIsOpen(true);\r\n          chipInput.current.focus();\r\n        }}\r\n        className={validationType}\r\n        ref={styledFieldRef}>\r\n        <Search size=\"24px\" className=\"SearchIcon\" />\r\n        {chips?.map((chip: string, index: number) => (\r\n          <InputChip\r\n            icon={givenList.find((l: List) => l.value === chip) ? 'User' : undefined}\r\n            size={Size.Medium}\r\n            variant={variants && variants?.length && variants[index] ? variants[index] : 'normal'}\r\n            text={chip}\r\n            onRemove={() => onRemoveChip(index)}\r\n            onClick={() => onEditChip(chip, index)}\r\n            key={`chip_${index}`}></InputChip>\r\n        ))}\r\n\r\n        <ChipInput\r\n          type=\"text\"\r\n          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\r\n            setValue(event.target.value);\r\n            setRestartFilter(false);\r\n            setDropdownIsOpen(true);\r\n            if (onInputChange) {\r\n              onInputChange(event.target.value || '');\r\n            }\r\n          }}\r\n          onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {\r\n            onAddChip(event);\r\n          }}\r\n          placeholder={placeholder && chips?.length === 0 ? placeholder : ''}\r\n          onClick={(e: any) => {\r\n            e.stopPropagation();\r\n            setDropdownIsOpen(true);\r\n          }}\r\n          onFocus={() => {\r\n            setDropdownIsOpen(true);\r\n          }}\r\n          ref={chipInput}\r\n        />\r\n        {loading ? (\r\n          <Loading>\r\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\r\n          </Loading>\r\n        ) : null}\r\n      </StyledChipInputContainer>\r\n      {(!maxSelectedItems || (maxSelectedItems && chips.length < maxSelectedItems)) && (\r\n        <DropdownContent \r\n          customizationProps={{\r\n            action: () => {},\r\n            pinTopItem: true,\r\n            \r\n            itemsType: 'normal',\r\n            scrollable: true,\r\n            actionLabel: '',\r\n            multiSelect: false,\r\n            onValueUpdate: handleValueUpdate,\r\n            items: dropdownItems\r\n          }}\r\n          focused={focused}\r\n          setFocused={setFocused}\r\n          hideOnClickOutside={false}\r\n          selectedValues={[]}\r\n          messageOnNoResults={messageOnNoResults ?? ''}\r\n          setSelectedValues={() => {}}\r\n          isOpen={dropdownIsOpen}\r\n          setIsOpen={setDropdownIsOpen}\r\n          filter={''}\r\n          isButton={false} \r\n          id={`${inputId}_dropdowncontent`} />\r\n      )}\r\n\r\n      {/* If there is an error, let's render the error */}\r\n      {validationMessage && validationType === 'warning' ? (\r\n        <WarningMessage>\r\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_500} />\r\n          <span>{validationMessage}</span>\r\n        </WarningMessage>\r\n      ) : (\r\n        validationType === 'error' && (\r\n          <ErrorMessage>\r\n            <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\r\n            <span>{validationMessage}</span>\r\n          </ErrorMessage>\r\n        )\r\n      )}\r\n    </Wrapper>\r\n  );\r\n};\r\n\r\nexport default ChipDropdownInput;\r\n"],"file":"ChipDropdownInput.js"}