@razorpay/blade 9.5.2 → 9.5.3

package/build/components/index.d.ts

@@ -6998,6 +6998,12 @@ declare type BottomSheetProps = {
      * By default the initial focus will go to the close button
      */
     initialFocusRef?: React.MutableRefObject<any>;
+    /**
+     * Sets the z-index of the bottom sheet
+     * Note: when using stacked bottom sheet make sure all the bottom sheets have the same zIndex
+     * @default 100
+     */
+    zIndex?: number;
 };
 declare type BottomSheetHeaderProps = Pick<BaseHeaderProps, 'title' | 'subtitle' | 'leading' | 'showBackButton' | 'onBackButtonClick'> & {
     /**
@@ -7032,7 +7038,7 @@ declare const BottomSheetFooter: ({ children }: BaseFooterProps) => React__defau
 
 declare const BottomSheetBody: ({ children, padding, }: BottomSheetBodyProps) => React__default.ReactElement;
 
-declare const BottomSheet: ({ isOpen, onDismiss, children, initialFocusRef, snapPoints, }: BottomSheetProps) => React__default.ReactElement;
+declare const BottomSheet: ({ isOpen, onDismiss, children, initialFocusRef, snapPoints, zIndex, }: BottomSheetProps) => React__default.ReactElement;
 
 declare type AccordionProps = {
     /**

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

@@ -21735,16 +21735,7 @@ var StyledBaseNativeButton = /*#__PURE__*/styled.button.withConfig({
   displayName: "StyledBaseInputweb__StyledBaseNativeButton",
   componentId: "hsusrk-1"
 })(function (props) {
-  return _objectSpread$M(_objectSpread$M(_objectSpread$M({}, getWebInputStyles(props)), getTextStyles({
-    size: 'medium',
-    variant: 'body',
-    type: props.value ? 'subtle' : 'placeholder',
-    weight: 'regular',
-    contrast: 'low',
-    theme: props.theme
-  })), {}, {
-    textAlign: props.textAlign
-  });
+  return _objectSpread$M({}, getWebInputStyles(props));
 });
 var autoCompleteSuggestionTypeMap = {
   none: 'off',
@@ -21833,7 +21824,12 @@ var _StyledBaseInput = function _StyledBaseInput(_ref, ref) {
     }
   }, commonProps), props), accessibilityProps), {}, {
     value: props.value,
-    children: props.value ? props.value : props.placeholder
+    children: /*#__PURE__*/jsx(Text, {
+      type: props.value ? 'subtle' : 'placeholder',
+      truncateAfterLines: 1,
+      textAlign: props.textAlign,
+      children: props.value ? props.value : props.placeholder
+    })
   })) : /*#__PURE__*/jsx(StyledBaseNativeInput // @ts-expect-error: TS doesnt understand that this will always be `input`
   , _objectSpread$M(_objectSpread$M(_objectSpread$M({
     ref: ref,
@@ -28835,7 +28831,9 @@ var _BottomSheet = function _BottomSheet(_ref2) {
       children = _ref2.children,
       initialFocusRef = _ref2.initialFocusRef,
       _ref2$snapPoints = _ref2.snapPoints,
-      snapPoints = _ref2$snapPoints === void 0 ? [0.35, 0.5, 0.85] : _ref2$snapPoints;
+      snapPoints = _ref2$snapPoints === void 0 ? [0.35, 0.5, 0.85] : _ref2$snapPoints,
+      _ref2$zIndex = _ref2.zIndex,
+      zIndex = _ref2$zIndex === void 0 ? 100 : _ref2$zIndex;
 
   var _useTheme = useTheme(),
       theme = _useTheme.theme;
@@ -28889,7 +28887,6 @@ var _BottomSheet = function _BottomSheet(_ref2) {
   var preventScrollingRef = React__default.useRef(true);
   var scrollRef = React__default.useRef(null);
   var grabHandleRef = React__default.useRef(null);
-  var originalFocusElement = React__default.useRef(null);
   var defaultInitialFocusRef = React__default.useRef(null);
   var initialSnapPoint = React__default.useRef(snapPoints[1]);
   var totalHeight = React__default.useMemo(function () {
@@ -28906,7 +28903,7 @@ var _BottomSheet = function _BottomSheet(_ref2) {
 
   var currentStackIndex = getCurrentStackIndexById(id);
   var isOnTopOfStack = getTopOfTheStack() === id;
-  var zIndex = 100 - currentStackIndex;
+  var bottomSheetZIndex = zIndex - currentStackIndex;
   var setPositionY = React__default.useCallback(function (value) {
     var limit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     var maxValue = computeMaxContent({
@@ -28950,42 +28947,13 @@ var _BottomSheet = function _BottomSheet(_ref2) {
       initialSnapPoint.current = snapPoints[0];
     }
   }, [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(); // 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]);
+    scrollLockRef.current.activate();
+  }, [dimensions.height, scrollLockRef, setPositionY]);
   var handleOnClose = React__default.useCallback(function () {
     setPositionY(0);
-    returnFocus();
-  }, [returnFocus, setPositionY]);
+  }, [setPositionY]);
   var close = React__default.useCallback(function () {
     onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
     bottomSheetAndDropdownGlue === null || bottomSheetAndDropdownGlue === void 0 ? void 0 : bottomSheetAndDropdownGlue.onBottomSheetDismiss();
@@ -29203,49 +29171,66 @@ var _BottomSheet = function _BottomSheet(_ref2) {
 
       _setPositionY(0);
     }
-  }, [isMounted, scrollLockRef]); // We don't want to destroy the react tree when we are rendering inside Dropdown
+  }, [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
   // If we don't render ActionList Dropdown state will reset each time we open/close BottomSheet
 
+
   var isInsideDropdown = Boolean(bottomSheetAndDropdownGlue);
 
   if (!isMounted && !isInsideDropdown) {
     return /*#__PURE__*/jsx(Fragment, {});
   }
 
-  return /*#__PURE__*/jsxs(BottomSheetContext.Provider, {
+  return /*#__PURE__*/jsx(BottomSheetContext.Provider, {
     value: contextValue,
-    children: [/*#__PURE__*/jsx(BottomSheetBackdrop, {
-      zIndex: zIndex
-    }), /*#__PURE__*/jsx(BottomSheetSurface, _objectSpread$c(_objectSpread$c(_objectSpread$c({}, metaAttribute({
-      name: MetaConstants.BottomSheet
-    })), makeAccessible({
+    children: (isMounted || isInsideDropdown) && /*#__PURE__*/jsx(FloatingFocusManager, {
+      returnFocus: true,
+      initialFocus: initialFocusRef !== null && initialFocusRef !== void 0 ? initialFocusRef : defaultInitialFocusRef,
+      context: context,
       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: zIndex
-      },
-      children: /*#__PURE__*/jsxs(BaseBox, {
-        height: "100%",
-        display: "flex",
-        flexDirection: "column",
-        children: [/*#__PURE__*/jsx(BottomSheetGrabHandle, _objectSpread$c(_objectSpread$c({
-          ref: grabHandleRef,
-          isHeaderFloating: isHeaderFloating
-        }, metaAttribute({
-          name: ComponentIds.BottomSheetGrabHandle
-        })), bind())), children]
+      children: /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(BottomSheetBackdrop, {
+          zIndex: bottomSheetZIndex
+        }), /*#__PURE__*/jsx(BottomSheetSurface, _objectSpread$c(_objectSpread$c(_objectSpread$c({}, 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$c(_objectSpread$c({
+              ref: grabHandleRef,
+              isHeaderFloating: isHeaderFloating
+            }, metaAttribute({
+              name: ComponentIds.BottomSheetGrabHandle
+            })), bind())), children]
+          })
+        }))]
       })
-    }))]
+    })
   });
 };