@laerdal/life-react-components 3.5.2-uss.hackathon → 3.5.3

package/dist/esm/Dropdown/ChipDropdownInput.js

@@ -1,445 +0,0 @@
-import _pt from "prop-types";
-
-/**
- * Import React libraries.
- */
-import * as React from 'react';
-/**
- * Import third-party libraries.
- */
-
-import styled from 'styled-components';
-/**
- * Import custom components.
- */
-
-import { InputChip } from '../Chips/index';
-import { Search, TechnicalWarning } from '../icons/systemicons/SystemIcons';
-import { WarningMessage, ErrorMessage } from '../InputFields/styling';
-import { COLORS } from '../styles';
-/**
- * Import custom styles.
- */
-
-import { ChipInputContainer } from '../Chips/ChipStyles';
-/**
- * Import custom types.
- */
-
-import { Size } from '../types';
-import { DropdownButton } from './CommonStyling';
-import DropdownContent from './DropdownContent';
-import { LoadingIndicator } from '../LoadingIndicator';
-import { ComponentMStyling, ComponentTextStyle } from '../styles/typography';
-const Wrapper = styled.div`
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  min-width: 344px;
-`;
-const StyledChipInputContainer = styled(ChipInputContainer)`
-  padding: 2px 2px 2px 48px !important;
-  min-height: 56px;
-  max-height: 176px;
-  overflow-y: auto;
-  box-shadow: 0px 0px 0px 1px ${COLORS.neutral_400};
-
-  .medium {
-    margin-right: 8px !important;
-  }
-  .SearchIcon {
-    position: absolute;
-    left: 18px;
-    top: 18px;
-  }
-
-  &:active {
-    background-color: ${COLORS.primary_100};
-  }
-
-  &.invalid {
-    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};
-    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};
-    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};
-  }
-  &.alreadyInOrganization {
-    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};
-    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};
-    box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};
-  }
-
-  &.empty:hover {
-    -webkit-box-shadow: 0px 0px 0px 2px ${COLORS.primary_600};
-    -moz-box-shadow: 0px 0px 0px 2px ${COLORS.primary_600};
-    box-shadow: 0px 0px 0px 2px ${COLORS.primary_600};
-  }
-
-  &.inputHasFocus {
-    -webkit-box-shadow: 0px 0px 0px 2px ${COLORS.primary_800};
-    -moz-box-shadow: 0px 0px 0px 2px ${COLORS.primary_800};
-    box-shadow: 0px 0px 0px 2px ${COLORS.primary_800};
-  }
-  &:hover {
-    -webkit-box-shadow: 0px 0px 0px 2px ${COLORS.primary_700};
-    -moz-box-shadow: 0px 0px 0px 2px ${COLORS.primary_700};
-    box-shadow: 0px 0px 0px 2px ${COLORS.primary_700};
-  }
-
-  /* width */
-  ::-webkit-scrollbar {
-    width: 4px;
-    cursor: pointer;
-  }
-
-  /* Track */
-  ::-webkit-scrollbar-track {
-    background: ${COLORS.white};
-  }
-
-  /* Handle */
-  ::-webkit-scrollbar-thumb {
-    background: ${COLORS.neutral_500};
-    border-radius: 8px;
-  }
-
-  /* Handle on hover */
-  ::-webkit-scrollbar-thumb:hover {
-    background: ${COLORS.neutral_700};
-    cursor: pointer;
-  }
-`;
-const ChipInput = styled.input`
-  height: 40px;
-  width: auto;
-  display: inline-flex;
-  border: none;
-  outline: none;
-  margin: 4px;
-
-  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}
-  color: ${COLORS.black} !important;
-  background-color: inherit;
-`;
-const StyledDropdownButton = styled(DropdownButton)`
-  display: flex;
-  width: 98%;
-  margin-left: 3px;
-  svg {
-    margin: auto 0 auto 0;
-  }
-`;
-const Loading = styled.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(Search, {
-    size: "24px",
-    className: "SearchIcon"
-  }), chips?.map((chip, index) => /*#__PURE__*/React.createElement(InputChip, {
-    icon: givenList.find(l => l.value === chip) ? 'User' : undefined,
-    size: 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, {
-    size: Size.Small,
-    color: COLORS.neutral_600
-  })) : null), (!maxSelectedItems || maxSelectedItems && chips.length < maxSelectedItems) && /*#__PURE__*/React.createElement(DropdownContent, {
-    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(WarningMessage, null, /*#__PURE__*/React.createElement(TechnicalWarning, {
-    size: "20px",
-    color: COLORS.critical_500
-  }), /*#__PURE__*/React.createElement("span", null, validationMessage)) : validationType === 'error' && /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(TechnicalWarning, {
-    size: "20px",
-    color: COLORS.critical_400
-  }), /*#__PURE__*/React.createElement("span", null, validationMessage)));
-};
-
-ChipDropdownInput.propTypes = {
-  list: _pt.oneOfType([_pt.arrayOf(_pt.shape({
-    label: _pt.string.isRequired,
-    secondaryLabel: _pt.string,
-    value: _pt.string.isRequired
-  })), _pt.arrayOf(_pt.string)]).isRequired,
-  onInputChange: _pt.func,
-  disableSorting: _pt.bool,
-  messageOnNoResults: _pt.string,
-  isButton: _pt.bool,
-  autofilledMessage: _pt.string,
-  suggestion: _pt.shape({
-    label: _pt.string.isRequired,
-    secondaryLabel: _pt.string,
-    value: _pt.string.isRequired
-  }),
-  excludeIcon: _pt.bool,
-  loading: _pt.bool,
-  maxSelectedItems: _pt.number
-};
-export default ChipDropdownInput;
-//# sourceMappingURL=ChipDropdownInput.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Dropdown/ChipDropdownInput.tsx"],"names":["React","styled","InputChip","Search","TechnicalWarning","WarningMessage","ErrorMessage","COLORS","ChipInputContainer","Size","DropdownButton","DropdownContent","LoadingIndicator","ComponentMStyling","ComponentTextStyle","Wrapper","div","StyledChipInputContainer","neutral_400","primary_100","critical_400","warning_400","primary_600","primary_800","primary_700","white","neutral_500","neutral_700","ChipInput","input","Regular","black","StyledDropdownButton","Loading","ChipDropdownInput","list","onInputChange","disableSorting","messageOnNoResults","values","inputId","variants","placeholder","validationType","validationMessage","onValueChange","suggestion","excludeIcon","loading","maxSelectedItems","givenList","setGivenList","useState","chips","setChips","value","setValue","dropdownIsOpen","setDropdownIsOpen","currentSearchResult","setCurrentSearchResult","restartFilter","setRestartFilter","focused","setFocused","chipInput","useRef","styledFieldRef","useEffect","newList","map","e","label","addChip","newChip","current","onAddChip","event","keyCode","find","preventDefault","onRemoveChip","length","index","elementToAdd","newChips","splice","onEditChip","text","options","filter","option","toUpperCase","indexOf","sort","o","includes","handleValueUpdate","focus","handleKeyPress","contains","target","matches","c","toLowerCase","handleClickOutside","document","addEventListener","removeEventListener","dropdownItems","x","displayLabel","noteLabel","secondaryLabel","stopPropagation","chip","l","undefined","Medium","Small","neutral_600","action","pinTopItem","itemsType","scrollable","actionLabel","multiSelect","onValueUpdate","items","critical_500","isButton","autofilledMessage"],"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"}