@razorpay/blade 10.14.2 → 10.14.4

package/build/components/index.production.web.js

@@ -537,17 +537,20 @@ var getActionListProperties = function getActionListProperties(children) {
     if ( /*#__PURE__*/React__default.isValidElement(child)) {
       if (isValidAllowedChildren(child, componentIds.ActionListSection)) {
         var shouldHideDivider = index === lastActionListSectionIndex && !isActionListItemPresentAfterSection;
+        var sectionChildValues = [];
         return /*#__PURE__*/React__default.cloneElement(child, {
           // @ts-expect-error: TS doesn't understand the child's props
           children: React__default.Children.map(child.props.children, function (childInSection) {
             currentSection = child.props.title;
+            sectionChildValues.push(childInSection.props.value);
             if (isValidAllowedChildren(childInSection, componentIds.ActionListItem)) {
               return getActionListItemWithId(childInSection, shouldHideDivider);
             }
             return childInSection;
           }),
           // On web, we handle it with descendant styling in css so no need of JS there
-          _hideDivider: isReactNative$4() ? shouldHideDivider : undefined
+          _hideDivider: isReactNative$4() ? shouldHideDivider : undefined,
+          _sectionChildValues: sectionChildValues
         });
       }
       if (isValidAllowedChildren(child, componentIds.ActionListItem)) {
@@ -15608,9 +15611,26 @@ var _ActionListSection = function _ActionListSection(_ref) {
   var title = _ref.title,
     children = _ref.children,
     testID = _ref.testID,
-    _hideDivider = _ref._hideDivider;
+    _hideDivider = _ref._hideDivider,
+    _sectionChildValues = _ref._sectionChildValues;
   var _useActionListContext = useActionListContext(),
     surfaceLevel = _useActionListContext.surfaceLevel;
+  var _useDropdown = useDropdown(),
+    hasAutoCompleteInBottomSheetHeader = _useDropdown.hasAutoCompleteInBottomSheetHeader,
+    dropdownTriggerer = _useDropdown.dropdownTriggerer,
+    filteredValues = _useDropdown.filteredValues;
+  var hasAutoComplete = hasAutoCompleteInBottomSheetHeader || dropdownTriggerer === dropdownComponentIds.triggers.AutoComplete;
+  var isSectionVisible = React__default.useMemo(function () {
+    if (hasAutoComplete) {
+      var visibleActionListItemInSection = _sectionChildValues === null || _sectionChildValues === void 0 ? void 0 : _sectionChildValues.find(function (actionItemValue) {
+        return filteredValues.includes(actionItemValue);
+      });
+      return Boolean(visibleActionListItemInSection);
+    }
+    return true;
+  }, [_sectionChildValues, hasAutoComplete, filteredValues]);
+  var showDividerInRN = !(_hideDivider && isReactNative$4());
+  var showDividerInAutoComplete = hasAutoComplete ? isSectionVisible && filteredValues.length > 1 : true;
   return /*#__PURE__*/jsxs(BaseBox, _objectSpread$1q(_objectSpread$1q(_objectSpread$1q({}, makeAccessible({
     role: getActionListSectionRole(),
     label: title
@@ -15620,7 +15640,7 @@ var _ActionListSection = function _ActionListSection(_ref) {
     name: MetaConstants.ActionListSection,
     testID: testID
   })), {}, {
-    children: [/*#__PURE__*/jsx(StyledActionListSectionTitle, _objectSpread$1q(_objectSpread$1q({}, makeAccessible({
+    children: [isSectionVisible ? /*#__PURE__*/jsx(StyledActionListSectionTitle, _objectSpread$1q(_objectSpread$1q({}, makeAccessible({
       hidden: true
     })), {}, {
       children: /*#__PURE__*/jsx(Text, {
@@ -15629,16 +15649,16 @@ var _ActionListSection = function _ActionListSection(_ref) {
         weight: "bold",
         children: title
       })
-    })), /*#__PURE__*/jsx(BaseBox, _objectSpread$1q(_objectSpread$1q({}, makeAccessible({
+    })) : null, /*#__PURE__*/jsx(BaseBox, _objectSpread$1q(_objectSpread$1q({}, 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$4() ? undefined : 'listbox'
     })), {}, {
       children: children
-    })), _hideDivider && isReactNative$4() ? null : /*#__PURE__*/jsx(Divider, {
+    })), showDividerInAutoComplete && showDividerInRN ? /*#__PURE__*/jsx(Divider, {
       marginX: "spacing.3",
       marginY: "spacing.1"
-    })]
+    }) : null]
   }));
 };
 var ActionListSection = /*#__PURE__*/assignWithoutSideEffects(_ActionListSection, {
@@ -15800,17 +15820,17 @@ var ActionListItemBody = /*#__PURE__*/React__default.memo(_ActionListItemBody);
  * ```
  */
 var _ActionListItem = function _ActionListItem(props) {
-  var _useDropdown = useDropdown(),
-    activeIndex = _useDropdown.activeIndex,
-    dropdownBaseId = _useDropdown.dropdownBaseId,
-    onOptionClick = _useDropdown.onOptionClick,
-    selectedIndices = _useDropdown.selectedIndices,
-    setShouldIgnoreBlurAnimation = _useDropdown.setShouldIgnoreBlurAnimation,
-    selectionType = _useDropdown.selectionType,
-    dropdownTriggerer = _useDropdown.dropdownTriggerer,
-    isKeydownPressed = _useDropdown.isKeydownPressed,
-    filteredValues = _useDropdown.filteredValues,
-    hasAutoCompleteInBottomSheetHeader = _useDropdown.hasAutoCompleteInBottomSheetHeader;
+  var _useDropdown2 = useDropdown(),
+    activeIndex = _useDropdown2.activeIndex,
+    dropdownBaseId = _useDropdown2.dropdownBaseId,
+    onOptionClick = _useDropdown2.onOptionClick,
+    selectedIndices = _useDropdown2.selectedIndices,
+    setShouldIgnoreBlurAnimation = _useDropdown2.setShouldIgnoreBlurAnimation,
+    selectionType = _useDropdown2.selectionType,
+    dropdownTriggerer = _useDropdown2.dropdownTriggerer,
+    isKeydownPressed = _useDropdown2.isKeydownPressed,
+    filteredValues = _useDropdown2.filteredValues,
+    hasAutoCompleteInBottomSheetHeader = _useDropdown2.hasAutoCompleteInBottomSheetHeader;
   var _useTheme = useTheme(),
     platform = _useTheme.platform;
   var isMobile = platform === 'onMobile';