@seed-design/react 1.0.7 → 1.1.0

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

@@ -0,0 +1,260 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup, render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+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";
+
+afterEach(cleanup);
+
+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" />
+          </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 />
+            </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" />
+            </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" />
+            </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 = vi.fn();
+        const { getByRole, user } = setUp(
+          <TextFieldRoot onValueChange={handleChange}>
+            <TextFieldInput />
+          </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 />
+            </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" />
+          </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 />
+            </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" />
+            </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" />
+            </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 = vi.fn();
+        const { getByRole, user } = setUp(
+          <TextFieldRoot onValueChange={handleChange}>
+            <TextFieldTextarea />
+          </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 />
+            </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 />
+            <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

@@ -1,7 +1,8 @@
 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 { textField, type TextFieldVariantProps } from "@seed-design/css/recipes/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";
@@ -9,74 +10,27 @@ 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(textField);
-const withStateProps = createWithStateProps([useTextFieldContext]);
+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 TextFieldVariantProps, TextField.RootProps {}
+export interface TextFieldRootProps extends TextInputVariantProps, TextField.RootProps {}
 
 export const TextFieldRoot = withProvider<HTMLDivElement, TextFieldRootProps>(
-  TextField.Root,
+  withFieldStateProps(TextField.Root),
   "root",
 );
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface TextFieldHeaderProps
-  extends PrimitiveProps,
-    React.HTMLAttributes<HTMLDivElement> {}
-
-export const TextFieldHeader = withContext<HTMLDivElement, TextFieldHeaderProps>(
-  withStateProps(Primitive.div),
-  "header",
-);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-export interface TextFieldLabelProps extends TextField.LabelProps {}
-
-export const TextFieldLabel = withContext<HTMLLabelElement, TextFieldLabelProps>(
-  TextField.Label,
-  "label",
-);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-export interface TextFieldIndicatorProps
-  extends PrimitiveProps,
-    React.HTMLAttributes<HTMLSpanElement> {}
-
-export const TextFieldIndicator = forwardRef<HTMLSpanElement, TextFieldIndicatorProps>(
-  (props, ref) => {
-    const { className, ...otherProps } = props;
-    const classNames = useClassNames();
-
-    return (
-      <>
-        <Primitive.span> </Primitive.span>
-        <Primitive.span
-          ref={ref}
-          className={clsx(classNames.indicator, className)}
-          {...otherProps}
-        />
-      </>
-    );
-  },
-);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-export interface TextFieldFieldProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
-
-export const TextFieldField = withContext<HTMLDivElement, TextFieldFieldProps>(
-  withStateProps(Primitive.div),
-  "field",
-);
-
-////////////////////////////////////////////////////////////////////////////////////
-
 export interface TextFieldPrefixIconProps extends InternalIconProps {}
 
 export const TextFieldPrefixIcon = withContext<SVGSVGElement, TextFieldPrefixIconProps>(
@@ -84,8 +38,6 @@ export const TextFieldPrefixIcon = withContext<SVGSVGElement, TextFieldPrefixIco
   "prefixIcon",
 );
 
-////////////////////////////////////////////////////////////////////////////////////
-
 export interface TextFieldPrefixTextProps
   extends PrimitiveProps,
     React.HTMLAttributes<HTMLSpanElement> {}
@@ -95,8 +47,6 @@ export const TextFieldPrefixText = withContext<HTMLSpanElement, TextFieldPrefixT
   "prefixText",
 );
 
-////////////////////////////////////////////////////////////////////////////////////
-
 export interface TextFieldSuffixIconProps extends InternalIconProps {}
 
 export const TextFieldSuffixIcon = withContext<SVGSVGElement, TextFieldSuffixIconProps>(
@@ -104,8 +54,6 @@ export const TextFieldSuffixIcon = withContext<SVGSVGElement, TextFieldSuffixIco
   "suffixIcon",
 );
 
-////////////////////////////////////////////////////////////////////////////////////
-
 export interface TextFieldSuffixTextProps
   extends PrimitiveProps,
     React.HTMLAttributes<HTMLSpanElement> {}
@@ -119,12 +67,37 @@ export const TextFieldSuffixText = withContext<HTMLSpanElement, TextFieldSuffixT
 
 export interface TextFieldInputProps extends TextField.InputProps {}
 
-export const TextFieldInput = withContext<HTMLInputElement, TextFieldInputProps>(
-  TextField.Input,
-  "value",
-);
+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 {
   /**
@@ -135,10 +108,29 @@ export interface TextFieldTextareaProps extends TextField.TextareaProps {
 }
 
 export const TextFieldTextarea = forwardRef<HTMLTextAreaElement, TextFieldTextareaProps>(
-  (props, ref) => {
-    const { className, autoresize = true, ...otherProps } = props;
+  ({ className, autoresize = true, ...otherProps }, ref) => {
     const classNames = useClassNames();
-    const { value } = useTextFieldContext();
+    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);
@@ -176,83 +168,15 @@ export const TextFieldTextarea = forwardRef<HTMLTextAreaElement, TextFieldTextar
       if (inputRef.current) {
         onHeightChange();
       }
-    }, [onHeightChange, value, inputRef]);
+    }, [onHeightChange, textFieldContext.value, inputRef]);
 
     return (
       <TextField.Textarea
         ref={composeRefs(inputRef, ref)}
-        {...otherProps}
+        {...mergedProps}
         className={clsx(classNames.value, className)}
       />
     );
   },
 );
-
-////////////////////////////////////////////////////////////////////////////////////
-
-export interface TextFieldFooterProps
-  extends PrimitiveProps,
-    React.HTMLAttributes<HTMLDivElement> {}
-
-export const TextFieldFooter = withContext<HTMLDivElement, TextFieldFooterProps>(
-  withStateProps(Primitive.div),
-  "footer",
-);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-export interface TextFieldDescriptionProps extends TextField.DescriptionProps {}
-
-export const TextFieldDescription = withContext<HTMLSpanElement, TextFieldDescriptionProps>(
-  TextField.Description,
-  "description",
-);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-export interface TextFieldErrorMessageProps extends TextField.ErrorMessageProps {}
-
-export const TextFieldErrorMessage = withContext<HTMLSpanElement, TextFieldErrorMessageProps>(
-  TextField.ErrorMessage,
-  "errorMessage",
-);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-export interface TextFieldErrorIconProps extends InternalIconProps {}
-
-export const TextFieldErrorIcon = withContext<SVGSVGElement, TextFieldErrorIconProps>(
-  withStateProps(InternalIcon),
-  "errorIcon",
-);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-export interface TextFieldCharacterCountAreaProps
-  extends PrimitiveProps,
-    React.HTMLAttributes<HTMLDivElement> {}
-
-export const TextFieldCharacterCountArea = withContext<
-  HTMLDivElement,
-  TextFieldCharacterCountAreaProps
->(withStateProps(Primitive.div), "characterCountArea");
-
-////////////////////////////////////////////////////////////////////////////////////
-
-export interface TextFieldCharacterCountProps extends TextField.GraphemeCountProps {}
-
-export const TextFieldCharacterCount = withContext<HTMLDivElement, TextFieldCharacterCountProps>(
-  TextField.GraphemeCount,
-  "characterCount",
-);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-export interface TextFieldMaxCharacterCountProps
-  extends PrimitiveProps,
-    React.HTMLAttributes<HTMLSpanElement> {}
-
-export const TextFieldMaxCharacterCount = withContext<
-  HTMLSpanElement,
-  TextFieldMaxCharacterCountProps
->(withStateProps(Primitive.span), "maxCharacterCount");
+TextFieldTextarea.displayName = "TextFieldTextarea";

package/src/components/TextField/index.ts

@@ -1,40 +1,23 @@
 export {
-  TextFieldCharacterCount,
-  TextFieldCharacterCountArea,
-  TextFieldDescription,
-  TextFieldErrorIcon,
-  TextFieldErrorMessage,
-  TextFieldField,
-  TextFieldFooter,
-  TextFieldHeader,
-  TextFieldIndicator,
+  TextFieldRoot,
   TextFieldInput,
   TextFieldTextarea,
-  TextFieldLabel,
-  TextFieldMaxCharacterCount,
   TextFieldPrefixIcon,
   TextFieldPrefixText,
-  TextFieldRoot,
   TextFieldSuffixIcon,
   TextFieldSuffixText,
-  type TextFieldCharacterCountAreaProps,
-  type TextFieldCharacterCountProps,
-  type TextFieldDescriptionProps,
-  type TextFieldErrorIconProps,
-  type TextFieldErrorMessageProps,
-  type TextFieldFieldProps,
-  type TextFieldFooterProps,
-  type TextFieldHeaderProps,
-  type TextFieldIndicatorProps,
+  type TextFieldRootProps,
   type TextFieldInputProps,
   type TextFieldTextareaProps,
-  type TextFieldLabelProps,
-  type TextFieldMaxCharacterCountProps,
   type TextFieldPrefixIconProps,
   type TextFieldPrefixTextProps,
-  type TextFieldRootProps,
   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;
+  };
+}