@assure-one/design-system 1.27.0 → 1.29.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;
@@ -5686,8 +5695,14 @@ interface DisplayMenuProps {
     /** Page gutter (px) the panel pins its right edge to. Defaults to the
      *  24px dashboard padding; raise it for wider-inset layouts. */
     gutterPx?: number;
-}
-declare function DisplayMenu({ sections, onReset, isAtDefault, tooltip, dataTour, triggerIcon, triggerLabel, className, gutterPx, }: DisplayMenuProps): react_jsx_runtime.JSX.Element;
+    /** Which side of the panel the section flyouts open on. `"auto"` (default)
+     *  opens left whenever the panel has room there — right for gutter-pinned
+     *  panels like the Clients table's Display button. Pass `"right"` when the
+     *  trigger lives in a left-anchored surface (e.g. an inbox panel) and the
+     *  free space is on the right. */
+    flyoutSide?: "auto" | "left" | "right";
+}
+declare function DisplayMenu({ sections, onReset, isAtDefault, tooltip, dataTour, triggerIcon, triggerLabel, className, gutterPx, flyoutSide, }: DisplayMenuProps): react_jsx_runtime.JSX.Element;
 
 declare function cn(...inputs: ClassValue[]): string;
 

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",
@@ -18261,7 +18286,8 @@ function DisplayMenu({
   triggerIcon,
   triggerLabel = "Display",
   className,
-  gutterPx = DEFAULT_GUTTER_PX
+  gutterPx = DEFAULT_GUTTER_PX,
+  flyoutSide = "auto"
 }) {
   const [open, setOpen] = useState(false);
   const [openKey, setOpenKey] = useState(null);
@@ -18298,9 +18324,9 @@ function DisplayMenu({
       MIN_FLYOUT_HEIGHT,
       window.innerHeight - (panelRect.top + top) - VIEWPORT_MARGIN
     );
-    const side = panelRect.left >= FLYOUT_WIDTH + 16 ? "left" : "right";
+    const side = flyoutSide === "auto" ? panelRect.left >= FLYOUT_WIDTH + 16 ? "left" : "right" : flyoutSide;
     setFlyout({ top, side, maxHeight });
-  }, []);
+  }, [flyoutSide]);
   const openSection = useCallback(
     (key) => {
       clearTimers();