@cloudscape-design/components-themeable 3.0.973 → 3.0.974

package/lib/internal/template/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/lib/internal/template/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/lib/internal/template/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/lib/internal/template/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/lib/internal/template/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/lib/internal/template/app-layout/visual-refresh/styles.css.js

@@ -1,91 +1,91 @@
 
     import './styles.scoped.css';
     export default {
-  "background": "awsui_background_hyvsj_1we6f_149",
-  "scrolling-background": "awsui_scrolling-background_hyvsj_1we6f_152",
-  "breadcrumbs": "awsui_breadcrumbs_hyvsj_1we6f_163",
-  "drawers-container": "awsui_drawers-container_hyvsj_1we6f_176",
-  "has-open-drawer": "awsui_has-open-drawer_hyvsj_1we6f_187",
-  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_1we6f_208",
-  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_1we6f_213",
-  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_1we6f_251",
-  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_hyvsj_1we6f_261",
-  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_1we6f_266",
-  "drawers-trigger-overflow": "awsui_drawers-trigger-overflow_hyvsj_1we6f_280",
-  "drawers-trigger": "awsui_drawers-trigger_hyvsj_1we6f_266",
-  "drawer": "awsui_drawer_hyvsj_1we6f_176",
-  "drawer-content-container": "awsui_drawer-content-container_hyvsj_1we6f_311",
-  "drawer-close-button": "awsui_drawer-close-button_hyvsj_1we6f_320",
-  "drawer-content": "awsui_drawer-content_hyvsj_1we6f_311",
-  "drawer-content-hidden": "awsui_drawer-content-hidden_hyvsj_1we6f_329",
-  "drawer-slider": "awsui_drawer-slider_hyvsj_1we6f_332",
-  "is-drawer-open": "awsui_is-drawer-open_hyvsj_1we6f_339",
-  "content": "awsui_content_hyvsj_1we6f_365",
-  "layout": "awsui_layout_hyvsj_1we6f_390",
-  "has-max-content-width": "awsui_has-max-content-width_hyvsj_1we6f_462",
-  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_1we6f_477",
-  "content-type-table": "awsui_content-type-table_hyvsj_1we6f_491",
-  "content-type-cards": "awsui_content-type-cards_hyvsj_1we6f_491",
-  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_1we6f_497",
-  "is-hide-mobile-toolbar": "awsui_is-hide-mobile-toolbar_hyvsj_1we6f_500",
-  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_1we6f_514",
-  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_1we6f_517",
-  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_1we6f_527",
-  "content-first-child-header": "awsui_content-first-child-header_hyvsj_1we6f_530",
-  "content-first-child-notifications": "awsui_content-first-child-notifications_hyvsj_1we6f_530",
-  "has-header": "awsui_has-header_hyvsj_1we6f_530",
-  "content-first-child-main": "awsui_content-first-child-main_hyvsj_1we6f_545",
-  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_1we6f_545",
-  "has-left-toggles-gutter": "awsui_has-left-toggles-gutter_hyvsj_1we6f_565",
-  "has-right-toggles-gutter": "awsui_has-right-toggles-gutter_hyvsj_1we6f_568",
-  "has-split-panel": "awsui_has-split-panel_hyvsj_1we6f_588",
-  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_1we6f_588",
-  "block-body-scroll": "awsui_block-body-scroll_hyvsj_1we6f_596",
-  "unfocusable": "awsui_unfocusable_hyvsj_1we6f_601",
-  "container": "awsui_container_hyvsj_1we6f_611",
-  "is-navigation-open": "awsui_is-navigation-open_hyvsj_1we6f_637",
-  "is-tools-open": "awsui_is-tools-open_hyvsj_1we6f_640",
-  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_1we6f_640",
-  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_1we6f_640",
-  "has-active-drawer": "awsui_has-active-drawer_hyvsj_1we6f_640",
-  "mobile-toolbar": "awsui_mobile-toolbar_hyvsj_1we6f_653",
-  "remove-high-contrast-header": "awsui_remove-high-contrast-header_hyvsj_1we6f_670",
-  "mobile-toolbar-nav": "awsui_mobile-toolbar-nav_hyvsj_1we6f_674",
-  "mobile-toolbar-breadcrumbs": "awsui_mobile-toolbar-breadcrumbs_hyvsj_1we6f_678",
-  "mobile-toolbar-tools": "awsui_mobile-toolbar-tools_hyvsj_1we6f_682",
-  "navigation-container": "awsui_navigation-container_hyvsj_1we6f_691",
-  "show-navigation": "awsui_show-navigation_hyvsj_1we6f_729",
-  "animating": "awsui_animating_hyvsj_1we6f_752",
-  "showButtons": "awsui_showButtons_hyvsj_1we6f_1",
-  "navigation": "awsui_navigation_hyvsj_1we6f_691",
-  "openNavigation": "awsui_openNavigation_hyvsj_1we6f_1",
-  "animated-content": "awsui_animated-content_hyvsj_1we6f_816",
-  "content-container": "awsui_content-container_hyvsj_1we6f_819",
-  "hide-navigation": "awsui_hide-navigation_hyvsj_1we6f_828",
-  "notifications": "awsui_notifications_hyvsj_1we6f_838",
-  "has-notification-content": "awsui_has-notification-content_hyvsj_1we6f_843",
-  "sticky-notifications": "awsui_sticky-notifications_hyvsj_1we6f_847",
-  "high-contrast": "awsui_high-contrast_hyvsj_1we6f_852",
-  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_1we6f_870",
-  "position-bottom": "awsui_position-bottom_hyvsj_1we6f_917",
-  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_1we6f_1",
-  "split-panel-side": "awsui_split-panel-side_hyvsj_1we6f_946",
-  "position-side": "awsui_position-side_hyvsj_1we6f_959",
-  "tools-container": "awsui_tools-container_hyvsj_1we6f_981",
-  "tools": "awsui_tools_hyvsj_1we6f_981",
-  "openTools": "awsui_openTools_hyvsj_1we6f_1",
-  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_1we6f_1070",
-  "hide-tools": "awsui_hide-tools_hyvsj_1we6f_1080",
-  "show-tools": "awsui_show-tools_hyvsj_1we6f_1092",
-  "has-tools-form": "awsui_has-tools-form_hyvsj_1we6f_1070",
-  "trigger-button-styles": "awsui_trigger-button-styles_hyvsj_1we6f_1172",
-  "trigger-badge-wrapper": "awsui_trigger-badge-wrapper_hyvsj_1we6f_1188",
-  "trigger": "awsui_trigger_hyvsj_1we6f_1172",
-  "selected": "awsui_selected_hyvsj_1we6f_1240",
-  "badge": "awsui_badge_hyvsj_1we6f_1260",
-  "trigger-wrapper": "awsui_trigger-wrapper_hyvsj_1we6f_1264",
-  "trigger-wrapper-tooltip-visible": "awsui_trigger-wrapper-tooltip-visible_hyvsj_1we6f_1275",
-  "dot": "awsui_dot_hyvsj_1we6f_1279",
-  "trigger-tooltip": "awsui_trigger-tooltip_hyvsj_1we6f_1292"
+  "background": "awsui_background_hyvsj_xqllo_149",
+  "scrolling-background": "awsui_scrolling-background_hyvsj_xqllo_152",
+  "breadcrumbs": "awsui_breadcrumbs_hyvsj_xqllo_163",
+  "drawers-container": "awsui_drawers-container_hyvsj_xqllo_176",
+  "has-open-drawer": "awsui_has-open-drawer_hyvsj_xqllo_187",
+  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_xqllo_208",
+  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_xqllo_213",
+  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_xqllo_251",
+  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_hyvsj_xqllo_261",
+  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_xqllo_266",
+  "drawers-trigger-overflow": "awsui_drawers-trigger-overflow_hyvsj_xqllo_280",
+  "drawers-trigger": "awsui_drawers-trigger_hyvsj_xqllo_266",
+  "drawer": "awsui_drawer_hyvsj_xqllo_176",
+  "drawer-content-container": "awsui_drawer-content-container_hyvsj_xqllo_311",
+  "drawer-close-button": "awsui_drawer-close-button_hyvsj_xqllo_320",
+  "drawer-content": "awsui_drawer-content_hyvsj_xqllo_311",
+  "drawer-content-hidden": "awsui_drawer-content-hidden_hyvsj_xqllo_329",
+  "drawer-slider": "awsui_drawer-slider_hyvsj_xqllo_332",
+  "is-drawer-open": "awsui_is-drawer-open_hyvsj_xqllo_339",
+  "content": "awsui_content_hyvsj_xqllo_365",
+  "layout": "awsui_layout_hyvsj_xqllo_390",
+  "has-max-content-width": "awsui_has-max-content-width_hyvsj_xqllo_462",
+  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_xqllo_477",
+  "content-type-table": "awsui_content-type-table_hyvsj_xqllo_491",
+  "content-type-cards": "awsui_content-type-cards_hyvsj_xqllo_491",
+  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_xqllo_497",
+  "is-hide-mobile-toolbar": "awsui_is-hide-mobile-toolbar_hyvsj_xqllo_500",
+  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_xqllo_514",
+  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_xqllo_517",
+  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_xqllo_527",
+  "content-first-child-header": "awsui_content-first-child-header_hyvsj_xqllo_530",
+  "content-first-child-notifications": "awsui_content-first-child-notifications_hyvsj_xqllo_530",
+  "has-header": "awsui_has-header_hyvsj_xqllo_530",
+  "content-first-child-main": "awsui_content-first-child-main_hyvsj_xqllo_545",
+  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_xqllo_545",
+  "has-left-toggles-gutter": "awsui_has-left-toggles-gutter_hyvsj_xqllo_565",
+  "has-right-toggles-gutter": "awsui_has-right-toggles-gutter_hyvsj_xqllo_568",
+  "has-split-panel": "awsui_has-split-panel_hyvsj_xqllo_588",
+  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_xqllo_588",
+  "block-body-scroll": "awsui_block-body-scroll_hyvsj_xqllo_596",
+  "unfocusable": "awsui_unfocusable_hyvsj_xqllo_601",
+  "container": "awsui_container_hyvsj_xqllo_611",
+  "is-navigation-open": "awsui_is-navigation-open_hyvsj_xqllo_637",
+  "is-tools-open": "awsui_is-tools-open_hyvsj_xqllo_640",
+  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_xqllo_640",
+  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_xqllo_640",
+  "has-active-drawer": "awsui_has-active-drawer_hyvsj_xqllo_640",
+  "mobile-toolbar": "awsui_mobile-toolbar_hyvsj_xqllo_653",
+  "remove-high-contrast-header": "awsui_remove-high-contrast-header_hyvsj_xqllo_670",
+  "mobile-toolbar-nav": "awsui_mobile-toolbar-nav_hyvsj_xqllo_674",
+  "mobile-toolbar-breadcrumbs": "awsui_mobile-toolbar-breadcrumbs_hyvsj_xqllo_678",
+  "mobile-toolbar-tools": "awsui_mobile-toolbar-tools_hyvsj_xqllo_682",
+  "navigation-container": "awsui_navigation-container_hyvsj_xqllo_691",
+  "show-navigation": "awsui_show-navigation_hyvsj_xqllo_729",
+  "animating": "awsui_animating_hyvsj_xqllo_752",
+  "showButtons": "awsui_showButtons_hyvsj_xqllo_1",
+  "navigation": "awsui_navigation_hyvsj_xqllo_691",
+  "openNavigation": "awsui_openNavigation_hyvsj_xqllo_1",
+  "animated-content": "awsui_animated-content_hyvsj_xqllo_816",
+  "content-container": "awsui_content-container_hyvsj_xqllo_819",
+  "hide-navigation": "awsui_hide-navigation_hyvsj_xqllo_828",
+  "notifications": "awsui_notifications_hyvsj_xqllo_838",
+  "has-notification-content": "awsui_has-notification-content_hyvsj_xqllo_843",
+  "sticky-notifications": "awsui_sticky-notifications_hyvsj_xqllo_847",
+  "high-contrast": "awsui_high-contrast_hyvsj_xqllo_852",
+  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_xqllo_870",
+  "position-bottom": "awsui_position-bottom_hyvsj_xqllo_917",
+  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_xqllo_1",
+  "split-panel-side": "awsui_split-panel-side_hyvsj_xqllo_946",
+  "position-side": "awsui_position-side_hyvsj_xqllo_959",
+  "tools-container": "awsui_tools-container_hyvsj_xqllo_981",
+  "tools": "awsui_tools_hyvsj_xqllo_981",
+  "openTools": "awsui_openTools_hyvsj_xqllo_1",
+  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_xqllo_1070",
+  "hide-tools": "awsui_hide-tools_hyvsj_xqllo_1080",
+  "show-tools": "awsui_show-tools_hyvsj_xqllo_1092",
+  "has-tools-form": "awsui_has-tools-form_hyvsj_xqllo_1070",
+  "trigger-button-styles": "awsui_trigger-button-styles_hyvsj_xqllo_1172",
+  "trigger-badge-wrapper": "awsui_trigger-badge-wrapper_hyvsj_xqllo_1188",
+  "trigger": "awsui_trigger_hyvsj_xqllo_1172",
+  "selected": "awsui_selected_hyvsj_xqllo_1240",
+  "badge": "awsui_badge_hyvsj_xqllo_1260",
+  "trigger-wrapper": "awsui_trigger-wrapper_hyvsj_xqllo_1264",
+  "trigger-wrapper-tooltip-visible": "awsui_trigger-wrapper-tooltip-visible_hyvsj_xqllo_1275",
+  "dot": "awsui_dot_hyvsj_xqllo_1279",
+  "trigger-tooltip": "awsui_trigger-tooltip_hyvsj_xqllo_1292"
 };