@razorpay/blade 6.2.1 → 6.2.3

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @razorpay/blade
 
+## 6.2.3
+
+### Patch Changes
+
+- cbb1424b: fix: change import to default in package exports
+
+  Jest does not support the "import" condition in exports. This was causing tests to fail for Blade consumers. Changed "import" to "default" which is supported by all tools. Since Blade is not exporting a dual package, we don't need the "import" condition.
+
+## 6.2.2
+
+### Patch Changes
+
+- 559d97d9: feat: support string array in children
+
+  Users can now use dynamic variables inside children and don't have to wrap it around with string literals
+
+  ```jsx
+  <Button onClick={}>{someVariable} hello</Button>
+  ```
+
 ## 6.2.1
 
 ### Patch Changes

package/build/components/index.d.ts

@@ -293,6 +293,28 @@ type DotNotationColorStringToken<TokenType> = {
     : DotNotationColorStringToken<TokenType[K]>}`;
 }[keyof TokenType];
 
+/**
+ * Use this when you want children to be string.
+ *
+ * This covers scenarios like
+ * ```jsx
+ * <Title>Hi</Title>
+ * <Title>{dynamicVariable} something</Title>
+ * ```
+ *
+ *
+ * ### Usage
+ *
+ * ```ts
+ * import type { StringChildrenType } from '~helpers/types';
+ *
+ * type MyProps = {
+ *  children: StringChildrenType;
+ * }
+ * ```
+ */
+type StringChildrenType = React__default.ReactText | React__default.ReactText[];
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 
@@ -1016,7 +1038,7 @@ declare const ActionListItemIcon: WithComponentId<{
     icon: IconComponent$1;
 }>;
 declare const ActionListItemText: WithComponentId<{
-    children: string;
+    children: StringChildrenType;
 }>;
 /**
  * ### ActionListItem
@@ -1202,7 +1224,7 @@ declare type BadgeProps = {
      * Sets the label for the badge.
      *
      */
-    children: string;
+    children: StringChildrenType;
     /**
      * Sets the variant of the badge.
      *
@@ -1331,11 +1353,11 @@ declare type LinkCommonProps = {
 };
 declare type LinkWithoutIconProps = LinkCommonProps & {
     icon?: undefined;
-    children: string;
+    children: StringChildrenType;
 };
 declare type LinkWithIconProps = LinkCommonProps & {
     icon: IconComponent$1;
-    children?: string;
+    children?: StringChildrenType;
 };
 declare type LinkPropsWithOrWithoutIcon = LinkWithIconProps | LinkWithoutIconProps;
 declare type LinkAnchorVariantProps = LinkPropsWithOrWithoutIcon & {
@@ -1373,11 +1395,11 @@ declare type ButtonCommonProps = {
 };
 declare type ButtonWithoutIconProps = ButtonCommonProps & {
     icon?: undefined;
-    children: string;
+    children: StringChildrenType;
 };
 declare type ButtonWithIconProps = ButtonCommonProps & {
     icon: IconComponent$1;
-    children?: string;
+    children?: StringChildrenType;
 };
 declare type ButtonProps = ButtonWithoutIconProps | ButtonWithIconProps;
 declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<BladeElementRef>>;
@@ -2835,7 +2857,7 @@ declare type IndicatorWithoutA11yLabel = {
     /**
      * A text label to show alongside the indicator dot
      */
-    children: string;
+    children: StringChildrenType;
     /**
      * a11y label for screen readers
      */
@@ -2849,7 +2871,7 @@ declare type IndicatorWithA11yLabel = {
     /**
      * A text label to show alongside the indicator dot
      */
-    children?: string;
+    children?: StringChildrenType;
 };
 declare type IndicatorProps = IndicatorCommonProps & (IndicatorWithA11yLabel | IndicatorWithoutA11yLabel);
 declare const Indicator: ({ accessibilityLabel, children, size, intent, }: IndicatorProps) => ReactElement;
@@ -2939,7 +2961,7 @@ declare type TitleProps = {
     size?: 'small' | 'medium' | 'large';
     contrast?: ColorContrastTypes;
     type?: TextTypes;
-    children: string;
+    children: StringChildrenType;
 };
 declare const Title: ({ size, type, contrast, children, }: TitleProps) => ReactElement;
 
@@ -2948,7 +2970,7 @@ declare type HeadingSize = 'small' | 'medium' | 'large';
 declare type HeadingCommonProps = {
     type?: TextTypes;
     contrast?: ColorContrastTypes;
-    children: string;
+    children: StringChildrenType;
 };
 declare type HeadingNormalVariant = HeadingCommonProps & {
     variant?: Exclude<HeadingVariant, 'subheading'>;
@@ -3047,7 +3069,7 @@ declare const Text: <T extends {
 }>({ variant, weight, size, type, contrast, truncateAfterLines, children, color, }: TextProps<T>) => ReactElement;
 
 declare type CodeProps = {
-    children: string;
+    children: StringChildrenType;
     /**
      * Decides the fontSize and padding of Code
      *
@@ -3185,7 +3207,7 @@ declare type RadioProps = {
     /**
      * Sets the label text of the Radio
      */
-    children: string;
+    children: StringChildrenType;
     /**
      * Help text for the Radio
      */
@@ -3323,7 +3345,7 @@ declare const Spinner: ({ label, labelPosition, accessibilityLabel, contrast, si
 
 declare type SkipNavLinkProps = {
     id?: string;
-    children?: string;
+    children?: StringChildrenType;
 };
 declare const SkipNavLink: ({ id, children, }: SkipNavLinkProps) => JSX.Element;
 declare type SkipNavContentProps = {

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

@@ -293,6 +293,28 @@ type DotNotationColorStringToken<TokenType> = {
     : DotNotationColorStringToken<TokenType[K]>}`;
 }[keyof TokenType];
 
+/**
+ * Use this when you want children to be string.
+ *
+ * This covers scenarios like
+ * ```jsx
+ * <Title>Hi</Title>
+ * <Title>{dynamicVariable} something</Title>
+ * ```
+ *
+ *
+ * ### Usage
+ *
+ * ```ts
+ * import type { StringChildrenType } from '~helpers/types';
+ *
+ * type MyProps = {
+ *  children: StringChildrenType;
+ * }
+ * ```
+ */
+type StringChildrenType = React__default.ReactText | React__default.ReactText[];
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 
@@ -1016,7 +1038,7 @@ declare const ActionListItemIcon: WithComponentId<{
     icon: IconComponent$1;
 }>;
 declare const ActionListItemText: WithComponentId<{
-    children: string;
+    children: StringChildrenType;
 }>;
 /**
  * ### ActionListItem
@@ -1207,7 +1229,7 @@ declare type BadgeProps = {
      * Sets the label for the badge.
      *
      */
-    children: string;
+    children: StringChildrenType;
     /**
      * Sets the variant of the badge.
      *
@@ -1336,11 +1358,11 @@ declare type LinkCommonProps = {
 };
 declare type LinkWithoutIconProps = LinkCommonProps & {
     icon?: undefined;
-    children: string;
+    children: StringChildrenType;
 };
 declare type LinkWithIconProps = LinkCommonProps & {
     icon: IconComponent$1;
-    children?: string;
+    children?: StringChildrenType;
 };
 declare type LinkPropsWithOrWithoutIcon = LinkWithIconProps | LinkWithoutIconProps;
 declare type LinkAnchorVariantProps = LinkPropsWithOrWithoutIcon & {
@@ -1378,11 +1400,11 @@ declare type ButtonCommonProps = {
 };
 declare type ButtonWithoutIconProps = ButtonCommonProps & {
     icon?: undefined;
-    children: string;
+    children: StringChildrenType;
 };
 declare type ButtonWithIconProps = ButtonCommonProps & {
     icon: IconComponent$1;
-    children?: string;
+    children?: StringChildrenType;
 };
 declare type ButtonProps = ButtonWithoutIconProps | ButtonWithIconProps;
 declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<BladeElementRef>>;
@@ -2841,7 +2863,7 @@ declare type IndicatorWithoutA11yLabel = {
     /**
      * A text label to show alongside the indicator dot
      */
-    children: string;
+    children: StringChildrenType;
     /**
      * a11y label for screen readers
      */
@@ -2855,7 +2877,7 @@ declare type IndicatorWithA11yLabel = {
     /**
      * A text label to show alongside the indicator dot
      */
-    children?: string;
+    children?: StringChildrenType;
 };
 declare type IndicatorProps = IndicatorCommonProps & (IndicatorWithA11yLabel | IndicatorWithoutA11yLabel);
 declare const Indicator: ({ accessibilityLabel, children, size, intent, }: IndicatorProps) => ReactElement;
@@ -2945,7 +2967,7 @@ declare type TitleProps = {
     size?: 'small' | 'medium' | 'large';
     contrast?: ColorContrastTypes;
     type?: TextTypes;
-    children: string;
+    children: StringChildrenType;
 };
 declare const Title: ({ size, type, contrast, children, }: TitleProps) => ReactElement;
 
@@ -2954,7 +2976,7 @@ declare type HeadingSize = 'small' | 'medium' | 'large';
 declare type HeadingCommonProps = {
     type?: TextTypes;
     contrast?: ColorContrastTypes;
-    children: string;
+    children: StringChildrenType;
 };
 declare type HeadingNormalVariant = HeadingCommonProps & {
     variant?: Exclude<HeadingVariant, 'subheading'>;
@@ -3053,7 +3075,7 @@ declare const Text: <T extends {
 }>({ variant, weight, size, type, contrast, truncateAfterLines, children, color, }: TextProps<T>) => ReactElement;
 
 declare type CodeProps = {
-    children: string;
+    children: StringChildrenType;
     /**
      * Decides the fontSize and padding of Code
      *
@@ -3182,7 +3204,7 @@ declare type RadioProps = {
     /**
      * Sets the label text of the Radio
      */
-    children: string;
+    children: StringChildrenType;
     /**
      * Help text for the Radio
      */
@@ -3320,7 +3342,7 @@ declare const Spinner: ({ label, labelPosition, accessibilityLabel, contrast, si
 
 declare type SkipNavLinkProps = {
     id?: string;
-    children?: string;
+    children?: StringChildrenType;
 };
 declare const SkipNavLink: (_props: SkipNavLinkProps) => never;
 declare const SkipNavContent: (_props: SkipNavLinkProps) => never;