@khanacademy/wonder-blocks-form 4.3.1 → 4.3.3

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @khanacademy/wonder-blocks-form
 
+## 4.3.3
+
+### Patch Changes
+
+-   Updated dependencies [8c77f29d]
+-   Updated dependencies [674a1e5c]
+-   Updated dependencies [674a1e5c]
+-   Updated dependencies [674a1e5c]
+    -   @khanacademy/wonder-blocks-clickable@4.0.0
+    -   @khanacademy/wonder-blocks-core@6.0.0
+    -   @khanacademy/wonder-blocks-icon@2.1.1
+    -   @khanacademy/wonder-blocks-layout@2.0.17
+    -   @khanacademy/wonder-blocks-typography@2.1.3
+
+## 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

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:
@@ -71,7 +71,7 @@ const CheckboxCore = React.forwardRef(function CheckboxCore(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,
@@ -232,7 +232,7 @@ const RadioCore = React.forwardRef(function RadioCore(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 _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(function ChoiceInternal(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,

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:
@@ -100,7 +100,7 @@ const CheckboxCore = React__namespace.forwardRef(function CheckboxCore(props, re
       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,
@@ -261,7 +261,7 @@ const RadioCore = React__namespace.forwardRef(function RadioCore(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 _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(function ChoiceInternal(props
     }, 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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "4.3.1",
+  "version": "4.3.3",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,19 +16,19 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^3.1.2",
+    "@khanacademy/wonder-blocks-clickable": "^4.0.0",
     "@khanacademy/wonder-blocks-color": "^2.0.1",
-    "@khanacademy/wonder-blocks-core": "^5.3.1",
-    "@khanacademy/wonder-blocks-icon": "^2.0.15",
-    "@khanacademy/wonder-blocks-layout": "^2.0.15",
+    "@khanacademy/wonder-blocks-core": "^6.0.0",
+    "@khanacademy/wonder-blocks-icon": "^2.1.1",
+    "@khanacademy/wonder-blocks-layout": "^2.0.17",
     "@khanacademy/wonder-blocks-spacing": "^4.0.1",
-    "@khanacademy/wonder-blocks-typography": "^2.1.1"
+    "@khanacademy/wonder-blocks-typography": "^2.1.3"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
     "react": "16.14.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.9.7"
+    "@khanacademy/wb-dev-build-settings": "^1.0.0"
   }
-}
+}

package/src/components/choice-internal.tsx

@@ -66,13 +66,11 @@ type Props = AriaProps & {
         error = false,
         id,
         label,
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         onChange,
         style,
         className,
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         variant,
-        // ...coreProps
+        ...coreProps
     } = props;
 
     const handleClick: () => void = () => {
@@ -140,8 +138,9 @@ type Props = AriaProps & {
                             tabIndex={-1}
                         >
                             <ChoiceCore
-                                {...props}
+                                {...coreProps}
                                 id={uniqueId}
+                                checked={checked}
                                 aria-describedby={descriptionId}
                                 onClick={handleClick}
                                 disabled={disabled}