@razorpay/blade 10.15.0 → 10.15.2

package/README.md

@@ -1,39 +1,41 @@
-<h1 align="center">
-  Blade
-</h1>
+<br/>
 <p align="center">
-  <a href="https://github.com/styled-components/styled-components">
-    <img src="https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e" alt="Blade is styled with styled-components" />
-  </a>
-  <a href="https://github.com/facebook/jest">
-    <img src="https://jestjs.io/img/jest-badge.svg" alt="Blade is tested with jest" />
-  </a>
-  <a href="https://github.com/razorpay/blade/blob/master/LICENSE.md">
-    <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="Blade is released under the MIT license." />
-  </a>
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="./branding/blade-original-dark-mode.min.svg">
+  <source media="(prefers-color-scheme: light)" srcset="./branding/blade-original.min.svg">
+  <img width="450px" alt="Blade Design System Logo" src="./branding/blade-original.min.svg">
+</picture>
 </p>
 
+<br/>
+
 <p align="center">
-   The Design System that powers Razorpay
-<p align="center">
+  <a href="https://npmjs.org/package/@razorpay/blade"><img alt="Blade Latest Version" src="https://img.shields.io/github/package-json/v/razorpay/blade?style=for-the-badge&labelColor=322&logo=npm&label=@razorpay/Blade&color=darkred&filename=packages%2Fblade%2Fpackage.json"></a> &nbsp;<a href="https://blade.razorpay.com/"><img alt="Documentation blade.razorpay.com" src="https://img.shields.io/badge/Documentation-blade.razorpay.com-0648EF?style=for-the-badge&labelColor=0012AD&logo=readthedocs&logoColor=eee"/></a> &nbsp;<a href="https://github.com/razorpay/blade/tree/master/CONTRIBUTING.md"><img alt="Discord Join Chat" src="https://img.shields.io/badge/Contributions-Open-333333?style=for-the-badge&logo=github&logoColor=ffffff&labelColor=111111"/></a></p>
+
+<h1 aria-hidden="true"></h1>
 
-### [`@razorpay/blade`](https://github.com/razorpay/blade/tree/master/packages/blade)
+<br/>
 
-This package is under active development.
+Blade is the Design System that powers [Razorpay](https://razorpay.com/). 
 
-- [Documentation](https://master--61c19ee8d3d282003ac1d81c.chromatic.com)
-- [Installation Guide](https://master--61c19ee8d3d282003ac1d81c.chromatic.com/?path=/docs/guides-installation--page)
-- [Contributing guidelines](https://github.com/razorpay/blade/blob/master/CONTRIBUTING.md)
+## 🔗 Links
 
----
+- [Docs](https://blade.razorpay.com)
+- [Installation](https://blade.razorpay.com/?path=/docs/guides-installation--page)
+- [@razorpay/blade-old](https://github.com/razorpay/blade-old) (Deprecated, Private)
 
-> **Note**
->
-> The blade-old package has been moved to it's own repo.
-> [github.com/razorpay/blade-old](https://github.com/razorpay/blade-old) (Only accessible to Razorpay employees)
->
-> It is under **maintenance** and it won't have any major releases.
+## ✨ Features
+- Cross-Platform (Works Natively on [React Web](https://blade.razorpay.com/?path=/docs/guides-installation--page#%EF%B8%8F-installation) and [React Native](https://blade.razorpay.com/?path=/docs/guides-installation--page#react-native-projects))
+- [White Labelling](https://blade.razorpay.com/?path=/docs/guides-theming-theme-playground--page)
+- [CSS Variables for non-React Projects](https://blade.razorpay.com/?path=/docs/tokens-css-variables--page)
+- [Accessible](https://github.com/razorpay/blade/blob/master/rfcs/2022-04-09-accessibility.md#manual-testing)
+- Documented [RFCs](https://github.com/razorpay/blade/tree/docs/make-docs-pretty/rfcs) and [API Decisions](https://github.com/razorpay/blade/blob/master/packages/blade/src/components/Alert/_decisions/decisions.md)
 
 ## 📝 License
 
 Licensed under the [MIT License](https://github.com/razorpay/blade/blob/master/LICENSE.md).
+
+<h1 aria-hidden="true"></h1>
+
+<p align="center">Interested in working with us? Checkout our <a href="https://razorpay.com/jobs">Jobs Page</a> for open roles 🤗</p>
+

package/build/components/index.d.ts

@@ -3122,10 +3122,11 @@ declare type ActionColors = `action.text.${DotNotationColorStringToken<Theme['co
 declare type BadgeTextColors = `badge.text.${DotNotationColorStringToken<Theme['colors']['badge']['text']>}`;
 declare type WhiteTextColors = `white.action.text.${DotNotationColorStringToken<Theme['colors']['white']['action']['text']>}`;
 declare type BrandPrimaryColors = `brand.primary.${keyof Theme['colors']['brand']['primary']}`;
+declare type BrandSecondaryColors = `brand.secondary.${keyof Theme['colors']['brand']['secondary']}`;
 declare type As = 'code' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'abbr' | 'q' | 'cite' | 'figcaption' | 'div';
 declare type BaseTextProps = {
     id?: string;
-    color?: BrandPrimaryColors | ActionColors | FeedbackColors | SurfaceColors | FeedbackActionColors | WhiteTextColors | BadgeTextColors;
+    color?: BrandPrimaryColors | BrandSecondaryColors | ActionColors | FeedbackColors | SurfaceColors | FeedbackActionColors | WhiteTextColors | BadgeTextColors;
     fontFamily?: keyof Theme['typography']['fonts']['family'];
     fontSize?: keyof Theme['typography']['fonts']['size'];
     fontWeight?: keyof Theme['typography']['fonts']['weight'];

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

@@ -14525,6 +14525,7 @@ var getCheckboxIconWrapperStyles = function getCheckboxIconWrapperStyles(_ref) {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
+    flexShrink: 0,
     width: makeSpace(checkboxSizes.icon[size].width),
     height: makeSpace(checkboxSizes.icon[size].height),
     borderWidth: makeBorderSize(theme.border.width.thick),
@@ -15427,7 +15428,6 @@ var _Checkbox = function _Checkbox(_ref, ref) {
         flexDirection: "column",
         children: [/*#__PURE__*/jsxs(BaseBox, {
           display: "flex",
-          alignItems: "center",
           flexDirection: "row",
           children: [/*#__PURE__*/jsx(SelectorInput, {
             hoverTokens: checkboxHoverTokens,
@@ -15966,14 +15966,6 @@ var _ActionListItemText = function _ActionListItemText(_ref4) {
 var ActionListItemText = /*#__PURE__*/assignWithoutSideEffects(_ActionListItemText, {
   componentId: componentIds.ActionListItemText
 });
-var ActionListCheckboxWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
-  displayName: "ActionListItem__ActionListCheckboxWrapper",
-  componentId: "m6qdwa-1"
-})(function (_props) {
-  return {
-    pointerEvents: 'none'
-  };
-});
 var makeActionListItemClickable = function makeActionListItemClickable(clickHandler) {
   if (isReactNative$4()) {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment, @typescript-eslint/prefer-ts-expect-error
@@ -16010,8 +16002,9 @@ var _ActionListItemBody = function _ActionListItemBody(_ref5) {
         children: selectionType === 'multiple' ?
         /*#__PURE__*/
         // Adding aria-hidden because the listbox item in multiselect in itself explains the behaviour so announcing checkbox is unneccesary and just a nice UI tweak for us
-        jsx(ActionListCheckboxWrapper, _objectSpread$1q(_objectSpread$1q({
-          hasDescription: Boolean(description)
+        jsx(BaseBox, _objectSpread$1q(_objectSpread$1q({
+          pointerEvents: "none",
+          paddingRight: "spacing.2"
         }, makeAccessible({
           hidden: true
         })), {}, {
@@ -16206,15 +16199,15 @@ var MAX_WIDTH$2 = size[584];
 var getCommonStyles = function getCommonStyles(props) {
   var theme = props.theme,
     contrastType = props.contrastType,
-    intent = props.intent,
+    color = props.color,
     isFullWidth = props.isFullWidth,
     isDesktop = props.isDesktop;
   var feedbackColors = theme.colors.feedback;
   return {
-    background: feedbackColors.background[intent][contrastType],
+    background: feedbackColors.background[color][contrastType],
     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],
+    borderColor: feedbackColors.border[color][contrastType],
     borderWidth: makeBorderSize(isFullWidth ? theme.border.width.none : theme.border.width.thin),
     borderStyle: 'solid',
     display: 'flex',
@@ -17497,7 +17490,8 @@ var Alert = function Alert(_ref) {
   var contrastType = "".concat(contrast, "Contrast");
   var iconSize = isFullWidth ? 'large' : 'medium';
   var textSize = isFullWidth ? 'medium' : 'small';
-  var Icon = intentIconMap[intent];
+  var alertColor = color !== null && color !== void 0 ? color : intent;
+  var Icon = intentIconMap[alertColor];
   var iconOffset = 'spacing.1';
 
   // certain special cases below needs special care for near perfect alignment
@@ -17522,7 +17516,7 @@ var Alert = function Alert(_ref) {
     marginTop: iconOffset,
     display: "flex",
     children: /*#__PURE__*/jsx(Icon, {
-      color: "feedback.icon.".concat(intent, ".").concat(contrastType),
+      color: "feedback.icon.".concat(alertColor, ".").concat(contrastType),
       size: iconSize
     })
   });
@@ -17555,7 +17549,7 @@ var Alert = function Alert(_ref) {
     children: /*#__PURE__*/jsx(BaseButton, {
       size: textSize,
       onClick: actions.primary.onClick,
-      color: color || intent,
+      color: alertColor,
       variant: contrast === 'high' ? 'primary' : 'secondary',
       children: actions.primary.text
     })
@@ -17580,7 +17574,7 @@ var Alert = function Alert(_ref) {
     display: isReactNative$3 ? castNativeType('flex') : castWebType('inline-flex'),
     children: /*#__PURE__*/jsx(BaseLink, _objectSpread$1j(_objectSpread$1j({
       size: textSize,
-      color: contrast === 'high' ? 'white' : intent
+      color: contrast === 'high' ? 'white' : alertColor
     }, secondaryActionParams), {}, {
       children: actions.secondary.text
     }))
@@ -17616,8 +17610,8 @@ var Alert = function Alert(_ref) {
   }) : null;
   var a11yProps = makeAccessible(_objectSpread$1j({
     // React Native doesn't has status as role
-    role: isReactNative$3 || intent === 'negative' || intent === 'notice' ? 'alert' : 'status'
-  }, intent === 'notice' && {
+    role: isReactNative$3 || alertColor === 'negative' || alertColor === 'notice' ? 'alert' : 'status'
+  }, alertColor === 'notice' && {
     liveRegion: 'polite'
   }));
   if (!isVisible) {
@@ -17628,7 +17622,7 @@ var Alert = function Alert(_ref) {
     testID: testID
   })), getStyledProps(styledProps)), {}, {
     children: /*#__PURE__*/jsxs(StyledAlert, {
-      intent: intent,
+      color: alertColor,
       contrastType: contrastType,
       isFullWidth: isFullWidth,
       isDesktop: isDesktop,
@@ -21698,7 +21692,7 @@ var _StyledBaseInput = function _StyledBaseInput(_ref, ref) {
   }, commonProps), props), accessibilityProps), {}, {
     value: props.value,
     children: /*#__PURE__*/jsx(Text, {
-      type: props.value ? 'subtle' : 'placeholder',
+      type: props.value && !isDisabled ? 'subtle' : 'placeholder',
       truncateAfterLines: 1,
       textAlign: props.textAlign,
       children: props.value ? props.value : props.placeholder
@@ -21971,7 +21965,8 @@ var BaseInputTagSlot = function BaseInputTagSlot(_ref3) {
     handleOnInputClick = _ref3.handleOnInputClick,
     isDropdownTrigger = _ref3.isDropdownTrigger,
     visibleTagsCountRef = _ref3.visibleTagsCountRef,
-    labelPrefix = _ref3.labelPrefix;
+    labelPrefix = _ref3.labelPrefix,
+    isDisabled = _ref3.isDisabled;
   var hasTags = tags && tags.length > 0;
   var slotRef = React__default.useRef(null);
   var visibleTagsCount = useVisibleTagsCount({
@@ -22040,6 +22035,7 @@ var BaseInputTagSlot = function BaseInputTagSlot(_ref3) {
       setShouldIgnoreBlurAnimation === null || setShouldIgnoreBlurAnimation === void 0 ? void 0 : setShouldIgnoreBlurAnimation(false);
     },
     children: [visibleTags, tags && !showAllTags && invisibleTagsCount ? /*#__PURE__*/jsx(Text, {
+      type: isDisabled ? 'placeholder' : 'normal',
       alignSelf: "center",
       marginY: "spacing.2",
       marginRight: "spacing.4",
@@ -22490,6 +22486,7 @@ var BaseInput = /*#__PURE__*/React__default.forwardRef(function (_ref11, ref) {
         }), /*#__PURE__*/jsx(BaseInputTagSlot, {
           renderAs: as,
           tags: tags,
+          isDisabled: isDisabled,
           showAllTags: showAllTagsWithAnimation,
           setFocusOnInput: function setFocusOnInput() {
             if (ref && !isReactNative && 'current' in ref) {
@@ -23430,22 +23427,32 @@ var _OTPInput = function _OTPInput(_ref, incomingRef) {
 };
 var OTPInput = /*#__PURE__*/React__default.forwardRef(_OTPInput);
 
+var Chevron = function Chevron(props) {
+  var iconColor = "surface.text.".concat(props.isDisabled ? 'placeholder' : 'normal', ".lowContrast");
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(ChevronDownIcon, {
+      display: props.isOpen ? 'none' : 'flex',
+      size: "medium",
+      color: iconColor
+    }), /*#__PURE__*/jsx(ChevronUpIcon, {
+      display: props.isOpen ? 'flex' : 'none',
+      size: "medium",
+      color: iconColor
+    })]
+  });
+};
+
 var InputChevronIcon = function InputChevronIcon(props) {
-  return /*#__PURE__*/jsxs(BaseBox, {
+  return /*#__PURE__*/jsx(BaseBox, {
     display: "flex",
     height: "100%",
     justifyContent: "center",
     alignItems: "center",
     onClick: props.onClick,
-    children: [/*#__PURE__*/jsx(ChevronDownIcon, {
-      display: props.isOpen ? 'none' : 'flex',
-      color: "surface.text.normal.lowContrast",
-      size: "medium"
-    }), /*#__PURE__*/jsx(ChevronUpIcon, {
-      display: props.isOpen ? 'flex' : 'none',
-      color: "surface.text.normal.lowContrast",
-      size: "medium"
-    })]
+    children: /*#__PURE__*/jsx(Chevron, {
+      isOpen: props.isOpen,
+      isDisabled: props.isDisabled
+    })
   });
 };
 
@@ -23595,6 +23602,7 @@ var AnimatedTagContainer = /*#__PURE__*/styled(BaseBox).withConfig({
 var AnimatedTag = function AnimatedTag(_ref) {
   var children = _ref.children,
     currentTagIndex = _ref.currentTagIndex,
+    isDisabled = _ref.isDisabled,
     activeTagIndex = _ref.activeTagIndex,
     onDismiss = _ref.onDismiss;
   var _React$useState = React__default.useState(true),
@@ -23624,6 +23632,7 @@ var AnimatedTag = function AnimatedTag(_ref) {
       },
       marginRight: "spacing.3",
       marginY: "spacing.2",
+      isDisabled: isDisabled,
       children: children
     })
   });
@@ -23632,6 +23641,7 @@ var AnimatedTag = function AnimatedTag(_ref) {
 var getTagsGroup = function getTagsGroup(_ref) {
   var tags = _ref.tags,
     activeTagIndex = _ref.activeTagIndex,
+    isDisabled = _ref.isDisabled,
     onDismiss = _ref.onDismiss;
   return tags.map(function (tagName, tagIndex) {
     return /*#__PURE__*/jsx(AnimatedTag, {
@@ -23639,6 +23649,7 @@ var getTagsGroup = function getTagsGroup(_ref) {
       onDismiss: onDismiss,
       currentTagIndex: tagIndex,
       tagsLength: tags.length,
+      isDisabled: isDisabled,
       children: tagName
     }, tagName);
   });
@@ -23818,9 +23829,11 @@ var _BaseDropdownInputTrigger = function _BaseDropdownInputTrigger(props, ref) {
       }
       return getTagsGroup({
         tags: selectedIndices.map(function (selectedIndex) {
-          return options[selectedIndex].title;
+          var _options$selectedInde;
+          return (_options$selectedInde = options[selectedIndex]) === null || _options$selectedInde === void 0 ? void 0 : _options$selectedInde.title;
         }),
         activeTagIndex: activeTagIndex,
+        isDisabled: props.isDisabled,
         onDismiss: function onDismiss(_ref) {
           var tagIndex = _ref.tagIndex;
           if (isTagDismissedRef.current) {
@@ -23886,7 +23899,13 @@ var _BaseDropdownInputTrigger = function _BaseDropdownInputTrigger(props, ref) {
     autoFocus: props.autoFocus // eslint-disable-line jsx-a11y/no-autofocus
     ,
     value: getValue(),
-    onClick: props.onTriggerClick,
+    onClick: function onClick(e) {
+      var _props$onTriggerClick;
+      if (props.isDisabled) {
+        return;
+      }
+      (_props$onTriggerClick = props.onTriggerClick) === null || _props$onTriggerClick === void 0 ? void 0 : _props$onTriggerClick.call(props, e);
+    },
     onFocus: props.onFocus,
     onBlur: function onBlur(_ref2) {
       var _props$onBlur;
@@ -23924,6 +23943,7 @@ var _BaseDropdownInputTrigger = function _BaseDropdownInputTrigger(props, ref) {
           onTriggerClick();
         }
       },
+      isDisabled: props.isDisabled,
       isOpen: isOpen
     })
   });
@@ -24125,7 +24145,10 @@ var useAutoComplete = function useAutoComplete(_ref) {
         name: props.name,
         value: displayText
       });
-      setInputValue(displayText !== null && displayText !== void 0 ? displayText : '');
+      // Use displayText as inputValue only if its not controlled by user
+      if (typeof props.value === 'undefined') {
+        setInputValue(displayText !== null && displayText !== void 0 ? displayText : '');
+      }
     }
     (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, {
       name: props.name,