@rescui/select 0.11.7 → 0.11.9-RUI-226-Update-card-cn-6e43cc89.60

package/lib/parts/trigger.js

@@ -1,23 +1,6 @@
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/web.dom-collections.for-each.js";
-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 _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-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 _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["size", "mode", "theme", "className", "triggerRef", "isOpen", "selected", "placeholder", "isClearable", "isLoading", "isDisabled", "isSingleLine", "searchInput", "isSearchable", "onClearClick", "onItemClearClick", "onSearchChange", "error"];
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React, { useRef, useState } from 'react';
-import PropTypes from 'prop-types';
 import cn from 'classnames';
+import PropTypes from 'prop-types';
 import { RemovableTag, Tag, presets } from '@rescui/tag';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
 import DownIcon from '../_virtual/down.js';
@@ -29,97 +12,83 @@ import Foldable from './foldable.js';
 import styles from './trigger.p.module.css.js';
 /* eslint-disable no-nested-ternary */
 
-var THEME_STYLES = {
+const THEME_STYLES = {
   light: styles.themeLight,
   dark: styles.themeDark
 };
-var SIZE_STYLES = {
+const SIZE_STYLES = {
   s: styles.sizeS,
   m: styles.sizeM,
   l: styles.sizeL
 };
-var MODE_STYLES = {
+const MODE_STYLES = {
   classic: styles.classic,
   rock: styles.rock
 }; // eslint-disable-next-line complexity
 
-var SelectTrigger = /*#__PURE__*/React.memo(function (props) {
-  var size = props.size,
-      mode = props.mode,
-      themeFromProps = props.theme,
-      className = props.className,
-      triggerRef = props.triggerRef,
-      isOpen = props.isOpen,
-      _props$selected = props.selected,
-      selected = _props$selected === void 0 ? null : _props$selected,
-      placeholder = props.placeholder,
-      isClearable = props.isClearable,
-      isLoading = props.isLoading,
-      isDisabled = props.isDisabled,
-      isSingleLine = props.isSingleLine,
-      searchInput = props.searchInput,
-      isSearchable = props.isSearchable,
-      onClearClick = props.onClearClick,
-      onItemClearClick = props.onItemClearClick,
-      onSearchChange = props.onSearchChange,
-      error = props.error,
-      restProps = _objectWithoutProperties(props, _excluded);
-
-  var theme = useThemeWithUndefined(themeFromProps);
-  var inputRef = useRef(null);
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isSearchFocused = _useState2[0],
-      setIsSearchFocused = _useState2[1];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isFocused = _useState4[0],
-      setIsFocused = _useState4[1];
-
-  var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      isSearchKeyFocused = _useState6[0],
-      setIsSearchKeyFocused = _useState6[1];
+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;
 
-  var isMulti = selected ? Boolean(selected.length) : false;
-
-  var handleChange = function handleChange(event) {
-    var newValue = event.target.value;
+  const handleChange = event => {
+    const newValue = event.target.value;
     onSearchChange(newValue);
   };
 
-  var handleBlur = function handleBlur() {
+  const handleBlur = () => {
     if (isSearchable && inputRef.current) {
       setIsSearchFocused(false);
       setIsSearchKeyFocused(false);
     }
   };
 
-  var handleFocus = function handleFocus(e) {
+  const handleFocus = e => {
     if (isSearchable && inputRef.current) {
       setIsSearchFocused(true);
-      var target = e.target;
+      const target = e.target;
       setIsSearchKeyFocused(target.getAttribute('data-focus-method') === 'key');
     }
   };
 
-  var isThemeReversed = mode === 'rock' && (isSearchFocused || isFocused || isOpen);
-  return /*#__PURE__*/React.createElement("div", _objectSpread({
+  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: function onFocus(e) {
-      var target = e.target;
+    onFocus: e => {
+      const target = e.target;
       setIsFocused(target.getAttribute('data-focus-method') === 'key');
     },
-    onBlur: function onBlur() {
-      return setIsFocused(false);
-    },
+    onBlur: () => setIsFocused(false),
     ref: triggerRef,
     "data-test": "select",
-    "data-rs-internal": 'select-trigger'
-  }, restProps), isMulti ? /*#__PURE__*/React.createElement(MultiselectOptions, {
+    "data-rs-internal": 'select-trigger',
+    ...restProps
+  }, isMulti ? /*#__PURE__*/React.createElement(MultiselectOptions, {
     selected: selected,
     isDisabled: isDisabled,
     isSingleLine: isSingleLine,
@@ -146,49 +115,47 @@ var SelectTrigger = /*#__PURE__*/React.memo(function (props) {
     selected: selected
   }), /*#__PURE__*/React.createElement(DownIcon, {
     className: styles.toggle,
-    "data-test": "down-icon"
+    "data-test": "down-icon",
+    "data-render-all-sizes": true
   })));
 });
 SelectTrigger.displayName = 'SelectTrigger';
 
-var MultiselectOptions = function MultiselectOptions(_ref) {
-  var isSingleLine = _ref.isSingleLine,
-      selected = _ref.selected,
-      isThemeReversed = _ref.isThemeReversed,
-      isDisabled = _ref.isDisabled,
-      onItemClearClick = _ref.onItemClearClick,
-      theme = _ref.theme;
-
-  var selectedOptions = _mapInstanceProperty(selected).call(selected, function (s) {
-    var key = s.value ? s.value : s.label;
+const MultiselectOptions = _ref => {
+  let {
+    isSingleLine,
+    selected,
+    isThemeReversed,
+    isDisabled,
+    onItemClearClick,
+    theme
+  } = _ref;
+  const selectedOptions = selected.map(s => {
+    const key = s.value ? s.value : s.label;
     return /*#__PURE__*/React.createElement(RemovableTag, {
       key: key,
-      "data-test": "selected-tag-".concat(key),
+      "data-test": `selected-tag-${key}`,
       className: styles.tag,
       disabled: isDisabled,
-      onRemoveClick: function onRemoveClick() {
-        return onItemClearClick(s);
-      },
+      onRemoveClick: () => onItemClearClick(s),
       "data-rs-internal": 'select-trigger__removable-tag',
       wrap: !isSingleLine,
       theme: isThemeReversed ? reverseTheme(theme) : theme
     }, s.label);
   });
-
-  var tagTheme = isThemeReversed ? reverseTheme(theme) : theme;
+  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: function renderHiddenCounter(n, ref) {
-      return /*#__PURE__*/React.createElement(Tag, _objectSpread({
-        className: styles.tag,
-        key: "+",
-        ref: ref,
-        "data-rs-internal": 'select-trigger__tag'
-      }, presets["filled-".concat(tagTheme)]), "+".concat(n));
-    }
+    renderHiddenCounter: (n, ref) => /*#__PURE__*/React.createElement(Tag, {
+      className: styles.tag,
+      key: "+",
+      ref: ref,
+      "data-rs-internal": 'select-trigger__tag',
+      ...presets[`filled-${tagTheme}`]
+    }, `+${n}`)
   }, selectedOptions) : /*#__PURE__*/React.createElement("div", {
     className: styles.tagsContainer
   }, selectedOptions));
@@ -203,18 +170,18 @@ function isSelectedEmpty(selected) {
 } // eslint-disable-next-line complexity
 
 
-var SelectedOption = function SelectedOption(_ref2) {
-  var selected = _ref2.selected,
-      _ref2$searchInput = _ref2.searchInput,
-      searchInput = _ref2$searchInput === void 0 ? '' : _ref2$searchInput,
-      _ref2$placeholder = _ref2.placeholder,
-      placeholder = _ref2$placeholder === void 0 ? '' : _ref2$placeholder,
-      isSearchable = _ref2.isSearchable,
-      isDisabled = _ref2.isDisabled,
-      inputRef = _ref2.inputRef,
-      handleBlur = _ref2.handleBlur,
-      handleFocus = _ref2.handleFocus,
-      handleChange = _ref2.handleChange;
+const SelectedOption = _ref2 => {
+  let {
+    selected,
+    searchInput = '',
+    placeholder = '',
+    isSearchable,
+    isDisabled,
+    inputRef,
+    handleBlur,
+    handleFocus,
+    handleChange
+  } = _ref2;
   return /*#__PURE__*/React.createElement("div", {
     className: styles.labelWrapper
   }, /*#__PURE__*/React.createElement("div", {
@@ -237,12 +204,14 @@ var SelectedOption = function SelectedOption(_ref2) {
   }));
 };
 
-var ClearOrLoading = function ClearOrLoading(_ref3) {
-  var isClearable = _ref3.isClearable,
-      isLoading = _ref3.isLoading,
-      isDisabled = _ref3.isDisabled,
-      onClearClick = _ref3.onClearClick,
-      selected = _ref3.selected;
+const ClearOrLoading = _ref3 => {
+  let {
+    isClearable,
+    isLoading,
+    isDisabled,
+    onClearClick,
+    selected
+  } = _ref3;
 
   if (isLoading) {
     return /*#__PURE__*/React.createElement(LoadingIcon, {
@@ -250,18 +219,21 @@ var ClearOrLoading = function ClearOrLoading(_ref3) {
         pointerEvents: 'none'
       },
       className: styles.icon,
-      "data-test": "loading-icon"
+      "data-test": "loading-icon",
+      "data-render-all-sizes": true
     });
   } else if (isClearable && !isDisabled && !isSelectedEmpty(selected)) {
     return /*#__PURE__*/React.createElement("button", {
       type: "button",
       className: cn(styles.icon, styles.clearIcon),
       "data-test": "clear-icon",
-      onClick: function onClick(e) {
+      onClick: e => {
         e.stopPropagation();
         onClearClick();
       }
-    }, /*#__PURE__*/React.createElement(CloseIcon, null));
+    }, /*#__PURE__*/React.createElement(CloseIcon, {
+      "data-render-all-sizes": true
+    }));
   } else {
     return null;
   }

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

@@ -1,30 +1,30 @@
 var styles = {
-  "themeLight": "_themeLight_1wnutq5_27",
-  "themeDark": "_themeDark_1wnutq5_30",
-  "sizeS": "_sizeS_1wnutq5_34",
-  "sizeM": "_sizeM_1wnutq5_37",
-  "sizeL": "_sizeL_1wnutq5_40",
-  "classic": "_classic_1wnutq5_44",
-  "rock": "_rock_1wnutq5_47",
-  "main": "_main_1wnutq5_51",
-  "open": "_open_1wnutq5_73",
-  "focused": "_focused_1wnutq5_77",
-  "searchFocused": "_searchFocused_1wnutq5_78",
-  "error": "_error_1wnutq5_80",
-  "searchKeyFocused": "_searchKeyFocused_1wnutq5_85",
-  "enabled": "_enabled_1wnutq5_89",
-  "disabled": "_disabled_1wnutq5_95",
-  "isMulti": "_isMulti_1wnutq5_125",
-  "iconsWrapper": "_iconsWrapper_1wnutq5_143",
-  "labelWrapper": "_labelWrapper_1wnutq5_168",
-  "label": "_label_1wnutq5_168",
-  "labelNotSelected": "_labelNotSelected_1wnutq5_218",
-  "searchInput": "_searchInput_1wnutq5_231",
-  "multi": "_multi_1wnutq5_271",
-  "tagsContainer": "_tagsContainer_1wnutq5_291",
-  "tag": "_tag_1wnutq5_291",
-  "toggle": "_toggle_1wnutq5_313",
-  "icon": "_icon_1wnutq5_143",
-  "clearIcon": "_clearIcon_1wnutq5_380"
+  "themeLight": "_themeLight_v48skc_27",
+  "themeDark": "_themeDark_v48skc_30",
+  "sizeS": "_sizeS_v48skc_34",
+  "sizeM": "_sizeM_v48skc_37",
+  "sizeL": "_sizeL_v48skc_40",
+  "classic": "_classic_v48skc_44",
+  "rock": "_rock_v48skc_47",
+  "main": "_main_v48skc_51",
+  "open": "_open_v48skc_73",
+  "focused": "_focused_v48skc_77",
+  "searchFocused": "_searchFocused_v48skc_78",
+  "error": "_error_v48skc_80",
+  "searchKeyFocused": "_searchKeyFocused_v48skc_85",
+  "enabled": "_enabled_v48skc_89",
+  "disabled": "_disabled_v48skc_95",
+  "isMulti": "_isMulti_v48skc_125",
+  "iconsWrapper": "_iconsWrapper_v48skc_143",
+  "labelWrapper": "_labelWrapper_v48skc_168",
+  "label": "_label_v48skc_168",
+  "labelNotSelected": "_labelNotSelected_v48skc_218",
+  "searchInput": "_searchInput_v48skc_231",
+  "multi": "_multi_v48skc_271",
+  "tagsContainer": "_tagsContainer_v48skc_291",
+  "tag": "_tag_v48skc_291",
+  "toggle": "_toggle_v48skc_313",
+  "icon": "_icon_v48skc_143",
+  "clearIcon": "_clearIcon_v48skc_380"
 };
 export { styles as default };

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

@@ -1,19 +1,12 @@
-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 () {
+const useObservableForceRerender = () => {
+  const observableRef = useRef(null);
+  const [, setDummyState] = useState(false);
+  useResizeObserver(observableRef, () => {
     //force rerender
-    setDummyState(function (s) {
-      return !s;
-    });
+    setDummyState(s => !s);
   }, {
     ignoreFirstCall: true
   });