@l3mpire/ui 2.16.4 → 2.18.0

package/dist/index.mjs

@@ -5328,6 +5328,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) {
@@ -7069,6 +7086,7 @@ import { Icon as Icon29, faArrowRightOutline as faArrowRightOutline2, faTrashOut
 import { jsx as jsx51, jsxs as jsxs45 } from "react/jsx-runtime";
 var KebabMenu = ({
   onConvertToAdvanced,
+  hasAdvancedFilters = false,
   onDelete,
   open,
   onOpenChange,
@@ -7107,7 +7125,7 @@ var KebabMenu = ({
                   className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
                 }
               ),
-              /* @__PURE__ */ jsx51("span", { className: "text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)]", children: "Convert to advanced" })
+              /* @__PURE__ */ jsx51("span", { className: "text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)]", children: hasAdvancedFilters ? "Add to advanced filters" : "Convert to advanced" })
             ]
           }
         ),
@@ -7294,6 +7312,7 @@ var InteractiveFilterChip = ({
   onPropertyChange,
   onDelete,
   onConvertToAdvanced,
+  hasAdvancedFilters = false,
   className
 }) => {
   const [operatorOpen, setOperatorOpen] = React46.useState(false);
@@ -7449,6 +7468,7 @@ var InteractiveFilterChip = ({
             open: kebabOpen,
             onOpenChange: setKebabOpen,
             onConvertToAdvanced,
+            hasAdvancedFilters,
             onDelete,
             children: /* @__PURE__ */ jsx53("div", { children: /* @__PURE__ */ jsx53(
               FilterChipSegment,
@@ -7470,7 +7490,7 @@ InteractiveFilterChip.displayName = "InteractiveFilterChip";
 
 // src/components/ui/filter/filter-system.tsx
 import * as React54 from "react";
-import { Icon as Icon37, faXmarkOutline as faXmarkOutline6, faPlusOutline as faPlusOutline5 } from "@l3mpire/icons";
+import { Icon as Icon37, faPlusOutline as faPlusOutline5 } from "@l3mpire/icons";
 
 // src/components/ui/filter/advanced-chip.tsx
 import * as React47 from "react";
@@ -7951,7 +7971,8 @@ var AdvancedPopover = ({
   onFiltersChange,
   open,
   onOpenChange,
-  children
+  children,
+  collisionBoundary
 }) => {
   const [addSelectorOpen, setAddSelectorOpen] = React51.useState(false);
   const [draftPickerOpen, setDraftPickerOpen] = React51.useState(false);
@@ -8028,12 +8049,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(
@@ -8107,6 +8123,7 @@ var AdvancedPopover = ({
         sideOffset: 4,
         align: "start",
         collisionPadding: 16,
+        collisionBoundary: collisionBoundary ?? void 0,
         onOpenAutoFocus: (e) => e.preventDefault(),
         className: cn(
           "z-50 flex flex-col",
@@ -8114,7 +8131,7 @@ var AdvancedPopover = ({
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
           "data-[side=bottom]:slide-in-from-top-2",
-          "w-[min(640px,calc(100vw-32px))] min-w-[360px]"
+          collisionBoundary ? "w-[min(640px,var(--radix-popover-content-available-width))] min-w-0" : "w-[min(640px,calc(100vw-32px))] min-w-[360px]"
         ),
         children: [
           /* @__PURE__ */ jsx58("div", { className: "flex flex-col gap-base p-base", children: filters.length > 0 ? filters.map((node, i) => renderNode(node, i)) : /* @__PURE__ */ jsx58(
@@ -8247,7 +8264,8 @@ var SummaryChip = ({
   children,
   className,
   open: openProp,
-  onOpenChange
+  onOpenChange,
+  collisionBoundary
 }) => {
   const [uncontrolledOpen, setUncontrolledOpen] = React52.useState(false);
   const isControlled = openProp !== void 0;
@@ -8325,12 +8343,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(
@@ -8420,6 +8433,7 @@ var SummaryChip = ({
         sideOffset: 4,
         align: "start",
         collisionPadding: 16,
+        collisionBoundary: collisionBoundary ?? void 0,
         onOpenAutoFocus: (e) => e.preventDefault(),
         className: cn(
           "z-50 flex flex-col overflow-clip",
@@ -8427,7 +8441,7 @@ var SummaryChip = ({
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
           "data-[side=bottom]:slide-in-from-top-2",
-          "w-[min(640px,calc(100vw-32px))]"
+          collisionBoundary ? "w-[min(640px,var(--radix-popover-content-available-width))]" : "w-[min(640px,calc(100vw-32px))]"
         ),
         children: [
           /* @__PURE__ */ jsx59("div", { className: "flex flex-col gap-base p-base", children: filters.length > 0 ? filters.map((node, i) => renderNode(node, i)) : /* @__PURE__ */ jsx59(
@@ -8541,12 +8555,14 @@ var FilterSystem = ({
   sortFields,
   mode: modeOverride,
   breakpoint,
+  bounded = false,
   children,
   actions,
   className
 }) => {
   const containerRef = React54.useRef(null);
   const mode = useFilterBarMode(containerRef, modeOverride, breakpoint);
+  const collisionBoundary = bounded ? containerRef.current : void 0;
   const [propertySelectorOpen, setPropertySelectorOpen] = React54.useState(false);
   const [advancedOpen, setAdvancedOpen] = React54.useState(false);
   const [summaryOpen, setSummaryOpen] = React54.useState(false);
@@ -8623,7 +8639,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(() => {
@@ -8636,7 +8653,6 @@ var FilterSystem = ({
   };
   const advancedFilterCount = filterState.advancedFilters.length;
   const showAdvancedChip = hasAdvanced || advancedOpen;
-  const showSummaryChip = totalCount > 0 || summaryOpen;
   return /* @__PURE__ */ jsxs54(FilterBar, { ref: containerRef, className, children: [
     /* @__PURE__ */ jsxs54(FilterBarLeft, { className: "flex-nowrap flex-1 min-w-0 overflow-x-auto scrollbar-none outline-none [&>*]:shrink-0", children: [
       children,
@@ -8650,38 +8666,33 @@ var FilterSystem = ({
           iconOnly: isMinimal
         }
       ),
-      isMinimal ? /* @__PURE__ */ jsxs54(Fragment5, { children: [
-        showSummaryChip && /* @__PURE__ */ jsx60(
-          SummaryChip,
-          {
-            count: totalCount,
-            filters: [...filterState.basicFilters, ...filterState.advancedFilters],
-            properties,
-            onFiltersChange: (nodes) => {
-              onFilterStateChange({
-                ...filterState,
-                basicFilters: [],
-                advancedFilters: nodes
-              });
-            },
-            onClearAll: handleClearAll,
-            open: summaryOpen,
-            onOpenChange: setSummaryOpen
-          }
-        ),
-        !showSummaryChip && /* @__PURE__ */ jsx60(
-          PropertySelector,
-          {
-            properties,
-            onSelect: handleAddFilter,
-            open: propertySelectorOpen,
-            onOpenChange: setPropertySelectorOpen,
-            onAdvancedFilter: handleOpenAdvanced,
-            advancedFilterCount,
-            children: /* @__PURE__ */ jsx60(FilterBarButton, { iconOnly: true })
-          }
-        )
-      ] }) : (
+      isMinimal ? /* @__PURE__ */ jsx60(Fragment5, { children: /* @__PURE__ */ jsx60(
+        SummaryChip,
+        {
+          count: totalCount,
+          filters: [...filterState.basicFilters, ...filterState.advancedFilters],
+          properties,
+          onFiltersChange: (nodes) => {
+            onFilterStateChange({
+              ...filterState,
+              basicFilters: [],
+              advancedFilters: nodes
+            });
+          },
+          onClearAll: handleClearAll,
+          open: summaryOpen,
+          onOpenChange: setSummaryOpen,
+          collisionBoundary,
+          children: /* @__PURE__ */ jsx60(
+            FilterBarButton,
+            {
+              iconOnly: isIconOnly,
+              count: totalCount > 0 ? totalCount : void 0,
+              title: buildFilterSummary(filterState.basicFilters, filterState.advancedFilters.length, properties)
+            }
+          )
+        }
+      ) }) : (
         /* ── DEFAULT MODE ────────────────────────────────────── */
         /* @__PURE__ */ jsxs54(Fragment5, { children: [
           showAdvancedChip && /* @__PURE__ */ jsx60(
@@ -8692,6 +8703,7 @@ var FilterSystem = ({
               onFiltersChange: handleAdvancedFiltersChange,
               open: advancedOpen,
               onOpenChange: setAdvancedOpen,
+              collisionBoundary,
               children: /* @__PURE__ */ jsx60(
                 AdvancedChip,
                 {
@@ -8716,7 +8728,8 @@ var FilterSystem = ({
                 onUpdate: handleUpdateFilter,
                 onPropertyChange: (newProp) => handlePropertyChange(filter.id, newProp),
                 onDelete: () => handleDeleteFilter(filter.id),
-                onConvertToAdvanced: () => handleConvertToAdvanced(filter.id)
+                onConvertToAdvanced: () => handleConvertToAdvanced(filter.id),
+                hasAdvancedFilters: hasAdvanced
               },
               filter.id
             );
@@ -8742,13 +8755,13 @@ var FilterSystem = ({
           )
         ] })
       ),
-      totalCount > 0 && /* @__PURE__ */ jsx60(
+      totalCount > 0 && !isIconOnly && /* @__PURE__ */ jsx60(
         "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__ */ jsx60(Icon37, { icon: faXmarkOutline6, size: "sm", className: "text-[var(--color-foreground)]" }) : /* @__PURE__ */ jsx60("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__ */ jsx60("span", { className: "text-sm font-semibold leading-sm", children: "Clear" })
         }
       )
     ] }),
@@ -8756,6 +8769,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");
+}
 export {
   AdvancedChip,
   AdvancedPopover,