@dynatrace/strato-components 3.13.2 → 3.14.0

package/layouts/page-layout/shared/slots/portal-slots.js

@@ -0,0 +1,221 @@
+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 portal_slots_exports = {};
+__export(portal_slots_exports, {
+  PageLayoutContent: () => PageLayoutContent,
+  PageLayoutDetails: () => PageLayoutDetails,
+  PageLayoutDetailsWithControlBar: () => PageLayoutDetailsWithControlBar,
+  PageLayoutHeader: () => PageLayoutHeader,
+  PageLayoutSidebar: () => PageLayoutSidebar
+});
+module.exports = __toCommonJS(portal_slots_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react_dom = require("react-dom");
+var import_PageLayoutPortalContext = require("./PageLayoutPortalContext.js");
+var import_slot_defaults = require("./slot-defaults.js");
+var import_useRegisteredSlot = require("./useRegisteredSlot.js");
+var import_useCallbackRef = require("../../../../core/hooks/useCallbackRef.js");
+var import_DetailsControlBar = require("../../details-region/DetailsControlBar.js");
+var import_DetailsRegionContext = require("../../details-region/DetailsRegionContext.js");
+var import_useMountValue = require("../panel-state/useMountValue.js");
+var import_usePanelState = require("../panel-state/usePanelState.js");
+const toRef = (ref) => ref ?? void 0;
+function isPlainObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function valuesEqual(a, b) {
+  if (Object.is(a, b)) {
+    return true;
+  }
+  if (!isPlainObject(a) || !isPlainObject(b)) {
+    return false;
+  }
+  const aKeys = Object.keys(a);
+  if (aKeys.length !== Object.keys(b).length) {
+    return false;
+  }
+  return aKeys.every((key) => Object.is(a[key], b[key]));
+}
+function useShallowStable(value) {
+  const ref = (0, import_react.useRef)(value);
+  const prev = ref.current;
+  const prevKeys = Object.keys(prev);
+  const nextKeys = Object.keys(value);
+  let equal = prevKeys.length === nextKeys.length;
+  if (equal) {
+    for (const key of nextKeys) {
+      if (!valuesEqual(Reflect.get(prev, key), Reflect.get(value, key))) {
+        equal = false;
+        break;
+      }
+    }
+  }
+  if (!equal) {
+    ref.current = value;
+  }
+  return ref.current;
+}
+function useSlotEntry(config, domProps, ref, state) {
+  const stableConfig = useShallowStable(config);
+  const stableDomProps = useShallowStable(domProps);
+  const refValue = toRef(ref);
+  return (0, import_react.useMemo)(
+    () => ({
+      config: stableConfig,
+      domProps: stableDomProps,
+      ref: refValue,
+      state
+    }),
+    [stableConfig, stableDomProps, refValue, state]
+  );
+}
+const PageLayoutHeader = (0, import_react.forwardRef)(
+  function PageLayoutHeader2({ children, ...domProps }, ref) {
+    const { hosts } = (0, import_PageLayoutPortalContext.usePageLayoutPortalContext)();
+    const entry = useSlotEntry(
+      {},
+      domProps,
+      ref,
+      void 0
+    );
+    (0, import_useRegisteredSlot.useRegisteredSlot)("header", entry);
+    return (0, import_react_dom.createPortal)(children, hosts.header);
+  }
+);
+const PageLayoutSidebar = (0, import_react.forwardRef)(
+  function PageLayoutSidebar2({
+    children,
+    defaultWidth = import_slot_defaults.sidebarDefaults.defaultWidth,
+    minWidth = import_slot_defaults.sidebarDefaults.minWidth,
+    maxWidth = import_slot_defaults.sidebarDefaults.maxWidth,
+    resizable = import_slot_defaults.sidebarDefaults.resizable,
+    collapsed,
+    defaultCollapsed = import_slot_defaults.sidebarDefaults.defaultCollapsed,
+    onCollapsedChange,
+    onBreakpointTransition,
+    breakpoint = import_slot_defaults.sidebarDefaults.breakpoint,
+    onResize,
+    label,
+    // `position` is fixed by the layout and the sidebar's `width` is driven
+    // by its own drag state, so neither may reach the rendered element.
+    position: _position,
+    width: _width,
+    ...domProps
+  }, ref) {
+    const { containers, hosts } = (0, import_PageLayoutPortalContext.usePageLayoutPortalContext)();
+    const emitCollapsedChange = (0, import_useCallbackRef.useCallbackRef)(onCollapsedChange);
+    const emitBreakpointTransition = (0, import_useCallbackRef.useCallbackRef)(onBreakpointTransition);
+    const emitResize = (0, import_useCallbackRef.useCallbackRef)(onResize);
+    const mountDefaultWidth = (0, import_useMountValue.useMountValue)(defaultWidth);
+    const config = {
+      defaultWidth: mountDefaultWidth,
+      minWidth,
+      maxWidth,
+      resizable,
+      collapsed,
+      defaultCollapsed,
+      onCollapsedChange: emitCollapsedChange,
+      onBreakpointTransition: emitBreakpointTransition,
+      breakpoint,
+      onResize: emitResize,
+      label
+    };
+    const state = (0, import_usePanelState.useSidebarPanelState)({
+      sidebar: { config },
+      containerRef: containers.sidebar
+    });
+    const entry = useSlotEntry(config, domProps, ref, state);
+    (0, import_useRegisteredSlot.useRegisteredSlot)("sidebar", entry);
+    return (0, import_react_dom.createPortal)(children, hosts.sidebar);
+  }
+);
+const PageLayoutContent = (0, import_react.forwardRef)(
+  function PageLayoutContent2({
+    children,
+    minWidth = import_slot_defaults.contentDefaults.minWidth,
+    ...domProps
+  }, ref) {
+    const { hosts } = (0, import_PageLayoutPortalContext.usePageLayoutPortalContext)();
+    const entry = useSlotEntry({ minWidth }, domProps, ref, void 0);
+    (0, import_useRegisteredSlot.useRegisteredSlot)("content", entry);
+    return (0, import_react_dom.createPortal)(children, hosts.content);
+  }
+);
+const PageLayoutDetails = (0, import_react.forwardRef)(
+  function PageLayoutDetails2({
+    children,
+    minWidth = import_slot_defaults.detailsDefaults.minWidth,
+    maxWidth,
+    defaultWidth = import_slot_defaults.detailsDefaults.defaultWidth,
+    resizable = import_slot_defaults.detailsDefaults.resizable,
+    collapsed,
+    defaultCollapsed = import_slot_defaults.detailsDefaults.defaultCollapsed,
+    onCollapsedChange,
+    onBreakpointTransition,
+    layout,
+    defaultLayout = import_slot_defaults.detailsDefaults.defaultLayout,
+    onLayoutChange,
+    breakpoint = import_slot_defaults.detailsDefaults.breakpoint,
+    onResize,
+    width,
+    label,
+    // `position` is fixed by the layout, so it may not reach the rendered
+    // element.
+    position: _position,
+    ...domProps
+  }, ref) {
+    const { containers, hosts } = (0, import_PageLayoutPortalContext.usePageLayoutPortalContext)();
+    const emitCollapsedChange = (0, import_useCallbackRef.useCallbackRef)(onCollapsedChange);
+    const emitBreakpointTransition = (0, import_useCallbackRef.useCallbackRef)(onBreakpointTransition);
+    const emitLayoutChange = (0, import_useCallbackRef.useCallbackRef)(onLayoutChange);
+    const emitResize = (0, import_useCallbackRef.useCallbackRef)(onResize);
+    const mountDefaultWidth = (0, import_useMountValue.useMountValue)(defaultWidth);
+    const config = {
+      minWidth,
+      maxWidth,
+      defaultWidth: mountDefaultWidth,
+      resizable,
+      collapsed,
+      defaultCollapsed,
+      onCollapsedChange: emitCollapsedChange,
+      onBreakpointTransition: emitBreakpointTransition,
+      layout,
+      defaultLayout,
+      onLayoutChange: emitLayoutChange,
+      breakpoint,
+      onResize: emitResize,
+      width,
+      label
+    };
+    const state = (0, import_usePanelState.useDetailsPanelState)({
+      details: { config },
+      containerRef: containers.details
+    });
+    const entry = useSlotEntry(config, domProps, ref, state);
+    (0, import_useRegisteredSlot.useRegisteredSlot)("details", entry);
+    return (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DetailsRegionContext.DetailsRegionContext.Provider, { value: state, children }),
+      hosts.details
+    );
+  }
+);
+const PageLayoutDetailsWithControlBar = Object.assign(
+  PageLayoutDetails,
+  { ControlBar: import_DetailsControlBar.DetailsControlBar }
+);

package/layouts/page-layout/shared/slots/slot-config.d.ts

@@ -0,0 +1,40 @@
+import type { ComponentPropsWithoutRef, Ref } from 'react';
+import type { ExtractedContentSlot } from '../../../split-layout/slots.js';
+import type { ExtractedDetailsSlot } from '../../details-region/slots.js';
+import type { ExtractedSidebarSlot } from '../../sidebar-region/slots.js';
+import type { DetailsPanelState, SidebarPanelState } from '../panel-state/usePanelState.js';
+/**
+ * Value a slot component writes to the registry: the slot's own configuration,
+ * the DOM props and ref the layout applies to the element it renders for that
+ * slot, and the panel state the slot owns. `children` are delivered through
+ * the portal host node instead.
+ *
+ * Config and state travel together in one entry so a reader can never observe
+ * one without the other. Slots that own no panel state carry `undefined`.
+ *
+ * @internal
+ */
+export interface SlotEntry<C, E extends HTMLElement, S = undefined> {
+    config: C;
+    domProps: ComponentPropsWithoutRef<'div'>;
+    ref?: Ref<E>;
+    state: S;
+}
+/**
+ * The header takes no configuration of its own yet. It still registers a
+ * config so all four slots share one entry shape, which is what lets every
+ * slot build its entry through the same `useSlotEntry` hook and lets a future
+ * header prop be a one-line addition instead of a shape change.
+ *
+ * @internal
+ */
+export type HeaderConfig = Record<string, never>;
+/** @internal */
+export type HeaderSlotEntry = SlotEntry<HeaderConfig, HTMLDivElement>;
+/** @internal */
+export type SidebarSlotEntry = SlotEntry<ExtractedSidebarSlot['config'], HTMLElement, SidebarPanelState>;
+/** @internal */
+export type ContentSlotEntry = SlotEntry<ExtractedContentSlot['config'], HTMLElement>;
+/** @internal */
+export type DetailsSlotEntry = SlotEntry<ExtractedDetailsSlot['config'], HTMLElement, DetailsPanelState>;
+//# sourceMappingURL=slot-config.d.ts.map

package/layouts/page-layout/shared/slots/slot-defaults.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Defaults each slot component applies to its own props. Checked against the
+ * props they default, so a default can never drift from the type of the prop
+ * it seeds.
+ */
+export declare const sidebarDefaults: {
+    defaultWidth: "15%";
+    minWidth: number;
+    maxWidth: "50%";
+    resizable: true;
+    defaultCollapsed: false;
+    breakpoint: number;
+};
+export declare const contentDefaults: {
+    minWidth: "50%";
+};
+export declare const detailsDefaults: {
+    minWidth: number;
+    defaultWidth: "25%";
+    resizable: true;
+    defaultCollapsed: false;
+    defaultLayout: "split";
+    breakpoint: number;
+};
+//# sourceMappingURL=slot-defaults.d.ts.map

package/layouts/page-layout/shared/slots/slot-registry.d.ts

@@ -0,0 +1,25 @@
+import type { ContentSlotEntry, DetailsSlotEntry, HeaderSlotEntry, SidebarSlotEntry } from './slot-config.js';
+/** @internal */
+export interface SlotRegistryState {
+    header: HeaderSlotEntry | null;
+    sidebar: SidebarSlotEntry | null;
+    content: ContentSlotEntry | null;
+    details: DetailsSlotEntry | null;
+}
+/**
+ * Identity of the element that currently holds a slot. Compared by reference,
+ * so each slot component must hold one value for its whole lifetime.
+ *
+ * @internal
+ */
+export type SlotOwner = object;
+/** @internal */
+export interface SlotRegistry {
+    subscribe: (listener: () => void) => () => void;
+    getSnapshot: () => SlotRegistryState;
+    register: <K extends keyof SlotRegistryState>(slot: K, entry: NonNullable<SlotRegistryState[K]>, owner: SlotOwner) => void;
+    unregister: (slot: keyof SlotRegistryState, owner: SlotOwner) => void;
+}
+/** @internal */
+export declare function createSlotRegistry(): SlotRegistry;
+//# sourceMappingURL=slot-registry.d.ts.map

package/layouts/page-layout/shared/{slot-registry.js → slots/slot-registry.js}

@@ -20,17 +20,17 @@ __export(slot_registry_exports, {
   createSlotRegistry: () => createSlotRegistry
 });
 module.exports = __toCommonJS(slot_registry_exports);
-const INITIAL_STATE = {
+const INITIAL_STATE = Object.freeze({
   header: null,
   sidebar: null,
   content: null,
-  details: null,
-  detailsLayoutContext: null
-};
+  details: null
+});
 function createSlotRegistry() {
   let state = INITIAL_STATE;
   let frozenSnapshot = INITIAL_STATE;
   const listeners = /* @__PURE__ */ new Set();
+  const owners = /* @__PURE__ */ new Map();
   function notify() {
     frozenSnapshot = Object.freeze({ ...state });
     for (const listener of listeners) {
@@ -42,14 +42,25 @@ function createSlotRegistry() {
     return () => listeners.delete(listener);
   };
   const getSnapshot = () => frozenSnapshot;
-  const register = (slot, config) => {
-    if (state[slot] === config) {
+  const register = (slot, entry, owner) => {
+    const currentOwner = owners.get(slot);
+    if (currentOwner !== void 0 && currentOwner !== owner) {
+      console.error(
+        `[PageLayout] The "${slot}" slot is already registered by another element; the latest registration wins while both sets of children stay in the DOM. This usually indicates two PageLayout slot elements of the same kind rendered at once.`
+      );
+    }
+    owners.set(slot, owner);
+    if (state[slot] === entry) {
       return;
     }
-    state = { ...state, [slot]: config };
+    state = { ...state, [slot]: entry };
     notify();
   };
-  const unregister = (slot) => {
+  const unregister = (slot, owner) => {
+    if (owners.get(slot) !== owner) {
+      return;
+    }
+    owners.delete(slot);
     state = { ...state, [slot]: null };
     notify();
   };

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

@@ -0,0 +1,21 @@
+import type { SlotRegistryState } from './slot-registry.js';
+/**
+ * Registers `entry` for `slotName` in the slot registry on mount and
+ * unregisters on unmount. Re-registers when `entry` identity changes.
+ *
+ * Uses a layout effect so the registration is observable before the next
+ * paint: the layout shells (`MainShell`, `HeaderShell`) need to see the
+ * registered entry in the same commit as the slot component mounts to avoid
+ * a frame of unstyled content.
+ *
+ * Callers must keep `entry` referentially stable, which is what `useSlotEntry`
+ * is for, so the effect only re-runs when something meaningful changes.
+ *
+ * Each caller registers under an owner identity that lives as long as the
+ * component instance, so a cleanup that runs after a replacement has already
+ * claimed the slot cannot clear the live registration.
+ *
+ * @internal
+ */
+export declare function useRegisteredSlot<K extends keyof SlotRegistryState>(slotName: K, entry: NonNullable<SlotRegistryState[K]>): void;
+//# sourceMappingURL=useRegisteredSlot.d.ts.map

package/layouts/page-layout/shared/{useRegisteredSlot.js → slots/useRegisteredSlot.js}

@@ -20,12 +20,15 @@ __export(useRegisteredSlot_exports, {
   useRegisteredSlot: () => useRegisteredSlot
 });
 module.exports = __toCommonJS(useRegisteredSlot_exports);
+var import_react = require("react");
 var import_PageLayoutPortalContext = require("./PageLayoutPortalContext.js");
-var import_useSafeLayoutEffect = require("../../../core/hooks/useSafeLayoutEffect.js");
-function useRegisteredSlot(slotName, config) {
+var import_useSafeLayoutEffect = require("../../../../core/hooks/useSafeLayoutEffect.js");
+function useRegisteredSlot(slotName, entry) {
   const { registry } = (0, import_PageLayoutPortalContext.usePageLayoutPortalContext)();
+  const ownerRef = (0, import_react.useRef)({});
   (0, import_useSafeLayoutEffect.useSafeLayoutEffect)(() => {
-    registry.register(slotName, config);
-    return () => registry.unregister(slotName);
-  }, [registry, slotName, config]);
+    const owner = ownerRef.current;
+    registry.register(slotName, entry, owner);
+    return () => registry.unregister(slotName, owner);
+  }, [registry, slotName, entry]);
 }

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

@@ -0,0 +1,28 @@
+/**
+ * Creates a stable `<div style="display:contents">` DOM element on first
+ * render and returns the same element on every subsequent render.
+ *
+ * The element is created lazily on first access via `useRef`, not via
+ * `useMemo`, so StrictMode / cache-eviction cannot cause it to be recreated
+ * and break referential stability for callers that capture it
+ * (e.g. `createPortal`).
+ *
+ * @internal
+ */
+export declare function useStableHost(): HTMLDivElement;
+/**
+ * Places a host node from `useStableHost` 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.
+ *
+ * Together with `createPortal(children, host)` this lets a subtree survive the
+ * layout switching between split / overlay / collapsed / drawer modes: React
+ * never unmounts it, because only the DOM node moves.
+ *
+ * @internal
+ */
+export declare function TeleportTarget({ host }: {
+    host: HTMLDivElement;
+}): import("react").JSX.Element;
+//# sourceMappingURL=teleport.d.ts.map

package/layouts/page-layout/shared/{TeleportTarget.js → teleport/teleport.js}

@@ -15,13 +15,23 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var TeleportTarget_exports = {};
-__export(TeleportTarget_exports, {
-  TeleportTarget: () => TeleportTarget
+var teleport_exports = {};
+__export(teleport_exports, {
+  TeleportTarget: () => TeleportTarget,
+  useStableHost: () => useStableHost
 });
-module.exports = __toCommonJS(TeleportTarget_exports);
+module.exports = __toCommonJS(teleport_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
+function useStableHost() {
+  const hostRef = (0, import_react.useRef)(null);
+  if (hostRef.current === null) {
+    const el = document.createElement("div");
+    el.style.display = "contents";
+    hostRef.current = el;
+  }
+  return hostRef.current;
+}
 function TeleportTarget({ host }) {
   const containerRef = (0, import_react.useRef)(null);
   (0, import_react.useLayoutEffect)(() => {

package/layouts/page-layout/{sidebar-layout/CollapsedSidebarRail.d.ts → sidebar-region/SidebarHint.d.ts}

@@ -1,5 +1,5 @@
 import { type Ref } from 'react';
-interface SidebarHint {
+interface SidebarHintProps {
     panelId: string;
     expandSidebarLabel: string;
     expandButtonRef: Ref<HTMLButtonElement>;
@@ -24,6 +24,6 @@ interface SidebarHint {
  *
  * @internal
  */
-export declare function SidebarHint({ panelId, expandSidebarLabel, expandButtonRef, onCollapsedChange, isCollapsed, }: SidebarHint): import("react").JSX.Element;
+export declare function SidebarHint({ panelId, expandSidebarLabel, expandButtonRef, onCollapsedChange, isCollapsed, }: SidebarHintProps): import("react").JSX.Element;
 export {};
-//# sourceMappingURL=CollapsedSidebarRail.d.ts.map
+//# sourceMappingURL=SidebarHint.d.ts.map

package/layouts/page-layout/{sidebar-layout/CollapsedSidebarRail.js → sidebar-region/SidebarHint.js}

@@ -25,14 +25,14 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var CollapsedSidebarRail_exports = {};
-__export(CollapsedSidebarRail_exports, {
+var SidebarHint_exports = {};
+__export(SidebarHint_exports, {
   SidebarHint: () => SidebarHint
 });
-module.exports = __toCommonJS(CollapsedSidebarRail_exports);
+module.exports = __toCommonJS(SidebarHint_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_strato_icons = require("@dynatrace/strato-icons");
-var styles = __toESM(require("./SidebarLayout.sty.js"));
+var styles = __toESM(require("./SidebarRegion.sty.js"));
 var import_Button = require("../../../buttons/button/Button.js");
 var import_Tooltip = require("../../../overlays/tooltip/Tooltip.js");
 function SidebarHint({
@@ -53,8 +53,7 @@ function SidebarHint({
         type: "button",
         onClick: expand,
         tabIndex: -1,
-        "aria-hidden": "true",
-        "aria-label": expandSidebarLabel
+        "aria-hidden": "true"
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.expandButtonContainer, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.Tooltip, { text: expandSidebarLabel, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(