@khanacademy/wonder-blocks-form 7.6.0 → 7.6.1
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 +15 -0
- package/dist/es/index.js +3 -3
- package/dist/index.js +3 -3
- 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.1 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,20 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-form
|
|
2
2
|
|
|
3
|
+
## 7.6.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 40cb70f: Add `require-logical-properties-for-rtl` ESLint rule to `eslint-plugin-wonder-blocks` recommended config, and migrate all Wonder Blocks component source files to use CSS logical properties for improved RTL layout support.
|
|
8
|
+
- 40cb70f: Enable RTL logical-properties ESLint rule in recommended config
|
|
9
|
+
- Updated dependencies [40cb70f]
|
|
10
|
+
- Updated dependencies [40cb70f]
|
|
11
|
+
- Updated dependencies [c97ece4]
|
|
12
|
+
- @khanacademy/wonder-blocks-core@12.4.4
|
|
13
|
+
- @khanacademy/wonder-blocks-clickable@8.2.0
|
|
14
|
+
- @khanacademy/wonder-blocks-icon@5.3.15
|
|
15
|
+
- @khanacademy/wonder-blocks-layout@3.1.52
|
|
16
|
+
- @khanacademy/wonder-blocks-typography@4.3.5
|
|
17
|
+
|
|
3
18
|
## 7.6.0
|
|
4
19
|
|
|
5
20
|
### Minor Changes
|
package/dist/es/index.js
CHANGED
|
@@ -16,9 +16,9 @@ var theme = mapValuesToCssVars(themeDefault,"--wb-c-form-");
|
|
|
16
16
|
|
|
17
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.core.foreground.knockout.default},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.core.border.instructive.default},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.core.background.base.default},hover:baseStyles.choice.checked,press:{border:semanticColor.core.background.instructive.strong,background:semanticColor.core.background.instructive.strong}},error:{rest:baseStyles.choice.error,hover:baseStyles.choice.error,press:{...baseStyles.choice.error,background:semanticColor.core.background.critical.strong,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,background:semanticColor.core.background.base.default},press:{border:semanticColor.core.border.disabled.strong,background:semanticColor.core.background.base.default}}}}};
|
|
18
18
|
|
|
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,
|
|
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
|
|
|
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,
|
|
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,minBlockSize:baseStyles.choice.sizing.size,minInlineSize: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]};
|
|
22
22
|
|
|
23
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}});
|
|
24
24
|
|
|
@@ -42,6 +42,6 @@ const StyledSpan=addStyle("span");class FieldHeading extends React.Component{ren
|
|
|
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&&{
|
|
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:`0 0 0 ${theme.field.border.width.press} ${semanticColor.input.default.border}`}},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}}});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
|
@@ -43,9 +43,9 @@ var theme = wonderBlocksTokens.mapValuesToCssVars(themeDefault,"--wb-c-form-");
|
|
|
43
43
|
|
|
44
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.core.foreground.knockout.default},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.core.border.instructive.default},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.core.background.base.default},hover:baseStyles.choice.checked,press:{border:wonderBlocksTokens.semanticColor.core.background.instructive.strong,background:wonderBlocksTokens.semanticColor.core.background.instructive.strong}},error:{rest:baseStyles.choice.error,hover:baseStyles.choice.error,press:{...baseStyles.choice.error,background:wonderBlocksTokens.semanticColor.core.background.critical.strong,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,background:wonderBlocksTokens.semanticColor.core.background.base.default},press:{border:wonderBlocksTokens.semanticColor.core.border.disabled.strong,background:wonderBlocksTokens.semanticColor.core.background.base.default}}}}};
|
|
45
45
|
|
|
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,
|
|
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
|
|
|
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,
|
|
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,minBlockSize:baseStyles.choice.sizing.size,minInlineSize: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]};
|
|
49
49
|
|
|
50
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}});
|
|
51
51
|
|
|
@@ -69,7 +69,7 @@ const StyledSpan=wonderBlocksCore.addStyle("span");class FieldHeading extends Re
|
|
|
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&&{
|
|
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:`0 0 0 ${theme.field.border.width.press} ${wonderBlocksTokens.semanticColor.input.default.border}`}},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}}});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.1",
|
|
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-
|
|
32
|
-
"@khanacademy/wonder-blocks-core": "12.4.
|
|
33
|
-
"@khanacademy/wonder-blocks-
|
|
34
|
-
"@khanacademy/wonder-blocks-layout": "3.1.
|
|
31
|
+
"@khanacademy/wonder-blocks-clickable": "8.2.0",
|
|
32
|
+
"@khanacademy/wonder-blocks-core": "12.4.4",
|
|
33
|
+
"@khanacademy/wonder-blocks-icon": "5.3.15",
|
|
34
|
+
"@khanacademy/wonder-blocks-layout": "3.1.52",
|
|
35
35
|
"@khanacademy/wonder-blocks-tokens": "16.5.0",
|
|
36
|
-
"@khanacademy/wonder-blocks-typography": "4.3.
|
|
36
|
+
"@khanacademy/wonder-blocks-typography": "4.3.5"
|
|
37
37
|
},
|
|
38
38
|
"peerDependencies": {
|
|
39
39
|
"@phosphor-icons/core": "^2.0.2",
|