@rescui/select 0.18.1-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.10 → 0.18.1-RUI-297-Add-react-compiler-to-the-packages-build-8aaaed4be.39

package/lib/hooks/use-focus.js

@@ -1,17 +1,61 @@
+import { c } from 'react-compiler-runtime';
 import { useState } from 'react';
 
-const useFocus = _ref => {
-  let {
+const useFocus = t0 => {
+  const $ = c(8);
+  const {
     isDisabled
-  } = _ref;
+  } = t0;
   const [isFocused, setIsFocused] = useState(false);
-  return {
-    isFocused,
-    focusProps: {
-      onFocus: () => setIsFocused(!isDisabled),
-      onBlur: () => setIsFocused(false)
-    }
-  };
+  let t1;
+
+  if ($[0] !== isDisabled) {
+    t1 = () => setIsFocused(!isDisabled);
+
+    $[0] = isDisabled;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+
+  let t2;
+
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => setIsFocused(false);
+
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+
+  let t3;
+
+  if ($[3] !== t1) {
+    t3 = {
+      onFocus: t1,
+      onBlur: t2
+    };
+    $[3] = t1;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+
+  let t4;
+
+  if ($[5] !== isFocused || $[6] !== t3) {
+    t4 = {
+      isFocused,
+      focusProps: t3
+    };
+    $[5] = isFocused;
+    $[6] = t3;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+
+  return t4;
 };
 
 export { useFocus };

package/lib/hooks/use-hover.js

@@ -1,17 +1,61 @@
+import { c } from 'react-compiler-runtime';
 import { useState } from 'react';
 
-const useHover = _ref => {
-  let {
+const useHover = t0 => {
+  const $ = c(8);
+  const {
     isDisabled
-  } = _ref;
+  } = t0;
   const [isHovered, setIsHovered] = useState(false);
-  return {
-    isHovered,
-    hoverProps: {
-      onMouseEnter: () => setIsHovered(!isDisabled),
-      onMouseLeave: () => setIsHovered(false)
-    }
-  };
+  let t1;
+
+  if ($[0] !== isDisabled) {
+    t1 = () => setIsHovered(!isDisabled);
+
+    $[0] = isDisabled;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+
+  let t2;
+
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => setIsHovered(false);
+
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+
+  let t3;
+
+  if ($[3] !== t1) {
+    t3 = {
+      onMouseEnter: t1,
+      onMouseLeave: t2
+    };
+    $[3] = t1;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+
+  let t4;
+
+  if ($[5] !== isHovered || $[6] !== t3) {
+    t4 = {
+      isHovered,
+      hoverProps: t3
+    };
+    $[5] = isHovered;
+    $[6] = t3;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+
+  return t4;
 };
 
 export { useHover };

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

@@ -1,22 +1,52 @@
+import { c } from 'react-compiler-runtime';
 import { useState } from 'react';
 
 const useLabelFocus = () => {
+  const $ = c(4);
   const [isFocusedByLabel, setIsFocusedByLabel] = useState(false);
-  const triggerFocusProps = {
-    onBlur: () => {
-      setIsFocusedByLabel(false);
-    }
-  };
-  const labelClickProps = {
-    onClick: () => {
-      setIsFocusedByLabel(true);
-    }
-  };
-  return {
-    isFocusedByLabel,
-    triggerFocusProps,
-    labelClickProps
-  };
+  let t0;
+
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {
+      onBlur: () => {
+        setIsFocusedByLabel(false);
+      }
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+
+  const triggerFocusProps = t0;
+  let t1;
+
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = {
+      onClick: () => {
+        setIsFocusedByLabel(true);
+      }
+    };
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+
+  const labelClickProps = t1;
+  let t2;
+
+  if ($[2] !== isFocusedByLabel) {
+    t2 = {
+      isFocusedByLabel,
+      triggerFocusProps,
+      labelClickProps
+    };
+    $[2] = isFocusedByLabel;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+
+  return t2;
 };
 
 export { useLabelFocus };

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

@@ -1,44 +1,122 @@
-import { useRef, useMemo, useCallback } from 'react';
+import { c } from 'react-compiler-runtime';
+import { useRef, useEffect, useLayoutEffect } from 'react';
 import { getOptionValue } from '../utils/get-option-value.js';
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
 
-const useMultiHandlers = _ref => {
-  let {
+const useMultiHandlers = t0 => {
+  const $ = c(14);
+  const {
     selectedItems,
     onChange
-  } = _ref;
+  } = t0;
   const onChangeRef = useRef(null);
-  onChangeRef.current = onChange;
-  const selectedMap = useMemo(() => new Map(selectedItems.map(item => [getOptionValue(item), item])), [selectedItems]);
-  const addItem = useCallback(item => {
-    if (selectedMap.has(getOptionValue(item))) {
-      return;
-    }
-
-    const newValues = [...selectedMap.values(), item];
-    onChangeRef.current?.(newValues);
-  }, [selectedMap]);
-  const removeItem = useCallback(item => {
-    const key = getOptionValue(item);
-    const newValues = [...selectedMap.entries()].filter(_ref2 => {
-      let [k] = _ref2;
-      return k !== key;
-    }).map(_ref3 => {
-      let [, v] = _ref3;
-      return v;
-    });
-    onChangeRef.current?.(newValues);
-  }, [selectedMap]);
-
-  const removeAllItems = () => {
-    onChangeRef.current?.([]);
-  };
-
-  return {
-    selectedMap,
-    addItem,
-    removeItem,
-    removeAllItems
-  };
+  let t1;
+  let t2;
+
+  if ($[0] !== onChange) {
+    t1 = () => {
+      onChangeRef.current = onChange;
+    };
+
+    t2 = [onChange];
+    $[0] = onChange;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+
+  useIsomorphicLayoutEffect(t1, t2);
+  let t3;
+
+  if ($[3] !== selectedItems) {
+    t3 = new Map(selectedItems.map(_temp));
+    $[3] = selectedItems;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+
+  const selectedMap = t3;
+  let t4;
+
+  if ($[5] !== selectedMap) {
+    t4 = item_0 => {
+      if (selectedMap.has(getOptionValue(item_0))) {
+        return;
+      }
+
+      const newValues = [...selectedMap.values(), item_0];
+      onChangeRef.current?.(newValues);
+    };
+
+    $[5] = selectedMap;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+
+  const addItem = t4;
+  let t5;
+
+  if ($[7] !== selectedMap) {
+    t5 = item_1 => {
+      const key = getOptionValue(item_1);
+      const newValues_0 = [...selectedMap.entries()].filter(t6 => {
+        const [k] = t6;
+        return k !== key;
+      }).map(_temp2);
+      onChangeRef.current?.(newValues_0);
+    };
+
+    $[7] = selectedMap;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+
+  const removeItem = t5;
+  let t6;
+
+  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = () => {
+      onChangeRef.current?.([]);
+    };
+
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+
+  const removeAllItems = t6;
+  let t7;
+
+  if ($[10] !== addItem || $[11] !== removeItem || $[12] !== selectedMap) {
+    t7 = {
+      selectedMap,
+      addItem,
+      removeItem,
+      removeAllItems
+    };
+    $[10] = addItem;
+    $[11] = removeItem;
+    $[12] = selectedMap;
+    $[13] = t7;
+  } else {
+    t7 = $[13];
+  }
+
+  return t7;
 };
 
+function _temp(item) {
+  return [getOptionValue(item), item];
+}
+
+function _temp2(t0) {
+  const [, v] = t0;
+  return v;
+}
+
 export { useMultiHandlers };

package/lib/hooks/use-no-memo-getter.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Some downshift `getSomethingProps` getters must be called on every render even if arguments haven't changed.
+ * We wrap all these getters in this hook interface, so react-compiler won't memoize them
+ */
+export declare const useNoMemoGetter: <TArgs extends unknown[], TReturn>(getPartProps: (...args: TArgs) => TReturn, ...args: TArgs) => TReturn;

package/lib/hooks/use-no-memo-getter.js

@@ -0,0 +1,15 @@
+/**
+ * Some downshift `getSomethingProps` getters must be called on every render even if arguments haven't changed.
+ * We wrap all these getters in this hook interface, so react-compiler won't memoize them
+ */
+const useNoMemoGetter = function (getPartProps) {
+  'use no memo';
+
+  for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    args[_key - 1] = arguments[_key];
+  }
+
+  return getPartProps(...args);
+};
+
+export { useNoMemoGetter };

package/lib/hooks/use-options.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { SelectOptionOrGroup, SelectOption, ListBoxItem } from '../types';
 /**
  * Convert an array of options with possible groups to the flat array of options, stripping them of the groups.
@@ -6,7 +7,7 @@ import type { SelectOptionOrGroup, SelectOption, ListBoxItem } from '../types';
  * @param options
  */
 export declare const useOptions: (options: SelectOptionOrGroup[]) => {
-    setFilterString: import("react").Dispatch<import("react").SetStateAction<string>>;
+    setFilterString: React.Dispatch<React.SetStateAction<string>>;
     filterString: string;
     flattenedOptions: SelectOption[];
     listBoxItems: ListBoxItem[];

package/lib/hooks/use-options.js

@@ -1,5 +1,6 @@
-import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
-import { useState, useMemo } from 'react';
+import _includesInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/includes';
+import { c } from 'react-compiler-runtime';
+import { useState } from 'react';
 import { isOptionAGroup } from '../utils/is-option-a-group.js';
 import { getTextFromNodes } from '../utils/get-text-from-nodes.js';
 import { getOptionValue } from '../utils/get-option-value.js';
@@ -16,6 +17,61 @@ const createFilter = substring => {
     return _includesInstanceProperty(_context = string.toLowerCase()).call(_context, lowerSubstring);
   };
 };
+
+const processOptions = (options, filterFn) => {
+  const flattenedOptions = [];
+  const listBoxItems = [];
+  let index = 0;
+
+  const createOptionItem = option => {
+    return { ...option,
+      index: index++,
+      type: 'option',
+      key: getOptionValue(option)
+    };
+  };
+
+  options.forEach((optionOrGroup, arrayIndex) => {
+    if (isOptionAGroup(optionOrGroup)) {
+      const group = optionOrGroup;
+
+      if (!group.options || group.options.length === 0) {
+        return;
+      } // Render as Group (with or without label)
+
+
+      const groupLabelText = group.label ? getTextFromNodes(group.label) : ''; // Use a special prefix that's unlikely to collide with user values
+
+      const groupKey = `\0__rs_select_group_${arrayIndex}_${groupLabelText}`;
+      const listBoxGroupItem = { ...group,
+        type: 'group',
+        options: [],
+        key: groupKey
+      };
+      group.options.forEach(option => {
+        if (filterFn(getTextFromNodes(option.label))) {
+          flattenedOptions.push(option);
+          listBoxGroupItem.options.push(createOptionItem(option));
+        }
+      });
+
+      if (listBoxGroupItem.options.length > 0) {
+        listBoxItems.push(listBoxGroupItem);
+      }
+
+      return;
+    }
+
+    if (filterFn(getTextFromNodes(optionOrGroup.label))) {
+      flattenedOptions.push(optionOrGroup);
+      listBoxItems.push(createOptionItem(optionOrGroup));
+    }
+  });
+  return {
+    flattenedOptions,
+    listBoxItems
+  };
+};
 /**
  * Convert an array of options with possible groups to the flat array of options, stripping them of the groups.
  * Also creating a list for ListBox component with indexes and keys.
@@ -25,66 +81,46 @@ const createFilter = substring => {
 
 
 const useOptions = options => {
-  const [filterString, setFilterString] = useState('');
-  const filterFn = useMemo(() => createFilter(filterString), [filterString]);
-  const processedOptions = useMemo(() => {
-    const flattenedOptions = [];
-    const listBoxItems = [];
-    let index = 0;
-
-    const createOptionItem = option => {
-      return { ...option,
-        index: index++,
-        type: 'option',
-        key: getOptionValue(option)
-      };
-    };
+  const $ = c(8);
+  const [filterString, setFilterString] = useState("");
+  let t0;
 
-    options.forEach((optionOrGroup, arrayIndex) => {
-      if (isOptionAGroup(optionOrGroup)) {
-        const group = optionOrGroup;
-
-        if (!group.options || group.options.length === 0) {
-          return;
-        } // Render as Group (with or without label)
-
-
-        const groupLabelText = group.label ? getTextFromNodes(group.label) : ''; // Use a special prefix that's unlikely to collide with user values
+  if ($[0] !== filterString) {
+    t0 = createFilter(filterString);
+    $[0] = filterString;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
 
-        const groupKey = `\0__rs_select_group_${arrayIndex}_${groupLabelText}`;
-        const listBoxGroupItem = { ...group,
-          type: 'group',
-          options: [],
-          key: groupKey
-        };
-        group.options.forEach(option => {
-          if (filterFn(getTextFromNodes(option.label))) {
-            flattenedOptions.push(option);
-            listBoxGroupItem.options.push(createOptionItem(option));
-          }
-        });
+  const filterFn = t0;
+  let t1;
 
-        if (listBoxGroupItem.options.length > 0) {
-          listBoxItems.push(listBoxGroupItem);
-        }
+  if ($[2] !== filterFn || $[3] !== options) {
+    t1 = processOptions(options, filterFn);
+    $[2] = filterFn;
+    $[3] = options;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
 
-        return;
-      }
+  const processedOptions = t1;
+  let t2;
 
-      if (filterFn(getTextFromNodes(optionOrGroup.label))) {
-        flattenedOptions.push(optionOrGroup);
-        listBoxItems.push(createOptionItem(optionOrGroup));
-      }
-    });
-    return {
-      flattenedOptions,
-      listBoxItems
+  if ($[5] !== filterString || $[6] !== processedOptions) {
+    t2 = { ...processedOptions,
+      setFilterString,
+      filterString
     };
-  }, [options, filterFn]);
-  return { ...processedOptions,
-    setFilterString,
-    filterString
-  };
+    $[5] = filterString;
+    $[6] = processedOptions;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+
+  return t2;
 };
 
 export { useOptions };

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

@@ -1,29 +1,56 @@
-import { useRef } from 'react';
+import { c } from 'react-compiler-runtime';
+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
  */
 
-const usePrimaryContrastCssVarTransfer = _ref => {
-  let {
+const usePrimaryContrastCssVarTransfer = t0 => {
+  const $ = c(6);
+  const {
     triggerRef,
     isOpen
-  } = _ref;
-  const prevIsOpenRef = useRef(false);
-  const isPrimaryContrastRef = useRef(false);
-
-  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;
+  } = t0;
+  const [isPrimaryContrast, setIsPrimaryContrast] = useState(false);
+  let t1;
+  let t2;
+
+  if ($[0] !== isOpen || $[1] !== triggerRef) {
+    t1 = () => {
+      const ownerWindow = triggerRef.current?.ownerDocument.defaultView;
+
+      if (!isOpen || !ownerWindow) {
+        return;
+      }
+
+      const isPrimaryContrastFromCss = ownerWindow.getComputedStyle(triggerRef.current).getPropertyValue("--rs-select-contrast-primary");
+      setIsPrimaryContrast(isPrimaryContrastFromCss === "1");
+    };
+
+    t2 = [isOpen, triggerRef];
+    $[0] = isOpen;
+    $[1] = triggerRef;
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t1 = $[2];
+    t2 = $[3];
   }
 
-  if (!isOpen) {
-    prevIsOpenRef.current = false;
+  useIsomorphicLayoutEffect(t1, t2);
+  let t3;
+
+  if ($[4] !== isPrimaryContrast) {
+    t3 = {
+      isPrimaryContrast
+    };
+    $[4] = isPrimaryContrast;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
   }
 
-  return {
-    isPrimaryContrast: isPrimaryContrastRef.current
-  };
+  return t3;
 };
 
 export { usePrimaryContrastCssVarTransfer };

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 };