@assure-one/design-system 1.26.0 → 1.28.0

package/dist/index.d.ts

@@ -2705,6 +2705,15 @@ interface ProposalPackageCardProps extends Omit<React.HTMLAttributes<HTMLDivElem
     servicesLabel?: ReactNode;
     /** Service rows (`ProposalServiceRow`) or any content. */
     children?: ReactNode;
+    /**
+     * Cap the service list's height (any CSS length, e.g. `"14rem"`). Past it the
+     * list scrolls rather than growing, so a package with many services keeps its
+     * select control in view instead of pushing it below the fold — and cards
+     * sitting in a row stay the same height.
+     *
+     * Omit for the previous behaviour: the list grows to fit.
+     */
+    servicesMaxHeight?: string;
     /** Select / toggle handler — makes the card interactive. */
     onSelect?: () => void;
     disabled?: boolean;

package/dist/index.js

@@ -10639,6 +10639,7 @@ var ProposalPackageCard = forwardRef(
     badge,
     servicesLabel = "Included services",
     children,
+    servicesMaxHeight,
     onSelect,
     disabled = false,
     className,
@@ -10674,7 +10675,31 @@ var ProposalPackageCard = forwardRef(
           ] }),
           children && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("div", { className: "text-fg-3 mt-4 mb-1 text-[11.5px] font-semibold tracking-wide", children: servicesLabel }),
-            /* @__PURE__ */ jsx("div", { children })
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  servicesMaxHeight && [
+                    "min-h-0 overflow-y-auto",
+                    // pr-3 keeps the rail off the service text; -mr-1 gives that
+                    // padding back to the card so the rail still sits near its
+                    // edge rather than floating in from it.
+                    "-mr-1 pr-3",
+                    // A 2px hairline. `scrollbar-thin` is 8px, and on
+                    // Chrome-for-Windows an unstyled bar also carries stepper
+                    // arrows, which is most of what made it read as heavy.
+                    "[scrollbar-width:thin]",
+                    "[&::-webkit-scrollbar]:w-[2px]",
+                    "[&::-webkit-scrollbar-button]:hidden",
+                    "[&::-webkit-scrollbar-track]:bg-transparent",
+                    "[&::-webkit-scrollbar-thumb]:rounded-full",
+                    "[&::-webkit-scrollbar-thumb]:bg-rule-strong"
+                  ]
+                ),
+                style: servicesMaxHeight ? { maxHeight: servicesMaxHeight } : void 0,
+                children
+              }
+            )
           ] }),
           /* @__PURE__ */ jsx("div", { className: "mt-auto pt-4", children: interactive ? /* @__PURE__ */ jsx(
             "button",
@@ -18249,6 +18274,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 +18292,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 +18317,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) => {
@@ -18423,100 +18455,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.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()
-                            );
+          /* @__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 !== "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("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,
             {
@@ -18538,9 +18578,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"
@@ -18548,7 +18591,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",
@@ -18562,7 +18605,7 @@ function DisplayMenu({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx("div", { className: "max-h-64 overflow-y-auto p-1", children: activeSection.content ? (
+                /* @__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. */
@@ -18615,7 +18658,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",