@uniai-fe/uds-primitives 0.6.5 → 0.6.6

package/dist/styles.css

@@ -1962,6 +1962,17 @@
   color: var(--color-label-disabled);
 }
 
+.calendar-day:where([hidden]) {
+  display: flex !important;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.calendar-range-grid .calendar-day:where([data-outside=true]) {
+  visibility: hidden;
+  pointer-events: none;
+}
+
 .calendar-day:where(:not([data-disabled=true],
 [data-selected=true],
 [data-focused=true],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.6.5",
+  "version": "0.6.6",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,
@@ -15,7 +15,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "packageManager": "pnpm@10.33.0",
+  "packageManager": "pnpm@10.33.2",
   "engines": {
     "node": ">=24",
     "pnpm": ">=10"
@@ -103,7 +103,7 @@
     "@uniai-fe/util-functions": "workspace:*",
     "eslint": "^9.39.2",
     "prettier": "^3.8.3",
-    "react-hook-form": "^7.72.1",
+    "react-hook-form": "^7.73.1",
     "sass": "^1.99.0",
     "typescript": "5.9.3"
   }

package/src/components/calendar/markup/Core.tsx

@@ -1,6 +1,10 @@
 "use client";
 
-import { DatePicker, type DateStringValue } from "@mantine/dates";
+import {
+  DatePicker,
+  DatesProvider,
+  type DateStringValue,
+} from "@mantine/dates";
 import { dayjs } from "../../../init/dayjs";
 import { CalendarIcon } from "./Icon";
 import type { CalendarDatePickerProps, CalendarGridProps } from "../types";
@@ -34,6 +38,7 @@ export default function CalendarCore({
   // 기본 DatePicker 옵션/스타일 책임을 Calendar.Core에 고정한다.
   const resolvedDatePickerProps = {
     size: "sm" as const,
+    locale: "ko",
     firstDayOfWeek: 0 as const,
     weekendDays: [] as Array<0 | 1 | 2 | 3 | 4 | 5 | 6>,
     nextIcon: <CalendarIcon.Chevron.right />,
@@ -76,14 +81,24 @@ export default function CalendarCore({
   };
 
   return (
-    <DatePicker
-      className="calendar-grid"
-      // Core는 SOT 단일 달력으로 고정한다.
-      numberOfColumns={1}
-      type="default"
-      value={mapValueToPicker(value) as never}
-      onChange={handleChange as never}
-      {...resolvedDatePickerProps}
-    />
+    <DatesProvider
+      settings={{
+        // 변경: 월별 week row 수를 6주로 고정해 popover 높이 변동을 막는다.
+        consistentWeeks: true,
+        locale: resolvedDatePickerProps.locale ?? "ko",
+        firstDayOfWeek: resolvedDatePickerProps.firstDayOfWeek ?? 0,
+        weekendDays: resolvedDatePickerProps.weekendDays ?? [],
+      }}
+    >
+      <DatePicker
+        className="calendar-grid"
+        // Core는 SOT 단일 달력으로 고정한다.
+        numberOfColumns={1}
+        type="default"
+        value={mapValueToPicker(value) as never}
+        onChange={handleChange as never}
+        {...resolvedDatePickerProps}
+      />
+    </DatesProvider>
   );
 }

package/src/components/calendar/markup/range/Core.tsx

@@ -1,6 +1,10 @@
 "use client";
 
-import { DatePicker, type DateStringValue } from "@mantine/dates";
+import {
+  DatePicker,
+  DatesProvider,
+  type DateStringValue,
+} from "@mantine/dates";
 import { dayjs } from "../../../../init/dayjs";
 import { CalendarIcon } from "../Icon";
 import type {
@@ -38,6 +42,7 @@ export default function CalendarRangeCore({
   // Range Core는 Figma의 2 calendar 구조에 맞춰 두 달을 한 패널에서 렌더링한다.
   const resolvedDatePickerProps = {
     size: "sm" as const,
+    locale: "ko",
     firstDayOfWeek: 0 as const,
     weekendDays: [] as Array<0 | 1 | 2 | 3 | 4 | 5 | 6>,
     nextIcon: <CalendarIcon.Chevron.right />,
@@ -49,6 +54,8 @@ export default function CalendarRangeCore({
     // 변경: Range header도 단일 Core와 같은 연도-월 순서 표기를 기본값으로 둔다.
     monthLabelFormat: "YYYY년 M월",
     ...safeDatePickerProps,
+    // 변경: hidden attribute로 인한 empty week row collapse를 막고 outside date는 CSS에서 숨긴다.
+    hideOutsideDates: false,
     // 변경: button은 period surface, span은 selected/today 날짜 레이어로 분리한다.
     renderDay: (date: DateStringValue) => (
       <span className="calendar-day-label">
@@ -80,13 +87,23 @@ export default function CalendarRangeCore({
   };
 
   return (
-    <DatePicker
-      className="calendar-grid calendar-range-grid"
-      numberOfColumns={2}
-      type="range"
-      value={mapRangeValueToPicker(value)}
-      onChange={handleChange}
-      {...resolvedDatePickerProps}
-    />
+    <DatesProvider
+      settings={{
+        // 변경: range 양쪽 month도 항상 6주 row로 렌더해 패널 높이를 고정한다.
+        consistentWeeks: true,
+        locale: resolvedDatePickerProps.locale ?? "ko",
+        firstDayOfWeek: resolvedDatePickerProps.firstDayOfWeek ?? 0,
+        weekendDays: resolvedDatePickerProps.weekendDays ?? [],
+      }}
+    >
+      <DatePicker
+        className="calendar-grid calendar-range-grid"
+        numberOfColumns={2}
+        type="range"
+        value={mapRangeValueToPicker(value)}
+        onChange={handleChange}
+        {...resolvedDatePickerProps}
+      />
+    </DatesProvider>
   );
 }

package/src/components/calendar/styles/mantine-calendar.scss

@@ -372,6 +372,19 @@
   color: var(--color-label-disabled);
 }
 
+.calendar-day:where([hidden]) {
+  // 변경: range의 outside date hidden row도 6주 높이 계산에 참여시켜 month 전환 점프를 막는다.
+  display: flex !important;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.calendar-range-grid .calendar-day:where([data-outside="true"]) {
+  // 변경: range outside date는 hidden attribute 없이 공간만 유지한다.
+  visibility: hidden;
+  pointer-events: none;
+}
+
 .calendar-day:where(
     :not(
       [data-disabled="true"],