@razorpay/blade 3.8.0 → 5.0.0
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 +62 -0
- package/build/components/index.d.ts +3 -3
- package/build/components/index.native.d.ts +4 -4
- package/build/components/index.native.js +13 -13
- package/build/components/index.native.js.map +1 -1
- package/build/components/index.web.js +147 -121
- 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/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,67 @@
|
|
|
1
1
|
# @razorpay/blade
|
|
2
2
|
|
|
3
|
+
## 5.0.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- fc2a3bf: > **Warning**
|
|
8
|
+
|
|
9
|
+
> This is a breaking change for `Alert` component. The UI is updated to match the designs.
|
|
10
|
+
|
|
11
|
+
feat(Alert): design revamp
|
|
12
|
+
|
|
13
|
+
- `Alert` is updated to match the new designs
|
|
14
|
+
- Bordered variant is now more compact and smaller in size
|
|
15
|
+
- A new `neutral` intent is added. This is the new default if you haven't passed any `intent` explicitly.
|
|
16
|
+
|
|
17
|
+
### Migration guide for consumers
|
|
18
|
+
|
|
19
|
+
- Earlier the default `intent` was `information`, this is now updated to `neutral`. If you were earlier using alerts without explicitly passing `intent` you should update that to continue using `information` as intent:
|
|
20
|
+
|
|
21
|
+
```diff
|
|
22
|
+
<Alert
|
|
23
|
+
+ intent="information"
|
|
24
|
+
/>
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### Patch Changes
|
|
28
|
+
|
|
29
|
+
- bb170bb: fix: set input type='text' when type='search' passed
|
|
30
|
+
|
|
31
|
+
## 4.0.0
|
|
32
|
+
|
|
33
|
+
### Major Changes
|
|
34
|
+
|
|
35
|
+
- d747de4: chore: Badge design changes
|
|
36
|
+
|
|
37
|
+
- Adds a new small size
|
|
38
|
+
- Bumps existing small & medium to medium & large respectively
|
|
39
|
+
- Horizontal padding changes in the large size
|
|
40
|
+
|
|
41
|
+
### Migration Guide for Badge Consumers
|
|
42
|
+
|
|
43
|
+
1. For existing `small` size badge, bump the size from `small` to `medium`
|
|
44
|
+
|
|
45
|
+
```diff
|
|
46
|
+
- <Badge size='small'>...</Badge>
|
|
47
|
+
+ <Badge size='medium'>...</Badge>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
2. For existing `medium` size badge, bump the size from `medium` to `large`
|
|
51
|
+
|
|
52
|
+
```diff
|
|
53
|
+
- <Badge size='medium'>...</Badge>
|
|
54
|
+
+ <Badge size='large'>...</Badge>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
3. For existing badge with no `size` specified, add `size='large'` since default size is `medium`
|
|
58
|
+
> Note: The horizontal padding is changed from `8px` to `12px` for the new `large` size which makes it visually bigger than the existing `medium` size
|
|
59
|
+
|
|
60
|
+
```diff
|
|
61
|
+
- <Badge>...</Badge>
|
|
62
|
+
+ <Badge size='large'>...</Badge>
|
|
63
|
+
```
|
|
64
|
+
|
|
3
65
|
## 3.8.0
|
|
4
66
|
|
|
5
67
|
### Minor Changes
|
|
@@ -890,9 +890,9 @@ declare type AlertProps = {
|
|
|
890
890
|
/**
|
|
891
891
|
* Sets the color tone
|
|
892
892
|
*
|
|
893
|
-
* @default
|
|
893
|
+
* @default neutral
|
|
894
894
|
*/
|
|
895
|
-
intent?:
|
|
895
|
+
intent?: Feedback;
|
|
896
896
|
/**
|
|
897
897
|
* Removes border and border radii, useful for creating full bleed layouts. Automatically sets `isFullWidth` to `true` when enabled.
|
|
898
898
|
*
|
|
@@ -993,7 +993,7 @@ declare type BadgeProps = {
|
|
|
993
993
|
*
|
|
994
994
|
* @default 'medium'
|
|
995
995
|
*/
|
|
996
|
-
size?: 'small' | 'medium';
|
|
996
|
+
size?: 'small' | 'medium' | 'large';
|
|
997
997
|
/**
|
|
998
998
|
* Icon to be displayed in the badge.
|
|
999
999
|
* Accepts a component of type `IconComponent` from Blade.
|
|
@@ -890,9 +890,9 @@ declare type AlertProps = {
|
|
|
890
890
|
/**
|
|
891
891
|
* Sets the color tone
|
|
892
892
|
*
|
|
893
|
-
* @default
|
|
893
|
+
* @default neutral
|
|
894
894
|
*/
|
|
895
|
-
intent?:
|
|
895
|
+
intent?: Feedback;
|
|
896
896
|
/**
|
|
897
897
|
* Removes border and border radii, useful for creating full bleed layouts. Automatically sets `isFullWidth` to `true` when enabled.
|
|
898
898
|
*
|
|
@@ -993,7 +993,7 @@ declare type BadgeProps = {
|
|
|
993
993
|
*
|
|
994
994
|
* @default 'medium'
|
|
995
995
|
*/
|
|
996
|
-
size?: 'small' | 'medium';
|
|
996
|
+
size?: 'small' | 'medium' | 'large';
|
|
997
997
|
/**
|
|
998
998
|
* Icon to be displayed in the badge.
|
|
999
999
|
* Accepts a component of type `IconComponent` from Blade.
|
|
@@ -2022,7 +2022,7 @@ declare type TextForwardedAs = {
|
|
|
2022
2022
|
};
|
|
2023
2023
|
declare const getTextProps: <T extends {
|
|
2024
2024
|
variant: TextVariant;
|
|
2025
|
-
}>({ variant, type, weight, size, contrast, }: Pick<TextProps<T>, "type" | "size" | "weight" | "
|
|
2025
|
+
}>({ variant, type, weight, size, contrast, }: Pick<TextProps<T>, "type" | "size" | "weight" | "variant" | "contrast">) => Omit<BaseTextProps, 'children'> & TextForwardedAs;
|
|
2026
2026
|
declare const Text: <T extends {
|
|
2027
2027
|
variant: TextVariant;
|
|
2028
2028
|
}>({ variant, weight, size, type, contrast, truncateAfterLines, children, color, }: TextProps<T>) => ReactElement;
|
|
@@ -3213,7 +3213,7 @@ function usePrevious(value){var ref=useRef();useEffect(function(){ref.current=va
|
|
|
3213
3213
|
|
|
3214
3214
|
var castWebType=function castWebType(value){return value;};var castNativeType=function castNativeType(value){return value;};
|
|
3215
3215
|
|
|
3216
|
-
var MAX_WIDTH=584;var getCommonStyles=function getCommonStyles(props){var theme=props.theme,contrastType=props.contrastType,intent=props.intent,isFullWidth=props.isFullWidth,isBorderless=props.isBorderless;var _isFullWidth=isFullWidth||isBorderless;var feedbackColors=theme.colors.feedback;return {background:feedbackColors.background[intent][contrastType],padding:makeSpace(theme.spacing[4])+" "+makeSpace(theme.spacing[5]),borderRadius:makeBorderSize(isBorderless?theme.border.radius.none:theme.border.radius.medium),borderColor:feedbackColors.border[intent][contrastType],borderWidth:makeBorderSize(isBorderless?theme.border.width.none:theme.border.width.thin),borderStyle:'solid',display:'flex',flexDirection:'row',maxWidth:_isFullWidth?'auto':makeSize(MAX_WIDTH),alignItems:'flex-start'};};
|
|
3216
|
+
var MAX_WIDTH=584;var getCommonStyles=function getCommonStyles(props){var theme=props.theme,contrastType=props.contrastType,intent=props.intent,isFullWidth=props.isFullWidth,isBorderless=props.isBorderless;var _isFullWidth=isFullWidth||isBorderless;var feedbackColors=theme.colors.feedback;return {background:feedbackColors.background[intent][contrastType],padding:isBorderless?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(isBorderless?theme.border.radius.none:theme.border.radius.medium),borderColor:feedbackColors.border[intent][contrastType],borderWidth:makeBorderSize(isBorderless?theme.border.width.none:theme.border.width.thin),borderStyle:'solid',display:'flex',flexDirection:'row',maxWidth:_isFullWidth?'auto':makeSize(MAX_WIDTH),alignItems:'flex-start'};};
|
|
3217
3217
|
|
|
3218
3218
|
var StyledAlert=styled.View(getCommonStyles);
|
|
3219
3219
|
|
|
@@ -3233,7 +3233,7 @@ var ThemeContext=createContext({theme:null,colorScheme:'light',platform:'onDeskt
|
|
|
3233
3233
|
|
|
3234
3234
|
var BladeProvider=function BladeProvider(_ref){var themeTokens=_ref.themeTokens,initialColorScheme=_ref.colorScheme,children=_ref.children;if(!themeTokens){throw new Error("[BladeProvider]: Expected valid themeTokens of type ThemeTokens to be passed but found "+typeof themeTokens);}if(initialColorScheme&&!colorSchemeNamesInput.includes(initialColorScheme)){throw new Error("[BladeProvider]: Expected color scheme to be one of ["+colorSchemeNamesInput.toString()+"] but received "+initialColorScheme);}var _useColorScheme=useColorScheme(initialColorScheme),colorScheme=_useColorScheme.colorScheme,setColorScheme=_useColorScheme.setColorScheme;var _useBreakpoint=useBreakpoint({breakpoints:themeTokens.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var onColorMode="on"+toTitleCase(colorScheme);var onDeviceType="on"+toTitleCase(matchedDeviceType);var theme=_extends({},themeTokens,{colors:themeTokens.colors[onColorMode],shadows:_extends({},themeTokens.shadows,{color:themeTokens.shadows.color[onColorMode]}),typography:themeTokens.typography[onDeviceType]});var themeContextValue={theme:theme,colorScheme:colorScheme,setColorScheme:setColorScheme,platform:onDeviceType};return jsx(ThemeContext.Provider,{value:themeContextValue,children:jsx(ThemeProvider,{theme:theme,children:children})});};
|
|
3235
3235
|
|
|
3236
|
-
var iconSize={xsmall:8,small:12,medium:16,large:20,xlarge:24,'2xlarge':32};function useIconProps(_ref){var size=_ref.size,color=_ref.color;var _useTheme=useTheme(),theme=_useTheme.theme;var height=makeSize(iconSize[size]);var width=makeSize(iconSize[size]);var iconColor=color==='currentColor'?'currentColor':get_1(theme.colors,color,'');return {height:height,width:width,iconColor:iconColor};}
|
|
3236
|
+
var iconSize$1={xsmall:8,small:12,medium:16,large:20,xlarge:24,'2xlarge':32};function useIconProps(_ref){var size=_ref.size,color=_ref.color;var _useTheme=useTheme(),theme=_useTheme.theme;var height=makeSize(iconSize$1[size]);var width=makeSize(iconSize$1[size]);var iconColor=color==='currentColor'?'currentColor':get_1(theme.colors,color,'');return {height:height,width:width,iconColor:iconColor};}
|
|
3237
3237
|
|
|
3238
3238
|
var ArrowDownIcon=function ArrowDownIcon(_ref){var size=_ref.size,color=_ref.color;var _useIconProps=useIconProps({size:size,color:color}),height=_useIconProps.height,width=_useIconProps.width,iconColor=_useIconProps.iconColor;return jsx(Svg,{height:height,width:width,viewBox:"0 0 24 24",fill:"none",children:jsx(Path,{d:"M13 4a1 1 0 1 0-2 0v13.586l-4.293-4.293a1 1 0 0 0-1.414 1.414l6 6a1 1 0 0 0 1.414 0l6-6a1 1 0 0 0-1.414-1.414L13 17.586V4Z",fill:iconColor})});};
|
|
3239
3239
|
|
|
@@ -3317,13 +3317,13 @@ var Box=styled.View(getBoxStyles);
|
|
|
3317
3317
|
|
|
3318
3318
|
var getBaseTextStyles=function getBaseTextStyles(_ref){var _ref$color=_ref.color,color=_ref$color===void 0?'surface.text.normal.lowContrast':_ref$color,_ref$fontFamily=_ref.fontFamily,fontFamily=_ref$fontFamily===void 0?'text':_ref$fontFamily,_ref$fontSize=_ref.fontSize,fontSize=_ref$fontSize===void 0?200:_ref$fontSize,_ref$fontWeight=_ref.fontWeight,fontWeight=_ref$fontWeight===void 0?'regular':_ref$fontWeight,_ref$fontStyle=_ref.fontStyle,fontStyle=_ref$fontStyle===void 0?'normal':_ref$fontStyle,_ref$textDecorationLi=_ref.textDecorationLine,textDecorationLine=_ref$textDecorationLi===void 0?'none':_ref$textDecorationLi,_ref$lineHeight=_ref.lineHeight,lineHeight=_ref$lineHeight===void 0?'l':_ref$lineHeight,textAlign=_ref.textAlign,theme=_ref.theme;var textColor=get_1(theme.colors,color);var themeFontFamily=theme.typography.fonts.family[fontFamily];var themeFontSize=makeTypographySize(theme.typography.fonts.size[fontSize]);var themeFontWeight=theme.typography.fonts.weight[fontWeight];var themeLineHeight=makeTypographySize(theme.typography.lineHeights[lineHeight]);return {color:textColor,fontFamily:themeFontFamily,fontSize:themeFontSize,fontWeight:themeFontWeight,fontStyle:fontStyle,textDecorationLine:textDecorationLine,lineHeight:themeLineHeight,textAlign:textAlign,margin:0,padding:0};};
|
|
3319
3319
|
|
|
3320
|
-
var _excluded$3=["color","fontFamily","fontSize","fontWeight","fontStyle","textDecorationLine","lineHeight","textAlign","as"];var StyledBaseText
|
|
3320
|
+
var _excluded$3=["color","fontFamily","fontSize","fontWeight","fontStyle","textDecorationLine","lineHeight","textAlign","as"];var StyledBaseText=styled.Text(function(_ref){var color=_ref.color,fontFamily=_ref.fontFamily,fontSize=_ref.fontSize,fontWeight=_ref.fontWeight,fontStyle=_ref.fontStyle,textDecorationLine=_ref.textDecorationLine,lineHeight=_ref.lineHeight,textAlign=_ref.textAlign,as=_ref.as,props=_objectWithoutProperties(_ref,_excluded$3);if(as){throw new Error("[Blade: BaseText]: \"as\" prop is not supported for BaseText on React Native");}else {return getBaseTextStyles({color:color,fontFamily:fontFamily,fontSize:fontSize,fontWeight:fontWeight,fontStyle:fontStyle,textDecorationLine:textDecorationLine,lineHeight:lineHeight,textAlign:textAlign,theme:props.theme});}});var BaseText=function BaseText(_ref2){var id=_ref2.id,color=_ref2.color,fontFamily=_ref2.fontFamily,fontSize=_ref2.fontSize,fontWeight=_ref2.fontWeight,fontStyle=_ref2.fontStyle,textDecorationLine=_ref2.textDecorationLine,lineHeight=_ref2.lineHeight,as=_ref2.as,textAlign=_ref2.textAlign,children=_ref2.children,truncateAfterLines=_ref2.truncateAfterLines,className=_ref2.className,style=_ref2.style,_ref2$accessibilityPr=_ref2.accessibilityProps,accessibilityProps=_ref2$accessibilityPr===void 0?{}:_ref2$accessibilityPr;return jsx(StyledBaseText,_extends({color:color,fontFamily:fontFamily,fontSize:fontSize,fontWeight:fontWeight,fontStyle:fontStyle,textDecorationLine:textDecorationLine,lineHeight:lineHeight,as:as,textAlign:textAlign,numberOfLines:truncateAfterLines,className:className,style:style,id:id},makeAccessible(accessibilityProps),{children:children}));};
|
|
3321
3321
|
|
|
3322
3322
|
var getProps$3=function getProps(_ref){var size=_ref.size,type=_ref.type,contrast=_ref.contrast;var isPlatformWeb=getPlatformType()==='browser'||getPlatformType()==='node';var colorContrast=contrast?contrast+"Contrast":'lowContrast';var props={color:"surface.text."+(type!=null?type:'normal')+"."+colorContrast,fontSize:600,fontWeight:'bold',fontStyle:'normal',lineHeight:'4xl',fontFamily:'text',accessibilityProps:isPlatformWeb?{}:{role:'heading'}};if(size==='small'){props.fontSize=600;props.lineHeight='4xl';props.as=isPlatformWeb?'h3':undefined;}else if(size==='medium'){props.fontSize=700;props.lineHeight='4xl';props.as=isPlatformWeb?'h2':undefined;}else if(size==='large'){props.fontSize=1000;props.lineHeight='6xl';props.as=isPlatformWeb?'h1':undefined;}return props;};var Title=function Title(_ref2){var _ref2$size=_ref2.size,size=_ref2$size===void 0?'small':_ref2$size,_ref2$type=_ref2.type,type=_ref2$type===void 0?'normal':_ref2$type,_ref2$contrast=_ref2.contrast,contrast=_ref2$contrast===void 0?'low':_ref2$contrast,children=_ref2.children;var props=getProps$3({size:size,type:type,contrast:contrast});return jsx(BaseText,_extends({},props,{children:children}));};
|
|
3323
3323
|
|
|
3324
3324
|
var getProps$2=function getProps(_ref){var variant=_ref.variant,size=_ref.size,type=_ref.type,weight=_ref.weight,contrast=_ref.contrast;var isPlatformWeb=getPlatformType()==='browser'||getPlatformType()==='node';var colorContrast=contrast?contrast+"Contrast":'lowContrast';var props={color:"surface.text."+(type!=null?type:'normal')+"."+colorContrast,fontSize:200,fontWeight:weight!=null?weight:'bold',fontStyle:'normal',lineHeight:'xl',fontFamily:'text',accessibilityProps:isPlatformWeb?{}:{role:'heading'}};if(variant==='regular'){if(!size||size==='small'){props.fontSize=200;props.lineHeight='2xl';props.as=isPlatformWeb?'h6':undefined;}else if(size==='medium'){props.fontSize=300;props.lineHeight='3xl';props.as=isPlatformWeb?'h5':undefined;}else if(size==='large'){props.fontSize=400;props.lineHeight='3xl';props.as=isPlatformWeb?'h4':undefined;}}else if(variant==='subheading'){if(weight==='regular'){throw new Error("[Blade: Heading]: weight cannot be 'regular' when variant is 'subheading'");}if(size){throw new Error("[Blade: Heading]: size prop cannot be added when variant is 'subheading'. Use variant 'regular' or remove size prop");}props.fontSize=75;props.lineHeight='s';props.as=isPlatformWeb?'h6':undefined;}return props;};var Heading=function Heading(_ref2){var _ref2$variant=_ref2.variant,variant=_ref2$variant===void 0?'regular':_ref2$variant,size=_ref2.size,_ref2$type=_ref2.type,type=_ref2$type===void 0?'normal':_ref2$type,_ref2$weight=_ref2.weight,weight=_ref2$weight===void 0?'bold':_ref2$weight,_ref2$contrast=_ref2.contrast,contrast=_ref2$contrast===void 0?'low':_ref2$contrast,children=_ref2.children;var props=getProps$2({variant:variant,size:size,type:type,weight:weight,contrast:contrast});return jsx(BaseText,_extends({},props,{children:children}));};
|
|
3325
3325
|
|
|
3326
|
-
var getTextProps=function getTextProps(_ref){var variant=_ref.variant,type=_ref.type,weight=_ref.weight,size=_ref.size,contrast=_ref.contrast;var isPlatformWeb=getPlatformType()==='browser'||getPlatformType()==='node';var colorContrast=contrast?contrast+"Contrast":'lowContrast';var props={color:"surface.text."+(type!=null?type:'normal')+"."+colorContrast,fontSize:100,fontWeight:weight!=null?weight:'regular',fontStyle:'normal',lineHeight:'l',fontFamily:'text',forwardedAs:isPlatformWeb?'p':undefined};if(variant==='body'){if(size==='small'){props.fontSize=75;props.lineHeight='s';}}else if(variant==='caption'){if(
|
|
3326
|
+
var getTextProps=function getTextProps(_ref){var variant=_ref.variant,type=_ref.type,weight=_ref.weight,size=_ref.size,contrast=_ref.contrast;var isPlatformWeb=getPlatformType()==='browser'||getPlatformType()==='node';var colorContrast=contrast?contrast+"Contrast":'lowContrast';var props={color:"surface.text."+(type!=null?type:'normal')+"."+colorContrast,fontSize:100,fontWeight:weight!=null?weight:'regular',fontStyle:'normal',lineHeight:'l',fontFamily:'text',forwardedAs:isPlatformWeb?'p':undefined};if(variant==='body'){if(size==='small'){props.fontSize=75;props.lineHeight='s';}}else if(variant==='caption'){if(size==='small'){throw new Error("[Blade: Text]: size cannot be 'small' when variant is 'caption'");}props.fontSize=50;props.lineHeight='s';props.fontStyle='italic';}return props;};var StyledText=styled(BaseText)(function(_ref2){var truncateAfterLines=_ref2.truncateAfterLines;if(truncateAfterLines){if(getPlatformType()==='react-native'){return null;}return {overflow:'hidden',display:'-webkit-box','line-clamp':""+truncateAfterLines,'-webkit-line-clamp':""+truncateAfterLines,'-webkit-box-orient':'vertical'};}return {};});var Text=function Text(_ref3){var _ref3$variant=_ref3.variant,variant=_ref3$variant===void 0?'body':_ref3$variant,_ref3$weight=_ref3.weight,weight=_ref3$weight===void 0?'regular':_ref3$weight,_ref3$size=_ref3.size,size=_ref3$size===void 0?'medium':_ref3$size,_ref3$type=_ref3.type,type=_ref3$type===void 0?'normal':_ref3$type,_ref3$contrast=_ref3.contrast,contrast=_ref3$contrast===void 0?'low':_ref3$contrast,truncateAfterLines=_ref3.truncateAfterLines,children=_ref3.children,color=_ref3.color;var props=_extends({truncateAfterLines:truncateAfterLines},getTextProps({variant:variant,type:type,weight:weight,size:size,contrast:contrast}),color?{color:color}:{});return jsx(StyledText,_extends({},props,{children:children}));};
|
|
3327
3327
|
|
|
3328
3328
|
var platformType=getPlatformType();var isPlatformWeb=platformType==='browser'||platformType==='node';var getCodeFontSize=function getCodeFontSize(size){switch(size){case'medium':return 100;default:return 75;}};var CodeContainer=styled(Box)(function(props){var padding=makeSpace(props.theme.spacing[0])+" "+makeSpace(props.theme.spacing[2]);return {padding:padding,backgroundColor:props.theme.colors.brand.gray[400].lowContrast,borderRadius:props.theme.border.radius.medium,display:isPlatformWeb?'inline-block':undefined,lineHeight:makeTypographySize(props.theme.typography.lineHeights.s)};});var Code=function Code(_ref){var children=_ref.children,_ref$size=_ref.size,size=_ref$size===void 0?'small':_ref$size;return jsx(CodeContainer,{size:size,as:isPlatformWeb?'span':undefined,children:jsx(BaseText,{color:"surface.text.subtle.lowContrast",fontFamily:"code",fontSize:getCodeFontSize(size),as:isPlatformWeb?'code':undefined,children:children})});};
|
|
3329
3329
|
|
|
@@ -3331,7 +3331,7 @@ var getBaseButtonStyles=function getBaseButtonStyles(_ref){var defaultBorderColo
|
|
|
3331
3331
|
|
|
3332
3332
|
var StyledPressable=styled(Animated.createAnimatedComponent(Pressable))(function(props){return _extends({},getBaseButtonStyles(props),{alignSelf:'center'});});var StyledBaseButton=function StyledBaseButton(_ref){var onClick=_ref.onClick,_children=_ref.children,minHeight=_ref.minHeight,buttonPaddingTop=_ref.buttonPaddingTop,buttonPaddingBottom=_ref.buttonPaddingBottom,buttonPaddingLeft=_ref.buttonPaddingLeft,buttonPaddingRight=_ref.buttonPaddingRight,isFullWidth=_ref.isFullWidth,disabled=_ref.disabled,defaultBackgroundColor=_ref.defaultBackgroundColor,defaultBorderColor=_ref.defaultBorderColor,hoverBackgroundColor=_ref.hoverBackgroundColor,activeBackgroundColor=_ref.activeBackgroundColor,focusBackgroundColor=_ref.focusBackgroundColor,focusRingColor=_ref.focusRingColor,hoverBorderColor=_ref.hoverBorderColor,activeBorderColor=_ref.activeBorderColor,focusBorderColor=_ref.focusBorderColor,borderWidth=_ref.borderWidth,borderRadius=_ref.borderRadius,motionDuration=_ref.motionDuration,motionEasing=_ref.motionEasing,isLoading=_ref.isLoading,accessibilityProps=_ref.accessibilityProps;var _useTheme=useTheme(),theme=_useTheme.theme;var isPressed=useSharedValue(false);var duration=get_1(theme.motion,motionDuration);var easing=get_1(theme.motion,motionEasing);var animatedStyles=useAnimatedStyle(function(){var _f=function _f(){return {backgroundColor:withTiming(isPressed.value?activeBackgroundColor:defaultBackgroundColor,{duration:duration,easing:easing}),borderColor:withTiming(isPressed.value?activeBorderColor:defaultBorderColor,{duration:duration,easing:easing})};};_f._closure={withTiming:withTiming,isPressed:isPressed,activeBackgroundColor:activeBackgroundColor,defaultBackgroundColor:defaultBackgroundColor,duration:duration,easing:easing,activeBorderColor:activeBorderColor,defaultBorderColor:defaultBorderColor};_f.asString="function _f(){const{withTiming,isPressed,activeBackgroundColor,defaultBackgroundColor,duration,easing,activeBorderColor,defaultBorderColor}=jsThis._closure;{return{backgroundColor:withTiming(isPressed.value?activeBackgroundColor:defaultBackgroundColor,{duration:duration,easing:easing}),borderColor:withTiming(isPressed.value?activeBorderColor:defaultBorderColor,{duration:duration,easing:easing})};}}";_f.__workletHash=6870832376373;_f.__location="/home/runner/work/blade/blade/packages/blade/src/components/Button/BaseButton/StyledBaseButton.native.tsx (46:42)";_f.__optimalization=2;global.__reanimatedWorkletInit(_f);return _f;}());return jsx(StyledPressable,_extends({},accessibilityProps,{isLoading:isLoading,onPress:onClick,style:animatedStyles,minHeight:minHeight,buttonPaddingTop:buttonPaddingTop,buttonPaddingBottom:buttonPaddingBottom,buttonPaddingLeft:buttonPaddingLeft,buttonPaddingRight:buttonPaddingRight,isFullWidth:isFullWidth,disabled:disabled,defaultBackgroundColor:defaultBackgroundColor,defaultBorderColor:defaultBorderColor,hoverBackgroundColor:hoverBackgroundColor,activeBackgroundColor:activeBackgroundColor,focusBackgroundColor:focusBackgroundColor,focusRingColor:focusRingColor,hoverBorderColor:hoverBorderColor,activeBorderColor:activeBorderColor,focusBorderColor:focusBorderColor,borderWidth:borderWidth,borderRadius:borderRadius,motionDuration:motionDuration,motionEasing:motionEasing,children:function children(_ref2){var pressed=_ref2.pressed;isPressed.value=pressed;return _children;}}));};
|
|
3333
3333
|
|
|
3334
|
-
var typography={fonts:{size:{xsmall:75,small:75,medium:100,large:200}},lineHeights:{xsmall:'s',small:'s',medium:'l',large:'m'}};var minHeight
|
|
3334
|
+
var typography={fonts:{size:{xsmall:75,small:75,medium:100,large:200}},lineHeights:{xsmall:'s',small:'s',medium:'l',large:'m'}};var minHeight={xsmall:28,small:32,medium:36,large:48};var buttonPadding={xsmall:{top:0,bottom:0,left:3,right:3},small:{top:0,bottom:0,left:4,right:4},medium:{top:0,bottom:0,left:6,right:6},large:{top:0,bottom:0,left:6,right:6}};var buttonIconOnlyPadding={xsmall:{top:0,bottom:0,left:4,right:4},small:{top:0,bottom:0,left:3,right:3},medium:{top:0,bottom:0,left:3,right:3},large:{top:0,bottom:0,left:4,right:4}};var buttonSizeToIconSizeMap={xsmall:'small',small:'small',medium:'medium',large:'medium'};var buttonIconOnlySizeToIconSizeMap={xsmall:'medium',small:'medium',medium:'large',large:'xlarge'};var buttonSizeToSpinnerSizeMap={xsmall:'small',small:'medium',medium:'medium',large:'large'};var textPadding={xsmall:2,small:2,medium:3,large:3};
|
|
3335
3335
|
|
|
3336
3336
|
function announce(message){AccessibilityInfo.announceForAccessibility(message);}function clearAnnouncer(_assertiveness){console.warn('[Blade LiveAnnouncer]: clearAnnouncer is not needed in react-native');}function destroyAnnouncer(){console.warn('[Blade LiveAnnouncer]: destroyAnnouncer is not needed in react-native');}
|
|
3337
3337
|
|
|
@@ -3343,7 +3343,7 @@ var SpinningBox=function SpinningBox(_ref){var children=_ref.children;var _useTh
|
|
|
3343
3343
|
|
|
3344
3344
|
var getColor=function getColor(_ref){var contrast=_ref.contrast,intent=_ref.intent,theme=_ref.theme;if(intent){return get_1(theme.colors,"feedback."+intent+".action.icon.primary.disabled."+contrast+"Contrast");}else if(contrast=='low'){return get_1(theme.colors,'brand.gray.700.lowContrast');}else {return get_1(theme.colors,'brand.gray.400.lowContrast');}};var BaseSpinner=function BaseSpinner(_ref2){var label=_ref2.label,_ref2$labelPosition=_ref2.labelPosition,labelPosition=_ref2$labelPosition===void 0?'right':_ref2$labelPosition,accessibilityLabel=_ref2.accessibilityLabel,_ref2$contrast=_ref2.contrast,contrast=_ref2$contrast===void 0?'low':_ref2$contrast,intent=_ref2.intent,_ref2$size=_ref2.size,size=_ref2$size===void 0?'medium':_ref2$size;var _useTheme=useTheme(),theme=_useTheme.theme;return jsx(Box,{display:"flex",children:jsxs(Box,_extends({display:"flex",alignItems:"center",flexDirection:labelPosition==='right'?'row':'column'},makeAccessible({label:accessibilityLabel,role:'progressbar'}),{children:[jsx(SpinningBox,{children:jsx(SpinnerIcon,{dimensions:makeSize(dimensions[size]),color:getColor({contrast:contrast,intent:intent,theme:theme})})}),label&&label.trim().length>0?jsx(Box,{marginLeft:labelPosition==='right'?'spacing.3':'spacing.0',marginTop:labelPosition==='bottom'?'spacing.3':'spacing.0',children:jsx(Text,{variant:"body",weight:"regular",type:"subdued",size:"small",contrast:contrast,children:label})}):null]}))});};
|
|
3345
3345
|
|
|
3346
|
-
var getColorToken$1=function getColorToken(_ref){var property=_ref.property,variant=_ref.variant,state=_ref.state,contrast=_ref.contrast,intent=_ref.intent;if(intent&&contrast){return "feedback."+intent+".action."+property+".primary."+state+"."+contrast+"Contrast";}return "action."+property+"."+variant+"."+state;};var getProps$1=function getProps(_ref2){var buttonTypographyTokens=_ref2.buttonTypographyTokens,children=_ref2.children,isDisabled=_ref2.isDisabled,size=_ref2.size,theme=_ref2.theme,variant=_ref2.variant,intent=_ref2.intent,contrast=_ref2.contrast,hasIcon=_ref2.hasIcon;var isIconOnly=hasIcon&&(!children||(children==null?void 0:children.trim().length)===0);var props={iconSize:isIconOnly?buttonIconOnlySizeToIconSizeMap[size]:buttonSizeToIconSizeMap[size],spinnerSize:buttonSizeToSpinnerSizeMap[size],fontSize:buttonTypographyTokens.fonts.size[size],lineHeight:buttonTypographyTokens.lineHeights[size],minHeight:makeSize(minHeight
|
|
3346
|
+
var getColorToken$1=function getColorToken(_ref){var property=_ref.property,variant=_ref.variant,state=_ref.state,contrast=_ref.contrast,intent=_ref.intent;if(intent&&contrast){return "feedback."+intent+".action."+property+".primary."+state+"."+contrast+"Contrast";}return "action."+property+"."+variant+"."+state;};var getProps$1=function getProps(_ref2){var buttonTypographyTokens=_ref2.buttonTypographyTokens,children=_ref2.children,isDisabled=_ref2.isDisabled,size=_ref2.size,theme=_ref2.theme,variant=_ref2.variant,intent=_ref2.intent,contrast=_ref2.contrast,hasIcon=_ref2.hasIcon;var isIconOnly=hasIcon&&(!children||(children==null?void 0:children.trim().length)===0);var props={iconSize:isIconOnly?buttonIconOnlySizeToIconSizeMap[size]:buttonSizeToIconSizeMap[size],spinnerSize:buttonSizeToSpinnerSizeMap[size],fontSize:buttonTypographyTokens.fonts.size[size],lineHeight:buttonTypographyTokens.lineHeights[size],minHeight:makeSize(minHeight[size]),iconPadding:hasIcon&&children!=null&&children.trim()?"spacing."+textPadding[size]:undefined,iconColor:getColorToken$1({property:'icon',variant:variant,contrast:contrast,intent:intent,state:'default'}),textColor:getColorToken$1({property:'text',variant:variant,contrast:contrast,intent:intent,state:'default'}),buttonPaddingTop:isIconOnly?makeSpace(theme.spacing[buttonIconOnlyPadding[size].top]):makeSpace(theme.spacing[buttonPadding[size].top]),buttonPaddingBottom:isIconOnly?makeSpace(theme.spacing[buttonIconOnlyPadding[size].bottom]):makeSpace(theme.spacing[buttonPadding[size].bottom]),buttonPaddingLeft:isIconOnly?makeSpace(theme.spacing[buttonIconOnlyPadding[size].left]):makeSpace(theme.spacing[buttonPadding[size].left]),buttonPaddingRight:isIconOnly?makeSpace(theme.spacing[buttonIconOnlyPadding[size].right]):makeSpace(theme.spacing[buttonPadding[size].right]),text:size==='xsmall'?children==null?void 0:children.trim().toUpperCase():children==null?void 0:children.trim(),defaultBackgroundColor:get_1(theme.colors,getColorToken$1({property:'background',variant:variant,contrast:contrast,intent:intent,state:'default'})),defaultBorderColor:get_1(theme.colors,getColorToken$1({property:'border',variant:variant,contrast:contrast,intent:intent,state:'default'})),hoverBackgroundColor:get_1(theme.colors,getColorToken$1({property:'background',variant:variant,contrast:contrast,intent:intent,state:'hover'})),hoverBorderColor:get_1(theme.colors,getColorToken$1({property:'border',variant:variant,contrast:contrast,intent:intent,state:'hover'})),activeBackgroundColor:get_1(theme.colors,getColorToken$1({property:'background',variant:variant,contrast:contrast,intent:intent,state:'active'})),activeBorderColor:get_1(theme.colors,getColorToken$1({property:'border',variant:variant,contrast:contrast,intent:intent,state:'active'})),focusBackgroundColor:get_1(theme.colors,getColorToken$1({property:'background',variant:variant,contrast:contrast,intent:intent,state:'focus'})),focusBorderColor:get_1(theme.colors,getColorToken$1({property:'border',variant:variant,contrast:contrast,intent:intent,state:'focus'})),focusRingColor:get_1(theme.colors,'brand.primary.400'),borderWidth:makeBorderSize(theme.border.width.thin),borderRadius:makeBorderSize(theme.border.radius.small),motionDuration:'duration.xquick',motionEasing:'easing.standard.effective'};if(isDisabled){var disabledBackgroundColor=get_1(theme.colors,getColorToken$1({property:'background',variant:variant,contrast:contrast,intent:intent,state:'disabled'}));var disabledBorderColor=get_1(theme.colors,getColorToken$1({property:'border',variant:variant,contrast:contrast,intent:intent,state:'disabled'}));props.iconColor=getColorToken$1({property:'icon',variant:variant,contrast:contrast,intent:intent,state:'disabled'});props.textColor=getColorToken$1({property:'text',variant:variant,contrast:contrast,intent:intent,state:'disabled'});props.defaultBackgroundColor=disabledBackgroundColor;props.defaultBorderColor=disabledBorderColor;props.hoverBackgroundColor=disabledBackgroundColor;props.hoverBorderColor=disabledBorderColor;props.activeBackgroundColor=disabledBackgroundColor;props.activeBorderColor=disabledBorderColor;props.focusBackgroundColor=disabledBackgroundColor;props.focusBorderColor=disabledBorderColor;}return props;};var ButtonContent=styled(Box)(function(_ref3){var isHidden=_ref3.isHidden;return {opacity:isHidden?0:1};});var BaseButton=function BaseButton(_ref4){var _ref4$variant=_ref4.variant,variant=_ref4$variant===void 0?'primary':_ref4$variant,intent=_ref4.intent,_ref4$contrast=_ref4.contrast,contrast=_ref4$contrast===void 0?'low':_ref4$contrast,_ref4$size=_ref4.size,size=_ref4$size===void 0?'medium':_ref4$size,Icon=_ref4.icon,_ref4$iconPosition=_ref4.iconPosition,iconPosition=_ref4$iconPosition===void 0?'left':_ref4$iconPosition,_ref4$isDisabled=_ref4.isDisabled,isDisabled=_ref4$isDisabled===void 0?false:_ref4$isDisabled,_ref4$isFullWidth=_ref4.isFullWidth,isFullWidth=_ref4$isFullWidth===void 0?false:_ref4$isFullWidth,_ref4$isLoading=_ref4.isLoading,isLoading=_ref4$isLoading===void 0?false:_ref4$isLoading,onClick=_ref4.onClick,_ref4$type=_ref4.type,type=_ref4$type===void 0?'button':_ref4$type,children=_ref4.children,accessibilityLabel=_ref4.accessibilityLabel;var disabled=isLoading||isDisabled;var _useTheme=useTheme(),theme=_useTheme.theme;if(!Icon&&!(children!=null&&children.trim())){throw new Error("[Blade: BaseButton]: At least one of icon or text is required to render a button.");}var prevLoading=usePrevious(isLoading);useEffect(function(){if(isLoading)announce('Started loading');if(!isLoading&&prevLoading)announce('Stopped loading');},[isLoading,prevLoading]);var _getProps=getProps$1({buttonTypographyTokens:typography,children:children,isDisabled:disabled,size:size,variant:variant,theme:theme,intent:intent,contrast:contrast,hasIcon:Boolean(Icon)}),activeBorderColor=_getProps.activeBorderColor,activeBackgroundColor=_getProps.activeBackgroundColor,defaultBorderColor=_getProps.defaultBorderColor,defaultBackgroundColor=_getProps.defaultBackgroundColor,minHeight=_getProps.minHeight,buttonPaddingTop=_getProps.buttonPaddingTop,buttonPaddingBottom=_getProps.buttonPaddingBottom,buttonPaddingLeft=_getProps.buttonPaddingLeft,buttonPaddingRight=_getProps.buttonPaddingRight,focusBorderColor=_getProps.focusBorderColor,focusBackgroundColor=_getProps.focusBackgroundColor,focusRingColor=_getProps.focusRingColor,fontSize=_getProps.fontSize,hoverBorderColor=_getProps.hoverBorderColor,hoverBackgroundColor=_getProps.hoverBackgroundColor,iconColor=_getProps.iconColor,iconSize=_getProps.iconSize,iconPadding=_getProps.iconPadding,spinnerSize=_getProps.spinnerSize,lineHeight=_getProps.lineHeight,text=_getProps.text,textColor=_getProps.textColor,borderWidth=_getProps.borderWidth,borderRadius=_getProps.borderRadius,motionDuration=_getProps.motionDuration,motionEasing=_getProps.motionEasing;return jsxs(StyledBaseButton,{accessibilityProps:_extends({},makeAccessible({role:'button',label:accessibilityLabel})),isLoading:isLoading,disabled:disabled,activeBorderColor:activeBorderColor,activeBackgroundColor:activeBackgroundColor,defaultBorderColor:defaultBorderColor,minHeight:minHeight,buttonPaddingTop:buttonPaddingTop,buttonPaddingBottom:buttonPaddingBottom,buttonPaddingLeft:buttonPaddingLeft,buttonPaddingRight:buttonPaddingRight,defaultBackgroundColor:defaultBackgroundColor,focusBorderColor:focusBorderColor,focusBackgroundColor:focusBackgroundColor,focusRingColor:focusRingColor,hoverBorderColor:hoverBorderColor,hoverBackgroundColor:hoverBackgroundColor,isFullWidth:isFullWidth,onClick:onClick,type:type,borderWidth:borderWidth,borderRadius:borderRadius,motionDuration:motionDuration,motionEasing:motionEasing,children:[isLoading?jsx(Box,{display:"flex",justifyContent:"center",alignItems:"center",position:"absolute",top:0,left:0,bottom:0,right:0,children:jsx(BaseSpinner,{accessibilityLabel:"Loading",size:spinnerSize,intent:intent,contrast:contrast})}):null,jsxs(ButtonContent,{display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"center",flex:1,isHidden:isLoading,children:[Icon&&iconPosition=='left'?jsx(Box,{paddingRight:iconPadding,display:"flex",justifyContent:"center",alignItems:"center",children:jsx(Icon,{size:iconSize,color:iconColor})}):null,text?jsx(BaseText,{lineHeight:lineHeight,fontSize:fontSize,fontWeight:"bold",textAlign:"center",color:textColor,children:text}):null,Icon&&iconPosition=='right'?jsx(Box,{paddingLeft:iconPadding,display:"flex",justifyContent:"center",alignItems:"center",children:jsx(Icon,{size:iconSize,color:iconColor})}):null]})]});};
|
|
3347
3347
|
|
|
3348
3348
|
var getStyledLinkStyles=function getStyledLinkStyles(_ref){var cursor=_ref.cursor;return {padding:0,backgroundColor:'transparent',outline:'none',textDecoration:'none',border:'none',cursor:cursor};};
|
|
3349
3349
|
|
|
@@ -3353,15 +3353,15 @@ var useInteraction=function useInteraction(){var _useState=useState('default'),_
|
|
|
3353
3353
|
|
|
3354
3354
|
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,{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]})}));};
|
|
3355
3355
|
|
|
3356
|
-
var isReactNative$3=getPlatformType()==='react-native';var SecondaryActionWrapper=isReactNative$3?Box:Fragment;var CloseButtonWrapper=isReactNative$3?Box:Fragment;var intentIconMap={positive:CheckCircleIcon,negative:AlertTriangleIcon,information:
|
|
3356
|
+
var isReactNative$3=getPlatformType()==='react-native';var SecondaryActionWrapper=isReactNative$3?Box:Fragment;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,_ref$isBorderless=_ref.isBorderless,isBorderless=_ref$isBorderless===void 0?false:_ref$isBorderless,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 _useState=useState(true),_useState2=_slicedToArray(_useState,2),isVisible=_useState2[0],setIsVisible=_useState2[1];var contrastType=contrast+"Contrast";var iconSize=isBorderless?'large':'medium';var textSize=isBorderless?'medium':'small';var Icon=intentIconMap[intent];var icon=jsx(Box,{marginTop:"spacing.1",display:"flex",children:jsx(Icon,{color:"feedback.icon."+intent+"."+contrastType,size:iconSize})});var _title=title?jsx(Box,{marginBottom:"spacing.2",children:isBorderless?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(SecondaryActionWrapper,{children:jsx(BaseLink,_extends({size:textSize,contrast:contrast,intent:intent},secondaryActionParams,{children:actions.secondary.text}))}):null;var _actions=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,isBorderless:isBorderless},a11yProps,{children:[icon,jsxs(Box,{flex:1,paddingLeft:isBorderless?'spacing.4':'spacing.3',paddingRight:"spacing.2",children:[_title,_description,_actions]}),closeButton]}));};
|
|
3357
3357
|
|
|
3358
|
-
var
|
|
3358
|
+
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};
|
|
3359
3359
|
|
|
3360
|
-
var getStyledBadgeStyles=function getStyledBadgeStyles(_ref){var theme=_ref.theme,
|
|
3360
|
+
var getStyledBadgeStyles=function getStyledBadgeStyles(_ref){var theme=_ref.theme,platform=_ref.platform,backgroundColor=_ref.backgroundColor;return {backgroundColor:get_1(theme.colors,backgroundColor),borderRadius:makeBorderSize(theme.border.radius.max),maxWidth:makeSize(maxWidth$1[platform]),display:'flex',flexWrap:'nowrap'};};
|
|
3361
3361
|
|
|
3362
3362
|
var StyledBadge=styled.View(function(props){return _extends({},getStyledBadgeStyles(props),{alignSelf:'center'});});
|
|
3363
3363
|
|
|
3364
|
-
var isFeedbackVariant=function isFeedbackVariant(variant){var feedbackVariants=['information','negative','neutral','notice','positive'];return feedbackVariants.includes(variant);};var getColorProps$1=function getColorProps(_ref){var variant=_ref.variant,contrast=_ref.contrast;var props={iconColor:'feedback.icon.neutral.lowContrast',textColor:'feedback.text.neutral.lowContrast',backgroundColor:'feedback.background.neutral.lowContrast'};if(isFeedbackVariant(variant)){props.iconColor="feedback.icon."+variant+"."+contrast+"Contrast";props.textColor="feedback.text."+variant+"."+contrast+"Contrast";props.backgroundColor="feedback.background."+variant+"."+contrast+"Contrast";}else {props.iconColor="badge.icon."+variant+"."+contrast+"Contrast";props.textColor="badge.text."+variant+"."+contrast+"Contrast";props.backgroundColor="badge.background."+variant+"."+contrast+"Contrast";}return props;};var
|
|
3364
|
+
var isFeedbackVariant=function isFeedbackVariant(variant){var feedbackVariants=['information','negative','neutral','notice','positive'];return feedbackVariants.includes(variant);};var getColorProps$1=function getColorProps(_ref){var variant=_ref.variant,contrast=_ref.contrast;var props={iconColor:'feedback.icon.neutral.lowContrast',textColor:'feedback.text.neutral.lowContrast',backgroundColor:'feedback.background.neutral.lowContrast'};if(isFeedbackVariant(variant)){props.iconColor="feedback.icon."+variant+"."+contrast+"Contrast";props.textColor="feedback.text."+variant+"."+contrast+"Contrast";props.backgroundColor="feedback.background."+variant+"."+contrast+"Contrast";}else {props.iconColor="badge.icon."+variant+"."+contrast+"Contrast";props.textColor="badge.text."+variant+"."+contrast+"Contrast";props.backgroundColor="badge.background."+variant+"."+contrast+"Contrast";}return props;};var Badge=function Badge(_ref2){var children=_ref2.children,_ref2$contrast=_ref2.contrast,contrast=_ref2$contrast===void 0?'low':_ref2$contrast,_ref2$fontWeight=_ref2.fontWeight,fontWeight=_ref2$fontWeight===void 0?'regular':_ref2$fontWeight,Icon=_ref2.icon,_ref2$size=_ref2.size,size=_ref2$size===void 0?'medium':_ref2$size,_ref2$variant=_ref2.variant,variant=_ref2$variant===void 0?'neutral':_ref2$variant;if(!(children!=null&&children.trim())){throw new Error('[Blade: Badge]: Text as children is required for Badge.');}var _useTheme=useTheme(),platform=_useTheme.platform;var _getColorProps=getColorProps$1({variant:variant,contrast:contrast}),backgroundColor=_getColorProps.backgroundColor,iconColor=_getColorProps.iconColor,textColor=_getColorProps.textColor;return jsx(StyledBadge,{backgroundColor:backgroundColor,size:size,platform:platform,children:jsxs(Box,{paddingRight:horizontalPadding$1[size],paddingLeft:horizontalPadding$1[size],paddingTop:verticalPadding$1[size],paddingBottom:verticalPadding$1[size],display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center",overflow:"hidden",children:[Icon?jsx(Box,{paddingRight:Boolean(Icon)?iconPadding[size]:'spacing.0',display:"flex",children:jsx(Icon,{color:iconColor,size:iconSize[size]})}):null,jsx(Text,_extends({},size==='small'?{variant:'caption'}:{variant:'body',size:'small'},{type:"normal",weight:fontWeight,truncateAfterLines:1,color:textColor,children:children}))]})});};
|
|
3365
3365
|
|
|
3366
3366
|
var Button=function Button(_ref){var children=_ref.children,icon=_ref.icon,_ref$iconPosition=_ref.iconPosition,iconPosition=_ref$iconPosition===void 0?'left':_ref$iconPosition,_ref$isDisabled=_ref.isDisabled,isDisabled=_ref$isDisabled===void 0?false:_ref$isDisabled,_ref$isFullWidth=_ref.isFullWidth,isFullWidth=_ref$isFullWidth===void 0?false:_ref$isFullWidth,_ref$isLoading=_ref.isLoading,isLoading=_ref$isLoading===void 0?false:_ref$isLoading,onClick=_ref.onClick,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,_ref$type=_ref.type,type=_ref$type===void 0?'button':_ref$type,_ref$variant=_ref.variant,variant=_ref$variant===void 0?'primary':_ref$variant,accessibilityLabel=_ref.accessibilityLabel;return jsx(BaseButton,_extends({},icon?{icon:icon,children:children}:{children:children},{accessibilityLabel:accessibilityLabel,iconPosition:iconPosition,isDisabled:isDisabled,isFullWidth:isFullWidth,onClick:onClick,size:size,type:type,variant:variant,isLoading:isLoading}));};
|
|
3367
3367
|
|
|
@@ -3437,7 +3437,7 @@ var SelectorSupportText=function SelectorSupportText(_ref){var children=_ref.chi
|
|
|
3437
3437
|
|
|
3438
3438
|
var SelectorInput=function SelectorInput(_props){return jsx(Fragment$1,{});};
|
|
3439
3439
|
|
|
3440
|
-
var Checkbox=function Checkbox(_ref){var _groupProps$state,_groupProps$size;var defaultChecked=_ref.defaultChecked,validationState=_ref.validationState,isChecked=_ref.isChecked,isDisabled=_ref.isDisabled,isIndeterminate=_ref.isIndeterminate,isRequired=_ref.isRequired,name=_ref.name,onChange=_ref.onChange,value=_ref.value,children=_ref.children,helpText=_ref.helpText,errorText=_ref.errorText,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size;var groupProps=useCheckboxGroupContext();var hasValidationState=!isUndefined_1(validationState);var hasName=!isUndefined_1(name);var hasDefaultChecked=!isUndefined_1(defaultChecked);var hasIsChecked=!isUndefined_1(isChecked);var hasOnChange=!isUndefined_1(onChange);if((hasValidationState||hasName||hasDefaultChecked||hasIsChecked||hasOnChange)&&!isEmpty_1(groupProps)){var props=[hasValidationState?'validationState':undefined,hasName?'name':undefined,hasDefaultChecked?'defaultChecked':undefined,hasIsChecked?'isChecked':undefined,hasOnChange?'onChange':undefined].filter(Boolean).join(',');throw new Error("[Blade Checkbox]: Cannot set `"+props+"` on <Checkbox /> when it's inside <CheckboxGroup />, Please set it on the <CheckboxGroup /> itself");}if(!value&&!isEmpty_1(groupProps)){throw new Error("[Blade Checkbox]: <CheckboxGroup /> requires that you pass unique \"value\" prop to each <Checkbox />\n <CheckboxGroup>\n <Checkbox value=\"apple\">Apple</Checkbox>\n <Checkbox value=\"mango\">Mango</Checkbox>\n </CheckboxGroup>\n ");}var _validationState=validationState!=null?validationState:groupProps==null?void 0:groupProps.validationState;var _hasError=_validationState==='error';var _isDisabled=isDisabled!=null?isDisabled:groupProps==null?void 0:groupProps.isDisabled;var _name=name!=null?name:groupProps==null?void 0:groupProps.name;var _isChecked=isChecked!=null?isChecked:groupProps==null?void 0:(_groupProps$state=groupProps.state)==null?void 0:_groupProps$state.isChecked(value);var _size=(_groupProps$size=groupProps.size)!=null?_groupProps$size:size;var isSmall=_size==='small';var showSupportingText=validationState!=='error'&&helpText;var handleChange=function handleChange(_ref2){var isChecked=_ref2.isChecked,event=_ref2.event,value=_ref2.value;if(isChecked){var _groupProps$state2;groupProps==null?void 0:(_groupProps$state2=groupProps.state)==null?void 0:_groupProps$state2.addValue(value);}else {var _groupProps$state3;groupProps==null?void 0:(_groupProps$state3=groupProps.state)==null?void 0:_groupProps$state3.removeValue(value);}onChange==null?void 0:onChange({isChecked:isChecked,event:event,value:value});};var _useCheckbox=useCheckbox({defaultChecked:defaultChecked,isChecked:_isChecked,isIndeterminate:isIndeterminate,hasError:_hasError,hasHelperText:Boolean(showSupportingText),isDisabled:_isDisabled,isRequired:isRequired,name:_name,value:value,onChange:handleChange}),state=_useCheckbox.state,ids=_useCheckbox.ids,inputProps=_useCheckbox.inputProps;return jsxs(Box,{children:[jsx(SelectorLabel,{inputProps:state.isReactNative?inputProps:{},children:jsxs(Box,{display:"flex",flexDirection:"column",children:[jsxs(Box,{display:"flex",alignItems:"center",flexDirection:"row",children:[jsx(SelectorInput,{isChecked:state.isChecked||Boolean(isIndeterminate),isDisabled:_isDisabled,
|
|
3440
|
+
var Checkbox=function Checkbox(_ref){var _groupProps$state,_groupProps$size;var defaultChecked=_ref.defaultChecked,validationState=_ref.validationState,isChecked=_ref.isChecked,isDisabled=_ref.isDisabled,isIndeterminate=_ref.isIndeterminate,isRequired=_ref.isRequired,name=_ref.name,onChange=_ref.onChange,value=_ref.value,children=_ref.children,helpText=_ref.helpText,errorText=_ref.errorText,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size;var groupProps=useCheckboxGroupContext();var hasValidationState=!isUndefined_1(validationState);var hasName=!isUndefined_1(name);var hasDefaultChecked=!isUndefined_1(defaultChecked);var hasIsChecked=!isUndefined_1(isChecked);var hasOnChange=!isUndefined_1(onChange);if((hasValidationState||hasName||hasDefaultChecked||hasIsChecked||hasOnChange)&&!isEmpty_1(groupProps)){var props=[hasValidationState?'validationState':undefined,hasName?'name':undefined,hasDefaultChecked?'defaultChecked':undefined,hasIsChecked?'isChecked':undefined,hasOnChange?'onChange':undefined].filter(Boolean).join(',');throw new Error("[Blade Checkbox]: Cannot set `"+props+"` on <Checkbox /> when it's inside <CheckboxGroup />, Please set it on the <CheckboxGroup /> itself");}if(!value&&!isEmpty_1(groupProps)){throw new Error("[Blade Checkbox]: <CheckboxGroup /> requires that you pass unique \"value\" prop to each <Checkbox />\n <CheckboxGroup>\n <Checkbox value=\"apple\">Apple</Checkbox>\n <Checkbox value=\"mango\">Mango</Checkbox>\n </CheckboxGroup>\n ");}var _validationState=validationState!=null?validationState:groupProps==null?void 0:groupProps.validationState;var _hasError=_validationState==='error';var _isDisabled=isDisabled!=null?isDisabled:groupProps==null?void 0:groupProps.isDisabled;var _name=name!=null?name:groupProps==null?void 0:groupProps.name;var _isChecked=isChecked!=null?isChecked:groupProps==null?void 0:(_groupProps$state=groupProps.state)==null?void 0:_groupProps$state.isChecked(value);var _size=(_groupProps$size=groupProps.size)!=null?_groupProps$size:size;var isSmall=_size==='small';var showSupportingText=validationState!=='error'&&helpText;var handleChange=function handleChange(_ref2){var isChecked=_ref2.isChecked,event=_ref2.event,value=_ref2.value;if(isChecked){var _groupProps$state2;groupProps==null?void 0:(_groupProps$state2=groupProps.state)==null?void 0:_groupProps$state2.addValue(value);}else {var _groupProps$state3;groupProps==null?void 0:(_groupProps$state3=groupProps.state)==null?void 0:_groupProps$state3.removeValue(value);}onChange==null?void 0:onChange({isChecked:isChecked,event:event,value:value});};var _useCheckbox=useCheckbox({defaultChecked:defaultChecked,isChecked:_isChecked,isIndeterminate:isIndeterminate,hasError:_hasError,hasHelperText:Boolean(showSupportingText),isDisabled:_isDisabled,isRequired:isRequired,name:_name,value:value,onChange:handleChange}),state=_useCheckbox.state,ids=_useCheckbox.ids,inputProps=_useCheckbox.inputProps;return jsxs(Box,{children:[jsx(SelectorLabel,{inputProps:state.isReactNative?inputProps:{},children:jsxs(Box,{display:"flex",flexDirection:"column",children:[jsxs(Box,{display:"flex",alignItems:"center",flexDirection:"row",children:[jsx(SelectorInput,{isChecked:state.isChecked||Boolean(isIndeterminate),isDisabled:_isDisabled,hasError:_hasError,inputProps:inputProps}),jsx(CheckboxIcon,{size:_size,isChecked:state.isChecked,isIndeterminate:isIndeterminate,isDisabled:_isDisabled,isNegative:_hasError}),jsx(SelectorTitle,{size:_size,isDisabled:_isDisabled,children:children})]}),jsx(Box,{marginLeft:isSmall?'spacing.6':'spacing.7',children:showSupportingText&&jsx(SelectorSupportText,{id:ids==null?void 0:ids.helpTextId,children:helpText})})]})}),jsx(FormHint,{errorText:errorText,errorTextId:ids==null?void 0:ids.errorTextId,type:validationState==='error'?'error':'help'})]});};
|
|
3441
3441
|
|
|
3442
3442
|
var useCheckboxGroup=function useCheckboxGroup(_ref){var value=_ref.value,defaultValue=_ref.defaultValue,isDisabled=_ref.isDisabled,labelPosition=_ref.labelPosition,_onChange=_ref.onChange,validationState=_ref.validationState,name=_ref.name,size=_ref.size;var _useTheme=useTheme(),platform=_useTheme.platform;var _useFormId=useFormId('checkbox-group'),labelId=_useFormId.labelId;var _useControllableState=useControllableState({value:value,defaultValue:defaultValue||[],onChange:function onChange(values){return _onChange==null?void 0:_onChange({values:values,name:name});}}),_useControllableState2=_slicedToArray(_useControllableState,2),checkedValues=_useControllableState2[0],setValue=_useControllableState2[1];var state=React__default.useMemo(function(){return {value:checkedValues,setValue:function(_setValue){function setValue(_x){return _setValue.apply(this,arguments);}setValue.toString=function(){return _setValue.toString();};return setValue;}(function(value){if(isDisabled){return;}setValue(function(){return value;});}),isChecked:function isChecked(value){return checkedValues.includes(value);},addValue:function addValue(value){if(isDisabled){return;}if(!checkedValues.includes(value)){setValue(function(){return checkedValues.concat(value);});}},removeValue:function removeValue(value){if(isDisabled){return;}if(checkedValues.includes(value)){setValue(function(){return checkedValues.filter(function(existingValue){return existingValue!==value;});});}}};},[checkedValues,isDisabled,setValue]);var contextValue=React__default.useMemo(function(){return {validationState:validationState,isDisabled:isDisabled,labelPosition:platform==='onMobile'?'top':labelPosition,name:name,state:state,size:size};},[validationState,isDisabled,platform,labelPosition,name,state,size]);return {state:state,contextValue:contextValue,ids:{labelId:labelId}};};
|
|
3443
3443
|
|
|
@@ -3461,7 +3461,7 @@ var autoCompleteSuggestionTypeValues=['none','name','email','username','password
|
|
|
3461
3461
|
|
|
3462
3462
|
var CharacterCounter=function CharacterCounter(_ref){var currentCount=_ref.currentCount,maxCount=_ref.maxCount;return jsxs(Text,{variant:"caption",weight:"regular",type:"muted",children:[currentCount,"/",maxCount]});};
|
|
3463
3463
|
|
|
3464
|
-
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'},numeric:{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==='numeric'){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(InfoIcon,{size:"medium",color:"surface.text.subtle.lowContrast"});}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",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})));};
|
|
3464
|
+
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'},numeric:{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==='numeric'){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(InfoIcon,{size:"medium",color:"surface.text.subtle.lowContrast"});}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",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})));};
|
|
3465
3465
|
|
|
3466
3466
|
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,{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});};
|
|
3467
3467
|
|
|
@@ -3489,7 +3489,7 @@ var CheckedIcon=function CheckedIcon(_ref){var color=_ref.color,size=_ref.size;v
|
|
|
3489
3489
|
|
|
3490
3490
|
var RadioGroupContext=React__default.createContext({});var RadioGroupProvider=RadioGroupContext.Provider;var useRadioGroupContext=function useRadioGroupContext(){var context=React__default.useContext(RadioGroupContext);return context;};
|
|
3491
3491
|
|
|
3492
|
-
var Radio=function Radio(_ref){var _groupProps$state,_groupProps$size;var value=_ref.value,children=_ref.children,helpText=_ref.helpText,isDisabled=_ref.isDisabled,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size;var groupProps=useRadioGroupContext();var isInsideGroup=!isEmpty_1(groupProps);if(!isInsideGroup){throw new Error('[Blade Radio]: Cannot use <Radio /> outside of <RadioGroup />');}var isChecked=groupProps==null?void 0:(_groupProps$state=groupProps.state)==null?void 0:_groupProps$state.isChecked(value);var defaultChecked=(groupProps==null?void 0:groupProps.defaultValue)===undefined?undefined:(groupProps==null?void 0:groupProps.defaultValue)===value;var validationState=groupProps==null?void 0:groupProps.validationState;var hasError=validationState==='error';var _isDisabled=isDisabled!=null?isDisabled:groupProps==null?void 0:groupProps.isDisabled;var name=groupProps==null?void 0:groupProps.name;var showHelpText=!hasError&&helpText;var isReactNative=getPlatformType()==='react-native';var _size=(_groupProps$size=groupProps.size)!=null?_groupProps$size:size;var isSmall=_size==='small';var handleChange=function handleChange(_ref2){var isChecked=_ref2.isChecked,value=_ref2.value;if(isChecked){var _groupProps$state2;groupProps==null?void 0:(_groupProps$state2=groupProps.state)==null?void 0:_groupProps$state2.setValue(value);}else {var _groupProps$state3;groupProps==null?void 0:(_groupProps$state3=groupProps.state)==null?void 0:_groupProps$state3.removeValue();}};var _useRadio=useRadio({defaultChecked:defaultChecked,isChecked:isChecked,hasError:hasError,isDisabled:_isDisabled,isRequired:groupProps.necessityIndicator==='required',name:name,value:value,onChange:handleChange}),state=_useRadio.state,ids=_useRadio.ids,inputProps=_useRadio.inputProps;return jsx(SelectorLabel,{inputProps:isReactNative?inputProps:{},children:jsxs(Box,{display:"flex",flexDirection:"column",children:[jsxs(Box,{display:"flex",alignItems:"center",flexDirection:"row",children:[jsx(SelectorInput,{isChecked:state.isChecked,isDisabled:_isDisabled,
|
|
3492
|
+
var Radio=function Radio(_ref){var _groupProps$state,_groupProps$size;var value=_ref.value,children=_ref.children,helpText=_ref.helpText,isDisabled=_ref.isDisabled,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size;var groupProps=useRadioGroupContext();var isInsideGroup=!isEmpty_1(groupProps);if(!isInsideGroup){throw new Error('[Blade Radio]: Cannot use <Radio /> outside of <RadioGroup />');}var isChecked=groupProps==null?void 0:(_groupProps$state=groupProps.state)==null?void 0:_groupProps$state.isChecked(value);var defaultChecked=(groupProps==null?void 0:groupProps.defaultValue)===undefined?undefined:(groupProps==null?void 0:groupProps.defaultValue)===value;var validationState=groupProps==null?void 0:groupProps.validationState;var hasError=validationState==='error';var _isDisabled=isDisabled!=null?isDisabled:groupProps==null?void 0:groupProps.isDisabled;var name=groupProps==null?void 0:groupProps.name;var showHelpText=!hasError&&helpText;var isReactNative=getPlatformType()==='react-native';var _size=(_groupProps$size=groupProps.size)!=null?_groupProps$size:size;var isSmall=_size==='small';var handleChange=function handleChange(_ref2){var isChecked=_ref2.isChecked,value=_ref2.value;if(isChecked){var _groupProps$state2;groupProps==null?void 0:(_groupProps$state2=groupProps.state)==null?void 0:_groupProps$state2.setValue(value);}else {var _groupProps$state3;groupProps==null?void 0:(_groupProps$state3=groupProps.state)==null?void 0:_groupProps$state3.removeValue();}};var _useRadio=useRadio({defaultChecked:defaultChecked,isChecked:isChecked,hasError:hasError,isDisabled:_isDisabled,isRequired:groupProps.necessityIndicator==='required',name:name,value:value,onChange:handleChange}),state=_useRadio.state,ids=_useRadio.ids,inputProps=_useRadio.inputProps;return jsx(SelectorLabel,{inputProps:isReactNative?inputProps:{},children:jsxs(Box,{display:"flex",flexDirection:"column",children:[jsxs(Box,{display:"flex",alignItems:"center",flexDirection:"row",children:[jsx(SelectorInput,{isChecked:state.isChecked,isDisabled:_isDisabled,hasError:hasError,inputProps:inputProps}),jsx(RadioIcon,{size:_size,isChecked:state.isChecked,isDisabled:_isDisabled,isNegative:hasError}),jsx(SelectorTitle,{size:_size,isDisabled:_isDisabled,children:children})]}),jsx(Box,{marginLeft:isSmall?'spacing.6':'spacing.7',children:showHelpText&&jsx(SelectorSupportText,{id:ids==null?void 0:ids.helpTextId,children:helpText})})]})});};
|
|
3493
3493
|
|
|
3494
3494
|
var useRadioGroup=function useRadioGroup(_ref){var value=_ref.value,defaultValue=_ref.defaultValue,isDisabled=_ref.isDisabled,labelPosition=_ref.labelPosition,_onChange=_ref.onChange,validationState=_ref.validationState,necessityIndicator=_ref.necessityIndicator,name=_ref.name,size=_ref.size;var _useTheme=useTheme(),platform=_useTheme.platform;var idBase=useId('radio-group');var labelId=idBase+"-label";var fallbackName=name!=null?name:idBase;var _useControllableState=useControllableState({value:value,defaultValue:defaultValue,onChange:function onChange(v){return _onChange==null?void 0:_onChange({value:v,name:fallbackName});}}),_useControllableState2=_slicedToArray(_useControllableState,2),checkedValue=_useControllableState2[0],setValue=_useControllableState2[1];var state=React__default.useMemo(function(){return {value:checkedValue,setValue:function(_setValue){function setValue(_x){return _setValue.apply(this,arguments);}setValue.toString=function(){return _setValue.toString();};return setValue;}(function(v){if(isDisabled){return;}setValue(function(){return v;});}),removeValue:function removeValue(){if(isDisabled){return;}setValue(undefined);},isChecked:function isChecked(v){if(isUndefined_1(v)||isUndefined_1(checkedValue))return false;return checkedValue===v;}};},[checkedValue,isDisabled,setValue]);var contextValue=React__default.useMemo(function(){return {necessityIndicator:necessityIndicator,validationState:validationState,isDisabled:isDisabled,labelPosition:platform==='onMobile'?'top':labelPosition,name:fallbackName,state:state,size:size};},[validationState,isDisabled,platform,labelPosition,state,fallbackName,necessityIndicator,size]);return {state:state,contextValue:contextValue,ids:{labelId:labelId}};};
|
|
3495
3495
|
|