@khanacademy/wonder-blocks-form 7.1.12 → 7.1.13
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 +14 -0
- package/dist/es/index.js +4 -4
- package/dist/index.js +4 -4
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-form
|
|
2
2
|
|
|
3
|
+
## 7.1.13
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- abf5496: modify form field components to use `semanticColor.input`.
|
|
8
|
+
- Updated dependencies [a1be4c5]
|
|
9
|
+
- Updated dependencies [d00a6f1]
|
|
10
|
+
- Updated dependencies [abf5496]
|
|
11
|
+
- Updated dependencies [812c167]
|
|
12
|
+
- @khanacademy/wonder-blocks-tokens@10.1.0
|
|
13
|
+
- @khanacademy/wonder-blocks-clickable@7.1.1
|
|
14
|
+
- @khanacademy/wonder-blocks-layout@3.1.12
|
|
15
|
+
- @khanacademy/wonder-blocks-typography@3.2.2
|
|
16
|
+
|
|
3
17
|
## 7.1.12
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
package/dist/es/index.js
CHANGED
|
@@ -10,9 +10,9 @@ import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
|
|
|
10
10
|
import checkIcon from '@phosphor-icons/core/bold/check-bold.svg';
|
|
11
11
|
import minusIcon from '@phosphor-icons/core/bold/minus-bold.svg';
|
|
12
12
|
|
|
13
|
-
function mapCheckedToAriaChecked(value){switch(value){case true:return "true";case false:return "false";default:return "mixed"}}const size$1=spacing.medium_16;const checkSize=spacing.small_12;const StyledInput$2=addStyle("input");const CheckboxCore=React.forwardRef(function CheckboxCore(props,ref){const{checked,disabled,error,groupName,id,testId,...sharedProps}=props;const innerRef=React.useRef(null);React.useEffect(()=>{if(innerRef.current!=null){innerRef.current.indeterminate=checked==null;}},[checked,innerRef]);const handleChange=()=>{return};const stateStyles=_generateStyles$1(checked,error);const defaultStyle=[sharedStyles$1.inputReset,sharedStyles$1.default,!disabled&&stateStyles.default,disabled&&sharedStyles$1.disabled];const checkboxIcon=jsx(PhosphorIcon,{color:disabled?semanticColor.icon.disabled:semanticColor.icon.inverse,icon:checked?checkIcon:minusIcon,size:"small",style:[sharedStyles$1.checkboxIcon,{width:checkSize,height:checkSize}]});const ariaChecked=mapCheckedToAriaChecked(checked);return jsxs(React.Fragment,{children:[jsx(StyledInput$2,{...sharedProps,ref:node=>{innerRef.current=node;if(typeof ref==="function"){ref(node);}else if(ref!=null){ref.current=node;}},type:"checkbox","aria-checked":ariaChecked,"aria-invalid":error,checked:checked??undefined,disabled:disabled,id:id,name:groupName,onChange:handleChange,style:defaultStyle,"data-testid":testId}),checked||checked==null?checkboxIcon:jsx(Fragment,{})]})});const
|
|
13
|
+
function mapCheckedToAriaChecked(value){switch(value){case true:return "true";case false:return "false";default:return "mixed"}}const size$1=spacing.medium_16;const checkSize=spacing.small_12;const StyledInput$2=addStyle("input");const CheckboxCore=React.forwardRef(function CheckboxCore(props,ref){const{checked,disabled,error,groupName,id,testId,...sharedProps}=props;const innerRef=React.useRef(null);React.useEffect(()=>{if(innerRef.current!=null){innerRef.current.indeterminate=checked==null;}},[checked,innerRef]);const handleChange=()=>{return};const stateStyles=_generateStyles$1(checked,error);const defaultStyle=[sharedStyles$1.inputReset,sharedStyles$1.default,!disabled&&stateStyles.default,disabled&&sharedStyles$1.disabled];const checkboxIcon=jsx(PhosphorIcon,{color:disabled?semanticColor.icon.disabled:semanticColor.icon.inverse,icon:checked?checkIcon:minusIcon,size:"small",style:[sharedStyles$1.checkboxIcon,{width:checkSize,height:checkSize}]});const ariaChecked=mapCheckedToAriaChecked(checked);return jsxs(React.Fragment,{children:[jsx(StyledInput$2,{...sharedProps,ref:node=>{innerRef.current=node;if(typeof ref==="function"){ref(node);}else if(ref!=null){ref.current=node;}},type:"checkbox","aria-checked":ariaChecked,"aria-invalid":error,checked:checked??undefined,disabled:disabled,id:id,name:groupName,onChange:handleChange,style:defaultStyle,"data-testid":testId}),checked||checked==null?checkboxIcon:jsx(Fragment,{})]})});const sharedStyles$1=StyleSheet.create({inputReset:{appearance:"none",WebkitAppearance:"none",MozAppearance:"none"},default:{height:size$1,width:size$1,minHeight:size$1,minWidth:size$1,margin:0,outline:"none",boxSizing:"border-box",borderStyle:"solid",borderWidth:border.width.thin,borderRadius:3},disabled:{cursor:"auto",backgroundColor:semanticColor.input.disabled.background,borderColor:semanticColor.input.disabled.border,borderWidth:border.width.thin},checkboxIcon:{position:"absolute",pointerEvents:"none",margin:(size$1-checkSize)/2}});const styles$6={};const _generateStyles$1=(checked,error)=>{const styleKey=`${String(checked)}-${String(error)}`;if(styles$6[styleKey]){return styles$6[styleKey]}const isCheckedOrIndeterminate=checked||checked==null;const actionType=error?"destructive":"progressive";const styleType=isCheckedOrIndeterminate?"primary":"secondary";const colorAction=semanticColor.action[styleType][actionType];const states={default:{border:colorAction.default.border,background:colorAction.default.background},error:{border:semanticColor.input.error.border,background:semanticColor.input.error.background}};let newStyles={};if(isCheckedOrIndeterminate){newStyles={default:{backgroundColor:states.default.background,borderColor:states.default.border,":focus-visible":{outline:`${border.width.medium} solid ${semanticColor.focus.outer}`,outlineOffset:1},":hover":{outline:`${border.width.medium} solid ${colorAction.hover.border}`,outlineOffset:1},":active":{outline:`${border.width.medium} solid ${colorAction.press.border}`,outlineOffset:1,background:colorAction.press.background}}};}else {const currentState=error?states.error:states.default;newStyles={default:{backgroundColor:currentState.background,borderColor:currentState.border,":focus-visible":{backgroundColor:error?semanticColor.input.error.background:colorAction.hover.background,outline:`${border.width.medium} solid ${semanticColor.focus.outer}`,outlineOffset:-1},":hover":{backgroundColor:error?semanticColor.input.error.background:colorAction.hover.background,outline:`${border.width.medium} solid ${colorAction.hover.border}`,outlineOffset:-1},":active":{backgroundColor:colorAction.press.background,outline:`${border.width.medium} solid ${colorAction.press.border}`,outlineOffset:-1}}};}styles$6[styleKey]=StyleSheet.create(newStyles);return styles$6[styleKey]};
|
|
14
14
|
|
|
15
|
-
const StyledInput$1=addStyle("input");const RadioCore=React.forwardRef(function RadioCore(props,ref){const handleChange=()=>{return};const{checked,disabled,error,groupName,id,testId,...sharedProps}=props;const stateStyles=_generateStyles(checked,error);const defaultStyle=[sharedStyles.inputReset,sharedStyles.default,!disabled&&stateStyles.default,disabled&&sharedStyles.disabled];return jsxs(React.Fragment,{children:[jsx(StyledInput$1,{...sharedProps,type:"radio","aria-invalid":error,checked:checked??undefined,disabled:disabled,id:id,name:groupName,onChange:handleChange,style:defaultStyle,"data-testid":testId,ref:ref}),disabled&&checked&&jsx("span",{style:disabledChecked})]})});const
|
|
15
|
+
const StyledInput$1=addStyle("input");const RadioCore=React.forwardRef(function RadioCore(props,ref){const handleChange=()=>{return};const{checked,disabled,error,groupName,id,testId,...sharedProps}=props;const stateStyles=_generateStyles(checked,error);const defaultStyle=[sharedStyles.inputReset,sharedStyles.default,!disabled&&stateStyles.default,disabled&&sharedStyles.disabled];return jsxs(React.Fragment,{children:[jsx(StyledInput$1,{...sharedProps,type:"radio","aria-invalid":error,checked:checked??undefined,disabled:disabled,id:id,name:groupName,onChange:handleChange,style:defaultStyle,"data-testid":testId,ref:ref}),disabled&&checked&&jsx("span",{style:disabledChecked})]})});const size=16;const disabledChecked={position:"absolute",top:size/4,left:size/4,height:size/2,width:size/2,borderRadius:border.radius.radius_full,backgroundColor:semanticColor.action.primary.disabled.background};const sharedStyles=StyleSheet.create({inputReset:{appearance:"none",WebkitAppearance:"none",MozAppearance:"none"},default:{height:size,width:size,minHeight:size,minWidth:size,margin:0,outline:"none",boxSizing:"border-box",borderStyle:"solid",borderWidth:border.width.thin,borderRadius:border.radius.radius_full},disabled:{cursor:"auto",backgroundColor:semanticColor.input.disabled.background,borderColor:semanticColor.input.disabled.border,borderWidth:border.width.thin}});const styles$5={};const _generateStyles=(checked,error)=>{const styleKey=`${String(checked)}-${String(error)}`;if(styles$5[styleKey]){return styles$5[styleKey]}const actionType=error?"destructive":"progressive";const colorAction=semanticColor.action.secondary[actionType];const states={unchecked:{border:semanticColor.input.default.border,background:colorAction.default.background},checked:{border:colorAction.default.foreground,background:colorAction.default.background},error:{border:semanticColor.input.error.border,background:semanticColor.input.error.background}};let newStyles={};if(checked){newStyles={default:{backgroundColor:states.checked.background,borderColor:states.checked.border,borderWidth:size/4,":focus-visible":{outline:`${border.width.medium} solid ${semanticColor.focus.outer}`,outlineOffset:1},":hover":{outline:`${border.width.medium} solid ${colorAction.hover.border}`,outlineOffset:1},":active":{outline:`${border.width.medium} solid ${colorAction.press.border}`,outlineOffset:1,borderColor:colorAction.press.border}}};}else {const currentState=error?states.error:states.unchecked;newStyles={default:{backgroundColor:currentState.background,borderColor:currentState.border,":focus-visible":{backgroundColor:error?states.error.background:colorAction.hover.background,outline:`${border.width.medium} solid ${semanticColor.focus.outer}`,outlineOffset:-1},":hover":{backgroundColor:error?states.error.background:colorAction.hover.background,outline:`${border.width.medium} solid ${colorAction.hover.border}`,outlineOffset:-1},":active":{backgroundColor:colorAction.press.background,outline:`${border.width.medium} solid ${colorAction.press.border}`,outlineOffset:-1}}};}styles$5[styleKey]=StyleSheet.create(newStyles);return styles$5[styleKey]};
|
|
16
16
|
|
|
17
17
|
const ChoiceInternal=React.forwardRef(function ChoiceInternal(props,ref){const{checked,description,disabled=false,error=false,id,label,onChange,style,className,variant,...coreProps}=props;const handleClick=()=>{if(variant==="radio"&&checked){return}onChange(!checked);};const getChoiceCoreComponent=()=>{if(variant==="radio"){return RadioCore}else {return CheckboxCore}};const getLabel=id=>{return jsx(LabelMedium,{style:[styles$4.label,disabled&&styles$4.disabledLabel],children:jsx("label",{htmlFor:id,children:label})})};const getDescription=id=>{return jsx(LabelSmall,{style:styles$4.description,id:id,children:description})};const ChoiceCore=getChoiceCoreComponent();return jsx(Id,{id:id,children:uniqueId=>{const descriptionId=description?`${uniqueId}-description`:undefined;return jsxs(View,{style:style,className:className,children:[jsxs(View,{style:styles$4.wrapper,tabIndex:-1,children:[jsx(ChoiceCore,{...coreProps,id:uniqueId,checked:checked,"aria-describedby":descriptionId,onClick:handleClick,disabled:disabled,error:error,ref:ref}),jsx(Strut,{size:spacing.xSmall_8}),label&&getLabel(uniqueId)]}),description&&getDescription(descriptionId)]})}})});const styles$4=StyleSheet.create({wrapper:{flexDirection:"row",alignItems:"flex-start",outline:"none"},label:{marginTop:-2},disabledLabel:{color:semanticColor.action.secondary.disabled.foreground},description:{marginLeft:spacing.medium_16+spacing.xSmall_8,marginTop:spacing.xxxSmall_4,color:semanticColor.text.secondary}});
|
|
18
18
|
|
|
@@ -30,12 +30,12 @@ const StyledFieldset=addStyle("fieldset");const StyledLegend=addStyle("legend");
|
|
|
30
30
|
|
|
31
31
|
const defaultErrorMessage="This field is required.";const useFieldValidation=({value,disabled=false,validate,onValidate,required=false,instantValidation=true})=>{const[errorMessage,setErrorMessage]=React.useState(()=>validate&&value!==""&&!disabled&&validate(value)||null);const onChangeValidation=newValue=>{if(instantValidation){handleValidation(newValue);}else {setErrorMessage(null);if(onValidate){onValidate(null);}}};const onBlurValidation=newValue=>{if(!instantValidation){if(newValue||required){handleValidation(newValue);}}};const handleValidation=newValue=>{if(disabled){return}if(validate){const error=validate(newValue)||null;setErrorMessage(error);if(onValidate){onValidate(error);}}else if(required){const requiredString=typeof required==="string"?required:defaultErrorMessage;const error=newValue?null:requiredString;setErrorMessage(error);if(onValidate){onValidate(error);}}};useOnMountEffect(()=>{if(value!==""){handleValidation(value);}});return {errorMessage,onBlurValidation,onChangeValidation}};
|
|
32
32
|
|
|
33
|
-
const StyledInput=addStyle("input");const TextField=props=>{const{id,type="text",value,name,disabled=false,error,validate,onValidate,required,placeholder,style,testId,readOnly,autoFocus,autoComplete,forwardedRef,instantValidation=true,onKeyDown,onChange,onFocus,onBlur,...otherProps}=props;const{errorMessage,onBlurValidation,onChangeValidation}=useFieldValidation({value,required,disabled,instantValidation,validate,onValidate});const hasError=error||!!errorMessage;const handleChange=event=>{const newValue=event.target.value;onChangeValidation(newValue);onChange(newValue);};const handleFocus=event=>{if(onFocus){onFocus(event);}};const handleBlur=event=>{onBlurValidation(event.target.value);if(onBlur){onBlur(event);}};return jsx(Id,{id:id,children:uniqueId=>jsx(StyledInput,{style:[styles$2.input,styles$7.LabelMedium,styles$2.default,!disabled&&styles$2.defaultFocus,disabled&&styles$2.disabled,hasError&&styles$2.error,style],id:uniqueId,type:type,placeholder:placeholder,value:value,name:name,"aria-disabled":disabled,"aria-required":!!required,onChange:handleChange,onKeyDown:disabled?undefined:onKeyDown,onFocus:handleFocus,onBlur:handleBlur,"data-testid":testId,readOnly:readOnly||disabled,autoFocus:autoFocus,autoComplete:autoComplete,ref:forwardedRef,"aria-invalid":hasError,...otherProps})})};const
|
|
33
|
+
const StyledInput=addStyle("input");const TextField=props=>{const{id,type="text",value,name,disabled=false,error,validate,onValidate,required,placeholder,style,testId,readOnly,autoFocus,autoComplete,forwardedRef,instantValidation=true,onKeyDown,onChange,onFocus,onBlur,...otherProps}=props;const{errorMessage,onBlurValidation,onChangeValidation}=useFieldValidation({value,required,disabled,instantValidation,validate,onValidate});const hasError=error||!!errorMessage;const handleChange=event=>{const newValue=event.target.value;onChangeValidation(newValue);onChange(newValue);};const handleFocus=event=>{if(onFocus){onFocus(event);}};const handleBlur=event=>{onBlurValidation(event.target.value);if(onBlur){onBlur(event);}};return jsx(Id,{id:id,children:uniqueId=>jsx(StyledInput,{style:[styles$2.input,styles$7.LabelMedium,styles$2.default,!disabled&&styles$2.defaultFocus,disabled&&styles$2.disabled,hasError&&styles$2.error,style],id:uniqueId,type:type,placeholder:placeholder,value:value,name:name,"aria-disabled":disabled,"aria-required":!!required,onChange:handleChange,onKeyDown:disabled?undefined:onKeyDown,onFocus:handleFocus,onBlur:handleBlur,"data-testid":testId,readOnly:readOnly||disabled,autoFocus:autoFocus,autoComplete:autoComplete,ref:forwardedRef,"aria-invalid":hasError,...otherProps})})};const styles$2=StyleSheet.create({input:{width:"100%",height:40,borderRadius:border.radius.radius_040,boxSizing:"border-box",paddingLeft:spacing.medium_16,margin:0},default:{background:semanticColor.input.default.background,border:`${border.width.thin} solid ${semanticColor.input.default.border}`,color:semanticColor.input.default.foreground,"::placeholder":{color:semanticColor.input.default.placeholder}},defaultFocus:{":focus-visible":{borderColor:semanticColor.focus.outer,outline:`${border.width.thin} solid ${semanticColor.focus.outer}`,outlineOffset:-2}},error:{background:semanticColor.input.error.background,border:`${border.width.thin} solid ${semanticColor.input.error.border}`,color:semanticColor.input.error.foreground,"::placeholder":{color:semanticColor.input.default.placeholder},":focus-visible":{outlineColor:semanticColor.focus.outer,outline:`${border.width.medium} solid ${semanticColor.focus.outer}`}},disabled:{background:semanticColor.input.disabled.background,border:`${border.width.thin} solid ${semanticColor.input.disabled.border}`,color:semanticColor.input.disabled.foreground,"::placeholder":{color:semanticColor.input.disabled.placeholder},cursor:"not-allowed",":focus-visible":{outline:`${border.width.medium} solid ${semanticColor.focus.outer}`,outlineOffset:-3}}});var TextField$1 = React.forwardRef((props,ref)=>jsx(TextField,{...props,forwardedRef:ref}));
|
|
34
34
|
|
|
35
35
|
const StyledSpan=addStyle("span");class FieldHeading extends React.Component{renderLabel(){const{label,id,required,testId}=this.props;const requiredIcon=jsxs(StyledSpan,{style:styles$1.required,"aria-hidden":true,children:[" ","*"]});return jsxs(React.Fragment,{children:[jsxs(LabelMedium,{style:styles$1.label,tag:"label",htmlFor:id&&`${id}-field`,testId:testId&&`${testId}-label`,children:[label,required&&requiredIcon]}),jsx(Strut,{size:spacing.xxxSmall_4})]})}maybeRenderDescription(){const{description,testId}=this.props;if(!description){return null}return jsxs(React.Fragment,{children:[jsx(LabelSmall,{style:styles$1.description,testId:testId&&`${testId}-description`,children:description}),jsx(Strut,{size:spacing.xxxSmall_4})]})}maybeRenderError(){const{error,id,testId}=this.props;if(!error){return null}return jsxs(React.Fragment,{children:[jsx(Strut,{size:spacing.small_12}),jsx(LabelSmall,{style:styles$1.error,role:"alert",id:id&&`${id}-error`,testId:testId&&`${testId}-error`,children:error})]})}render(){const{field,style}=this.props;return jsxs(View,{style:style,children:[this.renderLabel(),this.maybeRenderDescription(),jsx(Strut,{size:spacing.xSmall_8}),field,this.maybeRenderError()]})}}const styles$1=StyleSheet.create({label:{color:semanticColor.text.primary},description:{color:semanticColor.text.secondary},error:{color:semanticColor.status.critical.foreground},required:{color:semanticColor.status.critical.foreground}});
|
|
36
36
|
|
|
37
37
|
class LabeledTextField extends React.Component{render(){const{id,type,label,description,value,disabled,required,validate,onChange,onKeyDown,placeholder,style,testId,readOnly,autoComplete,forwardedRef,ariaDescribedby,name,onValidate,onFocus,onBlur,...otherProps}=this.props;return jsx(Id,{id:id,children:uniqueId=>jsx(FieldHeading,{id:uniqueId,testId:testId,style:style,field:jsx(TextField$1,{id:`${uniqueId}-field`,"aria-describedby":ariaDescribedby?ariaDescribedby:`${uniqueId}-error`,"aria-required":required?"true":"false",required:required,testId:testId&&`${testId}-field`,type:type,value:value,placeholder:placeholder,disabled:disabled,validate:validate,onValidate:this.handleValidate,onChange:onChange,onKeyDown:onKeyDown,onFocus:this.handleFocus,onBlur:this.handleBlur,readOnly:readOnly,autoComplete:autoComplete,ref:forwardedRef,name:name,...otherProps}),label:label,description:description,required:!!required,error:!this.state.focused&&this.state.error||""})})}constructor(props){super(props),this.handleValidate=errorMessage=>{const{onValidate}=this.props;this.setState({error:errorMessage},()=>{if(onValidate){onValidate(errorMessage);}});},this.handleFocus=event=>{const{onFocus}=this.props;this.setState({focused:true},()=>{if(onFocus){onFocus(event);}});},this.handleBlur=event=>{const{onBlur}=this.props;this.setState({focused:false},()=>{if(onBlur){onBlur(event);}});};this.state={error:null,focused:false};}}LabeledTextField.defaultProps={type:"text",disabled:false};var labeledTextField = React.forwardRef((props,ref)=>jsx(LabeledTextField,{...props,forwardedRef:ref}));
|
|
38
38
|
|
|
39
|
-
const StyledTextarea=addStyle("textarea");const TextArea=React.forwardRef(function TextArea(props,ref){const{onChange,value,placeholder,disabled,id,testId,style,readOnly,autoComplete,name,className,autoFocus,rows,spellCheck,wrap,minLength,maxLength,onClick,onKeyDown,onKeyUp,onFocus,onBlur,validate,onValidate,required,resizeType,rootStyle,error,instantValidation=true,...otherProps}=props;const{errorMessage,onBlurValidation,onChangeValidation}=useFieldValidation({value,disabled,validate,onValidate,required,instantValidation});const hasError=error||!!errorMessage;const generatedUniqueId=useId();const uniqueId=id??generatedUniqueId;const handleChange=event=>{const newValue=event.target.value;onChangeValidation(newValue);onChange(newValue);};const handleBlur=event=>{onBlurValidation(event.target.value);if(onBlur){onBlur(event);}};return jsx(View,{style:[{width:"100%"},rootStyle],children:jsx(StyledTextarea,{id:uniqueId,"data-testid":testId,ref:ref,className:className,style:[styles.textarea,styles$7.LabelMedium,resizeType&&resizeStyles[resizeType],styles.default,!disabled&&styles.defaultFocus,disabled&&styles.disabled,hasError&&styles.error,style],value:value,onChange:handleChange,placeholder:placeholder,"aria-disabled":disabled,readOnly:readOnly||disabled,autoComplete:autoComplete,name:name,autoFocus:autoFocus,rows:rows,spellCheck:spellCheck,wrap:wrap,minLength:minLength,maxLength:maxLength,"aria-required":!!required,onClick:disabled?undefined:onClick,onKeyDown:disabled?undefined:onKeyDown,onKeyUp:disabled?undefined:onKeyUp,onFocus:onFocus,onBlur:handleBlur,required:!!required,...otherProps,"aria-invalid":hasError})})});const VERTICAL_SPACING_PX=10;const
|
|
39
|
+
const StyledTextarea=addStyle("textarea");const TextArea=React.forwardRef(function TextArea(props,ref){const{onChange,value,placeholder,disabled,id,testId,style,readOnly,autoComplete,name,className,autoFocus,rows,spellCheck,wrap,minLength,maxLength,onClick,onKeyDown,onKeyUp,onFocus,onBlur,validate,onValidate,required,resizeType,rootStyle,error,instantValidation=true,...otherProps}=props;const{errorMessage,onBlurValidation,onChangeValidation}=useFieldValidation({value,disabled,validate,onValidate,required,instantValidation});const hasError=error||!!errorMessage;const generatedUniqueId=useId();const uniqueId=id??generatedUniqueId;const handleChange=event=>{const newValue=event.target.value;onChangeValidation(newValue);onChange(newValue);};const handleBlur=event=>{onBlurValidation(event.target.value);if(onBlur){onBlur(event);}};return jsx(View,{style:[{width:"100%"},rootStyle],children:jsx(StyledTextarea,{id:uniqueId,"data-testid":testId,ref:ref,className:className,style:[styles.textarea,styles$7.LabelMedium,resizeType&&resizeStyles[resizeType],styles.default,!disabled&&styles.defaultFocus,disabled&&styles.disabled,hasError&&styles.error,style],value:value,onChange:handleChange,placeholder:placeholder,"aria-disabled":disabled,readOnly:readOnly||disabled,autoComplete:autoComplete,name:name,autoFocus:autoFocus,rows:rows,spellCheck:spellCheck,wrap:wrap,minLength:minLength,maxLength:maxLength,"aria-required":!!required,onClick:disabled?undefined:onClick,onKeyDown:disabled?undefined:onKeyDown,onKeyUp:disabled?undefined:onKeyUp,onFocus:onFocus,onBlur:handleBlur,required:!!required,...otherProps,"aria-invalid":hasError})})});const VERTICAL_SPACING_PX=10;const styles=StyleSheet.create({textarea:{borderRadius:border.radius.radius_040,boxSizing:"border-box",padding:`${VERTICAL_SPACING_PX}px ${spacing.medium_16}px`,minHeight:`calc(${VERTICAL_SPACING_PX*2+2}px + ${font.lineHeight.medium})`},default:{background:semanticColor.input.default.background,border:`${border.width.thin} solid ${semanticColor.input.default.border}`,color:semanticColor.input.default.foreground,"::placeholder":{color:semanticColor.input.default.placeholder}},defaultFocus:{":focus-visible":{borderColor:semanticColor.focus.outer,outline:`${border.width.thin} solid ${semanticColor.focus.outer}`,outlineOffset:-2}},disabled:{background:semanticColor.input.disabled.background,border:`${border.width.thin} solid ${semanticColor.input.disabled.border}`,color:semanticColor.input.disabled.foreground,"::placeholder":{color:semanticColor.input.disabled.placeholder},cursor:"not-allowed",":focus-visible":{outline:`${border.width.medium} solid ${semanticColor.focus.outer}`,outlineOffset:-3}},error:{background:semanticColor.input.error.background,border:`${border.width.thin} solid ${semanticColor.input.error.border}`,color:semanticColor.input.error.foreground,"::placeholder":{color:semanticColor.input.default.placeholder},":focus-visible":{outline:`${border.width.medium} solid ${semanticColor.focus.outer}`,borderColor:semanticColor.input.error.border}}});const resizeStyles=StyleSheet.create({both:{resize:"both"},none:{resize:"none"},horizontal:{resize:"horizontal"},vertical:{resize:"vertical"}});
|
|
40
40
|
|
|
41
41
|
export { Checkbox, CheckboxGroup, Choice, labeledTextField as LabeledTextField, RadioGroup, TextArea, TextField$1 as TextField };
|
package/dist/index.js
CHANGED
|
@@ -37,9 +37,9 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
|
37
37
|
var checkIcon__default = /*#__PURE__*/_interopDefaultLegacy(checkIcon);
|
|
38
38
|
var minusIcon__default = /*#__PURE__*/_interopDefaultLegacy(minusIcon);
|
|
39
39
|
|
|
40
|
-
function mapCheckedToAriaChecked(value){switch(value){case true:return "true";case false:return "false";default:return "mixed"}}const size$1=wonderBlocksTokens.spacing.medium_16;const checkSize=wonderBlocksTokens.spacing.small_12;const StyledInput$2=wonderBlocksCore.addStyle("input");const CheckboxCore=React__namespace.forwardRef(function CheckboxCore(props,ref){const{checked,disabled,error,groupName,id,testId,...sharedProps}=props;const innerRef=React__namespace.useRef(null);React__namespace.useEffect(()=>{if(innerRef.current!=null){innerRef.current.indeterminate=checked==null;}},[checked,innerRef]);const handleChange=()=>{return};const stateStyles=_generateStyles$1(checked,error);const defaultStyle=[sharedStyles$1.inputReset,sharedStyles$1.default,!disabled&&stateStyles.default,disabled&&sharedStyles$1.disabled];const checkboxIcon=jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{color:disabled?wonderBlocksTokens.semanticColor.icon.disabled:wonderBlocksTokens.semanticColor.icon.inverse,icon:checked?checkIcon__default["default"]:minusIcon__default["default"],size:"small",style:[sharedStyles$1.checkboxIcon,{width:checkSize,height:checkSize}]});const ariaChecked=mapCheckedToAriaChecked(checked);return jsxRuntime.jsxs(React__namespace.Fragment,{children:[jsxRuntime.jsx(StyledInput$2,{...sharedProps,ref:node=>{innerRef.current=node;if(typeof ref==="function"){ref(node);}else if(ref!=null){ref.current=node;}},type:"checkbox","aria-checked":ariaChecked,"aria-invalid":error,checked:checked??undefined,disabled:disabled,id:id,name:groupName,onChange:handleChange,style:defaultStyle,"data-testid":testId}),checked||checked==null?checkboxIcon:jsxRuntime.jsx(jsxRuntime.Fragment,{})]})});const
|
|
40
|
+
function mapCheckedToAriaChecked(value){switch(value){case true:return "true";case false:return "false";default:return "mixed"}}const size$1=wonderBlocksTokens.spacing.medium_16;const checkSize=wonderBlocksTokens.spacing.small_12;const StyledInput$2=wonderBlocksCore.addStyle("input");const CheckboxCore=React__namespace.forwardRef(function CheckboxCore(props,ref){const{checked,disabled,error,groupName,id,testId,...sharedProps}=props;const innerRef=React__namespace.useRef(null);React__namespace.useEffect(()=>{if(innerRef.current!=null){innerRef.current.indeterminate=checked==null;}},[checked,innerRef]);const handleChange=()=>{return};const stateStyles=_generateStyles$1(checked,error);const defaultStyle=[sharedStyles$1.inputReset,sharedStyles$1.default,!disabled&&stateStyles.default,disabled&&sharedStyles$1.disabled];const checkboxIcon=jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{color:disabled?wonderBlocksTokens.semanticColor.icon.disabled:wonderBlocksTokens.semanticColor.icon.inverse,icon:checked?checkIcon__default["default"]:minusIcon__default["default"],size:"small",style:[sharedStyles$1.checkboxIcon,{width:checkSize,height:checkSize}]});const ariaChecked=mapCheckedToAriaChecked(checked);return jsxRuntime.jsxs(React__namespace.Fragment,{children:[jsxRuntime.jsx(StyledInput$2,{...sharedProps,ref:node=>{innerRef.current=node;if(typeof ref==="function"){ref(node);}else if(ref!=null){ref.current=node;}},type:"checkbox","aria-checked":ariaChecked,"aria-invalid":error,checked:checked??undefined,disabled:disabled,id:id,name:groupName,onChange:handleChange,style:defaultStyle,"data-testid":testId}),checked||checked==null?checkboxIcon:jsxRuntime.jsx(jsxRuntime.Fragment,{})]})});const sharedStyles$1=aphrodite.StyleSheet.create({inputReset:{appearance:"none",WebkitAppearance:"none",MozAppearance:"none"},default:{height:size$1,width:size$1,minHeight:size$1,minWidth:size$1,margin:0,outline:"none",boxSizing:"border-box",borderStyle:"solid",borderWidth:wonderBlocksTokens.border.width.thin,borderRadius:3},disabled:{cursor:"auto",backgroundColor:wonderBlocksTokens.semanticColor.input.disabled.background,borderColor:wonderBlocksTokens.semanticColor.input.disabled.border,borderWidth:wonderBlocksTokens.border.width.thin},checkboxIcon:{position:"absolute",pointerEvents:"none",margin:(size$1-checkSize)/2}});const styles$6={};const _generateStyles$1=(checked,error)=>{const styleKey=`${String(checked)}-${String(error)}`;if(styles$6[styleKey]){return styles$6[styleKey]}const isCheckedOrIndeterminate=checked||checked==null;const actionType=error?"destructive":"progressive";const styleType=isCheckedOrIndeterminate?"primary":"secondary";const colorAction=wonderBlocksTokens.semanticColor.action[styleType][actionType];const states={default:{border:colorAction.default.border,background:colorAction.default.background},error:{border:wonderBlocksTokens.semanticColor.input.error.border,background:wonderBlocksTokens.semanticColor.input.error.background}};let newStyles={};if(isCheckedOrIndeterminate){newStyles={default:{backgroundColor:states.default.background,borderColor:states.default.border,":focus-visible":{outline:`${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,outlineOffset:1},":hover":{outline:`${wonderBlocksTokens.border.width.medium} solid ${colorAction.hover.border}`,outlineOffset:1},":active":{outline:`${wonderBlocksTokens.border.width.medium} solid ${colorAction.press.border}`,outlineOffset:1,background:colorAction.press.background}}};}else {const currentState=error?states.error:states.default;newStyles={default:{backgroundColor:currentState.background,borderColor:currentState.border,":focus-visible":{backgroundColor:error?wonderBlocksTokens.semanticColor.input.error.background:colorAction.hover.background,outline:`${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,outlineOffset:-1},":hover":{backgroundColor:error?wonderBlocksTokens.semanticColor.input.error.background:colorAction.hover.background,outline:`${wonderBlocksTokens.border.width.medium} solid ${colorAction.hover.border}`,outlineOffset:-1},":active":{backgroundColor:colorAction.press.background,outline:`${wonderBlocksTokens.border.width.medium} solid ${colorAction.press.border}`,outlineOffset:-1}}};}styles$6[styleKey]=aphrodite.StyleSheet.create(newStyles);return styles$6[styleKey]};
|
|
41
41
|
|
|
42
|
-
const StyledInput$1=wonderBlocksCore.addStyle("input");const RadioCore=React__namespace.forwardRef(function RadioCore(props,ref){const handleChange=()=>{return};const{checked,disabled,error,groupName,id,testId,...sharedProps}=props;const stateStyles=_generateStyles(checked,error);const defaultStyle=[sharedStyles.inputReset,sharedStyles.default,!disabled&&stateStyles.default,disabled&&sharedStyles.disabled];return jsxRuntime.jsxs(React__namespace.Fragment,{children:[jsxRuntime.jsx(StyledInput$1,{...sharedProps,type:"radio","aria-invalid":error,checked:checked??undefined,disabled:disabled,id:id,name:groupName,onChange:handleChange,style:defaultStyle,"data-testid":testId,ref:ref}),disabled&&checked&&jsxRuntime.jsx("span",{style:disabledChecked})]})});const
|
|
42
|
+
const StyledInput$1=wonderBlocksCore.addStyle("input");const RadioCore=React__namespace.forwardRef(function RadioCore(props,ref){const handleChange=()=>{return};const{checked,disabled,error,groupName,id,testId,...sharedProps}=props;const stateStyles=_generateStyles(checked,error);const defaultStyle=[sharedStyles.inputReset,sharedStyles.default,!disabled&&stateStyles.default,disabled&&sharedStyles.disabled];return jsxRuntime.jsxs(React__namespace.Fragment,{children:[jsxRuntime.jsx(StyledInput$1,{...sharedProps,type:"radio","aria-invalid":error,checked:checked??undefined,disabled:disabled,id:id,name:groupName,onChange:handleChange,style:defaultStyle,"data-testid":testId,ref:ref}),disabled&&checked&&jsxRuntime.jsx("span",{style:disabledChecked})]})});const size=16;const disabledChecked={position:"absolute",top:size/4,left:size/4,height:size/2,width:size/2,borderRadius:wonderBlocksTokens.border.radius.radius_full,backgroundColor:wonderBlocksTokens.semanticColor.action.primary.disabled.background};const sharedStyles=aphrodite.StyleSheet.create({inputReset:{appearance:"none",WebkitAppearance:"none",MozAppearance:"none"},default:{height:size,width:size,minHeight:size,minWidth:size,margin:0,outline:"none",boxSizing:"border-box",borderStyle:"solid",borderWidth:wonderBlocksTokens.border.width.thin,borderRadius:wonderBlocksTokens.border.radius.radius_full},disabled:{cursor:"auto",backgroundColor:wonderBlocksTokens.semanticColor.input.disabled.background,borderColor:wonderBlocksTokens.semanticColor.input.disabled.border,borderWidth:wonderBlocksTokens.border.width.thin}});const styles$5={};const _generateStyles=(checked,error)=>{const styleKey=`${String(checked)}-${String(error)}`;if(styles$5[styleKey]){return styles$5[styleKey]}const actionType=error?"destructive":"progressive";const colorAction=wonderBlocksTokens.semanticColor.action.secondary[actionType];const states={unchecked:{border:wonderBlocksTokens.semanticColor.input.default.border,background:colorAction.default.background},checked:{border:colorAction.default.foreground,background:colorAction.default.background},error:{border:wonderBlocksTokens.semanticColor.input.error.border,background:wonderBlocksTokens.semanticColor.input.error.background}};let newStyles={};if(checked){newStyles={default:{backgroundColor:states.checked.background,borderColor:states.checked.border,borderWidth:size/4,":focus-visible":{outline:`${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,outlineOffset:1},":hover":{outline:`${wonderBlocksTokens.border.width.medium} solid ${colorAction.hover.border}`,outlineOffset:1},":active":{outline:`${wonderBlocksTokens.border.width.medium} solid ${colorAction.press.border}`,outlineOffset:1,borderColor:colorAction.press.border}}};}else {const currentState=error?states.error:states.unchecked;newStyles={default:{backgroundColor:currentState.background,borderColor:currentState.border,":focus-visible":{backgroundColor:error?states.error.background:colorAction.hover.background,outline:`${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,outlineOffset:-1},":hover":{backgroundColor:error?states.error.background:colorAction.hover.background,outline:`${wonderBlocksTokens.border.width.medium} solid ${colorAction.hover.border}`,outlineOffset:-1},":active":{backgroundColor:colorAction.press.background,outline:`${wonderBlocksTokens.border.width.medium} solid ${colorAction.press.border}`,outlineOffset:-1}}};}styles$5[styleKey]=aphrodite.StyleSheet.create(newStyles);return styles$5[styleKey]};
|
|
43
43
|
|
|
44
44
|
const ChoiceInternal=React__namespace.forwardRef(function ChoiceInternal(props,ref){const{checked,description,disabled=false,error=false,id,label,onChange,style,className,variant,...coreProps}=props;const handleClick=()=>{if(variant==="radio"&&checked){return}onChange(!checked);};const getChoiceCoreComponent=()=>{if(variant==="radio"){return RadioCore}else {return CheckboxCore}};const getLabel=id=>{return jsxRuntime.jsx(wonderBlocksTypography.LabelMedium,{style:[styles$4.label,disabled&&styles$4.disabledLabel],children:jsxRuntime.jsx("label",{htmlFor:id,children:label})})};const getDescription=id=>{return jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{style:styles$4.description,id:id,children:description})};const ChoiceCore=getChoiceCoreComponent();return jsxRuntime.jsx(wonderBlocksCore.Id,{id:id,children:uniqueId=>{const descriptionId=description?`${uniqueId}-description`:undefined;return jsxRuntime.jsxs(wonderBlocksCore.View,{style:style,className:className,children:[jsxRuntime.jsxs(wonderBlocksCore.View,{style:styles$4.wrapper,tabIndex:-1,children:[jsxRuntime.jsx(ChoiceCore,{...coreProps,id:uniqueId,checked:checked,"aria-describedby":descriptionId,onClick:handleClick,disabled:disabled,error:error,ref:ref}),jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xSmall_8}),label&&getLabel(uniqueId)]}),description&&getDescription(descriptionId)]})}})});const styles$4=aphrodite.StyleSheet.create({wrapper:{flexDirection:"row",alignItems:"flex-start",outline:"none"},label:{marginTop:-2},disabledLabel:{color:wonderBlocksTokens.semanticColor.action.secondary.disabled.foreground},description:{marginLeft:wonderBlocksTokens.spacing.medium_16+wonderBlocksTokens.spacing.xSmall_8,marginTop:wonderBlocksTokens.spacing.xxxSmall_4,color:wonderBlocksTokens.semanticColor.text.secondary}});
|
|
45
45
|
|
|
@@ -57,13 +57,13 @@ const StyledFieldset=wonderBlocksCore.addStyle("fieldset");const StyledLegend=wo
|
|
|
57
57
|
|
|
58
58
|
const defaultErrorMessage="This field is required.";const useFieldValidation=({value,disabled=false,validate,onValidate,required=false,instantValidation=true})=>{const[errorMessage,setErrorMessage]=React__namespace.useState(()=>validate&&value!==""&&!disabled&&validate(value)||null);const onChangeValidation=newValue=>{if(instantValidation){handleValidation(newValue);}else {setErrorMessage(null);if(onValidate){onValidate(null);}}};const onBlurValidation=newValue=>{if(!instantValidation){if(newValue||required){handleValidation(newValue);}}};const handleValidation=newValue=>{if(disabled){return}if(validate){const error=validate(newValue)||null;setErrorMessage(error);if(onValidate){onValidate(error);}}else if(required){const requiredString=typeof required==="string"?required:defaultErrorMessage;const error=newValue?null:requiredString;setErrorMessage(error);if(onValidate){onValidate(error);}}};wonderBlocksCore.useOnMountEffect(()=>{if(value!==""){handleValidation(value);}});return {errorMessage,onBlurValidation,onChangeValidation}};
|
|
59
59
|
|
|
60
|
-
const StyledInput=wonderBlocksCore.addStyle("input");const TextField=props=>{const{id,type="text",value,name,disabled=false,error,validate,onValidate,required,placeholder,style,testId,readOnly,autoFocus,autoComplete,forwardedRef,instantValidation=true,onKeyDown,onChange,onFocus,onBlur,...otherProps}=props;const{errorMessage,onBlurValidation,onChangeValidation}=useFieldValidation({value,required,disabled,instantValidation,validate,onValidate});const hasError=error||!!errorMessage;const handleChange=event=>{const newValue=event.target.value;onChangeValidation(newValue);onChange(newValue);};const handleFocus=event=>{if(onFocus){onFocus(event);}};const handleBlur=event=>{onBlurValidation(event.target.value);if(onBlur){onBlur(event);}};return jsxRuntime.jsx(wonderBlocksCore.Id,{id:id,children:uniqueId=>jsxRuntime.jsx(StyledInput,{style:[styles$2.input,wonderBlocksTypography.styles.LabelMedium,styles$2.default,!disabled&&styles$2.defaultFocus,disabled&&styles$2.disabled,hasError&&styles$2.error,style],id:uniqueId,type:type,placeholder:placeholder,value:value,name:name,"aria-disabled":disabled,"aria-required":!!required,onChange:handleChange,onKeyDown:disabled?undefined:onKeyDown,onFocus:handleFocus,onBlur:handleBlur,"data-testid":testId,readOnly:readOnly||disabled,autoFocus:autoFocus,autoComplete:autoComplete,ref:forwardedRef,"aria-invalid":hasError,...otherProps})})};const
|
|
60
|
+
const StyledInput=wonderBlocksCore.addStyle("input");const TextField=props=>{const{id,type="text",value,name,disabled=false,error,validate,onValidate,required,placeholder,style,testId,readOnly,autoFocus,autoComplete,forwardedRef,instantValidation=true,onKeyDown,onChange,onFocus,onBlur,...otherProps}=props;const{errorMessage,onBlurValidation,onChangeValidation}=useFieldValidation({value,required,disabled,instantValidation,validate,onValidate});const hasError=error||!!errorMessage;const handleChange=event=>{const newValue=event.target.value;onChangeValidation(newValue);onChange(newValue);};const handleFocus=event=>{if(onFocus){onFocus(event);}};const handleBlur=event=>{onBlurValidation(event.target.value);if(onBlur){onBlur(event);}};return jsxRuntime.jsx(wonderBlocksCore.Id,{id:id,children:uniqueId=>jsxRuntime.jsx(StyledInput,{style:[styles$2.input,wonderBlocksTypography.styles.LabelMedium,styles$2.default,!disabled&&styles$2.defaultFocus,disabled&&styles$2.disabled,hasError&&styles$2.error,style],id:uniqueId,type:type,placeholder:placeholder,value:value,name:name,"aria-disabled":disabled,"aria-required":!!required,onChange:handleChange,onKeyDown:disabled?undefined:onKeyDown,onFocus:handleFocus,onBlur:handleBlur,"data-testid":testId,readOnly:readOnly||disabled,autoFocus:autoFocus,autoComplete:autoComplete,ref:forwardedRef,"aria-invalid":hasError,...otherProps})})};const styles$2=aphrodite.StyleSheet.create({input:{width:"100%",height:40,borderRadius:wonderBlocksTokens.border.radius.radius_040,boxSizing:"border-box",paddingLeft:wonderBlocksTokens.spacing.medium_16,margin:0},default:{background:wonderBlocksTokens.semanticColor.input.default.background,border:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.input.default.border}`,color:wonderBlocksTokens.semanticColor.input.default.foreground,"::placeholder":{color:wonderBlocksTokens.semanticColor.input.default.placeholder}},defaultFocus:{":focus-visible":{borderColor:wonderBlocksTokens.semanticColor.focus.outer,outline:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,outlineOffset:-2}},error:{background:wonderBlocksTokens.semanticColor.input.error.background,border:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.input.error.border}`,color:wonderBlocksTokens.semanticColor.input.error.foreground,"::placeholder":{color:wonderBlocksTokens.semanticColor.input.default.placeholder},":focus-visible":{outlineColor:wonderBlocksTokens.semanticColor.focus.outer,outline:`${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`}},disabled:{background:wonderBlocksTokens.semanticColor.input.disabled.background,border:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.input.disabled.border}`,color:wonderBlocksTokens.semanticColor.input.disabled.foreground,"::placeholder":{color:wonderBlocksTokens.semanticColor.input.disabled.placeholder},cursor:"not-allowed",":focus-visible":{outline:`${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,outlineOffset:-3}}});var TextField$1 = React__namespace.forwardRef((props,ref)=>jsxRuntime.jsx(TextField,{...props,forwardedRef:ref}));
|
|
61
61
|
|
|
62
62
|
const StyledSpan=wonderBlocksCore.addStyle("span");class FieldHeading extends React__namespace.Component{renderLabel(){const{label,id,required,testId}=this.props;const requiredIcon=jsxRuntime.jsxs(StyledSpan,{style:styles$1.required,"aria-hidden":true,children:[" ","*"]});return jsxRuntime.jsxs(React__namespace.Fragment,{children:[jsxRuntime.jsxs(wonderBlocksTypography.LabelMedium,{style:styles$1.label,tag:"label",htmlFor:id&&`${id}-field`,testId:testId&&`${testId}-label`,children:[label,required&&requiredIcon]}),jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxxSmall_4})]})}maybeRenderDescription(){const{description,testId}=this.props;if(!description){return null}return jsxRuntime.jsxs(React__namespace.Fragment,{children:[jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{style:styles$1.description,testId:testId&&`${testId}-description`,children:description}),jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxxSmall_4})]})}maybeRenderError(){const{error,id,testId}=this.props;if(!error){return null}return jsxRuntime.jsxs(React__namespace.Fragment,{children:[jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{style:styles$1.error,role:"alert",id:id&&`${id}-error`,testId:testId&&`${testId}-error`,children:error})]})}render(){const{field,style}=this.props;return jsxRuntime.jsxs(wonderBlocksCore.View,{style:style,children:[this.renderLabel(),this.maybeRenderDescription(),jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xSmall_8}),field,this.maybeRenderError()]})}}const styles$1=aphrodite.StyleSheet.create({label:{color:wonderBlocksTokens.semanticColor.text.primary},description:{color:wonderBlocksTokens.semanticColor.text.secondary},error:{color:wonderBlocksTokens.semanticColor.status.critical.foreground},required:{color:wonderBlocksTokens.semanticColor.status.critical.foreground}});
|
|
63
63
|
|
|
64
64
|
class LabeledTextField extends React__namespace.Component{render(){const{id,type,label,description,value,disabled,required,validate,onChange,onKeyDown,placeholder,style,testId,readOnly,autoComplete,forwardedRef,ariaDescribedby,name,onValidate,onFocus,onBlur,...otherProps}=this.props;return jsxRuntime.jsx(wonderBlocksCore.Id,{id:id,children:uniqueId=>jsxRuntime.jsx(FieldHeading,{id:uniqueId,testId:testId,style:style,field:jsxRuntime.jsx(TextField$1,{id:`${uniqueId}-field`,"aria-describedby":ariaDescribedby?ariaDescribedby:`${uniqueId}-error`,"aria-required":required?"true":"false",required:required,testId:testId&&`${testId}-field`,type:type,value:value,placeholder:placeholder,disabled:disabled,validate:validate,onValidate:this.handleValidate,onChange:onChange,onKeyDown:onKeyDown,onFocus:this.handleFocus,onBlur:this.handleBlur,readOnly:readOnly,autoComplete:autoComplete,ref:forwardedRef,name:name,...otherProps}),label:label,description:description,required:!!required,error:!this.state.focused&&this.state.error||""})})}constructor(props){super(props),this.handleValidate=errorMessage=>{const{onValidate}=this.props;this.setState({error:errorMessage},()=>{if(onValidate){onValidate(errorMessage);}});},this.handleFocus=event=>{const{onFocus}=this.props;this.setState({focused:true},()=>{if(onFocus){onFocus(event);}});},this.handleBlur=event=>{const{onBlur}=this.props;this.setState({focused:false},()=>{if(onBlur){onBlur(event);}});};this.state={error:null,focused:false};}}LabeledTextField.defaultProps={type:"text",disabled:false};var labeledTextField = React__namespace.forwardRef((props,ref)=>jsxRuntime.jsx(LabeledTextField,{...props,forwardedRef:ref}));
|
|
65
65
|
|
|
66
|
-
const StyledTextarea=wonderBlocksCore.addStyle("textarea");const TextArea=React__namespace.forwardRef(function TextArea(props,ref){const{onChange,value,placeholder,disabled,id,testId,style,readOnly,autoComplete,name,className,autoFocus,rows,spellCheck,wrap,minLength,maxLength,onClick,onKeyDown,onKeyUp,onFocus,onBlur,validate,onValidate,required,resizeType,rootStyle,error,instantValidation=true,...otherProps}=props;const{errorMessage,onBlurValidation,onChangeValidation}=useFieldValidation({value,disabled,validate,onValidate,required,instantValidation});const hasError=error||!!errorMessage;const generatedUniqueId=React.useId();const uniqueId=id??generatedUniqueId;const handleChange=event=>{const newValue=event.target.value;onChangeValidation(newValue);onChange(newValue);};const handleBlur=event=>{onBlurValidation(event.target.value);if(onBlur){onBlur(event);}};return jsxRuntime.jsx(wonderBlocksCore.View,{style:[{width:"100%"},rootStyle],children:jsxRuntime.jsx(StyledTextarea,{id:uniqueId,"data-testid":testId,ref:ref,className:className,style:[styles.textarea,wonderBlocksTypography.styles.LabelMedium,resizeType&&resizeStyles[resizeType],styles.default,!disabled&&styles.defaultFocus,disabled&&styles.disabled,hasError&&styles.error,style],value:value,onChange:handleChange,placeholder:placeholder,"aria-disabled":disabled,readOnly:readOnly||disabled,autoComplete:autoComplete,name:name,autoFocus:autoFocus,rows:rows,spellCheck:spellCheck,wrap:wrap,minLength:minLength,maxLength:maxLength,"aria-required":!!required,onClick:disabled?undefined:onClick,onKeyDown:disabled?undefined:onKeyDown,onKeyUp:disabled?undefined:onKeyUp,onFocus:onFocus,onBlur:handleBlur,required:!!required,...otherProps,"aria-invalid":hasError})})});const VERTICAL_SPACING_PX=10;const
|
|
66
|
+
const StyledTextarea=wonderBlocksCore.addStyle("textarea");const TextArea=React__namespace.forwardRef(function TextArea(props,ref){const{onChange,value,placeholder,disabled,id,testId,style,readOnly,autoComplete,name,className,autoFocus,rows,spellCheck,wrap,minLength,maxLength,onClick,onKeyDown,onKeyUp,onFocus,onBlur,validate,onValidate,required,resizeType,rootStyle,error,instantValidation=true,...otherProps}=props;const{errorMessage,onBlurValidation,onChangeValidation}=useFieldValidation({value,disabled,validate,onValidate,required,instantValidation});const hasError=error||!!errorMessage;const generatedUniqueId=React.useId();const uniqueId=id??generatedUniqueId;const handleChange=event=>{const newValue=event.target.value;onChangeValidation(newValue);onChange(newValue);};const handleBlur=event=>{onBlurValidation(event.target.value);if(onBlur){onBlur(event);}};return jsxRuntime.jsx(wonderBlocksCore.View,{style:[{width:"100%"},rootStyle],children:jsxRuntime.jsx(StyledTextarea,{id:uniqueId,"data-testid":testId,ref:ref,className:className,style:[styles.textarea,wonderBlocksTypography.styles.LabelMedium,resizeType&&resizeStyles[resizeType],styles.default,!disabled&&styles.defaultFocus,disabled&&styles.disabled,hasError&&styles.error,style],value:value,onChange:handleChange,placeholder:placeholder,"aria-disabled":disabled,readOnly:readOnly||disabled,autoComplete:autoComplete,name:name,autoFocus:autoFocus,rows:rows,spellCheck:spellCheck,wrap:wrap,minLength:minLength,maxLength:maxLength,"aria-required":!!required,onClick:disabled?undefined:onClick,onKeyDown:disabled?undefined:onKeyDown,onKeyUp:disabled?undefined:onKeyUp,onFocus:onFocus,onBlur:handleBlur,required:!!required,...otherProps,"aria-invalid":hasError})})});const VERTICAL_SPACING_PX=10;const styles=aphrodite.StyleSheet.create({textarea:{borderRadius:wonderBlocksTokens.border.radius.radius_040,boxSizing:"border-box",padding:`${VERTICAL_SPACING_PX}px ${wonderBlocksTokens.spacing.medium_16}px`,minHeight:`calc(${VERTICAL_SPACING_PX*2+2}px + ${wonderBlocksTokens.font.lineHeight.medium})`},default:{background:wonderBlocksTokens.semanticColor.input.default.background,border:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.input.default.border}`,color:wonderBlocksTokens.semanticColor.input.default.foreground,"::placeholder":{color:wonderBlocksTokens.semanticColor.input.default.placeholder}},defaultFocus:{":focus-visible":{borderColor:wonderBlocksTokens.semanticColor.focus.outer,outline:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,outlineOffset:-2}},disabled:{background:wonderBlocksTokens.semanticColor.input.disabled.background,border:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.input.disabled.border}`,color:wonderBlocksTokens.semanticColor.input.disabled.foreground,"::placeholder":{color:wonderBlocksTokens.semanticColor.input.disabled.placeholder},cursor:"not-allowed",":focus-visible":{outline:`${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,outlineOffset:-3}},error:{background:wonderBlocksTokens.semanticColor.input.error.background,border:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.input.error.border}`,color:wonderBlocksTokens.semanticColor.input.error.foreground,"::placeholder":{color:wonderBlocksTokens.semanticColor.input.default.placeholder},":focus-visible":{outline:`${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,borderColor:wonderBlocksTokens.semanticColor.input.error.border}}});const resizeStyles=aphrodite.StyleSheet.create({both:{resize:"both"},none:{resize:"none"},horizontal:{resize:"horizontal"},vertical:{resize:"vertical"}});
|
|
67
67
|
|
|
68
68
|
exports.Checkbox = Checkbox;
|
|
69
69
|
exports.CheckboxGroup = CheckboxGroup;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khanacademy/wonder-blocks-form",
|
|
3
|
-
"version": "7.1.
|
|
3
|
+
"version": "7.1.13",
|
|
4
4
|
"design": "v1",
|
|
5
5
|
"description": "Form components for Wonder Blocks.",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -12,12 +12,12 @@
|
|
|
12
12
|
"access": "public"
|
|
13
13
|
},
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@khanacademy/wonder-blocks-clickable": "7.1.
|
|
15
|
+
"@khanacademy/wonder-blocks-clickable": "7.1.1",
|
|
16
16
|
"@khanacademy/wonder-blocks-core": "12.3.0",
|
|
17
17
|
"@khanacademy/wonder-blocks-icon": "5.1.4",
|
|
18
|
-
"@khanacademy/wonder-blocks-layout": "3.1.
|
|
19
|
-
"@khanacademy/wonder-blocks-tokens": "10.
|
|
20
|
-
"@khanacademy/wonder-blocks-typography": "3.2.
|
|
18
|
+
"@khanacademy/wonder-blocks-layout": "3.1.12",
|
|
19
|
+
"@khanacademy/wonder-blocks-tokens": "10.1.0",
|
|
20
|
+
"@khanacademy/wonder-blocks-typography": "3.2.2"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|
|
23
23
|
"@phosphor-icons/core": "^2.0.2",
|