@rescui/select 0.12.5 → 0.13.0

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

@@ -1,15 +1,15 @@
 var styles = {
-  "sizeS": "_sizeS_1dbhsd6_3",
-  "sizeM": "_sizeM_1dbhsd6_6",
-  "sizeL": "_sizeL_1dbhsd6_9",
-  "menu": "_menu_1dbhsd6_13",
-  "menuSizeS": "_menuSizeS_1dbhsd6_26",
-  "menuSizeM": "_menuSizeM_1dbhsd6_30",
-  "menuSizeL": "_menuSizeL_1dbhsd6_34",
-  "withGroupsLabel": "_withGroupsLabel_1dbhsd6_40",
-  "lastOption": "_lastOption_1dbhsd6_39",
-  "divider": "_divider_1dbhsd6_45",
-  "checkIcon": "_checkIcon_1dbhsd6_51",
-  "observable": "_observable_1dbhsd6_56"
+  "sizeS": "_sizeS_1bcjdbr_3",
+  "sizeM": "_sizeM_1bcjdbr_6",
+  "sizeL": "_sizeL_1bcjdbr_9",
+  "menu": "_menu_1bcjdbr_13",
+  "menuSizeS": "_menuSizeS_1bcjdbr_26",
+  "menuSizeM": "_menuSizeM_1bcjdbr_30",
+  "menuSizeL": "_menuSizeL_1bcjdbr_34",
+  "withGroupsLabel": "_withGroupsLabel_1bcjdbr_40",
+  "lastOption": "_lastOption_1bcjdbr_39",
+  "divider": "_divider_1bcjdbr_45",
+  "checkIcon": "_checkIcon_1bcjdbr_51",
+  "observable": "_observable_1bcjdbr_56"
 };
 export { styles as default };

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

@@ -1,13 +1,13 @@
 var styles = {
-  "themeLight": "_themeLight_jhe1hb_7",
-  "themeDark": "_themeDark_jhe1hb_10",
-  "sizeS": "_sizeS_jhe1hb_14",
-  "sizeM": "_sizeM_jhe1hb_17",
-  "sizeL": "_sizeL_jhe1hb_20",
-  "main": "_main_jhe1hb_24",
-  "label": "_label_jhe1hb_28",
-  "errorMessage": "_errorMessage_jhe1hb_34",
-  "errorIcon": "_errorIcon_jhe1hb_45",
-  "note": "_note_jhe1hb_50"
+  "themeLight": "_themeLight_1ewks2a_7",
+  "themeDark": "_themeDark_1ewks2a_10",
+  "sizeS": "_sizeS_1ewks2a_14",
+  "sizeM": "_sizeM_1ewks2a_17",
+  "sizeL": "_sizeL_1ewks2a_20",
+  "main": "_main_1ewks2a_24",
+  "label": "_label_1ewks2a_28",
+  "errorMessage": "_errorMessage_1ewks2a_34",
+  "errorIcon": "_errorIcon_1ewks2a_45",
+  "note": "_note_1ewks2a_50"
 };
 export { styles as default };

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

@@ -1,9 +1,9 @@
 var styles = {
-  "sizeS": "_sizeS_1ir5zjx_6",
-  "sizeM": "_sizeM_1ir5zjx_9",
-  "sizeL": "_sizeL_1ir5zjx_12",
-  "main": "_main_1ir5zjx_16",
-  "wrapper": "_wrapper_1ir5zjx_20",
-  "select": "_select_1ir5zjx_24"
+  "sizeS": "_sizeS_8r62c0_6",
+  "sizeM": "_sizeM_8r62c0_9",
+  "sizeL": "_sizeL_8r62c0_12",
+  "main": "_main_8r62c0_16",
+  "wrapper": "_wrapper_8r62c0_20",
+  "select": "_select_8r62c0_24"
 };
 export { styles as default };

package/lib/parts/trigger.d.ts

@@ -22,7 +22,6 @@ declare type SelectTriggerPropsOwn = {
     error?: boolean;
 };
 export declare type SelectTriggerProps = SelectTriggerPropsOwn & Omit<HTMLAttributes<HTMLDivElement>, keyof SelectTriggerPropsOwn>;
-declare const SelectTrigger: React.FC<SelectTriggerProps>;
 export declare type SelectedOptionProps = {
     selected: SelectOption;
     searchInput?: string;
@@ -34,4 +33,5 @@ export declare type SelectedOptionProps = {
     handleFocus: React.FocusEventHandler<HTMLInputElement>;
     handleChange: React.ChangeEventHandler<HTMLInputElement>;
 };
+declare const SelectTrigger: React.FC<SelectTriggerProps>;
 export default SelectTrigger;

package/lib/parts/trigger.js

@@ -2,13 +2,12 @@
 import React, { useRef, useState } from 'react';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
-import { RemovableTag, Tag, presets } from '@rescui/tag';
+import { RemovableTag, Tag } from '@rescui/tag';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
 import DownIcon from '../_virtual/down.js';
 import CloseIcon from '../_virtual/close.js';
 import LoadingIcon from '../_virtual/loading.js';
 import { optionType } from '../common-prop-types.js';
-import { reverseTheme } from '../utils.js';
 import Foldable from './foldable.js';
 import styles from './trigger.p.module.css.js';
 const THEME_STYLES = {
@@ -23,111 +22,14 @@ const SIZE_STYLES = {
 const MODE_STYLES = {
   classic: styles.classic,
   rock: styles.rock
-}; // eslint-disable-next-line complexity
-
-const SelectTrigger = /*#__PURE__*/React.memo(props => {
-  const {
-    size,
-    mode,
-    theme: themeFromProps,
-    className,
-    triggerRef,
-    isOpen,
-    selected = null,
-    placeholder,
-    isClearable,
-    isLoading,
-    isDisabled,
-    isSingleLine,
-    searchInput,
-    isSearchable,
-    onClearClick,
-    onItemClearClick,
-    onSearchChange,
-    error,
-    ...restProps
-  } = props;
-  const theme = useThemeWithUndefined(themeFromProps);
-  const inputRef = useRef(null);
-  const [isSearchFocused, setIsSearchFocused] = useState(false);
-  const [isFocused, setIsFocused] = useState(false);
-  const [isSearchKeyFocused, setIsSearchKeyFocused] = useState(false);
-  const isMulti = selected ? Boolean(selected.length) : false;
-
-  const handleChange = event => {
-    const newValue = event.target.value;
-    onSearchChange(newValue);
-  };
-
-  const handleBlur = () => {
-    if (isSearchable && inputRef.current) {
-      setIsSearchFocused(false);
-      setIsSearchKeyFocused(false);
-    }
-  };
-
-  const handleFocus = e => {
-    if (isSearchable && inputRef.current) {
-      setIsSearchFocused(true);
-      const target = e.target;
-      setIsSearchKeyFocused(target.getAttribute('data-focus-method') === 'key');
-    }
-  };
-
-  const isThemeReversed = mode === 'rock' && (isSearchFocused || isFocused || isOpen);
-  return /*#__PURE__*/React.createElement("div", {
-    tabIndex: isSearchable || isDisabled ? -1 : 0,
-    className: cn(styles.main, SIZE_STYLES[size], MODE_STYLES[mode], THEME_STYLES[theme], isMulti && styles.isMulti, isSearchFocused && styles.searchFocused, isSearchKeyFocused && styles.searchKeyFocused, isOpen && styles.open, isDisabled ? styles.disabled : styles.enabled, Boolean(error) && styles.error, isFocused && styles.focused, className),
-    onFocus: e => {
-      const target = e.target;
-      setIsFocused(target.getAttribute('data-focus-method') === 'key');
-    },
-    onBlur: () => setIsFocused(false),
-    ref: triggerRef,
-    "data-test": "select",
-    "data-rs-internal": 'select-trigger',
-    ...restProps
-  }, isMulti ? /*#__PURE__*/React.createElement(MultiselectOptions, {
-    selected: selected,
-    isDisabled: isDisabled,
-    isSingleLine: isSingleLine,
-    onItemClearClick: onItemClearClick,
-    theme: theme,
-    isThemeReversed: isThemeReversed
-  }) : /*#__PURE__*/React.createElement(SelectedOption, {
-    selected: selected,
-    placeholder: placeholder,
-    searchInput: searchInput,
-    isSearchable: isSearchable,
-    isDisabled: isDisabled,
-    inputRef: inputRef,
-    handleBlur: handleBlur,
-    handleFocus: handleFocus,
-    handleChange: handleChange
-  }), /*#__PURE__*/React.createElement("div", {
-    className: styles.iconsWrapper
-  }, /*#__PURE__*/React.createElement(ClearOrLoading, {
-    isLoading: isLoading,
-    isDisabled: isDisabled,
-    isClearable: isClearable,
-    onClearClick: onClearClick,
-    selected: selected
-  }), /*#__PURE__*/React.createElement(DownIcon, {
-    className: styles.toggle,
-    "data-test": "down-icon",
-    "data-render-all-sizes": true
-  })));
-});
-SelectTrigger.displayName = 'SelectTrigger';
+};
 
 const MultiselectOptions = _ref => {
   let {
     isSingleLine,
     selected,
-    isThemeReversed,
     isDisabled,
-    onItemClearClick,
-    theme
+    onItemClearClick
   } = _ref;
   const selectedOptions = selected.map(s => {
     const key = s.value ? s.value : s.label;
@@ -138,22 +40,19 @@ const MultiselectOptions = _ref => {
       disabled: isDisabled,
       onRemoveClick: () => onItemClearClick(s),
       "data-rs-internal": 'select-trigger__removable-tag',
-      wrap: !isSingleLine,
-      theme: isThemeReversed ? reverseTheme(theme) : theme
+      wrap: !isSingleLine
     }, s.label);
   });
-  const tagTheme = isThemeReversed ? reverseTheme(theme) : theme;
   return /*#__PURE__*/React.createElement("div", {
     className: styles.multi,
     "data-test": "multi"
   }, isSingleLine ? /*#__PURE__*/React.createElement(Foldable, {
     className: styles.tagsContainer,
     renderHiddenCounter: (n, ref) => /*#__PURE__*/React.createElement(Tag, {
-      className: styles.tag,
+      className: cn(styles.tag, styles.filledTag),
       key: "+",
       ref: ref,
-      "data-rs-internal": 'select-trigger__tag',
-      ...presets[`filled-${tagTheme}`]
+      "data-rs-internal": 'select-trigger__tag'
     }, `+${n}`)
   }, selectedOptions) : /*#__PURE__*/React.createElement("div", {
     className: styles.tagsContainer
@@ -236,8 +135,100 @@ const ClearOrLoading = _ref3 => {
   } else {
     return null;
   }
-};
+}; // eslint-disable-next-line complexity
+
+
+const SelectTrigger = /*#__PURE__*/React.memo(props => {
+  const {
+    size,
+    mode,
+    theme: themeFromProps,
+    className,
+    triggerRef,
+    isOpen,
+    selected = null,
+    placeholder,
+    isClearable,
+    isLoading,
+    isDisabled,
+    isSingleLine,
+    searchInput,
+    isSearchable,
+    onClearClick,
+    onItemClearClick,
+    onSearchChange,
+    error,
+    ...restProps
+  } = props;
+  const theme = useThemeWithUndefined(themeFromProps);
+  const inputRef = useRef(null);
+  const [isSearchFocused, setIsSearchFocused] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const [isSearchKeyFocused, setIsSearchKeyFocused] = useState(false);
+  const isMulti = selected ? Boolean(selected.length) : false;
+
+  const handleChange = event => {
+    const newValue = event.target.value;
+    onSearchChange(newValue);
+  };
+
+  const handleBlur = () => {
+    if (isSearchable && inputRef.current) {
+      setIsSearchFocused(false);
+      setIsSearchKeyFocused(false);
+    }
+  };
+
+  const handleFocus = e => {
+    if (isSearchable && inputRef.current) {
+      setIsSearchFocused(true);
+      const target = e.target;
+      setIsSearchKeyFocused(target.getAttribute('data-focus-method') === 'key');
+    }
+  };
 
+  return /*#__PURE__*/React.createElement("div", {
+    tabIndex: isSearchable || isDisabled ? -1 : 0,
+    className: cn(styles.main, SIZE_STYLES[size], MODE_STYLES[mode], THEME_STYLES[theme], isMulti && styles.isMulti, isSearchFocused && styles.searchFocused, isSearchKeyFocused && styles.searchKeyFocused, isOpen && styles.open, isDisabled ? styles.disabled : styles.enabled, Boolean(error) && styles.error, isFocused && styles.focused, className),
+    onFocus: e => {
+      const target = e.target;
+      setIsFocused(target.getAttribute('data-focus-method') === 'key');
+    },
+    onBlur: () => setIsFocused(false),
+    ref: triggerRef,
+    "data-test": "select",
+    "data-rs-internal": 'select-trigger',
+    ...restProps
+  }, isMulti ? /*#__PURE__*/React.createElement(MultiselectOptions, {
+    selected: selected,
+    isDisabled: isDisabled,
+    isSingleLine: isSingleLine,
+    onItemClearClick: onItemClearClick
+  }) : /*#__PURE__*/React.createElement(SelectedOption, {
+    selected: selected,
+    placeholder: placeholder,
+    searchInput: searchInput,
+    isSearchable: isSearchable,
+    isDisabled: isDisabled,
+    inputRef: inputRef,
+    handleBlur: handleBlur,
+    handleFocus: handleFocus,
+    handleChange: handleChange
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.iconsWrapper
+  }, /*#__PURE__*/React.createElement(ClearOrLoading, {
+    isLoading: isLoading,
+    isDisabled: isDisabled,
+    isClearable: isClearable,
+    onClearClick: onClearClick,
+    selected: selected
+  }), /*#__PURE__*/React.createElement(DownIcon, {
+    className: styles.toggle,
+    "data-test": "down-icon",
+    "data-render-all-sizes": true
+  })));
+});
+SelectTrigger.displayName = 'SelectTrigger';
 SelectTrigger.propTypes = {
   size: PropTypes.oneOf(['m', 's', 'l']),
   mode: PropTypes.oneOf(['classic', 'rock']),

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

@@ -1,30 +1,31 @@
 var styles = {
-  "themeLight": "_themeLight_1m1udjp_27",
-  "themeDark": "_themeDark_1m1udjp_30",
-  "sizeS": "_sizeS_1m1udjp_34",
-  "sizeM": "_sizeM_1m1udjp_37",
-  "sizeL": "_sizeL_1m1udjp_40",
-  "classic": "_classic_1m1udjp_44",
-  "rock": "_rock_1m1udjp_47",
-  "main": "_main_1m1udjp_51",
-  "open": "_open_1m1udjp_73",
-  "focused": "_focused_1m1udjp_77",
-  "searchFocused": "_searchFocused_1m1udjp_78",
-  "error": "_error_1m1udjp_80",
-  "searchKeyFocused": "_searchKeyFocused_1m1udjp_85",
-  "enabled": "_enabled_1m1udjp_89",
-  "disabled": "_disabled_1m1udjp_95",
-  "isMulti": "_isMulti_1m1udjp_125",
-  "iconsWrapper": "_iconsWrapper_1m1udjp_143",
-  "labelWrapper": "_labelWrapper_1m1udjp_168",
-  "label": "_label_1m1udjp_168",
-  "labelNotSelected": "_labelNotSelected_1m1udjp_218",
-  "searchInput": "_searchInput_1m1udjp_231",
-  "multi": "_multi_1m1udjp_271",
-  "tagsContainer": "_tagsContainer_1m1udjp_291",
-  "tag": "_tag_1m1udjp_291",
-  "toggle": "_toggle_1m1udjp_313",
-  "icon": "_icon_1m1udjp_143",
-  "clearIcon": "_clearIcon_1m1udjp_380"
+  "themeLight": "_themeLight_xqlygf_27",
+  "themeDark": "_themeDark_xqlygf_30",
+  "sizeS": "_sizeS_xqlygf_34",
+  "sizeM": "_sizeM_xqlygf_37",
+  "sizeL": "_sizeL_xqlygf_40",
+  "classic": "_classic_xqlygf_44",
+  "rock": "_rock_xqlygf_47",
+  "main": "_main_xqlygf_51",
+  "open": "_open_xqlygf_80",
+  "searchKeyFocused": "_searchKeyFocused_xqlygf_85",
+  "error": "_error_xqlygf_89",
+  "disabled": "_disabled_xqlygf_95",
+  "enabled": "_enabled_xqlygf_103",
+  "searchFocused": "_searchFocused_xqlygf_104",
+  "focused": "_focused_xqlygf_105",
+  "isMulti": "_isMulti_xqlygf_138",
+  "iconsWrapper": "_iconsWrapper_xqlygf_142",
+  "labelWrapper": "_labelWrapper_xqlygf_157",
+  "label": "_label_xqlygf_157",
+  "labelNotSelected": "_labelNotSelected_xqlygf_197",
+  "searchInput": "_searchInput_xqlygf_210",
+  "multi": "_multi_xqlygf_240",
+  "tagsContainer": "_tagsContainer_xqlygf_256",
+  "tag": "_tag_xqlygf_256",
+  "filledTag": "_filledTag_xqlygf_279",
+  "toggle": "_toggle_xqlygf_286",
+  "icon": "_icon_xqlygf_142",
+  "clearIcon": "_clearIcon_xqlygf_353"
 };
 export { styles as default };

package/lib/utils.d.ts

@@ -1,4 +1,3 @@
-import { Theme } from '@rescui/ui-contexts';
 import type { SelectOptionOrGroup, SelectOptionsGroup, NoOptionsMessage, SelectSize } from './types';
 import { Groups, Index, SelectOption } from './types';
 export declare function shouldOpenSelect(key: string, isTriggerTarget?: boolean): boolean;
@@ -6,7 +5,6 @@ export declare function getEmptyMessage(isLoading: boolean, isNothingFound: bool
 export declare function escapeRegex(str: string): string;
 export declare function convertToOptionGroupsIfNeeded(optionsOrGroups?: SelectOptionOrGroup[]): SelectOptionsGroup[];
 export declare const calculateMaxHeight: (size: SelectSize) => number;
-export declare const reverseTheme: (theme: Theme) => "light" | "dark";
 export declare function getOptionValue(option: SelectOption): string;
 export declare const OptionGroupTypes: {
     HEADER: string;

package/lib/utils.js

@@ -82,10 +82,6 @@ const calculateMaxHeight = size => {
   return (Math.ceil(MAX_VISIBLE_ITEMS) + 0.5) * itemHeight;
 };
 
-const reverseTheme = theme => {
-  return theme === 'dark' ? 'light' : 'dark';
-};
-
 function getOptionValue(option) {
   return typeof option.value === 'string' ? option.value : option.label;
 }
@@ -177,4 +173,4 @@ const isIndexMatchCursor = (cursorIndex, index) => {
 
 const withoutGroupsLabel = groups => groups.every(g => !g.label);
 
-export { OptionGroupTypes, calculateMaxHeight, convertToOptionGroupsIfNeeded, escapeRegex, getDefaultCursorIndex, getEmptyMessage, getMovedCursorIndex, getOptionValue, getPlainOptionsFromGroups, isGroupsEmpty, isIndexMatchCursor, reverseTheme, shouldOpenSelect, useStrongMemo, withoutGroupsLabel };
+export { OptionGroupTypes, calculateMaxHeight, convertToOptionGroupsIfNeeded, escapeRegex, getDefaultCursorIndex, getEmptyMessage, getMovedCursorIndex, getOptionValue, getPlainOptionsFromGroups, isGroupsEmpty, isIndexMatchCursor, shouldOpenSelect, useStrongMemo, withoutGroupsLabel };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/select",
-  "version": "0.12.5",
+  "version": "0.13.0",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -16,9 +16,9 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.26.0",
-    "@rescui/dropdown": "^0.8.4",
-    "@rescui/menu": "^0.12.1",
-    "@rescui/tag": "^0.12.0",
+    "@rescui/dropdown": "^0.9.0",
+    "@rescui/menu": "^0.12.2",
+    "@rescui/tag": "^0.12.1",
     "@rescui/use-resize-observer": "^0.3.0",
     "classnames": "^2.2.6",
     "scroll-into-view-if-needed": "2.2.20"
@@ -29,10 +29,10 @@
     "react": ">=16.8.0 <20"
   },
   "devDependencies": {
-    "@rescui/colors": "^0.2.11",
+    "@rescui/colors": "^0.2.12",
     "@rescui/scripts": "^0.5.1",
-    "@rescui/typography": "^0.24.1",
-    "@rescui/visual-regression": "^0.1.3",
+    "@rescui/typography": "^0.24.2",
+    "@rescui/visual-regression": "^0.1.4",
     "sniffr": "^1.2.0"
   },
   "scripts": {
@@ -40,5 +40,5 @@
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "3f57184bd5ba6bc008d8bec7b4a76dbb231b3920"
+  "gitHead": "4c9832a9e5fc1fe7a9a0c863f73f7f14088e3fd5"
 }