@cloudscape-design/components 3.0.30 → 3.0.31
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/autosuggest/autosuggest-option.d.ts +1 -0
- 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 +1 -1
- package/autosuggest/controller.js +4 -4
- package/autosuggest/controller.js.map +1 -1
- package/autosuggest/internal.d.ts.map +1 -1
- package/autosuggest/internal.js +5 -4
- package/autosuggest/internal.js.map +1 -1
- package/autosuggest/options-controller.d.ts +5 -2
- package/autosuggest/options-controller.d.ts.map +1 -1
- package/autosuggest/options-controller.js +3 -2
- package/autosuggest/options-controller.js.map +1 -1
- package/autosuggest/options-list.d.ts +3 -2
- package/autosuggest/options-list.d.ts.map +1 -1
- package/autosuggest/options-list.js +6 -6
- package/autosuggest/options-list.js.map +1 -1
- package/autosuggest/plain-list.d.ts +2 -2
- package/autosuggest/plain-list.d.ts.map +1 -1
- package/autosuggest/plain-list.js +4 -4
- 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 +4 -4
- package/autosuggest/virtual-list.js.map +1 -1
- package/internal/components/options-list/utils/use-highlight-option.d.ts +7 -2
- package/internal/components/options-list/utils/use-highlight-option.d.ts.map +1 -1
- package/internal/components/options-list/utils/use-highlight-option.js +10 -3
- package/internal/components/options-list/utils/use-highlight-option.js.map +1 -1
- package/internal/components/selectable-item/index.d.ts +1 -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/components/selectable-item/styles.css.js +16 -16
- package/internal/components/selectable-item/styles.scoped.css +29 -30
- package/internal/components/selectable-item/styles.selectors.js +16 -16
- package/internal/environment.js +1 -1
- package/multiselect/internal.d.ts.map +1 -1
- package/multiselect/internal.js +2 -2
- package/multiselect/internal.js.map +1 -1
- package/package.json +1 -1
- package/select/internal.d.ts.map +1 -1
- package/select/internal.js +2 -2
- package/select/internal.js.map +1 -1
- package/select/parts/item.d.ts +1 -1
- package/select/parts/item.d.ts.map +1 -1
- package/select/parts/item.js +6 -3
- package/select/parts/item.js.map +1 -1
- package/select/parts/multiselect-item.d.ts +1 -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 +1 -1
- package/select/parts/plain-list.d.ts.map +1 -1
- package/select/parts/plain-list.js +4 -4
- package/select/parts/plain-list.js.map +1 -1
- package/select/parts/styles.css.js +8 -7
- package/select/parts/styles.scoped.css +12 -7
- package/select/parts/styles.selectors.js +8 -7
- package/select/parts/virtual-list.js +4 -4
- package/select/parts/virtual-list.js.map +1 -1
- package/select/utils/get-item-props.d.ts +1 -2
- package/select/utils/get-item-props.d.ts.map +1 -1
- package/select/utils/get-item-props.js +3 -3
- package/select/utils/get-item-props.js.map +1 -1
- package/select/utils/render-options.d.ts +2 -2
- package/select/utils/render-options.d.ts.map +1 -1
- package/select/utils/render-options.js +2 -3
- package/select/utils/render-options.js.map +1 -1
- package/select/utils/use-select.d.ts +1 -0
- package/select/utils/use-select.d.ts.map +1 -1
- package/select/utils/use-select.js +2 -1
- package/select/utils/use-select.js.map +1 -1
|
@@ -9,7 +9,7 @@ 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 handleLoadMore = _a.handleLoadMore, filteredItems = _a.filteredItems,
|
|
12
|
+
var handleLoadMore = _a.handleLoadMore, filteredItems = _a.filteredItems, menuProps = _a.menuProps, highlightedOption = _a.highlightedOption, highlightedIndex = _a.highlightedIndex, highlightedType = _a.highlightedType, 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];
|
|
@@ -26,10 +26,10 @@ var VirtualList = function (_a) {
|
|
|
26
26
|
overscan: 5
|
|
27
27
|
});
|
|
28
28
|
useEffect(function () {
|
|
29
|
-
if (
|
|
29
|
+
if (highlightedType === 'keyboard') {
|
|
30
30
|
rowVirtualizer.scrollToIndex(highlightedIndex);
|
|
31
31
|
}
|
|
32
|
-
}, [
|
|
32
|
+
}, [highlightedType, rowVirtualizer, highlightedIndex]);
|
|
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' } }),
|
|
@@ -38,7 +38,7 @@ var VirtualList = function (_a) {
|
|
|
38
38
|
var index = virtualRow.index, start = virtualRow.start, measureRef = virtualRow.measureRef;
|
|
39
39
|
var item = filteredItems[index];
|
|
40
40
|
var optionProps = getOptionProps(index, item, filteredItems, highlightedA11yProps, highlightedOption, hasDropdownStatus);
|
|
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: filteredItems.length, ariaPosinset: index + 1 }, optionProps)));
|
|
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: filteredItems.length, ariaPosinset: index + 1, highlightedType: highlightedType }, 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,EAaT;QAZV,cAAc,oBAAA,EACd,aAAa,mBAAA,EACb,
|
|
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 handleLoadMore,\n filteredItems,\n menuProps,\n highlightedOption,\n highlightedIndex,\n highlightedType,\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: filteredItems.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 (highlightedType === 'keyboard') {\n rowVirtualizer.scrollToIndex(highlightedIndex);\n }\n }, [highlightedType, rowVirtualizer, highlightedIndex]);\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 + (filteredItems.length === 1 ? 1 : 0) }}\n />\n {rowVirtualizer.virtualItems.map(virtualRow => {\n const { index, start, measureRef } = virtualRow;\n const item = filteredItems[index];\n const optionProps = getOptionProps(\n index,\n item,\n filteredItems,\n highlightedA11yProps,\n highlightedOption,\n hasDropdownStatus\n );\n\n return (\n <AutosuggestOption\n key={index}\n ref={measureRef}\n highlightText={highlightText}\n option={item}\n highlighted={item === highlightedOption}\n data-mouse-target={index}\n enteredTextLabel={enteredTextLabel}\n virtualPosition={start + (index === 0 ? 1 : 0)}\n screenReaderContent={screenReaderContent}\n ariaSetsize={filteredItems.length}\n ariaPosinset={index + 1}\n highlightedType={highlightedType}\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"]}
|
|
@@ -1,8 +1,13 @@
|
|
|
1
|
+
import { MutableRefObject } from 'react';
|
|
1
2
|
export declare function createHighlightedOptionHook<OptionType>({ isHighlightable, }: {
|
|
2
3
|
isHighlightable: (option: OptionType) => boolean;
|
|
3
|
-
}): (options
|
|
4
|
-
|
|
4
|
+
}): ({ options, isKeyboard, }: {
|
|
5
|
+
options: ReadonlyArray<OptionType>;
|
|
6
|
+
isKeyboard: MutableRefObject<boolean>;
|
|
7
|
+
}) => {
|
|
8
|
+
setHighlightedIndex: (index: number) => void;
|
|
5
9
|
highlightedIndex: number;
|
|
10
|
+
highlightedType: "mouse" | "keyboard";
|
|
6
11
|
highlightedOption: OptionType | undefined;
|
|
7
12
|
moveHighlight: (direction: -1 | 1) => void;
|
|
8
13
|
resetHighlight: () => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-highlight-option.d.ts","sourceRoot":"","sources":["../../../../../../src/internal/components/options-list/utils/use-highlight-option.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"use-highlight-option.d.ts","sourceRoot":"","sources":["../../../../../../src/internal/components/options-list/utils/use-highlight-option.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAyB,MAAM,OAAO,CAAC;AAEhE,wBAAgB,2BAA2B,CAAC,UAAU,EAAE,EACtD,eAAe,GAChB,EAAE;IACD,eAAe,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,OAAO,CAAC;CAClD;aAKY,cAAc,UAAU,CAAC;gBACtB,iBAAiB,OAAO,CAAC;;iCAO3B,MAAM;;;;+BAoBkB,CAAC,CAAC,GAAG,CAAC;;;;8BAG7B,UAAU;EAmBxB"}
|
|
@@ -3,8 +3,14 @@
|
|
|
3
3
|
import { useCallback, useState } from 'react';
|
|
4
4
|
export function createHighlightedOptionHook(_a) {
|
|
5
5
|
var isHighlightable = _a.isHighlightable;
|
|
6
|
-
return function useHighlightedOption(
|
|
7
|
-
var
|
|
6
|
+
return function useHighlightedOption(_a) {
|
|
7
|
+
var options = _a.options, isKeyboard = _a.isKeyboard;
|
|
8
|
+
var _b = useState(-1), highlightedIndex = _b[0], setHighlightedIndexState = _b[1];
|
|
9
|
+
var _c = useState(isKeyboard.current ? 'keyboard' : 'mouse'), highlightedType = _c[0], setHighlightedType = _c[1];
|
|
10
|
+
var setHighlightedIndex = useCallback(function (index) {
|
|
11
|
+
setHighlightedIndexState(index);
|
|
12
|
+
setHighlightedType(isKeyboard.current ? 'keyboard' : 'mouse');
|
|
13
|
+
}, [isKeyboard]);
|
|
8
14
|
var highlightedOption = options[highlightedIndex] && isHighlightable(options[highlightedIndex]) ? options[highlightedIndex] : undefined;
|
|
9
15
|
var moveHighlightFrom = function (direction, startIndex) {
|
|
10
16
|
if (startIndex === void 0) { startIndex = highlightedIndex; }
|
|
@@ -20,10 +26,11 @@ export function createHighlightedOptionHook(_a) {
|
|
|
20
26
|
var highlightOption = useCallback(function (option) {
|
|
21
27
|
var index = options.indexOf(option);
|
|
22
28
|
setHighlightedIndex(index);
|
|
23
|
-
}, [options]);
|
|
29
|
+
}, [options, setHighlightedIndex]);
|
|
24
30
|
return {
|
|
25
31
|
setHighlightedIndex: setHighlightedIndex,
|
|
26
32
|
highlightedIndex: highlightedIndex,
|
|
33
|
+
highlightedType: highlightedType,
|
|
27
34
|
highlightedOption: highlightedOption,
|
|
28
35
|
moveHighlight: moveHighlight,
|
|
29
36
|
resetHighlight: function () { return setHighlightedIndex(-1); },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-highlight-option.js","sourceRoot":"","sources":["../../../../../../src/internal/components/options-list/utils/use-highlight-option.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,
|
|
1
|
+
{"version":3,"file":"use-highlight-option.js","sourceRoot":"","sources":["../../../../../../src/internal/components/options-list/utils/use-highlight-option.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAoB,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEhE,MAAM,UAAU,2BAA2B,CAAa,EAIvD;QAHC,eAAe,qBAAA;IAIf,OAAO,SAAS,oBAAoB,CAAC,EAMpC;YALC,OAAO,aAAA,EACP,UAAU,gBAAA;QAKJ,IAAA,KAA+C,QAAQ,CAAC,CAAC,CAAC,CAAC,EAA1D,gBAAgB,QAAA,EAAE,wBAAwB,QAAgB,CAAC;QAC5D,IAAA,KAAwC,QAAQ,CACpD,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAC1C,EAFM,eAAe,QAAA,EAAE,kBAAkB,QAEzC,CAAC;QACF,IAAM,mBAAmB,GAAG,WAAW,CACrC,UAAC,KAAa;YACZ,wBAAwB,CAAC,KAAK,CAAC,CAAC;YAChC,kBAAkB,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QAChE,CAAC,EACD,CAAC,UAAU,CAAC,CACb,CAAC;QACF,IAAM,iBAAiB,GACrB,OAAO,CAAC,gBAAgB,CAAC,IAAI,eAAe,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QAElH,IAAM,iBAAiB,GAAG,UAAC,SAAiB,EAAE,UAA6B;YAA7B,2BAAA,EAAA,6BAA6B;YACzE,IAAI,QAAQ,GAAG,UAAU,CAAC;YAC1B,GAAG;gBACD,QAAQ,IAAI,SAAS,CAAC;aACvB,QAAQ,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,EAAE;YAEnE,IAAI,OAAO,CAAC,QAAQ,CAAC,EAAE;gBACrB,mBAAmB,CAAC,QAAQ,CAAC,CAAC;aAC/B;QACH,CAAC,CAAC;QAEF,IAAM,aAAa,GAAG,UAAC,SAAiB,IAAK,OAAA,iBAAiB,CAAC,SAAS,CAAC,EAA5B,CAA4B,CAAC;QAE1E,IAAM,eAAe,GAAG,WAAW,CACjC,UAAC,MAAkB;YACjB,IAAM,KAAK,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;YACtC,mBAAmB,CAAC,KAAK,CAAC,CAAC;QAC7B,CAAC,EACD,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAC/B,CAAC;QAEF,OAAO;YACL,mBAAmB,qBAAA;YACnB,gBAAgB,kBAAA;YAChB,eAAe,iBAAA;YACf,iBAAiB,mBAAA;YACjB,aAAa,eAAA;YACb,cAAc,EAAE,cAAM,OAAA,mBAAmB,CAAC,CAAC,CAAC,CAAC,EAAvB,CAAuB;YAC7C,MAAM,EAAE,cAAM,OAAA,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAxB,CAAwB;YACtC,KAAK,EAAE,cAAM,OAAA,iBAAiB,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,EAArC,CAAqC;YAClD,eAAe,iBAAA;SAChB,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { MutableRefObject, useCallback, useState } from 'react';\n\nexport function createHighlightedOptionHook<OptionType>({\n isHighlightable,\n}: {\n isHighlightable: (option: OptionType) => boolean;\n}) {\n return function useHighlightedOption({\n options,\n isKeyboard,\n }: {\n options: ReadonlyArray<OptionType>;\n isKeyboard: MutableRefObject<boolean>;\n }) {\n const [highlightedIndex, setHighlightedIndexState] = useState(-1);\n const [highlightedType, setHighlightedType] = useState<'mouse' | 'keyboard'>(\n isKeyboard.current ? 'keyboard' : 'mouse'\n );\n const setHighlightedIndex = useCallback(\n (index: number) => {\n setHighlightedIndexState(index);\n setHighlightedType(isKeyboard.current ? 'keyboard' : 'mouse');\n },\n [isKeyboard]\n );\n const highlightedOption =\n options[highlightedIndex] && isHighlightable(options[highlightedIndex]) ? options[highlightedIndex] : undefined;\n\n const moveHighlightFrom = (direction: -1 | 1, startIndex = highlightedIndex) => {\n let newIndex = startIndex;\n do {\n newIndex += direction;\n } while (options[newIndex] && !isHighlightable(options[newIndex]));\n\n if (options[newIndex]) {\n setHighlightedIndex(newIndex);\n }\n };\n\n const moveHighlight = (direction: -1 | 1) => moveHighlightFrom(direction);\n\n const highlightOption = useCallback(\n (option: OptionType) => {\n const index = options.indexOf(option);\n setHighlightedIndex(index);\n },\n [options, setHighlightedIndex]\n );\n\n return {\n setHighlightedIndex,\n highlightedIndex,\n highlightedType,\n highlightedOption,\n moveHighlight,\n resetHighlight: () => setHighlightedIndex(-1),\n goHome: () => moveHighlightFrom(1, -1),\n goEnd: () => moveHighlightFrom(-1, options.length),\n highlightOption,\n };\n };\n}\n"]}
|
|
@@ -10,7 +10,6 @@ export interface SelectableItemProps extends BaseComponentProps {
|
|
|
10
10
|
hasBackground?: boolean;
|
|
11
11
|
isParent?: boolean;
|
|
12
12
|
isChild?: boolean;
|
|
13
|
-
isKeyboard?: boolean;
|
|
14
13
|
virtualPosition?: number;
|
|
15
14
|
padBottom?: boolean;
|
|
16
15
|
isNextSelected?: boolean;
|
|
@@ -18,6 +17,7 @@ export interface SelectableItemProps extends BaseComponentProps {
|
|
|
18
17
|
screenReaderContent?: string;
|
|
19
18
|
ariaPosinset?: number;
|
|
20
19
|
ariaSetsize?: number;
|
|
20
|
+
highlightedType?: 'mouse' | 'keyboard';
|
|
21
21
|
}
|
|
22
22
|
declare const _default: React.ForwardRefExoticComponent<SelectableItemProps & React.RefAttributes<HTMLDivElement>>;
|
|
23
23
|
export default _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAGvD,OAAO,EAAE,kBAAkB,EAAgB,MAAM,sBAAsB,CAAC;AAExE,MAAM,WAAW,mBAAoB,SAAQ,kBAAkB;IAC7D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAGvD,OAAO,EAAE,kBAAkB,EAAgB,MAAM,sBAAsB,CAAC;AAExE,MAAM,WAAW,mBAAoB,SAAQ,kBAAkB;IAC7D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;CACxC;;AAmGD,wBAAgD"}
|
|
@@ -7,7 +7,7 @@ import styles from './styles.css.js';
|
|
|
7
7
|
import { getBaseProps } from '../../base-component';
|
|
8
8
|
var SelectableItem = function (_a, ref) {
|
|
9
9
|
var _b;
|
|
10
|
-
var content = _a.children, ariaSelected = _a.ariaSelected, ariaChecked = _a.ariaChecked, selected = _a.selected, highlighted = _a.highlighted, disabled = _a.disabled, hasBackground = _a.hasBackground, isParent = _a.isParent, isChild = _a.isChild,
|
|
10
|
+
var content = _a.children, ariaSelected = _a.ariaSelected, ariaChecked = _a.ariaChecked, selected = _a.selected, highlighted = _a.highlighted, disabled = _a.disabled, hasBackground = _a.hasBackground, isParent = _a.isParent, isChild = _a.isChild, virtualPosition = _a.virtualPosition, padBottom = _a.padBottom, isNextSelected = _a.isNextSelected, useInteractiveGroups = _a.useInteractiveGroups, screenReaderContent = _a.screenReaderContent, ariaPosinset = _a.ariaPosinset, ariaSetsize = _a.ariaSetsize, highlightedType = _a.highlightedType, restProps = __rest(_a, ["children", "ariaSelected", "ariaChecked", "selected", "highlighted", "disabled", "hasBackground", "isParent", "isChild", "virtualPosition", "padBottom", "isNextSelected", "useInteractiveGroups", "screenReaderContent", "ariaPosinset", "ariaSetsize", "highlightedType"]);
|
|
11
11
|
var _c = getBaseProps(restProps), className = _c.className, rest = __rest(_c, ["className"]);
|
|
12
12
|
var classNames = clsx(className, styles['selectable-item'], (_b = {},
|
|
13
13
|
_b[styles.selected] = selected,
|
|
@@ -15,7 +15,7 @@ var SelectableItem = function (_a, ref) {
|
|
|
15
15
|
_b[styles['has-background']] = hasBackground,
|
|
16
16
|
_b[styles.parent] = isParent,
|
|
17
17
|
_b[styles.child] = isChild,
|
|
18
|
-
_b[styles['is-keyboard']] =
|
|
18
|
+
_b[styles['is-keyboard']] = highlightedType === 'keyboard',
|
|
19
19
|
_b[styles.disabled] = disabled,
|
|
20
20
|
_b[styles.virtual] = virtualPosition !== undefined,
|
|
21
21
|
_b[styles['pad-bottom']] = padBottom,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAsB,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAsBxE,IAAM,cAAc,GAAG,UACrB,EAmBsB,EACtB,GAA8B;;IAnB5B,IAAU,OAAO,cAAA,EACjB,YAAY,kBAAA,EACZ,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,aAAa,mBAAA,EACb,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef, useLayoutEffect } from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\n\nexport interface SelectableItemProps extends BaseComponentProps {\n children: React.ReactNode;\n ariaSelected?: boolean;\n ariaChecked?: boolean;\n selected?: boolean;\n highlighted?: boolean;\n disabled?: boolean;\n hasBackground?: boolean;\n isParent?: boolean;\n isChild?: boolean;\n virtualPosition?: number;\n padBottom?: boolean;\n isNextSelected?: boolean;\n useInteractiveGroups?: boolean;\n screenReaderContent?: string;\n ariaPosinset?: number;\n ariaSetsize?: number;\n highlightedType?: 'mouse' | 'keyboard';\n}\n\nconst SelectableItem = (\n {\n children: content,\n ariaSelected,\n ariaChecked,\n selected,\n highlighted,\n disabled,\n hasBackground,\n isParent,\n isChild,\n virtualPosition,\n padBottom,\n isNextSelected,\n useInteractiveGroups,\n screenReaderContent,\n ariaPosinset,\n ariaSetsize,\n highlightedType,\n ...restProps\n }: SelectableItemProps,\n ref: React.Ref<HTMLDivElement>\n) => {\n const { className, ...rest } = getBaseProps(restProps);\n const classNames = clsx(className, styles['selectable-item'], {\n [styles.selected]: selected,\n [styles.highlighted]: highlighted,\n [styles['has-background']]: hasBackground,\n [styles.parent]: isParent,\n [styles.child]: isChild,\n [styles['is-keyboard']]: highlightedType === 'keyboard',\n [styles.disabled]: disabled,\n [styles.virtual]: virtualPosition !== undefined,\n [styles['pad-bottom']]: padBottom,\n [styles['next-item-selected']]: isNextSelected,\n [styles.interactiveGroups]: useInteractiveGroups,\n });\n\n const contentRef = useRef<HTMLDivElement>(null);\n const screenReaderContentRef = useRef<HTMLDivElement>(null);\n\n useLayoutEffect(() => {\n // the state of aria-hidden and announcement is not set back because NVDA+Firefox would announce\n // the item which lost highlight\n // set aria-hidden true when there is announcement content, so that screen reader still announce\n // meaningful content when navigate with screen reader cursor\n // imperatively update to avoid announcement made multiple times when content updates\n if (highlighted && screenReaderContent) {\n if (contentRef.current) {\n contentRef.current.setAttribute('aria-hidden', 'true');\n }\n if (screenReaderContentRef.current) {\n screenReaderContentRef.current.textContent = screenReaderContent;\n }\n }\n }, [highlighted, screenReaderContent, contentRef, screenReaderContentRef]);\n\n const style =\n virtualPosition !== undefined\n ? {\n transform: `translateY(${virtualPosition}px)`,\n }\n : undefined;\n\n const a11yProperties: Record<string, string | number | boolean | undefined> = {\n 'aria-disabled': disabled,\n };\n\n if (isParent && !useInteractiveGroups) {\n a11yProperties['aria-hidden'] = true;\n }\n\n if (ariaSelected) {\n a11yProperties['aria-selected'] = ariaSelected;\n }\n\n // Safari+VO needs aria-checked for multi-selection. Otherwise it only announces selected option even though another option is highlighted.\n if (ariaChecked) {\n a11yProperties['aria-checked'] = ariaChecked;\n }\n\n if (ariaPosinset && ariaSetsize) {\n a11yProperties['aria-posinset'] = ariaPosinset;\n a11yProperties['aria-setsize'] = ariaSetsize;\n }\n\n return (\n <li role=\"option\" className={classNames} style={style} {...a11yProperties} {...rest}>\n <div className={styles['option-content']} ref={contentRef}>\n {content}\n </div>\n <div className={styles['measure-strut']} ref={ref} />\n <div className={styles['screenreader-content']} ref={screenReaderContentRef}></div>\n </li>\n );\n};\n\nexport default React.forwardRef(SelectableItem);\n"]}
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"selectable-item": "awsui_selectable-
|
|
5
|
-
"pad-bottom": "awsui_pad-
|
|
6
|
-
"has-background": "awsui_has-
|
|
7
|
-
"highlighted": "
|
|
8
|
-
"selected": "
|
|
9
|
-
"disabled": "
|
|
10
|
-
"next-item-selected": "awsui_next-item-
|
|
11
|
-
"is-keyboard": "awsui_is-
|
|
12
|
-
"parent": "
|
|
13
|
-
"interactiveGroups": "
|
|
14
|
-
"child": "
|
|
15
|
-
"virtual": "
|
|
16
|
-
"measure-strut": "awsui_measure-
|
|
17
|
-
"measure-strut-first": "awsui_measure-strut-
|
|
18
|
-
"screenreader-content": "awsui_screenreader-
|
|
19
|
-
"option-content": "awsui_option-
|
|
4
|
+
"selectable-item": "awsui_selectable-item_15o6u_1g6vu_93",
|
|
5
|
+
"pad-bottom": "awsui_pad-bottom_15o6u_1g6vu_113",
|
|
6
|
+
"has-background": "awsui_has-background_15o6u_1g6vu_122",
|
|
7
|
+
"highlighted": "awsui_highlighted_15o6u_1g6vu_125",
|
|
8
|
+
"selected": "awsui_selected_15o6u_1g6vu_125",
|
|
9
|
+
"disabled": "awsui_disabled_15o6u_1g6vu_139",
|
|
10
|
+
"next-item-selected": "awsui_next-item-selected_15o6u_1g6vu_147",
|
|
11
|
+
"is-keyboard": "awsui_is-keyboard_15o6u_1g6vu_155",
|
|
12
|
+
"parent": "awsui_parent_15o6u_1g6vu_159",
|
|
13
|
+
"interactiveGroups": "awsui_interactiveGroups_15o6u_1g6vu_163",
|
|
14
|
+
"child": "awsui_child_15o6u_1g6vu_175",
|
|
15
|
+
"virtual": "awsui_virtual_15o6u_1g6vu_190",
|
|
16
|
+
"measure-strut": "awsui_measure-strut_15o6u_1g6vu_201",
|
|
17
|
+
"measure-strut-first": "awsui_measure-strut-first_15o6u_1g6vu_210",
|
|
18
|
+
"screenreader-content": "awsui_screenreader-content_15o6u_1g6vu_214",
|
|
19
|
+
"option-content": "awsui_option-content_15o6u_1g6vu_220"
|
|
20
20
|
};
|
|
21
21
|
|
|
@@ -90,7 +90,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
90
90
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
91
91
|
SPDX-License-Identifier: Apache-2.0
|
|
92
92
|
*/
|
|
93
|
-
.awsui_selectable-
|
|
93
|
+
.awsui_selectable-item_15o6u_1g6vu_93:not(#\9) {
|
|
94
94
|
font-size: var(--font-body-m-size-sregvd, 14px);
|
|
95
95
|
line-height: var(--font-body-m-line-height-i7xxvv, 22px);
|
|
96
96
|
color: var(--color-text-body-default-ajf1h5, #000716);
|
|
@@ -110,96 +110,95 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
110
110
|
var(--space-xxs-ynfts5, 4px) + (var(--border-item-width-qbbbsa, 2px) - var(--border-divider-list-width-hacikr, 1px))
|
|
111
111
|
) calc(var(--space-field-horizontal-89h2yr, 12px) + var(--border-item-width-qbbbsa, 2px));
|
|
112
112
|
}
|
|
113
|
-
.awsui_selectable-
|
|
113
|
+
.awsui_selectable-item_15o6u_1g6vu_93.awsui_pad-bottom_15o6u_1g6vu_113:not(#\9) {
|
|
114
114
|
padding-bottom: calc(calc(
|
|
115
115
|
var(--space-xxs-ynfts5, 4px) + (var(--border-item-width-qbbbsa, 2px) - var(--border-divider-list-width-hacikr, 1px))
|
|
116
116
|
) + var(--space-xxxs-k2w98v, 2px));
|
|
117
117
|
border-bottom-color: transparent;
|
|
118
118
|
}
|
|
119
|
-
.awsui_selectable-
|
|
119
|
+
.awsui_selectable-item_15o6u_1g6vu_93:not(#\9):not(:first-child) {
|
|
120
120
|
margin-top: calc(-1 * var(--border-item-width-qbbbsa, 2px));
|
|
121
121
|
}
|
|
122
|
-
.awsui_selectable-
|
|
122
|
+
.awsui_selectable-item_15o6u_1g6vu_93.awsui_has-background_15o6u_1g6vu_122:not(#\9) {
|
|
123
123
|
background-color: var(--color-background-dropdown-item-hover-mqsxkv, #f4f4f4);
|
|
124
124
|
}
|
|
125
|
-
.awsui_selectable-
|
|
125
|
+
.awsui_selectable-item_15o6u_1g6vu_93.awsui_highlighted_15o6u_1g6vu_125:not(#\9), .awsui_selectable-item_15o6u_1g6vu_93.awsui_selected_15o6u_1g6vu_125:not(#\9) {
|
|
126
126
|
color: var(--color-text-dropdown-item-highlighted-oaabyk, #000716);
|
|
127
127
|
border-width: var(--border-item-width-qbbbsa, 2px);
|
|
128
128
|
border-radius: var(--border-radius-item-u2ibpi, 8px);
|
|
129
129
|
padding: var(--space-xxs-ynfts5, 4px) var(--space-field-horizontal-89h2yr, 12px);
|
|
130
130
|
}
|
|
131
|
-
.awsui_selectable-
|
|
131
|
+
.awsui_selectable-item_15o6u_1g6vu_93.awsui_highlighted_15o6u_1g6vu_125.awsui_pad-bottom_15o6u_1g6vu_113:not(#\9), .awsui_selectable-item_15o6u_1g6vu_93.awsui_selected_15o6u_1g6vu_125.awsui_pad-bottom_15o6u_1g6vu_113:not(#\9) {
|
|
132
132
|
padding-bottom: calc(var(--space-xxs-ynfts5, 4px) + var(--space-xxxs-k2w98v, 2px));
|
|
133
133
|
}
|
|
134
|
-
.awsui_selectable-
|
|
134
|
+
.awsui_selectable-item_15o6u_1g6vu_93.awsui_highlighted_15o6u_1g6vu_125:not(#\9) {
|
|
135
135
|
z-index: 2;
|
|
136
136
|
background-color: var(--color-background-dropdown-item-hover-mqsxkv, #f4f4f4);
|
|
137
137
|
border-color: var(--color-border-dropdown-item-hover-tyzq9m, #7d8998);
|
|
138
138
|
}
|
|
139
|
-
.awsui_selectable-
|
|
139
|
+
.awsui_selectable-item_15o6u_1g6vu_93.awsui_highlighted_15o6u_1g6vu_125.awsui_disabled_15o6u_1g6vu_139:not(#\9) {
|
|
140
140
|
color: var(--color-text-dropdown-item-dimmed-jyqdrs, #9ba7b6);
|
|
141
141
|
border-color: var(--color-border-dropdown-item-dimmed-hover-6dhy15, #7d8998);
|
|
142
142
|
background-color: var(--color-background-dropdown-item-dimmed-qw48ma, transparent);
|
|
143
143
|
}
|
|
144
|
-
.awsui_selectable-
|
|
145
|
-
z-index: 3;
|
|
144
|
+
.awsui_selectable-item_15o6u_1g6vu_93.awsui_selected_15o6u_1g6vu_125:not(#\9) {
|
|
146
145
|
background-color: var(--color-background-dropdown-item-selected-8l4mpk, #f2f8fd);
|
|
147
|
-
border-color: var(--color-border-dropdown-item-selected-eahq2j, #0972d3);
|
|
148
146
|
}
|
|
149
|
-
.awsui_selectable-
|
|
147
|
+
.awsui_selectable-item_15o6u_1g6vu_93.awsui_selected_15o6u_1g6vu_125.awsui_next-item-selected_15o6u_1g6vu_147:not(#\9) {
|
|
150
148
|
border-bottom-left-radius: 0;
|
|
151
149
|
border-bottom-right-radius: 0;
|
|
152
150
|
}
|
|
153
|
-
.awsui_selectable-
|
|
151
|
+
.awsui_selectable-item_15o6u_1g6vu_93.awsui_selected_15o6u_1g6vu_125 + .awsui_selectable-item_15o6u_1g6vu_93.awsui_selected_15o6u_1g6vu_125:not(#\9) {
|
|
154
152
|
border-top-left-radius: 0;
|
|
155
153
|
border-top-right-radius: 0;
|
|
156
154
|
}
|
|
157
|
-
.awsui_selectable-
|
|
158
|
-
|
|
155
|
+
.awsui_selectable-item_15o6u_1g6vu_93.awsui_highlighted_15o6u_1g6vu_125.awsui_is-keyboard_15o6u_1g6vu_155:not(#\9) {
|
|
156
|
+
border-color: var(--color-border-item-focused-ap3b6s, #0972d3);
|
|
157
|
+
box-shadow: inset 0 0 0 var(--border-control-focus-ring-shadow-spread-srzyiu, 0px) var(--color-border-item-focused-ap3b6s, #0972d3);
|
|
159
158
|
}
|
|
160
|
-
.awsui_selectable-
|
|
159
|
+
.awsui_selectable-item_15o6u_1g6vu_93.awsui_parent_15o6u_1g6vu_159:not(#\9) {
|
|
161
160
|
font-weight: bold;
|
|
162
161
|
color: var(--color-text-dropdown-group-label-eaqlcl, #414d5c);
|
|
163
162
|
}
|
|
164
|
-
.awsui_selectable-
|
|
163
|
+
.awsui_selectable-item_15o6u_1g6vu_93.awsui_parent_15o6u_1g6vu_159:not(#\9):not(.awsui_interactiveGroups_15o6u_1g6vu_163) {
|
|
165
164
|
border-top-color: var(--color-border-dropdown-group-0utpsr, #e9ebed);
|
|
166
165
|
padding: var(--space-xs-rsr2qu, 8px);
|
|
167
166
|
}
|
|
168
|
-
.awsui_selectable-
|
|
167
|
+
.awsui_selectable-item_15o6u_1g6vu_93.awsui_parent_15o6u_1g6vu_159.awsui_interactiveGroups_15o6u_1g6vu_163:not(#\9) {
|
|
169
168
|
padding: calc(
|
|
170
169
|
var(--space-xs-rsr2qu, 8px) + (var(--border-item-width-qbbbsa, 2px) - var(--border-divider-list-width-hacikr, 1px))
|
|
171
170
|
) calc(var(--space-field-horizontal-89h2yr, 12px) + var(--border-item-width-qbbbsa, 2px));
|
|
172
171
|
}
|
|
173
|
-
.awsui_selectable-
|
|
172
|
+
.awsui_selectable-item_15o6u_1g6vu_93.awsui_parent_15o6u_1g6vu_159.awsui_interactiveGroups_15o6u_1g6vu_163.awsui_highlighted_15o6u_1g6vu_125:not(#\9), .awsui_selectable-item_15o6u_1g6vu_93.awsui_parent_15o6u_1g6vu_159.awsui_interactiveGroups_15o6u_1g6vu_163.awsui_selected_15o6u_1g6vu_125:not(#\9) {
|
|
174
173
|
padding: var(--space-xs-rsr2qu, 8px) var(--space-field-horizontal-89h2yr, 12px);
|
|
175
174
|
}
|
|
176
|
-
.awsui_selectable-
|
|
175
|
+
.awsui_selectable-item_15o6u_1g6vu_93.awsui_child_15o6u_1g6vu_175:not(#\9) {
|
|
177
176
|
padding-left: calc(var(--space-xxl-2nvmf1, 32px) + var(--border-item-width-qbbbsa, 2px));
|
|
178
177
|
}
|
|
179
|
-
.awsui_selectable-
|
|
178
|
+
.awsui_selectable-item_15o6u_1g6vu_93.awsui_child_15o6u_1g6vu_175.awsui_highlighted_15o6u_1g6vu_125:not(#\9), .awsui_selectable-item_15o6u_1g6vu_93.awsui_child_15o6u_1g6vu_175.awsui_selected_15o6u_1g6vu_125:not(#\9) {
|
|
180
179
|
padding-left: var(--space-xxl-2nvmf1, 32px);
|
|
181
180
|
}
|
|
182
|
-
.awsui_selectable-
|
|
181
|
+
.awsui_selectable-item_15o6u_1g6vu_93.awsui_disabled_15o6u_1g6vu_139:not(#\9) {
|
|
183
182
|
color: var(--color-text-dropdown-item-disabled-varol7, #9ba7b6);
|
|
184
183
|
}
|
|
185
|
-
.awsui_selectable-
|
|
184
|
+
.awsui_selectable-item_15o6u_1g6vu_93:not(#\9):not(.awsui_disabled_15o6u_1g6vu_139):not(.awsui_parent_15o6u_1g6vu_159) {
|
|
186
185
|
cursor: pointer;
|
|
187
186
|
}
|
|
188
|
-
.awsui_selectable-
|
|
187
|
+
.awsui_selectable-item_15o6u_1g6vu_93.awsui_interactiveGroups_15o6u_1g6vu_163:not(#\9):not(.awsui_disabled_15o6u_1g6vu_139) {
|
|
189
188
|
cursor: pointer;
|
|
190
189
|
}
|
|
191
|
-
.awsui_selectable-
|
|
190
|
+
.awsui_selectable-item_15o6u_1g6vu_93.awsui_virtual_15o6u_1g6vu_190:not(#\9) {
|
|
192
191
|
position: absolute;
|
|
193
192
|
top: var(--border-dropdown-virtual-offset-width-fzhepk, 2px);
|
|
194
193
|
left: 0;
|
|
195
194
|
width: 100%;
|
|
196
195
|
box-sizing: border-box;
|
|
197
196
|
}
|
|
198
|
-
.awsui_selectable-
|
|
197
|
+
.awsui_selectable-item_15o6u_1g6vu_93.awsui_virtual_15o6u_1g6vu_190:not(#\9):first-of-type:not(.awsui_selected_15o6u_1g6vu_125, .awsui_highlighted_15o6u_1g6vu_125) {
|
|
199
198
|
border-top-color: var(--color-border-dropdown-item-top-xnzq48, transparent);
|
|
200
199
|
}
|
|
201
200
|
|
|
202
|
-
.awsui_measure-
|
|
201
|
+
.awsui_measure-strut_15o6u_1g6vu_201:not(#\9) {
|
|
203
202
|
position: absolute;
|
|
204
203
|
pointer-events: none;
|
|
205
204
|
height: 100%;
|
|
@@ -208,16 +207,16 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
208
207
|
left: 0;
|
|
209
208
|
padding-top: var(--border-divider-list-width-hacikr, 1px);
|
|
210
209
|
}
|
|
211
|
-
.awsui_measure-strut-
|
|
210
|
+
.awsui_measure-strut-first_15o6u_1g6vu_210:not(#\9) {
|
|
212
211
|
padding-bottom: var(--border-divider-list-width-hacikr, 1px);
|
|
213
212
|
}
|
|
214
213
|
|
|
215
|
-
.awsui_screenreader-
|
|
214
|
+
.awsui_screenreader-content_15o6u_1g6vu_214:not(#\9) {
|
|
216
215
|
position: absolute !important;
|
|
217
216
|
top: -9999px !important;
|
|
218
217
|
left: -9999px !important;
|
|
219
218
|
}
|
|
220
219
|
|
|
221
|
-
.awsui_option-
|
|
220
|
+
.awsui_option-content_15o6u_1g6vu_220:not(#\9) {
|
|
222
221
|
/* used in test-utils */
|
|
223
222
|
}
|
|
@@ -2,21 +2,21 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"selectable-item": "awsui_selectable-
|
|
6
|
-
"pad-bottom": "awsui_pad-
|
|
7
|
-
"has-background": "awsui_has-
|
|
8
|
-
"highlighted": "
|
|
9
|
-
"selected": "
|
|
10
|
-
"disabled": "
|
|
11
|
-
"next-item-selected": "awsui_next-item-
|
|
12
|
-
"is-keyboard": "awsui_is-
|
|
13
|
-
"parent": "
|
|
14
|
-
"interactiveGroups": "
|
|
15
|
-
"child": "
|
|
16
|
-
"virtual": "
|
|
17
|
-
"measure-strut": "awsui_measure-
|
|
18
|
-
"measure-strut-first": "awsui_measure-strut-
|
|
19
|
-
"screenreader-content": "awsui_screenreader-
|
|
20
|
-
"option-content": "awsui_option-
|
|
5
|
+
"selectable-item": "awsui_selectable-item_15o6u_1g6vu_93",
|
|
6
|
+
"pad-bottom": "awsui_pad-bottom_15o6u_1g6vu_113",
|
|
7
|
+
"has-background": "awsui_has-background_15o6u_1g6vu_122",
|
|
8
|
+
"highlighted": "awsui_highlighted_15o6u_1g6vu_125",
|
|
9
|
+
"selected": "awsui_selected_15o6u_1g6vu_125",
|
|
10
|
+
"disabled": "awsui_disabled_15o6u_1g6vu_139",
|
|
11
|
+
"next-item-selected": "awsui_next-item-selected_15o6u_1g6vu_147",
|
|
12
|
+
"is-keyboard": "awsui_is-keyboard_15o6u_1g6vu_155",
|
|
13
|
+
"parent": "awsui_parent_15o6u_1g6vu_159",
|
|
14
|
+
"interactiveGroups": "awsui_interactiveGroups_15o6u_1g6vu_163",
|
|
15
|
+
"child": "awsui_child_15o6u_1g6vu_175",
|
|
16
|
+
"virtual": "awsui_virtual_15o6u_1g6vu_190",
|
|
17
|
+
"measure-strut": "awsui_measure-strut_15o6u_1g6vu_201",
|
|
18
|
+
"measure-strut-first": "awsui_measure-strut-first_15o6u_1g6vu_210",
|
|
19
|
+
"screenreader-content": "awsui_screenreader-content_15o6u_1g6vu_214",
|
|
20
|
+
"option-content": "awsui_option-content_15o6u_1g6vu_220"
|
|
21
21
|
};
|
|
22
22
|
|
package/internal/environment.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/multiselect/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AA0B3F,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAKhD,QAAA,MAAM,mBAAmB,
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/multiselect/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AA0B3F,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAKhD,QAAA,MAAM,mBAAmB,4HA4QxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
|
package/multiselect/internal.js
CHANGED
|
@@ -90,7 +90,7 @@ var InternalMultiselect = React.forwardRef(function (_a, externalRef) {
|
|
|
90
90
|
fireLoadItems: fireLoadItems,
|
|
91
91
|
setFilteringValue: setFilteringValue,
|
|
92
92
|
useInteractiveGroups: useInteractiveGroups
|
|
93
|
-
}), isOpen = _o.isOpen, highlightedOption = _o.highlightedOption, highlightedIndex = _o.highlightedIndex, getTriggerProps = _o.getTriggerProps, getFilterProps = _o.getFilterProps, getMenuProps = _o.getMenuProps, getOptionProps = _o.getOptionProps, isKeyboard = _o.isKeyboard, highlightOption = _o.highlightOption, announceSelected = _o.announceSelected;
|
|
93
|
+
}), isOpen = _o.isOpen, highlightedOption = _o.highlightedOption, highlightedIndex = _o.highlightedIndex, highlightedType = _o.highlightedType, getTriggerProps = _o.getTriggerProps, getFilterProps = _o.getFilterProps, getMenuProps = _o.getMenuProps, getOptionProps = _o.getOptionProps, isKeyboard = _o.isKeyboard, highlightOption = _o.highlightOption, announceSelected = _o.announceSelected;
|
|
94
94
|
var handleNativeSearch = useNativeSearch({
|
|
95
95
|
isEnabled: filteringType === 'none' && isOpen,
|
|
96
96
|
options: filteredOptions,
|
|
@@ -164,7 +164,7 @@ var InternalMultiselect = React.forwardRef(function (_a, externalRef) {
|
|
|
164
164
|
var mergedRef = useMergeRefs(rootRef, __internalRootRef);
|
|
165
165
|
return (React.createElement("div", __assign({}, baseProps, { ref: mergedRef, className: clsx(styles.root, baseProps.className), onKeyPress: handleNativeSearch }),
|
|
166
166
|
React.createElement(Dropdown, { open: isOpen, trigger: trigger, header: filter, onMouseDown: handleMouseDown, footer: dropdownStatus.isSticky ? React.createElement(DropdownFooter, { content: dropdownStatus.content }) : null, expandToViewport: expandToViewport },
|
|
167
|
-
React.createElement(ListComponent, { listBottom: !dropdownStatus.isSticky ? React.createElement(DropdownFooter, { content: dropdownStatus.content }) : null, menuProps: menuProps, getOptionProps: getOptionProps, filteredOptions: filteredOptions, filteringValue: filteringValue,
|
|
167
|
+
React.createElement(ListComponent, { listBottom: !dropdownStatus.isSticky ? React.createElement(DropdownFooter, { content: dropdownStatus.content }) : null, menuProps: menuProps, getOptionProps: getOptionProps, filteredOptions: filteredOptions, filteringValue: filteringValue, ref: scrollToIndex, hasDropdownStatus: dropdownStatus.content !== null, checkboxes: true, useInteractiveGroups: useInteractiveGroups, screenReaderContent: announcement, highlightedType: highlightedType })),
|
|
168
168
|
showTokens && (React.createElement(TokenGroup, { limit: tokenLimit, items: tokens, onDismiss: handleTokenDismiss, i18nStrings: tokenGroupI18nStrings }))));
|
|
169
169
|
});
|
|
170
170
|
export default InternalMultiselect;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/multiselect/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\n\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component/index.js';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { isGroup } from '../internal/components/option/utils/filter-options';\n\nimport DropdownFooter from '../internal/components/dropdown-footer/index.js';\nimport { prepareOptions } from '../internal/components/option/utils/prepare-options';\nimport { OptionDefinition, OptionGroup } from '../internal/components/option/interfaces';\nimport Dropdown from '../internal/components/dropdown';\nimport { useDropdownStatus } from '../internal/components/dropdown-status';\n\nimport { useSelect, MenuProps } from '../select/utils/use-select';\nimport { useNativeSearch } from '../select/utils/use-native-search';\nimport { useLoadItems } from '../select/utils/use-load-items';\nimport { useAnnouncement } from '../select/utils/use-announcement';\nimport { findOptionIndex } from '../select/utils/connect-options';\nimport PlainList, { SelectListProps } from '../select/parts/plain-list';\nimport VirtualList from '../select/parts/virtual-list';\nimport { checkOptionValueField } from '../select/utils/check-option-value-field.js';\nimport Filter from '../select/parts/filter';\nimport Trigger from '../select/parts/trigger';\n\nimport TokenGroup, { TokenGroupProps } from '../token-group/index.js';\n\nimport { MultiselectProps } from './interfaces';\nimport styles from './styles.css.js';\n\ntype InternalMultiselectProps = MultiselectProps & InternalBaseComponentProps;\n\nconst InternalMultiselect = React.forwardRef(\n (\n {\n options = [],\n filteringType = 'none',\n filteringPlaceholder,\n filteringAriaLabel,\n ariaRequired,\n placeholder,\n disabled,\n ariaLabel,\n statusType = 'finished',\n empty,\n loadingText,\n finishedText,\n errorText,\n recoveryText,\n noMatch,\n selectedAriaLabel,\n renderHighlightedAriaLive,\n selectedOptions = [],\n deselectAriaLabel,\n keepOpen = true,\n tokenLimit,\n i18nStrings,\n onBlur,\n onFocus,\n onLoadItems,\n onChange,\n virtualScroll,\n hideTokens = false,\n expandToViewport,\n __internalRootRef = null,\n ...restProps\n }: InternalMultiselectProps,\n externalRef: React.Ref<MultiselectProps.Ref>\n ) => {\n checkOptionValueField('Multiselect', 'options', options);\n\n const baseProps = getBaseProps(restProps);\n const formFieldContext = useFormFieldContext(restProps);\n\n const { handleLoadMore, handleRecoveryClick, fireLoadItems } = useLoadItems({\n onLoadItems,\n options,\n statusType,\n });\n const useInteractiveGroups = true;\n const [filteringValue, setFilteringValue] = useState('');\n const { filteredOptions, parentMap } = prepareOptions(options, filteringType, filteringValue);\n\n const updateSelectedOption = useCallback(\n (option: OptionDefinition | OptionGroup) => {\n const filtered = filteredOptions.filter(item => item.type !== 'parent').map(item => item.option);\n\n // switch between selection and deselection behavior, ignores disabled options to prevent\n // getting stuck on one behavior when an option is disabled and its state cannot be changed\n const isAllChildrenSelected = (optionsArray: OptionDefinition[]) =>\n optionsArray.every(item => findOptionIndex(selectedOptions, item) > -1 || item.disabled);\n const intersection = (visibleOptions: OptionDefinition[], options: OptionDefinition[]) =>\n visibleOptions.filter(item => findOptionIndex(options, item) > -1 && !item.disabled);\n const union = (visibleOptions: OptionDefinition[], options: OptionDefinition[]) =>\n visibleOptions.filter(item => findOptionIndex(options, item) === -1).concat(options);\n const select = (options: OptionDefinition[], selectedOptions: OptionDefinition[]) => {\n return union(selectedOptions, options);\n };\n const unselect = (options: OptionDefinition[], selectedOptions: OptionDefinition[]) => {\n return selectedOptions.filter(option => findOptionIndex(options, option) === -1);\n };\n let newSelectedOptions = [...selectedOptions];\n\n if (isGroup(option)) {\n const visibleOptions = intersection([...option.options], filtered);\n newSelectedOptions = isAllChildrenSelected(visibleOptions)\n ? unselect(visibleOptions, newSelectedOptions)\n : select(visibleOptions, newSelectedOptions);\n } else {\n newSelectedOptions = isAllChildrenSelected([option])\n ? unselect([option], newSelectedOptions)\n : select([option], newSelectedOptions);\n }\n\n fireNonCancelableEvent(onChange, {\n selectedOptions: newSelectedOptions,\n });\n },\n [onChange, selectedOptions, filteredOptions]\n );\n\n const rootRef = useRef<HTMLDivElement>(null);\n\n const selfControlId = useUniqueId('trigger');\n const controlId = formFieldContext.controlId ?? selfControlId;\n\n const scrollToIndex = useRef<SelectListProps.SelectListRef>(null);\n const {\n isOpen,\n highlightedOption,\n highlightedIndex,\n getTriggerProps,\n getFilterProps,\n getMenuProps,\n getOptionProps,\n isKeyboard,\n highlightOption,\n announceSelected,\n } = useSelect({\n selectedOptions,\n updateSelectedOption,\n options: filteredOptions,\n filteringType,\n onFocus,\n onBlur,\n externalRef,\n keepOpen,\n fireLoadItems,\n setFilteringValue,\n useInteractiveGroups,\n });\n\n const handleNativeSearch = useNativeSearch({\n isEnabled: filteringType === 'none' && isOpen,\n options: filteredOptions,\n highlightOption: highlightOption,\n highlightedOption: highlightedOption?.option,\n isKeyboard,\n useInteractiveGroups,\n });\n\n const isEmpty = !options || options.length === 0;\n const isNoMatch = filteredOptions && filteredOptions.length === 0;\n const dropdownStatus = useDropdownStatus({\n statusType,\n empty,\n loadingText,\n finishedText,\n errorText,\n recoveryText,\n isEmpty,\n isNoMatch,\n noMatch,\n onRecoveryClick: handleRecoveryClick,\n });\n\n const filter = (\n <Filter\n filteringType={filteringType}\n placeholder={filteringPlaceholder}\n ariaLabel={filteringAriaLabel}\n ariaRequired={ariaRequired}\n value={filteringValue}\n {...getFilterProps()}\n />\n );\n\n const trigger = (\n <Trigger\n placeholder={placeholder}\n disabled={disabled}\n ariaLabel={ariaLabel}\n triggerProps={getTriggerProps(disabled)}\n selectedOption={null}\n isOpen={isOpen}\n {...formFieldContext}\n controlId={controlId}\n />\n );\n\n const menuProps: MenuProps = {\n ...getMenuProps(),\n onLoadMore: handleLoadMore,\n ariaLabelledby: controlId,\n };\n\n const announcement = useAnnouncement({\n announceSelected,\n highlightedOption,\n getParent: option => parentMap.get(option)?.option as undefined | OptionGroup,\n selectedAriaLabel,\n renderHighlightedAriaLive,\n });\n\n const tokens: TokenGroupProps['items'] = selectedOptions.map(option => ({\n label: option.label,\n disabled: disabled || option.disabled,\n labelTag: option.labelTag,\n description: option.description,\n iconAlt: option.iconAlt,\n iconName: option.iconName,\n iconUrl: option.iconUrl,\n iconSvg: option.iconSvg,\n tags: option.tags,\n dismissLabel: deselectAriaLabel ? deselectAriaLabel(option) : undefined,\n }));\n\n useEffect(() => {\n scrollToIndex.current?.(highlightedIndex);\n }, [highlightedIndex]);\n\n const ListComponent = virtualScroll ? VirtualList : PlainList;\n\n const handleMouseDown = (event: React.MouseEvent) => {\n const target = event.target as HTMLElement;\n\n if (target !== document.activeElement) {\n // prevent currently focused element from losing it\n event.preventDefault();\n }\n };\n\n const showTokens = !hideTokens && tokens.length > 0;\n const handleTokenDismiss: TokenGroupProps['onDismiss'] = ({ detail }) => {\n const optionToDeselect = selectedOptions[detail.itemIndex];\n updateSelectedOption(optionToDeselect);\n const targetRef = getTriggerProps().ref;\n if (targetRef.current) {\n targetRef.current.focus();\n }\n };\n\n const tokenGroupI18nStrings: TokenGroupProps.I18nStrings = {\n limitShowFewer: i18nStrings?.tokenLimitShowFewer,\n limitShowMore: i18nStrings?.tokenLimitShowMore,\n };\n\n const mergedRef = useMergeRefs(rootRef, __internalRootRef);\n\n return (\n <div\n {...baseProps}\n ref={mergedRef}\n className={clsx(styles.root, baseProps.className)}\n onKeyPress={handleNativeSearch}\n >\n <Dropdown\n open={isOpen}\n trigger={trigger}\n header={filter}\n onMouseDown={handleMouseDown}\n footer={dropdownStatus.isSticky ? <DropdownFooter content={dropdownStatus.content} /> : null}\n expandToViewport={expandToViewport}\n >\n <ListComponent\n listBottom={!dropdownStatus.isSticky ? <DropdownFooter content={dropdownStatus.content} /> : null}\n menuProps={menuProps}\n getOptionProps={getOptionProps}\n filteredOptions={filteredOptions}\n filteringValue={filteringValue}\n isKeyboard={isKeyboard.current}\n ref={scrollToIndex}\n hasDropdownStatus={dropdownStatus.content !== null}\n checkboxes={true}\n useInteractiveGroups={useInteractiveGroups}\n screenReaderContent={announcement}\n />\n </Dropdown>\n {showTokens && (\n <TokenGroup\n limit={tokenLimit}\n items={tokens}\n onDismiss={handleTokenDismiss}\n i18nStrings={tokenGroupI18nStrings}\n />\n )}\n </div>\n );\n }\n);\n\nexport default InternalMultiselect;\n"]}
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/multiselect/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\n\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component/index.js';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { isGroup } from '../internal/components/option/utils/filter-options';\n\nimport DropdownFooter from '../internal/components/dropdown-footer/index.js';\nimport { prepareOptions } from '../internal/components/option/utils/prepare-options';\nimport { OptionDefinition, OptionGroup } from '../internal/components/option/interfaces';\nimport Dropdown from '../internal/components/dropdown';\nimport { useDropdownStatus } from '../internal/components/dropdown-status';\n\nimport { useSelect, MenuProps } from '../select/utils/use-select';\nimport { useNativeSearch } from '../select/utils/use-native-search';\nimport { useLoadItems } from '../select/utils/use-load-items';\nimport { useAnnouncement } from '../select/utils/use-announcement';\nimport { findOptionIndex } from '../select/utils/connect-options';\nimport PlainList, { SelectListProps } from '../select/parts/plain-list';\nimport VirtualList from '../select/parts/virtual-list';\nimport { checkOptionValueField } from '../select/utils/check-option-value-field.js';\nimport Filter from '../select/parts/filter';\nimport Trigger from '../select/parts/trigger';\n\nimport TokenGroup, { TokenGroupProps } from '../token-group/index.js';\n\nimport { MultiselectProps } from './interfaces';\nimport styles from './styles.css.js';\n\ntype InternalMultiselectProps = MultiselectProps & InternalBaseComponentProps;\n\nconst InternalMultiselect = React.forwardRef(\n (\n {\n options = [],\n filteringType = 'none',\n filteringPlaceholder,\n filteringAriaLabel,\n ariaRequired,\n placeholder,\n disabled,\n ariaLabel,\n statusType = 'finished',\n empty,\n loadingText,\n finishedText,\n errorText,\n recoveryText,\n noMatch,\n selectedAriaLabel,\n renderHighlightedAriaLive,\n selectedOptions = [],\n deselectAriaLabel,\n keepOpen = true,\n tokenLimit,\n i18nStrings,\n onBlur,\n onFocus,\n onLoadItems,\n onChange,\n virtualScroll,\n hideTokens = false,\n expandToViewport,\n __internalRootRef = null,\n ...restProps\n }: InternalMultiselectProps,\n externalRef: React.Ref<MultiselectProps.Ref>\n ) => {\n checkOptionValueField('Multiselect', 'options', options);\n\n const baseProps = getBaseProps(restProps);\n const formFieldContext = useFormFieldContext(restProps);\n\n const { handleLoadMore, handleRecoveryClick, fireLoadItems } = useLoadItems({\n onLoadItems,\n options,\n statusType,\n });\n const useInteractiveGroups = true;\n const [filteringValue, setFilteringValue] = useState('');\n const { filteredOptions, parentMap } = prepareOptions(options, filteringType, filteringValue);\n\n const updateSelectedOption = useCallback(\n (option: OptionDefinition | OptionGroup) => {\n const filtered = filteredOptions.filter(item => item.type !== 'parent').map(item => item.option);\n\n // switch between selection and deselection behavior, ignores disabled options to prevent\n // getting stuck on one behavior when an option is disabled and its state cannot be changed\n const isAllChildrenSelected = (optionsArray: OptionDefinition[]) =>\n optionsArray.every(item => findOptionIndex(selectedOptions, item) > -1 || item.disabled);\n const intersection = (visibleOptions: OptionDefinition[], options: OptionDefinition[]) =>\n visibleOptions.filter(item => findOptionIndex(options, item) > -1 && !item.disabled);\n const union = (visibleOptions: OptionDefinition[], options: OptionDefinition[]) =>\n visibleOptions.filter(item => findOptionIndex(options, item) === -1).concat(options);\n const select = (options: OptionDefinition[], selectedOptions: OptionDefinition[]) => {\n return union(selectedOptions, options);\n };\n const unselect = (options: OptionDefinition[], selectedOptions: OptionDefinition[]) => {\n return selectedOptions.filter(option => findOptionIndex(options, option) === -1);\n };\n let newSelectedOptions = [...selectedOptions];\n\n if (isGroup(option)) {\n const visibleOptions = intersection([...option.options], filtered);\n newSelectedOptions = isAllChildrenSelected(visibleOptions)\n ? unselect(visibleOptions, newSelectedOptions)\n : select(visibleOptions, newSelectedOptions);\n } else {\n newSelectedOptions = isAllChildrenSelected([option])\n ? unselect([option], newSelectedOptions)\n : select([option], newSelectedOptions);\n }\n\n fireNonCancelableEvent(onChange, {\n selectedOptions: newSelectedOptions,\n });\n },\n [onChange, selectedOptions, filteredOptions]\n );\n\n const rootRef = useRef<HTMLDivElement>(null);\n\n const selfControlId = useUniqueId('trigger');\n const controlId = formFieldContext.controlId ?? selfControlId;\n\n const scrollToIndex = useRef<SelectListProps.SelectListRef>(null);\n const {\n isOpen,\n highlightedOption,\n highlightedIndex,\n highlightedType,\n getTriggerProps,\n getFilterProps,\n getMenuProps,\n getOptionProps,\n isKeyboard,\n highlightOption,\n announceSelected,\n } = useSelect({\n selectedOptions,\n updateSelectedOption,\n options: filteredOptions,\n filteringType,\n onFocus,\n onBlur,\n externalRef,\n keepOpen,\n fireLoadItems,\n setFilteringValue,\n useInteractiveGroups,\n });\n\n const handleNativeSearch = useNativeSearch({\n isEnabled: filteringType === 'none' && isOpen,\n options: filteredOptions,\n highlightOption: highlightOption,\n highlightedOption: highlightedOption?.option,\n isKeyboard,\n useInteractiveGroups,\n });\n\n const isEmpty = !options || options.length === 0;\n const isNoMatch = filteredOptions && filteredOptions.length === 0;\n const dropdownStatus = useDropdownStatus({\n statusType,\n empty,\n loadingText,\n finishedText,\n errorText,\n recoveryText,\n isEmpty,\n isNoMatch,\n noMatch,\n onRecoveryClick: handleRecoveryClick,\n });\n\n const filter = (\n <Filter\n filteringType={filteringType}\n placeholder={filteringPlaceholder}\n ariaLabel={filteringAriaLabel}\n ariaRequired={ariaRequired}\n value={filteringValue}\n {...getFilterProps()}\n />\n );\n\n const trigger = (\n <Trigger\n placeholder={placeholder}\n disabled={disabled}\n ariaLabel={ariaLabel}\n triggerProps={getTriggerProps(disabled)}\n selectedOption={null}\n isOpen={isOpen}\n {...formFieldContext}\n controlId={controlId}\n />\n );\n\n const menuProps: MenuProps = {\n ...getMenuProps(),\n onLoadMore: handleLoadMore,\n ariaLabelledby: controlId,\n };\n\n const announcement = useAnnouncement({\n announceSelected,\n highlightedOption,\n getParent: option => parentMap.get(option)?.option as undefined | OptionGroup,\n selectedAriaLabel,\n renderHighlightedAriaLive,\n });\n\n const tokens: TokenGroupProps['items'] = selectedOptions.map(option => ({\n label: option.label,\n disabled: disabled || option.disabled,\n labelTag: option.labelTag,\n description: option.description,\n iconAlt: option.iconAlt,\n iconName: option.iconName,\n iconUrl: option.iconUrl,\n iconSvg: option.iconSvg,\n tags: option.tags,\n dismissLabel: deselectAriaLabel ? deselectAriaLabel(option) : undefined,\n }));\n\n useEffect(() => {\n scrollToIndex.current?.(highlightedIndex);\n }, [highlightedIndex]);\n\n const ListComponent = virtualScroll ? VirtualList : PlainList;\n\n const handleMouseDown = (event: React.MouseEvent) => {\n const target = event.target as HTMLElement;\n\n if (target !== document.activeElement) {\n // prevent currently focused element from losing it\n event.preventDefault();\n }\n };\n\n const showTokens = !hideTokens && tokens.length > 0;\n const handleTokenDismiss: TokenGroupProps['onDismiss'] = ({ detail }) => {\n const optionToDeselect = selectedOptions[detail.itemIndex];\n updateSelectedOption(optionToDeselect);\n const targetRef = getTriggerProps().ref;\n if (targetRef.current) {\n targetRef.current.focus();\n }\n };\n\n const tokenGroupI18nStrings: TokenGroupProps.I18nStrings = {\n limitShowFewer: i18nStrings?.tokenLimitShowFewer,\n limitShowMore: i18nStrings?.tokenLimitShowMore,\n };\n\n const mergedRef = useMergeRefs(rootRef, __internalRootRef);\n\n return (\n <div\n {...baseProps}\n ref={mergedRef}\n className={clsx(styles.root, baseProps.className)}\n onKeyPress={handleNativeSearch}\n >\n <Dropdown\n open={isOpen}\n trigger={trigger}\n header={filter}\n onMouseDown={handleMouseDown}\n footer={dropdownStatus.isSticky ? <DropdownFooter content={dropdownStatus.content} /> : null}\n expandToViewport={expandToViewport}\n >\n <ListComponent\n listBottom={!dropdownStatus.isSticky ? <DropdownFooter content={dropdownStatus.content} /> : null}\n menuProps={menuProps}\n getOptionProps={getOptionProps}\n filteredOptions={filteredOptions}\n filteringValue={filteringValue}\n ref={scrollToIndex}\n hasDropdownStatus={dropdownStatus.content !== null}\n checkboxes={true}\n useInteractiveGroups={useInteractiveGroups}\n screenReaderContent={announcement}\n highlightedType={highlightedType}\n />\n </Dropdown>\n {showTokens && (\n <TokenGroup\n limit={tokenLimit}\n items={tokens}\n onDismiss={handleTokenDismiss}\n i18nStrings={tokenGroupI18nStrings}\n />\n )}\n </div>\n );\n }\n);\n\nexport default InternalMultiselect;\n"]}
|