npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.655 → 3.0.656 - Mend

@cloudscape-design/components-themeable 3.0.655 → 3.0.656

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 (138) hide show

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

@@ -100,87 +100,97 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_toggle_1uo6m_1vv8s_103:not(#\9) {
+.awsui_toggle_1uo6m_oaqxz_103:not(#\9) {
   box-sizing: border-box;
   padding-block: var(--space-xxs-9rrxti, 4px);
   padding-inline: 7px;
 }
-.awsui_drawer-triggers_1uo6m_1vv8s_109:not(#\9) {
+.awsui_drawer-triggers_1uo6m_oaqxz_109:not(#\9) {
   box-sizing: border-box;
 }
-.awsui_drawer_1uo6m_1vv8s_109:not(#\9) {
+.awsui_drawer_1uo6m_oaqxz_109:not(#\9) {
   flex-shrink: 0;
   position: relative;
   word-wrap: break-word;
   box-shadow: var(--shadow-panel-eyw753, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15));
 }
-.awsui_drawer_1uo6m_1vv8s_109:not(#\9):not(.awsui_drawer-mobile_1uo6m_1vv8s_119) {
+.awsui_drawer_1uo6m_oaqxz_109:not(#\9):not(.awsui_drawer-mobile_1uo6m_oaqxz_119) {
   z-index: 830;
 }
-.awsui_drawer-closed_1uo6m_1vv8s_122:not(#\9) {
+.awsui_drawer-closed_1uo6m_oaqxz_122:not(#\9) {
   min-inline-size: 40px;
 }
-.awsui_drawer-closed_1uo6m_1vv8s_122.awsui_drawer-mobile_1uo6m_1vv8s_119:not(#\9) {
+.awsui_drawer-closed_1uo6m_oaqxz_122.awsui_drawer-mobile_1uo6m_oaqxz_119:not(#\9) {
   display: none;
 }
-.awsui_drawer-content_1uo6m_1vv8s_129:not(#\9) {
+.awsui_drawer-content_1uo6m_oaqxz_129:not(#\9) {
   position: fixed;
   overflow: auto;
   background-color: var(--color-background-layout-panel-content-ml98gw, #ffffff);
 }
-.awsui_drawer-mobile_1uo6m_1vv8s_119 > .awsui_drawer-content_1uo6m_1vv8s_129:not(#\9) {
+.awsui_drawer-mobile_1uo6m_oaqxz_119 > .awsui_drawer-content_1uo6m_oaqxz_129:not(#\9) {
   z-index: 1001;
   inset: 0;
 }
-.awsui_drawer-closed_1uo6m_1vv8s_122 > .awsui_drawer-content_1uo6m_1vv8s_129:not(#\9) {
+.awsui_drawer-closed_1uo6m_oaqxz_122 > .awsui_drawer-content_1uo6m_oaqxz_129:not(#\9) {
   inline-size: 40px;
 }
-.awsui_drawer-closed_1uo6m_1vv8s_122 > .awsui_drawer-content_1uo6m_1vv8s_129.awsui_drawer-content-clickable_1uo6m_1vv8s_141:not(#\9) {
+.awsui_drawer-closed_1uo6m_oaqxz_122 > .awsui_drawer-content_1uo6m_oaqxz_129.awsui_drawer-content-clickable_1uo6m_oaqxz_141:not(#\9) {
   cursor: pointer;
   color: var(--color-text-interactive-default-dt26aj, #545b64);
 }
-.awsui_drawer-closed_1uo6m_1vv8s_122 > .awsui_drawer-content_1uo6m_1vv8s_129.awsui_drawer-content-clickable_1uo6m_1vv8s_141:not(#\9):hover {
+.awsui_drawer-closed_1uo6m_oaqxz_122 > .awsui_drawer-content_1uo6m_oaqxz_129.awsui_drawer-content-clickable_1uo6m_oaqxz_141:not(#\9):hover {
   background: var(--color-background-layout-panel-hover-58t7r5, #eaeded);
 }
-.awsui_drawer-content_1uo6m_1vv8s_129 > [aria-hidden=true]:not(#\9) {
+.awsui_drawer-content_1uo6m_oaqxz_129 > [aria-hidden=true]:not(#\9) {
   display: none;
 }
-.awsui_drawer-content_1uo6m_1vv8s_129 > .awsui_drawer-resize-content_1uo6m_1vv8s_151:not(#\9) {
+.awsui_drawer-content_1uo6m_oaqxz_129 > .awsui_drawer-resize-content_1uo6m_oaqxz_151:not(#\9) {
   overflow: auto;
   block-size: 100%;
   position: relative;
 }
-.awsui_drawer-triggers-wrapper_1uo6m_1vv8s_157:not(#\9) {
+.awsui_drawer-triggers-wrapper_1uo6m_oaqxz_157:not(#\9) {
   display: flex;
   flex-direction: column;
   text-align: center;
   align-items: stretch;
 }
-.awsui_drawer-trigger_1uo6m_1vv8s_109:not(#\9) {
+.awsui_drawer-trigger_1uo6m_oaqxz_109:not(#\9) {
   padding-block: var(--space-xxs-9rrxti, 4px);
   padding-inline: 7px;
   cursor: pointer;
   color: var(--color-text-interactive-default-dt26aj, #545b64);
 }
-.awsui_drawer-trigger_1uo6m_1vv8s_109:not(#\9):not(:first-child) {
+.awsui_drawer-trigger_1uo6m_oaqxz_109:not(#\9):not(:first-child) {
   border-block-start: 1px solid var(--color-border-layout-py7xy0, #d5dbdb);
 }
-.awsui_drawer-trigger_1uo6m_1vv8s_109:not(#\9):hover {
+.awsui_drawer-trigger_1uo6m_oaqxz_109:not(#\9):hover {
   color: var(--color-text-layout-toggle-hover-j81kcb, #0073bb);
 }
-.awsui_drawer-trigger-active_1uo6m_1vv8s_176:not(#\9), .awsui_drawer-trigger-active_1uo6m_1vv8s_176:not(#\9):hover {
+.awsui_drawer-trigger-active_1uo6m_oaqxz_176:not(#\9), .awsui_drawer-trigger-active_1uo6m_oaqxz_176:not(#\9):hover {
   background-color: var(--color-background-layout-toggle-selected-default-rmibh3, #0073bb);
   color: var(--color-text-layout-toggle-active-zmvv31, #ffffff);
 }
-.awsui_drawer-content-clickable_1uo6m_1vv8s_141 > .awsui_drawer-triggers-wrapper_1uo6m_1vv8s_157 > .awsui_drawer-trigger_1uo6m_1vv8s_109:not(#\9):hover {
+.awsui_drawer-content-clickable_1uo6m_oaqxz_141 > .awsui_drawer-triggers-wrapper_1uo6m_oaqxz_157 > .awsui_drawer-trigger_1uo6m_oaqxz_109:not(#\9):hover {
   color: var(--color-text-interactive-default-dt26aj, #545b64);
 }
-.awsui_hide_1uo6m_1vv8s_184:not(#\9) {
+.awsui_resize-handle-wrapper_1uo6m_oaqxz_184:not(#\9) {
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-start: 0;
+  block-size: 100%;
+  display: flex;
+  align-items: center;
+  z-index: 1;
+}
+.awsui_hide_1uo6m_oaqxz_194:not(#\9) {
   display: none;
 }

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

@@ -2,17 +2,18 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "toggle": "awsui_toggle_1uo6m_1vv8s_103",
-  "drawer-triggers": "awsui_drawer-triggers_1uo6m_1vv8s_109",
-  "drawer": "awsui_drawer_1uo6m_1vv8s_109",
-  "drawer-mobile": "awsui_drawer-mobile_1uo6m_1vv8s_119",
-  "drawer-closed": "awsui_drawer-closed_1uo6m_1vv8s_122",
-  "drawer-content": "awsui_drawer-content_1uo6m_1vv8s_129",
-  "drawer-content-clickable": "awsui_drawer-content-clickable_1uo6m_1vv8s_141",
-  "drawer-resize-content": "awsui_drawer-resize-content_1uo6m_1vv8s_151",
-  "drawer-triggers-wrapper": "awsui_drawer-triggers-wrapper_1uo6m_1vv8s_157",
-  "drawer-trigger": "awsui_drawer-trigger_1uo6m_1vv8s_109",
-  "drawer-trigger-active": "awsui_drawer-trigger-active_1uo6m_1vv8s_176",
-  "hide": "awsui_hide_1uo6m_1vv8s_184"
+  "toggle": "awsui_toggle_1uo6m_oaqxz_103",
+  "drawer-triggers": "awsui_drawer-triggers_1uo6m_oaqxz_109",
+  "drawer": "awsui_drawer_1uo6m_oaqxz_109",
+  "drawer-mobile": "awsui_drawer-mobile_1uo6m_oaqxz_119",
+  "drawer-closed": "awsui_drawer-closed_1uo6m_oaqxz_122",
+  "drawer-content": "awsui_drawer-content_1uo6m_oaqxz_129",
+  "drawer-content-clickable": "awsui_drawer-content-clickable_1uo6m_oaqxz_141",
+  "drawer-resize-content": "awsui_drawer-resize-content_1uo6m_oaqxz_151",
+  "drawer-triggers-wrapper": "awsui_drawer-triggers-wrapper_1uo6m_oaqxz_157",
+  "drawer-trigger": "awsui_drawer-trigger_1uo6m_oaqxz_109",
+  "drawer-trigger-active": "awsui_drawer-trigger-active_1uo6m_oaqxz_176",
+  "resize-handle-wrapper": "awsui_resize-handle-wrapper_1uo6m_oaqxz_184",
+  "hide": "awsui_hide_1uo6m_oaqxz_194"
 };

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;~~AAQnD~~,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;~~AAK~~/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAGvD,MAAM,WAAW,iBAAiB;IAChC,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;;;~~EAuDrB~~;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;AAMnD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAG/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAGvD,MAAM,WAAW,iBAAiB;IAChC,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;;;EAkDrB;AAED,eAAe,SAAS,CAAC"}

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

@@ -1,14 +1,11 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useState, useEffect } from 'react';
-import clsx from 'clsx';
-import ResizeHandler from '../../split-panel/icons/resize-handler';
+import PanelResizeHandle from '../../internal/components/panel-resize-handle';
 import { getLimitedValue } from '../../split-panel/utils/size-utils';
 import { usePointerEvents } from './use-pointer-events';
 import { useKeyboardEvents } from './use-keyboard-events';
-import splitPanelStyles from '../../split-panel/styles.css.js';
 import testutilStyles from '../test-classes/styles.css.js';
-import styles from '../visual-refresh/styles.css.js';
 function useResize(drawerRefObject, { activeDrawer, activeDrawerSize, onActiveDrawerResize, drawersRefs, isToolsOpen, drawersMinWidth, drawersMaxWidth, }) {
     var _a;
     const [relativeSize, setRelativeSize] = useState(0);
@@ -39,9 +36,8 @@ function useResize(drawerRefObject, { activeDrawer, activeDrawerSize, onActiveDr
     };
     const onSliderPointerDown = usePointerEvents(sizeControlProps);
     const onKeyDown = useKeyboardEvents(sizeControlProps);
-    const resizeHandle = (React.createElement("div", { ref: drawersRefs.slider, role: "slider", tabIndex: 0, "aria-label": (_a = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _a === void 0 ? void 0 : _a.resizeHandle, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": relativeSize, className: clsx(splitPanelStyles.slider, splitPanelStyles[`slider-side`], testutilStyles['drawers-slider']), onKeyDown: onKeyDown, onPointerDown: onSliderPointerDown },
-        React.createElement(ResizeHandler, { className: clsx(splitPanelStyles['slider-icon'], splitPanelStyles[`slider-icon-side`]) })));
-    return { resizeHandle: React.createElement("div", { className: styles['drawer-slider'] }, resizeHandle), drawerSize };
+    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 }));
+    return { resizeHandle, drawerSize };
 }
 export default useResize;
 //# sourceMappingURL=use-resize.js.map

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,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,~~IAAI~~,MAAM,~~MAAM,~~CAAC;~~AAExB~~,OAAO,~~aAAa,MAAM,wCAAwC,CAAC;AACnE,OAAO,~~EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAG1D,OAAO,~~gBAAgB,MAAM,iCAAiC,CAAC;AAC/D,OAAO,~~cAAc,MAAM,+BAA+B,CAAC;~~AAC3D~~,~~OAAO,MAAM,MAAM,iCAAiC,CAAC;AAcrD,~~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;QAC3B,cAAc,EAAE,IAAI;KACrB,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,~~6BACE~~,GAAG,EAAE,WAAW,CAAC,MAAM,EACvB,~~IAAI~~,EAAC,~~QAAQ~~,~~EACb~~,~~QAAQ~~,EAAE,~~CAAC,gBACC,~~MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,UAAU,0CAAE,YAAY,~~mBACnC~~,~~GAAG~~,~~mBACH~~,~~CAAC,mBACD,~~YAAY,~~EAC3B~~,SAAS,EAAE,~~IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,gBAAgB,CAAC,aAAa,CAAC,EAAE,~~cAAc,CAAC,gBAAgB,CAAC,~~CAAC~~,~~EAC3G,~~SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,mBAAmB~~;QAElC~~,~~oBAAC~~,~~aAAa~~,~~IAAC,SAAS,EAAE,IAAI,~~CAAC~~,gBAAgB,CAAC,aAAa,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,GAAI,CACrG,CACP,CAAC~~;IAEF,OAAO,EAAE,YAAY,EAAE,~~6BAAK,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,IAAG,YAAY,CAAO,EAAE,~~UAAU,EAAE,CAAC;~~AACrG~~,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, { useState, useEffect } from 'react';\n\nimport ~~clsx~~ from '~~clsx';\n\nimport ResizeHandler from '~~../../~~split-panel~~/~~icons~~/resize-~~handler~~';\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { usePointerEvents } from './use-pointer-events';\nimport { useKeyboardEvents } from './use-keyboard-events';\nimport { AppLayoutProps } from '../interfaces';\n\nimport ~~splitPanelStyles from '../../split-panel/styles.css.js';\nimport~~ testutilStyles from '../test-classes/styles.css.js';\nimport ~~styles from '../visual-refresh/styles.css.js';\nimport~~ { FocusControlRefs } from './use-focus-control';\nimport { SizeControlProps } from './interfaces';\n\nexport interface 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 hasTransitions: true,\n };\n\n const onSliderPointerDown = usePointerEvents(sizeControlProps);\n const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n const resizeHandle = (\n <~~div~~\n ref={drawersRefs.slider}\n ~~role~~=\"~~slider~~\"\n ~~tabIndex~~={~~0}\n aria-label={~~activeDrawer?.ariaLabels?.resizeHandle}\n ~~aria-valuemax~~={~~100}\n aria-valuemin={0}\n aria-valuenow={~~relativeSize}\n className={~~clsx(splitPanelStyles.slider, splitPanelStyles[`slider-side`],~~ testutilStyles['drawers-slider'])}\n onKeyDown={onKeyDown}\n onPointerDown={onSliderPointerDown}\n ~~>\n <ResizeHandler className={clsx(splitPanelStyles['slider-icon'], splitPanelStyles[`slider-icon-side`])}~~ />\n ~~</div>\n~~ );\n\n return { resizeHandle: ~~<div className={styles['drawer-slider']}>{resizeHandle}</div>,~~ 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,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,iBAAiB,MAAM,+CAA+C,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAG1D,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAc3D,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;QAC3B,cAAc,EAAE,IAAI;KACrB,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, { useState, useEffect } from 'react';\n\nimport PanelResizeHandle from '../../internal/components/panel-resize-handle';\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { usePointerEvents } from './use-pointer-events';\nimport { useKeyboardEvents } from './use-keyboard-events';\nimport { AppLayoutProps } from '../interfaces';\n\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { FocusControlRefs } from './use-focus-control';\nimport { SizeControlProps } from './interfaces';\n\nexport interface 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 hasTransitions: true,\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"]}

package/lib/internal/template/app-layout/visual-refresh/drawers.js CHANGED Viewed

@@ -59,7 +59,7 @@ function ActiveDrawer() {
                 loseDrawersFocus();
             }
         } },
-        !isMobile && (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.resizable) && resizeHandle,
+        !isMobile && (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.resizable) && React.createElement("div", { className: styles['drawer-slider'] }, resizeHandle),
         React.createElement("div", { className: styles['drawer-content-container'] },
             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/drawers.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"drawers.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/drawers.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';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport { InternalButton } from '../../button/internal';\nimport SplitPanel from './split-panel';\nimport TriggerButton from './trigger-button';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport splitPanelTestUtilStyles from '../../split-panel/test-classes/styles.css.js';\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport OverflowMenu from '../drawer/overflow-menu';\nimport { splitItems } from '../drawer/drawers-helpers';\nimport { TOOLS_DRAWER_ID } from '../utils/use-drawers';\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\n\n/*\n The Drawers root component is mounted in the AppLayout index file. It will only\n * render if the drawers are defined, and it will take over the mounting of and\n * rendering of the Tools and SplitPanel (side position) if they exist. If drawers\n * do not exist then the Tools and SplitPanel will be handled by the Tools component.\n /\nexport default function Drawers() {\n const {\n disableBodyScroll,\n drawers,\n drawersTriggerCount,\n hasDrawerViewportOverlay,\n hasOpenDrawer,\n navigationOpen,\n navigationHide,\n isMobile,\n } = useAppLayoutInternals();\n\n const isUnfocusable = hasDrawerViewportOverlay && navigationOpen && !navigationHide;\n\n if (!drawers \|\| drawersTriggerCount === 0) {\n return null;\n }\n\n return (\n <div\n className={clsx(styles['drawers-container'], {\n [styles['disable-body-scroll']]: disableBodyScroll,\n [styles['has-open-drawer']]: hasOpenDrawer,\n [styles.unfocusable]: isUnfocusable,\n })}\n >\n <SplitPanel.Side />\n <ActiveDrawer />\n {!isMobile && <DesktopTriggers />}\n </div>\n );\n}\n\nfunction ActiveDrawer() {\n const {\n activeDrawerId,\n ariaLabels,\n drawers,\n drawersRefs,\n handleDrawersClick,\n handleToolsClick,\n hasDrawerViewportOverlay,\n isMobile,\n navigationOpen,\n navigationHide,\n loseDrawersFocus,\n resizeHandle,\n drawerSize,\n drawersMinWidth,\n drawersMaxWidth,\n drawerRef,\n } = useAppLayoutInternals();\n\n const activeDrawer = drawers?.find(item => item.id === activeDrawerId) ?? null;\n\n const computedAriaLabels = {\n closeButton: activeDrawerId ? activeDrawer?.ariaLabels?.closeButton : ariaLabels?.toolsClose,\n content: activeDrawerId ? activeDrawer?.ariaLabels?.drawerName : ariaLabels?.tools,\n };\n\n const isHidden = !activeDrawerId;\n const isUnfocusable = isHidden \|\| (hasDrawerViewportOverlay && navigationOpen && !navigationHide);\n const isToolsDrawer = activeDrawerId === TOOLS_DRAWER_ID;\n const toolsContent = drawers?.find(drawer => drawer.id === TOOLS_DRAWER_ID)?.content;\n\n const size = getLimitedValue(drawersMinWidth, drawerSize, drawersMaxWidth);\n\n return (\n <aside\n id={activeDrawerId ?? undefined}\n aria-hidden={isHidden}\n aria-label={computedAriaLabels.content}\n className={clsx(styles.drawer, {\n [styles['is-drawer-open']]: activeDrawerId,\n [styles.unfocusable]: isUnfocusable,\n [testutilStyles['active-drawer']]: activeDrawerId,\n [testutilStyles.tools]: isToolsDrawer,\n })}\n style={{\n ...(!isMobile && drawerSize && { [customCssProps.drawerSize]: `${size}px` }),\n }}\n ref={drawerRef}\n onBlur={e => {\n if (!e.relatedTarget \|\| !e.currentTarget.contains(e.relatedTarget)) {\n loseDrawersFocus();\n }\n }}\n >\n {!isMobile && activeDrawer?.resizable && resizeHandle}\n <div className={styles['drawer-content-container']}>\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 [testutilStyles['tools-close']]: isToolsDrawer,\n })}\n formAction=\"none\"\n iconName={isMobile ? 'close' : 'angle-right'}\n onClick={() => {\n handleDrawersClick(activeDrawerId);\n handleToolsClick(false);\n }}\n ref={drawersRefs.close}\n variant=\"icon\"\n />\n </div>\n {toolsContent && (\n <div\n className={clsx(\n styles['drawer-content'],\n activeDrawerId !== TOOLS_DRAWER_ID && styles['drawer-content-hidden']\n )}\n >\n {toolsContent}\n </div>\n )}\n {activeDrawerId !== TOOLS_DRAWER_ID && (\n <div className={styles['drawer-content']}>{activeDrawerId && activeDrawer?.content}</div>\n )}\n </div>\n </aside>\n );\n}\n\n/\n The DesktopTriggers will render the trigger buttons for Tools, Drawers, and the\n * SplitPanel in non mobile viewports. Changes to the activeDrawerId need to be\n * tracked by the previousActiveDrawerId property in order to appropriately apply\n * the ref required to manage focus control.\n /\nfunction DesktopTriggers() {\n const {\n activeDrawerId,\n drawers,\n drawersAriaLabel,\n drawersOverflowAriaLabel,\n drawersOverflowWithBadgeAriaLabel,\n drawersRefs,\n drawersTriggerCount,\n handleDrawersClick,\n handleSplitPanelClick,\n hasOpenDrawer,\n isSplitPanelOpen,\n splitPanel,\n splitPanelControlId,\n splitPanelDisplayed,\n splitPanelPosition,\n splitPanelRefs,\n splitPanelToggle,\n splitPanelReportedHeaderHeight,\n splitPanelReportedSize,\n headerVariant,\n } = useAppLayoutInternals();\n\n const hasMultipleTriggers = drawersTriggerCount > 1;\n const hasSplitPanel = splitPanel && splitPanelDisplayed && splitPanelPosition === 'side';\n\n const previousActiveDrawerId = useRef(activeDrawerId);\n const [containerHeight, triggersContainerRef] = useContainerQuery(rect => rect.contentBoxHeight);\n\n if (activeDrawerId) {\n previousActiveDrawerId.current = activeDrawerId;\n }\n\n const splitPanelHeight =\n isSplitPanelOpen && splitPanelPosition === 'bottom' ? splitPanelReportedSize : splitPanelReportedHeaderHeight;\n\n const getIndexOfOverflowItem = () => {\n if (containerHeight) {\n const ITEM_HEIGHT = 48;\n const overflowSpot =\n activeDrawerId && isSplitPanelOpen\n ? (containerHeight - splitPanelReportedHeaderHeight) / 1.5\n : (containerHeight - splitPanelHeight) / 1.5;\n\n const index = Math.floor(overflowSpot / ITEM_HEIGHT);\n\n let splitPanelItem = 0;\n if (hasSplitPanel && splitPanelToggle.displayed) {\n splitPanelItem = 1;\n }\n return index - splitPanelItem;\n }\n\n return 0;\n };\n\n const { visibleItems, overflowItems } = splitItems(drawers ?? undefined, getIndexOfOverflowItem(), activeDrawerId);\n const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n\n return (\n <aside\n className={clsx(styles['drawers-desktop-triggers-container'], {\n [styles['has-multiple-triggers']]: hasMultipleTriggers,\n [styles['has-open-drawer']]: hasOpenDrawer,\n })}\n aria-label={drawersAriaLabel}\n ref={triggersContainerRef}\n role=\"region\"\n >\n <div\n className={clsx(styles['drawers-trigger-content'], {\n [styles['has-multiple-triggers']]: hasMultipleTriggers,\n [styles['has-open-drawer']]: hasOpenDrawer,\n })}\n role=\"toolbar\"\n aria-orientation=\"vertical\"\n >\n {visibleItems.map(item => {\n return (\n <TriggerButton\n ariaLabel={item.ariaLabels?.triggerButton}\n ariaExpanded={item.id === activeDrawerId}\n ariaControls={activeDrawerId === item.id ? item.id : undefined}\n className={clsx(\n styles['drawers-trigger'],\n testutilStyles['drawers-trigger'],\n item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']\n )}\n iconName={item.trigger.iconName}\n iconSvg={item.trigger.iconSvg}\n key={item.id}\n onClick={() => handleDrawersClick(item.id)}\n ref={item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined}\n selected={item.id === activeDrawerId}\n badge={item.badge}\n testId={`awsui-app-layout-trigger-${item.id}`}\n highContrastHeader={headerVariant === 'high-contrast'}\n />\n );\n })}\n\n {overflowItems.length > 0 && (\n <OverflowMenu\n items={overflowItems}\n ariaLabel={overflowMenuHasBadge ? drawersOverflowWithBadgeAriaLabel : drawersOverflowAriaLabel}\n customTriggerBuilder={({ onClick, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (\n <TriggerButton\n ref={triggerRef}\n ariaLabel={ariaLabel}\n ariaExpanded={ariaExpanded}\n badge={overflowMenuHasBadge}\n className={clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], testUtilsClass)}\n iconName=\"ellipsis\"\n onClick={onClick}\n highContrastHeader={headerVariant === 'high-contrast'}\n />\n )}\n onItemClick={({ detail }) => {\n handleDrawersClick(detail.id);\n }}\n />\n )}\n {hasSplitPanel && splitPanelToggle.displayed && (\n <TriggerButton\n ariaLabel={splitPanelToggle.ariaLabel}\n ariaControls={splitPanelControlId}\n ariaExpanded={!!isSplitPanelOpen}\n className={clsx(styles['drawers-trigger'], splitPanelTestUtilStyles['open-button'])}\n iconName=\"view-vertical\"\n onClick={() => handleSplitPanelClick()}\n selected={hasSplitPanel && isSplitPanelOpen}\n ref={splitPanelRefs.toggle}\n highContrastHeader={headerVariant === 'high-contrast'}\n />\n )}\n </div>\n </aside>\n );\n}\n\n/\n The MobileTriggers will be mounted inside of the AppBar component and\n * only rendered when Drawers are defined in mobile viewports. The same logic\n * will in the AppBar component will suppress the rendering of the legacy\n * trigger button for the Tools drawer.\n */\nexport function MobileTriggers() {\n const {\n activeDrawerId,\n drawers,\n drawersAriaLabel,\n drawersOverflowAriaLabel,\n drawersOverflowWithBadgeAriaLabel,\n drawersRefs,\n handleDrawersClick,\n hasDrawerViewportOverlay,\n } = useAppLayoutInternals();\n\n const previousActiveDrawerId = useRef(activeDrawerId);\n\n if (!drawers) {\n return null;\n }\n\n if (activeDrawerId) {\n previousActiveDrawerId.current = activeDrawerId;\n }\n\n const { visibleItems, overflowItems } = splitItems(drawers, 2, activeDrawerId);\n const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n\n return (\n <aside\n aria-hidden={hasDrawerViewportOverlay}\n className={clsx({\n [styles.unfocusable]: hasDrawerViewportOverlay,\n })}\n aria-label={drawersAriaLabel}\n role=\"region\"\n >\n <div className={clsx(styles['drawers-mobile-triggers-container'])} role=\"toolbar\" aria-orientation=\"horizontal\">\n {visibleItems.map(item => (\n <InternalButton\n ariaExpanded={item.id === activeDrawerId}\n ariaLabel={item.ariaLabels?.triggerButton}\n className={clsx(\n styles['drawers-trigger'],\n testutilStyles['drawers-trigger'],\n item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']\n )}\n disabled={hasDrawerViewportOverlay}\n ref={item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined}\n formAction=\"none\"\n iconName={item.trigger.iconName}\n iconSvg={item.trigger.iconSvg}\n badge={item.badge}\n key={item.id}\n onClick={() => handleDrawersClick(item.id)}\n variant=\"icon\"\n __nativeAttributes={{ 'aria-haspopup': true, 'data-testid': `awsui-app-layout-trigger-${item.id}` }}\n />\n ))}\n {overflowItems.length > 0 && (\n <OverflowMenu\n items={overflowItems}\n ariaLabel={overflowMenuHasBadge ? drawersOverflowWithBadgeAriaLabel : drawersOverflowAriaLabel}\n onItemClick={({ detail }) => handleDrawersClick(detail.id)}\n />\n )}\n </div>\n </aside>\n );\n}\n"]}
1	+ {"version":3,"file":"drawers.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/drawers.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';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport { InternalButton } from '../../button/internal';\nimport SplitPanel from './split-panel';\nimport TriggerButton from './trigger-button';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport splitPanelTestUtilStyles from '../../split-panel/test-classes/styles.css.js';\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport OverflowMenu from '../drawer/overflow-menu';\nimport { splitItems } from '../drawer/drawers-helpers';\nimport { TOOLS_DRAWER_ID } from '../utils/use-drawers';\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\n\n/*\n The Drawers root component is mounted in the AppLayout index file. It will only\n * render if the drawers are defined, and it will take over the mounting of and\n * rendering of the Tools and SplitPanel (side position) if they exist. If drawers\n * do not exist then the Tools and SplitPanel will be handled by the Tools component.\n /\nexport default function Drawers() {\n const {\n disableBodyScroll,\n drawers,\n drawersTriggerCount,\n hasDrawerViewportOverlay,\n hasOpenDrawer,\n navigationOpen,\n navigationHide,\n isMobile,\n } = useAppLayoutInternals();\n\n const isUnfocusable = hasDrawerViewportOverlay && navigationOpen && !navigationHide;\n\n if (!drawers \|\| drawersTriggerCount === 0) {\n return null;\n }\n\n return (\n <div\n className={clsx(styles['drawers-container'], {\n [styles['disable-body-scroll']]: disableBodyScroll,\n [styles['has-open-drawer']]: hasOpenDrawer,\n [styles.unfocusable]: isUnfocusable,\n })}\n >\n <SplitPanel.Side />\n <ActiveDrawer />\n {!isMobile && <DesktopTriggers />}\n </div>\n );\n}\n\nfunction ActiveDrawer() {\n const {\n activeDrawerId,\n ariaLabels,\n drawers,\n drawersRefs,\n handleDrawersClick,\n handleToolsClick,\n hasDrawerViewportOverlay,\n isMobile,\n navigationOpen,\n navigationHide,\n loseDrawersFocus,\n resizeHandle,\n drawerSize,\n drawersMinWidth,\n drawersMaxWidth,\n drawerRef,\n } = useAppLayoutInternals();\n\n const activeDrawer = drawers?.find(item => item.id === activeDrawerId) ?? null;\n\n const computedAriaLabels = {\n closeButton: activeDrawerId ? activeDrawer?.ariaLabels?.closeButton : ariaLabels?.toolsClose,\n content: activeDrawerId ? activeDrawer?.ariaLabels?.drawerName : ariaLabels?.tools,\n };\n\n const isHidden = !activeDrawerId;\n const isUnfocusable = isHidden \|\| (hasDrawerViewportOverlay && navigationOpen && !navigationHide);\n const isToolsDrawer = activeDrawerId === TOOLS_DRAWER_ID;\n const toolsContent = drawers?.find(drawer => drawer.id === TOOLS_DRAWER_ID)?.content;\n\n const size = getLimitedValue(drawersMinWidth, drawerSize, drawersMaxWidth);\n\n return (\n <aside\n id={activeDrawerId ?? undefined}\n aria-hidden={isHidden}\n aria-label={computedAriaLabels.content}\n className={clsx(styles.drawer, {\n [styles['is-drawer-open']]: activeDrawerId,\n [styles.unfocusable]: isUnfocusable,\n [testutilStyles['active-drawer']]: activeDrawerId,\n [testutilStyles.tools]: isToolsDrawer,\n })}\n style={{\n ...(!isMobile && drawerSize && { [customCssProps.drawerSize]: `${size}px` }),\n }}\n ref={drawerRef}\n onBlur={e => {\n if (!e.relatedTarget \|\| !e.currentTarget.contains(e.relatedTarget)) {\n loseDrawersFocus();\n }\n }}\n >\n {!isMobile && activeDrawer?.resizable && <div className={styles['drawer-slider']}>{resizeHandle}</div>}\n <div className={styles['drawer-content-container']}>\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 [testutilStyles['tools-close']]: isToolsDrawer,\n })}\n formAction=\"none\"\n iconName={isMobile ? 'close' : 'angle-right'}\n onClick={() => {\n handleDrawersClick(activeDrawerId);\n handleToolsClick(false);\n }}\n ref={drawersRefs.close}\n variant=\"icon\"\n />\n </div>\n {toolsContent && (\n <div\n className={clsx(\n styles['drawer-content'],\n activeDrawerId !== TOOLS_DRAWER_ID && styles['drawer-content-hidden']\n )}\n >\n {toolsContent}\n </div>\n )}\n {activeDrawerId !== TOOLS_DRAWER_ID && (\n <div className={styles['drawer-content']}>{activeDrawerId && activeDrawer?.content}</div>\n )}\n </div>\n </aside>\n );\n}\n\n/\n The DesktopTriggers will render the trigger buttons for Tools, Drawers, and the\n * SplitPanel in non mobile viewports. Changes to the activeDrawerId need to be\n * tracked by the previousActiveDrawerId property in order to appropriately apply\n * the ref required to manage focus control.\n /\nfunction DesktopTriggers() {\n const {\n activeDrawerId,\n drawers,\n drawersAriaLabel,\n drawersOverflowAriaLabel,\n drawersOverflowWithBadgeAriaLabel,\n drawersRefs,\n drawersTriggerCount,\n handleDrawersClick,\n handleSplitPanelClick,\n hasOpenDrawer,\n isSplitPanelOpen,\n splitPanel,\n splitPanelControlId,\n splitPanelDisplayed,\n splitPanelPosition,\n splitPanelRefs,\n splitPanelToggle,\n splitPanelReportedHeaderHeight,\n splitPanelReportedSize,\n headerVariant,\n } = useAppLayoutInternals();\n\n const hasMultipleTriggers = drawersTriggerCount > 1;\n const hasSplitPanel = splitPanel && splitPanelDisplayed && splitPanelPosition === 'side';\n\n const previousActiveDrawerId = useRef(activeDrawerId);\n const [containerHeight, triggersContainerRef] = useContainerQuery(rect => rect.contentBoxHeight);\n\n if (activeDrawerId) {\n previousActiveDrawerId.current = activeDrawerId;\n }\n\n const splitPanelHeight =\n isSplitPanelOpen && splitPanelPosition === 'bottom' ? splitPanelReportedSize : splitPanelReportedHeaderHeight;\n\n const getIndexOfOverflowItem = () => {\n if (containerHeight) {\n const ITEM_HEIGHT = 48;\n const overflowSpot =\n activeDrawerId && isSplitPanelOpen\n ? (containerHeight - splitPanelReportedHeaderHeight) / 1.5\n : (containerHeight - splitPanelHeight) / 1.5;\n\n const index = Math.floor(overflowSpot / ITEM_HEIGHT);\n\n let splitPanelItem = 0;\n if (hasSplitPanel && splitPanelToggle.displayed) {\n splitPanelItem = 1;\n }\n return index - splitPanelItem;\n }\n\n return 0;\n };\n\n const { visibleItems, overflowItems } = splitItems(drawers ?? undefined, getIndexOfOverflowItem(), activeDrawerId);\n const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n\n return (\n <aside\n className={clsx(styles['drawers-desktop-triggers-container'], {\n [styles['has-multiple-triggers']]: hasMultipleTriggers,\n [styles['has-open-drawer']]: hasOpenDrawer,\n })}\n aria-label={drawersAriaLabel}\n ref={triggersContainerRef}\n role=\"region\"\n >\n <div\n className={clsx(styles['drawers-trigger-content'], {\n [styles['has-multiple-triggers']]: hasMultipleTriggers,\n [styles['has-open-drawer']]: hasOpenDrawer,\n })}\n role=\"toolbar\"\n aria-orientation=\"vertical\"\n >\n {visibleItems.map(item => {\n return (\n <TriggerButton\n ariaLabel={item.ariaLabels?.triggerButton}\n ariaExpanded={item.id === activeDrawerId}\n ariaControls={activeDrawerId === item.id ? item.id : undefined}\n className={clsx(\n styles['drawers-trigger'],\n testutilStyles['drawers-trigger'],\n item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']\n )}\n iconName={item.trigger.iconName}\n iconSvg={item.trigger.iconSvg}\n key={item.id}\n onClick={() => handleDrawersClick(item.id)}\n ref={item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined}\n selected={item.id === activeDrawerId}\n badge={item.badge}\n testId={`awsui-app-layout-trigger-${item.id}`}\n highContrastHeader={headerVariant === 'high-contrast'}\n />\n );\n })}\n\n {overflowItems.length > 0 && (\n <OverflowMenu\n items={overflowItems}\n ariaLabel={overflowMenuHasBadge ? drawersOverflowWithBadgeAriaLabel : drawersOverflowAriaLabel}\n customTriggerBuilder={({ onClick, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (\n <TriggerButton\n ref={triggerRef}\n ariaLabel={ariaLabel}\n ariaExpanded={ariaExpanded}\n badge={overflowMenuHasBadge}\n className={clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], testUtilsClass)}\n iconName=\"ellipsis\"\n onClick={onClick}\n highContrastHeader={headerVariant === 'high-contrast'}\n />\n )}\n onItemClick={({ detail }) => {\n handleDrawersClick(detail.id);\n }}\n />\n )}\n {hasSplitPanel && splitPanelToggle.displayed && (\n <TriggerButton\n ariaLabel={splitPanelToggle.ariaLabel}\n ariaControls={splitPanelControlId}\n ariaExpanded={!!isSplitPanelOpen}\n className={clsx(styles['drawers-trigger'], splitPanelTestUtilStyles['open-button'])}\n iconName=\"view-vertical\"\n onClick={() => handleSplitPanelClick()}\n selected={hasSplitPanel && isSplitPanelOpen}\n ref={splitPanelRefs.toggle}\n highContrastHeader={headerVariant === 'high-contrast'}\n />\n )}\n </div>\n </aside>\n );\n}\n\n/\n The MobileTriggers will be mounted inside of the AppBar component and\n * only rendered when Drawers are defined in mobile viewports. The same logic\n * will in the AppBar component will suppress the rendering of the legacy\n * trigger button for the Tools drawer.\n */\nexport function MobileTriggers() {\n const {\n activeDrawerId,\n drawers,\n drawersAriaLabel,\n drawersOverflowAriaLabel,\n drawersOverflowWithBadgeAriaLabel,\n drawersRefs,\n handleDrawersClick,\n hasDrawerViewportOverlay,\n } = useAppLayoutInternals();\n\n const previousActiveDrawerId = useRef(activeDrawerId);\n\n if (!drawers) {\n return null;\n }\n\n if (activeDrawerId) {\n previousActiveDrawerId.current = activeDrawerId;\n }\n\n const { visibleItems, overflowItems } = splitItems(drawers, 2, activeDrawerId);\n const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n\n return (\n <aside\n aria-hidden={hasDrawerViewportOverlay}\n className={clsx({\n [styles.unfocusable]: hasDrawerViewportOverlay,\n })}\n aria-label={drawersAriaLabel}\n role=\"region\"\n >\n <div className={clsx(styles['drawers-mobile-triggers-container'])} role=\"toolbar\" aria-orientation=\"horizontal\">\n {visibleItems.map(item => (\n <InternalButton\n ariaExpanded={item.id === activeDrawerId}\n ariaLabel={item.ariaLabels?.triggerButton}\n className={clsx(\n styles['drawers-trigger'],\n testutilStyles['drawers-trigger'],\n item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']\n )}\n disabled={hasDrawerViewportOverlay}\n ref={item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined}\n formAction=\"none\"\n iconName={item.trigger.iconName}\n iconSvg={item.trigger.iconSvg}\n badge={item.badge}\n key={item.id}\n onClick={() => handleDrawersClick(item.id)}\n variant=\"icon\"\n __nativeAttributes={{ 'aria-haspopup': true, 'data-testid': `awsui-app-layout-trigger-${item.id}` }}\n />\n ))}\n {overflowItems.length > 0 && (\n <OverflowMenu\n items={overflowItems}\n ariaLabel={overflowMenuHasBadge ? drawersOverflowWithBadgeAriaLabel : drawersOverflowAriaLabel}\n onItemClick={({ detail }) => handleDrawersClick(detail.id)}\n />\n )}\n </div>\n </aside>\n );\n}\n"]}

package/lib/internal/template/app-layout/visual-refresh/split-panel.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"split-panel.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/split-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAI/C;;;GAGG;AACH,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,eA0CjE;kBA1CQ,UAAU;;;;AA4CnB;;;;;GAKG;AACH,iBAAS,gBAAgB,~~uBAuCxB~~;AAED;;;;;GAKG;AAEH;;GAEG;AAEH,iBAAS,cAAc,uBA+BtB;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,0BAA0B,EAAE,OAAO,EACnC,qBAAqB,EAAE,cAAc,CAAC,qBAAqB,GAAG,SAAS,qCASxE;AAID,eAAe,UAAU,CAAC"}
1	+ {"version":3,"file":"split-panel.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/split-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAI/C;;;GAGG;AACH,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,eA0CjE;kBA1CQ,UAAU;;;;AA4CnB;;;;;GAKG;AACH,iBAAS,gBAAgB,uBAsCxB;AAED;;;;;GAKG;AAEH;;GAEG;AAEH,iBAAS,cAAc,uBA+BtB;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,0BAA0B,EAAE,OAAO,EACnC,qBAAqB,EAAE,cAAc,CAAC,qBAAqB,GAAG,SAAS,qCASxE;AAID,eAAe,UAAU,CAAC"}

package/lib/internal/template/app-layout/visual-refresh/split-panel.js CHANGED Viewed

@@ -58,9 +58,7 @@ function SplitPanelBottom() {
         }), ref: transitionEventsRef, style: {
             [customCssProps.splitPanelReportedSize]: `${splitPanelReportedSize}px`,
             [customCssProps.splitPanelReportedHeaderSize]: `${splitPanelReportedHeaderHeight}px`,
-        } },
-        React.createElement(SplitPanel, null),
-        splitPanelPosition === 'bottom' && splitPanel))));
+        } }, splitPanelPosition === 'bottom' && splitPanel))));
 }
 /**
  * This is the render function for the SplitPanel when it is side position.

package/lib/internal/template/app-layout/visual-refresh/split-panel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"split-panel.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/split-panel.tsx"],"names":[],"mappings":"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~~;QAED~~,~~oBAAC~~,~~UAAU,OAAc;QACxB,~~kBAAkB,KAAK,QAAQ,IAAI,UAAU,CACtC,CACX,CACU,CACd,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AAEH;;GAEG;AAEH,SAAS,cAAc;IACrB,MAAM,EACJ,gBAAgB,EAChB,UAAU,EACV,kBAAkB,EAClB,kBAAkB,EAClB,mBAAmB,EACnB,WAAW,EACX,cAAc,GACf,GAAG,qBAAqB,EAAE,CAAC;IAE5B,IAAI,CAAC,UAAU,EAAE;QACf,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,iCACE,EAAE,EAAE,mBAAmB,iBACV,CAAC,gBAAgB,IAAI,kBAAkB,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EAChF,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC,YAAY,kBAAkB,EAAE,CAAC,EAAE;YACpF,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,gBAAgB;YACjD,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,cAAc,IAAI,WAAW;SAC7D,CAAC,EACF,KAAK,EAAE;YACL,CAAC,cAAc,CAAC,kBAAkB,CAAC,EAAE,GAAG,kBAAkB,IAAI;YAC9D,CAAC,cAAc,CAAC,kBAAkB,CAAC,EAAE,GAAG,qBAAqB,IAAI;SAClE,IAEA,kBAAkB,KAAK,MAAM,IAAI,UAAU,CACpC,CACX,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,qBAAqB,CACnC,0BAAmC,EACnC,qBAAuE;IAEvE,IAAI,kBAAkB,GAAsC,QAAQ,CAAC;IAErE,IAAI,CAAC,0BAA0B,IAAI,CAAA,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,QAAQ,MAAK,MAAM,EAAE;QAC7E,kBAAkB,GAAG,MAAM,CAAC;KAC7B;IAED,OAAO,kBAAkB,CAAC;AAC5B,CAAC;AACD,UAAU,CAAC,MAAM,GAAG,gBAAgB,CAAC;AACrC,UAAU,CAAC,IAAI,GAAG,cAAc,CAAC;AAEjC,eAAe,UAAU,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\nimport { SPLIT_PANEL_MIN_WIDTH, SplitPanelProvider, SplitPanelProviderProps } from '../split-panel';\nimport { AppLayoutProps } from '../interfaces';\nimport { Transition } from '../../internal/components/transition';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\n/*\n If there is no Split Panel in the AppLayout context then the SplitPanel\n * will pass through the AppLayout children without the context.\n /\nfunction SplitPanel({ children }: React.PropsWithChildren<unknown>) {\n const {\n footerHeight,\n handleSplitPanelClick,\n handleSplitPanelPreferencesChange,\n handleSplitPanelResize,\n headerHeight,\n isSplitPanelForcedPosition,\n isSplitPanelOpen,\n setSplitPanelReportedSize,\n setSplitPanelReportedHeaderHeight,\n setSplitPanelToggle,\n splitPanelPosition,\n splitPanelRefs,\n splitPanelSize,\n } = useAppLayoutInternals();\n\n const props: SplitPanelProviderProps = {\n bottomOffset: 0,\n getMaxHeight: () => {\n const availableHeight = document.documentElement.clientHeight - headerHeight - footerHeight;\n // If the page is likely zoomed in at 200%, allow the split panel to fill the content area.\n return availableHeight < 400 ? availableHeight - 40 : availableHeight - 250;\n },\n maxWidth: typeof document !== 'undefined' ? document.documentElement.clientWidth : Number.POSITIVE_INFINITY,\n isForcedPosition: isSplitPanelForcedPosition,\n isOpen: isSplitPanelOpen,\n leftOffset: 0,\n onPreferencesChange: handleSplitPanelPreferencesChange,\n onResize: handleSplitPanelResize,\n onToggle: handleSplitPanelClick,\n position: splitPanelPosition,\n reportSize: setSplitPanelReportedSize,\n reportHeaderHeight: setSplitPanelReportedHeaderHeight,\n rightOffset: 0,\n size: splitPanelSize \|\| 0,\n topOffset: 0,\n setSplitPanelToggle,\n refs: splitPanelRefs,\n };\n\n return <SplitPanelProvider {...props}>{children}</SplitPanelProvider>;\n}\n\n/\n This is the render function for the SplitPanel when it is in bottom position.\n * The Split Panel container will be another row entry in the grid definition in\n * the Layout component. The start and finish columns will be variable based\n * on the presence and state of the Navigation and Tools components.\n /\nfunction SplitPanelBottom() {\n const {\n disableBodyScroll,\n hasOpenDrawer,\n navigationOpen,\n isSplitPanelOpen,\n splitPanel,\n splitPanelPosition,\n splitPanelReportedSize,\n splitPanelReportedHeaderHeight,\n } = useAppLayoutInternals();\n\n if (!splitPanel) {\n return null;\n }\n\n return (\n <Transition in={isSplitPanelOpen ?? false} exit={false}>\n {(state, transitionEventsRef) => (\n <section\n className={clsx(styles['split-panel-bottom'], styles[`position-${splitPanelPosition}`], {\n [styles.animating]: state === 'entering',\n [styles['disable-body-scroll']]: disableBodyScroll,\n [styles['has-open-drawer']]: hasOpenDrawer,\n [styles['is-navigation-open']]: navigationOpen,\n [styles['is-split-panel-open']]: isSplitPanelOpen,\n })}\n ref={transitionEventsRef}\n style={{\n [customCssProps.splitPanelReportedSize]: `${splitPanelReportedSize}px`,\n [customCssProps.splitPanelReportedHeaderSize]: `${splitPanelReportedHeaderHeight}px`,\n }}\n >\n ~~<SplitPanel></SplitPanel>\n~~ {splitPanelPosition === 'bottom' && splitPanel}\n </section>\n )}\n </Transition>\n );\n}\n\n/\n This is the render function for the SplitPanel when it is side position.\n * The Split Panel will not be within the grid defined in the Layout component\n * but instead a direct child of the Tools component. The width constraints\n * for this position are computed in the Tools component.\n /\n\n/\n This component has no opening animations because it causes lots of rerenders that makes the component lag. \n /\n\nfunction SplitPanelSide() {\n const {\n isSplitPanelOpen,\n splitPanel,\n splitPanelPosition,\n splitPanelMaxWidth,\n splitPanelControlId,\n isToolsOpen,\n activeDrawerId,\n } = useAppLayoutInternals();\n\n if (!splitPanel) {\n return null;\n }\n\n return (\n <section\n id={splitPanelControlId}\n aria-hidden={!isSplitPanelOpen \|\| splitPanelPosition === 'bottom' ? true : false}\n className={clsx(styles['split-panel-side'], styles[`position-${splitPanelPosition}`], {\n [styles['is-split-panel-open']]: isSplitPanelOpen,\n [styles['has-open-drawer']]: !!activeDrawerId \|\| isToolsOpen,\n })}\n style={{\n [customCssProps.splitPanelMaxWidth]: `${splitPanelMaxWidth}px`,\n [customCssProps.splitPanelMinWidth]: `${SPLIT_PANEL_MIN_WIDTH}px`,\n }}\n >\n {splitPanelPosition === 'side' && splitPanel}\n </section>\n );\n}\n\n/*\n This logic will determine what the Split Panel position should be. It reconciles the possibility\n * of being in forced position with the current selected position in the settings.\n */\nexport function getSplitPanelPosition(\n isSplitPanelForcedPosition: boolean,\n splitPanelPreferences: AppLayoutProps.SplitPanelPreferences \| undefined\n) {\n let splitPanelPosition: AppLayoutProps.SplitPanelPosition = 'bottom';\n\n if (!isSplitPanelForcedPosition && splitPanelPreferences?.position === 'side') {\n splitPanelPosition = 'side';\n }\n\n return splitPanelPosition;\n}\nSplitPanel.Bottom = SplitPanelBottom;\nSplitPanel.Side = SplitPanelSide;\n\nexport default SplitPanel;\n"]}
1	+ {"version":3,"file":"split-panel.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/split-panel.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 from 'react';\nimport clsx from 'clsx';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\nimport { SPLIT_PANEL_MIN_WIDTH, SplitPanelProvider, SplitPanelProviderProps } from '../split-panel';\nimport { AppLayoutProps } from '../interfaces';\nimport { Transition } from '../../internal/components/transition';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\n/*\n If there is no Split Panel in the AppLayout context then the SplitPanel\n * will pass through the AppLayout children without the context.\n /\nfunction SplitPanel({ children }: React.PropsWithChildren<unknown>) {\n const {\n footerHeight,\n handleSplitPanelClick,\n handleSplitPanelPreferencesChange,\n handleSplitPanelResize,\n headerHeight,\n isSplitPanelForcedPosition,\n isSplitPanelOpen,\n setSplitPanelReportedSize,\n setSplitPanelReportedHeaderHeight,\n setSplitPanelToggle,\n splitPanelPosition,\n splitPanelRefs,\n splitPanelSize,\n } = useAppLayoutInternals();\n\n const props: SplitPanelProviderProps = {\n bottomOffset: 0,\n getMaxHeight: () => {\n const availableHeight = document.documentElement.clientHeight - headerHeight - footerHeight;\n // If the page is likely zoomed in at 200%, allow the split panel to fill the content area.\n return availableHeight < 400 ? availableHeight - 40 : availableHeight - 250;\n },\n maxWidth: typeof document !== 'undefined' ? document.documentElement.clientWidth : Number.POSITIVE_INFINITY,\n isForcedPosition: isSplitPanelForcedPosition,\n isOpen: isSplitPanelOpen,\n leftOffset: 0,\n onPreferencesChange: handleSplitPanelPreferencesChange,\n onResize: handleSplitPanelResize,\n onToggle: handleSplitPanelClick,\n position: splitPanelPosition,\n reportSize: setSplitPanelReportedSize,\n reportHeaderHeight: setSplitPanelReportedHeaderHeight,\n rightOffset: 0,\n size: splitPanelSize \|\| 0,\n topOffset: 0,\n setSplitPanelToggle,\n refs: splitPanelRefs,\n };\n\n return <SplitPanelProvider {...props}>{children}</SplitPanelProvider>;\n}\n\n/\n This is the render function for the SplitPanel when it is in bottom position.\n * The Split Panel container will be another row entry in the grid definition in\n * the Layout component. The start and finish columns will be variable based\n * on the presence and state of the Navigation and Tools components.\n /\nfunction SplitPanelBottom() {\n const {\n disableBodyScroll,\n hasOpenDrawer,\n navigationOpen,\n isSplitPanelOpen,\n splitPanel,\n splitPanelPosition,\n splitPanelReportedSize,\n splitPanelReportedHeaderHeight,\n } = useAppLayoutInternals();\n\n if (!splitPanel) {\n return null;\n }\n\n return (\n <Transition in={isSplitPanelOpen ?? false} exit={false}>\n {(state, transitionEventsRef) => (\n <section\n className={clsx(styles['split-panel-bottom'], styles[`position-${splitPanelPosition}`], {\n [styles.animating]: state === 'entering',\n [styles['disable-body-scroll']]: disableBodyScroll,\n [styles['has-open-drawer']]: hasOpenDrawer,\n [styles['is-navigation-open']]: navigationOpen,\n [styles['is-split-panel-open']]: isSplitPanelOpen,\n })}\n ref={transitionEventsRef}\n style={{\n [customCssProps.splitPanelReportedSize]: `${splitPanelReportedSize}px`,\n [customCssProps.splitPanelReportedHeaderSize]: `${splitPanelReportedHeaderHeight}px`,\n }}\n >\n {splitPanelPosition === 'bottom' && splitPanel}\n </section>\n )}\n </Transition>\n );\n}\n\n/\n This is the render function for the SplitPanel when it is side position.\n * The Split Panel will not be within the grid defined in the Layout component\n * but instead a direct child of the Tools component. The width constraints\n * for this position are computed in the Tools component.\n /\n\n/\n This component has no opening animations because it causes lots of rerenders that makes the component lag. \n /\n\nfunction SplitPanelSide() {\n const {\n isSplitPanelOpen,\n splitPanel,\n splitPanelPosition,\n splitPanelMaxWidth,\n splitPanelControlId,\n isToolsOpen,\n activeDrawerId,\n } = useAppLayoutInternals();\n\n if (!splitPanel) {\n return null;\n }\n\n return (\n <section\n id={splitPanelControlId}\n aria-hidden={!isSplitPanelOpen \|\| splitPanelPosition === 'bottom' ? true : false}\n className={clsx(styles['split-panel-side'], styles[`position-${splitPanelPosition}`], {\n [styles['is-split-panel-open']]: isSplitPanelOpen,\n [styles['has-open-drawer']]: !!activeDrawerId \|\| isToolsOpen,\n })}\n style={{\n [customCssProps.splitPanelMaxWidth]: `${splitPanelMaxWidth}px`,\n [customCssProps.splitPanelMinWidth]: `${SPLIT_PANEL_MIN_WIDTH}px`,\n }}\n >\n {splitPanelPosition === 'side' && splitPanel}\n </section>\n );\n}\n\n/*\n This logic will determine what the Split Panel position should be. It reconciles the possibility\n * of being in forced position with the current selected position in the settings.\n */\nexport function getSplitPanelPosition(\n isSplitPanelForcedPosition: boolean,\n splitPanelPreferences: AppLayoutProps.SplitPanelPreferences \| undefined\n) {\n let splitPanelPosition: AppLayoutProps.SplitPanelPosition = 'bottom';\n\n if (!isSplitPanelForcedPosition && splitPanelPreferences?.position === 'side') {\n splitPanelPosition = 'side';\n }\n\n return splitPanelPosition;\n}\nSplitPanel.Bottom = SplitPanelBottom;\nSplitPanel.Side = SplitPanelSide;\n\nexport default SplitPanel;\n"]}

package/lib/internal/template/autosuggest/plain-list.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"plain-list.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/plain-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAoB,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAKpF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAE7D,MAAM,WAAW,SAAS;IACxB,qBAAqB,EAAE,qBAAqB,CAAC;IAC7C,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;IAC9C,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;IAChE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,eAAO,MAAM,cAAc,UAClB,MAAM,QACP,eAAe,iBACN,SAAS,eAAe,EAAE,wBACnB,SAAS,CAAC,sBAAsB,CAAC,sBACnC,eAAe,sBACf,OAAO;;;;;CAS5B,CAAC;AAEF,QAAA,MAAM,SAAS,mJASZ,SAAS,~~gBAmDX~~,CAAC;AAEF,eAAe,SAAS,CAAC"}
1	+ {"version":3,"file":"plain-list.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/plain-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAoB,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAKpF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAE7D,MAAM,WAAW,SAAS;IACxB,qBAAqB,EAAE,qBAAqB,CAAC;IAC7C,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;IAC9C,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;IAChE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,eAAO,MAAM,cAAc,UAClB,MAAM,QACP,eAAe,iBACN,SAAS,eAAe,EAAE,wBACnB,SAAS,CAAC,sBAAsB,CAAC,sBACnC,eAAe,sBACf,OAAO;;;;;CAS5B,CAAC;AAEF,QAAA,MAAM,SAAS,mJASZ,SAAS,gBA4CX,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/internal/template/autosuggest/plain-list.js CHANGED Viewed

@@ -23,9 +23,7 @@ const PlainList = ({ autosuggestItemsState, handleLoadMore, menuProps, highlight
             scrollElementIntoView(item);
         }
     }, [autosuggestItemsState.highlightType, autosuggestItemsState.highlightedIndex]);
-    return (React.createElement(OptionsList, Object.assign({}, menuProps, { onLoadMore: handleLoadMore, open: true, ref: listRef,
-        // to prevent closing the list when clicking the scrollbar on IE11
-        nativeAttributes: { unselectable: 'on' } }),
+    return (React.createElement(OptionsList, Object.assign({}, menuProps, { onLoadMore: handleLoadMore, open: true, ref: listRef }),
         autosuggestItemsState.items.map((item, index) => {
             const optionProps = getOptionProps(index, item, autosuggestItemsState.items, highlightedA11yProps, autosuggestItemsState.highlightedOption, hasDropdownStatus);
             return (React.createElement(AutosuggestOption, Object.assign({ highlightText: highlightText, option: item, highlighted: item === autosuggestItemsState.highlightedOption, current: item.value === highlightText, key: index, "data-mouse-target": index, screenReaderContent: screenReaderContent, highlightType: autosuggestItemsState.highlightType }, optionProps)));

package/lib/internal/template/autosuggest/plain-list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"plain-list.js","sourceRoot":"","sources":["../../../src/autosuggest/plain-list.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,WAAiC,MAAM,qCAAqC,CAAC;AACpF,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AAErD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAcrC,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,KAAa,EACb,IAAqB,EACrB,aAAyC,EACzC,oBAAuD,EACvD,iBAAmC,EACnC,iBAA2B,EAC3B,EAAE;IACF,MAAM,gBAAgB,GAAG,IAAI,KAAK,iBAAiB,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;IAChF,MAAM,eAAe,GAAG,YAAY,CAAC,gBAAgB,CAAC,CAAC;IACvD,MAAM,UAAU,GAAG,KAAK,KAAK,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;IACtD,MAAM,oBAAoB,GAAG,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;IACtD,MAAM,SAAS,GAAG,CAAC,iBAAiB,IAAI,oBAAoB,IAAI,UAAU,CAAC;IAE3E,uBAAS,gBAAgB,EAAE,SAAS,IAAK,eAAe,EAAG;AAC7D,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,EACjB,qBAAqB,EACrB,cAAc,EACd,SAAS,EACT,oBAAoB,EACpB,iBAAiB,EACjB,aAAa,EACb,UAAU,EACV,mBAAmB,GACT,EAAE,EAAE;IACd,MAAM,OAAO,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC/C,SAAS,CAAC,GAAG,EAAE;;QACb,MAAM,IAAI,GAAG,MAAA,OAAO,CAAC,OAAO,0CAAE,aAAa,CACzC,uBAAuB,qBAAqB,CAAC,gBAAgB,IAAI,CAClE,CAAC;QACF,IAAI,qBAAqB,CAAC,aAAa,CAAC,SAAS,IAAI,IAAI,EAAE;YACzD,qBAAqB,CAAC,IAAI,CAAC,CAAC;SAC7B;IACH,CAAC,EAAE,CAAC,qBAAqB,CAAC,aAAa,EAAE,qBAAqB,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAElF,OAAO,CACL,oBAAC,WAAW,~~oBACN~~,SAAS,~~IACb~~,UAAU,EAAE,cAAc,~~EAC1B~~,IAAI,EAAE,IAAI,~~EACV~~,GAAG,EAAE,OAAO;~~QACZ~~,~~kEAAkE;QAClE,gBAAgB,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE;QAEvC,~~qBAAqB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC/C,MAAM,WAAW,GAAG,cAAc,CAChC,KAAK,EACL,IAAI,EACJ,qBAAqB,CAAC,KAAK,EAC3B,oBAAoB,EACpB,qBAAqB,CAAC,iBAAiB,EACvC,iBAAiB,CAClB,CAAC;YAEF,OAAO,CACL,oBAAC,iBAAiB,kBAChB,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,IAAI,EACZ,WAAW,EAAE,IAAI,KAAK,qBAAqB,CAAC,iBAAiB,EAC7D,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,aAAa,EACrC,GAAG,EAAE,KAAK,uBACS,KAAK,EACxB,mBAAmB,EAAE,mBAAmB,EACxC,aAAa,EAAE,qBAAqB,CAAC,aAAa,IAC9C,WAAW,EACf,CACH,CAAC;QACJ,CAAC,CAAC;QACD,UAAU,CAAC,CAAC,CAAC,CACZ,4BAAI,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,IAC/C,UAAU,CACR,CACN,CAAC,CAAC,CAAC,IAAI,CACI,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\n\nimport OptionsList, { OptionsListProps } from '../internal/components/options-list';\nimport { scrollElementIntoView } from '../internal/utils/scrollable-containers';\nimport { getBaseProps } from '../internal/base-component';\n\nimport AutosuggestOption from './autosuggest-option';\nimport { AutosuggestItem } from './interfaces';\nimport styles from './styles.css.js';\nimport { AutosuggestItemsState } from './options-controller';\n\nexport interface ListProps {\n autosuggestItemsState: AutosuggestItemsState;\n menuProps: Omit<OptionsListProps, 'children'>;\n handleLoadMore: () => void;\n highlightedA11yProps: Record<string, string \| number \| boolean>;\n hasDropdownStatus?: boolean;\n highlightText: string;\n listBottom?: React.ReactNode;\n screenReaderContent?: string;\n}\n\nexport const getOptionProps = (\n index: number,\n item: AutosuggestItem,\n filteredItems: readonly AutosuggestItem[],\n highlightedA11yProps: ListProps['highlightedA11yProps'],\n highlightedOption?: AutosuggestItem,\n hasDropdownStatus?: boolean\n) => {\n const nativeAttributes = item === highlightedOption ? highlightedA11yProps : {};\n const baseOptionProps = getBaseProps(nativeAttributes);\n const isLastItem = index === filteredItems.length - 1;\n const isNotEnteredTextItem = filteredItems.length > 1;\n const padBottom = !hasDropdownStatus && isNotEnteredTextItem && isLastItem;\n\n return { nativeAttributes, padBottom, ...baseOptionProps };\n};\n\nconst PlainList = ({\n autosuggestItemsState,\n handleLoadMore,\n menuProps,\n highlightedA11yProps,\n hasDropdownStatus,\n highlightText,\n listBottom,\n screenReaderContent,\n}: ListProps) => {\n const listRef = useRef<HTMLUListElement>(null);\n useEffect(() => {\n const item = listRef.current?.querySelector<HTMLElement>(\n `[data-mouse-target=\"${autosuggestItemsState.highlightedIndex}\"]`\n );\n if (autosuggestItemsState.highlightType.moveFocus && item) {\n scrollElementIntoView(item);\n }\n }, [autosuggestItemsState.highlightType, autosuggestItemsState.highlightedIndex]);\n\n return (\n <OptionsList\n {...menuProps}\n onLoadMore={handleLoadMore}\n open={true}\n ref={listRef}~~\n // to prevent closing the list when clicking the scrollbar on IE11\n nativeAttributes={{ unselectable: 'on' }}\n~~ >\n {autosuggestItemsState.items.map((item, index) => {\n const optionProps = getOptionProps(\n index,\n item,\n autosuggestItemsState.items,\n highlightedA11yProps,\n autosuggestItemsState.highlightedOption,\n hasDropdownStatus\n );\n\n return (\n <AutosuggestOption\n highlightText={highlightText}\n option={item}\n highlighted={item === autosuggestItemsState.highlightedOption}\n current={item.value === highlightText}\n key={index}\n data-mouse-target={index}\n screenReaderContent={screenReaderContent}\n highlightType={autosuggestItemsState.highlightType}\n {...optionProps}\n />\n );\n })}\n {listBottom ? (\n <li role=\"option\" className={styles['list-bottom']}>\n {listBottom}\n </li>\n ) : null}\n </OptionsList>\n );\n};\n\nexport default PlainList;\n"]}
1	+ {"version":3,"file":"plain-list.js","sourceRoot":"","sources":["../../../src/autosuggest/plain-list.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,WAAiC,MAAM,qCAAqC,CAAC;AACpF,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AAErD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAcrC,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,KAAa,EACb,IAAqB,EACrB,aAAyC,EACzC,oBAAuD,EACvD,iBAAmC,EACnC,iBAA2B,EAC3B,EAAE;IACF,MAAM,gBAAgB,GAAG,IAAI,KAAK,iBAAiB,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;IAChF,MAAM,eAAe,GAAG,YAAY,CAAC,gBAAgB,CAAC,CAAC;IACvD,MAAM,UAAU,GAAG,KAAK,KAAK,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;IACtD,MAAM,oBAAoB,GAAG,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;IACtD,MAAM,SAAS,GAAG,CAAC,iBAAiB,IAAI,oBAAoB,IAAI,UAAU,CAAC;IAE3E,uBAAS,gBAAgB,EAAE,SAAS,IAAK,eAAe,EAAG;AAC7D,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,EACjB,qBAAqB,EACrB,cAAc,EACd,SAAS,EACT,oBAAoB,EACpB,iBAAiB,EACjB,aAAa,EACb,UAAU,EACV,mBAAmB,GACT,EAAE,EAAE;IACd,MAAM,OAAO,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC/C,SAAS,CAAC,GAAG,EAAE;;QACb,MAAM,IAAI,GAAG,MAAA,OAAO,CAAC,OAAO,0CAAE,aAAa,CACzC,uBAAuB,qBAAqB,CAAC,gBAAgB,IAAI,CAClE,CAAC;QACF,IAAI,qBAAqB,CAAC,aAAa,CAAC,SAAS,IAAI,IAAI,EAAE;YACzD,qBAAqB,CAAC,IAAI,CAAC,CAAC;SAC7B;IACH,CAAC,EAAE,CAAC,qBAAqB,CAAC,aAAa,EAAE,qBAAqB,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAElF,OAAO,CACL,oBAAC,WAAW,oBAAK,SAAS,IAAE,UAAU,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO;QAC7E,qBAAqB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC/C,MAAM,WAAW,GAAG,cAAc,CAChC,KAAK,EACL,IAAI,EACJ,qBAAqB,CAAC,KAAK,EAC3B,oBAAoB,EACpB,qBAAqB,CAAC,iBAAiB,EACvC,iBAAiB,CAClB,CAAC;YAEF,OAAO,CACL,oBAAC,iBAAiB,kBAChB,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,IAAI,EACZ,WAAW,EAAE,IAAI,KAAK,qBAAqB,CAAC,iBAAiB,EAC7D,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,aAAa,EACrC,GAAG,EAAE,KAAK,uBACS,KAAK,EACxB,mBAAmB,EAAE,mBAAmB,EACxC,aAAa,EAAE,qBAAqB,CAAC,aAAa,IAC9C,WAAW,EACf,CACH,CAAC;QACJ,CAAC,CAAC;QACD,UAAU,CAAC,CAAC,CAAC,CACZ,4BAAI,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,IAC/C,UAAU,CACR,CACN,CAAC,CAAC,CAAC,IAAI,CACI,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\n\nimport OptionsList, { OptionsListProps } from '../internal/components/options-list';\nimport { scrollElementIntoView } from '../internal/utils/scrollable-containers';\nimport { getBaseProps } from '../internal/base-component';\n\nimport AutosuggestOption from './autosuggest-option';\nimport { AutosuggestItem } from './interfaces';\nimport styles from './styles.css.js';\nimport { AutosuggestItemsState } from './options-controller';\n\nexport interface ListProps {\n autosuggestItemsState: AutosuggestItemsState;\n menuProps: Omit<OptionsListProps, 'children'>;\n handleLoadMore: () => void;\n highlightedA11yProps: Record<string, string \| number \| boolean>;\n hasDropdownStatus?: boolean;\n highlightText: string;\n listBottom?: React.ReactNode;\n screenReaderContent?: string;\n}\n\nexport const getOptionProps = (\n index: number,\n item: AutosuggestItem,\n filteredItems: readonly AutosuggestItem[],\n highlightedA11yProps: ListProps['highlightedA11yProps'],\n highlightedOption?: AutosuggestItem,\n hasDropdownStatus?: boolean\n) => {\n const nativeAttributes = item === highlightedOption ? highlightedA11yProps : {};\n const baseOptionProps = getBaseProps(nativeAttributes);\n const isLastItem = index === filteredItems.length - 1;\n const isNotEnteredTextItem = filteredItems.length > 1;\n const padBottom = !hasDropdownStatus && isNotEnteredTextItem && isLastItem;\n\n return { nativeAttributes, padBottom, ...baseOptionProps };\n};\n\nconst PlainList = ({\n autosuggestItemsState,\n handleLoadMore,\n menuProps,\n highlightedA11yProps,\n hasDropdownStatus,\n highlightText,\n listBottom,\n screenReaderContent,\n}: ListProps) => {\n const listRef = useRef<HTMLUListElement>(null);\n useEffect(() => {\n const item = listRef.current?.querySelector<HTMLElement>(\n `[data-mouse-target=\"${autosuggestItemsState.highlightedIndex}\"]`\n );\n if (autosuggestItemsState.highlightType.moveFocus && item) {\n scrollElementIntoView(item);\n }\n }, [autosuggestItemsState.highlightType, autosuggestItemsState.highlightedIndex]);\n\n return (\n <OptionsList {...menuProps} onLoadMore={handleLoadMore} open={true} ref={listRef}>\n {autosuggestItemsState.items.map((item, index) => {\n const optionProps = getOptionProps(\n index,\n item,\n autosuggestItemsState.items,\n highlightedA11yProps,\n autosuggestItemsState.highlightedOption,\n hasDropdownStatus\n );\n\n return (\n <AutosuggestOption\n highlightText={highlightText}\n option={item}\n highlighted={item === autosuggestItemsState.highlightedOption}\n current={item.value === highlightText}\n key={index}\n data-mouse-target={index}\n screenReaderContent={screenReaderContent}\n highlightType={autosuggestItemsState.highlightType}\n {...optionProps}\n />\n );\n })}\n {listBottom ? (\n <li role=\"option\" className={styles['list-bottom']}>\n {listBottom}\n </li>\n ) : null}\n </OptionsList>\n );\n};\n\nexport default PlainList;\n"]}

package/lib/internal/template/autosuggest/virtual-list.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"virtual-list.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/virtual-list.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAkB,SAAS,EAAE,MAAM,cAAc,CAAC;AAKzD,QAAA,MAAM,WAAW,mJASd,SAAS,~~gBA2EX~~,CAAC;AAEF,eAAe,WAAW,CAAC"}
1	+ {"version":3,"file":"virtual-list.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/virtual-list.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAkB,SAAS,EAAE,MAAM,cAAc,CAAC;AAKzD,QAAA,MAAM,WAAW,mJASd,SAAS,gBAoEX,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/internal/template/autosuggest/virtual-list.js CHANGED Viewed

@@ -27,9 +27,7 @@ const VirtualList = ({ autosuggestItemsState, handleLoadMore, menuProps, highlig
             rowVirtualizer.scrollToIndex(autosuggestItemsState.highlightedIndex);
         }
     }, [autosuggestItemsState.highlightType, autosuggestItemsState.highlightedIndex, rowVirtualizer]);
-    return (React.createElement(OptionsList, Object.assign({}, menuProps, { onLoadMore: handleLoadMore, ref: scrollRef, open: true,
-        // to prevent closing the list when clicking the scrollbar on IE11
-        nativeAttributes: { unselectable: 'on' } }),
+    return (React.createElement(OptionsList, Object.assign({}, menuProps, { onLoadMore: handleLoadMore, ref: scrollRef, open: true }),
         React.createElement("div", { "aria-hidden": "true", key: "total-size", className: styles['layout-strut'], style: { height: rowVirtualizer.totalSize + (autosuggestItemsState.items.length === 1 ? 1 : 0) } }),
         rowVirtualizer.virtualItems.map(virtualRow => {
             const { index, start, measureRef } = virtualRow;

package/lib/internal/template/autosuggest/virtual-list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"virtual-list.js","sourceRoot":"","sources":["../../../src/autosuggest/virtual-list.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEnF,OAAO,WAAW,MAAM,qCAAqC,CAAC;AAE9D,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAa,MAAM,cAAc,CAAC;AACzD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAEzE,MAAM,WAAW,GAAG,CAAC,EACnB,qBAAqB,EACrB,cAAc,EACd,SAAS,EACT,oBAAoB,EACpB,iBAAiB,EACjB,aAAa,EACb,UAAU,EACV,mBAAmB,GACT,EAAE,EAAE;IACd,MAAM,SAAS,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACjD,uEAAuE;IACvE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;IAC9E,mBAAmB,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IAEvD,MAAM,cAAc,GAAG,UAAU,CAAC;QAChC,KAAK,EAAE,qBAAqB,CAAC,KAAK;QAClC,SAAS,EAAE,SAAS;QACpB,8FAA8F;QAC9F,oDAAoD;QACpD,oEAAoE;QACpE,8HAA8H;QAC9H,uDAAuD;QACvD,YAAY,EAAE,WAAW,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;KAC5D,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,qBAAqB,CAAC,aAAa,CAAC,SAAS,EAAE;YACjD,cAAc,CAAC,aAAa,CAAC,qBAAqB,CAAC,gBAAgB,CAAC,CAAC;SACtE;IACH,CAAC,EAAE,CAAC,qBAAqB,CAAC,aAAa,EAAE,qBAAqB,CAAC,gBAAgB,EAAE,cAAc,CAAC,CAAC,CAAC;IAElG,OAAO,CACL,oBAAC,WAAW,~~oBACN~~,SAAS,~~IACb~~,UAAU,EAAE,cAAc,~~EAC1B~~,GAAG,EAAE,SAAS,~~EACd,IAAI,~~EAAE,IAAI~~;QACV~~,~~kEAAkE;QAClE,gBAAgB,~~EAAE,~~EAAE,YAAY,EAAE,~~IAAI~~,EAAE~~;~~QAExC~~,4CACc,MAAM,EAClB,GAAG,EAAC,YAAY,EAChB,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,EACjC,KAAK,EAAE,EAAE,MAAM,EAAE,cAAc,CAAC,SAAS,GAAG,CAAC,qBAAqB,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,GAChG;QACD,cAAc,CAAC,YAAY,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YAC5C,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC;YAChD,MAAM,IAAI,GAAG,qBAAqB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAChD,MAAM,WAAW,GAAG,cAAc,CAChC,KAAK,EACL,IAAI,EACJ,qBAAqB,CAAC,KAAK,EAC3B,oBAAoB,EACpB,qBAAqB,CAAC,iBAAiB,EACvC,iBAAiB,CAClB,CAAC;YAEF,OAAO,CACL,oBAAC,iBAAiB,kBAChB,GAAG,EAAE,KAAK,EACV,GAAG,EAAE,UAAU,EACf,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,IAAI,EACZ,WAAW,EAAE,IAAI,KAAK,qBAAqB,CAAC,iBAAiB,EAC7D,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,aAAa,uBAClB,KAAK,EACxB,eAAe,EAAE,KAAK,GAAG,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC9C,mBAAmB,EAAE,mBAAmB,EACxC,WAAW,EAAE,qBAAqB,CAAC,KAAK,CAAC,MAAM,EAC/C,YAAY,EAAE,KAAK,GAAG,CAAC,EACvB,aAAa,EAAE,qBAAqB,CAAC,aAAa,IAC9C,WAAW,EACf,CACH,CAAC;QACJ,CAAC,CAAC;QACD,UAAU,CAAC,CAAC,CAAC,CACZ,4BAAI,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,IAC/C,UAAU,CACR,CACN,CAAC,CAAC,CAAC,IAAI,CACI,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport OptionsList from '../internal/components/options-list';\n\nimport AutosuggestOption from './autosuggest-option';\nimport { getOptionProps, ListProps } from './plain-list';\nimport styles from './styles.css.js';\nimport { useVirtual } from '../internal/hooks/use-virtual';\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\n\nconst VirtualList = ({\n autosuggestItemsState,\n handleLoadMore,\n menuProps,\n highlightedA11yProps,\n hasDropdownStatus,\n highlightText,\n listBottom,\n screenReaderContent,\n}: ListProps) => {\n const scrollRef = useRef<HTMLUListElement>(null);\n // update component, when it gets wider or narrower to reposition items\n const [width, strutRef] = useContainerQuery(rect => rect.contentBoxWidth, []);\n useImperativeHandle(strutRef, () => scrollRef.current);\n\n const rowVirtualizer = useVirtual({\n items: autosuggestItemsState.items,\n parentRef: scrollRef,\n // estimateSize is a dependency of measurements memo. We update it to force full recalculation\n // when the height of any option could have changed:\n // 1: because the component got resized (width property got updated)\n // 2: because the option changed its content (highlightText property controls the highlight and the visibility of hidden tags)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n estimateSize: useCallback(() => 31, [width, highlightText]),\n });\n\n useEffect(() => {\n if (autosuggestItemsState.highlightType.moveFocus) {\n rowVirtualizer.scrollToIndex(autosuggestItemsState.highlightedIndex);\n }\n }, [autosuggestItemsState.highlightType, autosuggestItemsState.highlightedIndex, rowVirtualizer]);\n\n return (\n <OptionsList\n {...menuProps}\n onLoadMore={handleLoadMore}\n ref={scrollRef}\n open={true}~~\n // to prevent closing the list when clicking the scrollbar on IE11\n nativeAttributes={{ unselectable: 'on' }}\n~~ >\n <div\n aria-hidden=\"true\"\n key=\"total-size\"\n className={styles['layout-strut']}\n style={{ height: rowVirtualizer.totalSize + (autosuggestItemsState.items.length === 1 ? 1 : 0) }}\n />\n {rowVirtualizer.virtualItems.map(virtualRow => {\n const { index, start, measureRef } = virtualRow;\n const item = autosuggestItemsState.items[index];\n const optionProps = getOptionProps(\n index,\n item,\n autosuggestItemsState.items,\n highlightedA11yProps,\n autosuggestItemsState.highlightedOption,\n hasDropdownStatus\n );\n\n return (\n <AutosuggestOption\n key={index}\n ref={measureRef}\n highlightText={highlightText}\n option={item}\n highlighted={item === autosuggestItemsState.highlightedOption}\n current={item.value === highlightText}\n data-mouse-target={index}\n virtualPosition={start + (index === 0 ? 1 : 0)}\n screenReaderContent={screenReaderContent}\n ariaSetsize={autosuggestItemsState.items.length}\n ariaPosinset={index + 1}\n highlightType={autosuggestItemsState.highlightType}\n {...optionProps}\n />\n );\n })}\n {listBottom ? (\n <li role=\"option\" className={styles['list-bottom']}>\n {listBottom}\n </li>\n ) : null}\n </OptionsList>\n );\n};\n\nexport default VirtualList;\n"]}
1	+ {"version":3,"file":"virtual-list.js","sourceRoot":"","sources":["../../../src/autosuggest/virtual-list.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEnF,OAAO,WAAW,MAAM,qCAAqC,CAAC;AAE9D,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAa,MAAM,cAAc,CAAC;AACzD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAEzE,MAAM,WAAW,GAAG,CAAC,EACnB,qBAAqB,EACrB,cAAc,EACd,SAAS,EACT,oBAAoB,EACpB,iBAAiB,EACjB,aAAa,EACb,UAAU,EACV,mBAAmB,GACT,EAAE,EAAE;IACd,MAAM,SAAS,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACjD,uEAAuE;IACvE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;IAC9E,mBAAmB,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IAEvD,MAAM,cAAc,GAAG,UAAU,CAAC;QAChC,KAAK,EAAE,qBAAqB,CAAC,KAAK;QAClC,SAAS,EAAE,SAAS;QACpB,8FAA8F;QAC9F,oDAAoD;QACpD,oEAAoE;QACpE,8HAA8H;QAC9H,uDAAuD;QACvD,YAAY,EAAE,WAAW,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;KAC5D,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,qBAAqB,CAAC,aAAa,CAAC,SAAS,EAAE;YACjD,cAAc,CAAC,aAAa,CAAC,qBAAqB,CAAC,gBAAgB,CAAC,CAAC;SACtE;IACH,CAAC,EAAE,CAAC,qBAAqB,CAAC,aAAa,EAAE,qBAAqB,CAAC,gBAAgB,EAAE,cAAc,CAAC,CAAC,CAAC;IAElG,OAAO,CACL,oBAAC,WAAW,oBAAK,SAAS,IAAE,UAAU,EAAE,cAAc,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI;QAChF,4CACc,MAAM,EAClB,GAAG,EAAC,YAAY,EAChB,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,EACjC,KAAK,EAAE,EAAE,MAAM,EAAE,cAAc,CAAC,SAAS,GAAG,CAAC,qBAAqB,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,GAChG;QACD,cAAc,CAAC,YAAY,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YAC5C,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC;YAChD,MAAM,IAAI,GAAG,qBAAqB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAChD,MAAM,WAAW,GAAG,cAAc,CAChC,KAAK,EACL,IAAI,EACJ,qBAAqB,CAAC,KAAK,EAC3B,oBAAoB,EACpB,qBAAqB,CAAC,iBAAiB,EACvC,iBAAiB,CAClB,CAAC;YAEF,OAAO,CACL,oBAAC,iBAAiB,kBAChB,GAAG,EAAE,KAAK,EACV,GAAG,EAAE,UAAU,EACf,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,IAAI,EACZ,WAAW,EAAE,IAAI,KAAK,qBAAqB,CAAC,iBAAiB,EAC7D,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,aAAa,uBAClB,KAAK,EACxB,eAAe,EAAE,KAAK,GAAG,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC9C,mBAAmB,EAAE,mBAAmB,EACxC,WAAW,EAAE,qBAAqB,CAAC,KAAK,CAAC,MAAM,EAC/C,YAAY,EAAE,KAAK,GAAG,CAAC,EACvB,aAAa,EAAE,qBAAqB,CAAC,aAAa,IAC9C,WAAW,EACf,CACH,CAAC;QACJ,CAAC,CAAC;QACD,UAAU,CAAC,CAAC,CAAC,CACZ,4BAAI,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,IAC/C,UAAU,CACR,CACN,CAAC,CAAC,CAAC,IAAI,CACI,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport OptionsList from '../internal/components/options-list';\n\nimport AutosuggestOption from './autosuggest-option';\nimport { getOptionProps, ListProps } from './plain-list';\nimport styles from './styles.css.js';\nimport { useVirtual } from '../internal/hooks/use-virtual';\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\n\nconst VirtualList = ({\n autosuggestItemsState,\n handleLoadMore,\n menuProps,\n highlightedA11yProps,\n hasDropdownStatus,\n highlightText,\n listBottom,\n screenReaderContent,\n}: ListProps) => {\n const scrollRef = useRef<HTMLUListElement>(null);\n // update component, when it gets wider or narrower to reposition items\n const [width, strutRef] = useContainerQuery(rect => rect.contentBoxWidth, []);\n useImperativeHandle(strutRef, () => scrollRef.current);\n\n const rowVirtualizer = useVirtual({\n items: autosuggestItemsState.items,\n parentRef: scrollRef,\n // estimateSize is a dependency of measurements memo. We update it to force full recalculation\n // when the height of any option could have changed:\n // 1: because the component got resized (width property got updated)\n // 2: because the option changed its content (highlightText property controls the highlight and the visibility of hidden tags)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n estimateSize: useCallback(() => 31, [width, highlightText]),\n });\n\n useEffect(() => {\n if (autosuggestItemsState.highlightType.moveFocus) {\n rowVirtualizer.scrollToIndex(autosuggestItemsState.highlightedIndex);\n }\n }, [autosuggestItemsState.highlightType, autosuggestItemsState.highlightedIndex, rowVirtualizer]);\n\n return (\n <OptionsList {...menuProps} onLoadMore={handleLoadMore} ref={scrollRef} open={true}>\n <div\n aria-hidden=\"true\"\n key=\"total-size\"\n className={styles['layout-strut']}\n style={{ height: rowVirtualizer.totalSize + (autosuggestItemsState.items.length === 1 ? 1 : 0) }}\n />\n {rowVirtualizer.virtualItems.map(virtualRow => {\n const { index, start, measureRef } = virtualRow;\n const item = autosuggestItemsState.items[index];\n const optionProps = getOptionProps(\n index,\n item,\n autosuggestItemsState.items,\n highlightedA11yProps,\n autosuggestItemsState.highlightedOption,\n hasDropdownStatus\n );\n\n return (\n <AutosuggestOption\n key={index}\n ref={measureRef}\n highlightText={highlightText}\n option={item}\n highlighted={item === autosuggestItemsState.highlightedOption}\n current={item.value === highlightText}\n data-mouse-target={index}\n virtualPosition={start + (index === 0 ? 1 : 0)}\n screenReaderContent={screenReaderContent}\n ariaSetsize={autosuggestItemsState.items.length}\n ariaPosinset={index + 1}\n highlightType={autosuggestItemsState.highlightType}\n {...optionProps}\n />\n );\n })}\n {listBottom ? (\n <li role=\"option\" className={styles['list-bottom']}>\n {listBottom}\n </li>\n ) : null}\n </OptionsList>\n );\n};\n\nexport default VirtualList;\n"]}

package/lib/internal/template/calendar/utils/intl.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"intl.d.ts","sourceRoot":"","sources":["../../../../src/calendar/utils/intl.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAO7D,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAI9F;AAED,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,GAAG,MAAM,CAOzE;AAED,wBAAgB,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,GAAG,MAAM,CAI7D;~~AAMD~~,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAE,MAAM,GAAG,OAAgB,GAAG,MAAM,CAchG;AAED,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,cAAc,CAAC,MAAM,GAAG,MAAM,CAUlG"}
1	+ {"version":3,"file":"intl.d.ts","sourceRoot":"","sources":["../../../../src/calendar/utils/intl.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAO7D,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAI9F;AAED,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,GAAG,MAAM,CAOzE;AAED,wBAAgB,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,GAAG,MAAM,CAI7D;AAGD,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAE,MAAM,GAAG,OAAgB,GAAG,MAAM,CAchG;AAED,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,cAAc,CAAC,MAAM,GAAG,MAAM,CAUlG"}

package/lib/internal/template/calendar/utils/intl.js CHANGED Viewed

@@ -21,9 +21,6 @@ export function renderYear(locale, date) {
         year: 'numeric',
     });
 }
-/*
- `toLocaleDateString` is expensive (10+ ms) to calculate in IE11.
-*/
 const dayLabelCache = new Map();
 export function getDateLabel(locale, date, mode = 'full') {
     const cacheKey = locale + date.getTime() + mode;

package/lib/internal/template/calendar/utils/intl.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"intl.js","sourceRoot":"","sources":["../../../../src/calendar/utils/intl.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAItC,SAAS,WAAW,CAAC,IAAU,EAAE,QAAgB;IAC/C,MAAM,IAAI,GAAG,QAAQ,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;IACtC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,CAAC;AACtC,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,MAAc,EAAE,QAAgB,EAAE,IAAsB;IACpF,MAAM,QAAQ,GAAG,IAAI,IAAI,EAAE,CAAC;IAC5B,WAAW,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAChC,OAAO,QAAQ,CAAC,kBAAkB,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;AAChE,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,MAAc,EAAE,QAAc;IAC/D,MAAM,MAAM,GAAG,QAAQ,CAAC,kBAAkB,CAAC,MAAM,EAAE;QACjD,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,MAAM;KACd,CAAC,CAAC;IAEH,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,MAAc,EAAE,IAAU;IACnD,OAAO,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE;QACrC,IAAI,EAAE,SAAS;KAChB,CAAC,CAAC;AACL,CAAC;AAED~~;;EAEE;AACF~~,MAAM,aAAa,GAAG,IAAI,GAAG,EAAkB,CAAC;AAChD,MAAM,UAAU,YAAY,CAAC,MAAc,EAAE,IAAU,EAAE,OAAyB,MAAM;IACtF,MAAM,QAAQ,GAAG,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC;IAChD,MAAM,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAChD,IAAI,WAAW,EAAE;QACf,OAAO,WAAW,CAAC;KACpB;IACD,MAAM,KAAK,GAAG,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE;QAC5C,OAAO,EAAE,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QAC7C,KAAK,EAAE,MAAM;QACb,GAAG,EAAE,SAAS;QACd,IAAI,EAAE,SAAS;KAChB,CAAC,CAAC;IACH,aAAa,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;IACnC,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,MAAc,EAAE,IAAU,EAAE,MAA8B;IACxF,IAAI,OAAO,GAA+B,EAAE,CAAC;IAC7C,IAAI,MAAM,KAAK,IAAI,EAAE;QACnB,OAAO,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;KAC/B;IACD,IAAI,MAAM,KAAK,OAAO,EAAE;QACtB,OAAO,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;KAClD;IACD,MAAM,KAAK,GAAG,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACvD,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { TimeInputProps } from '../../time-input/interfaces';\n\nfunction setDayIndex(date: Date, dayIndex: number): void {\n const diff = dayIndex - date.getDay();\n date.setDate(date.getDate() + diff);\n}\n\nexport function renderDayName(locale: string, dayIndex: number, mode: 'short' \| 'long'): string {\n const tempDate = new Date();\n setDayIndex(tempDate, dayIndex);\n return tempDate.toLocaleDateString(locale, { weekday: mode });\n}\n\nexport function renderMonthAndYear(locale: string, baseDate: Date): string {\n const result = baseDate.toLocaleDateString(locale, {\n year: 'numeric',\n month: 'long',\n });\n\n return result;\n}\n\nexport function renderYear(locale: string, date: Date): string {\n return date.toLocaleDateString(locale, {\n year: 'numeric',\n });\n}\n\~~n/\n `toLocaleDateString` is expensive (10+ ms) to calculate in IE11.\n/\~~nconst dayLabelCache = new Map<string, string>();\nexport function getDateLabel(locale: string, date: Date, mode: 'full' \| 'short' = 'full'): string {\n const cacheKey = locale + date.getTime() + mode;\n const cachedValue = dayLabelCache.get(cacheKey);\n if (cachedValue) {\n return cachedValue;\n }\n const value = date.toLocaleDateString(locale, {\n weekday: mode === 'full' ? 'long' : undefined,\n month: 'long',\n day: 'numeric',\n year: 'numeric',\n });\n dayLabelCache.set(cacheKey, value);\n return value;\n}\n\nexport function renderTimeLabel(locale: string, date: Date, format?: TimeInputProps.Format): string {\n let options: Intl.DateTimeFormatOptions = {};\n if (format === 'hh') {\n options = { hour: '2-digit' };\n }\n if (format === 'hh:mm') {\n options = { hour: '2-digit', minute: '2-digit' };\n }\n const value = date.toLocaleTimeString(locale, options);\n return value;\n}\n"]}
1	+ {"version":3,"file":"intl.js","sourceRoot":"","sources":["../../../../src/calendar/utils/intl.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAItC,SAAS,WAAW,CAAC,IAAU,EAAE,QAAgB;IAC/C,MAAM,IAAI,GAAG,QAAQ,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;IACtC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,CAAC;AACtC,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,MAAc,EAAE,QAAgB,EAAE,IAAsB;IACpF,MAAM,QAAQ,GAAG,IAAI,IAAI,EAAE,CAAC;IAC5B,WAAW,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAChC,OAAO,QAAQ,CAAC,kBAAkB,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;AAChE,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,MAAc,EAAE,QAAc;IAC/D,MAAM,MAAM,GAAG,QAAQ,CAAC,kBAAkB,CAAC,MAAM,EAAE;QACjD,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,MAAM;KACd,CAAC,CAAC;IAEH,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,MAAc,EAAE,IAAU;IACnD,OAAO,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE;QACrC,IAAI,EAAE,SAAS;KAChB,CAAC,CAAC;AACL,CAAC;AAED,MAAM,aAAa,GAAG,IAAI,GAAG,EAAkB,CAAC;AAChD,MAAM,UAAU,YAAY,CAAC,MAAc,EAAE,IAAU,EAAE,OAAyB,MAAM;IACtF,MAAM,QAAQ,GAAG,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC;IAChD,MAAM,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAChD,IAAI,WAAW,EAAE;QACf,OAAO,WAAW,CAAC;KACpB;IACD,MAAM,KAAK,GAAG,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE;QAC5C,OAAO,EAAE,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QAC7C,KAAK,EAAE,MAAM;QACb,GAAG,EAAE,SAAS;QACd,IAAI,EAAE,SAAS;KAChB,CAAC,CAAC;IACH,aAAa,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;IACnC,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,MAAc,EAAE,IAAU,EAAE,MAA8B;IACxF,IAAI,OAAO,GAA+B,EAAE,CAAC;IAC7C,IAAI,MAAM,KAAK,IAAI,EAAE;QACnB,OAAO,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;KAC/B;IACD,IAAI,MAAM,KAAK,OAAO,EAAE;QACtB,OAAO,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;KAClD;IACD,MAAM,KAAK,GAAG,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACvD,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { TimeInputProps } from '../../time-input/interfaces';\n\nfunction setDayIndex(date: Date, dayIndex: number): void {\n const diff = dayIndex - date.getDay();\n date.setDate(date.getDate() + diff);\n}\n\nexport function renderDayName(locale: string, dayIndex: number, mode: 'short' \| 'long'): string {\n const tempDate = new Date();\n setDayIndex(tempDate, dayIndex);\n return tempDate.toLocaleDateString(locale, { weekday: mode });\n}\n\nexport function renderMonthAndYear(locale: string, baseDate: Date): string {\n const result = baseDate.toLocaleDateString(locale, {\n year: 'numeric',\n month: 'long',\n });\n\n return result;\n}\n\nexport function renderYear(locale: string, date: Date): string {\n return date.toLocaleDateString(locale, {\n year: 'numeric',\n });\n}\n\nconst dayLabelCache = new Map<string, string>();\nexport function getDateLabel(locale: string, date: Date, mode: 'full' \| 'short' = 'full'): string {\n const cacheKey = locale + date.getTime() + mode;\n const cachedValue = dayLabelCache.get(cacheKey);\n if (cachedValue) {\n return cachedValue;\n }\n const value = date.toLocaleDateString(locale, {\n weekday: mode === 'full' ? 'long' : undefined,\n month: 'long',\n day: 'numeric',\n year: 'numeric',\n });\n dayLabelCache.set(cacheKey, value);\n return value;\n}\n\nexport function renderTimeLabel(locale: string, date: Date, format?: TimeInputProps.Format): string {\n let options: Intl.DateTimeFormatOptions = {};\n if (format === 'hh') {\n options = { hour: '2-digit' };\n }\n if (format === 'hh:mm') {\n options = { hour: '2-digit', minute: '2-digit' };\n }\n const value = date.toLocaleTimeString(locale, options);\n return value;\n}\n"]}

package/lib/internal/template/container/internal.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/container/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAOlF,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;~~AAK1E~~,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,EAAE,0BAA0B;IACzG,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,CAAC;IAEzE,oBAAoB,CAAC,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,oBAAoB,CAAC,CAAC;IACjF,YAAY,CAAC,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,YAAY,CAAC,CAAC;CAClE;AAED,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,sBAAsB,eAWvE;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAmB,EACnB,qBAA6B,EAC7B,sBAA8B,EAC9B,SAAS,EACT,KAAK,EACL,cAAc,EACd,oBAAoB,EACpB,cAAsB,EACtB,iBAAwB,EACxB,sBAA8B,EAC9B,uBAA+B,EAC/B,eAAuB,EACvB,WAAW,EACX,UAAkB,EAClB,qBAA4B,EAC5B,oBAAoB,EACpB,YAAY,EACZ,GAAG,SAAS,EACb,EAAE,sBAAsB,~~eAoHxB~~"}
1	+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/container/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAOlF,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAM1E,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,EAAE,0BAA0B;IACzG,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,CAAC;IAEzE,oBAAoB,CAAC,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,oBAAoB,CAAC,CAAC;IACjF,YAAY,CAAC,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,YAAY,CAAC,CAAC;CAClE;AAED,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,sBAAsB,eAWvE;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAmB,EACnB,qBAA6B,EAC7B,sBAA8B,EAC9B,SAAS,EACT,KAAK,EACL,cAAc,EACd,oBAAoB,EACpB,cAAsB,EACtB,iBAAwB,EACxB,sBAA8B,EAC9B,uBAA+B,EAC/B,eAAuB,EACvB,WAAW,EACX,UAAkB,EAClB,qBAA4B,EAC5B,oBAAoB,EACpB,YAAY,EACZ,GAAG,SAAS,EACb,EAAE,sBAAsB,eAsHxB"}

package/lib/internal/template/container/internal.js CHANGED Viewed

@@ -15,6 +15,7 @@ import { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';
 import { useModalContext } from '../internal/context/modal-context';
 import { useUniqueId } from '../internal/hooks/use-unique-id';
 import { ContainerHeaderContextProvider } from '../internal/context/container-header';
+import { getGlobalFlag } from '../internal/utils/global-flags';
 export function InternalContainerAsSubstep(props) {
     const { subStepRef, funnelSubStepProps } = useFunnelSubStep();
     const modalContext = useModalContext();
@@ -55,6 +56,7 @@ export default function InternalContainer(_a) {
     // In this case we don't want the container to have sticky styles, as only the table header row will show as stuck on scroll.
     const shouldHaveStickyStyles = isSticky && !isMobile;
     const hasMedia = !!(media === null || media === void 0 ? void 0 : media.content);
+    const hasToolbar = getGlobalFlag('appLayoutWidget');
     const mediaPosition = (_b = media === null || media === void 0 ? void 0 : media.position) !== null && _b !== void 0 ? _b : 'top';
     return (React.createElement("div", Object.assign({}, baseProps, __funnelSubStepProps, { className: clsx(baseProps.className, styles.root, styles[`variant-${variant}`], fitHeight && styles['fit-height'], hasMedia && (mediaPosition === 'side' ? styles['with-side-media'] : styles['with-top-media']), shouldHaveStickyStyles && [styles['sticky-enabled']], isRefresh && styles.refresh), ref: mergedRef }),
         hasMedia && (React.createElement("div", { className: clsx(styles[`media-${mediaPosition === 'side' ? 'side' : 'top'}`], styles.media), style: mediaPosition === 'top' ? { height: (media === null || media === void 0 ? void 0 : media.height) || '' } : { width: (media === null || media === void 0 ? void 0 : media.width) || '' } }, media.content)),
@@ -67,6 +69,7 @@ export default function InternalContainer(_a) {
                             [styles['header-dynamic-height']]: hasDynamicHeight,
                             [styles['header-stuck']]: isStuck,
                             [styles['with-paddings']]: !disableHeaderPaddings,
+                            [styles['with-toolbar']]: hasToolbar,
                             [styles['with-hidden-content']]: !children || __hiddenContent,
                             [styles['header-with-media']]: hasMedia,
                         }) }, stickyStyles, { ref: headerMergedRef }), header)))),