@rescui/select 0.18.3 → 0.19.0

package/lib/parts/list-box.js

@@ -1,4 +1,6 @@
-import React, { useRef } from 'react';
+import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
+import { c } from 'react-compiler-runtime';
+import React from 'react';
 import cn from 'classnames';
 import styles from '../styles/list-box.p.module.css.js';
 import { calculateMaxHeightByItems } from '../utils/calculate-max-height-by-items.js';
@@ -15,13 +17,12 @@ const MODE_STYLES = {
   rock: styles.rock
 };
 
-function Option(_ref) {
-  let {
+function Option(t0) {
+  const $ = c(9);
+  const {
     item,
     state
-  } = _ref;
-  // Get props for the option element
-  const ref = useRef(null);
+  } = t0;
   const {
     selectedMap,
     getItemProps,
@@ -29,94 +30,296 @@ function Option(_ref) {
     isMulti
   } = state;
   const index = item.index;
-  const isSelected = selectedMap.has(item.key);
-  const isHighlighted = highlightedIndex === item.index;
-  const isDisabled = item.disabled;
-  const shouldRenderCheckIcon = isMulti || isSelected;
-  return /*#__PURE__*/React.createElement("li", { ...getItemProps({
+  let t1;
+
+  if ($[0] !== getItemProps || $[1] !== highlightedIndex || $[2] !== index || $[3] !== isMulti || $[4] !== item || $[5] !== selectedMap) {
+    const isSelected = selectedMap.has(item.key);
+    const isHighlighted = highlightedIndex === item.index;
+    const isDisabled = item.disabled;
+    const shouldRenderCheckIcon = isMulti || isSelected;
+    let t2;
+
+    if ($[7] !== item.label) {
+      t2 = /*#__PURE__*/React.createElement("span", null, item.label);
+      $[7] = item.label;
+      $[8] = t2;
+    } else {
+      t2 = $[8];
+    }
+
+    t1 = /*#__PURE__*/React.createElement("li", _extends({}, getItemProps({
       item,
       index,
-      'aria-selected': isSelected,
-      'tab-index': isHighlighted ? 0 : -1,
-      ref
-    }),
-    className: cn(styles.item, isSelected && styles.selected, isDisabled && styles.disabled),
-    "data-rs-internal": "select-list-box__item",
-    "data-focused": isHighlighted,
-    "data-test": `select-options-list__item_${item.key}`
-  }, /*#__PURE__*/React.createElement("span", null, item.label), shouldRenderCheckIcon && /*#__PURE__*/React.createElement(CheckOutlineIcon, {
-    "data-rs-internal": "select-list-box__check-icon",
-    className: cn(styles.checkIcon, isSelected && styles.visible)
-  }));
+      "aria-selected": isSelected,
+      "tab-index": isHighlighted ? 0 : -1
+    }), {
+      className: cn(styles.item, isSelected && styles.selected, isDisabled && styles.disabled),
+      "data-rs-internal": "select-list-box__item",
+      "data-focused": isHighlighted,
+      "data-test": `select-options-list__item_${item.key}`
+    }), t2, shouldRenderCheckIcon && /*#__PURE__*/React.createElement(CheckOutlineIcon, {
+      "data-rs-internal": "select-list-box__check-icon",
+      className: cn(styles.checkIcon, isSelected && styles.visible)
+    }));
+    $[0] = getItemProps;
+    $[1] = highlightedIndex;
+    $[2] = index;
+    $[3] = isMulti;
+    $[4] = item;
+    $[5] = selectedMap;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+
+  return t1;
 }
 
-function ListBoxGroup(_ref2) {
-  let {
+function ListBoxGroup(t0) {
+  const $ = c(23);
+  const {
     item,
     isFirst,
     state
-  } = _ref2;
+  } = t0;
   const hasHeading = item.label !== null && item.label !== undefined;
-  const hasDivider = !isFirst && !hasHeading; // If the section is not the first, add a divider for visual separation
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, hasDivider && /*#__PURE__*/React.createElement("hr", {
-    className: styles.divider
-  }), /*#__PURE__*/React.createElement("li", {
-    role: "presentation"
-  }, hasHeading && /*#__PURE__*/React.createElement("span", {
-    className: styles.groupHeader,
-    role: "presentation",
-    "data-rs-internal": "select-list-box__group-header"
-  }, item.label), /*#__PURE__*/React.createElement("ul", {
-    role: "group",
-    "aria-label": hasHeading ? getTextFromNodes(item.label) : undefined,
-    style: {
+  const hasDivider = !isFirst && !hasHeading;
+  let t1;
+
+  if ($[0] !== hasDivider) {
+    t1 = hasDivider && /*#__PURE__*/React.createElement("hr", {
+      className: styles.divider
+    });
+    $[0] = hasDivider;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+
+  let t2;
+
+  if ($[2] !== hasHeading || $[3] !== item.label) {
+    t2 = hasHeading && /*#__PURE__*/React.createElement("span", {
+      className: styles.groupHeader,
+      role: "presentation",
+      "data-rs-internal": "select-list-box__group-header"
+    }, item.label);
+    $[2] = hasHeading;
+    $[3] = item.label;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+
+  let t3;
+
+  if ($[5] !== hasHeading || $[6] !== item.label) {
+    t3 = hasHeading ? getTextFromNodes(item.label) : undefined;
+    $[5] = hasHeading;
+    $[6] = item.label;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+
+  let t4;
+
+  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = {
       padding: 0,
-      listStyle: 'none'
+      listStyle: "none"
+    };
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+
+  let t5;
+
+  if ($[9] !== item.options || $[10] !== state) {
+    let t6;
+
+    if ($[12] !== state) {
+      t6 = option => /*#__PURE__*/React.createElement(Option, {
+        key: option.key,
+        item: option,
+        state: state
+      });
+
+      $[12] = state;
+      $[13] = t6;
+    } else {
+      t6 = $[13];
     }
-  }, item.options.map(option => /*#__PURE__*/React.createElement(Option, {
-    key: option.key,
-    item: option,
-    state: state
-  })))));
+
+    t5 = item.options.map(t6);
+    $[9] = item.options;
+    $[10] = state;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+
+  let t6;
+
+  if ($[14] !== t3 || $[15] !== t5) {
+    t6 = /*#__PURE__*/React.createElement("ul", {
+      role: "group",
+      "aria-label": t3,
+      style: t4
+    }, t5);
+    $[14] = t3;
+    $[15] = t5;
+    $[16] = t6;
+  } else {
+    t6 = $[16];
+  }
+
+  let t7;
+
+  if ($[17] !== t2 || $[18] !== t6) {
+    t7 = /*#__PURE__*/React.createElement("li", {
+      role: "presentation"
+    }, t2, t6);
+    $[17] = t2;
+    $[18] = t6;
+    $[19] = t7;
+  } else {
+    t7 = $[19];
+  }
+
+  let t8;
+
+  if ($[20] !== t1 || $[21] !== t7) {
+    t8 = /*#__PURE__*/React.createElement(React.Fragment, null, t1, t7);
+    $[20] = t1;
+    $[21] = t7;
+    $[22] = t8;
+  } else {
+    t8 = $[22];
+  }
+
+  return t8;
 }
 
-function ListBox(_ref3) {
-  let {
+function ListBox(t0) {
+  const $ = c(26);
+  const {
     state,
     items,
     size,
     mode,
-    maxVisibleItems = 5,
+    maxVisibleItems: t1,
     emptyListMessage,
-    isPrimaryContrast = false
-  } = _ref3;
+    isPrimaryContrast: t2
+  } = t0;
+  const maxVisibleItems = t1 === undefined ? 5 : t1;
+  const isPrimaryContrast = t2 === undefined ? false : t2;
   const {
     menuProps
   } = state;
-  const firstGroupKey = items.find(item => item.type === 'group')?.key;
-  const itemsCount = getRealItemsCnt(items);
-  return /*#__PURE__*/React.createElement("ul", { ...menuProps,
-    className: cn(styles.listBox, SIZE_STYLES[size], MODE_STYLES[mode]),
-    style: {
-      '--_rs-select-list-box-max-height-by-items': calculateMaxHeightByItems(itemsCount, maxVisibleItems),
-      '--rs-select-contrast-primary': isPrimaryContrast ? '1' : '0'
-    },
-    "data-rs-internal": "select-list-box",
-    "data-test": "select-options-list"
-  }, itemsCount === 0 ? /*#__PURE__*/React.createElement("li", {
-    className: cn(styles.item, styles.disabled),
-    "data-rs-internal": "select-list-box__item"
-  }, /*#__PURE__*/React.createElement("span", null, emptyListMessage)) : items.map(item => item.type === 'group' ? /*#__PURE__*/React.createElement(ListBoxGroup, {
-    key: item.key,
-    item: item,
-    state: state,
-    isFirst: item.key === firstGroupKey
-  }) : /*#__PURE__*/React.createElement(Option, {
-    key: item.key,
-    item: item,
-    state: state
-  })));
+  const firstGroupKey = items.find(_temp)?.key;
+  let itemsCount;
+  let t3;
+  let t4;
+  let t5;
+
+  if ($[0] !== items || $[1] !== maxVisibleItems || $[2] !== menuProps || $[3] !== mode || $[4] !== size) {
+    itemsCount = getRealItemsCnt(items);
+    t4 = menuProps;
+    const t6 = SIZE_STYLES[size];
+    const t7 = MODE_STYLES[mode];
+
+    if ($[9] !== t6 || $[10] !== t7) {
+      t5 = cn(styles.listBox, t6, t7);
+      $[9] = t6;
+      $[10] = t7;
+      $[11] = t5;
+    } else {
+      t5 = $[11];
+    }
+
+    t3 = calculateMaxHeightByItems(itemsCount, maxVisibleItems);
+    $[0] = items;
+    $[1] = maxVisibleItems;
+    $[2] = menuProps;
+    $[3] = mode;
+    $[4] = size;
+    $[5] = itemsCount;
+    $[6] = t3;
+    $[7] = t4;
+    $[8] = t5;
+  } else {
+    itemsCount = $[5];
+    t3 = $[6];
+    t4 = $[7];
+    t5 = $[8];
+  }
+
+  const t6 = isPrimaryContrast ? "1" : "0";
+  let t7;
+
+  if ($[12] !== t3 || $[13] !== t6) {
+    t7 = {
+      "--_rs-select-list-box-max-height-by-items": t3,
+      "--rs-select-contrast-primary": t6
+    };
+    $[12] = t3;
+    $[13] = t6;
+    $[14] = t7;
+  } else {
+    t7 = $[14];
+  }
+
+  let t8;
+
+  if ($[15] !== emptyListMessage || $[16] !== firstGroupKey || $[17] !== items || $[18] !== itemsCount || $[19] !== state) {
+    t8 = itemsCount === 0 ? /*#__PURE__*/React.createElement("li", {
+      className: cn(styles.item, styles.disabled),
+      "data-rs-internal": "select-list-box__item"
+    }, /*#__PURE__*/React.createElement("span", null, emptyListMessage)) : items.map(item_0 => item_0.type === "group" ? /*#__PURE__*/React.createElement(ListBoxGroup, {
+      key: item_0.key,
+      item: item_0,
+      state: state,
+      isFirst: item_0.key === firstGroupKey
+    }) : /*#__PURE__*/React.createElement(Option, {
+      key: item_0.key,
+      item: item_0,
+      state: state
+    }));
+    $[15] = emptyListMessage;
+    $[16] = firstGroupKey;
+    $[17] = items;
+    $[18] = itemsCount;
+    $[19] = state;
+    $[20] = t8;
+  } else {
+    t8 = $[20];
+  }
+
+  let t9;
+
+  if ($[21] !== t4 || $[22] !== t5 || $[23] !== t7 || $[24] !== t8) {
+    t9 = /*#__PURE__*/React.createElement("ul", _extends({}, t4, {
+      className: t5,
+      style: t7,
+      "data-rs-internal": "select-list-box",
+      "data-test": "select-options-list"
+    }), t8);
+    $[21] = t4;
+    $[22] = t5;
+    $[23] = t7;
+    $[24] = t8;
+    $[25] = t9;
+  } else {
+    t9 = $[25];
+  }
+
+  return t9;
+}
+
+function _temp(item) {
+  return item.type === "group";
 }
 
 export { ListBox };

package/lib/parts/multi-trigger.d.ts

@@ -7,6 +7,6 @@ export interface MultiTriggerProps {
     isSingleLine: boolean;
     isDisabled: boolean;
     placeholder?: string;
-    triggerRef?: React.RefObject<HTMLDivElement>;
+    triggerEl?: HTMLDivElement | null;
 }
-export declare function MultiTrigger({ selectedItems, valueProps, isSingleLine, isDisabled, placeholder, triggerRef, removeSelectedItem }: MultiTriggerProps): React.JSX.Element;
+export declare function MultiTrigger({ selectedItems, valueProps, isSingleLine, isDisabled, placeholder, triggerEl, removeSelectedItem }: MultiTriggerProps): React.JSX.Element;

package/lib/parts/multi-trigger.js

@@ -1,3 +1,5 @@
+import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
+import { c } from 'react-compiler-runtime';
 import React from 'react';
 import cn from 'classnames';
 import { RemovableTag, Tag } from '@rescui/tag';
@@ -6,65 +8,140 @@ import { getTextFromNodes } from '../utils/get-text-from-nodes.js';
 import { getOptionValue } from '../utils/get-option-value.js';
 import Foldable from './foldable.js';
 
-function MultiTrigger(_ref) {
-  let {
+function MultiTrigger(t0) {
+  const $ = c(21);
+  const {
     selectedItems,
     valueProps,
     isSingleLine,
     isDisabled,
     placeholder,
-    triggerRef,
+    triggerEl,
     removeSelectedItem
-  } = _ref;
+  } = t0;
   const hasValue = selectedItems.length > 0;
 
   if (!hasValue) {
-    return /*#__PURE__*/React.createElement("div", { ...valueProps,
-      className: cn(styles.triggerText, styles.labelNotSelected),
-      "data-test": 'multiselect__trigger_content'
-    }, placeholder);
+    let t1;
+
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+      t1 = cn(styles.triggerText, styles.labelNotSelected);
+      $[0] = t1;
+    } else {
+      t1 = $[0];
+    }
+
+    let t2;
+
+    if ($[1] !== placeholder || $[2] !== valueProps) {
+      t2 = /*#__PURE__*/React.createElement("div", _extends({}, valueProps, {
+        className: t1,
+        "data-test": "multiselect__trigger_content"
+      }), placeholder);
+      $[1] = placeholder;
+      $[2] = valueProps;
+      $[3] = t2;
+    } else {
+      t2 = $[3];
+    }
+
+    return t2;
+  }
+
+  let t1;
+
+  if ($[4] !== isDisabled || $[5] !== isSingleLine || $[6] !== removeSelectedItem || $[7] !== selectedItems || $[8] !== triggerEl) {
+    let t2;
+
+    if ($[10] !== isDisabled || $[11] !== isSingleLine || $[12] !== removeSelectedItem || $[13] !== triggerEl) {
+      t2 = option => {
+        const key = getOptionValue(option);
+        return /*#__PURE__*/React.createElement(RemovableTag, {
+          key: key,
+          tabIndex: -1,
+          "data-test": `selected-tag-${key}`,
+          className: styles.tag,
+          disabled: isDisabled,
+          onRemoveClick: () => {
+            removeSelectedItem(option);
+            triggerEl?.focus({
+              focusVisible: false
+            });
+          },
+          "data-rs-internal": "select-trigger__removable-tag",
+          wrap: !isSingleLine,
+          "aria-label": getTextFromNodes(option.label),
+          onFocus: e => {
+            if (e.target.getAttribute("tabindex") === "-1") {
+              triggerEl?.focus({
+                focusVisible: false
+              });
+            }
+          }
+        }, option.label);
+      };
+
+      $[10] = isDisabled;
+      $[11] = isSingleLine;
+      $[12] = removeSelectedItem;
+      $[13] = triggerEl;
+      $[14] = t2;
+    } else {
+      t2 = $[14];
+    }
+
+    t1 = selectedItems.map(t2);
+    $[4] = isDisabled;
+    $[5] = isSingleLine;
+    $[6] = removeSelectedItem;
+    $[7] = selectedItems;
+    $[8] = triggerEl;
+    $[9] = t1;
+  } else {
+    t1 = $[9];
   }
 
-  const tags = selectedItems.map(option => {
-    const key = getOptionValue(option);
-    return /*#__PURE__*/React.createElement(RemovableTag, {
-      key: key,
-      tabIndex: -1,
-      "data-test": `selected-tag-${key}`,
-      className: styles.tag,
-      disabled: isDisabled,
-      onRemoveClick: () => {
-        removeSelectedItem(option);
-        triggerRef.current?.focus({
-          focusVisible: false
-        });
-      },
-      "data-rs-internal": "select-trigger__removable-tag",
-      wrap: !isSingleLine,
-      "aria-label": getTextFromNodes(option.label),
-      onFocus: e => {
-        if (e.target.getAttribute('tabindex') === '-1') {
-          triggerRef.current?.focus({
-            focusVisible: false
-          });
-        }
-      }
-    }, option.label);
-  });
-  return /*#__PURE__*/React.createElement("div", { ...valueProps,
-    className: styles.multi,
-    "data-test": "multiselect__trigger_content"
-  }, isSingleLine ? /*#__PURE__*/React.createElement(Foldable, {
-    className: styles.tagsContainer,
-    renderHiddenCounter: (n, ref) => /*#__PURE__*/React.createElement(Tag, {
-      className: cn(styles.tag, styles.filledTag),
-      key: "+",
-      ref: ref,
-      "data-rs-internal": "select-trigger__tag"
-    }, "+", n)
-  }, tags) : /*#__PURE__*/React.createElement("div", {
-    className: styles.tagsContainer
-  }, tags));
+  const tags = t1;
+  let t2;
+
+  if ($[15] !== isSingleLine || $[16] !== tags) {
+    t2 = isSingleLine ? /*#__PURE__*/React.createElement(Foldable, {
+      className: styles.tagsContainer,
+      renderHiddenCounter: _temp
+    }, tags) : /*#__PURE__*/React.createElement("div", {
+      className: styles.tagsContainer
+    }, tags);
+    $[15] = isSingleLine;
+    $[16] = tags;
+    $[17] = t2;
+  } else {
+    t2 = $[17];
+  }
+
+  let t3;
+
+  if ($[18] !== t2 || $[19] !== valueProps) {
+    t3 = /*#__PURE__*/React.createElement("div", _extends({}, valueProps, {
+      className: styles.multi,
+      "data-test": "multiselect__trigger_content"
+    }), t2);
+    $[18] = t2;
+    $[19] = valueProps;
+    $[20] = t3;
+  } else {
+    t3 = $[20];
+  }
+
+  return t3;
+}
+
+function _temp(n, ref) {
+  return /*#__PURE__*/React.createElement(Tag, {
+    className: cn(styles.tag, styles.filledTag),
+    key: "+",
+    ref: ref,
+    "data-rs-internal": "select-trigger__tag"
+  }, "+", n);
 }
 
 export { MultiTrigger };