@cloudscape-design/components-themeable 3.0.156 → 3.0.158
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/select/parts/styles.scss +9 -0
- package/lib/internal/scss/table/body-cell/styles.scss +131 -29
- package/lib/internal/scss/table/header-cell/styles.scss +15 -7
- package/lib/internal/template/breadcrumb-group/internal.d.ts +1 -1
- package/lib/internal/template/breadcrumb-group/internal.d.ts.map +1 -1
- package/lib/internal/template/breadcrumb-group/internal.js.map +1 -1
- package/lib/internal/template/button/internal.d.ts +1 -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/form-field/interfaces.d.ts +10 -0
- package/lib/internal/template/form-field/interfaces.d.ts.map +1 -1
- package/lib/internal/template/form-field/interfaces.js.map +1 -1
- package/lib/internal/template/form-field/internal.d.ts +1 -1
- package/lib/internal/template/form-field/internal.d.ts.map +1 -1
- package/lib/internal/template/form-field/internal.js +5 -4
- package/lib/internal/template/form-field/internal.js.map +1 -1
- package/lib/internal/template/input/internal.d.ts.map +1 -1
- package/lib/internal/template/input/internal.js +16 -4
- package/lib/internal/template/input/internal.js.map +1 -1
- package/lib/internal/template/internal/components/button-trigger/index.d.ts +1 -0
- package/lib/internal/template/internal/components/button-trigger/index.d.ts.map +1 -1
- package/lib/internal/template/internal/components/button-trigger/index.js +2 -2
- package/lib/internal/template/internal/components/button-trigger/index.js.map +1 -1
- package/lib/internal/template/internal/context/form-field-context.d.ts +6 -2
- package/lib/internal/template/internal/context/form-field-context.d.ts.map +1 -1
- package/lib/internal/template/internal/context/form-field-context.js +7 -1
- package/lib/internal/template/internal/context/form-field-context.js.map +1 -1
- package/lib/internal/template/internal/environment.js +1 -1
- package/lib/internal/template/internal/types.d.ts +9 -0
- package/lib/internal/template/internal/types.d.ts.map +1 -1
- package/lib/internal/template/internal/types.js +0 -2
- package/lib/internal/template/internal/types.js.map +1 -1
- package/lib/internal/template/multiselect/interfaces.d.ts +4 -0
- package/lib/internal/template/multiselect/interfaces.d.ts.map +1 -1
- package/lib/internal/template/multiselect/interfaces.js.map +1 -1
- package/lib/internal/template/multiselect/internal.d.ts.map +1 -1
- package/lib/internal/template/multiselect/internal.js +2 -2
- package/lib/internal/template/multiselect/internal.js.map +1 -1
- package/lib/internal/template/select/interfaces.d.ts +4 -0
- package/lib/internal/template/select/interfaces.d.ts.map +1 -1
- package/lib/internal/template/select/interfaces.js.map +1 -1
- package/lib/internal/template/select/internal.d.ts +1 -1
- package/lib/internal/template/select/internal.d.ts.map +1 -1
- package/lib/internal/template/select/internal.js +2 -2
- package/lib/internal/template/select/internal.js.map +1 -1
- package/lib/internal/template/select/parts/styles.css.js +9 -9
- package/lib/internal/template/select/parts/styles.scoped.css +27 -9
- package/lib/internal/template/select/parts/styles.selectors.js +9 -9
- package/lib/internal/template/select/utils/use-select.d.ts +2 -1
- package/lib/internal/template/select/utils/use-select.d.ts.map +1 -1
- package/lib/internal/template/select/utils/use-select.js +4 -2
- package/lib/internal/template/select/utils/use-select.js.map +1 -1
- package/lib/internal/template/table/body-cell/click-away.d.ts +9 -0
- package/lib/internal/template/table/body-cell/click-away.d.ts.map +1 -0
- package/lib/internal/template/table/body-cell/click-away.js +38 -0
- package/lib/internal/template/table/body-cell/click-away.js.map +1 -0
- package/lib/internal/template/table/body-cell/index.d.ts +11 -20
- package/lib/internal/template/table/body-cell/index.d.ts.map +1 -1
- package/lib/internal/template/table/body-cell/index.js +48 -9
- package/lib/internal/template/table/body-cell/index.js.map +1 -1
- package/lib/internal/template/table/body-cell/inline-editor.d.ts +12 -0
- package/lib/internal/template/table/body-cell/inline-editor.d.ts.map +1 -0
- package/lib/internal/template/table/body-cell/inline-editor.js +88 -0
- package/lib/internal/template/table/body-cell/inline-editor.js.map +1 -0
- package/lib/internal/template/table/body-cell/styles.css.js +18 -12
- package/lib/internal/template/table/body-cell/styles.scoped.css +229 -46
- package/lib/internal/template/table/body-cell/styles.selectors.js +18 -12
- package/lib/internal/template/table/body-cell/td-element.d.ts +21 -0
- package/lib/internal/template/table/body-cell/td-element.d.ts.map +1 -0
- package/lib/internal/template/table/body-cell/td-element.js +11 -0
- package/lib/internal/template/table/body-cell/td-element.js.map +1 -0
- package/lib/internal/template/table/body-cell/use-stable-scroll-position.d.ts +17 -0
- package/lib/internal/template/table/body-cell/use-stable-scroll-position.d.ts.map +1 -0
- package/lib/internal/template/table/body-cell/use-stable-scroll-position.js +48 -0
- package/lib/internal/template/table/body-cell/use-stable-scroll-position.js.map +1 -0
- package/lib/internal/template/table/header-cell/index.d.ts +8 -7
- package/lib/internal/template/table/header-cell/index.d.ts.map +1 -1
- package/lib/internal/template/table/header-cell/index.js +6 -2
- package/lib/internal/template/table/header-cell/index.js.map +1 -1
- package/lib/internal/template/table/header-cell/styles.css.js +19 -18
- package/lib/internal/template/table/header-cell/styles.scoped.css +40 -35
- package/lib/internal/template/table/header-cell/styles.selectors.js +19 -18
- package/lib/internal/template/table/header-cell/utils.d.ts +1 -1
- package/lib/internal/template/table/header-cell/utils.d.ts.map +1 -1
- package/lib/internal/template/table/interfaces.d.ts +85 -10
- 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 +68 -18
- package/lib/internal/template/table/internal.js.map +1 -1
- 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/table/use-table-focus-navigation.d.ts +16 -0
- package/lib/internal/template/table/use-table-focus-navigation.d.ts.map +1 -0
- package/lib/internal/template/table/use-table-focus-navigation.js +131 -0
- package/lib/internal/template/table/use-table-focus-navigation.js.map +1 -0
- package/lib/internal/template/table/utils.d.ts +1 -1
- package/lib/internal/template/table/utils.d.ts.map +1 -1
- package/lib/internal/template/test-utils/dom/table/index.d.ts +4 -0
- package/lib/internal/template/test-utils/dom/table/index.js +21 -5
- package/lib/internal/template/test-utils/dom/table/index.js.map +1 -1
- package/lib/internal/template/test-utils/selectors/table/index.d.ts +4 -0
- package/lib/internal/template/test-utils/selectors/table/index.js +21 -5
- package/lib/internal/template/test-utils/selectors/table/index.js.map +1 -1
- package/lib/internal/template/test-utils/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
@use '../../internal/styles' as styles;
|
|
7
7
|
@use '../../internal/styles/tokens' as awsui;
|
|
8
|
+
@use '../../internal/hooks/focus-visible' as focus-visible;
|
|
8
9
|
|
|
9
10
|
.placeholder {
|
|
10
11
|
@include styles.form-placeholder;
|
|
@@ -36,6 +37,14 @@ $checkbox-size: awsui.$size-control;
|
|
|
36
37
|
|
|
37
38
|
.trigger {
|
|
38
39
|
@include styles.text-overflow-ellipsis;
|
|
40
|
+
@include focus-visible.when-visible {
|
|
41
|
+
@include styles.focus-highlight(
|
|
42
|
+
(
|
|
43
|
+
'vertical': calc(-1 * #{awsui.$space-scaled-xxs}),
|
|
44
|
+
'horizontal': calc(-1 * #{awsui.$space-scaled-xs}),
|
|
45
|
+
)
|
|
46
|
+
);
|
|
47
|
+
}
|
|
39
48
|
}
|
|
40
49
|
|
|
41
50
|
.layout-strut {
|
|
@@ -3,7 +3,9 @@
|
|
|
3
3
|
SPDX-License-Identifier: Apache-2.0
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
+
@use '../../internal/styles' as styles;
|
|
6
7
|
@use '../../internal/styles/tokens' as awsui;
|
|
8
|
+
@use '../../internal/hooks/focus-visible' as focus-visible;
|
|
7
9
|
|
|
8
10
|
$cell-vertical-padding: awsui.$space-scaled-xs;
|
|
9
11
|
// Calculate padding to prevent a shift in content after selection due to the difference
|
|
@@ -36,6 +38,35 @@ $border-placeholder: awsui.$border-item-width solid transparent;
|
|
|
36
38
|
border-right: $border-placeholder;
|
|
37
39
|
padding-right: $cell-edge-horizontal-padding;
|
|
38
40
|
}
|
|
41
|
+
&.is-visual-refresh:first-child {
|
|
42
|
+
&:not(.has-striped-rows) {
|
|
43
|
+
padding-left: awsui.$space-xxxs;
|
|
44
|
+
&:not(.body-cell-edit-active).body-cell-editable:hover {
|
|
45
|
+
padding-left: calc(#{awsui.$space-xxxs} + #{awsui.$border-divider-list-width});
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/*
|
|
50
|
+
Striped rows requires additional left padding because the
|
|
51
|
+
shaded background makes the child content appear too close
|
|
52
|
+
to the table edge.
|
|
53
|
+
*/
|
|
54
|
+
&:first-child.has-striped-rows {
|
|
55
|
+
padding-left: awsui.$space-xxs;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/*
|
|
59
|
+
Remove the placeholder border if the row is not selectable.
|
|
60
|
+
Rows that are not selectable will reserve the horizontal space
|
|
61
|
+
that the placeholder border would consume.
|
|
62
|
+
*/
|
|
63
|
+
&:not(.has-selection):not(.body-cell-editable) {
|
|
64
|
+
border-left: none;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
&:first-child:not(.is-visual-refresh) {
|
|
68
|
+
padding-left: $cell-edge-horizontal-padding;
|
|
69
|
+
}
|
|
39
70
|
&-first-row {
|
|
40
71
|
border-top: $border-placeholder;
|
|
41
72
|
}
|
|
@@ -47,7 +78,7 @@ $border-placeholder: awsui.$border-item-width solid transparent;
|
|
|
47
78
|
|
|
48
79
|
&.has-footer {
|
|
49
80
|
/*
|
|
50
|
-
Add a bottom border to the body cells of the last row as a separator between the
|
|
81
|
+
Add a bottom border to the body cells of the last row as a separator between the
|
|
51
82
|
table and the footer
|
|
52
83
|
*/
|
|
53
84
|
border-bottom: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
|
|
@@ -104,38 +135,109 @@ $border-placeholder: awsui.$border-item-width solid transparent;
|
|
|
104
135
|
&-selected:not(.body-cell-prev-selected) {
|
|
105
136
|
padding-top: $cell-vertical-padding;
|
|
106
137
|
}
|
|
107
|
-
|
|
138
|
+
&-editor {
|
|
139
|
+
top: 0;
|
|
140
|
+
right: 0;
|
|
141
|
+
bottom: 0;
|
|
142
|
+
position: absolute;
|
|
108
143
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
*/
|
|
113
|
-
.body-cell:not(.is-visual-refresh) {
|
|
114
|
-
&:first-child {
|
|
115
|
-
padding-left: $cell-edge-horizontal-padding;
|
|
116
|
-
}
|
|
117
|
-
}
|
|
144
|
+
display: flex;
|
|
145
|
+
align-items: center;
|
|
146
|
+
justify-content: flex-end;
|
|
118
147
|
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
148
|
+
padding-right: awsui.$space-xs;
|
|
149
|
+
|
|
150
|
+
&-form {
|
|
151
|
+
margin: calc(-1 * #{awsui.$space-xs}) calc(-1.5 * #{awsui.$space-xs});
|
|
152
|
+
.is-visual-refresh.body-cell:first-child.has-striped-rows > & {
|
|
153
|
+
margin-left: calc(-1 * #{awsui.$space-xxs});
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.is-visual-refresh.body-cell:first-child:not(.has-striped-rows) > & {
|
|
157
|
+
margin-left: calc(-1 * #{awsui.$space-xxxs});
|
|
158
|
+
}
|
|
159
|
+
}
|
|
128
160
|
|
|
129
|
-
|
|
130
|
-
|
|
161
|
+
&-row {
|
|
162
|
+
display: flex;
|
|
163
|
+
flex-flow: row nowrap;
|
|
164
|
+
align-items: center;
|
|
165
|
+
justify-content: space-between;
|
|
166
|
+
column-gap: awsui.$space-xxs;
|
|
167
|
+
& > :not(:last-child) {
|
|
168
|
+
flex-grow: 1;
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
&-controls {
|
|
172
|
+
flex-shrink: 0;
|
|
173
|
+
}
|
|
131
174
|
}
|
|
175
|
+
&.body-cell-editable {
|
|
176
|
+
position: relative;
|
|
177
|
+
cursor: pointer;
|
|
178
|
+
|
|
179
|
+
&.body-cell-edit-active {
|
|
180
|
+
overflow: visible;
|
|
181
|
+
}
|
|
132
182
|
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
183
|
+
&:not(.body-cell-edit-active) {
|
|
184
|
+
& > .body-cell-editor {
|
|
185
|
+
opacity: 0;
|
|
186
|
+
}
|
|
187
|
+
&:hover {
|
|
188
|
+
position: relative;
|
|
189
|
+
background-color: awsui.$color-background-dropdown-item-hover;
|
|
190
|
+
border: awsui.$border-divider-list-width solid awsui.$color-border-control-default;
|
|
191
|
+
left: calc(-1 * #{awsui.$border-divider-list-width});
|
|
192
|
+
right: calc(-1 * #{awsui.$border-divider-list-width});
|
|
193
|
+
& > .body-cell-editor {
|
|
194
|
+
padding-right: calc(#{awsui.$space-xs} - (2 * #{awsui.$border-divider-list-width}));
|
|
195
|
+
}
|
|
196
|
+
&.body-cell-last-row.body-cell-selected,
|
|
197
|
+
&.body-cell-next-selected {
|
|
198
|
+
padding-top: calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width} / 2));
|
|
199
|
+
padding-bottom: calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width} / 2));
|
|
200
|
+
}
|
|
201
|
+
&.body-cell-last-row:not(.body-cell-selected) {
|
|
202
|
+
padding-top: calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width}));
|
|
203
|
+
}
|
|
204
|
+
&.body-cell-first-row:not(.body-cell-selected) {
|
|
205
|
+
padding-top: calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width}));
|
|
206
|
+
padding-bottom: calc(#{$cell-vertical-padding} - calc(#{awsui.$border-divider-list-width}));
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
&:hover,
|
|
210
|
+
&[data-awsui-focus-visible='true']:focus-within {
|
|
211
|
+
padding-right: calc(#{$cell-horizontal-padding} + #{awsui.$space-l});
|
|
212
|
+
& > .body-cell-editor {
|
|
213
|
+
opacity: 1;
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
&:hover:first-child {
|
|
217
|
+
left: 0;
|
|
218
|
+
right: 0;
|
|
219
|
+
}
|
|
220
|
+
&[data-awsui-focus-visible='true']:not(:hover):focus-within {
|
|
221
|
+
@include styles.focus-highlight(
|
|
222
|
+
(
|
|
223
|
+
'vertical': calc(-1 * #{awsui.$space-scaled-xxs}),
|
|
224
|
+
'horizontal': calc(-1 * #{awsui.$space-scaled-xxs}),
|
|
225
|
+
)
|
|
226
|
+
);
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
&-editable.is-visual-refresh:not(.body-cell-edit-active):hover {
|
|
231
|
+
&:first-child {
|
|
232
|
+
border-top-left-radius: awsui.$border-radius-control-default-focus-ring;
|
|
233
|
+
border-bottom-left-radius: awsui.$border-radius-control-default-focus-ring;
|
|
234
|
+
}
|
|
235
|
+
&:last-child {
|
|
236
|
+
border-top-right-radius: awsui.$border-radius-control-default-focus-ring;
|
|
237
|
+
border-bottom-right-radius: awsui.$border-radius-control-default-focus-ring;
|
|
238
|
+
}
|
|
239
|
+
&.body-cell-first-row > .body-cell-editor {
|
|
240
|
+
padding-top: awsui.$border-divider-list-width;
|
|
241
|
+
}
|
|
140
242
|
}
|
|
141
243
|
}
|
|
@@ -53,8 +53,10 @@
|
|
|
53
53
|
color: awsui.$color-text-column-sorting-icon;
|
|
54
54
|
}
|
|
55
55
|
|
|
56
|
-
.
|
|
57
|
-
|
|
56
|
+
.edit-icon {
|
|
57
|
+
margin-left: awsui.$space-xxs;
|
|
58
|
+
margin-top: awsui.$space-scaled-xxs;
|
|
59
|
+
color: inherit;
|
|
58
60
|
}
|
|
59
61
|
|
|
60
62
|
.header-cell-content {
|
|
@@ -76,6 +78,12 @@
|
|
|
76
78
|
&.header-cell-fake-focus {
|
|
77
79
|
@include styles.focus-highlight(awsui.$space-table-header-focus-outline-gutter);
|
|
78
80
|
}
|
|
81
|
+
|
|
82
|
+
.header-cell-disabled.header-cell-sorted > & {
|
|
83
|
+
& > .sorting-icon {
|
|
84
|
+
color: awsui.$color-text-interactive-disabled;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
79
87
|
}
|
|
80
88
|
|
|
81
89
|
.header-cell-sortable:not(.header-cell-disabled) {
|
|
@@ -85,7 +93,7 @@
|
|
|
85
93
|
& > .header-cell-content:hover,
|
|
86
94
|
&.header-cell-sorted > .header-cell-content {
|
|
87
95
|
color: awsui.$color-text-interactive-active;
|
|
88
|
-
> .sorting-icon {
|
|
96
|
+
& > .sorting-icon {
|
|
89
97
|
color: awsui.$color-text-interactive-active;
|
|
90
98
|
}
|
|
91
99
|
}
|
|
@@ -106,8 +114,8 @@
|
|
|
106
114
|
|
|
107
115
|
/*
|
|
108
116
|
In Visual Refresh the first cell in the header should align
|
|
109
|
-
with the left edge of the table as closely as possible. If the
|
|
110
|
-
last header cell is sortable the sort icon should align with the
|
|
117
|
+
with the left edge of the table as closely as possible. If the
|
|
118
|
+
last header cell is sortable the sort icon should align with the
|
|
111
119
|
settings icon in the pagination slot.
|
|
112
120
|
*/
|
|
113
121
|
.header-cell:not(.is-visual-refresh) {
|
|
@@ -122,8 +130,8 @@ settings icon in the pagination slot.
|
|
|
122
130
|
}
|
|
123
131
|
|
|
124
132
|
/*
|
|
125
|
-
Striped rows requires additional left padding because the
|
|
126
|
-
shaded background makes the child content appear too close
|
|
133
|
+
Striped rows requires additional left padding because the
|
|
134
|
+
shaded background makes the child content appear too close
|
|
127
135
|
to the table edge.
|
|
128
136
|
*/
|
|
129
137
|
&:first-child.has-striped-rows {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { BreadcrumbGroupProps } from './interfaces';
|
|
2
2
|
import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
|
|
3
|
-
import { SomeRequired } from '../internal/types
|
|
3
|
+
import { SomeRequired } from '../internal/types';
|
|
4
4
|
export declare const getEventDetail: <T extends BreadcrumbGroupProps.Item>(item: T) => {
|
|
5
5
|
item: T;
|
|
6
6
|
text: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/breadcrumb-group/internal.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,oBAAoB,EAAyB,MAAM,cAAc,CAAC;AAI3E,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,YAAY,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/breadcrumb-group/internal.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,oBAAoB,EAAyB,MAAM,cAAc,CAAC;AAI3E,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAkDjD,eAAO,MAAM,cAAc;;;;CAIzB,CAAC;AAEH,KAAK,4BAA4B,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,IAAI,IAAI,YAAY,CAC/G,oBAAoB,CAAC,CAAC,CAAC,EACvB,iBAAiB,CAClB,GACC,0BAA0B,CAAC;AAE7B,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,IAAI,EAAE,EAC/G,KAAU,EACV,SAAS,EACT,eAAe,EACf,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,4BAA4B,CAAC,CAAC,CAAC,eA4DjC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/breadcrumb-group/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport styles from './styles.css.js';\nimport clsx from 'clsx';\nimport InternalIcon from '../icon/internal';\nimport InternalButtonDropdown from '../button-dropdown/internal';\nimport { LinkItem } from '../button-dropdown/interfaces';\nimport { InternalButton } from '../button/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { BreadcrumbItem } from './item/item';\nimport { BreadcrumbGroupProps, EllipsisDropdownProps } from './interfaces';\nimport { fireCancelableEvent } from '../internal/events';\nimport { getBaseProps } from '../internal/base-component';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { SomeRequired } from '../internal/types
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/breadcrumb-group/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport styles from './styles.css.js';\nimport clsx from 'clsx';\nimport InternalIcon from '../icon/internal';\nimport InternalButtonDropdown from '../button-dropdown/internal';\nimport { LinkItem } from '../button-dropdown/interfaces';\nimport { InternalButton } from '../button/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { BreadcrumbItem } from './item/item';\nimport { BreadcrumbGroupProps, EllipsisDropdownProps } from './interfaces';\nimport { fireCancelableEvent } from '../internal/events';\nimport { getBaseProps } from '../internal/base-component';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { SomeRequired } from '../internal/types';\n\nconst DropdownTrigger = (\n clickHandler: () => void,\n ref: React.Ref<ButtonProps.Ref>,\n isDisabled: boolean,\n isExpanded: boolean,\n ariaLabel?: string\n) => {\n return (\n <InternalButton\n disabled={isDisabled}\n onClick={event => {\n event.preventDefault();\n clickHandler();\n }}\n ref={ref}\n ariaExpanded={isExpanded}\n aria-haspopup={true}\n ariaLabel={ariaLabel}\n variant=\"breadcrumb-group\"\n formAction=\"none\"\n >\n ...\n </InternalButton>\n );\n};\n\nconst EllipsisDropdown = ({\n ariaLabel,\n dropdownItems,\n onDropdownItemClick,\n onDropdownItemFollow,\n}: EllipsisDropdownProps) => {\n return (\n <li className={styles.ellipsis}>\n <InternalButtonDropdown\n ariaLabel={ariaLabel}\n items={dropdownItems}\n onItemClick={onDropdownItemClick}\n onItemFollow={onDropdownItemFollow}\n customTriggerBuilder={DropdownTrigger}\n />\n <span className={styles.icon}>\n <InternalIcon name=\"angle-right\" />\n </span>\n </li>\n );\n};\n\nexport const getEventDetail = <T extends BreadcrumbGroupProps.Item>(item: T) => ({\n item,\n text: item.text,\n href: item.href,\n});\n\ntype InternalBreadcrumbGroupProps<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item> = SomeRequired<\n BreadcrumbGroupProps<T>,\n 'expandAriaLabel'\n> &\n InternalBaseComponentProps;\n\nexport default function InternalBreadcrumbGroup<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item>({\n items = [],\n ariaLabel,\n expandAriaLabel,\n onClick,\n onFollow,\n __internalRootRef,\n ...props\n}: InternalBreadcrumbGroupProps<T>) {\n for (const item of items) {\n checkSafeUrl('BreadcrumbGroup', item.href);\n }\n const baseProps = getBaseProps(props);\n const isMobile = useMobile();\n\n let breadcrumbItems = items.map((item, index) => {\n return (\n <li className={styles.item} key={index}>\n <BreadcrumbItem\n item={item}\n onClick={onClick}\n onFollow={onFollow}\n isCompressed={isMobile}\n isLast={index === items.length - 1}\n isDisplayed={!isMobile || index === items.length - 1 || index === 0}\n />\n </li>\n );\n });\n\n const getEventItem = (e: CustomEvent<{ id: string }>) => {\n const { id } = e.detail;\n return items[parseInt(id)];\n };\n\n // Add ellipsis\n if (breadcrumbItems.length >= 3) {\n const dropdownItems: Array<LinkItem> = items\n .slice(1, items.length - 1)\n .map((item: BreadcrumbGroupProps.Item, index: number) => ({\n id: (index + 1).toString(), // the first item doesn't get inside dropdown\n text: item.text,\n href: item.href || '#',\n }));\n\n breadcrumbItems = [\n breadcrumbItems[0],\n <EllipsisDropdown\n key={'ellipsis'}\n ariaLabel={expandAriaLabel}\n dropdownItems={dropdownItems}\n onDropdownItemClick={e => fireCancelableEvent(onClick, getEventDetail(getEventItem(e)), e)}\n onDropdownItemFollow={e => fireCancelableEvent(onFollow, getEventDetail(getEventItem(e)), e)}\n />,\n ...breadcrumbItems.slice(1),\n ];\n }\n\n return (\n <nav\n {...baseProps}\n className={clsx(styles['breadcrumb-group'], isMobile && styles.mobile, baseProps.className)}\n aria-label={ariaLabel || undefined}\n ref={__internalRootRef}\n >\n <ol className={styles['breadcrumb-group-list']}>{breadcrumbItems}</ol>\n </nav>\n );\n}\n"]}
|
|
@@ -6,6 +6,7 @@ export declare const InternalButton: React.ForwardRefExoticComponent<Omit<Button
|
|
|
6
6
|
__nativeAttributes?: Record<string, any> | undefined;
|
|
7
7
|
__iconClass?: string | undefined;
|
|
8
8
|
__activated?: boolean | undefined;
|
|
9
|
+
__hideFocusOutline?: boolean | undefined;
|
|
9
10
|
} & InternalBaseComponentProps & React.RefAttributes<ButtonProps.Ref>>;
|
|
10
11
|
export default InternalButton;
|
|
11
12
|
//# sourceMappingURL=internal.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/button/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/button/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAalF,eAAO,MAAM,cAAc;cAPf,WAAW,CAAC,SAAS,CAAC,GAAG,eAAe,GAAG,kBAAkB,GAAG,cAAc,GAAG,eAAe;;;;;sEAmI3G,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -13,7 +13,7 @@ import { useMergeRefs } from '../internal/hooks/use-merge-refs';
|
|
|
13
13
|
import LiveRegion from '../internal/components/live-region';
|
|
14
14
|
export var InternalButton = React.forwardRef(function (_a, ref) {
|
|
15
15
|
var _b;
|
|
16
|
-
var children = _a.children, iconName = _a.iconName, __iconClass = _a.__iconClass, onClick = _a.onClick, onFollow = _a.onFollow, _c = _a.iconAlign, iconAlign = _c === void 0 ? 'left' : _c, iconUrl = _a.iconUrl, iconSvg = _a.iconSvg, iconAlt = _a.iconAlt, _d = _a.variant, variant = _d === void 0 ? 'normal' : _d, _e = _a.loading, loading = _e === void 0 ? false : _e, loadingText = _a.loadingText, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.wrapText, wrapText = _g === void 0 ? true : _g, href = _a.href, target = _a.target, download = _a.download, _h = _a.formAction, formAction = _h === void 0 ? 'submit' : _h, ariaLabel = _a.ariaLabel, ariaExpanded = _a.ariaExpanded, __nativeAttributes = _a.__nativeAttributes,
|
|
16
|
+
var children = _a.children, iconName = _a.iconName, __iconClass = _a.__iconClass, onClick = _a.onClick, onFollow = _a.onFollow, _c = _a.iconAlign, iconAlign = _c === void 0 ? 'left' : _c, iconUrl = _a.iconUrl, iconSvg = _a.iconSvg, iconAlt = _a.iconAlt, _d = _a.variant, variant = _d === void 0 ? 'normal' : _d, _e = _a.loading, loading = _e === void 0 ? false : _e, loadingText = _a.loadingText, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.wrapText, wrapText = _g === void 0 ? true : _g, href = _a.href, target = _a.target, download = _a.download, _h = _a.formAction, formAction = _h === void 0 ? 'submit' : _h, ariaLabel = _a.ariaLabel, ariaExpanded = _a.ariaExpanded, _j = _a.__hideFocusOutline, __hideFocusOutline = _j === void 0 ? false : _j, __nativeAttributes = _a.__nativeAttributes, _k = _a.__internalRootRef, __internalRootRef = _k === void 0 ? null : _k, _l = _a.__activated, __activated = _l === void 0 ? false : _l, props = __rest(_a, ["children", "iconName", "__iconClass", "onClick", "onFollow", "iconAlign", "iconUrl", "iconSvg", "iconAlt", "variant", "loading", "loadingText", "disabled", "wrapText", "href", "target", "download", "formAction", "ariaLabel", "ariaExpanded", "__hideFocusOutline", "__nativeAttributes", "__internalRootRef", "__activated"]);
|
|
17
17
|
checkSafeUrl('Button', href);
|
|
18
18
|
var focusVisible = useFocusVisible();
|
|
19
19
|
var isAnchor = Boolean(href);
|
|
@@ -37,7 +37,7 @@ export var InternalButton = React.forwardRef(function (_a, ref) {
|
|
|
37
37
|
_b[styles['button-no-text']] = !shouldHaveContent,
|
|
38
38
|
_b[styles['is-activated']] = __activated,
|
|
39
39
|
_b));
|
|
40
|
-
var buttonProps = __assign(__assign(__assign(__assign({}, props), focusVisible), __nativeAttributes), {
|
|
40
|
+
var buttonProps = __assign(__assign(__assign(__assign({}, props), (__hideFocusOutline ? undefined : focusVisible)), __nativeAttributes), {
|
|
41
41
|
// https://github.com/microsoft/TypeScript/issues/36659
|
|
42
42
|
ref: useMergeRefs(buttonRef, __internalRootRef), 'aria-label': ariaLabel, 'aria-expanded': ariaExpanded, className: buttonClass, onClick: handleClick });
|
|
43
43
|
var iconProps = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/button/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3E,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAC9D,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAC9D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAmB,QAAQ,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAGrE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,UAAU,MAAM,oCAAoC,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/button/internal.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, { useCallback, useRef } from 'react';\nimport { fireCancelableEvent, isPlainLeftClick } from '../internal/events';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport styles from './styles.css.js';\nimport { ButtonIconProps, LeftIcon, RightIcon } from './icon-helper';\nimport { ButtonProps } from './interfaces';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport LiveRegion from '../internal/components/live-region';\n\ntype InternalButtonProps = Omit<ButtonProps, 'variant'> & {\n variant?: ButtonProps['variant'] | 'flashbar-icon' | 'breadcrumb-group' | 'menu-trigger' | 'modal-dismiss';\n __nativeAttributes?: Record<string, any>;\n __iconClass?: string;\n __activated?: boolean;\n __hideFocusOutline?: boolean;\n} & InternalBaseComponentProps;\n\nexport const InternalButton = React.forwardRef(\n (\n {\n children,\n iconName,\n __iconClass,\n onClick,\n onFollow,\n iconAlign = 'left',\n iconUrl,\n iconSvg,\n iconAlt,\n variant = 'normal',\n loading = false,\n loadingText,\n disabled = false,\n wrapText = true,\n href,\n target,\n download,\n formAction = 'submit',\n ariaLabel,\n ariaExpanded,\n __hideFocusOutline = false,\n __nativeAttributes,\n __internalRootRef = null,\n __activated = false,\n ...props\n }: InternalButtonProps,\n ref: React.Ref<ButtonProps.Ref>\n ) => {\n checkSafeUrl('Button', href);\n const focusVisible = useFocusVisible();\n const isAnchor = Boolean(href);\n const isDisabled = loading || disabled;\n const shouldHaveContent =\n children && ['icon', 'inline-icon', 'flashbar-icon', 'modal-dismiss'].indexOf(variant) === -1;\n\n const buttonRef = useRef<HTMLElement>(null);\n useForwardFocus(ref, buttonRef);\n\n const handleClick = useCallback(\n (event: React.MouseEvent) => {\n if (isAnchor && isDisabled) {\n return event.preventDefault();\n }\n\n if (isAnchor && isPlainLeftClick(event)) {\n fireCancelableEvent(onFollow, null, event);\n }\n\n const { altKey, button, ctrlKey, metaKey, shiftKey } = event;\n fireCancelableEvent(onClick, { altKey, button, ctrlKey, metaKey, shiftKey }, event);\n },\n [isAnchor, isDisabled, onClick, onFollow]\n );\n\n const buttonClass = clsx(props.className, styles.button, styles[`variant-${variant}`], {\n [styles.disabled]: isDisabled,\n [styles['button-no-wrap']]: !wrapText,\n [styles['button-no-text']]: !shouldHaveContent,\n [styles['is-activated']]: __activated,\n });\n\n const buttonProps = {\n ...props,\n ...(__hideFocusOutline ? undefined : focusVisible),\n ...__nativeAttributes,\n // https://github.com/microsoft/TypeScript/issues/36659\n ref: useMergeRefs(buttonRef as any, __internalRootRef),\n 'aria-label': ariaLabel,\n 'aria-expanded': ariaExpanded,\n className: buttonClass,\n onClick: handleClick,\n } as const;\n const iconProps: ButtonIconProps = {\n loading,\n iconName,\n iconAlign,\n iconUrl,\n iconSvg,\n iconAlt,\n variant,\n iconClass: __iconClass,\n iconSize: variant === 'modal-dismiss' ? 'medium' : 'normal',\n };\n const buttonContent = (\n <>\n <LeftIcon {...iconProps} />\n {shouldHaveContent && <span className={styles.content}>{children}</span>}\n <RightIcon {...iconProps} />\n </>\n );\n\n if (isAnchor) {\n return (\n // https://github.com/yannickcr/eslint-plugin-react/issues/2962\n // eslint-disable-next-line react/jsx-no-target-blank\n <>\n <a\n {...buttonProps}\n href={href}\n target={target}\n // security recommendation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target\n rel={target === '_blank' ? 'noopener noreferrer' : undefined}\n tabIndex={isDisabled ? -1 : undefined}\n aria-disabled={isDisabled ? true : undefined}\n download={download}\n >\n {buttonContent}\n </a>\n {loading && loadingText && <LiveRegion>{loadingText}</LiveRegion>}\n </>\n );\n }\n return (\n <>\n <button {...buttonProps} type={formAction === 'none' ? 'button' : 'submit'} disabled={isDisabled}>\n {buttonContent}\n </button>\n {loading && loadingText && <LiveRegion>{loadingText}</LiveRegion>}\n </>\n );\n }\n);\n\nexport default InternalButton;\n"]}
|
|
@@ -72,5 +72,15 @@ export interface InternalFormFieldProps extends FormFieldProps, InternalBaseComp
|
|
|
72
72
|
* Visually hide the label.
|
|
73
73
|
*/
|
|
74
74
|
__hideLabel?: boolean;
|
|
75
|
+
/**
|
|
76
|
+
* Disable the gutter applied by default.
|
|
77
|
+
*/
|
|
78
|
+
__disableGutters?: boolean;
|
|
79
|
+
/**
|
|
80
|
+
* Use a React based implementation of the autofocus behavior. This is to prevent scroll jumps
|
|
81
|
+
* when the autofocus behavior is triggered. Built-in browser autofocus behavior seems to
|
|
82
|
+
* trigger a scroll jump even when the element is already in the viewport.
|
|
83
|
+
*/
|
|
84
|
+
__useReactAutofocus?: boolean;
|
|
75
85
|
}
|
|
76
86
|
//# sourceMappingURL=interfaces.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/form-field/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,MAAM,WAAW,cAAe,SAAQ,kBAAkB;IACxD;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC;IAEzC;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEnC;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,yBAAiB,cAAc,CAAC;IAC9B,UAAiB,WAAW;QAC1B;;WAEG;QACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;KAC7B;CACF;AAED,MAAM,WAAW,sBAAuB,SAAQ,cAAc,EAAE,0BAA0B;IACxF;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/form-field/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,MAAM,WAAW,cAAe,SAAQ,kBAAkB;IACxD;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC;IAEzC;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEnC;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,yBAAiB,cAAc,CAAC;IAC9B,UAAiB,WAAW;QAC1B;;WAEG;QACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;KAC7B;CACF;AAED,MAAM,WAAW,sBAAuB,SAAQ,cAAc,EAAE,0BAA0B;IACxF;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/form-field/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport React from 'react';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\nexport interface FormFieldProps extends BaseComponentProps {\n /**\n * The ID of the primary form control. You can use this to set the\n * `for` attribute of a label for accessibility.\n *\n * If you don't set this property, the control group automatically sets\n * the label to the ID of an inner form control (for example, an [input](/components/input) component).\n * This only works well if you're using a single control in the form field.\n */\n controlId?: string;\n\n /**\n * Determines whether the primary control should expand to 12 columns.\n *\n * By default (or when this property is set to `false`), the primary control\n * occupies 9 columns. The secondary control uses the remaining 3 columns.\n * On smaller viewports, both components occupy 12 columns and stack on top of each other.\n *\n * If this property is set to `true`, the primary control uses the full\n * 12 columns. The secondary control (if present) also uses 12 columns, and the two\n * controls stack on top of each other.\n */\n stretch?: boolean;\n\n /**\n * The main label for the form field.\n */\n label?: React.ReactNode;\n\n /**\n * An object containing all the necessary localized strings required by the component.\n */\n i18nStrings?: FormFieldProps.I18nStrings;\n\n /**\n * Use to display an 'Info' link next to the label.\n */\n info?: React.ReactNode;\n\n /**\n * The primary form control (for example, input, textarea, etc.).\n * @displayname control\n */\n children?: React.ReactNode;\n\n /**\n * A secondary control. You can use this for custom actions and content.\n */\n secondaryControl?: React.ReactNode;\n\n /**\n * Detailed information about the form field that's displayed below the label.\n */\n description?: React.ReactNode;\n\n /**\n * Constraint text that's displayed below the control. Use this to provide\n * additional information about valid formats, etc.\n */\n constraintText?: React.ReactNode;\n\n /**\n * Text that displays as a validation message. If this is set to a\n * non-empty string, it will render the form field as invalid.\n */\n errorText?: React.ReactNode;\n}\n\nexport namespace FormFieldProps {\n export interface I18nStrings {\n /**\n * Provides a text alternative for the error icon in the error message.\n */\n errorIconAriaLabel?: string;\n }\n}\n\nexport interface InternalFormFieldProps extends FormFieldProps, InternalBaseComponentProps {\n /**\n * Visually hide the label.\n */\n __hideLabel?: boolean;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/form-field/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport React from 'react';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\nexport interface FormFieldProps extends BaseComponentProps {\n /**\n * The ID of the primary form control. You can use this to set the\n * `for` attribute of a label for accessibility.\n *\n * If you don't set this property, the control group automatically sets\n * the label to the ID of an inner form control (for example, an [input](/components/input) component).\n * This only works well if you're using a single control in the form field.\n */\n controlId?: string;\n\n /**\n * Determines whether the primary control should expand to 12 columns.\n *\n * By default (or when this property is set to `false`), the primary control\n * occupies 9 columns. The secondary control uses the remaining 3 columns.\n * On smaller viewports, both components occupy 12 columns and stack on top of each other.\n *\n * If this property is set to `true`, the primary control uses the full\n * 12 columns. The secondary control (if present) also uses 12 columns, and the two\n * controls stack on top of each other.\n */\n stretch?: boolean;\n\n /**\n * The main label for the form field.\n */\n label?: React.ReactNode;\n\n /**\n * An object containing all the necessary localized strings required by the component.\n */\n i18nStrings?: FormFieldProps.I18nStrings;\n\n /**\n * Use to display an 'Info' link next to the label.\n */\n info?: React.ReactNode;\n\n /**\n * The primary form control (for example, input, textarea, etc.).\n * @displayname control\n */\n children?: React.ReactNode;\n\n /**\n * A secondary control. You can use this for custom actions and content.\n */\n secondaryControl?: React.ReactNode;\n\n /**\n * Detailed information about the form field that's displayed below the label.\n */\n description?: React.ReactNode;\n\n /**\n * Constraint text that's displayed below the control. Use this to provide\n * additional information about valid formats, etc.\n */\n constraintText?: React.ReactNode;\n\n /**\n * Text that displays as a validation message. If this is set to a\n * non-empty string, it will render the form field as invalid.\n */\n errorText?: React.ReactNode;\n}\n\nexport namespace FormFieldProps {\n export interface I18nStrings {\n /**\n * Provides a text alternative for the error icon in the error message.\n */\n errorIconAriaLabel?: string;\n }\n}\n\nexport interface InternalFormFieldProps extends FormFieldProps, InternalBaseComponentProps {\n /**\n * Visually hide the label.\n */\n __hideLabel?: boolean;\n\n /**\n * Disable the gutter applied by default.\n */\n __disableGutters?: boolean;\n\n /**\n * Use a React based implementation of the autofocus behavior. This is to prevent scroll jumps\n * when the autofocus behavior is triggered. Built-in browser autofocus behavior seems to\n * trigger a scroll jump even when the element is already in the viewport.\n */\n __useReactAutofocus?: boolean;\n}\n"]}
|
|
@@ -6,6 +6,6 @@ interface FormFieldErrorProps {
|
|
|
6
6
|
errorIconAriaLabel?: string;
|
|
7
7
|
}
|
|
8
8
|
export declare const FormFieldError: ({ id, children, errorIconAriaLabel }: FormFieldErrorProps) => JSX.Element;
|
|
9
|
-
export default function InternalFormField({ controlId, stretch, label, info, i18nStrings, children, secondaryControl, description, constraintText, errorText, __hideLabel, __internalRootRef, ...rest }: InternalFormFieldProps): JSX.Element;
|
|
9
|
+
export default function InternalFormField({ controlId, stretch, label, info, i18nStrings, children, secondaryControl, description, constraintText, errorText, __hideLabel, __internalRootRef, __disableGutters, __useReactAutofocus, ...rest }: InternalFormFieldProps): JSX.Element;
|
|
10
10
|
export {};
|
|
11
11
|
//# sourceMappingURL=internal.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/form-field/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAGtD,UAAU,mBAAmB;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc,yCAA0C,mBAAmB,gBASvF,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,SAAS,EACT,OAAe,EACf,KAAK,EACL,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,SAAS,EACT,WAAW,EACX,iBAAwB,EACxB,GAAG,IAAI,EACR,EAAE,sBAAsB,
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/form-field/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAGtD,UAAU,mBAAmB;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc,yCAA0C,mBAAmB,gBASvF,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,SAAS,EACT,OAAe,EACf,KAAK,EACL,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,SAAS,EACT,WAAW,EACX,iBAAwB,EACxB,gBAAwB,EACxB,mBAA2B,EAC3B,GAAG,IAAI,EACR,EAAE,sBAAsB,eAkFxB"}
|
|
@@ -21,7 +21,7 @@ export var FormFieldError = function (_a) {
|
|
|
21
21
|
React.createElement("span", { className: styles.error__message }, children)));
|
|
22
22
|
};
|
|
23
23
|
export default function InternalFormField(_a) {
|
|
24
|
-
var controlId = _a.controlId, _b = _a.stretch, stretch = _b === void 0 ? false : _b, label = _a.label, info = _a.info, i18nStrings = _a.i18nStrings, children = _a.children, secondaryControl = _a.secondaryControl, description = _a.description, constraintText = _a.constraintText, errorText = _a.errorText, __hideLabel = _a.__hideLabel, _c = _a.__internalRootRef, __internalRootRef = _c === void 0 ? null : _c, rest = __rest(_a, ["controlId", "stretch", "label", "info", "i18nStrings", "children", "secondaryControl", "description", "constraintText", "errorText", "__hideLabel", "__internalRootRef"]);
|
|
24
|
+
var controlId = _a.controlId, _b = _a.stretch, stretch = _b === void 0 ? false : _b, label = _a.label, info = _a.info, i18nStrings = _a.i18nStrings, children = _a.children, secondaryControl = _a.secondaryControl, description = _a.description, constraintText = _a.constraintText, errorText = _a.errorText, __hideLabel = _a.__hideLabel, _c = _a.__internalRootRef, __internalRootRef = _c === void 0 ? null : _c, _d = _a.__disableGutters, __disableGutters = _d === void 0 ? false : _d, _e = _a.__useReactAutofocus, __useReactAutofocus = _e === void 0 ? false : _e, rest = __rest(_a, ["controlId", "stretch", "label", "info", "i18nStrings", "children", "secondaryControl", "description", "constraintText", "errorText", "__hideLabel", "__internalRootRef", "__disableGutters", "__useReactAutofocus"]);
|
|
25
25
|
var baseProps = getBaseProps(rest);
|
|
26
26
|
var isRefresh = useVisualRefresh();
|
|
27
27
|
var instanceUniqueId = useUniqueId('formField');
|
|
@@ -30,11 +30,12 @@ export default function InternalFormField(_a) {
|
|
|
30
30
|
var slotIds = getSlotIds(formFieldId, label, description, constraintText, errorText);
|
|
31
31
|
var ariaDescribedBy = getAriaDescribedBy(slotIds);
|
|
32
32
|
var gridDefinition = getGridDefinition(stretch, !!secondaryControl, isRefresh);
|
|
33
|
-
var
|
|
33
|
+
var _f = useFormFieldContext({}), parentAriaLabelledby = _f.ariaLabelledby, parentAriaDescribedby = _f.ariaDescribedby, parentInvalid = _f.invalid;
|
|
34
34
|
var contextValuesWithoutControlId = {
|
|
35
35
|
ariaLabelledby: joinStrings(parentAriaLabelledby, slotIds.label) || undefined,
|
|
36
36
|
ariaDescribedby: joinStrings(parentAriaDescribedby, ariaDescribedBy) || undefined,
|
|
37
|
-
invalid: !!errorText || !!parentInvalid
|
|
37
|
+
invalid: !!errorText || !!parentInvalid,
|
|
38
|
+
__useReactAutofocus: __useReactAutofocus
|
|
38
39
|
};
|
|
39
40
|
return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.root), ref: __internalRootRef }),
|
|
40
41
|
React.createElement("div", { className: clsx(__hideLabel && styles['visually-hidden']) },
|
|
@@ -42,7 +43,7 @@ export default function InternalFormField(_a) {
|
|
|
42
43
|
!__hideLabel && info && React.createElement("span", { className: styles.info }, info)),
|
|
43
44
|
description && (React.createElement("div", { className: styles.description, id: slotIds.description }, description)),
|
|
44
45
|
React.createElement("div", { className: clsx(styles.controls, __hideLabel && styles['label-hidden']) },
|
|
45
|
-
React.createElement(InternalGrid, { gridDefinition: gridDefinition },
|
|
46
|
+
React.createElement(InternalGrid, { gridDefinition: gridDefinition, disableGutters: __disableGutters },
|
|
46
47
|
React.createElement(FormFieldContext.Provider, { value: __assign({ controlId: generatedControlId }, contextValuesWithoutControlId) }, children && React.createElement("div", { className: styles.control }, children)),
|
|
47
48
|
secondaryControl && (React.createElement(FormFieldContext.Provider, { value: contextValuesWithoutControlId },
|
|
48
49
|
React.createElement("div", { className: styles['secondary-control'] }, secondaryControl))))),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/form-field/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC/F,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAErE,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAE3E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAQxD,MAAM,CAAC,IAAM,cAAc,GAAG,UAAC,EAAyD;QAAvD,EAAE,QAAA,EAAE,QAAQ,cAAA,EAAE,kBAAkB,wBAAA;IAA4B,OAAA,CAC3F,6BAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK;QAClC,6BAAK,SAAS,EAAE,MAAM,CAAC,0BAA0B,CAAC;YAChD,6BAAK,IAAI,EAAC,KAAK,gBAAa,kBAAkB,EAAE,SAAS,EAAE,MAAM,CAAC,0BAA0B,CAAC;gBAC3F,oBAAC,YAAY,IAAC,IAAI,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO,GAAG,CAC/C,CACF;QACN,8BAAM,SAAS,EAAE,MAAM,CAAC,cAAc,IAAG,QAAQ,CAAQ,CACrD,CACP;AAT4F,CAS5F,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/form-field/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { FormFieldContext, useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\nimport InternalGrid from '../grid/internal';\nimport InternalIcon from '../icon/internal';\nimport { getAriaDescribedBy, getGridDefinition, getSlotIds } from './util';\n\nimport styles from './styles.css.js';\nimport { InternalFormFieldProps } from './interfaces';\nimport { joinStrings } from '../internal/utils/strings';\n\ninterface FormFieldErrorProps {\n id?: string;\n children?: React.ReactNode;\n errorIconAriaLabel?: string;\n}\n\nexport const FormFieldError = ({ id, children, errorIconAriaLabel }: FormFieldErrorProps) => (\n <div id={id} className={styles.error}>\n <div className={styles['error-icon-shake-wrapper']}>\n <div role=\"img\" aria-label={errorIconAriaLabel} className={styles['error-icon-scale-wrapper']}>\n <InternalIcon name=\"status-warning\" size=\"small\" />\n </div>\n </div>\n <span className={styles.error__message}>{children}</span>\n </div>\n);\n\nexport default function InternalFormField({\n controlId,\n stretch = false,\n label,\n info,\n i18nStrings,\n children,\n secondaryControl,\n description,\n constraintText,\n errorText,\n __hideLabel,\n __internalRootRef = null,\n __disableGutters = false,\n __useReactAutofocus = false,\n ...rest\n}: InternalFormFieldProps) {\n const baseProps = getBaseProps(rest);\n const isRefresh = useVisualRefresh();\n\n const instanceUniqueId = useUniqueId('formField');\n const generatedControlId = controlId || instanceUniqueId;\n const formFieldId = controlId || generatedControlId;\n\n const slotIds = getSlotIds(formFieldId, label, description, constraintText, errorText);\n\n const ariaDescribedBy = getAriaDescribedBy(slotIds);\n\n const gridDefinition = getGridDefinition(stretch, !!secondaryControl, isRefresh);\n\n const {\n ariaLabelledby: parentAriaLabelledby,\n ariaDescribedby: parentAriaDescribedby,\n invalid: parentInvalid,\n } = useFormFieldContext({});\n\n const contextValuesWithoutControlId = {\n ariaLabelledby: joinStrings(parentAriaLabelledby, slotIds.label) || undefined,\n ariaDescribedby: joinStrings(parentAriaDescribedby, ariaDescribedBy) || undefined,\n invalid: !!errorText || !!parentInvalid,\n __useReactAutofocus,\n };\n\n return (\n <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={__internalRootRef}>\n <div className={clsx(__hideLabel && styles['visually-hidden'])}>\n {label && (\n <label className={styles.label} id={slotIds.label} htmlFor={generatedControlId}>\n {label}\n </label>\n )}\n {!__hideLabel && info && <span className={styles.info}>{info}</span>}\n </div>\n\n {description && (\n <div className={styles.description} id={slotIds.description}>\n {description}\n </div>\n )}\n\n <div className={clsx(styles.controls, __hideLabel && styles['label-hidden'])}>\n <InternalGrid gridDefinition={gridDefinition} disableGutters={__disableGutters}>\n <FormFieldContext.Provider\n value={{\n controlId: generatedControlId,\n ...contextValuesWithoutControlId,\n }}\n >\n {children && <div className={styles.control}>{children}</div>}\n </FormFieldContext.Provider>\n\n {secondaryControl && (\n <FormFieldContext.Provider value={contextValuesWithoutControlId}>\n <div className={styles['secondary-control']}>{secondaryControl}</div>\n </FormFieldContext.Provider>\n )}\n </InternalGrid>\n </div>\n\n {(constraintText || errorText) && (\n <div className={styles.hints}>\n {errorText && (\n <FormFieldError id={slotIds.error} errorIconAriaLabel={i18nStrings?.errorIconAriaLabel}>\n {errorText}\n </FormFieldError>\n )}\n {constraintText && (\n <div\n className={clsx(styles.constraint, errorText && styles['constraint-has-error'])}\n id={slotIds.constraint}\n >\n {constraintText}\n </div>\n )}\n </div>\n )}\n </div>\n );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/input/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/input/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAGzE,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG/C,OAAO,EAA6C,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC1G,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAC9F,OAAO,EAAE,kBAAkB,EAAgB,MAAM,4BAA4B,CAAC;AAG9E,OAAO,EAAE,+BAA+B,EAAuB,MAAM,wCAAwC,CAAC;AAC9G,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,MAAM,WAAW,kBACf,SAAQ,kBAAkB,EACxB,cAAc,EACd,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,EACxB,gBAAgB,EAChB,+BAA+B,EAC/B,0BAA0B;IAC5B,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,GAAG,cAAc,CAAC;IAC3C,UAAU,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC/B,iBAAiB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACzC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAE/B,WAAW,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAChC,kBAAkB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAEhC,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACzC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,gBAAgB,CAAC,EAAE,yBAAyB,CAAC,gBAAgB,CAAC,CAAC;IAC/D,kBAAkB,CAAC,EAAE,yBAAyB,CAAC;QAAE,aAAa,EAAE,IAAI,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC;IAE/E,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;;AAsKD,wBAA+C"}
|