@uniai-fe/uds-primitives 0.10.0 → 0.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,
@@ -63,13 +63,13 @@
     "dayjs": "^1.11.20"
   },
   "dependencies": {
-    "@radix-ui/react-checkbox": "^1.3.3",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-radio-group": "^1.3.8",
-    "@radix-ui/react-tabs": "^1.1.13",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "@radix-ui/react-visually-hidden": "^1.2.4",
+    "@radix-ui/react-checkbox": "^1.3.8",
+    "@radix-ui/react-dropdown-menu": "^2.1.21",
+    "@radix-ui/react-popover": "^1.1.20",
+    "@radix-ui/react-radio-group": "^1.4.4",
+    "@radix-ui/react-tabs": "^1.1.18",
+    "@radix-ui/react-tooltip": "^1.2.13",
+    "@radix-ui/react-visually-hidden": "^1.2.8",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.21",
     "react-daum-postcode": "^4.0.0"
@@ -79,19 +79,19 @@
     "@mantine/dates": "^8.3.18",
     "@mantine/hooks": "^8.3.18",
     "@svgr/webpack": "^8.1.0",
-    "@types/node": "^24.12.3",
+    "@types/node": "^24.13.3",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "eslint": "^9.39.2",
-    "prettier": "^3.8.4",
-    "react-hook-form": "^7.80.0",
-    "sass": "^1.101.0",
+    "eslint": "^9.39.5",
+    "prettier": "^3.9.6",
+    "react-hook-form": "^7.82.0",
+    "sass": "^1.101.3",
     "typescript": "6.0.3",
-    "@uniai-fe/eslint-config": "0.4.0",
-    "@uniai-fe/util-functions": "0.4.1",
-    "@uniai-fe/next-devkit": "0.4.0",
+    "@uniai-fe/uds-foundation": "0.5.0",
+    "@uniai-fe/eslint-config": "0.4.2",
     "@uniai-fe/tsconfig": "0.2.0",
-    "@uniai-fe/uds-foundation": "0.5.0"
+    "@uniai-fe/util-functions": "0.4.3",
+    "@uniai-fe/next-devkit": "0.4.0"
   },
   "scripts": {
     "check:pre-commit": "pnpm --dir ../../.. run check:pre-commit",

package/src/components/select/markup/Default.tsx

@@ -1,10 +1,11 @@
 "use client";
 
 import clsx from "clsx";
-import { useMemo, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import type { ReactNode } from "react";
 
 import { Dropdown } from "../../dropdown/markup";
+import type { DropdownContainerProps } from "../../dropdown/types";
 import { SelectTriggerBase, SelectTriggerSelected } from "./foundation";
 import Container from "./foundation/Container";
 import { useSelectDropdownOpenState } from "../hooks";
@@ -20,9 +21,21 @@ import {
 const SELECT_CUSTOM_OPTION_BASE_ID = "__select_custom_input__";
 const SELECT_CUSTOM_OPTION_VALUE = "CUSTOM";
 
+/**
+ * Radix DropdownMenu.Content가 runtime에서 처리하는 open auto-focus 확장 props
+ * @property {(event: Event) => void} [onOpenAutoFocus] open 직후 focus 이동을 제어하는 consumer handler
+ */
+type DropdownContainerRuntimeProps = DropdownContainerProps & {
+  /**
+   * open 직후 focus 이동을 제어하는 consumer handler
+   */
+  onOpenAutoFocus?: (event: Event) => void;
+};
+
 /**
  * Select default trigger; 단일 선택 드롭다운을 렌더링한다.
  * @component
+ * @desc enabled selected option이 있으면 open 직후 해당 item을 focus하고 dropdown panel viewport만 nearest 기준으로 정렬한다. consumer open auto-focus handler가 기본 동작을 막으면 consumer 결정을 우선한다.
  * @param {SelectDefaultComponentProps} props default trigger props
  * @param {string} [props.className] container className
  * @param {ReactNode} [props.displayLabel] 강제 표시 라벨
@@ -217,6 +230,42 @@ export function SelectDefault<OptionData = unknown>({
   // 13) disabled/readOnly 상태에서는 open/option 선택 인터랙션을 모두 차단한다.
   const isInteractionBlocked = disabled || readOnly;
 
+  // 13-1) panel과 enabled selected item을 runtime focus/viewport 정렬 대상으로 추적한다.
+  const dropdownPanelRef = useRef<HTMLDivElement>(null);
+  const selectedOptionRef = useRef<HTMLDivElement>(null);
+
+  // 13-2) consumer handler → selected focus → panel-only nearest scroll 순서를 보존한다.
+  const onOpenAutoFocus = (event: Event) => {
+    // consumer가 명시적으로 기본 동작을 막으면 내부 focus/scroll을 적용하지 않는다.
+    (
+      dropdownOptions?.containerProps as
+        DropdownContainerRuntimeProps | undefined
+    )?.onOpenAutoFocus?.(event);
+    if (event.defaultPrevented) {
+      return;
+    }
+
+    const panel = dropdownPanelRef.current;
+    const selectedItem = selectedOptionRef.current;
+    // selected가 없거나 disabled이면 ref가 없으므로 Radix 기본 focus 동작을 유지한다.
+    if (!panel || !selectedItem) {
+      return;
+    }
+
+    // Radix의 panel focus를 막고 outer container/document scroll 없이 selected item만 focus한다.
+    event.preventDefault();
+    selectedItem.focus({ preventScroll: true });
+
+    // viewport 밖으로 벗어난 거리만 panel.scrollTop에 반영해 nearest 정렬을 수행한다.
+    const panelRect = panel.getBoundingClientRect();
+    const selectedItemRect = selectedItem.getBoundingClientRect();
+    if (selectedItemRect.top < panelRect.top) {
+      panel.scrollTop -= panelRect.top - selectedItemRect.top;
+    } else if (selectedItemRect.bottom > panelRect.bottom) {
+      panel.scrollTop += selectedItemRect.bottom - panelRect.bottom;
+    }
+  };
+
   // 14) open 상태 변경 처리: 차단 상태면 닫힘 고정, 아니면 nextOpen 반영.
   const handleOpenChange = (nextOpen: boolean) => {
     if (isInteractionBlocked) {
@@ -347,9 +396,13 @@ export function SelectDefault<OptionData = unknown>({
         </Dropdown.Trigger>
         <Dropdown.Container
           {...dropdownOptions?.containerProps}
+          ref={dropdownPanelRef}
           size={dropdownOptions?.size ?? resolvedSize}
           width={dropdownOptions?.width ?? "match"}
           minWidth={dropdownOptions?.minWidth}
+          {...({
+            onOpenAutoFocus,
+          } as DropdownContainerProps)}
         >
           <Dropdown.Menu.List {...dropdownOptions?.menuListProps}>
             {mergedOptions.length > 0 ? (
@@ -357,6 +410,16 @@ export function SelectDefault<OptionData = unknown>({
                 {mergedOptions.map(option => (
                   <Dropdown.Menu.Item
                     key={option.id}
+                    // disabled option은 초기 focus 대상에서 제외하고 현재 단일 selected item만 추적한다.
+                    ref={
+                      !option.disabled &&
+                      isSameSelectedValue(
+                        resolvedSelectedOption?.value,
+                        option.value,
+                      )
+                        ? selectedOptionRef
+                        : undefined
+                    }
                     label={option.label}
                     description={option.description}
                     disabled={option.disabled}