@razorpay/blade 10.14.0 → 10.14.2

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

@@ -15267,7 +15267,7 @@ var StyledInput = /*#__PURE__*/styled.input.withConfig({
     hasError = _ref2.hasError,
     hoverTokens = _ref2.hoverTokens;
   return _objectSpread$1w(_objectSpread$1w({}, screenReaderStyles), {}, {
-    '&:focus + div': {
+    '&:focus-visible + div': {
       // TODO: Replace with focus outline token
       outline: "1px solid ".concat(theme.colors.surface.background.level1.lowContrast),
       boxShadow: "0px 0px 0px 4px ".concat(theme.colors.brand.primary[400])
@@ -16226,7 +16226,7 @@ var StyledButton = /*#__PURE__*/styled.button.withConfig({
     '&:hover': {
       color: iconColorToken.hover[contrastToken]
     },
-    '&:focus': {
+    '&:focus-visible': {
       outline: 'none',
       boxShadow: "0px 0px 0px 4px ".concat(theme.colors.brand.primary[400]),
       color: iconColorToken.focus[contrastToken]
@@ -17105,7 +17105,7 @@ var StyledLink$1 = /*#__PURE__*/styled.button.withConfig({
       width: 'max-content',
       borderRadius: makeBorderSize(props.theme.border.radius.small)
     },
-    '&:focus': {
+    '&:focus-visible': {
       '.content-container': {
         boxShadow: "0px 0px 0px 4px ".concat(props.focusRingColor)
       }
@@ -18905,7 +18905,7 @@ var getIndicatorButtonStyles = function getIndicatorButtonStyles(_ref) {
       padding: makeSize(size[10]),
       paddingTop: makeSize(size[20])
     },
-    '&:focus': {
+    '&:focus-visible': {
       // TODO: refactor to use focus ring token
       outline: 'none',
       boxShadow: "0px 0px 0px 4px ".concat(theme.colors.brand.primary[400])
@@ -19049,7 +19049,7 @@ var getNavigationButtonStyles = function getNavigationButtonStyles(props) {
       borderColor: borderColorToken.hover,
       backgroundColor: backgroundColor[variant].hover
     },
-    '&:focus': {
+    '&:focus-visible': {
       // TODO: refactor to use focus ring token
       outline: 'none',
       boxShadow: "0px 0px 0px 4px ".concat(theme.colors.brand.primary[400]),
@@ -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, {
@@ -29984,7 +29995,7 @@ var StyledAccordionButton = /*#__PURE__*/styled.button.withConfig({
     width: '100%',
     border: 'none',
     textAlign: 'left',
-    '&:hover, &:focus': {
+    '&:hover, &:focus-visible': {
       backgroundColor: getBackgroundColor({
         theme: theme,
         isExpanded: isExpanded,
@@ -29994,7 +30005,7 @@ var StyledAccordionButton = /*#__PURE__*/styled.button.withConfig({
     '&:hover': {
       color: theme.colors.surface.action.icon.hover.lowContrast
     },
-    '&:focus': {
+    '&:focus-visible': {
       outline: 'none',
       boxShadow: "0px 0px 0px 4px ".concat(theme.colors.brand.primary[400]),
       // only need border radius on the focus ring
@@ -31166,7 +31177,7 @@ var StyledPopoverInteractiveWrapper = /*#__PURE__*/styled.button.withConfig({
     appearance: 'none',
     cursor: 'pointer',
     lineHeight: 0,
-    '&:focus': {
+    '&:focus-visible': {
       // TODO: refactor to use focus ring token
       outline: 'none',
       boxShadow: "0px 0px 0px 4px ".concat(props.theme.colors.brand.primary[400])