sellmate-design-system-react 9.0.0-beta.2 → 9.0.0-beta.3

package/dist/components/SDatePicker/README.md

@@ -8,9 +8,10 @@
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `value?` | `string \| null` | — | 선택 날짜 (YYYY-MM-DD) |
+| `value?` | `string \| null` | — | 선택 값 (date: YYYY-MM-DD, month: YYYY-MM, year: YYYY) |
+| `mode?` | `SDatePickerMode` | `'date'` | 선택 모드 |
 | `size?` | `SDatePickerSize` | `'sm'` |  |
-| `placeholder?` | `string` | `'YYYY-MM-DD'` |  |
+| `placeholder?` | `string` | — |  |
 | `selectable?` | `[string, string]` | — | 선택 가능 범위 [시작, 종료] |
 | `disabled?` | `boolean` | `false` |  |
 | `width?` | `number \| string` | — |  |
@@ -35,7 +36,7 @@
 
 | Event | Type | Description |
 |-------|------|-------------|
-| `onValueChange` | `(date: string) => void` | 선택 변경 (sdUpdate) |
+| `onValueChange` | `(value: string) => void` | 선택 변경 (sdUpdate) |
 | `onViewChange` | `(view: { year: number; month: number }) => void` | 보이는 연·월 변경 (sdViewChange) |
 
 ## Dependencies

package/dist/components/SDatePicker/SDatePicker.d.ts

@@ -5,16 +5,19 @@ import { type SColor } from '../../lib/color';
 import { type Rule } from '../../lib/form';
 import { type STooltipProps } from '../STooltip';
 export type SDatePickerSize = SFieldSize;
+export type SDatePickerMode = 'date' | 'month' | 'year';
 export interface SDatePickerProps {
-    /** 선택 날짜 (YYYY-MM-DD) */
+    /** 선택 값 (date: YYYY-MM-DD, month: YYYY-MM, year: YYYY) */
     value?: string | null;
     /** 선택 변경 (sdUpdate) */
-    onValueChange?: (date: string) => void;
+    onValueChange?: (value: string) => void;
     /** 보이는 연·월 변경 (sdViewChange) */
     onViewChange?: (view: {
         year: number;
         month: number;
     }) => void;
+    /** 선택 모드 */
+    mode?: SDatePickerMode;
     size?: SDatePickerSize;
     placeholder?: string;
     /** 선택 가능 범위 [시작, 종료] */
@@ -39,4 +42,4 @@ export interface SDatePickerProps {
     style?: CSSProperties;
 }
 /** SDatePicker — sd-date-picker 포팅. SField + SPopover(SCalendar). */
-export declare function SDatePicker({ value, onValueChange, onViewChange, size, placeholder, selectable, disabled, width, name, rules, status, label, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: SDatePickerProps): import("react").JSX.Element;
+export declare function SDatePicker({ value, onValueChange, onViewChange, mode, size, placeholder, selectable, disabled, width, name, rules, status, label, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: SDatePickerProps): import("react").JSX.Element;

package/dist/components/SDatePicker/index.d.ts

@@ -1 +1 @@
-export { SDatePicker, type SDatePickerProps, type SDatePickerSize } from './SDatePicker';
+export { SDatePicker, type SDatePickerMode, type SDatePickerProps, type SDatePickerSize, } from './SDatePicker';

package/dist/index.cjs

@@ -12156,12 +12156,244 @@ function SCalendar({
     }
   );
 }
+var DATEPICKER_MODE_LIST_HEIGHT = 240;
+var DATEPICKER_MODE_ITEM_HEIGHT = 28;
+var YEAR_LIST_EDGE_BUFFER = 24;
+var YEAR_LIST_EXPAND_SIZE = 80;
+var MONTHS = Array.from({ length: 12 }, (_, i) => i + 1);
+var getTodayParts = () => {
+  const today = /* @__PURE__ */ new Date();
+  return {
+    year: today.getFullYear(),
+    month: today.getMonth() + 1
+  };
+};
+var parseYear = (value) => {
+  const year = Number(value?.slice(0, 4));
+  return Number.isFinite(year) && year > 0 ? year : void 0;
+};
+var parseMonth = (value) => {
+  const month = Number(value?.slice(5, 7));
+  return Number.isFinite(month) && month >= 1 && month <= 12 ? month : void 0;
+};
+var formatMonthValue = (year, month) => `${year}-${String(month).padStart(2, "0")}`;
+var isYearDisabled = (year, selectable) => {
+  if (!selectable) return false;
+  const [start, end] = selectable;
+  if (start !== "" && year < Number(start.slice(0, 4))) return true;
+  if (end !== "" && year > Number(end.slice(0, 4))) return true;
+  return false;
+};
+var isMonthDisabled = (year, month, selectable) => {
+  if (!selectable) return false;
+  const value = formatMonthValue(year, month);
+  const [start, end] = selectable;
+  if (start !== "" && value < start.slice(0, 7)) return true;
+  if (end !== "" && value > end.slice(0, 7)) return true;
+  return false;
+};
+function YearWheel({ value, anchorYear, selectable, onCommit }) {
+  const listRef = react.useRef(null);
+  const syncingScrollRef = react.useRef(false);
+  const anchorYearRef = react.useRef(anchorYear);
+  const [range, setRange] = react.useState(() => ({
+    start: anchorYear - YEAR_LIST_EXPAND_SIZE,
+    end: anchorYear + YEAR_LIST_EXPAND_SIZE
+  }));
+  const rangeStartRef = react.useRef(range.start);
+  rangeStartRef.current = range.start;
+  const years = Array.from({ length: range.end - range.start + 1 }, (_, i) => range.start + i);
+  react.useLayoutEffect(() => {
+    const list = listRef.current;
+    if (!list) return;
+    const index = anchorYearRef.current - rangeStartRef.current;
+    syncingScrollRef.current = true;
+    list.scrollTop = index * DATEPICKER_MODE_ITEM_HEIGHT;
+    requestAnimationFrame(() => {
+      syncingScrollRef.current = false;
+    });
+  }, []);
+  const handleScroll = () => {
+    const list = listRef.current;
+    if (!list) return;
+    if (syncingScrollRef.current) return;
+    if (list.scrollTop < DATEPICKER_MODE_ITEM_HEIGHT * YEAR_LIST_EDGE_BUFFER) {
+      const previousHeight = list.scrollHeight;
+      setRange((current) => ({
+        start: current.start - YEAR_LIST_EXPAND_SIZE,
+        end: current.end
+      }));
+      requestAnimationFrame(() => {
+        if (!listRef.current) return;
+        syncingScrollRef.current = true;
+        listRef.current.scrollTop += listRef.current.scrollHeight - previousHeight;
+        requestAnimationFrame(() => {
+          syncingScrollRef.current = false;
+        });
+      });
+      return;
+    }
+    if (list.scrollHeight - list.scrollTop - list.clientHeight < DATEPICKER_MODE_ITEM_HEIGHT * YEAR_LIST_EDGE_BUFFER) {
+      setRange((current) => ({
+        start: current.start,
+        end: current.end + YEAR_LIST_EXPAND_SIZE
+      }));
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full overflow-hidden bg-[var(--cmp-datepicker-mode-bg)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: listRef,
+      role: "listbox",
+      "aria-label": "year",
+      className: "h-full overflow-y-auto overscroll-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+      style: {
+        paddingTop: `calc((${DATEPICKER_MODE_LIST_HEIGHT}px - ${DATEPICKER_MODE_ITEM_HEIGHT}px) / 2)`,
+        paddingBottom: `calc((${DATEPICKER_MODE_LIST_HEIGHT}px - ${DATEPICKER_MODE_ITEM_HEIGHT}px) / 2)`
+      },
+      onScroll: handleScroll,
+      children: years.map((year) => {
+        const selected = year === value;
+        const disabled = isYearDisabled(year, selectable);
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            "aria-selected": selected,
+            disabled,
+            className: cn(
+              "flex w-full items-center justify-center gap-[var(--cmp-datepicker-mode-item-gap)] border-0 px-[var(--cmp-datepicker-mode-item-paddingX)] py-[var(--cmp-datepicker-mode-item-paddingY)] text-center font-base text-12 leading-[20px]",
+              disabled && "cursor-not-allowed bg-[var(--cmp-datepicker-mode-item-bg-default)] font-medium text-[color:var(--cmp-datepicker-mode-item-content-disabled)]",
+              !disabled && !selected && "cursor-pointer bg-[var(--cmp-datepicker-mode-item-bg-default)] font-medium text-[color:var(--cmp-datepicker-mode-item-content-default)] hover:bg-[var(--cmp-datepicker-mode-item-bg-hover)] hover:text-[color:var(--cmp-datepicker-mode-item-content-hover)]",
+              !disabled && selected && "cursor-pointer bg-[var(--cmp-datepicker-mode-item-bg-default)] font-bold text-[color:var(--cmp-datepicker-mode-item-content-selected)]"
+            ),
+            onClick: () => !disabled && onCommit(year),
+            children: year
+          },
+          year
+        );
+      })
+    }
+  ) });
+}
+function MonthWheel({ year, value, selectable, onCommit }) {
+  const listRef = react.useRef(null);
+  const initialValueRef = react.useRef(value);
+  react.useLayoutEffect(() => {
+    const list = listRef.current;
+    if (!list) return;
+    list.scrollTop = Math.max(
+      0,
+      (initialValueRef.current - 1) * DATEPICKER_MODE_ITEM_HEIGHT - (list.clientHeight - DATEPICKER_MODE_ITEM_HEIGHT) / 2
+    );
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full overflow-hidden bg-[var(--cmp-datepicker-mode-bg)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: listRef,
+      role: "listbox",
+      "aria-label": "month",
+      className: "h-full overflow-y-auto overscroll-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+      children: MONTHS.map((month) => {
+        const selected = month === value;
+        const disabled = isMonthDisabled(year, month, selectable);
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            "aria-selected": selected,
+            disabled,
+            className: cn(
+              "flex w-full items-center justify-center gap-[var(--cmp-datepicker-mode-item-gap)] border-0 px-[var(--cmp-datepicker-mode-item-paddingX)] py-[var(--cmp-datepicker-mode-item-paddingY)] text-center font-base text-12 leading-[20px]",
+              disabled && "cursor-not-allowed bg-[var(--cmp-datepicker-mode-item-bg-default)] font-medium text-[color:var(--cmp-datepicker-mode-item-content-disabled)]",
+              !disabled && !selected && "cursor-pointer bg-[var(--cmp-datepicker-mode-item-bg-default)] font-medium text-[color:var(--cmp-datepicker-mode-item-content-default)] hover:bg-[var(--cmp-datepicker-mode-item-bg-hover)] hover:text-[color:var(--cmp-datepicker-mode-item-content-hover)]",
+              !disabled && selected && "cursor-pointer bg-[var(--cmp-datepicker-mode-item-bg-default)] font-bold text-[color:var(--cmp-datepicker-mode-item-content-selected)]"
+            ),
+            onClick: () => !disabled && onCommit(month),
+            children: [
+              month,
+              "\uC6D4"
+            ]
+          },
+          month
+        );
+      })
+    }
+  ) });
+}
+function DatePickerListbox({
+  mode,
+  value,
+  selectable,
+  onValueChange,
+  onClose
+}) {
+  const today = getTodayParts();
+  const [year, setYear] = react.useState(() => parseYear(value) ?? today.year);
+  const [month, setMonth] = react.useState(() => parseMonth(value) ?? today.month);
+  const commitYear = (nextYear) => {
+    setYear(nextYear);
+    if (mode === "year") {
+      onValueChange?.(String(nextYear));
+      onClose();
+      return;
+    }
+    onValueChange?.(formatMonthValue(nextYear, month));
+  };
+  const commitMonth = (nextMonth) => {
+    setMonth(nextMonth);
+    onValueChange?.(formatMonthValue(year, nextMonth));
+    onClose();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "inline-flex h-[240px] overflow-hidden rounded-[var(--cmp-datepicker-mode-radius)] bg-[var(--cmp-datepicker-mode-bg)] shadow-normal-sm",
+        mode === "month" ? "gap-[var(--cmp-datepicker-mode-yearMonth-gap)]" : "w-[var(--cmp-datepicker-mode-year-width)]"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "min-w-0",
+              mode === "month" ? "w-[var(--cmp-datepicker-mode-yearMonth-column-width)]" : "w-full"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              YearWheel,
+              {
+                value: year,
+                anchorYear: today.year,
+                selectable,
+                onCommit: commitYear
+              }
+            )
+          }
+        ),
+        mode === "month" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "w-[var(--border-width-1)] self-stretch bg-[var(--sys-color-divider-default)]"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 w-[var(--cmp-datepicker-mode-yearMonth-column-width)]", children: /* @__PURE__ */ jsxRuntime.jsx(MonthWheel, { year, value: month, selectable, onCommit: commitMonth }) })
+        ] })
+      ]
+    }
+  );
+}
 function SDatePicker({
   value,
   onValueChange,
   onViewChange,
+  mode = "date",
   size = "sm",
-  placeholder = "YYYY-MM-DD",
+  placeholder,
   selectable,
   disabled = false,
   width,
@@ -12187,6 +12419,7 @@ function SDatePicker({
   const [focused, setFocused] = react.useState(false);
   const [ruleError, setRuleError] = react.useState("");
   const hasValue = value != null && value !== "";
+  const resolvedPlaceholder = placeholder ?? (mode === "year" ? "YYYY" : mode === "month" ? "YYYY-MM" : "YYYY-MM-DD");
   useFormField({
     name,
     validate: () => {
@@ -12198,12 +12431,34 @@ function SDatePicker({
   });
   const resolvedError = error || ruleError !== "";
   const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
-  const dims = size === "md" ? { padX: 16, gap: 12, icon: 20, minW: 104, fontSize: 14, lineHeight: 24, radius: 6 } : { padX: 12, gap: 8, icon: 16, minW: 80, fontSize: 12, lineHeight: 20, radius: 4 };
+  const dims = size === "md" ? {
+    padX: 16,
+    gap: 12,
+    icon: 20,
+    minW: 104,
+    fieldMinW: 168,
+    fontSize: 14,
+    lineHeight: 24,
+    radius: 6
+  } : {
+    padX: 12,
+    gap: 8,
+    icon: 16,
+    minW: 80,
+    fieldMinW: 128,
+    fontSize: 12,
+    lineHeight: 20,
+    radius: 4
+  };
   const select = (date) => {
     onValueChange?.(date);
     if (rules && rules.length > 0) setRuleError(runRules(date, rules));
     setOpen(false);
   };
+  const selectListboxValue = (nextValue) => {
+    onValueChange?.(nextValue);
+    if (rules && rules.length > 0) setRuleError(runRules(nextValue, rules));
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     SField,
     {
@@ -12222,6 +12477,7 @@ function SDatePicker({
       focused: focused || open,
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
       width,
+      minWidth: dims.fieldMinW,
       disabled,
       className,
       style,
@@ -12256,7 +12512,7 @@ function SDatePicker({
                     lineHeight: `${dims.lineHeight}px`,
                     color: disabled ? "var(--cmp-datepicker-text-disabled)" : hasValue ? "var(--cmp-datepicker-text-default)" : "var(--cmp-field-hint-color)"
                   },
-                  children: hasValue ? value : placeholder
+                  children: hasValue ? value : resolvedPlaceholder
                 }
               )
             ]
@@ -12272,7 +12528,7 @@ function SDatePicker({
               "z-50 max-w-[var(--radix-popover-content-available-width)]",
               FLOATING_SLIDE_ANIM
             ),
-            children: /* @__PURE__ */ jsxRuntime.jsx(
+            children: mode === "date" ? /* @__PURE__ */ jsxRuntime.jsx(
               SCalendar,
               {
                 value: value ?? void 0,
@@ -12281,6 +12537,15 @@ function SDatePicker({
                 onValueChange: select,
                 onViewChange
               }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              DatePickerListbox,
+              {
+                mode,
+                value,
+                selectable,
+                onValueChange: selectListboxValue,
+                onClose: () => setOpen(false)
+              }
             )
           }
         ) })