@rescui/chip-list 0.14.4 → 0.15.0

package/lib/parts/chip-list-base.js

@@ -1,4 +1,5 @@
 "use client";
+import { c } from 'react-compiler-runtime';
 import React from 'react';
 import cn from 'classnames';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
@@ -33,28 +34,52 @@ const calculateAutoPattern = _ref => {
 }; // eslint-disable-next-line complexity
 
 
-function ChipListBase(_ref2) {
-  let {
-    size = 'm',
-    sparse = false,
-    compact = false,
-    disabled = false,
+function ChipListBase(t0) {
+  const $ = c(47);
+  const {
+    size: t1,
+    sparse: t2,
+    compact: t3,
+    disabled: t4,
     className,
-    mode = 'classic',
-    alignItems = 'left',
-    pattern = 'auto',
+    mode: t5,
+    alignItems: t6,
+    pattern: t7,
     theme: themeFromProps,
     value,
     onChange,
     compareValues,
     children,
     name,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledBy,
-    ['data-e2e']: e2eId,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "data-e2e": e2eId,
     style
-  } = _ref2;
+  } = t0;
+  const size = t1 === undefined ? "m" : t1;
+  const sparse = t2 === undefined ? false : t2;
+  const compact = t3 === undefined ? false : t3;
+  const disabled = t4 === undefined ? false : t4;
+  const mode = t5 === undefined ? "classic" : t5;
+  const alignItems = t6 === undefined ? "left" : t6;
+  const pattern = t7 === undefined ? "auto" : t7;
   const theme = useThemeWithUndefined(themeFromProps);
+  let t8;
+
+  if ($[0] !== children || $[1] !== compareValues || $[2] !== value) {
+    t8 = {
+      children,
+      compareValues,
+      value
+    };
+    $[0] = children;
+    $[1] = compareValues;
+    $[2] = value;
+    $[3] = t8;
+  } else {
+    t8 = $[3];
+  }
+
   const {
     childrenWithValues,
     selectedIds,
@@ -62,58 +87,171 @@ function ChipListBase(_ref2) {
     hasControls,
     allItemsHaveControls,
     tabRefs
-  } = useItemsIds({
-    children,
-    compareValues,
-    value
-  });
-  const resolvedPattern = pattern === 'auto' ? calculateAutoPattern({
-    hasHref,
-    hasControls
-  }) : pattern;
-  const rovingTabIndex = useRovingTabIndex({
-    enabled: resolvedPattern === 'tablist' && !disabled,
-    selectedId: selectedIds[0],
-    tabRefs
-  }); // eslint-disable-next-line complexity
-
-  React.useEffect(() => {
-    if (!IS_PRODUCTION && resolvedPattern === 'radiogroup' && hasHref) {
-      // eslint-disable-next-line no-console
-      console.warn('[RescUI] ChipList with pattern="radiogroup" contains Chip with href. href is ignored. Use pattern="navigation" or pattern="auto" for link chips.');
-    }
-
-    if (!IS_PRODUCTION && resolvedPattern !== 'tablist' && hasControls) {
-      // eslint-disable-next-line no-console
-      console.warn('[RescUI] ChipList with pattern other than "tablist" contains Chip with aria-controls. Use pattern="tablist" or pattern="auto" for controlled tab panels.');
-    }
-
-    if (!IS_PRODUCTION && resolvedPattern === 'tablist' && !allItemsHaveControls) {
-      // eslint-disable-next-line no-console
-      console.warn('[RescUI] ChipList with pattern="tablist" requires every Chip to have aria-controls. Every tab should control a panel.');
-    }
-  }, [allItemsHaveControls, hasControls, hasHref, resolvedPattern]);
-  return /*#__PURE__*/React.createElement(ChipListContext.Provider, {
-    value: {
+  } = useItemsIds(t8);
+  let t9;
+
+  if ($[4] !== hasControls || $[5] !== hasHref || $[6] !== pattern) {
+    t9 = pattern === "auto" ? calculateAutoPattern({
+      hasHref,
+      hasControls
+    }) : pattern;
+    $[4] = hasControls;
+    $[5] = hasHref;
+    $[6] = pattern;
+    $[7] = t9;
+  } else {
+    t9 = $[7];
+  }
+
+  const resolvedPattern = t9;
+  const t10 = resolvedPattern === "tablist" && !disabled;
+  let t11;
+
+  if ($[8] !== selectedIds[0] || $[9] !== t10 || $[10] !== tabRefs) {
+    t11 = {
+      enabled: t10,
+      selectedId: selectedIds[0],
+      tabRefs
+    };
+    $[8] = selectedIds[0];
+    $[9] = t10;
+    $[10] = tabRefs;
+    $[11] = t11;
+  } else {
+    t11 = $[11];
+  }
+
+  const rovingTabIndex = useRovingTabIndex(t11);
+  let t12;
+  let t13;
+
+  if ($[12] !== allItemsHaveControls || $[13] !== hasControls || $[14] !== hasHref || $[15] !== resolvedPattern) {
+    t12 = () => {
+      if (!IS_PRODUCTION && resolvedPattern === "radiogroup" && hasHref) {
+        console.warn("[RescUI] ChipList with pattern=\"radiogroup\" contains Chip with href. href is ignored. Use pattern=\"navigation\" or pattern=\"auto\" for link chips.");
+      }
+
+      if (!IS_PRODUCTION && resolvedPattern !== "tablist" && hasControls) {
+        console.warn("[RescUI] ChipList with pattern other than \"tablist\" contains Chip with aria-controls. Use pattern=\"tablist\" or pattern=\"auto\" for controlled tab panels.");
+      }
+
+      if (!IS_PRODUCTION && resolvedPattern === "tablist" && !allItemsHaveControls) {
+        console.warn("[RescUI] ChipList with pattern=\"tablist\" requires every Chip to have aria-controls. Every tab should control a panel.");
+      }
+    };
+
+    t13 = [allItemsHaveControls, hasControls, hasHref, resolvedPattern];
+    $[12] = allItemsHaveControls;
+    $[13] = hasControls;
+    $[14] = hasHref;
+    $[15] = resolvedPattern;
+    $[16] = t12;
+    $[17] = t13;
+  } else {
+    t12 = $[16];
+    t13 = $[17];
+  }
+
+  React.useEffect(t12, t13);
+  const t14 = resolvedPattern === "tablist" ? rovingTabIndex : undefined;
+  let t15;
+
+  if ($[18] !== disabled || $[19] !== name || $[20] !== onChange || $[21] !== resolvedPattern || $[22] !== selectedIds || $[23] !== t14) {
+    t15 = {
       onChange,
       selectedIds,
       disabled,
       pattern: resolvedPattern,
       name,
-      rovingTabIndex: resolvedPattern === 'tablist' ? rovingTabIndex : undefined
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: cn(styles.main, styles[theme], styles[mode], STYLES_SIZES[size], sparse ? styles.innerOffsetL : styles.innerOffsetM, compact && styles.compact, disabled && styles.disabled, ALIGN_ITEMS_STYLES[alignItems], className),
-    "data-e2e": e2eId ? `${e2eId}__chips-container` : null,
-    "data-rs-internal": 'chip-list',
-    "data-test": 'chip-list',
-    role: resolvedPattern,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    style: style
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.chipsContainer
-  }, childrenWithValues)));
+      rovingTabIndex: t14
+    };
+    $[18] = disabled;
+    $[19] = name;
+    $[20] = onChange;
+    $[21] = resolvedPattern;
+    $[22] = selectedIds;
+    $[23] = t14;
+    $[24] = t15;
+  } else {
+    t15 = $[24];
+  }
+
+  const t16 = styles[theme];
+  const t17 = styles[mode];
+  const t18 = STYLES_SIZES[size];
+  const t19 = sparse ? styles.innerOffsetL : styles.innerOffsetM;
+  const t20 = compact && styles.compact;
+  const t21 = disabled && styles.disabled;
+  const t22 = ALIGN_ITEMS_STYLES[alignItems];
+  let t23;
+
+  if ($[25] !== className || $[26] !== t16 || $[27] !== t17 || $[28] !== t18 || $[29] !== t19 || $[30] !== t20 || $[31] !== t21 || $[32] !== t22) {
+    t23 = cn(styles.main, t16, t17, t18, t19, t20, t21, t22, className);
+    $[25] = className;
+    $[26] = t16;
+    $[27] = t17;
+    $[28] = t18;
+    $[29] = t19;
+    $[30] = t20;
+    $[31] = t21;
+    $[32] = t22;
+    $[33] = t23;
+  } else {
+    t23 = $[33];
+  }
+
+  const t24 = e2eId ? `${e2eId}__chips-container` : null;
+  let t25;
+
+  if ($[34] !== childrenWithValues) {
+    t25 = /*#__PURE__*/React.createElement("div", {
+      className: styles.chipsContainer
+    }, childrenWithValues);
+    $[34] = childrenWithValues;
+    $[35] = t25;
+  } else {
+    t25 = $[35];
+  }
+
+  let t26;
+
+  if ($[36] !== ariaLabel || $[37] !== ariaLabelledBy || $[38] !== resolvedPattern || $[39] !== style || $[40] !== t23 || $[41] !== t24 || $[42] !== t25) {
+    t26 = /*#__PURE__*/React.createElement("div", {
+      className: t23,
+      "data-e2e": t24,
+      "data-rs-internal": "chip-list",
+      "data-test": "chip-list",
+      role: resolvedPattern,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      style: style
+    }, t25);
+    $[36] = ariaLabel;
+    $[37] = ariaLabelledBy;
+    $[38] = resolvedPattern;
+    $[39] = style;
+    $[40] = t23;
+    $[41] = t24;
+    $[42] = t25;
+    $[43] = t26;
+  } else {
+    t26 = $[43];
+  }
+
+  let t27;
+
+  if ($[44] !== t15 || $[45] !== t26) {
+    t27 = /*#__PURE__*/React.createElement(ChipListContext.Provider, {
+      value: t15
+    }, t26);
+    $[44] = t15;
+    $[45] = t26;
+    $[46] = t27;
+  } else {
+    t27 = $[46];
+  }
+
+  return t27;
 }
 
 export { ChipListBase };

package/lib/parts/chip-list-context.js

@@ -1,5 +1,5 @@
 "use client";
-import { createContext, useContext } from 'react';
+import { useContext, createContext } from 'react';
 const ChipListContext = /*#__PURE__*/createContext({
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   onChange: () => {},
@@ -8,6 +8,8 @@ const ChipListContext = /*#__PURE__*/createContext({
   pattern: 'navigation'
 });
 
-const useChipListContext = () => useContext(ChipListContext);
+const useChipListContext = () => {
+  return useContext(ChipListContext);
+};
 
 export { ChipListContext, useChipListContext };

package/lib/parts/chip-list.p.module.css.js

@@ -1,27 +1,27 @@
 var styles = {
-  "light": "_light_obqqq4_8",
-  "dark": "_dark_obqqq4_11",
-  "alignLeft": "_alignLeft_obqqq4_15",
-  "alignCenter": "_alignCenter_obqqq4_18",
-  "alignRight": "_alignRight_obqqq4_21",
-  "sizeXs": "_sizeXs_obqqq4_25",
-  "sizeS": "_sizeS_obqqq4_28",
-  "sizeM": "_sizeM_obqqq4_31",
-  "sizeL": "_sizeL_obqqq4_34",
-  "innerOffsetL": "_innerOffsetL_obqqq4_38",
-  "innerOffsetM": "_innerOffsetM_obqqq4_41",
-  "classic": "_classic_obqqq4_45",
-  "rock": "_rock_obqqq4_48",
-  "compact": "_compact_obqqq4_52",
-  "main": "_main_obqqq4_56",
-  "chipsContainer": "_chipsContainer_obqqq4_62",
-  "alignIconLeft": "_alignIconLeft_obqqq4_72",
-  "alignIconRight": "_alignIconRight_obqqq4_75",
-  "chip": "_chip_obqqq4_62",
-  "selected": "_selected_obqqq4_176",
-  "disabled": "_disabled_obqqq4_183",
-  "icon": "_icon_obqqq4_216",
-  "hiddenInput": "_hiddenInput_obqqq4_227",
-  "withoutText": "_withoutText_obqqq4_244"
+  "light": "_light_lybc4g_8",
+  "dark": "_dark_lybc4g_11",
+  "alignLeft": "_alignLeft_lybc4g_15",
+  "alignCenter": "_alignCenter_lybc4g_18",
+  "alignRight": "_alignRight_lybc4g_21",
+  "sizeXs": "_sizeXs_lybc4g_25",
+  "sizeS": "_sizeS_lybc4g_28",
+  "sizeM": "_sizeM_lybc4g_31",
+  "sizeL": "_sizeL_lybc4g_34",
+  "innerOffsetL": "_innerOffsetL_lybc4g_38",
+  "innerOffsetM": "_innerOffsetM_lybc4g_41",
+  "classic": "_classic_lybc4g_45",
+  "rock": "_rock_lybc4g_48",
+  "compact": "_compact_lybc4g_52",
+  "main": "_main_lybc4g_56",
+  "chipsContainer": "_chipsContainer_lybc4g_62",
+  "alignIconLeft": "_alignIconLeft_lybc4g_72",
+  "alignIconRight": "_alignIconRight_lybc4g_75",
+  "chip": "_chip_lybc4g_62",
+  "selected": "_selected_lybc4g_176",
+  "disabled": "_disabled_lybc4g_183",
+  "icon": "_icon_lybc4g_216",
+  "hiddenInput": "_hiddenInput_lybc4g_227",
+  "withoutText": "_withoutText_lybc4g_244"
 };
 export { styles as default };