@razorpay/blade 6.3.0 → 6.5.0

package/build/utils/index.d.ts

@@ -6,7 +6,10 @@ import React, { MutableRefObject } from 'react';
 import { AccessibilityRole, Platform as Platform$2 } from 'react-native';
 export { default as merge } from 'lodash/merge';
 
-declare const metaAttribute: (name: string, value: string | undefined) => Record<string, string>;
+declare const metaAttribute: ({ name, testID, }: {
+    name?: string | undefined;
+    testID?: string | undefined;
+}) => Record<string, string>;
 
 declare const MetaConstants: {
     readonly ActionList: "action-list";
@@ -16,6 +19,7 @@ declare const MetaConstants: {
     readonly ActionListSection: "action-list-section";
     readonly Alert: "alert";
     readonly Badge: "badge";
+    readonly Box: "Box";
     readonly Button: "button";
     readonly Checkbox: "checkbox";
     readonly CheckboxGroup: "checkbox-group";
@@ -40,21 +44,77 @@ declare const MetaConstants: {
     readonly CardBody: "card-body";
     readonly CardHeader: "card-header";
     readonly CardFooter: "card-footer";
+    readonly VisuallyHidden: "visually-hidden";
 };
 
 type Breakpoints = Readonly<{
-  /** max width: 320px  */
+  /**
+   * `base` is used for responsive styling following a **mobile first** approach. It starts from 0px till the next existing token
+   *
+   * Think of this as styles without any media query.
+   *
+   * ### Example
+   *
+   * This code will set margin as `spacing.2` on "m" size screens and above. And as `spacing.1` on less than "m" size screens
+   * ```jsx
+   * <Box margin={{ base: 'spacing.1', m: 'spacing.2' }} />
+   * ```
+   *
+   * This roughly translates into -
+   *
+   * ```
+   * .Box {
+   *  margin: 'spacing.1';
+   * }
+   *
+   * ＠media screen and (min-width: 768px) {
+   *  .Box {
+   *    margin: 'spacing.2';
+   *  }
+   * }
+   * ```
+   */
+  base: number;
+  /**
+   * `@media screen and (min-width: 320px)`
+   *
+   * Small Mobiles
+   */
   xs: number;
-  /** min width: 321px and max width: 480px */
+  /**
+   * `@media screen and (min-width: 480px)`
+   *
+   * Mobiles and Small Tablets
+   */
   s: number;
-  /** min width: 481px and max width: 768px */
+  /**
+   * `@media screen and (min-width: 768px)`
+   *
+   * Medium and Large Tablets.
+   *
+   * Dimensions with `m` and above can be treated as desktop in mobile-first approach (with min-width).
+   * Hence this breakpoint can be used for desktop styling.
+   *
+   * E.g. next example will keep flexDirection `row` on mobiles and `column` on large tablets, desktop, and larger screens
+   *
+   * ```jsx
+   * <Box display="flex" flexDirection={{ base: 'row', m: 'column' }} />
+   * ```
+   *
+   */
   m: number;
-  /** min width: 769 and max width: 1024px */
+  /**
+   * `@media screen and (min-width: 1024px)`
+   *
+   * Desktop
+   */
   l: number;
-  /** min width: 1025 and max width: 1200px */
+  /**
+   * `@media screen and (min-width: 1200px)`
+   *
+   * HD Desktop
+   */
   xl: number;
-  /** min width: 1201px  */
-  max: number;
 }>;
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -98,6 +158,11 @@ type ColorSchemeNamesInput = ColorSchemeNames | 'system';
 
 declare const getColorScheme: (colorScheme?: ColorSchemeNamesInput) => ColorSchemeNames;
 
+declare const getMediaQuery: ({ min, max }: {
+    min: number;
+    max?: number | undefined;
+}) => string;
+
 declare type PlatformTypes = 'browser' | 'node' | 'react-native' | 'unknown';
 declare const getPlatformType: () => PlatformTypes;
 
@@ -478,4 +543,4 @@ declare const castNativeType: <T>(value: T) => Extract<T, {
     __brand__?: "platform-all" | "platform-native" | undefined;
 }>;
 
-export { AccessibilityKeys, AccessibilityMap, AccessibilityProps, AriaAttributes, AriaRoles, DeepPartial, MakeSize, MetaConstants, Platform, PlatformTypes, UseColorScheme, WithComponentId, castNativeType, castWebType, getColorScheme, getComponentId, getOS, getPlatformType, isAndroid, isPartialMatchObjectKeys, isReactNative, isValidAllowedChildren, makeAccessible, makeBezier, makeBorderSize, makeMotionTime, makeSize, makeSpace, makeTypographySize, metaAttribute, setupMatchMediaMock, testID, toTitleCase, useBreakpoint, useColorScheme, usePrevious };
+export { AccessibilityKeys, AccessibilityMap, AccessibilityProps, AriaAttributes, AriaRoles, DeepPartial, MakeSize, MetaConstants, Platform, PlatformTypes, UseColorScheme, WithComponentId, castNativeType, castWebType, getColorScheme, getComponentId, getMediaQuery, getOS, getPlatformType, isAndroid, isPartialMatchObjectKeys, isReactNative, isValidAllowedChildren, makeAccessible, makeBezier, makeBorderSize, makeMotionTime, makeSize, makeSpace, makeTypographySize, metaAttribute, setupMatchMediaMock, testID, toTitleCase, useBreakpoint, useColorScheme, usePrevious };

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

@@ -7,7 +7,10 @@ import { AccessibilityRole, Platform as Platform$2 } from 'react-native';
 import { EasingFunctionFactory } from 'react-native-reanimated';
 export { default as merge } from 'lodash/merge';
 
-declare const metaAttribute: (_name: string, _value: string) => Record<string, string>;
+declare const metaAttribute: ({ testID }: {
+    name?: string | undefined;
+    testID?: string | undefined;
+}) => Record<string, string>;
 
 declare const MetaConstants: {
     readonly ActionList: "action-list";
@@ -17,6 +20,7 @@ declare const MetaConstants: {
     readonly ActionListSection: "action-list-section";
     readonly Alert: "alert";
     readonly Badge: "badge";
+    readonly Box: "Box";
     readonly Button: "button";
     readonly Checkbox: "checkbox";
     readonly CheckboxGroup: "checkbox-group";
@@ -41,21 +45,77 @@ declare const MetaConstants: {
     readonly CardBody: "card-body";
     readonly CardHeader: "card-header";
     readonly CardFooter: "card-footer";
+    readonly VisuallyHidden: "visually-hidden";
 };
 
 type Breakpoints = Readonly<{
-  /** max width: 320px  */
+  /**
+   * `base` is used for responsive styling following a **mobile first** approach. It starts from 0px till the next existing token
+   *
+   * Think of this as styles without any media query.
+   *
+   * ### Example
+   *
+   * This code will set margin as `spacing.2` on "m" size screens and above. And as `spacing.1` on less than "m" size screens
+   * ```jsx
+   * <Box margin={{ base: 'spacing.1', m: 'spacing.2' }} />
+   * ```
+   *
+   * This roughly translates into -
+   *
+   * ```
+   * .Box {
+   *  margin: 'spacing.1';
+   * }
+   *
+   * ＠media screen and (min-width: 768px) {
+   *  .Box {
+   *    margin: 'spacing.2';
+   *  }
+   * }
+   * ```
+   */
+  base: number;
+  /**
+   * `@media screen and (min-width: 320px)`
+   *
+   * Small Mobiles
+   */
   xs: number;
-  /** min width: 321px and max width: 480px */
+  /**
+   * `@media screen and (min-width: 480px)`
+   *
+   * Mobiles and Small Tablets
+   */
   s: number;
-  /** min width: 481px and max width: 768px */
+  /**
+   * `@media screen and (min-width: 768px)`
+   *
+   * Medium and Large Tablets.
+   *
+   * Dimensions with `m` and above can be treated as desktop in mobile-first approach (with min-width).
+   * Hence this breakpoint can be used for desktop styling.
+   *
+   * E.g. next example will keep flexDirection `row` on mobiles and `column` on large tablets, desktop, and larger screens
+   *
+   * ```jsx
+   * <Box display="flex" flexDirection={{ base: 'row', m: 'column' }} />
+   * ```
+   *
+   */
   m: number;
-  /** min width: 769 and max width: 1024px */
+  /**
+   * `@media screen and (min-width: 1024px)`
+   *
+   * Desktop
+   */
   l: number;
-  /** min width: 1025 and max width: 1200px */
+  /**
+   * `@media screen and (min-width: 1200px)`
+   *
+   * HD Desktop
+   */
   xl: number;
-  /** min width: 1201px  */
-  max: number;
 }>;
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -99,6 +159,11 @@ type ColorSchemeNamesInput = ColorSchemeNames | 'system';
 
 declare const getColorScheme: (colorScheme?: ColorSchemeNamesInput) => ColorSchemeNames;
 
+declare const getMediaQuery: ({ min, max }: {
+    min: number;
+    max?: number | undefined;
+}) => string;
+
 declare type PlatformTypes = 'browser' | 'node' | 'react-native' | 'unknown';
 declare const getPlatformType: () => PlatformTypes;
 
@@ -477,4 +542,4 @@ declare const castNativeType: <T>(value: T) => Extract<T, {
     __brand__?: "platform-native" | "platform-all" | undefined;
 }>;
 
-export { AccessibilityKeys, AccessibilityMap, AccessibilityProps, AriaAttributes, AriaRoles, DeepPartial, MakeSize, MetaConstants, Platform, PlatformTypes, UseColorScheme, WithComponentId, castNativeType, castWebType, getColorScheme, getComponentId, getOS, getPlatformType, isAndroid, isPartialMatchObjectKeys, isReactNative, isValidAllowedChildren, makeAccessible, makeBezier, makeBorderSize, makeMotionTime, makeSize, makeSpace, makeTypographySize, metaAttribute, setupMatchMediaMock, testID, toTitleCase, useBreakpoint, useColorScheme, usePrevious };
+export { AccessibilityKeys, AccessibilityMap, AccessibilityProps, AriaAttributes, AriaRoles, DeepPartial, MakeSize, MetaConstants, Platform, PlatformTypes, UseColorScheme, WithComponentId, castNativeType, castWebType, getColorScheme, getComponentId, getMediaQuery, getOS, getPlatformType, isAndroid, isPartialMatchObjectKeys, isReactNative, isValidAllowedChildren, makeAccessible, makeBezier, makeBorderSize, makeMotionTime, makeSize, makeSpace, makeTypographySize, metaAttribute, setupMatchMediaMock, testID, toTitleCase, useBreakpoint, useColorScheme, usePrevious };

package/build/utils/index.native.js

@@ -1,8 +1,8 @@
+import _extends from '@babel/runtime/helpers/extends';
 import { Appearance, Platform as Platform$1 } from 'react-native';
 import React, { useMemo, useCallback, useState, useEffect, useRef } from 'react';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _defineProperty$1 from '@babel/runtime/helpers/defineProperty';
-import _extends from '@babel/runtime/helpers/extends';
 import { Easing } from 'react-native-reanimated';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -2789,9 +2789,9 @@ function cloneDeep(value) {
 
 var cloneDeep_1 = cloneDeep;
 
-var metaAttribute=function metaAttribute(_name,_value){return {};};
+var metaAttribute=function metaAttribute(_ref){var testID=_ref.testID;return _extends({},testID?{testID:testID}:{});};
 
-var MetaConstants={ActionList:'action-list',ActionListFooter:'action-list-footer',ActionListHeader:'action-list-header',ActionListItem:'action-list-item',ActionListSection:'action-list-section',Alert:'alert',Badge:'badge',Button:'button',Checkbox:'checkbox',CheckboxGroup:'checkbox-group',Code:'code',Component:'blade-component',Counter:'counter',DropdownOverlay:'dropdown-overlay',Icon:'icon',IconButton:'icon-button',Indicator:'indicator',Link:'link',List:'list',ListItem:'list-item',OTPInput:'otp-input',ProgressBar:'progress-bar',Radio:'radio',RadioGroup:'radio-group',SkipNav:'skipnav',Spinner:'spinner',SelectInput:'select-input',Card:'card',CardBody:'card-body',CardHeader:'card-header',CardFooter:'card-footer'};
+var MetaConstants={ActionList:'action-list',ActionListFooter:'action-list-footer',ActionListHeader:'action-list-header',ActionListItem:'action-list-item',ActionListSection:'action-list-section',Alert:'alert',Badge:'badge',Box:'Box',Button:'button',Checkbox:'checkbox',CheckboxGroup:'checkbox-group',Code:'code',Component:'blade-component',Counter:'counter',DropdownOverlay:'dropdown-overlay',Icon:'icon',IconButton:'icon-button',Indicator:'indicator',Link:'link',List:'list',ListItem:'list-item',OTPInput:'otp-input',ProgressBar:'progress-bar',Radio:'radio',RadioGroup:'radio-group',SkipNav:'skipnav',Spinner:'spinner',SelectInput:'select-input',Card:'card',CardBody:'card-body',CardHeader:'card-header',CardFooter:'card-footer',VisuallyHidden:'visually-hidden'};
 
 var getColorScheme=function getColorScheme(){var colorScheme=arguments.length>0&&arguments[0]!==undefined?arguments[0]:'light';if(colorScheme==='light'||colorScheme==='dark'){return colorScheme;}if(colorScheme==='system'){var _Appearance$getColorS;return (_Appearance$getColorS=Appearance.getColorScheme())!=null?_Appearance$getColorS:'light';}return 'light';};
 
@@ -3177,6 +3177,8 @@ function get(object, path, defaultValue) {
 
 var get_1 = get;
 
+var getMediaQuery=function getMediaQuery(_ref){var min=_ref.min,max=_ref.max;return "screen and (min-width: "+min+"px)"+(max?" and (max-width: "+max+"px)":'');};
+
 var getPlatformType=function getPlatformType(){if(typeof navigator!=='undefined'&&navigator.product==='ReactNative'){return 'react-native';}if(typeof document!=='undefined'){return 'browser';}if(typeof process!=='undefined'){return 'node';}return 'unknown';};
 
 var baseKeys = _baseKeys,
@@ -4537,7 +4539,7 @@ var testID=function testID(defaultKey){return {testID:defaultKey};};
 
 var toTitleCase=function toTitleCase(inputString){return inputString.toLowerCase().split(' ').map(function(word){return word.charAt(0).toUpperCase()+word.slice(1);}).join(' ');};
 
-var deviceType={desktop:'desktop',mobile:'mobile'};var useBreakpoint=function useBreakpoint(_ref){var _window;var breakpoints=_ref.breakpoints;var supportsMatchMedia=typeof document!=='undefined'&&typeof window!=='undefined'&&typeof((_window=window)==null?void 0:_window.matchMedia)==='function';var breakpointsTokenAndQueryCollection=useMemo(function(){return supportsMatchMedia?Object.entries(breakpoints).map(function(_ref2,index,breakpointsArray){var _ref3=_slicedToArray(_ref2,2),token=_ref3[0],screenSize=_ref3[1];var mediaQuery='';if(token==='max'){mediaQuery="screen and (min-width: "+screenSize+"px)";}else if(breakpointsArray[index-1]){mediaQuery="screen and (min-width: "+(breakpointsArray[index-1][1]+1)+"px) and (max-width: "+screenSize+"px)";}else {mediaQuery="screen and (max-width: "+screenSize+"px)";}return {token:token,screenSize:screenSize,mediaQuery:mediaQuery};}):[];},[breakpoints,supportsMatchMedia]);var getMatchedDeviceType=useCallback(function(matchedBreakpoint){var matchedDeviceType=deviceType.mobile;var platform=getPlatformType();if(platform==='react-native'){matchedDeviceType=deviceType.mobile;}else if(platform==='browser'){if(matchedBreakpoint&&['xs','s','m'].includes(matchedBreakpoint)){matchedDeviceType=deviceType.mobile;}else {matchedDeviceType=deviceType.desktop;}}else if(platform==='node'){matchedDeviceType=deviceType.desktop;}return matchedDeviceType;},[]);var getMatchedBreakpoint=useCallback(function(event){var _breakpointsTokenAndQ,_breakpointsTokenAndQ2;var matchedBreakpoint=(_breakpointsTokenAndQ=(_breakpointsTokenAndQ2=breakpointsTokenAndQueryCollection.find(function(_ref4){var _ref4$mediaQuery=_ref4.mediaQuery,mediaQuery=_ref4$mediaQuery===void 0?'':_ref4$mediaQuery;if((event==null?void 0:event.media)===mediaQuery){return true;}if(window.matchMedia(mediaQuery).matches){return true;}return false;}))==null?void 0:_breakpointsTokenAndQ2.token)!=null?_breakpointsTokenAndQ:undefined;return matchedBreakpoint;},[breakpointsTokenAndQueryCollection]);var _useState=useState(function(){var matchedBreakpoint=getMatchedBreakpoint();var matchedDeviceType=getMatchedDeviceType(matchedBreakpoint);return {matchedBreakpoint:matchedBreakpoint,matchedDeviceType:matchedDeviceType};}),_useState2=_slicedToArray(_useState,2),breakpointAndDevice=_useState2[0],setBreakpointAndDevice=_useState2[1];useEffect(function(){if(!supportsMatchMedia){return undefined;}var handleMediaQueryChange=function handleMediaQueryChange(event){setBreakpointAndDevice(function(){var matchedBreakpoint=getMatchedBreakpoint(event);var matchedDeviceType=getMatchedDeviceType(matchedBreakpoint);return {matchedBreakpoint:matchedBreakpoint,matchedDeviceType:matchedDeviceType};});};var mediaQueryInstances=breakpointsTokenAndQueryCollection.map(function(_ref5){var _ref5$mediaQuery=_ref5.mediaQuery,mediaQuery=_ref5$mediaQuery===void 0?'':_ref5$mediaQuery;var mediaQueryInstance=window.matchMedia(mediaQuery);if(mediaQueryInstance.addEventListener){mediaQueryInstance.addEventListener('change',handleMediaQueryChange);}else {mediaQueryInstance.addListener(handleMediaQueryChange);}return mediaQueryInstance;});return function(){mediaQueryInstances.forEach(function(mediaQueryInstance){if(mediaQueryInstance.removeEventListener){mediaQueryInstance.removeEventListener('change',handleMediaQueryChange);}else {mediaQueryInstance.removeListener(handleMediaQueryChange);}});};},[breakpointsTokenAndQueryCollection,getMatchedBreakpoint,getMatchedDeviceType,supportsMatchMedia]);return breakpointAndDevice;};
+var deviceType={desktop:'desktop',mobile:'mobile'};var useBreakpoint=function useBreakpoint(_ref){var _window;var breakpoints=_ref.breakpoints;var supportsMatchMedia=typeof document!=='undefined'&&typeof window!=='undefined'&&typeof((_window=window)==null?void 0:_window.matchMedia)==='function';var breakpointsTokenAndQueryCollection=useMemo(function(){return supportsMatchMedia?Object.entries(breakpoints).map(function(_ref2,index,breakpointsArray){var _breakpointsArray;var _ref3=_slicedToArray(_ref2,2),token=_ref3[0],screenSize=_ref3[1];var min=screenSize;var maxValue=(_breakpointsArray=breakpointsArray[index+1])==null?void 0:_breakpointsArray[1];var mediaQuery=getMediaQuery({min:min,max:maxValue?maxValue-1:undefined});return {token:token,screenSize:screenSize,mediaQuery:mediaQuery};}):[];},[breakpoints,supportsMatchMedia]);var getMatchedDeviceType=useCallback(function(matchedBreakpoint){var matchedDeviceType=deviceType.mobile;var platform=getPlatformType();if(platform==='react-native'){matchedDeviceType=deviceType.mobile;}else if(platform==='browser'){if(matchedBreakpoint&&['base','xs','s'].includes(matchedBreakpoint)){matchedDeviceType=deviceType.mobile;}else {matchedDeviceType=deviceType.desktop;}}else if(platform==='node'){matchedDeviceType=deviceType.desktop;}return matchedDeviceType;},[]);var getMatchedBreakpoint=useCallback(function(event){var _breakpointsTokenAndQ,_breakpointsTokenAndQ2;var matchedBreakpoint=(_breakpointsTokenAndQ=(_breakpointsTokenAndQ2=breakpointsTokenAndQueryCollection.find(function(_ref4){var _ref4$mediaQuery=_ref4.mediaQuery,mediaQuery=_ref4$mediaQuery===void 0?'':_ref4$mediaQuery;if((event==null?void 0:event.media)===mediaQuery){return true;}if(window.matchMedia(mediaQuery).matches){return true;}return false;}))==null?void 0:_breakpointsTokenAndQ2.token)!=null?_breakpointsTokenAndQ:undefined;return matchedBreakpoint;},[breakpointsTokenAndQueryCollection]);var _useState=useState(function(){var matchedBreakpoint=getMatchedBreakpoint();var matchedDeviceType=getMatchedDeviceType(matchedBreakpoint);return {matchedBreakpoint:matchedBreakpoint,matchedDeviceType:matchedDeviceType};}),_useState2=_slicedToArray(_useState,2),breakpointAndDevice=_useState2[0],setBreakpointAndDevice=_useState2[1];useEffect(function(){if(!supportsMatchMedia){return undefined;}var handleMediaQueryChange=function handleMediaQueryChange(event){setBreakpointAndDevice(function(){var matchedBreakpoint=getMatchedBreakpoint(event);var matchedDeviceType=getMatchedDeviceType(matchedBreakpoint);return {matchedBreakpoint:matchedBreakpoint,matchedDeviceType:matchedDeviceType};});};var mediaQueryInstances=breakpointsTokenAndQueryCollection.map(function(_ref5){var _ref5$mediaQuery=_ref5.mediaQuery,mediaQuery=_ref5$mediaQuery===void 0?'':_ref5$mediaQuery;var mediaQueryInstance=window.matchMedia(mediaQuery);if(mediaQueryInstance.addEventListener){mediaQueryInstance.addEventListener('change',handleMediaQueryChange);}else {mediaQueryInstance.addListener(handleMediaQueryChange);}return mediaQueryInstance;});return function(){mediaQueryInstances.forEach(function(mediaQueryInstance){if(mediaQueryInstance.removeEventListener){mediaQueryInstance.removeEventListener('change',handleMediaQueryChange);}else {mediaQueryInstance.removeListener(handleMediaQueryChange);}});};},[breakpointsTokenAndQueryCollection,getMatchedBreakpoint,getMatchedDeviceType,supportsMatchMedia]);return breakpointAndDevice;};
 
 var fontFamily={text:'Lato',code:Platform$1.OS==='ios'?'Courier':'monospace'};
 
@@ -4559,5 +4561,5 @@ var Platform;(function(_Platform){})(Platform||(Platform={}));
 
 var castWebType=function castWebType(value){return value;};var castNativeType=function castNativeType(value){return value;};
 
-export { MetaConstants, Platform, castNativeType, castWebType, cloneDeep_1 as cloneDeep, getColorScheme, getComponentId, get_1 as getIn, getOS, getPlatformType, isAndroid, isEmpty_1 as isEmpty, isEqual_1 as isEqual, isPartialMatchObjectKeys, isReactNative, isValidAllowedChildren, makeAccessible, makeBezier, makeBorderSize, makeMotionTime, makeSize, makeSpace, makeTypographySize, merge_1 as merge, metaAttribute, setupMatchMediaMock, testID, toTitleCase, useBreakpoint, useColorScheme, usePrevious };
+export { MetaConstants, Platform, castNativeType, castWebType, cloneDeep_1 as cloneDeep, getColorScheme, getComponentId, get_1 as getIn, getMediaQuery, getOS, getPlatformType, isAndroid, isEmpty_1 as isEmpty, isEqual_1 as isEqual, isPartialMatchObjectKeys, isReactNative, isValidAllowedChildren, makeAccessible, makeBezier, makeBorderSize, makeMotionTime, makeSize, makeSpace, makeTypographySize, merge_1 as merge, metaAttribute, setupMatchMediaMock, testID, toTitleCase, useBreakpoint, useColorScheme, usePrevious };
 //# sourceMappingURL=index.native.js.map