@dynatrace/strato-components 3.8.0 → 3.9.0

package/esm/layouts/page-layout/details-layout/DetailsLayout.js

@@ -3,9 +3,11 @@ import { clsx } from "clsx";
 import {
   forwardRef,
   memo,
+  useCallback,
   useContext,
   useMemo,
-  useRef
+  useRef,
+  useState
 } from "react";
 import { useIntl } from "react-intl";
 import * as styles from "./DetailsLayout.sty.js";
@@ -15,22 +17,75 @@ import { useLayoutState } from "./useLayoutState.js";
 import { useMergeRefs } from "../../../core/hooks/useMergeRefs.js";
 import { useSafeLayoutEffect } from "../../../core/hooks/useSafeLayoutEffect.js";
 import { Drawer } from "../../../overlays/drawer/Drawer.js";
+import { clampPanelWidth } from "../../split-layout/split-sizing-utils.js";
 import { SplitLayout } from "../../split-layout/SplitLayout.js";
-import { convertToPx } from "../../split-layout/width-utils.js";
+import { clamp, convertToPx } from "../../split-layout/width-utils.js";
 import {
   PageLayoutPortalContext
 } from "../shared/PageLayoutPortalContext.js";
 import { useTeleport } from "../shared/useTeleport.js";
+const SPLIT_HANDLE_WIDTH = 8;
 function DetailsLayoutInner({
   details,
   content,
   containerRef,
-  persistedPanelWidthRef,
   contentTeleport,
   panelTeleport
 }) {
   const intl = useIntl();
   const layout = useLayoutState({ details, containerRef });
+  const [intendedWidth, setIntendedWidth] = useState();
+  const containerWidth = layout.containerWidth;
+  const controlledWidth = details.config.width;
+  const clampForMode = useCallback(
+    (value) => {
+      switch (layout.mode) {
+        case "overlay": {
+          const min = convertToPx(details.config.minWidth, containerWidth);
+          const max = details.config.resizable ? containerWidth - OVERLAY_HANDLE_WIDTH : containerWidth;
+          return clamp(min, value, max);
+        }
+        case "split": {
+          return clampPanelWidth(value, containerWidth, {
+            panelMin: details.config.minWidth,
+            panelMax: details.config.maxWidth,
+            contentMin: content.config.minWidth,
+            handleWidth: details.config.resizable ? SPLIT_HANDLE_WIDTH : 0
+          });
+        }
+        default: {
+          return value;
+        }
+      }
+    },
+    [
+      layout.mode,
+      containerWidth,
+      details.config.minWidth,
+      details.config.maxWidth,
+      details.config.resizable,
+      content.config.minWidth
+    ]
+  );
+  const baseWidth = (() => {
+    if (containerWidth === 0) {
+      return void 0;
+    }
+    if (controlledWidth !== void 0) {
+      return convertToPx(controlledWidth, containerWidth);
+    }
+    return intendedWidth ?? convertToPx(details.config.defaultWidth, containerWidth);
+  })();
+  const panelWidth = baseWidth !== void 0 ? clampForMode(baseWidth) : void 0;
+  const commitWidth = useCallback(
+    (value) => {
+      if (controlledWidth === void 0) {
+        setIntendedWidth(value);
+      }
+      details.config.onResize?.(value);
+    },
+    [controlledWidth, details.config]
+  );
   const detailsAriaLabel = intl.formatMessage({
     defaultMessage: "Details",
     id: "o3A99RFWS+N7bJe8",
@@ -87,11 +142,9 @@ function DetailsLayoutInner({
               ref: details.ref,
               minWidth: details.config.minWidth,
               maxWidth: details.config.maxWidth,
-              defaultWidth: persistedPanelWidthRef.current ?? details.config.defaultWidth,
-              onResize: (value) => {
-                persistedPanelWidthRef.current = value;
-                details.config.onResize?.(value);
-              },
+              defaultWidth: details.config.defaultWidth,
+              width: panelWidth,
+              onResize: commitWidth,
               resizable: details.config.resizable,
               position: "end",
               className: clsx(styles.panel, details.domProps.className),
@@ -120,12 +173,9 @@ function DetailsLayoutInner({
                 layout.containerWidth
               ),
               maxWidth: details.config.resizable ? layout.containerWidth - OVERLAY_HANDLE_WIDTH : layout.containerWidth,
-              defaultWidth: persistedPanelWidthRef.current ?? convertToPx(details.config.defaultWidth, layout.containerWidth),
+              width: panelWidth,
               resizable: details.config.resizable,
-              onResize: (value) => {
-                persistedPanelWidthRef.current = value;
-                details.config.onResize?.(value);
-              },
+              onResizeEnd: commitWidth,
               children: /* @__PURE__ */ jsx(panelTeleport.Target, {})
             }
           )
@@ -162,7 +212,6 @@ const DetailsLayout = memo(
     const { className: rootClassName, details, content, ...rootProps } = props;
     const containerRef = useRef(null);
     const rootRef = useMergeRefs([ref, containerRef]);
-    const persistedPanelWidth = useRef();
     const contentTeleport = useTeleport();
     const panelTeleport = useTeleport();
     return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -179,7 +228,6 @@ const DetailsLayout = memo(
               details,
               content,
               containerRef,
-              persistedPanelWidthRef: persistedPanelWidth,
               contentTeleport,
               panelTeleport
             }

package/esm/layouts/page-layout/details-layout/DetailsLayout.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/details-layout/DetailsLayout.tsx"],
-  "sourcesContent": ["import { clsx } from 'clsx';\nimport {\n  forwardRef,\n  memo,\n  useContext,\n  useMemo,\n  useRef,\n  type ComponentPropsWithoutRef,\n  type MutableRefObject,\n  type RefObject,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport * as styles from './DetailsLayout.sty.js';\nimport { DetailsLayoutContext } from './DetailsLayoutContext.js';\nimport { Overlay, OVERLAY_HANDLE_WIDTH } from './Overlay.js';\nimport {\n  type ExtractedContentSlot,\n  type ExtractedDetailsSlot,\n} from './slots.js';\nimport { useLayoutState } from './useLayoutState.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport { useSafeLayoutEffect } from '../../../core/hooks/useSafeLayoutEffect.js';\nimport { Drawer } from '../../../overlays/drawer/Drawer.js';\nimport { SplitLayout } from '../../split-layout/SplitLayout.js';\nimport { convertToPx } from '../../split-layout/width-utils.js';\nimport {\n  PageLayoutPortalContext,\n  type PageLayoutPortalContextValue,\n} from '../shared/PageLayoutPortalContext.js';\nimport { useTeleport } from '../shared/useTeleport.js';\n\ntype TeleportPair = ReturnType<typeof useTeleport>;\n\nfunction DetailsLayoutInner({\n  details,\n  content,\n  containerRef,\n  persistedPanelWidthRef,\n  contentTeleport,\n  panelTeleport,\n}: {\n  details: ExtractedDetailsSlot;\n  content: ExtractedContentSlot;\n  containerRef: RefObject<HTMLDivElement>;\n  persistedPanelWidthRef: MutableRefObject<number | undefined>;\n  contentTeleport: TeleportPair;\n  panelTeleport: TeleportPair;\n}) {\n  const intl = useIntl();\n  const layout = useLayoutState({ details, containerRef });\n\n  const detailsAriaLabel = intl.formatMessage({\n    defaultMessage: 'Details',\n    id: 'o3A99RFWS+N7bJe8',\n    description: 'Accessible label for the details panel.',\n  });\n\n  const contextValue = useMemo(\n    () => ({\n      collapsed: layout.collapsed,\n      setCollapsed: layout.setCollapsed,\n      preferredLayout: layout.preferredLayoutMode,\n      setPreferredLayout: layout.setPreferredLayoutMode,\n      mode: layout.mode,\n    }),\n    [\n      layout.collapsed,\n      layout.setCollapsed,\n      layout.preferredLayoutMode,\n      layout.setPreferredLayoutMode,\n      layout.mode,\n    ],\n  );\n\n  // Bridge: DetailsLayoutContext.Provider below only covers the split/overlay\n  // DOM rendered by this component. PageLayout.Details children live in a\n  // different React subtree (they're portaled), so the provider doesn't reach\n  // them. Publish the value through the registry so PageLayoutDetails can\n  // re-wrap its portaled children with a provider of the same value.\n  const pageLayoutPortalContext =\n    useContext<PageLayoutPortalContextValue | null>(PageLayoutPortalContext);\n  useSafeLayoutEffect(() => {\n    if (!pageLayoutPortalContext) {\n      return;\n    }\n    pageLayoutPortalContext.registry.register(\n      'detailsLayoutContext',\n      contextValue,\n    );\n  }, [pageLayoutPortalContext, contextValue]);\n\n  const contentClassName = clsx(styles.content, content.domProps.className);\n  const contentNode = (\n    <main ref={content.ref} {...content.domProps} className={contentClassName}>\n      <contentTeleport.Target />\n    </main>\n  );\n\n  const layoutNode = (() => {\n    switch (layout.mode) {\n      case 'collapsed': {\n        return contentNode;\n      }\n      case 'split': {\n        return (\n          <SplitLayout>\n            <SplitLayout.Content minWidth={content.config.minWidth}>\n              <main\n                ref={content.ref}\n                {...content.domProps}\n                className={clsx(styles.content, content.domProps.className)}\n              >\n                <contentTeleport.Target />\n              </main>\n            </SplitLayout.Content>\n            <SplitLayout.Panel\n              {...details.domProps}\n              ref={details.ref}\n              minWidth={details.config.minWidth}\n              maxWidth={details.config.maxWidth}\n              defaultWidth={\n                persistedPanelWidthRef.current ?? details.config.defaultWidth\n              }\n              onResize={(value) => {\n                persistedPanelWidthRef.current = value;\n                details.config.onResize?.(value);\n              }}\n              resizable={details.config.resizable}\n              position=\"end\"\n              className={clsx(styles.panel, details.domProps.className)}\n              aria-label={detailsAriaLabel}\n            >\n              <panelTeleport.Target />\n            </SplitLayout.Panel>\n          </SplitLayout>\n        );\n      }\n      case 'overlay': {\n        // Defer Overlay until container is measured\n        // Render a hidden panel Target so the teleport host stays attached\n        // across the measure frame.\n        if (layout.containerWidth === 0) {\n          return (\n            <>\n              {contentNode}\n              <div hidden aria-hidden=\"true\">\n                <panelTeleport.Target />\n              </div>\n            </>\n          );\n        }\n        return (\n          <>\n            {contentNode}\n            <Overlay\n              {...details.domProps}\n              ref={details.ref}\n              minWidth={convertToPx(\n                details.config.minWidth,\n                layout.containerWidth,\n              )}\n              maxWidth={\n                details.config.resizable\n                  ? layout.containerWidth - OVERLAY_HANDLE_WIDTH\n                  : layout.containerWidth\n              }\n              defaultWidth={\n                persistedPanelWidthRef.current ??\n                convertToPx(details.config.defaultWidth, layout.containerWidth)\n              }\n              resizable={details.config.resizable}\n              onResize={(value) => {\n                persistedPanelWidthRef.current = value;\n                // TODO: should we communicate which layout mode was updated?\n                details.config.onResize?.(value);\n              }}\n            >\n              <panelTeleport.Target />\n            </Overlay>\n          </>\n        );\n      }\n      case 'drawer': {\n        return (\n          <>\n            {contentNode}\n            <Drawer\n              {...details.domProps}\n              ref={details.ref}\n              className={clsx(styles.drawer, details.domProps.className)}\n              aria-label={detailsAriaLabel}\n              isDismissed={layout.collapsed}\n              onDismiss={(state) => layout.setCollapsed(state)}\n              placement=\"right\"\n              width=\"wide\"\n            >\n              <div className={styles.drawerContent}>\n                <panelTeleport.Target />\n              </div>\n            </Drawer>\n          </>\n        );\n      }\n    }\n  })();\n\n  return (\n    <DetailsLayoutContext.Provider value={contextValue}>\n      <panelTeleport.Source>{details.children}</panelTeleport.Source>\n      {layoutNode}\n    </DetailsLayoutContext.Provider>\n  );\n}\n\n/** @internal */\nexport type LayoutRootProps = {\n  details: ExtractedDetailsSlot | null;\n  content: ExtractedContentSlot;\n} & Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'content'>;\n\n/** @internal */\nexport const DetailsLayout = memo(\n  forwardRef<HTMLDivElement, LayoutRootProps>((props, ref) => {\n    const { className: rootClassName, details, content, ...rootProps } = props;\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const rootRef = useMergeRefs([ref, containerRef]);\n    const persistedPanelWidth = useRef<number>();\n\n    const contentTeleport = useTeleport();\n    const panelTeleport = useTeleport();\n\n    return (\n      <>\n        <contentTeleport.Source>{content.children}</contentTeleport.Source>\n        <div\n          {...rootProps}\n          ref={rootRef}\n          className={clsx(styles.layoutRoot, rootClassName)}\n        >\n          {details ? (\n            <DetailsLayoutInner\n              details={details}\n              content={content}\n              containerRef={containerRef}\n              persistedPanelWidthRef={persistedPanelWidth}\n              contentTeleport={contentTeleport}\n              panelTeleport={panelTeleport}\n            />\n          ) : (\n            <main\n              ref={content.ref}\n              {...content.domProps}\n              className={clsx(styles.content, content.domProps.className)}\n            >\n              <contentTeleport.Target />\n            </main>\n          )}\n        </div>\n      </>\n    );\n  }),\n);\nDetailsLayout.displayName = 'DetailsLayout (forwardRef)';\n"],
-  "mappings": "AA+FM,SAiDM,UAjDN,KAWI,YAXJ;AA/FN,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP,SAAS,eAAe;AAExB,YAAY,YAAY;AACxB,SAAS,4BAA4B;AACrC,SAAS,SAAS,4BAA4B;AAK9C,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,2BAA2B;AACpC,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,OAEK;AACP,SAAS,mBAAmB;AAI5B,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACD,QAAM,OAAO,QAAQ;AACrB,QAAM,SAAS,eAAe,EAAE,SAAS,aAAa,CAAC;AAEvD,QAAM,mBAAmB,KAAK,cAAc;AAAA,IAC1C,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aAAa;AAAA,EACf,CAAC;AAED,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,MACL,WAAW,OAAO;AAAA,MAClB,cAAc,OAAO;AAAA,MACrB,iBAAiB,OAAO;AAAA,MACxB,oBAAoB,OAAO;AAAA,MAC3B,MAAM,OAAO;AAAA,IACf;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,EACF;AAOA,QAAM,0BACJ,WAAgD,uBAAuB;AACzE,sBAAoB,MAAM;AACxB,QAAI,CAAC,yBAAyB;AAC5B;AAAA,IACF;AACA,4BAAwB,SAAS;AAAA,MAC/B;AAAA,MACA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,yBAAyB,YAAY,CAAC;AAE1C,QAAM,mBAAmB,KAAK,OAAO,SAAS,QAAQ,SAAS,SAAS;AACxE,QAAM,cACJ,oBAAC,UAAK,KAAK,QAAQ,KAAM,GAAG,QAAQ,UAAU,WAAW,kBACvD,8BAAC,gBAAgB,QAAhB,EAAuB,GAC1B;AAGF,QAAM,cAAc,MAAM;AACxB,YAAQ,OAAO,MAAM;AAAA,MACnB,KAAK,aAAa;AAChB,eAAO;AAAA,MACT;AAAA,MACA,KAAK,SAAS;AACZ,eACE,qBAAC,eACC;AAAA,8BAAC,YAAY,SAAZ,EAAoB,UAAU,QAAQ,OAAO,UAC5C;AAAA,YAAC;AAAA;AAAA,cACC,KAAK,QAAQ;AAAA,cACZ,GAAG,QAAQ;AAAA,cACZ,WAAW,KAAK,OAAO,SAAS,QAAQ,SAAS,SAAS;AAAA,cAE1D,8BAAC,gBAAgB,QAAhB,EAAuB;AAAA;AAAA,UAC1B,GACF;AAAA,UACA;AAAA,YAAC,YAAY;AAAA,YAAZ;AAAA,cACE,GAAG,QAAQ;AAAA,cACZ,KAAK,QAAQ;AAAA,cACb,UAAU,QAAQ,OAAO;AAAA,cACzB,UAAU,QAAQ,OAAO;AAAA,cACzB,cACE,uBAAuB,WAAW,QAAQ,OAAO;AAAA,cAEnD,UAAU,CAAC,UAAU;AACnB,uCAAuB,UAAU;AACjC,wBAAQ,OAAO,WAAW,KAAK;AAAA,cACjC;AAAA,cACA,WAAW,QAAQ,OAAO;AAAA,cAC1B,UAAS;AAAA,cACT,WAAW,KAAK,OAAO,OAAO,QAAQ,SAAS,SAAS;AAAA,cACxD,cAAY;AAAA,cAEZ,8BAAC,cAAc,QAAd,EAAqB;AAAA;AAAA,UACxB;AAAA,WACF;AAAA,MAEJ;AAAA,MACA,KAAK,WAAW;AAId,YAAI,OAAO,mBAAmB,GAAG;AAC/B,iBACE,iCACG;AAAA;AAAA,YACD,oBAAC,SAAI,QAAM,MAAC,eAAY,QACtB,8BAAC,cAAc,QAAd,EAAqB,GACxB;AAAA,aACF;AAAA,QAEJ;AACA,eACE,iCACG;AAAA;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACE,GAAG,QAAQ;AAAA,cACZ,KAAK,QAAQ;AAAA,cACb,UAAU;AAAA,gBACR,QAAQ,OAAO;AAAA,gBACf,OAAO;AAAA,cACT;AAAA,cACA,UACE,QAAQ,OAAO,YACX,OAAO,iBAAiB,uBACxB,OAAO;AAAA,cAEb,cACE,uBAAuB,WACvB,YAAY,QAAQ,OAAO,cAAc,OAAO,cAAc;AAAA,cAEhE,WAAW,QAAQ,OAAO;AAAA,cAC1B,UAAU,CAAC,UAAU;AACnB,uCAAuB,UAAU;AAEjC,wBAAQ,OAAO,WAAW,KAAK;AAAA,cACjC;AAAA,cAEA,8BAAC,cAAc,QAAd,EAAqB;AAAA;AAAA,UACxB;AAAA,WACF;AAAA,MAEJ;AAAA,MACA,KAAK,UAAU;AACb,eACE,iCACG;AAAA;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACE,GAAG,QAAQ;AAAA,cACZ,KAAK,QAAQ;AAAA,cACb,WAAW,KAAK,OAAO,QAAQ,QAAQ,SAAS,SAAS;AAAA,cACzD,cAAY;AAAA,cACZ,aAAa,OAAO;AAAA,cACpB,WAAW,CAAC,UAAU,OAAO,aAAa,KAAK;AAAA,cAC/C,WAAU;AAAA,cACV,OAAM;AAAA,cAEN,8BAAC,SAAI,WAAW,OAAO,eACrB,8BAAC,cAAc,QAAd,EAAqB,GACxB;AAAA;AAAA,UACF;AAAA,WACF;AAAA,MAEJ;AAAA,IACF;AAAA,EACF,GAAG;AAEH,SACE,qBAAC,qBAAqB,UAArB,EAA8B,OAAO,cACpC;AAAA,wBAAC,cAAc,QAAd,EAAsB,kBAAQ,UAAS;AAAA,IACvC;AAAA,KACH;AAEJ;AASO,MAAM,gBAAgB;AAAA,EAC3B,WAA4C,CAAC,OAAO,QAAQ;AAC1D,UAAM,EAAE,WAAW,eAAe,SAAS,SAAS,GAAG,UAAU,IAAI;AAErE,UAAM,eAAe,OAAuB,IAAI;AAChD,UAAM,UAAU,aAAa,CAAC,KAAK,YAAY,CAAC;AAChD,UAAM,sBAAsB,OAAe;AAE3C,UAAM,kBAAkB,YAAY;AACpC,UAAM,gBAAgB,YAAY;AAElC,WACE,iCACE;AAAA,0BAAC,gBAAgB,QAAhB,EAAwB,kBAAQ,UAAS;AAAA,MAC1C;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,WAAW,KAAK,OAAO,YAAY,aAAa;AAAA,UAE/C,oBACC;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA,wBAAwB;AAAA,cACxB;AAAA,cACA;AAAA;AAAA,UACF,IAEA;AAAA,YAAC;AAAA;AAAA,cACC,KAAK,QAAQ;AAAA,cACZ,GAAG,QAAQ;AAAA,cACZ,WAAW,KAAK,OAAO,SAAS,QAAQ,SAAS,SAAS;AAAA,cAE1D,8BAAC,gBAAgB,QAAhB,EAAuB;AAAA;AAAA,UAC1B;AAAA;AAAA,MAEJ;AAAA,OACF;AAAA,EAEJ,CAAC;AACH;AACA,cAAc,cAAc;",
+  "sourcesContent": ["import { clsx } from 'clsx';\nimport {\n  forwardRef,\n  memo,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type RefObject,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport * as styles from './DetailsLayout.sty.js';\nimport { DetailsLayoutContext } from './DetailsLayoutContext.js';\nimport { Overlay, OVERLAY_HANDLE_WIDTH } from './Overlay.js';\nimport {\n  type ExtractedContentSlot,\n  type ExtractedDetailsSlot,\n} from './slots.js';\nimport { useLayoutState } from './useLayoutState.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport { useSafeLayoutEffect } from '../../../core/hooks/useSafeLayoutEffect.js';\nimport { Drawer } from '../../../overlays/drawer/Drawer.js';\nimport { clampPanelWidth } from '../../split-layout/split-sizing-utils.js';\nimport { SplitLayout } from '../../split-layout/SplitLayout.js';\nimport { clamp, convertToPx } from '../../split-layout/width-utils.js';\nimport {\n  PageLayoutPortalContext,\n  type PageLayoutPortalContextValue,\n} from '../shared/PageLayoutPortalContext.js';\nimport { useTeleport } from '../shared/useTeleport.js';\n\ntype TeleportPair = ReturnType<typeof useTeleport>;\n\n// Mirrors the resize-handle width used by SplitLayout (useSplitSizing) so the\n// width reported here matches what the split panel actually renders.\nconst SPLIT_HANDLE_WIDTH = 8;\n\nfunction DetailsLayoutInner({\n  details,\n  content,\n  containerRef,\n  contentTeleport,\n  panelTeleport,\n}: {\n  details: ExtractedDetailsSlot;\n  content: ExtractedContentSlot;\n  containerRef: RefObject<HTMLDivElement>;\n  contentTeleport: TeleportPair;\n  panelTeleport: TeleportPair;\n}) {\n  const intl = useIntl();\n  const layout = useLayoutState({ details, containerRef });\n\n  const [intendedWidth, setIntendedWidth] = useState<number>();\n\n  const containerWidth = layout.containerWidth;\n  const controlledWidth = details.config.width;\n\n  const clampForMode = useCallback(\n    (value: number) => {\n      switch (layout.mode) {\n        case 'overlay': {\n          const min = convertToPx(details.config.minWidth, containerWidth);\n          const max = details.config.resizable\n            ? containerWidth - OVERLAY_HANDLE_WIDTH\n            : containerWidth;\n          return clamp(min, value, max);\n        }\n        case 'split': {\n          return clampPanelWidth(value, containerWidth, {\n            panelMin: details.config.minWidth,\n            panelMax: details.config.maxWidth,\n            contentMin: content.config.minWidth,\n            handleWidth: details.config.resizable ? SPLIT_HANDLE_WIDTH : 0,\n          });\n        }\n        default: {\n          return value;\n        }\n      }\n    },\n    [\n      layout.mode,\n      containerWidth,\n      details.config.minWidth,\n      details.config.maxWidth,\n      details.config.resizable,\n      content.config.minWidth,\n    ],\n  );\n\n  const baseWidth = (() => {\n    if (containerWidth === 0) {\n      return undefined;\n    }\n    if (controlledWidth !== undefined) {\n      return convertToPx(controlledWidth, containerWidth);\n    }\n    return (\n      intendedWidth ?? convertToPx(details.config.defaultWidth, containerWidth)\n    );\n  })();\n  const panelWidth =\n    baseWidth !== undefined ? clampForMode(baseWidth) : undefined;\n\n  const commitWidth = useCallback(\n    (value: number) => {\n      if (controlledWidth === undefined) {\n        setIntendedWidth(value);\n      }\n      details.config.onResize?.(value);\n    },\n    [controlledWidth, details.config],\n  );\n\n  const detailsAriaLabel = intl.formatMessage({\n    defaultMessage: 'Details',\n    id: 'o3A99RFWS+N7bJe8',\n    description: 'Accessible label for the details panel.',\n  });\n\n  const contextValue = useMemo(\n    () => ({\n      collapsed: layout.collapsed,\n      setCollapsed: layout.setCollapsed,\n      preferredLayout: layout.preferredLayoutMode,\n      setPreferredLayout: layout.setPreferredLayoutMode,\n      mode: layout.mode,\n    }),\n    [\n      layout.collapsed,\n      layout.setCollapsed,\n      layout.preferredLayoutMode,\n      layout.setPreferredLayoutMode,\n      layout.mode,\n    ],\n  );\n\n  // Bridge: DetailsLayoutContext.Provider below only covers the split/overlay\n  // DOM rendered by this component. PageLayout.Details children live in a\n  // different React subtree (they're portaled), so the provider doesn't reach\n  // them. Publish the value through the registry so PageLayoutDetails can\n  // re-wrap its portaled children with a provider of the same value.\n  const pageLayoutPortalContext =\n    useContext<PageLayoutPortalContextValue | null>(PageLayoutPortalContext);\n  useSafeLayoutEffect(() => {\n    if (!pageLayoutPortalContext) {\n      return;\n    }\n    pageLayoutPortalContext.registry.register(\n      'detailsLayoutContext',\n      contextValue,\n    );\n  }, [pageLayoutPortalContext, contextValue]);\n\n  const contentClassName = clsx(styles.content, content.domProps.className);\n  const contentNode = (\n    <main ref={content.ref} {...content.domProps} className={contentClassName}>\n      <contentTeleport.Target />\n    </main>\n  );\n\n  const layoutNode = (() => {\n    switch (layout.mode) {\n      case 'collapsed': {\n        return contentNode;\n      }\n      case 'split': {\n        return (\n          <SplitLayout>\n            <SplitLayout.Content minWidth={content.config.minWidth}>\n              <main\n                ref={content.ref}\n                {...content.domProps}\n                className={clsx(styles.content, content.domProps.className)}\n              >\n                <contentTeleport.Target />\n              </main>\n            </SplitLayout.Content>\n            <SplitLayout.Panel\n              {...details.domProps}\n              ref={details.ref}\n              minWidth={details.config.minWidth}\n              maxWidth={details.config.maxWidth}\n              defaultWidth={details.config.defaultWidth}\n              width={panelWidth}\n              onResize={commitWidth}\n              resizable={details.config.resizable}\n              position=\"end\"\n              className={clsx(styles.panel, details.domProps.className)}\n              aria-label={detailsAriaLabel}\n            >\n              <panelTeleport.Target />\n            </SplitLayout.Panel>\n          </SplitLayout>\n        );\n      }\n      case 'overlay': {\n        // Render a hidden panel Target while the container is unmeasured so the\n        // teleport host stays attached across the measure frame.\n        if (layout.containerWidth === 0) {\n          return (\n            <>\n              {contentNode}\n              <div hidden aria-hidden=\"true\">\n                <panelTeleport.Target />\n              </div>\n            </>\n          );\n        }\n        return (\n          <>\n            {contentNode}\n            <Overlay\n              {...details.domProps}\n              ref={details.ref}\n              minWidth={convertToPx(\n                details.config.minWidth,\n                layout.containerWidth,\n              )}\n              maxWidth={\n                details.config.resizable\n                  ? layout.containerWidth - OVERLAY_HANDLE_WIDTH\n                  : layout.containerWidth\n              }\n              width={panelWidth}\n              resizable={details.config.resizable}\n              onResizeEnd={commitWidth}\n            >\n              <panelTeleport.Target />\n            </Overlay>\n          </>\n        );\n      }\n      case 'drawer': {\n        return (\n          <>\n            {contentNode}\n            <Drawer\n              {...details.domProps}\n              ref={details.ref}\n              className={clsx(styles.drawer, details.domProps.className)}\n              aria-label={detailsAriaLabel}\n              isDismissed={layout.collapsed}\n              onDismiss={(state) => layout.setCollapsed(state)}\n              placement=\"right\"\n              width=\"wide\"\n            >\n              <div className={styles.drawerContent}>\n                <panelTeleport.Target />\n              </div>\n            </Drawer>\n          </>\n        );\n      }\n    }\n  })();\n\n  return (\n    <DetailsLayoutContext.Provider value={contextValue}>\n      <panelTeleport.Source>{details.children}</panelTeleport.Source>\n      {layoutNode}\n    </DetailsLayoutContext.Provider>\n  );\n}\n\n/** @internal */\nexport type LayoutRootProps = {\n  details: ExtractedDetailsSlot | null;\n  content: ExtractedContentSlot;\n} & Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'content'>;\n\n/** @internal */\nexport const DetailsLayout = memo(\n  forwardRef<HTMLDivElement, LayoutRootProps>((props, ref) => {\n    const { className: rootClassName, details, content, ...rootProps } = props;\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const rootRef = useMergeRefs([ref, containerRef]);\n\n    const contentTeleport = useTeleport();\n    const panelTeleport = useTeleport();\n\n    return (\n      <>\n        <contentTeleport.Source>{content.children}</contentTeleport.Source>\n        <div\n          {...rootProps}\n          ref={rootRef}\n          className={clsx(styles.layoutRoot, rootClassName)}\n        >\n          {details ? (\n            <DetailsLayoutInner\n              details={details}\n              content={content}\n              containerRef={containerRef}\n              contentTeleport={contentTeleport}\n              panelTeleport={panelTeleport}\n            />\n          ) : (\n            <main\n              ref={content.ref}\n              {...content.domProps}\n              className={clsx(styles.content, content.domProps.className)}\n            >\n              <contentTeleport.Target />\n            </main>\n          )}\n        </div>\n      </>\n    );\n  }),\n);\nDetailsLayout.displayName = 'DetailsLayout (forwardRef)';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/layouts/page-layout/details-layout/DetailsLayout.sty.js

@@ -1,10 +1,10 @@
 import "../../../core/components/app-root/AppRoot.css";
 import "./DetailsLayout.css";
-var content = "_1377n3n2-3-8-0";
-var drawer = "_1377n3n3-3-8-0";
-var drawerContent = "_1377n3n4-3-8-0";
-var layoutRoot = "_1377n3n0-3-8-0";
-var panel = "_1377n3n1-3-8-0";
+var content = "_1377n3n2-3-9-0";
+var drawer = "_1377n3n3-3-9-0";
+var drawerContent = "_1377n3n4-3-9-0";
+var layoutRoot = "_1377n3n0-3-9-0";
+var panel = "_1377n3n1-3-9-0";
 export {
   content,
   drawer,

package/esm/layouts/page-layout/details-layout/DetailsLayout.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/details-layout/DetailsLayout.css.ts"],
-  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport './DetailsLayout.css';\nexport var content = '_1377n3n2-3-8-0';\nexport var drawer = '_1377n3n3-3-8-0';\nexport var drawerContent = '_1377n3n4-3-8-0';\nexport var layoutRoot = '_1377n3n0-3-8-0';\nexport var panel = '_1377n3n1-3-8-0';"],
+  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport './DetailsLayout.css';\nexport var content = '_1377n3n2-3-9-0';\nexport var drawer = '_1377n3n3-3-9-0';\nexport var drawerContent = '_1377n3n4-3-9-0';\nexport var layoutRoot = '_1377n3n0-3-9-0';\nexport var panel = '_1377n3n1-3-9-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,UAAU;AACd,IAAI,SAAS;AACb,IAAI,gBAAgB;AACpB,IAAI,aAAa;AACjB,IAAI,QAAQ;",
   "names": []
 }

package/esm/layouts/page-layout/details-layout/Overlay.css

@@ -1,4 +1,4 @@
-._15qr1eq0-3-8-0 {
+._15qr1eq0-3-9-0 {
   position: absolute;
   z-index: 1;
   right: 0;
@@ -12,19 +12,19 @@
   box-shadow: -1px 0px 0px 0px var(--dt-colors-border-neutral-default, #dadbe4), var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
   display: flex;
 }
-._1jgl8s50-3-8-0 ._15qr1eq0-3-8-0 {
+._1jgl8s50-3-9-0 ._15qr1eq0-3-9-0 {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
 }
-._15qr1eq1-3-8-0 {
+._15qr1eq1-3-9-0 {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
   padding: var(--dt-spacings-size-16, 16px);
   flex-grow: 1;
 }
-._15qr1eq2-3-8-0 {
+._15qr1eq2-3-9-0 {
   height: 100%;
   flex-shrink: 0;
   position: relative;
@@ -33,7 +33,7 @@
   display: flex;
   justify-content: center;
 }
-._1jgl8s50-3-8-0 ._15qr1eq2-3-8-0 {
+._1jgl8s50-3-9-0 ._15qr1eq2-3-9-0 {
   border-radius: 0;
   height: 100%;
   width: var(--dt-spacings-size-8, 8px);
@@ -41,7 +41,7 @@
   transition: none;
   background-color: transparent;
 }
-._1jgl8s50-3-8-0 ._15qr1eq2-3-8-0::before {
+._1jgl8s50-3-9-0 ._15qr1eq2-3-9-0::before {
   content: "";
   position: absolute;
   top: 0;
@@ -52,13 +52,13 @@
   background-color: var(--dt-colors-border-neutral-subdued, #e4e5eb);
   pointer-events: none;
 }
-._1jgl8s50-3-8-0 ._15qr1eq2-3-8-0:hover::before {
+._1jgl8s50-3-9-0 ._15qr1eq2-3-9-0:hover::before {
   background-color: var(--dt-colors-border-neutral-subdued-hover, #d0d1dc);
 }
-._1jgl8s50-3-8-0 ._15qr1eq2-3-8-0:active::before {
+._1jgl8s50-3-9-0 ._15qr1eq2-3-9-0:active::before {
   background-color: var(--dt-colors-border-neutral-subdued-active, #c6c7d5);
 }
-._15qr1eq3-3-8-0 {
+._15qr1eq3-3-9-0 {
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   border: none;
   border-radius: var(--dt-borders-radius-field-default, 6px);
@@ -71,17 +71,17 @@
   transition: height var(--dt-timings-base-default, 300ms) var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
   width: 2px;
 }
-._15qr1eq3-3-8-0:focus-visible {
+._15qr1eq3-3-9-0:focus-visible {
   width: 100%;
 }
-._15qr1eq3-3-8-0:hover._15qr1eq3-3-8-0:focus-visible {
+._15qr1eq3-3-9-0:hover._15qr1eq3-3-9-0:focus-visible {
   width: 2px;
 }
-._15qr1eq3-3-8-0:focus-visible, ._15qr1eq3-3-8-0:hover {
+._15qr1eq3-3-9-0:focus-visible, ._15qr1eq3-3-9-0:hover {
   height: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }
-._15qr1eq3-3-8-0:after {
+._15qr1eq3-3-9-0:after {
   content: "";
   display: block;
   height: 100%;
@@ -92,20 +92,20 @@
   user-select: none;
   width: 100%;
 }
-._1jgl8s50-3-8-0 ._15qr1eq3-3-8-0 {
+._1jgl8s50-3-9-0 ._15qr1eq3-3-9-0 {
   width: 0;
   cursor: ew-resize;
 }
-._1jgl8s50-3-8-0 ._15qr1eq2-3-8-0:has(._15qr1eq3-3-8-0:focus-visible)::before {
+._1jgl8s50-3-9-0 ._15qr1eq2-3-9-0:has(._15qr1eq3-3-9-0:focus-visible)::before {
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   width: var(--dt-borders-width-emphasized, 2px);
 }
-._1jgl8s50-3-8-0 ._15qr1eq0-3-8-0:has(._15qr1eq3-3-8-0:hover) {
+._1jgl8s50-3-9-0 ._15qr1eq0-3-9-0:has(._15qr1eq3-3-9-0:hover) {
   box-shadow: -1px 0px 0px 0px var(--dt-colors-border-neutral-default, #dadbe4), var(--dt-box-shadows-surface-floating-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 6px 14px -2px #2d2e4e3d);
 }
-._1jgl8s50-3-8-0 ._15qr1eq0-3-8-0:has(._15qr1eq3-3-8-0:active) {
+._1jgl8s50-3-9-0 ._15qr1eq0-3-9-0:has(._15qr1eq3-3-9-0:active) {
   box-shadow: -1px 0px 0px 0px var(--dt-colors-border-neutral-default, #dadbe4), var(--dt-box-shadows-surface-floating-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
 }
-._1jgl8s50-3-8-0 ._15qr1eq0-3-8-0:has(._15qr1eq3-3-8-0:focus-visible) {
+._1jgl8s50-3-9-0 ._15qr1eq0-3-9-0:has(._15qr1eq3-3-9-0:focus-visible) {
   box-shadow: -1px 0px 0px 0px var(--dt-colors-border-neutral-default, #dadbe4), var(--dt-box-shadows-surface-floating-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
 }

package/esm/layouts/page-layout/details-layout/Overlay.js

@@ -19,9 +19,10 @@ const Overlay = memo(
       style,
       minWidth = 200,
       maxWidth = Infinity,
-      defaultWidth = 300,
+      width = 300,
       resizable = true,
       onResize,
+      onResizeEnd,
       ...restProps
     } = props;
     const containerRef = useRef(null);
@@ -31,10 +32,10 @@ const Overlay = memo(
       ignoreModality: true
     });
     const dragStartWidth = useRef(null);
-    const clampContentWidth = (width) => clamp(minWidth, width, maxWidth);
-    const clampedDefaultWidth = clampContentWidth(defaultWidth);
-    const [resizedWidth, setResizedWidth] = useState(null);
-    const contentWidth = resizedWidth === null ? clampedDefaultWidth : clampContentWidth(resizedWidth);
+    const lastWidthRef = useRef(null);
+    const clampContentWidth = (value) => clamp(minWidth, value, maxWidth);
+    const [dragWidth, setDragWidth] = useState(null);
+    const contentWidth = dragWidth ?? clampContentWidth(width);
     const overlayWidth = resizable ? contentWidth + OVERLAY_HANDLE_WIDTH : contentWidth;
     useGesture(
       {
@@ -42,7 +43,11 @@ const Overlay = memo(
           dragStartWidth.current = clampContentWidth(contentWidth);
         },
         onDragEnd: () => {
+          const finalWidth = lastWidthRef.current ?? clampContentWidth(contentWidth);
           dragStartWidth.current = null;
+          lastWidthRef.current = null;
+          setDragWidth(null);
+          onResizeEnd?.(finalWidth);
         },
         onDrag: (state) => {
           if (dragStartWidth.current === null) {
@@ -53,7 +58,8 @@ const Overlay = memo(
             dragStartWidth.current + state.movement[0] * -1,
             maxWidth
           );
-          setResizedWidth(nextWidth);
+          lastWidthRef.current = nextWidth;
+          setDragWidth(nextWidth);
           onResize?.(nextWidth);
         }
       },

package/esm/layouts/page-layout/details-layout/Overlay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/details-layout/Overlay.tsx"],
-  "sourcesContent": ["import { useGesture } from '@use-gesture/react';\nimport { clsx } from 'clsx';\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  memo,\n  type PropsWithChildren,\n  useRef,\n  useState,\n} from 'react';\n\nimport * as styles from './Overlay.sty.js';\nimport { useFocusRing } from '../../../core/hooks/useFocusRing.js';\nimport { clamp } from '../../split-layout/width-utils.js';\n\nexport const OVERLAY_HANDLE_WIDTH = 8;\n\n/** @internal */\nexport interface OverlayProps\n  extends PropsWithChildren,\n    ComponentPropsWithoutRef<'div'> {\n  resizable?: boolean;\n  onResize?: (width: number) => void;\n  minWidth?: number;\n  maxWidth?: number;\n  defaultWidth?: number;\n}\n\n/** @internal */\nexport const Overlay = memo(\n  forwardRef<HTMLDivElement, OverlayProps>((props, forwardedRef) => {\n    const {\n      children,\n      className,\n      style,\n      minWidth = 200,\n      maxWidth = Infinity,\n      defaultWidth = 300,\n      resizable = true,\n      onResize,\n      ...restProps\n    } = props;\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const handleRef = useRef<HTMLHRElement>(null);\n\n    const { focusProps, focusClassName } = useFocusRing({\n      focusWithin: true,\n      ignoreModality: true,\n    });\n\n    const dragStartWidth = useRef<number | null>(null);\n    const clampContentWidth = (width: number) =>\n      clamp(minWidth, width, maxWidth);\n    const clampedDefaultWidth = clampContentWidth(defaultWidth);\n    const [resizedWidth, setResizedWidth] = useState<number | null>(null);\n\n    const contentWidth =\n      resizedWidth === null\n        ? clampedDefaultWidth\n        : clampContentWidth(resizedWidth);\n\n    const overlayWidth = resizable\n      ? contentWidth + OVERLAY_HANDLE_WIDTH\n      : contentWidth;\n\n    useGesture(\n      {\n        onDragStart: () => {\n          dragStartWidth.current = clampContentWidth(contentWidth);\n        },\n        onDragEnd: () => {\n          dragStartWidth.current = null;\n        },\n        onDrag: (state) => {\n          if (dragStartWidth.current === null) {\n            return;\n          }\n\n          const nextWidth = clamp(\n            minWidth,\n            dragStartWidth.current + state.movement[0] * -1,\n            maxWidth,\n          );\n          setResizedWidth(nextWidth);\n          onResize?.(nextWidth);\n        },\n      },\n      { target: handleRef },\n    );\n\n    return (\n      <div\n        role=\"dialog\"\n        className={styles.overlay}\n        style={{ ...style, width: overlayWidth }}\n        ref={containerRef}\n      >\n        {resizable ? (\n          <div className={styles.handleContainer}>\n            <hr\n              {...focusProps}\n              ref={handleRef}\n              className={clsx(styles.resizeHandle, focusClassName)}\n              tabIndex={0}\n            />\n          </div>\n        ) : null}\n        <div\n          {...restProps}\n          ref={forwardedRef}\n          className={clsx(styles.overlayContent, className)}\n        >\n          {children}\n        </div>\n      </div>\n    );\n  }),\n);\nOverlay.displayName = 'Overlay';\n"],
-  "mappings": "AA4FM,SAQM,KARN;AA5FN,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB;AAAA,EAEE;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEP,YAAY,YAAY;AACxB,SAAS,oBAAoB;AAC7B,SAAS,aAAa;AAEf,MAAM,uBAAuB;AAc7B,MAAM,UAAU;AAAA,EACrB,WAAyC,CAAC,OAAO,iBAAiB;AAChE,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,WAAW;AAAA,MACX,eAAe;AAAA,MACf,YAAY;AAAA,MACZ;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,eAAe,OAAuB,IAAI;AAChD,UAAM,YAAY,OAAsB,IAAI;AAE5C,UAAM,EAAE,YAAY,eAAe,IAAI,aAAa;AAAA,MAClD,aAAa;AAAA,MACb,gBAAgB;AAAA,IAClB,CAAC;AAED,UAAM,iBAAiB,OAAsB,IAAI;AACjD,UAAM,oBAAoB,CAAC,UACzB,MAAM,UAAU,OAAO,QAAQ;AACjC,UAAM,sBAAsB,kBAAkB,YAAY;AAC1D,UAAM,CAAC,cAAc,eAAe,IAAI,SAAwB,IAAI;AAEpE,UAAM,eACJ,iBAAiB,OACb,sBACA,kBAAkB,YAAY;AAEpC,UAAM,eAAe,YACjB,eAAe,uBACf;AAEJ;AAAA,MACE;AAAA,QACE,aAAa,MAAM;AACjB,yBAAe,UAAU,kBAAkB,YAAY;AAAA,QACzD;AAAA,QACA,WAAW,MAAM;AACf,yBAAe,UAAU;AAAA,QAC3B;AAAA,QACA,QAAQ,CAAC,UAAU;AACjB,cAAI,eAAe,YAAY,MAAM;AACnC;AAAA,UACF;AAEA,gBAAM,YAAY;AAAA,YAChB;AAAA,YACA,eAAe,UAAU,MAAM,SAAS,CAAC,IAAI;AAAA,YAC7C;AAAA,UACF;AACA,0BAAgB,SAAS;AACzB,qBAAW,SAAS;AAAA,QACtB;AAAA,MACF;AAAA,MACA,EAAE,QAAQ,UAAU;AAAA,IACtB;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,OAAO;AAAA,QAClB,OAAO,EAAE,GAAG,OAAO,OAAO,aAAa;AAAA,QACvC,KAAK;AAAA,QAEJ;AAAA,sBACC,oBAAC,SAAI,WAAW,OAAO,iBACrB;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,KAAK;AAAA,cACL,WAAW,KAAK,OAAO,cAAc,cAAc;AAAA,cACnD,UAAU;AAAA;AAAA,UACZ,GACF,IACE;AAAA,UACJ;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,KAAK;AAAA,cACL,WAAW,KAAK,OAAO,gBAAgB,SAAS;AAAA,cAE/C;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ,CAAC;AACH;AACA,QAAQ,cAAc;",
+  "sourcesContent": ["import { useGesture } from '@use-gesture/react';\nimport { clsx } from 'clsx';\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  memo,\n  type PropsWithChildren,\n  useRef,\n  useState,\n} from 'react';\n\nimport * as styles from './Overlay.sty.js';\nimport { useFocusRing } from '../../../core/hooks/useFocusRing.js';\nimport { clamp } from '../../split-layout/width-utils.js';\n\nexport const OVERLAY_HANDLE_WIDTH = 8;\n\n/** @internal */\nexport interface OverlayProps\n  extends PropsWithChildren,\n    ComponentPropsWithoutRef<'div'> {\n  resizable?: boolean;\n  onResize?: (width: number) => void;\n  onResizeEnd?: (width: number) => void;\n  minWidth?: number;\n  maxWidth?: number;\n  /**\n   * The controlled content width in px. The overlay renders this width except\n   * while the user is actively dragging the resize handle.\n   */\n  width?: number;\n}\n\n/** @internal */\nexport const Overlay = memo(\n  forwardRef<HTMLDivElement, OverlayProps>((props, forwardedRef) => {\n    const {\n      children,\n      className,\n      style,\n      minWidth = 200,\n      maxWidth = Infinity,\n      width = 300,\n      resizable = true,\n      onResize,\n      onResizeEnd,\n      ...restProps\n    } = props;\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const handleRef = useRef<HTMLHRElement>(null);\n\n    const { focusProps, focusClassName } = useFocusRing({\n      focusWithin: true,\n      ignoreModality: true,\n    });\n\n    const dragStartWidth = useRef<number | null>(null);\n    const lastWidthRef = useRef<number | null>(null);\n    const clampContentWidth = (value: number) =>\n      clamp(minWidth, value, maxWidth);\n\n    // While the user is actively dragging, the overlay owns its width locally\n    // for a smooth interaction; otherwise the width is fully controlled by the\n    // `width` prop. Committing the drag clears the local value so the\n    // controlled width takes over again.\n    const [dragWidth, setDragWidth] = useState<number | null>(null);\n\n    const contentWidth = dragWidth ?? clampContentWidth(width);\n\n    const overlayWidth = resizable\n      ? contentWidth + OVERLAY_HANDLE_WIDTH\n      : contentWidth;\n\n    useGesture(\n      {\n        onDragStart: () => {\n          dragStartWidth.current = clampContentWidth(contentWidth);\n        },\n        onDragEnd: () => {\n          const finalWidth =\n            lastWidthRef.current ?? clampContentWidth(contentWidth);\n          dragStartWidth.current = null;\n          lastWidthRef.current = null;\n          setDragWidth(null);\n          onResizeEnd?.(finalWidth);\n        },\n        onDrag: (state) => {\n          if (dragStartWidth.current === null) {\n            return;\n          }\n\n          const nextWidth = clamp(\n            minWidth,\n            dragStartWidth.current + state.movement[0] * -1,\n            maxWidth,\n          );\n          lastWidthRef.current = nextWidth;\n          setDragWidth(nextWidth);\n          onResize?.(nextWidth);\n        },\n      },\n      { target: handleRef },\n    );\n\n    return (\n      <div\n        role=\"dialog\"\n        className={styles.overlay}\n        style={{ ...style, width: overlayWidth }}\n        ref={containerRef}\n      >\n        {resizable ? (\n          <div className={styles.handleContainer}>\n            <hr\n              {...focusProps}\n              ref={handleRef}\n              className={clsx(styles.resizeHandle, focusClassName)}\n              tabIndex={0}\n            />\n          </div>\n        ) : null}\n        <div\n          {...restProps}\n          ref={forwardedRef}\n          className={clsx(styles.overlayContent, className)}\n        >\n          {children}\n        </div>\n      </div>\n    );\n  }),\n);\nOverlay.displayName = 'Overlay';\n"],
+  "mappings": "AA0GM,SAQM,KARN;AA1GN,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB;AAAA,EAEE;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEP,YAAY,YAAY;AACxB,SAAS,oBAAoB;AAC7B,SAAS,aAAa;AAEf,MAAM,uBAAuB;AAmB7B,MAAM,UAAU;AAAA,EACrB,WAAyC,CAAC,OAAO,iBAAiB;AAChE,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,eAAe,OAAuB,IAAI;AAChD,UAAM,YAAY,OAAsB,IAAI;AAE5C,UAAM,EAAE,YAAY,eAAe,IAAI,aAAa;AAAA,MAClD,aAAa;AAAA,MACb,gBAAgB;AAAA,IAClB,CAAC;AAED,UAAM,iBAAiB,OAAsB,IAAI;AACjD,UAAM,eAAe,OAAsB,IAAI;AAC/C,UAAM,oBAAoB,CAAC,UACzB,MAAM,UAAU,OAAO,QAAQ;AAMjC,UAAM,CAAC,WAAW,YAAY,IAAI,SAAwB,IAAI;AAE9D,UAAM,eAAe,aAAa,kBAAkB,KAAK;AAEzD,UAAM,eAAe,YACjB,eAAe,uBACf;AAEJ;AAAA,MACE;AAAA,QACE,aAAa,MAAM;AACjB,yBAAe,UAAU,kBAAkB,YAAY;AAAA,QACzD;AAAA,QACA,WAAW,MAAM;AACf,gBAAM,aACJ,aAAa,WAAW,kBAAkB,YAAY;AACxD,yBAAe,UAAU;AACzB,uBAAa,UAAU;AACvB,uBAAa,IAAI;AACjB,wBAAc,UAAU;AAAA,QAC1B;AAAA,QACA,QAAQ,CAAC,UAAU;AACjB,cAAI,eAAe,YAAY,MAAM;AACnC;AAAA,UACF;AAEA,gBAAM,YAAY;AAAA,YAChB;AAAA,YACA,eAAe,UAAU,MAAM,SAAS,CAAC,IAAI;AAAA,YAC7C;AAAA,UACF;AACA,uBAAa,UAAU;AACvB,uBAAa,SAAS;AACtB,qBAAW,SAAS;AAAA,QACtB;AAAA,MACF;AAAA,MACA,EAAE,QAAQ,UAAU;AAAA,IACtB;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,OAAO;AAAA,QAClB,OAAO,EAAE,GAAG,OAAO,OAAO,aAAa;AAAA,QACvC,KAAK;AAAA,QAEJ;AAAA,sBACC,oBAAC,SAAI,WAAW,OAAO,iBACrB;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,KAAK;AAAA,cACL,WAAW,KAAK,OAAO,cAAc,cAAc;AAAA,cACnD,UAAU;AAAA;AAAA,UACZ,GACF,IACE;AAAA,UACJ;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,KAAK;AAAA,cACL,WAAW,KAAK,OAAO,gBAAgB,SAAS;AAAA,cAE/C;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ,CAAC;AACH;AACA,QAAQ,cAAc;",
   "names": []
 }

package/esm/layouts/page-layout/details-layout/Overlay.sty.js

@@ -1,9 +1,9 @@
 import "../../../core/components/app-root/AppRoot.css";
 import "./Overlay.css";
-var handleContainer = "_15qr1eq2-3-8-0";
-var overlay = "_15qr1eq0-3-8-0";
-var overlayContent = "_15qr1eq1-3-8-0";
-var resizeHandle = "_15qr1eq3-3-8-0";
+var handleContainer = "_15qr1eq2-3-9-0";
+var overlay = "_15qr1eq0-3-9-0";
+var overlayContent = "_15qr1eq1-3-9-0";
+var resizeHandle = "_15qr1eq3-3-9-0";
 export {
   handleContainer,
   overlay,

package/esm/layouts/page-layout/details-layout/Overlay.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/details-layout/Overlay.css.ts"],
-  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport './Overlay.css';\nexport var handleContainer = '_15qr1eq2-3-8-0';\nexport var overlay = '_15qr1eq0-3-8-0';\nexport var overlayContent = '_15qr1eq1-3-8-0';\nexport var resizeHandle = '_15qr1eq3-3-8-0';"],
+  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport './Overlay.css';\nexport var handleContainer = '_15qr1eq2-3-9-0';\nexport var overlay = '_15qr1eq0-3-9-0';\nexport var overlayContent = '_15qr1eq1-3-9-0';\nexport var resizeHandle = '_15qr1eq3-3-9-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,kBAAkB;AACtB,IAAI,UAAU;AACd,IAAI,iBAAiB;AACrB,IAAI,eAAe;",
   "names": []
 }

package/esm/layouts/page-layout/details-layout/useLayoutState.js

@@ -16,7 +16,9 @@ function useLayoutState({
       onChange: details.config.onCollapsedChange
     },
     breakpoint: details.config.breakpoint,
-    containerRef
+    containerRef,
+    onBreakpointTransition: details.config.onBreakpointTransition,
+    autoCollapse: false
   });
   let mode = preferredLayoutMode ?? "split";
   if (collapsed) {

package/esm/layouts/page-layout/details-layout/useLayoutState.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/details-layout/useLayoutState.ts"],
-  "sourcesContent": ["import { type RefObject } from 'react';\n\nimport type { RenderedLayout } from './DetailsLayoutContext.js';\nimport type { ExtractedDetailsSlot } from './slots.js';\nimport { useControllableState } from '../../../core/hooks/useControllableState.js';\nimport { useBreakpointCollapse } from '../shared/useBreakpointCollapse.js';\n\n/** @internal */\nexport function useLayoutState({\n  details,\n  containerRef,\n}: {\n  details: ExtractedDetailsSlot;\n  containerRef: RefObject<HTMLDivElement>;\n}) {\n  const [preferredLayoutMode, setPreferredLayoutMode] = useControllableState({\n    value: details.config.layout,\n    defaultValue: details.config.defaultLayout,\n    onChange: details.config.onLayoutChange,\n  });\n\n  const { containerWidth, collapsed, setCollapsed, isBelowBreakpoint } =\n    useBreakpointCollapse({\n      collapsed: {\n        value: details.config.collapsed,\n        defaultValue: details.config.defaultCollapsed ?? false,\n        onChange: details.config.onCollapsedChange,\n      },\n      breakpoint: details.config.breakpoint,\n      containerRef,\n    });\n\n  let mode: RenderedLayout = preferredLayoutMode ?? 'split';\n  if (collapsed) {\n    mode = 'collapsed';\n  }\n  if (isBelowBreakpoint) {\n    mode = 'drawer';\n  }\n\n  return {\n    containerWidth,\n    collapsed,\n    setCollapsed,\n    preferredLayoutMode,\n    setPreferredLayoutMode,\n    mode,\n  };\n}\n"],
-  "mappings": "AAIA,SAAS,4BAA4B;AACrC,SAAS,6BAA6B;AAG/B,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AACF,GAGG;AACD,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,qBAAqB;AAAA,IACzE,OAAO,QAAQ,OAAO;AAAA,IACtB,cAAc,QAAQ,OAAO;AAAA,IAC7B,UAAU,QAAQ,OAAO;AAAA,EAC3B,CAAC;AAED,QAAM,EAAE,gBAAgB,WAAW,cAAc,kBAAkB,IACjE,sBAAsB;AAAA,IACpB,WAAW;AAAA,MACT,OAAO,QAAQ,OAAO;AAAA,MACtB,cAAc,QAAQ,OAAO,oBAAoB;AAAA,MACjD,UAAU,QAAQ,OAAO;AAAA,IAC3B;AAAA,IACA,YAAY,QAAQ,OAAO;AAAA,IAC3B;AAAA,EACF,CAAC;AAEH,MAAI,OAAuB,uBAAuB;AAClD,MAAI,WAAW;AACb,WAAO;AAAA,EACT;AACA,MAAI,mBAAmB;AACrB,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { type RefObject } from 'react';\n\nimport type { RenderedLayout } from './DetailsLayoutContext.js';\nimport type { ExtractedDetailsSlot } from './slots.js';\nimport { useControllableState } from '../../../core/hooks/useControllableState.js';\nimport { useBreakpointCollapse } from '../shared/useBreakpointCollapse.js';\n\n/** @internal */\nexport function useLayoutState({\n  details,\n  containerRef,\n}: {\n  details: ExtractedDetailsSlot;\n  containerRef: RefObject<HTMLDivElement>;\n}) {\n  const [preferredLayoutMode, setPreferredLayoutMode] = useControllableState({\n    value: details.config.layout,\n    defaultValue: details.config.defaultLayout,\n    onChange: details.config.onLayoutChange,\n  });\n\n  const { containerWidth, collapsed, setCollapsed, isBelowBreakpoint } =\n    useBreakpointCollapse({\n      collapsed: {\n        value: details.config.collapsed,\n        defaultValue: details.config.defaultCollapsed ?? false,\n        onChange: details.config.onCollapsedChange,\n      },\n      breakpoint: details.config.breakpoint,\n      containerRef,\n      onBreakpointTransition: details.config.onBreakpointTransition,\n      autoCollapse: false,\n    });\n\n  let mode: RenderedLayout = preferredLayoutMode ?? 'split';\n  if (collapsed) {\n    mode = 'collapsed';\n  }\n  if (isBelowBreakpoint) {\n    mode = 'drawer';\n  }\n\n  return {\n    containerWidth,\n    collapsed,\n    setCollapsed,\n    preferredLayoutMode,\n    setPreferredLayoutMode,\n    mode,\n  };\n}\n"],
+  "mappings": "AAIA,SAAS,4BAA4B;AACrC,SAAS,6BAA6B;AAG/B,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AACF,GAGG;AACD,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,qBAAqB;AAAA,IACzE,OAAO,QAAQ,OAAO;AAAA,IACtB,cAAc,QAAQ,OAAO;AAAA,IAC7B,UAAU,QAAQ,OAAO;AAAA,EAC3B,CAAC;AAED,QAAM,EAAE,gBAAgB,WAAW,cAAc,kBAAkB,IACjE,sBAAsB;AAAA,IACpB,WAAW;AAAA,MACT,OAAO,QAAQ,OAAO;AAAA,MACtB,cAAc,QAAQ,OAAO,oBAAoB;AAAA,MACjD,UAAU,QAAQ,OAAO;AAAA,IAC3B;AAAA,IACA,YAAY,QAAQ,OAAO;AAAA,IAC3B;AAAA,IACA,wBAAwB,QAAQ,OAAO;AAAA,IACvC,cAAc;AAAA,EAChB,CAAC;AAEH,MAAI,OAAuB,uBAAuB;AAClD,MAAI,WAAW;AACb,WAAO;AAAA,EACT;AACA,MAAI,mBAAmB;AACrB,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/layouts/page-layout/shared/portal-slots.js

@@ -14,8 +14,18 @@ import {
 } from "./slot-defaults.js";
 import { useRegisteredSlot } from "./useRegisteredSlot.js";
 import { DetailsControlBar } from "../details-layout/DetailsControlBar.js";
-import { DetailsLayoutContext } from "../details-layout/DetailsLayoutContext.js";
+import {
+  DetailsLayoutContext
+} from "../details-layout/DetailsLayoutContext.js";
 const toRef = (ref) => ref ?? void 0;
+const noop = () => void 0;
+const PENDING_DETAILS_CONTEXT = {
+  collapsed: false,
+  setCollapsed: noop,
+  preferredLayout: "split",
+  setPreferredLayout: noop,
+  mode: "split"
+};
 function useShallowStable(value) {
   const ref = useRef(value);
   const prev = ref.current;
@@ -58,6 +68,7 @@ const PageLayoutSidebar = forwardRef(
     collapsed,
     defaultCollapsed = sidebarDefaults.defaultCollapsed,
     onCollapsedChange,
+    onBreakpointTransition,
     breakpoint = sidebarDefaults.breakpoint,
     onResize,
     ...domProps
@@ -75,6 +86,7 @@ const PageLayoutSidebar = forwardRef(
           collapsed,
           defaultCollapsed,
           onCollapsedChange,
+          onBreakpointTransition,
           breakpoint,
           onResize
         },
@@ -89,6 +101,7 @@ const PageLayoutSidebar = forwardRef(
         collapsed,
         defaultCollapsed,
         onCollapsedChange,
+        onBreakpointTransition,
         breakpoint,
         onResize,
         stableDomProps,
@@ -130,11 +143,13 @@ const PageLayoutDetails = forwardRef(
     collapsed,
     defaultCollapsed = detailsDefaults.defaultCollapsed,
     onCollapsedChange,
+    onBreakpointTransition,
     layout,
     defaultLayout = detailsDefaults.defaultLayout,
     onLayoutChange,
     breakpoint = detailsDefaults.breakpoint,
     onResize,
+    width,
     ...domProps
   }, ref) {
     const { hosts, registry } = usePageLayoutPortalContext();
@@ -150,11 +165,13 @@ const PageLayoutDetails = forwardRef(
           collapsed,
           defaultCollapsed,
           onCollapsedChange,
+          onBreakpointTransition,
           layout,
           defaultLayout,
           onLayoutChange,
           breakpoint,
-          onResize
+          onResize,
+          width
         },
         domProps: stableDomProps,
         ref: refValue
@@ -167,11 +184,13 @@ const PageLayoutDetails = forwardRef(
         collapsed,
         defaultCollapsed,
         onCollapsedChange,
+        onBreakpointTransition,
         layout,
         defaultLayout,
         onLayoutChange,
         breakpoint,
         onResize,
+        width,
         stableDomProps,
         refValue
       ]
@@ -181,8 +200,9 @@ const PageLayoutDetails = forwardRef(
       registry.subscribe,
       () => registry.getSnapshot().detailsLayoutContext
     );
+    const providedContext = detailsLayoutContext ?? PENDING_DETAILS_CONTEXT;
     return createPortal(
-      /* @__PURE__ */ jsx(DetailsLayoutContext.Provider, { value: detailsLayoutContext, children }),
+      /* @__PURE__ */ jsx(DetailsLayoutContext.Provider, { value: providedContext, children }),
       hosts.details
     );
   }