@dynatrace/strato-components 3.12.2 → 3.13.0

package/esm/layouts/page/Header.css

@@ -1,9 +1,9 @@
-._150dima0-3-12-2 {
+._150dima0-3-13-0 {
   grid-area: header;
   width: 100%;
   padding: var(--dt-spacings-size-8, 8px);
   box-sizing: border-box;
-  ._1jgl8s50-3-12-2 & {
+  ._1jgl8s50-3-13-0 & {
     border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-subdued, #e4e5eb);
   }
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/Header.tsx"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-deprecated */\nimport clsx from 'clsx';\nimport type { HTMLAttributes } from 'react';\n\nimport * as styles from './Header.sty.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';\n\n/**\n * @public\n * @deprecated Deprecated along with the `Page` component. Please use `PageLayout.Header` instead.\n */\nexport interface HeaderProps\n  extends WithChildren,\n    Omit<HTMLAttributes<HTMLDivElement>, keyof StylingProps>,\n    StylingProps,\n    DataTestId {}\n\n/**\n * The `Header` component is used inside the `Page` component for displaying content at the very top of the page.\n * @public\n * @deprecated The `Page.Header` component is deprecated. Please use `PageLayout.Header` instead.\n */\nexport const Header = (props: HeaderProps) => {\n  const {\n    children,\n    className,\n    style,\n    'data-testid': dataTestId,\n    ...remainingProps\n  }: HeaderProps = props;\n\n  return (\n    <div\n      className={clsx(className, styles.header)}\n      style={style}\n      data-testid={dataTestId}\n      {...remainingProps}\n    >\n      {children}\n    </div>\n  );\n};\nHeader.displayName = 'Page.Header';\n"],
-  "mappings": "AAkCI;AAjCJ,OAAO,UAAU;AAGjB,YAAY,YAAY;AAoBjB,MAAM,SAAS,CAAC,UAAuB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAiB;AAEjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,KAAK,WAAW,OAAO,MAAM;AAAA,MACxC;AAAA,MACA,eAAa;AAAA,MACZ,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AACA,OAAO,cAAc;",
+  "sourcesContent": ["/* oxlint-disable typescript/no-deprecated */\nimport clsx from 'clsx';\nimport type { HTMLAttributes } from 'react';\n\nimport * as styles from './Header.sty.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';\n\n/**\n * @public\n * @deprecated Deprecated along with the `Page` component. Please use `PageLayout.Header` instead.\n */\nexport interface HeaderProps\n  extends\n    WithChildren,\n    Omit<HTMLAttributes<HTMLDivElement>, keyof StylingProps>,\n    StylingProps,\n    DataTestId {}\n\n/**\n * The `Header` component is used inside the `Page` component for displaying content at the very top of the page.\n * @public\n * @deprecated The `Page.Header` component is deprecated. Please use `PageLayout.Header` instead.\n */\nexport const Header = (props: HeaderProps) => {\n  const {\n    children,\n    className,\n    style,\n    'data-testid': dataTestId,\n    ...remainingProps\n  }: HeaderProps = props;\n\n  return (\n    <div\n      className={clsx(className, styles.header)}\n      style={style}\n      data-testid={dataTestId}\n      {...remainingProps}\n    >\n      {children}\n    </div>\n  );\n};\nHeader.displayName = 'Page.Header';\n"],
+  "mappings": "AAmCI;AAlCJ,OAAO,UAAU;AAGjB,YAAY,YAAY;AAqBjB,MAAM,SAAS,CAAC,UAAuB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAiB;AAEjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,KAAK,WAAW,OAAO,MAAM;AAAA,MACxC;AAAA,MACA,eAAa;AAAA,MACZ,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AACA,OAAO,cAAc;",
   "names": []
 }

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

@@ -1,6 +1,6 @@
 import "../../core/components/app-root/AppRoot.css";
 import "./Header.css";
-var header = "_150dima0-3-12-2";
+var header = "_150dima0-3-13-0";
 export {
   header
 };

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

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

package/esm/layouts/page/Main.css

@@ -1,23 +1,23 @@
-._5zin930-3-12-2 {
+._5zin930-3-13-0 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   grid-area: main;
   overflow: hidden;
 }
-._5zin931-3-12-2 {
+._5zin931-3-13-0 {
   box-sizing: border-box;
   height: 100%;
   overflow-y: auto;
   padding: var(--dt-spacings-size-16, 16px);
 }
-._5zin932-3-12-2 {
+._5zin932-3-13-0 {
   border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1jgl8s50-3-12-2 ._5zin932-3-12-2 {
+._1jgl8s50-3-13-0 ._5zin932-3-13-0 {
   border-radius: 0;
 }
-._5zin933-3-12-2 {
+._5zin933-3-13-0 {
   border-top-right-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1jgl8s50-3-12-2 ._5zin933-3-12-2 {
+._1jgl8s50-3-13-0 ._5zin933-3-13-0 {
   border-radius: 0;
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/Main.tsx"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-deprecated */\nimport clsx from 'clsx';\nimport { forwardRef, useRef, type HTMLAttributes } from 'react';\n\nimport * as styles from './Main.sty.js';\nimport { usePageContext, useRegisterPagePanel } from './page-context.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';\n\n/**\n * @public\n * @deprecated Deprecated along with the `Page` component. Please use `PageLayout.Content` instead.\n */\nexport interface MainProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    Omit<HTMLAttributes<HTMLDivElement>, keyof StylingProps> {\n  /**\n   * The minimum width of the main panel in pixels.\n   * @defaultValue 320\n   */\n  minWidth?: number;\n}\n\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 * @public\n * @deprecated The `Page.Main` component is deprecated. Please use `PageLayout.Content` instead.\n */\nexport const Main = forwardRef<HTMLDivElement, MainProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      minWidth = 320,\n      className,\n      style,\n      ...remainingProps\n    }: MainProps = props;\n\n    const mainRef = useRef<HTMLDivElement>(null);\n    const mergedRefs = useMergeRefs([mainRef, forwardedRef]);\n\n    useRegisterPagePanel('main', {\n      ref: mainRef,\n      minWidth,\n    });\n\n    const { panels } = usePageContext();\n    const hasSidebar = !!panels.sidebar;\n    const hasDetails = !!panels.details && !panels.details.isDismissed;\n\n    return (\n      <main\n        {...remainingProps}\n        ref={mergedRefs}\n        className={clsx(\n          styles.main,\n          hasSidebar && styles.withSidebar,\n          hasDetails && styles.withDetails,\n          className,\n        )}\n        style={{ ...style, minWidth }}\n      >\n        <div className={styles.content}>{children}</div>\n      </main>\n    );\n  },\n);\n\n(Main as typeof Main & { displayName: string }).displayName = 'Page.Main';\n"],
-  "mappings": "AAmEQ;AAlER,OAAO,UAAU;AACjB,SAAS,YAAY,cAAmC;AAExD,YAAY,YAAY;AACxB,SAAS,gBAAgB,4BAA4B;AACrD,SAAS,oBAAoB;AA2BtB,MAAM,OAAO;AAAA,EAClB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAe;AAEf,UAAM,UAAU,OAAuB,IAAI;AAC3C,UAAM,aAAa,aAAa,CAAC,SAAS,YAAY,CAAC;AAEvD,yBAAqB,QAAQ;AAAA,MAC3B,KAAK;AAAA,MACL;AAAA,IACF,CAAC;AAED,UAAM,EAAE,OAAO,IAAI,eAAe;AAClC,UAAM,aAAa,CAAC,CAAC,OAAO;AAC5B,UAAM,aAAa,CAAC,CAAC,OAAO,WAAW,CAAC,OAAO,QAAQ;AAEvD,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,WAAW;AAAA,UACT,OAAO;AAAA,UACP,cAAc,OAAO;AAAA,UACrB,cAAc,OAAO;AAAA,UACrB;AAAA,QACF;AAAA,QACA,OAAO,EAAE,GAAG,OAAO,SAAS;AAAA,QAE5B,8BAAC,SAAI,WAAW,OAAO,SAAU,UAAS;AAAA;AAAA,IAC5C;AAAA,EAEJ;AACF;AAEC,KAA+C,cAAc;",
+  "sourcesContent": ["/* oxlint-disable typescript/no-deprecated */\nimport clsx from 'clsx';\nimport { forwardRef, useRef, type HTMLAttributes } from 'react';\n\nimport * as styles from './Main.sty.js';\nimport { usePageContext, useRegisterPagePanel } from './page-context.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';\n\n/**\n * @public\n * @deprecated Deprecated along with the `Page` component. Please use `PageLayout.Content` instead.\n */\nexport interface MainProps\n  extends\n    WithChildren,\n    StylingProps,\n    DataTestId,\n    Omit<HTMLAttributes<HTMLDivElement>, keyof StylingProps> {\n  /**\n   * The minimum width of the main panel in pixels.\n   * @defaultValue 320\n   */\n  minWidth?: number;\n}\n\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 * @public\n * @deprecated The `Page.Main` component is deprecated. Please use `PageLayout.Content` instead.\n */\nexport const Main = forwardRef<HTMLDivElement, MainProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      minWidth = 320,\n      className,\n      style,\n      ...remainingProps\n    }: MainProps = props;\n\n    const mainRef = useRef<HTMLDivElement>(null);\n    const mergedRefs = useMergeRefs([mainRef, forwardedRef]);\n\n    useRegisterPagePanel('main', {\n      ref: mainRef,\n      minWidth,\n    });\n\n    const { panels } = usePageContext();\n    const hasSidebar = !!panels.sidebar;\n    const hasDetails = !!panels.details && !panels.details.isDismissed;\n\n    return (\n      <main\n        {...remainingProps}\n        ref={mergedRefs}\n        className={clsx(\n          styles.main,\n          hasSidebar && styles.withSidebar,\n          hasDetails && styles.withDetails,\n          className,\n        )}\n        style={{ ...style, minWidth }}\n      >\n        <div className={styles.content}>{children}</div>\n      </main>\n    );\n  },\n);\n\n(Main as typeof Main & { displayName: string }).displayName = 'Page.Main';\n"],
+  "mappings": "AAoEQ;AAnER,OAAO,UAAU;AACjB,SAAS,YAAY,cAAmC;AAExD,YAAY,YAAY;AACxB,SAAS,gBAAgB,4BAA4B;AACrD,SAAS,oBAAoB;AA4BtB,MAAM,OAAO;AAAA,EAClB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAe;AAEf,UAAM,UAAU,OAAuB,IAAI;AAC3C,UAAM,aAAa,aAAa,CAAC,SAAS,YAAY,CAAC;AAEvD,yBAAqB,QAAQ;AAAA,MAC3B,KAAK;AAAA,MACL;AAAA,IACF,CAAC;AAED,UAAM,EAAE,OAAO,IAAI,eAAe;AAClC,UAAM,aAAa,CAAC,CAAC,OAAO;AAC5B,UAAM,aAAa,CAAC,CAAC,OAAO,WAAW,CAAC,OAAO,QAAQ;AAEvD,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,WAAW;AAAA,UACT,OAAO;AAAA,UACP,cAAc,OAAO;AAAA,UACrB,cAAc,OAAO;AAAA,UACrB;AAAA,QACF;AAAA,QACA,OAAO,EAAE,GAAG,OAAO,SAAS;AAAA,QAE5B,8BAAC,SAAI,WAAW,OAAO,SAAU,UAAS;AAAA;AAAA,IAC5C;AAAA,EAEJ;AACF;AAEC,KAA+C,cAAc;",
   "names": []
 }

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

@@ -1,9 +1,9 @@
 import "../../core/components/app-root/AppRoot.css";
 import "./Main.css";
-var content = "_5zin931-3-12-2";
-var main = "_5zin930-3-12-2";
-var withDetails = "_5zin933-3-12-2";
-var withSidebar = "_5zin932-3-12-2";
+var content = "_5zin931-3-13-0";
+var main = "_5zin930-3-13-0";
+var withDetails = "_5zin933-3-13-0";
+var withSidebar = "_5zin932-3-13-0";
 export {
   content,
   main,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/Main.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './Main.css';\nexport var content = '_5zin931-3-12-2';\nexport var main = '_5zin930-3-12-2';\nexport var withDetails = '_5zin933-3-12-2';\nexport var withSidebar = '_5zin932-3-12-2';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './Main.css';\nexport var content = '_5zin931-3-13-0';\nexport var main = '_5zin930-3-13-0';\nexport var withDetails = '_5zin933-3-13-0';\nexport var withSidebar = '_5zin932-3-13-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,UAAU;AACd,IAAI,OAAO;AACX,IAAI,cAAc;AAClB,IAAI,cAAc;",
   "names": []
 }

package/esm/layouts/page/Page.css

@@ -1,10 +1,10 @@
-._1j29czt0-3-12-2 {
+._1j29czt0-3-13-0 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
   display: grid;
   height: 100dvh;
   height: 100vh;
   overflow: hidden;
 }
-._1jgl8s50-3-12-2 ._1j29czt0-3-12-2 {
+._1jgl8s50-3-13-0 ._1j29czt0-3-13-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": ["/* eslint-disable @typescript-eslint/no-deprecated */\nimport 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 | null>;\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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",
+  "sourcesContent": ["/* oxlint-disable typescript/no-deprecated */\nimport 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\n    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 | null>;\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-12-2";
+var page = "_1j29czt0-3-13-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-12-2';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './Page.css';\nexport var page = '_1j29czt0-3-13-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,OAAO;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/Panel.tsx"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-deprecated */\nimport { useGesture } from '@use-gesture/react';\nimport clsx from 'clsx';\nimport {\n  forwardRef,\n  type HTMLAttributes,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} 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 { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.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>(undefined);\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({\n      focusWithin: true,\n      ignoreModality: true,\n    });\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=\"Resize\"\n      />\n    );\n  },\n);\n\nexport const Panel = Object.assign(PanelRoot, {\n  Content: PanelContent,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* oxlint-disable typescript/no-deprecated */\nimport { useGesture } from '@use-gesture/react';\nimport clsx from 'clsx';\nimport {\n  forwardRef,\n  type HTMLAttributes,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} 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 { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\n\ninterface PanelRootProps\n  extends WithChildren, StylingProps, 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>(undefined);\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({\n      focusWithin: true,\n      ignoreModality: true,\n    });\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=\"Resize\"\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.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/PanelControlButton.tsx"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-deprecated */\nimport { 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    // Reads consumer's data-dt-name prop and forwards it as data-dt-children-name on the Button.\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-children-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": ["/* oxlint-disable typescript/no-deprecated */\nimport { 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 extends Omit<\n  ButtonProps<'button'>,\n  'as' | 'type' | 'loading'\n> {\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    // Reads consumer's data-dt-name prop and forwards it as data-dt-children-name on the Button.\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      // oxlint-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-children-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-12-2 {
+._zdcge90-3-13-0 {
   grid-area: sidebar;
   justify-content: flex-end;
 }
-._zdcge91-3-12-2 {
+._zdcge91-3-13-0 {
   flex-shrink: 0;
   height: 100%;
   left: 0;
   position: relative;
   width: 0;
 }
-._zdcge93-3-12-2 {
-  --_zdcge92-3-12-2: 16px;
+._zdcge93-3-13-0 {
+  --_zdcge92-3-13-0: 16px;
   background-color: transparent;
   border-width: 0;
   cursor: pointer;
@@ -20,35 +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-12-2);
-  translate: calc(0px - var(--_zdcge92-3-12-2) * 2);
+  width: var(--_zdcge92-3-13-0);
+  translate: calc(0px - var(--_zdcge92-3-13-0) * 2);
   border-top-right-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1p91g301-3-12-2:is(:hover,:focus-within) ._zdcge93-3-12-2 {
+._1p91g301-3-13-0:is(:hover,:focus-within) ._zdcge93-3-13-0 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
-  translate: calc(0px - var(--_zdcge92-3-12-2) - var(--_zdcge92-3-12-2) / 2);
+  translate: calc(0px - var(--_zdcge92-3-13-0) - var(--_zdcge92-3-13-0) / 2);
 }
-._1jgl8s50-3-12-2 ._zdcge93-3-12-2, ._1jgl8s50-3-12-2 ._zdcge93-3-12-2:hover, ._1jgl8s50-3-12-2 ._zdcge93-3-12-2:focus, ._1jgl8s50-3-12-2 ._1p91g301-3-12-2:is(:hover,:focus-within) ._zdcge93-3-12-2 {
+._1jgl8s50-3-13-0 ._zdcge93-3-13-0, ._1jgl8s50-3-13-0 ._zdcge93-3-13-0:hover, ._1jgl8s50-3-13-0 ._zdcge93-3-13-0:focus, ._1jgl8s50-3-13-0 ._1p91g301-3-13-0:is(:hover,:focus-within) ._zdcge93-3-13-0 {
   border-top-right-radius: 0;
-  translate: calc(-1 * var(--_zdcge92-3-12-2));
+  translate: calc(-1 * var(--_zdcge92-3-13-0));
   box-shadow: none;
 }
-._zdcge95-3-12-2 {
-  --_zdcge94-3-12-2: 24px;
+._zdcge95-3-13-0 {
+  --_zdcge94-3-13-0: 24px;
   position: absolute;
   top: var(--dt-spacings-size-20, 20px);
-  left: calc(0px - var(--_zdcge94-3-12-2) / 2 + 2px);
+  left: calc(0px - var(--_zdcge94-3-13-0) / 2 + 2px);
   z-index: 1;
 }
-._zdcge96-3-12-2 {
-  width: var(--_zdcge94-3-12-2);
-  height: var(--_zdcge94-3-12-2);
+._zdcge96-3-13-0 {
+  width: var(--_zdcge94-3-13-0);
+  height: var(--_zdcge94-3-13-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-12-2 {
+._zdcge97-3-13-0 {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
   opacity: 0;
   outline-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
@@ -56,70 +56,70 @@
   transition-property: all;
   transition-timing-function: var(--dt-animations-hover-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._zdcge97-3-12-2:hover {
+._zdcge97-3-13-0:hover {
   opacity: 1;
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._zdcge97-3-12-2:focus-visible {
+._zdcge97-3-13-0:focus-visible {
   opacity: 1;
 }
-._1p91g301-3-12-2:hover ._zdcge97-3-12-2 {
+._1p91g301-3-13-0:hover ._zdcge97-3-13-0 {
   opacity: 1;
 }
-._1jgl8s50-3-12-2 ._zdcge97-3-12-2 {
+._1jgl8s50-3-13-0 ._zdcge97-3-13-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-12-2 ._zdcge97-3-12-2:hover {
+._1jgl8s50-3-13-0 ._zdcge97-3-13-0:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
   opacity: 1;
 }
-._1jgl8s50-3-12-2 ._zdcge97-3-12-2:active {
+._1jgl8s50-3-13-0 ._zdcge97-3-13-0:active {
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._1jgl8s50-3-12-2 ._zdcge97-3-12-2:focus-visible {
+._1jgl8s50-3-13-0 ._zdcge97-3-13-0:focus-visible {
   opacity: 1;
 }
-._zdcge98-3-12-2 {
+._zdcge98-3-13-0 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._zdcge98-3-12-2:hover {
+._zdcge98-3-13-0:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
   outline-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._1jgl8s50-3-12-2 ._zdcge98-3-12-2 {
+._1jgl8s50-3-13-0 ._zdcge98-3-13-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-12-2 ._zdcge98-3-12-2:not(:focus-visible) {
+._1jgl8s50-3-13-0 ._zdcge98-3-13-0:not(:focus-visible) {
   box-shadow: none;
 }
-._1jgl8s50-3-12-2 ._zdcge98-3-12-2:hover {
+._1jgl8s50-3-13-0 ._zdcge98-3-13-0:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
   outline-color: transparent;
   box-shadow: none;
 }
-._1jgl8s50-3-12-2 ._zdcge98-3-12-2:active {
+._1jgl8s50-3-13-0 ._zdcge98-3-13-0:active {
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
   box-shadow: none;
 }
-._zdcge99-3-12-2._1p91g302-3-12-2 {
+._zdcge99-3-13-0._1p91g302-3-13-0 {
   width: var(--dt-spacings-size-16, 16px);
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._1jgl8s50-3-12-2 ._zdcge99-3-12-2._1p91g302-3-12-2 {
+._1jgl8s50-3-13-0 ._zdcge99-3-13-0._1p91g302-3-13-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-12-2 ._zdcge99-3-12-2._1p91g302-3-12-2:hover {
+._1jgl8s50-3-13-0 ._zdcge99-3-13-0._1p91g302-3-13-0:hover {
   border-color: var(--dt-colors-border-neutral-subdued-hover, #d0d1dc);
 }
-._1jgl8s50-3-12-2 ._zdcge99-3-12-2._1p91g302-3-12-2:active {
+._1jgl8s50-3-13-0 ._zdcge99-3-13-0._1p91g302-3-13-0:active {
   border-color: var(--dt-colors-border-neutral-subdued-active, #c6c7d5);
 }
-._zdcge9a-3-12-2 {
+._zdcge9a-3-13-0 {
   display: flex;
   gap: var(--dt-spacings-size-4, 4px);
   padding-inline: var(--dt-spacings-size-8, 8px);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/Sidebar.tsx"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-deprecated */\nimport 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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",
+  "sourcesContent": ["/* oxlint-disable typescript/no-deprecated */\nimport 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\n    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, 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, 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": "AAuMkC,cA8BxB,YA9BwB;AAtMlC,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,eAAe;AAExB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB,4BAA4B;AAQrD,YAAY,iBAAiB;AAC7B,SAAS,aAAa;AACtB,YAAY,YAAY;AACxB,SAAS,0BAA0B;AACnC,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB,SAAS,oBAAoB;AAI7B,SAAS,8BAA8B;AACvC,SAAS,cAAc;AACvB,SAAS,eAAe;AAoFjB,MAAM,UAAU;AAAA,EACrB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,iBAAiB;AAAA,MACjB;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,GAAG;AAAA,IACL,IAAkB;AAElB,UAAM,UAAU,MAAM;AACtB,UAAM,YAAuB;AAC7B,UAAM,WAAW,OAAuB,IAAI;AAC5C,UAAM,aAAa,aAAa,CAAC,UAAU,YAAY,CAAC;AACxD,UAAM,OAAO,QAAQ;AAErB,UAAM,OAAO,eAAe;AAE5B,UAAM,QAAQ,qBAAqB,WAAW;AAAA,MAC5C,KAAK;AAAA,MACL,cAAc,cAAc;AAAA,MAC5B,aAAa,aAAa,MAAM;AAAA,MAChC;AAAA,MACA;AAAA,IACF,CAAC;AAED,UAAM,2BAA2B;AAAA,MAC/B,CAAC,OAAgB,WAAmB;AAClC,YAAI,UAAU,MAAM;AAClB,eAAK,aAAa,SAAS;AAAA,QAC7B,OAAO;AACL,eAAK,YAAY,SAAS;AAAA,QAC5B;AACA,0BAAkB,OAAO,MAAM;AAAA,MACjC;AAAA,MACA,CAAC,iBAAiB,MAAM,SAAS;AAAA,IACnC;AAEA,UAAM,kBAAkB,mBAAmB;AAAA,MACzC;AAAA,MACA,UAAU;AAAA,IACZ,CAAC;AAED,UAAM,gBAAgB,eAAe,EAAE,UAAU,YAAY,CAAC;AAE9D,QAAI,CAAC,OAAO;AACV,aAAO;AAAA,IACT;AAEA,UAAM,QAAQ,KAAK,cAAc;AAAA,MAC/B,gBAAgB;AAAA,MAChB,IAAI;AAAA,IACN,CAAC;AAED,UAAM,yBAAyB,CAAC,mBAAmB,MAAM;AAEzD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,WAAW;AAAA,UACT,0BAA0B,YAAY;AAAA,UACtC,sBAAsB,OAAO;AAAA,UAC7B,OAAO;AAAA,QACT;AAAA,QACA,cAAY;AAAA,QAEX;AAAA,mCAAyB,oBAAC,SAAI,WAAW,YAAY,KAAK,IAAK;AAAA,UAEhE;AAAA,YAAC,MAAM;AAAA,YAAN;AAAA,cACE,GAAG;AAAA,cACJ,eAAe,KAAK;AAAA,cACpB,KAAK;AAAA,cACL;AAAA,cACA,UAAU,CAAC,UAAU,WAAW,KAAK,cAAc,GAAG,KAAK;AAAA,cAC3D;AAAA,cACA;AAAA,cACA,QAAQ,cAAc,OAAO,UAAU;AAAA,cACvC,aAAa;AAAA,cACb;AAAA,cACA;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UAEC,qBACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,cACX,SAAS,CAAC,EAAE,OAAO,OAAO,MAAM;AAC9B,yCAAyB,OAAO,MAAM;AAAA,cACxC;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF,IACE;AAAA,UAEH,CAAC,kBACA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,YAAY;AAAA,cACvB,aAAa,MAAM;AAAA,cACnB,WAAW;AAAA,cACX,WAAU;AAAA,cACV,OAAM;AAAA,cAEL;AAAA,qCACC,oBAAC,SAAI,WAAW,OAAO,gCACrB;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAO,EAAE,YAAY,OAAO;AAAA,oBAC5B,SAAS,MACP,yBAAyB,MAAM,eAAe;AAAA,oBAGhD,8BAAC,OAAO,QAAP,EACC,8BAAC,aAAU,GACb;AAAA;AAAA,gBACF,GACF,IACE;AAAA,gBACJ,oBAAC,SAAK,GAAG,WAAW,WAAW,YAAY,eACxC,UACH;AAAA;AAAA;AAAA,UACF,IACE;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACC,QAAqD,cACpD;AAWK,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA+B;AAC7B,QAAM,OAAO,QAAQ;AAErB,QAAM,YAAY,OAA0B,IAAI;AAIhD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AAExD,QAAM,YAAY,KAAK;AAAA,IACrB,YACI,EAAE,gBAAgB,wBAAwB,IAAI,mBAAmB,IACjE,EAAE,gBAAgB,yBAAyB,IAAI,mBAAmB;AAAA,IACtE,EAAE,MAAM;AAAA,EACV;AAEA,QAAM,cAAc,YACf;AAAA,IACC,iBAAiB;AAAA,IACjB,WAAW,OAAO;AAAA,IAClB,SAAS,MAAM;AACb,cAAQ,EAAE,OAAO,OAAO,QAAQ,gBAAgB,CAAC;AACjD,uBAAiB,KAAK;AAAA,IACxB;AAAA,IACA,SAAS;AAAA,EACX,IACC;AAAA,IACC,iBAAiB;AAAA,IACjB,WAAW,OAAO;AAAA,IAClB,SAAS,MAAM;AACb,cAAQ,EAAE,OAAO,MAAM,QAAQ,iBAAiB,CAAC;AACjD,uBAAiB,KAAK;AAAA,IACxB;AAAA,IACA,SAAS;AAAA,EACX;AAEJ,SACE,qBAAC,SAAI,WAAW,OAAO,oBACpB;AAAA,gBACC;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,OAAO;AAAA,QAClB,MAAK;AAAA,QACL,UAAU,uBAAuB,IAAI,KAAK;AAAA,QAC1C,SAAS,MAAM;AACb,kBAAQ,EAAE,OAAO,OAAO,QAAQ,aAAa,CAAC;AAC9C,2BAAiB,KAAK;AACtB,oBAAU,SAAS,MAAM;AAAA,QAC3B;AAAA,QACA,iBAAe;AAAA,QACf,iBAAe,YAAY,UAAU;AAAA,QACrC,cAAY;AAAA;AAAA,IACd,IACE;AAAA,IAEJ,oBAAC,SAAI,WAAW,OAAO,iBACrB;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,MAAM;AAAA,QACN,cAAc;AAAA,QAEd;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACJ,KAAK;AAAA,YACL,iBAAe;AAAA,YACf,cAAY;AAAA,YACZ,MAAK;AAAA,YAEL,8BAAC,OAAO,QAAP,EACE,sBACC,oBAAC,+BAA4B,IAE7B,oBAAC,8BAA2B,GAEhC;AAAA;AAAA,QACF;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAEJ;",
   "names": []
 }