@uniai-fe/uds-primitives 0.12.11 → 0.12.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.12.11",
+  "version": "0.12.12",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,
@@ -88,9 +88,9 @@
     "sass": "^1.102.0",
     "typescript": "6.0.3",
     "@uniai-fe/eslint-config": "0.4.4",
-    "@uniai-fe/next-devkit": "0.4.1",
     "@uniai-fe/util-functions": "0.4.3",
     "@uniai-fe/tsconfig": "0.2.0",
+    "@uniai-fe/next-devkit": "0.4.1",
     "@uniai-fe/uds-foundation": "0.6.0"
   },
   "scripts": {

package/src/components/input/markup/date/Template.tsx

@@ -21,6 +21,7 @@ import {
 } from "../../utils/date";
 import InputDateFooterTemplate from "./footer/Template";
 import InputDateTrigger from "./Trigger";
+import useHiddenDateRegister from "./useHiddenDateRegister";
 
 const INPUT_DATE_TABLE_FORMAT = "YY-MM-DD";
 
@@ -180,6 +181,10 @@ const InputDateTemplate = forwardRef<HTMLDivElement, InputCalendarProps>(
       [calendarValue, priority],
     );
     const serializedCalendarValue = serializeCalendarValue(calendarValue);
+    const hiddenInputRef = useHiddenDateRegister(
+      serializedCalendarValue,
+      register,
+    );
 
     /**
      * Input Date Template; trigger click 위임 함수.
@@ -294,23 +299,7 @@ const InputDateTemplate = forwardRef<HTMLDivElement, InputCalendarProps>(
             name={register?.name ?? name}
             form={form ?? hiddenInputProps?.form}
             required={required ?? hiddenInputProps?.required}
-            ref={node => {
-              register?.ref(node);
-              if (node && register) {
-                // RHF ref의 form default 적용이 끝난 뒤 Calendar 값을 DOM과 RHF storage에 동기화한다.
-                queueMicrotask(() => {
-                  if (!node.isConnected) {
-                    return;
-                  }
-                  node.value = serializedCalendarValue;
-                  void register.onChange({
-                    target: node,
-                    currentTarget: node,
-                    type: "change",
-                  } as unknown as ChangeEvent<HTMLInputElement>);
-                });
-              }
-            }}
+            ref={hiddenInputRef}
           />
         )}
       </>

package/src/components/input/markup/date/range/Template.tsx

@@ -26,6 +26,7 @@ import InputDateTodayButton from "../button/TodayButton";
 import InputDateFooterTemplateContainer from "../footer/Container";
 import InputDateFooterUtilContainer from "../footer/UtilContainer";
 import InputDateTrigger from "../Trigger";
+import useHiddenDateRegister from "../useHiddenDateRegister";
 
 const INPUT_DATE_RANGE_TABLE_FORMAT = "YY-MM-DD";
 
@@ -212,6 +213,14 @@ const InputDateRangeTemplate = forwardRef<HTMLElement, InputCalendarRangeProps>(
     );
     const serializedStartValue = serializeCalendarValue(calendarValue[0]);
     const serializedEndValue = serializeCalendarValue(calendarValue[1]);
+    const startHiddenInputRef = useHiddenDateRegister(
+      serializedStartValue,
+      startRegister,
+    );
+    const endHiddenInputRef = useHiddenDateRegister(
+      serializedEndValue,
+      endRegister,
+    );
 
     /**
      * Input Date Range Template; trigger click 위임 함수.
@@ -348,23 +357,7 @@ const InputDateRangeTemplate = forwardRef<HTMLElement, InputCalendarRangeProps>(
             name={startRegister?.name ?? startName}
             form={form ?? startHiddenInputProps?.form}
             required={required ?? startHiddenInputProps?.required}
-            ref={node => {
-              startRegister?.ref(node);
-              if (node && startRegister) {
-                // RHF ref의 form default 적용이 끝난 뒤 range 시작값을 DOM과 RHF storage에 동기화한다.
-                queueMicrotask(() => {
-                  if (!node.isConnected) {
-                    return;
-                  }
-                  node.value = serializedStartValue;
-                  void startRegister.onChange({
-                    target: node,
-                    currentTarget: node,
-                    type: "change",
-                  } as unknown as ChangeEvent<HTMLInputElement>);
-                });
-              }
-            }}
+            ref={startHiddenInputRef}
           />
         )}
         {(endRegister?.name || endName) && (
@@ -377,23 +370,7 @@ const InputDateRangeTemplate = forwardRef<HTMLElement, InputCalendarRangeProps>(
             name={endRegister?.name ?? endName}
             form={form ?? endHiddenInputProps?.form}
             required={required ?? endHiddenInputProps?.required}
-            ref={node => {
-              endRegister?.ref(node);
-              if (node && endRegister) {
-                // RHF ref의 form default 적용이 끝난 뒤 range 종료값을 DOM과 RHF storage에 동기화한다.
-                queueMicrotask(() => {
-                  if (!node.isConnected) {
-                    return;
-                  }
-                  node.value = serializedEndValue;
-                  void endRegister.onChange({
-                    target: node,
-                    currentTarget: node,
-                    type: "change",
-                  } as unknown as ChangeEvent<HTMLInputElement>);
-                });
-              }
-            }}
+            ref={endHiddenInputRef}
           />
         )}
       </>

package/src/components/input/markup/date/useHiddenDateRegister.ts

@@ -0,0 +1,39 @@
+import type { ChangeEvent } from "react";
+import { useLayoutEffect, useRef } from "react";
+import type { UseFormRegisterReturn } from "react-hook-form";
+
+/**
+ * Input.Date hidden input의 RHF 등록과 저장값 동기화.
+ * @hook
+ * @param {string} value Calendar의 직렬화된 날짜 값
+ * @param {UseFormRegisterReturn | undefined} register RHF 필드 등록 결과
+ * @desc ref 연결 후 값이나 필드가 바뀔 때만 RHF change를 전달해 재렌더 반복을 막는다.
+ * @return {(node: HTMLInputElement | null) => void} hidden input ref callback
+ */
+export default function useHiddenDateRegister(
+  value: string,
+  register?: UseFormRegisterReturn,
+) {
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const onChange = register?.onChange;
+  const registerName = register?.name;
+
+  useLayoutEffect(() => {
+    const node = inputRef.current;
+    if (!node || !onChange) {
+      return;
+    }
+    // RHF ref가 form default를 적용한 뒤 Calendar 값을 저장한다.
+    node.value = value;
+    void onChange({
+      target: node,
+      currentTarget: node,
+      type: "change",
+    } as unknown as ChangeEvent<HTMLInputElement>);
+  }, [value, registerName, onChange]);
+
+  return (node: HTMLInputElement | null) => {
+    register?.ref(node);
+    inputRef.current = node;
+  };
+}