@razorpay/blade 12.38.0 → 12.40.0

package/build/types/components/index.d.ts

@@ -15125,6 +15125,25 @@ type FormInputLabelProps = {
      * Displays `(optional)` when `optional` is passed or `*` when `required` is passed
      */
     necessityIndicator?: 'required' | 'optional' | 'none';
+    /**
+     * Suffix element to be shown for the input field
+     *
+     * @example
+     * ```jsx
+     * labelSuffix={
+     *  <Tooltip content="This is a tooltip" placement="right">
+     *    <TooltipInteractiveWrapper>
+     *        <InfoIcon size="small" color="surface.icon.gray.subtle" />
+     *    </TooltipInteractiveWrapper>
+     *  </Tooltip>
+     * }
+     * ```
+     */
+    labelSuffix?: React__default.ReactNode;
+    /**
+     * Trailing element to be shown for the input field
+     */
+    labelTrailing?: React__default.ReactNode;
 };
 
 type FormInputOnEvent = ({ name, value, rawValue, }: {
@@ -15507,7 +15526,7 @@ type TaggedInputProps = {
 };
 
 type Type = Exclude<BaseInputProps['type'], 'password'>;
-type TextInputCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'value' | 'isDisabled' | 'isRequired' | 'prefix' | 'suffix' | 'maxCharacters' | 'autoFocus' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType' | 'onSubmit' | 'autoCapitalize' | 'testID' | 'onClick' | 'size' | 'leadingIcon' | 'trailingButton' | 'trailingIcon' | 'textAlign' | keyof DataAnalyticsAttribute> & {
+type TextInputCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel' | 'labelPosition' | 'labelSuffix' | 'labelTrailing' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'value' | 'isDisabled' | 'isRequired' | 'prefix' | 'suffix' | 'maxCharacters' | 'autoFocus' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType' | 'onSubmit' | 'autoCapitalize' | 'testID' | 'onClick' | 'size' | 'leadingIcon' | 'trailingButton' | 'trailingIcon' | 'textAlign' | keyof DataAnalyticsAttribute> & {
     /**
      * Decides whether to render a clear icon button
      */
@@ -15750,7 +15769,7 @@ type DatePickerCommonInputProps = {
     labelPosition?: BaseInputProps['labelPosition'];
     inputRef: React.Ref<any>;
     referenceProps: any;
-} & Pick<TextInputProps, 'size' | 'isRequired' | 'necessityIndicator' | 'autoFocus' | 'isDisabled' | 'accessibilityLabel'> & FormInputValidationProps;
+} & Pick<TextInputProps, 'size' | 'isRequired' | 'necessityIndicator' | 'autoFocus' | 'isDisabled' | 'accessibilityLabel' | 'labelSuffix' | 'labelTrailing'> & FormInputValidationProps;
 type FilterChipDatePickerProps = Omit<DatePickerProps<'single' | 'range'>, 'label'> & {
     /**
      * Sets the label for the input element.
@@ -19001,7 +19020,7 @@ type FormInputOnEventWithIndex = ({ name, value, inputIndex, }: {
     value?: string;
     inputIndex: number;
 }) => void;
-type OTPInputCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel' | 'labelPosition' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'name' | 'onChange' | 'value' | 'isDisabled' | 'autoFocus' | 'keyboardReturnKeyType' | 'keyboardType' | 'placeholder' | 'testID' | 'size' | keyof DataAnalyticsAttribute> & {
+type OTPInputCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel' | 'labelPosition' | 'labelSuffix' | 'labelTrailing' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'name' | 'onChange' | 'value' | 'isDisabled' | 'autoFocus' | 'keyboardReturnKeyType' | 'keyboardType' | 'placeholder' | 'testID' | 'size' | keyof DataAnalyticsAttribute> & {
     /**
      * Determines the number of input fields to show for the OTP
      * @default 6
@@ -19091,7 +19110,7 @@ type PasswordInputExtraProps = {
      */
     autoCompleteSuggestionType?: Extract<BaseInputProps['autoCompleteSuggestionType'], 'none' | 'password' | 'newPassword'>;
 };
-type PasswordInputCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel' | 'labelPosition' | 'maxCharacters' | 'validationState' | 'errorText' | 'successText' | 'helpText' | 'isDisabled' | 'defaultValue' | 'placeholder' | 'isRequired' | 'value' | 'onChange' | 'onBlur' | 'onSubmit' | 'onFocus' | 'name' | 'autoFocus' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType' | 'testID' | 'size' | keyof DataAnalyticsAttribute> & PasswordInputExtraProps & StyledPropsBlade;
+type PasswordInputCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel' | 'labelPosition' | 'labelSuffix' | 'labelTrailing' | 'maxCharacters' | 'validationState' | 'errorText' | 'successText' | 'helpText' | 'isDisabled' | 'defaultValue' | 'placeholder' | 'isRequired' | 'value' | 'onChange' | 'onBlur' | 'onSubmit' | 'onFocus' | 'name' | 'autoFocus' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType' | 'testID' | 'size' | keyof DataAnalyticsAttribute> & PasswordInputExtraProps & StyledPropsBlade;
 type PasswordInputPropsWithA11yLabel = {
     /**
      * Label to be shown for the input field
@@ -19115,7 +19134,7 @@ type PasswordInputPropsWithLabel = {
 type PasswordInputProps = (PasswordInputPropsWithA11yLabel | PasswordInputPropsWithLabel) & PasswordInputCommonProps;
 declare const PasswordInput: React__default.ForwardRefExoticComponent<PasswordInputProps & React__default.RefAttributes<BladeElementRef>>;
 
-type TextAreaCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'onSubmit' | 'value' | 'isDisabled' | 'isRequired' | 'maxCharacters' | 'autoFocus' | 'numberOfLines' | 'testID' | 'size' | keyof DataAnalyticsAttribute> & {
+type TextAreaCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel' | 'labelPosition' | 'labelSuffix' | 'labelTrailing' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'onSubmit' | 'value' | 'isDisabled' | 'isRequired' | 'maxCharacters' | 'autoFocus' | 'numberOfLines' | 'testID' | 'size' | keyof DataAnalyticsAttribute> & {
     /**
      * Decides whether to render a clear icon button
      */
@@ -19153,7 +19172,7 @@ type TextAreaPropsWithLabel = {
 type TextAreaProps = (TextAreaPropsWithA11yLabel | TextAreaPropsWithLabel) & TextAreaCommonProps;
 declare const TextArea: React__default.ForwardRefExoticComponent<TextAreaProps & React__default.RefAttributes<BladeElementRef>>;
 
-type SearchInputCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel' | 'labelPosition' | 'helpText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'value' | 'isDisabled' | 'autoFocus' | 'onSubmit' | 'autoCapitalize' | 'testID' | 'onClick' | 'size' | keyof DataAnalyticsAttribute> & {
+type SearchInputCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel' | 'labelPosition' | 'labelSuffix' | 'labelTrailing' | 'helpText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'value' | 'isDisabled' | 'autoFocus' | 'onSubmit' | 'autoCapitalize' | 'testID' | 'onClick' | 'size' | keyof DataAnalyticsAttribute> & {
     /**
      * Event handler to handle the onClick event for clear button.
      */
@@ -19783,6 +19802,8 @@ declare const PhoneNumberInput: React__default.ForwardRefExoticComponent<Partial
     errorText?: string | undefined;
     successText?: string | undefined;
     necessityIndicator?: "none" | "required" | "optional" | undefined;
+    labelSuffix?: React__default.ReactNode;
+    labelTrailing?: React__default.ReactNode;
     helpText?: string | undefined;
     isRequired?: boolean | undefined;
     keyboardReturnKeyType?: "search" | "default" | "next" | "done" | "go" | "previous" | "send" | undefined;
@@ -19808,7 +19829,7 @@ declare const PhoneNumberInput: React__default.ForwardRefExoticComponent<Partial
     onClearButtonClick?: (() => void) | undefined;
 } & React__default.RefAttributes<BladeElementRef>>;
 
-type CommonProps = Pick<BaseInputProps, 'size' | 'label' | 'labelPosition' | 'name' | 'validationState' | 'errorText' | 'successText' | 'helpText' | 'defaultValue' | 'necessityIndicator' | 'isRequired' | 'isDisabled' | 'onFocus' | 'onBlur' | 'onClick' | 'leadingIcon' | 'trailingIcon' | 'accessibilityLabel' | 'autoFocus' | 'testID' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType' | 'placeholder' | keyof DataAnalyticsAttribute>;
+type CommonProps = Pick<BaseInputProps, 'size' | 'label' | 'labelPosition' | 'labelSuffix' | 'labelTrailing' | 'name' | 'validationState' | 'errorText' | 'successText' | 'helpText' | 'defaultValue' | 'necessityIndicator' | 'isRequired' | 'isDisabled' | 'onFocus' | 'onBlur' | 'onClick' | 'leadingIcon' | 'trailingIcon' | 'accessibilityLabel' | 'autoFocus' | 'testID' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType' | 'placeholder' | keyof DataAnalyticsAttribute>;
 type PhoneNumberInputProps = StyledPropsBlade & CommonProps & {
     /**
      * Default value of the input, Used to set the default value of input field when it's uncontrolled
@@ -25905,7 +25926,7 @@ declare const TableFooterCell: ({ children, textAlign, ...rest }: TableFooterCel
 declare const TablePagination: ({ currentPage: controlledCurrentPage, onPageChange, onPageSizeChange, defaultPageSize, showPageSizePicker, showPageNumberSelector, showLabel, label, totalItemCount, paginationType, ...rest }: TablePaginationProps) => React__default.ReactElement;
 
 declare const TableToolbarActions: ({ children, ...rest }: TableToolbarActionsProps) => React__default.ReactElement;
-declare const TableToolbar: ({ children, title, selectedTitle: controlledSelectedTitle, ...rest }: TableToolbarProps) => React__default.ReactElement;
+declare const TableToolbar: ({ children, title, selectedTitle: controlledSelectedTitle, }: TableToolbarProps) => React__default.ReactElement;
 
 declare const TableEditableDropdownCell: (dropdownProps: TableEditableDropdownCellProps) => React.ReactElement;
 declare const TableEditableCell: ({ validationState, accessibilityLabel, autoCapitalize, autoCompleteSuggestionType, autoFocus, defaultValue, isDisabled, isRequired, keyboardReturnKeyType, leadingIcon, maxCharacters, name, onBlur, onChange, onClick, onFocus, onSubmit, placeholder, prefix, suffix, value, testID, trailingButton, errorText, successText, inputType, }: TableEditableCellProps) => React.ReactElement;

package/build/types/components/index.native.d.ts

@@ -9881,6 +9881,25 @@ type FormInputLabelProps = {
      * Displays `(optional)` when `optional` is passed or `*` when `required` is passed
      */
     necessityIndicator?: 'required' | 'optional' | 'none';
+    /**
+     * Suffix element to be shown for the input field
+     *
+     * @example
+     * ```jsx
+     * labelSuffix={
+     *  <Tooltip content="This is a tooltip" placement="right">
+     *    <TooltipInteractiveWrapper>
+     *        <InfoIcon size="small" color="surface.icon.gray.subtle" />
+     *    </TooltipInteractiveWrapper>
+     *  </Tooltip>
+     * }
+     * ```
+     */
+    labelSuffix?: React__default.ReactNode;
+    /**
+     * Trailing element to be shown for the input field
+     */
+    labelTrailing?: React__default.ReactNode;
 };
 
 type FormInputOnEvent = ({ name, value, rawValue, }: {
@@ -10263,7 +10282,7 @@ type TaggedInputProps = {
 };
 
 type Type = Exclude<BaseInputProps['type'], 'password'>;
-type TextInputCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'value' | 'isDisabled' | 'isRequired' | 'prefix' | 'suffix' | 'maxCharacters' | 'autoFocus' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType' | 'onSubmit' | 'autoCapitalize' | 'testID' | 'onClick' | 'size' | 'leadingIcon' | 'trailingButton' | 'trailingIcon' | 'textAlign' | keyof DataAnalyticsAttribute> & {
+type TextInputCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel' | 'labelPosition' | 'labelSuffix' | 'labelTrailing' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'value' | 'isDisabled' | 'isRequired' | 'prefix' | 'suffix' | 'maxCharacters' | 'autoFocus' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType' | 'onSubmit' | 'autoCapitalize' | 'testID' | 'onClick' | 'size' | 'leadingIcon' | 'trailingButton' | 'trailingIcon' | 'textAlign' | keyof DataAnalyticsAttribute> & {
     /**
      * Decides whether to render a clear icon button
      */
@@ -10506,7 +10525,7 @@ type DatePickerCommonInputProps = {
     labelPosition?: BaseInputProps['labelPosition'];
     inputRef: React.Ref<any>;
     referenceProps: any;
-} & Pick<TextInputProps, 'size' | 'isRequired' | 'necessityIndicator' | 'autoFocus' | 'isDisabled' | 'accessibilityLabel'> & FormInputValidationProps;
+} & Pick<TextInputProps, 'size' | 'isRequired' | 'necessityIndicator' | 'autoFocus' | 'isDisabled' | 'accessibilityLabel' | 'labelSuffix' | 'labelTrailing'> & FormInputValidationProps;
 
 declare const Dropdown: React__default.ForwardRefExoticComponent<{
     isOpen?: boolean | undefined;
@@ -11857,7 +11876,7 @@ type FormInputOnEventWithIndex = ({ name, value, inputIndex, }: {
     value?: string;
     inputIndex: number;
 }) => void;
-type OTPInputCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel' | 'labelPosition' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'name' | 'onChange' | 'value' | 'isDisabled' | 'autoFocus' | 'keyboardReturnKeyType' | 'keyboardType' | 'placeholder' | 'testID' | 'size' | keyof DataAnalyticsAttribute> & {
+type OTPInputCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel' | 'labelPosition' | 'labelSuffix' | 'labelTrailing' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'name' | 'onChange' | 'value' | 'isDisabled' | 'autoFocus' | 'keyboardReturnKeyType' | 'keyboardType' | 'placeholder' | 'testID' | 'size' | keyof DataAnalyticsAttribute> & {
     /**
      * Determines the number of input fields to show for the OTP
      * @default 6
@@ -11947,7 +11966,7 @@ type PasswordInputExtraProps = {
      */
     autoCompleteSuggestionType?: Extract<BaseInputProps['autoCompleteSuggestionType'], 'none' | 'password' | 'newPassword'>;
 };
-type PasswordInputCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel' | 'labelPosition' | 'maxCharacters' | 'validationState' | 'errorText' | 'successText' | 'helpText' | 'isDisabled' | 'defaultValue' | 'placeholder' | 'isRequired' | 'value' | 'onChange' | 'onBlur' | 'onSubmit' | 'onFocus' | 'name' | 'autoFocus' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType' | 'testID' | 'size' | keyof DataAnalyticsAttribute> & PasswordInputExtraProps & StyledPropsBlade;
+type PasswordInputCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel' | 'labelPosition' | 'labelSuffix' | 'labelTrailing' | 'maxCharacters' | 'validationState' | 'errorText' | 'successText' | 'helpText' | 'isDisabled' | 'defaultValue' | 'placeholder' | 'isRequired' | 'value' | 'onChange' | 'onBlur' | 'onSubmit' | 'onFocus' | 'name' | 'autoFocus' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType' | 'testID' | 'size' | keyof DataAnalyticsAttribute> & PasswordInputExtraProps & StyledPropsBlade;
 type PasswordInputPropsWithA11yLabel = {
     /**
      * Label to be shown for the input field
@@ -11971,7 +11990,7 @@ type PasswordInputPropsWithLabel = {
 type PasswordInputProps = (PasswordInputPropsWithA11yLabel | PasswordInputPropsWithLabel) & PasswordInputCommonProps;
 declare const PasswordInput: React__default.ForwardRefExoticComponent<PasswordInputProps & React__default.RefAttributes<BladeElementRef>>;
 
-type TextAreaCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'onSubmit' | 'value' | 'isDisabled' | 'isRequired' | 'maxCharacters' | 'autoFocus' | 'numberOfLines' | 'testID' | 'size' | keyof DataAnalyticsAttribute> & {
+type TextAreaCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel' | 'labelPosition' | 'labelSuffix' | 'labelTrailing' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'onSubmit' | 'value' | 'isDisabled' | 'isRequired' | 'maxCharacters' | 'autoFocus' | 'numberOfLines' | 'testID' | 'size' | keyof DataAnalyticsAttribute> & {
     /**
      * Decides whether to render a clear icon button
      */
@@ -12009,7 +12028,7 @@ type TextAreaPropsWithLabel = {
 type TextAreaProps = (TextAreaPropsWithA11yLabel | TextAreaPropsWithLabel) & TextAreaCommonProps;
 declare const TextArea: React__default.ForwardRefExoticComponent<TextAreaProps & React__default.RefAttributes<BladeElementRef>>;
 
-type SearchInputCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel' | 'labelPosition' | 'helpText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'value' | 'isDisabled' | 'autoFocus' | 'onSubmit' | 'autoCapitalize' | 'testID' | 'onClick' | 'size' | keyof DataAnalyticsAttribute> & {
+type SearchInputCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel' | 'labelPosition' | 'labelSuffix' | 'labelTrailing' | 'helpText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'value' | 'isDisabled' | 'autoFocus' | 'onSubmit' | 'autoCapitalize' | 'testID' | 'onClick' | 'size' | keyof DataAnalyticsAttribute> & {
     /**
      * Event handler to handle the onClick event for clear button.
      */
@@ -12052,7 +12071,7 @@ type SearchInputPropsWithLabel = {
 type SearchInputProps = (SearchInputPropsWithA11yLabel | SearchInputPropsWithLabel) & SearchInputCommonProps;
 declare const SearchInput: React__default.ForwardRefExoticComponent<SearchInputProps & React__default.RefAttributes<BladeElementRef>>;
 
-type CommonProps = Pick<BaseInputProps, 'size' | 'label' | 'labelPosition' | 'name' | 'validationState' | 'errorText' | 'successText' | 'helpText' | 'defaultValue' | 'necessityIndicator' | 'isRequired' | 'isDisabled' | 'onFocus' | 'onBlur' | 'onClick' | 'leadingIcon' | 'trailingIcon' | 'accessibilityLabel' | 'autoFocus' | 'testID' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType' | 'placeholder' | keyof DataAnalyticsAttribute>;
+type CommonProps = Pick<BaseInputProps, 'size' | 'label' | 'labelPosition' | 'labelSuffix' | 'labelTrailing' | 'name' | 'validationState' | 'errorText' | 'successText' | 'helpText' | 'defaultValue' | 'necessityIndicator' | 'isRequired' | 'isDisabled' | 'onFocus' | 'onBlur' | 'onClick' | 'leadingIcon' | 'trailingIcon' | 'accessibilityLabel' | 'autoFocus' | 'testID' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType' | 'placeholder' | keyof DataAnalyticsAttribute>;
 type PhoneNumberInputProps = StyledPropsBlade & CommonProps & {
     /**
      * Default value of the input, Used to set the default value of input field when it's uncontrolled

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@razorpay/blade",
   "description": "The Design System that powers Razorpay",
-  "version": "12.38.0",
+  "version": "12.40.0",
   "license": "MIT",
   "engines": {
     "node": ">=18.12.1"