@cloudscape-design/components-themeable 3.0.941 → 3.0.943
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/internal/manifest.json +1 -1
- package/lib/internal/scss/internal/components/selectable-item/styles.scss +4 -0
- package/lib/internal/scss/select/parts/styles.scss +5 -15
- package/lib/internal/template/app-layout/drawer/index.d.ts.map +1 -1
- package/lib/internal/template/app-layout/drawer/index.js +1 -1
- package/lib/internal/template/app-layout/drawer/index.js.map +1 -1
- package/lib/internal/template/app-layout/mobile-toolbar/index.d.ts.map +1 -1
- package/lib/internal/template/app-layout/mobile-toolbar/index.js +1 -1
- package/lib/internal/template/app-layout/mobile-toolbar/index.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/drawers.d.ts.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/drawers.js +2 -2
- package/lib/internal/template/app-layout/visual-refresh/drawers.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.d.ts.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.js +2 -2
- package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.js.map +1 -1
- package/lib/internal/template/internal/components/option/interfaces.d.ts +1 -1
- package/lib/internal/template/internal/components/option/interfaces.d.ts.map +1 -1
- package/lib/internal/template/internal/components/option/interfaces.js.map +1 -1
- package/lib/internal/template/internal/components/option/utils/prepare-options.d.ts +1 -0
- package/lib/internal/template/internal/components/option/utils/prepare-options.d.ts.map +1 -1
- package/lib/internal/template/internal/components/option/utils/prepare-options.js +1 -0
- package/lib/internal/template/internal/components/option/utils/prepare-options.js.map +1 -1
- package/lib/internal/template/internal/components/options-list/index.d.ts +1 -0
- package/lib/internal/template/internal/components/options-list/index.d.ts.map +1 -1
- package/lib/internal/template/internal/components/options-list/index.js +2 -2
- package/lib/internal/template/internal/components/options-list/index.js.map +1 -1
- package/lib/internal/template/internal/components/selectable-item/index.d.ts.map +1 -1
- package/lib/internal/template/internal/components/selectable-item/index.js +2 -1
- package/lib/internal/template/internal/components/selectable-item/index.js.map +1 -1
- package/lib/internal/template/internal/components/selectable-item/interfaces.d.ts +1 -0
- package/lib/internal/template/internal/components/selectable-item/interfaces.d.ts.map +1 -1
- package/lib/internal/template/internal/components/selectable-item/interfaces.js.map +1 -1
- package/lib/internal/template/internal/components/selectable-item/styles.css.js +20 -19
- package/lib/internal/template/internal/components/selectable-item/styles.scoped.css +41 -37
- package/lib/internal/template/internal/components/selectable-item/styles.selectors.js +20 -19
- package/lib/internal/template/internal/environment.js +1 -1
- package/lib/internal/template/internal/environment.json +1 -1
- package/lib/internal/template/multiselect/interfaces.d.ts +11 -2
- package/lib/internal/template/multiselect/interfaces.d.ts.map +1 -1
- package/lib/internal/template/multiselect/interfaces.js.map +1 -1
- package/lib/internal/template/multiselect/internal.d.ts.map +1 -1
- package/lib/internal/template/multiselect/internal.js +5 -3
- package/lib/internal/template/multiselect/internal.js.map +1 -1
- package/lib/internal/template/multiselect/use-multiselect.d.ts +7 -4
- package/lib/internal/template/multiselect/use-multiselect.d.ts.map +1 -1
- package/lib/internal/template/multiselect/use-multiselect.js +33 -9
- package/lib/internal/template/multiselect/use-multiselect.js.map +1 -1
- package/lib/internal/template/select/internal.js +1 -1
- package/lib/internal/template/select/internal.js.map +1 -1
- package/lib/internal/template/select/parts/common.d.ts +2 -0
- package/lib/internal/template/select/parts/common.d.ts.map +1 -0
- package/lib/internal/template/select/parts/common.js +4 -0
- package/lib/internal/template/select/parts/common.js.map +1 -0
- package/lib/internal/template/select/parts/multiselect-item.d.ts.map +1 -1
- package/lib/internal/template/select/parts/multiselect-item.js +3 -2
- package/lib/internal/template/select/parts/multiselect-item.js.map +1 -1
- package/lib/internal/template/select/parts/plain-list.d.ts.map +1 -1
- package/lib/internal/template/select/parts/plain-list.js +22 -14
- package/lib/internal/template/select/parts/plain-list.js.map +1 -1
- package/lib/internal/template/select/parts/styles.css.js +20 -21
- package/lib/internal/template/select/parts/styles.scoped.css +26 -30
- package/lib/internal/template/select/parts/styles.selectors.js +20 -21
- package/lib/internal/template/select/parts/trigger.d.ts.map +1 -1
- package/lib/internal/template/select/parts/trigger.js +1 -1
- package/lib/internal/template/select/parts/trigger.js.map +1 -1
- package/lib/internal/template/select/parts/virtual-list.d.ts.map +1 -1
- package/lib/internal/template/select/parts/virtual-list.js +26 -9
- package/lib/internal/template/select/parts/virtual-list.js.map +1 -1
- package/lib/internal/template/select/utils/render-options.d.ts +4 -3
- package/lib/internal/template/select/utils/render-options.d.ts.map +1 -1
- package/lib/internal/template/select/utils/render-options.js +5 -5
- package/lib/internal/template/select/utils/render-options.js.map +1 -1
- package/lib/internal/template/select/utils/scroll-to-index.d.ts +5 -0
- package/lib/internal/template/select/utils/scroll-to-index.d.ts.map +1 -0
- package/lib/internal/template/select/utils/scroll-to-index.js +14 -0
- package/lib/internal/template/select/utils/scroll-to-index.js.map +1 -0
- package/lib/internal/template/select/utils/use-select.d.ts +4 -1
- package/lib/internal/template/select/utils/use-select.d.ts.map +1 -1
- package/lib/internal/template/select/utils/use-select.js +18 -9
- package/lib/internal/template/select/utils/use-select.js.map +1 -1
- package/lib/internal/template/test-utils/dom/internal/dropdown-host.d.ts +20 -2
- package/lib/internal/template/test-utils/dom/internal/dropdown-host.js +33 -2
- package/lib/internal/template/test-utils/dom/internal/dropdown-host.js.map +1 -1
- package/lib/internal/template/test-utils/selectors/internal/dropdown-host.d.ts +1 -0
- package/lib/internal/template/test-utils/selectors/internal/dropdown-host.js +6 -0
- package/lib/internal/template/test-utils/selectors/internal/dropdown-host.js.map +1 -1
- package/lib/internal/template/test-utils/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
|
@@ -16,7 +16,7 @@ const getItemIndex = (containerRef, event) => {
|
|
|
16
16
|
return mouseTarget ? parseInt(mouseTarget) : -1;
|
|
17
17
|
};
|
|
18
18
|
const OptionsList = (_a, ref) => {
|
|
19
|
-
var { open, statusType, children, nativeAttributes = {}, onKeyDown, onBlur, onFocus, onLoadMore, onMouseUp, onMouseMove, position = 'relative', role = 'listbox', decreaseBlockMargin = false, ariaLabel, ariaLabelledby, ariaDescribedby, embedded } = _a, restProps = __rest(_a, ["open", "statusType", "children", "nativeAttributes", "onKeyDown", "onBlur", "onFocus", "onLoadMore", "onMouseUp", "onMouseMove", "position", "role", "decreaseBlockMargin", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "embedded"]);
|
|
19
|
+
var { open, statusType, children, nativeAttributes = {}, onKeyDown, onBlur, onFocus, onLoadMore, onMouseUp, onMouseMove, position = 'relative', role = 'listbox', decreaseBlockMargin = false, ariaLabel, ariaLabelledby, ariaDescribedby, embedded, stickyItemBlockSize } = _a, restProps = __rest(_a, ["open", "statusType", "children", "nativeAttributes", "onKeyDown", "onBlur", "onFocus", "onLoadMore", "onMouseUp", "onMouseMove", "position", "role", "decreaseBlockMargin", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "embedded", "stickyItemBlockSize"]);
|
|
20
20
|
const baseProps = getBaseProps(restProps);
|
|
21
21
|
const menuRef = useRef(null);
|
|
22
22
|
const handleScroll = useStableCallback(() => {
|
|
@@ -39,7 +39,7 @@ const OptionsList = (_a, ref) => {
|
|
|
39
39
|
[styles['options-list-embedded']]: embedded,
|
|
40
40
|
});
|
|
41
41
|
const mergedRef = useMergeRefs(ref, menuRef);
|
|
42
|
-
return (React.createElement("ul", Object.assign({}, baseProps, nativeAttributes, { className: className, ref: mergedRef, style: { position }, role: role, onScroll: handleScroll, onKeyDown: event => fireKeyboardEvent(onKeyDown, event), onMouseMove: event => onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(getItemIndex(menuRef, event)), onMouseUp: event => onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(getItemIndex(menuRef, event)), onBlur: event => fireNonCancelableEvent(onBlur, { relatedTarget: event.relatedTarget }), onFocus: () => fireNonCancelableEvent(onFocus), tabIndex: embedded ? 0 : -1, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby }), open && children));
|
|
42
|
+
return (React.createElement("ul", Object.assign({}, baseProps, nativeAttributes, { className: className, ref: mergedRef, style: { position, scrollPaddingBlockStart: stickyItemBlockSize !== null && stickyItemBlockSize !== void 0 ? stickyItemBlockSize : undefined }, role: role, onScroll: handleScroll, onKeyDown: event => fireKeyboardEvent(onKeyDown, event), onMouseMove: event => onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(getItemIndex(menuRef, event)), onMouseUp: event => onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(getItemIndex(menuRef, event)), onBlur: event => fireNonCancelableEvent(onBlur, { relatedTarget: event.relatedTarget }), onFocus: () => fireNonCancelableEvent(onFocus), tabIndex: embedded ? 0 : -1, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby }), open && children));
|
|
43
43
|
};
|
|
44
44
|
export default React.forwardRef(OptionsList);
|
|
45
45
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/options-list/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AACvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAElF,OAAO,EAAsB,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAGL,iBAAiB,EACjB,sBAAsB,GAEvB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAG1D,OAAO,MAAM,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/options-list/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, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\n\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport {\n BaseKeyDetail,\n CancelableEventHandler,\n fireKeyboardEvent,\n fireNonCancelableEvent,\n NonCancelableEventHandler,\n} from '../../events';\nimport { useMergeRefs } from '../../hooks/use-merge-refs';\nimport { DropdownStatusProps } from '../dropdown-status';\n\nimport styles from './styles.css.js';\n\nexport interface OptionsListProps extends BaseComponentProps {\n open?: boolean;\n statusType: DropdownStatusProps.StatusType;\n /**\n * Options list\n */\n children: React.ReactNode;\n nativeAttributes?: Record<string, any>;\n /**\n * Called when more items need to be loaded.\n */\n onLoadMore?: NonCancelableEventHandler;\n onKeyDown?: CancelableEventHandler<BaseKeyDetail>;\n onBlur?: NonCancelableEventHandler<{ relatedTarget: Node | null }>;\n onFocus?: NonCancelableEventHandler;\n onMouseUp?: (itemIndex: number) => void;\n onMouseMove?: (itemIndex: number) => void;\n position?: React.CSSProperties['position'];\n role?: 'listbox' | 'list' | 'menu';\n ariaLabel?: string;\n ariaLabelledby?: string;\n ariaDescribedby?: string;\n decreaseBlockMargin?: boolean;\n embedded?: boolean;\n stickyItemBlockSize?: number | null;\n}\n\nconst BOTTOM_TRIGGER_OFFSET = 80;\n\nconst getItemIndex = (containerRef: React.RefObject<HTMLElement>, event: React.MouseEvent) => {\n const target = findUpUntil(\n event.target as HTMLElement,\n element => element === containerRef.current || !!element.dataset.mouseTarget\n );\n const mouseTarget = target?.dataset.mouseTarget;\n return mouseTarget ? parseInt(mouseTarget) : -1;\n};\n\nconst OptionsList = (\n {\n open,\n statusType,\n children,\n nativeAttributes = {},\n onKeyDown,\n onBlur,\n onFocus,\n onLoadMore,\n onMouseUp,\n onMouseMove,\n position = 'relative',\n role = 'listbox',\n decreaseBlockMargin = false,\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n embedded,\n stickyItemBlockSize,\n ...restProps\n }: OptionsListProps,\n ref: React.Ref<HTMLUListElement>\n) => {\n const baseProps = getBaseProps(restProps);\n const menuRef = useRef<HTMLUListElement>(null);\n\n const handleScroll = useStableCallback(() => {\n const scrollContainer = menuRef?.current;\n if (scrollContainer) {\n const bottomEdgePosition = scrollContainer.scrollTop + scrollContainer.clientHeight;\n const remainingScrollHeight = scrollContainer.scrollHeight - bottomEdgePosition;\n if (remainingScrollHeight < BOTTOM_TRIGGER_OFFSET) {\n fireNonCancelableEvent(onLoadMore);\n }\n }\n });\n\n useEffect(() => {\n if (open && statusType === 'pending') {\n handleScroll();\n }\n }, [open, statusType, handleScroll]);\n\n const className = clsx(styles['options-list'], {\n [styles['decrease-block-margin']]: decreaseBlockMargin,\n [styles['options-list-embedded']]: embedded,\n });\n\n const mergedRef = useMergeRefs(ref, menuRef);\n\n return (\n <ul\n {...baseProps}\n {...nativeAttributes}\n className={className}\n ref={mergedRef}\n style={{ position, scrollPaddingBlockStart: stickyItemBlockSize ?? undefined }}\n role={role}\n onScroll={handleScroll}\n onKeyDown={event => fireKeyboardEvent(onKeyDown, event)}\n onMouseMove={event => onMouseMove?.(getItemIndex(menuRef, event))}\n onMouseUp={event => onMouseUp?.(getItemIndex(menuRef, event))}\n onBlur={event => fireNonCancelableEvent(onBlur, { relatedTarget: event.relatedTarget })}\n onFocus={() => fireNonCancelableEvent(onFocus)}\n tabIndex={embedded ? 0 : -1}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n >\n {open && children}\n </ul>\n );\n};\n\nexport default React.forwardRef(OptionsList);\n"]}
|
|
@@ -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;AAOvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAKnD,OAAO,EAAE,mBAAmB,EAAE,CAAC;;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAOvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAKnD,OAAO,EAAE,mBAAmB,EAAE,CAAC;;AA0H/B,wBAAgD"}
|
|
@@ -9,7 +9,7 @@ import { getAnalyticsSelectActionMetadata } from './analytics-metadata/utils';
|
|
|
9
9
|
import analyticsSelectors from './analytics-metadata/styles.css.js';
|
|
10
10
|
import styles from './styles.css.js';
|
|
11
11
|
const SelectableItem = (_a, ref) => {
|
|
12
|
-
var { children: content, ariaSelected, ariaChecked, selected, highlighted, disabled, hasBackground, isParent, isChild, virtualPosition, padBottom, isNextSelected, useInteractiveGroups, screenReaderContent, ariaPosinset, ariaSetsize, highlightType, value, sticky, afterHeader, withScrollbar } = _a, restProps = __rest(_a, ["children", "ariaSelected", "ariaChecked", "selected", "highlighted", "disabled", "hasBackground", "isParent", "isChild", "virtualPosition", "padBottom", "isNextSelected", "useInteractiveGroups", "screenReaderContent", "ariaPosinset", "ariaSetsize", "highlightType", "value", "sticky", "afterHeader", "withScrollbar"]);
|
|
12
|
+
var { children: content, ariaSelected, ariaChecked, selected, highlighted, disabled, hasBackground, isParent, isChild, isSelectAll, virtualPosition, padBottom, isNextSelected, useInteractiveGroups, screenReaderContent, ariaPosinset, ariaSetsize, highlightType, value, sticky, afterHeader, withScrollbar } = _a, restProps = __rest(_a, ["children", "ariaSelected", "ariaChecked", "selected", "highlighted", "disabled", "hasBackground", "isParent", "isChild", "isSelectAll", "virtualPosition", "padBottom", "isNextSelected", "useInteractiveGroups", "screenReaderContent", "ariaPosinset", "ariaSetsize", "highlightType", "value", "sticky", "afterHeader", "withScrollbar"]);
|
|
13
13
|
const _b = getBaseProps(restProps), { className } = _b, rest = __rest(_b, ["className"]);
|
|
14
14
|
const classNames = clsx(className, styles['selectable-item'], {
|
|
15
15
|
[styles.selected]: selected,
|
|
@@ -18,6 +18,7 @@ const SelectableItem = (_a, ref) => {
|
|
|
18
18
|
[styles.parent]: isParent,
|
|
19
19
|
[analyticsSelectors.parent]: isParent,
|
|
20
20
|
[styles.child]: isChild,
|
|
21
|
+
[styles['select-all']]: isSelectAll,
|
|
21
22
|
[styles['is-keyboard']]: highlightType === 'keyboard',
|
|
22
23
|
[styles.disabled]: disabled,
|
|
23
24
|
[styles.virtual]: virtualPosition !== undefined && !sticky,
|
|
@@ -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,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,gCAAgC,EAAE,MAAM,4BAA4B,CAAC;AAG9E,OAAO,kBAAkB,MAAM,oCAAoC,CAAC;AACpE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,cAAc,GAAG,CACrB,
|
|
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, { useLayoutEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { getBaseProps } from '../../base-component';\nimport { getAnalyticsSelectActionMetadata } from './analytics-metadata/utils';\nimport { SelectableItemProps } from './interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { SelectableItemProps };\n\nconst SelectableItem = (\n {\n children: content,\n ariaSelected,\n ariaChecked,\n selected,\n highlighted,\n disabled,\n hasBackground,\n isParent,\n isChild,\n isSelectAll,\n virtualPosition,\n padBottom,\n isNextSelected,\n useInteractiveGroups,\n screenReaderContent,\n ariaPosinset,\n ariaSetsize,\n highlightType,\n value,\n sticky,\n afterHeader,\n withScrollbar,\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 [analyticsSelectors.parent]: isParent,\n [styles.child]: isChild,\n [styles['select-all']]: isSelectAll,\n [styles['is-keyboard']]: highlightType === 'keyboard',\n [styles.disabled]: disabled,\n [styles.virtual]: virtualPosition !== undefined && !sticky,\n [styles['pad-bottom']]: padBottom,\n [styles['next-item-selected']]: isNextSelected,\n [styles.interactiveGroups]: useInteractiveGroups,\n [styles.sticky]: sticky,\n [styles['after-header']]: !!afterHeader,\n [styles['with-scrollbar']]: withScrollbar,\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 !== undefined) {\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 !== undefined) {\n a11yProperties['aria-checked'] = ariaChecked;\n }\n\n if (ariaPosinset && ariaSetsize) {\n a11yProperties['aria-posinset'] = ariaPosinset;\n a11yProperties['aria-setsize'] = ariaSetsize;\n }\n\n if (restProps.ariaDescribedby) {\n a11yProperties['aria-describedby'] = restProps.ariaDescribedby;\n }\n\n return (\n <li\n role=\"option\"\n className={classNames}\n style={style}\n {...a11yProperties}\n {...rest}\n {...(isParent || disabled\n ? {}\n : getAnalyticsMetadataAttribute(getAnalyticsSelectActionMetadata({ isChild, value, ...restProps })))}\n >\n <div className={clsx(styles['option-content'], analyticsSelectors['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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/interfaces.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAE3E,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,GAAG;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,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,aAAa,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACtC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,CAAC;IAAE,YAAY,CAAC,EAAE,OAAO,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG;IAAE,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;CAAE,CAAC,CAAC;AAElH,MAAM,WAAW,kBAAkB;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B"}
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/interfaces.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAE3E,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,GAAG;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,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,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,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,aAAa,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACtC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,CAAC;IAAE,YAAY,CAAC,EAAE,OAAO,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG;IAAE,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;CAAE,CAAC,CAAC;AAElH,MAAM,WAAW,kBAAkB;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { BaseComponentProps } from '../../base-component';\nimport { HighlightType } from '../options-list/utils/use-highlight-option';\n\nexport type SelectableItemProps = BaseComponentProps & {\n children: React.ReactNode;\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 highlightType?: HighlightType['type'];\n ariaDescribedby?: string;\n value?: string;\n sticky?: boolean;\n afterHeader?: boolean;\n withScrollbar?: boolean;\n} & ({ ariaSelected?: boolean; ariaChecked?: never } | { ariaSelected?: never; ariaChecked?: boolean | 'mixed' });\n\nexport interface ItemDataAttributes {\n 'data-group-index'?: string;\n 'data-child-index'?: string;\n 'data-in-group-index'?: string;\n 'data-test-index'?: string;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { BaseComponentProps } from '../../base-component';\nimport { HighlightType } from '../options-list/utils/use-highlight-option';\n\nexport type SelectableItemProps = BaseComponentProps & {\n children: React.ReactNode;\n selected?: boolean;\n highlighted?: boolean;\n disabled?: boolean;\n hasBackground?: boolean;\n isParent?: boolean;\n isChild?: boolean;\n isSelectAll?: boolean;\n virtualPosition?: number;\n padBottom?: boolean;\n isNextSelected?: boolean;\n useInteractiveGroups?: boolean;\n screenReaderContent?: string;\n ariaPosinset?: number;\n ariaSetsize?: number;\n highlightType?: HighlightType['type'];\n ariaDescribedby?: string;\n value?: string;\n sticky?: boolean;\n afterHeader?: boolean;\n withScrollbar?: boolean;\n} & ({ ariaSelected?: boolean; ariaChecked?: never } | { ariaSelected?: never; ariaChecked?: boolean | 'mixed' });\n\nexport interface ItemDataAttributes {\n 'data-group-index'?: string;\n 'data-child-index'?: string;\n 'data-in-group-index'?: string;\n 'data-test-index'?: string;\n}\n"]}
|
|
@@ -1,24 +1,25 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"selectable-item": "awsui_selectable-
|
|
5
|
-
"pad-bottom": "awsui_pad-
|
|
6
|
-
"virtual": "
|
|
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
|
-
"sticky": "
|
|
17
|
-
"with-scrollbar": "awsui_with-
|
|
18
|
-
"after-header": "awsui_after-
|
|
19
|
-
"measure-strut": "awsui_measure-
|
|
20
|
-
"measure-strut-first": "awsui_measure-strut-
|
|
21
|
-
"screenreader-content": "awsui_screenreader-
|
|
22
|
-
"option-content": "awsui_option-
|
|
4
|
+
"selectable-item": "awsui_selectable-item_15o6u_14svm_145",
|
|
5
|
+
"pad-bottom": "awsui_pad-bottom_15o6u_14svm_167",
|
|
6
|
+
"virtual": "awsui_virtual_15o6u_14svm_171",
|
|
7
|
+
"has-background": "awsui_has-background_15o6u_14svm_174",
|
|
8
|
+
"highlighted": "awsui_highlighted_15o6u_14svm_177",
|
|
9
|
+
"selected": "awsui_selected_15o6u_14svm_177",
|
|
10
|
+
"disabled": "awsui_disabled_15o6u_14svm_195",
|
|
11
|
+
"next-item-selected": "awsui_next-item-selected_15o6u_14svm_205",
|
|
12
|
+
"is-keyboard": "awsui_is-keyboard_15o6u_14svm_217",
|
|
13
|
+
"parent": "awsui_parent_15o6u_14svm_221",
|
|
14
|
+
"interactiveGroups": "awsui_interactiveGroups_15o6u_14svm_225",
|
|
15
|
+
"child": "awsui_child_15o6u_14svm_241",
|
|
16
|
+
"sticky": "awsui_sticky_15o6u_14svm_247",
|
|
17
|
+
"with-scrollbar": "awsui_with-scrollbar_15o6u_14svm_259",
|
|
18
|
+
"after-header": "awsui_after-header_15o6u_14svm_265",
|
|
19
|
+
"measure-strut": "awsui_measure-strut_15o6u_14svm_300",
|
|
20
|
+
"measure-strut-first": "awsui_measure-strut-first_15o6u_14svm_309",
|
|
21
|
+
"screenreader-content": "awsui_screenreader-content_15o6u_14svm_313",
|
|
22
|
+
"option-content": "awsui_option-content_15o6u_14svm_319",
|
|
23
|
+
"select-all": "awsui_select-all_15o6u_14svm_323"
|
|
23
24
|
};
|
|
24
25
|
|
|
@@ -142,7 +142,7 @@
|
|
|
142
142
|
*/
|
|
143
143
|
/* Style used for links in slots/components that are text heavy, to help links stand out among
|
|
144
144
|
surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
|
|
145
|
-
.awsui_selectable-
|
|
145
|
+
.awsui_selectable-item_15o6u_14svm_145:not(#\9) {
|
|
146
146
|
font-size: var(--font-size-body-m-6wxxs5, 14px);
|
|
147
147
|
line-height: var(--line-height-body-m-gw0130, 22px);
|
|
148
148
|
color: var(--color-text-body-default-agk00h, #16191f);
|
|
@@ -164,17 +164,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
164
164
|
padding-block: calc(var(--space-xxs-y2432o, 4px) + var(--border-item-width-bjacxs, 1px) - var(--border-divider-list-width-x6rz7e, 1px));
|
|
165
165
|
padding-inline: calc(var(--space-field-horizontal-cxdor9, 8px) + var(--border-item-width-bjacxs, 1px));
|
|
166
166
|
}
|
|
167
|
-
.awsui_selectable-
|
|
167
|
+
.awsui_selectable-item_15o6u_14svm_145.awsui_pad-bottom_15o6u_14svm_167:not(#\9) {
|
|
168
168
|
padding-block-end: calc(calc(var(--space-xxs-y2432o, 4px) + var(--border-item-width-bjacxs, 1px) - var(--border-divider-list-width-x6rz7e, 1px)) + var(--space-xxxs-gn3248, 2px));
|
|
169
169
|
border-block-end-color: transparent;
|
|
170
170
|
}
|
|
171
|
-
.awsui_selectable-
|
|
171
|
+
.awsui_selectable-item_15o6u_14svm_145:not(#\9):not(:first-child), .awsui_selectable-item_15o6u_14svm_145.awsui_virtual_15o6u_14svm_171:not(#\9) {
|
|
172
172
|
margin-block-start: calc(-1 * var(--border-item-width-bjacxs, 1px));
|
|
173
173
|
}
|
|
174
|
-
.awsui_selectable-
|
|
174
|
+
.awsui_selectable-item_15o6u_14svm_145.awsui_has-background_15o6u_14svm_174:not(#\9) {
|
|
175
175
|
background-color: var(--color-background-dropdown-item-hover-r5jqv1, #f2f3f3);
|
|
176
176
|
}
|
|
177
|
-
.awsui_selectable-
|
|
177
|
+
.awsui_selectable-item_15o6u_14svm_145.awsui_highlighted_15o6u_14svm_177:not(#\9), .awsui_selectable-item_15o6u_14svm_145.awsui_selected_15o6u_14svm_177:not(#\9) {
|
|
178
178
|
color: var(--color-text-dropdown-item-highlighted-xxoapj, #16191f);
|
|
179
179
|
border-width: var(--border-item-width-bjacxs, 1px);
|
|
180
180
|
border-start-start-radius: var(--border-radius-item-q4wr0w, 0px);
|
|
@@ -184,120 +184,120 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
184
184
|
padding-block: var(--space-xxs-y2432o, 4px);
|
|
185
185
|
padding-inline: var(--space-field-horizontal-cxdor9, 8px);
|
|
186
186
|
}
|
|
187
|
-
.awsui_selectable-
|
|
187
|
+
.awsui_selectable-item_15o6u_14svm_145.awsui_highlighted_15o6u_14svm_177.awsui_pad-bottom_15o6u_14svm_167:not(#\9), .awsui_selectable-item_15o6u_14svm_145.awsui_selected_15o6u_14svm_177.awsui_pad-bottom_15o6u_14svm_167:not(#\9) {
|
|
188
188
|
padding-block-end: calc(var(--space-xxs-y2432o, 4px) + var(--space-xxxs-gn3248, 2px));
|
|
189
189
|
}
|
|
190
|
-
.awsui_selectable-
|
|
190
|
+
.awsui_selectable-item_15o6u_14svm_145.awsui_highlighted_15o6u_14svm_177:not(#\9) {
|
|
191
191
|
z-index: 3;
|
|
192
192
|
background-color: var(--color-background-dropdown-item-hover-r5jqv1, #f2f3f3);
|
|
193
193
|
border-color: var(--color-border-dropdown-item-hover-69t7jr, #879596);
|
|
194
194
|
}
|
|
195
|
-
.awsui_selectable-
|
|
195
|
+
.awsui_selectable-item_15o6u_14svm_145.awsui_highlighted_15o6u_14svm_177.awsui_disabled_15o6u_14svm_195:not(#\9) {
|
|
196
196
|
color: var(--color-text-dropdown-item-dimmed-xe0faj, #aab7b8);
|
|
197
197
|
border-color: var(--color-border-dropdown-item-dimmed-hover-0rwxkv, #879596);
|
|
198
198
|
background-color: var(--color-background-dropdown-item-dimmed-dtqtu6, transparent);
|
|
199
199
|
}
|
|
200
|
-
.awsui_selectable-
|
|
200
|
+
.awsui_selectable-item_15o6u_14svm_145.awsui_selected_15o6u_14svm_177:not(#\9) {
|
|
201
201
|
z-index: 2;
|
|
202
202
|
background-color: var(--color-background-dropdown-item-selected-i187hy, #f1faff);
|
|
203
203
|
border-color: var(--color-border-dropdown-item-selected-3l3bsn, #eaeded);
|
|
204
204
|
}
|
|
205
|
-
.awsui_selectable-
|
|
205
|
+
.awsui_selectable-item_15o6u_14svm_145.awsui_selected_15o6u_14svm_177.awsui_next-item-selected_15o6u_14svm_205:not(#\9) {
|
|
206
206
|
border-end-start-radius: 0;
|
|
207
207
|
border-end-end-radius: 0;
|
|
208
208
|
}
|
|
209
|
-
.awsui_selectable-
|
|
209
|
+
.awsui_selectable-item_15o6u_14svm_145.awsui_selected_15o6u_14svm_177.awsui_highlighted_15o6u_14svm_177:not(#\9) {
|
|
210
210
|
border-color: var(--color-border-dropdown-item-hover-69t7jr, #879596);
|
|
211
211
|
z-index: 3;
|
|
212
212
|
}
|
|
213
|
-
.awsui_selectable-
|
|
213
|
+
.awsui_selectable-item_15o6u_14svm_145.awsui_selected_15o6u_14svm_177 + .awsui_selectable-item_15o6u_14svm_145.awsui_selected_15o6u_14svm_177:not(#\9) {
|
|
214
214
|
border-start-start-radius: 0;
|
|
215
215
|
border-start-end-radius: 0;
|
|
216
216
|
}
|
|
217
|
-
.awsui_selectable-
|
|
217
|
+
.awsui_selectable-item_15o6u_14svm_145.awsui_highlighted_15o6u_14svm_177.awsui_is-keyboard_15o6u_14svm_217:not(#\9) {
|
|
218
218
|
border-color: var(--color-border-dropdown-item-focused-6wa092, #0073bb);
|
|
219
219
|
box-shadow: inset 0 0 0 var(--border-control-focus-ring-shadow-spread-kvz439, 1px) var(--color-border-item-focused-q68bgg, #0073bb);
|
|
220
220
|
}
|
|
221
|
-
.awsui_selectable-
|
|
221
|
+
.awsui_selectable-item_15o6u_14svm_145.awsui_parent_15o6u_14svm_221:not(#\9) {
|
|
222
222
|
font-weight: bold;
|
|
223
223
|
color: var(--color-text-dropdown-group-label-h1uzwg, #545b64);
|
|
224
224
|
}
|
|
225
|
-
.awsui_selectable-
|
|
225
|
+
.awsui_selectable-item_15o6u_14svm_145.awsui_parent_15o6u_14svm_221:not(#\9):not(.awsui_interactiveGroups_15o6u_14svm_225) {
|
|
226
226
|
border-block-start-color: var(--color-border-dropdown-group-ze4esa, #eaeded);
|
|
227
227
|
padding-block: var(--space-xs-6dgkww, 8px);
|
|
228
228
|
padding-inline: var(--space-xs-6dgkww, 8px);
|
|
229
229
|
}
|
|
230
|
-
.awsui_selectable-
|
|
230
|
+
.awsui_selectable-item_15o6u_14svm_145.awsui_parent_15o6u_14svm_221.awsui_interactiveGroups_15o6u_14svm_225:not(#\9) {
|
|
231
231
|
padding-block: calc(var(--space-xs-6dgkww, 8px) + var(--border-item-width-bjacxs, 1px) - var(--border-divider-list-width-x6rz7e, 1px));
|
|
232
232
|
padding-inline: calc(var(--space-field-horizontal-cxdor9, 8px) + var(--border-item-width-bjacxs, 1px));
|
|
233
233
|
}
|
|
234
|
-
.awsui_selectable-
|
|
234
|
+
.awsui_selectable-item_15o6u_14svm_145.awsui_parent_15o6u_14svm_221.awsui_interactiveGroups_15o6u_14svm_225.awsui_highlighted_15o6u_14svm_177:not(#\9) {
|
|
235
235
|
color: var(--color-text-dropdown-item-highlighted-xxoapj, #16191f);
|
|
236
236
|
}
|
|
237
|
-
.awsui_selectable-
|
|
237
|
+
.awsui_selectable-item_15o6u_14svm_145.awsui_parent_15o6u_14svm_221.awsui_interactiveGroups_15o6u_14svm_225.awsui_highlighted_15o6u_14svm_177:not(#\9), .awsui_selectable-item_15o6u_14svm_145.awsui_parent_15o6u_14svm_221.awsui_interactiveGroups_15o6u_14svm_225.awsui_selected_15o6u_14svm_177:not(#\9) {
|
|
238
238
|
padding-block: var(--space-xs-6dgkww, 8px);
|
|
239
239
|
padding-inline: var(--space-field-horizontal-cxdor9, 8px);
|
|
240
240
|
}
|
|
241
|
-
.awsui_selectable-
|
|
241
|
+
.awsui_selectable-item_15o6u_14svm_145.awsui_child_15o6u_14svm_241:not(#\9) {
|
|
242
242
|
padding-inline-start: calc(var(--space-xxl-thzxkv, 32px) + var(--border-item-width-bjacxs, 1px));
|
|
243
243
|
}
|
|
244
|
-
.awsui_selectable-
|
|
244
|
+
.awsui_selectable-item_15o6u_14svm_145.awsui_child_15o6u_14svm_241.awsui_highlighted_15o6u_14svm_177:not(#\9), .awsui_selectable-item_15o6u_14svm_145.awsui_child_15o6u_14svm_241.awsui_selected_15o6u_14svm_177:not(#\9) {
|
|
245
245
|
padding-inline-start: var(--space-xxl-thzxkv, 32px);
|
|
246
246
|
}
|
|
247
|
-
.awsui_selectable-
|
|
247
|
+
.awsui_selectable-item_15o6u_14svm_145.awsui_sticky_15o6u_14svm_247:not(#\9) {
|
|
248
248
|
position: sticky;
|
|
249
249
|
inset-block-start: 0;
|
|
250
250
|
margin-block-end: calc(var(--border-item-width-bjacxs, 1px) - var(--border-divider-list-width-x6rz7e, 1px));
|
|
251
251
|
z-index: 4;
|
|
252
252
|
}
|
|
253
|
-
.awsui_selectable-
|
|
253
|
+
.awsui_selectable-item_15o6u_14svm_145.awsui_sticky_15o6u_14svm_247:not(#\9):not(.awsui_highlighted_15o6u_14svm_177):not(.awsui_selected_15o6u_14svm_177) {
|
|
254
254
|
border-inline-start-width: var(--border-item-width-bjacxs, 1px);
|
|
255
255
|
border-inline-start-color: var(--color-border-dropdown-container-5hmq6y, transparent);
|
|
256
256
|
border-inline-end-color: var(--color-border-dropdown-container-5hmq6y, transparent);
|
|
257
257
|
padding-inline: var(--space-field-horizontal-cxdor9, 8px);
|
|
258
258
|
}
|
|
259
|
-
.awsui_selectable-
|
|
259
|
+
.awsui_selectable-item_15o6u_14svm_145.awsui_sticky_15o6u_14svm_247:not(#\9):not(.awsui_highlighted_15o6u_14svm_177):not(.awsui_selected_15o6u_14svm_177):not(.awsui_with-scrollbar_15o6u_14svm_259) {
|
|
260
260
|
border-inline-end-width: var(--border-item-width-bjacxs, 1px);
|
|
261
261
|
}
|
|
262
|
-
.awsui_selectable-
|
|
262
|
+
.awsui_selectable-item_15o6u_14svm_145.awsui_sticky_15o6u_14svm_247:not(#\9):not(.awsui_highlighted_15o6u_14svm_177):not(.awsui_selected_15o6u_14svm_177).awsui_with-scrollbar_15o6u_14svm_259 {
|
|
263
263
|
border-inline-end-width: 0;
|
|
264
264
|
}
|
|
265
|
-
.awsui_selectable-
|
|
265
|
+
.awsui_selectable-item_15o6u_14svm_145.awsui_sticky_15o6u_14svm_247:not(#\9):not(.awsui_highlighted_15o6u_14svm_177):not(.awsui_selected_15o6u_14svm_177):not(.awsui_after-header_15o6u_14svm_265) {
|
|
266
266
|
border-start-start-radius: var(--border-radius-item-q4wr0w, 0px);
|
|
267
267
|
}
|
|
268
|
-
.awsui_selectable-
|
|
268
|
+
.awsui_selectable-item_15o6u_14svm_145.awsui_sticky_15o6u_14svm_247:not(#\9):not(.awsui_highlighted_15o6u_14svm_177):not(.awsui_selected_15o6u_14svm_177):not(.awsui_after-header_15o6u_14svm_265):not(.awsui_selectable-item_15o6u_14svm_145.awsui_sticky_15o6u_14svm_247:not(.awsui_highlighted_15o6u_14svm_177):not(.awsui_selected_15o6u_14svm_177):not(.awsui_after-header_15o6u_14svm_265).awsui_with-scrollbar_15o6u_14svm_259) {
|
|
269
269
|
border-start-end-radius: var(--border-radius-item-q4wr0w, 0px);
|
|
270
270
|
}
|
|
271
|
-
.awsui_selectable-
|
|
271
|
+
.awsui_selectable-item_15o6u_14svm_145.awsui_sticky_15o6u_14svm_247:not(#\9):not(.awsui_highlighted_15o6u_14svm_177):not(.awsui_selected_15o6u_14svm_177).awsui_after-header_15o6u_14svm_265 {
|
|
272
272
|
border-block-start-color: var(--color-background-dropdown-item-default-r1zm6a, #ffffff);
|
|
273
273
|
}
|
|
274
|
-
.awsui_selectable-
|
|
274
|
+
.awsui_selectable-item_15o6u_14svm_145.awsui_sticky_15o6u_14svm_247.awsui_disabled_15o6u_14svm_195.awsui_highlighted_15o6u_14svm_177:not(#\9), .awsui_selectable-item_15o6u_14svm_145.awsui_sticky_15o6u_14svm_247.awsui_disabled_15o6u_14svm_195.awsui_selected_15o6u_14svm_177:not(#\9) {
|
|
275
275
|
border-block-end-color: transparent;
|
|
276
276
|
border-block-start-color: transparent;
|
|
277
277
|
border-inline-start-color: transparent;
|
|
278
278
|
border-inline-end-color: transparent;
|
|
279
279
|
}
|
|
280
|
-
.awsui_selectable-
|
|
280
|
+
.awsui_selectable-item_15o6u_14svm_145.awsui_disabled_15o6u_14svm_195:not(#\9) {
|
|
281
281
|
color: var(--color-text-dropdown-item-disabled-gk1x2u, #aab7b8);
|
|
282
282
|
}
|
|
283
|
-
.awsui_selectable-
|
|
283
|
+
.awsui_selectable-item_15o6u_14svm_145:not(#\9):not(.awsui_disabled_15o6u_14svm_195):not(.awsui_parent_15o6u_14svm_221) {
|
|
284
284
|
cursor: pointer;
|
|
285
285
|
}
|
|
286
|
-
.awsui_selectable-
|
|
286
|
+
.awsui_selectable-item_15o6u_14svm_145.awsui_interactiveGroups_15o6u_14svm_225:not(#\9):not(.awsui_disabled_15o6u_14svm_195) {
|
|
287
287
|
cursor: pointer;
|
|
288
288
|
}
|
|
289
|
-
.awsui_selectable-
|
|
289
|
+
.awsui_selectable-item_15o6u_14svm_145.awsui_virtual_15o6u_14svm_171:not(#\9) {
|
|
290
290
|
position: absolute;
|
|
291
291
|
inset-block-start: var(--border-dropdown-virtual-offset-width-mojxsv, 0px);
|
|
292
292
|
inset-inline-start: 0;
|
|
293
293
|
inline-size: 100%;
|
|
294
294
|
box-sizing: border-box;
|
|
295
295
|
}
|
|
296
|
-
.awsui_selectable-
|
|
296
|
+
.awsui_selectable-item_15o6u_14svm_145.awsui_virtual_15o6u_14svm_171:not(#\9):first-of-type:not(.awsui_selected_15o6u_14svm_177, .awsui_highlighted_15o6u_14svm_177) {
|
|
297
297
|
border-block-start-color: var(--color-border-dropdown-item-top-k8ts00, #eaeded);
|
|
298
298
|
}
|
|
299
299
|
|
|
300
|
-
.awsui_measure-
|
|
300
|
+
.awsui_measure-strut_15o6u_14svm_300:not(#\9) {
|
|
301
301
|
position: absolute;
|
|
302
302
|
pointer-events: none;
|
|
303
303
|
block-size: 100%;
|
|
@@ -306,16 +306,20 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
306
306
|
inset-inline-start: 0;
|
|
307
307
|
padding-block-start: var(--border-divider-list-width-x6rz7e, 1px);
|
|
308
308
|
}
|
|
309
|
-
.awsui_measure-strut-
|
|
309
|
+
.awsui_measure-strut-first_15o6u_14svm_309:not(#\9) {
|
|
310
310
|
padding-block-end: var(--border-divider-list-width-x6rz7e, 1px);
|
|
311
311
|
}
|
|
312
312
|
|
|
313
|
-
.awsui_screenreader-
|
|
313
|
+
.awsui_screenreader-content_15o6u_14svm_313:not(#\9) {
|
|
314
314
|
position: absolute !important;
|
|
315
315
|
inset-block-start: -9999px !important;
|
|
316
316
|
inset-inline-start: -9999px !important;
|
|
317
317
|
}
|
|
318
318
|
|
|
319
|
-
.awsui_option-
|
|
319
|
+
.awsui_option-content_15o6u_14svm_319:not(#\9) {
|
|
320
|
+
/* used in test-utils */
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
.awsui_select-all_15o6u_14svm_323:not(#\9) {
|
|
320
324
|
/* used in test-utils */
|
|
321
325
|
}
|
|
@@ -2,24 +2,25 @@
|
|
|
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
|
-
"virtual": "
|
|
8
|
-
"has-background": "awsui_has-
|
|
9
|
-
"highlighted": "
|
|
10
|
-
"selected": "
|
|
11
|
-
"disabled": "
|
|
12
|
-
"next-item-selected": "awsui_next-item-
|
|
13
|
-
"is-keyboard": "awsui_is-
|
|
14
|
-
"parent": "
|
|
15
|
-
"interactiveGroups": "
|
|
16
|
-
"child": "
|
|
17
|
-
"sticky": "
|
|
18
|
-
"with-scrollbar": "awsui_with-
|
|
19
|
-
"after-header": "awsui_after-
|
|
20
|
-
"measure-strut": "awsui_measure-
|
|
21
|
-
"measure-strut-first": "awsui_measure-strut-
|
|
22
|
-
"screenreader-content": "awsui_screenreader-
|
|
23
|
-
"option-content": "awsui_option-
|
|
5
|
+
"selectable-item": "awsui_selectable-item_15o6u_14svm_145",
|
|
6
|
+
"pad-bottom": "awsui_pad-bottom_15o6u_14svm_167",
|
|
7
|
+
"virtual": "awsui_virtual_15o6u_14svm_171",
|
|
8
|
+
"has-background": "awsui_has-background_15o6u_14svm_174",
|
|
9
|
+
"highlighted": "awsui_highlighted_15o6u_14svm_177",
|
|
10
|
+
"selected": "awsui_selected_15o6u_14svm_177",
|
|
11
|
+
"disabled": "awsui_disabled_15o6u_14svm_195",
|
|
12
|
+
"next-item-selected": "awsui_next-item-selected_15o6u_14svm_205",
|
|
13
|
+
"is-keyboard": "awsui_is-keyboard_15o6u_14svm_217",
|
|
14
|
+
"parent": "awsui_parent_15o6u_14svm_221",
|
|
15
|
+
"interactiveGroups": "awsui_interactiveGroups_15o6u_14svm_225",
|
|
16
|
+
"child": "awsui_child_15o6u_14svm_241",
|
|
17
|
+
"sticky": "awsui_sticky_15o6u_14svm_247",
|
|
18
|
+
"with-scrollbar": "awsui_with-scrollbar_15o6u_14svm_259",
|
|
19
|
+
"after-header": "awsui_after-header_15o6u_14svm_265",
|
|
20
|
+
"measure-strut": "awsui_measure-strut_15o6u_14svm_300",
|
|
21
|
+
"measure-strut-first": "awsui_measure-strut-first_15o6u_14svm_309",
|
|
22
|
+
"screenreader-content": "awsui_screenreader-content_15o6u_14svm_313",
|
|
23
|
+
"option-content": "awsui_option-content_15o6u_14svm_319",
|
|
24
|
+
"select-all": "awsui_select-all_15o6u_14svm_323"
|
|
24
25
|
};
|
|
25
26
|
|
|
@@ -31,8 +31,12 @@ export interface MultiselectProps extends BaseSelectProps {
|
|
|
31
31
|
deselectAriaLabel?: MultiselectProps.DeselectAriaLabelFunction;
|
|
32
32
|
/**
|
|
33
33
|
* An object containing all the localized strings required by the component.
|
|
34
|
-
*
|
|
35
|
-
*
|
|
34
|
+
*
|
|
35
|
+
* * `selectAllText` (string) - Specifies the text to be displayed next to the checkbox that selects or deselects all options.
|
|
36
|
+
* * `tokenLimitShowFewer` (string) - Specifies the text to be displayed in the "Show fewer" button for the token group control.
|
|
37
|
+
* * `tokenLimitShowMore` (string) - Specifies the text to be displayed in the "Show more" button for the token group control. This string should not contain the number of hidden tokens
|
|
38
|
+
* because this will be added by the component automatically.
|
|
39
|
+
* @i18n
|
|
36
40
|
*/
|
|
37
41
|
i18nStrings?: MultiselectProps.I18nStrings;
|
|
38
42
|
/**
|
|
@@ -54,6 +58,10 @@ export interface MultiselectProps extends BaseSelectProps {
|
|
|
54
58
|
* Use to assign unique labels when there are multiple token groups with the same `tokenLimitShowMore` label on one page.
|
|
55
59
|
*/
|
|
56
60
|
tokenLimitShowMoreAriaLabel?: string;
|
|
61
|
+
/**
|
|
62
|
+
* Enables users to select and deselect all options with a special extra checkbox which is displayed at the start of the dropdown.
|
|
63
|
+
*/
|
|
64
|
+
enableSelectAll?: boolean;
|
|
57
65
|
}
|
|
58
66
|
export declare namespace MultiselectProps {
|
|
59
67
|
type Option = OptionDefinition;
|
|
@@ -62,6 +70,7 @@ export declare namespace MultiselectProps {
|
|
|
62
70
|
type DeselectAriaLabelFunction = (option: Option) => string;
|
|
63
71
|
type TriggerVariant = 'placeholder' | 'tokens';
|
|
64
72
|
interface I18nStrings {
|
|
73
|
+
selectAllText?: string;
|
|
65
74
|
tokenLimitShowFewer?: string;
|
|
66
75
|
tokenLimitShowMore?: string;
|
|
67
76
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/multiselect/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,WAAW,IAAI,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AAClH,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD;;;OAGG;IACH,eAAe,EAAE,aAAa,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACxD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,gBAAgB,CAAC,yBAAyB,CAAC;IAC/D
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/multiselect/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,WAAW,IAAI,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AAClH,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD;;;OAGG;IACH,eAAe,EAAE,aAAa,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACxD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,gBAAgB,CAAC,yBAAyB,CAAC;IAC/D;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC;IAC3C;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;IAE/E;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC;;;OAGG;IACH,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,yBAAiB,gBAAgB,CAAC;IAChC,KAAY,MAAM,GAAG,gBAAgB,CAAC;IACtC,KAAY,WAAW,GAAG,qBAAqB,CAAC;IAChD,KAAY,OAAO,GAAG,aAAa,CAAC,MAAM,GAAG,WAAW,CAAC,CAAC;IAC1D,KAAY,yBAAyB,GAAG,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACnE,KAAY,cAAc,GAAG,aAAa,GAAG,QAAQ,CAAC;IAEtD,UAAiB,WAAW;QAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;KAC7B;IAED,UAAiB,uBAAuB;QACtC,eAAe,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;KACxC;IAED,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/multiselect/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { OptionDefinition, OptionGroup as OptionGroupDefinition } from '../internal/components/option/interfaces';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { BaseSelectProps } from '../select/interfaces';\n\nexport interface MultiselectProps extends BaseSelectProps {\n /**\n * Specifies the currently selected options.\n * Provide an empty array to clear the selection.\n */\n selectedOptions: ReadonlyArray<MultiselectProps.Option>;\n /**\n * Determines whether the dropdown list stays open after the user selects an item.\n */\n keepOpen?: boolean;\n /**\n * Specifies the maximum number of displayed tokens. If the property isn't set, all of the tokens are displayed.\n */\n tokenLimit?: number;\n /**\n * Hides the tokens displayed underneath the component.\n * Only use this if the selected options are displayed elsewhere on the page.\n */\n hideTokens?: boolean;\n /**\n * Shows tokens inside the trigger instead of below it.\n */\n inlineTokens?: boolean;\n /**\n * Specifies an `aria-label` for the token deselection button.\n * @i18n\n */\n deselectAriaLabel?: MultiselectProps.DeselectAriaLabelFunction;\n /**\n * An object containing all the localized strings required by the component.\n *
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/multiselect/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { OptionDefinition, OptionGroup as OptionGroupDefinition } from '../internal/components/option/interfaces';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { BaseSelectProps } from '../select/interfaces';\n\nexport interface MultiselectProps extends BaseSelectProps {\n /**\n * Specifies the currently selected options.\n * Provide an empty array to clear the selection.\n */\n selectedOptions: ReadonlyArray<MultiselectProps.Option>;\n /**\n * Determines whether the dropdown list stays open after the user selects an item.\n */\n keepOpen?: boolean;\n /**\n * Specifies the maximum number of displayed tokens. If the property isn't set, all of the tokens are displayed.\n */\n tokenLimit?: number;\n /**\n * Hides the tokens displayed underneath the component.\n * Only use this if the selected options are displayed elsewhere on the page.\n */\n hideTokens?: boolean;\n /**\n * Shows tokens inside the trigger instead of below it.\n */\n inlineTokens?: boolean;\n /**\n * Specifies an `aria-label` for the token deselection button.\n * @i18n\n */\n deselectAriaLabel?: MultiselectProps.DeselectAriaLabelFunction;\n /**\n * An object containing all the localized strings required by the component.\n *\n * * `selectAllText` (string) - Specifies the text to be displayed next to the checkbox that selects or deselects all options.\n * * `tokenLimitShowFewer` (string) - Specifies the text to be displayed in the \"Show fewer\" button for the token group control.\n * * `tokenLimitShowMore` (string) - Specifies the text to be displayed in the \"Show more\" button for the token group control. This string should not contain the number of hidden tokens\n * because this will be added by the component automatically.\n * @i18n\n */\n i18nStrings?: MultiselectProps.I18nStrings;\n /**\n * Called when the user selects or deselects an option.\n * The event `detail` contains the current `selectedOptions`.\n */\n onChange?: NonCancelableEventHandler<MultiselectProps.MultiselectChangeDetail>;\n\n /**\n * Automatically focuses the trigger when component is mounted.\n */\n autoFocus?: boolean;\n\n /**\n * Adds an aria-label to the \"Show fewer\" button for the token group control.\n * Use to assign unique labels when there are multiple token groups with the same `tokenLimitShowFewer` label on one page.\n */\n tokenLimitShowFewerAriaLabel?: string;\n /**\n * Adds an aria-label to the \"Show more\" button for the token group control.\n * Use to assign unique labels when there are multiple token groups with the same `tokenLimitShowMore` label on one page.\n */\n tokenLimitShowMoreAriaLabel?: string;\n /**\n * Enables users to select and deselect all options with a special extra checkbox which is displayed at the start of the dropdown.\n */\n enableSelectAll?: boolean;\n}\n\nexport namespace MultiselectProps {\n export type Option = OptionDefinition;\n export type OptionGroup = OptionGroupDefinition;\n export type Options = ReadonlyArray<Option | OptionGroup>;\n export type DeselectAriaLabelFunction = (option: Option) => string;\n export type TriggerVariant = 'placeholder' | 'tokens';\n\n export interface I18nStrings {\n selectAllText?: string;\n tokenLimitShowFewer?: string;\n tokenLimitShowMore?: string;\n }\n\n export interface MultiselectChangeDetail {\n selectedOptions: ReadonlyArray<Option>;\n }\n\n export interface Ref {\n /**\n * Sets focus on the element without opening the dropdown or showing a visual focus indicator.\n */\n focus(): void;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/multiselect/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AASxC,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAU3F,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAWhD,QAAA,MAAM,mBAAmB;;;;;;;
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/multiselect/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AASxC,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAU3F,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAWhD,QAAA,MAAM,mBAAmB;;;;;;;gFA+KxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
|
|
@@ -20,7 +20,7 @@ import { useMultiselect } from './use-multiselect';
|
|
|
20
20
|
import styles from './styles.css.js';
|
|
21
21
|
const InternalMultiselect = React.forwardRef((_a, externalRef) => {
|
|
22
22
|
var _b;
|
|
23
|
-
var { options, filteringType, filteringPlaceholder, filteringAriaLabel, filteringClearAriaLabel, ariaRequired, placeholder, disabled, readOnly, ariaLabel, selectedOptions, deselectAriaLabel, tokenLimit, i18nStrings, virtualScroll, inlineTokens = false, hideTokens, expandToViewport, tokenLimitShowFewerAriaLabel, tokenLimitShowMoreAriaLabel, __internalRootRef = null, autoFocus } = _a, restProps = __rest(_a, ["options", "filteringType", "filteringPlaceholder", "filteringAriaLabel", "filteringClearAriaLabel", "ariaRequired", "placeholder", "disabled", "readOnly", "ariaLabel", "selectedOptions", "deselectAriaLabel", "tokenLimit", "i18nStrings", "virtualScroll", "inlineTokens", "hideTokens", "expandToViewport", "tokenLimitShowFewerAriaLabel", "tokenLimitShowMoreAriaLabel", "__internalRootRef", "autoFocus"]);
|
|
23
|
+
var { options, filteringType, filteringPlaceholder, filteringAriaLabel, filteringClearAriaLabel, ariaRequired, placeholder, disabled, readOnly, ariaLabel, selectedOptions, deselectAriaLabel, tokenLimit, i18nStrings, virtualScroll, inlineTokens = false, hideTokens, expandToViewport, tokenLimitShowFewerAriaLabel, tokenLimitShowMoreAriaLabel, __internalRootRef = null, autoFocus, enableSelectAll } = _a, restProps = __rest(_a, ["options", "filteringType", "filteringPlaceholder", "filteringAriaLabel", "filteringClearAriaLabel", "ariaRequired", "placeholder", "disabled", "readOnly", "ariaLabel", "selectedOptions", "deselectAriaLabel", "tokenLimit", "i18nStrings", "virtualScroll", "inlineTokens", "hideTokens", "expandToViewport", "tokenLimitShowFewerAriaLabel", "tokenLimitShowMoreAriaLabel", "__internalRootRef", "autoFocus", "enableSelectAll"]);
|
|
24
24
|
const baseProps = getBaseProps(restProps);
|
|
25
25
|
const formFieldContext = useFormFieldContext(restProps);
|
|
26
26
|
const i18n = useInternalI18n('multiselect');
|
|
@@ -39,7 +39,9 @@ const InternalMultiselect = React.forwardRef((_a, externalRef) => {
|
|
|
39
39
|
footerId,
|
|
40
40
|
filteringValue,
|
|
41
41
|
setFilteringValue,
|
|
42
|
-
externalRef
|
|
42
|
+
externalRef,
|
|
43
|
+
enableSelectAll,
|
|
44
|
+
i18nStrings }, restProps));
|
|
43
45
|
const filter = (React.createElement(Filter, Object.assign({ clearAriaLabel: filteringClearAriaLabel, filteringType: filteringType, placeholder: filteringPlaceholder, ariaLabel: filteringAriaLabel, ariaRequired: ariaRequired, value: filteringValue }, multiselectProps.getFilterProps())));
|
|
44
46
|
const trigger = (React.createElement(Trigger, Object.assign({ placeholder: placeholder, disabled: disabled, readOnly: readOnly, triggerProps: multiselectProps.getTriggerProps(disabled, autoFocus), selectedOption: null, selectedOptions: selectedOptions, triggerVariant: inlineTokens ? 'tokens' : 'placeholder', isOpen: multiselectProps.isOpen }, formFieldContext, { controlId: controlId, ariaLabelledby: joinStrings(formFieldContext.ariaLabelledby, ariaLabelId) })));
|
|
45
47
|
const tokens = selectedOptions.map(option => ({
|
|
@@ -64,7 +66,7 @@ const InternalMultiselect = React.forwardRef((_a, externalRef) => {
|
|
|
64
66
|
const dropdownProps = multiselectProps.getDropdownProps();
|
|
65
67
|
return (React.createElement("div", Object.assign({}, baseProps, { ref: __internalRootRef, className: clsx(styles.root, baseProps.className) }, multiselectProps.getWrapperProps()),
|
|
66
68
|
React.createElement(Dropdown, Object.assign({}, dropdownProps, { ariaLabelledby: dropdownProps.dropdownContentRole ? joinStrings(ariaLabelId, controlId) : undefined, ariaDescribedby: dropdownProps.dropdownContentRole ? (dropdownStatus.content ? footerId : undefined) : undefined, open: multiselectProps.isOpen, trigger: trigger, header: filter, footer: dropdownStatus.isSticky ? (React.createElement(DropdownFooter, { content: multiselectProps.isOpen ? dropdownStatus.content : null, id: footerId })) : null, expandToViewport: expandToViewport, stretchBeyondTriggerWidth: true }),
|
|
67
|
-
React.createElement(ListComponent, { listBottom: !dropdownStatus.isSticky ? (React.createElement(DropdownFooter, { content: multiselectProps.isOpen ? dropdownStatus.content : null, id: footerId })) : null, menuProps: multiselectProps.getMenuProps(), getOptionProps: multiselectProps.getOptionProps, filteredOptions: multiselectProps.filteredOptions, filteringValue: filteringValue, ref: multiselectProps.scrollToIndex, hasDropdownStatus: dropdownStatus.content !== null, checkboxes: true, useInteractiveGroups: true, screenReaderContent: multiselectProps.announcement, highlightType: multiselectProps.highlightType })),
|
|
69
|
+
React.createElement(ListComponent, { listBottom: !dropdownStatus.isSticky ? (React.createElement(DropdownFooter, { content: multiselectProps.isOpen ? dropdownStatus.content : null, id: footerId })) : null, menuProps: multiselectProps.getMenuProps(), getOptionProps: multiselectProps.getOptionProps, filteredOptions: multiselectProps.filteredOptions, filteringValue: filteringValue, ref: multiselectProps.scrollToIndex, hasDropdownStatus: dropdownStatus.content !== null, checkboxes: true, useInteractiveGroups: true, screenReaderContent: multiselectProps.announcement, highlightType: multiselectProps.highlightType, firstOptionSticky: enableSelectAll })),
|
|
68
70
|
showTokens && (React.createElement(InternalTokenGroup, Object.assign({}, multiselectProps.getTokenProps(), { className: styles.tokens, alignment: "horizontal", limit: tokenLimit, items: tokens, i18nStrings: tokenGroupI18nStrings, limitShowMoreAriaLabel: tokenLimitShowMoreAriaLabel, limitShowFewerAriaLabel: tokenLimitShowFewerAriaLabel, disableOuterPadding: true, readOnly: readOnly }))),
|
|
69
71
|
React.createElement(ScreenreaderOnly, { id: ariaLabelId }, ariaLabel)));
|
|
70
72
|
});
|