@razorpay/blade 8.15.3 → 9.0.1

package/build/components/index.web.js

@@ -553,6 +553,11 @@ var getDropdownOverlayPosition = function getDropdownOverlayPosition(_ref) {
   var HEIGHT_THRESHOLD = (Number(actionListItemEl === null || actionListItemEl === void 0 ? void 0 : actionListItemEl.clientHeight) + Number(size[16])) * -1;
 
   if (!isMenu) {
+    // In SelectInput, we set position wrt to right so that leftLabel position can be accomodated
+    // without additional offset calculation from left
+    newPosition.left = undefined;
+    newPosition.right = zeroSpacing;
+
     if (bottom > HEIGHT_THRESHOLD) {
       newPosition.bottom = "".concat(Number(triggererEl === null || triggererEl === void 0 ? void 0 : triggererEl.clientHeight) + Number(size[32]), "px");
       newPosition.top = undefined;
@@ -925,6 +930,30 @@ function usePrevious(value) {
   return ref.current;
 }
 
+var ThemeContext = /*#__PURE__*/createContext({
+  // @ts-expect-error set null
+  theme: null,
+  colorScheme: 'light',
+  platform: 'onDesktop',
+  setColorScheme: function setColorScheme() {
+    return null;
+  }
+});
+
+var useTheme = function useTheme() {
+  var themeContext = useContext(ThemeContext);
+
+  if (!themeContext.theme) {
+    throw new Error("[@razorpay/blade:BladeProvider]: BladeProvider is missing theme");
+  }
+
+  if (themeContext === undefined) {
+    throw new Error("[@razorpay/blade:BladeProvider]: useTheme must be used within BladeProvider");
+  }
+
+  return themeContext;
+};
+
 /* eslint-disable @typescript-eslint/no-empty-function */
 var BottomSheetContext = /*#__PURE__*/React__default.createContext({
   headerHeight: 0,
@@ -1370,15 +1399,19 @@ var componentIds = {
   ActionListSection: 'ActionListSection'
 };
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable no-restricted-properties */
 /**
  * Gets the `componentId` prop of React component if it exists.
  */
 
 var getComponentId = function getComponentId(component) {
-  var _component$type;
+  var _component$props, _component$props2, _component$props2$ori, _component$type;
 
-  if (! /*#__PURE__*/React__default.isValidElement(component)) return null; // eslint-disable-next-line no-restricted-properties
+  if (! /*#__PURE__*/React__default.isValidElement(component)) return null; // Storybook wraps MDX components in a wrapper component, so we need to get componentId from originalType
+
+  if (component !== null && component !== void 0 && (_component$props = component.props) !== null && _component$props !== void 0 && _component$props.mdxType && component !== null && component !== void 0 && (_component$props2 = component.props) !== null && _component$props2 !== void 0 && (_component$props2$ori = _component$props2.originalType) !== null && _component$props2$ori !== void 0 && _component$props2$ori.componentId) {
+    return component.props.originalType.componentId;
+  }
 
   return (_component$type = component.type) === null || _component$type === void 0 ? void 0 : _component$type.componentId;
 };
@@ -3723,30 +3756,6 @@ var getBaseBoxStyles = function getBaseBoxStyles(props) {
   return _objectSpread$5Z(_objectSpread$5Z({}, getAllProps(props)), getAllMediaQueries(props));
 };
 
-var ThemeContext = /*#__PURE__*/createContext({
-  // @ts-expect-error set null
-  theme: null,
-  colorScheme: 'light',
-  platform: 'onDesktop',
-  setColorScheme: function setColorScheme() {
-    return null;
-  }
-});
-
-var useTheme = function useTheme() {
-  var themeContext = useContext(ThemeContext);
-
-  if (!themeContext.theme) {
-    throw new Error("[@razorpay/blade:BladeProvider]: BladeProvider is missing theme");
-  }
-
-  if (themeContext === undefined) {
-    throw new Error("[@razorpay/blade:BladeProvider]: useTheme must be used within BladeProvider");
-  }
-
-  return themeContext;
-};
-
 function ownKeys$5Z(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$5Y(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5Z(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5Z(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -16725,6 +16734,8 @@ var _Checkbox = function _Checkbox(_ref, ref) {
 
   var _isDisabled = isDisabled !== null && isDisabled !== void 0 ? isDisabled : groupProps === null || groupProps === void 0 ? void 0 : groupProps.isDisabled;
 
+  var _isRequired = Boolean(isRequired || (groupProps === null || groupProps === void 0 ? void 0 : groupProps.isRequired) || (groupProps === null || groupProps === void 0 ? void 0 : groupProps.necessityIndicator) === 'required');
+
   var _name = name !== null && name !== void 0 ? name : groupProps === null || groupProps === void 0 ? void 0 : groupProps.name; // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
 
 
@@ -16766,7 +16777,7 @@ var _Checkbox = function _Checkbox(_ref, ref) {
     hasError: _hasError,
     hasHelperText: Boolean(showSupportingText),
     isDisabled: _isDisabled,
-    isRequired: isRequired,
+    isRequired: _isRequired,
     name: _name,
     value: value,
     onChange: handleChange
@@ -16832,10 +16843,12 @@ var useCheckboxGroup = function useCheckboxGroup(_ref) {
   var value = _ref.value,
       defaultValue = _ref.defaultValue,
       isDisabled = _ref.isDisabled,
+      isRequired = _ref.isRequired,
       labelPosition = _ref.labelPosition,
       _onChange = _ref.onChange,
       validationState = _ref.validationState,
       name = _ref.name,
+      necessityIndicator = _ref.necessityIndicator,
       size = _ref.size;
 
   var _useTheme = useTheme(),
@@ -16914,12 +16927,14 @@ var useCheckboxGroup = function useCheckboxGroup(_ref) {
     return {
       validationState: validationState,
       isDisabled: isDisabled,
+      isRequired: isRequired,
       labelPosition: platform === 'onMobile' ? 'top' : labelPosition,
       name: name,
+      necessityIndicator: necessityIndicator,
       state: state,
       size: size
     };
-  }, [validationState, isDisabled, platform, labelPosition, name, state, size]);
+  }, [validationState, isDisabled, isRequired, platform, labelPosition, name, necessityIndicator, state, size]);
   return {
     state: state,
     contextValue: contextValue,
@@ -16959,7 +16974,7 @@ var SelectorGroupField = function SelectorGroupField(_ref) {
   }));
 };
 
-var _excluded$u = ["children", "label", "helpText", "isDisabled", "necessityIndicator", "labelPosition", "validationState", "errorText", "name", "defaultValue", "onChange", "value", "size", "testID"];
+var _excluded$u = ["children", "label", "helpText", "isDisabled", "isRequired", "necessityIndicator", "labelPosition", "validationState", "errorText", "name", "defaultValue", "onChange", "value", "size", "testID"];
 
 function ownKeys$1c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -16969,7 +16984,10 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
   var children = _ref.children,
       label = _ref.label,
       helpText = _ref.helpText,
-      isDisabled = _ref.isDisabled,
+      _ref$isDisabled = _ref.isDisabled,
+      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+      _ref$isRequired = _ref.isRequired,
+      isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
       _ref$necessityIndicat = _ref.necessityIndicator,
       necessityIndicator = _ref$necessityIndicat === void 0 ? 'none' : _ref$necessityIndicat,
       _ref$labelPosition = _ref.labelPosition,
@@ -16990,6 +17008,8 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
     onChange: onChange,
     value: value,
     isDisabled: isDisabled,
+    necessityIndicator: necessityIndicator,
+    isRequired: isRequired,
     name: name,
     labelPosition: labelPosition,
     validationState: validationState,
@@ -21965,8 +21985,10 @@ var BaseInput = /*#__PURE__*/React__default.forwardRef(function (_ref11, ref) {
       currentInteraction = _useInteraction.currentInteraction,
       setCurrentInteraction = _useInteraction.setCurrentInteraction;
 
+  var _isRequired = isRequired || necessityIndicator === 'required';
+
   var accessibilityProps = makeAccessible({
-    required: Boolean(isRequired),
+    required: Boolean(_isRequired),
     disabled: Boolean(isDisabled),
     invalid: Boolean(validationState === 'error'),
     describedBy: getDescribedByElementId({
@@ -22039,7 +22061,7 @@ var BaseInput = /*#__PURE__*/React__default.forwardRef(function (_ref11, ref) {
           placeholder: placeholder,
           isDisabled: isDisabled,
           validationState: validationState,
-          isRequired: isRequired,
+          isRequired: _isRequired,
           handleOnFocus: handleOnFocus,
           handleOnChange: handleOnChange,
           handleOnBlur: handleOnBlur,
@@ -22723,9 +22745,6 @@ var OTPInput = function OTPInput(_ref) {
       errorTextId = _useFormId.errorTextId,
       successTextId = _useFormId.successTextId;
 
-  var _useTheme = useTheme(),
-      platform = _useTheme.platform;
-
   useEffect(function () {
     // Effect for calling `onOTPFilled` callback
     if (inputValue && inputValue.length >= otpLength) {
@@ -22920,7 +22939,6 @@ var OTPInput = function OTPInput(_ref) {
       inputs.push( /*#__PURE__*/jsx(BaseBox, {
         flex: 1,
         marginLeft: index == 0 ? 'spacing.0' : 'spacing.3',
-        maxWidth: platform === 'onDesktop' ? makeSize(size[36]) : makeSize(size[40]),
         children: /*#__PURE__*/jsx(BaseInput // eslint-disable-next-line jsx-a11y/no-autofocus
         , {
           autoFocus: autoFocus && index === 0,
@@ -25011,6 +25029,8 @@ var _Radio = function _Radio(_ref, ref) {
 
   var _isDisabled = isDisabled !== null && isDisabled !== void 0 ? isDisabled : groupProps === null || groupProps === void 0 ? void 0 : groupProps.isDisabled;
 
+  var _isRequired = (groupProps === null || groupProps === void 0 ? void 0 : groupProps.isRequired) || (groupProps === null || groupProps === void 0 ? void 0 : groupProps.necessityIndicator) === 'required';
+
   var name = groupProps === null || groupProps === void 0 ? void 0 : groupProps.name;
   var showHelpText = !hasError && helpText;
   var isReactNative = getPlatformType() === 'react-native';
@@ -25039,7 +25059,7 @@ var _Radio = function _Radio(_ref, ref) {
     isChecked: isChecked,
     hasError: hasError,
     isDisabled: _isDisabled,
-    isRequired: groupProps.necessityIndicator === 'required',
+    isRequired: _isRequired,
     name: name,
     value: value,
     onChange: handleChange
@@ -25097,6 +25117,7 @@ var useRadioGroup = function useRadioGroup(_ref) {
   var value = _ref.value,
       defaultValue = _ref.defaultValue,
       isDisabled = _ref.isDisabled,
+      isRequired = _ref.isRequired,
       labelPosition = _ref.labelPosition,
       _onChange = _ref.onChange,
       validationState = _ref.validationState,
@@ -25165,12 +25186,13 @@ var useRadioGroup = function useRadioGroup(_ref) {
       necessityIndicator: necessityIndicator,
       validationState: validationState,
       isDisabled: isDisabled,
+      isRequired: isRequired,
       labelPosition: platform === 'onMobile' ? 'top' : labelPosition,
       name: fallbackName,
       state: state,
       size: size
     };
-  }, [validationState, isDisabled, platform, labelPosition, state, fallbackName, necessityIndicator, size]);
+  }, [validationState, isDisabled, isRequired, platform, labelPosition, state, fallbackName, necessityIndicator, size]);
   return {
     state: state,
     contextValue: contextValue,
@@ -25180,7 +25202,7 @@ var useRadioGroup = function useRadioGroup(_ref) {
   };
 };
 
-var _excluded$4 = ["children", "label", "helpText", "isDisabled", "necessityIndicator", "labelPosition", "validationState", "errorText", "name", "defaultValue", "onChange", "value", "size", "testID"];
+var _excluded$4 = ["children", "label", "helpText", "isDisabled", "isRequired", "necessityIndicator", "labelPosition", "validationState", "errorText", "name", "defaultValue", "onChange", "value", "size", "testID"];
 
 function ownKeys$r(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -25192,6 +25214,8 @@ var RadioGroup = function RadioGroup(_ref) {
       helpText = _ref.helpText,
       _ref$isDisabled = _ref.isDisabled,
       isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+      _ref$isRequired = _ref.isRequired,
+      isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
       _ref$necessityIndicat = _ref.necessityIndicator,
       necessityIndicator = _ref$necessityIndicat === void 0 ? 'none' : _ref$necessityIndicat,
       _ref$labelPosition = _ref.labelPosition,
@@ -25211,8 +25235,10 @@ var RadioGroup = function RadioGroup(_ref) {
   var _useRadioGroup = useRadioGroup({
     defaultValue: defaultValue,
     isDisabled: isDisabled,
+    isRequired: isRequired,
     labelPosition: labelPosition,
     name: name,
+    necessityIndicator: necessityIndicator,
     onChange: onChange,
     validationState: validationState,
     value: value,