@cloudscape-design/components-themeable 3.0.0

package/internal/template/autosuggest/interfaces.d.ts

@@ -0,0 +1,115 @@
+import React from 'react';
+import { BaseComponentProps } from '../internal/base-component';
+import { FormFieldValidationControlProps } from '../internal/context/form-field-context';
+import { OptionDefinition, OptionGroup } from '../internal/components/option/interfaces';
+import { BaseDropdownHostProps, OptionsLoadItemsDetail, OptionsFilteringType } from '../internal/components/dropdown/interfaces';
+import { DropdownStatusProps } from '../internal/components/dropdown-status';
+import { BaseInputProps, InputKeyEvents, InputProps } from '../input/interfaces';
+import { NonCancelableEventHandler } from '../internal/events';
+export interface AutosuggestProps extends BaseComponentProps, BaseInputProps, BaseDropdownHostProps, InputKeyEvents, FormFieldValidationControlProps, DropdownStatusProps {
+    /**
+     * Specifies an array of options that are displayed to the user as a dropdown list.
+     * The options can be grouped using `OptionGroup` objects.
+     *
+     * #### Option
+     * - `value` (string) - The returned value of the option when selected.
+     * - `label` (string) - (Optional) Option text displayed to the user.
+     * - `description` (string) - (Optional) Further information about the option that appears below the label.
+     * - `disabled` (boolean) - (Optional) Determines whether the option is disabled.
+     * - `labelTag` (string) - (Optional) A label tag that provides additional guidance, shown next to the label.
+     * - `tags` [string[]] - (Optional) A list of tags giving further guidance about the option.
+     * - `filteringTags` [string[]] - (Optional) A list of additional tags used for automatic filtering.
+     * - `iconName` (string) - (Optional) Specifies the name of an [icon](/components/icon/) to display in the option.
+     * - `iconAlt` (string) - (Optional) Specifies alternate text for a custom icon, for use with `iconUrl`.
+     * - `iconUrl` (string) - (Optional) URL of a custom icon.
+     * - `iconSvg` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).
+     *
+     * #### OptionGroup
+     * - `label` (string) - Option group text displayed to the user.
+     * - `disabled` (boolean) - (Optional) Determines whether the option group is disabled.
+     * - `options` (Option[]) - (Optional) The options under this group.
+     *
+     * Note: Only one level of option nesting is supported.
+     *
+     * If you want to use the built-in filtering capabilities of this component, provide
+     * a list of all valid options here and they will be automatically filtered based on the user's filtering input.
+     *
+     * Alternatively, you can listen to the `onChange` or `onLoadItems` event and set new options
+     * on your own.
+     **/
+    options?: AutosuggestProps.Options;
+    /**
+     * Determines how filtering is applied to the list of `options`:
+     * * `auto` - The component will automatically filter options based on user input.
+     * * `manual` - You will set up `onChange` or `onLoadItems` event listeners and filter options on your side or request
+     * them from server.
+     *
+     * By default the component will filter the provided `options` based on the value of the filtering input field.
+     * Only options that have a `value` or `label` that contains the input value as a substring
+     * are displayed in the list of options.
+     *
+     * If you set this property to `manual`, this default filtering mechanism is disabled and all provided `options` are
+     * displayed in the dropdown list. In that case make sure that you use the `onChange` or `onLoadItems` events in order
+     * to set the `options` property to the options that are relevant for the user, given the filtering input value.
+     *
+     * Note: Manual filtering doesn't disable match highlighting.
+     **/
+    filteringType?: OptionsFilteringType;
+    /**
+     * Specifies a function that generates the custom value indicator (for example, `Use "${value}"`).
+     */
+    enteredTextLabel: AutosuggestProps.EnteredTextLabel;
+    /**
+     * Specifies the text that's displayed when there aren't any suggestions to display.
+     * This is displayed when `statusType` is set to `finished` or it's not set at all.
+     */
+    empty?: React.ReactNode;
+    /**
+     * Called whenever a user selects an option in the dropdown. Don't use this event as the only way to handle user input.
+     * Instead, use `onSelect` in combination with the `onChange` handler only as an optional convenience for the user.
+     */
+    onSelect?: NonCancelableEventHandler<AutosuggestProps.SelectDetail>;
+    /**
+     * Specifies the localized string that describes an option as being selected.
+     * This is required to provide a good screen reader experience. For more information, see the
+     * [accessibility guidelines](/components/autosuggest/?tabId=usage#accessibility-guidelines).
+     */
+    selectedAriaLabel?: string;
+    /**
+     * Overrides the element that is announced to screen readers
+     * when the highlighted option changes. By default, this announces
+     * the option's name and properties, and its selected state if
+     * the `selectedLabel` property is defined.
+     * The highlighted option is provided, and its group (if groups
+     * are used and it differs from the group of the previously highlighted option).
+     *
+     * For more information, see the
+     * [accessibility guidelines](/components/autosuggest/?tabId=usage#accessibility-guidelines).
+     */
+    renderHighlightedAriaLive?: AutosuggestProps.ContainingOptionAndGroupString;
+}
+export declare namespace AutosuggestProps {
+    type ChangeDetail = InputProps.ChangeDetail;
+    type KeyDetail = InputProps.KeyDetail;
+    type FilteringType = OptionsFilteringType;
+    type Option = OptionDefinition;
+    type Options = ReadonlyArray<Option | OptionGroup>;
+    type EnteredTextLabel = (value: string) => string;
+    interface OptionGroup extends Option {
+        label?: string;
+        options: ReadonlyArray<Option>;
+    }
+    type LoadItemsDetail = OptionsLoadItemsDetail;
+    type StatusType = DropdownStatusProps.StatusType;
+    interface SelectDetail {
+        value: string;
+    }
+    interface ContainingOptionAndGroupString {
+        (option: Option, group?: OptionGroup): string;
+    }
+}
+export declare type AutosuggestItem = (AutosuggestProps.Option | AutosuggestProps.OptionGroup) & {
+    type?: 'parent' | 'child' | 'use-entered';
+    option: OptionDefinition | OptionGroup;
+};
+//# sourceMappingURL=interfaces.d.ts.map

package/internal/template/autosuggest/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,+BAA+B,EAAE,MAAM,wCAAwC,CAAC;AACzF,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AACzF,OAAO,EACL,qBAAqB,EACrB,sBAAsB,EACtB,oBAAoB,EACrB,MAAM,4CAA4C,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjF,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,gBACf,SAAQ,kBAAkB,EACxB,cAAc,EACd,qBAAqB,EACrB,cAAc,EACd,+BAA+B,EAC/B,mBAAmB;IACrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA6BI;IACJ,OAAO,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC;IACnC;;;;;;;;;;;;;;;QAeI;IACJ,aAAa,CAAC,EAAE,oBAAoB,CAAC;IAErC;;OAEG;IACH,gBAAgB,EAAE,gBAAgB,CAAC,gBAAgB,CAAC;IAEpD;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;IAEpE;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;;;;;;;OAUG;IACH,yBAAyB,CAAC,EAAE,gBAAgB,CAAC,8BAA8B,CAAC;CAC7E;AAED,yBAAiB,gBAAgB,CAAC;IAChC,KAAY,YAAY,GAAG,UAAU,CAAC,YAAY,CAAC;IACnD,KAAY,SAAS,GAAG,UAAU,CAAC,SAAS,CAAC;IAC7C,KAAY,aAAa,GAAG,oBAAoB,CAAC;IACjD,KAAY,MAAM,GAAG,gBAAgB,CAAC;IACtC,KAAY,OAAO,GAAG,aAAa,CAAC,MAAM,GAAG,WAAW,CAAC,CAAC;IAC1D,KAAY,gBAAgB,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACzD,UAAiB,WAAY,SAAQ,MAAM;QACzC,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;KAChC;IACD,KAAY,eAAe,GAAG,sBAAsB,CAAC;IACrD,KAAY,UAAU,GAAG,mBAAmB,CAAC,UAAU,CAAC;IACxD,UAAiB,YAAY;QAC3B,KAAK,EAAE,MAAM,CAAC;KACf;IAED,UAAiB,8BAA8B;QAC7C,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;KAC/C;CACF;AAGD,oBAAY,eAAe,GAAG,CAAC,gBAAgB,CAAC,MAAM,GAAG,gBAAgB,CAAC,WAAW,CAAC,GAAG;IACvF,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,aAAa,CAAC;IAC1C,MAAM,EAAE,gBAAgB,GAAG,WAAW,CAAC;CACxC,CAAC"}

package/internal/template/autosuggest/interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=interfaces.js.map

package/internal/template/autosuggest/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/autosuggest/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { FormFieldValidationControlProps } from '../internal/context/form-field-context';\nimport { OptionDefinition, OptionGroup } from '../internal/components/option/interfaces';\nimport {\n  BaseDropdownHostProps,\n  OptionsLoadItemsDetail,\n  OptionsFilteringType,\n} from '../internal/components/dropdown/interfaces';\nimport { DropdownStatusProps } from '../internal/components/dropdown-status';\nimport { BaseInputProps, InputKeyEvents, InputProps } from '../input/interfaces';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface AutosuggestProps\n  extends BaseComponentProps,\n    BaseInputProps,\n    BaseDropdownHostProps,\n    InputKeyEvents,\n    FormFieldValidationControlProps,\n    DropdownStatusProps {\n  /**\n   * Specifies an array of options that are displayed to the user as a dropdown list.\n   * The options can be grouped using `OptionGroup` objects.\n   *\n   * #### Option\n   * - `value` (string) - The returned value of the option when selected.\n   * - `label` (string) - (Optional) Option text displayed to the user.\n   * - `description` (string) - (Optional) Further information about the option that appears below the label.\n   * - `disabled` (boolean) - (Optional) Determines whether the option is disabled.\n   * - `labelTag` (string) - (Optional) A label tag that provides additional guidance, shown next to the label.\n   * - `tags` [string[]] - (Optional) A list of tags giving further guidance about the option.\n   * - `filteringTags` [string[]] - (Optional) A list of additional tags used for automatic filtering.\n   * - `iconName` (string) - (Optional) Specifies the name of an [icon](/components/icon/) to display in the option.\n   * - `iconAlt` (string) - (Optional) Specifies alternate text for a custom icon, for use with `iconUrl`.\n   * - `iconUrl` (string) - (Optional) URL of a custom icon.\n   * - `iconSvg` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   *\n   * #### OptionGroup\n   * - `label` (string) - Option group text displayed to the user.\n   * - `disabled` (boolean) - (Optional) Determines whether the option group is disabled.\n   * - `options` (Option[]) - (Optional) The options under this group.\n   *\n   * Note: Only one level of option nesting is supported.\n   *\n   * If you want to use the built-in filtering capabilities of this component, provide\n   * a list of all valid options here and they will be automatically filtered based on the user's filtering input.\n   *\n   * Alternatively, you can listen to the `onChange` or `onLoadItems` event and set new options\n   * on your own.\n   **/\n  options?: AutosuggestProps.Options;\n  /**\n   * Determines how filtering is applied to the list of `options`:\n   * * `auto` - The component will automatically filter options based on user input.\n   * * `manual` - You will set up `onChange` or `onLoadItems` event listeners and filter options on your side or request\n   * them from server.\n   *\n   * By default the component will filter the provided `options` based on the value of the filtering input field.\n   * Only options that have a `value` or `label` that contains the input value as a substring\n   * are displayed in the list of options.\n   *\n   * If you set this property to `manual`, this default filtering mechanism is disabled and all provided `options` are\n   * displayed in the dropdown list. In that case make sure that you use the `onChange` or `onLoadItems` events in order\n   * to set the `options` property to the options that are relevant for the user, given the filtering input value.\n   *\n   * Note: Manual filtering doesn't disable match highlighting.\n   **/\n  filteringType?: OptionsFilteringType;\n\n  /**\n   * Specifies a function that generates the custom value indicator (for example, `Use \"${value}\"`).\n   */\n  enteredTextLabel: AutosuggestProps.EnteredTextLabel;\n\n  /**\n   * Specifies the text that's displayed when there aren't any suggestions to display.\n   * This is displayed when `statusType` is set to `finished` or it's not set at all.\n   */\n  empty?: React.ReactNode;\n\n  /**\n   * Called whenever a user selects an option in the dropdown. Don't use this event as the only way to handle user input.\n   * Instead, use `onSelect` in combination with the `onChange` handler only as an optional convenience for the user.\n   */\n  onSelect?: NonCancelableEventHandler<AutosuggestProps.SelectDetail>;\n\n  /**\n   * Specifies the localized string that describes an option as being selected.\n   * This is required to provide a good screen reader experience. For more information, see the\n   * [accessibility guidelines](/components/autosuggest/?tabId=usage#accessibility-guidelines).\n   */\n  selectedAriaLabel?: string;\n  /**\n   * Overrides the element that is announced to screen readers\n   * when the highlighted option changes. By default, this announces\n   * the option's name and properties, and its selected state if\n   * the `selectedLabel` property is defined.\n   * The highlighted option is provided, and its group (if groups\n   * are used and it differs from the group of the previously highlighted option).\n   *\n   * For more information, see the\n   * [accessibility guidelines](/components/autosuggest/?tabId=usage#accessibility-guidelines).\n   */\n  renderHighlightedAriaLive?: AutosuggestProps.ContainingOptionAndGroupString;\n}\n\nexport namespace AutosuggestProps {\n  export type ChangeDetail = InputProps.ChangeDetail;\n  export type KeyDetail = InputProps.KeyDetail;\n  export type FilteringType = OptionsFilteringType;\n  export type Option = OptionDefinition;\n  export type Options = ReadonlyArray<Option | OptionGroup>;\n  export type EnteredTextLabel = (value: string) => string;\n  export interface OptionGroup extends Option {\n    label?: string;\n    options: ReadonlyArray<Option>;\n  }\n  export type LoadItemsDetail = OptionsLoadItemsDetail;\n  export type StatusType = DropdownStatusProps.StatusType;\n  export interface SelectDetail {\n    value: string;\n  }\n\n  export interface ContainingOptionAndGroupString {\n    (option: Option, group?: OptionGroup): string;\n  }\n}\n\n// TODO: use DropdownOption type same as in select and multiselect\nexport type AutosuggestItem = (AutosuggestProps.Option | AutosuggestProps.OptionGroup) & {\n  type?: 'parent' | 'child' | 'use-entered';\n  option: OptionDefinition | OptionGroup;\n};\n"]}

package/internal/template/autosuggest/internal.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { AutosuggestProps } from './interfaces';
+import { CancelableEventHandler } from '../internal/events';
+import { InputProps } from '../input/interfaces';
+import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
+export interface InternalAutosuggestProps extends AutosuggestProps, InternalBaseComponentProps {
+    __filterText?: string;
+    __dropdownWidth?: number;
+    __onOptionClick?: CancelableEventHandler<AutosuggestProps.Option>;
+    __disableShowAll?: boolean;
+    __hideEnteredTextOption?: boolean;
+    __onOpen?: CancelableEventHandler<null>;
+}
+declare const InternalAutosuggest: React.ForwardRefExoticComponent<InternalAutosuggestProps & React.RefAttributes<InputProps.Ref>>;
+export default InternalAutosuggest;
+//# sourceMappingURL=internal.d.ts.map

package/internal/template/autosuggest/internal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwD,MAAM,OAAO,CAAC;AAW7E,OAAO,EAAmB,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAYjE,OAAO,EAA0B,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAGpF,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAKjD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAKlF,MAAM,WAAW,wBAAyB,SAAQ,gBAAgB,EAAE,0BAA0B;IAC5F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,sBAAsB,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAClE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,QAAQ,CAAC,EAAE,sBAAsB,CAAC,IAAI,CAAC,CAAC;CACzC;AAsCD,QAAA,MAAM,mBAAmB,iGA0OvB,CAAC;AAEH,eAAe,mBAAmB,CAAC"}

package/internal/template/autosuggest/internal.js

@@ -0,0 +1,177 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import clsx from 'clsx';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useAutosuggestItems, useFilteredItems, useKeyboardHandler, useSelectVisibleOption, useHighlightVisibleOption, getParentGroup, } from './controller';
+import { useDropdownA11yProps } from './hooks/a11y';
+import VirtualList from './virtual-list';
+import PlainList from './plain-list';
+import Dropdown from '../internal/components/dropdown';
+import { useDropdownStatus } from '../internal/components/dropdown-status';
+import DropdownFooter from '../internal/components/dropdown-footer';
+import { useFormFieldContext } from '../internal/context/form-field-context';
+import { getBaseProps } from '../internal/base-component';
+import { useUniqueId } from '../internal/hooks/use-unique-id';
+import useForwardFocus from '../internal/hooks/forward-focus';
+import { fireNonCancelableEvent } from '../internal/events';
+import { createHighlightedOptionHook } from '../internal/components/options-list/utils/use-highlight-option';
+import InternalInput from '../input/internal';
+import styles from './styles.css.js';
+import { checkOptionValueField } from '../select/utils/check-option-value-field';
+import checkControlled from '../internal/hooks/check-controlled';
+import { fireCancelableEvent } from '../internal/events/index';
+import { useAnnouncement } from '../select/utils/use-announcement';
+import TabTrap from '../internal/components/tab-trap';
+var isInteractive = function (option) {
+    return !!option && !option.disabled && option.type !== 'parent';
+};
+var isHighlightable = function (option) {
+    return !!option && option.type !== 'parent';
+};
+var useHighlightedOption = createHighlightedOptionHook({ isHighlightable: isHighlightable });
+var createMouseEventHandler = function (handler, usingMouse) { return function (itemIndex) {
+    // prevent mouse events to avoid losing focus from the input
+    usingMouse.current = true;
+    if (itemIndex > -1) {
+        handler(itemIndex);
+    }
+}; };
+var useLoadMoreItems = function (onLoadItems) {
+    var lastFilteringText = useRef(null);
+    return useCallback(function (firstPage, samePage, filteringText) {
+        if (samePage || !firstPage || filteringText === undefined || lastFilteringText.current !== filteringText) {
+            if (filteringText !== undefined) {
+                lastFilteringText.current = filteringText;
+            }
+            if (lastFilteringText.current !== null && onLoadItems) {
+                fireNonCancelableEvent(onLoadItems, { filteringText: lastFilteringText.current, firstPage: firstPage, samePage: samePage });
+            }
+        }
+    }, [onLoadItems]);
+};
+var InternalAutosuggest = React.forwardRef(function (props, ref) {
+    var _a;
+    var value = props.value, onChange = props.onChange, onBlur = props.onBlur, onFocus = props.onFocus, onKeyUp = props.onKeyUp, onLoadItems = props.onLoadItems, options = props.options, _b = props.filteringType, filteringType = _b === void 0 ? 'auto' : _b, _c = props.statusType, statusType = _c === void 0 ? 'finished' : _c, placeholder = props.placeholder, name = props.name, disabled = props.disabled, _d = props.disableBrowserAutocorrect, disableBrowserAutocorrect = _d === void 0 ? false : _d, autoFocus = props.autoFocus, readOnly = props.readOnly, ariaLabel = props.ariaLabel, ariaRequired = props.ariaRequired, enteredTextLabel = props.enteredTextLabel, onKeyDown = props.onKeyDown, virtualScroll = props.virtualScroll, expandToViewport = props.expandToViewport, onSelect = props.onSelect, selectedAriaLabel = props.selectedAriaLabel, renderHighlightedAriaLive = props.renderHighlightedAriaLive, __dropdownWidth = props.__dropdownWidth, __onOptionClick = props.__onOptionClick, __disableShowAll = props.__disableShowAll, __hideEnteredTextOption = props.__hideEnteredTextOption, __onOpen = props.__onOpen, __internalRootRef = props.__internalRootRef, rest = __rest(props, ["value", "onChange", "onBlur", "onFocus", "onKeyUp", "onLoadItems", "options", "filteringType", "statusType", "placeholder", "name", "disabled", "disableBrowserAutocorrect", "autoFocus", "readOnly", "ariaLabel", "ariaRequired", "enteredTextLabel", "onKeyDown", "virtualScroll", "expandToViewport", "onSelect", "selectedAriaLabel", "renderHighlightedAriaLive", "__dropdownWidth", "__onOptionClick", "__disableShowAll", "__hideEnteredTextOption", "__onOpen", "__internalRootRef"]);
+    var filterText = rest.__filterText;
+    filterText = filterText === undefined ? value : filterText;
+    checkControlled('Autosuggest', 'value', value, 'onChange', onChange);
+    checkOptionValueField('Autosuggest', 'options', options);
+    var usingMouse = useRef(true);
+    var _e = useState(false), showAll = _e[0], setShowAll = _e[1];
+    var _f = useState(false), open = _f[0], setOpen = _f[1];
+    var autosuggestItems = useAutosuggestItems(options);
+    var filteredItems = useFilteredItems(autosuggestItems, value, filterText, filteringType, showAll, __hideEnteredTextOption);
+    var openDropdown = function () { return !readOnly && setOpen(true); };
+    var scrollToIndex = useRef(null);
+    var _g = useHighlightedOption(filteredItems), highlightedOption = _g.highlightedOption, highlightedIndex = _g.highlightedIndex, moveHighlight = _g.moveHighlight, resetHighlight = _g.resetHighlight, setHighlightedIndex = _g.setHighlightedIndex;
+    var closeDropdown = function () {
+        setOpen(false);
+        resetHighlight();
+    };
+    var handleBlur = function (event) {
+        var _a;
+        if (event.currentTarget.contains(event.relatedTarget) || ((_a = dropdownFooterRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget))) {
+            return;
+        }
+        closeDropdown();
+        fireNonCancelableEvent(onBlur);
+    };
+    var selectOption = function (option) {
+        var value = option.value || '';
+        fireNonCancelableEvent(onChange, { value: value });
+        var selectedCancelled = fireCancelableEvent(__onOptionClick, option);
+        if (!selectedCancelled) {
+            closeDropdown();
+        }
+        else {
+            resetHighlight();
+        }
+        fireNonCancelableEvent(onSelect, { value: value });
+    };
+    var selectHighlighted = function () {
+        if (highlightedOption) {
+            if (isInteractive(highlightedOption)) {
+                selectOption(highlightedOption);
+            }
+        }
+        else {
+            closeDropdown();
+        }
+    };
+    var fireLoadMore = useLoadMoreItems(onLoadItems);
+    var handleInputChange = function (e) {
+        openDropdown();
+        setShowAll(false);
+        resetHighlight();
+        onChange && onChange(e);
+    };
+    var highlightVisibleOption = useHighlightVisibleOption(filteredItems, setHighlightedIndex, isHighlightable);
+    var selectVisibleOption = useSelectVisibleOption(filteredItems, selectOption, isInteractive);
+    var handleMouseUp = createMouseEventHandler(selectVisibleOption, usingMouse);
+    var handleMouseMove = createMouseEventHandler(highlightVisibleOption, usingMouse);
+    var handleKeyDown = useKeyboardHandler(moveHighlight, openDropdown, selectHighlighted, usingMouse, open, onKeyDown);
+    var handleLoadMore = useCallback(function () {
+        options && options.length && statusType === 'pending' && fireLoadMore(false, false);
+    }, [fireLoadMore, options, statusType]);
+    var handleRecoveryClick = useCallback(function () {
+        var _a;
+        fireLoadMore(false, true);
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [fireLoadMore]);
+    var formFieldContext = useFormFieldContext(rest);
+    var baseProps = getBaseProps(rest);
+    var inputRef = useRef(null);
+    var dropdownFooterRef = useRef(null);
+    useForwardFocus(ref, inputRef);
+    var selfControlId = useUniqueId('input');
+    var controlId = (_a = formFieldContext.controlId) !== null && _a !== void 0 ? _a : selfControlId;
+    var dropdownId = useUniqueId('dropdown');
+    var listId = useUniqueId('list');
+    // From an a11y point of view we only count the dropdown as 'expanded' if there are items that a user can dropdown into
+    var expanded = open && filteredItems.length > 1;
+    var _h = useDropdownA11yProps(listId, expanded, ariaLabel, highlightedOption), inputA11yProps = _h[0], highlightedA11yProps = _h[1];
+    var nativeAttributes = __assign({ name: name, placeholder: placeholder, autoFocus: autoFocus, onClick: openDropdown }, inputA11yProps);
+    var handleInputFocus = function (e) {
+        !__disableShowAll && setShowAll(true);
+        var openPrevented = fireCancelableEvent(__onOpen, null);
+        if (!openPrevented) {
+            openDropdown();
+            fireLoadMore(true, false, '');
+        }
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+    };
+    useEffect(function () {
+        var _a;
+        (_a = scrollToIndex.current) === null || _a === void 0 ? void 0 : _a.call(scrollToIndex, highlightedIndex);
+    }, [highlightedIndex]);
+    var isEmpty = !value && !filteredItems.length;
+    var showRecoveryLink = open && statusType === 'error' && props.recoveryText;
+    var dropdownStatus = useDropdownStatus(__assign(__assign({}, props), { isEmpty: isEmpty, onRecoveryClick: handleRecoveryClick }));
+    var ListComponent = virtualScroll ? VirtualList : PlainList;
+    var handleMouseDown = function (event) {
+        // prevent currently focused element from losing it
+        event.preventDefault();
+    };
+    var announcement = useAnnouncement({
+        announceSelected: true,
+        highlightedOption: highlightedOption,
+        getParent: function (option) { var _a; return (_a = getParentGroup(option)) === null || _a === void 0 ? void 0 : _a.option; },
+        selectedAriaLabel: selectedAriaLabel,
+        renderHighlightedAriaLive: renderHighlightedAriaLive
+    });
+    return (React.createElement("div", __assign({}, baseProps, { className: clsx(styles.root, baseProps.className), ref: __internalRootRef, onBlur: handleBlur }),
+        React.createElement(Dropdown, { minWidth: __dropdownWidth, stretchWidth: !__dropdownWidth, trigger: React.createElement(React.Fragment, null,
+                React.createElement(InternalInput, __assign({ type: "search", value: value, onChange: handleInputChange, __onDelayedInput: function (event) { return fireLoadMore(true, false, event.detail.value); }, onFocus: handleInputFocus, onKeyDown: handleKeyDown, onKeyUp: onKeyUp, disabled: disabled, disableBrowserAutocorrect: disableBrowserAutocorrect, readOnly: readOnly, ariaRequired: ariaRequired, ref: inputRef, autoComplete: false, __nativeAttributes: nativeAttributes }, formFieldContext, { controlId: controlId })),
+                React.createElement(TabTrap, { focusNextCallback: function () { return dropdownStatus.focusRecoveryLink(); }, disabled: !open || !showRecoveryLink })), onMouseDown: handleMouseDown, open: open, dropdownId: dropdownId, footer: dropdownStatus.isSticky ? (React.createElement("div", { ref: dropdownFooterRef, className: styles['dropdown-footer'] },
+                React.createElement(TabTrap, { focusNextCallback: function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, disabled: !showRecoveryLink }),
+                React.createElement(DropdownFooter, { content: dropdownStatus.content, hasItems: filteredItems.length >= 1 }),
+                React.createElement(TabTrap, { focusNextCallback: function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, disabled: !showRecoveryLink }))) : null, expandToViewport: expandToViewport, hasContent: filteredItems.length >= 1 || dropdownStatus.content !== null }, open && (React.createElement(ListComponent, { listBottom: !dropdownStatus.isSticky ? React.createElement(DropdownFooter, { content: dropdownStatus.content }) : null, handleLoadMore: handleLoadMore, filteredItems: filteredItems, highlightText: filterText, usingMouse: usingMouse, highlightedOption: highlightedOption, enteredTextLabel: enteredTextLabel, ref: scrollToIndex, highlightedA11yProps: highlightedA11yProps, hasDropdownStatus: dropdownStatus.content !== null, menuProps: {
+                id: listId,
+                onMouseUp: handleMouseUp,
+                onMouseMove: handleMouseMove,
+                ariaLabelledby: controlId
+            }, screenReaderContent: announcement })))));
+});
+export default InternalAutosuggest;
+//# sourceMappingURL=internal.js.map

package/internal/template/autosuggest/internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/autosuggest/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { Ref, useCallback, useEffect, useRef, useState } from 'react';\n\nimport {\n  useAutosuggestItems,\n  useFilteredItems,\n  useKeyboardHandler,\n  useSelectVisibleOption,\n  useHighlightVisibleOption,\n  getParentGroup,\n} from './controller';\nimport { useDropdownA11yProps } from './hooks/a11y';\nimport { AutosuggestItem, AutosuggestProps } from './interfaces';\nimport VirtualList from './virtual-list';\nimport PlainList from './plain-list';\n\nimport Dropdown from '../internal/components/dropdown';\nimport { useDropdownStatus } from '../internal/components/dropdown-status';\nimport DropdownFooter from '../internal/components/dropdown-footer';\n\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { getBaseProps } from '../internal/base-component';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { fireNonCancelableEvent, CancelableEventHandler } from '../internal/events';\nimport { createHighlightedOptionHook } from '../internal/components/options-list/utils/use-highlight-option';\nimport InternalInput from '../input/internal';\nimport { InputProps } from '../input/interfaces';\nimport styles from './styles.css.js';\nimport { checkOptionValueField } from '../select/utils/check-option-value-field';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport { fireCancelableEvent } from '../internal/events/index';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useAnnouncement } from '../select/utils/use-announcement';\nimport { OptionGroup } from '../internal/components/option/interfaces';\nimport TabTrap from '../internal/components/tab-trap';\n\nexport interface InternalAutosuggestProps extends AutosuggestProps, InternalBaseComponentProps {\n  __filterText?: string;\n  __dropdownWidth?: number;\n  __onOptionClick?: CancelableEventHandler<AutosuggestProps.Option>;\n  __disableShowAll?: boolean;\n  __hideEnteredTextOption?: boolean;\n  __onOpen?: CancelableEventHandler<null>;\n}\n\nconst isInteractive = (option?: AutosuggestItem) => {\n  return !!option && !option.disabled && option.type !== 'parent';\n};\n\nconst isHighlightable = (option?: AutosuggestItem) => {\n  return !!option && option.type !== 'parent';\n};\n\nconst useHighlightedOption = createHighlightedOptionHook({ isHighlightable: isHighlightable });\n\nconst createMouseEventHandler =\n  (handler: (index: number) => void, usingMouse: React.MutableRefObject<boolean>) => (itemIndex: number) => {\n    // prevent mouse events to avoid losing focus from the input\n    usingMouse.current = true;\n    if (itemIndex > -1) {\n      handler(itemIndex);\n    }\n  };\n\nconst useLoadMoreItems = (onLoadItems: AutosuggestProps['onLoadItems']) => {\n  const lastFilteringText = useRef<string | null>(null);\n  return useCallback(\n    (firstPage: boolean, samePage: boolean, filteringText?: string) => {\n      if (samePage || !firstPage || filteringText === undefined || lastFilteringText.current !== filteringText) {\n        if (filteringText !== undefined) {\n          lastFilteringText.current = filteringText;\n        }\n        if (lastFilteringText.current !== null && onLoadItems) {\n          fireNonCancelableEvent(onLoadItems, { filteringText: lastFilteringText.current, firstPage, samePage });\n        }\n      }\n    },\n    [onLoadItems]\n  );\n};\n\nconst InternalAutosuggest = React.forwardRef((props: InternalAutosuggestProps, ref: Ref<InputProps.Ref>) => {\n  const {\n    value,\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyUp,\n    onLoadItems,\n    options,\n    filteringType = 'auto',\n    statusType = 'finished',\n    placeholder,\n    name,\n    disabled,\n    disableBrowserAutocorrect = false,\n    autoFocus,\n    readOnly,\n    ariaLabel,\n    ariaRequired,\n    enteredTextLabel,\n    onKeyDown,\n    virtualScroll,\n    expandToViewport,\n    onSelect,\n    selectedAriaLabel,\n    renderHighlightedAriaLive,\n    __dropdownWidth,\n    __onOptionClick,\n    __disableShowAll,\n    __hideEnteredTextOption,\n    __onOpen,\n    __internalRootRef,\n    ...rest\n  } = props;\n  let { __filterText: filterText } = rest;\n  filterText = filterText === undefined ? value : filterText;\n\n  checkControlled('Autosuggest', 'value', value, 'onChange', onChange);\n  checkOptionValueField('Autosuggest', 'options', options);\n\n  const usingMouse = useRef(true);\n  const [showAll, setShowAll] = useState(false);\n  const [open, setOpen] = useState(false);\n  const autosuggestItems = useAutosuggestItems(options);\n  const filteredItems = useFilteredItems(\n    autosuggestItems,\n    value,\n    filterText,\n    filteringType,\n    showAll,\n    __hideEnteredTextOption\n  );\n  const openDropdown = () => !readOnly && setOpen(true);\n  const scrollToIndex = useRef<(index: number) => void>(null);\n  const { highlightedOption, highlightedIndex, moveHighlight, resetHighlight, setHighlightedIndex } =\n    useHighlightedOption(filteredItems);\n  const closeDropdown = () => {\n    setOpen(false);\n    resetHighlight();\n  };\n  const handleBlur: React.FocusEventHandler = event => {\n    if (event.currentTarget.contains(event.relatedTarget) || dropdownFooterRef.current?.contains(event.relatedTarget)) {\n      return;\n    }\n    closeDropdown();\n    fireNonCancelableEvent(onBlur);\n  };\n  const selectOption = (option: AutosuggestItem) => {\n    const value = option.value || '';\n    fireNonCancelableEvent(onChange, { value });\n    const selectedCancelled = fireCancelableEvent(__onOptionClick, option);\n    if (!selectedCancelled) {\n      closeDropdown();\n    } else {\n      resetHighlight();\n    }\n    fireNonCancelableEvent(onSelect, { value });\n  };\n  const selectHighlighted = () => {\n    if (highlightedOption) {\n      if (isInteractive(highlightedOption)) {\n        selectOption(highlightedOption);\n      }\n    } else {\n      closeDropdown();\n    }\n  };\n\n  const fireLoadMore = useLoadMoreItems(onLoadItems);\n\n  const handleInputChange: InputProps['onChange'] = e => {\n    openDropdown();\n    setShowAll(false);\n    resetHighlight();\n    onChange && onChange(e);\n  };\n\n  const highlightVisibleOption = useHighlightVisibleOption(filteredItems, setHighlightedIndex, isHighlightable);\n  const selectVisibleOption = useSelectVisibleOption(filteredItems, selectOption, isInteractive);\n  const handleMouseUp = createMouseEventHandler(selectVisibleOption, usingMouse);\n  const handleMouseMove = createMouseEventHandler(highlightVisibleOption, usingMouse);\n  const handleKeyDown = useKeyboardHandler(moveHighlight, openDropdown, selectHighlighted, usingMouse, open, onKeyDown);\n  const handleLoadMore = useCallback(() => {\n    options && options.length && statusType === 'pending' && fireLoadMore(false, false);\n  }, [fireLoadMore, options, statusType]);\n  const handleRecoveryClick = useCallback(() => {\n    fireLoadMore(false, true);\n    inputRef.current?.focus();\n  }, [fireLoadMore]);\n\n  const formFieldContext = useFormFieldContext(rest);\n  const baseProps = getBaseProps(rest);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const dropdownFooterRef = useRef<HTMLDivElement>(null);\n  useForwardFocus(ref, inputRef);\n\n  const selfControlId = useUniqueId('input');\n  const controlId = formFieldContext.controlId ?? selfControlId;\n  const dropdownId = useUniqueId('dropdown');\n  const listId = useUniqueId('list');\n\n  // From an a11y point of view we only count the dropdown as 'expanded' if there are items that a user can dropdown into\n  const expanded = open && filteredItems.length > 1;\n  const [inputA11yProps, highlightedA11yProps] = useDropdownA11yProps(listId, expanded, ariaLabel, highlightedOption);\n\n  const nativeAttributes = {\n    name,\n    placeholder,\n    autoFocus,\n    onClick: openDropdown,\n    ...inputA11yProps,\n  };\n  const handleInputFocus: InputProps['onFocus'] = e => {\n    !__disableShowAll && setShowAll(true);\n    const openPrevented = fireCancelableEvent(__onOpen, null);\n    if (!openPrevented) {\n      openDropdown();\n      fireLoadMore(true, false, '');\n    }\n    onFocus?.(e);\n  };\n\n  useEffect(() => {\n    scrollToIndex.current?.(highlightedIndex);\n  }, [highlightedIndex]);\n\n  const isEmpty = !value && !filteredItems.length;\n  const showRecoveryLink = open && statusType === 'error' && props.recoveryText;\n  const dropdownStatus = useDropdownStatus({ ...props, isEmpty, onRecoveryClick: handleRecoveryClick });\n  const ListComponent = virtualScroll ? VirtualList : PlainList;\n\n  const handleMouseDown = (event: React.MouseEvent) => {\n    // prevent currently focused element from losing it\n    event.preventDefault();\n  };\n\n  const announcement = useAnnouncement({\n    announceSelected: true,\n    highlightedOption,\n    getParent: option => getParentGroup(option)?.option as undefined | OptionGroup,\n    selectedAriaLabel,\n    renderHighlightedAriaLive,\n  });\n\n  return (\n    <div {...baseProps} className={clsx(styles.root, baseProps.className)} ref={__internalRootRef} onBlur={handleBlur}>\n      <Dropdown\n        minWidth={__dropdownWidth}\n        stretchWidth={!__dropdownWidth}\n        trigger={\n          <>\n            <InternalInput\n              type=\"search\"\n              value={value}\n              onChange={handleInputChange}\n              __onDelayedInput={event => fireLoadMore(true, false, event.detail.value)}\n              onFocus={handleInputFocus}\n              onKeyDown={handleKeyDown}\n              onKeyUp={onKeyUp}\n              disabled={disabled}\n              disableBrowserAutocorrect={disableBrowserAutocorrect}\n              readOnly={readOnly}\n              ariaRequired={ariaRequired}\n              ref={inputRef}\n              autoComplete={false}\n              __nativeAttributes={nativeAttributes}\n              {...formFieldContext}\n              controlId={controlId}\n            />\n            <TabTrap\n              focusNextCallback={() => dropdownStatus.focusRecoveryLink()}\n              disabled={!open || !showRecoveryLink}\n            />\n          </>\n        }\n        onMouseDown={handleMouseDown}\n        open={open}\n        dropdownId={dropdownId}\n        footer={\n          dropdownStatus.isSticky ? (\n            <div ref={dropdownFooterRef} className={styles['dropdown-footer']}>\n              <TabTrap focusNextCallback={() => inputRef.current?.focus()} disabled={!showRecoveryLink} />\n              <DropdownFooter content={dropdownStatus.content} hasItems={filteredItems.length >= 1} />\n              <TabTrap focusNextCallback={() => inputRef.current?.focus()} disabled={!showRecoveryLink} />\n            </div>\n          ) : null\n        }\n        expandToViewport={expandToViewport}\n        hasContent={filteredItems.length >= 1 || dropdownStatus.content !== null}\n      >\n        {open && (\n          <ListComponent\n            listBottom={!dropdownStatus.isSticky ? <DropdownFooter content={dropdownStatus.content} /> : null}\n            handleLoadMore={handleLoadMore}\n            filteredItems={filteredItems}\n            highlightText={filterText}\n            usingMouse={usingMouse}\n            highlightedOption={highlightedOption}\n            enteredTextLabel={enteredTextLabel}\n            ref={scrollToIndex}\n            highlightedA11yProps={highlightedA11yProps}\n            hasDropdownStatus={dropdownStatus.content !== null}\n            menuProps={{\n              id: listId,\n              onMouseUp: handleMouseUp,\n              onMouseMove: handleMouseMove,\n              ariaLabelledby: controlId,\n            }}\n            screenReaderContent={announcement}\n          />\n        )}\n      </Dropdown>\n    </div>\n  );\n});\n\nexport default InternalAutosuggest;\n"]}

package/internal/template/autosuggest/plain-list.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { OptionsListProps } from '../internal/components/options-list';
+import { AutosuggestProps, AutosuggestItem } from './interfaces';
+export interface ListProps {
+    menuProps: Omit<OptionsListProps, 'children'>;
+    handleLoadMore: () => void;
+    filteredItems: AutosuggestItem[];
+    usingMouse: React.MutableRefObject<boolean>;
+    highlightedOption?: AutosuggestItem;
+    enteredTextLabel: AutosuggestProps.EnteredTextLabel;
+    highlightedA11yProps: Record<string, string | number | boolean>;
+    hasDropdownStatus?: boolean;
+    highlightText: string;
+    listBottom?: React.ReactNode;
+    screenReaderContent?: string;
+}
+declare namespace PlainListProps {
+    type PlainListRef = (index: number) => void;
+}
+export declare const getOptionProps: (index: number, item: AutosuggestItem, filteredItems: AutosuggestItem[], highlightedA11yProps: ListProps['highlightedA11yProps'], highlightedOption?: ListProps['highlightedOption'], hasDropdownStatus?: boolean | undefined) => {
+    className?: string | undefined;
+    id?: string | undefined;
+    nativeAttributes: Record<string, string | number | boolean>;
+    padBottom: boolean;
+};
+declare const _default: React.ForwardRefExoticComponent<ListProps & React.RefAttributes<PlainListProps.PlainListRef>>;
+export default _default;
+//# sourceMappingURL=plain-list.d.ts.map

package/internal/template/autosuggest/plain-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plain-list.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/plain-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAEvE,OAAoB,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAKpF,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAGjE,MAAM,WAAW,SAAS;IACxB,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;IAC9C,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,EAAE,eAAe,EAAE,CAAC;IACjC,UAAU,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC5C,iBAAiB,CAAC,EAAE,eAAe,CAAC;IACpC,gBAAgB,EAAE,gBAAgB,CAAC,gBAAgB,CAAC;IACpD,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;IAChE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,kBAAU,cAAc,CAAC;IACvB,KAAY,YAAY,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAED,eAAO,MAAM,cAAc,UAClB,MAAM,QACP,eAAe,iBACN,eAAe,EAAE,wBACV,SAAS,CAAC,sBAAsB,CAAC,sBACnC,SAAS,CAAC,mBAAmB,CAAC;;;;;CAUnD,CAAC;;AAuEF,wBAAqC"}

package/internal/template/autosuggest/plain-list.js

@@ -0,0 +1,38 @@
+import { __assign } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import OptionsList from '../internal/components/options-list';
+import { scrollUntilVisible } from '../internal/utils/scrollable-containers';
+import { getBaseProps } from '../internal/base-component';
+import AutosuggestOption from './autosuggest-option';
+import styles from './styles.css.js';
+export var getOptionProps = function (index, item, filteredItems, highlightedA11yProps, highlightedOption, hasDropdownStatus) {
+    var nativeAttributes = item === highlightedOption ? highlightedA11yProps : {};
+    var baseOptionProps = getBaseProps(nativeAttributes);
+    var isLastItem = index === filteredItems.length - 1;
+    var isNotEnteredTextItem = filteredItems.length > 1;
+    var padBottom = !hasDropdownStatus && isNotEnteredTextItem && isLastItem;
+    return __assign({ nativeAttributes: nativeAttributes, padBottom: padBottom }, baseOptionProps);
+};
+var PlainList = function (_a, ref) {
+    var handleLoadMore = _a.handleLoadMore, filteredItems = _a.filteredItems, usingMouse = _a.usingMouse, menuProps = _a.menuProps, highlightedOption = _a.highlightedOption, enteredTextLabel = _a.enteredTextLabel, highlightedA11yProps = _a.highlightedA11yProps, hasDropdownStatus = _a.hasDropdownStatus, highlightText = _a.highlightText, listBottom = _a.listBottom, screenReaderContent = _a.screenReaderContent;
+    var listRef = useRef(null);
+    useImperativeHandle(ref, function () { return function (index) {
+        var _a;
+        var item = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("[data-mouse-target=\"".concat(index, "\"]"));
+        if (!usingMouse.current && item) {
+            scrollUntilVisible(item);
+        }
+    }; }, [usingMouse, listRef]);
+    return (React.createElement(OptionsList, __assign({}, menuProps, { onLoadMore: handleLoadMore, open: true, ref: listRef, 
+        // to prevent closing the list when clicking the scrollbar on IE11
+        nativeAttributes: { unselectable: 'on' } }),
+        filteredItems.map(function (item, index) {
+            var optionProps = getOptionProps(index, item, filteredItems, highlightedA11yProps, highlightedOption, hasDropdownStatus);
+            return (React.createElement(AutosuggestOption, __assign({ highlightText: highlightText, option: item, highlighted: item === highlightedOption, key: index, "data-mouse-target": index, enteredTextLabel: enteredTextLabel, screenReaderContent: screenReaderContent }, optionProps)));
+        }),
+        listBottom ? (React.createElement("li", { role: "option", className: styles['list-bottom'] }, listBottom)) : null));
+};
+export default forwardRef(PlainList);
+//# sourceMappingURL=plain-list.js.map

package/internal/template/autosuggest/plain-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plain-list.js","sourceRoot":"","sources":["../../../src/autosuggest/plain-list.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useImperativeHandle, useRef } from 'react';\n\nimport OptionsList, { OptionsListProps } from '../internal/components/options-list';\nimport { scrollUntilVisible } from '../internal/utils/scrollable-containers';\nimport { getBaseProps } from '../internal/base-component';\n\nimport AutosuggestOption from './autosuggest-option';\nimport { AutosuggestProps, AutosuggestItem } from './interfaces';\nimport styles from './styles.css.js';\n\nexport interface ListProps {\n  menuProps: Omit<OptionsListProps, 'children'>;\n  handleLoadMore: () => void;\n  filteredItems: AutosuggestItem[];\n  usingMouse: React.MutableRefObject<boolean>;\n  highlightedOption?: AutosuggestItem;\n  enteredTextLabel: AutosuggestProps.EnteredTextLabel;\n  highlightedA11yProps: Record<string, string | number | boolean>;\n  hasDropdownStatus?: boolean;\n  highlightText: string;\n  listBottom?: React.ReactNode;\n  screenReaderContent?: string;\n}\n\nnamespace PlainListProps {\n  export type PlainListRef = (index: number) => void;\n}\n\nexport const getOptionProps = (\n  index: number,\n  item: AutosuggestItem,\n  filteredItems: AutosuggestItem[],\n  highlightedA11yProps: ListProps['highlightedA11yProps'],\n  highlightedOption?: ListProps['highlightedOption'],\n  hasDropdownStatus?: boolean\n) => {\n  const nativeAttributes = item === highlightedOption ? highlightedA11yProps : {};\n  const baseOptionProps = getBaseProps(nativeAttributes);\n  const isLastItem = index === filteredItems.length - 1;\n  const isNotEnteredTextItem = filteredItems.length > 1;\n  const padBottom = !hasDropdownStatus && isNotEnteredTextItem && isLastItem;\n\n  return { nativeAttributes, padBottom, ...baseOptionProps };\n};\n\nconst PlainList = (\n  {\n    handleLoadMore,\n    filteredItems,\n    usingMouse,\n    menuProps,\n    highlightedOption,\n    enteredTextLabel,\n    highlightedA11yProps,\n    hasDropdownStatus,\n    highlightText,\n    listBottom,\n    screenReaderContent,\n  }: ListProps,\n  ref: React.Ref<PlainListProps.PlainListRef>\n) => {\n  const listRef = useRef<HTMLUListElement>(null);\n  useImperativeHandle(\n    ref,\n    () => (index: number) => {\n      const item = listRef.current?.querySelector(`[data-mouse-target=\"${index}\"]`);\n      if (!usingMouse.current && item) {\n        scrollUntilVisible(item as HTMLElement);\n      }\n    },\n    [usingMouse, listRef]\n  );\n\n  return (\n    <OptionsList\n      {...menuProps}\n      onLoadMore={handleLoadMore}\n      open={true}\n      ref={listRef}\n      // to prevent closing the list when clicking the scrollbar on IE11\n      nativeAttributes={{ unselectable: 'on' }}\n    >\n      {filteredItems.map((item, index) => {\n        const optionProps = getOptionProps(\n          index,\n          item,\n          filteredItems,\n          highlightedA11yProps,\n          highlightedOption,\n          hasDropdownStatus\n        );\n\n        return (\n          <AutosuggestOption\n            highlightText={highlightText}\n            option={item}\n            highlighted={item === highlightedOption}\n            key={index}\n            data-mouse-target={index}\n            enteredTextLabel={enteredTextLabel}\n            screenReaderContent={screenReaderContent}\n            {...optionProps}\n          />\n        );\n      })}\n      {listBottom ? (\n        <li role=\"option\" className={styles['list-bottom']}>\n          {listBottom}\n        </li>\n      ) : null}\n    </OptionsList>\n  );\n};\n\nexport default forwardRef(PlainList);\n"]}

package/internal/template/autosuggest/styles.css.js

@@ -0,0 +1,9 @@
+
+    import './styles.scoped.css';
+    export default {
+  "root": "awsui_root_12hwc_1ej6r_5",
+  "layout-strut": "awsui_layout-strut_12hwc_1ej6r_9",
+  "dropdown-footer": "awsui_dropdown-footer_12hwc_1ej6r_15",
+  "list-bottom": "awsui_list-bottom_12hwc_1ej6r_20"
+};
+  

package/internal/template/autosuggest/styles.scoped.css

@@ -0,0 +1,22 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_root_12hwc_1ej6r_5:not(#\9) {
+  width: 100%;
+}
+
+.awsui_layout-strut_12hwc_1ej6r_9:not(#\9) {
+  width: 100%;
+  position: relative;
+  transform: translate3d(0, 0, 0);
+}
+
+.awsui_dropdown-footer_12hwc_1ej6r_15:not(#\9) {
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.awsui_list-bottom_12hwc_1ej6r_20:not(#\9) {
+  /* used in unit-tests */
+}

package/internal/template/autosuggest/styles.selectors.js

@@ -0,0 +1,10 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "root": "awsui_root_12hwc_1ej6r_5",
+  "layout-strut": "awsui_layout-strut_12hwc_1ej6r_9",
+  "dropdown-footer": "awsui_dropdown-footer_12hwc_1ej6r_15",
+  "list-bottom": "awsui_list-bottom_12hwc_1ej6r_20"
+};
+  

package/internal/template/autosuggest/utils/utils.d.ts

@@ -0,0 +1,3 @@
+import { AutosuggestItem } from '../interfaces';
+export declare const filterOptions: (options: AutosuggestItem[], text: string) => AutosuggestItem[];
+//# sourceMappingURL=utils.d.ts.map

package/internal/template/autosuggest/utils/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/autosuggest/utils/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAgBhD,eAAO,MAAM,aAAa,YAAa,eAAe,EAAE,QAAQ,MAAM,KAAG,eAAe,EAYvF,CAAC"}

package/internal/template/autosuggest/utils/utils.js

@@ -0,0 +1,35 @@
+var isGroup = function (option) { return 'type' in option && option.type === 'parent'; };
+var popLastGroup = function (options) {
+    if (options.length) {
+        var lastOption = options[options.length - 1];
+        if (isGroup(lastOption)) {
+            options.pop();
+        }
+    }
+};
+export var filterOptions = function (options, text) {
+    var filteredOptions = options.reduce(function (filteredIn, option) {
+        if (isGroup(option)) {
+            popLastGroup(filteredIn);
+            filteredIn.push(option);
+        }
+        else if (matchSingleOption(option, text)) {
+            filteredIn.push(option);
+        }
+        return filteredIn;
+    }, []);
+    popLastGroup(filteredOptions);
+    return filteredOptions;
+};
+var matchSingleOption = function (option, text) {
+    var searchableFields = ['value', 'label', 'description', 'labelTag'];
+    var searchableTagFields = ['tags', 'filteringTags'];
+    var searchText = text.toLowerCase();
+    var searchStrFieldsFn = function (attr) { return matchString(option[attr], searchText); };
+    var searchTagsFieldsFn = function (attr) { var _a; return (_a = option[attr]) === null || _a === void 0 ? void 0 : _a.some(function (value) { return matchString(value, searchText); }); };
+    return searchableFields.some(searchStrFieldsFn) || searchableTagFields.some(searchTagsFieldsFn);
+};
+var matchString = function (value, searchText) {
+    return value && value.toLowerCase().indexOf(searchText) !== -1;
+};
+//# sourceMappingURL=utils.js.map

package/internal/template/autosuggest/utils/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/autosuggest/utils/utils.ts"],"names":[],"mappings":"AAOA,IAAM,OAAO,GAAG,UAAC,MAAuB,IAAK,OAAA,MAAM,IAAI,MAAM,IAAI,MAAM,CAAC,IAAI,KAAK,QAAQ,EAA5C,CAA4C,CAAC;AAE1F,IAAM,YAAY,GAAG,UAAC,OAA0B;IAC9C,IAAI,OAAO,CAAC,MAAM,EAAE;QAClB,IAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAC/C,IAAI,OAAO,CAAC,UAAU,CAAC,EAAE;YACvB,OAAO,CAAC,GAAG,EAAE,CAAC;SACf;KACF;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,aAAa,GAAG,UAAC,OAA0B,EAAE,IAAY;IACpE,IAAM,eAAe,GAAG,OAAO,CAAC,MAAM,CAAoB,UAAC,UAAU,EAAE,MAAM;QAC3E,IAAI,OAAO,CAAC,MAAM,CAAC,EAAE;YACnB,YAAY,CAAC,UAAU,CAAC,CAAC;YACzB,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SACzB;aAAM,IAAI,iBAAiB,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE;YAC1C,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SACzB;QACD,OAAO,UAAU,CAAC;IACpB,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,YAAY,CAAC,eAAe,CAAC,CAAC;IAC9B,OAAO,eAAe,CAAC;AACzB,CAAC,CAAC;AAEF,IAAM,iBAAiB,GAAG,UAAC,MAAuB,EAAE,IAAY;IAC9D,IAAM,gBAAgB,GAAuB,CAAC,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,UAAU,CAAC,CAAC;IAC3F,IAAM,mBAAmB,GAA0B,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;IAE7E,IAAM,UAAU,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;IAEtC,IAAM,iBAAiB,GAAG,UAAC,IAAsB,IAAK,OAAA,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,EAArC,CAAqC,CAAC;IAC5F,IAAM,kBAAkB,GAAG,UAAC,IAAyB,YAAK,OAAA,MAAA,MAAM,CAAC,IAAI,CAAC,0CAAE,IAAI,CAAC,UAAA,KAAK,IAAI,OAAA,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC,EAA9B,CAA8B,CAAC,CAAA,EAAA,CAAC;IAEtH,OAAO,gBAAgB,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,mBAAmB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;AAClG,CAAC,CAAC;AAEF,IAAM,WAAW,GAAG,UAAC,KAAyB,EAAE,UAAkB;IAChE,OAAO,KAAK,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC;AACjE,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { AutosuggestItem } from '../interfaces';\n\ntype SearchableFields = 'value' | 'label' | 'description' | 'labelTag';\ntype SearchableTagFields = 'tags' | 'filteringTags';\n\nconst isGroup = (option: AutosuggestItem) => 'type' in option && option.type === 'parent';\n\nconst popLastGroup = (options: AutosuggestItem[]) => {\n  if (options.length) {\n    const lastOption = options[options.length - 1];\n    if (isGroup(lastOption)) {\n      options.pop();\n    }\n  }\n};\n\nexport const filterOptions = (options: AutosuggestItem[], text: string): AutosuggestItem[] => {\n  const filteredOptions = options.reduce<AutosuggestItem[]>((filteredIn, option) => {\n    if (isGroup(option)) {\n      popLastGroup(filteredIn);\n      filteredIn.push(option);\n    } else if (matchSingleOption(option, text)) {\n      filteredIn.push(option);\n    }\n    return filteredIn;\n  }, []);\n  popLastGroup(filteredOptions);\n  return filteredOptions;\n};\n\nconst matchSingleOption = (option: AutosuggestItem, text: string): boolean => {\n  const searchableFields: SearchableFields[] = ['value', 'label', 'description', 'labelTag'];\n  const searchableTagFields: SearchableTagFields[] = ['tags', 'filteringTags'];\n\n  const searchText = text.toLowerCase();\n\n  const searchStrFieldsFn = (attr: SearchableFields) => matchString(option[attr], searchText);\n  const searchTagsFieldsFn = (attr: SearchableTagFields) => option[attr]?.some(value => matchString(value, searchText));\n\n  return searchableFields.some(searchStrFieldsFn) || searchableTagFields.some(searchTagsFieldsFn);\n};\n\nconst matchString = (value: string | undefined, searchText: string) => {\n  return value && value.toLowerCase().indexOf(searchText) !== -1;\n};\n"]}

package/internal/template/autosuggest/virtual-list.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ListProps } from './plain-list';
+declare namespace VirtualListProps {
+    type VirtualListRef = (index: number) => void;
+}
+declare const _default: React.ForwardRefExoticComponent<ListProps & React.RefAttributes<VirtualListProps.VirtualListRef>>;
+export default _default;
+//# sourceMappingURL=virtual-list.d.ts.map

package/internal/template/autosuggest/virtual-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"virtual-list.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/virtual-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+D,MAAM,OAAO,CAAC;AAOpF,OAAO,EAAkB,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzD,kBAAU,gBAAgB,CAAC;IACzB,KAAY,cAAc,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtD;;AA+FD,wBAAuC"}