npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.877 → 3.0.879 - Mend

@cloudscape-design/components-themeable 3.0.877 → 3.0.879

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (97) hide show

package/lib/internal/manifest.json CHANGED Viewed

@@ -1,3 +1,3 @@
 {
-  "commit": "1f1d2695571967e37437446582032fffee2cbe69"
+  "commit": "d46a1d8f8b86df37978347c46e4a402d1d594569"
 }

package/lib/internal/scss/collection-preferences/content-display/content-display-option.scss CHANGED Viewed

@@ -35,3 +35,7 @@
   @include styles.text-wrapping;
   padding-inline-end: awsui.$space-l;
 }
+.drag-handle-wrapper {
+  margin-inline: awsui.$space-scaled-xxs;
+}

package/lib/internal/scss/internal/components/drag-handle/styles.scss CHANGED Viewed

@@ -9,17 +9,10 @@
 .handle {
   appearance: none;
-  background: transparent;
-  border-block: none;
-  border-inline: none;
-  padding-block: 0;
-  padding-inline: awsui.$space-scaled-xxxs;
-  margin-block: 0;
-  margin-inline: awsui.$space-scaled-xxs;
   color: awsui.$color-text-interactive-default;
+  background: transparent;
+  inline-size: fit-content;
-  cursor: grab;
   // Prevent the browser from scrolling on touch devices when the touch event comes from the drag handle,
   // because this would otherwise interfere with actually dragging the handle.
   // The `touch-action` CSS property is not supported in desktop Safari but it is in mobile Safari
@@ -27,24 +20,64 @@
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   touch-action: none;
+  &-size-normal {
+    block-size: awsui.$line-height-body-m;
+    padding-inline: awsui.$space-scaled-xxxs;
+  }
+  &-size-small {
+    block-size: awsui.$line-height-body-s;
+  }
+  &-drag-indicator {
+    cursor: grab;
+    &:active {
+      cursor: grabbing;
+    }
+  }
+  &-resize-area {
+    cursor: nwse-resize;
+    @include styles.with-direction('rtl') {
+      cursor: nesw-resize;
+    }
+  }
+  &-resize-horizontal {
+    cursor: ew-resize;
+  }
+  &-resize-vertical {
+    cursor: ns-resize;
+  }
+  &-disabled {
+    cursor: default;
+  }
   &:hover {
     color: awsui.$color-text-interactive-hover;
   }
+  &:focus {
+    outline: none;
+    text-decoration: none;
+  }
   @include focus-visible.when-visible {
     &:not(.hide-focus) {
       @include styles.focus-highlight(0px);
     }
-    &.hide-focus {
-      outline: none;
-    }
   }
 }
-.handle:active {
-  cursor: grabbing;
-}
-.handle-disabled {
-  cursor: default;
+.resize-icon {
+  stroke: awsui.$color-text-interactive-default;
+  &:hover {
+    stroke: awsui.$color-text-interactive-hover;
+  }
+  &-vertical {
+    margin-block: auto;
+    margin-inline: auto;
+  }
+  &-horizontal {
+    transform: rotate(90deg);
+  }
 }

package/lib/internal/scss/internal/components/panel-resize-handle/styles.scss CHANGED Viewed

@@ -3,48 +3,9 @@
  SPDX-License-Identifier: Apache-2.0
 */
-@use '../../styles' as styles;
-@use '../../styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
-.slider {
-  padding-block: 0;
-  padding-inline: 0;
-  cursor: ns-resize;
-  margin-block-start: 2px;
-  margin-block-end: 0;
-  margin-inline: 0;
-  block-size: 16px;
-  // Desktop Safari doesn't support touch events, but Safari on iOS does.
-  // stylelint-disable-next-line plugin/no-unsupported-browser-features
-  touch-action: none;
-  &:focus {
-    outline: none;
-  }
-  @include focus-visible.when-visible {
-    @include styles.focus-highlight(0px);
-  }
-}
-.slider-side {
-  cursor: ew-resize;
-  margin-block: 0;
+.handle-wrapper-side {
   margin-inline-start: 2px;
-  margin-inline-end: 0;
 }
-.slider-icon {
-  stroke: awsui.$color-text-interactive-default;
-  &:hover {
-    stroke: awsui.$color-text-interactive-hover;
-  }
-  &-bottom {
-    margin-block: auto;
-    margin-inline: auto;
-  }
-  &-side {
-    transform: rotate(90deg);
-  }
+.handle-wrapper-bottom {
+  margin-block-start: 2px;
 }

package/lib/internal/scss/tabs/tab-header-bar.scss CHANGED Viewed

@@ -106,6 +106,7 @@ $label-horizontal-spacing: awsui.$space-xs;
   & > .tabs-tab-dismiss,
   & > .tabs-tab-action {
+    position: relative;
     display: flex;
     align-items: center;
   }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"resizable-drawer.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/drawer/resizable-drawer.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAKpD,eAAO,MAAM,eAAe,iFAQzB,oBAAoB,~~gBA0DtB~~,CAAC"}
1	+ {"version":3,"file":"resizable-drawer.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/drawer/resizable-drawer.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAKpD,eAAO,MAAM,eAAe,iFAQzB,oBAAoB,gBA4DtB,CAAC"}

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

@@ -28,13 +28,14 @@ export const ResizableDrawer = (_a) => {
     const sizeControlProps = {
         position: 'side',
         panelRef: drawerRefObject,
-        handleRef: refs.slider,
+        handleRef: refs.handle,
         onResize: setSidePanelWidth,
     };
     const onSliderPointerDown = usePointerEvents(sizeControlProps);
     const onKeyDown = useKeyboardEvents(sizeControlProps);
     return (React.createElement(Drawer, Object.assign({}, props, { id: activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id, width: clampedWidth, ref: drawerRefObject, isHidden: !activeDrawer, resizeHandle: !isMobile &&
-            (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.resizable) && (React.createElement(PanelResizeHandle, { ref: refs.slider, position: "side", className: testutilStyles['drawers-slider'], ariaLabel: (_b = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _b === void 0 ? void 0 : _b.resizeHandle, ariaValuenow: relativeSize, onKeyDown: onKeyDown, onPointerDown: onSliderPointerDown })), ariaLabels: {
+            (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.resizable) && (React.createElement("div", { ref: refs.handle },
+            React.createElement(PanelResizeHandle, { ref: refs.slider, position: "side", className: testutilStyles['drawers-slider'], ariaLabel: (_b = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _b === void 0 ? void 0 : _b.resizeHandle, ariaValuenow: relativeSize, onKeyDown: onKeyDown, onPointerDown: onSliderPointerDown }))), ariaLabels: {
             openLabel: (_c = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _c === void 0 ? void 0 : _c.triggerButton,
             mainLabel: (_d = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _d === void 0 ? void 0 : _d.drawerName,
             closeLabel: (_e = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _e === void 0 ? void 0 : _e.closeButton,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"resizable-drawer.js","sourceRoot":"","sources":["../../../../src/app-layout/drawer/resizable-drawer.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,iBAAiB,MAAM,+CAA+C,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAErE,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAGjC,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAC3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAQT,EAAE,EAAE;;QARK,EAC9B,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,YAAY,OAES,EADlB,KAAK,cAPsB,4EAQ/B,CADS;IAER,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAEpD,MAAM,YAAY,GAAG,eAAe,CAAC,QAAQ,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;IAChE,MAAM,YAAY,GAAG,CAAC,CAAC,YAAY,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,GAAG,QAAQ,CAAC,CAAC,GAAG,GAAG,CAAC;IAE/E,MAAM,iBAAiB,GAAG,CAAC,QAAgB,EAAE,EAAE;QAC7C,MAAM,IAAI,GAAG,eAAe,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAC3D,MAAM,EAAE,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,EAAE,CAAC;QAE5B,IAAI,MAAM,IAAI,EAAE,IAAI,QAAQ,IAAI,QAAQ,EAAE;YACxC,QAAQ,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;SACxB;IACH,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAErD,MAAM,gBAAgB,GAAqB;QACzC,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,eAAe;QACzB,SAAS,EAAE,IAAI,CAAC,MAAM;QACtB,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,OAAO,CACL,oBAAC,MAAM,oBACD,KAAK,IACT,EAAE,EAAE,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,EAAE,EACpB,KAAK,EAAE,YAAY,EACnB,GAAG,EAAE,eAAe,EACpB,QAAQ,EAAE,CAAC,YAAY,EACvB,YAAY,EACV,CAAC,QAAQ;aACT,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,SAAS,CAAA,IAAI,CACzB,oBAAC,iBAAiB,IAChB,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,QAAQ,EAAC,MAAM,EACf,SAAS,EAAE,cAAc,CAAC,gBAAgB,CAAC,EAC3C,SAAS,EAAE,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,UAAU,0CAAE,YAAY,EACjD,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,mBAAmB,GAClC,~~CACH~~,EAEH,UAAU,EAAE;YACV,SAAS,EAAE,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,UAAU,0CAAE,aAAa;YAClD,SAAS,EAAE,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,UAAU,0CAAE,UAAU;YAC/C,UAAU,EAAE,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,UAAU,0CAAE,WAAW;SAClD;QAEA,YAAY,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,EAAE,MAAK,eAAe,IAAI,MAAM,CAAC,IAAI,CAAC,IAAG,YAAY,CAAO;QAC/G,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,EAAE,MAAK,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAChD,CACV,CAAC;AACJ,CAAC,CAAC","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"]}
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.handle,\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 <div ref={refs.handle}>\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 </div>\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/lib/internal/template/app-layout/utils/use-focus-control.d.ts CHANGED Viewed

@@ -5,7 +5,8 @@ export interface Focusable {
 export interface FocusControlRefs {
     toggle: RefObject<Focusable>;
     close: RefObject<Focusable>;
-    slider: RefObject<HTMLDivElement>;
+    slider: RefObject<Focusable>;
+    handle: RefObject<HTMLDivElement>;
 }
 export interface FocusControlState {
     refs: FocusControlRefs;

package/lib/internal/template/app-layout/utils/use-focus-control.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-focus-control.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-focus-control.ts"],"names":[],"mappings":"AAEA,OAAO,EAAa,SAAS,EAAkC,MAAM,OAAO,CAAC;AAE7E,MAAM,WAAW,SAAS;IACxB,KAAK,IAAI,IAAI,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,MAAM,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACnC;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,gBAAgB,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,0BAA0B;IACzC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IACvC,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IACpF,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,uBAAuB,CACrC,YAAY,EAAE,OAAO,EACrB,gBAAgB,EAAE,KAAK,CAAC,MAAM,CAAC,GAC9B,0BAA0B,~~CAgE5B~~;AAED,wBAAgB,eAAe,CAC7B,MAAM,EAAE,OAAO,EACf,YAAY,UAAQ,EACpB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,GAC7B,iBAAiB,~~CAmDnB~~"}
1	+ {"version":3,"file":"use-focus-control.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-focus-control.ts"],"names":[],"mappings":"AAEA,OAAO,EAAa,SAAS,EAAkC,MAAM,OAAO,CAAC;AAE7E,MAAM,WAAW,SAAS;IACxB,KAAK,IAAI,IAAI,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,MAAM,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACnC;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,gBAAgB,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,0BAA0B;IACzC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IACvC,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IACpF,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,uBAAuB,CACrC,YAAY,EAAE,OAAO,EACrB,gBAAgB,EAAE,KAAK,CAAC,MAAM,CAAC,GAC9B,0BAA0B,CAiE5B;AAED,wBAAgB,eAAe,CAC7B,MAAM,EAAE,OAAO,EACf,YAAY,UAAQ,EACpB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,GAC7B,iBAAiB,CAoDnB"}

package/lib/internal/template/app-layout/utils/use-focus-control.js CHANGED Viewed

@@ -9,6 +9,7 @@ export function useMultipleFocusControl(restoreFocus, activeDrawersIds) {
                 toggle: createRef(),
                 close: createRef(),
                 slider: createRef(),
+                handle: createRef(),
             };
         }
     });
@@ -65,6 +66,7 @@ export function useFocusControl(isOpen, restoreFocus = false, activeDrawerId) {
         toggle: useRef(null),
         close: useRef(null),
         slider: useRef(null),
+        handle: useRef(null),
     };
     const previousFocusedElement = useRef();
     const shouldFocus = useRef(false);

package/lib/internal/template/app-layout/utils/use-focus-control.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-focus-control.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-focus-control.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,SAAS,EAAa,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;~~AAwB7E~~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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { createRef, RefObject, useCallback, useEffect, useRef } from 'react';\n\nexport interface Focusable {\n focus(): void;\n}\n\nexport interface FocusControlRefs {\n toggle: RefObject<Focusable>;\n close: RefObject<Focusable>;\n slider: RefObject<HTMLDivElement>;\n}\n\nexport interface FocusControlState {\n refs: FocusControlRefs;\n setFocus: (force?: boolean) => void;\n loseFocus: () => void;\n}\n\nexport interface FocusControlMultipleStates {\n refs: Record<string, FocusControlRefs>;\n setFocus: (params?: { force?: boolean; drawerId?: string; open?: boolean }) => void;\n loseFocus: () => void;\n}\n\nexport function useMultipleFocusControl(\n restoreFocus: boolean,\n activeDrawersIds: Array<string>\n): FocusControlMultipleStates {\n const refs = useRef<Record<string, FocusControlRefs>>({});\n\n activeDrawersIds.forEach(drawerId => {\n if (!refs.current[drawerId]) {\n refs.current[drawerId] = {\n toggle: createRef<Focusable>(),\n close: createRef<Focusable>(),\n slider: createRef<HTMLDivElement>(),\n };\n }\n });\n\n const doFocus = useCallback(\n (drawerId: string, open = true) => {\n if (!shouldFocus.current) {\n return;\n }\n const ref = refs.current[drawerId];\n if (open) {\n previousFocusedElement.current =\n document.activeElement !== document.body ? (document.activeElement as HTMLElement) : undefined;\n if (ref?.slider?.current) {\n ref.slider.current?.focus();\n } else {\n ref?.close?.current?.focus();\n }\n } else {\n if (restoreFocus && previousFocusedElement.current && document.contains(previousFocusedElement.current)) {\n previousFocusedElement.current.focus();\n previousFocusedElement.current = undefined;\n } else {\n ref?.toggle?.current?.focus();\n }\n }\n shouldFocus.current = false;\n },\n [refs, restoreFocus]\n );\n\n const setFocus = (params?: { force?: boolean; drawerId?: string; open?: boolean }) => {\n const { force = false, drawerId = null, open = true } = params \|\| {};\n shouldFocus.current = true;\n if (force && (!drawerId \|\| activeDrawersIds.includes(drawerId))) {\n doFocus(drawerId!, open);\n }\n };\n\n const loseFocus = useCallback(() => {\n previousFocusedElement.current = undefined;\n }, []);\n\n const previousFocusedElement = useRef<HTMLElement>();\n const shouldFocus = useRef(false);\n\n useEffect(() => {\n doFocus(activeDrawersIds[0]);\n }, [activeDrawersIds, doFocus]);\n\n return {\n refs: refs.current,\n setFocus,\n loseFocus,\n };\n}\n\nexport function useFocusControl(\n isOpen: boolean,\n restoreFocus = false,\n activeDrawerId?: string \| null\n): FocusControlState {\n const refs = {\n toggle: useRef<Focusable>(null),\n close: useRef<Focusable>(null),\n slider: useRef<HTMLDivElement>(null),\n };\n const previousFocusedElement = useRef<HTMLElement>();\n const shouldFocus = useRef(false);\n\n const doFocus = () => {\n if (!shouldFocus.current) {\n return;\n }\n if (isOpen) {\n previousFocusedElement.current =\n document.activeElement !== document.body ? (document.activeElement as HTMLElement) : undefined;\n if (refs.slider.current) {\n refs.slider.current?.focus();\n } else {\n refs.close.current?.focus();\n }\n } else {\n if (restoreFocus && previousFocusedElement.current && document.contains(previousFocusedElement.current)) {\n previousFocusedElement.current.focus();\n previousFocusedElement.current = undefined;\n } else {\n refs.toggle.current?.focus();\n }\n }\n shouldFocus.current = false;\n };\n\n const setFocus = (force?: boolean) => {\n shouldFocus.current = true;\n if (force && isOpen) {\n doFocus();\n }\n };\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useEffect(doFocus, [isOpen, activeDrawerId]);\n\n const loseFocus = useCallback(() => {\n previousFocusedElement.current = undefined;\n }, []);\n\n return {\n refs,\n setFocus,\n loseFocus,\n };\n}\n"]}
1	+ {"version":3,"file":"use-focus-control.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-focus-control.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,SAAS,EAAa,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAyB7E,MAAM,UAAU,uBAAuB,CACrC,YAAqB,EACrB,gBAA+B;IAE/B,MAAM,IAAI,GAAG,MAAM,CAAmC,EAAE,CAAC,CAAC;IAE1D,gBAAgB,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;QAClC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;YAC3B,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG;gBACvB,MAAM,EAAE,SAAS,EAAa;gBAC9B,KAAK,EAAE,SAAS,EAAa;gBAC7B,MAAM,EAAE,SAAS,EAAa;gBAC9B,MAAM,EAAE,SAAS,EAAkB;aACpC,CAAC;SACH;IACH,CAAC,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,QAAgB,EAAE,IAAI,GAAG,IAAI,EAAE,EAAE;;QAChC,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE;YACxB,OAAO;SACR;QACD,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QACnC,IAAI,IAAI,EAAE;YACR,sBAAsB,CAAC,OAAO;gBAC5B,QAAQ,CAAC,aAAa,KAAK,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAE,QAAQ,CAAC,aAA6B,CAAC,CAAC,CAAC,SAAS,CAAC;YACjG,IAAI,MAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,MAAM,0CAAE,OAAO,EAAE;gBACxB,MAAA,GAAG,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;aAC7B;iBAAM;gBACL,MAAA,MAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,KAAK,0CAAE,OAAO,0CAAE,KAAK,EAAE,CAAC;aAC9B;SACF;aAAM;YACL,IAAI,YAAY,IAAI,sBAAsB,CAAC,OAAO,IAAI,QAAQ,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,EAAE;gBACvG,sBAAsB,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;gBACvC,sBAAsB,CAAC,OAAO,GAAG,SAAS,CAAC;aAC5C;iBAAM;gBACL,MAAA,MAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,MAAM,0CAAE,OAAO,0CAAE,KAAK,EAAE,CAAC;aAC/B;SACF;QACD,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC;IAC9B,CAAC,EACD,CAAC,IAAI,EAAE,YAAY,CAAC,CACrB,CAAC;IAEF,MAAM,QAAQ,GAAG,CAAC,MAA+D,EAAE,EAAE;QACnF,MAAM,EAAE,KAAK,GAAG,KAAK,EAAE,QAAQ,GAAG,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,MAAM,IAAI,EAAE,CAAC;QACrE,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;QAC3B,IAAI,KAAK,IAAI,CAAC,CAAC,QAAQ,IAAI,gBAAgB,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,EAAE;YAC/D,OAAO,CAAC,QAAS,EAAE,IAAI,CAAC,CAAC;SAC1B;IACH,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,sBAAsB,CAAC,OAAO,GAAG,SAAS,CAAC;IAC7C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,sBAAsB,GAAG,MAAM,EAAe,CAAC;IACrD,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAElC,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/B,CAAC,EAAE,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC,CAAC;IAEhC,OAAO;QACL,IAAI,EAAE,IAAI,CAAC,OAAO;QAClB,QAAQ;QACR,SAAS;KACV,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,eAAe,CAC7B,MAAe,EACf,YAAY,GAAG,KAAK,EACpB,cAA8B;IAE9B,MAAM,IAAI,GAAG;QACX,MAAM,EAAE,MAAM,CAAY,IAAI,CAAC;QAC/B,KAAK,EAAE,MAAM,CAAY,IAAI,CAAC;QAC9B,MAAM,EAAE,MAAM,CAAY,IAAI,CAAC;QAC/B,MAAM,EAAE,MAAM,CAAiB,IAAI,CAAC;KACrC,CAAC;IACF,MAAM,sBAAsB,GAAG,MAAM,EAAe,CAAC;IACrD,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAElC,MAAM,OAAO,GAAG,GAAG,EAAE;;QACnB,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE;YACxB,OAAO;SACR;QACD,IAAI,MAAM,EAAE;YACV,sBAAsB,CAAC,OAAO;gBAC5B,QAAQ,CAAC,aAAa,KAAK,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAE,QAAQ,CAAC,aAA6B,CAAC,CAAC,CAAC,SAAS,CAAC;YACjG,IAAI,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;gBACvB,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;aAC9B;iBAAM;gBACL,MAAA,IAAI,CAAC,KAAK,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;aAC7B;SACF;aAAM;YACL,IAAI,YAAY,IAAI,sBAAsB,CAAC,OAAO,IAAI,QAAQ,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,EAAE;gBACvG,sBAAsB,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;gBACvC,sBAAsB,CAAC,OAAO,GAAG,SAAS,CAAC;aAC5C;iBAAM;gBACL,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;aAC9B;SACF;QACD,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC;IAC9B,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,CAAC,KAAe,EAAE,EAAE;QACnC,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;QAC3B,IAAI,KAAK,IAAI,MAAM,EAAE;YACnB,OAAO,EAAE,CAAC;SACX;IACH,CAAC,CAAC;IAEF,uDAAuD;IACvD,SAAS,CAAC,OAAO,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC;IAE7C,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,sBAAsB,CAAC,OAAO,GAAG,SAAS,CAAC;IAC7C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,IAAI;QACJ,QAAQ;QACR,SAAS;KACV,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { createRef, RefObject, useCallback, useEffect, useRef } from 'react';\n\nexport interface Focusable {\n focus(): void;\n}\n\nexport interface FocusControlRefs {\n toggle: RefObject<Focusable>;\n close: RefObject<Focusable>;\n slider: RefObject<Focusable>;\n handle: RefObject<HTMLDivElement>;\n}\n\nexport interface FocusControlState {\n refs: FocusControlRefs;\n setFocus: (force?: boolean) => void;\n loseFocus: () => void;\n}\n\nexport interface FocusControlMultipleStates {\n refs: Record<string, FocusControlRefs>;\n setFocus: (params?: { force?: boolean; drawerId?: string; open?: boolean }) => void;\n loseFocus: () => void;\n}\n\nexport function useMultipleFocusControl(\n restoreFocus: boolean,\n activeDrawersIds: Array<string>\n): FocusControlMultipleStates {\n const refs = useRef<Record<string, FocusControlRefs>>({});\n\n activeDrawersIds.forEach(drawerId => {\n if (!refs.current[drawerId]) {\n refs.current[drawerId] = {\n toggle: createRef<Focusable>(),\n close: createRef<Focusable>(),\n slider: createRef<Focusable>(),\n handle: createRef<HTMLDivElement>(),\n };\n }\n });\n\n const doFocus = useCallback(\n (drawerId: string, open = true) => {\n if (!shouldFocus.current) {\n return;\n }\n const ref = refs.current[drawerId];\n if (open) {\n previousFocusedElement.current =\n document.activeElement !== document.body ? (document.activeElement as HTMLElement) : undefined;\n if (ref?.slider?.current) {\n ref.slider.current?.focus();\n } else {\n ref?.close?.current?.focus();\n }\n } else {\n if (restoreFocus && previousFocusedElement.current && document.contains(previousFocusedElement.current)) {\n previousFocusedElement.current.focus();\n previousFocusedElement.current = undefined;\n } else {\n ref?.toggle?.current?.focus();\n }\n }\n shouldFocus.current = false;\n },\n [refs, restoreFocus]\n );\n\n const setFocus = (params?: { force?: boolean; drawerId?: string; open?: boolean }) => {\n const { force = false, drawerId = null, open = true } = params \|\| {};\n shouldFocus.current = true;\n if (force && (!drawerId \|\| activeDrawersIds.includes(drawerId))) {\n doFocus(drawerId!, open);\n }\n };\n\n const loseFocus = useCallback(() => {\n previousFocusedElement.current = undefined;\n }, []);\n\n const previousFocusedElement = useRef<HTMLElement>();\n const shouldFocus = useRef(false);\n\n useEffect(() => {\n doFocus(activeDrawersIds[0]);\n }, [activeDrawersIds, doFocus]);\n\n return {\n refs: refs.current,\n setFocus,\n loseFocus,\n };\n}\n\nexport function useFocusControl(\n isOpen: boolean,\n restoreFocus = false,\n activeDrawerId?: string \| null\n): FocusControlState {\n const refs = {\n toggle: useRef<Focusable>(null),\n close: useRef<Focusable>(null),\n slider: useRef<Focusable>(null),\n handle: useRef<HTMLDivElement>(null),\n };\n const previousFocusedElement = useRef<HTMLElement>();\n const shouldFocus = useRef(false);\n\n const doFocus = () => {\n if (!shouldFocus.current) {\n return;\n }\n if (isOpen) {\n previousFocusedElement.current =\n document.activeElement !== document.body ? (document.activeElement as HTMLElement) : undefined;\n if (refs.slider.current) {\n refs.slider.current?.focus();\n } else {\n refs.close.current?.focus();\n }\n } else {\n if (restoreFocus && previousFocusedElement.current && document.contains(previousFocusedElement.current)) {\n previousFocusedElement.current.focus();\n previousFocusedElement.current = undefined;\n } else {\n refs.toggle.current?.focus();\n }\n }\n shouldFocus.current = false;\n };\n\n const setFocus = (force?: boolean) => {\n shouldFocus.current = true;\n if (force && isOpen) {\n doFocus();\n }\n };\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useEffect(doFocus, [isOpen, activeDrawerId]);\n\n const loseFocus = useCallback(() => {\n previousFocusedElement.current = undefined;\n }, []);\n\n return {\n refs,\n setFocus,\n loseFocus,\n };\n}\n"]}

package/lib/internal/template/app-layout/utils/use-resize.d.ts.map CHANGED Viewed

	@@ -1 +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"}
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;;;EAmDrB;AAED,eAAe,SAAS,CAAC"}

package/lib/internal/template/app-layout/utils/use-resize.js CHANGED Viewed

@@ -30,12 +30,13 @@ function useResize(drawerRefObject, { activeDrawer, activeDrawerSize, onActiveDr
     const sizeControlProps = {
         position: 'side',
         panelRef: drawerRefObject,
-        handleRef: drawersRefs.slider,
+        handleRef: drawersRefs.handle,
         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 resizeHandle = (React.createElement("div", { ref: drawersRefs.handle },
+        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 })));
     return { resizeHandle, drawerSize };
 }
 export default useResize;

package/lib/internal/template/app-layout/utils/use-resize.js.map CHANGED Viewed

	@@ -1 +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"]}
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,6BAAK,GAAG,EAAE,WAAW,CAAC,MAAM;QAC1B,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,CACE,CACP,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.handle,\n onResize: setSidePanelWidth,\n };\n\n const onSliderPointerDown = usePointerEvents(sizeControlProps);\n const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n const resizeHandle = (\n <div ref={drawersRefs.handle}>\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 </div>\n );\n\n return { resizeHandle, drawerSize };\n}\n\nexport default useResize;\n"]}

package/lib/internal/template/app-layout/utils/use-split-panel-focus-control.d.ts CHANGED Viewed

@@ -9,7 +9,8 @@ type SplitPanelLastInteraction = {
 };
 export interface SplitPanelFocusControlRefs {
     toggle: RefObject<Focusable>;
-    slider: RefObject<HTMLDivElement>;
+    slider: RefObject<Focusable>;
+    handle: RefObject<HTMLDivElement>;
     preferences: RefObject<Focusable>;
 }
 export interface SplitPanelFocusControlState {

package/lib/internal/template/app-layout/utils/use-split-panel-focus-control.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-split-panel-focus-control.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-split-panel-focus-control.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAErE,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,KAAK,yBAAyB,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,CAAC;AAE7F,MAAM,WAAW,0BAA0B;IACzC,MAAM,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAClC,WAAW,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACnC;AACD,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,0BAA0B,CAAC;IACjC,kBAAkB,EAAE,CAAC,WAAW,EAAE,yBAAyB,KAAK,IAAI,CAAC;CACtE;AAED,wBAAgB,yBAAyB,CAAC,YAAY,EAAE,cAAc,GAAG,2BAA2B,~~CA4BnG~~"}
1	+ {"version":3,"file":"use-split-panel-focus-control.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-split-panel-focus-control.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAErE,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,KAAK,yBAAyB,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,CAAC;AAE7F,MAAM,WAAW,0BAA0B;IACzC,MAAM,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAClC,WAAW,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACnC;AACD,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,0BAA0B,CAAC;IACjC,kBAAkB,EAAE,CAAC,WAAW,EAAE,yBAAyB,KAAK,IAAI,CAAC;CACtE;AAED,wBAAgB,yBAAyB,CAAC,YAAY,EAAE,cAAc,GAAG,2BAA2B,CA6BnG"}

package/lib/internal/template/app-layout/utils/use-split-panel-focus-control.js CHANGED Viewed

@@ -5,6 +5,7 @@ export function useSplitPanelFocusControl(dependencies) {
     const refs = {
         toggle: useRef(null),
         slider: useRef(null),
+        handle: useRef(null),
         preferences: useRef(null),
     };
     const lastInteraction = useRef(null);

package/lib/internal/template/app-layout/utils/use-split-panel-focus-control.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-split-panel-focus-control.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-split-panel-focus-control.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAA6B,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;~~AAgBrE~~,MAAM,UAAU,yBAAyB,CAAC,YAA4B;IACpE,MAAM,IAAI,GAAG;QACX,MAAM,EAAE,MAAM,CAAY,IAAI,CAAC;QAC/B,MAAM,EAAE,MAAM,CAAiB,IAAI,CAAC;QACpC,WAAW,EAAE,MAAM,CAAY,IAAI,CAAC;KACrC,CAAC;IACF,MAAM,eAAe,GAAG,MAAM,CAAmC,IAAI,CAAC,CAAC;IAEvE,SAAS,CAAC,GAAG,EAAE;;QACb,QAAQ,MAAA,eAAe,CAAC,OAAO,0CAAE,IAAI,EAAE;YACrC,KAAK,MAAM;gBACT,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBAC7B,MAAM;YACR,KAAK,OAAO;gBACV,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBAC7B,MAAM;YACR,KAAK,UAAU;gBACb,MAAA,IAAI,CAAC,WAAW,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBAClC,MAAM;SACT;QACD,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;QAC/B,uDAAuD;IACzD,CAAC,EAAE,YAAY,CAAC,CAAC;IAEjB,OAAO;QACL,IAAI;QACJ,kBAAkB,EAAE,CAAC,WAAsC,EAAE,EAAE,CAAC,CAAC,eAAe,CAAC,OAAO,GAAG,WAAW,CAAC;KACxG,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { DependencyList, RefObject, useEffect, useRef } from 'react';\n\nimport { Focusable } from './use-focus-control';\n\ntype SplitPanelLastInteraction = { type: 'open' } \| { type: 'close' } \| { type: 'position' };\n\nexport interface SplitPanelFocusControlRefs {\n toggle: RefObject<Focusable>;\n slider: RefObject<HTMLDivElement>;\n preferences: RefObject<Focusable>;\n}\nexport interface SplitPanelFocusControlState {\n refs: SplitPanelFocusControlRefs;\n setLastInteraction: (interaction: SplitPanelLastInteraction) => void;\n}\n\nexport function useSplitPanelFocusControl(dependencies: DependencyList): SplitPanelFocusControlState {\n const refs = {\n toggle: useRef<Focusable>(null),\n slider: useRef<HTMLDivElement>(null),\n preferences: useRef<Focusable>(null),\n };\n const lastInteraction = useRef<SplitPanelLastInteraction \| null>(null);\n\n useEffect(() => {\n switch (lastInteraction.current?.type) {\n case 'open':\n refs.slider.current?.focus();\n break;\n case 'close':\n refs.toggle.current?.focus();\n break;\n case 'position':\n refs.preferences.current?.focus();\n break;\n }\n lastInteraction.current = null;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, dependencies);\n\n return {\n refs,\n setLastInteraction: (interaction: SplitPanelLastInteraction) => (lastInteraction.current = interaction),\n };\n}\n"]}
1	+ {"version":3,"file":"use-split-panel-focus-control.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-split-panel-focus-control.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAA6B,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAiBrE,MAAM,UAAU,yBAAyB,CAAC,YAA4B;IACpE,MAAM,IAAI,GAAG;QACX,MAAM,EAAE,MAAM,CAAY,IAAI,CAAC;QAC/B,MAAM,EAAE,MAAM,CAAY,IAAI,CAAC;QAC/B,MAAM,EAAE,MAAM,CAAiB,IAAI,CAAC;QACpC,WAAW,EAAE,MAAM,CAAY,IAAI,CAAC;KACrC,CAAC;IACF,MAAM,eAAe,GAAG,MAAM,CAAmC,IAAI,CAAC,CAAC;IAEvE,SAAS,CAAC,GAAG,EAAE;;QACb,QAAQ,MAAA,eAAe,CAAC,OAAO,0CAAE,IAAI,EAAE;YACrC,KAAK,MAAM;gBACT,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBAC7B,MAAM;YACR,KAAK,OAAO;gBACV,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBAC7B,MAAM;YACR,KAAK,UAAU;gBACb,MAAA,IAAI,CAAC,WAAW,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBAClC,MAAM;SACT;QACD,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;QAC/B,uDAAuD;IACzD,CAAC,EAAE,YAAY,CAAC,CAAC;IAEjB,OAAO;QACL,IAAI;QACJ,kBAAkB,EAAE,CAAC,WAAsC,EAAE,EAAE,CAAC,CAAC,eAAe,CAAC,OAAO,GAAG,WAAW,CAAC;KACxG,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { DependencyList, RefObject, useEffect, useRef } from 'react';\n\nimport { Focusable } from './use-focus-control';\n\ntype SplitPanelLastInteraction = { type: 'open' } \| { type: 'close' } \| { type: 'position' };\n\nexport interface SplitPanelFocusControlRefs {\n toggle: RefObject<Focusable>;\n slider: RefObject<Focusable>;\n handle: RefObject<HTMLDivElement>;\n preferences: RefObject<Focusable>;\n}\nexport interface SplitPanelFocusControlState {\n refs: SplitPanelFocusControlRefs;\n setLastInteraction: (interaction: SplitPanelLastInteraction) => void;\n}\n\nexport function useSplitPanelFocusControl(dependencies: DependencyList): SplitPanelFocusControlState {\n const refs = {\n toggle: useRef<Focusable>(null),\n slider: useRef<Focusable>(null),\n handle: useRef<HTMLDivElement>(null),\n preferences: useRef<Focusable>(null),\n };\n const lastInteraction = useRef<SplitPanelLastInteraction \| null>(null);\n\n useEffect(() => {\n switch (lastInteraction.current?.type) {\n case 'open':\n refs.slider.current?.focus();\n break;\n case 'close':\n refs.toggle.current?.focus();\n break;\n case 'position':\n refs.preferences.current?.focus();\n break;\n }\n lastInteraction.current = null;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, dependencies);\n\n return {\n refs,\n setLastInteraction: (interaction: SplitPanelLastInteraction) => (lastInteraction.current = interaction),\n };\n}\n"]}

package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/global-drawer.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"global-drawer.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/global-drawer.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAOnE,UAAU,wCAAwC;IAChD,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,IAAI,EAAE,OAAO,CAAC;IACd,kBAAkB,EAAE,cAAc,GAAG,SAAS,CAAC;CAChD;AAED,iBAAS,mCAAmC,CAAC,EAC3C,kBAAkB,EAClB,IAAI,EACJ,kBAAkB,GACnB,EAAE,wCAAwC,~~eA0H1C~~;AAED,eAAe,mCAAmC,CAAC"}
1	+ {"version":3,"file":"global-drawer.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/global-drawer.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAOnE,UAAU,wCAAwC;IAChD,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,IAAI,EAAE,OAAO,CAAC;IACd,kBAAkB,EAAE,cAAc,GAAG,SAAS,CAAC;CAChD;AAED,iBAAS,mCAAmC,CAAC,EAC3C,kBAAkB,EAClB,IAAI,EACJ,kBAAkB,GACnB,EAAE,wCAAwC,eA4H1C;AAED,eAAe,mCAAmC,CAAC"}

package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/global-drawer.js CHANGED Viewed

@@ -31,7 +31,7 @@ function AppLayoutGlobalDrawerImplementation({ appLayoutInternals, show, activeG
         minWidth: minDrawerSize,
         maxWidth: maxDrawerSize,
         panelRef: drawerRef,
-        handleRef: refs === null || refs === void 0 ? void 0 : refs.slider,
+        handleRef: refs === null || refs === void 0 ? void 0 : refs.handle,
         onResize: size => onActiveDrawerResize({ id: activeDrawerId, size }),
     });
     const size = getLimitedValue(minDrawerSize, activeDrawerSize, maxDrawerSize);
@@ -60,7 +60,8 @@ function AppLayoutGlobalDrawerImplementation({ appLayoutInternals, show, activeG
                 [customCssProps.drawerSize]: `${['entering', 'entered'].includes(state) ? size : 0}px`,
             })), "data-testid": `awsui-app-layout-drawer-${activeDrawerId}` },
             !isMobile && (activeGlobalDrawer === null || activeGlobalDrawer === void 0 ? void 0 : activeGlobalDrawer.resizable) && (React.createElement("div", { className: styles['drawer-slider'] },
-                React.createElement(PanelResizeHandle, { ref: refs === null || refs === void 0 ? void 0 : refs.slider, position: "side", className: testutilStyles['drawers-slider'], ariaLabel: (_a = activeGlobalDrawer === null || activeGlobalDrawer === void 0 ? void 0 : activeGlobalDrawer.ariaLabels) === null || _a === void 0 ? void 0 : _a.resizeHandle, ariaValuenow: resizeProps.relativeSize, onKeyDown: resizeProps.onKeyDown, onPointerDown: resizeProps.onPointerDown }))),
+                React.createElement("div", { ref: refs.handle },
+                    React.createElement(PanelResizeHandle, { ref: refs === null || refs === void 0 ? void 0 : refs.slider, position: "side", className: testutilStyles['drawers-slider'], ariaLabel: (_a = activeGlobalDrawer === null || activeGlobalDrawer === void 0 ? void 0 : activeGlobalDrawer.ariaLabels) === null || _a === void 0 ? void 0 : _a.resizeHandle, ariaValuenow: resizeProps.relativeSize, onKeyDown: resizeProps.onKeyDown, onPointerDown: resizeProps.onPointerDown })))),
             React.createElement("div", { className: clsx(styles['drawer-content-container'], sharedStyles['with-motion-horizontal']), "data-testid": `awsui-app-layout-drawer-content-${activeDrawerId}` },
                 React.createElement("div", { className: clsx(styles['drawer-close-button']) },
                     React.createElement(InternalButton, { ariaLabel: computedAriaLabels.closeButton, className: clsx({

package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/global-drawer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"global-drawer.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/global-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 { Transition } from 'react-transition-group';\nimport clsx from 'clsx';\n\nimport { InternalButton } from '../../../button/internal';\nimport PanelResizeHandle from '../../../internal/components/panel-resize-handle';\nimport customCssProps from '../../../internal/generated/custom-css-properties';\nimport { getLimitedValue } from '../../../split-panel/utils/size-utils';\nimport { getDrawerStyles } from '../compute-layout';\nimport { AppLayoutInternals, InternalDrawer } from '../interfaces';\nimport { useResize } from './use-resize';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface AppLayoutGlobalDrawerImplementationProps {\n appLayoutInternals: AppLayoutInternals;\n show: boolean;\n activeGlobalDrawer: InternalDrawer \| undefined;\n}\n\nfunction AppLayoutGlobalDrawerImplementation({\n appLayoutInternals,\n show,\n activeGlobalDrawer,\n}: AppLayoutGlobalDrawerImplementationProps) {\n const {\n ariaLabels,\n globalDrawersFocusControl,\n isMobile,\n placement,\n onActiveGlobalDrawersChange,\n onActiveDrawerResize,\n minGlobalDrawersSizes,\n maxGlobalDrawersSizes,\n activeGlobalDrawersSizes,\n verticalOffsets,\n drawersOpenQueue,\n } = appLayoutInternals;\n const drawerRef = useRef<HTMLDivElement>(null);\n const activeDrawerId = activeGlobalDrawer?.id ?? '';\n\n const computedAriaLabels = {\n closeButton: activeGlobalDrawer ? activeGlobalDrawer.ariaLabels?.closeButton : ariaLabels?.toolsClose,\n content: activeGlobalDrawer ? activeGlobalDrawer.ariaLabels?.drawerName : ariaLabels?.tools,\n };\n\n const { drawerTopOffset, drawerHeight } = getDrawerStyles(verticalOffsets, isMobile, placement);\n const activeDrawerSize = (activeDrawerId ? activeGlobalDrawersSizes[activeDrawerId] : 0) ?? 0;\n const minDrawerSize = (activeDrawerId ? minGlobalDrawersSizes[activeDrawerId] : 0) ?? 0;\n const maxDrawerSize = (activeDrawerId ? maxGlobalDrawersSizes[activeDrawerId] : 0) ?? 0;\n const refs = globalDrawersFocusControl.refs[activeDrawerId];\n const resizeProps = useResize({\n currentWidth: activeDrawerSize,\n minWidth: minDrawerSize,\n maxWidth: maxDrawerSize,\n panelRef: drawerRef,\n handleRef: refs?.slider,\n onResize: size => onActiveDrawerResize({ id: activeDrawerId!, size }),\n });\n const size = getLimitedValue(minDrawerSize, activeDrawerSize, maxDrawerSize);\n const lastOpenedDrawerId = drawersOpenQueue.length ? drawersOpenQueue[0] : null;\n const hasTriggerButton = !!activeGlobalDrawer?.trigger;\n const animationDisabled = activeGlobalDrawer?.defaultActive && !drawersOpenQueue.includes(activeGlobalDrawer.id);\n\n return (\n <Transition nodeRef={drawerRef} in={show} appear={show} timeout={0}>\n {state => {\n return (\n <aside\n id={activeDrawerId}\n aria-hidden={!show}\n aria-label={computedAriaLabels.content}\n className={clsx(\n styles.drawer,\n styles['drawer-global'],\n styles[state],\n !animationDisabled && sharedStyles['with-motion-horizontal'],\n {\n [styles['drawer-hidden']]: !show,\n [styles['last-opened']]: lastOpenedDrawerId === activeDrawerId,\n [testutilStyles['active-drawer']]: show,\n }\n )}\n ref={drawerRef}\n onBlur={e => {\n // Drawers with trigger buttons follow this restore focus logic:\n // If a previously focused element exists, restore focus on it; otherwise, focus on the associated trigger button.\n // This function resets the previously focused element.\n // If the drawer has no trigger button and loses focus on the previously focused element, it defaults to document.body,\n // which ideally should never happen.\n if (!hasTriggerButton) {\n return;\n }\n\n if (!e.relatedTarget \|\| !e.currentTarget.contains(e.relatedTarget)) {\n globalDrawersFocusControl.loseFocus();\n }\n }}\n style={{\n blockSize: drawerHeight,\n insetBlockStart: drawerTopOffset,\n ...(!isMobile && {\n [customCssProps.drawerSize]: `${['entering', 'entered'].includes(state) ? size : 0}px`,\n }),\n }}\n data-testid={`awsui-app-layout-drawer-${activeDrawerId}`}\n >\n {!isMobile && activeGlobalDrawer?.resizable && (\n <div className={styles['drawer-slider']}>\n <PanelResizeHandle\n ref={refs?.slider}\n position=\"side\"\n className={testutilStyles['drawers-slider']}\n ariaLabel={activeGlobalDrawer?.ariaLabels?.resizeHandle}\n ariaValuenow={resizeProps.relativeSize}\n onKeyDown={resizeProps.onKeyDown}\n onPointerDown={resizeProps.onPointerDown}\n />\n </div>\n )}\n <div\n className={clsx(styles['drawer-content-container'], sharedStyles['with-motion-horizontal'])}\n data-testid={`awsui-app-layout-drawer-content-${activeDrawerId}`}\n >\n <div className={clsx(styles['drawer-close-button'])}>\n <InternalButton\n ariaLabel={computedAriaLabels.closeButton}\n className={clsx({\n [testutilStyles['active-drawer-close-button']]: activeDrawerId,\n })}\n formAction=\"none\"\n iconName={isMobile ? 'close' : 'angle-right'}\n onClick={() => onActiveGlobalDrawersChange(activeDrawerId, { initiatedByUserAction: true })}\n ref={refs?.close}\n variant=\"icon\"\n />\n </div>\n <div className={styles['drawer-content']} style={{ blockSize: drawerHeight }}>\n {activeGlobalDrawer?.content}\n </div>\n </div>\n </aside>\n );\n }}\n </Transition>\n );\n}\n\nexport default AppLayoutGlobalDrawerImplementation;\n"]}
1	+ {"version":3,"file":"global-drawer.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/global-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 { Transition } from 'react-transition-group';\nimport clsx from 'clsx';\n\nimport { InternalButton } from '../../../button/internal';\nimport PanelResizeHandle from '../../../internal/components/panel-resize-handle';\nimport customCssProps from '../../../internal/generated/custom-css-properties';\nimport { getLimitedValue } from '../../../split-panel/utils/size-utils';\nimport { getDrawerStyles } from '../compute-layout';\nimport { AppLayoutInternals, InternalDrawer } from '../interfaces';\nimport { useResize } from './use-resize';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface AppLayoutGlobalDrawerImplementationProps {\n appLayoutInternals: AppLayoutInternals;\n show: boolean;\n activeGlobalDrawer: InternalDrawer \| undefined;\n}\n\nfunction AppLayoutGlobalDrawerImplementation({\n appLayoutInternals,\n show,\n activeGlobalDrawer,\n}: AppLayoutGlobalDrawerImplementationProps) {\n const {\n ariaLabels,\n globalDrawersFocusControl,\n isMobile,\n placement,\n onActiveGlobalDrawersChange,\n onActiveDrawerResize,\n minGlobalDrawersSizes,\n maxGlobalDrawersSizes,\n activeGlobalDrawersSizes,\n verticalOffsets,\n drawersOpenQueue,\n } = appLayoutInternals;\n const drawerRef = useRef<HTMLDivElement>(null);\n const activeDrawerId = activeGlobalDrawer?.id ?? '';\n\n const computedAriaLabels = {\n closeButton: activeGlobalDrawer ? activeGlobalDrawer.ariaLabels?.closeButton : ariaLabels?.toolsClose,\n content: activeGlobalDrawer ? activeGlobalDrawer.ariaLabels?.drawerName : ariaLabels?.tools,\n };\n\n const { drawerTopOffset, drawerHeight } = getDrawerStyles(verticalOffsets, isMobile, placement);\n const activeDrawerSize = (activeDrawerId ? activeGlobalDrawersSizes[activeDrawerId] : 0) ?? 0;\n const minDrawerSize = (activeDrawerId ? minGlobalDrawersSizes[activeDrawerId] : 0) ?? 0;\n const maxDrawerSize = (activeDrawerId ? maxGlobalDrawersSizes[activeDrawerId] : 0) ?? 0;\n const refs = globalDrawersFocusControl.refs[activeDrawerId];\n const resizeProps = useResize({\n currentWidth: activeDrawerSize,\n minWidth: minDrawerSize,\n maxWidth: maxDrawerSize,\n panelRef: drawerRef,\n handleRef: refs?.handle,\n onResize: size => onActiveDrawerResize({ id: activeDrawerId!, size }),\n });\n const size = getLimitedValue(minDrawerSize, activeDrawerSize, maxDrawerSize);\n const lastOpenedDrawerId = drawersOpenQueue.length ? drawersOpenQueue[0] : null;\n const hasTriggerButton = !!activeGlobalDrawer?.trigger;\n const animationDisabled = activeGlobalDrawer?.defaultActive && !drawersOpenQueue.includes(activeGlobalDrawer.id);\n\n return (\n <Transition nodeRef={drawerRef} in={show} appear={show} timeout={0}>\n {state => {\n return (\n <aside\n id={activeDrawerId}\n aria-hidden={!show}\n aria-label={computedAriaLabels.content}\n className={clsx(\n styles.drawer,\n styles['drawer-global'],\n styles[state],\n !animationDisabled && sharedStyles['with-motion-horizontal'],\n {\n [styles['drawer-hidden']]: !show,\n [styles['last-opened']]: lastOpenedDrawerId === activeDrawerId,\n [testutilStyles['active-drawer']]: show,\n }\n )}\n ref={drawerRef}\n onBlur={e => {\n // Drawers with trigger buttons follow this restore focus logic:\n // If a previously focused element exists, restore focus on it; otherwise, focus on the associated trigger button.\n // This function resets the previously focused element.\n // If the drawer has no trigger button and loses focus on the previously focused element, it defaults to document.body,\n // which ideally should never happen.\n if (!hasTriggerButton) {\n return;\n }\n\n if (!e.relatedTarget \|\| !e.currentTarget.contains(e.relatedTarget)) {\n globalDrawersFocusControl.loseFocus();\n }\n }}\n style={{\n blockSize: drawerHeight,\n insetBlockStart: drawerTopOffset,\n ...(!isMobile && {\n [customCssProps.drawerSize]: `${['entering', 'entered'].includes(state) ? size : 0}px`,\n }),\n }}\n data-testid={`awsui-app-layout-drawer-${activeDrawerId}`}\n >\n {!isMobile && activeGlobalDrawer?.resizable && (\n <div className={styles['drawer-slider']}>\n <div ref={refs.handle}>\n <PanelResizeHandle\n ref={refs?.slider}\n position=\"side\"\n className={testutilStyles['drawers-slider']}\n ariaLabel={activeGlobalDrawer?.ariaLabels?.resizeHandle}\n ariaValuenow={resizeProps.relativeSize}\n onKeyDown={resizeProps.onKeyDown}\n onPointerDown={resizeProps.onPointerDown}\n />\n </div>\n </div>\n )}\n <div\n className={clsx(styles['drawer-content-container'], sharedStyles['with-motion-horizontal'])}\n data-testid={`awsui-app-layout-drawer-content-${activeDrawerId}`}\n >\n <div className={clsx(styles['drawer-close-button'])}>\n <InternalButton\n ariaLabel={computedAriaLabels.closeButton}\n className={clsx({\n [testutilStyles['active-drawer-close-button']]: activeDrawerId,\n })}\n formAction=\"none\"\n iconName={isMobile ? 'close' : 'angle-right'}\n onClick={() => onActiveGlobalDrawersChange(activeDrawerId, { initiatedByUserAction: true })}\n ref={refs?.close}\n variant=\"icon\"\n />\n </div>\n <div className={styles['drawer-content']} style={{ blockSize: drawerHeight }}>\n {activeGlobalDrawer?.content}\n </div>\n </div>\n </aside>\n );\n }}\n </Transition>\n );\n}\n\nexport default AppLayoutGlobalDrawerImplementation;\n"]}

package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/local-drawer.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"local-drawer.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/local-drawer.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAOnD,UAAU,kCAAkC;IAC1C,kBAAkB,EAAE,kBAAkB,CAAC;CACxC;AAED,wBAAgB,6BAA6B,CAAC,EAAE,kBAAkB,EAAE,EAAE,kCAAkC,~~eAyHvG~~;AAED,eAAO,MAAM,+BAA+B,qGAA2D,CAAC"}
1	+ {"version":3,"file":"local-drawer.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/local-drawer.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAOnD,UAAU,kCAAkC;IAC1C,kBAAkB,EAAE,kBAAkB,CAAC;CACxC;AAED,wBAAgB,6BAA6B,CAAC,EAAE,kBAAkB,EAAE,EAAE,kCAAkC,eA2HvG;AAED,eAAO,MAAM,+BAA+B,qGAA2D,CAAC"}

package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/local-drawer.js CHANGED Viewed

@@ -32,7 +32,7 @@ export function AppLayoutDrawerImplementation({ appLayoutInternals }) {
         minWidth: minDrawerSize,
         maxWidth: maxDrawerSize,
         panelRef: drawerRef,
-        handleRef: drawersFocusControl.refs.slider,
+        handleRef: drawersFocusControl.refs.handle,
         onResize: size => onActiveDrawerResize({ id: activeDrawerId, size }),
     });
     // temporary handle a situation when app-layout is old, but this component come as a widget
@@ -59,7 +59,8 @@ export function AppLayoutDrawerImplementation({ appLayoutInternals }) {
                 [customCssProps.drawerSize]: `${['entering', 'entered'].includes(state) ? size : 0}px`,
             })), "data-testid": activeDrawerId && `awsui-app-layout-drawer-${activeDrawerId}` },
             !isMobile && (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.resizable) && (React.createElement("div", { className: styles['drawer-slider'] },
-                React.createElement(PanelResizeHandle, { ref: drawersFocusControl.refs.slider, position: "side", className: testutilStyles['drawers-slider'], ariaLabel: (_a = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _a === void 0 ? void 0 : _a.resizeHandle, ariaValuenow: resizeProps.relativeSize, onKeyDown: resizeProps.onKeyDown, onPointerDown: resizeProps.onPointerDown }))),
+                React.createElement("div", { ref: drawersFocusControl.refs.handle },
+                    React.createElement(PanelResizeHandle, { ref: drawersFocusControl.refs.slider, position: "side", className: testutilStyles['drawers-slider'], ariaLabel: (_a = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _a === void 0 ? void 0 : _a.resizeHandle, ariaValuenow: resizeProps.relativeSize, onKeyDown: resizeProps.onKeyDown, onPointerDown: resizeProps.onPointerDown })))),
             React.createElement("div", { className: clsx(styles['drawer-content-container'], sharedStyles['with-motion-horizontal']) },
                 React.createElement("div", { className: clsx(styles['drawer-close-button']) },
                     React.createElement(InternalButton, { ariaLabel: computedAriaLabels.closeButton, className: clsx({

package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/local-drawer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"local-drawer.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/local-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 { Transition } from 'react-transition-group';\nimport clsx from 'clsx';\n\nimport { InternalButton } from '../../../button/internal';\nimport PanelResizeHandle from '../../../internal/components/panel-resize-handle';\nimport customCssProps from '../../../internal/generated/custom-css-properties';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { getLimitedValue } from '../../../split-panel/utils/size-utils';\nimport { TOOLS_DRAWER_ID } from '../../utils/use-drawers';\nimport { getDrawerStyles } from '../compute-layout';\nimport { AppLayoutInternals } from '../interfaces';\nimport { useResize } from './use-resize';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface AppLayoutDrawerImplementationProps {\n appLayoutInternals: AppLayoutInternals;\n}\n\nexport function AppLayoutDrawerImplementation({ appLayoutInternals }: AppLayoutDrawerImplementationProps) {\n const {\n activeDrawer,\n minDrawerSize,\n activeDrawerSize,\n maxDrawerSize,\n ariaLabels,\n drawers,\n drawersFocusControl,\n isMobile,\n placement,\n verticalOffsets,\n drawersOpenQueue,\n onActiveDrawerChange,\n onActiveDrawerResize,\n } = appLayoutInternals;\n const drawerRef = useRef<HTMLDivElement>(null);\n const activeDrawerId = activeDrawer?.id;\n\n const computedAriaLabels = {\n closeButton: activeDrawer ? activeDrawer.ariaLabels?.closeButton : ariaLabels?.toolsClose,\n content: activeDrawer ? activeDrawer.ariaLabels?.drawerName : ariaLabels?.tools,\n };\n\n const { drawerTopOffset, drawerHeight } = getDrawerStyles(verticalOffsets, isMobile, placement);\n const toolsOnlyMode = drawers.length === 1 && drawers[0].id === TOOLS_DRAWER_ID;\n const isToolsDrawer = activeDrawer?.id === TOOLS_DRAWER_ID \|\| toolsOnlyMode;\n const toolsContent = drawers?.find(drawer => drawer.id === TOOLS_DRAWER_ID)?.content;\n const resizeProps = useResize({\n currentWidth: activeDrawerSize,\n minWidth: minDrawerSize,\n maxWidth: maxDrawerSize,\n panelRef: drawerRef,\n handleRef: drawersFocusControl.refs.slider,\n onResize: size => onActiveDrawerResize({ id: activeDrawerId!, size }),\n });\n // temporary handle a situation when app-layout is old, but this component come as a widget\n const isLegacyDrawer = drawersOpenQueue === undefined;\n const size = getLimitedValue(minDrawerSize, activeDrawerSize, maxDrawerSize);\n const lastOpenedDrawerId = drawersOpenQueue?.length ? drawersOpenQueue[0] : activeDrawerId;\n const animationDisabled = activeDrawer?.defaultActive && !drawersOpenQueue.includes(activeDrawer.id);\n\n return (\n <Transition nodeRef={drawerRef} in={!!activeDrawer} appear={true} timeout={0}>\n {state => (\n <aside\n id={activeDrawerId}\n aria-hidden={!activeDrawer}\n aria-label={computedAriaLabels.content}\n className={clsx(styles.drawer, {\n [sharedStyles['with-motion-horizontal']]: !animationDisabled,\n [styles['last-opened']]: lastOpenedDrawerId === activeDrawerId,\n [styles.legacy]: isLegacyDrawer,\n [testutilStyles['active-drawer']]: !toolsOnlyMode && activeDrawerId,\n [testutilStyles.tools]: isToolsDrawer,\n [styles['drawer-hidden']]: !activeDrawer,\n [testutilStyles['drawer-closed']]: !activeDrawer,\n })}\n ref={drawerRef}\n onBlur={e => {\n if (!e.relatedTarget \|\| !e.currentTarget.contains(e.relatedTarget)) {\n drawersFocusControl.loseFocus();\n }\n }}\n style={{\n blockSize: drawerHeight,\n insetBlockStart: drawerTopOffset,\n ...(!isMobile &&\n !isLegacyDrawer && {\n [customCssProps.drawerSize]: `${['entering', 'entered'].includes(state) ? size : 0}px`,\n }),\n }}\n data-testid={activeDrawerId && `awsui-app-layout-drawer-${activeDrawerId}`}\n >\n {!isMobile && activeDrawer?.resizable && (\n <div className={styles['drawer-slider']}>\n <PanelResizeHandle\n ref={drawersFocusControl.refs.slider}\n position=\"side\"\n className={testutilStyles['drawers-slider']}\n ariaLabel={activeDrawer?.ariaLabels?.resizeHandle}\n ariaValuenow={resizeProps.relativeSize}\n onKeyDown={resizeProps.onKeyDown}\n onPointerDown={resizeProps.onPointerDown}\n />\n </div>\n )}\n <div className={clsx(styles['drawer-content-container'], sharedStyles['with-motion-horizontal'])}>\n <div className={clsx(styles['drawer-close-button'])}>\n <InternalButton\n ariaLabel={computedAriaLabels.closeButton}\n className={clsx({\n [testutilStyles['active-drawer-close-button']]: !isToolsDrawer && activeDrawerId,\n [testutilStyles['tools-close']]: isToolsDrawer,\n })}\n formAction=\"none\"\n iconName={isMobile ? 'close' : 'angle-right'}\n onClick={() => onActiveDrawerChange(null, { initiatedByUserAction: true })}\n ref={drawersFocusControl.refs.close}\n variant=\"icon\"\n />\n </div>\n <div\n className={clsx(\n styles['drawer-content'],\n activeDrawerId !== TOOLS_DRAWER_ID && styles['drawer-content-hidden']\n )}\n style={{ blockSize: drawerHeight }}\n >\n {toolsContent}\n </div>\n {activeDrawerId !== TOOLS_DRAWER_ID && (\n <div className={styles['drawer-content']} style={{ blockSize: drawerHeight }}>\n {activeDrawer?.content}\n </div>\n )}\n </div>\n </aside>\n )}\n </Transition>\n );\n}\n\nexport const createWidgetizedAppLayoutDrawer = createWidgetizedComponent(AppLayoutDrawerImplementation);\n"]}
1	+ {"version":3,"file":"local-drawer.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/drawer/local-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 { Transition } from 'react-transition-group';\nimport clsx from 'clsx';\n\nimport { InternalButton } from '../../../button/internal';\nimport PanelResizeHandle from '../../../internal/components/panel-resize-handle';\nimport customCssProps from '../../../internal/generated/custom-css-properties';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { getLimitedValue } from '../../../split-panel/utils/size-utils';\nimport { TOOLS_DRAWER_ID } from '../../utils/use-drawers';\nimport { getDrawerStyles } from '../compute-layout';\nimport { AppLayoutInternals } from '../interfaces';\nimport { useResize } from './use-resize';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface AppLayoutDrawerImplementationProps {\n appLayoutInternals: AppLayoutInternals;\n}\n\nexport function AppLayoutDrawerImplementation({ appLayoutInternals }: AppLayoutDrawerImplementationProps) {\n const {\n activeDrawer,\n minDrawerSize,\n activeDrawerSize,\n maxDrawerSize,\n ariaLabels,\n drawers,\n drawersFocusControl,\n isMobile,\n placement,\n verticalOffsets,\n drawersOpenQueue,\n onActiveDrawerChange,\n onActiveDrawerResize,\n } = appLayoutInternals;\n const drawerRef = useRef<HTMLDivElement>(null);\n const activeDrawerId = activeDrawer?.id;\n\n const computedAriaLabels = {\n closeButton: activeDrawer ? activeDrawer.ariaLabels?.closeButton : ariaLabels?.toolsClose,\n content: activeDrawer ? activeDrawer.ariaLabels?.drawerName : ariaLabels?.tools,\n };\n\n const { drawerTopOffset, drawerHeight } = getDrawerStyles(verticalOffsets, isMobile, placement);\n const toolsOnlyMode = drawers.length === 1 && drawers[0].id === TOOLS_DRAWER_ID;\n const isToolsDrawer = activeDrawer?.id === TOOLS_DRAWER_ID \|\| toolsOnlyMode;\n const toolsContent = drawers?.find(drawer => drawer.id === TOOLS_DRAWER_ID)?.content;\n const resizeProps = useResize({\n currentWidth: activeDrawerSize,\n minWidth: minDrawerSize,\n maxWidth: maxDrawerSize,\n panelRef: drawerRef,\n handleRef: drawersFocusControl.refs.handle,\n onResize: size => onActiveDrawerResize({ id: activeDrawerId!, size }),\n });\n // temporary handle a situation when app-layout is old, but this component come as a widget\n const isLegacyDrawer = drawersOpenQueue === undefined;\n const size = getLimitedValue(minDrawerSize, activeDrawerSize, maxDrawerSize);\n const lastOpenedDrawerId = drawersOpenQueue?.length ? drawersOpenQueue[0] : activeDrawerId;\n const animationDisabled = activeDrawer?.defaultActive && !drawersOpenQueue.includes(activeDrawer.id);\n\n return (\n <Transition nodeRef={drawerRef} in={!!activeDrawer} appear={true} timeout={0}>\n {state => (\n <aside\n id={activeDrawerId}\n aria-hidden={!activeDrawer}\n aria-label={computedAriaLabels.content}\n className={clsx(styles.drawer, {\n [sharedStyles['with-motion-horizontal']]: !animationDisabled,\n [styles['last-opened']]: lastOpenedDrawerId === activeDrawerId,\n [styles.legacy]: isLegacyDrawer,\n [testutilStyles['active-drawer']]: !toolsOnlyMode && activeDrawerId,\n [testutilStyles.tools]: isToolsDrawer,\n [styles['drawer-hidden']]: !activeDrawer,\n [testutilStyles['drawer-closed']]: !activeDrawer,\n })}\n ref={drawerRef}\n onBlur={e => {\n if (!e.relatedTarget \|\| !e.currentTarget.contains(e.relatedTarget)) {\n drawersFocusControl.loseFocus();\n }\n }}\n style={{\n blockSize: drawerHeight,\n insetBlockStart: drawerTopOffset,\n ...(!isMobile &&\n !isLegacyDrawer && {\n [customCssProps.drawerSize]: `${['entering', 'entered'].includes(state) ? size : 0}px`,\n }),\n }}\n data-testid={activeDrawerId && `awsui-app-layout-drawer-${activeDrawerId}`}\n >\n {!isMobile && activeDrawer?.resizable && (\n <div className={styles['drawer-slider']}>\n <div ref={drawersFocusControl.refs.handle}>\n <PanelResizeHandle\n ref={drawersFocusControl.refs.slider}\n position=\"side\"\n className={testutilStyles['drawers-slider']}\n ariaLabel={activeDrawer?.ariaLabels?.resizeHandle}\n ariaValuenow={resizeProps.relativeSize}\n onKeyDown={resizeProps.onKeyDown}\n onPointerDown={resizeProps.onPointerDown}\n />\n </div>\n </div>\n )}\n <div className={clsx(styles['drawer-content-container'], sharedStyles['with-motion-horizontal'])}>\n <div className={clsx(styles['drawer-close-button'])}>\n <InternalButton\n ariaLabel={computedAriaLabels.closeButton}\n className={clsx({\n [testutilStyles['active-drawer-close-button']]: !isToolsDrawer && activeDrawerId,\n [testutilStyles['tools-close']]: isToolsDrawer,\n })}\n formAction=\"none\"\n iconName={isMobile ? 'close' : 'angle-right'}\n onClick={() => onActiveDrawerChange(null, { initiatedByUserAction: true })}\n ref={drawersFocusControl.refs.close}\n variant=\"icon\"\n />\n </div>\n <div\n className={clsx(\n styles['drawer-content'],\n activeDrawerId !== TOOLS_DRAWER_ID && styles['drawer-content-hidden']\n )}\n style={{ blockSize: drawerHeight }}\n >\n {toolsContent}\n </div>\n {activeDrawerId !== TOOLS_DRAWER_ID && (\n <div className={styles['drawer-content']} style={{ blockSize: drawerHeight }}>\n {activeDrawer?.content}\n </div>\n )}\n </div>\n </aside>\n )}\n </Transition>\n );\n}\n\nexport const createWidgetizedAppLayoutDrawer = createWidgetizedComponent(AppLayoutDrawerImplementation);\n"]}

package/lib/internal/template/attribute-editor/interfaces.d.ts CHANGED Viewed

@@ -19,6 +19,7 @@ export declare namespace AttributeEditorProps {
         warningText?: FieldRenderable<T> | React.ReactNode;
         constraintText?: FieldRenderable<T> | React.ReactNode;
     }
+    type AddButtonVariant = 'normal' | 'inline-link';
     interface RemoveButtonClickDetail {
         itemIndex: number;
     }
@@ -79,6 +80,12 @@ export interface AttributeEditorProps<T> extends BaseComponentProps {
      * Determines whether the add button is disabled.
      */
     disableAddButton?: boolean;
+    /**
+     * Specifies the variant to use for the add button. By default a normal button is used.
+     * Use `inline-link` when using an attribute editor nested inside complex attribute editing
+     * with expandable sections.
+     */
+    addButtonVariant?: AttributeEditorProps.AddButtonVariant;
     /**
      * Defines the editor configuration. Each object in the array represents one form field in the row.
      *

package/lib/internal/template/attribute-editor/interfaces.d.ts.map CHANGED Viewed

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