@l3mpire/ui 2.16.4 → 2.17.0

package/USAGE.md

@@ -963,7 +963,7 @@ import {
 
 **Advanced filter shortcut:** the PropertySelector footer shows an "Advanced filter · N rule(s)" item. Clicking it closes the property selector and opens the advanced popover directly in its initial empty state — where the user picks the first property inline via a "Where | [Select property ▾]" draft row. When no advanced filters exist yet, clicking this shortcut makes the AdvancedChip appear with the popover already open; closing without adding a filter removes the chip automatically.
 
-**Dynamic options ("Me", "Unassigned", …):** enum/tags/relation properties accept a `dynamicOptions` array. Each entry is `{ value, label, description? }` and is rendered inline with regular options in the SingleSelect / MultiSelect dropdown. The `value` is a sentinel string stored on `FilterCondition.value` — the DS renders the `label` in the filter chip (not the raw sentinel) and the consuming app resolves it at query time (e.g. `"__me__"` → `currentUser.id`). This keeps session/business logic out of the DS while still getting a consistent visual treatment.
+**Dynamic options ("Me", "Unassigned", …):** enum/tags/relation properties accept a `dynamicOptions` array. Each entry is `{ value, label, description?, icon? }` and is rendered at the top of the SingleSelect / MultiSelect dropdown with a divider separating it from the regular options. The `value` is a sentinel string stored on `FilterCondition.value` — the DS only renders, the consuming app resolves it at query time (e.g. `"__me__"` → `currentUser.id`). This keeps session/business logic out of the DS while still getting a consistent visual treatment.
 
 ```tsx
 {
@@ -979,8 +979,9 @@ import {
       value: "__me__",
       label: "Me",
       description: "This value is dynamically applied to the current user",
+      icon: faBoltOutline,
     },
-    { value: "__deactivated__", label: "All deactivated and removed owners" },
+    { value: "__deactivated__", label: "All deactivated and removed owners", icon: faBoltOutline },
   ],
 }
 ```
@@ -992,7 +993,7 @@ import {
 | `createFilterWithDefaults(propertyId, type)` | Creates FilterCondition with default operator |
 | `isNoValueOperator(op)` | True for is empty / is not empty / is true / is false |
 | `getValueInputType(type, op)` | Returns the input component name for a type+operator combo |
-| `formatFilterValue(value, dynamicOptions?)` | Stringifies a `FilterValue` for display — resolves sentinel values via `dynamicOptions` labels |
+| `formatFilterValue(value)` | Stringifies a `FilterValue` for display (handles Date, ranges, arrays, booleans) |
 | `getBadgeCount(value)` | Returns `+N` count for multi-value selections, `undefined` otherwise |
 | `createEmptyGroup()` / `isFilterGroup(node)` | Tree helpers for nested groups |
 | `wrapInGroup(condition)` / `unwrapGroup(group)` | Convert between condition and single-child group |

package/dist/index.d.mts

@@ -935,7 +935,7 @@ interface InteractiveFilterChipProps {
 }
 declare const InteractiveFilterChip: React.FC<InteractiveFilterChipProps>;
 
-type FilterBarMode = "default" | "minimal";
+type FilterBarMode = "default" | "minimal" | "icon";
 /**
  * Observes the container width and returns the appropriate FilterBar mode.
  * - default: > breakpoint

package/dist/index.d.ts

@@ -935,7 +935,7 @@ interface InteractiveFilterChipProps {
 }
 declare const InteractiveFilterChip: React.FC<InteractiveFilterChipProps>;
 
-type FilterBarMode = "default" | "minimal";
+type FilterBarMode = "default" | "minimal" | "icon";
 /**
  * Observes the container width and returns the appropriate FilterBar mode.
  * - default: > breakpoint

package/dist/index.js

@@ -5440,6 +5440,23 @@ function updateNodeInTree(nodes, id, updater) {
     return node;
   });
 }
+function toggleGroupLogicInTree(nodes, id) {
+  const idx = nodes.findIndex((n) => n.id === id);
+  if (idx >= 0) {
+    const current = nodes[idx].logicOperator ?? "and";
+    const next = current === "and" ? "or" : "and";
+    return nodes.map(
+      (n, i) => i === 0 ? n : { ...n, logicOperator: next }
+    );
+  }
+  return nodes.map((node) => {
+    if (isFilterGroup(node)) {
+      const updated = toggleGroupLogicInTree(node.children, id);
+      if (updated !== node.children) return { ...node, children: updated };
+    }
+    return node;
+  });
+}
 function removeNodeFromTree(nodes, id) {
   const result = [];
   for (const node of nodes) {
@@ -8121,12 +8138,7 @@ var AdvancedPopover = ({
     }
   };
   const toggleLogicOp = (id) => {
-    onFiltersChange(
-      updateNodeInTree(filters, id, (n) => ({
-        ...n,
-        logicOperator: (n.logicOperator ?? "and") === "and" ? "or" : "and"
-      }))
-    );
+    onFiltersChange(toggleGroupLogicInTree(filters, id));
   };
   const handleGroupChildrenChange = (groupId, children2) => {
     onFiltersChange(
@@ -8415,12 +8427,7 @@ var SummaryChip = ({
     }
   };
   const toggleLogicOp = (id) => {
-    onFiltersChange(
-      updateNodeInTree(filters, id, (n) => ({
-        ...n,
-        logicOperator: (n.logicOperator ?? "and") === "and" ? "or" : "and"
-      }))
-    );
+    onFiltersChange(toggleGroupLogicInTree(filters, id));
   };
   const handleGroupChildrenChange = (groupId, newChildren) => {
     onFiltersChange(
@@ -8713,7 +8720,8 @@ var FilterSystem = ({
   };
   const getPropertyDef = (propertyId) => properties.find((p) => p.id === propertyId);
   const hasAdvanced = filterState.advancedFilters.length > 0;
-  const isMinimal = mode === "minimal";
+  const isMinimal = mode === "minimal" || mode === "icon";
+  const isIconOnly = mode === "icon";
   const handleOpenAdvanced = () => {
     setPropertySelectorOpen(false);
     requestAnimationFrame(() => {
@@ -8726,7 +8734,6 @@ var FilterSystem = ({
   };
   const advancedFilterCount = filterState.advancedFilters.length;
   const showAdvancedChip = hasAdvanced || advancedOpen;
-  const showSummaryChip = totalCount > 0 || summaryOpen;
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(FilterBar, { ref: containerRef, className, children: [
     /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(FilterBarLeft, { className: "flex-nowrap flex-1 min-w-0 overflow-x-auto scrollbar-none outline-none [&>*]:shrink-0", children: [
       children,
@@ -8740,38 +8747,32 @@ var FilterSystem = ({
           iconOnly: isMinimal
         }
       ),
-      isMinimal ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
-        showSummaryChip && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-          SummaryChip,
-          {
-            count: totalCount,
-            filters: [...filterState.basicFilters, ...filterState.advancedFilters],
-            properties,
-            onFiltersChange: (nodes) => {
-              onFilterStateChange({
-                ...filterState,
-                basicFilters: [],
-                advancedFilters: nodes
-              });
-            },
-            onClearAll: handleClearAll,
-            open: summaryOpen,
-            onOpenChange: setSummaryOpen
-          }
-        ),
-        !showSummaryChip && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-          PropertySelector,
-          {
-            properties,
-            onSelect: handleAddFilter,
-            open: propertySelectorOpen,
-            onOpenChange: setPropertySelectorOpen,
-            onAdvancedFilter: handleOpenAdvanced,
-            advancedFilterCount,
-            children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(FilterBarButton, { iconOnly: true })
-          }
-        )
-      ] }) : (
+      isMinimal ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_jsx_runtime60.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+        SummaryChip,
+        {
+          count: totalCount,
+          filters: [...filterState.basicFilters, ...filterState.advancedFilters],
+          properties,
+          onFiltersChange: (nodes) => {
+            onFilterStateChange({
+              ...filterState,
+              basicFilters: [],
+              advancedFilters: nodes
+            });
+          },
+          onClearAll: handleClearAll,
+          open: summaryOpen,
+          onOpenChange: setSummaryOpen,
+          children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+            FilterBarButton,
+            {
+              iconOnly: isIconOnly,
+              count: totalCount > 0 ? totalCount : void 0,
+              title: buildFilterSummary(filterState.basicFilters, filterState.advancedFilters.length, properties)
+            }
+          )
+        }
+      ) }) : (
         /* ── DEFAULT MODE ────────────────────────────────────── */
         /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
           showAdvancedChip && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
@@ -8832,13 +8833,13 @@ var FilterSystem = ({
           )
         ] })
       ),
-      totalCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      totalCount > 0 && !isIconOnly && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
         "button",
         {
           type: "button",
           onClick: handleClearAll,
-          className: "shrink-0 flex items-center gap-sm px-base py-sm min-h-[32px] max-h-[32px] rounded-md cursor-pointer transition-colors hover:bg-[var(--color-accent)]",
-          children: isMinimal ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_icons38.Icon, { icon: import_icons38.faXmarkOutline, size: "sm", className: "text-[var(--color-foreground)]" }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "text-sm font-semibold leading-sm text-[var(--color-foreground)]", children: "Clear" })
+          className: "shrink-0 flex items-center gap-sm px-base py-sm min-h-[32px] max-h-[32px] rounded-md cursor-pointer transition-colors text-btn-ghost-brand-text-default hover:bg-btn-ghost-brand-bg-hover hover:text-btn-ghost-brand-text-hover active:bg-btn-ghost-brand-bg-pressed active:text-btn-ghost-brand-text-pressed",
+          children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "text-sm font-semibold leading-sm", children: "Clear" })
         }
       )
     ] }),
@@ -8846,6 +8847,20 @@ var FilterSystem = ({
   ] });
 };
 FilterSystem.displayName = "FilterSystem";
+function buildFilterSummary(filters, advancedCount, properties) {
+  if (filters.length === 0 && advancedCount === 0) return void 0;
+  const lines = [];
+  for (const f of filters) {
+    const prop = properties.find((p) => p.id === f.propertyId);
+    if (!prop) continue;
+    const val = formatFilterValue(f.value, prop.dynamicOptions);
+    lines.push(val ? `${prop.label} ${f.operator} ${val}` : `${prop.label} ${f.operator ?? ""}`);
+  }
+  if (advancedCount > 0) {
+    lines.push(`+ ${advancedCount} advanced filter${advancedCount > 1 ? "s" : ""}`);
+  }
+  return lines.join("\n");
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AdvancedChip,