@razorpay/blade 5.1.5 → 5.2.0

package/build/components/index.web.js

@@ -3361,7 +3361,7 @@ var useBreakpoint = function useBreakpoint(_ref) {
   var _window;
 
   var breakpoints = _ref.breakpoints;
-  var supportsMatchMedia = typeof document !== 'undefined' && typeof ((_window = window) === null || _window === void 0 ? void 0 : _window.matchMedia) === 'function';
+  var supportsMatchMedia = typeof document !== 'undefined' && typeof window !== 'undefined' && typeof ((_window = window) === null || _window === void 0 ? void 0 : _window.matchMedia) === 'function';
   var breakpointsTokenAndQueryCollection = useMemo(function () {
     return supportsMatchMedia ? Object.entries(breakpoints).map(function (_ref2, index, breakpointsArray) {
       var _ref3 = _slicedToArray(_ref2, 2),
@@ -3635,22 +3635,19 @@ var getCommonStyles = function getCommonStyles(props) {
       contrastType = props.contrastType,
       intent = props.intent,
       isFullWidth = props.isFullWidth,
-      isBorderless = props.isBorderless; // a borderless alert is automatically set to full width
-
-  var _isFullWidth = isFullWidth || isBorderless;
-
+      isDesktop = props.isDesktop;
   var feedbackColors = theme.colors.feedback;
   return {
     background: feedbackColors.background[intent][contrastType],
-    padding: isBorderless ? "".concat(makeSpace(theme.spacing[4]), " ").concat(makeSpace(theme.spacing[5])) : "".concat(makeSpace(theme.spacing[3]), " ").concat(makeSpace(theme.spacing[3]), " ").concat(makeSpace(theme.spacing[4]), " ").concat(makeSpace(theme.spacing[3])),
-    borderRadius: makeBorderSize(isBorderless ? theme.border.radius.none : theme.border.radius.medium),
+    padding: isFullWidth ? "".concat(makeSpace(theme.spacing[4]), " ").concat(makeSpace(theme.spacing[5])) : "".concat(makeSpace(theme.spacing[3]), " ").concat(makeSpace(theme.spacing[3]), " ").concat(makeSpace(theme.spacing[4]), " ").concat(makeSpace(theme.spacing[3])),
+    borderRadius: makeBorderSize(isFullWidth ? theme.border.radius.none : theme.border.radius.medium),
     borderColor: feedbackColors.border[intent][contrastType],
-    borderWidth: makeBorderSize(isBorderless ? theme.border.width.none : theme.border.width.thin),
+    borderWidth: makeBorderSize(isFullWidth ? theme.border.width.none : theme.border.width.thin),
     borderStyle: 'solid',
     display: 'flex',
     flexDirection: 'row',
-    maxWidth: _isFullWidth ? 'auto' : makeSize(MAX_WIDTH),
-    alignItems: 'flex-start'
+    maxWidth: isFullWidth ? 'auto' : makeSize(MAX_WIDTH),
+    alignItems: isFullWidth && isDesktop ? 'center' : 'flex-start'
   };
 };
 
@@ -6655,7 +6652,6 @@ function ownKeys$n(object, enumerableOnly) { var keys = Object.keys(object); if
 function _objectSpread$n(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$n(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var isReactNative$3 = getPlatformType() === 'react-native'; // Need extra wrappers on React Native only for alignment
 
-var SecondaryActionWrapper = isReactNative$3 ? Box : Fragment;
 var CloseButtonWrapper = isReactNative$3 ? Box : Fragment;
 var intentIconMap = {
   positive: CheckCircleIcon,
@@ -6677,8 +6673,6 @@ var Alert = function Alert(_ref) {
       isFullWidth = _ref$isFullWidth === void 0 ? false : _ref$isFullWidth,
       _ref$intent = _ref.intent,
       intent = _ref$intent === void 0 ? 'neutral' : _ref$intent,
-      _ref$isBorderless = _ref.isBorderless,
-      isBorderless = _ref$isBorderless === void 0 ? false : _ref$isBorderless,
       actions = _ref.actions;
 
   if (!(actions !== null && actions !== void 0 && actions.primary) && actions !== null && actions !== void 0 && actions.secondary) {
@@ -6693,7 +6687,8 @@ var Alert = function Alert(_ref) {
   }),
       matchedDeviceType = _useBreakpoint.matchedDeviceType;
 
-  var isMobile = matchedDeviceType === 'mobile';
+  var isDesktop = matchedDeviceType === 'desktop';
+  var isMobile = !isDesktop;
 
   var _useState = useState(true),
       _useState2 = _slicedToArray(_useState, 2),
@@ -6701,25 +6696,27 @@ var Alert = function Alert(_ref) {
       setIsVisible = _useState2[1];
 
   var contrastType = "".concat(contrast, "Contrast");
-  var iconSize = isBorderless ? 'large' : 'medium';
-  var textSize = isBorderless ? 'medium' : 'small';
+  var iconSize = isFullWidth ? 'large' : 'medium';
+  var textSize = isFullWidth ? 'medium' : 'small';
   var Icon = intentIconMap[intent];
   var iconOffset = 'spacing.1'; // certain special cases below needs special care for near perfect alignment
 
   if (isReactNative$3) {
-    if (isBorderless && !title) {
+    if (isFullWidth && !title) {
       iconOffset = 'spacing.1';
-    } else if (!isBorderless && !title) {
+    } else if (!isFullWidth && !title) {
       iconOffset = 'spacing.0';
-    } else if (!isBorderless && title) {
+    } else if (!isFullWidth && title) {
       iconOffset = 'spacing.2';
     }
   } else if (isMobile) {
-    if (!isBorderless && title) {
+    if (!isFullWidth && title) {
       iconOffset = 'spacing.2';
-    } else if (isBorderless && !title) {
+    } else if (isFullWidth && !title) {
       iconOffset = 'spacing.2';
     }
+  } else if (isFullWidth) {
+    iconOffset = 'spacing.0';
   }
 
   var icon = /*#__PURE__*/jsx(Box, {
@@ -6733,7 +6730,7 @@ var Alert = function Alert(_ref) {
 
   var _title = title ? /*#__PURE__*/jsx(Box, {
     marginBottom: "spacing.2",
-    children: isBorderless ? /*#__PURE__*/jsx(Heading, {
+    children: isFullWidth ? /*#__PURE__*/jsx(Heading, {
       size: "small",
       contrast: contrast,
       children: title
@@ -6780,7 +6777,9 @@ var Alert = function Alert(_ref) {
     secondaryActionParams.rel = actions.secondary.rel;
   }
 
-  var secondaryAction = actions !== null && actions !== void 0 && actions.secondary ? /*#__PURE__*/jsx(SecondaryActionWrapper, {
+  var secondaryAction = actions !== null && actions !== void 0 && actions.secondary ? /*#__PURE__*/jsx(Box, {
+    marginRight: "spacing.4",
+    display: isReactNative$3 ? 'flex' : 'inline-flex',
     children: /*#__PURE__*/jsx(BaseLink, _objectSpread$n(_objectSpread$n({
       size: textSize,
       contrast: contrast,
@@ -6788,9 +6787,15 @@ var Alert = function Alert(_ref) {
     }, secondaryActionParams), {}, {
       children: actions.secondary.text
     }))
-  }) : null;
+  }) : null; // For certain cases we wish to render actions inline with text content
 
-  var _actions = primaryAction || secondaryAction ? /*#__PURE__*/jsxs(Box, {
+  var showActionsHorizontal = isFullWidth && isDesktop;
+  var actionsHorizontal = showActionsHorizontal && (primaryAction || secondaryAction) ? /*#__PURE__*/jsxs(Box, {
+    flexDirection: "row",
+    alignItems: "center",
+    children: [primaryAction, secondaryAction]
+  }) : null;
+  var actionsVertical = !showActionsHorizontal && (primaryAction || secondaryAction) ? /*#__PURE__*/jsxs(Box, {
     marginTop: "spacing.4",
     flexDirection: "row",
     alignItems: "center",
@@ -6829,14 +6834,14 @@ var Alert = function Alert(_ref) {
     intent: intent,
     contrastType: contrastType,
     isFullWidth: isFullWidth,
-    isBorderless: isBorderless
+    isDesktop: isDesktop
   }, a11yProps), metaAttribute(MetaConstants.Component, MetaConstants.Alert)), {}, {
     children: [icon, /*#__PURE__*/jsxs(Box, {
       flex: 1,
-      paddingLeft: isBorderless ? 'spacing.4' : 'spacing.3',
-      paddingRight: "spacing.2",
-      children: [_title, _description, _actions]
-    }), closeButton]
+      paddingLeft: isFullWidth ? 'spacing.4' : 'spacing.3',
+      paddingRight: showActionsHorizontal ? 'spacing.4' : 'spacing.2',
+      children: [_title, _description, actionsVertical]
+    }), actionsHorizontal, closeButton]
   }));
 };