@cloudscape-design/components 3.0.29 → 3.0.32

package/autosuggest/options-controller.d.ts

@@ -0,0 +1,25 @@
+import { MutableRefObject } from 'react';
+import { AutosuggestItem, AutosuggestProps } from './interfaces';
+declare type Options = AutosuggestProps.Options;
+export interface UseAutosuggestItemsProps {
+    options: Options;
+    filterValue: string;
+    filterText: string;
+    filteringType: AutosuggestProps.FilteringType;
+    isKeyboard: MutableRefObject<boolean>;
+    hideEnteredTextLabel?: boolean;
+}
+export declare const getParentGroup: (item: AutosuggestItem) => AutosuggestItem | undefined;
+export declare const useAutosuggestItems: ({ options, filterValue, filterText, filteringType, isKeyboard, hideEnteredTextLabel, }: UseAutosuggestItemsProps) => {
+    showAll: boolean;
+    setShowAll: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    items: AutosuggestItem[];
+    highlightedIndex: number;
+    highlightedType: "mouse" | "keyboard";
+    highlightedOption: AutosuggestItem | undefined;
+    setHighlightedIndex: (index: number) => void;
+    moveHighlight: (direction: 1 | -1) => void;
+    resetHighlight: () => void;
+};
+export {};
+//# sourceMappingURL=options-controller.d.ts.map

package/autosuggest/options-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"options-controller.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/options-controller.ts"],"names":[],"mappings":"AAGA,OAAO,EAAqB,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAG5D,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAGjE,aAAK,OAAO,GAAG,gBAAgB,CAAC,OAAO,CAAC;AAExC,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,gBAAgB,CAAC,aAAa,CAAC;IAC9C,UAAU,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACtC,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AASD,eAAO,MAAM,cAAc,SAAU,eAAe,gCAAwB,CAAC;AAE7E,eAAO,MAAM,mBAAmB,2FAO7B,wBAAwB;;;;;;;;;;CA4B1B,CAAC"}

package/autosuggest/options-controller.js

@@ -0,0 +1,64 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { __assign, __rest, __spreadArray } from "tslib";
+import { useMemo, useState } from 'react';
+import { filterOptions } from './utils/utils';
+import { generateTestIndexes } from '../internal/components/options-list/utils/test-indexes';
+import { createHighlightedOptionHook } from '../internal/components/options-list/utils/use-highlight-option';
+var isHighlightable = function (option) {
+    return !!option && option.type !== 'parent';
+};
+var useHighlightedOption = createHighlightedOptionHook({ isHighlightable: isHighlightable });
+var parentMap = new WeakMap();
+export var getParentGroup = function (item) { return parentMap.get(item); };
+export var useAutosuggestItems = function (_a) {
+    var options = _a.options, filterValue = _a.filterValue, filterText = _a.filterText, filteringType = _a.filteringType, isKeyboard = _a.isKeyboard, hideEnteredTextLabel = _a.hideEnteredTextLabel;
+    var _b = useState(false), showAll = _b[0], setShowAll = _b[1];
+    var items = useMemo(function () { return createItems(options); }, [options]);
+    var filteredItems = useMemo(function () {
+        var filteredItems = filteringType === 'auto' && !showAll ? filterOptions(items, filterText) : __spreadArray([], items, true);
+        if (filterValue && !hideEnteredTextLabel) {
+            filteredItems.unshift({ value: filterValue, type: 'use-entered', option: { value: filterValue } });
+        }
+        generateTestIndexes(filteredItems, getParentGroup);
+        return filteredItems;
+    }, [items, filterValue, filterText, filteringType, showAll, hideEnteredTextLabel]);
+    var _c = useHighlightedOption({ options: filteredItems, isKeyboard: isKeyboard }), highlightedOption = _c.highlightedOption, highlightedIndex = _c.highlightedIndex, highlightedType = _c.highlightedType, moveHighlight = _c.moveHighlight, resetHighlight = _c.resetHighlight, setHighlightedIndex = _c.setHighlightedIndex;
+    return {
+        showAll: showAll,
+        setShowAll: setShowAll,
+        items: filteredItems,
+        highlightedIndex: highlightedIndex,
+        highlightedType: highlightedType,
+        highlightedOption: highlightedOption,
+        setHighlightedIndex: setHighlightedIndex,
+        moveHighlight: moveHighlight,
+        resetHighlight: resetHighlight
+    };
+};
+function createItems(options) {
+    var items = [];
+    for (var _i = 0, options_1 = options; _i < options_1.length; _i++) {
+        var option = options_1[_i];
+        if (isGroup(option)) {
+            items.push.apply(items, flattenGroup(option));
+        }
+        else {
+            items.push(__assign(__assign({}, option), { option: option }));
+        }
+    }
+    return items;
+}
+function isGroup(optionOrGroup) {
+    return 'options' in optionOrGroup;
+}
+function flattenGroup(group) {
+    var options = group.options, rest = __rest(group, ["options"]);
+    var hasOnlyDisabledChildren = options.every(function (option) { return option.disabled; });
+    var parent = __assign(__assign({}, rest), { type: 'parent', disabled: rest.disabled || hasOnlyDisabledChildren, option: group });
+    var children = options.map(function (option) { return (__assign(__assign({}, option), { type: 'child', disabled: option.disabled || parent.disabled, option: option })); });
+    // TODO: Refactor parentMap and remove this side effect
+    children.forEach(function (child) { return parentMap.set(child, __assign(__assign({}, group), { option: group })); });
+    return [parent].concat(children);
+}
+//# sourceMappingURL=options-controller.js.map

package/autosuggest/options-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"options-controller.js","sourceRoot":"","sources":["../../../src/autosuggest/options-controller.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { useMemo, useState, MutableRefObject } from 'react';\nimport { filterOptions } from './utils/utils';\nimport { generateTestIndexes } from '../internal/components/options-list/utils/test-indexes';\nimport { AutosuggestItem, AutosuggestProps } from './interfaces';\nimport { createHighlightedOptionHook } from '../internal/components/options-list/utils/use-highlight-option';\n\ntype Options = AutosuggestProps.Options;\n\nexport interface UseAutosuggestItemsProps {\n  options: Options;\n  filterValue: string;\n  filterText: string;\n  filteringType: AutosuggestProps.FilteringType;\n  isKeyboard: MutableRefObject<boolean>;\n  hideEnteredTextLabel?: boolean;\n}\n\nconst isHighlightable = (option?: AutosuggestItem) => {\n  return !!option && option.type !== 'parent';\n};\n\nconst useHighlightedOption = createHighlightedOptionHook({ isHighlightable: isHighlightable });\n\nconst parentMap = new WeakMap<AutosuggestItem, AutosuggestItem>();\nexport const getParentGroup = (item: AutosuggestItem) => parentMap.get(item);\n\nexport const useAutosuggestItems = ({\n  options,\n  filterValue,\n  filterText,\n  filteringType,\n  isKeyboard,\n  hideEnteredTextLabel,\n}: UseAutosuggestItemsProps) => {\n  const [showAll, setShowAll] = useState(false);\n\n  const items = useMemo(() => createItems(options), [options]);\n\n  const filteredItems = useMemo(() => {\n    const filteredItems = filteringType === 'auto' && !showAll ? filterOptions(items, filterText) : [...items];\n    if (filterValue && !hideEnteredTextLabel) {\n      filteredItems.unshift({ value: filterValue, type: 'use-entered', option: { value: filterValue } });\n    }\n    generateTestIndexes(filteredItems, getParentGroup);\n    return filteredItems;\n  }, [items, filterValue, filterText, filteringType, showAll, hideEnteredTextLabel]);\n\n  const { highlightedOption, highlightedIndex, highlightedType, moveHighlight, resetHighlight, setHighlightedIndex } =\n    useHighlightedOption({ options: filteredItems, isKeyboard });\n\n  return {\n    showAll,\n    setShowAll,\n    items: filteredItems,\n    highlightedIndex,\n    highlightedType,\n    highlightedOption,\n    setHighlightedIndex,\n    moveHighlight,\n    resetHighlight,\n  };\n};\n\nfunction createItems(options: Options): AutosuggestItem[] {\n  const items: AutosuggestItem[] = [];\n  for (const option of options) {\n    if (isGroup(option)) {\n      items.push(...flattenGroup(option));\n    } else {\n      items.push({ ...option, option });\n    }\n  }\n  return items;\n}\n\nfunction isGroup(optionOrGroup: AutosuggestProps.Option): optionOrGroup is AutosuggestProps.OptionGroup {\n  return 'options' in optionOrGroup;\n}\n\nfunction flattenGroup(group: AutosuggestProps.OptionGroup): AutosuggestItem[] {\n  const { options, ...rest } = group;\n  const hasOnlyDisabledChildren = options.every(option => option.disabled);\n  const parent: AutosuggestItem = {\n    ...rest,\n    type: 'parent',\n    disabled: rest.disabled || hasOnlyDisabledChildren,\n    option: group,\n  };\n  const children: AutosuggestItem[] = options.map(option => ({\n    ...option,\n    type: 'child',\n    disabled: option.disabled || parent.disabled,\n    option,\n  }));\n  // TODO: Refactor parentMap and remove this side effect\n  children.forEach(child => parentMap.set(child, { ...group, option: group }));\n  return [parent].concat(children);\n}\n"]}

package/autosuggest/options-list.d.ts

@@ -13,7 +13,8 @@ export interface AutosuggestOptionsListProps extends Pick<AutosuggestProps, 'ent
     handleLoadMore: () => void;
     hasDropdownStatus?: boolean;
     listBottom?: React.ReactNode;
-    usingMouse: React.MutableRefObject<boolean>;
+    isKeyboard: React.MutableRefObject<boolean>;
+    highlightedType: 'mouse' | 'keyboard';
 }
-export default function AutosuggestOptionsList({ options, highlightedOption, selectOption, highlightedIndex, setHighlightedIndex, highlightedOptionId, highlightText, listId, controlId, enteredTextLabel, handleLoadMore, hasDropdownStatus, virtualScroll, selectedAriaLabel, renderHighlightedAriaLive, listBottom, usingMouse, }: AutosuggestOptionsListProps): JSX.Element;
+export default function AutosuggestOptionsList({ options, highlightedOption, selectOption, highlightedIndex, setHighlightedIndex, highlightedOptionId, highlightText, listId, controlId, enteredTextLabel, handleLoadMore, hasDropdownStatus, virtualScroll, selectedAriaLabel, renderHighlightedAriaLive, listBottom, isKeyboard, highlightedType, }: AutosuggestOptionsListProps): JSX.Element;
 //# sourceMappingURL=options-list.d.ts.map

package/autosuggest/options-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"options-list.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/options-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAOjE,MAAM,WAAW,2BACf,SAAQ,IAAI,CACV,gBAAgB,EAChB,kBAAkB,GAAG,eAAe,GAAG,mBAAmB,GAAG,2BAA2B,CACzF;IACD,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,iBAAiB,CAAC,EAAE,eAAe,CAAC;IACpC,YAAY,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IAChD,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,UAAU,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;CAC7C;AAmBD,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,OAAO,EACP,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,EAChB,mBAAmB,EACnB,mBAAmB,EACnB,aAAa,EACb,MAAM,EACN,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,iBAAiB,EACjB,yBAAyB,EACzB,UAAU,EACV,UAAU,GACX,EAAE,2BAA2B,eAgC7B"}
+{"version":3,"file":"options-list.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/options-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAOjE,MAAM,WAAW,2BACf,SAAQ,IAAI,CACV,gBAAgB,EAChB,kBAAkB,GAAG,eAAe,GAAG,mBAAmB,GAAG,2BAA2B,CACzF;IACD,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,iBAAiB,CAAC,EAAE,eAAe,CAAC;IACpC,YAAY,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IAChD,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,UAAU,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC5C,eAAe,EAAE,OAAO,GAAG,UAAU,CAAC;CACvC;AAmBD,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,OAAO,EACP,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,EAChB,mBAAmB,EACnB,mBAAmB,EACnB,aAAa,EACb,MAAM,EACN,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,iBAAiB,EACjB,yBAAyB,EACzB,UAAU,EACV,UAAU,EACV,eAAe,GAChB,EAAE,2BAA2B,eAgC7B"}

package/autosuggest/options-list.js

@@ -1,7 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
-import { useSelectVisibleOption, useHighlightVisibleOption, getParentGroup } from './controller';
+import { useSelectVisibleOption, useHighlightVisibleOption } from './controller';
+import { getParentGroup } from './options-controller';
 import VirtualList from './virtual-list';
 import PlainList from './plain-list';
 import { useAnnouncement } from '../select/utils/use-announcement';
@@ -11,19 +12,19 @@ var isInteractive = function (option) {
 var isHighlightable = function (option) {
     return !!option && option.type !== 'parent';
 };
-var createMouseEventHandler = function (handler, usingMouse) { return function (itemIndex) {
+var createMouseEventHandler = function (handler, isKeyboard) { return function (itemIndex) {
     // prevent mouse events to avoid losing focus from the input
-    usingMouse.current = true;
+    isKeyboard.current = false;
     if (itemIndex > -1) {
         handler(itemIndex);
     }
 }; };
 export default function AutosuggestOptionsList(_a) {
-    var options = _a.options, highlightedOption = _a.highlightedOption, selectOption = _a.selectOption, highlightedIndex = _a.highlightedIndex, setHighlightedIndex = _a.setHighlightedIndex, highlightedOptionId = _a.highlightedOptionId, highlightText = _a.highlightText, listId = _a.listId, controlId = _a.controlId, enteredTextLabel = _a.enteredTextLabel, handleLoadMore = _a.handleLoadMore, hasDropdownStatus = _a.hasDropdownStatus, virtualScroll = _a.virtualScroll, selectedAriaLabel = _a.selectedAriaLabel, renderHighlightedAriaLive = _a.renderHighlightedAriaLive, listBottom = _a.listBottom, usingMouse = _a.usingMouse;
+    var options = _a.options, highlightedOption = _a.highlightedOption, selectOption = _a.selectOption, highlightedIndex = _a.highlightedIndex, setHighlightedIndex = _a.setHighlightedIndex, highlightedOptionId = _a.highlightedOptionId, highlightText = _a.highlightText, listId = _a.listId, controlId = _a.controlId, enteredTextLabel = _a.enteredTextLabel, handleLoadMore = _a.handleLoadMore, hasDropdownStatus = _a.hasDropdownStatus, virtualScroll = _a.virtualScroll, selectedAriaLabel = _a.selectedAriaLabel, renderHighlightedAriaLive = _a.renderHighlightedAriaLive, listBottom = _a.listBottom, isKeyboard = _a.isKeyboard, highlightedType = _a.highlightedType;
     var highlightVisibleOption = useHighlightVisibleOption(options, setHighlightedIndex, isHighlightable);
     var selectVisibleOption = useSelectVisibleOption(options, selectOption, isInteractive);
-    var handleMouseUp = createMouseEventHandler(selectVisibleOption, usingMouse);
-    var handleMouseMove = createMouseEventHandler(highlightVisibleOption, usingMouse);
+    var handleMouseUp = createMouseEventHandler(selectVisibleOption, isKeyboard);
+    var handleMouseMove = createMouseEventHandler(highlightVisibleOption, isKeyboard);
     var ListComponent = virtualScroll ? VirtualList : PlainList;
     var announcement = useAnnouncement({
         announceSelected: true,
@@ -32,6 +33,6 @@ export default function AutosuggestOptionsList(_a) {
         selectedAriaLabel: selectedAriaLabel,
         renderHighlightedAriaLive: renderHighlightedAriaLive
     });
-    return (React.createElement(ListComponent, { listBottom: listBottom, handleLoadMore: handleLoadMore, filteredItems: options, highlightText: highlightText, usingMouse: usingMouse, highlightedOption: highlightedOption, highlightedIndex: highlightedIndex, enteredTextLabel: enteredTextLabel, highlightedA11yProps: highlightedOptionId ? { id: highlightedOptionId } : {}, hasDropdownStatus: hasDropdownStatus, menuProps: { id: listId, ariaLabelledby: controlId, onMouseUp: handleMouseUp, onMouseMove: handleMouseMove }, screenReaderContent: announcement }));
+    return (React.createElement(ListComponent, { listBottom: listBottom, handleLoadMore: handleLoadMore, filteredItems: options, highlightText: highlightText, highlightedOption: highlightedOption, highlightedIndex: highlightedIndex, enteredTextLabel: enteredTextLabel, highlightedA11yProps: highlightedOptionId ? { id: highlightedOptionId } : {}, hasDropdownStatus: hasDropdownStatus, menuProps: { id: listId, ariaLabelledby: controlId, onMouseUp: handleMouseUp, onMouseMove: handleMouseMove }, screenReaderContent: announcement, highlightedType: highlightedType }));
 }
 //# sourceMappingURL=options-list.js.map

package/autosuggest/options-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"options-list.js","sourceRoot":"","sources":["../../../src/autosuggest/options-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 from 'react';\n\nimport { useSelectVisibleOption, useHighlightVisibleOption, getParentGroup } from './controller';\nimport { AutosuggestItem, AutosuggestProps } from './interfaces';\nimport VirtualList from './virtual-list';\nimport PlainList from './plain-list';\n\nimport { useAnnouncement } from '../select/utils/use-announcement';\nimport { OptionGroup } from '../internal/components/option/interfaces';\n\nexport interface AutosuggestOptionsListProps\n  extends Pick<\n    AutosuggestProps,\n    'enteredTextLabel' | 'virtualScroll' | 'selectedAriaLabel' | 'renderHighlightedAriaLive'\n  > {\n  options: AutosuggestItem[];\n  highlightedOption?: AutosuggestItem;\n  selectOption: (option: AutosuggestItem) => void;\n  highlightedIndex: number;\n  setHighlightedIndex: (index: number) => void;\n  highlightedOptionId?: string;\n  highlightText: string;\n  listId: string;\n  controlId: string;\n  handleLoadMore: () => void;\n  hasDropdownStatus?: boolean;\n  listBottom?: React.ReactNode;\n  usingMouse: React.MutableRefObject<boolean>;\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 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\nexport default function AutosuggestOptionsList({\n  options,\n  highlightedOption,\n  selectOption,\n  highlightedIndex,\n  setHighlightedIndex,\n  highlightedOptionId,\n  highlightText,\n  listId,\n  controlId,\n  enteredTextLabel,\n  handleLoadMore,\n  hasDropdownStatus,\n  virtualScroll,\n  selectedAriaLabel,\n  renderHighlightedAriaLive,\n  listBottom,\n  usingMouse,\n}: AutosuggestOptionsListProps) {\n  const highlightVisibleOption = useHighlightVisibleOption(options, setHighlightedIndex, isHighlightable);\n  const selectVisibleOption = useSelectVisibleOption(options, selectOption, isInteractive);\n  const handleMouseUp = createMouseEventHandler(selectVisibleOption, usingMouse);\n  const handleMouseMove = createMouseEventHandler(highlightVisibleOption, usingMouse);\n\n  const ListComponent = virtualScroll ? VirtualList : PlainList;\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    <ListComponent\n      listBottom={listBottom}\n      handleLoadMore={handleLoadMore}\n      filteredItems={options}\n      highlightText={highlightText}\n      usingMouse={usingMouse}\n      highlightedOption={highlightedOption}\n      highlightedIndex={highlightedIndex}\n      enteredTextLabel={enteredTextLabel}\n      highlightedA11yProps={highlightedOptionId ? { id: highlightedOptionId } : {}}\n      hasDropdownStatus={hasDropdownStatus}\n      menuProps={{ id: listId, ariaLabelledby: controlId, onMouseUp: handleMouseUp, onMouseMove: handleMouseMove }}\n      screenReaderContent={announcement}\n    />\n  );\n}\n"]}
+{"version":3,"file":"options-list.js","sourceRoot":"","sources":["../../../src/autosuggest/options-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 from 'react';\n\nimport { useSelectVisibleOption, useHighlightVisibleOption } from './controller';\nimport { getParentGroup } from './options-controller';\nimport { AutosuggestItem, AutosuggestProps } from './interfaces';\nimport VirtualList from './virtual-list';\nimport PlainList from './plain-list';\n\nimport { useAnnouncement } from '../select/utils/use-announcement';\nimport { OptionGroup } from '../internal/components/option/interfaces';\n\nexport interface AutosuggestOptionsListProps\n  extends Pick<\n    AutosuggestProps,\n    'enteredTextLabel' | 'virtualScroll' | 'selectedAriaLabel' | 'renderHighlightedAriaLive'\n  > {\n  options: AutosuggestItem[];\n  highlightedOption?: AutosuggestItem;\n  selectOption: (option: AutosuggestItem) => void;\n  highlightedIndex: number;\n  setHighlightedIndex: (index: number) => void;\n  highlightedOptionId?: string;\n  highlightText: string;\n  listId: string;\n  controlId: string;\n  handleLoadMore: () => void;\n  hasDropdownStatus?: boolean;\n  listBottom?: React.ReactNode;\n  isKeyboard: React.MutableRefObject<boolean>;\n  highlightedType: 'mouse' | 'keyboard';\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 createMouseEventHandler =\n  (handler: (index: number) => void, isKeyboard: React.MutableRefObject<boolean>) => (itemIndex: number) => {\n    // prevent mouse events to avoid losing focus from the input\n    isKeyboard.current = false;\n    if (itemIndex > -1) {\n      handler(itemIndex);\n    }\n  };\n\nexport default function AutosuggestOptionsList({\n  options,\n  highlightedOption,\n  selectOption,\n  highlightedIndex,\n  setHighlightedIndex,\n  highlightedOptionId,\n  highlightText,\n  listId,\n  controlId,\n  enteredTextLabel,\n  handleLoadMore,\n  hasDropdownStatus,\n  virtualScroll,\n  selectedAriaLabel,\n  renderHighlightedAriaLive,\n  listBottom,\n  isKeyboard,\n  highlightedType,\n}: AutosuggestOptionsListProps) {\n  const highlightVisibleOption = useHighlightVisibleOption(options, setHighlightedIndex, isHighlightable);\n  const selectVisibleOption = useSelectVisibleOption(options, selectOption, isInteractive);\n  const handleMouseUp = createMouseEventHandler(selectVisibleOption, isKeyboard);\n  const handleMouseMove = createMouseEventHandler(highlightVisibleOption, isKeyboard);\n\n  const ListComponent = virtualScroll ? VirtualList : PlainList;\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    <ListComponent\n      listBottom={listBottom}\n      handleLoadMore={handleLoadMore}\n      filteredItems={options}\n      highlightText={highlightText}\n      highlightedOption={highlightedOption}\n      highlightedIndex={highlightedIndex}\n      enteredTextLabel={enteredTextLabel}\n      highlightedA11yProps={highlightedOptionId ? { id: highlightedOptionId } : {}}\n      hasDropdownStatus={hasDropdownStatus}\n      menuProps={{ id: listId, ariaLabelledby: controlId, onMouseUp: handleMouseUp, onMouseMove: handleMouseMove }}\n      screenReaderContent={announcement}\n      highlightedType={highlightedType}\n    />\n  );\n}\n"]}

package/autosuggest/plain-list.d.ts

@@ -5,9 +5,9 @@ export interface ListProps {
     menuProps: Omit<OptionsListProps, 'children'>;
     handleLoadMore: () => void;
     filteredItems: AutosuggestItem[];
-    usingMouse: React.MutableRefObject<boolean>;
     highlightedOption?: AutosuggestItem;
     highlightedIndex: number;
+    highlightedType: 'mouse' | 'keyboard';
     enteredTextLabel: AutosuggestProps.EnteredTextLabel;
     highlightedA11yProps: Record<string, string | number | boolean>;
     hasDropdownStatus?: boolean;
@@ -21,6 +21,6 @@ export declare const getOptionProps: (index: number, item: AutosuggestItem, filt
     nativeAttributes: Record<string, string | number | boolean>;
     padBottom: boolean;
 };
-declare const PlainList: ({ handleLoadMore, filteredItems, usingMouse, menuProps, highlightedOption, highlightedIndex, enteredTextLabel, highlightedA11yProps, hasDropdownStatus, highlightText, listBottom, screenReaderContent, }: ListProps) => JSX.Element;
+declare const PlainList: ({ handleLoadMore, filteredItems, menuProps, highlightedOption, highlightedIndex, highlightedType, enteredTextLabel, highlightedA11yProps, hasDropdownStatus, highlightText, listBottom, screenReaderContent, }: ListProps) => JSX.Element;
 export default PlainList;
 //# sourceMappingURL=plain-list.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"plain-list.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/plain-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,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,MAAM,CAAC;IACzB,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,eAAO,MAAM,cAAc,UAClB,MAAM,QACP,eAAe,iBACN,eAAe,EAAE,wBACV,SAAS,CAAC,sBAAsB,CAAC,sBACnC,SAAS,CAAC,mBAAmB,CAAC;;;;;CAUnD,CAAC;AAEF,QAAA,MAAM,SAAS,8MAaZ,SAAS,gBAiDX,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"plain-list.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/plain-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,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,iBAAiB,CAAC,EAAE,eAAe,CAAC;IACpC,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,OAAO,GAAG,UAAU,CAAC;IACtC,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,eAAO,MAAM,cAAc,UAClB,MAAM,QACP,eAAe,iBACN,eAAe,EAAE,wBACV,SAAS,CAAC,sBAAsB,CAAC,sBACnC,SAAS,CAAC,mBAAmB,CAAC;;;;;CAUnD,CAAC;AAEF,QAAA,MAAM,SAAS,mNAaZ,SAAS,gBAiDX,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/autosuggest/plain-list.js

@@ -16,21 +16,21 @@ export var getOptionProps = function (index, item, filteredItems, highlightedA11
     return __assign({ nativeAttributes: nativeAttributes, padBottom: padBottom }, baseOptionProps);
 };
 var PlainList = function (_a) {
-    var handleLoadMore = _a.handleLoadMore, filteredItems = _a.filteredItems, usingMouse = _a.usingMouse, menuProps = _a.menuProps, highlightedOption = _a.highlightedOption, highlightedIndex = _a.highlightedIndex, enteredTextLabel = _a.enteredTextLabel, highlightedA11yProps = _a.highlightedA11yProps, hasDropdownStatus = _a.hasDropdownStatus, highlightText = _a.highlightText, listBottom = _a.listBottom, screenReaderContent = _a.screenReaderContent;
+    var handleLoadMore = _a.handleLoadMore, filteredItems = _a.filteredItems, menuProps = _a.menuProps, highlightedOption = _a.highlightedOption, highlightedIndex = _a.highlightedIndex, highlightedType = _a.highlightedType, enteredTextLabel = _a.enteredTextLabel, highlightedA11yProps = _a.highlightedA11yProps, hasDropdownStatus = _a.hasDropdownStatus, highlightText = _a.highlightText, listBottom = _a.listBottom, screenReaderContent = _a.screenReaderContent;
     var listRef = useRef(null);
     useEffect(function () {
         var _a;
         var item = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("[data-mouse-target=\"".concat(highlightedIndex, "\"]"));
-        if (!usingMouse.current && item) {
+        if (highlightedType === 'keyboard' && item) {
             scrollUntilVisible(item);
         }
-    }, [usingMouse, highlightedIndex]);
+    }, [highlightedType, highlightedIndex]);
     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)));
+            return (React.createElement(AutosuggestOption, __assign({ highlightText: highlightText, option: item, highlighted: item === highlightedOption, key: index, "data-mouse-target": index, enteredTextLabel: enteredTextLabel, screenReaderContent: screenReaderContent, highlightedType: highlightedType }, optionProps)));
         }),
         listBottom ? (React.createElement("li", { role: "option", className: styles['list-bottom'] }, listBottom)) : null));
 };

package/autosuggest/plain-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"plain-list.js","sourceRoot":"","sources":["../../../src/autosuggest/plain-list.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,WAAiC,MAAM,qCAAqC,CAAC;AACpF,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AAErD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAiBrC,MAAM,CAAC,IAAM,cAAc,GAAG,UAC5B,KAAa,EACb,IAAqB,EACrB,aAAgC,EAChC,oBAAuD,EACvD,iBAAkD,EAClD,iBAA2B;IAE3B,IAAM,gBAAgB,GAAG,IAAI,KAAK,iBAAiB,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;IAChF,IAAM,eAAe,GAAG,YAAY,CAAC,gBAAgB,CAAC,CAAC;IACvD,IAAM,UAAU,GAAG,KAAK,KAAK,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;IACtD,IAAM,oBAAoB,GAAG,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;IACtD,IAAM,SAAS,GAAG,CAAC,iBAAiB,IAAI,oBAAoB,IAAI,UAAU,CAAC;IAE3E,kBAAS,gBAAgB,kBAAA,EAAE,SAAS,WAAA,IAAK,eAAe,EAAG;AAC7D,CAAC,CAAC;AAEF,IAAM,SAAS,GAAG,UAAC,EAaP;QAZV,cAAc,oBAAA,EACd,aAAa,mBAAA,EACb,UAAU,gBAAA,EACV,SAAS,eAAA,EACT,iBAAiB,uBAAA,EACjB,gBAAgB,sBAAA,EAChB,gBAAgB,sBAAA,EAChB,oBAAoB,0BAAA,EACpB,iBAAiB,uBAAA,EACjB,aAAa,mBAAA,EACb,UAAU,gBAAA,EACV,mBAAmB,yBAAA;IAEnB,IAAM,OAAO,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAE/C,SAAS,CAAC;;QACR,IAAM,IAAI,GAAG,MAAA,OAAO,CAAC,OAAO,0CAAE,aAAa,CAAC,+BAAuB,gBAAgB,QAAI,CAAC,CAAC;QACzF,IAAI,CAAC,UAAU,CAAC,OAAO,IAAI,IAAI,EAAE;YAC/B,kBAAkB,CAAC,IAAmB,CAAC,CAAC;SACzC;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEnC,OAAO,CACL,oBAAC,WAAW,eACN,SAAS,IACb,UAAU,EAAE,cAAc,EAC1B,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,OAAO;QACZ,kEAAkE;QAClE,gBAAgB,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE;QAEvC,aAAa,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,KAAK;YAC7B,IAAM,WAAW,GAAG,cAAc,CAChC,KAAK,EACL,IAAI,EACJ,aAAa,EACb,oBAAoB,EACpB,iBAAiB,EACjB,iBAAiB,CAClB,CAAC;YAEF,OAAO,CACL,oBAAC,iBAAiB,aAChB,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,IAAI,EACZ,WAAW,EAAE,IAAI,KAAK,iBAAiB,EACvC,GAAG,EAAE,KAAK,uBACS,KAAK,EACxB,gBAAgB,EAAE,gBAAgB,EAClC,mBAAmB,EAAE,mBAAmB,IACpC,WAAW,EACf,CACH,CAAC;QACJ,CAAC,CAAC;QACD,UAAU,CAAC,CAAC,CAAC,CACZ,4BAAI,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,IAC/C,UAAU,CACR,CACN,CAAC,CAAC,CAAC,IAAI,CACI,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, 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  highlightedIndex: number;\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\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  handleLoadMore,\n  filteredItems,\n  usingMouse,\n  menuProps,\n  highlightedOption,\n  highlightedIndex,\n  enteredTextLabel,\n  highlightedA11yProps,\n  hasDropdownStatus,\n  highlightText,\n  listBottom,\n  screenReaderContent,\n}: ListProps) => {\n  const listRef = useRef<HTMLUListElement>(null);\n\n  useEffect(() => {\n    const item = listRef.current?.querySelector(`[data-mouse-target=\"${highlightedIndex}\"]`);\n    if (!usingMouse.current && item) {\n      scrollUntilVisible(item as HTMLElement);\n    }\n  }, [usingMouse, highlightedIndex]);\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 PlainList;\n"]}
+{"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, { useEffect, 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  highlightedOption?: AutosuggestItem;\n  highlightedIndex: number;\n  highlightedType: 'mouse' | 'keyboard';\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\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  handleLoadMore,\n  filteredItems,\n  menuProps,\n  highlightedOption,\n  highlightedIndex,\n  highlightedType,\n  enteredTextLabel,\n  highlightedA11yProps,\n  hasDropdownStatus,\n  highlightText,\n  listBottom,\n  screenReaderContent,\n}: ListProps) => {\n  const listRef = useRef<HTMLUListElement>(null);\n  useEffect(() => {\n    const item = listRef.current?.querySelector(`[data-mouse-target=\"${highlightedIndex}\"]`);\n    if (highlightedType === 'keyboard' && item) {\n      scrollUntilVisible(item as HTMLElement);\n    }\n  }, [highlightedType, highlightedIndex]);\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            highlightedType={highlightedType}\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 PlainList;\n"]}

package/autosuggest/virtual-list.d.ts

@@ -1,4 +1,4 @@
 import { ListProps } from './plain-list';
-declare const VirtualList: ({ handleLoadMore, filteredItems, usingMouse, menuProps, highlightedOption, highlightedIndex, enteredTextLabel, highlightedA11yProps, hasDropdownStatus, highlightText, listBottom, screenReaderContent, }: ListProps) => JSX.Element;
+declare const VirtualList: ({ handleLoadMore, filteredItems, menuProps, highlightedOption, highlightedIndex, highlightedType, enteredTextLabel, highlightedA11yProps, hasDropdownStatus, highlightText, listBottom, screenReaderContent, }: ListProps) => JSX.Element;
 export default VirtualList;
 //# sourceMappingURL=virtual-list.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"virtual-list.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/virtual-list.tsx"],"names":[],"mappings":"AASA,OAAO,EAAkB,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzD,QAAA,MAAM,WAAW,8MAad,SAAS,gBA0EX,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"virtual-list.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/virtual-list.tsx"],"names":[],"mappings":"AASA,OAAO,EAAkB,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzD,QAAA,MAAM,WAAW,mNAad,SAAS,gBA2EX,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/autosuggest/virtual-list.js

@@ -9,7 +9,7 @@ import AutosuggestOption from './autosuggest-option';
 import { getOptionProps } from './plain-list';
 import styles from './styles.css.js';
 var VirtualList = function (_a) {
-    var handleLoadMore = _a.handleLoadMore, filteredItems = _a.filteredItems, usingMouse = _a.usingMouse, menuProps = _a.menuProps, highlightedOption = _a.highlightedOption, highlightedIndex = _a.highlightedIndex, enteredTextLabel = _a.enteredTextLabel, highlightedA11yProps = _a.highlightedA11yProps, hasDropdownStatus = _a.hasDropdownStatus, highlightText = _a.highlightText, listBottom = _a.listBottom, screenReaderContent = _a.screenReaderContent;
+    var handleLoadMore = _a.handleLoadMore, filteredItems = _a.filteredItems, menuProps = _a.menuProps, highlightedOption = _a.highlightedOption, highlightedIndex = _a.highlightedIndex, highlightedType = _a.highlightedType, enteredTextLabel = _a.enteredTextLabel, highlightedA11yProps = _a.highlightedA11yProps, hasDropdownStatus = _a.hasDropdownStatus, highlightText = _a.highlightText, listBottom = _a.listBottom, screenReaderContent = _a.screenReaderContent;
     var scrollRef = useRef(null);
     // update component, when it gets wider or narrower to reposition items
     var _b = useContainerQuery(function (rect) { return rect.width; }, []), width = _b[0], strutRef = _b[1];
@@ -26,10 +26,10 @@ var VirtualList = function (_a) {
         overscan: 5
     });
     useEffect(function () {
-        if (!usingMouse.current) {
+        if (highlightedType === 'keyboard') {
             rowVirtualizer.scrollToIndex(highlightedIndex);
         }
-    }, [usingMouse, rowVirtualizer, highlightedIndex]);
+    }, [highlightedType, rowVirtualizer, highlightedIndex]);
     return (React.createElement(OptionsList, __assign({}, menuProps, { onLoadMore: handleLoadMore, ref: scrollRef, open: true, 
         // to prevent closing the list when clicking the scrollbar on IE11
         nativeAttributes: { unselectable: 'on' } }),
@@ -38,7 +38,7 @@ var VirtualList = function (_a) {
             var index = virtualRow.index, start = virtualRow.start, measureRef = virtualRow.measureRef;
             var item = filteredItems[index];
             var optionProps = getOptionProps(index, item, filteredItems, highlightedA11yProps, highlightedOption, hasDropdownStatus);
-            return (React.createElement(AutosuggestOption, __assign({ key: index, ref: measureRef, highlightText: highlightText, option: item, highlighted: item === highlightedOption, "data-mouse-target": index, enteredTextLabel: enteredTextLabel, virtualPosition: start + (index === 0 ? 1 : 0), screenReaderContent: screenReaderContent, ariaSetsize: filteredItems.length, ariaPosinset: index + 1 }, optionProps)));
+            return (React.createElement(AutosuggestOption, __assign({ key: index, ref: measureRef, highlightText: highlightText, option: item, highlighted: item === highlightedOption, "data-mouse-target": index, enteredTextLabel: enteredTextLabel, virtualPosition: start + (index === 0 ? 1 : 0), screenReaderContent: screenReaderContent, ariaSetsize: filteredItems.length, ariaPosinset: index + 1, highlightedType: highlightedType }, optionProps)));
         }),
         listBottom ? (React.createElement("li", { role: "option", className: styles['list-bottom'] }, listBottom)) : null));
 };

package/autosuggest/virtual-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"virtual-list.js","sourceRoot":"","sources":["../../../src/autosuggest/virtual-list.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACnF,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,WAAW,MAAM,qCAAqC,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AAExE,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAa,MAAM,cAAc,CAAC;AACzD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,IAAM,WAAW,GAAG,UAAC,EAaT;QAZV,cAAc,oBAAA,EACd,aAAa,mBAAA,EACb,UAAU,gBAAA,EACV,SAAS,eAAA,EACT,iBAAiB,uBAAA,EACjB,gBAAgB,sBAAA,EAChB,gBAAgB,sBAAA,EAChB,oBAAoB,0BAAA,EACpB,iBAAiB,uBAAA,EACjB,aAAa,mBAAA,EACb,UAAU,gBAAA,EACV,mBAAmB,yBAAA;IAEnB,IAAM,SAAS,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACjD,uEAAuE;IACjE,IAAA,KAAoB,iBAAiB,CAAC,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,KAAK,EAAV,CAAU,EAAE,EAAE,CAAC,EAA5D,KAAK,QAAA,EAAE,QAAQ,QAA6C,CAAC;IACpE,mBAAmB,CAAC,QAAQ,EAAE,cAAM,OAAA,SAAS,CAAC,OAAO,EAAjB,CAAiB,CAAC,CAAC;IACvD,IAAM,cAAc,GAAG,UAAU,CAAC;QAChC,IAAI,EAAE,aAAa,CAAC,MAAM;QAC1B,SAAS,EAAE,SAAS;QACpB,8FAA8F;QAC9F,oDAAoD;QACpD,oEAAoE;QACpE,8HAA8H;QAC9H,uDAAuD;QACvD,YAAY,EAAE,WAAW,CAAC,cAAM,OAAA,EAAE,EAAF,CAAE,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;QAC3D,QAAQ,EAAE,CAAC;KACZ,CAAC,CAAC;IAEH,SAAS,CAAC;QACR,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE;YACvB,cAAc,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;SAChD;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEnD,OAAO,CACL,oBAAC,WAAW,eACN,SAAS,IACb,UAAU,EAAE,cAAc,EAC1B,GAAG,EAAE,SAAS,EACd,IAAI,EAAE,IAAI;QACV,kEAAkE;QAClE,gBAAgB,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE;QAExC,4CACc,MAAM,EAClB,GAAG,EAAC,YAAY,EAChB,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,EACjC,KAAK,EAAE,EAAE,MAAM,EAAE,cAAc,CAAC,SAAS,GAAG,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,GAClF;QACD,cAAc,CAAC,YAAY,CAAC,GAAG,CAAC,UAAA,UAAU;YACjC,IAAA,KAAK,GAAwB,UAAU,MAAlC,EAAE,KAAK,GAAiB,UAAU,MAA3B,EAAE,UAAU,GAAK,UAAU,WAAf,CAAgB;YAChD,IAAM,IAAI,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;YAClC,IAAM,WAAW,GAAG,cAAc,CAChC,KAAK,EACL,IAAI,EACJ,aAAa,EACb,oBAAoB,EACpB,iBAAiB,EACjB,iBAAiB,CAClB,CAAC;YAEF,OAAO,CACL,oBAAC,iBAAiB,aAChB,GAAG,EAAE,KAAK,EACV,GAAG,EAAE,UAAU,EACf,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,IAAI,EACZ,WAAW,EAAE,IAAI,KAAK,iBAAiB,uBACpB,KAAK,EACxB,gBAAgB,EAAE,gBAAgB,EAClC,eAAe,EAAE,KAAK,GAAG,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC9C,mBAAmB,EAAE,mBAAmB,EACxC,WAAW,EAAE,aAAa,CAAC,MAAM,EACjC,YAAY,EAAE,KAAK,GAAG,CAAC,IACnB,WAAW,EACf,CACH,CAAC;QACJ,CAAC,CAAC;QACD,UAAU,CAAC,CAAC,CAAC,CACZ,4BAAI,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,IAC/C,UAAU,CACR,CACN,CAAC,CAAC,CAAC,IAAI,CACI,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useEffect, useImperativeHandle, useRef } from 'react';\nimport { useVirtual } from 'react-virtual';\n\nimport OptionsList from '../internal/components/options-list';\nimport { useContainerQuery } from '../internal/hooks/container-queries';\n\nimport AutosuggestOption from './autosuggest-option';\nimport { getOptionProps, ListProps } from './plain-list';\nimport styles from './styles.css.js';\n\nconst VirtualList = ({\n  handleLoadMore,\n  filteredItems,\n  usingMouse,\n  menuProps,\n  highlightedOption,\n  highlightedIndex,\n  enteredTextLabel,\n  highlightedA11yProps,\n  hasDropdownStatus,\n  highlightText,\n  listBottom,\n  screenReaderContent,\n}: ListProps) => {\n  const scrollRef = useRef<HTMLUListElement>(null);\n  // update component, when it gets wider or narrower to reposition items\n  const [width, strutRef] = useContainerQuery(rect => rect.width, []);\n  useImperativeHandle(strutRef, () => scrollRef.current);\n  const rowVirtualizer = useVirtual({\n    size: filteredItems.length,\n    parentRef: scrollRef,\n    // estimateSize is a dependency of measurements memo. We update it to force full recalculation\n    // when the height of any option could have changed:\n    // 1: because the component got resized (width property got updated)\n    // 2: becasue the option changed its content (highlightText property controls the highlight and the visibility of hidden tags)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    estimateSize: useCallback(() => 31, [width, highlightText]),\n    overscan: 5,\n  });\n\n  useEffect(() => {\n    if (!usingMouse.current) {\n      rowVirtualizer.scrollToIndex(highlightedIndex);\n    }\n  }, [usingMouse, rowVirtualizer, highlightedIndex]);\n\n  return (\n    <OptionsList\n      {...menuProps}\n      onLoadMore={handleLoadMore}\n      ref={scrollRef}\n      open={true}\n      // to prevent closing the list when clicking the scrollbar on IE11\n      nativeAttributes={{ unselectable: 'on' }}\n    >\n      <div\n        aria-hidden=\"true\"\n        key=\"total-size\"\n        className={styles['layout-strut']}\n        style={{ height: rowVirtualizer.totalSize + (filteredItems.length === 1 ? 1 : 0) }}\n      />\n      {rowVirtualizer.virtualItems.map(virtualRow => {\n        const { index, start, measureRef } = virtualRow;\n        const item = filteredItems[index];\n        const optionProps = getOptionProps(\n          index,\n          item,\n          filteredItems,\n          highlightedA11yProps,\n          highlightedOption,\n          hasDropdownStatus\n        );\n\n        return (\n          <AutosuggestOption\n            key={index}\n            ref={measureRef}\n            highlightText={highlightText}\n            option={item}\n            highlighted={item === highlightedOption}\n            data-mouse-target={index}\n            enteredTextLabel={enteredTextLabel}\n            virtualPosition={start + (index === 0 ? 1 : 0)}\n            screenReaderContent={screenReaderContent}\n            ariaSetsize={filteredItems.length}\n            ariaPosinset={index + 1}\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 VirtualList;\n"]}
+{"version":3,"file":"virtual-list.js","sourceRoot":"","sources":["../../../src/autosuggest/virtual-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, { useCallback, useEffect, useImperativeHandle, useRef } from 'react';\nimport { useVirtual } from 'react-virtual';\n\nimport OptionsList from '../internal/components/options-list';\nimport { useContainerQuery } from '../internal/hooks/container-queries';\n\nimport AutosuggestOption from './autosuggest-option';\nimport { getOptionProps, ListProps } from './plain-list';\nimport styles from './styles.css.js';\n\nconst VirtualList = ({\n  handleLoadMore,\n  filteredItems,\n  menuProps,\n  highlightedOption,\n  highlightedIndex,\n  highlightedType,\n  enteredTextLabel,\n  highlightedA11yProps,\n  hasDropdownStatus,\n  highlightText,\n  listBottom,\n  screenReaderContent,\n}: ListProps) => {\n  const scrollRef = useRef<HTMLUListElement>(null);\n  // update component, when it gets wider or narrower to reposition items\n  const [width, strutRef] = useContainerQuery(rect => rect.width, []);\n  useImperativeHandle(strutRef, () => scrollRef.current);\n  const rowVirtualizer = useVirtual({\n    size: filteredItems.length,\n    parentRef: scrollRef,\n    // estimateSize is a dependency of measurements memo. We update it to force full recalculation\n    // when the height of any option could have changed:\n    // 1: because the component got resized (width property got updated)\n    // 2: becasue the option changed its content (highlightText property controls the highlight and the visibility of hidden tags)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    estimateSize: useCallback(() => 31, [width, highlightText]),\n    overscan: 5,\n  });\n\n  useEffect(() => {\n    if (highlightedType === 'keyboard') {\n      rowVirtualizer.scrollToIndex(highlightedIndex);\n    }\n  }, [highlightedType, rowVirtualizer, highlightedIndex]);\n\n  return (\n    <OptionsList\n      {...menuProps}\n      onLoadMore={handleLoadMore}\n      ref={scrollRef}\n      open={true}\n      // to prevent closing the list when clicking the scrollbar on IE11\n      nativeAttributes={{ unselectable: 'on' }}\n    >\n      <div\n        aria-hidden=\"true\"\n        key=\"total-size\"\n        className={styles['layout-strut']}\n        style={{ height: rowVirtualizer.totalSize + (filteredItems.length === 1 ? 1 : 0) }}\n      />\n      {rowVirtualizer.virtualItems.map(virtualRow => {\n        const { index, start, measureRef } = virtualRow;\n        const item = filteredItems[index];\n        const optionProps = getOptionProps(\n          index,\n          item,\n          filteredItems,\n          highlightedA11yProps,\n          highlightedOption,\n          hasDropdownStatus\n        );\n\n        return (\n          <AutosuggestOption\n            key={index}\n            ref={measureRef}\n            highlightText={highlightText}\n            option={item}\n            highlighted={item === highlightedOption}\n            data-mouse-target={index}\n            enteredTextLabel={enteredTextLabel}\n            virtualPosition={start + (index === 0 ? 1 : 0)}\n            screenReaderContent={screenReaderContent}\n            ariaSetsize={filteredItems.length}\n            ariaPosinset={index + 1}\n            highlightedType={highlightedType}\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 VirtualList;\n"]}

package/button-dropdown/category-elements/category-element.d.ts

@@ -1,4 +1,4 @@
 import { CategoryProps } from '../interfaces';
-declare const CategoryElement: ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isExpanded, highlightItem, disabled, variant, }: CategoryProps) => JSX.Element;
+declare const CategoryElement: ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, highlightItem, disabled, variant, }: CategoryProps) => JSX.Element;
 export default CategoryElement;
 //# sourceMappingURL=category-element.d.ts.map

package/button-dropdown/category-elements/category-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"category-element.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/category-element.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAM9C,QAAA,MAAM,eAAe,sHAUlB,aAAa,gBAgCf,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"category-element.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/category-element.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAM9C,QAAA,MAAM,eAAe,2IAWlB,aAAa,gBAiCf,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/button-dropdown/category-elements/category-element.js

@@ -4,12 +4,12 @@ import styles from './styles.css.js';
 import ItemsList from '../items-list';
 var CategoryElement = function (_a) {
     var _b;
-    var item = _a.item, onItemActivate = _a.onItemActivate, onGroupToggle = _a.onGroupToggle, targetItem = _a.targetItem, isHighlighted = _a.isHighlighted, isExpanded = _a.isExpanded, highlightItem = _a.highlightItem, disabled = _a.disabled, variant = _a.variant;
+    var item = _a.item, onItemActivate = _a.onItemActivate, onGroupToggle = _a.onGroupToggle, targetItem = _a.targetItem, isHighlighted = _a.isHighlighted, isKeyboardHighlight = _a.isKeyboardHighlight, isExpanded = _a.isExpanded, highlightItem = _a.highlightItem, disabled = _a.disabled, variant = _a.variant;
     // Hide the category title element from screen readers because it will be
     // provided as an ARIA label.
     return (React.createElement("li", { className: clsx(styles.category, styles["variant-".concat(variant)], disabled && styles.disabled), role: "presentation", "aria-disabled": disabled ? 'true' : undefined },
         item.text && (React.createElement("p", { className: clsx(styles.header, (_b = {}, _b[styles.disabled] = disabled, _b)), "aria-hidden": "true" }, item.text)),
-        React.createElement("ul", { className: clsx(styles['items-list-container']), role: "group", "aria-label": item.text }, item.items && (React.createElement(ItemsList, { items: item.items, onItemActivate: onItemActivate, onGroupToggle: onGroupToggle, targetItem: targetItem, isHighlighted: isHighlighted, isExpanded: isExpanded, highlightItem: highlightItem, categoryDisabled: disabled, hasCategoryHeader: !!item.text, variant: variant })))));
+        React.createElement("ul", { className: clsx(styles['items-list-container']), role: "group", "aria-label": item.text }, item.items && (React.createElement(ItemsList, { items: item.items, onItemActivate: onItemActivate, onGroupToggle: onGroupToggle, targetItem: targetItem, isHighlighted: isHighlighted, isKeyboardHighlight: isKeyboardHighlight, isExpanded: isExpanded, highlightItem: highlightItem, categoryDisabled: disabled, hasCategoryHeader: !!item.text, variant: variant })))));
 };
 export default CategoryElement;
 //# sourceMappingURL=category-element.js.map

package/button-dropdown/category-elements/category-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"category-element.js","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/category-element.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,eAAe,CAAC;AAEtC,IAAM,eAAe,GAAG,UAAC,EAUT;;QATd,IAAI,UAAA,EACJ,cAAc,oBAAA,EACd,aAAa,mBAAA,EACb,UAAU,gBAAA,EACV,aAAa,mBAAA,EACb,UAAU,gBAAA,EACV,aAAa,mBAAA,EACb,QAAQ,cAAA,EACR,OAAO,aAAA;IAEP,yEAAyE;IACzE,6BAA6B;IAC7B,OAAO,CACL,4BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,kBAAW,OAAO,CAAE,CAAC,EAAE,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,EAC3F,IAAI,EAAC,cAAc,mBACJ,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QAE3C,IAAI,CAAC,IAAI,IAAI,CACZ,2BAAG,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,YAAI,GAAC,MAAM,CAAC,QAAQ,IAAG,QAAQ,MAAG,iBAAc,MAAM,IACnF,IAAI,CAAC,IAAI,CACR,CACL;QACD,4BAAI,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC,EAAE,IAAI,EAAC,OAAO,gBAAa,IAAI,CAAC,IAAI,IACpF,IAAI,CAAC,KAAK,IAAI,CACb,oBAAC,SAAS,IACR,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,QAAQ,EAC1B,iBAAiB,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,EAC9B,OAAO,EAAE,OAAO,GAChB,CACH,CACE,CACF,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { CategoryProps } from '../interfaces';\nimport React from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport ItemsList from '../items-list';\n\nconst CategoryElement = ({\n  item,\n  onItemActivate,\n  onGroupToggle,\n  targetItem,\n  isHighlighted,\n  isExpanded,\n  highlightItem,\n  disabled,\n  variant,\n}: CategoryProps) => {\n  // Hide the category title element from screen readers because it will be\n  // provided as an ARIA label.\n  return (\n    <li\n      className={clsx(styles.category, styles[`variant-${variant}`], disabled && styles.disabled)}\n      role=\"presentation\"\n      aria-disabled={disabled ? 'true' : undefined}\n    >\n      {item.text && (\n        <p className={clsx(styles.header, { [styles.disabled]: disabled })} aria-hidden=\"true\">\n          {item.text}\n        </p>\n      )}\n      <ul className={clsx(styles['items-list-container'])} role=\"group\" aria-label={item.text}>\n        {item.items && (\n          <ItemsList\n            items={item.items}\n            onItemActivate={onItemActivate}\n            onGroupToggle={onGroupToggle}\n            targetItem={targetItem}\n            isHighlighted={isHighlighted}\n            isExpanded={isExpanded}\n            highlightItem={highlightItem}\n            categoryDisabled={disabled}\n            hasCategoryHeader={!!item.text}\n            variant={variant}\n          />\n        )}\n      </ul>\n    </li>\n  );\n};\n\nexport default CategoryElement;\n"]}
+{"version":3,"file":"category-element.js","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/category-element.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,eAAe,CAAC;AAEtC,IAAM,eAAe,GAAG,UAAC,EAWT;;QAVd,IAAI,UAAA,EACJ,cAAc,oBAAA,EACd,aAAa,mBAAA,EACb,UAAU,gBAAA,EACV,aAAa,mBAAA,EACb,mBAAmB,yBAAA,EACnB,UAAU,gBAAA,EACV,aAAa,mBAAA,EACb,QAAQ,cAAA,EACR,OAAO,aAAA;IAEP,yEAAyE;IACzE,6BAA6B;IAC7B,OAAO,CACL,4BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,kBAAW,OAAO,CAAE,CAAC,EAAE,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,EAC3F,IAAI,EAAC,cAAc,mBACJ,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QAE3C,IAAI,CAAC,IAAI,IAAI,CACZ,2BAAG,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,YAAI,GAAC,MAAM,CAAC,QAAQ,IAAG,QAAQ,MAAG,iBAAc,MAAM,IACnF,IAAI,CAAC,IAAI,CACR,CACL;QACD,4BAAI,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC,EAAE,IAAI,EAAC,OAAO,gBAAa,IAAI,CAAC,IAAI,IACpF,IAAI,CAAC,KAAK,IAAI,CACb,oBAAC,SAAS,IACR,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,mBAAmB,EAAE,mBAAmB,EACxC,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,QAAQ,EAC1B,iBAAiB,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,EAC9B,OAAO,EAAE,OAAO,GAChB,CACH,CACE,CACF,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { CategoryProps } from '../interfaces';\nimport React from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport ItemsList from '../items-list';\n\nconst CategoryElement = ({\n  item,\n  onItemActivate,\n  onGroupToggle,\n  targetItem,\n  isHighlighted,\n  isKeyboardHighlight,\n  isExpanded,\n  highlightItem,\n  disabled,\n  variant,\n}: CategoryProps) => {\n  // Hide the category title element from screen readers because it will be\n  // provided as an ARIA label.\n  return (\n    <li\n      className={clsx(styles.category, styles[`variant-${variant}`], disabled && styles.disabled)}\n      role=\"presentation\"\n      aria-disabled={disabled ? 'true' : undefined}\n    >\n      {item.text && (\n        <p className={clsx(styles.header, { [styles.disabled]: disabled })} aria-hidden=\"true\">\n          {item.text}\n        </p>\n      )}\n      <ul className={clsx(styles['items-list-container'])} role=\"group\" aria-label={item.text}>\n        {item.items && (\n          <ItemsList\n            items={item.items}\n            onItemActivate={onItemActivate}\n            onGroupToggle={onGroupToggle}\n            targetItem={targetItem}\n            isHighlighted={isHighlighted}\n            isKeyboardHighlight={isKeyboardHighlight}\n            isExpanded={isExpanded}\n            highlightItem={highlightItem}\n            categoryDisabled={disabled}\n            hasCategoryHeader={!!item.text}\n            variant={variant}\n          />\n        )}\n      </ul>\n    </li>\n  );\n};\n\nexport default CategoryElement;\n"]}

package/button-dropdown/category-elements/expandable-category-element.d.ts

@@ -1,4 +1,4 @@
 import { CategoryProps } from '../interfaces';
-declare const ExpandableCategoryElement: ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isExpanded, highlightItem, disabled, expandToViewport, variant, }: CategoryProps) => JSX.Element;
+declare const ExpandableCategoryElement: ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, highlightItem, disabled, expandToViewport, variant, }: CategoryProps) => JSX.Element;
 export default ExpandableCategoryElement;
 //# sourceMappingURL=expandable-category-element.d.ts.map

package/button-dropdown/category-elements/expandable-category-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"expandable-category-element.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/expandable-category-element.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAK9C,QAAA,MAAM,yBAAyB,wIAW5B,aAAa,gBAwGf,CAAC;AAEF,eAAe,yBAAyB,CAAC"}
+{"version":3,"file":"expandable-category-element.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/expandable-category-element.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAK9C,QAAA,MAAM,yBAAyB,6JAY5B,aAAa,gBA2Gf,CAAC;AAEF,eAAe,yBAAyB,CAAC"}

package/button-dropdown/category-elements/expandable-category-element.js

@@ -12,9 +12,10 @@ import Tooltip from '../tooltip.js';
 import { getMenuItemProps } from '../utils/menu-item';
 var ExpandableCategoryElement = function (_a) {
     var _b, _c;
-    var item = _a.item, onItemActivate = _a.onItemActivate, onGroupToggle = _a.onGroupToggle, targetItem = _a.targetItem, isHighlighted = _a.isHighlighted, isExpanded = _a.isExpanded, highlightItem = _a.highlightItem, disabled = _a.disabled, expandToViewport = _a.expandToViewport, variant = _a.variant;
+    var item = _a.item, onItemActivate = _a.onItemActivate, onGroupToggle = _a.onGroupToggle, targetItem = _a.targetItem, isHighlighted = _a.isHighlighted, isKeyboardHighlight = _a.isKeyboardHighlight, isExpanded = _a.isExpanded, highlightItem = _a.highlightItem, disabled = _a.disabled, expandToViewport = _a.expandToViewport, variant = _a.variant;
     var highlighted = isHighlighted(item);
     var expanded = isExpanded(item);
+    var isKeyboardHighlighted = isKeyboardHighlight(item);
     var triggerRef = React.useRef(null);
     var ref = useRef(null);
     useEffect(function () {
@@ -39,6 +40,7 @@ var ExpandableCategoryElement = function (_a) {
     var trigger = item.text && (React.createElement("span", __assign({ className: clsx(styles.header, styles['expandable-header'], styles["variant-".concat(variant)], (_b = {},
             _b[styles.disabled] = disabled,
             _b[styles.highlighted] = highlighted,
+            _b[styles['is-focused']] = isKeyboardHighlighted,
             _b)), 
         // We are using the roving tabindex technique to manage the focus state of the dropdown.
         // The current element will always have tabindex=0 which means that it can be tabbed to,
@@ -60,7 +62,7 @@ var ExpandableCategoryElement = function (_a) {
     }
     else {
         content = (React.createElement(Dropdown, { open: expanded, stretchWidth: false, interior: true, expandToViewport: expandToViewport, trigger: trigger }, item.items && expanded && (React.createElement("ul", { role: "menu", "aria-label": item.text, className: clsx(styles['items-list-container']) },
-            React.createElement(ItemsList, { items: item.items, onItemActivate: onItemActivate, onGroupToggle: onGroupToggle, targetItem: targetItem, isHighlighted: isHighlighted, isExpanded: isExpanded, highlightItem: highlightItem, variant: variant })))));
+            React.createElement(ItemsList, { items: item.items, onItemActivate: onItemActivate, onGroupToggle: onGroupToggle, targetItem: targetItem, isHighlighted: isHighlighted, isKeyboardHighlight: isKeyboardHighlight, isExpanded: isExpanded, highlightItem: highlightItem, variant: variant })))));
     }
     return (React.createElement("li", { className: clsx(styles.category, styles["variant-".concat(variant)], styles.expandable, (_c = {},
             _c[styles.expanded] = expanded,

package/button-dropdown/category-elements/expandable-category-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"expandable-category-element.js","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/expandable-category-element.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, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\n\nimport InternalIcon from '../../icon/internal';\nimport ItemsList from '../items-list';\nimport Dropdown from '../../internal/components/dropdown';\nimport { CategoryProps } from '../interfaces';\nimport useHiddenDescription from '../utils/use-hidden-description';\nimport Tooltip from '../tooltip.js';\nimport { getMenuItemProps } from '../utils/menu-item';\n\nconst ExpandableCategoryElement = ({\n  item,\n  onItemActivate,\n  onGroupToggle,\n  targetItem,\n  isHighlighted,\n  isExpanded,\n  highlightItem,\n  disabled,\n  expandToViewport,\n  variant,\n}: CategoryProps) => {\n  const highlighted = isHighlighted(item);\n  const expanded = isExpanded(item);\n  const triggerRef = React.useRef<HTMLSpanElement>(null);\n  const ref = useRef<HTMLLIElement>(null);\n\n  useEffect(() => {\n    if (triggerRef.current && highlighted && !expanded) {\n      triggerRef.current.focus();\n    }\n  }, [expanded, highlighted]);\n\n  const onClick: React.MouseEventHandler = event => {\n    if (!disabled) {\n      event.preventDefault();\n      onGroupToggle(item, event);\n      triggerRef.current?.focus();\n    }\n  };\n\n  const onHover = (event: React.SyntheticEvent) => {\n    event.preventDefault();\n    highlightItem(item);\n  };\n\n  const isDisabledWithReason = !!item.disabledReason && item.disabled;\n  const { targetProps, descriptionEl } = useHiddenDescription(item.disabledReason);\n  const trigger = item.text && (\n    <span\n      className={clsx(styles.header, styles['expandable-header'], styles[`variant-${variant}`], {\n        [styles.disabled]: disabled,\n        [styles.highlighted]: highlighted,\n      })}\n      // We are using the roving tabindex technique to manage the focus state of the dropdown.\n      // The current element will always have tabindex=0 which means that it can be tabbed to,\n      // while all other items have tabindex=-1 so we can focus them when necessary.\n      tabIndex={highlighted ? 0 : -1}\n      ref={triggerRef}\n      {...getMenuItemProps({ parent: true, expanded, disabled })}\n      {...(isDisabledWithReason ? targetProps : {})}\n    >\n      {item.text}\n      <span className={clsx(styles['expand-icon'], styles['expand-icon-right'])}>\n        <InternalIcon name=\"caret-down-filled\" />\n      </span>\n    </span>\n  );\n\n  let content: React.ReactNode;\n  // If the category element is disabled, we do not render a dropdown.\n  // Screenreaders are confused by additional sections\n  if (isDisabledWithReason) {\n    content = (\n      <Tooltip content={item.disabledReason}>\n        {trigger}\n        {descriptionEl}\n      </Tooltip>\n    );\n  } else if (disabled) {\n    content = trigger;\n  } else {\n    content = (\n      <Dropdown\n        open={expanded}\n        stretchWidth={false}\n        interior={true}\n        expandToViewport={expandToViewport}\n        trigger={trigger}\n      >\n        {item.items && expanded && (\n          <ul role=\"menu\" aria-label={item.text} className={clsx(styles['items-list-container'])}>\n            <ItemsList\n              items={item.items}\n              onItemActivate={onItemActivate}\n              onGroupToggle={onGroupToggle}\n              targetItem={targetItem}\n              isHighlighted={isHighlighted}\n              isExpanded={isExpanded}\n              highlightItem={highlightItem}\n              variant={variant}\n            />\n          </ul>\n        )}\n      </Dropdown>\n    );\n  }\n\n  return (\n    <li\n      className={clsx(styles.category, styles[`variant-${variant}`], styles.expandable, {\n        [styles.expanded]: expanded,\n        [styles.disabled]: disabled,\n        [styles.highlighted]: highlighted,\n      })}\n      role=\"presentation\"\n      data-testid={item.id}\n      ref={ref}\n      onClick={onClick}\n      onMouseEnter={onHover}\n      onTouchStart={onHover}\n    >\n      {content}\n    </li>\n  );\n};\n\nexport default ExpandableCategoryElement;\n"]}
+{"version":3,"file":"expandable-category-element.js","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/expandable-category-element.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, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\n\nimport InternalIcon from '../../icon/internal';\nimport ItemsList from '../items-list';\nimport Dropdown from '../../internal/components/dropdown';\nimport { CategoryProps } from '../interfaces';\nimport useHiddenDescription from '../utils/use-hidden-description';\nimport Tooltip from '../tooltip.js';\nimport { getMenuItemProps } from '../utils/menu-item';\n\nconst ExpandableCategoryElement = ({\n  item,\n  onItemActivate,\n  onGroupToggle,\n  targetItem,\n  isHighlighted,\n  isKeyboardHighlight,\n  isExpanded,\n  highlightItem,\n  disabled,\n  expandToViewport,\n  variant,\n}: CategoryProps) => {\n  const highlighted = isHighlighted(item);\n  const expanded = isExpanded(item);\n  const isKeyboardHighlighted = isKeyboardHighlight(item);\n  const triggerRef = React.useRef<HTMLSpanElement>(null);\n  const ref = useRef<HTMLLIElement>(null);\n\n  useEffect(() => {\n    if (triggerRef.current && highlighted && !expanded) {\n      triggerRef.current.focus();\n    }\n  }, [expanded, highlighted]);\n\n  const onClick: React.MouseEventHandler = event => {\n    if (!disabled) {\n      event.preventDefault();\n      onGroupToggle(item, event);\n      triggerRef.current?.focus();\n    }\n  };\n\n  const onHover = (event: React.SyntheticEvent) => {\n    event.preventDefault();\n    highlightItem(item);\n  };\n\n  const isDisabledWithReason = !!item.disabledReason && item.disabled;\n  const { targetProps, descriptionEl } = useHiddenDescription(item.disabledReason);\n  const trigger = item.text && (\n    <span\n      className={clsx(styles.header, styles['expandable-header'], styles[`variant-${variant}`], {\n        [styles.disabled]: disabled,\n        [styles.highlighted]: highlighted,\n        [styles['is-focused']]: isKeyboardHighlighted,\n      })}\n      // We are using the roving tabindex technique to manage the focus state of the dropdown.\n      // The current element will always have tabindex=0 which means that it can be tabbed to,\n      // while all other items have tabindex=-1 so we can focus them when necessary.\n      tabIndex={highlighted ? 0 : -1}\n      ref={triggerRef}\n      {...getMenuItemProps({ parent: true, expanded, disabled })}\n      {...(isDisabledWithReason ? targetProps : {})}\n    >\n      {item.text}\n      <span className={clsx(styles['expand-icon'], styles['expand-icon-right'])}>\n        <InternalIcon name=\"caret-down-filled\" />\n      </span>\n    </span>\n  );\n\n  let content: React.ReactNode;\n  // If the category element is disabled, we do not render a dropdown.\n  // Screenreaders are confused by additional sections\n  if (isDisabledWithReason) {\n    content = (\n      <Tooltip content={item.disabledReason}>\n        {trigger}\n        {descriptionEl}\n      </Tooltip>\n    );\n  } else if (disabled) {\n    content = trigger;\n  } else {\n    content = (\n      <Dropdown\n        open={expanded}\n        stretchWidth={false}\n        interior={true}\n        expandToViewport={expandToViewport}\n        trigger={trigger}\n      >\n        {item.items && expanded && (\n          <ul role=\"menu\" aria-label={item.text} className={clsx(styles['items-list-container'])}>\n            <ItemsList\n              items={item.items}\n              onItemActivate={onItemActivate}\n              onGroupToggle={onGroupToggle}\n              targetItem={targetItem}\n              isHighlighted={isHighlighted}\n              isKeyboardHighlight={isKeyboardHighlight}\n              isExpanded={isExpanded}\n              highlightItem={highlightItem}\n              variant={variant}\n            />\n          </ul>\n        )}\n      </Dropdown>\n    );\n  }\n\n  return (\n    <li\n      className={clsx(styles.category, styles[`variant-${variant}`], styles.expandable, {\n        [styles.expanded]: expanded,\n        [styles.disabled]: disabled,\n        [styles.highlighted]: highlighted,\n      })}\n      role=\"presentation\"\n      data-testid={item.id}\n      ref={ref}\n      onClick={onClick}\n      onMouseEnter={onHover}\n      onTouchStart={onHover}\n    >\n      {content}\n    </li>\n  );\n};\n\nexport default ExpandableCategoryElement;\n"]}

package/button-dropdown/category-elements/mobile-expandable-category-element.d.ts

@@ -1,4 +1,4 @@
 import { CategoryProps } from '../interfaces';
-declare const MobileExpandableCategoryElement: ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isExpanded, highlightItem, disabled, variant, }: CategoryProps) => JSX.Element;
+declare const MobileExpandableCategoryElement: ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, highlightItem, disabled, variant, }: CategoryProps) => JSX.Element;
 export default MobileExpandableCategoryElement;
 //# sourceMappingURL=mobile-expandable-category-element.d.ts.map

package/button-dropdown/category-elements/mobile-expandable-category-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mobile-expandable-category-element.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/mobile-expandable-category-element.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAK9C,QAAA,MAAM,+BAA+B,sHAUlC,aAAa,gBAqGf,CAAC;AAEF,eAAe,+BAA+B,CAAC"}
+{"version":3,"file":"mobile-expandable-category-element.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/mobile-expandable-category-element.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAK9C,QAAA,MAAM,+BAA+B,2IAWlC,aAAa,gBAwGf,CAAC;AAEF,eAAe,+BAA+B,CAAC"}

package/button-dropdown/category-elements/mobile-expandable-category-element.js

@@ -12,9 +12,10 @@ import useHiddenDescription from '../utils/use-hidden-description.js';
 import { getMenuItemProps } from '../utils/menu-item.js';
 var MobileExpandableCategoryElement = function (_a) {
     var _b, _c, _d;
-    var item = _a.item, onItemActivate = _a.onItemActivate, onGroupToggle = _a.onGroupToggle, targetItem = _a.targetItem, isHighlighted = _a.isHighlighted, isExpanded = _a.isExpanded, highlightItem = _a.highlightItem, disabled = _a.disabled, variant = _a.variant;
+    var item = _a.item, onItemActivate = _a.onItemActivate, onGroupToggle = _a.onGroupToggle, targetItem = _a.targetItem, isHighlighted = _a.isHighlighted, isKeyboardHighlight = _a.isKeyboardHighlight, isExpanded = _a.isExpanded, highlightItem = _a.highlightItem, disabled = _a.disabled, variant = _a.variant;
     var highlighted = isHighlighted(item);
     var expanded = isExpanded(item);
+    var isKeyboardHighlighted = isKeyboardHighlight(item);
     var triggerRef = React.useRef(null);
     useEffect(function () {
         if (triggerRef.current && highlighted && !expanded) {
@@ -37,6 +38,7 @@ var MobileExpandableCategoryElement = function (_a) {
             _b[styles.highlighted] = highlighted,
             _b[styles['rolled-down']] = expanded,
             _b[styles.disabled] = disabled,
+            _b[styles['is-focused']] = isKeyboardHighlighted,
             _b)), 
         // We are using the roving tabindex technique to manage the focus state of the dropdown.
         // The current element will always have tabindex=0 which means that it can be tabbed to,
@@ -58,7 +60,7 @@ var MobileExpandableCategoryElement = function (_a) {
     }
     else {
         content = (React.createElement(MobileExpandableGroup, { open: expanded, trigger: trigger }, item.items && expanded && (React.createElement("ul", { role: "menu", "aria-label": item.text, className: clsx(styles['items-list-container']) },
-            React.createElement(ItemsList, { items: item.items, onItemActivate: onItemActivate, onGroupToggle: onGroupToggle, targetItem: targetItem, isHighlighted: isHighlighted, isExpanded: isExpanded, highlightItem: highlightItem, hasCategoryHeader: true, variant: variant })))));
+            React.createElement(ItemsList, { items: item.items, onItemActivate: onItemActivate, onGroupToggle: onGroupToggle, targetItem: targetItem, isHighlighted: isHighlighted, isKeyboardHighlight: isKeyboardHighlight, isExpanded: isExpanded, highlightItem: highlightItem, hasCategoryHeader: true, variant: variant })))));
     }
     return (React.createElement("li", { className: clsx(styles.category, styles["variant-".concat(variant)], styles.expandable, (_d = {},
             _d[styles.expanded] = expanded,