@dynatrace/strato-components 3.7.1 → 3.8.0

package/esm/layouts/page/Page.css

@@ -1,10 +1,10 @@
-._1j29czt0-3-7-1 {
+._1j29czt0-3-8-0 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
   display: grid;
   height: 100dvh;
   height: 100vh;
   overflow: hidden;
 }
-._1jgl8s50-3-7-1 ._1j29czt0-3-7-1 {
+._1jgl8s50-3-8-0 ._1j29czt0-3-8-0 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/Page.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type HTMLAttributes,\n  type RefObject,\n  useCallback,\n  useMemo,\n  useReducer,\n  useRef,\n} from 'react';\nimport type { Entries } from 'type-fest';\n\nimport { DetailView } from './DetailView.js';\nimport { Header } from './Header.js';\nimport { Main } from './Main.js';\nimport {\n  pageContext,\n  type PageContext,\n  type PageLayoutState,\n} from './page-context.js';\nimport type { PagePanelSizes, PanelName } from './page-types.js';\nimport * as styles from './Page.sty.js';\nimport { GAP_SIZE } from './panel.sty.js';\nimport { PanelControlButton } from './PanelControlButton.js';\nimport { Sidebar } from './Sidebar.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useContainerSize } from '../../core/hooks/useContainerSize.js';\nimport { useSlots } from '../../core/hooks/useSlots.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\n\nconst COMPONENT_NAME = 'Page';\n\n/** @public */\nexport interface PageProps\n  extends WithChildren,\n    Omit<HTMLAttributes<HTMLDivElement>, keyof StylingProps>,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /**\n   * Whether animations should be disabled.\n   * If true or 'prefers-reduced-motion' is set to 'reduce', no animations are applied.\n   * @defaultValue false\n   */\n  disableAnimations?: boolean;\n}\n\ninterface RegisterPanelPayload {\n  panel: PanelName;\n  ref: RefObject<HTMLDivElement>;\n  isControlled: boolean;\n  isDismissed: boolean;\n  minWidth?: number;\n  breakpoint?: number;\n}\n\ntype PANELACTION =\n  | { type: 'register'; payload: RegisterPanelPayload }\n  | { type: 'remove'; payload: { panel: PanelName } }\n  | { type: 'dismiss'; payload: { panel: PanelName } }\n  | { type: 'expand'; payload: { panel: PanelName } }\n  | { type: 'toggle'; payload: { panel: PanelName } };\n\nfunction handleRegisterAction(\n  state: PageLayoutState,\n  payload: RegisterPanelPayload,\n): PageLayoutState {\n  const { panel, ref, isControlled, isDismissed, minWidth, breakpoint } =\n    payload;\n\n  if (state[panel]) {\n    return state;\n  }\n\n  const newState = { ...state };\n  if (panel === 'main') {\n    newState[panel] = {\n      ref,\n      isControlled: false,\n      isDismissed: false,\n      minWidth: minWidth ?? 0,\n      breakpoint: 0,\n    };\n    return newState;\n  }\n  newState[panel] = {\n    ref,\n    isControlled,\n    isDismissed,\n    minWidth: minWidth ?? 0,\n    breakpoint: breakpoint ?? 0,\n  };\n\n  return newState;\n}\n\nfunction handleRemoveAction(\n  state: PageLayoutState,\n  payload: { panel: PanelName },\n): PageLayoutState {\n  const { panel } = payload;\n\n  const newState = { ...state, [panel]: null };\n\n  return newState;\n}\n\nfunction handleDismissAction(\n  state: PageLayoutState,\n  payload: { panel: PanelName },\n): PageLayoutState {\n  const { panel } = payload;\n\n  if (panel === 'main') {\n    return state;\n  }\n\n  const newState = { ...state };\n  if (!newState[panel]) {\n    return state;\n  }\n\n  const isControlled = newState[panel].isControlled;\n  if (isControlled) {\n    return state;\n  }\n\n  newState[panel] = {\n    ...newState[panel],\n    isDismissed: true,\n  };\n\n  return newState;\n}\n\nfunction handleExpandAction(\n  state: PageLayoutState,\n  payload: { panel: PanelName },\n): PageLayoutState {\n  const { panel } = payload;\n\n  if (panel === 'main') {\n    return state;\n  }\n\n  const newState = { ...state };\n  if (!newState[panel]) {\n    return state;\n  }\n\n  const isControlled = newState[panel].isControlled;\n  if (isControlled) {\n    return state;\n  }\n\n  newState[panel] = {\n    ...newState[panel],\n    isDismissed: false,\n  };\n\n  return newState;\n}\n\nfunction handleToggleAction(\n  state: PageLayoutState,\n  payload: { panel: PanelName },\n): PageLayoutState {\n  const { panel } = payload;\n\n  if (panel === 'main') {\n    return state;\n  }\n\n  const newState = { ...state };\n  if (!newState[panel]) {\n    return state;\n  }\n\n  const isControlled = newState[panel].isControlled;\n  if (isControlled) {\n    return state;\n  }\n\n  newState[panel] = {\n    ...newState[panel],\n    isDismissed: !newState[panel].isDismissed,\n  };\n\n  return newState;\n}\n\nfunction pageLayoutReducer(\n  state: PageLayoutState,\n  action: PANELACTION,\n): PageLayoutState {\n  if (action.type === 'register') {\n    return handleRegisterAction(state, action.payload);\n  }\n\n  if (action.type === 'remove') {\n    return handleRemoveAction(state, action.payload);\n  }\n\n  if (action.type === 'dismiss') {\n    return handleDismissAction(state, action.payload);\n  }\n\n  if (action.type === 'expand') {\n    return handleExpandAction(state, action.payload);\n  }\n\n  if (action.type === 'toggle') {\n    return handleToggleAction(state, action.payload);\n  }\n\n  throw Error('invalid action.type');\n}\n\nfunction getGridColumnStyle(\n  panel: {\n    isDismissed: boolean;\n    minWidth?: number;\n    breakpoint?: number;\n  },\n  max: string = 'auto',\n) {\n  const hasDrawer = !window.matchMedia(`(min-width: ${panel.breakpoint}px)`)\n    .matches;\n\n  if (hasDrawer || panel.minWidth === undefined || panel.isDismissed) {\n    return `minmax(min-content, ${max})`;\n  }\n\n  return `minmax(${panel.minWidth + GAP_SIZE}px, ${max})`;\n}\n\nfunction getGridTemplateStyles(panels: PageLayoutState) {\n  let columns = '';\n  let contentAreas = '';\n  let headerAreas = '';\n\n  if (panels.main) {\n    columns = `${getGridColumnStyle(panels.main, '1fr')} ${columns}`;\n    contentAreas = 'main';\n    headerAreas = 'header';\n  }\n\n  if (panels.sidebar) {\n    columns = `${getGridColumnStyle(panels.sidebar)} ${columns}`;\n    contentAreas = `sidebar ${contentAreas}`;\n    headerAreas = `header ${headerAreas}`;\n  }\n\n  if (panels.details) {\n    columns = `${columns} ${getGridColumnStyle(panels.details)}`;\n    contentAreas = `${contentAreas} details`;\n    headerAreas = `${headerAreas} header`;\n  }\n\n  return {\n    gridTemplateColumns: columns,\n    gridTemplateAreas: `\"${headerAreas}\" \"${contentAreas}\"`,\n    gridTemplateRows: 'min-content minmax(0, 1fr)',\n  };\n}\n\nconst PageRoot = (props: PageProps) => {\n  const { children, style, className, ...remainingProps } = props;\n  const [slots, otherChildren] = useSlots(children, {\n    header: Header,\n  });\n\n  const [panels, dispatch] = useReducer(pageLayoutReducer, {\n    sidebar: null,\n    main: null,\n    details: null,\n  });\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerSize = useContainerSize(containerRef);\n\n  const getPanelSizes = useCallback(() => {\n    const sizes: PagePanelSizes = {};\n\n    for (const [key, panel] of Object.entries(panels) as Entries<\n      typeof panels\n    >) {\n      if (!panel?.ref.current) {\n        continue;\n      }\n      const panelSize = parseFloat(getComputedStyle(panel.ref.current).width);\n      sizes[key] = {\n        px: panelSize,\n        '%': (panelSize / containerSize.width) * 100,\n      };\n    }\n\n    return sizes;\n  }, [containerSize.width, panels]);\n\n  const registerPanel = useCallback<PageContext['registerPanel']>(\n    (panelName, { ref, isControlled, isDismissed, minWidth, breakpoint }) => {\n      dispatch({\n        type: 'register',\n        payload: {\n          panel: panelName,\n          ref,\n          isControlled,\n          isDismissed,\n          minWidth,\n          breakpoint,\n        },\n      });\n    },\n    [],\n  );\n\n  const removePanel = useCallback<PageContext['removePanel']>((panelName) => {\n    dispatch({ type: 'remove', payload: { panel: panelName } });\n  }, []);\n\n  const dismissPanel = useCallback<PageContext['dismissPanel']>((panelName) => {\n    dispatch({\n      type: 'dismiss',\n      payload: { panel: panelName },\n    });\n  }, []);\n\n  const expandPanel = useCallback<PageContext['expandPanel']>((panelName) => {\n    dispatch({\n      type: 'expand',\n      payload: { panel: panelName },\n    });\n  }, []);\n\n  const togglePanel = useCallback<PageContext['togglePanel']>((panelName) => {\n    dispatch({\n      type: 'toggle',\n      payload: { panel: panelName },\n    });\n  }, []);\n\n  const gridTemplateStyles = getGridTemplateStyles(panels);\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const ctx = useMemo(\n    () => ({\n      containerSize: containerSize.width,\n      panels,\n      registerPanel,\n      removePanel,\n      dismissPanel,\n      expandPanel,\n      togglePanel,\n      getPanelSizes,\n    }),\n    [\n      containerSize.width,\n      panels,\n      registerPanel,\n      removePanel,\n      dismissPanel,\n      expandPanel,\n      togglePanel,\n      getPanelSizes,\n    ],\n  );\n\n  return (\n    <div\n      {...restProps}\n      {...behavioralTrackingProps}\n      ref={containerRef}\n      className={clsx(styles.page, className)}\n      style={{ ...style, ...gridTemplateStyles }}\n      data-dt-component={COMPONENT_NAME}\n    >\n      {slots.header}\n      <pageContext.Provider value={ctx}>{otherChildren}</pageContext.Provider>\n    </div>\n  );\n};\n\n/**\n * The `Page` component provides the basic layout for your app with slots for a header, sidebar, main content, and a detail view.\n * The `Main` slot is the only slot that is mandatory for rendering the `Page`; every other slot is optional.\n * @public\n */\nexport const Page = Object.assign(PageRoot, {\n  /** The `Header` component is used inside the `Page` component for displaying content at the very top of the page. */\n  Header,\n  /** The `Sidebar` component is used inside the `Page` component for displaying content in the corresponding panel. */\n  Sidebar,\n  /**\n   * The `Main` component is used inside the `Page` component for displaying content in the corresponding panel.\n   * It is the only compound that is mandatory for rendering the `Page`.\n   */\n  Main,\n  /** The `DetailView` component is used inside the `Page` component for displaying content in the corresponding panel. */\n  DetailView,\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   */\n  PanelControlButton,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type HTMLAttributes,\n  type RefObject,\n  useCallback,\n  useMemo,\n  useReducer,\n  useRef,\n} from 'react';\nimport type { Entries } from 'type-fest';\n\nimport { DetailView } from './DetailView.js';\nimport { Header } from './Header.js';\nimport { Main } from './Main.js';\nimport {\n  pageContext,\n  type PageContext,\n  type PageLayoutState,\n} from './page-context.js';\nimport type { PagePanelSizes, PanelName } from './page-types.js';\nimport * as styles from './Page.sty.js';\nimport { GAP_SIZE } from './panel.sty.js';\nimport { PanelControlButton } from './PanelControlButton.js';\nimport { Sidebar } from './Sidebar.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useContainerSize } from '../../core/hooks/useContainerSize.js';\nimport { useSlots } from '../../core/hooks/useSlots.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\n\nconst COMPONENT_NAME = 'Page';\n\n/**\n * @public\n * @deprecated The `Page` component is deprecated and will be removed in a future release. Please use `PageLayout` instead.\n */\nexport interface PageProps\n  extends WithChildren,\n    Omit<HTMLAttributes<HTMLDivElement>, keyof StylingProps>,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /**\n   * Whether animations should be disabled.\n   * If true or 'prefers-reduced-motion' is set to 'reduce', no animations are applied.\n   * @defaultValue false\n   */\n  disableAnimations?: boolean;\n}\n\ninterface RegisterPanelPayload {\n  panel: PanelName;\n  ref: RefObject<HTMLDivElement>;\n  isControlled: boolean;\n  isDismissed: boolean;\n  minWidth?: number;\n  breakpoint?: number;\n}\n\ntype PANELACTION =\n  | { type: 'register'; payload: RegisterPanelPayload }\n  | { type: 'remove'; payload: { panel: PanelName } }\n  | { type: 'dismiss'; payload: { panel: PanelName } }\n  | { type: 'expand'; payload: { panel: PanelName } }\n  | { type: 'toggle'; payload: { panel: PanelName } };\n\nfunction handleRegisterAction(\n  state: PageLayoutState,\n  payload: RegisterPanelPayload,\n): PageLayoutState {\n  const { panel, ref, isControlled, isDismissed, minWidth, breakpoint } =\n    payload;\n\n  if (state[panel]) {\n    return state;\n  }\n\n  const newState = { ...state };\n  if (panel === 'main') {\n    newState[panel] = {\n      ref,\n      isControlled: false,\n      isDismissed: false,\n      minWidth: minWidth ?? 0,\n      breakpoint: 0,\n    };\n    return newState;\n  }\n  newState[panel] = {\n    ref,\n    isControlled,\n    isDismissed,\n    minWidth: minWidth ?? 0,\n    breakpoint: breakpoint ?? 0,\n  };\n\n  return newState;\n}\n\nfunction handleRemoveAction(\n  state: PageLayoutState,\n  payload: { panel: PanelName },\n): PageLayoutState {\n  const { panel } = payload;\n\n  const newState = { ...state, [panel]: null };\n\n  return newState;\n}\n\nfunction handleDismissAction(\n  state: PageLayoutState,\n  payload: { panel: PanelName },\n): PageLayoutState {\n  const { panel } = payload;\n\n  if (panel === 'main') {\n    return state;\n  }\n\n  const newState = { ...state };\n  if (!newState[panel]) {\n    return state;\n  }\n\n  const isControlled = newState[panel].isControlled;\n  if (isControlled) {\n    return state;\n  }\n\n  newState[panel] = {\n    ...newState[panel],\n    isDismissed: true,\n  };\n\n  return newState;\n}\n\nfunction handleExpandAction(\n  state: PageLayoutState,\n  payload: { panel: PanelName },\n): PageLayoutState {\n  const { panel } = payload;\n\n  if (panel === 'main') {\n    return state;\n  }\n\n  const newState = { ...state };\n  if (!newState[panel]) {\n    return state;\n  }\n\n  const isControlled = newState[panel].isControlled;\n  if (isControlled) {\n    return state;\n  }\n\n  newState[panel] = {\n    ...newState[panel],\n    isDismissed: false,\n  };\n\n  return newState;\n}\n\nfunction handleToggleAction(\n  state: PageLayoutState,\n  payload: { panel: PanelName },\n): PageLayoutState {\n  const { panel } = payload;\n\n  if (panel === 'main') {\n    return state;\n  }\n\n  const newState = { ...state };\n  if (!newState[panel]) {\n    return state;\n  }\n\n  const isControlled = newState[panel].isControlled;\n  if (isControlled) {\n    return state;\n  }\n\n  newState[panel] = {\n    ...newState[panel],\n    isDismissed: !newState[panel].isDismissed,\n  };\n\n  return newState;\n}\n\nfunction pageLayoutReducer(\n  state: PageLayoutState,\n  action: PANELACTION,\n): PageLayoutState {\n  if (action.type === 'register') {\n    return handleRegisterAction(state, action.payload);\n  }\n\n  if (action.type === 'remove') {\n    return handleRemoveAction(state, action.payload);\n  }\n\n  if (action.type === 'dismiss') {\n    return handleDismissAction(state, action.payload);\n  }\n\n  if (action.type === 'expand') {\n    return handleExpandAction(state, action.payload);\n  }\n\n  if (action.type === 'toggle') {\n    return handleToggleAction(state, action.payload);\n  }\n\n  throw Error('invalid action.type');\n}\n\nfunction getGridColumnStyle(\n  panel: {\n    isDismissed: boolean;\n    minWidth?: number;\n    breakpoint?: number;\n  },\n  max: string = 'auto',\n) {\n  const hasDrawer = !window.matchMedia(`(min-width: ${panel.breakpoint}px)`)\n    .matches;\n\n  if (hasDrawer || panel.minWidth === undefined || panel.isDismissed) {\n    return `minmax(min-content, ${max})`;\n  }\n\n  return `minmax(${panel.minWidth + GAP_SIZE}px, ${max})`;\n}\n\nfunction getGridTemplateStyles(panels: PageLayoutState) {\n  let columns = '';\n  let contentAreas = '';\n  let headerAreas = '';\n\n  if (panels.main) {\n    columns = `${getGridColumnStyle(panels.main, '1fr')} ${columns}`;\n    contentAreas = 'main';\n    headerAreas = 'header';\n  }\n\n  if (panels.sidebar) {\n    columns = `${getGridColumnStyle(panels.sidebar)} ${columns}`;\n    contentAreas = `sidebar ${contentAreas}`;\n    headerAreas = `header ${headerAreas}`;\n  }\n\n  if (panels.details) {\n    columns = `${columns} ${getGridColumnStyle(panels.details)}`;\n    contentAreas = `${contentAreas} details`;\n    headerAreas = `${headerAreas} header`;\n  }\n\n  return {\n    gridTemplateColumns: columns,\n    gridTemplateAreas: `\"${headerAreas}\" \"${contentAreas}\"`,\n    gridTemplateRows: 'min-content minmax(0, 1fr)',\n  };\n}\n\nconst PageRoot = (props: PageProps) => {\n  const { children, style, className, ...remainingProps } = props;\n  const [slots, otherChildren] = useSlots(children, {\n    header: Header,\n  });\n\n  const [panels, dispatch] = useReducer(pageLayoutReducer, {\n    sidebar: null,\n    main: null,\n    details: null,\n  });\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerSize = useContainerSize(containerRef);\n\n  const getPanelSizes = useCallback(() => {\n    const sizes: PagePanelSizes = {};\n\n    for (const [key, panel] of Object.entries(panels) as Entries<\n      typeof panels\n    >) {\n      if (!panel?.ref.current) {\n        continue;\n      }\n      const panelSize = parseFloat(getComputedStyle(panel.ref.current).width);\n      sizes[key] = {\n        px: panelSize,\n        '%': (panelSize / containerSize.width) * 100,\n      };\n    }\n\n    return sizes;\n  }, [containerSize.width, panels]);\n\n  const registerPanel = useCallback<PageContext['registerPanel']>(\n    (panelName, { ref, isControlled, isDismissed, minWidth, breakpoint }) => {\n      dispatch({\n        type: 'register',\n        payload: {\n          panel: panelName,\n          ref,\n          isControlled,\n          isDismissed,\n          minWidth,\n          breakpoint,\n        },\n      });\n    },\n    [],\n  );\n\n  const removePanel = useCallback<PageContext['removePanel']>((panelName) => {\n    dispatch({ type: 'remove', payload: { panel: panelName } });\n  }, []);\n\n  const dismissPanel = useCallback<PageContext['dismissPanel']>((panelName) => {\n    dispatch({\n      type: 'dismiss',\n      payload: { panel: panelName },\n    });\n  }, []);\n\n  const expandPanel = useCallback<PageContext['expandPanel']>((panelName) => {\n    dispatch({\n      type: 'expand',\n      payload: { panel: panelName },\n    });\n  }, []);\n\n  const togglePanel = useCallback<PageContext['togglePanel']>((panelName) => {\n    dispatch({\n      type: 'toggle',\n      payload: { panel: panelName },\n    });\n  }, []);\n\n  const gridTemplateStyles = getGridTemplateStyles(panels);\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const ctx = useMemo(\n    () => ({\n      containerSize: containerSize.width,\n      panels,\n      registerPanel,\n      removePanel,\n      dismissPanel,\n      expandPanel,\n      togglePanel,\n      getPanelSizes,\n    }),\n    [\n      containerSize.width,\n      panels,\n      registerPanel,\n      removePanel,\n      dismissPanel,\n      expandPanel,\n      togglePanel,\n      getPanelSizes,\n    ],\n  );\n\n  return (\n    <div\n      {...restProps}\n      {...behavioralTrackingProps}\n      ref={containerRef}\n      className={clsx(styles.page, className)}\n      style={{ ...style, ...gridTemplateStyles }}\n      data-dt-component={COMPONENT_NAME}\n    >\n      {slots.header}\n      <pageContext.Provider value={ctx}>{otherChildren}</pageContext.Provider>\n    </div>\n  );\n};\n\n/**\n * The `Page` component provides the basic layout for your app with slots for a header, sidebar, main content, and a detail view.\n * The `Main` slot is the only slot that is mandatory for rendering the `Page`; every other slot is optional.\n * @public\n * @deprecated The `Page` component is deprecated and will be removed in a future release. Please use `PageLayout` instead.\n */\nexport const Page = Object.assign(PageRoot, {\n  /** The `Header` component is used inside the `Page` component for displaying content at the very top of the page. */\n  Header,\n  /** The `Sidebar` component is used inside the `Page` component for displaying content in the corresponding panel. */\n  Sidebar,\n  /**\n   * The `Main` component is used inside the `Page` component for displaying content in the corresponding panel.\n   * It is the only compound that is mandatory for rendering the `Page`.\n   */\n  Main,\n  /** The `DetailView` component is used inside the `Page` component for displaying content in the corresponding panel. */\n  DetailView,\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   */\n  PanelControlButton,\n});\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,6 +1,6 @@
 import "../../core/components/app-root/AppRoot.css";
 import "./Page.css";
-var page = "_1j29czt0-3-7-1";
+var page = "_1j29czt0-3-8-0";
 export {
   page
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/Page.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './Page.css';\nexport var page = '_1j29czt0-3-7-1';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './Page.css';\nexport var page = '_1j29czt0-3-8-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,OAAO;",
   "names": []
 }

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 { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.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 intl = useIntl();\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  const shouldOpen =\n    action === 'open' || (action === 'toggle' && isPanelDismissed === true);\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n  const defaultDataDtProperties = `state:${shouldOpen ? 'expand' : 'collapse'}`;\n  const {\n    'data-dt-name': dataDtName = 'ExpandCollapse',\n    'data-dt-properties': dataDtProperties = defaultDataDtProperties,\n    ...remainingBehavioralTrackingProps\n  } = behavioralTrackingProps;\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  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      data-dt-name={dataDtName}\n      data-dt-properties={dataDtProperties}\n      {...remainingBehavioralTrackingProps}\n      {...restProps}\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": "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",
+  "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 { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\n\n/**\n * @public\n * @deprecated Deprecated along with the `Page` component and will be removed in a future release.\n */\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 * @deprecated The `Page.PanelControlButton` component is deprecated along with the `Page` component and will be removed in a future release.\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 intl = useIntl();\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  const shouldOpen =\n    action === 'open' || (action === 'toggle' && isPanelDismissed === true);\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n  const defaultDataDtProperties = `state:${shouldOpen ? 'expand' : 'collapse'}`;\n  const {\n    'data-dt-name': dataDtName = 'ExpandCollapse',\n    'data-dt-properties': dataDtProperties = defaultDataDtProperties,\n    ...remainingBehavioralTrackingProps\n  } = behavioralTrackingProps;\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  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      data-dt-name={dataDtName}\n      data-dt-properties={dataDtProperties}\n      {...remainingBehavioralTrackingProps}\n      {...restProps}\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": "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",
   "names": []
 }

package/esm/layouts/page/Sidebar.css

@@ -1,16 +1,16 @@
-._zdcge90-3-7-1 {
+._zdcge90-3-8-0 {
   grid-area: sidebar;
   justify-content: flex-end;
 }
-._zdcge91-3-7-1 {
+._zdcge91-3-8-0 {
   flex-shrink: 0;
   height: 100%;
   left: 0;
   position: relative;
   width: 0;
 }
-._zdcge93-3-7-1 {
-  --_zdcge92-3-7-1: 16px;
+._zdcge93-3-8-0 {
+  --_zdcge92-3-8-0: 16px;
   background-color: transparent;
   border-width: 0;
   cursor: pointer;
@@ -20,29 +20,35 @@
   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-7-1);
-  translate: calc(0px - var(--_zdcge92-3-7-1) * 2);
+  width: var(--_zdcge92-3-8-0);
+  translate: calc(0px - var(--_zdcge92-3-8-0) * 2);
   border-top-right-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1p91g301-3-7-1:is(:hover,:focus-within) ._zdcge93-3-7-1 {
+._1p91g301-3-8-0:is(:hover,:focus-within) ._zdcge93-3-8-0 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
-  translate: calc(0px - var(--_zdcge92-3-7-1) - var(--_zdcge92-3-7-1) / 2);
+  translate: calc(0px - var(--_zdcge92-3-8-0) - var(--_zdcge92-3-8-0) / 2);
 }
-._zdcge95-3-7-1 {
-  --_zdcge94-3-7-1: 24px;
+._1jgl8s50-3-8-0 ._zdcge93-3-8-0, ._1jgl8s50-3-8-0 ._zdcge93-3-8-0:hover, ._1jgl8s50-3-8-0 ._zdcge93-3-8-0:focus, ._1jgl8s50-3-8-0 ._1p91g301-3-8-0:is(:hover,:focus-within) ._zdcge93-3-8-0 {
+  border-top-right-radius: 0;
+  translate: calc(-1 * var(--_zdcge92-3-8-0));
+  box-shadow: none;
+}
+._zdcge95-3-8-0 {
+  --_zdcge94-3-8-0: 24px;
   position: absolute;
   top: var(--dt-spacings-size-20, 20px);
-  left: calc(0px - var(--_zdcge94-3-7-1) / 2 + 2px);
+  left: calc(0px - var(--_zdcge94-3-8-0) / 2 + 2px);
+  z-index: 1;
 }
-._zdcge96-3-7-1 {
-  width: var(--_zdcge94-3-7-1);
-  height: var(--_zdcge94-3-7-1);
+._zdcge96-3-8-0 {
+  width: var(--_zdcge94-3-8-0);
+  height: var(--_zdcge94-3-8-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-7-1 {
+._zdcge97-3-8-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 +56,70 @@
   transition-property: all;
   transition-timing-function: var(--dt-animations-hover-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._zdcge97-3-7-1:hover {
+._zdcge97-3-8-0:hover {
   opacity: 1;
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._zdcge97-3-7-1:focus {
+._zdcge97-3-8-0:focus-visible {
+  opacity: 1;
+}
+._1p91g301-3-8-0:hover ._zdcge97-3-8-0 {
+  opacity: 1;
+}
+._1jgl8s50-3-8-0 ._zdcge97-3-8-0 {
+  background-color: var(--dt-colors-background-base-default, #f9f9fa);
+  border: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
+  outline-color: transparent;
+  opacity: 0;
+}
+._1jgl8s50-3-8-0 ._zdcge97-3-8-0:hover {
+  background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
   opacity: 1;
 }
-._1p91g301-3-7-1:hover ._zdcge97-3-7-1 {
+._1jgl8s50-3-8-0 ._zdcge97-3-8-0:active {
+  background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
+}
+._1jgl8s50-3-8-0 ._zdcge97-3-8-0:focus-visible {
   opacity: 1;
 }
-._zdcge98-3-7-1 {
+._zdcge98-3-8-0 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._zdcge98-3-7-1:hover {
+._zdcge98-3-8-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-7-1._1p91g302-3-7-1 {
+._1jgl8s50-3-8-0 ._zdcge98-3-8-0 {
+  background-color: var(--dt-colors-background-base-default, #f9f9fa);
+  border: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
+}
+._1jgl8s50-3-8-0 ._zdcge98-3-8-0:not(:focus-visible) {
+  box-shadow: none;
+}
+._1jgl8s50-3-8-0 ._zdcge98-3-8-0:hover {
+  background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
+  outline-color: transparent;
+  box-shadow: none;
+}
+._1jgl8s50-3-8-0 ._zdcge98-3-8-0:active {
+  background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
+  box-shadow: none;
+}
+._zdcge99-3-8-0._1p91g302-3-8-0 {
   width: var(--dt-spacings-size-16, 16px);
+  background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
+}
+._1jgl8s50-3-8-0 ._zdcge99-3-8-0._1p91g302-3-8-0 {
+  background-color: var(--dt-colors-background-base-default, #f9f9fa);
+  border-right: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-subdued, #e4e5eb);
+}
+._1jgl8s50-3-8-0 ._zdcge99-3-8-0._1p91g302-3-8-0:hover {
+  border-color: var(--dt-colors-border-neutral-subdued-hover, #d0d1dc);
+}
+._1jgl8s50-3-8-0 ._zdcge99-3-8-0._1p91g302-3-8-0:active {
+  border-color: var(--dt-colors-border-neutral-subdued-active, #c6c7d5);
 }
-._zdcge9a-3-7-1 {
+._zdcge9a-3-8-0 {
   display: flex;
   gap: var(--dt-spacings-size-4, 4px);
   padding-inline: var(--dt-spacings-size-8, 8px);

package/esm/layouts/page/Sidebar.js

@@ -21,6 +21,7 @@ import { useWatchBreakpoint } from "./useWatchBreakpoint.js";
 import { Button } from "../../buttons/button/Button.js";
 import { useId } from "../../core/hooks/useId.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
+import { isVisualRefreshEnabled } from "../../core/utils/is-visual-refresh-enabled.js";
 import { Drawer } from "../../overlays/drawer/Drawer.js";
 import { Tooltip } from "../../overlays/tooltip/Tooltip.js";
 const Sidebar = forwardRef(
@@ -182,6 +183,7 @@ const IntegratedControls = ({
       {
         className: styles.hint,
         type: "button",
+        tabIndex: isVisualRefreshEnabled() ? -1 : void 0,
         onClick: () => {
           onClick({ value: false, reason: "panel hint" });
           setIsTooltipOpen(false);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/Sidebar.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n  type AriaAttributes,\n  type HTMLAttributes,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  ChevronSmallLeftDoubleIcon,\n  ChevronSmallRightDoubleIcon,\n  XmarkIcon,\n} from '@dynatrace/strato-icons';\n\nimport { useKeepMounted } from './keepMounted.js';\nimport { usePageContext, useRegisterPagePanel } from './page-context.js';\nimport type {\n  ControlledPagePanelProps,\n  PagePanelSizes,\n  PanelName,\n  UncontrolledPagePanelProps,\n} from './page-types.js';\nimport type { PanelSize } from './panel-types.js';\nimport * as panelStyles from './panel.sty.js';\nimport { Panel } from './Panel.js';\nimport * as styles from './Sidebar.sty.js';\nimport { useWatchBreakpoint } from './useWatchBreakpoint.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { Drawer } from '../../overlays/drawer/Drawer.js';\nimport { Tooltip } from '../../overlays/tooltip/Tooltip.js';\n\n/** @public */\nexport interface SidebarOwnProps\n  extends WithChildren,\n    Omit<HTMLAttributes<HTMLDivElement>, 'onResize' | keyof StylingProps>,\n    StylingProps,\n    DataTestId {\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  /**\n   * The minimum width of the sidebar in pixels.\n   * @defaultValue 200\n   */\n  minWidth?: number;\n  /**\n   * Screen size below which the overlay Drawer will be shown.\n   * @defaultValue 640\n   */\n  breakpoint?: number;\n  /**\n   * If the sidebar's width can be resized (by drag and drop)\n   * @defaultValue true\n   */\n  resizable?: boolean;\n  /**\n   * Defines if the Sidebar content will be kept in the DOM, even if the content\n   * is not shown to the user.\n   * @defaultValue false\n   */\n  keepMounted?: boolean;\n  /**\n   * Notifies the user if an action happened that should change the dismissed state\n   * like clicking on the backdrop on mobile.\n   * The returned state is only a recommendation and might differ from what the actual\n   * state of the panel should be.\n   */\n  onDismissChange?: (state: boolean, reason: string) => void;\n  /**\n   * Opt-in to the new panel controls.\n   * @defaultValue false\n   **/\n  integratedControls?: boolean;\n  /**\n   * Callback triggered after resizing is finished with the new panel sizes of\n   * all existing panels and the newly applied panel width (in px).\n   */\n  onResize?: (sizes: PagePanelSizes, width: number) => void;\n}\n\n/** @public */\nexport interface ControlledSidebarProps\n  extends SidebarOwnProps,\n    ControlledPagePanelProps {}\n\n/** @public */\nexport interface UncontrolledSidebarProps\n  extends SidebarOwnProps,\n    UncontrolledPagePanelProps {}\n\n/** @public */\nexport type SidebarProps = ControlledSidebarProps | UncontrolledSidebarProps;\n\n/**\n * The `Sidebar` component is used inside the `Page` component for displaying content in the corresponding panel.\n * @public\n */\nexport const Sidebar = forwardRef<HTMLDivElement, SidebarProps>(\n  (props, forwardedRef) => {\n    const {\n      breakpoint = 640,\n      className,\n      defaultDismissed,\n      dismissed,\n      minWidth = 200,\n      onDismissChange,\n      onResize,\n      preferredWidth = '15%',\n      style,\n      resizable = true,\n      integratedControls,\n      children,\n      keepMounted = false,\n      ...restProps\n    }: SidebarProps = props;\n\n    const panelId = useId();\n    const panelName: PanelName = 'sidebar';\n    const panelRef = useRef<HTMLDivElement>(null);\n    const mergedRefs = useMergeRefs([panelRef, forwardedRef]);\n    const intl = useIntl();\n\n    const page = usePageContext();\n\n    const panel = useRegisterPagePanel(panelName, {\n      ref: panelRef,\n      isControlled: dismissed !== undefined,\n      isDismissed: dismissed ?? props.defaultDismissed,\n      minWidth,\n      breakpoint,\n    });\n\n    const setIsDismissedWithReason = useCallback(\n      (value: boolean, reason: string) => {\n        if (value === true) {\n          page.dismissPanel(panelName);\n        } else {\n          page.expandPanel(panelName);\n        }\n        onDismissChange?.(value, reason);\n      },\n      [onDismissChange, page, panelName],\n    );\n\n    const aboveBreakpoint = useWatchBreakpoint({\n      breakpoint,\n      callback: setIsDismissedWithReason,\n    });\n\n    const panelChildren = useKeepMounted({ children, keepMounted });\n\n    if (!panel) {\n      return null;\n    }\n\n    const label = intl.formatMessage({\n      defaultMessage: 'Sidebar',\n      id: '9RcckxxccNTcNVf9',\n    });\n\n    const isDisplayedAsDismissed = !aboveBreakpoint || panel.isDismissed;\n\n    return (\n      <Panel\n        name={panelName}\n        id={panelId}\n        className={clsx(\n          isDisplayedAsDismissed && panelStyles.dismissedPanel,\n          integratedControls && styles.integratedControlsPanel,\n          styles.sidebar,\n        )}\n        aria-label={label}\n      >\n        {isDisplayedAsDismissed ? <div className={panelStyles.gap} /> : null}\n\n        <Panel.Content\n          {...restProps}\n          containerSize={page.containerSize}\n          ref={mergedRefs}\n          label={label}\n          onResize={(width) => onResize?.(page.getPanelSizes(), width)}\n          preferredWidth={preferredWidth}\n          minWidth={minWidth}\n          handle={resizable === true ? 'right' : 'hidden'}\n          isDismissed={isDisplayedAsDismissed}\n          className={className}\n          style={style}\n        >\n          {panelChildren}\n        </Panel.Content>\n\n        {integratedControls ? (\n          <IntegratedControls\n            dismissed={isDisplayedAsDismissed}\n            onClick={({ value, reason }) => {\n              setIsDismissedWithReason(value, reason);\n            }}\n            panelId={panelId}\n            label={label}\n          />\n        ) : null}\n\n        {!aboveBreakpoint ? (\n          <Drawer\n            className={panelStyles.drawer}\n            isDismissed={panel.isDismissed}\n            onDismiss={setIsDismissedWithReason}\n            placement=\"left\"\n            width=\"wide\"\n          >\n            {integratedControls ? (\n              <div className={styles.integratedControlsDrawerHeader}>\n                <Button\n                  style={{ marginLeft: 'auto' }}\n                  onClick={() =>\n                    setIsDismissedWithReason(true, 'drawer button')\n                  }\n                >\n                  <Button.Prefix>\n                    <XmarkIcon />\n                  </Button.Prefix>\n                </Button>\n              </div>\n            ) : null}\n            <div {...restProps} className={panelStyles.drawerContent}>\n              {children}\n            </div>\n          </Drawer>\n        ) : null}\n      </Panel>\n    );\n  },\n);\n(Sidebar as typeof Sidebar & { displayName: string }).displayName =\n  'Page.Sidebar';\n\n/** @internal */\nexport interface IntegratedControlsProps extends AriaAttributes {\n  dismissed: boolean;\n  onClick: ({ value, reason }: { value: boolean; reason: string }) => void;\n  panelId: string;\n  label: string;\n}\n\n/** @internal */\nexport const IntegratedControls = ({\n  dismissed,\n  onClick,\n  panelId,\n  label,\n}: IntegratedControlsProps) => {\n  const intl = useIntl();\n\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  // we need to control the tooltip state as there is a bug with popperjs, where subtree modification of the tooltip target breaks `onMouseLeave` detection.\n  // For example when using a ternary to conditionally render two different icon components inside the button.\n  // (i've tried using `@floating-ui/react` but it also doesnt handle this case correctly)\n  const [isTooltipOpen, setIsTooltipOpen] = useState(false);\n\n  const labelText = intl.formatMessage(\n    dismissed\n      ? { defaultMessage: 'Expand {label} panel', id: 'TWLhm3I5du5FpaM+' }\n      : { defaultMessage: 'Dismiss {label} panel', id: 'SWpMc7FyaE8Uxhzn' },\n    { label },\n  );\n\n  const buttonProps = dismissed\n    ? ({\n        'aria-expanded': 'false',\n        className: styles.expandButton,\n        onClick: () => {\n          onClick({ value: false, reason: 'expand button' });\n          setIsTooltipOpen(false);\n        },\n        variant: 'emphasized',\n      } as const)\n    : ({\n        'aria-expanded': 'true',\n        className: styles.dismissButton,\n        onClick: () => {\n          onClick({ value: true, reason: 'dismiss button' });\n          setIsTooltipOpen(false);\n        },\n        variant: 'default',\n      } as const);\n\n  return (\n    <div className={styles.integratedControls}>\n      {dismissed ? (\n        <button\n          className={styles.hint}\n          type=\"button\"\n          onClick={() => {\n            onClick({ value: false, reason: 'panel hint' });\n            setIsTooltipOpen(false);\n            buttonRef.current?.focus();\n          }}\n          aria-controls={panelId}\n          aria-expanded={dismissed ? 'false' : 'true'}\n          aria-label={labelText}\n        />\n      ) : null}\n\n      <div className={styles.buttonContainer}>\n        <Tooltip\n          text={labelText}\n          open={isTooltipOpen}\n          onOpenChange={setIsTooltipOpen}\n        >\n          <Button\n            {...buttonProps}\n            ref={buttonRef}\n            aria-controls={panelId}\n            aria-label={labelText}\n            size=\"condensed\"\n          >\n            <Button.Prefix>\n              {dismissed ? (\n                <ChevronSmallRightDoubleIcon />\n              ) : (\n                <ChevronSmallLeftDoubleIcon />\n              )}\n            </Button.Prefix>\n          </Button>\n        </Tooltip>\n      </div>\n    </div>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n  type AriaAttributes,\n  type HTMLAttributes,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  ChevronSmallLeftDoubleIcon,\n  ChevronSmallRightDoubleIcon,\n  XmarkIcon,\n} from '@dynatrace/strato-icons';\n\nimport { useKeepMounted } from './keepMounted.js';\nimport { usePageContext, useRegisterPagePanel } from './page-context.js';\nimport type {\n  ControlledPagePanelProps,\n  PagePanelSizes,\n  PanelName,\n  UncontrolledPagePanelProps,\n} from './page-types.js';\nimport type { PanelSize } from './panel-types.js';\nimport * as panelStyles from './panel.sty.js';\nimport { Panel } from './Panel.js';\nimport * as styles from './Sidebar.sty.js';\nimport { useWatchBreakpoint } from './useWatchBreakpoint.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { isVisualRefreshEnabled } from '../../core/utils/is-visual-refresh-enabled.js';\nimport { Drawer } from '../../overlays/drawer/Drawer.js';\nimport { Tooltip } from '../../overlays/tooltip/Tooltip.js';\n\n/**\n * @public\n * @deprecated Deprecated along with the `Page` component. Please use `PageLayout.Sidebar` instead.\n */\nexport interface SidebarOwnProps\n  extends WithChildren,\n    Omit<HTMLAttributes<HTMLDivElement>, 'onResize' | keyof StylingProps>,\n    StylingProps,\n    DataTestId {\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  /**\n   * The minimum width of the sidebar in pixels.\n   * @defaultValue 200\n   */\n  minWidth?: number;\n  /**\n   * Screen size below which the overlay Drawer will be shown.\n   * @defaultValue 640\n   */\n  breakpoint?: number;\n  /**\n   * If the sidebar's width can be resized (by drag and drop)\n   * @defaultValue true\n   */\n  resizable?: boolean;\n  /**\n   * Defines if the Sidebar content will be kept in the DOM, even if the content\n   * is not shown to the user.\n   * @defaultValue false\n   */\n  keepMounted?: boolean;\n  /**\n   * Notifies the user if an action happened that should change the dismissed state\n   * like clicking on the backdrop on mobile.\n   * The returned state is only a recommendation and might differ from what the actual\n   * state of the panel should be.\n   */\n  onDismissChange?: (state: boolean, reason: string) => void;\n  /**\n   * Opt-in to the new panel controls.\n   * @defaultValue false\n   **/\n  integratedControls?: boolean;\n  /**\n   * Callback triggered after resizing is finished with the new panel sizes of\n   * all existing panels and the newly applied panel width (in px).\n   */\n  onResize?: (sizes: PagePanelSizes, width: number) => void;\n}\n\n/**\n * @public\n * @deprecated Deprecated along with the `Page` component. Please use `PageLayout.Sidebar` instead.\n */\nexport interface ControlledSidebarProps\n  extends SidebarOwnProps,\n    ControlledPagePanelProps {}\n\n/**\n * @public\n * @deprecated Deprecated along with the `Page` component. Please use `PageLayout.Sidebar` instead.\n */\nexport interface UncontrolledSidebarProps\n  extends SidebarOwnProps,\n    UncontrolledPagePanelProps {}\n\n/**\n * @public\n * @deprecated Deprecated along with the `Page` component. Please use `PageLayout.Sidebar` instead.\n */\nexport type SidebarProps = ControlledSidebarProps | UncontrolledSidebarProps;\n\n/**\n * The `Sidebar` component is used inside the `Page` component for displaying content in the corresponding panel.\n * @public\n * @deprecated The `Page.Sidebar` component is deprecated. Please use `PageLayout.Sidebar` instead.\n */\nexport const Sidebar = forwardRef<HTMLDivElement, SidebarProps>(\n  (props, forwardedRef) => {\n    const {\n      breakpoint = 640,\n      className,\n      defaultDismissed,\n      dismissed,\n      minWidth = 200,\n      onDismissChange,\n      onResize,\n      preferredWidth = '15%',\n      style,\n      resizable = true,\n      integratedControls,\n      children,\n      keepMounted = false,\n      ...restProps\n    }: SidebarProps = props;\n\n    const panelId = useId();\n    const panelName: PanelName = 'sidebar';\n    const panelRef = useRef<HTMLDivElement>(null);\n    const mergedRefs = useMergeRefs([panelRef, forwardedRef]);\n    const intl = useIntl();\n\n    const page = usePageContext();\n\n    const panel = useRegisterPagePanel(panelName, {\n      ref: panelRef,\n      isControlled: dismissed !== undefined,\n      isDismissed: dismissed ?? props.defaultDismissed,\n      minWidth,\n      breakpoint,\n    });\n\n    const setIsDismissedWithReason = useCallback(\n      (value: boolean, reason: string) => {\n        if (value === true) {\n          page.dismissPanel(panelName);\n        } else {\n          page.expandPanel(panelName);\n        }\n        onDismissChange?.(value, reason);\n      },\n      [onDismissChange, page, panelName],\n    );\n\n    const aboveBreakpoint = useWatchBreakpoint({\n      breakpoint,\n      callback: setIsDismissedWithReason,\n    });\n\n    const panelChildren = useKeepMounted({ children, keepMounted });\n\n    if (!panel) {\n      return null;\n    }\n\n    const label = intl.formatMessage({\n      defaultMessage: 'Sidebar',\n      id: '9RcckxxccNTcNVf9',\n    });\n\n    const isDisplayedAsDismissed = !aboveBreakpoint || panel.isDismissed;\n\n    return (\n      <Panel\n        name={panelName}\n        id={panelId}\n        className={clsx(\n          isDisplayedAsDismissed && panelStyles.dismissedPanel,\n          integratedControls && styles.integratedControlsPanel,\n          styles.sidebar,\n        )}\n        aria-label={label}\n      >\n        {isDisplayedAsDismissed ? <div className={panelStyles.gap} /> : null}\n\n        <Panel.Content\n          {...restProps}\n          containerSize={page.containerSize}\n          ref={mergedRefs}\n          label={label}\n          onResize={(width) => onResize?.(page.getPanelSizes(), width)}\n          preferredWidth={preferredWidth}\n          minWidth={minWidth}\n          handle={resizable === true ? 'right' : 'hidden'}\n          isDismissed={isDisplayedAsDismissed}\n          className={className}\n          style={style}\n        >\n          {panelChildren}\n        </Panel.Content>\n\n        {integratedControls ? (\n          <IntegratedControls\n            dismissed={isDisplayedAsDismissed}\n            onClick={({ value, reason }) => {\n              setIsDismissedWithReason(value, reason);\n            }}\n            panelId={panelId}\n            label={label}\n          />\n        ) : null}\n\n        {!aboveBreakpoint ? (\n          <Drawer\n            className={panelStyles.drawer}\n            isDismissed={panel.isDismissed}\n            onDismiss={setIsDismissedWithReason}\n            placement=\"left\"\n            width=\"wide\"\n          >\n            {integratedControls ? (\n              <div className={styles.integratedControlsDrawerHeader}>\n                <Button\n                  style={{ marginLeft: 'auto' }}\n                  onClick={() =>\n                    setIsDismissedWithReason(true, 'drawer button')\n                  }\n                >\n                  <Button.Prefix>\n                    <XmarkIcon />\n                  </Button.Prefix>\n                </Button>\n              </div>\n            ) : null}\n            <div {...restProps} className={panelStyles.drawerContent}>\n              {children}\n            </div>\n          </Drawer>\n        ) : null}\n      </Panel>\n    );\n  },\n);\n(Sidebar as typeof Sidebar & { displayName: string }).displayName =\n  'Page.Sidebar';\n\n/** @internal */\nexport interface IntegratedControlsProps extends AriaAttributes {\n  dismissed: boolean;\n  onClick: ({ value, reason }: { value: boolean; reason: string }) => void;\n  panelId: string;\n  label: string;\n}\n\n/** @internal */\nexport const IntegratedControls = ({\n  dismissed,\n  onClick,\n  panelId,\n  label,\n}: IntegratedControlsProps) => {\n  const intl = useIntl();\n\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  // we need to control the tooltip state as there is a bug with popperjs, where subtree modification of the tooltip target breaks `onMouseLeave` detection.\n  // For example when using a ternary to conditionally render two different icon components inside the button.\n  // (i've tried using `@floating-ui/react` but it also doesnt handle this case correctly)\n  const [isTooltipOpen, setIsTooltipOpen] = useState(false);\n\n  const labelText = intl.formatMessage(\n    dismissed\n      ? { defaultMessage: 'Expand {label} panel', id: 'TWLhm3I5du5FpaM+' }\n      : { defaultMessage: 'Dismiss {label} panel', id: 'SWpMc7FyaE8Uxhzn' },\n    { label },\n  );\n\n  const buttonProps = dismissed\n    ? ({\n        'aria-expanded': 'false',\n        className: styles.expandButton,\n        onClick: () => {\n          onClick({ value: false, reason: 'expand button' });\n          setIsTooltipOpen(false);\n        },\n        variant: 'emphasized',\n      } as const)\n    : ({\n        'aria-expanded': 'true',\n        className: styles.dismissButton,\n        onClick: () => {\n          onClick({ value: true, reason: 'dismiss button' });\n          setIsTooltipOpen(false);\n        },\n        variant: 'default',\n      } as const);\n\n  return (\n    <div className={styles.integratedControls}>\n      {dismissed ? (\n        <button\n          className={styles.hint}\n          type=\"button\"\n          tabIndex={isVisualRefreshEnabled() ? -1 : undefined}\n          onClick={() => {\n            onClick({ value: false, reason: 'panel hint' });\n            setIsTooltipOpen(false);\n            buttonRef.current?.focus();\n          }}\n          aria-controls={panelId}\n          aria-expanded={dismissed ? 'false' : 'true'}\n          aria-label={labelText}\n        />\n      ) : null}\n\n      <div className={styles.buttonContainer}>\n        <Tooltip\n          text={labelText}\n          open={isTooltipOpen}\n          onOpenChange={setIsTooltipOpen}\n        >\n          <Button\n            {...buttonProps}\n            ref={buttonRef}\n            aria-controls={panelId}\n            aria-label={labelText}\n            size=\"condensed\"\n          >\n            <Button.Prefix>\n              {dismissed ? (\n                <ChevronSmallRightDoubleIcon />\n              ) : (\n                <ChevronSmallLeftDoubleIcon />\n              )}\n            </Button.Prefix>\n          </Button>\n        </Tooltip>\n      </div>\n    </div>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -2,14 +2,14 @@ import "../../core/components/app-root/AppRoot.css";
 import "./panel.css";
 import "../../core/styles/focusRingStatic.css";
 import "./Sidebar.css";
-var buttonContainer = "_zdcge95-3-7-1";
-var dismissButton = "_zdcge97-3-7-1 _zdcge96-3-7-1";
-var expandButton = "_zdcge98-3-7-1 _zdcge96-3-7-1";
-var hint = "_zdcge93-3-7-1 _z0fq9b4-3-7-1 _z0fq9bd-3-7-1 _z0fq9b6-3-7-1 _z0fq9bc-3-7-1";
-var integratedControls = "_zdcge91-3-7-1";
-var integratedControlsDrawerHeader = "_zdcge9a-3-7-1";
-var integratedControlsPanel = "_zdcge99-3-7-1";
-var sidebar = "_zdcge90-3-7-1";
+var buttonContainer = "_zdcge95-3-8-0";
+var dismissButton = "_zdcge97-3-8-0 _zdcge96-3-8-0";
+var expandButton = "_zdcge98-3-8-0 _zdcge96-3-8-0";
+var hint = "_zdcge93-3-8-0 _z0fq9b4-3-8-0 _z0fq9bd-3-8-0 _z0fq9b6-3-8-0 _z0fq9bc-3-8-0";
+var integratedControls = "_zdcge91-3-8-0";
+var integratedControlsDrawerHeader = "_zdcge9a-3-8-0";
+var integratedControlsPanel = "_zdcge99-3-8-0";
+var sidebar = "_zdcge90-3-8-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 '../../core/components/app-root/AppRoot.css';\nimport './panel.css';\nimport '../../core/styles/focusRingStatic.css';\nimport './Sidebar.css';\nexport var buttonContainer = '_zdcge95-3-7-1';\nexport var dismissButton = '_zdcge97-3-7-1 _zdcge96-3-7-1';\nexport var expandButton = '_zdcge98-3-7-1 _zdcge96-3-7-1';\nexport var hint = '_zdcge93-3-7-1 _z0fq9b4-3-7-1 _z0fq9bd-3-7-1 _z0fq9b6-3-7-1 _z0fq9bc-3-7-1';\nexport var integratedControls = '_zdcge91-3-7-1';\nexport var integratedControlsDrawerHeader = '_zdcge9a-3-7-1';\nexport var integratedControlsPanel = '_zdcge99-3-7-1';\nexport var sidebar = '_zdcge90-3-7-1';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './panel.css';\nimport '../../core/styles/focusRingStatic.css';\nimport './Sidebar.css';\nexport var buttonContainer = '_zdcge95-3-8-0';\nexport var dismissButton = '_zdcge97-3-8-0 _zdcge96-3-8-0';\nexport var expandButton = '_zdcge98-3-8-0 _zdcge96-3-8-0';\nexport var hint = '_zdcge93-3-8-0 _z0fq9b4-3-8-0 _z0fq9bd-3-8-0 _z0fq9b6-3-8-0 _z0fq9bc-3-8-0';\nexport var integratedControls = '_zdcge91-3-8-0';\nexport var integratedControlsDrawerHeader = '_zdcge9a-3-8-0';\nexport var integratedControlsPanel = '_zdcge99-3-8-0';\nexport var sidebar = '_zdcge90-3-8-0';"],
   "mappings": "AAAA,OAAO;AACP,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/page-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/page-types.ts"],
-  "sourcesContent": ["/**\n * Array of panel names rendered in the page component.\n * @public\n */\nexport const pagePanels = ['sidebar', 'main', 'details'] as const;\n\n/** @public */\nexport type PanelName = (typeof pagePanels)[number];\n\n/**\n * An object of panel keys and the panel's current size in all available units.\n * @public\n */\nexport type PagePanelSizes = Record<string, { [key in 'px' | '%']: number }>;\n\n/**\n * Page panels that can be dismissed.\n * @public\n * @deprecated This type is no longer used and will be removed in a future release.\n */\nexport type DismissiblePagePanels = Extract<\n  (typeof pagePanels)[number],\n  'sidebar' | 'details'\n>;\n\n/** @public */\nexport type ControlledPagePanelProps = {\n  /** If the panel is opened. */\n  dismissed: boolean;\n  /** If the panel is dismissed by default. */\n  defaultDismissed?: never;\n};\n\n/** @public */\nexport type UncontrolledPagePanelProps = {\n  /** If the panel is opened. */\n  dismissed?: never;\n  /** If the panel is dismissed by default. */\n  defaultDismissed?: boolean;\n};\n\n/**\n * @public\n * @deprecated Use `ControlledPagePanelProps` or `UncontrolledPagePanelProps` instead.\n **/\nexport type PagePanelProps =\n  | ControlledPagePanelProps\n  | UncontrolledPagePanelProps;\n"],
-  "mappings": "AAIO,MAAM,aAAa,CAAC,WAAW,QAAQ,SAAS;",
+  "sourcesContent": ["/**\n * Array of panel names rendered in the page component.\n * @public\n * @deprecated Deprecated along with the `Page` component and will be removed in a future release.\n */\nexport const pagePanels = ['sidebar', 'main', 'details'] as const;\n\n/**\n * @public\n * @deprecated Deprecated along with the `Page` component and will be removed in a future release.\n */\nexport type PanelName = (typeof pagePanels)[number];\n\n/**\n * An object of panel keys and the panel's current size in all available units.\n * @public\n * @deprecated Deprecated along with the `Page` component and will be removed in a future release.\n */\nexport type PagePanelSizes = Record<string, { [key in 'px' | '%']: number }>;\n\n/**\n * Page panels that can be dismissed.\n * @public\n * @deprecated This type is no longer used and will be removed in a future release.\n */\nexport type DismissiblePagePanels = Extract<\n  (typeof pagePanels)[number],\n  'sidebar' | 'details'\n>;\n\n/**\n * @public\n * @deprecated Deprecated along with the `Page` component and will be removed in a future release.\n */\nexport type ControlledPagePanelProps = {\n  /** If the panel is opened. */\n  dismissed: boolean;\n  /** If the panel is dismissed by default. */\n  defaultDismissed?: never;\n};\n\n/**\n * @public\n * @deprecated Deprecated along with the `Page` component and will be removed in a future release.\n */\nexport type UncontrolledPagePanelProps = {\n  /** If the panel is opened. */\n  dismissed?: never;\n  /** If the panel is dismissed by default. */\n  defaultDismissed?: boolean;\n};\n\n/**\n * @public\n * @deprecated Use `ControlledPagePanelProps` or `UncontrolledPagePanelProps` instead.\n **/\nexport type PagePanelProps =\n  | ControlledPagePanelProps\n  | UncontrolledPagePanelProps;\n"],
+  "mappings": "AAKO,MAAM,aAAa,CAAC,WAAW,QAAQ,SAAS;",
   "names": []
 }

package/esm/layouts/page/panel-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/panel-types.ts"],
-  "sourcesContent": ["/** @internal */\nexport type Direction = 'ltr' | 'rtl';\n\n/**\n * Array of supported units to specify the size of a panel.\n * @public\n */\nexport const panelSizeUnits = ['px', 'fr', '%', 'vw', 'rem'] as const;\n/**\n * The supported units to specify the size of a panel.\n * @public\n */\nexport type PanelSizeUnit = (typeof panelSizeUnits)[number];\n\n/**\n * The size of a panel.\n * @public\n */\nexport type PanelSize = number | `${number}${PanelSizeUnit}`;\n"],
-  "mappings": "AAOO,MAAM,iBAAiB,CAAC,MAAM,MAAM,KAAK,MAAM,KAAK;",
+  "sourcesContent": ["/** @internal */\nexport type Direction = 'ltr' | 'rtl';\n\n/**\n * Array of supported units to specify the size of a panel.\n * @public\n * @deprecated Deprecated along with the `Page` component and will be removed in a future release.\n */\nexport const panelSizeUnits = ['px', 'fr', '%', 'vw', 'rem'] as const;\n/**\n * The supported units to specify the size of a panel.\n * @public\n * @deprecated Deprecated along with the `Page` component and will be removed in a future release.\n */\nexport type PanelSizeUnit = (typeof panelSizeUnits)[number];\n\n/**\n * The size of a panel.\n * @public\n * @deprecated Deprecated along with the `Page` component and will be removed in a future release.\n */\nexport type PanelSize = number | `${number}${PanelSizeUnit}`;\n"],
+  "mappings": "AAQO,MAAM,iBAAiB,CAAC,MAAM,MAAM,KAAK,MAAM,KAAK;",
   "names": []
 }

package/esm/layouts/page/panel.css

@@ -1,37 +1,37 @@
-._1p91g301-3-7-1 {
+._1p91g301-3-8-0 {
   box-sizing: border-box;
   display: flex;
   max-width: 100%;
 }
-._1p91g302-3-7-1 {
+._1p91g302-3-8-0 {
   width: 0;
   position: relative;
 }
-._1p91g303-3-7-1 {
+._1p91g303-3-8-0 {
   flex-shrink: 0;
   position: relative;
   width: 8px;
 }
-._1p91g304-3-7-1 {
+._1p91g304-3-8-0 {
   box-sizing: border-box;
   padding: 0;
 }
-._1p91g305-3-7-1 {
+._1p91g305-3-8-0 {
   box-sizing: border-box;
   padding: var(--dt-spacings-size-16, 16px);
   height: 100%;
 }
-._1p91g306-3-7-1 {
+._1p91g306-3-8-0 {
   line-height: 0;
 }
-._1p91g307-3-7-1 {
+._1p91g307-3-8-0 {
   box-sizing: border-box;
   flex-grow: 1;
   overflow-y: auto;
   padding: var(--dt-spacings-size-16, 16px);
   position: relative;
 }
-._1p91g308-3-7-1 {
+._1p91g308-3-8-0 {
   flex-shrink: 0;
   width: var(--dt-spacings-size-8, 8px);
   position: relative;
@@ -40,7 +40,7 @@
   height: 100%;
   justify-content: center;
 }
-._1jgl8s50-3-7-1 ._1p91g308-3-7-1 {
+._1jgl8s50-3-8-0 ._1p91g308-3-8-0 {
   border-radius: 0;
   height: 100%;
   width: var(--dt-spacings-size-8, 8px);
@@ -50,7 +50,7 @@
   margin-inline: calc(var(--dt-spacings-size-8, 8px) / -2);
   z-index: 1;
 }
-._1jgl8s50-3-7-1 ._1p91g308-3-7-1::before {
+._1jgl8s50-3-8-0 ._1p91g308-3-8-0::before {
   content: "";
   position: absolute;
   top: 0;
@@ -61,13 +61,13 @@
   background-color: var(--dt-colors-border-neutral-subdued, #e4e5eb);
   pointer-events: none;
 }
-._1jgl8s50-3-7-1 ._1p91g308-3-7-1:hover::before {
+._1jgl8s50-3-8-0 ._1p91g308-3-8-0:hover::before {
   background-color: var(--dt-colors-border-neutral-subdued-hover, #d0d1dc);
 }
-._1jgl8s50-3-7-1 ._1p91g308-3-7-1:active::before {
+._1jgl8s50-3-8-0 ._1p91g308-3-8-0:active::before {
   background-color: var(--dt-colors-border-neutral-subdued-active, #c6c7d5);
 }
-._1p91g309-3-7-1 {
+._1p91g309-3-8-0 {
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   border: none;
   border-radius: var(--dt-borders-radius-field-default, 6px);
@@ -80,17 +80,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-7-1:focus-visible {
+._1p91g309-3-8-0:focus-visible {
   width: 100%;
 }
-._1p91g309-3-7-1:hover._1p91g309-3-7-1:focus-visible {
+._1p91g309-3-8-0:hover._1p91g309-3-8-0:focus-visible {
   width: 2px;
 }
-._1p91g309-3-7-1:focus-visible, ._1p91g309-3-7-1:hover {
+._1p91g309-3-8-0:focus-visible, ._1p91g309-3-8-0:hover {
   height: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }
-._1p91g309-3-7-1:after {
+._1p91g309-3-8-0:after {
   content: "";
   display: block;
   height: 100%;
@@ -101,11 +101,11 @@
   user-select: none;
   width: 100%;
 }
-._1jgl8s50-3-7-1 ._1p91g309-3-7-1 {
+._1jgl8s50-3-8-0 ._1p91g309-3-8-0 {
   width: 0;
   cursor: ew-resize;
 }
-._1jgl8s50-3-7-1 ._1p91g308-3-7-1:has(._1p91g309-3-7-1:focus-visible)::before {
+._1jgl8s50-3-8-0 ._1p91g308-3-8-0:has(._1p91g309-3-8-0:focus-visible)::before {
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   width: var(--dt-borders-width-emphasized, 2px);
 }

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

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