@seed-design/react 2.1.0 → 2.2.0

package/src/components/TimePicker/TimePicker.test.tsx

@@ -0,0 +1,166 @@
+import { act, fireEvent, render } from "@testing-library/react";
+import { afterAll, beforeAll, describe, expect, it, jest, mock } from "bun:test";
+import { TimePicker } from "./TimePicker";
+
+describe("TimePicker", () => {
+  const originalScrollTo = HTMLElement.prototype.scrollTo;
+  const originalMatchMedia = window.matchMedia;
+  const originalRequestAnimationFrame = window.requestAnimationFrame;
+  const originalCancelAnimationFrame = window.cancelAnimationFrame;
+
+  beforeAll(() => {
+    HTMLElement.prototype.scrollTo = function scrollTo(options) {
+      if (typeof options === "object" && options.top !== undefined) {
+        this.scrollTop = options.top;
+      }
+    };
+    window.matchMedia = mock(() => ({
+      matches: false,
+      media: "",
+      onchange: null,
+      addListener: () => {},
+      removeListener: () => {},
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      dispatchEvent: () => false,
+    }));
+    window.requestAnimationFrame = (callback) => {
+      callback(0);
+      return 1;
+    };
+    window.cancelAnimationFrame = () => {};
+  });
+
+  afterAll(() => {
+    HTMLElement.prototype.scrollTo = originalScrollTo;
+    window.matchMedia = originalMatchMedia;
+    window.requestAnimationFrame = originalRequestAnimationFrame;
+    window.cancelAnimationFrame = originalCancelAnimationFrame;
+  });
+
+  it("기본 접근성 이름과 12시간제 컬럼을 제공한다", () => {
+    const { getByRole, getAllByRole } = render(
+      <TimePicker defaultValue={{ hour: 10, minute: 5 }} />,
+    );
+
+    expect(getByRole("group")).toHaveAccessibleName("시간 선택");
+    const columns = getAllByRole("spinbutton");
+    expect(columns.map((column) => column.getAttribute("aria-label"))).toEqual([
+      "오전/오후",
+      "시",
+      "분",
+    ]);
+    expect(columns.map((column) => column.getAttribute("aria-valuetext"))).toEqual([
+      "오전",
+      "10",
+      "05",
+    ]);
+  });
+
+  it("locale에 따라 컬럼 순서를 변경한다", () => {
+    const { getAllByRole, getByRole } = render(<TimePicker locale="en-US" />);
+
+    expect(getByRole("group")).toHaveAccessibleName("Select time");
+    expect(getAllByRole("spinbutton").map((column) => column.getAttribute("aria-label"))).toEqual([
+      "Hour",
+      "Minute",
+      "AM/PM",
+    ]);
+  });
+
+  it("일본어 locale에 맞는 기본 접근성 이름을 제공한다", () => {
+    const { getAllByRole, getByRole } = render(<TimePicker locale="ja-JP" />);
+
+    expect(getByRole("group")).toHaveAccessibleName("時刻を選択");
+    expect(getAllByRole("spinbutton").map((column) => column.getAttribute("aria-label"))).toEqual([
+      "午前/午後",
+      "時",
+      "分",
+    ]);
+  });
+
+  it("기본 접근성 이름을 명시적인 값으로 재정의한다", () => {
+    const { getAllByRole, getByRole } = render(
+      <TimePicker
+        locale="en-US"
+        aria-label="Appointment time"
+        periodAriaLabel="Period"
+        hourAriaLabel="Hours"
+        minuteAriaLabel="Minutes"
+      />,
+    );
+
+    expect(getByRole("group")).toHaveAccessibleName("Appointment time");
+    expect(getAllByRole("spinbutton").map((column) => column.getAttribute("aria-label"))).toEqual([
+      "Hours",
+      "Minutes",
+      "Period",
+    ]);
+  });
+
+  it("controlled minute도 가장 가까운 minuteStep으로 반올림한다", () => {
+    const { getAllByRole } = render(<TimePicker value={{ hour: 9, minute: 13 }} minuteStep={5} />);
+    const minuteColumn = getAllByRole("spinbutton")[2];
+
+    expect(minuteColumn).toHaveAttribute("aria-valuetext", "15");
+    expect(minuteColumn.querySelector('[data-wheel-picker-value="13"]')).toBeNull();
+  });
+
+  it("Wheel 정착 후 TimePickerValue를 전달한다", () => {
+    jest.useFakeTimers();
+    try {
+      const onValueChange = mock(() => {});
+      const { getAllByRole } = render(
+        <TimePicker
+          value={{ hour: 10, minute: 13 }}
+          minuteStep={10}
+          onValueChange={onValueChange}
+        />,
+      );
+      const hourColumn = getAllByRole("spinbutton")[1];
+
+      fireEvent.keyDown(hourColumn, { key: "ArrowDown" });
+      act(() => jest.advanceTimersByTime(120));
+
+      expect(onValueChange).toHaveBeenCalledWith({ hour: 11, minute: 10 });
+    } finally {
+      jest.useRealTimers();
+    }
+  });
+
+  it("Hour가 12시 경계를 지나면 Period를 부드럽게 전환한다", () => {
+    jest.useFakeTimers();
+    const previousScrollTo = HTMLElement.prototype.scrollTo;
+    const smoothScrolls: Array<{ element: HTMLElement; top: number }> = [];
+    try {
+      HTMLElement.prototype.scrollTo = function scrollTo(options) {
+        if (typeof options !== "object" || options.top === undefined) return;
+
+        this.scrollTop = options.top;
+        if (options.behavior === "smooth") {
+          smoothScrolls.push({ element: this, top: options.top });
+        }
+      };
+      const { getAllByRole } = render(<TimePicker defaultValue={{ hour: 11, minute: 0 }} />);
+      const [periodColumn, hourColumn] = getAllByRole("spinbutton");
+
+      fireEvent.keyDown(hourColumn, { key: "ArrowDown" });
+      act(() => jest.advanceTimersByTime(120));
+
+      expect(periodColumn).toHaveAttribute("aria-valuetext", "오후");
+      expect(smoothScrolls).toContainEqual({ element: periodColumn, top: 44 });
+    } finally {
+      HTMLElement.prototype.scrollTo = previousScrollTo;
+      jest.useRealTimers();
+    }
+  });
+
+  it("disabled는 컬럼을 tab 순서에서 제외한다", () => {
+    const { getAllByRole } = render(<TimePicker disabled />);
+
+    for (const column of getAllByRole("spinbutton")) {
+      expect(column).toHaveAttribute("aria-disabled", "true");
+      expect(column).toHaveAttribute("tabindex", "-1");
+    }
+  });
+});

package/src/components/TimePicker/TimePicker.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+import { timePicker } from "@seed-design/css/recipes/time-picker";
+import { useTimePicker, type UseTimePickerProps } from "@seed-design/react-time-picker";
+import clsx from "clsx";
+import * as React from "react";
+import {
+  InternalWheelPickerColumn,
+  InternalWheelPickerRoot,
+  type InternalWheelPickerRootProps,
+} from "../private/WheelPicker";
+
+const ITEM_SIZE = 44;
+const VISIBLE_ITEM_COUNT = 5;
+const DEFAULT_ARIA_LABELS = {
+  ko: {
+    root: "시간 선택",
+    period: "오전/오후",
+    hour: "시",
+    minute: "분",
+  },
+  en: {
+    root: "Select time",
+    period: "AM/PM",
+    hour: "Hour",
+    minute: "Minute",
+  },
+  ja: {
+    root: "時刻を選択",
+    period: "午前/午後",
+    hour: "時",
+    minute: "分",
+  },
+} as const;
+
+function getDefaultAriaLabels(locale: string | string[] | undefined) {
+  const [canonicalLocale = "ko-KR"] = Intl.getCanonicalLocales(locale ?? "ko-KR");
+  const language = new Intl.Locale(canonicalLocale).language;
+
+  if (language === "ko") return DEFAULT_ARIA_LABELS.ko;
+  if (language === "ja") return DEFAULT_ARIA_LABELS.ja;
+  return DEFAULT_ARIA_LABELS.en;
+}
+
+const classNames = timePicker();
+
+const columnClassNames = {
+  period: classNames.periodColumn,
+  hour: classNames.hourColumn,
+  minute: classNames.minuteColumn,
+};
+
+export interface TimePickerProps
+  extends UseTimePickerProps,
+    Omit<
+      InternalWheelPickerRootProps,
+      | keyof UseTimePickerProps
+      | "asChild"
+      | "children"
+      | "columnsClassName"
+      | "fogSize"
+      | "itemSize"
+      | "readOnly"
+      | "scrollFogClassName"
+      | "selectionIndicatorClassName"
+      | "visibleItemCount"
+    > {
+  /**
+   * 오전·오후 컬럼의 접근성 이름입니다.
+   * 지정하지 않으면 `locale`에 맞는 기본값을 사용합니다.
+   */
+  periodAriaLabel?: string;
+
+  /**
+   * 시 컬럼의 접근성 이름입니다.
+   * 지정하지 않으면 `locale`에 맞는 기본값을 사용합니다.
+   */
+  hourAriaLabel?: string;
+
+  /**
+   * 분 컬럼의 접근성 이름입니다.
+   * 지정하지 않으면 `locale`에 맞는 기본값을 사용합니다.
+   */
+  minuteAriaLabel?: string;
+}
+
+/**
+ * 휠을 스크롤하여 오전·오후, 시, 분을 선택하는 12시간제 시간 선택 컴포넌트입니다.
+ *
+ * 값은 오전·오후를 별도 필드로 나누지 않고 24시간 형식의 `TimePickerValue`로 주고받습니다.
+ */
+export const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(
+  (
+    {
+      value,
+      defaultValue,
+      onValueChange,
+      minuteStep,
+      locale,
+      disabled,
+      periodAriaLabel,
+      hourAriaLabel,
+      minuteAriaLabel,
+      className,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      ...props
+    },
+    ref,
+  ) => {
+    const api = useTimePicker({
+      value,
+      defaultValue,
+      onValueChange,
+      minuteStep,
+      locale,
+      disabled,
+    });
+    const defaultAriaLabels = getDefaultAriaLabels(locale);
+    const ariaLabels = {
+      period: periodAriaLabel ?? defaultAriaLabels.period,
+      hour: hourAriaLabel ?? defaultAriaLabels.hour,
+      minute: minuteAriaLabel ?? defaultAriaLabels.minute,
+    };
+
+    return (
+      <InternalWheelPickerRoot
+        ref={ref}
+        itemSize={ITEM_SIZE}
+        visibleItemCount={VISIBLE_ITEM_COUNT}
+        disabled={disabled}
+        aria-label={ariaLabelledby ? ariaLabel : (ariaLabel ?? defaultAriaLabels.root)}
+        aria-labelledby={ariaLabelledby}
+        className={clsx(classNames.root, className)}
+        columnsClassName={classNames.columns}
+        scrollFogClassName={classNames.scrollFog}
+        selectionIndicatorClassName={classNames.selectionIndicator}
+        {...props}
+      >
+        {api.columnOrder.map((type) => {
+          const column = api.columns[type];
+
+          return (
+            <InternalWheelPickerColumn
+              key={type}
+              aria-label={ariaLabels[type]}
+              className={columnClassNames[type]}
+              itemClassName={classNames.item}
+              options={column.options}
+              value={column.value}
+              onValueChange={column.onValueChange}
+              loop={column.loop}
+              valueChangeBehavior={type === "period" ? "smooth" : "auto"}
+            />
+          );
+        })}
+      </InternalWheelPickerRoot>
+    );
+  },
+);
+TimePicker.displayName = "TimePicker";
+
+export type { MinuteStep, TimePickerValue } from "@seed-design/react-time-picker";

package/src/components/TimePicker/index.ts

@@ -0,0 +1,6 @@
+export {
+  TimePicker,
+  type MinuteStep,
+  type TimePickerProps,
+  type TimePickerValue,
+} from "./TimePicker";

package/src/components/index.ts

@@ -20,6 +20,7 @@ export * from "./ContentPlaceholder";
 export * from "./ContextualFloatingButton";
 export * from "./ControlChip";
 export * from "./Count";
+export * from "./DatePicker";
 export * from "./Dialog";
 export * from "./Divider";
 export * from "./ExtendedActionSheet";
@@ -80,5 +81,6 @@ export * from "./Tabs";
 export * from "./TagGroup";
 export * from "./Text";
 export * from "./TextField";
+export * from "./TimePicker";
 export * from "./ToggleButton";
 export * from "./VisuallyHidden";

package/src/components/private/WheelPicker.test.tsx

@@ -0,0 +1,54 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "bun:test";
+import { InternalWheelPickerColumn, InternalWheelPickerRoot } from "./WheelPicker";
+
+const options = [
+  { value: "a", label: "A" },
+  { value: "b", label: "B" },
+];
+
+describe("InternalWheelPicker", () => {
+  it("여러 컬럼을 하나의 ScrollFog와 Selection Indicator로 조합한다", () => {
+    const { container, getAllByRole, getByRole } = render(
+      <InternalWheelPickerRoot
+        aria-label="내부 휠 피커"
+        itemSize={40}
+        visibleItemCount={5}
+        fogSize={32}
+        className="root"
+        columnsClassName="columns"
+        scrollFogClassName="fog"
+        selectionIndicatorClassName="indicator"
+      >
+        <InternalWheelPickerColumn aria-label="첫 번째" options={options} />
+        <InternalWheelPickerColumn aria-label="두 번째" options={options} />
+      </InternalWheelPickerRoot>,
+    );
+
+    const root = getByRole("group");
+    const fogs = container.querySelectorAll("[data-wheel-picker-scroll-fog]");
+    const indicator = container.querySelector("[data-wheel-picker-indicator]");
+    const columns = container.querySelector("[data-wheel-picker-columns]");
+    const [firstColumn] = getAllByRole("spinbutton");
+
+    expect(root).toHaveClass("seed-wheel-picker__root", "root");
+    expect(root).toHaveStyle({
+      "--seed-wheel-picker-item-size": "40px",
+      "--seed-wheel-picker-visible-item-count": "5",
+      "--seed-wheel-picker-viewport-size": "200px",
+      "--seed-wheel-picker-center-offset": "80px",
+    });
+    expect(fogs).toHaveLength(1);
+    expect(fogs[0]).toHaveClass("seed-wheel-picker__scrollFog", "fog");
+    expect(fogs[0]).toHaveStyle({
+      "--scroll-fog-size-top": "32px",
+      "--scroll-fog-size-bottom": "32px",
+    });
+    expect(indicator).toHaveClass("seed-wheel-picker__selectionIndicator", "indicator");
+    expect(indicator).toHaveAttribute("aria-hidden", "true");
+    expect(columns).toHaveClass("seed-wheel-picker__columns", "columns");
+    expect(getAllByRole("spinbutton")).toHaveLength(2);
+    expect(firstColumn).toHaveClass("seed-wheel-picker__column");
+    expect(firstColumn.firstElementChild).toHaveClass("seed-wheel-picker__item");
+  });
+});

package/src/components/private/WheelPicker.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { wheelPicker } from "@seed-design/css/recipes/wheel-picker";
+import { Primitive } from "@seed-design/react-primitive";
+import * as HeadlessWheelPicker from "@seed-design/react-wheel-picker";
+import clsx from "clsx";
+import * as React from "react";
+import { ScrollFog, type ScrollFogProps } from "../ScrollFog/ScrollFog";
+
+const classNames = wheelPicker();
+
+type WheelPickerCssProperties = React.CSSProperties & {
+  "--seed-wheel-picker-item-size"?: string;
+  "--seed-wheel-picker-visible-item-count"?: number;
+  "--seed-wheel-picker-viewport-size"?: string;
+  "--seed-wheel-picker-center-offset"?: string;
+};
+
+export interface InternalWheelPickerRootProps
+  extends Omit<HeadlessWheelPicker.WheelPickerRootProps, "asChild" | "children"> {
+  children: React.ReactNode;
+  columnsClassName?: string;
+  scrollFogClassName?: string;
+  selectionIndicatorClassName?: string;
+  fogSize?: ScrollFogProps["size"];
+}
+
+export const InternalWheelPickerRoot = React.forwardRef<
+  HTMLDivElement,
+  InternalWheelPickerRootProps
+>(
+  (
+    {
+      children,
+      className,
+      columnsClassName,
+      scrollFogClassName,
+      selectionIndicatorClassName,
+      fogSize,
+      itemSize,
+      visibleItemCount,
+      style,
+      ...props
+    },
+    ref,
+  ) => {
+    const centerOffset = ((visibleItemCount - 1) / 2) * itemSize;
+    const wheelPickerStyle: WheelPickerCssProperties = {
+      ...style,
+      "--seed-wheel-picker-item-size": `${itemSize}px`,
+      "--seed-wheel-picker-visible-item-count": visibleItemCount,
+      "--seed-wheel-picker-viewport-size": `${itemSize * visibleItemCount}px`,
+      "--seed-wheel-picker-center-offset": `${centerOffset}px`,
+    };
+
+    return (
+      <HeadlessWheelPicker.WheelPickerRoot
+        ref={ref}
+        itemSize={itemSize}
+        visibleItemCount={visibleItemCount}
+        className={clsx(classNames.root, className)}
+        style={wheelPickerStyle}
+        {...props}
+      >
+        <Primitive.div
+          aria-hidden
+          className={clsx(classNames.selectionIndicator, selectionIndicatorClassName)}
+          data-wheel-picker-indicator=""
+        />
+        <ScrollFog
+          className={clsx(classNames.scrollFog, scrollFogClassName)}
+          placement={["top", "bottom"]}
+          size={fogSize}
+          hideScrollBar
+          data-wheel-picker-scroll-fog=""
+        >
+          <Primitive.div
+            className={clsx(classNames.columns, columnsClassName)}
+            data-wheel-picker-columns=""
+          >
+            {children}
+          </Primitive.div>
+        </ScrollFog>
+      </HeadlessWheelPicker.WheelPickerRoot>
+    );
+  },
+);
+InternalWheelPickerRoot.displayName = "InternalWheelPickerRoot";
+
+export interface InternalWheelPickerColumnProps
+  extends Omit<HeadlessWheelPicker.WheelPickerColumnProps, "asChild" | "renderOption"> {
+  itemClassName?: string;
+}
+
+export const InternalWheelPickerColumn = React.forwardRef<
+  HTMLDivElement,
+  InternalWheelPickerColumnProps
+>(({ className, itemClassName, ...props }, ref) => (
+  <HeadlessWheelPicker.WheelPickerColumn
+    ref={ref}
+    className={clsx(classNames.column, className)}
+    renderOption={(option, optionProps) => (
+      <Primitive.div className={clsx(classNames.item, itemClassName)} {...optionProps}>
+        {option.label}
+      </Primitive.div>
+    )}
+    {...props}
+  />
+));
+InternalWheelPickerColumn.displayName = "InternalWheelPickerColumn";