@dynatrace/strato-components 3.13.2 → 3.14.0

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

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

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

@@ -4,43 +4,34 @@ import {
   forwardRef,
   memo,
   useMemo,
+  useRef,
   useSyncExternalStore
 } from "react";
-import { DetailsLayout } from "./details-layout/DetailsLayout.js";
+import { DetailsRegion } from "./details-region/DetailsRegion.js";
 import * as styles from "./PageLayout.sty.js";
 import {
   PageLayoutPortalContext,
   usePageLayoutPortalContext
-} from "./shared/PageLayoutPortalContext.js";
+} from "./shared/slots/PageLayoutPortalContext.js";
 import {
   PageLayoutContent,
   PageLayoutDetailsWithControlBar,
   PageLayoutHeader,
   PageLayoutSidebar
-} from "./shared/portal-slots.js";
-import { contentDefaults } from "./shared/slot-defaults.js";
-import { createSlotRegistry } from "./shared/slot-registry.js";
-import { TeleportTarget } from "./shared/TeleportTarget.js";
-import { useStableHost } from "./shared/useStableHost.js";
-import { SidebarLayout } from "./sidebar-layout/SidebarLayout.js";
+} from "./shared/slots/portal-slots.js";
+import { contentDefaults } from "./shared/slots/slot-defaults.js";
+import { createSlotRegistry } from "./shared/slots/slot-registry.js";
+import { TeleportTarget, useStableHost } from "./shared/teleport/teleport.js";
+import { SidebarRegion } from "./sidebar-region/SidebarRegion.js";
 import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
-function resolveOptionalSlot(config, target) {
-  if (!config) {
-    return null;
-  }
-  return { ...config, children: target };
-}
 function MainShell() {
-  const { hosts, registry } = usePageLayoutPortalContext();
+  const { containers, hosts, registry } = usePageLayoutPortalContext();
   const snapshot = useSyncExternalStore(
     registry.subscribe,
     registry.getSnapshot
   );
-  const sidebarConfig = snapshot.sidebar;
-  const detailsConfig = snapshot.details;
-  const detailsLayoutContext = snapshot.detailsLayoutContext;
-  const showTopLeftRadius = sidebarConfig !== null;
-  const showTopRightRadius = detailsConfig !== null && detailsLayoutContext?.mode !== "collapsed";
+  const showTopLeftRadius = snapshot.sidebar !== null;
+  const showTopRightRadius = snapshot.details !== null && snapshot.details.state.mode !== "collapsed";
   const contentClassName = clsx(
     styles.content,
     showTopLeftRadius && styles.contentTopLeftRadius,
@@ -59,14 +50,14 @@ function MainShell() {
     [hosts.content]
   );
   const sidebarSlot = useMemo(
-    () => resolveOptionalSlot(snapshot.sidebar, sidebarTarget),
+    () => snapshot.sidebar && { ...snapshot.sidebar, children: sidebarTarget },
     [snapshot.sidebar, sidebarTarget]
   );
   const detailsSlot = useMemo(
-    () => resolveOptionalSlot(snapshot.details, detailsTarget),
+    () => snapshot.details && { ...snapshot.details, children: detailsTarget },
     [snapshot.details, detailsTarget]
   );
-  const contentSlot = useMemo(() => {
+  const mainPaneSlot = useMemo(() => {
     if (snapshot.content) {
       const { config, domProps, ref } = snapshot.content;
       return {
@@ -85,17 +76,29 @@ function MainShell() {
       domProps: { className: contentClassName }
     };
   }, [snapshot.content, contentTarget, contentClassName]);
-  const sidebarContentSlot = useMemo(
+  const sidebarSiblingSlot = useMemo(
     () => ({
-      children: /* @__PURE__ */ jsx(DetailsLayout, { details: detailsSlot, content: contentSlot }),
-      // The sidebar bounds itself via its own maxWidth, so the right-hand region
-      // needs no minimum. This is distinct from the details content pane's min.
+      children: /* @__PURE__ */ jsx(
+        DetailsRegion,
+        {
+          details: detailsSlot,
+          content: mainPaneSlot,
+          containerRef: containers.details
+        }
+      ),
       config: { minWidth: 0 },
       domProps: {}
     }),
-    [detailsSlot, contentSlot]
+    [detailsSlot, mainPaneSlot, containers.details]
+  );
+  return /* @__PURE__ */ jsx(
+    SidebarRegion,
+    {
+      sidebar: sidebarSlot,
+      content: sidebarSiblingSlot,
+      containerRef: containers.sidebar
+    }
   );
-  return /* @__PURE__ */ jsx(SidebarLayout, { sidebar: sidebarSlot, content: sidebarContentSlot });
 }
 function HeaderShell() {
   const { hosts, registry } = usePageLayoutPortalContext();
@@ -103,16 +106,16 @@ function HeaderShell() {
     registry.subscribe,
     registry.getSnapshot
   );
-  const headerConfig = snapshot.header;
-  if (headerConfig === null) {
+  const header = snapshot.header;
+  if (header === null) {
     return null;
   }
   return /* @__PURE__ */ jsx(
     "div",
     {
-      ...headerConfig.domProps,
-      ref: headerConfig.ref,
-      className: clsx(styles.headerContainer, headerConfig.domProps.className),
+      ...header.domProps,
+      ref: header.ref,
+      className: clsx(styles.headerContainer, header.domProps.className),
       children: /* @__PURE__ */ jsx(TeleportTarget, { host: hosts.header })
     }
   );
@@ -125,6 +128,8 @@ const LayoutRoot = memo(
     const sidebarHost = useStableHost();
     const contentHost = useStableHost();
     const detailsHost = useStableHost();
+    const sidebarContainerRef = useRef(null);
+    const detailsContainerRef = useRef(null);
     const registry = useMemo(() => createSlotRegistry(), []);
     const context = useMemo(
       () => ({
@@ -134,9 +139,13 @@ const LayoutRoot = memo(
           content: contentHost,
           details: detailsHost
         },
+        containers: {
+          sidebar: sidebarContainerRef,
+          details: detailsContainerRef
+        },
         registry
       }),
-      // hosts and registry are stable
+      // hosts, containers and registry are stable
       // oxlint-disable-next-line react-hooks/exhaustive-deps
       []
     );

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page-layout/PageLayout.tsx"],
-  "sourcesContent": ["import { clsx } from 'clsx';\nimport {\n  forwardRef,\n  memo,\n  useMemo,\n  useSyncExternalStore,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react';\n\nimport { DetailsLayout } from './details-layout/DetailsLayout.js';\nimport type { ExtractedContentSlot as DetailsContentSlot } from './details-layout/slots.js';\nimport * as styles from './PageLayout.sty.js';\nimport {\n  PageLayoutPortalContext,\n  usePageLayoutPortalContext,\n} from './shared/PageLayoutPortalContext.js';\nimport {\n  PageLayoutContent,\n  PageLayoutDetailsWithControlBar,\n  PageLayoutHeader,\n  PageLayoutSidebar,\n} from './shared/portal-slots.js';\nimport type {\n  DetailsSlotConfig,\n  SidebarSlotConfig,\n} from './shared/slot-config.js';\nimport { contentDefaults } from './shared/slot-defaults.js';\nimport { createSlotRegistry } from './shared/slot-registry.js';\nimport { TeleportTarget } from './shared/TeleportTarget.js';\nimport { useStableHost } from './shared/useStableHost.js';\nimport { SidebarLayout } from './sidebar-layout/SidebarLayout.js';\nimport type { ExtractedContentSlot as SidebarContentSlot } from './sidebar-layout/slots.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.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';\n\nfunction resolveOptionalSlot<T extends SidebarSlotConfig | DetailsSlotConfig>(\n  config: T | null,\n  target: ReactNode,\n): (T & { children: ReactNode }) | null {\n  if (!config) {\n    return null;\n  }\n  return { ...config, children: target };\n}\n\n/**\n * This is the container for the horizontal layout below the Header.\n * Subscribes to the slot registry via `useSyncExternalStore`.\n * Re-renders only when registry state changes.\n */\nfunction MainShell() {\n  const { hosts, registry } = usePageLayoutPortalContext();\n  const snapshot = useSyncExternalStore(\n    registry.subscribe,\n    registry.getSnapshot,\n  );\n\n  const sidebarConfig = snapshot.sidebar;\n  const detailsConfig = snapshot.details;\n  const detailsLayoutContext = snapshot.detailsLayoutContext;\n\n  const showTopLeftRadius = sidebarConfig !== null;\n  const showTopRightRadius =\n    detailsConfig !== null && detailsLayoutContext?.mode !== 'collapsed';\n\n  const contentClassName = clsx(\n    styles.content,\n    showTopLeftRadius && styles.contentTopLeftRadius,\n    showTopRightRadius && styles.contentTopRightRadius,\n  );\n\n  const sidebarTarget = useMemo(\n    () => <TeleportTarget host={hosts.sidebar} />,\n    [hosts.sidebar],\n  );\n  const detailsTarget = useMemo(\n    () => <TeleportTarget host={hosts.details} />,\n    [hosts.details],\n  );\n  const contentTarget = useMemo(\n    () => <TeleportTarget host={hosts.content} />,\n    [hosts.content],\n  );\n\n  const sidebarSlot = useMemo(\n    () => resolveOptionalSlot(snapshot.sidebar, sidebarTarget),\n    [snapshot.sidebar, sidebarTarget],\n  );\n  const detailsSlot = useMemo(\n    () => resolveOptionalSlot(snapshot.details, detailsTarget),\n    [snapshot.details, detailsTarget],\n  );\n\n  const contentSlot = useMemo<DetailsContentSlot>(() => {\n    if (snapshot.content) {\n      const { config, domProps, ref } = snapshot.content;\n      return {\n        children: contentTarget,\n        config,\n        domProps: {\n          ...domProps,\n          className: clsx(contentClassName, domProps.className),\n        },\n        ref,\n      };\n    }\n    return {\n      children: undefined,\n      config: { minWidth: contentDefaults.minWidth },\n      domProps: { className: contentClassName },\n    };\n  }, [snapshot.content, contentTarget, contentClassName]);\n\n  const sidebarContentSlot = useMemo<SidebarContentSlot>(\n    () => ({\n      children: <DetailsLayout details={detailsSlot} content={contentSlot} />,\n      // The sidebar bounds itself via its own maxWidth, so the right-hand region\n      // needs no minimum. This is distinct from the details content pane's min.\n      config: { minWidth: 0 },\n      domProps: {},\n    }),\n    [detailsSlot, contentSlot],\n  );\n\n  return <SidebarLayout sidebar={sidebarSlot} content={sidebarContentSlot} />;\n}\n\n/**\n * Subscribes to the slot registry for header config.\n */\nfunction HeaderShell() {\n  const { hosts, registry } = usePageLayoutPortalContext();\n  const snapshot = useSyncExternalStore(\n    registry.subscribe,\n    registry.getSnapshot,\n  );\n  const headerConfig = snapshot.header;\n\n  if (headerConfig === null) {\n    return null;\n  }\n\n  return (\n    <div\n      {...headerConfig.domProps}\n      ref={headerConfig.ref}\n      className={clsx(styles.headerContainer, headerConfig.domProps.className)}\n    >\n      <TeleportTarget host={hosts.header} />\n    </div>\n  );\n}\n\n/** @public */\nexport interface PageLayoutProps\n  extends\n    PropsWithChildren,\n    BehaviorTrackingProps,\n    AriaLabelingProps,\n    StylingProps,\n    MaskingProps,\n    DataTestId {}\n\nconst LayoutRoot = memo(\n  forwardRef<HTMLDivElement, PageLayoutProps>((props, forwardedRef) => {\n    const { children, className: rootClassName, ...rootProps } = props;\n\n    const [behavioralTrackingProps, restRootProps] =\n      useBehavioralTrackingProps(rootProps);\n\n    const headerHost = useStableHost();\n    const sidebarHost = useStableHost();\n    const contentHost = useStableHost();\n    const detailsHost = useStableHost();\n\n    const registry = useMemo(() => createSlotRegistry(), []);\n\n    const context = useMemo(\n      () => ({\n        hosts: {\n          header: headerHost,\n          sidebar: sidebarHost,\n          content: contentHost,\n          details: detailsHost,\n        },\n        registry,\n      }),\n      // hosts and registry are stable\n      // oxlint-disable-next-line react-hooks/exhaustive-deps\n      [],\n    );\n\n    return (\n      <PageLayoutPortalContext.Provider value={context}>\n        <div\n          {...restRootProps}\n          {...behavioralTrackingProps}\n          ref={forwardedRef}\n          className={clsx(styles.layoutRoot, rootClassName)}\n        >\n          <HeaderShell />\n          <div className={styles.contentContainer}>\n            <MainShell />\n            {children}\n          </div>\n        </div>\n      </PageLayoutPortalContext.Provider>\n    );\n  }),\n);\nLayoutRoot.displayName = 'PageLayout';\n\n/**\n * Use the `PageLayout` to structure app pages with persistent header, sidebar, content, and details panel slots, including responsive breakpoint handling and resizable panels.\n * @public\n */\nexport const PageLayout = Object.assign(LayoutRoot, {\n  /** Displays content at the very top of the page. */\n  Header: PageLayoutHeader,\n  /** Displays content in the collapsible, resizable sidebar panel on the left. */\n  Sidebar: PageLayoutSidebar,\n  /**\n   * Displays the styled main content area (padding, background, border-radius).\n   */\n  Content: PageLayoutContent,\n  /** Displays content in the collapsible, resizable details panel on the right. */\n  Details: PageLayoutDetailsWithControlBar,\n});\n\nexport { usePageLayoutPortalContext };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { clsx } from 'clsx';\nimport {\n  forwardRef,\n  memo,\n  useMemo,\n  useRef,\n  useSyncExternalStore,\n  type PropsWithChildren,\n} from 'react';\n\nimport { DetailsRegion } from './details-region/DetailsRegion.js';\nimport * as styles from './PageLayout.sty.js';\nimport {\n  PageLayoutPortalContext,\n  usePageLayoutPortalContext,\n} from './shared/slots/PageLayoutPortalContext.js';\nimport {\n  PageLayoutContent,\n  PageLayoutDetailsWithControlBar,\n  PageLayoutHeader,\n  PageLayoutSidebar,\n} from './shared/slots/portal-slots.js';\nimport { contentDefaults } from './shared/slots/slot-defaults.js';\nimport { createSlotRegistry } from './shared/slots/slot-registry.js';\nimport { TeleportTarget, useStableHost } from './shared/teleport/teleport.js';\nimport { SidebarRegion } from './sidebar-region/SidebarRegion.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.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 type { ExtractedContentSlot } from '../split-layout/slots.js';\n\nfunction MainShell() {\n  const { containers, hosts, registry } = usePageLayoutPortalContext();\n  const snapshot = useSyncExternalStore(\n    registry.subscribe,\n    registry.getSnapshot,\n  );\n\n  const showTopLeftRadius = snapshot.sidebar !== null;\n  const showTopRightRadius =\n    snapshot.details !== null && snapshot.details.state.mode !== 'collapsed';\n\n  const contentClassName = clsx(\n    styles.content,\n    showTopLeftRadius && styles.contentTopLeftRadius,\n    showTopRightRadius && styles.contentTopRightRadius,\n  );\n\n  const sidebarTarget = useMemo(\n    () => <TeleportTarget host={hosts.sidebar} />,\n    [hosts.sidebar],\n  );\n  const detailsTarget = useMemo(\n    () => <TeleportTarget host={hosts.details} />,\n    [hosts.details],\n  );\n  const contentTarget = useMemo(\n    () => <TeleportTarget host={hosts.content} />,\n    [hosts.content],\n  );\n\n  // The registry entry carries everything the layouts need except the portal\n  // target that stands in for the slot's children.\n  const sidebarSlot = useMemo(\n    () => snapshot.sidebar && { ...snapshot.sidebar, children: sidebarTarget },\n    [snapshot.sidebar, sidebarTarget],\n  );\n  const detailsSlot = useMemo(\n    () => snapshot.details && { ...snapshot.details, children: detailsTarget },\n    [snapshot.details, detailsTarget],\n  );\n\n  // The `<main>` pane inside the details region. Its `minWidth` is the reserve\n  // the main content keeps, which is what caps the details panel in split mode.\n  const mainPaneSlot = useMemo<ExtractedContentSlot>(() => {\n    if (snapshot.content) {\n      const { config, domProps, ref } = snapshot.content;\n      return {\n        children: contentTarget,\n        config,\n        domProps: {\n          ...domProps,\n          className: clsx(contentClassName, domProps.className),\n        },\n        ref,\n      };\n    }\n    return {\n      children: undefined,\n      config: { minWidth: contentDefaults.minWidth },\n      domProps: { className: contentClassName },\n    };\n  }, [snapshot.content, contentTarget, contentClassName]);\n\n  // Everything to the right of the sidebar, i.e. the whole details region. The\n  // sidebar bounds itself via its own maxWidth, so this needs no minimum.\n  const sidebarSiblingSlot = useMemo<ExtractedContentSlot<HTMLDivElement>>(\n    () => ({\n      children: (\n        <DetailsRegion\n          details={detailsSlot}\n          content={mainPaneSlot}\n          containerRef={containers.details}\n        />\n      ),\n      config: { minWidth: 0 },\n      domProps: {},\n    }),\n    [detailsSlot, mainPaneSlot, containers.details],\n  );\n\n  return (\n    <SidebarRegion\n      sidebar={sidebarSlot}\n      content={sidebarSiblingSlot}\n      containerRef={containers.sidebar}\n    />\n  );\n}\n\nfunction HeaderShell() {\n  const { hosts, registry } = usePageLayoutPortalContext();\n  const snapshot = useSyncExternalStore(\n    registry.subscribe,\n    registry.getSnapshot,\n  );\n  const header = snapshot.header;\n\n  if (header === null) {\n    return null;\n  }\n\n  return (\n    <div\n      {...header.domProps}\n      ref={header.ref}\n      className={clsx(styles.headerContainer, header.domProps.className)}\n    >\n      <TeleportTarget host={hosts.header} />\n    </div>\n  );\n}\n\n/** @public */\nexport interface PageLayoutProps\n  extends\n    PropsWithChildren,\n    BehaviorTrackingProps,\n    AriaLabelingProps,\n    StylingProps,\n    MaskingProps,\n    DataTestId {}\n\nconst LayoutRoot = memo(\n  forwardRef<HTMLDivElement, PageLayoutProps>((props, forwardedRef) => {\n    const { children, className: rootClassName, ...rootProps } = props;\n\n    const [behavioralTrackingProps, restRootProps] =\n      useBehavioralTrackingProps(rootProps);\n\n    const headerHost = useStableHost();\n    const sidebarHost = useStableHost();\n    const contentHost = useStableHost();\n    const detailsHost = useStableHost();\n\n    const sidebarContainerRef = useRef<HTMLDivElement>(null);\n    const detailsContainerRef = useRef<HTMLDivElement>(null);\n\n    const registry = useMemo(() => createSlotRegistry(), []);\n\n    const context = useMemo(\n      () => ({\n        hosts: {\n          header: headerHost,\n          sidebar: sidebarHost,\n          content: contentHost,\n          details: detailsHost,\n        },\n        containers: {\n          sidebar: sidebarContainerRef,\n          details: detailsContainerRef,\n        },\n        registry,\n      }),\n      // hosts, containers and registry are stable\n      // oxlint-disable-next-line react-hooks/exhaustive-deps\n      [],\n    );\n\n    return (\n      <PageLayoutPortalContext.Provider value={context}>\n        <div\n          {...restRootProps}\n          {...behavioralTrackingProps}\n          ref={forwardedRef}\n          className={clsx(styles.layoutRoot, rootClassName)}\n        >\n          <HeaderShell />\n          <div className={styles.contentContainer}>\n            <MainShell />\n            {children}\n          </div>\n        </div>\n      </PageLayoutPortalContext.Provider>\n    );\n  }),\n);\nLayoutRoot.displayName = 'PageLayout';\n\n/**\n * Use the `PageLayout` to structure app pages with persistent header, sidebar, content, and details panel slots, including responsive breakpoint handling and resizable panels.\n * @public\n */\nexport const PageLayout = Object.assign(LayoutRoot, {\n  /** Displays content at the very top of the page. */\n  Header: PageLayoutHeader,\n  /** Displays content in the collapsible, resizable sidebar panel on the left. */\n  Sidebar: PageLayoutSidebar,\n  /**\n   * Displays the styled main content area (padding, background, border-radius).\n   */\n  Content: PageLayoutContent,\n  /** Displays content in the collapsible, resizable details panel on the right. */\n  Details: PageLayoutDetailsWithControlBar,\n});\n\nexport { usePageLayoutPortalContext };\n"],
+  "mappings": "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",
   "names": []
 }

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-13-2";
-var contentContainer = "_193kgwe2-3-13-2";
-var contentTopLeftRadius = "_193kgwe4-3-13-2";
-var contentTopRightRadius = "_193kgwe5-3-13-2";
-var headerContainer = "_193kgwe1-3-13-2";
-var layoutRoot = "_193kgwe0-3-13-2";
+var content = "_193kgwe3-3-14-0";
+var contentContainer = "_193kgwe2-3-14-0";
+var contentTopLeftRadius = "_193kgwe4-3-14-0";
+var contentTopRightRadius = "_193kgwe5-3-14-0";
+var headerContainer = "_193kgwe1-3-14-0";
+var layoutRoot = "_193kgwe0-3-14-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-13-2';\nexport var contentContainer = '_193kgwe2-3-13-2';\nexport var contentTopLeftRadius = '_193kgwe4-3-13-2';\nexport var contentTopRightRadius = '_193kgwe5-3-13-2';\nexport var headerContainer = '_193kgwe1-3-13-2';\nexport var layoutRoot = '_193kgwe0-3-13-2';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './PageLayout.css';\nexport var content = '_193kgwe3-3-14-0';\nexport var contentContainer = '_193kgwe2-3-14-0';\nexport var contentTopLeftRadius = '_193kgwe4-3-14-0';\nexport var contentTopRightRadius = '_193kgwe5-3-14-0';\nexport var headerContainer = '_193kgwe1-3-14-0';\nexport var layoutRoot = '_193kgwe0-3-14-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/{layouts/page-layout/details-layout → esm/layouts/page-layout/details-region}/DetailsControlBar.css

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

package/esm/layouts/page-layout/{details-layout → details-region}/DetailsControlBar.js

@@ -8,12 +8,12 @@ import {
   XmarkIcon
 } from "@dynatrace/strato-icons";
 import * as styles from "./DetailsControlBar.sty.js";
-import { useDetailsLayoutContext } from "./DetailsLayoutContext.js";
+import { useDetailsRegionContext } from "./DetailsRegionContext.js";
 import { Button } from "../../../buttons/button/Button.js";
 import { Divider } from "../../divider/Divider.js";
 const DetailsControlBar = (props) => {
   const { children, className, ...restProps } = props;
-  const context = useDetailsLayoutContext();
+  const context = useDetailsRegionContext();
   const intl = useIntl();
   const hasCustomActions = Children.count(children) > 0;
   const closeLabel = intl.formatMessage({
@@ -32,18 +32,15 @@ const DetailsControlBar = (props) => {
     description: "Label for the button that switches the details panel to split mode."
   });
   const handleClose = () => {
-    context?.setCollapsed(true);
+    context.setCollapsed(true);
   };
   const handleLayoutToggle = () => {
-    if (!context) {
-      return;
-    }
     context.setPreferredLayout(
       (prev) => prev === "split" ? "overlay" : "split"
     );
   };
-  const showLayoutToggle = context?.mode ? ["overlay", "split"].includes(context.mode) : false;
-  const isSplit = context?.preferredLayout === "split";
+  const showLayoutToggle = context.mode === "split" || context.mode === "overlay";
+  const isSplit = context.preferredLayout === "split";
   return /* @__PURE__ */ jsxs("div", { ...restProps, className: clsx(styles.controlBar, className), children: [
     hasCustomActions && /* @__PURE__ */ jsx("div", { className: styles.customActions, children }),
     hasCustomActions && /* @__PURE__ */ jsx(Divider, { orientation: "vertical", as: "hr", flexItem: true, "aria-hidden": true }),

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/layouts/page-layout/details-region/DetailsControlBar.tsx"],
+  "sourcesContent": ["import { clsx } from 'clsx';\nimport { Children, type PropsWithChildren } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  OverlayRightIcon,\n  SplitPanelRightIcon,\n  XmarkIcon,\n} from '@dynatrace/strato-icons';\n\nimport * as styles from './DetailsControlBar.sty.js';\nimport { useDetailsRegionContext } from './DetailsRegionContext.js';\nimport { Button } from '../../../buttons/button/Button.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 { Divider } from '../../divider/Divider.js';\n\n/**\n * Props for the `DetailsControlBar` component that renders layout and close controls inside the details panel.\n * @public\n */\nexport interface DetailsControlBarProps\n  extends\n    PropsWithChildren,\n    BehaviorTrackingProps,\n    AriaLabelingProps,\n    StylingProps,\n    MaskingProps,\n    DataTestId {}\n\n/**\n * PageLayout.Details.ControlBar - renders the details panel's own controls,\n * falling back to the built-in collapse and layout actions when the consumer\n * passes no children.\n *\n * Internal because the component is reached through `PageLayout.Details`\n * rather than exported on its own, not because it is free to change.\n *\n * @internal\n */\nexport const DetailsControlBar = (props: DetailsControlBarProps) => {\n  const { children, className, ...restProps } = props;\n  const context = useDetailsRegionContext();\n  const intl = useIntl();\n\n  const hasCustomActions = Children.count(children) > 0;\n\n  const closeLabel = intl.formatMessage({\n    defaultMessage: 'Close details',\n    id: 'UK0OoP7XF++evklW',\n    description: 'Label for the button that closes the details panel.',\n  });\n\n  const switchToOverlayLabel = intl.formatMessage({\n    defaultMessage: 'Switch to overlay',\n    id: '+mEjL2q8RACwzIMR',\n    description:\n      'Label for the button that switches the details panel to overlay mode.',\n  });\n\n  const switchToSplitLabel = intl.formatMessage({\n    defaultMessage: 'Switch to side-by-side',\n    id: 'RST92XLweEz0Qott',\n    description:\n      'Label for the button that switches the details panel to split mode.',\n  });\n\n  const handleClose = () => {\n    context.setCollapsed(true);\n  };\n\n  const handleLayoutToggle = () => {\n    context.setPreferredLayout((prev) =>\n      prev === 'split' ? 'overlay' : 'split',\n    );\n  };\n\n  // Collapsed and drawer modes render no panel to switch the layout of.\n  const showLayoutToggle =\n    context.mode === 'split' || context.mode === 'overlay';\n  const isSplit = context.preferredLayout === 'split';\n\n  return (\n    <div {...restProps} className={clsx(styles.controlBar, className)}>\n      {hasCustomActions && (\n        <div className={styles.customActions}>{children}</div>\n      )}\n      {hasCustomActions && (\n        <Divider orientation=\"vertical\" as=\"hr\" flexItem aria-hidden />\n      )}\n      <div className={styles.defaultActions}>\n        {showLayoutToggle && (\n          <Button\n            aria-label={isSplit ? switchToOverlayLabel : switchToSplitLabel}\n            onClick={handleLayoutToggle}\n          >\n            <Button.Prefix>\n              {isSplit ? <OverlayRightIcon /> : <SplitPanelRightIcon />}\n            </Button.Prefix>\n          </Button>\n        )}\n        <Button\n          aria-label={closeLabel}\n          onClick={handleClose}\n          data-dt-children-name=\"CloseX\"\n        >\n          <Button.Prefix>\n            <XmarkIcon />\n          </Button.Prefix>\n        </Button>\n      </div>\n    </div>\n  );\n};\n\nDetailsControlBar.displayName = 'PageLayout.Details.ControlBar';\n"],
+  "mappings": "AAwFQ,cAKF,YALE;AAxFR,SAAS,YAAY;AACrB,SAAS,gBAAwC;AACjD,SAAS,eAAe;AAExB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,YAAY,YAAY;AACxB,SAAS,+BAA+B;AACxC,SAAS,cAAc;AAMvB,SAAS,eAAe;AAyBjB,MAAM,oBAAoB,CAAC,UAAkC;AAClE,QAAM,EAAE,UAAU,WAAW,GAAG,UAAU,IAAI;AAC9C,QAAM,UAAU,wBAAwB;AACxC,QAAM,OAAO,QAAQ;AAErB,QAAM,mBAAmB,SAAS,MAAM,QAAQ,IAAI;AAEpD,QAAM,aAAa,KAAK,cAAc;AAAA,IACpC,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aAAa;AAAA,EACf,CAAC;AAED,QAAM,uBAAuB,KAAK,cAAc;AAAA,IAC9C,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ,CAAC;AAED,QAAM,qBAAqB,KAAK,cAAc;AAAA,IAC5C,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ,CAAC;AAED,QAAM,cAAc,MAAM;AACxB,YAAQ,aAAa,IAAI;AAAA,EAC3B;AAEA,QAAM,qBAAqB,MAAM;AAC/B,YAAQ;AAAA,MAAmB,CAAC,SAC1B,SAAS,UAAU,YAAY;AAAA,IACjC;AAAA,EACF;AAGA,QAAM,mBACJ,QAAQ,SAAS,WAAW,QAAQ,SAAS;AAC/C,QAAM,UAAU,QAAQ,oBAAoB;AAE5C,SACE,qBAAC,SAAK,GAAG,WAAW,WAAW,KAAK,OAAO,YAAY,SAAS,GAC7D;AAAA,wBACC,oBAAC,SAAI,WAAW,OAAO,eAAgB,UAAS;AAAA,IAEjD,oBACC,oBAAC,WAAQ,aAAY,YAAW,IAAG,MAAK,UAAQ,MAAC,eAAW,MAAC;AAAA,IAE/D,qBAAC,SAAI,WAAW,OAAO,gBACpB;AAAA,0BACC;AAAA,QAAC;AAAA;AAAA,UACC,cAAY,UAAU,uBAAuB;AAAA,UAC7C,SAAS;AAAA,UAET,8BAAC,OAAO,QAAP,EACE,oBAAU,oBAAC,oBAAiB,IAAK,oBAAC,uBAAoB,GACzD;AAAA;AAAA,MACF;AAAA,MAEF;AAAA,QAAC;AAAA;AAAA,UACC,cAAY;AAAA,UACZ,SAAS;AAAA,UACT,yBAAsB;AAAA,UAEtB,8BAAC,OAAO,QAAP,EACC,8BAAC,aAAU,GACb;AAAA;AAAA,MACF;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,kBAAkB,cAAc;",
+  "names": []
+}

package/esm/layouts/page-layout/{details-layout → details-region}/DetailsControlBar.sty.js

@@ -1,7 +1,7 @@
 import "./DetailsControlBar.css";
-var controlBar = "_1y5ro0l0-3-13-2";
-var customActions = "_1y5ro0l1-3-13-2";
-var defaultActions = "_1y5ro0l2-3-13-2";
+var controlBar = "_dnqf2t0-3-14-0";
+var customActions = "_dnqf2t1-3-14-0";
+var defaultActions = "_dnqf2t2-3-14-0";
 export {
   controlBar,
   customActions,

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

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

package/esm/layouts/page-layout/details-region/DetailsRegion.css

@@ -0,0 +1,100 @@
+._15yfwx70-3-14-0 {
+  height: 100%;
+  overflow-y: hidden;
+  overflow-x: auto;
+  display: flex;
+  position: relative;
+  background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
+}
+._15yfwx71-3-14-0 {
+  box-sizing: border-box;
+  height: 100%;
+  position: relative;
+  flex: 1 1 auto;
+  overflow-y: auto;
+}
+._15yfwx72-3-14-0 {
+  box-sizing: border-box;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  width: var(--dt-page-layout-details-panel-width);
+}
+._15yfwx72-3-14-0[hidden] {
+  display: none;
+}
+._15yfwx73-3-14-0 {
+  padding: var(--dt-spacings-size-16, 16px);
+  background-color: var(--dt-colors-background-base-default, #f9f9fa);
+  position: absolute;
+  z-index: 1;
+  right: 0;
+  top: 0;
+  max-width: 100%;
+  border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
+  border-bottom-left-radius: var(--dt-borders-radius-surface-default, 12px);
+  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);
+}
+._1jgl8s50-3-14-0 ._15yfwx73-3-14-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);
+}
+._15yfwx74-3-14-0 {
+  padding: var(--dt-spacings-size-16, 16px);
+  background-color: var(--dt-colors-background-base-default, #f9f9fa);
+  position: relative;
+  flex-shrink: 0;
+  border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
+}
+._1jgl8s50-3-14-0 ._15yfwx74-3-14-0 {
+  border-top-left-radius: 0;
+}
+._15yfwx78-3-14-0 {
+  position: absolute;
+  z-index: 2;
+  right: var(--dt-page-layout-details-panel-width);
+}
+._1jgl8s50-3-14-0 ._15yfwx78-3-14-0 {
+  border-radius: 0;
+  height: 100%;
+  width: var(--dt-spacings-size-8, 8px);
+  left: auto;
+  transition: none;
+  background-color: transparent;
+  margin-right: calc(-1 * var(--dt-spacings-size-4, 4px));
+}
+._1jgl8s50-3-14-0 ._15yfwx78-3-14-0::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: var(--dt-borders-width-default, 1px);
+  background-color: var(--dt-colors-border-neutral-subdued, #e4e5eb);
+  pointer-events: none;
+}
+._1jgl8s50-3-14-0 ._15yfwx78-3-14-0:hover::before {
+  background-color: var(--dt-colors-border-neutral-subdued-hover, #d0d1dc);
+}
+._1jgl8s50-3-14-0 ._15yfwx78-3-14-0:active::before {
+  background-color: var(--dt-colors-border-neutral-subdued-active, #c6c7d5);
+}
+._1jgl8s50-3-14-0 ._15yfwx70-3-14-0:has(._151k20o0-3-14-0:hover) ._15yfwx73-3-14-0 {
+  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-14-0 ._15yfwx70-3-14-0:has(._151k20o0-3-14-0:active) ._15yfwx73-3-14-0,
+  ._1jgl8s50-3-14-0 ._15yfwx70-3-14-0:has(._151k20o0-3-14-0:focus-visible) ._15yfwx73-3-14-0 {
+  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);
+}
+._15yfwx79-3-14-0 {
+  box-sizing: border-box;
+  padding: 0;
+}
+._15yfwx7a-3-14-0 {
+  box-sizing: border-box;
+  padding: var(--dt-spacings-size-16, 16px);
+  height: 100%;
+}

package/esm/layouts/page-layout/details-region/DetailsRegion.js

@@ -0,0 +1,142 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import {
+  forwardRef,
+  memo
+} from "react";
+import { useIntl } from "react-intl";
+import {
+  computeDetailsSizing,
+  PANEL_VIEW
+} from "./details-sizing.js";
+import * as styles from "./DetailsRegion.sty.js";
+import { useId } from "../../../core/hooks/useId.js";
+import { useMergeRefs } from "../../../core/hooks/useMergeRefs.js";
+import { Drawer } from "../../../overlays/drawer/Drawer.js";
+import { ResizeSeparator } from "../../split-layout/resize-separator/ResizeSeparator.js";
+import { usePanelDrag } from "../../split-layout/usePanelDrag.js";
+import { toCssLength } from "../../split-layout/width-utils.js";
+import { resolvePanelLabel } from "../shared/panel-label.js";
+const DetailsRegion = memo(
+  forwardRef((props, ref) => {
+    const {
+      className: rootClassName,
+      containerRef,
+      details,
+      content,
+      style: rootStyle,
+      ...rootProps
+    } = props;
+    const intl = useIntl();
+    const rootRef = useMergeRefs([ref, containerRef]);
+    const generatedPanelId = useId();
+    const detailsAriaLabel = intl.formatMessage({
+      defaultMessage: "Details",
+      id: "o3A99RFWS+N7bJe8",
+      description: "Accessible label for the details panel."
+    });
+    const view = PANEL_VIEW[details?.state.mode ?? "collapsed"];
+    const { panelWidthCss, isResizable, bounds, constraints, panelWidthPx } = computeDetailsSizing(details, content.config.minWidth, view);
+    const dragActions = usePanelDrag({
+      containerRef,
+      constraints,
+      panelWidthPx,
+      // The panel sits at the end of the region, so dragging left widens it.
+      direction: -1,
+      // Writing the panel width variable straight onto the region keeps panel
+      // and handle moving together from one property.
+      paint: (sizing) => {
+        containerRef.current?.style.setProperty(
+          styles.panelWidthVariable,
+          `${sizing.panel.width}px`
+        );
+      },
+      commit: (widthPx) => {
+        details?.state.commitWidth(widthPx);
+      }
+    });
+    const handleVariant = isResizable ? view.handleVariant : null;
+    const panelDetails = view.host === "panel" ? details : null;
+    const drawerDetails = view.host === "drawer" ? details : null;
+    const panelId = panelDetails?.domProps.id ?? generatedPanelId;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...rootProps,
+          ref: rootRef,
+          className: clsx(styles.region, rootClassName),
+          style: {
+            ...rootStyle,
+            [styles.panelWidthVariable]: panelWidthCss
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "main",
+              {
+                ...content.domProps,
+                ref: content.ref,
+                className: clsx(styles.content, content.domProps.className),
+                style: {
+                  ...content.domProps.style,
+                  minWidth: toCssLength(content.config.minWidth)
+                },
+                children: content.children
+              }
+            ),
+            handleVariant && /* @__PURE__ */ jsx("div", { className: styles.handle[handleVariant], children: /* @__PURE__ */ jsx(
+              ResizeSeparator,
+              {
+                ...dragActions,
+                controls: panelId,
+                "aria-label": details?.config.label,
+                value: bounds.value,
+                min: bounds.min,
+                max: bounds.max,
+                valueText: `${bounds.value}px`
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ...panelDetails?.domProps,
+                ref: panelDetails?.ref,
+                id: panelId,
+                role: view.role,
+                "aria-label": details ? resolvePanelLabel(panelDetails?.domProps, detailsAriaLabel) : void 0,
+                hidden: !view.visible,
+                className: clsx(
+                  styles.panel[view.panelVariant],
+                  panelDetails?.domProps.className
+                ),
+                children: view.host === "panel" && details?.children
+              }
+            )
+          ]
+        }
+      ),
+      drawerDetails && /* @__PURE__ */ jsx(
+        Drawer,
+        {
+          ...drawerDetails.domProps,
+          ref: drawerDetails.ref,
+          className: clsx(styles.drawer, drawerDetails.domProps.className),
+          "aria-label": resolvePanelLabel(
+            drawerDetails.domProps,
+            detailsAriaLabel
+          ),
+          isDismissed: drawerDetails.state.collapsed,
+          onDismiss: (state) => drawerDetails.state.setCollapsed(state),
+          placement: "right",
+          width: "wide",
+          children: /* @__PURE__ */ jsx("div", { className: styles.drawerContent, children: drawerDetails.children })
+        }
+      )
+    ] });
+  })
+);
+DetailsRegion.displayName = "DetailsRegion";
+export {
+  DetailsRegion
+};
+//# sourceMappingURL=DetailsRegion.js.map