@dynatrace/strato-components 3.2.1 → 3.3.0

package/esm/layouts/page-layout/sidebar-layout/SidebarLayout.js

@@ -3,6 +3,7 @@ import { clsx } from "clsx";
 import {
   forwardRef,
   memo,
+  useMemo,
   useRef
 } from "react";
 import { useIntl } from "react-intl";
@@ -12,7 +13,11 @@ import {
   XmarkIcon
 } from "@dynatrace/strato-icons";
 import * as styles from "./SidebarLayout.sty.js";
-import { ContentSlot, SidebarSlot, extractSlotsProps } from "./slots.js";
+import {
+  ContentSlot,
+  SidebarSlot,
+  extractSlotsProps
+} from "./slots.js";
 import { useButtonFocusHandover } from "./useFocusHandover.js";
 import { useLayoutState } from "./useLayoutState.js";
 import { Button } from "../../../buttons/button/Button.js";
@@ -22,12 +27,234 @@ import { Drawer } from "../../../overlays/drawer/Drawer.js";
 import { Tooltip } from "../../../overlays/tooltip/Tooltip.js";
 import { SplitLayout } from "../../split-layout/SplitLayout.js";
 import { useTeleport } from "../shared/useTeleport.js";
+function renderLayout({
+  sidebar,
+  content,
+  layout,
+  panelId,
+  persistedPanelWidth,
+  contentTeleport,
+  panelTeleport,
+  expandSidebarLabel,
+  collapseSidebarLabel,
+  sidebarLabel,
+  focusHandover,
+  setCollapsedWithFocusHandover
+}) {
+  if (!sidebar) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: content.ref,
+        ...content.domProps,
+        className: clsx(styles.content, content.domProps.className),
+        children: /* @__PURE__ */ jsx(contentTeleport.Target, {})
+      }
+    );
+  }
+  switch (layout.mode) {
+    case "collapsed": {
+      if (sidebar.config.integratedControls) {
+        return /* @__PURE__ */ jsxs("div", { className: styles.collapsedSidebarWrapper, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.collapsedSidebar, id: panelId, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: styles.hint,
+                type: "button",
+                onClick: () => {
+                  setCollapsedWithFocusHandover(false);
+                },
+                tabIndex: -1,
+                "aria-hidden": "true",
+                "aria-label": expandSidebarLabel
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: styles.expandButtonContainer, children: /* @__PURE__ */ jsx(Tooltip, { text: expandSidebarLabel, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                className: styles.expandButton,
+                "aria-expanded": "false",
+                ref: focusHandover.expandButtonRef,
+                "aria-controls": panelId,
+                "aria-label": expandSidebarLabel,
+                size: "condensed",
+                "data-dt-name": "ExpandCollapse",
+                "data-dt-properties": "state:expand",
+                onClick: () => {
+                  setCollapsedWithFocusHandover(false);
+                },
+                children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(ChevronSmallRightDoubleIcon, {}) })
+              }
+            ) }) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: content.ref,
+              ...content.domProps,
+              className: clsx(styles.content, content.domProps.className),
+              children: /* @__PURE__ */ jsx(contentTeleport.Target, {})
+            }
+          )
+        ] });
+      }
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: content.ref,
+          ...content.domProps,
+          className: clsx(styles.content, content.domProps.className),
+          children: /* @__PURE__ */ jsx(contentTeleport.Target, {})
+        }
+      );
+    }
+    case "split": {
+      const splitLayoutKey = persistedPanelWidth.current === void 0 ? `split-${String(sidebar.config.defaultWidth)}` : "split-resized";
+      return /* @__PURE__ */ jsxs(SplitLayout, { children: [
+        /* @__PURE__ */ jsx(
+          SplitLayout.Panel,
+          {
+            ...sidebar.domProps,
+            ref: sidebar.ref,
+            minWidth: sidebar.config.minWidth,
+            maxWidth: sidebar.config.maxWidth,
+            defaultWidth: persistedPanelWidth.current ?? sidebar.config.defaultWidth,
+            resizable: sidebar.config.resizable,
+            position: "start",
+            onResize: (value) => {
+              persistedPanelWidth.current = value;
+              sidebar.config.onResize?.(value);
+            },
+            className: clsx(styles.panel, sidebar.domProps.className),
+            "aria-label": sidebarLabel,
+            id: panelId,
+            children: /* @__PURE__ */ jsx(panelTeleport.Target, {})
+          }
+        ),
+        sidebar.config.integratedControls && /* @__PURE__ */ jsx(SplitLayout.ResizeHandle, { className: styles.resizeHandle, children: /* @__PURE__ */ jsx("div", { className: styles.collapseButtonContainer, children: /* @__PURE__ */ jsx(Tooltip, { text: collapseSidebarLabel, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: styles.collapseButton,
+            "aria-expanded": "true",
+            ref: focusHandover.collapseButtonRef,
+            "aria-controls": panelId,
+            "aria-label": collapseSidebarLabel,
+            size: "condensed",
+            "data-dt-name": "ExpandCollapse",
+            "data-dt-properties": "state:collapse",
+            onClick: () => {
+              setCollapsedWithFocusHandover(true);
+            },
+            children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(ChevronSmallLeftDoubleIcon, {}) })
+          }
+        ) }) }) }),
+        /* @__PURE__ */ jsx(
+          SplitLayout.Content,
+          {
+            ...content.domProps,
+            ref: content.ref,
+            minWidth: content.config.minWidth,
+            className: clsx(styles.content, content.domProps.className),
+            children: /* @__PURE__ */ jsx(contentTeleport.Target, {})
+          }
+        )
+      ] }, splitLayoutKey);
+    }
+    case "drawer": {
+      const drawerContentArea = /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: content.ref,
+          ...content.domProps,
+          className: clsx(styles.content, content.domProps.className),
+          children: /* @__PURE__ */ jsx(contentTeleport.Target, {})
+        }
+      );
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        sidebar.config.integratedControls ? /* @__PURE__ */ jsxs("div", { className: styles.collapsedSidebarWrapper, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.collapsedSidebar, id: panelId, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: styles.hint,
+                type: "button",
+                onClick: () => {
+                  setCollapsedWithFocusHandover(false);
+                },
+                tabIndex: -1,
+                "aria-hidden": "true",
+                "aria-label": expandSidebarLabel
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: styles.expandButtonContainer, children: /* @__PURE__ */ jsx(Tooltip, { text: expandSidebarLabel, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                className: styles.expandButton,
+                "aria-expanded": layout.collapsed ? "false" : "true",
+                ref: focusHandover.expandButtonRef,
+                "aria-controls": panelId,
+                "aria-label": expandSidebarLabel,
+                size: "condensed",
+                "data-dt-name": "ExpandCollapse",
+                "data-dt-properties": "state:expand",
+                onClick: () => {
+                  setCollapsedWithFocusHandover(false);
+                },
+                children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(ChevronSmallRightDoubleIcon, {}) })
+              }
+            ) }) })
+          ] }),
+          drawerContentArea
+        ] }) : drawerContentArea,
+        /* @__PURE__ */ jsxs(
+          Drawer,
+          {
+            className: styles.drawer,
+            isDismissed: layout.collapsed,
+            onDismiss: (state, _reason) => {
+              setCollapsedWithFocusHandover(state);
+            },
+            placement: "left",
+            width: "wide",
+            children: [
+              sidebar.config.integratedControls && /* @__PURE__ */ jsx("div", { className: styles.drawerHeader, children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  style: { marginLeft: "auto" },
+                  ref: focusHandover.collapseButtonRef,
+                  "aria-label": collapseSidebarLabel,
+                  "data-dt-name": "CloseX",
+                  onClick: () => {
+                    setCollapsedWithFocusHandover(true);
+                  },
+                  children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(XmarkIcon, {}) })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ...sidebar.domProps,
+                  ref: sidebar.ref,
+                  className: clsx(styles.drawerContent, sidebar.domProps.className),
+                  children: /* @__PURE__ */ jsx(panelTeleport.Target, {})
+                }
+              )
+            ]
+          }
+        )
+      ] });
+    }
+  }
+}
 const LayoutRoot = memo(
   forwardRef((props, ref) => {
     const { children, className: rootClassName, ...rootProps } = props;
     const panelId = useId();
     const containerRef = useRef(null);
-    const { sidebar, content } = extractSlotsProps(children);
+    const { sidebar, content } = useMemo(() => {
+      return extractSlotsProps(children);
+    }, [children]);
     const layout = useLayoutState({ sidebar, containerRef });
     const rootRef = useMergeRefs([ref, containerRef]);
     const persistedPanelWidth = useRef();
@@ -43,6 +270,11 @@ const LayoutRoot = memo(
       id: "LJ0fyD2++VZgZ5g0",
       description: "Label for the button that collapses the sidebar."
     });
+    const sidebarLabel = intl.formatMessage({
+      defaultMessage: "Sidebar",
+      id: "BYUJpW8TBonAxnYd",
+      description: "Accessible label for the sidebar panel."
+    });
     const setCollapsedWithFocusHandover = (value) => {
       layout.setCollapsed(value);
       if (sidebar?.config.integratedControls) {
@@ -60,231 +292,20 @@ const LayoutRoot = memo(
           ...rootProps,
           ref: rootRef,
           className: clsx(styles.layoutRoot, rootClassName),
-          children: (() => {
-            if (!sidebar) {
-              return /* @__PURE__ */ jsx(
-                "div",
-                {
-                  ref: content.ref,
-                  ...content.domProps,
-                  className: clsx(styles.content, content.domProps.className),
-                  children: /* @__PURE__ */ jsx(contentTeleport.Slot, {})
-                }
-              );
-            }
-            switch (layout.mode) {
-              case "collapsed": {
-                if (sidebar.config.integratedControls) {
-                  return /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      style: { display: "flex", height: "100%", width: "100%" },
-                      children: [
-                        /* @__PURE__ */ jsxs("div", { className: styles.collapsedSidebar, id: panelId, children: [
-                          /* @__PURE__ */ jsx(
-                            "button",
-                            {
-                              className: styles.hint,
-                              type: "button",
-                              onClick: () => {
-                                setCollapsedWithFocusHandover(false);
-                              },
-                              tabIndex: -1,
-                              "aria-hidden": "true",
-                              "aria-label": expandSidebarLabel
-                            }
-                          ),
-                          /* @__PURE__ */ jsx("div", { className: styles.expandButtonContainer, children: /* @__PURE__ */ jsx(Tooltip, { text: expandSidebarLabel, children: /* @__PURE__ */ jsx(
-                            Button,
-                            {
-                              className: styles.expandButton,
-                              "aria-expanded": "false",
-                              ref: focusHandover.expandButtonRef,
-                              "aria-controls": panelId,
-                              "aria-label": expandSidebarLabel,
-                              size: "condensed",
-                              onClick: () => {
-                                setCollapsedWithFocusHandover(false);
-                              },
-                              children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(ChevronSmallRightDoubleIcon, {}) })
-                            }
-                          ) }) })
-                        ] }),
-                        /* @__PURE__ */ jsx(
-                          "div",
-                          {
-                            ref: content.ref,
-                            ...content.domProps,
-                            className: clsx(
-                              styles.content,
-                              content.domProps.className
-                            ),
-                            children: /* @__PURE__ */ jsx(contentTeleport.Slot, {})
-                          }
-                        )
-                      ]
-                    }
-                  );
-                }
-                return /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    ref: content.ref,
-                    ...content.domProps,
-                    className: clsx(styles.content, content.domProps.className),
-                    children: /* @__PURE__ */ jsx(contentTeleport.Slot, {})
-                  }
-                );
-              }
-              case "split": {
-                const splitLayoutKey = persistedPanelWidth.current === void 0 ? `split-${String(sidebar.config.defaultWidth)}` : "split-resized";
-                return /* @__PURE__ */ jsxs(SplitLayout, { children: [
-                  /* @__PURE__ */ jsx(
-                    SplitLayout.Panel,
-                    {
-                      ...sidebar.domProps,
-                      ref: sidebar.ref,
-                      minWidth: sidebar.config.minWidth,
-                      maxWidth: sidebar.config.maxWidth,
-                      defaultWidth: persistedPanelWidth.current ?? sidebar.config.defaultWidth,
-                      resizable: sidebar.config.resizable,
-                      position: "start",
-                      onResize: (value) => {
-                        persistedPanelWidth.current = value;
-                        sidebar.config.onResize?.(value);
-                      },
-                      className: clsx(styles.panel, sidebar.domProps.className),
-                      "aria-label": "Sidebar",
-                      id: panelId,
-                      children: /* @__PURE__ */ jsx(panelTeleport.Slot, {})
-                    }
-                  ),
-                  sidebar.config.integratedControls && /* @__PURE__ */ jsx(SplitLayout.ResizeHandle, { className: styles.resizeHandle, children: /* @__PURE__ */ jsx("div", { className: styles.collapseButtonContainer, children: /* @__PURE__ */ jsx(Tooltip, { text: collapseSidebarLabel, children: /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      className: styles.collapseButton,
-                      "aria-expanded": "true",
-                      ref: focusHandover.collapseButtonRef,
-                      "aria-controls": panelId,
-                      "aria-label": collapseSidebarLabel,
-                      size: "condensed",
-                      onClick: () => {
-                        setCollapsedWithFocusHandover(true);
-                      },
-                      children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(ChevronSmallLeftDoubleIcon, {}) })
-                    }
-                  ) }) }) }),
-                  /* @__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, {})
-                    }
-                  )
-                ] }, splitLayoutKey);
-              }
-              case "drawer": {
-                const drawerContentArea = /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    ref: content.ref,
-                    ...content.domProps,
-                    className: clsx(styles.content, content.domProps.className),
-                    children: /* @__PURE__ */ jsx(contentTeleport.Slot, {})
-                  }
-                );
-                return /* @__PURE__ */ jsxs(Fragment, { children: [
-                  sidebar.config.integratedControls ? /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      style: {
-                        display: "flex",
-                        height: "100%",
-                        width: "100%"
-                      },
-                      children: [
-                        /* @__PURE__ */ jsxs("div", { className: styles.collapsedSidebar, id: panelId, children: [
-                          /* @__PURE__ */ jsx(
-                            "button",
-                            {
-                              className: styles.hint,
-                              type: "button",
-                              onClick: () => {
-                                setCollapsedWithFocusHandover(false);
-                              },
-                              tabIndex: -1,
-                              "aria-hidden": "true",
-                              "aria-label": expandSidebarLabel
-                            }
-                          ),
-                          /* @__PURE__ */ jsx("div", { className: styles.expandButtonContainer, children: /* @__PURE__ */ jsx(Tooltip, { text: expandSidebarLabel, children: /* @__PURE__ */ jsx(
-                            Button,
-                            {
-                              className: styles.expandButton,
-                              "aria-expanded": layout.collapsed ? "false" : "true",
-                              ref: focusHandover.expandButtonRef,
-                              "aria-controls": panelId,
-                              "aria-label": expandSidebarLabel,
-                              size: "condensed",
-                              onClick: () => {
-                                setCollapsedWithFocusHandover(false);
-                              },
-                              children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(ChevronSmallRightDoubleIcon, {}) })
-                            }
-                          ) }) })
-                        ] }),
-                        drawerContentArea
-                      ]
-                    }
-                  ) : drawerContentArea,
-                  /* @__PURE__ */ jsxs(
-                    Drawer,
-                    {
-                      className: styles.drawer,
-                      isDismissed: layout.collapsed,
-                      onDismiss: (state, _reason) => {
-                        setCollapsedWithFocusHandover(state);
-                      },
-                      placement: "left",
-                      width: "wide",
-                      children: [
-                        sidebar.config.integratedControls && /* @__PURE__ */ jsx("div", { className: styles.drawerHeader, children: /* @__PURE__ */ jsx(
-                          Button,
-                          {
-                            style: { marginLeft: "auto" },
-                            ref: focusHandover.collapseButtonRef,
-                            "aria-label": collapseSidebarLabel,
-                            onClick: () => {
-                              setCollapsedWithFocusHandover(true);
-                            },
-                            children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(XmarkIcon, {}) })
-                          }
-                        ) }),
-                        /* @__PURE__ */ jsx(
-                          "div",
-                          {
-                            ...sidebar.domProps,
-                            ref: sidebar.ref,
-                            className: clsx(
-                              styles.drawerContent,
-                              sidebar.domProps.className
-                            ),
-                            children: /* @__PURE__ */ jsx(panelTeleport.Slot, {})
-                          }
-                        )
-                      ]
-                    }
-                  )
-                ] });
-              }
-            }
-          })()
+          children: renderLayout({
+            sidebar,
+            content,
+            layout,
+            panelId,
+            persistedPanelWidth,
+            contentTeleport,
+            panelTeleport,
+            expandSidebarLabel,
+            collapseSidebarLabel,
+            sidebarLabel,
+            focusHandover,
+            setCollapsedWithFocusHandover
+          })
         }
       )
     ] });

package/esm/layouts/page-layout/sidebar-layout/SidebarLayout.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/sidebar-layout/SidebarLayout.tsx"],
-  "sourcesContent": ["import { clsx } from 'clsx';\nimport {\n  forwardRef,\n  memo,\n  useRef,\n  type ComponentPropsWithoutRef,\n  type PropsWithChildren,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  ChevronSmallLeftDoubleIcon,\n  ChevronSmallRightDoubleIcon,\n  XmarkIcon,\n} from '@dynatrace/strato-icons';\n\nimport * as styles from './SidebarLayout.sty.js';\nimport { ContentSlot, SidebarSlot, extractSlotsProps } from './slots.js';\nimport { useButtonFocusHandover } from './useFocusHandover.js';\nimport { useLayoutState } from './useLayoutState.js';\nimport { Button } from '../../../buttons/button/Button.js';\nimport { useId } from '../../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport { Drawer } from '../../../overlays/drawer/Drawer.js';\nimport { Tooltip } from '../../../overlays/tooltip/Tooltip.js';\nimport { SplitLayout } from '../../split-layout/SplitLayout.js';\nimport { useTeleport } from '../shared/useTeleport.js';\n\n/** @internal */\nexport interface LayoutRootProps\n  extends PropsWithChildren,\n    ComponentPropsWithoutRef<'div'> {}\n\nconst LayoutRoot = memo(\n  forwardRef<HTMLDivElement, LayoutRootProps>((props, ref) => {\n    const { children, className: rootClassName, ...rootProps } = props;\n\n    const panelId = useId();\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const { sidebar, content } = extractSlotsProps(children);\n    const layout = useLayoutState({ sidebar, containerRef });\n    const rootRef = useMergeRefs([ref, containerRef]);\n\n    const persistedPanelWidth = useRef<number>();\n\n    const intl = useIntl();\n\n    const focusHandover = useButtonFocusHandover();\n\n    const expandSidebarLabel = intl.formatMessage({\n      defaultMessage: 'Expand sidebar',\n      id: 'NF0tLfJTokD/xw5B',\n      description: 'Label for the button that expands the sidebar.',\n    });\n\n    const collapseSidebarLabel = intl.formatMessage({\n      defaultMessage: 'Collapse sidebar',\n      id: 'LJ0fyD2++VZgZ5g0',\n      description: 'Label for the button that collapses the sidebar.',\n    });\n\n    const setCollapsedWithFocusHandover = (value: boolean) => {\n      layout.setCollapsed(value);\n\n      if (sidebar?.config.integratedControls) {\n        focusHandover.setTarget(value ? 'expand' : 'collapse');\n      }\n    };\n\n    const contentTeleport = useTeleport();\n    const panelTeleport = useTeleport();\n\n    return (\n      <>\n        <contentTeleport.Source>{content.children}</contentTeleport.Source>\n        {sidebar && (\n          <panelTeleport.Source>{sidebar.children}</panelTeleport.Source>\n        )}\n        <div\n          {...rootProps}\n          ref={rootRef}\n          className={clsx(styles.layoutRoot, rootClassName)}\n        >\n          {(() => {\n            if (!sidebar) {\n              return (\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\n            switch (layout.mode) {\n              case 'collapsed': {\n                if (sidebar.config.integratedControls) {\n                  return (\n                    <div\n                      style={{ display: 'flex', height: '100%', width: '100%' }}\n                    >\n                      <div className={styles.collapsedSidebar} id={panelId}>\n                        <button\n                          className={styles.hint}\n                          type=\"button\"\n                          onClick={() => {\n                            setCollapsedWithFocusHandover(false);\n                          }}\n                          tabIndex={-1}\n                          aria-hidden=\"true\"\n                          aria-label={expandSidebarLabel}\n                        />\n\n                        <div className={styles.expandButtonContainer}>\n                          <Tooltip text={expandSidebarLabel}>\n                            <Button\n                              className={styles.expandButton}\n                              aria-expanded=\"false\"\n                              ref={focusHandover.expandButtonRef}\n                              aria-controls={panelId}\n                              aria-label={expandSidebarLabel}\n                              size=\"condensed\"\n                              onClick={() => {\n                                setCollapsedWithFocusHandover(false);\n                              }}\n                            >\n                              <Button.Prefix>\n                                <ChevronSmallRightDoubleIcon />\n                              </Button.Prefix>\n                            </Button>\n                          </Tooltip>\n                        </div>\n                      </div>\n                      <div\n                        ref={content.ref}\n                        {...content.domProps}\n                        className={clsx(\n                          styles.content,\n                          content.domProps.className,\n                        )}\n                      >\n                        <contentTeleport.Slot />\n                      </div>\n                    </div>\n                  );\n                }\n\n                return (\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              case 'split': {\n                const splitLayoutKey =\n                  persistedPanelWidth.current === undefined\n                    ? `split-${String(sidebar.config.defaultWidth)}`\n                    : 'split-resized';\n\n                return (\n                  <SplitLayout key={splitLayoutKey}>\n                    <SplitLayout.Panel\n                      {...sidebar.domProps}\n                      ref={sidebar.ref}\n                      minWidth={sidebar.config.minWidth}\n                      maxWidth={sidebar.config.maxWidth}\n                      defaultWidth={\n                        persistedPanelWidth.current ??\n                        sidebar.config.defaultWidth\n                      }\n                      resizable={sidebar.config.resizable}\n                      position=\"start\"\n                      onResize={(value) => {\n                        persistedPanelWidth.current = value;\n                        sidebar.config.onResize?.(value);\n                      }}\n                      className={clsx(styles.panel, sidebar.domProps.className)}\n                      aria-label=\"Sidebar\"\n                      id={panelId}\n                    >\n                      <panelTeleport.Slot />\n                    </SplitLayout.Panel>\n                    {sidebar.config.integratedControls && (\n                      <SplitLayout.ResizeHandle className={styles.resizeHandle}>\n                        <div className={styles.collapseButtonContainer}>\n                          <Tooltip text={collapseSidebarLabel}>\n                            <Button\n                              className={styles.collapseButton}\n                              aria-expanded=\"true\"\n                              ref={focusHandover.collapseButtonRef}\n                              aria-controls={panelId}\n                              aria-label={collapseSidebarLabel}\n                              size=\"condensed\"\n                              onClick={() => {\n                                setCollapsedWithFocusHandover(true);\n                              }}\n                            >\n                              <Button.Prefix>\n                                <ChevronSmallLeftDoubleIcon />\n                              </Button.Prefix>\n                            </Button>\n                          </Tooltip>\n                        </div>\n                      </SplitLayout.ResizeHandle>\n                    )}\n                    <SplitLayout.Content\n                      {...content.domProps}\n                      ref={content.ref}\n                      minWidth={content.config.minWidth}\n                      className={clsx(\n                        styles.content,\n                        content.domProps.className,\n                      )}\n                    >\n                      <contentTeleport.Slot />\n                    </SplitLayout.Content>\n                  </SplitLayout>\n                );\n              }\n              case 'drawer': {\n                const drawerContentArea = (\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                return (\n                  <>\n                    {sidebar.config.integratedControls ? (\n                      <div\n                        style={{\n                          display: 'flex',\n                          height: '100%',\n                          width: '100%',\n                        }}\n                      >\n                        <div className={styles.collapsedSidebar} id={panelId}>\n                          <button\n                            className={styles.hint}\n                            type=\"button\"\n                            onClick={() => {\n                              setCollapsedWithFocusHandover(false);\n                            }}\n                            tabIndex={-1}\n                            aria-hidden=\"true\"\n                            aria-label={expandSidebarLabel}\n                          />\n                          <div className={styles.expandButtonContainer}>\n                            <Tooltip text={expandSidebarLabel}>\n                              <Button\n                                className={styles.expandButton}\n                                aria-expanded={\n                                  layout.collapsed ? 'false' : 'true'\n                                }\n                                ref={focusHandover.expandButtonRef}\n                                aria-controls={panelId}\n                                aria-label={expandSidebarLabel}\n                                size=\"condensed\"\n                                onClick={() => {\n                                  setCollapsedWithFocusHandover(false);\n                                }}\n                              >\n                                <Button.Prefix>\n                                  <ChevronSmallRightDoubleIcon />\n                                </Button.Prefix>\n                              </Button>\n                            </Tooltip>\n                          </div>\n                        </div>\n                        {drawerContentArea}\n                      </div>\n                    ) : (\n                      drawerContentArea\n                    )}\n                    <Drawer\n                      className={styles.drawer}\n                      isDismissed={layout.collapsed}\n                      onDismiss={(state, _reason) => {\n                        setCollapsedWithFocusHandover(state);\n                      }}\n                      placement=\"left\"\n                      width=\"wide\"\n                    >\n                      {sidebar.config.integratedControls && (\n                        <div className={styles.drawerHeader}>\n                          <Button\n                            style={{ marginLeft: 'auto' }}\n                            ref={focusHandover.collapseButtonRef}\n                            aria-label={collapseSidebarLabel}\n                            onClick={() => {\n                              setCollapsedWithFocusHandover(true);\n                            }}\n                          >\n                            <Button.Prefix>\n                              <XmarkIcon />\n                            </Button.Prefix>\n                          </Button>\n                        </div>\n                      )}\n\n                      <div\n                        {...sidebar.domProps}\n                        ref={sidebar.ref}\n                        className={clsx(\n                          styles.drawerContent,\n                          sidebar.domProps.className,\n                        )}\n                      >\n                        <panelTeleport.Slot />\n                      </div>\n                    </Drawer>\n                  </>\n                );\n              }\n            }\n          })()}\n        </div>\n      </>\n    );\n  }),\n);\nLayoutRoot.displayName = 'SidebarLayout.Root (forwardRef)';\n\n/** @internal */\nexport const SidebarLayout = Object.assign(LayoutRoot, {\n  Sidebar: SidebarSlot,\n  Content: ContentSlot,\n});\n"],
-  "mappings": "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",
+  "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 {\n  ChevronSmallLeftDoubleIcon,\n  ChevronSmallRightDoubleIcon,\n  XmarkIcon,\n} from '@dynatrace/strato-icons';\n\nimport * as styles from './SidebarLayout.sty.js';\nimport {\n  ContentSlot,\n  SidebarSlot,\n  extractSlotsProps,\n  type ExtractedContentSlot,\n  type ExtractedSidebarSlot,\n} from './slots.js';\nimport { useButtonFocusHandover } from './useFocusHandover.js';\nimport { useLayoutState } from './useLayoutState.js';\nimport { Button } from '../../../buttons/button/Button.js';\nimport { useId } from '../../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport { Drawer } from '../../../overlays/drawer/Drawer.js';\nimport { Tooltip } from '../../../overlays/tooltip/Tooltip.js';\nimport { SplitLayout } from '../../split-layout/SplitLayout.js';\nimport { useTeleport } from '../shared/useTeleport.js';\n\n/** @internal */\nexport interface LayoutRootProps\n  extends PropsWithChildren,\n    ComponentPropsWithoutRef<'div'> {}\n\ntype TeleportPair = ReturnType<typeof useTeleport>;\n\nfunction renderLayout({\n  sidebar,\n  content,\n  layout,\n  panelId,\n  persistedPanelWidth,\n  contentTeleport,\n  panelTeleport,\n  expandSidebarLabel,\n  collapseSidebarLabel,\n  sidebarLabel,\n  focusHandover,\n  setCollapsedWithFocusHandover,\n}: {\n  sidebar: ExtractedSidebarSlot | null;\n  content: ExtractedContentSlot;\n  layout: ReturnType<typeof useLayoutState>;\n  panelId: string;\n  persistedPanelWidth: MutableRefObject<number | undefined>;\n  contentTeleport: TeleportPair;\n  panelTeleport: TeleportPair;\n  expandSidebarLabel: string;\n  collapseSidebarLabel: string;\n  sidebarLabel: string;\n  focusHandover: ReturnType<typeof useButtonFocusHandover>;\n  setCollapsedWithFocusHandover: (value: boolean) => void;\n}) {\n  if (!sidebar) {\n    return (\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\n  switch (layout.mode) {\n    case 'collapsed': {\n      if (sidebar.config.integratedControls) {\n        return (\n          <div className={styles.collapsedSidebarWrapper}>\n            <div className={styles.collapsedSidebar} id={panelId}>\n              <button\n                className={styles.hint}\n                type=\"button\"\n                onClick={() => {\n                  setCollapsedWithFocusHandover(false);\n                }}\n                tabIndex={-1}\n                aria-hidden=\"true\"\n                aria-label={expandSidebarLabel}\n              />\n\n              <div className={styles.expandButtonContainer}>\n                <Tooltip text={expandSidebarLabel}>\n                  <Button\n                    className={styles.expandButton}\n                    aria-expanded=\"false\"\n                    ref={focusHandover.expandButtonRef}\n                    aria-controls={panelId}\n                    aria-label={expandSidebarLabel}\n                    size=\"condensed\"\n                    data-dt-name=\"ExpandCollapse\"\n                    data-dt-properties=\"state:expand\"\n                    onClick={() => {\n                      setCollapsedWithFocusHandover(false);\n                    }}\n                  >\n                    <Button.Prefix>\n                      <ChevronSmallRightDoubleIcon />\n                    </Button.Prefix>\n                  </Button>\n                </Tooltip>\n              </div>\n            </div>\n            <div\n              ref={content.ref}\n              {...content.domProps}\n              className={clsx(styles.content, content.domProps.className)}\n            >\n              <contentTeleport.Target />\n            </div>\n          </div>\n        );\n      }\n\n      return (\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    case 'split': {\n      const splitLayoutKey =\n        persistedPanelWidth.current === undefined\n          ? `split-${String(sidebar.config.defaultWidth)}`\n          : 'split-resized';\n\n      return (\n        <SplitLayout key={splitLayoutKey}>\n          <SplitLayout.Panel\n            {...sidebar.domProps}\n            ref={sidebar.ref}\n            minWidth={sidebar.config.minWidth}\n            maxWidth={sidebar.config.maxWidth}\n            defaultWidth={\n              persistedPanelWidth.current ?? sidebar.config.defaultWidth\n            }\n            resizable={sidebar.config.resizable}\n            position=\"start\"\n            onResize={(value) => {\n              persistedPanelWidth.current = value;\n              sidebar.config.onResize?.(value);\n            }}\n            className={clsx(styles.panel, sidebar.domProps.className)}\n            aria-label={sidebarLabel}\n            id={panelId}\n          >\n            <panelTeleport.Target />\n          </SplitLayout.Panel>\n          {sidebar.config.integratedControls && (\n            <SplitLayout.ResizeHandle className={styles.resizeHandle}>\n              <div className={styles.collapseButtonContainer}>\n                <Tooltip text={collapseSidebarLabel}>\n                  <Button\n                    className={styles.collapseButton}\n                    aria-expanded=\"true\"\n                    ref={focusHandover.collapseButtonRef}\n                    aria-controls={panelId}\n                    aria-label={collapseSidebarLabel}\n                    size=\"condensed\"\n                    data-dt-name=\"ExpandCollapse\"\n                    data-dt-properties=\"state:collapse\"\n                    onClick={() => {\n                      setCollapsedWithFocusHandover(true);\n                    }}\n                  >\n                    <Button.Prefix>\n                      <ChevronSmallLeftDoubleIcon />\n                    </Button.Prefix>\n                  </Button>\n                </Tooltip>\n              </div>\n            </SplitLayout.ResizeHandle>\n          )}\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>\n      );\n    }\n    case 'drawer': {\n      const drawerContentArea = (\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      return (\n        <>\n          {sidebar.config.integratedControls ? (\n            <div className={styles.collapsedSidebarWrapper}>\n              <div className={styles.collapsedSidebar} id={panelId}>\n                <button\n                  className={styles.hint}\n                  type=\"button\"\n                  onClick={() => {\n                    setCollapsedWithFocusHandover(false);\n                  }}\n                  tabIndex={-1}\n                  aria-hidden=\"true\"\n                  aria-label={expandSidebarLabel}\n                />\n                <div className={styles.expandButtonContainer}>\n                  <Tooltip text={expandSidebarLabel}>\n                    <Button\n                      className={styles.expandButton}\n                      aria-expanded={layout.collapsed ? 'false' : 'true'}\n                      ref={focusHandover.expandButtonRef}\n                      aria-controls={panelId}\n                      aria-label={expandSidebarLabel}\n                      size=\"condensed\"\n                      data-dt-name=\"ExpandCollapse\"\n                      data-dt-properties=\"state:expand\"\n                      onClick={() => {\n                        setCollapsedWithFocusHandover(false);\n                      }}\n                    >\n                      <Button.Prefix>\n                        <ChevronSmallRightDoubleIcon />\n                      </Button.Prefix>\n                    </Button>\n                  </Tooltip>\n                </div>\n              </div>\n              {drawerContentArea}\n            </div>\n          ) : (\n            drawerContentArea\n          )}\n          <Drawer\n            className={styles.drawer}\n            isDismissed={layout.collapsed}\n            onDismiss={(state, _reason) => {\n              setCollapsedWithFocusHandover(state);\n            }}\n            placement=\"left\"\n            width=\"wide\"\n          >\n            {sidebar.config.integratedControls && (\n              <div className={styles.drawerHeader}>\n                <Button\n                  style={{ marginLeft: 'auto' }}\n                  ref={focusHandover.collapseButtonRef}\n                  aria-label={collapseSidebarLabel}\n                  data-dt-name=\"CloseX\"\n                  onClick={() => {\n                    setCollapsedWithFocusHandover(true);\n                  }}\n                >\n                  <Button.Prefix>\n                    <XmarkIcon />\n                  </Button.Prefix>\n                </Button>\n              </div>\n            )}\n\n            <div\n              {...sidebar.domProps}\n              ref={sidebar.ref}\n              className={clsx(styles.drawerContent, sidebar.domProps.className)}\n            >\n              <panelTeleport.Target />\n            </div>\n          </Drawer>\n        </>\n      );\n    }\n  }\n}\n\nconst LayoutRoot = memo(\n  forwardRef<HTMLDivElement, LayoutRootProps>((props, ref) => {\n    const { children, className: rootClassName, ...rootProps } = props;\n\n    const panelId = useId();\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const { sidebar, content } = useMemo(() => {\n      return extractSlotsProps(children);\n    }, [children]);\n    const layout = useLayoutState({ sidebar, containerRef });\n    const rootRef = useMergeRefs([ref, containerRef]);\n\n    const persistedPanelWidth = useRef<number>();\n\n    const intl = useIntl();\n\n    const focusHandover = useButtonFocusHandover();\n\n    const expandSidebarLabel = intl.formatMessage({\n      defaultMessage: 'Expand sidebar',\n      id: 'NF0tLfJTokD/xw5B',\n      description: 'Label for the button that expands the sidebar.',\n    });\n\n    const collapseSidebarLabel = intl.formatMessage({\n      defaultMessage: 'Collapse sidebar',\n      id: 'LJ0fyD2++VZgZ5g0',\n      description: 'Label for the button that collapses the sidebar.',\n    });\n\n    const sidebarLabel = intl.formatMessage({\n      defaultMessage: 'Sidebar',\n      id: 'BYUJpW8TBonAxnYd',\n      description: 'Accessible label for the sidebar panel.',\n    });\n\n    const setCollapsedWithFocusHandover = (value: boolean) => {\n      layout.setCollapsed(value);\n\n      if (sidebar?.config.integratedControls) {\n        focusHandover.setTarget(value ? 'expand' : 'collapse');\n      }\n    };\n\n    const contentTeleport = useTeleport();\n    const panelTeleport = useTeleport();\n\n    return (\n      <>\n        <contentTeleport.Source>{content.children}</contentTeleport.Source>\n        {sidebar && (\n          <panelTeleport.Source>{sidebar.children}</panelTeleport.Source>\n        )}\n        <div\n          {...rootProps}\n          ref={rootRef}\n          className={clsx(styles.layoutRoot, rootClassName)}\n        >\n          {renderLayout({\n            sidebar,\n            content,\n            layout,\n            panelId,\n            persistedPanelWidth,\n            contentTeleport,\n            panelTeleport,\n            expandSidebarLabel,\n            collapseSidebarLabel,\n            sidebarLabel,\n            focusHandover,\n            setCollapsedWithFocusHandover,\n          })}\n        </div>\n      </>\n    );\n  }),\n);\nLayoutRoot.displayName = 'SidebarLayout.Root (forwardRef)';\n\n/** @internal */\nexport const SidebarLayout = Object.assign(LayoutRoot, {\n  Sidebar: SidebarSlot,\n  Content: ContentSlot,\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/layouts/page-layout/sidebar-layout/SidebarLayout.sty.js

@@ -1,22 +1,24 @@
 import "../../../core/styles/focusRingStatic.css";
 import "./SidebarLayout.css";
-var collapseButton = "_1mr4xg7d-3-2-1 _1mr4xg7c-3-2-1";
-var collapseButtonContainer = "_1mr4xg7a-3-2-1";
-var collapsedSidebar = "_1mr4xg74-3-2-1";
-var content = "_1mr4xg72-3-2-1";
-var drawer = "_1mr4xg76-3-2-1";
-var drawerContent = "_1mr4xg77-3-2-1";
-var drawerHeader = "_1mr4xg78-3-2-1";
-var expandButton = "_1mr4xg7e-3-2-1 _1mr4xg7c-3-2-1";
-var expandButtonContainer = "_1mr4xg7b-3-2-1";
-var hint = "_1mr4xg75-3-2-1 _z0fq9b4-3-2-1 _z0fq9bc-3-2-1 _z0fq9b6-3-2-1 _z0fq9bb-3-2-1";
-var layoutRoot = "_1mr4xg70-3-2-1";
-var panel = "_1mr4xg71-3-2-1";
-var resizeHandle = "_1mr4xg73-3-2-1";
+var collapseButton = "_1mr4xg7e-3-3-0 _1mr4xg7d-3-3-0";
+var collapseButtonContainer = "_1mr4xg7b-3-3-0";
+var collapsedSidebar = "_1mr4xg75-3-3-0";
+var collapsedSidebarWrapper = "_1mr4xg71-3-3-0";
+var content = "_1mr4xg73-3-3-0";
+var drawer = "_1mr4xg77-3-3-0";
+var drawerContent = "_1mr4xg78-3-3-0";
+var drawerHeader = "_1mr4xg79-3-3-0";
+var expandButton = "_1mr4xg7f-3-3-0 _1mr4xg7d-3-3-0";
+var expandButtonContainer = "_1mr4xg7c-3-3-0";
+var hint = "_1mr4xg76-3-3-0 _z0fq9b4-3-3-0 _z0fq9bc-3-3-0 _z0fq9b6-3-3-0 _z0fq9bb-3-3-0";
+var layoutRoot = "_1mr4xg70-3-3-0";
+var panel = "_1mr4xg72-3-3-0";
+var resizeHandle = "_1mr4xg74-3-3-0";
 export {
   collapseButton,
   collapseButtonContainer,
   collapsedSidebar,
+  collapsedSidebarWrapper,
   content,
   drawer,
   drawerContent,