@cloudscape-design/components-themeable 3.0.645 → 3.0.647
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/form-field/styles.scss +1 -0
- package/lib/internal/scss/link/styles.scss +0 -5
- package/lib/internal/scss/slider/mixins.scss +18 -0
- package/lib/internal/scss/slider/styles.scss +45 -0
- package/lib/internal/scss/split-panel/styles.scss +2 -0
- package/lib/internal/template/autosuggest/internal.d.ts.map +1 -1
- package/lib/internal/template/autosuggest/internal.js +10 -0
- package/lib/internal/template/autosuggest/internal.js.map +1 -1
- package/lib/internal/template/breadcrumb-group/implementation.d.ts +8 -0
- package/lib/internal/template/breadcrumb-group/implementation.d.ts.map +1 -0
- package/lib/internal/template/breadcrumb-group/implementation.js +71 -0
- package/lib/internal/template/breadcrumb-group/implementation.js.map +1 -0
- package/lib/internal/template/breadcrumb-group/index.js +1 -1
- package/lib/internal/template/breadcrumb-group/index.js.map +1 -1
- package/lib/internal/template/breadcrumb-group/internal.d.ts +1 -11
- package/lib/internal/template/breadcrumb-group/internal.d.ts.map +1 -1
- package/lib/internal/template/breadcrumb-group/internal.js +2 -70
- package/lib/internal/template/breadcrumb-group/internal.js.map +1 -1
- package/lib/internal/template/breadcrumb-group/item/item.js +1 -1
- package/lib/internal/template/breadcrumb-group/item/item.js.map +1 -1
- package/lib/internal/template/breadcrumb-group/utils.d.ts +7 -0
- package/lib/internal/template/breadcrumb-group/utils.d.ts.map +1 -0
- package/lib/internal/template/breadcrumb-group/utils.js +6 -0
- package/lib/internal/template/breadcrumb-group/utils.js.map +1 -0
- package/lib/internal/template/drawer/implementation.d.ts +7 -0
- package/lib/internal/template/drawer/implementation.d.ts.map +1 -0
- package/lib/internal/template/drawer/implementation.js +24 -0
- package/lib/internal/template/drawer/implementation.js.map +1 -0
- package/lib/internal/template/drawer/index.d.ts +1 -1
- package/lib/internal/template/drawer/index.d.ts.map +1 -1
- package/lib/internal/template/drawer/index.js +4 -18
- package/lib/internal/template/drawer/index.js.map +1 -1
- package/lib/internal/template/drawer/internal.d.ts +2 -0
- package/lib/internal/template/drawer/internal.d.ts.map +1 -0
- package/lib/internal/template/drawer/internal.js +5 -0
- package/lib/internal/template/drawer/internal.js.map +1 -0
- package/lib/internal/template/form-field/styles.css.js +23 -23
- package/lib/internal/template/form-field/styles.scoped.css +38 -37
- package/lib/internal/template/form-field/styles.selectors.js +23 -23
- package/lib/internal/template/help-panel/implementation.d.ts +7 -0
- package/lib/internal/template/help-panel/implementation.d.ts.map +1 -0
- package/lib/internal/template/help-panel/implementation.js +27 -0
- package/lib/internal/template/help-panel/implementation.js.map +1 -0
- package/lib/internal/template/help-panel/index.d.ts +1 -1
- package/lib/internal/template/help-panel/index.d.ts.map +1 -1
- package/lib/internal/template/help-panel/index.js +4 -21
- package/lib/internal/template/help-panel/index.js.map +1 -1
- package/lib/internal/template/help-panel/internal.d.ts +2 -0
- package/lib/internal/template/help-panel/internal.d.ts.map +1 -0
- package/lib/internal/template/help-panel/internal.js +5 -0
- package/lib/internal/template/help-panel/internal.js.map +1 -0
- package/lib/internal/template/internal/base-component/styles.scoped.css +10 -0
- package/lib/internal/template/internal/components/options-list/utils/use-keyboard.d.ts +2 -1
- package/lib/internal/template/internal/components/options-list/utils/use-keyboard.d.ts.map +1 -1
- package/lib/internal/template/internal/components/options-list/utils/use-keyboard.js +4 -4
- package/lib/internal/template/internal/components/options-list/utils/use-keyboard.js.map +1 -1
- package/lib/internal/template/internal/environment.js +1 -1
- package/lib/internal/template/internal/environment.json +1 -1
- 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 +31 -0
- package/lib/internal/template/internal/generated/theming/index.js +31 -0
- package/lib/internal/template/internal/widgets/index.d.ts +4 -0
- package/lib/internal/template/internal/widgets/index.d.ts.map +1 -0
- package/lib/internal/template/internal/widgets/index.js +28 -0
- package/lib/internal/template/internal/widgets/index.js.map +1 -0
- package/lib/internal/template/link/styles.css.js +20 -20
- package/lib/internal/template/link/styles.scoped.css +71 -75
- package/lib/internal/template/link/styles.selectors.js +20 -20
- package/lib/internal/template/s3-resource-selector/s3-modal/index.js +2 -2
- package/lib/internal/template/s3-resource-selector/s3-modal/index.js.map +1 -1
- package/lib/internal/template/select/utils/use-select.d.ts.map +1 -1
- package/lib/internal/template/select/utils/use-select.js +15 -1
- package/lib/internal/template/select/utils/use-select.js.map +1 -1
- package/lib/internal/template/side-navigation/implementation.d.ts +7 -0
- package/lib/internal/template/side-navigation/implementation.d.ts.map +1 -0
- package/lib/internal/template/side-navigation/implementation.js +36 -0
- package/lib/internal/template/side-navigation/implementation.js.map +1 -0
- package/lib/internal/template/side-navigation/index.d.ts +1 -1
- package/lib/internal/template/side-navigation/index.d.ts.map +1 -1
- package/lib/internal/template/side-navigation/index.js +5 -29
- package/lib/internal/template/side-navigation/index.js.map +1 -1
- package/lib/internal/template/side-navigation/internal.d.ts +1 -17
- package/lib/internal/template/side-navigation/internal.d.ts.map +1 -1
- package/lib/internal/template/side-navigation/internal.js +2 -182
- package/lib/internal/template/side-navigation/internal.js.map +1 -1
- package/lib/internal/template/side-navigation/parts.d.ts +18 -0
- package/lib/internal/template/side-navigation/parts.d.ts.map +1 -0
- package/lib/internal/template/side-navigation/parts.js +185 -0
- package/lib/internal/template/side-navigation/parts.js.map +1 -0
- package/lib/internal/template/slider/internal.d.ts.map +1 -1
- package/lib/internal/template/slider/internal.js +6 -2
- package/lib/internal/template/slider/internal.js.map +1 -1
- package/lib/internal/template/slider/styles.css.js +25 -23
- package/lib/internal/template/slider/styles.scoped.css +95 -52
- package/lib/internal/template/slider/styles.selectors.js +25 -23
- package/lib/internal/template/slider/tick-marks.d.ts +1 -0
- package/lib/internal/template/slider/tick-marks.d.ts.map +1 -1
- package/lib/internal/template/slider/tick-marks.js +4 -1
- package/lib/internal/template/slider/tick-marks.js.map +1 -1
- package/lib/internal/template/split-panel/implementation.d.ts +1 -0
- package/lib/internal/template/split-panel/implementation.d.ts.map +1 -1
- package/lib/internal/template/split-panel/implementation.js +2 -0
- package/lib/internal/template/split-panel/implementation.js.map +1 -1
- package/lib/internal/template/split-panel/styles.css.js +57 -57
- package/lib/internal/template/split-panel/styles.scoped.css +78 -77
- package/lib/internal/template/split-panel/styles.selectors.js +57 -57
- package/lib/internal/template/split-panel/widget.d.ts +1 -5
- package/lib/internal/template/split-panel/widget.d.ts.map +1 -1
- package/lib/internal/template/split-panel/widget.js +1 -13
- package/lib/internal/template/split-panel/widget.js.map +1 -1
- package/lib/internal/template/table/selection/use-selection.d.ts.map +1 -1
- package/lib/internal/template/table/selection/use-selection.js +59 -64
- package/lib/internal/template/table/selection/use-selection.js.map +1 -1
- package/package.json +1 -1
|
@@ -64,9 +64,27 @@ $border-radius-slider-thumb: 50%;
|
|
|
64
64
|
0 0 0 4px awsui.$color-background-slider-error-pressed;
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
+
@mixin warning-thumb-focus-styles {
|
|
68
|
+
background-color: awsui.$color-background-slider-warning-pressed;
|
|
69
|
+
border-block-width: 2px;
|
|
70
|
+
border-inline-width: 2px;
|
|
71
|
+
border-color: awsui.$color-background-slider-warning-pressed;
|
|
72
|
+
|
|
73
|
+
box-shadow:
|
|
74
|
+
0px 0 0 2px awsui.$color-background-slider-handle-ring,
|
|
75
|
+
0 0 0 4px awsui.$color-background-slider-warning-pressed;
|
|
76
|
+
}
|
|
77
|
+
|
|
67
78
|
@mixin error-thumb-hover-styles {
|
|
68
79
|
background-color: awsui.$color-text-status-error;
|
|
69
80
|
box-shadow:
|
|
70
81
|
0px 0 0 2px awsui.$color-background-slider-handle-ring,
|
|
71
82
|
0 0 0 4px awsui.$color-text-status-error;
|
|
72
83
|
}
|
|
84
|
+
|
|
85
|
+
@mixin warning-thumb-hover-styles {
|
|
86
|
+
background-color: awsui.$color-text-status-warning;
|
|
87
|
+
box-shadow:
|
|
88
|
+
0px 0 0 2px awsui.$color-background-slider-handle-ring,
|
|
89
|
+
0 0 0 4px awsui.$color-text-status-warning;
|
|
90
|
+
}
|
|
@@ -54,6 +54,10 @@
|
|
|
54
54
|
background-color: awsui.$color-text-status-error;
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
+
&.warning {
|
|
58
|
+
background-color: awsui.$color-text-status-warning;
|
|
59
|
+
}
|
|
60
|
+
|
|
57
61
|
&.active {
|
|
58
62
|
background-color: awsui.$color-background-slider-handle-active;
|
|
59
63
|
}
|
|
@@ -62,6 +66,10 @@
|
|
|
62
66
|
background-color: awsui.$color-background-slider-error-pressed;
|
|
63
67
|
}
|
|
64
68
|
|
|
69
|
+
&.warning-active {
|
|
70
|
+
background-color: awsui.$color-background-slider-warning-pressed;
|
|
71
|
+
}
|
|
72
|
+
|
|
65
73
|
&.disabled {
|
|
66
74
|
background-color: awsui.$color-background-control-disabled;
|
|
67
75
|
}
|
|
@@ -173,10 +181,18 @@
|
|
|
173
181
|
background: awsui.$color-text-status-error;
|
|
174
182
|
}
|
|
175
183
|
|
|
184
|
+
&.warning {
|
|
185
|
+
background: awsui.$color-text-status-warning;
|
|
186
|
+
}
|
|
187
|
+
|
|
176
188
|
&.error-active {
|
|
177
189
|
background-color: awsui.$color-background-slider-error-pressed;
|
|
178
190
|
}
|
|
179
191
|
|
|
192
|
+
&.warning-active {
|
|
193
|
+
background-color: awsui.$color-background-slider-warning-pressed;
|
|
194
|
+
}
|
|
195
|
+
|
|
180
196
|
&.disabled {
|
|
181
197
|
background: awsui.$color-background-control-disabled;
|
|
182
198
|
}
|
|
@@ -276,6 +292,35 @@
|
|
|
276
292
|
}
|
|
277
293
|
}
|
|
278
294
|
|
|
295
|
+
.warning {
|
|
296
|
+
&::-webkit-slider-thumb {
|
|
297
|
+
background-color: awsui.$color-text-status-warning;
|
|
298
|
+
border-color: awsui.$color-text-status-warning;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
&::-moz-range-thumb {
|
|
302
|
+
background-color: awsui.$color-text-status-warning;
|
|
303
|
+
border-color: awsui.$color-text-status-warning;
|
|
304
|
+
}
|
|
305
|
+
&:hover::-webkit-slider-thumb {
|
|
306
|
+
@include mixins.warning-thumb-hover-styles;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
&:hover::-moz-range-thumb {
|
|
310
|
+
@include mixins.warning-thumb-hover-styles;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
&:focus::-webkit-slider-thumb,
|
|
314
|
+
&:active::-webkit-slider-thumb {
|
|
315
|
+
@include mixins.warning-thumb-focus-styles;
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
&:focus::-moz-range-thumb,
|
|
319
|
+
&:active::-moz-range-thumb {
|
|
320
|
+
@include mixins.warning-thumb-focus-styles;
|
|
321
|
+
}
|
|
322
|
+
}
|
|
323
|
+
|
|
279
324
|
.disabled,
|
|
280
325
|
.disabled:hover,
|
|
281
326
|
.disabled:active {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAIhE,OAAO,EAAmB,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAejE,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAWlF,MAAM,WAAW,wBAAyB,SAAQ,gBAAgB,EAAE,0BAA0B;CAAG;AAEjG,QAAA,MAAM,mBAAmB,
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAIhE,OAAO,EAAmB,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAejE,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAWlF,MAAM,WAAW,wBAAyB,SAAQ,gBAAgB,EAAE,0BAA0B;CAAG;AAEjG,QAAA,MAAM,mBAAmB,uGAsOvB,CAAC;AAEH,eAAe,mBAAmB,CAAC"}
|
|
@@ -80,9 +80,19 @@ const InternalAutosuggest = React.forwardRef((props, ref) => {
|
|
|
80
80
|
fireCancelableEvent(onKeyDown, event.detail, event);
|
|
81
81
|
};
|
|
82
82
|
const handlePressArrowDown = () => {
|
|
83
|
+
if (autosuggestItemsState.items.length - 1 === autosuggestItemsState.highlightedIndex) {
|
|
84
|
+
autosuggestItemsHandlers.goHomeWithKeyboard();
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
83
87
|
autosuggestItemsHandlers.moveHighlightWithKeyboard(1);
|
|
84
88
|
};
|
|
85
89
|
const handlePressArrowUp = () => {
|
|
90
|
+
var _a;
|
|
91
|
+
if ((((_a = autosuggestItemsState.highlightedOption) === null || _a === void 0 ? void 0 : _a.type) === 'child' && autosuggestItemsState.highlightedIndex === 1) ||
|
|
92
|
+
autosuggestItemsState.highlightedIndex === 0) {
|
|
93
|
+
autosuggestItemsHandlers.goEndWithKeyboard();
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
86
96
|
autosuggestItemsHandlers.moveHighlightWithKeyboard(-1);
|
|
87
97
|
};
|
|
88
98
|
const handlePressEnter = () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/autosuggest/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;;AAEtC,OAAO,KAAK,EAAE,EAAO,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAG3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wCAAwC,CAAC;AAC3E,OAAO,cAAc,MAAM,wCAAwC,CAAC;AAEpE,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAEL,mBAAmB,EACnB,sBAAsB,GAEvB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AACjF,OAAO,eAAe,MAAM,oCAAoC,CAAC;AAEjE,OAAO,sBAAsB,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAEhE,OAAO,gBAAyC,MAAM,0CAA0C,CAAC;AACjG,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,+CAA+C,CAAC;AAIzE,MAAM,mBAAmB,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,KAA+B,EAAE,GAA8B,EAAE,EAAE;;IAC/G,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAO,EACP,OAAO,EACP,WAAW,EACX,OAAO,EACP,aAAa,GAAG,MAAM,EACtB,UAAU,GAAG,UAAU,EACvB,WAAW,EACX,cAAc,EACd,IAAI,EACJ,QAAQ,EACR,yBAAyB,GAAG,KAAK,EACjC,SAAS,EACT,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,gBAAgB,EAChB,oBAAoB,EACpB,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,QAAQ,EACR,yBAAyB,EACzB,iBAAiB,KAEf,KAAK,EADJ,SAAS,UACV,KAAK,EA5BH,kZA4BL,CAAQ,CAAC;IAEV,eAAe,CAAC,aAAa,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC;IACrE,qBAAqB,CAAC,aAAa,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC;IAEzD,MAAM,mBAAmB,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAC;IAC9D,mBAAmB,CACjB,GAAG,EACH,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,mBAAmB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA,EAAA;QACjD,MAAM,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,mBAAmB,CAAC,OAAO,0CAAE,MAAM,EAAE,CAAA,EAAA;KACpD,CAAC,EACF,EAAE,CACH,CAAC;IAEF,MAAM,IAAI,GAAG,eAAe,CAAC,aAAa,CAAC,CAAC;IAC5C,MAAM,kBAAkB,GAAG,IAAI,CAAC,oBAAoB,EAAE,SAAS,CAAC,kBAAkB,CAAC,CAAC;IACpF,MAAM,iBAAiB,GAAG,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;IACjF,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IAElE,IAAI,SAAS,CAAC,YAAY,IAAI,CAAC,WAAW,EAAE;QAC1C,QAAQ,CAAC,aAAa,EAAE,oEAAoE,CAAC,CAAC;KAC/F;IAED,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,mBAAmB,CAAC;QAC5E,OAAO,EAAE,OAAO,IAAI,EAAE;QACtB,WAAW,EAAE,KAAK;QAClB,UAAU,EAAE,KAAK;QACjB,aAAa;QACb,gBAAgB;QAChB,oBAAoB,EAAE,KAAK;QAC3B,YAAY,EAAE,CAAC,MAAuB,EAAE,EAAE;;YACxC,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,IAAI,EAAE,CAAC;YACjC,sBAAsB,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;YAC5C,sBAAsB,CAAC,QAAQ,EAAE;gBAC/B,KAAK;gBACL,cAAc,EAAE,MAAM,CAAC,IAAI,KAAK,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;aAC1E,CAAC,CAAC;YACH,MAAA,mBAAmB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;QACvC,CAAC;KACF,CAAC,CAAC;IAEH,MAAM,2BAA2B,GAAG,sBAAsB,CAAC;QACzD,OAAO;QACP,UAAU;QACV,WAAW,EAAE,CAAC,MAA8B,EAAE,EAAE,CAAC,sBAAsB,CAAC,WAAW,EAAE,MAAM,CAAC;KAC7F,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,CAAC,KAAiD,EAAE,EAAE;QACzE,wBAAwB,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QAC3C,wBAAwB,CAAC,0BAA0B,EAAE,CAAC;QACtD,sBAAsB,CAAC,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACjD,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,KAAiD,EAAE,EAAE;QAC/E,2BAA2B,CAAC,yBAAyB,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC5E,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,sBAAsB,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACvC,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,wBAAwB,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QAC1C,2BAA2B,CAAC,wBAAwB,EAAE,CAAC;QACvD,sBAAsB,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACxC,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,KAAiC,EAAE,EAAE;QACxD,mBAAmB,CAAC,OAAO,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACpD,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAAiC,EAAE,EAAE;QAC1D,mBAAmB,CAAC,SAAS,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACtD,CAAC,CAAC;IAEF,MAAM,oBAAoB,GAAG,GAAG,EAAE;QAChC,wBAAwB,CAAC,yBAAyB,CAAC,CAAC,CAAC,CAAC;IACxD,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,wBAAwB,CAAC,yBAAyB,CAAC,CAAC,CAAC,CAAC,CAAC;IACzD,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,OAAO,wBAAwB,CAAC,mCAAmC,EAAE,CAAC;IACxE,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,GAAG,EAAE;QAC/B,wBAAwB,CAAC,0BAA0B,EAAE,CAAC;IACxD,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,GAAG,EAAE;;QAC/B,2BAA2B,CAAC,2BAA2B,EAAE,CAAC;QAC1D,MAAA,mBAAmB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;IACvC,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACxD,MAAM,aAAa,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;IAC3C,MAAM,eAAe,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC9C,MAAM,SAAS,GAAG,MAAA,gBAAgB,CAAC,SAAS,mCAAI,aAAa,CAAC;IAC9D,MAAM,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;IACnC,MAAM,yBAAyB,GAAG,WAAW,EAAE,CAAC;IAChD,MAAM,mBAAmB,GAAG,qBAAqB,CAAC,iBAAiB,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,SAAS,CAAC;IAE5G,MAAM,OAAO,GAAG,CAAC,KAAK,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,MAAM,CAAC;IAC9D,MAAM,UAAU,GAAG,CAAC,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC;IACjD,MAAM,YAAY,GAAG,UAAU;QAC7B,CAAC,CAAC,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAG,qBAAqB,CAAC,KAAK,CAAC,MAAM,EAAE,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,mCAAI,CAAC,CAAC;QAClF,CAAC,CAAC,SAAS,CAAC;IACd,MAAM,cAAc,GAAG,iBAAiB,iCACnC,KAAK,KACR,OAAO;QACP,UAAU;QACV,YAAY;QACZ,kBAAkB,EAClB,eAAe,EAAE,mBAAmB,EACpC,oBAAoB,EAAE,YAAY,EAClC,mBAAmB,EAAE,CAAC,CAAC,WAAW,IAClC,CAAC;IAEH,MAAM,2BAA2B,GAAG,CAAC,OAAO,IAAI,cAAc,CAAC,OAAO,CAAC;IAEvE,OAAO,CACL,oBAAC,gBAAgB,oBACX,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC,EACjD,GAAG,EAAE,mBAAmB,EACxB,iBAAiB,EAAE,iBAAiB,EACpC,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,cAAc,EAC9B,yBAAyB,EAAE,yBAAyB,EACpD,gBAAgB,EAAE,gBAAgB,EAClC,YAAY,EAAE,MAAM,EACpB,oBAAoB,EAAE,mBAAmB,EACzC,gBAAgB,EAAE,qBAAqB,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,cAAc,CAAC,OAAO,KAAK,IAAI,EAC3F,eAAe,EACb,2BAA2B,IAAI,CAC7B,oBAAC,sBAAsB,IACrB,UAAU,EAAE,UAAU,EACtB,qBAAqB,EAAE,qBAAqB,EAC5C,wBAAwB,EAAE,wBAAwB,EAClD,mBAAmB,EAAE,mBAAmB,EACxC,aAAa,EAAE,KAAK,EACpB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,2BAA2B,CAAC,oBAAoB,EAChE,iBAAiB,EAAE,cAAc,CAAC,OAAO,KAAK,IAAI,EAClD,aAAa,EAAE,aAAa,EAC5B,iBAAiB,EAAE,iBAAiB,EACpC,yBAAyB,EAAE,yBAAyB,EACpD,UAAU,EACR,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,oBAAC,cAAc,IAAC,OAAO,EAAE,cAAc,CAAC,OAAO,EAAE,EAAE,EAAE,eAAe,GAAI,CAAC,CAAC,CAAC,IAAI,EAE5G,eAAe,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,GACrE,CACH,EAEH,cAAc,EACZ,cAAc,CAAC,QAAQ,IAAI,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,CAClD,oBAAC,cAAc,IACb,EAAE,EAAE,eAAe,EACnB,OAAO,EAAE,cAAc,CAAC,OAAO,EAC/B,QAAQ,EAAE,qBAAqB,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,GACjD,CACH,CAAC,CAAC,CAAC,IAAI,EAEV,SAAS,EAAE,UAAU,KAAK,OAAO,IAAI,CAAC,CAAC,YAAY,IAAI,CAAC,CAAC,WAAW,EACpE,eAAe,EAAE,mBAAmB,EACpC,cAAc,EAAE,kBAAkB,EAClC,gBAAgB,EAAE,oBAAoB,EACtC,cAAc,EAAE,kBAAkB,EAClC,YAAY,EAAE,gBAAgB,IAC9B,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,mBAAmB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { Ref, useImperativeHandle, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useAutosuggestItems } from './options-controller';\nimport { AutosuggestItem, AutosuggestProps } from './interfaces';\n\nimport { useDropdownStatus } from '../internal/components/dropdown-status';\nimport DropdownFooter from '../internal/components/dropdown-footer';\n\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport {\n BaseKeyDetail,\n fireCancelableEvent,\n fireNonCancelableEvent,\n NonCancelableCustomEvent,\n} from '../internal/events';\nimport { BaseChangeDetail } from '../input/interfaces';\nimport { checkOptionValueField } from '../select/utils/check-option-value-field';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport AutosuggestOptionsList from './options-list';\nimport { useAutosuggestLoadMore } from './load-more-controller';\nimport { OptionsLoadItemsDetail } from '../internal/components/dropdown/interfaces';\nimport AutosuggestInput, { AutosuggestInputRef } from '../internal/components/autosuggest-input';\nimport { useFormFieldContext } from '../contexts/form-field';\nimport { useInternalI18n } from '../i18n/context';\n\nimport styles from './styles.css.js';\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nexport interface InternalAutosuggestProps extends AutosuggestProps, InternalBaseComponentProps {}\n\nconst InternalAutosuggest = React.forwardRef((props: InternalAutosuggestProps, ref: Ref<AutosuggestProps.Ref>) => {\n const {\n value,\n onChange,\n onBlur,\n onFocus,\n onKeyUp,\n onLoadItems,\n options,\n filteringType = 'auto',\n statusType = 'finished',\n placeholder,\n clearAriaLabel,\n name,\n disabled,\n disableBrowserAutocorrect = false,\n autoFocus,\n readOnly,\n ariaLabel,\n ariaRequired,\n enteredTextLabel,\n filteringResultsText,\n onKeyDown,\n virtualScroll,\n expandToViewport,\n onSelect,\n renderHighlightedAriaLive,\n __internalRootRef,\n ...restProps\n } = props;\n\n checkControlled('Autosuggest', 'value', value, 'onChange', onChange);\n checkOptionValueField('Autosuggest', 'options', options);\n\n const autosuggestInputRef = useRef<AutosuggestInputRef>(null);\n useImperativeHandle(\n ref,\n () => ({\n focus: () => autosuggestInputRef.current?.focus(),\n select: () => autosuggestInputRef.current?.select(),\n }),\n []\n );\n\n const i18n = useInternalI18n('autosuggest');\n const errorIconAriaLabel = i18n('errorIconAriaLabel', restProps.errorIconAriaLabel);\n const selectedAriaLabel = i18n('selectedAriaLabel', restProps.selectedAriaLabel);\n const recoveryText = i18n('recoveryText', restProps.recoveryText);\n\n if (restProps.recoveryText && !onLoadItems) {\n warnOnce('Autosuggest', '`onLoadItems` must be provided for `recoveryText` to be displayed.');\n }\n\n const [autosuggestItemsState, autosuggestItemsHandlers] = useAutosuggestItems({\n options: options || [],\n filterValue: value,\n filterText: value,\n filteringType,\n enteredTextLabel,\n hideEnteredTextLabel: false,\n onSelectItem: (option: AutosuggestItem) => {\n const value = option.value || '';\n fireNonCancelableEvent(onChange, { value });\n fireNonCancelableEvent(onSelect, {\n value,\n selectedOption: option.type !== 'use-entered' ? option.option : undefined,\n });\n autosuggestInputRef.current?.close();\n },\n });\n\n const autosuggestLoadMoreHandlers = useAutosuggestLoadMore({\n options,\n statusType,\n onLoadItems: (detail: OptionsLoadItemsDetail) => fireNonCancelableEvent(onLoadItems, detail),\n });\n\n const handleChange = (event: NonCancelableCustomEvent<BaseChangeDetail>) => {\n autosuggestItemsHandlers.setShowAll(false);\n autosuggestItemsHandlers.resetHighlightWithKeyboard();\n fireNonCancelableEvent(onChange, event.detail);\n };\n\n const handleDelayedInput = (event: NonCancelableCustomEvent<BaseChangeDetail>) => {\n autosuggestLoadMoreHandlers.fireLoadMoreOnInputChange(event.detail.value);\n };\n\n const handleBlur = () => {\n fireNonCancelableEvent(onBlur, null);\n };\n\n const handleFocus = () => {\n autosuggestItemsHandlers.setShowAll(true);\n autosuggestLoadMoreHandlers.fireLoadMoreOnInputFocus();\n fireNonCancelableEvent(onFocus, null);\n };\n\n const handleKeyUp = (event: CustomEvent<BaseKeyDetail>) => {\n fireCancelableEvent(onKeyUp, event.detail, event);\n };\n\n const handleKeyDown = (event: CustomEvent<BaseKeyDetail>) => {\n fireCancelableEvent(onKeyDown, event.detail, event);\n };\n\n const handlePressArrowDown = () => {\n autosuggestItemsHandlers.moveHighlightWithKeyboard(1);\n };\n\n const handlePressArrowUp = () => {\n autosuggestItemsHandlers.moveHighlightWithKeyboard(-1);\n };\n\n const handlePressEnter = () => {\n return autosuggestItemsHandlers.selectHighlightedOptionWithKeyboard();\n };\n\n const handleCloseDropdown = () => {\n autosuggestItemsHandlers.resetHighlightWithKeyboard();\n };\n\n const handleRecoveryClick = () => {\n autosuggestLoadMoreHandlers.fireLoadMoreOnRecoveryClick();\n autosuggestInputRef.current?.focus();\n };\n\n const formFieldContext = useFormFieldContext(restProps);\n const selfControlId = useUniqueId('input');\n const footerControlId = useUniqueId('footer');\n const controlId = formFieldContext.controlId ?? selfControlId;\n const listId = useUniqueId('list');\n const highlightedOptionIdSource = useUniqueId();\n const highlightedOptionId = autosuggestItemsState.highlightedOption ? highlightedOptionIdSource : undefined;\n\n const isEmpty = !value && !autosuggestItemsState.items.length;\n const isFiltered = !!value && value.length !== 0;\n const filteredText = isFiltered\n ? filteringResultsText?.(autosuggestItemsState.items.length, options?.length ?? 0)\n : undefined;\n const dropdownStatus = useDropdownStatus({\n ...props,\n isEmpty,\n isFiltered,\n recoveryText,\n errorIconAriaLabel,\n onRecoveryClick: handleRecoveryClick,\n filteringResultsText: filteredText,\n hasRecoveryCallback: !!onLoadItems,\n });\n\n const shouldRenderDropdownContent = !isEmpty || dropdownStatus.content;\n\n return (\n <AutosuggestInput\n {...restProps}\n className={clsx(styles.root, restProps.className)}\n ref={autosuggestInputRef}\n __internalRootRef={__internalRootRef}\n value={value}\n onChange={handleChange}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onKeyUp={handleKeyUp}\n onKeyDown={handleKeyDown}\n name={name}\n controlId={controlId}\n placeholder={placeholder}\n disabled={disabled}\n readOnly={readOnly}\n autoFocus={autoFocus}\n ariaLabel={ariaLabel}\n ariaRequired={ariaRequired}\n clearAriaLabel={clearAriaLabel}\n disableBrowserAutocorrect={disableBrowserAutocorrect}\n expandToViewport={expandToViewport}\n ariaControls={listId}\n ariaActivedescendant={highlightedOptionId}\n dropdownExpanded={autosuggestItemsState.items.length > 1 || dropdownStatus.content !== null}\n dropdownContent={\n shouldRenderDropdownContent && (\n <AutosuggestOptionsList\n statusType={statusType}\n autosuggestItemsState={autosuggestItemsState}\n autosuggestItemsHandlers={autosuggestItemsHandlers}\n highlightedOptionId={highlightedOptionId}\n highlightText={value}\n listId={listId}\n controlId={controlId}\n handleLoadMore={autosuggestLoadMoreHandlers.fireLoadMoreOnScroll}\n hasDropdownStatus={dropdownStatus.content !== null}\n virtualScroll={virtualScroll}\n selectedAriaLabel={selectedAriaLabel}\n renderHighlightedAriaLive={renderHighlightedAriaLive}\n listBottom={\n !dropdownStatus.isSticky ? <DropdownFooter content={dropdownStatus.content} id={footerControlId} /> : null\n }\n ariaDescribedby={dropdownStatus.content ? footerControlId : undefined}\n />\n )\n }\n dropdownFooter={\n dropdownStatus.isSticky && dropdownStatus.content ? (\n <DropdownFooter\n id={footerControlId}\n content={dropdownStatus.content}\n hasItems={autosuggestItemsState.items.length >= 1}\n />\n ) : null\n }\n loopFocus={statusType === 'error' && !!recoveryText && !!onLoadItems}\n onCloseDropdown={handleCloseDropdown}\n onDelayedInput={handleDelayedInput}\n onPressArrowDown={handlePressArrowDown}\n onPressArrowUp={handlePressArrowUp}\n onPressEnter={handlePressEnter}\n />\n );\n});\n\nexport default InternalAutosuggest;\n"]}
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/autosuggest/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\n\nimport React, { Ref, useImperativeHandle, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useAutosuggestItems } from './options-controller';\nimport { AutosuggestItem, AutosuggestProps } from './interfaces';\n\nimport { useDropdownStatus } from '../internal/components/dropdown-status';\nimport DropdownFooter from '../internal/components/dropdown-footer';\n\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport {\n BaseKeyDetail,\n fireCancelableEvent,\n fireNonCancelableEvent,\n NonCancelableCustomEvent,\n} from '../internal/events';\nimport { BaseChangeDetail } from '../input/interfaces';\nimport { checkOptionValueField } from '../select/utils/check-option-value-field';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport AutosuggestOptionsList from './options-list';\nimport { useAutosuggestLoadMore } from './load-more-controller';\nimport { OptionsLoadItemsDetail } from '../internal/components/dropdown/interfaces';\nimport AutosuggestInput, { AutosuggestInputRef } from '../internal/components/autosuggest-input';\nimport { useFormFieldContext } from '../contexts/form-field';\nimport { useInternalI18n } from '../i18n/context';\n\nimport styles from './styles.css.js';\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nexport interface InternalAutosuggestProps extends AutosuggestProps, InternalBaseComponentProps {}\n\nconst InternalAutosuggest = React.forwardRef((props: InternalAutosuggestProps, ref: Ref<AutosuggestProps.Ref>) => {\n const {\n value,\n onChange,\n onBlur,\n onFocus,\n onKeyUp,\n onLoadItems,\n options,\n filteringType = 'auto',\n statusType = 'finished',\n placeholder,\n clearAriaLabel,\n name,\n disabled,\n disableBrowserAutocorrect = false,\n autoFocus,\n readOnly,\n ariaLabel,\n ariaRequired,\n enteredTextLabel,\n filteringResultsText,\n onKeyDown,\n virtualScroll,\n expandToViewport,\n onSelect,\n renderHighlightedAriaLive,\n __internalRootRef,\n ...restProps\n } = props;\n\n checkControlled('Autosuggest', 'value', value, 'onChange', onChange);\n checkOptionValueField('Autosuggest', 'options', options);\n\n const autosuggestInputRef = useRef<AutosuggestInputRef>(null);\n useImperativeHandle(\n ref,\n () => ({\n focus: () => autosuggestInputRef.current?.focus(),\n select: () => autosuggestInputRef.current?.select(),\n }),\n []\n );\n\n const i18n = useInternalI18n('autosuggest');\n const errorIconAriaLabel = i18n('errorIconAriaLabel', restProps.errorIconAriaLabel);\n const selectedAriaLabel = i18n('selectedAriaLabel', restProps.selectedAriaLabel);\n const recoveryText = i18n('recoveryText', restProps.recoveryText);\n\n if (restProps.recoveryText && !onLoadItems) {\n warnOnce('Autosuggest', '`onLoadItems` must be provided for `recoveryText` to be displayed.');\n }\n\n const [autosuggestItemsState, autosuggestItemsHandlers] = useAutosuggestItems({\n options: options || [],\n filterValue: value,\n filterText: value,\n filteringType,\n enteredTextLabel,\n hideEnteredTextLabel: false,\n onSelectItem: (option: AutosuggestItem) => {\n const value = option.value || '';\n fireNonCancelableEvent(onChange, { value });\n fireNonCancelableEvent(onSelect, {\n value,\n selectedOption: option.type !== 'use-entered' ? option.option : undefined,\n });\n autosuggestInputRef.current?.close();\n },\n });\n\n const autosuggestLoadMoreHandlers = useAutosuggestLoadMore({\n options,\n statusType,\n onLoadItems: (detail: OptionsLoadItemsDetail) => fireNonCancelableEvent(onLoadItems, detail),\n });\n\n const handleChange = (event: NonCancelableCustomEvent<BaseChangeDetail>) => {\n autosuggestItemsHandlers.setShowAll(false);\n autosuggestItemsHandlers.resetHighlightWithKeyboard();\n fireNonCancelableEvent(onChange, event.detail);\n };\n\n const handleDelayedInput = (event: NonCancelableCustomEvent<BaseChangeDetail>) => {\n autosuggestLoadMoreHandlers.fireLoadMoreOnInputChange(event.detail.value);\n };\n\n const handleBlur = () => {\n fireNonCancelableEvent(onBlur, null);\n };\n\n const handleFocus = () => {\n autosuggestItemsHandlers.setShowAll(true);\n autosuggestLoadMoreHandlers.fireLoadMoreOnInputFocus();\n fireNonCancelableEvent(onFocus, null);\n };\n\n const handleKeyUp = (event: CustomEvent<BaseKeyDetail>) => {\n fireCancelableEvent(onKeyUp, event.detail, event);\n };\n\n const handleKeyDown = (event: CustomEvent<BaseKeyDetail>) => {\n fireCancelableEvent(onKeyDown, event.detail, event);\n };\n\n const handlePressArrowDown = () => {\n if (autosuggestItemsState.items.length - 1 === autosuggestItemsState.highlightedIndex) {\n autosuggestItemsHandlers.goHomeWithKeyboard();\n return;\n }\n\n autosuggestItemsHandlers.moveHighlightWithKeyboard(1);\n };\n\n const handlePressArrowUp = () => {\n if (\n (autosuggestItemsState.highlightedOption?.type === 'child' && autosuggestItemsState.highlightedIndex === 1) ||\n autosuggestItemsState.highlightedIndex === 0\n ) {\n autosuggestItemsHandlers.goEndWithKeyboard();\n return;\n }\n\n autosuggestItemsHandlers.moveHighlightWithKeyboard(-1);\n };\n\n const handlePressEnter = () => {\n return autosuggestItemsHandlers.selectHighlightedOptionWithKeyboard();\n };\n\n const handleCloseDropdown = () => {\n autosuggestItemsHandlers.resetHighlightWithKeyboard();\n };\n\n const handleRecoveryClick = () => {\n autosuggestLoadMoreHandlers.fireLoadMoreOnRecoveryClick();\n autosuggestInputRef.current?.focus();\n };\n\n const formFieldContext = useFormFieldContext(restProps);\n const selfControlId = useUniqueId('input');\n const footerControlId = useUniqueId('footer');\n const controlId = formFieldContext.controlId ?? selfControlId;\n const listId = useUniqueId('list');\n const highlightedOptionIdSource = useUniqueId();\n const highlightedOptionId = autosuggestItemsState.highlightedOption ? highlightedOptionIdSource : undefined;\n\n const isEmpty = !value && !autosuggestItemsState.items.length;\n const isFiltered = !!value && value.length !== 0;\n const filteredText = isFiltered\n ? filteringResultsText?.(autosuggestItemsState.items.length, options?.length ?? 0)\n : undefined;\n const dropdownStatus = useDropdownStatus({\n ...props,\n isEmpty,\n isFiltered,\n recoveryText,\n errorIconAriaLabel,\n onRecoveryClick: handleRecoveryClick,\n filteringResultsText: filteredText,\n hasRecoveryCallback: !!onLoadItems,\n });\n\n const shouldRenderDropdownContent = !isEmpty || dropdownStatus.content;\n\n return (\n <AutosuggestInput\n {...restProps}\n className={clsx(styles.root, restProps.className)}\n ref={autosuggestInputRef}\n __internalRootRef={__internalRootRef}\n value={value}\n onChange={handleChange}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onKeyUp={handleKeyUp}\n onKeyDown={handleKeyDown}\n name={name}\n controlId={controlId}\n placeholder={placeholder}\n disabled={disabled}\n readOnly={readOnly}\n autoFocus={autoFocus}\n ariaLabel={ariaLabel}\n ariaRequired={ariaRequired}\n clearAriaLabel={clearAriaLabel}\n disableBrowserAutocorrect={disableBrowserAutocorrect}\n expandToViewport={expandToViewport}\n ariaControls={listId}\n ariaActivedescendant={highlightedOptionId}\n dropdownExpanded={autosuggestItemsState.items.length > 1 || dropdownStatus.content !== null}\n dropdownContent={\n shouldRenderDropdownContent && (\n <AutosuggestOptionsList\n statusType={statusType}\n autosuggestItemsState={autosuggestItemsState}\n autosuggestItemsHandlers={autosuggestItemsHandlers}\n highlightedOptionId={highlightedOptionId}\n highlightText={value}\n listId={listId}\n controlId={controlId}\n handleLoadMore={autosuggestLoadMoreHandlers.fireLoadMoreOnScroll}\n hasDropdownStatus={dropdownStatus.content !== null}\n virtualScroll={virtualScroll}\n selectedAriaLabel={selectedAriaLabel}\n renderHighlightedAriaLive={renderHighlightedAriaLive}\n listBottom={\n !dropdownStatus.isSticky ? <DropdownFooter content={dropdownStatus.content} id={footerControlId} /> : null\n }\n ariaDescribedby={dropdownStatus.content ? footerControlId : undefined}\n />\n )\n }\n dropdownFooter={\n dropdownStatus.isSticky && dropdownStatus.content ? (\n <DropdownFooter\n id={footerControlId}\n content={dropdownStatus.content}\n hasItems={autosuggestItemsState.items.length >= 1}\n />\n ) : null\n }\n loopFocus={statusType === 'error' && !!recoveryText && !!onLoadItems}\n onCloseDropdown={handleCloseDropdown}\n onDelayedInput={handleDelayedInput}\n onPressArrowDown={handlePressArrowDown}\n onPressArrowUp={handlePressArrowUp}\n onPressEnter={handlePressEnter}\n />\n );\n});\n\nexport default InternalAutosuggest;\n"]}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { BreadcrumbGroupProps } from './interfaces';
|
|
3
|
+
import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
|
|
4
|
+
type InternalBreadcrumbGroupProps<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item> = BreadcrumbGroupProps<T> & InternalBaseComponentProps;
|
|
5
|
+
export declare function BreadcrumbGroupImplementation<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item>({ items, ariaLabel, expandAriaLabel, onClick, onFollow, __internalRootRef, ...props }: InternalBreadcrumbGroupProps<T>): JSX.Element;
|
|
6
|
+
export declare const createWidgetizedBreadcrumbGroup: (Loader?: typeof BreadcrumbGroupImplementation | undefined) => typeof BreadcrumbGroupImplementation;
|
|
7
|
+
export {};
|
|
8
|
+
//# sourceMappingURL=implementation.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"implementation.d.ts","sourceRoot":"","sources":["../../../src/breadcrumb-group/implementation.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,oBAAoB,EAAyB,MAAM,cAAc,CAAC;AAI3E,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AA+DlF,KAAK,4BAA4B,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,IAAI,IAC/F,oBAAoB,CAAC,CAAC,CAAC,GAAG,0BAA0B,CAAC;AAEvD,wBAAgB,6BAA6B,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,IAAI,EAAE,EAC7G,KAAU,EACV,SAAS,EACT,eAAe,EACf,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,4BAA4B,CAAC,CAAC,CAAC,eAmEjC;AAED,eAAO,MAAM,+BAA+B,qGAGZ,CAAC"}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import { __rest } from "tslib";
|
|
2
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import styles from './styles.css.js';
|
|
6
|
+
import clsx from 'clsx';
|
|
7
|
+
import InternalIcon from '../icon/internal';
|
|
8
|
+
import InternalButtonDropdown from '../button-dropdown/internal';
|
|
9
|
+
import { InternalButton } from '../button/internal';
|
|
10
|
+
import { BreadcrumbItem } from './item/item';
|
|
11
|
+
import { fireCancelableEvent } from '../internal/events';
|
|
12
|
+
import { getBaseProps } from '../internal/base-component';
|
|
13
|
+
import { useMobile } from '../internal/hooks/use-mobile';
|
|
14
|
+
import { checkSafeUrl } from '../internal/utils/check-safe-url';
|
|
15
|
+
import { useInternalI18n } from '../i18n/context';
|
|
16
|
+
import { createWidgetizedComponent } from '../internal/widgets';
|
|
17
|
+
import { getEventDetail } from './utils';
|
|
18
|
+
/**
|
|
19
|
+
* Provided for backwards compatibility
|
|
20
|
+
*/
|
|
21
|
+
const DEFAULT_EXPAND_ARIA_LABEL = 'Show path';
|
|
22
|
+
const getDropdownTrigger = ({ ariaLabel, triggerRef, disabled, testUtilsClass, isOpen, onClick, }) => {
|
|
23
|
+
return (React.createElement(InternalButton, { ref: triggerRef, className: testUtilsClass, disabled: disabled, onClick: event => {
|
|
24
|
+
event.preventDefault();
|
|
25
|
+
onClick();
|
|
26
|
+
}, ariaExpanded: isOpen, "aria-haspopup": true, ariaLabel: ariaLabel, variant: "breadcrumb-group", formAction: "none" }, "..."));
|
|
27
|
+
};
|
|
28
|
+
const EllipsisDropdown = ({ ariaLabel, dropdownItems, onDropdownItemClick, onDropdownItemFollow, }) => {
|
|
29
|
+
var _a;
|
|
30
|
+
const i18n = useInternalI18n('breadcrumb-group');
|
|
31
|
+
return (React.createElement("li", { className: styles.ellipsis },
|
|
32
|
+
React.createElement(InternalButtonDropdown, { ariaLabel: (_a = i18n('expandAriaLabel', ariaLabel)) !== null && _a !== void 0 ? _a : DEFAULT_EXPAND_ARIA_LABEL, items: dropdownItems, onItemClick: onDropdownItemClick, onItemFollow: onDropdownItemFollow, customTriggerBuilder: getDropdownTrigger }),
|
|
33
|
+
React.createElement("span", { className: styles.icon },
|
|
34
|
+
React.createElement(InternalIcon, { name: "angle-right" }))));
|
|
35
|
+
};
|
|
36
|
+
export function BreadcrumbGroupImplementation(_a) {
|
|
37
|
+
var { items = [], ariaLabel, expandAriaLabel, onClick, onFollow, __internalRootRef } = _a, props = __rest(_a, ["items", "ariaLabel", "expandAriaLabel", "onClick", "onFollow", "__internalRootRef"]);
|
|
38
|
+
for (const item of items) {
|
|
39
|
+
checkSafeUrl('BreadcrumbGroup', item.href);
|
|
40
|
+
}
|
|
41
|
+
const baseProps = getBaseProps(props);
|
|
42
|
+
const isMobile = useMobile();
|
|
43
|
+
let breadcrumbItems = items.map((item, index) => {
|
|
44
|
+
const isLast = index === items.length - 1;
|
|
45
|
+
return (React.createElement("li", { className: styles.item, key: index },
|
|
46
|
+
React.createElement(BreadcrumbItem, { item: item, onClick: onClick, onFollow: onFollow, isCompressed: isMobile, isLast: isLast, isDisplayed: !isMobile || isLast || index === 0 })));
|
|
47
|
+
});
|
|
48
|
+
const getEventItem = (e) => {
|
|
49
|
+
const { id } = e.detail;
|
|
50
|
+
return items[parseInt(id)];
|
|
51
|
+
};
|
|
52
|
+
// Add ellipsis
|
|
53
|
+
if (breadcrumbItems.length >= 2) {
|
|
54
|
+
const dropdownItems = items
|
|
55
|
+
.slice(1, items.length - 1)
|
|
56
|
+
.map((item, index) => ({
|
|
57
|
+
id: (index + 1).toString(),
|
|
58
|
+
text: item.text,
|
|
59
|
+
href: item.href || '#',
|
|
60
|
+
}));
|
|
61
|
+
breadcrumbItems = [
|
|
62
|
+
breadcrumbItems[0],
|
|
63
|
+
React.createElement(EllipsisDropdown, { key: 'ellipsis', ariaLabel: expandAriaLabel, dropdownItems: dropdownItems, onDropdownItemClick: e => fireCancelableEvent(onClick, getEventDetail(getEventItem(e)), e), onDropdownItemFollow: e => fireCancelableEvent(onFollow, getEventDetail(getEventItem(e)), e) }),
|
|
64
|
+
...breadcrumbItems.slice(1),
|
|
65
|
+
];
|
|
66
|
+
}
|
|
67
|
+
return (React.createElement("nav", Object.assign({}, baseProps, { className: clsx(styles['breadcrumb-group'], isMobile && styles.mobile, items.length <= 2 && styles['mobile-short'], baseProps.className), "aria-label": ariaLabel || undefined, ref: __internalRootRef }),
|
|
68
|
+
React.createElement("ol", { className: styles['breadcrumb-group-list'] }, breadcrumbItems)));
|
|
69
|
+
}
|
|
70
|
+
export const createWidgetizedBreadcrumbGroup = createWidgetizedComponent(BreadcrumbGroupImplementation);
|
|
71
|
+
//# sourceMappingURL=implementation.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/breadcrumb-group/implementation.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 { CustomTriggerProps, LinkItem } from '../button-dropdown/interfaces';\nimport { InternalButton } from '../button/internal';\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 { useInternalI18n } from '../i18n/context';\nimport { createWidgetizedComponent } from '../internal/widgets';\nimport { getEventDetail } from './utils';\n\n/**\n * Provided for backwards compatibility\n */\nconst DEFAULT_EXPAND_ARIA_LABEL = 'Show path';\n\nconst getDropdownTrigger = ({\n ariaLabel,\n triggerRef,\n disabled,\n testUtilsClass,\n isOpen,\n onClick,\n}: CustomTriggerProps) => {\n return (\n <InternalButton\n ref={triggerRef}\n className={testUtilsClass}\n disabled={disabled}\n onClick={event => {\n event.preventDefault();\n onClick();\n }}\n ariaExpanded={isOpen}\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 const i18n = useInternalI18n('breadcrumb-group');\n\n return (\n <li className={styles.ellipsis}>\n <InternalButtonDropdown\n ariaLabel={i18n('expandAriaLabel', ariaLabel) ?? DEFAULT_EXPAND_ARIA_LABEL}\n items={dropdownItems}\n onItemClick={onDropdownItemClick}\n onItemFollow={onDropdownItemFollow}\n customTriggerBuilder={getDropdownTrigger}\n />\n <span className={styles.icon}>\n <InternalIcon name=\"angle-right\" />\n </span>\n </li>\n );\n};\n\ntype InternalBreadcrumbGroupProps<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item> =\n BreadcrumbGroupProps<T> & InternalBaseComponentProps;\n\nexport function BreadcrumbGroupImplementation<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 const isLast = index === items.length - 1;\n\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={isLast}\n isDisplayed={!isMobile || isLast || 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 >= 2) {\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(\n styles['breadcrumb-group'],\n isMobile && styles.mobile,\n items.length <= 2 && styles['mobile-short'],\n baseProps.className\n )}\n aria-label={ariaLabel || undefined}\n ref={__internalRootRef}\n >\n <ol className={styles['breadcrumb-group-list']}>{breadcrumbItems}</ol>\n </nav>\n );\n}\n\nexport const createWidgetizedBreadcrumbGroup = createWidgetizedComponent<\n BreadcrumbGroupProps,\n typeof BreadcrumbGroupImplementation\n>(BreadcrumbGroupImplementation);\n"]}
|
|
@@ -4,7 +4,7 @@ import { __rest } from "tslib";
|
|
|
4
4
|
import React from 'react';
|
|
5
5
|
import { applyDisplayName } from '../internal/utils/apply-display-name.js';
|
|
6
6
|
import useBaseComponent from '../internal/hooks/use-base-component';
|
|
7
|
-
import InternalBreadcrumbGroup from './internal';
|
|
7
|
+
import { InternalBreadcrumbGroup } from './internal';
|
|
8
8
|
export default function BreadcrumbGroup(_a) {
|
|
9
9
|
var { items = [] } = _a, props = __rest(_a, ["items"]);
|
|
10
10
|
const baseComponentProps = useBaseComponent('BreadcrumbGroup');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/breadcrumb-group/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,uBAAuB,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/breadcrumb-group/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAIrD,MAAM,CAAC,OAAO,UAAU,eAAe,CAAkE,EAG/E;QAH+E,EACvG,KAAK,GAAG,EAAE,OAEc,EADrB,KAAK,cAF+F,SAGxG,CADS;IAER,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;IAC/D,OAAO,oBAAC,uBAAuB,kBAAC,KAAK,EAAE,KAAK,IAAM,KAAK,EAAM,kBAAkB,EAAI,CAAC;AACtF,CAAC;AAED,gBAAgB,CAAC,eAAe,EAAE,iBAAiB,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BreadcrumbGroupProps } from './interfaces';\nimport { applyDisplayName } from '../internal/utils/apply-display-name.js';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { InternalBreadcrumbGroup } from './internal';\n\nexport { BreadcrumbGroupProps };\n\nexport default function BreadcrumbGroup<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item>({\n items = [],\n ...props\n}: BreadcrumbGroupProps<T>) {\n const baseComponentProps = useBaseComponent('BreadcrumbGroup');\n return <InternalBreadcrumbGroup items={items} {...props} {...baseComponentProps} />;\n}\n\napplyDisplayName(BreadcrumbGroup, 'BreadcrumbGroup');\n"]}
|
|
@@ -1,12 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
import { BreadcrumbGroupProps } from './interfaces';
|
|
3
|
-
import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
|
|
4
|
-
export declare const getEventDetail: <T extends BreadcrumbGroupProps.Item>(item: T) => {
|
|
5
|
-
item: T;
|
|
6
|
-
text: string;
|
|
7
|
-
href: string;
|
|
8
|
-
};
|
|
9
|
-
type InternalBreadcrumbGroupProps<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item> = BreadcrumbGroupProps<T> & InternalBaseComponentProps;
|
|
10
|
-
export default function InternalBreadcrumbGroup<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item>({ items, ariaLabel, expandAriaLabel, onClick, onFollow, __internalRootRef, ...props }: InternalBreadcrumbGroupProps<T>): JSX.Element;
|
|
11
|
-
export {};
|
|
1
|
+
export declare const InternalBreadcrumbGroup: typeof import("./implementation").BreadcrumbGroupImplementation;
|
|
12
2
|
//# sourceMappingURL=internal.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/breadcrumb-group/internal.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/breadcrumb-group/internal.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,uBAAuB,iEAAoC,CAAC"}
|
|
@@ -1,73 +1,5 @@
|
|
|
1
|
-
import { __rest } from "tslib";
|
|
2
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
import clsx from 'clsx';
|
|
7
|
-
import InternalIcon from '../icon/internal';
|
|
8
|
-
import InternalButtonDropdown from '../button-dropdown/internal';
|
|
9
|
-
import { InternalButton } from '../button/internal';
|
|
10
|
-
import { BreadcrumbItem } from './item/item';
|
|
11
|
-
import { fireCancelableEvent } from '../internal/events';
|
|
12
|
-
import { getBaseProps } from '../internal/base-component';
|
|
13
|
-
import { useMobile } from '../internal/hooks/use-mobile';
|
|
14
|
-
import { checkSafeUrl } from '../internal/utils/check-safe-url';
|
|
15
|
-
import { useInternalI18n } from '../i18n/context';
|
|
16
|
-
/**
|
|
17
|
-
* Provided for backwards compatibility
|
|
18
|
-
*/
|
|
19
|
-
const DEFAULT_EXPAND_ARIA_LABEL = 'Show path';
|
|
20
|
-
const getDropdownTrigger = ({ ariaLabel, triggerRef, disabled, testUtilsClass, isOpen, onClick, }) => {
|
|
21
|
-
return (React.createElement(InternalButton, { ref: triggerRef, className: testUtilsClass, disabled: disabled, onClick: event => {
|
|
22
|
-
event.preventDefault();
|
|
23
|
-
onClick();
|
|
24
|
-
}, ariaExpanded: isOpen, "aria-haspopup": true, ariaLabel: ariaLabel, variant: "breadcrumb-group", formAction: "none" }, "..."));
|
|
25
|
-
};
|
|
26
|
-
const EllipsisDropdown = ({ ariaLabel, dropdownItems, onDropdownItemClick, onDropdownItemFollow, }) => {
|
|
27
|
-
var _a;
|
|
28
|
-
const i18n = useInternalI18n('breadcrumb-group');
|
|
29
|
-
return (React.createElement("li", { className: styles.ellipsis },
|
|
30
|
-
React.createElement(InternalButtonDropdown, { ariaLabel: (_a = i18n('expandAriaLabel', ariaLabel)) !== null && _a !== void 0 ? _a : DEFAULT_EXPAND_ARIA_LABEL, items: dropdownItems, onItemClick: onDropdownItemClick, onItemFollow: onDropdownItemFollow, customTriggerBuilder: getDropdownTrigger }),
|
|
31
|
-
React.createElement("span", { className: styles.icon },
|
|
32
|
-
React.createElement(InternalIcon, { name: "angle-right" }))));
|
|
33
|
-
};
|
|
34
|
-
export const getEventDetail = (item) => ({
|
|
35
|
-
item,
|
|
36
|
-
text: item.text,
|
|
37
|
-
href: item.href,
|
|
38
|
-
});
|
|
39
|
-
export default function InternalBreadcrumbGroup(_a) {
|
|
40
|
-
var { items = [], ariaLabel, expandAriaLabel, onClick, onFollow, __internalRootRef } = _a, props = __rest(_a, ["items", "ariaLabel", "expandAriaLabel", "onClick", "onFollow", "__internalRootRef"]);
|
|
41
|
-
for (const item of items) {
|
|
42
|
-
checkSafeUrl('BreadcrumbGroup', item.href);
|
|
43
|
-
}
|
|
44
|
-
const baseProps = getBaseProps(props);
|
|
45
|
-
const isMobile = useMobile();
|
|
46
|
-
let breadcrumbItems = items.map((item, index) => {
|
|
47
|
-
const isLast = index === items.length - 1;
|
|
48
|
-
return (React.createElement("li", { className: styles.item, key: index },
|
|
49
|
-
React.createElement(BreadcrumbItem, { item: item, onClick: onClick, onFollow: onFollow, isCompressed: isMobile, isLast: isLast, isDisplayed: !isMobile || isLast || index === 0 })));
|
|
50
|
-
});
|
|
51
|
-
const getEventItem = (e) => {
|
|
52
|
-
const { id } = e.detail;
|
|
53
|
-
return items[parseInt(id)];
|
|
54
|
-
};
|
|
55
|
-
// Add ellipsis
|
|
56
|
-
if (breadcrumbItems.length >= 2) {
|
|
57
|
-
const dropdownItems = items
|
|
58
|
-
.slice(1, items.length - 1)
|
|
59
|
-
.map((item, index) => ({
|
|
60
|
-
id: (index + 1).toString(),
|
|
61
|
-
text: item.text,
|
|
62
|
-
href: item.href || '#',
|
|
63
|
-
}));
|
|
64
|
-
breadcrumbItems = [
|
|
65
|
-
breadcrumbItems[0],
|
|
66
|
-
React.createElement(EllipsisDropdown, { key: 'ellipsis', ariaLabel: expandAriaLabel, dropdownItems: dropdownItems, onDropdownItemClick: e => fireCancelableEvent(onClick, getEventDetail(getEventItem(e)), e), onDropdownItemFollow: e => fireCancelableEvent(onFollow, getEventDetail(getEventItem(e)), e) }),
|
|
67
|
-
...breadcrumbItems.slice(1),
|
|
68
|
-
];
|
|
69
|
-
}
|
|
70
|
-
return (React.createElement("nav", Object.assign({}, baseProps, { className: clsx(styles['breadcrumb-group'], isMobile && styles.mobile, items.length <= 2 && styles['mobile-short'], baseProps.className), "aria-label": ariaLabel || undefined, ref: __internalRootRef }),
|
|
71
|
-
React.createElement("ol", { className: styles['breadcrumb-group-list'] }, breadcrumbItems)));
|
|
72
|
-
}
|
|
3
|
+
import { createWidgetizedBreadcrumbGroup } from './implementation';
|
|
4
|
+
export const InternalBreadcrumbGroup = createWidgetizedBreadcrumbGroup();
|
|
73
5
|
//# sourceMappingURL=internal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/breadcrumb-group/internal.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/breadcrumb-group/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,+BAA+B,EAAE,MAAM,kBAAkB,CAAC;AAEnE,MAAM,CAAC,MAAM,uBAAuB,GAAG,+BAA+B,EAAE,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { createWidgetizedBreadcrumbGroup } from './implementation';\n\nexport const InternalBreadcrumbGroup = createWidgetizedBreadcrumbGroup();\n"]}
|
|
@@ -6,10 +6,10 @@ import InternalIcon from '../../icon/internal';
|
|
|
6
6
|
import styles from './styles.css.js';
|
|
7
7
|
import clsx from 'clsx';
|
|
8
8
|
import { fireCancelableEvent, isPlainLeftClick } from '../../internal/events';
|
|
9
|
-
import { getEventDetail } from '../internal';
|
|
10
9
|
import { DATA_ATTR_FUNNEL_KEY } from '../../internal/analytics/selectors';
|
|
11
10
|
import { FUNNEL_KEY_FUNNEL_NAME } from '../../internal/analytics/selectors';
|
|
12
11
|
import Tooltip from '../../internal/components/tooltip';
|
|
12
|
+
import { getEventDetail } from '../utils';
|
|
13
13
|
const BreadcrumbItemWithPopover = (_a) => {
|
|
14
14
|
var { item, isLast, anchorAttributes, funnelAttributes } = _a, itemAttributes = __rest(_a, ["item", "isLast", "anchorAttributes", "funnelAttributes"]);
|
|
15
15
|
const [showPopover, setShowPopover] = useState(false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item.js","sourceRoot":"","sources":["../../../../src/breadcrumb-group/item/item.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"item.js","sourceRoot":"","sources":["../../../../src/breadcrumb-group/item/item.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, { useEffect, useRef, useState } from 'react';\nimport { BreadcrumbGroupProps, BreadcrumbItemProps } from '../interfaces';\nimport InternalIcon from '../../icon/internal';\nimport styles from './styles.css.js';\nimport clsx from 'clsx';\nimport { fireCancelableEvent, isPlainLeftClick } from '../../internal/events';\n\nimport { DATA_ATTR_FUNNEL_KEY } from '../../internal/analytics/selectors';\nimport { FUNNEL_KEY_FUNNEL_NAME } from '../../internal/analytics/selectors';\nimport Tooltip from '../../internal/components/tooltip';\nimport { getEventDetail } from '../utils';\n\ntype BreadcrumbItemWithPopoverProps<T extends BreadcrumbGroupProps.Item> = React.HTMLAttributes<HTMLElement> & {\n item: T;\n isLast: boolean;\n anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement>;\n funnelAttributes: Record<string, string>;\n};\n\nconst BreadcrumbItemWithPopover = <T extends BreadcrumbGroupProps.Item>({\n item,\n isLast,\n anchorAttributes,\n funnelAttributes,\n ...itemAttributes\n}: BreadcrumbItemWithPopoverProps<T>) => {\n const [showPopover, setShowPopover] = useState(false);\n const textRef = useRef<HTMLElement>(null);\n const virtualTextRef = useRef<HTMLElement>(null);\n\n const isTruncated = (textRef: React.RefObject<HTMLElement>, virtualTextRef: React.RefObject<HTMLElement>) => {\n if (!textRef || !virtualTextRef || !textRef.current || !virtualTextRef.current) {\n return false;\n }\n const virtualTextWidth = virtualTextRef.current.getBoundingClientRect().width;\n const textWidth = textRef.current.getBoundingClientRect().width;\n if (virtualTextWidth > textWidth) {\n return true;\n }\n return false;\n };\n\n const popoverContent = <Tooltip trackRef={textRef} value={item.text} />;\n\n useEffect(() => {\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n setShowPopover(false);\n }\n };\n if (showPopover) {\n document.addEventListener('keydown', onKeyDown);\n }\n return () => {\n document.removeEventListener('keydown', onKeyDown);\n };\n }, [showPopover]);\n\n return (\n <>\n <Item\n isLast={isLast}\n {...itemAttributes}\n onFocus={() => {\n isTruncated(textRef, virtualTextRef) && setShowPopover(true);\n }}\n onBlur={() => setShowPopover(false)}\n onMouseEnter={() => {\n isTruncated(textRef, virtualTextRef) && setShowPopover(true);\n }}\n onMouseLeave={() => setShowPopover(false)}\n anchorAttributes={anchorAttributes}\n >\n <span {...funnelAttributes} className={styles.text} ref={textRef}>\n {item.text}\n </span>\n <span className={styles['virtual-item']} ref={virtualTextRef}>\n {item.text}\n </span>\n </Item>\n {showPopover && popoverContent}\n </>\n );\n};\n\ntype ItemProps = React.HTMLAttributes<HTMLElement> & {\n anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement>;\n isLast: boolean;\n};\nconst Item = ({ anchorAttributes, children, isLast, ...itemAttributes }: ItemProps) =>\n isLast ? (\n <span {...itemAttributes}>{children}</span>\n ) : (\n <a {...itemAttributes} {...anchorAttributes}>\n {children}\n </a>\n );\n\nexport function BreadcrumbItem<T extends BreadcrumbGroupProps.Item>({\n item,\n onClick,\n onFollow,\n isDisplayed,\n isLast = false,\n isCompressed = false,\n}: BreadcrumbItemProps<T>) {\n const preventDefault = (event: React.MouseEvent) => event.preventDefault();\n const onClickHandler = (event: React.MouseEvent) => {\n if (isPlainLeftClick(event)) {\n fireCancelableEvent(onFollow, getEventDetail(item), event);\n }\n fireCancelableEvent(onClick, getEventDetail(item), event);\n };\n\n const itemAttributes: React.HTMLAttributes<HTMLElement> = {\n className: clsx(styles.anchor, { [styles.compressed]: isCompressed }),\n };\n const anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement> = {\n href: item.href || '#',\n onClick: isLast ? preventDefault : onClickHandler,\n };\n\n const funnelAttributes: Record<string, string> = {};\n if (isLast) {\n funnelAttributes[DATA_ATTR_FUNNEL_KEY] = FUNNEL_KEY_FUNNEL_NAME;\n }\n\n return (\n <div className={clsx(styles.breadcrumb, isLast && styles.last)}>\n {isDisplayed && isCompressed ? (\n <BreadcrumbItemWithPopover\n item={item}\n isLast={isLast}\n anchorAttributes={anchorAttributes}\n funnelAttributes={funnelAttributes}\n {...itemAttributes}\n />\n ) : (\n <Item isLast={isLast} anchorAttributes={anchorAttributes} {...itemAttributes}>\n <span {...funnelAttributes} className={styles.text}>\n {item.text}\n </span>\n </Item>\n )}\n {!isLast ? (\n <span className={styles.icon}>\n <InternalIcon name=\"angle-right\" />\n </span>\n ) : null}\n </div>\n );\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/breadcrumb-group/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAEpD,eAAO,MAAM,cAAc;;;;CAIzB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/breadcrumb-group/utils.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,cAAc,GAAG,CAAsC,IAAO,EAAE,EAAE,CAAC,CAAC;IAC/E,IAAI;IACJ,IAAI,EAAE,IAAI,CAAC,IAAI;IACf,IAAI,EAAE,IAAI,CAAC,IAAI;CAChB,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BreadcrumbGroupProps } from './interfaces';\n\nexport const getEventDetail = <T extends BreadcrumbGroupProps.Item>(item: T) => ({\n item,\n text: item.text,\n href: item.href,\n});\n"]}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { DrawerProps } from './interfaces';
|
|
3
|
+
import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
|
|
4
|
+
export type DrawerInternalProps = DrawerProps & InternalBaseComponentProps;
|
|
5
|
+
export declare function DrawerImplementation({ header, children, loading, i18nStrings, __internalRootRef, ...restProps }: DrawerInternalProps): JSX.Element;
|
|
6
|
+
export declare const createWidgetizedDrawer: (Loader?: typeof DrawerImplementation | undefined) => typeof DrawerImplementation;
|
|
7
|
+
//# sourceMappingURL=implementation.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"implementation.d.ts","sourceRoot":"","sources":["../../../src/drawer/implementation.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAG3C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAAG,0BAA0B,CAAC;AAE3E,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,QAAQ,EACR,OAAO,EACP,WAAW,EACX,iBAAiB,EACjB,GAAG,SAAS,EACb,EAAE,mBAAmB,eAmBrB;AAED,eAAO,MAAM,sBAAsB,mFAAkD,CAAC"}
|