@rescui/select 0.15.0 → 0.15.1-RUI-280-Update-select-component-e516591ed.54

package/lib/_virtual/index.css.js

@@ -1,15 +1,15 @@
 var styles = {
-  "icon": "_icon_1vqskga_4",
-  "sizeXS": "_sizeXS_1vqskga_14",
-  "sizeS": "_sizeS_1vqskga_18",
-  "sizeM": "_sizeM_1vqskga_22",
-  "sizeL": "_sizeL_1vqskga_26",
-  "light": "_light_1vqskga_30",
-  "dark": "_dark_1vqskga_34",
-  "allVariants": "_allVariants_1vqskga_48",
-  "variant16": "_variant16_1vqskga_53",
-  "variant20": "_variant20_1vqskga_54",
-  "variant24": "_variant24_1vqskga_55",
-  "variant28": "_variant28_1vqskga_58"
+  "icon": "_icon_1ouylgb_4",
+  "sizeXS": "_sizeXS_1ouylgb_14",
+  "sizeS": "_sizeS_1ouylgb_18",
+  "sizeM": "_sizeM_1ouylgb_22",
+  "sizeL": "_sizeL_1ouylgb_26",
+  "light": "_light_1ouylgb_30",
+  "dark": "_dark_1ouylgb_34",
+  "allVariants": "_allVariants_1ouylgb_48",
+  "variant16": "_variant16_1ouylgb_53",
+  "variant20": "_variant20_1ouylgb_54",
+  "variant24": "_variant24_1ouylgb_55",
+  "variant28": "_variant28_1ouylgb_58"
 };
 export { styles as default };

package/lib/common-prop-types.d.ts

@@ -1,18 +1,21 @@
+import React from 'react';
 import PropTypes from 'prop-types';
+import type { NoOptionsMessage, NoOptionsMessageConfig } from './types';
+export declare const keyType: PropTypes.Requireable<string | number>;
 export declare const optionType: PropTypes.Requireable<PropTypes.InferProps<{
     label: PropTypes.Validator<PropTypes.ReactNodeLike>;
-    value: PropTypes.Requireable<string>;
+    value: PropTypes.Requireable<string | number>;
 }>>;
 export declare const optionsGroupType: PropTypes.Requireable<PropTypes.InferProps<{
     label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     options: PropTypes.Requireable<PropTypes.InferProps<{
         label: PropTypes.Validator<PropTypes.ReactNodeLike>;
-        value: PropTypes.Requireable<string>;
+        value: PropTypes.Requireable<string | number>;
     }>[]>;
 }>>;
 export declare const nativeOptionType: PropTypes.Requireable<PropTypes.InferProps<{
     label: PropTypes.Validator<string>;
-    value: PropTypes.Requireable<string>;
+    value: PropTypes.Requireable<string | number>;
     disabled: PropTypes.Requireable<boolean>;
 }>>;
 export declare const nativeOptionsGroupType: PropTypes.Requireable<PropTypes.InferProps<{
@@ -20,16 +23,8 @@ export declare const nativeOptionsGroupType: PropTypes.Requireable<PropTypes.Inf
     disabled: PropTypes.Requireable<boolean>;
     options: PropTypes.Requireable<PropTypes.InferProps<{
         label: PropTypes.Validator<PropTypes.ReactNodeLike>;
-        value: PropTypes.Requireable<string>;
+        value: PropTypes.Requireable<string | number>;
     }>[]>;
 }>>;
-export declare const noOptionsMessageConfigType: PropTypes.Requireable<PropTypes.InferProps<{
-    noOptions: PropTypes.Validator<string>;
-    nothingFound: PropTypes.Requireable<string>;
-    loading: PropTypes.Requireable<string>;
-}>>;
-export declare const noOptionsMessageType: PropTypes.Requireable<string | PropTypes.InferProps<{
-    noOptions: PropTypes.Validator<string>;
-    nothingFound: PropTypes.Requireable<string>;
-    loading: PropTypes.Requireable<string>;
-}>>;
+export declare const noOptionsMessageConfigType: React.Validator<NoOptionsMessageConfig>;
+export declare const noOptionsMessageType: React.Validator<NoOptionsMessage>;

package/lib/common-prop-types.js

@@ -1,7 +1,8 @@
 import PropTypes from 'prop-types';
+const keyType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
 const optionType = PropTypes.shape({
   label: PropTypes.node.isRequired,
-  value: PropTypes.string
+  value: keyType
 });
 const optionsGroupType = PropTypes.shape({
   label: PropTypes.node,
@@ -9,7 +10,7 @@ const optionsGroupType = PropTypes.shape({
 });
 const nativeOptionType = PropTypes.shape({
   label: PropTypes.string.isRequired,
-  value: PropTypes.string,
+  value: keyType,
   disabled: PropTypes.bool
 });
 const nativeOptionsGroupType = PropTypes.shape({
@@ -23,4 +24,4 @@ const noOptionsMessageConfigType = PropTypes.shape({
   loading: PropTypes.string
 });
 const noOptionsMessageType = PropTypes.oneOfType([PropTypes.string, noOptionsMessageConfigType]);
-export { nativeOptionType, nativeOptionsGroupType, noOptionsMessageConfigType, noOptionsMessageType, optionType, optionsGroupType };
+export { keyType, nativeOptionType, nativeOptionsGroupType, noOptionsMessageConfigType, noOptionsMessageType, optionType, optionsGroupType };

package/lib/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const VIRTUAL_ITEMS_SECTION_KEY = "\0__rs_hidden_section_virtual_items__";
+export declare const NO_OPTIONS_VALUE = "\0__rs_select_no_options__";
+export declare const DEFAULT_NO_OPTIONS_MESSAGES: {
+    noOptions: string;
+    nothingFound: string;
+    loading: string;
+};

package/lib/constants.js

@@ -0,0 +1,8 @@
+const VIRTUAL_ITEMS_SECTION_KEY = `\0__rs_hidden_section_virtual_items__`;
+const NO_OPTIONS_VALUE = '\0__rs_select_no_options__';
+const DEFAULT_NO_OPTIONS_MESSAGES = {
+  noOptions: 'No options',
+  nothingFound: 'Nothing found',
+  loading: 'Loading...'
+};
+export { DEFAULT_NO_OPTIONS_MESSAGES, NO_OPTIONS_VALUE, VIRTUAL_ITEMS_SECTION_KEY };

package/lib/hooks/use-css-context-transfer.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { type Theme } from '@rescui/ui-contexts';
+import type { SelectSize } from '../types';
+export declare type useCssContextTransferArgs = {
+    triggerRef: React.RefObject<HTMLElement>;
+    isOpen: boolean;
+    themeFromProps: Theme;
+    sizeFromProps: SelectSize;
+};
+export declare const useCssContextTransfer: ({ triggerRef, isOpen, themeFromProps, sizeFromProps }: useCssContextTransferArgs) => {
+    size: SelectSize;
+    theme: Theme;
+    primaryColors: Record<string, string>;
+};

package/lib/hooks/use-css-context-transfer.js

@@ -0,0 +1,40 @@
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import { useContext } from 'react';
+import { ThemeContext } from '@rescui/ui-contexts';
+import { extractThemeFromCss, extractPrimaryColors } from '../utils/css-vars-utils.js';
+
+const useCssContextTransfer = _ref => {
+  let {
+    triggerRef,
+    isOpen,
+    themeFromProps,
+    sizeFromProps
+  } = _ref;
+  let sizeFromCss = null;
+  let themeFromCss = 'light';
+  let primaryColors = {};
+
+  if (triggerRef.current && isOpen) {
+    var _context;
+
+    const triggerFormWrapperStyles = getComputedStyle(triggerRef.current);
+    const rawSizeFromCss = triggerFormWrapperStyles.getPropertyValue('--_rs-select-size');
+    sizeFromCss = _includesInstanceProperty(_context = ['s', 'm', 'l']).call(_context, rawSizeFromCss) ? rawSizeFromCss : null;
+    themeFromCss = extractThemeFromCss(triggerFormWrapperStyles);
+    primaryColors = extractPrimaryColors(triggerFormWrapperStyles);
+  }
+
+  const size = sizeFromCss || sizeFromProps;
+  const {
+    theme: themeFromContext,
+    noProvider
+  } = useContext(ThemeContext);
+  const theme = themeFromProps || (noProvider ? themeFromCss : themeFromContext);
+  return {
+    size,
+    theme,
+    primaryColors
+  };
+};
+
+export { useCssContextTransfer };

package/lib/hooks/use-label-focus.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare const useLabelFocus: (triggerRef: React.RefObject<HTMLElement>) => {
+    isFocusedByLabel: boolean;
+    triggerFocusProps: {
+        onFocus: () => void;
+        onBlur: () => void;
+    };
+    labelClickProps: {
+        onClick: () => void;
+    };
+};

package/lib/hooks/use-label-focus.js

@@ -0,0 +1,28 @@
+import { useRef, useState } from 'react';
+
+const useLabelFocus = triggerRef => {
+  const isLabelClick = useRef(false);
+  const [isFocusedByLabel, setIsFocusedByLabel] = useState(false);
+  const triggerFocusProps = {
+    onFocus: () => {
+      setIsFocusedByLabel(isLabelClick.current);
+    },
+    onBlur: () => {
+      setIsFocusedByLabel(false);
+    }
+  };
+  const labelClickProps = {
+    onClick: () => {
+      isLabelClick.current = true;
+      triggerRef.current.focus();
+      isLabelClick.current = false;
+    }
+  };
+  return {
+    isFocusedByLabel,
+    triggerFocusProps,
+    labelClickProps
+  };
+};
+
+export { useLabelFocus };

package/lib/hooks/use-multi-option-serialization.d.ts

@@ -0,0 +1,10 @@
+import type { SelectOption, SelectOptionOrGroup, Key } from '../types';
+export declare function useMultiOptionSerialization(options: SelectOptionOrGroup[], value?: SelectOption[] | null): {
+    optionsMap: Map<Key, {
+        option: SelectOption;
+        isVirtual: boolean;
+    }>;
+    selectedKeys: Key[];
+    findOptionsByKeys: (keys: Key[]) => SelectOption[];
+    virtualOptions: SelectOption[];
+};

package/lib/hooks/use-multi-option-serialization.js

@@ -0,0 +1,82 @@
+import { useMemo } from 'react';
+import { isOptionAGroup } from '../utils/is-option-a-group.js';
+import { getOptionValue } from '../utils/get-option-value.js';
+
+function useMultiOptionSerialization(options, value) {
+  // Create a map of keys to option objects for O(1) lookup
+  const optionsMap = useMemo(() => {
+    const map = new Map();
+    options.forEach(item => {
+      if (isOptionAGroup(item)) {
+        item.options.forEach(option => {
+          const key = getOptionValue(option);
+          map.set(key, {
+            option,
+            isVirtual: false
+          });
+        });
+      } else {
+        const key = getOptionValue(item);
+        map.set(key, {
+          option: item,
+          isVirtual: false
+        });
+      }
+    });
+
+    if (value && Array.isArray(value)) {
+      value.forEach(option => {
+        const key = getOptionValue(option);
+
+        if (!map.has(key)) {
+          map.set(key, {
+            option,
+            isVirtual: true
+          });
+        }
+      });
+    }
+
+    return map;
+  }, [options, value]); // Convert selected option objects array to Set of keys
+
+  const selectedKeys = [];
+  const virtualOptions = [];
+
+  if (value && Array.isArray(value)) {
+    value.forEach(option => {
+      const key = getOptionValue(option);
+      selectedKeys.push(key);
+      const {
+        isVirtual
+      } = optionsMap.get(key);
+
+      if (isVirtual) {
+        virtualOptions.push(option);
+      }
+    });
+  } // Helper function to find options by Set of keys
+
+
+  const findOptionsByKeys = keys => {
+    const foundOptions = [];
+    keys.forEach(key => {
+      if (optionsMap.has(key)) {
+        const {
+          option
+        } = optionsMap.get(key);
+        foundOptions.push(option);
+      }
+    });
+    return foundOptions;
+  };
+
+  return {
+    optionsMap,
+    selectedKeys,
+    findOptionsByKeys,
+    virtualOptions
+  };
+}
+
+export { useMultiOptionSerialization };

package/lib/hooks/use-option-serialization.d.ts

@@ -0,0 +1,10 @@
+import type { SelectOption, SelectOptionOrGroup, Key } from '../types';
+export declare function useOptionSerialization(options: SelectOptionOrGroup[], value?: SelectOption | null): {
+    optionsMap: Map<Key, {
+        option: SelectOption;
+        isVirtual: boolean;
+    }>;
+    selectedKey: Key;
+    findOptionByKey: (key: Key | null) => SelectOption | null;
+    virtualOption: SelectOption;
+};

package/lib/hooks/use-option-serialization.js

@@ -0,0 +1,59 @@
+import { useMemo } from 'react';
+import { isOptionAGroup } from '../utils/is-option-a-group.js';
+import { getOptionValue } from '../utils/get-option-value.js';
+
+function useOptionSerialization(options, value) {
+  // Create a map of keys to option objects for O(1) lookup
+  const optionsMap = useMemo(() => {
+    const map = new Map();
+    options.forEach(item => {
+      if (isOptionAGroup(item)) {
+        item.options.forEach(option => {
+          const key = getOptionValue(option);
+          map.set(key, {
+            option,
+            isVirtual: false
+          });
+        });
+      } else {
+        const key = getOptionValue(item);
+        map.set(key, {
+          option: item,
+          isVirtual: false
+        });
+      }
+    });
+
+    if (value) {
+      const key = getOptionValue(value);
+
+      if (!map.has(key)) {
+        map.set(key, {
+          option: value,
+          isVirtual: true
+        });
+      }
+    }
+
+    return map;
+  }, [options, value]); // Convert selected option object to key
+
+  const selectedKey = value ? getOptionValue(value) : null;
+  const virtualOption = value && optionsMap.get(selectedKey).isVirtual ? value : null; // Helper function to find option by key
+
+  const findOptionByKey = key => {
+    var _optionsMap$get;
+
+    if (key === null) return null;
+    return ((_optionsMap$get = optionsMap.get(key)) === null || _optionsMap$get === void 0 ? void 0 : _optionsMap$get.option) || null;
+  };
+
+  return {
+    optionsMap,
+    selectedKey,
+    findOptionByKey,
+    virtualOption
+  };
+}
+
+export { useOptionSerialization };