@laerdal/life-react-components 3.4.2 → 3.5.0

package/dist/js/Chips/FilterChip.js

@@ -0,0 +1,76 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _types = require("../types");
+
+var _index = require("../icons/index");
+
+var _ChipStyles = require("./ChipStyles");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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.
+ */
+var FilterChip = function FilterChip(_ref) {
+  var selected = _ref.selected,
+      text = _ref.text,
+      variant = _ref.variant,
+      size = _ref.size,
+      disabled = _ref.disabled,
+      _onClick = _ref.onClick;
+
+  /**
+   * Retrieves icon size based on the chip size.
+   * @returns A string indicating the icon size.
+   */
+  var getIconSize = function getIconSize() {
+    var 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: "".concat(size, " ").concat(disabled ? 'disabled' : selected ? 'selected icon-chip' : variant),
+    onClick: function onClick() {
+      return _onClick();
+    }
+  }, selected && _index.SystemIcons.CheckComplete({
+    size: getIconSize(),
+    className: 'icon'
+  }), text));
+};
+
+var _default = FilterChip;
+exports.default = _default;
+//# sourceMappingURL=FilterChip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Chips/FilterChip.tsx"],"names":["FilterChip","selected","text","variant","size","disabled","onClick","getIconSize","iconSize","Size","Small","Medium","icons","CheckComplete","className"],"mappings":";;;;;;;;;AAGC;;AACD;;AAKC;;AAKA;;;;;;AAdD;AACA;AACA;;AAIC;AACD;AACA;;AAGC;AACD;AACA;AAQC,IAAMA,UAAoD,GAAG,SAAvDA,UAAuD,OAA2E;AAAA,MAAxEC,QAAwE,QAAxEA,QAAwE;AAAA,MAA9DC,IAA8D,QAA9DA,IAA8D;AAAA,MAAxDC,OAAwD,QAAxDA,OAAwD;AAAA,MAA/CC,IAA+C,QAA/CA,IAA+C;AAAA,MAAzCC,QAAyC,QAAzCA,QAAyC;AAAA,MAA/BC,QAA+B,QAA/BA,OAA+B;;AACtI;AACH;AACA;AACA;AACG,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAc;AAChC,QAAIC,QAAJ,CADgC,CAGhC;;AACA,QAAIJ,IAAI,KAAKK,YAAKC,KAAlB,EAAyB;AACvBF,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFD,MAEO,IAAIJ,IAAI,KAAKK,YAAKE,MAAlB,EAA0B;AAC/BH,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,+BAAD;AAAqB,IAAA,SAAS,YAAKJ,IAAL,cAAaC,QAAQ,GAAG,UAAH,GAAgBJ,QAAQ,GAAG,oBAAH,GAA0BE,OAAvE,CAA9B;AAAgH,IAAA,OAAO,EAAE;AAAA,aAAMG,QAAO,EAAb;AAAA;AAAzH,KAEGL,QAAQ,IAAIW,mBAAMC,aAAN,CAAoB;AAAET,IAAAA,IAAI,EAAEG,WAAW,EAAnB;AAAuBO,IAAAA,SAAS,EAAE;AAAlC,GAApB,CAFf,EAKGZ,IALH,CADF,CADF;AAWD,CAlCD;;eAoCeF,U","sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\n import * as React from 'react';\r\nimport { Size } from '../types';\r\n\r\n /**\r\n  * Import custom components.\r\n  */\r\n import {SystemIcons as icons} from '../icons/index';\r\n \r\n /**\r\n  * Import custom styles.\r\n  */\r\n import { FilterChipContainer } from './ChipStyles';\r\n \r\n /**\r\n  * Import custom types.\r\n  */\r\n import { FilterChipProps } from './ChipTypes';\r\n \r\n const FilterChip: React.FunctionComponent<FilterChipProps> = ({ selected, text, variant, size, disabled, onClick }: FilterChipProps) => {\r\n   /**\r\n    * Retrieves icon size based on the chip size.\r\n    * @returns A string indicating the icon size.\r\n    */\r\n   const getIconSize = (): string => {\r\n     let iconSize: string;\r\n \r\n     // Calculate correct icon size\r\n     if (size === Size.Small) {\r\n       iconSize = '16px';\r\n     } else if (size === Size.Medium) {\r\n       iconSize = '20px';\r\n     } else {\r\n       iconSize = '24px';\r\n     }\r\n \r\n     return iconSize;\r\n   }\r\n \r\n   /**\r\n    * Return Filter Chip component.\r\n    */\r\n   return (\r\n     <>\r\n       <FilterChipContainer className={`${size} ${disabled ? 'disabled' : selected ? 'selected icon-chip' : variant}`} onClick={() => onClick()}>\r\n         { /* Let's render icon if the chip is selected */ }\r\n         {selected && icons.CheckComplete({ size: getIconSize(), className: 'icon' })}\r\n         \r\n         { /* Let's render text */ }\r\n         {text}\r\n       </FilterChipContainer>\r\n     </>\r\n   );\r\n };\r\n \r\n export default FilterChip;\r\n "],"file":"FilterChip.js"}

package/dist/js/Chips/InputChip.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Import React libraries.
+ */
+import * as React from 'react';
+/**
+ * Import custom types.
+ */
+import { InputChipProps } from './ChipTypes';
+declare const InputChip: React.FunctionComponent<InputChipProps>;
+export default InputChip;

package/dist/js/Chips/InputChip.js

@@ -0,0 +1,103 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _index = require("../icons/index");
+
+var _index2 = require("../Button/index");
+
+var _types = require("../types");
+
+var _ChipStyles = require("./ChipStyles");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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.
+ */
+var InputChip = function InputChip(_ref) {
+  var icon = _ref.icon,
+      text = _ref.text,
+      variant = _ref.variant,
+      size = _ref.size,
+      disabled = _ref.disabled,
+      _onClick = _ref.onClick,
+      onRemove = _ref.onRemove;
+
+  /**
+   * Retrieves icon size based on the chip size.
+   * @returns A string indicating the icon size.
+   */
+  var getIconSize = function getIconSize() {
+    var 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.
+   */
+
+
+  var onRemoveClick = function onRemoveClick(event) {
+    if (event) {
+      event.stopPropagation();
+    }
+
+    onRemove();
+  };
+  /**
+   * Return Input Chip component.
+   */
+
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_ChipStyles.ChipContainer, {
+    className: "".concat(size, " button-chip ").concat(disabled ? 'disabled' : variant, " ").concat(icon && 'icon-chip'),
+    onClick: function onClick() {
+      return _onClick();
+    }
+  }, variant !== 'error' && icon && _index.SystemIcons[icon]({
+    size: getIconSize(),
+    className: 'icon'
+  }), text, /*#__PURE__*/React.createElement(_index2.IconButton, {
+    variant: "secondary",
+    shape: "circular",
+    useTransparentBackground: true,
+    action: function action(event) {
+      return onRemoveClick(event);
+    },
+    disabled: disabled
+  }, _index.SystemIcons.Close({
+    size: getIconSize(),
+    className: 'remove'
+  }))));
+};
+
+var _default = InputChip;
+exports.default = _default;
+//# sourceMappingURL=InputChip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Chips/InputChip.tsx"],"names":["InputChip","icon","text","variant","size","disabled","onClick","onRemove","getIconSize","iconSize","Size","Small","Medium","onRemoveClick","event","stopPropagation","icons","className","Close"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAKA;;;;;;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AAQA,IAAMA,SAAkD,GAAG,SAArDA,SAAqD,OAAgF;AAAA,MAA7EC,IAA6E,QAA7EA,IAA6E;AAAA,MAAvEC,IAAuE,QAAvEA,IAAuE;AAAA,MAAjEC,OAAiE,QAAjEA,OAAiE;AAAA,MAAxDC,IAAwD,QAAxDA,IAAwD;AAAA,MAAlDC,QAAkD,QAAlDA,QAAkD;AAAA,MAAxCC,QAAwC,QAAxCA,OAAwC;AAAA,MAA/BC,QAA+B,QAA/BA,QAA+B;;AACzI;AACF;AACA;AACA;AACE,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAc;AAChC,QAAIC,QAAJ,CADgC,CAGhC;;AACA,QAAIL,IAAI,KAAKM,YAAKC,KAAlB,EAAyB;AACvBF,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFD,MAEO,IAAIL,IAAI,KAAKM,YAAKE,MAAlB,EAA0B;AAC/BH,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFM,MAEA;AACLA,MAAAA,QAAQ,GAAG,MAAX;AACD;;AAED,WAAOA,QAAP;AACD,GAbD;AAeA;AACF;AACA;AACA;;;AACE,MAAMI,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAA4D;AAChF,QAAIA,KAAJ,EAAW;AACTA,MAAAA,KAAK,CAACC,eAAN;AACD;;AAEDR,IAAAA,QAAQ;AACT,GAND;AAQA;AACF;AACA;;;AACE,sBACE,uDACE,oBAAC,yBAAD;AAAe,IAAA,SAAS,YAAKH,IAAL,0BAAyBC,QAAQ,GAAG,UAAH,GAAgBF,OAAjD,cAA4DF,IAAI,IAAI,WAApE,CAAxB;AAA2G,IAAA,OAAO,EAAE;AAAA,aAAMK,QAAO,EAAb;AAAA;AAApH,KAEGH,OAAO,KAAK,OAAZ,IAAuBF,IAAvB,IAA+Be,mBAAMf,IAAN,EAAY;AAAEG,IAAAA,IAAI,EAAEI,WAAW,EAAnB;AAAuBS,IAAAA,SAAS,EAAE;AAAlC,GAAZ,CAFlC,EAKGf,IALH,eAQE,oBAAC,kBAAD;AACE,IAAA,OAAO,EAAC,WADV;AAEE,IAAA,KAAK,EAAC,UAFR;AAGE,IAAA,wBAAwB,MAH1B;AAIE,IAAA,MAAM,EAAE,gBAACY,KAAD;AAAA,aAA4DD,aAAa,CAACC,KAAD,CAAzE;AAAA,KAJV;AAKE,IAAA,QAAQ,EAAET;AALZ,KAMGW,mBAAME,KAAN,CAAY;AAAEd,IAAAA,IAAI,EAAEI,WAAW,EAAnB;AAAuBS,IAAAA,SAAS,EAAE;AAAlC,GAAZ,CANH,CARF,CADF,CADF;AAqBD,CAxDD;;eA0DejB,S","sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport { SystemIcons as icons } from '../icons/index';\r\nimport { IconButton } from '../Button/index';\r\nimport { Size } from '../types';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport { ChipContainer } from './ChipStyles';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport { InputChipProps } from './ChipTypes';\r\n\r\nconst InputChip: React.FunctionComponent<InputChipProps> = ({ icon, text, variant, size, disabled, onClick, onRemove }: InputChipProps) => {\r\n  /**\r\n   * Retrieves icon size based on the chip size.\r\n   * @returns A string indicating the icon size.\r\n   */\r\n  const getIconSize = (): string => {\r\n    let iconSize: string;\r\n\r\n    // Calculate correct icon size\r\n    if (size === Size.Small) {\r\n      iconSize = '16px';\r\n    } else if (size === Size.Medium) {\r\n      iconSize = '20px';\r\n    } else {\r\n      iconSize = '24px';\r\n    }\r\n\r\n    return iconSize;\r\n  };\r\n\r\n  /**\r\n   * Calls onRemove action when remove button is clicked.\r\n   * @param event - Event handler from the button click.\r\n   */\r\n  const onRemoveClick = (event: React.MouseEvent<HTMLButtonElement> | undefined) => {\r\n    if (event) {\r\n      event.stopPropagation();\r\n    }\r\n\r\n    onRemove();\r\n  };\r\n\r\n  /**\r\n   * Return Input Chip component.\r\n   */\r\n  return (\r\n    <>\r\n      <ChipContainer className={`${size} button-chip ${disabled ? 'disabled' : variant} ${icon && 'icon-chip'}`} onClick={() => onClick()}>\r\n        {/* Let's render icon if it is passed */}\r\n        {variant !== 'error' && icon && icons[icon]({ size: getIconSize(), className: 'icon' })}\r\n\r\n        {/* Let's render text */}\r\n        {text}\r\n\r\n        {/* Let's render clear icon */}\r\n        <IconButton\r\n          variant=\"secondary\"\r\n          shape=\"circular\"\r\n          useTransparentBackground\r\n          action={(event: React.MouseEvent<HTMLButtonElement> | undefined) => onRemoveClick(event)}\r\n          disabled={disabled}>\r\n          {icons.Close({ size: getIconSize(), className: 'remove' })}\r\n        </IconButton>\r\n      </ChipContainer>\r\n    </>\r\n  );\r\n};\r\n\r\nexport default InputChip;\r\n"],"file":"InputChip.js"}

package/dist/js/Chips/index.d.ts

@@ -0,0 +1,5 @@
+export { default as InputChip } from './InputChip';
+export { default as FilterChip } from './FilterChip';
+export { default as ActionChip } from './ActionChip';
+export { default as ChipInput } from './ChipInput';
+export { default as ChoiceChips } from './ChoiceChips';

package/dist/js/Chips/index.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "InputChip", {
+  enumerable: true,
+  get: function get() {
+    return _InputChip.default;
+  }
+});
+Object.defineProperty(exports, "FilterChip", {
+  enumerable: true,
+  get: function get() {
+    return _FilterChip.default;
+  }
+});
+Object.defineProperty(exports, "ActionChip", {
+  enumerable: true,
+  get: function get() {
+    return _ActionChip.default;
+  }
+});
+Object.defineProperty(exports, "ChipInput", {
+  enumerable: true,
+  get: function get() {
+    return _ChipInput.default;
+  }
+});
+Object.defineProperty(exports, "ChoiceChips", {
+  enumerable: true,
+  get: function get() {
+    return _ChoiceChips.default;
+  }
+});
+
+var _InputChip = _interopRequireDefault(require("./InputChip"));
+
+var _FilterChip = _interopRequireDefault(require("./FilterChip"));
+
+var _ActionChip = _interopRequireDefault(require("./ActionChip"));
+
+var _ChipInput = _interopRequireDefault(require("./ChipInput"));
+
+var _ChoiceChips = _interopRequireDefault(require("./ChoiceChips"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Chips/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["export { default as InputChip } from './InputChip';\r\nexport { default as FilterChip } from './FilterChip';\r\nexport { default as ActionChip } from './ActionChip';\r\nexport { default as ChipInput } from './ChipInput';\r\nexport { default as ChoiceChips } from './ChoiceChips';"],"file":"index.js"}

package/dist/js/Dropdown/BasicDropdown.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { DropdownItem } from './DropdownContent';
+import { Size } from '../types';
+interface DropdownFilterProps {
+    id: string;
+    list: DropdownItem[];
+    itemsType?: 'normal' | 'checkbox' | 'radio';
+    action?: () => void;
+    actionLabel?: string;
+    actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;
+    actionIcon?: React.ReactNode;
+    actionLoading?: boolean;
+    actionDisabled?: boolean;
+    pinTopItem?: boolean;
+    multiSelect?: boolean;
+    scrollable?: boolean;
+    maxHeight?: string;
+    placeholder?: string;
+    onSelect?: (value: string[]) => void;
+    setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;
+    initalValue?: string;
+    disableSorting?: boolean;
+    messageOnNoResults?: string;
+    disabled?: boolean;
+    locked?: boolean;
+    isButton?: boolean;
+    activeValidationMessage?: string;
+    autofilledMessage?: string;
+    size?: Size.Small | Size.Medium;
+    margin?: string;
+    dropdownMenuValues?: string[];
+    minWidth?: string;
+}
+declare const 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, }: DropdownFilterProps) => JSX.Element;
+export default BasicDropdown;

package/dist/js/Dropdown/BasicDropdown.js

@@ -0,0 +1,295 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styles = require("../styles");
+
+var _SystemIcons = require("../icons/systemicons/SystemIcons");
+
+var _LoadingIndicator = require("../LoadingIndicator");
+
+var _CommonStyling = require("./CommonStyling");
+
+var _DropdownContent = _interopRequireDefault(require("./DropdownContent"));
+
+var _styling = require("../InputFields/styling");
+
+var _types = require("../types");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var MAX_MENU_HEIGHT = 240;
+var AVG_OPTION_HEIGHT = 48;
+
+var BasicDropdown = function BasicDropdown(_ref) {
+  var id = _ref.id,
+      list = _ref.list,
+      placeholder = _ref.placeholder,
+      onSelect = _ref.onSelect,
+      setDropdownMenuValues = _ref.setDropdownMenuValues,
+      initalValue = _ref.initalValue,
+      disableSorting = _ref.disableSorting,
+      messageOnNoResults = _ref.messageOnNoResults,
+      _ref$itemsType = _ref.itemsType,
+      itemsType = _ref$itemsType === void 0 ? 'normal' : _ref$itemsType,
+      action = _ref.action,
+      actionLabel = _ref.actionLabel,
+      actionVariant = _ref.actionVariant,
+      actionIcon = _ref.actionIcon,
+      actionLoading = _ref.actionLoading,
+      actionDisabled = _ref.actionDisabled,
+      pinTopItem = _ref.pinTopItem,
+      multiSelect = _ref.multiSelect,
+      _ref$scrollable = _ref.scrollable,
+      scrollable = _ref$scrollable === void 0 ? true : _ref$scrollable,
+      maxHeight = _ref.maxHeight,
+      disabled = _ref.disabled,
+      locked = _ref.locked,
+      isButton = _ref.isButton,
+      activeValidationMessage = _ref.activeValidationMessage,
+      autofilledMessage = _ref.autofilledMessage,
+      size = _ref.size,
+      _ref$margin = _ref.margin,
+      margin = _ref$margin === void 0 ? '4px 0' : _ref$margin,
+      dropdownMenuValues = _ref.dropdownMenuValues,
+      minWidth = _ref.minWidth;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isOpen = _React$useState2[0],
+      setIsOpen = _React$useState2[1];
+
+  var _React$useState3 = React.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      isLoading = _React$useState4[0],
+      setIsLoading = _React$useState4[1];
+
+  var _React$useState5 = React.useState(''),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      input = _React$useState6[0],
+      setInput = _React$useState6[1];
+
+  var _React$useState7 = React.useState(placeholder || ''),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      placeholderSearch = _React$useState8[0],
+      setPlaceholderSearch = _React$useState8[1];
+
+  var _React$useState9 = React.useState(false),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      restartFilter = _React$useState10[0],
+      setRestartFilter = _React$useState10[1];
+
+  var _React$useState11 = React.useState(null),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      focused = _React$useState12[0],
+      setFocused = _React$useState12[1];
+
+  var _React$useState13 = React.useState(initalValue ? [initalValue] : []),
+      _React$useState14 = _slicedToArray(_React$useState13, 2),
+      selectedValues = _React$useState14[0],
+      setSelectedValues = _React$useState14[1];
+
+  var styledFieldRef = React.useRef(null);
+  /*
+  if (!items.includes(input)) {
+    setInput('');
+    setPlaceholderSearch(placeholder || '');
+  } */
+
+  var handleKeyPress = function handleKeyPress(e) {
+    if (styledFieldRef !== null && styledFieldRef !== void 0 && styledFieldRef.current && styledFieldRef.current.contains(e.target)) {
+      if (e.keyCode === 13) {
+        setFocused(0);
+        setIsOpen(!isOpen);
+      } else if (e.keyCode === 40) {
+        setFocused(0);
+        setIsOpen(!isOpen);
+      }
+    }
+  };
+
+  var handleValueSelect = function 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(function () {
+    if (initalValue || dropdownMenuValues) {
+      var initValue = dropdownMenuValues ? dropdownMenuValues.join(',') : initalValue ? initalValue : '';
+      setInput(initValue);
+      setRestartFilter(true);
+    }
+  }, [initalValue, dropdownMenuValues]);
+  React.useEffect(function () {
+    document.addEventListener('keypress', handleKeyPress);
+    return function () {
+      document.removeEventListener('keypress', handleKeyPress);
+    };
+  });
+  React.useEffect(function () {
+    setIsLoading(false);
+  }, [input]);
+
+  var customSetIsOpen = function customSetIsOpen(isOpen) {
+    setIsOpen(isOpen);
+  };
+
+  var getDisplayItems = function getDisplayItems() {
+    var values = input.split(',').map(function (val) {
+      return val.trim();
+    });
+    var listDisplayLabels = list.filter(function (item) {
+      return values.includes(item.value);
+    }).map(function (l) {
+      return 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: function 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 ? "".concat(size, " value") : 'value',
+    onClick: function 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: function onClick() {
+      return 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(_DropdownContent.default, {
+    customizationProps: {
+      itemsType: itemsType,
+      action: action !== null && action !== void 0 ? action : function () {},
+      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 !== null && size !== void 0 ? size : _types.Size.Small,
+    filter: '',
+    hideOnClickOutside: true,
+    isOpen: isOpen,
+    setIsOpen: customSetIsOpen,
+    messageOnNoResults: messageOnNoResults !== null && messageOnNoResults !== void 0 ? messageOnNoResults : '',
+    isButton: isButton || false,
+    selectedValues: dropdownMenuValues !== null && dropdownMenuValues !== void 0 ? dropdownMenuValues : selectedValues,
+    setSelectedValues: setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues,
+    id: "".concat(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: _propTypes.default.string.isRequired,
+  list: _propTypes.default.array.isRequired,
+  itemsType: _propTypes.default.oneOf(['normal', 'checkbox', 'radio']),
+  action: _propTypes.default.func,
+  actionLabel: _propTypes.default.string,
+  actionIcon: _propTypes.default.node,
+  actionLoading: _propTypes.default.bool,
+  actionDisabled: _propTypes.default.bool,
+  pinTopItem: _propTypes.default.bool,
+  multiSelect: _propTypes.default.bool,
+  scrollable: _propTypes.default.bool,
+  maxHeight: _propTypes.default.string,
+  placeholder: _propTypes.default.string,
+  onSelect: _propTypes.default.func,
+  setDropdownMenuValues: _propTypes.default.func,
+  initalValue: _propTypes.default.string,
+  disableSorting: _propTypes.default.bool,
+  messageOnNoResults: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  locked: _propTypes.default.bool,
+  isButton: _propTypes.default.bool,
+  activeValidationMessage: _propTypes.default.string,
+  autofilledMessage: _propTypes.default.string,
+  margin: _propTypes.default.string,
+  dropdownMenuValues: _propTypes.default.arrayOf(_propTypes.default.string)
+};
+var _default = BasicDropdown;
+exports.default = _default;
+//# sourceMappingURL=BasicDropdown.js.map

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

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