@dynatrace/strato-components 3.8.0 → 3.9.1

package/esm/layouts/page/Sidebar.css

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

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

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

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

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

package/esm/layouts/page/page-context.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/page-context.ts"],
-  "sourcesContent": ["import {\n  createContext,\n  useContext,\n  useLayoutEffect,\n  type RefObject,\n} from 'react';\n\nimport type { PagePanelSizes, PanelName } from './page-types.js';\n\ninterface BasePagePanelState {\n  ref: RefObject<HTMLDivElement>;\n  isControlled: boolean;\n  isDismissed: boolean;\n  minWidth: number;\n  breakpoint: number;\n}\n\ninterface MainPagePanelState extends BasePagePanelState {\n  isControlled: false;\n  isDismissed: false;\n}\n\n/** @internal */\nexport interface PageLayoutState {\n  sidebar: BasePagePanelState | null;\n  main: MainPagePanelState | null;\n  details: BasePagePanelState | null;\n}\n\n/** @internal */\nexport interface PageContext {\n  containerSize: number;\n  panels: PageLayoutState;\n  registerPanel: (\n    name: PanelName,\n    options: {\n      ref: RefObject<HTMLDivElement>;\n      isControlled: boolean;\n      isDismissed: boolean;\n      minWidth: number;\n      breakpoint: number;\n    },\n  ) => void;\n  removePanel: (name: PanelName) => void;\n  dismissPanel: (name: PanelName) => void;\n  expandPanel: (name: PanelName) => void;\n  togglePanel: (name: PanelName) => void;\n  getPanelSizes: () => PagePanelSizes;\n}\n\n/** @internal */\nexport const pageContext = createContext<PageContext>({\n  containerSize: 0,\n  panels: { sidebar: null, main: null, details: null },\n  registerPanel: () => undefined,\n  removePanel: () => undefined,\n  dismissPanel: () => undefined,\n  expandPanel: () => undefined,\n  togglePanel: () => undefined,\n  getPanelSizes: () => undefined as unknown as PagePanelSizes,\n});\n\n/** @internal */\nexport function usePageContext() {\n  return useContext(pageContext);\n}\n\ninterface Options {\n  ref: RefObject<HTMLDivElement>;\n  /**\n   * Whether the dismissed state is controlled externally.\n   * @defaultValue false\n   */\n  isControlled?: boolean;\n  /**\n   * Whether the panel is dismissed (collapsed) or not.\n   * @defaultValue false\n   */\n  isDismissed?: boolean;\n  /**\n   * The minimum width (in px) the panel can be resized to.\n   * @defaultValue 0\n   */\n  minWidth?: number;\n  /**\n   * The breakpoint (in px) at which the panel is displayed as a `Drawer`.\n   * `0` means the panel will never be displayed as a `Drawer`.\n   * @defaultValue 0\n   */\n  breakpoint?: number;\n}\n\n/** @internal */\nexport function useRegisterPagePanel(name: PanelName, options: Options) {\n  const { registerPanel, removePanel, panels } = usePageContext();\n  const panel = panels[name];\n\n  useLayoutEffect(() => {\n    registerPanel(name, {\n      ref: options.ref,\n      isControlled: options.isControlled ?? false,\n      isDismissed: options.isDismissed ?? false,\n      minWidth: options.minWidth ?? 0,\n      breakpoint: options.breakpoint ?? 0,\n    });\n\n    return () => {\n      removePanel(name);\n    };\n  }, [\n    name,\n    options.breakpoint,\n    options.isControlled,\n    options.isDismissed,\n    options.minWidth,\n    options.ref,\n    registerPanel,\n    removePanel,\n  ]);\n\n  return panel;\n}\n"],
-  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AA8CA,MAAM,cAAc,cAA2B;AAAA,EACpD,eAAe;AAAA,EACf,QAAQ,EAAE,SAAS,MAAM,MAAM,MAAM,SAAS,KAAK;AAAA,EACnD,eAAe,MAAM;AAAA,EACrB,aAAa,MAAM;AAAA,EACnB,cAAc,MAAM;AAAA,EACpB,aAAa,MAAM;AAAA,EACnB,aAAa,MAAM;AAAA,EACnB,eAAe,MAAM;AACvB,CAAC;AAGM,SAAS,iBAAiB;AAC/B,SAAO,WAAW,WAAW;AAC/B;AA4BO,SAAS,qBAAqB,MAAiB,SAAkB;AACtE,QAAM,EAAE,eAAe,aAAa,OAAO,IAAI,eAAe;AAC9D,QAAM,QAAQ,OAAO,IAAI;AAEzB,kBAAgB,MAAM;AACpB,kBAAc,MAAM;AAAA,MAClB,KAAK,QAAQ;AAAA,MACb,cAAc,QAAQ,gBAAgB;AAAA,MACtC,aAAa,QAAQ,eAAe;AAAA,MACpC,UAAU,QAAQ,YAAY;AAAA,MAC9B,YAAY,QAAQ,cAAc;AAAA,IACpC,CAAC;AAED,WAAO,MAAM;AACX,kBAAY,IAAI;AAAA,IAClB;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO;AACT;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-deprecated */\nimport {\n  createContext,\n  useContext,\n  useLayoutEffect,\n  type RefObject,\n} from 'react';\n\nimport type { PagePanelSizes, PanelName } from './page-types.js';\n\ninterface BasePagePanelState {\n  ref: RefObject<HTMLDivElement>;\n  isControlled: boolean;\n  isDismissed: boolean;\n  minWidth: number;\n  breakpoint: number;\n}\n\ninterface MainPagePanelState extends BasePagePanelState {\n  isControlled: false;\n  isDismissed: false;\n}\n\n/** @internal */\nexport interface PageLayoutState {\n  sidebar: BasePagePanelState | null;\n  main: MainPagePanelState | null;\n  details: BasePagePanelState | null;\n}\n\n/** @internal */\nexport interface PageContext {\n  containerSize: number;\n  panels: PageLayoutState;\n  registerPanel: (\n    name: PanelName,\n    options: {\n      ref: RefObject<HTMLDivElement>;\n      isControlled: boolean;\n      isDismissed: boolean;\n      minWidth: number;\n      breakpoint: number;\n    },\n  ) => void;\n  removePanel: (name: PanelName) => void;\n  dismissPanel: (name: PanelName) => void;\n  expandPanel: (name: PanelName) => void;\n  togglePanel: (name: PanelName) => void;\n  getPanelSizes: () => PagePanelSizes;\n}\n\n/** @internal */\nexport const pageContext = createContext<PageContext>({\n  containerSize: 0,\n  panels: { sidebar: null, main: null, details: null },\n  registerPanel: () => undefined,\n  removePanel: () => undefined,\n  dismissPanel: () => undefined,\n  expandPanel: () => undefined,\n  togglePanel: () => undefined,\n  getPanelSizes: () => undefined as unknown as PagePanelSizes,\n});\n\n/** @internal */\nexport function usePageContext() {\n  return useContext(pageContext);\n}\n\ninterface Options {\n  ref: RefObject<HTMLDivElement>;\n  /**\n   * Whether the dismissed state is controlled externally.\n   * @defaultValue false\n   */\n  isControlled?: boolean;\n  /**\n   * Whether the panel is dismissed (collapsed) or not.\n   * @defaultValue false\n   */\n  isDismissed?: boolean;\n  /**\n   * The minimum width (in px) the panel can be resized to.\n   * @defaultValue 0\n   */\n  minWidth?: number;\n  /**\n   * The breakpoint (in px) at which the panel is displayed as a `Drawer`.\n   * `0` means the panel will never be displayed as a `Drawer`.\n   * @defaultValue 0\n   */\n  breakpoint?: number;\n}\n\n/** @internal */\nexport function useRegisterPagePanel(name: PanelName, options: Options) {\n  const { registerPanel, removePanel, panels } = usePageContext();\n  const panel = panels[name];\n\n  useLayoutEffect(() => {\n    registerPanel(name, {\n      ref: options.ref,\n      isControlled: options.isControlled ?? false,\n      isDismissed: options.isDismissed ?? false,\n      minWidth: options.minWidth ?? 0,\n      breakpoint: options.breakpoint ?? 0,\n    });\n\n    return () => {\n      removePanel(name);\n    };\n  }, [\n    name,\n    options.breakpoint,\n    options.isControlled,\n    options.isDismissed,\n    options.minWidth,\n    options.ref,\n    registerPanel,\n    removePanel,\n  ]);\n\n  return panel;\n}\n"],
+  "mappings": "AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AA8CA,MAAM,cAAc,cAA2B;AAAA,EACpD,eAAe;AAAA,EACf,QAAQ,EAAE,SAAS,MAAM,MAAM,MAAM,SAAS,KAAK;AAAA,EACnD,eAAe,MAAM;AAAA,EACrB,aAAa,MAAM;AAAA,EACnB,cAAc,MAAM;AAAA,EACpB,aAAa,MAAM;AAAA,EACnB,aAAa,MAAM;AAAA,EACnB,eAAe,MAAM;AACvB,CAAC;AAGM,SAAS,iBAAiB;AAC/B,SAAO,WAAW,WAAW;AAC/B;AA4BO,SAAS,qBAAqB,MAAiB,SAAkB;AACtE,QAAM,EAAE,eAAe,aAAa,OAAO,IAAI,eAAe;AAC9D,QAAM,QAAQ,OAAO,IAAI;AAEzB,kBAAgB,MAAM;AACpB,kBAAc,MAAM;AAAA,MAClB,KAAK,QAAQ;AAAA,MACb,cAAc,QAAQ,gBAAgB;AAAA,MACtC,aAAa,QAAQ,eAAe;AAAA,MACpC,UAAU,QAAQ,YAAY;AAAA,MAC9B,YAAY,QAAQ,cAAc;AAAA,IACpC,CAAC;AAED,WAAO,MAAM;AACX,kBAAY,IAAI;AAAA,IAClB;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO;AACT;",
   "names": []
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/panel-context.ts"],
-  "sourcesContent": ["import { createContext, useContext } from 'react';\n\nimport type { PanelName } from '../page/page-types.js';\n\n/** @internal */\nexport const panelContext = createContext<{\n  name: PanelName;\n} | null>(null);\n\n/** @internal */\nexport function usePanelContext() {\n  return useContext(panelContext);\n}\n"],
-  "mappings": "AAAA,SAAS,eAAe,kBAAkB;AAKnC,MAAM,eAAe,cAElB,IAAI;AAGP,SAAS,kBAAkB;AAChC,SAAO,WAAW,YAAY;AAChC;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-deprecated */\nimport { createContext, useContext } from 'react';\n\nimport type { PanelName } from '../page/page-types.js';\n\n/** @internal */\nexport const panelContext = createContext<{\n  name: PanelName;\n} | null>(null);\n\n/** @internal */\nexport function usePanelContext() {\n  return useContext(panelContext);\n}\n"],
+  "mappings": "AACA,SAAS,eAAe,kBAAkB;AAKnC,MAAM,eAAe,cAElB,IAAI;AAGP,SAAS,kBAAkB;AAChC,SAAO,WAAW,YAAY;AAChC;",
   "names": []
 }

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

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

package/esm/layouts/page/panel.css

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-._193kgwe0-3-8-0 {
+._193kgwe0-3-9-1 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
   display: grid;
   height: 100dvh;
@@ -7,36 +7,36 @@
   grid-template-rows: min-content minmax(0px, 1fr);
   grid-template-areas: "header" "content";
 }
-._1jgl8s50-3-8-0 ._193kgwe0-3-8-0 {
+._1jgl8s50-3-9-1 ._193kgwe0-3-9-1 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
 }
-._193kgwe1-3-8-0 {
+._193kgwe1-3-9-1 {
   grid-area: header;
   padding: var(--dt-spacings-size-8, 8px);
   min-width: 0;
-  ._1jgl8s50-3-8-0 & {
+  ._1jgl8s50-3-9-1 & {
     border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-subdued, #e4e5eb);
   }
 }
-._193kgwe2-3-8-0 {
+._193kgwe2-3-9-1 {
   grid-area: content;
   min-width: 0;
 }
-._193kgwe3-3-8-0 {
+._193kgwe3-3-9-1 {
   padding: var(--dt-spacings-size-16, 16px);
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   height: 100%;
   isolation: isolate;
 }
-._193kgwe4-3-8-0 {
+._193kgwe4-3-9-1 {
   border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1jgl8s50-3-8-0 ._193kgwe4-3-8-0 {
+._1jgl8s50-3-9-1 ._193kgwe4-3-9-1 {
   border-top-left-radius: 0;
 }
-._193kgwe5-3-8-0 {
+._193kgwe5-3-9-1 {
   border-top-right-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1jgl8s50-3-8-0 ._193kgwe5-3-8-0 {
+._1jgl8s50-3-9-1 ._193kgwe5-3-9-1 {
   border-top-right-radius: 0;
 }

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

@@ -1,11 +1,11 @@
 import "../../core/components/app-root/AppRoot.css";
 import "./PageLayout.css";
-var content = "_193kgwe3-3-8-0";
-var contentContainer = "_193kgwe2-3-8-0";
-var contentTopLeftRadius = "_193kgwe4-3-8-0";
-var contentTopRightRadius = "_193kgwe5-3-8-0";
-var headerContainer = "_193kgwe1-3-8-0";
-var layoutRoot = "_193kgwe0-3-8-0";
+var content = "_193kgwe3-3-9-1";
+var contentContainer = "_193kgwe2-3-9-1";
+var contentTopLeftRadius = "_193kgwe4-3-9-1";
+var contentTopRightRadius = "_193kgwe5-3-9-1";
+var headerContainer = "_193kgwe1-3-9-1";
+var layoutRoot = "_193kgwe0-3-9-1";
 export {
   content,
   contentContainer,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page-layout/PageLayout.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './PageLayout.css';\nexport var content = '_193kgwe3-3-8-0';\nexport var contentContainer = '_193kgwe2-3-8-0';\nexport var contentTopLeftRadius = '_193kgwe4-3-8-0';\nexport var contentTopRightRadius = '_193kgwe5-3-8-0';\nexport var headerContainer = '_193kgwe1-3-8-0';\nexport var layoutRoot = '_193kgwe0-3-8-0';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './PageLayout.css';\nexport var content = '_193kgwe3-3-9-1';\nexport var contentContainer = '_193kgwe2-3-9-1';\nexport var contentTopLeftRadius = '_193kgwe4-3-9-1';\nexport var contentTopRightRadius = '_193kgwe5-3-9-1';\nexport var headerContainer = '_193kgwe1-3-9-1';\nexport var layoutRoot = '_193kgwe0-3-9-1';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,UAAU;AACd,IAAI,mBAAmB;AACvB,IAAI,uBAAuB;AAC3B,IAAI,wBAAwB;AAC5B,IAAI,kBAAkB;AACtB,IAAI,aAAa;",
   "names": []
 }

package/esm/layouts/page-layout/details-layout/DetailsControlBar.css

@@ -1,15 +1,15 @@
-._1y5ro0l0-3-8-0 {
+._1y5ro0l0-3-9-1 {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: var(--dt-spacings-size-8, 8px);
 }
-._1y5ro0l1-3-8-0 {
+._1y5ro0l1-3-9-1 {
   display: flex;
   align-items: center;
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1y5ro0l2-3-8-0 {
+._1y5ro0l2-3-9-1 {
   display: flex;
   align-items: center;
   gap: var(--dt-spacings-size-4, 4px);

package/esm/layouts/page-layout/details-layout/DetailsControlBar.sty.js

@@ -1,7 +1,7 @@
 import "./DetailsControlBar.css";
-var controlBar = "_1y5ro0l0-3-8-0";
-var customActions = "_1y5ro0l1-3-8-0";
-var defaultActions = "_1y5ro0l2-3-8-0";
+var controlBar = "_1y5ro0l0-3-9-1";
+var customActions = "_1y5ro0l1-3-9-1";
+var defaultActions = "_1y5ro0l2-3-9-1";
 export {
   controlBar,
   customActions,