@dynatrace/strato-components 3.7.1 → 3.9.0

package/esm/layouts/page/panel.css

@@ -1,37 +1,37 @@
-._1p91g301-3-7-1 {
+._1p91g301-3-9-0 {
   box-sizing: border-box;
   display: flex;
   max-width: 100%;
 }
-._1p91g302-3-7-1 {
+._1p91g302-3-9-0 {
   width: 0;
   position: relative;
 }
-._1p91g303-3-7-1 {
+._1p91g303-3-9-0 {
   flex-shrink: 0;
   position: relative;
   width: 8px;
 }
-._1p91g304-3-7-1 {
+._1p91g304-3-9-0 {
   box-sizing: border-box;
   padding: 0;
 }
-._1p91g305-3-7-1 {
+._1p91g305-3-9-0 {
   box-sizing: border-box;
   padding: var(--dt-spacings-size-16, 16px);
   height: 100%;
 }
-._1p91g306-3-7-1 {
+._1p91g306-3-9-0 {
   line-height: 0;
 }
-._1p91g307-3-7-1 {
+._1p91g307-3-9-0 {
   box-sizing: border-box;
   flex-grow: 1;
   overflow-y: auto;
   padding: var(--dt-spacings-size-16, 16px);
   position: relative;
 }
-._1p91g308-3-7-1 {
+._1p91g308-3-9-0 {
   flex-shrink: 0;
   width: var(--dt-spacings-size-8, 8px);
   position: relative;
@@ -40,7 +40,7 @@
   height: 100%;
   justify-content: center;
 }
-._1jgl8s50-3-7-1 ._1p91g308-3-7-1 {
+._1jgl8s50-3-9-0 ._1p91g308-3-9-0 {
   border-radius: 0;
   height: 100%;
   width: var(--dt-spacings-size-8, 8px);
@@ -50,7 +50,7 @@
   margin-inline: calc(var(--dt-spacings-size-8, 8px) / -2);
   z-index: 1;
 }
-._1jgl8s50-3-7-1 ._1p91g308-3-7-1::before {
+._1jgl8s50-3-9-0 ._1p91g308-3-9-0::before {
   content: "";
   position: absolute;
   top: 0;
@@ -61,13 +61,13 @@
   background-color: var(--dt-colors-border-neutral-subdued, #e4e5eb);
   pointer-events: none;
 }
-._1jgl8s50-3-7-1 ._1p91g308-3-7-1:hover::before {
+._1jgl8s50-3-9-0 ._1p91g308-3-9-0:hover::before {
   background-color: var(--dt-colors-border-neutral-subdued-hover, #d0d1dc);
 }
-._1jgl8s50-3-7-1 ._1p91g308-3-7-1:active::before {
+._1jgl8s50-3-9-0 ._1p91g308-3-9-0:active::before {
   background-color: var(--dt-colors-border-neutral-subdued-active, #c6c7d5);
 }
-._1p91g309-3-7-1 {
+._1p91g309-3-9-0 {
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   border: none;
   border-radius: var(--dt-borders-radius-field-default, 6px);
@@ -80,17 +80,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;
 }
-._1p91g309-3-7-1:focus-visible {
+._1p91g309-3-9-0:focus-visible {
   width: 100%;
 }
-._1p91g309-3-7-1:hover._1p91g309-3-7-1:focus-visible {
+._1p91g309-3-9-0:hover._1p91g309-3-9-0:focus-visible {
   width: 2px;
 }
-._1p91g309-3-7-1:focus-visible, ._1p91g309-3-7-1:hover {
+._1p91g309-3-9-0:focus-visible, ._1p91g309-3-9-0:hover {
   height: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }
-._1p91g309-3-7-1:after {
+._1p91g309-3-9-0:after {
   content: "";
   display: block;
   height: 100%;
@@ -101,11 +101,11 @@
   user-select: none;
   width: 100%;
 }
-._1jgl8s50-3-7-1 ._1p91g309-3-7-1 {
+._1jgl8s50-3-9-0 ._1p91g309-3-9-0 {
   width: 0;
   cursor: ew-resize;
 }
-._1jgl8s50-3-7-1 ._1p91g308-3-7-1:has(._1p91g309-3-7-1:focus-visible)::before {
+._1jgl8s50-3-9-0 ._1p91g308-3-9-0:has(._1p91g309-3-9-0:focus-visible)::before {
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   width: var(--dt-borders-width-emphasized, 2px);
 }

package/esm/layouts/page/panel.sty.js

@@ -1,16 +1,16 @@
 import "../../core/components/app-root/AppRoot.css";
 import "./panel.css";
 var GAP_SIZE = 8;
-var buttonIcon = "_1p91g306-3-7-1";
-var dismissedPanel = "_1p91g302-3-7-1";
-var drawer = "_1p91g304-3-7-1";
-var drawerContent = "_1p91g305-3-7-1";
-var gap = "_1p91g303-3-7-1";
-var panelContent = "_1p91g307-3-7-1";
-var resizeHandle = "_1p91g309-3-7-1";
-var resizeHandleContainer = "_1p91g308-3-7-1";
-var root = "_1p91g301-3-7-1";
-var rtlPanel = "_1p91g300-3-7-1";
+var buttonIcon = "_1p91g306-3-9-0";
+var dismissedPanel = "_1p91g302-3-9-0";
+var drawer = "_1p91g304-3-9-0";
+var drawerContent = "_1p91g305-3-9-0";
+var gap = "_1p91g303-3-9-0";
+var panelContent = "_1p91g307-3-9-0";
+var resizeHandle = "_1p91g309-3-9-0";
+var resizeHandleContainer = "_1p91g308-3-9-0";
+var root = "_1p91g301-3-9-0";
+var rtlPanel = "_1p91g300-3-9-0";
 export {
   GAP_SIZE,
   buttonIcon,

package/esm/layouts/page/panel.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/panel.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './panel.css';\nexport var GAP_SIZE = 8;\nexport var buttonIcon = '_1p91g306-3-7-1';\nexport var dismissedPanel = '_1p91g302-3-7-1';\nexport var drawer = '_1p91g304-3-7-1';\nexport var drawerContent = '_1p91g305-3-7-1';\nexport var gap = '_1p91g303-3-7-1';\nexport var panelContent = '_1p91g307-3-7-1';\nexport var resizeHandle = '_1p91g309-3-7-1';\nexport var resizeHandleContainer = '_1p91g308-3-7-1';\nexport var root = '_1p91g301-3-7-1';\nexport var rtlPanel = '_1p91g300-3-7-1';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './panel.css';\nexport var GAP_SIZE = 8;\nexport var buttonIcon = '_1p91g306-3-9-0';\nexport var dismissedPanel = '_1p91g302-3-9-0';\nexport var drawer = '_1p91g304-3-9-0';\nexport var drawerContent = '_1p91g305-3-9-0';\nexport var gap = '_1p91g303-3-9-0';\nexport var panelContent = '_1p91g307-3-9-0';\nexport var resizeHandle = '_1p91g309-3-9-0';\nexport var resizeHandleContainer = '_1p91g308-3-9-0';\nexport var root = '_1p91g301-3-9-0';\nexport var rtlPanel = '_1p91g300-3-9-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,WAAW;AACf,IAAI,aAAa;AACjB,IAAI,iBAAiB;AACrB,IAAI,SAAS;AACb,IAAI,gBAAgB;AACpB,IAAI,MAAM;AACV,IAAI,eAAe;AACnB,IAAI,eAAe;AACnB,IAAI,wBAAwB;AAC5B,IAAI,OAAO;AACX,IAAI,WAAW;",
   "names": []
 }

package/esm/layouts/page-layout/PageLayout.css

@@ -1,4 +1,4 @@
-._193kgwe0-3-7-1 {
+._193kgwe0-3-9-0 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
   display: grid;
   height: 100dvh;
@@ -7,36 +7,36 @@
   grid-template-rows: min-content minmax(0px, 1fr);
   grid-template-areas: "header" "content";
 }
-._1jgl8s50-3-7-1 ._193kgwe0-3-7-1 {
+._1jgl8s50-3-9-0 ._193kgwe0-3-9-0 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
 }
-._193kgwe1-3-7-1 {
+._193kgwe1-3-9-0 {
   grid-area: header;
   padding: var(--dt-spacings-size-8, 8px);
   min-width: 0;
-  ._1jgl8s50-3-7-1 & {
+  ._1jgl8s50-3-9-0 & {
     border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-subdued, #e4e5eb);
   }
 }
-._193kgwe2-3-7-1 {
+._193kgwe2-3-9-0 {
   grid-area: content;
   min-width: 0;
 }
-._193kgwe3-3-7-1 {
+._193kgwe3-3-9-0 {
   padding: var(--dt-spacings-size-16, 16px);
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   height: 100%;
   isolation: isolate;
 }
-._193kgwe4-3-7-1 {
+._193kgwe4-3-9-0 {
   border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1jgl8s50-3-7-1 ._193kgwe4-3-7-1 {
+._1jgl8s50-3-9-0 ._193kgwe4-3-9-0 {
   border-top-left-radius: 0;
 }
-._193kgwe5-3-7-1 {
+._193kgwe5-3-9-0 {
   border-top-right-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1jgl8s50-3-7-1 ._193kgwe5-3-7-1 {
+._1jgl8s50-3-9-0 ._193kgwe5-3-9-0 {
   border-top-right-radius: 0;
 }

package/esm/layouts/page-layout/PageLayout.sty.js

@@ -1,11 +1,11 @@
 import "../../core/components/app-root/AppRoot.css";
 import "./PageLayout.css";
-var content = "_193kgwe3-3-7-1";
-var contentContainer = "_193kgwe2-3-7-1";
-var contentTopLeftRadius = "_193kgwe4-3-7-1";
-var contentTopRightRadius = "_193kgwe5-3-7-1";
-var headerContainer = "_193kgwe1-3-7-1";
-var layoutRoot = "_193kgwe0-3-7-1";
+var content = "_193kgwe3-3-9-0";
+var contentContainer = "_193kgwe2-3-9-0";
+var contentTopLeftRadius = "_193kgwe4-3-9-0";
+var contentTopRightRadius = "_193kgwe5-3-9-0";
+var headerContainer = "_193kgwe1-3-9-0";
+var layoutRoot = "_193kgwe0-3-9-0";
 export {
   content,
   contentContainer,

package/esm/layouts/page-layout/PageLayout.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page-layout/PageLayout.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './PageLayout.css';\nexport var content = '_193kgwe3-3-7-1';\nexport var contentContainer = '_193kgwe2-3-7-1';\nexport var contentTopLeftRadius = '_193kgwe4-3-7-1';\nexport var contentTopRightRadius = '_193kgwe5-3-7-1';\nexport var headerContainer = '_193kgwe1-3-7-1';\nexport var layoutRoot = '_193kgwe0-3-7-1';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './PageLayout.css';\nexport var content = '_193kgwe3-3-9-0';\nexport var contentContainer = '_193kgwe2-3-9-0';\nexport var contentTopLeftRadius = '_193kgwe4-3-9-0';\nexport var contentTopRightRadius = '_193kgwe5-3-9-0';\nexport var headerContainer = '_193kgwe1-3-9-0';\nexport var layoutRoot = '_193kgwe0-3-9-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,UAAU;AACd,IAAI,mBAAmB;AACvB,IAAI,uBAAuB;AAC3B,IAAI,wBAAwB;AAC5B,IAAI,kBAAkB;AACtB,IAAI,aAAa;",
   "names": []
 }

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

@@ -1,15 +1,15 @@
-._1y5ro0l0-3-7-1 {
+._1y5ro0l0-3-9-0 {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: var(--dt-spacings-size-8, 8px);
 }
-._1y5ro0l1-3-7-1 {
+._1y5ro0l1-3-9-0 {
   display: flex;
   align-items: center;
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1y5ro0l2-3-7-1 {
+._1y5ro0l2-3-9-0 {
   display: flex;
   align-items: center;
   gap: var(--dt-spacings-size-4, 4px);

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

@@ -1,7 +1,7 @@
 import "./DetailsControlBar.css";
-var controlBar = "_1y5ro0l0-3-7-1";
-var customActions = "_1y5ro0l1-3-7-1";
-var defaultActions = "_1y5ro0l2-3-7-1";
+var controlBar = "_1y5ro0l0-3-9-0";
+var customActions = "_1y5ro0l1-3-9-0";
+var defaultActions = "_1y5ro0l2-3-9-0";
 export {
   controlBar,
   customActions,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/details-layout/DetailsControlBar.css.ts"],
-  "sourcesContent": ["import './DetailsControlBar.css';\nexport var controlBar = '_1y5ro0l0-3-7-1';\nexport var customActions = '_1y5ro0l1-3-7-1';\nexport var defaultActions = '_1y5ro0l2-3-7-1';"],
+  "sourcesContent": ["import './DetailsControlBar.css';\nexport var controlBar = '_1y5ro0l0-3-9-0';\nexport var customActions = '_1y5ro0l1-3-9-0';\nexport var defaultActions = '_1y5ro0l2-3-9-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,aAAa;AACjB,IAAI,gBAAgB;AACpB,IAAI,iBAAiB;",
   "names": []
 }

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

@@ -1,10 +1,10 @@
-._1377n3n0-3-7-1 {
+._1377n3n0-3-9-0 {
   height: 100%;
   overflow: hidden;
   position: relative;
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._1377n3n1-3-7-1 {
+._1377n3n1-3-9-0 {
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
@@ -15,19 +15,19 @@
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1jgl8s50-3-7-1 ._1377n3n1-3-7-1 {
+._1jgl8s50-3-9-0 ._1377n3n1-3-9-0 {
   border-top-left-radius: 0;
 }
-._1377n3n2-3-7-1 {
+._1377n3n2-3-9-0 {
   box-sizing: border-box;
   height: 100%;
   overflow-y: auto;
 }
-._1377n3n3-3-7-1 {
+._1377n3n3-3-9-0 {
   box-sizing: border-box;
   padding: 0;
 }
-._1377n3n4-3-7-1 {
+._1377n3n4-3-9-0 {
   box-sizing: border-box;
   padding: var(--dt-spacings-size-16, 16px);
   height: 100%;

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",
@@ -62,15 +117,8 @@ function DetailsLayoutInner({
       contextValue
     );
   }, [pageLayoutPortalContext, contextValue]);
-  const contentNode = /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: content.ref,
-      ...content.domProps,
-      className: clsx(styles.content, content.domProps.className),
-      children: /* @__PURE__ */ jsx(contentTeleport.Target, {})
-    }
-  );
+  const contentClassName = clsx(styles.content, content.domProps.className);
+  const contentNode = /* @__PURE__ */ jsx("main", { ref: content.ref, ...content.domProps, className: contentClassName, children: /* @__PURE__ */ jsx(contentTeleport.Target, {}) });
   const layoutNode = (() => {
     switch (layout.mode) {
       case "collapsed": {
@@ -78,16 +126,15 @@ function DetailsLayoutInner({
       }
       case "split": {
         return /* @__PURE__ */ jsxs(SplitLayout, { children: [
-          /* @__PURE__ */ jsx(
-            SplitLayout.Content,
+          /* @__PURE__ */ jsx(SplitLayout.Content, { minWidth: content.config.minWidth, children: /* @__PURE__ */ jsx(
+            "main",
             {
-              ...content.domProps,
               ref: content.ref,
-              minWidth: content.config.minWidth,
+              ...content.domProps,
               className: clsx(styles.content, content.domProps.className),
               children: /* @__PURE__ */ jsx(contentTeleport.Target, {})
             }
-          ),
+          ) }),
           /* @__PURE__ */ jsx(
             SplitLayout.Panel,
             {
@@ -95,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),
@@ -128,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, {})
             }
           )
@@ -170,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: [
@@ -187,12 +228,11 @@ const DetailsLayout = memo(
               details,
               content,
               containerRef,
-              persistedPanelWidthRef: persistedPanelWidth,
               contentTeleport,
               panelTeleport
             }
           ) : /* @__PURE__ */ jsx(
-            "div",
+            "main",
             {
               ref: content.ref,
               ...content.domProps,

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 contentNode = (\n    <div\n      ref={content.ref}\n      {...content.domProps}\n      className={clsx(styles.content, content.domProps.className)}\n    >\n      <contentTeleport.Target />\n    </div>\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\n              {...content.domProps}\n              ref={content.ref}\n              minWidth={content.config.minWidth}\n              className={clsx(styles.content, content.domProps.className)}\n            >\n              <contentTeleport.Target />\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            <div\n              ref={content.ref}\n              {...content.domProps}\n              className={clsx(styles.content, content.domProps.className)}\n            >\n              <contentTeleport.Target />\n            </div>\n          )}\n        </div>\n      </>\n    );\n  }),\n);\nDetailsLayout.displayName = 'DetailsLayout (forwardRef)';\n"],
-  "mappings": "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",
+  "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-7-1";
-var drawer = "_1377n3n3-3-7-1";
-var drawerContent = "_1377n3n4-3-7-1";
-var layoutRoot = "_1377n3n0-3-7-1";
-var panel = "_1377n3n1-3-7-1";
+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-7-1';\nexport var drawer = '_1377n3n3-3-7-1';\nexport var drawerContent = '_1377n3n4-3-7-1';\nexport var layoutRoot = '_1377n3n0-3-7-1';\nexport var panel = '_1377n3n1-3-7-1';"],
+  "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": []
 }