@seed-design/react 1.2.15 → 2.0.1

package/src/components/AttachmentInput/AttachmentInput.test.tsx

@@ -0,0 +1,161 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "bun:test";
+import type { ReactElement } from "react";
+
+import { Field } from "@seed-design/react-field";
+import { AttachmentInputRoot, AttachmentInputHiddenInput } from "./AttachmentInput";
+
+function setUp(jsx: ReactElement) {
+  return render(jsx);
+}
+
+describe("AttachmentInput", () => {
+  describe("props merging", () => {
+    describe("AttachmentInputHiddenInput", () => {
+      it("should merge props from AttachmentInputRoot", () => {
+        const { getByTestId } = setUp(
+          <AttachmentInputRoot name="attachment">
+            <AttachmentInputHiddenInput data-testid="hidden-input" />
+          </AttachmentInputRoot>,
+        );
+
+        const input = getByTestId("hidden-input") as HTMLInputElement;
+        expect(input.getAttribute("name")).toBe("attachment");
+        expect(input.getAttribute("type")).toBe("file");
+      });
+
+      it("should merge props from Field context", () => {
+        const { getByTestId } = setUp(
+          <Field.Root required invalid disabled name="field-attachment">
+            <AttachmentInputRoot>
+              <AttachmentInputHiddenInput data-testid="hidden-input" />
+            </AttachmentInputRoot>
+          </Field.Root>,
+        );
+
+        const input = getByTestId("hidden-input") as HTMLInputElement;
+        expect(input.getAttribute("name")).toBe("field-attachment");
+        expect(input.getAttribute("aria-required")).toBe("true");
+        expect(input.getAttribute("aria-invalid")).toBe("true");
+        expect(input).toBeDisabled();
+      });
+
+      it("should prioritize direct props over context props", () => {
+        const { getByTestId } = setUp(
+          <Field.Root name="field-name">
+            <AttachmentInputRoot>
+              <AttachmentInputHiddenInput name="direct-name" data-testid="hidden-input" />
+            </AttachmentInputRoot>
+          </Field.Root>,
+        );
+
+        const input = getByTestId("hidden-input") as HTMLInputElement;
+        expect(input.getAttribute("name")).toBe("direct-name");
+      });
+
+      it("should get id from Field context", () => {
+        const { getByTestId } = setUp(
+          <Field.Root>
+            <AttachmentInputRoot>
+              <AttachmentInputHiddenInput data-testid="hidden-input" />
+            </AttachmentInputRoot>
+          </Field.Root>,
+        );
+
+        const input = getByTestId("hidden-input") as HTMLInputElement;
+        expect(input.getAttribute("id")).toBeTruthy();
+        expect(input.getAttribute("id")).toContain("field:");
+      });
+
+      it("should have no id without Field context", () => {
+        const { getByTestId } = setUp(
+          <AttachmentInputRoot>
+            <AttachmentInputHiddenInput data-testid="hidden-input" />
+          </AttachmentInputRoot>,
+        );
+
+        const input = getByTestId("hidden-input") as HTMLInputElement;
+        expect(input.getAttribute("id")).toBeNull();
+      });
+
+      it("should connect aria-describedby when Field has Description", () => {
+        const { getByTestId } = setUp(
+          <Field.Root>
+            <AttachmentInputRoot>
+              <AttachmentInputHiddenInput data-testid="hidden-input" />
+            </AttachmentInputRoot>
+            <Field.Description>Upload your files</Field.Description>
+          </Field.Root>,
+        );
+
+        const input = getByTestId("hidden-input") as HTMLInputElement;
+        expect(input.getAttribute("aria-describedby")).toBeTruthy();
+      });
+
+      it("should connect aria-describedby when Field has ErrorMessage", () => {
+        const { getByTestId } = setUp(
+          <Field.Root invalid>
+            <AttachmentInputRoot>
+              <AttachmentInputHiddenInput data-testid="hidden-input" />
+            </AttachmentInputRoot>
+            <Field.ErrorMessage>File too large</Field.ErrorMessage>
+          </Field.Root>,
+        );
+
+        const input = getByTestId("hidden-input") as HTMLInputElement;
+        expect(input.getAttribute("aria-describedby")).toBeTruthy();
+      });
+    });
+
+    describe("Complex prop merging scenarios", () => {
+      it("should handle nested Field and AttachmentInput contexts", () => {
+        const { getByTestId } = setUp(
+          <Field.Root required name="attachment" invalid>
+            <Field.Label>Attachment</Field.Label>
+            <AttachmentInputRoot>
+              <AttachmentInputHiddenInput data-testid="hidden-input" />
+            </AttachmentInputRoot>
+            <Field.Description>Max 10MB</Field.Description>
+          </Field.Root>,
+        );
+
+        const input = getByTestId("hidden-input") as HTMLInputElement;
+        expect(input.getAttribute("name")).toBe("attachment");
+        expect(input.getAttribute("aria-required")).toBe("true");
+        expect(input.getAttribute("aria-invalid")).toBe("true");
+        expect(input.getAttribute("aria-describedby")).toBeTruthy();
+      });
+
+      it("should let Field disabled override AttachmentInput enabled", () => {
+        const { getByTestId } = setUp(
+          <Field.Root disabled>
+            <AttachmentInputRoot>
+              <AttachmentInputHiddenInput data-testid="hidden-input" />
+            </AttachmentInputRoot>
+          </Field.Root>,
+        );
+
+        const input = getByTestId("hidden-input") as HTMLInputElement;
+        expect(input).toBeDisabled();
+      });
+
+      it("should not put aria-readonly on the hidden input even when Field is read-only", () => {
+        // aria-readonly is invalid on <input type="file"> per ARIA 1.2 — it's only valid on
+        // textbox/spinbutton/checkbox/switch/slider/etc. Field spreads aria-readonly to every
+        // child input, so AttachmentInputHiddenInput has to strip it.
+        const { getByTestId } = setUp(
+          <Field.Root readOnly>
+            <AttachmentInputRoot>
+              <AttachmentInputHiddenInput data-testid="hidden-input" />
+            </AttachmentInputRoot>
+          </Field.Root>,
+        );
+
+        const input = getByTestId("hidden-input") as HTMLInputElement;
+        expect(input.getAttribute("aria-readonly")).toBeNull();
+        // hidden input itself stays enabled so the form value is preserved when read-only
+        expect(input.disabled).toBe(false);
+      });
+    });
+  });
+});

package/src/components/AttachmentInput/AttachmentInput.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import * as React from "react";
+import {
+  attachmentInput,
+  type AttachmentInputVariantProps,
+} from "@seed-design/css/recipes/attachment-input";
+import {
+  FileUpload as FileUploadPrimitive,
+  useFileUploadContext,
+} from "@seed-design/react-file-upload";
+
+import { useFieldContext } from "@seed-design/react-field";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { mergeProps } from "@seed-design/dom-utils";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+
+export const { withProvider, withContext } = createSlotRecipeContext(attachmentInput);
+
+const withStateProps = createWithStateProps([useFileUploadContext]);
+
+export interface AttachmentInputRootProps
+  extends AttachmentInputVariantProps,
+    FileUploadPrimitive.RootProps {}
+
+export const AttachmentInputRoot = withProvider<HTMLDivElement, AttachmentInputRootProps>(
+  FileUploadPrimitive.Root,
+  "root",
+);
+
+export interface AttachmentInputContainerProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const AttachmentInputContainer = withContext<HTMLDivElement, AttachmentInputContainerProps>(
+  withStateProps(Primitive.div),
+  "container",
+);
+
+export interface AttachmentInputHiddenInputProps extends FileUploadPrimitive.HiddenInputProps {}
+
+export const AttachmentInputHiddenInput = React.forwardRef<
+  HTMLInputElement,
+  AttachmentInputHiddenInputProps
+>((props, ref) => {
+  const fileUploadContext = useFileUploadContext();
+  const fieldContext = useFieldContext({ strict: false });
+
+  const mergedProps = mergeProps(
+    fieldContext ? fieldContext.inputAriaAttributes : {},
+    fileUploadContext.hiddenInputProps,
+    fieldContext ? fieldContext.inputProps : {},
+    props,
+  );
+
+  // aria-readonly is invalid on <input type="file"> per ARIA 1.2 (only valid on
+  // textbox/spinbutton/checkbox/switch/slider/etc), but Field spreads it onto every
+  // child input. Strip it here so we keep Field's other aria attributes intact.
+  const { "aria-readonly": _ariaReadOnly, ...rest } = mergedProps;
+
+  return <FileUploadPrimitive.HiddenInput ref={ref} {...rest} />;
+});
+AttachmentInputHiddenInput.displayName = "AttachmentInputHiddenInput";
+
+export interface AttachmentInputItemGroupProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLUListElement> {}
+
+export const AttachmentInputItemGroup = withContext<
+  HTMLUListElement,
+  AttachmentInputItemGroupProps
+>(withStateProps(Primitive.ul), "itemGroup");
+
+export interface AttachmentInputContextProps extends FileUploadPrimitive.ContextProps {}
+
+export const AttachmentInputContext = FileUploadPrimitive.Context;

package/src/components/AttachmentInput/AttachmentInputDropzone.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import type * as React from "react";
+import { FileUpload as FileUploadPrimitive } from "@seed-design/react-file-upload";
+
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { withContext } from "./AttachmentInput";
+
+export interface AttachmentInputDropzoneProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const AttachmentInputDropzone = withContext<HTMLDivElement, AttachmentInputDropzoneProps>(
+  FileUploadPrimitive.Dropzone,
+  "dropzone",
+);
+
+export interface AttachmentInputDropzoneLabelProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const AttachmentInputDropzoneLabel = withContext<
+  HTMLDivElement,
+  AttachmentInputDropzoneLabelProps
+>(Primitive.div, "dropzoneLabel");

package/src/components/AttachmentInput/AttachmentInputItem.tsx

@@ -0,0 +1,246 @@
+"use client";
+
+import * as React from "react";
+import {
+  attachmentInputItem,
+  type AttachmentInputItemVariantProps,
+} from "@seed-design/css/recipes/attachment-input-item";
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import { dataAttr } from "@seed-design/dom-utils";
+import {
+  FileUpload as FileUploadPrimitive,
+  FileUploadItemProvider,
+  useFileUploadContext,
+  useFileUploadItem,
+  useFileUploadItemContext,
+  type FileEntry,
+  splitFileName,
+} from "@seed-design/react-file-upload";
+import { MiddleTruncate } from "@seed-design/react-middle-truncate";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import clsx from "clsx";
+import { createRenderTrackingContext } from "../../utils/createRenderTrackingContext";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+
+const { useClassNames, ClassNamesProvider, withContext } =
+  createSlotRecipeContext(attachmentInputItem);
+
+const overlayTracker = createRenderTrackingContext("AttachmentInputItemOverlay");
+
+export interface AttachmentInputItemProps
+  extends AttachmentInputItemVariantProps,
+    PrimitiveProps,
+    React.LiHTMLAttributes<HTMLLIElement> {
+  fileEntry: FileEntry;
+}
+
+export const AttachmentInputItem = React.forwardRef<HTMLLIElement, AttachmentInputItemProps>(
+  ({ className, fileEntry, ...props }, ref) => {
+    const { acceptType, stateProps } = useFileUploadContext();
+    const api = useFileUploadItem(fileEntry);
+
+    const [variantProps, otherProps] = attachmentInputItem.splitVariantProps({
+      type: acceptType,
+      ...props,
+    });
+
+    const classNames = attachmentInputItem(variantProps);
+
+    return (
+      <ClassNamesProvider value={classNames}>
+        <FileUploadItemProvider value={api}>
+          <overlayTracker.Provider>
+            <Primitive.li
+              ref={ref}
+              className={clsx(classNames.root, className)}
+              {...stateProps}
+              {...otherProps}
+            />
+          </overlayTracker.Provider>
+        </FileUploadItemProvider>
+      </ClassNamesProvider>
+    );
+  },
+);
+AttachmentInputItem.displayName = "AttachmentInputItem";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AttachmentInputItemNameProps
+  extends PrimitiveProps,
+    FileUploadPrimitive.ItemNameProps {}
+
+export const AttachmentInputItemName = React.forwardRef<
+  HTMLSpanElement,
+  AttachmentInputItemNameProps
+>(({ className, children, ...props }, ref) => {
+  const classNames = useClassNames();
+  const { file } = useFileUploadItemContext();
+  const { extension } = splitFileName(file.name);
+
+  return (
+    <FileUploadPrimitive.ItemName ref={ref} className={clsx(classNames.name, className)} {...props}>
+      {children ?? (
+        <MiddleTruncate maxLines={2} {...{ end: extension.length }}>
+          {file.name}
+        </MiddleTruncate>
+      )}
+    </FileUploadPrimitive.ItemName>
+  );
+});
+AttachmentInputItemName.displayName = "AttachmentInputItemName";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AttachmentInputItemSizeProps extends FileUploadPrimitive.ItemSizeProps {}
+
+export const AttachmentInputItemSize = React.forwardRef<
+  HTMLSpanElement,
+  AttachmentInputItemSizeProps
+>(({ className, ...props }, ref) => {
+  const classNames = useClassNames();
+
+  return (
+    <FileUploadPrimitive.ItemSize
+      ref={ref}
+      className={clsx(classNames.size, className)}
+      {...props}
+    />
+  );
+});
+AttachmentInputItemSize.displayName = "AttachmentInputItemSize";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AttachmentInputItemRemoveButtonProps
+  extends FileUploadPrimitive.ItemRemoveButtonProps {}
+
+export const AttachmentInputItemRemoveButton = withContext<
+  HTMLButtonElement,
+  AttachmentInputItemRemoveButtonProps
+>(FileUploadPrimitive.ItemRemoveButton, "removeButton");
+
+export interface AttachmentInputItemImageProps extends FileUploadPrimitive.ItemImageProps {}
+
+export const AttachmentInputItemImage = withContext<
+  HTMLImageElement,
+  AttachmentInputItemImageProps
+>(FileUploadPrimitive.ItemImage, "image");
+
+export interface AttachmentInputItemThumbnailProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+// when actual thumbnail implementation happens, this will likely need a dedicated headless component
+export const AttachmentInputItemThumbnail = React.forwardRef<
+  HTMLDivElement,
+  AttachmentInputItemThumbnailProps
+>(({ className, ...props }, ref) => {
+  const classNames = useClassNames();
+  const { stateProps } = useFileUploadContext();
+  const { isRendered } = overlayTracker.useRenderTracking();
+
+  return (
+    <Primitive.div
+      ref={ref}
+      data-has-overlay={dataAttr(isRendered)}
+      {...stateProps}
+      className={clsx(classNames.thumbnail, className)}
+      {...props}
+    />
+  );
+});
+
+AttachmentInputItemThumbnail.displayName = "AttachmentInputItemThumbnail";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AttachmentInputItemBadgeProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const AttachmentInputItemBadge = React.forwardRef<
+  HTMLDivElement,
+  AttachmentInputItemBadgeProps
+>(({ className, children, ...props }, ref) => {
+  const classNames = useClassNames();
+
+  return (
+    <Primitive.div ref={ref} className={clsx(classNames.badge, className)} {...props}>
+      <Primitive.span className={classNames.badgeLabel}>{children}</Primitive.span>
+    </Primitive.div>
+  );
+});
+AttachmentInputItemBadge.displayName = "AttachmentInputItemBadge";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AttachmentInputItemActionButtonProps
+  extends PrimitiveProps,
+    React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export const AttachmentInputItemActionButton = React.forwardRef<
+  HTMLButtonElement,
+  AttachmentInputItemActionButtonProps
+>(({ className, ...props }, ref) => {
+  const classNames = useClassNames();
+
+  return (
+    <Primitive.button
+      type="button"
+      ref={ref}
+      className={clsx(classNames.actionButton, className)}
+      {...props}
+    />
+  );
+});
+AttachmentInputItemActionButton.displayName = "AttachmentInputItemActionButton";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AttachmentInputItemBackdropProps extends FileUploadPrimitive.ItemBackdropProps {}
+
+export const AttachmentInputItemBackdrop = React.forwardRef<
+  HTMLDivElement,
+  AttachmentInputItemBackdropProps
+>(({ className, ...props }, ref) => {
+  const classNames = useClassNames();
+  const { trackRef } = overlayTracker.useRenderTracking();
+
+  return (
+    <FileUploadPrimitive.ItemBackdrop
+      ref={composeRefs(ref, trackRef)}
+      className={clsx(classNames.backdrop, className)}
+      {...props}
+    />
+  );
+});
+
+AttachmentInputItemBackdrop.displayName = "AttachmentInputItemBackdrop";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AttachmentInputItemMetadataProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const AttachmentInputItemMetadata = React.forwardRef<
+  HTMLDivElement,
+  AttachmentInputItemMetadataProps
+>(({ className, ...props }, ref) => {
+  const classNames = useClassNames();
+  const { stateProps } = useFileUploadContext();
+  const { isRendered } = overlayTracker.useRenderTracking();
+
+  return (
+    <Primitive.div
+      ref={ref}
+      data-has-overlay={dataAttr(isRendered)}
+      {...stateProps}
+      className={clsx(classNames.metadata, className)}
+      {...props}
+    />
+  );
+});
+
+AttachmentInputItemMetadata.displayName = "AttachmentInputItemMetadata";

package/src/components/AttachmentInput/AttachmentInputTrigger.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import * as React from "react";
+import {
+  attachmentInputTrigger,
+  type AttachmentInputTriggerVariantProps,
+} from "@seed-design/css/recipes/attachment-input-trigger";
+import {
+  FileUpload as FileUploadPrimitive,
+  useFileUploadContext,
+  type FileAcceptType,
+} from "@seed-design/react-file-upload";
+
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { mergeProps } from "@seed-design/dom-utils";
+import clsx from "clsx";
+import { InternalIcon } from "../private/Icon";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+
+const { withProvider, useClassNames } = createSlotRecipeContext(attachmentInputTrigger);
+
+export interface AttachmentInputTriggerProps
+  extends AttachmentInputTriggerVariantProps,
+    PrimitiveProps,
+    React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export const AttachmentInputTrigger = withProvider<HTMLButtonElement, AttachmentInputTriggerProps>(
+  FileUploadPrimitive.Trigger,
+  "root",
+);
+
+export type AttachmentInputTriggerIconProps = React.SVGAttributes<SVGElement> & {
+  [K in NonNullable<FileAcceptType>]?: React.ReactNode;
+} & {
+  general: React.ReactNode;
+};
+
+export const AttachmentInputTriggerIcon = React.forwardRef<
+  SVGSVGElement,
+  AttachmentInputTriggerIconProps
+>(({ image, general, ...props }, ref) => {
+  const { acceptType, stateProps } = useFileUploadContext();
+  const classNames = useClassNames();
+
+  const mergedProps = mergeProps(
+    stateProps,
+    { className: classNames.icon },
+    props as React.HTMLAttributes<HTMLElement>,
+  );
+
+  // 이거 Icon으로 교체. classNames가 불필요해질 수 있음 (onlyIcon으로 대체)
+
+  if (acceptType === "image" && image) {
+    return <InternalIcon svg={image} ref={ref} {...mergedProps} />;
+  }
+
+  return <InternalIcon svg={general} ref={ref} {...mergedProps} />;
+});
+
+export interface AttachmentInputTriggerItemCountProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const AttachmentInputTriggerItemCount = React.forwardRef<
+  HTMLDivElement,
+  AttachmentInputTriggerItemCountProps
+>(({ className, ...otherProps }, ref) => {
+  const classNames = useClassNames();
+  const { currentFileEntryCount, maxFiles, stateProps } = useFileUploadContext();
+
+  return (
+    <Primitive.div className={clsx(classNames.itemCountArea, className)} ref={ref} {...otherProps}>
+      <span
+        {...(currentFileEntryCount === 0 && { "data-empty": true })}
+        className={classNames.itemCount}
+        {...stateProps}
+      >
+        {currentFileEntryCount}
+      </span>
+      <span className={classNames.maxItemCount} {...stateProps}>
+        /{maxFiles}
+      </span>
+    </Primitive.div>
+  );
+});

package/src/components/AttachmentInput/index.ts

@@ -0,0 +1,56 @@
+export {
+  AttachmentInputContainer,
+  AttachmentInputHiddenInput,
+  AttachmentInputItemGroup,
+  AttachmentInputRoot,
+  type AttachmentInputContainerProps,
+  type AttachmentInputHiddenInputProps,
+  type AttachmentInputItemGroupProps,
+  type AttachmentInputRootProps,
+} from "./AttachmentInput";
+
+export {
+  AttachmentInputContext,
+  type AttachmentInputContextProps,
+} from "./AttachmentInput";
+
+export {
+  AttachmentInputDropzone,
+  AttachmentInputDropzoneLabel,
+  type AttachmentInputDropzoneLabelProps,
+  type AttachmentInputDropzoneProps,
+} from "./AttachmentInputDropzone";
+
+export {
+  AttachmentInputItem,
+  AttachmentInputItemActionButton,
+  AttachmentInputItemBackdrop,
+  AttachmentInputItemBadge,
+  AttachmentInputItemImage,
+  AttachmentInputItemMetadata,
+  AttachmentInputItemName,
+  AttachmentInputItemRemoveButton,
+  AttachmentInputItemSize,
+  AttachmentInputItemThumbnail,
+  type AttachmentInputItemActionButtonProps,
+  type AttachmentInputItemBackdropProps,
+  type AttachmentInputItemBadgeProps,
+  type AttachmentInputItemImageProps,
+  type AttachmentInputItemMetadataProps,
+  type AttachmentInputItemNameProps,
+  type AttachmentInputItemProps,
+  type AttachmentInputItemRemoveButtonProps,
+  type AttachmentInputItemSizeProps,
+  type AttachmentInputItemThumbnailProps,
+} from "./AttachmentInputItem";
+
+export {
+  AttachmentInputTrigger,
+  AttachmentInputTriggerIcon,
+  AttachmentInputTriggerItemCount,
+  type AttachmentInputTriggerIconProps,
+  type AttachmentInputTriggerItemCountProps,
+  type AttachmentInputTriggerProps,
+} from "./AttachmentInputTrigger";
+
+export * as AttachmentInput from "./AttachmentInput.namespace";