@bbl-digital/snorre 4.2.97 → 4.2.99

package/esm/core/SearchSelect/index.js

@@ -0,0 +1,104 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _IconChevronDown = _interopRequireDefault(require("../../icons/General/IconChevronDown"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _Input = _interopRequireDefault(require("../Input"));
+var _List = _interopRequireDefault(require("../List"));
+var _Select = require("../Select");
+var _useSelectSearch = _interopRequireDefault(require("./hooks/useSelectSearch"));
+var _styles = require("./styles");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/** @jsxImportSource @emotion/react */
+
+const SelectSearch = props => {
+  const ref = (0, _react.useRef)(null);
+  const inputRef = (0, _react.useRef)(null);
+  const {
+    open,
+    values,
+    search,
+    setSearch,
+    setOpen
+  } = (0, _useSelectSearch.default)(props);
+  const handleClickOutside = e => {
+    const node = ref.current;
+    if (node && node.contains(e.target)) return;
+    setOpen(false);
+    setSearch('');
+  };
+  (0, _react.useEffect)(() => {
+    if (open) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return;
+    }
+    document.removeEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, ref]);
+  (0, _react.useEffect)(() => {
+    if (open && inputRef.current) {
+      inputRef?.current?.focus();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [inputRef?.current, open]);
+  const handleOnClick = () => {
+    setOpen(!open);
+    if (!open) setSearch('');
+  };
+  const handleOnItemClick = item => () => {
+    props.onChange(item);
+    setOpen(false);
+  };
+  const getDisplayedValue = selected => {
+    const item = values.find(v => v[props.keyName || 'id'] === selected);
+    if (!item) return null;
+    return props.createLabelName?.(item);
+  };
+  return (0, _jsxRuntime.jsxs)(_styles.Wrapper, {
+    ref: ref,
+    css: () => [props.type === 'opacity08' && _styles.styles.opacity08],
+    children: [props.label && (0, _jsxRuntime.jsx)(_styles.StyledLabel, {
+      children: props.label
+    }), (0, _jsxRuntime.jsx)(_Button.default, {
+      nostyle: true,
+      afterIcon: (0, _jsxRuntime.jsx)(_IconChevronDown.default, {
+        flipVertical: open,
+        size: 14
+      }),
+      onClick: handleOnClick,
+      trackingName: props.trackingName,
+      trackingEvent: props.trackingEvent,
+      children: props?.createLabelName && getDisplayedValue(props.selectedValue) || props.selectedValue || props.defaultValue || ''
+    }), (0, _jsxRuntime.jsx)(_styles.OptionsWrapper, {
+      children: open ? (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [(0, _jsxRuntime.jsx)(_Input.default, {
+          ref: inputRef,
+          height: "36px",
+          type: "search",
+          highlight: true,
+          placeholder: props.inputPlaceholder || '',
+          value: search,
+          onChange: e => setSearch(e.target.value)
+        }), (0, _jsxRuntime.jsx)(_styles.ListWrapper, {
+          children: (0, _jsxRuntime.jsx)(_List.default, {
+            children: values.map(item => (0, _jsxRuntime.jsx)(_Select.Option, {
+              onChange: handleOnItemClick(item),
+              children: props.createLabelName?.(item) || item[props.labelName || 'label']
+            }, item[item.keyName || 'id']))
+          })
+        })]
+      }) : null
+    })]
+  });
+};
+var _default = exports.default = SelectSearch;

package/esm/core/SearchSelect/interface/IProps.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/esm/core/SearchSelect/styles.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styles = exports.Wrapper = exports.StyledLabel = exports.OptionsWrapper = exports.ListWrapper = void 0;
+var _base = _interopRequireDefault(require("@emotion/styled/base"));
+var _react = require("@emotion/react");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const StyledLabel = exports.StyledLabel = /*#__PURE__*/(0, _base.default)("span", process.env.NODE_ENV === "production" ? {
+  target: "e141unqb3"
+} : {
+  target: "e141unqb3",
+  label: "StyledLabel"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1ge8ozm",
+  styles: "line-height:22px;font-size:1em;font-weight:600;margin-bottom:4px"
+} : {
+  name: "1ge8ozm",
+  styles: "line-height:22px;font-size:1em;font-weight:600;margin-bottom:4px",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const Wrapper = exports.Wrapper = /*#__PURE__*/(0, _base.default)("span", process.env.NODE_ENV === "production" ? {
+  target: "e141unqb2"
+} : {
+  target: "e141unqb2",
+  label: "Wrapper"
+})(process.env.NODE_ENV === "production" ? {
+  name: "fnf23l",
+  styles: "position:relative;ul{border-top:none;}"
+} : {
+  name: "fnf23l",
+  styles: "position:relative;ul{border-top:none;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const OptionsWrapper = exports.OptionsWrapper = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+  target: "e141unqb1"
+} : {
+  target: "e141unqb1",
+  label: "OptionsWrapper"
+})(process.env.NODE_ENV === "production" ? {
+  name: "zje6v4",
+  styles: "position:absolute;left:0;right:0;min-width:150px;box-shadow:0px 10px 15px 0px rgba(0, 0, 0, 0.1);z-index:1000;border-radius:10px;overflow:hidden;background:#fff;width:max-content;@media (max-width: 768px){width:auto;}"
+} : {
+  name: "zje6v4",
+  styles: "position:absolute;left:0;right:0;min-width:150px;box-shadow:0px 10px 15px 0px rgba(0, 0, 0, 0.1);z-index:1000;border-radius:10px;overflow:hidden;background:#fff;width:max-content;@media (max-width: 768px){width:auto;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const ListWrapper = exports.ListWrapper = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+  target: "e141unqb0"
+} : {
+  target: "e141unqb0",
+  label: "ListWrapper"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1xlkuzg",
+  styles: "max-height:10em;overflow-x:hidden;overflow-y:auto"
+} : {
+  name: "1xlkuzg",
+  styles: "max-height:10em;overflow-x:hidden;overflow-y:auto",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const styles = exports.styles = {
+  opacity08: process.env.NODE_ENV === "production" ? {
+    name: "eoqxuw",
+    styles: "display:flex;justify-content:space-between;align-items:center;padding:0 0.5em;height:39px;background-color:rgba(216, 216, 216, 0.08);border:1px solid rgba(255, 255, 255, 0.24);border-radius:5px;color:white;&>button>span{color:white;font-weight:400;}button svg polygon{fill:white;}button{width:100%;}button+div{top:40px;}"
+  } : {
+    name: "6fnvbj-opacity08",
+    styles: "display:flex;justify-content:space-between;align-items:center;padding:0 0.5em;height:39px;background-color:rgba(216, 216, 216, 0.08);border:1px solid rgba(255, 255, 255, 0.24);border-radius:5px;color:white;&>button>span{color:white;font-weight:400;}button svg polygon{fill:white;}button{width:100%;}button+div{top:40px;};label:opacity08;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  }
+};

package/esm/core/Select/Option.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styles = require("./styles");
+var _Item = _interopRequireDefault(require("../List/Item"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/** @jsxImportSource @emotion/react */
+
+const Option = ({
+  trackingEvent,
+  trackingName,
+  ...props
+}) => {
+  const onChange = () => {
+    if (props.onChange && !props.disabled) {
+      props.onChange({
+        value: props.value
+      });
+    }
+  };
+  return (0, _jsxRuntime.jsx)(_Item.default, {
+    children: (0, _jsxRuntime.jsx)(_Button.default, {
+      nostyle: true,
+      css: (0, _styles.optionButton)(props.indent),
+      onClick: onChange,
+      trackingEvent: trackingEvent,
+      trackingName: trackingName,
+      disabled: props.disabled,
+      children: _react.default.Children.map(props.children, child => {
+        return child;
+      })
+    }, props.key)
+  });
+};
+var _default = exports.default = Option;

package/esm/core/Select/Select.stories.js

@@ -0,0 +1,252 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithInfoButton = exports.Width = exports.SelectNative = exports.SelectDefault = exports.Primary10 = exports.OptionsWidth = exports.Opacity08 = exports.MaxHeight = exports.Input = exports.Icon = exports.Disabled = void 0;
+var _addonActions = require("@storybook/addon-actions");
+var _ = _interopRequireDefault(require("."));
+var _Option = _interopRequireDefault(require("./Option"));
+var _IconTypeOfBuilding = _interopRequireDefault(require("../../icons/General/IconTypeOfBuilding"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'Core/Select',
+  component: _.default
+};
+const SelectDefault = exports.SelectDefault = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
+    text: "Sorter etter",
+    onChange: (0, _addonActions.action)('onChange'),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+      disabled: true,
+      value: "1",
+      children: "Option 1"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+      value: "2",
+      children: "Option 2"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+      value: "3",
+      children: "Option 3"
+    })]
+  }),
+  name: 'Select'
+};
+const Width = exports.Width = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
+    text: "Sorter etter",
+    type: "primary10",
+    width: "400px",
+    onChange: (0, _addonActions.action)('onChange'),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+      disabled: true,
+      value: "1",
+      children: "Option 1"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+      value: "2",
+      children: "Option 2"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+      value: "3",
+      children: "Option 3"
+    })]
+  }),
+  name: 'Width'
+};
+const OptionsWidth = exports.OptionsWidth = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
+    text: "Sorter etter",
+    optionsWidth: "400px",
+    onChange: (0, _addonActions.action)('onChange'),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+      disabled: true,
+      value: "1",
+      children: "Option 1"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+      value: "2",
+      children: "Option 2"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+      value: "3",
+      children: "Option 3"
+    })]
+  }),
+  name: 'Options width'
+};
+const SelectNative = exports.SelectNative = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
+    text: "Sorter etter",
+    native: true,
+    onChange: (0, _addonActions.action)('onChange'),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+      disabled: true,
+      value: "1",
+      children: "Option 1"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+      value: "2",
+      children: "Option 2"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+      value: "3",
+      children: "Option 3"
+    })]
+  }),
+  name: 'Select - native'
+};
+const Input = exports.Input = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
+    text: "Velg en",
+    label: "Label",
+    input: true,
+    onChange: (0, _addonActions.action)('onChange'),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+      disabled: true,
+      value: "1",
+      children: "Option 1"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+      value: "2",
+      children: "Option 2"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+      value: "3",
+      children: "Option 3"
+    })]
+  }),
+  name: 'Input'
+};
+const Icon = exports.Icon = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
+    text: "Velg en",
+    label: "Label",
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconTypeOfBuilding.default, {
+      primary: true
+    }),
+    onChange: (0, _addonActions.action)('onChange'),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+      disabled: true,
+      value: "1",
+      children: "Option 1"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+      value: "2",
+      children: "Option 2"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+      value: "3",
+      children: "Option 3"
+    })]
+  }),
+  name: 'Icon'
+};
+const Primary10 = exports.Primary10 = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
+    text: "Background with 10 opacity",
+    type: "primary10",
+    onChange: (0, _addonActions.action)('onChange'),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+      disabled: true,
+      value: "1",
+      children: "Option 1"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+      value: "2",
+      children: "Option 2"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+      value: "3",
+      children: "Option 3"
+    })]
+  }),
+  name: 'Primary10'
+};
+const Opacity08 = exports.Opacity08 = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      backgroundColor: '#04112D',
+      padding: '2em'
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
+      text: "Opacity08",
+      type: "opacity08",
+      onChange: (0, _addonActions.action)('onChange'),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+        disabled: true,
+        value: "1",
+        children: "Option 1"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+        value: "2",
+        children: "Option 2"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+        value: "3",
+        children: "Option 3"
+      })]
+    })
+  }),
+  name: 'Opacity08'
+};
+const MaxHeight = exports.MaxHeight = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      backgroundColor: '#04112D',
+      padding: '2em'
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
+      text: "maxHeight",
+      type: "opacity08",
+      onChange: (0, _addonActions.action)('onChange'),
+      maxHeight: "100px",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+        disabled: true,
+        value: "1",
+        children: "Option 1"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+        value: "2",
+        children: "Option 2"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+        value: "3",
+        children: "Option 3"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+        value: "3",
+        children: "Option 4"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+        value: "3",
+        children: "Option 5"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+        value: "3",
+        children: "Option 6"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+        value: "3",
+        children: "Option 7"
+      })]
+    })
+  }),
+  name: 'MaxHeight'
+};
+const Disabled = exports.Disabled = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
+    text: "Im disabled",
+    input: true,
+    disabled: true,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+      value: "1",
+      children: "Option 1"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+      value: "2",
+      children: "Option 2"
+    })]
+  }),
+  name: 'Disabled'
+};
+const WithInfoButton = exports.WithInfoButton = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
+    text: "Velg en",
+    label: "With info button",
+    input: true,
+    onChange: (0, _addonActions.action)('onChange'),
+    info: "Ullamco nisi excepteur quis ut sint ipsum deserunt dolor. Nulla cillum exercitation labore fugiat nulla do duis irure dolore.",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+      disabled: true,
+      value: "1",
+      children: "Option 1"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+      value: "2",
+      children: "Option 2"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+      value: "3",
+      children: "Option 3"
+    })]
+  }),
+  name: 'With Info Button'
+};

package/esm/core/Select/index.js

@@ -0,0 +1,156 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Option", {
+  enumerable: true,
+  get: function () {
+    return _Option.default;
+  }
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Option = _interopRequireDefault(require("./Option"));
+var _styles = require("./styles");
+var _InfoButton = _interopRequireDefault(require("../InfoButton"));
+var _IconHelp = _interopRequireDefault(require("../../icons/General/IconHelp"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _IconChevronDown = _interopRequireDefault(require("../../icons/General/IconChevronDown"));
+var _List = _interopRequireDefault(require("../List"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/** @jsxImportSource @emotion/react */
+
+const Select = ({
+  input,
+  icon,
+  type = 'default',
+  native,
+  optionsWidth,
+  width,
+  maxHeight,
+  focus,
+  customOpenstyle,
+  customStyle,
+  trackingEvent,
+  trackingName,
+  disabled,
+  label,
+  closeKey,
+  className,
+  info,
+  infoPlacement = 'left',
+  ...props
+}) => {
+  const ref = /*#__PURE__*/(0, _react.createRef)();
+  const [open, toggleOpen] = (0, _react.useState)(false);
+  const onClick = function () {
+    toggleOpen(!open && !disabled);
+    props.onOpenChange?.(!open);
+  };
+  const handleOpen = open => {
+    toggleOpen(open);
+    props.onOpenChange?.(open);
+  };
+  (0, _react.useEffect)(() => {
+    if (closeKey) {
+      handleOpen(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [closeKey]);
+  (0, _react.useEffect)(() => {
+    const handleClickOutside = e => {
+      const node = ref.current;
+      if (node && node.contains(e.target)) {
+        return;
+      }
+      handleOpen(false);
+    };
+    if (open) {
+      const firstOption = ref.current?.querySelector('button, a, [tabindex]');
+      if (firstOption) {
+        firstOption.focus();
+      }
+      document.addEventListener('mousedown', handleClickOutside);
+    } else {
+      document.removeEventListener('mousedown', handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [open, ref]);
+  const onChange = value => {
+    if (props.onChange && !disabled) {
+      props.onChange(value);
+      handleOpen(false);
+    }
+  };
+  const Label = (0, _jsxRuntime.jsx)(_styles.StyledLabel, {
+    withInfo: Boolean(info),
+    children: label
+  });
+  const NonNative = (0, _jsxRuntime.jsxs)(_styles.SelectWrapper, {
+    ref: ref,
+    className: className,
+    css: theme => [_styles.styles.default, input && _styles.styles.input(theme), input && open && _styles.styles.open(theme), type === 'primary10' && _styles.styles.primary10(theme), icon && _styles.styles.withIcon, type === 'opacity08' && _styles.styles.opacity08(theme), width && _styles.styles.width(width), maxHeight && _styles.styles.maxHeight(maxHeight), customStyle && customStyle, open && customOpenstyle && customOpenstyle, disabled && _styles.styles.disabled(theme)],
+    "aria-expanded": open,
+    "aria-label": label ? label : 'Select',
+    children: [input && label && Label, info && (0, _jsxRuntime.jsx)("span", {
+      css: _styles.styles.infoButton,
+      children: (0, _jsxRuntime.jsx)(_InfoButton.default, {
+        icon: (0, _jsxRuntime.jsx)(_IconHelp.default, {
+          primary: true
+        }),
+        place: infoPlacement,
+        children: info
+      })
+    }), (0, _jsxRuntime.jsx)(_Button.default, {
+      nostyle: true,
+      afterIcon: (0, _jsxRuntime.jsx)(_IconChevronDown.default, {
+        flipVertical: open,
+        size: 14
+      }),
+      onClick: onClick,
+      beforeIcon: icon,
+      autoFocus: focus,
+      trackingName: trackingName,
+      trackingEvent: trackingEvent,
+      tabIndex: disabled ? -1 : undefined,
+      children: props.selectedValue ? props.selectedValue : props.text || ''
+    }), (0, _jsxRuntime.jsx)(_styles.OptionsWrapper, {
+      css: [input && _styles.styles.inputstyle(!!label), optionsWidth && _styles.styles.optionsWidth(optionsWidth), process.env.NODE_ENV === "production" ? "" : ";label:NonNative;"],
+      children: open ? (0, _jsxRuntime.jsx)(_List.default, {
+        selectList: true,
+        children: props.children.filter(x => x).map((child, key) => {
+          if (!child) {
+            return null;
+          }
+          return /*#__PURE__*/_react.default.cloneElement(child, {
+            onChange: onChange,
+            key
+          });
+        })
+      }) : null
+    })]
+  });
+  const Native = (0, _jsxRuntime.jsx)("select", {
+    className: className,
+    css: theme => [_styles.styles.default, input && _styles.styles.input(theme), input && open && _styles.styles.open(theme), type === 'primary10' && _styles.styles.primary10(theme), icon && _styles.styles.withIcon],
+    value: props.selectedValue ? props.selectedValue : props.text || '',
+    onChange: e => onChange(e.target.value),
+    children: props.children.filter(x => x).map((child, key) => {
+      if (!child) {
+        return null;
+      }
+      return (0, _jsxRuntime.jsx)("option", {
+        value: child.props.value,
+        children: child.props.children
+      }, key);
+    })
+  });
+  return native ? Native : NonNative;
+};
+var _default = exports.default = Select;