@khanacademy/wonder-blocks-form 3.1.11 → 3.1.12

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

@@ -0,0 +1,211 @@
+/**
+ * Flowtype definitions for labeled-text-field
+ * 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: React.ForwardedRef<HTMLInputElement>,
+  ...
+};
+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: React.KeyboardEvent<HTMLInputElement>) => mixed,
+
+  /**
+   * Called when the element has been focused.
+   */
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => mixed,
+
+  /**
+   * Called when the element has been blurred.
+   */
+  onBlur?: (event: React.FocusEvent<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
+  mixins React.Component<PropsWithForwardRef, State>
+{
+  static defaultProps: DefaultProps;
+  constructor(props: PropsWithForwardRef): this;
+  handleValidate: (errorMessage?: string | null | void) => mixed;
+  handleFocus: (event: React.FocusEvent<HTMLInputElement>) => mixed;
+  handleBlur: (event: React.FocusEvent<HTMLInputElement>) => mixed;
+  render(): React.Element<>;
+}
+declare type ExportProps = $Diff<
+  JSX.LibraryManagedAttributes<
+    typeof LabeledTextField,
+    React.ComponentProps<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.ForwardRefExoticComponent<{
+  ...ExportProps,
+  ...React.RefAttributes<HTMLInputElement>,
+}>;
+declare export default typeof _default;

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+import type { ChoiceCoreProps } from "../util/types";
+type Props = ChoiceCoreProps & {
+    hovered: boolean;
+    focused: boolean;
+    pressed: boolean;
+    waiting: boolean;
+};
+/**
+ * The internal stateless 🔘 Radio button
+ */ export default class RadioCore extends React.Component<Props> {
+    handleChange: () => void;
+    render(): React.ReactElement;
+}
+export {};

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

@@ -0,0 +1,26 @@
+/**
+ * Flowtype definitions for radio-core
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+import type { ChoiceCoreProps } from "../util/types";
+declare type Props = {
+  ...ChoiceCoreProps,
+  ...{
+    hovered: boolean,
+    focused: boolean,
+    pressed: boolean,
+    waiting: boolean,
+    ...
+  },
+};
+/**
+ * The internal stateless 🔘 Radio button
+ */
+declare export default class RadioCore mixins React.Component<Props> {
+  handleChange: () => void;
+  render(): React.Element<>;
+}

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

@@ -0,0 +1,85 @@
+import * as React from "react";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+import Choice from "./choice";
+type RadioGroupProps = {
+    /**
+     * Children should be Choice components.
+     */
+    children: Array<React.ReactElement<React.ComponentProps<typeof Choice>> | false | null | undefined>;
+    /**
+     * 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.ReactNode;
+    /**
+     * Optional description for the group.
+     */
+    description?: React.ReactNode;
+    /**
+     * 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) => unknown;
+    /**
+     * 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>
+ * ```
+ */
+export default class RadioGroup extends React.Component<RadioGroupProps> {
+    handleChange(changedValue: string): void;
+    render(): React.ReactElement;
+}
+export {};

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

@@ -0,0 +1,104 @@
+/**
+ * Flowtype definitions for radio-group
+ * 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<React.ComponentProps<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 export default class RadioGroup
+  mixins React.Component<RadioGroupProps>
+{
+  handleChange(changedValue: string): void;
+  render(): React.Element<>;
+}

package/dist/components/radio.d.ts

@@ -0,0 +1,68 @@
+import * as React from "react";
+import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
+type ChoiceComponentProps = AriaProps & {
+    /**
+     * Whether this component is checked
+     */
+    checked: boolean;
+    /**
+     * Whether this component is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether this component should show an error state
+     */
+    error: boolean;
+    /**
+     * Callback when this component is selected. The newCheckedState is the
+     * new checked state of the component.
+     */
+    onChange: (newCheckedState: boolean) => unknown;
+    /**
+     * Optional label for the field.
+     */
+    label?: React.ReactNode;
+    /**
+     * Optional description for the field.
+     */
+    description?: React.ReactNode;
+    /**
+     * 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 styling for the container. Does not style the component.
+     */
+    style?: StyleType;
+    /**
+     * Adds CSS classes to the Checkbox.
+     */
+    className?: string;
+    /**
+     * Optional test ID for e2e testing
+     */
+    testId?: string;
+    /**
+     * 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.ReactElement;
+}
+export {};

package/dist/components/radio.js.flow

@@ -0,0 +1,92 @@
+/**
+ * Flowtype definitions for radio
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
+declare type ChoiceComponentProps = {
+  ...AriaProps,
+  ...{
+    /**
+     * Whether this component is checked
+     */
+    checked: boolean,
+
+    /**
+     * Whether this component is disabled
+     */
+    disabled: boolean,
+
+    /**
+     * Whether this component should show an error state
+     */
+    error: boolean,
+
+    /**
+     * 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,
+
+    /**
+     * Optional styling for the container. Does not style the component.
+     */
+    style?: StyleType,
+
+    /**
+     * Adds CSS classes to the Checkbox.
+     */
+    className?: string,
+
+    /**
+     * Optional test ID for e2e testing
+     */
+    testId?: string,
+
+    /**
+     * Name for the checkbox or radio button group. Only applicable for group
+     * contexts, auto-populated by group components via Choice.
+     * @ignore
+     */
+    groupName?: string,
+    ...
+  },
+};
+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
+  mixins React.Component<ChoiceComponentProps>
+{
+  static defaultProps: DefaultProps;
+  render(): React.Element<>;
+}