@razorpay/blade 12.91.0 → 12.92.0

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import * as React$1 from 'react';
-import React__default, { ReactNode, ReactElement, CSSProperties, SyntheticEvent, ImgHTMLAttributes, HTMLAttributeReferrerPolicy, ReactChild, ComponentProps, KeyboardEvent } from 'react';
+import React__default, { ReactNode, ReactElement, CSSProperties, SyntheticEvent, ImgHTMLAttributes, HTMLAttributeReferrerPolicy, ReactChild, KeyboardEvent, ComponentProps } from 'react';
 import { View, ViewStyle, AccessibilityRole, GestureResponderEvent, TouchableOpacity } from 'react-native';
 import { CSSObject } from 'styled-components';
 import * as csstype from 'csstype';
@@ -13691,6 +13691,45 @@ type FileUploadItemProps = Pick<FileUploadProps, 'onPreview' | 'onRemove' | 'onD
     flexBasis?: BoxProps['flexBasis'];
 } & StyledPropsBlade & DataAnalyticsAttribute;
 
+type FormInputOnEvent = ({ name, value, rawValue, }: {
+    name?: string;
+    value?: string;
+    rawValue?: string;
+}) => void;
+type FormInputHandleOnKeyDownEvent = ({ name, key, code, event, }: FormInputOnKeyDownEvent) => void;
+type FormInputOnKeyDownEvent = {
+    name?: string;
+    key?: string;
+    code?: string;
+    event: KeyboardEvent<HTMLInputElement>;
+};
+type FormInputValidationProps = {
+    /**
+     * Help text for the input
+     */
+    helpText?: string;
+    /**
+     * Error text for the input
+     *
+     * Renders when `validationState` is set to 'error'
+     */
+    errorText?: string;
+    /**
+     * success text for the input
+     *
+     * Renders when `validationState` is set to 'success'
+     */
+    successText?: string;
+    /**
+     * If `error`, the input is marked as invalid,
+     * and `invalid` attribute will be added
+     *
+     * If `success`, the input is marked as valid,
+     *
+     */
+    validationState?: 'success' | 'error' | 'none';
+};
+
 type ChatInputProps = {
     /**
      * Controlled value of the text input
@@ -13706,6 +13745,14 @@ type ChatInputProps = {
     onChange?: ({ value }: {
         value: string;
     }) => void;
+    /**
+     * Callback fired when the text input receives focus
+     */
+    onFocus?: FormInputOnEvent;
+    /**
+     * Callback fired when the text input loses focus
+     */
+    onBlur?: FormInputOnEvent;
     /**
      * Callback fired when the user submits the input (via submit button or Enter key).
      * Receives the current text value and the list of attached files.
@@ -13795,12 +13842,48 @@ type ChatInputProps = {
     accessibilityLabel?: string;
 } & TestID & DataAnalyticsAttribute & StyledPropsBlade;
 
+type FormInputLabelProps = {
+    /**
+     * Label to be shown for the input field
+     */
+    label?: string;
+    /**
+     * Desktop only prop. Default value on mobile will be `top`
+     */
+    labelPosition?: 'left' | 'top';
+    /**
+     * 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;
+};
+
 declare const ChatInput: React__default.ForwardRefExoticComponent<{
     value?: string | undefined;
     defaultValue?: string | undefined;
     onChange?: (({ value }: {
         value: string;
     }) => void) | undefined;
+    onFocus?: FormInputOnEvent | undefined;
+    onBlur?: FormInputOnEvent | undefined;
     onSubmit?: (({ value, fileList }: {
         value: string;
         fileList: BladeFileList;
@@ -15581,79 +15664,6 @@ type CollapsibleBodyProps = {
 
 declare const CollapsibleBody: ({ children, testID, width, _hasMargin, ...rest }: CollapsibleBodyProps) => ReactElement;
 
-type FormInputLabelProps = {
-    /**
-     * Label to be shown for the input field
-     */
-    label?: string;
-    /**
-     * Desktop only prop. Default value on mobile will be `top`
-     */
-    labelPosition?: 'left' | 'top';
-    /**
-     * 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, }: {
-    name?: string;
-    value?: string;
-    rawValue?: string;
-}) => void;
-type FormInputHandleOnKeyDownEvent = ({ name, key, code, event, }: FormInputOnKeyDownEvent) => void;
-type FormInputOnKeyDownEvent = {
-    name?: string;
-    key?: string;
-    code?: string;
-    event: KeyboardEvent<HTMLInputElement>;
-};
-type FormInputValidationProps = {
-    /**
-     * Help text for the input
-     */
-    helpText?: string;
-    /**
-     * Error text for the input
-     *
-     * Renders when `validationState` is set to 'error'
-     */
-    errorText?: string;
-    /**
-     * success text for the input
-     *
-     * Renders when `validationState` is set to 'success'
-     */
-    successText?: string;
-    /**
-     * If `error`, the input is marked as invalid,
-     * and `invalid` attribute will be added
-     *
-     * If `success`, the input is marked as valid,
-     *
-     */
-    validationState?: 'success' | 'error' | 'none';
-};
-
 type CommonAutoCompleteSuggestionTypes = 'none' | 'name' | 'email' | 'username' | 'password' | 'newPassword' | 'oneTimeCode' | 'telephone' | 'postalCode' | 'countryName' | 'creditCardNumber' | 'creditCardCSC' | 'creditCardExpiry' | 'creditCardExpiryMonth' | 'creditCardExpiryYear';
 type WebAutoCompleteSuggestionType = CommonAutoCompleteSuggestionTypes | 'on';
 type BaseInputCommonProps = FormInputLabelProps & DataAnalyticsAttribute & FormInputValidationProps & {
@@ -22756,7 +22766,15 @@ declare const SideNav: React__default.ForwardRefExoticComponent<{
     onVisibleLevelChange?: (({ visibleLevel }: {
         visibleLevel: number;
     }) => void) | undefined;
+    onExpandChange?: (({ isExpanded }: {
+        isExpanded: boolean;
+    }) => void) | undefined;
+    onExpandTransitionEnd?: (({ isExpanded }: {
+        isExpanded: boolean;
+    }) => void) | undefined;
+    isExpanded?: boolean | undefined;
     banner?: React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | undefined;
+    backgroundColor?: "surface.background.gray.subtle" | "surface.background.gray.moderate" | "surface.background.gray.intense" | undefined;
 } & Partial<Omit<MarginProps & Pick<FlexboxProps, "alignSelf" | "flexWrap" | "justifySelf" | "order" | "placeSelf"> & {
     top: SpacingValueType | {
         readonly base?: SpacingValueType | undefined;
@@ -23237,6 +23255,7 @@ type TooltipifyComponentProps = {
     tooltip?: Pick<TooltipProps, 'title' | 'content' | 'onOpenChange'>;
 };
 
+type SideNavBackgroundColor = `surface.background.gray.${DotNotationToken<Theme['colors']['surface']['background']['gray']>}`;
 type SideNavProps = {
     /**
      * Children slot.
@@ -23266,12 +23285,42 @@ type SideNavProps = {
     onVisibleLevelChange?: ({ visibleLevel }: {
         visibleLevel: number;
     }) => void;
+    /**
+     * Callback that gets triggered when controlled full expand state changes.
+     *
+     * **Only applicable in desktop**
+     */
+    onExpandChange?: ({ isExpanded }: {
+        isExpanded: boolean;
+    }) => void;
+    /**
+     * Callback that gets triggered when controlled full expand/collapse transition ends.
+     *
+     * **Only applicable in desktop**
+     */
+    onExpandTransitionEnd?: ({ isExpanded }: {
+        isExpanded: boolean;
+    }) => void;
+    /**
+     * **Only applicable in desktop**
+     *
+     * Controls whether SideNav should remain fully expanded.
+     * - `true` (default): existing behavior with hover-based temporary expansion.
+     * - `false`: keeps SideNav collapsed and disables hover/focus-based expansion.
+     */
+    isExpanded?: boolean;
     /**
      * Banner slot for usecases like adding Activation Panel
      *
      * **IMPORTANT** Avoid adding promotional items in this
      */
     banner?: React__default.ReactElement;
+    /**
+     * Sets background color of the SideNav surface.
+     *
+     * @default `surface.background.gray.moderate`
+     */
+    backgroundColor?: SideNavBackgroundColor;
 } & StyledPropsBlade & TestID;
 type SideNavLinkProps = {
     /**

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import * as react_native_types from 'react-native/types';
 import * as react from 'react';
-import react__default, { ReactNode, ReactElement, CSSProperties, SyntheticEvent, ImgHTMLAttributes, HTMLAttributeReferrerPolicy, ReactChild, ComponentProps, KeyboardEvent } from 'react';
+import react__default, { ReactNode, ReactElement, CSSProperties, SyntheticEvent, ImgHTMLAttributes, HTMLAttributeReferrerPolicy, ReactChild, KeyboardEvent, ComponentProps } from 'react';
 import * as react_native from 'react-native';
 import { View, ViewStyle, AccessibilityRole, GestureResponderEvent, TouchableOpacity, ImageSourcePropType, PressableProps } from 'react-native';
 import { CSSObject } from 'styled-components';
@@ -10007,6 +10007,45 @@ type FileUploadItemProps = Pick<FileUploadProps, 'onPreview' | 'onRemove' | 'onD
     flexBasis?: BoxProps['flexBasis'];
 } & StyledPropsBlade & DataAnalyticsAttribute;
 
+type FormInputOnEvent = ({ name, value, rawValue, }: {
+    name?: string;
+    value?: string;
+    rawValue?: string;
+}) => void;
+type FormInputHandleOnKeyDownEvent = ({ name, key, code, event, }: FormInputOnKeyDownEvent) => void;
+type FormInputOnKeyDownEvent = {
+    name?: string;
+    key?: string;
+    code?: string;
+    event: KeyboardEvent<HTMLInputElement>;
+};
+type FormInputValidationProps = {
+    /**
+     * Help text for the input
+     */
+    helpText?: string;
+    /**
+     * Error text for the input
+     *
+     * Renders when `validationState` is set to 'error'
+     */
+    errorText?: string;
+    /**
+     * success text for the input
+     *
+     * Renders when `validationState` is set to 'success'
+     */
+    successText?: string;
+    /**
+     * If `error`, the input is marked as invalid,
+     * and `invalid` attribute will be added
+     *
+     * If `success`, the input is marked as valid,
+     *
+     */
+    validationState?: 'success' | 'error' | 'none';
+};
+
 type ChatInputProps = {
     /**
      * Controlled value of the text input
@@ -10022,6 +10061,14 @@ type ChatInputProps = {
     onChange?: ({ value }: {
         value: string;
     }) => void;
+    /**
+     * Callback fired when the text input receives focus
+     */
+    onFocus?: FormInputOnEvent;
+    /**
+     * Callback fired when the text input loses focus
+     */
+    onBlur?: FormInputOnEvent;
     /**
      * Callback fired when the user submits the input (via submit button or Enter key).
      * Receives the current text value and the list of attached files.
@@ -11329,45 +11376,6 @@ type FormInputLabelProps = {
     labelTrailing?: react__default.ReactNode;
 };
 
-type FormInputOnEvent = ({ name, value, rawValue, }: {
-    name?: string;
-    value?: string;
-    rawValue?: string;
-}) => void;
-type FormInputHandleOnKeyDownEvent = ({ name, key, code, event, }: FormInputOnKeyDownEvent) => void;
-type FormInputOnKeyDownEvent = {
-    name?: string;
-    key?: string;
-    code?: string;
-    event: KeyboardEvent<HTMLInputElement>;
-};
-type FormInputValidationProps = {
-    /**
-     * Help text for the input
-     */
-    helpText?: string;
-    /**
-     * Error text for the input
-     *
-     * Renders when `validationState` is set to 'error'
-     */
-    errorText?: string;
-    /**
-     * success text for the input
-     *
-     * Renders when `validationState` is set to 'success'
-     */
-    successText?: string;
-    /**
-     * If `error`, the input is marked as invalid,
-     * and `invalid` attribute will be added
-     *
-     * If `success`, the input is marked as valid,
-     *
-     */
-    validationState?: 'success' | 'error' | 'none';
-};
-
 type CommonAutoCompleteSuggestionTypes = 'none' | 'name' | 'email' | 'username' | 'password' | 'newPassword' | 'oneTimeCode' | 'telephone' | 'postalCode' | 'countryName' | 'creditCardNumber' | 'creditCardCSC' | 'creditCardExpiry' | 'creditCardExpiryMonth' | 'creditCardExpiryYear';
 type WebAutoCompleteSuggestionType = CommonAutoCompleteSuggestionTypes | 'on';
 type BaseInputCommonProps = FormInputLabelProps & DataAnalyticsAttribute & FormInputValidationProps & {
@@ -14847,6 +14855,7 @@ type TooltipifyComponentProps = {
     tooltip?: Pick<TooltipProps, 'title' | 'content' | 'onOpenChange'>;
 };
 
+type SideNavBackgroundColor = `surface.background.gray.${DotNotationToken<Theme['colors']['surface']['background']['gray']>}`;
 type SideNavProps = {
     /**
      * Children slot.
@@ -14876,12 +14885,42 @@ type SideNavProps = {
     onVisibleLevelChange?: ({ visibleLevel }: {
         visibleLevel: number;
     }) => void;
+    /**
+     * Callback that gets triggered when controlled full expand state changes.
+     *
+     * **Only applicable in desktop**
+     */
+    onExpandChange?: ({ isExpanded }: {
+        isExpanded: boolean;
+    }) => void;
+    /**
+     * Callback that gets triggered when controlled full expand/collapse transition ends.
+     *
+     * **Only applicable in desktop**
+     */
+    onExpandTransitionEnd?: ({ isExpanded }: {
+        isExpanded: boolean;
+    }) => void;
+    /**
+     * **Only applicable in desktop**
+     *
+     * Controls whether SideNav should remain fully expanded.
+     * - `true` (default): existing behavior with hover-based temporary expansion.
+     * - `false`: keeps SideNav collapsed and disables hover/focus-based expansion.
+     */
+    isExpanded?: boolean;
     /**
      * Banner slot for usecases like adding Activation Panel
      *
      * **IMPORTANT** Avoid adding promotional items in this
      */
     banner?: react__default.ReactElement;
+    /**
+     * Sets background color of the SideNav surface.
+     *
+     * @default `surface.background.gray.moderate`
+     */
+    backgroundColor?: SideNavBackgroundColor;
 } & StyledPropsBlade & TestID;
 type SideNavLinkProps = {
     /**

package/package.json

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