@razorpay/blade 12.17.1 → 12.19.0

package/build/lib/web/development/components/index.js

@@ -71,7 +71,7 @@ export { AccordionItemHeader } from './Accordion/AccordionItemHeader.js';
 export { AccordionItemBody } from './Accordion/AccordionItemBody.js';
 export { AccordionItem } from './Accordion/AccordionItem.js';
 export { ActionList } from './ActionList/ActionList.js';
-export { ActionListItem, ActionListItemAvatar, ActionListItemBadge, ActionListItemBadgeGroup, ActionListItemIcon, ActionListItemText, ActionListSection } from './ActionList/ActionListItem.js';
+export { ActionListItem, ActionListItemAvatar, ActionListItemBadge, ActionListItemBadgeGroup, ActionListItemIcon, ActionListItemText, ActionListSection, ActionListSectionTitle } from './ActionList/ActionListItem.js';
 export { ActionListItemAsset } from './ActionList/ActionListItemAsset.web.js';
 export { Alert } from './Alert/Alert.js';
 export { Amount } from './Amount/Amount.js';
@@ -135,9 +135,11 @@ export { default as AlignJustifyIcon } from './Icons/AlignJustifyIcon/AlignJusti
 export { default as AlignLeftIcon } from './Icons/AlignLeftIcon/AlignLeftIcon.js';
 export { default as AlignRightIcon } from './Icons/AlignRightIcon/AlignRightIcon.js';
 export { default as AnchorIcon } from './Icons/AnchorIcon/AnchorIcon.js';
+export { default as AndroidIcon } from './Icons/AndroidIcon/AndroidIcon.js';
 export { default as AnnouncementIcon } from './Icons/AnnouncementIcon/AnnouncementIcon.js';
 export { default as ApertureIcon } from './Icons/ApertureIcon/ApertureIcon.js';
 export { default as AppStoreIcon } from './Icons/AppStoreIcon/AppStoreIcon.js';
+export { default as AppleIcon } from './Icons/AppleIcon/AppleIcon.js';
 export { default as ArrowDownIcon } from './Icons/ArrowDownIcon/ArrowDownIcon.js';
 export { default as ArrowDownLeftIcon } from './Icons/ArrowDownLeftIcon/ArrowDownLeftIcon.js';
 export { default as ArrowDownRightIcon } from './Icons/ArrowDownRightIcon/ArrowDownRightIcon.js';
@@ -307,6 +309,7 @@ export { default as InstantSettlementIcon } from './Icons/InstantSettlementIcon/
 export { default as InternationalPaymentsIcon } from './Icons/InternationalPaymentsIcon/InternationalPaymentsIcon.js';
 export { default as InvoicesIcon } from './Icons/InvoicesIcon/InvoicesIcon.js';
 export { default as ItalicIcon } from './Icons/ItalicIcon/ItalicIcon.js';
+export { default as KeyIcon } from './Icons/KeyIcon/KeyIcon.js';
 export { default as KeyboardIcon } from './Icons/KeyboardIcon/KeyboardIcon.js';
 export { default as LayersIcon } from './Icons/LayersIcon/LayersIcon.js';
 export { default as LayoutIcon } from './Icons/LayoutIcon/LayoutIcon.js';

package/build/lib/web/development/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/lib/web/production/components/ActionList/ActionListBox.web.js

@@ -1,22 +1,30 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import React__default from 'react';
-import { FixedSizeList } from 'react-window';
+import React__default, { useCallback } from 'react';
+import { VariableSizeList } from 'react-window';
 import { StyledListBoxWrapper } from './styles/StyledListBoxWrapper.web.js';
 import { getActionListPadding, actionListMaxHeight } from './styles/getBaseListBoxWrapperStyles.js';
+import { componentIds } from './componentIds.js';
+import { ActionListSectionTitle } from './ActionListItem.js';
 import { useBottomSheetContext } from '../BottomSheet/BottomSheetContext.js';
 import '../../utils/assignWithoutSideEffects/index.js';
 import '../../utils/makeAccessible/index.js';
 import '../../utils/makeAnalyticsAttribute/index.js';
 import { useIsMobile } from '../../utils/useIsMobile.js';
-import { getItemHeight } from '../BaseMenu/BaseMenuItem/tokens.js';
+import { actionListSectionTitleHeight, actionListDividerHeight, getActionListItemHeight } from '../BaseMenu/BaseMenuItem/tokens.js';
 import '../../utils/index.js';
 import { useDropdown } from '../Dropdown/useDropdown.js';
 import { dropdownComponentIds } from '../Dropdown/dropdownComponentIds.js';
+import '../../utils/isValidAllowedChildren/index.js';
+import '../Divider/index.js';
 import { jsx } from 'react/jsx-runtime';
 import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
 import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
 import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
+import { getComponentId } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
+import { Divider } from '../Divider/Divider.js';
 import useTheme from '../BladeProvider/useTheme.js';
 
 var _excluded = ["childrenWithId", "actionListItemWrapperRole", "isMultiSelectable"],
@@ -44,18 +52,52 @@ var ActionListBox = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__d
   displayName: 'ActionListBox'
 });
 
+/**
+ *  get the height of the item based on the componentId
+ */
+var getItemHeight = function getItemHeight(_ref2) {
+  var _itemData$index;
+  var index = _ref2.index,
+    itemData = _ref2.itemData,
+    actionListItemHeight = _ref2.actionListItemHeight;
+  if (getComponentId(itemData[index]) === componentIds.ActionListItem) {
+    return actionListItemHeight;
+  }
+  if (getComponentId(itemData[index]) === componentIds.ActionListSectionTitle) {
+    return actionListSectionTitleHeight;
+  }
+  // @ts-expect-error: key does exist
+  if ((_itemData$index = itemData[index]) !== null && _itemData$index !== void 0 && _itemData$index.key.includes('divider')) {
+    return actionListDividerHeight;
+  }
+  return 0;
+};
+
 /**
  * Returns the height of item and height of container based on theme and device
  */
-var getVirtualItemParams = function getVirtualItemParams(_ref2) {
-  var theme = _ref2.theme,
-    isMobile = _ref2.isMobile;
-  var itemHeightResponsive = getItemHeight(theme);
+var getVirtualItemParams = function getVirtualItemParams(_ref3) {
+  var theme = _ref3.theme,
+    isMobile = _ref3.isMobile,
+    itemCount = _ref3.itemCount,
+    itemData = _ref3.itemData;
+  var itemHeightResponsive = getActionListItemHeight(theme);
   var actionListPadding = getActionListPadding(theme);
+  var actionListItemHeight = isMobile ? itemHeightResponsive.itemHeightMobile : itemHeightResponsive.itemHeightDesktop;
+  var shouldCalculateMinimumHeight = itemCount <= 10;
   var actionListBoxHeight = actionListMaxHeight - actionListPadding * 2;
+  var actionListBoxMinHeight = shouldCalculateMinimumHeight ? itemData.reduce(function (acc, _, index) {
+    var itemHeight = getItemHeight({
+      index: index,
+      itemData: itemData,
+      actionListItemHeight: actionListItemHeight
+    });
+    return acc + itemHeight;
+  }, 0) : actionListBoxHeight;
+  var finalActionListBoxHeight = Math.min(actionListBoxHeight, actionListBoxMinHeight);
   return {
-    itemHeight: isMobile ? itemHeightResponsive.itemHeightMobile : itemHeightResponsive.itemHeightDesktop,
-    actionListBoxHeight: actionListBoxHeight
+    actionListItemHeight: actionListItemHeight,
+    actionListBoxHeight: finalActionListBoxHeight
   };
 };
 
@@ -74,11 +116,34 @@ var useFilteredItems = function useFilteredItems(children) {
     if (!hasAutoComplete) {
       return childrenArray;
     }
-
-    // @ts-expect-error: props does exist
-    var filteredItems = childrenArray.filter(function (item) {
-      return filteredValues.includes(item.props.value);
-    });
+    var filteredItems = childrenArray.reduce(function (acc, item, index) {
+      if (getComponentId(item) === componentIds.ActionListSection) {
+        var sectionTitle = /*#__PURE__*/jsx(ActionListSectionTitle, {
+          // @ts-expect-error: props does exist
+          title: item === null || item === void 0 ? void 0 : item.props.title,
+          isInsideVirtualizedList: true
+        }, index);
+        // @ts-expect-error: props does exist
+        var sectionChildren = item === null || item === void 0 ? void 0 : item.props.children;
+        var divider = index !== childrenArray.length - 1 ? /*#__PURE__*/jsx(Divider, {
+          marginX: "spacing.3",
+          marginY: "spacing.1"
+        }, "divider-".concat(index)) : null;
+        var filteredSectionChildren = sectionChildren.filter(function (item) {
+          return filteredValues.includes(item.props.value);
+        });
+        if (filteredSectionChildren.length !== 0) {
+          acc.push.apply(acc, [sectionTitle].concat(_toConsumableArray(filteredSectionChildren), [divider]));
+        }
+      } else {
+        // @ts-expect-error: props does exist
+        var value = item === null || item === void 0 ? void 0 : item.props.value;
+        if (filteredValues.includes(value)) {
+          acc.push(item);
+        }
+      }
+      return acc;
+    }, []);
     return filteredItems;
   }, [filteredValues, hasAutoCompleteInBottomSheetHeader, dropdownTriggerer, childrenArray]);
   return {
@@ -86,20 +151,45 @@ var useFilteredItems = function useFilteredItems(children) {
     itemCount: items.length
   };
 };
-var VirtualListItem = function VirtualListItem(_ref3) {
-  var index = _ref3.index,
-    style = _ref3.style,
-    data = _ref3.data;
+var VirtualListItem = /*#__PURE__*/React__default.memo(function (_ref4) {
+  var index = _ref4.index,
+    style = _ref4.style,
+    data = _ref4.data,
+    onVirtualizedFocus = _ref4.onVirtualizedFocus;
+  var currentItem = data[index];
+  if ( /*#__PURE__*/React__default.isValidElement(currentItem) && getComponentId(currentItem) === componentIds.ActionListItem) {
+    // Clone the element passed via `data` and add the `_virtualizedIndex` prop
+    var elementWithIndex = /*#__PURE__*/React__default.cloneElement(currentItem, {
+      _virtualizedIndex: index,
+      _onVirtualizedFocus: onVirtualizedFocus
+    });
+    return /*#__PURE__*/jsx("div", {
+      style: style,
+      children: elementWithIndex
+    });
+  }
   return /*#__PURE__*/jsx("div", {
     style: style,
     children: data[index]
   });
-};
-var _ActionListVirtualizedBox = /*#__PURE__*/React__default.forwardRef(function (_ref4, ref) {
-  var childrenWithId = _ref4.childrenWithId,
-    actionListItemWrapperRole = _ref4.actionListItemWrapperRole,
-    isMultiSelectable = _ref4.isMultiSelectable,
-    rest = _objectWithoutProperties(_ref4, _excluded2);
+}, function (prevProps, nextProps) {
+  // Custom comparison function to determine if component should update
+  return prevProps.index === nextProps.index && prevProps.style === nextProps.style && prevProps.data[prevProps.index] === nextProps.data[nextProps.index];
+});
+var _ActionListVirtualizedBox = /*#__PURE__*/React__default.forwardRef(function (_ref5, ref) {
+  var childrenWithId = _ref5.childrenWithId,
+    actionListItemWrapperRole = _ref5.actionListItemWrapperRole,
+    isMultiSelectable = _ref5.isMultiSelectable,
+    rest = _objectWithoutProperties(_ref5, _excluded2);
+  var virtualizedListRef = React__default.useRef(null);
+  var _React$useState = React__default.useState(0),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    visibleStartIndex = _React$useState2[0],
+    setVisibleStartIndex = _React$useState2[1];
+  var _React$useState3 = React__default.useState(0),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    visibleStopIndex = _React$useState4[0],
+    setVisibleStopIndex = _React$useState4[1];
   var items = React__default.Children.toArray(childrenWithId); // Convert children to an array
   var _useBottomSheetContex2 = useBottomSheetContext(),
     isInBottomSheet = _useBottomSheetContex2.isInBottomSheet;
@@ -112,33 +202,77 @@ var _ActionListVirtualizedBox = /*#__PURE__*/React__default.forwardRef(function
   var _React$useMemo = React__default.useMemo(function () {
       return getVirtualItemParams({
         theme: theme,
-        isMobile: isMobile
+        isMobile: isMobile,
+        itemCount: itemCount,
+        itemData: itemData
       });
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [theme.name, isMobile]),
-    itemHeight = _React$useMemo.itemHeight,
+    [theme.name, isMobile, itemCount, itemData]),
+    actionListItemHeight = _React$useMemo.actionListItemHeight,
     actionListBoxHeight = _React$useMemo.actionListBoxHeight;
+  React__default.useEffect(function () {
+    var _virtualizedListRef$c, _virtualizedListRef$c2;
+    virtualizedListRef === null || virtualizedListRef === void 0 ? void 0 : (_virtualizedListRef$c = virtualizedListRef.current) === null || _virtualizedListRef$c === void 0 ? void 0 : _virtualizedListRef$c.resetAfterIndex(0);
+    virtualizedListRef === null || virtualizedListRef === void 0 ? void 0 : (_virtualizedListRef$c2 = virtualizedListRef.current) === null || _virtualizedListRef$c2 === void 0 ? void 0 : _virtualizedListRef$c2.scrollToItem(0);
+  }, [itemCount]);
   return /*#__PURE__*/jsx(StyledListBoxWrapper, _objectSpread(_objectSpread(_objectSpread({
-    isInBottomSheet: isInBottomSheet,
+    isInBottomSheet: isInBottomSheet
+    // in case of virtualized list, we only render visible items. so css will hide divider for every last item visible. instead of hiding the last divider of the list.
+    ,
     ref: ref
   }, makeAccessible({
     role: actionListItemWrapperRole,
     multiSelectable: actionListItemWrapperRole === 'listbox' ? isMultiSelectable : undefined
   })), makeAnalyticsAttribute(rest)), {}, {
-    children: itemCount < 10 ? childrenWithId : /*#__PURE__*/jsx(FixedSizeList, {
+    children: /*#__PURE__*/jsx(VariableSizeList, {
+      ref: virtualizedListRef,
       height: actionListBoxHeight,
       width: "100%",
-      itemSize: itemHeight,
+      itemSize: function itemSize(index) {
+        return getItemHeight({
+          index: index,
+          itemData: itemData,
+          actionListItemHeight: actionListItemHeight
+        });
+      },
       itemCount: itemCount,
-      itemData: itemData
-      // @ts-expect-error: props does exist
-      ,
+      itemData: itemData,
       itemKey: function itemKey(index) {
-        var _itemData$index;
-        return (_itemData$index = itemData[index]) === null || _itemData$index === void 0 ? void 0 : _itemData$index.props.value;
+        var _ref6, _itemData$index$props, _itemData$index2, _itemData$index3, _itemData$index4;
+        return (// @ts-expect-error: props does exist
+          (_ref6 = (_itemData$index$props = (_itemData$index2 = itemData[index]) === null || _itemData$index2 === void 0 ? void 0 : _itemData$index2.props.value) !== null && _itemData$index$props !== void 0 ? _itemData$index$props : // @ts-expect-error: props does exist
+          (_itemData$index3 = itemData[index]) === null || _itemData$index3 === void 0 ? void 0 : _itemData$index3.props.title) !== null && _ref6 !== void 0 ? _ref6 : // @ts-expect-error: props does exist
+          (_itemData$index4 = itemData[index]) === null || _itemData$index4 === void 0 ? void 0 : _itemData$index4.props.key
+        );
+      },
+      onItemsRendered: function onItemsRendered(_ref7) {
+        var visibleStartIndex = _ref7.visibleStartIndex,
+          visibleStopIndex = _ref7.visibleStopIndex;
+        setVisibleStartIndex(visibleStartIndex);
+        setVisibleStopIndex(visibleStopIndex);
       },
-      children: VirtualListItem
+      children: useCallback(function (_ref8) {
+        var index = _ref8.index,
+          style = _ref8.style,
+          data = _ref8.data;
+        return /*#__PURE__*/jsx(VirtualListItem, {
+          index: index,
+          style: style,
+          data: data,
+          onVirtualizedFocus: function onVirtualizedFocus(index) {
+            var _virtualizedListRef$c3, _virtualizedListRef$c4;
+            // We need scroll Direction to determine the index to focus
+            var scrollDirection = Math.round((visibleStartIndex + visibleStopIndex) / 2) > index ? 'top' : 'bottom';
+            virtualizedListRef === null || virtualizedListRef === void 0 ? void 0 : (_virtualizedListRef$c3 = virtualizedListRef.current) === null || _virtualizedListRef$c3 === void 0 ? void 0 : _virtualizedListRef$c3.resetAfterIndex(0);
+            /**
+             * we are scrolling to the item which is 3 items away from the current item.
+             * since we can have 2 item sectoin header and divider which are not focusable.
+             */
+            virtualizedListRef === null || virtualizedListRef === void 0 ? void 0 : (_virtualizedListRef$c4 = virtualizedListRef.current) === null || _virtualizedListRef$c4 === void 0 ? void 0 : _virtualizedListRef$c4.scrollToItem(index + (scrollDirection === 'top' ? -3 : 3), 'smart');
+          }
+        });
+      }, [visibleStartIndex, visibleStopIndex])
     })
   }));
 });

package/build/lib/web/production/components/ActionList/ActionListBox.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionListBox.web.js","sources":["../../../../../../src/components/ActionList/ActionListBox.web.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\nimport React from 'react';\nimport { FixedSizeList as VirtualizedList } from 'react-window';\nimport { StyledListBoxWrapper } from './styles/StyledListBoxWrapper';\nimport type { SectionData } from './actionListUtils';\nimport { actionListMaxHeight, getActionListPadding } from './styles/getBaseListBoxWrapperStyles';\nimport { useBottomSheetContext } from '~components/BottomSheet/BottomSheetContext';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport type { DataAnalyticsAttribute } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { getItemHeight } from '~components/BaseMenu/BaseMenuItem/tokens';\nimport { useTheme } from '~utils';\nimport type { Theme } from '~components/BladeProvider';\nimport { useDropdown } from '~components/Dropdown/useDropdown';\nimport { dropdownComponentIds } from '~components/Dropdown/dropdownComponentIds';\n\ntype ActionListBoxProps = {\n  childrenWithId?: React.ReactNode[] | null;\n  sectionData: SectionData;\n  actionListItemWrapperRole: 'listbox' | 'menu' | undefined;\n  isMultiSelectable: boolean;\n  isInBottomSheet: boolean;\n} & DataAnalyticsAttribute;\n\nconst _ActionListBox = React.forwardRef<HTMLDivElement, ActionListBoxProps>(\n  ({ childrenWithId, actionListItemWrapperRole, isMultiSelectable, ...rest }, ref) => {\n    const { isInBottomSheet } = useBottomSheetContext();\n\n    return (\n      <StyledListBoxWrapper\n        isInBottomSheet={isInBottomSheet}\n        ref={ref}\n        {...makeAccessible({\n          role: actionListItemWrapperRole,\n          multiSelectable: actionListItemWrapperRole === 'listbox' ? isMultiSelectable : undefined,\n        })}\n        {...makeAnalyticsAttribute(rest)}\n      >\n        {childrenWithId}\n      </StyledListBoxWrapper>\n    );\n  },\n);\n\nconst ActionListBox = assignWithoutSideEffects(React.memo(_ActionListBox), {\n  displayName: 'ActionListBox',\n});\n\n/**\n * Returns the height of item and height of container based on theme and device\n */\nconst getVirtualItemParams = ({\n  theme,\n  isMobile,\n}: {\n  theme: Theme;\n  isMobile: boolean;\n}): {\n  itemHeight: number;\n  actionListBoxHeight: number;\n} => {\n  const itemHeightResponsive = getItemHeight(theme);\n  const actionListPadding = getActionListPadding(theme);\n  const actionListBoxHeight = actionListMaxHeight - actionListPadding * 2;\n\n  return {\n    itemHeight: isMobile\n      ? itemHeightResponsive.itemHeightMobile\n      : itemHeightResponsive.itemHeightDesktop,\n    actionListBoxHeight,\n  };\n};\n\n/**\n * Takes the children (ActionListItem) and returns the filtered items based on `filteredValues` state\n */\nconst useFilteredItems = (\n  children: React.ReactNode[],\n): {\n  itemData: React.ReactNode[];\n  itemCount: number;\n} => {\n  const childrenArray = React.Children.toArray(children); // Convert children to an array\n\n  const { filteredValues, hasAutoCompleteInBottomSheetHeader, dropdownTriggerer } = useDropdown();\n\n  const items = React.useMemo(() => {\n    const hasAutoComplete =\n      hasAutoCompleteInBottomSheetHeader ||\n      dropdownTriggerer === dropdownComponentIds.triggers.AutoComplete;\n\n    if (!hasAutoComplete) {\n      return childrenArray;\n    }\n\n    // @ts-expect-error: props does exist\n    const filteredItems = childrenArray.filter((item) => filteredValues.includes(item.props.value));\n    return filteredItems;\n  }, [filteredValues, hasAutoCompleteInBottomSheetHeader, dropdownTriggerer, childrenArray]);\n\n  return {\n    itemData: items,\n    itemCount: items.length,\n  };\n};\n\nconst VirtualListItem = ({\n  index,\n  style,\n  data,\n}: {\n  index: number;\n  style: React.CSSProperties;\n  data: React.ReactNode[];\n}): React.ReactElement => {\n  return <div style={style}>{data[index]}</div>;\n};\n\nconst _ActionListVirtualizedBox = React.forwardRef<HTMLDivElement, ActionListBoxProps>(\n  ({ childrenWithId, actionListItemWrapperRole, isMultiSelectable, ...rest }, ref) => {\n    const items = React.Children.toArray(childrenWithId); // Convert children to an array\n    const { isInBottomSheet } = useBottomSheetContext();\n    const { itemData, itemCount } = useFilteredItems(items);\n\n    const isMobile = useIsMobile();\n    const { theme } = useTheme();\n    const { itemHeight, actionListBoxHeight } = React.useMemo(\n      () => getVirtualItemParams({ theme, isMobile }),\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [theme.name, isMobile],\n    );\n\n    return (\n      <StyledListBoxWrapper\n        isInBottomSheet={isInBottomSheet}\n        ref={ref}\n        {...makeAccessible({\n          role: actionListItemWrapperRole,\n          multiSelectable: actionListItemWrapperRole === 'listbox' ? isMultiSelectable : undefined,\n        })}\n        {...makeAnalyticsAttribute(rest)}\n      >\n        {itemCount < 10 ? (\n          childrenWithId\n        ) : (\n          <VirtualizedList\n            height={actionListBoxHeight}\n            width=\"100%\"\n            itemSize={itemHeight}\n            itemCount={itemCount}\n            itemData={itemData}\n            // @ts-expect-error: props does exist\n            itemKey={(index) => itemData[index]?.props.value}\n          >\n            {VirtualListItem}\n          </VirtualizedList>\n        )}\n      </StyledListBoxWrapper>\n    );\n  },\n);\n\nconst ActionListVirtualizedBox = assignWithoutSideEffects(React.memo(_ActionListVirtualizedBox), {\n  displayName: 'ActionListVirtualizedBox',\n});\n\nexport { ActionListBox, ActionListVirtualizedBox };\n"],"names":["_ActionListBox","React","forwardRef","_ref","ref","childrenWithId","actionListItemWrapperRole","isMultiSelectable","rest","_objectWithoutProperties","_excluded","_useBottomSheetContex","useBottomSheetContext","isInBottomSheet","_jsx","StyledListBoxWrapper","_objectSpread","makeAccessible","role","multiSelectable","undefined","makeAnalyticsAttribute","children","ActionListBox","assignWithoutSideEffects","memo","displayName","getVirtualItemParams","_ref2","theme","isMobile","itemHeightResponsive","getItemHeight","actionListPadding","getActionListPadding","actionListBoxHeight","actionListMaxHeight","itemHeight","itemHeightMobile","itemHeightDesktop","useFilteredItems","childrenArray","Children","toArray","_useDropdown","useDropdown","filteredValues","hasAutoCompleteInBottomSheetHeader","dropdownTriggerer","items","useMemo","hasAutoComplete","dropdownComponentIds","triggers","AutoComplete","filteredItems","filter","item","includes","props","value","itemData","itemCount","length","VirtualListItem","_ref3","index","style","data","_ActionListVirtualizedBox","_ref4","_excluded2","_useBottomSheetContex2","_useFilteredItems","useIsMobile","_useTheme","useTheme","_React$useMemo","name","VirtualizedList","height","width","itemSize","itemKey","_itemData$index","ActionListVirtualizedBox"],"mappings":"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"}
+{"version":3,"file":"ActionListBox.web.js","sources":["../../../../../../src/components/ActionList/ActionListBox.web.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\nimport React, { useCallback } from 'react';\nimport type { VariableSizeList } from 'react-window';\nimport { VariableSizeList as VirtualizedList } from 'react-window';\nimport { StyledListBoxWrapper } from './styles/StyledListBoxWrapper';\nimport type { SectionData } from './actionListUtils';\nimport { actionListMaxHeight, getActionListPadding } from './styles/getBaseListBoxWrapperStyles';\nimport { componentIds } from './componentIds';\nimport { ActionListSectionTitle } from './ActionListItem';\nimport { useBottomSheetContext } from '~components/BottomSheet/BottomSheetContext';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport type { DataAnalyticsAttribute } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport {\n  actionListSectionTitleHeight,\n  actionListDividerHeight,\n  getActionListItemHeight,\n} from '~components/BaseMenu/BaseMenuItem/tokens';\nimport { useTheme } from '~utils';\nimport type { Theme } from '~components/BladeProvider';\nimport { useDropdown } from '~components/Dropdown/useDropdown';\nimport { dropdownComponentIds } from '~components/Dropdown/dropdownComponentIds';\nimport { getComponentId } from '~utils/isValidAllowedChildren';\nimport { Divider } from '~components/Divider';\nimport type { ActionListItemProps } from '~components/ActionList';\n\ntype ActionListBoxProps = {\n  childrenWithId?: React.ReactNode[] | null;\n  sectionData: SectionData;\n  actionListItemWrapperRole: 'listbox' | 'menu' | undefined;\n  isMultiSelectable: boolean;\n  isInBottomSheet: boolean;\n} & DataAnalyticsAttribute;\n\nconst _ActionListBox = React.forwardRef<HTMLDivElement, ActionListBoxProps>(\n  ({ childrenWithId, actionListItemWrapperRole, isMultiSelectable, ...rest }, ref) => {\n    const { isInBottomSheet } = useBottomSheetContext();\n\n    return (\n      <StyledListBoxWrapper\n        isInBottomSheet={isInBottomSheet}\n        ref={ref}\n        {...makeAccessible({\n          role: actionListItemWrapperRole,\n          multiSelectable: actionListItemWrapperRole === 'listbox' ? isMultiSelectable : undefined,\n        })}\n        {...makeAnalyticsAttribute(rest)}\n      >\n        {childrenWithId}\n      </StyledListBoxWrapper>\n    );\n  },\n);\n\nconst ActionListBox = assignWithoutSideEffects(React.memo(_ActionListBox), {\n  displayName: 'ActionListBox',\n});\n\n/**\n *  get the height of the item based on the componentId\n */\nconst getItemHeight = ({\n  index,\n  itemData,\n  actionListItemHeight,\n}: {\n  index: number;\n  itemData: React.ReactNode[];\n  actionListItemHeight: number;\n}): number => {\n  if (getComponentId(itemData[index]) === componentIds.ActionListItem) {\n    return actionListItemHeight;\n  }\n\n  if (getComponentId(itemData[index]) === componentIds.ActionListSectionTitle) {\n    return actionListSectionTitleHeight;\n  }\n  // @ts-expect-error: key does exist\n  if (itemData[index]?.key.includes('divider')) {\n    return actionListDividerHeight;\n  }\n  return 0;\n};\n\n/**\n * Returns the height of item and height of container based on theme and device\n */\nconst getVirtualItemParams = ({\n  theme,\n  isMobile,\n  itemCount,\n  itemData,\n}: {\n  theme: Theme;\n  isMobile: boolean;\n  itemCount: number;\n  itemData: React.ReactNode[];\n}): {\n  actionListItemHeight: number;\n  actionListBoxHeight: number;\n} => {\n  const itemHeightResponsive = getActionListItemHeight(theme);\n  const actionListPadding = getActionListPadding(theme);\n  const actionListItemHeight = isMobile\n    ? itemHeightResponsive.itemHeightMobile\n    : itemHeightResponsive.itemHeightDesktop;\n  const shouldCalculateMinimumHeight = itemCount <= 10;\n  const actionListBoxHeight = actionListMaxHeight - actionListPadding * 2;\n  const actionListBoxMinHeight = shouldCalculateMinimumHeight\n    ? itemData.reduce<number>((acc, _, index) => {\n        const itemHeight = getItemHeight({ index, itemData, actionListItemHeight });\n        return acc + itemHeight;\n      }, 0)\n    : actionListBoxHeight;\n  const finalActionListBoxHeight = Math.min(actionListBoxHeight, actionListBoxMinHeight);\n\n  return {\n    actionListItemHeight,\n    actionListBoxHeight: finalActionListBoxHeight,\n  };\n};\n\n/**\n * Takes the children (ActionListItem) and returns the filtered items based on `filteredValues` state\n */\nconst useFilteredItems = (\n  children: React.ReactNode[],\n): {\n  itemData: React.ReactNode[];\n  itemCount: number;\n} => {\n  const childrenArray = React.Children.toArray(children); // Convert children to an array\n\n  const { filteredValues, hasAutoCompleteInBottomSheetHeader, dropdownTriggerer } = useDropdown();\n\n  const items = React.useMemo(() => {\n    const hasAutoComplete =\n      hasAutoCompleteInBottomSheetHeader ||\n      dropdownTriggerer === dropdownComponentIds.triggers.AutoComplete;\n\n    if (!hasAutoComplete) {\n      return childrenArray;\n    }\n\n    const filteredItems = childrenArray.reduce<React.ReactNode[]>((acc, item, index) => {\n      if (getComponentId(item) === componentIds.ActionListSection) {\n        const sectionTitle = (\n          <ActionListSectionTitle\n            key={index}\n            // @ts-expect-error: props does exist\n            title={item?.props.title}\n            isInsideVirtualizedList\n          />\n        );\n        // @ts-expect-error: props does exist\n        const sectionChildren = item?.props.children;\n\n        const divider =\n          index !== childrenArray.length - 1 ? (\n            <Divider marginX=\"spacing.3\" marginY=\"spacing.1\" key={`divider-${index}`} />\n          ) : null;\n        const filteredSectionChildren = sectionChildren.filter(\n          (item: { props: { value: string } }) => filteredValues.includes(item.props.value),\n        );\n        if (filteredSectionChildren.length !== 0) {\n          acc.push(sectionTitle, ...filteredSectionChildren, divider);\n        }\n      } else {\n        // @ts-expect-error: props does exist\n        const value = item?.props.value;\n        if (filteredValues.includes(value)) {\n          acc.push(item);\n        }\n      }\n      return acc;\n    }, []);\n\n    return filteredItems;\n  }, [filteredValues, hasAutoCompleteInBottomSheetHeader, dropdownTriggerer, childrenArray]);\n\n  return {\n    itemData: items,\n    itemCount: items.length,\n  };\n};\n\nconst VirtualListItem = React.memo(\n  ({\n    index,\n    style,\n    data,\n    onVirtualizedFocus,\n  }: {\n    index: number;\n    style: React.CSSProperties;\n    data: React.ReactNode[];\n    onVirtualizedFocus: (index: number) => void;\n  }): React.ReactElement | null => {\n    const currentItem = data[index];\n\n    if (\n      React.isValidElement(currentItem) &&\n      getComponentId(currentItem) === componentIds.ActionListItem\n    ) {\n      // Clone the element passed via `data` and add the `_virtualizedIndex` prop\n      const elementWithIndex = React.cloneElement(\n        currentItem as React.ReactElement<ActionListItemProps>,\n        {\n          _virtualizedIndex: index,\n          _onVirtualizedFocus: onVirtualizedFocus,\n        },\n      );\n\n      return <div style={style}>{elementWithIndex}</div>;\n    }\n\n    return <div style={style}>{data[index]}</div>;\n  },\n  (prevProps, nextProps) => {\n    // Custom comparison function to determine if component should update\n    return (\n      prevProps.index === nextProps.index &&\n      prevProps.style === nextProps.style &&\n      prevProps.data[prevProps.index] === nextProps.data[nextProps.index]\n    );\n  },\n);\n\nconst _ActionListVirtualizedBox = React.forwardRef<HTMLDivElement, ActionListBoxProps>(\n  ({ childrenWithId, actionListItemWrapperRole, isMultiSelectable, ...rest }, ref) => {\n    const virtualizedListRef = React.useRef<VariableSizeList>(null);\n    const [visibleStartIndex, setVisibleStartIndex] = React.useState(0);\n    const [visibleStopIndex, setVisibleStopIndex] = React.useState(0);\n    const items = React.Children.toArray(childrenWithId); // Convert children to an array\n    const { isInBottomSheet } = useBottomSheetContext();\n    const { itemData, itemCount } = useFilteredItems(items);\n\n    const isMobile = useIsMobile();\n    const { theme } = useTheme();\n    const { actionListItemHeight, actionListBoxHeight } = React.useMemo(\n      () => getVirtualItemParams({ theme, isMobile, itemCount, itemData }),\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [theme.name, isMobile, itemCount, itemData],\n    );\n    React.useEffect(() => {\n      virtualizedListRef?.current?.resetAfterIndex(0);\n      virtualizedListRef?.current?.scrollToItem(0);\n    }, [itemCount]);\n\n    return (\n      <StyledListBoxWrapper\n        isInBottomSheet={isInBottomSheet}\n        // in case of virtualized list, we only render visible items. so css will hide divider for every last item visible. instead of hiding the last divider of the list.\n        ref={ref}\n        {...makeAccessible({\n          role: actionListItemWrapperRole,\n          multiSelectable: actionListItemWrapperRole === 'listbox' ? isMultiSelectable : undefined,\n        })}\n        {...makeAnalyticsAttribute(rest)}\n      >\n        <VirtualizedList<React.ReactNode[]>\n          ref={virtualizedListRef}\n          height={actionListBoxHeight}\n          width=\"100%\"\n          itemSize={(index) => getItemHeight({ index, itemData, actionListItemHeight })}\n          itemCount={itemCount}\n          itemData={itemData}\n          itemKey={(index) =>\n            // @ts-expect-error: props does exist\n            itemData[index]?.props.value ??\n            // @ts-expect-error: props does exist\n            itemData[index]?.props.title ??\n            // @ts-expect-error: props does exist\n            itemData[index]?.props.key\n          }\n          onItemsRendered={({ visibleStartIndex, visibleStopIndex }) => {\n            setVisibleStartIndex(visibleStartIndex);\n            setVisibleStopIndex(visibleStopIndex);\n          }}\n        >\n          {useCallback(\n            ({ index, style, data }) => {\n              return (\n                <VirtualListItem\n                  index={index}\n                  style={style}\n                  data={data}\n                  onVirtualizedFocus={(index) => {\n                    // We need scroll Direction to determine the index to focus\n                    const scrollDirection =\n                      Math.round((visibleStartIndex + visibleStopIndex) / 2) > index\n                        ? 'top'\n                        : 'bottom';\n                    virtualizedListRef?.current?.resetAfterIndex(0);\n                    /**\n                     * we are scrolling to the item which is 3 items away from the current item.\n                     * since we can have 2 item sectoin header and divider which are not focusable.\n                     */\n                    virtualizedListRef?.current?.scrollToItem(\n                      index + (scrollDirection === 'top' ? -3 : 3),\n                      'smart',\n                    );\n                  }}\n                />\n              );\n            },\n            [visibleStartIndex, visibleStopIndex],\n          )}\n        </VirtualizedList>\n      </StyledListBoxWrapper>\n    );\n  },\n);\n\nconst ActionListVirtualizedBox = assignWithoutSideEffects(React.memo(_ActionListVirtualizedBox), {\n  displayName: 'ActionListVirtualizedBox',\n});\n\nexport { ActionListBox, ActionListVirtualizedBox };\n"],"names":["_ActionListBox","React","forwardRef","_ref","ref","childrenWithId","actionListItemWrapperRole","isMultiSelectable","rest","_objectWithoutProperties","_excluded","_useBottomSheetContex","useBottomSheetContext","isInBottomSheet","_jsx","StyledListBoxWrapper","_objectSpread","makeAccessible","role","multiSelectable","undefined","makeAnalyticsAttribute","children","ActionListBox","assignWithoutSideEffects","memo","displayName","getItemHeight","_ref2","_itemData$index","index","itemData","actionListItemHeight","getComponentId","componentIds","ActionListItem","ActionListSectionTitle","actionListSectionTitleHeight","key","includes","actionListDividerHeight","getVirtualItemParams","_ref3","theme","isMobile","itemCount","itemHeightResponsive","getActionListItemHeight","actionListPadding","getActionListPadding","itemHeightMobile","itemHeightDesktop","shouldCalculateMinimumHeight","actionListBoxHeight","actionListMaxHeight","actionListBoxMinHeight","reduce","acc","_","itemHeight","finalActionListBoxHeight","Math","min","useFilteredItems","childrenArray","Children","toArray","_useDropdown","useDropdown","filteredValues","hasAutoCompleteInBottomSheetHeader","dropdownTriggerer","items","useMemo","hasAutoComplete","dropdownComponentIds","triggers","AutoComplete","filteredItems","item","ActionListSection","sectionTitle","title","props","isInsideVirtualizedList","sectionChildren","divider","length","Divider","marginX","marginY","concat","filteredSectionChildren","filter","value","push","apply","_toConsumableArray","VirtualListItem","_ref4","style","data","onVirtualizedFocus","currentItem","isValidElement","elementWithIndex","cloneElement","_virtualizedIndex","_onVirtualizedFocus","prevProps","nextProps","_ActionListVirtualizedBox","_ref5","_excluded2","virtualizedListRef","useRef","_React$useState","useState","_React$useState2","_slicedToArray","visibleStartIndex","setVisibleStartIndex","_React$useState3","_React$useState4","visibleStopIndex","setVisibleStopIndex","_useBottomSheetContex2","_useFilteredItems","useIsMobile","_useTheme","useTheme","_React$useMemo","name","useEffect","_virtualizedListRef$c","_virtualizedListRef$c2","current","resetAfterIndex","scrollToItem","VirtualizedList","height","width","itemSize","itemKey","_ref6","_itemData$index$props","_itemData$index2","_itemData$index3","_itemData$index4","onItemsRendered","_ref7","useCallback","_ref8","_virtualizedListRef$c3","_virtualizedListRef$c4","scrollDirection","round","ActionListVirtualizedBox"],"mappings":"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"}

package/build/lib/web/production/components/ActionList/ActionListItem.js

@@ -1,5 +1,5 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React__default from 'react';
 import styled from 'styled-components';
 import { componentIds } from './componentIds.js';
@@ -22,17 +22,17 @@ import '../BaseMenu/index.js';
 import '../Checkbox/index.js';
 import '../Avatar/index.js';
 import '../../utils/makeAnalyticsAttribute/index.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { makeSize } from '../../utils/makeSize/makeSize.js';
-import { isReactNative } from '../../utils/platform/isReactNative.js';
 import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
+import { Text } from '../Typography/Text/Text.js';
+import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
+import { isReactNative } from '../../utils/platform/isReactNative.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
 import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
-import { Text } from '../Typography/Text/Text.js';
 import { Divider } from '../Divider/Divider.js';
-import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
 import { useBaseMenuItem } from '../BaseMenu/BaseMenuContext.js';
 import { Box } from '../Box/Box.js';
 import { Avatar } from '../Avatar/Avatar.web.js';
@@ -54,13 +54,32 @@ var StyledActionListSectionTitle = /*#__PURE__*/styled(BaseBox).withConfig({
     padding: makeSize(props.theme.spacing[3])
   };
 });
-var _ActionListSection = function _ActionListSection(_ref) {
+var _ActionListSectionTitle = function _ActionListSectionTitle(_ref) {
   var title = _ref.title,
-    children = _ref.children,
-    testID = _ref.testID,
-    _hideDivider = _ref._hideDivider,
-    _sectionChildValues = _ref._sectionChildValues,
-    rest = _objectWithoutProperties(_ref, _excluded);
+    _ref$isInsideVirtuali = _ref.isInsideVirtualizedList,
+    isInsideVirtualizedList = _ref$isInsideVirtuali === void 0 ? false : _ref$isInsideVirtuali;
+  return /*#__PURE__*/jsx(StyledActionListSectionTitle, _objectSpread(_objectSpread({}, makeAccessible({
+    hidden: !isInsideVirtualizedList,
+    role: isInsideVirtualizedList ? 'heading' : undefined
+  })), {}, {
+    children: /*#__PURE__*/jsx(Text, {
+      color: "surface.text.gray.muted",
+      size: "small",
+      weight: "semibold",
+      children: title
+    })
+  }));
+};
+var ActionListSectionTitle = /*#__PURE__*/assignWithoutSideEffects(_ActionListSectionTitle, {
+  componentId: componentIds.ActionListSectionTitle
+});
+var _ActionListSection = function _ActionListSection(_ref2) {
+  var title = _ref2.title,
+    children = _ref2.children,
+    testID = _ref2.testID,
+    _hideDivider = _ref2._hideDivider,
+    _sectionChildValues = _ref2._sectionChildValues,
+    rest = _objectWithoutProperties(_ref2, _excluded);
   var _useDropdown = useDropdown(),
     hasAutoCompleteInBottomSheetHeader = _useDropdown.hasAutoCompleteInBottomSheetHeader,
     dropdownTriggerer = _useDropdown.dropdownTriggerer,
@@ -84,16 +103,9 @@ var _ActionListSection = function _ActionListSection(_ref) {
     name: MetaConstants.ActionListSection,
     testID: testID
   })), makeAnalyticsAttribute(rest)), {}, {
-    children: [isSectionVisible ? /*#__PURE__*/jsx(StyledActionListSectionTitle, _objectSpread(_objectSpread({}, makeAccessible({
-      hidden: true
-    })), {}, {
-      children: /*#__PURE__*/jsx(Text, {
-        color: "surface.text.gray.muted",
-        size: "small",
-        weight: "semibold",
-        children: title
-      })
-    })) : null, /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({}, makeAccessible({
+    children: [isSectionVisible ? /*#__PURE__*/jsx(ActionListSectionTitle, {
+      title: title
+    }) : null, /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({}, makeAccessible({
       // On web, we just wrap it in another listbox to announce item count properly for particular group.
       // On React Native, we ignore it since `menu` + `group` role will take care of accessibility
       role: isReactNative() ? undefined : 'listbox'
@@ -105,11 +117,11 @@ var _ActionListSection = function _ActionListSection(_ref) {
     }) : null]
   }));
 };
-var ActionListSection = /*#__PURE__*/assignWithoutSideEffects(_ActionListSection, {
+var ActionListSection = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.memo(_ActionListSection), {
   componentId: componentIds.ActionListSection
 });
-var _ActionListItemIcon = function _ActionListItemIcon(_ref2) {
-  var icon = _ref2.icon;
+var _ActionListItemIcon = function _ActionListItemIcon(_ref3) {
+  var icon = _ref3.icon;
   var Icon = icon;
   var _useBaseMenuItem = useBaseMenuItem(),
     color = _useBaseMenuItem.color,
@@ -123,8 +135,8 @@ var _ActionListItemIcon = function _ActionListItemIcon(_ref2) {
 var ActionListItemIcon = /*#__PURE__*/assignWithoutSideEffects(_ActionListItemIcon, {
   componentId: componentIds.ActionListItemIcon
 });
-var _ActionListItemBadgeGroup = function _ActionListItemBadgeGroup(_ref3) {
-  var children = _ref3.children;
+var _ActionListItemBadgeGroup = function _ActionListItemBadgeGroup(_ref4) {
+  var children = _ref4.children;
   return /*#__PURE__*/jsx(Box, {
     display: "flex",
     alignItems: "center",
@@ -152,8 +164,8 @@ var _ActionListItemBadge = function _ActionListItemBadge(props) {
 var ActionListItemBadge = /*#__PURE__*/assignWithoutSideEffects(_ActionListItemBadge, {
   componentId: componentIds.ActionListItemBadge
 });
-var _ActionListItemText = function _ActionListItemText(_ref4) {
-  var children = _ref4.children;
+var _ActionListItemText = function _ActionListItemText(_ref5) {
+  var children = _ref5.children;
   var _useBaseMenuItem2 = useBaseMenuItem(),
     isDisabled = _useBaseMenuItem2.isDisabled;
   return /*#__PURE__*/jsx(Text, {
@@ -210,6 +222,13 @@ var _ActionListItem = function _ActionListItem(props) {
     isKeydownPressed = _useDropdown2.isKeydownPressed,
     filteredValues = _useDropdown2.filteredValues,
     hasAutoCompleteInBottomSheetHeader = _useDropdown2.hasAutoCompleteInBottomSheetHeader;
+  React__default.useEffect(function () {
+    if (activeIndex === props._index && props._virtualizedIndex !== undefined) {
+      var _props$_onVirtualized;
+      (_props$_onVirtualized = props._onVirtualizedFocus) === null || _props$_onVirtualized === void 0 ? void 0 : _props$_onVirtualized.call(props, props._virtualizedIndex);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeIndex]);
   var hasAutoComplete = hasAutoCompleteInBottomSheetHeader || dropdownTriggerer === dropdownComponentIds.triggers.AutoComplete;
   var renderOnWebAs = props.href ? 'a' : 'button';
 
@@ -310,5 +329,5 @@ var ActionListItem = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__
   displayName: componentIds.ActionListItem
 });
 
-export { ActionListItem, ActionListItemAvatar, ActionListItemBadge, ActionListItemBadgeGroup, ActionListItemIcon, ActionListItemText, ActionListSection };
+export { ActionListItem, ActionListItemAvatar, ActionListItemBadge, ActionListItemBadgeGroup, ActionListItemIcon, ActionListItemText, ActionListSection, ActionListSectionTitle };
 //# sourceMappingURL=ActionListItem.js.map