@rescui/select 0.9.4 → 0.10.0

package/lib/parts/common-select.p.module.css.js

@@ -1,4 +1,15 @@
 var styles = {
-  "menu": "_menu_16fx7i9_1"
+  "sizeS": "_sizeS_1wcbmgg_3",
+  "sizeM": "_sizeM_1wcbmgg_6",
+  "sizeL": "_sizeL_1wcbmgg_9",
+  "menu": "_menu_1wcbmgg_13",
+  "menuSizeS": "_menuSizeS_1wcbmgg_26",
+  "menuSizeM": "_menuSizeM_1wcbmgg_30",
+  "menuSizeL": "_menuSizeL_1wcbmgg_34",
+  "withGroupsLabel": "_withGroupsLabel_1wcbmgg_40",
+  "lastOption": "_lastOption_1wcbmgg_39",
+  "divider": "_divider_1wcbmgg_45",
+  "checkIcon": "_checkIcon_1wcbmgg_51",
+  "observable": "_observable_1wcbmgg_56"
 };
 export { styles as default };

package/lib/parts/foldable.d.ts

@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 export declare type FoldableProps = {
     className?: string;
     children: React.ReactNode;
-    gap?: number;
     renderHiddenCounter?: (num: number, ref: React.Ref<HTMLElement>) => React.ReactNode;
 };
 declare type FoldableState = {

package/lib/parts/foldable.js

@@ -140,7 +140,8 @@ var Foldable = /*#__PURE__*/function (_Component) {
         plusNWidth = measureElement(plusNRef.current).width;
       }
 
-      var gap = _this.props.gap || 0;
+      var containerStyles = getComputedStyle(containerRef.current);
+      var gap = parseInt(containerStyles.getPropertyValue('--_rs-select-trigger-foldable-gap'), 10) || 0;
 
       var _lastVisibleIndex = lastVisibleIndex(_this.childrenWidths, containerWidth, gap, plusNWidth + gap + 1),
           _lastVisibleIndex2 = _slicedToArray(_lastVisibleIndex, 2),

package/lib/parts/form-trigger-wrapper.d.ts

@@ -10,6 +10,7 @@ export declare type FormTriggerWrapperProps = {
     note?: React.ReactNode;
     onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
     boldLabel?: boolean;
+    children?: React.ReactNode;
 };
-declare const FormTriggerWrapper: React.FC<FormTriggerWrapperProps>;
+declare const FormTriggerWrapper: React.ForwardRefExoticComponent<FormTriggerWrapperProps & React.RefAttributes<HTMLDivElement>>;
 export default FormTriggerWrapper;

package/lib/parts/form-trigger-wrapper.js

@@ -1,7 +1,6 @@
-import "core-js/modules/es.string.bold.js";
 import React from 'react';
 import cn from 'classnames';
-import { useTheme, ThemeProvider } from '@rescui/ui-contexts';
+import { useThemeWithUndefined } from '@rescui/ui-contexts';
 import styles from './form-trigger.p.module.css.js';
 var SIZE_STYLES = {
   l: styles.sizeL,
@@ -15,19 +14,19 @@ var THEME_STYLES = {
 
 var Label = function Label(_ref) {
   var children = _ref.children,
-      size = _ref.size,
       boldLabel = _ref.boldLabel;
 
   if (!children) {
     return null;
   } else {
     return /*#__PURE__*/React.createElement("div", {
-      className: cn(styles.label, boldLabel && styles.bold)
+      className: styles.label,
+      "data-rs-internal": boldLabel ? 'select-form-trigger-wrapper__bold-label' : 'select-form-trigger-wrapper__label'
     }, children);
   }
 };
 
-var FormTriggerWrapper = function FormTriggerWrapper(_ref2) {
+var FormTriggerWrapper = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var size = _ref2.size,
       themeFromProps = _ref2.theme,
       className = _ref2.className,
@@ -37,22 +36,23 @@ var FormTriggerWrapper = function FormTriggerWrapper(_ref2) {
       children = _ref2.children,
       onKeyDown = _ref2.onKeyDown,
       boldLabel = _ref2.boldLabel;
-  var theme = useTheme(themeFromProps);
-  return /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, /*#__PURE__*/React.createElement("div", {
-    className: cn(className, SIZE_STYLES[size], THEME_STYLES[theme]),
-    "data-test": "select-wrapper"
+  var theme = useThemeWithUndefined(themeFromProps);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn(className, styles.main, SIZE_STYLES[size], THEME_STYLES[theme]),
+    ref: ref,
+    "data-test": "select-wrapper",
+    "data-rs-internal": 'select-form-trigger-wrapper'
   }, /*#__PURE__*/React.createElement(Label, {
-    boldLabel: boldLabel,
-    size: size
+    boldLabel: boldLabel
   }, label), /*#__PURE__*/React.createElement("div", {
     onKeyDown: onKeyDown
   }, children), error && /*#__PURE__*/React.createElement("div", {
-    className: styles.errorMessage
+    className: styles.errorMessage,
+    "data-rs-internal": 'select-form-trigger-wrapper__error-message'
   }, error), note && /*#__PURE__*/React.createElement("div", {
-    className: styles.note
-  }, note)));
-};
-
+    className: styles.note,
+    "data-rs-internal": 'select-form-trigger-wrapper__note'
+  }, note));
+});
+FormTriggerWrapper.displayName = 'FormTriggerWrapper';
 export { FormTriggerWrapper as default };

package/lib/parts/form-trigger.p.module.css.js

@@ -1,13 +1,12 @@
 var styles = {
-  "errorMessage": "_errorMessage_1jznt74_4",
-  "sizeL": "_sizeL_1jznt74_8",
-  "label": "_label_1jznt74_9",
-  "note": "_note_1jznt74_12",
-  "sizeM": "_sizeM_1jznt74_17",
-  "sizeS": "_sizeS_1jznt74_26",
-  "themeLight": "_themeLight_1jznt74_36",
-  "themeDark": "_themeDark_1jznt74_40",
-  "rs-reset-letter-spacing": "_rs-reset-letter-spacing_1jznt74_1",
-  "bold": "_bold_1jznt74_77"
+  "themeLight": "_themeLight_72ccy2_7",
+  "themeDark": "_themeDark_72ccy2_10",
+  "sizeS": "_sizeS_72ccy2_14",
+  "sizeM": "_sizeM_72ccy2_17",
+  "sizeL": "_sizeL_72ccy2_20",
+  "main": "_main_72ccy2_24",
+  "label": "_label_72ccy2_28",
+  "errorMessage": "_errorMessage_72ccy2_36",
+  "note": "_note_72ccy2_43"
 };
 export { styles as default };

package/lib/parts/multiselect.js

@@ -1,3 +1,7 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
 import _toConsumableArray from "@babel/runtime-corejs3/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
@@ -11,43 +15,35 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/web.dom-collections.for-each.js";
 import "core-js/modules/es.function.name.js";
-import React, { useRef, useState, useEffect, useMemo, useCallback } from 'react';
+import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import PropTypes from 'prop-types';
+import cn from 'classnames';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import { CheckIcon } from '@rescui/icons';
 import { Dropdown } from '@rescui/dropdown';
 import { Menu, MenuItem, Divider, GroupHeader } from '@rescui/menu';
-import { useTheme } from '@rescui/ui-contexts';
-import { useStrongMemo, getDefaultCursorIndex, isGroupsEmpty, getOptionValue, getMovedCursorIndex, shouldOpenSelect, isIndexMatchCursor, reverseTheme, getPlainOptionsFromGroups, getEmptyMessage, withoutGroupsLabel, OptionGroupTypes, convertToOptionGroupsIfNeeded, calculateMaxHeight } from '../utils.js';
+import { useThemeWithUndefined } from '@rescui/ui-contexts';
+import { useStrongMemo, getDefaultCursorIndex, isGroupsEmpty, getOptionValue, getMovedCursorIndex, shouldOpenSelect, isIndexMatchCursor, withoutGroupsLabel, getPlainOptionsFromGroups, getEmptyMessage, OptionGroupTypes, convertToOptionGroupsIfNeeded, calculateMaxHeight } from '../utils.js';
 import { optionType, optionsGroupType, noOptionsMessageType } from '../common-prop-types.js';
 import { ARROW_DOWN, ARROW_UP, ENTER, SPACE, TAB, ESCAPE, BACKSPACE } from '../key-codes.js';
 import SelectTrigger from './trigger.js';
 import FormTriggerWrapper from './form-trigger-wrapper.js';
+import { useObservableForceRerender } from './use-observable-force-rerender.js';
 import styles from './common-select.p.module.css.js'; // eslint-disable-next-line complexity
 
 var Option = function Option(_ref) {
-  var groups = _ref.groups,
-      selected = _ref.selected,
+  var selected = _ref.selected,
       cursorIndex = _ref.cursorIndex,
-      size = _ref.size,
       item = _ref.item,
       isSingleLine = _ref.isSingleLine,
       isLastItem = _ref.isLastItem,
       highlightedItemRef = _ref.highlightedItemRef,
       handleHighlightIndex = _ref.handleHighlightIndex,
       handleSelectIndex = _ref.handleSelectIndex;
-  var marginInPx = withoutGroupsLabel(groups) ? 0 : {
-    l: 12,
-    m: 6,
-    s: 0
-  }[size];
 
   if (item.type === OptionGroupTypes.OPTION) {
     var index = item.index,
@@ -58,7 +54,7 @@ var Option = function Option(_ref) {
     }));
     var isHighlighted = isIndexMatchCursor(cursorIndex, index);
     var icon = isSingleLine && isItemSelected ? /*#__PURE__*/React.createElement(CheckIcon, {
-      size: size
+      className: styles.checkIcon
     }) : null;
     return /*#__PURE__*/React.createElement(MenuItem, {
       selected: isItemSelected,
@@ -70,18 +66,14 @@ var Option = function Option(_ref) {
       onClick: function onClick() {
         return handleSelectIndex(index);
       },
-      style: {
-        marginBottom: isLastItem ? "".concat(marginInPx, "px") : ''
-      },
+      className: cn(isLastItem && styles.lastOption),
       icon: icon
     }, label);
   }
 
   if (item.type === OptionGroupTypes.DIVIDER) {
     return /*#__PURE__*/React.createElement(Divider, {
-      style: {
-        marginTop: "".concat(marginInPx, "px")
-      }
+      className: styles.divider
     });
   }
 
@@ -159,8 +151,19 @@ var NativeSelectedOptions = function NativeSelectedOptions(_ref2) {
   }));
 };
 
+var SIZE_STYLES = {
+  s: styles.sizeS,
+  m: styles.sizeM,
+  l: styles.sizeL
+};
+var MENU_SIZE_STYLES = {
+  s: styles.menuSizeS,
+  m: styles.menuSizeM,
+  l: styles.menuSizeL
+}; // eslint-disable-next-line complexity
+
 var Multiselect = function Multiselect(_ref4) {
-  var _context4;
+  var _context5;
 
   var options = _ref4.options,
       _ref4$size = _ref4.size,
@@ -188,14 +191,19 @@ var Multiselect = function Multiselect(_ref4) {
       boldLabel = _ref4.boldLabel,
       restProps = _objectWithoutProperties(_ref4, _excluded);
 
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      triggerFormWrapperRef = _useState2[0],
+      setTriggerFormWrapperRef = _useState2[1];
+
   var dropdownRef = useRef(null);
   var highlightedItemRef = useRef();
-  var theme = useTheme(themeFromProps);
+  var theme = useThemeWithUndefined(themeFromProps);
 
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isKeyboardNavigating = _useState2[0],
-      setIsKeyboardNavigating = _useState2[1];
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isKeyboardNavigating = _useState4[0],
+      setIsKeyboardNavigating = _useState4[1];
 
   var skipScrollingRef = useRef(false);
   var groups = useStrongMemo(function () {
@@ -209,17 +217,17 @@ var Multiselect = function Multiselect(_ref4) {
     return filterSelected(groups, value);
   }, [isSingleLine, value, groups]);
 
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      menuIsOpen = _useState4[0],
-      setMenuIsOpen = _useState4[1];
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      menuIsOpen = _useState6[0],
+      setMenuIsOpen = _useState6[1];
 
-  var _useState5 = useState(function () {
+  var _useState7 = useState(function () {
     return getDefaultCursorIndex(filteredGroups);
   }),
-      _useState6 = _slicedToArray(_useState5, 2),
-      cursorIndex = _useState6[0],
-      setCursorIndex = _useState6[1];
+      _useState8 = _slicedToArray(_useState7, 2),
+      cursorIndex = _useState8[0],
+      setCursorIndex = _useState8[1];
 
   useEffect(function () {
     setCursorIndex(getDefaultCursorIndex(filteredGroups));
@@ -379,8 +387,29 @@ var Multiselect = function Multiselect(_ref4) {
     if (!isIndexMatchCursor(cursorIndex, index)) {
       setCursorIndex(index);
     }
-  }, [cursorIndex]);
-  var maxHeight = calculateMaxHeight(size);
+  }, [cursorIndex]); // We use invisible and "untouchable" dummy element to observe `size` changes from css to trigger force rerenders
+
+  var observableRef = useObservableForceRerender();
+  var sizeFromCss = null;
+
+  if (triggerFormWrapperRef && menuIsOpen) {
+    var _context4;
+
+    // In theory this part of the code might cause issues with SSR.
+    // But in this specific context, because of checking ref "triggerFormWrapperRef",
+    // we are sure that the value will still be "null" on the first render.
+    // Therefore, the first render on the client will be the same as on the server.
+    // Also, there will be no layout shifts on the following renders because
+    // it's a dropdown-content and in most cases it opens only on-demand.
+    // In additional, we use "observable" el to watch size changes between rerenders (@media query case).
+    var triggerFormWrapperStyles = getComputedStyle(triggerFormWrapperRef);
+    var rawSizeFromCss = triggerFormWrapperStyles.getPropertyValue('--_rs-select-size');
+    sizeFromCss = _includesInstanceProperty(_context4 = ['s', 'm', 'l']).call(_context4, rawSizeFromCss) ? rawSizeFromCss : null;
+  }
+
+  var actualSize = sizeFromCss || size;
+  var maxHeight = calculateMaxHeight(actualSize);
+  var withGroupsLabel = !withoutGroupsLabel(filteredGroups);
   return /*#__PURE__*/React.createElement(Dropdown, {
     theme: theme,
     onRequestClose: handleClose,
@@ -396,7 +425,8 @@ var Multiselect = function Multiselect(_ref4) {
     trigger: function trigger(_ref5) {
       var ref = _ref5.ref;
       return /*#__PURE__*/React.createElement(FormTriggerWrapper, {
-        className: className,
+        ref: setTriggerFormWrapperRef,
+        className: cn(className, SIZE_STYLES[size]),
         theme: theme,
         size: size,
         error: restProps.error,
@@ -404,7 +434,10 @@ var Multiselect = function Multiselect(_ref4) {
         note: restProps.note,
         onKeyDown: handleTriggerKeyDown,
         boldLabel: boldLabel
-      }, restProps.name && /*#__PURE__*/React.createElement(NativeSelectedOptions, {
+      }, /*#__PURE__*/React.createElement("div", {
+        ref: observableRef,
+        className: styles.observable
+      }), restProps.name && /*#__PURE__*/React.createElement(NativeSelectedOptions, {
         name: restProps.name,
         selected: value
       }), /*#__PURE__*/React.createElement(SelectTrigger, {
@@ -430,19 +463,16 @@ var Multiselect = function Multiselect(_ref4) {
     isOpen: menuIsOpen
   }, /*#__PURE__*/React.createElement(Menu, {
     "data-test": "option-list",
-    size: size,
-    theme: mode === 'rock' ? reverseTheme(theme) : theme,
+    size: actualSize,
+    className: cn(styles.menu, withGroupsLabel && styles.withGroupsLabel, MENU_SIZE_STYLES[actualSize]),
     disableCursor: isKeyboardNavigating,
     iconPlacement: 'right',
-    className: styles.menu,
     enableKeyboardNavigation: false
-  }, !isEmptyMenu ? _mapInstanceProperty(_context4 = getPlainOptionsFromGroups(filteredGroups)).call(_context4, function (item, i, collection) {
+  }, !isEmptyMenu ? _mapInstanceProperty(_context5 = getPlainOptionsFromGroups(filteredGroups)).call(_context5, function (item, i, collection) {
     return /*#__PURE__*/React.createElement(Option, {
       key: getOptionKey(item, i),
-      groups: filteredGroups,
       selected: value,
       cursorIndex: cursorIndex,
-      size: size,
       item: item,
       isSingleLine: isSingleLine,
       isLastItem: i === collection.length - 1,

package/lib/parts/native-select.js

@@ -20,7 +20,7 @@ import "core-js/modules/es.function.name.js";
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
-import { useTheme } from '@rescui/ui-contexts';
+import { useThemeWithUndefined } from '@rescui/ui-contexts';
 import { optionType, optionsGroupType, noOptionsMessageType } from '../common-prop-types.js';
 import SelectTrigger from './trigger.js';
 import FormTriggerWrapper from './form-trigger-wrapper.js';
@@ -173,7 +173,7 @@ var NativeSelect = function NativeSelect(_ref7) {
       noOptionsMessage = _ref7.noOptionsMessage,
       name = _ref7.name,
       boldLabel = _ref7.boldLabel;
-  var theme = useTheme(themeFromProps);
+  var theme = useThemeWithUndefined(themeFromProps);
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -222,7 +222,7 @@ var NativeSelect = function NativeSelect(_ref7) {
   }
 
   return /*#__PURE__*/React.createElement(FormTriggerWrapper, {
-    className: className,
+    className: cn(className, styles.main, SIZE_STYLES[size]),
     theme: theme,
     size: size,
     error: error,
@@ -233,7 +233,7 @@ var NativeSelect = function NativeSelect(_ref7) {
     },
     boldLabel: boldLabel
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles.main,
+    className: styles.wrapper,
     onMouseEnter: function onMouseEnter() {
       return setHovered(true);
     },
@@ -244,7 +244,8 @@ var NativeSelect = function NativeSelect(_ref7) {
     "data-test": "native-select"
   }, _trigger, /*#__PURE__*/React.createElement("select", {
     "data-test": "native-select_select",
-    className: cn(styles.select, SIZE_STYLES[size]),
+    "data-rs-internal": 'select-native__select',
+    className: styles.select,
     disabled: isDisabled ? true : undefined,
     onChange: handleChange,
     name: name,

package/lib/parts/native-select.p.module.css.js

@@ -1,9 +1,9 @@
 var styles = {
-  "main": "_main_vh650b_3",
-  "select": "_select_vh650b_7",
-  "sizeL": "_sizeL_vh650b_19",
-  "rs-reset-letter-spacing": "_rs-reset-letter-spacing_vh650b_1",
-  "sizeM": "_sizeM_vh650b_23",
-  "sizeS": "_sizeS_vh650b_27"
+  "sizeS": "_sizeS_6puso5_6",
+  "sizeM": "_sizeM_6puso5_9",
+  "sizeL": "_sizeL_6puso5_12",
+  "main": "_main_6puso5_16",
+  "wrapper": "_wrapper_6puso5_20",
+  "select": "_select_6puso5_24"
 };
 export { styles as default };

package/lib/parts/trigger.js

@@ -19,7 +19,7 @@ import React, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import { RemovableTag, Tag, presets } from '@rescui/tag';
-import { useTheme } from '@rescui/ui-contexts';
+import { useThemeWithUndefined } from '@rescui/ui-contexts';
 import { DownIcon, LoadingIcon, CloseIcon } from '@rescui/icons';
 import { optionType } from '../common-prop-types.js';
 import { reverseTheme } from '../utils.js';
@@ -39,11 +39,6 @@ var SIZE_STYLES = {
 var MODE_STYLES = {
   classic: styles.classic,
   rock: styles.rock
-};
-var TAG_SIZE = {
-  s: 'xs',
-  m: 's',
-  l: 'm'
 }; // eslint-disable-next-line complexity
 
 var SelectTrigger = /*#__PURE__*/React.memo(function (props) {
@@ -68,7 +63,7 @@ var SelectTrigger = /*#__PURE__*/React.memo(function (props) {
       error = props.error,
       restProps = _objectWithoutProperties(props, _excluded);
 
-  var theme = useTheme(themeFromProps);
+  var theme = useThemeWithUndefined(themeFromProps);
   var inputRef = useRef(null);
 
   var _useState = useState(false),
@@ -120,10 +115,10 @@ var SelectTrigger = /*#__PURE__*/React.memo(function (props) {
       return setIsFocused(false);
     },
     ref: triggerRef,
-    "data-test": "select"
+    "data-test": "select",
+    "data-rs-internal": 'select-trigger'
   }, restProps), isMulti ? /*#__PURE__*/React.createElement(MultiselectOptions, {
     selected: selected,
-    size: size,
     isDisabled: isDisabled,
     isSingleLine: isSingleLine,
     onItemClearClick: onItemClearClick,
@@ -146,10 +141,8 @@ var SelectTrigger = /*#__PURE__*/React.memo(function (props) {
     isDisabled: isDisabled,
     isClearable: isClearable,
     onClearClick: onClearClick,
-    selected: selected,
-    size: size
+    selected: selected
   }), /*#__PURE__*/React.createElement(DownIcon, {
-    size: size,
     className: styles.toggle,
     "data-test": "down-icon"
   })));
@@ -160,7 +153,6 @@ var MultiselectOptions = function MultiselectOptions(_ref) {
   var isSingleLine = _ref.isSingleLine,
       selected = _ref.selected,
       isThemeReversed = _ref.isThemeReversed,
-      size = _ref.size,
       isDisabled = _ref.isDisabled,
       onItemClearClick = _ref.onItemClearClick,
       theme = _ref.theme;
@@ -175,7 +167,7 @@ var MultiselectOptions = function MultiselectOptions(_ref) {
       onRemoveClick: function onRemoveClick() {
         return onItemClearClick(s);
       },
-      size: TAG_SIZE[size],
+      "data-rs-internal": 'select-trigger__removable-tag',
       wrap: !isSingleLine,
       theme: isThemeReversed ? reverseTheme(theme) : theme
     }, s.label);
@@ -192,14 +184,9 @@ var MultiselectOptions = function MultiselectOptions(_ref) {
         className: styles.tag,
         key: "+",
         ref: ref,
-        size: TAG_SIZE[size]
+        "data-rs-internal": 'select-trigger__tag'
       }, presets["filled-".concat(tagTheme)]), "+".concat(n));
-    },
-    gap: {
-      l: 8,
-      m: 4,
-      s: 4
-    }[size]
+    }
   }, selectedOptions) : /*#__PURE__*/React.createElement("div", {
     className: styles.tagsContainer
   }, selectedOptions));
@@ -229,7 +216,7 @@ var SelectedOption = function SelectedOption(_ref2) {
   return /*#__PURE__*/React.createElement("div", {
     className: styles.labelWrapper
   }, /*#__PURE__*/React.createElement("div", {
-    className: cn(styles.label, isSelectedEmpty(selected) && styles.notSelected),
+    className: cn(styles.label, isSelectedEmpty(selected) && styles.labelNotSelected),
     "data-test": "select-content"
   }, searchInput === '' ? selected && selected.label ? selected.label : placeholder : ''), isSearchable && !isDisabled && /*#__PURE__*/React.createElement("input", {
     ref: inputRef,
@@ -253,15 +240,13 @@ var ClearOrLoading = function ClearOrLoading(_ref3) {
       isLoading = _ref3.isLoading,
       isDisabled = _ref3.isDisabled,
       onClearClick = _ref3.onClearClick,
-      selected = _ref3.selected,
-      size = _ref3.size;
+      selected = _ref3.selected;
 
   if (isLoading) {
     return /*#__PURE__*/React.createElement(LoadingIcon, {
       style: {
         pointerEvents: 'none'
       },
-      size: size,
       className: styles.icon,
       "data-test": "loading-icon"
     });
@@ -274,9 +259,7 @@ var ClearOrLoading = function ClearOrLoading(_ref3) {
         e.stopPropagation();
         onClearClick();
       }
-    }, /*#__PURE__*/React.createElement(CloseIcon, {
-      size: size
-    }));
+    }, /*#__PURE__*/React.createElement(CloseIcon, null));
   } else {
     return null;
   }

package/lib/parts/trigger.p.module.css.js

@@ -1,30 +1,30 @@
 var styles = {
-  "main": "_main_qhbyjk_24",
-  "open": "_open_qhbyjk_36",
-  "enabled": "_enabled_qhbyjk_41",
-  "disabled": "_disabled_qhbyjk_45",
-  "focused": "_focused_qhbyjk_49",
-  "searchFocused": "_searchFocused_qhbyjk_50",
-  "sizeL": "_sizeL_qhbyjk_56",
-  "sizeM": "_sizeM_qhbyjk_59",
-  "rs-reset-letter-spacing": "_rs-reset-letter-spacing_qhbyjk_1",
-  "sizeS": "_sizeS_qhbyjk_62",
-  "isMulti": "_isMulti_qhbyjk_136",
-  "error": "_error_qhbyjk_69",
-  "notSelected": "_notSelected_qhbyjk_144",
-  "themeLight": "_themeLight_qhbyjk_148",
-  "searchKeyFocused": "_searchKeyFocused_qhbyjk_154",
-  "rock": "_rock_qhbyjk_168",
-  "toggle": "_toggle_qhbyjk_173",
-  "labelWrapper": "_labelWrapper_qhbyjk_177",
-  "themeDark": "_themeDark_qhbyjk_199",
-  "label": "_label_qhbyjk_177",
-  "iconsWrapper": "_iconsWrapper_qhbyjk_285",
-  "searchInput": "_searchInput_qhbyjk_340",
-  "multi": "_multi_qhbyjk_366",
-  "tagsContainer": "_tagsContainer_qhbyjk_375",
-  "tag": "_tag_qhbyjk_375",
-  "icon": "_icon_qhbyjk_285",
-  "clearIcon": "_clearIcon_qhbyjk_490"
+  "themeLight": "_themeLight_d1n327_27",
+  "themeDark": "_themeDark_d1n327_30",
+  "sizeS": "_sizeS_d1n327_34",
+  "sizeM": "_sizeM_d1n327_37",
+  "sizeL": "_sizeL_d1n327_40",
+  "classic": "_classic_d1n327_44",
+  "rock": "_rock_d1n327_47",
+  "main": "_main_d1n327_51",
+  "open": "_open_d1n327_73",
+  "focused": "_focused_d1n327_77",
+  "searchFocused": "_searchFocused_d1n327_78",
+  "error": "_error_d1n327_80",
+  "searchKeyFocused": "_searchKeyFocused_d1n327_85",
+  "enabled": "_enabled_d1n327_89",
+  "disabled": "_disabled_d1n327_95",
+  "isMulti": "_isMulti_d1n327_125",
+  "iconsWrapper": "_iconsWrapper_d1n327_143",
+  "labelWrapper": "_labelWrapper_d1n327_168",
+  "label": "_label_d1n327_168",
+  "labelNotSelected": "_labelNotSelected_d1n327_218",
+  "searchInput": "_searchInput_d1n327_231",
+  "multi": "_multi_d1n327_271",
+  "tagsContainer": "_tagsContainer_d1n327_291",
+  "tag": "_tag_d1n327_291",
+  "toggle": "_toggle_d1n327_313",
+  "icon": "_icon_d1n327_143",
+  "clearIcon": "_clearIcon_d1n327_380"
 };
 export { styles as default };

package/lib/parts/use-observable-force-rerender.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const useObservableForceRerender: () => import("react").MutableRefObject<HTMLDivElement>;

package/lib/parts/use-observable-force-rerender.js

@@ -0,0 +1,23 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import { useRef, useState } from 'react';
+import { useResizeObserver } from '@rescui/use-resize-observer';
+
+var useObservableForceRerender = function useObservableForceRerender() {
+  var observableRef = useRef(null);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      setDummyState = _useState2[1];
+
+  useResizeObserver(observableRef, function () {
+    //force rerender
+    setDummyState(function (s) {
+      return !s;
+    });
+  }, {
+    ignoreFirstCall: true
+  });
+  return observableRef;
+};
+
+export { useObservableForceRerender };