@dynatrace/strato-components 3.13.2 → 3.14.0

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

@@ -1,244 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var DetailsLayout_exports = {};
-__export(DetailsLayout_exports, {
-  DetailsLayout: () => DetailsLayout
-});
-module.exports = __toCommonJS(DetailsLayout_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_clsx = require("clsx");
-var import_react = require("react");
-var import_react_intl = require("react-intl");
-var styles = __toESM(require("./DetailsLayout.sty.js"));
-var import_DetailsLayoutContext = require("./DetailsLayoutContext.js");
-var import_Overlay = require("./Overlay.js");
-var import_useLayoutState = require("./useLayoutState.js");
-var import_useMergeRefs = require("../../../core/hooks/useMergeRefs.js");
-var import_useSafeLayoutEffect = require("../../../core/hooks/useSafeLayoutEffect.js");
-var import_Drawer = require("../../../overlays/drawer/Drawer.js");
-var import_split_sizing_utils = require("../../split-layout/split-sizing-utils.js");
-var import_SplitLayout = require("../../split-layout/SplitLayout.js");
-var import_width_utils = require("../../split-layout/width-utils.js");
-var import_PageLayoutPortalContext = require("../shared/PageLayoutPortalContext.js");
-var import_useTeleport = require("../shared/useTeleport.js");
-const SPLIT_HANDLE_WIDTH = 8;
-function DetailsLayoutInner({
-  details,
-  content,
-  containerRef,
-  contentTeleport,
-  panelTeleport
-}) {
-  const intl = (0, import_react_intl.useIntl)();
-  const layout = (0, import_useLayoutState.useLayoutState)({ details, containerRef });
-  const [intendedWidth, setIntendedWidth] = (0, import_react.useState)();
-  const containerWidth = layout.containerWidth;
-  const controlledWidth = details.config.width;
-  const clampForMode = (0, import_react.useCallback)(
-    (value) => {
-      switch (layout.mode) {
-        // Overlay floats over the content, so it reserves no content space; it is
-        // bounded by `maxWidth` (when set) and always by the container edge.
-        case "overlay":
-          return (0, import_split_sizing_utils.clampPanelWidth)(value, containerWidth, {
-            panelMin: details.config.minWidth,
-            panelMax: details.config.maxWidth ?? Infinity,
-            contentMin: 0,
-            handleWidth: details.config.resizable ? import_Overlay.OVERLAY_HANDLE_WIDTH : 0
-          });
-        case "split":
-          return (0, import_split_sizing_utils.clampPanelWidth)(value, containerWidth, {
-            panelMin: details.config.minWidth,
-            panelMax: details.config.maxWidth ?? Infinity,
-            contentMin: content.config.minWidth,
-            handleWidth: details.config.resizable ? SPLIT_HANDLE_WIDTH : 0
-          });
-        default:
-          return value;
-      }
-    },
-    [
-      layout.mode,
-      containerWidth,
-      details.config.minWidth,
-      details.config.maxWidth,
-      details.config.resizable,
-      content.config.minWidth
-    ]
-  );
-  const baseWidth = (() => {
-    if (containerWidth === 0) {
-      return void 0;
-    }
-    if (controlledWidth !== void 0) {
-      return (0, import_width_utils.convertToPx)(controlledWidth, containerWidth);
-    }
-    return intendedWidth ?? (0, import_width_utils.convertToPx)(details.config.defaultWidth, containerWidth);
-  })();
-  const panelWidth = baseWidth !== void 0 ? clampForMode(baseWidth) : void 0;
-  const commitWidth = (0, import_react.useCallback)(
-    (value) => {
-      if (controlledWidth === void 0) {
-        setIntendedWidth(value);
-      }
-      details.config.onResize?.(value);
-    },
-    [controlledWidth, details.config]
-  );
-  const detailsAriaLabel = intl.formatMessage({
-    defaultMessage: "Details",
-    id: "o3A99RFWS+N7bJe8",
-    description: "Accessible label for the details panel."
-  });
-  const contextValue = (0, import_react.useMemo)(
-    () => ({
-      collapsed: layout.collapsed,
-      setCollapsed: layout.setCollapsed,
-      preferredLayout: layout.preferredLayoutMode,
-      setPreferredLayout: layout.setPreferredLayoutMode,
-      mode: layout.mode
-    }),
-    [
-      layout.collapsed,
-      layout.setCollapsed,
-      layout.preferredLayoutMode,
-      layout.setPreferredLayoutMode,
-      layout.mode
-    ]
-  );
-  const pageLayoutPortalContext = (0, import_react.useContext)(import_PageLayoutPortalContext.PageLayoutPortalContext);
-  (0, import_useSafeLayoutEffect.useSafeLayoutEffect)(() => {
-    if (!pageLayoutPortalContext) {
-      return;
-    }
-    pageLayoutPortalContext.registry.register(
-      "detailsLayoutContext",
-      contextValue
-    );
-  }, [pageLayoutPortalContext, contextValue]);
-  const contentClassName = (0, import_clsx.clsx)(styles.content, content.domProps.className);
-  const contentNode = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("main", { ref: content.ref, ...content.domProps, className: contentClassName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(contentTeleport.Target, {}) });
-  const isSplit = layout.mode === "split";
-  const isOverlay = layout.mode === "overlay";
-  const isDrawer = layout.mode === "drawer";
-  const isMeasuringOverlay = isOverlay && layout.containerWidth === 0;
-  const panelClassName = isSplit ? (0, import_clsx.clsx)(styles.panel, details.domProps.className) : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_DetailsLayoutContext.DetailsLayoutContext.Provider, { value: contextValue, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(panelTeleport.Source, { children: details.children }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_SplitLayout.SplitLayout, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SplitLayout.SplitLayout.Content, { minWidth: content.config.minWidth, children: contentNode }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_SplitLayout.SplitLayout.Panel,
-        {
-          ...isSplit ? details.domProps : {},
-          ref: isSplit ? details.ref : void 0,
-          minWidth: isSplit ? details.config.minWidth : 0,
-          maxWidth: isSplit ? details.config.maxWidth : 0,
-          defaultWidth: details.config.defaultWidth,
-          width: isSplit ? panelWidth : 0,
-          onResize: commitWidth,
-          resizable: isSplit && details.config.resizable,
-          position: "end",
-          className: panelClassName,
-          "aria-label": isSplit ? detailsAriaLabel : void 0,
-          children: isSplit ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(panelTeleport.Target, {}) : null
-        }
-      )
-    ] }),
-    isMeasuringOverlay && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { hidden: true, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(panelTeleport.Target, {}) }),
-    isOverlay && !isMeasuringOverlay && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_Overlay.Overlay,
-      {
-        ...details.domProps,
-        ref: details.ref,
-        minWidth: (0, import_width_utils.convertToPx)(details.config.minWidth, layout.containerWidth),
-        maxWidth: Math.min(
-          details.config.maxWidth !== void 0 ? (0, import_width_utils.convertToPx)(details.config.maxWidth, layout.containerWidth) : Infinity,
-          details.config.resizable ? layout.containerWidth - import_Overlay.OVERLAY_HANDLE_WIDTH : layout.containerWidth
-        ),
-        width: panelWidth,
-        resizable: details.config.resizable,
-        onResizeEnd: commitWidth,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(panelTeleport.Target, {})
-      }
-    ),
-    isDrawer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_Drawer.Drawer,
-      {
-        ...details.domProps,
-        ref: details.ref,
-        className: (0, import_clsx.clsx)(styles.drawer, details.domProps.className),
-        "aria-label": detailsAriaLabel,
-        isDismissed: layout.collapsed,
-        onDismiss: (state) => layout.setCollapsed(state),
-        placement: "right",
-        width: "wide",
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.drawerContent, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(panelTeleport.Target, {}) })
-      }
-    )
-  ] });
-}
-const DetailsLayout = (0, import_react.memo)(
-  (0, import_react.forwardRef)((props, ref) => {
-    const { className: rootClassName, details, content, ...rootProps } = props;
-    const containerRef = (0, import_react.useRef)(null);
-    const rootRef = (0, import_useMergeRefs.useMergeRefs)([ref, containerRef]);
-    const contentTeleport = (0, import_useTeleport.useTeleport)();
-    const panelTeleport = (0, import_useTeleport.useTeleport)();
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(contentTeleport.Source, { children: content.children }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "div",
-        {
-          ...rootProps,
-          ref: rootRef,
-          className: (0, import_clsx.clsx)(styles.layoutRoot, rootClassName),
-          children: details ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            DetailsLayoutInner,
-            {
-              details,
-              content,
-              containerRef,
-              contentTeleport,
-              panelTeleport
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "main",
-            {
-              ref: content.ref,
-              ...content.domProps,
-              className: (0, import_clsx.clsx)(styles.content, content.domProps.className),
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(contentTeleport.Target, {})
-            }
-          )
-        }
-      )
-    ] });
-  })
-);
-DetailsLayout.displayName = "DetailsLayout (forwardRef)";

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

@@ -1,111 +0,0 @@
-._15qr1eq0-3-13-2 {
-  position: absolute;
-  z-index: 1;
-  right: 0;
-  top: 0;
-  box-sizing: border-box;
-  height: 100%;
-  max-width: 100%;
-  background-color: var(--dt-colors-background-base-default, #f9f9fa);
-  border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
-  border-bottom-left-radius: var(--dt-borders-radius-surface-default, 12px);
-  box-shadow: -1px 0px 0px 0px var(--dt-colors-border-neutral-default, #dadbe4), var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
-  display: flex;
-}
-._1jgl8s50-3-13-2 ._15qr1eq0-3-13-2 {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
-}
-._15qr1eq1-3-13-2 {
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  padding: var(--dt-spacings-size-16, 16px);
-  flex-grow: 1;
-}
-._15qr1eq2-3-13-2 {
-  height: 100%;
-  flex-shrink: 0;
-  position: relative;
-  width: var(--dt-spacings-size-8, 8px);
-  align-items: center;
-  display: flex;
-  justify-content: center;
-}
-._1jgl8s50-3-13-2 ._15qr1eq2-3-13-2 {
-  border-radius: 0;
-  height: 100%;
-  width: var(--dt-spacings-size-8, 8px);
-  left: calc(-1 * var(--dt-spacings-size-4, 4px));
-  transition: none;
-  background-color: transparent;
-}
-._1jgl8s50-3-13-2 ._15qr1eq2-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 ._15qr1eq2-3-13-2:hover::before {
-  background-color: var(--dt-colors-border-neutral-subdued-hover, #d0d1dc);
-}
-._1jgl8s50-3-13-2 ._15qr1eq2-3-13-2:active::before {
-  background-color: var(--dt-colors-border-neutral-subdued-active, #c6c7d5);
-}
-._15qr1eq3-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;
-}
-._15qr1eq3-3-13-2:focus-visible {
-  width: 100%;
-}
-._15qr1eq3-3-13-2:hover._15qr1eq3-3-13-2:focus-visible {
-  width: 2px;
-}
-._15qr1eq3-3-13-2:focus-visible, ._15qr1eq3-3-13-2:hover {
-  height: var(--dt-spacings-size-48, 48px);
-  background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
-}
-._15qr1eq3-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 ._15qr1eq3-3-13-2 {
-  width: 0;
-  cursor: ew-resize;
-}
-._1jgl8s50-3-13-2 ._15qr1eq2-3-13-2:has(._15qr1eq3-3-13-2:focus-visible)::before {
-  background-color: var(--dt-colors-border-neutral-accent, #595a7d);
-  width: var(--dt-borders-width-emphasized, 2px);
-}
-._1jgl8s50-3-13-2 ._15qr1eq0-3-13-2:has(._15qr1eq3-3-13-2:hover) {
-  box-shadow: -1px 0px 0px 0px var(--dt-colors-border-neutral-default, #dadbe4), var(--dt-box-shadows-surface-floating-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 6px 14px -2px #2d2e4e3d);
-}
-._1jgl8s50-3-13-2 ._15qr1eq0-3-13-2:has(._15qr1eq3-3-13-2:active) {
-  box-shadow: -1px 0px 0px 0px var(--dt-colors-border-neutral-default, #dadbe4), var(--dt-box-shadows-surface-floating-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
-}
-._1jgl8s50-3-13-2 ._15qr1eq0-3-13-2:has(._15qr1eq3-3-13-2:focus-visible) {
-  box-shadow: -1px 0px 0px 0px var(--dt-colors-border-neutral-default, #dadbe4), var(--dt-box-shadows-surface-floating-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
-}

package/layouts/page-layout/details-layout/Overlay.css.d.ts

@@ -1,5 +0,0 @@
-export declare const overlay: string;
-export declare const overlayContent: string;
-export declare const handleContainer: string;
-export declare const resizeHandle: string;
-//# sourceMappingURL=Overlay.css.d.ts.map

package/layouts/page-layout/details-layout/Overlay.d.ts

@@ -1,18 +0,0 @@
-import { type ComponentPropsWithoutRef, type PropsWithChildren } from 'react';
-export declare const OVERLAY_HANDLE_WIDTH = 8;
-/** @internal */
-export interface OverlayProps extends PropsWithChildren, ComponentPropsWithoutRef<'div'> {
-    resizable?: boolean;
-    onResize?: (width: number) => void;
-    onResizeEnd?: (width: number) => void;
-    minWidth?: number;
-    maxWidth?: number;
-    /**
-     * The controlled content width in px. The overlay renders this width except
-     * while the user is actively dragging the resize handle.
-     */
-    width?: number;
-}
-/** @internal */
-export declare const Overlay: import("react").MemoExoticComponent<(props: OverlayProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null>;
-//# sourceMappingURL=Overlay.d.ts.map

package/layouts/page-layout/details-layout/Overlay.js

@@ -1,127 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var Overlay_exports = {};
-__export(Overlay_exports, {
-  OVERLAY_HANDLE_WIDTH: () => OVERLAY_HANDLE_WIDTH,
-  Overlay: () => Overlay
-});
-module.exports = __toCommonJS(Overlay_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("@use-gesture/react");
-var import_clsx = require("clsx");
-var import_react2 = require("react");
-var styles = __toESM(require("./Overlay.sty.js"));
-var import_useFocusRing = require("../../../core/hooks/useFocusRing.js");
-var import_width_utils = require("../../split-layout/width-utils.js");
-const OVERLAY_HANDLE_WIDTH = 8;
-const Overlay = (0, import_react2.memo)(
-  (0, import_react2.forwardRef)((props, forwardedRef) => {
-    const {
-      children,
-      className,
-      style,
-      minWidth = 200,
-      maxWidth = Infinity,
-      width = 300,
-      resizable = true,
-      onResize,
-      onResizeEnd,
-      ...restProps
-    } = props;
-    const containerRef = (0, import_react2.useRef)(null);
-    const handleRef = (0, import_react2.useRef)(null);
-    const { focusProps, focusClassName } = (0, import_useFocusRing.useFocusRing)({
-      focusWithin: true,
-      ignoreModality: true
-    });
-    const dragStartWidth = (0, import_react2.useRef)(null);
-    const lastWidthRef = (0, import_react2.useRef)(null);
-    const clampContentWidth = (value) => (0, import_width_utils.clamp)(minWidth, value, maxWidth);
-    const [dragWidth, setDragWidth] = (0, import_react2.useState)(null);
-    const contentWidth = dragWidth ?? clampContentWidth(width);
-    const overlayWidth = resizable ? contentWidth + OVERLAY_HANDLE_WIDTH : contentWidth;
-    (0, import_react.useGesture)(
-      {
-        onDragStart: () => {
-          dragStartWidth.current = clampContentWidth(contentWidth);
-        },
-        onDragEnd: () => {
-          const finalWidth = lastWidthRef.current ?? clampContentWidth(contentWidth);
-          dragStartWidth.current = null;
-          lastWidthRef.current = null;
-          setDragWidth(null);
-          onResizeEnd?.(finalWidth);
-        },
-        onDrag: (state) => {
-          if (dragStartWidth.current === null) {
-            return;
-          }
-          const nextWidth = (0, import_width_utils.clamp)(
-            minWidth,
-            dragStartWidth.current + state.movement[0] * -1,
-            maxWidth
-          );
-          lastWidthRef.current = nextWidth;
-          setDragWidth(nextWidth);
-          onResize?.(nextWidth);
-        }
-      },
-      { target: handleRef }
-    );
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      "div",
-      {
-        role: "dialog",
-        className: styles.overlay,
-        style: { ...style, width: overlayWidth },
-        ref: containerRef,
-        children: [
-          resizable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.handleContainer, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "hr",
-            {
-              ...focusProps,
-              ref: handleRef,
-              className: (0, import_clsx.clsx)(styles.resizeHandle, focusClassName),
-              tabIndex: 0
-            }
-          ) }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "div",
-            {
-              ...restProps,
-              ref: forwardedRef,
-              className: (0, import_clsx.clsx)(styles.overlayContent, className),
-              children
-            }
-          )
-        ]
-      }
-    );
-  })
-);
-Overlay.displayName = "Overlay";

package/layouts/page-layout/details-layout/useLayoutState.d.ts

@@ -1,16 +0,0 @@
-import { type RefObject } from 'react';
-import type { RenderedLayout } from './DetailsLayoutContext.js';
-import type { ExtractedDetailsSlot } from './slots.js';
-/** @internal */
-export declare function useLayoutState({ details, containerRef, }: {
-    details: ExtractedDetailsSlot;
-    containerRef: RefObject<HTMLDivElement | null>;
-}): {
-    containerWidth: number;
-    collapsed: boolean;
-    setCollapsed: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-    preferredLayoutMode: "overlay" | "split";
-    setPreferredLayoutMode: import("react").Dispatch<import("react").SetStateAction<"overlay" | "split">>;
-    mode: RenderedLayout;
-};
-//# sourceMappingURL=useLayoutState.d.ts.map

package/layouts/page-layout/details-layout/useLayoutState.js

@@ -1,60 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var useLayoutState_exports = {};
-__export(useLayoutState_exports, {
-  useLayoutState: () => useLayoutState
-});
-module.exports = __toCommonJS(useLayoutState_exports);
-var import_useControllableState = require("../../../core/hooks/useControllableState.js");
-var import_useBreakpointCollapse = require("../shared/useBreakpointCollapse.js");
-function useLayoutState({
-  details,
-  containerRef
-}) {
-  const [preferredLayoutMode, setPreferredLayoutMode] = (0, import_useControllableState.useControllableState)({
-    value: details.config.layout,
-    defaultValue: details.config.defaultLayout,
-    onChange: details.config.onLayoutChange
-  });
-  const { containerWidth, collapsed, setCollapsed, isBelowBreakpoint } = (0, import_useBreakpointCollapse.useBreakpointCollapse)({
-    collapsed: {
-      value: details.config.collapsed,
-      defaultValue: details.config.defaultCollapsed ?? false,
-      onChange: details.config.onCollapsedChange
-    },
-    breakpoint: details.config.breakpoint,
-    containerRef,
-    onBreakpointTransition: details.config.onBreakpointTransition,
-    autoCollapse: false
-  });
-  let mode = preferredLayoutMode ?? "split";
-  if (collapsed) {
-    mode = "collapsed";
-  }
-  if (isBelowBreakpoint) {
-    mode = "drawer";
-  }
-  return {
-    containerWidth,
-    collapsed,
-    setCollapsed,
-    preferredLayoutMode,
-    setPreferredLayoutMode,
-    mode
-  };
-}

package/layouts/page-layout/shared/TeleportTarget.d.ts

@@ -1,16 +0,0 @@
-/**
- * Places a stable host node into the DOM at this component's mount point.
- * Uses `appendChild` in a `useLayoutEffect` so the host node is moved
- * (not cloned) when `TeleportTarget` remounts in a different position,
- * preserving the React subtree portaled into the host.
- *
- * `useTeleport().Target` uses this component internally. `TeleportTarget`
- * exists as the direct component form for call sites that manage their own
- * host node (e.g. `PageLayout`, which holds hosts in context).
- *
- * @internal
- */
-export declare function TeleportTarget({ host }: {
-    host: HTMLDivElement;
-}): import("react").JSX.Element;
-//# sourceMappingURL=TeleportTarget.d.ts.map

package/layouts/page-layout/shared/collapsible.d.ts

@@ -1,20 +0,0 @@
-/** @public */
-export interface CollapsiblePanel {
-    /** Controls whether the panel is collapsed */
-    collapsed?: boolean;
-    /** Default value for the collapsed state */
-    defaultCollapsed?: boolean;
-    /** Fired when the value of collapsed changes or should change */
-    onCollapsedChange?: (value: boolean) => void;
-    /** The `min-width` for the container at which the collapse should fire automatically */
-    breakpoint?: number;
-    /**
-     * Fired on the first measurement and whenever the container crosses
-     * `breakpoint`, with `true` when the container is narrower than `breakpoint`.
-     * A breakpoint crossing never overwrites a controlled `collapsed` and never
-     * fires `onCollapsedChange` for a controlled panel: react here and update
-     * `collapsed` yourself if you want to.
-     */
-    onBreakpointTransition?: (belowBreakpoint: boolean) => void;
-}
-//# sourceMappingURL=collapsible.d.ts.map

package/layouts/page-layout/shared/portal-slots.d.ts

@@ -1,47 +0,0 @@
-import { type PropsWithChildren } from 'react';
-import type { AriaLabelingProps } from '../../../core/types/a11y-props.js';
-import type { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.js';
-import type { DataTestId } from '../../../core/types/data-props.js';
-import type { MaskingProps } from '../../../core/types/masking-props.js';
-import type { StylingProps } from '../../../core/types/styling-props.js';
-import type { DetailsProps } from '../details-layout/slots.js';
-import type { SidebarProps } from '../sidebar-layout/slots.js';
-/**
- * PageLayout.Header - portals children into the header host node and
- * registers layout config via the slot registry in a layout effect.
- * @public
- */
-export interface HeaderProps extends PropsWithChildren, BehaviorTrackingProps, AriaLabelingProps, StylingProps, MaskingProps, DataTestId {
-}
-export declare const PageLayoutHeader: (props: HeaderProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
-/**
- * PageLayout.Sidebar - portals children into the sidebar host node and
- * registers sidebar config via the slot registry in a layout effect.
- * @internal
- */
-export declare const PageLayoutSidebar: (props: SidebarProps & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement | null;
-/**
- * PageLayout.Content - portals children into the content host node and
- * registers content config via the slot registry in a layout effect.
- * @internal
- */
-export declare const PageLayoutContent: (props: import("../../index.js").PageLayoutContentProps & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement | null;
-/**
- * PageLayout.Details - portals children into the details host node and
- * registers details config via the slot registry in a layout effect.
- *
- * Children are wrapped in `DetailsLayoutContext.Provider` using the value
- * bridged through the slot registry. Without this, `DetailsControlBar` would
- * fall back to the context's default value because the portal originates
- * outside the provider placed by `DetailsLayoutInner`.
- *
- * @internal
- */
-export declare const PageLayoutDetails: (props: DetailsProps & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement | null;
-export declare const PageLayoutDetailsWithControlBar: ((props: DetailsProps & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement | null) & {
-    ControlBar: {
-        (props: import("../details-layout/DetailsControlBar.js").DetailsControlBarProps): import("react").JSX.Element;
-        displayName: string;
-    };
-};
-//# sourceMappingURL=portal-slots.d.ts.map