@assure-one/design-system 1.25.0 → 1.27.0

package/dist/index.d.ts

@@ -5662,6 +5662,14 @@ interface DisplayMenuSection {
     trailing?: ReactNode;
     /** Force the flyout search box. Auto-enabled past SEARCH_THRESHOLD options. */
     searchable?: boolean;
+    /** Escape hatch: renders in the flyout *instead of* the option list, for
+     *  dimensions a list can't express (a date range, a numeric bound). Sections
+     *  using this supply their own controls and are skipped by root search —
+     *  there are no option labels to match. Prefer `options` where it fits. */
+    content?: ReactNode;
+    /** Value summary on the root row. `single` sections derive this from the
+     *  selected option; `content` sections have no options, so pass it here. */
+    summary?: string;
 }
 interface DisplayMenuProps {
     sections: DisplayMenuSection[];

package/dist/index.js

@@ -18249,6 +18249,8 @@ var SEARCH_THRESHOLD = 8;
 var HOVER_OPEN_MS = 90;
 var HOVER_CLOSE_MS = 220;
 var FLYOUT_WIDTH = 224;
+var MIN_FLYOUT_HEIGHT = 120;
+var VIEWPORT_MARGIN = 24;
 var DEFAULT_GUTTER_PX = 24;
 function DisplayMenu({
   sections,
@@ -18265,7 +18267,8 @@ function DisplayMenu({
   const [openKey, setOpenKey] = useState(null);
   const [flyout, setFlyout] = useState({
     top: 0,
-    side: "left"
+    side: "left",
+    maxHeight: 0
   });
   const [panelShift, setPanelShift] = useState(0);
   const [rootQuery, setRootQuery] = useState("");
@@ -18289,10 +18292,14 @@ function DisplayMenu({
     if (!panel || !row) return;
     const panelRect = panel.getBoundingClientRect();
     const rowRect = row.getBoundingClientRect();
-    const maxTop = Math.max(0, window.innerHeight - panelRect.top - 24 - 120);
+    const maxTop = Math.max(0, window.innerHeight - panelRect.top - 24 - MIN_FLYOUT_HEIGHT);
     const top = Math.min(Math.max(rowRect.top - panelRect.top - 4, 0), maxTop);
+    const maxHeight = Math.max(
+      MIN_FLYOUT_HEIGHT,
+      window.innerHeight - (panelRect.top + top) - VIEWPORT_MARGIN
+    );
     const side = panelRect.left >= FLYOUT_WIDTH + 16 ? "left" : "right";
-    setFlyout({ top, side });
+    setFlyout({ top, side, maxHeight });
   }, []);
   const openSection = useCallback(
     (key) => {
@@ -18353,6 +18360,7 @@ function DisplayMenu({
       if (section.label.toLowerCase().includes(q)) rows.push({ kind: "section", section });
     }
     for (const section of sections) {
+      if (section.content) continue;
       for (const option of section.options) {
         if (option.label.toLowerCase().includes(q)) rows.push({ kind: "option", section, option });
       }
@@ -18364,7 +18372,7 @@ function DisplayMenu({
     const q = sectionQuery.trim().toLowerCase();
     return q ? activeSection.options.filter((o) => o.label.toLowerCase().includes(q)) : activeSection.options;
   }, [activeSection, sectionQuery]);
-  const showFlyoutSearch = !!activeSection && (activeSection.searchable ?? activeSection.options.length > SEARCH_THRESHOLD);
+  const showFlyoutSearch = !!activeSection && !activeSection.content && (activeSection.searchable ?? activeSection.options.length > SEARCH_THRESHOLD);
   const anySelected = sections.some((s) => s.mode === "multi" && s.selected.size > 0);
   const showDot = !isAtDefault || anySelected;
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
@@ -18422,100 +18430,108 @@ function DisplayMenu({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx("div", { role: "menu", "aria-label": triggerLabel, className: "max-h-80 overflow-y-auto p-1", children: rootRows.length === 0 ? /* @__PURE__ */ jsx(EmptyRow, {}) : rootRows.map((row) => {
-            if (row.kind === "option") {
-              const { section: section2, option } = row;
-              const isActive = section2.selected.has(option.key);
-              const isMulti = section2.mode === "multi";
-              return /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  role: isMulti ? "menuitemcheckbox" : "menuitemradio",
-                  "aria-checked": isActive,
-                  onMouseEnter: () => {
-                    clearTimers();
-                    setOpenKey(null);
-                  },
-                  onClick: () => section2.onSelect(option.key),
-                  className: "flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-left text-[13px] transition-colors hover:bg-muted/60 focus-visible:bg-muted/60 focus-visible:outline-none",
-                  children: [
-                    section2.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", "aria-hidden": "true", children: section2.icon }),
-                    /* @__PURE__ */ jsx("span", { className: "shrink-0 truncate text-muted-foreground", children: section2.label }),
-                    /* @__PURE__ */ jsx(
-                      ChevronRightIcon,
-                      {
-                        size: 12,
-                        className: "shrink-0 text-muted-foreground",
-                        "aria-hidden": "true"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-foreground", children: option.label }),
-                    isActive && /* @__PURE__ */ jsx(CheckIcon, { size: 14, className: "shrink-0 text-brand" })
-                  ]
-                },
-                `${section2.key}:${option.key}`
-              );
-            }
-            const { section } = row;
-            const count = section.selected.size;
-            const valueLabel = section.mode === "single" ? section.options.find((o) => section.selected.has(o.key))?.label ?? "" : "";
-            const isOpen = section.key === openKey;
-            return (
-              /* Hover handlers sit on the wrapper so the cursor can cross
-               * the gap to `section.trailing` without closing the flyout.
-               * The wrapper is not itself a control — the button inside is,
-               * and it carries the keyboard equivalent (ArrowRight / Enter /
-               * Space open the same flyout). Nothing here is mouse-only. */
-              // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  ref: (el) => {
-                    if (el) rowRefs.current.set(section.key, el);
-                    else rowRefs.current.delete(section.key);
-                  },
-                  className: "flex items-center gap-0.5",
-                  onMouseEnter: () => scheduleOpen(section.key),
-                  onMouseLeave: scheduleClose,
-                  children: [
-                    /* @__PURE__ */ jsxs(
-                      "button",
-                      {
-                        type: "button",
-                        role: "menuitem",
-                        "aria-haspopup": "menu",
-                        "aria-expanded": isOpen,
-                        onClick: () => openSection(section.key),
-                        onKeyDown: (e) => {
-                          if (e.key === "ArrowRight" || e.key === "Enter" || e.key === " ") {
-                            e.preventDefault();
-                            openSection(section.key);
-                            requestAnimationFrame(
-                              () => flyoutRef.current?.querySelector("input, [role='menuitemcheckbox'], [role='menuitemradio']")?.focus()
-                            );
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "menu",
+              "aria-label": triggerLabel,
+              className: "scrollbar-thin max-h-[min(32rem,70vh)] overflow-y-auto p-1",
+              children: rootRows.length === 0 ? /* @__PURE__ */ jsx(EmptyRow, {}) : rootRows.map((row) => {
+                if (row.kind === "option") {
+                  const { section: section2, option } = row;
+                  const isActive = section2.selected.has(option.key);
+                  const isMulti = section2.mode === "multi";
+                  return /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      role: isMulti ? "menuitemcheckbox" : "menuitemradio",
+                      "aria-checked": isActive,
+                      onMouseEnter: () => {
+                        clearTimers();
+                        setOpenKey(null);
+                      },
+                      onClick: () => section2.onSelect(option.key),
+                      className: "flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-left text-[13px] transition-colors hover:bg-muted/60 focus-visible:bg-muted/60 focus-visible:outline-none",
+                      children: [
+                        section2.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", "aria-hidden": "true", children: section2.icon }),
+                        /* @__PURE__ */ jsx("span", { className: "shrink-0 truncate text-muted-foreground", children: section2.label }),
+                        /* @__PURE__ */ jsx(
+                          ChevronRightIcon,
+                          {
+                            size: 12,
+                            className: "shrink-0 text-muted-foreground",
+                            "aria-hidden": "true"
                           }
-                        },
-                        className: cn(
-                          "flex min-w-0 flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-left text-[13px] text-foreground transition-colors hover:bg-muted/60 focus-visible:bg-muted/60 focus-visible:outline-none",
-                          isOpen && "bg-muted/60"
                         ),
-                        children: [
-                          section.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", "aria-hidden": "true", children: section.icon }),
-                          /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: section.label }),
-                          section.mode === "multi" && count > 0 && /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-full bg-brand-bg px-1.5 text-[11px] font-medium text-brand", children: count }),
-                          section.mode === "single" && valueLabel && /* @__PURE__ */ jsx("span", { className: "max-w-24 shrink-0 truncate text-[13px] text-muted-foreground", children: valueLabel }),
-                          /* @__PURE__ */ jsx(ChevronRightIcon, { size: 13, className: "shrink-0 text-muted-foreground" })
-                        ]
-                      }
-                    ),
-                    section.trailing
-                  ]
-                },
-                section.key
-              )
-            );
-          }) }),
+                        /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-foreground", children: option.label }),
+                        isActive && /* @__PURE__ */ jsx(CheckIcon, { size: 14, className: "shrink-0 text-brand" })
+                      ]
+                    },
+                    `${section2.key}:${option.key}`
+                  );
+                }
+                const { section } = row;
+                const count = section.selected.size;
+                const valueLabel = section.summary ?? (section.mode === "single" ? section.options.find((o) => section.selected.has(o.key))?.label ?? "" : "");
+                const isOpen = section.key === openKey;
+                return (
+                  /* Hover handlers sit on the wrapper so the cursor can cross
+                   * the gap to `section.trailing` without closing the flyout.
+                   * The wrapper is not itself a control — the button inside is,
+                   * and it carries the keyboard equivalent (ArrowRight / Enter /
+                   * Space open the same flyout). Nothing here is mouse-only. */
+                  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      ref: (el) => {
+                        if (el) rowRefs.current.set(section.key, el);
+                        else rowRefs.current.delete(section.key);
+                      },
+                      className: "flex items-center gap-0.5",
+                      onMouseEnter: () => scheduleOpen(section.key),
+                      onMouseLeave: scheduleClose,
+                      children: [
+                        /* @__PURE__ */ jsxs(
+                          "button",
+                          {
+                            type: "button",
+                            role: "menuitem",
+                            "aria-haspopup": "menu",
+                            "aria-expanded": isOpen,
+                            onClick: () => openSection(section.key),
+                            onKeyDown: (e) => {
+                              if (e.key === "ArrowRight" || e.key === "Enter" || e.key === " ") {
+                                e.preventDefault();
+                                openSection(section.key);
+                                requestAnimationFrame(
+                                  () => flyoutRef.current?.querySelector("input, [role='menuitemcheckbox'], [role='menuitemradio']")?.focus()
+                                );
+                              }
+                            },
+                            className: cn(
+                              "flex min-w-0 flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-left text-[13px] text-foreground transition-colors hover:bg-muted/60 focus-visible:bg-muted/60 focus-visible:outline-none",
+                              isOpen && "bg-muted/60"
+                            ),
+                            children: [
+                              section.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", "aria-hidden": "true", children: section.icon }),
+                              /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: section.label }),
+                              section.mode === "multi" && count > 0 && /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-full bg-brand-bg px-1.5 text-[11px] font-medium text-brand", children: count }),
+                              section.mode !== "multi" && valueLabel && /* @__PURE__ */ jsx("span", { className: "max-w-24 shrink-0 truncate text-[13px] text-muted-foreground", children: valueLabel }),
+                              /* @__PURE__ */ jsx(ChevronRightIcon, { size: 13, className: "shrink-0 text-muted-foreground" })
+                            ]
+                          }
+                        ),
+                        section.trailing
+                      ]
+                    },
+                    section.key
+                  )
+                );
+              })
+            }
+          ),
           /* @__PURE__ */ jsx("div", { className: "border-t border-border p-1", children: /* @__PURE__ */ jsxs(
             Button,
             {
@@ -18537,9 +18553,12 @@ function DisplayMenu({
               role: "menu",
               "aria-label": activeSection.label,
               tabIndex: -1,
-              style: { top: flyout.top, width: FLYOUT_WIDTH },
+              style: { top: flyout.top, width: FLYOUT_WIDTH, maxHeight: flyout.maxHeight },
               className: cn(
-                "absolute z-50 rounded-lg border border-border bg-popover shadow-md",
+                // Column + overflow-hidden so the option list (the only flexible
+                // part) absorbs the height cap, while the search box and Clear
+                // footer stay pinned and fully visible.
+                "absolute z-50 flex flex-col overflow-hidden rounded-lg border border-border bg-popover shadow-md",
                 // -mx-1 lets the flyout tuck against the panel so there's no
                 // dead gap for the cursor to fall through on the way over.
                 flyout.side === "left" ? "right-full -mr-1" : "left-full -ml-1"
@@ -18547,7 +18566,7 @@ function DisplayMenu({
               onMouseEnter: clearTimers,
               onMouseLeave: scheduleClose,
               children: [
-                showFlyoutSearch && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 border-b border-border px-2.5 py-1.5", children: [
+                showFlyoutSearch && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1.5 border-b border-border px-2.5 py-1.5", children: [
                   /* @__PURE__ */ jsx(SearchIcon, { size: 13, className: "shrink-0 text-muted-foreground", "aria-hidden": "true" }),
                   /* @__PURE__ */ jsx(
                     "input",
@@ -18561,7 +18580,12 @@ function DisplayMenu({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx("div", { className: "max-h-64 overflow-y-auto p-1", children: sectionRows.length === 0 ? /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx("div", { className: "scrollbar-thin min-h-0 flex-1 max-h-[min(24rem,60vh)] overflow-y-auto p-1", children: activeSection.content ? (
+                  /* Consumer-supplied controls (date range, numeric bound).
+                   * Rendered raw — the section owns its own labelling and
+                   * layout; the flyout only provides the surface. */
+                  /* @__PURE__ */ jsx("div", { className: "p-1.5", children: activeSection.content })
+                ) : sectionRows.length === 0 ? /* @__PURE__ */ jsx(
                   EmptyRow,
                   {
                     label: activeSection.options.length === 0 ? "Nothing to filter by" : "No matches"
@@ -18609,7 +18633,7 @@ function DisplayMenu({
                     option.key
                   );
                 }) }),
-                activeSection.mode === "multi" && activeSection.selected.size > 0 && activeSection.onClear && /* @__PURE__ */ jsx("div", { className: "border-t border-border p-1", children: /* @__PURE__ */ jsxs(
+                activeSection.mode === "multi" && activeSection.selected.size > 0 && activeSection.onClear && /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-border p-1", children: /* @__PURE__ */ jsxs(
                   Button,
                   {
                     variant: "ghost",