@khanacademy/wonder-blocks-form 7.6.15 → 7.7.0

package/.turbo/turbo-build$colon$css.log

@@ -1,5 +1,5 @@
 
-> @khanacademy/wonder-blocks-form@7.6.15 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-form
+> @khanacademy/wonder-blocks-form@7.7.0 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-form
 > pnpm exec wonder-blocks-tokens .
 
 CSS variables generated successfully in: /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-form/dist/css

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @khanacademy/wonder-blocks-form
 
+## 7.7.0
+
+### Minor Changes
+
+- 9ec3189: The default required field error message in TextField and TextArea now reads a translated string from `WonderBlocksConfigProvider`. Passing a string to the `required` prop overrides the built-in translation.
+
+### Patch Changes
+
+- Updated dependencies [9ec3189]
+- Updated dependencies [f070142]
+- Updated dependencies [355f6e1]
+    - @khanacademy/wonder-blocks-config@0.4.0
+
 ## 7.6.15
 
 ### Patch Changes

package/dist/components/text-area.d.ts

@@ -170,8 +170,8 @@ declare const TextArea: React.ForwardRefExoticComponent<Readonly<import("@khanac
      * String:
      * Please pass in a translated string to use as the error message that will
      * render if the user leaves this textarea blank. If this textarea is required,
-     * and a string is not passed in, a default untranslated string will render
-     * upon error.
+     * and a string is not passed in, the default `requiredFieldMessage` string
+     * from `WonderBlocksConfigProvider` will render upon error.
      * Note: The string will not be used if a `validate` prop is passed in.
      *
      * Example message: i18n._("A password is required to log in.")
@@ -180,8 +180,8 @@ declare const TextArea: React.ForwardRefExoticComponent<Readonly<import("@khanac
      * True/false indicating whether this textarea is required. Please do not pass
      * in `true` if possible - pass in the error string instead.
      * If `true` is passed, and a `validate` prop is not passed, that means
-     * there is no corresponding message and the default untranlsated message
-     * will be used.
+     * there is no corresponding message and the default `requiredFieldMessage`
+     * string from `WonderBlocksConfigProvider` will be used.
      */
     required?: boolean | string;
     /**

package/dist/components/text-field.d.ts

@@ -91,8 +91,8 @@ type CommonProps = AriaProps & {
      * String:
      * Please pass in a translated string to use as the error message that will
      * render if the user leaves this field blank. If this field is required,
-     * and a string is not passed in, a default untranslated string will render
-     * upon error.
+     * and a string is not passed in, the default `requiredFieldMessage` string
+     * from `WonderBlocksConfigProvider` will render upon error.
      * Note: The string will not be used if a `validate` prop is passed in.
      *
      * Example message: i18n._("A password is required to log in.")
@@ -101,8 +101,8 @@ type CommonProps = AriaProps & {
      * True/false indicating whether this field is required. Please do not pass
      * in `true` if possible - pass in the error string instead.
      * If `true` is passed, and a `validate` prop is not passed, that means
-     * there is no corresponding message and the default untranlsated message
-     * will be used.
+     * there is no corresponding message and the default `requiredFieldMessage`
+     * string from `WonderBlocksConfigProvider` will be used.
      */
     required?: boolean | string;
     /**

package/dist/es/index.js

@@ -9,6 +9,7 @@ import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import checkIcon from '@phosphor-icons/core/bold/check-bold.svg';
 import minusIcon from '@phosphor-icons/core/bold/minus-bold.svg';
 import { focusStyles } from '@khanacademy/wonder-blocks-styles';
+import { useWonderBlocksI18n } from '@khanacademy/wonder-blocks-config';
 
 var themeDefault = {choice:{inputWrapper:{layout:{padding:sizing.size_0,margin:sizing.size_0}}},description:{color:{foreground:semanticColor.core.foreground.neutral.default}},field:{border:{radius:border.radius.radius_040,width:{error:border.width.thin,press:border.width.none}},sizing:{height:sizing.size_400},layout:{paddingBlock:sizing.size_100,paddingInline:sizing.size_160}}};
 
@@ -34,7 +35,7 @@ const StyledFieldset$1=addStyle("fieldset");const StyledLegend$1=addStyle("legen
 
 const StyledFieldset=addStyle("fieldset");const StyledLegend=addStyle("legend");const RadioGroup=React.forwardRef(function RadioGroup(props,ref){const{children,label,description,errorMessage,groupName,onChange,selectedValue,style,testId}=props;const allChildren=React.Children.toArray(children).filter(Boolean);return jsxs(StyledFieldset,{"data-testid":testId,style:[styles$3.fieldset,style],ref:ref,children:[label&&jsx(StyledLegend,{style:styles$3.legend,children:jsx(BodyText,{tag:"span",children:label})}),description&&jsx(BodyText,{size:"small",style:styles$3.description,children:description}),errorMessage&&jsx(BodyText,{size:"small",style:styles$3.error,children:errorMessage}),allChildren.map((child,index)=>{const{style,value}=child.props;const checked=selectedValue===value;const hasMeta=!!(label||description||errorMessage);return React.cloneElement(child,{checked:checked,error:!!errorMessage,groupName:groupName,id:`${groupName}-${value}`,key:value,onChange:()=>onChange(value),style:[index===0&&hasMeta&&styles$3.firstChoiceMetaSpacing,index>0&&styles$3.choiceLineGap,style],variant:"radio"})})]})});
 
-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}};
+const useFieldValidation=({value,disabled=false,validate,onValidate,required=false,instantValidation=true})=>{const{strings}=useWonderBlocksI18n();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:strings.requiredFieldMessage;const error=newValue?null:requiredString;setErrorMessage(error);if(onValidate){onValidate(error);}}};useOnMountEffect(()=>{if(value!==""){handleValidation(value);}});return {errorMessage,onBlurValidation,onChangeValidation}};
 
 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}));
 

package/dist/hooks/use-field-validation.d.ts

@@ -17,7 +17,8 @@ type FieldValidationProps = {
  * - `value` - The value of the field.
  * - `disabled` - If the field is disabled.
  * - `required` - Whether the field is required to continue, or the error
- * message if it is left blank.
+ * message if it is left blank. If `true`, the error message is the
+ * `requiredFieldMessage` string provided by `WonderBlocksConfigProvider`.
  * - `instantValidation` - If the field should be validated instantly.
  * - `validate` - Validation for the field.
  * - `onValidate` - Called after the `validate` prop is called.

package/dist/index.js

@@ -12,6 +12,7 @@ var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
 var checkIcon = require('@phosphor-icons/core/bold/check-bold.svg');
 var minusIcon = require('@phosphor-icons/core/bold/minus-bold.svg');
 var wonderBlocksStyles = require('@khanacademy/wonder-blocks-styles');
+var wonderBlocksConfig = require('@khanacademy/wonder-blocks-config');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -61,7 +62,7 @@ const StyledFieldset$1=wonderBlocksCore.addStyle("fieldset");const StyledLegend$
 
 const StyledFieldset=wonderBlocksCore.addStyle("fieldset");const StyledLegend=wonderBlocksCore.addStyle("legend");const RadioGroup=React__namespace.forwardRef(function RadioGroup(props,ref){const{children,label,description,errorMessage,groupName,onChange,selectedValue,style,testId}=props;const allChildren=React__namespace.Children.toArray(children).filter(Boolean);return jsxRuntime.jsxs(StyledFieldset,{"data-testid":testId,style:[styles$3.fieldset,style],ref:ref,children:[label&&jsxRuntime.jsx(StyledLegend,{style:styles$3.legend,children:jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",children:label})}),description&&jsxRuntime.jsx(wonderBlocksTypography.BodyText,{size:"small",style:styles$3.description,children:description}),errorMessage&&jsxRuntime.jsx(wonderBlocksTypography.BodyText,{size:"small",style:styles$3.error,children:errorMessage}),allChildren.map((child,index)=>{const{style,value}=child.props;const checked=selectedValue===value;const hasMeta=!!(label||description||errorMessage);return React__namespace.cloneElement(child,{checked:checked,error:!!errorMessage,groupName:groupName,id:`${groupName}-${value}`,key:value,onChange:()=>onChange(value),style:[index===0&&hasMeta&&styles$3.firstChoiceMetaSpacing,index>0&&styles$3.choiceLineGap,style],variant:"radio"})})]})});
 
-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}};
+const useFieldValidation=({value,disabled=false,validate,onValidate,required=false,instantValidation=true})=>{const{strings}=wonderBlocksConfig.useWonderBlocksI18n();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:strings.requiredFieldMessage;const error=newValue?null:requiredString;setErrorMessage(error);if(onValidate){onValidate(error);}}};wonderBlocksCore.useOnMountEffect(()=>{if(value!==""){handleValidation(value);}});return {errorMessage,onBlurValidation,onChangeValidation}};
 
 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}));
 

package/package.json

@@ -3,7 +3,7 @@
   "description": "Form components for Wonder Blocks.",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "7.6.15",
+  "version": "7.7.0",
   "publishConfig": {
     "access": "public"
   },
@@ -29,10 +29,11 @@
   },
   "dependencies": {
     "@khanacademy/wonder-blocks-clickable": "8.3.1",
+    "@khanacademy/wonder-blocks-config": "0.4.0",
     "@khanacademy/wonder-blocks-core": "12.5.0",
+    "@khanacademy/wonder-blocks-icon": "6.0.2",
     "@khanacademy/wonder-blocks-layout": "3.1.62",
     "@khanacademy/wonder-blocks-tokens": "18.0.0",
-    "@khanacademy/wonder-blocks-icon": "6.0.2",
     "@khanacademy/wonder-blocks-typography": "5.0.5"
   },
   "peerDependencies": {