@cloudscape-design/components 3.0.961 → 3.0.963

package/app-layout/drawer/resizable-drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"resizable-drawer.js","sourceRoot":"","sources":["../../../../src/app-layout/drawer/resizable-drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport PanelResizeHandle from '../../internal/components/panel-resize-handle';\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { SizeControlProps } from '../utils/interfaces';\nimport { TOOLS_DRAWER_ID } from '../utils/use-drawers';\nimport { useKeyboardEvents } from '../utils/use-keyboard-events';\nimport { usePointerEvents } from '../utils/use-pointer-events';\nimport { Drawer } from './index';\nimport { ResizableDrawerProps } from './interfaces';\n\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport const ResizableDrawer = ({\n  onResize,\n  maxWidth,\n  minWidth,\n  refs,\n  activeDrawer,\n  toolsContent,\n  ...props\n}: ResizableDrawerProps) => {\n  const { isOpen, children, width, isMobile } = props;\n\n  const clampedWidth = getLimitedValue(minWidth, width, maxWidth);\n  const relativeSize = ((clampedWidth - minWidth) / (maxWidth - minWidth)) * 100;\n\n  const setSidePanelWidth = (newWidth: number) => {\n    const size = getLimitedValue(minWidth, newWidth, maxWidth);\n    const id = activeDrawer?.id;\n\n    if (isOpen && id && maxWidth >= minWidth) {\n      onResize({ size, id });\n    }\n  };\n\n  const drawerRefObject = useRef<HTMLDivElement>(null);\n\n  const sizeControlProps: SizeControlProps = {\n    position: 'side',\n    panelRef: drawerRefObject,\n    handleRef: refs.slider,\n    onResize: setSidePanelWidth,\n  };\n\n  const onSliderPointerDown = usePointerEvents(sizeControlProps);\n  const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n  return (\n    <Drawer\n      {...props}\n      id={activeDrawer?.id}\n      width={clampedWidth}\n      ref={drawerRefObject}\n      isHidden={!activeDrawer}\n      resizeHandle={\n        !isMobile &&\n        activeDrawer?.resizable && (\n          <PanelResizeHandle\n            ref={refs.slider}\n            position=\"side\"\n            className={testutilStyles['drawers-slider']}\n            ariaLabel={activeDrawer?.ariaLabels?.resizeHandle}\n            ariaValuenow={relativeSize}\n            onKeyDown={onKeyDown}\n            onPointerDown={onSliderPointerDown}\n          />\n        )\n      }\n      ariaLabels={{\n        openLabel: activeDrawer?.ariaLabels?.triggerButton,\n        mainLabel: activeDrawer?.ariaLabels?.drawerName,\n        closeLabel: activeDrawer?.ariaLabels?.closeButton,\n      }}\n    >\n      {toolsContent && <div className={clsx(activeDrawer?.id !== TOOLS_DRAWER_ID && styles.hide)}>{toolsContent}</div>}\n      {activeDrawer?.id !== TOOLS_DRAWER_ID ? children : null}\n    </Drawer>\n  );\n};\n"]}
+{"version":3,"file":"resizable-drawer.js","sourceRoot":"","sources":["../../../../src/app-layout/drawer/resizable-drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport PanelResizeHandle from '../../internal/components/panel-resize-handle';\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { SizeControlProps } from '../utils/interfaces';\nimport { TOOLS_DRAWER_ID } from '../utils/use-drawers';\nimport { useKeyboardEvents } from '../utils/use-keyboard-events';\nimport { usePointerEvents } from '../utils/use-pointer-events';\nimport { Drawer } from './index';\nimport { ResizableDrawerProps } from './interfaces';\n\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport const ResizableDrawer = ({\n  onResize,\n  maxWidth,\n  minWidth,\n  refs,\n  activeDrawer,\n  toolsContent,\n  ...props\n}: ResizableDrawerProps) => {\n  const { isOpen, children, width, isMobile } = props;\n\n  const clampedWidth = getLimitedValue(minWidth, width, maxWidth);\n  const relativeSize = ((clampedWidth - minWidth) / (maxWidth - minWidth)) * 100;\n\n  const setSidePanelWidth = (newWidth: number) => {\n    const size = getLimitedValue(minWidth, newWidth, maxWidth);\n    const id = activeDrawer?.id;\n\n    if (isOpen && id && maxWidth >= minWidth) {\n      onResize({ size, id });\n    }\n  };\n\n  const drawerRefObject = useRef<HTMLDivElement>(null);\n\n  const sizeControlProps: SizeControlProps = {\n    position: 'side',\n    panelRef: drawerRefObject,\n    handleRef: refs.slider,\n    onResize: setSidePanelWidth,\n  };\n\n  const onSliderPointerDown = usePointerEvents(sizeControlProps);\n  const { onKeyDown, onDirectionClick } = useKeyboardEvents(sizeControlProps);\n\n  return (\n    <Drawer\n      {...props}\n      id={activeDrawer?.id}\n      width={clampedWidth}\n      ref={drawerRefObject}\n      isHidden={!activeDrawer}\n      resizeHandle={\n        !isMobile &&\n        activeDrawer?.resizable && (\n          <PanelResizeHandle\n            ref={refs.slider}\n            position=\"side\"\n            className={testutilStyles['drawers-slider']}\n            ariaLabel={activeDrawer?.ariaLabels?.resizeHandle}\n            tooltipText={activeDrawer?.ariaLabels?.resizeHandleTooltipText}\n            ariaValuenow={relativeSize}\n            onKeyDown={onKeyDown}\n            onDirectionClick={onDirectionClick}\n            onPointerDown={onSliderPointerDown}\n          />\n        )\n      }\n      ariaLabels={{\n        openLabel: activeDrawer?.ariaLabels?.triggerButton,\n        mainLabel: activeDrawer?.ariaLabels?.drawerName,\n        closeLabel: activeDrawer?.ariaLabels?.closeButton,\n      }}\n    >\n      {toolsContent && <div className={clsx(activeDrawer?.id !== TOOLS_DRAWER_ID && styles.hide)}>{toolsContent}</div>}\n      {activeDrawer?.id !== TOOLS_DRAWER_ID ? children : null}\n    </Drawer>\n  );\n};\n"]}

package/app-layout/interfaces.d.ts

@@ -275,6 +275,7 @@ export declare namespace AppLayoutProps {
         closeButton?: string;
         triggerButton?: string;
         resizeHandle?: string;
+        resizeHandleTooltipText?: string;
     }
     interface Labels {
         notifications?: string;

package/app-layout/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/app-layout/interfaces.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/app-layout/interfaces.ts"],"names":[],"mappings":"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"}

package/app-layout/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/app-layout/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { IconProps } from '../icon/interfaces';\nimport { FlowType } from '../internal/analytics/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { SomeRequired } from '../internal/types';\n\nexport interface BaseLayoutProps extends BaseComponentProps {\n  /**\n   * Specifies additional analytics-related metadata.\n   * * `instanceIdentifier` - A unique string that identifies this component instance in your application.\n   * * `flowType` -  Identifies the type of flow represented by the component.\n   * **Note:** This API is currently experimental.\n   * @analytics\n   */\n  analyticsMetadata?: AppLayoutProps.AnalyticsMetadata;\n\n  /**\n   * Determines the default behavior of the component based on some predefined page layouts.\n   * Individual properties will always take precedence over the default coming from the content type.\n   */\n  contentType?: AppLayoutProps.ContentType;\n\n  /**\n   * Drawers property. If you set both `drawers` and `tools`, `drawers` will take precedence.\n\n   * Each Drawer is an item in the drawers wrapper with the following properties:\n   * * id (string) - the id of the drawer.\n   * * content (React.ReactNode) - the content in the drawer.\n   * * trigger (DrawerTrigger) - the button that opens and closes the active drawer.\n   * * ariaLabels (DrawerAriaLabels) - the labels for the interactive elements of the drawer.\n   * * badge (boolean) - Adds a badge to the corner of the icon to indicate a state change. For example: Unread notifications.\n   * * resizable (boolean) - if the drawer is resizable or not.\n   * * defaultSize (number) - starting size of the drawer. if not set, defaults to 290.\n   * * onResize (({ size: number }) => void) - Fired when the active drawer is resized.\n   *\n   * #### DrawerTrigger\n   * - `iconName` (IconProps.Name) - (Optional) Specifies the icon to be displayed.\n   * - `iconSvg` (React.ReactNode) - (Optional) Specifies the SVG of a custom icon. For more information, see [SVG icon guidelines](/components/icon/?tabId=api#slots)\n   *\n   * #### DrawerAriaLabels\n   * - `drawerName` (string) - Label for the drawer itself, and for the drawer trigger button tooltip text.\n   * - `closeButton` (string) - (Optional) Label for the close button.\n   * - `triggerButton` (string) - (Optional) Label for the trigger button.\n   * - `resizeHandle` (string) - (Optional) Label for the resize handle.\n   */\n  drawers?: Array<AppLayoutProps.Drawer>;\n\n  /**\n   * The active drawer id. If you want to clear the active drawer, use `null`.\n   */\n  activeDrawerId?: string | null;\n\n  /**\n   * Fired when the active drawer is toggled.\n   */\n  onDrawerChange?: NonCancelableEventHandler<AppLayoutProps.DrawerChangeDetail>;\n\n  /**\n   * If `true`, disables outer paddings for the content slot.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * State of the navigation drawer.\n   */\n  navigationOpen?: boolean;\n\n  /**\n   * Navigation drawer width in pixels.\n   */\n  navigationWidth?: number;\n\n  /**\n   * If `true`, the navigation drawer is not displayed at all.\n   */\n  navigationHide?: boolean;\n\n  /**\n   * State of the tools drawer.\n   */\n  toolsOpen?: boolean;\n\n  /**\n   * If `true`, the tools drawer is not displayed at all.\n   */\n  toolsHide?: boolean;\n\n  /**\n   * Tools drawer width in pixels.\n   */\n  toolsWidth?: number;\n\n  /**\n   * Maximum main content panel width in pixels.\n   *\n   * If set to `Number.MAX_VALUE`, the main content panel will occupy the full available width.\n   */\n  maxContentWidth?: number;\n\n  /**\n   * Minimum main content panel width in pixels.\n   */\n  minContentWidth?: number;\n\n  /**\n   * If true, the notification slot is rendered above the scrollable\n   * content area so it is always visible.\n   */\n  stickyNotifications?: boolean;\n\n  /**\n   * CSS selector for the application header.\n   */\n  headerSelector?: string;\n\n  /**\n   * CSS selector for the application footer.\n   */\n  footerSelector?: string;\n\n  /**\n   * Aria labels for the drawer operating buttons. Use this property to ensure accessibility.\n   *\n   * * `navigation` (string) - Label for the landmark that wraps the navigation drawer.\n   * * `navigationClose` (string) - Label for the button that closes the navigation drawer.\n   * * `navigationToggle` (string) - Label for the button that opens the navigation drawer.\n   * * `notification` (string) - Label for the region that contains notification messages.\n   * * `tools` (string) - Label for the landmark that wraps the tools drawer.\n   * * `toolsClose` (string) - Label for the button that closes the tools drawer.\n   * * `toolsToggle` (string) - Label for the button that opens the tools drawer.\n   * * `drawers` (string) - Label for the landmark that wraps the active drawer.\n   * * `drawersOverflow` (string) - Label for the ellipsis button with any overflow drawers.\n   * * `drawersOverflowWithBadge` (string) - Label for the ellipsis button with any overflow drawers, with a badge.\n   *\n   * Example:\n   * ```\n   * {\n   *   navigation: \"Navigation drawer\",\n   *   navigationClose: \"Close navigation drawer\",\n   *   navigationToggle: \"Open navigation drawer\",\n   *   notifications: \"Notifications\",\n   *   tools: \"Help panel\",\n   *   toolsClose: \"Close help panel\",\n   *   toolsToggle: \"Open help panel\",\n   *   drawers: \"Drawers\",\n   *   drawersOverflow: \"Overflow drawers\",\n   *   drawersOverflowWithBadge: \"Overflow drawers (Unread notifications)\"\n   * }\n   * ```\n   * @i18n\n   */\n  ariaLabels?: AppLayoutProps.Labels;\n\n  /**\n   * Navigation drawer.\n   */\n  navigation?: React.ReactNode;\n\n  /**\n   * Top area of the page content.\n   * @deprecated Replaced by the `header` slot of the [content layout](/components/content-layout/) component.\n   * @visualrefresh\n   */\n  contentHeader?: React.ReactNode;\n\n  /**\n   * Disables overlap between `contentHeader` and `content` slots.\n   * @deprecated Replaced by the `disableOverlap` property of the [content layout](/components/content-layout/) component.\n   * @visualrefresh\n   */\n  disableContentHeaderOverlap?: boolean;\n\n  /**\n   * Determines the visual treatment for the breadcrumbs and notifications slots. Specifically:\n   * * `default` - Does not apply any visual treatment.\n   * * `high-contrast` - Applies high-contrast to both slots. Use in conjunction with `headerVariant=\"high-contrast\"` in ContentLayout.\n   * @visualrefresh\n   */\n  headerVariant?: 'default' | 'high-contrast';\n\n  /**\n   * Main content.\n   */\n  content?: React.ReactNode;\n\n  /**\n   * Tools drawer.\n   */\n  tools?: React.ReactNode;\n\n  /**\n   * Displayed on top of the main content in the scrollable area.\n   *\n   * Conceived to contain notifications (flash messages).\n   */\n  notifications?: React.ReactNode;\n\n  /**\n   * Use this slot to add the [breadcrumb group component](/components/breadcrumb-group/) to the app layout.\n   */\n  breadcrumbs?: React.ReactNode;\n\n  /**\n   * Fired when the navigation drawer is toggled.\n   */\n  onNavigationChange?: NonCancelableEventHandler<AppLayoutProps.ChangeDetail>;\n\n  /**\n   * Fired when the tools drawer is toggled.\n   */\n  onToolsChange?: NonCancelableEventHandler<AppLayoutProps.ChangeDetail>;\n\n  /**\n   * Use this slot to add the [split panel component](/components/split-panel/) to the app layout.\n   *\n   * Note: If provided, this property should be set to `null` or `undefined` if a split panel should not be rendered.\n   */\n  splitPanel?: React.ReactNode;\n\n  /**\n   * The size of the split panel in pixels.\n   */\n  splitPanelSize?: number;\n\n  /**\n   * State of the split panel.\n   */\n  splitPanelOpen?: boolean;\n  /**\n   * Controls the split panel preferences.\n   *\n   * By default, the preference is `{ position: 'bottom' }`\n   */\n  splitPanelPreferences?: AppLayoutProps.SplitPanelPreferences;\n  /**\n   * Fired when the split panel is resized.\n   */\n  onSplitPanelResize?: NonCancelableEventHandler<AppLayoutProps.SplitPanelResizeDetail>;\n  /**\n   * Fired when the split panel is toggled.\n   */\n  onSplitPanelToggle?: NonCancelableEventHandler<AppLayoutProps.ChangeDetail>;\n  /**\n   * Fired when the split panel preferences change.\n   */\n  onSplitPanelPreferencesChange?: NonCancelableEventHandler<AppLayoutProps.SplitPanelPreferences>;\n}\n\nexport interface AppLayoutProps extends BaseLayoutProps {\n  /**\n   * Activates a backwards-compatibility mode for applications with non-fixed headers and footers.\n   * @deprecated This layout is being phased out and may miss some features.\n   */\n  disableBodyScroll?: boolean;\n}\n\nexport namespace AppLayoutProps {\n  export interface AnalyticsMetadata {\n    instanceIdentifier?: string;\n    flowType?: FlowType;\n  }\n\n  export type ContentType = 'default' | 'form' | 'table' | 'cards' | 'wizard' | 'dashboard';\n\n  export interface Ref {\n    /**\n     * Manually closes the navigation drawer if it is necessary for the current\n     * viewport size.\n     */\n    closeNavigationIfNecessary(): void;\n\n    /**\n     * Opens the tools panel if it is not already open. Note that it is preferable\n     * to control the state by listening to `toolsChange` and providing `toolsOpen`.\n     */\n    openTools(): void;\n\n    /**\n     * Focuses the tools panel if it is open. Use this to focus the tools panel\n     * after changing the content, for example when clicking on an 'info' link while\n     * the panel is already open.\n     */\n    focusToolsClose(): void;\n\n    /**\n     * Focuses the active drawer. Use this to focus the active drawer after opening it programmatically.\n     */\n    focusActiveDrawer(): void;\n\n    /**\n     * Focuses the split panel if it is open.\n     */\n    focusSplitPanel(): void;\n  }\n\n  export interface Drawer {\n    id: string;\n    content: React.ReactNode;\n    trigger?: {\n      iconName?: IconProps.Name;\n      iconSvg?: React.ReactNode;\n    };\n    ariaLabels: DrawerAriaLabels;\n    badge?: boolean;\n    resizable?: boolean;\n    defaultSize?: number;\n    onResize?: NonCancelableEventHandler<{ size: number }>;\n    preserveInactiveContent?: boolean;\n  }\n\n  export interface DrawerAriaLabels {\n    drawerName: string;\n    closeButton?: string;\n    triggerButton?: string;\n    resizeHandle?: string;\n  }\n\n  export interface Labels {\n    notifications?: string;\n\n    navigation?: string;\n    navigationToggle?: string;\n    navigationClose?: string;\n\n    tools?: string;\n    toolsToggle?: string;\n    toolsClose?: string;\n\n    drawers?: string;\n    drawersOverflow?: string;\n    drawersOverflowWithBadge?: string;\n  }\n\n  export interface ChangeDetail {\n    open: boolean;\n  }\n\n  export interface SplitPanelResizeDetail {\n    size: number;\n  }\n\n  export interface SplitPanelPreferences {\n    position: 'side' | 'bottom';\n  }\n  // Duplicated the positions because using this definition in SplitPanelPreferences would display\n  // 'AppLayoutProps.SplitPanelPosition' on the API docs instead of the string values.\n  export type SplitPanelPosition = 'side' | 'bottom';\n\n  export interface DrawerChangeDetail {\n    activeDrawerId: string | null;\n  }\n}\n\nexport type AppLayoutPropsWithDefaults = SomeRequired<\n  Omit<AppLayoutProps, 'headerSelector' | 'footerSelector'>,\n  'contentType' | 'navigationWidth' | 'toolsWidth' | 'minContentWidth' | 'navigationOpen' | 'onNavigationChange'\n> & {\n  placement: {\n    insetBlockStart: number;\n    insetBlockEnd: number;\n    insetInlineStart: number;\n    insetInlineEnd: number;\n    inlineSize: number;\n  };\n};\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/app-layout/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { IconProps } from '../icon/interfaces';\nimport { FlowType } from '../internal/analytics/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { SomeRequired } from '../internal/types';\n\nexport interface BaseLayoutProps extends BaseComponentProps {\n  /**\n   * Specifies additional analytics-related metadata.\n   * * `instanceIdentifier` - A unique string that identifies this component instance in your application.\n   * * `flowType` -  Identifies the type of flow represented by the component.\n   * **Note:** This API is currently experimental.\n   * @analytics\n   */\n  analyticsMetadata?: AppLayoutProps.AnalyticsMetadata;\n\n  /**\n   * Determines the default behavior of the component based on some predefined page layouts.\n   * Individual properties will always take precedence over the default coming from the content type.\n   */\n  contentType?: AppLayoutProps.ContentType;\n\n  /**\n   * Drawers property. If you set both `drawers` and `tools`, `drawers` will take precedence.\n\n   * Each Drawer is an item in the drawers wrapper with the following properties:\n   * * id (string) - the id of the drawer.\n   * * content (React.ReactNode) - the content in the drawer.\n   * * trigger (DrawerTrigger) - the button that opens and closes the active drawer.\n   * * ariaLabels (DrawerAriaLabels) - the labels for the interactive elements of the drawer.\n   * * badge (boolean) - Adds a badge to the corner of the icon to indicate a state change. For example: Unread notifications.\n   * * resizable (boolean) - if the drawer is resizable or not.\n   * * defaultSize (number) - starting size of the drawer. if not set, defaults to 290.\n   * * onResize (({ size: number }) => void) - Fired when the active drawer is resized.\n   *\n   * #### DrawerTrigger\n   * - `iconName` (IconProps.Name) - (Optional) Specifies the icon to be displayed.\n   * - `iconSvg` (React.ReactNode) - (Optional) Specifies the SVG of a custom icon. For more information, see [SVG icon guidelines](/components/icon/?tabId=api#slots)\n   *\n   * #### DrawerAriaLabels\n   * - `drawerName` (string) - Label for the drawer itself, and for the drawer trigger button tooltip text.\n   * - `closeButton` (string) - (Optional) Label for the close button.\n   * - `triggerButton` (string) - (Optional) Label for the trigger button.\n   * - `resizeHandle` (string) - (Optional) Label for the resize handle.\n   */\n  drawers?: Array<AppLayoutProps.Drawer>;\n\n  /**\n   * The active drawer id. If you want to clear the active drawer, use `null`.\n   */\n  activeDrawerId?: string | null;\n\n  /**\n   * Fired when the active drawer is toggled.\n   */\n  onDrawerChange?: NonCancelableEventHandler<AppLayoutProps.DrawerChangeDetail>;\n\n  /**\n   * If `true`, disables outer paddings for the content slot.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * State of the navigation drawer.\n   */\n  navigationOpen?: boolean;\n\n  /**\n   * Navigation drawer width in pixels.\n   */\n  navigationWidth?: number;\n\n  /**\n   * If `true`, the navigation drawer is not displayed at all.\n   */\n  navigationHide?: boolean;\n\n  /**\n   * State of the tools drawer.\n   */\n  toolsOpen?: boolean;\n\n  /**\n   * If `true`, the tools drawer is not displayed at all.\n   */\n  toolsHide?: boolean;\n\n  /**\n   * Tools drawer width in pixels.\n   */\n  toolsWidth?: number;\n\n  /**\n   * Maximum main content panel width in pixels.\n   *\n   * If set to `Number.MAX_VALUE`, the main content panel will occupy the full available width.\n   */\n  maxContentWidth?: number;\n\n  /**\n   * Minimum main content panel width in pixels.\n   */\n  minContentWidth?: number;\n\n  /**\n   * If true, the notification slot is rendered above the scrollable\n   * content area so it is always visible.\n   */\n  stickyNotifications?: boolean;\n\n  /**\n   * CSS selector for the application header.\n   */\n  headerSelector?: string;\n\n  /**\n   * CSS selector for the application footer.\n   */\n  footerSelector?: string;\n\n  /**\n   * Aria labels for the drawer operating buttons. Use this property to ensure accessibility.\n   *\n   * * `navigation` (string) - Label for the landmark that wraps the navigation drawer.\n   * * `navigationClose` (string) - Label for the button that closes the navigation drawer.\n   * * `navigationToggle` (string) - Label for the button that opens the navigation drawer.\n   * * `notification` (string) - Label for the region that contains notification messages.\n   * * `tools` (string) - Label for the landmark that wraps the tools drawer.\n   * * `toolsClose` (string) - Label for the button that closes the tools drawer.\n   * * `toolsToggle` (string) - Label for the button that opens the tools drawer.\n   * * `drawers` (string) - Label for the landmark that wraps the active drawer.\n   * * `drawersOverflow` (string) - Label for the ellipsis button with any overflow drawers.\n   * * `drawersOverflowWithBadge` (string) - Label for the ellipsis button with any overflow drawers, with a badge.\n   *\n   * Example:\n   * ```\n   * {\n   *   navigation: \"Navigation drawer\",\n   *   navigationClose: \"Close navigation drawer\",\n   *   navigationToggle: \"Open navigation drawer\",\n   *   notifications: \"Notifications\",\n   *   tools: \"Help panel\",\n   *   toolsClose: \"Close help panel\",\n   *   toolsToggle: \"Open help panel\",\n   *   drawers: \"Drawers\",\n   *   drawersOverflow: \"Overflow drawers\",\n   *   drawersOverflowWithBadge: \"Overflow drawers (Unread notifications)\"\n   * }\n   * ```\n   * @i18n\n   */\n  ariaLabels?: AppLayoutProps.Labels;\n\n  /**\n   * Navigation drawer.\n   */\n  navigation?: React.ReactNode;\n\n  /**\n   * Top area of the page content.\n   * @deprecated Replaced by the `header` slot of the [content layout](/components/content-layout/) component.\n   * @visualrefresh\n   */\n  contentHeader?: React.ReactNode;\n\n  /**\n   * Disables overlap between `contentHeader` and `content` slots.\n   * @deprecated Replaced by the `disableOverlap` property of the [content layout](/components/content-layout/) component.\n   * @visualrefresh\n   */\n  disableContentHeaderOverlap?: boolean;\n\n  /**\n   * Determines the visual treatment for the breadcrumbs and notifications slots. Specifically:\n   * * `default` - Does not apply any visual treatment.\n   * * `high-contrast` - Applies high-contrast to both slots. Use in conjunction with `headerVariant=\"high-contrast\"` in ContentLayout.\n   * @visualrefresh\n   */\n  headerVariant?: 'default' | 'high-contrast';\n\n  /**\n   * Main content.\n   */\n  content?: React.ReactNode;\n\n  /**\n   * Tools drawer.\n   */\n  tools?: React.ReactNode;\n\n  /**\n   * Displayed on top of the main content in the scrollable area.\n   *\n   * Conceived to contain notifications (flash messages).\n   */\n  notifications?: React.ReactNode;\n\n  /**\n   * Use this slot to add the [breadcrumb group component](/components/breadcrumb-group/) to the app layout.\n   */\n  breadcrumbs?: React.ReactNode;\n\n  /**\n   * Fired when the navigation drawer is toggled.\n   */\n  onNavigationChange?: NonCancelableEventHandler<AppLayoutProps.ChangeDetail>;\n\n  /**\n   * Fired when the tools drawer is toggled.\n   */\n  onToolsChange?: NonCancelableEventHandler<AppLayoutProps.ChangeDetail>;\n\n  /**\n   * Use this slot to add the [split panel component](/components/split-panel/) to the app layout.\n   *\n   * Note: If provided, this property should be set to `null` or `undefined` if a split panel should not be rendered.\n   */\n  splitPanel?: React.ReactNode;\n\n  /**\n   * The size of the split panel in pixels.\n   */\n  splitPanelSize?: number;\n\n  /**\n   * State of the split panel.\n   */\n  splitPanelOpen?: boolean;\n  /**\n   * Controls the split panel preferences.\n   *\n   * By default, the preference is `{ position: 'bottom' }`\n   */\n  splitPanelPreferences?: AppLayoutProps.SplitPanelPreferences;\n  /**\n   * Fired when the split panel is resized.\n   */\n  onSplitPanelResize?: NonCancelableEventHandler<AppLayoutProps.SplitPanelResizeDetail>;\n  /**\n   * Fired when the split panel is toggled.\n   */\n  onSplitPanelToggle?: NonCancelableEventHandler<AppLayoutProps.ChangeDetail>;\n  /**\n   * Fired when the split panel preferences change.\n   */\n  onSplitPanelPreferencesChange?: NonCancelableEventHandler<AppLayoutProps.SplitPanelPreferences>;\n}\n\nexport interface AppLayoutProps extends BaseLayoutProps {\n  /**\n   * Activates a backwards-compatibility mode for applications with non-fixed headers and footers.\n   * @deprecated This layout is being phased out and may miss some features.\n   */\n  disableBodyScroll?: boolean;\n}\n\nexport namespace AppLayoutProps {\n  export interface AnalyticsMetadata {\n    instanceIdentifier?: string;\n    flowType?: FlowType;\n  }\n\n  export type ContentType = 'default' | 'form' | 'table' | 'cards' | 'wizard' | 'dashboard';\n\n  export interface Ref {\n    /**\n     * Manually closes the navigation drawer if it is necessary for the current\n     * viewport size.\n     */\n    closeNavigationIfNecessary(): void;\n\n    /**\n     * Opens the tools panel if it is not already open. Note that it is preferable\n     * to control the state by listening to `toolsChange` and providing `toolsOpen`.\n     */\n    openTools(): void;\n\n    /**\n     * Focuses the tools panel if it is open. Use this to focus the tools panel\n     * after changing the content, for example when clicking on an 'info' link while\n     * the panel is already open.\n     */\n    focusToolsClose(): void;\n\n    /**\n     * Focuses the active drawer. Use this to focus the active drawer after opening it programmatically.\n     */\n    focusActiveDrawer(): void;\n\n    /**\n     * Focuses the split panel if it is open.\n     */\n    focusSplitPanel(): void;\n  }\n\n  export interface Drawer {\n    id: string;\n    content: React.ReactNode;\n    trigger?: {\n      iconName?: IconProps.Name;\n      iconSvg?: React.ReactNode;\n    };\n    ariaLabels: DrawerAriaLabels;\n    badge?: boolean;\n    resizable?: boolean;\n    defaultSize?: number;\n    onResize?: NonCancelableEventHandler<{ size: number }>;\n    preserveInactiveContent?: boolean;\n  }\n\n  export interface DrawerAriaLabels {\n    drawerName: string;\n    closeButton?: string;\n    triggerButton?: string;\n    resizeHandle?: string;\n    resizeHandleTooltipText?: string;\n  }\n\n  export interface Labels {\n    notifications?: string;\n\n    navigation?: string;\n    navigationToggle?: string;\n    navigationClose?: string;\n\n    tools?: string;\n    toolsToggle?: string;\n    toolsClose?: string;\n\n    drawers?: string;\n    drawersOverflow?: string;\n    drawersOverflowWithBadge?: string;\n  }\n\n  export interface ChangeDetail {\n    open: boolean;\n  }\n\n  export interface SplitPanelResizeDetail {\n    size: number;\n  }\n\n  export interface SplitPanelPreferences {\n    position: 'side' | 'bottom';\n  }\n  // Duplicated the positions because using this definition in SplitPanelPreferences would display\n  // 'AppLayoutProps.SplitPanelPosition' on the API docs instead of the string values.\n  export type SplitPanelPosition = 'side' | 'bottom';\n\n  export interface DrawerChangeDetail {\n    activeDrawerId: string | null;\n  }\n}\n\nexport type AppLayoutPropsWithDefaults = SomeRequired<\n  Omit<AppLayoutProps, 'headerSelector' | 'footerSelector'>,\n  'contentType' | 'navigationWidth' | 'toolsWidth' | 'minContentWidth' | 'navigationOpen' | 'onNavigationChange'\n> & {\n  placement: {\n    insetBlockStart: number;\n    insetBlockEnd: number;\n    insetInlineStart: number;\n    insetInlineEnd: number;\n    inlineSize: number;\n  };\n};\n"]}

package/app-layout/notifications/styles.css.js

@@ -1,8 +1,8 @@
 
     import './styles.scoped.css';
     export default {
-  "notifications": "awsui_notifications_1hmm4_1okmk_9",
-  "notifications-sticky": "awsui_notifications-sticky_1hmm4_1okmk_10",
-  "no-content-paddings": "awsui_no-content-paddings_1hmm4_1okmk_25"
+  "notifications": "awsui_notifications_1hmm4_1d3vc_9",
+  "notifications-sticky": "awsui_notifications-sticky_1hmm4_1d3vc_10",
+  "no-content-paddings": "awsui_no-content-paddings_1hmm4_1d3vc_25"
 };
   

package/app-layout/notifications/styles.scoped.css

@@ -6,26 +6,26 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_notifications_1hmm4_1okmk_9:not(#\9),
-.awsui_notifications-sticky_1hmm4_1okmk_10:not(#\9) {
+.awsui_notifications_1hmm4_1d3vc_9:not(#\9),
+.awsui_notifications-sticky_1hmm4_1d3vc_10:not(#\9) {
   z-index: 850;
 }
 
-.awsui_notifications_1hmm4_1okmk_9:not(#\9) {
+.awsui_notifications_1hmm4_1d3vc_9:not(#\9) {
   /* This is necessary for the z-index to have effect */
   position: relative;
 }
 
-.awsui_notifications-sticky_1hmm4_1okmk_10:not(#\9) {
+.awsui_notifications-sticky_1hmm4_1d3vc_10:not(#\9) {
   inset-block-start: 0;
   position: sticky;
-  --awsui-flashbar-sticky-bottom-margin-g964ok: var(--space-xxl-32srm4, 32px);
+  --awsui-flashbar-sticky-bottom-margin-xgujsu: var(--space-xxl-32srm4, 32px);
 }
 
-.awsui_no-content-paddings_1hmm4_1okmk_25:not(#\9) {
+.awsui_no-content-paddings_1hmm4_1d3vc_25:not(#\9) {
   /*
   When using the disableContentPaddings option, the Flashbar will use this custom property to add additional space
   when the notification bar is rendered, to prevent it from overlapping the content.
    */
-  --awsui-stacked-notifications-bottom-margin-g964ok: var(--space-scaled-l-sej05l, 20px);
+  --awsui-stacked-notifications-bottom-margin-xgujsu: var(--space-scaled-l-sej05l, 20px);
 }

package/app-layout/notifications/styles.selectors.js

@@ -2,8 +2,8 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "notifications": "awsui_notifications_1hmm4_1okmk_9",
-  "notifications-sticky": "awsui_notifications-sticky_1hmm4_1okmk_10",
-  "no-content-paddings": "awsui_no-content-paddings_1hmm4_1okmk_25"
+  "notifications": "awsui_notifications_1hmm4_1d3vc_9",
+  "notifications-sticky": "awsui_notifications-sticky_1hmm4_1d3vc_10",
+  "no-content-paddings": "awsui_no-content-paddings_1hmm4_1d3vc_25"
 };
   

package/app-layout/utils/use-keyboard-events.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
+import { Direction } from '../../internal/components/drag-handle-wrapper/interfaces';
 import { SizeControlProps } from './interfaces';
-export declare const useKeyboardEvents: ({ position, onResize, panelRef }: SizeControlProps) => (event: React.KeyboardEvent<HTMLElement>) => void;
+export declare const useKeyboardEvents: ({ position, onResize, panelRef }: SizeControlProps) => {
+    onDirectionClick: (direction: Direction) => void;
+    onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
+};
 //# sourceMappingURL=use-keyboard-events.d.ts.map

package/app-layout/utils/use-keyboard-events.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-keyboard-events.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-keyboard-events.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAmBhD,eAAO,MAAM,iBAAiB,qCAAsC,gBAAgB,aACnE,mBAAmB,CAAC,WAAW,CAAC,SAgDhD,CAAC"}
+{"version":3,"file":"use-keyboard-events.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-keyboard-events.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,0DAA0D,CAAC;AAErF,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAmBhD,eAAO,MAAM,iBAAiB,qCAAsC,gBAAgB;kCAElD,SAAS;uBA0BpB,mBAAmB,CAAC,WAAW,CAAC;CAgDtD,CAAC"}

package/app-layout/utils/use-keyboard-events.js

@@ -14,48 +14,71 @@ const getCurrentSize = (panelRef) => {
     };
 };
 export const useKeyboardEvents = ({ position, onResize, panelRef }) => {
-    return (event) => {
-        let currentSize;
-        let maxSize;
-        const { panelHeight, panelWidth } = getCurrentSize(panelRef);
-        if (position === 'side') {
-            currentSize = panelWidth;
-            // don't need the exact max size as it's constrained in the set size function
-            maxSize = window.innerWidth;
-        }
-        else {
-            currentSize = panelHeight;
-            // don't need the exact max size as it's constrained in the set size function
-            maxSize = window.innerHeight;
-        }
-        let isEventHandled = true;
-        const singleStepUp = () => onResize(currentSize + KEYBOARD_SINGLE_STEP_SIZE);
-        const singleStepDown = () => onResize(currentSize - KEYBOARD_SINGLE_STEP_SIZE);
-        const multipleStepUp = () => onResize(currentSize + KEYBOARD_MULTIPLE_STEPS_SIZE);
-        const multipleStepDown = () => onResize(currentSize - KEYBOARD_MULTIPLE_STEPS_SIZE);
-        handleKey(event, {
-            onBlockStart: () => {
-                position === 'bottom' ? singleStepUp() : singleStepDown();
-            },
-            onBlockEnd: () => {
-                position === 'bottom' ? singleStepDown() : singleStepUp();
-            },
-            onInlineEnd: () => {
-                position === 'bottom' ? singleStepUp() : singleStepDown();
-            },
-            onInlineStart: () => {
-                position === 'bottom' ? singleStepDown() : singleStepUp();
-            },
-            onPageDown: () => multipleStepDown(),
-            onPageUp: () => multipleStepUp(),
-            onHome: () => onResize(maxSize),
-            onEnd: () => onResize(0),
-            onDefault: () => (isEventHandled = false),
-        });
-        if (isEventHandled) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
+    return {
+        onDirectionClick: (direction) => {
+            let currentSize;
+            const { panelHeight, panelWidth } = getCurrentSize(panelRef);
+            if (position === 'side') {
+                currentSize = panelWidth;
+            }
+            else {
+                currentSize = panelHeight;
+            }
+            const singleStepUp = () => onResize(currentSize + KEYBOARD_SINGLE_STEP_SIZE);
+            const singleStepDown = () => onResize(currentSize - KEYBOARD_SINGLE_STEP_SIZE);
+            switch (direction) {
+                case 'block-start':
+                case 'inline-start':
+                    singleStepUp();
+                    break;
+                case 'block-end':
+                case 'inline-end':
+                    singleStepDown();
+                    break;
+            }
+        },
+        onKeyDown: (event) => {
+            let currentSize;
+            let maxSize;
+            const { panelHeight, panelWidth } = getCurrentSize(panelRef);
+            if (position === 'side') {
+                currentSize = panelWidth;
+                // don't need the exact max size as it's constrained in the set size function
+                maxSize = window.innerWidth;
+            }
+            else {
+                currentSize = panelHeight;
+                // don't need the exact max size as it's constrained in the set size function
+                maxSize = window.innerHeight;
+            }
+            let isEventHandled = true;
+            const singleStepUp = () => onResize(currentSize + KEYBOARD_SINGLE_STEP_SIZE);
+            const singleStepDown = () => onResize(currentSize - KEYBOARD_SINGLE_STEP_SIZE);
+            const multipleStepUp = () => onResize(currentSize + KEYBOARD_MULTIPLE_STEPS_SIZE);
+            const multipleStepDown = () => onResize(currentSize - KEYBOARD_MULTIPLE_STEPS_SIZE);
+            handleKey(event, {
+                onBlockStart: () => {
+                    position === 'bottom' ? singleStepUp() : singleStepDown();
+                },
+                onBlockEnd: () => {
+                    position === 'bottom' ? singleStepDown() : singleStepUp();
+                },
+                onInlineEnd: () => {
+                    position === 'bottom' ? singleStepUp() : singleStepDown();
+                },
+                onInlineStart: () => {
+                    position === 'bottom' ? singleStepDown() : singleStepUp();
+                },
+                onPageDown: () => multipleStepDown(),
+                onPageUp: () => multipleStepUp(),
+                onHome: () => onResize(maxSize),
+                onEnd: () => onResize(0),
+                onDefault: () => (isEventHandled = false),
+            });
+            if (isEventHandled) {
+                event.preventDefault();
+            }
+        },
     };
 };
 //# sourceMappingURL=use-keyboard-events.js.map

package/app-layout/utils/use-keyboard-events.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-keyboard-events.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-keyboard-events.ts"],"names":[],"mappings":"AAIA,OAAO,SAAS,MAAM,iCAAiC,CAAC;AAGxD,MAAM,yBAAyB,GAAG,EAAE,CAAC;AACrC,MAAM,4BAA4B,GAAG,EAAE,CAAC;AAExC,MAAM,cAAc,GAAG,CAAC,QAA0C,EAAE,EAAE;IACpE,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;QAClC,OAAO;YACL,WAAW,EAAE,CAAC;YACd,UAAU,EAAE,CAAC;SACd,CAAC;KACH;IAED,OAAO;QACL,WAAW,EAAE,QAAQ,CAAC,OAAO,CAAC,YAAY;QAC1C,UAAU,EAAE,QAAQ,CAAC,OAAO,CAAC,WAAW;KACzC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAoB,EAAE,EAAE;IACtF,OAAO,CAAC,KAAuC,EAAE,EAAE;QACjD,IAAI,WAAmB,CAAC;QACxB,IAAI,OAAe,CAAC;QAEpB,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;QAE7D,IAAI,QAAQ,KAAK,MAAM,EAAE;YACvB,WAAW,GAAG,UAAU,CAAC;YACzB,6EAA6E;YAC7E,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC;SAC7B;aAAM;YACL,WAAW,GAAG,WAAW,CAAC;YAC1B,6EAA6E;YAC7E,OAAO,GAAG,MAAM,CAAC,WAAW,CAAC;SAC9B;QAED,IAAI,cAAc,GAAG,IAAI,CAAC;QAE1B,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,WAAW,GAAG,yBAAyB,CAAC,CAAC;QAC7E,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,WAAW,GAAG,yBAAyB,CAAC,CAAC;QAC/E,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,WAAW,GAAG,4BAA4B,CAAC,CAAC;QAClF,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,WAAW,GAAG,4BAA4B,CAAC,CAAC;QAEpF,SAAS,CAAC,KAAK,EAAE;YACf,YAAY,EAAE,GAAG,EAAE;gBACjB,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,CAAC;YAC5D,CAAC;YACD,UAAU,EAAE,GAAG,EAAE;gBACf,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC;YAC5D,CAAC;YACD,WAAW,EAAE,GAAG,EAAE;gBAChB,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,CAAC;YAC5D,CAAC;YACD,aAAa,EAAE,GAAG,EAAE;gBAClB,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC;YAC5D,CAAC;YACD,UAAU,EAAE,GAAG,EAAE,CAAC,gBAAgB,EAAE;YACpC,QAAQ,EAAE,GAAG,EAAE,CAAC,cAAc,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC;YAC/B,KAAK,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;YACxB,SAAS,EAAE,GAAG,EAAE,CAAC,CAAC,cAAc,GAAG,KAAK,CAAC;SAC1C,CAAC,CAAC;QAEH,IAAI,cAAc,EAAE;YAClB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;SACzB;IACH,CAAC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport handleKey from '../../internal/utils/handle-key';\nimport { SizeControlProps } from './interfaces';\n\nconst KEYBOARD_SINGLE_STEP_SIZE = 10;\nconst KEYBOARD_MULTIPLE_STEPS_SIZE = 60;\n\nconst getCurrentSize = (panelRef?: React.RefObject<HTMLDivElement>) => {\n  if (!panelRef || !panelRef.current) {\n    return {\n      panelHeight: 0,\n      panelWidth: 0,\n    };\n  }\n\n  return {\n    panelHeight: panelRef.current.clientHeight,\n    panelWidth: panelRef.current.clientWidth,\n  };\n};\n\nexport const useKeyboardEvents = ({ position, onResize, panelRef }: SizeControlProps) => {\n  return (event: React.KeyboardEvent<HTMLElement>) => {\n    let currentSize: number;\n    let maxSize: number;\n\n    const { panelHeight, panelWidth } = getCurrentSize(panelRef);\n\n    if (position === 'side') {\n      currentSize = panelWidth;\n      // don't need the exact max size as it's constrained in the set size function\n      maxSize = window.innerWidth;\n    } else {\n      currentSize = panelHeight;\n      // don't need the exact max size as it's constrained in the set size function\n      maxSize = window.innerHeight;\n    }\n\n    let isEventHandled = true;\n\n    const singleStepUp = () => onResize(currentSize + KEYBOARD_SINGLE_STEP_SIZE);\n    const singleStepDown = () => onResize(currentSize - KEYBOARD_SINGLE_STEP_SIZE);\n    const multipleStepUp = () => onResize(currentSize + KEYBOARD_MULTIPLE_STEPS_SIZE);\n    const multipleStepDown = () => onResize(currentSize - KEYBOARD_MULTIPLE_STEPS_SIZE);\n\n    handleKey(event, {\n      onBlockStart: () => {\n        position === 'bottom' ? singleStepUp() : singleStepDown();\n      },\n      onBlockEnd: () => {\n        position === 'bottom' ? singleStepDown() : singleStepUp();\n      },\n      onInlineEnd: () => {\n        position === 'bottom' ? singleStepUp() : singleStepDown();\n      },\n      onInlineStart: () => {\n        position === 'bottom' ? singleStepDown() : singleStepUp();\n      },\n      onPageDown: () => multipleStepDown(),\n      onPageUp: () => multipleStepUp(),\n      onHome: () => onResize(maxSize),\n      onEnd: () => onResize(0),\n      onDefault: () => (isEventHandled = false),\n    });\n\n    if (isEventHandled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n};\n"]}
+{"version":3,"file":"use-keyboard-events.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-keyboard-events.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { Direction } from '../../internal/components/drag-handle-wrapper/interfaces';\nimport handleKey from '../../internal/utils/handle-key';\nimport { SizeControlProps } from './interfaces';\n\nconst KEYBOARD_SINGLE_STEP_SIZE = 10;\nconst KEYBOARD_MULTIPLE_STEPS_SIZE = 60;\n\nconst getCurrentSize = (panelRef?: React.RefObject<HTMLDivElement>) => {\n  if (!panelRef || !panelRef.current) {\n    return {\n      panelHeight: 0,\n      panelWidth: 0,\n    };\n  }\n\n  return {\n    panelHeight: panelRef.current.clientHeight,\n    panelWidth: panelRef.current.clientWidth,\n  };\n};\n\nexport const useKeyboardEvents = ({ position, onResize, panelRef }: SizeControlProps) => {\n  return {\n    onDirectionClick: (direction: Direction) => {\n      let currentSize: number;\n\n      const { panelHeight, panelWidth } = getCurrentSize(panelRef);\n\n      if (position === 'side') {\n        currentSize = panelWidth;\n      } else {\n        currentSize = panelHeight;\n      }\n\n      const singleStepUp = () => onResize(currentSize + KEYBOARD_SINGLE_STEP_SIZE);\n      const singleStepDown = () => onResize(currentSize - KEYBOARD_SINGLE_STEP_SIZE);\n\n      switch (direction) {\n        case 'block-start':\n        case 'inline-start':\n          singleStepUp();\n          break;\n        case 'block-end':\n        case 'inline-end':\n          singleStepDown();\n          break;\n      }\n    },\n\n    onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => {\n      let currentSize: number;\n      let maxSize: number;\n\n      const { panelHeight, panelWidth } = getCurrentSize(panelRef);\n\n      if (position === 'side') {\n        currentSize = panelWidth;\n        // don't need the exact max size as it's constrained in the set size function\n        maxSize = window.innerWidth;\n      } else {\n        currentSize = panelHeight;\n        // don't need the exact max size as it's constrained in the set size function\n        maxSize = window.innerHeight;\n      }\n\n      let isEventHandled = true;\n\n      const singleStepUp = () => onResize(currentSize + KEYBOARD_SINGLE_STEP_SIZE);\n      const singleStepDown = () => onResize(currentSize - KEYBOARD_SINGLE_STEP_SIZE);\n      const multipleStepUp = () => onResize(currentSize + KEYBOARD_MULTIPLE_STEPS_SIZE);\n      const multipleStepDown = () => onResize(currentSize - KEYBOARD_MULTIPLE_STEPS_SIZE);\n\n      handleKey(event, {\n        onBlockStart: () => {\n          position === 'bottom' ? singleStepUp() : singleStepDown();\n        },\n        onBlockEnd: () => {\n          position === 'bottom' ? singleStepDown() : singleStepUp();\n        },\n        onInlineEnd: () => {\n          position === 'bottom' ? singleStepUp() : singleStepDown();\n        },\n        onInlineStart: () => {\n          position === 'bottom' ? singleStepDown() : singleStepUp();\n        },\n        onPageDown: () => multipleStepDown(),\n        onPageUp: () => multipleStepUp(),\n        onHome: () => onResize(maxSize),\n        onEnd: () => onResize(0),\n        onDefault: () => (isEventHandled = false),\n      });\n\n      if (isEventHandled) {\n        event.preventDefault();\n      }\n    },\n  };\n};\n"]}

package/app-layout/utils/use-resize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-resize.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-resize.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAMvD,UAAU,iBAAiB;IACzB,YAAY,EAAE,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC;IAChD,gBAAgB,EAAE,MAAM,CAAC;IACzB,oBAAoB,EAAE,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACrE,WAAW,EAAE,gBAAgB,CAAC;IAC9B,WAAW,EAAE,OAAO,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,iBAAS,SAAS,CAChB,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAChD,EACE,YAAY,EACZ,gBAAgB,EAChB,oBAAoB,EACpB,WAAW,EACX,WAAW,EACX,eAAe,EACf,eAAe,GAChB,EAAE,iBAAiB;;;EAiDrB;AAED,eAAe,SAAS,CAAC"}
+{"version":3,"file":"use-resize.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-resize.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAMvD,UAAU,iBAAiB;IACzB,YAAY,EAAE,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC;IAChD,gBAAgB,EAAE,MAAM,CAAC;IACzB,oBAAoB,EAAE,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACrE,WAAW,EAAE,gBAAgB,CAAC;IAC9B,WAAW,EAAE,OAAO,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,iBAAS,SAAS,CAChB,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAChD,EACE,YAAY,EACZ,gBAAgB,EAChB,oBAAoB,EACpB,WAAW,EACX,WAAW,EACX,eAAe,EACf,eAAe,GAChB,EAAE,iBAAiB;;;EAmDrB;AAED,eAAe,SAAS,CAAC"}

package/app-layout/utils/use-resize.js

@@ -7,7 +7,7 @@ import { useKeyboardEvents } from './use-keyboard-events';
 import { usePointerEvents } from './use-pointer-events';
 import testutilStyles from '../test-classes/styles.css.js';
 function useResize(drawerRefObject, { activeDrawer, activeDrawerSize, onActiveDrawerResize, drawersRefs, isToolsOpen, drawersMinWidth, drawersMaxWidth, }) {
-    var _a;
+    var _a, _b;
     const [relativeSize, setRelativeSize] = useState(0);
     const drawerSize = !activeDrawer && !isToolsOpen ? 0 : activeDrawerSize;
     useEffect(() => {
@@ -34,8 +34,8 @@ function useResize(drawerRefObject, { activeDrawer, activeDrawerSize, onActiveDr
         onResize: setSidePanelWidth,
     };
     const onSliderPointerDown = usePointerEvents(sizeControlProps);
-    const onKeyDown = useKeyboardEvents(sizeControlProps);
-    const resizeHandle = (React.createElement(PanelResizeHandle, { ref: drawersRefs.slider, position: "side", ariaLabel: (_a = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _a === void 0 ? void 0 : _a.resizeHandle, ariaValuenow: relativeSize, className: testutilStyles['drawers-slider'], onKeyDown: onKeyDown, onPointerDown: onSliderPointerDown }));
+    const { onKeyDown, onDirectionClick } = useKeyboardEvents(sizeControlProps);
+    const resizeHandle = (React.createElement(PanelResizeHandle, { ref: drawersRefs.slider, position: "side", ariaLabel: (_a = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _a === void 0 ? void 0 : _a.resizeHandle, tooltipText: (_b = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _b === void 0 ? void 0 : _b.resizeHandleTooltipText, ariaValuenow: relativeSize, className: testutilStyles['drawers-slider'], onKeyDown: onKeyDown, onDirectionClick: onDirectionClick, onPointerDown: onSliderPointerDown }));
     return { resizeHandle, drawerSize };
 }
 export default useResize;

package/app-layout/utils/use-resize.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-resize.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-resize.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,iBAAiB,MAAM,+CAA+C,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAIrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAY3D,SAAS,SAAS,CAChB,eAAgD,EAChD,EACE,YAAY,EACZ,gBAAgB,EAChB,oBAAoB,EACpB,WAAW,EACX,WAAW,EACX,eAAe,EACf,eAAe,GACG;;IAEpB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEpD,MAAM,UAAU,GAAG,CAAC,YAAY,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC;IAExE,SAAS,CAAC,GAAG,EAAE;QACb,uDAAuD;QACvD,kEAAkE;QAClE,MAAM,MAAM,GAAG,qBAAqB,CAAC,GAAG,EAAE;YACxC,MAAM,OAAO,GAAG,eAAe,CAAC;YAChC,eAAe,CAAC,CAAC,CAAC,UAAU,GAAG,eAAe,CAAC,GAAG,CAAC,OAAO,GAAG,eAAe,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;QACxF,CAAC,CAAC,CAAC;QACH,OAAO,GAAG,EAAE,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC;IAC5C,CAAC,EAAE,CAAC,UAAU,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC;IAEnD,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAE,EAAE;QAC1C,MAAM,QAAQ,GAAG,eAAe,CAAC;QACjC,MAAM,IAAI,GAAG,eAAe,CAAC,eAAe,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;QAC/D,MAAM,EAAE,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,EAAE,CAAC;QAE5B,IAAI,EAAE,IAAI,QAAQ,IAAI,eAAe,EAAE;YACrC,oBAAoB,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;SACpC;IACH,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAqB;QACzC,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,eAAe;QACzB,SAAS,EAAE,WAAW,CAAC,MAAM;QAC7B,QAAQ,EAAE,iBAAiB;KAC5B,CAAC;IAEF,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAEtD,MAAM,YAAY,GAAG,CACnB,oBAAC,iBAAiB,IAChB,GAAG,EAAE,WAAW,CAAC,MAAM,EACvB,QAAQ,EAAC,MAAM,EACf,SAAS,EAAE,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,UAAU,0CAAE,YAAY,EACjD,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,cAAc,CAAC,gBAAgB,CAAC,EAC3C,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,mBAAmB,GAClC,CACH,CAAC;IAEF,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,CAAC;AACtC,CAAC;AAED,eAAe,SAAS,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useState } from 'react';\n\nimport PanelResizeHandle from '../../internal/components/panel-resize-handle';\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { AppLayoutProps } from '../interfaces';\nimport { SizeControlProps } from './interfaces';\nimport { FocusControlRefs } from './use-focus-control';\nimport { useKeyboardEvents } from './use-keyboard-events';\nimport { usePointerEvents } from './use-pointer-events';\n\nimport testutilStyles from '../test-classes/styles.css.js';\n\ninterface DrawerResizeProps {\n  activeDrawer: AppLayoutProps.Drawer | undefined;\n  activeDrawerSize: number;\n  onActiveDrawerResize: (detail: { id: string; size: number }) => void;\n  drawersRefs: FocusControlRefs;\n  isToolsOpen: boolean;\n  drawersMaxWidth: number;\n  drawersMinWidth: number;\n}\n\nfunction useResize(\n  drawerRefObject: React.RefObject<HTMLDivElement>,\n  {\n    activeDrawer,\n    activeDrawerSize,\n    onActiveDrawerResize,\n    drawersRefs,\n    isToolsOpen,\n    drawersMinWidth,\n    drawersMaxWidth,\n  }: DrawerResizeProps\n) {\n  const [relativeSize, setRelativeSize] = useState(0);\n\n  const drawerSize = !activeDrawer && !isToolsOpen ? 0 : activeDrawerSize;\n\n  useEffect(() => {\n    // effects are called inside out in the components tree\n    // wait one frame to allow app-layout to complete its calculations\n    const handle = requestAnimationFrame(() => {\n      const maxSize = drawersMaxWidth;\n      setRelativeSize(((drawerSize - drawersMinWidth) / (maxSize - drawersMinWidth)) * 100);\n    });\n    return () => cancelAnimationFrame(handle);\n  }, [drawerSize, drawersMaxWidth, drawersMinWidth]);\n\n  const setSidePanelWidth = (width: number) => {\n    const maxWidth = drawersMaxWidth;\n    const size = getLimitedValue(drawersMinWidth, width, maxWidth);\n    const id = activeDrawer?.id;\n\n    if (id && maxWidth >= drawersMinWidth) {\n      onActiveDrawerResize({ size, id });\n    }\n  };\n\n  const sizeControlProps: SizeControlProps = {\n    position: 'side',\n    panelRef: drawerRefObject,\n    handleRef: drawersRefs.slider,\n    onResize: setSidePanelWidth,\n  };\n\n  const onSliderPointerDown = usePointerEvents(sizeControlProps);\n  const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n  const resizeHandle = (\n    <PanelResizeHandle\n      ref={drawersRefs.slider}\n      position=\"side\"\n      ariaLabel={activeDrawer?.ariaLabels?.resizeHandle}\n      ariaValuenow={relativeSize}\n      className={testutilStyles['drawers-slider']}\n      onKeyDown={onKeyDown}\n      onPointerDown={onSliderPointerDown}\n    />\n  );\n\n  return { resizeHandle, drawerSize };\n}\n\nexport default useResize;\n"]}
+{"version":3,"file":"use-resize.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-resize.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,iBAAiB,MAAM,+CAA+C,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAIrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAY3D,SAAS,SAAS,CAChB,eAAgD,EAChD,EACE,YAAY,EACZ,gBAAgB,EAChB,oBAAoB,EACpB,WAAW,EACX,WAAW,EACX,eAAe,EACf,eAAe,GACG;;IAEpB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEpD,MAAM,UAAU,GAAG,CAAC,YAAY,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC;IAExE,SAAS,CAAC,GAAG,EAAE;QACb,uDAAuD;QACvD,kEAAkE;QAClE,MAAM,MAAM,GAAG,qBAAqB,CAAC,GAAG,EAAE;YACxC,MAAM,OAAO,GAAG,eAAe,CAAC;YAChC,eAAe,CAAC,CAAC,CAAC,UAAU,GAAG,eAAe,CAAC,GAAG,CAAC,OAAO,GAAG,eAAe,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;QACxF,CAAC,CAAC,CAAC;QACH,OAAO,GAAG,EAAE,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC;IAC5C,CAAC,EAAE,CAAC,UAAU,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC;IAEnD,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAE,EAAE;QAC1C,MAAM,QAAQ,GAAG,eAAe,CAAC;QACjC,MAAM,IAAI,GAAG,eAAe,CAAC,eAAe,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;QAC/D,MAAM,EAAE,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,EAAE,CAAC;QAE5B,IAAI,EAAE,IAAI,QAAQ,IAAI,eAAe,EAAE;YACrC,oBAAoB,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;SACpC;IACH,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAqB;QACzC,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,eAAe;QACzB,SAAS,EAAE,WAAW,CAAC,MAAM;QAC7B,QAAQ,EAAE,iBAAiB;KAC5B,CAAC;IAEF,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IAC/D,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAE5E,MAAM,YAAY,GAAG,CACnB,oBAAC,iBAAiB,IAChB,GAAG,EAAE,WAAW,CAAC,MAAM,EACvB,QAAQ,EAAC,MAAM,EACf,SAAS,EAAE,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,UAAU,0CAAE,YAAY,EACjD,WAAW,EAAE,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,UAAU,0CAAE,uBAAuB,EAC9D,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,cAAc,CAAC,gBAAgB,CAAC,EAC3C,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,gBAAgB,EAClC,aAAa,EAAE,mBAAmB,GAClC,CACH,CAAC;IAEF,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,CAAC;AACtC,CAAC;AAED,eAAe,SAAS,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useState } from 'react';\n\nimport PanelResizeHandle from '../../internal/components/panel-resize-handle';\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { AppLayoutProps } from '../interfaces';\nimport { SizeControlProps } from './interfaces';\nimport { FocusControlRefs } from './use-focus-control';\nimport { useKeyboardEvents } from './use-keyboard-events';\nimport { usePointerEvents } from './use-pointer-events';\n\nimport testutilStyles from '../test-classes/styles.css.js';\n\ninterface DrawerResizeProps {\n  activeDrawer: AppLayoutProps.Drawer | undefined;\n  activeDrawerSize: number;\n  onActiveDrawerResize: (detail: { id: string; size: number }) => void;\n  drawersRefs: FocusControlRefs;\n  isToolsOpen: boolean;\n  drawersMaxWidth: number;\n  drawersMinWidth: number;\n}\n\nfunction useResize(\n  drawerRefObject: React.RefObject<HTMLDivElement>,\n  {\n    activeDrawer,\n    activeDrawerSize,\n    onActiveDrawerResize,\n    drawersRefs,\n    isToolsOpen,\n    drawersMinWidth,\n    drawersMaxWidth,\n  }: DrawerResizeProps\n) {\n  const [relativeSize, setRelativeSize] = useState(0);\n\n  const drawerSize = !activeDrawer && !isToolsOpen ? 0 : activeDrawerSize;\n\n  useEffect(() => {\n    // effects are called inside out in the components tree\n    // wait one frame to allow app-layout to complete its calculations\n    const handle = requestAnimationFrame(() => {\n      const maxSize = drawersMaxWidth;\n      setRelativeSize(((drawerSize - drawersMinWidth) / (maxSize - drawersMinWidth)) * 100);\n    });\n    return () => cancelAnimationFrame(handle);\n  }, [drawerSize, drawersMaxWidth, drawersMinWidth]);\n\n  const setSidePanelWidth = (width: number) => {\n    const maxWidth = drawersMaxWidth;\n    const size = getLimitedValue(drawersMinWidth, width, maxWidth);\n    const id = activeDrawer?.id;\n\n    if (id && maxWidth >= drawersMinWidth) {\n      onActiveDrawerResize({ size, id });\n    }\n  };\n\n  const sizeControlProps: SizeControlProps = {\n    position: 'side',\n    panelRef: drawerRefObject,\n    handleRef: drawersRefs.slider,\n    onResize: setSidePanelWidth,\n  };\n\n  const onSliderPointerDown = usePointerEvents(sizeControlProps);\n  const { onKeyDown, onDirectionClick } = useKeyboardEvents(sizeControlProps);\n\n  const resizeHandle = (\n    <PanelResizeHandle\n      ref={drawersRefs.slider}\n      position=\"side\"\n      ariaLabel={activeDrawer?.ariaLabels?.resizeHandle}\n      tooltipText={activeDrawer?.ariaLabels?.resizeHandleTooltipText}\n      ariaValuenow={relativeSize}\n      className={testutilStyles['drawers-slider']}\n      onKeyDown={onKeyDown}\n      onDirectionClick={onDirectionClick}\n      onPointerDown={onSliderPointerDown}\n    />\n  );\n\n  return { resizeHandle, drawerSize };\n}\n\nexport default useResize;\n"]}

package/app-layout/visual-refresh/styles.css.js

@@ -1,91 +1,91 @@
 
     import './styles.scoped.css';
     export default {
-  "background": "awsui_background_hyvsj_1u3br_149",
-  "scrolling-background": "awsui_scrolling-background_hyvsj_1u3br_152",
-  "breadcrumbs": "awsui_breadcrumbs_hyvsj_1u3br_163",
-  "drawers-container": "awsui_drawers-container_hyvsj_1u3br_176",
-  "has-open-drawer": "awsui_has-open-drawer_hyvsj_1u3br_187",
-  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_1u3br_208",
-  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_1u3br_213",
-  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_1u3br_251",
-  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_hyvsj_1u3br_261",
-  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_1u3br_266",
-  "drawers-trigger-overflow": "awsui_drawers-trigger-overflow_hyvsj_1u3br_280",
-  "drawers-trigger": "awsui_drawers-trigger_hyvsj_1u3br_266",
-  "drawer": "awsui_drawer_hyvsj_1u3br_176",
-  "drawer-content-container": "awsui_drawer-content-container_hyvsj_1u3br_311",
-  "drawer-close-button": "awsui_drawer-close-button_hyvsj_1u3br_320",
-  "drawer-content": "awsui_drawer-content_hyvsj_1u3br_311",
-  "drawer-content-hidden": "awsui_drawer-content-hidden_hyvsj_1u3br_329",
-  "drawer-slider": "awsui_drawer-slider_hyvsj_1u3br_332",
-  "is-drawer-open": "awsui_is-drawer-open_hyvsj_1u3br_339",
-  "content": "awsui_content_hyvsj_1u3br_365",
-  "layout": "awsui_layout_hyvsj_1u3br_390",
-  "has-max-content-width": "awsui_has-max-content-width_hyvsj_1u3br_462",
-  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_1u3br_477",
-  "content-type-table": "awsui_content-type-table_hyvsj_1u3br_491",
-  "content-type-cards": "awsui_content-type-cards_hyvsj_1u3br_491",
-  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_1u3br_497",
-  "is-hide-mobile-toolbar": "awsui_is-hide-mobile-toolbar_hyvsj_1u3br_500",
-  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_1u3br_514",
-  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_1u3br_517",
-  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_1u3br_527",
-  "content-first-child-header": "awsui_content-first-child-header_hyvsj_1u3br_530",
-  "content-first-child-notifications": "awsui_content-first-child-notifications_hyvsj_1u3br_530",
-  "has-header": "awsui_has-header_hyvsj_1u3br_530",
-  "content-first-child-main": "awsui_content-first-child-main_hyvsj_1u3br_545",
-  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_1u3br_545",
-  "has-left-toggles-gutter": "awsui_has-left-toggles-gutter_hyvsj_1u3br_565",
-  "has-right-toggles-gutter": "awsui_has-right-toggles-gutter_hyvsj_1u3br_568",
-  "has-split-panel": "awsui_has-split-panel_hyvsj_1u3br_588",
-  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_1u3br_588",
-  "block-body-scroll": "awsui_block-body-scroll_hyvsj_1u3br_596",
-  "unfocusable": "awsui_unfocusable_hyvsj_1u3br_601",
-  "container": "awsui_container_hyvsj_1u3br_611",
-  "is-navigation-open": "awsui_is-navigation-open_hyvsj_1u3br_637",
-  "is-tools-open": "awsui_is-tools-open_hyvsj_1u3br_640",
-  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_1u3br_640",
-  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_1u3br_640",
-  "has-active-drawer": "awsui_has-active-drawer_hyvsj_1u3br_640",
-  "mobile-toolbar": "awsui_mobile-toolbar_hyvsj_1u3br_653",
-  "remove-high-contrast-header": "awsui_remove-high-contrast-header_hyvsj_1u3br_670",
-  "mobile-toolbar-nav": "awsui_mobile-toolbar-nav_hyvsj_1u3br_674",
-  "mobile-toolbar-breadcrumbs": "awsui_mobile-toolbar-breadcrumbs_hyvsj_1u3br_678",
-  "mobile-toolbar-tools": "awsui_mobile-toolbar-tools_hyvsj_1u3br_682",
-  "navigation-container": "awsui_navigation-container_hyvsj_1u3br_691",
-  "show-navigation": "awsui_show-navigation_hyvsj_1u3br_729",
-  "animating": "awsui_animating_hyvsj_1u3br_752",
-  "showButtons": "awsui_showButtons_hyvsj_1u3br_1",
-  "navigation": "awsui_navigation_hyvsj_1u3br_691",
-  "openNavigation": "awsui_openNavigation_hyvsj_1u3br_1",
-  "animated-content": "awsui_animated-content_hyvsj_1u3br_816",
-  "content-container": "awsui_content-container_hyvsj_1u3br_819",
-  "hide-navigation": "awsui_hide-navigation_hyvsj_1u3br_828",
-  "notifications": "awsui_notifications_hyvsj_1u3br_838",
-  "has-notification-content": "awsui_has-notification-content_hyvsj_1u3br_843",
-  "sticky-notifications": "awsui_sticky-notifications_hyvsj_1u3br_847",
-  "high-contrast": "awsui_high-contrast_hyvsj_1u3br_852",
-  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_1u3br_870",
-  "position-bottom": "awsui_position-bottom_hyvsj_1u3br_917",
-  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_1u3br_1",
-  "split-panel-side": "awsui_split-panel-side_hyvsj_1u3br_946",
-  "position-side": "awsui_position-side_hyvsj_1u3br_959",
-  "tools-container": "awsui_tools-container_hyvsj_1u3br_981",
-  "tools": "awsui_tools_hyvsj_1u3br_981",
-  "openTools": "awsui_openTools_hyvsj_1u3br_1",
-  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_1u3br_1070",
-  "hide-tools": "awsui_hide-tools_hyvsj_1u3br_1080",
-  "show-tools": "awsui_show-tools_hyvsj_1u3br_1092",
-  "has-tools-form": "awsui_has-tools-form_hyvsj_1u3br_1070",
-  "trigger-button-styles": "awsui_trigger-button-styles_hyvsj_1u3br_1172",
-  "trigger-badge-wrapper": "awsui_trigger-badge-wrapper_hyvsj_1u3br_1188",
-  "trigger": "awsui_trigger_hyvsj_1u3br_1172",
-  "selected": "awsui_selected_hyvsj_1u3br_1240",
-  "badge": "awsui_badge_hyvsj_1u3br_1260",
-  "trigger-wrapper": "awsui_trigger-wrapper_hyvsj_1u3br_1264",
-  "trigger-wrapper-tooltip-visible": "awsui_trigger-wrapper-tooltip-visible_hyvsj_1u3br_1275",
-  "dot": "awsui_dot_hyvsj_1u3br_1279",
-  "trigger-tooltip": "awsui_trigger-tooltip_hyvsj_1u3br_1292"
+  "background": "awsui_background_hyvsj_tjj1z_149",
+  "scrolling-background": "awsui_scrolling-background_hyvsj_tjj1z_152",
+  "breadcrumbs": "awsui_breadcrumbs_hyvsj_tjj1z_163",
+  "drawers-container": "awsui_drawers-container_hyvsj_tjj1z_176",
+  "has-open-drawer": "awsui_has-open-drawer_hyvsj_tjj1z_187",
+  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_tjj1z_208",
+  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_tjj1z_213",
+  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_tjj1z_251",
+  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_hyvsj_tjj1z_261",
+  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_tjj1z_266",
+  "drawers-trigger-overflow": "awsui_drawers-trigger-overflow_hyvsj_tjj1z_280",
+  "drawers-trigger": "awsui_drawers-trigger_hyvsj_tjj1z_266",
+  "drawer": "awsui_drawer_hyvsj_tjj1z_176",
+  "drawer-content-container": "awsui_drawer-content-container_hyvsj_tjj1z_311",
+  "drawer-close-button": "awsui_drawer-close-button_hyvsj_tjj1z_320",
+  "drawer-content": "awsui_drawer-content_hyvsj_tjj1z_311",
+  "drawer-content-hidden": "awsui_drawer-content-hidden_hyvsj_tjj1z_329",
+  "drawer-slider": "awsui_drawer-slider_hyvsj_tjj1z_332",
+  "is-drawer-open": "awsui_is-drawer-open_hyvsj_tjj1z_339",
+  "content": "awsui_content_hyvsj_tjj1z_365",
+  "layout": "awsui_layout_hyvsj_tjj1z_390",
+  "has-max-content-width": "awsui_has-max-content-width_hyvsj_tjj1z_462",
+  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_tjj1z_477",
+  "content-type-table": "awsui_content-type-table_hyvsj_tjj1z_491",
+  "content-type-cards": "awsui_content-type-cards_hyvsj_tjj1z_491",
+  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_tjj1z_497",
+  "is-hide-mobile-toolbar": "awsui_is-hide-mobile-toolbar_hyvsj_tjj1z_500",
+  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_tjj1z_514",
+  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_tjj1z_517",
+  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_tjj1z_527",
+  "content-first-child-header": "awsui_content-first-child-header_hyvsj_tjj1z_530",
+  "content-first-child-notifications": "awsui_content-first-child-notifications_hyvsj_tjj1z_530",
+  "has-header": "awsui_has-header_hyvsj_tjj1z_530",
+  "content-first-child-main": "awsui_content-first-child-main_hyvsj_tjj1z_545",
+  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_tjj1z_545",
+  "has-left-toggles-gutter": "awsui_has-left-toggles-gutter_hyvsj_tjj1z_565",
+  "has-right-toggles-gutter": "awsui_has-right-toggles-gutter_hyvsj_tjj1z_568",
+  "has-split-panel": "awsui_has-split-panel_hyvsj_tjj1z_588",
+  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_tjj1z_588",
+  "block-body-scroll": "awsui_block-body-scroll_hyvsj_tjj1z_596",
+  "unfocusable": "awsui_unfocusable_hyvsj_tjj1z_601",
+  "container": "awsui_container_hyvsj_tjj1z_611",
+  "is-navigation-open": "awsui_is-navigation-open_hyvsj_tjj1z_637",
+  "is-tools-open": "awsui_is-tools-open_hyvsj_tjj1z_640",
+  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_tjj1z_640",
+  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_tjj1z_640",
+  "has-active-drawer": "awsui_has-active-drawer_hyvsj_tjj1z_640",
+  "mobile-toolbar": "awsui_mobile-toolbar_hyvsj_tjj1z_653",
+  "remove-high-contrast-header": "awsui_remove-high-contrast-header_hyvsj_tjj1z_670",
+  "mobile-toolbar-nav": "awsui_mobile-toolbar-nav_hyvsj_tjj1z_674",
+  "mobile-toolbar-breadcrumbs": "awsui_mobile-toolbar-breadcrumbs_hyvsj_tjj1z_678",
+  "mobile-toolbar-tools": "awsui_mobile-toolbar-tools_hyvsj_tjj1z_682",
+  "navigation-container": "awsui_navigation-container_hyvsj_tjj1z_691",
+  "show-navigation": "awsui_show-navigation_hyvsj_tjj1z_729",
+  "animating": "awsui_animating_hyvsj_tjj1z_752",
+  "showButtons": "awsui_showButtons_hyvsj_tjj1z_1",
+  "navigation": "awsui_navigation_hyvsj_tjj1z_691",
+  "openNavigation": "awsui_openNavigation_hyvsj_tjj1z_1",
+  "animated-content": "awsui_animated-content_hyvsj_tjj1z_816",
+  "content-container": "awsui_content-container_hyvsj_tjj1z_819",
+  "hide-navigation": "awsui_hide-navigation_hyvsj_tjj1z_828",
+  "notifications": "awsui_notifications_hyvsj_tjj1z_838",
+  "has-notification-content": "awsui_has-notification-content_hyvsj_tjj1z_843",
+  "sticky-notifications": "awsui_sticky-notifications_hyvsj_tjj1z_847",
+  "high-contrast": "awsui_high-contrast_hyvsj_tjj1z_852",
+  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_tjj1z_870",
+  "position-bottom": "awsui_position-bottom_hyvsj_tjj1z_917",
+  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_tjj1z_1",
+  "split-panel-side": "awsui_split-panel-side_hyvsj_tjj1z_946",
+  "position-side": "awsui_position-side_hyvsj_tjj1z_959",
+  "tools-container": "awsui_tools-container_hyvsj_tjj1z_981",
+  "tools": "awsui_tools_hyvsj_tjj1z_981",
+  "openTools": "awsui_openTools_hyvsj_tjj1z_1",
+  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_tjj1z_1070",
+  "hide-tools": "awsui_hide-tools_hyvsj_tjj1z_1080",
+  "show-tools": "awsui_show-tools_hyvsj_tjj1z_1092",
+  "has-tools-form": "awsui_has-tools-form_hyvsj_tjj1z_1070",
+  "trigger-button-styles": "awsui_trigger-button-styles_hyvsj_tjj1z_1172",
+  "trigger-badge-wrapper": "awsui_trigger-badge-wrapper_hyvsj_tjj1z_1188",
+  "trigger": "awsui_trigger_hyvsj_tjj1z_1172",
+  "selected": "awsui_selected_hyvsj_tjj1z_1240",
+  "badge": "awsui_badge_hyvsj_tjj1z_1260",
+  "trigger-wrapper": "awsui_trigger-wrapper_hyvsj_tjj1z_1264",
+  "trigger-wrapper-tooltip-visible": "awsui_trigger-wrapper-tooltip-visible_hyvsj_tjj1z_1275",
+  "dot": "awsui_dot_hyvsj_tjj1z_1279",
+  "trigger-tooltip": "awsui_trigger-tooltip_hyvsj_tjj1z_1292"
 };