@luscii-healthtech/web-ui 60.3.2 → 60.4.0

package/dist/src/components/Textarea/LabeledTextarea.d.ts

@@ -0,0 +1,42 @@
+import React from "react";
+import { type FormFieldSize } from "../../types/general.types.js";
+import { type TextareaProps } from "./Textarea";
+export declare const LabeledTextarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "isDisabled" | "isError"> & {
+    /**
+     * The visible label, linked to the textarea with `htmlFor`. When omitted, give
+     * the textarea an accessible name with `aria-label` or `aria-labelledby`.
+     *
+     * Besides a string, this can be a node, for example to add an icon next to
+     * the text. It's rendered inside a `<label>`, so keep it phrasing content
+     * (no headings or blocks) and non-interactive: interactive content would
+     * become part of the field's accessible name.
+     */
+    label?: React.ReactNode;
+    /**
+     * Any additional information to show underneath the textarea.
+     *
+     * When given as a string, it is rendered as sanitized HTML (DOMPurify),
+     * so translated copy can contain markup such as links.
+     */
+    helperText?: React.ReactNode;
+    /**
+     * An error message that should be shown when there's something wrong
+     * with the user's input.
+     */
+    errorText?: React.ReactNode;
+    /**
+     * The width of the whole field: label, textarea and helper/error text.
+     * Accepts the same sizes as `LabeledInput`'s `width`, including a tuple of
+     * sizes per breakpoint. The textarea stretches to fill this width.
+     *
+     * By default the field only takes its intrinsic width.
+     */
+    width?: FormFieldSize | [FormFieldSize, FormFieldSize?, FormFieldSize?, FormFieldSize?, FormFieldSize?];
+    /**
+     * When true, the field stretches to fill the full width of its container,
+     * also when the container aligns its children to the start.
+     *
+     * Shorthand for `width="full"`. When both are given, `width` wins.
+     */
+    fullWidth?: boolean;
+} & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/src/components/Textarea/Textarea.d.ts

@@ -7,7 +7,12 @@ declare const resizeTypes: {
     readonly VERTICAL: "vertical";
 };
 export type ResizeTypes = (typeof resizeTypes)[keyof typeof resizeTypes];
-export interface TextareaProps {
+/**
+ * Besides its own props, the textarea takes any native `<textarea>`
+ * attribute (e.g. `id`, `required`, `aria-describedby`), which is spread onto
+ * the element.
+ */
+export interface TextareaProps extends React.ComponentPropsWithoutRef<"textarea"> {
     className?: string;
     value?: string;
     name?: string;
@@ -15,9 +20,13 @@ export interface TextareaProps {
     maxLength?: number;
     rows?: number;
     resizable?: ResizeTypes;
+    /**
+     * Disables the textarea. Equivalent to the native `disabled` attribute;
+     * the textarea is disabled when either is true.
+     */
     isDisabled?: boolean;
     icon?: string;
-    onChange: (event: ChangeEvent<HTMLTextAreaElement>) => void;
+    onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void;
     onBlur?: (event: FocusEvent<HTMLTextAreaElement>) => void;
     onFocus?: (event: FocusEvent<HTMLTextAreaElement>) => void;
     onKeyPress?: (event: KeyboardEvent<HTMLTextAreaElement>) => void;

package/dist/src/generated/components/Textarea/LabeledTextarea.d.ts

@@ -0,0 +1,42 @@
+import React from "react";
+import { type FormFieldSize } from "../../../types/general.types.js";
+import { type TextareaProps } from "./Textarea";
+export declare const LabeledTextarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "isDisabled" | "isError"> & {
+    /**
+     * The visible label, linked to the textarea with `htmlFor`. When omitted, give
+     * the textarea an accessible name with `aria-label` or `aria-labelledby`.
+     *
+     * Besides a string, this can be a node, for example to add an icon next to
+     * the text. It's rendered inside a `<label>`, so keep it phrasing content
+     * (no headings or blocks) and non-interactive: interactive content would
+     * become part of the field's accessible name.
+     */
+    label?: React.ReactNode;
+    /**
+     * Any additional information to show underneath the textarea.
+     *
+     * When given as a string, it is rendered as sanitized HTML (DOMPurify),
+     * so translated copy can contain markup such as links.
+     */
+    helperText?: React.ReactNode;
+    /**
+     * An error message that should be shown when there's something wrong
+     * with the user's input.
+     */
+    errorText?: React.ReactNode;
+    /**
+     * The width of the whole field: label, textarea and helper/error text.
+     * Accepts the same sizes as `LabeledInput`'s `width`, including a tuple of
+     * sizes per breakpoint. The textarea stretches to fill this width.
+     *
+     * By default the field only takes its intrinsic width.
+     */
+    width?: FormFieldSize | [FormFieldSize, FormFieldSize?, FormFieldSize?, FormFieldSize?, FormFieldSize?];
+    /**
+     * When true, the field stretches to fill the full width of its container,
+     * also when the container aligns its children to the start.
+     *
+     * Shorthand for `width="full"`. When both are given, `width` wins.
+     */
+    fullWidth?: boolean;
+} & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/src/generated/components/Textarea/Textarea.d.ts

@@ -7,7 +7,12 @@ declare const resizeTypes: {
     readonly VERTICAL: "vertical";
 };
 export type ResizeTypes = (typeof resizeTypes)[keyof typeof resizeTypes];
-export interface TextareaProps {
+/**
+ * Besides its own props, the textarea takes any native `<textarea>`
+ * attribute (e.g. `id`, `required`, `aria-describedby`), which is spread onto
+ * the element.
+ */
+export interface TextareaProps extends React.ComponentPropsWithoutRef<"textarea"> {
     className?: string;
     value?: string;
     name?: string;
@@ -15,9 +20,13 @@ export interface TextareaProps {
     maxLength?: number;
     rows?: number;
     resizable?: ResizeTypes;
+    /**
+     * Disables the textarea. Equivalent to the native `disabled` attribute;
+     * the textarea is disabled when either is true.
+     */
     isDisabled?: boolean;
     icon?: string;
-    onChange: (event: ChangeEvent<HTMLTextAreaElement>) => void;
+    onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void;
     onBlur?: (event: FocusEvent<HTMLTextAreaElement>) => void;
     onFocus?: (event: FocusEvent<HTMLTextAreaElement>) => void;
     onKeyPress?: (event: KeyboardEvent<HTMLTextAreaElement>) => void;

package/dist/src/generated/index.d.ts

@@ -46,6 +46,7 @@ export { StyledInput } from "./components/Input/StyledInput";
 export { StyledRadio } from "./components/Radio/StyledRadio";
 export { LabeledDatePicker } from "./components/DatePicker/LabeledDatePicker";
 export { LabeledInput } from "./components/Input/LabeledInput";
+export { LabeledTextarea } from "./components/Textarea/LabeledTextarea";
 export { LabeledRadio } from "./components/Radio/LabeledRadio";
 export { LabeledRadioGroup } from "./components/Radio/LabeledRadioGroup";
 export { LabelText } from "./components/forms/shared/LabelText";

package/dist/src/index.d.ts

@@ -46,6 +46,7 @@ export { StyledInput } from "./components/Input/StyledInput";
 export { StyledRadio } from "./components/Radio/StyledRadio";
 export { LabeledDatePicker } from "./components/DatePicker/LabeledDatePicker";
 export { LabeledInput } from "./components/Input/LabeledInput";
+export { LabeledTextarea } from "./components/Textarea/LabeledTextarea";
 export { LabeledRadio } from "./components/Radio/LabeledRadio";
 export { LabeledRadioGroup } from "./components/Radio/LabeledRadioGroup";
 export { LabelText } from "./components/forms/shared/LabelText";

package/dist/stories/LabeledTextarea.stories.d.ts

@@ -0,0 +1,89 @@
+import type { StoryObj } from "@storybook/react-vite";
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("../src").TextareaProps, "isDisabled" | "isError"> & {
+        label?: React.ReactNode;
+        helperText?: React.ReactNode;
+        errorText?: React.ReactNode;
+        width?: import("../src/types/general.types").FormFieldSize | [import("../src/types/general.types").FormFieldSize, import("../src/types/general.types").FormFieldSize?, import("../src/types/general.types").FormFieldSize?, import("../src/types/general.types").FormFieldSize?, import("../src/types/general.types").FormFieldSize?];
+        fullWidth?: boolean;
+    } & import("react").RefAttributes<HTMLTextAreaElement>>;
+    args: {
+        onChange: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        onBlur: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        onFocus: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        onKeyDown: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        onKeyPress: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        onCtrlEnter: import("@vitest/spy").Mock<(...args: any[]) => any>;
+    };
+    argTypes: {
+        helperText: {
+            control: {
+                type: "text";
+            };
+        };
+        errorText: {
+            control: {
+                type: "text";
+            };
+        };
+    };
+    parameters: {
+        backgrounds: {
+            default: string;
+        };
+    };
+    tags: "new"[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Base: Story;
+export declare const Disabled: Story;
+export declare const Placeholder: Story;
+/**
+ * `onCtrlEnter` is called when the user presses Ctrl+Enter (or Cmd+Enter),
+ * for example to submit a message.
+ */
+export declare const CtrlEnter: Story;
+/**
+ * Use `rows` to set the initial height of the textarea.
+ */
+export declare const Rows: Story;
+/**
+ * By default the textarea can be resized vertically. Use `resizable` to
+ * change that.
+ */
+export declare const Resizable: Story;
+export declare const HelperText: Story;
+/**
+ * Helper text given as a string is rendered as sanitized HTML, so translated
+ * copy can contain markup such as links.
+ */
+export declare const HelperTextWithHtml: Story;
+/**
+ * When `errorText` is given, it replaces the helper text, the textarea gets
+ * error styling and it is marked `aria-invalid`.
+ */
+export declare const ErrorText: Story;
+/**
+ * Besides a string, `label` takes a node, for example to add a muted
+ * "(optional)" next to the text. It's rendered inside the `<label>`, so keep
+ * it phrasing content and non-interactive: all of its text becomes the
+ * textarea's accessible name.
+ */
+export declare const LabelAsNode: Story;
+/**
+ * Demonstrates the `fullWidth` prop. The textarea, helper text, and error text
+ * stretch to fill the container width instead of taking their intrinsic size.
+ * `fullWidth` is a shorthand for `width="full"`.
+ */
+export declare const FullWidth: Story;
+/**
+ * The `width` prop sizes the whole field, like `width` on `LabeledInput`. The
+ * textarea, helper text and error text fill that width.
+ */
+export declare const Widths: Story;
+/**
+ * `width` also accepts a tuple of sizes per breakpoint.
+ */
+export declare const ResponsiveWidth: Story;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luscii-healthtech/web-ui",
-  "version": "60.3.2",
+  "version": "60.4.0",
   "license": "MIT",
   "author": {
     "name": "Joris Janssen"