@cloudscape-design/components 3.0.733 → 3.0.735
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/file-upload/internal.d.ts.map +1 -1
- package/file-upload/internal.js +15 -8
- package/file-upload/internal.js.map +1 -1
- package/internal/components/focus-lock/utils.d.ts +1 -0
- package/internal/components/focus-lock/utils.d.ts.map +1 -1
- package/internal/components/focus-lock/utils.js +3 -0
- package/internal/components/focus-lock/utils.js.map +1 -1
- package/internal/components/token-list/index.d.ts +1 -1
- package/internal/components/token-list/index.d.ts.map +1 -1
- package/internal/components/token-list/index.js +3 -5
- package/internal/components/token-list/index.js.map +1 -1
- package/internal/components/token-list/interfaces.d.ts +0 -1
- package/internal/components/token-list/interfaces.d.ts.map +1 -1
- package/internal/components/token-list/interfaces.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/hooks/use-list-focus-controller.d.ts +11 -0
- package/internal/hooks/use-list-focus-controller.d.ts.map +1 -0
- package/internal/hooks/use-list-focus-controller.js +62 -0
- package/internal/hooks/use-list-focus-controller.js.map +1 -0
- package/internal/manifest.json +1 -1
- package/internal/plugins/controllers/app-layout-widget.js +1 -1
- package/internal/plugins/controllers/app-layout-widget.js.map +1 -1
- package/package.json +1 -1
- package/property-filter/filtering-token/index.d.ts.map +1 -1
- package/property-filter/filtering-token/index.js +20 -6
- package/property-filter/filtering-token/index.js.map +1 -1
- package/property-filter/internal.d.ts.map +1 -1
- package/property-filter/internal.js +16 -6
- package/property-filter/internal.js.map +1 -1
- package/property-filter/token-editor.d.ts.map +1 -1
- package/property-filter/token-editor.js +18 -3
- package/property-filter/token-editor.js.map +1 -1
- package/space-between/internal.d.ts +3 -4
- package/space-between/internal.d.ts.map +1 -1
- package/space-between/internal.js +9 -6
- package/space-between/internal.js.map +1 -1
- package/table/body-cell/styles.css.js +47 -47
- package/table/body-cell/styles.scoped.css +394 -311
- package/table/body-cell/styles.selectors.js +47 -47
- package/table/header-cell/styles.css.js +26 -26
- package/table/header-cell/styles.scoped.css +72 -72
- package/table/header-cell/styles.selectors.js +26 -26
- package/token-group/internal.d.ts.map +1 -1
- package/token-group/internal.js +17 -6
- package/token-group/internal.js.map +1 -1
- package/internal/components/token-list/token-focus-controller.d.ts +0 -5
- package/internal/components/token-list/token-focus-controller.d.ts.map +0 -1
- package/internal/components/token-list/token-focus-controller.js +0 -43
- package/internal/components/token-list/token-focus-controller.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/file-upload/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAM9D,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAOnD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/file-upload/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAM9D,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAOnD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAUlF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;;AAQ/C,wBAAoD"}
|
package/file-upload/internal.js
CHANGED
|
@@ -11,6 +11,7 @@ import { getBaseProps } from '../internal/base-component';
|
|
|
11
11
|
import TokenList from '../internal/components/token-list';
|
|
12
12
|
import { fireNonCancelableEvent } from '../internal/events';
|
|
13
13
|
import checkControlled from '../internal/hooks/check-controlled';
|
|
14
|
+
import { useListFocusController } from '../internal/hooks/use-list-focus-controller';
|
|
14
15
|
import { useMergeRefs } from '../internal/hooks/use-merge-refs';
|
|
15
16
|
import { useUniqueId } from '../internal/hooks/use-unique-id';
|
|
16
17
|
import { joinStrings } from '../internal/utils/strings';
|
|
@@ -19,11 +20,22 @@ import { Token } from '../token-group/token';
|
|
|
19
20
|
import { Dropzone, useDropzoneVisible } from './dropzone';
|
|
20
21
|
import FileInput from './file-input';
|
|
21
22
|
import { FileOption } from './file-option';
|
|
23
|
+
import tokenListStyles from '../internal/components/token-list/styles.css.js';
|
|
24
|
+
import fileInputStyles from './file-input/styles.css.js';
|
|
22
25
|
import styles from './styles.css.js';
|
|
23
26
|
export default React.forwardRef(InternalFileUpload);
|
|
24
27
|
function InternalFileUpload(_a, externalRef) {
|
|
25
28
|
var _b;
|
|
26
29
|
var { accept, ariaRequired, multiple = false, onChange, value, tokenLimit, showFileSize, showFileLastModified, showFileThumbnail, i18nStrings, __internalRootRef = null, constraintText, errorText, warningText, fileErrors, fileWarnings } = _a, restProps = __rest(_a, ["accept", "ariaRequired", "multiple", "onChange", "value", "tokenLimit", "showFileSize", "showFileLastModified", "showFileThumbnail", "i18nStrings", "__internalRootRef", "constraintText", "errorText", "warningText", "fileErrors", "fileWarnings"]);
|
|
30
|
+
const [nextFocusIndex, setNextFocusIndex] = useState(null);
|
|
31
|
+
const onFocusMoved = () => setNextFocusIndex(null);
|
|
32
|
+
const tokenListRef = useListFocusController({
|
|
33
|
+
nextFocusIndex,
|
|
34
|
+
onFocusMoved,
|
|
35
|
+
listItemSelector: `.${tokenListStyles['list-item']}`,
|
|
36
|
+
showMoreSelector: `.${tokenListStyles.toggle}`,
|
|
37
|
+
outsideSelector: `.${fileInputStyles['upload-input']}`,
|
|
38
|
+
});
|
|
27
39
|
const baseProps = getBaseProps(restProps);
|
|
28
40
|
const metadata = { showFileSize, showFileLastModified, showFileThumbnail };
|
|
29
41
|
const errorId = useUniqueId('error-');
|
|
@@ -31,7 +43,6 @@ function InternalFileUpload(_a, externalRef) {
|
|
|
31
43
|
const constraintTextId = useUniqueId('constraint-text-');
|
|
32
44
|
const fileInputRef = useRef(null);
|
|
33
45
|
const ref = useMergeRefs(fileInputRef, externalRef);
|
|
34
|
-
const [removedFileIndex, setRemovedFileIndex] = useState(null);
|
|
35
46
|
checkControlled('FileUpload', 'value', value, 'onChange', onChange);
|
|
36
47
|
if (!multiple && value.length > 1) {
|
|
37
48
|
warnOnce('FileUpload', 'Value must be an array of size 0 or 1 when `multiple=false`.');
|
|
@@ -41,13 +52,9 @@ function InternalFileUpload(_a, externalRef) {
|
|
|
41
52
|
fireNonCancelableEvent(onChange, { value: newValue });
|
|
42
53
|
};
|
|
43
54
|
const onFileRemove = (removeFileIndex) => {
|
|
44
|
-
var _a;
|
|
45
55
|
const newValue = value.filter((_, fileIndex) => fileIndex !== removeFileIndex);
|
|
46
56
|
fireNonCancelableEvent(onChange, { value: newValue });
|
|
47
|
-
|
|
48
|
-
if (value.length === 1) {
|
|
49
|
-
(_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
50
|
-
}
|
|
57
|
+
setNextFocusIndex(removeFileIndex);
|
|
51
58
|
};
|
|
52
59
|
const isDropzoneVisible = useDropzoneVisible(multiple);
|
|
53
60
|
const showWarning = warningText && !errorText;
|
|
@@ -58,7 +65,7 @@ function InternalFileUpload(_a, externalRef) {
|
|
|
58
65
|
const ariaDescribedBy = joinStrings((_b = restProps.ariaDescribedby) !== null && _b !== void 0 ? _b : formFieldContext.ariaDescribedby, errorText ? errorId : undefined, showWarning ? warningId : undefined, constraintText ? constraintTextId : undefined);
|
|
59
66
|
const hasError = Boolean(errorText || (fileErrors === null || fileErrors === void 0 ? void 0 : fileErrors.filter(Boolean).length));
|
|
60
67
|
const invalid = restProps.invalid || formFieldContext.invalid || hasError;
|
|
61
|
-
return (React.createElement(InternalSpaceBetween, Object.assign({}, baseProps, { size: "xs", className: clsx(baseProps.className, styles.root), __internalRootRef: __internalRootRef }),
|
|
68
|
+
return (React.createElement(InternalSpaceBetween, Object.assign({}, baseProps, { size: "xs", className: clsx(baseProps.className, styles.root), __internalRootRef: __internalRootRef, ref: tokenListRef }),
|
|
62
69
|
React.createElement(InternalBox, null,
|
|
63
70
|
isDropzoneVisible ? (React.createElement(Dropzone, { onChange: handleFilesChange }, i18nStrings.dropzoneText(multiple))) : (React.createElement(FileInput, Object.assign({ ref: ref, accept: accept, ariaRequired: ariaRequired, multiple: multiple, onChange: handleFilesChange, value: value }, restProps, { ariaDescribedby: ariaDescribedBy, invalid: invalid }), i18nStrings.uploadButtonText(multiple))),
|
|
64
71
|
(constraintText || errorText || warningText) && (React.createElement("div", { className: styles.hints },
|
|
@@ -73,6 +80,6 @@ function InternalFileUpload(_a, externalRef) {
|
|
|
73
80
|
React.createElement(FileOption, { file: file, metadata: metadata, i18nStrings: i18nStrings }))), limit: tokenLimit, i18nStrings: {
|
|
74
81
|
limitShowFewer: i18nStrings.limitShowFewer,
|
|
75
82
|
limitShowMore: i18nStrings.limitShowMore,
|
|
76
|
-
}
|
|
83
|
+
} }))) : null));
|
|
77
84
|
}
|
|
78
85
|
//# sourceMappingURL=internal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/file-upload/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { ForwardedRef, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalBox from '../box/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { useFormFieldContext } from '../contexts/form-field';\nimport { ConstraintText, FormFieldError, FormFieldWarning } from '../form-field/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport TokenList from '../internal/components/token-list';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { joinStrings } from '../internal/utils/strings';\nimport InternalSpaceBetween from '../space-between/internal';\nimport { Token } from '../token-group/token';\nimport { Dropzone, useDropzoneVisible } from './dropzone';\nimport FileInput from './file-input';\nimport { FileOption } from './file-option';\nimport { FileUploadProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ntype InternalFileUploadProps = FileUploadProps & InternalBaseComponentProps;\n\nexport default React.forwardRef(InternalFileUpload);\n\nfunction InternalFileUpload(\n {\n accept,\n ariaRequired,\n multiple = false,\n onChange,\n value,\n tokenLimit,\n showFileSize,\n showFileLastModified,\n showFileThumbnail,\n i18nStrings,\n __internalRootRef = null,\n constraintText,\n errorText,\n warningText,\n fileErrors,\n fileWarnings,\n ...restProps\n }: InternalFileUploadProps,\n externalRef: ForwardedRef<ButtonProps.Ref>\n) {\n const baseProps = getBaseProps(restProps);\n const metadata = { showFileSize, showFileLastModified, showFileThumbnail };\n\n const errorId = useUniqueId('error-');\n const warningId = useUniqueId('warning-');\n const constraintTextId = useUniqueId('constraint-text-');\n\n const fileInputRef = useRef<ButtonProps.Ref>(null);\n const ref = useMergeRefs(fileInputRef, externalRef);\n\n const [removedFileIndex, setRemovedFileIndex] = useState<null | number>(null);\n\n checkControlled('FileUpload', 'value', value, 'onChange', onChange);\n\n if (!multiple && value.length > 1) {\n warnOnce('FileUpload', 'Value must be an array of size 0 or 1 when `multiple=false`.');\n }\n\n const handleFilesChange = (newFiles: File[]) => {\n const newValue = multiple ? [...value, ...newFiles] : newFiles[0] ? newFiles : [...value];\n fireNonCancelableEvent(onChange, { value: newValue });\n };\n\n const onFileRemove = (removeFileIndex: number) => {\n const newValue = value.filter((_, fileIndex) => fileIndex !== removeFileIndex);\n fireNonCancelableEvent(onChange, { value: newValue });\n setRemovedFileIndex(removeFileIndex);\n if (value.length === 1) {\n fileInputRef.current?.focus();\n }\n };\n\n const isDropzoneVisible = useDropzoneVisible(multiple);\n\n const showWarning = warningText && !errorText;\n\n if (warningText && errorText) {\n warnOnce('FileUpload', 'Both `errorText` and `warningText` exist. `warningText` will not be shown.');\n }\n\n const formFieldContext = useFormFieldContext(restProps);\n const ariaDescribedBy = joinStrings(\n restProps.ariaDescribedby ?? formFieldContext.ariaDescribedby,\n errorText ? errorId : undefined,\n showWarning ? warningId : undefined,\n constraintText ? constraintTextId : undefined\n );\n\n const hasError = Boolean(errorText || fileErrors?.filter(Boolean).length);\n const invalid = restProps.invalid || formFieldContext.invalid || hasError;\n\n return (\n <InternalSpaceBetween\n {...baseProps}\n size=\"xs\"\n className={clsx(baseProps.className, styles.root)}\n __internalRootRef={__internalRootRef}\n >\n <InternalBox>\n {isDropzoneVisible ? (\n <Dropzone onChange={handleFilesChange}>{i18nStrings.dropzoneText(multiple)}</Dropzone>\n ) : (\n <FileInput\n ref={ref}\n accept={accept}\n ariaRequired={ariaRequired}\n multiple={multiple}\n onChange={handleFilesChange}\n value={value}\n {...restProps}\n ariaDescribedby={ariaDescribedBy}\n invalid={invalid}\n >\n {i18nStrings.uploadButtonText(multiple)}\n </FileInput>\n )}\n\n {(constraintText || errorText || warningText) && (\n <div className={styles.hints}>\n {errorText && (\n <FormFieldError id={errorId} errorIconAriaLabel={i18nStrings?.errorIconAriaLabel}>\n {errorText}\n </FormFieldError>\n )}\n {showWarning && (\n <FormFieldWarning id={warningId} warningIconAriaLabel={i18nStrings?.warningIconAriaLabel}>\n {warningText}\n </FormFieldWarning>\n )}\n {constraintText && (\n <ConstraintText id={constraintTextId} hasValidationText={!!errorText || !!warningText}>\n {constraintText}\n </ConstraintText>\n )}\n </div>\n )}\n </InternalBox>\n\n {!multiple && value.length > 0 ? (\n <InternalBox>\n <Token\n ariaLabel={value[0].name}\n dismissLabel={i18nStrings.removeFileAriaLabel(0)}\n onDismiss={() => onFileRemove(0)}\n errorText={fileErrors?.[0]}\n warningText={fileWarnings?.[0]}\n errorIconAriaLabel={i18nStrings.errorIconAriaLabel}\n warningIconAriaLabel={i18nStrings.warningIconAriaLabel}\n data-index={0}\n >\n <FileOption file={value[0]} metadata={metadata} i18nStrings={i18nStrings} />\n </Token>\n </InternalBox>\n ) : null}\n\n {multiple && value.length > 0 ? (\n <InternalBox>\n <TokenList\n alignment=\"vertical\"\n items={value}\n renderItem={(file, fileIndex) => (\n <Token\n ariaLabel={file.name}\n dismissLabel={i18nStrings.removeFileAriaLabel(fileIndex)}\n onDismiss={() => onFileRemove(fileIndex)}\n errorText={fileErrors?.[fileIndex]}\n warningText={fileWarnings?.[fileIndex]}\n errorIconAriaLabel={i18nStrings.errorIconAriaLabel}\n warningIconAriaLabel={i18nStrings.warningIconAriaLabel}\n data-index={fileIndex}\n >\n <FileOption file={file} metadata={metadata} i18nStrings={i18nStrings} />\n </Token>\n )}\n limit={tokenLimit}\n i18nStrings={{\n limitShowFewer: i18nStrings.limitShowFewer,\n limitShowMore: i18nStrings.limitShowMore,\n }}\n moveFocusNextToIndex={removedFileIndex}\n />\n </InternalBox>\n ) : null}\n </InternalSpaceBetween>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/file-upload/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { ForwardedRef, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalBox from '../box/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { useFormFieldContext } from '../contexts/form-field';\nimport { ConstraintText, FormFieldError, FormFieldWarning } from '../form-field/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport TokenList from '../internal/components/token-list';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useListFocusController } from '../internal/hooks/use-list-focus-controller';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { joinStrings } from '../internal/utils/strings';\nimport InternalSpaceBetween from '../space-between/internal';\nimport { Token } from '../token-group/token';\nimport { Dropzone, useDropzoneVisible } from './dropzone';\nimport FileInput from './file-input';\nimport { FileOption } from './file-option';\nimport { FileUploadProps } from './interfaces';\n\nimport tokenListStyles from '../internal/components/token-list/styles.css.js';\nimport fileInputStyles from './file-input/styles.css.js';\nimport styles from './styles.css.js';\n\ntype InternalFileUploadProps = FileUploadProps & InternalBaseComponentProps;\n\nexport default React.forwardRef(InternalFileUpload);\n\nfunction InternalFileUpload(\n {\n accept,\n ariaRequired,\n multiple = false,\n onChange,\n value,\n tokenLimit,\n showFileSize,\n showFileLastModified,\n showFileThumbnail,\n i18nStrings,\n __internalRootRef = null,\n constraintText,\n errorText,\n warningText,\n fileErrors,\n fileWarnings,\n ...restProps\n }: InternalFileUploadProps,\n externalRef: ForwardedRef<ButtonProps.Ref>\n) {\n const [nextFocusIndex, setNextFocusIndex] = useState<null | number>(null);\n const onFocusMoved = () => setNextFocusIndex(null);\n const tokenListRef = useListFocusController({\n nextFocusIndex,\n onFocusMoved,\n listItemSelector: `.${tokenListStyles['list-item']}`,\n showMoreSelector: `.${tokenListStyles.toggle}`,\n outsideSelector: `.${fileInputStyles['upload-input']}`,\n });\n\n const baseProps = getBaseProps(restProps);\n const metadata = { showFileSize, showFileLastModified, showFileThumbnail };\n\n const errorId = useUniqueId('error-');\n const warningId = useUniqueId('warning-');\n const constraintTextId = useUniqueId('constraint-text-');\n\n const fileInputRef = useRef<ButtonProps.Ref>(null);\n const ref = useMergeRefs(fileInputRef, externalRef);\n\n checkControlled('FileUpload', 'value', value, 'onChange', onChange);\n\n if (!multiple && value.length > 1) {\n warnOnce('FileUpload', 'Value must be an array of size 0 or 1 when `multiple=false`.');\n }\n\n const handleFilesChange = (newFiles: File[]) => {\n const newValue = multiple ? [...value, ...newFiles] : newFiles[0] ? newFiles : [...value];\n fireNonCancelableEvent(onChange, { value: newValue });\n };\n\n const onFileRemove = (removeFileIndex: number) => {\n const newValue = value.filter((_, fileIndex) => fileIndex !== removeFileIndex);\n fireNonCancelableEvent(onChange, { value: newValue });\n setNextFocusIndex(removeFileIndex);\n };\n\n const isDropzoneVisible = useDropzoneVisible(multiple);\n\n const showWarning = warningText && !errorText;\n\n if (warningText && errorText) {\n warnOnce('FileUpload', 'Both `errorText` and `warningText` exist. `warningText` will not be shown.');\n }\n\n const formFieldContext = useFormFieldContext(restProps);\n const ariaDescribedBy = joinStrings(\n restProps.ariaDescribedby ?? formFieldContext.ariaDescribedby,\n errorText ? errorId : undefined,\n showWarning ? warningId : undefined,\n constraintText ? constraintTextId : undefined\n );\n\n const hasError = Boolean(errorText || fileErrors?.filter(Boolean).length);\n const invalid = restProps.invalid || formFieldContext.invalid || hasError;\n\n return (\n <InternalSpaceBetween\n {...baseProps}\n size=\"xs\"\n className={clsx(baseProps.className, styles.root)}\n __internalRootRef={__internalRootRef}\n ref={tokenListRef}\n >\n <InternalBox>\n {isDropzoneVisible ? (\n <Dropzone onChange={handleFilesChange}>{i18nStrings.dropzoneText(multiple)}</Dropzone>\n ) : (\n <FileInput\n ref={ref}\n accept={accept}\n ariaRequired={ariaRequired}\n multiple={multiple}\n onChange={handleFilesChange}\n value={value}\n {...restProps}\n ariaDescribedby={ariaDescribedBy}\n invalid={invalid}\n >\n {i18nStrings.uploadButtonText(multiple)}\n </FileInput>\n )}\n\n {(constraintText || errorText || warningText) && (\n <div className={styles.hints}>\n {errorText && (\n <FormFieldError id={errorId} errorIconAriaLabel={i18nStrings?.errorIconAriaLabel}>\n {errorText}\n </FormFieldError>\n )}\n {showWarning && (\n <FormFieldWarning id={warningId} warningIconAriaLabel={i18nStrings?.warningIconAriaLabel}>\n {warningText}\n </FormFieldWarning>\n )}\n {constraintText && (\n <ConstraintText id={constraintTextId} hasValidationText={!!errorText || !!warningText}>\n {constraintText}\n </ConstraintText>\n )}\n </div>\n )}\n </InternalBox>\n\n {!multiple && value.length > 0 ? (\n <InternalBox>\n <Token\n ariaLabel={value[0].name}\n dismissLabel={i18nStrings.removeFileAriaLabel(0)}\n onDismiss={() => onFileRemove(0)}\n errorText={fileErrors?.[0]}\n warningText={fileWarnings?.[0]}\n errorIconAriaLabel={i18nStrings.errorIconAriaLabel}\n warningIconAriaLabel={i18nStrings.warningIconAriaLabel}\n data-index={0}\n >\n <FileOption file={value[0]} metadata={metadata} i18nStrings={i18nStrings} />\n </Token>\n </InternalBox>\n ) : null}\n\n {multiple && value.length > 0 ? (\n <InternalBox>\n <TokenList\n alignment=\"vertical\"\n items={value}\n renderItem={(file, fileIndex) => (\n <Token\n ariaLabel={file.name}\n dismissLabel={i18nStrings.removeFileAriaLabel(fileIndex)}\n onDismiss={() => onFileRemove(fileIndex)}\n errorText={fileErrors?.[fileIndex]}\n warningText={fileWarnings?.[fileIndex]}\n errorIconAriaLabel={i18nStrings.errorIconAriaLabel}\n warningIconAriaLabel={i18nStrings.warningIconAriaLabel}\n data-index={fileIndex}\n >\n <FileOption file={file} metadata={metadata} i18nStrings={i18nStrings} />\n </Token>\n )}\n limit={tokenLimit}\n i18nStrings={{\n limitShowFewer: i18nStrings.limitShowFewer,\n limitShowMore: i18nStrings.limitShowMore,\n }}\n />\n </InternalBox>\n ) : null}\n </InternalSpaceBetween>\n );\n}\n"]}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
export declare function isFocusable(element: HTMLElement): boolean;
|
|
1
2
|
export declare function getAllFocusables(container: HTMLElement): HTMLElement[];
|
|
2
3
|
export declare function getFocusables(container: HTMLElement): HTMLElement[];
|
|
3
4
|
export declare function getFirstFocusable(container: HTMLElement): null | HTMLElement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/focus-lock/utils.ts"],"names":[],"mappings":"AA2BA,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,WAAW,GAAG,WAAW,EAAE,CAEtE;AAED,wBAAgB,aAAa,CAAC,SAAS,EAAE,WAAW,GAAG,WAAW,EAAE,CAEnE;AAED,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI,GAAG,WAAW,CAG5E;AAED,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI,GAAG,WAAW,CAG3E"}
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/focus-lock/utils.ts"],"names":[],"mappings":"AA2BA,wBAAgB,WAAW,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO,CAEzD;AAED,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,WAAW,GAAG,WAAW,EAAE,CAEtE;AAED,wBAAgB,aAAa,CAAC,SAAS,EAAE,WAAW,GAAG,WAAW,EAAE,CAEnE;AAED,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI,GAAG,WAAW,CAG5E;AAED,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI,GAAG,WAAW,CAG3E"}
|
|
@@ -19,6 +19,9 @@ const tabbables = [
|
|
|
19
19
|
'[contenteditable]',
|
|
20
20
|
'[autofocus]',
|
|
21
21
|
].join(',');
|
|
22
|
+
export function isFocusable(element) {
|
|
23
|
+
return element.matches(tabbables);
|
|
24
|
+
}
|
|
22
25
|
export function getAllFocusables(container) {
|
|
23
26
|
return Array.prototype.slice.call(container.querySelectorAll(tabbables));
|
|
24
27
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../src/internal/components/focus-lock/utils.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,aAAa;AACb,+GAA+G;AAC/G,MAAM,SAAS,GAAG;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,kBAAkB;IAClB,eAAe;IAEf,SAAS;IACT,YAAY;IAEZ,SAAS;IACT,QAAQ;IACR,QAAQ;IACR,OAAO;IAEP,iBAAiB;IACjB,iBAAiB;IAEjB,YAAY;IACZ,mBAAmB;IACnB,aAAa;CACd,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ,MAAM,UAAU,gBAAgB,CAAC,SAAsB;IACrD,OAAO,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,CAAC;AAC3E,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,SAAsB;IAClD,OAAO,gBAAgB,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,OAAoB,EAAE,EAAE,CAAC,OAAO,CAAC,QAAQ,KAAK,CAAC,CAAC,CAAC,CAAC;AAC/F,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,SAAsB;;IACtD,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAC5C,OAAO,MAAA,UAAU,CAAC,CAAC,CAAC,mCAAI,IAAI,CAAC;AAC/B,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,SAAsB;;IACrD,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAC5C,OAAO,MAAA,UAAU,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,mCAAI,IAAI,CAAC;AACnD,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n// Credits to\n// https://github.com/theKashey/focus-lock/blob/33f8b4bd9675d2605b15e2e4015b77fe35fbd6d0/src/utils/tabbables.ts\nconst tabbables = [\n 'button:enabled',\n 'select:enabled',\n 'textarea:enabled',\n 'input:enabled',\n\n 'a[href]',\n 'area[href]',\n\n 'summary',\n 'iframe',\n 'object',\n 'embed',\n\n 'audio[controls]',\n 'video[controls]',\n\n '[tabindex]',\n '[contenteditable]',\n '[autofocus]',\n].join(',');\n\nexport function getAllFocusables(container: HTMLElement): HTMLElement[] {\n return Array.prototype.slice.call(container.querySelectorAll(tabbables));\n}\n\nexport function getFocusables(container: HTMLElement): HTMLElement[] {\n return getAllFocusables(container).filter((element: HTMLElement) => element.tabIndex !== -1);\n}\n\nexport function getFirstFocusable(container: HTMLElement): null | HTMLElement {\n const focusables = getFocusables(container);\n return focusables[0] ?? null;\n}\n\nexport function getLastFocusable(container: HTMLElement): null | HTMLElement {\n const focusables = getFocusables(container);\n return focusables[focusables.length - 1] ?? null;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../src/internal/components/focus-lock/utils.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,aAAa;AACb,+GAA+G;AAC/G,MAAM,SAAS,GAAG;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,kBAAkB;IAClB,eAAe;IAEf,SAAS;IACT,YAAY;IAEZ,SAAS;IACT,QAAQ;IACR,QAAQ;IACR,OAAO;IAEP,iBAAiB;IACjB,iBAAiB;IAEjB,YAAY;IACZ,mBAAmB;IACnB,aAAa;CACd,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ,MAAM,UAAU,WAAW,CAAC,OAAoB;IAC9C,OAAO,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;AACpC,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,SAAsB;IACrD,OAAO,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,CAAC;AAC3E,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,SAAsB;IAClD,OAAO,gBAAgB,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,OAAoB,EAAE,EAAE,CAAC,OAAO,CAAC,QAAQ,KAAK,CAAC,CAAC,CAAC,CAAC;AAC/F,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,SAAsB;;IACtD,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAC5C,OAAO,MAAA,UAAU,CAAC,CAAC,CAAC,mCAAI,IAAI,CAAC;AAC/B,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,SAAsB;;IACrD,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAC5C,OAAO,MAAA,UAAU,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,mCAAI,IAAI,CAAC;AACnD,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n// Credits to\n// https://github.com/theKashey/focus-lock/blob/33f8b4bd9675d2605b15e2e4015b77fe35fbd6d0/src/utils/tabbables.ts\nconst tabbables = [\n 'button:enabled',\n 'select:enabled',\n 'textarea:enabled',\n 'input:enabled',\n\n 'a[href]',\n 'area[href]',\n\n 'summary',\n 'iframe',\n 'object',\n 'embed',\n\n 'audio[controls]',\n 'video[controls]',\n\n '[tabindex]',\n '[contenteditable]',\n '[autofocus]',\n].join(',');\n\nexport function isFocusable(element: HTMLElement): boolean {\n return element.matches(tabbables);\n}\n\nexport function getAllFocusables(container: HTMLElement): HTMLElement[] {\n return Array.prototype.slice.call(container.querySelectorAll(tabbables));\n}\n\nexport function getFocusables(container: HTMLElement): HTMLElement[] {\n return getAllFocusables(container).filter((element: HTMLElement) => element.tabIndex !== -1);\n}\n\nexport function getFirstFocusable(container: HTMLElement): null | HTMLElement {\n const focusables = getFocusables(container);\n return focusables[0] ?? null;\n}\n\nexport function getLastFocusable(container: HTMLElement): null | HTMLElement {\n const focusables = getFocusables(container);\n return focusables[focusables.length - 1] ?? null;\n}\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { TokenListProps } from './interfaces';
|
|
3
3
|
export { TokenListProps };
|
|
4
|
-
export default function TokenList<Item>({ items, alignment, renderItem, limit, after, i18nStrings, limitShowFewerAriaLabel, limitShowMoreAriaLabel,
|
|
4
|
+
export default function TokenList<Item>({ items, alignment, renderItem, limit, after, i18nStrings, limitShowFewerAriaLabel, limitShowMoreAriaLabel, onExpandedClick, }: TokenListProps<Item>): JSX.Element;
|
|
5
5
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/token-list/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/token-list/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAK9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,IAAI,EAAE,EACtC,KAAK,EACL,SAAS,EACT,UAAU,EACV,KAAK,EACL,KAAK,EACL,WAAW,EACX,uBAAuB,EACvB,sBAAsB,EACtB,eAAiC,GAClC,EAAE,cAAc,CAAC,IAAI,CAAC,eAwEtB"}
|
|
@@ -3,11 +3,9 @@
|
|
|
3
3
|
import React, { useState } from 'react';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import { useUniqueId } from '../../hooks/use-unique-id';
|
|
6
|
-
import { useTokenFocusController } from './token-focus-controller';
|
|
7
6
|
import TokenLimitToggle from './token-limit-toggle';
|
|
8
7
|
import styles from './styles.css.js';
|
|
9
|
-
export default function TokenList({ items, alignment, renderItem, limit, after, i18nStrings, limitShowFewerAriaLabel, limitShowMoreAriaLabel,
|
|
10
|
-
const tokenListRef = useTokenFocusController({ moveFocusNextToIndex: moveFocusNextToIndex });
|
|
8
|
+
export default function TokenList({ items, alignment, renderItem, limit, after, i18nStrings, limitShowFewerAriaLabel, limitShowMoreAriaLabel, onExpandedClick = () => undefined, }) {
|
|
11
9
|
const controlId = useUniqueId();
|
|
12
10
|
const [expanded, setExpanded] = useState(false);
|
|
13
11
|
const hasItems = items.length > 0;
|
|
@@ -21,13 +19,13 @@ export default function TokenList({ items, alignment, renderItem, limit, after,
|
|
|
21
19
|
onExpandedClick(isExpanded);
|
|
22
20
|
} }))) : null;
|
|
23
21
|
if (alignment === 'inline') {
|
|
24
|
-
return (React.createElement("div", {
|
|
22
|
+
return (React.createElement("div", { className: clsx(styles.root, styles.horizontal) },
|
|
25
23
|
hasItems && (React.createElement("ul", { id: controlId, className: styles.list }, visibleItems.map((item, itemIndex) => (React.createElement("li", { key: itemIndex, className: styles['list-item'], "aria-setsize": items.length, "aria-posinset": itemIndex + 1 }, renderItem(item, itemIndex)))))),
|
|
26
24
|
toggle,
|
|
27
25
|
after && React.createElement("div", { className: styles.separator }),
|
|
28
26
|
after));
|
|
29
27
|
}
|
|
30
|
-
return (React.createElement("div", {
|
|
28
|
+
return (React.createElement("div", { className: clsx(styles.root, styles.vertical) },
|
|
31
29
|
hasVisibleItems && (React.createElement("ul", { id: controlId, className: clsx(styles.list, styles[alignment]) }, visibleItems.map((item, itemIndex) => (React.createElement("li", { key: itemIndex, className: styles['list-item'], "aria-setsize": items.length, "aria-posinset": itemIndex + 1 }, renderItem(item, itemIndex)))))),
|
|
32
30
|
toggle,
|
|
33
31
|
after));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/token-list/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/token-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\n\nimport React, { useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useUniqueId } from '../../hooks/use-unique-id';\nimport { TokenListProps } from './interfaces';\nimport TokenLimitToggle from './token-limit-toggle';\n\nimport styles from './styles.css.js';\n\nexport { TokenListProps };\n\nexport default function TokenList<Item>({\n items,\n alignment,\n renderItem,\n limit,\n after,\n i18nStrings,\n limitShowFewerAriaLabel,\n limitShowMoreAriaLabel,\n onExpandedClick = () => undefined,\n}: TokenListProps<Item>) {\n const controlId = useUniqueId();\n\n const [expanded, setExpanded] = useState(false);\n const hasItems = items.length > 0;\n const hasHiddenItems = hasItems && limit !== undefined && items.length > limit;\n const visibleItems = hasHiddenItems && !expanded ? items.slice(0, limit) : items;\n const hasVisibleItems = visibleItems.length > 0;\n\n const toggle = hasHiddenItems ? (\n <div className={styles[`toggle-container-${alignment}`]}>\n <TokenLimitToggle\n controlId={hasVisibleItems ? controlId : undefined}\n allHidden={limit === 0}\n expanded={expanded}\n numberOfHiddenOptions={items.length - visibleItems.length}\n i18nStrings={i18nStrings}\n limitShowFewerAriaLabel={limitShowFewerAriaLabel}\n limitShowMoreAriaLabel={limitShowMoreAriaLabel}\n onClick={() => {\n const isExpanded = !expanded;\n setExpanded(isExpanded);\n onExpandedClick(isExpanded);\n }}\n />\n </div>\n ) : null;\n\n if (alignment === 'inline') {\n return (\n <div className={clsx(styles.root, styles.horizontal)}>\n {hasItems && (\n <ul id={controlId} className={styles.list}>\n {visibleItems.map((item, itemIndex) => (\n <li\n key={itemIndex}\n className={styles['list-item']}\n aria-setsize={items.length}\n aria-posinset={itemIndex + 1}\n >\n {renderItem(item, itemIndex)}\n </li>\n ))}\n </ul>\n )}\n {toggle}\n {after && <div className={styles.separator} />}\n {after}\n </div>\n );\n }\n\n return (\n <div className={clsx(styles.root, styles.vertical)}>\n {hasVisibleItems && (\n <ul id={controlId} className={clsx(styles.list, styles[alignment])}>\n {visibleItems.map((item, itemIndex) => (\n <li\n key={itemIndex}\n className={styles['list-item']}\n aria-setsize={items.length}\n aria-posinset={itemIndex + 1}\n >\n {renderItem(item, itemIndex)}\n </li>\n ))}\n </ul>\n )}\n {toggle}\n {after}\n </div>\n );\n}\n"]}
|
|
@@ -6,7 +6,6 @@ export interface TokenListProps<Item> {
|
|
|
6
6
|
after?: React.ReactNode;
|
|
7
7
|
renderItem: (item: Item, itemIndex: number) => React.ReactNode;
|
|
8
8
|
i18nStrings?: I18nStrings;
|
|
9
|
-
moveFocusNextToIndex?: null | number;
|
|
10
9
|
onExpandedClick?: (isExpanded: boolean) => void;
|
|
11
10
|
limitShowFewerAriaLabel?: string;
|
|
12
11
|
limitShowMoreAriaLabel?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/token-list/interfaces.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,cAAc,CAAC,IAAI;IAClC,SAAS,EAAE,UAAU,GAAG,YAAY,GAAG,QAAQ,CAAC;IAChD,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC/D,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/token-list/interfaces.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,cAAc,CAAC,IAAI;IAClC,SAAS,EAAE,UAAU,GAAG,YAAY,GAAG,QAAQ,CAAC;IAChD,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC/D,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,MAAM,WAAW,WAAW;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/token-list/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 React from 'react';\n\nexport interface TokenListProps<Item> {\n alignment: 'vertical' | 'horizontal' | 'inline';\n items: readonly Item[];\n limit?: number;\n after?: React.ReactNode;\n renderItem: (item: Item, itemIndex: number) => React.ReactNode;\n i18nStrings?: I18nStrings;\n
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/token-list/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 React from 'react';\n\nexport interface TokenListProps<Item> {\n alignment: 'vertical' | 'horizontal' | 'inline';\n items: readonly Item[];\n limit?: number;\n after?: React.ReactNode;\n renderItem: (item: Item, itemIndex: number) => React.ReactNode;\n i18nStrings?: I18nStrings;\n onExpandedClick?: (isExpanded: boolean) => void;\n limitShowFewerAriaLabel?: string;\n limitShowMoreAriaLabel?: string;\n}\n\nexport interface I18nStrings {\n limitShowFewer?: string;\n limitShowMore?: string;\n}\n"]}
|
package/internal/environment.js
CHANGED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
interface UseListFocusControllerOptions {
|
|
3
|
+
nextFocusIndex: null | number;
|
|
4
|
+
onFocusMoved?: (target: HTMLElement) => void;
|
|
5
|
+
listItemSelector: string;
|
|
6
|
+
outsideSelector?: string;
|
|
7
|
+
showMoreSelector?: string;
|
|
8
|
+
}
|
|
9
|
+
export declare function useListFocusController({ nextFocusIndex, onFocusMoved, listItemSelector, outsideSelector, showMoreSelector, }: UseListFocusControllerOptions): import("react").RefObject<HTMLDivElement>;
|
|
10
|
+
export {};
|
|
11
|
+
//# sourceMappingURL=use-list-focus-controller.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-list-focus-controller.d.ts","sourceRoot":"","sources":["../../../../src/internal/hooks/use-list-focus-controller.tsx"],"names":[],"mappings":";AAOA,UAAU,6BAA6B;IACrC,cAAc,EAAE,IAAI,GAAG,MAAM,CAAC;IAC9B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC7C,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,wBAAgB,sBAAsB,CAAC,EACrC,cAAc,EACd,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,gBAAgB,GACjB,EAAE,6BAA6B,6CAuC/B"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
+
import { useEffect, useRef } from 'react';
|
|
4
|
+
import { getFirstFocusable, isFocusable } from '../components/focus-lock/utils.js';
|
|
5
|
+
export function useListFocusController({ nextFocusIndex, onFocusMoved, listItemSelector, outsideSelector, showMoreSelector, }) {
|
|
6
|
+
const tokenListRef = useRef(null);
|
|
7
|
+
useEffect(() => {
|
|
8
|
+
if (nextFocusIndex === undefined || nextFocusIndex === null || tokenListRef.current === null) {
|
|
9
|
+
return;
|
|
10
|
+
}
|
|
11
|
+
const tokenElements = tokenListRef.current.querySelectorAll(listItemSelector);
|
|
12
|
+
const outsideElement = outsideSelector ? selectElement(tokenListRef.current, outsideSelector) : null;
|
|
13
|
+
const toggleButton = showMoreSelector ? selectElement(tokenListRef.current, showMoreSelector) : null;
|
|
14
|
+
let closestPrevIndex = Number.NEGATIVE_INFINITY;
|
|
15
|
+
let closestNextIndex = Number.POSITIVE_INFINITY;
|
|
16
|
+
for (let activeIndex = 0; activeIndex < tokenElements.length; activeIndex++) {
|
|
17
|
+
if (activeIndex < nextFocusIndex) {
|
|
18
|
+
closestPrevIndex =
|
|
19
|
+
nextFocusIndex - activeIndex < nextFocusIndex - closestPrevIndex ? activeIndex : closestPrevIndex;
|
|
20
|
+
}
|
|
21
|
+
else {
|
|
22
|
+
closestNextIndex =
|
|
23
|
+
activeIndex - nextFocusIndex < closestNextIndex - nextFocusIndex ? activeIndex : closestNextIndex;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
const nextElement = tokenElements[closestNextIndex];
|
|
27
|
+
const prevElement = tokenElements[closestPrevIndex];
|
|
28
|
+
const focusTarget = getFirstEligible(nextElement, prevElement, toggleButton, outsideElement);
|
|
29
|
+
if (focusTarget) {
|
|
30
|
+
focusTarget.focus();
|
|
31
|
+
onFocusMoved === null || onFocusMoved === void 0 ? void 0 : onFocusMoved(focusTarget);
|
|
32
|
+
}
|
|
33
|
+
// Expecting onFocusMoved to be pure
|
|
34
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
35
|
+
}, [nextFocusIndex, listItemSelector, outsideSelector, showMoreSelector]);
|
|
36
|
+
return tokenListRef;
|
|
37
|
+
}
|
|
38
|
+
function getFirstEligible(...elements) {
|
|
39
|
+
for (const element of elements) {
|
|
40
|
+
const focusable = element ? getFocusableElement(element) : null;
|
|
41
|
+
if (focusable) {
|
|
42
|
+
return focusable;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
return null;
|
|
46
|
+
}
|
|
47
|
+
function getFocusableElement(element) {
|
|
48
|
+
if (!(element instanceof HTMLElement)) {
|
|
49
|
+
return null;
|
|
50
|
+
}
|
|
51
|
+
if (isFocusable(element)) {
|
|
52
|
+
return element;
|
|
53
|
+
}
|
|
54
|
+
return getFirstFocusable(element);
|
|
55
|
+
}
|
|
56
|
+
function selectElement(container, selector) {
|
|
57
|
+
if (container.matches(selector)) {
|
|
58
|
+
return container;
|
|
59
|
+
}
|
|
60
|
+
return container.querySelector(selector);
|
|
61
|
+
}
|
|
62
|
+
//# sourceMappingURL=use-list-focus-controller.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-list-focus-controller.js","sourceRoot":"","sources":["../../../../src/internal/hooks/use-list-focus-controller.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { useEffect, useRef } from 'react';\n\nimport { getFirstFocusable, isFocusable } from '../components/focus-lock/utils.js';\n\ninterface UseListFocusControllerOptions {\n nextFocusIndex: null | number;\n onFocusMoved?: (target: HTMLElement) => void;\n listItemSelector: string;\n outsideSelector?: string;\n showMoreSelector?: string;\n}\n\nexport function useListFocusController({\n nextFocusIndex,\n onFocusMoved,\n listItemSelector,\n outsideSelector,\n showMoreSelector,\n}: UseListFocusControllerOptions) {\n const tokenListRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (nextFocusIndex === undefined || nextFocusIndex === null || tokenListRef.current === null) {\n return;\n }\n\n const tokenElements = tokenListRef.current.querySelectorAll(listItemSelector);\n const outsideElement = outsideSelector ? selectElement(tokenListRef.current, outsideSelector) : null;\n const toggleButton = showMoreSelector ? selectElement(tokenListRef.current, showMoreSelector) : null;\n\n let closestPrevIndex = Number.NEGATIVE_INFINITY;\n let closestNextIndex = Number.POSITIVE_INFINITY;\n\n for (let activeIndex = 0; activeIndex < tokenElements.length; activeIndex++) {\n if (activeIndex < nextFocusIndex) {\n closestPrevIndex =\n nextFocusIndex - activeIndex < nextFocusIndex - closestPrevIndex ? activeIndex : closestPrevIndex;\n } else {\n closestNextIndex =\n activeIndex - nextFocusIndex < closestNextIndex - nextFocusIndex ? activeIndex : closestNextIndex;\n }\n }\n\n const nextElement = tokenElements[closestNextIndex];\n const prevElement = tokenElements[closestPrevIndex];\n const focusTarget = getFirstEligible(nextElement, prevElement, toggleButton, outsideElement);\n\n if (focusTarget) {\n focusTarget.focus();\n onFocusMoved?.(focusTarget);\n }\n\n // Expecting onFocusMoved to be pure\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [nextFocusIndex, listItemSelector, outsideSelector, showMoreSelector]);\n\n return tokenListRef;\n}\n\nfunction getFirstEligible(...elements: Array<null | Element>): null | HTMLElement {\n for (const element of elements) {\n const focusable = element ? getFocusableElement(element) : null;\n if (focusable) {\n return focusable;\n }\n }\n return null;\n}\n\nfunction getFocusableElement(element: Element): null | HTMLElement {\n if (!(element instanceof HTMLElement)) {\n return null;\n }\n if (isFocusable(element)) {\n return element;\n }\n return getFirstFocusable(element);\n}\n\nfunction selectElement(container: HTMLElement, selector: string): null | Element {\n if (container.matches(selector)) {\n return container;\n }\n return container.querySelector(selector);\n}\n"]}
|
package/internal/manifest.json
CHANGED
|
@@ -11,7 +11,7 @@ export class AppLayoutWidgetController {
|
|
|
11
11
|
if (forcedPrimary) {
|
|
12
12
|
return forcedPrimary;
|
|
13
13
|
}
|
|
14
|
-
for (const registration of __classPrivateFieldGet(this, _AppLayoutWidgetController_registrations, "f").slice()
|
|
14
|
+
for (const registration of __classPrivateFieldGet(this, _AppLayoutWidgetController_registrations, "f").slice()) {
|
|
15
15
|
if (registration.forceType !== 'secondary') {
|
|
16
16
|
return registration;
|
|
17
17
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-layout-widget.js","sourceRoot":"","sources":["../../../../../src/internal/plugins/controllers/app-layout-widget.ts"],"names":[],"mappings":";;AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AAkCtC,MAAM,OAAO,yBAAyB;IAAtC;QACE,mDAAqD,EAAE,EAAC;QAExD,iDAAe,GAAG,EAAE;YAClB,MAAM,aAAa,GAAG,uBAAA,IAAI,gDAAe,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,YAAY,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC;YACrG,IAAI,aAAa,EAAE;gBACjB,OAAO,aAAa,CAAC;aACtB;YACD,KAAK,MAAM,YAAY,IAAI,uBAAA,IAAI,gDAAe,CAAC,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"app-layout-widget.js","sourceRoot":"","sources":["../../../../../src/internal/plugins/controllers/app-layout-widget.ts"],"names":[],"mappings":";;AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AAkCtC,MAAM,OAAO,yBAAyB;IAAtC;QACE,mDAAqD,EAAE,EAAC;QAExD,iDAAe,GAAG,EAAE;YAClB,MAAM,aAAa,GAAG,uBAAA,IAAI,gDAAe,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,YAAY,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC;YACrG,IAAI,aAAa,EAAE;gBACjB,OAAO,aAAa,CAAC;aACtB;YACD,KAAK,MAAM,YAAY,IAAI,uBAAA,IAAI,gDAAe,CAAC,KAAK,EAAE,EAAE;gBACtD,IAAI,YAAY,CAAC,SAAS,KAAK,WAAW,EAAE;oBAC1C,OAAO,YAAY,CAAC;iBACrB;aACF;YACD,OAAO,SAAS,CAAC;QACnB,CAAC,EAAC;QAEF,4CAAU,GAAG,EAAE;YACb,MAAM,OAAO,GAAG,uBAAA,IAAI,8CAAa,MAAjB,IAAI,CAAe,CAAC;YACpC,MAAM,eAAe,GAAG,uBAAA,IAAI,gDAAe;iBACxC,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,YAAY,KAAK,OAAO,CAAC;iBAChD,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;YAC3C,KAAK,MAAM,YAAY,IAAI,uBAAA,IAAI,gDAAe,EAAE;gBAC9C,IAAI,YAAY,KAAK,OAAO,EAAE;oBAC5B,YAAY,CAAC,QAAQ,CAAC;wBACpB,IAAI,EAAE,SAAS;wBACf,eAAe;qBAChB,CAAC,CAAC;iBACJ;qBAAM;oBACL,YAAY,CAAC,QAAQ,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;iBACvD;aACF;QACH,CAAC,EAAC;QAEF,oDAAkB,QAAQ,CAAC,GAAG,EAAE,CAAC,uBAAA,IAAI,yCAAQ,MAAZ,IAAI,CAAU,EAAE,CAAC,CAAC,EAAC;QAEpD,aAAQ,GAAG,CACT,SAAuC,EACvC,oBAAsD,EACxC,EAAE;YAChB,MAAM,gBAAgB,GAAG,uBAAA,IAAI,gDAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC;YAChG,IAAI,SAAS,KAAK,SAAS,IAAI,gBAAgB,EAAE;gBAC/C,MAAM,IAAI,KAAK,CAAC,qCAAqC,CAAC,CAAC;aACxD;YAED,MAAM,YAAY,GAAgC;gBAChD,SAAS;gBACT,QAAQ,EAAE,oBAAoB;gBAC9B,KAAK,EAAE,EAAW;gBAClB,iBAAiB,EAAE;oBACjB,IAAI,EAAE,WAAW;oBACjB,MAAM,EAAE,KAAK,CAAC,EAAE;wBACd,YAAY,CAAC,KAAK,GAAG,KAAK,CAAC;wBAC3B,uBAAA,IAAI,iDAAgB,MAApB,IAAI,CAAkB,CAAC;oBACzB,CAAC;iBACF;aACF,CAAC;YACF,uBAAA,IAAI,gDAAe,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YAEvC,uBAAA,IAAI,yCAAQ,MAAZ,IAAI,CAAU,CAAC;YAEf,OAAO,GAAG,EAAE;gBACV,uBAAA,IAAI,gDAAe,CAAC,MAAM,CAAC,uBAAA,IAAI,gDAAe,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC;gBACzE,uBAAA,IAAI,iDAAgB,MAApB,IAAI,CAAkB,CAAC;YACzB,CAAC,CAAC;QACJ,CAAC,CAAC;QAEF,uBAAkB,GAAG,GAAG,EAAE;YACxB,OAAO;gBACL,aAAa,EAAE,uBAAA,IAAI,gDAAe;aACnC,CAAC;QACJ,CAAC,CAAC;QAEF,oBAAe,GAAG,CAChB,cAA0D,EAAE,EACzB,EAAE;;YACrC,MAAA,WAAW,CAAC,QAAQ,oCAApB,WAAW,CAAC,QAAQ,GAAK,IAAI,CAAC,QAAQ,EAAC;YACvC,MAAA,WAAW,CAAC,kBAAkB,oCAA9B,WAAW,CAAC,kBAAkB,GAAK,IAAI,CAAC,kBAAkB,EAAC;YAC3D,OAAO,WAAgD,CAAC;QAC1D,CAAC,CAAC;IACJ,CAAC;CAAA","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport debounce from '../../debounce';\n\ninterface PrimaryRegistration<Props> {\n type: 'primary';\n discoveredProps: Array<Props>;\n}\n\ninterface SecondaryRegistration<Props> {\n type: 'secondary';\n update: (props: Props) => void;\n}\n\nexport type RegistrationState<Props> = PrimaryRegistration<Props> | SecondaryRegistration<Props>;\nexport type RegistrationType = RegistrationState<unknown>['type'];\n\ntype RegistrationChangeHandler<Props> = (\n registration: PrimaryRegistration<Props> | SecondaryRegistration<Props>\n) => void;\n\ninterface RegistrationInternal<Props> {\n forceType: RegistrationType | undefined;\n props: Props;\n secondaryInstance: SecondaryRegistration<Props>;\n onChange: (registration: PrimaryRegistration<Props> | SecondaryRegistration<Props>) => void;\n}\n\nexport interface AppLayoutWidgetApiInternal<Props = unknown> {\n register(\n forceDeduplicationType: RegistrationType | undefined,\n onPropsChange: RegistrationChangeHandler<Props>\n ): () => void;\n getStateForTesting(): { registrations: Array<RegistrationInternal<Props>> };\n}\n\nexport class AppLayoutWidgetController<Props = unknown> {\n #registrations: Array<RegistrationInternal<Props>> = [];\n\n #findPrimary = () => {\n const forcedPrimary = this.#registrations.find(registration => registration.forceType === 'primary');\n if (forcedPrimary) {\n return forcedPrimary;\n }\n for (const registration of this.#registrations.slice()) {\n if (registration.forceType !== 'secondary') {\n return registration;\n }\n }\n return undefined;\n };\n\n #update = () => {\n const primary = this.#findPrimary();\n const discoveredProps = this.#registrations\n .filter(registration => registration !== primary)\n .map(registration => registration.props);\n for (const registration of this.#registrations) {\n if (registration === primary) {\n registration.onChange({\n type: 'primary',\n discoveredProps,\n });\n } else {\n registration.onChange(registration.secondaryInstance);\n }\n }\n };\n\n #scheduleUpdate = debounce(() => this.#update(), 0);\n\n register = (\n forceType: RegistrationType | undefined,\n onRegistrationChange: RegistrationChangeHandler<Props>\n ): (() => void) => {\n const hasForcedPrimary = this.#registrations.some(instance => instance.forceType === 'primary');\n if (forceType === 'primary' && hasForcedPrimary) {\n throw new Error('Double primary registration attempt');\n }\n\n const registration: RegistrationInternal<Props> = {\n forceType,\n onChange: onRegistrationChange,\n props: {} as Props,\n secondaryInstance: {\n type: 'secondary',\n update: props => {\n registration.props = props;\n this.#scheduleUpdate();\n },\n },\n };\n this.#registrations.push(registration);\n\n this.#update();\n\n return () => {\n this.#registrations.splice(this.#registrations.indexOf(registration), 1);\n this.#scheduleUpdate();\n };\n };\n\n getStateForTesting = () => {\n return {\n registrations: this.#registrations,\n };\n };\n\n installInternal = (\n internalApi: Partial<AppLayoutWidgetApiInternal<Props>> = {}\n ): AppLayoutWidgetApiInternal<Props> => {\n internalApi.register ??= this.register;\n internalApi.getStateForTesting ??= this.getStateForTesting;\n return internalApi as AppLayoutWidgetApiInternal<Props>;\n };\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/property-filter/filtering-token/index.tsx"],"names":[],"mappings":"AAGA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/property-filter/filtering-token/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAQjF,OAAwB,EAAE,oBAAoB,EAAsB,MAAM,wBAAwB,CAAC;AAMnG,yBAAiB,mBAAmB,CAAC;IACnC,KAAY,SAAS,GAAG,KAAK,GAAG,IAAI,CAAC;CACtC;AAED,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,SAAS,EAAE,mBAAmB,CAAC,SAAS,CAAC;IACzC,cAAc,EAAE,mBAAmB,CAAC,SAAS,CAAC;IAC9C,aAAa,EAAE,OAAO,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,CAAC,SAAS,EAAE,mBAAmB,CAAC,SAAS,KAAK,IAAI,CAAC;IACtE,sBAAsB,EAAE,CAAC,SAAS,EAAE,mBAAmB,CAAC,SAAS,KAAK,IAAI,CAAC;IAC3E,cAAc,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,YAAY,EAAE,MAAM,CAAC;IACrB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,sBAAsB,EAAE,OAAO,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,oBAAoB,CAAC,MAAM,CAAC,CAAC;CAC3C;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,IAAI,IAAI,CAAC;CACrB;AAED,UAAU,SAAS;IACjB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,QAAA,MAAM,cAAc,+FAoInB,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -1,14 +1,24 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
-
import React, { forwardRef, useImperativeHandle, useRef } from 'react';
|
|
3
|
+
import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import { useDensityMode } from '@cloudscape-design/component-toolkit/internal';
|
|
6
6
|
import InternalIcon from '../../icon/internal';
|
|
7
|
+
import { useListFocusController } from '../../internal/hooks/use-list-focus-controller';
|
|
8
|
+
import { useMergeRefs } from '../../internal/hooks/use-merge-refs';
|
|
7
9
|
import InternalPopover from '../../popover/internal';
|
|
8
10
|
import InternalSelect from '../../select/internal';
|
|
9
11
|
import testUtilStyles from '../test-classes/styles.css.js';
|
|
10
12
|
import styles from './styles.css.js';
|
|
11
13
|
const FilteringToken = forwardRef(({ tokens, showOperation, operation, groupOperation, andText, orText, groupAriaLabel, operationAriaLabel, groupEditAriaLabel, disabled = false, onChangeOperation, onChangeGroupOperation, onDismissToken, editorContent, editorHeader, editorDismissAriaLabel, editorExpandToViewport, onEditorOpen, hasGroups, popoverSize, }, ref) => {
|
|
14
|
+
const [nextFocusIndex, setNextFocusIndex] = useState(null);
|
|
15
|
+
const onFocusMoved = () => setNextFocusIndex(null);
|
|
16
|
+
const tokenListRef = useListFocusController({
|
|
17
|
+
nextFocusIndex,
|
|
18
|
+
onFocusMoved,
|
|
19
|
+
listItemSelector: `.${styles['inner-root']}`,
|
|
20
|
+
outsideSelector: `.${styles.root}`,
|
|
21
|
+
});
|
|
12
22
|
const popoverRef = useRef(null);
|
|
13
23
|
const popoverProps = {
|
|
14
24
|
content: editorContent,
|
|
@@ -21,15 +31,19 @@ const FilteringToken = forwardRef(({ tokens, showOperation, operation, groupOper
|
|
|
21
31
|
__onOpen: onEditorOpen,
|
|
22
32
|
};
|
|
23
33
|
useImperativeHandle(ref, () => ({ closeEditor: () => { var _a; return (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.dismissPopover(); } }));
|
|
24
|
-
return (React.createElement(TokenGroup, { ariaLabel: tokens.length === 1 ? tokens[0].ariaLabel : groupAriaLabel, operation: showOperation && (React.createElement(OperationSelector, { operation: operation, onChange: onChangeOperation, ariaLabel: operationAriaLabel, andText: andText, orText: orText, parent: true, disabled: disabled })), tokenAction: tokens.length === 1 ? (React.createElement(TokenDismissButton, { ariaLabel: tokens[0].dismissAriaLabel, onClick: () => onDismissToken(0), parent: true, disabled: disabled })) : (React.createElement(InternalPopover, Object.assign({ ref: popoverRef }, popoverProps, { triggerType: "filtering-token" }),
|
|
34
|
+
return (React.createElement(TokenGroup, { ref: tokenListRef, ariaLabel: tokens.length === 1 ? tokens[0].ariaLabel : groupAriaLabel, operation: showOperation && (React.createElement(OperationSelector, { operation: operation, onChange: onChangeOperation, ariaLabel: operationAriaLabel, andText: andText, orText: orText, parent: true, disabled: disabled })), tokenAction: tokens.length === 1 ? (React.createElement(TokenDismissButton, { ariaLabel: tokens[0].dismissAriaLabel, onClick: () => onDismissToken(0), parent: true, disabled: disabled })) : (React.createElement(InternalPopover, Object.assign({ ref: popoverRef }, popoverProps, { triggerType: "filtering-token" }),
|
|
25
35
|
React.createElement(TokenEditButton, { ariaLabel: groupEditAriaLabel, disabled: disabled }))), parent: true, grouped: tokens.length > 1, disabled: disabled, hasGroups: hasGroups }, tokens.length === 1 ? (React.createElement(InternalPopover, Object.assign({ ref: popoverRef }, popoverProps), tokens[0].content)) : (React.createElement("ul", { className: styles.list }, tokens.map((token, index) => (React.createElement("li", { key: index },
|
|
26
|
-
React.createElement(TokenGroup, { ariaLabel: token.ariaLabel, operation: index !== 0 && (React.createElement(OperationSelector, { operation: groupOperation, onChange: onChangeGroupOperation, ariaLabel: operationAriaLabel, andText: andText, orText: orText, parent: false, disabled: disabled })), tokenAction: React.createElement(TokenDismissButton, { ariaLabel: token.dismissAriaLabel, onClick: () =>
|
|
36
|
+
React.createElement(TokenGroup, { ariaLabel: token.ariaLabel, operation: index !== 0 && (React.createElement(OperationSelector, { operation: groupOperation, onChange: onChangeGroupOperation, ariaLabel: operationAriaLabel, andText: andText, orText: orText, parent: false, disabled: disabled })), tokenAction: React.createElement(TokenDismissButton, { ariaLabel: token.dismissAriaLabel, onClick: () => {
|
|
37
|
+
onDismissToken(index);
|
|
38
|
+
setNextFocusIndex(index);
|
|
39
|
+
}, parent: false, disabled: disabled }), parent: false, grouped: false, disabled: disabled, hasGroups: false }, token.content))))))));
|
|
27
40
|
});
|
|
28
41
|
export default FilteringToken;
|
|
29
|
-
|
|
42
|
+
const TokenGroup = forwardRef(({ ariaLabel, children, operation, tokenAction, parent, grouped, disabled, hasGroups, }, ref) => {
|
|
30
43
|
const groupRef = useRef(null);
|
|
44
|
+
const mergedRef = useMergeRefs(ref, groupRef);
|
|
31
45
|
const isCompactMode = useDensityMode(groupRef) === 'compact';
|
|
32
|
-
return (React.createElement("div", { ref:
|
|
46
|
+
return (React.createElement("div", { ref: mergedRef, className: clsx(parent
|
|
33
47
|
? clsx(styles.root, testUtilStyles['filtering-token'])
|
|
34
48
|
: clsx(styles['inner-root'], testUtilStyles['filtering-token-inner']), hasGroups && styles['has-groups'], isCompactMode && styles['compact-mode']), role: "group", "aria-label": ariaLabel },
|
|
35
49
|
operation,
|
|
@@ -38,7 +52,7 @@ function TokenGroup({ ariaLabel, children, operation, tokenAction, parent, group
|
|
|
38
52
|
? clsx(styles['token-content'], testUtilStyles['filtering-token-content'])
|
|
39
53
|
: clsx(styles['inner-token-content'], testUtilStyles['filtering-token-inner-content']), grouped && styles['token-content-grouped']) }, children),
|
|
40
54
|
tokenAction)));
|
|
41
|
-
}
|
|
55
|
+
});
|
|
42
56
|
function OperationSelector({ operation, onChange, ariaLabel, andText, orText, parent, disabled, }) {
|
|
43
57
|
return (React.createElement(InternalSelect, { __inFilteringToken: true, className: clsx(parent
|
|
44
58
|
? clsx(styles.select, testUtilStyles['filtering-token-select'])
|