npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.747 → 3.0.748 - Mend

@cloudscape-design/components-themeable 3.0.747 → 3.0.748

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.

Files changed (50) hide show

package/lib/internal/manifest.json CHANGED Viewed

@@ -1,3 +1,3 @@
 {
-  "commit": "68647dcc9ab7df0cd5bb53f85b16eff0c3e95f35"
+  "commit": "ca816995663057fcb38b2bfb26cb274b97f397d4"
 }

package/lib/internal/scss/table/body-cell/styles.scss CHANGED Viewed

@@ -152,15 +152,20 @@ $cell-negative-space-vertical: 2px;
       }
     }
+    &.sticky-cell-pad-inline-start:not(.has-selection) {
+      @include cell-padding-inline-start($cell-horizontal-padding);
+    }
     /*
       Striped rows requires additional left padding because the
       shaded background makes the child content appear too close
       to the table edge.
-      */
+    */
     &:first-child.has-striped-rows {
       @include cell-padding-inline-start(awsui.$space-xxs);
-      &-sticky-cell-pad-inline-start {
-        @include cell-padding-inline-start(awsui.$space-table-horizontal);
+      &.sticky-cell-pad-inline-start {
+        @include cell-padding-inline-start($cell-horizontal-padding);
       }
     }
@@ -168,7 +173,7 @@ $cell-negative-space-vertical: 2px;
       Remove the placeholder border if the row is not selectable.
       Rows that are not selectable will reserve the horizontal space
       that the placeholder border would consume.
-      */
+    */
     &:not(.has-selection):not(.body-cell-editable) {
       border-inline-start: none;
     }

package/lib/internal/scss/table/header-cell/styles.scss CHANGED Viewed

@@ -7,6 +7,8 @@
 @use '../../internal/styles/tokens' as awsui;
 @use '../../internal/styles' as styles;
+$cell-horizontal-padding: awsui.$space-scaled-l;
 @mixin when-focus-visible-or-fake {
   @include focus-visible.when-visible {
     @content;
@@ -203,23 +205,24 @@ settings icon in the pagination slot.
     @include header-cell-focus-outline-first(awsui.$space-table-header-focus-outline-gutter);
   }
-  &:first-child:not(.has-striped-rows) {
+  &:first-child:not(.has-striped-rows):not(.sticky-cell-pad-inline-start) {
     @include cell-offset(awsui.$space-xxxs);
-    &.sticky-cell-pad-inline-start {
-      @include cell-offset(awsui.$space-table-horizontal);
-    }
   }
   /*
-  Striped rows requires additional left padding because the
-  shaded background makes the child content appear too close
-  to the table edge.
+    Striped rows requires additional left padding because the
+    shaded background makes the child content appear too close
+    to the table edge.
   */
-  &:first-child.has-striped-rows {
+  &:first-child.has-striped-rows:not(.sticky-cell-pad-inline-start) {
     @include cell-offset(awsui.$space-xxs);
   }
   &:last-child.header-cell-sortable {
     padding-inline-end: awsui.$space-xxxs;
   }
+  &.sticky-cell-pad-inline-start {
+    @include cell-offset($cell-horizontal-padding);
+  }
 }

package/lib/internal/template/file-upload/internal.d.ts.map CHANGED Viewed

	@@ -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;~~AASlF~~,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;;~~AAM~~/C,wBAAoD"}
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/lib/internal/template/file-upload/internal.js CHANGED Viewed

@@ -11,6 +11,7 @@ import { getBaseProps } from '../internal/base-component';
 import TokenList from '../internal/components/token-list';
 import { fireNonCancelableEvent } from '../internal/events';
 import checkControlled from '../internal/hooks/check-controlled';
+import { useListFocusController } from '../internal/hooks/use-list-focus-controller';
 import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { useUniqueId } from '../internal/hooks/use-unique-id';
 import { joinStrings } from '../internal/utils/strings';
@@ -19,11 +20,22 @@ import { Token } from '../token-group/token';
 import { Dropzone, useDropzoneVisible } from './dropzone';
 import FileInput from './file-input';
 import { FileOption } from './file-option';
+import tokenListStyles from '../internal/components/token-list/styles.css.js';
+import fileInputStyles from './file-input/styles.css.js';
 import styles from './styles.css.js';
 export default React.forwardRef(InternalFileUpload);
 function InternalFileUpload(_a, externalRef) {
     var _b;
     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"]);
+    const [nextFocusIndex, setNextFocusIndex] = useState(null);
+    const onFocusMoved = () => setNextFocusIndex(null);
+    const tokenListRef = useListFocusController({
+        nextFocusIndex,
+        onFocusMoved,
+        listItemSelector: `.${tokenListStyles['list-item']}`,
+        showMoreSelector: `.${tokenListStyles.toggle}`,
+        outsideSelector: `.${fileInputStyles['upload-input']}`,
+    });
     const baseProps = getBaseProps(restProps);
     const metadata = { showFileSize, showFileLastModified, showFileThumbnail };
     const errorId = useUniqueId('error-');
@@ -31,7 +43,6 @@ function InternalFileUpload(_a, externalRef) {
     const constraintTextId = useUniqueId('constraint-text-');
     const fileInputRef = useRef(null);
     const ref = useMergeRefs(fileInputRef, externalRef);
-    const [removedFileIndex, setRemovedFileIndex] = useState(null);
     checkControlled('FileUpload', 'value', value, 'onChange', onChange);
     if (!multiple && value.length > 1) {
         warnOnce('FileUpload', 'Value must be an array of size 0 or 1 when `multiple=false`.');
@@ -41,13 +52,9 @@ function InternalFileUpload(_a, externalRef) {
         fireNonCancelableEvent(onChange, { value: newValue });
     };
     const onFileRemove = (removeFileIndex) => {
-        var _a;
         const newValue = value.filter((_, fileIndex) => fileIndex !== removeFileIndex);
         fireNonCancelableEvent(onChange, { value: newValue });
-        setRemovedFileIndex(removeFileIndex);
-        if (value.length === 1) {
-            (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }
+        setNextFocusIndex(removeFileIndex);
     };
     const isDropzoneVisible = useDropzoneVisible(multiple);
     const showWarning = warningText && !errorText;
@@ -58,7 +65,7 @@ function InternalFileUpload(_a, externalRef) {
     const ariaDescribedBy = joinStrings((_b = restProps.ariaDescribedby) !== null && _b !== void 0 ? _b : formFieldContext.ariaDescribedby, errorText ? errorId : undefined, showWarning ? warningId : undefined, constraintText ? constraintTextId : undefined);
     const hasError = Boolean(errorText || (fileErrors === null || fileErrors === void 0 ? void 0 : fileErrors.filter(Boolean).length));
     const invalid = restProps.invalid || formFieldContext.invalid || hasError;
-    return (React.createElement(InternalSpaceBetween, Object.assign({}, baseProps, { size: "xs", className: clsx(baseProps.className, styles.root), __internalRootRef: __internalRootRef }),
+    return (React.createElement(InternalSpaceBetween, Object.assign({}, baseProps, { size: "xs", className: clsx(baseProps.className, styles.root), __internalRootRef: __internalRootRef, ref: tokenListRef }),
         React.createElement(InternalBox, null,
             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))),
             (constraintText || errorText || warningText) && (React.createElement("div", { className: styles.hints },
@@ -73,6 +80,6 @@ function InternalFileUpload(_a, externalRef) {
                     React.createElement(FileOption, { file: file, metadata: metadata, i18nStrings: i18nStrings }))), limit: tokenLimit, i18nStrings: {
                     limitShowFewer: i18nStrings.limitShowFewer,
                     limitShowMore: i18nStrings.limitShowMore,
-                }, moveFocusNextToIndex: removedFileIndex }))) : null));
+                } }))) : null));
 }
 //# sourceMappingURL=internal.js.map

package/lib/internal/template/file-upload/internal.js.map CHANGED Viewed

	@@ -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"]}

package/lib/internal/template/internal/components/focus-lock/utils.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+export declare function isFocusable(element: HTMLElement): boolean;
 export declare function getAllFocusables(container: HTMLElement): HTMLElement[];
 export declare function getFocusables(container: HTMLElement): HTMLElement[];
 export declare function getFirstFocusable(container: HTMLElement): null | HTMLElement;

package/lib/internal/template/internal/components/focus-lock/utils.d.ts.map CHANGED Viewed

	@@ -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"}

package/lib/internal/template/internal/components/focus-lock/utils.js CHANGED Viewed

@@ -19,6 +19,9 @@ const tabbables = [
     '[contenteditable]',
     '[autofocus]',
 ].join(',');
+export function isFocusable(element) {
+    return element.matches(tabbables);
+}
 export function getAllFocusables(container) {
     return Array.prototype.slice.call(container.querySelectorAll(tabbables));
 }

package/lib/internal/template/internal/components/focus-lock/utils.js.map CHANGED Viewed

	@@ -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"]}

package/lib/internal/template/internal/components/token-list/index.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { TokenListProps } from './interfaces';
 export { TokenListProps };
-export default function TokenList<Item>({ items, alignment, renderItem, limit, after, i18nStrings, limitShowFewerAriaLabel, limitShowMoreAriaLabel, moveFocusNextToIndex, onExpandedClick, }: TokenListProps<Item>): JSX.Element;
+export default function TokenList<Item>({ items, alignment, renderItem, limit, after, i18nStrings, limitShowFewerAriaLabel, limitShowMoreAriaLabel, onExpandedClick, }: TokenListProps<Item>): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/lib/internal/template/internal/components/token-list/index.d.ts.map CHANGED Viewed

	@@ -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;~~AAM9C~~,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,~~oBAAoB,EACpB,~~eAAiC,GAClC,EAAE,cAAc,CAAC,IAAI,CAAC,~~eAyEtB~~"}
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"}

package/lib/internal/template/internal/components/token-list/index.js CHANGED Viewed

@@ -3,11 +3,9 @@
 import React, { useState } from 'react';
 import clsx from 'clsx';
 import { useUniqueId } from '../../hooks/use-unique-id';
-import { useTokenFocusController } from './token-focus-controller';
 import TokenLimitToggle from './token-limit-toggle';
 import styles from './styles.css.js';
-export default function TokenList({ items, alignment, renderItem, limit, after, i18nStrings, limitShowFewerAriaLabel, limitShowMoreAriaLabel, moveFocusNextToIndex, onExpandedClick = () => undefined, }) {
-    const tokenListRef = useTokenFocusController({ moveFocusNextToIndex: moveFocusNextToIndex });
+export default function TokenList({ items, alignment, renderItem, limit, after, i18nStrings, limitShowFewerAriaLabel, limitShowMoreAriaLabel, onExpandedClick = () => undefined, }) {
     const controlId = useUniqueId();
     const [expanded, setExpanded] = useState(false);
     const hasItems = items.length > 0;
@@ -21,13 +19,13 @@ export default function TokenList({ items, alignment, renderItem, limit, after,
                 onExpandedClick(isExpanded);
             } }))) : null;
     if (alignment === 'inline') {
-        return (React.createElement("div", { ref: tokenListRef, className: clsx(styles.root, styles.horizontal) },
+        return (React.createElement("div", { className: clsx(styles.root, styles.horizontal) },
             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)))))),
             toggle,
             after && React.createElement("div", { className: styles.separator }),
             after));
     }
-    return (React.createElement("div", { ref: tokenListRef, className: clsx(styles.root, styles.vertical) },
+    return (React.createElement("div", { className: clsx(styles.root, styles.vertical) },
         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)))))),
         toggle,
         after));

package/lib/internal/template/internal/components/token-list/index.js.map CHANGED Viewed

	@@ -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,~~EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,~~gBAAgB,MAAM,sBAAsB,CAAC;AAEpD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,CAAC,OAAO,UAAU,SAAS,CAAO,EACtC,KAAK,EACL,SAAS,EACT,UAAU,EACV,KAAK,EACL,KAAK,EACL,WAAW,EACX,uBAAuB,EACvB,sBAAsB,EACtB,~~oBAAoB,EACpB,~~eAAe,GAAG,GAAG,EAAE,CAAC,SAAS,GACZ;IACrB,MAAM,~~YAAY,GAAG,uBAAuB,CAAC,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,CAAC,CAAC;IAC7F,MAAM,~~SAAS,GAAG,WAAW,EAAE,CAAC;IAEhC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IAClC,MAAM,cAAc,GAAG,QAAQ,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;IAC/E,MAAM,YAAY,GAAG,cAAc,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IACjF,MAAM,eAAe,GAAG,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC;IAEhD,MAAM,MAAM,GAAG,cAAc,CAAC,CAAC,CAAC,CAC9B,6BAAK,SAAS,EAAE,MAAM,CAAC,oBAAoB,SAAS,EAAE,CAAC;QACrD,oBAAC,gBAAgB,IACf,SAAS,EAAE,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAClD,SAAS,EAAE,KAAK,KAAK,CAAC,EACtB,QAAQ,EAAE,QAAQ,EAClB,qBAAqB,EAAE,KAAK,CAAC,MAAM,GAAG,YAAY,CAAC,MAAM,EACzD,WAAW,EAAE,WAAW,EACxB,uBAAuB,EAAE,uBAAuB,EAChD,sBAAsB,EAAE,sBAAsB,EAC9C,OAAO,EAAE,GAAG,EAAE;gBACZ,MAAM,UAAU,GAAG,CAAC,QAAQ,CAAC;gBAC7B,WAAW,CAAC,UAAU,CAAC,CAAC;gBACxB,eAAe,CAAC,UAAU,CAAC,CAAC;YAC9B,CAAC,GACD,CACE,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;IAET,IAAI,SAAS,KAAK,QAAQ,EAAE;QAC1B,OAAO,CACL,6BAAK,~~GAAG,EAAE,YAAY,EAAE,~~SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,UAAU,CAAC;~~YACpE~~,QAAQ,IAAI,CACX,4BAAI,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,IACtC,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,CACrC,4BACE,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,kBAChB,KAAK,CAAC,MAAM,mBACX,SAAS,GAAG,CAAC,IAE3B,UAAU,CAAC,IAAI,EAAE,SAAS,CAAC,CACzB,CACN,CAAC,CACC,CACN;YACA,MAAM;YACN,KAAK,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,SAAS,GAAI;YAC7C,KAAK,CACF,CACP,CAAC;KACH;IAED,OAAO,CACL,6BAAK,~~GAAG,EAAE,YAAY,EAAE,~~SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,QAAQ,CAAC;~~QAClE~~,eAAe,IAAI,CAClB,4BAAI,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC,IAC/D,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,CACrC,4BACE,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,kBAChB,KAAK,CAAC,MAAM,mBACX,SAAS,GAAG,CAAC,IAE3B,UAAU,CAAC,IAAI,EAAE,SAAS,CAAC,CACzB,CACN,CAAC,CACC,CACN;QACA,MAAM;QACN,KAAK,CACF,CACP,CAAC;AACJ,CAAC","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 ~~{ useTokenFocusController } from './token-focus-controller';\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 ~~moveFocusNextToIndex,\n~~ onExpandedClick = () => undefined,\n}: TokenListProps<Item>) {\n const ~~tokenListRef = useTokenFocusController({ moveFocusNextToIndex: moveFocusNextToIndex });\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 ~~ref={tokenListRef}~~ 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 ~~ref={tokenListRef}~~ 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"]}
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"]}

package/lib/internal/template/internal/components/token-list/interfaces.d.ts CHANGED Viewed

@@ -6,7 +6,6 @@ export interface TokenListProps<Item> {
     after?: React.ReactNode;
     renderItem: (item: Item, itemIndex: number) => React.ReactNode;
     i18nStrings?: I18nStrings;
-    moveFocusNextToIndex?: null | number;
     onExpandedClick?: (isExpanded: boolean) => void;
     limitShowFewerAriaLabel?: string;
     limitShowMoreAriaLabel?: string;

package/lib/internal/template/internal/components/token-list/interfaces.d.ts.map CHANGED Viewed

	@@ -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,~~oBAAoB,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACrC,~~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	+ {"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"}

package/lib/internal/template/internal/components/token-list/interfaces.js.map CHANGED Viewed

	@@ -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 ~~moveFocusNextToIndex?: null \| number;\n~~ onExpandedClick?: (isExpanded: boolean) => void;\n limitShowFewerAriaLabel?: string;\n limitShowMoreAriaLabel?: string;\n}\n\nexport interface I18nStrings {\n limitShowFewer?: string;\n limitShowMore?: string;\n}\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/lib/internal/template/internal/environment.js CHANGED Viewed

@@ -1,4 +1,4 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (68647dcc)";
+export var PACKAGE_VERSION = "3.0.0 (ca816995)";
 export var THEME = "open-source-visual-refresh";
 export var ALWAYS_VISUAL_REFRESH = true;

package/lib/internal/template/internal/environment.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (68647dcc)",
+  "PACKAGE_VERSION": "3.0.0 (ca816995)",
   "THEME": "default",
   "ALWAYS_VISUAL_REFRESH": false
 }

package/lib/internal/template/internal/hooks/use-list-focus-controller.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+interface UseListFocusControllerOptions {
+    nextFocusIndex: null | number;
+    onFocusMoved?: (target: HTMLElement) => void;
+    listItemSelector: string;
+    outsideSelector?: string;
+    showMoreSelector?: string;
+}
+export declare function useListFocusController({ nextFocusIndex, onFocusMoved, listItemSelector, outsideSelector, showMoreSelector, }: UseListFocusControllerOptions): import("react").RefObject<HTMLDivElement>;
+export {};
+//# sourceMappingURL=use-list-focus-controller.d.ts.map

package/lib/internal/template/internal/hooks/use-list-focus-controller.d.ts.map ADDED Viewed

@@ -0,0 +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"}

package/lib/internal/template/internal/hooks/use-list-focus-controller.js ADDED Viewed

@@ -0,0 +1,62 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useEffect, useRef } from 'react';
+import { getFirstFocusable, isFocusable } from '../components/focus-lock/utils.js';
+export function useListFocusController({ nextFocusIndex, onFocusMoved, listItemSelector, outsideSelector, showMoreSelector, }) {
+    const tokenListRef = useRef(null);
+    useEffect(() => {
+        if (nextFocusIndex === undefined || nextFocusIndex === null || tokenListRef.current === null) {
+            return;
+        }
+        const tokenElements = tokenListRef.current.querySelectorAll(listItemSelector);
+        const outsideElement = outsideSelector ? selectElement(tokenListRef.current, outsideSelector) : null;
+        const toggleButton = showMoreSelector ? selectElement(tokenListRef.current, showMoreSelector) : null;
+        let closestPrevIndex = Number.NEGATIVE_INFINITY;
+        let closestNextIndex = Number.POSITIVE_INFINITY;
+        for (let activeIndex = 0; activeIndex < tokenElements.length; activeIndex++) {
+            if (activeIndex < nextFocusIndex) {
+                closestPrevIndex =
+                    nextFocusIndex - activeIndex < nextFocusIndex - closestPrevIndex ? activeIndex : closestPrevIndex;
+            }
+            else {
+                closestNextIndex =
+                    activeIndex - nextFocusIndex < closestNextIndex - nextFocusIndex ? activeIndex : closestNextIndex;
+            }
+        }
+        const nextElement = tokenElements[closestNextIndex];
+        const prevElement = tokenElements[closestPrevIndex];
+        const focusTarget = getFirstEligible(nextElement, prevElement, toggleButton, outsideElement);
+        if (focusTarget) {
+            focusTarget.focus();
+            onFocusMoved === null || onFocusMoved === void 0 ? void 0 : onFocusMoved(focusTarget);
+        }
+        // Expecting onFocusMoved to be pure
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [nextFocusIndex, listItemSelector, outsideSelector, showMoreSelector]);
+    return tokenListRef;
+}
+function getFirstEligible(...elements) {
+    for (const element of elements) {
+        const focusable = element ? getFocusableElement(element) : null;
+        if (focusable) {
+            return focusable;
+        }
+    }
+    return null;
+}
+function getFocusableElement(element) {
+    if (!(element instanceof HTMLElement)) {
+        return null;
+    }
+    if (isFocusable(element)) {
+        return element;
+    }
+    return getFirstFocusable(element);
+}
+function selectElement(container, selector) {
+    if (container.matches(selector)) {
+        return container;
+    }
+    return container.querySelector(selector);
+}
+//# sourceMappingURL=use-list-focus-controller.js.map

package/lib/internal/template/internal/hooks/use-list-focus-controller.js.map ADDED Viewed

@@ -0,0 +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/lib/internal/template/property-filter/filtering-token/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/property-filter/filtering-token/index.tsx"],"names":[],"mappings":"AAGA,OAAO,~~KAAkD~~,MAAM,OAAO,CAAC;~~AAMvE~~,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,+~~FAuHnB~~,CAAC;AAEF,eAAe,cAAc,CAAC"}
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"}

package/lib/internal/template/property-filter/filtering-token/index.js CHANGED Viewed

@@ -1,14 +1,24 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { useDensityMode } from '@cloudscape-design/component-toolkit/internal';
 import InternalIcon from '../../icon/internal';
+import { useListFocusController } from '../../internal/hooks/use-list-focus-controller';
+import { useMergeRefs } from '../../internal/hooks/use-merge-refs';
 import InternalPopover from '../../popover/internal';
 import InternalSelect from '../../select/internal';
 import testUtilStyles from '../test-classes/styles.css.js';
 import styles from './styles.css.js';
 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) => {
+    const [nextFocusIndex, setNextFocusIndex] = useState(null);
+    const onFocusMoved = () => setNextFocusIndex(null);
+    const tokenListRef = useListFocusController({
+        nextFocusIndex,
+        onFocusMoved,
+        listItemSelector: `.${styles['inner-root']}`,
+        outsideSelector: `.${styles.root}`,
+    });
     const popoverRef = useRef(null);
     const popoverProps = {
         content: editorContent,
@@ -21,15 +31,19 @@ const FilteringToken = forwardRef(({ tokens, showOperation, operation, groupOper
         __onOpen: onEditorOpen,
     };
     useImperativeHandle(ref, () => ({ closeEditor: () => { var _a; return (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.dismissPopover(); } }));
-    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" }),
+    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" }),
             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 },
-        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: () => onDismissToken(index), parent: false, disabled: disabled }), parent: false, grouped: false, disabled: disabled, hasGroups: false }, token.content))))))));
+        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: () => {
+                    onDismissToken(index);
+                    setNextFocusIndex(index);
+                }, parent: false, disabled: disabled }), parent: false, grouped: false, disabled: disabled, hasGroups: false }, token.content))))))));
 });
 export default FilteringToken;
-function TokenGroup({ ariaLabel, children, operation, tokenAction, parent, grouped, disabled, hasGroups, }) {
+const TokenGroup = forwardRef(({ ariaLabel, children, operation, tokenAction, parent, grouped, disabled, hasGroups, }, ref) => {
     const groupRef = useRef(null);
+    const mergedRef = useMergeRefs(ref, groupRef);
     const isCompactMode = useDensityMode(groupRef) === 'compact';
-    return (React.createElement("div", { ref: groupRef, className: clsx(parent
+    return (React.createElement("div", { ref: mergedRef, className: clsx(parent
             ? clsx(styles.root, testUtilStyles['filtering-token'])
             : clsx(styles['inner-root'], testUtilStyles['filtering-token-inner']), hasGroups && styles['has-groups'], isCompactMode && styles['compact-mode']), role: "group", "aria-label": ariaLabel },
         operation,
@@ -38,7 +52,7 @@ function TokenGroup({ ariaLabel, children, operation, tokenAction, parent, group
                     ? clsx(styles['token-content'], testUtilStyles['filtering-token-content'])
                     : clsx(styles['inner-token-content'], testUtilStyles['filtering-token-inner-content']), grouped && styles['token-content-grouped']) }, children),
             tokenAction)));
-}
+});
 function OperationSelector({ operation, onChange, ariaLabel, andText, orText, parent, disabled, }) {
     return (React.createElement(InternalSelect, { __inFilteringToken: true, className: clsx(parent
             ? clsx(styles.select, testUtilStyles['filtering-token-select'])