@khanacademy/wonder-blocks-form 4.2.2 → 4.3.0

package/dist/components/choice.js.flow

@@ -4,87 +4,10 @@
  * Flowgen v1.21.0
  * @flow
  */
+import * as $Flowgen$Import$_2e__2e__2f__2e__2e__2f__2e__2e__2f_wonder_2d_blocks_2d_core_2f_src_2f_util_2f_aria_2d_types from "../../../wonder-blocks-core/src/util/aria-types";
 import * as React from "react";
-import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
-import Checkbox from "./checkbox";
-import Radio from "./radio";
-declare type Props = {|
-  ...AriaProps,
-  ...{|
-    /**
-     * User-defined. Label for the field.
-     */
-    label: React.Node,
-
-    /**
-     * User-defined. Optional description for the field.
-     */
-    description?: React.Node,
-
-    /**
-     * User-defined. Should be distinct for each item in the group.
-     */
-    value: string,
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
 
-    /**
-     * User-defined. Whether this choice option is disabled. Default false.
-     */
-    disabled: boolean,
-
-    /**
-     * User-defined. Optional id for testing purposes.
-     */
-    testId?: string,
-
-    /**
-     * User-defined. Optional additional styling.
-     */
-    style?: StyleType,
-
-    /**
-     * Auto-populated by parent. Whether this choice is checked.
-     * @ignore
-     */
-    checked: boolean,
-
-    /**
-     * Auto-populated by parent. Whether this choice is in error mode (everything
-     * in a choice group would be in error mode at the same time).
-     * @ignore
-     */
-    error?: boolean,
-
-    /**
-     * Auto-populated by parent. Used for accessibility purposes, where the label
-     * id should match the input id.
-     * @ignore
-     */
-    id?: string,
-
-    /**
-     * Auto-populated by parent's groupName prop.
-     * @ignore
-     */
-    groupName?: string,
-
-    /**
-     * Auto-populated by parent. Returns the new checked state of the component.
-     * @ignore
-     */
-    onChange: (newCheckedState: boolean) => mixed,
-
-    /**
-     * Auto-populated by parent.
-     * @ignore
-     */
-    variant?: "radio" | "checkbox",
-  |},
-|};
-declare type DefaultProps = {|
-  checked: $PropertyType<Props, "checked">,
-  disabled: $PropertyType<Props, "disabled">,
-  onChange: $PropertyType<Props, "onChange">,
-|};
 /**
  * This is a labeled 🔘 or ☑️ item. Choice is meant to be used as children of
  * CheckboxGroup and RadioGroup because many of its props are auto-populated
@@ -151,8 +74,80 @@ declare type DefaultProps = {|
  * </RadioGroup>
  * ```
  */
-declare export default class Choice extends React.Component<Props> {
-  static defaultProps: DefaultProps;
-  getChoiceComponent(variant?: string | null): typeof Radio | typeof Checkbox;
-  render(): React.Node;
-}
+declare var Choice: React.ForwardRefExoticComponent<{|
+  ...$ReadOnly<$Flowgen$Import$_2e__2e__2f__2e__2e__2f__2e__2e__2f_wonder_2d_blocks_2d_core_2f_src_2f_util_2f_aria_2d_types.AriaAttributes>,
+  ...$ReadOnly<{|
+    role?: $Flowgen$Import$_2e__2e__2f__2e__2e__2f__2e__2e__2f_wonder_2d_blocks_2d_core_2f_src_2f_util_2f_aria_2d_types.AriaRole | void,
+  |}>,
+  ...{|
+    /**
+     * User-defined. Label for the field.
+     */
+    label: React.Node,
+
+    /**
+     * User-defined. Optional description for the field.
+     */
+    description?: React.Node,
+
+    /**
+     * User-defined. Should be distinct for each item in the group.
+     */
+    value: string,
+
+    /**
+     * User-defined. Whether this choice option is disabled. Default false.
+     */
+    disabled?: boolean | void,
+
+    /**
+     * User-defined. Optional id for testing purposes.
+     */
+    testId?: string | void,
+
+    /**
+     * User-defined. Optional additional styling.
+     */
+    style?: StyleType,
+
+    /**
+     * Auto-populated by parent. Whether this choice is checked.
+     * @ignore
+     */
+    checked?: boolean | void,
+
+    /**
+     * Auto-populated by parent. Whether this choice is in error mode (everything
+     * in a choice group would be in error mode at the same time).
+     * @ignore
+     */
+    error?: boolean | void,
+
+    /**
+     * Auto-populated by parent. Used for accessibility purposes, where the label
+     * id should match the input id.
+     * @ignore
+     */
+    id?: string | void,
+
+    /**
+     * Auto-populated by parent's groupName prop.
+     * @ignore
+     */
+    groupName?: string | void,
+
+    /**
+     * Auto-populated by parent. Returns the new checked state of the component.
+     * @ignore
+     */
+    onChange?: ((newCheckedState: boolean) => mixed) | void,
+
+    /**
+     * Auto-populated by parent.
+     * @ignore
+     */
+    variant?: "checkbox" | "radio" | void,
+  |},
+  ...React.RefAttributes<HTMLInputElement>,
+|}>;
+declare export default typeof Choice;

package/dist/components/radio-core.d.ts

@@ -1,8 +1,16 @@
 import * as React from "react";
-import type { ChoiceCoreProps } from "../util/types";
+import type { Checked } from "../util/types";
 /**
  * The internal stateless 🔘 Radio button
- */ export default class RadioCore extends React.Component<ChoiceCoreProps> {
-    handleChange: () => void;
-    render(): React.ReactNode;
-}
+ */ declare const RadioCore: React.ForwardRefExoticComponent<Readonly<import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes> & Readonly<{
+    role?: import("../../../wonder-blocks-core/src/util/aria-types").AriaRole | undefined;
+}> & {
+    checked: Checked;
+    disabled: boolean;
+    error: boolean;
+    groupName?: string | undefined;
+    id?: string | undefined;
+    testId?: string | undefined;
+    onClick: () => void;
+} & React.RefAttributes<HTMLInputElement>>;
+export default RadioCore;

package/dist/components/radio-core.js.flow

@@ -4,15 +4,27 @@
  * Flowgen v1.21.0
  * @flow
  */
+import * as $Flowgen$Import$_2e__2e__2f__2e__2e__2f__2e__2e__2f_wonder_2d_blocks_2d_core_2f_src_2f_util_2f_aria_2d_types from "../../../wonder-blocks-core/src/util/aria-types";
 import * as React from "react";
-import type { ChoiceCoreProps } from "../util/types";
+import type { Checked } from "../util/types";
 
 /**
  * The internal stateless 🔘 Radio button
  */
-declare export default class RadioCore
-  extends React.Component<ChoiceCoreProps>
-{
-  handleChange: () => void;
-  render(): React.Node;
-}
+declare var RadioCore: React.ForwardRefExoticComponent<{|
+  ...$ReadOnly<$Flowgen$Import$_2e__2e__2f__2e__2e__2f__2e__2e__2f_wonder_2d_blocks_2d_core_2f_src_2f_util_2f_aria_2d_types.AriaAttributes>,
+  ...$ReadOnly<{|
+    role?: $Flowgen$Import$_2e__2e__2f__2e__2e__2f__2e__2e__2f_wonder_2d_blocks_2d_core_2f_src_2f_util_2f_aria_2d_types.AriaRole | void,
+  |}>,
+  ...{|
+    checked: Checked,
+    disabled: boolean,
+    error: boolean,
+    groupName?: string | void,
+    id?: string | void,
+    testId?: string | void,
+    onClick: () => void,
+  |},
+  ...React.RefAttributes<HTMLInputElement>,
+|}>;
+declare export default typeof RadioCore;

package/dist/components/radio-group.d.ts

@@ -78,8 +78,5 @@ type RadioGroupProps = {
  * </RadioGroup>
  * ```
  */
-export default class RadioGroup extends React.Component<RadioGroupProps> {
-    handleChange(changedValue: string): void;
-    render(): React.ReactNode;
-}
-export {};
+declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLFieldSetElement>>;
+export default RadioGroup;

package/dist/components/radio-group.js.flow

@@ -94,9 +94,8 @@ declare type RadioGroupProps = {|
  * </RadioGroup>
  * ```
  */
-declare export default class RadioGroup
-  extends React.Component<RadioGroupProps>
-{
-  handleChange(changedValue: string): void;
-  render(): React.Node;
-}
+declare var RadioGroup: React.AbstractComponent<
+  RadioGroupProps,
+  HTMLFieldSetElement
+>;
+declare export default typeof RadioGroup;

package/dist/components/radio.d.ts

@@ -1,6 +1,14 @@
 import * as React from "react";
-import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
-type ChoiceComponentProps = AriaProps & {
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+/**
+ * 🔘 A nicely styled radio button for all your non-AMFM radio button needs. Can
+ * optionally take label and description props.
+ *
+ * This component should not really be used by itself because radio buttons are
+ * often grouped together. See RadioGroup.
+ */ declare const Radio: React.ForwardRefExoticComponent<Readonly<import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes> & Readonly<{
+    role?: import("../../../wonder-blocks-core/src/util/aria-types").AriaRole | undefined;
+}> & {
     /**
      * Whether this component is checked
      */
@@ -8,11 +16,11 @@ type ChoiceComponentProps = AriaProps & {
     /**
      * Whether this component is disabled
      */
-    disabled: boolean;
+    disabled?: boolean | undefined;
     /**
      * Whether this component should show an error state
      */
-    error: boolean;
+    error?: boolean | undefined;
     /**
      * Callback when this component is selected. The newCheckedState is the
      * new checked state of the component.
@@ -31,7 +39,7 @@ type ChoiceComponentProps = AriaProps & {
      * guarantee that the ID is unique within everything rendered on a page.
      * Used to match `<label>` with `<input>` elements for screenreaders.
      */
-    id?: string;
+    id?: string | undefined;
     /**
      * Optional styling for the container. Does not style the component.
      */
@@ -39,30 +47,16 @@ type ChoiceComponentProps = AriaProps & {
     /**
      * Adds CSS classes to the Checkbox.
      */
-    className?: string;
+    className?: string | undefined;
     /**
      * Optional test ID for e2e testing
      */
-    testId?: string;
+    testId?: string | undefined;
     /**
      * Name for the checkbox or radio button group. Only applicable for group
      * contexts, auto-populated by group components via Choice.
      * @ignore
      */
-    groupName?: string;
-};
-type DefaultProps = {
-    disabled: ChoiceComponentProps["disabled"];
-    error: ChoiceComponentProps["error"];
-};
-/**
- * 🔘 A nicely styled radio button for all your non-AMFM radio button needs. Can
- * optionally take label and description props.
- *
- * This component should not really be used by itself because radio buttons are
- * often grouped together. See RadioGroup.
- */ export default class Radio extends React.Component<ChoiceComponentProps> {
-    static defaultProps: DefaultProps;
-    render(): React.ReactNode;
-}
-export {};
+    groupName?: string | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export default Radio;

package/dist/components/radio.js.flow

@@ -4,10 +4,22 @@
  * Flowgen v1.21.0
  * @flow
  */
+import * as $Flowgen$Import$_2e__2e__2f__2e__2e__2f__2e__2e__2f_wonder_2d_blocks_2d_core_2f_src_2f_util_2f_aria_2d_types from "../../../wonder-blocks-core/src/util/aria-types";
 import * as React from "react";
-import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
-declare type ChoiceComponentProps = {|
-  ...AriaProps,
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+
+/**
+ * 🔘 A nicely styled radio button for all your non-AMFM radio button needs. Can
+ * optionally take label and description props.
+ *
+ * This component should not really be used by itself because radio buttons are
+ * often grouped together. See RadioGroup.
+ */
+declare var Radio: React.ForwardRefExoticComponent<{|
+  ...$ReadOnly<$Flowgen$Import$_2e__2e__2f__2e__2e__2f__2e__2e__2f_wonder_2d_blocks_2d_core_2f_src_2f_util_2f_aria_2d_types.AriaAttributes>,
+  ...$ReadOnly<{|
+    role?: $Flowgen$Import$_2e__2e__2f__2e__2e__2f__2e__2e__2f_wonder_2d_blocks_2d_core_2f_src_2f_util_2f_aria_2d_types.AriaRole | void,
+  |}>,
   ...{|
     /**
      * Whether this component is checked
@@ -17,12 +29,12 @@ declare type ChoiceComponentProps = {|
     /**
      * Whether this component is disabled
      */
-    disabled: boolean,
+    disabled?: boolean | void,
 
     /**
      * Whether this component should show an error state
      */
-    error: boolean,
+    error?: boolean | void,
 
     /**
      * Callback when this component is selected. The newCheckedState is the
@@ -45,7 +57,7 @@ declare type ChoiceComponentProps = {|
      * guarantee that the ID is unique within everything rendered on a page.
      * Used to match `<label>` with `<input>` elements for screenreaders.
      */
-    id?: string,
+    id?: string | void,
 
     /**
      * Optional styling for the container. Does not style the component.
@@ -55,35 +67,20 @@ declare type ChoiceComponentProps = {|
     /**
      * Adds CSS classes to the Checkbox.
      */
-    className?: string,
+    className?: string | void,
 
     /**
      * Optional test ID for e2e testing
      */
-    testId?: string,
+    testId?: string | void,
 
     /**
      * Name for the checkbox or radio button group. Only applicable for group
      * contexts, auto-populated by group components via Choice.
      * @ignore
      */
-    groupName?: string,
+    groupName?: string | void,
   |},
-|};
-declare type DefaultProps = {|
-  disabled: $PropertyType<ChoiceComponentProps, "disabled">,
-  error: $PropertyType<ChoiceComponentProps, "error">,
-|};
-/**
- * 🔘 A nicely styled radio button for all your non-AMFM radio button needs. Can
- * optionally take label and description props.
- *
- * This component should not really be used by itself because radio buttons are
- * often grouped together. See RadioGroup.
- */
-declare export default class Radio
-  extends React.Component<ChoiceComponentProps>
-{
-  static defaultProps: DefaultProps;
-  render(): React.Node;
-}
+  ...React.RefAttributes<HTMLInputElement>,
+|}>;
+declare export default typeof Radio;