@rescui/select 0.18.3 → 0.19.0

package/lib/parts/native-select-options-with-groups.js

@@ -1,3 +1,4 @@
+import { c } from 'react-compiler-runtime';
 import React from 'react';
 import { NO_OPTIONS_VALUE } from '../constants.js';
 import { isOptionAGroup } from '../utils/is-option-a-group.js';
@@ -9,68 +10,169 @@ const collectOptionGroupValues = options => options.map(_ref => {
   return value;
 }).join('-');
 
-const Option = _ref2 => {
-  let {
+const Option = t0 => {
+  const $ = c(4);
+  const {
     value,
     label,
-    disabled = false
-  } = _ref2;
-  return /*#__PURE__*/React.createElement("option", {
-    value: value,
-    disabled: disabled
-  }, label);
+    disabled: t1
+  } = t0;
+  const disabled = t1 === undefined ? false : t1;
+  let t2;
+
+  if ($[0] !== disabled || $[1] !== label || $[2] !== value) {
+    t2 = /*#__PURE__*/React.createElement("option", {
+      value: value,
+      disabled: disabled
+    }, label);
+    $[0] = disabled;
+    $[1] = label;
+    $[2] = value;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+
+  return t2;
 };
 
-const OptionGroup = _ref3 => {
-  let {
-    options = [],
-    label = '',
-    disabled = false
-  } = _ref3;
-  return /*#__PURE__*/React.createElement("optgroup", {
-    label: label,
-    disabled: disabled
-  }, options.map(option => /*#__PURE__*/React.createElement(Option, {
-    key: option.value,
-    value: option.value,
-    label: option.label,
-    disabled: option.disabled
-  })));
+const OptionGroup = t0 => {
+  const $ = c(8);
+  const {
+    options: t1,
+    label: t2,
+    disabled: t3
+  } = t0;
+  let t4;
+
+  if ($[0] !== t1) {
+    t4 = t1 === undefined ? [] : t1;
+    $[0] = t1;
+    $[1] = t4;
+  } else {
+    t4 = $[1];
+  }
+
+  const options = t4;
+  const label = t2 === undefined ? "" : t2;
+  const disabled = t3 === undefined ? false : t3;
+  let t5;
+
+  if ($[2] !== options) {
+    t5 = options.map(_temp);
+    $[2] = options;
+    $[3] = t5;
+  } else {
+    t5 = $[3];
+  }
+
+  let t6;
+
+  if ($[4] !== disabled || $[5] !== label || $[6] !== t5) {
+    t6 = /*#__PURE__*/React.createElement("optgroup", {
+      label: label,
+      disabled: disabled
+    }, t5);
+    $[4] = disabled;
+    $[5] = label;
+    $[6] = t5;
+    $[7] = t6;
+  } else {
+    t6 = $[7];
+  }
+
+  return t6;
 };
 
-const NativeSelectOptionsWithGroups = _ref4 => {
-  let {
+const NativeSelectOptionsWithGroups = t0 => {
+  const $ = c(11);
+  const {
     optionsWithGroups,
     placeholder,
     emptyListMessage
-  } = _ref4;
+  } = t0;
   const hasOptions = optionsWithGroups.length > 0;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("option", {
-    value: '',
-    disabled: true,
-    hidden: true
-  }, hasOptions ? placeholder : emptyListMessage), !hasOptions && /*#__PURE__*/React.createElement("option", {
-    value: NO_OPTIONS_VALUE,
-    disabled: true
-  }, emptyListMessage), optionsWithGroups.map(optionOrGroup => {
-    if (isOptionAGroup(optionOrGroup)) {
-      const group = optionOrGroup;
-      return /*#__PURE__*/React.createElement(OptionGroup, {
-        key: `group--${group.label}--${collectOptionGroupValues(group.options)}`,
-        options: group.options,
-        disabled: group.disabled,
-        label: group.label
-      });
-    }
-
-    const option = optionOrGroup;
-    return /*#__PURE__*/React.createElement(Option, {
-      key: option.value,
-      value: option.value,
-      label: option.label,
-      disabled: option.disabled
-    });
-  }));
+  const t1 = hasOptions ? placeholder : emptyListMessage;
+  let t2;
+
+  if ($[0] !== t1) {
+    t2 = /*#__PURE__*/React.createElement("option", {
+      value: "",
+      disabled: true,
+      hidden: true
+    }, t1);
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+
+  let t3;
+
+  if ($[2] !== emptyListMessage || $[3] !== hasOptions) {
+    t3 = !hasOptions && /*#__PURE__*/React.createElement("option", {
+      value: NO_OPTIONS_VALUE,
+      disabled: true
+    }, emptyListMessage);
+    $[2] = emptyListMessage;
+    $[3] = hasOptions;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+
+  let t4;
+
+  if ($[5] !== optionsWithGroups) {
+    t4 = optionsWithGroups.map(_temp2);
+    $[5] = optionsWithGroups;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+
+  let t5;
+
+  if ($[7] !== t2 || $[8] !== t3 || $[9] !== t4) {
+    t5 = /*#__PURE__*/React.createElement(React.Fragment, null, t2, t3, t4);
+    $[7] = t2;
+    $[8] = t3;
+    $[9] = t4;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+
+  return t5;
 };
 
+function _temp(option) {
+  return /*#__PURE__*/React.createElement(Option, {
+    key: option.value,
+    value: option.value,
+    label: option.label,
+    disabled: option.disabled
+  });
+}
+
+function _temp2(optionOrGroup) {
+  if (isOptionAGroup(optionOrGroup)) {
+    const group = optionOrGroup;
+    return /*#__PURE__*/React.createElement(OptionGroup, {
+      key: `group--${group.label}--${collectOptionGroupValues(group.options)}`,
+      options: group.options,
+      disabled: group.disabled,
+      label: group.label
+    });
+  }
+
+  const option = optionOrGroup;
+  return /*#__PURE__*/React.createElement(Option, {
+    key: option.value,
+    value: option.value,
+    label: option.label,
+    disabled: option.disabled
+  });
+}
+
 export { NativeSelectOptionsWithGroups };

package/lib/parts/popup-content.d.ts

@@ -5,7 +5,7 @@ import type { SelectMode, SelectSize, ListBoxState, ListBoxItem, Placement } fro
 export type PopupContentProps = {
     theme: Theme;
     listBoxState: ListBoxState;
-    triggerRef: React.RefObject<HTMLElement>;
+    triggerEl: HTMLElement | null;
     dropdownRef?: React.RefObject<DropdownImperativeHandle>;
     listBoxItems?: ListBoxItem[];
     placement: Placement;
@@ -17,6 +17,6 @@ export type PopupContentProps = {
     renderInTrigger?: boolean;
     disableFlip?: boolean;
     isOpen?: boolean;
-    dropdownUpdateDeps?: unknown[];
+    dropdownUpdateDep?: unknown;
 };
-export declare const PopupContent: ({ theme, listBoxState, triggerRef, dropdownRef, listBoxItems, placement, size: sizeFromProps, mode, emptyListMessage, maxVisibleItems, trigger, renderInTrigger, disableFlip, isOpen, dropdownUpdateDeps }: PopupContentProps) => React.JSX.Element;
+export declare const PopupContent: ({ theme, listBoxState, triggerEl, dropdownRef, listBoxItems, placement, size: sizeFromProps, mode, emptyListMessage, maxVisibleItems, trigger, renderInTrigger, disableFlip, isOpen, dropdownUpdateDep }: PopupContentProps) => React.JSX.Element;

package/lib/parts/popup-content.js

@@ -1,15 +1,18 @@
-import React, { useEffect } from 'react';
+import { c } from 'react-compiler-runtime';
+import React, { useEffect, useLayoutEffect } from 'react';
 import { Dropdown } from '@rescui/dropdown';
 import { useActualSizeFromCss } from '../hooks/use-actual-size-from-css.js';
 import { usePrimaryContrastCssVarTransfer } from '../hooks/use-primary-contrast-css-var-transfer.js';
 import styles from '../styles/common.p.module.css.js';
-import { ListBox } from './list-box.js'; // eslint-disable-next-line complexity
+import { ListBox } from './list-box.js';
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect; // eslint-disable-next-line complexity
 
-const PopupContent = _ref => {
-  let {
+const PopupContent = t0 => {
+  const $ = c(35);
+  const {
     theme,
     listBoxState,
-    triggerRef,
+    triggerEl,
     dropdownRef,
     listBoxItems,
     placement,
@@ -21,52 +24,149 @@ const PopupContent = _ref => {
     renderInTrigger,
     disableFlip,
     isOpen,
-    dropdownUpdateDeps = []
-  } = _ref;
+    dropdownUpdateDep
+  } = t0;
+  let t1;
+
+  if ($[0] !== sizeFromProps || $[1] !== triggerEl) {
+    t1 = {
+      sizeFromProps,
+      triggerEl
+    };
+    $[0] = sizeFromProps;
+    $[1] = triggerEl;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+
   const {
     size,
     observableRef
-  } = useActualSizeFromCss({
-    sizeFromProps,
-    triggerRef
-  });
+  } = useActualSizeFromCss(t1);
+  let t2;
+
+  if ($[3] !== isOpen || $[4] !== triggerEl) {
+    t2 = {
+      isOpen,
+      triggerEl
+    };
+    $[3] = isOpen;
+    $[4] = triggerEl;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+
   const {
     isPrimaryContrast
-  } = usePrimaryContrastCssVarTransfer({
-    isOpen,
-    triggerRef
-  });
-  useEffect(() => {
-    if (dropdownRef.current) {
-      dropdownRef.current.scheduleUpdate();
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [listBoxItems, size, ...dropdownUpdateDeps]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    ref: observableRef,
-    className: styles.observable
-  }), /*#__PURE__*/React.createElement(Dropdown, {
-    theme: theme,
-    ref: dropdownRef,
-    placement: placement,
-    maxWidth: "trigger",
-    minWidth: "trigger",
-    leastMaxHeight: 999999,
-    isOpen: isOpen,
-    cancelCloseAnimation: true,
-    disableFocusLock: true,
-    renderInTrigger: renderInTrigger,
-    disableFlip: disableFlip,
-    trigger: trigger
-  }, /*#__PURE__*/React.createElement(ListBox, {
-    state: listBoxState,
-    size: size,
-    mode: mode,
-    maxVisibleItems: maxVisibleItems,
-    emptyListMessage: emptyListMessage,
-    items: listBoxItems,
-    isPrimaryContrast: isPrimaryContrast
-  })));
+  } = usePrimaryContrastCssVarTransfer(t2);
+  let t3;
+
+  if ($[6] !== dropdownRef) {
+    t3 = () => {
+      dropdownRef.current?.scheduleUpdate();
+    };
+
+    $[6] = dropdownRef;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+
+  let t4;
+
+  if ($[8] !== dropdownRef || $[9] !== dropdownUpdateDep || $[10] !== listBoxItems || $[11] !== size) {
+    t4 = [dropdownRef, dropdownUpdateDep, listBoxItems, size];
+    $[8] = dropdownRef;
+    $[9] = dropdownUpdateDep;
+    $[10] = listBoxItems;
+    $[11] = size;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+
+  useIsomorphicLayoutEffect(t3, t4);
+  let t5;
+
+  if ($[13] !== observableRef) {
+    t5 = /*#__PURE__*/React.createElement("div", {
+      ref: observableRef,
+      className: styles.observable
+    });
+    $[13] = observableRef;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+
+  let t6;
+
+  if ($[15] !== emptyListMessage || $[16] !== isPrimaryContrast || $[17] !== listBoxItems || $[18] !== listBoxState || $[19] !== maxVisibleItems || $[20] !== mode || $[21] !== size) {
+    t6 = /*#__PURE__*/React.createElement(ListBox, {
+      state: listBoxState,
+      size: size,
+      mode: mode,
+      maxVisibleItems: maxVisibleItems,
+      emptyListMessage: emptyListMessage,
+      items: listBoxItems,
+      isPrimaryContrast: isPrimaryContrast
+    });
+    $[15] = emptyListMessage;
+    $[16] = isPrimaryContrast;
+    $[17] = listBoxItems;
+    $[18] = listBoxState;
+    $[19] = maxVisibleItems;
+    $[20] = mode;
+    $[21] = size;
+    $[22] = t6;
+  } else {
+    t6 = $[22];
+  }
+
+  let t7;
+
+  if ($[23] !== disableFlip || $[24] !== dropdownRef || $[25] !== isOpen || $[26] !== placement || $[27] !== renderInTrigger || $[28] !== t6 || $[29] !== theme || $[30] !== trigger) {
+    t7 = /*#__PURE__*/React.createElement(Dropdown, {
+      theme: theme,
+      ref: dropdownRef,
+      placement: placement,
+      maxWidth: "trigger",
+      minWidth: "trigger",
+      leastMaxHeight: 999999,
+      isOpen: isOpen,
+      cancelCloseAnimation: true,
+      disableFocusLock: true,
+      renderInTrigger: renderInTrigger,
+      disableFlip: disableFlip,
+      trigger: trigger
+    }, t6);
+    $[23] = disableFlip;
+    $[24] = dropdownRef;
+    $[25] = isOpen;
+    $[26] = placement;
+    $[27] = renderInTrigger;
+    $[28] = t6;
+    $[29] = theme;
+    $[30] = trigger;
+    $[31] = t7;
+  } else {
+    t7 = $[31];
+  }
+
+  let t8;
+
+  if ($[32] !== t5 || $[33] !== t7) {
+    t8 = /*#__PURE__*/React.createElement(React.Fragment, null, t5, t7);
+    $[32] = t5;
+    $[33] = t7;
+    $[34] = t8;
+  } else {
+    t8 = $[34];
+  }
+
+  return t8;
 };
 
 export { PopupContent };