@dynatrace/strato-components 3.13.2 → 3.14.0

package/esm/layouts/page-layout/sidebar-region/SidebarRegion.js

@@ -0,0 +1,183 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import {
+  forwardRef,
+  memo
+} from "react";
+import { createPortal } from "react-dom";
+import { useIntl } from "react-intl";
+import { ChevronSmallLeftDoubleIcon, XmarkIcon } from "@dynatrace/strato-icons";
+import { SidebarHint } from "./SidebarHint.js";
+import * as styles from "./SidebarRegion.sty.js";
+import { useButtonFocusHandover } from "./useFocusHandover.js";
+import { Button } from "../../../buttons/button/Button.js";
+import { useId } from "../../../core/hooks/useId.js";
+import { useMergeRefs } from "../../../core/hooks/useMergeRefs.js";
+import { useVisualRefreshEnabled } from "../../../core/hooks/useVisualRefreshEnabled.js";
+import { Drawer } from "../../../overlays/drawer/Drawer.js";
+import { Tooltip } from "../../../overlays/tooltip/Tooltip.js";
+import { SplitLayout } from "../../split-layout/SplitLayout.js";
+import { resolvePanelLabel } from "../shared/panel-label.js";
+import { TeleportTarget, useStableHost } from "../shared/teleport/teleport.js";
+const COLLAPSED_RAIL_WIDTH = 16;
+const COLLAPSED_RAIL_BORDER_WIDTH = 1;
+const SidebarRegion = memo(
+  forwardRef((props, ref) => {
+    const {
+      className: rootClassName,
+      containerRef,
+      sidebar,
+      content,
+      ...rootProps
+    } = props;
+    const intl = useIntl();
+    const panelId = useId();
+    const rootRef = useMergeRefs([ref, containerRef]);
+    const panelHost = useStableHost();
+    const focusHandover = useButtonFocusHandover();
+    const isVisualRefreshEnabled = useVisualRefreshEnabled();
+    const collapsedRailWidth = isVisualRefreshEnabled ? COLLAPSED_RAIL_WIDTH + COLLAPSED_RAIL_BORDER_WIDTH : COLLAPSED_RAIL_WIDTH;
+    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 sidebarLabel = intl.formatMessage({
+      defaultMessage: "Sidebar",
+      id: "BYUJpW8TBonAxnYd",
+      description: "Accessible label for the sidebar panel."
+    });
+    const setCollapsedWithFocusHandover = (value) => {
+      sidebar?.state.setCollapsed(value);
+      focusHandover.setTarget(value ? "expand" : "collapse");
+    };
+    const splitSidebar = sidebar !== null && sidebar.state.mode === "split" ? sidebar : null;
+    const isSplit = splitSidebar !== null;
+    const isDrawer = sidebar !== null && sidebar.state.mode === "drawer";
+    const railWidth = sidebar === null ? 0 : collapsedRailWidth;
+    const panelProps = splitSidebar ? {
+      ...splitSidebar.domProps,
+      ref: splitSidebar.ref,
+      minWidth: splitSidebar.config.minWidth,
+      maxWidth: splitSidebar.config.maxWidth,
+      // The dragged width goes down unclamped: SplitLayout owns the
+      // clamp, and clamping here too would size against a second,
+      // disagreeing handle track (APPDEV-19606).
+      width: splitSidebar.state.intendedWidth,
+      resizable: splitSidebar.config.resizable,
+      className: clsx(styles.panel, splitSidebar.domProps.className),
+      label: splitSidebar.config.label,
+      "aria-label": resolvePanelLabel(splitSidebar.domProps, sidebarLabel),
+      id: panelId
+    } : {
+      minWidth: railWidth,
+      maxWidth: railWidth,
+      width: railWidth,
+      resizable: false,
+      // rail's expand button intentionally overflows the 16px column
+      style: { overflow: "visible" }
+    };
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      sidebar && createPortal(sidebar.children, panelHost),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...rootProps,
+          ref: rootRef,
+          className: clsx(styles.region, rootClassName),
+          children: /* @__PURE__ */ jsxs(SplitLayout, { children: [
+            /* @__PURE__ */ jsxs(
+              SplitLayout.Panel,
+              {
+                ...panelProps,
+                defaultWidth: sidebar?.config.defaultWidth ?? 0,
+                position: "start",
+                onResize: sidebar?.state.commitWidth,
+                children: [
+                  isSplit && /* @__PURE__ */ jsx(TeleportTarget, { host: panelHost }),
+                  sidebar !== null && !isSplit && /* @__PURE__ */ jsx(
+                    SidebarHint,
+                    {
+                      panelId,
+                      expandSidebarLabel,
+                      expandButtonRef: focusHandover.expandButtonRef,
+                      isCollapsed: isDrawer ? sidebar.state.collapsed : true,
+                      onCollapsedChange: setCollapsedWithFocusHandover
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__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-children-name": "ExpandCollapse",
+                "data-dt-properties": "state:collapse",
+                onClick: () => {
+                  setCollapsedWithFocusHandover(true);
+                },
+                children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(ChevronSmallLeftDoubleIcon, {}) })
+              }
+            ) }) }) }),
+            /* @__PURE__ */ jsx(SplitLayout.Content, { minWidth: content.config.minWidth, children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                ...content.domProps,
+                ref: content.ref,
+                className: clsx(styles.content, content.domProps.className),
+                children: content.children
+              }
+            ) })
+          ] })
+        }
+      ),
+      sidebar && isDrawer && /* @__PURE__ */ jsx(
+        Drawer,
+        {
+          ...sidebar.domProps,
+          ref: sidebar.ref,
+          className: clsx(styles.drawer, sidebar.domProps.className),
+          "aria-label": resolvePanelLabel(sidebar.domProps, sidebarLabel),
+          isDismissed: sidebar.state.collapsed,
+          onDismiss: (state, _reason) => {
+            setCollapsedWithFocusHandover(state);
+          },
+          placement: "left",
+          width: "wide",
+          children: /* @__PURE__ */ jsxs("div", { className: styles.drawerContentContainer, children: [
+            /* @__PURE__ */ jsx("div", { className: styles.drawerHeader, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                style: { marginLeft: "auto" },
+                ref: focusHandover.collapseButtonRef,
+                "aria-label": collapseSidebarLabel,
+                "data-dt-children-name": "CloseX",
+                onClick: () => {
+                  setCollapsedWithFocusHandover(true);
+                },
+                children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(XmarkIcon, {}) })
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { className: styles.drawerContent, children: /* @__PURE__ */ jsx(TeleportTarget, { host: panelHost }) })
+          ] })
+        }
+      )
+    ] });
+  })
+);
+SidebarRegion.displayName = "SidebarRegion";
+export {
+  SidebarRegion
+};
+//# sourceMappingURL=SidebarRegion.js.map

package/esm/layouts/page-layout/sidebar-region/SidebarRegion.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/layouts/page-layout/sidebar-region/SidebarRegion.tsx"],
+  "sourcesContent": ["import { clsx } from 'clsx';\nimport {\n  forwardRef,\n  memo,\n  type ComponentPropsWithoutRef,\n  type Ref,\n  type RefObject,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useIntl } from 'react-intl';\n\nimport { ChevronSmallLeftDoubleIcon, XmarkIcon } from '@dynatrace/strato-icons';\n\nimport { SidebarHint } from './SidebarHint.js';\nimport * as styles from './SidebarRegion.sty.js';\nimport { type ExtractedSidebarSlot } from './slots.js';\nimport { useButtonFocusHandover } from './useFocusHandover.js';\nimport { Button } from '../../../buttons/button/Button.js';\nimport { useId } from '../../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport { useVisualRefreshEnabled } from '../../../core/hooks/useVisualRefreshEnabled.js';\nimport { Drawer } from '../../../overlays/drawer/Drawer.js';\nimport { Tooltip } from '../../../overlays/tooltip/Tooltip.js';\nimport { type ExtractedContentSlot } from '../../split-layout/slots.js';\nimport { SplitLayout } from '../../split-layout/SplitLayout.js';\nimport { resolvePanelLabel } from '../shared/panel-label.js';\nimport type { SidebarPanelState } from '../shared/panel-state/usePanelState.js';\nimport { TeleportTarget, useStableHost } from '../shared/teleport/teleport.js';\n\n// = Spacings.Size16; SplitLayout.Panel needs a plain number, not a CSS var\nconst COLLAPSED_RAIL_WIDTH = 16;\n// visual refresh adds a 1px border-right (content-box, so it adds to the width)\nconst COLLAPSED_RAIL_BORDER_WIDTH = 1;\n\ntype SidebarSlot = ExtractedSidebarSlot & { state: SidebarPanelState };\n\n/**\n * The prop bag `PageLayout`'s main shell passes down for the sidebar region.\n * Not the public props of a sidebar: consumers configure it through\n * `PageLayout.Sidebar`.\n *\n * @internal\n */\nexport type SidebarRegionShellProps = {\n  sidebar: SidebarSlot | null;\n  content: ExtractedContentSlot<HTMLDivElement>;\n  containerRef: RefObject<HTMLDivElement | null>;\n} & Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'content'>;\n\n/**\n * Renders the sidebar region. The `SplitLayout` and the content column are\n * rendered unconditionally: an absent sidebar is a zero-width, non-resizable\n * panel column, never a different tree shape. Branching on slot presence would\n * relocate the content host and detach the scrolled content (APPDEV-19606).\n *\n * @internal\n */\nexport const SidebarRegion = memo(\n  forwardRef<HTMLDivElement, SidebarRegionShellProps>((props, ref) => {\n    const {\n      className: rootClassName,\n      containerRef,\n      sidebar,\n      content,\n      ...rootProps\n    } = props;\n\n    const intl = useIntl();\n    const panelId = useId();\n    const rootRef = useMergeRefs([ref, containerRef]);\n    // The panel content still relocates between the split column and the\n    // drawer, so it stays portaled into a host that only moves in the DOM.\n    const panelHost = useStableHost();\n    const focusHandover = useButtonFocusHandover();\n    const isVisualRefreshEnabled = useVisualRefreshEnabled();\n\n    const collapsedRailWidth = isVisualRefreshEnabled\n      ? COLLAPSED_RAIL_WIDTH + COLLAPSED_RAIL_BORDER_WIDTH\n      : COLLAPSED_RAIL_WIDTH;\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      sidebar?.state.setCollapsed(value);\n      focusHandover.setTarget(value ? 'expand' : 'collapse');\n    };\n\n    // An absent sidebar reserves no width at all, while a present but collapsed\n    // one keeps its rail column.\n    const splitSidebar =\n      sidebar !== null && sidebar.state.mode === 'split' ? sidebar : null;\n    const isSplit = splitSidebar !== null;\n    const isDrawer = sidebar !== null && sidebar.state.mode === 'drawer';\n    const railWidth = sidebar === null ? 0 : collapsedRailWidth;\n\n    const panelProps = splitSidebar\n      ? {\n          ...splitSidebar.domProps,\n          ref: splitSidebar.ref as Ref<HTMLDivElement>,\n          minWidth: splitSidebar.config.minWidth,\n          maxWidth: splitSidebar.config.maxWidth,\n          // The dragged width goes down unclamped: SplitLayout owns the\n          // clamp, and clamping here too would size against a second,\n          // disagreeing handle track (APPDEV-19606).\n          width: splitSidebar.state.intendedWidth,\n          resizable: splitSidebar.config.resizable,\n          className: clsx(styles.panel, splitSidebar.domProps.className),\n          label: splitSidebar.config.label,\n          'aria-label': resolvePanelLabel(splitSidebar.domProps, sidebarLabel),\n          id: panelId,\n        }\n      : {\n          minWidth: railWidth,\n          maxWidth: railWidth,\n          width: railWidth,\n          resizable: false,\n          // rail's expand button intentionally overflows the 16px column\n          style: { overflow: 'visible' },\n        };\n\n    return (\n      <>\n        {sidebar && createPortal(sidebar.children, panelHost)}\n        <div\n          {...rootProps}\n          ref={rootRef}\n          className={clsx(styles.region, rootClassName)}\n        >\n          <SplitLayout>\n            <SplitLayout.Panel\n              {...panelProps}\n              defaultWidth={sidebar?.config.defaultWidth ?? 0}\n              position=\"start\"\n              onResize={sidebar?.state.commitWidth}\n            >\n              {isSplit && <TeleportTarget host={panelHost} />}\n              {sidebar !== null && !isSplit && (\n                <SidebarHint\n                  panelId={panelId}\n                  expandSidebarLabel={expandSidebarLabel}\n                  expandButtonRef={focusHandover.expandButtonRef}\n                  isCollapsed={isDrawer ? sidebar.state.collapsed : true}\n                  onCollapsedChange={setCollapsedWithFocusHandover}\n                />\n              )}\n            </SplitLayout.Panel>\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-children-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            <SplitLayout.Content minWidth={content.config.minWidth}>\n              <div\n                {...content.domProps}\n                ref={content.ref}\n                className={clsx(styles.content, content.domProps.className)}\n              >\n                {content.children}\n              </div>\n            </SplitLayout.Content>\n          </SplitLayout>\n        </div>\n        {sidebar && isDrawer && (\n          <Drawer\n            {...sidebar.domProps}\n            ref={sidebar.ref as Ref<HTMLDialogElement>}\n            className={clsx(styles.drawer, sidebar.domProps.className)}\n            aria-label={resolvePanelLabel(sidebar.domProps, sidebarLabel)}\n            isDismissed={sidebar.state.collapsed}\n            onDismiss={(state, _reason) => {\n              setCollapsedWithFocusHandover(state);\n            }}\n            placement=\"left\"\n            width=\"wide\"\n          >\n            <div className={styles.drawerContentContainer}>\n              <div className={styles.drawerHeader}>\n                <Button\n                  style={{ marginLeft: 'auto' }}\n                  ref={focusHandover.collapseButtonRef}\n                  aria-label={collapseSidebarLabel}\n                  data-dt-children-name=\"CloseX\"\n                  onClick={() => {\n                    setCollapsedWithFocusHandover(true);\n                  }}\n                >\n                  <Button.Prefix>\n                    <XmarkIcon />\n                  </Button.Prefix>\n                </Button>\n              </div>\n              <div className={styles.drawerContent}>\n                <TeleportTarget host={panelHost} />\n              </div>\n            </div>\n          </Drawer>\n        )}\n      </>\n    );\n  }),\n);\nSidebarRegion.displayName = 'SidebarRegion';\n"],
+  "mappings": "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",
+  "names": []
+}

package/esm/layouts/page-layout/sidebar-region/SidebarRegion.sty.js

@@ -0,0 +1,34 @@
+import "../../../core/components/app-root/AppRoot.css";
+import "../../../core/styles/focusRingStatic.css";
+import "./SidebarRegion.css";
+var collapseButton = "_cgf7uie-3-14-0 _cgf7uid-3-14-0";
+var collapseButtonContainer = "_cgf7uib-3-14-0";
+var collapsedSidebar = "_cgf7ui4-3-14-0";
+var content = "_cgf7ui2-3-14-0";
+var drawer = "_cgf7ui6-3-14-0";
+var drawerContent = "_cgf7ui8-3-14-0";
+var drawerContentContainer = "_cgf7ui7-3-14-0";
+var drawerHeader = "_cgf7ui9-3-14-0";
+var expandButton = "_cgf7uif-3-14-0 _cgf7uid-3-14-0";
+var expandButtonContainer = "_cgf7uic-3-14-0";
+var hint = "_cgf7ui5-3-14-0 _z0fq9b4-3-14-0 _z0fq9bd-3-14-0 _z0fq9b6-3-14-0 _z0fq9bc-3-14-0";
+var panel = "_cgf7ui1-3-14-0";
+var region = "_cgf7ui0-3-14-0";
+var resizeHandle = "_cgf7ui3-3-14-0";
+export {
+  collapseButton,
+  collapseButtonContainer,
+  collapsedSidebar,
+  content,
+  drawer,
+  drawerContent,
+  drawerContentContainer,
+  drawerHeader,
+  expandButton,
+  expandButtonContainer,
+  hint,
+  panel,
+  region,
+  resizeHandle
+};
+//# sourceMappingURL=SidebarRegion.sty.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/layouts/page-layout/sidebar-region/SidebarRegion.css.ts"],
+  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport '../../../core/styles/focusRingStatic.css';\nimport './SidebarRegion.css';\nexport var collapseButton = '_cgf7uie-3-14-0 _cgf7uid-3-14-0';\nexport var collapseButtonContainer = '_cgf7uib-3-14-0';\nexport var collapsedSidebar = '_cgf7ui4-3-14-0';\nexport var content = '_cgf7ui2-3-14-0';\nexport var drawer = '_cgf7ui6-3-14-0';\nexport var drawerContent = '_cgf7ui8-3-14-0';\nexport var drawerContentContainer = '_cgf7ui7-3-14-0';\nexport var drawerHeader = '_cgf7ui9-3-14-0';\nexport var expandButton = '_cgf7uif-3-14-0 _cgf7uid-3-14-0';\nexport var expandButtonContainer = '_cgf7uic-3-14-0';\nexport var hint = '_cgf7ui5-3-14-0 _z0fq9b4-3-14-0 _z0fq9bd-3-14-0 _z0fq9b6-3-14-0 _z0fq9bc-3-14-0';\nexport var panel = '_cgf7ui1-3-14-0';\nexport var region = '_cgf7ui0-3-14-0';\nexport var resizeHandle = '_cgf7ui3-3-14-0';"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,iBAAiB;AACrB,IAAI,0BAA0B;AAC9B,IAAI,mBAAmB;AACvB,IAAI,UAAU;AACd,IAAI,SAAS;AACb,IAAI,gBAAgB;AACpB,IAAI,yBAAyB;AAC7B,IAAI,eAAe;AACnB,IAAI,eAAe;AACnB,IAAI,wBAAwB;AAC5B,IAAI,OAAO;AACX,IAAI,QAAQ;AACZ,IAAI,SAAS;AACb,IAAI,eAAe;",
+  "names": []
+}

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/esm/layouts/page-layout/{sidebar-layout → sidebar-region}/useFocusHandover.js

@@ -2,16 +2,16 @@ import { useCallback, useRef } from "react";
 function useButtonFocusHandover() {
   const pendingTarget = useRef(null);
   const setTarget = useCallback((target) => {
-    pendingTarget.current = { target };
+    pendingTarget.current = target;
   }, []);
   const collapseButtonRef = useCallback((node) => {
-    if (node && pendingTarget.current?.target === "collapse") {
+    if (node && pendingTarget.current === "collapse") {
       node.focus();
       pendingTarget.current = null;
     }
   }, []);
   const expandButtonRef = useCallback((node) => {
-    if (node && pendingTarget.current?.target === "expand") {
+    if (node && pendingTarget.current === "expand") {
       node.focus();
       pendingTarget.current = null;
     }

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/layouts/page-layout/sidebar-region/useFocusHandover.ts"],
+  "sourcesContent": ["import { useCallback, useRef } from 'react';\n\ntype FocusTarget = 'collapse' | 'expand';\n\n/**\n * Collapsing the sidebar unmounts the collapse button and mounts the expand\n * button (and back), which would drop focus to the body. Records which button\n * the next commit should focus, and focuses it as it mounts.\n *\n * @internal\n */\nexport function useButtonFocusHandover() {\n  const pendingTarget = useRef<FocusTarget | null>(null);\n\n  const setTarget = useCallback((target: FocusTarget) => {\n    pendingTarget.current = target;\n  }, []);\n\n  const collapseButtonRef = useCallback((node: HTMLButtonElement | null) => {\n    if (node && pendingTarget.current === 'collapse') {\n      node.focus();\n      pendingTarget.current = null;\n    }\n  }, []);\n\n  const expandButtonRef = useCallback((node: HTMLButtonElement | null) => {\n    if (node && pendingTarget.current === '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;AAW7B,SAAS,yBAAyB;AACvC,QAAM,gBAAgB,OAA2B,IAAI;AAErD,QAAM,YAAY,YAAY,CAAC,WAAwB;AACrD,kBAAc,UAAU;AAAA,EAC1B,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAoB,YAAY,CAAC,SAAmC;AACxE,QAAI,QAAQ,cAAc,YAAY,YAAY;AAChD,WAAK,MAAM;AACX,oBAAc,UAAU;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAkB,YAAY,CAAC,SAAmC;AACtE,QAAI,QAAQ,cAAc,YAAY,UAAU;AAC9C,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/split-layout/SplitLayout.css

@@ -1,11 +1,11 @@
-._6q8dk20-3-13-2 {
+._6q8dk20-3-14-0 {
   height: 100%;
   overflow-y: hidden;
   overflow-x: auto;
   display: flex;
   position: relative;
 }
-._6q8dk21-3-13-2 {
+._6q8dk21-3-14-0 {
   box-sizing: border-box;
   height: 100%;
   top: 0;
@@ -13,99 +13,13 @@
   flex-shrink: 0;
   overflow-y: auto;
 }
-._6q8dk22-3-13-2 {
-  flex: 0 0 auto;
-}
-._6q8dk23-3-13-2 {
-  flex: 1 1 0;
-  contain: layout paint;
-}
-._6q8dk24-3-13-2 {
-  width: var(--dt-spacings-size-8, 8px);
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  overflow-y: visible;
-}
-._1jgl8s50-3-13-2 ._6q8dk24-3-13-2 {
-  border-radius: 0;
-  height: 100%;
-  width: var(--dt-spacings-size-8, 8px);
-  left: 0;
-  transition: none;
-  background-color: transparent;
-  margin-inline: calc(var(--dt-spacings-size-8, 8px) / -2);
-  z-index: 1;
-}
-._1jgl8s50-3-13-2 ._6q8dk24-3-13-2::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: var(--dt-borders-width-default, 1px);
-  background-color: var(--dt-colors-border-neutral-subdued, #e4e5eb);
-  pointer-events: none;
-}
-._1jgl8s50-3-13-2 ._6q8dk24-3-13-2:hover::before {
-  background-color: var(--dt-colors-border-neutral-subdued-hover, #d0d1dc);
-}
-._1jgl8s50-3-13-2 ._6q8dk24-3-13-2:active::before {
-  background-color: var(--dt-colors-border-neutral-subdued-active, #c6c7d5);
-}
-._6q8dk25-3-13-2 {
+._6q8dk22-3-14-0 {
   inset: 0;
   overflow: visible;
   pointer-events: none;
   position: absolute;
   z-index: 1;
 }
-._6q8dk25-3-13-2 > * {
+._6q8dk22-3-14-0 > * {
   pointer-events: auto;
-}
-._6q8dk26-3-13-2 {
-  background-color: var(--dt-colors-border-neutral-accent, #595a7d);
-  border: none;
-  border-radius: var(--dt-borders-radius-field-default, 6px);
-  cursor: col-resize;
-  height: var(--dt-spacings-size-36, 36px);
-  left: 3px;
-  margin: 0;
-  padding: 0;
-  touch-action: none;
-  transition: height var(--dt-timings-base-default, 300ms) var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
-  width: 2px;
-}
-._6q8dk26-3-13-2:focus-visible {
-  width: 100%;
-}
-._6q8dk26-3-13-2:hover._6q8dk26-3-13-2:focus-visible {
-  width: 2px;
-}
-._6q8dk26-3-13-2:focus-visible, ._6q8dk26-3-13-2:hover {
-  height: var(--dt-spacings-size-48, 48px);
-  background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
-}
-._6q8dk26-3-13-2:after {
-  content: "";
-  display: block;
-  height: 100%;
-  left: 50%;
-  position: absolute;
-  top: 0;
-  transform: translateX(-50%);
-  user-select: none;
-  width: 100%;
-}
-._1jgl8s50-3-13-2 ._6q8dk26-3-13-2 {
-  width: 0;
-  cursor: ew-resize;
-}
-._1jgl8s50-3-13-2 ._6q8dk24-3-13-2:has(._6q8dk26-3-13-2:focus-visible)::before {
-  background-color: var(--dt-colors-border-neutral-accent, #595a7d);
-  width: var(--dt-borders-width-emphasized, 2px);
-}
-:root._1jgl8s50-3-13-2 {
-  --_dt-split-handle-ew: 0;
 }

package/esm/layouts/split-layout/SplitLayout.js

@@ -1,13 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useGesture } from "@use-gesture/react";
 import { clsx } from "clsx";
 import {
-  createContext,
   forwardRef,
   memo,
-  useContext,
   useRef
 } from "react";
+import { inlineHandleTrack } from "./resize-separator/ResizeSeparator.sty.js";
+import { ResizeSeparator } from "./resize-separator/ResizeSeparator.js";
 import {
   ContentSlot,
   extractSlotsProps,
@@ -17,7 +16,6 @@ import {
 import * as styles from "./SplitLayout.sty.js";
 import { useSplitSizing } from "./useSplitSizing.js";
 import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
-import { useFocusRing } from "../../core/hooks/useFocusRing.js";
 import { useId } from "../../core/hooks/useId.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
 const PanelShell = memo(({ children }) => {
@@ -59,47 +57,6 @@ const ContentColumn = forwardRef(
     );
   }
 );
-const ResizeHandle = forwardRef((props, forwardedRef) => {
-  const { onDrag, onDragStart, onDragEnd, panelId, ariaLabel, ariaLabelledBy } = useContext(ActionsContext);
-  const ref = useRef(null);
-  const mergedRefs = useMergeRefs([ref, forwardedRef]);
-  const { focusProps, focusClassName } = useFocusRing({
-    focusWithin: true,
-    ignoreModality: true
-  });
-  useGesture(
-    {
-      onDragStart,
-      onDragEnd,
-      onDrag: (state) => {
-        onDrag(state.movement[0]);
-      }
-    },
-    { target: ref }
-  );
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...props,
-      ...focusProps,
-      role: "separator",
-      ref: mergedRefs,
-      className: clsx(styles.resizeHandle, focusClassName),
-      tabIndex: 0,
-      "aria-controls": panelId,
-      "aria-label": ariaLabelledBy ? void 0 : ariaLabel,
-      "aria-labelledby": ariaLabelledBy
-    }
-  );
-});
-const ActionsContext = createContext({
-  onDragStart: () => void 0,
-  onDrag: () => void 0,
-  onDragEnd: () => void 0,
-  panelId: "",
-  ariaLabel: void 0,
-  ariaLabelledBy: void 0
-});
 const SplitLayoutRoot = memo(
   forwardRef((props, forwardedRef) => {
     const { children, className: rootClassname, ...rootProps } = props;
@@ -133,7 +90,6 @@ const SplitLayoutRoot = memo(
       }
     });
     const isDefaultPosition = slots.panel.config.position === "start";
-    const activeSizing = isDefaultPosition ? sizing.panel : sizing.content;
     const panelColumn = /* @__PURE__ */ jsx(
       PanelColumn,
       {
@@ -165,48 +121,40 @@ const SplitLayoutRoot = memo(
       {
         ...slots.resizeHandle?.domProps,
         className: clsx(
-          styles.handleColumn,
+          inlineHandleTrack,
           slots.resizeHandle?.domProps?.className
         ),
         ref: slots.resizeHandle?.ref,
         children: [
           /* @__PURE__ */ jsx(
-            ResizeHandle,
+            ResizeSeparator,
             {
-              "aria-valuemin": activeSizing.minPx,
-              "aria-valuemax": isFinite(activeSizing.maxPx) ? activeSizing.maxPx : void 0,
-              "aria-valuenow": activeSizing.width,
-              "aria-valuetext": `${activeSizing.width}px`,
-              "aria-orientation": "vertical"
+              ...sizing.dragActions,
+              controls: panelId,
+              value: sizing.panel.width,
+              min: sizing.panel.minPx,
+              max: sizing.panel.maxPx,
+              valueText: `${sizing.panel.width}px`,
+              "aria-label": slots.resizeHandle?.domProps["aria-label"] ?? slots.panel.config.label,
+              "aria-labelledby": slots.resizeHandle?.domProps["aria-labelledby"]
             }
           ),
           resizeHandleDecorations
         ]
       }
     ) : null;
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(
       "div",
       {
         ...restRootProps,
         ...behavioralTrackingProps,
         className: clsx(styles.layout, rootClassname),
         ref: rootMergedRef,
-        children: /* @__PURE__ */ jsxs(
-          ActionsContext.Provider,
-          {
-            value: {
-              ...sizing.dragActions,
-              panelId,
-              ariaLabel: slots.resizeHandle?.domProps["aria-label"] ?? slots.panel.config.label,
-              ariaLabelledBy: slots.resizeHandle?.domProps["aria-labelledby"]
-            },
-            children: [
-              isDefaultPosition ? panelColumn : contentColumn,
-              resizeHandle,
-              isDefaultPosition ? contentColumn : panelColumn
-            ]
-          }
-        )
+        children: [
+          isDefaultPosition ? panelColumn : contentColumn,
+          resizeHandle,
+          isDefaultPosition ? contentColumn : panelColumn
+        ]
       }
     );
   })

package/esm/layouts/split-layout/SplitLayout.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/split-layout/SplitLayout.tsx"],
-  "sourcesContent": ["import { useGesture } from '@use-gesture/react';\nimport { clsx } from 'clsx';\nimport {\n  type ComponentPropsWithoutRef,\n  createContext,\n  forwardRef,\n  memo,\n  type PropsWithChildren,\n  useContext,\n  useRef,\n} from 'react';\n\nimport {\n  ContentSlot,\n  extractSlotsProps,\n  PanelSlot,\n  ResizeHandleSlot,\n} from './slots.js';\nimport * as styles from './SplitLayout.sty.js';\nimport { useSplitSizing } from './useSplitSizing.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\n\n/** shell component for referencial stability - must not use any context or props */\nconst PanelShell = memo(({ children }: PropsWithChildren) => {\n  return children;\n});\n\n/** shell component for referencial stability - must not use any context or props */\nconst ContentShell = memo(({ children }: PropsWithChildren) => {\n  return children;\n});\n\n/** shell component for referencial stability - must not use any context or props */\nconst ResizeHandleShell = memo(({ children }: PropsWithChildren) => {\n  return children;\n});\n\ninterface PanelColumnProps\n  extends PropsWithChildren,\n    ComponentPropsWithoutRef<'div'> {}\n\nconst PanelColumn = forwardRef<HTMLDivElement, PanelColumnProps>(\n  (props, forwardedRef) => {\n    const { children, className, style, ...rest } = props;\n\n    return (\n      <div\n        {...rest}\n        ref={forwardedRef}\n        className={clsx(styles.column, className)}\n        style={style}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\ninterface ContentColumnProps\n  extends PropsWithChildren,\n    ComponentPropsWithoutRef<'div'> {}\n\nconst ContentColumn = forwardRef<HTMLDivElement, ContentColumnProps>(\n  (props, forwardedRef) => {\n    const { children, className, style, ...rest } = props;\n\n    return (\n      <div\n        {...rest}\n        ref={forwardedRef}\n        className={clsx(styles.column, className)}\n        style={style}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nconst ResizeHandle = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<'div'>\n>((props, forwardedRef) => {\n  const { onDrag, onDragStart, onDragEnd, panelId, ariaLabel, ariaLabelledBy } =\n    useContext(ActionsContext);\n  const ref = useRef<HTMLDivElement>(null);\n  const mergedRefs = useMergeRefs([ref, forwardedRef]);\n\n  const { focusProps, focusClassName } = useFocusRing({\n    focusWithin: true,\n    ignoreModality: true,\n  });\n\n  useGesture(\n    {\n      onDragStart,\n      onDragEnd,\n      onDrag: (state) => {\n        onDrag(state.movement[0]);\n      },\n    },\n    { target: ref },\n  );\n\n  return (\n    <div\n      {...props}\n      {...focusProps}\n      role=\"separator\"\n      ref={mergedRefs}\n      className={clsx(styles.resizeHandle, focusClassName)}\n      tabIndex={0}\n      aria-controls={panelId}\n      aria-label={ariaLabelledBy ? undefined : ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n    />\n  );\n});\n\nconst ActionsContext = createContext<{\n  onDragStart: () => void;\n  onDrag: (v: number) => void;\n  onDragEnd: () => void;\n  panelId: string;\n  ariaLabel: string | undefined;\n  ariaLabelledBy: string | undefined;\n}>({\n  onDragStart: () => undefined,\n  onDrag: () => undefined,\n  onDragEnd: () => undefined,\n  panelId: '',\n  ariaLabel: undefined,\n  ariaLabelledBy: undefined,\n});\n\n/** @internal */\nexport interface SplitLayoutProps\n  extends PropsWithChildren,\n    BehaviorTrackingProps,\n    AriaLabelingProps,\n    StylingProps,\n    MaskingProps,\n    DataTestId {}\n\nconst SplitLayoutRoot = memo(\n  forwardRef<HTMLDivElement, SplitLayoutProps>((props, forwardedRef) => {\n    const { children, className: rootClassname, ...rootProps } = props;\n\n    const [behavioralTrackingProps, restRootProps] =\n      useBehavioralTrackingProps(rootProps);\n\n    const slots = extractSlotsProps(children);\n\n    const rootRef = useRef<HTMLDivElement>(null);\n    const rootMergedRef = useMergeRefs([forwardedRef, rootRef]);\n\n    const generatedPanelId = useId();\n    const panelId = slots.panel.domProps.id ?? generatedPanelId;\n\n    const panelRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n    const panelMergedRef = useMergeRefs([panelRef, slots.panel.ref]);\n    const contentMergedRef = useMergeRefs([contentRef, slots.content?.ref]);\n\n    const sizing = useSplitSizing({\n      panel: {\n        min: slots.panel.config.minWidth,\n        max: slots.panel.config.maxWidth,\n        default: slots.panel.config.defaultWidth,\n        position: slots.panel.config.position,\n        resizable: slots.panel.config.resizable,\n        onResize: slots.panel.config.onResize,\n        width: slots.panel.config.width,\n      },\n      content: {\n        min: slots.content?.config.minWidth ?? 0,\n      },\n      refs: {\n        root: rootRef,\n        panel: panelRef,\n        content: contentRef,\n      },\n    });\n\n    const isDefaultPosition = slots.panel.config.position === 'start';\n    const activeSizing = isDefaultPosition ? sizing.panel : sizing.content;\n\n    const panelColumn = (\n      <PanelColumn\n        {...slots.panel.domProps}\n        id={panelId}\n        style={{ ...slots.panel.domProps.style, width: sizing.panel.widthCss }}\n        ref={panelMergedRef}\n      >\n        <PanelShell>{slots.panel.children}</PanelShell>\n      </PanelColumn>\n    );\n\n    const contentColumn = slots.content ? (\n      <ContentColumn\n        {...slots.content.domProps}\n        style={{\n          ...slots.content.domProps.style,\n          width: sizing.content.widthCss,\n          // content needs an explicit minWidth when it is the leading column\n          // (end position) to prevent it from collapsing before the resize handle\n          minWidth: isDefaultPosition\n            ? undefined\n            : slots.content.config.minWidth,\n        }}\n        ref={contentMergedRef}\n      >\n        <ContentShell>{slots.content.children}</ContentShell>\n      </ContentColumn>\n    ) : null;\n\n    const resizeHandleDecorations = slots.resizeHandle?.children ? (\n      <div className={styles.handleDecorations}>\n        <ResizeHandleShell>{slots.resizeHandle.children}</ResizeHandleShell>\n      </div>\n    ) : null;\n\n    const resizeHandle = slots.panel.config.resizable ? (\n      <div\n        {...slots.resizeHandle?.domProps}\n        className={clsx(\n          styles.handleColumn,\n          slots.resizeHandle?.domProps?.className,\n        )}\n        ref={slots.resizeHandle?.ref}\n      >\n        <ResizeHandle\n          aria-valuemin={activeSizing.minPx}\n          aria-valuemax={\n            isFinite(activeSizing.maxPx) ? activeSizing.maxPx : undefined\n          }\n          aria-valuenow={activeSizing.width}\n          aria-valuetext={`${activeSizing.width}px`}\n          aria-orientation=\"vertical\"\n        />\n        {resizeHandleDecorations}\n      </div>\n    ) : null;\n\n    return (\n      <div\n        {...restRootProps}\n        {...behavioralTrackingProps}\n        className={clsx(styles.layout, rootClassname)}\n        ref={rootMergedRef}\n      >\n        <ActionsContext.Provider\n          value={{\n            ...sizing.dragActions,\n            panelId,\n            ariaLabel:\n              slots.resizeHandle?.domProps['aria-label'] ??\n              slots.panel.config.label,\n            ariaLabelledBy: slots.resizeHandle?.domProps['aria-labelledby'],\n          }}\n        >\n          {isDefaultPosition ? panelColumn : contentColumn}\n          {resizeHandle}\n          {isDefaultPosition ? contentColumn : panelColumn}\n        </ActionsContext.Provider>\n      </div>\n    );\n  }),\n);\nSplitLayoutRoot.displayName = 'SplitLayout.Root';\n\n/**\n * Internal: The accessibility approach to SplitLayout is inspired by the Window Splitter ARIA pattern.\n * While we dont follow it 100%, most aria attributes and intraction should adhere to this pattern.\n * https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/\n */\n\n/** @internal */\nexport const SplitLayout = Object.assign(SplitLayoutRoot, {\n  Panel: PanelSlot,\n  Content: ContentSlot,\n  ResizeHandle: ResizeHandleSlot,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { clsx } from 'clsx';\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  memo,\n  type PropsWithChildren,\n  useRef,\n} from 'react';\n\nimport { inlineHandleTrack } from './resize-separator/ResizeSeparator.sty.js';\nimport { ResizeSeparator } from './resize-separator/ResizeSeparator.js';\nimport {\n  ContentSlot,\n  extractSlotsProps,\n  PanelSlot,\n  ResizeHandleSlot,\n} from './slots.js';\nimport * as styles from './SplitLayout.sty.js';\nimport { useSplitSizing } from './useSplitSizing.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\n\n/** shell component for referencial stability - must not use any context or props */\nconst PanelShell = memo(({ children }: PropsWithChildren) => {\n  return children;\n});\n\n/** shell component for referencial stability - must not use any context or props */\nconst ContentShell = memo(({ children }: PropsWithChildren) => {\n  return children;\n});\n\n/** shell component for referencial stability - must not use any context or props */\nconst ResizeHandleShell = memo(({ children }: PropsWithChildren) => {\n  return children;\n});\n\ninterface PanelColumnProps\n  extends PropsWithChildren, ComponentPropsWithoutRef<'div'> {}\n\nconst PanelColumn = forwardRef<HTMLDivElement, PanelColumnProps>(\n  (props, forwardedRef) => {\n    const { children, className, style, ...rest } = props;\n\n    return (\n      <div\n        {...rest}\n        ref={forwardedRef}\n        className={clsx(styles.column, className)}\n        style={style}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\ninterface ContentColumnProps\n  extends PropsWithChildren, ComponentPropsWithoutRef<'div'> {}\n\nconst ContentColumn = forwardRef<HTMLDivElement, ContentColumnProps>(\n  (props, forwardedRef) => {\n    const { children, className, style, ...rest } = props;\n\n    return (\n      <div\n        {...rest}\n        ref={forwardedRef}\n        className={clsx(styles.column, className)}\n        style={style}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\n/** @internal */\nexport interface SplitLayoutProps\n  extends\n    PropsWithChildren,\n    BehaviorTrackingProps,\n    AriaLabelingProps,\n    StylingProps,\n    MaskingProps,\n    DataTestId {}\n\nconst SplitLayoutRoot = memo(\n  forwardRef<HTMLDivElement, SplitLayoutProps>((props, forwardedRef) => {\n    const { children, className: rootClassname, ...rootProps } = props;\n\n    const [behavioralTrackingProps, restRootProps] =\n      useBehavioralTrackingProps(rootProps);\n\n    const slots = extractSlotsProps(children);\n\n    const rootRef = useRef<HTMLDivElement>(null);\n    const rootMergedRef = useMergeRefs([forwardedRef, rootRef]);\n\n    const generatedPanelId = useId();\n    const panelId = slots.panel.domProps.id ?? generatedPanelId;\n\n    const panelRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n    const panelMergedRef = useMergeRefs([panelRef, slots.panel.ref]);\n    const contentMergedRef = useMergeRefs([contentRef, slots.content?.ref]);\n\n    const sizing = useSplitSizing({\n      panel: {\n        min: slots.panel.config.minWidth,\n        max: slots.panel.config.maxWidth,\n        default: slots.panel.config.defaultWidth,\n        position: slots.panel.config.position,\n        resizable: slots.panel.config.resizable,\n        onResize: slots.panel.config.onResize,\n        width: slots.panel.config.width,\n      },\n      content: {\n        min: slots.content?.config.minWidth ?? 0,\n      },\n      refs: {\n        root: rootRef,\n        panel: panelRef,\n        content: contentRef,\n      },\n    });\n\n    const isDefaultPosition = slots.panel.config.position === 'start';\n\n    const panelColumn = (\n      <PanelColumn\n        {...slots.panel.domProps}\n        id={panelId}\n        style={{ ...slots.panel.domProps.style, width: sizing.panel.widthCss }}\n        ref={panelMergedRef}\n      >\n        <PanelShell>{slots.panel.children}</PanelShell>\n      </PanelColumn>\n    );\n\n    const contentColumn = slots.content ? (\n      <ContentColumn\n        {...slots.content.domProps}\n        style={{\n          ...slots.content.domProps.style,\n          width: sizing.content.widthCss,\n          // content needs an explicit minWidth when it is the leading column\n          // (end position) to prevent it from collapsing before the resize handle\n          minWidth: isDefaultPosition\n            ? undefined\n            : slots.content.config.minWidth,\n        }}\n        ref={contentMergedRef}\n      >\n        <ContentShell>{slots.content.children}</ContentShell>\n      </ContentColumn>\n    ) : null;\n\n    const resizeHandleDecorations = slots.resizeHandle?.children ? (\n      <div className={styles.handleDecorations}>\n        <ResizeHandleShell>{slots.resizeHandle.children}</ResizeHandleShell>\n      </div>\n    ) : null;\n\n    const resizeHandle = slots.panel.config.resizable ? (\n      <div\n        {...slots.resizeHandle?.domProps}\n        className={clsx(\n          inlineHandleTrack,\n          slots.resizeHandle?.domProps?.className,\n        )}\n        ref={slots.resizeHandle?.ref}\n      >\n        <ResizeSeparator\n          {...sizing.dragActions}\n          controls={panelId}\n          value={sizing.panel.width}\n          min={sizing.panel.minPx}\n          max={sizing.panel.maxPx}\n          valueText={`${sizing.panel.width}px`}\n          aria-label={\n            slots.resizeHandle?.domProps['aria-label'] ??\n            slots.panel.config.label\n          }\n          aria-labelledby={slots.resizeHandle?.domProps['aria-labelledby']}\n        />\n        {resizeHandleDecorations}\n      </div>\n    ) : null;\n\n    return (\n      <div\n        {...restRootProps}\n        {...behavioralTrackingProps}\n        className={clsx(styles.layout, rootClassname)}\n        ref={rootMergedRef}\n      >\n        {isDefaultPosition ? panelColumn : contentColumn}\n        {resizeHandle}\n        {isDefaultPosition ? contentColumn : panelColumn}\n      </div>\n    );\n  }),\n);\nSplitLayoutRoot.displayName = 'SplitLayout.Root';\n\n/**\n * Internal: The accessibility approach to SplitLayout is inspired by the Window Splitter ARIA pattern.\n * While we dont follow it 100%, most aria attributes and intraction should adhere to this pattern.\n * https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/\n */\n\n/** @internal */\nexport const SplitLayout = Object.assign(SplitLayoutRoot, {\n  Panel: PanelSlot,\n  Content: ContentSlot,\n  ResizeHandle: ResizeHandleSlot,\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/layouts/split-layout/SplitLayout.sty.js

@@ -1,19 +1,10 @@
-import "../../core/components/app-root/AppRoot.css";
 import "./SplitLayout.css";
-var column = "_6q8dk21-3-13-2";
-var contentShellContainer = "_6q8dk23-3-13-2 _6q8dk21-3-13-2";
-var handleColumn = "_6q8dk24-3-13-2 _6q8dk21-3-13-2";
-var handleDecorations = "_6q8dk25-3-13-2";
-var layout = "_6q8dk20-3-13-2";
-var panelShellContainer = "_6q8dk22-3-13-2 _6q8dk21-3-13-2";
-var resizeHandle = "_6q8dk26-3-13-2";
+var column = "_6q8dk21-3-14-0";
+var handleDecorations = "_6q8dk22-3-14-0";
+var layout = "_6q8dk20-3-14-0";
 export {
   column,
-  contentShellContainer,
-  handleColumn,
   handleDecorations,
-  layout,
-  panelShellContainer,
-  resizeHandle
+  layout
 };
 //# sourceMappingURL=SplitLayout.sty.js.map