@razorpay/blade 10.14.2 → 10.14.3

package/build/components/index.d.ts

@@ -2115,8 +2115,14 @@ declare type ActionListSectionProps = {
      * @private
      */
     _hideDivider?: boolean;
+    /**
+     * Internally used to hide / show section in AutoComplete
+     *
+     * @private
+     */
+    _sectionChildValues?: string[];
 } & TestID;
-declare const ActionListSection: ({ title, children, testID, _hideDivider, }: ActionListSectionProps) => React__default.ReactElement;
+declare const ActionListSection: ({ title, children, testID, _hideDivider, _sectionChildValues, }: ActionListSectionProps) => React__default.ReactElement;
 declare const ActionListItemIcon: ({ icon }: {
     icon: IconComponent;
 }) => React__default.ReactElement;

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

@@ -590,17 +590,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)) {
@@ -15846,9 +15849,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
@@ -15858,7 +15878,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, {
@@ -15867,16 +15887,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, {
@@ -16038,17 +16058,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';