@assure-one/design-system 1.28.0 → 1.30.0

package/dist/index.d.ts

@@ -5692,11 +5692,18 @@ interface DisplayMenuProps {
     triggerLabel?: string;
     /** Extra classes for the trigger button. */
     className?: string;
-    /** Page gutter (px) the panel pins its right edge to. Defaults to the
-     *  24px dashboard padding; raise it for wider-inset layouts. */
+    /** @deprecated Ignored since 1.30. The panel now anchors to the trigger, so
+     *  there is no gutter to pin to. Consumers that measured a gutter to drag the
+     *  panel back under its button can delete that plumbing and this prop. */
     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 — the usual case for a
+     *  Display button sitting at the right of a toolbar. 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, flyoutSide, }: DisplayMenuProps): react_jsx_runtime.JSX.Element;
 
 declare function cn(...inputs: ClassValue[]): string;
 

package/dist/index.js

@@ -18276,7 +18276,7 @@ var HOVER_CLOSE_MS = 220;
 var FLYOUT_WIDTH = 224;
 var MIN_FLYOUT_HEIGHT = 120;
 var VIEWPORT_MARGIN = 24;
-var DEFAULT_GUTTER_PX = 24;
+var COLLISION_PADDING_PX = 12;
 function DisplayMenu({
   sections,
   onReset,
@@ -18286,7 +18286,7 @@ function DisplayMenu({
   triggerIcon,
   triggerLabel = "Display",
   className,
-  gutterPx = DEFAULT_GUTTER_PX
+  flyoutSide = "auto"
 }) {
   const [open, setOpen] = useState(false);
   const [openKey, setOpenKey] = useState(null);
@@ -18295,11 +18295,9 @@ function DisplayMenu({
     side: "left",
     maxHeight: 0
   });
-  const [panelShift, setPanelShift] = useState(0);
   const [rootQuery, setRootQuery] = useState("");
   const [sectionQuery, setSectionQuery] = useState("");
   const panelRef = useRef(null);
-  const triggerRef = useRef(null);
   const rowRefs = useRef(/* @__PURE__ */ new Map());
   const openTimer = useRef(null);
   const closeTimer = useRef(null);
@@ -18323,9 +18321,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();
@@ -18357,22 +18355,8 @@ function DisplayMenu({
       setOpenKey(null);
       setRootQuery("");
       setSectionQuery("");
-      setPanelShift(0);
     }
   }, [open, clearTimers]);
-  useEffect(() => {
-    if (!open) return;
-    const reposition = () => {
-      const trigger = triggerRef.current;
-      if (!trigger) return;
-      const viewport = document.documentElement.clientWidth;
-      const shift = viewport - gutterPx - trigger.getBoundingClientRect().right;
-      setPanelShift(Math.max(0, Math.round(shift)));
-    };
-    reposition();
-    window.addEventListener("resize", reposition);
-    return () => window.removeEventListener("resize", reposition);
-  }, [open, gutterPx]);
   const activeSection = useMemo(
     () => sections.find((s) => s.key === openKey) ?? null,
     [sections, openKey]
@@ -18405,7 +18389,6 @@ function DisplayMenu({
       /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
         Button,
         {
-          ref: triggerRef,
           variant: "outline",
           size: "sm",
           "aria-label": showDot ? `${triggerLabel} (customised)` : triggerLabel,
@@ -18431,7 +18414,7 @@ function DisplayMenu({
       {
         align: "end",
         sideOffset: 6,
-        style: panelShift ? { transform: `translateX(${panelShift}px)` } : void 0,
+        collisionPadding: COLLISION_PADDING_PX,
         className: "w-64 overflow-visible p-0",
         onKeyDown: (e) => {
           if (e.key === "Escape" && openKey) {