@uniformdev/design-system 20.71.2-alpha.10 → 20.71.2-alpha.13

package/dist/esm/index.js

@@ -8630,19 +8630,8 @@ var PopoverBtn = css53`
 `;
 var Popover = css53`
   z-index: var(--z-menu);
-
-  /**
-   * Hide the popover when its anchor (trigger) has been scrolled out of view by a
-   * clipping ancestor. Without this, the portaled popup keeps tracking the (now
-   * hidden) trigger and Base UI's collision avoidance shifts it back into view
-   * each scroll frame, producing a flashing/jumping effect (see UNI-9326).
-   *
-   * 'display: none' is used (rather than 'visibility: hidden') so the
-   * positioner is removed from layout while the anchor is hidden; otherwise the
-   * still-laid-out positioner causes scroll/layout shift as Floating UI keeps
-   * repositioning it during scroll. This is also the pattern Base UI's docs
-   * recommend for data-anchor-hidden.
-   */
+`;
+var PopoverHideWhenAnchorHidden = css53`
   &[data-anchor-hidden] {
     display: none;
   }
@@ -8652,6 +8641,7 @@ var PopoverDefaulterTriggerBtn = css53`
   background: none;
   padding: var(--spacing-2xs);
   border-radius: var(--rounded-full);
+  flex-shrink: 0;
 
   &:hover {
     background-color: rgba(0, 0, 0, 0.05);
@@ -12453,14 +12443,32 @@ var Popover2 = ({
     [open, setOpen, hide, show]
   );
   const [inlineContainer, setInlineContainer] = useState20(null);
+  const [triggerElement, setTriggerElement] = useState20(null);
   useEffect16(() => {
     onInit == null ? void 0 : onInit({ store: shimStore });
   }, [shimStore]);
   const portalContainer = portal ? modalContainer != null ? modalContainer : void 0 : inlineContainer;
+  const isInModal = Boolean(portal && modalContainer);
+  const positionMethod = isInModal ? "fixed" : "absolute";
+  useEffect16(() => {
+    if (!open || !isInModal || !triggerElement || typeof IntersectionObserver === "undefined") {
+      return;
+    }
+    const observer = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        if (!entry.isIntersecting) {
+          hide();
+        }
+      }
+    });
+    observer.observe(triggerElement);
+    return () => observer.disconnect();
+  }, [open, isInModal, triggerElement, hide]);
   return /* @__PURE__ */ jsx102(PopoverComponentContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs68(BaseUIPopover2.Root, { open, onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ jsx102(
       BaseUIPopover2.Trigger,
       {
+        ref: setTriggerElement,
         css: [PopoverBtn, trigger2 ? void 0 : PopoverDefaulterTriggerBtn],
         title: buttonText,
         "data-testid": testId,
@@ -12471,18 +12479,28 @@ var Popover2 = ({
         ] })
       }
     ),
-    /* @__PURE__ */ jsx102(BaseUIPopover2.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx102(BaseUIPopover2.Positioner, { side, align: alignment, sideOffset: gutter, css: Popover, children: /* @__PURE__ */ jsx102(
-      BaseUIPopover2.Popup,
+    /* @__PURE__ */ jsx102(BaseUIPopover2.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx102(
+      BaseUIPopover2.Positioner,
       {
-        ...id !== void 0 && { id },
-        "aria-label": ariaLabel,
-        role: "dialog",
-        className,
-        style,
-        tabIndex,
-        children: /* @__PURE__ */ jsx102(PopoverBody2, { variant, maxWidth, children })
+        side,
+        align: alignment,
+        sideOffset: gutter,
+        positionMethod,
+        css: [Popover, isInModal ? void 0 : PopoverHideWhenAnchorHidden],
+        children: /* @__PURE__ */ jsx102(
+          BaseUIPopover2.Popup,
+          {
+            ...id !== void 0 && { id },
+            "aria-label": ariaLabel,
+            role: "dialog",
+            className,
+            style,
+            tabIndex,
+            children: /* @__PURE__ */ jsx102(PopoverBody2, { variant, maxWidth, children })
+          }
+        )
       }
-    ) }) }),
+    ) }),
     !portal && /* @__PURE__ */ jsx102("span", { ref: setInlineContainer })
   ] }) });
 };
@@ -13449,6 +13467,9 @@ var ObjectGridItemHeading = css87`
   max-width: 100%;
   font-size: var(--fs-sm);
 `;
+var ObjectGridItemHeadingSlot = css87`
+  flex-shrink: 0;
+`;
 var PopoverContent = css87`
   min-width: 50px;
 `;
@@ -13485,9 +13506,27 @@ var ObjectGridItemHeading2 = ({
     };
   }, []);
   return /* @__PURE__ */ jsxs79(HorizontalRhythm, { align: "center", gap: "xs", css: { minWidth: 0 }, children: [
-    beforeHeadingSlot ? /* @__PURE__ */ jsx114(HorizontalRhythm, { gap: "xs", align: "center", onClick: onStopPropagation, children: beforeHeadingSlot }) : null,
+    beforeHeadingSlot ? /* @__PURE__ */ jsx114(
+      HorizontalRhythm,
+      {
+        gap: "xs",
+        align: "center",
+        css: ObjectGridItemHeadingSlot,
+        onClick: onStopPropagation,
+        children: beforeHeadingSlot
+      }
+    ) : null,
     /* @__PURE__ */ jsx114(Tooltip, { title: hasTruncation && tooltip ? tooltip : "", children: /* @__PURE__ */ jsx114("div", { role: "heading", css: ObjectGridItemHeading, ref: headingRef, ...props, children: heading }) }),
-    afterHeadingSlot ? /* @__PURE__ */ jsx114(HorizontalRhythm, { gap: "xs", align: "center", onClick: onStopPropagation, children: afterHeadingSlot }) : null
+    afterHeadingSlot ? /* @__PURE__ */ jsx114(
+      HorizontalRhythm,
+      {
+        gap: "xs",
+        align: "center",
+        css: ObjectGridItemHeadingSlot,
+        onClick: onStopPropagation,
+        children: afterHeadingSlot
+      }
+    ) : null
   ] });
 };
 

package/dist/index.js

@@ -10513,19 +10513,8 @@ var PopoverBtn = import_react81.css`
 `;
 var Popover = import_react81.css`
   z-index: var(--z-menu);
-
-  /**
-   * Hide the popover when its anchor (trigger) has been scrolled out of view by a
-   * clipping ancestor. Without this, the portaled popup keeps tracking the (now
-   * hidden) trigger and Base UI's collision avoidance shifts it back into view
-   * each scroll frame, producing a flashing/jumping effect (see UNI-9326).
-   *
-   * 'display: none' is used (rather than 'visibility: hidden') so the
-   * positioner is removed from layout while the anchor is hidden; otherwise the
-   * still-laid-out positioner causes scroll/layout shift as Floating UI keeps
-   * repositioning it during scroll. This is also the pattern Base UI's docs
-   * recommend for data-anchor-hidden.
-   */
+`;
+var PopoverHideWhenAnchorHidden = import_react81.css`
   &[data-anchor-hidden] {
     display: none;
   }
@@ -10535,6 +10524,7 @@ var PopoverDefaulterTriggerBtn = import_react81.css`
   background: none;
   padding: var(--spacing-2xs);
   border-radius: var(--rounded-full);
+  flex-shrink: 0;
 
   &:hover {
     background-color: rgba(0, 0, 0, 0.05);
@@ -14398,14 +14388,32 @@ var Popover2 = ({
     [open, setOpen, hide, show]
   );
   const [inlineContainer, setInlineContainer] = (0, import_react121.useState)(null);
+  const [triggerElement, setTriggerElement] = (0, import_react121.useState)(null);
   (0, import_react121.useEffect)(() => {
     onInit == null ? void 0 : onInit({ store: shimStore });
   }, [shimStore]);
   const portalContainer = portal ? modalContainer != null ? modalContainer : void 0 : inlineContainer;
+  const isInModal = Boolean(portal && modalContainer);
+  const positionMethod = isInModal ? "fixed" : "absolute";
+  (0, import_react121.useEffect)(() => {
+    if (!open || !isInModal || !triggerElement || typeof IntersectionObserver === "undefined") {
+      return;
+    }
+    const observer = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        if (!entry.isIntersecting) {
+          hide();
+        }
+      }
+    });
+    observer.observe(triggerElement);
+    return () => observer.disconnect();
+  }, [open, isInModal, triggerElement, hide]);
   return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(PopoverComponentContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(import_popover2.Popover.Root, { open, onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
       import_popover2.Popover.Trigger,
       {
+        ref: setTriggerElement,
         css: [PopoverBtn, trigger2 ? void 0 : PopoverDefaulterTriggerBtn],
         title: buttonText,
         "data-testid": testId,
@@ -14416,18 +14424,28 @@ var Popover2 = ({
         ] })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(import_popover2.Popover.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(import_popover2.Popover.Positioner, { side, align: alignment, sideOffset: gutter, css: Popover, children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
-      import_popover2.Popover.Popup,
+    /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(import_popover2.Popover.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+      import_popover2.Popover.Positioner,
       {
-        ...id !== void 0 && { id },
-        "aria-label": ariaLabel,
-        role: "dialog",
-        className,
-        style,
-        tabIndex,
-        children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(PopoverBody2, { variant, maxWidth, children })
+        side,
+        align: alignment,
+        sideOffset: gutter,
+        positionMethod,
+        css: [Popover, isInModal ? void 0 : PopoverHideWhenAnchorHidden],
+        children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+          import_popover2.Popover.Popup,
+          {
+            ...id !== void 0 && { id },
+            "aria-label": ariaLabel,
+            role: "dialog",
+            className,
+            style,
+            tabIndex,
+            children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(PopoverBody2, { variant, maxWidth, children })
+          }
+        )
       }
-    ) }) }),
+    ) }),
     !portal && /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("span", { ref: setInlineContainer })
   ] }) });
 };
@@ -15423,6 +15441,9 @@ var ObjectGridItemHeading = import_react135.css`
   max-width: 100%;
   font-size: var(--fs-sm);
 `;
+var ObjectGridItemHeadingSlot = import_react135.css`
+  flex-shrink: 0;
+`;
 var PopoverContent = import_react135.css`
   min-width: 50px;
 `;
@@ -15459,9 +15480,27 @@ var ObjectGridItemHeading2 = ({
     };
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(HorizontalRhythm, { align: "center", gap: "xs", css: { minWidth: 0 }, children: [
-    beforeHeadingSlot ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(HorizontalRhythm, { gap: "xs", align: "center", onClick: onStopPropagation, children: beforeHeadingSlot }) : null,
+    beforeHeadingSlot ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+      HorizontalRhythm,
+      {
+        gap: "xs",
+        align: "center",
+        css: ObjectGridItemHeadingSlot,
+        onClick: onStopPropagation,
+        children: beforeHeadingSlot
+      }
+    ) : null,
     /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(Tooltip, { title: hasTruncation && tooltip ? tooltip : "", children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { role: "heading", css: ObjectGridItemHeading, ref: headingRef, ...props, children: heading }) }),
-    afterHeadingSlot ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(HorizontalRhythm, { gap: "xs", align: "center", onClick: onStopPropagation, children: afterHeadingSlot }) : null
+    afterHeadingSlot ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+      HorizontalRhythm,
+      {
+        gap: "xs",
+        align: "center",
+        css: ObjectGridItemHeadingSlot,
+        onClick: onStopPropagation,
+        children: afterHeadingSlot
+      }
+    ) : null
   ] });
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "20.71.2-alpha.10+f05c79f825",
+  "version": "20.71.2-alpha.13+1445ced748",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "exports": {
@@ -34,8 +34,8 @@
     "@storybook/react-vite": "10.4.6",
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
-    "@uniformdev/canvas": "^20.71.2-alpha.10+f05c79f825",
-    "@uniformdev/richtext": "^20.71.2-alpha.10+f05c79f825",
+    "@uniformdev/canvas": "^20.71.2-alpha.13+1445ced748",
+    "@uniformdev/richtext": "^20.71.2-alpha.13+1445ced748",
     "autoprefixer": "10.5.0",
     "hygen": "6.2.11",
     "jsdom": "29.1.1",
@@ -82,5 +82,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f05c79f825aea4df577b9ac100ff186a5a582a37"
+  "gitHead": "1445ced748266b10644d34f1addf52bbab2ef4bb"
 }