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

package/dist/umd/Chips/FilterChip.js

@@ -0,0 +1,128 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react", "../types", "../icons/index", "./ChipStyles"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("../types"), require("../icons/index"), require("./ChipStyles"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.types, global.index, global.ChipStyles);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _react, _types, _index, _ChipStyles) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+
+  var React = _interopRequireWildcard(_react);
+
+  function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function (nodeInterop) {
+      return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+  }
+
+  function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+      return obj;
+    }
+
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+      return {
+        default: obj
+      };
+    }
+
+    var cache = _getRequireWildcardCache(nodeInterop);
+
+    if (cache && cache.has(obj)) {
+      return cache.get(obj);
+    }
+
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+
+    for (var key in obj) {
+      if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+        var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+
+        if (desc && (desc.get || desc.set)) {
+          Object.defineProperty(newObj, key, desc);
+        } else {
+          newObj[key] = obj[key];
+        }
+      }
+    }
+
+    newObj.default = obj;
+
+    if (cache) {
+      cache.set(obj, newObj);
+    }
+
+    return newObj;
+  }
+
+  /**
+   * Import React libraries.
+   */
+
+  /**
+   * Import custom components.
+   */
+
+  /**
+   * Import custom styles.
+   */
+
+  /**
+   * 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 === _types.Size.Small) {
+        iconSize = '16px';
+      } else if (size === _types.Size.Medium) {
+        iconSize = '20px';
+      } else {
+        iconSize = '24px';
+      }
+
+      return iconSize;
+    };
+    /**
+     * Return Filter Chip component.
+     */
+
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_ChipStyles.FilterChipContainer, {
+      className: `${size} ${disabled ? 'disabled' : selected ? 'selected icon-chip' : variant}`,
+      onClick: () => onClick()
+    }, selected && _index.SystemIcons.CheckComplete({
+      size: getIconSize(),
+      className: 'icon'
+    }), text));
+  };
+
+  exports.default = FilterChip;
+});
+//# sourceMappingURL=FilterChip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Chips/FilterChip.tsx"],"names":["FilterChip","onClick","getIconSize","size","Size","iconSize","disabled","selected","variant","className"],"mappings":";;;;;;;;;;;;;;;;;;;MAGC,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAHD;AACA;AACA;;AAIC;AACD;AACA;;AAGC;AACD;AACA;;AAGC;AACD;AACA;AAGC,QAAMA,UAAoD,GAAG,CAAC;AAAA,IAAA,QAAA;AAAA,IAAA,IAAA;AAAA,IAAA,OAAA;AAAA,IAAA,IAAA;AAAA,IAAA,QAAA;AAA2CC,IAAAA;AAA3C,GAAD,KAA2E;AACtI;AACH;AACA;AACA;AACG,UAAMC,WAAW,GAAG,MAAc;AAChC,UADgC,QAChC,CADgC,CAGhC;;AACA,UAAIC,IAAI,KAAKC,YAAb,KAAA,EAAyB;AACvBC,QAAAA,QAAQ,GAARA,MAAAA;AADF,OAAA,MAEO,IAAIF,IAAI,KAAKC,YAAb,MAAA,EAA0B;AAC/BC,QAAAA,QAAQ,GAARA,MAAAA;AADK,OAAA,MAEA;AACLA,QAAAA,QAAQ,GAARA,MAAAA;AACD;;AAED,aAAA,QAAA;AAZF,KAAA;AAeA;AACH;AACA;;;AACG,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,+BAAA,EAAA;AAAqB,MAAA,SAAS,EAAG,GAAEF,IAAK,IAAGG,QAAQ,GAAA,UAAA,GAAgBC,QAAQ,GAAA,oBAAA,GAA0BC,OAArG,EAAA;AAAgH,MAAA,OAAO,EAAE,MAAMP,OAAO;AAAtI,KAAA,EAEGM,QAAQ,IAAI,mBAAA,aAAA,CAAoB;AAAEJ,MAAAA,IAAI,EAAED,WAAR,EAAA;AAAuBO,MAAAA,SAAS,EAAE;AAAlC,KAApB,CAFf,EAFJ,IAEI,CADF,CADF;AAvBF,GAAA;;oBAoCA,U","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/umd/Chips/InputChip.js

@@ -0,0 +1,151 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react", "../icons/index", "../Button/index", "../types", "./ChipStyles"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("../icons/index"), require("../Button/index"), require("../types"), require("./ChipStyles"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.index, global.index, global.types, global.ChipStyles);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _react, _index, _index2, _types, _ChipStyles) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+
+  var React = _interopRequireWildcard(_react);
+
+  function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function (nodeInterop) {
+      return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+  }
+
+  function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+      return obj;
+    }
+
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+      return {
+        default: obj
+      };
+    }
+
+    var cache = _getRequireWildcardCache(nodeInterop);
+
+    if (cache && cache.has(obj)) {
+      return cache.get(obj);
+    }
+
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+
+    for (var key in obj) {
+      if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+        var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+
+        if (desc && (desc.get || desc.set)) {
+          Object.defineProperty(newObj, key, desc);
+        } else {
+          newObj[key] = obj[key];
+        }
+      }
+    }
+
+    newObj.default = obj;
+
+    if (cache) {
+      cache.set(obj, newObj);
+    }
+
+    return newObj;
+  }
+
+  /**
+   * Import React libraries.
+   */
+
+  /**
+   * Import custom components.
+   */
+
+  /**
+   * Import custom styles.
+   */
+
+  /**
+   * 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 === _types.Size.Small) {
+        iconSize = '16px';
+      } else if (size === _types.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(_ChipStyles.ChipContainer, {
+      className: `${size} button-chip ${disabled ? 'disabled' : variant} ${icon && 'icon-chip'}`,
+      onClick: () => onClick()
+    }, variant !== 'error' && icon && _index.SystemIcons[icon]({
+      size: getIconSize(),
+      className: 'icon'
+    }), text, /*#__PURE__*/React.createElement(_index2.IconButton, {
+      variant: "secondary",
+      shape: "circular",
+      useTransparentBackground: true,
+      action: event => onRemoveClick(event),
+      disabled: disabled
+    }, _index.SystemIcons.Close({
+      size: getIconSize(),
+      className: 'remove'
+    }))));
+  };
+
+  exports.default = InputChip;
+});
+//# sourceMappingURL=InputChip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Chips/InputChip.tsx"],"names":["InputChip","onRemove","getIconSize","size","Size","iconSize","onRemoveClick","event","disabled","variant","icon","onClick","className"],"mappings":";;;;;;;;;;;;;;;;;;;MAGA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAHA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;;AAGA;AACA;AACA;AAGA,QAAMA,SAAkD,GAAG,CAAC;AAAA,IAAA,IAAA;AAAA,IAAA,IAAA;AAAA,IAAA,OAAA;AAAA,IAAA,IAAA;AAAA,IAAA,QAAA;AAAA,IAAA,OAAA;AAAgDC,IAAAA;AAAhD,GAAD,KAAgF;AACzI;AACF;AACA;AACA;AACE,UAAMC,WAAW,GAAG,MAAc;AAChC,UADgC,QAChC,CADgC,CAGhC;;AACA,UAAIC,IAAI,KAAKC,YAAb,KAAA,EAAyB;AACvBC,QAAAA,QAAQ,GAARA,MAAAA;AADF,OAAA,MAEO,IAAIF,IAAI,KAAKC,YAAb,MAAA,EAA0B;AAC/BC,QAAAA,QAAQ,GAARA,MAAAA;AADK,OAAA,MAEA;AACLA,QAAAA,QAAQ,GAARA,MAAAA;AACD;;AAED,aAAA,QAAA;AAZF,KAAA;AAeA;AACF;AACA;AACA;;;AACE,UAAMC,aAAa,GAAIC,KAAD,IAA4D;AAChF,UAAA,KAAA,EAAW;AACTA,QAAAA,KAAK,CAALA,eAAAA;AACD;;AAEDN,MAAAA,QAAQ;AALV,KAAA;AAQA;AACF;AACA;;;AACE,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA;AAAe,MAAA,SAAS,EAAG,GAAEE,IAAK,gBAAeK,QAAQ,GAAA,UAAA,GAAgBC,OAAQ,IAAGC,IAAI,IAAI,WAA5F,EAAA;AAA2G,MAAA,OAAO,EAAE,MAAMC,OAAO;AAAjI,KAAA,EAEGF,OAAO,KAAPA,OAAAA,IAAAA,IAAAA,IAA+B,mBAAA,IAAA,EAAY;AAAEN,MAAAA,IAAI,EAAED,WAAR,EAAA;AAAuBU,MAAAA,SAAS,EAAE;AAAlC,KAAZ,CAFlC,EAAA,IAAA,EAAA,aAQE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AACE,MAAA,OAAO,EADT,WAAA;AAEE,MAAA,KAAK,EAFP,UAAA;AAGE,MAAA,wBAAwB,EAH1B,IAAA;AAIE,MAAA,MAAM,EAAGL,KAAD,IAA4DD,aAAa,CAJnF,KAImF,CAJnF;AAKE,MAAA,QAAQ,EAAEE;AALZ,KAAA,EAMG,mBAAA,KAAA,CAAY;AAAEL,MAAAA,IAAI,EAAED,WAAR,EAAA;AAAuBU,MAAAA,SAAS,EAAE;AAAlC,KAAZ,CANH,CARF,CADF,CADF;AAnCF,GAAA;;oBA0DA,S","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/umd/Chips/index.js

@@ -0,0 +1,56 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "./InputChip", "./FilterChip", "./ActionChip", "./ChipInput", "./ChoiceChips"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("./InputChip"), require("./FilterChip"), require("./ActionChip"), require("./ChipInput"), require("./ChoiceChips"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.InputChip, global.FilterChip, global.ActionChip, global.ChipInput, global.ChoiceChips);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _InputChip, _FilterChip, _ActionChip, _ChipInput, _ChoiceChips) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  Object.defineProperty(exports, "InputChip", {
+    enumerable: true,
+    get: function () {
+      return _interopRequireDefault(_InputChip).default;
+    }
+  });
+  Object.defineProperty(exports, "FilterChip", {
+    enumerable: true,
+    get: function () {
+      return _interopRequireDefault(_FilterChip).default;
+    }
+  });
+  Object.defineProperty(exports, "ActionChip", {
+    enumerable: true,
+    get: function () {
+      return _interopRequireDefault(_ActionChip).default;
+    }
+  });
+  Object.defineProperty(exports, "ChipInput", {
+    enumerable: true,
+    get: function () {
+      return _interopRequireDefault(_ChipInput).default;
+    }
+  });
+  Object.defineProperty(exports, "ChoiceChips", {
+    enumerable: true,
+    get: function () {
+      return _interopRequireDefault(_ChoiceChips).default;
+    }
+  });
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Chips/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;gDAAA,O;;;;;;iDACA,O;;;;;;iDACA,O;;;;;;gDACA,O;;;;;;kDACA,O","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/umd/Dropdown/BasicDropdown.js

@@ -0,0 +1,292 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "prop-types", "react", "../styles", "../icons/systemicons/SystemIcons", "../LoadingIndicator", "./CommonStyling", "./DropdownContent", "../InputFields/styling", "../types"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("prop-types"), require("react"), require("../styles"), require("../icons/systemicons/SystemIcons"), require("../LoadingIndicator"), require("./CommonStyling"), require("./DropdownContent"), require("../InputFields/styling"), require("../types"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.propTypes, global.react, global.styles, global.SystemIcons, global.LoadingIndicator, global.CommonStyling, global.DropdownContent, global.styling, global.types);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _propTypes, _react, _styles, _SystemIcons, _LoadingIndicator, _CommonStyling, _DropdownContent, _styling, _types) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+
+  var _propTypes2 = _interopRequireDefault(_propTypes);
+
+  var React = _interopRequireWildcard(_react);
+
+  var _DropdownContent2 = _interopRequireDefault(_DropdownContent);
+
+  function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function (nodeInterop) {
+      return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+  }
+
+  function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+      return obj;
+    }
+
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+      return {
+        default: obj
+      };
+    }
+
+    var cache = _getRequireWildcardCache(nodeInterop);
+
+    if (cache && cache.has(obj)) {
+      return cache.get(obj);
+    }
+
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+
+    for (var key in obj) {
+      if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+        var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+
+        if (desc && (desc.get || desc.set)) {
+          Object.defineProperty(newObj, key, desc);
+        } else {
+          newObj[key] = obj[key];
+        }
+      }
+    }
+
+    newObj.default = obj;
+
+    if (cache) {
+      cache.set(obj, newObj);
+    }
+
+    return newObj;
+  }
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  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(_CommonStyling.Dropdown, {
+      isButton: isButton || false,
+      className: size ? size : '',
+      locked: locked,
+      disabled: disabled,
+      margin: margin,
+      minWidth: minWidth
+    }, /*#__PURE__*/React.createElement(_CommonStyling.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(_CommonStyling.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.LoadingIndicator, {
+      size: _types.Size.Small,
+      color: _styles.COLORS.neutral_600
+    }) : null, /*#__PURE__*/React.createElement("div", {
+      onClick: () => setIsOpen(!isOpen),
+      className: 'icon'
+    }, isOpen ? /*#__PURE__*/React.createElement(_SystemIcons.ArrowDropUp, {
+      size: "24px",
+      className: size ? size : ''
+    }) : /*#__PURE__*/React.createElement(_SystemIcons.ArrowDropDown, {
+      size: "24px",
+      className: size ? size : ''
+    }))), !locked && !disabled && /*#__PURE__*/React.createElement(_DropdownContent2.default, {
+      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 ?? _types.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(_styling.WarningMessage, null, /*#__PURE__*/React.createElement(_SystemIcons.TechnicalWarning, {
+      size: "20px",
+      color: _styles.COLORS.warning_400
+    }), /*#__PURE__*/React.createElement("span", null, activeValidationMessage)), autofilledMessage && /*#__PURE__*/React.createElement(_styling.AutofilledMessage, null, /*#__PURE__*/React.createElement(_SystemIcons.Information, {
+      size: "20px",
+      color: _styles.COLORS.neutral_600
+    }), /*#__PURE__*/React.createElement("span", null, autofilledMessage)));
+  };
+
+  BasicDropdown.propTypes = {
+    id: _propTypes2.default.string.isRequired,
+    list: _propTypes2.default.array.isRequired,
+    itemsType: _propTypes2.default.oneOf(['normal', 'checkbox', 'radio']),
+    action: _propTypes2.default.func,
+    actionLabel: _propTypes2.default.string,
+    actionIcon: _propTypes2.default.node,
+    actionLoading: _propTypes2.default.bool,
+    actionDisabled: _propTypes2.default.bool,
+    pinTopItem: _propTypes2.default.bool,
+    multiSelect: _propTypes2.default.bool,
+    scrollable: _propTypes2.default.bool,
+    maxHeight: _propTypes2.default.string,
+    placeholder: _propTypes2.default.string,
+    onSelect: _propTypes2.default.func,
+    setDropdownMenuValues: _propTypes2.default.func,
+    initalValue: _propTypes2.default.string,
+    disableSorting: _propTypes2.default.bool,
+    messageOnNoResults: _propTypes2.default.string,
+    disabled: _propTypes2.default.bool,
+    locked: _propTypes2.default.bool,
+    isButton: _propTypes2.default.bool,
+    activeValidationMessage: _propTypes2.default.string,
+    autofilledMessage: _propTypes2.default.string,
+    margin: _propTypes2.default.string,
+    dropdownMenuValues: _propTypes2.default.arrayOf(_propTypes2.default.string)
+  };
+  exports.default = BasicDropdown;
+});
+//# sourceMappingURL=BasicDropdown.js.map