@dynatrace/strato-components 3.1.1 → 3.2.0

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

@@ -0,0 +1,64 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { memo, useRef } from "react";
+import { DetailsLayout } from "./details-layout/DetailsLayout.js";
+import * as styles from "./PageLayout.sty.js";
+import { extractHorizontalSlots } from "./shared/slots.js";
+import { SidebarLayout } from "./sidebar-layout/SidebarLayout.js";
+const SubLayout = memo(({ children }) => {
+  const { sidebar, content, proxy, details } = extractHorizontalSlots(
+    children,
+    "PageLayout.SubLayout"
+  );
+  const sidebarWidthRef = useRef();
+  const detailsWidthRef = useRef();
+  const mainArea = content ?? proxy;
+  const isStyledContent = content !== null;
+  return /* @__PURE__ */ jsxs(SidebarLayout, { children: [
+    sidebar ? /* @__PURE__ */ jsx(
+      SidebarLayout.Sidebar,
+      {
+        ...sidebar.props,
+        ref: sidebar.ref,
+        onResize: (value) => {
+          sidebarWidthRef.current = value;
+          sidebar.props.onResize?.(value);
+        },
+        defaultWidth: sidebarWidthRef.current ?? sidebar.props.defaultWidth,
+        children: sidebar.children
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(SidebarLayout.Content, { children: /* @__PURE__ */ jsxs(DetailsLayout, { children: [
+      /* @__PURE__ */ jsx(
+        DetailsLayout.Content,
+        {
+          ...mainArea?.props,
+          ref: mainArea?.ref,
+          className: clsx(
+            isStyledContent && styles.main,
+            mainArea?.props.className
+          ),
+          children: mainArea?.children
+        }
+      ),
+      details ? /* @__PURE__ */ jsx(
+        DetailsLayout.Details,
+        {
+          ...details.props,
+          ref: details.ref,
+          onResize: (value) => {
+            detailsWidthRef.current = value;
+            details.props.onResize?.(value);
+          },
+          defaultWidth: detailsWidthRef.current ?? details.props.defaultWidth,
+          children: details.children
+        }
+      ) : null
+    ] }) })
+  ] });
+});
+SubLayout.displayName = "PageLayout.SubLayout";
+export {
+  SubLayout
+};
+//# sourceMappingURL=SubLayout.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/layouts/page-layout/SubLayout.tsx"],
+  "sourcesContent": ["/* eslint-disable react-hooks/refs */\nimport { clsx } from 'clsx';\nimport { memo, useRef, type PropsWithChildren } from 'react';\n\nimport { DetailsLayout } from './details-layout/DetailsLayout.js';\nimport * as styles from './PageLayout.sty.js';\nimport { extractHorizontalSlots } from './shared/slots.js';\nimport { SidebarLayout } from './sidebar-layout/SidebarLayout.js';\n\n/** @internal */\nexport type SubLayoutProps = PropsWithChildren;\n\n/**\n * `PageLayout.SubLayout` renders the standard Sidebar/Content/Details horizontal composition.\n *\n * Use `PageLayout.Content` for styled leaf content, or `PageLayout.Proxy` for a pass-through\n * container when child routes render into this area.\n *\n * Can be used standalone (outside a `PageLayout`) for child routes that don't need a header.\n *\n * Accepts `PageLayout.Sidebar` (optional), exactly one of `PageLayout.Content` or\n * `PageLayout.Proxy` (required), and `PageLayout.Details` (optional) as slot children.\n * @internal\n */\nexport const SubLayout = memo(({ children }: SubLayoutProps) => {\n  const { sidebar, content, proxy, details } = extractHorizontalSlots(\n    children,\n    'PageLayout.SubLayout',\n  );\n\n  const sidebarWidthRef = useRef<number>();\n  const detailsWidthRef = useRef<number>();\n\n  const mainArea = content ?? proxy;\n  const isStyledContent = content !== null;\n\n  return (\n    <SidebarLayout>\n      {sidebar ? (\n        <SidebarLayout.Sidebar\n          {...sidebar.props}\n          ref={sidebar.ref}\n          onResize={(value) => {\n            sidebarWidthRef.current = value;\n            sidebar.props.onResize?.(value);\n          }}\n          defaultWidth={sidebarWidthRef.current ?? sidebar.props.defaultWidth}\n        >\n          {sidebar.children}\n        </SidebarLayout.Sidebar>\n      ) : null}\n      <SidebarLayout.Content>\n        <DetailsLayout>\n          <DetailsLayout.Content\n            {...mainArea?.props}\n            ref={mainArea?.ref}\n            className={clsx(\n              isStyledContent && styles.main,\n              mainArea?.props.className,\n            )}\n          >\n            {mainArea?.children}\n          </DetailsLayout.Content>\n          {details ? (\n            <DetailsLayout.Details\n              {...details.props}\n              ref={details.ref}\n              onResize={(value) => {\n                detailsWidthRef.current = value;\n                details.props.onResize?.(value);\n              }}\n              defaultWidth={\n                detailsWidthRef.current ?? details.props.defaultWidth\n              }\n            >\n              {details.children}\n            </DetailsLayout.Details>\n          ) : null}\n        </DetailsLayout>\n      </SidebarLayout.Content>\n    </SidebarLayout>\n  );\n});\n\nSubLayout.displayName = 'PageLayout.SubLayout';\n"],
+  "mappings": "AAuCQ,cAaA,YAbA;AAtCR,SAAS,YAAY;AACrB,SAAS,MAAM,cAAsC;AAErD,SAAS,qBAAqB;AAC9B,YAAY,YAAY;AACxB,SAAS,8BAA8B;AACvC,SAAS,qBAAqB;AAiBvB,MAAM,YAAY,KAAK,CAAC,EAAE,SAAS,MAAsB;AAC9D,QAAM,EAAE,SAAS,SAAS,OAAO,QAAQ,IAAI;AAAA,IAC3C;AAAA,IACA;AAAA,EACF;AAEA,QAAM,kBAAkB,OAAe;AACvC,QAAM,kBAAkB,OAAe;AAEvC,QAAM,WAAW,WAAW;AAC5B,QAAM,kBAAkB,YAAY;AAEpC,SACE,qBAAC,iBACE;AAAA,cACC;AAAA,MAAC,cAAc;AAAA,MAAd;AAAA,QACE,GAAG,QAAQ;AAAA,QACZ,KAAK,QAAQ;AAAA,QACb,UAAU,CAAC,UAAU;AACnB,0BAAgB,UAAU;AAC1B,kBAAQ,MAAM,WAAW,KAAK;AAAA,QAChC;AAAA,QACA,cAAc,gBAAgB,WAAW,QAAQ,MAAM;AAAA,QAEtD,kBAAQ;AAAA;AAAA,IACX,IACE;AAAA,IACJ,oBAAC,cAAc,SAAd,EACC,+BAAC,iBACC;AAAA;AAAA,QAAC,cAAc;AAAA,QAAd;AAAA,UACE,GAAG,UAAU;AAAA,UACd,KAAK,UAAU;AAAA,UACf,WAAW;AAAA,YACT,mBAAmB,OAAO;AAAA,YAC1B,UAAU,MAAM;AAAA,UAClB;AAAA,UAEC,oBAAU;AAAA;AAAA,MACb;AAAA,MACC,UACC;AAAA,QAAC,cAAc;AAAA,QAAd;AAAA,UACE,GAAG,QAAQ;AAAA,UACZ,KAAK,QAAQ;AAAA,UACb,UAAU,CAAC,UAAU;AACnB,4BAAgB,UAAU;AAC1B,oBAAQ,MAAM,WAAW,KAAK;AAAA,UAChC;AAAA,UACA,cACE,gBAAgB,WAAW,QAAQ,MAAM;AAAA,UAG1C,kBAAQ;AAAA;AAAA,MACX,IACE;AAAA,OACN,GACF;AAAA,KACF;AAEJ,CAAC;AAED,UAAU,cAAc;",
+  "names": []
+}

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

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

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

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import {
+  Children
+} from "react";
+import { useIntl } from "react-intl";
+import {
+  OverlayIcon,
+  SplitPanelIcon,
+  XmarkIcon
+} from "@dynatrace/strato-icons";
+import * as styles from "./DetailsControlBar.sty.js";
+import { useDetailsLayoutContext } from "./DetailsLayoutContext.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 intl = useIntl();
+  const hasCustomActions = Children.count(children) > 0;
+  const closeLabel = intl.formatMessage({
+    defaultMessage: "Close details",
+    id: "UK0OoP7XF++evklW",
+    description: "Label for the button that closes the details panel."
+  });
+  const switchToOverlayLabel = intl.formatMessage({
+    defaultMessage: "Switch to overlay",
+    id: "+mEjL2q8RACwzIMR",
+    description: "Label for the button that switches the details panel to overlay mode."
+  });
+  const switchToSplitLabel = intl.formatMessage({
+    defaultMessage: "Switch to side-by-side",
+    id: "RST92XLweEz0Qott",
+    description: "Label for the button that switches the details panel to split mode."
+  });
+  const handleClose = () => {
+    context?.setCollapsed(true);
+  };
+  const handleLayoutToggle = () => {
+    if (!context) {
+      return;
+    }
+    context.setPreferredLayout(
+      context.preferredLayout === "split" ? "overlay" : "split"
+    );
+  };
+  const showLayoutToggle = context?.mode ? ["overlay", "split"].includes(context.mode) : false;
+  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 }),
+    /* @__PURE__ */ jsxs("div", { className: styles.defaultActions, children: [
+      showLayoutToggle && /* @__PURE__ */ jsx(
+        Button,
+        {
+          "aria-label": isSplit ? switchToOverlayLabel : switchToSplitLabel,
+          onClick: handleLayoutToggle,
+          children: /* @__PURE__ */ jsx(Button.Prefix, { children: isSplit ? /* @__PURE__ */ jsx(OverlayIcon, {}) : /* @__PURE__ */ jsx(SplitPanelIcon, {}) })
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { "aria-label": closeLabel, onClick: handleClose, children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(XmarkIcon, {}) }) })
+    ] })
+  ] });
+};
+DetailsControlBar.displayName = "PageLayout.Details.ControlBar";
+export {
+  DetailsControlBar
+};
+//# sourceMappingURL=DetailsControlBar.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/layouts/page-layout/details-layout/DetailsControlBar.tsx"],
+  "sourcesContent": ["import { clsx } from 'clsx';\nimport {\n  Children,\n  type ComponentPropsWithoutRef,\n  type PropsWithChildren,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  OverlayIcon,\n  SplitPanelIcon,\n  XmarkIcon,\n} from '@dynatrace/strato-icons';\n\nimport * as styles from './DetailsControlBar.sty.js';\nimport { useDetailsLayoutContext } from './DetailsLayoutContext.js';\nimport { Button } from '../../../buttons/button/Button.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 * @internal\n */\nexport interface DetailsControlBarProps\n  extends PropsWithChildren,\n    ComponentPropsWithoutRef<'div'> {}\n\n/** @internal */\nexport const DetailsControlBar = (props: DetailsControlBarProps) => {\n  const { children, className, ...restProps } = props;\n  const context = useDetailsLayoutContext();\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    if (!context) {\n      return;\n    }\n\n    context.setPreferredLayout(\n      context.preferredLayout === 'split' ? 'overlay' : 'split',\n    );\n  };\n\n  const showLayoutToggle = context?.mode\n    ? ['overlay', 'split'].includes(context.mode)\n    : false;\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 && <Divider orientation=\"vertical\" as=\"hr\" flexItem />}\n      <div className={styles.defaultActions}>\n        {showLayoutToggle && (\n          <Button\n            aria-label={isSplit ? switchToOverlayLabel : switchToSplitLabel}\n            onClick={handleLayoutToggle}\n          >\n            <Button.Prefix>\n              {isSplit ? <OverlayIcon /> : <SplitPanelIcon />}\n            </Button.Prefix>\n          </Button>\n        )}\n        <Button aria-label={closeLabel} onClick={handleClose}>\n          <Button.Prefix>\n            <XmarkIcon />\n          </Button.Prefix>\n        </Button>\n      </div>\n    </div>\n  );\n};\n\nDetailsControlBar.displayName = 'PageLayout.Details.ControlBar';\n"],
+  "mappings": "AA6EQ,cAGF,YAHE;AA7ER,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,OAGK;AACP,SAAS,eAAe;AAExB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,YAAY,YAAY;AACxB,SAAS,+BAA+B;AACxC,SAAS,cAAc;AACvB,SAAS,eAAe;AAWjB,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,aAAS,aAAa,IAAI;AAAA,EAC5B;AAEA,QAAM,qBAAqB,MAAM;AAC/B,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AAEA,YAAQ;AAAA,MACN,QAAQ,oBAAoB,UAAU,YAAY;AAAA,IACpD;AAAA,EACF;AAEA,QAAM,mBAAmB,SAAS,OAC9B,CAAC,WAAW,OAAO,EAAE,SAAS,QAAQ,IAAI,IAC1C;AACJ,QAAM,UAAU,SAAS,oBAAoB;AAE7C,SACE,qBAAC,SAAK,GAAG,WAAW,WAAW,KAAK,OAAO,YAAY,SAAS,GAC7D;AAAA,wBACC,oBAAC,SAAI,WAAW,OAAO,eAAgB,UAAS;AAAA,IAEjD,oBAAoB,oBAAC,WAAQ,aAAY,YAAW,IAAG,MAAK,UAAQ,MAAC;AAAA,IACtE,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,eAAY,IAAK,oBAAC,kBAAe,GAC/C;AAAA;AAAA,MACF;AAAA,MAEF,oBAAC,UAAO,cAAY,YAAY,SAAS,aACvC,8BAAC,OAAO,QAAP,EACC,8BAAC,aAAU,GACb,GACF;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,kBAAkB,cAAc;",
+  "names": []
+}

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

@@ -0,0 +1,10 @@
+import "./DetailsControlBar.css";
+var controlBar = "_1y5ro0l0-3-2-0";
+var customActions = "_1y5ro0l1-3-2-0";
+var defaultActions = "_1y5ro0l2-3-2-0";
+export {
+  controlBar,
+  customActions,
+  defaultActions
+};
+//# sourceMappingURL=DetailsControlBar.sty.js.map

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

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

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

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

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

@@ -0,0 +1,197 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import {
+  forwardRef,
+  memo,
+  useMemo,
+  useRef
+} from "react";
+import { useIntl } from "react-intl";
+import * as styles from "./DetailsLayout.sty.js";
+import { DetailsLayoutContext } from "./DetailsLayoutContext.js";
+import { Overlay, OVERLAY_HANDLE_WIDTH } from "./Overlay.js";
+import {
+  ContentSlot,
+  DetailsSlot,
+  extractSlotsProps
+} from "./slots.js";
+import { useLayoutState } from "./useLayoutState.js";
+import { useMergeRefs } from "../../../core/hooks/useMergeRefs.js";
+import { Drawer } from "../../../overlays/drawer/Drawer.js";
+import { SplitLayout } from "../../split-layout/SplitLayout.js";
+import { convertToPx } from "../../split-layout/width-utils.js";
+import { useTeleport } from "../shared/useTeleport.js";
+function renderLayout({
+  details,
+  content,
+  layout,
+  persistedPanelWidth,
+  contentTeleport,
+  panelTeleport,
+  detailsAriaLabel
+}) {
+  const contentNode = /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: content.ref,
+      ...content.domProps,
+      className: clsx(styles.content, content.domProps.className),
+      children: /* @__PURE__ */ jsx(contentTeleport.Slot, {})
+    }
+  );
+  if (!details) {
+    return contentNode;
+  }
+  switch (layout.mode) {
+    case "collapsed": {
+      return contentNode;
+    }
+    case "split": {
+      return /* @__PURE__ */ jsxs(SplitLayout, { children: [
+        /* @__PURE__ */ jsx(
+          SplitLayout.Content,
+          {
+            ...content.domProps,
+            ref: content.ref,
+            minWidth: content.config.minWidth,
+            className: clsx(styles.content, content.domProps.className),
+            children: /* @__PURE__ */ jsx(contentTeleport.Slot, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SplitLayout.Panel,
+          {
+            ...details.domProps,
+            ref: details.ref,
+            minWidth: details.config.minWidth,
+            maxWidth: details.config.maxWidth,
+            defaultWidth: persistedPanelWidth.current ?? details.config.defaultWidth,
+            onResize: (value) => {
+              persistedPanelWidth.current = value;
+              details.config.onResize?.(value);
+            },
+            resizable: details.config.resizable,
+            position: "end",
+            className: clsx(styles.panel, details.domProps.className),
+            "aria-label": detailsAriaLabel,
+            children: /* @__PURE__ */ jsx(panelTeleport.Slot, {})
+          }
+        )
+      ] });
+    }
+    case "overlay": {
+      if (layout.containerWidth === 0) {
+        return contentNode;
+      }
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        contentNode,
+        /* @__PURE__ */ jsx(
+          Overlay,
+          {
+            ...details.domProps,
+            ref: details.ref,
+            minWidth: convertToPx(
+              details.config.minWidth,
+              layout.containerWidth
+            ),
+            maxWidth: details.config.resizable ? layout.containerWidth - OVERLAY_HANDLE_WIDTH : layout.containerWidth,
+            defaultWidth: persistedPanelWidth.current ?? convertToPx(details.config.defaultWidth, layout.containerWidth),
+            resizable: details.config.resizable,
+            onResize: (value) => {
+              persistedPanelWidth.current = value;
+              details.config.onResize?.(value);
+            },
+            children: /* @__PURE__ */ jsx(panelTeleport.Slot, {})
+          }
+        )
+      ] });
+    }
+    case "drawer": {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        contentNode,
+        /* @__PURE__ */ jsx(
+          Drawer,
+          {
+            className: styles.drawer,
+            isDismissed: layout.collapsed,
+            onDismiss: (state) => layout.setCollapsed(state),
+            placement: "right",
+            width: "wide",
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                ...details.domProps,
+                ref: details.ref,
+                className: clsx(styles.drawerContent, details.domProps.className),
+                children: /* @__PURE__ */ jsx(panelTeleport.Slot, {})
+              }
+            )
+          }
+        )
+      ] });
+    }
+  }
+}
+const LayoutRootRef = forwardRef((props, ref) => {
+  const { children, className: rootClassName, ...rootProps } = props;
+  const intl = useIntl();
+  const containerRef = useRef(null);
+  const { content, details } = extractSlotsProps(children);
+  const layout = useLayoutState({ details, containerRef });
+  const rootRef = useMergeRefs([ref, containerRef]);
+  const persistedPanelWidth = useRef();
+  const contentTeleport = useTeleport();
+  const panelTeleport = useTeleport();
+  const contextValue = useMemo(
+    () => ({
+      collapsed: layout.collapsed,
+      setCollapsed: layout.setCollapsed,
+      preferredLayout: layout.preferredLayoutMode,
+      setPreferredLayout: layout.setPreferredLayoutMode,
+      mode: layout.mode
+    }),
+    [
+      layout.collapsed,
+      layout.setCollapsed,
+      layout.preferredLayoutMode,
+      layout.setPreferredLayoutMode,
+      layout.mode
+    ]
+  );
+  const detailsAriaLabel = intl.formatMessage({
+    defaultMessage: "Details",
+    id: "o3A99RFWS+N7bJe8",
+    description: "Accessible label for the details panel."
+  });
+  return /* @__PURE__ */ jsxs(DetailsLayoutContext.Provider, { value: contextValue, children: [
+    /* @__PURE__ */ jsx(contentTeleport.Source, { children: content.children }),
+    details && /* @__PURE__ */ jsx(panelTeleport.Source, { children: details.children }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...rootProps,
+        ref: rootRef,
+        className: clsx(styles.layoutRoot, rootClassName),
+        children: renderLayout({
+          details,
+          content,
+          layout,
+          persistedPanelWidth,
+          contentTeleport,
+          panelTeleport,
+          detailsAriaLabel
+        })
+      }
+    )
+  ] });
+});
+LayoutRootRef.displayName = "ForwardRef (DetailsLayout.Root)";
+const LayoutRoot = memo(LayoutRootRef);
+const DetailsLayout = Object.assign(LayoutRoot, {
+  Content: ContentSlot,
+  Details: DetailsSlot
+});
+export {
+  DetailsLayout
+};
+//# sourceMappingURL=DetailsLayout.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/layouts/page-layout/details-layout/DetailsLayout.tsx"],
+  "sourcesContent": ["import { clsx } from 'clsx';\nimport {\n  forwardRef,\n  memo,\n  useMemo,\n  useRef,\n  type ComponentPropsWithoutRef,\n  type MutableRefObject,\n  type PropsWithChildren,\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  ContentSlot,\n  DetailsSlot,\n  extractSlotsProps,\n  type ExtractedContentSlot,\n  type ExtractedDetailsSlot,\n} from './slots.js';\nimport { useLayoutState } from './useLayoutState.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport { Drawer } from '../../../overlays/drawer/Drawer.js';\nimport { SplitLayout } from '../../split-layout/SplitLayout.js';\nimport { convertToPx } from '../../split-layout/width-utils.js';\nimport { useTeleport } from '../shared/useTeleport.js';\n\n/** @internal */\nexport interface RootProps\n  extends PropsWithChildren,\n    ComponentPropsWithoutRef<'div'> {}\n\ntype TeleportPair = ReturnType<typeof useTeleport>;\n\nfunction renderLayout({\n  details,\n  content,\n  layout,\n  persistedPanelWidth,\n  contentTeleport,\n  panelTeleport,\n  detailsAriaLabel,\n}: {\n  details: ExtractedDetailsSlot | null;\n  content: ExtractedContentSlot;\n  layout: ReturnType<typeof useLayoutState>;\n  persistedPanelWidth: MutableRefObject<number | undefined>;\n  contentTeleport: TeleportPair;\n  panelTeleport: TeleportPair;\n  detailsAriaLabel: string;\n}) {\n  const contentNode = (\n    <div\n      ref={content.ref}\n      {...content.domProps}\n      className={clsx(styles.content, content.domProps.className)}\n    >\n      <contentTeleport.Slot />\n    </div>\n  );\n\n  if (!details) {\n    return contentNode;\n  }\n\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.Slot />\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              persistedPanelWidth.current ?? details.config.defaultWidth\n            }\n            onResize={(value) => {\n              persistedPanelWidth.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.Slot />\n          </SplitLayout.Panel>\n        </SplitLayout>\n      );\n    }\n    case 'overlay': {\n      // Defer mounting the Overlay until the container has been\n      // measured. Without this guard, convertToPx(\"25%\", 0) = 0 would\n      // be passed as defaultWidth and locked into Overlay's useState\n      // before the ResizeObserver fires with the real container width.\n      if (layout.containerWidth === 0) {\n        return contentNode;\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              persistedPanelWidth.current ??\n              convertToPx(details.config.defaultWidth, layout.containerWidth)\n            }\n            resizable={details.config.resizable}\n            onResize={(value) => {\n              persistedPanelWidth.current = value;\n              // TODO: should we communicate which layout mode was updated?\n              details.config.onResize?.(value);\n            }}\n          >\n            <panelTeleport.Slot />\n          </Overlay>\n        </>\n      );\n    }\n    case 'drawer': {\n      return (\n        <>\n          {contentNode}\n          <Drawer\n            className={styles.drawer}\n            isDismissed={layout.collapsed}\n            onDismiss={(state) => layout.setCollapsed(state)}\n            placement=\"right\"\n            width=\"wide\"\n          >\n            <div\n              {...details.domProps}\n              ref={details.ref}\n              className={clsx(styles.drawerContent, details.domProps.className)}\n            >\n              <panelTeleport.Slot />\n            </div>\n          </Drawer>\n        </>\n      );\n    }\n  }\n}\n\nconst LayoutRootRef = forwardRef<HTMLDivElement, RootProps>((props, ref) => {\n  const { children, className: rootClassName, ...rootProps } = props;\n\n  const intl = useIntl();\n  const containerRef = useRef<HTMLDivElement>(null);\n  const { content, details } = extractSlotsProps(children);\n  const layout = useLayoutState({ details, containerRef });\n  const rootRef = useMergeRefs([ref, containerRef]);\n\n  const persistedPanelWidth = useRef<number>();\n\n  const contentTeleport = useTeleport();\n  const panelTeleport = useTeleport();\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  const detailsAriaLabel = intl.formatMessage({\n    defaultMessage: 'Details',\n    id: 'o3A99RFWS+N7bJe8',\n    description: 'Accessible label for the details panel.',\n  });\n\n  return (\n    <DetailsLayoutContext.Provider value={contextValue}>\n      <contentTeleport.Source>{content.children}</contentTeleport.Source>\n      {details && (\n        <panelTeleport.Source>{details.children}</panelTeleport.Source>\n      )}\n      <div\n        {...rootProps}\n        ref={rootRef}\n        className={clsx(styles.layoutRoot, rootClassName)}\n      >\n        {renderLayout({\n          details,\n          content,\n          layout,\n          persistedPanelWidth,\n          contentTeleport,\n          panelTeleport,\n          detailsAriaLabel,\n        })}\n      </div>\n    </DetailsLayoutContext.Provider>\n  );\n});\n(LayoutRootRef as typeof LayoutRootRef & { displayName: string }).displayName =\n  'ForwardRef (DetailsLayout.Root)';\nconst LayoutRoot = memo(LayoutRootRef);\n\n/** @internal */\nexport const DetailsLayout = Object.assign(LayoutRoot, {\n  Content: ContentSlot,\n  Details: DetailsSlot,\n});\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,14 @@
+import "./DetailsLayout.css";
+var content = "_1377n3n2-3-2-0";
+var drawer = "_1377n3n3-3-2-0";
+var drawerContent = "_1377n3n4-3-2-0";
+var layoutRoot = "_1377n3n0-3-2-0";
+var panel = "_1377n3n1-3-2-0";
+export {
+  content,
+  drawer,
+  drawerContent,
+  layoutRoot,
+  panel
+};
+//# sourceMappingURL=DetailsLayout.sty.js.map

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

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

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

@@ -0,0 +1,13 @@
+import {
+  createContext,
+  useContext
+} from "react";
+const DetailsLayoutContext = createContext(null);
+function useDetailsLayoutContext() {
+  return useContext(DetailsLayoutContext);
+}
+export {
+  DetailsLayoutContext,
+  useDetailsLayoutContext
+};
+//# sourceMappingURL=DetailsLayoutContext.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/layouts/page-layout/details-layout/DetailsLayoutContext.ts"],
+  "sourcesContent": ["import {\n  createContext,\n  useContext,\n  type Dispatch,\n  type SetStateAction,\n} from 'react';\n\n/**\n * Determines how the details panel is rendered relative to the content.\n * @internal\n */\nexport type LayoutMode = 'split' | 'overlay';\n\ntype RenderedLayout = 'split' | 'collapsed' | 'overlay' | 'drawer';\n\n/** @internal */\nexport interface DetailsLayoutContextValue {\n  collapsed: boolean;\n  setCollapsed: Dispatch<SetStateAction<boolean>>;\n  preferredLayout: LayoutMode;\n  setPreferredLayout: Dispatch<SetStateAction<LayoutMode>>;\n  mode: RenderedLayout;\n}\n\n/** @internal */\nexport const DetailsLayoutContext =\n  createContext<DetailsLayoutContextValue | null>(null);\n\n/** @internal */\nexport function useDetailsLayoutContext() {\n  return useContext(DetailsLayoutContext);\n}\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAoBA,MAAM,uBACX,cAAgD,IAAI;AAG/C,SAAS,0BAA0B;AACxC,SAAO,WAAW,oBAAoB;AACxC;",
+  "names": []
+}

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

@@ -0,0 +1,64 @@
+._15qr1eq0-3-2-0 {
+  position: absolute;
+  z-index: 1;
+  right: 0;
+  top: 0;
+  box-sizing: border-box;
+  height: 100%;
+  max-width: 100%;
+  background-color: var(--dt-colors-background-base-default, #f9f9fa);
+  border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
+  border-bottom-left-radius: var(--dt-borders-radius-surface-default, 12px);
+  box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
+  display: flex;
+}
+._15qr1eq1-3-2-0 {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  padding: var(--dt-spacings-size-16, 16px);
+  flex-grow: 1;
+}
+._15qr1eq2-3-2-0 {
+  height: 100%;
+  flex-shrink: 0;
+  position: relative;
+  width: var(--dt-spacings-size-8, 8px);
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+._15qr1eq3-3-2-0 {
+  background-color: var(--dt-colors-border-neutral-accent, #595a7d);
+  border: none;
+  border-radius: var(--dt-borders-radius-field-default, 6px);
+  cursor: col-resize;
+  height: var(--dt-spacings-size-36, 36px);
+  left: 3px;
+  margin: 0;
+  padding: 0;
+  touch-action: none;
+  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-2-0:focus-visible {
+  width: 100%;
+}
+._15qr1eq3-3-2-0:hover._15qr1eq3-3-2-0:focus-visible {
+  width: 2px;
+}
+._15qr1eq3-3-2-0:focus-visible, ._15qr1eq3-3-2-0:hover {
+  height: var(--dt-spacings-size-48, 48px);
+  background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
+}
+._15qr1eq3-3-2-0:after {
+  content: "";
+  display: block;
+  height: 100%;
+  left: 50%;
+  position: absolute;
+  top: 0;
+  transform: translateX(-50%);
+  user-select: none;
+  width: 100%;
+}