@khanacademy/wonder-blocks-form 4.5.1 → 4.6.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @khanacademy/wonder-blocks-form
 
+## 4.6.1
+
+### Patch Changes
+
+-   29563c0d: Fix onValidate prop so it gets properly called when it is defined in the call site
+
+## 4.6.0
+
+### Minor Changes
+
+-   96515513: TextField number inputs can now use `min`, `max`, and `snap` props
+
+### Patch Changes
+
+-   Updated dependencies [5dfac06e]
+    -   @khanacademy/wonder-blocks-core@6.4.1
+    -   @khanacademy/wonder-blocks-clickable@4.2.2
+    -   @khanacademy/wonder-blocks-icon@4.1.1
+    -   @khanacademy/wonder-blocks-layout@2.0.33
+    -   @khanacademy/wonder-blocks-typography@2.1.12
+
 ## 4.5.1
 
 ### Patch Changes

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

@@ -1,19 +1,16 @@
 import * as React from "react";
 import { StyleType } from "@khanacademy/wonder-blocks-core";
-import { TextFieldType } from "./text-field";
+import type { NumericInputProps } from "./text-field";
+import { OmitConstrained } from "../util/types";
 type WithForwardRef = {
     forwardedRef: React.ForwardedRef<HTMLInputElement>;
 };
-type Props = {
+type CommonProps = {
     /**
      * An optional unique identifier for the TextField.
      * If no id is specified, a unique id will be auto-generated.
      */
     id?: string;
-    /**
-     * Determines the type of input. Defaults to text.
-     */
-    type: TextFieldType;
     /**
      * Provide a label for the TextField.
      */
@@ -116,6 +113,14 @@ type Props = {
      */
     autoComplete?: string;
 };
+type OtherInputProps = CommonProps & {
+    /**
+     * Determines the type of input. Defaults to text.
+     */
+    type: "text" | "password" | "email" | "tel";
+};
+type FullNumericInputProps = NumericInputProps & CommonProps;
+type Props = OtherInputProps | FullNumericInputProps;
 type PropsWithForwardRef = Props & WithForwardRef;
 type DefaultProps = {
     type: PropsWithForwardRef["type"];
@@ -144,7 +149,7 @@ declare class LabeledTextField extends React.Component<PropsWithForwardRef, Stat
     handleBlur: (event: React.FocusEvent<HTMLInputElement>) => unknown;
     render(): React.ReactNode;
 }
-type ExportProps = Omit<JSX.LibraryManagedAttributes<typeof LabeledTextField, React.ComponentProps<typeof LabeledTextField>>, "forwardedRef">;
+type ExportProps = OmitConstrained<JSX.LibraryManagedAttributes<typeof LabeledTextField, React.ComponentProps<typeof LabeledTextField>>, "forwardedRef">;
 /**
  * A LabeledTextField is an element used to accept a single line of text
  * from the user paired with a label, description, and error field elements.

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

@@ -1,18 +1,15 @@
 import * as React from "react";
 import type { StyleType, AriaProps } from "@khanacademy/wonder-blocks-core";
+import { OmitConstrained } from "../util/types";
 export type TextFieldType = "text" | "password" | "email" | "number" | "tel";
 type WithForwardRef = {
     forwardedRef: React.ForwardedRef<HTMLInputElement>;
 };
-type Props = AriaProps & {
+type CommonProps = AriaProps & {
     /**
      * The unique identifier for the input.
      */
     id: string;
-    /**
-     * Determines the type of input. Defaults to text.
-     */
-    type: TextFieldType;
     /**
      * The input value.
      */
@@ -103,6 +100,27 @@ type Props = AriaProps & {
      */
     autoComplete?: string;
 };
+type OtherInputProps = CommonProps & {
+    type: "text" | "password" | "email" | "tel";
+};
+export type NumericInputProps = {
+    type: "number";
+    /**
+     * The minimum numeric value for the input.
+     */
+    min?: number;
+    /**
+     * The maximum numeric value for the input.
+     */
+    max?: number;
+    /**
+     * The numeric value to increment or decrement by.
+     * Requires the input to be multiples of this value.
+     */
+    step?: number;
+};
+type FullNumericInputProps = CommonProps & NumericInputProps;
+type Props = OtherInputProps | FullNumericInputProps;
 type PropsWithForwardRef = Props & WithForwardRef;
 type DefaultProps = {
     type: PropsWithForwardRef["type"];
@@ -133,7 +151,7 @@ declare class TextField extends React.Component<PropsWithForwardRef, State> {
     handleBlur: (event: React.FocusEvent<HTMLInputElement>) => unknown;
     render(): React.ReactNode;
 }
-type ExportProps = Omit<JSX.LibraryManagedAttributes<typeof TextField, React.ComponentProps<typeof TextField>>, "forwardedRef">;
+type ExportProps = OmitConstrained<JSX.LibraryManagedAttributes<typeof TextField, React.ComponentProps<typeof TextField>>, "forwardedRef">;
 /**
  * A TextField is an element used to accept a single line of text from the user.
  *

package/dist/es/index.js

@@ -36,7 +36,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-const _excluded$5 = ["checked", "disabled", "error", "groupName", "id", "testId"];
+const _excluded$6 = ["checked", "disabled", "error", "groupName", "id", "testId"];
 function mapCheckedToAriaChecked(value) {
   switch (value) {
     case true:
@@ -68,7 +68,7 @@ const CheckboxCore = React.forwardRef(function CheckboxCore(props, ref) {
       id,
       testId
     } = props,
-    sharedProps = _objectWithoutPropertiesLoose(props, _excluded$5);
+    sharedProps = _objectWithoutPropertiesLoose(props, _excluded$6);
   const innerRef = React.useRef(null);
   React.useEffect(() => {
     if (innerRef.current != null) {
@@ -209,7 +209,7 @@ const _generateStyles$1 = (checked, error) => {
   return styles$5[styleKey];
 };
 
-const _excluded$4 = ["checked", "disabled", "error", "groupName", "id", "testId"];
+const _excluded$5 = ["checked", "disabled", "error", "groupName", "id", "testId"];
 const {
   blue,
   red,
@@ -232,7 +232,7 @@ const RadioCore = React.forwardRef(function RadioCore(props, ref) {
       id,
       testId
     } = props,
-    sharedProps = _objectWithoutPropertiesLoose(props, _excluded$4);
+    sharedProps = _objectWithoutPropertiesLoose(props, _excluded$5);
   const stateStyles = _generateStyles(checked, error);
   const defaultStyle = [sharedStyles.inputReset, sharedStyles.default, !disabled && stateStyles.default, disabled && sharedStyles.disabled];
   return React.createElement(React.Fragment, null, React.createElement(StyledInput$1, _extends({}, sharedProps, {
@@ -352,7 +352,7 @@ const _generateStyles = (checked, error) => {
   return styles$4[styleKey];
 };
 
-const _excluded$3 = ["checked", "description", "disabled", "error", "id", "label", "onChange", "style", "className", "variant"];
+const _excluded$4 = ["checked", "description", "disabled", "error", "id", "label", "onChange", "style", "className", "variant"];
 const ChoiceInternal = React.forwardRef(function ChoiceInternal(props, ref) {
   const {
       checked,
@@ -366,7 +366,7 @@ const ChoiceInternal = React.forwardRef(function ChoiceInternal(props, ref) {
       className,
       variant
     } = props,
-    coreProps = _objectWithoutPropertiesLoose(props, _excluded$3);
+    coreProps = _objectWithoutPropertiesLoose(props, _excluded$4);
   const handleClick = () => {
     if (variant === "radio" && checked) {
       return;
@@ -451,13 +451,13 @@ const Checkbox = React.forwardRef(function Checkbox(props, ref) {
   }));
 });
 
-const _excluded$2 = ["disabled", "error"];
+const _excluded$3 = ["disabled", "error"];
 const Radio = React.forwardRef(function Radio(props, ref) {
   const {
       disabled = false,
       error = false
     } = props,
-    otherProps = _objectWithoutPropertiesLoose(props, _excluded$2);
+    otherProps = _objectWithoutPropertiesLoose(props, _excluded$3);
   return React.createElement(ChoiceInternal, _extends({}, otherProps, {
     variant: "radio",
     disabled: disabled,
@@ -466,7 +466,7 @@ const Radio = React.forwardRef(function Radio(props, ref) {
   }));
 });
 
-const _excluded$1 = ["checked", "disabled", "onChange", "value", "variant"];
+const _excluded$2 = ["checked", "disabled", "onChange", "value", "variant"];
 const Choice = React.forwardRef(function Choice(props, ref) {
   const {
       checked = false,
@@ -474,7 +474,7 @@ const Choice = React.forwardRef(function Choice(props, ref) {
       onChange = () => {},
       variant
     } = props,
-    remainingProps = _objectWithoutPropertiesLoose(props, _excluded$1);
+    remainingProps = _objectWithoutPropertiesLoose(props, _excluded$2);
   const getChoiceComponent = variant => {
     if (variant === "checkbox") {
       return Checkbox;
@@ -618,7 +618,7 @@ const RadioGroup = React.forwardRef(function RadioGroup(props, ref) {
   })));
 });
 
-const _excluded = ["id", "type", "value", "name", "disabled", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "onFocus", "onBlur", "onValidate", "validate", "onChange", "required"];
+const _excluded$1 = ["id", "type", "value", "name", "disabled", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "onFocus", "onBlur", "onValidate", "validate", "onChange", "required"];
 const defaultErrorMessage = "This field is required.";
 const StyledInput = addStyle("input");
 class TextField extends React.Component {
@@ -714,7 +714,7 @@ class TextField extends React.Component {
         autoComplete,
         forwardedRef
       } = _this$props,
-      otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
+      otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
     return React.createElement(StyledInput, _extends({
       style: [styles$1.input, styles$6.LabelMedium, styles$1.default, disabled ? styles$1.disabled : this.state.focused ? [styles$1.focused, light && styles$1.defaultLight] : !!this.state.error && [styles$1.error, light && styles$1.errorLight], !!this.state.error && styles$1.error, style && style],
       id: id,
@@ -878,6 +878,7 @@ const styles = StyleSheet.create({
   }
 });
 
+const _excluded = ["id", "type", "label", "description", "value", "disabled", "required", "validate", "onChange", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoComplete", "forwardedRef", "ariaDescribedby", "onValidate"];
 class LabeledTextField extends React.Component {
   constructor(props) {
     super(props);
@@ -923,26 +924,28 @@ class LabeledTextField extends React.Component {
     };
   }
   render() {
-    const {
-      id,
-      type,
-      label,
-      description,
-      value,
-      disabled,
-      required,
-      validate,
-      onChange,
-      onKeyDown,
-      placeholder,
-      light,
-      style,
-      testId,
-      readOnly,
-      autoComplete,
-      forwardedRef,
-      ariaDescribedby
-    } = this.props;
+    const _this$props = this.props,
+      {
+        id,
+        type,
+        label,
+        description,
+        value,
+        disabled,
+        required,
+        validate,
+        onChange,
+        onKeyDown,
+        placeholder,
+        light,
+        style,
+        testId,
+        readOnly,
+        autoComplete,
+        forwardedRef,
+        ariaDescribedby
+      } = _this$props,
+      otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
     return React.createElement(IDProvider, {
       id: id,
       scope: "labeled-text-field"
@@ -950,7 +953,7 @@ class LabeledTextField extends React.Component {
       id: uniqueId,
       testId: testId,
       style: style,
-      field: React.createElement(TextField$1, {
+      field: React.createElement(TextField$1, _extends({
         id: `${uniqueId}-field`,
         "aria-describedby": ariaDescribedby ? ariaDescribedby : `${uniqueId}-error`,
         "aria-required": required ? "true" : "false",
@@ -970,7 +973,7 @@ class LabeledTextField extends React.Component {
         readOnly: readOnly,
         autoComplete: autoComplete,
         ref: forwardedRef
-      }),
+      }, otherProps)),
       label: label,
       description: description,
       required: !!required,

package/dist/index.js

@@ -64,7 +64,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-const _excluded$5 = ["checked", "disabled", "error", "groupName", "id", "testId"];
+const _excluded$6 = ["checked", "disabled", "error", "groupName", "id", "testId"];
 function mapCheckedToAriaChecked(value) {
   switch (value) {
     case true:
@@ -96,7 +96,7 @@ const CheckboxCore = React__namespace.forwardRef(function CheckboxCore(props, re
       id,
       testId
     } = props,
-    sharedProps = _objectWithoutPropertiesLoose(props, _excluded$5);
+    sharedProps = _objectWithoutPropertiesLoose(props, _excluded$6);
   const innerRef = React__namespace.useRef(null);
   React__namespace.useEffect(() => {
     if (innerRef.current != null) {
@@ -237,7 +237,7 @@ const _generateStyles$1 = (checked, error) => {
   return styles$5[styleKey];
 };
 
-const _excluded$4 = ["checked", "disabled", "error", "groupName", "id", "testId"];
+const _excluded$5 = ["checked", "disabled", "error", "groupName", "id", "testId"];
 const {
   blue,
   red,
@@ -260,7 +260,7 @@ const RadioCore = React__namespace.forwardRef(function RadioCore(props, ref) {
       id,
       testId
     } = props,
-    sharedProps = _objectWithoutPropertiesLoose(props, _excluded$4);
+    sharedProps = _objectWithoutPropertiesLoose(props, _excluded$5);
   const stateStyles = _generateStyles(checked, error);
   const defaultStyle = [sharedStyles.inputReset, sharedStyles.default, !disabled && stateStyles.default, disabled && sharedStyles.disabled];
   return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(StyledInput$1, _extends({}, sharedProps, {
@@ -380,7 +380,7 @@ const _generateStyles = (checked, error) => {
   return styles$4[styleKey];
 };
 
-const _excluded$3 = ["checked", "description", "disabled", "error", "id", "label", "onChange", "style", "className", "variant"];
+const _excluded$4 = ["checked", "description", "disabled", "error", "id", "label", "onChange", "style", "className", "variant"];
 const ChoiceInternal = React__namespace.forwardRef(function ChoiceInternal(props, ref) {
   const {
       checked,
@@ -394,7 +394,7 @@ const ChoiceInternal = React__namespace.forwardRef(function ChoiceInternal(props
       className,
       variant
     } = props,
-    coreProps = _objectWithoutPropertiesLoose(props, _excluded$3);
+    coreProps = _objectWithoutPropertiesLoose(props, _excluded$4);
   const handleClick = () => {
     if (variant === "radio" && checked) {
       return;
@@ -479,13 +479,13 @@ const Checkbox = React__namespace.forwardRef(function Checkbox(props, ref) {
   }));
 });
 
-const _excluded$2 = ["disabled", "error"];
+const _excluded$3 = ["disabled", "error"];
 const Radio = React__namespace.forwardRef(function Radio(props, ref) {
   const {
       disabled = false,
       error = false
     } = props,
-    otherProps = _objectWithoutPropertiesLoose(props, _excluded$2);
+    otherProps = _objectWithoutPropertiesLoose(props, _excluded$3);
   return React__namespace.createElement(ChoiceInternal, _extends({}, otherProps, {
     variant: "radio",
     disabled: disabled,
@@ -494,7 +494,7 @@ const Radio = React__namespace.forwardRef(function Radio(props, ref) {
   }));
 });
 
-const _excluded$1 = ["checked", "disabled", "onChange", "value", "variant"];
+const _excluded$2 = ["checked", "disabled", "onChange", "value", "variant"];
 const Choice = React__namespace.forwardRef(function Choice(props, ref) {
   const {
       checked = false,
@@ -502,7 +502,7 @@ const Choice = React__namespace.forwardRef(function Choice(props, ref) {
       onChange = () => {},
       variant
     } = props,
-    remainingProps = _objectWithoutPropertiesLoose(props, _excluded$1);
+    remainingProps = _objectWithoutPropertiesLoose(props, _excluded$2);
   const getChoiceComponent = variant => {
     if (variant === "checkbox") {
       return Checkbox;
@@ -646,7 +646,7 @@ const RadioGroup = React__namespace.forwardRef(function RadioGroup(props, ref) {
   })));
 });
 
-const _excluded = ["id", "type", "value", "name", "disabled", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "onFocus", "onBlur", "onValidate", "validate", "onChange", "required"];
+const _excluded$1 = ["id", "type", "value", "name", "disabled", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "onFocus", "onBlur", "onValidate", "validate", "onChange", "required"];
 const defaultErrorMessage = "This field is required.";
 const StyledInput = wonderBlocksCore.addStyle("input");
 class TextField extends React__namespace.Component {
@@ -742,7 +742,7 @@ class TextField extends React__namespace.Component {
         autoComplete,
         forwardedRef
       } = _this$props,
-      otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
+      otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
     return React__namespace.createElement(StyledInput, _extends({
       style: [styles$1.input, wonderBlocksTypography.styles.LabelMedium, styles$1.default, disabled ? styles$1.disabled : this.state.focused ? [styles$1.focused, light && styles$1.defaultLight] : !!this.state.error && [styles$1.error, light && styles$1.errorLight], !!this.state.error && styles$1.error, style && style],
       id: id,
@@ -906,6 +906,7 @@ const styles = aphrodite.StyleSheet.create({
   }
 });
 
+const _excluded = ["id", "type", "label", "description", "value", "disabled", "required", "validate", "onChange", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoComplete", "forwardedRef", "ariaDescribedby", "onValidate"];
 class LabeledTextField extends React__namespace.Component {
   constructor(props) {
     super(props);
@@ -951,26 +952,28 @@ class LabeledTextField extends React__namespace.Component {
     };
   }
   render() {
-    const {
-      id,
-      type,
-      label,
-      description,
-      value,
-      disabled,
-      required,
-      validate,
-      onChange,
-      onKeyDown,
-      placeholder,
-      light,
-      style,
-      testId,
-      readOnly,
-      autoComplete,
-      forwardedRef,
-      ariaDescribedby
-    } = this.props;
+    const _this$props = this.props,
+      {
+        id,
+        type,
+        label,
+        description,
+        value,
+        disabled,
+        required,
+        validate,
+        onChange,
+        onKeyDown,
+        placeholder,
+        light,
+        style,
+        testId,
+        readOnly,
+        autoComplete,
+        forwardedRef,
+        ariaDescribedby
+      } = _this$props,
+      otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
     return React__namespace.createElement(wonderBlocksCore.IDProvider, {
       id: id,
       scope: "labeled-text-field"
@@ -978,7 +981,7 @@ class LabeledTextField extends React__namespace.Component {
       id: uniqueId,
       testId: testId,
       style: style,
-      field: React__namespace.createElement(TextField$1, {
+      field: React__namespace.createElement(TextField$1, _extends({
         id: `${uniqueId}-field`,
         "aria-describedby": ariaDescribedby ? ariaDescribedby : `${uniqueId}-error`,
         "aria-required": required ? "true" : "false",
@@ -998,7 +1001,7 @@ class LabeledTextField extends React__namespace.Component {
         readOnly: readOnly,
         autoComplete: autoComplete,
         ref: forwardedRef
-      }),
+      }, otherProps)),
       label: label,
       description: description,
       required: !!required,

package/dist/util/types.d.ts

@@ -63,3 +63,6 @@ export type RadioGroupProps = {
     /** Value of the selected radio item. */
     selectedValue: string;
 };
+export type OmitConstrained<T, K> = {
+    [P in keyof T as Exclude<P, K & keyof any>]: T[P];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "4.5.1",
+  "version": "4.6.1",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,12 +16,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^4.2.1",
-    "@khanacademy/wonder-blocks-core": "^6.4.0",
-    "@khanacademy/wonder-blocks-icon": "^4.1.0",
-    "@khanacademy/wonder-blocks-layout": "^2.0.32",
+    "@khanacademy/wonder-blocks-clickable": "^4.2.2",
+    "@khanacademy/wonder-blocks-core": "^6.4.1",
+    "@khanacademy/wonder-blocks-icon": "^4.1.1",
+    "@khanacademy/wonder-blocks-layout": "^2.0.33",
     "@khanacademy/wonder-blocks-tokens": "^1.3.0",
-    "@khanacademy/wonder-blocks-typography": "^2.1.11"
+    "@khanacademy/wonder-blocks-typography": "^2.1.12"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",