@khanacademy/wonder-blocks-form 7.5.7 → 7.5.9
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/.turbo/turbo-build$colon$css.log +1 -1
- package/CHANGELOG.md +33 -0
- package/dist/es/index.js +6 -7
- package/dist/index.js +5 -6
- package/package.json +6 -6
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @khanacademy/wonder-blocks-form@7.5.
|
|
2
|
+
> @khanacademy/wonder-blocks-form@7.5.9 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-form
|
|
3
3
|
> pnpm exec wonder-blocks-tokens .
|
|
4
4
|
|
|
5
5
|
CSS variables generated successfully in: /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-form/dist/css
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,38 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-form
|
|
2
2
|
|
|
3
|
+
## 7.5.9
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 0fadf9f: Migrate internal usage of the deprecated `spacing` primitive token to the
|
|
8
|
+
`sizing` token. No public API or visual changes — each `spacing.<name>`
|
|
9
|
+
value maps 1:1 to a `sizing.size_<n>` token with the same rendered value.
|
|
10
|
+
A handful of internal `Strut` usages are replaced with CSS `gap` /
|
|
11
|
+
`margin` (since `sizing.X` is a CSS variable string at runtime, not a
|
|
12
|
+
number). Layout-spec and SVG sites that genuinely need JS numbers use
|
|
13
|
+
hardcoded values that mirror the matching `sizing.size_*` tokens (with
|
|
14
|
+
comments). Prep for removal of the `spacing` export in a future major
|
|
15
|
+
release of `@khanacademy/wonder-blocks-tokens`.
|
|
16
|
+
- Updated dependencies [0fadf9f]
|
|
17
|
+
- Updated dependencies [c1c74df]
|
|
18
|
+
- Updated dependencies [72c5272]
|
|
19
|
+
- @khanacademy/wonder-blocks-layout@3.1.49
|
|
20
|
+
- @khanacademy/wonder-blocks-tokens@16.4.0
|
|
21
|
+
- @khanacademy/wonder-blocks-clickable@8.1.8
|
|
22
|
+
- @khanacademy/wonder-blocks-icon@5.3.12
|
|
23
|
+
- @khanacademy/wonder-blocks-typography@4.3.2
|
|
24
|
+
|
|
25
|
+
## 7.5.8
|
|
26
|
+
|
|
27
|
+
### Patch Changes
|
|
28
|
+
|
|
29
|
+
- Updated dependencies [40f217b]
|
|
30
|
+
- @khanacademy/wonder-blocks-tokens@16.3.0
|
|
31
|
+
- @khanacademy/wonder-blocks-clickable@8.1.7
|
|
32
|
+
- @khanacademy/wonder-blocks-icon@5.3.11
|
|
33
|
+
- @khanacademy/wonder-blocks-layout@3.1.48
|
|
34
|
+
- @khanacademy/wonder-blocks-typography@4.3.1
|
|
35
|
+
|
|
3
36
|
## 7.5.7
|
|
4
37
|
|
|
5
38
|
### Patch Changes
|
package/dist/es/index.js
CHANGED
|
@@ -3,13 +3,12 @@ import * as React from 'react';
|
|
|
3
3
|
import { useId } from 'react';
|
|
4
4
|
import { StyleSheet } from 'aphrodite';
|
|
5
5
|
import { addStyle, View, Id, useOnMountEffect } from '@khanacademy/wonder-blocks-core';
|
|
6
|
-
import { sizing, semanticColor, border, mapValuesToCssVars,
|
|
6
|
+
import { sizing, semanticColor, border, mapValuesToCssVars, font } from '@khanacademy/wonder-blocks-tokens';
|
|
7
7
|
import { BodyText, styles as styles$7 } from '@khanacademy/wonder-blocks-typography';
|
|
8
8
|
import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
|
|
9
9
|
import checkIcon from '@phosphor-icons/core/bold/check-bold.svg';
|
|
10
10
|
import minusIcon from '@phosphor-icons/core/bold/minus-bold.svg';
|
|
11
11
|
import { focusStyles } from '@khanacademy/wonder-blocks-styles';
|
|
12
|
-
import { Strut } from '@khanacademy/wonder-blocks-layout';
|
|
13
12
|
|
|
14
13
|
var themeDefault = {choice:{inputWrapper:{layout:{padding:sizing.size_0,margin:sizing.size_0}}},description:{color:{foreground:semanticColor.core.foreground.neutral.default}},field:{border:{radius:border.radius.radius_040,width:{error:border.width.thin,press:border.width.none}},sizing:{height:sizing.size_400},layout:{paddingBlock:sizing.size_100,paddingInline:sizing.size_160}}};
|
|
15
14
|
|
|
@@ -21,7 +20,7 @@ function mapCheckedToAriaChecked(value){switch(value){case true:return "true";ca
|
|
|
21
20
|
|
|
22
21
|
const StyledInput$1=addStyle("input");const RadioCore=React.forwardRef(function RadioCore(props,ref){const innerRef=React.useRef(null);const handleChange=()=>{return};const{checked,disabled,error,groupName,id,testId,...sharedProps}=props;const stateStyles=_generateStyles(checked,error,disabled);const defaultStyle=[sharedStyles.inputReset,sharedStyles.default,stateStyles.default];const wrapperStyle=[sharedStyles.inputWrapper,stateStyles.inputWrapper];const handleWrapperClick=e=>{if(!disabled&&e.target!==innerRef?.current){innerRef?.current?.click();}};return jsx(React.Fragment,{children:jsxs(View,{style:wrapperStyle,onClick:handleWrapperClick,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:node=>{innerRef.current=node;if(typeof ref==="function"){ref(node);}else if(ref!=null){ref.current=node;}}}),disabled&&checked&&jsx("span",{style:stateStyles.disabledChecked})]})})});const sharedStyles=StyleSheet.create({inputWrapper:{padding:theme.choice.inputWrapper.layout.padding,margin:theme.choice.inputWrapper.layout.margin,position:"relative"},inputReset:{appearance:"none",WebkitAppearance:"none",MozAppearance:"none"},default:{height:baseStyles.choice.sizing.size,width:baseStyles.choice.sizing.size,minHeight:baseStyles.choice.sizing.size,minWidth:baseStyles.choice.sizing.size,margin:0,outline:"none",boxSizing:"border-box",borderStyle:"solid",borderWidth:baseStyles.radio.border.width.default,borderRadius:baseStyles.radio.border.radius.default}});const styles$5={};const _generateStyles=(checked,error,disabled)=>{const styleKey=`${String(checked)}-${String(error)}-${String(disabled)}`;if(styles$5[styleKey]){return styles$5[styleKey]}let newStyles={};const currentState=error?"error":disabled?"disabled":"default";if(checked){const checkedStyles=colorStates.radio.checked[currentState];newStyles={inputWrapper:{":hover input:not([disabled])":{outline:`${border.width.medium} solid ${checkedStyles.hover.border}`,outlineOffset:1}},default:{backgroundColor:checkedStyles.rest.background,borderColor:checkedStyles.rest.border,borderWidth:`calc(${baseStyles.choice.sizing.size} / 4)`,":focus-visible:not([disabled])":focusStyles.focus[":focus-visible"],":active:not([disabled])":{outline:`${border.width.medium} solid ${checkedStyles.press.border}`,outlineOffset:1,borderColor:checkedStyles.press.border}},disabledChecked:{position:"absolute",top:`calc(${baseStyles.choice.sizing.size} * .25 + ${theme.choice.inputWrapper.layout.padding})`,left:`calc(${baseStyles.choice.sizing.size} * .25 + ${theme.choice.inputWrapper.layout.padding})`,height:`calc(${baseStyles.choice.sizing.size} / 2)`,width:`calc(${baseStyles.choice.sizing.size} / 2)`,borderRadius:baseStyles.radio.border.radius.default,backgroundColor:checkedStyles.rest.background}};}else {const uncheckedStyles=colorStates.radio.unchecked[currentState];newStyles={inputWrapper:{":hover input:not([disabled])":{backgroundColor:uncheckedStyles.hover.background,outline:`${border.width.medium} solid ${uncheckedStyles.hover.border}`,outlineOffset:-1}},default:{backgroundColor:uncheckedStyles.rest.background,borderColor:uncheckedStyles.rest.border,":focus-visible:not([disabled])":focusStyles.focus[":focus-visible"],":active:not([disabled])":{backgroundColor:uncheckedStyles.press.background,outline:`${border.width.medium} solid ${uncheckedStyles.press.border}`,outlineOffset:-1}}};}styles$5[styleKey]=StyleSheet.create(newStyles);return styles$5[styleKey]};
|
|
23
22
|
|
|
24
|
-
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(BodyText,{tag:"div",weight:"semi",style:[styles$4.label,disabled&&styles$4.disabledLabel],children:jsx("label",{htmlFor:id,children:label})})};const getDescription=id=>{return jsx(BodyText,{size:"small",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(View,{style:[styles$4.choiceWrapper],children:jsx(ChoiceCore,{...coreProps,id:uniqueId,checked:checked,"aria-describedby":descriptionId,onClick:handleClick,disabled:disabled,error:error,ref:ref})}),label&&getLabel(uniqueId)]}),description&&getDescription(descriptionId)]})}})});const styles$4=StyleSheet.create({wrapper:{gap:
|
|
23
|
+
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(BodyText,{tag:"div",weight:"semi",style:[styles$4.label,disabled&&styles$4.disabledLabel],children:jsx("label",{htmlFor:id,children:label})})};const getDescription=id=>{return jsx(BodyText,{size:"small",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(View,{style:[styles$4.choiceWrapper],children:jsx(ChoiceCore,{...coreProps,id:uniqueId,checked:checked,"aria-describedby":descriptionId,onClick:handleClick,disabled:disabled,error:error,ref:ref})}),label&&getLabel(uniqueId)]}),description&&getDescription(descriptionId)]})}})});const styles$4=StyleSheet.create({wrapper:{gap:sizing.size_080,lineHeight:font.body.lineHeight.small,flexDirection:"row",alignItems:"flex-start",outline:"none"},choiceWrapper:{display:"block",marginBlockStart:sizing.size_010},label:{color:semanticColor.core.foreground.neutral.strong,lineHeight:font.body.lineHeight.small},disabledLabel:{color:semanticColor.core.foreground.disabled.subtle},description:{marginInlineStart:`calc(${sizing.size_160} + ${sizing.size_080})`,marginBlockStart:sizing.size_040,color:theme.description.color.foreground}});
|
|
25
24
|
|
|
26
25
|
const Checkbox=React.forwardRef(function Checkbox(props,ref){const{disabled=false,error=false}=props;return jsx(ChoiceInternal,{...props,variant:"checkbox",disabled:disabled,error:error,ref:ref})});
|
|
27
26
|
|
|
@@ -29,17 +28,17 @@ const Radio=React.forwardRef(function Radio(props,ref){const{disabled=false,erro
|
|
|
29
28
|
|
|
30
29
|
const Choice=React.forwardRef(function Choice(props,ref){const{checked=false,disabled=false,onChange=()=>{},value,variant,...remainingProps}=props;const getChoiceComponent=variant=>{if(variant==="checkbox"){return Checkbox}else {return Radio}};const ChoiceComponent=getChoiceComponent(variant);return jsx(ChoiceComponent,{...remainingProps,checked:checked,disabled:disabled,onChange:onChange,ref:ref})});
|
|
31
30
|
|
|
32
|
-
const styles$3=StyleSheet.create({fieldset:{display:"flex",flexDirection:"column",border:"none",padding:0,margin:0},legend:{padding:0,width:"100%"},description:{
|
|
31
|
+
const styles$3=StyleSheet.create({fieldset:{display:"flex",flexDirection:"column",border:"none",padding:0,margin:0},legend:{padding:0,width:"100%"},description:{color:theme.description.color.foreground,marginBlockStart:sizing.size_040},error:{color:semanticColor.status.critical.foreground,marginBlockStart:sizing.size_040},firstChoiceMetaSpacing:{marginBlockStart:sizing.size_120},choiceLineGap:{marginBlockStart:sizing.size_080}});
|
|
33
32
|
|
|
34
|
-
const StyledFieldset$1=addStyle("fieldset");const StyledLegend$1=addStyle("legend");const CheckboxGroup=React.forwardRef(function CheckboxGroup(props,ref){const{children,label,description,errorMessage,groupName,onChange,selectedValues,style,testId}=props;const handleChange=(changedValue,originalCheckedState)=>{if(originalCheckedState){const index=selectedValues.indexOf(changedValue);const updatedSelection=[...selectedValues.slice(0,index),...selectedValues.slice(index+1)];onChange(updatedSelection);}else {onChange([...selectedValues,changedValue]);}};const allChildren=React.Children.toArray(children).filter(Boolean);return jsxs(StyledFieldset$1,{"data-testid":testId,style:[styles$3.fieldset,style],ref:ref,children:[label&&jsx(StyledLegend$1,{style:styles$3.legend,children:jsx(BodyText,{tag:"span",children:label})}),description&&jsx(BodyText,{size:"small",tag:"span",style:styles$3.description,children:description}),errorMessage&&jsx(BodyText,{size:"small",tag:"span",style:styles$3.error,children:errorMessage}),
|
|
33
|
+
const StyledFieldset$1=addStyle("fieldset");const StyledLegend$1=addStyle("legend");const CheckboxGroup=React.forwardRef(function CheckboxGroup(props,ref){const{children,label,description,errorMessage,groupName,onChange,selectedValues,style,testId}=props;const handleChange=(changedValue,originalCheckedState)=>{if(originalCheckedState){const index=selectedValues.indexOf(changedValue);const updatedSelection=[...selectedValues.slice(0,index),...selectedValues.slice(index+1)];onChange(updatedSelection);}else {onChange([...selectedValues,changedValue]);}};const allChildren=React.Children.toArray(children).filter(Boolean);return jsxs(StyledFieldset$1,{"data-testid":testId,style:[styles$3.fieldset,style],ref:ref,children:[label&&jsx(StyledLegend$1,{style:styles$3.legend,children:jsx(BodyText,{tag:"span",children:label})}),description&&jsx(BodyText,{size:"small",tag:"span",style:styles$3.description,children:description}),errorMessage&&jsx(BodyText,{size:"small",tag:"span",style:styles$3.error,children:errorMessage}),allChildren.map((child,index)=>{const{style,value}=child.props;const checked=selectedValues.includes(value);const hasMeta=!!(label||description||errorMessage);return React.cloneElement(child,{checked:checked,error:!!errorMessage,groupName:groupName,id:`${groupName}-${value}`,key:value,onChange:()=>handleChange(value,checked),style:[index===0&&hasMeta&&styles$3.firstChoiceMetaSpacing,index>0&&styles$3.choiceLineGap,style],variant:"checkbox"})})]})});
|
|
35
34
|
|
|
36
|
-
const StyledFieldset=addStyle("fieldset");const StyledLegend=addStyle("legend");const RadioGroup=React.forwardRef(function RadioGroup(props,ref){const{children,label,description,errorMessage,groupName,onChange,selectedValue,style,testId}=props;const allChildren=React.Children.toArray(children).filter(Boolean);return jsxs(StyledFieldset,{"data-testid":testId,style:[styles$3.fieldset,style],ref:ref,children:[label&&jsx(StyledLegend,{style:styles$3.legend,children:jsx(BodyText,{tag:"span",children:label})}),description&&jsx(BodyText,{size:"small",style:styles$3.description,children:description}),errorMessage&&jsx(BodyText,{size:"small",style:styles$3.error,children:errorMessage}),
|
|
35
|
+
const StyledFieldset=addStyle("fieldset");const StyledLegend=addStyle("legend");const RadioGroup=React.forwardRef(function RadioGroup(props,ref){const{children,label,description,errorMessage,groupName,onChange,selectedValue,style,testId}=props;const allChildren=React.Children.toArray(children).filter(Boolean);return jsxs(StyledFieldset,{"data-testid":testId,style:[styles$3.fieldset,style],ref:ref,children:[label&&jsx(StyledLegend,{style:styles$3.legend,children:jsx(BodyText,{tag:"span",children:label})}),description&&jsx(BodyText,{size:"small",style:styles$3.description,children:description}),errorMessage&&jsx(BodyText,{size:"small",style:styles$3.error,children:errorMessage}),allChildren.map((child,index)=>{const{style,value}=child.props;const checked=selectedValue===value;const hasMeta=!!(label||description||errorMessage);return React.cloneElement(child,{checked:checked,error:!!errorMessage,groupName:groupName,id:`${groupName}-${value}`,key:value,onChange:()=>onChange(value),style:[index===0&&hasMeta&&styles$3.firstChoiceMetaSpacing,index>0&&styles$3.choiceLineGap,style],variant:"radio"})})]})});
|
|
37
36
|
|
|
38
37
|
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}};
|
|
39
38
|
|
|
40
39
|
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,onPaste,...otherProps}=props;const{errorMessage,onBlurValidation,onChangeValidation}=useFieldValidation({value,required,disabled,instantValidation,validate,onValidate});const hasError=error||!!errorMessage;const handleChange=event=>{if(type==="whole-number"){const newValue=event.target.value.replace(/[^0-9]/g,"");onChangeValidation(newValue);onChange(newValue);return}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);}};const handleKeyDown=event=>{if(type==="whole-number"){if(event.key==="."||event.key==="+"||event.key==="-"||event.key==="e"||event.key==="E"){event.preventDefault();}}onKeyDown?.(event);};return jsx(Id,{id:id,children:uniqueId=>jsx(StyledInput,{style:[styles$2.input,styles$7.BodyTextMediumMediumWeight,styles$2.default,disabled&&styles$2.disabled,hasError&&styles$2.error,readOnly&&styles$2.readOnly,style],id:uniqueId,type:type==="whole-number"?"number":type,placeholder:placeholder,value:value,name:name,"aria-disabled":disabled,"aria-required":!!required,onChange:handleChange,onKeyDown:disabled?undefined:handleKeyDown,onFocus:handleFocus,onBlur:handleBlur,onPaste:disabled?undefined:onPaste,"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:theme.field.sizing.height,borderRadius:theme.field.border.radius,boxSizing:"border-box",paddingInline:theme.field.layout.paddingInline,paddingBlock:theme.field.layout.paddingBlock,margin:sizing.size_0},readOnly:{background:semanticColor.input.readOnly.background,color:semanticColor.input.readOnly.text},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},...focusStyles.focus,[":active:not([aria-disabled='true']):not([readonly])"]:{boxShadow:`0 0 0 ${theme.field.border.width.press} ${semanticColor.input.default.border}`}},error:{background:semanticColor.input.error.background,border:`${theme.field.border.width.error} solid ${semanticColor.input.error.border}`,color:semanticColor.input.error.foreground,"::placeholder":{color:semanticColor.input.default.placeholder}},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"}});var TextField$1 = React.forwardRef((props,ref)=>jsx(TextField,{...props,forwardedRef:ref}));
|
|
41
40
|
|
|
42
|
-
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(
|
|
41
|
+
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(BodyText,{style:[styles$1.label,styles$1.labelSpacing],tag:"label",htmlFor:id&&`${id}-field`,testId:testId&&`${testId}-label`,children:[label,required&&requiredIcon]})}maybeRenderDescription(){const{description,testId}=this.props;if(!description){return null}return jsx(BodyText,{size:"small",tag:"span",style:[styles$1.description,styles$1.descriptionSpacing],testId:testId&&`${testId}-description`,children:description})}maybeRenderError(){const{error,id,testId}=this.props;if(!error){return null}return jsx(BodyText,{size:"small",tag:"span",style:[styles$1.error,styles$1.errorSpacing],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(View,{style:styles$1.fieldSpacing,children:field}),this.maybeRenderError()]})}}const styles$1=StyleSheet.create({label:{color:semanticColor.core.foreground.neutral.strong},labelSpacing:{marginBlockEnd:sizing.size_040},description:{color:theme.description.color.foreground},descriptionSpacing:{marginBlockEnd:sizing.size_040},fieldSpacing:{marginBlockStart:sizing.size_080},error:{color:semanticColor.status.critical.foreground},errorSpacing:{marginBlockStart:sizing.size_120},required:{color:semanticColor.status.critical.foreground}});
|
|
43
42
|
|
|
44
43
|
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}));
|
|
45
44
|
|
package/dist/index.js
CHANGED
|
@@ -12,7 +12,6 @@ var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
|
|
|
12
12
|
var checkIcon = require('@phosphor-icons/core/bold/check-bold.svg');
|
|
13
13
|
var minusIcon = require('@phosphor-icons/core/bold/minus-bold.svg');
|
|
14
14
|
var wonderBlocksStyles = require('@khanacademy/wonder-blocks-styles');
|
|
15
|
-
var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
|
|
16
15
|
|
|
17
16
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
18
17
|
|
|
@@ -48,7 +47,7 @@ function mapCheckedToAriaChecked(value){switch(value){case true:return "true";ca
|
|
|
48
47
|
|
|
49
48
|
const StyledInput$1=wonderBlocksCore.addStyle("input");const RadioCore=React__namespace.forwardRef(function RadioCore(props,ref){const innerRef=React__namespace.useRef(null);const handleChange=()=>{return};const{checked,disabled,error,groupName,id,testId,...sharedProps}=props;const stateStyles=_generateStyles(checked,error,disabled);const defaultStyle=[sharedStyles.inputReset,sharedStyles.default,stateStyles.default];const wrapperStyle=[sharedStyles.inputWrapper,stateStyles.inputWrapper];const handleWrapperClick=e=>{if(!disabled&&e.target!==innerRef?.current){innerRef?.current?.click();}};return jsxRuntime.jsx(React__namespace.Fragment,{children:jsxRuntime.jsxs(wonderBlocksCore.View,{style:wrapperStyle,onClick:handleWrapperClick,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:node=>{innerRef.current=node;if(typeof ref==="function"){ref(node);}else if(ref!=null){ref.current=node;}}}),disabled&&checked&&jsxRuntime.jsx("span",{style:stateStyles.disabledChecked})]})})});const sharedStyles=aphrodite.StyleSheet.create({inputWrapper:{padding:theme.choice.inputWrapper.layout.padding,margin:theme.choice.inputWrapper.layout.margin,position:"relative"},inputReset:{appearance:"none",WebkitAppearance:"none",MozAppearance:"none"},default:{height:baseStyles.choice.sizing.size,width:baseStyles.choice.sizing.size,minHeight:baseStyles.choice.sizing.size,minWidth:baseStyles.choice.sizing.size,margin:0,outline:"none",boxSizing:"border-box",borderStyle:"solid",borderWidth:baseStyles.radio.border.width.default,borderRadius:baseStyles.radio.border.radius.default}});const styles$5={};const _generateStyles=(checked,error,disabled)=>{const styleKey=`${String(checked)}-${String(error)}-${String(disabled)}`;if(styles$5[styleKey]){return styles$5[styleKey]}let newStyles={};const currentState=error?"error":disabled?"disabled":"default";if(checked){const checkedStyles=colorStates.radio.checked[currentState];newStyles={inputWrapper:{":hover input:not([disabled])":{outline:`${wonderBlocksTokens.border.width.medium} solid ${checkedStyles.hover.border}`,outlineOffset:1}},default:{backgroundColor:checkedStyles.rest.background,borderColor:checkedStyles.rest.border,borderWidth:`calc(${baseStyles.choice.sizing.size} / 4)`,":focus-visible:not([disabled])":wonderBlocksStyles.focusStyles.focus[":focus-visible"],":active:not([disabled])":{outline:`${wonderBlocksTokens.border.width.medium} solid ${checkedStyles.press.border}`,outlineOffset:1,borderColor:checkedStyles.press.border}},disabledChecked:{position:"absolute",top:`calc(${baseStyles.choice.sizing.size} * .25 + ${theme.choice.inputWrapper.layout.padding})`,left:`calc(${baseStyles.choice.sizing.size} * .25 + ${theme.choice.inputWrapper.layout.padding})`,height:`calc(${baseStyles.choice.sizing.size} / 2)`,width:`calc(${baseStyles.choice.sizing.size} / 2)`,borderRadius:baseStyles.radio.border.radius.default,backgroundColor:checkedStyles.rest.background}};}else {const uncheckedStyles=colorStates.radio.unchecked[currentState];newStyles={inputWrapper:{":hover input:not([disabled])":{backgroundColor:uncheckedStyles.hover.background,outline:`${wonderBlocksTokens.border.width.medium} solid ${uncheckedStyles.hover.border}`,outlineOffset:-1}},default:{backgroundColor:uncheckedStyles.rest.background,borderColor:uncheckedStyles.rest.border,":focus-visible:not([disabled])":wonderBlocksStyles.focusStyles.focus[":focus-visible"],":active:not([disabled])":{backgroundColor:uncheckedStyles.press.background,outline:`${wonderBlocksTokens.border.width.medium} solid ${uncheckedStyles.press.border}`,outlineOffset:-1}}};}styles$5[styleKey]=aphrodite.StyleSheet.create(newStyles);return styles$5[styleKey]};
|
|
50
49
|
|
|
51
|
-
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.BodyText,{tag:"div",weight:"semi",style:[styles$4.label,disabled&&styles$4.disabledLabel],children:jsxRuntime.jsx("label",{htmlFor:id,children:label})})};const getDescription=id=>{return jsxRuntime.jsx(wonderBlocksTypography.BodyText,{size:"small",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(wonderBlocksCore.View,{style:[styles$4.choiceWrapper],children:jsxRuntime.jsx(ChoiceCore,{...coreProps,id:uniqueId,checked:checked,"aria-describedby":descriptionId,onClick:handleClick,disabled:disabled,error:error,ref:ref})}),label&&getLabel(uniqueId)]}),description&&getDescription(descriptionId)]})}})});const styles$4=aphrodite.StyleSheet.create({wrapper:{gap:wonderBlocksTokens.
|
|
50
|
+
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.BodyText,{tag:"div",weight:"semi",style:[styles$4.label,disabled&&styles$4.disabledLabel],children:jsxRuntime.jsx("label",{htmlFor:id,children:label})})};const getDescription=id=>{return jsxRuntime.jsx(wonderBlocksTypography.BodyText,{size:"small",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(wonderBlocksCore.View,{style:[styles$4.choiceWrapper],children:jsxRuntime.jsx(ChoiceCore,{...coreProps,id:uniqueId,checked:checked,"aria-describedby":descriptionId,onClick:handleClick,disabled:disabled,error:error,ref:ref})}),label&&getLabel(uniqueId)]}),description&&getDescription(descriptionId)]})}})});const styles$4=aphrodite.StyleSheet.create({wrapper:{gap:wonderBlocksTokens.sizing.size_080,lineHeight:wonderBlocksTokens.font.body.lineHeight.small,flexDirection:"row",alignItems:"flex-start",outline:"none"},choiceWrapper:{display:"block",marginBlockStart:wonderBlocksTokens.sizing.size_010},label:{color:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong,lineHeight:wonderBlocksTokens.font.body.lineHeight.small},disabledLabel:{color:wonderBlocksTokens.semanticColor.core.foreground.disabled.subtle},description:{marginInlineStart:`calc(${wonderBlocksTokens.sizing.size_160} + ${wonderBlocksTokens.sizing.size_080})`,marginBlockStart:wonderBlocksTokens.sizing.size_040,color:theme.description.color.foreground}});
|
|
52
51
|
|
|
53
52
|
const Checkbox=React__namespace.forwardRef(function Checkbox(props,ref){const{disabled=false,error=false}=props;return jsxRuntime.jsx(ChoiceInternal,{...props,variant:"checkbox",disabled:disabled,error:error,ref:ref})});
|
|
54
53
|
|
|
@@ -56,17 +55,17 @@ const Radio=React__namespace.forwardRef(function Radio(props,ref){const{disabled
|
|
|
56
55
|
|
|
57
56
|
const Choice=React__namespace.forwardRef(function Choice(props,ref){const{checked=false,disabled=false,onChange=()=>{},value,variant,...remainingProps}=props;const getChoiceComponent=variant=>{if(variant==="checkbox"){return Checkbox}else {return Radio}};const ChoiceComponent=getChoiceComponent(variant);return jsxRuntime.jsx(ChoiceComponent,{...remainingProps,checked:checked,disabled:disabled,onChange:onChange,ref:ref})});
|
|
58
57
|
|
|
59
|
-
const styles$3=aphrodite.StyleSheet.create({fieldset:{display:"flex",flexDirection:"column",border:"none",padding:0,margin:0},legend:{padding:0,width:"100%"},description:{
|
|
58
|
+
const styles$3=aphrodite.StyleSheet.create({fieldset:{display:"flex",flexDirection:"column",border:"none",padding:0,margin:0},legend:{padding:0,width:"100%"},description:{color:theme.description.color.foreground,marginBlockStart:wonderBlocksTokens.sizing.size_040},error:{color:wonderBlocksTokens.semanticColor.status.critical.foreground,marginBlockStart:wonderBlocksTokens.sizing.size_040},firstChoiceMetaSpacing:{marginBlockStart:wonderBlocksTokens.sizing.size_120},choiceLineGap:{marginBlockStart:wonderBlocksTokens.sizing.size_080}});
|
|
60
59
|
|
|
61
|
-
const StyledFieldset$1=wonderBlocksCore.addStyle("fieldset");const StyledLegend$1=wonderBlocksCore.addStyle("legend");const CheckboxGroup=React__namespace.forwardRef(function CheckboxGroup(props,ref){const{children,label,description,errorMessage,groupName,onChange,selectedValues,style,testId}=props;const handleChange=(changedValue,originalCheckedState)=>{if(originalCheckedState){const index=selectedValues.indexOf(changedValue);const updatedSelection=[...selectedValues.slice(0,index),...selectedValues.slice(index+1)];onChange(updatedSelection);}else {onChange([...selectedValues,changedValue]);}};const allChildren=React__namespace.Children.toArray(children).filter(Boolean);return jsxRuntime.jsxs(StyledFieldset$1,{"data-testid":testId,style:[styles$3.fieldset,style],ref:ref,children:[label&&jsxRuntime.jsx(StyledLegend$1,{style:styles$3.legend,children:jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",children:label})}),description&&jsxRuntime.jsx(wonderBlocksTypography.BodyText,{size:"small",tag:"span",style:styles$3.description,children:description}),errorMessage&&jsxRuntime.jsx(wonderBlocksTypography.BodyText,{size:"small",tag:"span",style:styles$3.error,children:errorMessage}),
|
|
60
|
+
const StyledFieldset$1=wonderBlocksCore.addStyle("fieldset");const StyledLegend$1=wonderBlocksCore.addStyle("legend");const CheckboxGroup=React__namespace.forwardRef(function CheckboxGroup(props,ref){const{children,label,description,errorMessage,groupName,onChange,selectedValues,style,testId}=props;const handleChange=(changedValue,originalCheckedState)=>{if(originalCheckedState){const index=selectedValues.indexOf(changedValue);const updatedSelection=[...selectedValues.slice(0,index),...selectedValues.slice(index+1)];onChange(updatedSelection);}else {onChange([...selectedValues,changedValue]);}};const allChildren=React__namespace.Children.toArray(children).filter(Boolean);return jsxRuntime.jsxs(StyledFieldset$1,{"data-testid":testId,style:[styles$3.fieldset,style],ref:ref,children:[label&&jsxRuntime.jsx(StyledLegend$1,{style:styles$3.legend,children:jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",children:label})}),description&&jsxRuntime.jsx(wonderBlocksTypography.BodyText,{size:"small",tag:"span",style:styles$3.description,children:description}),errorMessage&&jsxRuntime.jsx(wonderBlocksTypography.BodyText,{size:"small",tag:"span",style:styles$3.error,children:errorMessage}),allChildren.map((child,index)=>{const{style,value}=child.props;const checked=selectedValues.includes(value);const hasMeta=!!(label||description||errorMessage);return React__namespace.cloneElement(child,{checked:checked,error:!!errorMessage,groupName:groupName,id:`${groupName}-${value}`,key:value,onChange:()=>handleChange(value,checked),style:[index===0&&hasMeta&&styles$3.firstChoiceMetaSpacing,index>0&&styles$3.choiceLineGap,style],variant:"checkbox"})})]})});
|
|
62
61
|
|
|
63
|
-
const StyledFieldset=wonderBlocksCore.addStyle("fieldset");const StyledLegend=wonderBlocksCore.addStyle("legend");const RadioGroup=React__namespace.forwardRef(function RadioGroup(props,ref){const{children,label,description,errorMessage,groupName,onChange,selectedValue,style,testId}=props;const allChildren=React__namespace.Children.toArray(children).filter(Boolean);return jsxRuntime.jsxs(StyledFieldset,{"data-testid":testId,style:[styles$3.fieldset,style],ref:ref,children:[label&&jsxRuntime.jsx(StyledLegend,{style:styles$3.legend,children:jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",children:label})}),description&&jsxRuntime.jsx(wonderBlocksTypography.BodyText,{size:"small",style:styles$3.description,children:description}),errorMessage&&jsxRuntime.jsx(wonderBlocksTypography.BodyText,{size:"small",style:styles$3.error,children:errorMessage}),
|
|
62
|
+
const StyledFieldset=wonderBlocksCore.addStyle("fieldset");const StyledLegend=wonderBlocksCore.addStyle("legend");const RadioGroup=React__namespace.forwardRef(function RadioGroup(props,ref){const{children,label,description,errorMessage,groupName,onChange,selectedValue,style,testId}=props;const allChildren=React__namespace.Children.toArray(children).filter(Boolean);return jsxRuntime.jsxs(StyledFieldset,{"data-testid":testId,style:[styles$3.fieldset,style],ref:ref,children:[label&&jsxRuntime.jsx(StyledLegend,{style:styles$3.legend,children:jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",children:label})}),description&&jsxRuntime.jsx(wonderBlocksTypography.BodyText,{size:"small",style:styles$3.description,children:description}),errorMessage&&jsxRuntime.jsx(wonderBlocksTypography.BodyText,{size:"small",style:styles$3.error,children:errorMessage}),allChildren.map((child,index)=>{const{style,value}=child.props;const checked=selectedValue===value;const hasMeta=!!(label||description||errorMessage);return React__namespace.cloneElement(child,{checked:checked,error:!!errorMessage,groupName:groupName,id:`${groupName}-${value}`,key:value,onChange:()=>onChange(value),style:[index===0&&hasMeta&&styles$3.firstChoiceMetaSpacing,index>0&&styles$3.choiceLineGap,style],variant:"radio"})})]})});
|
|
64
63
|
|
|
65
64
|
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}};
|
|
66
65
|
|
|
67
66
|
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,onPaste,...otherProps}=props;const{errorMessage,onBlurValidation,onChangeValidation}=useFieldValidation({value,required,disabled,instantValidation,validate,onValidate});const hasError=error||!!errorMessage;const handleChange=event=>{if(type==="whole-number"){const newValue=event.target.value.replace(/[^0-9]/g,"");onChangeValidation(newValue);onChange(newValue);return}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);}};const handleKeyDown=event=>{if(type==="whole-number"){if(event.key==="."||event.key==="+"||event.key==="-"||event.key==="e"||event.key==="E"){event.preventDefault();}}onKeyDown?.(event);};return jsxRuntime.jsx(wonderBlocksCore.Id,{id:id,children:uniqueId=>jsxRuntime.jsx(StyledInput,{style:[styles$2.input,wonderBlocksTypography.styles.BodyTextMediumMediumWeight,styles$2.default,disabled&&styles$2.disabled,hasError&&styles$2.error,readOnly&&styles$2.readOnly,style],id:uniqueId,type:type==="whole-number"?"number":type,placeholder:placeholder,value:value,name:name,"aria-disabled":disabled,"aria-required":!!required,onChange:handleChange,onKeyDown:disabled?undefined:handleKeyDown,onFocus:handleFocus,onBlur:handleBlur,onPaste:disabled?undefined:onPaste,"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:theme.field.sizing.height,borderRadius:theme.field.border.radius,boxSizing:"border-box",paddingInline:theme.field.layout.paddingInline,paddingBlock:theme.field.layout.paddingBlock,margin:wonderBlocksTokens.sizing.size_0},readOnly:{background:wonderBlocksTokens.semanticColor.input.readOnly.background,color:wonderBlocksTokens.semanticColor.input.readOnly.text},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},...wonderBlocksStyles.focusStyles.focus,[":active:not([aria-disabled='true']):not([readonly])"]:{boxShadow:`0 0 0 ${theme.field.border.width.press} ${wonderBlocksTokens.semanticColor.input.default.border}`}},error:{background:wonderBlocksTokens.semanticColor.input.error.background,border:`${theme.field.border.width.error} solid ${wonderBlocksTokens.semanticColor.input.error.border}`,color:wonderBlocksTokens.semanticColor.input.error.foreground,"::placeholder":{color:wonderBlocksTokens.semanticColor.input.default.placeholder}},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"}});var TextField$1 = React__namespace.forwardRef((props,ref)=>jsxRuntime.jsx(TextField,{...props,forwardedRef:ref}));
|
|
68
67
|
|
|
69
|
-
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(
|
|
68
|
+
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(wonderBlocksTypography.BodyText,{style:[styles$1.label,styles$1.labelSpacing],tag:"label",htmlFor:id&&`${id}-field`,testId:testId&&`${testId}-label`,children:[label,required&&requiredIcon]})}maybeRenderDescription(){const{description,testId}=this.props;if(!description){return null}return jsxRuntime.jsx(wonderBlocksTypography.BodyText,{size:"small",tag:"span",style:[styles$1.description,styles$1.descriptionSpacing],testId:testId&&`${testId}-description`,children:description})}maybeRenderError(){const{error,id,testId}=this.props;if(!error){return null}return jsxRuntime.jsx(wonderBlocksTypography.BodyText,{size:"small",tag:"span",style:[styles$1.error,styles$1.errorSpacing],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(wonderBlocksCore.View,{style:styles$1.fieldSpacing,children:field}),this.maybeRenderError()]})}}const styles$1=aphrodite.StyleSheet.create({label:{color:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong},labelSpacing:{marginBlockEnd:wonderBlocksTokens.sizing.size_040},description:{color:theme.description.color.foreground},descriptionSpacing:{marginBlockEnd:wonderBlocksTokens.sizing.size_040},fieldSpacing:{marginBlockStart:wonderBlocksTokens.sizing.size_080},error:{color:wonderBlocksTokens.semanticColor.status.critical.foreground},errorSpacing:{marginBlockStart:wonderBlocksTokens.sizing.size_120},required:{color:wonderBlocksTokens.semanticColor.status.critical.foreground}});
|
|
70
69
|
|
|
71
70
|
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}));
|
|
72
71
|
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Form components for Wonder Blocks.",
|
|
4
4
|
"author": "Khan Academy",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"version": "7.5.
|
|
6
|
+
"version": "7.5.9",
|
|
7
7
|
"publishConfig": {
|
|
8
8
|
"access": "public"
|
|
9
9
|
},
|
|
@@ -28,12 +28,12 @@
|
|
|
28
28
|
"./styles.css": "./dist/css/vars.css"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@khanacademy/wonder-blocks-clickable": "8.1.
|
|
31
|
+
"@khanacademy/wonder-blocks-clickable": "8.1.8",
|
|
32
32
|
"@khanacademy/wonder-blocks-core": "12.4.3",
|
|
33
|
-
"@khanacademy/wonder-blocks-icon": "5.3.
|
|
34
|
-
"@khanacademy/wonder-blocks-layout": "3.1.
|
|
35
|
-
"@khanacademy/wonder-blocks-tokens": "16.
|
|
36
|
-
"@khanacademy/wonder-blocks-typography": "4.3.
|
|
33
|
+
"@khanacademy/wonder-blocks-icon": "5.3.12",
|
|
34
|
+
"@khanacademy/wonder-blocks-layout": "3.1.49",
|
|
35
|
+
"@khanacademy/wonder-blocks-tokens": "16.4.0",
|
|
36
|
+
"@khanacademy/wonder-blocks-typography": "4.3.2"
|
|
37
37
|
},
|
|
38
38
|
"peerDependencies": {
|
|
39
39
|
"@phosphor-icons/core": "^2.0.2",
|