@razorpay/blade 10.14.1 → 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';
@@ -29495,6 +29515,7 @@ var _BottomSheet = function _BottomSheet(_ref2) {
   var scrollRef = React__default.useRef(null);
   var grabHandleRef = React__default.useRef(null);
   var defaultInitialFocusRef = React__default.useRef(null);
+  var originalFocusElement = React__default.useRef(null);
   var initialSnapPoint = React__default.useRef(snapPoints[1]);
   var totalHeight = React__default.useMemo(function () {
     return grabHandleHeight + headerHeight + footerHeight + contentHeight;
@@ -29559,17 +29580,43 @@ var _BottomSheet = function _BottomSheet(_ref2) {
       }
     }
   }, [dimensions.height, snapPoints, totalHeight]);
+  var returnFocus = React__default.useCallback(function () {
+    if (!originalFocusElement.current) return;
+    originalFocusElement.current.focus();
+    // After returning focus we will clear the original focus
+    // Because if sheet can be opened up via multiple triggers
+    // We want to ensure the focus returns back to the most recent triggerer
+    originalFocusElement.current = null;
+  }, [originalFocusElement]);
+  var focusOnInitialRef = React__default.useCallback(function () {
+    if (!initialFocusRef) {
+      var _defaultInitialFocusR;
+      // focus on close button
+      (_defaultInitialFocusR = defaultInitialFocusRef.current) === null || _defaultInitialFocusR === void 0 ? void 0 : _defaultInitialFocusR.focus();
+    } else {
+      var _initialFocusRef$curr;
+      // focus on the initialRef passed by the user
+      (_initialFocusRef$curr = initialFocusRef.current) === null || _initialFocusRef$curr === void 0 ? void 0 : _initialFocusRef$curr.focus();
+    }
+  }, [initialFocusRef]);
   var handleOnOpen = React__default.useCallback(function () {
+    var _originalFocusElement;
     setPositionY(dimensions.height * initialSnapPoint.current);
     scrollLockRef.current.activate();
-  }, [dimensions.height, scrollLockRef, setPositionY]);
+    // initialize the original focused element
+    // On first render it will be the activeElement, eg: the button trigger or select input
+    // On Subsequent open operations it won't further update the original focus
+    originalFocusElement.current = (_originalFocusElement = originalFocusElement.current) !== null && _originalFocusElement !== void 0 ? _originalFocusElement : document.activeElement;
+    focusOnInitialRef();
+  }, [dimensions.height, focusOnInitialRef, scrollLockRef, setPositionY]);
   var handleOnClose = React__default.useCallback(function () {
     setPositionY(0);
   }, [setPositionY]);
   var close = React__default.useCallback(function () {
     onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
     bottomSheetAndDropdownGlue === null || bottomSheetAndDropdownGlue === void 0 ? void 0 : bottomSheetAndDropdownGlue.onBottomSheetDismiss();
-  }, [bottomSheetAndDropdownGlue, onDismiss]);
+    returnFocus();
+  }, [bottomSheetAndDropdownGlue, onDismiss, returnFocus]);
 
   // sync controlled state to our actions
   React__default.useEffect(function () {
@@ -29776,13 +29823,6 @@ var _BottomSheet = function _BottomSheet(_ref2) {
     }
   }, [isMounted, scrollLockRef]);
 
-  // required by floating ui to handle focus
-  var _useFloating = useFloating({
-      open: isMounted
-    }),
-    refs = _useFloating.refs,
-    context = _useFloating.context;
-
   // We don't want to destroy the react tree when we are rendering inside Dropdown
   // Because if we bail out early then ActionList won't render,
   // and Dropdown manages it's state based on the rendered JSX of ActionList
@@ -29791,48 +29831,39 @@ var _BottomSheet = function _BottomSheet(_ref2) {
   if (!isMounted && !isInsideDropdown) {
     return /*#__PURE__*/jsx(Fragment, {});
   }
-  return /*#__PURE__*/jsx(BottomSheetContext.Provider, {
+  return /*#__PURE__*/jsxs(BottomSheetContext.Provider, {
     value: contextValue,
-    children: (isMounted || isInsideDropdown) && /*#__PURE__*/jsx(FloatingFocusManager, {
-      returnFocus: true,
-      initialFocus: initialFocusRef !== null && initialFocusRef !== void 0 ? initialFocusRef : defaultInitialFocusRef,
-      context: context,
+    children: [/*#__PURE__*/jsx(BottomSheetBackdrop, {
+      zIndex: bottomSheetZIndex
+    }), /*#__PURE__*/jsx(BottomSheetSurface, _objectSpread$f(_objectSpread$f(_objectSpread$f({}, metaAttribute({
+      name: MetaConstants.BottomSheet,
+      testID: 'bottomsheet-surface'
+    })), makeAccessible({
       modal: true,
-      children: /*#__PURE__*/jsxs(Fragment, {
-        children: [/*#__PURE__*/jsx(BottomSheetBackdrop, {
-          zIndex: bottomSheetZIndex
-        }), /*#__PURE__*/jsx(BottomSheetSurface, _objectSpread$f(_objectSpread$f(_objectSpread$f({}, metaAttribute({
-          name: MetaConstants.BottomSheet,
-          testID: 'bottomsheet-surface'
-        })), makeAccessible({
-          modal: true,
-          role: 'dialog'
-        })), {}, {
-          windowHeight: dimensions.height,
-          isDragging: isDragging,
-          style: {
-            opacity: isVisible ? 1 : 0,
-            pointerEvents: isVisible ? 'all' : 'none',
-            height: positionY,
-            bottom: 0,
-            top: 'auto',
-            zIndex: bottomSheetZIndex
-          },
-          ref: refs.setFloating,
-          children: /*#__PURE__*/jsxs(BaseBox, {
-            height: "100%",
-            display: "flex",
-            flexDirection: "column",
-            children: [/*#__PURE__*/jsx(BottomSheetGrabHandle, _objectSpread$f(_objectSpread$f({
-              ref: grabHandleRef,
-              isHeaderFloating: isHeaderFloating
-            }, metaAttribute({
-              name: ComponentIds.BottomSheetGrabHandle
-            })), bind())), children]
-          })
-        }))]
+      role: 'dialog'
+    })), {}, {
+      windowHeight: dimensions.height,
+      isDragging: isDragging,
+      style: {
+        opacity: isVisible ? 1 : 0,
+        pointerEvents: isVisible ? 'all' : 'none',
+        height: positionY,
+        bottom: 0,
+        top: 'auto',
+        zIndex: bottomSheetZIndex
+      },
+      children: /*#__PURE__*/jsxs(BaseBox, {
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        children: [/*#__PURE__*/jsx(BottomSheetGrabHandle, _objectSpread$f(_objectSpread$f({
+          ref: grabHandleRef,
+          isHeaderFloating: isHeaderFloating
+        }, metaAttribute({
+          name: ComponentIds.BottomSheetGrabHandle
+        })), bind())), children]
       })
-    })
+    }))]
   });
 };
 var BottomSheet = /*#__PURE__*/assignWithoutSideEffects(_BottomSheet, {