gbs-add-block 1.2.13 → 1.2.14

package/source/beta-components/textarea/react/Textarea.tsx

@@ -0,0 +1,209 @@
+"use client";
+
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type CSSProperties,
+  type ReactNode,
+  type Ref,
+  type TextareaHTMLAttributes,
+} from "react";
+import { countCharacters } from "../core/count";
+import { fitHeight } from "../core/size";
+import type { FieldSize, TextareaLocaleText, TextareaResize } from "../core/types";
+import { defaultTextareaText } from "./locale";
+import { cx, type TextareaSlot } from "./props";
+
+export interface TextareaProps
+  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "defaultValue"> {
+  value?: string;
+  defaultValue?: string;
+  /** The new text on every change. The native `onChange` fires as well. */
+  onValueChange?(value: string): void;
+  label?: ReactNode;
+  description?: ReactNode;
+  /** Message below the field; also marks it invalid. */
+  error?: ReactNode;
+  size?: FieldSize;
+  /** Grow and shrink with the text, between `minRows` and `maxRows`. Default false. */
+  autoResize?: boolean;
+  /** Smallest height in rows. Default `rows`, or 3. */
+  minRows?: number;
+  /** Largest height in rows before the text scrolls. No limit by default. */
+  maxRows?: number;
+  /** Which way people can drag to resize. Default `vertical`, or `none` with `autoResize`. */
+  resize?: TextareaResize;
+  /** A character counter; shows `count / maxLength` when `maxLength` is set. */
+  showCount?: boolean;
+  classNames?: Partial<Record<TextareaSlot, string>>;
+  localeText?: Partial<TextareaLocaleText>;
+  /** The `<textarea>` element. */
+  ref?: Ref<HTMLTextAreaElement>;
+}
+
+const supportsFieldSizing = () =>
+  typeof CSS !== "undefined" && CSS.supports("field-sizing", "content");
+
+const px = (value: string) => Number.parseFloat(value) || 0;
+
+/**
+ * A multi-line text field with label, hint, error, character counter and
+ * auto-resize. Every other prop goes to the `<textarea>`.
+ */
+export function Textarea(props: TextareaProps) {
+  const {
+    ref,
+    value: valueProp,
+    defaultValue,
+    onChange,
+    onValueChange,
+    label,
+    description,
+    error,
+    size = "md",
+    autoResize = false,
+    minRows,
+    maxRows,
+    rows,
+    resize,
+    showCount = false,
+    className,
+    classNames,
+    style,
+    localeText,
+    id: idProp,
+    disabled,
+    readOnly,
+    required,
+    maxLength,
+    "aria-describedby": describedByProp,
+    ...textareaProps
+  } = props;
+
+  const reactId = useId();
+  const id = idProp ?? reactId;
+  const text = useMemo(() => ({ ...defaultTextareaText, ...localeText }), [localeText]);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  useImperativeHandle(ref, () => textareaRef.current as HTMLTextAreaElement, []);
+
+  // Mirrors the text even when uncontrolled, for the counter and auto-resize.
+  const [internal, setInternal] = useState(defaultValue ?? "");
+  const current = valueProp ?? internal;
+  const floor = Math.max(1, minRows ?? rows ?? 3);
+
+  const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    if (valueProp === undefined) setInternal(event.target.value);
+    onChange?.(event);
+    onValueChange?.(event.target.value);
+  };
+
+  // Browsers with `field-sizing: content` resize in CSS; others are measured here.
+  const measure = useCallback(() => {
+    const element = textareaRef.current;
+    if (!autoResize || !element || supportsFieldSizing()) return;
+    const computed = getComputedStyle(element);
+    const metrics = {
+      lineHeight: px(computed.lineHeight) || px(computed.fontSize) * 1.5,
+      paddingBlock: px(computed.paddingTop) + px(computed.paddingBottom),
+      borderBlock: px(computed.borderTopWidth) + px(computed.borderBottomWidth),
+    };
+    element.style.height = "auto";
+    const { height, overflow } = fitHeight(element.scrollHeight, metrics, floor, maxRows);
+    element.style.height = `${height}px`;
+    element.style.overflowY = overflow ? "auto" : "hidden";
+  }, [autoResize, floor, maxRows]);
+
+  useLayoutEffect(() => {
+    measure();
+  }, [measure, current]);
+
+  // A narrower field wraps more lines, so measure again when the width changes.
+  useEffect(() => {
+    const element = textareaRef.current;
+    if (!autoResize || !element || supportsFieldSizing()) return;
+    let width = element.offsetWidth;
+    const observer = new ResizeObserver(() => {
+      if (element.offsetWidth === width) return;
+      width = element.offsetWidth;
+      measure();
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [autoResize, measure]);
+
+  const invalid = Boolean(error);
+  const count = countCharacters(current);
+  const describedBy =
+    cx(describedByProp, description ? `${id}-description` : "", error ? `${id}-error` : "") || undefined;
+  const rowVariables = {
+    "--ta-min-rows": floor,
+    "--ta-max-rows": maxRows ?? "none",
+  } as CSSProperties;
+
+  return (
+    <div
+      className={cx("ta-root", classNames?.root, className)}
+      style={style}
+      data-size={size}
+      data-disabled={disabled || undefined}
+      data-invalid={invalid ? "" : undefined}
+    >
+      {label && (
+        <label htmlFor={id} className={cx("ta-label", classNames?.label)} data-required={required || undefined}>
+          {label}
+        </label>
+      )}
+
+      <textarea
+        {...textareaProps}
+        ref={textareaRef}
+        id={id}
+        className={cx("ta-input", classNames?.textarea)}
+        style={rowVariables}
+        rows={autoResize ? floor : (rows ?? floor)}
+        value={valueProp}
+        defaultValue={valueProp === undefined ? defaultValue : undefined}
+        disabled={disabled}
+        readOnly={readOnly}
+        required={required}
+        maxLength={maxLength}
+        data-autoresize={autoResize || undefined}
+        data-resize={resize ?? (autoResize ? "none" : "vertical")}
+        data-invalid={invalid ? "" : undefined}
+        aria-invalid={invalid || undefined}
+        aria-describedby={describedBy}
+        onChange={handleChange}
+      />
+
+      {(description || showCount) && (
+        <div className="ta-footer">
+          {description && (
+            <span id={`${id}-description`} className={cx("ta-description", classNames?.description)}>
+              {description}
+            </span>
+          )}
+          {showCount && (
+            <span
+              className={cx("ta-count", classNames?.count)}
+              data-over={maxLength !== undefined && count > maxLength ? "" : undefined}
+            >
+              {text.characterCount(String(count), maxLength !== undefined ? String(maxLength) : undefined)}
+            </span>
+          )}
+        </div>
+      )}
+      {error && (
+        <span id={`${id}-error`} className={cx("ta-error", classNames?.error)} role="alert">
+          {error}
+        </span>
+      )}
+    </div>
+  );
+}

package/source/beta-components/textarea/react/locale.ts

@@ -0,0 +1,5 @@
+import type { TextareaLocaleText } from "../core/types";
+
+export const defaultTextareaText: TextareaLocaleText = {
+  characterCount: (count, max) => (max === undefined ? count : `${count} / ${max}`),
+};

package/source/beta-components/textarea/react/props.ts

@@ -0,0 +1,4 @@
+export type TextareaSlot = "root" | "label" | "textarea" | "description" | "error" | "count";
+
+export const cx = (...names: (string | false | null | undefined)[]) =>
+  names.filter(Boolean).join(" ");

package/source/beta-components/textarea/styles.css

@@ -0,0 +1,159 @@
+/*
+ * Textarea styles.
+ *
+ * Tokens read the DataGrid's --dg-* variables when they are set on an ancestor
+ * (set them on :root to share one theme) and fall back to the same palette
+ * otherwise. Rules live in the `components` layer, so utility classes passed
+ * through `className` / `classNames` override them.
+ */
+@layer theme, base, components, utilities;
+
+@layer components {
+  .ta-root {
+    --ta-fg: var(--dg-fg, light-dark(#18181b, #f4f4f5));
+    --ta-muted: var(--dg-muted, light-dark(#71717a, #a1a1aa));
+    --ta-border: var(--dg-border, light-dark(#e4e4e7, #27272a));
+    --ta-input-bg: var(--dg-input-bg, light-dark(#ffffff, #121216));
+    --ta-readonly-bg: light-dark(#fafafa, #0e0e12);
+    --ta-focus: var(--dg-focus, light-dark(#2563eb, #60a5fa));
+    --ta-danger: var(--dg-danger, light-dark(#dc2626, #f87171));
+    --ta-radius: var(--dg-radius, 8px);
+    --ta-font-size: var(--dg-font-size, 13px);
+    --ta-px: 10px;
+    --ta-py: 8px;
+
+    color-scheme: inherit;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    width: 100%;
+    min-width: 0;
+    font-size: var(--ta-font-size);
+    line-height: 1.4;
+    color: var(--ta-fg);
+  }
+
+  :where(.dark, [data-theme="dark"]) .ta-root {
+    color-scheme: dark;
+  }
+  :where(.light, [data-theme="light"]) .ta-root {
+    color-scheme: light;
+  }
+
+  :where(.ta-root) *,
+  :where(.ta-root) *::before,
+  :where(.ta-root) *::after {
+    box-sizing: border-box;
+  }
+
+  .ta-root[data-size="sm"] {
+    --ta-font-size: 12px;
+    --ta-px: 8px;
+    --ta-py: 6px;
+  }
+  .ta-root[data-size="lg"] {
+    --ta-font-size: 14px;
+    --ta-px: 12px;
+    --ta-py: 10px;
+  }
+
+  .ta-label {
+    font-weight: 500;
+  }
+  .ta-label[data-required]::after {
+    content: " *";
+    color: var(--ta-danger);
+  }
+
+  .ta-input {
+    display: block;
+    width: 100%;
+    min-height: calc(1lh + 2 * var(--ta-py) + 2px);
+    margin: 0;
+    padding: var(--ta-py) var(--ta-px);
+    border: 1px solid var(--ta-border);
+    border-radius: var(--ta-radius);
+    background: var(--ta-input-bg);
+    color: inherit;
+    font: inherit;
+    line-height: 1.5;
+  }
+  .ta-input::placeholder {
+    color: var(--ta-muted);
+  }
+  .ta-input:hover:not(:disabled) {
+    border-color: color-mix(in oklab, var(--ta-border), var(--ta-fg) 25%);
+  }
+  .ta-input:focus-visible {
+    outline: 2px solid var(--ta-focus);
+    outline-offset: -1px;
+  }
+  .ta-input[data-invalid] {
+    border-color: var(--ta-danger);
+    outline-color: var(--ta-danger);
+  }
+  .ta-input:read-only {
+    background: var(--ta-readonly-bg);
+  }
+  .ta-input:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+
+  .ta-input[data-resize="none"] {
+    resize: none;
+  }
+  .ta-input[data-resize="vertical"] {
+    resize: vertical;
+  }
+  .ta-input[data-resize="horizontal"] {
+    resize: horizontal;
+  }
+  .ta-input[data-resize="both"] {
+    resize: both;
+  }
+
+  /*
+   * Auto-resize in CSS where supported. The row limits come from the
+   * component; `--ta-max-rows: none` makes max-height invalid, which means no limit.
+   */
+  @supports (field-sizing: content) {
+    .ta-input[data-autoresize] {
+      field-sizing: content;
+      min-height: calc(var(--ta-min-rows, 3) * 1lh + 2 * var(--ta-py) + 2px);
+      max-height: calc(var(--ta-max-rows) * 1lh + 2 * var(--ta-py) + 2px);
+    }
+  }
+
+  .ta-footer {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+  }
+  .ta-description {
+    flex: 1 1 auto;
+    min-width: 0;
+    color: var(--ta-muted);
+    font-size: 0.92em;
+  }
+  .ta-count {
+    flex: none;
+    margin-inline-start: auto;
+    color: var(--ta-muted);
+    font-size: 0.92em;
+    font-variant-numeric: tabular-nums;
+  }
+  .ta-count[data-over] {
+    color: var(--ta-danger);
+  }
+  .ta-error {
+    color: var(--ta-danger);
+    font-size: 0.92em;
+  }
+
+  @media (forced-colors: active) {
+    .ta-input:focus-visible {
+      outline-color: Highlight;
+    }
+  }
+}