@jackbernnie/hiyf 0.3.7 → 0.3.9

package/dist/components/Table.d.ts

@@ -40,6 +40,17 @@ export interface TableColumn<T> {
     filterValue?: string;
     /** Called when a filter option is selected. */
     onFilterChange?: (value: string) => void;
+    /**
+     * Multi-select filter mode: the currently selected option values. When provided
+     * (with onFilterValuesChange), the header menu renders filterOptions as toggling
+     * check items that DON'T close the menu, so several can be selected in one visit.
+     * There is no "all" convention in this mode — an empty array means unfiltered, and
+     * a "Clear" item appears whenever anything is selected. Mutually exclusive with
+     * filterValue/onFilterChange single-select mode.
+     */
+    filterValues?: string[];
+    /** Called with the full updated selection whenever a multi-select option is toggled. */
+    onFilterValuesChange?: (values: string[]) => void;
     /** Optional explanatory text shown in a hover tooltip via an info icon next to the header. */
     headerInfo?: string;
     /**

package/dist/components/Table.js

@@ -70,9 +70,16 @@ function HeaderMenu({
   onSortChange
 }) {
   const activeSort = sort?.key === column.key ? sort : void 0;
+  const multi = column.filterValues !== void 0;
   const firstFilterValue = column.filterOptions?.[0]?.value;
-  const filterActive = column.filterValue !== void 0 && firstFilterValue !== void 0 && column.filterValue !== firstFilterValue;
+  const filterActive = multi ? (column.filterValues?.length ?? 0) > 0 : column.filterValue !== void 0 && firstFilterValue !== void 0 && column.filterValue !== firstFilterValue;
   const active = Boolean(activeSort) || filterActive;
+  const toggleValue = (value) => {
+    const cur = column.filterValues ?? [];
+    column.onFilterValuesChange?.(
+      cur.includes(value) ? cur.filter((v) => v !== value) : [...cur, value]
+    );
+  };
   return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
     /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
       "button",
@@ -107,17 +114,46 @@ function HeaderMenu({
         )
       ] }),
       column.sortable && column.filterOptions && column.filterOptions.length > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-      column.filterOptions?.map((option) => /* @__PURE__ */ jsxs(
-        DropdownMenuItem,
-        {
-          onSelect: () => column.onFilterChange?.(option.value),
-          children: [
-            /* @__PURE__ */ jsx(CheckGlyph, { visible: column.filterValue === option.value }),
-            option.label
-          ]
-        },
-        option.value
-      ))
+      column.filterOptions?.map(
+        (option) => multi ? (
+          // Multi-select: toggling keeps the menu open so several values can be
+          // picked in one visit (preventDefault stops Radix's close-on-select).
+          // whitespace-nowrap: a filter label is a name — it widens the menu, never wraps.
+          /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              className: "whitespace-nowrap",
+              onSelect: (event) => {
+                event.preventDefault();
+                toggleValue(option.value);
+              },
+              children: [
+                /* @__PURE__ */ jsx(CheckGlyph, { visible: (column.filterValues ?? []).includes(option.value) }),
+                option.label
+              ]
+            },
+            option.value
+          )
+        ) : /* @__PURE__ */ jsxs(
+          DropdownMenuItem,
+          {
+            className: "whitespace-nowrap",
+            onSelect: () => column.onFilterChange?.(option.value),
+            children: [
+              /* @__PURE__ */ jsx(CheckGlyph, { visible: column.filterValue === option.value }),
+              option.label
+            ]
+          },
+          option.value
+        )
+      ),
+      multi && (column.filterValues?.length ?? 0) > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => column.onFilterValuesChange?.([]), children: [
+          /* @__PURE__ */ jsx(CheckGlyph, { visible: false }),
+          "Clear"
+        ] })
+      ] }) : null
     ] })
   ] });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jackbernnie/hiyf",
-  "version": "0.3.7",
+  "version": "0.3.9",
   "description": "human-in-your-face — an AI design protocol (a locked, LLM-safe design system). Forked from Polar's Orbit (Apache-2.0).",
   "license": "Apache-2.0",
   "type": "module",