@dynatrace/strato-components 3.1.3 → 3.2.1

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

@@ -0,0 +1,301 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import {
+  forwardRef,
+  memo,
+  useRef
+} from "react";
+import { useIntl } from "react-intl";
+import {
+  ChevronSmallLeftDoubleIcon,
+  ChevronSmallRightDoubleIcon,
+  XmarkIcon
+} from "@dynatrace/strato-icons";
+import * as styles from "./SidebarLayout.sty.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";
+import { useId } from "../../../core/hooks/useId.js";
+import { useMergeRefs } from "../../../core/hooks/useMergeRefs.js";
+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";
+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 layout = useLayoutState({ sidebar, containerRef });
+    const rootRef = useMergeRefs([ref, containerRef]);
+    const persistedPanelWidth = useRef();
+    const intl = useIntl();
+    const focusHandover = useButtonFocusHandover();
+    const expandSidebarLabel = intl.formatMessage({
+      defaultMessage: "Expand sidebar",
+      id: "NF0tLfJTokD/xw5B",
+      description: "Label for the button that expands the sidebar."
+    });
+    const collapseSidebarLabel = intl.formatMessage({
+      defaultMessage: "Collapse sidebar",
+      id: "LJ0fyD2++VZgZ5g0",
+      description: "Label for the button that collapses the sidebar."
+    });
+    const setCollapsedWithFocusHandover = (value) => {
+      layout.setCollapsed(value);
+      if (sidebar?.config.integratedControls) {
+        focusHandover.setTarget(value ? "expand" : "collapse");
+      }
+    };
+    const contentTeleport = useTeleport();
+    const panelTeleport = useTeleport();
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(contentTeleport.Source, { children: content.children }),
+      sidebar && /* @__PURE__ */ jsx(panelTeleport.Source, { children: sidebar.children }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...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, {})
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ] });
+              }
+            }
+          })()
+        }
+      )
+    ] });
+  })
+);
+LayoutRoot.displayName = "SidebarLayout.Root (forwardRef)";
+const SidebarLayout = Object.assign(LayoutRoot, {
+  Sidebar: SidebarSlot,
+  Content: ContentSlot
+});
+export {
+  SidebarLayout
+};
+//# sourceMappingURL=SidebarLayout.js.map

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

@@ -0,0 +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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",
+  "names": []
+}

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

@@ -0,0 +1,31 @@
+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";
+export {
+  collapseButton,
+  collapseButtonContainer,
+  collapsedSidebar,
+  content,
+  drawer,
+  drawerContent,
+  drawerHeader,
+  expandButton,
+  expandButtonContainer,
+  hint,
+  layoutRoot,
+  panel,
+  resizeHandle
+};
+//# sourceMappingURL=SidebarLayout.sty.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/layouts/page-layout/sidebar-layout/SidebarLayout.css.ts"],
+  "sourcesContent": ["import '../../../core/styles/focusRingStatic.css';\nimport './SidebarLayout.css';\nexport var collapseButton = '_1mr4xg7d-3-2-1 _1mr4xg7c-3-2-1';\nexport var collapseButtonContainer = '_1mr4xg7a-3-2-1';\nexport var collapsedSidebar = '_1mr4xg74-3-2-1';\nexport var content = '_1mr4xg72-3-2-1';\nexport var drawer = '_1mr4xg76-3-2-1';\nexport var drawerContent = '_1mr4xg77-3-2-1';\nexport var drawerHeader = '_1mr4xg78-3-2-1';\nexport var expandButton = '_1mr4xg7e-3-2-1 _1mr4xg7c-3-2-1';\nexport var expandButtonContainer = '_1mr4xg7b-3-2-1';\nexport var hint = '_1mr4xg75-3-2-1 _z0fq9b4-3-2-1 _z0fq9bc-3-2-1 _z0fq9b6-3-2-1 _z0fq9bb-3-2-1';\nexport var layoutRoot = '_1mr4xg70-3-2-1';\nexport var panel = '_1mr4xg71-3-2-1';\nexport var resizeHandle = '_1mr4xg73-3-2-1';"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,iBAAiB;AACrB,IAAI,0BAA0B;AAC9B,IAAI,mBAAmB;AACvB,IAAI,UAAU;AACd,IAAI,SAAS;AACb,IAAI,gBAAgB;AACpB,IAAI,eAAe;AACnB,IAAI,eAAe;AACnB,IAAI,wBAAwB;AAC5B,IAAI,OAAO;AACX,IAAI,aAAa;AACjB,IAAI,QAAQ;AACZ,IAAI,eAAe;",
+  "names": []
+}

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

@@ -0,0 +1,91 @@
+import {
+  Children,
+  forwardRef,
+  isValidElement,
+  memo
+} from "react";
+const SidebarSlot = memo(
+  forwardRef(() => null)
+);
+const ContentSlot = memo(
+  forwardRef(() => null)
+);
+function isSidebarSlot(element) {
+  return element.type === SidebarSlot;
+}
+function isContentSlot(element) {
+  return element.type === ContentSlot;
+}
+function extractSlotsProps(children) {
+  let sidebar = null;
+  let content = null;
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) {
+      return;
+    }
+    if (isSidebarSlot(child)) {
+      if (sidebar) {
+        throw new Error("SidebarLayout: only one Sidebar slot is allowed");
+      }
+      const {
+        children: sidebarChildren,
+        defaultWidth = "15%",
+        minWidth = 200,
+        maxWidth = "50%",
+        resizable = true,
+        collapsed,
+        defaultCollapsed = false,
+        onCollapsedChange,
+        integratedControls = true,
+        breakpoint = 960,
+        onResize,
+        id: _sidebarId,
+        ...domProps
+      } = child.props;
+      sidebar = {
+        children: sidebarChildren,
+        config: {
+          minWidth,
+          maxWidth,
+          defaultWidth,
+          resizable,
+          collapsed,
+          defaultCollapsed,
+          onCollapsedChange,
+          integratedControls,
+          breakpoint,
+          onResize
+        },
+        domProps,
+        ref: "ref" in child ? child.ref : void 0
+      };
+      return;
+    }
+    if (isContentSlot(child)) {
+      if (content) {
+        throw new Error("SidebarLayout: only one Content slot is allowed");
+      }
+      const {
+        children: contentChildren,
+        minWidth = 0,
+        ...domProps
+      } = child.props;
+      content = {
+        children: contentChildren,
+        config: { minWidth },
+        domProps,
+        ref: "ref" in child ? child.ref : void 0
+      };
+    }
+  });
+  if (!content) {
+    throw new Error("SidebarLayout: Content slot is required");
+  }
+  return { sidebar, content };
+}
+export {
+  ContentSlot,
+  SidebarSlot,
+  extractSlotsProps
+};
+//# sourceMappingURL=slots.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/layouts/page-layout/sidebar-layout/slots.ts"],
+  "sourcesContent": ["import {\n  Children,\n  forwardRef,\n  isValidElement,\n  memo,\n  type ComponentPropsWithoutRef,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from 'react';\n\nimport type { MaskingProps } from '../../../core/types/masking-props.js';\nimport type {\n  PanelProps as SplitPanelProps,\n  ContentProps as SplitContentProps,\n} from '../../split-layout/SplitLayout.js';\nimport type { PanelWidth } from '../../split-layout/width-utils.js';\nimport type { CollapsibleProps } from '../shared/collapsible.js';\n\n/** @internal */\nexport interface SidebarProps\n  extends SplitPanelProps,\n    MaskingProps,\n    CollapsibleProps {\n  /**\n   * Whether the sidebar renders integrated collapse/expand controls.\n   * @defaultValue true\n   */\n  integratedControls?: boolean;\n}\n/** @internal */\nexport const SidebarSlot = memo(\n  forwardRef<HTMLDivElement, SidebarProps>(() => null),\n);\n\n/** @internal */\nexport type ContentProps = SplitContentProps;\n/** @internal */\nexport const ContentSlot = memo(\n  forwardRef<HTMLDivElement, ContentProps>(() => null),\n);\n\nfunction isSidebarSlot(\n  element: ReactElement,\n): element is ReactElement<SidebarProps> {\n  return element.type === SidebarSlot;\n}\n\nfunction isContentSlot(\n  element: ReactElement,\n): element is ReactElement<ContentProps> {\n  return element.type === ContentSlot;\n}\n\n/** @internal */\nexport interface ExtractedSidebarSlot {\n  children?: ReactNode;\n  config: {\n    minWidth: PanelWidth;\n    maxWidth: PanelWidth;\n    defaultWidth: PanelWidth;\n    resizable: boolean;\n    collapsed?: boolean;\n    defaultCollapsed: boolean;\n    onCollapsedChange?: (value: boolean) => void;\n    integratedControls: boolean;\n    breakpoint: number;\n    onResize?: (value: number) => void;\n  };\n  domProps: ComponentPropsWithoutRef<'div'>;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** @internal */\nexport interface ExtractedContentSlot {\n  children?: ReactNode;\n  config: { minWidth: PanelWidth };\n  domProps: ComponentPropsWithoutRef<'div'>;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** @internal */\nexport function extractSlotsProps(children: ReactNode): {\n  sidebar: ExtractedSidebarSlot | null;\n  content: ExtractedContentSlot;\n} {\n  let sidebar: ExtractedSidebarSlot | null = null;\n  let content: ExtractedContentSlot | null = null;\n\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      return;\n    }\n\n    if (isSidebarSlot(child)) {\n      if (sidebar) {\n        throw new Error('SidebarLayout: only one Sidebar slot is allowed');\n      }\n\n      const {\n        children: sidebarChildren,\n        defaultWidth = '15%',\n        minWidth = 200,\n        maxWidth = '50%',\n        resizable = true,\n        collapsed,\n        defaultCollapsed = false,\n        onCollapsedChange,\n        integratedControls = true,\n        breakpoint = 960,\n        onResize,\n        id: _sidebarId,\n        ...domProps\n      } = child.props;\n\n      sidebar = {\n        children: sidebarChildren,\n        config: {\n          minWidth,\n          maxWidth,\n          defaultWidth,\n          resizable,\n          collapsed,\n          defaultCollapsed,\n          onCollapsedChange,\n          integratedControls,\n          breakpoint,\n          onResize,\n        },\n        domProps,\n        ref: 'ref' in child ? (child.ref as Ref<HTMLDivElement>) : undefined,\n      };\n      return;\n    }\n\n    if (isContentSlot(child)) {\n      if (content) {\n        throw new Error('SidebarLayout: only one Content slot is allowed');\n      }\n\n      const {\n        children: contentChildren,\n        minWidth = 0,\n        ...domProps\n      } = child.props;\n\n      content = {\n        children: contentChildren,\n        config: { minWidth },\n        domProps,\n        ref: 'ref' in child ? (child.ref as Ref<HTMLDivElement>) : undefined,\n      };\n    }\n  });\n\n  if (!content) {\n    throw new Error('SidebarLayout: Content slot is required');\n  }\n\n  return { sidebar, content };\n}\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AAsBA,MAAM,cAAc;AAAA,EACzB,WAAyC,MAAM,IAAI;AACrD;AAKO,MAAM,cAAc;AAAA,EACzB,WAAyC,MAAM,IAAI;AACrD;AAEA,SAAS,cACP,SACuC;AACvC,SAAO,QAAQ,SAAS;AAC1B;AAEA,SAAS,cACP,SACuC;AACvC,SAAO,QAAQ,SAAS;AAC1B;AA8BO,SAAS,kBAAkB,UAGhC;AACA,MAAI,UAAuC;AAC3C,MAAI,UAAuC;AAE3C,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,CAAC,eAAe,KAAK,GAAG;AAC1B;AAAA,IACF;AAEA,QAAI,cAAc,KAAK,GAAG;AACxB,UAAI,SAAS;AACX,cAAM,IAAI,MAAM,iDAAiD;AAAA,MACnE;AAEA,YAAM;AAAA,QACJ,UAAU;AAAA,QACV,eAAe;AAAA,QACf,WAAW;AAAA,QACX,WAAW;AAAA,QACX,YAAY;AAAA,QACZ;AAAA,QACA,mBAAmB;AAAA,QACnB;AAAA,QACA,qBAAqB;AAAA,QACrB,aAAa;AAAA,QACb;AAAA,QACA,IAAI;AAAA,QACJ,GAAG;AAAA,MACL,IAAI,MAAM;AAEV,gBAAU;AAAA,QACR,UAAU;AAAA,QACV,QAAQ;AAAA,UACN;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,QACA,KAAK,SAAS,QAAS,MAAM,MAA8B;AAAA,MAC7D;AACA;AAAA,IACF;AAEA,QAAI,cAAc,KAAK,GAAG;AACxB,UAAI,SAAS;AACX,cAAM,IAAI,MAAM,iDAAiD;AAAA,MACnE;AAEA,YAAM;AAAA,QACJ,UAAU;AAAA,QACV,WAAW;AAAA,QACX,GAAG;AAAA,MACL,IAAI,MAAM;AAEV,gBAAU;AAAA,QACR,UAAU;AAAA,QACV,QAAQ,EAAE,SAAS;AAAA,QACnB;AAAA,QACA,KAAK,SAAS,QAAS,MAAM,MAA8B;AAAA,MAC7D;AAAA,IACF;AAAA,EACF,CAAC;AAED,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,yCAAyC;AAAA,EAC3D;AAEA,SAAO,EAAE,SAAS,QAAQ;AAC5B;",
+  "names": []
+}

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

@@ -0,0 +1,28 @@
+import { useCallback, useRef } from "react";
+function useButtonFocusHandover() {
+  const pendingTarget = useRef(null);
+  const setTarget = useCallback((target) => {
+    pendingTarget.current = { target };
+  }, []);
+  const collapseButtonRef = useCallback((node) => {
+    if (node && pendingTarget.current?.target === "collapse") {
+      node.focus();
+      pendingTarget.current = null;
+    }
+  }, []);
+  const expandButtonRef = useCallback((node) => {
+    if (node && pendingTarget.current?.target === "expand") {
+      node.focus();
+      pendingTarget.current = null;
+    }
+  }, []);
+  return {
+    setTarget,
+    collapseButtonRef,
+    expandButtonRef
+  };
+}
+export {
+  useButtonFocusHandover
+};
+//# sourceMappingURL=useFocusHandover.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/layouts/page-layout/sidebar-layout/useFocusHandover.ts"],
+  "sourcesContent": ["import { useCallback, useRef } from 'react';\n\ninterface PendingFocusTarget {\n  target: 'collapse' | 'expand';\n}\n\n/** @internal */\nexport function useButtonFocusHandover() {\n  const pendingTarget = useRef<PendingFocusTarget | null>(null);\n\n  const setTarget = useCallback((target: 'collapse' | 'expand') => {\n    pendingTarget.current = { target };\n  }, []);\n\n  const collapseButtonRef = useCallback((node: HTMLButtonElement | null) => {\n    if (node && pendingTarget.current?.target === 'collapse') {\n      node.focus();\n      pendingTarget.current = null;\n    }\n  }, []);\n\n  const expandButtonRef = useCallback((node: HTMLButtonElement | null) => {\n    if (node && pendingTarget.current?.target === 'expand') {\n      node.focus();\n      pendingTarget.current = null;\n    }\n  }, []);\n\n  return {\n    setTarget,\n    collapseButtonRef,\n    expandButtonRef,\n  };\n}\n"],
+  "mappings": "AAAA,SAAS,aAAa,cAAc;AAO7B,SAAS,yBAAyB;AACvC,QAAM,gBAAgB,OAAkC,IAAI;AAE5D,QAAM,YAAY,YAAY,CAAC,WAAkC;AAC/D,kBAAc,UAAU,EAAE,OAAO;AAAA,EACnC,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAoB,YAAY,CAAC,SAAmC;AACxE,QAAI,QAAQ,cAAc,SAAS,WAAW,YAAY;AACxD,WAAK,MAAM;AACX,oBAAc,UAAU;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAkB,YAAY,CAAC,SAAmC;AACtE,QAAI,QAAQ,cAAc,SAAS,WAAW,UAAU;AACtD,WAAK,MAAM;AACX,oBAAc,UAAU;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": []
+}

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

@@ -0,0 +1,53 @@
+import { useRef, useState } from "react";
+import useResizeObserver from "use-resize-observer";
+import { useControllableState } from "../../../core/hooks/useControllableState.js";
+function useLayoutState({
+  sidebar,
+  containerRef
+}) {
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [collapsed, setCollapsed] = useControllableState({
+    value: sidebar?.config.collapsed,
+    defaultValue: sidebar?.config.defaultCollapsed ?? true,
+    onChange: sidebar?.config.onCollapsedChange
+  });
+  const prevBelowBreakpointRef = useRef(null);
+  useResizeObserver({
+    ref: containerRef,
+    onResize: (size) => {
+      if (!size.width || !sidebar) {
+        return;
+      }
+      setContainerWidth(size.width);
+      const isBelowBreakpoint2 = size.width < sidebar.config.breakpoint;
+      const prevBelowBreakpoint = prevBelowBreakpointRef.current;
+      prevBelowBreakpointRef.current = isBelowBreakpoint2;
+      if (prevBelowBreakpoint === isBelowBreakpoint2) {
+        return;
+      }
+      setCollapsed(isBelowBreakpoint2);
+    }
+  });
+  let isBelowBreakpoint = false;
+  if (sidebar && containerWidth !== 0 && containerWidth < sidebar.config.breakpoint) {
+    isBelowBreakpoint = true;
+  }
+  let mode = "split";
+  if (collapsed) {
+    mode = "collapsed";
+  }
+  if (isBelowBreakpoint) {
+    mode = "drawer";
+  }
+  return {
+    collapsed,
+    containerWidth,
+    isBelowBreakpoint,
+    mode,
+    setCollapsed
+  };
+}
+export {
+  useLayoutState
+};
+//# sourceMappingURL=useLayoutState.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/layouts/page-layout/sidebar-layout/useLayoutState.ts"],
+  "sourcesContent": ["import { useRef, useState, type RefObject } from 'react';\nimport useResizeObserver from 'use-resize-observer';\n\nimport type { ExtractedSidebarSlot } from './slots.js';\nimport { useControllableState } from '../../../core/hooks/useControllableState.js';\n\ntype RenderedLayout = 'split' | 'collapsed' | 'drawer';\n\nexport function useLayoutState({\n  sidebar,\n  containerRef,\n}: {\n  sidebar: ExtractedSidebarSlot | null;\n  containerRef: RefObject<HTMLDivElement>;\n}) {\n  const [containerWidth, setContainerWidth] = useState(0);\n\n  const [collapsed, setCollapsed] = useControllableState({\n    value: sidebar?.config.collapsed,\n    defaultValue: sidebar?.config.defaultCollapsed ?? true,\n    onChange: sidebar?.config.onCollapsedChange,\n  });\n\n  /**\n   * Tracks whether the container was below the breakpoint on the previous\n   * resize event. `null` means no measurement has been taken yet.\n   *\n   * We only force-collapse/expand when the container *crosses* the\n   * breakpoint threshold. Without this guard, any resize event while the\n   * container stays on the same side of the breakpoint (e.g. a re-measure\n   * triggered by a DOM layout change after a mode switch) would call\n   * `setCollapsed(false)` and silently undo a user-initiated collapse.\n   */\n  const prevBelowBreakpointRef = useRef<boolean | null>(null);\n\n  useResizeObserver({\n    ref: containerRef,\n    onResize: (size) => {\n      if (!size.width || !sidebar) {\n        return;\n      }\n\n      setContainerWidth(size.width);\n\n      const isBelowBreakpoint = size.width < sidebar.config.breakpoint;\n      const prevBelowBreakpoint = prevBelowBreakpointRef.current;\n      prevBelowBreakpointRef.current = isBelowBreakpoint;\n\n      if (prevBelowBreakpoint === isBelowBreakpoint) {\n        return;\n      }\n\n      setCollapsed(isBelowBreakpoint);\n    },\n  });\n\n  let isBelowBreakpoint = false;\n  if (\n    sidebar &&\n    containerWidth !== 0 &&\n    containerWidth < sidebar.config.breakpoint\n  ) {\n    isBelowBreakpoint = true;\n  }\n\n  let mode: RenderedLayout = 'split';\n  if (collapsed) {\n    mode = 'collapsed';\n  }\n  if (isBelowBreakpoint) {\n    mode = 'drawer';\n  }\n\n  return {\n    collapsed,\n    containerWidth,\n    isBelowBreakpoint,\n    mode,\n    setCollapsed,\n  };\n}\n"],
+  "mappings": "AAAA,SAAS,QAAQ,gBAAgC;AACjD,OAAO,uBAAuB;AAG9B,SAAS,4BAA4B;AAI9B,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AACF,GAGG;AACD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,CAAC;AAEtD,QAAM,CAAC,WAAW,YAAY,IAAI,qBAAqB;AAAA,IACrD,OAAO,SAAS,OAAO;AAAA,IACvB,cAAc,SAAS,OAAO,oBAAoB;AAAA,IAClD,UAAU,SAAS,OAAO;AAAA,EAC5B,CAAC;AAYD,QAAM,yBAAyB,OAAuB,IAAI;AAE1D,oBAAkB;AAAA,IAChB,KAAK;AAAA,IACL,UAAU,CAAC,SAAS;AAClB,UAAI,CAAC,KAAK,SAAS,CAAC,SAAS;AAC3B;AAAA,MACF;AAEA,wBAAkB,KAAK,KAAK;AAE5B,YAAMA,qBAAoB,KAAK,QAAQ,QAAQ,OAAO;AACtD,YAAM,sBAAsB,uBAAuB;AACnD,6BAAuB,UAAUA;AAEjC,UAAI,wBAAwBA,oBAAmB;AAC7C;AAAA,MACF;AAEA,mBAAaA,kBAAiB;AAAA,IAChC;AAAA,EACF,CAAC;AAED,MAAI,oBAAoB;AACxB,MACE,WACA,mBAAmB,KACnB,iBAAiB,QAAQ,OAAO,YAChC;AACA,wBAAoB;AAAA,EACtB;AAEA,MAAI,OAAuB;AAC3B,MAAI,WAAW;AACb,WAAO;AAAA,EACT;AACA,MAAI,mBAAmB;AACrB,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": ["isBelowBreakpoint"]
+}