@razorpay/blade 10.14.1 → 10.14.2

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

@@ -29495,6 +29495,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 +29560,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 +29803,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 +29811,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, {