@cloudscape-design/components 3.0.250 → 3.0.251
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app-layout/visual-refresh/app-bar.js +1 -1
- package/app-layout/visual-refresh/app-bar.js.map +1 -1
- package/autosuggest/internal.d.ts.map +1 -1
- package/autosuggest/internal.js +2 -1
- package/autosuggest/internal.js.map +1 -1
- package/autosuggest/options-list.d.ts +2 -1
- package/autosuggest/options-list.d.ts.map +1 -1
- package/autosuggest/options-list.js +8 -2
- package/autosuggest/options-list.js.map +1 -1
- package/button/internal.d.ts +1 -1
- package/button/internal.d.ts.map +1 -1
- package/button/internal.js +3 -2
- package/button/internal.js.map +1 -1
- package/button/styles.css.js +20 -19
- package/button/styles.scoped.css +298 -136
- package/button/styles.selectors.js +20 -19
- package/file-upload/default-formatters.d.ts +3 -0
- package/file-upload/default-formatters.d.ts.map +1 -0
- package/file-upload/default-formatters.js +23 -0
- package/file-upload/default-formatters.js.map +1 -0
- package/file-upload/dropzone/index.d.ts +9 -0
- package/file-upload/dropzone/index.d.ts.map +1 -0
- package/file-upload/dropzone/index.js +69 -0
- package/file-upload/dropzone/index.js.map +1 -0
- package/file-upload/dropzone/styles.css.js +7 -0
- package/file-upload/dropzone/styles.scoped.css +108 -0
- package/file-upload/dropzone/styles.selectors.js +8 -0
- package/file-upload/file-input/index.d.ts +14 -0
- package/file-upload/file-input/index.d.ts.map +1 -0
- package/file-upload/file-input/index.js +55 -0
- package/file-upload/file-input/index.js.map +1 -0
- package/file-upload/file-input/styles.css.js +8 -0
- package/file-upload/file-input/styles.scoped.css +21 -0
- package/file-upload/file-input/styles.selectors.js +9 -0
- package/file-upload/file-option/index.d.ts +10 -0
- package/file-upload/file-option/index.d.ts.map +1 -0
- package/file-upload/file-option/index.js +22 -0
- package/file-upload/file-option/index.js.map +1 -0
- package/file-upload/file-option/styles.css.js +12 -0
- package/file-upload/file-option/styles.scoped.css +35 -0
- package/file-upload/file-option/styles.selectors.js +13 -0
- package/file-upload/file-option/thumbnail.d.ts +7 -0
- package/file-upload/file-option/thumbnail.d.ts.map +1 -0
- package/file-upload/file-option/thumbnail.js +20 -0
- package/file-upload/file-option/thumbnail.js.map +1 -0
- package/file-upload/index.d.ts +6 -0
- package/file-upload/index.d.ts.map +1 -0
- package/file-upload/index.js +17 -0
- package/file-upload/index.js.map +1 -0
- package/file-upload/interfaces.d.ts +99 -0
- package/file-upload/interfaces.d.ts.map +1 -0
- package/file-upload/interfaces.js +4 -0
- package/file-upload/interfaces.js.map +1 -0
- package/file-upload/internal.d.ts +7 -0
- package/file-upload/internal.d.ts.map +1 -0
- package/file-upload/internal.js +72 -0
- package/file-upload/internal.js.map +1 -0
- package/file-upload/styles.css.js +7 -0
- package/file-upload/styles.scoped.css +16 -0
- package/file-upload/styles.selectors.js +8 -0
- package/form-field/internal.d.ts +6 -1
- package/form-field/internal.d.ts.map +1 -1
- package/form-field/internal.js +6 -3
- package/form-field/internal.js.map +1 -1
- package/index.d.ts +1 -0
- package/index.d.ts.map +1 -1
- package/index.js +1 -0
- package/index.js.map +1 -1
- package/internal/base-component/styles.scoped.css +17 -0
- package/internal/components/dropdown-footer/index.d.ts +1 -0
- package/internal/components/dropdown-footer/index.d.ts.map +1 -1
- package/internal/components/dropdown-footer/index.js +2 -2
- package/internal/components/dropdown-footer/index.js.map +1 -1
- package/internal/components/live-region/index.d.ts +2 -1
- package/internal/components/live-region/index.d.ts.map +1 -1
- package/internal/components/live-region/index.js +2 -2
- package/internal/components/live-region/index.js.map +1 -1
- package/internal/components/options-list/index.d.ts +1 -0
- package/internal/components/options-list/index.d.ts.map +1 -1
- package/internal/components/options-list/index.js +2 -2
- package/internal/components/options-list/index.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/generated/theming/index.cjs +95 -0
- package/internal/generated/theming/index.js +95 -0
- package/internal/manifest.json +1 -1
- package/multiselect/internal.d.ts.map +1 -1
- package/multiselect/internal.js +4 -3
- package/multiselect/internal.js.map +1 -1
- package/package.json +2 -1
- package/property-filter/index.d.ts.map +1 -1
- package/property-filter/index.js +1 -1
- package/property-filter/index.js.map +1 -1
- package/property-filter/interfaces.d.ts +2 -1
- package/property-filter/interfaces.d.ts.map +1 -1
- package/property-filter/interfaces.js.map +1 -1
- package/property-filter/property-filter-autosuggest.d.ts.map +1 -1
- package/property-filter/property-filter-autosuggest.js +4 -2
- package/property-filter/property-filter-autosuggest.js.map +1 -1
- package/select/internal.d.ts.map +1 -1
- package/select/internal.js +4 -3
- package/select/internal.js.map +1 -1
- package/split-panel/interfaces.d.ts +8 -8
- package/split-panel/interfaces.d.ts.map +1 -1
- package/split-panel/interfaces.js.map +1 -1
- package/split-panel/preferences-modal.d.ts +7 -7
- package/split-panel/preferences-modal.d.ts.map +1 -1
- package/split-panel/preferences-modal.js.map +1 -1
- package/table/body-cell/index.js +1 -1
- package/table/body-cell/index.js.map +1 -1
- package/test-utils/dom/file-upload/index.d.ts +29 -0
- package/test-utils/dom/file-upload/index.js +66 -0
- package/test-utils/dom/file-upload/index.js.map +1 -0
- package/test-utils/dom/index.d.ts +3 -0
- package/test-utils/dom/index.js +10 -2
- package/test-utils/dom/index.js.map +1 -1
- package/test-utils/selectors/file-upload/index.d.ts +29 -0
- package/test-utils/selectors/file-upload/index.js +66 -0
- package/test-utils/selectors/file-upload/index.js.map +1 -0
- package/test-utils/selectors/index.d.ts +3 -0
- package/test-utils/selectors/index.js +10 -2
- package/test-utils/selectors/index.js.map +1 -1
- package/test-utils/tsconfig.tsbuildinfo +1 -1
- package/token-group/styles.css.js +7 -5
- package/token-group/styles.scoped.css +41 -23
- package/token-group/styles.selectors.js +7 -5
- package/token-group/token.d.ts +4 -1
- package/token-group/token.d.ts.map +1 -1
- package/token-group/token.js +13 -4
- package/token-group/token.js.map +1 -1
|
@@ -41,7 +41,7 @@ import styles from './styles.css.js';
|
|
|
41
41
|
*/
|
|
42
42
|
export default memo(LiveRegion);
|
|
43
43
|
function LiveRegion(_a) {
|
|
44
|
-
var { assertive = false, delay = 10, visible = false, tagName: TagName = 'span', children } = _a, restProps = __rest(_a, ["assertive", "delay", "visible", "tagName", "children"]);
|
|
44
|
+
var { assertive = false, delay = 10, visible = false, tagName: TagName = 'span', children, id } = _a, restProps = __rest(_a, ["assertive", "delay", "visible", "tagName", "children", "id"]);
|
|
45
45
|
const sourceRef = useRef(null);
|
|
46
46
|
const targetRef = useRef(null);
|
|
47
47
|
/*
|
|
@@ -82,7 +82,7 @@ function LiveRegion(_a) {
|
|
|
82
82
|
};
|
|
83
83
|
});
|
|
84
84
|
return (React.createElement(React.Fragment, null,
|
|
85
|
-
visible && React.createElement(TagName, { ref: sourceRef }, children),
|
|
85
|
+
visible && (React.createElement(TagName, { ref: sourceRef, id: id }, children)),
|
|
86
86
|
React.createElement(ScreenreaderOnly, Object.assign({}, restProps, { className: clsx(styles.root, restProps.className) }),
|
|
87
87
|
!visible && (React.createElement(TagName, { ref: sourceRef, "aria-hidden": "true" }, children)),
|
|
88
88
|
React.createElement("span", { ref: targetRef, "aria-atomic": "true", "aria-live": assertive ? 'assertive' : 'polite' }))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/live-region/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;;AAEtC,0DAA0D;AAE1D,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,gBAA2C,MAAM,sBAAsB,CAAC;AAC/E,OAAO,MAAM,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/live-region/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;;AAEtC,0DAA0D;AAE1D,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,gBAA2C,MAAM,sBAAsB,CAAC;AAC/E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAWrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAe,IAAI,CAAC,UAAU,CAAC,CAAC;AAEhC,SAAS,UAAU,CAAC,EAQF;QARE,EAClB,SAAS,GAAG,KAAK,EACjB,KAAK,GAAG,EAAE,EACV,OAAO,GAAG,KAAK,EACf,OAAO,EAAE,OAAO,GAAG,MAAM,EACzB,QAAQ,EACR,EAAE,OAEc,EADb,SAAS,cAPM,8DAQnB,CADa;IAEZ,MAAM,SAAS,GAAG,MAAM,CAAmC,IAAI,CAAC,CAAC;IACjE,MAAM,SAAS,GAAG,MAAM,CAAmC,IAAI,CAAC,CAAC;IAEjE;;;;;;;;;;MAUE;IACF,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,gBAAgB;YACvB,IAAI,SAAS,CAAC,OAAO,IAAI,SAAS,CAAC,OAAO,EAAE;gBAC1C,MAAM,aAAa,GAAG,gBAAgB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;gBAC1D,MAAM,aAAa,GAAG,gBAAgB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;gBAC1D,IAAI,aAAa,KAAK,aAAa,EAAE;oBACnC,gEAAgE;oBAChE,2DAA2D;oBAC3D,sDAAsD;oBACtD,SAAS,CAAC,OAAO,CAAC,SAAS,GAAG,aAAa,CAAC;iBAC7C;aACF;QACH,CAAC;QAED,IAAI,SAAwB,CAAC;QAC7B,IAAI,KAAK,EAAE;YACT,SAAS,GAAG,UAAU,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;SACjD;aAAM;YACL,gBAAgB,EAAE,CAAC;SACpB;QAED,OAAO,GAAG,EAAE;YACV,IAAI,SAAS,EAAE;gBACb,YAAY,CAAC,SAAS,CAAC,CAAC;aACzB;QACH,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,CACL;QACG,OAAO,IAAI,CACV,oBAAC,OAAO,IAAC,GAAG,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,IAC5B,QAAQ,CACD,CACX;QAED,oBAAC,gBAAgB,oBAAK,SAAS,IAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC;YAC/E,CAAC,OAAO,IAAI,CACX,oBAAC,OAAO,IAAC,GAAG,EAAE,SAAS,iBAAc,MAAM,IACxC,QAAQ,CACD,CACX;YAED,8BAAM,GAAG,EAAE,SAAS,iBAAc,MAAM,eAAY,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,GAAS,CAC9E,CAClB,CACJ,CAAC;AACJ,CAAC;AAED,oGAAoG;AACpG,oGAAoG;AACpG,0FAA0F;AAC1F,SAAS,gBAAgB,CAAC,IAAiB;IACzC,OAAO,CAAC,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;AAC5D,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n/* eslint-disable @cloudscape-design/prefer-live-region */\n\nimport clsx from 'clsx';\nimport React, { memo, useEffect, useRef } from 'react';\nimport ScreenreaderOnly, { ScreenreaderOnlyProps } from '../screenreader-only';\nimport styles from './styles.css.js';\n\nexport interface LiveRegionProps extends ScreenreaderOnlyProps {\n assertive?: boolean;\n delay?: number;\n visible?: boolean;\n tagName?: 'span' | 'div';\n children: React.ReactNode;\n id?: string;\n}\n\n/**\n * The live region is hidden in the layout, but visible for screen readers.\n * It's purpose it to announce changes e.g. when custom navigation logic is used.\n *\n * The way live region works differently in different browsers and screen readers and\n * it is recommended to manually test every new implementation.\n *\n * If you notice there are different words being merged together,\n * check if there are text nodes not being wrapped in elements, like:\n * <LiveRegion>\n * {title}\n * <span><Details /></span>\n * </LiveRegion>\n *\n * To fix, wrap \"title\" in an element:\n * <LiveRegion>\n * <span>{title}</span>\n * <span><Details /></span>\n * </LiveRegion>\n *\n * Or create a single text node if possible:\n * <LiveRegion>\n * {`${title} ${details}`}\n * </LiveRegion>\n *\n * The live region is always atomic, because non-atomic regions can be treated by screen readers\n * differently and produce unexpected results. To imitate non-atomic announcements simply use\n * multiple live regions:\n * <>\n * <LiveRegion>{title}</LiveRegion>\n * <LiveRegion><Details /></LiveRegion>\n * </>\n */\nexport default memo(LiveRegion);\n\nfunction LiveRegion({\n assertive = false,\n delay = 10,\n visible = false,\n tagName: TagName = 'span',\n children,\n id,\n ...restProps\n}: LiveRegionProps) {\n const sourceRef = useRef<HTMLSpanElement & HTMLDivElement>(null);\n const targetRef = useRef<HTMLSpanElement & HTMLDivElement>(null);\n\n /*\n When React state changes, React often produces too many DOM updates, causing NVDA to\n issue many announcements for the same logical event (See https://github.com/nvaccess/nvda/issues/7996).\n\n The code below imitates a debouncing, scheduling a callback every time new React state\n update is detected. When a callback resolves, it copies content from a muted element\n to the live region, which is recognized by screen readers as an update.\n\n If the use case requires no announcement to be ignored, use delay = 0, but ensure it\n does not impact the performance. If it does, prefer using a string as children prop.\n */\n useEffect(() => {\n function updateLiveRegion() {\n if (targetRef.current && sourceRef.current) {\n const sourceContent = extractInnerText(sourceRef.current);\n const targetContent = extractInnerText(targetRef.current);\n if (targetContent !== sourceContent) {\n // The aria-atomic does not work properly in Voice Over, causing\n // certain parts of the content to be ignored. To fix that,\n // we assign the source text content as a single node.\n targetRef.current.innerText = sourceContent;\n }\n }\n }\n\n let timeoutId: null | number;\n if (delay) {\n timeoutId = setTimeout(updateLiveRegion, delay);\n } else {\n updateLiveRegion();\n }\n\n return () => {\n if (timeoutId) {\n clearTimeout(timeoutId);\n }\n };\n });\n\n return (\n <>\n {visible && (\n <TagName ref={sourceRef} id={id}>\n {children}\n </TagName>\n )}\n\n <ScreenreaderOnly {...restProps} className={clsx(styles.root, restProps.className)}>\n {!visible && (\n <TagName ref={sourceRef} aria-hidden=\"true\">\n {children}\n </TagName>\n )}\n\n <span ref={targetRef} aria-atomic=\"true\" aria-live={assertive ? 'assertive' : 'polite'}></span>\n </ScreenreaderOnly>\n </>\n );\n}\n\n// This only extracts text content from the node including all its children which is enough for now.\n// To make it more powerful, it is possible to create a more sophisticated extractor with respect to\n// ARIA properties to ignore aria-hidden nodes and read ARIA labels from the live content.\nfunction extractInnerText(node: HTMLElement) {\n return (node.innerText || '').replace(/\\s+/g, ' ').trim();\n}\n"]}
|
|
@@ -22,6 +22,7 @@ export interface OptionsListProps extends BaseComponentProps {
|
|
|
22
22
|
position?: React.CSSProperties['position'];
|
|
23
23
|
role?: 'listbox' | 'list' | 'menu';
|
|
24
24
|
ariaLabelledby?: string;
|
|
25
|
+
ariaDescribedby?: string;
|
|
25
26
|
decreaseTopMargin?: boolean;
|
|
26
27
|
}
|
|
27
28
|
declare const _default: React.ForwardRefExoticComponent<OptionsListProps & React.RefAttributes<HTMLUListElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/components/options-list/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,kBAAkB,EAAgB,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAEL,yBAAyB,EACzB,sBAAsB,EACtB,aAAa,EAEd,MAAM,cAAc,CAAC;AAItB,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACvC;;OAEG;IACH,UAAU,CAAC,EAAE,yBAAyB,CAAC;IACvC,SAAS,CAAC,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;IAClD,MAAM,CAAC,EAAE,yBAAyB,CAAC;QAAE,aAAa,EAAE,IAAI,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC;IACnE,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,SAAS,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/components/options-list/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,kBAAkB,EAAgB,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAEL,yBAAyB,EACzB,sBAAsB,EACtB,aAAa,EAEd,MAAM,cAAc,CAAC;AAItB,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACvC;;OAEG;IACH,UAAU,CAAC,EAAE,yBAAyB,CAAC;IACvC,SAAS,CAAC,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;IAClD,MAAM,CAAC,EAAE,yBAAyB,CAAC;QAAE,aAAa,EAAE,IAAI,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC;IACnE,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,SAAS,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;;AAmFD,wBAA6C"}
|
|
@@ -15,7 +15,7 @@ const getItemIndex = (containerRef, event) => {
|
|
|
15
15
|
return mouseTarget ? parseInt(mouseTarget) : -1;
|
|
16
16
|
};
|
|
17
17
|
const OptionsList = (_a, ref) => {
|
|
18
|
-
var { open, children, nativeAttributes = {}, onKeyDown, onBlur, onFocus, onLoadMore, onMouseUp, onMouseMove, position = 'relative', role = 'listbox', decreaseTopMargin = false, ariaLabelledby } = _a, restProps = __rest(_a, ["open", "children", "nativeAttributes", "onKeyDown", "onBlur", "onFocus", "onLoadMore", "onMouseUp", "onMouseMove", "position", "role", "decreaseTopMargin", "ariaLabelledby"]);
|
|
18
|
+
var { open, children, nativeAttributes = {}, onKeyDown, onBlur, onFocus, onLoadMore, onMouseUp, onMouseMove, position = 'relative', role = 'listbox', decreaseTopMargin = false, ariaLabelledby, ariaDescribedby } = _a, restProps = __rest(_a, ["open", "children", "nativeAttributes", "onKeyDown", "onBlur", "onFocus", "onLoadMore", "onMouseUp", "onMouseMove", "position", "role", "decreaseTopMargin", "ariaLabelledby", "ariaDescribedby"]);
|
|
19
19
|
const baseProps = getBaseProps(restProps);
|
|
20
20
|
const menuRef = useRef(null);
|
|
21
21
|
const handleScroll = () => {
|
|
@@ -38,7 +38,7 @@ const OptionsList = (_a, ref) => {
|
|
|
38
38
|
[styles['decrease-top-margin']]: decreaseTopMargin,
|
|
39
39
|
});
|
|
40
40
|
const mergedRef = useMergeRefs(ref, menuRef);
|
|
41
|
-
return (React.createElement("ul", Object.assign({}, baseProps, nativeAttributes, { className: className, ref: mergedRef, style: { position }, role: role, onScroll: handleScroll, onKeyDown: event => onKeyDown && 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: -1, "aria-labelledby": ariaLabelledby }), open && children));
|
|
41
|
+
return (React.createElement("ul", Object.assign({}, baseProps, nativeAttributes, { className: className, ref: mergedRef, style: { position }, role: role, onScroll: handleScroll, onKeyDown: event => onKeyDown && 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: -1, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby }), open && children));
|
|
42
42
|
};
|
|
43
43
|
export default React.forwardRef(OptionsList);
|
|
44
44
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/options-list/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAsB,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACxE,OAAO,EACL,sBAAsB,EAItB,iBAAiB,GAClB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/options-list/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAsB,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACxE,OAAO,EACL,sBAAsB,EAItB,iBAAiB,GAClB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAyBrC,MAAM,qBAAqB,GAAG,EAAE,CAAC;AAEjC,MAAM,YAAY,GAAG,CAAC,YAA0C,EAAE,KAAuB,EAAE,EAAE;IAC3F,MAAM,MAAM,GAAG,WAAW,CACxB,KAAK,CAAC,MAAqB,EAC3B,OAAO,CAAC,EAAE,CAAC,OAAO,KAAK,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,CAC7E,CAAC;IACF,MAAM,WAAW,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAC,WAAW,CAAC;IAChD,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAClD,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,CAClB,EAgBmB,EACnB,GAAgC,EAChC,EAAE;QAlBF,EACE,IAAI,EACJ,QAAQ,EACR,gBAAgB,GAAG,EAAE,EACrB,SAAS,EACT,MAAM,EACN,OAAO,EACP,UAAU,EACV,SAAS,EACT,WAAW,EACX,QAAQ,GAAG,UAAU,EACrB,IAAI,GAAG,SAAS,EAChB,iBAAiB,GAAG,KAAK,EACzB,cAAc,EACd,eAAe,OAEE,EADd,SAAS,cAfd,kMAgBC,CADa;IAId,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,OAAO,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAE/C,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,MAAM,eAAe,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAC;QACzC,IAAI,eAAe,EAAE;YACnB,MAAM,kBAAkB,GAAG,eAAe,CAAC,SAAS,GAAG,eAAe,CAAC,YAAY,CAAC;YACpF,MAAM,qBAAqB,GAAG,eAAe,CAAC,YAAY,GAAG,kBAAkB,CAAC;YAChF,IAAI,qBAAqB,GAAG,qBAAqB,EAAE;gBACjD,sBAAsB,CAAC,UAAU,CAAC,CAAC;aACpC;SACF;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI,EAAE;YACT,OAAO;SACR;QACD,YAAY,EAAE,CAAC;IACjB,CAAC,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE;QAC7C,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,iBAAiB;KACnD,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,YAAY,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;IAE7C,OAAO,CACL,4CACM,SAAS,EACT,gBAAgB,IACpB,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,EAAE,QAAQ,EAAE,EACnB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,IAAI,iBAAiB,CAAC,SAAS,EAAE,KAAK,CAAC,EACpE,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAG,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,EACjE,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,EAC7D,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAAC,MAAM,EAAE,EAAE,aAAa,EAAE,KAAK,CAAC,aAAa,EAAE,CAAC,EACvF,OAAO,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,OAAO,CAAC,EAC9C,QAAQ,EAAE,CAAC,CAAC,qBACK,cAAc,sBACb,eAAe,KAEhC,IAAI,IAAI,QAAQ,CACd,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport { useMergeRefs } from '../../hooks/use-merge-refs';\nimport React, { useEffect, useRef } from 'react';\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport {\n fireNonCancelableEvent,\n NonCancelableEventHandler,\n CancelableEventHandler,\n BaseKeyDetail,\n fireKeyboardEvent,\n} from '../../events';\nimport { findUpUntil } from '../../utils/dom';\nimport styles from './styles.css.js';\n\nexport interface OptionsListProps extends BaseComponentProps {\n open?: boolean;\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 ariaLabelledby?: string;\n ariaDescribedby?: string;\n decreaseTopMargin?: boolean;\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 children,\n nativeAttributes = {},\n onKeyDown,\n onBlur,\n onFocus,\n onLoadMore,\n onMouseUp,\n onMouseMove,\n position = 'relative',\n role = 'listbox',\n decreaseTopMargin = false,\n ariaLabelledby,\n ariaDescribedby,\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 = () => {\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) {\n return;\n }\n handleScroll();\n });\n\n const className = clsx(styles['options-list'], {\n [styles['decrease-top-margin']]: decreaseTopMargin,\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 }}\n role={role}\n onScroll={handleScroll}\n onKeyDown={event => onKeyDown && 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={-1}\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n >\n {open && children}\n </ul>\n );\n};\n\nexport default React.forwardRef(OptionsList);\n"]}
|
package/internal/environment.js
CHANGED
|
@@ -1587,6 +1587,22 @@ module.exports.preset = {
|
|
|
1587
1587
|
"light": "{colorBlue200}",
|
|
1588
1588
|
"dark": "{colorBlue600}"
|
|
1589
1589
|
},
|
|
1590
|
+
"colorDropzoneBackgroundActive": {
|
|
1591
|
+
"light": "{colorGrey200}",
|
|
1592
|
+
"dark": "{colorGrey500}"
|
|
1593
|
+
},
|
|
1594
|
+
"colorDropzoneBackgroundHover": {
|
|
1595
|
+
"light": "{colorBlue200}",
|
|
1596
|
+
"dark": "{colorBlue600}"
|
|
1597
|
+
},
|
|
1598
|
+
"colorDropzoneTextActive": {
|
|
1599
|
+
"light": "{colorGrey550}",
|
|
1600
|
+
"dark": "{colorGrey800}"
|
|
1601
|
+
},
|
|
1602
|
+
"colorDropzoneTextHover": {
|
|
1603
|
+
"light": "{colorBlue800}",
|
|
1604
|
+
"dark": "{colorWhite}"
|
|
1605
|
+
},
|
|
1590
1606
|
"fontBodyMLineHeight": "22px",
|
|
1591
1607
|
"fontBodyMSize": "14px",
|
|
1592
1608
|
"fontBodySLetterSpacing": "0.005em",
|
|
@@ -1664,6 +1680,7 @@ module.exports.preset = {
|
|
|
1664
1680
|
"borderRadiusControlCircularFocusRing": "4px",
|
|
1665
1681
|
"borderRadiusControlDefaultFocusRing": "4px",
|
|
1666
1682
|
"borderRadiusDropdown": "{borderRadiusItem}",
|
|
1683
|
+
"borderRadiusDropzone": "12px",
|
|
1667
1684
|
"borderRadiusFlashbar": "12px",
|
|
1668
1685
|
"borderRadiusItem": "8px",
|
|
1669
1686
|
"borderRadiusInput": "8px",
|
|
@@ -3522,6 +3539,22 @@ module.exports.preset = {
|
|
|
3522
3539
|
"colorDragPlaceholderHover": {
|
|
3523
3540
|
"light": "{colorBlue600}",
|
|
3524
3541
|
"dark": "{colorBlue600}"
|
|
3542
|
+
},
|
|
3543
|
+
"colorDropzoneBackgroundActive": {
|
|
3544
|
+
"light": "{colorGrey500}",
|
|
3545
|
+
"dark": "{colorGrey500}"
|
|
3546
|
+
},
|
|
3547
|
+
"colorDropzoneBackgroundHover": {
|
|
3548
|
+
"light": "{colorBlue600}",
|
|
3549
|
+
"dark": "{colorBlue600}"
|
|
3550
|
+
},
|
|
3551
|
+
"colorDropzoneTextActive": {
|
|
3552
|
+
"light": "{colorGrey800}",
|
|
3553
|
+
"dark": "{colorGrey800}"
|
|
3554
|
+
},
|
|
3555
|
+
"colorDropzoneTextHover": {
|
|
3556
|
+
"light": "{colorWhite}",
|
|
3557
|
+
"dark": "{colorWhite}"
|
|
3525
3558
|
}
|
|
3526
3559
|
}
|
|
3527
3560
|
},
|
|
@@ -4476,6 +4509,22 @@ module.exports.preset = {
|
|
|
4476
4509
|
"colorDragPlaceholderHover": {
|
|
4477
4510
|
"light": "{colorBlue600}",
|
|
4478
4511
|
"dark": "{colorBlue600}"
|
|
4512
|
+
},
|
|
4513
|
+
"colorDropzoneBackgroundActive": {
|
|
4514
|
+
"light": "{colorGrey500}",
|
|
4515
|
+
"dark": "{colorGrey500}"
|
|
4516
|
+
},
|
|
4517
|
+
"colorDropzoneBackgroundHover": {
|
|
4518
|
+
"light": "{colorBlue600}",
|
|
4519
|
+
"dark": "{colorBlue600}"
|
|
4520
|
+
},
|
|
4521
|
+
"colorDropzoneTextActive": {
|
|
4522
|
+
"light": "{colorGrey800}",
|
|
4523
|
+
"dark": "{colorGrey800}"
|
|
4524
|
+
},
|
|
4525
|
+
"colorDropzoneTextHover": {
|
|
4526
|
+
"light": "{colorWhite}",
|
|
4527
|
+
"dark": "{colorWhite}"
|
|
4479
4528
|
}
|
|
4480
4529
|
}
|
|
4481
4530
|
},
|
|
@@ -5370,6 +5419,22 @@ module.exports.preset = {
|
|
|
5370
5419
|
"colorDragPlaceholderHover": {
|
|
5371
5420
|
"light": "{colorBlue200}",
|
|
5372
5421
|
"dark": "{colorBlue600}"
|
|
5422
|
+
},
|
|
5423
|
+
"colorDropzoneBackgroundActive": {
|
|
5424
|
+
"light": "{colorGrey200}",
|
|
5425
|
+
"dark": "{colorGrey500}"
|
|
5426
|
+
},
|
|
5427
|
+
"colorDropzoneBackgroundHover": {
|
|
5428
|
+
"light": "{colorBlue200}",
|
|
5429
|
+
"dark": "{colorBlue600}"
|
|
5430
|
+
},
|
|
5431
|
+
"colorDropzoneTextActive": {
|
|
5432
|
+
"light": "{colorGrey550}",
|
|
5433
|
+
"dark": "{colorGrey800}"
|
|
5434
|
+
},
|
|
5435
|
+
"colorDropzoneTextHover": {
|
|
5436
|
+
"light": "{colorBlue800}",
|
|
5437
|
+
"dark": "{colorWhite}"
|
|
5373
5438
|
}
|
|
5374
5439
|
}
|
|
5375
5440
|
},
|
|
@@ -6264,6 +6329,22 @@ module.exports.preset = {
|
|
|
6264
6329
|
"colorDragPlaceholderHover": {
|
|
6265
6330
|
"light": "{colorBlue200}",
|
|
6266
6331
|
"dark": "{colorBlue600}"
|
|
6332
|
+
},
|
|
6333
|
+
"colorDropzoneBackgroundActive": {
|
|
6334
|
+
"light": "{colorGrey200}",
|
|
6335
|
+
"dark": "{colorGrey500}"
|
|
6336
|
+
},
|
|
6337
|
+
"colorDropzoneBackgroundHover": {
|
|
6338
|
+
"light": "{colorBlue200}",
|
|
6339
|
+
"dark": "{colorBlue600}"
|
|
6340
|
+
},
|
|
6341
|
+
"colorDropzoneTextActive": {
|
|
6342
|
+
"light": "{colorGrey550}",
|
|
6343
|
+
"dark": "{colorGrey800}"
|
|
6344
|
+
},
|
|
6345
|
+
"colorDropzoneTextHover": {
|
|
6346
|
+
"light": "{colorBlue800}",
|
|
6347
|
+
"dark": "{colorWhite}"
|
|
6267
6348
|
}
|
|
6268
6349
|
}
|
|
6269
6350
|
}
|
|
@@ -6645,6 +6726,10 @@ module.exports.preset = {
|
|
|
6645
6726
|
"colorBoardPlaceholderHover": "color",
|
|
6646
6727
|
"colorDragPlaceholderActive": "color",
|
|
6647
6728
|
"colorDragPlaceholderHover": "color",
|
|
6729
|
+
"colorDropzoneBackgroundActive": "color",
|
|
6730
|
+
"colorDropzoneBackgroundHover": "color",
|
|
6731
|
+
"colorDropzoneTextActive": "color",
|
|
6732
|
+
"colorDropzoneTextHover": "color",
|
|
6648
6733
|
"motionDurationExtraFast": "motion",
|
|
6649
6734
|
"motionDurationExtraSlow": "motion",
|
|
6650
6735
|
"motionDurationFast": "motion",
|
|
@@ -7670,6 +7755,10 @@ module.exports.preset = {
|
|
|
7670
7755
|
"colorBoardPlaceholderHover": "color-board-placeholder-hover",
|
|
7671
7756
|
"colorDragPlaceholderActive": "color-drag-placeholder-active",
|
|
7672
7757
|
"colorDragPlaceholderHover": "color-drag-placeholder-hover",
|
|
7758
|
+
"colorDropzoneBackgroundActive": "color-dropzone-background-active",
|
|
7759
|
+
"colorDropzoneBackgroundHover": "color-dropzone-background-hover",
|
|
7760
|
+
"colorDropzoneTextActive": "color-dropzone-text-active",
|
|
7761
|
+
"colorDropzoneTextHover": "color-dropzone-text-hover",
|
|
7673
7762
|
"fontBodyMLineHeight": "font-body-m-line-height",
|
|
7674
7763
|
"fontBodyMSize": "font-body-m-size",
|
|
7675
7764
|
"fontBodySLetterSpacing": "font-body-s-letter-spacing",
|
|
@@ -7747,6 +7836,7 @@ module.exports.preset = {
|
|
|
7747
7836
|
"borderRadiusControlCircularFocusRing": "border-radius-control-circular-focus-ring",
|
|
7748
7837
|
"borderRadiusControlDefaultFocusRing": "border-radius-control-default-focus-ring",
|
|
7749
7838
|
"borderRadiusDropdown": "border-radius-dropdown",
|
|
7839
|
+
"borderRadiusDropzone": "border-radius-dropzone",
|
|
7750
7840
|
"borderRadiusFlashbar": "border-radius-flashbar",
|
|
7751
7841
|
"borderRadiusItem": "border-radius-item",
|
|
7752
7842
|
"borderRadiusInput": "border-radius-input",
|
|
@@ -8330,6 +8420,10 @@ module.exports.preset = {
|
|
|
8330
8420
|
"colorBoardPlaceholderHover": "--color-board-placeholder-hover-v1s7kq",
|
|
8331
8421
|
"colorDragPlaceholderActive": "--color-drag-placeholder-active-fkpj7i",
|
|
8332
8422
|
"colorDragPlaceholderHover": "--color-drag-placeholder-hover-3ohnz1",
|
|
8423
|
+
"colorDropzoneBackgroundActive": "--color-dropzone-background-active-g4zi07",
|
|
8424
|
+
"colorDropzoneBackgroundHover": "--color-dropzone-background-hover-j98f7z",
|
|
8425
|
+
"colorDropzoneTextActive": "--color-dropzone-text-active-aobpir",
|
|
8426
|
+
"colorDropzoneTextHover": "--color-dropzone-text-hover-ud2lnq",
|
|
8333
8427
|
"fontBodyMLineHeight": "--font-body-m-line-height-i7xxvv",
|
|
8334
8428
|
"fontBodyMSize": "--font-body-m-size-sregvd",
|
|
8335
8429
|
"fontBodySLetterSpacing": "--font-body-s-letter-spacing-cy0oxj",
|
|
@@ -8407,6 +8501,7 @@ module.exports.preset = {
|
|
|
8407
8501
|
"borderRadiusControlCircularFocusRing": "--border-radius-control-circular-focus-ring-qawzn7",
|
|
8408
8502
|
"borderRadiusControlDefaultFocusRing": "--border-radius-control-default-focus-ring-7661kz",
|
|
8409
8503
|
"borderRadiusDropdown": "--border-radius-dropdown-ujknaf",
|
|
8504
|
+
"borderRadiusDropzone": "--border-radius-dropzone-poqo08",
|
|
8410
8505
|
"borderRadiusFlashbar": "--border-radius-flashbar-i7jm55",
|
|
8411
8506
|
"borderRadiusItem": "--border-radius-item-u2ibpi",
|
|
8412
8507
|
"borderRadiusInput": "--border-radius-input-txq8zy",
|
|
@@ -1587,6 +1587,22 @@ export var preset = {
|
|
|
1587
1587
|
"light": "{colorBlue200}",
|
|
1588
1588
|
"dark": "{colorBlue600}"
|
|
1589
1589
|
},
|
|
1590
|
+
"colorDropzoneBackgroundActive": {
|
|
1591
|
+
"light": "{colorGrey200}",
|
|
1592
|
+
"dark": "{colorGrey500}"
|
|
1593
|
+
},
|
|
1594
|
+
"colorDropzoneBackgroundHover": {
|
|
1595
|
+
"light": "{colorBlue200}",
|
|
1596
|
+
"dark": "{colorBlue600}"
|
|
1597
|
+
},
|
|
1598
|
+
"colorDropzoneTextActive": {
|
|
1599
|
+
"light": "{colorGrey550}",
|
|
1600
|
+
"dark": "{colorGrey800}"
|
|
1601
|
+
},
|
|
1602
|
+
"colorDropzoneTextHover": {
|
|
1603
|
+
"light": "{colorBlue800}",
|
|
1604
|
+
"dark": "{colorWhite}"
|
|
1605
|
+
},
|
|
1590
1606
|
"fontBodyMLineHeight": "22px",
|
|
1591
1607
|
"fontBodyMSize": "14px",
|
|
1592
1608
|
"fontBodySLetterSpacing": "0.005em",
|
|
@@ -1664,6 +1680,7 @@ export var preset = {
|
|
|
1664
1680
|
"borderRadiusControlCircularFocusRing": "4px",
|
|
1665
1681
|
"borderRadiusControlDefaultFocusRing": "4px",
|
|
1666
1682
|
"borderRadiusDropdown": "{borderRadiusItem}",
|
|
1683
|
+
"borderRadiusDropzone": "12px",
|
|
1667
1684
|
"borderRadiusFlashbar": "12px",
|
|
1668
1685
|
"borderRadiusItem": "8px",
|
|
1669
1686
|
"borderRadiusInput": "8px",
|
|
@@ -3522,6 +3539,22 @@ export var preset = {
|
|
|
3522
3539
|
"colorDragPlaceholderHover": {
|
|
3523
3540
|
"light": "{colorBlue600}",
|
|
3524
3541
|
"dark": "{colorBlue600}"
|
|
3542
|
+
},
|
|
3543
|
+
"colorDropzoneBackgroundActive": {
|
|
3544
|
+
"light": "{colorGrey500}",
|
|
3545
|
+
"dark": "{colorGrey500}"
|
|
3546
|
+
},
|
|
3547
|
+
"colorDropzoneBackgroundHover": {
|
|
3548
|
+
"light": "{colorBlue600}",
|
|
3549
|
+
"dark": "{colorBlue600}"
|
|
3550
|
+
},
|
|
3551
|
+
"colorDropzoneTextActive": {
|
|
3552
|
+
"light": "{colorGrey800}",
|
|
3553
|
+
"dark": "{colorGrey800}"
|
|
3554
|
+
},
|
|
3555
|
+
"colorDropzoneTextHover": {
|
|
3556
|
+
"light": "{colorWhite}",
|
|
3557
|
+
"dark": "{colorWhite}"
|
|
3525
3558
|
}
|
|
3526
3559
|
}
|
|
3527
3560
|
},
|
|
@@ -4476,6 +4509,22 @@ export var preset = {
|
|
|
4476
4509
|
"colorDragPlaceholderHover": {
|
|
4477
4510
|
"light": "{colorBlue600}",
|
|
4478
4511
|
"dark": "{colorBlue600}"
|
|
4512
|
+
},
|
|
4513
|
+
"colorDropzoneBackgroundActive": {
|
|
4514
|
+
"light": "{colorGrey500}",
|
|
4515
|
+
"dark": "{colorGrey500}"
|
|
4516
|
+
},
|
|
4517
|
+
"colorDropzoneBackgroundHover": {
|
|
4518
|
+
"light": "{colorBlue600}",
|
|
4519
|
+
"dark": "{colorBlue600}"
|
|
4520
|
+
},
|
|
4521
|
+
"colorDropzoneTextActive": {
|
|
4522
|
+
"light": "{colorGrey800}",
|
|
4523
|
+
"dark": "{colorGrey800}"
|
|
4524
|
+
},
|
|
4525
|
+
"colorDropzoneTextHover": {
|
|
4526
|
+
"light": "{colorWhite}",
|
|
4527
|
+
"dark": "{colorWhite}"
|
|
4479
4528
|
}
|
|
4480
4529
|
}
|
|
4481
4530
|
},
|
|
@@ -5370,6 +5419,22 @@ export var preset = {
|
|
|
5370
5419
|
"colorDragPlaceholderHover": {
|
|
5371
5420
|
"light": "{colorBlue200}",
|
|
5372
5421
|
"dark": "{colorBlue600}"
|
|
5422
|
+
},
|
|
5423
|
+
"colorDropzoneBackgroundActive": {
|
|
5424
|
+
"light": "{colorGrey200}",
|
|
5425
|
+
"dark": "{colorGrey500}"
|
|
5426
|
+
},
|
|
5427
|
+
"colorDropzoneBackgroundHover": {
|
|
5428
|
+
"light": "{colorBlue200}",
|
|
5429
|
+
"dark": "{colorBlue600}"
|
|
5430
|
+
},
|
|
5431
|
+
"colorDropzoneTextActive": {
|
|
5432
|
+
"light": "{colorGrey550}",
|
|
5433
|
+
"dark": "{colorGrey800}"
|
|
5434
|
+
},
|
|
5435
|
+
"colorDropzoneTextHover": {
|
|
5436
|
+
"light": "{colorBlue800}",
|
|
5437
|
+
"dark": "{colorWhite}"
|
|
5373
5438
|
}
|
|
5374
5439
|
}
|
|
5375
5440
|
},
|
|
@@ -6264,6 +6329,22 @@ export var preset = {
|
|
|
6264
6329
|
"colorDragPlaceholderHover": {
|
|
6265
6330
|
"light": "{colorBlue200}",
|
|
6266
6331
|
"dark": "{colorBlue600}"
|
|
6332
|
+
},
|
|
6333
|
+
"colorDropzoneBackgroundActive": {
|
|
6334
|
+
"light": "{colorGrey200}",
|
|
6335
|
+
"dark": "{colorGrey500}"
|
|
6336
|
+
},
|
|
6337
|
+
"colorDropzoneBackgroundHover": {
|
|
6338
|
+
"light": "{colorBlue200}",
|
|
6339
|
+
"dark": "{colorBlue600}"
|
|
6340
|
+
},
|
|
6341
|
+
"colorDropzoneTextActive": {
|
|
6342
|
+
"light": "{colorGrey550}",
|
|
6343
|
+
"dark": "{colorGrey800}"
|
|
6344
|
+
},
|
|
6345
|
+
"colorDropzoneTextHover": {
|
|
6346
|
+
"light": "{colorBlue800}",
|
|
6347
|
+
"dark": "{colorWhite}"
|
|
6267
6348
|
}
|
|
6268
6349
|
}
|
|
6269
6350
|
}
|
|
@@ -6645,6 +6726,10 @@ export var preset = {
|
|
|
6645
6726
|
"colorBoardPlaceholderHover": "color",
|
|
6646
6727
|
"colorDragPlaceholderActive": "color",
|
|
6647
6728
|
"colorDragPlaceholderHover": "color",
|
|
6729
|
+
"colorDropzoneBackgroundActive": "color",
|
|
6730
|
+
"colorDropzoneBackgroundHover": "color",
|
|
6731
|
+
"colorDropzoneTextActive": "color",
|
|
6732
|
+
"colorDropzoneTextHover": "color",
|
|
6648
6733
|
"motionDurationExtraFast": "motion",
|
|
6649
6734
|
"motionDurationExtraSlow": "motion",
|
|
6650
6735
|
"motionDurationFast": "motion",
|
|
@@ -7670,6 +7755,10 @@ export var preset = {
|
|
|
7670
7755
|
"colorBoardPlaceholderHover": "color-board-placeholder-hover",
|
|
7671
7756
|
"colorDragPlaceholderActive": "color-drag-placeholder-active",
|
|
7672
7757
|
"colorDragPlaceholderHover": "color-drag-placeholder-hover",
|
|
7758
|
+
"colorDropzoneBackgroundActive": "color-dropzone-background-active",
|
|
7759
|
+
"colorDropzoneBackgroundHover": "color-dropzone-background-hover",
|
|
7760
|
+
"colorDropzoneTextActive": "color-dropzone-text-active",
|
|
7761
|
+
"colorDropzoneTextHover": "color-dropzone-text-hover",
|
|
7673
7762
|
"fontBodyMLineHeight": "font-body-m-line-height",
|
|
7674
7763
|
"fontBodyMSize": "font-body-m-size",
|
|
7675
7764
|
"fontBodySLetterSpacing": "font-body-s-letter-spacing",
|
|
@@ -7747,6 +7836,7 @@ export var preset = {
|
|
|
7747
7836
|
"borderRadiusControlCircularFocusRing": "border-radius-control-circular-focus-ring",
|
|
7748
7837
|
"borderRadiusControlDefaultFocusRing": "border-radius-control-default-focus-ring",
|
|
7749
7838
|
"borderRadiusDropdown": "border-radius-dropdown",
|
|
7839
|
+
"borderRadiusDropzone": "border-radius-dropzone",
|
|
7750
7840
|
"borderRadiusFlashbar": "border-radius-flashbar",
|
|
7751
7841
|
"borderRadiusItem": "border-radius-item",
|
|
7752
7842
|
"borderRadiusInput": "border-radius-input",
|
|
@@ -8330,6 +8420,10 @@ export var preset = {
|
|
|
8330
8420
|
"colorBoardPlaceholderHover": "--color-board-placeholder-hover-v1s7kq",
|
|
8331
8421
|
"colorDragPlaceholderActive": "--color-drag-placeholder-active-fkpj7i",
|
|
8332
8422
|
"colorDragPlaceholderHover": "--color-drag-placeholder-hover-3ohnz1",
|
|
8423
|
+
"colorDropzoneBackgroundActive": "--color-dropzone-background-active-g4zi07",
|
|
8424
|
+
"colorDropzoneBackgroundHover": "--color-dropzone-background-hover-j98f7z",
|
|
8425
|
+
"colorDropzoneTextActive": "--color-dropzone-text-active-aobpir",
|
|
8426
|
+
"colorDropzoneTextHover": "--color-dropzone-text-hover-ud2lnq",
|
|
8333
8427
|
"fontBodyMLineHeight": "--font-body-m-line-height-i7xxvv",
|
|
8334
8428
|
"fontBodyMSize": "--font-body-m-size-sregvd",
|
|
8335
8429
|
"fontBodySLetterSpacing": "--font-body-s-letter-spacing-cy0oxj",
|
|
@@ -8407,6 +8501,7 @@ export var preset = {
|
|
|
8407
8501
|
"borderRadiusControlCircularFocusRing": "--border-radius-control-circular-focus-ring-qawzn7",
|
|
8408
8502
|
"borderRadiusControlDefaultFocusRing": "--border-radius-control-default-focus-ring-7661kz",
|
|
8409
8503
|
"borderRadiusDropdown": "--border-radius-dropdown-ujknaf",
|
|
8504
|
+
"borderRadiusDropzone": "--border-radius-dropzone-poqo08",
|
|
8410
8505
|
"borderRadiusFlashbar": "--border-radius-flashbar-i7jm55",
|
|
8411
8506
|
"borderRadiusItem": "--border-radius-item-u2ibpi",
|
|
8412
8507
|
"borderRadiusInput": "--border-radius-input-txq8zy",
|
package/internal/manifest.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["multiselect/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AA2B3F,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAOhD,QAAA,MAAM,mBAAmB,
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["multiselect/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AA2B3F,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAOhD,QAAA,MAAM,mBAAmB,4HA+RxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
|
package/multiselect/internal.js
CHANGED
|
@@ -74,6 +74,7 @@ const InternalMultiselect = React.forwardRef((_a, externalRef) => {
|
|
|
74
74
|
const selfControlId = useUniqueId('trigger');
|
|
75
75
|
const controlId = (_b = formFieldContext.controlId) !== null && _b !== void 0 ? _b : selfControlId;
|
|
76
76
|
const multiSelectAriaLabelId = useUniqueId('multiselect-arialabel-');
|
|
77
|
+
const footerId = useUniqueId('footer');
|
|
77
78
|
const scrollToIndex = useRef(null);
|
|
78
79
|
const { isOpen, highlightType, highlightedOption, highlightedIndex, getTriggerProps, getDropdownProps, getFilterProps, getMenuProps, getOptionProps, highlightOption, announceSelected, } = useSelect({
|
|
79
80
|
selectedOptions,
|
|
@@ -112,7 +113,7 @@ const InternalMultiselect = React.forwardRef((_a, externalRef) => {
|
|
|
112
113
|
});
|
|
113
114
|
const filter = (React.createElement(Filter, Object.assign({ clearAriaLabel: filteringClearAriaLabel, filteringType: filteringType, placeholder: filteringPlaceholder, ariaLabel: filteringAriaLabel, ariaRequired: ariaRequired, value: filteringValue }, getFilterProps())));
|
|
114
115
|
const trigger = (React.createElement(Trigger, Object.assign({ placeholder: placeholder, disabled: disabled, triggerProps: getTriggerProps(disabled, autoFocus), selectedOption: null, isOpen: isOpen }, formFieldContext, { controlId: controlId, ariaLabelledby: joinStrings(formFieldContext.ariaLabelledby, multiSelectAriaLabelId) })));
|
|
115
|
-
const menuProps = Object.assign(Object.assign({}, getMenuProps()), { onLoadMore: handleLoadMore, ariaLabelledby: joinStrings(multiSelectAriaLabelId, controlId) });
|
|
116
|
+
const menuProps = Object.assign(Object.assign({}, getMenuProps()), { onLoadMore: handleLoadMore, ariaLabelledby: joinStrings(multiSelectAriaLabelId, controlId), ariaDescribedby: dropdownStatus.content ? footerId : undefined });
|
|
116
117
|
const announcement = useAnnouncement({
|
|
117
118
|
announceSelected,
|
|
118
119
|
highlightedOption,
|
|
@@ -159,8 +160,8 @@ const InternalMultiselect = React.forwardRef((_a, externalRef) => {
|
|
|
159
160
|
};
|
|
160
161
|
const mergedRef = useMergeRefs(rootRef, __internalRootRef);
|
|
161
162
|
return (React.createElement("div", Object.assign({}, baseProps, { ref: mergedRef, className: clsx(styles.root, baseProps.className), onKeyPress: handleNativeSearch }),
|
|
162
|
-
React.createElement(Dropdown, Object.assign({}, getDropdownProps(), { open: isOpen, trigger: trigger, header: filter, onMouseDown: handleMouseDown, footer: dropdownStatus.isSticky ? React.createElement(DropdownFooter, { content: isOpen ? dropdownStatus.content : null }) : null, expandToViewport: expandToViewport }),
|
|
163
|
-
React.createElement(ListComponent, { listBottom: !dropdownStatus.isSticky ? React.createElement(DropdownFooter, { content: isOpen ? dropdownStatus.content : null }) : null, menuProps: menuProps, getOptionProps: getOptionProps, filteredOptions: filteredOptions, filteringValue: filteringValue, ref: scrollToIndex, hasDropdownStatus: dropdownStatus.content !== null, checkboxes: true, useInteractiveGroups: useInteractiveGroups, screenReaderContent: announcement, highlightType: highlightType })),
|
|
163
|
+
React.createElement(Dropdown, Object.assign({}, getDropdownProps(), { open: isOpen, trigger: trigger, header: filter, onMouseDown: handleMouseDown, footer: dropdownStatus.isSticky ? (React.createElement(DropdownFooter, { content: isOpen ? dropdownStatus.content : null, id: footerId })) : null, expandToViewport: expandToViewport }),
|
|
164
|
+
React.createElement(ListComponent, { listBottom: !dropdownStatus.isSticky ? (React.createElement(DropdownFooter, { content: isOpen ? dropdownStatus.content : null, id: footerId })) : null, menuProps: menuProps, getOptionProps: getOptionProps, filteredOptions: filteredOptions, filteringValue: filteringValue, ref: scrollToIndex, hasDropdownStatus: dropdownStatus.content !== null, checkboxes: true, useInteractiveGroups: useInteractiveGroups, screenReaderContent: announcement, highlightType: highlightType })),
|
|
164
165
|
showTokens && (React.createElement(InternalTokenGroup, { alignment: "horizontal", limit: tokenLimit, items: tokens, onDismiss: handleTokenDismiss, i18nStrings: tokenGroupI18nStrings })),
|
|
165
166
|
React.createElement(ScreenreaderOnly, { id: multiSelectAriaLabelId }, ariaLabel)));
|
|
166
167
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["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 InternalTokenGroup from '../token-group/internal';\nimport { TokenGroupProps } from '../token-group/interfaces';\n\nimport { MultiselectProps } from './interfaces';\nimport styles from './styles.css.js';\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\nimport { joinStrings } from '../internal/utils/strings';\n\ntype InternalMultiselectProps = MultiselectProps & InternalBaseComponentProps;\n\nconst InternalMultiselect = React.forwardRef(\n (\n {\n options = [],\n filteringType = 'none',\n filteringPlaceholder,\n filteringAriaLabel,\n filteringClearAriaLabel,\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 autoFocus,\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 multiSelectAriaLabelId = useUniqueId('multiselect-arialabel-');\n\n const scrollToIndex = useRef<SelectListProps.SelectListRef>(null);\n const {\n isOpen,\n highlightType,\n highlightedOption,\n highlightedIndex,\n getTriggerProps,\n getDropdownProps,\n getFilterProps,\n getMenuProps,\n getOptionProps,\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 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 errorIconAriaLabel: restProps.errorIconAriaLabel,\n });\n\n const filter = (\n <Filter\n clearAriaLabel={filteringClearAriaLabel}\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 triggerProps={getTriggerProps(disabled, autoFocus)}\n selectedOption={null}\n isOpen={isOpen}\n {...formFieldContext}\n controlId={controlId}\n ariaLabelledby={joinStrings(formFieldContext.ariaLabelledby, multiSelectAriaLabelId)}\n />\n );\n\n const menuProps: MenuProps = {\n ...getMenuProps(),\n onLoadMore: handleLoadMore,\n ariaLabelledby: joinStrings(multiSelectAriaLabelId, 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 {...getDropdownProps()}\n open={isOpen}\n trigger={trigger}\n header={filter}\n onMouseDown={handleMouseDown}\n footer={dropdownStatus.isSticky ? <DropdownFooter content={isOpen ? dropdownStatus.content : null} /> : null}\n expandToViewport={expandToViewport}\n >\n <ListComponent\n listBottom={\n !dropdownStatus.isSticky ? <DropdownFooter content={isOpen ? dropdownStatus.content : null} /> : null\n }\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 highlightType={highlightType}\n />\n </Dropdown>\n {showTokens && (\n <InternalTokenGroup\n alignment=\"horizontal\"\n limit={tokenLimit}\n items={tokens}\n onDismiss={handleTokenDismiss}\n i18nStrings={tokenGroupI18nStrings}\n />\n )}\n <ScreenreaderOnly id={multiSelectAriaLabelId}>{ariaLabel}</ScreenreaderOnly>\n </div>\n );\n }\n);\n\nexport default InternalMultiselect;\n"]}
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["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 InternalTokenGroup from '../token-group/internal';\nimport { TokenGroupProps } from '../token-group/interfaces';\n\nimport { MultiselectProps } from './interfaces';\nimport styles from './styles.css.js';\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\nimport { joinStrings } from '../internal/utils/strings';\n\ntype InternalMultiselectProps = MultiselectProps & InternalBaseComponentProps;\n\nconst InternalMultiselect = React.forwardRef(\n (\n {\n options = [],\n filteringType = 'none',\n filteringPlaceholder,\n filteringAriaLabel,\n filteringClearAriaLabel,\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 autoFocus,\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 multiSelectAriaLabelId = useUniqueId('multiselect-arialabel-');\n\n const footerId = useUniqueId('footer');\n\n const scrollToIndex = useRef<SelectListProps.SelectListRef>(null);\n const {\n isOpen,\n highlightType,\n highlightedOption,\n highlightedIndex,\n getTriggerProps,\n getDropdownProps,\n getFilterProps,\n getMenuProps,\n getOptionProps,\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 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 errorIconAriaLabel: restProps.errorIconAriaLabel,\n });\n\n const filter = (\n <Filter\n clearAriaLabel={filteringClearAriaLabel}\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 triggerProps={getTriggerProps(disabled, autoFocus)}\n selectedOption={null}\n isOpen={isOpen}\n {...formFieldContext}\n controlId={controlId}\n ariaLabelledby={joinStrings(formFieldContext.ariaLabelledby, multiSelectAriaLabelId)}\n />\n );\n\n const menuProps: MenuProps = {\n ...getMenuProps(),\n onLoadMore: handleLoadMore,\n ariaLabelledby: joinStrings(multiSelectAriaLabelId, controlId),\n ariaDescribedby: dropdownStatus.content ? footerId : undefined,\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 {...getDropdownProps()}\n open={isOpen}\n trigger={trigger}\n header={filter}\n onMouseDown={handleMouseDown}\n footer={\n dropdownStatus.isSticky ? (\n <DropdownFooter content={isOpen ? dropdownStatus.content : null} id={footerId} />\n ) : null\n }\n expandToViewport={expandToViewport}\n >\n <ListComponent\n listBottom={\n !dropdownStatus.isSticky ? (\n <DropdownFooter content={isOpen ? dropdownStatus.content : null} id={footerId} />\n ) : null\n }\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 highlightType={highlightType}\n />\n </Dropdown>\n {showTokens && (\n <InternalTokenGroup\n alignment=\"horizontal\"\n limit={tokenLimit}\n items={tokens}\n onDismiss={handleTokenDismiss}\n i18nStrings={tokenGroupI18nStrings}\n />\n )}\n <ScreenreaderOnly id={multiSelectAriaLabelId}>{ariaLabel}</ScreenreaderOnly>\n </div>\n );\n }\n);\n\nexport default InternalMultiselect;\n"]}
|