@dynatrace/strato-components 3.7.0 → 3.8.0

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

@@ -1,4 +1,4 @@
-._193kgwe0-3-7-0 {
+._193kgwe0-3-8-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-0 ._193kgwe0-3-7-0 {
+._1jgl8s50-3-8-0 ._193kgwe0-3-8-0 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
 }
-._193kgwe1-3-7-0 {
+._193kgwe1-3-8-0 {
   grid-area: header;
   padding: var(--dt-spacings-size-8, 8px);
   min-width: 0;
-  ._1jgl8s50-3-7-0 & {
+  ._1jgl8s50-3-8-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-0 {
+._193kgwe2-3-8-0 {
   grid-area: content;
   min-width: 0;
 }
-._193kgwe3-3-7-0 {
+._193kgwe3-3-8-0 {
   padding: var(--dt-spacings-size-16, 16px);
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   height: 100%;
   isolation: isolate;
 }
-._193kgwe4-3-7-0 {
+._193kgwe4-3-8-0 {
   border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1jgl8s50-3-7-0 ._193kgwe4-3-7-0 {
+._1jgl8s50-3-8-0 ._193kgwe4-3-8-0 {
   border-top-left-radius: 0;
 }
-._193kgwe5-3-7-0 {
+._193kgwe5-3-8-0 {
   border-top-right-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1jgl8s50-3-7-0 ._193kgwe5-3-7-0 {
+._1jgl8s50-3-8-0 ._193kgwe5-3-8-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-0";
-var contentContainer = "_193kgwe2-3-7-0";
-var contentTopLeftRadius = "_193kgwe4-3-7-0";
-var contentTopRightRadius = "_193kgwe5-3-7-0";
-var headerContainer = "_193kgwe1-3-7-0";
-var layoutRoot = "_193kgwe0-3-7-0";
+var content = "_193kgwe3-3-8-0";
+var contentContainer = "_193kgwe2-3-8-0";
+var contentTopLeftRadius = "_193kgwe4-3-8-0";
+var contentTopRightRadius = "_193kgwe5-3-8-0";
+var headerContainer = "_193kgwe1-3-8-0";
+var layoutRoot = "_193kgwe0-3-8-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-0';\nexport var contentContainer = '_193kgwe2-3-7-0';\nexport var contentTopLeftRadius = '_193kgwe4-3-7-0';\nexport var contentTopRightRadius = '_193kgwe5-3-7-0';\nexport var headerContainer = '_193kgwe1-3-7-0';\nexport var layoutRoot = '_193kgwe0-3-7-0';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './PageLayout.css';\nexport var content = '_193kgwe3-3-8-0';\nexport var contentContainer = '_193kgwe2-3-8-0';\nexport var contentTopLeftRadius = '_193kgwe4-3-8-0';\nexport var contentTopRightRadius = '_193kgwe5-3-8-0';\nexport var headerContainer = '_193kgwe1-3-8-0';\nexport var layoutRoot = '_193kgwe0-3-8-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-0 {
+._1y5ro0l0-3-8-0 {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: var(--dt-spacings-size-8, 8px);
 }
-._1y5ro0l1-3-7-0 {
+._1y5ro0l1-3-8-0 {
   display: flex;
   align-items: center;
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1y5ro0l2-3-7-0 {
+._1y5ro0l2-3-8-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-0";
-var customActions = "_1y5ro0l1-3-7-0";
-var defaultActions = "_1y5ro0l2-3-7-0";
+var controlBar = "_1y5ro0l0-3-8-0";
+var customActions = "_1y5ro0l1-3-8-0";
+var defaultActions = "_1y5ro0l2-3-8-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-0';\nexport var customActions = '_1y5ro0l1-3-7-0';\nexport var defaultActions = '_1y5ro0l2-3-7-0';"],
+  "sourcesContent": ["import './DetailsControlBar.css';\nexport var controlBar = '_1y5ro0l0-3-8-0';\nexport var customActions = '_1y5ro0l1-3-8-0';\nexport var defaultActions = '_1y5ro0l2-3-8-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-0 {
+._1377n3n0-3-8-0 {
   height: 100%;
   overflow: hidden;
   position: relative;
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._1377n3n1-3-7-0 {
+._1377n3n1-3-8-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-0 ._1377n3n1-3-7-0 {
+._1jgl8s50-3-8-0 ._1377n3n1-3-8-0 {
   border-top-left-radius: 0;
 }
-._1377n3n2-3-7-0 {
+._1377n3n2-3-8-0 {
   box-sizing: border-box;
   height: 100%;
   overflow-y: auto;
 }
-._1377n3n3-3-7-0 {
+._1377n3n3-3-8-0 {
   box-sizing: border-box;
   padding: 0;
 }
-._1377n3n4-3-7-0 {
+._1377n3n4-3-8-0 {
   box-sizing: border-box;
   padding: var(--dt-spacings-size-16, 16px);
   height: 100%;

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

@@ -62,15 +62,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 +71,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,
             {
@@ -192,7 +184,7 @@ const DetailsLayout = memo(
               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  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": "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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-0";
-var drawer = "_1377n3n3-3-7-0";
-var drawerContent = "_1377n3n4-3-7-0";
-var layoutRoot = "_1377n3n0-3-7-0";
-var panel = "_1377n3n1-3-7-0";
+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";
 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-0';\nexport var drawer = '_1377n3n3-3-7-0';\nexport var drawerContent = '_1377n3n4-3-7-0';\nexport var layoutRoot = '_1377n3n0-3-7-0';\nexport var panel = '_1377n3n1-3-7-0';"],
+  "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';"],
   "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-7-0 {
+._15qr1eq0-3-8-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-7-0 ._15qr1eq0-3-7-0 {
+._1jgl8s50-3-8-0 ._15qr1eq0-3-8-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-7-0 {
+._15qr1eq1-3-8-0 {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
   padding: var(--dt-spacings-size-16, 16px);
   flex-grow: 1;
 }
-._15qr1eq2-3-7-0 {
+._15qr1eq2-3-8-0 {
   height: 100%;
   flex-shrink: 0;
   position: relative;
@@ -33,7 +33,7 @@
   display: flex;
   justify-content: center;
 }
-._1jgl8s50-3-7-0 ._15qr1eq2-3-7-0 {
+._1jgl8s50-3-8-0 ._15qr1eq2-3-8-0 {
   border-radius: 0;
   height: 100%;
   width: var(--dt-spacings-size-8, 8px);
@@ -41,7 +41,7 @@
   transition: none;
   background-color: transparent;
 }
-._1jgl8s50-3-7-0 ._15qr1eq2-3-7-0::before {
+._1jgl8s50-3-8-0 ._15qr1eq2-3-8-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-7-0 ._15qr1eq2-3-7-0:hover::before {
+._1jgl8s50-3-8-0 ._15qr1eq2-3-8-0:hover::before {
   background-color: var(--dt-colors-border-neutral-subdued-hover, #d0d1dc);
 }
-._1jgl8s50-3-7-0 ._15qr1eq2-3-7-0:active::before {
+._1jgl8s50-3-8-0 ._15qr1eq2-3-8-0:active::before {
   background-color: var(--dt-colors-border-neutral-subdued-active, #c6c7d5);
 }
-._15qr1eq3-3-7-0 {
+._15qr1eq3-3-8-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-7-0:focus-visible {
+._15qr1eq3-3-8-0:focus-visible {
   width: 100%;
 }
-._15qr1eq3-3-7-0:hover._15qr1eq3-3-7-0:focus-visible {
+._15qr1eq3-3-8-0:hover._15qr1eq3-3-8-0:focus-visible {
   width: 2px;
 }
-._15qr1eq3-3-7-0:focus-visible, ._15qr1eq3-3-7-0:hover {
+._15qr1eq3-3-8-0:focus-visible, ._15qr1eq3-3-8-0:hover {
   height: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }
-._15qr1eq3-3-7-0:after {
+._15qr1eq3-3-8-0:after {
   content: "";
   display: block;
   height: 100%;
@@ -92,20 +92,20 @@
   user-select: none;
   width: 100%;
 }
-._1jgl8s50-3-7-0 ._15qr1eq3-3-7-0 {
+._1jgl8s50-3-8-0 ._15qr1eq3-3-8-0 {
   width: 0;
   cursor: ew-resize;
 }
-._1jgl8s50-3-7-0 ._15qr1eq2-3-7-0:has(._15qr1eq3-3-7-0:focus-visible)::before {
+._1jgl8s50-3-8-0 ._15qr1eq2-3-8-0:has(._15qr1eq3-3-8-0:focus-visible)::before {
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   width: var(--dt-borders-width-emphasized, 2px);
 }
-._1jgl8s50-3-7-0 ._15qr1eq0-3-7-0:has(._15qr1eq3-3-7-0:hover) {
+._1jgl8s50-3-8-0 ._15qr1eq0-3-8-0:has(._15qr1eq3-3-8-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-7-0 ._15qr1eq0-3-7-0:has(._15qr1eq3-3-7-0:active) {
+._1jgl8s50-3-8-0 ._15qr1eq0-3-8-0:has(._15qr1eq3-3-8-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-7-0 ._15qr1eq0-3-7-0:has(._15qr1eq3-3-7-0:focus-visible) {
+._1jgl8s50-3-8-0 ._15qr1eq0-3-8-0:has(._15qr1eq3-3-8-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.sty.js

@@ -1,9 +1,9 @@
 import "../../../core/components/app-root/AppRoot.css";
 import "./Overlay.css";
-var handleContainer = "_15qr1eq2-3-7-0";
-var overlay = "_15qr1eq0-3-7-0";
-var overlayContent = "_15qr1eq1-3-7-0";
-var resizeHandle = "_15qr1eq3-3-7-0";
+var handleContainer = "_15qr1eq2-3-8-0";
+var overlay = "_15qr1eq0-3-8-0";
+var overlayContent = "_15qr1eq1-3-8-0";
+var resizeHandle = "_15qr1eq3-3-8-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-7-0';\nexport var overlay = '_15qr1eq0-3-7-0';\nexport var overlayContent = '_15qr1eq1-3-7-0';\nexport var resizeHandle = '_15qr1eq3-3-7-0';"],
+  "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';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,kBAAkB;AACtB,IAAI,UAAU;AACd,IAAI,iBAAiB;AACrB,IAAI,eAAe;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/shared/portal-slots.tsx"],
-  "sourcesContent": ["import {\n  forwardRef,\n  useMemo,\n  useRef,\n  useSyncExternalStore,\n  type ForwardedRef,\n  type PropsWithChildren,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { usePageLayoutPortalContext } from './PageLayoutPortalContext.js';\nimport {\n  contentDefaults,\n  detailsDefaults,\n  sidebarDefaults,\n} from './slot-defaults.js';\nimport { useRegisteredSlot } from './useRegisteredSlot.js';\nimport type { AriaLabelingProps } from '../../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../../core/types/data-props.js';\nimport type { MaskingProps } from '../../../core/types/masking-props.js';\nimport type { StylingProps } from '../../../core/types/styling-props.js';\nimport { DetailsControlBar } from '../details-layout/DetailsControlBar.js';\nimport { DetailsLayoutContext } from '../details-layout/DetailsLayoutContext.js';\nimport type { DetailsProps, ContentProps } from '../details-layout/slots.js';\nimport type { SidebarProps } from '../sidebar-layout/slots.js';\n\nconst toRef = <T,>(ref: ForwardedRef<T>) => ref ?? undefined;\n\n/**\n * Returns a stable reference to `value` that only changes identity when one of\n * its own enumerable keys changes (shallow equality). Used to keep registry\n * entries from churning when callers spread anonymous objects (e.g. `domProps`)\n * into them on every render.\n */\nfunction useShallowStable<T extends Record<string, unknown>>(value: T): T {\n  const ref = useRef<T>(value);\n  const prev = ref.current;\n  const prevKeys = Object.keys(prev);\n  const nextKeys = Object.keys(value);\n  let equal = prevKeys.length === nextKeys.length;\n  if (equal) {\n    for (const key of nextKeys) {\n      if (!Object.is(prev[key], value[key])) {\n        equal = false;\n        break;\n      }\n    }\n  }\n  if (!equal) {\n    ref.current = value;\n  }\n  return ref.current;\n}\n\n/**\n * PageLayout.Header - portals children into the header host node and\n * registers layout config via the slot registry in a layout effect.\n * @public\n */\nexport interface HeaderProps\n  extends PropsWithChildren,\n    BehaviorTrackingProps,\n    AriaLabelingProps,\n    StylingProps,\n    MaskingProps,\n    DataTestId {}\n\nexport const PageLayoutHeader = forwardRef<HTMLDivElement, HeaderProps>(\n  function PageLayoutHeader(\n    { children, ...domProps }: HeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n  ) {\n    const { hosts } = usePageLayoutPortalContext();\n    const stableDomProps = useShallowStable(domProps);\n    const refValue = toRef(ref);\n    const config = useMemo(\n      () => ({ domProps: stableDomProps, ref: refValue }),\n      [stableDomProps, refValue],\n    );\n\n    useRegisteredSlot('header', config);\n\n    return createPortal(children, hosts.header);\n  },\n);\n\n/**\n * PageLayout.Sidebar - portals children into the sidebar host node and\n * registers sidebar config via the slot registry in a layout effect.\n * @internal\n */\nexport const PageLayoutSidebar = forwardRef<HTMLDivElement, SidebarProps>(\n  function PageLayoutSidebar(\n    {\n      children,\n      defaultWidth = sidebarDefaults.defaultWidth,\n      minWidth = sidebarDefaults.minWidth,\n      maxWidth = sidebarDefaults.maxWidth,\n      resizable = sidebarDefaults.resizable,\n      collapsed,\n      defaultCollapsed = sidebarDefaults.defaultCollapsed,\n      onCollapsedChange,\n      breakpoint = sidebarDefaults.breakpoint,\n      onResize,\n      ...domProps\n    }: SidebarProps,\n    ref: ForwardedRef<HTMLDivElement>,\n  ) {\n    const { hosts } = usePageLayoutPortalContext();\n    const stableDomProps = useShallowStable(domProps);\n    const refValue = toRef(ref);\n    const config = useMemo(\n      () => ({\n        config: {\n          defaultWidth,\n          minWidth,\n          maxWidth,\n          resizable,\n          collapsed,\n          defaultCollapsed,\n          onCollapsedChange,\n          breakpoint,\n          onResize,\n        },\n        domProps: stableDomProps,\n        ref: refValue,\n      }),\n      [\n        defaultWidth,\n        minWidth,\n        maxWidth,\n        resizable,\n        collapsed,\n        defaultCollapsed,\n        onCollapsedChange,\n        breakpoint,\n        onResize,\n        stableDomProps,\n        refValue,\n      ],\n    );\n\n    useRegisteredSlot('sidebar', config);\n\n    return createPortal(children, hosts.sidebar);\n  },\n);\n\n/**\n * PageLayout.Content - portals children into the content host node and\n * registers content config via the slot registry in a layout effect.\n * @internal\n */\nexport const PageLayoutContent = forwardRef<HTMLDivElement, ContentProps>(\n  function PageLayoutContent(\n    {\n      children,\n      minWidth = contentDefaults.minWidth,\n      ...domProps\n    }: ContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n  ) {\n    const { hosts } = usePageLayoutPortalContext();\n    const stableDomProps = useShallowStable(domProps);\n    const refValue = toRef(ref);\n    const config = useMemo(\n      () => ({\n        config: { minWidth },\n        domProps: stableDomProps,\n        ref: refValue,\n      }),\n      [minWidth, stableDomProps, refValue],\n    );\n\n    useRegisteredSlot('content', config);\n\n    return createPortal(children, hosts.content);\n  },\n);\n\n/**\n * PageLayout.Details - portals children into the details host node and\n * registers details config via the slot registry in a layout effect.\n *\n * Children are wrapped in `DetailsLayoutContext.Provider` using the value\n * bridged through the slot registry. Without this, `DetailsControlBar` would\n * fall back to the context's default value because the portal originates\n * outside the provider placed by `DetailsLayoutInner`.\n *\n * @internal\n */\nexport const PageLayoutDetails = forwardRef<HTMLDivElement, DetailsProps>(\n  function PageLayoutDetails(\n    {\n      children,\n      minWidth = detailsDefaults.minWidth,\n      maxWidth = detailsDefaults.maxWidth,\n      defaultWidth = detailsDefaults.defaultWidth,\n      resizable = detailsDefaults.resizable,\n      collapsed,\n      defaultCollapsed = detailsDefaults.defaultCollapsed,\n      onCollapsedChange,\n      layout,\n      defaultLayout = detailsDefaults.defaultLayout,\n      onLayoutChange,\n      breakpoint = detailsDefaults.breakpoint,\n      onResize,\n      ...domProps\n    }: DetailsProps,\n    ref: ForwardedRef<HTMLDivElement>,\n  ) {\n    const { hosts, registry } = usePageLayoutPortalContext();\n    const stableDomProps = useShallowStable(domProps);\n    const refValue = toRef(ref);\n    const config = useMemo(\n      () => ({\n        config: {\n          minWidth,\n          maxWidth,\n          defaultWidth,\n          resizable,\n          collapsed,\n          defaultCollapsed,\n          onCollapsedChange,\n          layout,\n          defaultLayout,\n          onLayoutChange,\n          breakpoint,\n          onResize,\n        },\n        domProps: stableDomProps,\n        ref: refValue,\n      }),\n      [\n        minWidth,\n        maxWidth,\n        defaultWidth,\n        resizable,\n        collapsed,\n        defaultCollapsed,\n        onCollapsedChange,\n        layout,\n        defaultLayout,\n        onLayoutChange,\n        breakpoint,\n        onResize,\n        stableDomProps,\n        refValue,\n      ],\n    );\n\n    useRegisteredSlot('details', config);\n\n    const detailsLayoutContext = useSyncExternalStore(\n      registry.subscribe,\n      () => registry.getSnapshot().detailsLayoutContext,\n    );\n\n    return createPortal(\n      <DetailsLayoutContext.Provider value={detailsLayoutContext}>\n        {children}\n      </DetailsLayoutContext.Provider>,\n      hosts.details,\n    );\n  },\n);\n\nexport const PageLayoutDetailsWithControlBar = Object.assign(\n  PageLayoutDetails,\n  { ControlBar: DetailsControlBar },\n);\n"],
+  "sourcesContent": ["import {\n  forwardRef,\n  useMemo,\n  useRef,\n  useSyncExternalStore,\n  type ForwardedRef,\n  type PropsWithChildren,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { usePageLayoutPortalContext } from './PageLayoutPortalContext.js';\nimport {\n  contentDefaults,\n  detailsDefaults,\n  sidebarDefaults,\n} from './slot-defaults.js';\nimport { useRegisteredSlot } from './useRegisteredSlot.js';\nimport type { AriaLabelingProps } from '../../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../../core/types/data-props.js';\nimport type { MaskingProps } from '../../../core/types/masking-props.js';\nimport type { StylingProps } from '../../../core/types/styling-props.js';\nimport { DetailsControlBar } from '../details-layout/DetailsControlBar.js';\nimport { DetailsLayoutContext } from '../details-layout/DetailsLayoutContext.js';\nimport type { DetailsProps, ContentProps } from '../details-layout/slots.js';\nimport type { SidebarProps } from '../sidebar-layout/slots.js';\n\nconst toRef = <T,>(ref: ForwardedRef<T>) => ref ?? undefined;\n\n/**\n * Returns a stable reference to `value` that only changes identity when one of\n * its own enumerable keys changes (shallow equality). Used to keep registry\n * entries from churning when callers spread anonymous objects (e.g. `domProps`)\n * into them on every render.\n */\nfunction useShallowStable<T extends Record<string, unknown>>(value: T): T {\n  const ref = useRef<T>(value);\n  const prev = ref.current;\n  const prevKeys = Object.keys(prev);\n  const nextKeys = Object.keys(value);\n  let equal = prevKeys.length === nextKeys.length;\n  if (equal) {\n    for (const key of nextKeys) {\n      if (!Object.is(prev[key], value[key])) {\n        equal = false;\n        break;\n      }\n    }\n  }\n  if (!equal) {\n    ref.current = value;\n  }\n  return ref.current;\n}\n\n/**\n * PageLayout.Header - portals children into the header host node and\n * registers layout config via the slot registry in a layout effect.\n * @public\n */\nexport interface HeaderProps\n  extends PropsWithChildren,\n    BehaviorTrackingProps,\n    AriaLabelingProps,\n    StylingProps,\n    MaskingProps,\n    DataTestId {}\n\nexport const PageLayoutHeader = forwardRef<HTMLDivElement, HeaderProps>(\n  function PageLayoutHeader(\n    { children, ...domProps }: HeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n  ) {\n    const { hosts } = usePageLayoutPortalContext();\n    const stableDomProps = useShallowStable(domProps);\n    const refValue = toRef(ref);\n    const config = useMemo(\n      () => ({ domProps: stableDomProps, ref: refValue }),\n      [stableDomProps, refValue],\n    );\n\n    useRegisteredSlot('header', config);\n\n    return createPortal(children, hosts.header);\n  },\n);\n\n/**\n * PageLayout.Sidebar - portals children into the sidebar host node and\n * registers sidebar config via the slot registry in a layout effect.\n * @internal\n */\nexport const PageLayoutSidebar = forwardRef<HTMLDivElement, SidebarProps>(\n  function PageLayoutSidebar(\n    {\n      children,\n      defaultWidth = sidebarDefaults.defaultWidth,\n      minWidth = sidebarDefaults.minWidth,\n      maxWidth = sidebarDefaults.maxWidth,\n      resizable = sidebarDefaults.resizable,\n      collapsed,\n      defaultCollapsed = sidebarDefaults.defaultCollapsed,\n      onCollapsedChange,\n      breakpoint = sidebarDefaults.breakpoint,\n      onResize,\n      ...domProps\n    }: SidebarProps,\n    ref: ForwardedRef<HTMLDivElement>,\n  ) {\n    const { hosts } = usePageLayoutPortalContext();\n    const stableDomProps = useShallowStable(domProps);\n    const refValue = toRef(ref);\n    const config = useMemo(\n      () => ({\n        config: {\n          defaultWidth,\n          minWidth,\n          maxWidth,\n          resizable,\n          collapsed,\n          defaultCollapsed,\n          onCollapsedChange,\n          breakpoint,\n          onResize,\n        },\n        domProps: stableDomProps,\n        ref: refValue,\n      }),\n      [\n        defaultWidth,\n        minWidth,\n        maxWidth,\n        resizable,\n        collapsed,\n        defaultCollapsed,\n        onCollapsedChange,\n        breakpoint,\n        onResize,\n        stableDomProps,\n        refValue,\n      ],\n    );\n\n    useRegisteredSlot('sidebar', config);\n\n    return createPortal(children, hosts.sidebar);\n  },\n);\n\n/**\n * PageLayout.Content - portals children into the content host node and\n * registers content config via the slot registry in a layout effect.\n * @internal\n */\nexport const PageLayoutContent = forwardRef<HTMLElement, ContentProps>(\n  function PageLayoutContent(\n    {\n      children,\n      minWidth = contentDefaults.minWidth,\n      ...domProps\n    }: ContentProps,\n    ref: ForwardedRef<HTMLElement>,\n  ) {\n    const { hosts } = usePageLayoutPortalContext();\n    const stableDomProps = useShallowStable(domProps);\n    const refValue = toRef(ref);\n    const config = useMemo(\n      () => ({\n        config: { minWidth },\n        domProps: stableDomProps,\n        ref: refValue,\n      }),\n      [minWidth, stableDomProps, refValue],\n    );\n\n    useRegisteredSlot('content', config);\n\n    return createPortal(children, hosts.content);\n  },\n);\n\n/**\n * PageLayout.Details - portals children into the details host node and\n * registers details config via the slot registry in a layout effect.\n *\n * Children are wrapped in `DetailsLayoutContext.Provider` using the value\n * bridged through the slot registry. Without this, `DetailsControlBar` would\n * fall back to the context's default value because the portal originates\n * outside the provider placed by `DetailsLayoutInner`.\n *\n * @internal\n */\nexport const PageLayoutDetails = forwardRef<HTMLDivElement, DetailsProps>(\n  function PageLayoutDetails(\n    {\n      children,\n      minWidth = detailsDefaults.minWidth,\n      maxWidth = detailsDefaults.maxWidth,\n      defaultWidth = detailsDefaults.defaultWidth,\n      resizable = detailsDefaults.resizable,\n      collapsed,\n      defaultCollapsed = detailsDefaults.defaultCollapsed,\n      onCollapsedChange,\n      layout,\n      defaultLayout = detailsDefaults.defaultLayout,\n      onLayoutChange,\n      breakpoint = detailsDefaults.breakpoint,\n      onResize,\n      ...domProps\n    }: DetailsProps,\n    ref: ForwardedRef<HTMLDivElement>,\n  ) {\n    const { hosts, registry } = usePageLayoutPortalContext();\n    const stableDomProps = useShallowStable(domProps);\n    const refValue = toRef(ref);\n    const config = useMemo(\n      () => ({\n        config: {\n          minWidth,\n          maxWidth,\n          defaultWidth,\n          resizable,\n          collapsed,\n          defaultCollapsed,\n          onCollapsedChange,\n          layout,\n          defaultLayout,\n          onLayoutChange,\n          breakpoint,\n          onResize,\n        },\n        domProps: stableDomProps,\n        ref: refValue,\n      }),\n      [\n        minWidth,\n        maxWidth,\n        defaultWidth,\n        resizable,\n        collapsed,\n        defaultCollapsed,\n        onCollapsedChange,\n        layout,\n        defaultLayout,\n        onLayoutChange,\n        breakpoint,\n        onResize,\n        stableDomProps,\n        refValue,\n      ],\n    );\n\n    useRegisteredSlot('details', config);\n\n    const detailsLayoutContext = useSyncExternalStore(\n      registry.subscribe,\n      () => registry.getSnapshot().detailsLayoutContext,\n    );\n\n    return createPortal(\n      <DetailsLayoutContext.Provider value={detailsLayoutContext}>\n        {children}\n      </DetailsLayoutContext.Provider>,\n      hosts.details,\n    );\n  },\n);\n\nexport const PageLayoutDetailsWithControlBar = Object.assign(\n  PageLayoutDetails,\n  { ControlBar: DetailsControlBar },\n);\n"],
   "mappings": "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",
   "names": ["PageLayoutHeader", "PageLayoutSidebar", "PageLayoutContent", "PageLayoutDetails"]
 }