@khanacademy/wonder-blocks-form 3.1.11 → 3.1.13

package/dist/components/text-field.d.ts

@@ -0,0 +1,146 @@
+import * as React from "react";
+import type { StyleType, AriaProps } from "@khanacademy/wonder-blocks-core";
+export type TextFieldType = "text" | "password" | "email" | "number" | "tel";
+type WithForwardRef = {
+    forwardedRef: React.ForwardedRef<HTMLInputElement>;
+};
+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 | undefined;
+    /**
+     * Called right after the TextField input is validated.
+     */
+    onValidate?: (errorMessage?: string | null | undefined) => unknown;
+    /**
+     * Called when the value has changed.
+     */
+    onChange: (newValue: string) => unknown;
+    /**
+     * Called when a key is pressed.
+     */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => unknown;
+    /**
+     * Called when the element has been focused.
+     */
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => unknown;
+    /**
+     * Called when the element has been blurred.
+     */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => unknown;
+    /**
+     * 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;
+    /**
+     * Specifies if the input field allows autocomplete.
+     */
+    autoComplete?: string;
+};
+type PropsWithForwardRef = Props & WithForwardRef;
+type DefaultProps = {
+    type: PropsWithForwardRef["type"];
+    disabled: PropsWithForwardRef["disabled"];
+    light: PropsWithForwardRef["light"];
+};
+type State = {
+    /**
+     * Displayed when the validation fails.
+     */
+    error: string | null | undefined;
+    /**
+     * 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);
+    state: State;
+    componentDidMount(): void;
+    maybeValidate: (newValue: string) => void;
+    handleChange: (event: React.ChangeEvent<HTMLInputElement>) => unknown;
+    handleFocus: (event: React.FocusEvent<HTMLInputElement>) => unknown;
+    handleBlur: (event: React.FocusEvent<HTMLInputElement>) => unknown;
+    render(): React.ReactElement;
+}
+type ExportProps = Omit<JSX.LibraryManagedAttributes<typeof TextField, React.ComponentProps<typeof TextField>>, "forwardedRef">;
+/**
+ * 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 const _default: React.ForwardRefExoticComponent<ExportProps & React.RefAttributes<HTMLInputElement>>;
+export default _default;

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

@@ -0,0 +1,186 @@
+/**
+ * Flowtype definitions for text-field
+ * 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: React.ForwardedRef<HTMLInputElement>,
+  ...
+};
+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: 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,
+
+    /**
+     * 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,
+
+    /**
+     * 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: React.ChangeEvent<HTMLInputElement>) => mixed;
+  handleFocus: (event: React.FocusEvent<HTMLInputElement>) => mixed;
+  handleBlur: (event: React.FocusEvent<HTMLInputElement>) => mixed;
+  render(): React.Element<>;
+}
+declare type ExportProps = $Diff<
+  JSX.LibraryManagedAttributes<
+    typeof TextField,
+    React.ComponentProps<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.ForwardRefExoticComponent<{
+  ...ExportProps,
+  ...React.RefAttributes<HTMLInputElement>,
+}>;
+declare export default typeof _default;