@bigtablet/design-system 1.11.2 → 1.11.4

package/dist/index.d.ts

@@ -120,31 +120,30 @@ interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
     fullWidth?: boolean;
-    /**
-     * 외부에 최종 값만 전달하는 콜백
-     * IME 조합 중 값은 내부에서만 관리된다.
-     */
     onChangeAction?: (value: string) => void;
-    /**
-     * controlled / uncontrolled 모두 지원
-     */
     value?: string;
     defaultValue?: string;
+    transformValue?: (value: string) => string;
 }
 declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
 
 type DatePickerMode = "year-month" | "year-month-day";
 interface DatePickerProps {
-    label?: string;
-    required?: boolean;
     value?: string;
     onChange: (value: string) => void;
     mode?: DatePickerMode;
     startYear?: number;
     endYear?: number;
+    minDate?: string;
     disabled?: boolean;
-}
-declare const DatePicker: ({ label, required, value, onChange, mode, startYear, endYear, disabled, }: DatePickerProps) => react_jsx_runtime.JSX.Element;
+    width?: {
+        container?: number | string;
+        year?: number | string;
+        month?: number | string;
+        day?: number | string;
+    };
+}
+declare const DatePicker: ({ value, onChange, mode, startYear, endYear, minDate, disabled, width, }: DatePickerProps) => react_jsx_runtime.JSX.Element;
 
 interface PaginationProps {
     page: number;

package/dist/index.js

@@ -511,20 +511,21 @@ var TextField = React3.forwardRef(
     onChangeAction,
     value,
     defaultValue,
+    transformValue,
     ...props
   }, ref) => {
     const inputId = id ?? React3.useId();
     const helperId = helperText ? `${inputId}-help` : void 0;
     const isControlled = value !== void 0;
+    const applyTransform = (nextValue) => transformValue ? transformValue(nextValue) : nextValue;
     const [innerValue, setInnerValue] = React3.useState(
-      value ?? defaultValue ?? ""
+      () => applyTransform(value ?? defaultValue ?? "")
     );
     const isComposingRef = React3.useRef(false);
     React3.useEffect(() => {
-      if (isControlled) {
-        setInnerValue(value ?? "");
-      }
-    }, [isControlled, value]);
+      if (!isControlled) return;
+      setInnerValue(applyTransform(value ?? ""));
+    }, [isControlled, value, transformValue]);
     const rootClassName = [
       "text_field",
       fullWidth && "text_field_full_width",
@@ -563,14 +564,19 @@ var TextField = React3.forwardRef(
             },
             onCompositionEnd: (event) => {
               isComposingRef.current = false;
-              const nextValue = event.currentTarget.value;
+              const rawValue = event.currentTarget.value;
+              const nextValue = applyTransform(rawValue);
               setInnerValue(nextValue);
               onChangeAction?.(nextValue);
             },
             onChange: (event) => {
-              const nextValue = event.target.value;
+              const rawValue = event.target.value;
+              if (isComposingRef.current) {
+                setInnerValue(rawValue);
+                return;
+              }
+              const nextValue = applyTransform(rawValue);
               setInnerValue(nextValue);
-              if (isComposingRef.current) return;
               onChangeAction?.(nextValue);
             }
           }
@@ -584,83 +590,78 @@ var TextField = React3.forwardRef(
 TextField.displayName = "TextField";
 var pad = (n) => String(n).padStart(2, "0");
 var getDaysInMonth = (year, month) => new Date(year, month, 0).getDate();
+var normalizeWidth = (v) => typeof v === "number" ? `${v}px` : v;
 var DatePicker = ({
-  label,
-  required,
   value,
   onChange,
   mode = "year-month-day",
   startYear = 1950,
   endYear = (/* @__PURE__ */ new Date()).getFullYear() + 10,
-  disabled
+  minDate,
+  disabled,
+  width
 }) => {
   const [y, m, d] = value?.split("-").map(Number) ?? [];
+  const [minY, minM, minD] = minDate?.split("-").map(Number) ?? [];
   const year = y ?? "";
   const month = m ?? "";
   const day = d ?? "";
+  const minMonth = minY && year === minY ? minM : 1;
+  const minDay = minY && minM && year === minY && month === minM ? minD : 1;
   const days = year && month ? getDaysInMonth(year, month) : 31;
   const emit = (yy, mm, dd) => {
-    const result = mode === "year-month" ? `${yy}-${pad(mm)}-01` : `${yy}-${pad(mm)}-${pad(dd ?? 1)}`;
+    const result = mode === "year-month" ? `${yy}-${pad(mm)}` : `${yy}-${pad(mm)}-${pad(dd ?? 1)}`;
     onChange(result);
   };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: [
-        "date_picker",
-        disabled && "date_picker_disabled"
-      ].filter(Boolean).join(" "),
-      children: [
-        label && /* @__PURE__ */ jsxs("label", { className: "date_picker_label", children: [
-          label,
-          required && /* @__PURE__ */ jsx("span", { className: "date_picker_required", children: "*" })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "date_picker_fields", children: [
-          /* @__PURE__ */ jsxs(
-            "select",
-            {
-              value: year,
-              disabled,
-              onChange: (e) => emit(Number(e.target.value), month || 1, day || 1),
-              children: [
-                /* @__PURE__ */ jsx("option", { value: "", disabled: true }),
-                Array.from(
-                  { length: endYear - startYear + 1 },
-                  (_, i) => startYear + i
-                ).map((y2) => /* @__PURE__ */ jsx("option", { value: y2, children: y2 }, y2))
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "select",
-            {
-              value: month,
-              disabled: disabled || !year,
-              onChange: (e) => emit(year, Number(e.target.value), day || 1),
-              children: [
-                /* @__PURE__ */ jsx("option", { value: "", disabled: true }),
-                Array.from({ length: 12 }, (_, i) => i + 1).map((m2) => /* @__PURE__ */ jsx("option", { value: m2, children: pad(m2) }, m2))
-              ]
-            }
-          ),
-          mode === "year-month-day" && /* @__PURE__ */ jsxs(
-            "select",
-            {
-              value: day,
-              disabled: disabled || !month,
-              onChange: (e) => emit(year, month, Number(e.target.value)),
-              children: [
-                /* @__PURE__ */ jsx("option", { value: "", disabled: true }),
-                Array.from({ length: days }, (_, i) => i + 1).map(
-                  (d2) => /* @__PURE__ */ jsx("option", { value: d2, children: pad(d2) }, d2)
-                )
-              ]
-            }
+  return /* @__PURE__ */ jsxs("div", { className: "date_picker", style: { width: normalizeWidth(width?.container) }, children: [
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        style: { width: normalizeWidth(width?.year) },
+        value: year,
+        disabled,
+        onChange: (e) => emit(Number(e.target.value), month || minMonth, day || minDay),
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", disabled: true }),
+          Array.from(
+            { length: endYear - startYear + 1 },
+            (_, i) => startYear + i
+          ).map((y2) => /* @__PURE__ */ jsx("option", { value: y2, children: y2 }, y2))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        style: { width: normalizeWidth(width?.month) },
+        value: month,
+        disabled: disabled || !year,
+        onChange: (e) => emit(year, Number(e.target.value), day || minDay),
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", disabled: true }),
+          Array.from({ length: 12 - minMonth + 1 }, (_, i) => minMonth + i).map(
+            (m2) => /* @__PURE__ */ jsx("option", { value: m2, children: pad(m2) }, m2)
           )
-        ] })
-      ]
-    }
-  );
+        ]
+      }
+    ),
+    mode === "year-month-day" && /* @__PURE__ */ jsxs(
+      "select",
+      {
+        style: { width: normalizeWidth(width?.day) },
+        value: day,
+        disabled: disabled || !month,
+        onChange: (e) => emit(year, month, Number(e.target.value)),
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", disabled: true }),
+          Array.from(
+            { length: days - minDay + 1 },
+            (_, i) => minDay + i
+          ).map((d2) => /* @__PURE__ */ jsx("option", { value: d2, children: pad(d2) }, d2))
+        ]
+      }
+    )
+  ] });
 };
 var range = (start, end) => {
   const out = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigtablet/design-system",
-  "version": "1.11.2",
+  "version": "1.11.4",
   "description": "Bigtablet Design System UI Components",
   "type": "module",
   "types": "dist/index.d.ts",