@razorpay/blade 6.5.2 → 6.6.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @razorpay/blade
 
+## 6.6.1
+
+### Patch Changes
+
+- fe89e6f6: fix: tree-shaking in blade components
+- 7817c9e3: feat(Box): add different types for `display` on react native
+- c6512ba0: fix(Alert, Card): set `box-sizing` as `border-box` for Alert and Card
+
+## 6.6.0
+
+### Minor Changes
+
+- 5863f939: feat(OTPInput): add `onFocus` & `onBlur` props
+- 75daaa3c: feat(theme): add `name` property in `theme` to watch on theme changes
+
+### Patch Changes
+
+- 6a8524ab: feat(Link): add `hitSlop` support for native
+
 ## 6.5.2
 
 ### Patch Changes

package/build/components/index.d.ts

@@ -437,6 +437,7 @@ type Colors = {
 type ColorsWithModes = Record<ColorSchemeModes, Colors>;
 
 type ThemeTokens = {
+  name: 'paymentTheme' | 'bankingTheme' | StringWithAutocomplete; // Can be used to watch over state changes between theme without watching over entire theme object
   border: Border;
   breakpoints: Breakpoints;
   colors: ColorsWithModes;
@@ -446,16 +447,6 @@ type ThemeTokens = {
   typography: TypographyWithPlatforms;
 };
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-
-/**
- * A type defining React component with additional static prop `componentId`
- */
-type WithComponentId<Props> = ((props: Props) => React__default.ReactElement) & {
-  componentId: string;
-};
-
 // All the WAI-ARIA 1.1 role attribute values from https://www.w3.org/TR/wai-aria-1.1/#role_definitions
 type AriaRoles =
   | Exclude<AccessibilityRole, 'header' | 'adjustable' | 'image' | 'none' | 'summary'>
@@ -935,6 +926,24 @@ type DotNotationSpacingStringToken = `spacing.${keyof Spacing}`;
  */
 type StringChildrenType = React__default.ReactText | React__default.ReactText[];
 
+/**
+ *
+ * When combined with union, this type utility will give you autocomplete of union while still supporting any string value as input
+ *
+ * ### Usage
+ *
+ * ```ts
+ * type ThemeName = 'paymentTheme' | 'bankingTheme' | StringWithAutocomplete;
+ * ```
+ *
+ * This will show paymentTheme and bankingTheme in autocomplete but also allow any other string as value.
+ *
+ * More details - https://github.com/razorpay/blade/pull/1031/commits/86b6ee0facf45e7556739efcbfa5396b11b1b3c9#r1121298293
+ * Related TS Issue - https://github.com/microsoft/TypeScript/issues/29729
+ *
+ */
+type StringWithAutocomplete = string & Record<never, never>;
+
 type TestID$1 = {
   testID?: string;
 };
@@ -993,6 +1002,7 @@ declare type ActionListProps = {
 declare const ActionList: ({ children, surfaceLevel, testID }: ActionListProps) => JSX.Element;
 
 type Theme$1 = {
+  name: ThemeTokens['name'];
   border: Border;
   breakpoints: Breakpoints;
   colors: Colors;
@@ -1458,32 +1468,14 @@ declare type ActionListSectionProps = {
      */
     _hideDivider?: boolean;
 } & TestID$1;
-declare const ActionListSection: WithComponentId<ActionListSectionProps>;
-declare const ActionListItemIcon: WithComponentId<{
+declare const ActionListSection: ({ title, children, testID, _hideDivider, }: ActionListSectionProps) => JSX.Element;
+declare const ActionListItemIcon: ({ icon }: {
     icon: IconComponent$1;
-}>;
-declare const ActionListItemText: WithComponentId<{
+}) => JSX.Element;
+declare const ActionListItemText: ({ children, }: {
     children: StringChildrenType;
-}>;
-/**
- * ### ActionListItem
- *
- * Creates option inside `ActionList`.
- *
- * #### Usage
- *
- * ```jsx
- * <ActionList>
- *  <ActionListItem
- *    title="Home"
- *    value="home"
- *    leading={<ActionListItemIcon icon={HomeIcon} />}
- *    trailing={<ActionListItemText>⌘ + S</ActionListItemText>}
- *  />
- * </ActionList>
- * ```
- */
-declare const ActionListItem: WithComponentId<ActionListItemProps>;
+}) => React__default.ReactElement;
+declare const ActionListItem: (props: ActionListItemProps) => JSX.Element;
 
 declare type ActionListHeaderProps = {
     title: string;
@@ -1494,29 +1486,10 @@ declare type ActionListHeaderProps = {
      */
     leading?: React__default.ReactNode;
 } & TestID$1;
-/**
- * ### ActionListHeader
- *
- * To be used inside `ActionList`
- *
- * #### Usage
- *
- * ```jsx
- * <ActionListHeader
- *  title="Search Tips"
- *  leading={
- *    <ActionListHeaderIcon
- *      title="Recent Searches"
- *      icon={HistoryIcon}
- *    />
- *  }
- * />
- * ```
- */
-declare const ActionListHeader: WithComponentId<ActionListHeaderProps>;
-declare const ActionListHeaderIcon: WithComponentId<{
+declare const ActionListHeader: (props: ActionListHeaderProps) => JSX.Element;
+declare const ActionListHeaderIcon: ({ icon }: {
     icon: IconComponent$1;
-}>;
+}) => React__default.ReactElement;
 
 declare type ActionListFooterProps = {
     title?: string;
@@ -1533,31 +1506,10 @@ declare type ActionListFooterProps = {
      */
     trailing?: React__default.ReactNode;
 } & TestID$1;
-/**
- * ### ActionListFooter
- *
- * To be used inside `ActionList`
- *
- * #### Usage
- *
- * ```jsx
- * <ActionListFooter
- *  title="Search Tips"
- *  leading={<ActionListFooterIcon icon={SearchIcon} />}
- *  trailing={
- *    <Button
- *      onClick={() => { console.log('click') }}
- *    >
- *      Apply
- *    </Button>
- *  }
- * />
- * ```
- */
-declare const ActionListFooter: WithComponentId<ActionListFooterProps>;
-declare const ActionListFooterIcon: WithComponentId<{
+declare const ActionListFooter: (props: ActionListFooterProps) => JSX.Element;
+declare const ActionListFooterIcon: ({ icon }: {
     icon: IconComponent$1;
-}>;
+}) => React__default.ReactElement;
 
 declare type ActionListItemAssetProps = {
     /**
@@ -1569,7 +1521,7 @@ declare type ActionListItemAssetProps = {
      */
     alt: string;
 };
-declare const ActionListItemAsset: WithComponentId<ActionListItemAssetProps>;
+declare const ActionListItemAsset: (props: ActionListItemAssetProps) => React.ReactElement;
 
 declare type PrimaryAction = {
     text: string;
@@ -1705,6 +1657,7 @@ declare const ThemeContext: React$1.Context<ThemeContext>;
 declare const useTheme: () => ThemeContext;
 
 declare type Theme = {
+    name: ThemeTokens['name'];
     border: Border;
     breakpoints: Breakpoints;
     colors: Colors;
@@ -2210,7 +2163,29 @@ declare type LayoutProps = MakeObjectResponsive<{
     width: SpacingValueType;
     minWidth: SpacingValueType;
     maxWidth: SpacingValueType;
-} & Pick<CSSObject, 'display' | 'overflow' | 'overflowX' | 'overflowY'>>;
+} & Pick<CSSObject, 'overflow' | 'overflowX' | 'overflowY'> & Platform$1.Select<{
+    web: {
+        /**
+         *
+         * On Web, The **`display`** CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.
+         *
+         * @see https://developer.mozilla.org/docs/Web/CSS/display
+         */
+        display: CSSObject['display'];
+    };
+    native: {
+        /**
+         *
+         *
+         * On React Native, **`display`** property sets whether an element can be `flex` or `none`
+         *
+         * @see https://reactnative.dev/docs/layout-props.html#display
+         *
+         * @default 'flex'
+         */
+        display: 'none' | 'flex';
+    };
+}>>;
 declare type FlexboxProps = MakeObjectResponsive<{
     /**
      * This uses the native gap property which might not work on older browsers.
@@ -2331,7 +2306,7 @@ declare const Card: ({ children, surfaceLevel, testID, ...styledProps }: CardPro
 declare type CardBodyProps = {
     children: React__default.ReactNode;
 } & TestID$1;
-declare const CardBody: WithComponentId<CardBodyProps>;
+declare const CardBody: ({ children, testID }: CardBodyProps) => React__default.ReactElement;
 
 declare type LinkCommonProps = {
     variant?: 'anchor' | 'button';
@@ -2348,7 +2323,25 @@ declare type LinkCommonProps = {
      * @default medium
      */
     size?: 'small' | 'medium';
-} & TestID$1 & StyledPropsBlade;
+} & TestID$1 & StyledPropsBlade & Platform$1.Select<{
+    native: {
+        /**
+         * Defines how far your touch can start away from the link
+         */
+        hitSlop?: {
+            top?: number;
+            right?: number;
+            bottom?: number;
+            left?: number;
+        } | number;
+    };
+    web: {
+        /**
+         * This is a react-native only prop and has no effect on web.
+         */
+        hitSlop?: undefined;
+    };
+}>;
 declare type LinkWithoutIconProps = LinkCommonProps & {
     icon?: undefined;
     children: StringChildrenType;
@@ -2373,7 +2366,7 @@ declare type LinkButtonVariantProps = LinkPropsWithOrWithoutIcon & {
     rel?: undefined;
 };
 declare type LinkProps = LinkAnchorVariantProps | LinkButtonVariantProps;
-declare const Link: ({ children, icon, iconPosition, isDisabled, onClick, variant, href, target, rel, accessibilityLabel, size, testID, ...styledProps }: LinkProps) => ReactElement;
+declare const Link: ({ children, icon, iconPosition, isDisabled, onClick, variant, href, target, rel, accessibilityLabel, size, testID, hitSlop, ...styledProps }: LinkProps) => ReactElement;
 
 type BladeElementRef = Pick<HTMLElement, 'focus' | 'scrollIntoView'> | Pick<View, 'focus'>;
 
@@ -2517,23 +2510,23 @@ type CounterProps$1 = {
 } & TestID$1 &
   StyledPropsBlade;
 
-declare const CardHeaderIcon: WithComponentId<{
+declare const CardHeaderIcon: ({ icon }: {
     icon: IconComponent$1;
-}>;
-declare const CardHeaderCounter: WithComponentId<CounterProps$1>;
-declare const CardHeaderBadge: WithComponentId<BadgeProps>;
-declare const CardHeaderText: WithComponentId<TextProps$1<{
+}) => React__default.ReactElement;
+declare const CardHeaderCounter: (props: CounterProps$1) => React__default.ReactElement;
+declare const CardHeaderBadge: (props: BadgeProps) => React__default.ReactElement;
+declare const CardHeaderText: (props: TextProps$1<{
     variant: TextVariant$1;
-}>>;
-declare const CardHeaderLink: WithComponentId<LinkProps>;
+}>) => React__default.ReactElement;
+declare const CardHeaderLink: (props: LinkProps) => React__default.ReactElement;
 declare type CardHeaderIconButtonProps = Omit<ButtonProps, 'variant' | 'size' | 'iconPosition' | 'isFullWidth' | 'children'> & {
     icon: IconComponent$1;
 };
-declare const CardHeaderIconButton: WithComponentId<CardHeaderIconButtonProps>;
+declare const CardHeaderIconButton: (props: CardHeaderIconButtonProps) => React__default.ReactElement;
 declare type CardHeaderProps = {
     children?: React__default.ReactNode;
 } & TestID$1;
-declare const CardHeader: WithComponentId<CardHeaderProps>;
+declare const CardHeader: ({ children, testID }: CardHeaderProps) => React__default.ReactElement;
 declare type CardHeaderLeadingProps = {
     title: string;
     subtitle?: string;
@@ -2550,7 +2543,7 @@ declare type CardHeaderLeadingProps = {
      */
     suffix?: React__default.ReactNode;
 };
-declare const CardHeaderLeading: WithComponentId<CardHeaderLeadingProps>;
+declare const CardHeaderLeading: ({ title, subtitle, prefix, suffix, }: CardHeaderLeadingProps) => React__default.ReactElement;
 declare type CardHeaderTrailingProps = {
     /**
      * Renders a visual ornament in card header trailing section
@@ -2559,7 +2552,7 @@ declare type CardHeaderTrailingProps = {
      */
     visual?: React__default.ReactNode;
 };
-declare const CardHeaderTrailing: WithComponentId<CardHeaderTrailingProps>;
+declare const CardHeaderTrailing: ({ visual }: CardHeaderTrailingProps) => React__default.ReactElement;
 
 declare type CardFooterAction = Pick<ButtonProps, 'type' | 'accessibilityLabel' | 'isLoading' | 'isDisabled' | 'icon' | 'iconPosition' | 'onClick'> & {
     text: ButtonProps['children'];
@@ -2567,19 +2560,19 @@ declare type CardFooterAction = Pick<ButtonProps, 'type' | 'accessibilityLabel'
 declare type CardFooterProps = {
     children?: React__default.ReactNode;
 } & TestID$1;
-declare const CardFooter: WithComponentId<CardFooterProps>;
+declare const CardFooter: ({ children, testID }: CardFooterProps) => React__default.ReactElement;
 declare type CardFooterLeadingProps = {
     title?: string;
     subtitle?: string;
 };
-declare const CardFooterLeading: WithComponentId<CardFooterLeadingProps>;
+declare const CardFooterLeading: ({ title, subtitle }: CardFooterLeadingProps) => React__default.ReactElement;
 declare type CardFooterTrailingProps = {
     actions?: {
         primary?: CardFooterAction;
         secondary?: CardFooterAction;
     };
 };
-declare const CardFooterTrailing: WithComponentId<CardFooterTrailingProps>;
+declare const CardFooterTrailing: ({ actions }: CardFooterTrailingProps) => React__default.ReactElement;
 
 declare type IconButtonProps = {
     /**
@@ -2991,43 +2984,12 @@ declare type DropdownProps = {
     selectionType?: 'single' | 'multiple';
     children: React__default.ReactNode[];
 } & StyledPropsBlade;
-/**
- * ### Dropdown component
- *
- * Dropdown component is generic component that controls the dropdown functionality.
- * It can be used with multiple triggers and mostly contains ActionList component inside it
- *
- * ---
- *
- * #### Usage
- *
- * ```jsx
- * <Dropdown selectionType="single">
- *  <SelectInput />
- *  <DropdownOverlay>
- *    <ActionList>
- *      <ActionListItem />
- *      <ActionListItem />
- *    </ActionList>
- *  </DropdownOverlay>
- * </Dropdown>
- * ```
- *
- * ---
- *
- * Checkout {@link https://blade.razorpay.com/?path=/docs/components-dropdown-with-select--with-single-select Dropdown Documentation}
- */
-declare const Dropdown: WithComponentId<DropdownProps>;
+declare const Dropdown: ({ children, selectionType, ...styledProps }: DropdownProps) => JSX.Element;
 
 declare type DropdownOverlayProps = {
     children: React__default.ReactNode;
 } & TestID$1;
-/**
- * Overlay of dropdown
- *
- * Wrap your ActionList within this component
- */
-declare const DropdownOverlay: WithComponentId<DropdownOverlayProps>;
+declare const DropdownOverlay: ({ children, testID }: DropdownOverlayProps) => JSX.Element;
 
 declare const ArrowDownIcon: IconComponent;
 
@@ -4191,6 +4153,11 @@ declare const TextArea: React__default.ForwardRefExoticComponent<Pick<BaseInputP
     }> | undefined;
 }, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">> & React__default.RefAttributes<BladeElementRef>>;
 
+declare type FormInputOnEventWithIndex = ({ name, value, inputIndex, }: {
+    name?: string;
+    value?: string;
+    inputIndex: number;
+}) => void;
 declare type OTPInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'name' | 'onChange' | 'value' | 'isDisabled' | 'autoFocus' | 'keyboardReturnKeyType' | 'keyboardType' | 'placeholder' | 'testID'> & {
     /**
      * Determines the number of input fields to show for the OTP
@@ -4219,6 +4186,14 @@ declare type OTPInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'v
      *
      */
     autoCompleteSuggestionType?: Extract<BaseInputProps['autoCompleteSuggestionType'], 'none' | 'oneTimeCode'>;
+    /**
+     * The callback function to be invoked when one of the input fields gets focus
+     */
+    onFocus?: FormInputOnEventWithIndex;
+    /**
+     * The callback function to be invoked when one of the input fields is blurred
+     */
+    onBlur?: FormInputOnEventWithIndex;
 } & StyledPropsBlade;
 /**
  * OTPInput component can be used for accepting OTPs sent to users for authentication/verification purposes.
@@ -4234,7 +4209,7 @@ declare type OTPInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'v
  *   />
  * ```
  */
-declare const OTPInput: ({ autoFocus, errorText, helpText, isDisabled, keyboardReturnKeyType, keyboardType, label, labelPosition, name, onChange, onOTPFilled, otpLength, placeholder, successText, validationState, value, isMasked, autoCompleteSuggestionType, testID, ...styledProps }: OTPInputProps) => React__default.ReactElement;
+declare const OTPInput: ({ autoFocus, errorText, helpText, isDisabled, keyboardReturnKeyType, keyboardType, label, labelPosition, name, onChange, onFocus, onBlur, onOTPFilled, otpLength, placeholder, successText, validationState, value, isMasked, autoCompleteSuggestionType, testID, ...styledProps }: OTPInputProps) => React__default.ReactElement;
 
 declare type SelectInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'name' | 'isDisabled' | 'isRequired' | 'prefix' | 'suffix' | 'autoFocus' | 'onClick' | 'onFocus' | 'onBlur' | 'placeholder' | 'testID'> & {
     icon?: IconComponent$1;
@@ -4332,10 +4307,7 @@ declare type ListItemProps = {
      */
     _itemNumber?: undefined;
 } & TestID$1;
-declare const ListItem: {
-    ({ children, icon, _itemNumber, testID, }: ListItemProps): React__default.ReactElement;
-    componentId: string;
-};
+declare const ListItem: ({ children, icon, _itemNumber, testID, }: ListItemProps) => React__default.ReactElement;
 
 declare type ListCommonProps = {
     /**
@@ -4365,36 +4337,10 @@ declare type ListWithoutIconProps = ListCommonProps & {
     icon?: undefined;
 };
 declare type ListProps = ListWithIconProps | ListWithoutIconProps;
-/**
- * List Component is used to display a set of related items that are composed of text/links. Each list item begins with a bullet or a number.
- *
- * ## Usage
- *
- * ```tsx
- *   <List
- *     variant='unordered'
- *     size='medium'
- *   >
- *    <ListItem>
- *      Item 1
- *      <List>
- *        <ListItem>Item 1.1</ListItem>
- *      </List>
- *    </ListItem>
- *    <ListItem>Item 2</ListItem>
- *  <List />
- * ```
- */
-declare const List: {
-    ({ variant, size, children, icon, testID, ...styledProps }: ListProps): React__default.ReactElement;
-    componentId: string;
-};
+declare const List: ({ variant, size, children, icon, testID, ...styledProps }: ListProps) => React__default.ReactElement;
 
 declare type ListItemLinkProps = Exclude<LinkProps, 'size' | 'variant' | 'isDisabled'>;
-declare const ListItemLink: {
-    ({ accessibilityLabel, children, href, icon, iconPosition, onClick, rel, target, testID, }: ListItemLinkProps): React.ReactElement;
-    componentId: string;
-};
+declare const ListItemLink: ({ accessibilityLabel, children, href, icon, iconPosition, onClick, rel, target, testID, }: ListItemLinkProps) => React.ReactElement;
 
 declare type TitleProps = {
     size?: 'small' | 'medium' | 'large';
@@ -4546,10 +4492,7 @@ declare type CodeProps = {
 declare const Code: ({ children, size, testID, ...styledProps }: CodeProps) => JSX.Element;
 
 declare type ListItemCodeProps = Exclude<CodeProps, 'size'>;
-declare const ListItemCode: {
-    ({ children, testID }: ListItemCodeProps): React.ReactElement;
-    componentId: string;
-};
+declare const ListItemCode: ({ children, testID }: ListItemCodeProps) => React.ReactElement;
 
 declare type Assertiveness = AriaAttributes['liveRegion'];
 
@@ -4936,7 +4879,11 @@ declare const BaseBox: styled_components.StyledComponent<"div", styled_component
     width: SpacingValueType;
     minWidth: SpacingValueType;
     maxWidth: SpacingValueType;
-} & Pick<styled_components.CSSObject, "display" | "overflow" | "overflowX" | "overflowY">> & MakeObjectResponsive<{
+} & Pick<styled_components.CSSObject, "overflow" | "overflowX" | "overflowY"> & {
+    display: csstype.Property.Display | undefined;
+} & {
+    __brand__?: "platform-web" | undefined;
+}> & MakeObjectResponsive<{
     gap: SpacingValueType;
     rowGap: SpacingValueType;
     columnGap: SpacingValueType;
@@ -5014,7 +4961,7 @@ declare const BaseBox: styled_components.StyledComponent<"div", styled_component
     children?: React$1.ReactNode | React$1.ReactNode[];
 } & TestID>, "backgroundColor" | "as"> & Partial<MakeObjectResponsive<{
     borderRadius: "none" | "small" | "medium" | "large" | "max" | "round";
-    backgroundColor: "feedback.background.neutral.lowContrast" | "feedback.background.neutral.highContrast" | "feedback.background.information.lowContrast" | "feedback.background.information.highContrast" | "feedback.background.negative.lowContrast" | "feedback.background.negative.highContrast" | "feedback.background.notice.lowContrast" | "feedback.background.notice.highContrast" | "feedback.background.positive.lowContrast" | "feedback.background.positive.highContrast" | "surface.background.level1.lowContrast" | "surface.background.level1.highContrast" | "surface.background.level2.lowContrast" | "surface.background.level2.highContrast" | "surface.background.level3.lowContrast" | "surface.background.level3.highContrast" | "action.background.primary.default" | "action.background.primary.disabled" | "action.background.primary.hover" | "action.background.primary.focus" | "action.background.primary.active" | "action.background.secondary.default" | "action.background.secondary.disabled" | "action.background.secondary.hover" | "action.background.secondary.focus" | "action.background.secondary.active" | "action.background.tertiary.default" | "action.background.tertiary.disabled" | "action.background.tertiary.hover" | "action.background.tertiary.focus" | "action.background.tertiary.active" | (string & Record<never, never>);
+    backgroundColor: (string & Record<never, never>) | "feedback.background.neutral.lowContrast" | "feedback.background.neutral.highContrast" | "feedback.background.information.lowContrast" | "feedback.background.information.highContrast" | "feedback.background.negative.lowContrast" | "feedback.background.negative.highContrast" | "feedback.background.notice.lowContrast" | "feedback.background.notice.highContrast" | "feedback.background.positive.lowContrast" | "feedback.background.positive.highContrast" | "surface.background.level1.lowContrast" | "surface.background.level1.highContrast" | "surface.background.level2.lowContrast" | "surface.background.level2.highContrast" | "surface.background.level3.lowContrast" | "surface.background.level3.highContrast" | "action.background.primary.default" | "action.background.primary.disabled" | "action.background.primary.hover" | "action.background.primary.focus" | "action.background.primary.active" | "action.background.secondary.default" | "action.background.secondary.disabled" | "action.background.secondary.hover" | "action.background.secondary.focus" | "action.background.secondary.active" | "action.background.tertiary.default" | "action.background.tertiary.disabled" | "action.background.tertiary.hover" | "action.background.tertiary.focus" | "action.background.tertiary.active";
     lineHeight: SpacingValueType;
 } & Pick<styled_components.CSSObject, "border" | "transform" | "borderBottom" | "borderLeft" | "borderRight" | "borderTop">> & {
     className?: string | undefined;