@invoicebox/ui 0.1.0-alpha.32 → 0.1.0-alpha.320

package/dist/esm/components/form/SearchInput/components/SearchIcon/index.stories.js

@@ -0,0 +1,8 @@
+import { SearchIcon } from '.';
+var meta = {
+  title: 'form/SearchInput/_components/SearchIcon',
+  component: SearchIcon,
+  tags: ['autodocs']
+};
+export default meta;
+export var Default = {};

package/dist/esm/components/form/SearchInput/index.js

@@ -0,0 +1,88 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useCallback, forwardRef, useId } from 'react';
+import * as S from './styles';
+import { InputLabel } from '../InputLabel';
+import { PureInput } from '../PureInput';
+import { useInputFocus } from '../../../hooks/useInputFocus';
+import { SearchIcon } from './components/SearchIcon';
+import { useComponentPalette } from '../../../palette';
+import { ResetButton } from '../ResetButton';
+import { useInputStyles } from '../_hooks/useInputStyles';
+export var SearchInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var name = _ref.name,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur,
+    onChange = _ref.onChange,
+    placeholder = _ref.placeholder,
+    hasBorder = _ref.hasBorder,
+    value = _ref.value,
+    autoFocus = _ref.autoFocus,
+    isOnlyNumbers = _ref.isOnlyNumbers,
+    maxLength = _ref.maxLength,
+    size = _ref.size,
+    _ref$useModernStyles = _ref.useModernStyles,
+    useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles,
+    id = _ref.id;
+  var _useInputFocus = useInputFocus({
+      onFocus: onFocus,
+      onBlur: onBlur
+    }),
+    inFocus = _useInputFocus.inFocus,
+    handleFocus = _useInputFocus.handleFocus,
+    handleBlur = _useInputFocus.handleBlur;
+  var fallbackId = useId();
+  var inputId = id !== null && id !== void 0 ? id : fallbackId;
+  var palette = useComponentPalette('searchInput');
+  var _useInputStyles = useInputStyles({
+      isHaveValue: !!value,
+      useModernStyles: useModernStyles,
+      size: size,
+      label: placeholder,
+      inFocus: inFocus,
+      placeholder: placeholder,
+      paddingRight: 56
+    }),
+    inputLabel = _useInputStyles.inputLabel,
+    paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
+    modernPlaceholder = _useInputStyles.modernPlaceholder,
+    fieldSize = _useInputStyles.fieldSize;
+  var handleInputReset = useCallback(function () {
+    onChange('');
+  }, [onChange]);
+  var handleInputChange = useCallback(function (event) {
+    onChange(event.target.value);
+  }, [onChange]);
+  return /*#__PURE__*/React.createElement(InputLabel, {
+    useModernStyles: useModernStyles,
+    size: fieldSize,
+    label: useModernStyles ? inputLabel : undefined,
+    htmlFor: inputId
+  }, modernPlaceholder, /*#__PURE__*/React.createElement(PureInput, _extends({
+    ref: ref,
+    id: inputId,
+    "aria-label": useModernStyles && inputLabel ? undefined : placeholder,
+    paddingRight: 56,
+    hasBorder: hasBorder,
+    onChange: handleInputChange,
+    placeholder: useModernStyles ? undefined : placeholder,
+    value: value,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    inFocus: inFocus
+    // eslint-disable-next-line jsx-a11y/no-autofocus -- проп прокидывается потребителю, решение об автофокусе за ним
+    ,
+    autoFocus: autoFocus,
+    name: name,
+    maxLength: maxLength,
+    isOnlyNumbers: isOnlyNumbers
+  }, paddingAndVariantOptions, {
+    useModernStyles: useModernStyles
+  })), /*#__PURE__*/React.createElement(S.IconWrapper, {
+    $inFocus: inFocus,
+    $palette: palette,
+    $useModernStyles: useModernStyles
+  }, value ? /*#__PURE__*/React.createElement(ResetButton, {
+    onClick: handleInputReset
+  }) : /*#__PURE__*/React.createElement(SearchIcon, null)));
+});
+SearchInput.displayName = 'SearchInput';

package/dist/esm/components/form/SearchInput/index.stories.js

@@ -0,0 +1,33 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import React from 'react';
+import { SearchInput } from './index';
+import { useState } from 'react';
+var meta = {
+  title: 'form/SearchInput',
+  component: SearchInput,
+  tags: ['autodocs']
+};
+export default meta;
+var Component = function Component(props) {
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  return /*#__PURE__*/React.createElement(SearchInput, _extends({}, props, {
+    value: value,
+    onChange: setValue
+  }));
+};
+export var Default = {
+  args: {
+    hasBorder: true,
+    placeholder: 'Поиск'
+  },
+  render: Component
+};

package/dist/esm/components/form/SearchInput/palette.js

@@ -0,0 +1,5 @@
+export var generateSearchInputPalette = function generateSearchInputPalette(abstractPalette) {
+  return {
+    icon: abstractPalette.primary
+  };
+};

package/dist/esm/components/form/SearchInput/styles.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import { reducedMotion } from '../../../utils/reducedMotion';
+export var IconWrapper = styled.span.withConfig({
+  displayName: "styles__IconWrapper",
+  componentId: "sc-1cx3n6g-0"
+})(["position:absolute;right:20px;bottom:", ";transform:translateY(50%);display:flex;align-content:center;justify-content:center;opacity:", ";transition:all 0.2s ease-in-out 0s;color:", ";", ""], function (_ref) {
+  var $useModernStyles = _ref.$useModernStyles;
+  return !$useModernStyles ? "calc(50% - 5px)" : '50%';
+}, function (_ref2) {
+  var $inFocus = _ref2.$inFocus;
+  return $inFocus ? 1 : 0.5;
+}, function (_ref3) {
+  var $palette = _ref3.$palette;
+  return $palette.icon;
+}, reducedMotion);

package/dist/esm/components/form/Select/components/Input/index.js

@@ -0,0 +1,81 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { forwardRef, useId } from 'react';
+import * as S from './styles';
+import { InputLabel } from '../../../InputLabel';
+import { PureInput } from '../../../PureInput';
+import { Arrow } from '../../../../common/Arrow';
+import { ResetButton } from '../../../ResetButton';
+import { useInputStyles } from '../../../_hooks/useInputStyles';
+export var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var hasError = _ref.hasError,
+    _ref$inFocus = _ref.inFocus,
+    inFocus = _ref$inFocus === void 0 ? false : _ref$inFocus,
+    placeholder = _ref.placeholder,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur,
+    value = _ref.value,
+    renderedValue = _ref.renderedValue,
+    name = _ref.name,
+    label = _ref.label,
+    isOpen = _ref.isOpen,
+    onReset = _ref.onReset,
+    size = _ref.size,
+    onClick = _ref.onClick,
+    required = _ref.required,
+    _ref$useModernStyles = _ref.useModernStyles,
+    useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles,
+    id = _ref.id,
+    comboboxProps = _ref.comboboxProps;
+  var fallbackId = useId();
+  var inputId = id !== null && id !== void 0 ? id : fallbackId;
+  var _useInputStyles = useInputStyles({
+      isHaveValue: !!value,
+      useModernStyles: useModernStyles,
+      size: size,
+      label: label,
+      inFocus: inFocus,
+      placeholder: placeholder,
+      required: required,
+      paddingRight: 52
+    }),
+    inputLabel = _useInputStyles.inputLabel,
+    paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
+    modernPlaceholder = _useInputStyles.modernPlaceholder,
+    fieldSize = _useInputStyles.fieldSize;
+  var isShowResetIcon = !!value && !!onReset;
+  return /*#__PURE__*/React.createElement(InputLabel, {
+    inFocus: inFocus,
+    label: inputLabel,
+    required: required,
+    useModernStyles: useModernStyles,
+    size: fieldSize,
+    htmlFor: inputId
+  }, /*#__PURE__*/React.createElement(S.ControlWrapper, null, modernPlaceholder, /*#__PURE__*/React.createElement(PureInput, _extends({
+    id: inputId,
+    "aria-label": label && !inputLabel ? label : undefined,
+    ref: ref,
+    hasError: hasError,
+    inFocus: inFocus,
+    name: name,
+    placeholder: useModernStyles ? undefined : placeholder,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    value: value,
+    renderedValue: renderedValue,
+    readOnly: true,
+    paddingRight: 52,
+    onClick: onClick,
+    useModernStyles: useModernStyles
+    // с renderedValue PureInput рендерится как div — без tabIndex
+    // он был бы недостижим с клавиатуры
+    ,
+    tabIndex: renderedValue ? 0 : undefined
+  }, comboboxProps, paddingAndVariantOptions)), /*#__PURE__*/React.createElement(S.IconWrapper, {
+    $pointerEvents: isShowResetIcon ? 'default' : 'none'
+  }, isShowResetIcon ? /*#__PURE__*/React.createElement(ResetButton, {
+    onClick: onReset
+  }) : /*#__PURE__*/React.createElement(Arrow, {
+    isOpen: isOpen
+  }))));
+});
+Input.displayName = 'Input';

package/dist/esm/components/form/Select/components/Input/index.stories.js

@@ -0,0 +1,21 @@
+import { action } from '@storybook/addon-actions';
+import { Input } from '.';
+var meta = {
+  title: 'form/Select/_components/Input',
+  component: Input,
+  tags: ['autodocs']
+};
+export default meta;
+export var Default = {
+  args: {
+    hasError: false,
+    inFocus: false,
+    placeholder: 'placeholder',
+    onFocus: action('focus'),
+    onBlur: action('blur'),
+    value: 'Selected option',
+    name: 'name',
+    label: 'label',
+    isOpen: false
+  }
+};

package/dist/esm/components/form/Select/components/Input/styles.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+export var IconWrapper = styled.div.withConfig({
+  displayName: "styles__IconWrapper",
+  componentId: "sc-1fsrle6-0"
+})(["position:absolute;right:14px;height:100%;top:0;display:flex;align-items:center;pointer-events:", ";"], function (_ref) {
+  var $pointerEvents = _ref.$pointerEvents;
+  return $pointerEvents;
+});
+export var ControlWrapper = styled.div.withConfig({
+  displayName: "styles__ControlWrapper",
+  componentId: "sc-1fsrle6-1"
+})(["position:relative;"]);

package/dist/esm/components/form/Select/components/Loader/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import * as S from './styles';
+var Loader = function Loader() {
+  return /*#__PURE__*/React.createElement(S.Wrapper, null, /*#__PURE__*/React.createElement(S.SvgLoader, {
+    viewBox: "25 25 50 50"
+  }, /*#__PURE__*/React.createElement(S.CircleLoader, {
+    className: "loader-path",
+    cx: "50",
+    cy: "50",
+    r: "20",
+    fill: "none",
+    stroke: "#70c542",
+    strokeWidth: "2"
+  })));
+};
+export default Loader;

package/dist/esm/components/form/Select/components/Loader/styles.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+export var Wrapper = styled.div.withConfig({
+  displayName: "styles__Wrapper",
+  componentId: "sc-86q913-0"
+})(["height:24px;width:24px;position:relative;margin:0 auto;@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}@-webkit-keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0;}50%{stroke-dasharray:89,200;stroke-dashoffset:-35;}100%{stroke-dasharray:89,200;stroke-dashoffset:-124;}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0;}50%{stroke-dasharray:89,200;stroke-dashoffset:-35;}100%{stroke-dasharray:89,200;stroke-dashoffset:-124;}}@-webkit-keyframes color{0%{stroke:#353f47;}40%{stroke:#353f47;}66%{stroke:#353f47;}80%,90%{stroke:#353f47;}}@keyframes color{0%{stroke:#353f47;}40%{stroke:#353f47;}66%{stroke:#353f47;}80%,90%{stroke:#353f47;}}"]);
+export var SvgLoader = styled.svg.withConfig({
+  displayName: "styles__SvgLoader",
+  componentId: "sc-86q913-1"
+})(["-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite;height:100%;-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto;"]);
+export var CircleLoader = styled.circle.withConfig({
+  displayName: "styles__CircleLoader",
+  componentId: "sc-86q913-2"
+})(["stroke-dasharray:150,200;stroke-dashoffset:-10;-webkit-animation:dash 1.5s ease-in-out infinite,color 6s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite,color 6s ease-in-out infinite;stroke-linecap:round;"]);

package/dist/esm/components/form/Select/components/MultipleValue/index.js

@@ -0,0 +1,120 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import * as S from './styles';
+import { useComponentPalette } from '../../../../../palette';
+import { Chip } from '../../../../common/Chip';
+var CHIP_SIZE = 'xs';
+export var MultipleValue = function MultipleValue(_ref) {
+  var _chipProps$color, _chipProps$bgColor, _chipProps$size;
+  var selectedOptions = _ref.selectedOptions,
+    onRemove = _ref.onRemove,
+    _ref$collapse = _ref.collapse,
+    collapse = _ref$collapse === void 0 ? false : _ref$collapse,
+    chipProps = _ref.chipProps;
+  var palette = useComponentPalette('select');
+  var chipColor = (_chipProps$color = chipProps === null || chipProps === void 0 ? void 0 : chipProps.color) !== null && _chipProps$color !== void 0 ? _chipProps$color : palette.tagColor;
+  var chipBgColor = (_chipProps$bgColor = chipProps === null || chipProps === void 0 ? void 0 : chipProps.bgColor) !== null && _chipProps$bgColor !== void 0 ? _chipProps$bgColor : palette.tagBg;
+  var chipSize = (_chipProps$size = chipProps === null || chipProps === void 0 ? void 0 : chipProps.size) !== null && _chipProps$size !== void 0 ? _chipProps$size : CHIP_SIZE;
+  var wrapperRef = useRef(null);
+  var tagRefs = useRef([]);
+  var counterRef = useRef(null);
+  var _useState = useState(selectedOptions.length),
+    _useState2 = _slicedToArray(_useState, 2),
+    visibleCount = _useState2[0],
+    setVisibleCount = _useState2[1];
+  var handleRemove = useCallback(function (event, value) {
+    event.preventDefault();
+    event.stopPropagation();
+    onRemove(value);
+  }, [onRemove]);
+  useLayoutEffect(function () {
+    if (!collapse) {
+      setVisibleCount(selectedOptions.length);
+      return undefined;
+    }
+    var wrapper = wrapperRef.current;
+    if (!wrapper) return undefined;
+    var recalculate = function recalculate() {
+      var _counterRef$current;
+      var total = selectedOptions.length;
+      var containerWidth = wrapper.clientWidth;
+      var widths = tagRefs.current.slice(0, total).map(function (el) {
+        return (el === null || el === void 0 ? void 0 : el.offsetWidth) || 0;
+      });
+      var counterWidth = ((_counterRef$current = counterRef.current) === null || _counterRef$current === void 0 ? void 0 : _counterRef$current.offsetWidth) || 0;
+      var countFitting = function countFitting(reserve) {
+        var used = 0;
+        var count = 0;
+        for (var i = 0; i < total; i += 1) {
+          var width = widths[i] + (count > 0 ? S.TAGS_GAP : 0);
+          if (used + width <= containerWidth - reserve) {
+            used += width;
+            count += 1;
+          } else {
+            break;
+          }
+        }
+        return count;
+      };
+      var count = countFitting(0);
+      // если влезли не все теги, оставляем место под счётчик "+N"
+      if (count < total) {
+        count = Math.max(countFitting(counterWidth + S.TAGS_GAP), 1);
+      }
+      setVisibleCount(count);
+    };
+    recalculate();
+    var observer = new ResizeObserver(recalculate);
+    observer.observe(wrapper);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [collapse, selectedOptions]);
+  var safeVisibleCount = collapse ? visibleCount : selectedOptions.length;
+  var hiddenCount = selectedOptions.length - safeVisibleCount;
+  var hiddenStyle = {
+    position: 'absolute',
+    visibility: 'hidden',
+    pointerEvents: 'none'
+  };
+  return /*#__PURE__*/React.createElement(S.Wrapper, {
+    ref: wrapperRef,
+    $collapse: collapse
+  }, selectedOptions.map(function (option, index) {
+    return /*#__PURE__*/React.createElement(S.ItemWrapper, {
+      key: option.value,
+      ref: function ref(el) {
+        tagRefs.current[index] = el;
+      },
+      style: collapse && index >= safeVisibleCount ? hiddenStyle : undefined
+    }, /*#__PURE__*/React.createElement(Chip, {
+      size: chipSize,
+      color: chipColor,
+      bgColor: chipBgColor,
+      label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.TagLabel, {
+        variant: "smallMedium"
+      }, option.label), /*#__PURE__*/React.createElement(S.TagRemove, {
+        type: "button",
+        onMouseDown: function onMouseDown(event) {
+          return event.preventDefault();
+        },
+        onClick: function onClick(event) {
+          return handleRemove(event, option.value);
+        }
+      }, "\xD7"))
+    }));
+  }), collapse && /*#__PURE__*/React.createElement(S.ItemWrapper, {
+    ref: counterRef,
+    style: hiddenCount > 0 ? undefined : hiddenStyle
+  }, /*#__PURE__*/React.createElement(Chip, {
+    size: chipSize,
+    color: chipColor,
+    bgColor: chipBgColor,
+    label: "+".concat(hiddenCount)
+  })));
+};

package/dist/esm/components/form/Select/components/MultipleValue/styles.js

@@ -0,0 +1,22 @@
+import styled, { css } from 'styled-components';
+import { Typography } from '../../../../common/Typography';
+export var TAGS_GAP = 6;
+export var Wrapper = styled.div.withConfig({
+  displayName: "styles__Wrapper",
+  componentId: "sc-gzjw07-0"
+})(["display:flex;align-items:center;gap:", "px;width:100%;min-width:0;", ""], TAGS_GAP, function (_ref) {
+  var $collapse = _ref.$collapse;
+  return $collapse ? css(["flex-wrap:nowrap;overflow:hidden;"]) : css(["flex-wrap:wrap;"]);
+});
+export var ItemWrapper = styled.div.withConfig({
+  displayName: "styles__ItemWrapper",
+  componentId: "sc-gzjw07-1"
+})(["display:inline-flex;flex:0 0 auto;max-width:100%;"]);
+export var TagLabel = styled(Typography).withConfig({
+  displayName: "styles__TagLabel",
+  componentId: "sc-gzjw07-2"
+})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
+export var TagRemove = styled.button.withConfig({
+  displayName: "styles__TagRemove",
+  componentId: "sc-gzjw07-3"
+})(["display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:14px;height:14px;padding:0;border:none;background:none;color:inherit;font-size:16px;line-height:1;cursor:pointer;"]);

package/dist/esm/components/form/Select/hooks/useOptionGroups.js

@@ -0,0 +1,27 @@
+import { useMemo } from 'react';
+export var useOptionGroups = function useOptionGroups(options, groups) {
+  return useMemo(function () {
+    var optionsByGroupId = new Map();
+    options.forEach(function (option) {
+      var item = optionsByGroupId.get(option.groupId);
+      if (item) {
+        item.push(option);
+      } else {
+        optionsByGroupId.set(option.groupId, [option]);
+      }
+    });
+    var optionGroups = groups.map(function (group) {
+      return {
+        group: group,
+        options: optionsByGroupId.get(group.id) || []
+      };
+    });
+    optionGroups.push({
+      group: null,
+      options: optionsByGroupId.get(undefined) || []
+    });
+    return optionGroups.filter(function (item) {
+      return item.options.length > 0;
+    });
+  }, [groups, options]);
+};