@khanacademy/wonder-blocks-form 4.7.5 → 4.8.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @khanacademy/wonder-blocks-form
 
+## 4.8.1
+
+### Patch Changes
+
+-   8ab0b734: Allow `TextArea` to be focusable when disabled. It now sets `aria-disabled` instead of the `disabled` attribute based on the `disabled` prop. This makes it so screenreaders will continue to communicate that the component is disabled, while allowing focus on the disabled component. Focus styling is also added to the disabled state.
+
+## 4.8.0
+
+### Minor Changes
+
+-   4215976f: Adds `TextArea` component
+
 ## 4.7.5
 
 ### Patch Changes

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

@@ -0,0 +1,153 @@
+import * as React from "react";
+import { StyleType } from "@khanacademy/wonder-blocks-core";
+declare const TextArea: React.ForwardRefExoticComponent<Readonly<import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes> & Readonly<{
+    role?: import("../../../wonder-blocks-core/src/util/aria-types").AriaRole | undefined;
+}> & {
+    /**
+     * The text area value.
+     */
+    value: string;
+    /**
+     * Called when the value has changed.
+     */
+    onChange: (newValue: string) => unknown;
+    /**
+     * An optional unique identifier for the TextArea.
+     * If no id is specified, a unique id will be auto-generated.
+     */
+    id?: string | undefined;
+    /**
+     * Optional test ID for e2e testing.
+     */
+    testId?: string | undefined;
+    /**
+     * Custom styles for the text area.
+     */
+    style?: StyleType;
+    /**
+     * Provide hints or examples of what to enter.
+     */
+    placeholder?: string | undefined;
+    /**
+     * Whether the text area should be disabled.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Specifies if the text area is read-only.
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * Specifies if the text area allows autocomplete.
+     */
+    autoComplete?: "off" | "on" | undefined;
+    /**
+     * The name for the text area control. This is submitted along with
+     * the form data.
+     */
+    name?: string | undefined;
+    /**
+     * CSS classes for the textarea element. It is recommended that the style prop is used instead where possible
+     */
+    className?: string | undefined;
+    /**
+     * Whether this textarea should autofocus on page load.
+     */
+    autoFocus?: boolean | undefined;
+    /**
+     * The number of visible lines of text for the textarea.
+     * By default, 2 rows are shown.
+     * `rows` is ignored if a height is applied to the textarea using CSS.
+     * The number of rows can change if the resize control is used by the user.
+     */
+    rows?: number | undefined;
+    /**
+     * Determines if the textarea should be checked for spelling by the browser/OS.
+     * By default, it is enabled. It will be checked for spelling when you try
+     * to edit it (ie. once the textarea is focused). For more details, see the
+     * [spellcheck attribute MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#spellcheck).
+     * **Note**: Consider disabling `spellCheck` for
+     *  sensitive information (see [Security and Privacy concerns](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck#security_and_privacy_concerns) for more details)
+     */
+    spellCheck?: boolean | undefined;
+    /**
+     * How the control should wrap the value for form submission. If not provided,
+     * `soft` is the default behaviour. For more details, see the
+     * [wrap attribute MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#wrap)
+     */
+    wrap?: "off" | "hard" | "soft" | undefined;
+    /**
+     * The minimum number of characters allowed in the textarea.
+     */
+    minLength?: number | undefined;
+    /**
+     * The maximum number of characters allowed in the textarea.
+     */
+    maxLength?: number | undefined;
+    /**
+     * Called when the textarea is clicked.
+     * @param event The event from the click
+     */
+    onClick?: React.MouseEventHandler<HTMLTextAreaElement> | undefined;
+    /**
+     * Called when a key is pressed.
+     * @param event The keyboard event
+     */
+    onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement> | undefined;
+    /**
+     * Called when a key is released.
+     * @param event The keyboard event
+     */
+    onKeyUp?: React.KeyboardEventHandler<HTMLTextAreaElement> | undefined;
+    /**
+     * Called when the element has been focused.
+     * @param event The focus event
+     */
+    onFocus?: React.FocusEventHandler<HTMLTextAreaElement> | undefined;
+    /**
+     * Called when the element has been focused.
+     * @param event The blur event
+     */
+    onBlur?: React.FocusEventHandler<HTMLTextAreaElement> | undefined;
+    /**
+     * Provide a validation for the textarea value.
+     * Return a string error message or null | void for a valid input.
+     */
+    validate?: ((value: string) => string | null | void) | undefined;
+    /**
+     * Called right after the textarea is validated.
+     */
+    onValidate?: ((errorMessage?: string | null | undefined) => unknown) | undefined;
+    /**
+     * Whether this textarea is required to continue, or the error message to
+     * render if this textarea 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 textarea blank. If this textarea 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 textarea 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?: string | boolean | undefined;
+    /**
+     * Specifies the resizing behaviour for the textarea. Defaults to both
+     * behaviour. For more details, see the [CSS resize property values MDN docs](https://developer.mozilla.org/en-US/docs/Web/CSS/resize#values)
+     */
+    resizeType?: "none" | "both" | "horizontal" | "vertical" | undefined;
+    /**
+     * Change the default focus ring color to fit a dark background.
+     */
+    light?: boolean | undefined;
+} & React.RefAttributes<HTMLTextAreaElement>>;
+export default TextArea;