@l3mpire/ui 2.21.1 → 2.22.0

package/dist/index.mjs

@@ -6834,8 +6834,8 @@ import {
   faMagnifyingGlassOutline,
   faFilterOutline as faFilterOutline3
 } from "@l3mpire/icons";
-import { Fragment as Fragment4, jsx as jsx50, jsxs as jsxs44 } from "react/jsx-runtime";
-var AdvancedFilterFooter = ({ onClick, count }) => /* @__PURE__ */ jsxs44(Fragment4, { children: [
+import { jsx as jsx50, jsxs as jsxs44 } from "react/jsx-runtime";
+var AdvancedFilterFooter = ({ onClick, count }) => /* @__PURE__ */ jsxs44("div", { className: "shrink-0 flex flex-col", children: [
   /* @__PURE__ */ jsx50("div", { className: "h-px bg-dropdown-border mx-xs" }),
   /* @__PURE__ */ jsxs44(
     "button",
@@ -6886,9 +6886,21 @@ var PropertySelector = ({
       setSearch("");
     }
   }, [open]);
+  const pinnedGroupIds = React44.useMemo(() => {
+    const set = /* @__PURE__ */ new Set();
+    for (const p of properties) {
+      if (p.groupPinned) set.add(p.group);
+    }
+    return set;
+  }, [properties]);
+  const pinnedProperties = React44.useMemo(
+    () => properties.filter((p) => pinnedGroupIds.has(p.group)),
+    [properties, pinnedGroupIds]
+  );
   const groups = React44.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     for (const prop of properties) {
+      if (pinnedGroupIds.has(prop.group)) continue;
       const existing = map.get(prop.group);
       if (existing) {
         existing.count++;
@@ -6902,12 +6914,14 @@ var PropertySelector = ({
       }
     }
     return Array.from(map.values());
-  }, [properties]);
-  const globalSearchResults = React44.useMemo(() => {
-    if (!search || activeGroup) return [];
+  }, [properties, pinnedGroupIds]);
+  const filteredPinnedProperties = React44.useMemo(() => {
+    if (!search || activeGroup) return pinnedProperties;
     const lower = search.toLowerCase();
-    return properties.filter((p) => p.label.toLowerCase().includes(lower));
-  }, [properties, search, activeGroup]);
+    return pinnedProperties.filter(
+      (p) => p.label.toLowerCase().includes(lower)
+    );
+  }, [pinnedProperties, search, activeGroup]);
   const filteredGroups = React44.useMemo(() => {
     if (!search || activeGroup) return groups;
     const lower = search.toLowerCase();
@@ -6925,7 +6939,13 @@ var PropertySelector = ({
     return groupProps.filter((p) => p.label.toLowerCase().includes(lower));
   }, [properties, activeGroup, search]);
   const activeGroupInfo = groups.find((g) => g.group === activeGroup);
-  const showGlobalResults = search.length > 0 && !activeGroup && globalSearchResults.length > 0;
+  const nonPinnedSearchResults = React44.useMemo(() => {
+    if (!search || activeGroup) return [];
+    const lower = search.toLowerCase();
+    return properties.filter(
+      (p) => !pinnedGroupIds.has(p.group) && p.label.toLowerCase().includes(lower)
+    );
+  }, [properties, search, activeGroup, pinnedGroupIds]);
   return /* @__PURE__ */ jsxs44(PopoverPrimitive6.Root, { open, onOpenChange, children: [
     /* @__PURE__ */ jsx50(PopoverPrimitive6.Trigger, { asChild: true, children }),
     /* @__PURE__ */ jsx50(PopoverPrimitive6.Portal, { children: /* @__PURE__ */ jsxs44(
@@ -6935,18 +6955,18 @@ var PropertySelector = ({
         align: "start",
         onCloseAutoFocus: (e) => e.preventDefault(),
         className: cn(
-          "z-50 flex flex-col gap-xs overflow-clip p-xs",
+          "z-50 flex flex-col gap-xs overflow-hidden p-xs",
           "bg-dropdown-bg border border-dropdown-border rounded-md shadow-lg",
           "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",
-          "min-w-[230px]"
+          "min-w-[230px] max-h-[360px]"
         ),
         children: [
           activeGroup === null ? (
-            /* ── Level 1: Search + Categories ───────────────────────── */
-            /* @__PURE__ */ jsxs44("div", { className: "flex flex-col gap-xs", children: [
-              /* @__PURE__ */ jsxs44("div", { className: "flex items-center gap-base px-md py-base border border-input rounded-md", children: [
+            /* ── Level 1: Search + (pinned props) + Categories ──────── */
+            /* @__PURE__ */ jsxs44("div", { className: "flex flex-col gap-xs flex-1 min-h-0", children: [
+              /* @__PURE__ */ jsxs44("div", { className: "shrink-0 flex items-center gap-base px-md py-base border border-input rounded-md", children: [
                 /* @__PURE__ */ jsx50(
                   Icon28,
                   {
@@ -6967,9 +6987,8 @@ var PropertySelector = ({
                   }
                 )
               ] }),
-              showGlobalResults ? (
-                /* ── Global search results (flat property list) ─────── */
-                /* @__PURE__ */ jsx50("div", { className: "flex flex-col max-h-[300px] overflow-y-auto", children: globalSearchResults.map((prop) => /* @__PURE__ */ jsxs44(
+              /* @__PURE__ */ jsxs44("div", { className: "flex flex-col flex-1 min-h-0 overflow-y-auto", children: [
+                filteredPinnedProperties.map((prop) => /* @__PURE__ */ jsxs44(
                   "button",
                   {
                     type: "button",
@@ -6987,15 +7006,39 @@ var PropertySelector = ({
                           className: "shrink-0 text-dropdown-item-icon"
                         }
                       ),
-                      /* @__PURE__ */ jsx50("span", { className: "flex-1 text-sm font-regular leading-sm text-dropdown-item-text text-left truncate", children: prop.label }),
-                      /* @__PURE__ */ jsx50("span", { className: "text-xs font-regular leading-xs text-muted-foreground", children: prop.groupLabel })
+                      /* @__PURE__ */ jsx50("span", { className: "flex-1 text-sm font-regular leading-sm text-dropdown-item-text text-left truncate", children: prop.label })
                     ]
                   },
                   prop.id
-                )) })
-              ) : (
-                /* ── Group list ─────────────────────────────────────── */
-                /* @__PURE__ */ jsxs44("div", { className: "flex flex-col", children: [
+                )),
+                search ? (
+                  /* ── Flat matches across non-pinned groups ────────── */
+                  nonPinnedSearchResults.map((prop) => /* @__PURE__ */ jsxs44(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        onSelect(prop);
+                        onOpenChange?.(false);
+                      },
+                      className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-dropdown-item-hover",
+                      children: [
+                        /* @__PURE__ */ jsx50(
+                          Icon28,
+                          {
+                            icon: prop.icon,
+                            size: "sm",
+                            className: "shrink-0 text-dropdown-item-icon"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx50("span", { className: "flex-1 text-sm font-regular leading-sm text-dropdown-item-text text-left truncate", children: prop.label }),
+                        /* @__PURE__ */ jsx50("span", { className: "text-xs font-regular leading-xs text-muted-foreground", children: prop.groupLabel })
+                      ]
+                    },
+                    prop.id
+                  ))
+                ) : (
+                  /* ── Category list ────────────────────────────────── */
                   filteredGroups.map((g) => /* @__PURE__ */ jsxs44(
                     "button",
                     {
@@ -7027,14 +7070,14 @@ var PropertySelector = ({
                       ]
                     },
                     g.group
-                  )),
-                  filteredGroups.length === 0 && /* @__PURE__ */ jsx50("span", { className: "p-base text-sm text-muted-foreground", children: "No results" })
-                ] })
-              )
+                  ))
+                ),
+                filteredPinnedProperties.length === 0 && (search ? nonPinnedSearchResults.length === 0 : filteredGroups.length === 0) && /* @__PURE__ */ jsx50("span", { className: "p-base text-sm text-muted-foreground", children: "No results" })
+              ] })
             ] })
           ) : (
             /* ── Level 2: Properties ─────────────────────────────────── */
-            /* @__PURE__ */ jsxs44("div", { className: "flex flex-col gap-xs", children: [
+            /* @__PURE__ */ jsxs44("div", { className: "flex flex-col gap-xs flex-1 min-h-0", children: [
               /* @__PURE__ */ jsxs44(
                 "button",
                 {
@@ -7043,7 +7086,7 @@ var PropertySelector = ({
                     setActiveGroup(null);
                     setSearch("");
                   },
-                  className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-dropdown-item-hover",
+                  className: "shrink-0 flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-dropdown-item-hover",
                   children: [
                     /* @__PURE__ */ jsx50(
                       Icon28,
@@ -7057,7 +7100,7 @@ var PropertySelector = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs44("div", { className: "flex items-center gap-base px-md py-base border border-input rounded-md", children: [
+              /* @__PURE__ */ jsxs44("div", { className: "shrink-0 flex items-center gap-base px-md py-base border border-input rounded-md", children: [
                 /* @__PURE__ */ jsx50(
                   Icon28,
                   {
@@ -7078,7 +7121,7 @@ var PropertySelector = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs44("div", { className: "flex flex-col max-h-[300px] overflow-y-auto", children: [
+              /* @__PURE__ */ jsxs44("div", { className: "flex flex-col flex-1 min-h-0 overflow-y-auto", children: [
                 filteredProperties.map((prop) => /* @__PURE__ */ jsxs44(
                   "button",
                   {
@@ -7740,6 +7783,19 @@ var AdvancedRow = ({
   const [operatorOpen, setOperatorOpen] = React49.useState(false);
   const [propertyOpen, setPropertyOpen] = React49.useState(false);
   const [valueOpen, setValueOpen] = React49.useState(false);
+  const { pinnedProperties, unpinnedProperties } = React49.useMemo(() => {
+    const pinnedGroups = /* @__PURE__ */ new Set();
+    for (const p of properties) {
+      if (p.groupPinned) pinnedGroups.add(p.group);
+    }
+    const pinned = [];
+    const unpinned = [];
+    for (const p of properties) {
+      if (pinnedGroups.has(p.group)) pinned.push(p);
+      else unpinned.push(p);
+    }
+    return { pinnedProperties: pinned, unpinnedProperties: unpinned };
+  }, [properties]);
   const handleOperatorSelect = (op) => {
     if (isNoValueOperator(op)) {
       onUpdate({ ...condition, operator: op, value: null });
@@ -7776,7 +7832,7 @@ var AdvancedRow = ({
         /* @__PURE__ */ jsx56("span", { className: "text-sm font-regular leading-sm text-foreground whitespace-nowrap truncate", children: propertyDef.label }),
         /* @__PURE__ */ jsx56(Icon33, { icon: faChevronDownOutline2, size: "xs", className: "shrink-0 text-foreground" })
       ] }) }),
-      /* @__PURE__ */ jsx56(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ jsx56(
+      /* @__PURE__ */ jsx56(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ jsxs50(
         PopoverPrimitive11.Content,
         {
           sideOffset: 4,
@@ -7788,26 +7844,49 @@ var AdvancedRow = ({
             "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
             "min-w-[200px]"
           ),
-          children: properties.map((p) => /* @__PURE__ */ jsxs50(
-            "button",
-            {
-              type: "button",
-              onClick: () => {
-                onPropertyChange(p);
-                setPropertyOpen(false);
+          children: [
+            pinnedProperties.map((p) => /* @__PURE__ */ jsxs50(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  onPropertyChange(p);
+                  setPropertyOpen(false);
+                },
+                className: cn(
+                  "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors text-left",
+                  "hover:bg-dropdown-item-hover",
+                  p.id === condition.propertyId && "bg-dropdown-item-hover"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx56(Icon33, { icon: p.icon, size: "sm", className: "shrink-0 text-dropdown-item-icon" }),
+                  /* @__PURE__ */ jsx56("span", { className: "text-sm font-regular leading-sm text-dropdown-item-text truncate", children: p.label })
+                ]
               },
-              className: cn(
-                "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors text-left",
-                "hover:bg-dropdown-item-hover",
-                p.id === condition.propertyId && "bg-dropdown-item-hover"
-              ),
-              children: [
-                /* @__PURE__ */ jsx56(Icon33, { icon: p.icon, size: "sm", className: "shrink-0 text-dropdown-item-icon" }),
-                /* @__PURE__ */ jsx56("span", { className: "text-sm font-regular leading-sm text-dropdown-item-text truncate", children: p.label })
-              ]
-            },
-            p.id
-          ))
+              p.id
+            )),
+            unpinnedProperties.map((p) => /* @__PURE__ */ jsxs50(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  onPropertyChange(p);
+                  setPropertyOpen(false);
+                },
+                className: cn(
+                  "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors text-left",
+                  "hover:bg-dropdown-item-hover",
+                  p.id === condition.propertyId && "bg-dropdown-item-hover"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx56(Icon33, { icon: p.icon, size: "sm", className: "shrink-0 text-dropdown-item-icon" }),
+                  /* @__PURE__ */ jsx56("span", { className: "text-sm font-regular leading-sm text-dropdown-item-text truncate", children: p.label }),
+                  /* @__PURE__ */ jsx56("span", { className: "ml-auto text-xs font-regular leading-xs text-muted-foreground", children: p.groupLabel })
+                ]
+              },
+              p.id
+            ))
+          ]
         }
       ) })
     ] }),
@@ -8690,7 +8769,7 @@ function useFilterBarMode(ref, override, breakpoint = DEFAULT_BREAKPOINT) {
 }
 
 // src/components/ui/filter/filter-system.tsx
-import { Fragment as Fragment5, jsx as jsx60, jsxs as jsxs54 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx60, jsxs as jsxs54 } from "react/jsx-runtime";
 var FilterSystem = ({
   properties,
   filterState,
@@ -8809,7 +8888,7 @@ var FilterSystem = ({
           iconOnly: isMinimal
         }
       ),
-      isMinimal ? /* @__PURE__ */ jsx60(Fragment5, { children: /* @__PURE__ */ jsx60(
+      isMinimal ? /* @__PURE__ */ jsx60(Fragment4, { children: /* @__PURE__ */ jsx60(
         SummaryChip,
         {
           count: totalCount,
@@ -8837,7 +8916,7 @@ var FilterSystem = ({
         }
       ) }) : (
         /* ── DEFAULT MODE ────────────────────────────────────── */
-        /* @__PURE__ */ jsxs54(Fragment5, { children: [
+        /* @__PURE__ */ jsxs54(Fragment4, { children: [
           showAdvancedChip && /* @__PURE__ */ jsx60(
             AdvancedPopover,
             {