@cloudscape-design/components-themeable 3.0.747 → 3.0.749
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/internal/manifest.json +1 -1
- package/lib/internal/scss/table/body-cell/styles.scss +9 -4
- package/lib/internal/scss/table/header-cell/styles.scss +11 -8
- package/lib/internal/template/file-upload/internal.d.ts.map +1 -1
- package/lib/internal/template/file-upload/internal.js +15 -8
- package/lib/internal/template/file-upload/internal.js.map +1 -1
- package/lib/internal/template/internal/components/focus-lock/utils.d.ts +1 -0
- package/lib/internal/template/internal/components/focus-lock/utils.d.ts.map +1 -1
- package/lib/internal/template/internal/components/focus-lock/utils.js +3 -0
- package/lib/internal/template/internal/components/focus-lock/utils.js.map +1 -1
- package/lib/internal/template/internal/components/token-list/index.d.ts +1 -1
- package/lib/internal/template/internal/components/token-list/index.d.ts.map +1 -1
- package/lib/internal/template/internal/components/token-list/index.js +3 -5
- package/lib/internal/template/internal/components/token-list/index.js.map +1 -1
- package/lib/internal/template/internal/components/token-list/interfaces.d.ts +0 -1
- package/lib/internal/template/internal/components/token-list/interfaces.d.ts.map +1 -1
- package/lib/internal/template/internal/components/token-list/interfaces.js.map +1 -1
- package/lib/internal/template/internal/environment.js +1 -1
- package/lib/internal/template/internal/environment.json +1 -1
- package/lib/internal/template/internal/hooks/use-list-focus-controller.d.ts +11 -0
- package/lib/internal/template/internal/hooks/use-list-focus-controller.d.ts.map +1 -0
- package/lib/internal/template/internal/hooks/use-list-focus-controller.js +62 -0
- package/lib/internal/template/internal/hooks/use-list-focus-controller.js.map +1 -0
- package/lib/internal/template/internal/plugins/controllers/app-layout-widget.js +1 -1
- package/lib/internal/template/internal/plugins/controllers/app-layout-widget.js.map +1 -1
- package/lib/internal/template/property-filter/filtering-token/index.d.ts.map +1 -1
- package/lib/internal/template/property-filter/filtering-token/index.js +20 -6
- package/lib/internal/template/property-filter/filtering-token/index.js.map +1 -1
- package/lib/internal/template/property-filter/internal.d.ts.map +1 -1
- package/lib/internal/template/property-filter/internal.js +16 -6
- package/lib/internal/template/property-filter/internal.js.map +1 -1
- package/lib/internal/template/property-filter/token-editor.d.ts.map +1 -1
- package/lib/internal/template/property-filter/token-editor.js +18 -3
- package/lib/internal/template/property-filter/token-editor.js.map +1 -1
- package/lib/internal/template/space-between/internal.d.ts +3 -4
- package/lib/internal/template/space-between/internal.d.ts.map +1 -1
- package/lib/internal/template/space-between/internal.js +9 -6
- package/lib/internal/template/space-between/internal.js.map +1 -1
- package/lib/internal/template/table/body-cell/styles.css.js +47 -47
- package/lib/internal/template/table/body-cell/styles.scoped.css +394 -311
- package/lib/internal/template/table/body-cell/styles.selectors.js +47 -47
- package/lib/internal/template/table/header-cell/styles.css.js +26 -26
- package/lib/internal/template/table/header-cell/styles.scoped.css +72 -72
- package/lib/internal/template/table/header-cell/styles.selectors.js +26 -26
- package/lib/internal/template/token-group/internal.d.ts.map +1 -1
- package/lib/internal/template/token-group/internal.js +17 -6
- package/lib/internal/template/token-group/internal.js.map +1 -1
- package/package.json +1 -1
- package/lib/internal/template/internal/components/token-list/token-focus-controller.d.ts +0 -5
- package/lib/internal/template/internal/components/token-list/token-focus-controller.d.ts.map +0 -1
- package/lib/internal/template/internal/components/token-list/token-focus-controller.js +0 -43
- package/lib/internal/template/internal/components/token-list/token-focus-controller.js.map +0 -1
|
@@ -152,15 +152,20 @@ $cell-negative-space-vertical: 2px;
|
|
|
152
152
|
}
|
|
153
153
|
}
|
|
154
154
|
|
|
155
|
+
&.sticky-cell-pad-inline-start:not(.has-selection) {
|
|
156
|
+
@include cell-padding-inline-start($cell-horizontal-padding);
|
|
157
|
+
}
|
|
158
|
+
|
|
155
159
|
/*
|
|
156
160
|
Striped rows requires additional left padding because the
|
|
157
161
|
shaded background makes the child content appear too close
|
|
158
162
|
to the table edge.
|
|
159
|
-
|
|
163
|
+
*/
|
|
160
164
|
&:first-child.has-striped-rows {
|
|
161
165
|
@include cell-padding-inline-start(awsui.$space-xxs);
|
|
162
|
-
|
|
163
|
-
|
|
166
|
+
|
|
167
|
+
&.sticky-cell-pad-inline-start {
|
|
168
|
+
@include cell-padding-inline-start($cell-horizontal-padding);
|
|
164
169
|
}
|
|
165
170
|
}
|
|
166
171
|
|
|
@@ -168,7 +173,7 @@ $cell-negative-space-vertical: 2px;
|
|
|
168
173
|
Remove the placeholder border if the row is not selectable.
|
|
169
174
|
Rows that are not selectable will reserve the horizontal space
|
|
170
175
|
that the placeholder border would consume.
|
|
171
|
-
|
|
176
|
+
*/
|
|
172
177
|
&:not(.has-selection):not(.body-cell-editable) {
|
|
173
178
|
border-inline-start: none;
|
|
174
179
|
}
|
|
@@ -7,6 +7,8 @@
|
|
|
7
7
|
@use '../../internal/styles/tokens' as awsui;
|
|
8
8
|
@use '../../internal/styles' as styles;
|
|
9
9
|
|
|
10
|
+
$cell-horizontal-padding: awsui.$space-scaled-l;
|
|
11
|
+
|
|
10
12
|
@mixin when-focus-visible-or-fake {
|
|
11
13
|
@include focus-visible.when-visible {
|
|
12
14
|
@content;
|
|
@@ -203,23 +205,24 @@ settings icon in the pagination slot.
|
|
|
203
205
|
@include header-cell-focus-outline-first(awsui.$space-table-header-focus-outline-gutter);
|
|
204
206
|
}
|
|
205
207
|
|
|
206
|
-
&:first-child:not(.has-striped-rows) {
|
|
208
|
+
&:first-child:not(.has-striped-rows):not(.sticky-cell-pad-inline-start) {
|
|
207
209
|
@include cell-offset(awsui.$space-xxxs);
|
|
208
|
-
&.sticky-cell-pad-inline-start {
|
|
209
|
-
@include cell-offset(awsui.$space-table-horizontal);
|
|
210
|
-
}
|
|
211
210
|
}
|
|
212
211
|
|
|
213
212
|
/*
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
213
|
+
Striped rows requires additional left padding because the
|
|
214
|
+
shaded background makes the child content appear too close
|
|
215
|
+
to the table edge.
|
|
217
216
|
*/
|
|
218
|
-
&:first-child.has-striped-rows {
|
|
217
|
+
&:first-child.has-striped-rows:not(.sticky-cell-pad-inline-start) {
|
|
219
218
|
@include cell-offset(awsui.$space-xxs);
|
|
220
219
|
}
|
|
221
220
|
|
|
222
221
|
&:last-child.header-cell-sortable {
|
|
223
222
|
padding-inline-end: awsui.$space-xxxs;
|
|
224
223
|
}
|
|
224
|
+
|
|
225
|
+
&.sticky-cell-pad-inline-start {
|
|
226
|
+
@include cell-offset($cell-horizontal-padding);
|
|
227
|
+
}
|
|
225
228
|
}
|
|
@@ -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"}
|
|
@@ -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"]}
|
|
@@ -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"]}
|
|
@@ -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":"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","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"]}
|
|
@@ -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'])
|