@khanacademy/wonder-blocks-form 4.3.1 → 4.3.3

package/dist/components/checkbox.js.flow

@@ -1,101 +0,0 @@
-/**
- * Flowtype definitions for data
- * Generated by Flowgen from a Typescript Definition
- * 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 { StyleType } from "@khanacademy/wonder-blocks-core";
-import type { Checked } from "../util/types";
-
-/**
- * ☑️ A nicely styled checkbox for all your checking needs. Can optionally take
- * label and description props.
- *
- * If used by itself, a checkbox provides two options - checked and unchecked.
- * A group of checkboxes can be used to allow a user to select multiple values
- * from a list of options.
- *
- * If you want a whole group of Checkbox[es] that are related, see the Choice
- * and CheckboxGroup components.
- *
- * ### Usage
- *
- * ```jsx
- * import {Checkbox} from "@khanacademy/wonder-blocks-form";
- *
- * const [checked, setChecked] = React.useState(false);
- *
- * <Checkbox checked={checked} onChange={setChecked} />
- * ```
- */
-declare var Checkbox: 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 or indeterminate
-     */
-    checked: Checked,
-
-    /**
-     * Whether this component is disabled
-     */
-    disabled?: boolean | void,
-
-    /**
-     * Whether this component should show an error state
-     */
-    error?: boolean | void,
-
-    /**
-     * Callback when this component is selected. The newCheckedState is the
-     * new checked state of the component.
-     */
-    onChange: (newCheckedState: boolean) => mixed,
-
-    /**
-     * Optional label for the field.
-     */
-    label?: React.Node,
-
-    /**
-     * Optional description for the field.
-     */
-    description?: React.Node,
-
-    /**
-     * Unique identifier attached to the HTML input element. If used, need to
-     * guarantee that the ID is unique within everything rendered on a page.
-     * Used to match `<label>` with `<input>` elements for screenreaders.
-     */
-    id?: string | void,
-
-    /**
-     * Optional styling for the container. Does not style the component.
-     */
-    style?: StyleType,
-
-    /**
-     * Adds CSS classes to the Checkbox.
-     */
-    className?: string | void,
-
-    /**
-     * Optional test ID for e2e testing
-     */
-    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 | void,
-  |},
-  ...React.RefAttributes<HTMLInputElement>,
-|}>;
-declare export default typeof Checkbox;

package/dist/components/choice-internal.js.flow

@@ -1,88 +0,0 @@
-/**
- * Flowtype definitions for data
- * Generated by Flowgen from a Typescript Definition
- * 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 { StyleType } from "@khanacademy/wonder-blocks-core";
-
-/**
- * This is a potentially labeled 🔘 or ☑️ item. This is an internal component
- * that's wrapped by Checkbox and Radio. Choice is a wrapper for Checkbox and
- * Radio with many of its props auto-populated, to be used with CheckboxGroup
- * and RadioGroup. This design allows for more explicit prop typing. For
- * example, we can make onChange a required prop on Checkbox but not on Choice
- * (because for Choice, that prop would be auto-populated by CheckboxGroup).
- */
-declare var ChoiceInternal: 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 choice is checked.
-     */
-    checked: boolean | null | void,
-
-    /**
-     * Whether this choice option is disabled.
-     */
-    disabled?: boolean | void,
-
-    /**
-     * Whether this choice is in error mode.
-     */
-    error?: boolean | void,
-
-    /**
-     * Returns the new checked state of the component.
-     */
-    onChange: (newCheckedState: boolean) => mixed,
-
-    /**
-     * Used for accessibility purposes, where the label id should match the
-     * input id.
-     */
-    id?: string | void,
-
-    /**
-     * Optional additional styling.
-     */
-    style?: StyleType,
-
-    /**
-     * Adds CSS classes to the Button.
-     */
-    className?: string | void,
-
-    /**
-     * Optional id for testing purposes.
-     */
-    testId?: string | void,
-
-    /**
-     * Label for the field.
-     */
-    label?: React.Node,
-
-    /**
-     * Optional description for the field.
-     */
-    description?: React.Node,
-
-    /**
-     * Auto-populated by parent's groupName prop if in a group.
-     */
-    groupName?: string | void,
-
-    /**
-     * Takes either "radio" or "checkbox" value.
-     */
-    variant: "radio" | "checkbox",
-  |},
-  ...React.RefAttributes<HTMLInputElement>,
-|}>;
-declare export default typeof ChoiceInternal;

package/dist/components/choice.js.flow

@@ -1,153 +0,0 @@
-/**
- * Flowtype definitions for data
- * Generated by Flowgen from a Typescript Definition
- * 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 { StyleType } from "@khanacademy/wonder-blocks-core";
-
-/**
- * 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
- * and not shown in the documentation here. See those components for usage
- * examples.
- *
- * If you wish to use just a single field, use Checkbox or Radio with the
- * optional label and description props.
- *
- * ### Checkbox Usage
- *
- * ```jsx
- * import {Choice, CheckboxGroup} from "@khanacademy/wonder-blocks-form";
- *
- * const [selectedValues, setSelectedValues] = React.useState([]);
- *
- * // Checkbox usage
- * <CheckboxGroup
- *     label="some-label"
- *     description="some-description"
- *     groupName="some-group-name"
- *     onChange={setSelectedValues}
- *     selectedValues={selectedValues}
- * />
- *     // Add as many choices as necessary
- *     <Choice
- *        label="Choice 1"
- *        value="some-choice-value"
- *        description="Some choice description."
- *     />
- *     <Choice
- *        label="Choice 2"
- *        value="some-choice-value-2"
- *        description="Some choice description."
- *     />
- * </CheckboxGroup>
- * ```
- *
- * ### Radio Usage
- *
- * ```jsx
- * import {Choice, RadioGroup} from "@khanacademy/wonder-blocks-form";
- *
- * const [selectedValue, setSelectedValue] = React.useState("");
- *
- * <RadioGroup
- *     label="some-label"
- *     description="some-description"
- *     groupName="some-group-name"
- *     onChange={setSelectedValue}>
- *     selectedValues={selectedValue}
- * />
- *     // Add as many choices as necessary
- *     <Choice
- *        label="Choice 1"
- *        value="some-choice-value"
- *        description="Some choice description."
- *     />
- *     <Choice
- *        label="Choice 2"
- *        value="some-choice-value-2"
- *        description="Some choice description."
- *     />
- * </RadioGroup>
- * ```
- */
-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/field-heading.js.flow

@@ -1,62 +0,0 @@
-/**
- * Flowtype definitions for data
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import * as React from "react";
-import { StyleType } from "@khanacademy/wonder-blocks-core";
-declare type Props = {|
-  /**
-   * The form field component.
-   */
-  field: React.Node,
-
-  /**
-   * The title for the label element.
-   */
-  label: React.Node,
-
-  /**
-   * The text for the description element.
-   */
-  description?: React.Node,
-
-  /**
-   * Whether this field is required to continue.
-   */
-  required?: boolean,
-
-  /**
-   * The message for the error element.
-   */
-  error?: React.Node,
-
-  /**
-   * Custom styles for the field heading container.
-   */
-  style?: StyleType,
-
-  /**
-   * A unique id to link the label (and optional error) to the field.
-   *
-   * The label will assume that the field will have its id formatted as `${id}-field`.
-   * The field can assume that the error will have its id formatted as `${id}-error`.
-   */
-  id?: string,
-
-  /**
-   * Optional test ID for e2e testing.
-   */
-  testId?: string,
-|};
-/**
- * A FieldHeading is an element that provides a label, description, and error element
- * to present better context and hints to any type of form field component.
- */
-declare export default class FieldHeading extends React.Component<Props> {
-  renderLabel(): React.Node;
-  maybeRenderDescription(): React.Node | null | void;
-  maybeRenderError(): React.Node | null | void;
-  render(): React.Node;
-}

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

@@ -1,9 +0,0 @@
-/**
- * Flowtype definitions for data
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import type { StyleDeclaration } from "aphrodite";
-declare var styles: StyleDeclaration;
-declare export default typeof styles;

package/dist/components/labeled-text-field.js.flow

@@ -1,202 +0,0 @@
-/**
- * Flowtype definitions for data
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import * as React from "react";
-import { StyleType } from "@khanacademy/wonder-blocks-core";
-import { TextFieldType } from "./text-field";
-declare type WithForwardRef = {|
-  forwardedRef: {|
-    current: HTMLInputElement | null,
-  |},
-|};
-declare type Props = {|
-  /**
-   * 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.
-   */
-  label: React.Node,
-
-  /**
-   * Provide a description for the TextField.
-   */
-  description?: React.Node,
-
-  /**
-   * The input value.
-   */
-  value: string,
-
-  /**
-   * Makes a read-only input field that cannot be focused. Defaults to false.
-   */
-  disabled: boolean,
-
-  /**
-   * Whether this field is required to to continue, or the error message to
-   * render if this field is left blank.
-   *
-   * This can be a boolean or a string.
-   *
-   * 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.
-   * Note: The string will not be used if a `validate` prop is passed in.
-   *
-   * Example message: i18n._("A password is required to log in.")
-   *
-   * Boolean:
-   * 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.
-   */
-  required?: boolean | string,
-
-  /**
-   * Identifies the element or elements that describes this text field.
-   */
-  ariaDescribedby?: string | void,
-
-  /**
-   * Provide a validation for the input value.
-   * Return a string error message or null | void for a valid input.
-   */
-  validate?: (value: string) => string | null | void,
-
-  /**
-   * Called when the TextField input is validated.
-   */
-  onValidate?: (errorMessage?: string | null | void) => mixed,
-
-  /**
-   * Called when the value has changed.
-   */
-  onChange: (newValue: string) => mixed,
-
-  /**
-   * Called when a key is pressed.
-   */
-  onKeyDown?: (event: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
-
-  /**
-   * Called when the element has been focused.
-   */
-  onFocus?: (event: SyntheticFocusEvent<HTMLInputElement>) => mixed,
-
-  /**
-   * Called when the element has been blurred.
-   */
-  onBlur?: (event: SyntheticFocusEvent<HTMLInputElement>) => mixed,
-
-  /**
-   * Provide hints or examples of what to enter.
-   */
-  placeholder?: string,
-
-  /**
-   * Change the field’s sub-components to fit a dark background.
-   */
-  light: boolean,
-
-  /**
-   * Custom styles for the container.
-   *
-   * Note: This style is passed to the field heading container
-   * due to scenarios where we would like to set a specific
-   * width for the text field. If we apply the style directly
-   * to the text field, the container would not be affected.
-   * For example, setting text field to "width: 50%" would not
-   * affect the container since text field is a child of the container.
-   * In this case, the container would maintain its width ocuppying
-   * unnecessary space when the text field is smaller.
-   */
-  style?: StyleType,
-
-  /**
-   * Optional test ID for e2e testing.
-   */
-  testId?: string,
-
-  /**
-   * Specifies if the TextField is read-only.
-   */
-  readOnly?: boolean,
-
-  /**
-   * Specifies if the TextField allows autocomplete.
-   */
-  autoComplete?: string,
-|};
-declare type PropsWithForwardRef = {| ...Props, ...WithForwardRef |};
-declare type DefaultProps = {|
-  type: $PropertyType<PropsWithForwardRef, "type">,
-  disabled: $PropertyType<PropsWithForwardRef, "disabled">,
-  light: $PropertyType<PropsWithForwardRef, "light">,
-|};
-declare type State = {|
-  /**
-   * Displayed when the validation fails.
-   */
-  error: string | null | void,
-
-  /**
-   * The user focuses on the textfield.
-   */
-  focused: boolean,
-|};
-/**
- * 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.
- */
-declare class LabeledTextField
-  extends React.Component<PropsWithForwardRef, State>
-{
-  static defaultProps: DefaultProps;
-  constructor(props: PropsWithForwardRef): this;
-  handleValidate: (errorMessage?: string | null | void) => mixed;
-  handleFocus: (event: SyntheticFocusEvent<HTMLInputElement>) => mixed;
-  handleBlur: (event: SyntheticFocusEvent<HTMLInputElement>) => mixed;
-  render(): React.Node;
-}
-declare type ExportProps = $Diff<
-  React.ElementConfig<typeof LabeledTextField>,
-  { forwardedRef: any }
->;
-/**
- * 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.
- *
- * ### Usage
- *
- * ```jsx
- * import {LabeledTextField} from "@khanacademy/wonder-blocks-form";
- *
- * const [value, setValue] = React.useState("");
- *
- * <LabeledTextField
- *     label="Label"
- *     description="Hello, this is the description for this field"
- *     placeholder="Placeholder"
- *     value={value}
- *     onChange={setValue}
- * />
- * ```
- */
-declare var _default: React.AbstractComponent<ExportProps, HTMLInputElement>;
-declare export default typeof _default;

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

@@ -1,30 +0,0 @@
-/**
- * Flowtype definitions for data
- * Generated by Flowgen from a Typescript Definition
- * 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 { Checked } from "../util/types";
-
-/**
- * The internal stateless 🔘 Radio button
- */
-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;