@khanacademy/wonder-blocks-form 7.6.2 → 7.6.4
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 +28 -0
- package/dist/es/index.js +4 -4
- package/dist/index.js +4 -4
- package/package.json +6 -6
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @khanacademy/wonder-blocks-form@7.6.
|
|
2
|
+
> @khanacademy/wonder-blocks-form@7.6.4 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,33 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-form
|
|
2
2
|
|
|
3
|
+
## 7.6.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- e6c705d: TextField and TextArea: Improved the `press + focus` styling to work with `syl-dark`
|
|
8
|
+
- fcf3bb1: Update token usage for radio and checkboxes
|
|
9
|
+
- Updated dependencies [ddcaaeb]
|
|
10
|
+
- Updated dependencies [0907f64]
|
|
11
|
+
- Updated dependencies [9773405]
|
|
12
|
+
- Updated dependencies [9773405]
|
|
13
|
+
- Updated dependencies [022e775]
|
|
14
|
+
- Updated dependencies [e181c15]
|
|
15
|
+
- Updated dependencies [c033245]
|
|
16
|
+
- Updated dependencies [a2bbc0a]
|
|
17
|
+
- @khanacademy/wonder-blocks-icon@5.3.17
|
|
18
|
+
- @khanacademy/wonder-blocks-tokens@16.7.0
|
|
19
|
+
- @khanacademy/wonder-blocks-clickable@8.2.3
|
|
20
|
+
- @khanacademy/wonder-blocks-layout@3.1.54
|
|
21
|
+
- @khanacademy/wonder-blocks-typography@4.3.7
|
|
22
|
+
|
|
23
|
+
## 7.6.3
|
|
24
|
+
|
|
25
|
+
### Patch Changes
|
|
26
|
+
|
|
27
|
+
- Updated dependencies [d69335d]
|
|
28
|
+
- @khanacademy/wonder-blocks-clickable@8.2.2
|
|
29
|
+
- @khanacademy/wonder-blocks-core@12.4.4
|
|
30
|
+
|
|
3
31
|
## 7.6.2
|
|
4
32
|
|
|
5
33
|
### Patch Changes
|
package/dist/es/index.js
CHANGED
|
@@ -14,7 +14,7 @@ var themeDefault = {choice:{inputWrapper:{layout:{padding:sizing.size_0,margin:s
|
|
|
14
14
|
|
|
15
15
|
var theme = mapValuesToCssVars(themeDefault,"--wb-c-form-");
|
|
16
16
|
|
|
17
|
-
const baseStyles={choice:{sizing:{size:sizing.size_160},checked:{border:semanticColor.input.checked.border},disabled:{border:semanticColor.input.disabled.border,background:semanticColor.input.disabled.background},error:{border:semanticColor.input.error.border,background:semanticColor.input.error.background},unchecked:{rest:{border:semanticColor.input.default.border,background:semanticColor.input.default.background},hover:{border:semanticColor.action.secondary.progressive.hover.border,background:semanticColor.action.secondary.progressive.hover.background},press:{border:semanticColor.action.secondary.progressive.press.border,background:semanticColor.action.secondary.progressive.press.background}}},radio:{border:{radius:{default:border.radius.radius_full},width:{default:border.width.thin}}},checkbox:{border:{radius:{default:border.radius.radius_040},width:{default:border.width.thin}},sizing:{checkSize:sizing.size_120},disabledChecked:{border:semanticColor.core.transparent,background:semanticColor.core.background.disabled.strong}},icon:{default:{foreground:semanticColor.
|
|
17
|
+
const baseStyles={choice:{sizing:{size:sizing.size_160},checked:{border:semanticColor.input.checked.border},disabled:{border:semanticColor.input.disabled.border,background:semanticColor.input.disabled.background},error:{border:semanticColor.input.error.border,background:semanticColor.input.error.background},unchecked:{rest:{border:semanticColor.input.default.border,background:semanticColor.input.default.background},hover:{border:semanticColor.action.secondary.progressive.hover.border,background:semanticColor.action.secondary.progressive.hover.background},press:{border:semanticColor.action.secondary.progressive.press.border,background:semanticColor.action.secondary.progressive.press.background}}},radio:{border:{radius:{default:border.radius.radius_full},width:{default:border.width.thin}}},checkbox:{border:{radius:{default:border.radius.radius_040},width:{default:border.width.thin}},sizing:{checkSize:sizing.size_120},disabledChecked:{border:semanticColor.core.transparent,background:semanticColor.core.background.disabled.strong}},icon:{default:{foreground:semanticColor.input.checked.foreground},disabled:{foreground:semanticColor.core.foreground.neutral.subtle}}};const colorStates={checkbox:{unchecked:{default:baseStyles.choice.unchecked,disabled:{rest:baseStyles.choice.disabled,hover:baseStyles.choice.disabled,press:baseStyles.choice.disabled},error:{rest:baseStyles.choice.error,hover:baseStyles.choice.error,press:{...baseStyles.choice.error,border:semanticColor.core.border.critical.strong}}},checked:{default:{rest:{border:semanticColor.core.transparent,background:semanticColor.input.checked.background},hover:{border:semanticColor.input.checked.border},press:{border:semanticColor.input.checked.border,background:semanticColor.core.background.instructive.strong}},disabled:{rest:baseStyles.checkbox.disabledChecked,hover:baseStyles.checkbox.disabledChecked,press:baseStyles.checkbox.disabledChecked},error:{rest:{background:semanticColor.core.border.critical.default,border:semanticColor.core.border.critical.default},hover:{background:semanticColor.core.background.critical.default,border:semanticColor.core.border.critical.default},press:{background:semanticColor.core.background.critical.strong,border:semanticColor.core.border.critical.strong}}}},radio:{unchecked:{default:baseStyles.choice.unchecked,disabled:{rest:baseStyles.choice.disabled,hover:baseStyles.choice.disabled,press:baseStyles.choice.disabled},error:{rest:baseStyles.choice.error,hover:baseStyles.choice.error,press:{...baseStyles.choice.error,border:semanticColor.core.border.critical.strong}}},checked:{default:{rest:{border:semanticColor.input.checked.background,background:semanticColor.input.checked.foreground},hover:baseStyles.choice.checked,press:{border:semanticColor.core.background.instructive.strong,background:semanticColor.core.background.instructive.strong}},error:{rest:{...baseStyles.choice.error,background:semanticColor.input.checked.foreground},hover:baseStyles.choice.error,press:{...baseStyles.choice.error,border:semanticColor.core.border.critical.strong}},disabled:{rest:{border:semanticColor.core.border.disabled.default,background:semanticColor.core.background.base.default},hover:{border:semanticColor.core.border.disabled.strong},press:{border:semanticColor.core.border.disabled.strong}}}}};
|
|
18
18
|
|
|
19
19
|
function mapCheckedToAriaChecked(value){switch(value){case true:return "true";case false:return "false";default:return "mixed"}}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,disabled);const defaultStyle=[sharedStyles$1.inputReset,sharedStyles$1.default,stateStyles.default];const wrapperStyle=[sharedStyles$1.inputWrapper,stateStyles.inputWrapper];const checkboxIcon=jsx(PhosphorIcon,{color:disabled?baseStyles.icon.disabled.foreground:baseStyles.icon.default.foreground,icon:checked?checkIcon:minusIcon,size:"small",style:[sharedStyles$1.checkboxIcon,{width:baseStyles.checkbox.sizing.checkSize,height:baseStyles.checkbox.sizing.checkSize}]});const ariaChecked=mapCheckedToAriaChecked(checked);const handleWrapperClick=e=>{if(!disabled&&e.target!==innerRef.current){innerRef.current?.click();}};return jsx(React.Fragment,{children:jsxs(View,{style:wrapperStyle,onClick:handleWrapperClick,testId:"wb-checkbox-wrapper",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({inputWrapper:{margin:theme.choice.inputWrapper.layout.margin,padding:theme.choice.inputWrapper.layout.padding,position:"relative"},inputReset:{appearance:"none",WebkitAppearance:"none",MozAppearance:"none"},default:{height:baseStyles.choice.sizing.size,width:baseStyles.choice.sizing.size,minBlockSize:baseStyles.choice.sizing.size,minInlineSize:baseStyles.choice.sizing.size,margin:0,outline:"none",boxSizing:"border-box",borderStyle:"solid",borderWidth:baseStyles.checkbox.border.width.default,borderRadius:baseStyles.checkbox.border.radius.default},checkboxIcon:{position:"absolute",pointerEvents:"none",margin:`calc((${baseStyles.choice.sizing.size} - ${baseStyles.checkbox.sizing.checkSize}) / 2)`}});const styles$6={};const _generateStyles$1=(checked,error,disabled)=>{const styleKey=`${String(checked)}-${String(error)}-${String(disabled)}`;if(styles$6[styleKey]){return styles$6[styleKey]}const isCheckedOrIndeterminate=checked||checked==null;let stateStyles={};const currentState=error?"error":disabled?"disabled":"default";if(isCheckedOrIndeterminate){const checkedStyles=colorStates.checkbox.checked[currentState];stateStyles={inputWrapper:{":hover input:not([disabled])":{outline:`${border.width.medium} solid ${checkedStyles.hover.border}`,outlineOffset:1}},default:{backgroundColor:checkedStyles.rest.background,borderColor:checkedStyles.rest.border,":focus-visible:not([disabled])":focusStyles.focus[":focus-visible"],":active:not([disabled])":{outline:`${border.width.medium} solid ${checkedStyles.press.border}`,outlineOffset:1,background:checkedStyles.press.background,borderColor:checkedStyles.press.background}}};}else {const uncheckedStyles=colorStates.checkbox.unchecked[currentState];stateStyles={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},":active:not([disabled])":{backgroundColor:uncheckedStyles.press.background,outline:`${border.width.medium} solid ${uncheckedStyles.press.border}`,outlineOffset:-1}}};}styles$6[styleKey]=StyleSheet.create(stateStyles);return styles$6[styleKey]};
|
|
20
20
|
|
|
@@ -28,7 +28,7 @@ const Radio=React.forwardRef(function Radio(props,ref){const{disabled=false,erro
|
|
|
28
28
|
|
|
29
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})});
|
|
30
30
|
|
|
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.
|
|
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.core.foreground.critical.default,marginBlockStart:sizing.size_040},firstChoiceMetaSpacing:{marginBlockStart:sizing.size_120},choiceLineGap:{marginBlockStart:sizing.size_080}});
|
|
32
32
|
|
|
33
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"})})]})});
|
|
34
34
|
|
|
@@ -36,12 +36,12 @@ const StyledFieldset=addStyle("fieldset");const StyledLegend=addStyle("legend");
|
|
|
36
36
|
|
|
37
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}};
|
|
38
38
|
|
|
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
|
|
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 ACTIVE_BOX_SHADOW$1=`0 0 0 ${theme.field.border.width.press} ${semanticColor.input.default.border}`;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:ACTIVE_BOX_SHADOW$1},[":focus-visible:active:not([aria-disabled='true']):not([readonly])"]:{boxShadow:`${ACTIVE_BOX_SHADOW$1}, ${focusStyles.focus[":focus-visible"].boxShadow}`}},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},[":focus-visible:active:not([aria-disabled='true']):not([readonly])"]:{boxShadow:`${ACTIVE_BOX_SHADOW$1}, ${focusStyles.focus[":focus-visible"].boxShadow}`}},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}));
|
|
40
40
|
|
|
41
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}});
|
|
42
42
|
|
|
43
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}));
|
|
44
44
|
|
|
45
|
-
const StyledTextarea=addStyle("textarea");function getHeightForNumberOfRows(rows){return `calc((${rows} * ${font.body.lineHeight.medium}) + (2 * ${theme.field.layout.paddingBlock}) + (2 * ${border.width.thin}))`}function getTextAreaHeight(textArea){const originalStyleHeightValue=textArea.style.getPropertyValue("height");const originalStyleHeightPriority=textArea.style.getPropertyPriority("height");const originalStyleOverflowValue=textArea.style.getPropertyValue("overflow");const originalStyleOverflowPriority=textArea.style.getPropertyPriority("overflow");textArea.style.setProperty("height","0px","important");textArea.style.setProperty("overflow","hidden","important");const computedStyle=getComputedStyle(textArea);const borderTop=computedStyle.borderTopWidth;const borderBottom=computedStyle.borderBottomWidth;const newHeight=`calc(${textArea.scrollHeight}px + ${borderTop} + ${borderBottom})`;if(originalStyleHeightValue){textArea.style.setProperty("height",originalStyleHeightValue,originalStyleHeightPriority);}else {textArea.style.removeProperty("height");}if(originalStyleOverflowValue){textArea.style.setProperty("overflow",originalStyleOverflowValue,originalStyleOverflowPriority);}else {textArea.style.removeProperty("overflow");}return newHeight}const TextArea=React.forwardRef(function TextArea(props,ref){const{onChange,value,placeholder,disabled,id,testId,style,readOnly,autoComplete,name,className,autoFocus,rows=2,spellCheck,wrap,minLength,maxLength,onClick,onKeyDown,onKeyUp,onFocus,onBlur,onPaste,validate,onValidate,required,resizeType,rootStyle,error,autoResize=false,maxRows=6,instantValidation=true,...otherProps}=props;const{errorMessage,onBlurValidation,onChangeValidation}=useFieldValidation({value,disabled,validate,onValidate,required,instantValidation});const textAreaContainerRef=React.useRef(null);const[height,setHeight]=React.useState("0px");const hasError=error||!!errorMessage;const generatedUniqueId=useId();const uniqueId=id??generatedUniqueId;const handleChange=event=>{const newValue=event.target.value;onChangeValidation(newValue);onChange(newValue);if(autoResize){setHeight(getTextAreaHeight(event.target));}};const handleBlur=event=>{onBlurValidation(event.target.value);if(onBlur){onBlur(event);}};useOnMountEffect(()=>{if(!autoResize){return}const ref=textAreaContainerRef.current?.children[0];if(ref&&window?.ResizeObserver){const observer=new window.ResizeObserver(([entry])=>{if(entry){setHeight(getTextAreaHeight(entry.target));}});observer.observe(ref);return ()=>{observer.disconnect();}}});const autoResizeStyles=[styles.autoResize,{height,maxHeight:getHeightForNumberOfRows(Math.max(maxRows,rows))}];React.useEffect(()=>{if(autoResize){setHeight(getTextAreaHeight(textAreaContainerRef.current?.children[0]));}},[autoResize,ref]);return jsx(View,{style:[{width:"100%"},rootStyle],ref:textAreaContainerRef,children:jsx(StyledTextarea,{id:uniqueId,"data-testid":testId,ref:ref,className:className,style:[styles.textarea,styles$7.BodyTextMediumMediumWeight,resizeType&&resizeStyles[resizeType],styles.default,disabled&&styles.disabled,hasError&&styles.error,readOnly&&styles.readOnly,rows&&{minBlockSize:getHeightForNumberOfRows(rows)},autoResize&&autoResizeStyles,style],value:value,onChange:handleChange,placeholder:placeholder,"aria-disabled":disabled,readOnly:readOnly||disabled,autoComplete:autoComplete,name:name,autoFocus:autoFocus,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,onPaste:disabled?undefined:onPaste,required:!!required,...otherProps,"aria-invalid":hasError})})});const styles=StyleSheet.create({textarea:{borderRadius:theme.field.border.radius,boxSizing:"border-box",paddingInline:theme.field.layout.paddingInline,paddingBlock:theme.field.layout.paddingBlock},autoResize:{resize:"none"},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
|
|
45
|
+
const StyledTextarea=addStyle("textarea");function getHeightForNumberOfRows(rows){return `calc((${rows} * ${font.body.lineHeight.medium}) + (2 * ${theme.field.layout.paddingBlock}) + (2 * ${border.width.thin}))`}function getTextAreaHeight(textArea){const originalStyleHeightValue=textArea.style.getPropertyValue("height");const originalStyleHeightPriority=textArea.style.getPropertyPriority("height");const originalStyleOverflowValue=textArea.style.getPropertyValue("overflow");const originalStyleOverflowPriority=textArea.style.getPropertyPriority("overflow");textArea.style.setProperty("height","0px","important");textArea.style.setProperty("overflow","hidden","important");const computedStyle=getComputedStyle(textArea);const borderTop=computedStyle.borderTopWidth;const borderBottom=computedStyle.borderBottomWidth;const newHeight=`calc(${textArea.scrollHeight}px + ${borderTop} + ${borderBottom})`;if(originalStyleHeightValue){textArea.style.setProperty("height",originalStyleHeightValue,originalStyleHeightPriority);}else {textArea.style.removeProperty("height");}if(originalStyleOverflowValue){textArea.style.setProperty("overflow",originalStyleOverflowValue,originalStyleOverflowPriority);}else {textArea.style.removeProperty("overflow");}return newHeight}const TextArea=React.forwardRef(function TextArea(props,ref){const{onChange,value,placeholder,disabled,id,testId,style,readOnly,autoComplete,name,className,autoFocus,rows=2,spellCheck,wrap,minLength,maxLength,onClick,onKeyDown,onKeyUp,onFocus,onBlur,onPaste,validate,onValidate,required,resizeType,rootStyle,error,autoResize=false,maxRows=6,instantValidation=true,...otherProps}=props;const{errorMessage,onBlurValidation,onChangeValidation}=useFieldValidation({value,disabled,validate,onValidate,required,instantValidation});const textAreaContainerRef=React.useRef(null);const[height,setHeight]=React.useState("0px");const hasError=error||!!errorMessage;const generatedUniqueId=useId();const uniqueId=id??generatedUniqueId;const handleChange=event=>{const newValue=event.target.value;onChangeValidation(newValue);onChange(newValue);if(autoResize){setHeight(getTextAreaHeight(event.target));}};const handleBlur=event=>{onBlurValidation(event.target.value);if(onBlur){onBlur(event);}};useOnMountEffect(()=>{if(!autoResize){return}const ref=textAreaContainerRef.current?.children[0];if(ref&&window?.ResizeObserver){const observer=new window.ResizeObserver(([entry])=>{if(entry){setHeight(getTextAreaHeight(entry.target));}});observer.observe(ref);return ()=>{observer.disconnect();}}});const autoResizeStyles=[styles.autoResize,{height,maxHeight:getHeightForNumberOfRows(Math.max(maxRows,rows))}];React.useEffect(()=>{if(autoResize){setHeight(getTextAreaHeight(textAreaContainerRef.current?.children[0]));}},[autoResize,ref]);return jsx(View,{style:[{width:"100%"},rootStyle],ref:textAreaContainerRef,children:jsx(StyledTextarea,{id:uniqueId,"data-testid":testId,ref:ref,className:className,style:[styles.textarea,styles$7.BodyTextMediumMediumWeight,resizeType&&resizeStyles[resizeType],styles.default,disabled&&styles.disabled,hasError&&styles.error,readOnly&&styles.readOnly,rows&&{minBlockSize:getHeightForNumberOfRows(rows)},autoResize&&autoResizeStyles,style],value:value,onChange:handleChange,placeholder:placeholder,"aria-disabled":disabled,readOnly:readOnly||disabled,autoComplete:autoComplete,name:name,autoFocus:autoFocus,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,onPaste:disabled?undefined:onPaste,required:!!required,...otherProps,"aria-invalid":hasError})})});const ACTIVE_BOX_SHADOW=`0 0 0 ${theme.field.border.width.press} ${semanticColor.input.default.border}`;const styles=StyleSheet.create({textarea:{borderRadius:theme.field.border.radius,boxSizing:"border-box",paddingInline:theme.field.layout.paddingInline,paddingBlock:theme.field.layout.paddingBlock},autoResize:{resize:"none"},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:ACTIVE_BOX_SHADOW},[":focus-visible:active:not([aria-disabled='true']):not([readonly])"]:{boxShadow:`${ACTIVE_BOX_SHADOW}, ${focusStyles.focus[":focus-visible"].boxShadow}`}},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"},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},[":focus-visible:active:not([aria-disabled='true']):not([readonly])"]:{boxShadow:`${ACTIVE_BOX_SHADOW}, ${focusStyles.focus[":focus-visible"].boxShadow}`}}});const resizeStyles=StyleSheet.create({both:{resize:"both"},none:{resize:"none"},horizontal:{resize:"horizontal"},vertical:{resize:"vertical"}});
|
|
46
46
|
|
|
47
47
|
export { Checkbox, CheckboxGroup, Choice, labeledTextField as LabeledTextField, RadioGroup, TextArea, TextField$1 as TextField };
|
package/dist/index.js
CHANGED
|
@@ -41,7 +41,7 @@ var themeDefault = {choice:{inputWrapper:{layout:{padding:wonderBlocksTokens.siz
|
|
|
41
41
|
|
|
42
42
|
var theme = wonderBlocksTokens.mapValuesToCssVars(themeDefault,"--wb-c-form-");
|
|
43
43
|
|
|
44
|
-
const baseStyles={choice:{sizing:{size:wonderBlocksTokens.sizing.size_160},checked:{border:wonderBlocksTokens.semanticColor.input.checked.border},disabled:{border:wonderBlocksTokens.semanticColor.input.disabled.border,background:wonderBlocksTokens.semanticColor.input.disabled.background},error:{border:wonderBlocksTokens.semanticColor.input.error.border,background:wonderBlocksTokens.semanticColor.input.error.background},unchecked:{rest:{border:wonderBlocksTokens.semanticColor.input.default.border,background:wonderBlocksTokens.semanticColor.input.default.background},hover:{border:wonderBlocksTokens.semanticColor.action.secondary.progressive.hover.border,background:wonderBlocksTokens.semanticColor.action.secondary.progressive.hover.background},press:{border:wonderBlocksTokens.semanticColor.action.secondary.progressive.press.border,background:wonderBlocksTokens.semanticColor.action.secondary.progressive.press.background}}},radio:{border:{radius:{default:wonderBlocksTokens.border.radius.radius_full},width:{default:wonderBlocksTokens.border.width.thin}}},checkbox:{border:{radius:{default:wonderBlocksTokens.border.radius.radius_040},width:{default:wonderBlocksTokens.border.width.thin}},sizing:{checkSize:wonderBlocksTokens.sizing.size_120},disabledChecked:{border:wonderBlocksTokens.semanticColor.core.transparent,background:wonderBlocksTokens.semanticColor.core.background.disabled.strong}},icon:{default:{foreground:wonderBlocksTokens.semanticColor.
|
|
44
|
+
const baseStyles={choice:{sizing:{size:wonderBlocksTokens.sizing.size_160},checked:{border:wonderBlocksTokens.semanticColor.input.checked.border},disabled:{border:wonderBlocksTokens.semanticColor.input.disabled.border,background:wonderBlocksTokens.semanticColor.input.disabled.background},error:{border:wonderBlocksTokens.semanticColor.input.error.border,background:wonderBlocksTokens.semanticColor.input.error.background},unchecked:{rest:{border:wonderBlocksTokens.semanticColor.input.default.border,background:wonderBlocksTokens.semanticColor.input.default.background},hover:{border:wonderBlocksTokens.semanticColor.action.secondary.progressive.hover.border,background:wonderBlocksTokens.semanticColor.action.secondary.progressive.hover.background},press:{border:wonderBlocksTokens.semanticColor.action.secondary.progressive.press.border,background:wonderBlocksTokens.semanticColor.action.secondary.progressive.press.background}}},radio:{border:{radius:{default:wonderBlocksTokens.border.radius.radius_full},width:{default:wonderBlocksTokens.border.width.thin}}},checkbox:{border:{radius:{default:wonderBlocksTokens.border.radius.radius_040},width:{default:wonderBlocksTokens.border.width.thin}},sizing:{checkSize:wonderBlocksTokens.sizing.size_120},disabledChecked:{border:wonderBlocksTokens.semanticColor.core.transparent,background:wonderBlocksTokens.semanticColor.core.background.disabled.strong}},icon:{default:{foreground:wonderBlocksTokens.semanticColor.input.checked.foreground},disabled:{foreground:wonderBlocksTokens.semanticColor.core.foreground.neutral.subtle}}};const colorStates={checkbox:{unchecked:{default:baseStyles.choice.unchecked,disabled:{rest:baseStyles.choice.disabled,hover:baseStyles.choice.disabled,press:baseStyles.choice.disabled},error:{rest:baseStyles.choice.error,hover:baseStyles.choice.error,press:{...baseStyles.choice.error,border:wonderBlocksTokens.semanticColor.core.border.critical.strong}}},checked:{default:{rest:{border:wonderBlocksTokens.semanticColor.core.transparent,background:wonderBlocksTokens.semanticColor.input.checked.background},hover:{border:wonderBlocksTokens.semanticColor.input.checked.border},press:{border:wonderBlocksTokens.semanticColor.input.checked.border,background:wonderBlocksTokens.semanticColor.core.background.instructive.strong}},disabled:{rest:baseStyles.checkbox.disabledChecked,hover:baseStyles.checkbox.disabledChecked,press:baseStyles.checkbox.disabledChecked},error:{rest:{background:wonderBlocksTokens.semanticColor.core.border.critical.default,border:wonderBlocksTokens.semanticColor.core.border.critical.default},hover:{background:wonderBlocksTokens.semanticColor.core.background.critical.default,border:wonderBlocksTokens.semanticColor.core.border.critical.default},press:{background:wonderBlocksTokens.semanticColor.core.background.critical.strong,border:wonderBlocksTokens.semanticColor.core.border.critical.strong}}}},radio:{unchecked:{default:baseStyles.choice.unchecked,disabled:{rest:baseStyles.choice.disabled,hover:baseStyles.choice.disabled,press:baseStyles.choice.disabled},error:{rest:baseStyles.choice.error,hover:baseStyles.choice.error,press:{...baseStyles.choice.error,border:wonderBlocksTokens.semanticColor.core.border.critical.strong}}},checked:{default:{rest:{border:wonderBlocksTokens.semanticColor.input.checked.background,background:wonderBlocksTokens.semanticColor.input.checked.foreground},hover:baseStyles.choice.checked,press:{border:wonderBlocksTokens.semanticColor.core.background.instructive.strong,background:wonderBlocksTokens.semanticColor.core.background.instructive.strong}},error:{rest:{...baseStyles.choice.error,background:wonderBlocksTokens.semanticColor.input.checked.foreground},hover:baseStyles.choice.error,press:{...baseStyles.choice.error,border:wonderBlocksTokens.semanticColor.core.border.critical.strong}},disabled:{rest:{border:wonderBlocksTokens.semanticColor.core.border.disabled.default,background:wonderBlocksTokens.semanticColor.core.background.base.default},hover:{border:wonderBlocksTokens.semanticColor.core.border.disabled.strong},press:{border:wonderBlocksTokens.semanticColor.core.border.disabled.strong}}}}};
|
|
45
45
|
|
|
46
46
|
function mapCheckedToAriaChecked(value){switch(value){case true:return "true";case false:return "false";default:return "mixed"}}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,disabled);const defaultStyle=[sharedStyles$1.inputReset,sharedStyles$1.default,stateStyles.default];const wrapperStyle=[sharedStyles$1.inputWrapper,stateStyles.inputWrapper];const checkboxIcon=jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{color:disabled?baseStyles.icon.disabled.foreground:baseStyles.icon.default.foreground,icon:checked?checkIcon__default["default"]:minusIcon__default["default"],size:"small",style:[sharedStyles$1.checkboxIcon,{width:baseStyles.checkbox.sizing.checkSize,height:baseStyles.checkbox.sizing.checkSize}]});const ariaChecked=mapCheckedToAriaChecked(checked);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,testId:"wb-checkbox-wrapper",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({inputWrapper:{margin:theme.choice.inputWrapper.layout.margin,padding:theme.choice.inputWrapper.layout.padding,position:"relative"},inputReset:{appearance:"none",WebkitAppearance:"none",MozAppearance:"none"},default:{height:baseStyles.choice.sizing.size,width:baseStyles.choice.sizing.size,minBlockSize:baseStyles.choice.sizing.size,minInlineSize:baseStyles.choice.sizing.size,margin:0,outline:"none",boxSizing:"border-box",borderStyle:"solid",borderWidth:baseStyles.checkbox.border.width.default,borderRadius:baseStyles.checkbox.border.radius.default},checkboxIcon:{position:"absolute",pointerEvents:"none",margin:`calc((${baseStyles.choice.sizing.size} - ${baseStyles.checkbox.sizing.checkSize}) / 2)`}});const styles$6={};const _generateStyles$1=(checked,error,disabled)=>{const styleKey=`${String(checked)}-${String(error)}-${String(disabled)}`;if(styles$6[styleKey]){return styles$6[styleKey]}const isCheckedOrIndeterminate=checked||checked==null;let stateStyles={};const currentState=error?"error":disabled?"disabled":"default";if(isCheckedOrIndeterminate){const checkedStyles=colorStates.checkbox.checked[currentState];stateStyles={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,":focus-visible:not([disabled])":wonderBlocksStyles.focusStyles.focus[":focus-visible"],":active:not([disabled])":{outline:`${wonderBlocksTokens.border.width.medium} solid ${checkedStyles.press.border}`,outlineOffset:1,background:checkedStyles.press.background,borderColor:checkedStyles.press.background}}};}else {const uncheckedStyles=colorStates.checkbox.unchecked[currentState];stateStyles={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},":active:not([disabled])":{backgroundColor:uncheckedStyles.press.background,outline:`${wonderBlocksTokens.border.width.medium} solid ${uncheckedStyles.press.border}`,outlineOffset:-1}}};}styles$6[styleKey]=aphrodite.StyleSheet.create(stateStyles);return styles$6[styleKey]};
|
|
47
47
|
|
|
@@ -55,7 +55,7 @@ const Radio=React__namespace.forwardRef(function Radio(props,ref){const{disabled
|
|
|
55
55
|
|
|
56
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})});
|
|
57
57
|
|
|
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.
|
|
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.core.foreground.critical.default,marginBlockStart:wonderBlocksTokens.sizing.size_040},firstChoiceMetaSpacing:{marginBlockStart:wonderBlocksTokens.sizing.size_120},choiceLineGap:{marginBlockStart:wonderBlocksTokens.sizing.size_080}});
|
|
59
59
|
|
|
60
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"})})]})});
|
|
61
61
|
|
|
@@ -63,13 +63,13 @@ const StyledFieldset=wonderBlocksCore.addStyle("fieldset");const StyledLegend=wo
|
|
|
63
63
|
|
|
64
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}};
|
|
65
65
|
|
|
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
|
|
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 ACTIVE_BOX_SHADOW$1=`0 0 0 ${theme.field.border.width.press} ${wonderBlocksTokens.semanticColor.input.default.border}`;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:ACTIVE_BOX_SHADOW$1},[":focus-visible:active:not([aria-disabled='true']):not([readonly])"]:{boxShadow:`${ACTIVE_BOX_SHADOW$1}, ${wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}`}},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},[":focus-visible:active:not([aria-disabled='true']):not([readonly])"]:{boxShadow:`${ACTIVE_BOX_SHADOW$1}, ${wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}`}},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}));
|
|
67
67
|
|
|
68
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}});
|
|
69
69
|
|
|
70
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}));
|
|
71
71
|
|
|
72
|
-
const StyledTextarea=wonderBlocksCore.addStyle("textarea");function getHeightForNumberOfRows(rows){return `calc((${rows} * ${wonderBlocksTokens.font.body.lineHeight.medium}) + (2 * ${theme.field.layout.paddingBlock}) + (2 * ${wonderBlocksTokens.border.width.thin}))`}function getTextAreaHeight(textArea){const originalStyleHeightValue=textArea.style.getPropertyValue("height");const originalStyleHeightPriority=textArea.style.getPropertyPriority("height");const originalStyleOverflowValue=textArea.style.getPropertyValue("overflow");const originalStyleOverflowPriority=textArea.style.getPropertyPriority("overflow");textArea.style.setProperty("height","0px","important");textArea.style.setProperty("overflow","hidden","important");const computedStyle=getComputedStyle(textArea);const borderTop=computedStyle.borderTopWidth;const borderBottom=computedStyle.borderBottomWidth;const newHeight=`calc(${textArea.scrollHeight}px + ${borderTop} + ${borderBottom})`;if(originalStyleHeightValue){textArea.style.setProperty("height",originalStyleHeightValue,originalStyleHeightPriority);}else {textArea.style.removeProperty("height");}if(originalStyleOverflowValue){textArea.style.setProperty("overflow",originalStyleOverflowValue,originalStyleOverflowPriority);}else {textArea.style.removeProperty("overflow");}return newHeight}const TextArea=React__namespace.forwardRef(function TextArea(props,ref){const{onChange,value,placeholder,disabled,id,testId,style,readOnly,autoComplete,name,className,autoFocus,rows=2,spellCheck,wrap,minLength,maxLength,onClick,onKeyDown,onKeyUp,onFocus,onBlur,onPaste,validate,onValidate,required,resizeType,rootStyle,error,autoResize=false,maxRows=6,instantValidation=true,...otherProps}=props;const{errorMessage,onBlurValidation,onChangeValidation}=useFieldValidation({value,disabled,validate,onValidate,required,instantValidation});const textAreaContainerRef=React__namespace.useRef(null);const[height,setHeight]=React__namespace.useState("0px");const hasError=error||!!errorMessage;const generatedUniqueId=React.useId();const uniqueId=id??generatedUniqueId;const handleChange=event=>{const newValue=event.target.value;onChangeValidation(newValue);onChange(newValue);if(autoResize){setHeight(getTextAreaHeight(event.target));}};const handleBlur=event=>{onBlurValidation(event.target.value);if(onBlur){onBlur(event);}};wonderBlocksCore.useOnMountEffect(()=>{if(!autoResize){return}const ref=textAreaContainerRef.current?.children[0];if(ref&&window?.ResizeObserver){const observer=new window.ResizeObserver(([entry])=>{if(entry){setHeight(getTextAreaHeight(entry.target));}});observer.observe(ref);return ()=>{observer.disconnect();}}});const autoResizeStyles=[styles.autoResize,{height,maxHeight:getHeightForNumberOfRows(Math.max(maxRows,rows))}];React__namespace.useEffect(()=>{if(autoResize){setHeight(getTextAreaHeight(textAreaContainerRef.current?.children[0]));}},[autoResize,ref]);return jsxRuntime.jsx(wonderBlocksCore.View,{style:[{width:"100%"},rootStyle],ref:textAreaContainerRef,children:jsxRuntime.jsx(StyledTextarea,{id:uniqueId,"data-testid":testId,ref:ref,className:className,style:[styles.textarea,wonderBlocksTypography.styles.BodyTextMediumMediumWeight,resizeType&&resizeStyles[resizeType],styles.default,disabled&&styles.disabled,hasError&&styles.error,readOnly&&styles.readOnly,rows&&{minBlockSize:getHeightForNumberOfRows(rows)},autoResize&&autoResizeStyles,style],value:value,onChange:handleChange,placeholder:placeholder,"aria-disabled":disabled,readOnly:readOnly||disabled,autoComplete:autoComplete,name:name,autoFocus:autoFocus,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,onPaste:disabled?undefined:onPaste,required:!!required,...otherProps,"aria-invalid":hasError})})});const styles=aphrodite.StyleSheet.create({textarea:{borderRadius:theme.field.border.radius,boxSizing:"border-box",paddingInline:theme.field.layout.paddingInline,paddingBlock:theme.field.layout.paddingBlock},autoResize:{resize:"none"},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
|
|
72
|
+
const StyledTextarea=wonderBlocksCore.addStyle("textarea");function getHeightForNumberOfRows(rows){return `calc((${rows} * ${wonderBlocksTokens.font.body.lineHeight.medium}) + (2 * ${theme.field.layout.paddingBlock}) + (2 * ${wonderBlocksTokens.border.width.thin}))`}function getTextAreaHeight(textArea){const originalStyleHeightValue=textArea.style.getPropertyValue("height");const originalStyleHeightPriority=textArea.style.getPropertyPriority("height");const originalStyleOverflowValue=textArea.style.getPropertyValue("overflow");const originalStyleOverflowPriority=textArea.style.getPropertyPriority("overflow");textArea.style.setProperty("height","0px","important");textArea.style.setProperty("overflow","hidden","important");const computedStyle=getComputedStyle(textArea);const borderTop=computedStyle.borderTopWidth;const borderBottom=computedStyle.borderBottomWidth;const newHeight=`calc(${textArea.scrollHeight}px + ${borderTop} + ${borderBottom})`;if(originalStyleHeightValue){textArea.style.setProperty("height",originalStyleHeightValue,originalStyleHeightPriority);}else {textArea.style.removeProperty("height");}if(originalStyleOverflowValue){textArea.style.setProperty("overflow",originalStyleOverflowValue,originalStyleOverflowPriority);}else {textArea.style.removeProperty("overflow");}return newHeight}const TextArea=React__namespace.forwardRef(function TextArea(props,ref){const{onChange,value,placeholder,disabled,id,testId,style,readOnly,autoComplete,name,className,autoFocus,rows=2,spellCheck,wrap,minLength,maxLength,onClick,onKeyDown,onKeyUp,onFocus,onBlur,onPaste,validate,onValidate,required,resizeType,rootStyle,error,autoResize=false,maxRows=6,instantValidation=true,...otherProps}=props;const{errorMessage,onBlurValidation,onChangeValidation}=useFieldValidation({value,disabled,validate,onValidate,required,instantValidation});const textAreaContainerRef=React__namespace.useRef(null);const[height,setHeight]=React__namespace.useState("0px");const hasError=error||!!errorMessage;const generatedUniqueId=React.useId();const uniqueId=id??generatedUniqueId;const handleChange=event=>{const newValue=event.target.value;onChangeValidation(newValue);onChange(newValue);if(autoResize){setHeight(getTextAreaHeight(event.target));}};const handleBlur=event=>{onBlurValidation(event.target.value);if(onBlur){onBlur(event);}};wonderBlocksCore.useOnMountEffect(()=>{if(!autoResize){return}const ref=textAreaContainerRef.current?.children[0];if(ref&&window?.ResizeObserver){const observer=new window.ResizeObserver(([entry])=>{if(entry){setHeight(getTextAreaHeight(entry.target));}});observer.observe(ref);return ()=>{observer.disconnect();}}});const autoResizeStyles=[styles.autoResize,{height,maxHeight:getHeightForNumberOfRows(Math.max(maxRows,rows))}];React__namespace.useEffect(()=>{if(autoResize){setHeight(getTextAreaHeight(textAreaContainerRef.current?.children[0]));}},[autoResize,ref]);return jsxRuntime.jsx(wonderBlocksCore.View,{style:[{width:"100%"},rootStyle],ref:textAreaContainerRef,children:jsxRuntime.jsx(StyledTextarea,{id:uniqueId,"data-testid":testId,ref:ref,className:className,style:[styles.textarea,wonderBlocksTypography.styles.BodyTextMediumMediumWeight,resizeType&&resizeStyles[resizeType],styles.default,disabled&&styles.disabled,hasError&&styles.error,readOnly&&styles.readOnly,rows&&{minBlockSize:getHeightForNumberOfRows(rows)},autoResize&&autoResizeStyles,style],value:value,onChange:handleChange,placeholder:placeholder,"aria-disabled":disabled,readOnly:readOnly||disabled,autoComplete:autoComplete,name:name,autoFocus:autoFocus,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,onPaste:disabled?undefined:onPaste,required:!!required,...otherProps,"aria-invalid":hasError})})});const ACTIVE_BOX_SHADOW=`0 0 0 ${theme.field.border.width.press} ${wonderBlocksTokens.semanticColor.input.default.border}`;const styles=aphrodite.StyleSheet.create({textarea:{borderRadius:theme.field.border.radius,boxSizing:"border-box",paddingInline:theme.field.layout.paddingInline,paddingBlock:theme.field.layout.paddingBlock},autoResize:{resize:"none"},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:ACTIVE_BOX_SHADOW},[":focus-visible:active:not([aria-disabled='true']):not([readonly])"]:{boxShadow:`${ACTIVE_BOX_SHADOW}, ${wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}`}},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"},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},[":focus-visible:active:not([aria-disabled='true']):not([readonly])"]:{boxShadow:`${ACTIVE_BOX_SHADOW}, ${wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}`}}});const resizeStyles=aphrodite.StyleSheet.create({both:{resize:"both"},none:{resize:"none"},horizontal:{resize:"horizontal"},vertical:{resize:"vertical"}});
|
|
73
73
|
|
|
74
74
|
exports.Checkbox = Checkbox;
|
|
75
75
|
exports.CheckboxGroup = CheckboxGroup;
|
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.6.
|
|
6
|
+
"version": "7.6.4",
|
|
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.2.
|
|
31
|
+
"@khanacademy/wonder-blocks-clickable": "8.2.3",
|
|
32
32
|
"@khanacademy/wonder-blocks-core": "12.4.4",
|
|
33
|
-
"@khanacademy/wonder-blocks-icon": "5.3.
|
|
34
|
-
"@khanacademy/wonder-blocks-
|
|
35
|
-
"@khanacademy/wonder-blocks-
|
|
36
|
-
"@khanacademy/wonder-blocks-typography": "4.3.
|
|
33
|
+
"@khanacademy/wonder-blocks-icon": "5.3.17",
|
|
34
|
+
"@khanacademy/wonder-blocks-layout": "3.1.54",
|
|
35
|
+
"@khanacademy/wonder-blocks-tokens": "16.7.0",
|
|
36
|
+
"@khanacademy/wonder-blocks-typography": "4.3.7"
|
|
37
37
|
},
|
|
38
38
|
"peerDependencies": {
|
|
39
39
|
"@phosphor-icons/core": "^2.0.2",
|