@uniai-fe/uds-primitives 0.6.13 → 0.6.14

package/dist/styles.css

@@ -3572,14 +3572,21 @@ figure.chip {
 }
 
 .input-date-trigger-icon {
-  margin: 0;
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
+  flex: 0 0 28px;
   width: 28px;
   height: 28px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
   color: var(--color-label-alternative);
-  pointer-events: none;
+  cursor: pointer;
+}
+.input-date-trigger-icon:where([aria-disabled=true]) {
+  cursor: default;
 }
 
 .input-date-trigger-input.input-priority-table .input-field {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.6.13",
+  "version": "0.6.14",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,

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

@@ -8,7 +8,7 @@ import type {
   KeyboardEvent,
   MouseEvent,
 } from "react";
-import { forwardRef } from "react";
+import { forwardRef, useCallback, useRef } from "react";
 import { Calendar } from "../../../calendar";
 import { InputFoundation } from "../foundation";
 import type { InputCalendarTriggerViewProps } from "../../types";
@@ -52,6 +52,22 @@ const InputDateTrigger = forwardRef<
     },
     ref,
   ) => {
+    const triggerInputRef = useRef<HTMLInputElement | null>(null);
+
+    const setTriggerInputRef = useCallback(
+      (node: HTMLInputElement | null) => {
+        triggerInputRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+          return;
+        }
+        if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref],
+    );
+
     /**
      * Radix `asChild`가 주입한 onClick을 보존하기 위해 restProps.onClick을 병합한다.
      * (Input Date 자체 onClick 계약도 함께 실행)
@@ -63,6 +79,17 @@ const InputDateTrigger = forwardRef<
       }
       onClick?.(event as never);
     };
+
+    const handleIconClick = (event: MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault();
+      if (disabled || readOnly) {
+        return;
+      }
+
+      triggerInputRef.current?.focus();
+      triggerInputRef.current?.click();
+    };
+
     // 변경: Date trigger는 기본적으로 직접 타이핑을 막고, 달력 선택을 단일 입력 경로로 유지한다.
     const shouldBlockTyping = !disabled && !readOnly;
 
@@ -113,10 +140,23 @@ const InputDateTrigger = forwardRef<
       }
     };
 
+    const calendarIcon = (
+      <button
+        type="button"
+        className="input-date-trigger-icon"
+        tabIndex={-1}
+        aria-label="달력 열기"
+        aria-disabled={disabled || readOnly ? true : undefined}
+        onClick={handleIconClick}
+      >
+        <Calendar.Icon.Calendar />
+      </button>
+    );
+
     return (
       <InputFoundation.Base
         {...restProps}
-        ref={ref}
+        ref={setTriggerInputRef}
         value={displayValue}
         // PopOver.Trigger(asChild)가 주입한 `type="button"`으로 placeholder가 사라지는 문제를 막기 위해
         // Date trigger는 항상 text type을 유지한다.
@@ -137,21 +177,9 @@ const InputDateTrigger = forwardRef<
         onPaste={handlePaste}
         onDrop={handleDrop}
         // table priority는 icon을 왼쪽 슬롯에 배치한다.
-        left={
-          priority === "table" ? (
-            <figure className="input-date-trigger-icon" aria-hidden="true">
-              <Calendar.Icon.Calendar />
-            </figure>
-          ) : undefined
-        }
+        left={priority === "table" ? calendarIcon : undefined}
         // 기본(priority != table)은 기존처럼 icon을 오른쪽 슬롯에 유지한다.
-        right={
-          priority === "table" ? undefined : (
-            <figure className="input-date-trigger-icon" aria-hidden="true">
-              <Calendar.Icon.Calendar />
-            </figure>
-          )
-        }
+        right={priority === "table" ? undefined : calendarIcon}
       />
     );
   },

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

@@ -10,15 +10,22 @@
 }
 
 .input-date-trigger-icon {
-  margin: 0;
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
+  flex: 0 0 28px;
   width: 28px;
   height: 28px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
   color: var(--color-label-alternative);
-  // 아이콘 영역 클릭은 input으로 위임한다.
-  pointer-events: none;
+  cursor: pointer;
+
+  &:where([aria-disabled="true"]) {
+    cursor: default;
+  }
 }
 
 .input-date-trigger-input.input-priority-table {