@cloudscape-design/components-themeable 3.0.1310 → 3.0.1312
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/visual-refresh/drawers.scss +16 -0
- package/lib/internal/scss/app-layout/visual-refresh/navigation.scss +1 -1
- package/lib/internal/scss/app-layout/visual-refresh/tools.scss +4 -0
- package/lib/internal/scss/app-layout/visual-refresh-toolbar/drawer/styles.scss +1 -1
- package/lib/internal/scss/app-layout/visual-refresh-toolbar/navigation/styles.scss +1 -1
- package/lib/internal/scss/button-dropdown/styles.scss +4 -0
- package/lib/internal/scss/expandable-section/styles.scss +17 -0
- package/lib/internal/scss/internal/components/button-trigger/styles.scss +7 -0
- package/lib/internal/scss/internal/components/drag-handle/styles.scss +5 -1
- package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +1 -1
- package/lib/internal/scss/status-indicator/styles.scss +36 -0
- package/lib/internal/scss/table/header-cell/styles.scss +1 -1
- package/lib/internal/scss/table/styles.scss +6 -0
- package/lib/internal/scss/tree-view/tree-item/styles.scss +10 -0
- package/lib/internal/template/app-layout/runtime-drawer/index.js +1 -1
- package/lib/internal/template/app-layout/runtime-drawer/index.js.map +1 -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 +3 -0
- package/lib/internal/template/app-layout/visual-refresh/drawers.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/styles.css.js +87 -86
- package/lib/internal/template/app-layout/visual-refresh/styles.scoped.css +176 -164
- package/lib/internal/template/app-layout/visual-refresh/styles.selectors.js +87 -86
- package/lib/internal/template/app-layout/visual-refresh/tools.d.ts.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/tools.js +2 -0
- package/lib/internal/template/app-layout/visual-refresh/tools.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.css.js +32 -32
- package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.scoped.css +84 -84
- package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.selectors.js +32 -32
- package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.css.js +4 -4
- package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.scoped.css +6 -6
- package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.selectors.js +4 -4
- package/lib/internal/template/breadcrumb-group/implementation.d.ts.map +1 -1
- package/lib/internal/template/breadcrumb-group/implementation.js +2 -2
- package/lib/internal/template/breadcrumb-group/implementation.js.map +1 -1
- package/lib/internal/template/breadcrumb-group/item/item.d.ts.map +1 -1
- package/lib/internal/template/breadcrumb-group/item/item.js +2 -1
- package/lib/internal/template/breadcrumb-group/item/item.js.map +1 -1
- package/lib/internal/template/button/internal.d.ts +3 -0
- package/lib/internal/template/button/internal.d.ts.map +1 -1
- package/lib/internal/template/button/internal.js +2 -2
- package/lib/internal/template/button/internal.js.map +1 -1
- package/lib/internal/template/button-dropdown/internal.d.ts.map +1 -1
- package/lib/internal/template/button-dropdown/internal.js +4 -3
- package/lib/internal/template/button-dropdown/internal.js.map +1 -1
- package/lib/internal/template/button-dropdown/styles.css.js +22 -21
- package/lib/internal/template/button-dropdown/styles.scoped.css +33 -29
- package/lib/internal/template/button-dropdown/styles.selectors.js +22 -21
- package/lib/internal/template/button-group/icon-toggle-button-item.js +1 -1
- package/lib/internal/template/button-group/icon-toggle-button-item.js.map +1 -1
- package/lib/internal/template/dropdown/internal.d.ts.map +1 -1
- package/lib/internal/template/dropdown/internal.js +14 -2
- package/lib/internal/template/dropdown/internal.js.map +1 -1
- package/lib/internal/template/expandable-section/expandable-section-header.d.ts.map +1 -1
- package/lib/internal/template/expandable-section/expandable-section-header.js +5 -5
- package/lib/internal/template/expandable-section/expandable-section-header.js.map +1 -1
- package/lib/internal/template/expandable-section/styles.css.js +36 -35
- package/lib/internal/template/expandable-section/styles.scoped.css +81 -66
- package/lib/internal/template/expandable-section/styles.selectors.js +36 -35
- package/lib/internal/template/icon/generated/icons.d.ts +1 -0
- package/lib/internal/template/icon/generated/icons.d.ts.map +1 -1
- package/lib/internal/template/icon/generated/icons.js +2 -0
- package/lib/internal/template/icon/generated/icons.js.map +1 -1
- package/lib/internal/template/icon-provider/interfaces.d.ts +1 -1
- package/lib/internal/template/icon-provider/interfaces.d.ts.map +1 -1
- package/lib/internal/template/icon-provider/interfaces.js.map +1 -1
- package/lib/internal/template/internal/base-component/styles.scoped.css +7 -1
- package/lib/internal/template/internal/components/button-trigger/index.d.ts.map +1 -1
- package/lib/internal/template/internal/components/button-trigger/index.js +3 -2
- package/lib/internal/template/internal/components/button-trigger/index.js.map +1 -1
- package/lib/internal/template/internal/components/button-trigger/styles.css.js +15 -14
- package/lib/internal/template/internal/components/button-trigger/styles.scoped.css +35 -29
- package/lib/internal/template/internal/components/button-trigger/styles.selectors.js +15 -14
- package/lib/internal/template/internal/components/drag-handle/styles.css.js +14 -14
- package/lib/internal/template/internal/components/drag-handle/styles.scoped.css +20 -19
- package/lib/internal/template/internal/components/drag-handle/styles.selectors.js +14 -14
- package/lib/internal/template/internal/components/drag-handle-wrapper/index.d.ts.map +1 -1
- package/lib/internal/template/internal/components/drag-handle-wrapper/index.js +6 -3
- package/lib/internal/template/internal/components/drag-handle-wrapper/index.js.map +1 -1
- package/lib/internal/template/internal/components/drag-handle-wrapper/portal-overlay.d.ts +2 -1
- package/lib/internal/template/internal/components/drag-handle-wrapper/portal-overlay.d.ts.map +1 -1
- package/lib/internal/template/internal/components/drag-handle-wrapper/portal-overlay.js +2 -2
- package/lib/internal/template/internal/components/drag-handle-wrapper/portal-overlay.js.map +1 -1
- package/lib/internal/template/internal/components/expand-toggle-button/index.js +2 -2
- package/lib/internal/template/internal/components/expand-toggle-button/index.js.map +1 -1
- package/lib/internal/template/internal/environment.js +2 -2
- package/lib/internal/template/internal/environment.json +2 -2
- package/lib/internal/template/internal/generated/styles/tokens.d.ts +1 -0
- package/lib/internal/template/internal/generated/styles/tokens.js +1 -0
- package/lib/internal/template/internal/generated/theming/index.cjs +33 -0
- package/lib/internal/template/internal/generated/theming/index.cjs.d.ts +9 -0
- package/lib/internal/template/internal/generated/theming/index.d.ts +9 -0
- package/lib/internal/template/internal/generated/theming/index.js +33 -0
- package/lib/internal/template/internal/hooks/use-mouse-down-target.js +2 -2
- package/lib/internal/template/internal/hooks/use-mouse-down-target.js.map +1 -1
- package/lib/internal/template/internal/hooks/use-portal-mode-classes/index.d.ts.map +1 -1
- package/lib/internal/template/internal/hooks/use-portal-mode-classes/index.js +4 -2
- package/lib/internal/template/internal/hooks/use-portal-mode-classes/index.js.map +1 -1
- package/lib/internal/template/internal/hooks/use-visual-mode/index.d.ts +1 -0
- package/lib/internal/template/internal/hooks/use-visual-mode/index.d.ts.map +1 -1
- package/lib/internal/template/internal/hooks/use-visual-mode/index.js +2 -1
- package/lib/internal/template/internal/hooks/use-visual-mode/index.js.map +1 -1
- package/lib/internal/template/status-indicator/internal.d.ts.map +1 -1
- package/lib/internal/template/status-indicator/internal.js +4 -3
- package/lib/internal/template/status-indicator/internal.js.map +1 -1
- package/lib/internal/template/status-indicator/styles.css.js +25 -24
- package/lib/internal/template/status-indicator/styles.scoped.css +75 -40
- package/lib/internal/template/status-indicator/styles.selectors.js +25 -24
- package/lib/internal/template/table/header-cell/group-header-cell.d.ts.map +1 -1
- package/lib/internal/template/table/header-cell/group-header-cell.js +3 -15
- package/lib/internal/template/table/header-cell/group-header-cell.js.map +1 -1
- package/lib/internal/template/table/header-cell/styles.css.js +33 -33
- package/lib/internal/template/table/header-cell/styles.scoped.css +73 -73
- package/lib/internal/template/table/header-cell/styles.selectors.js +33 -33
- package/lib/internal/template/table/header-cell/th-element.d.ts +6 -5
- package/lib/internal/template/table/header-cell/th-element.d.ts.map +1 -1
- package/lib/internal/template/table/header-cell/th-element.js +4 -3
- package/lib/internal/template/table/header-cell/th-element.js.map +1 -1
- package/lib/internal/template/table/interfaces.d.ts +11 -0
- package/lib/internal/template/table/interfaces.d.ts.map +1 -1
- package/lib/internal/template/table/interfaces.js.map +1 -1
- package/lib/internal/template/table/internal.d.ts.map +1 -1
- package/lib/internal/template/table/internal.js +104 -99
- package/lib/internal/template/table/internal.js.map +1 -1
- package/lib/internal/template/table/skeleton-rows.d.ts +23 -0
- package/lib/internal/template/table/skeleton-rows.d.ts.map +1 -0
- package/lib/internal/template/table/skeleton-rows.js +33 -0
- package/lib/internal/template/table/skeleton-rows.js.map +1 -0
- package/lib/internal/template/table/sticky-columns/use-sticky-columns.d.ts +2 -1
- package/lib/internal/template/table/sticky-columns/use-sticky-columns.d.ts.map +1 -1
- package/lib/internal/template/table/sticky-columns/use-sticky-columns.js +31 -7
- package/lib/internal/template/table/sticky-columns/use-sticky-columns.js.map +1 -1
- package/lib/internal/template/table/styles.css.js +36 -35
- package/lib/internal/template/table/styles.scoped.css +48 -42
- package/lib/internal/template/table/styles.selectors.js +36 -35
- package/lib/internal/template/table/thead.d.ts.map +1 -1
- package/lib/internal/template/table/thead.js +1 -1
- package/lib/internal/template/table/thead.js.map +1 -1
- package/lib/internal/template/test-utils/dom/table/index.js +1 -1
- package/lib/internal/template/test-utils/dom/table/index.js.map +1 -1
- package/lib/internal/template/test-utils/selectors/table/index.js +1 -1
- package/lib/internal/template/test-utils/selectors/table/index.js.map +1 -1
- package/lib/internal/template/theming/index.d.ts +2 -0
- package/lib/internal/template/theming/index.d.ts.map +1 -1
- package/lib/internal/template/theming/index.js +55 -0
- package/lib/internal/template/theming/index.js.map +1 -1
- package/lib/internal/template/tree-view/tree-item/index.d.ts.map +1 -1
- package/lib/internal/template/tree-view/tree-item/index.js +2 -1
- package/lib/internal/template/tree-view/tree-item/index.js.map +1 -1
- package/lib/internal/template/tree-view/tree-item/styles.css.js +10 -9
- package/lib/internal/template/tree-view/tree-item/styles.scoped.css +19 -12
- package/lib/internal/template/tree-view/tree-item/styles.selectors.js +10 -9
- package/package.json +1 -1
|
@@ -22,6 +22,12 @@
|
|
|
22
22
|
background-color: awsui.$color-background-container-content;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
+
&.one-theme {
|
|
26
|
+
&.has-open-drawer {
|
|
27
|
+
background-color: awsui.$color-background-layout-panel-content;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
25
31
|
@include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
|
|
26
32
|
max-inline-size: calc(
|
|
27
33
|
var(#{custom-props.$layoutWidth}) - var(#{custom-props.$mainOffsetLeft}) - var(
|
|
@@ -66,6 +72,12 @@
|
|
|
66
72
|
background-color: awsui.$color-background-container-content;
|
|
67
73
|
}
|
|
68
74
|
|
|
75
|
+
&.one-theme {
|
|
76
|
+
&.has-multiple-triggers.has-open-drawer {
|
|
77
|
+
background-color: awsui.$color-background-layout-panel-content;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
69
81
|
&:not(.has-multiple-triggers):not(.has-open-drawer) {
|
|
70
82
|
inline-size: calc((awsui.$space-layout-toggle-padding * 2) + awsui.$space-layout-toggle-diameter);
|
|
71
83
|
}
|
|
@@ -125,6 +137,10 @@
|
|
|
125
137
|
pointer-events: auto;
|
|
126
138
|
word-wrap: break-word;
|
|
127
139
|
|
|
140
|
+
&.one-theme {
|
|
141
|
+
background-color: awsui.$color-background-layout-panel-content;
|
|
142
|
+
}
|
|
143
|
+
|
|
128
144
|
> .drawer-content-container {
|
|
129
145
|
grid-column: 1 / span 2;
|
|
130
146
|
grid-row: 1;
|
|
@@ -95,6 +95,10 @@ viewport size and state of the Tools drawer.
|
|
|
95
95
|
}
|
|
96
96
|
}
|
|
97
97
|
|
|
98
|
+
&.one-theme {
|
|
99
|
+
background-color: awsui.$color-background-layout-panel-content;
|
|
100
|
+
}
|
|
101
|
+
|
|
98
102
|
/*
|
|
99
103
|
A non-semantic node is added with a fixed width equal to the final Tools
|
|
100
104
|
width. This will create the visual appearance of horizontal movement and
|
|
@@ -28,7 +28,7 @@ $ai-drawer-heider-height: 42px;
|
|
|
28
28
|
.drawer {
|
|
29
29
|
position: sticky;
|
|
30
30
|
z-index: constants.$drawer-z-index;
|
|
31
|
-
background-color: awsui.$color-background-
|
|
31
|
+
background-color: awsui.$color-background-layout-panel-content;
|
|
32
32
|
display: grid;
|
|
33
33
|
grid-template-columns: awsui.$space-m 1fr;
|
|
34
34
|
inline-size: var(#{custom-props.$drawerSize});
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
.navigation-container {
|
|
13
13
|
position: sticky;
|
|
14
14
|
z-index: constants.$drawer-z-index;
|
|
15
|
-
background-color: awsui.$color-background-
|
|
15
|
+
background-color: awsui.$color-background-layout-panel-content;
|
|
16
16
|
inset-block-end: 0;
|
|
17
17
|
overflow-x: hidden;
|
|
18
18
|
word-wrap: break-word;
|
|
@@ -14,6 +14,8 @@ $icon-width-medium: awsui.$size-icon-medium;
|
|
|
14
14
|
$icon-margin-left: '(#{awsui.$line-height-body-m} - #{$icon-width-normal}) / -2';
|
|
15
15
|
$icon-margin-right-normal: '#{awsui.$space-xxs} + #{awsui.$border-divider-list-width}';
|
|
16
16
|
$icon-margin-right-medium: awsui.$space-xs;
|
|
17
|
+
$icon-offset-inline: awsui.$space-xxs;
|
|
18
|
+
$icon-offset-block: awsui.$space-xxxs;
|
|
17
19
|
|
|
18
20
|
// Total space occupied by the expand icon on the left and its margins.
|
|
19
21
|
// Useful to keep elements correctly aligned.
|
|
@@ -52,6 +54,21 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
|
|
|
52
54
|
// For vertical alignment of text in side navigation items
|
|
53
55
|
&-container {
|
|
54
56
|
margin-inline-end: $icon-margin-right-medium;
|
|
57
|
+
&.one-theme {
|
|
58
|
+
margin-inline-end: calc(#{$icon-margin-right-medium} + $icon-offset-inline);
|
|
59
|
+
inset-block-start: $icon-offset-block;
|
|
60
|
+
> .icon {
|
|
61
|
+
inset-block-start: calc(#{$icon-offset-block} * 3); // Double-check
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
&.one-theme {
|
|
66
|
+
display: inline-flex;
|
|
67
|
+
align-items: flex-start;
|
|
68
|
+
margin-inline-end: calc(#{$icon-margin-right-normal} + #{$icon-offset-inline});
|
|
69
|
+
> .icon {
|
|
70
|
+
inset-block-start: $icon-offset-block;
|
|
71
|
+
}
|
|
55
72
|
}
|
|
56
73
|
}
|
|
57
74
|
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
$padding-inline-inner-filtering-token: styles.$control-padding-horizontal;
|
|
14
14
|
$padding-block-inner-filtering-token: 0px;
|
|
15
|
+
$icon-offset: awsui.$space-xxxs;
|
|
15
16
|
|
|
16
17
|
.button-trigger {
|
|
17
18
|
@include styles.styles-reset;
|
|
@@ -69,6 +70,9 @@ $padding-block-inner-filtering-token: 0px;
|
|
|
69
70
|
inset-inline-end: styles.$control-icon-horizontal-offset;
|
|
70
71
|
inset-block-start: styles.$control-icon-vertical-offset;
|
|
71
72
|
color: awsui.$color-text-button-inline-icon-default;
|
|
73
|
+
&.one-theme {
|
|
74
|
+
inset-block-start: calc(styles.$control-icon-vertical-offset + $icon-offset);
|
|
75
|
+
}
|
|
72
76
|
}
|
|
73
77
|
|
|
74
78
|
&:hover {
|
|
@@ -80,6 +84,9 @@ $padding-block-inner-filtering-token: 0px;
|
|
|
80
84
|
&.pressed {
|
|
81
85
|
> .arrow {
|
|
82
86
|
transform: rotate(-180deg);
|
|
87
|
+
&.one-theme {
|
|
88
|
+
inset-block-start: calc(styles.$control-icon-vertical-offset - $icon-offset);
|
|
89
|
+
}
|
|
83
90
|
}
|
|
84
91
|
}
|
|
85
92
|
|
|
@@ -64,7 +64,11 @@
|
|
|
64
64
|
|
|
65
65
|
@include focus-visible.when-visible {
|
|
66
66
|
&:not(.hide-focus) {
|
|
67
|
-
|
|
67
|
+
// Render the focus ring above container border overlays. The dropdown content border is
|
|
68
|
+
// drawn by `dropdown-shadow`'s `::after` at `z-index: 1`; since that `::after` is the
|
|
69
|
+
// wrapper's generated last child, it paints after (on top of) this deeply-nested ring in
|
|
70
|
+
// tree order, so the ring must use a strictly higher z-index to win.
|
|
71
|
+
@include styles.focus-highlight(0px, $z-index: 2);
|
|
68
72
|
}
|
|
69
73
|
}
|
|
70
74
|
}
|
|
@@ -41,6 +41,14 @@ $_status-backgrounds: (
|
|
|
41
41
|
'not-started': awsui.$color-background-status-indicator-neutral,
|
|
42
42
|
);
|
|
43
43
|
|
|
44
|
+
$_background-overrides: (
|
|
45
|
+
'red': awsui.$color-background-status-indicator-error,
|
|
46
|
+
'grey': awsui.$color-background-status-indicator-neutral,
|
|
47
|
+
'blue': awsui.$color-background-status-indicator-info,
|
|
48
|
+
'green': awsui.$color-background-status-indicator-success,
|
|
49
|
+
'yellow': awsui.$color-background-status-indicator-warning,
|
|
50
|
+
);
|
|
51
|
+
|
|
44
52
|
.root {
|
|
45
53
|
@include styles.default-text-style;
|
|
46
54
|
@each $status in map.keys($_status-colors) {
|
|
@@ -58,6 +66,11 @@ $_status-backgrounds: (
|
|
|
58
66
|
background: #{map.get($_status-backgrounds, $status)};
|
|
59
67
|
}
|
|
60
68
|
}
|
|
69
|
+
@each $color in map.keys($_background-overrides) {
|
|
70
|
+
&.color-override-#{$color} > .container {
|
|
71
|
+
background: #{map.get($_background-overrides, $color)};
|
|
72
|
+
}
|
|
73
|
+
}
|
|
61
74
|
}
|
|
62
75
|
|
|
63
76
|
.container {
|
|
@@ -72,6 +85,9 @@ $_status-backgrounds: (
|
|
|
72
85
|
|
|
73
86
|
> .icon {
|
|
74
87
|
white-space: nowrap;
|
|
88
|
+
&.one-theme {
|
|
89
|
+
vertical-align: middle;
|
|
90
|
+
}
|
|
75
91
|
}
|
|
76
92
|
}
|
|
77
93
|
|
|
@@ -79,9 +95,19 @@ $_status-backgrounds: (
|
|
|
79
95
|
display: inline-block;
|
|
80
96
|
word-wrap: break-word;
|
|
81
97
|
word-break: break-all;
|
|
98
|
+
&.one-theme {
|
|
99
|
+
display: inline-flex;
|
|
100
|
+
align-items: flex-start;
|
|
101
|
+
}
|
|
82
102
|
|
|
83
103
|
> .icon {
|
|
84
104
|
padding-inline-end: awsui.$space-xxs;
|
|
105
|
+
|
|
106
|
+
&.one-theme {
|
|
107
|
+
display: inline-flex;
|
|
108
|
+
align-items: center;
|
|
109
|
+
margin-block-start: awsui.$space-xxxs;
|
|
110
|
+
}
|
|
85
111
|
}
|
|
86
112
|
}
|
|
87
113
|
}
|
|
@@ -92,4 +118,14 @@ $_status-backgrounds: (
|
|
|
92
118
|
text-overflow: ellipsis;
|
|
93
119
|
white-space: nowrap;
|
|
94
120
|
vertical-align: text-bottom;
|
|
121
|
+
|
|
122
|
+
&.one-theme {
|
|
123
|
+
text-overflow: unset;
|
|
124
|
+
|
|
125
|
+
> span:last-child {
|
|
126
|
+
overflow: hidden;
|
|
127
|
+
text-overflow: ellipsis;
|
|
128
|
+
white-space: nowrap;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
95
131
|
}
|
|
@@ -71,7 +71,7 @@ $cell-horizontal-padding: awsui.$space-scaled-l;
|
|
|
71
71
|
}
|
|
72
72
|
|
|
73
73
|
&-sticky {
|
|
74
|
-
border-block-end: awsui.$border-table-sticky-width solid awsui.$color-border-divider-default;
|
|
74
|
+
border-block-end: awsui.$border-table-sticky-width solid awsui.$color-border-divider-interactive-default;
|
|
75
75
|
}
|
|
76
76
|
&-stuck:not(.header-cell-variant-full-page) {
|
|
77
77
|
border-block-end-color: transparent;
|
|
@@ -49,6 +49,16 @@ $item-toggle-column-width: 28px;
|
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
+
&.one-theme {
|
|
53
|
+
align-items: center;
|
|
54
|
+
> .expand-toggle-wrapper {
|
|
55
|
+
> .toggle {
|
|
56
|
+
inset-inline-start: 0px;
|
|
57
|
+
inset-block-start: 3px;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
52
62
|
> .structured-item-wrapper {
|
|
53
63
|
grid-column: 2;
|
|
54
64
|
grid-row: 1 / span 2;
|
|
@@ -53,7 +53,7 @@ function mapRuntimeHeaderActionsToHeaderActions(runtimeHeaderActions) {
|
|
|
53
53
|
// eslint-disable-next-line no-restricted-syntax -- Runtime plugin API: property not in TS type
|
|
54
54
|
...('pressedIconSvg' in runtimeHeaderAction &&
|
|
55
55
|
runtimeHeaderAction.pressedIconSvg && {
|
|
56
|
-
|
|
56
|
+
pressedIconSvg: convertRuntimeTriggerToReactNode(runtimeHeaderAction.pressedIconSvg),
|
|
57
57
|
}),
|
|
58
58
|
};
|
|
59
59
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/runtime-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 React, { useContext, useEffect, useRef } from 'react';\n\nimport { ButtonGroupProps, ItemRuntime } from '../../button-group/interfaces';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../../internal/events';\nimport {\n DrawerConfig as RuntimeDrawerConfig,\n DrawerStateChangeParams,\n} from '../../internal/plugins/controllers/drawers';\nimport { sortByPriority } from '../../internal/plugins/helpers/utils';\nimport { DrawerPayload as RuntimeAiDrawerConfig } from '../../internal/plugins/widget/interfaces';\nimport { AppLayoutProps } from '../interfaces';\nimport { ActiveDrawersContext } from '../utils/visibility-context';\n\nimport styles from './styles.css.js';\n\nexport interface RuntimeDrawer extends AppLayoutProps.Drawer {\n onToggle?: NonCancelableEventHandler<DrawerStateChangeParams>;\n position?: 'side' | 'bottom';\n}\n\nexport interface DrawersLayout {\n global: Array<RuntimeDrawer>;\n localBefore: Array<RuntimeDrawer>;\n localAfter: Array<RuntimeDrawer>;\n}\n\ntype VisibilityCallback = (isVisible: boolean) => void;\n\ninterface RuntimeContentWrapperProps {\n id?: string;\n mountContent: RuntimeDrawerConfig['mountContent'];\n unmountContent: RuntimeDrawerConfig['unmountContent'];\n}\n\nfunction RuntimeDrawerWrapper({ mountContent, unmountContent, id }: RuntimeContentWrapperProps) {\n const ref = useRef<HTMLDivElement>(null);\n const visibilityChangeCallback = useRef<VisibilityCallback | null>(null);\n const activeDrawersIds = useContext(ActiveDrawersContext);\n const isVisible = !!id && activeDrawersIds.includes(id);\n\n useEffect(() => {\n const container = ref.current!;\n mountContent(container, {\n onVisibilityChange: cb => {\n visibilityChangeCallback.current = cb;\n },\n });\n return () => {\n unmountContent(container);\n visibilityChangeCallback.current = null;\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n visibilityChangeCallback.current?.(isVisible);\n }, [isVisible]);\n\n return <div ref={ref} className={styles['runtime-content-wrapper']} data-awsui-runtime-drawer-root-id={id}></div>;\n}\n\ninterface RuntimeContentHeaderProps {\n mountHeader: (container: HTMLElement) => void;\n unmountHeader?: (container: HTMLElement) => void;\n}\n\nfunction RuntimeDrawerHeader({ mountHeader, unmountHeader }: RuntimeContentHeaderProps) {\n const ref = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const container = ref.current!;\n mountHeader?.(container);\n return () => {\n unmountHeader?.(container);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return <div className={styles['runtime-header-wrapper']} ref={ref} />;\n}\n\nfunction mapRuntimeHeaderActionsToHeaderActions(\n runtimeHeaderActions: ReadonlyArray<ItemRuntime>\n): ReadonlyArray<ButtonGroupProps.Item> {\n return runtimeHeaderActions.map(runtimeHeaderAction => {\n return {\n ...runtimeHeaderAction,\n // eslint-disable-next-line no-restricted-syntax -- Runtime plugin API: property not in TS type\n ...('iconSvg' in runtimeHeaderAction &&\n runtimeHeaderAction.iconSvg && {\n iconSvg: convertRuntimeTriggerToReactNode(runtimeHeaderAction.iconSvg),\n }),\n // eslint-disable-next-line no-restricted-syntax -- Runtime plugin API: property not in TS type\n ...('pressedIconSvg' in runtimeHeaderAction &&\n runtimeHeaderAction.pressedIconSvg && {\n iconSvg: convertRuntimeTriggerToReactNode(runtimeHeaderAction.pressedIconSvg),\n }),\n };\n });\n}\n\nconst convertRuntimeTriggerToReactNode = (runtimeTrigger?: string) => {\n if (!runtimeTrigger) {\n return undefined;\n }\n // eslint-disable-next-line react/no-danger\n return <span style={{ lineHeight: 0 }} dangerouslySetInnerHTML={{ __html: runtimeTrigger }} />;\n};\n\nexport const mapRuntimeConfigToDrawer = (\n runtimeConfig: RuntimeDrawerConfig\n): AppLayoutProps.Drawer & {\n orderPriority?: number;\n onToggle?: NonCancelableEventHandler<DrawerStateChangeParams>;\n headerActions?: ReadonlyArray<ButtonGroupProps.Item>;\n} => {\n const { mountContent, unmountContent, trigger, ...runtimeDrawer } = runtimeConfig;\n\n return {\n ...runtimeDrawer,\n ariaLabels: { drawerName: runtimeDrawer.ariaLabels.content ?? '', ...runtimeDrawer.ariaLabels },\n trigger: trigger\n ? {\n ...(trigger.iconSvg && {\n iconSvg: convertRuntimeTriggerToReactNode(trigger.iconSvg),\n }),\n }\n : undefined,\n content: (\n <RuntimeDrawerWrapper\n key={runtimeDrawer.id}\n mountContent={mountContent}\n unmountContent={unmountContent}\n id={runtimeDrawer.id}\n />\n ),\n onResize: event => {\n fireNonCancelableEvent(runtimeDrawer.onResize, { size: event.detail.size, id: runtimeDrawer.id });\n },\n headerActions: runtimeDrawer.headerActions\n ? mapRuntimeHeaderActionsToHeaderActions(runtimeDrawer.headerActions)\n : undefined,\n };\n};\n\nexport const mapRuntimeConfigToAiDrawer = (\n runtimeConfig: RuntimeAiDrawerConfig\n): AppLayoutProps.Drawer & {\n orderPriority?: number;\n onToggle?: NonCancelableEventHandler<DrawerStateChangeParams>;\n headerActions?: ReadonlyArray<ButtonGroupProps.Item>;\n exitExpandedModeTrigger?: React.ReactNode;\n onToggleFocusMode?: NonCancelableEventHandler<{ isExpanded: boolean }>;\n} => {\n const { mountContent, unmountContent, trigger, exitExpandedModeTrigger, ...runtimeDrawer } = runtimeConfig;\n\n return {\n ...runtimeDrawer,\n ariaLabels: { drawerName: runtimeDrawer.ariaLabels.content ?? '', ...runtimeDrawer.ariaLabels },\n ...(trigger && {\n trigger: {\n customIcon: convertRuntimeTriggerToReactNode(trigger?.customIcon),\n iconSvg: convertRuntimeTriggerToReactNode(trigger?.iconSvg),\n },\n }),\n exitExpandedModeTrigger: exitExpandedModeTrigger\n ? {\n customIcon: convertRuntimeTriggerToReactNode(exitExpandedModeTrigger?.customIcon),\n }\n : undefined,\n content: (\n <RuntimeDrawerWrapper\n key={runtimeDrawer.id}\n mountContent={mountContent}\n unmountContent={unmountContent}\n id={runtimeDrawer.id}\n />\n ),\n ...(runtimeDrawer.mountHeader && {\n header: (\n <RuntimeDrawerHeader mountHeader={runtimeDrawer.mountHeader} unmountHeader={runtimeDrawer.unmountHeader} />\n ),\n }),\n onResize: event => {\n fireNonCancelableEvent(runtimeDrawer.onResize, { size: event.detail.size, id: runtimeDrawer.id });\n },\n headerActions: runtimeDrawer.headerActions\n ? mapRuntimeHeaderActionsToHeaderActions(runtimeDrawer.headerActions)\n : undefined,\n };\n};\n\nexport function convertRuntimeDrawers(\n localDrawers: Array<RuntimeDrawerConfig>,\n globalDrawers: Array<RuntimeDrawerConfig>\n): DrawersLayout {\n const converted = localDrawers.map(mapRuntimeConfigToDrawer);\n const sorted = sortByPriority(converted);\n return {\n global: sortByPriority(globalDrawers.map(mapRuntimeConfigToDrawer)),\n localBefore: sorted.filter(item => (item.orderPriority ?? 0) > 0),\n localAfter: sorted.filter(item => (item.orderPriority ?? 0) <= 0),\n };\n}\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/runtime-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 React, { useContext, useEffect, useRef } from 'react';\n\nimport { ButtonGroupProps, ItemRuntime } from '../../button-group/interfaces';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../../internal/events';\nimport {\n DrawerConfig as RuntimeDrawerConfig,\n DrawerStateChangeParams,\n} from '../../internal/plugins/controllers/drawers';\nimport { sortByPriority } from '../../internal/plugins/helpers/utils';\nimport { DrawerPayload as RuntimeAiDrawerConfig } from '../../internal/plugins/widget/interfaces';\nimport { AppLayoutProps } from '../interfaces';\nimport { ActiveDrawersContext } from '../utils/visibility-context';\n\nimport styles from './styles.css.js';\n\nexport interface RuntimeDrawer extends AppLayoutProps.Drawer {\n onToggle?: NonCancelableEventHandler<DrawerStateChangeParams>;\n position?: 'side' | 'bottom';\n}\n\nexport interface DrawersLayout {\n global: Array<RuntimeDrawer>;\n localBefore: Array<RuntimeDrawer>;\n localAfter: Array<RuntimeDrawer>;\n}\n\ntype VisibilityCallback = (isVisible: boolean) => void;\n\ninterface RuntimeContentWrapperProps {\n id?: string;\n mountContent: RuntimeDrawerConfig['mountContent'];\n unmountContent: RuntimeDrawerConfig['unmountContent'];\n}\n\nfunction RuntimeDrawerWrapper({ mountContent, unmountContent, id }: RuntimeContentWrapperProps) {\n const ref = useRef<HTMLDivElement>(null);\n const visibilityChangeCallback = useRef<VisibilityCallback | null>(null);\n const activeDrawersIds = useContext(ActiveDrawersContext);\n const isVisible = !!id && activeDrawersIds.includes(id);\n\n useEffect(() => {\n const container = ref.current!;\n mountContent(container, {\n onVisibilityChange: cb => {\n visibilityChangeCallback.current = cb;\n },\n });\n return () => {\n unmountContent(container);\n visibilityChangeCallback.current = null;\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n visibilityChangeCallback.current?.(isVisible);\n }, [isVisible]);\n\n return <div ref={ref} className={styles['runtime-content-wrapper']} data-awsui-runtime-drawer-root-id={id}></div>;\n}\n\ninterface RuntimeContentHeaderProps {\n mountHeader: (container: HTMLElement) => void;\n unmountHeader?: (container: HTMLElement) => void;\n}\n\nfunction RuntimeDrawerHeader({ mountHeader, unmountHeader }: RuntimeContentHeaderProps) {\n const ref = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const container = ref.current!;\n mountHeader?.(container);\n return () => {\n unmountHeader?.(container);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return <div className={styles['runtime-header-wrapper']} ref={ref} />;\n}\n\nfunction mapRuntimeHeaderActionsToHeaderActions(\n runtimeHeaderActions: ReadonlyArray<ItemRuntime>\n): ReadonlyArray<ButtonGroupProps.Item> {\n return runtimeHeaderActions.map(runtimeHeaderAction => {\n return {\n ...runtimeHeaderAction,\n // eslint-disable-next-line no-restricted-syntax -- Runtime plugin API: property not in TS type\n ...('iconSvg' in runtimeHeaderAction &&\n runtimeHeaderAction.iconSvg && {\n iconSvg: convertRuntimeTriggerToReactNode(runtimeHeaderAction.iconSvg),\n }),\n // eslint-disable-next-line no-restricted-syntax -- Runtime plugin API: property not in TS type\n ...('pressedIconSvg' in runtimeHeaderAction &&\n runtimeHeaderAction.pressedIconSvg && {\n pressedIconSvg: convertRuntimeTriggerToReactNode(runtimeHeaderAction.pressedIconSvg),\n }),\n };\n });\n}\n\nconst convertRuntimeTriggerToReactNode = (runtimeTrigger?: string) => {\n if (!runtimeTrigger) {\n return undefined;\n }\n // eslint-disable-next-line react/no-danger\n return <span style={{ lineHeight: 0 }} dangerouslySetInnerHTML={{ __html: runtimeTrigger }} />;\n};\n\nexport const mapRuntimeConfigToDrawer = (\n runtimeConfig: RuntimeDrawerConfig\n): AppLayoutProps.Drawer & {\n orderPriority?: number;\n onToggle?: NonCancelableEventHandler<DrawerStateChangeParams>;\n headerActions?: ReadonlyArray<ButtonGroupProps.Item>;\n} => {\n const { mountContent, unmountContent, trigger, ...runtimeDrawer } = runtimeConfig;\n\n return {\n ...runtimeDrawer,\n ariaLabels: { drawerName: runtimeDrawer.ariaLabels.content ?? '', ...runtimeDrawer.ariaLabels },\n trigger: trigger\n ? {\n ...(trigger.iconSvg && {\n iconSvg: convertRuntimeTriggerToReactNode(trigger.iconSvg),\n }),\n }\n : undefined,\n content: (\n <RuntimeDrawerWrapper\n key={runtimeDrawer.id}\n mountContent={mountContent}\n unmountContent={unmountContent}\n id={runtimeDrawer.id}\n />\n ),\n onResize: event => {\n fireNonCancelableEvent(runtimeDrawer.onResize, { size: event.detail.size, id: runtimeDrawer.id });\n },\n headerActions: runtimeDrawer.headerActions\n ? mapRuntimeHeaderActionsToHeaderActions(runtimeDrawer.headerActions)\n : undefined,\n };\n};\n\nexport const mapRuntimeConfigToAiDrawer = (\n runtimeConfig: RuntimeAiDrawerConfig\n): AppLayoutProps.Drawer & {\n orderPriority?: number;\n onToggle?: NonCancelableEventHandler<DrawerStateChangeParams>;\n headerActions?: ReadonlyArray<ButtonGroupProps.Item>;\n exitExpandedModeTrigger?: React.ReactNode;\n onToggleFocusMode?: NonCancelableEventHandler<{ isExpanded: boolean }>;\n} => {\n const { mountContent, unmountContent, trigger, exitExpandedModeTrigger, ...runtimeDrawer } = runtimeConfig;\n\n return {\n ...runtimeDrawer,\n ariaLabels: { drawerName: runtimeDrawer.ariaLabels.content ?? '', ...runtimeDrawer.ariaLabels },\n ...(trigger && {\n trigger: {\n customIcon: convertRuntimeTriggerToReactNode(trigger?.customIcon),\n iconSvg: convertRuntimeTriggerToReactNode(trigger?.iconSvg),\n },\n }),\n exitExpandedModeTrigger: exitExpandedModeTrigger\n ? {\n customIcon: convertRuntimeTriggerToReactNode(exitExpandedModeTrigger?.customIcon),\n }\n : undefined,\n content: (\n <RuntimeDrawerWrapper\n key={runtimeDrawer.id}\n mountContent={mountContent}\n unmountContent={unmountContent}\n id={runtimeDrawer.id}\n />\n ),\n ...(runtimeDrawer.mountHeader && {\n header: (\n <RuntimeDrawerHeader mountHeader={runtimeDrawer.mountHeader} unmountHeader={runtimeDrawer.unmountHeader} />\n ),\n }),\n onResize: event => {\n fireNonCancelableEvent(runtimeDrawer.onResize, { size: event.detail.size, id: runtimeDrawer.id });\n },\n headerActions: runtimeDrawer.headerActions\n ? mapRuntimeHeaderActionsToHeaderActions(runtimeDrawer.headerActions)\n : undefined,\n };\n};\n\nexport function convertRuntimeDrawers(\n localDrawers: Array<RuntimeDrawerConfig>,\n globalDrawers: Array<RuntimeDrawerConfig>\n): DrawersLayout {\n const converted = localDrawers.map(mapRuntimeConfigToDrawer);\n const sorted = sortByPriority(converted);\n return {\n global: sortByPriority(globalDrawers.map(mapRuntimeConfigToDrawer)),\n localBefore: sorted.filter(item => (item.orderPriority ?? 0) > 0),\n localAfter: sorted.filter(item => (item.orderPriority ?? 0) <= 0),\n };\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drawers.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/drawers.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"drawers.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/drawers.tsx"],"names":[],"mappings":"AA+BA;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,uBA+B9B;AAuPD;;;;;GAKG;AACH,wBAAgB,cAAc,uBA2E7B"}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
import React, { useRef } from 'react';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import { useContainerQuery } from '@cloudscape-design/component-toolkit';
|
|
6
|
+
import { isThemeActive, Theme } from '@cloudscape-design/component-toolkit/internal';
|
|
6
7
|
import { InternalButton } from '../../button/internal';
|
|
7
8
|
import customCssProps from '../../internal/generated/custom-css-properties';
|
|
8
9
|
import { getLimitedValue } from '../../split-panel/utils/size-utils';
|
|
@@ -60,6 +61,7 @@ function ActiveDrawer() {
|
|
|
60
61
|
return (React.createElement("aside", { id: activeDrawerId !== null && activeDrawerId !== void 0 ? activeDrawerId : undefined, "aria-hidden": isHidden, "aria-label": computedAriaLabels.content, className: clsx(styles.drawer, {
|
|
61
62
|
[styles['is-drawer-open']]: activeDrawerId,
|
|
62
63
|
[styles.unfocusable]: isUnfocusable,
|
|
64
|
+
[styles['one-theme']]: isThemeActive(Theme.OneTheme),
|
|
63
65
|
[testutilStyles['active-drawer']]: activeDrawerId,
|
|
64
66
|
[testutilStyles.tools]: isToolsDrawer,
|
|
65
67
|
}), style: {
|
|
@@ -118,6 +120,7 @@ function DesktopTriggers() {
|
|
|
118
120
|
return (React.createElement("aside", { className: clsx(styles['drawers-desktop-triggers-container'], {
|
|
119
121
|
[styles['has-multiple-triggers']]: hasMultipleTriggers,
|
|
120
122
|
[styles['has-open-drawer']]: hasOpenDrawer,
|
|
123
|
+
[styles['one-theme']]: isThemeActive(Theme.OneTheme),
|
|
121
124
|
}), "aria-label": drawersAriaLabel, ref: triggersContainerRef, role: "region" },
|
|
122
125
|
React.createElement("div", { className: clsx(styles['drawers-trigger-content'], {
|
|
123
126
|
[styles['has-multiple-triggers']]: hasMultipleTriggers,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drawers.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/drawers.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAEzE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,cAAc,MAAM,gDAAgD,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,YAAY,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAE7C,OAAO,wBAAwB,MAAM,8CAA8C,CAAC;AACpF,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAC3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC;;;;;;GAMG;AACH,MAAM,qCAAqC,GAAG,CAAC,CAAC;AAEhD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,MAAM,EACJ,iBAAiB,EACjB,OAAO,EACP,mBAAmB,EACnB,wBAAwB,EACxB,aAAa,EACb,cAAc,EACd,cAAc,EACd,QAAQ,GACT,GAAG,qBAAqB,EAAE,CAAC;IAE5B,MAAM,aAAa,GAAG,wBAAwB,IAAI,cAAc,IAAI,CAAC,cAAc,CAAC;IAEpF,IAAI,CAAC,OAAO,IAAI,mBAAmB,KAAK,CAAC,EAAE,CAAC;QAC1C,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,EAAE;YAC3C,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,iBAAiB;YAClD,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,aAAa;YAC1C,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,aAAa;SACpC,CAAC;QAEF,oBAAC,UAAU,CAAC,IAAI,OAAG;QACnB,oBAAC,YAAY,OAAG;QACf,CAAC,QAAQ,IAAI,oBAAC,eAAe,OAAG,CAC7B,CACP,CAAC;AACJ,CAAC;AAED,SAAS,YAAY;;IACnB,MAAM,EACJ,cAAc,EACd,UAAU,EACV,OAAO,EACP,WAAW,EACX,kBAAkB,EAClB,gBAAgB,EAChB,wBAAwB,EACxB,QAAQ,EACR,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,eAAe,EACf,eAAe,EACf,SAAS,GACV,GAAG,qBAAqB,EAAE,CAAC;IAE5B,MAAM,YAAY,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,cAAc,CAAC,mCAAI,IAAI,CAAC;IAE/E,MAAM,kBAAkB,GAAG;QACzB,WAAW,EAAE,cAAc,CAAC,CAAC,CAAC,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,UAAU,0CAAE,WAAW,CAAC,CAAC,CAAC,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU;QAC5F,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,UAAU,0CAAE,UAAU,CAAC,CAAC,CAAC,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK;KACnF,CAAC;IAEF,MAAM,QAAQ,GAAG,CAAC,cAAc,CAAC;IACjC,MAAM,aAAa,GAAG,QAAQ,IAAI,CAAC,wBAAwB,IAAI,cAAc,IAAI,CAAC,cAAc,CAAC,CAAC;IAClG,MAAM,aAAa,GAAG,cAAc,KAAK,eAAe,CAAC;IACzD,MAAM,YAAY,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,eAAe,CAAC,0CAAE,OAAO,CAAC;IAErF,MAAM,IAAI,GAAG,eAAe,CAAC,eAAe,EAAE,UAAU,EAAE,eAAe,CAAC,CAAC;IAE3E,OAAO,CACL,+BACE,EAAE,EAAE,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,SAAS,iBAClB,QAAQ,gBACT,kBAAkB,CAAC,OAAO,EACtC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;YAC7B,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,EAAE,cAAc;YAC1C,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,aAAa;YACnC,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,EAAE,cAAc;YACjD,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,aAAa;SACtC,CAAC,EACF,KAAK,EAAE;YACL,GAAG,CAAC,CAAC,QAAQ,IAAI,UAAU,IAAI,EAAE,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,GAAG,IAAI,IAAI,EAAE,CAAC;SAC7E,EACD,GAAG,EAAE,SAAS,EACd,MAAM,EAAE,CAAC,CAAC,EAAE;YACV,IAAI,CAAC,CAAC,CAAC,aAAa,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,EAAE,CAAC;gBACnE,gBAAgB,EAAE,CAAC;YACrB,CAAC;QACH,CAAC;QAEA,CAAC,QAAQ,KAAI,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,SAAS,CAAA,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,IAAG,YAAY,CAAO;QACtG,6BAAK,SAAS,EAAE,MAAM,CAAC,0BAA0B,CAAC;YAChD,6BAAK,SAAS,EAAE,MAAM,CAAC,qBAAqB,CAAC;gBAC3C,oBAAC,cAAc,IACb,SAAS,EAAE,kBAAkB,CAAC,WAAW,EACzC,SAAS,EAAE,IAAI,CAAC;wBACd,CAAC,cAAc,CAAC,4BAA4B,CAAC,CAAC,EAAE,cAAc;wBAC9D,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,EAAE,aAAa;qBAC/C,CAAC,EACF,UAAU,EAAC,MAAM,EACjB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,EAC5C,OAAO,EAAE,GAAG,EAAE;wBACZ,kBAAkB,CAAC,cAAc,CAAC,CAAC;wBACnC,gBAAgB,CAAC,KAAK,CAAC,CAAC;oBAC1B,CAAC,EACD,GAAG,EAAE,WAAW,CAAC,KAAK,EACtB,OAAO,EAAC,MAAM,GACd,CACE;YACL,YAAY,IAAI,CACf,6BACE,GAAG,EAAE,eAAe,EACpB,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,gBAAgB,CAAC,EACxB,cAAc,KAAK,eAAe,IAAI,MAAM,CAAC,uBAAuB,CAAC,CACtE,IAEA,YAAY,CACT,CACP;YACA,cAAc,KAAK,eAAe,IAAI,CACrC,6BAAK,GAAG,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,IAC1D,cAAc,KAAI,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,CAAA,CACpC,CACP,CACG,CACA,CACT,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,SAAS,eAAe;IACtB,MAAM,EACJ,cAAc,EACd,OAAO,EACP,gBAAgB,EAChB,wBAAwB,EACxB,iCAAiC,EACjC,WAAW,EACX,mBAAmB,EACnB,kBAAkB,EAClB,qBAAqB,EACrB,aAAa,EACb,gBAAgB,EAChB,UAAU,EACV,mBAAmB,EACnB,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,EACd,gBAAgB,EAChB,8BAA8B,EAC9B,sBAAsB,EACtB,aAAa,GACd,GAAG,qBAAqB,EAAE,CAAC;IAE5B,MAAM,mBAAmB,GAAG,mBAAmB,GAAG,CAAC,CAAC;IACpD,MAAM,aAAa,GAAG,UAAU,IAAI,mBAAmB,IAAI,kBAAkB,KAAK,MAAM,CAAC;IAEzF,MAAM,sBAAsB,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;IACtD,MAAM,CAAC,eAAe,EAAE,oBAAoB,CAAC,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAEjG,IAAI,cAAc,EAAE,CAAC;QACnB,sBAAsB,CAAC,OAAO,GAAG,cAAc,CAAC;IAClD,CAAC;IAED,MAAM,gBAAgB,GACpB,gBAAgB,IAAI,kBAAkB,KAAK,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,8BAA8B,CAAC;IAEhH,MAAM,sBAAsB,GAAG,GAAG,EAAE;QAClC,IAAI,eAAe,EAAE,CAAC;YACpB,MAAM,WAAW,GAAG,EAAE,CAAC;YACvB,MAAM,YAAY,GAChB,cAAc,IAAI,gBAAgB;gBAChC,CAAC,CAAC,CAAC,eAAe,GAAG,8BAA8B,CAAC,GAAG,GAAG;gBAC1D,CAAC,CAAC,CAAC,eAAe,GAAG,gBAAgB,CAAC,GAAG,GAAG,CAAC;YAEjD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,WAAW,CAAC,CAAC;YAErD,IAAI,cAAc,GAAG,CAAC,CAAC;YACvB,IAAI,aAAa,IAAI,gBAAgB,CAAC,SAAS,EAAE,CAAC;gBAChD,cAAc,GAAG,CAAC,CAAC;YACrB,CAAC;YACD,OAAO,KAAK,GAAG,cAAc,CAAC;QAChC,CAAC;QAED,OAAO,CAAC,CAAC;IACX,CAAC,CAAC;IAEF,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,GAAG,UAAU,CAAC,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,SAAS,EAAE,sBAAsB,EAAE,EAAE,cAAc,CAAC,CAAC;IACnH,MAAM,oBAAoB,GAAG,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAEtE,OAAO,CACL,+BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,oCAAoC,CAAC,EAAE;YAC5D,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,mBAAmB;YACtD,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,aAAa;SAC3C,CAAC,gBACU,gBAAgB,EAC5B,GAAG,EAAE,oBAAoB,EACzB,IAAI,EAAC,QAAQ;QAEb,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,yBAAyB,CAAC,EAAE;gBACjD,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,mBAAmB;gBACtD,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,aAAa;aAC3C,CAAC,gBACU,gBAAgB,EAC5B,IAAI,EAAC,SAAS,sBACG,UAAU;YAE1B,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;;gBACvB,MAAM,yBAAyB,GAAG,CAAA,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,OAAO,MAAK,IAAI,CAAC,EAAE,CAAC;gBAC9E,OAAO,CACL,oBAAC,aAAa,IACZ,SAAS,EAAE,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,EACzC,YAAY,EAAE,IAAI,CAAC,EAAE,KAAK,cAAc,EACxC,YAAY,EAAE,cAAc,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAC9D,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC,EAAE;wBAC5E,CAAC,cAAc,CAAC,4BAA4B,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK;wBAC1D,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,KAAK,eAAe;qBAC9D,CAAC,EACF,QAAQ,EAAE,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,0CAAE,QAAQ,EACjC,OAAO,EAAE,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,0CAAE,OAAO,EAC/B,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,EAC1C,GAAG,EAAE,yBAAyB,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC/D,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,4BAA4B,IAAI,CAAC,EAAE,EAAE,EAC7C,kBAAkB,EAAE,aAAa,KAAK,eAAe,EACrD,QAAQ,EAAE,IAAI,CAAC,EAAE,KAAK,cAAc,GACpC,CACH,CAAC;YACJ,CAAC,CAAC;YAED,aAAa,CAAC,MAAM,GAAG,CAAC,IAAI,CAC3B,oBAAC,YAAY,IACX,KAAK,EAAE,aAAa,EACpB,SAAS,EAAE,oBAAoB,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,wBAAwB,EAC9F,oBAAoB,EAAE,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CAC1F,oBAAC,aAAa,IACZ,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,oBAAoB,EAC3B,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC,EAAE,cAAc,CAAC,EAC7F,QAAQ,EAAC,UAAU,EACnB,OAAO,EAAE,OAAO,EAChB,kBAAkB,EAAE,aAAa,KAAK,eAAe,GACrD,CACH,EACD,WAAW,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;oBAC1B,kBAAkB,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;gBAChC,CAAC,GACD,CACH;YACA,aAAa,IAAI,gBAAgB,CAAC,SAAS,IAAI,CAC9C,oBAAC,aAAa,IACZ,SAAS,EAAE,gBAAgB,CAAC,SAAS,EACrC,YAAY,EAAE,mBAAmB,EACjC,YAAY,EAAE,CAAC,CAAC,gBAAgB,EAChC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,EAAE,wBAAwB,CAAC,aAAa,CAAC,CAAC,EACnF,QAAQ,EAAC,eAAe,EACxB,OAAO,EAAE,GAAG,EAAE,CAAC,qBAAqB,EAAE,EACtC,QAAQ,EAAE,aAAa,IAAI,gBAAgB,EAC3C,GAAG,EAAE,cAAc,CAAC,MAAM,EAC1B,kBAAkB,EAAE,aAAa,KAAK,eAAe,GACrD,CACH,CACG,CACA,CACT,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,cAAc;IAC5B,MAAM,EACJ,cAAc,EACd,OAAO,EACP,gBAAgB,EAChB,wBAAwB,EACxB,iCAAiC,EACjC,WAAW,EACX,kBAAkB,EAClB,wBAAwB,EACxB,aAAa,GACd,GAAG,qBAAqB,EAAE,CAAC;IAE5B,MAAM,sBAAsB,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;IAEtD,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,cAAc,EAAE,CAAC;QACnB,sBAAsB,CAAC,OAAO,GAAG,cAAc,CAAC;IAClD,CAAC;IAED,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,GAAG,UAAU,CAAC,OAAO,EAAE,qCAAqC,EAAE,cAAc,CAAC,CAAC;IACnH,MAAM,oBAAoB,GAAG,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAEtE,OAAO,CACL,8CACe,wBAAwB,EACrC,SAAS,EAAE,IAAI,CAAC;YACd,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,wBAAwB;SAC/C,CAAC,gBACU,gBAAgB,EAC5B,IAAI,EAAC,QAAQ;QAEb,6BACE,SAAS,EAAE,MAAM,CAAC,mCAAmC,CAAC,gBAC1C,gBAAgB,EAC5B,IAAI,EAAC,SAAS,sBACG,YAAY;YAE5B,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;;gBACvB,MAAM,yBAAyB,GAAG,CAAA,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,OAAO,MAAK,IAAI,CAAC,EAAE,CAAC;gBAC9E,OAAO,CACL,oBAAC,aAAa,IACZ,YAAY,EAAE,IAAI,CAAC,EAAE,KAAK,cAAc,EACxC,SAAS,EAAE,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,EACzC,YAAY,EAAE,cAAc,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAC9D,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC,EAAE;wBAC5E,CAAC,cAAc,CAAC,4BAA4B,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK;wBAC1D,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,KAAK,eAAe;qBAC9D,CAAC,EACF,QAAQ,EAAE,wBAAwB,EAClC,GAAG,EAAE,yBAAyB,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC/D,QAAQ,EAAE,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,0CAAE,QAAQ,EACjC,OAAO,EAAE,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,0CAAE,OAAO,EAC/B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,EAC1C,MAAM,EAAE,4BAA4B,IAAI,CAAC,EAAE,EAAE,EAC7C,kBAAkB,EAAE,aAAa,KAAK,eAAe,EACrD,QAAQ,EAAE,IAAI,CAAC,EAAE,KAAK,cAAc,GACpC,CACH,CAAC;YACJ,CAAC,CAAC;YACD,aAAa,CAAC,MAAM,GAAG,CAAC,IAAI,CAC3B,oBAAC,YAAY,IACX,KAAK,EAAE,aAAa,EACpB,SAAS,EAAE,oBAAoB,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,wBAAwB,EAC9F,WAAW,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,kBAAkB,CAAC,MAAM,CAAC,EAAE,CAAC,GAC1D,CACH,CACG,CACA,CACT,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\n\nimport { InternalButton } from '../../button/internal';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { splitItems } from '../drawer/drawers-helpers';\nimport OverflowMenu from '../drawer/overflow-menu';\nimport { TOOLS_DRAWER_ID } from '../utils/use-drawers';\nimport { useAppLayoutInternals } from './context';\nimport SplitPanel from './split-panel';\nimport TriggerButton from './trigger-button';\n\nimport splitPanelTestUtilStyles from '../../split-panel/test-classes/styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\n/**\n * The VISIBLE_MOBILE_TOOLBAR_TRIGGERS_LIMIT is used to reduce the number\n * of triggers that are initially visible on the mobile toolbar, the rest\n * are then placed into an overflow menu\n *\n * Note if one of the triggers is for a split-panel, it would not count that\n */\nconst VISIBLE_MOBILE_TOOLBAR_TRIGGERS_LIMIT = 2;\n\n/**\n * The Drawers root component is mounted in the AppLayout index file. It will only\n * render if the drawers are defined, and it will take over the mounting of and\n * rendering of the Tools and SplitPanel (side position) if they exist. If drawers\n * do not exist then the Tools and SplitPanel will be handled by the Tools component.\n */\nexport default function Drawers() {\n const {\n disableBodyScroll,\n drawers,\n drawersTriggerCount,\n hasDrawerViewportOverlay,\n hasOpenDrawer,\n navigationOpen,\n navigationHide,\n isMobile,\n } = useAppLayoutInternals();\n\n const isUnfocusable = hasDrawerViewportOverlay && navigationOpen && !navigationHide;\n\n if (!drawers || drawersTriggerCount === 0) {\n return null;\n }\n\n return (\n <div\n className={clsx(styles['drawers-container'], {\n [styles['disable-body-scroll']]: disableBodyScroll,\n [styles['has-open-drawer']]: hasOpenDrawer,\n [styles.unfocusable]: isUnfocusable,\n })}\n >\n <SplitPanel.Side />\n <ActiveDrawer />\n {!isMobile && <DesktopTriggers />}\n </div>\n );\n}\n\nfunction ActiveDrawer() {\n const {\n activeDrawerId,\n ariaLabels,\n drawers,\n drawersRefs,\n handleDrawersClick,\n handleToolsClick,\n hasDrawerViewportOverlay,\n isMobile,\n navigationOpen,\n navigationHide,\n loseDrawersFocus,\n resizeHandle,\n drawerSize,\n drawersMinWidth,\n drawersMaxWidth,\n drawerRef,\n } = useAppLayoutInternals();\n\n const activeDrawer = drawers?.find(item => item.id === activeDrawerId) ?? null;\n\n const computedAriaLabels = {\n closeButton: activeDrawerId ? activeDrawer?.ariaLabels?.closeButton : ariaLabels?.toolsClose,\n content: activeDrawerId ? activeDrawer?.ariaLabels?.drawerName : ariaLabels?.tools,\n };\n\n const isHidden = !activeDrawerId;\n const isUnfocusable = isHidden || (hasDrawerViewportOverlay && navigationOpen && !navigationHide);\n const isToolsDrawer = activeDrawerId === TOOLS_DRAWER_ID;\n const toolsContent = drawers?.find(drawer => drawer.id === TOOLS_DRAWER_ID)?.content;\n\n const size = getLimitedValue(drawersMinWidth, drawerSize, drawersMaxWidth);\n\n return (\n <aside\n id={activeDrawerId ?? undefined}\n aria-hidden={isHidden}\n aria-label={computedAriaLabels.content}\n className={clsx(styles.drawer, {\n [styles['is-drawer-open']]: activeDrawerId,\n [styles.unfocusable]: isUnfocusable,\n [testutilStyles['active-drawer']]: activeDrawerId,\n [testutilStyles.tools]: isToolsDrawer,\n })}\n style={{\n ...(!isMobile && drawerSize && { [customCssProps.drawerSize]: `${size}px` }),\n }}\n ref={drawerRef}\n onBlur={e => {\n if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n loseDrawersFocus();\n }\n }}\n >\n {!isMobile && activeDrawer?.resizable && <div className={styles['drawer-slider']}>{resizeHandle}</div>}\n <div className={styles['drawer-content-container']}>\n <div className={styles['drawer-close-button']}>\n <InternalButton\n ariaLabel={computedAriaLabels.closeButton}\n className={clsx({\n [testutilStyles['active-drawer-close-button']]: activeDrawerId,\n [testutilStyles['tools-close']]: isToolsDrawer,\n })}\n formAction=\"none\"\n iconName={isMobile ? 'close' : 'angle-right'}\n onClick={() => {\n handleDrawersClick(activeDrawerId);\n handleToolsClick(false);\n }}\n ref={drawersRefs.close}\n variant=\"icon\"\n />\n </div>\n {toolsContent && (\n <div\n key={TOOLS_DRAWER_ID}\n className={clsx(\n styles['drawer-content'],\n activeDrawerId !== TOOLS_DRAWER_ID && styles['drawer-content-hidden']\n )}\n >\n {toolsContent}\n </div>\n )}\n {activeDrawerId !== TOOLS_DRAWER_ID && (\n <div key={activeDrawerId} className={styles['drawer-content']}>\n {activeDrawerId && activeDrawer?.content}\n </div>\n )}\n </div>\n </aside>\n );\n}\n\n/**\n * The DesktopTriggers will render the trigger buttons for Tools, Drawers, and the\n * SplitPanel in non mobile viewports. Changes to the activeDrawerId need to be\n * tracked by the previousActiveDrawerId property in order to appropriately apply\n * the ref required to manage focus control.\n */\nfunction DesktopTriggers() {\n const {\n activeDrawerId,\n drawers,\n drawersAriaLabel,\n drawersOverflowAriaLabel,\n drawersOverflowWithBadgeAriaLabel,\n drawersRefs,\n drawersTriggerCount,\n handleDrawersClick,\n handleSplitPanelClick,\n hasOpenDrawer,\n isSplitPanelOpen,\n splitPanel,\n splitPanelControlId,\n splitPanelDisplayed,\n splitPanelPosition,\n splitPanelRefs,\n splitPanelToggle,\n splitPanelReportedHeaderHeight,\n splitPanelReportedSize,\n headerVariant,\n } = useAppLayoutInternals();\n\n const hasMultipleTriggers = drawersTriggerCount > 1;\n const hasSplitPanel = splitPanel && splitPanelDisplayed && splitPanelPosition === 'side';\n\n const previousActiveDrawerId = useRef(activeDrawerId);\n const [containerHeight, triggersContainerRef] = useContainerQuery(rect => rect.contentBoxHeight);\n\n if (activeDrawerId) {\n previousActiveDrawerId.current = activeDrawerId;\n }\n\n const splitPanelHeight =\n isSplitPanelOpen && splitPanelPosition === 'bottom' ? splitPanelReportedSize : splitPanelReportedHeaderHeight;\n\n const getIndexOfOverflowItem = () => {\n if (containerHeight) {\n const ITEM_HEIGHT = 48;\n const overflowSpot =\n activeDrawerId && isSplitPanelOpen\n ? (containerHeight - splitPanelReportedHeaderHeight) / 1.5\n : (containerHeight - splitPanelHeight) / 1.5;\n\n const index = Math.floor(overflowSpot / ITEM_HEIGHT);\n\n let splitPanelItem = 0;\n if (hasSplitPanel && splitPanelToggle.displayed) {\n splitPanelItem = 1;\n }\n return index - splitPanelItem;\n }\n\n return 0;\n };\n\n const { visibleItems, overflowItems } = splitItems(drawers ?? undefined, getIndexOfOverflowItem(), activeDrawerId);\n const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n\n return (\n <aside\n className={clsx(styles['drawers-desktop-triggers-container'], {\n [styles['has-multiple-triggers']]: hasMultipleTriggers,\n [styles['has-open-drawer']]: hasOpenDrawer,\n })}\n aria-label={drawersAriaLabel}\n ref={triggersContainerRef}\n role=\"region\"\n >\n <div\n className={clsx(styles['drawers-trigger-content'], {\n [styles['has-multiple-triggers']]: hasMultipleTriggers,\n [styles['has-open-drawer']]: hasOpenDrawer,\n })}\n aria-label={drawersAriaLabel}\n role=\"toolbar\"\n aria-orientation=\"vertical\"\n >\n {visibleItems.map(item => {\n const isForPreviousActiveDrawer = previousActiveDrawerId?.current === item.id;\n return (\n <TriggerButton\n ariaLabel={item.ariaLabels?.triggerButton}\n ariaExpanded={item.id === activeDrawerId}\n ariaControls={activeDrawerId === item.id ? item.id : undefined}\n className={clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], {\n [testutilStyles['drawers-trigger-with-badge']]: item.badge,\n [testutilStyles['tools-toggle']]: item.id === TOOLS_DRAWER_ID,\n })}\n iconName={item?.trigger?.iconName}\n iconSvg={item?.trigger?.iconSvg}\n key={item.id}\n onClick={() => handleDrawersClick(item.id)}\n ref={isForPreviousActiveDrawer ? drawersRefs.toggle : undefined}\n badge={item.badge}\n testId={`awsui-app-layout-trigger-${item.id}`}\n highContrastHeader={headerVariant === 'high-contrast'}\n selected={item.id === activeDrawerId}\n />\n );\n })}\n\n {overflowItems.length > 0 && (\n <OverflowMenu\n items={overflowItems}\n ariaLabel={overflowMenuHasBadge ? drawersOverflowWithBadgeAriaLabel : drawersOverflowAriaLabel}\n customTriggerBuilder={({ onClick, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (\n <TriggerButton\n ref={triggerRef}\n ariaLabel={ariaLabel}\n ariaExpanded={ariaExpanded}\n badge={overflowMenuHasBadge}\n className={clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], testUtilsClass)}\n iconName=\"ellipsis\"\n onClick={onClick}\n highContrastHeader={headerVariant === 'high-contrast'}\n />\n )}\n onItemClick={({ detail }) => {\n handleDrawersClick(detail.id);\n }}\n />\n )}\n {hasSplitPanel && splitPanelToggle.displayed && (\n <TriggerButton\n ariaLabel={splitPanelToggle.ariaLabel}\n ariaControls={splitPanelControlId}\n ariaExpanded={!!isSplitPanelOpen}\n className={clsx(styles['drawers-trigger'], splitPanelTestUtilStyles['open-button'])}\n iconName=\"view-vertical\"\n onClick={() => handleSplitPanelClick()}\n selected={hasSplitPanel && isSplitPanelOpen}\n ref={splitPanelRefs.toggle}\n highContrastHeader={headerVariant === 'high-contrast'}\n />\n )}\n </div>\n </aside>\n );\n}\n\n/**\n * The MobileTriggers will be mounted inside of the AppBar component and\n * only rendered when Drawers are defined in mobile viewports. The same logic\n * will in the AppBar component will suppress the rendering of the legacy\n * trigger button for the Tools drawer.\n */\nexport function MobileTriggers() {\n const {\n activeDrawerId,\n drawers,\n drawersAriaLabel,\n drawersOverflowAriaLabel,\n drawersOverflowWithBadgeAriaLabel,\n drawersRefs,\n handleDrawersClick,\n hasDrawerViewportOverlay,\n headerVariant,\n } = useAppLayoutInternals();\n\n const previousActiveDrawerId = useRef(activeDrawerId);\n\n if (!drawers) {\n return null;\n }\n\n if (activeDrawerId) {\n previousActiveDrawerId.current = activeDrawerId;\n }\n\n const { visibleItems, overflowItems } = splitItems(drawers, VISIBLE_MOBILE_TOOLBAR_TRIGGERS_LIMIT, activeDrawerId);\n const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n\n return (\n <aside\n aria-hidden={hasDrawerViewportOverlay}\n className={clsx({\n [styles.unfocusable]: hasDrawerViewportOverlay,\n })}\n aria-label={drawersAriaLabel}\n role=\"region\"\n >\n <div\n className={styles['drawers-mobile-triggers-container']}\n aria-label={drawersAriaLabel}\n role=\"toolbar\"\n aria-orientation=\"horizontal\"\n >\n {visibleItems.map(item => {\n const isForPreviousActiveDrawer = previousActiveDrawerId?.current === item.id;\n return (\n <TriggerButton\n ariaExpanded={item.id === activeDrawerId}\n ariaLabel={item.ariaLabels?.triggerButton}\n ariaControls={activeDrawerId === item.id ? item.id : undefined}\n className={clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], {\n [testutilStyles['drawers-trigger-with-badge']]: item.badge,\n [testutilStyles['tools-toggle']]: item.id === TOOLS_DRAWER_ID,\n })}\n disabled={hasDrawerViewportOverlay}\n ref={isForPreviousActiveDrawer ? drawersRefs.toggle : undefined}\n iconName={item?.trigger?.iconName}\n iconSvg={item?.trigger?.iconSvg}\n badge={item.badge}\n key={item.id}\n onClick={() => handleDrawersClick(item.id)}\n testId={`awsui-app-layout-trigger-${item.id}`}\n highContrastHeader={headerVariant === 'high-contrast'}\n selected={item.id === activeDrawerId}\n />\n );\n })}\n {overflowItems.length > 0 && (\n <OverflowMenu\n items={overflowItems}\n ariaLabel={overflowMenuHasBadge ? drawersOverflowWithBadgeAriaLabel : drawersOverflowAriaLabel}\n onItemClick={({ detail }) => handleDrawersClick(detail.id)}\n />\n )}\n </div>\n </aside>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"drawers.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/drawers.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { isThemeActive, Theme } from '@cloudscape-design/component-toolkit/internal';\n\nimport { InternalButton } from '../../button/internal';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { splitItems } from '../drawer/drawers-helpers';\nimport OverflowMenu from '../drawer/overflow-menu';\nimport { TOOLS_DRAWER_ID } from '../utils/use-drawers';\nimport { useAppLayoutInternals } from './context';\nimport SplitPanel from './split-panel';\nimport TriggerButton from './trigger-button';\n\nimport splitPanelTestUtilStyles from '../../split-panel/test-classes/styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\n/**\n * The VISIBLE_MOBILE_TOOLBAR_TRIGGERS_LIMIT is used to reduce the number\n * of triggers that are initially visible on the mobile toolbar, the rest\n * are then placed into an overflow menu\n *\n * Note if one of the triggers is for a split-panel, it would not count that\n */\nconst VISIBLE_MOBILE_TOOLBAR_TRIGGERS_LIMIT = 2;\n\n/**\n * The Drawers root component is mounted in the AppLayout index file. It will only\n * render if the drawers are defined, and it will take over the mounting of and\n * rendering of the Tools and SplitPanel (side position) if they exist. If drawers\n * do not exist then the Tools and SplitPanel will be handled by the Tools component.\n */\nexport default function Drawers() {\n const {\n disableBodyScroll,\n drawers,\n drawersTriggerCount,\n hasDrawerViewportOverlay,\n hasOpenDrawer,\n navigationOpen,\n navigationHide,\n isMobile,\n } = useAppLayoutInternals();\n\n const isUnfocusable = hasDrawerViewportOverlay && navigationOpen && !navigationHide;\n\n if (!drawers || drawersTriggerCount === 0) {\n return null;\n }\n\n return (\n <div\n className={clsx(styles['drawers-container'], {\n [styles['disable-body-scroll']]: disableBodyScroll,\n [styles['has-open-drawer']]: hasOpenDrawer,\n [styles.unfocusable]: isUnfocusable,\n })}\n >\n <SplitPanel.Side />\n <ActiveDrawer />\n {!isMobile && <DesktopTriggers />}\n </div>\n );\n}\n\nfunction ActiveDrawer() {\n const {\n activeDrawerId,\n ariaLabels,\n drawers,\n drawersRefs,\n handleDrawersClick,\n handleToolsClick,\n hasDrawerViewportOverlay,\n isMobile,\n navigationOpen,\n navigationHide,\n loseDrawersFocus,\n resizeHandle,\n drawerSize,\n drawersMinWidth,\n drawersMaxWidth,\n drawerRef,\n } = useAppLayoutInternals();\n\n const activeDrawer = drawers?.find(item => item.id === activeDrawerId) ?? null;\n\n const computedAriaLabels = {\n closeButton: activeDrawerId ? activeDrawer?.ariaLabels?.closeButton : ariaLabels?.toolsClose,\n content: activeDrawerId ? activeDrawer?.ariaLabels?.drawerName : ariaLabels?.tools,\n };\n\n const isHidden = !activeDrawerId;\n const isUnfocusable = isHidden || (hasDrawerViewportOverlay && navigationOpen && !navigationHide);\n const isToolsDrawer = activeDrawerId === TOOLS_DRAWER_ID;\n const toolsContent = drawers?.find(drawer => drawer.id === TOOLS_DRAWER_ID)?.content;\n\n const size = getLimitedValue(drawersMinWidth, drawerSize, drawersMaxWidth);\n\n return (\n <aside\n id={activeDrawerId ?? undefined}\n aria-hidden={isHidden}\n aria-label={computedAriaLabels.content}\n className={clsx(styles.drawer, {\n [styles['is-drawer-open']]: activeDrawerId,\n [styles.unfocusable]: isUnfocusable,\n [styles['one-theme']]: isThemeActive(Theme.OneTheme),\n [testutilStyles['active-drawer']]: activeDrawerId,\n [testutilStyles.tools]: isToolsDrawer,\n })}\n style={{\n ...(!isMobile && drawerSize && { [customCssProps.drawerSize]: `${size}px` }),\n }}\n ref={drawerRef}\n onBlur={e => {\n if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n loseDrawersFocus();\n }\n }}\n >\n {!isMobile && activeDrawer?.resizable && <div className={styles['drawer-slider']}>{resizeHandle}</div>}\n <div className={styles['drawer-content-container']}>\n <div className={styles['drawer-close-button']}>\n <InternalButton\n ariaLabel={computedAriaLabels.closeButton}\n className={clsx({\n [testutilStyles['active-drawer-close-button']]: activeDrawerId,\n [testutilStyles['tools-close']]: isToolsDrawer,\n })}\n formAction=\"none\"\n iconName={isMobile ? 'close' : 'angle-right'}\n onClick={() => {\n handleDrawersClick(activeDrawerId);\n handleToolsClick(false);\n }}\n ref={drawersRefs.close}\n variant=\"icon\"\n />\n </div>\n {toolsContent && (\n <div\n key={TOOLS_DRAWER_ID}\n className={clsx(\n styles['drawer-content'],\n activeDrawerId !== TOOLS_DRAWER_ID && styles['drawer-content-hidden']\n )}\n >\n {toolsContent}\n </div>\n )}\n {activeDrawerId !== TOOLS_DRAWER_ID && (\n <div key={activeDrawerId} className={styles['drawer-content']}>\n {activeDrawerId && activeDrawer?.content}\n </div>\n )}\n </div>\n </aside>\n );\n}\n\n/**\n * The DesktopTriggers will render the trigger buttons for Tools, Drawers, and the\n * SplitPanel in non mobile viewports. Changes to the activeDrawerId need to be\n * tracked by the previousActiveDrawerId property in order to appropriately apply\n * the ref required to manage focus control.\n */\nfunction DesktopTriggers() {\n const {\n activeDrawerId,\n drawers,\n drawersAriaLabel,\n drawersOverflowAriaLabel,\n drawersOverflowWithBadgeAriaLabel,\n drawersRefs,\n drawersTriggerCount,\n handleDrawersClick,\n handleSplitPanelClick,\n hasOpenDrawer,\n isSplitPanelOpen,\n splitPanel,\n splitPanelControlId,\n splitPanelDisplayed,\n splitPanelPosition,\n splitPanelRefs,\n splitPanelToggle,\n splitPanelReportedHeaderHeight,\n splitPanelReportedSize,\n headerVariant,\n } = useAppLayoutInternals();\n\n const hasMultipleTriggers = drawersTriggerCount > 1;\n const hasSplitPanel = splitPanel && splitPanelDisplayed && splitPanelPosition === 'side';\n\n const previousActiveDrawerId = useRef(activeDrawerId);\n const [containerHeight, triggersContainerRef] = useContainerQuery(rect => rect.contentBoxHeight);\n\n if (activeDrawerId) {\n previousActiveDrawerId.current = activeDrawerId;\n }\n\n const splitPanelHeight =\n isSplitPanelOpen && splitPanelPosition === 'bottom' ? splitPanelReportedSize : splitPanelReportedHeaderHeight;\n\n const getIndexOfOverflowItem = () => {\n if (containerHeight) {\n const ITEM_HEIGHT = 48;\n const overflowSpot =\n activeDrawerId && isSplitPanelOpen\n ? (containerHeight - splitPanelReportedHeaderHeight) / 1.5\n : (containerHeight - splitPanelHeight) / 1.5;\n\n const index = Math.floor(overflowSpot / ITEM_HEIGHT);\n\n let splitPanelItem = 0;\n if (hasSplitPanel && splitPanelToggle.displayed) {\n splitPanelItem = 1;\n }\n return index - splitPanelItem;\n }\n\n return 0;\n };\n\n const { visibleItems, overflowItems } = splitItems(drawers ?? undefined, getIndexOfOverflowItem(), activeDrawerId);\n const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n\n return (\n <aside\n className={clsx(styles['drawers-desktop-triggers-container'], {\n [styles['has-multiple-triggers']]: hasMultipleTriggers,\n [styles['has-open-drawer']]: hasOpenDrawer,\n [styles['one-theme']]: isThemeActive(Theme.OneTheme),\n })}\n aria-label={drawersAriaLabel}\n ref={triggersContainerRef}\n role=\"region\"\n >\n <div\n className={clsx(styles['drawers-trigger-content'], {\n [styles['has-multiple-triggers']]: hasMultipleTriggers,\n [styles['has-open-drawer']]: hasOpenDrawer,\n })}\n aria-label={drawersAriaLabel}\n role=\"toolbar\"\n aria-orientation=\"vertical\"\n >\n {visibleItems.map(item => {\n const isForPreviousActiveDrawer = previousActiveDrawerId?.current === item.id;\n return (\n <TriggerButton\n ariaLabel={item.ariaLabels?.triggerButton}\n ariaExpanded={item.id === activeDrawerId}\n ariaControls={activeDrawerId === item.id ? item.id : undefined}\n className={clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], {\n [testutilStyles['drawers-trigger-with-badge']]: item.badge,\n [testutilStyles['tools-toggle']]: item.id === TOOLS_DRAWER_ID,\n })}\n iconName={item?.trigger?.iconName}\n iconSvg={item?.trigger?.iconSvg}\n key={item.id}\n onClick={() => handleDrawersClick(item.id)}\n ref={isForPreviousActiveDrawer ? drawersRefs.toggle : undefined}\n badge={item.badge}\n testId={`awsui-app-layout-trigger-${item.id}`}\n highContrastHeader={headerVariant === 'high-contrast'}\n selected={item.id === activeDrawerId}\n />\n );\n })}\n\n {overflowItems.length > 0 && (\n <OverflowMenu\n items={overflowItems}\n ariaLabel={overflowMenuHasBadge ? drawersOverflowWithBadgeAriaLabel : drawersOverflowAriaLabel}\n customTriggerBuilder={({ onClick, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => (\n <TriggerButton\n ref={triggerRef}\n ariaLabel={ariaLabel}\n ariaExpanded={ariaExpanded}\n badge={overflowMenuHasBadge}\n className={clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], testUtilsClass)}\n iconName=\"ellipsis\"\n onClick={onClick}\n highContrastHeader={headerVariant === 'high-contrast'}\n />\n )}\n onItemClick={({ detail }) => {\n handleDrawersClick(detail.id);\n }}\n />\n )}\n {hasSplitPanel && splitPanelToggle.displayed && (\n <TriggerButton\n ariaLabel={splitPanelToggle.ariaLabel}\n ariaControls={splitPanelControlId}\n ariaExpanded={!!isSplitPanelOpen}\n className={clsx(styles['drawers-trigger'], splitPanelTestUtilStyles['open-button'])}\n iconName=\"view-vertical\"\n onClick={() => handleSplitPanelClick()}\n selected={hasSplitPanel && isSplitPanelOpen}\n ref={splitPanelRefs.toggle}\n highContrastHeader={headerVariant === 'high-contrast'}\n />\n )}\n </div>\n </aside>\n );\n}\n\n/**\n * The MobileTriggers will be mounted inside of the AppBar component and\n * only rendered when Drawers are defined in mobile viewports. The same logic\n * will in the AppBar component will suppress the rendering of the legacy\n * trigger button for the Tools drawer.\n */\nexport function MobileTriggers() {\n const {\n activeDrawerId,\n drawers,\n drawersAriaLabel,\n drawersOverflowAriaLabel,\n drawersOverflowWithBadgeAriaLabel,\n drawersRefs,\n handleDrawersClick,\n hasDrawerViewportOverlay,\n headerVariant,\n } = useAppLayoutInternals();\n\n const previousActiveDrawerId = useRef(activeDrawerId);\n\n if (!drawers) {\n return null;\n }\n\n if (activeDrawerId) {\n previousActiveDrawerId.current = activeDrawerId;\n }\n\n const { visibleItems, overflowItems } = splitItems(drawers, VISIBLE_MOBILE_TOOLBAR_TRIGGERS_LIMIT, activeDrawerId);\n const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n\n return (\n <aside\n aria-hidden={hasDrawerViewportOverlay}\n className={clsx({\n [styles.unfocusable]: hasDrawerViewportOverlay,\n })}\n aria-label={drawersAriaLabel}\n role=\"region\"\n >\n <div\n className={styles['drawers-mobile-triggers-container']}\n aria-label={drawersAriaLabel}\n role=\"toolbar\"\n aria-orientation=\"horizontal\"\n >\n {visibleItems.map(item => {\n const isForPreviousActiveDrawer = previousActiveDrawerId?.current === item.id;\n return (\n <TriggerButton\n ariaExpanded={item.id === activeDrawerId}\n ariaLabel={item.ariaLabels?.triggerButton}\n ariaControls={activeDrawerId === item.id ? item.id : undefined}\n className={clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'], {\n [testutilStyles['drawers-trigger-with-badge']]: item.badge,\n [testutilStyles['tools-toggle']]: item.id === TOOLS_DRAWER_ID,\n })}\n disabled={hasDrawerViewportOverlay}\n ref={isForPreviousActiveDrawer ? drawersRefs.toggle : undefined}\n iconName={item?.trigger?.iconName}\n iconSvg={item?.trigger?.iconSvg}\n badge={item.badge}\n key={item.id}\n onClick={() => handleDrawersClick(item.id)}\n testId={`awsui-app-layout-trigger-${item.id}`}\n highContrastHeader={headerVariant === 'high-contrast'}\n selected={item.id === activeDrawerId}\n />\n );\n })}\n {overflowItems.length > 0 && (\n <OverflowMenu\n items={overflowItems}\n ariaLabel={overflowMenuHasBadge ? drawersOverflowWithBadgeAriaLabel : drawersOverflowAriaLabel}\n onItemClick={({ detail }) => handleDrawersClick(detail.id)}\n />\n )}\n </div>\n </aside>\n );\n}\n"]}
|