@khanacademy/wonder-blocks-form 4.3.1 → 4.3.3

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

@@ -1,101 +0,0 @@
-/**
- * Flowtype definitions for data
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import * as React from "react";
-import type { StyleType } from "@khanacademy/wonder-blocks-core";
-import Choice from "./choice";
-declare type RadioGroupProps = {|
-  /**
-   * Children should be Choice components.
-   */
-  children: Array<
-    React.Element<typeof Choice> | false | null | void
-  >,
-
-  /**
-   * Group name for this checkbox or radio group. Should be unique for all
-   * such groups displayed on a page.
-   */
-  groupName: string,
-
-  /**
-   * Optional label for the group. This label is optional to allow for
-   * greater flexibility in implementing checkbox and radio groups.
-   */
-  label?: React.Node,
-
-  /**
-   * Optional description for the group.
-   */
-  description?: React.Node,
-
-  /**
-   * Optional error message. If supplied, the group will be displayed in an
-   * error state, along with this error message. If no error state is desired,
-   * simply do not supply this prop, or pass along null.
-   */
-  errorMessage?: string,
-
-  /**
-   * Custom styling for this group of checkboxes.
-   */
-  style?: StyleType,
-
-  /**
-   * Callback for when the selected value of the radio group has changed.
-   */
-  onChange: (selectedValue: string) => mixed,
-
-  /**
-   * Value of the selected radio item.
-   */
-  selectedValue: string,
-
-  /**
-   * Test ID used for e2e testing.
-   */
-  testId?: string,
-|};
-/**
- * A radio group allows only single selection. Like CheckboxGroup, this
- * component auto-populates many props for its children Choice components. The
- * Choice component is exposed for the user to apply custom styles or to
- * indicate which choices are disabled. The use of the groupName prop is
- * important to maintain expected keyboard navigation behavior for
- * accessibility.
- *
- * ### 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}
- *     selectedValue={selectedValue}
- * >
- *     // Add as many choices as necessary
- *     <Choice
- *        label="Choice 1"
- *        value="some-choice-value"
- *     />
- *     <Choice
- *        label="Choice 2"
- *        value="some-choice-value-2"
- *        description="Some choice description."
- *     />
- * </RadioGroup>
- * ```
- */
-declare var RadioGroup: React.AbstractComponent<
-  RadioGroupProps,
-  HTMLFieldSetElement
->;
-declare export default typeof RadioGroup;

package/dist/components/radio.js.flow

@@ -1,86 +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";
-
-/**
- * 🔘 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
-     */
-    checked: boolean,
-
-    /**
-     * 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 Radio;

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

@@ -1,182 +0,0 @@
-/**
- * Flowtype definitions for data
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import * as React from "react";
-import type { StyleType, AriaProps } from "@khanacademy/wonder-blocks-core";
-export type TextFieldType = "text" | "password" | "email" | "number" | "tel";
-declare type WithForwardRef = {|
-  forwardedRef: {|
-    current: HTMLInputElement | null,
-  |},
-|};
-declare type Props = {|
-  ...AriaProps,
-  ...{|
-    /**
-     * The unique identifier for the input.
-     */
-    id: string,
-
-    /**
-     * Determines the type of input. Defaults to text.
-     */
-    type: TextFieldType,
-
-    /**
-     * The input value.
-     */
-    value: string,
-
-    /**
-     * Makes a read-only input field that cannot be focused. Defaults to false.
-     */
-    disabled: boolean,
-
-    /**
-     * 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 right after 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,
-
-    /**
-     * 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,
-
-    /**
-     * Change the default focus ring color to fit a dark background.
-     */
-    light: boolean,
-
-    /**
-     * Custom styles for the input.
-     */
-    style?: StyleType,
-
-    /**
-     * Optional test ID for e2e testing.
-     */
-    testId?: string,
-
-    /**
-     * Specifies if the input field is read-only.
-     */
-    readOnly?: boolean,
-
-    /**
-     * Whether this field should autofocus on page load.
-     */
-    autoFocus?: boolean,
-
-    /**
-     * Specifies if the input field 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 this field.
-   */
-  focused: boolean,
-|};
-/**
- * A TextField is an element used to accept a single line of text from the user.
- */
-declare class TextField extends React.Component<PropsWithForwardRef, State> {
-  static defaultProps: DefaultProps;
-  constructor(props: PropsWithForwardRef): this;
-  state: State;
-  componentDidMount(): void;
-  maybeValidate: (newValue: string) => void;
-  handleChange: (event: SyntheticInputEvent<HTMLInputElement>) => mixed;
-  handleFocus: (event: SyntheticFocusEvent<HTMLInputElement>) => mixed;
-  handleBlur: (event: SyntheticFocusEvent<HTMLInputElement>) => mixed;
-  render(): React.Node;
-}
-declare type ExportProps = $Diff<
-  React.ElementConfig<typeof TextField>,
-  { forwardedRef: any }
->;
-/**
- * A TextField is an element used to accept a single line of text from the user.
- *
- * ### Usage
- *
- * ```jsx
- * import {TextField} from "@khanacademy/wonder-blocks-form";
- *
- * const [value, setValue] = React.useState("");
- *
- * <TextField
- *     id="some-unique-text-field-id"
- *     value={value}
- *     onChange={setValue}
- * />
- * ```
- */
-declare var _default: React.AbstractComponent<ExportProps, HTMLInputElement>;
-declare export default typeof _default;

package/dist/index.js.flow

@@ -1,20 +0,0 @@
-/**
- * Flowtype definitions for data
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import Checkbox from "./components/checkbox";
-import Choice from "./components/choice";
-import CheckboxGroup from "./components/checkbox-group";
-import RadioGroup from "./components/radio-group";
-import TextField from "./components/text-field";
-import LabeledTextField from "./components/labeled-text-field";
-declare export {
-  Checkbox,
-  Choice,
-  CheckboxGroup,
-  RadioGroup,
-  TextField,
-  LabeledTextField,
-};

package/dist/util/types.js.flow

@@ -1,138 +0,0 @@
-/**
- * Flowtype definitions for data
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
-import Choice from "../components/choice";
-export type Checked = boolean | null | void;
-export type ChoiceCoreProps = {|
-  ...AriaProps,
-  ...{|
-    /**
-     * Whether this component is checked
-     */
-    checked: Checked,
-
-    /**
-     * Whether this component is disabled
-     */
-    disabled: boolean,
-
-    /**
-     * Whether this component should show an error state
-     */
-    error: boolean,
-
-    /**
-     * Name for the checkbox or radio button group
-     */
-    groupName?: string,
-
-    /**
-     * 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,
-
-    /**
-     * Optional test ID for e2e testing
-     */
-    testId?: string,
-
-    /**
-     * Function that executes when the choice is clicked.
-     */
-    onClick: () => void,
-  |},
-|};
-export type ChoiceComponentProps = {|
-  ...ChoiceCoreProps,
-  ...{|
-    /**
-     * 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?: string,
-
-    /**
-     * Optional description for the field.
-     */
-    description?: string,
-
-    /**
-     * Ignored because only applicable to Choice components in a group.
-     */
-    value?: string,
-
-    /**
-     * Optional styling for the container. Does not style the component.
-     */
-    style?: StyleType,
-  |},
-|};
-export type SharedGroupProps = {|
-  /**
-   * Children should be Choice components.
-   */
-  children: typeof Choice,
-
-  /**
-   * Group name for this checkbox or radio group. Should be unique for all
-   * such groups displayed on a page.
-   */
-  groupName: string,
-
-  /**
-   * Optional label for the group. This label is optional to allow for
-   * greater flexibility in implementing checkbox and radio groups.
-   */
-  label?: string,
-
-  /**
-   * Optional description for the group.
-   */
-  description?: string,
-
-  /**
-   * Optional error message. If supplied, the group will be displayed in an
-   * error state, along with this error message. If no error state is desired,
-   * simply do not supply this prop, or pass along null.
-   */
-  errorMessage?: string,
-
-  /**
-   * Custom styling for this group of checkboxes.
-   */
-  style?: StyleType,
-|};
-export type CheckboxGroupProps = {|
-  /**
-   * Callback for when selection of the group has changed. Passes the newly
-   * selected values.
-   */
-  onChange: (selectedValues: Array<string>) => mixed,
-
-  /**
-   * An array of the values of the selected values in this checkbox group.
-   */
-  selectedValues: Array<string>,
-|};
-export type RadioGroupProps = {|
-  /**
-   * Callback for when the selected value of the radio group has changed.
-   */
-  onChange: (selectedValue: string) => mixed,
-
-  /**
-   * Value of the selected radio item.
-   */
-  selectedValue: string,
-|};