@l3mpire/ui 2.21.1 → 2.22.0

package/USAGE.md

@@ -963,6 +963,16 @@ 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.
 
+**Pinned groups (hoist a group to root):** mark a property group as "primary" so its properties render flat at the top of the `PropertySelector` popover — no category click needed. Set `groupPinned: true` on any property and the entire group is hoisted; remaining groups stay nested as categories below. Search works across everything (pinned + nested). The popover has a max-height and the "Advanced filter" footer stays sticky at the bottom when the list scrolls. The same flattening is applied in `AdvancedRow`'s property-swap popover and in `InteractiveFilterChip`'s swap popover.
+
+```tsx
+{ id: "status",   label: "Status",   type: "enum", icon: faCircleOutline, group: "task", groupLabel: "Task", groupPinned: true, ... },
+{ id: "priority", label: "Priority", type: "enum", icon: faFlagOutline,   group: "task", groupLabel: "Task", groupPinned: true, ... },
+{ id: "due_date", label: "Due date", type: "date", icon: faCalendarOutline, group: "task", groupLabel: "Task", groupPinned: true, ... },
+// Other groups stay nested — click "Contact" to see its properties.
+{ id: "contact_name", label: "Contact name", type: "text", icon: faUserOutline, group: "contact", groupLabel: "Contact", ... },
+```
+
 **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

package/dist/index.d.mts

@@ -733,6 +733,13 @@ interface PropertyDefinition {
     icon: _l3mpire_icons.IconDefinition;
     group: string;
     groupLabel: string;
+    /**
+     * When true, this property's entire group is hoisted to the root of the
+     * PropertySelector popover (no category click needed). All properties in the
+     * same group share this behavior — setting it on any one property pins the
+     * whole group. Useful for "primary" groups that hold the most-used filters.
+     */
+    groupPinned?: boolean;
     options?: string[];
     /**
      * Dynamic/smart options rendered at the top of the value selector with a

package/dist/index.d.ts

@@ -733,6 +733,13 @@ interface PropertyDefinition {
     icon: _l3mpire_icons.IconDefinition;
     group: string;
     groupLabel: string;
+    /**
+     * When true, this property's entire group is hoisted to the root of the
+     * PropertySelector popover (no category click needed). All properties in the
+     * same group share this behavior — setting it on any one property pins the
+     * whole group. Useful for "primary" groups that hold the most-used filters.
+     */
+    groupPinned?: boolean;
     options?: string[];
     /**
      * Dynamic/smart options rendered at the top of the value selector with a

package/dist/index.js

@@ -6932,7 +6932,7 @@ var React44 = __toESM(require("react"));
 var PopoverPrimitive6 = __toESM(require("@radix-ui/react-popover"));
 var import_icons29 = require("@l3mpire/icons");
 var import_jsx_runtime50 = require("react/jsx-runtime");
-var AdvancedFilterFooter = ({ onClick, count }) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+var AdvancedFilterFooter = ({ onClick, count }) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "shrink-0 flex flex-col", children: [
   /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "h-px bg-dropdown-border mx-xs" }),
   /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
     "button",
@@ -6983,9 +6983,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++;
@@ -6999,12 +7011,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();
@@ -7022,7 +7036,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__ */ (0, import_jsx_runtime50.jsxs)(PopoverPrimitive6.Root, { open, onOpenChange, children: [
     /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PopoverPrimitive6.Trigger, { asChild: true, children }),
     /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PopoverPrimitive6.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
@@ -7032,18 +7052,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__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-col gap-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center gap-base px-md py-base border border-input rounded-md", children: [
+            /* ── Level 1: Search + (pinned props) + Categories ──────── */
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-col gap-xs flex-1 min-h-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "shrink-0 flex items-center gap-base px-md py-base border border-input rounded-md", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                   import_icons29.Icon,
                   {
@@ -7064,9 +7084,8 @@ var PropertySelector = ({
                   }
                 )
               ] }),
-              showGlobalResults ? (
-                /* ── Global search results (flat property list) ─────── */
-                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex flex-col max-h-[300px] overflow-y-auto", children: globalSearchResults.map((prop) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-col flex-1 min-h-0 overflow-y-auto", children: [
+                filteredPinnedProperties.map((prop) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
                   "button",
                   {
                     type: "button",
@@ -7084,15 +7103,39 @@ var PropertySelector = ({
                           className: "shrink-0 text-dropdown-item-icon"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-dropdown-item-text text-left truncate", children: prop.label }),
-                      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-xs font-regular leading-xs text-muted-foreground", children: prop.groupLabel })
+                      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("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__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-col", children: [
+                )),
+                search ? (
+                  /* ── Flat matches across non-pinned groups ────────── */
+                  nonPinnedSearchResults.map((prop) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+                    "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__ */ (0, import_jsx_runtime50.jsx)(
+                          import_icons29.Icon,
+                          {
+                            icon: prop.icon,
+                            size: "sm",
+                            className: "shrink-0 text-dropdown-item-icon"
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-dropdown-item-text text-left truncate", children: prop.label }),
+                        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-xs font-regular leading-xs text-muted-foreground", children: prop.groupLabel })
+                      ]
+                    },
+                    prop.id
+                  ))
+                ) : (
+                  /* ── Category list ────────────────────────────────── */
                   filteredGroups.map((g) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
                     "button",
                     {
@@ -7124,14 +7167,14 @@ var PropertySelector = ({
                       ]
                     },
                     g.group
-                  )),
-                  filteredGroups.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "p-base text-sm text-muted-foreground", children: "No results" })
-                ] })
-              )
+                  ))
+                ),
+                filteredPinnedProperties.length === 0 && (search ? nonPinnedSearchResults.length === 0 : filteredGroups.length === 0) && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "p-base text-sm text-muted-foreground", children: "No results" })
+              ] })
             ] })
           ) : (
             /* ── Level 2: Properties ─────────────────────────────────── */
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-col gap-xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-col gap-xs flex-1 min-h-0", children: [
               /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
                 "button",
                 {
@@ -7140,7 +7183,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__ */ (0, import_jsx_runtime50.jsx)(
                       import_icons29.Icon,
@@ -7154,7 +7197,7 @@ var PropertySelector = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center gap-base px-md py-base border border-input rounded-md", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "shrink-0 flex items-center gap-base px-md py-base border border-input rounded-md", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                   import_icons29.Icon,
                   {
@@ -7175,7 +7218,7 @@ var PropertySelector = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-col max-h-[300px] overflow-y-auto", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-col flex-1 min-h-0 overflow-y-auto", children: [
                 filteredProperties.map((prop) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
                   "button",
                   {
@@ -7830,6 +7873,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 });
@@ -7866,7 +7922,7 @@ var AdvancedRow = ({
         /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-sm font-regular leading-sm text-foreground whitespace-nowrap truncate", children: propertyDef.label }),
         /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_icons34.Icon, { icon: import_icons34.faChevronDownOutline, size: "xs", className: "shrink-0 text-foreground" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
         PopoverPrimitive11.Content,
         {
           sideOffset: 4,
@@ -7878,26 +7934,49 @@ var AdvancedRow = ({
             "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
             "min-w-[200px]"
           ),
-          children: properties.map((p) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
-            "button",
-            {
-              type: "button",
-              onClick: () => {
-                onPropertyChange(p);
-                setPropertyOpen(false);
+          children: [
+            pinnedProperties.map((p) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+              "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__ */ (0, import_jsx_runtime56.jsx)(import_icons34.Icon, { icon: p.icon, size: "sm", className: "shrink-0 text-dropdown-item-icon" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("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__ */ (0, import_jsx_runtime56.jsx)(import_icons34.Icon, { icon: p.icon, size: "sm", className: "shrink-0 text-dropdown-item-icon" }),
-                /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-sm font-regular leading-sm text-dropdown-item-text truncate", children: p.label })
-              ]
-            },
-            p.id
-          ))
+              p.id
+            )),
+            unpinnedProperties.map((p) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+              "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__ */ (0, import_jsx_runtime56.jsx)(import_icons34.Icon, { icon: p.icon, size: "sm", className: "shrink-0 text-dropdown-item-icon" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-sm font-regular leading-sm text-dropdown-item-text truncate", children: p.label }),
+                  /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "ml-auto text-xs font-regular leading-xs text-muted-foreground", children: p.groupLabel })
+                ]
+              },
+              p.id
+            ))
+          ]
         }
       ) })
     ] }),