@seed-design/react 0.0.0-alpha-20260324091316

package/src/components/TextField/TextField.test.tsx

@@ -0,0 +1,257 @@
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, mock } from "bun:test";
+import type { ReactElement } from "react";
+import React from "react";
+
+import { Field } from "@seed-design/react-field";
+import {
+  TextFieldRoot,
+  TextFieldInput,
+  TextFieldTextarea,
+  TextFieldPrefixIcon,
+  TextFieldPrefixText,
+  TextFieldSuffixIcon,
+  TextFieldSuffixText,
+} from "./TextField";
+
+function setUp(jsx: ReactElement) {
+  return {
+    user: userEvent.setup(),
+    ...render(jsx),
+  };
+}
+
+describe("TextField", () => {
+  describe("props merging", () => {
+    describe("TextFieldInput", () => {
+      it("should merge props from TextFieldRoot", () => {
+        const { getByRole } = setUp(
+          <TextFieldRoot defaultValue="initial">
+            <TextFieldInput placeholder="Placeholder" aria-label="Test input" />
+          </TextFieldRoot>,
+        );
+
+        const input = getByRole("textbox");
+        expect(input).toHaveValue("initial");
+        expect(input).toHaveAttribute("placeholder", "Placeholder");
+      });
+
+      it("should merge props from Field context", () => {
+        const { getByRole } = setUp(
+          <Field.Root required invalid disabled name="test-field">
+            <TextFieldRoot>
+              <TextFieldInput aria-label="Test input" />
+            </TextFieldRoot>
+          </Field.Root>,
+        );
+
+        const input = getByRole("textbox");
+        expect(input).toHaveAttribute("name", "test-field");
+        expect(input).toHaveAttribute("aria-required", "true");
+        expect(input).toHaveAttribute("aria-invalid", "true");
+        expect(input).toBeDisabled();
+      });
+
+      it("should prioritize direct props over context props", () => {
+        const { getByRole } = setUp(
+          <Field.Root name="field-name">
+            <TextFieldRoot>
+              <TextFieldInput name="direct-name" aria-label="Test input" />
+            </TextFieldRoot>
+          </Field.Root>,
+        );
+
+        const input = getByRole("textbox");
+        expect(input).toHaveAttribute("name", "direct-name");
+      });
+
+      it("should merge data attributes", () => {
+        const { getByRole } = setUp(
+          <Field.Root disabled readOnly invalid>
+            <TextFieldRoot>
+              <TextFieldInput data-custom="value" aria-label="Test input" />
+            </TextFieldRoot>
+          </Field.Root>,
+        );
+
+        const input = getByRole("textbox");
+        expect(input).toHaveAttribute("data-disabled", "");
+        expect(input).toHaveAttribute("data-readonly", "");
+        expect(input).toHaveAttribute("data-invalid", "");
+        expect(input).toHaveAttribute("data-custom", "value");
+      });
+
+      it("should handle uncontrolled modes", async () => {
+        const handleChange = mock(() => {});
+        const { getByRole, user } = setUp(
+          <TextFieldRoot onValueChange={handleChange}>
+            <TextFieldInput aria-label="Test input" />
+          </TextFieldRoot>,
+        );
+
+        const input = getByRole("textbox");
+
+        await user.type(input, "test");
+        expect(handleChange).toHaveBeenCalledWith("test");
+      });
+
+      it("should handle controlled modes", async () => {
+        function Controlled() {
+          const [value, setValue] = React.useState("");
+
+          return (
+            <TextFieldRoot value={value} onValueChange={setValue}>
+              <TextFieldInput aria-label="Test input" />
+            </TextFieldRoot>
+          );
+        }
+
+        const { getByRole, user } = setUp(<Controlled />);
+
+        const input = getByRole("textbox");
+
+        await user.type(input, "test");
+        expect(input).toHaveValue("test");
+      });
+    });
+
+    describe("TextFieldTextarea", () => {
+      it("should merge props from TextFieldRoot", () => {
+        const { getByRole } = setUp(
+          <TextFieldRoot defaultValue="initial">
+            <TextFieldTextarea placeholder="Placeholder" aria-label="Test textarea" />
+          </TextFieldRoot>,
+        );
+
+        const input = getByRole("textbox");
+        expect(input).toHaveValue("initial");
+        expect(input).toHaveAttribute("placeholder", "Placeholder");
+      });
+
+      it("should merge props from Field context", () => {
+        const { getByRole } = setUp(
+          <Field.Root required invalid disabled name="test-field">
+            <TextFieldRoot>
+              <TextFieldTextarea aria-label="Test textarea" />
+            </TextFieldRoot>
+          </Field.Root>,
+        );
+
+        const input = getByRole("textbox");
+        expect(input).toHaveAttribute("name", "test-field");
+        expect(input).toHaveAttribute("aria-required", "true");
+        expect(input).toHaveAttribute("aria-invalid", "true");
+        expect(input).toBeDisabled();
+      });
+
+      it("should prioritize direct props over context props", () => {
+        const { getByRole } = setUp(
+          <Field.Root disabled name="field-name">
+            <TextFieldRoot>
+              <TextFieldTextarea disabled={false} name="direct-name" aria-label="Test textarea" />
+            </TextFieldRoot>
+          </Field.Root>,
+        );
+
+        const input = getByRole("textbox");
+        expect(input).toHaveAttribute("name", "direct-name");
+        expect(input).not.toBeDisabled();
+      });
+
+      it("should merge data attributes", () => {
+        const { getByRole } = setUp(
+          <Field.Root disabled readOnly invalid>
+            <TextFieldRoot>
+              <TextFieldTextarea data-custom="value" aria-label="Test textarea" />
+            </TextFieldRoot>
+          </Field.Root>,
+        );
+
+        const input = getByRole("textbox");
+        expect(input).toHaveAttribute("data-disabled", "");
+        expect(input).toHaveAttribute("data-readonly", "");
+        expect(input).toHaveAttribute("data-invalid", "");
+        expect(input).toHaveAttribute("data-custom", "value");
+      });
+
+      it("should handle uncontrolled modes", async () => {
+        const handleChange = mock(() => {});
+        const { getByRole, user } = setUp(
+          <TextFieldRoot onValueChange={handleChange}>
+            <TextFieldTextarea aria-label="Test textarea" />
+          </TextFieldRoot>,
+        );
+
+        const input = getByRole("textbox");
+
+        await user.type(input, "test");
+        expect(handleChange).toHaveBeenCalledWith("test");
+      });
+
+      it("should handle controlled modes", async () => {
+        function Controlled() {
+          const [value, setValue] = React.useState("");
+
+          return (
+            <TextFieldRoot value={value} onValueChange={setValue}>
+              <TextFieldTextarea aria-label="Test textarea" />
+            </TextFieldRoot>
+          );
+        }
+
+        const { getByRole, user } = setUp(<Controlled />);
+
+        const input = getByRole("textbox");
+
+        await user.type(input, "test");
+        expect(input).toHaveValue("test");
+      });
+    });
+
+    describe("Prefix and Suffix components", () => {
+      it("should apply state props to affix elements", () => {
+        const { getByTestId } = setUp(
+          <TextFieldRoot disabled invalid readOnly>
+            <TextFieldPrefixText>Prefix</TextFieldPrefixText>
+            <TextFieldPrefixIcon svg={<svg data-testid="prefix-icon" />} />
+            <TextFieldInput aria-label="Test input" />
+            <TextFieldSuffixIcon svg={<svg data-testid="suffix-icon" />} />
+            <TextFieldSuffixText>Suffix</TextFieldSuffixText>
+          </TextFieldRoot>,
+        );
+
+        const prefixIcon = getByTestId("prefix-icon");
+        expect(prefixIcon).toHaveAttribute("data-disabled", "");
+        expect(prefixIcon).toHaveAttribute("data-invalid", "");
+        expect(prefixIcon).toHaveAttribute("data-readonly", "");
+
+        const suffixIcon = getByTestId("suffix-icon");
+        expect(suffixIcon).toHaveAttribute("data-disabled", "");
+        expect(suffixIcon).toHaveAttribute("data-invalid", "");
+        expect(suffixIcon).toHaveAttribute("data-readonly", "");
+      });
+    });
+
+    describe("Complex prop merging scenarios", () => {
+      // this is possible, but you shouldn't be doing this
+      it("should handle nested Field and TextField contexts", () => {
+        const { getByRole } = setUp(
+          <Field.Root required name="field">
+            <Field.Label>Label</Field.Label>
+            <TextFieldRoot invalid>
+              <TextFieldInput />
+            </TextFieldRoot>
+            <Field.Description>Description</Field.Description>
+          </Field.Root>,
+        );
+
+        const input = getByRole("textbox");
+        expect(input).toHaveAttribute("name", "field");
+        expect(input).toHaveAttribute("aria-required", "true");
+        expect(input).toHaveAttribute("aria-invalid", "true");
+        expect(input).toHaveAttribute("aria-describedby");
+      });
+    });
+  });
+});

package/src/components/TextField/TextField.tsx

@@ -0,0 +1,182 @@
+import { useLayoutEffect } from "@radix-ui/react-use-layout-effect";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { TextField, useTextFieldContext } from "@seed-design/react-text-field";
+import { useFieldContext } from "@seed-design/react-field";
+import { textInput, type TextInputVariantProps } from "@seed-design/css/recipes/text-input";
+import clsx from "clsx";
+import type * as React from "react";
+import { forwardRef, useCallback, useRef } from "react";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+import { InternalIcon, type InternalIconProps } from "../private/Icon";
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import { mergeProps } from "@seed-design/dom-utils";
+
+const { withProvider, withContext, useClassNames } = createSlotRecipeContext(textInput);
+
+const withFieldStateProps = createWithStateProps([{ useContext: useFieldContext, strict: false }]);
+const withStateProps = createWithStateProps([
+  useTextFieldContext,
+  { useContext: useFieldContext, strict: false },
+]);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface TextFieldRootProps extends TextInputVariantProps, TextField.RootProps {}
+
+export const TextFieldRoot = withProvider<HTMLDivElement, TextFieldRootProps>(
+  withFieldStateProps(TextField.Root),
+  "root",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface TextFieldPrefixIconProps extends InternalIconProps {}
+
+export const TextFieldPrefixIcon = withContext<SVGSVGElement, TextFieldPrefixIconProps>(
+  withStateProps(InternalIcon),
+  "prefixIcon",
+);
+
+export interface TextFieldPrefixTextProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const TextFieldPrefixText = withContext<HTMLSpanElement, TextFieldPrefixTextProps>(
+  withStateProps(Primitive.span),
+  "prefixText",
+);
+
+export interface TextFieldSuffixIconProps extends InternalIconProps {}
+
+export const TextFieldSuffixIcon = withContext<SVGSVGElement, TextFieldSuffixIconProps>(
+  withStateProps(InternalIcon),
+  "suffixIcon",
+);
+
+export interface TextFieldSuffixTextProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const TextFieldSuffixText = withContext<HTMLSpanElement, TextFieldSuffixTextProps>(
+  withStateProps(Primitive.span),
+  "suffixText",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface TextFieldInputProps extends TextField.InputProps {}
+
+export const TextFieldInput = forwardRef<HTMLInputElement, TextFieldInputProps>(
+  ({ className, ...otherProps }, ref) => {
+    const classNames = useClassNames();
+    const textFieldContext = useTextFieldContext();
+    const fieldContext = useFieldContext({ strict: false });
+
+    const mergedProps = mergeProps(
+      fieldContext ? fieldContext.stateProps : {},
+      fieldContext ? fieldContext.inputAriaAttributes : {},
+      textFieldContext.inputProps,
+      fieldContext ? fieldContext.inputProps : {},
+      otherProps,
+    );
+
+    if (
+      // if not in field, then must have aria-label or aria-labelledby
+      !fieldContext &&
+      !otherProps["aria-label"] &&
+      !otherProps["aria-labelledby"]
+    ) {
+      console.warn(
+        "TextFieldInput: Please provide `aria-label` or `aria-labelledby` for accessibility, or put `TextFieldInput` inside a `Field` where a `FieldLabel` is provided.",
+      );
+    }
+
+    return (
+      <TextField.Input ref={ref} {...mergedProps} className={clsx(classNames.value, className)} />
+    );
+  },
+);
+TextFieldInput.displayName = "TextFieldInput";
+
+export interface TextFieldTextareaProps extends TextField.TextareaProps {
+  /**
+   * If true, the textarea will automatically resize based on its content.
+   * @default true
+   */
+  autoresize?: boolean;
+}
+
+export const TextFieldTextarea = forwardRef<HTMLTextAreaElement, TextFieldTextareaProps>(
+  ({ className, autoresize = true, ...otherProps }, ref) => {
+    const classNames = useClassNames();
+    const textFieldContext = useTextFieldContext();
+    const fieldContext = useFieldContext({ strict: false });
+
+    const mergedProps = mergeProps(
+      fieldContext ? fieldContext.stateProps : {},
+      fieldContext ? fieldContext.inputAriaAttributes : {},
+      textFieldContext.inputProps,
+      fieldContext ? fieldContext.inputProps : {},
+      otherProps,
+    );
+
+    if (
+      // if not in field, then must have aria-label or aria-labelledby
+      !fieldContext &&
+      !otherProps["aria-label"] &&
+      !otherProps["aria-labelledby"]
+    ) {
+      console.warn(
+        "TextFieldTextarea: Please provide `aria-label` or `aria-labelledby` for accessibility, or put `TextFieldTextarea` inside a `Field` where a `FieldLabel` is provided.",
+      );
+    }
+
+    // referenced from React Spectrum
+    const inputRef = useRef<HTMLTextAreaElement>(null);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: intended
+    const onHeightChange = useCallback(() => {
+      if (!inputRef.current) return;
+      if (otherProps.style?.height) return;
+      if (!autoresize) return;
+
+      // Quiet textareas always grow based on their text content.
+      // Standard textareas also grow by default, unless an explicit height is set.
+
+      const input = inputRef.current;
+      const prevAlignment = input.style.alignSelf;
+      const prevOverflow = input.style.overflow;
+      // Firefox scroll position is lost when overflow: 'hidden' is applied so we skip applying it.
+      // The measure/applied height is also incorrect/reset if we turn on and off
+      // overflow: hidden in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1787062
+      const isFirefox = "MozAppearance" in input.style;
+      if (!isFirefox) {
+        input.style.overflow = "hidden";
+      }
+
+      input.style.alignSelf = "start";
+      input.style.height = "auto";
+
+      // offsetHeight - clientHeight accounts for the border/padding.
+      input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;
+
+      input.style.overflow = prevOverflow;
+      input.style.alignSelf = prevAlignment;
+    }, [inputRef, otherProps.style?.height, autoresize]);
+
+    useLayoutEffect(() => {
+      if (inputRef.current) {
+        onHeightChange();
+      }
+    }, [onHeightChange, textFieldContext.value, inputRef]);
+
+    return (
+      <TextField.Textarea
+        ref={composeRefs(inputRef, ref)}
+        {...mergedProps}
+        className={clsx(classNames.value, className)}
+      />
+    );
+  },
+);
+TextFieldTextarea.displayName = "TextFieldTextarea";

package/src/components/TextField/index.ts

@@ -0,0 +1,23 @@
+export {
+  TextFieldRoot,
+  TextFieldInput,
+  TextFieldTextarea,
+  TextFieldPrefixIcon,
+  TextFieldPrefixText,
+  TextFieldSuffixIcon,
+  TextFieldSuffixText,
+  type TextFieldRootProps,
+  type TextFieldInputProps,
+  type TextFieldTextareaProps,
+  type TextFieldPrefixIconProps,
+  type TextFieldPrefixTextProps,
+  type TextFieldSuffixIconProps,
+  type TextFieldSuffixTextProps,
+} from "./TextField";
+
+export {
+  useTextFieldWithGraphemes,
+  type UseTextFieldWithGraphemesParams,
+} from "./useTextFieldWithGraphemes";
+
+export * as TextField from "./TextField.namespace";

package/src/components/TextField/memoize.ts

@@ -0,0 +1,14 @@
+export function memoize<Arg, Result>(fn: (arg: Arg) => Result): (arg: Arg) => Result {
+  const cache = new Map<Arg, Result>();
+
+  return (arg: Arg) => {
+    if (cache.has(arg)) {
+      return cache.get(arg) as Result;
+    }
+
+    const result = fn(arg);
+    cache.set(arg, result);
+
+    return result;
+  };
+}