npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.328 → 3.0.329 - Mend

@cloudscape-design/components-themeable 3.0.328 → 3.0.329

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"resizable-drawer.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/resizable-drawer.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,~~4CAA4C~~,CAAC;~~AAC9E~~,OAAO,EAAE,iBAAiB,EAAE,MAAM,~~6CAA6C~~,CAAC;~~AAChF~~,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACjC,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAE3D,OAAO,aAAa,MAAM,wCAAwC,CAAC;AACnE,OAAO,gBAAgB,MAAM,iCAAiC,CAAC;AAG/D,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAOT,EAAE,EAAE;;QAPK,EAC9B,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,YAAY,OAES,EADlB,KAAK,cANsB,2DAO/B,CADS;IAER,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE7C,MAAM,SAAS,GAAG,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,WAAW,KAAI,YAAY,CAAC,WAAW,GAAG,GAAG,CAAC,CAAC,CAAC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC;IAChH,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEpD,SAAS,CAAC,GAAG,EAAE;QACb,uDAAuD;QACvD,kEAAkE;QAClE,MAAM,MAAM,GAAG,qBAAqB,CAAC,GAAG,EAAE;YACxC,MAAM,OAAO,GAAG,WAAW,EAAE,CAAC;YAC9B,eAAe,CAAC,CAAC,IAAI,GAAG,OAAO,CAAC,GAAG,GAAG,CAAC,CAAC;QAC1C,CAAC,CAAC,CAAC;QACH,OAAO,GAAG,EAAE,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC;IAC5C,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC;IAExB,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAE,EAAE;QAC1C,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;QAC/B,MAAM,IAAI,GAAG,eAAe,CAAC,SAAS,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;QACzD,MAAM,EAAE,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,EAAE,CAAC;QAE5B,IAAI,MAAM,IAAI,EAAE,IAAI,QAAQ,IAAI,SAAS,EAAE;YACzC,QAAQ,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;SACxB;IACH,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,MAAM,CAAC;IACxB,MAAM,oBAAoB,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;IACtC,MAAM,eAAe,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAErD,MAAM,gBAAgB,GAAqB;QACzC,QAAQ;QACR,~~aAAa~~,EAAE,eAAe;~~QAC9B~~,SAAS,EAAE,IAAI,CAAC,MAAM;QACtB,iBAAiB;QACjB,oBAAoB;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,IAAI,CAAC,MAAM,EAChB,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,CACL,oBAAC,MAAM,oBACD,KAAK,IACT,GAAG,EAAE,eAAe,EACpB,YAAY,EACV,CAAC,QAAQ;aACT,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,SAAS,CAAA,IAAI,6BAAK,SAAS,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,IAAG,YAAY,CAAO,KAGzG,QAAQ,CACF,CACV,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useEffect, useState, useRef } from 'react';\n\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { usePointerEvents } from '~~../../split-panel/~~utils/use-pointer-events';\nimport { useKeyboardEvents } from '~~../../split-panel/~~utils/use-keyboard-events';\nimport { Drawer } from './index';\nimport testutilStyles from '../test-classes/styles.css.js';\n\nimport ResizeHandler from '../../split-panel/icons/resize-handler';\nimport splitPanelStyles from '../../split-panel/styles.css.js';\nimport { ~~SizeControlProps,~~ ResizableDrawerProps } from './interfaces';\n\nexport const ResizableDrawer = ({\n onResize,\n size,\n getMaxWidth,\n refs,\n activeDrawer,\n ...props\n}: ResizableDrawerProps) => {\n const { isOpen, children, isMobile } = props;\n\n const MIN_WIDTH = activeDrawer?.defaultSize && activeDrawer.defaultSize < 280 ? activeDrawer?.defaultSize : 280;\n const [relativeSize, setRelativeSize] = useState(0);\n\n useEffect(() => {\n // effects are called inside out in the components tree\n // wait one frame to allow app-layout to complete its calculations\n const handle = requestAnimationFrame(() => {\n const maxSize = getMaxWidth();\n setRelativeSize((size / maxSize) * 100);\n });\n return () => cancelAnimationFrame(handle);\n }, [size, getMaxWidth]);\n\n const setSidePanelWidth = (width: number) => {\n const maxWidth = getMaxWidth();\n const size = getLimitedValue(MIN_WIDTH, width, maxWidth);\n const id = activeDrawer?.id;\n\n if (isOpen && id && maxWidth >= MIN_WIDTH) {\n onResize({ size, id });\n }\n };\n\n const position = 'side';\n const setBottomPanelHeight = () => {};\n const drawerRefObject = useRef<HTMLDivElement>(null);\n\n const sizeControlProps: SizeControlProps = {\n position,\n ~~splitPanelRef~~: drawerRefObject,\n handleRef: refs.slider,\n setSidePanelWidth,\n setBottomPanelHeight,\n };\n\n const onSliderPointerDown = usePointerEvents(sizeControlProps);\n const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n const resizeHandle = (\n <div\n ref={refs.slider}\n role=\"slider\"\n tabIndex={0}\n aria-label={activeDrawer?.ariaLabels?.resizeHandle}\n aria-valuemax={100}\n aria-valuemin={0}\n aria-valuenow={relativeSize}\n className={clsx(splitPanelStyles.slider, splitPanelStyles[`slider-side`], 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 (\n <Drawer\n {...props}\n ref={drawerRefObject}\n resizeHandle={\n !isMobile &&\n activeDrawer?.resizable && <div className={splitPanelStyles['slider-wrapper-side']}>{resizeHandle}</div>\n }\n >\n {children}\n </Drawer>\n );\n};\n"]}
1	+ {"version":3,"file":"resizable-drawer.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/resizable-drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useEffect, useState, useRef } from 'react';\n\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { usePointerEvents } from '../utils/use-pointer-events';\nimport { useKeyboardEvents } from '../utils/use-keyboard-events';\nimport { SizeControlProps } from '../utils/interfaces';\nimport { Drawer } from './index';\nimport testutilStyles from '../test-classes/styles.css.js';\n\nimport ResizeHandler from '../../split-panel/icons/resize-handler';\nimport splitPanelStyles from '../../split-panel/styles.css.js';\nimport { ResizableDrawerProps } from './interfaces';\n\nexport const ResizableDrawer = ({\n onResize,\n size,\n getMaxWidth,\n refs,\n activeDrawer,\n ...props\n}: ResizableDrawerProps) => {\n const { isOpen, children, isMobile } = props;\n\n const MIN_WIDTH = activeDrawer?.defaultSize && activeDrawer.defaultSize < 280 ? activeDrawer?.defaultSize : 280;\n const [relativeSize, setRelativeSize] = useState(0);\n\n useEffect(() => {\n // effects are called inside out in the components tree\n // wait one frame to allow app-layout to complete its calculations\n const handle = requestAnimationFrame(() => {\n const maxSize = getMaxWidth();\n setRelativeSize((size / maxSize) * 100);\n });\n return () => cancelAnimationFrame(handle);\n }, [size, getMaxWidth]);\n\n const setSidePanelWidth = (width: number) => {\n const maxWidth = getMaxWidth();\n const size = getLimitedValue(MIN_WIDTH, width, maxWidth);\n const id = activeDrawer?.id;\n\n if (isOpen && id && maxWidth >= MIN_WIDTH) {\n onResize({ size, id });\n }\n };\n\n const position = 'side';\n const setBottomPanelHeight = () => {};\n const drawerRefObject = useRef<HTMLDivElement>(null);\n\n const sizeControlProps: SizeControlProps = {\n position,\n panelRef: drawerRefObject,\n handleRef: refs.slider,\n setSidePanelWidth,\n setBottomPanelHeight,\n };\n\n const onSliderPointerDown = usePointerEvents(sizeControlProps);\n const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n const resizeHandle = (\n <div\n ref={refs.slider}\n role=\"slider\"\n tabIndex={0}\n aria-label={activeDrawer?.ariaLabels?.resizeHandle}\n aria-valuemax={100}\n aria-valuemin={0}\n aria-valuenow={relativeSize}\n className={clsx(splitPanelStyles.slider, splitPanelStyles[`slider-side`], 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 (\n <Drawer\n {...props}\n ref={drawerRefObject}\n resizeHandle={\n !isMobile &&\n activeDrawer?.resizable && <div className={splitPanelStyles['slider-wrapper-side']}>{resizeHandle}</div>\n }\n >\n {children}\n </Drawer>\n );\n};\n"]}

package/lib/internal/template/app-layout/notifications/styles.css.js CHANGED Viewed

@@ -1,8 +1,8 @@
     import './styles.scoped.css';
     export default {
-  "notifications": "awsui_notifications_1hmm4_ophqf_9",
-  "notifications-sticky": "awsui_notifications-sticky_1hmm4_ophqf_10",
-  "no-content-paddings": "awsui_no-content-paddings_1hmm4_ophqf_25"
+  "notifications": "awsui_notifications_1hmm4_1r3fz_9",
+  "notifications-sticky": "awsui_notifications-sticky_1hmm4_1r3fz_10",
+  "no-content-paddings": "awsui_no-content-paddings_1hmm4_1r3fz_25"
 };

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

@@ -6,26 +6,26 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_notifications_1hmm4_ophqf_9:not(#\9),
-.awsui_notifications-sticky_1hmm4_ophqf_10:not(#\9) {
+.awsui_notifications_1hmm4_1r3fz_9:not(#\9),
+.awsui_notifications-sticky_1hmm4_1r3fz_10:not(#\9) {
   z-index: 850;
 }
-.awsui_notifications_1hmm4_ophqf_9:not(#\9) {
+.awsui_notifications_1hmm4_1r3fz_9:not(#\9) {
   /* This is necessary for the z-index to have effect */
   position: relative;
 }
-.awsui_notifications-sticky_1hmm4_ophqf_10:not(#\9) {
+.awsui_notifications-sticky_1hmm4_1r3fz_10:not(#\9) {
   top: 0;
   position: sticky;
-  --awsui-flashbar-sticky-bottom-margin-8nglyc: var(--space-xxl-y3qgr4, 32px);
+  --awsui-flashbar-sticky-bottom-margin-zw2xxa: var(--space-xxl-y3qgr4, 32px);
 }
-.awsui_no-content-paddings_1hmm4_ophqf_25:not(#\9) {
+.awsui_no-content-paddings_1hmm4_1r3fz_25:not(#\9) {
   /*
   When using the disableContentPaddings option, the Flashbar will use this custom property to add additional space
   when the notification bar is rendered, to prevent it from overlapping the content.
    */
-  --awsui-stacked-notifications-bottom-margin-8nglyc: var(--space-scaled-l-w7rqqb, 20px);
+  --awsui-stacked-notifications-bottom-margin-zw2xxa: var(--space-scaled-l-w7rqqb, 20px);
 }

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

@@ -2,8 +2,8 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "notifications": "awsui_notifications_1hmm4_ophqf_9",
-  "notifications-sticky": "awsui_notifications-sticky_1hmm4_ophqf_10",
-  "no-content-paddings": "awsui_no-content-paddings_1hmm4_ophqf_25"
+  "notifications": "awsui_notifications_1hmm4_1r3fz_9",
+  "notifications-sticky": "awsui_notifications-sticky_1hmm4_1r3fz_10",
+  "no-content-paddings": "awsui_no-content-paddings_1hmm4_1r3fz_25"
 };

package/lib/internal/template/app-layout/runtime-api.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"runtime-api.d.ts","sourceRoot":"lib/default/","sources":["app-layout/runtime-api.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,IAAI,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC7F,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAoBjD,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;CAC1B;AAED,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,KAAK,CAAC,mBAAmB,CAAC,GAAG,aAAa,~~CAiBxF~~"}
1	+ {"version":3,"file":"runtime-api.d.ts","sourceRoot":"lib/default/","sources":["app-layout/runtime-api.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,IAAI,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC7F,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAoBjD,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;CAC1B;AAED,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,KAAK,CAAC,mBAAmB,CAAC,GAAG,aAAa,CA0BxF"}

package/lib/internal/template/app-layout/runtime-api.js CHANGED Viewed

@@ -14,8 +14,11 @@ function RuntimeContentWrapper({ mountContent, unmountContent }) {
 }
 export function convertRuntimeDrawers(drawers) {
     const converted = drawers.map((_a) => {
-        var { mountContent, unmountContent } = _a, runtimeDrawer = __rest(_a, ["mountContent", "unmountContent"]);
-        return (Object.assign(Object.assign({}, runtimeDrawer), { content: (React.createElement(RuntimeContentWrapper, { key: runtimeDrawer.id, mountContent: mountContent, unmountContent: unmountContent })) }));
+        var { mountContent, unmountContent, trigger } = _a, runtimeDrawer = __rest(_a, ["mountContent", "unmountContent", "trigger"]);
+        return (Object.assign(Object.assign({}, runtimeDrawer), { trigger: trigger.iconSvg
+                ? Object.assign(Object.assign({}, trigger), { iconSvg: (
+                    // eslint-disable-next-line react/no-danger
+                    React.createElement("span", { dangerouslySetInnerHTML: { __html: trigger.iconSvg } })) }) : trigger, content: (React.createElement(RuntimeContentWrapper, { key: runtimeDrawer.id, mountContent: mountContent, unmountContent: unmountContent })) }));
     });
     converted.sort((a, b) => {
         var _a, _b;

package/lib/internal/template/app-layout/runtime-api.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"runtime-api.js","sourceRoot":"lib/default/","sources":["app-layout/runtime-api.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AASjD,SAAS,qBAAqB,CAAC,EAAE,YAAY,EAAE,cAAc,EAA8B;IACzF,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,GAAG,CAAC,OAAQ,CAAC;QAC/B,YAAY,CAAC,SAAS,CAAC,CAAC;QACxB,OAAO,GAAG,EAAE,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;QACvC,uDAAuD;IACzD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,6BAAK,GAAG,EAAE,GAAG,GAAQ,CAAC;AAC/B,CAAC;AAOD,MAAM,UAAU,qBAAqB,CAAC,OAAmC;IACvE,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,~~EAAkD~~,EAAE,EAAE;~~YAAtD~~,EAAE,YAAY,EAAE,cAAc,OAAoB,EAAf,aAAa,~~cAAhD~~,~~kCAAkD~~,CAAF;QAAO,OAAA,~~iCACjF~~,aAAa,KAChB,OAAO,EAAE,CACP,oBAAC,qBAAqB,IAAC,GAAG,EAAE,aAAa,CAAC,EAAE,EAAE,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,cAAc,GAAI,CAC7G,IACD,CAAA;KAAA,CAAC,CAAC;IACJ,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;;QACtB,IAAI,CAAC,CAAC,aAAa,KAAK,CAAC,CAAC,aAAa,EAAE;YACvC,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,MAAA,CAAC,CAAC,aAAa,mCAAI,CAAC,CAAC,GAAG,CAAC,MAAA,CAAC,CAAC,aAAa,mCAAI,CAAC,CAAC,CAAC,CAAC;SACnE;QACD,OAAO,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9B,CAAC,CAAC,CAAC;IACH,OAAO;QACL,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,WAAC,OAAA,CAAC,MAAA,IAAI,CAAC,aAAa,mCAAI,CAAC,CAAC,GAAG,CAAC,CAAA,EAAA,CAAC;QAC/D,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,WAAC,OAAA,CAAC,MAAA,IAAI,CAAC,aAAa,mCAAI,CAAC,CAAC,IAAI,CAAC,CAAA,EAAA,CAAC;KAChE,CAAC;AACJ,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';\nimport { DrawerConfig as RuntimeDrawerConfig } from '../internal/plugins/drawers-controller';\nimport { DrawerItem } from './drawer/interfaces';\n\ninterface RuntimeContentWrapperProps {\n mountContent: RuntimeDrawerConfig['mountContent'];\n unmountContent: RuntimeDrawerConfig['unmountContent'];\n}\n\nfunction RuntimeContentWrapper({ mountContent, unmountContent }: RuntimeContentWrapperProps) {\n const ref = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const container = ref.current!;\n mountContent(container);\n return () => unmountContent(container);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return <div ref={ref}></div>;\n}\n\nexport interface DrawersLayout {\n before: Array<DrawerItem>;\n after: Array<DrawerItem>;\n}\n\nexport function convertRuntimeDrawers(drawers: Array<RuntimeDrawerConfig>): DrawersLayout {\n const converted = drawers.map(({ mountContent, unmountContent, ...runtimeDrawer }) => ({\n ...runtimeDrawer,\n content: (\n <RuntimeContentWrapper key={runtimeDrawer.id} mountContent={mountContent} unmountContent={unmountContent} />\n ),\n }));\n converted.sort((a, b) => {\n if (b.orderPriority !== a.orderPriority) {\n return Math.sign((b.orderPriority ?? 0) - (a.orderPriority ?? 0));\n }\n return b.id < a.id ? 1 : -1;\n });\n return {\n before: converted.filter(item => (item.orderPriority ?? 0) > 0),\n after: converted.filter(item => (item.orderPriority ?? 0) <= 0),\n };\n}\n"]}
1	+ {"version":3,"file":"runtime-api.js","sourceRoot":"lib/default/","sources":["app-layout/runtime-api.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AASjD,SAAS,qBAAqB,CAAC,EAAE,YAAY,EAAE,cAAc,EAA8B;IACzF,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,GAAG,CAAC,OAAQ,CAAC;QAC/B,YAAY,CAAC,SAAS,CAAC,CAAC;QACxB,OAAO,GAAG,EAAE,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;QACvC,uDAAuD;IACzD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,6BAAK,GAAG,EAAE,GAAG,GAAQ,CAAC;AAC/B,CAAC;AAOD,MAAM,UAAU,qBAAqB,CAAC,OAAmC;IACvE,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,EAA2D,EAAE,EAAE;YAA/D,EAAE,YAAY,EAAE,cAAc,EAAE,OAAO,OAAoB,EAAf,aAAa,cAAzD,6CAA2D,CAAF;QAAO,OAAA,iCAC1F,aAAa,KAChB,OAAO,EAAE,OAAO,CAAC,OAAO;gBACtB,CAAC,iCACM,OAAO,KACV,OAAO,EAAE;oBACP,2CAA2C;oBAC3C,8BAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,OAAO,EAAE,GAAI,CAC/D,IAEL,CAAC,CAAC,OAAO,EACX,OAAO,EAAE,CACP,oBAAC,qBAAqB,IAAC,GAAG,EAAE,aAAa,CAAC,EAAE,EAAE,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,cAAc,GAAI,CAC7G,IACD,CAAA;KAAA,CAAC,CAAC;IACJ,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;;QACtB,IAAI,CAAC,CAAC,aAAa,KAAK,CAAC,CAAC,aAAa,EAAE;YACvC,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,MAAA,CAAC,CAAC,aAAa,mCAAI,CAAC,CAAC,GAAG,CAAC,MAAA,CAAC,CAAC,aAAa,mCAAI,CAAC,CAAC,CAAC,CAAC;SACnE;QACD,OAAO,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9B,CAAC,CAAC,CAAC;IACH,OAAO;QACL,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,WAAC,OAAA,CAAC,MAAA,IAAI,CAAC,aAAa,mCAAI,CAAC,CAAC,GAAG,CAAC,CAAA,EAAA,CAAC;QAC/D,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,WAAC,OAAA,CAAC,MAAA,IAAI,CAAC,aAAa,mCAAI,CAAC,CAAC,IAAI,CAAC,CAAA,EAAA,CAAC;KAChE,CAAC;AACJ,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';\nimport { DrawerConfig as RuntimeDrawerConfig } from '../internal/plugins/drawers-controller';\nimport { DrawerItem } from './drawer/interfaces';\n\ninterface RuntimeContentWrapperProps {\n mountContent: RuntimeDrawerConfig['mountContent'];\n unmountContent: RuntimeDrawerConfig['unmountContent'];\n}\n\nfunction RuntimeContentWrapper({ mountContent, unmountContent }: RuntimeContentWrapperProps) {\n const ref = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const container = ref.current!;\n mountContent(container);\n return () => unmountContent(container);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return <div ref={ref}></div>;\n}\n\nexport interface DrawersLayout {\n before: Array<DrawerItem>;\n after: Array<DrawerItem>;\n}\n\nexport function convertRuntimeDrawers(drawers: Array<RuntimeDrawerConfig>): DrawersLayout {\n const converted = drawers.map(({ mountContent, unmountContent, trigger, ...runtimeDrawer }) => ({\n ...runtimeDrawer,\n trigger: trigger.iconSvg\n ? {\n ...trigger,\n iconSvg: (\n // eslint-disable-next-line react/no-danger\n <span dangerouslySetInnerHTML={{ __html: trigger.iconSvg }} />\n ),\n }\n : trigger,\n content: (\n <RuntimeContentWrapper key={runtimeDrawer.id} mountContent={mountContent} unmountContent={unmountContent} />\n ),\n }));\n converted.sort((a, b) => {\n if (b.orderPriority !== a.orderPriority) {\n return Math.sign((b.orderPriority ?? 0) - (a.orderPriority ?? 0));\n }\n return b.id < a.id ? 1 : -1;\n });\n return {\n before: converted.filter(item => (item.orderPriority ?? 0) > 0),\n after: converted.filter(item => (item.orderPriority ?? 0) <= 0),\n };\n}\n"]}

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

@@ -1,18 +1,22 @@
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_lm6vo_qamh8_97",
-  "layout-wrapper": "awsui_layout-wrapper_lm6vo_qamh8_98",
-  "root-no-scroll": "awsui_root-no-scroll_lm6vo_qamh8_105",
-  "layout": "awsui_layout_lm6vo_qamh8_98",
-  "layout-no-scroll": "awsui_layout-no-scroll_lm6vo_qamh8_116",
-  "layout-main": "awsui_layout-main_lm6vo_qamh8_120",
-  "layout-main-scrollable": "awsui_layout-main-scrollable_lm6vo_qamh8_126",
-  "unfocusable": "awsui_unfocusable_lm6vo_qamh8_131",
-  "breadcrumbs-desktop": "awsui_breadcrumbs-desktop_lm6vo_qamh8_135",
-  "content-header-wrapper": "awsui_content-header-wrapper_lm6vo_qamh8_140",
-  "content-wrapper": "awsui_content-wrapper_lm6vo_qamh8_144",
-  "content-overlapped": "awsui_content-overlapped_lm6vo_qamh8_148",
-  "content-extra-top-padding": "awsui_content-extra-top-padding_lm6vo_qamh8_152"
+  "resize-active": "awsui_resize-active_lm6vo_1v63j_98",
+  "resize-side": "awsui_resize-side_lm6vo_1v63j_104",
+  "resize-bottom": "awsui_resize-bottom_lm6vo_1v63j_107",
+  "with-motion": "awsui_with-motion_lm6vo_1v63j_112",
+  "root": "awsui_root_lm6vo_1v63j_127",
+  "layout-wrapper": "awsui_layout-wrapper_lm6vo_1v63j_128",
+  "root-no-scroll": "awsui_root-no-scroll_lm6vo_1v63j_135",
+  "layout": "awsui_layout_lm6vo_1v63j_128",
+  "layout-no-scroll": "awsui_layout-no-scroll_lm6vo_1v63j_146",
+  "layout-main": "awsui_layout-main_lm6vo_1v63j_150",
+  "layout-main-scrollable": "awsui_layout-main-scrollable_lm6vo_1v63j_156",
+  "unfocusable": "awsui_unfocusable_lm6vo_1v63j_161",
+  "breadcrumbs-desktop": "awsui_breadcrumbs-desktop_lm6vo_1v63j_165",
+  "content-header-wrapper": "awsui_content-header-wrapper_lm6vo_1v63j_170",
+  "content-wrapper": "awsui_content-wrapper_lm6vo_1v63j_174",
+  "content-overlapped": "awsui_content-overlapped_lm6vo_1v63j_178",
+  "content-extra-top-padding": "awsui_content-extra-top-padding_lm6vo_1v63j_182"
 };

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

@@ -94,61 +94,92 @@ 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_root_lm6vo_qamh8_97:not(#\9),
-.awsui_layout-wrapper_lm6vo_qamh8_98:not(#\9) {
+/* stylelint-disable selector-combinator-disallowed-list, selector-max-type, selector-max-universal */
+.awsui_resize-active_lm6vo_1v63j_98 *:not(#\9) {
+  -webkit-user-select: none;
+          user-select: none;
+}
+.awsui_resize-active_lm6vo_1v63j_98 iframe:not(#\9) {
+  pointer-events: none;
+}
+.awsui_resize-side_lm6vo_1v63j_104 *:not(#\9) {
+  cursor: ew-resize;
+}
+.awsui_resize-bottom_lm6vo_1v63j_107 *:not(#\9) {
+  cursor: ns-resize;
+}
+/* stylelint-enable selector-combinator-disallowed-list, selector-max-type, selector-max-universal */
+.awsui_with-motion_lm6vo_1v63j_112:not(#\9) {
+  transition: var(--motion-duration-refresh-only-fast-osz7cj, 115ms);
+  transition-property: border-color, opacity, width;
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_with-motion_lm6vo_1v63j_112:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_with-motion_lm6vo_1v63j_112:not(#\9), .awsui-mode-entering .awsui_with-motion_lm6vo_1v63j_112:not(#\9) {
+  animation: none;
+  transition: none;
+}
+.awsui_root_lm6vo_1v63j_127:not(#\9),
+.awsui_layout-wrapper_lm6vo_1v63j_128:not(#\9) {
   display: flex;
   flex-direction: column;
   position: relative;
   color: var(--color-text-body-default-fckvk9, #16191f);
 }
-.awsui_root-no-scroll_lm6vo_qamh8_105:not(#\9) {
+.awsui_root-no-scroll_lm6vo_1v63j_135:not(#\9) {
   position: relative;
   z-index: 1;
 }
-.awsui_layout_lm6vo_qamh8_98:not(#\9) {
+.awsui_layout_lm6vo_1v63j_128:not(#\9) {
   flex: 1 1 auto;
   display: flex;
   align-items: stretch;
   background-color: var(--color-background-layout-main-nd5gs3, #f2f3f3);
 }
-.awsui_layout-no-scroll_lm6vo_qamh8_116:not(#\9) {
+.awsui_layout-no-scroll_lm6vo_1v63j_146:not(#\9) {
   overflow: hidden;
 }
-.awsui_layout-main_lm6vo_qamh8_120:not(#\9) {
+.awsui_layout-main_lm6vo_1v63j_150:not(#\9) {
   flex: 1;
   min-width: 0;
   background-color: var(--color-background-layout-main-nd5gs3, #f2f3f3);
   position: relative;
 }
-.awsui_layout-main-scrollable_lm6vo_qamh8_126:not(#\9) {
+.awsui_layout-main-scrollable_lm6vo_1v63j_156:not(#\9) {
   overflow: auto;
 }
 /* stylelint-disable-next-line selector-combinator-disallowed-list, selector-max-universal */
-.awsui_unfocusable_lm6vo_qamh8_131 *:not(#\9) {
+.awsui_unfocusable_lm6vo_1v63j_161 *:not(#\9) {
   visibility: hidden;
 }
-.awsui_breadcrumbs-desktop_lm6vo_qamh8_135:not(#\9) {
+.awsui_breadcrumbs-desktop_lm6vo_1v63j_165:not(#\9) {
   padding-top: var(--space-scaled-m-5caa5e, 16px);
   padding-bottom: var(--space-scaled-s-73r995, 12px);
 }
-.awsui_content-header-wrapper_lm6vo_qamh8_140:not(#\9) {
+.awsui_content-header-wrapper_lm6vo_1v63j_170:not(#\9) {
   padding-bottom: var(--space-content-header-padding-bottom-v55qlt, 16px);
 }
-.awsui_content-wrapper_lm6vo_qamh8_144:not(#\9) {
+.awsui_content-wrapper_lm6vo_1v63j_174:not(#\9) {
   padding-bottom: var(--space-layout-content-bottom-zu47sf, 20px);
 }
-.awsui_content-overlapped_lm6vo_qamh8_148:not(#\9) {
+.awsui_content-overlapped_lm6vo_1v63j_178:not(#\9) {
   margin-top: calc(-1 * var(--space-dark-header-overlap-distance-g5z45b, 0px));
 }
-.awsui_content-extra-top-padding_lm6vo_qamh8_152:not(#\9) {
+.awsui_content-extra-top-padding_lm6vo_1v63j_182:not(#\9) {
   padding-top: var(--space-scaled-m-5caa5e, 16px);
 }

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

@@ -2,18 +2,22 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_lm6vo_qamh8_97",
-  "layout-wrapper": "awsui_layout-wrapper_lm6vo_qamh8_98",
-  "root-no-scroll": "awsui_root-no-scroll_lm6vo_qamh8_105",
-  "layout": "awsui_layout_lm6vo_qamh8_98",
-  "layout-no-scroll": "awsui_layout-no-scroll_lm6vo_qamh8_116",
-  "layout-main": "awsui_layout-main_lm6vo_qamh8_120",
-  "layout-main-scrollable": "awsui_layout-main-scrollable_lm6vo_qamh8_126",
-  "unfocusable": "awsui_unfocusable_lm6vo_qamh8_131",
-  "breadcrumbs-desktop": "awsui_breadcrumbs-desktop_lm6vo_qamh8_135",
-  "content-header-wrapper": "awsui_content-header-wrapper_lm6vo_qamh8_140",
-  "content-wrapper": "awsui_content-wrapper_lm6vo_qamh8_144",
-  "content-overlapped": "awsui_content-overlapped_lm6vo_qamh8_148",
-  "content-extra-top-padding": "awsui_content-extra-top-padding_lm6vo_qamh8_152"
+  "resize-active": "awsui_resize-active_lm6vo_1v63j_98",
+  "resize-side": "awsui_resize-side_lm6vo_1v63j_104",
+  "resize-bottom": "awsui_resize-bottom_lm6vo_1v63j_107",
+  "with-motion": "awsui_with-motion_lm6vo_1v63j_112",
+  "root": "awsui_root_lm6vo_1v63j_127",
+  "layout-wrapper": "awsui_layout-wrapper_lm6vo_1v63j_128",
+  "root-no-scroll": "awsui_root-no-scroll_lm6vo_1v63j_135",
+  "layout": "awsui_layout_lm6vo_1v63j_128",
+  "layout-no-scroll": "awsui_layout-no-scroll_lm6vo_1v63j_146",
+  "layout-main": "awsui_layout-main_lm6vo_1v63j_150",
+  "layout-main-scrollable": "awsui_layout-main-scrollable_lm6vo_1v63j_156",
+  "unfocusable": "awsui_unfocusable_lm6vo_1v63j_161",
+  "breadcrumbs-desktop": "awsui_breadcrumbs-desktop_lm6vo_1v63j_165",
+  "content-header-wrapper": "awsui_content-header-wrapper_lm6vo_1v63j_170",
+  "content-wrapper": "awsui_content-wrapper_lm6vo_1v63j_174",
+  "content-overlapped": "awsui_content-overlapped_lm6vo_1v63j_178",
+  "content-extra-top-padding": "awsui_content-extra-top-padding_lm6vo_1v63j_182"
 };

package/lib/internal/template/app-layout/utils/interfaces.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface SizeControlProps {
+    position: 'side' | 'bottom';
+    panelRef?: React.RefObject<HTMLDivElement>;
+    handleRef?: React.RefObject<HTMLDivElement>;
+    setSidePanelWidth: (width: number) => void;
+    setBottomPanelHeight: (height: number) => void;
+    hasTransitions?: boolean;
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/lib/internal/template/app-layout/utils/interfaces.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["app-layout/utils/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,oBAAoB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B"}

package/lib/internal/template/app-layout/utils/interfaces.js ADDED Viewed

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

package/lib/internal/template/app-layout/utils/interfaces.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["app-layout/utils/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nexport interface SizeControlProps {\n position: 'side' | 'bottom';\n panelRef?: React.RefObject<HTMLDivElement>;\n handleRef?: React.RefObject<HTMLDivElement>;\n setSidePanelWidth: (width: number) => void;\n setBottomPanelHeight: (height: number) => void;\n hasTransitions?: boolean;\n}\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-drawer-focus-control.d.ts","sourceRoot":"lib/default/","sources":["app-layout/utils/use-drawer-focus-control.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAkC,MAAM,OAAO,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,MAAM,MAAM,qBAAqB,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC;AAEzE,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,SAAS,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IACnC,KAAK,EAAE,SAAS,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IAClC,MAAM,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACnC;AAED,UAAU,iBAAiB;IACzB,IAAI,EAAE,sBAAsB,CAAC;IAC7B,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,kBAAkB,EAAE,CAAC,WAAW,EAAE,qBAAqB,KAAK,IAAI,CAAC;CAClE;AAED,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,cAAc,EAC5B,MAAM,EAAE,OAAO,EACf,YAAY,UAAQ,GACnB,iBAAiB,~~CA6DnB~~"}
1	+ {"version":3,"file":"use-drawer-focus-control.d.ts","sourceRoot":"lib/default/","sources":["app-layout/utils/use-drawer-focus-control.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAkC,MAAM,OAAO,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,MAAM,MAAM,qBAAqB,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC;AAEzE,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,SAAS,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IACnC,KAAK,EAAE,SAAS,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IAClC,MAAM,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACnC;AAED,UAAU,iBAAiB;IACzB,IAAI,EAAE,sBAAsB,CAAC;IAC7B,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,kBAAkB,EAAE,CAAC,WAAW,EAAE,qBAAqB,KAAK,IAAI,CAAC;CAClE;AAED,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,cAAc,EAC5B,MAAM,EAAE,OAAO,EACf,YAAY,UAAQ,GACnB,iBAAiB,CAiEnB"}

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

@@ -11,13 +11,18 @@ export function useDrawerFocusControl(dependencies, isOpen, restoreFocus = false
     const shouldFocus = useRef(false);
     const lastInteraction = useRef(null);
     useEffect(() => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         switch ((_a = lastInteraction.current) === null || _a === void 0 ? void 0 : _a.type) {
             case 'open':
-                (_b = refs.slider.current) === null || _b === void 0 ? void 0 : _b.focus();
+                if (refs.slider.current) {
+                    (_b = refs.slider.current) === null || _b === void 0 ? void 0 : _b.focus();
+                }
+                else {
+                    (_c = refs.close.current) === null || _c === void 0 ? void 0 : _c.focus();
+                }
                 break;
             case 'close':
-                (_c = refs.toggle.current) === null || _c === void 0 ? void 0 : _c.focus();
+                (_d = refs.toggle.current) === null || _d === void 0 ? void 0 : _d.focus();
                 break;
         }
         lastInteraction.current = null;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-drawer-focus-control.js","sourceRoot":"lib/default/","sources":["app-layout/utils/use-drawer-focus-control.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAA6B,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAkBlF,MAAM,UAAU,qBAAqB,CACnC,YAA4B,EAC5B,MAAe,EACf,YAAY,GAAG,KAAK;IAEpB,MAAM,IAAI,GAAG;QACX,MAAM,EAAE,MAAM,CAAkB,IAAI,CAAC;QACrC,KAAK,EAAE,MAAM,CAAkB,IAAI,CAAC;QACpC,MAAM,EAAE,MAAM,CAAiB,IAAI,CAAC;KACrC,CAAC;IACF,MAAM,sBAAsB,GAAG,MAAM,EAAe,CAAC;IACrD,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAClC,MAAM,eAAe,GAAG,MAAM,CAA+B,IAAI,CAAC,CAAC;IAEnE,SAAS,CAAC,GAAG,EAAE;;QACb,QAAQ,MAAA,eAAe,CAAC,OAAO,0CAAE,IAAI,EAAE;YACrC,KAAK,MAAM;gBACT,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;~~gBAC7B~~,MAAM;YACR,KAAK,OAAO;gBACV,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBAC7B,MAAM;SACT;QACD,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;QAC/B,uDAAuD;IACzD,CAAC,EAAE,YAAY,CAAC,CAAC;IAEjB,MAAM,OAAO,GAAG,GAAG,EAAE;;QACnB,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE;YACxB,OAAO;SACR;QACD,IAAI,MAAM,EAAE;YACV,sBAAsB,CAAC,OAAO;gBAC5B,QAAQ,CAAC,aAAa,KAAK,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAE,QAAQ,CAAC,aAA6B,CAAC,CAAC,CAAC,SAAS,CAAC;YACjG,MAAA,IAAI,CAAC,KAAK,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;SAC7B;aAAM;YACL,IAAI,YAAY,IAAI,sBAAsB,CAAC,OAAO,IAAI,QAAQ,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,EAAE;gBACvG,sBAAsB,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;gBACvC,sBAAsB,CAAC,OAAO,GAAG,SAAS,CAAC;aAC5C;iBAAM;gBACL,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;aAC9B;SACF;QACD,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC;IAC9B,CAAC,CAAC;IAEF,kEAAkE;IAClE,uDAAuD;IACvD,SAAS,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAE7B,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,sBAAsB,CAAC,OAAO,GAAG,SAAS,CAAC;IAC7C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,IAAI;QACJ,QAAQ,EAAE,KAAK,CAAC,EAAE;YAChB,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;YAC3B,IAAI,KAAK,IAAI,MAAM,EAAE;gBACnB,OAAO,EAAE,CAAC;aACX;QACH,CAAC;QACD,SAAS;QACT,kBAAkB,EAAE,CAAC,WAAkC,EAAE,EAAE,CAAC,CAAC,eAAe,CAAC,OAAO,GAAG,WAAW,CAAC;KACpG,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { DependencyList, RefObject, useEffect, useRef, useCallback } from 'react';\nimport { ButtonProps } from '../../button/interfaces';\n\nexport type DrawerLastInteraction = { type: 'open' } \| { type: 'close' };\n\nexport interface DrawerFocusControlRefs {\n toggle: RefObject<ButtonProps.Ref>;\n close: RefObject<ButtonProps.Ref>;\n slider: RefObject<HTMLDivElement>;\n}\n\ninterface FocusControlState {\n refs: DrawerFocusControlRefs;\n setFocus: (force?: boolean) => void;\n loseFocus: () => void;\n setLastInteraction: (interaction: DrawerLastInteraction) => void;\n}\n\nexport function useDrawerFocusControl(\n dependencies: DependencyList,\n isOpen: boolean,\n restoreFocus = false\n): FocusControlState {\n const refs = {\n toggle: useRef<ButtonProps.Ref>(null),\n close: useRef<ButtonProps.Ref>(null),\n slider: useRef<HTMLDivElement>(null),\n };\n const previousFocusedElement = useRef<HTMLElement>();\n const shouldFocus = useRef(false);\n const lastInteraction = useRef<DrawerLastInteraction \| null>(null);\n\n useEffect(() => {\n switch (lastInteraction.current?.type) {\n case 'open':\n refs.slider.current?.focus();\n break;\n case 'close':\n refs.toggle.current?.focus();\n break;\n }\n lastInteraction.current = null;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, dependencies);\n\n const doFocus = () => {\n if (!shouldFocus.current) {\n return;\n }\n if (isOpen) {\n previousFocusedElement.current =\n document.activeElement !== document.body ? (document.activeElement as HTMLElement) : undefined;\n refs.close.current?.focus();\n } else {\n if (restoreFocus && previousFocusedElement.current && document.contains(previousFocusedElement.current)) {\n previousFocusedElement.current.focus();\n previousFocusedElement.current = undefined;\n } else {\n refs.toggle.current?.focus();\n }\n }\n shouldFocus.current = false;\n };\n\n // We explictly want this effect to run when only `isOpen` changes\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useEffect(doFocus, [isOpen]);\n\n const loseFocus = useCallback(() => {\n previousFocusedElement.current = undefined;\n }, []);\n\n return {\n refs,\n setFocus: force => {\n shouldFocus.current = true;\n if (force && isOpen) {\n doFocus();\n }\n },\n loseFocus,\n setLastInteraction: (interaction: DrawerLastInteraction) => (lastInteraction.current = interaction),\n };\n}\n"]}
1	+ {"version":3,"file":"use-drawer-focus-control.js","sourceRoot":"lib/default/","sources":["app-layout/utils/use-drawer-focus-control.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAA6B,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAkBlF,MAAM,UAAU,qBAAqB,CACnC,YAA4B,EAC5B,MAAe,EACf,YAAY,GAAG,KAAK;IAEpB,MAAM,IAAI,GAAG;QACX,MAAM,EAAE,MAAM,CAAkB,IAAI,CAAC;QACrC,KAAK,EAAE,MAAM,CAAkB,IAAI,CAAC;QACpC,MAAM,EAAE,MAAM,CAAiB,IAAI,CAAC;KACrC,CAAC;IACF,MAAM,sBAAsB,GAAG,MAAM,EAAe,CAAC;IACrD,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAClC,MAAM,eAAe,GAAG,MAAM,CAA+B,IAAI,CAAC,CAAC;IAEnE,SAAS,CAAC,GAAG,EAAE;;QACb,QAAQ,MAAA,eAAe,CAAC,OAAO,0CAAE,IAAI,EAAE;YACrC,KAAK,MAAM;gBACT,IAAI,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;oBACvB,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;iBAC9B;qBAAM;oBACL,MAAA,IAAI,CAAC,KAAK,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;iBAC7B;gBACD,MAAM;YACR,KAAK,OAAO;gBACV,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBAC7B,MAAM;SACT;QACD,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;QAC/B,uDAAuD;IACzD,CAAC,EAAE,YAAY,CAAC,CAAC;IAEjB,MAAM,OAAO,GAAG,GAAG,EAAE;;QACnB,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE;YACxB,OAAO;SACR;QACD,IAAI,MAAM,EAAE;YACV,sBAAsB,CAAC,OAAO;gBAC5B,QAAQ,CAAC,aAAa,KAAK,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAE,QAAQ,CAAC,aAA6B,CAAC,CAAC,CAAC,SAAS,CAAC;YACjG,MAAA,IAAI,CAAC,KAAK,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;SAC7B;aAAM;YACL,IAAI,YAAY,IAAI,sBAAsB,CAAC,OAAO,IAAI,QAAQ,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,EAAE;gBACvG,sBAAsB,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;gBACvC,sBAAsB,CAAC,OAAO,GAAG,SAAS,CAAC;aAC5C;iBAAM;gBACL,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;aAC9B;SACF;QACD,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC;IAC9B,CAAC,CAAC;IAEF,kEAAkE;IAClE,uDAAuD;IACvD,SAAS,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAE7B,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,sBAAsB,CAAC,OAAO,GAAG,SAAS,CAAC;IAC7C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,IAAI;QACJ,QAAQ,EAAE,KAAK,CAAC,EAAE;YAChB,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;YAC3B,IAAI,KAAK,IAAI,MAAM,EAAE;gBACnB,OAAO,EAAE,CAAC;aACX;QACH,CAAC;QACD,SAAS;QACT,kBAAkB,EAAE,CAAC,WAAkC,EAAE,EAAE,CAAC,CAAC,eAAe,CAAC,OAAO,GAAG,WAAW,CAAC;KACpG,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { DependencyList, RefObject, useEffect, useRef, useCallback } from 'react';\nimport { ButtonProps } from '../../button/interfaces';\n\nexport type DrawerLastInteraction = { type: 'open' } \| { type: 'close' };\n\nexport interface DrawerFocusControlRefs {\n toggle: RefObject<ButtonProps.Ref>;\n close: RefObject<ButtonProps.Ref>;\n slider: RefObject<HTMLDivElement>;\n}\n\ninterface FocusControlState {\n refs: DrawerFocusControlRefs;\n setFocus: (force?: boolean) => void;\n loseFocus: () => void;\n setLastInteraction: (interaction: DrawerLastInteraction) => void;\n}\n\nexport function useDrawerFocusControl(\n dependencies: DependencyList,\n isOpen: boolean,\n restoreFocus = false\n): FocusControlState {\n const refs = {\n toggle: useRef<ButtonProps.Ref>(null),\n close: useRef<ButtonProps.Ref>(null),\n slider: useRef<HTMLDivElement>(null),\n };\n const previousFocusedElement = useRef<HTMLElement>();\n const shouldFocus = useRef(false);\n const lastInteraction = useRef<DrawerLastInteraction \| null>(null);\n\n useEffect(() => {\n switch (lastInteraction.current?.type) {\n case 'open':\n if (refs.slider.current) {\n refs.slider.current?.focus();\n } else {\n refs.close.current?.focus();\n }\n break;\n case 'close':\n refs.toggle.current?.focus();\n break;\n }\n lastInteraction.current = null;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, dependencies);\n\n const doFocus = () => {\n if (!shouldFocus.current) {\n return;\n }\n if (isOpen) {\n previousFocusedElement.current =\n document.activeElement !== document.body ? (document.activeElement as HTMLElement) : undefined;\n refs.close.current?.focus();\n } else {\n if (restoreFocus && previousFocusedElement.current && document.contains(previousFocusedElement.current)) {\n previousFocusedElement.current.focus();\n previousFocusedElement.current = undefined;\n } else {\n refs.toggle.current?.focus();\n }\n }\n shouldFocus.current = false;\n };\n\n // We explictly want this effect to run when only `isOpen` changes\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useEffect(doFocus, [isOpen]);\n\n const loseFocus = useCallback(() => {\n previousFocusedElement.current = undefined;\n }, []);\n\n return {\n refs,\n setFocus: force => {\n shouldFocus.current = true;\n if (force && isOpen) {\n doFocus();\n }\n },\n loseFocus,\n setLastInteraction: (interaction: DrawerLastInteraction) => (lastInteraction.current = interaction),\n };\n}\n"]}

package/lib/internal/template/app-layout/utils/use-keyboard-events.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SizeControlProps } from './interfaces';
+export declare const useKeyboardEvents: ({ position, setSidePanelWidth, setBottomPanelHeight, panelRef, }: SizeControlProps) => (event: React.KeyboardEvent) => void;
+//# sourceMappingURL=use-keyboard-events.d.ts.map

package/lib/internal/template/app-layout/utils/use-keyboard-events.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"use-keyboard-events.d.ts","sourceRoot":"lib/default/","sources":["app-layout/utils/use-keyboard-events.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAmBhD,eAAO,MAAM,iBAAiB,qEAK3B,gBAAgB,aACF,mBAAmB,SAwDnC,CAAC"}

package/lib/internal/template/{split-panel → app-layout}/utils/use-keyboard-events.js RENAMED Viewed

@@ -1,34 +1,33 @@
 import { KeyCode } from '../../internal/keycode';
 const KEYBOARD_SINGLE_STEP_SIZE = 10;
 const KEYBOARD_MULTIPLE_STEPS_SIZE = 60;
-const getCurrentSize = (splitPanelRef) => {
-    if (!splitPanelRef || !splitPanelRef.current) {
+const getCurrentSize = (panelRef) => {
+    if (!panelRef || !panelRef.current) {
         return {
-            splitPanelHeight: 0,
-            splitPanelWidth: 0,
+            panelHeight: 0,
+            panelWidth: 0,
         };
     }
-    const safeParseFloat = (size = '') => parseFloat(size) || 0;
     return {
-        splitPanelHeight: safeParseFloat(splitPanelRef.current.style.height),
-        splitPanelWidth: safeParseFloat(splitPanelRef.current.style.width),
+        panelHeight: panelRef.current.clientHeight,
+        panelWidth: panelRef.current.clientWidth,
     };
 };
-export const useKeyboardEvents = ({ position, setSidePanelWidth, setBottomPanelHeight, splitPanelRef, }) => {
+export const useKeyboardEvents = ({ position, setSidePanelWidth, setBottomPanelHeight, panelRef, }) => {
     return (event) => {
         let setSizeFunction;
         let currentSize;
         let maxSize;
-        const { splitPanelHeight, splitPanelWidth } = getCurrentSize(splitPanelRef);
+        const { panelHeight, panelWidth } = getCurrentSize(panelRef);
         if (position === 'side') {
             setSizeFunction = setSidePanelWidth;
-            currentSize = splitPanelWidth;
+            currentSize = panelWidth;
             // don't need the exact max size as it's constrained in the set size function
             maxSize = window.innerWidth;
         }
         else {
             setSizeFunction = setBottomPanelHeight;
-            currentSize = splitPanelHeight;
+            currentSize = panelHeight;
             // don't need the exact max size as it's constrained in the set size function
             maxSize = window.innerHeight;
         }

package/lib/internal/template/app-layout/utils/use-keyboard-events.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"use-keyboard-events.js","sourceRoot":"lib/default/","sources":["app-layout/utils/use-keyboard-events.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { KeyCode } from '../../internal/keycode';\nimport { SizeControlProps } from './interfaces';\n\nconst KEYBOARD_SINGLE_STEP_SIZE = 10;\nconst KEYBOARD_MULTIPLE_STEPS_SIZE = 60;\n\nconst getCurrentSize = (panelRef?: React.RefObject<HTMLDivElement>) => {\n if (!panelRef || !panelRef.current) {\n return {\n panelHeight: 0,\n panelWidth: 0,\n };\n }\n\n return {\n panelHeight: panelRef.current.clientHeight,\n panelWidth: panelRef.current.clientWidth,\n };\n};\n\nexport const useKeyboardEvents = ({\n position,\n setSidePanelWidth,\n setBottomPanelHeight,\n panelRef,\n}: SizeControlProps) => {\n return (event: React.KeyboardEvent) => {\n let setSizeFunction;\n let currentSize;\n let maxSize;\n\n const { panelHeight, panelWidth } = getCurrentSize(panelRef);\n\n if (position === 'side') {\n setSizeFunction = setSidePanelWidth;\n currentSize = panelWidth;\n // don't need the exact max size as it's constrained in the set size function\n maxSize = window.innerWidth;\n } else {\n setSizeFunction = setBottomPanelHeight;\n currentSize = panelHeight;\n // don't need the exact max size as it's constrained in the set size function\n maxSize = window.innerHeight;\n }\n\n const primaryGrowKey = position === 'bottom' ? KeyCode.up : KeyCode.left;\n const primaryShrinkKey = position === 'bottom' ? KeyCode.down : KeyCode.right;\n const altGrowKey = position === 'bottom' ? KeyCode.right : KeyCode.down;\n const altShrinkKey = position === 'bottom' ? KeyCode.left : KeyCode.up;\n\n let isEventHandled = true;\n switch (event.keyCode) {\n case primaryGrowKey:\n case altGrowKey:\n setSizeFunction(currentSize + KEYBOARD_SINGLE_STEP_SIZE);\n\n break;\n case primaryShrinkKey:\n case altShrinkKey:\n setSizeFunction(currentSize - KEYBOARD_SINGLE_STEP_SIZE);\n break;\n case KeyCode.pageUp:\n setSizeFunction(currentSize + KEYBOARD_MULTIPLE_STEPS_SIZE);\n break;\n case KeyCode.pageDown:\n setSizeFunction(currentSize - KEYBOARD_MULTIPLE_STEPS_SIZE);\n break;\n case KeyCode.home:\n setSizeFunction(maxSize);\n break;\n case KeyCode.end:\n setSizeFunction(0);\n break;\n default:\n isEventHandled = false;\n }\n\n if (isEventHandled) {\n event.preventDefault();\n event.stopPropagation();\n }\n };\n};\n"]}

package/lib/internal/template/app-layout/utils/use-pointer-events.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { SizeControlProps } from './interfaces';
+export declare const usePointerEvents: ({ position, panelRef, handleRef, setSidePanelWidth, setBottomPanelHeight, hasTransitions, }: SizeControlProps) => () => void;
+//# sourceMappingURL=use-pointer-events.d.ts.map

package/lib/internal/template/app-layout/utils/use-pointer-events.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"use-pointer-events.d.ts","sourceRoot":"lib/default/","sources":["app-layout/utils/use-pointer-events.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEhD,eAAO,MAAM,gBAAgB,gGAO1B,gBAAgB,eAoDlB,CAAC"}

package/lib/internal/template/{split-panel → app-layout}/utils/use-pointer-events.js RENAMED Viewed

@@ -2,32 +2,39 @@
 // SPDX-License-Identifier: Apache-2.0
 import { useCallback } from 'react';
 import styles from '../styles.css.js';
-export const usePointerEvents = ({ position, splitPanelRef, handleRef, setSidePanelWidth, setBottomPanelHeight, }) => {
+export const usePointerEvents = ({ position, panelRef, handleRef, setSidePanelWidth, setBottomPanelHeight, hasTransitions = false, }) => {
     const onDocumentPointerMove = useCallback((event) => {
-        if (!splitPanelRef || !splitPanelRef.current || !handleRef || !handleRef.current) {
+        if (!panelRef || !panelRef.current || !handleRef || !handleRef.current) {
             return;
         }
+        panelRef.current.classList.remove(styles['with-motion']);
         if (position === 'side') {
-            const mouseClientX = event.clientX;
+            const mouseClientX = event.clientX || 0;
             // The handle offset aligns the cursor with the middle of the resize handle.
             const handleOffset = handleRef.current.getBoundingClientRect().width / 2;
-            const width = splitPanelRef.current.getBoundingClientRect().right - mouseClientX + handleOffset;
+            const width = panelRef.current.getBoundingClientRect().right - mouseClientX + handleOffset;
             setSidePanelWidth(width);
         }
         else {
-            const mouseClientY = event.clientY;
+            const mouseClientY = event.clientY || 0;
             // The handle offset aligns the cursor with the middle of the resize handle.
             const handleOffset = handleRef.current.getBoundingClientRect().height / 2;
-            const height = splitPanelRef.current.getBoundingClientRect().bottom - mouseClientY + handleOffset;
+            const height = panelRef.current.getBoundingClientRect().bottom - mouseClientY + handleOffset;
             setBottomPanelHeight(height);
         }
-    }, [position, splitPanelRef, handleRef, setSidePanelWidth, setBottomPanelHeight]);
+    }, [position, panelRef, handleRef, setSidePanelWidth, setBottomPanelHeight]);
     const onDocumentPointerUp = useCallback(() => {
+        if (!panelRef || !panelRef.current) {
+            return;
+        }
+        if (hasTransitions) {
+            panelRef.current.classList.add(styles['with-motion']);
+        }
         document.body.classList.remove(styles['resize-active']);
         document.body.classList.remove(styles[`resize-${position}`]);
         document.removeEventListener('pointerup', onDocumentPointerUp);
         document.removeEventListener('pointermove', onDocumentPointerMove);
-    }, [onDocumentPointerMove, position]);
+    }, [panelRef, onDocumentPointerMove, position, hasTransitions]);
     const onSliderPointerDown = useCallback(() => {
         document.body.classList.add(styles['resize-active']);
         document.body.classList.add(styles[`resize-${position}`]);

package/lib/internal/template/app-layout/utils/use-pointer-events.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"use-pointer-events.js","sourceRoot":"lib/default/","sources":["app-layout/utils/use-pointer-events.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useCallback } from 'react';\nimport styles from '../styles.css.js';\nimport { SizeControlProps } from './interfaces';\n\nexport const usePointerEvents = ({\n position,\n panelRef,\n handleRef,\n setSidePanelWidth,\n setBottomPanelHeight,\n hasTransitions = false,\n}: SizeControlProps) => {\n const onDocumentPointerMove = useCallback(\n (event: PointerEvent) => {\n if (!panelRef || !panelRef.current || !handleRef || !handleRef.current) {\n return;\n }\n\n panelRef.current.classList.remove(styles['with-motion']);\n\n if (position === 'side') {\n const mouseClientX = event.clientX || 0;\n\n // The handle offset aligns the cursor with the middle of the resize handle.\n const handleOffset = handleRef.current.getBoundingClientRect().width / 2;\n const width = panelRef.current.getBoundingClientRect().right - mouseClientX + handleOffset;\n\n setSidePanelWidth(width);\n } else {\n const mouseClientY = event.clientY || 0;\n\n // The handle offset aligns the cursor with the middle of the resize handle.\n const handleOffset = handleRef.current.getBoundingClientRect().height / 2;\n const height = panelRef.current.getBoundingClientRect().bottom - mouseClientY + handleOffset;\n\n setBottomPanelHeight(height);\n }\n },\n [position, panelRef, handleRef, setSidePanelWidth, setBottomPanelHeight]\n );\n\n const onDocumentPointerUp = useCallback(() => {\n if (!panelRef || !panelRef.current) {\n return;\n }\n\n if (hasTransitions) {\n panelRef.current.classList.add(styles['with-motion']);\n }\n document.body.classList.remove(styles['resize-active']);\n document.body.classList.remove(styles[`resize-${position}`]);\n document.removeEventListener('pointerup', onDocumentPointerUp);\n document.removeEventListener('pointermove', onDocumentPointerMove);\n }, [panelRef, onDocumentPointerMove, position, hasTransitions]);\n\n const onSliderPointerDown = useCallback(() => {\n document.body.classList.add(styles['resize-active']);\n document.body.classList.add(styles[`resize-${position}`]);\n document.addEventListener('pointerup', onDocumentPointerUp);\n document.addEventListener('pointermove', onDocumentPointerMove);\n }, [onDocumentPointerMove, onDocumentPointerUp, position]);\n\n return onSliderPointerDown;\n};\n"]}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { InternalDrawerProps } from '../drawer/interfaces';
+import { DrawerFocusControlRefs } from './use-drawer-focus-control';
+export interface DrawerResizeProps {
+    activeDrawerId?: string | null;
+    drawers: InternalDrawerProps['drawers'];
+    drawersRefs: DrawerFocusControlRefs;
+    isToolsOpen: boolean;
+    drawersMaxWidth: number;
+}
+declare function useResize(drawerRefObject: React.RefObject<HTMLDivElement>, drawerResizeProps: DrawerResizeProps): {
+    resizeHandle: JSX.Element;
+    drawerSize: number;
+};
+export default useResize;
+//# sourceMappingURL=use-resize.d.ts.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"use-resize.d.ts","sourceRoot":"lib/default/","sources":["app-layout/utils/use-resize.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoD,MAAM,OAAO,CAAC;AASzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAK3D,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAGpE,MAAM,WAAW,iBAAiB;IAChC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,OAAO,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACxC,WAAW,EAAE,sBAAsB,CAAC;IACpC,WAAW,EAAE,OAAO,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,iBAAS,SAAS,CAAC,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,iBAAiB,EAAE,iBAAiB;;;EAgGxG;AAED,eAAe,SAAS,CAAC"}