@cloudscape-design/components 3.0.34 → 3.0.37
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/app-layout/interfaces.d.ts +2 -0
- package/app-layout/interfaces.d.ts.map +1 -1
- package/app-layout/interfaces.js.map +1 -1
- package/app-layout/styles.css.js +37 -37
- package/app-layout/styles.scoped.css +51 -51
- package/app-layout/styles.selectors.js +37 -37
- package/app-layout/visual-refresh/styles.css.js +59 -59
- package/app-layout/visual-refresh/styles.scoped.css +147 -147
- package/app-layout/visual-refresh/styles.selectors.js +59 -59
- package/autosuggest/autosuggest-option.d.ts +2 -1
- package/autosuggest/autosuggest-option.d.ts.map +1 -1
- package/autosuggest/autosuggest-option.js +2 -2
- package/autosuggest/autosuggest-option.js.map +1 -1
- package/autosuggest/controller.d.ts +3 -3
- package/autosuggest/controller.d.ts.map +1 -1
- package/autosuggest/controller.js +7 -7
- package/autosuggest/controller.js.map +1 -1
- package/autosuggest/dropdown-controller.d.ts +20 -0
- package/autosuggest/dropdown-controller.d.ts.map +1 -0
- package/autosuggest/dropdown-controller.js +27 -0
- package/autosuggest/dropdown-controller.js.map +1 -0
- package/autosuggest/internal.d.ts.map +1 -1
- package/autosuggest/internal.js +29 -56
- package/autosuggest/internal.js.map +1 -1
- package/autosuggest/options-controller.d.ts +12 -13
- package/autosuggest/options-controller.d.ts.map +1 -1
- package/autosuggest/options-controller.js +50 -21
- package/autosuggest/options-controller.js.map +1 -1
- package/autosuggest/options-list.d.ts +4 -7
- package/autosuggest/options-list.d.ts.map +1 -1
- package/autosuggest/options-list.js +8 -9
- package/autosuggest/options-list.js.map +1 -1
- package/autosuggest/plain-list.d.ts +4 -6
- package/autosuggest/plain-list.d.ts.map +1 -1
- package/autosuggest/plain-list.js +9 -9
- package/autosuggest/plain-list.js.map +1 -1
- package/autosuggest/virtual-list.d.ts +1 -1
- package/autosuggest/virtual-list.d.ts.map +1 -1
- package/autosuggest/virtual-list.js +9 -9
- package/autosuggest/virtual-list.js.map +1 -1
- package/checkbox/internal.js +1 -1
- package/checkbox/internal.js.map +1 -1
- package/checkbox/styles.css.js +3 -3
- package/checkbox/styles.scoped.css +5 -8
- package/checkbox/styles.selectors.js +3 -3
- package/{internal/components/content-layout → content-layout}/index.d.ts +1 -1
- package/content-layout/index.d.ts.map +1 -0
- package/content-layout/index.js +39 -0
- package/content-layout/index.js.map +1 -0
- package/content-layout/interfaces.d.ts +19 -0
- package/content-layout/interfaces.d.ts.map +1 -0
- package/{internal/components/content-layout → content-layout}/interfaces.js +0 -0
- package/content-layout/interfaces.js.map +1 -0
- package/content-layout/styles.css.js +12 -0
- package/{internal/components/content-layout → content-layout}/styles.scoped.css +21 -16
- package/content-layout/styles.selectors.js +13 -0
- package/date-range-picker/embedded.d.ts.map +1 -1
- package/date-range-picker/embedded.js +3 -4
- package/date-range-picker/embedded.js.map +1 -1
- package/date-range-picker/index.d.ts.map +1 -1
- package/date-range-picker/index.js +7 -6
- package/date-range-picker/index.js.map +1 -1
- package/date-range-picker/time-offset.d.ts +2 -2
- package/date-range-picker/time-offset.d.ts.map +1 -1
- package/date-range-picker/time-offset.js +2 -3
- package/date-range-picker/time-offset.js.map +1 -1
- package/date-range-picker/use-date-range-picker.d.ts +1 -1
- package/date-range-picker/use-date-range-picker.d.ts.map +1 -1
- package/date-range-picker/use-date-range-picker.js.map +1 -1
- package/index.d.ts +1 -0
- package/index.d.ts.map +1 -1
- package/index.js +1 -0
- package/index.js.map +1 -1
- package/internal/base-component/styles.scoped.css +2 -2
- package/internal/components/abstract-switch/index.d.ts +2 -1
- package/internal/components/abstract-switch/index.d.ts.map +1 -1
- package/internal/components/abstract-switch/index.js +3 -3
- package/internal/components/abstract-switch/index.js.map +1 -1
- package/internal/components/abstract-switch/styles.css.js +12 -11
- package/internal/components/abstract-switch/styles.scoped.css +27 -17
- package/internal/components/abstract-switch/styles.selectors.js +12 -11
- package/internal/components/options-list/utils/use-highlight-option.d.ts +17 -15
- package/internal/components/options-list/utils/use-highlight-option.d.ts.map +1 -1
- package/internal/components/options-list/utils/use-highlight-option.js +36 -37
- package/internal/components/options-list/utils/use-highlight-option.js.map +1 -1
- package/internal/components/options-list/utils/use-keyboard.d.ts +0 -2
- package/internal/components/options-list/utils/use-keyboard.d.ts.map +1 -1
- package/internal/components/options-list/utils/use-keyboard.js +4 -6
- package/internal/components/options-list/utils/use-keyboard.js.map +1 -1
- package/internal/components/selectable-item/index.d.ts +2 -1
- package/internal/components/selectable-item/index.d.ts.map +1 -1
- package/internal/components/selectable-item/index.js +2 -2
- package/internal/components/selectable-item/index.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/generated/theming/index.cjs +6 -6
- package/internal/generated/theming/index.js +6 -6
- package/internal/utils/date-time/format-timezone-offset.d.ts +1 -1
- package/internal/utils/date-time/format-timezone-offset.d.ts.map +1 -1
- package/internal/utils/date-time/format-timezone-offset.js +2 -1
- package/internal/utils/date-time/format-timezone-offset.js.map +1 -1
- package/internal/utils/date-time/index.d.ts +0 -1
- package/internal/utils/date-time/index.d.ts.map +1 -1
- package/internal/utils/date-time/index.js +0 -1
- package/internal/utils/date-time/index.js.map +1 -1
- package/internal/utils/date-time/parse-timezone-offset.d.ts +1 -1
- package/internal/utils/date-time/parse-timezone-offset.d.ts.map +1 -1
- package/internal/utils/date-time/parse-timezone-offset.js +7 -7
- package/internal/utils/date-time/parse-timezone-offset.js.map +1 -1
- package/internal/utils/date-time/shift-timezone-offset.d.ts +1 -1
- package/internal/utils/date-time/shift-timezone-offset.d.ts.map +1 -1
- package/internal/utils/date-time/shift-timezone-offset.js +2 -1
- package/internal/utils/date-time/shift-timezone-offset.js.map +1 -1
- package/internal/utils/scrollable-containers.d.ts +0 -7
- package/internal/utils/scrollable-containers.d.ts.map +1 -1
- package/internal/utils/scrollable-containers.js +0 -18
- package/internal/utils/scrollable-containers.js.map +1 -1
- package/multiselect/internal.d.ts.map +1 -1
- package/multiselect/internal.js +2 -3
- package/multiselect/internal.js.map +1 -1
- package/package.json +2 -1
- package/property-filter/property-filter-autosuggest.d.ts.map +1 -1
- package/property-filter/property-filter-autosuggest.js +26 -55
- package/property-filter/property-filter-autosuggest.js.map +1 -1
- package/radio-group/radio-button.js +1 -1
- package/radio-group/radio-button.js.map +1 -1
- package/radio-group/styles.css.js +9 -9
- package/radio-group/styles.scoped.css +15 -18
- package/radio-group/styles.selectors.js +9 -9
- package/select/internal.d.ts.map +1 -1
- package/select/internal.js +3 -4
- package/select/internal.js.map +1 -1
- package/select/parts/item.d.ts +2 -1
- package/select/parts/item.d.ts.map +1 -1
- package/select/parts/item.js +2 -2
- package/select/parts/item.js.map +1 -1
- package/select/parts/multiselect-item.d.ts +2 -1
- package/select/parts/multiselect-item.d.ts.map +1 -1
- package/select/parts/multiselect-item.js +2 -2
- package/select/parts/multiselect-item.js.map +1 -1
- package/select/parts/plain-list.d.ts +2 -1
- package/select/parts/plain-list.d.ts.map +1 -1
- package/select/parts/plain-list.js +6 -6
- package/select/parts/plain-list.js.map +1 -1
- package/select/parts/virtual-list.js +4 -4
- package/select/parts/virtual-list.js.map +1 -1
- package/select/utils/render-options.d.ts +3 -2
- package/select/utils/render-options.d.ts.map +1 -1
- package/select/utils/render-options.js +2 -2
- package/select/utils/render-options.js.map +1 -1
- package/select/utils/use-native-search.d.ts +1 -2
- package/select/utils/use-native-search.d.ts.map +1 -1
- package/select/utils/use-native-search.js +1 -2
- package/select/utils/use-native-search.js.map +1 -1
- package/select/utils/use-select.d.ts +2 -3
- package/select/utils/use-select.d.ts.map +1 -1
- package/select/utils/use-select.js +16 -22
- package/select/utils/use-select.js.map +1 -1
- package/test-utils/dom/content-layout/index.d.ts +6 -0
- package/test-utils/dom/content-layout/index.js +37 -0
- package/test-utils/dom/content-layout/index.js.map +1 -0
- package/test-utils/dom/index.d.ts +3 -0
- package/test-utils/dom/index.js +10 -2
- package/test-utils/dom/index.js.map +1 -1
- package/test-utils/selectors/content-layout/index.d.ts +6 -0
- package/test-utils/selectors/content-layout/index.js +37 -0
- package/test-utils/selectors/content-layout/index.js.map +1 -0
- package/test-utils/selectors/index.d.ts +3 -0
- package/test-utils/selectors/index.js +10 -2
- package/test-utils/selectors/index.js.map +1 -1
- package/test-utils/tsconfig.tsbuildinfo +1 -1
- package/toggle/internal.js +1 -1
- package/toggle/internal.js.map +1 -1
- package/toggle/styles.css.js +8 -8
- package/toggle/styles.scoped.css +13 -16
- package/toggle/styles.selectors.js +8 -8
- package/internal/components/content-layout/index.d.ts.map +0 -1
- package/internal/components/content-layout/index.js +0 -24
- package/internal/components/content-layout/index.js.map +0 -1
- package/internal/components/content-layout/interfaces.d.ts +0 -7
- package/internal/components/content-layout/interfaces.d.ts.map +0 -1
- package/internal/components/content-layout/interfaces.js.map +0 -1
- package/internal/components/content-layout/styles.css.js +0 -12
- package/internal/components/content-layout/styles.selectors.js +0 -13
- package/internal/utils/date-time/get-browser-timezone-offset.d.ts +0 -7
- package/internal/utils/date-time/get-browser-timezone-offset.d.ts.map +0 -1
- package/internal/utils/date-time/get-browser-timezone-offset.js +0 -11
- package/internal/utils/date-time/get-browser-timezone-offset.js.map +0 -1
|
@@ -1,25 +1,24 @@
|
|
|
1
|
-
import { MutableRefObject } from 'react';
|
|
2
1
|
import { AutosuggestItem, AutosuggestProps } from './interfaces';
|
|
2
|
+
import { HighlightedOptionHandlers, HighlightedOptionState } from '../internal/components/options-list/utils/use-highlight-option';
|
|
3
|
+
import { BaseKeyDetail } from '../internal/events';
|
|
3
4
|
declare type Options = AutosuggestProps.Options;
|
|
4
5
|
export interface UseAutosuggestItemsProps {
|
|
5
6
|
options: Options;
|
|
6
7
|
filterValue: string;
|
|
7
8
|
filterText: string;
|
|
8
9
|
filteringType: AutosuggestProps.FilteringType;
|
|
9
|
-
isKeyboard: MutableRefObject<boolean>;
|
|
10
10
|
hideEnteredTextLabel?: boolean;
|
|
11
|
+
onSelectItem: (option: AutosuggestItem) => void;
|
|
11
12
|
}
|
|
12
|
-
export
|
|
13
|
-
|
|
13
|
+
export interface AutosuggestItemsState extends HighlightedOptionState<AutosuggestItem> {
|
|
14
|
+
items: readonly AutosuggestItem[];
|
|
14
15
|
showAll: boolean;
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
resetHighlight: () => void;
|
|
23
|
-
};
|
|
16
|
+
}
|
|
17
|
+
export interface AutosuggestItemsHandlers extends HighlightedOptionHandlers<AutosuggestItem> {
|
|
18
|
+
setShowAll(value: boolean): void;
|
|
19
|
+
interceptKeyDown(event: CustomEvent<BaseKeyDetail>): boolean;
|
|
20
|
+
}
|
|
21
|
+
export declare const getParentGroup: (item: AutosuggestItem) => AutosuggestItem | undefined;
|
|
22
|
+
export declare const useAutosuggestItems: ({ options, filterValue, filterText, filteringType, hideEnteredTextLabel, onSelectItem, }: UseAutosuggestItemsProps) => [AutosuggestItemsState, AutosuggestItemsHandlers];
|
|
24
23
|
export {};
|
|
25
24
|
//# sourceMappingURL=options-controller.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"options-controller.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/options-controller.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"options-controller.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/options-controller.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AACjE,OAAO,EACL,yBAAyB,EACzB,sBAAsB,EAEvB,MAAM,gEAAgE,CAAC;AAExE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,aAAK,OAAO,GAAG,gBAAgB,CAAC,OAAO,CAAC;AAExC,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,gBAAgB,CAAC,aAAa,CAAC;IAC9C,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,YAAY,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;CACjD;AAED,MAAM,WAAW,qBAAsB,SAAQ,sBAAsB,CAAC,eAAe,CAAC;IACpF,KAAK,EAAE,SAAS,eAAe,EAAE,CAAC;IAClC,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,wBAAyB,SAAQ,yBAAyB,CAAC,eAAe,CAAC;IAC1F,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;IACjC,gBAAgB,CAAC,KAAK,EAAE,WAAW,CAAC,aAAa,CAAC,GAAG,OAAO,CAAC;CAC9D;AAOD,eAAO,MAAM,cAAc,SAAU,eAAe,gCAAwB,CAAC;AAI7E,eAAO,MAAM,mBAAmB,6FAO7B,wBAAwB,KAAG,CAAC,qBAAqB,EAAE,wBAAwB,CA6C7E,CAAC"}
|
|
@@ -4,15 +4,16 @@ import { __assign, __rest, __spreadArray } from "tslib";
|
|
|
4
4
|
import { useMemo, useState } from 'react';
|
|
5
5
|
import { filterOptions } from './utils/utils';
|
|
6
6
|
import { generateTestIndexes } from '../internal/components/options-list/utils/test-indexes';
|
|
7
|
-
import {
|
|
7
|
+
import { useHighlightedOption, } from '../internal/components/options-list/utils/use-highlight-option';
|
|
8
|
+
import { KeyCode } from '../internal/keycode';
|
|
8
9
|
var isHighlightable = function (option) {
|
|
9
10
|
return !!option && option.type !== 'parent';
|
|
10
11
|
};
|
|
11
|
-
var useHighlightedOption = createHighlightedOptionHook({ isHighlightable: isHighlightable });
|
|
12
12
|
var parentMap = new WeakMap();
|
|
13
13
|
export var getParentGroup = function (item) { return parentMap.get(item); };
|
|
14
|
+
var isInteractive = function (option) { return !!option && !option.disabled && option.type !== 'parent'; };
|
|
14
15
|
export var useAutosuggestItems = function (_a) {
|
|
15
|
-
var options = _a.options, filterValue = _a.filterValue, filterText = _a.filterText, filteringType = _a.filteringType,
|
|
16
|
+
var options = _a.options, filterValue = _a.filterValue, filterText = _a.filterText, filteringType = _a.filteringType, hideEnteredTextLabel = _a.hideEnteredTextLabel, onSelectItem = _a.onSelectItem;
|
|
16
17
|
var _b = useState(false), showAll = _b[0], setShowAll = _b[1];
|
|
17
18
|
var items = useMemo(function () { return createItems(options); }, [options]);
|
|
18
19
|
var filteredItems = useMemo(function () {
|
|
@@ -23,25 +24,45 @@ export var useAutosuggestItems = function (_a) {
|
|
|
23
24
|
generateTestIndexes(filteredItems, getParentGroup);
|
|
24
25
|
return filteredItems;
|
|
25
26
|
}, [items, filterValue, filterText, filteringType, showAll, hideEnteredTextLabel]);
|
|
26
|
-
var _c = useHighlightedOption({
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
27
|
+
var _c = useHighlightedOption({
|
|
28
|
+
options: filteredItems,
|
|
29
|
+
isHighlightable: isHighlightable
|
|
30
|
+
}), highlightedOptionState = _c[0], highlightedOptionHandlers = _c[1];
|
|
31
|
+
var interceptKeyDown = function (event) {
|
|
32
|
+
switch (event.detail.keyCode) {
|
|
33
|
+
case KeyCode.down: {
|
|
34
|
+
highlightedOptionHandlers.moveHighlightWithKeyboard(1);
|
|
35
|
+
return true;
|
|
36
|
+
}
|
|
37
|
+
case KeyCode.up: {
|
|
38
|
+
highlightedOptionHandlers.moveHighlightWithKeyboard(-1);
|
|
39
|
+
return true;
|
|
40
|
+
}
|
|
41
|
+
case KeyCode.enter: {
|
|
42
|
+
if (highlightedOptionState.highlightedOption && isInteractive(highlightedOptionState.highlightedOption)) {
|
|
43
|
+
onSelectItem(highlightedOptionState.highlightedOption);
|
|
44
|
+
return true;
|
|
45
|
+
}
|
|
46
|
+
return false;
|
|
47
|
+
}
|
|
48
|
+
default:
|
|
49
|
+
return false;
|
|
50
|
+
}
|
|
37
51
|
};
|
|
52
|
+
return [
|
|
53
|
+
__assign({ items: filteredItems, showAll: showAll }, highlightedOptionState),
|
|
54
|
+
__assign({ setShowAll: setShowAll, interceptKeyDown: interceptKeyDown }, highlightedOptionHandlers),
|
|
55
|
+
];
|
|
38
56
|
};
|
|
39
57
|
function createItems(options) {
|
|
40
58
|
var items = [];
|
|
41
59
|
for (var _i = 0, options_1 = options; _i < options_1.length; _i++) {
|
|
42
60
|
var option = options_1[_i];
|
|
43
61
|
if (isGroup(option)) {
|
|
44
|
-
|
|
62
|
+
for (var _a = 0, _b = flattenGroup(option); _a < _b.length; _a++) {
|
|
63
|
+
var item = _b[_a];
|
|
64
|
+
items.push(item);
|
|
65
|
+
}
|
|
45
66
|
}
|
|
46
67
|
else {
|
|
47
68
|
items.push(__assign(__assign({}, option), { option: option }));
|
|
@@ -54,11 +75,19 @@ function isGroup(optionOrGroup) {
|
|
|
54
75
|
}
|
|
55
76
|
function flattenGroup(group) {
|
|
56
77
|
var options = group.options, rest = __rest(group, ["options"]);
|
|
57
|
-
var hasOnlyDisabledChildren =
|
|
58
|
-
var
|
|
59
|
-
var
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
78
|
+
var hasOnlyDisabledChildren = true;
|
|
79
|
+
var items = [__assign(__assign({}, rest), { type: 'parent', option: group })];
|
|
80
|
+
for (var _i = 0, options_2 = options; _i < options_2.length; _i++) {
|
|
81
|
+
var option = options_2[_i];
|
|
82
|
+
if (!option.disabled) {
|
|
83
|
+
hasOnlyDisabledChildren = false;
|
|
84
|
+
}
|
|
85
|
+
var childOption = __assign(__assign({}, option), { type: 'child', disabled: option.disabled || rest.disabled, option: option });
|
|
86
|
+
items.push(childOption);
|
|
87
|
+
// TODO: Refactor parentMap and remove this side effect
|
|
88
|
+
parentMap.set(childOption, __assign(__assign({}, group), { option: group }));
|
|
89
|
+
}
|
|
90
|
+
items[0].disabled = items[0].disabled || hasOnlyDisabledChildren;
|
|
91
|
+
return items;
|
|
63
92
|
}
|
|
64
93
|
//# sourceMappingURL=options-controller.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"options-controller.js","sourceRoot":"","sources":["../../../src/autosuggest/options-controller.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;;AAEtC,OAAO,EAAE,OAAO,EAAE,QAAQ,
|
|
1
|
+
{"version":3,"file":"options-controller.js","sourceRoot":"","sources":["../../../src/autosuggest/options-controller.ts"],"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 { useMemo, useState } from 'react';\nimport { filterOptions } from './utils/utils';\nimport { generateTestIndexes } from '../internal/components/options-list/utils/test-indexes';\nimport { AutosuggestItem, AutosuggestProps } from './interfaces';\nimport {\n HighlightedOptionHandlers,\n HighlightedOptionState,\n useHighlightedOption,\n} from '../internal/components/options-list/utils/use-highlight-option';\nimport { KeyCode } from '../internal/keycode';\nimport { BaseKeyDetail } from '../internal/events';\n\ntype Options = AutosuggestProps.Options;\n\nexport interface UseAutosuggestItemsProps {\n options: Options;\n filterValue: string;\n filterText: string;\n filteringType: AutosuggestProps.FilteringType;\n hideEnteredTextLabel?: boolean;\n onSelectItem: (option: AutosuggestItem) => void;\n}\n\nexport interface AutosuggestItemsState extends HighlightedOptionState<AutosuggestItem> {\n items: readonly AutosuggestItem[];\n showAll: boolean;\n}\n\nexport interface AutosuggestItemsHandlers extends HighlightedOptionHandlers<AutosuggestItem> {\n setShowAll(value: boolean): void;\n interceptKeyDown(event: CustomEvent<BaseKeyDetail>): boolean;\n}\n\nconst isHighlightable = (option?: AutosuggestItem) => {\n return !!option && option.type !== 'parent';\n};\n\nconst parentMap = new WeakMap<AutosuggestItem, AutosuggestItem>();\nexport const getParentGroup = (item: AutosuggestItem) => parentMap.get(item);\n\nconst isInteractive = (option?: AutosuggestItem) => !!option && !option.disabled && option.type !== 'parent';\n\nexport const useAutosuggestItems = ({\n options,\n filterValue,\n filterText,\n filteringType,\n hideEnteredTextLabel,\n onSelectItem,\n}: UseAutosuggestItemsProps): [AutosuggestItemsState, AutosuggestItemsHandlers] => {\n const [showAll, setShowAll] = useState(false);\n\n const items = useMemo(() => createItems(options), [options]);\n\n const filteredItems = useMemo(() => {\n const filteredItems = filteringType === 'auto' && !showAll ? filterOptions(items, filterText) : [...items];\n if (filterValue && !hideEnteredTextLabel) {\n filteredItems.unshift({ value: filterValue, type: 'use-entered', option: { value: filterValue } });\n }\n generateTestIndexes(filteredItems, getParentGroup);\n return filteredItems;\n }, [items, filterValue, filterText, filteringType, showAll, hideEnteredTextLabel]);\n\n const [highlightedOptionState, highlightedOptionHandlers] = useHighlightedOption({\n options: filteredItems,\n isHighlightable,\n });\n\n const interceptKeyDown = (event: CustomEvent<BaseKeyDetail>): boolean => {\n switch (event.detail.keyCode) {\n case KeyCode.down: {\n highlightedOptionHandlers.moveHighlightWithKeyboard(1);\n return true;\n }\n case KeyCode.up: {\n highlightedOptionHandlers.moveHighlightWithKeyboard(-1);\n return true;\n }\n case KeyCode.enter: {\n if (highlightedOptionState.highlightedOption && isInteractive(highlightedOptionState.highlightedOption)) {\n onSelectItem(highlightedOptionState.highlightedOption);\n return true;\n }\n return false;\n }\n default:\n return false;\n }\n };\n\n return [\n { items: filteredItems, showAll, ...highlightedOptionState },\n { setShowAll, interceptKeyDown, ...highlightedOptionHandlers },\n ];\n};\n\nfunction createItems(options: Options): AutosuggestItem[] {\n const items: AutosuggestItem[] = [];\n for (const option of options) {\n if (isGroup(option)) {\n for (const item of flattenGroup(option)) {\n items.push(item);\n }\n } else {\n items.push({ ...option, option });\n }\n }\n return items;\n}\n\nfunction isGroup(optionOrGroup: AutosuggestProps.Option): optionOrGroup is AutosuggestProps.OptionGroup {\n return 'options' in optionOrGroup;\n}\n\nfunction flattenGroup(group: AutosuggestProps.OptionGroup): AutosuggestItem[] {\n const { options, ...rest } = group;\n\n let hasOnlyDisabledChildren = true;\n\n const items: AutosuggestItem[] = [{ ...rest, type: 'parent', option: group }];\n\n for (const option of options) {\n if (!option.disabled) {\n hasOnlyDisabledChildren = false;\n }\n\n const childOption: AutosuggestItem = {\n ...option,\n type: 'child',\n disabled: option.disabled || rest.disabled,\n option,\n };\n\n items.push(childOption);\n\n // TODO: Refactor parentMap and remove this side effect\n parentMap.set(childOption, { ...group, option: group });\n }\n\n items[0].disabled = items[0].disabled || hasOnlyDisabledChildren;\n\n return items;\n}\n"]}
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { AutosuggestItemsHandlers, AutosuggestItemsState } from './options-controller';
|
|
2
3
|
import { AutosuggestItem, AutosuggestProps } from './interfaces';
|
|
3
4
|
export interface AutosuggestOptionsListProps extends Pick<AutosuggestProps, 'enteredTextLabel' | 'virtualScroll' | 'selectedAriaLabel' | 'renderHighlightedAriaLive'> {
|
|
4
|
-
|
|
5
|
-
|
|
5
|
+
autosuggestItemsState: AutosuggestItemsState;
|
|
6
|
+
autosuggestItemsHandlers: AutosuggestItemsHandlers;
|
|
6
7
|
selectOption: (option: AutosuggestItem) => void;
|
|
7
|
-
highlightedIndex: number;
|
|
8
|
-
setHighlightedIndex: (index: number) => void;
|
|
9
8
|
highlightedOptionId?: string;
|
|
10
9
|
highlightText: string;
|
|
11
10
|
listId: string;
|
|
@@ -13,8 +12,6 @@ export interface AutosuggestOptionsListProps extends Pick<AutosuggestProps, 'ent
|
|
|
13
12
|
handleLoadMore: () => void;
|
|
14
13
|
hasDropdownStatus?: boolean;
|
|
15
14
|
listBottom?: React.ReactNode;
|
|
16
|
-
isKeyboard: React.MutableRefObject<boolean>;
|
|
17
|
-
highlightedType: 'mouse' | 'keyboard';
|
|
18
15
|
}
|
|
19
|
-
export default function AutosuggestOptionsList({
|
|
16
|
+
export default function AutosuggestOptionsList({ autosuggestItemsState, autosuggestItemsHandlers, selectOption, highlightedOptionId, highlightText, listId, controlId, enteredTextLabel, handleLoadMore, hasDropdownStatus, virtualScroll, selectedAriaLabel, renderHighlightedAriaLive, listBottom, }: AutosuggestOptionsListProps): JSX.Element;
|
|
20
17
|
//# sourceMappingURL=options-list.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"options-list.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/options-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"options-list.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/options-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,wBAAwB,EAAE,qBAAqB,EAAkB,MAAM,sBAAsB,CAAC;AACvG,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAOjE,MAAM,WAAW,2BACf,SAAQ,IAAI,CACV,gBAAgB,EAChB,kBAAkB,GAAG,eAAe,GAAG,mBAAmB,GAAG,2BAA2B,CACzF;IACD,qBAAqB,EAAE,qBAAqB,CAAC;IAC7C,wBAAwB,EAAE,wBAAwB,CAAC;IACnD,YAAY,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IAChD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAiBD,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,qBAAqB,EACrB,wBAAwB,EACxB,YAAY,EACZ,mBAAmB,EACnB,aAAa,EACb,MAAM,EACN,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,iBAAiB,EACjB,yBAAyB,EACzB,UAAU,GACX,EAAE,2BAA2B,eAiC7B"}
|
|
@@ -12,27 +12,26 @@ var isInteractive = function (option) {
|
|
|
12
12
|
var isHighlightable = function (option) {
|
|
13
13
|
return !!option && option.type !== 'parent';
|
|
14
14
|
};
|
|
15
|
-
var createMouseEventHandler = function (handler
|
|
15
|
+
var createMouseEventHandler = function (handler) { return function (itemIndex) {
|
|
16
16
|
// prevent mouse events to avoid losing focus from the input
|
|
17
|
-
isKeyboard.current = false;
|
|
18
17
|
if (itemIndex > -1) {
|
|
19
18
|
handler(itemIndex);
|
|
20
19
|
}
|
|
21
20
|
}; };
|
|
22
21
|
export default function AutosuggestOptionsList(_a) {
|
|
23
|
-
var
|
|
24
|
-
var highlightVisibleOption = useHighlightVisibleOption(
|
|
25
|
-
var selectVisibleOption = useSelectVisibleOption(
|
|
26
|
-
var handleMouseUp = createMouseEventHandler(selectVisibleOption
|
|
27
|
-
var handleMouseMove = createMouseEventHandler(highlightVisibleOption
|
|
22
|
+
var autosuggestItemsState = _a.autosuggestItemsState, autosuggestItemsHandlers = _a.autosuggestItemsHandlers, selectOption = _a.selectOption, highlightedOptionId = _a.highlightedOptionId, highlightText = _a.highlightText, listId = _a.listId, controlId = _a.controlId, enteredTextLabel = _a.enteredTextLabel, handleLoadMore = _a.handleLoadMore, hasDropdownStatus = _a.hasDropdownStatus, virtualScroll = _a.virtualScroll, selectedAriaLabel = _a.selectedAriaLabel, renderHighlightedAriaLive = _a.renderHighlightedAriaLive, listBottom = _a.listBottom;
|
|
23
|
+
var highlightVisibleOption = useHighlightVisibleOption(autosuggestItemsState.items, autosuggestItemsHandlers.setHighlightedIndexWithMouse, isHighlightable);
|
|
24
|
+
var selectVisibleOption = useSelectVisibleOption(autosuggestItemsState.items, selectOption, isInteractive);
|
|
25
|
+
var handleMouseUp = createMouseEventHandler(selectVisibleOption);
|
|
26
|
+
var handleMouseMove = createMouseEventHandler(highlightVisibleOption);
|
|
28
27
|
var ListComponent = virtualScroll ? VirtualList : PlainList;
|
|
29
28
|
var announcement = useAnnouncement({
|
|
30
29
|
announceSelected: true,
|
|
31
|
-
highlightedOption: highlightedOption,
|
|
30
|
+
highlightedOption: autosuggestItemsState.highlightedOption,
|
|
32
31
|
getParent: function (option) { var _a; return (_a = getParentGroup(option)) === null || _a === void 0 ? void 0 : _a.option; },
|
|
33
32
|
selectedAriaLabel: selectedAriaLabel,
|
|
34
33
|
renderHighlightedAriaLive: renderHighlightedAriaLive
|
|
35
34
|
});
|
|
36
|
-
return (React.createElement(ListComponent, { listBottom: listBottom, handleLoadMore: handleLoadMore,
|
|
35
|
+
return (React.createElement(ListComponent, { listBottom: listBottom, handleLoadMore: handleLoadMore, autosuggestItemsState: autosuggestItemsState, highlightText: highlightText, enteredTextLabel: enteredTextLabel, highlightedA11yProps: highlightedOptionId ? { id: highlightedOptionId } : {}, hasDropdownStatus: hasDropdownStatus, menuProps: { id: listId, ariaLabelledby: controlId, onMouseUp: handleMouseUp, onMouseMove: handleMouseMove }, screenReaderContent: announcement }));
|
|
37
36
|
}
|
|
38
37
|
//# sourceMappingURL=options-list.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"options-list.js","sourceRoot":"","sources":["../../../src/autosuggest/options-list.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAC;AACjF,OAAO,
|
|
1
|
+
{"version":3,"file":"options-list.js","sourceRoot":"","sources":["../../../src/autosuggest/options-list.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAC;AACjF,OAAO,EAAmD,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEvG,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,SAAS,MAAM,cAAc,CAAC;AAErC,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAoBnE,IAAM,aAAa,GAAG,UAAC,MAAwB;IAC7C,OAAO,CAAC,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,IAAI,KAAK,QAAQ,CAAC;AAClE,CAAC,CAAC;AAEF,IAAM,eAAe,GAAG,UAAC,MAAwB;IAC/C,OAAO,CAAC,CAAC,MAAM,IAAI,MAAM,CAAC,IAAI,KAAK,QAAQ,CAAC;AAC9C,CAAC,CAAC;AAEF,IAAM,uBAAuB,GAAG,UAAC,OAAgC,IAAK,OAAA,UAAC,SAAiB;IACtF,4DAA4D;IAC5D,IAAI,SAAS,GAAG,CAAC,CAAC,EAAE;QAClB,OAAO,CAAC,SAAS,CAAC,CAAC;KACpB;AACH,CAAC,EALqE,CAKrE,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAejB;QAd5B,qBAAqB,2BAAA,EACrB,wBAAwB,8BAAA,EACxB,YAAY,kBAAA,EACZ,mBAAmB,yBAAA,EACnB,aAAa,mBAAA,EACb,MAAM,YAAA,EACN,SAAS,eAAA,EACT,gBAAgB,sBAAA,EAChB,cAAc,oBAAA,EACd,iBAAiB,uBAAA,EACjB,aAAa,mBAAA,EACb,iBAAiB,uBAAA,EACjB,yBAAyB,+BAAA,EACzB,UAAU,gBAAA;IAEV,IAAM,sBAAsB,GAAG,yBAAyB,CACtD,qBAAqB,CAAC,KAAK,EAC3B,wBAAwB,CAAC,4BAA4B,EACrD,eAAe,CAChB,CAAC;IACF,IAAM,mBAAmB,GAAG,sBAAsB,CAAC,qBAAqB,CAAC,KAAK,EAAE,YAAY,EAAE,aAAa,CAAC,CAAC;IAC7G,IAAM,aAAa,GAAG,uBAAuB,CAAC,mBAAmB,CAAC,CAAC;IACnE,IAAM,eAAe,GAAG,uBAAuB,CAAC,sBAAsB,CAAC,CAAC;IAExE,IAAM,aAAa,GAAG,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC;IAE9D,IAAM,YAAY,GAAG,eAAe,CAAC;QACnC,gBAAgB,EAAE,IAAI;QACtB,iBAAiB,EAAE,qBAAqB,CAAC,iBAAiB;QAC1D,SAAS,EAAE,UAAA,MAAM,YAAI,OAAA,MAAA,cAAc,CAAC,MAAM,CAAC,0CAAE,MAAiC,CAAA,EAAA;QAC9E,iBAAiB,mBAAA;QACjB,yBAAyB,2BAAA;KAC1B,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,aAAa,IACZ,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,qBAAqB,EAAE,qBAAqB,EAC5C,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,gBAAgB,EAClC,oBAAoB,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,mBAAmB,EAAE,CAAC,CAAC,CAAC,EAAE,EAC5E,iBAAiB,EAAE,iBAAiB,EACpC,SAAS,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,WAAW,EAAE,eAAe,EAAE,EAC5G,mBAAmB,EAAE,YAAY,GACjC,CACH,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { useSelectVisibleOption, useHighlightVisibleOption } from './controller';\nimport { AutosuggestItemsHandlers, AutosuggestItemsState, getParentGroup } from './options-controller';\nimport { AutosuggestItem, AutosuggestProps } from './interfaces';\nimport VirtualList from './virtual-list';\nimport PlainList from './plain-list';\n\nimport { useAnnouncement } from '../select/utils/use-announcement';\nimport { OptionGroup } from '../internal/components/option/interfaces';\n\nexport interface AutosuggestOptionsListProps\n extends Pick<\n AutosuggestProps,\n 'enteredTextLabel' | 'virtualScroll' | 'selectedAriaLabel' | 'renderHighlightedAriaLive'\n > {\n autosuggestItemsState: AutosuggestItemsState;\n autosuggestItemsHandlers: AutosuggestItemsHandlers;\n selectOption: (option: AutosuggestItem) => void;\n highlightedOptionId?: string;\n highlightText: string;\n listId: string;\n controlId: string;\n handleLoadMore: () => void;\n hasDropdownStatus?: boolean;\n listBottom?: React.ReactNode;\n}\n\nconst isInteractive = (option?: AutosuggestItem) => {\n return !!option && !option.disabled && option.type !== 'parent';\n};\n\nconst isHighlightable = (option?: AutosuggestItem) => {\n return !!option && option.type !== 'parent';\n};\n\nconst createMouseEventHandler = (handler: (index: number) => void) => (itemIndex: number) => {\n // prevent mouse events to avoid losing focus from the input\n if (itemIndex > -1) {\n handler(itemIndex);\n }\n};\n\nexport default function AutosuggestOptionsList({\n autosuggestItemsState,\n autosuggestItemsHandlers,\n selectOption,\n highlightedOptionId,\n highlightText,\n listId,\n controlId,\n enteredTextLabel,\n handleLoadMore,\n hasDropdownStatus,\n virtualScroll,\n selectedAriaLabel,\n renderHighlightedAriaLive,\n listBottom,\n}: AutosuggestOptionsListProps) {\n const highlightVisibleOption = useHighlightVisibleOption(\n autosuggestItemsState.items,\n autosuggestItemsHandlers.setHighlightedIndexWithMouse,\n isHighlightable\n );\n const selectVisibleOption = useSelectVisibleOption(autosuggestItemsState.items, selectOption, isInteractive);\n const handleMouseUp = createMouseEventHandler(selectVisibleOption);\n const handleMouseMove = createMouseEventHandler(highlightVisibleOption);\n\n const ListComponent = virtualScroll ? VirtualList : PlainList;\n\n const announcement = useAnnouncement({\n announceSelected: true,\n highlightedOption: autosuggestItemsState.highlightedOption,\n getParent: option => getParentGroup(option)?.option as undefined | OptionGroup,\n selectedAriaLabel,\n renderHighlightedAriaLive,\n });\n\n return (\n <ListComponent\n listBottom={listBottom}\n handleLoadMore={handleLoadMore}\n autosuggestItemsState={autosuggestItemsState}\n highlightText={highlightText}\n enteredTextLabel={enteredTextLabel}\n highlightedA11yProps={highlightedOptionId ? { id: highlightedOptionId } : {}}\n hasDropdownStatus={hasDropdownStatus}\n menuProps={{ id: listId, ariaLabelledby: controlId, onMouseUp: handleMouseUp, onMouseMove: handleMouseMove }}\n screenReaderContent={announcement}\n />\n );\n}\n"]}
|
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { OptionsListProps } from '../internal/components/options-list';
|
|
3
3
|
import { AutosuggestProps, AutosuggestItem } from './interfaces';
|
|
4
|
+
import { AutosuggestItemsState } from './options-controller';
|
|
4
5
|
export interface ListProps {
|
|
6
|
+
autosuggestItemsState: AutosuggestItemsState;
|
|
5
7
|
menuProps: Omit<OptionsListProps, 'children'>;
|
|
6
8
|
handleLoadMore: () => void;
|
|
7
|
-
filteredItems: AutosuggestItem[];
|
|
8
|
-
highlightedOption?: AutosuggestItem;
|
|
9
|
-
highlightedIndex: number;
|
|
10
|
-
highlightedType: 'mouse' | 'keyboard';
|
|
11
9
|
enteredTextLabel: AutosuggestProps.EnteredTextLabel;
|
|
12
10
|
highlightedA11yProps: Record<string, string | number | boolean>;
|
|
13
11
|
hasDropdownStatus?: boolean;
|
|
@@ -15,12 +13,12 @@ export interface ListProps {
|
|
|
15
13
|
listBottom?: React.ReactNode;
|
|
16
14
|
screenReaderContent?: string;
|
|
17
15
|
}
|
|
18
|
-
export declare const getOptionProps: (index: number, item: AutosuggestItem, filteredItems: AutosuggestItem[], highlightedA11yProps: ListProps['highlightedA11yProps'], highlightedOption?:
|
|
16
|
+
export declare const getOptionProps: (index: number, item: AutosuggestItem, filteredItems: readonly AutosuggestItem[], highlightedA11yProps: ListProps['highlightedA11yProps'], highlightedOption?: AutosuggestItem | undefined, hasDropdownStatus?: boolean | undefined) => {
|
|
19
17
|
className?: string | undefined;
|
|
20
18
|
id?: string | undefined;
|
|
21
19
|
nativeAttributes: Record<string, string | number | boolean>;
|
|
22
20
|
padBottom: boolean;
|
|
23
21
|
};
|
|
24
|
-
declare const PlainList: ({
|
|
22
|
+
declare const PlainList: ({ autosuggestItemsState, handleLoadMore, menuProps, enteredTextLabel, highlightedA11yProps, hasDropdownStatus, highlightText, listBottom, screenReaderContent, }: ListProps) => JSX.Element;
|
|
25
23
|
export default PlainList;
|
|
26
24
|
//# sourceMappingURL=plain-list.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"plain-list.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/plain-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAoB,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAKpF,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"plain-list.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/plain-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAoB,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAKpF,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAE7D,MAAM,WAAW,SAAS;IACxB,qBAAqB,EAAE,qBAAqB,CAAC;IAC7C,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;IAC9C,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,EAAE,gBAAgB,CAAC,gBAAgB,CAAC;IACpD,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;IAChE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,eAAO,MAAM,cAAc,UAClB,MAAM,QACP,eAAe,iBACN,SAAS,eAAe,EAAE,wBACnB,SAAS,CAAC,sBAAsB,CAAC;;;;;CAWxD,CAAC;AAEF,QAAA,MAAM,SAAS,qKAUZ,SAAS,gBAmDX,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -3,7 +3,7 @@ import { __assign } from "tslib";
|
|
|
3
3
|
// SPDX-License-Identifier: Apache-2.0
|
|
4
4
|
import React, { useEffect, useRef } from 'react';
|
|
5
5
|
import OptionsList from '../internal/components/options-list';
|
|
6
|
-
import {
|
|
6
|
+
import { scrollElementIntoView } from '../internal/utils/scrollable-containers';
|
|
7
7
|
import { getBaseProps } from '../internal/base-component';
|
|
8
8
|
import AutosuggestOption from './autosuggest-option';
|
|
9
9
|
import styles from './styles.css.js';
|
|
@@ -16,21 +16,21 @@ export var getOptionProps = function (index, item, filteredItems, highlightedA11
|
|
|
16
16
|
return __assign({ nativeAttributes: nativeAttributes, padBottom: padBottom }, baseOptionProps);
|
|
17
17
|
};
|
|
18
18
|
var PlainList = function (_a) {
|
|
19
|
-
var
|
|
19
|
+
var autosuggestItemsState = _a.autosuggestItemsState, handleLoadMore = _a.handleLoadMore, menuProps = _a.menuProps, enteredTextLabel = _a.enteredTextLabel, highlightedA11yProps = _a.highlightedA11yProps, hasDropdownStatus = _a.hasDropdownStatus, highlightText = _a.highlightText, listBottom = _a.listBottom, screenReaderContent = _a.screenReaderContent;
|
|
20
20
|
var listRef = useRef(null);
|
|
21
21
|
useEffect(function () {
|
|
22
22
|
var _a;
|
|
23
|
-
var item = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("[data-mouse-target=\"".concat(highlightedIndex, "\"]"));
|
|
24
|
-
if (
|
|
25
|
-
|
|
23
|
+
var item = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("[data-mouse-target=\"".concat(autosuggestItemsState.highlightedIndex, "\"]"));
|
|
24
|
+
if (autosuggestItemsState.highlightType === 'keyboard' && item) {
|
|
25
|
+
scrollElementIntoView(item);
|
|
26
26
|
}
|
|
27
|
-
}, [
|
|
27
|
+
}, [autosuggestItemsState.highlightType, autosuggestItemsState.highlightedIndex]);
|
|
28
28
|
return (React.createElement(OptionsList, __assign({}, menuProps, { onLoadMore: handleLoadMore, open: true, ref: listRef,
|
|
29
29
|
// to prevent closing the list when clicking the scrollbar on IE11
|
|
30
30
|
nativeAttributes: { unselectable: 'on' } }),
|
|
31
|
-
|
|
32
|
-
var optionProps = getOptionProps(index, item,
|
|
33
|
-
return (React.createElement(AutosuggestOption, __assign({ highlightText: highlightText, option: item, highlighted: item === highlightedOption, key: index, "data-mouse-target": index, enteredTextLabel: enteredTextLabel, screenReaderContent: screenReaderContent,
|
|
31
|
+
autosuggestItemsState.items.map(function (item, index) {
|
|
32
|
+
var optionProps = getOptionProps(index, item, autosuggestItemsState.items, highlightedA11yProps, autosuggestItemsState.highlightedOption, hasDropdownStatus);
|
|
33
|
+
return (React.createElement(AutosuggestOption, __assign({ highlightText: highlightText, option: item, highlighted: item === autosuggestItemsState.highlightedOption, key: index, "data-mouse-target": index, enteredTextLabel: enteredTextLabel, screenReaderContent: screenReaderContent, highlightType: autosuggestItemsState.highlightType }, optionProps)));
|
|
34
34
|
}),
|
|
35
35
|
listBottom ? (React.createElement("li", { role: "option", className: styles['list-bottom'] }, listBottom)) : null));
|
|
36
36
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"plain-list.js","sourceRoot":"","sources":["../../../src/autosuggest/plain-list.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,WAAiC,MAAM,qCAAqC,CAAC;AACpF,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"plain-list.js","sourceRoot":"","sources":["../../../src/autosuggest/plain-list.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 } from 'react';\n\nimport OptionsList, { OptionsListProps } from '../internal/components/options-list';\nimport { scrollElementIntoView } from '../internal/utils/scrollable-containers';\nimport { getBaseProps } from '../internal/base-component';\n\nimport AutosuggestOption from './autosuggest-option';\nimport { AutosuggestProps, AutosuggestItem } from './interfaces';\nimport styles from './styles.css.js';\nimport { AutosuggestItemsState } from './options-controller';\n\nexport interface ListProps {\n autosuggestItemsState: AutosuggestItemsState;\n menuProps: Omit<OptionsListProps, 'children'>;\n handleLoadMore: () => void;\n enteredTextLabel: AutosuggestProps.EnteredTextLabel;\n highlightedA11yProps: Record<string, string | number | boolean>;\n hasDropdownStatus?: boolean;\n highlightText: string;\n listBottom?: React.ReactNode;\n screenReaderContent?: string;\n}\n\nexport const getOptionProps = (\n index: number,\n item: AutosuggestItem,\n filteredItems: readonly AutosuggestItem[],\n highlightedA11yProps: ListProps['highlightedA11yProps'],\n highlightedOption?: AutosuggestItem,\n hasDropdownStatus?: boolean\n) => {\n const nativeAttributes = item === highlightedOption ? highlightedA11yProps : {};\n const baseOptionProps = getBaseProps(nativeAttributes);\n const isLastItem = index === filteredItems.length - 1;\n const isNotEnteredTextItem = filteredItems.length > 1;\n const padBottom = !hasDropdownStatus && isNotEnteredTextItem && isLastItem;\n\n return { nativeAttributes, padBottom, ...baseOptionProps };\n};\n\nconst PlainList = ({\n autosuggestItemsState,\n handleLoadMore,\n menuProps,\n enteredTextLabel,\n highlightedA11yProps,\n hasDropdownStatus,\n highlightText,\n listBottom,\n screenReaderContent,\n}: ListProps) => {\n const listRef = useRef<HTMLUListElement>(null);\n useEffect(() => {\n const item = listRef.current?.querySelector<HTMLElement>(\n `[data-mouse-target=\"${autosuggestItemsState.highlightedIndex}\"]`\n );\n if (autosuggestItemsState.highlightType === 'keyboard' && item) {\n scrollElementIntoView(item);\n }\n }, [autosuggestItemsState.highlightType, autosuggestItemsState.highlightedIndex]);\n\n return (\n <OptionsList\n {...menuProps}\n onLoadMore={handleLoadMore}\n open={true}\n ref={listRef}\n // to prevent closing the list when clicking the scrollbar on IE11\n nativeAttributes={{ unselectable: 'on' }}\n >\n {autosuggestItemsState.items.map((item, index) => {\n const optionProps = getOptionProps(\n index,\n item,\n autosuggestItemsState.items,\n highlightedA11yProps,\n autosuggestItemsState.highlightedOption,\n hasDropdownStatus\n );\n\n return (\n <AutosuggestOption\n highlightText={highlightText}\n option={item}\n highlighted={item === autosuggestItemsState.highlightedOption}\n key={index}\n data-mouse-target={index}\n enteredTextLabel={enteredTextLabel}\n screenReaderContent={screenReaderContent}\n highlightType={autosuggestItemsState.highlightType}\n {...optionProps}\n />\n );\n })}\n {listBottom ? (\n <li role=\"option\" className={styles['list-bottom']}>\n {listBottom}\n </li>\n ) : null}\n </OptionsList>\n );\n};\n\nexport default PlainList;\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { ListProps } from './plain-list';
|
|
2
|
-
declare const VirtualList: ({
|
|
2
|
+
declare const VirtualList: ({ autosuggestItemsState, handleLoadMore, menuProps, enteredTextLabel, highlightedA11yProps, hasDropdownStatus, highlightText, listBottom, screenReaderContent, }: ListProps) => JSX.Element;
|
|
3
3
|
export default VirtualList;
|
|
4
4
|
//# sourceMappingURL=virtual-list.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"virtual-list.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/virtual-list.tsx"],"names":[],"mappings":"AASA,OAAO,EAAkB,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzD,QAAA,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"virtual-list.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/virtual-list.tsx"],"names":[],"mappings":"AASA,OAAO,EAAkB,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzD,QAAA,MAAM,WAAW,qKAUd,SAAS,gBA2EX,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -9,13 +9,13 @@ import AutosuggestOption from './autosuggest-option';
|
|
|
9
9
|
import { getOptionProps } from './plain-list';
|
|
10
10
|
import styles from './styles.css.js';
|
|
11
11
|
var VirtualList = function (_a) {
|
|
12
|
-
var
|
|
12
|
+
var autosuggestItemsState = _a.autosuggestItemsState, handleLoadMore = _a.handleLoadMore, menuProps = _a.menuProps, enteredTextLabel = _a.enteredTextLabel, highlightedA11yProps = _a.highlightedA11yProps, hasDropdownStatus = _a.hasDropdownStatus, highlightText = _a.highlightText, listBottom = _a.listBottom, screenReaderContent = _a.screenReaderContent;
|
|
13
13
|
var scrollRef = useRef(null);
|
|
14
14
|
// update component, when it gets wider or narrower to reposition items
|
|
15
15
|
var _b = useContainerQuery(function (rect) { return rect.width; }, []), width = _b[0], strutRef = _b[1];
|
|
16
16
|
useImperativeHandle(strutRef, function () { return scrollRef.current; });
|
|
17
17
|
var rowVirtualizer = useVirtual({
|
|
18
|
-
size:
|
|
18
|
+
size: autosuggestItemsState.items.length,
|
|
19
19
|
parentRef: scrollRef,
|
|
20
20
|
// estimateSize is a dependency of measurements memo. We update it to force full recalculation
|
|
21
21
|
// when the height of any option could have changed:
|
|
@@ -26,19 +26,19 @@ var VirtualList = function (_a) {
|
|
|
26
26
|
overscan: 5
|
|
27
27
|
});
|
|
28
28
|
useEffect(function () {
|
|
29
|
-
if (
|
|
30
|
-
rowVirtualizer.scrollToIndex(highlightedIndex);
|
|
29
|
+
if (autosuggestItemsState.highlightType === 'keyboard') {
|
|
30
|
+
rowVirtualizer.scrollToIndex(autosuggestItemsState.highlightedIndex);
|
|
31
31
|
}
|
|
32
|
-
}, [
|
|
32
|
+
}, [autosuggestItemsState.highlightType, autosuggestItemsState.highlightedIndex, rowVirtualizer]);
|
|
33
33
|
return (React.createElement(OptionsList, __assign({}, menuProps, { onLoadMore: handleLoadMore, ref: scrollRef, open: true,
|
|
34
34
|
// to prevent closing the list when clicking the scrollbar on IE11
|
|
35
35
|
nativeAttributes: { unselectable: 'on' } }),
|
|
36
|
-
React.createElement("div", { "aria-hidden": "true", key: "total-size", className: styles['layout-strut'], style: { height: rowVirtualizer.totalSize + (
|
|
36
|
+
React.createElement("div", { "aria-hidden": "true", key: "total-size", className: styles['layout-strut'], style: { height: rowVirtualizer.totalSize + (autosuggestItemsState.items.length === 1 ? 1 : 0) } }),
|
|
37
37
|
rowVirtualizer.virtualItems.map(function (virtualRow) {
|
|
38
38
|
var index = virtualRow.index, start = virtualRow.start, measureRef = virtualRow.measureRef;
|
|
39
|
-
var item =
|
|
40
|
-
var optionProps = getOptionProps(index, item,
|
|
41
|
-
return (React.createElement(AutosuggestOption, __assign({ key: index, ref: measureRef, highlightText: highlightText, option: item, highlighted: item === highlightedOption, "data-mouse-target": index, enteredTextLabel: enteredTextLabel, virtualPosition: start + (index === 0 ? 1 : 0), screenReaderContent: screenReaderContent, ariaSetsize:
|
|
39
|
+
var item = autosuggestItemsState.items[index];
|
|
40
|
+
var optionProps = getOptionProps(index, item, autosuggestItemsState.items, highlightedA11yProps, autosuggestItemsState.highlightedOption, hasDropdownStatus);
|
|
41
|
+
return (React.createElement(AutosuggestOption, __assign({ key: index, ref: measureRef, highlightText: highlightText, option: item, highlighted: item === autosuggestItemsState.highlightedOption, "data-mouse-target": index, enteredTextLabel: enteredTextLabel, virtualPosition: start + (index === 0 ? 1 : 0), screenReaderContent: screenReaderContent, ariaSetsize: autosuggestItemsState.items.length, ariaPosinset: index + 1, highlightType: autosuggestItemsState.highlightType }, optionProps)));
|
|
42
42
|
}),
|
|
43
43
|
listBottom ? (React.createElement("li", { role: "option", className: styles['list-bottom'] }, listBottom)) : null));
|
|
44
44
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"virtual-list.js","sourceRoot":"","sources":["../../../src/autosuggest/virtual-list.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACnF,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,WAAW,MAAM,qCAAqC,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AAExE,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAa,MAAM,cAAc,CAAC;AACzD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,IAAM,WAAW,GAAG,UAAC,
|
|
1
|
+
{"version":3,"file":"virtual-list.js","sourceRoot":"","sources":["../../../src/autosuggest/virtual-list.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, { useCallback, useEffect, useImperativeHandle, useRef } from 'react';\nimport { useVirtual } from 'react-virtual';\n\nimport OptionsList from '../internal/components/options-list';\nimport { useContainerQuery } from '../internal/hooks/container-queries';\n\nimport AutosuggestOption from './autosuggest-option';\nimport { getOptionProps, ListProps } from './plain-list';\nimport styles from './styles.css.js';\n\nconst VirtualList = ({\n autosuggestItemsState,\n handleLoadMore,\n menuProps,\n enteredTextLabel,\n highlightedA11yProps,\n hasDropdownStatus,\n highlightText,\n listBottom,\n screenReaderContent,\n}: ListProps) => {\n const scrollRef = useRef<HTMLUListElement>(null);\n // update component, when it gets wider or narrower to reposition items\n const [width, strutRef] = useContainerQuery(rect => rect.width, []);\n useImperativeHandle(strutRef, () => scrollRef.current);\n const rowVirtualizer = useVirtual({\n size: autosuggestItemsState.items.length,\n parentRef: scrollRef,\n // estimateSize is a dependency of measurements memo. We update it to force full recalculation\n // when the height of any option could have changed:\n // 1: because the component got resized (width property got updated)\n // 2: becasue the option changed its content (highlightText property controls the highlight and the visibility of hidden tags)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n estimateSize: useCallback(() => 31, [width, highlightText]),\n overscan: 5,\n });\n\n useEffect(() => {\n if (autosuggestItemsState.highlightType === 'keyboard') {\n rowVirtualizer.scrollToIndex(autosuggestItemsState.highlightedIndex);\n }\n }, [autosuggestItemsState.highlightType, autosuggestItemsState.highlightedIndex, rowVirtualizer]);\n\n return (\n <OptionsList\n {...menuProps}\n onLoadMore={handleLoadMore}\n ref={scrollRef}\n open={true}\n // to prevent closing the list when clicking the scrollbar on IE11\n nativeAttributes={{ unselectable: 'on' }}\n >\n <div\n aria-hidden=\"true\"\n key=\"total-size\"\n className={styles['layout-strut']}\n style={{ height: rowVirtualizer.totalSize + (autosuggestItemsState.items.length === 1 ? 1 : 0) }}\n />\n {rowVirtualizer.virtualItems.map(virtualRow => {\n const { index, start, measureRef } = virtualRow;\n const item = autosuggestItemsState.items[index];\n const optionProps = getOptionProps(\n index,\n item,\n autosuggestItemsState.items,\n highlightedA11yProps,\n autosuggestItemsState.highlightedOption,\n hasDropdownStatus\n );\n\n return (\n <AutosuggestOption\n key={index}\n ref={measureRef}\n highlightText={highlightText}\n option={item}\n highlighted={item === autosuggestItemsState.highlightedOption}\n data-mouse-target={index}\n enteredTextLabel={enteredTextLabel}\n virtualPosition={start + (index === 0 ? 1 : 0)}\n screenReaderContent={screenReaderContent}\n ariaSetsize={autosuggestItemsState.items.length}\n ariaPosinset={index + 1}\n highlightType={autosuggestItemsState.highlightType}\n {...optionProps}\n />\n );\n })}\n {listBottom ? (\n <li role=\"option\" className={styles['list-bottom']}>\n {listBottom}\n </li>\n ) : null}\n </OptionsList>\n );\n};\n\nexport default VirtualList;\n"]}
|
package/checkbox/internal.js
CHANGED
|
@@ -19,7 +19,7 @@ var InternalCheckbox = React.forwardRef(function (_a, ref) {
|
|
|
19
19
|
checkboxRef.current.indeterminate = Boolean(indeterminate);
|
|
20
20
|
}
|
|
21
21
|
});
|
|
22
|
-
return (React.createElement(AbstractSwitch, __assign({}, baseProps, { className: clsx(styles.root, baseProps.className), controlClassName: styles['checkbox-control'], controlId: controlId, disabled: disabled, label: children, description: description, descriptionBottomPadding: true, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby, nativeControl: function (nativeControlProps) { return (React.createElement("input", __assign({}, nativeControlProps, { ref: checkboxRef,
|
|
22
|
+
return (React.createElement(AbstractSwitch, __assign({}, baseProps, { className: clsx(styles.root, baseProps.className), controlClassName: styles['checkbox-control'], outlineClassName: styles.outline, controlId: controlId, disabled: disabled, label: children, description: description, descriptionBottomPadding: true, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby, nativeControl: function (nativeControlProps) { return (React.createElement("input", __assign({}, nativeControlProps, { ref: checkboxRef, type: "checkbox", checked: checked, name: name, tabIndex: tabIndex, onFocus: onFocus && (function () { return fireNonCancelableEvent(onFocus); }), onBlur: onBlur && (function () { return fireNonCancelableEvent(onBlur); }),
|
|
23
23
|
// empty handler to suppress React controllability warning
|
|
24
24
|
onChange: function () { }, onClick:
|
|
25
25
|
// Using onClick because onChange does not fire in indeterminate state in Internet Explorer and Legacy Edge
|
package/checkbox/internal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/checkbox/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,cAAc,MAAM,wCAAwC,CAAC;AAEpE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,YAAY,MAAM,sCAAsC,CAAC;AAQhE,IAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CACvC,UACE,EAkBC,EACD,GAAG;IAlBD,IAAA,SAAS,eAAA,EACT,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,aAAa,mBAAA,EACb,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,SAAS,eAAA,EACT,cAAc,oBAAA,EACd,eAAe,qBAAA,EACf,OAAO,aAAA,EACP,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,YAAY,kBAAA,EACZ,QAAQ,cAAA,EACR,iBAAiB,uBAAA,EACd,IAAI,cAjBT,4NAkBC,CADQ;IAIT,IAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,IAAM,WAAW,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACnD,eAAe,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC;IAClC,SAAS,CAAC;QACR,IAAI,WAAW,CAAC,OAAO,EAAE;YACvB,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;SAC5D;IACH,CAAC,CAAC,CAAC;IACH,OAAO,CACL,oBAAC,cAAc,eACT,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC,EACjD,gBAAgB,EAAE,MAAM,CAAC,kBAAkB,CAAC,EAC5C,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,QAAQ,EACf,WAAW,EAAE,WAAW,EACxB,wBAAwB,EAAE,IAAI,EAC9B,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,EAChC,aAAa,EAAE,UAAA,kBAAkB,IAAI,OAAA,CACnC,0CACM,kBAAkB,IACtB,GAAG,EAAE,WAAW,EAChB,
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/checkbox/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, { useEffect, useRef } from 'react';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { getBaseProps } from '../internal/base-component';\nimport AbstractSwitch from '../internal/components/abstract-switch';\nimport { CheckboxProps } from './interfaces';\nimport styles from './styles.css.js';\nimport CheckboxIcon from '../internal/components/checkbox-icon';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\ninterface InternalProps extends CheckboxProps, InternalBaseComponentProps {\n withoutLabel?: boolean;\n tabIndex?: -1;\n}\n\nconst InternalCheckbox = React.forwardRef<CheckboxProps.Ref, InternalProps>(\n (\n {\n controlId,\n name,\n checked,\n disabled,\n indeterminate,\n children,\n description,\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n onFocus,\n onBlur,\n onChange,\n withoutLabel,\n tabIndex,\n __internalRootRef,\n ...rest\n },\n ref\n ) => {\n const baseProps = getBaseProps(rest);\n const checkboxRef = useRef<HTMLInputElement>(null);\n useForwardFocus(ref, checkboxRef);\n useEffect(() => {\n if (checkboxRef.current) {\n checkboxRef.current.indeterminate = Boolean(indeterminate);\n }\n });\n return (\n <AbstractSwitch\n {...baseProps}\n className={clsx(styles.root, baseProps.className)}\n controlClassName={styles['checkbox-control']}\n outlineClassName={styles.outline}\n controlId={controlId}\n disabled={disabled}\n label={children}\n description={description}\n descriptionBottomPadding={true}\n ariaLabel={ariaLabel}\n ariaLabelledby={ariaLabelledby}\n ariaDescribedby={ariaDescribedby}\n nativeControl={nativeControlProps => (\n <input\n {...nativeControlProps}\n ref={checkboxRef}\n type=\"checkbox\"\n checked={checked}\n name={name}\n tabIndex={tabIndex}\n onFocus={onFocus && (() => fireNonCancelableEvent(onFocus))}\n onBlur={onBlur && (() => fireNonCancelableEvent(onBlur))}\n // empty handler to suppress React controllability warning\n onChange={() => {}}\n onClick={\n // Using onClick because onChange does not fire in indeterminate state in Internet Explorer and Legacy Edge\n // https://stackoverflow.com/questions/33523130/ie-does-not-fire-change-event-on-indeterminate-checkbox-when-you-click-on-it\n onChange &&\n (() =>\n fireNonCancelableEvent(\n onChange,\n // for deterministic transitions \"indeterminate\" -> \"checked\" -> \"unchecked\"\n indeterminate ? { checked: true, indeterminate: false } : { checked: !checked, indeterminate: false }\n ))\n }\n />\n )}\n styledControl={<CheckboxIcon checked={checked} indeterminate={indeterminate} disabled={disabled} />}\n withoutLabel={withoutLabel}\n __internalRootRef={__internalRootRef}\n />\n );\n }\n);\n\nexport default InternalCheckbox;\n"]}
|
package/checkbox/styles.css.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"root": "
|
|
5
|
-
"checkbox-control": "awsui_checkbox-
|
|
6
|
-
"
|
|
4
|
+
"root": "awsui_root_k2y2q_5zih0_93",
|
|
5
|
+
"checkbox-control": "awsui_checkbox-control_k2y2q_5zih0_105",
|
|
6
|
+
"outline": "awsui_outline_k2y2q_5zih0_113"
|
|
7
7
|
};
|
|
8
8
|
|