@seed-design/lynx-react 0.3.0 → 0.4.0

package/src/components/TextField/context.ts

@@ -0,0 +1,33 @@
+import * as React from "@lynx-js/react";
+import type { NodesRef } from "@lynx-js/types";
+
+/** iOS와 Android의 32비트 `maxlength` setter에서 사용하는 무제한 센티널. */
+export const NATIVE_TEXT_MAX_LENGTH_UNLIMITED = 2_147_483_647;
+
+export interface TextFieldContextValue {
+  rootRef: React.RefObject<NodesRef | null>;
+  value: string;
+  /** @internal controlled 입력의 native value 조정 여부를 판별한다. */
+  controlled: boolean;
+  nativeInsertionMaxLength?: number;
+  disabled: boolean;
+  invalid: boolean;
+  readOnly: boolean;
+  required: boolean;
+  name?: string;
+  focused: boolean;
+  setValue: (value: string) => void;
+  setFocused: (focused: boolean) => void;
+}
+
+export const TextFieldContext = React.createContext<TextFieldContextValue | null>(null);
+
+export function useTextFieldContext(): TextFieldContextValue {
+  const context = React.useContext(TextFieldContext);
+
+  if (!context) {
+    throw new Error("TextField compound components must be rendered inside <TextField.Root>.");
+  }
+
+  return context;
+}

package/src/components/TextField/index.ts

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

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

@@ -0,0 +1,80 @@
+import { act, renderHook } from "@lynx-js/react/testing-library";
+import { describe, expect, it, vi } from "vitest";
+
+import { NATIVE_TEXT_MAX_LENGTH_UNLIMITED } from "./context";
+import { useTextFieldWithGraphemes } from "./useTextFieldWithGraphemes";
+
+describe("useTextFieldWithGraphemes", () => {
+  it("counts extended grapheme clusters", () => {
+    const { result } = renderHook(() =>
+      useTextFieldWithGraphemes({ defaultValue: "👨‍👩‍👧‍👦🏳️‍🌈é" }),
+    );
+
+    expect(result.current.graphemes).toEqual(["👨‍👩‍👧‍👦", "🏳️‍🌈", "é"]);
+    expect(result.current.counterProps).toEqual({ current: 3, max: 0 });
+  });
+
+  it("reports the original and grapheme-sliced values", () => {
+    const onValueChange = vi.fn();
+    const { result } = renderHook(() =>
+      useTextFieldWithGraphemes({ maxGraphemeCount: 2, onValueChange }),
+    );
+
+    act(() => {
+      result.current.textFieldRootProps.onValueChange("A👨‍👩‍👧‍👦B");
+    });
+
+    expect(onValueChange).toHaveBeenCalledWith({
+      value: "A👨‍👩‍👧‍👦B",
+      graphemes: ["A", "👨‍👩‍👧‍👦", "B"],
+      slicedValue: "A👨‍👩‍👧‍👦",
+      slicedGraphemes: ["A", "👨‍👩‍👧‍👦"],
+    });
+    expect(result.current.counterProps).toEqual({ current: 3, max: 2 });
+  });
+
+  it("keeps a controlled value fixed", () => {
+    const onValueChange = vi.fn();
+    const { result } = renderHook(() =>
+      useTextFieldWithGraphemes({ value: "고정", onValueChange }),
+    );
+
+    act(() => {
+      result.current.textFieldRootProps.onValueChange("변경");
+    });
+
+    expect(result.current.textFieldRootProps.value).toBe("고정");
+    expect(onValueChange).toHaveBeenCalledOnce();
+  });
+
+  it("leaves native insertion maxlength unmanaged without a grapheme limit", () => {
+    const { result } = renderHook(() => useTextFieldWithGraphemes({ defaultValue: "제한 없음" }));
+
+    expect(result.current.textFieldRootProps.nativeInsertionMaxLength).toBeUndefined();
+  });
+
+  it("provides a UTF-16 native insertion cap only at the grapheme limit", () => {
+    const family = "👨‍👩‍👧‍👦";
+    const { result, rerender } = renderHook(
+      ({ value }: { value: string }) => useTextFieldWithGraphemes({ value, maxGraphemeCount: 2 }),
+      { initialProps: { value: family } },
+    );
+
+    expect(result.current.textFieldRootProps.nativeInsertionMaxLength).toBe(
+      NATIVE_TEXT_MAX_LENGTH_UNLIMITED,
+    );
+
+    const valueAtLimit = `${family}A`;
+    rerender({ value: valueAtLimit });
+
+    expect(result.current.graphemes).toEqual([family, "A"]);
+    expect(result.current.textFieldRootProps.nativeInsertionMaxLength).toBe(valueAtLimit.length);
+    expect(result.current.textFieldRootProps.nativeInsertionMaxLength).toBeGreaterThan(2);
+
+    rerender({ value: "A" });
+
+    expect(result.current.textFieldRootProps.nativeInsertionMaxLength).toBe(
+      NATIVE_TEXT_MAX_LENGTH_UNLIMITED,
+    );
+  });
+});

package/src/components/TextField/useTextFieldWithGraphemes.ts

@@ -0,0 +1,78 @@
+import * as React from "@lynx-js/react";
+import { splitGraphemes } from "unicode-segmenter/grapheme";
+
+import { NATIVE_TEXT_MAX_LENGTH_UNLIMITED } from "./context";
+
+export interface UseTextFieldWithGraphemesParams {
+  maxGraphemeCount?: number;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (values: {
+    value: string;
+    graphemes: string[];
+    slicedValue: string;
+    slicedGraphemes: string[];
+  }) => void;
+}
+
+let cachedValue = "";
+let cachedGraphemes: string[] = [];
+
+function getGraphemes(value: string): string[] {
+  if (value === cachedValue) return cachedGraphemes;
+
+  cachedValue = value;
+  cachedGraphemes = Array.from(splitGraphemes(value));
+  return cachedGraphemes;
+}
+
+export function useTextFieldWithGraphemes({
+  maxGraphemeCount,
+  value: controlledValue,
+  defaultValue = "",
+  onValueChange,
+}: UseTextFieldWithGraphemesParams) {
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+  const isControlled = controlledValue !== undefined;
+  const value = isControlled ? controlledValue : uncontrolledValue;
+  const graphemes = React.useMemo(() => getGraphemes(value), [value]);
+
+  const handleValueChange = React.useCallback(
+    (nextValue: string) => {
+      "background only";
+
+      const nextGraphemes = getGraphemes(nextValue);
+      const slicedGraphemes =
+        maxGraphemeCount === undefined ? nextGraphemes : nextGraphemes.slice(0, maxGraphemeCount);
+
+      if (!isControlled) {
+        setUncontrolledValue(nextValue);
+      }
+      onValueChange?.({
+        value: nextValue,
+        graphemes: nextGraphemes,
+        slicedValue: slicedGraphemes.join(""),
+        slicedGraphemes,
+      });
+    },
+    [isControlled, maxGraphemeCount, onValueChange],
+  );
+
+  return {
+    textFieldRootProps: {
+      value,
+      onValueChange: handleValueChange,
+      nativeInsertionMaxLength:
+        maxGraphemeCount === undefined
+          ? undefined
+          : graphemes.length >= maxGraphemeCount
+            ? value.length
+            : NATIVE_TEXT_MAX_LENGTH_UNLIMITED,
+    },
+    counterProps: {
+      current: graphemes.length,
+      max: maxGraphemeCount ?? 0,
+    },
+    graphemes,
+  };
+}

package/src/components/index.ts

@@ -4,10 +4,13 @@ export * from "./Badge";
 export * from "./Box";
 export * from "./BottomSheet";
 export * from "./Checkbox";
+export * from "./Field";
 export * from "./Icon";
+export * from "./KeyboardAvoidingScrollView";
 export * from "./ProgressCircle";
 export * from "./RadioGroup";
 export * from "./Stack";
 export * from "./Switch";
 export * from "./TagGroup";
 export * from "./Text";
+export * from "./TextField";

package/src/utils/create-slot-recipe-context.test.tsx

@@ -29,6 +29,7 @@ const mockSlotRecipe = Object.assign(
 type MockProps = {
   children?: unknown;
   className?: string;
+  active?: boolean;
 };
 
 type MockReceived = { props?: MockProps };
@@ -93,4 +94,54 @@ describe("createSlotRecipeContext", () => {
     expect(rootReceived.props?.className).toBe("root-a extra");
     expect(childReceived.props?.className).toBe("label-a child-extra");
   });
+
+  it("restores root default props overwritten with undefined", () => {
+    const { Mock: Root, received } = createMock("Root");
+    const { withRootProvider } = createSlotRecipeContext(mockSlotRecipe);
+    const StyledRoot = withRootProvider<MockVariantProps & MockProps>(Root, {
+      defaultProps: { active: true },
+    });
+
+    render(<StyledRoot active={undefined} />);
+
+    expect(received.props?.active).toBe(true);
+  });
+
+  it("restores provider default props overwritten with undefined", () => {
+    const { Mock: Root, received } = createMock("Root");
+    const { withProvider } = createSlotRecipeContext(mockSlotRecipe);
+    const StyledRoot = withProvider<{ tag: "mock" }, MockVariantProps & MockProps>(Root, "root", {
+      defaultProps: { active: true },
+    });
+
+    render(<StyledRoot active={undefined} />);
+
+    expect(received.props?.active).toBe(true);
+  });
+
+  it("restores context default props overwritten with undefined and preserves false", () => {
+    const { Mock: Root } = createMock("Root");
+    const { Mock: Child, received } = createMock("Child");
+    const { withRootProvider, withContext } = createSlotRecipeContext(mockSlotRecipe);
+    const StyledRoot = withRootProvider<MockVariantProps & MockProps>(Root);
+    const StyledChild = withContext<{ tag: "mock" }, MockProps>(Child, "label", {
+      defaultProps: { active: true },
+    });
+
+    const { rerender } = render(
+      <StyledRoot>
+        <StyledChild active={undefined} />
+      </StyledRoot>,
+    );
+
+    expect(received.props?.active).toBe(true);
+
+    rerender(
+      <StyledRoot>
+        <StyledChild active={false} />
+      </StyledRoot>,
+    );
+
+    expect(received.props?.active).toBe(false);
+  });
 });

package/src/utils/create-slot-recipe-context.tsx

@@ -24,6 +24,20 @@ function assertNotIntrinsicComponent(Component: ElementType<any>, caller: string
   );
 }
 
+function restoreDefaultProps<P>(
+  props: Record<string, unknown>,
+  defaultProps: Partial<P> | undefined,
+) {
+  if (!defaultProps) return;
+
+  // Explicit `undefined` should not override component-level defaults.
+  for (const key of Object.keys(defaultProps)) {
+    if (props[key] === undefined) {
+      props[key] = defaultProps[key as keyof P];
+    }
+  }
+}
+
 export function createSlotRecipeContext<
   Props extends Record<string, string | boolean | undefined>,
   Classnames extends Record<string, string>,
@@ -93,6 +107,9 @@ export function createSlotRecipeContext<
     const StyledComponent = (innerProps: any) => {
       const props = { ...(defaultProps ?? {}), ...useProps(), ...innerProps } as Props &
         Record<string, unknown>;
+
+      restoreDefaultProps(props, defaultProps);
+
       const [variantProps, otherProps] = recipe.splitVariantProps(props);
       const classNames = recipe(variantProps);
 
@@ -123,6 +140,9 @@ export function createSlotRecipeContext<
 
     const StyledComponent = forwardRef<any, any>((innerProps, ref) => {
       const props: any = { ...(defaultProps ?? {}), ...useProps(), ...innerProps };
+
+      restoreDefaultProps(props, defaultProps);
+
       const [variantProps, otherProps] = recipe.splitVariantProps(props as Props);
       const classNames = recipe(variantProps);
       const slotClassName: string | undefined = classNames[slot];
@@ -158,6 +178,9 @@ export function createSlotRecipeContext<
 
     const StyledComponent = forwardRef<any, any>((innerProps, ref) => {
       const props: any = { ...(defaultProps ?? {}), ...innerProps };
+
+      restoreDefaultProps(props, defaultProps);
+
       const classNames = useClassNames();
       const slotClassName: string | undefined = slot ? classNames[slot] : undefined;
       const userClassName: string | undefined = props["className"];