@laerdal/life-react-components 1.4.1-dev.2 → 1.4.1-dev.4.full

package/dist/esm/Chips/ChoiceChips.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Chips/ChoiceChips.tsx"],"names":["React","FilterChipContainer","ChoiceChips","selected","variant","disabled","onClick","values","selectedChip","setSelectedChip","useState","useEffect","onSelectChip","value","handleKeyDown","e","keyCode","map","size","label"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAASC,mBAAT,QAAoC,cAApC;AAEA;AACA;AACA;;AAGA,MAAMC,WAAqD,GAAG,CAAC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA,OAAZ;AAAqBC,EAAAA,QAArB;AAA+BC,EAAAA,OAA/B;AAAwCC,EAAAA;AAAxC,CAAD,KAAuE;AACnI;AACF;AACA;AACE,QAAM,CAACC,YAAD,EAAeC,eAAf,IAAkCT,KAAK,CAACU,QAAN,CAAuB,EAAvB,CAAxC;AAEA;AACF;AACA;;AACEV,EAAAA,KAAK,CAACW,SAAN,CAAgB,MAAM;AACpBF,IAAAA,eAAe,CAACN,QAAD,CAAf;AACD,GAFD,EAEG,CAACA,QAAD,CAFH;AAIA;AACF;AACA;AACA;;AACE,QAAMS,YAAY,GAAIC,KAAD,IAAsB;AACzC;AACAJ,IAAAA,eAAe,CAACI,KAAK,CAACA,KAAP,CAAf,CAFyC,CAIzC;;AACAP,IAAAA,OAAO,CAACO,KAAD,CAAP;AACD,GAND;;AAQA,QAAMC,aAAa,GAAG,CAACC,CAAD,EAASF,KAAT,KAA8B;AAClD,QAAIE,CAAC,CAACC,OAAF,KAAc,EAAlB,EAAsB;AACpBJ,MAAAA,YAAY,CAACC,KAAD,CAAZ;AACD;AACF,GAJD;AAMA;AACF;AACA;;;AACE,sBACE,0CACGN,MAAM,CAACU,GAAP,CAAYJ,KAAD,iBACV,oBAAC,mBAAD;AACE,IAAA,GAAG,EAAEA,KAAK,CAACA,KADb;AAEE,IAAA,QAAQ,EAAER,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;AAGE,IAAA,SAAS,EAAG,GAAEQ,KAAK,CAACK,IAAK,IAAGb,QAAQ,GAAG,UAAH,GAAgBG,YAAY,KAAKK,KAAK,CAACA,KAAvB,GAA+B,UAA/B,GAA4CT,OAAQ,EAH1G;AAIE,IAAA,OAAO,EAAE,MAAMQ,YAAY,CAACC,KAAD,CAJ7B;AAKE,IAAA,SAAS,EAAEE,CAAC,IAAID,aAAa,CAACC,CAAD,EAAIF,KAAJ;AAL/B,KAMGA,KAAK,CAACM,KANT,CADD,CADH,CADF;AAcD,CAhDD;;AAkDA,eAAejB,WAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { FilterChipContainer } from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport { ChipValue, ChoiceChipProps } from './ChipTypes';\n\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({ selected, variant, disabled, onClick, values }: ChoiceChipProps) => {\n  /**\n   * Globally used variables within the component.\n   */\n  const [selectedChip, setSelectedChip] = React.useState<string>('');\n\n  /**\n   * Set the selected value for the chip.\n   */\n  React.useEffect(() => {\n    setSelectedChip(selected);\n  }, [selected]);\n\n  /**\n   * Sets selected chip and fires an event to parent component.\n   * @param value - Chip which was selected.\n   */\n  const onSelectChip = (value: ChipValue) => {\n    // Update selected chip\n    setSelectedChip(value.value);\n\n    // Fire the event\n    onClick(value);\n  };\n\n  const handleKeyDown = (e: any, value: ChipValue) => {\n    if (e.keyCode === 13) {\n      onSelectChip(value);\n    }\n  };\n\n  /**\n   * Return Choice Chip component.\n   */\n  return (\n    <>\n      {values.map((value: ChipValue) => (\n        <FilterChipContainer\n          key={value.value}\n          tabIndex={disabled ? -1 : 0}\n          className={`${value.size} ${disabled ? 'disabled' : selectedChip === value.value ? 'selected' : variant}`}\n          onClick={() => onSelectChip(value)}\n          onKeyDown={e => handleKeyDown(e, value)}>\n          {value.label}\n        </FilterChipContainer>\n      ))}\n    </>\n  );\n};\n\nexport default ChoiceChips;\n"],"file":"ChoiceChips.js"}

package/dist/esm/Chips/FilterChip.js

@@ -0,0 +1,60 @@
+/**
+ * Import React libraries.
+ */
+import * as React from 'react';
+import { Size } from '../types';
+/**
+ * Import custom components.
+ */
+
+import { SystemIcons as icons } from '../icons/index';
+/**
+ * Import custom styles.
+ */
+
+import { FilterChipContainer } from './ChipStyles';
+/**
+ * Import custom types.
+ */
+
+const FilterChip = ({
+  selected,
+  text,
+  variant,
+  size,
+  disabled,
+  onClick
+}) => {
+  /**
+   * Retrieves icon size based on the chip size.
+   * @returns A string indicating the icon size.
+   */
+  const getIconSize = () => {
+    let iconSize; // Calculate correct icon size
+
+    if (size === Size.Small) {
+      iconSize = '16px';
+    } else if (size === Size.Medium) {
+      iconSize = '20px';
+    } else {
+      iconSize = '24px';
+    }
+
+    return iconSize;
+  };
+  /**
+   * Return Filter Chip component.
+   */
+
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FilterChipContainer, {
+    className: `${size} ${disabled ? 'disabled' : selected ? 'selected icon-chip' : variant}`,
+    onClick: () => onClick()
+  }, selected && icons.CheckComplete({
+    size: getIconSize(),
+    className: 'icon'
+  }), text));
+};
+
+export default FilterChip;
+//# sourceMappingURL=FilterChip.js.map

package/dist/esm/Chips/FilterChip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Chips/FilterChip.tsx"],"names":["React","Size","SystemIcons","icons","FilterChipContainer","FilterChip","selected","text","variant","size","disabled","onClick","getIconSize","iconSize","Small","Medium","CheckComplete","className"],"mappings":"AAAA;AACA;AACA;AACC,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACD,SAASC,IAAT,QAAqB,UAArB;AAEC;AACD;AACA;;AACC,SAAQC,WAAW,IAAIC,KAAvB,QAAmC,gBAAnC;AAEA;AACD;AACA;;AACC,SAASC,mBAAT,QAAoC,cAApC;AAEA;AACD;AACA;;AAGC,MAAMC,UAAoD,GAAG,CAAC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA,IAAZ;AAAkBC,EAAAA,OAAlB;AAA2BC,EAAAA,IAA3B;AAAiCC,EAAAA,QAAjC;AAA2CC,EAAAA;AAA3C,CAAD,KAA2E;AACtI;AACH;AACA;AACA;AACG,QAAMC,WAAW,GAAG,MAAc;AAChC,QAAIC,QAAJ,CADgC,CAGhC;;AACA,QAAIJ,IAAI,KAAKR,IAAI,CAACa,KAAlB,EAAyB;AACvBD,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFD,MAEO,IAAIJ,IAAI,KAAKR,IAAI,CAACc,MAAlB,EAA0B;AAC/BF,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFM,MAEA;AACLA,MAAAA,QAAQ,GAAG,MAAX;AACD;;AAED,WAAOA,QAAP;AACD,GAbD;AAeA;AACH;AACA;;;AACG,sBACE,uDACE,oBAAC,mBAAD;AAAqB,IAAA,SAAS,EAAG,GAAEJ,IAAK,IAAGC,QAAQ,GAAG,UAAH,GAAgBJ,QAAQ,GAAG,oBAAH,GAA0BE,OAAQ,EAA7G;AAAgH,IAAA,OAAO,EAAE,MAAMG,OAAO;AAAtI,KAEGL,QAAQ,IAAIH,KAAK,CAACa,aAAN,CAAoB;AAAEP,IAAAA,IAAI,EAAEG,WAAW,EAAnB;AAAuBK,IAAAA,SAAS,EAAE;AAAlC,GAApB,CAFf,EAKGV,IALH,CADF,CADF;AAWD,CAlCD;;AAoCA,eAAeF,UAAf","sourcesContent":["/**\n * Import React libraries.\n */\n import * as React from 'react';\nimport { Size } from '../types';\n\n /**\n  * Import custom components.\n  */\n import {SystemIcons as icons} from '../icons/index';\n \n /**\n  * Import custom styles.\n  */\n import { FilterChipContainer } from './ChipStyles';\n \n /**\n  * Import custom types.\n  */\n import { FilterChipProps } from './ChipTypes';\n \n const FilterChip: React.FunctionComponent<FilterChipProps> = ({ selected, text, variant, size, disabled, onClick }: FilterChipProps) => {\n   /**\n    * Retrieves icon size based on the chip size.\n    * @returns A string indicating the icon size.\n    */\n   const getIconSize = (): string => {\n     let iconSize: string;\n \n     // Calculate correct icon size\n     if (size === Size.Small) {\n       iconSize = '16px';\n     } else if (size === Size.Medium) {\n       iconSize = '20px';\n     } else {\n       iconSize = '24px';\n     }\n \n     return iconSize;\n   }\n \n   /**\n    * Return Filter Chip component.\n    */\n   return (\n     <>\n       <FilterChipContainer className={`${size} ${disabled ? 'disabled' : selected ? 'selected icon-chip' : variant}`} onClick={() => onClick()}>\n         { /* Let's render icon if the chip is selected */ }\n         {selected && icons.CheckComplete({ size: getIconSize(), className: 'icon' })}\n         \n         { /* Let's render text */ }\n         {text}\n       </FilterChipContainer>\n     </>\n   );\n };\n \n export default FilterChip;\n "],"file":"FilterChip.js"}

package/dist/esm/Chips/InputChip.js

@@ -0,0 +1,84 @@
+/**
+ * Import React libraries.
+ */
+import * as React from 'react';
+/**
+ * Import custom components.
+ */
+
+import { SystemIcons as icons } from '../icons/index';
+import { IconButton } from '../Button/index';
+import { Size } from '../types';
+/**
+ * Import custom styles.
+ */
+
+import { ChipContainer } from './ChipStyles';
+/**
+ * Import custom types.
+ */
+
+const InputChip = ({
+  icon,
+  text,
+  variant,
+  size,
+  disabled,
+  onClick,
+  onRemove
+}) => {
+  /**
+   * Retrieves icon size based on the chip size.
+   * @returns A string indicating the icon size.
+   */
+  const getIconSize = () => {
+    let iconSize; // Calculate correct icon size
+
+    if (size === Size.Small) {
+      iconSize = '16px';
+    } else if (size === Size.Medium) {
+      iconSize = '20px';
+    } else {
+      iconSize = '24px';
+    }
+
+    return iconSize;
+  };
+  /**
+   * Calls onRemove action when remove button is clicked.
+   * @param event - Event handler from the button click.
+   */
+
+
+  const onRemoveClick = event => {
+    if (event) {
+      event.stopPropagation();
+    }
+
+    onRemove();
+  };
+  /**
+   * Return Input Chip component.
+   */
+
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ChipContainer, {
+    className: `${size} button-chip ${disabled ? 'disabled' : variant} ${icon && 'icon-chip'}`,
+    onClick: () => onClick()
+  }, variant !== 'error' && icon && icons[icon]({
+    size: getIconSize(),
+    className: 'icon'
+  }), text, /*#__PURE__*/React.createElement(IconButton, {
+    variant: "secondary",
+    shape: "circular",
+    useTransparentBackground: true,
+    action: event => onRemoveClick(event),
+    disabled: disabled
+  }, icons.Close({
+    size: getIconSize(),
+    className: 'remove'
+  }))));
+};
+
+export default InputChip;
+//# sourceMappingURL=InputChip.js.map

package/dist/esm/Chips/InputChip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Chips/InputChip.tsx"],"names":["React","SystemIcons","icons","IconButton","Size","ChipContainer","InputChip","icon","text","variant","size","disabled","onClick","onRemove","getIconSize","iconSize","Small","Medium","onRemoveClick","event","stopPropagation","className","Close"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAASC,WAAW,IAAIC,KAAxB,QAAqC,gBAArC;AACA,SAASC,UAAT,QAA2B,iBAA3B;AACA,SAASC,IAAT,QAAqB,UAArB;AAEA;AACA;AACA;;AACA,SAASC,aAAT,QAA8B,cAA9B;AAEA;AACA;AACA;;AAGA,MAAMC,SAAkD,GAAG,CAAC;AAAEC,EAAAA,IAAF;AAAQC,EAAAA,IAAR;AAAcC,EAAAA,OAAd;AAAuBC,EAAAA,IAAvB;AAA6BC,EAAAA,QAA7B;AAAuCC,EAAAA,OAAvC;AAAgDC,EAAAA;AAAhD,CAAD,KAAgF;AACzI;AACF;AACA;AACA;AACE,QAAMC,WAAW,GAAG,MAAc;AAChC,QAAIC,QAAJ,CADgC,CAGhC;;AACA,QAAIL,IAAI,KAAKN,IAAI,CAACY,KAAlB,EAAyB;AACvBD,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFD,MAEO,IAAIL,IAAI,KAAKN,IAAI,CAACa,MAAlB,EAA0B;AAC/BF,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFM,MAEA;AACLA,MAAAA,QAAQ,GAAG,MAAX;AACD;;AAED,WAAOA,QAAP;AACD,GAbD;AAeA;AACF;AACA;AACA;;;AACE,QAAMG,aAAa,GAAIC,KAAD,IAA4D;AAChF,QAAIA,KAAJ,EAAW;AACTA,MAAAA,KAAK,CAACC,eAAN;AACD;;AAEDP,IAAAA,QAAQ;AACT,GAND;AAQA;AACF;AACA;;;AACE,sBACE,uDACE,oBAAC,aAAD;AAAe,IAAA,SAAS,EAAG,GAAEH,IAAK,gBAAeC,QAAQ,GAAG,UAAH,GAAgBF,OAAQ,IAAGF,IAAI,IAAI,WAAY,EAAxG;AAA2G,IAAA,OAAO,EAAE,MAAMK,OAAO;AAAjI,KAEGH,OAAO,KAAK,OAAZ,IAAuBF,IAAvB,IAA+BL,KAAK,CAACK,IAAD,CAAL,CAAY;AAAEG,IAAAA,IAAI,EAAEI,WAAW,EAAnB;AAAuBO,IAAAA,SAAS,EAAE;AAAlC,GAAZ,CAFlC,EAKGb,IALH,eAQE,oBAAC,UAAD;AACE,IAAA,OAAO,EAAC,WADV;AAEE,IAAA,KAAK,EAAC,UAFR;AAGE,IAAA,wBAAwB,MAH1B;AAIE,IAAA,MAAM,EAAGW,KAAD,IAA4DD,aAAa,CAACC,KAAD,CAJnF;AAKE,IAAA,QAAQ,EAAER;AALZ,KAMGT,KAAK,CAACoB,KAAN,CAAY;AAAEZ,IAAAA,IAAI,EAAEI,WAAW,EAAnB;AAAuBO,IAAAA,SAAS,EAAE;AAAlC,GAAZ,CANH,CARF,CADF,CADF;AAqBD,CAxDD;;AA0DA,eAAef,SAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { SystemIcons as icons } from '../icons/index';\nimport { IconButton } from '../Button/index';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { ChipContainer } from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport { InputChipProps } from './ChipTypes';\n\nconst InputChip: React.FunctionComponent<InputChipProps> = ({ icon, text, variant, size, disabled, onClick, onRemove }: InputChipProps) => {\n  /**\n   * Retrieves icon size based on the chip size.\n   * @returns A string indicating the icon size.\n   */\n  const getIconSize = (): string => {\n    let iconSize: string;\n\n    // Calculate correct icon size\n    if (size === Size.Small) {\n      iconSize = '16px';\n    } else if (size === Size.Medium) {\n      iconSize = '20px';\n    } else {\n      iconSize = '24px';\n    }\n\n    return iconSize;\n  };\n\n  /**\n   * Calls onRemove action when remove button is clicked.\n   * @param event - Event handler from the button click.\n   */\n  const onRemoveClick = (event: React.MouseEvent<HTMLButtonElement> | undefined) => {\n    if (event) {\n      event.stopPropagation();\n    }\n\n    onRemove();\n  };\n\n  /**\n   * Return Input Chip component.\n   */\n  return (\n    <>\n      <ChipContainer className={`${size} button-chip ${disabled ? 'disabled' : variant} ${icon && 'icon-chip'}`} onClick={() => onClick()}>\n        {/* Let's render icon if it is passed */}\n        {variant !== 'error' && icon && icons[icon]({ size: getIconSize(), className: 'icon' })}\n\n        {/* Let's render text */}\n        {text}\n\n        {/* Let's render clear icon */}\n        <IconButton\n          variant=\"secondary\"\n          shape=\"circular\"\n          useTransparentBackground\n          action={(event: React.MouseEvent<HTMLButtonElement> | undefined) => onRemoveClick(event)}\n          disabled={disabled}>\n          {icons.Close({ size: getIconSize(), className: 'remove' })}\n        </IconButton>\n      </ChipContainer>\n    </>\n  );\n};\n\nexport default InputChip;\n"],"file":"InputChip.js"}

package/dist/esm/Chips/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Chips/index.ts"],"names":["default","InputChip","FilterChip","ActionChip","ChipInput","ChoiceChips"],"mappings":"AAAA,SAASA,OAAO,IAAIC,SAApB,QAAqC,aAArC;AACA,SAASD,OAAO,IAAIE,UAApB,QAAsC,cAAtC;AACA,SAASF,OAAO,IAAIG,UAApB,QAAsC,cAAtC;AACA,SAASH,OAAO,IAAII,SAApB,QAAqC,aAArC;AACA,SAASJ,OAAO,IAAIK,WAApB,QAAuC,eAAvC","sourcesContent":["export { default as InputChip } from './InputChip';\nexport { default as FilterChip } from './FilterChip';\nexport { default as ActionChip } from './ActionChip';\nexport { default as ChipInput } from './ChipInput';\nexport { default as ChoiceChips } from './ChoiceChips';"],"file":"index.js"}

package/dist/esm/Dropdown/BasicDropdown.js

@@ -0,0 +1,219 @@
+import _pt from "prop-types";
+import * as React from 'react';
+import { COLORS } from '../styles';
+import { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';
+import { LoadingIndicator } from '../LoadingIndicator';
+import { Dropdown, StyledField, InputField } from './CommonStyling';
+import DropdownContent from './DropdownContent';
+import { AutofilledMessage, WarningMessage } from '../InputFields/styling';
+import { Size } from '../types';
+const MAX_MENU_HEIGHT = 240;
+const AVG_OPTION_HEIGHT = 48;
+
+const BasicDropdown = ({
+  id,
+  list,
+  placeholder,
+  onSelect,
+  setDropdownMenuValues,
+  initalValue,
+  disableSorting,
+  messageOnNoResults,
+  itemsType = 'normal',
+  action,
+  actionLabel,
+  actionVariant,
+  actionIcon,
+  actionLoading,
+  actionDisabled,
+  pinTopItem,
+  multiSelect,
+  scrollable = true,
+  maxHeight,
+  disabled,
+  locked,
+  isButton,
+  activeValidationMessage,
+  autofilledMessage,
+  size,
+  margin = '4px 0',
+  dropdownMenuValues,
+  minWidth
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [input, setInput] = React.useState('');
+  const [placeholderSearch, setPlaceholderSearch] = React.useState(placeholder || '');
+  const [restartFilter, setRestartFilter] = React.useState(false);
+  const [focused, setFocused] = React.useState(null);
+  const [selectedValues, setSelectedValues] = React.useState(initalValue ? [initalValue] : []);
+  const styledFieldRef = React.useRef(null);
+  /*
+  if (!items.includes(input)) {
+    setInput('');
+    setPlaceholderSearch(placeholder || '');
+  } */
+
+  const handleKeyPress = e => {
+    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {
+      if (e.keyCode === 13) {
+        setFocused(0);
+        setIsOpen(!isOpen);
+      } else if (e.keyCode === 40) {
+        setFocused(0);
+        setIsOpen(!isOpen);
+      }
+    }
+  };
+
+  const handleValueSelect = values => {
+    setRestartFilter(true);
+    setInput(values.join(', '));
+    onSelect && onSelect(values); //don't close dropdown on item select if have custom action or multiselect
+
+    if (actionLabel || multiSelect) return;
+    setIsOpen(false);
+    setFocused(null);
+  };
+
+  React.useEffect(() => {
+    if (initalValue || dropdownMenuValues) {
+      const initValue = dropdownMenuValues ? dropdownMenuValues.join(',') : initalValue ? initalValue : '';
+      setInput(initValue);
+      setRestartFilter(true);
+    }
+  }, [initalValue, dropdownMenuValues]);
+  React.useEffect(() => {
+    document.addEventListener('keypress', handleKeyPress);
+    return () => {
+      document.removeEventListener('keypress', handleKeyPress);
+    };
+  });
+  React.useEffect(() => {
+    setIsLoading(false);
+  }, [input]);
+
+  const customSetIsOpen = isOpen => {
+    setIsOpen(isOpen);
+  };
+
+  const getDisplayItems = () => {
+    const values = input.split(',').map(val => val.trim());
+    const listDisplayLabels = list.filter(item => values.includes(item.value)).map(l => l.displayLabel);
+    return listDisplayLabels.join(', ');
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown, {
+    isButton: isButton || false,
+    className: size ? size : '',
+    locked: locked,
+    disabled: disabled,
+    margin: margin,
+    minWidth: minWidth
+  }, /*#__PURE__*/React.createElement(StyledField, {
+    ref: styledFieldRef,
+    className: (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : ''),
+    onClick: () => {
+      if (!locked || !disabled) {
+        setIsOpen(!isOpen);
+      }
+    },
+    tabIndex: disabled || locked ? -1 : 0,
+    disabled: disabled || false,
+    locked: locked || false,
+    showValidationMessage: !!activeValidationMessage,
+    placeholder: placeholderSearch,
+    isPlaceholder: !input,
+    minWidth: minWidth
+  }, /*#__PURE__*/React.createElement(InputField, {
+    type: "search",
+    readOnly: true,
+    placeholder: placeholderSearch,
+    value: getDisplayItems(),
+    className: size ? `${size} value` : 'value',
+    onClick: e => {
+      if (!locked && !disabled) {
+        e.stopPropagation();
+        setIsOpen(!isOpen);
+      }
+    },
+    tabIndex: disabled || locked ? -1 : 0,
+    disabled: disabled || false
+  }), isLoading ? /*#__PURE__*/React.createElement(LoadingIndicator, {
+    size: Size.Small,
+    color: COLORS.neutral_600
+  }) : null, /*#__PURE__*/React.createElement("div", {
+    onClick: () => setIsOpen(!isOpen),
+    className: 'icon'
+  }, isOpen ? /*#__PURE__*/React.createElement(ArrowDropUp, {
+    size: "24px",
+    className: size ? size : ''
+  }) : /*#__PURE__*/React.createElement(ArrowDropDown, {
+    size: "24px",
+    className: size ? size : ''
+  }))), !locked && !disabled && /*#__PURE__*/React.createElement(DropdownContent, {
+    customizationProps: {
+      itemsType: itemsType,
+      action: action ?? (() => {}),
+      actionLabel: actionLabel,
+      actionVariant: actionVariant,
+      actionDisabled: actionDisabled,
+      scrollable: scrollable,
+      onValueUpdate: handleValueSelect,
+      items: list,
+      multiSelect: multiSelect,
+      pinTopItem: pinTopItem,
+      maxHeight: maxHeight,
+      actionIcon: actionIcon,
+      actionLoading: actionLoading
+    },
+    focused: focused,
+    setFocused: setFocused,
+    size: size ?? Size.Small,
+    filter: '',
+    hideOnClickOutside: true,
+    isOpen: isOpen,
+    setIsOpen: customSetIsOpen,
+    messageOnNoResults: messageOnNoResults ?? '',
+    isButton: isButton || false,
+    selectedValues: dropdownMenuValues ?? selectedValues,
+    setSelectedValues: setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues,
+    id: `${id}_dropdowncontent`
+  })), activeValidationMessage && /*#__PURE__*/React.createElement(WarningMessage, null, /*#__PURE__*/React.createElement(TechnicalWarning, {
+    size: "20px",
+    color: COLORS.warning_400
+  }), /*#__PURE__*/React.createElement("span", null, activeValidationMessage)), autofilledMessage && /*#__PURE__*/React.createElement(AutofilledMessage, null, /*#__PURE__*/React.createElement(Information, {
+    size: "20px",
+    color: COLORS.neutral_600
+  }), /*#__PURE__*/React.createElement("span", null, autofilledMessage)));
+};
+
+BasicDropdown.propTypes = {
+  id: _pt.string.isRequired,
+  list: _pt.array.isRequired,
+  itemsType: _pt.oneOf(['normal', 'checkbox', 'radio']),
+  action: _pt.func,
+  actionLabel: _pt.string,
+  actionIcon: _pt.node,
+  actionLoading: _pt.bool,
+  actionDisabled: _pt.bool,
+  pinTopItem: _pt.bool,
+  multiSelect: _pt.bool,
+  scrollable: _pt.bool,
+  maxHeight: _pt.string,
+  placeholder: _pt.string,
+  onSelect: _pt.func,
+  setDropdownMenuValues: _pt.func,
+  initalValue: _pt.string,
+  disableSorting: _pt.bool,
+  messageOnNoResults: _pt.string,
+  disabled: _pt.bool,
+  locked: _pt.bool,
+  isButton: _pt.bool,
+  activeValidationMessage: _pt.string,
+  autofilledMessage: _pt.string,
+  margin: _pt.string,
+  dropdownMenuValues: _pt.arrayOf(_pt.string)
+};
+export default BasicDropdown;
+//# sourceMappingURL=BasicDropdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Dropdown/BasicDropdown.tsx"],"names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","Dropdown","StyledField","InputField","DropdownContent","AutofilledMessage","WarningMessage","Size","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","BasicDropdown","id","list","placeholder","onSelect","setDropdownMenuValues","initalValue","disableSorting","messageOnNoResults","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","actionDisabled","pinTopItem","multiSelect","scrollable","maxHeight","disabled","locked","isButton","activeValidationMessage","autofilledMessage","size","margin","dropdownMenuValues","minWidth","isOpen","setIsOpen","useState","isLoading","setIsLoading","input","setInput","placeholderSearch","setPlaceholderSearch","restartFilter","setRestartFilter","focused","setFocused","selectedValues","setSelectedValues","styledFieldRef","useRef","handleKeyPress","e","current","contains","target","keyCode","handleValueSelect","values","join","useEffect","initValue","document","addEventListener","removeEventListener","customSetIsOpen","getDisplayItems","split","map","val","trim","listDisplayLabels","filter","item","includes","value","l","displayLabel","concat","stopPropagation","Small","neutral_600","onValueUpdate","items","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { DropdownButton, Dropdown, StyledField, InputField } from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\nimport { Size } from '../types';\n\ninterface DropdownFilterProps {\n  id: string;\n  list: DropdownItem[];\n  itemsType?: 'normal' | 'checkbox' | 'radio';\n  action?: () => void;\n  actionLabel?: string;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionDisabled?: boolean;\n  pinTopItem?: boolean;\n  multiSelect?: boolean;\n  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: string;\n  onSelect?: (value: string[]) => void;\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n  initalValue?: string;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  locked?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  dropdownMenuValues?: string[];\n  minWidth?: string;\n}\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nconst BasicDropdown = ({\n  id,\n  list,\n  placeholder,\n  onSelect,\n  setDropdownMenuValues,\n  initalValue,\n  disableSorting,\n  messageOnNoResults,\n  itemsType = 'normal',\n  action,\n  actionLabel,\n  actionVariant,\n  actionIcon,\n  actionLoading,\n  actionDisabled,\n  pinTopItem,\n  multiSelect,\n  scrollable = true,\n  maxHeight,\n  disabled,\n  locked,\n  isButton,\n  activeValidationMessage,\n  autofilledMessage,\n  size,\n  margin = '4px 0',\n  dropdownMenuValues,\n  minWidth,\n}: DropdownFilterProps) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [isLoading, setIsLoading] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>('');\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>(initalValue ? [initalValue] : []);\n\n  const styledFieldRef = React.useRef<HTMLDivElement>(null);\n\n  /*\n  if (!items.includes(input)) {\n    setInput('');\n    setPlaceholderSearch(placeholder || '');\n  } */\n\n  const handleKeyPress = (e: any) => {\n    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n      if (e.keyCode === 13) {\n        setFocused(0);\n        setIsOpen(!isOpen);\n      } else if (e.keyCode === 40) {\n        setFocused(0);\n        setIsOpen(!isOpen);\n      }\n    }\n  };\n\n  const handleValueSelect = (values: string[]) => {\n    setRestartFilter(true);\n    setInput(values.join(', '));\n    onSelect && onSelect(values);\n    //don't close dropdown on item select if have custom action or multiselect\n    if (actionLabel || multiSelect) return;\n\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  React.useEffect(() => {\n    if (initalValue || dropdownMenuValues) {\n      const initValue = dropdownMenuValues ? dropdownMenuValues!.join(',') : initalValue ? initalValue : '';\n      setInput(initValue);\n      setRestartFilter(true);\n    }\n  }, [initalValue, dropdownMenuValues]);\n\n  React.useEffect(() => {\n    document.addEventListener('keypress', handleKeyPress);\n    return () => {\n      document.removeEventListener('keypress', handleKeyPress);\n    };\n  });\n\n  React.useEffect(() => {\n    setIsLoading(false);\n  }, [input]);\n\n  const customSetIsOpen = (isOpen: boolean) => {\n    setIsOpen(isOpen);\n  };\n\n  const getDisplayItems = () => {\n    const values = input.split(',').map((val) => val.trim());\n    const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n    return listDisplayLabels.join(', ');\n  };\n\n  return (\n    <>\n      <Dropdown isButton={isButton || false} className={size ? size : ''} locked={locked} disabled={disabled} margin={margin} minWidth={minWidth}>\n        <StyledField\n          ref={styledFieldRef}\n          className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n          onClick={() => {\n            if (!locked || !disabled) {\n              setIsOpen(!isOpen);\n            }\n          }}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n          locked={locked || false}\n          showValidationMessage={!!activeValidationMessage}\n          placeholder={placeholderSearch}\n          isPlaceholder={!input}\n          minWidth={minWidth}>\n          <InputField\n            type=\"search\"\n            readOnly\n            placeholder={placeholderSearch}\n            value={getDisplayItems()}\n            className={size ? `${size} value` : 'value'}\n            onClick={(e: any) => {\n              if (!locked && !disabled) {\n                e.stopPropagation();\n                setIsOpen(!isOpen);\n              }\n            }}\n            tabIndex={disabled || locked ? -1 : 0}\n            disabled={disabled || false}\n          />\n          {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} /> : null}\n          <div onClick={() => setIsOpen(!isOpen)} className={'icon'}>\n            {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n          </div>\n        </StyledField>\n        {!locked && !disabled && (\n          <DropdownContent\n            customizationProps={{\n              itemsType: itemsType,\n              action: action ?? (() => {}),\n              actionLabel: actionLabel,\n              actionVariant: actionVariant,\n              actionDisabled: actionDisabled,\n              scrollable: scrollable,\n              onValueUpdate: handleValueSelect,\n              items: list,\n              multiSelect: multiSelect,\n              pinTopItem: pinTopItem,\n              maxHeight: maxHeight,\n              actionIcon: actionIcon,\n              actionLoading: actionLoading,\n            }}\n            focused={focused}\n            setFocused={setFocused}\n            size={size ?? Size.Small}\n            filter={''}\n            hideOnClickOutside={true}\n            isOpen={isOpen}\n            setIsOpen={customSetIsOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            isButton={isButton || false}\n            selectedValues={dropdownMenuValues ?? selectedValues}\n            setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{activeValidationMessage}</span>\n        </WarningMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <Information size=\"20px\" color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default BasicDropdown;\n"],"file":"BasicDropdown.js"}