@rescui/select 0.18.4 → 0.19.0

package/lib/hooks/use-actual-size-from-css.js

@@ -1,27 +1,56 @@
-import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _includesInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/includes';
+import { c } from 'react-compiler-runtime';
 import { useRef, useState } from 'react';
 import { useResizeObserver } from '@rescui/use-resize-observer';
 
-const useActualSizeFromCss = _ref => {
-  let {
+const useActualSizeFromCss = t0 => {
+  const $ = c(5);
+  const {
     sizeFromProps,
-    triggerRef
-  } = _ref;
-  // We use invisible and "untouchable" dummy element to observe `size` changes from css to fetch the actual size
+    triggerEl
+  } = t0;
   const observableRef = useRef(null);
   const [size, setSize] = useState(sizeFromProps);
-  useResizeObserver(observableRef, () => {
-    var _context;
-
-    const triggerFormWrapperStyles = getComputedStyle(triggerRef.current);
-    const rawSizeFromCss = triggerFormWrapperStyles.getPropertyValue('--_rs-select-size');
-    const sizeFromCss = _includesInstanceProperty(_context = ['s', 'm', 'l']).call(_context, rawSizeFromCss) ? rawSizeFromCss : null;
-    setSize(sizeFromCss || sizeFromProps);
-  });
-  return {
-    observableRef,
-    size
-  };
+  let t1;
+
+  if ($[0] !== sizeFromProps || $[1] !== triggerEl) {
+    t1 = () => {
+      var _context;
+
+      const ownerWindow = triggerEl?.ownerDocument.defaultView;
+
+      if (!ownerWindow) {
+        return;
+      }
+
+      const triggerFormWrapperStyles = ownerWindow.getComputedStyle(triggerEl);
+      const rawSizeFromCss = triggerFormWrapperStyles.getPropertyValue("--_rs-select-size");
+      const sizeFromCss = _includesInstanceProperty(_context = ["s", "m", "l"]).call(_context, rawSizeFromCss) ? rawSizeFromCss : null;
+      setSize(sizeFromCss || sizeFromProps);
+    };
+
+    $[0] = sizeFromProps;
+    $[1] = triggerEl;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+
+  useResizeObserver(observableRef, t1);
+  let t2;
+
+  if ($[3] !== size) {
+    t2 = {
+      observableRef,
+      size
+    };
+    $[3] = size;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+
+  return t2;
 };
 
 export { useActualSizeFromCss };

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,47 +1,122 @@
-import { useRef, useMemo, useCallback, useEffect, useLayoutEffect } 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);
-  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))) {
-      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-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.d.ts

@@ -1,11 +1,10 @@
-import React from 'react';
 export type UsePrimaryContrastCssVarTransferParams = {
-    triggerRef: React.RefObject<HTMLElement>;
+    triggerEl: HTMLElement | null;
     isOpen: boolean;
 };
 /**
  * Transfer primary contrast css var to the dropdown, but only when the dropdown opens
  */
-export declare const usePrimaryContrastCssVarTransfer: ({ triggerRef, isOpen }: UsePrimaryContrastCssVarTransferParams) => {
+export declare const usePrimaryContrastCssVarTransfer: ({ triggerEl, isOpen }: UsePrimaryContrastCssVarTransferParams) => {
     isPrimaryContrast: boolean;
 };