@seed-design/react 2.6.0 → 3.0.0

package/src/components/DatePicker/DatePicker.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { composeRefs } from "@radix-ui/react-compose-refs";
 import { datePicker } from "@seed-design/css/recipes/date-picker";
 import { mergeProps } from "@seed-design/dom-utils";
 import {
@@ -13,17 +12,20 @@ import {
   type DatePickerVisibleRange,
   type UseDatePickerProps,
 } from "@seed-design/react-date-picker";
+import { Popover as PopoverPrimitive, usePopoverContext } from "@seed-design/react-popover";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import clsx from "clsx";
 import * as React from "react";
-import { InternalWheelPickerColumn, InternalWheelPickerRoot } from "../private/WheelPicker";
-import { useStyleProps, type StyleProps } from "../../utils/styled";
-import { ActionButton } from "../ActionButton";
-import { Icon } from "../Icon";
+import { ActionButton } from "../ActionButton/ActionButton";
+import { Box, type BoxProps } from "../Box/Box";
+import { Icon } from "../Icon/Icon";
 
-// 44px × 7개 항목으로 308px viewport를 만들고, 336px 컨테이너 안에 중앙 정렬합니다.
-const WHEEL_ITEM_SIZE = 44;
-const WHEEL_VISIBLE_ITEM_COUNT = 7;
+// Month는 44px × 7개 항목으로 308px viewport를 만들고, 336px 컨테이너 안에 중앙 정렬합니다.
+// Week는 Wheel Picker small 크기(36px × 5개 항목)를 popover 안에 그대로 사용합니다.
+const MONTH_WHEEL_ITEM_SIZE = 44;
+const MONTH_WHEEL_VISIBLE_ITEM_COUNT = 7;
+const MONTH_WHEEL_SCROLL_FOG_SIZE = 102;
+const WEEK_WHEEL_POPOVER_GUTTER = 4;
 
 type DatePickerCssProperties = React.CSSProperties & {
   "--seed-date-picker-continuous-spacer-height"?: string;
@@ -33,8 +35,17 @@ function getContinuousSpacerStyle(height: number): DatePickerCssProperties {
   return { "--seed-date-picker-continuous-spacer-height": `${height}px` };
 }
 
-type DatePickerRootProps = PrimitiveProps &
-  Pick<StyleProps, "height" | "minHeight" | "maxHeight"> &
+function composeRefs<T>(...refs: Array<React.Ref<T> | undefined>) {
+  return (value: T | null) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") ref(value);
+      else if (ref) ref.current = value;
+    }
+  };
+}
+
+type DatePickerRootElementProps = PrimitiveProps &
+  Pick<BoxProps, "height" | "minHeight" | "maxHeight"> &
   Omit<
     React.HTMLAttributes<HTMLDivElement>,
     "children" | "defaultValue" | "onChange" | "onValueChange"
@@ -66,75 +77,36 @@ type DatePickerCellCustomization =
       renderDateCellSupplement?: never;
     };
 
-type DatePickerSharedProps = DatePickerBehaviorProps &
-  DatePickerRootProps & {
+export type DatePickerRootProps = DatePickerBehaviorProps &
+  DatePickerRootElementProps &
+  DatePickerCellCustomization & {
+    /** Date Picker가 표시할 달력 레이아웃입니다. */
+    visibleRange: DatePickerVisibleRange;
+
+    /** Continuous 레이아웃에서 노출하고 이동할 수 있는 월 범위입니다. */
+    monthRange?: DatePickerMonthRange;
+
     /** 날짜 이동과 포커스 action을 받는 ref입니다. */
     actionsRef?: React.Ref<DatePickerActions>;
-  } & DatePickerCellCustomization;
-
-type ContinuousSizeConstraint =
-  | (Required<Pick<StyleProps, "height">> & Pick<StyleProps, "minHeight" | "maxHeight">)
-  | (Required<Pick<StyleProps, "minHeight">> & Pick<StyleProps, "height" | "maxHeight">)
-  | (Required<Pick<StyleProps, "maxHeight">> & Pick<StyleProps, "height" | "minHeight">);
-
-export type DatePickerProps = DatePickerSharedProps;
-export type TwoMonthDatePickerProps = DatePickerSharedProps;
-export type WeekDatePickerProps = DatePickerSharedProps;
-type DatePickerPropsWithoutSize<Props = DatePickerSharedProps> = Props extends DatePickerSharedProps
-  ? Omit<Props, "height" | "minHeight" | "maxHeight">
-  : never;
-export type ContinuousDatePickerProps = DatePickerPropsWithoutSize &
-  ContinuousSizeConstraint & {
-    /**
-     * 노출하고 이동할 수 있는 월 범위입니다. 양끝 월을 포함합니다.
-     * 생략하면 `yearRange.start`의 1월부터 `yearRange.end`의 12월까지 노출합니다.
-     */
-    monthRange?: DatePickerMonthRange;
-  };
 
-type DatePickerImplementationProps = DatePickerSharedProps & {
-  visibleRange: DatePickerVisibleRange;
-  monthRange?: DatePickerMonthRange;
-};
+    children?: React.ReactNode;
+  };
 
-type NavigationChevronIconProps = React.SVGProps<SVGSVGElement> & {
-  direction: "left" | "right";
+type DatePickerContextValue = {
+  api: ReturnType<typeof useDatePicker>;
+  classNames: ReturnType<typeof datePicker>;
+  renderDateCellContent: DatePickerRootProps["renderDateCellContent"];
+  renderDateCellSupplement: DatePickerRootProps["renderDateCellSupplement"];
 };
 
-const NavigationChevronIcon = React.forwardRef<SVGSVGElement, NavigationChevronIconProps>(
-  ({ direction, ...props }, ref) => {
-    const path =
-      direction === "left"
-        ? "M22.7931 13.0704C23.0788 13.3703 23.0672 13.8451 22.7673 14.1307L16.5875 20.0166L22.7672 25.9017C23.0672 26.1873 23.0788 26.6621 22.7931 26.962C22.5075 27.262 22.0327 27.2736 21.7328 26.9879L14.9828 20.5598C14.8341 20.4182 14.75 20.2219 14.75 20.0167C14.75 19.8114 14.8341 19.6151 14.9827 19.4736L21.7327 13.0446C22.0327 12.7589 22.5074 12.7704 22.7931 13.0704Z"
-        : "M17.2069 13.0704C16.9212 13.3703 16.9328 13.8451 17.2327 14.1307L23.4125 20.0166L17.2328 25.9017C16.9328 26.1873 16.9212 26.6621 17.2069 26.962C17.4925 27.262 17.9673 27.2736 18.2672 26.9879L25.0172 20.5598C25.1659 20.4182 25.25 20.2219 25.25 20.0167C25.25 19.8114 25.1659 19.6151 25.0173 19.4736L18.2673 13.0446C17.9673 12.7589 17.4926 12.7704 17.2069 13.0704Z";
-
-    return (
-      <svg ref={ref} {...props} viewBox="8 8 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path fillRule="evenodd" clipRule="evenodd" d={path} fill="currentColor" />
-      </svg>
-    );
-  },
-);
-NavigationChevronIcon.displayName = "NavigationChevronIcon";
+const DatePickerContext = React.createContext<DatePickerContextValue | null>(null);
 
-type HeaderChevronIconProps = React.SVGProps<SVGSVGElement> & {
-  expanded: boolean;
-};
-
-const HeaderChevronIcon = React.forwardRef<SVGSVGElement, HeaderChevronIconProps>(
-  ({ expanded, ...props }, ref) => (
-    <svg ref={ref} {...props} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M5.2453 7.74286C5.57141 7.4181 6.09905 7.41919 6.42381 7.7453L9.98736 11.3237L13.5808 7.77134C13.9081 7.44778 14.4357 7.45081 14.7593 7.77812C15.0829 8.10542 15.0798 8.63305 14.7525 8.95661L10.5686 13.0926C10.2422 13.4154 9.7162 13.4133 9.39228 13.088L5.24286 8.92137C4.9181 8.59526 4.91919 8.06762 5.2453 7.74286Z"
-        fill="currentColor"
-        transform={expanded ? "rotate(180 10 10)" : undefined}
-      />
-    </svg>
-  ),
-);
-HeaderChevronIcon.displayName = "HeaderChevronIcon";
+function useDatePickerContext() {
+  const context = React.useContext(DatePickerContext);
+  if (!context)
+    throw new Error("DatePicker compound components must be used within DatePicker.Root");
+  return context;
+}
 
 function WeekdayRow({
   api,
@@ -173,8 +145,8 @@ function DateCellView({
 }: {
   cell: DatePickerCell | null;
   classNames: ReturnType<typeof datePicker>;
-  renderDateCellContent: DatePickerImplementationProps["renderDateCellContent"];
-  renderDateCellSupplement: DatePickerImplementationProps["renderDateCellSupplement"];
+  renderDateCellContent: DatePickerRootProps["renderDateCellContent"];
+  renderDateCellSupplement: DatePickerRootProps["renderDateCellSupplement"];
 }) {
   if (cell === null) {
     return <Primitive.div role="gridcell" className={classNames.emptyCell} />;
@@ -214,8 +186,8 @@ function MonthView({
   api: ReturnType<typeof useDatePicker>;
   classNames: ReturnType<typeof datePicker>;
   month: DatePickerMonth;
-  renderDateCellContent: DatePickerImplementationProps["renderDateCellContent"];
-  renderDateCellSupplement: DatePickerImplementationProps["renderDateCellSupplement"];
+  renderDateCellContent: DatePickerRootProps["renderDateCellContent"];
+  renderDateCellSupplement: DatePickerRootProps["renderDateCellSupplement"];
   showWeekdays: boolean;
   showMonthLabel: boolean;
   renderHeader?: (labelId: string) => React.ReactNode;
@@ -267,56 +239,69 @@ function MonthView({
 }
 
 function NavigationButton({
-  direction,
+  icon,
   className,
   ...props
 }: Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color"> & {
-  direction: "left" | "right";
+  icon: React.ReactNode;
 }) {
   return (
     <ActionButton {...props} variant="ghost" size="medium" layout="iconOnly" className={className}>
-      <Icon svg={<NavigationChevronIcon direction={direction} />} />
+      <Icon svg={icon} />
     </ActionButton>
   );
 }
 
-function Header({
-  api,
-  classNames,
-}: {
-  api: ReturnType<typeof useDatePicker>;
-  classNames: ReturnType<typeof datePicker>;
-}) {
-  const previousDirection = api.isRtl ? "right" : "left";
-  const nextDirection = api.isRtl ? "left" : "right";
+export interface DatePickerHeaderProps {
+  leftIcon: React.ReactNode;
+  rightIcon: React.ReactNode;
+  headerIcon: React.ReactNode;
+}
 
-  return (
-    <Primitive.div className={classNames.header}>
-      <Primitive.button
-        {...api.monthYearButtonProps}
-        id={`${api.rootProps.id}-header-label`}
-        className={classNames.headerLabel}
-      >
-        <Primitive.span data-date-picker-header-label="">{api.headerLabel}</Primitive.span>
-        <Primitive.span className={classNames.headerChevron}>
-          <Icon svg={<HeaderChevronIcon expanded={api.isWheelOpen} />} />
-        </Primitive.span>
-      </Primitive.button>
-      <Primitive.div className={classNames.navigation}>
-        <NavigationButton
-          {...api.previousButtonProps}
-          direction={previousDirection}
-          className={classNames.navigationButton}
-        />
-        <NavigationButton
-          {...api.nextButtonProps}
-          direction={nextDirection}
-          className={classNames.navigationButton}
-        />
+export const DatePickerHeader = React.forwardRef<HTMLDivElement, DatePickerHeaderProps>(
+  ({ leftIcon, rightIcon, headerIcon }, ref) => {
+    const { api, classNames } = useDatePickerContext();
+    // Week의 연·월 Wheel popover는 제목 버튼에 붙습니다.
+    const popover = usePopoverContext();
+
+    if (api.visibleRange === "continuous" || api.visibleRange === "twoMonths") return null;
+
+    const previousIcon = api.isRtl ? rightIcon : leftIcon;
+    const nextIcon = api.isRtl ? leftIcon : rightIcon;
+
+    return (
+      <Primitive.div ref={ref} className={classNames.header}>
+        <Primitive.button
+          ref={popover.refs.anchor}
+          {...api.monthYearButtonProps}
+          id={`${api.rootProps.id}-header-label`}
+          className={classNames.headerLabel}
+        >
+          <Primitive.span data-date-picker-header-label="">{api.headerLabel}</Primitive.span>
+          <Primitive.span
+            data-expanded={api.isWheelOpen ? "" : undefined}
+            className={classNames.headerChevron}
+          >
+            <Icon svg={headerIcon} />
+          </Primitive.span>
+        </Primitive.button>
+        <Primitive.div className={classNames.navigation}>
+          <NavigationButton
+            {...api.previousButtonProps}
+            icon={previousIcon}
+            className={classNames.navigationButton}
+          />
+          <NavigationButton
+            {...api.nextButtonProps}
+            icon={nextIcon}
+            className={classNames.navigationButton}
+          />
+        </Primitive.div>
       </Primitive.div>
-    </Primitive.div>
-  );
-}
+    );
+  },
+);
+DatePickerHeader.displayName = "DatePickerHeader";
 
 function TwoMonthHeader({
   api,
@@ -324,12 +309,16 @@ function TwoMonthHeader({
   label,
   labelId,
   position,
+  leftIcon,
+  rightIcon,
 }: {
   api: ReturnType<typeof useDatePicker>;
   classNames: ReturnType<typeof datePicker>;
   label: string;
   labelId: string;
   position: "first" | "last";
+  leftIcon: React.ReactNode;
+  rightIcon: React.ReactNode;
 }) {
   const isFirst = position === "first";
   const direction = api.isRtl ? (isFirst ? "right" : "left") : isFirst ? "left" : "right";
@@ -342,7 +331,7 @@ function TwoMonthHeader({
       </Primitive.div>
       <NavigationButton
         {...buttonProps}
-        direction={direction}
+        icon={direction === "left" ? leftIcon : rightIcon}
         data-placement={isFirst ? "start" : "end"}
         className={classNames.twoMonthNavigationButton}
       />
@@ -350,52 +339,194 @@ function TwoMonthHeader({
   );
 }
 
-function WheelView({
-  api,
-  classNames,
-}: {
-  api: ReturnType<typeof useDatePicker>;
-  classNames: ReturnType<typeof datePicker>;
-}) {
-  return (
-    <Primitive.div className={classNames.wheelContainer}>
-      <InternalWheelPickerRoot
-        {...api.wheelProps}
-        itemSize={WHEEL_ITEM_SIZE}
-        visibleItemCount={WHEEL_VISIBLE_ITEM_COUNT}
-        disabled={api.disabled}
-        readOnly={api.readOnly}
-        aria-label={api.headerLabel}
-        className={classNames.wheelView}
-        columnsClassName={classNames.wheelColumns}
-        scrollFogClassName={classNames.wheelScrollFog}
-        selectionIndicatorClassName={classNames.wheelSelectionIndicator}
-        fogSize={102}
-      >
-        <InternalWheelPickerColumn
-          aria-label={api.ariaLabels.yearWheel}
-          className={classNames.yearColumn}
-          itemClassName={classNames.wheelItem}
-          options={api.wheel.yearOptions}
-          value={api.wheel.yearValue}
-          onValueChange={api.wheel.onYearValueChange}
-          loop={false}
-        />
-        <InternalWheelPickerColumn
-          aria-label={api.ariaLabels.monthWheel}
-          className={classNames.monthColumn}
-          itemClassName={classNames.wheelItem}
-          options={api.wheel.monthOptions}
-          value={api.wheel.monthValue}
-          onValueChange={api.wheel.onMonthValueChange}
-          loop
-        />
-      </InternalWheelPickerRoot>
-    </Primitive.div>
-  );
+export interface DatePickerWheelColumn {
+  id: "year" | "month";
+  "aria-label": string;
+  className: string;
+  options: readonly { value: string; label: React.ReactNode }[];
+  value: string;
+  onValueChange: (value: string) => void;
+  loop: boolean;
 }
 
-const DatePickerImplementation = React.forwardRef<HTMLDivElement, DatePickerImplementationProps>(
+export interface DatePickerWheelRenderProps {
+  rootProps: React.HTMLAttributes<HTMLDivElement> & {
+    /** Month는 `medium`, Week popover는 `small` 크기를 사용합니다. */
+    size: "small" | "medium";
+    itemSize?: number;
+    visibleItemCount?: number;
+    disabled: boolean;
+    readOnly: boolean;
+    scrollFogSize?: number;
+  };
+  columns: readonly DatePickerWheelColumn[];
+}
+
+export interface DatePickerWheelProps {
+  children: (props: DatePickerWheelRenderProps) => React.ReactNode;
+}
+
+export const DatePickerWheel = React.forwardRef<HTMLDivElement, DatePickerWheelProps>(
+  ({ children }, ref) => {
+    const { api, classNames } = useDatePickerContext();
+
+    if (!api.isWheelOpen || api.visibleRange === "twoMonths" || api.visibleRange === "continuous") {
+      return null;
+    }
+
+    const columns: readonly DatePickerWheelColumn[] = [
+      {
+        id: "year",
+        "aria-label": api.ariaLabels.yearWheel,
+        className: classNames.yearColumn,
+        options: api.wheel.yearOptions,
+        value: api.wheel.yearValue,
+        onValueChange: api.wheel.onYearValueChange,
+        loop: false,
+      },
+      {
+        id: "month",
+        "aria-label": api.ariaLabels.monthWheel,
+        className: classNames.monthColumn,
+        options: api.wheel.monthOptions,
+        value: api.wheel.monthValue,
+        onValueChange: api.wheel.onMonthValueChange,
+        loop: true,
+      },
+    ];
+
+    const sharedRootProps = {
+      ...api.wheelProps,
+      disabled: api.disabled,
+      readOnly: api.readOnly,
+      "aria-label": api.headerLabel,
+      className: classNames.wheelView,
+    };
+
+    if (api.visibleRange === "week") {
+      // Popover가 Escape·바깥 누르기·상위 layer 닫힘과 focus 이동·복귀를 맡습니다.
+      return (
+        <PopoverPrimitive.Positioner className={classNames.wheelPositioner}>
+          <PopoverPrimitive.Content
+            ref={ref}
+            aria-labelledby={`${api.rootProps.id}-header-label`}
+            className={classNames.wheelPopover}
+          >
+            {children({ rootProps: { ...sharedRootProps, size: "small" }, columns })}
+          </PopoverPrimitive.Content>
+        </PopoverPrimitive.Positioner>
+      );
+    }
+
+    return (
+      <Primitive.div ref={ref} className={classNames.wheelContainer}>
+        {children({
+          rootProps: {
+            ...sharedRootProps,
+            size: "medium",
+            itemSize: MONTH_WHEEL_ITEM_SIZE,
+            visibleItemCount: MONTH_WHEEL_VISIBLE_ITEM_COUNT,
+            scrollFogSize: MONTH_WHEEL_SCROLL_FOG_SIZE,
+          },
+          columns,
+        })}
+      </Primitive.div>
+    );
+  },
+);
+DatePickerWheel.displayName = "DatePickerWheel";
+
+export interface DatePickerCalendarProps {
+  leftIcon: React.ReactNode;
+  rightIcon: React.ReactNode;
+}
+
+export const DatePickerCalendar = React.forwardRef<HTMLDivElement, DatePickerCalendarProps>(
+  ({ leftIcon, rightIcon }, ref) => {
+    const { api, classNames, renderDateCellContent, renderDateCellSupplement } =
+      useDatePickerContext();
+
+    if (api.visibleRange === "continuous") {
+      return (
+        <Primitive.div
+          ref={composeRefs(ref, api.refs.continuousScroll)}
+          {...api.continuousScrollProps}
+          data-date-picker-continuous-scroll=""
+          className={classNames.continuousScroll}
+        >
+          <WeekdayRow api={api} classNames={classNames} semantic={false} />
+          <Primitive.div className={classNames.continuousContent}>
+            <Primitive.div
+              aria-hidden="true"
+              data-date-picker-continuous-spacer=""
+              className={classNames.continuousSpacer}
+              style={getContinuousSpacerStyle(api.virtual.topHeight)}
+            />
+            {api.months.map((month) => (
+              <MonthView
+                key={month.key}
+                api={api}
+                classNames={classNames}
+                month={month}
+                renderDateCellContent={renderDateCellContent}
+                renderDateCellSupplement={renderDateCellSupplement}
+                showWeekdays={false}
+                showMonthLabel
+                monthRef={api.refs.continuousMonth(month.key)}
+              />
+            ))}
+            <Primitive.div
+              aria-hidden="true"
+              data-date-picker-continuous-spacer=""
+              className={classNames.continuousSpacer}
+              style={getContinuousSpacerStyle(api.virtual.bottomHeight)}
+            />
+          </Primitive.div>
+        </Primitive.div>
+      );
+    }
+
+    return (
+      <Primitive.div
+        ref={ref}
+        data-wheel-open={api.isWheelOpen && api.visibleRange === "month" ? "" : undefined}
+        aria-hidden={api.isWheelOpen && api.visibleRange === "month" ? true : undefined}
+        className={classNames.months}
+      >
+        {api.months.map((month, index) => (
+          <MonthView
+            key={month.key}
+            api={api}
+            classNames={classNames}
+            month={month}
+            renderDateCellContent={renderDateCellContent}
+            renderDateCellSupplement={renderDateCellSupplement}
+            showWeekdays
+            showMonthLabel={false}
+            renderHeader={
+              api.visibleRange === "twoMonths"
+                ? (labelId) => (
+                    <TwoMonthHeader
+                      api={api}
+                      classNames={classNames}
+                      label={month.label}
+                      labelId={labelId}
+                      position={index === 0 ? "first" : "last"}
+                      leftIcon={leftIcon}
+                      rightIcon={rightIcon}
+                    />
+                  )
+                : undefined
+            }
+          />
+        ))}
+      </Primitive.div>
+    );
+  },
+);
+DatePickerCalendar.displayName = "DatePickerCalendar";
+
+export const DatePickerRoot = React.forwardRef<HTMLDivElement, DatePickerRootProps>(
   (props, forwardedRef) => {
     const api = useDatePicker(props);
     const [variantProps, otherProps] = datePicker.splitVariantProps(props);
@@ -404,6 +535,7 @@ const DatePickerImplementation = React.forwardRef<HTMLDivElement, DatePickerImpl
       visibleRange: api.visibleRange,
     });
     const {
+      children,
       renderDateCellContent,
       renderDateCellSupplement,
       actionsRef,
@@ -427,17 +559,20 @@ const DatePickerImplementation = React.forwardRef<HTMLDivElement, DatePickerImpl
       className,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledby,
-      ...styleAndRootProps
+      height,
+      minHeight,
+      maxHeight,
+      ...rootProps
     } = otherProps;
-    const { style: styleProps, restProps: rootProps } = useStyleProps(styleAndRootProps);
-    const rootRef = React.useRef<HTMLDivElement | null>(null);
     const hasContinuousSizeConstraint =
       props.height !== undefined || props.minHeight !== undefined || props.maxHeight !== undefined;
 
     React.useEffect(() => {
       if (process.env.NODE_ENV === "production" || api.visibleRange !== "continuous") return;
       if (!hasContinuousSizeConstraint) {
-        console.warn("ContinuousDatePicker: height, minHeight 또는 maxHeight가 필요합니다.");
+        console.warn(
+          "DatePicker.Root: continuous에서는 height, minHeight 또는 maxHeight가 필요합니다.",
+        );
       }
     }, [api.visibleRange, hasContinuousSizeConstraint]);
 
@@ -446,130 +581,38 @@ const DatePickerImplementation = React.forwardRef<HTMLDivElement, DatePickerImpl
     const rootAriaLabel = ariaLabelledby ? ariaLabel : (ariaLabel ?? api.ariaLabels.root);
 
     return (
-      <Primitive.div
-        ref={composeRefs(forwardedRef, rootRef, api.refs.root)}
-        {...mergeProps(api.rootProps, rootProps)}
-        aria-label={rootAriaLabel}
-        aria-labelledby={ariaLabelledby}
-        className={clsx(classNames.root, className)}
-        style={styleProps}
+      <DatePickerContext.Provider
+        value={{ api, classNames, renderDateCellContent, renderDateCellSupplement }}
       >
-        {api.visibleRange === "continuous" ? (
-          <Primitive.div
-            ref={api.refs.continuousScroll}
-            {...api.continuousScrollProps}
-            data-date-picker-continuous-scroll=""
-            className={classNames.continuousScroll}
+        <PopoverPrimitive.Root
+          open={api.visibleRange === "week" && api.isWheelOpen}
+          // 바깥 누르기·Escape로 닫아도 제목 버튼으로 닫을 때처럼 고른 월을 반영합니다.
+          onOpenChange={(open) => {
+            if (!open) api.closeWheel();
+          }}
+          placement="bottom-start"
+          gutter={WEEK_WHEEL_POPOVER_GUTTER}
+        >
+          <Box
+            ref={composeRefs(forwardedRef, api.refs.root)}
+            {...mergeProps(api.rootProps, rootProps)}
+            aria-label={rootAriaLabel}
+            aria-labelledby={ariaLabelledby}
+            className={clsx(classNames.root, className)}
+            height={height}
+            minHeight={minHeight}
+            maxHeight={maxHeight}
           >
-            <WeekdayRow api={api} classNames={classNames} semantic={false} />
-            <Primitive.div className={classNames.continuousContent}>
-              <Primitive.div
-                aria-hidden="true"
-                data-date-picker-continuous-spacer=""
-                className={classNames.continuousSpacer}
-                style={getContinuousSpacerStyle(api.virtual.topHeight)}
-              />
-              {api.months.map((month) => (
-                <MonthView
-                  key={month.key}
-                  api={api}
-                  classNames={classNames}
-                  month={month}
-                  renderDateCellContent={renderDateCellContent}
-                  renderDateCellSupplement={renderDateCellSupplement}
-                  showWeekdays={false}
-                  showMonthLabel
-                  monthRef={api.refs.continuousMonth(month.key)}
-                />
-              ))}
-              <Primitive.div
-                aria-hidden="true"
-                data-date-picker-continuous-spacer=""
-                className={classNames.continuousSpacer}
-                style={getContinuousSpacerStyle(api.virtual.bottomHeight)}
-              />
-            </Primitive.div>
-          </Primitive.div>
-        ) : (
-          <>
-            {api.visibleRange !== "twoMonths" && <Header api={api} classNames={classNames} />}
-            <Primitive.div
-              data-wheel-open={api.isWheelOpen && api.visibleRange !== "twoMonths" ? "" : undefined}
-              aria-hidden={api.isWheelOpen && api.visibleRange !== "twoMonths" ? true : undefined}
-              className={classNames.months}
-            >
-              {api.months.map((month, index) => (
-                <MonthView
-                  key={month.key}
-                  api={api}
-                  classNames={classNames}
-                  month={month}
-                  renderDateCellContent={renderDateCellContent}
-                  renderDateCellSupplement={renderDateCellSupplement}
-                  showWeekdays
-                  showMonthLabel={false}
-                  renderHeader={
-                    api.visibleRange === "twoMonths"
-                      ? (labelId) => (
-                          <TwoMonthHeader
-                            api={api}
-                            classNames={classNames}
-                            label={month.label}
-                            labelId={labelId}
-                            position={index === 0 ? "first" : "last"}
-                          />
-                        )
-                      : undefined
-                  }
-                />
-              ))}
-            </Primitive.div>
-            {api.isWheelOpen && api.visibleRange !== "twoMonths" && (
-              <WheelView api={api} classNames={classNames} />
-            )}
-          </>
-        )}
-        <Primitive.span {...api.liveRegionProps} className={classNames.liveRegion}>
-          {api.headerLabel}
-        </Primitive.span>
-      </Primitive.div>
+            {children}
+            <Primitive.span {...api.liveRegionProps} className={classNames.liveRegion}>
+              {api.headerLabel}
+            </Primitive.span>
+          </Box>
+        </PopoverPrimitive.Root>
+      </DatePickerContext.Provider>
     );
   },
 );
-DatePickerImplementation.displayName = "DatePickerImplementation";
+DatePickerRoot.displayName = "DatePickerRoot";
 
-export const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>((props, ref) => (
-  <DatePickerImplementation ref={ref} {...props} visibleRange="month" />
-));
-DatePicker.displayName = "DatePicker";
-
-export const TwoMonthDatePicker = React.forwardRef<HTMLDivElement, TwoMonthDatePickerProps>(
-  (props, ref) => <DatePickerImplementation ref={ref} {...props} visibleRange="twoMonths" />,
-);
-TwoMonthDatePicker.displayName = "TwoMonthDatePicker";
-
-export const WeekDatePicker = React.forwardRef<HTMLDivElement, WeekDatePickerProps>(
-  (props, ref) => <DatePickerImplementation ref={ref} {...props} visibleRange="week" />,
-);
-WeekDatePicker.displayName = "WeekDatePicker";
-
-export const ContinuousDatePicker = React.forwardRef<HTMLDivElement, ContinuousDatePickerProps>(
-  (props, ref) => <DatePickerImplementation ref={ref} {...props} visibleRange="continuous" />,
-);
-ContinuousDatePicker.displayName = "ContinuousDatePicker";
-
-export type {
-  DatePickerActions,
-  DatePickerAriaLabels,
-  DatePickerConstraint,
-  DatePickerConstraintContext,
-  DatePickerDate,
-  DatePickerMonthRange,
-  DatePickerMultipleProps,
-  DatePickerRangeProps,
-  DatePickerRangeValue,
-  DatePickerSelectionMode,
-  DatePickerSingleProps,
-  DatePickerValue,
-  DatePickerYearMonth,
-} from "@seed-design/react-date-picker";
+export type { DatePickerActions } from "@seed-design/react-date-picker";