@razorpay/blade 5.1.5 → 5.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +26 -0
- package/build/components/index.d.ts +4 -9
- package/build/components/index.native.d.ts +4 -9
- package/build/components/index.native.js +5 -5
- package/build/components/index.native.js.map +1 -1
- package/build/components/index.web.js +40 -35
- package/build/components/index.web.js.map +1 -1
- package/build/css/bankingThemeDarkDesktop.css +1 -1
- package/build/css/bankingThemeDarkMobile.css +1 -1
- package/build/css/bankingThemeLightDesktop.css +1 -1
- package/build/css/bankingThemeLightMobile.css +1 -1
- package/build/css/paymentThemeDarkDesktop.css +1 -1
- package/build/css/paymentThemeDarkMobile.css +1 -1
- package/build/css/paymentThemeLightDesktop.css +1 -1
- package/build/css/paymentThemeLightMobile.css +1 -1
- package/build/utils/index.native.js +1 -1
- package/build/utils/index.native.js.map +1 -1
- package/build/utils/index.web.js +1 -1
- package/build/utils/index.web.js.map +1 -1
- package/package.json +4 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,31 @@
|
|
|
1
1
|
# @razorpay/blade
|
|
2
2
|
|
|
3
|
+
## 5.2.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 9966931: chore: fix dom nesting in form label component
|
|
8
|
+
- e660831: fix: change acceptable BaseInput `type` from `numeric` to `number`
|
|
9
|
+
|
|
10
|
+
## 5.2.0
|
|
11
|
+
|
|
12
|
+
### Minor Changes
|
|
13
|
+
|
|
14
|
+
- d03de10: feat(Alert): update `isFullWidth` to make inline borderless alerts on desktop
|
|
15
|
+
|
|
16
|
+
> **Warning**
|
|
17
|
+
>
|
|
18
|
+
> `isBorderless` prop is removed and its usage is now replaced by `isFullWidth`. The layout is updated to match the designs and is now centered on desktop resolutions.
|
|
19
|
+
|
|
20
|
+
### Steps for migration:
|
|
21
|
+
|
|
22
|
+
```diff
|
|
23
|
+
<Alert
|
|
24
|
+
- isBorderless
|
|
25
|
+
+ isFullWidth
|
|
26
|
+
/>
|
|
27
|
+
```
|
|
28
|
+
|
|
3
29
|
## 5.1.5
|
|
4
30
|
|
|
5
31
|
### Patch Changes
|
|
@@ -882,7 +882,8 @@ declare type AlertProps = {
|
|
|
882
882
|
*/
|
|
883
883
|
contrast?: ColorContrastTypes;
|
|
884
884
|
/**
|
|
885
|
-
* Makes the Alert span the entire container width, instead of the default max width of `584px
|
|
885
|
+
* Makes the Alert span the entire container width, instead of the default max width of `584px`.
|
|
886
|
+
* This also makes the alert borderless, useful for creating full bleed layouts.
|
|
886
887
|
*
|
|
887
888
|
* @default false
|
|
888
889
|
*/
|
|
@@ -893,12 +894,6 @@ declare type AlertProps = {
|
|
|
893
894
|
* @default neutral
|
|
894
895
|
*/
|
|
895
896
|
intent?: Feedback;
|
|
896
|
-
/**
|
|
897
|
-
* Removes border and border radii, useful for creating full bleed layouts. Automatically sets `isFullWidth` to `true` when enabled.
|
|
898
|
-
*
|
|
899
|
-
* @default false
|
|
900
|
-
*/
|
|
901
|
-
isBorderless?: boolean;
|
|
902
897
|
/**
|
|
903
898
|
* Renders a primary action button and a secondary action link button
|
|
904
899
|
*/
|
|
@@ -913,7 +908,7 @@ declare type AlertProps = {
|
|
|
913
908
|
secondary?: SecondaryAction;
|
|
914
909
|
};
|
|
915
910
|
};
|
|
916
|
-
declare const Alert: ({ description, title, isDismissable, onDismiss, contrast, isFullWidth, intent,
|
|
911
|
+
declare const Alert: ({ description, title, isDismissable, onDismiss, contrast, isFullWidth, intent, actions, }: AlertProps) => ReactElement | null;
|
|
917
912
|
|
|
918
913
|
type Theme$1 = {
|
|
919
914
|
border: Border;
|
|
@@ -1464,7 +1459,7 @@ declare type BaseInputProps = FormInputLabelProps & FormInputValidationProps & {
|
|
|
1464
1459
|
*
|
|
1465
1460
|
* @default text
|
|
1466
1461
|
*/
|
|
1467
|
-
type?: 'text' | 'telephone' | 'email' | 'url' | '
|
|
1462
|
+
type?: 'text' | 'telephone' | 'email' | 'url' | 'number' | 'search' | 'password';
|
|
1468
1463
|
/**
|
|
1469
1464
|
* Used to set the default value of input field when it's uncontrolled
|
|
1470
1465
|
*/
|
|
@@ -882,7 +882,8 @@ declare type AlertProps = {
|
|
|
882
882
|
*/
|
|
883
883
|
contrast?: ColorContrastTypes;
|
|
884
884
|
/**
|
|
885
|
-
* Makes the Alert span the entire container width, instead of the default max width of `584px
|
|
885
|
+
* Makes the Alert span the entire container width, instead of the default max width of `584px`.
|
|
886
|
+
* This also makes the alert borderless, useful for creating full bleed layouts.
|
|
886
887
|
*
|
|
887
888
|
* @default false
|
|
888
889
|
*/
|
|
@@ -893,12 +894,6 @@ declare type AlertProps = {
|
|
|
893
894
|
* @default neutral
|
|
894
895
|
*/
|
|
895
896
|
intent?: Feedback;
|
|
896
|
-
/**
|
|
897
|
-
* Removes border and border radii, useful for creating full bleed layouts. Automatically sets `isFullWidth` to `true` when enabled.
|
|
898
|
-
*
|
|
899
|
-
* @default false
|
|
900
|
-
*/
|
|
901
|
-
isBorderless?: boolean;
|
|
902
897
|
/**
|
|
903
898
|
* Renders a primary action button and a secondary action link button
|
|
904
899
|
*/
|
|
@@ -913,7 +908,7 @@ declare type AlertProps = {
|
|
|
913
908
|
secondary?: SecondaryAction;
|
|
914
909
|
};
|
|
915
910
|
};
|
|
916
|
-
declare const Alert: ({ description, title, isDismissable, onDismiss, contrast, isFullWidth, intent,
|
|
911
|
+
declare const Alert: ({ description, title, isDismissable, onDismiss, contrast, isFullWidth, intent, actions, }: AlertProps) => ReactElement | null;
|
|
917
912
|
|
|
918
913
|
type Theme$1 = {
|
|
919
914
|
border: Border;
|
|
@@ -1464,7 +1459,7 @@ declare type BaseInputProps = FormInputLabelProps & FormInputValidationProps & {
|
|
|
1464
1459
|
*
|
|
1465
1460
|
* @default text
|
|
1466
1461
|
*/
|
|
1467
|
-
type?: 'text' | 'telephone' | 'email' | 'url' | '
|
|
1462
|
+
type?: 'text' | 'telephone' | 'email' | 'url' | 'number' | 'search' | 'password';
|
|
1468
1463
|
/**
|
|
1469
1464
|
* Used to set the default value of input field when it's uncontrolled
|
|
1470
1465
|
*/
|
|
@@ -3199,7 +3199,7 @@ createAssigner(function(object, source, srcIndex) {
|
|
|
3199
3199
|
|
|
3200
3200
|
var toTitleCase=function toTitleCase(inputString){return inputString.toLowerCase().split(' ').map(function(word){return word.charAt(0).toUpperCase()+word.slice(1);}).join(' ');};
|
|
3201
3201
|
|
|
3202
|
-
var deviceType={desktop:'desktop',mobile:'mobile'};var useBreakpoint=function useBreakpoint(_ref){var _window;var breakpoints=_ref.breakpoints;var supportsMatchMedia=typeof document!=='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;};
|
|
3202
|
+
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;};
|
|
3203
3203
|
|
|
3204
3204
|
var fontFamily={text:'Lato',code:Platform.OS==='ios'?'Courier':'monospace'};
|
|
3205
3205
|
|
|
@@ -3215,7 +3215,7 @@ function usePrevious(value){var ref=useRef();useEffect(function(){ref.current=va
|
|
|
3215
3215
|
|
|
3216
3216
|
var castWebType=function castWebType(value){return value;};var castNativeType=function castNativeType(value){return value;};
|
|
3217
3217
|
|
|
3218
|
-
var MAX_WIDTH=584;var getCommonStyles=function getCommonStyles(props){var theme=props.theme,contrastType=props.contrastType,intent=props.intent,isFullWidth=props.isFullWidth,
|
|
3218
|
+
var MAX_WIDTH=584;var getCommonStyles=function getCommonStyles(props){var theme=props.theme,contrastType=props.contrastType,intent=props.intent,isFullWidth=props.isFullWidth,isDesktop=props.isDesktop;var feedbackColors=theme.colors.feedback;return {background:feedbackColors.background[intent][contrastType],padding:isFullWidth?makeSpace(theme.spacing[4])+" "+makeSpace(theme.spacing[5]):makeSpace(theme.spacing[3])+" "+makeSpace(theme.spacing[3])+" "+makeSpace(theme.spacing[4])+" "+makeSpace(theme.spacing[3]),borderRadius:makeBorderSize(isFullWidth?theme.border.radius.none:theme.border.radius.medium),borderColor:feedbackColors.border[intent][contrastType],borderWidth:makeBorderSize(isFullWidth?theme.border.width.none:theme.border.width.thin),borderStyle:'solid',display:'flex',flexDirection:'row',maxWidth:isFullWidth?'auto':makeSize(MAX_WIDTH),alignItems:isFullWidth&&isDesktop?'center':'flex-start'};};
|
|
3219
3219
|
|
|
3220
3220
|
var StyledAlert=styled.View(getCommonStyles);
|
|
3221
3221
|
|
|
@@ -3367,7 +3367,7 @@ var useInteraction=function useInteraction(){var _useState=useState('default'),_
|
|
|
3367
3367
|
|
|
3368
3368
|
var _excluded$2=["currentInteraction","setCurrentInteraction"];var getColorToken=function getColorToken(_ref){var variant=_ref.variant,intent=_ref.intent,contrast=_ref.contrast,element=_ref.element,currentInteraction=_ref.currentInteraction,isDisabled=_ref.isDisabled,isVisited=_ref.isVisited;var state=currentInteraction;if(isDisabled&&variant=='button'){state='disabled';}if(isVisited&&variant=='anchor'&&!intent){state='visited';}if(intent&&state!=='visited'){return "feedback."+intent+".action."+element+".link."+state+"."+contrast+"Contrast";}return "action."+element+".link."+state;};var getProps=function getProps(_ref2){var theme=_ref2.theme,variant=_ref2.variant,currentInteraction=_ref2.currentInteraction,children=_ref2.children,isDisabled=_ref2.isDisabled,intent=_ref2.intent,contrast=_ref2.contrast,isVisited=_ref2.isVisited,target=_ref2.target,size=_ref2.size;var isButton=variant==='button';var props={as:isButton?'button':'a',textDecorationLine:!isButton&¤tInteraction!=='default'?'underline':'none',iconColor:getColorToken({variant:variant,intent:intent,contrast:contrast,element:'icon',currentInteraction:currentInteraction,isDisabled:isDisabled,isVisited:isVisited}),fontSize:size==='medium'?100:75,iconSize:size,iconPadding:children!=null&&children.trim()?'spacing.2':'spacing.0',textColor:getColorToken({variant:variant,intent:intent,contrast:contrast,element:'text',currentInteraction:currentInteraction,isDisabled:isDisabled,isVisited:isVisited}),focusRingColor:get_1(theme.colors,'brand.primary.400'),motionDuration:'duration.2xquick',motionEasing:'easing.standard.effective',cursor:isButton&&isDisabled?'not-allowed':'pointer',disabled:isButton&&isDisabled,role:isButton?'button':'link',defaultRel:target&&target==='_blank'?'noreferrer noopener':undefined,type:isButton?'button':undefined};return props;};var BaseLink=function BaseLink(_ref3){var children=_ref3.children,Icon=_ref3.icon,_ref3$iconPosition=_ref3.iconPosition,iconPosition=_ref3$iconPosition===void 0?'left':_ref3$iconPosition,_ref3$isDisabled=_ref3.isDisabled,isDisabled=_ref3$isDisabled===void 0?false:_ref3$isDisabled,onClick=_ref3.onClick,_ref3$variant=_ref3.variant,variant=_ref3$variant===void 0?'anchor':_ref3$variant,href=_ref3.href,target=_ref3.target,rel=_ref3.rel,intent=_ref3.intent,_ref3$contrast=_ref3.contrast,contrast=_ref3$contrast===void 0?'low':_ref3$contrast,accessibilityLabel=_ref3.accessibilityLabel,className=_ref3.className,style=_ref3.style,_ref3$size=_ref3.size,size=_ref3$size===void 0?'medium':_ref3$size;var _useState=useState(false),_useState2=_slicedToArray(_useState,2),isVisited=_useState2[0],setIsVisited=_useState2[1];var _useInteraction=useInteraction(),currentInteraction=_useInteraction.currentInteraction,setCurrentInteraction=_useInteraction.setCurrentInteraction,syntheticEvents=_objectWithoutProperties(_useInteraction,_excluded$2);var _useTheme=useTheme(),theme=_useTheme.theme;if(!Icon&&!(children!=null&&children.trim())){throw new Error("[Blade: BaseLink]: At least one of icon or text is required to render a link.");}var _getProps=getProps({theme:theme,variant:variant,currentInteraction:currentInteraction,children:children,isDisabled:isDisabled,intent:intent,contrast:contrast,isVisited:isVisited,target:target,size:size}),as=_getProps.as,textDecorationLine=_getProps.textDecorationLine,iconColor=_getProps.iconColor,iconPadding=_getProps.iconPadding,iconSize=_getProps.iconSize,fontSize=_getProps.fontSize,textColor=_getProps.textColor,focusRingColor=_getProps.focusRingColor,motionDuration=_getProps.motionDuration,motionEasing=_getProps.motionEasing,cursor=_getProps.cursor,disabled=_getProps.disabled,role=_getProps.role,defaultRel=_getProps.defaultRel,type=_getProps.type;var handleOnClick=function handleOnClick(event){if(!isVisited&&!intent&&variant==='anchor'){setIsVisited(true);}if(onClick){onClick(event);}};return jsx(StyledLink,_extends({},syntheticEvents,metaAttribute(),{accessibilityProps:_extends({},makeAccessible({role:role,label:accessibilityLabel,disabled:disabled})),variant:variant,as:as,href:href,target:target,rel:rel!=null?rel:defaultRel,onClick:handleOnClick,disabled:disabled,type:type,cursor:cursor,focusRingColor:focusRingColor,motionDuration:motionDuration,motionEasing:motionEasing,setCurrentInteraction:setCurrentInteraction,className:className,style:style,children:jsxs(Box,{display:"flex",flexDirection:"row",className:"content-container",alignItems:"center",children:[Icon&&iconPosition=='left'?jsx(Box,{paddingRight:iconPadding,display:"flex",alignItems:"center",children:jsx(Icon,{color:iconColor,size:iconSize})}):null,jsx(BaseText,{textDecorationLine:textDecorationLine,color:textColor,fontSize:fontSize,textAlign:"center",fontWeight:"bold",children:children}),Icon&&iconPosition=='right'?jsx(Box,{paddingLeft:iconPadding,display:"flex",alignItems:"center",children:jsx(Icon,{color:iconColor,size:iconSize})}):null]})}));};
|
|
3369
3369
|
|
|
3370
|
-
var isReactNative$3=getPlatformType()==='react-native';var
|
|
3370
|
+
var isReactNative$3=getPlatformType()==='react-native';var CloseButtonWrapper=isReactNative$3?Box:Fragment;var intentIconMap={positive:CheckCircleIcon,negative:AlertTriangleIcon,information:InfoIcon,neutral:InfoIcon,notice:AlertTriangleIcon$1};var Alert=function Alert(_ref){var description=_ref.description,title=_ref.title,_ref$isDismissable=_ref.isDismissable,isDismissable=_ref$isDismissable===void 0?true:_ref$isDismissable,onDismiss=_ref.onDismiss,_ref$contrast=_ref.contrast,contrast=_ref$contrast===void 0?'low':_ref$contrast,_ref$isFullWidth=_ref.isFullWidth,isFullWidth=_ref$isFullWidth===void 0?false:_ref$isFullWidth,_ref$intent=_ref.intent,intent=_ref$intent===void 0?'neutral':_ref$intent,actions=_ref.actions;if(!(actions!=null&&actions.primary)&&actions!=null&&actions.secondary){throw new Error('[Blade: Alert]: SecondaryAction is allowed only when PrimaryAction is defined.');}var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var isDesktop=matchedDeviceType==='desktop';var isMobile=!isDesktop;var _useState=useState(true),_useState2=_slicedToArray(_useState,2),isVisible=_useState2[0],setIsVisible=_useState2[1];var contrastType=contrast+"Contrast";var iconSize=isFullWidth?'large':'medium';var textSize=isFullWidth?'medium':'small';var Icon=intentIconMap[intent];var iconOffset='spacing.1';if(isReactNative$3){if(isFullWidth&&!title){iconOffset='spacing.1';}else if(!isFullWidth&&!title){iconOffset='spacing.0';}else if(!isFullWidth&&title){iconOffset='spacing.2';}}else if(isMobile){if(!isFullWidth&&title){iconOffset='spacing.2';}else if(isFullWidth&&!title){iconOffset='spacing.2';}}else if(isFullWidth){iconOffset='spacing.0';}var icon=jsx(Box,{marginTop:iconOffset,display:"flex",children:jsx(Icon,{color:"feedback.icon."+intent+"."+contrastType,size:iconSize})});var _title=title?jsx(Box,{marginBottom:"spacing.2",children:isFullWidth?jsx(Heading,{size:"small",contrast:contrast,children:title}):jsx(Text,{weight:"bold",contrast:contrast,children:title})}):null;var _description=jsx(Box,{marginTop:title||isReactNative$3?'spacing.0':'spacing.1',children:jsx(Text,{size:textSize,contrast:contrast,children:description})});var primaryAction=actions!=null&&actions.primary?jsx(Box,{marginRight:"spacing.5",display:isReactNative$3?'flex':'inline-flex',children:jsx(BaseButton,{size:textSize,onClick:actions.primary.onClick,intent:intent,contrast:contrast,children:actions.primary.text})}):null;var secondaryActionParams=actions!=null&&actions.secondary?{onClick:actions.secondary.onClick}:null;if(actions!=null&&actions.secondary&&secondaryActionParams&&'href'in actions.secondary){secondaryActionParams.href=actions.secondary.href;secondaryActionParams.target=actions.secondary.target;secondaryActionParams.rel=actions.secondary.rel;}var secondaryAction=actions!=null&&actions.secondary?jsx(Box,{marginRight:"spacing.4",display:isReactNative$3?'flex':'inline-flex',children:jsx(BaseLink,_extends({size:textSize,contrast:contrast,intent:intent},secondaryActionParams,{children:actions.secondary.text}))}):null;var showActionsHorizontal=isFullWidth&&isDesktop;var actionsHorizontal=showActionsHorizontal&&(primaryAction||secondaryAction)?jsxs(Box,{flexDirection:"row",alignItems:"center",children:[primaryAction,secondaryAction]}):null;var actionsVertical=!showActionsHorizontal&&(primaryAction||secondaryAction)?jsxs(Box,{marginTop:"spacing.4",flexDirection:"row",alignItems:"center",children:[primaryAction,secondaryAction]}):null;var onClickDismiss=function onClickDismiss(){if(onDismiss){onDismiss();}setIsVisible(false);};var closeButton=isDismissable?jsx(CloseButtonWrapper,{children:jsx(IconButton,{accessibilityLabel:"Dismiss alert",onClick:onClickDismiss,contrast:contrast,size:iconSize,icon:CloseIcon})}):null;var a11yProps=makeAccessible(_extends({role:isReactNative$3||intent==='negative'||intent==='notice'?'alert':'status'},intent==='notice'&&{liveRegion:'polite'}));if(!isVisible){return null;}return jsxs(StyledAlert,_extends({intent:intent,contrastType:contrastType,isFullWidth:isFullWidth,isDesktop:isDesktop},a11yProps,metaAttribute(),{children:[icon,jsxs(Box,{flex:1,paddingLeft:isFullWidth?'spacing.4':'spacing.3',paddingRight:showActionsHorizontal?'spacing.4':'spacing.2',children:[_title,_description,actionsVertical]}),actionsHorizontal,closeButton]}));};
|
|
3371
3371
|
|
|
3372
3372
|
var verticalPadding$1={small:'spacing.0',medium:'spacing.1',large:'spacing.2'};var horizontalPadding$1={small:'spacing.3',medium:'spacing.3',large:'spacing.4'};var iconPadding={small:'spacing.1',medium:'spacing.2',large:'spacing.2'};var iconSize={small:'xsmall',medium:'small',large:'small'};var maxWidth$1={onMobile:100,onDesktop:120};
|
|
3373
3373
|
|
|
@@ -3441,7 +3441,7 @@ var screenReaderStyles={border:0,clip:'rect(0 0 0 0)',clipPath:'inset(50%)',heig
|
|
|
3441
3441
|
|
|
3442
3442
|
var StyledVisuallyHidden=styled.View(screenReaderStyles);var VisuallyHidden=function VisuallyHidden(_ref){var children=_ref.children;return jsx(StyledVisuallyHidden,{children:children});};
|
|
3443
3443
|
|
|
3444
|
-
var FormLabel=function FormLabel(_ref){var _ref$as=_ref.as,as=_ref$as===void 0?'span':_ref$as,_ref$position=_ref.position,position=_ref$position===void 0?'top':_ref$position,_ref$necessityIndicat=_ref.necessityIndicator,necessityIndicator=_ref$necessityIndicat===void 0?'none':_ref$necessityIndicat,accessibilityText=_ref.accessibilityText,children=_ref.children,id=_ref.id,htmlFor=_ref.htmlFor;var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var isDesktop=matchedDeviceType==='desktop';var isReactNative=getPlatformType()==='react-native';var necessityLabel=null;var isLabelLeftPositioned=position==='left'&&isDesktop;if(necessityIndicator==='optional'){necessityLabel=jsx(Text,{variant:"caption",weight:"regular",type:"placeholder",children:"(optional)"});}if(necessityIndicator==='required'){necessityLabel=jsx(BaseText,{lineHeight:"s",fontFamily:"text",fontStyle:"normal",fontSize:75,fontWeight:"bold",color:"feedback.text.negative.lowContrast",children:"*"});}var computedAccessibilityNode=jsxs(VisuallyHidden,{children:[necessityIndicator!=='none'&&jsx(Text,{children:necessityIndicator}),jsx(Text,{children:accessibilityText})]});var textNode=jsxs(Box,{gap:necessityIndicator==='optional'?'spacing.2':'spacing.0',display:"flex",flexDirection:"row",alignItems:"center",flexWrap:"wrap",children:[
|
|
3444
|
+
var FormLabel=function FormLabel(_ref){var _ref$as=_ref.as,as=_ref$as===void 0?'span':_ref$as,_ref$position=_ref.position,position=_ref$position===void 0?'top':_ref$position,_ref$necessityIndicat=_ref.necessityIndicator,necessityIndicator=_ref$necessityIndicat===void 0?'none':_ref$necessityIndicat,accessibilityText=_ref.accessibilityText,children=_ref.children,id=_ref.id,htmlFor=_ref.htmlFor;var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var isDesktop=matchedDeviceType==='desktop';var isReactNative=getPlatformType()==='react-native';var necessityLabel=null;var isLabelLeftPositioned=position==='left'&&isDesktop;if(necessityIndicator==='optional'){necessityLabel=jsx(Text,{variant:"caption",weight:"regular",type:"placeholder",children:"(optional)"});}if(necessityIndicator==='required'){necessityLabel=jsx(BaseText,{lineHeight:"s",fontFamily:"text",fontStyle:"normal",fontSize:75,fontWeight:"bold",color:"feedback.text.negative.lowContrast",children:"*"});}var computedAccessibilityNode=jsxs(VisuallyHidden,{children:[necessityIndicator!=='none'&&jsx(Text,{children:necessityIndicator}),jsx(Text,{children:accessibilityText})]});var textNode=jsxs(Box,{gap:necessityIndicator==='optional'?'spacing.2':'spacing.0',display:"flex",flexDirection:"row",alignItems:"center",flexWrap:"wrap",children:[jsx(Text,{type:"subdued",variant:"body",size:isLabelLeftPositioned?'medium':'small',weight:"bold",children:children}),computedAccessibilityNode,necessityLabel]});if(isReactNative){return jsx(Box,{marginRight:"spacing.5",marginBottom:"spacing.2",children:textNode});}var Component=as;var width=isLabelLeftPositioned&&isDesktop?'120px':'auto';return jsx(Component,{htmlFor:htmlFor,style:{width:width,flexShrink:0,marginRight:makeSpace(theme.spacing[5]),wordBreak:'break-all'},id:id,children:jsx(Box,{marginBottom:isLabelLeftPositioned?'spacing.0':'spacing.2',children:textNode})});};
|
|
3445
3445
|
|
|
3446
3446
|
var StyledSelectorLabel=styled.Pressable(function(_ref){var theme=_ref.theme;return {display:'flex',flexDirection:'row',marginTop:makeSpace(theme.spacing[1]),marginBottom:makeSpace(theme.spacing[1])};});var SelectorLabel=function SelectorLabel(_ref2){var children=_ref2.children,inputProps=_ref2.inputProps;return jsx(StyledSelectorLabel,_extends({},inputProps,{children:children}));};
|
|
3447
3447
|
|
|
@@ -3477,7 +3477,7 @@ var CharacterCounter=function CharacterCounter(_ref){var currentCount=_ref.curre
|
|
|
3477
3477
|
|
|
3478
3478
|
var Spinner=function Spinner(_ref){var _ref2;var label=_ref.label,labelPosition=_ref.labelPosition,accessibilityLabel=_ref.accessibilityLabel,_ref$contrast=_ref.contrast,contrast=_ref$contrast===void 0?'low':_ref$contrast,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size;return jsx(BaseSpinner,{label:label,labelPosition:labelPosition,accessibilityLabel:(_ref2=accessibilityLabel!=null?accessibilityLabel:label)!=null?_ref2:'Loading',contrast:contrast,size:size});};
|
|
3479
3479
|
|
|
3480
|
-
var getKeyboardAndAutocompleteProps=function getKeyboardAndAutocompleteProps(_ref){var _ref$type=_ref.type,type=_ref$type===void 0?'text':_ref$type,keyboardReturnKeyType=_ref.keyboardReturnKeyType,autoCompleteSuggestionType=_ref.autoCompleteSuggestionType;var keyboardAndAutocompleteProps={type:type,keyboardType:'text',keyboardReturnKeyType:'default',autoCompleteSuggestionType:'none'};var keyboardConfigMap={text:{keyboardType:'text',keyboardReturnKeyType:'default',autoCompleteSuggestionType:'none'},telephone:{keyboardType:'telephone',keyboardReturnKeyType:'done',autoCompleteSuggestionType:'telephone'},email:{keyboardType:'email',keyboardReturnKeyType:'done',autoCompleteSuggestionType:'email'},url:{keyboardType:'url',keyboardReturnKeyType:'go',autoCompleteSuggestionType:'none'},
|
|
3480
|
+
var getKeyboardAndAutocompleteProps=function getKeyboardAndAutocompleteProps(_ref){var _ref$type=_ref.type,type=_ref$type===void 0?'text':_ref$type,keyboardReturnKeyType=_ref.keyboardReturnKeyType,autoCompleteSuggestionType=_ref.autoCompleteSuggestionType;var keyboardAndAutocompleteProps={type:type,keyboardType:'text',keyboardReturnKeyType:'default',autoCompleteSuggestionType:'none'};var keyboardConfigMap={text:{keyboardType:'text',keyboardReturnKeyType:'default',autoCompleteSuggestionType:'none'},telephone:{keyboardType:'telephone',keyboardReturnKeyType:'done',autoCompleteSuggestionType:'telephone'},email:{keyboardType:'email',keyboardReturnKeyType:'done',autoCompleteSuggestionType:'email'},url:{keyboardType:'url',keyboardReturnKeyType:'go',autoCompleteSuggestionType:'none'},number:{keyboardType:'decimal',keyboardReturnKeyType:'done',autoCompleteSuggestionType:'none'},search:{keyboardType:'search',keyboardReturnKeyType:'search',autoCompleteSuggestionType:'none'}};var keyboardConfig=keyboardConfigMap[type];keyboardAndAutocompleteProps.keyboardType=keyboardConfig.keyboardType;keyboardAndAutocompleteProps.keyboardReturnKeyType=keyboardReturnKeyType!=null?keyboardReturnKeyType:keyboardConfig.keyboardReturnKeyType;keyboardAndAutocompleteProps.autoCompleteSuggestionType=autoCompleteSuggestionType!=null?autoCompleteSuggestionType:keyboardConfig.autoCompleteSuggestionType;if(type==='number'){keyboardAndAutocompleteProps.type='text';}if(type==='search'){keyboardAndAutocompleteProps.type='text';}return keyboardAndAutocompleteProps;};var isReactNative$2=function isReactNative(_textInputRef){return getPlatformType()==='react-native';};var TextInput=function TextInput(_ref2){var _Boolean;var label=_ref2.label,_ref2$labelPosition=_ref2.labelPosition,labelPosition=_ref2$labelPosition===void 0?'top':_ref2$labelPosition,placeholder=_ref2.placeholder,_ref2$type=_ref2.type,type=_ref2$type===void 0?'text':_ref2$type,defaultValue=_ref2.defaultValue,name=_ref2.name,value=_ref2.value,maxCharacters=_ref2.maxCharacters,_onChange=_ref2.onChange,onBlur=_ref2.onBlur,isDisabled=_ref2.isDisabled,necessityIndicator=_ref2.necessityIndicator,validationState=_ref2.validationState,errorText=_ref2.errorText,helpText=_ref2.helpText,successText=_ref2.successText,isRequired=_ref2.isRequired,icon=_ref2.icon,prefix=_ref2.prefix,showClearButton=_ref2.showClearButton,onClearButtonClick=_ref2.onClearButtonClick,isLoading=_ref2.isLoading,suffix=_ref2.suffix,autoFocus=_ref2.autoFocus,keyboardReturnKeyType=_ref2.keyboardReturnKeyType,autoCompleteSuggestionType=_ref2.autoCompleteSuggestionType;var textInputRef=React__default.useRef(null);var _useState=useState((_Boolean=Boolean(defaultValue!=null?defaultValue:value))!=null?_Boolean:false),_useState2=_slicedToArray(_useState,2),shouldShowClearButton=_useState2[0],setShouldShowClearButton=_useState2[1];var renderInteractionElement=function renderInteractionElement(){if(isLoading){return jsx(Spinner,{accessibilityLabel:"Loading Content"});}if(shouldShowClearButton){return jsx(IconButton,{size:"medium",icon:CloseIcon,onClick:function onClick(){var _textInputRef$current;if(isEmpty_1(value)&&textInputRef.current){if(isReactNative$2(textInputRef.current)){textInputRef.current.clear();textInputRef.current.focus();}else if(textInputRef.current instanceof HTMLInputElement){textInputRef.current.value='';textInputRef.current.focus();}}onClearButtonClick==null?void 0:onClearButtonClick();textInputRef==null?void 0:(_textInputRef$current=textInputRef.current)==null?void 0:_textInputRef$current.focus();setShouldShowClearButton(false);},accessibilityLabel:"Clear Input Content"});}return null;};return jsx(BaseInput,_extends({id:"textinput",componentName:"textinput",ref:textInputRef,label:label,labelPosition:labelPosition,placeholder:placeholder,defaultValue:defaultValue,value:value,name:name,maxCharacters:maxCharacters,onChange:function onChange(_ref3){var name=_ref3.name,value=_ref3.value;if(showClearButton&&value!=null&&value.length){setShouldShowClearButton(true);}if(shouldShowClearButton&&!(value!=null&&value.length)){setShouldShowClearButton(false);}_onChange==null?void 0:_onChange({name:name,value:value});},onBlur:onBlur,isDisabled:isDisabled,necessityIndicator:necessityIndicator,isRequired:isRequired,leadingIcon:icon,prefix:prefix,interactionElement:renderInteractionElement(),suffix:suffix,validationState:validationState,errorText:errorText,helpText:helpText,successText:successText,trailingFooterSlot:function trailingFooterSlot(value){var _value$length;return maxCharacters?jsx(Box,{marginTop:"spacing.2",marginRight:"spacing.1",children:jsx(CharacterCounter,{currentCount:(_value$length=value==null?void 0:value.length)!=null?_value$length:0,maxCount:maxCharacters})}):null;},autoFocus:autoFocus},getKeyboardAndAutocompleteProps({type:type,keyboardReturnKeyType:keyboardReturnKeyType,autoCompleteSuggestionType:autoCompleteSuggestionType})));};
|
|
3481
3481
|
|
|
3482
3482
|
var PasswordInput=function PasswordInput(_ref){var label=_ref.label,_ref$labelPosition=_ref.labelPosition,labelPosition=_ref$labelPosition===void 0?'top':_ref$labelPosition,_ref$showRevealButton=_ref.showRevealButton,showRevealButton=_ref$showRevealButton===void 0?true:_ref$showRevealButton,maxCharacters=_ref.maxCharacters,validationState=_ref.validationState,errorText=_ref.errorText,successText=_ref.successText,helpText=_ref.helpText,_ref$isDisabled=_ref.isDisabled,isDisabled=_ref$isDisabled===void 0?false:_ref$isDisabled,defaultValue=_ref.defaultValue,placeholder=_ref.placeholder,_ref$isRequired=_ref.isRequired,isRequired=_ref$isRequired===void 0?false:_ref$isRequired,_ref$necessityIndicat=_ref.necessityIndicator,necessityIndicator=_ref$necessityIndicat===void 0?'none':_ref$necessityIndicat,value=_ref.value,onChange=_ref.onChange,onFocus=_ref.onFocus,onBlur=_ref.onBlur,name=_ref.name,_ref$autoFocus=_ref.autoFocus,autoFocus=_ref$autoFocus===void 0?false:_ref$autoFocus,_ref$keyboardReturnKe=_ref.keyboardReturnKeyType,keyboardReturnKeyType=_ref$keyboardReturnKe===void 0?'done':_ref$keyboardReturnKe,autoCompleteSuggestionType=_ref.autoCompleteSuggestionType;var _useState=useState(false),_useState2=_slicedToArray(_useState,2),isRevealed=_useState2[0],setIsRevealed=_useState2[1];var isEnabled=!isDisabled;var isRevealedAndEnabled=isRevealed&&isEnabled;var toggleIsRevealed=function toggleIsRevealed(){return setIsRevealed(function(revealed){return !revealed;});};var accessibilityLabel=isRevealedAndEnabled?'Hide password':'Show password';var type=isRevealedAndEnabled?'text':'password';var revealButtonIcon=isRevealedAndEnabled?EyeOffIcon:EyeIcon;var revealButton=showRevealButton&&!isDisabled?jsx(IconButton,{size:"medium",icon:revealButtonIcon,onClick:toggleIsRevealed,accessibilityLabel:accessibilityLabel}):null;var trailingFooterSlot=function trailingFooterSlot(value){var _value$length;return maxCharacters?jsx(Box,{marginTop:"spacing.2",marginRight:"spacing.1",children:jsx(CharacterCounter,{currentCount:(_value$length=value==null?void 0:value.length)!=null?_value$length:0,maxCount:maxCharacters})}):null;};return jsx(BaseInput,{componentName:"password-input",id:"password-field",label:label,labelPosition:labelPosition,type:type,interactionElement:revealButton,trailingFooterSlot:trailingFooterSlot,maxCharacters:maxCharacters,validationState:validationState,errorText:errorText,successText:successText,helpText:helpText,isDisabled:isDisabled,defaultValue:defaultValue,placeholder:placeholder,isRequired:isRequired,necessityIndicator:necessityIndicator,value:value,onChange:onChange,onBlur:onBlur,onFocus:onFocus,name:name,autoFocus:autoFocus,autoCompleteSuggestionType:autoCompleteSuggestionType,keyboardReturnKeyType:keyboardReturnKeyType});};
|
|
3483
3483
|
|