npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.378 → 3.0.379 - Mend

@cloudscape-design/components-themeable 3.0.378 → 3.0.379

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

package/lib/internal/manifest.json CHANGED Viewed

@@ -1,3 +1,3 @@
 {
-  "commit": "2b28f2376331f670a61aeb8e12baa09f3b521231"
+  "commit": "c5195e97fcb50c0dd9f38410ab94fdfe0b35840e"
 }

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

@@ -24,6 +24,8 @@ section.split-panel-bottom {
   grid-column: 1 / 6;
   grid-row: 10;
   height: auto;
+  overflow-y: hidden;
   /*
   The position sticky will work in conjunction with the align self: end; property.
   If the grid row scrolls beyond the viewport, the sticky bottom position

package/lib/internal/scss/icon/styles.scss CHANGED Viewed

@@ -32,10 +32,10 @@
 .badge::after {
   content: '';
   position: absolute;
-  width: 8px;
-  height: 8px;
-  border-radius: 8px;
-  background-color: awsui.$color-text-status-info;
-  top: 2px;
-  right: -2px;
+  width: 6px;
+  height: 6px;
+  border-radius: 4px;
+  background-color: awsui.$color-background-badge-icon;
+  top: 0px;
+  right: -3px;
 }

package/lib/internal/scss/property-filter/styles.scss CHANGED Viewed

@@ -12,7 +12,7 @@
 .search-field {
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   // The xs breakpoint, minus the table tools container padding
   max-width: calc(#{styles.$breakpoint-x-small} - 2 * #{awsui.$space-l});
 }
@@ -90,6 +90,13 @@
   flex: 1;
 }
+.results {
+  // Align with the filter input's vertical padding and border sizes.
+  padding: calc(#{styles.$control-padding-vertical} + #{styles.$control-border-width});
+  padding-left: 0;
+  padding-right: 0;
+}
 .token-trigger {
   @include styles.text-wrapping;
 }

package/lib/internal/template/app-layout/defaults.d.ts CHANGED Viewed

@@ -1,10 +1,9 @@
 import { AppLayoutProps } from './interfaces';
-interface AppLayoutState {
+export interface AppLayoutState {
     navigationOpen?: boolean;
     toolsOpen?: boolean;
     minContentWidth?: number;
     maxContentWidth?: number | undefined;
 }
 export declare function applyDefaults(contentType: AppLayoutProps.ContentType, stateFromProps: AppLayoutState, isRefresh: boolean): AppLayoutState;
-export {};
 //# sourceMappingURL=defaults.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"defaults.d.ts","sourceRoot":"lib/default/","sources":["app-layout/defaults.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAqC9C,~~UAAU~~,cAAc;~~IACtB~~,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACtC;AAED,wBAAgB,aAAa,CAC3B,WAAW,EAAE,cAAc,CAAC,WAAW,EACvC,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,OAAO,GACjB,cAAc,CAWhB"}
1	+ {"version":3,"file":"defaults.d.ts","sourceRoot":"lib/default/","sources":["app-layout/defaults.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAqC9C,MAAM,WAAW,cAAc;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACtC;AAED,wBAAgB,aAAa,CAC3B,WAAW,EAAE,cAAc,CAAC,WAAW,EACvC,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,OAAO,GACjB,cAAc,CAWhB"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"defaults.js","sourceRoot":"lib/default/","sources":["app-layout/defaults.ts"],"names":[],"mappings":"AAIA,MAAM,uBAAuB,GAAmB;IAC9C,cAAc,EAAE,IAAI;IACpB,eAAe,EAAE,GAAG;IACpB,eAAe,EAAE,SAAS;CAC3B,CAAC;AAEF,MAAM,QAAQ,GAAuD;IACnE,OAAO,oBACF,uBAAuB,CAC3B;IACD,SAAS,oBACJ,uBAAuB,CAC3B;IACD,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,eAAe,EAAE,GAAG;QACpB,eAAe,EAAE,SAAS;KAC3B;IACD,IAAI,EAAE;QACJ,cAAc,EAAE,KAAK;QACrB,eAAe,EAAE,GAAG;QACpB,eAAe,EAAE,GAAG;KACrB;IACD,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,eAAe,EAAE,GAAG;QACpB,eAAe,EAAE,SAAS;KAC3B;IACD,MAAM,EAAE;QACN,cAAc,EAAE,KAAK;QACrB,eAAe,EAAE,GAAG;QACpB,eAAe,EAAE,IAAI;KACtB;CACF,CAAC;AASF,MAAM,UAAU,aAAa,CAC3B,WAAuC,EACvC,cAA8B,EAC9B,SAAkB;;IAElB,MAAM,mBAAmB,GAAG,SAAS;QACnC,CAAC,iCAAM,QAAQ,CAAC,WAAW,CAAC,KAAE,eAAe,EAAE,SAAS,IACxD,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;IAE1B,OAAO;QACL,eAAe,EAAE,MAAA,cAAc,CAAC,eAAe,mCAAI,mBAAmB,CAAC,eAAe;QACtF,eAAe,EAAE,MAAA,cAAc,CAAC,eAAe,mCAAI,mBAAmB,CAAC,eAAe;QACtF,cAAc,EAAE,MAAA,cAAc,CAAC,cAAc,mCAAI,mBAAmB,CAAC,cAAc;QACnF,SAAS,EAAE,MAAA,cAAc,CAAC,SAAS,mCAAI,mBAAmB,CAAC,SAAS;KACrE,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { AppLayoutProps } from './interfaces';\n\nconst defaultContentTypeState: AppLayoutState = {\n navigationOpen: true,\n minContentWidth: 280,\n maxContentWidth: undefined,\n};\n\nconst defaults: Record<AppLayoutProps.ContentType, AppLayoutState> = {\n default: {\n ...defaultContentTypeState,\n },\n dashboard: {\n ...defaultContentTypeState,\n },\n cards: {\n navigationOpen: true,\n minContentWidth: 280,\n maxContentWidth: undefined,\n },\n form: {\n navigationOpen: false,\n minContentWidth: 280,\n maxContentWidth: 800,\n },\n table: {\n navigationOpen: true,\n minContentWidth: 280,\n maxContentWidth: undefined,\n },\n wizard: {\n navigationOpen: false,\n minContentWidth: 280,\n maxContentWidth: 1080,\n },\n};\n\~~ninterface~~ AppLayoutState {\n navigationOpen?: boolean;\n toolsOpen?: boolean;\n minContentWidth?: number;\n maxContentWidth?: number \| undefined;\n}\n\nexport function applyDefaults(\n contentType: AppLayoutProps.ContentType,\n stateFromProps: AppLayoutState,\n isRefresh: boolean\n): AppLayoutState {\n const contentTypeDefaults = isRefresh\n ? { ...defaults[contentType], maxContentWidth: undefined }\n : defaults[contentType];\n\n return {\n maxContentWidth: stateFromProps.maxContentWidth ?? contentTypeDefaults.maxContentWidth,\n minContentWidth: stateFromProps.minContentWidth ?? contentTypeDefaults.minContentWidth,\n navigationOpen: stateFromProps.navigationOpen ?? contentTypeDefaults.navigationOpen,\n toolsOpen: stateFromProps.toolsOpen ?? contentTypeDefaults.toolsOpen,\n };\n}\n"]}
1	+ {"version":3,"file":"defaults.js","sourceRoot":"lib/default/","sources":["app-layout/defaults.ts"],"names":[],"mappings":"AAIA,MAAM,uBAAuB,GAAmB;IAC9C,cAAc,EAAE,IAAI;IACpB,eAAe,EAAE,GAAG;IACpB,eAAe,EAAE,SAAS;CAC3B,CAAC;AAEF,MAAM,QAAQ,GAAuD;IACnE,OAAO,oBACF,uBAAuB,CAC3B;IACD,SAAS,oBACJ,uBAAuB,CAC3B;IACD,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,eAAe,EAAE,GAAG;QACpB,eAAe,EAAE,SAAS;KAC3B;IACD,IAAI,EAAE;QACJ,cAAc,EAAE,KAAK;QACrB,eAAe,EAAE,GAAG;QACpB,eAAe,EAAE,GAAG;KACrB;IACD,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,eAAe,EAAE,GAAG;QACpB,eAAe,EAAE,SAAS;KAC3B;IACD,MAAM,EAAE;QACN,cAAc,EAAE,KAAK;QACrB,eAAe,EAAE,GAAG;QACpB,eAAe,EAAE,IAAI;KACtB;CACF,CAAC;AASF,MAAM,UAAU,aAAa,CAC3B,WAAuC,EACvC,cAA8B,EAC9B,SAAkB;;IAElB,MAAM,mBAAmB,GAAG,SAAS;QACnC,CAAC,iCAAM,QAAQ,CAAC,WAAW,CAAC,KAAE,eAAe,EAAE,SAAS,IACxD,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;IAE1B,OAAO;QACL,eAAe,EAAE,MAAA,cAAc,CAAC,eAAe,mCAAI,mBAAmB,CAAC,eAAe;QACtF,eAAe,EAAE,MAAA,cAAc,CAAC,eAAe,mCAAI,mBAAmB,CAAC,eAAe;QACtF,cAAc,EAAE,MAAA,cAAc,CAAC,cAAc,mCAAI,mBAAmB,CAAC,cAAc;QACnF,SAAS,EAAE,MAAA,cAAc,CAAC,SAAS,mCAAI,mBAAmB,CAAC,SAAS;KACrE,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { AppLayoutProps } from './interfaces';\n\nconst defaultContentTypeState: AppLayoutState = {\n navigationOpen: true,\n minContentWidth: 280,\n maxContentWidth: undefined,\n};\n\nconst defaults: Record<AppLayoutProps.ContentType, AppLayoutState> = {\n default: {\n ...defaultContentTypeState,\n },\n dashboard: {\n ...defaultContentTypeState,\n },\n cards: {\n navigationOpen: true,\n minContentWidth: 280,\n maxContentWidth: undefined,\n },\n form: {\n navigationOpen: false,\n minContentWidth: 280,\n maxContentWidth: 800,\n },\n table: {\n navigationOpen: true,\n minContentWidth: 280,\n maxContentWidth: undefined,\n },\n wizard: {\n navigationOpen: false,\n minContentWidth: 280,\n maxContentWidth: 1080,\n },\n};\n\nexport interface AppLayoutState {\n navigationOpen?: boolean;\n toolsOpen?: boolean;\n minContentWidth?: number;\n maxContentWidth?: number \| undefined;\n}\n\nexport function applyDefaults(\n contentType: AppLayoutProps.ContentType,\n stateFromProps: AppLayoutState,\n isRefresh: boolean\n): AppLayoutState {\n const contentTypeDefaults = isRefresh\n ? { ...defaults[contentType], maxContentWidth: undefined }\n : defaults[contentType];\n\n return {\n maxContentWidth: stateFromProps.maxContentWidth ?? contentTypeDefaults.maxContentWidth,\n minContentWidth: stateFromProps.minContentWidth ?? contentTypeDefaults.minContentWidth,\n navigationOpen: stateFromProps.navigationOpen ?? contentTypeDefaults.navigationOpen,\n toolsOpen: stateFromProps.toolsOpen ?? contentTypeDefaults.toolsOpen,\n };\n}\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/drawer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAKtC,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,~~EAAoC~~,MAAM,cAAc,CAAC;~~AAkB5G~~,eAAO,MAAM,MAAM,~~2FAyGlB~~,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,OAAO,EACP,gBAAgB,EAChB,eAAe,GAChB,EAAE,sBAAsB,eAoCxB"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/drawer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAKtC,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAc,MAAM,cAAc,CAAC;AAkBtF,eAAO,MAAM,MAAM,2FAkGlB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,OAAO,EACP,gBAAgB,EAChB,eAAe,GAChB,EAAE,sBAAsB,eAoCxB"}

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

@@ -24,15 +24,9 @@ import styles from './styles.css.js';
 export const Drawer = React.forwardRef(({ contentClassName, toggleClassName, closeClassName, width, type, toggleRefs, topOffset, bottomOffset, ariaLabels, drawersAriaLabels, children, isOpen, isMobile, onToggle, onClick, onLoseFocus, drawers, resizeHandle, }, ref) => {
     const openButtonWrapperRef = useRef(null);
     const { TagName, iconName, getLabels } = togglesConfig[type];
-    const { mainLabel, closeLabel, openLabel } = getLabels(ariaLabels);
+    const { mainLabel, closeLabel, openLabel } = drawersAriaLabels !== null && drawersAriaLabels !== void 0 ? drawersAriaLabels : getLabels(ariaLabels);
     const drawerContentWidthOpen = isMobile ? undefined : width;
     const drawerContentWidth = isOpen ? drawerContentWidthOpen : undefined;
-    const getDrawersLabels = (labels = {}) => ({
-        drawerMainLabel: labels === null || labels === void 0 ? void 0 : labels.content,
-        drawerOpenLabel: labels === null || labels === void 0 ? void 0 : labels.triggerButton,
-        drawerCloseLabel: labels === null || labels === void 0 ? void 0 : labels.closeButton,
-    });
-    const { drawerMainLabel, drawerCloseLabel } = getDrawersLabels(drawersAriaLabels);
     const regularOpenButton = (React.createElement(TagName, { ref: openButtonWrapperRef, "aria-label": mainLabel, className: styles.toggle, "aria-hidden": isOpen },
         React.createElement(ToggleButton, { ref: toggleRefs.toggle, className: toggleClassName, iconName: iconName, ariaLabel: openLabel, onClick: () => onToggle(true), ariaExpanded: false })));
     return (React.createElement("div", { ref: ref, className: clsx(styles.drawer, {
@@ -61,8 +55,8 @@ export const Drawer = React.forwardRef(({ contentClassName, toggleClassName, clo
         React.createElement("div", { style: { width: drawerContentWidth, top: topOffset, bottom: bottomOffset }, className: clsx(styles['drawer-content'], styles['drawer-content-clickable'], contentClassName) },
             !isMobile && regularOpenButton,
             resizeHandle,
-            React.createElement(TagName, { "aria-label": drawers ? drawerMainLabel : mainLabel, "aria-hidden": !isOpen },
-                React.createElement(CloseButton, { ref: toggleRefs.close, className: closeClassName, ariaLabel: drawers ? drawerCloseLabel : closeLabel, onClick: () => {
+            React.createElement(TagName, { "aria-label": mainLabel, "aria-hidden": !isOpen },
+                React.createElement(CloseButton, { ref: toggleRefs.close, className: closeClassName, ariaLabel: closeLabel, onClick: () => {
                         onToggle(false);
                         drawers === null || drawers === void 0 ? void 0 : drawers.onChange({ activeDrawerId: undefined });
                     } }),

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useRef } from 'react';\nimport { ToggleButton, CloseButton, togglesConfig } from '../toggles';\n\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\nimport { DesktopDrawerProps, DrawerTriggersBarProps, DrawerItem, DrawerItemAriaLabels } from './interfaces';\n\n// We are using two landmarks per drawer, i.e. two NAVs and two ASIDEs, because of several\n// known bugs in NVDA that cause focus changes within a container to sometimes not be\n// announced. As a result, we use one region for the open button and one region for the\n// actual drawer content, always hiding the other one when it's not visible.\n// An alternative solution to follow a more classic implementation here to only have one\n// button that triggers the opening/closing of the drawer also did not work due to another\n// series of bugs in NVDA (together with Firefox) which prevent the changed expanded state\n// from being announced.\n// Even with this workaround in place, the announcement of the close button when opening a\n// panel in NVDA is not working correctly. The suspected root cause is one of the bugs below\n// as well.\n// Relevant tickets:\n// * https://github.com/nvaccess/nvda/issues/6606\n// * https://github.com/nvaccess/nvda/issues/5825\n// * https://github.com/nvaccess/nvda/issues/5247\n// * https://github.com/nvaccess/nvda/pull/8869 (reverted PR that was going to fix it)\nexport const Drawer = React.forwardRef(\n (\n {\n contentClassName,\n toggleClassName,\n closeClassName,\n width,\n type,\n toggleRefs,\n topOffset,\n bottomOffset,\n ariaLabels,\n drawersAriaLabels,\n children,\n isOpen,\n isMobile,\n onToggle,\n onClick,\n onLoseFocus,\n drawers,\n resizeHandle,\n }: DesktopDrawerProps,\n ref: React.Ref<HTMLDivElement>\n ) => {\n const openButtonWrapperRef = useRef<HTMLElement \| null>(null);\n const { TagName, iconName, getLabels } = togglesConfig[type];\n const { mainLabel, closeLabel, openLabel } = getLabels(ariaLabels);\n const drawerContentWidthOpen = isMobile ? undefined : width;\n const drawerContentWidth = isOpen ? drawerContentWidthOpen : undefined;\n\n const getDrawersLabels = (labels: DrawerItemAriaLabels = {}) => ({\n drawerMainLabel: labels?.content,\n drawerOpenLabel: labels?.triggerButton,\n drawerCloseLabel: labels?.closeButton,\n });\n const { drawerMainLabel, drawerCloseLabel } = getDrawersLabels(drawersAriaLabels);\n\n const regularOpenButton = (\n <TagName ref={openButtonWrapperRef} aria-label={mainLabel} className={styles.toggle} aria-hidden={isOpen}>\n <ToggleButton\n ref={toggleRefs.toggle}\n className={toggleClassName}\n iconName={iconName}\n ariaLabel={openLabel}\n onClick={() => onToggle(true)}\n ariaExpanded={false}\n />\n </TagName>\n );\n\n return (\n <div\n ref={ref}\n className={clsx(styles.drawer, {\n [styles['drawer-closed']]: !isOpen,\n [testutilStyles['drawer-closed']]: !isOpen,\n [styles['drawer-mobile']]: isMobile,\n })}\n style={{ width: drawerContentWidth }}\n onBlur={\n onLoseFocus\n ? e => {\n if (!e.relatedTarget \|\| !e.currentTarget.contains(e.relatedTarget)) {\n onLoseFocus(e);\n }\n }\n : undefined\n }\n onClick={event => {\n if (onClick) {\n onClick(event);\n }\n if (!isOpen) {\n // to prevent calling onToggle from the drawer when it's called from the toggle button\n if (\n openButtonWrapperRef.current === event.target \|\|\n !openButtonWrapperRef.current?.contains(event.target as Node)\n ) {\n onToggle(true);\n }\n }\n }}\n >\n <div\n style={{ width: drawerContentWidth, top: topOffset, bottom: bottomOffset }}\n className={clsx(styles['drawer-content'], styles['drawer-content-clickable'], contentClassName)}\n >\n {!isMobile && regularOpenButton}\n {resizeHandle}\n <TagName aria-label={drawers ? drawerMainLabel : mainLabel} aria-hidden={!isOpen}>\n <CloseButton\n ref={toggleRefs.close}\n className={closeClassName}\n ariaLabel={drawers ? drawerCloseLabel : closeLabel}\n onClick={() => {\n onToggle(false);\n drawers?.onChange({ activeDrawerId: undefined });\n }}\n />\n {children}\n </TagName>\n </div>\n </div>\n );\n }\n);\n\nexport function DrawerTriggersBar({\n isMobile,\n topOffset,\n bottomOffset,\n drawers,\n contentClassName,\n toggleClassName,\n}: DrawerTriggersBarProps) {\n return (\n <div\n className={clsx(styles.drawer, styles['drawer-closed'], testutilStyles['drawer-closed'], {\n [styles['drawer-mobile']]: isMobile,\n })}\n >\n <div style={{ top: topOffset, bottom: bottomOffset }} className={styles['drawer-content']}>\n {!isMobile && (\n <aside aria-label={drawers?.ariaLabel} className={clsx(styles['drawer-triggers-wrapper'], contentClassName)}>\n {drawers?.items?.map((item: DrawerItem, index: number) => (\n <span\n key={index}\n className={clsx(\n styles['drawer-trigger'],\n drawers.activeDrawerId === item.id && styles['drawer-trigger-active']\n )}\n onClick={() =>\n drawers.onChange({ activeDrawerId: item.id !== drawers.activeDrawerId ? item.id : undefined })\n }\n >\n <ToggleButton\n className={toggleClassName}\n iconName={item.trigger.iconName}\n iconSvg={item.trigger.iconSvg}\n ariaLabel={item.ariaLabels?.triggerButton}\n ariaExpanded={drawers.activeDrawerId !== undefined}\n testId={`awsui-app-layout-trigger-${item.id}`}\n />\n </span>\n ))}\n </aside>\n )}\n </div>\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useRef } from 'react';\nimport { ToggleButton, CloseButton, togglesConfig } from '../toggles';\n\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\nimport { DesktopDrawerProps, DrawerTriggersBarProps, DrawerItem } from './interfaces';\n\n// We are using two landmarks per drawer, i.e. two NAVs and two ASIDEs, because of several\n// known bugs in NVDA that cause focus changes within a container to sometimes not be\n// announced. As a result, we use one region for the open button and one region for the\n// actual drawer content, always hiding the other one when it's not visible.\n// An alternative solution to follow a more classic implementation here to only have one\n// button that triggers the opening/closing of the drawer also did not work due to another\n// series of bugs in NVDA (together with Firefox) which prevent the changed expanded state\n// from being announced.\n// Even with this workaround in place, the announcement of the close button when opening a\n// panel in NVDA is not working correctly. The suspected root cause is one of the bugs below\n// as well.\n// Relevant tickets:\n// * https://github.com/nvaccess/nvda/issues/6606\n// * https://github.com/nvaccess/nvda/issues/5825\n// * https://github.com/nvaccess/nvda/issues/5247\n// * https://github.com/nvaccess/nvda/pull/8869 (reverted PR that was going to fix it)\nexport const Drawer = React.forwardRef(\n (\n {\n contentClassName,\n toggleClassName,\n closeClassName,\n width,\n type,\n toggleRefs,\n topOffset,\n bottomOffset,\n ariaLabels,\n drawersAriaLabels,\n children,\n isOpen,\n isMobile,\n onToggle,\n onClick,\n onLoseFocus,\n drawers,\n resizeHandle,\n }: DesktopDrawerProps,\n ref: React.Ref<HTMLDivElement>\n ) => {\n const openButtonWrapperRef = useRef<HTMLElement \| null>(null);\n const { TagName, iconName, getLabels } = togglesConfig[type];\n const { mainLabel, closeLabel, openLabel } = drawersAriaLabels ?? getLabels(ariaLabels);\n const drawerContentWidthOpen = isMobile ? undefined : width;\n const drawerContentWidth = isOpen ? drawerContentWidthOpen : undefined;\n\n const regularOpenButton = (\n <TagName ref={openButtonWrapperRef} aria-label={mainLabel} className={styles.toggle} aria-hidden={isOpen}>\n <ToggleButton\n ref={toggleRefs.toggle}\n className={toggleClassName}\n iconName={iconName}\n ariaLabel={openLabel}\n onClick={() => onToggle(true)}\n ariaExpanded={false}\n />\n </TagName>\n );\n\n return (\n <div\n ref={ref}\n className={clsx(styles.drawer, {\n [styles['drawer-closed']]: !isOpen,\n [testutilStyles['drawer-closed']]: !isOpen,\n [styles['drawer-mobile']]: isMobile,\n })}\n style={{ width: drawerContentWidth }}\n onBlur={\n onLoseFocus\n ? e => {\n if (!e.relatedTarget \|\| !e.currentTarget.contains(e.relatedTarget)) {\n onLoseFocus(e);\n }\n }\n : undefined\n }\n onClick={event => {\n if (onClick) {\n onClick(event);\n }\n if (!isOpen) {\n // to prevent calling onToggle from the drawer when it's called from the toggle button\n if (\n openButtonWrapperRef.current === event.target \|\|\n !openButtonWrapperRef.current?.contains(event.target as Node)\n ) {\n onToggle(true);\n }\n }\n }}\n >\n <div\n style={{ width: drawerContentWidth, top: topOffset, bottom: bottomOffset }}\n className={clsx(styles['drawer-content'], styles['drawer-content-clickable'], contentClassName)}\n >\n {!isMobile && regularOpenButton}\n {resizeHandle}\n <TagName aria-label={mainLabel} aria-hidden={!isOpen}>\n <CloseButton\n ref={toggleRefs.close}\n className={closeClassName}\n ariaLabel={closeLabel}\n onClick={() => {\n onToggle(false);\n drawers?.onChange({ activeDrawerId: undefined });\n }}\n />\n {children}\n </TagName>\n </div>\n </div>\n );\n }\n);\n\nexport function DrawerTriggersBar({\n isMobile,\n topOffset,\n bottomOffset,\n drawers,\n contentClassName,\n toggleClassName,\n}: DrawerTriggersBarProps) {\n return (\n <div\n className={clsx(styles.drawer, styles['drawer-closed'], testutilStyles['drawer-closed'], {\n [styles['drawer-mobile']]: isMobile,\n })}\n >\n <div style={{ top: topOffset, bottom: bottomOffset }} className={styles['drawer-content']}>\n {!isMobile && (\n <aside aria-label={drawers?.ariaLabel} className={clsx(styles['drawer-triggers-wrapper'], contentClassName)}>\n {drawers?.items?.map((item: DrawerItem, index: number) => (\n <span\n key={index}\n className={clsx(\n styles['drawer-trigger'],\n drawers.activeDrawerId === item.id && styles['drawer-trigger-active']\n )}\n onClick={() =>\n drawers.onChange({ activeDrawerId: item.id !== drawers.activeDrawerId ? item.id : undefined })\n }\n >\n <ToggleButton\n className={toggleClassName}\n iconName={item.trigger.iconName}\n iconSvg={item.trigger.iconSvg}\n ariaLabel={item.ariaLabels?.triggerButton}\n ariaExpanded={drawers.activeDrawerId !== undefined}\n testId={`awsui-app-layout-trigger-${item.id}`}\n />\n </span>\n ))}\n </aside>\n )}\n </div>\n </div>\n );\n}\n"]}

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

@@ -20,7 +20,11 @@ export interface DesktopDrawerProps {
     topOffset: number | undefined;
     bottomOffset: number | undefined;
     ariaLabels: AppLayoutProps.Labels | undefined;
-    drawersAriaLabels?: DrawerItemAriaLabels | undefined;
+    drawersAriaLabels?: {
+        mainLabel: string | undefined;
+        closeLabel: string | undefined;
+        openLabel: string | undefined;
+    };
     children: React.ReactNode;
     type: keyof typeof togglesConfig;
     isMobile: boolean;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["app-layout/drawer/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAElE,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAE3E,MAAM,WAAW,kBAAkB;IACjC,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE;QACV,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC;YAAE,KAAK,IAAI,IAAI,CAAA;SAAE,CAAC,CAAC;QACrC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC;YAAE,KAAK,IAAI,IAAI,CAAA;SAAE,CAAC,CAAC;KACrC,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,UAAU,EAAE,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC;IAC9C,iBAAiB,CAAC,EAAE,~~oBAAoB~~,GAAG,SAAS,CAAC;~~IACrD~~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"}
1	+ {"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["app-layout/drawer/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAElE,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAE3E,MAAM,WAAW,kBAAkB;IACjC,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE;QACV,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC;YAAE,KAAK,IAAI,IAAI,CAAA;SAAE,CAAC,CAAC;QACrC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC;YAAE,KAAK,IAAI,IAAI,CAAA;SAAE,CAAC,CAAC;KACrC,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,UAAU,EAAE,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC;IAC9C,iBAAiB,CAAC,EAAE;QAAE,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;QAAC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;QAAC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAA;KAAE,CAAC;IACrH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,EAAE,MAAM,OAAO,aAAa,CAAC;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAChD,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;QACzB,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;QACnC,QAAQ,EAAE,CAAC,YAAY,EAAE;YAAE,cAAc,EAAE,MAAM,GAAG,SAAS,CAAA;SAAE,KAAK,IAAI,CAAC;KAC1E,CAAC;IACF,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC;AAED,MAAM,WAAW,oBAAqB,SAAQ,kBAAkB;IAC9D,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,QAAQ,EAAE,CAAC,YAAY,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/D,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,MAAM,CAAC;IAC1B,IAAI,EAAE,sBAAsB,CAAC;CAC9B;AAED,MAAM,WAAW,sBAAsB;IACrC,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;QACzB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,QAAQ,EAAE,CAAC,YAAY,EAAE;YAAE,cAAc,EAAE,MAAM,GAAG,SAAS,CAAA;SAAE,KAAK,IAAI,CAAC;QACzE,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;CACH;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,EAAE;QACP,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;QAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KAC3B,CAAC;IACF,UAAU,EAAE,oBAAoB,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,yBAAyB,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACpE;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;QACzB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,QAAQ,CAAC,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAC;QAC7C,QAAQ,CAAC,EAAE,yBAAyB,CAAC;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,EAAE,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;QACnE,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;CACH"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { togglesConfig } from '../toggles';\nimport { AppLayoutProps } from '../interfaces';\nimport { IconProps } from '../../icon/interfaces';\nimport { NonCancelableEventHandler } from '../../internal/events';\n\nimport { DrawerFocusControlRefs } from '../utils/use-drawer-focus-control';\n\nexport interface DesktopDrawerProps {\n contentClassName: string;\n toggleClassName: string;\n closeClassName: string;\n toggleRefs: {\n toggle: React.Ref<{ focus(): void }>;\n close: React.Ref<{ focus(): void }>;\n };\n width: number;\n topOffset: number \| undefined;\n bottomOffset: number \| undefined;\n ariaLabels: AppLayoutProps.Labels \| undefined;\n drawersAriaLabels?: ~~DrawerItemAriaLabels~~ \| undefined;\n children: React.ReactNode;\n type: keyof typeof togglesConfig;\n isMobile: boolean;\n isOpen: boolean;\n onToggle: (isOpen: boolean) => void;\n onClick?: (event: React.MouseEvent) => void;\n onLoseFocus?: (event: React.FocusEvent) => void;\n drawers?: {\n items: Array<DrawerItem>;\n activeDrawerId: string \| undefined;\n onChange: (changeDetail: { activeDrawerId: string \| undefined }) => void;\n };\n resizeHandle?: React.ReactNode;\n}\n\nexport interface ResizableDrawerProps extends DesktopDrawerProps {\n activeDrawer?: DrawerItem;\n onResize: (resizeDetail: { size: number; id: string }) => void;\n size: number;\n getMaxWidth: () => number;\n refs: DrawerFocusControlRefs;\n}\n\nexport interface DrawerTriggersBarProps {\n contentClassName: string;\n toggleClassName: string;\n topOffset: number \| undefined;\n bottomOffset: number \| undefined;\n isMobile: boolean;\n drawers?: {\n items: Array<DrawerItem>;\n activeDrawerId?: string;\n onChange: (changeDetail: { activeDrawerId: string \| undefined }) => void;\n ariaLabel?: string;\n };\n}\n\nexport interface DrawerItemAriaLabels {\n content?: string;\n closeButton?: string;\n triggerButton?: string;\n resizeHandle?: string;\n}\n\nexport interface DrawerItem {\n id: string;\n content: React.ReactNode;\n trigger: {\n iconName?: IconProps.Name;\n iconSvg?: React.ReactNode;\n };\n ariaLabels: DrawerItemAriaLabels;\n resizable?: boolean;\n defaultSize?: number;\n onResize?: NonCancelableEventHandler<{ size: number; id: string }>;\n}\n\nexport interface InternalDrawerProps {\n drawers?: {\n items: Array<DrawerItem>;\n activeDrawerId?: string;\n onChange?: NonCancelableEventHandler<string>;\n onResize?: NonCancelableEventHandler<{ size: number; id: string }>;\n ariaLabel?: string;\n };\n}\n"]}
1	+ {"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { togglesConfig } from '../toggles';\nimport { AppLayoutProps } from '../interfaces';\nimport { IconProps } from '../../icon/interfaces';\nimport { NonCancelableEventHandler } from '../../internal/events';\n\nimport { DrawerFocusControlRefs } from '../utils/use-drawer-focus-control';\n\nexport interface DesktopDrawerProps {\n contentClassName: string;\n toggleClassName: string;\n closeClassName: string;\n toggleRefs: {\n toggle: React.Ref<{ focus(): void }>;\n close: React.Ref<{ focus(): void }>;\n };\n width: number;\n topOffset: number \| undefined;\n bottomOffset: number \| undefined;\n ariaLabels: AppLayoutProps.Labels \| undefined;\n drawersAriaLabels?: { mainLabel: string \| undefined; closeLabel: string \| undefined; openLabel: string \| undefined };\n children: React.ReactNode;\n type: keyof typeof togglesConfig;\n isMobile: boolean;\n isOpen: boolean;\n onToggle: (isOpen: boolean) => void;\n onClick?: (event: React.MouseEvent) => void;\n onLoseFocus?: (event: React.FocusEvent) => void;\n drawers?: {\n items: Array<DrawerItem>;\n activeDrawerId: string \| undefined;\n onChange: (changeDetail: { activeDrawerId: string \| undefined }) => void;\n };\n resizeHandle?: React.ReactNode;\n}\n\nexport interface ResizableDrawerProps extends DesktopDrawerProps {\n activeDrawer?: DrawerItem;\n onResize: (resizeDetail: { size: number; id: string }) => void;\n size: number;\n getMaxWidth: () => number;\n refs: DrawerFocusControlRefs;\n}\n\nexport interface DrawerTriggersBarProps {\n contentClassName: string;\n toggleClassName: string;\n topOffset: number \| undefined;\n bottomOffset: number \| undefined;\n isMobile: boolean;\n drawers?: {\n items: Array<DrawerItem>;\n activeDrawerId?: string;\n onChange: (changeDetail: { activeDrawerId: string \| undefined }) => void;\n ariaLabel?: string;\n };\n}\n\nexport interface DrawerItemAriaLabels {\n content?: string;\n closeButton?: string;\n triggerButton?: string;\n resizeHandle?: string;\n}\n\nexport interface DrawerItem {\n id: string;\n content: React.ReactNode;\n trigger: {\n iconName?: IconProps.Name;\n iconSvg?: React.ReactNode;\n };\n ariaLabels: DrawerItemAriaLabels;\n resizable?: boolean;\n defaultSize?: number;\n onResize?: NonCancelableEventHandler<{ size: number; id: string }>;\n}\n\nexport interface InternalDrawerProps {\n drawers?: {\n items: Array<DrawerItem>;\n activeDrawerId?: string;\n onChange?: NonCancelableEventHandler<string>;\n onResize?: NonCancelableEventHandler<{ size: number; id: string }>;\n ariaLabel?: string;\n };\n}\n"]}

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

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

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

@@ -11,7 +11,7 @@ import testutilStyles from '../test-classes/styles.css.js';
 import ResizeHandler from '../../split-panel/icons/resize-handler';
 import splitPanelStyles from '../../split-panel/styles.css.js';
 export const ResizableDrawer = (_a) => {
-    var _b;
+    var _b, _c, _d, _e;
     var { onResize, size, getMaxWidth, refs, activeDrawer } = _a, props = __rest(_a, ["onResize", "size", "getMaxWidth", "refs", "activeDrawer"]);
     const { isOpen, children, isMobile } = props;
     const MIN_WIDTH = (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.defaultSize) && activeDrawer.defaultSize < 280 ? activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.defaultSize : 280;
@@ -48,6 +48,10 @@ export const ResizableDrawer = (_a) => {
     const resizeHandle = (React.createElement("div", { ref: refs.slider, role: "slider", tabIndex: 0, "aria-label": (_b = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _b === void 0 ? void 0 : _b.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 (React.createElement(Drawer, Object.assign({}, props, { ref: drawerRefObject, resizeHandle: !isMobile &&
-            (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.resizable) && React.createElement("div", { className: splitPanelStyles['slider-wrapper-side'] }, resizeHandle) }), children));
+            (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.resizable) && React.createElement("div", { className: splitPanelStyles['slider-wrapper-side'] }, resizeHandle), drawersAriaLabels: {
+            openLabel: (_c = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _c === void 0 ? void 0 : _c.triggerButton,
+            mainLabel: (_d = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _d === void 0 ? void 0 : _d.content,
+            closeLabel: (_e = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _e === void 0 ? void 0 : _e.closeButton,
+        } }), children));
 };
 //# sourceMappingURL=resizable-drawer.js.map

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,6BAA6B,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAEjE,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,QAAQ,EAAE,eAAe;QACzB,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 '../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"]}
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,6BAA6B,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAEjE,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,QAAQ,EAAE,eAAe;QACzB,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,EAE1G,iBAAiB,EAAE;YACjB,SAAS,EAAE,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,UAAU,0CAAE,aAAa;YAClD,SAAS,EAAE,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,UAAU,0CAAE,OAAO;YAC5C,UAAU,EAAE,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,UAAU,0CAAE,WAAW;SAClD,KAEA,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 '../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 drawersAriaLabels={{\n openLabel: activeDrawer?.ariaLabels?.triggerButton,\n mainLabel: activeDrawer?.ariaLabels?.content,\n closeLabel: activeDrawer?.ariaLabels?.closeButton,\n }}\n >\n {children}\n </Drawer>\n );\n};\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/index.tsx"],"names":[],"mappings":"AAGA,OAAO,~~KAAiF~~,MAAM,OAAO,CAAC;~~AAMtG~~,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;~~AA0C9C~~,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,~~2FAoDd~~,CAAC;~~AAwsBF~~,eAAe,SAAS,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAM7F,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAwC9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,2FA8Bd,CAAC;AA8nBF,eAAe,SAAS,CAAC"}