@laerdal/life-react-components 3.4.2 → 3.5.0

package/dist/Dropdown/ChipDropdownInput.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Dropdown/ChipDropdownInput.tsx"],"names":["Wrapper","styled","div","StyledChipInputContainer","ChipInputContainer","COLORS","neutral_400","primary_100","critical_400","warning_400","primary_600","primary_800","primary_700","ChipInput","input","ComponentTextStyle","Regular","black","Loading","ChipDropdownInput","list","onInputChange","disableSorting","messageOnNoResults","values","inputId","variants","placeholder","validationType","validationMessage","onValueChange","suggestion","excludeIcon","loading","maxSelectedItems","React","useState","givenList","setGivenList","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","secondaryLabel","sort","o","includes","handleValueUpdate","focus","handleKeyPress","contains","target","matches","c","toLowerCase","handleClickOutside","document","addEventListener","removeEventListener","dropdownItems","x","displayLabel","noteLabel","stopPropagation","chip","l","undefined","Size","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, scrollBarStyling } 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\n\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\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 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    let options = [...givenList];\r\n    if (!restartFilter && value !== '') {\r\n      options = options.filter((option) => option.label.toUpperCase().indexOf(value.toUpperCase()) !== -1 ||\r\n        (option.secondaryLabel && option.secondaryLabel?.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.cjs"}

package/dist/Dropdown/ChipDropdownInput.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Import React libraries.
+ */
+import * as React from 'react';
+import { ChipInputProps } from '../Chips/ChipTypes';
+interface List {
+    label: string;
+    secondaryLabel?: string;
+    value: string;
+}
+interface ChipDropdownInputProps extends ChipInputProps {
+    list: List[] | string[];
+    onInputChange?: (input: string) => void;
+    disableSorting?: boolean;
+    messageOnNoResults?: string;
+    isButton?: boolean;
+    autofilledMessage?: string;
+    suggestion?: List;
+    excludeIcon?: boolean;
+    loading?: boolean;
+    maxSelectedItems?: number;
+}
+declare const ChipDropdownInput: React.FunctionComponent<ChipDropdownInputProps>;
+export default ChipDropdownInput;

package/dist/Dropdown/ChipDropdownInput.js

@@ -0,0 +1,418 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+/**
+ * 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 DropdownContent from './DropdownContent';
+import { LoadingIndicator } from '../LoadingIndicator';
+import { ComponentMStyling, ComponentTextStyle } from '../styles/typography';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  display: inline-block;\n  width: 100%;\n  min-width: 344px;\n"])));
+var StyledChipInputContainer = styled(ChipInputContainer)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 2px 2px 2px 48px !important;\n  min-height: 56px;\n  max-height: 176px;\n  overflow-y: auto;\n  box-shadow: 0px 0px 0px 1px ", ";\n\n  .medium {\n    margin-right: 8px !important;\n  }\n  .SearchIcon {\n    position: absolute;\n    left: 18px;\n    top: 18px;\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &.invalid {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n  &.alreadyInOrganization {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.empty:hover {\n    -webkit-box-shadow: 0px 0px 0px 2px ", ";\n    -moz-box-shadow: 0px 0px 0px 2px ", ";\n    box-shadow: 0px 0px 0px 2px ", ";\n  }\n\n  &.inputHasFocus {\n    -webkit-box-shadow: 0px 0px 0px 2px ", ";\n    -moz-box-shadow: 0px 0px 0px 2px ", ";\n    box-shadow: 0px 0px 0px 2px ", ";\n  }\n  &:hover {\n    -webkit-box-shadow: 0px 0px 0px 2px ", ";\n    -moz-box-shadow: 0px 0px 0px 2px ", ";\n    box-shadow: 0px 0px 0px 2px ", ";\n  }\n"])), COLORS.neutral_400, COLORS.primary_100, COLORS.critical_400, COLORS.critical_400, COLORS.critical_400, COLORS.warning_400, COLORS.warning_400, COLORS.warning_400, COLORS.primary_600, COLORS.primary_600, COLORS.primary_600, COLORS.primary_800, COLORS.primary_800, COLORS.primary_800, COLORS.primary_700, COLORS.primary_700, COLORS.primary_700);
+var ChipInput = styled.input(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 40px;\n  width: auto;\n  display: inline-flex;\n  border: none;\n  outline: none;\n  margin: 4px;\n\n  ", "\n  color: ", " !important;\n  background-color: inherit;\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), COLORS.black);
+var Loading = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin: auto 16px auto auto !important;\n  height: 20px;\n  div {\n    height: 20px;\n  }\n"])));
+
+var ChipDropdownInput = function ChipDropdownInput(_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,
+      validationType = _ref.validationType,
+      validationMessage = _ref.validationMessage,
+      onValueChange = _ref.onValueChange,
+      suggestion = _ref.suggestion,
+      excludeIcon = _ref.excludeIcon,
+      loading = _ref.loading,
+      maxSelectedItems = _ref.maxSelectedItems;
+
+  // Initiate states
+  var _React$useState = React.useState([]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      givenList = _React$useState2[0],
+      setGivenList = _React$useState2[1];
+
+  var _React$useState3 = React.useState([]),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      chips = _React$useState4[0],
+      setChips = _React$useState4[1];
+
+  var _React$useState5 = React.useState(''),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      value = _React$useState6[0],
+      setValue = _React$useState6[1];
+
+  var _React$useState7 = React.useState(false),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      dropdownIsOpen = _React$useState8[0],
+      setDropdownIsOpen = _React$useState8[1];
+
+  var _React$useState9 = React.useState(),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      currentSearchResult = _React$useState10[0],
+      setCurrentSearchResult = _React$useState10[1];
+
+  var _React$useState11 = React.useState(false),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      restartFilter = _React$useState12[0],
+      setRestartFilter = _React$useState12[1];
+
+  var _React$useState13 = React.useState(null),
+      _React$useState14 = _slicedToArray(_React$useState13, 2),
+      focused = _React$useState14[0],
+      setFocused = _React$useState14[1]; // Initiate refs
+
+
+  var chipInput = React.useRef();
+  var styledFieldRef = React.useRef(null);
+  /**
+   * Sets initial values for the chips.
+   */
+
+  React.useEffect(function () {
+    // Let's add initial chip values
+    setChips(values);
+  }, [values]);
+  /**
+   * Convert string[] to List[] if necessary
+   */
+
+  React.useEffect(function () {
+    if (typeof list[0] === 'string') {
+      var newList = list.map(function (e) {
+        return {
+          label: e,
+          value: e
+        };
+      });
+      setGivenList(newList);
+    } else {
+      setGivenList(list);
+    }
+  }, [list]);
+
+  var addChip = function addChip(newChip) {
+    // Let's add the chip
+    setChips([].concat(_toConsumableArray(chips), [newChip]));
+    onValueChange([].concat(_toConsumableArray(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.
+   */
+
+
+  var onAddChip = function 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(function (e) {
+        return 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.
+   */
+
+
+  var onRemoveChip = function onRemoveChip(index, elementToAdd) {
+    // Let's copy the chips
+    var newChips = _toConsumableArray(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(_toConsumableArray(newChips));
+    onValueChange(_toConsumableArray(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.
+   */
+
+
+  var onEditChip = function 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(function () {
+    var options = _toConsumableArray(givenList);
+
+    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();
+    }
+
+    options = options.filter(function (o) {
+      return !chips.includes(o.value);
+    });
+    setCurrentSearchResult(options);
+  }, [value, givenList, chips]);
+
+  var handleValueUpdate = function handleValueUpdate(values) {
+    var _chipInput$current;
+
+    setRestartFilter(true);
+    addChip(values[0]);
+    chipInput === null || chipInput === void 0 ? void 0 : (_chipInput$current = chipInput.current) === null || _chipInput$current === void 0 ? void 0 : _chipInput$current.focus();
+  };
+
+  var handleKeyPress = function handleKeyPress(e) {
+    if (styledFieldRef !== null && styledFieldRef !== void 0 && styledFieldRef.current && styledFieldRef.current.contains(e.target)) {
+      if (e.keyCode === 13) {
+        var matches = currentSearchResult === null || currentSearchResult === void 0 ? void 0 : currentSearchResult.filter(function (c) {
+          return c.value.toLowerCase() === value.toLowerCase();
+        });
+
+        if ((matches === null || matches === void 0 ? void 0 : matches.length) === 1
+        /*&& onSelect*/
+        ) {
+          addChip(matches[0].value); //onSelect(chips);
+        } else if (e.target.value === (suggestion === null || suggestion === void 0 ? void 0 : suggestion.label)) {
+          addChip(e.target.value);
+        }
+
+        setDropdownIsOpen(!dropdownIsOpen);
+
+        if ((matches === null || matches === void 0 ? void 0 : matches.length) === 0) {
+          setValue('');
+        }
+      } else if (e.keyCode === 40) {
+        setDropdownIsOpen(!dropdownIsOpen);
+      }
+    }
+  };
+
+  var handleClickOutside = function handleClickOutside(e) {
+    if (styledFieldRef !== null && styledFieldRef !== void 0 && styledFieldRef.current && !styledFieldRef.current.contains(e.target)) {
+      if (dropdownIsOpen) {
+        setDropdownIsOpen(false);
+
+        if (!givenList.find(function (e) {
+          return e.value === value;
+        })) {
+          setValue('');
+        }
+      }
+    }
+  };
+
+  React.useEffect(function () {
+    document.addEventListener('keypress', handleKeyPress);
+    document.addEventListener('click', handleClickOutside);
+    return function () {
+      document.removeEventListener('keypress', handleKeyPress);
+      document.removeEventListener('click', handleClickOutside);
+    };
+  });
+  /**
+   * Return Chip Input component.
+   */
+
+  var dropdownItems = [];
+  if (currentSearchResult) dropdownItems = currentSearchResult.map(function (x) {
+    return {
+      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
+  }].concat(_toConsumableArray(dropdownItems));
+  return /*#__PURE__*/_jsxs(Wrapper, {
+    children: [/*#__PURE__*/_jsxs(StyledChipInputContainer, {
+      id: inputId,
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        setDropdownIsOpen(true);
+        chipInput.current.focus();
+      },
+      className: validationType,
+      ref: styledFieldRef,
+      children: [/*#__PURE__*/_jsx(Search, {
+        size: "24px",
+        className: "SearchIcon"
+      }), chips === null || chips === void 0 ? void 0 : chips.map(function (chip, index) {
+        return /*#__PURE__*/_jsx(InputChip, {
+          icon: givenList.find(function (l) {
+            return l.value === chip;
+          }) ? 'User' : undefined,
+          size: Size.Medium,
+          variant: variants && variants !== null && variants !== void 0 && variants.length && variants[index] ? variants[index] : 'normal',
+          text: chip,
+          onRemove: function onRemove() {
+            return onRemoveChip(index);
+          },
+          onClick: function onClick() {
+            return onEditChip(chip, index);
+          }
+        }, "chip_".concat(index));
+      }), /*#__PURE__*/_jsx(ChipInput, {
+        type: "text",
+        onChange: function onChange(event) {
+          setValue(event.target.value);
+          setRestartFilter(false);
+          setDropdownIsOpen(true);
+
+          if (onInputChange) {
+            onInputChange(event.target.value || '');
+          }
+        },
+        onKeyDown: function onKeyDown(event) {
+          onAddChip(event);
+        },
+        placeholder: placeholder && (chips === null || chips === void 0 ? void 0 : chips.length) === 0 ? placeholder : '',
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          setDropdownIsOpen(true);
+        },
+        onFocus: function onFocus() {
+          setDropdownIsOpen(true);
+        },
+        ref: chipInput
+      }), loading ? /*#__PURE__*/_jsx(Loading, {
+        children: /*#__PURE__*/_jsx(LoadingIndicator, {
+          size: Size.Small,
+          color: COLORS.neutral_600
+        })
+      }) : null]
+    }), (!maxSelectedItems || maxSelectedItems && chips.length < maxSelectedItems) && /*#__PURE__*/_jsx(DropdownContent, {
+      customizationProps: {
+        action: function action() {},
+        pinTopItem: true,
+        itemsType: 'normal',
+        scrollable: true,
+        actionLabel: '',
+        multiSelect: false,
+        onValueUpdate: handleValueUpdate,
+        items: dropdownItems
+      },
+      focused: focused,
+      setFocused: setFocused,
+      hideOnClickOutside: false,
+      selectedValues: [],
+      messageOnNoResults: messageOnNoResults !== null && messageOnNoResults !== void 0 ? messageOnNoResults : '',
+      setSelectedValues: function setSelectedValues() {},
+      isOpen: dropdownIsOpen,
+      setIsOpen: setDropdownIsOpen,
+      filter: '',
+      isButton: false,
+      id: "".concat(inputId, "_dropdowncontent")
+    }), validationMessage && validationType === 'warning' ? /*#__PURE__*/_jsxs(WarningMessage, {
+      children: [/*#__PURE__*/_jsx(TechnicalWarning, {
+        size: "20px",
+        color: COLORS.critical_500
+      }), /*#__PURE__*/_jsx("span", {
+        children: validationMessage
+      })]
+    }) : validationType === 'error' && /*#__PURE__*/_jsxs(ErrorMessage, {
+      children: [/*#__PURE__*/_jsx(TechnicalWarning, {
+        size: "20px",
+        color: COLORS.critical_400
+      }), /*#__PURE__*/_jsx("span", {
+        children: 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/Dropdown/ChipDropdownInput.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Dropdown/ChipDropdownInput.tsx"],"names":["React","styled","InputChip","Search","TechnicalWarning","WarningMessage","ErrorMessage","COLORS","ChipInputContainer","Size","DropdownContent","LoadingIndicator","ComponentMStyling","ComponentTextStyle","Wrapper","div","StyledChipInputContainer","neutral_400","primary_100","critical_400","warning_400","primary_600","primary_800","primary_700","ChipInput","input","Regular","black","Loading","ChipDropdownInput","list","onInputChange","disableSorting","messageOnNoResults","values","inputId","variants","placeholder","validationType","validationMessage","onValueChange","suggestion","excludeIcon","loading","maxSelectedItems","useState","givenList","setGivenList","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","secondaryLabel","sort","o","includes","handleValueUpdate","focus","handleKeyPress","contains","target","matches","c","toLowerCase","handleClickOutside","document","addEventListener","removeEventListener","dropdownItems","x","displayLabel","noteLabel","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, scrollBarStyling } 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\n\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\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 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    let options = [...givenList];\r\n    if (!restartFilter && value !== '') {\r\n      options = options.filter((option) => option.label.toUpperCase().indexOf(value.toUpperCase()) !== -1 ||\r\n        (option.secondaryLabel && option.secondaryLabel?.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"}

package/dist/Dropdown/CommonStyling.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CommonStyling.cjs","names":["DropdownContainer","styled","div","props","isButton","minWidth","readOnly","disabled","margin","Z_INDEXES","focus","COLORS","primary_600","primary_800","lockedState","css","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","critical_400","placeholderStyling","ComponentMStyling","ComponentTextStyle","Italic","DropdownInputField","input","black","ellipsis","DropdownInputFieldStyles","ComponentSStyling","Regular","neutral_400","TooltipTrigger","ComponentXXSStyling","BREAKPOINTS","MEDIUM","ComponentXSStyling","isPlaceholder","undefined","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","CommonInteractionStyling","dropdown","focusStyles","DropdownContentButtonStyling","DropdownButtonTextContent","DropdownButtonTextIcon","DropdownButtonTextArrow","DropdownButtonTextStyles","DropdownButtonTextWrapper","primary_20","primary_700","primary_100"],"sources":["../../src/Dropdown/CommonStyling.tsx"],"sourcesContent":["import styled, {css} from 'styled-components';\nimport {CommonInteractionStyling} from '../common';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {\n  ComponentMStyling,\n  ComponentLStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles/typography';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport { TooltipTrigger, Tooltip } from '../Tooltips/TooltipStyles';\n\nexport const DropdownContainer = styled.div<{ isButton: boolean; readOnly?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\n  display: inline-block;\n\n  ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : 'margin-bottom: 4px;')}\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  &:focus-within {\n    z-index: ${Z_INDEXES.focus};\n  }\n\n  input:hover + div {\n    color: ${COLORS.primary_600};\n  }\n\n  input:active + div {\n    color: ${COLORS.primary_800};\n  }\n\n\n`;\n\nconst lockedState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n  color: ${COLORS.neutral_600};\n  pointer-events: none;\n  cursor: not-allowed;\n\n  input {\n    color: ${COLORS.neutral_600} !important;\n  }\n\n  .dropdown-arrow {\n    color: ${COLORS.neutral_300} !important;\n  }\n`;\n\nconst disabledState = css`\n  background-color: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n  color: ${COLORS.neutral_300};\n  pointer-events: none;\n  cursor: not-allowed;\n\n  .dropdown-arrow {\n    color: ${COLORS.neutral_300} !important;\n  }\n\n  input {\n    color: ${COLORS.neutral_300} !important;\n\n    ::placeholder {\n      color: ${COLORS.neutral_300} !important;\n    }\n  }\n`;\n\nconst activeValidationMessage = css`\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n`;\n\nconst placeholderStyling = css`\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const DropdownInputField = styled.input<{ellipsis?: boolean}>`\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ${COLORS.black} !important;\n  padding: 0;\n  flex-grow: 1;\n  display: flex;\n  justify-content: center;\n  overflow: hidden;\n  ${props => props.ellipsis ? 'text-overflow: ellipsis;' : ''}\n  \n  ::placeholder {\n    color: ${COLORS.neutral_600};\n    font-style: italic;\n  }\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n`;\n\nexport const DropdownInputFieldStyles = styled.div<{ disabled: boolean; readOnly: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string; minWidth?: string }>`\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\n  width: 100%;\n\n  background: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  position: relative;\n\n  input {\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  ${TooltipTrigger('hover')}\n\n  &::placeholder {\n    ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 16px;\n    height: 56px;\n\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 12px 16px;\n    height: 48px;\n\n    &::placeholder {\n      ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    height: 56px;\n    padding: 16px;\n\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  .dropdown-arrow {\n    pointer-events: none;\n    width: 24px;\n    height: 24px;\n    color: ${(props) => props.isPlaceholder ? COLORS.neutral_600 : undefined};\n  }\n\n  &:focus {\n    outline: 3px solid #ddd;\n  }\n\n  &:focus-within,\n  &.focus-visible-within {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &:hover:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_600};\n      }\n    }\n\n    .dropdown-arrow {\n      color: ${COLORS.primary_600};\n    }\n\n    cursor: pointer;\n  }\n\n  &:active:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_800};\n      }\n    }\n\n    .dropdown-arrow {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &.button {\n    ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ${COLORS.neutral_800};\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n\n  ${(props) => (props.disabled ? disabledState : '')}\n  ${(props) => (props.readOnly ? lockedState : '')}\n  ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n  ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n  ${CommonInteractionStyling};\n\n  &.focus-visible,\n  &.focus-visible-within {\n    z-index: ${Z_INDEXES.dropdown + 1} !important;\n    ${focusStyles}\n  }\n`;\n\nexport const DropdownContentButtonStyling = css`\n  min-width: 344px;\n`;\n\n\n\nexport const DropdownButtonTextContent = styled.div`\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: 64px;\n  min-height: 32px;\n  padding: 4px 8px;\n  border-radius: 4px;\n`;\n\nexport const DropdownButtonTextIcon = styled.div`\n  width: 24px;\n  height: 24px;\n`;\n\nexport const DropdownButtonTextArrow = styled.div`\n  width: 24px;\n  height: 24px;\n\n  svg {\n    pointer-events: none;\n  }\n`;\n\nexport const DropdownButtonTextStyles = styled.div`\n  flex: 1\n`;\n\nexport const DropdownButtonTextWrapper = styled.div`\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  cursor: pointer;\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n\n  .expanded {\n    color: ${COLORS.neutral_800};\n\n    ${DropdownButtonTextContent} {\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:hover:not(.disabled) {\n    ${DropdownButtonTextContent} {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n    }\n  }\n\n  &:active:not(.disabled) {\n    ${DropdownButtonTextContent} {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300};\n  }\n\n}`;\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AAQA;AACA;AAAoE;AAAA;AAAA;AAE7D,IAAMA,iBAAiB,GAAGC,yBAAM,CAACC,GAAG,yWAGvC,UAACC,KAAK;EAAA,OAAK,CAACA,KAAK,CAACC,QAAQ,KAAKD,KAAK,aAALA,KAAK,eAALA,KAAK,CAAEE,QAAQ,qCAA8BF,KAAK,CAACE,QAAQ,SAAM,gCAAgC,CAAC;AAAA,GACjI,UAACF,KAAK;EAAA,OAAMA,KAAK,CAACG,QAAQ,IAAIH,KAAK,CAACI,QAAQ,GAAG,sBAAsB,GAAG,EAAE;AAAA,CAAC,EAC3E,UAACJ,KAAK;EAAA,OAAMA,KAAK,CAACK,MAAM,qBAAcL,KAAK,CAACK,MAAM,SAAM,qBAAqB;AAAA,CAAC,EAUnEC,mBAAS,CAACC,KAAK,EAIjBC,cAAM,CAACC,WAAW,EAIlBD,cAAM,CAACE,WAAW,CAI9B;AAAC;AAEF,IAAMC,WAAW,OAAGC,qBAAG,wUACDJ,cAAM,CAACK,WAAW,EACFL,cAAM,CAACM,WAAW,EAC7CN,cAAM,CAACO,WAAW,EAKhBP,cAAM,CAACO,WAAW,EAIlBP,cAAM,CAACM,WAAW,CAE9B;AAED,IAAME,aAAa,OAAGJ,qBAAG,qYACHJ,cAAM,CAACS,KAAK,EACIT,cAAM,CAACK,WAAW,EAC7CL,cAAM,CAACM,WAAW,EAKhBN,cAAM,CAACM,WAAW,EAIlBN,cAAM,CAACM,WAAW,EAGhBN,cAAM,CAACM,WAAW,CAGhC;AAED,IAAMI,uBAAuB,OAAGN,qBAAG,oIACGJ,cAAM,CAACW,YAAY,CACxD;AAED,IAAMC,kBAAkB,OAAGR,qBAAG,iGAC1B,IAAAS,6BAAiB,EAACC,0BAAkB,CAACC,MAAM,EAAEf,cAAM,CAACO,WAAW,CAAC,CACnE;AAEM,IAAMS,kBAAkB,GAAG1B,yBAAM,CAAC2B,KAAK,gjBAKnCjB,cAAM,CAACkB,KAAK,EAMnB,UAAA1B,KAAK;EAAA,OAAIA,KAAK,CAAC2B,QAAQ,GAAG,0BAA0B,GAAG,EAAE;AAAA,GAGhDnB,cAAM,CAACO,WAAW,CAU9B;AAAC;AAEK,IAAMa,wBAAwB,GAAG9B,yBAAM,CAACC,GAAG,k+DAC9C,IAAA8B,6BAAiB,EAACP,0BAAkB,CAACQ,OAAO,EAAE,SAAS,CAAC,EAI7C,UAAC9B,KAAK;EAAA,OAAMA,KAAK,CAACE,QAAQ,aAAMF,KAAK,CAACE,QAAQ,IAAK,OAAO;AAAA,CAAC,EAG1DM,cAAM,CAACS,KAAK,EACUT,cAAM,CAACuB,WAAW,EAgBpD,IAAAC,6BAAc,EAAC,OAAO,CAAC,EAGrB,IAAAC,+BAAmB,EAACX,0BAAkB,CAACC,MAAM,EAAEf,cAAM,CAACO,WAAW,CAAC,EAGpEmB,mBAAW,CAACC,MAAM,EAChB,IAAAd,6BAAiB,EAACC,0BAAkB,CAACQ,OAAO,EAAE,SAAS,CAAC,EAKtD,IAAAM,8BAAkB,EAACd,0BAAkB,CAACC,MAAM,EAAEf,cAAM,CAACO,WAAW,CAAC,EAKnE,IAAAc,6BAAiB,EAACP,0BAAkB,CAACQ,OAAO,EAAE,SAAS,CAAC,EAKtD,IAAAG,+BAAmB,EAACX,0BAAkB,CAACC,MAAM,EAAEf,cAAM,CAACO,WAAW,CAAC,EAKpE,IAAAM,6BAAiB,EAACC,0BAAkB,CAACQ,OAAO,EAAE,SAAS,CAAC,EAKtD,IAAAM,8BAAkB,EAACd,0BAAkB,CAACC,MAAM,EAAEf,cAAM,CAACO,WAAW,CAAC,EAQ5D,UAACf,KAAK;EAAA,OAAKA,KAAK,CAACqC,aAAa,GAAG7B,cAAM,CAACO,WAAW,GAAGuB,SAAS;AAAA,GASpC9B,cAAM,CAACE,WAAW,EAIlBF,cAAM,CAAC+B,WAAW,EAIzC/B,cAAM,CAACC,WAAW,EAKpBD,cAAM,CAACC,WAAW,EAOOD,cAAM,CAACgC,WAAW,EAIzChC,cAAM,CAACE,WAAW,EAKpBF,cAAM,CAACE,WAAW,EAK3B,UAACV,KAAK;EAAA,OAAK,IAAA6B,6BAAiB,EAACP,0BAAkB,CAACmB,IAAI,EAAEzC,KAAK,CAACI,QAAQ,GAAGI,cAAM,CAACM,WAAW,GAAGN,cAAM,CAACO,WAAW,CAAC;AAAA,GAYtGP,cAAM,CAACkC,WAAW,EACblC,cAAM,CAACmC,UAAU,EAKjC,UAAC3C,KAAK;EAAA,OAAMA,KAAK,CAACI,QAAQ,GAAGY,aAAa,GAAG,EAAE;AAAA,CAAC,EAChD,UAAChB,KAAK;EAAA,OAAMA,KAAK,CAACG,QAAQ,GAAGQ,WAAW,GAAG,EAAE;AAAA,CAAC,EAC9C,UAACX,KAAK;EAAA,OAAMA,KAAK,CAAC4C,qBAAqB,GAAG1B,uBAAuB,GAAG,EAAE;AAAA,CAAC,EACvE,UAAClB,KAAK;EAAA,OAAMA,KAAK,CAACqC,aAAa,GAAGjB,kBAAkB,GAAG,EAAE;AAAA,CAAC,EAE1DyB,gCAAwB,EAIbvC,mBAAS,CAACwC,QAAQ,GAAG,CAAC,EAC/BC,mBAAW,CAEhB;AAAC;AAEK,IAAMC,4BAA4B,OAAGpC,qBAAG,6GAE9C;AAAC;AAIK,IAAMqC,yBAAyB,GAAGnD,yBAAM,CAACC,GAAG,8PASlD;AAAC;AAEK,IAAMmD,sBAAsB,GAAGpD,yBAAM,CAACC,GAAG,0HAG/C;AAAC;AAEK,IAAMoD,uBAAuB,GAAGrD,yBAAM,CAACC,GAAG,qKAOhD;AAAC;AAEK,IAAMqD,wBAAwB,GAAGtD,yBAAM,CAACC,GAAG,oGAEjD;AAAC;AAEK,IAAMsD,yBAAyB,GAAGvD,yBAAM,CAACC,GAAG,snBAQ/C,IAAA8B,6BAAiB,EAACP,0BAAkB,CAACmB,IAAI,EAAEjC,cAAM,CAACO,WAAW,CAAC,EAGrDP,cAAM,CAACkC,WAAW,EAEzBO,yBAAyB,EACXzC,cAAM,CAACmC,UAAU,EAK/BI,mBAAW,EAIXE,yBAAyB,EACLzC,cAAM,CAAC8C,UAAU,EAC5B9C,cAAM,CAAC+C,WAAW,EAK3BN,yBAAyB,EACLzC,cAAM,CAACgD,WAAW,EAC7BhD,cAAM,CAACE,WAAW,EAMpBF,cAAM,CAACM,WAAW,CAG7B;AAAC"}
+{"version":3,"file":"CommonStyling.cjs","names":["DropdownContainer","styled","div","props","isButton","minWidth","readOnly","disabled","margin","Z_INDEXES","focus","COLORS","primary_600","primary_800","lockedState","css","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","critical_400","placeholderStyling","ComponentMStyling","ComponentTextStyle","Italic","DropdownInputField","input","black","ellipsis","DropdownInputFieldStyles","ComponentSStyling","Regular","neutral_400","TooltipTrigger","ComponentXXSStyling","BREAKPOINTS","MEDIUM","ComponentXSStyling","isPlaceholder","undefined","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","CommonInteractionStyling","dropdown","focusStyles","DropdownContentButtonStyling","DropdownButtonTextContent","DropdownButtonTextIcon","DropdownButtonTextArrow","DropdownButtonTextStyles","DropdownButtonTextWrapper","primary_20","primary_700","primary_100"],"sources":["../../src/Dropdown/CommonStyling.tsx"],"sourcesContent":["import styled, {css} from 'styled-components';\r\nimport {CommonInteractionStyling} from '../common';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {\r\n  ComponentMStyling,\r\n  ComponentLStyling,\r\n  ComponentSStyling,\r\n  ComponentXSStyling,\r\n  ComponentXXSStyling\r\n} from '../styles/typography';\r\nimport {Size} from '../types';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\nimport { TooltipTrigger, Tooltip } from '../Tooltips/TooltipStyles';\r\n\r\nexport const DropdownContainer = styled.div<{ isButton: boolean; readOnly?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\r\n  display: inline-block;\r\n\r\n  ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\r\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')}\r\n  ${(props) => (props.margin ? `margin: ${props.margin};` : 'margin-bottom: 4px;')}\r\n  .show {\r\n    display: block;\r\n  }\r\n\r\n  .value {\r\n    flex-grow: 1;\r\n  }\r\n\r\n  &:focus-within {\r\n    z-index: ${Z_INDEXES.focus};\r\n  }\r\n\r\n  input:hover + div {\r\n    color: ${COLORS.primary_600};\r\n  }\r\n\r\n  input:active + div {\r\n    color: ${COLORS.primary_800};\r\n  }\r\n\r\n\r\n`;\r\n\r\nconst lockedState = css`\r\n  background-color: ${COLORS.neutral_100};\r\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\r\n  color: ${COLORS.neutral_600};\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n\r\n  input {\r\n    color: ${COLORS.neutral_600} !important;\r\n  }\r\n\r\n  .dropdown-arrow {\r\n    color: ${COLORS.neutral_300} !important;\r\n  }\r\n`;\r\n\r\nconst disabledState = css`\r\n  background-color: ${COLORS.white};\r\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\r\n  color: ${COLORS.neutral_300};\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n\r\n  .dropdown-arrow {\r\n    color: ${COLORS.neutral_300} !important;\r\n  }\r\n\r\n  input {\r\n    color: ${COLORS.neutral_300} !important;\r\n\r\n    ::placeholder {\r\n      color: ${COLORS.neutral_300} !important;\r\n    }\r\n  }\r\n`;\r\n\r\nconst activeValidationMessage = css`\r\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\r\n`;\r\n\r\nconst placeholderStyling = css`\r\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n`;\r\n\r\nexport const DropdownInputField = styled.input<{ellipsis?: boolean}>`\r\n  border: none;\r\n  outline: none;\r\n  background-color: inherit;\r\n  cursor: pointer;\r\n  color: ${COLORS.black} !important;\r\n  padding: 0;\r\n  flex-grow: 1;\r\n  display: flex;\r\n  justify-content: center;\r\n  overflow: hidden;\r\n  ${props => props.ellipsis ? 'text-overflow: ellipsis;' : ''}\r\n  \r\n  ::placeholder {\r\n    color: ${COLORS.neutral_600};\r\n    font-style: italic;\r\n  }\r\n\r\n  ::-webkit-search-decoration,\r\n  ::-webkit-search-cancel-button,\r\n  ::-webkit-search-results-button,\r\n  ::-webkit-search-results-decoration {\r\n    -webkit-appearance: none;\r\n  }\r\n`;\r\n\r\nexport const DropdownInputFieldStyles = styled.div<{ disabled: boolean; readOnly: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string; minWidth?: string }>`\r\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\r\n\r\n  padding: 12px 16px;\r\n  height: 48px;\r\n  min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\r\n  width: 100%;\r\n\r\n  background: ${COLORS.white};\r\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\r\n  box-sizing: border-box;\r\n  border-radius: 4px;\r\n  cursor: pointer;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 4px;\r\n  position: relative;\r\n\r\n  input {\r\n    font-size: inherit;\r\n    line-height: inherit;\r\n    color: inherit;\r\n  }\r\n\r\n  ${TooltipTrigger('hover')}\r\n\r\n  &::placeholder {\r\n    ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\r\n    padding: 16px;\r\n    height: 56px;\r\n\r\n    &::placeholder {\r\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\r\n    padding: 12px 16px;\r\n    height: 48px;\r\n\r\n    &::placeholder {\r\n      ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\r\n    height: 56px;\r\n    padding: 16px;\r\n\r\n    &::placeholder {\r\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n    }\r\n  }\r\n\r\n  .dropdown-arrow {\r\n    pointer-events: none;\r\n    width: 24px;\r\n    height: 24px;\r\n    color: ${(props) => props.isPlaceholder ? COLORS.neutral_600 : undefined};\r\n  }\r\n\r\n  &:focus {\r\n    outline: 3px solid #ddd;\r\n  }\r\n\r\n  &:focus-within,\r\n  &.focus-visible-within {\r\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\r\n  }\r\n\r\n  &:hover:not(.action-within) {\r\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\r\n\r\n    input {\r\n      ::placeholder {\r\n        color: ${COLORS.primary_600};\r\n      }\r\n    }\r\n\r\n    .dropdown-arrow {\r\n      color: ${COLORS.primary_600};\r\n    }\r\n\r\n    cursor: pointer;\r\n  }\r\n\r\n  &:active:not(.action-within) {\r\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\r\n\r\n    input {\r\n      ::placeholder {\r\n        color: ${COLORS.primary_800};\r\n      }\r\n    }\r\n\r\n    .dropdown-arrow {\r\n      color: ${COLORS.primary_800};\r\n    }\r\n  }\r\n\r\n  &.button {\r\n    ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\r\n\r\n    box-sizing: border-box;\r\n    height: 32px;\r\n    padding: 0 8px;\r\n    width: initial;\r\n    min-width: initial;\r\n    border: none !important;\r\n    box-shadow: none;\r\n    border-radius: 4px;\r\n\r\n    &.expanded {\r\n      color: ${COLORS.neutral_800};\r\n      background: ${COLORS.neutral_20};\r\n    }\r\n  }\r\n\r\n\r\n  ${(props) => (props.disabled ? disabledState : '')}\r\n  ${(props) => (props.readOnly ? lockedState : '')}\r\n  ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\r\n  ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\r\n\r\n  ${CommonInteractionStyling};\r\n\r\n  &.focus-visible,\r\n  &.focus-visible-within {\r\n    z-index: ${Z_INDEXES.dropdown + 1} !important;\r\n    ${focusStyles}\r\n  }\r\n`;\r\n\r\nexport const DropdownContentButtonStyling = css`\r\n  min-width: 344px;\r\n`;\r\n\r\n\r\n\r\nexport const DropdownButtonTextContent = styled.div`\r\n  display: flex;\r\n  gap: 4px;\r\n  align-items: center;\r\n  box-sizing: border-box;\r\n  min-width: 64px;\r\n  min-height: 32px;\r\n  padding: 4px 8px;\r\n  border-radius: 4px;\r\n`;\r\n\r\nexport const DropdownButtonTextIcon = styled.div`\r\n  width: 24px;\r\n  height: 24px;\r\n`;\r\n\r\nexport const DropdownButtonTextArrow = styled.div`\r\n  width: 24px;\r\n  height: 24px;\r\n\r\n  svg {\r\n    pointer-events: none;\r\n  }\r\n`;\r\n\r\nexport const DropdownButtonTextStyles = styled.div`\r\n  flex: 1\r\n`;\r\n\r\nexport const DropdownButtonTextWrapper = styled.div`\r\n  box-sizing: border-box;\r\n  min-height: 48px;\r\n  display: flex;\r\n  align-items: center;\r\n  width: fit-content;\r\n  cursor: pointer;\r\n\r\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\r\n\r\n  .expanded {\r\n    color: ${COLORS.neutral_800};\r\n\r\n    ${DropdownButtonTextContent} {\r\n      background: ${COLORS.neutral_20};\r\n    }\r\n  }\r\n\r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover:not(.disabled) {\r\n    ${DropdownButtonTextContent} {\r\n      background-color: ${COLORS.primary_20};\r\n      color: ${COLORS.primary_700};\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled) {\r\n    ${DropdownButtonTextContent} {\r\n      background-color: ${COLORS.primary_100};\r\n      color: ${COLORS.primary_800};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n    color: ${COLORS.neutral_300};\r\n  }\r\n\r\n}`;\r\n"],"mappings":"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"}