@razorpay/blade 4.0.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 +28 -0
- package/build/components/index.d.ts +2 -2
- package/build/components/index.native.d.ts +2 -2
- package/build/components/index.native.js +3 -3
- package/build/components/index.native.js.map +1 -1
- package/build/components/index.web.js +36 -12
- 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,33 @@
|
|
|
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
|
+
|
|
3
31
|
## 4.0.0
|
|
4
32
|
|
|
5
33
|
### Major 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
|
*
|
|
@@ -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
|
*
|
|
@@ -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
|
|
|
@@ -3353,7 +3353,7 @@ 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
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
|
|
|
@@ -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
|
|