@dynatrace/strato-components 3.1.1 → 3.2.0

package/esm/layouts/page/Panel.js

@@ -190,7 +190,8 @@ const ResizeHandle = forwardRef(
           },
           { label: panelName }
         ),
-        tabIndex: 0
+        tabIndex: 0,
+        "data-dt-name": `${panelName.replace(/\s/g, "")}ResizePanelHandle`
       }
     );
   }

package/esm/layouts/page/Panel.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/Panel.tsx"],
-  "sourcesContent": ["import { useGesture } from '@use-gesture/react';\nimport clsx from 'clsx';\nimport { forwardRef, useCallback, useEffect, useRef } from 'react';\nimport { useMemo, type HTMLAttributes } from 'react';\nimport { useIntl } from 'react-intl';\n\n\nimport { KeepMountedProvider } from './keepMounted.js';\nimport type { PanelName } from './page-types.js';\nimport { panelContext } from './panel-context.js';\nimport type { PanelSize } from './panel-types.js';\nimport * as styles from './panel.sty.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\n\ninterface PanelRootProps\n  extends WithChildren,\n    StylingProps,\n    HTMLAttributes<HTMLDivElement> {\n  name: PanelName;\n}\n\nconst PanelRoot = (props: PanelRootProps) => {\n  const { className, id, style, children, name }: PanelRootProps = props;\n\n  const ctx = useMemo(() => ({ name }), [name]);\n\n  return (\n    <panelContext.Provider value={ctx}>\n      <KeepMountedProvider>\n        <aside\n          {...props}\n          id={id}\n          className={clsx(styles.root, className)}\n          style={style}\n        >\n          {children}\n        </aside>\n      </KeepMountedProvider>\n    </panelContext.Provider>\n  );\n};\n\ninterface PanelContentProps extends WithChildren, StylingProps {\n  isDismissed?: boolean; // To retain the size when dismissing and expanding the panel, we need to handle the dismissed display mode inside\n  /** @defaultValue `right` */\n  handle?: 'left' | 'right' | 'hidden';\n  /** Descriptive label for the panel. */\n  label: string;\n  /**\n   * The minimum width of the sidebar in pixels.\n   * @defaultValue 200\n   */\n  minWidth?: number;\n  /**\n   * The desired width of the sidebar.\n   * Depending on the available screen width and other panel configurations,\n   * the size of the panel might not match the `preferredWidth` exactly.\n   * @defaultValue 15%\n   */\n  preferredWidth?: PanelSize;\n  /** Callback triggered after resizing is finished. */\n  onResize?: (width: number) => void;\n  /** Available size of the containing element. Used to calculate size with relative units. */\n  containerSize: number;\n}\n\nconst PanelContent = forwardRef<HTMLDivElement, PanelContentProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      className,\n      handle = 'right',\n      isDismissed,\n      label,\n      minWidth,\n      onResize,\n      preferredWidth,\n      style,\n      containerSize,\n      ...restProps\n    }: PanelContentProps = props;\n\n    const panelRef = useRef<HTMLDivElement>(null);\n    const panelRefs = useMergeRefs([panelRef, forwardedRef]);\n\n    const handleRef = useRef<HTMLHRElement>(null);\n\n    const draggedSize = useRef<number>();\n    const wasResized = useRef(false);\n\n    const setPanelSize = useCallback(\n      (size: number) => {\n        if (!panelRef.current) {\n          return;\n        }\n\n        let sizeToApply = Math.floor(size * 1000) / 1000;\n        draggedSize.current = sizeToApply;\n\n        // users can resize out of bounds and create negative size values. we dont want to apply those as css\n        if (size < 0) {\n          return;\n        }\n\n        if (minWidth && sizeToApply < minWidth) {\n          sizeToApply = minWidth;\n        }\n\n        panelRef.current.style.setProperty('width', `${sizeToApply}px`);\n      },\n      [minWidth],\n    );\n\n    const ensurePanelSizeMatchesComputedWidth = useCallback(\n      (element: HTMLElement, size: number) => {\n        const actualWidth = parseFloat(getComputedStyle(element).width);\n        if (size !== actualWidth) {\n          setPanelSize(actualWidth);\n        }\n        return actualWidth;\n      },\n      [setPanelSize],\n    );\n\n    const handleDrag = useCallback(\n      (deltaX: number) => {\n        if (!draggedSize.current) {\n          return;\n        }\n        setPanelSize(\n          draggedSize.current + deltaX * (handle === 'right' ? 1 : -1),\n        );\n        wasResized.current = true;\n      },\n      [handle, setPanelSize],\n    );\n\n    const handleDragEnd = useCallback(() => {\n      if (!panelRef.current || !draggedSize.current) {\n        return;\n      }\n      const size = ensurePanelSizeMatchesComputedWidth(\n        panelRef.current,\n        draggedSize.current,\n      );\n      onResize?.(size);\n    }, [ensurePanelSizeMatchesComputedWidth, onResize]);\n\n    const handleDragStart = useCallback(() => {\n      if (!panelRef.current || !draggedSize.current) {\n        return;\n      }\n      ensurePanelSizeMatchesComputedWidth(\n        panelRef.current,\n        draggedSize.current,\n      );\n    }, [ensurePanelSizeMatchesComputedWidth]);\n\n    useGesture(\n      {\n        onDragStart: handleDragStart,\n        onDragEnd: handleDragEnd,\n        onDrag: ({ delta: [deltaX] }) => handleDrag(deltaX),\n      },\n      {\n        target: handleRef,\n        eventOptions: { passive: false },\n        drag: { filterTaps: true },\n      },\n    );\n\n    useEffect(\n      function initializePanelSize() {\n        if (!panelRef.current || wasResized.current || isDismissed) {\n          return;\n        }\n\n        if (typeof preferredWidth === 'number') {\n          setPanelSize(preferredWidth);\n          return;\n        }\n\n        // percentage based values on grid children use the available space of the area, not the full grid container\n        if (preferredWidth?.includes('%')) {\n          const size = containerSize * (parseFloat(preferredWidth) / 100);\n          setPanelSize(size);\n          return;\n        }\n\n        if (preferredWidth?.includes('px')) {\n          const size = parseFloat(preferredWidth);\n          setPanelSize(size);\n          return;\n        }\n\n        // for all other units we let the browser compute the size\n        if (typeof preferredWidth === 'string') {\n          panelRef.current.style.setProperty('width', preferredWidth);\n          const size = parseFloat(getComputedStyle(panelRef.current).width);\n          setPanelSize(size);\n          return;\n        }\n\n        const size = parseFloat(getComputedStyle(panelRef.current).width);\n        setPanelSize(size);\n      },\n      [containerSize, preferredWidth, setPanelSize, isDismissed],\n    );\n\n    if (isDismissed) {\n      return null;\n    }\n\n    return (\n      <>\n        <div\n          {...restProps}\n          ref={panelRefs}\n          className={clsx(styles.panelContent, className)}\n          style={{ ...style, minWidth, width: draggedSize.current }}\n        >\n          {children}\n        </div>\n\n        <div className={styles.resizeHandleContainer}>\n          {handle !== 'hidden' ? (\n            <ResizeHandle\n              panelName={label}\n              panelSize={draggedSize.current}\n              ref={handleRef}\n            />\n          ) : null}\n        </div>\n      </>\n    );\n  },\n);\n\ninterface ResizeHandleProps {\n  panelName: string;\n  panelSize?: number;\n}\n\nconst ResizeHandle = forwardRef<HTMLHRElement, ResizeHandleProps>(\n  (props, ref) => {\n    const { panelName, panelSize = 0 } = props;\n\n    const intl = useIntl();\n    const { focusProps, focusClassName } = useFocusRing({ focusWithin: true });\n\n    return (\n      <hr\n        {...focusProps}\n        ref={ref}\n        className={clsx(styles.resizeHandle, focusClassName)}\n        aria-valuenow={panelSize}\n        aria-valuetext={`${Math.round(panelSize)}px`}\n        aria-orientation=\"vertical\"\n        aria-label={intl.formatMessage(\n          {\n            defaultMessage: 'Resize {label} panel',\n            id: 'Ym3RUHtaLVFsGlaM',\n            description:\n              'Label for the resize handle of the panel to resize it with drag and drop or keyboard.',\n          },\n          { label: panelName },\n        )}\n        tabIndex={0}\n      />\n    );\n  },\n);\n\nexport const Panel = Object.assign(PanelRoot, {\n  Content: PanelContent,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useGesture } from '@use-gesture/react';\nimport clsx from 'clsx';\nimport { forwardRef, useCallback, useEffect, useRef } from 'react';\nimport { useMemo, type HTMLAttributes } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { KeepMountedProvider } from './keepMounted.js';\nimport type { PanelName } from './page-types.js';\nimport { panelContext } from './panel-context.js';\nimport type { PanelSize } from './panel-types.js';\nimport * as styles from './panel.sty.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\n\ninterface PanelRootProps\n  extends WithChildren,\n    StylingProps,\n    HTMLAttributes<HTMLDivElement> {\n  name: PanelName;\n}\n\nconst PanelRoot = (props: PanelRootProps) => {\n  const { className, id, style, children, name }: PanelRootProps = props;\n\n  const ctx = useMemo(() => ({ name }), [name]);\n\n  return (\n    <panelContext.Provider value={ctx}>\n      <KeepMountedProvider>\n        <aside\n          {...props}\n          id={id}\n          className={clsx(styles.root, className)}\n          style={style}\n        >\n          {children}\n        </aside>\n      </KeepMountedProvider>\n    </panelContext.Provider>\n  );\n};\n\ninterface PanelContentProps extends WithChildren, StylingProps {\n  isDismissed?: boolean; // To retain the size when dismissing and expanding the panel, we need to handle the dismissed display mode inside\n  /** @defaultValue `right` */\n  handle?: 'left' | 'right' | 'hidden';\n  /** Descriptive label for the panel. */\n  label: string;\n  /**\n   * The minimum width of the sidebar in pixels.\n   * @defaultValue 200\n   */\n  minWidth?: number;\n  /**\n   * The desired width of the sidebar.\n   * Depending on the available screen width and other panel configurations,\n   * the size of the panel might not match the `preferredWidth` exactly.\n   * @defaultValue 15%\n   */\n  preferredWidth?: PanelSize;\n  /** Callback triggered after resizing is finished. */\n  onResize?: (width: number) => void;\n  /** Available size of the containing element. Used to calculate size with relative units. */\n  containerSize: number;\n}\n\nconst PanelContent = forwardRef<HTMLDivElement, PanelContentProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      className,\n      handle = 'right',\n      isDismissed,\n      label,\n      minWidth,\n      onResize,\n      preferredWidth,\n      style,\n      containerSize,\n      ...restProps\n    }: PanelContentProps = props;\n\n    const panelRef = useRef<HTMLDivElement>(null);\n    const panelRefs = useMergeRefs([panelRef, forwardedRef]);\n\n    const handleRef = useRef<HTMLHRElement>(null);\n\n    const draggedSize = useRef<number>();\n    const wasResized = useRef(false);\n\n    const setPanelSize = useCallback(\n      (size: number) => {\n        if (!panelRef.current) {\n          return;\n        }\n\n        let sizeToApply = Math.floor(size * 1000) / 1000;\n        draggedSize.current = sizeToApply;\n\n        // users can resize out of bounds and create negative size values. we dont want to apply those as css\n        if (size < 0) {\n          return;\n        }\n\n        if (minWidth && sizeToApply < minWidth) {\n          sizeToApply = minWidth;\n        }\n\n        panelRef.current.style.setProperty('width', `${sizeToApply}px`);\n      },\n      [minWidth],\n    );\n\n    const ensurePanelSizeMatchesComputedWidth = useCallback(\n      (element: HTMLElement, size: number) => {\n        const actualWidth = parseFloat(getComputedStyle(element).width);\n        if (size !== actualWidth) {\n          setPanelSize(actualWidth);\n        }\n        return actualWidth;\n      },\n      [setPanelSize],\n    );\n\n    const handleDrag = useCallback(\n      (deltaX: number) => {\n        if (!draggedSize.current) {\n          return;\n        }\n        setPanelSize(\n          draggedSize.current + deltaX * (handle === 'right' ? 1 : -1),\n        );\n        wasResized.current = true;\n      },\n      [handle, setPanelSize],\n    );\n\n    const handleDragEnd = useCallback(() => {\n      if (!panelRef.current || !draggedSize.current) {\n        return;\n      }\n      const size = ensurePanelSizeMatchesComputedWidth(\n        panelRef.current,\n        draggedSize.current,\n      );\n      onResize?.(size);\n    }, [ensurePanelSizeMatchesComputedWidth, onResize]);\n\n    const handleDragStart = useCallback(() => {\n      if (!panelRef.current || !draggedSize.current) {\n        return;\n      }\n      ensurePanelSizeMatchesComputedWidth(\n        panelRef.current,\n        draggedSize.current,\n      );\n    }, [ensurePanelSizeMatchesComputedWidth]);\n\n    useGesture(\n      {\n        onDragStart: handleDragStart,\n        onDragEnd: handleDragEnd,\n        onDrag: ({ delta: [deltaX] }) => handleDrag(deltaX),\n      },\n      {\n        target: handleRef,\n        eventOptions: { passive: false },\n        drag: { filterTaps: true },\n      },\n    );\n\n    useEffect(\n      function initializePanelSize() {\n        if (!panelRef.current || wasResized.current || isDismissed) {\n          return;\n        }\n\n        if (typeof preferredWidth === 'number') {\n          setPanelSize(preferredWidth);\n          return;\n        }\n\n        // percentage based values on grid children use the available space of the area, not the full grid container\n        if (preferredWidth?.includes('%')) {\n          const size = containerSize * (parseFloat(preferredWidth) / 100);\n          setPanelSize(size);\n          return;\n        }\n\n        if (preferredWidth?.includes('px')) {\n          const size = parseFloat(preferredWidth);\n          setPanelSize(size);\n          return;\n        }\n\n        // for all other units we let the browser compute the size\n        if (typeof preferredWidth === 'string') {\n          panelRef.current.style.setProperty('width', preferredWidth);\n          const size = parseFloat(getComputedStyle(panelRef.current).width);\n          setPanelSize(size);\n          return;\n        }\n\n        const size = parseFloat(getComputedStyle(panelRef.current).width);\n        setPanelSize(size);\n      },\n      [containerSize, preferredWidth, setPanelSize, isDismissed],\n    );\n\n    if (isDismissed) {\n      return null;\n    }\n\n    return (\n      <>\n        <div\n          {...restProps}\n          ref={panelRefs}\n          className={clsx(styles.panelContent, className)}\n          style={{ ...style, minWidth, width: draggedSize.current }}\n        >\n          {children}\n        </div>\n\n        <div className={styles.resizeHandleContainer}>\n          {handle !== 'hidden' ? (\n            <ResizeHandle\n              panelName={label}\n              panelSize={draggedSize.current}\n              ref={handleRef}\n            />\n          ) : null}\n        </div>\n      </>\n    );\n  },\n);\n\ninterface ResizeHandleProps {\n  panelName: string;\n  panelSize?: number;\n}\n\nconst ResizeHandle = forwardRef<HTMLHRElement, ResizeHandleProps>(\n  (props, ref) => {\n    const { panelName, panelSize = 0 } = props;\n\n    const intl = useIntl();\n    const { focusProps, focusClassName } = useFocusRing({ focusWithin: true });\n\n    return (\n      <hr\n        {...focusProps}\n        ref={ref}\n        className={clsx(styles.resizeHandle, focusClassName)}\n        aria-valuenow={panelSize}\n        aria-valuetext={`${Math.round(panelSize)}px`}\n        aria-orientation=\"vertical\"\n        aria-label={intl.formatMessage(\n          {\n            defaultMessage: 'Resize {label} panel',\n            id: 'Ym3RUHtaLVFsGlaM',\n            description:\n              'Label for the resize handle of the panel to resize it with drag and drop or keyboard.',\n          },\n          { label: panelName },\n        )}\n        tabIndex={0}\n        data-dt-name={`${panelName.replace(/\\s/g, '')}ResizePanelHandle`}\n      />\n    );\n  },\n);\n\nexport const Panel = Object.assign(PanelRoot, {\n  Content: PanelContent,\n});\n"],
+  "mappings": "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",
   "names": ["size"]
 }

package/esm/layouts/page/PanelControlButton.js

@@ -51,6 +51,9 @@ const PanelControlButton = (props) => {
     }
   };
   const shouldOpen = action === "open" || action === "toggle" && isPanelDismissed === true;
+  const panelName = targetPanel === "sidebar" ? "Sidebar" : "DetailView";
+  const panelAction = shouldOpen ? "Open" : "Close";
+  const dataDtName = targetPanel === "main" ? void 0 : `${panelAction}${panelName}`;
   let localizedPanel = intl.formatMessage({
     defaultMessage: "Sidebar",
     id: "MYBFw8pxHVA1QTDj",
@@ -97,6 +100,7 @@ const PanelControlButton = (props) => {
       style: consumerStyle,
       onClick: handleClick,
       ...remainingProps,
+      "data-dt-name": dataDtName,
       children: childrenProp ?? /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(
         "div",
         {

package/esm/layouts/page/PanelControlButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/PanelControlButton.tsx"],
-  "sourcesContent": ["import { type MouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  XmarkIcon,\n  OpenSidebarIcon,\n  CloseSidebarIcon,\n} from '@dynatrace/strato-icons';\n\nimport { usePageContext } from './page-context.js';\nimport { usePanelContext } from './panel-context.js';\nimport { Button, ButtonProps } from '../../buttons/button/Button.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\n\n/** @public */\nexport interface PanelControlButtonProps\n  extends Omit<ButtonProps<'button'>, 'as' | 'type' | 'loading'> {\n  /** The action triggered by the button. */\n  action?: 'toggle' | 'open' | 'close';\n  /** The target panel controlled by the button. */\n  target?: 'sidebar' | 'details';\n}\n\n/**\n * Use the `PanelControlButton` to get the correct icon for toggling the sidebar / detail view.\n * Depending on where it is rendered and the current state of the panel, the corresponding icon is rendered.\n * You can customize the rendered content by passing any children.\n * @public\n */\nexport const PanelControlButton = (props: PanelControlButtonProps) => {\n  const {\n    action: actionProp,\n    target: targetProp,\n    children: childrenProp,\n    onClick,\n    className: consumerClassName,\n    style: consumerStyle,\n    ...remainingProps\n  }: PanelControlButtonProps = props;\n\n  const pageCtx = usePageContext();\n  const panelCtx = usePanelContext();\n\n  const targetPanel = targetProp ?? panelCtx?.name ?? 'details';\n  const action = actionProp ?? (panelCtx !== null ? 'close' : 'toggle');\n  const panel = pageCtx.panels[targetPanel];\n\n  const isPanelControlled = panel?.isControlled;\n  const isPanelDismissed = panel?.isDismissed;\n\n  const intl = useIntl();\n\n  const handleClick = (event: MouseEvent) => {\n    if (isPanelControlled && !onClick && isDev()) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        \"You are using the panel control button with a controlled panel, but didn't provide an 'onClick' callback. Implement the 'onClick' to update the panel state with the panel control button.\",\n      );\n      return;\n    }\n\n    onClick?.(event);\n\n    if (isPanelControlled) {\n      return;\n    }\n\n    switch (action) {\n      case 'open':\n        pageCtx.expandPanel(targetPanel);\n        break;\n      case 'close':\n        pageCtx.dismissPanel(targetPanel);\n        break;\n      case 'toggle':\n        pageCtx.togglePanel(targetPanel);\n        break;\n    }\n  };\n\n  const shouldOpen =\n    action === 'open' || (action === 'toggle' && isPanelDismissed === true);\n\n  let localizedPanel = intl.formatMessage({\n    defaultMessage: 'Sidebar',\n    id: 'MYBFw8pxHVA1QTDj',\n    description: 'Panel name translation',\n  });\n  if (targetPanel === 'details') {\n    localizedPanel = intl.formatMessage({\n      defaultMessage: 'Detail View',\n      id: '0ntbampPIxNnacS8',\n      description: 'Panel name translation',\n    });\n  }\n\n  let ariaLabel = intl.formatMessage(\n    {\n      defaultMessage: 'Close {panelName}',\n      id: 'QsfELKqpB23/KKWM',\n      description: 'Label for the panel control button.',\n    },\n    { panelName: localizedPanel },\n  );\n  if (shouldOpen) {\n    ariaLabel = intl.formatMessage(\n      {\n        defaultMessage: 'Open {panelName}',\n        id: '01469lp26TkXjPEz',\n        description: 'Label for the panel control button.',\n      },\n      { panelName: localizedPanel },\n    );\n  }\n\n  let defaultIcon;\n  if (shouldOpen) {\n    defaultIcon = <OpenSidebarIcon />;\n  } else if (action === 'toggle') {\n    defaultIcon = <CloseSidebarIcon />;\n  } else {\n    defaultIcon = <XmarkIcon />;\n  }\n\n  return (\n    <Button\n      aria-label={ariaLabel}\n      className={consumerClassName}\n      style={consumerStyle}\n      onClick={handleClick}\n      {...remainingProps}\n    >\n      {childrenProp ?? (\n        <Button.Prefix>\n          <div\n            style={{\n              rotate: targetPanel === 'sidebar' ? '0deg' : '180deg',\n              lineHeight: 0,\n            }}\n          >\n            {defaultIcon}\n          </div>\n        </Button.Prefix>\n      )}\n    </Button>\n  );\n};\n(\n  PanelControlButton as typeof PanelControlButton & { displayName: string }\n).displayName = 'Page.PanelControlButton';\n"],
-  "mappings": "AAqHkB;AApHlB,SAAS,eAAe;AAExB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAChC,SAAS,cAA2B;AACpC,SAAS,aAAa;AAiBf,MAAM,qBAAqB,CAAC,UAAmC;AACpE,QAAM;AAAA,IACJ,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,IACV;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAA6B;AAE7B,QAAM,UAAU,eAAe;AAC/B,QAAM,WAAW,gBAAgB;AAEjC,QAAM,cAAc,cAAc,UAAU,QAAQ;AACpD,QAAM,SAAS,eAAe,aAAa,OAAO,UAAU;AAC5D,QAAM,QAAQ,QAAQ,OAAO,WAAW;AAExC,QAAM,oBAAoB,OAAO;AACjC,QAAM,mBAAmB,OAAO;AAEhC,QAAM,OAAO,QAAQ;AAErB,QAAM,cAAc,CAAC,UAAsB;AACzC,QAAI,qBAAqB,CAAC,WAAW,MAAM,GAAG;AAE5C,cAAQ;AAAA,QACN;AAAA,MACF;AACA;AAAA,IACF;AAEA,cAAU,KAAK;AAEf,QAAI,mBAAmB;AACrB;AAAA,IACF;AAEA,YAAQ,QAAQ;AAAA,MACd,KAAK;AACH,gBAAQ,YAAY,WAAW;AAC/B;AAAA,MACF,KAAK;AACH,gBAAQ,aAAa,WAAW;AAChC;AAAA,MACF,KAAK;AACH,gBAAQ,YAAY,WAAW;AAC/B;AAAA,IACJ;AAAA,EACF;AAEA,QAAM,aACJ,WAAW,UAAW,WAAW,YAAY,qBAAqB;AAEpE,MAAI,iBAAiB,KAAK,cAAc;AAAA,IACtC,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aAAa;AAAA,EACf,CAAC;AACD,MAAI,gBAAgB,WAAW;AAC7B,qBAAiB,KAAK,cAAc;AAAA,MAClC,gBAAgB;AAAA,MAChB,IAAI;AAAA,MACJ,aAAa;AAAA,IACf,CAAC;AAAA,EACH;AAEA,MAAI,YAAY,KAAK;AAAA,IACnB;AAAA,MACE,gBAAgB;AAAA,MAChB,IAAI;AAAA,MACJ,aAAa;AAAA,IACf;AAAA,IACA,EAAE,WAAW,eAAe;AAAA,EAC9B;AACA,MAAI,YAAY;AACd,gBAAY,KAAK;AAAA,MACf;AAAA,QACE,gBAAgB;AAAA,QAChB,IAAI;AAAA,QACJ,aAAa;AAAA,MACf;AAAA,MACA,EAAE,WAAW,eAAe;AAAA,IAC9B;AAAA,EACF;AAEA,MAAI;AACJ,MAAI,YAAY;AACd,kBAAc,oBAAC,mBAAgB;AAAA,EACjC,WAAW,WAAW,UAAU;AAC9B,kBAAc,oBAAC,oBAAiB;AAAA,EAClC,OAAO;AACL,kBAAc,oBAAC,aAAU;AAAA,EAC3B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ,WAAW;AAAA,MACX,OAAO;AAAA,MACP,SAAS;AAAA,MACR,GAAG;AAAA,MAEH,0BACC,oBAAC,OAAO,QAAP,EACC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,QAAQ,gBAAgB,YAAY,SAAS;AAAA,YAC7C,YAAY;AAAA,UACd;AAAA,UAEC;AAAA;AAAA,MACH,GACF;AAAA;AAAA,EAEJ;AAEJ;AAEE,mBACA,cAAc;",
+  "sourcesContent": ["import { type MouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  XmarkIcon,\n  OpenSidebarIcon,\n  CloseSidebarIcon,\n} from '@dynatrace/strato-icons';\n\nimport { usePageContext } from './page-context.js';\nimport { usePanelContext } from './panel-context.js';\nimport { Button, ButtonProps } from '../../buttons/button/Button.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\n\n/** @public */\nexport interface PanelControlButtonProps\n  extends Omit<ButtonProps<'button'>, 'as' | 'type' | 'loading'> {\n  /** The action triggered by the button. */\n  action?: 'toggle' | 'open' | 'close';\n  /** The target panel controlled by the button. */\n  target?: 'sidebar' | 'details';\n}\n\n/**\n * Use the `PanelControlButton` to get the correct icon for toggling the sidebar / detail view.\n * Depending on where it is rendered and the current state of the panel, the corresponding icon is rendered.\n * You can customize the rendered content by passing any children.\n * @public\n */\nexport const PanelControlButton = (props: PanelControlButtonProps) => {\n  const {\n    action: actionProp,\n    target: targetProp,\n    children: childrenProp,\n    onClick,\n    className: consumerClassName,\n    style: consumerStyle,\n    ...remainingProps\n  }: PanelControlButtonProps = props;\n\n  const pageCtx = usePageContext();\n  const panelCtx = usePanelContext();\n\n  const targetPanel = targetProp ?? panelCtx?.name ?? 'details';\n  const action = actionProp ?? (panelCtx !== null ? 'close' : 'toggle');\n  const panel = pageCtx.panels[targetPanel];\n\n  const isPanelControlled = panel?.isControlled;\n  const isPanelDismissed = panel?.isDismissed;\n\n  const intl = useIntl();\n\n  const handleClick = (event: MouseEvent) => {\n    if (isPanelControlled && !onClick && isDev()) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        \"You are using the panel control button with a controlled panel, but didn't provide an 'onClick' callback. Implement the 'onClick' to update the panel state with the panel control button.\",\n      );\n      return;\n    }\n\n    onClick?.(event);\n\n    if (isPanelControlled) {\n      return;\n    }\n\n    switch (action) {\n      case 'open':\n        pageCtx.expandPanel(targetPanel);\n        break;\n      case 'close':\n        pageCtx.dismissPanel(targetPanel);\n        break;\n      case 'toggle':\n        pageCtx.togglePanel(targetPanel);\n        break;\n    }\n  };\n\n  const shouldOpen =\n    action === 'open' || (action === 'toggle' && isPanelDismissed === true);\n\n  const panelName = targetPanel === 'sidebar' ? 'Sidebar' : 'DetailView';\n  const panelAction = shouldOpen ? 'Open' : 'Close';\n  const dataDtName =\n    targetPanel === 'main' ? undefined : `${panelAction}${panelName}`;\n\n  let localizedPanel = intl.formatMessage({\n    defaultMessage: 'Sidebar',\n    id: 'MYBFw8pxHVA1QTDj',\n    description: 'Panel name translation',\n  });\n  if (targetPanel === 'details') {\n    localizedPanel = intl.formatMessage({\n      defaultMessage: 'Detail View',\n      id: '0ntbampPIxNnacS8',\n      description: 'Panel name translation',\n    });\n  }\n\n  let ariaLabel = intl.formatMessage(\n    {\n      defaultMessage: 'Close {panelName}',\n      id: 'QsfELKqpB23/KKWM',\n      description: 'Label for the panel control button.',\n    },\n    { panelName: localizedPanel },\n  );\n  if (shouldOpen) {\n    ariaLabel = intl.formatMessage(\n      {\n        defaultMessage: 'Open {panelName}',\n        id: '01469lp26TkXjPEz',\n        description: 'Label for the panel control button.',\n      },\n      { panelName: localizedPanel },\n    );\n  }\n\n  let defaultIcon;\n  if (shouldOpen) {\n    defaultIcon = <OpenSidebarIcon />;\n  } else if (action === 'toggle') {\n    defaultIcon = <CloseSidebarIcon />;\n  } else {\n    defaultIcon = <XmarkIcon />;\n  }\n\n  return (\n    <Button\n      aria-label={ariaLabel}\n      className={consumerClassName}\n      style={consumerStyle}\n      onClick={handleClick}\n      {...remainingProps}\n      data-dt-name={dataDtName}\n    >\n      {childrenProp ?? (\n        <Button.Prefix>\n          <div\n            style={{\n              rotate: targetPanel === 'sidebar' ? '0deg' : '180deg',\n              lineHeight: 0,\n            }}\n          >\n            {defaultIcon}\n          </div>\n        </Button.Prefix>\n      )}\n    </Button>\n  );\n};\n(\n  PanelControlButton as typeof PanelControlButton & { displayName: string }\n).displayName = 'Page.PanelControlButton';\n"],
+  "mappings": "AA0HkB;AAzHlB,SAAS,eAAe;AAExB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAChC,SAAS,cAA2B;AACpC,SAAS,aAAa;AAiBf,MAAM,qBAAqB,CAAC,UAAmC;AACpE,QAAM;AAAA,IACJ,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,IACV;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAA6B;AAE7B,QAAM,UAAU,eAAe;AAC/B,QAAM,WAAW,gBAAgB;AAEjC,QAAM,cAAc,cAAc,UAAU,QAAQ;AACpD,QAAM,SAAS,eAAe,aAAa,OAAO,UAAU;AAC5D,QAAM,QAAQ,QAAQ,OAAO,WAAW;AAExC,QAAM,oBAAoB,OAAO;AACjC,QAAM,mBAAmB,OAAO;AAEhC,QAAM,OAAO,QAAQ;AAErB,QAAM,cAAc,CAAC,UAAsB;AACzC,QAAI,qBAAqB,CAAC,WAAW,MAAM,GAAG;AAE5C,cAAQ;AAAA,QACN;AAAA,MACF;AACA;AAAA,IACF;AAEA,cAAU,KAAK;AAEf,QAAI,mBAAmB;AACrB;AAAA,IACF;AAEA,YAAQ,QAAQ;AAAA,MACd,KAAK;AACH,gBAAQ,YAAY,WAAW;AAC/B;AAAA,MACF,KAAK;AACH,gBAAQ,aAAa,WAAW;AAChC;AAAA,MACF,KAAK;AACH,gBAAQ,YAAY,WAAW;AAC/B;AAAA,IACJ;AAAA,EACF;AAEA,QAAM,aACJ,WAAW,UAAW,WAAW,YAAY,qBAAqB;AAEpE,QAAM,YAAY,gBAAgB,YAAY,YAAY;AAC1D,QAAM,cAAc,aAAa,SAAS;AAC1C,QAAM,aACJ,gBAAgB,SAAS,SAAY,GAAG,WAAW,GAAG,SAAS;AAEjE,MAAI,iBAAiB,KAAK,cAAc;AAAA,IACtC,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aAAa;AAAA,EACf,CAAC;AACD,MAAI,gBAAgB,WAAW;AAC7B,qBAAiB,KAAK,cAAc;AAAA,MAClC,gBAAgB;AAAA,MAChB,IAAI;AAAA,MACJ,aAAa;AAAA,IACf,CAAC;AAAA,EACH;AAEA,MAAI,YAAY,KAAK;AAAA,IACnB;AAAA,MACE,gBAAgB;AAAA,MAChB,IAAI;AAAA,MACJ,aAAa;AAAA,IACf;AAAA,IACA,EAAE,WAAW,eAAe;AAAA,EAC9B;AACA,MAAI,YAAY;AACd,gBAAY,KAAK;AAAA,MACf;AAAA,QACE,gBAAgB;AAAA,QAChB,IAAI;AAAA,QACJ,aAAa;AAAA,MACf;AAAA,MACA,EAAE,WAAW,eAAe;AAAA,IAC9B;AAAA,EACF;AAEA,MAAI;AACJ,MAAI,YAAY;AACd,kBAAc,oBAAC,mBAAgB;AAAA,EACjC,WAAW,WAAW,UAAU;AAC9B,kBAAc,oBAAC,oBAAiB;AAAA,EAClC,OAAO;AACL,kBAAc,oBAAC,aAAU;AAAA,EAC3B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ,WAAW;AAAA,MACX,OAAO;AAAA,MACP,SAAS;AAAA,MACR,GAAG;AAAA,MACJ,gBAAc;AAAA,MAEb,0BACC,oBAAC,OAAO,QAAP,EACC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,QAAQ,gBAAgB,YAAY,SAAS;AAAA,YAC7C,YAAY;AAAA,UACd;AAAA,UAEC;AAAA;AAAA,MACH,GACF;AAAA;AAAA,EAEJ;AAEJ;AAEE,mBACA,cAAc;",
   "names": []
 }

package/esm/layouts/page/Sidebar.css

@@ -1,16 +1,16 @@
-._zdcge90-3-1-1 {
+._zdcge90-3-2-0 {
   grid-area: sidebar;
   justify-content: flex-end;
 }
-._zdcge91-3-1-1 {
+._zdcge91-3-2-0 {
   flex-shrink: 0;
   height: 100%;
   left: 0;
   position: relative;
   width: 0;
 }
-._zdcge93-3-1-1 {
-  --_zdcge92-3-1-1: 16px;
+._zdcge93-3-2-0 {
+  --_zdcge92-3-2-0: 16px;
   background-color: transparent;
   border-width: 0;
   cursor: pointer;
@@ -20,29 +20,29 @@
   transition-duration: var(--dt-animations-hover-duration-base, 150ms);
   transition-property: background-color, translate;
   transition-timing-function: var(--dt-animations-hover-easing, cubic-bezier(0, 0, 0.2, 1));
-  width: var(--_zdcge92-3-1-1);
-  translate: calc(0px - var(--_zdcge92-3-1-1) * 2);
+  width: var(--_zdcge92-3-2-0);
+  translate: calc(0px - var(--_zdcge92-3-2-0) * 2);
   border-top-right-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1p91g301-3-1-1:is(:hover,:focus-within) ._zdcge93-3-1-1 {
+._1p91g301-3-2-0:is(:hover,:focus-within) ._zdcge93-3-2-0 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
-  translate: calc(0px - var(--_zdcge92-3-1-1) - var(--_zdcge92-3-1-1) / 2);
+  translate: calc(0px - var(--_zdcge92-3-2-0) - var(--_zdcge92-3-2-0) / 2);
 }
-._zdcge95-3-1-1 {
-  --_zdcge94-3-1-1: 24px;
+._zdcge95-3-2-0 {
+  --_zdcge94-3-2-0: 24px;
   position: absolute;
   top: var(--dt-spacings-size-20, 20px);
-  left: calc(0px - var(--_zdcge94-3-1-1) / 2 + 2px);
+  left: calc(0px - var(--_zdcge94-3-2-0) / 2 + 2px);
 }
-._zdcge96-3-1-1 {
-  width: var(--_zdcge94-3-1-1);
-  height: var(--_zdcge94-3-1-1);
+._zdcge96-3-2-0 {
+  width: var(--_zdcge94-3-2-0);
+  height: var(--_zdcge94-3-2-0);
   box-sizing: border-box;
   outline-color: transparent;
   outline-style: var(--dt-borders-style-default, solid);
   outline-width: var(--dt-borders-width-emphasized, 2px);
 }
-._zdcge97-3-1-1 {
+._zdcge97-3-2-0 {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
   opacity: 0;
   outline-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
@@ -50,27 +50,27 @@
   transition-property: all;
   transition-timing-function: var(--dt-animations-hover-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._zdcge97-3-1-1:hover {
+._zdcge97-3-2-0:hover {
   opacity: 1;
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._zdcge97-3-1-1:focus {
+._zdcge97-3-2-0:focus {
   opacity: 1;
 }
-._1p91g301-3-1-1:hover ._zdcge97-3-1-1 {
+._1p91g301-3-2-0:hover ._zdcge97-3-2-0 {
   opacity: 1;
 }
-._zdcge98-3-1-1 {
+._zdcge98-3-2-0 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._zdcge98-3-1-1:hover {
+._zdcge98-3-2-0:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
   outline-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._zdcge99-3-1-1._1p91g302-3-1-1 {
+._zdcge99-3-2-0._1p91g302-3-2-0 {
   width: var(--dt-spacings-size-16, 16px);
 }
-._zdcge9a-3-1-1 {
+._zdcge9a-3-2-0 {
   display: flex;
   gap: var(--dt-spacings-size-4, 4px);
   padding-inline: var(--dt-spacings-size-8, 8px);

package/esm/layouts/page/Sidebar.sty.js

@@ -1,14 +1,14 @@
 import "./panel.css";
 import "../../core/styles/focusRingStatic.css";
 import "./Sidebar.css";
-var buttonContainer = "_zdcge95-3-1-1";
-var dismissButton = "_zdcge97-3-1-1 _zdcge96-3-1-1";
-var expandButton = "_zdcge98-3-1-1 _zdcge96-3-1-1";
-var hint = "_zdcge93-3-1-1 _z0fq9b4-3-1-1 _z0fq9bc-3-1-1 _z0fq9b6-3-1-1 _z0fq9bb-3-1-1";
-var integratedControls = "_zdcge91-3-1-1";
-var integratedControlsDrawerHeader = "_zdcge9a-3-1-1";
-var integratedControlsPanel = "_zdcge99-3-1-1";
-var sidebar = "_zdcge90-3-1-1";
+var buttonContainer = "_zdcge95-3-2-0";
+var dismissButton = "_zdcge97-3-2-0 _zdcge96-3-2-0";
+var expandButton = "_zdcge98-3-2-0 _zdcge96-3-2-0";
+var hint = "_zdcge93-3-2-0 _z0fq9b4-3-2-0 _z0fq9bc-3-2-0 _z0fq9b6-3-2-0 _z0fq9bb-3-2-0";
+var integratedControls = "_zdcge91-3-2-0";
+var integratedControlsDrawerHeader = "_zdcge9a-3-2-0";
+var integratedControlsPanel = "_zdcge99-3-2-0";
+var sidebar = "_zdcge90-3-2-0";
 export {
   buttonContainer,
   dismissButton,

package/esm/layouts/page/Sidebar.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/Sidebar.css.ts"],
-  "sourcesContent": ["import './panel.css';\nimport '../../core/styles/focusRingStatic.css';\nimport './Sidebar.css';\nexport var buttonContainer = '_zdcge95-3-1-1';\nexport var dismissButton = '_zdcge97-3-1-1 _zdcge96-3-1-1';\nexport var expandButton = '_zdcge98-3-1-1 _zdcge96-3-1-1';\nexport var hint = '_zdcge93-3-1-1 _z0fq9b4-3-1-1 _z0fq9bc-3-1-1 _z0fq9b6-3-1-1 _z0fq9bb-3-1-1';\nexport var integratedControls = '_zdcge91-3-1-1';\nexport var integratedControlsDrawerHeader = '_zdcge9a-3-1-1';\nexport var integratedControlsPanel = '_zdcge99-3-1-1';\nexport var sidebar = '_zdcge90-3-1-1';"],
+  "sourcesContent": ["import './panel.css';\nimport '../../core/styles/focusRingStatic.css';\nimport './Sidebar.css';\nexport var buttonContainer = '_zdcge95-3-2-0';\nexport var dismissButton = '_zdcge97-3-2-0 _zdcge96-3-2-0';\nexport var expandButton = '_zdcge98-3-2-0 _zdcge96-3-2-0';\nexport var hint = '_zdcge93-3-2-0 _z0fq9b4-3-2-0 _z0fq9bc-3-2-0 _z0fq9b6-3-2-0 _z0fq9bb-3-2-0';\nexport var integratedControls = '_zdcge91-3-2-0';\nexport var integratedControlsDrawerHeader = '_zdcge9a-3-2-0';\nexport var integratedControlsPanel = '_zdcge99-3-2-0';\nexport var sidebar = '_zdcge90-3-2-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,kBAAkB;AACtB,IAAI,gBAAgB;AACpB,IAAI,eAAe;AACnB,IAAI,OAAO;AACX,IAAI,qBAAqB;AACzB,IAAI,iCAAiC;AACrC,IAAI,0BAA0B;AAC9B,IAAI,UAAU;",
   "names": []
 }

package/esm/layouts/page/panel.css

@@ -1,37 +1,37 @@
-._1p91g301-3-1-1 {
+._1p91g301-3-2-0 {
   box-sizing: border-box;
   display: flex;
   max-width: 100%;
 }
-._1p91g302-3-1-1 {
+._1p91g302-3-2-0 {
   width: 0;
   position: relative;
 }
-._1p91g303-3-1-1 {
+._1p91g303-3-2-0 {
   flex-shrink: 0;
   position: relative;
   width: 8px;
 }
-._1p91g304-3-1-1 {
+._1p91g304-3-2-0 {
   box-sizing: border-box;
   padding: 0;
 }
-._1p91g305-3-1-1 {
+._1p91g305-3-2-0 {
   box-sizing: border-box;
   padding: var(--dt-spacings-size-16, 16px);
   height: 100%;
 }
-._1p91g306-3-1-1 {
+._1p91g306-3-2-0 {
   line-height: 0;
 }
-._1p91g307-3-1-1 {
+._1p91g307-3-2-0 {
   box-sizing: border-box;
   flex-grow: 1;
   overflow-y: auto;
   padding: var(--dt-spacings-size-16, 16px);
   position: relative;
 }
-._1p91g308-3-1-1 {
+._1p91g308-3-2-0 {
   flex-shrink: 0;
   width: var(--dt-spacings-size-8, 8px);
   position: relative;
@@ -40,7 +40,7 @@
   height: 100%;
   justify-content: center;
 }
-._1p91g309-3-1-1 {
+._1p91g309-3-2-0 {
   background: var(--dt-colors-border-neutral-default, #dadbe4);
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   border: none;
@@ -54,17 +54,17 @@
   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;
 }
-._1p91g309-3-1-1:focus-visible {
+._1p91g309-3-2-0:focus-visible {
   width: 100%;
 }
-._1p91g309-3-1-1:hover._1p91g309-3-1-1:focus-visible {
+._1p91g309-3-2-0:hover._1p91g309-3-2-0:focus-visible {
   width: 2px;
 }
-._1p91g309-3-1-1:focus-visible, ._1p91g309-3-1-1:hover {
+._1p91g309-3-2-0:focus-visible, ._1p91g309-3-2-0:hover {
   height: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }
-._1p91g309-3-1-1:after {
+._1p91g309-3-2-0:after {
   content: "";
   display: block;
   height: 100%;

package/esm/layouts/page/panel.sty.js

@@ -1,15 +1,15 @@
 import "./panel.css";
 var GAP_SIZE = 8;
-var buttonIcon = "_1p91g306-3-1-1";
-var dismissedPanel = "_1p91g302-3-1-1";
-var drawer = "_1p91g304-3-1-1";
-var drawerContent = "_1p91g305-3-1-1";
-var gap = "_1p91g303-3-1-1";
-var panelContent = "_1p91g307-3-1-1";
-var resizeHandle = "_1p91g309-3-1-1";
-var resizeHandleContainer = "_1p91g308-3-1-1";
-var root = "_1p91g301-3-1-1";
-var rtlPanel = "_1p91g300-3-1-1";
+var buttonIcon = "_1p91g306-3-2-0";
+var dismissedPanel = "_1p91g302-3-2-0";
+var drawer = "_1p91g304-3-2-0";
+var drawerContent = "_1p91g305-3-2-0";
+var gap = "_1p91g303-3-2-0";
+var panelContent = "_1p91g307-3-2-0";
+var resizeHandle = "_1p91g309-3-2-0";
+var resizeHandleContainer = "_1p91g308-3-2-0";
+var root = "_1p91g301-3-2-0";
+var rtlPanel = "_1p91g300-3-2-0";
 export {
   GAP_SIZE,
   buttonIcon,

package/esm/layouts/page/panel.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/panel.css.ts"],
-  "sourcesContent": ["import './panel.css';\nexport var GAP_SIZE = 8;\nexport var buttonIcon = '_1p91g306-3-1-1';\nexport var dismissedPanel = '_1p91g302-3-1-1';\nexport var drawer = '_1p91g304-3-1-1';\nexport var drawerContent = '_1p91g305-3-1-1';\nexport var gap = '_1p91g303-3-1-1';\nexport var panelContent = '_1p91g307-3-1-1';\nexport var resizeHandle = '_1p91g309-3-1-1';\nexport var resizeHandleContainer = '_1p91g308-3-1-1';\nexport var root = '_1p91g301-3-1-1';\nexport var rtlPanel = '_1p91g300-3-1-1';"],
+  "sourcesContent": ["import './panel.css';\nexport var GAP_SIZE = 8;\nexport var buttonIcon = '_1p91g306-3-2-0';\nexport var dismissedPanel = '_1p91g302-3-2-0';\nexport var drawer = '_1p91g304-3-2-0';\nexport var drawerContent = '_1p91g305-3-2-0';\nexport var gap = '_1p91g303-3-2-0';\nexport var panelContent = '_1p91g307-3-2-0';\nexport var resizeHandle = '_1p91g309-3-2-0';\nexport var resizeHandleContainer = '_1p91g308-3-2-0';\nexport var root = '_1p91g301-3-2-0';\nexport var rtlPanel = '_1p91g300-3-2-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;AACf,IAAI,aAAa;AACjB,IAAI,iBAAiB;AACrB,IAAI,SAAS;AACb,IAAI,gBAAgB;AACpB,IAAI,MAAM;AACV,IAAI,eAAe;AACnB,IAAI,eAAe;AACnB,IAAI,wBAAwB;AAC5B,IAAI,OAAO;AACX,IAAI,WAAW;",
   "names": []
 }

package/esm/layouts/page-layout/PageLayout.css

@@ -0,0 +1,22 @@
+._193kgwe0-3-2-0 {
+  background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
+  display: grid;
+  height: 100%;
+  overflow: hidden;
+  grid-template-rows: min-content minmax(0px, 1fr);
+  grid-template-areas: "header" "content";
+}
+._193kgwe1-3-2-0 {
+  grid-area: header;
+  padding: var(--dt-spacings-size-8, 8px);
+}
+._193kgwe2-3-2-0 {
+  grid-area: content;
+}
+._193kgwe3-3-2-0 {
+  padding: var(--dt-spacings-size-16, 16px);
+  background-color: var(--dt-colors-background-base-default, #f9f9fa);
+  border-top-right-radius: var(--dt-borders-radius-surface-default, 12px);
+  border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
+  height: 100%;
+}

package/esm/layouts/page-layout/PageLayout.js

@@ -0,0 +1,170 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import {
+  Children,
+  forwardRef,
+  isValidElement,
+  memo
+} from "react";
+import { ContentSlot, DetailsSlot } from "./details-layout/slots.js";
+import * as styles from "./PageLayout.sty.js";
+import {
+  ProxySlot,
+  isContentSlot,
+  isDetailsSlot,
+  isProxySlot,
+  isSidebarSlot
+} from "./shared/slots.js";
+import { SidebarSlot } from "./sidebar-layout/slots.js";
+import { SubLayout } from "./SubLayout.js";
+const HeaderSlot = memo(forwardRef(() => null));
+HeaderSlot.displayName = "PageLayout.Header";
+function isHeaderSlot(element) {
+  return element.type === HeaderSlot;
+}
+function isSubLayoutElement(element) {
+  return element.type === SubLayout;
+}
+function extractSlotsProps(children) {
+  let header = null;
+  let subLayout = null;
+  const shorthandChildren = [];
+  let sidebarCount = 0;
+  let contentCount = 0;
+  let proxyCount = 0;
+  let detailsCount = 0;
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) {
+      return;
+    }
+    if (isHeaderSlot(child)) {
+      if (header) {
+        throw new Error("PageLayout: only one Header slot is allowed");
+      }
+      const { children: headerChildren, ...domProps } = child.props;
+      header = {
+        children: headerChildren,
+        props: domProps,
+        ref: "ref" in child ? child.ref : void 0
+      };
+      return;
+    }
+    if (isSubLayoutElement(child)) {
+      if (subLayout) {
+        throw new Error("PageLayout: only one SubLayout is allowed");
+      }
+      subLayout = child;
+      return;
+    }
+    if (isSidebarSlot(child)) {
+      sidebarCount++;
+      shorthandChildren.push(child);
+      return;
+    }
+    if (isContentSlot(child)) {
+      contentCount++;
+      shorthandChildren.push(child);
+      return;
+    }
+    if (isProxySlot(child)) {
+      proxyCount++;
+      shorthandChildren.push(child);
+      return;
+    }
+    if (isDetailsSlot(child)) {
+      detailsCount++;
+      shorthandChildren.push(child);
+      return;
+    }
+  });
+  if (subLayout && (sidebarCount > 0 || contentCount > 0 || proxyCount > 0 || detailsCount > 0)) {
+    throw new Error(
+      "PageLayout: SubLayout cannot be used together with Sidebar, Content, Proxy, or Details slots"
+    );
+  }
+  if (subLayout) {
+    return { mode: "explicit", header, subLayout };
+  }
+  if (sidebarCount > 1) {
+    throw new Error("PageLayout: only one Sidebar slot is allowed");
+  }
+  if (contentCount > 1) {
+    throw new Error("PageLayout: only one Content slot is allowed");
+  }
+  if (proxyCount > 1) {
+    throw new Error("PageLayout: only one Proxy slot is allowed");
+  }
+  if (detailsCount > 1) {
+    throw new Error("PageLayout: only one Details slot is allowed");
+  }
+  if (contentCount > 0 && proxyCount > 0) {
+    throw new Error(
+      "PageLayout: Content and Proxy slots are mutually exclusive"
+    );
+  }
+  if (contentCount === 0 && proxyCount === 0) {
+    throw new Error("PageLayout: either Content or Proxy slot is required");
+  }
+  return { mode: "shorthand", header, subLayoutChildren: shorthandChildren };
+}
+const LayoutRoot = memo(
+  forwardRef((props, forwardedRef) => {
+    const { children, className: rootClassName, ...rootProps } = props;
+    const slots = extractSlotsProps(children);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rootProps,
+        ref: forwardedRef,
+        className: clsx(styles.layoutRoot, rootClassName),
+        children: [
+          slots.header ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              ...slots.header.props,
+              ref: slots.header.ref,
+              className: clsx(
+                styles.headerContainer,
+                slots.header.props.className
+              ),
+              children: slots.header.children
+            }
+          ) : null,
+          /* @__PURE__ */ jsx("div", { className: styles.contentContainer, children: slots.mode === "explicit" ? slots.subLayout : /* @__PURE__ */ jsx(SubLayout, { children: slots.subLayoutChildren }) })
+        ]
+      }
+    );
+  })
+);
+LayoutRoot.displayName = "PageLayout";
+const PageLayout = Object.assign(LayoutRoot, {
+  /** The `Header` slot displays content at the very top of the page. */
+  Header: HeaderSlot,
+  /**
+   * `SubLayout` renders the standard Sidebar/Content/Details horizontal composition.
+   *
+   * Use this as a direct child of `PageLayout` (explicit mode) or standalone for child routes.
+   * Accepts `PageLayout.Sidebar`, exactly one of `PageLayout.Content` or `PageLayout.Proxy`,
+   * and `PageLayout.Details` as slot children.
+   */
+  SubLayout,
+  /**
+   * The `Proxy` slot is an unstyled pass-through container.
+   * Use it when the content area renders dynamic children such as `<Outlet />` or `<Suspense>`.
+   * Unlike `Content`, `Proxy` does not apply padding or background styling.
+   */
+  Proxy: ProxySlot,
+  /** The `Sidebar` slot displays content in the collapsible, resizable sidebar panel. */
+  Sidebar: SidebarSlot,
+  /**
+   * The `Content` slot displays the styled main content area (padding, background, border-radius).
+   * Use this for leaf content. Mutually exclusive with `Proxy`.
+   */
+  Content: ContentSlot,
+  /** The `Details` slot displays content in the collapsible, resizable details panel. */
+  Details: DetailsSlot
+});
+export {
+  PageLayout
+};
+//# sourceMappingURL=PageLayout.js.map

package/esm/layouts/page-layout/PageLayout.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/layouts/page-layout/PageLayout.tsx"],
+  "sourcesContent": ["/* eslint-disable react-hooks/refs */\nimport { clsx } from 'clsx';\nimport {\n  Children,\n  forwardRef,\n  isValidElement,\n  memo,\n  type ComponentPropsWithoutRef,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from 'react';\n\nimport { ContentSlot, DetailsSlot } from './details-layout/slots.js';\nimport * as styles from './PageLayout.sty.js';\nimport {\n  ProxySlot,\n  isContentSlot,\n  isDetailsSlot,\n  isProxySlot,\n  isSidebarSlot,\n  type ExtractedSlot,\n} from './shared/slots.js';\nimport { SidebarSlot } from './sidebar-layout/slots.js';\nimport { SubLayout } from './SubLayout.js';\nimport { type MaskingProps } from '../../core/types/masking-props.js';\n\n/** @internal */\nexport interface HeaderProps\n  extends PropsWithChildren,\n    MaskingProps,\n    ComponentPropsWithoutRef<'div'> {}\n\nconst HeaderSlot = memo(forwardRef<HTMLDivElement, HeaderProps>(() => null));\nHeaderSlot.displayName = 'PageLayout.Header';\n\nfunction isHeaderSlot(\n  element: ReactElement,\n): element is ReactElement<HeaderProps> {\n  return element.type === HeaderSlot;\n}\n\nfunction isSubLayoutElement(element: ReactElement): element is ReactElement {\n  return element.type === SubLayout;\n}\n\ntype ExtractedHeaderSlot = ExtractedSlot<Omit<HeaderProps, 'children'>>;\n\ntype ExtractedSlots =\n  | {\n      mode: 'explicit';\n      header: ExtractedHeaderSlot | null;\n      subLayout: ReactElement;\n    }\n  | {\n      mode: 'shorthand';\n      header: ExtractedHeaderSlot | null;\n      subLayoutChildren: ReactNode;\n    };\n\nfunction extractSlotsProps(children: ReactNode): ExtractedSlots {\n  let header: ExtractedHeaderSlot | null = null;\n  let subLayout: ReactElement | null = null;\n\n  const shorthandChildren: ReactNode[] = [];\n\n  let sidebarCount = 0;\n  let contentCount = 0;\n  let proxyCount = 0;\n  let detailsCount = 0;\n\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      return;\n    }\n\n    if (isHeaderSlot(child)) {\n      if (header) {\n        throw new Error('PageLayout: only one Header slot is allowed');\n      }\n      const { children: headerChildren, ...domProps } = child.props;\n      header = {\n        children: headerChildren,\n        props: domProps,\n        ref: 'ref' in child ? (child.ref as Ref<HTMLDivElement>) : undefined,\n      };\n      return;\n    }\n\n    if (isSubLayoutElement(child)) {\n      if (subLayout) {\n        throw new Error('PageLayout: only one SubLayout is allowed');\n      }\n      subLayout = child;\n      return;\n    }\n\n    if (isSidebarSlot(child)) {\n      sidebarCount++;\n      shorthandChildren.push(child);\n      return;\n    }\n\n    if (isContentSlot(child)) {\n      contentCount++;\n      shorthandChildren.push(child);\n      return;\n    }\n\n    if (isProxySlot(child)) {\n      proxyCount++;\n      shorthandChildren.push(child);\n      return;\n    }\n\n    if (isDetailsSlot(child)) {\n      detailsCount++;\n      shorthandChildren.push(child);\n      return;\n    }\n  });\n\n  if (\n    subLayout &&\n    (sidebarCount > 0 || contentCount > 0 || proxyCount > 0 || detailsCount > 0)\n  ) {\n    throw new Error(\n      'PageLayout: SubLayout cannot be used together with Sidebar, Content, Proxy, or Details slots',\n    );\n  }\n\n  if (subLayout) {\n    return { mode: 'explicit', header, subLayout };\n  }\n\n  if (sidebarCount > 1) {\n    throw new Error('PageLayout: only one Sidebar slot is allowed');\n  }\n  if (contentCount > 1) {\n    throw new Error('PageLayout: only one Content slot is allowed');\n  }\n  if (proxyCount > 1) {\n    throw new Error('PageLayout: only one Proxy slot is allowed');\n  }\n  if (detailsCount > 1) {\n    throw new Error('PageLayout: only one Details slot is allowed');\n  }\n  if (contentCount > 0 && proxyCount > 0) {\n    throw new Error(\n      'PageLayout: Content and Proxy slots are mutually exclusive',\n    );\n  }\n  if (contentCount === 0 && proxyCount === 0) {\n    throw new Error('PageLayout: either Content or Proxy slot is required');\n  }\n\n  return { mode: 'shorthand', header, subLayoutChildren: shorthandChildren };\n}\n\n/** @internal */\nexport interface RootProps\n  extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {\n  children: ReactNode;\n}\n\nconst LayoutRoot = memo(\n  forwardRef<HTMLDivElement, RootProps>((props, forwardedRef) => {\n    const { children, className: rootClassName, ...rootProps } = props;\n    const slots = extractSlotsProps(children);\n\n    return (\n      <div\n        {...rootProps}\n        ref={forwardedRef}\n        className={clsx(styles.layoutRoot, rootClassName)}\n      >\n        {slots.header ? (\n          <div\n            {...slots.header.props}\n            ref={slots.header.ref}\n            className={clsx(\n              styles.headerContainer,\n              slots.header.props.className,\n            )}\n          >\n            {slots.header.children}\n          </div>\n        ) : null}\n\n        <div className={styles.contentContainer}>\n          {slots.mode === 'explicit' ? (\n            slots.subLayout\n          ) : (\n            <SubLayout>{slots.subLayoutChildren}</SubLayout>\n          )}\n        </div>\n      </div>\n    );\n  }),\n);\nLayoutRoot.displayName = 'PageLayout';\n\n/**\n * The `PageLayout` component provides the basic layout for your app with slots for a header, sidebar, main content, and a details panel.\n *\n * **Shorthand mode:** Use `PageLayout.Content` (required) or `PageLayout.Proxy`, `PageLayout.Sidebar`, and `PageLayout.Details` as direct children.\n *\n * **Explicit mode:** Use `PageLayout.Header` and `PageLayout.SubLayout` as children.\n * @internal\n */\nexport const PageLayout = Object.assign(LayoutRoot, {\n  /** The `Header` slot displays content at the very top of the page. */\n  Header: HeaderSlot,\n  /**\n   * `SubLayout` renders the standard Sidebar/Content/Details horizontal composition.\n   *\n   * Use this as a direct child of `PageLayout` (explicit mode) or standalone for child routes.\n   * Accepts `PageLayout.Sidebar`, exactly one of `PageLayout.Content` or `PageLayout.Proxy`,\n   * and `PageLayout.Details` as slot children.\n   */\n  SubLayout,\n  /**\n   * The `Proxy` slot is an unstyled pass-through container.\n   * Use it when the content area renders dynamic children such as `<Outlet />` or `<Suspense>`.\n   * Unlike `Content`, `Proxy` does not apply padding or background styling.\n   */\n  Proxy: ProxySlot,\n  /** The `Sidebar` slot displays content in the collapsible, resizable sidebar panel. */\n  Sidebar: SidebarSlot,\n  /**\n   * The `Content` slot displays the styled main content area (padding, background, border-radius).\n   * Use this for leaf content. Mutually exclusive with `Proxy`.\n   */\n  Content: ContentSlot,\n  /** The `Details` slot displays content in the collapsible, resizable details panel. */\n  Details: DetailsSlot,\n});\n"],
+  "mappings": "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",
+  "names": []
+}

package/esm/layouts/page-layout/PageLayout.sty.js

@@ -0,0 +1,12 @@
+import "./PageLayout.css";
+var contentContainer = "_193kgwe2-3-2-0";
+var headerContainer = "_193kgwe1-3-2-0";
+var layoutRoot = "_193kgwe0-3-2-0";
+var main = "_193kgwe3-3-2-0";
+export {
+  contentContainer,
+  headerContainer,
+  layoutRoot,
+  main
+};
+//# sourceMappingURL=PageLayout.sty.js.map

package/esm/layouts/page-layout/PageLayout.sty.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/layouts/page-layout/PageLayout.css.ts"],
+  "sourcesContent": ["import './PageLayout.css';\nexport var contentContainer = '_193kgwe2-3-2-0';\nexport var headerContainer = '_193kgwe1-3-2-0';\nexport var layoutRoot = '_193kgwe0-3-2-0';\nexport var main = '_193kgwe3-3-2-0';"],
+  "mappings": "AAAA,OAAO;AACA,IAAI,mBAAmB;AACvB,IAAI,kBAAkB;AACtB,IAAI,aAAa;AACjB,IAAI,OAAO;",
+  "names": []
+}