@rescui/select 0.18.1 → 0.18.3-RUI-308-Fix-select-issues-405b9fa40.12

package/lib/_virtual/index.css.js

@@ -1,15 +1,15 @@
 var styles = {
-  "icon": "_icon_3sp1p2_4",
-  "sizeXS": "_sizeXS_3sp1p2_14",
-  "sizeS": "_sizeS_3sp1p2_18",
-  "sizeM": "_sizeM_3sp1p2_22",
-  "sizeL": "_sizeL_3sp1p2_26",
-  "light": "_light_3sp1p2_30",
-  "dark": "_dark_3sp1p2_34",
-  "allVariants": "_allVariants_3sp1p2_48",
-  "variant16": "_variant16_3sp1p2_53",
-  "variant20": "_variant20_3sp1p2_54",
-  "variant24": "_variant24_3sp1p2_55",
-  "variant28": "_variant28_3sp1p2_58"
+  "icon": "_icon_8k0v18_4",
+  "sizeXS": "_sizeXS_8k0v18_14",
+  "sizeS": "_sizeS_8k0v18_18",
+  "sizeM": "_sizeM_8k0v18_22",
+  "sizeL": "_sizeL_8k0v18_26",
+  "light": "_light_8k0v18_30",
+  "dark": "_dark_8k0v18_34",
+  "allVariants": "_allVariants_8k0v18_48",
+  "variant16": "_variant16_8k0v18_53",
+  "variant20": "_variant20_8k0v18_54",
+  "variant24": "_variant24_8k0v18_55",
+  "variant28": "_variant28_8k0v18_58"
 };
 export { styles as default };

package/lib/hooks/use-multi-handlers.js

@@ -1,5 +1,6 @@
-import { useRef, useMemo, useCallback } from 'react';
+import { useRef, useMemo, useCallback, useEffect, useLayoutEffect } from 'react';
 import { getOptionValue } from '../utils/get-option-value.js';
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
 
 const useMultiHandlers = _ref => {
   let {
@@ -7,7 +8,9 @@ const useMultiHandlers = _ref => {
     onChange
   } = _ref;
   const onChangeRef = useRef(null);
-  onChangeRef.current = onChange;
+  useIsomorphicLayoutEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
   const selectedMap = useMemo(() => new Map(selectedItems.map(item => [getOptionValue(item), item])), [selectedItems]);
   const addItem = useCallback(item => {
     if (selectedMap.has(getOptionValue(item))) {

package/lib/hooks/use-primary-contrast-css-var-transfer.js

@@ -1,4 +1,5 @@
-import { useRef } from 'react';
+import { useState, useEffect, useLayoutEffect } from 'react';
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
 /**
  * Transfer primary contrast css var to the dropdown, but only when the dropdown opens
  */
@@ -8,21 +9,17 @@ const usePrimaryContrastCssVarTransfer = _ref => {
     triggerRef,
     isOpen
   } = _ref;
-  const prevIsOpenRef = useRef(false);
-  const isPrimaryContrastRef = useRef(false);
+  const [isPrimaryContrast, setIsPrimaryContrast] = useState(false);
+  useIsomorphicLayoutEffect(() => {
+    if (!isOpen || !triggerRef.current) {
+      return;
+    }
 
-  if (prevIsOpenRef.current !== isOpen && isOpen && triggerRef.current && typeof window !== 'undefined') {
     const isPrimaryContrastFromCss = getComputedStyle(triggerRef.current)?.getPropertyValue('--rs-select-contrast-primary');
-    isPrimaryContrastRef.current = isPrimaryContrastFromCss.toString() === '1';
-    prevIsOpenRef.current = true;
-  }
-
-  if (!isOpen) {
-    prevIsOpenRef.current = false;
-  }
-
+    setIsPrimaryContrast(isPrimaryContrastFromCss.toString() === '1');
+  }, [isOpen, triggerRef]);
   return {
-    isPrimaryContrast: isPrimaryContrastRef.current
+    isPrimaryContrast
   };
 };
 

package/lib/hooks/use-safe-id.d.ts

@@ -1,6 +1,4 @@
 import React from 'react';
-export declare const useFallbackId: {
-    (): string;
-    counter: number;
-};
-export declare const useSafeId: typeof React.useId;
+declare function useFallbackId(): number;
+export declare const useSafeId: typeof React.useId | typeof useFallbackId;
+export {};

package/lib/hooks/use-safe-id.js

@@ -1,15 +1,10 @@
-import React, { useRef } from 'react';
+import React, { useState } from 'react';
+let nextFallbackId = 0;
 
-const useFallbackId = () => {
-  const id = useRef(null);
+function useFallbackId() {
+  const [id] = useState(() => nextFallbackId++);
+  return id;
+}
 
-  if (id.current === null) {
-    id.current = useFallbackId.counter++;
-  }
-
-  return id.current.toString();
-};
-
-useFallbackId.counter = 0;
 const useSafeId = React.useId ?? useFallbackId;
-export { useFallbackId, useSafeId };
+export { useSafeId };