@khanacademy/wonder-blocks-form 4.3.0 → 4.3.2

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @khanacademy/wonder-blocks-form
 
+## 4.3.2
+
+### Patch Changes
+
+-   4f8133ed: Fix props so `variants` doesn't show up in underlying input attributes
+-   Updated dependencies [ec6a33a4]
+-   Updated dependencies [1344436f]
+    -   @khanacademy/wonder-blocks-icon@2.1.0
+    -   @khanacademy/wonder-blocks-core@5.4.0
+    -   @khanacademy/wonder-blocks-clickable@3.1.3
+    -   @khanacademy/wonder-blocks-layout@2.0.16
+    -   @khanacademy/wonder-blocks-typography@2.1.2
+
+## 4.3.1
+
+### Patch Changes
+
+-   9f3752d4: Used named functions in componenets with forwarded refs
+-   Updated dependencies [9f3752d4]
+    -   @khanacademy/wonder-blocks-typography@2.1.1
+    -   @khanacademy/wonder-blocks-core@5.3.1
+    -   @khanacademy/wonder-blocks-clickable@3.1.2
+    -   @khanacademy/wonder-blocks-icon@2.0.15
+    -   @khanacademy/wonder-blocks-layout@2.0.15
+
 ## 4.3.0
 
 ### Minor Changes

package/dist/es/index.js

@@ -35,7 +35,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-const _excluded$4 = ["checked", "disabled", "error", "groupName", "id", "testId"];
+const _excluded$5 = ["checked", "disabled", "error", "groupName", "id", "testId"];
 function mapCheckedToAriaChecked(value) {
   switch (value) {
     case true:
@@ -62,7 +62,7 @@ const checkPath = {
 const indeterminatePath = {
   small: "M3 8C3 7.44772 3.44772 7 4 7H12C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9H4C3.44772 9 3 8.55228 3 8Z"
 };
-const CheckboxCore = React.forwardRef((props, ref) => {
+const CheckboxCore = React.forwardRef(function CheckboxCore(props, ref) {
   const {
       checked,
       disabled,
@@ -71,7 +71,7 @@ const CheckboxCore = React.forwardRef((props, ref) => {
       id,
       testId
     } = props,
-    sharedProps = _objectWithoutPropertiesLoose(props, _excluded$4);
+    sharedProps = _objectWithoutPropertiesLoose(props, _excluded$5);
   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$3 = ["checked", "disabled", "error", "groupName", "id", "testId"];
+const _excluded$4 = ["checked", "disabled", "error", "groupName", "id", "testId"];
 const {
   blue,
   red,
@@ -220,7 +220,7 @@ const {
   offBlack50
 } = Color;
 const StyledInput$1 = addStyle("input");
-const RadioCore = React.forwardRef((props, ref) => {
+const RadioCore = React.forwardRef(function RadioCore(props, ref) {
   const handleChange = () => {
     return;
   };
@@ -232,7 +232,7 @@ const RadioCore = React.forwardRef((props, ref) => {
       id,
       testId
     } = props,
-    sharedProps = _objectWithoutPropertiesLoose(props, _excluded$3);
+    sharedProps = _objectWithoutPropertiesLoose(props, _excluded$4);
   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, {
@@ -354,19 +354,21 @@ const _generateStyles = (checked, error) => {
   return styles$4[styleKey];
 };
 
-const ChoiceInternal = React.forwardRef((props, ref) => {
+const _excluded$3 = ["checked", "description", "disabled", "error", "id", "label", "onChange", "style", "className", "variant"];
+const ChoiceInternal = React.forwardRef(function ChoiceInternal(props, ref) {
   const {
-    checked,
-    description,
-    disabled = false,
-    error = false,
-    id,
-    label,
-    onChange,
-    style,
-    className,
-    variant
-  } = props;
+      checked,
+      description,
+      disabled = false,
+      error = false,
+      id,
+      label,
+      onChange,
+      style,
+      className,
+      variant
+    } = props,
+    coreProps = _objectWithoutPropertiesLoose(props, _excluded$3);
   const handleClick = () => {
     if (variant === "radio" && checked) {
       return;
@@ -406,8 +408,9 @@ const ChoiceInternal = React.forwardRef((props, ref) => {
     }, React.createElement(View, {
       style: styles$3.wrapper,
       tabIndex: -1
-    }, React.createElement(ChoiceCore, _extends({}, props, {
+    }, React.createElement(ChoiceCore, _extends({}, coreProps, {
       id: uniqueId,
+      checked: checked,
       "aria-describedby": descriptionId,
       onClick: handleClick,
       disabled: disabled,
@@ -437,7 +440,7 @@ const styles$3 = StyleSheet.create({
   }
 });
 
-const Checkbox = React.forwardRef((props, ref) => {
+const Checkbox = React.forwardRef(function Checkbox(props, ref) {
   const {
     disabled = false,
     error = false
@@ -451,7 +454,7 @@ const Checkbox = React.forwardRef((props, ref) => {
 });
 
 const _excluded$2 = ["disabled", "error"];
-const Radio = React.forwardRef((props, ref) => {
+const Radio = React.forwardRef(function Radio(props, ref) {
   const {
       disabled = false,
       error = false
@@ -466,7 +469,7 @@ const Radio = React.forwardRef((props, ref) => {
 });
 
 const _excluded$1 = ["checked", "disabled", "onChange", "value", "variant"];
-const Choice = React.forwardRef((props, ref) => {
+const Choice = React.forwardRef(function Choice(props, ref) {
   const {
       checked = false,
       disabled = false,
@@ -514,7 +517,7 @@ const styles$2 = StyleSheet.create({
 
 const StyledFieldset$1 = addStyle("fieldset");
 const StyledLegend$1 = addStyle("legend");
-const CheckboxGroup = React.forwardRef((props, ref) => {
+const CheckboxGroup = React.forwardRef(function CheckboxGroup(props, ref) {
   const {
     children,
     label,
@@ -571,7 +574,7 @@ const CheckboxGroup = React.forwardRef((props, ref) => {
 
 const StyledFieldset = addStyle("fieldset");
 const StyledLegend = addStyle("legend");
-const RadioGroup = React.forwardRef((props, ref) => {
+const RadioGroup = React.forwardRef(function RadioGroup(props, ref) {
   const {
     children,
     label,

package/dist/index.js

@@ -64,7 +64,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-const _excluded$4 = ["checked", "disabled", "error", "groupName", "id", "testId"];
+const _excluded$5 = ["checked", "disabled", "error", "groupName", "id", "testId"];
 function mapCheckedToAriaChecked(value) {
   switch (value) {
     case true:
@@ -91,7 +91,7 @@ const checkPath = {
 const indeterminatePath = {
   small: "M3 8C3 7.44772 3.44772 7 4 7H12C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9H4C3.44772 9 3 8.55228 3 8Z"
 };
-const CheckboxCore = React__namespace.forwardRef((props, ref) => {
+const CheckboxCore = React__namespace.forwardRef(function CheckboxCore(props, ref) {
   const {
       checked,
       disabled,
@@ -100,7 +100,7 @@ const CheckboxCore = React__namespace.forwardRef((props, ref) => {
       id,
       testId
     } = props,
-    sharedProps = _objectWithoutPropertiesLoose(props, _excluded$4);
+    sharedProps = _objectWithoutPropertiesLoose(props, _excluded$5);
   const innerRef = React__namespace.useRef(null);
   React__namespace.useEffect(() => {
     if (innerRef.current != null) {
@@ -238,7 +238,7 @@ const _generateStyles$1 = (checked, error) => {
   return styles$5[styleKey];
 };
 
-const _excluded$3 = ["checked", "disabled", "error", "groupName", "id", "testId"];
+const _excluded$4 = ["checked", "disabled", "error", "groupName", "id", "testId"];
 const {
   blue,
   red,
@@ -249,7 +249,7 @@ const {
   offBlack50
 } = Color__default["default"];
 const StyledInput$1 = wonderBlocksCore.addStyle("input");
-const RadioCore = React__namespace.forwardRef((props, ref) => {
+const RadioCore = React__namespace.forwardRef(function RadioCore(props, ref) {
   const handleChange = () => {
     return;
   };
@@ -261,7 +261,7 @@ const RadioCore = React__namespace.forwardRef((props, ref) => {
       id,
       testId
     } = props,
-    sharedProps = _objectWithoutPropertiesLoose(props, _excluded$3);
+    sharedProps = _objectWithoutPropertiesLoose(props, _excluded$4);
   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, {
@@ -383,19 +383,21 @@ const _generateStyles = (checked, error) => {
   return styles$4[styleKey];
 };
 
-const ChoiceInternal = React__namespace.forwardRef((props, ref) => {
+const _excluded$3 = ["checked", "description", "disabled", "error", "id", "label", "onChange", "style", "className", "variant"];
+const ChoiceInternal = React__namespace.forwardRef(function ChoiceInternal(props, ref) {
   const {
-    checked,
-    description,
-    disabled = false,
-    error = false,
-    id,
-    label,
-    onChange,
-    style,
-    className,
-    variant
-  } = props;
+      checked,
+      description,
+      disabled = false,
+      error = false,
+      id,
+      label,
+      onChange,
+      style,
+      className,
+      variant
+    } = props,
+    coreProps = _objectWithoutPropertiesLoose(props, _excluded$3);
   const handleClick = () => {
     if (variant === "radio" && checked) {
       return;
@@ -435,8 +437,9 @@ const ChoiceInternal = React__namespace.forwardRef((props, ref) => {
     }, React__namespace.createElement(wonderBlocksCore.View, {
       style: styles$3.wrapper,
       tabIndex: -1
-    }, React__namespace.createElement(ChoiceCore, _extends({}, props, {
+    }, React__namespace.createElement(ChoiceCore, _extends({}, coreProps, {
       id: uniqueId,
+      checked: checked,
       "aria-describedby": descriptionId,
       onClick: handleClick,
       disabled: disabled,
@@ -466,7 +469,7 @@ const styles$3 = aphrodite.StyleSheet.create({
   }
 });
 
-const Checkbox = React__namespace.forwardRef((props, ref) => {
+const Checkbox = React__namespace.forwardRef(function Checkbox(props, ref) {
   const {
     disabled = false,
     error = false
@@ -480,7 +483,7 @@ const Checkbox = React__namespace.forwardRef((props, ref) => {
 });
 
 const _excluded$2 = ["disabled", "error"];
-const Radio = React__namespace.forwardRef((props, ref) => {
+const Radio = React__namespace.forwardRef(function Radio(props, ref) {
   const {
       disabled = false,
       error = false
@@ -495,7 +498,7 @@ const Radio = React__namespace.forwardRef((props, ref) => {
 });
 
 const _excluded$1 = ["checked", "disabled", "onChange", "value", "variant"];
-const Choice = React__namespace.forwardRef((props, ref) => {
+const Choice = React__namespace.forwardRef(function Choice(props, ref) {
   const {
       checked = false,
       disabled = false,
@@ -543,7 +546,7 @@ const styles$2 = aphrodite.StyleSheet.create({
 
 const StyledFieldset$1 = wonderBlocksCore.addStyle("fieldset");
 const StyledLegend$1 = wonderBlocksCore.addStyle("legend");
-const CheckboxGroup = React__namespace.forwardRef((props, ref) => {
+const CheckboxGroup = React__namespace.forwardRef(function CheckboxGroup(props, ref) {
   const {
     children,
     label,
@@ -600,7 +603,7 @@ const CheckboxGroup = React__namespace.forwardRef((props, ref) => {
 
 const StyledFieldset = wonderBlocksCore.addStyle("fieldset");
 const StyledLegend = wonderBlocksCore.addStyle("legend");
-const RadioGroup = React__namespace.forwardRef((props, ref) => {
+const RadioGroup = React__namespace.forwardRef(function RadioGroup(props, ref) {
   const {
     children,
     label,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "4.3.0",
+  "version": "4.3.2",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,13 +16,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^3.1.1",
+    "@khanacademy/wonder-blocks-clickable": "^3.1.3",
     "@khanacademy/wonder-blocks-color": "^2.0.1",
-    "@khanacademy/wonder-blocks-core": "^5.3.0",
-    "@khanacademy/wonder-blocks-icon": "^2.0.14",
-    "@khanacademy/wonder-blocks-layout": "^2.0.14",
+    "@khanacademy/wonder-blocks-core": "^5.4.0",
+    "@khanacademy/wonder-blocks-icon": "^2.1.0",
+    "@khanacademy/wonder-blocks-layout": "^2.0.16",
     "@khanacademy/wonder-blocks-spacing": "^4.0.1",
-    "@khanacademy/wonder-blocks-typography": "^2.1.0"
+    "@khanacademy/wonder-blocks-typography": "^2.1.2"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",

package/src/components/checkbox-core.tsx

@@ -39,83 +39,77 @@ const indeterminatePath: IconAsset = {
 /**
  * The internal stateless ☑️ Checkbox
  */
-const CheckboxCore = React.forwardRef(
-    (props: ChoiceCoreProps, ref: React.ForwardedRef<HTMLInputElement>) => {
-        const {
-            checked,
-            disabled,
-            error,
-            groupName,
-            id,
-            testId,
-            ...sharedProps
-        } = props;
-
-        const innerRef = React.useRef<HTMLInputElement>(null);
-
-        React.useEffect(() => {
-            // Keep the indeterminate state in sync with the checked prop
-            if (innerRef.current != null) {
-                innerRef.current.indeterminate = checked == null;
-            }
-        }, [checked, innerRef]);
-
-        const handleChange: () => void = () => {
-            // Empty because change is handled by ClickableBehavior
-            return;
-        };
-
-        const stateStyles = _generateStyles(checked, error);
-
-        const defaultStyle = [
-            sharedStyles.inputReset,
-            sharedStyles.default,
-            !disabled && stateStyles.default,
-            disabled && sharedStyles.disabled,
-        ];
-
-        const checkboxIcon = (
-            <Icon
-                color={disabled ? offBlack32 : white}
-                icon={checked ? checkPath : indeterminatePath}
-                size="small"
-                style={sharedStyles.checkboxIcon}
+const CheckboxCore = React.forwardRef(function CheckboxCore(
+    props: ChoiceCoreProps,
+    ref: React.ForwardedRef<HTMLInputElement>,
+) {
+    const {checked, disabled, error, groupName, id, testId, ...sharedProps} =
+        props;
+
+    const innerRef = React.useRef<HTMLInputElement>(null);
+
+    React.useEffect(() => {
+        // Keep the indeterminate state in sync with the checked prop
+        if (innerRef.current != null) {
+            innerRef.current.indeterminate = checked == null;
+        }
+    }, [checked, innerRef]);
+
+    const handleChange: () => void = () => {
+        // Empty because change is handled by ClickableBehavior
+        return;
+    };
+
+    const stateStyles = _generateStyles(checked, error);
+
+    const defaultStyle = [
+        sharedStyles.inputReset,
+        sharedStyles.default,
+        !disabled && stateStyles.default,
+        disabled && sharedStyles.disabled,
+    ];
+
+    const checkboxIcon = (
+        <Icon
+            color={disabled ? offBlack32 : white}
+            icon={checked ? checkPath : indeterminatePath}
+            size="small"
+            style={sharedStyles.checkboxIcon}
+        />
+    );
+
+    const ariaChecked = mapCheckedToAriaChecked(checked);
+
+    return (
+        <React.Fragment>
+            <StyledInput
+                {...sharedProps}
+                ref={(node) => {
+                    // @ts-expect-error: current is not actually read-only
+                    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}
+                // Need to specify because this is a controlled React form
+                // component, but we handle the click via ClickableBehavior
+                onChange={handleChange}
+                style={defaultStyle}
+                data-test-id={testId}
             />
-        );
-
-        const ariaChecked = mapCheckedToAriaChecked(checked);
-
-        return (
-            <React.Fragment>
-                <StyledInput
-                    {...sharedProps}
-                    ref={(node) => {
-                        // @ts-expect-error: current is not actually read-only
-                        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}
-                    // Need to specify because this is a controlled React form
-                    // component, but we handle the click via ClickableBehavior
-                    onChange={handleChange}
-                    style={defaultStyle}
-                    data-test-id={testId}
-                />
-                {checked || checked == null ? checkboxIcon : <></>}
-            </React.Fragment>
-        );
-    },
-);
+            {checked || checked == null ? checkboxIcon : <></>}
+        </React.Fragment>
+    );
+});
 
 const size = 16;
 

package/src/components/checkbox-group.tsx

@@ -95,88 +95,80 @@ const StyledLegend = addStyle("legend");
  * </CheckboxGroup>
  * ```
  */
-const CheckboxGroup = React.forwardRef(
-    (
-        props: CheckboxGroupProps,
-        ref: React.ForwardedRef<HTMLFieldSetElement>,
-    ) => {
-        const {
-            children,
-            label,
-            description,
-            errorMessage,
-            groupName,
-            onChange,
-            selectedValues,
-            style,
-            testId,
-        } = props;
+const CheckboxGroup = React.forwardRef(function CheckboxGroup(
+    props: CheckboxGroupProps,
+    ref: React.ForwardedRef<HTMLFieldSetElement>,
+) {
+    const {
+        children,
+        label,
+        description,
+        errorMessage,
+        groupName,
+        onChange,
+        selectedValues,
+        style,
+        testId,
+    } = props;
 
-        const handleChange = (
-            changedValue: string,
-            originalCheckedState: boolean,
-        ) => {
-            if (originalCheckedState) {
-                const index = selectedValues.indexOf(changedValue);
-                const updatedSelection = [
-                    ...selectedValues.slice(0, index),
-                    ...selectedValues.slice(index + 1),
-                ];
-                onChange(updatedSelection);
-            } else {
-                onChange([...selectedValues, changedValue]);
-            }
-        };
+    const handleChange = (
+        changedValue: string,
+        originalCheckedState: boolean,
+    ) => {
+        if (originalCheckedState) {
+            const index = selectedValues.indexOf(changedValue);
+            const updatedSelection = [
+                ...selectedValues.slice(0, index),
+                ...selectedValues.slice(index + 1),
+            ];
+            onChange(updatedSelection);
+        } else {
+            onChange([...selectedValues, changedValue]);
+        }
+    };
 
-        const allChildren = React.Children.toArray(children).filter(Boolean);
+    const allChildren = React.Children.toArray(children).filter(Boolean);
 
-        return (
-            <StyledFieldset
-                data-test-id={testId}
-                style={styles.fieldset}
-                ref={ref}
-            >
-                {/* We have a View here because fieldset cannot be used with flexbox*/}
-                <View style={style}>
-                    {label && (
-                        <StyledLegend style={styles.legend}>
-                            <LabelMedium>{label}</LabelMedium>
-                        </StyledLegend>
-                    )}
-                    {description && (
-                        <LabelSmall style={styles.description}>
-                            {description}
-                        </LabelSmall>
-                    )}
-                    {errorMessage && (
-                        <LabelSmall style={styles.error}>
-                            {errorMessage}
-                        </LabelSmall>
-                    )}
-                    {(label || description || errorMessage) && (
-                        <Strut size={Spacing.small_12} />
-                    )}
+    return (
+        <StyledFieldset data-test-id={testId} style={styles.fieldset} ref={ref}>
+            {/* We have a View here because fieldset cannot be used with flexbox*/}
+            <View style={style}>
+                {label && (
+                    <StyledLegend style={styles.legend}>
+                        <LabelMedium>{label}</LabelMedium>
+                    </StyledLegend>
+                )}
+                {description && (
+                    <LabelSmall style={styles.description}>
+                        {description}
+                    </LabelSmall>
+                )}
+                {errorMessage && (
+                    <LabelSmall style={styles.error}>{errorMessage}</LabelSmall>
+                )}
+                {(label || description || errorMessage) && (
+                    <Strut size={Spacing.small_12} />
+                )}
 
-                    {allChildren.map((child, index) => {
-                        // @ts-expect-error [FEI-5019] - TS2339 - Property 'props' does not exist on type 'ReactChild | ReactFragment | ReactPortal'.
-                        const {style, value} = child.props;
-                        const checked = selectedValues.includes(value);
-                        // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
-                        return React.cloneElement(child, {
-                            checked: checked,
-                            error: !!errorMessage,
-                            groupName: groupName,
-                            id: `${groupName}-${value}`,
-                            key: value,
-                            onChange: () => handleChange(value, checked),
-                            style: [index > 0 && styles.defaultLineGap, style],
-                            variant: "checkbox",
-                        });
-                    })}
-                </View>
-            </StyledFieldset>
-        );
-    },
-);
+                {allChildren.map((child, index) => {
+                    // @ts-expect-error [FEI-5019] - TS2339 - Property 'props' does not exist on type 'ReactChild | ReactFragment | ReactPortal'.
+                    const {style, value} = child.props;
+                    const checked = selectedValues.includes(value);
+                    // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
+                    return React.cloneElement(child, {
+                        checked: checked,
+                        error: !!errorMessage,
+                        groupName: groupName,
+                        id: `${groupName}-${value}`,
+                        key: value,
+                        onChange: () => handleChange(value, checked),
+                        style: [index > 0 && styles.defaultLineGap, style],
+                        variant: "checkbox",
+                    });
+                })}
+            </View>
+        </StyledFieldset>
+    );
+});
 
 export default CheckboxGroup;