@cloudscape-design/components-themeable 3.0.252 → 3.0.253

package/lib/internal/template/annotation-context/annotation/styles.selectors.js

@@ -2,29 +2,29 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "arrow": "awsui_arrow_1hpp3_1t5h4_93",
-  "arrow-outer": "awsui_arrow-outer_1hpp3_1t5h4_97",
-  "arrow-inner": "awsui_arrow-inner_1hpp3_1t5h4_97",
-  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1t5h4_128",
-  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1t5h4_128",
-  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1t5h4_131",
-  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1t5h4_131",
-  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1t5h4_134",
-  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1t5h4_134",
-  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1t5h4_137",
-  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1t5h4_137",
-  "annotation": "awsui_annotation_1hpp3_1t5h4_145",
-  "next-button": "awsui_next-button_1hpp3_1t5h4_146",
-  "previous-button": "awsui_previous-button_1hpp3_1t5h4_147",
-  "finish-button": "awsui_finish-button_1hpp3_1t5h4_148",
-  "header": "awsui_header_1hpp3_1t5h4_149",
-  "step-counter-content": "awsui_step-counter-content_1hpp3_1t5h4_150",
-  "content": "awsui_content_1hpp3_1t5h4_151",
-  "description": "awsui_description_1hpp3_1t5h4_155",
-  "actionBar": "awsui_actionBar_1hpp3_1t5h4_160",
-  "stepCounter": "awsui_stepCounter_1hpp3_1t5h4_167",
-  "divider": "awsui_divider_1hpp3_1t5h4_171",
-  "hotspot": "awsui_hotspot_1hpp3_1t5h4_175",
-  "icon": "awsui_icon_1hpp3_1t5h4_215"
+  "arrow": "awsui_arrow_1hpp3_1umef_93",
+  "arrow-outer": "awsui_arrow-outer_1hpp3_1umef_97",
+  "arrow-inner": "awsui_arrow-inner_1hpp3_1umef_97",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_1hpp3_1umef_128",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_1hpp3_1umef_128",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_1hpp3_1umef_131",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_1hpp3_1umef_131",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_1hpp3_1umef_134",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_1hpp3_1umef_134",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_1hpp3_1umef_137",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_1hpp3_1umef_137",
+  "annotation": "awsui_annotation_1hpp3_1umef_145",
+  "next-button": "awsui_next-button_1hpp3_1umef_146",
+  "previous-button": "awsui_previous-button_1hpp3_1umef_147",
+  "finish-button": "awsui_finish-button_1hpp3_1umef_148",
+  "header": "awsui_header_1hpp3_1umef_149",
+  "step-counter-content": "awsui_step-counter-content_1hpp3_1umef_150",
+  "content": "awsui_content_1hpp3_1umef_151",
+  "description": "awsui_description_1hpp3_1umef_155",
+  "actionBar": "awsui_actionBar_1hpp3_1umef_160",
+  "stepCounter": "awsui_stepCounter_1hpp3_1umef_167",
+  "divider": "awsui_divider_1hpp3_1umef_171",
+  "hotspot": "awsui_hotspot_1hpp3_1umef_175",
+  "icon": "awsui_icon_1hpp3_1umef_215"
 };
   

package/lib/internal/template/app-layout/drawer/index.d.ts

@@ -1,23 +1,5 @@
 import React from 'react';
-import { togglesConfig } from '../toggles';
-import { AppLayoutProps } from '../interfaces';
-import { FocusControlRefs } from '../utils/use-focus-control';
-export interface DesktopDrawerProps {
-    contentClassName: string;
-    toggleClassName: string;
-    closeClassName: string;
-    toggleRefs: FocusControlRefs;
-    width: number;
-    topOffset: number | undefined;
-    bottomOffset: number | undefined;
-    ariaLabels: AppLayoutProps.Labels | undefined;
-    children: React.ReactNode;
-    type: keyof typeof togglesConfig;
-    isMobile: boolean;
-    isOpen: boolean;
-    onToggle: (isOpen: boolean) => void;
-    onClick?: (event: React.MouseEvent) => void;
-    onLoseFocus?: (event: React.FocusEvent) => void;
-}
-export declare function Drawer({ contentClassName, toggleClassName, closeClassName, width, type, toggleRefs, topOffset, bottomOffset, ariaLabels, children, isOpen, isMobile, onToggle, onClick, onLoseFocus, }: DesktopDrawerProps): JSX.Element;
+import { DesktopDrawerProps, DrawerTriggersBarProps } from './interfaces';
+export declare const Drawer: React.ForwardRefExoticComponent<DesktopDrawerProps & React.RefAttributes<HTMLDivElement>>;
+export declare function DrawerTriggersBar({ isMobile, topOffset, bottomOffset, drawers, contentClassName, }: DrawerTriggersBarProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/lib/internal/template/app-layout/drawer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/drawer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAgC,aAAa,EAAE,MAAM,YAAY,CAAC;AACzE,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAG/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAE9D,MAAM,WAAW,kBAAkB;IACjC,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,gBAAgB,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,UAAU,EAAE,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,EAAE,MAAM,OAAO,aAAa,CAAC;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACjD;AAmBD,wBAAgB,MAAM,CAAC,EACrB,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,KAAK,EACL,IAAI,EACJ,UAAU,EACV,SAAS,EACT,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,WAAW,GACZ,EAAE,kBAAkB,eAsEpB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/drawer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAKtC,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAoC,MAAM,cAAc,CAAC;AAkB5G,eAAO,MAAM,MAAM,2FAyGlB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,OAAO,EACP,gBAAgB,GACjB,EAAE,sBAAsB,eAiCxB"}

package/lib/internal/template/app-layout/drawer/index.js

@@ -21,15 +21,21 @@ import styles from './styles.css.js';
 // * https://github.com/nvaccess/nvda/issues/5825
 // * https://github.com/nvaccess/nvda/issues/5247
 // * https://github.com/nvaccess/nvda/pull/8869 (reverted PR that was going to fix it)
-export function Drawer({ contentClassName, toggleClassName, closeClassName, width, type, toggleRefs, topOffset, bottomOffset, ariaLabels, children, isOpen, isMobile, onToggle, onClick, onLoseFocus, }) {
+export const Drawer = React.forwardRef(({ contentClassName, toggleClassName, closeClassName, width, type, toggleRefs, topOffset, bottomOffset, ariaLabels, drawersAriaLabels, children, isOpen, isMobile, onToggle, onClick, onLoseFocus, drawers, resizeHandle, }, ref) => {
+    const openButtonWrapperRef = useRef(null);
     const { TagName, iconName, getLabels } = togglesConfig[type];
     const { mainLabel, closeLabel, openLabel } = getLabels(ariaLabels);
     const drawerContentWidthOpen = isMobile ? undefined : width;
     const drawerContentWidth = isOpen ? drawerContentWidthOpen : undefined;
-    const openButtonWrapperRef = useRef(null);
+    const getDrawersLabels = (labels = {}) => ({
+        drawerMainLabel: labels === null || labels === void 0 ? void 0 : labels.content,
+        drawerOpenLabel: labels === null || labels === void 0 ? void 0 : labels.triggerButton,
+        drawerCloseLabel: labels === null || labels === void 0 ? void 0 : labels.closeButton,
+    });
+    const { drawerMainLabel, drawerCloseLabel } = getDrawersLabels(drawersAriaLabels);
     const regularOpenButton = (React.createElement(TagName, { ref: openButtonWrapperRef, "aria-label": mainLabel, className: styles.toggle, "aria-hidden": isOpen },
         React.createElement(AppLayoutButton, { ref: toggleRefs.toggle, className: toggleClassName, iconName: iconName, ariaLabel: openLabel, onClick: () => onToggle(true), ariaExpanded: false })));
-    return (React.createElement("div", { className: clsx(styles.drawer, {
+    return (React.createElement("div", { ref: ref, className: clsx(styles.drawer, {
             [styles['drawer-closed']]: !isOpen,
             [testutilStyles['drawer-closed']]: !isOpen,
             [styles['drawer-mobile']]: isMobile,
@@ -54,8 +60,22 @@ export function Drawer({ contentClassName, toggleClassName, closeClassName, widt
         } },
         React.createElement("div", { style: { width: drawerContentWidth, top: topOffset, bottom: bottomOffset }, className: clsx(styles['drawer-content'], contentClassName) },
             !isMobile && regularOpenButton,
-            React.createElement(TagName, { "aria-label": mainLabel, "aria-hidden": !isOpen },
-                React.createElement(CloseButton, { ref: toggleRefs.close, className: closeClassName, ariaLabel: closeLabel, onClick: () => onToggle(false) }),
+            resizeHandle,
+            React.createElement(TagName, { "aria-label": drawers ? drawerMainLabel : mainLabel, "aria-hidden": !isOpen },
+                React.createElement(CloseButton, { ref: toggleRefs.close, className: closeClassName, ariaLabel: drawers ? drawerCloseLabel : closeLabel, onClick: () => {
+                        onToggle(false);
+                        drawers === null || drawers === void 0 ? void 0 : drawers.onChange({ activeDrawerId: undefined });
+                    } }),
                 children))));
+});
+export function DrawerTriggersBar({ isMobile, topOffset, bottomOffset, drawers, contentClassName, }) {
+    var _a;
+    return (React.createElement("div", { className: clsx(styles.drawer, styles['drawer-closed'], testutilStyles['drawer-closed'], {
+            [styles['drawer-mobile']]: isMobile,
+        }) },
+        React.createElement("div", { style: { top: topOffset, bottom: bottomOffset }, className: clsx(styles['drawer-content'], styles['non-interactive'], contentClassName) }, !isMobile && (React.createElement("aside", { "aria-label": drawers === null || drawers === void 0 ? void 0 : drawers.ariaLabel, className: styles['drawer-triggers'] }, (_a = drawers === null || drawers === void 0 ? void 0 : drawers.items) === null || _a === void 0 ? void 0 : _a.map((item, index) => {
+            var _a;
+            return (React.createElement(AppLayoutButton, { className: clsx(styles.trigger, styles['trigger-drawer'], drawers.activeDrawerId === item.id && styles.selected), key: `drawer-trigger-${index}`, iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, onClick: () => drawers.onChange({ activeDrawerId: item.id }), ariaExpanded: drawers.activeDrawerId !== undefined }));
+        }))))));
 }
 //# sourceMappingURL=index.js.map

package/lib/internal/template/app-layout/drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/index.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 clsx from 'clsx';\nimport React, { useRef } from 'react';\nimport { AppLayoutButton, CloseButton, togglesConfig } from '../toggles';\nimport { AppLayoutProps } from '../interfaces';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\nimport { FocusControlRefs } from '../utils/use-focus-control';\n\nexport interface DesktopDrawerProps {\n  contentClassName: string;\n  toggleClassName: string;\n  closeClassName: string;\n  toggleRefs: FocusControlRefs;\n  width: number;\n  topOffset: number | undefined;\n  bottomOffset: number | undefined;\n  ariaLabels: AppLayoutProps.Labels | undefined;\n  children: React.ReactNode;\n  type: keyof typeof togglesConfig;\n  isMobile: boolean;\n  isOpen: boolean;\n  onToggle: (isOpen: boolean) => void;\n  onClick?: (event: React.MouseEvent) => void;\n  onLoseFocus?: (event: React.FocusEvent) => void;\n}\n\n// We are using two landmarks per drawer, i.e. two NAVs and two ASIDEs, because of several\n// known bugs in NVDA that cause focus changes within a container to sometimes not be\n// announced. As a result, we use one region for the open button and one region for the\n// actual drawer content, always hiding the other one when it's not visible.\n// An alternative solution to follow a more classic implementation here to only have one\n// button that triggers the opening/closing of the drawer also did not work due to another\n// series of bugs in NVDA (together with Firefox) which prevent the changed expanded state\n// from being announced.\n// Even with this workaround in place, the announcement of the close button when opening a\n// panel in NVDA is not working correctly. The suspected root cause is one of the bugs below\n// as well.\n// Relevant tickets:\n// * https://github.com/nvaccess/nvda/issues/6606\n// * https://github.com/nvaccess/nvda/issues/5825\n// * https://github.com/nvaccess/nvda/issues/5247\n// * https://github.com/nvaccess/nvda/pull/8869 (reverted PR that was going to fix it)\n\nexport function Drawer({\n  contentClassName,\n  toggleClassName,\n  closeClassName,\n  width,\n  type,\n  toggleRefs,\n  topOffset,\n  bottomOffset,\n  ariaLabels,\n  children,\n  isOpen,\n  isMobile,\n  onToggle,\n  onClick,\n  onLoseFocus,\n}: DesktopDrawerProps) {\n  const { TagName, iconName, getLabels } = togglesConfig[type];\n  const { mainLabel, closeLabel, openLabel } = getLabels(ariaLabels);\n  const drawerContentWidthOpen = isMobile ? undefined : width;\n  const drawerContentWidth = isOpen ? drawerContentWidthOpen : undefined;\n  const openButtonWrapperRef = useRef<HTMLElement | null>(null);\n\n  const regularOpenButton = (\n    <TagName ref={openButtonWrapperRef} aria-label={mainLabel} className={styles.toggle} aria-hidden={isOpen}>\n      <AppLayoutButton\n        ref={toggleRefs.toggle}\n        className={toggleClassName}\n        iconName={iconName}\n        ariaLabel={openLabel}\n        onClick={() => onToggle(true)}\n        ariaExpanded={false}\n      />\n    </TagName>\n  );\n\n  return (\n    <div\n      className={clsx(styles.drawer, {\n        [styles['drawer-closed']]: !isOpen,\n        [testutilStyles['drawer-closed']]: !isOpen,\n        [styles['drawer-mobile']]: isMobile,\n      })}\n      style={{ width: drawerContentWidth }}\n      onBlur={\n        onLoseFocus\n          ? e => {\n              if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n                onLoseFocus(e);\n              }\n            }\n          : undefined\n      }\n      onClick={event => {\n        if (onClick) {\n          onClick(event);\n        }\n\n        if (!isOpen) {\n          // to prevent calling onToggle from the drawer when it's called from the toggle button\n          if (\n            openButtonWrapperRef.current === event.target ||\n            !openButtonWrapperRef.current?.contains(event.target as Node)\n          ) {\n            onToggle(true);\n          }\n        }\n      }}\n    >\n      <div\n        style={{ width: drawerContentWidth, top: topOffset, bottom: bottomOffset }}\n        className={clsx(styles['drawer-content'], contentClassName)}\n      >\n        {!isMobile && regularOpenButton}\n        <TagName aria-label={mainLabel} aria-hidden={!isOpen}>\n          <CloseButton\n            ref={toggleRefs.close}\n            className={closeClassName}\n            ariaLabel={closeLabel}\n            onClick={() => onToggle(false)}\n          />\n          {children}\n        </TagName>\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEzE,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAC3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,0FAA0F;AAC1F,qFAAqF;AACrF,uFAAuF;AACvF,4EAA4E;AAC5E,wFAAwF;AACxF,0FAA0F;AAC1F,0FAA0F;AAC1F,wBAAwB;AACxB,0FAA0F;AAC1F,4FAA4F;AAC5F,WAAW;AACX,oBAAoB;AACpB,iDAAiD;AACjD,iDAAiD;AACjD,iDAAiD;AACjD,sFAAsF;AACtF,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CACpC,CACE,EACE,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,KAAK,EACL,IAAI,EACJ,UAAU,EACV,SAAS,EACT,YAAY,EACZ,UAAU,EACV,iBAAiB,EACjB,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,WAAW,EACX,OAAO,EACP,YAAY,GACO,EACrB,GAA8B,EAC9B,EAAE;IACF,MAAM,oBAAoB,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IAC9D,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAC7D,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,SAAS,CAAC,UAAU,CAAC,CAAC;IACnE,MAAM,sBAAsB,GAAG,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC;IAC5D,MAAM,kBAAkB,GAAG,MAAM,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,SAAS,CAAC;IAEvE,MAAM,gBAAgB,GAAG,CAAC,SAA+B,EAAE,EAAE,EAAE,CAAC,CAAC;QAC/D,eAAe,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO;QAChC,eAAe,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,aAAa;QACtC,gBAAgB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,WAAW;KACtC,CAAC,CAAC;IACH,MAAM,EAAE,eAAe,EAAE,gBAAgB,EAAE,GAAG,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;IAElF,MAAM,iBAAiB,GAAG,CACxB,oBAAC,OAAO,IAAC,GAAG,EAAE,oBAAoB,gBAAc,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,MAAM,iBAAe,MAAM;QACtG,oBAAC,eAAe,IACd,GAAG,EAAE,UAAU,CAAC,MAAM,EACtB,SAAS,EAAE,eAAe,EAC1B,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAC7B,YAAY,EAAE,KAAK,GACnB,CACM,CACX,CAAC;IAEF,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;YAC7B,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,MAAM;YAClC,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,MAAM;YAC1C,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,QAAQ;SACpC,CAAC,EACF,KAAK,EAAE,EAAE,KAAK,EAAE,kBAAkB,EAAE,EACpC,MAAM,EACJ,WAAW;YACT,CAAC,CAAC,CAAC,CAAC,EAAE;gBACF,IAAI,CAAC,CAAC,CAAC,aAAa,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,EAAE;oBAClE,WAAW,CAAC,CAAC,CAAC,CAAC;iBAChB;YACH,CAAC;YACH,CAAC,CAAC,SAAS,EAEf,OAAO,EAAE,KAAK,CAAC,EAAE;;YACf,IAAI,OAAO,EAAE;gBACX,OAAO,CAAC,KAAK,CAAC,CAAC;aAChB;YACD,IAAI,CAAC,MAAM,EAAE;gBACX,sFAAsF;gBACtF,IACE,oBAAoB,CAAC,OAAO,KAAK,KAAK,CAAC,MAAM;oBAC7C,CAAC,CAAA,MAAA,oBAAoB,CAAC,OAAO,0CAAE,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,CAAA,EAC7D;oBACA,QAAQ,CAAC,IAAI,CAAC,CAAC;iBAChB;aACF;QACH,CAAC;QAED,6BACE,KAAK,EAAE,EAAE,KAAK,EAAE,kBAAkB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,EAC1E,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;YAE1D,CAAC,QAAQ,IAAI,iBAAiB;YAC9B,YAAY;YACb,oBAAC,OAAO,kBAAa,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,iBAAe,CAAC,MAAM;gBAC9E,oBAAC,WAAW,IACV,GAAG,EAAE,UAAU,CAAC,KAAK,EACrB,SAAS,EAAE,cAAc,EACzB,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,UAAU,EAClD,OAAO,EAAE,GAAG,EAAE;wBACZ,QAAQ,CAAC,KAAK,CAAC,CAAC;wBAChB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC,CAAC;oBACnD,CAAC,GACD;gBACD,QAAQ,CACD,CACN,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,UAAU,iBAAiB,CAAC,EAChC,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,OAAO,EACP,gBAAgB,GACO;;IACvB,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,eAAe,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,EAAE;YACvF,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,QAAQ;SACpC,CAAC;QAEF,6BACE,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,EAC/C,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,iBAAiB,CAAC,EAAE,gBAAgB,CAAC,IAErF,CAAC,QAAQ,IAAI,CACZ,6CAAmB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC,IACxE,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,0CAAE,GAAG,CAAC,CAAC,IAAgB,EAAE,KAAa,EAAE,EAAE;;YAAC,OAAA,CACxD,oBAAC,eAAe,IACd,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,OAAO,EACd,MAAM,CAAC,gBAAgB,CAAC,EACxB,OAAO,CAAC,cAAc,KAAK,IAAI,CAAC,EAAE,IAAI,MAAM,CAAC,QAAQ,CACtD,EACD,GAAG,EAAE,kBAAkB,KAAK,EAAE,EAC9B,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ,EAC/B,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,EAC7B,SAAS,EAAE,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,EACzC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,cAAc,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,EAC5D,YAAY,EAAE,OAAO,CAAC,cAAc,KAAK,SAAS,GAClD,CACH,CAAA;SAAA,CAAC,CACI,CACT,CACG,CACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useRef } from 'react';\nimport { AppLayoutButton, CloseButton, togglesConfig } from '../toggles';\n\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\nimport { DesktopDrawerProps, DrawerTriggersBarProps, DrawerItem, DrawerItemAriaLabels } from './interfaces';\n\n// We are using two landmarks per drawer, i.e. two NAVs and two ASIDEs, because of several\n// known bugs in NVDA that cause focus changes within a container to sometimes not be\n// announced. As a result, we use one region for the open button and one region for the\n// actual drawer content, always hiding the other one when it's not visible.\n// An alternative solution to follow a more classic implementation here to only have one\n// button that triggers the opening/closing of the drawer also did not work due to another\n// series of bugs in NVDA (together with Firefox) which prevent the changed expanded state\n// from being announced.\n// Even with this workaround in place, the announcement of the close button when opening a\n// panel in NVDA is not working correctly. The suspected root cause is one of the bugs below\n// as well.\n// Relevant tickets:\n// * https://github.com/nvaccess/nvda/issues/6606\n// * https://github.com/nvaccess/nvda/issues/5825\n// * https://github.com/nvaccess/nvda/issues/5247\n// * https://github.com/nvaccess/nvda/pull/8869 (reverted PR that was going to fix it)\nexport const Drawer = React.forwardRef(\n  (\n    {\n      contentClassName,\n      toggleClassName,\n      closeClassName,\n      width,\n      type,\n      toggleRefs,\n      topOffset,\n      bottomOffset,\n      ariaLabels,\n      drawersAriaLabels,\n      children,\n      isOpen,\n      isMobile,\n      onToggle,\n      onClick,\n      onLoseFocus,\n      drawers,\n      resizeHandle,\n    }: DesktopDrawerProps,\n    ref: React.Ref<HTMLDivElement>\n  ) => {\n    const openButtonWrapperRef = useRef<HTMLElement | null>(null);\n    const { TagName, iconName, getLabels } = togglesConfig[type];\n    const { mainLabel, closeLabel, openLabel } = getLabels(ariaLabels);\n    const drawerContentWidthOpen = isMobile ? undefined : width;\n    const drawerContentWidth = isOpen ? drawerContentWidthOpen : undefined;\n\n    const getDrawersLabels = (labels: DrawerItemAriaLabels = {}) => ({\n      drawerMainLabel: labels?.content,\n      drawerOpenLabel: labels?.triggerButton,\n      drawerCloseLabel: labels?.closeButton,\n    });\n    const { drawerMainLabel, drawerCloseLabel } = getDrawersLabels(drawersAriaLabels);\n\n    const regularOpenButton = (\n      <TagName ref={openButtonWrapperRef} aria-label={mainLabel} className={styles.toggle} aria-hidden={isOpen}>\n        <AppLayoutButton\n          ref={toggleRefs.toggle}\n          className={toggleClassName}\n          iconName={iconName}\n          ariaLabel={openLabel}\n          onClick={() => onToggle(true)}\n          ariaExpanded={false}\n        />\n      </TagName>\n    );\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(styles.drawer, {\n          [styles['drawer-closed']]: !isOpen,\n          [testutilStyles['drawer-closed']]: !isOpen,\n          [styles['drawer-mobile']]: isMobile,\n        })}\n        style={{ width: drawerContentWidth }}\n        onBlur={\n          onLoseFocus\n            ? e => {\n                if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n                  onLoseFocus(e);\n                }\n              }\n            : undefined\n        }\n        onClick={event => {\n          if (onClick) {\n            onClick(event);\n          }\n          if (!isOpen) {\n            // to prevent calling onToggle from the drawer when it's called from the toggle button\n            if (\n              openButtonWrapperRef.current === event.target ||\n              !openButtonWrapperRef.current?.contains(event.target as Node)\n            ) {\n              onToggle(true);\n            }\n          }\n        }}\n      >\n        <div\n          style={{ width: drawerContentWidth, top: topOffset, bottom: bottomOffset }}\n          className={clsx(styles['drawer-content'], contentClassName)}\n        >\n          {!isMobile && regularOpenButton}\n          {resizeHandle}\n          <TagName aria-label={drawers ? drawerMainLabel : mainLabel} aria-hidden={!isOpen}>\n            <CloseButton\n              ref={toggleRefs.close}\n              className={closeClassName}\n              ariaLabel={drawers ? drawerCloseLabel : closeLabel}\n              onClick={() => {\n                onToggle(false);\n                drawers?.onChange({ activeDrawerId: undefined });\n              }}\n            />\n            {children}\n          </TagName>\n        </div>\n      </div>\n    );\n  }\n);\n\nexport function DrawerTriggersBar({\n  isMobile,\n  topOffset,\n  bottomOffset,\n  drawers,\n  contentClassName,\n}: DrawerTriggersBarProps) {\n  return (\n    <div\n      className={clsx(styles.drawer, styles['drawer-closed'], testutilStyles['drawer-closed'], {\n        [styles['drawer-mobile']]: isMobile,\n      })}\n    >\n      <div\n        style={{ top: topOffset, bottom: bottomOffset }}\n        className={clsx(styles['drawer-content'], styles['non-interactive'], contentClassName)}\n      >\n        {!isMobile && (\n          <aside aria-label={drawers?.ariaLabel} className={styles['drawer-triggers']}>\n            {drawers?.items?.map((item: DrawerItem, index: number) => (\n              <AppLayoutButton\n                className={clsx(\n                  styles.trigger,\n                  styles['trigger-drawer'],\n                  drawers.activeDrawerId === item.id && styles.selected\n                )}\n                key={`drawer-trigger-${index}`}\n                iconName={item.trigger.iconName}\n                iconSvg={item.trigger.iconSvg}\n                ariaLabel={item.ariaLabels?.triggerButton}\n                onClick={() => drawers.onChange({ activeDrawerId: item.id })}\n                ariaExpanded={drawers.activeDrawerId !== undefined}\n              />\n            ))}\n          </aside>\n        )}\n      </div>\n    </div>\n  );\n}\n"]}

package/lib/internal/template/app-layout/drawer/interfaces.d.ts

@@ -0,0 +1,84 @@
+import React from 'react';
+import { ButtonProps } from '../../button/interfaces';
+import { togglesConfig } from '../toggles';
+import { AppLayoutProps } from '../interfaces';
+import { IconProps } from '../../icon/interfaces';
+import { DrawerFocusControlRefs } from '../utils/use-drawer-focus-control';
+export interface DesktopDrawerProps {
+    contentClassName: string;
+    toggleClassName: string;
+    closeClassName: string;
+    toggleRefs: {
+        toggle: React.Ref<ButtonProps.Ref>;
+        close: React.Ref<ButtonProps.Ref>;
+    };
+    width: number;
+    topOffset: number | undefined;
+    bottomOffset: number | undefined;
+    ariaLabels: AppLayoutProps.Labels | undefined;
+    drawersAriaLabels?: DrawerItemAriaLabels | undefined;
+    children: React.ReactNode;
+    type: keyof typeof togglesConfig;
+    isMobile: boolean;
+    isOpen: boolean;
+    onToggle: (isOpen: boolean) => void;
+    onClick?: (event: React.MouseEvent) => void;
+    onLoseFocus?: (event: React.FocusEvent) => void;
+    drawers?: {
+        items: Array<DrawerItem>;
+        activeDrawerId: string | undefined;
+        onChange: (changeDetail: {
+            activeDrawerId: string | undefined;
+        }) => void;
+    };
+    resizeHandle?: React.ReactNode;
+}
+export interface ResizableDrawerProps extends DesktopDrawerProps {
+    activeDrawer: DrawerItem;
+    onResize: (resizeDetail: {
+        size: number;
+        id: string;
+    }) => void;
+    size: number;
+    getMaxWidth: () => number;
+    refs: DrawerFocusControlRefs;
+}
+export interface DrawerTriggersBarProps {
+    contentClassName: string;
+    topOffset: number | undefined;
+    bottomOffset: number | undefined;
+    isMobile: boolean;
+    drawers?: {
+        items: Array<DrawerItem>;
+        activeDrawerId: string | undefined;
+        onChange: (changeDetail: {
+            activeDrawerId: string | undefined;
+        }) => void;
+        ariaLabel: string;
+    };
+}
+export interface DrawerItemAriaLabels {
+    content?: string;
+    closeButton?: string;
+    triggerButton?: string;
+    resizeHandle?: string;
+}
+export interface DrawerItem {
+    id: string;
+    content: React.ReactNode;
+    trigger: {
+        iconName?: IconProps.Name;
+        iconSvg?: React.ReactNode;
+    };
+    ariaLabels: DrawerItemAriaLabels;
+    resizable?: boolean;
+    size?: number;
+}
+export interface SizeControlProps {
+    position: 'side';
+    splitPanelRef?: React.RefObject<HTMLDivElement>;
+    handleRef?: React.RefObject<HTMLDivElement>;
+    setSidePanelWidth: (width: number) => void;
+    setBottomPanelHeight: (height: number) => void;
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/lib/internal/template/app-layout/drawer/interfaces.d.ts.map

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

package/lib/internal/template/app-layout/drawer/interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=interfaces.js.map

package/lib/internal/template/app-layout/drawer/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/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';\nimport { ButtonProps } from '../../button/interfaces';\nimport { togglesConfig } from '../toggles';\nimport { AppLayoutProps } from '../interfaces';\nimport { IconProps } from '../../icon/interfaces';\n\nimport { DrawerFocusControlRefs } from '../utils/use-drawer-focus-control';\n\nexport interface DesktopDrawerProps {\n  contentClassName: string;\n  toggleClassName: string;\n  closeClassName: string;\n  toggleRefs: {\n    toggle: React.Ref<ButtonProps.Ref>;\n    close: React.Ref<ButtonProps.Ref>;\n  };\n  width: number;\n  topOffset: number | undefined;\n  bottomOffset: number | undefined;\n  ariaLabels: AppLayoutProps.Labels | undefined;\n  drawersAriaLabels?: DrawerItemAriaLabels | undefined;\n  children: React.ReactNode;\n  type: keyof typeof togglesConfig;\n  isMobile: boolean;\n  isOpen: boolean;\n  onToggle: (isOpen: boolean) => void;\n  onClick?: (event: React.MouseEvent) => void;\n  onLoseFocus?: (event: React.FocusEvent) => void;\n  drawers?: {\n    items: Array<DrawerItem>;\n    activeDrawerId: string | undefined;\n    onChange: (changeDetail: { activeDrawerId: string | undefined }) => void;\n  };\n  resizeHandle?: React.ReactNode;\n}\n\nexport interface ResizableDrawerProps extends DesktopDrawerProps {\n  activeDrawer: DrawerItem;\n  onResize: (resizeDetail: { size: number; id: string }) => void;\n  size: number;\n  getMaxWidth: () => number;\n  refs: DrawerFocusControlRefs;\n}\n\nexport interface DrawerTriggersBarProps {\n  contentClassName: string;\n  topOffset: number | undefined;\n  bottomOffset: number | undefined;\n  isMobile: boolean;\n  drawers?: {\n    items: Array<DrawerItem>;\n    activeDrawerId: string | undefined;\n    onChange: (changeDetail: { activeDrawerId: string | undefined }) => void;\n    ariaLabel: string;\n  };\n}\n\nexport interface DrawerItemAriaLabels {\n  content?: string;\n  closeButton?: string;\n  triggerButton?: string;\n  resizeHandle?: string;\n}\n\nexport interface DrawerItem {\n  id: string;\n  content: React.ReactNode;\n  trigger: {\n    iconName?: IconProps.Name;\n    iconSvg?: React.ReactNode;\n  };\n  ariaLabels: DrawerItemAriaLabels;\n  resizable?: boolean;\n  size?: number;\n}\n\nexport interface SizeControlProps {\n  position: 'side';\n  splitPanelRef?: React.RefObject<HTMLDivElement>;\n  handleRef?: React.RefObject<HTMLDivElement>;\n  setSidePanelWidth: (width: number) => void;\n  setBottomPanelHeight: (height: number) => void;\n}\n"]}

package/lib/internal/template/app-layout/drawer/resizable-drawer.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ResizableDrawerProps } from './interfaces';
+export declare const ResizableDrawer: ({ onResize, size, getMaxWidth, refs, activeDrawer, ...props }: ResizableDrawerProps) => JSX.Element;
+//# sourceMappingURL=resizable-drawer.d.ts.map

package/lib/internal/template/app-layout/drawer/resizable-drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable-drawer.d.ts","sourceRoot":"lib/default/","sources":["app-layout/drawer/resizable-drawer.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAoB,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAEtE,eAAO,MAAM,eAAe,kEAOzB,oBAAoB,gBAsEtB,CAAC"}

package/lib/internal/template/app-layout/drawer/resizable-drawer.js

@@ -0,0 +1,51 @@
+import { __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import clsx from 'clsx';
+import React, { useEffect, useState, useRef } from 'react';
+import { getLimitedValue } from '../../split-panel/utils/size-utils';
+import { usePointerEvents } from '../../split-panel/utils/use-pointer-events';
+import { useKeyboardEvents } from '../../split-panel/utils/use-keyboard-events';
+import { Drawer } from './index';
+import ResizeHandler from '../../split-panel/icons/resize-handler';
+import splitPanelStyles from '../../split-panel/styles.css.js';
+export const ResizableDrawer = (_a) => {
+    var { onResize, size, getMaxWidth, refs, activeDrawer } = _a, props = __rest(_a, ["onResize", "size", "getMaxWidth", "refs", "activeDrawer"]);
+    const { isOpen, children, isMobile } = props;
+    const MIN_WIDTH = (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.size) && activeDrawer.size < 280 ? activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.size : 280;
+    const [relativeSize, setRelativeSize] = useState(0);
+    useEffect(() => {
+        // effects are called inside out in the components tree
+        // wait one frame to allow app-layout to complete its calculations
+        const handle = requestAnimationFrame(() => {
+            const maxSize = getMaxWidth();
+            setRelativeSize((size / maxSize) * 100);
+        });
+        return () => cancelAnimationFrame(handle);
+    }, [size, getMaxWidth]);
+    const setSidePanelWidth = (width) => {
+        const maxWidth = getMaxWidth();
+        const size = getLimitedValue(MIN_WIDTH, width, maxWidth);
+        const id = activeDrawer.id;
+        if (isOpen && maxWidth >= MIN_WIDTH) {
+            onResize({ size, id });
+        }
+    };
+    const position = 'side';
+    const setBottomPanelHeight = () => { };
+    const drawerRefObject = useRef(null);
+    const sizeControlProps = {
+        position,
+        splitPanelRef: drawerRefObject,
+        handleRef: refs.slider,
+        setSidePanelWidth,
+        setBottomPanelHeight,
+    };
+    const onSliderPointerDown = usePointerEvents(sizeControlProps);
+    const onKeyDown = useKeyboardEvents(sizeControlProps);
+    const resizeHandle = (React.createElement("div", { ref: refs.slider, role: "slider", tabIndex: 0, "aria-label": activeDrawer.ariaLabels.resizeHandle, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": relativeSize, className: clsx(splitPanelStyles.slider, splitPanelStyles[`slider-side`]), onKeyDown: onKeyDown, onPointerDown: onSliderPointerDown },
+        React.createElement(ResizeHandler, { className: clsx(splitPanelStyles['slider-icon'], splitPanelStyles[`slider-icon-side`]) })));
+    return (React.createElement(Drawer, Object.assign({}, props, { ref: drawerRefObject, resizeHandle: !isMobile &&
+            activeDrawer.resizable && React.createElement("div", { className: splitPanelStyles['slider-wrapper-side'] }, resizeHandle) }), children));
+};
+//# sourceMappingURL=resizable-drawer.js.map

package/lib/internal/template/app-layout/drawer/resizable-drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable-drawer.js","sourceRoot":"lib/default/","sources":["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 clsx from 'clsx';\nimport React, { useEffect, useState, useRef } from 'react';\n\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { usePointerEvents } from '../../split-panel/utils/use-pointer-events';\nimport { useKeyboardEvents } from '../../split-panel/utils/use-keyboard-events';\nimport { Drawer } from './index';\n\nimport ResizeHandler from '../../split-panel/icons/resize-handler';\nimport splitPanelStyles from '../../split-panel/styles.css.js';\nimport { SizeControlProps, ResizableDrawerProps } from './interfaces';\n\nexport const ResizableDrawer = ({\n  onResize,\n  size,\n  getMaxWidth,\n  refs,\n  activeDrawer,\n  ...props\n}: ResizableDrawerProps) => {\n  const { isOpen, children, isMobile } = props;\n\n  const MIN_WIDTH = activeDrawer?.size && activeDrawer.size < 280 ? activeDrawer?.size : 280;\n  const [relativeSize, setRelativeSize] = useState(0);\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 = getMaxWidth();\n      setRelativeSize((size / maxSize) * 100);\n    });\n    return () => cancelAnimationFrame(handle);\n  }, [size, getMaxWidth]);\n\n  const setSidePanelWidth = (width: number) => {\n    const maxWidth = getMaxWidth();\n    const size = getLimitedValue(MIN_WIDTH, width, maxWidth);\n    const id = activeDrawer.id;\n\n    if (isOpen && maxWidth >= MIN_WIDTH) {\n      onResize({ size, id });\n    }\n  };\n\n  const position = 'side';\n  const setBottomPanelHeight = () => {};\n  const drawerRefObject = useRef<HTMLDivElement>(null);\n\n  const sizeControlProps: SizeControlProps = {\n    position,\n    splitPanelRef: drawerRefObject,\n    handleRef: refs.slider,\n    setSidePanelWidth,\n    setBottomPanelHeight,\n  };\n\n  const onSliderPointerDown = usePointerEvents(sizeControlProps);\n  const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n  const resizeHandle = (\n    <div\n      ref={refs.slider}\n      role=\"slider\"\n      tabIndex={0}\n      aria-label={activeDrawer.ariaLabels.resizeHandle}\n      aria-valuemax={100}\n      aria-valuemin={0}\n      aria-valuenow={relativeSize}\n      className={clsx(splitPanelStyles.slider, splitPanelStyles[`slider-side`])}\n      onKeyDown={onKeyDown}\n      onPointerDown={onSliderPointerDown}\n    >\n      <ResizeHandler className={clsx(splitPanelStyles['slider-icon'], splitPanelStyles[`slider-icon-side`])} />\n    </div>\n  );\n\n  return (\n    <Drawer\n      {...props}\n      ref={drawerRefObject}\n      resizeHandle={\n        !isMobile &&\n        activeDrawer.resizable && <div className={splitPanelStyles['slider-wrapper-side']}>{resizeHandle}</div>\n      }\n    >\n      {children}\n    </Drawer>\n  );\n};\n"]}

package/lib/internal/template/app-layout/drawer/styles.css.js

@@ -1,10 +1,15 @@
 
     import './styles.scoped.css';
     export default {
-  "toggle": "awsui_toggle_1uo6m_cnce0_97",
-  "drawer": "awsui_drawer_1uo6m_cnce0_102",
-  "drawer-mobile": "awsui_drawer-mobile_1uo6m_cnce0_108",
-  "drawer-closed": "awsui_drawer-closed_1uo6m_cnce0_111",
-  "drawer-content": "awsui_drawer-content_1uo6m_cnce0_119"
+  "toggle": "awsui_toggle_1uo6m_mpf8p_97",
+  "drawer-triggers": "awsui_drawer-triggers_1uo6m_mpf8p_102",
+  "drawer": "awsui_drawer_1uo6m_mpf8p_102",
+  "drawer-mobile": "awsui_drawer-mobile_1uo6m_mpf8p_112",
+  "drawer-closed": "awsui_drawer-closed_1uo6m_mpf8p_115",
+  "drawer-content": "awsui_drawer-content_1uo6m_mpf8p_123",
+  "non-interactive": "awsui_non-interactive_1uo6m_mpf8p_141",
+  "trigger": "awsui_trigger_1uo6m_mpf8p_149",
+  "trigger-drawer": "awsui_trigger-drawer_1uo6m_mpf8p_158",
+  "selected": "awsui_selected_1uo6m_mpf8p_158"
 };
   

package/lib/internal/template/app-layout/drawer/styles.scoped.css

@@ -94,46 +94,82 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_toggle_1uo6m_cnce0_97:not(#\9) {
+.awsui_toggle_1uo6m_mpf8p_97:not(#\9) {
   box-sizing: border-box;
   padding: var(--space-xxs-ynfts5, 4px) 7px;
 }
 
-.awsui_drawer_1uo6m_cnce0_102:not(#\9) {
+.awsui_drawer-triggers_1uo6m_mpf8p_102:not(#\9) {
+  box-sizing: border-box;
+}
+
+.awsui_drawer_1uo6m_mpf8p_102:not(#\9) {
   flex-shrink: 0;
   position: relative;
   word-wrap: break-word;
   box-shadow: var(--shadow-panel-v9vx7i, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15));
 }
-.awsui_drawer_1uo6m_cnce0_102:not(#\9):not(.awsui_drawer-mobile_1uo6m_cnce0_108) {
+.awsui_drawer_1uo6m_mpf8p_102:not(#\9):not(.awsui_drawer-mobile_1uo6m_mpf8p_112) {
   z-index: 830;
 }
-.awsui_drawer-closed_1uo6m_cnce0_111:not(#\9) {
+.awsui_drawer-closed_1uo6m_mpf8p_115:not(#\9) {
   min-width: 40px;
   cursor: pointer;
 }
-.awsui_drawer-closed_1uo6m_cnce0_111.awsui_drawer-mobile_1uo6m_cnce0_108:not(#\9) {
+.awsui_drawer-closed_1uo6m_mpf8p_115.awsui_drawer-mobile_1uo6m_mpf8p_112:not(#\9) {
   display: none;
 }
 
-.awsui_drawer-content_1uo6m_cnce0_119:not(#\9) {
+.awsui_drawer-content_1uo6m_mpf8p_123:not(#\9) {
   position: fixed;
   overflow: auto;
   background-color: var(--color-background-layout-panel-content-r9pdjh, #ffffff);
 }
-.awsui_drawer-mobile_1uo6m_cnce0_108 > .awsui_drawer-content_1uo6m_cnce0_119:not(#\9) {
+.awsui_drawer-mobile_1uo6m_mpf8p_112 > .awsui_drawer-content_1uo6m_mpf8p_123:not(#\9) {
   z-index: 1001;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
 }
-.awsui_drawer-closed_1uo6m_cnce0_111 > .awsui_drawer-content_1uo6m_cnce0_119:not(#\9) {
+.awsui_drawer-closed_1uo6m_mpf8p_115 > .awsui_drawer-content_1uo6m_mpf8p_123:not(#\9) {
   width: 40px;
 }
-.awsui_drawer-closed_1uo6m_cnce0_111 > .awsui_drawer-content_1uo6m_cnce0_119:not(#\9):hover {
+.awsui_drawer-closed_1uo6m_mpf8p_115 > .awsui_drawer-content_1uo6m_mpf8p_123:not(#\9):hover {
   background: var(--color-background-layout-panel-hover-thdv3z, #eaeded);
 }
-.awsui_drawer-content_1uo6m_cnce0_119 > [aria-hidden=true]:not(#\9) {
+.awsui_drawer-closed_1uo6m_mpf8p_115 > .awsui_drawer-content_1uo6m_mpf8p_123.awsui_non-interactive_1uo6m_mpf8p_141:not(#\9):hover {
+  background: var(--color-background-layout-panel-content-r9pdjh, #ffffff);
+  cursor: default;
+}
+.awsui_drawer-content_1uo6m_mpf8p_123 > [aria-hidden=true]:not(#\9) {
   display: none;
+}
+
+.awsui_drawer-triggers_1uo6m_mpf8p_102 > .awsui_trigger_1uo6m_mpf8p_149:not(#\9) {
+  padding: var(--space-scaled-xs-6859qs, 8px) 6px;
+  margin: 1px 6px;
+  border-radius: 0;
+  border: 0;
+}
+.awsui_drawer-triggers_1uo6m_mpf8p_102 > .awsui_trigger_1uo6m_mpf8p_149:not(#\9):not(:last-child) {
+  box-shadow: 0px 1px var(--color-shadow-layout-panel-trigger-lceo1i, #d5dbdb);
+}
+.awsui_drawer-triggers_1uo6m_mpf8p_102 > .awsui_trigger-drawer_1uo6m_mpf8p_158:not(#\9):hover:not(.awsui_selected_1uo6m_mpf8p_158) {
+  color: var(--color-text-layout-panel-trigger-hover-5qaiq9, #0073bb);
+}
+.awsui_drawer-triggers_1uo6m_mpf8p_102 > .awsui_trigger-drawer_1uo6m_mpf8p_158:not(#\9):hover:not(.awsui_selected_1uo6m_mpf8p_158):not(:last-child) {
+  box-shadow: 0px 1px var(--color-shadow-layout-panel-trigger-lceo1i, #d5dbdb);
+}
+.awsui_drawer-triggers_1uo6m_mpf8p_102 > .awsui_trigger_1uo6m_mpf8p_149.awsui_selected_1uo6m_mpf8p_158:not(#\9) {
+  padding: var(--space-scaled-xs-6859qs, 8px) var(--space-s-hv8c1d, 12px);
+  margin: 0;
+  border-top: 1px solid var(--color-background-layout-panel-trigger-active-opo2jh, #0073bb);
+  border-bottom: 1px solid var(--color-background-layout-panel-trigger-active-opo2jh, #0073bb);
+  background-color: var(--color-background-layout-panel-trigger-active-opo2jh, #0073bb);
+  color: var(--color-text-layout-panel-trigger-active-km1y5a, #ffffff);
+  box-shadow: none;
+}
+.awsui_drawer-triggers_1uo6m_mpf8p_102 > .awsui_trigger_1uo6m_mpf8p_149.awsui_selected_1uo6m_mpf8p_158:not(#\9):hover {
+  cursor: default;
 }

package/lib/internal/template/app-layout/drawer/styles.selectors.js

@@ -2,10 +2,15 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "toggle": "awsui_toggle_1uo6m_cnce0_97",
-  "drawer": "awsui_drawer_1uo6m_cnce0_102",
-  "drawer-mobile": "awsui_drawer-mobile_1uo6m_cnce0_108",
-  "drawer-closed": "awsui_drawer-closed_1uo6m_cnce0_111",
-  "drawer-content": "awsui_drawer-content_1uo6m_cnce0_119"
+  "toggle": "awsui_toggle_1uo6m_mpf8p_97",
+  "drawer-triggers": "awsui_drawer-triggers_1uo6m_mpf8p_102",
+  "drawer": "awsui_drawer_1uo6m_mpf8p_102",
+  "drawer-mobile": "awsui_drawer-mobile_1uo6m_mpf8p_112",
+  "drawer-closed": "awsui_drawer-closed_1uo6m_mpf8p_115",
+  "drawer-content": "awsui_drawer-content_1uo6m_mpf8p_123",
+  "non-interactive": "awsui_non-interactive_1uo6m_mpf8p_141",
+  "trigger": "awsui_trigger_1uo6m_mpf8p_149",
+  "trigger-drawer": "awsui_trigger-drawer_1uo6m_mpf8p_158",
+  "selected": "awsui_selected_1uo6m_mpf8p_158"
 };
   

package/lib/internal/template/app-layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAM7F,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAqC9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,2FA8Bd,CAAC;AAgeF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAM7F,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAyC9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,2FA8Bd,CAAC;AAsqBF,eAAe,SAAS,CAAC"}