+ {renderDropdownShell(
- }
- onMouseDown={handleDropdownMouseDown}
- open={open && (!!dropdownContent || !!dropdownFooter)}
- footer={
- dropdownFooterRef && (
-
-
- {open && dropdownFooter ? dropdownFooter : null}
-
-
- )
- }
- expandToViewport={expandToViewport}
- loopFocus={loopFocus}
- content={
- open && dropdownContent ? (
-
- {dropdownContent}
+ />,
+ true
+ )}
+
+ );
+ }
+
+ return (
+
+
+ {tokenInsertedAriaLabel}
+
+
+ {tokenList.map((token, i) => (
+
+ undefined} />
+
+ ))}
+
+
+
+ {renderDropdownShell(
+
+
+
+
+
+ {tokenList.length > 0 && (
+
+ {hiddenTokens.length > 0 && (
+ -
+
+
+ )}
+
+ {visibleTokens.map((token, i) => {
+ const realIndex = tokenList.length - effectiveVisible + i;
+ return (
+ - {
+ const comingFromOutside =
+ !e.relatedTarget || !tokenListRef.current?.contains(e.relatedTarget as Node);
+ if (comingFromOutside) {
+ preventOpenOnFocusRef.current = true;
+ }
+ }}
+ onKeyDown={(e: React.KeyboardEvent) => {
+ if (e.keyCode === KeyCode.backspace || e.keyCode === KeyCodeDelete) {
+ e.preventDefault();
+ if (!readOnly && !disabled) {
+ removeToken(realIndex);
+ }
+ } else if (e.keyCode === KeyCode.left) {
+ e.preventDefault();
+ if (i === 0) {
+ if (hiddenTokens.length > 0) {
+ overflowPillRef.current?.focus();
+ }
+ } else {
+ focusTokenAtIndex(realIndex - 1);
+ }
+ } else if (e.keyCode === KeyCode.right) {
+ e.preventDefault();
+ if (realIndex < tokenList.length - 1) {
+ focusTokenAtIndex(realIndex + 1);
+ } else {
+ inputRef.current?.focus();
+ }
+ }
+ }}
+ >
+ removeToken(realIndex)}
+ />
+
+ );
+ })}
+
+ )}
+
+
+ handleChange(event.detail.value)}
+ __onDelayedInput={event => handleDelayedInput(event.detail.value)}
+ onKeyDown={handleKeyDown}
+ onKeyUp={onKeyUp}
+ disabled={disabled}
+ disableBrowserAutocorrect={disableBrowserAutocorrect}
+ readOnly={readOnly}
+ ariaRequired={ariaRequired}
+ clearAriaLabel={clearAriaLabel}
+ ref={inputRef}
+ autoComplete={false}
+ nativeInputAttributes={processAttributes(nativeAttributes, nativeInputAttributes, 'Autosuggest')}
+ __skipNativeAttributesWarnings={Object.keys(nativeAttributes)}
+ __noBorder={true}
+ {...(!disabled && !readOnly && value
+ ? {
+ __endIcon: 'close' as const,
+ __onEndIconClick: () => {
+ inputRef.current?.focus();
+ fireNonCancelableEvent(onChange, { value: '', tokens: tokenList });
+ },
+ }
+ : {})}
+ {...{ ...formFieldContext, invalid: false, warning: false }}
+ />
- ) : null
- }
- />
+
+ )}
+ {hiddenTokens.length > 0 && (
+
{
+ if (hiddenTokens.length === 1) {
+ setTokensOverflowOpen(false);
+ if (tokenList.length === 1) {
+ inputRef.current?.focus();
+ } else {
+ setFocusFirstVisibleAfterOverflow(true);
+ }
+ }
+ removeToken(i, true);
+ }}
+ onClose={() => {
+ setTokensOverflowOpen(false);
+ overflowPillRef.current?.focus();
+ }}
+ />
+ )}
+
);
}
diff --git a/src/internal/components/autosuggest-input/overflow-dropdown.tsx b/src/internal/components/autosuggest-input/overflow-dropdown.tsx
new file mode 100644
index 0000000000..41f82c7177
--- /dev/null
+++ b/src/internal/components/autosuggest-input/overflow-dropdown.tsx
@@ -0,0 +1,134 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useEffect, useRef } from 'react';
+import clsx from 'clsx';
+
+import { AutosuggestProps } from '../../../autosuggest/interfaces';
+import InternalToken from '../../../token/internal';
+
+import styles from './styles.css.js';
+import testUtilStyles from './test-classes/styles.selectors.js';
+
+export interface OverflowDropdownProps {
+ tokens: ReadonlyArray
;
+ triggerRef: React.RefObject;
+ open: boolean;
+ onDismiss: (index: number) => void;
+ onClose: () => void;
+ tokenDismissLabel?: (value: string) => string;
+ readOnly?: boolean;
+}
+
+export function OverflowDropdown({
+ tokens,
+ triggerRef,
+ open,
+ onDismiss,
+ onClose,
+ tokenDismissLabel,
+ readOnly,
+}: OverflowDropdownProps) {
+ const pendingFocusAfterDismissRef = useRef(null);
+ const listRef = useRef(null);
+ const panelRef = useRef(null);
+
+ useEffect(() => {
+ if (!open) {
+ return;
+ }
+ const first = listRef.current?.querySelector('button');
+ first?.focus();
+ }, [open]);
+
+ // No deps: runs after every render to handle focus restoration after a token dismiss.
+ useEffect(() => {
+ if (pendingFocusAfterDismissRef.current === null) {
+ return;
+ }
+ const dismissedIndex = pendingFocusAfterDismissRef.current;
+ pendingFocusAfterDismissRef.current = null;
+ if (tokens.length === 0) {
+ return;
+ }
+ const nextPosition = Math.min(dismissedIndex, tokens.length - 1);
+ const buttons = listRef.current?.querySelectorAll('button');
+ if (buttons && buttons[nextPosition]) {
+ buttons[nextPosition].focus();
+ }
+ });
+
+ const handlePanelKeyDown = (e: React.KeyboardEvent) => {
+ if (e.key === 'Escape') {
+ e.stopPropagation();
+ onClose();
+ triggerRef.current?.focus();
+ } else if (e.key === 'Tab') {
+ onClose();
+ } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+ e.preventDefault();
+ e.stopPropagation();
+ const buttons = Array.from(listRef.current?.querySelectorAll('button') ?? []);
+ if (buttons.length === 0) {
+ return;
+ }
+ const focused = buttons.indexOf(document.activeElement as HTMLButtonElement);
+ if (e.key === 'ArrowUp') {
+ const prev = focused > 0 ? focused - 1 : buttons.length - 1;
+ buttons[prev].focus();
+ } else {
+ const next = focused < buttons.length - 1 ? focused + 1 : 0;
+ buttons[next].focus();
+ }
+ }
+ };
+
+ useEffect(() => {
+ if (!open) {
+ return;
+ }
+ const handleClick = (e: MouseEvent) => {
+ if (
+ panelRef.current &&
+ !panelRef.current.contains(e.target as Node) &&
+ triggerRef.current &&
+ !triggerRef.current.contains(e.target as Node)
+ ) {
+ onClose();
+ }
+ };
+ document.addEventListener('mousedown', handleClick);
+ return () => document.removeEventListener('mousedown', handleClick);
+ }, [open, onClose, triggerRef]);
+
+ if (!open) {
+ return null;
+ }
+
+ return (
+ e.preventDefault()}
+ onKeyDown={handlePanelKeyDown}
+ className={clsx(styles['overflow-panel'], testUtilStyles['overflow-panel'])}
+ >
+
+ {tokens.map((token, i) => (
+ -
+ {
+ pendingFocusAfterDismissRef.current = i;
+ onDismiss(i);
+ }}
+ />
+
+ ))}
+
+