@nurix/ui-component-library 1.1.7-stage.143 → 1.1.7-stage.146

package/dist/index.d.mts

@@ -3668,6 +3668,13 @@ interface MultiSelectProps<T extends string = string> {
      * @default true
      */
     showSelectAll?: boolean;
+    /**
+     * When every selectable item is selected, collapse the trigger summary to
+     * this label plus the count — e.g. `allSelectedLabel="All tools selected"`
+     * renders `All tools selected (4)` instead of the comma-separated list.
+     * When omitted, the comma summary is shown for the all-selected case too.
+     */
+    allSelectedLabel?: string;
     /**
      * Size variant. Same vocabulary as `SelectTrigger.size` so a paired
      * single-select and multi-select stay visually aligned.
@@ -3717,7 +3724,7 @@ interface MultiSelectProps<T extends string = string> {
  * a filter pill — so it slots into form layouts next to a normal Select
  * without visual drift.
  */
-declare function MultiSelect<T extends string = string>({ value, onValueChange, items, placeholder, label, showSearch, searchPlaceholder, showSelectAll, size, bg, disabled, maxHeight, id, className, "data-testid": dataTestId, }: MultiSelectProps<T>): react_jsx_runtime.JSX.Element;
+declare function MultiSelect<T extends string = string>({ value, onValueChange, items, placeholder, label, showSearch, searchPlaceholder, showSelectAll, allSelectedLabel, size, bg, disabled, maxHeight, id, className, "data-testid": dataTestId, }: MultiSelectProps<T>): react_jsx_runtime.JSX.Element;
 
 interface ChipProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick"> {
     /**

package/dist/index.d.ts

@@ -3668,6 +3668,13 @@ interface MultiSelectProps<T extends string = string> {
      * @default true
      */
     showSelectAll?: boolean;
+    /**
+     * When every selectable item is selected, collapse the trigger summary to
+     * this label plus the count — e.g. `allSelectedLabel="All tools selected"`
+     * renders `All tools selected (4)` instead of the comma-separated list.
+     * When omitted, the comma summary is shown for the all-selected case too.
+     */
+    allSelectedLabel?: string;
     /**
      * Size variant. Same vocabulary as `SelectTrigger.size` so a paired
      * single-select and multi-select stay visually aligned.
@@ -3717,7 +3724,7 @@ interface MultiSelectProps<T extends string = string> {
  * a filter pill — so it slots into form layouts next to a normal Select
  * without visual drift.
  */
-declare function MultiSelect<T extends string = string>({ value, onValueChange, items, placeholder, label, showSearch, searchPlaceholder, showSelectAll, size, bg, disabled, maxHeight, id, className, "data-testid": dataTestId, }: MultiSelectProps<T>): react_jsx_runtime.JSX.Element;
+declare function MultiSelect<T extends string = string>({ value, onValueChange, items, placeholder, label, showSearch, searchPlaceholder, showSelectAll, allSelectedLabel, size, bg, disabled, maxHeight, id, className, "data-testid": dataTestId, }: MultiSelectProps<T>): react_jsx_runtime.JSX.Element;
 
 interface ChipProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick"> {
     /**

package/dist/index.js

@@ -10206,13 +10206,7 @@ var TagBadge = React21.forwardRef(
                             } : void 0
                           }
                         ),
-                        isSelected && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                          import_lucide_react5.Check,
-                          {
-                            className: "size-3 shrink-0 text-fg-black ml-auto",
-                            strokeWidth: 1
-                          }
-                        )
+                        isSelected && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react5.Check, { className: "size-4 shrink-0 text-border-token-brand ml-auto" })
                       ]
                     },
                     option.value
@@ -12742,10 +12736,11 @@ function Pagination({
                 value: String(rowsPerPage),
                 onValueChange: handleRowsPerPageSelect,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SelectTrigger, { size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SelectValue, {}) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SelectTrigger, { size: "small", className: "min-w-[72px]", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SelectValue, {}) }),
                   /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                     SelectContent,
                     {
+                      className: "min-w-[72px]",
                       items: ROWS_PER_PAGE_OPTIONS.map((n) => ({
                         value: String(n),
                         label: String(n)
@@ -18018,6 +18013,7 @@ function MultiSelect({
   showSearch = false,
   searchPlaceholder = "Search\u2026",
   showSelectAll = true,
+  allSelectedLabel,
   size = "regular",
   bg = "default",
   disabled = false,
@@ -18052,11 +18048,12 @@ function MultiSelect({
   };
   const summary = React48.useMemo(() => {
     if (value.length === 0) return "";
+    if (allSelected && allSelectedLabel) return `${allSelectedLabel} (${value.length})`;
     const valueSet = new Set(value);
     const labels = items.filter((i) => valueSet.has(i.value)).map((i) => i.label);
     if (labels.length <= 2) return labels.join(", ");
     return `${labels.slice(0, 2).join(", ")} +${labels.length - 2}`;
-  }, [items, value]);
+  }, [items, value, allSelected, allSelectedLabel]);
   const sizeClass = size === "small" ? SELECT_TOKENS.container.singleLineSmall : size === "large" ? SELECT_TOKENS.container.singleLineLarge : SELECT_TOKENS.container.singleLineRegular;
   const trigger = /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     "button",

package/dist/index.mjs

@@ -10085,13 +10085,7 @@ var TagBadge = React21.forwardRef(
                             } : void 0
                           }
                         ),
-                        isSelected && /* @__PURE__ */ jsx19(
-                          Check2,
-                          {
-                            className: "size-3 shrink-0 text-fg-black ml-auto",
-                            strokeWidth: 1
-                          }
-                        )
+                        isSelected && /* @__PURE__ */ jsx19(Check2, { className: "size-4 shrink-0 text-border-token-brand ml-auto" })
                       ]
                     },
                     option.value
@@ -12629,10 +12623,11 @@ function Pagination({
                 value: String(rowsPerPage),
                 onValueChange: handleRowsPerPageSelect,
                 children: [
-                  /* @__PURE__ */ jsx33(SelectTrigger, { size: "small", children: /* @__PURE__ */ jsx33(SelectValue, {}) }),
+                  /* @__PURE__ */ jsx33(SelectTrigger, { size: "small", className: "min-w-[72px]", children: /* @__PURE__ */ jsx33(SelectValue, {}) }),
                   /* @__PURE__ */ jsx33(
                     SelectContent,
                     {
+                      className: "min-w-[72px]",
                       items: ROWS_PER_PAGE_OPTIONS.map((n) => ({
                         value: String(n),
                         label: String(n)
@@ -17913,6 +17908,7 @@ function MultiSelect({
   showSearch = false,
   searchPlaceholder = "Search\u2026",
   showSelectAll = true,
+  allSelectedLabel,
   size = "regular",
   bg = "default",
   disabled = false,
@@ -17947,11 +17943,12 @@ function MultiSelect({
   };
   const summary = React48.useMemo(() => {
     if (value.length === 0) return "";
+    if (allSelected && allSelectedLabel) return `${allSelectedLabel} (${value.length})`;
     const valueSet = new Set(value);
     const labels = items.filter((i) => valueSet.has(i.value)).map((i) => i.label);
     if (labels.length <= 2) return labels.join(", ");
     return `${labels.slice(0, 2).join(", ")} +${labels.length - 2}`;
-  }, [items, value]);
+  }, [items, value, allSelected, allSelectedLabel]);
   const sizeClass = size === "small" ? SELECT_TOKENS.container.singleLineSmall : size === "large" ? SELECT_TOKENS.container.singleLineLarge : SELECT_TOKENS.container.singleLineRegular;
   const trigger = /* @__PURE__ */ jsxs35(
     "button",

package/dist/styles.css

@@ -895,6 +895,9 @@
   .lego-land .min-w-\[64px\] {
     min-width: 64px;
   }
+  .lego-land .min-w-\[72px\] {
+    min-width: 72px;
+  }
   .lego-land .min-w-\[77px\] {
     min-width: 77px;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nurix/ui-component-library",
-  "version": "1.1.7-stage.143",
+  "version": "1.1.7-stage.146",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",