@uniai-fe/uds-primitives 0.12.10 → 0.12.12

package/dist/styles.css

@@ -4657,7 +4657,9 @@ figure.chip {
 }
 
 .input-time-period-field {
+  flex: 0 1 var(--input-time-period-field-width);
   width: var(--input-time-period-field-width);
+  min-width: 0;
   height: var(--input-time-field-height);
   padding: 0;
   border: 0;
@@ -4728,6 +4730,15 @@ figure.chip {
   border-radius: var(--input-time-radius) 0 0 var(--input-time-radius);
 }
 
+.input-time:where([data-active-unit][data-format="12h"])
+  .input-time-trigger-input {
+  padding-inline: var(--spacing-padding-2);
+}
+.input-time:where([data-active-unit][data-format="12h"])
+  .input-time-icon-button {
+  margin-left: var(--spacing-gap-2);
+}
+
 .input-time:where([data-size="small"]) {
   --input-time-radius: var(--input-default-radius-small);
   --input-time-stepper-button-height: calc(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.12.10",
+  "version": "0.12.12",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,
@@ -87,11 +87,11 @@
     "react-hook-form": "^7.86.0",
     "sass": "^1.102.0",
     "typescript": "6.0.3",
-    "@uniai-fe/eslint-config": "0.4.3",
+    "@uniai-fe/eslint-config": "0.4.4",
+    "@uniai-fe/util-functions": "0.4.3",
     "@uniai-fe/tsconfig": "0.2.0",
-    "@uniai-fe/uds-foundation": "0.6.0",
     "@uniai-fe/next-devkit": "0.4.1",
-    "@uniai-fe/util-functions": "0.4.3"
+    "@uniai-fe/uds-foundation": "0.6.0"
   },
   "scripts": {
     "check:pre-commit": "pnpm --dir ../../.. run check:pre-commit",

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,6 +299,7 @@ const InputDateTemplate = forwardRef<HTMLDivElement, InputCalendarProps>(
             name={register?.name ?? name}
             form={form ?? hiddenInputProps?.form}
             required={required ?? hiddenInputProps?.required}
+            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,6 +357,7 @@ const InputDateRangeTemplate = forwardRef<HTMLElement, InputCalendarRangeProps>(
             name={startRegister?.name ?? startName}
             form={form ?? startHiddenInputProps?.form}
             required={required ?? startHiddenInputProps?.required}
+            ref={startHiddenInputRef}
           />
         )}
         {(endRegister?.name || endName) && (
@@ -360,6 +370,7 @@ const InputDateRangeTemplate = forwardRef<HTMLElement, InputCalendarRangeProps>(
             name={endRegister?.name ?? endName}
             form={form ?? endHiddenInputProps?.form}
             required={required ?? endHiddenInputProps?.required}
+            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;
+  };
+}

package/src/components/input/markup/time/Trigger.tsx

@@ -126,6 +126,7 @@ const InputTimeTrigger = forwardRef<HTMLDivElement, InputTimeTriggerProps>(
         data-state={state}
         data-readonly={readOnly ? "true" : undefined}
         data-active-unit={activeUnit ?? undefined}
+        data-format={format}
         data-icon-position={iconPosition}
         onBlur={onRootBlur}
         onClick={onRootClick}

package/src/components/input/styles/time.scss

@@ -85,7 +85,9 @@
 }
 
 .input-time-period-field {
+  flex: 0 1 var(--input-time-period-field-width);
   width: var(--input-time-period-field-width);
+  min-width: 0;
   height: var(--input-time-field-height);
   padding: 0;
   border: 0;
@@ -160,6 +162,16 @@
   border-radius: var(--input-time-radius) 0 0 var(--input-time-radius);
 }
 
+.input-time:where([data-active-unit][data-format="12h"]) {
+  .input-time-trigger-input {
+    padding-inline: var(--spacing-padding-2);
+  }
+
+  .input-time-icon-button {
+    margin-left: var(--spacing-gap-2);
+  }
+}
+
 .input-time:where([data-size="small"]) {
   --input-time-radius: var(--input-default-radius-small);
   --input-time-stepper-button-height: calc(