@cloudscape-design/components-themeable 3.0.350 → 3.0.351
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.
- package/lib/internal/manifest.json +1 -1
- package/lib/internal/scss/app-layout/constants.scss +3 -8
- package/lib/internal/scss/app-layout/drawer/styles.scss +26 -35
- package/lib/internal/scss/app-layout/mobile-toolbar/styles.scss +9 -22
- package/lib/internal/scss/app-layout/toggles/styles.scss +18 -0
- package/lib/internal/template/app-layout/drawer/index.js +6 -5
- package/lib/internal/template/app-layout/drawer/index.js.map +1 -1
- package/lib/internal/template/app-layout/drawer/interfaces.d.ts +6 -3
- package/lib/internal/template/app-layout/drawer/interfaces.d.ts.map +1 -1
- package/lib/internal/template/app-layout/drawer/interfaces.js.map +1 -1
- package/lib/internal/template/app-layout/drawer/styles.css.js +10 -10
- package/lib/internal/template/app-layout/drawer/styles.scoped.css +32 -35
- package/lib/internal/template/app-layout/drawer/styles.selectors.js +10 -10
- package/lib/internal/template/app-layout/mobile-toolbar/index.d.ts.map +1 -1
- package/lib/internal/template/app-layout/mobile-toolbar/index.js +6 -5
- package/lib/internal/template/app-layout/mobile-toolbar/index.js.map +1 -1
- package/lib/internal/template/app-layout/mobile-toolbar/styles.css.js +8 -6
- package/lib/internal/template/app-layout/mobile-toolbar/styles.scoped.css +11 -23
- package/lib/internal/template/app-layout/mobile-toolbar/styles.selectors.js +8 -6
- package/lib/internal/template/app-layout/toggles/index.d.ts +3 -1
- package/lib/internal/template/app-layout/toggles/index.d.ts.map +1 -1
- package/lib/internal/template/app-layout/toggles/index.js +6 -3
- package/lib/internal/template/app-layout/toggles/index.js.map +1 -1
- package/lib/internal/template/app-layout/toggles/interfaces.d.ts +3 -2
- package/lib/internal/template/app-layout/toggles/interfaces.d.ts.map +1 -1
- package/lib/internal/template/app-layout/toggles/interfaces.js.map +1 -1
- package/lib/internal/template/app-layout/toggles/styles.css.js +2 -1
- package/lib/internal/template/app-layout/toggles/styles.scoped.css +31 -1
- package/lib/internal/template/app-layout/toggles/styles.selectors.js +2 -1
- package/lib/internal/template/app-layout/visual-refresh/drawers.d.ts.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/drawers.js +2 -2
- package/lib/internal/template/app-layout/visual-refresh/drawers.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/trigger-button.d.ts +1 -0
- package/lib/internal/template/app-layout/visual-refresh/trigger-button.d.ts.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/trigger-button.js +2 -2
- package/lib/internal/template/app-layout/visual-refresh/trigger-button.js.map +1 -1
- package/lib/internal/template/internal/base-component/styles.scoped.css +0 -11
- package/lib/internal/template/internal/environment.js +1 -1
- package/lib/internal/template/internal/generated/theming/index.cjs +0 -27
- package/lib/internal/template/internal/generated/theming/index.js +0 -27
- package/lib/internal/template/test-utils/dom/app-layout/index.d.ts +1 -0
- package/lib/internal/template/test-utils/dom/app-layout/index.js +3 -0
- package/lib/internal/template/test-utils/dom/app-layout/index.js.map +1 -1
- package/lib/internal/template/test-utils/selectors/app-layout/index.d.ts +1 -0
- package/lib/internal/template/test-utils/selectors/app-layout/index.js +3 -0
- package/lib/internal/template/test-utils/selectors/app-layout/index.js.map +1 -1
- package/lib/internal/template/test-utils/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
|
@@ -8,14 +8,9 @@
|
|
|
8
8
|
|
|
9
9
|
// Toggle should have 40px width, whereas button is 26px wide.
|
|
10
10
|
// 40 - 26 = 14px in total or 7px on each side
|
|
11
|
-
$
|
|
12
|
-
$
|
|
13
|
-
$toggle-padding: $
|
|
14
|
-
|
|
15
|
-
// New styles for when there are drawers
|
|
16
|
-
$drawers-padding-horizontal: 0.6 * styles.$base-size;
|
|
17
|
-
$drawers-padding-vertical: awsui.$space-scaled-xs;
|
|
18
|
-
$drawers-padding: $drawers-padding-vertical $drawers-padding-horizontal;
|
|
11
|
+
$_toggle-padding-horizontal: 0.7 * styles.$base-size;
|
|
12
|
+
$_toggle-padding-vertical: awsui.$space-xxs;
|
|
13
|
+
$toggle-padding: $_toggle-padding-vertical $_toggle-padding-horizontal;
|
|
19
14
|
|
|
20
15
|
$sidebar-size-closed: 4 * styles.$base-size;
|
|
21
16
|
|
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
SPDX-License-Identifier: Apache-2.0
|
|
4
4
|
*/
|
|
5
5
|
@use '../../internal/styles/tokens' as awsui;
|
|
6
|
+
@use '../../internal/styles' as styles;
|
|
7
|
+
@use '../../internal/hooks/focus-visible' as focus-visible;
|
|
6
8
|
@use '../constants' as constants;
|
|
7
9
|
|
|
8
10
|
// should be above sticky notifications
|
|
@@ -29,7 +31,6 @@ $drawer-z-index-mobile: 1001;
|
|
|
29
31
|
}
|
|
30
32
|
&-closed {
|
|
31
33
|
min-width: constants.$sidebar-size-closed;
|
|
32
|
-
cursor: pointer;
|
|
33
34
|
&.drawer-mobile {
|
|
34
35
|
display: none;
|
|
35
36
|
}
|
|
@@ -48,13 +49,11 @@ $drawer-z-index-mobile: 1001;
|
|
|
48
49
|
}
|
|
49
50
|
.drawer-closed > & {
|
|
50
51
|
width: constants.$sidebar-size-closed;
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
&.non-interactive {
|
|
52
|
+
&.drawer-content-clickable {
|
|
53
|
+
cursor: pointer;
|
|
54
|
+
color: awsui.$color-text-interactive-default;
|
|
55
55
|
&:hover {
|
|
56
|
-
background: awsui.$color-background-layout-panel-
|
|
57
|
-
cursor: default;
|
|
56
|
+
background: awsui.$color-background-layout-panel-hover;
|
|
58
57
|
}
|
|
59
58
|
}
|
|
60
59
|
}
|
|
@@ -63,34 +62,26 @@ $drawer-z-index-mobile: 1001;
|
|
|
63
62
|
}
|
|
64
63
|
}
|
|
65
64
|
|
|
66
|
-
.
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
padding: constants.$drawers-padding-vertical awsui.$space-s;
|
|
73
|
-
margin-top: 1px;
|
|
74
|
-
|
|
75
|
-
&:not(:last-child) {
|
|
76
|
-
box-shadow: 0px 1px awsui.$color-shadow-layout-toggle;
|
|
77
|
-
}
|
|
78
|
-
&-drawer {
|
|
79
|
-
&:hover:not(.selected) {
|
|
80
|
-
color: awsui.$color-text-layout-toggle-hover;
|
|
81
|
-
&:not(:last-child) {
|
|
82
|
-
box-shadow: 0px 1px awsui.$color-shadow-layout-toggle;
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
}
|
|
65
|
+
.drawer-triggers-wrapper {
|
|
66
|
+
display: flex;
|
|
67
|
+
flex-direction: column;
|
|
68
|
+
text-align: center;
|
|
69
|
+
align-items: stretch;
|
|
70
|
+
}
|
|
86
71
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
72
|
+
.drawer-trigger {
|
|
73
|
+
padding: constants.$toggle-padding;
|
|
74
|
+
cursor: pointer;
|
|
75
|
+
color: awsui.$color-text-interactive-default;
|
|
76
|
+
&:not(:first-child) {
|
|
77
|
+
border-top: 1px solid awsui.$color-border-layout;
|
|
78
|
+
}
|
|
79
|
+
&:hover {
|
|
80
|
+
color: awsui.$color-text-layout-toggle-hover;
|
|
81
|
+
}
|
|
82
|
+
&-active,
|
|
83
|
+
&-active:hover {
|
|
84
|
+
background-color: awsui.$color-background-layout-toggle-selected-default;
|
|
85
|
+
color: awsui.$color-text-layout-toggle-active;
|
|
95
86
|
}
|
|
96
87
|
}
|
|
@@ -12,7 +12,6 @@
|
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
.mobile-bar {
|
|
15
|
-
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
|
|
16
15
|
position: sticky;
|
|
17
16
|
display: flex;
|
|
18
17
|
align-items: center;
|
|
@@ -32,38 +31,26 @@
|
|
|
32
31
|
margin-right: awsui.$space-m;
|
|
33
32
|
}
|
|
34
33
|
|
|
35
|
-
.mobile-trigger-with-drawers {
|
|
36
|
-
width: constants.$sidebar-size-closed;
|
|
37
|
-
display: flex;
|
|
38
|
-
justify-content: center;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
34
|
.mobile-toggle {
|
|
42
35
|
box-sizing: border-box;
|
|
43
36
|
cursor: pointer;
|
|
44
37
|
z-index: 1;
|
|
45
38
|
padding: constants.$toggle-padding;
|
|
46
39
|
width: constants.$sidebar-size-closed;
|
|
47
|
-
|
|
40
|
+
color: awsui.$color-text-interactive-default;
|
|
41
|
+
&-type-navigation {
|
|
48
42
|
border-right: 1px solid awsui.$color-border-layout;
|
|
49
43
|
}
|
|
50
|
-
|
|
44
|
+
&-type-tools,
|
|
45
|
+
&-type-drawer {
|
|
51
46
|
border-left: 1px solid awsui.$color-border-layout;
|
|
52
47
|
}
|
|
53
|
-
&:hover
|
|
48
|
+
&:hover {
|
|
54
49
|
background: awsui.$color-background-layout-panel-hover;
|
|
55
50
|
}
|
|
51
|
+
}
|
|
56
52
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
padding: 0;
|
|
61
|
-
height: 100%;
|
|
62
|
-
|
|
63
|
-
> .mobile-trigger-with-drawers {
|
|
64
|
-
border-left: 1px solid awsui.$color-border-layout;
|
|
65
|
-
display: flex;
|
|
66
|
-
align-items: center;
|
|
67
|
-
}
|
|
68
|
-
}
|
|
53
|
+
.drawers-container {
|
|
54
|
+
display: flex;
|
|
55
|
+
align-items: stretch;
|
|
69
56
|
}
|
|
@@ -7,6 +7,24 @@
|
|
|
7
7
|
@use '../../internal/styles' as styles;
|
|
8
8
|
@use '../../internal/hooks/focus-visible' as focus-visible;
|
|
9
9
|
|
|
10
|
+
.toggle-button {
|
|
11
|
+
cursor: pointer;
|
|
12
|
+
border: 0;
|
|
13
|
+
// resemble button styles with an extra 1px offset for non-existing here border width
|
|
14
|
+
$padding-vertical: calc(#{awsui.$space-scaled-xxs} + 1px);
|
|
15
|
+
$padding-horizontal: calc(#{awsui.$space-xxs} + 1px);
|
|
16
|
+
padding: $padding-vertical $padding-horizontal;
|
|
17
|
+
background: transparent;
|
|
18
|
+
color: currentColor;
|
|
19
|
+
&:focus {
|
|
20
|
+
outline: none;
|
|
21
|
+
text-decoration: none;
|
|
22
|
+
}
|
|
23
|
+
@include focus-visible.when-visible {
|
|
24
|
+
@include styles.focus-highlight(awsui.$space-button-inline-icon-focus-outline-gutter);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
10
28
|
.close-button {
|
|
11
29
|
position: absolute;
|
|
12
30
|
outline: none;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import React, { useRef } from 'react';
|
|
5
|
-
import {
|
|
5
|
+
import { ToggleButton, CloseButton, togglesConfig } from '../toggles';
|
|
6
6
|
import testutilStyles from '../test-classes/styles.css.js';
|
|
7
7
|
import styles from './styles.css.js';
|
|
8
8
|
// We are using two landmarks per drawer, i.e. two NAVs and two ASIDEs, because of several
|
|
@@ -34,7 +34,7 @@ export const Drawer = React.forwardRef(({ contentClassName, toggleClassName, clo
|
|
|
34
34
|
});
|
|
35
35
|
const { drawerMainLabel, drawerCloseLabel } = getDrawersLabels(drawersAriaLabels);
|
|
36
36
|
const regularOpenButton = (React.createElement(TagName, { ref: openButtonWrapperRef, "aria-label": mainLabel, className: styles.toggle, "aria-hidden": isOpen },
|
|
37
|
-
React.createElement(
|
|
37
|
+
React.createElement(ToggleButton, { ref: toggleRefs.toggle, className: toggleClassName, iconName: iconName, ariaLabel: openLabel, onClick: () => onToggle(true), ariaExpanded: false })));
|
|
38
38
|
return (React.createElement("div", { ref: ref, className: clsx(styles.drawer, {
|
|
39
39
|
[styles['drawer-closed']]: !isOpen,
|
|
40
40
|
[testutilStyles['drawer-closed']]: !isOpen,
|
|
@@ -58,7 +58,7 @@ export const Drawer = React.forwardRef(({ contentClassName, toggleClassName, clo
|
|
|
58
58
|
}
|
|
59
59
|
}
|
|
60
60
|
} },
|
|
61
|
-
React.createElement("div", { style: { width: drawerContentWidth, top: topOffset, bottom: bottomOffset }, className: clsx(styles['drawer-content'], contentClassName) },
|
|
61
|
+
React.createElement("div", { style: { width: drawerContentWidth, top: topOffset, bottom: bottomOffset }, className: clsx(styles['drawer-content'], styles['drawer-content-clickable'], contentClassName) },
|
|
62
62
|
!isMobile && regularOpenButton,
|
|
63
63
|
resizeHandle,
|
|
64
64
|
React.createElement(TagName, { "aria-label": drawers ? drawerMainLabel : mainLabel, "aria-hidden": !isOpen },
|
|
@@ -73,9 +73,10 @@ export function DrawerTriggersBar({ isMobile, topOffset, bottomOffset, drawers,
|
|
|
73
73
|
return (React.createElement("div", { className: clsx(styles.drawer, styles['drawer-closed'], testutilStyles['drawer-closed'], {
|
|
74
74
|
[styles['drawer-mobile']]: isMobile,
|
|
75
75
|
}) },
|
|
76
|
-
React.createElement("div", { style: { top: topOffset, bottom: bottomOffset }, className:
|
|
76
|
+
React.createElement("div", { style: { top: topOffset, bottom: bottomOffset }, className: styles['drawer-content'] }, !isMobile && (React.createElement("aside", { "aria-label": drawers === null || drawers === void 0 ? void 0 : drawers.ariaLabel, className: clsx(styles['drawer-triggers-wrapper'], contentClassName) }, (_a = drawers === null || drawers === void 0 ? void 0 : drawers.items) === null || _a === void 0 ? void 0 : _a.map((item, index) => {
|
|
77
77
|
var _a;
|
|
78
|
-
return (React.createElement(
|
|
78
|
+
return (React.createElement("span", { key: index, className: clsx(styles['drawer-trigger'], drawers.activeDrawerId === item.id && styles['drawer-trigger-active']), onClick: () => drawers.onChange({ activeDrawerId: item.id !== drawers.activeDrawerId ? item.id : undefined }) },
|
|
79
|
+
React.createElement(ToggleButton, { className: toggleClassName, iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, ariaExpanded: drawers.activeDrawerId !== undefined, testId: `awsui-app-layout-trigger-${item.id}` })));
|
|
79
80
|
}))))));
|
|
80
81
|
}
|
|
81
82
|
//# sourceMappingURL=index.js.map
|
|
@@ -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 { AppLayoutButton, 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 <AppLayoutButton\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'], 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\n style={{ top: topOffset, bottom: bottomOffset }}\n className={clsx(styles['drawer-content'], styles['non-interactive'])}\n >\n {!isMobile && (\n <aside aria-label={drawers?.ariaLabel} className={clsx(styles['drawer-triggers'], contentClassName)}>\n {drawers?.items?.map((item: DrawerItem, index: number) => (\n <AppLayoutButton\n className={clsx(\n toggleClassName,\n styles.trigger,\n styles['trigger-drawer'],\n drawers.activeDrawerId === item.id && styles.selected\n )}\n key={`drawer-trigger-${index}`}\n iconName={item.trigger.iconName}\n iconSvg={item.trigger.iconSvg}\n ariaLabel={item.ariaLabels?.triggerButton}\n onClick={() =>\n drawers.onChange({ activeDrawerId: item.id !== drawers.activeDrawerId ? item.id : undefined })\n }\n ariaExpanded={drawers.activeDrawerId !== undefined}\n />\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, 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,5 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { ButtonProps } from '../../button/interfaces';
|
|
3
2
|
import { togglesConfig } from '../toggles';
|
|
4
3
|
import { AppLayoutProps } from '../interfaces';
|
|
5
4
|
import { IconProps } from '../../icon/interfaces';
|
|
@@ -10,8 +9,12 @@ export interface DesktopDrawerProps {
|
|
|
10
9
|
toggleClassName: string;
|
|
11
10
|
closeClassName: string;
|
|
12
11
|
toggleRefs: {
|
|
13
|
-
toggle: React.Ref<
|
|
14
|
-
|
|
12
|
+
toggle: React.Ref<{
|
|
13
|
+
focus(): void;
|
|
14
|
+
}>;
|
|
15
|
+
close: React.Ref<{
|
|
16
|
+
focus(): void;
|
|
17
|
+
}>;
|
|
15
18
|
};
|
|
16
19
|
width: number;
|
|
17
20
|
topOffset: number | undefined;
|
|
@@ -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,
|
|
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,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"}
|
|
@@ -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 {
|
|
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,15 +1,15 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"toggle": "
|
|
5
|
-
"drawer-triggers": "awsui_drawer-
|
|
6
|
-
"drawer": "
|
|
7
|
-
"drawer-mobile": "awsui_drawer-
|
|
8
|
-
"drawer-closed": "awsui_drawer-
|
|
9
|
-
"drawer-content": "awsui_drawer-
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"trigger
|
|
13
|
-
"
|
|
4
|
+
"toggle": "awsui_toggle_1uo6m_1fg2f_97",
|
|
5
|
+
"drawer-triggers": "awsui_drawer-triggers_1uo6m_1fg2f_102",
|
|
6
|
+
"drawer": "awsui_drawer_1uo6m_1fg2f_102",
|
|
7
|
+
"drawer-mobile": "awsui_drawer-mobile_1uo6m_1fg2f_112",
|
|
8
|
+
"drawer-closed": "awsui_drawer-closed_1uo6m_1fg2f_115",
|
|
9
|
+
"drawer-content": "awsui_drawer-content_1uo6m_1fg2f_122",
|
|
10
|
+
"drawer-content-clickable": "awsui_drawer-content-clickable_1uo6m_1fg2f_137",
|
|
11
|
+
"drawer-triggers-wrapper": "awsui_drawer-triggers-wrapper_1uo6m_1fg2f_148",
|
|
12
|
+
"drawer-trigger": "awsui_drawer-trigger_1uo6m_1fg2f_102",
|
|
13
|
+
"drawer-trigger-active": "awsui_drawer-trigger-active_1uo6m_1fg2f_166"
|
|
14
14
|
};
|
|
15
15
|
|
|
@@ -94,79 +94,76 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
94
94
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
95
95
|
SPDX-License-Identifier: Apache-2.0
|
|
96
96
|
*/
|
|
97
|
-
.
|
|
97
|
+
.awsui_toggle_1uo6m_1fg2f_97:not(#\9) {
|
|
98
98
|
box-sizing: border-box;
|
|
99
99
|
padding: var(--space-xxs-xx079q, 4px) 7px;
|
|
100
100
|
}
|
|
101
101
|
|
|
102
|
-
.awsui_drawer-
|
|
102
|
+
.awsui_drawer-triggers_1uo6m_1fg2f_102:not(#\9) {
|
|
103
103
|
box-sizing: border-box;
|
|
104
104
|
}
|
|
105
105
|
|
|
106
|
-
.
|
|
106
|
+
.awsui_drawer_1uo6m_1fg2f_102:not(#\9) {
|
|
107
107
|
flex-shrink: 0;
|
|
108
108
|
position: relative;
|
|
109
109
|
word-wrap: break-word;
|
|
110
110
|
box-shadow: var(--shadow-panel-5eimfm, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15));
|
|
111
111
|
}
|
|
112
|
-
.
|
|
112
|
+
.awsui_drawer_1uo6m_1fg2f_102:not(#\9):not(.awsui_drawer-mobile_1uo6m_1fg2f_112) {
|
|
113
113
|
z-index: 830;
|
|
114
114
|
}
|
|
115
|
-
.awsui_drawer-
|
|
115
|
+
.awsui_drawer-closed_1uo6m_1fg2f_115:not(#\9) {
|
|
116
116
|
min-width: 40px;
|
|
117
|
-
cursor: pointer;
|
|
118
117
|
}
|
|
119
|
-
.awsui_drawer-
|
|
118
|
+
.awsui_drawer-closed_1uo6m_1fg2f_115.awsui_drawer-mobile_1uo6m_1fg2f_112:not(#\9) {
|
|
120
119
|
display: none;
|
|
121
120
|
}
|
|
122
121
|
|
|
123
|
-
.awsui_drawer-
|
|
122
|
+
.awsui_drawer-content_1uo6m_1fg2f_122:not(#\9) {
|
|
124
123
|
position: fixed;
|
|
125
124
|
overflow: auto;
|
|
126
125
|
background-color: var(--color-background-layout-panel-content-jx4wcr, #ffffff);
|
|
127
126
|
}
|
|
128
|
-
.awsui_drawer-
|
|
127
|
+
.awsui_drawer-mobile_1uo6m_1fg2f_112 > .awsui_drawer-content_1uo6m_1fg2f_122:not(#\9) {
|
|
129
128
|
z-index: 1001;
|
|
130
129
|
top: 0;
|
|
131
130
|
bottom: 0;
|
|
132
131
|
left: 0;
|
|
133
132
|
right: 0;
|
|
134
133
|
}
|
|
135
|
-
.awsui_drawer-
|
|
134
|
+
.awsui_drawer-closed_1uo6m_1fg2f_115 > .awsui_drawer-content_1uo6m_1fg2f_122:not(#\9) {
|
|
136
135
|
width: 40px;
|
|
137
136
|
}
|
|
138
|
-
.awsui_drawer-
|
|
139
|
-
|
|
137
|
+
.awsui_drawer-closed_1uo6m_1fg2f_115 > .awsui_drawer-content_1uo6m_1fg2f_122.awsui_drawer-content-clickable_1uo6m_1fg2f_137:not(#\9) {
|
|
138
|
+
cursor: pointer;
|
|
139
|
+
color: var(--color-text-interactive-default-9x433a, #545b64);
|
|
140
140
|
}
|
|
141
|
-
.awsui_drawer-
|
|
142
|
-
background: var(--color-background-layout-panel-
|
|
143
|
-
cursor: default;
|
|
141
|
+
.awsui_drawer-closed_1uo6m_1fg2f_115 > .awsui_drawer-content_1uo6m_1fg2f_122.awsui_drawer-content-clickable_1uo6m_1fg2f_137:not(#\9):hover {
|
|
142
|
+
background: var(--color-background-layout-panel-hover-yn48lk, #eaeded);
|
|
144
143
|
}
|
|
145
|
-
.awsui_drawer-
|
|
144
|
+
.awsui_drawer-content_1uo6m_1fg2f_122 > [aria-hidden=true]:not(#\9) {
|
|
146
145
|
display: none;
|
|
147
146
|
}
|
|
148
147
|
|
|
149
|
-
.awsui_drawer-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
padding: var(--space-scaled-xs-sg3tfb, 8px) var(--space-s-o95p2n, 12px);
|
|
155
|
-
margin-top: 1px;
|
|
156
|
-
}
|
|
157
|
-
.awsui_drawer-content_1uo6m_dsezo_123 > .awsui_drawer-triggers_1uo6m_dsezo_102 > .awsui_trigger_1uo6m_dsezo_149:not(#\9):not(:last-child) {
|
|
158
|
-
box-shadow: 0px 1px var(--color-shadow-layout-toggle-67ezos, #d5dbdb);
|
|
159
|
-
}
|
|
160
|
-
.awsui_drawer-content_1uo6m_dsezo_123 > .awsui_drawer-triggers_1uo6m_dsezo_102 > .awsui_trigger-drawer_1uo6m_dsezo_160:not(#\9):hover:not(.awsui_selected_1uo6m_dsezo_160) {
|
|
161
|
-
color: var(--color-text-layout-toggle-hover-x3sh37, #0073bb);
|
|
148
|
+
.awsui_drawer-triggers-wrapper_1uo6m_1fg2f_148:not(#\9) {
|
|
149
|
+
display: flex;
|
|
150
|
+
flex-direction: column;
|
|
151
|
+
text-align: center;
|
|
152
|
+
align-items: stretch;
|
|
162
153
|
}
|
|
163
|
-
|
|
164
|
-
|
|
154
|
+
|
|
155
|
+
.awsui_drawer-trigger_1uo6m_1fg2f_102:not(#\9) {
|
|
156
|
+
padding: var(--space-xxs-xx079q, 4px) 7px;
|
|
157
|
+
cursor: pointer;
|
|
158
|
+
color: var(--color-text-interactive-default-9x433a, #545b64);
|
|
159
|
+
}
|
|
160
|
+
.awsui_drawer-trigger_1uo6m_1fg2f_102:not(#\9):not(:first-child) {
|
|
161
|
+
border-top: 1px solid var(--color-border-layout-rmnayj, #d5dbdb);
|
|
162
|
+
}
|
|
163
|
+
.awsui_drawer-trigger_1uo6m_1fg2f_102:not(#\9):hover {
|
|
164
|
+
color: var(--color-text-layout-toggle-hover-x3sh37, #0073bb);
|
|
165
165
|
}
|
|
166
|
-
.awsui_drawer-
|
|
166
|
+
.awsui_drawer-trigger-active_1uo6m_1fg2f_166:not(#\9), .awsui_drawer-trigger-active_1uo6m_1fg2f_166:not(#\9):hover {
|
|
167
167
|
background-color: var(--color-background-layout-toggle-selected-default-ksjxnl, #0073bb);
|
|
168
|
-
border-top: 1px solid var(--color-background-layout-toggle-selected-default-ksjxnl, #0073bb);
|
|
169
|
-
box-shadow: none;
|
|
170
168
|
color: var(--color-text-layout-toggle-active-xajvuf, #ffffff);
|
|
171
|
-
margin: 0;
|
|
172
169
|
}
|
|
@@ -2,15 +2,15 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"toggle": "
|
|
6
|
-
"drawer-triggers": "awsui_drawer-
|
|
7
|
-
"drawer": "
|
|
8
|
-
"drawer-mobile": "awsui_drawer-
|
|
9
|
-
"drawer-closed": "awsui_drawer-
|
|
10
|
-
"drawer-content": "awsui_drawer-
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"trigger
|
|
14
|
-
"
|
|
5
|
+
"toggle": "awsui_toggle_1uo6m_1fg2f_97",
|
|
6
|
+
"drawer-triggers": "awsui_drawer-triggers_1uo6m_1fg2f_102",
|
|
7
|
+
"drawer": "awsui_drawer_1uo6m_1fg2f_102",
|
|
8
|
+
"drawer-mobile": "awsui_drawer-mobile_1uo6m_1fg2f_112",
|
|
9
|
+
"drawer-closed": "awsui_drawer-closed_1uo6m_1fg2f_115",
|
|
10
|
+
"drawer-content": "awsui_drawer-content_1uo6m_1fg2f_122",
|
|
11
|
+
"drawer-content-clickable": "awsui_drawer-content-clickable_1uo6m_1fg2f_137",
|
|
12
|
+
"drawer-triggers-wrapper": "awsui_drawer-triggers-wrapper_1uo6m_1fg2f_148",
|
|
13
|
+
"drawer-trigger": "awsui_drawer-trigger_1uo6m_1fg2f_102",
|
|
14
|
+
"drawer-trigger-active": "awsui_drawer-trigger-active_1uo6m_1fg2f_166"
|
|
15
15
|
};
|
|
16
16
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/mobile-toolbar/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAqClD,UAAU,kBAAkB;IAC1B,YAAY,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC,WAAW,EAAE,OAAO,GAAG,SAAS,CAAC;IACjC,UAAU,EAAE;QACV,UAAU,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QACvC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;KACnC,CAAC;IACF,cAAc,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC;IACnC,YAAY,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,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;QACzE,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;CACH;AAED,wBAAgB,aAAa,CAAC,EAC5B,UAAe,EACf,UAAU,EACV,SAAS,EACT,cAAc,EACd,SAAS,EACT,YAAoB,EACpB,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,OAAO,EACP,YAAY,GACb,EAAE,kBAAkB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/mobile-toolbar/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAqClD,UAAU,kBAAkB;IAC1B,YAAY,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC,WAAW,EAAE,OAAO,GAAG,SAAS,CAAC;IACjC,UAAU,EAAE;QACV,UAAU,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QACvC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;KACnC,CAAC;IACF,cAAc,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC;IACnC,YAAY,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,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;QACzE,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;CACH;AAED,wBAAgB,aAAa,CAAC,EAC5B,UAAe,EACf,UAAU,EACV,SAAS,EACT,cAAc,EACd,SAAS,EACT,YAAoB,EACpB,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,OAAO,EACP,YAAY,GACb,EAAE,kBAAkB,eA8DpB"}
|
|
@@ -2,15 +2,15 @@
|
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import React, { useEffect } from 'react';
|
|
5
|
-
import {
|
|
5
|
+
import { ToggleButton, togglesConfig } from '../toggles';
|
|
6
6
|
import styles from './styles.css.js';
|
|
7
7
|
import sharedStyles from '../styles.css.js';
|
|
8
8
|
import testutilStyles from '../test-classes/styles.css.js';
|
|
9
9
|
const MobileToggle = React.forwardRef(({ className, ariaLabels, type, disabled, onClick }, ref) => {
|
|
10
10
|
const { TagName, iconName, getLabels } = togglesConfig[type];
|
|
11
11
|
const { mainLabel, openLabel } = getLabels(ariaLabels);
|
|
12
|
-
return (React.createElement(TagName, { className: clsx(styles['mobile-toggle']), "aria-hidden": disabled, "aria-label": mainLabel, onClick: e => e.target === e.currentTarget && onClick() },
|
|
13
|
-
React.createElement(
|
|
12
|
+
return (React.createElement(TagName, { className: clsx(styles['mobile-toggle'], styles[`mobile-toggle-type-${type}`]), "aria-hidden": disabled, "aria-label": mainLabel, onClick: e => e.target === e.currentTarget && onClick() },
|
|
13
|
+
React.createElement(ToggleButton, { ref: ref, className: className, iconName: iconName, onClick: onClick, ariaLabel: openLabel, disabled: disabled, ariaExpanded: disabled })));
|
|
14
14
|
});
|
|
15
15
|
export function MobileToolbar({ ariaLabels = {}, toggleRefs, topOffset, navigationHide, toolsHide, anyPanelOpen = false, unfocusable, children, onNavigationOpen, onToolsOpen, drawers, mobileBarRef, }) {
|
|
16
16
|
useEffect(() => {
|
|
@@ -28,9 +28,10 @@ export function MobileToolbar({ ariaLabels = {}, toggleRefs, topOffset, navigati
|
|
|
28
28
|
!navigationHide && (React.createElement(MobileToggle, { ref: toggleRefs.navigation, type: "navigation", className: testutilStyles['navigation-toggle'], ariaLabels: ariaLabels, disabled: anyPanelOpen, onClick: onNavigationOpen })),
|
|
29
29
|
React.createElement("div", { className: styles['mobile-bar-breadcrumbs'] }, children && React.createElement("div", { className: testutilStyles.breadcrumbs }, children)),
|
|
30
30
|
!toolsHide && !drawers && (React.createElement(MobileToggle, { ref: toggleRefs.tools, type: "tools", className: testutilStyles['tools-toggle'], ariaLabels: ariaLabels, disabled: anyPanelOpen, onClick: onToolsOpen })),
|
|
31
|
-
drawers && (React.createElement("aside", { "aria-label": drawers.ariaLabel, className: clsx(styles['
|
|
31
|
+
drawers && (React.createElement("aside", { "aria-label": drawers.ariaLabel, className: clsx(styles['drawers-container'], testutilStyles['drawers-mobile-triggers-container']) }, drawers.items.map((item, index) => {
|
|
32
32
|
var _a;
|
|
33
|
-
return (React.createElement(
|
|
33
|
+
return (React.createElement("span", { className: clsx(styles['mobile-toggle'], styles['mobile-toggle-type-drawer']), key: index },
|
|
34
|
+
React.createElement(ToggleButton, { className: testutilStyles['drawers-trigger'], iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, onClick: () => drawers.onChange({ activeDrawerId: item.id }), ariaExpanded: drawers.activeDrawerId !== undefined, testId: `awsui-app-layout-trigger-${item.id}` })));
|
|
34
35
|
})))));
|
|
35
36
|
}
|
|
36
37
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["app-layout/mobile-toolbar/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIzC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["app-layout/mobile-toolbar/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, { useEffect } from 'react';\nimport { ButtonProps } from '../../button/interfaces';\nimport { AppLayoutProps } from '../interfaces';\nimport { DrawerItem } from '../drawer/interfaces';\nimport { ToggleButton, togglesConfig } from '../toggles';\nimport styles from './styles.css.js';\nimport sharedStyles from '../styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\ninterface MobileToggleProps {\n className?: string;\n ariaLabels?: AppLayoutProps.Labels;\n type: keyof typeof togglesConfig;\n disabled?: boolean;\n onClick: () => void;\n}\nconst MobileToggle = React.forwardRef(\n ({ className, ariaLabels, type, disabled, onClick }: MobileToggleProps, ref: React.Ref<ButtonProps.Ref>) => {\n const { TagName, iconName, getLabels } = togglesConfig[type];\n const { mainLabel, openLabel } = getLabels(ariaLabels);\n\n return (\n <TagName\n className={clsx(styles['mobile-toggle'], styles[`mobile-toggle-type-${type}`])}\n aria-hidden={disabled}\n aria-label={mainLabel}\n onClick={e => e.target === e.currentTarget && onClick()}\n >\n <ToggleButton\n ref={ref}\n className={className}\n iconName={iconName}\n onClick={onClick}\n ariaLabel={openLabel}\n disabled={disabled}\n ariaExpanded={disabled}\n />\n </TagName>\n );\n }\n);\ninterface MobileToolbarProps {\n anyPanelOpen: boolean | undefined;\n unfocusable: boolean | undefined;\n toggleRefs: {\n navigation: React.Ref<ButtonProps.Ref>;\n tools: React.Ref<ButtonProps.Ref>;\n };\n navigationHide: boolean | undefined;\n toolsHide: boolean | undefined;\n topOffset?: number;\n ariaLabels?: AppLayoutProps.Labels;\n mobileBarRef: React.Ref<HTMLDivElement>;\n children: React.ReactNode;\n onNavigationOpen: () => void;\n onToolsOpen: () => void;\n drawers?: {\n items: Array<DrawerItem>;\n activeDrawerId: string | undefined;\n onChange: (changeDetail: { activeDrawerId: string | undefined }) => void;\n ariaLabel?: string;\n };\n}\n\nexport function MobileToolbar({\n ariaLabels = {},\n toggleRefs,\n topOffset,\n navigationHide,\n toolsHide,\n anyPanelOpen = false,\n unfocusable,\n children,\n onNavigationOpen,\n onToolsOpen,\n drawers,\n mobileBarRef,\n}: MobileToolbarProps) {\n useEffect(() => {\n if (anyPanelOpen) {\n document.body.classList.add(styles['block-body-scroll']);\n return () => {\n document.body.classList.remove(styles['block-body-scroll']);\n };\n } else {\n document.body.classList.remove(styles['block-body-scroll']);\n }\n }, [anyPanelOpen]);\n return (\n <div\n ref={mobileBarRef}\n className={clsx(styles['mobile-bar'], unfocusable && sharedStyles.unfocusable)}\n style={{ top: topOffset }}\n >\n {!navigationHide && (\n <MobileToggle\n ref={toggleRefs.navigation}\n type=\"navigation\"\n className={testutilStyles['navigation-toggle']}\n ariaLabels={ariaLabels}\n disabled={anyPanelOpen}\n onClick={onNavigationOpen}\n />\n )}\n <div className={styles['mobile-bar-breadcrumbs']}>\n {children && <div className={testutilStyles.breadcrumbs}>{children}</div>}\n </div>\n {!toolsHide && !drawers && (\n <MobileToggle\n ref={toggleRefs.tools}\n type=\"tools\"\n className={testutilStyles['tools-toggle']}\n ariaLabels={ariaLabels}\n disabled={anyPanelOpen}\n onClick={onToolsOpen}\n />\n )}\n {drawers && (\n <aside\n aria-label={drawers.ariaLabel}\n className={clsx(styles['drawers-container'], testutilStyles['drawers-mobile-triggers-container'])}\n >\n {drawers.items.map((item: DrawerItem, index: number) => (\n <span className={clsx(styles['mobile-toggle'], styles['mobile-toggle-type-drawer'])} key={index}>\n <ToggleButton\n className={testutilStyles['drawers-trigger']}\n iconName={item.trigger.iconName}\n iconSvg={item.trigger.iconSvg}\n ariaLabel={item.ariaLabels?.triggerButton}\n onClick={() => drawers.onChange({ activeDrawerId: item.id })}\n ariaExpanded={drawers.activeDrawerId !== undefined}\n testId={`awsui-app-layout-trigger-${item.id}`}\n />\n </span>\n ))}\n </aside>\n )}\n </div>\n );\n}\n"]}
|