@uniai-fe/uds-primitives 0.3.22 → 0.3.24

package/dist/styles.css

@@ -299,11 +299,16 @@
   --dropdown-description-color: var(--color-label-neutral);
   --dropdown-description-size: 14px;
   --dropdown-description-line-height: 22px;
+  --dropdown-text-size-selected: var(--dropdown-text-medium-size);
+  --dropdown-text-line-height-selected: var(--dropdown-text-medium-line-height);
+  --dropdown-text-letter-spacing-selected: var(
+  --dropdown-text-medium-letter-spacing
+  );
   --dropdown-option-height-selected: var(--dropdown-option-height-medium);
   --dropdown-option-height-xsmall: 24px;
-  --dropdown-option-height-small: var(--theme-size-medium-1, 40px);
-  --dropdown-option-height-medium: var(--theme-size-medium-2, 48px);
-  --dropdown-option-height-large: var(--theme-size-medium-3, 56px);
+  --dropdown-option-height-small: var(--theme-size-medium-1);
+  --dropdown-option-height-medium: var(--theme-size-medium-2);
+  --dropdown-option-height-large: var(--theme-size-medium-3);
   --dropdown-option-padding-inline-xsmall: var(--spacing-padding-3);
   --dropdown-option-padding-block-xsmall: 0px;
   --dropdown-option-radius-xsmall: 4px;
@@ -2299,15 +2304,18 @@ figure.chip {
   align-items: center;
   gap: var(--dropdown-option-gap-inline);
   width: 100%;
-  min-height: var(--dropdown-option-height-selected, var(--dropdown-option-height-medium));
+  min-height: var(--dropdown-option-height-selected);
   padding: var(--dropdown-option-padding-block-selected) var(--dropdown-option-padding-inline-selected);
   border-radius: var(--dropdown-option-radius-selected);
   background-color: transparent;
   color: var(--dropdown-option-color);
   cursor: pointer;
-  font-size: var(--dropdown-option-font-size, var(--dropdown-text-medium-size));
-  font-weight: var(--dropdown-option-font-weight, var(--dropdown-text-weight));
-  line-height: var(--dropdown-option-line-height, var(--dropdown-text-medium-line-height));
+  font-size: var(--dropdown-text-size-selected);
+  font-weight: var(--dropdown-text-weight);
+  line-height: var(--dropdown-text-line-height-selected);
+}
+.dropdown-menu-item-trigger span {
+  user-select: none;
 }
 .dropdown-menu-item-trigger[data-state=selected] {
   background-color: var(--dropdown-option-bg-selected);
@@ -2335,7 +2343,7 @@ figure.chip {
 
 .dropdown-menu-item-left,
 .dropdown-menu-item-right {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   color: inherit;
 }
@@ -2346,22 +2354,28 @@ figure.chip {
   gap: 0.2rem;
   flex: 1 1 auto;
   min-width: 0;
+  overflow: hidden;
 }
 
 .dropdown-menu-item-label {
-  display: inline-flex;
-  align-items: center;
+  display: block;
   min-width: 0;
+  width: 100%;
+  max-width: 100%;
   color: inherit;
-  font-size: var(--dropdown-text-size-selected, var(--dropdown-text-medium-size));
-  line-height: var(--dropdown-text-line-height-selected, var(--dropdown-text-medium-line-height));
-  letter-spacing: var(--dropdown-text-letter-spacing-selected, var(--dropdown-text-medium-letter-spacing));
+  font-size: var(--dropdown-text-size-selected);
+  line-height: var(--dropdown-text-line-height-selected);
+  letter-spacing: var(--dropdown-text-letter-spacing-selected);
   font-weight: var(--dropdown-text-weight);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.dropdown-menu-item-trigger > .dropdown-menu-item-label {
+  flex: 1 1 auto;
+}
+
 .dropdown-menu-item-description {
   font-size: var(--dropdown-description-size);
   line-height: var(--dropdown-description-line-height);

package/package.json

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

package/src/components/dropdown/markup/foundation/MenuItem.tsx

@@ -6,7 +6,7 @@ import { forwardRef } from "react";
 
 import type { DropdownMenuItemProps } from "../../types/props";
 import { Checkbox } from "../../../checkbox/markup/Checkbox";
-import type { CheckboxProps } from "../../../checkbox/types";
+import { Slot } from "../../../slot";
 
 /**
  * Dropdown Foundation; Menu Item 옵션 렌더링 컴포넌트
@@ -41,44 +41,36 @@ const DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(
     },
     ref,
   ) => {
-    const labelContent = label ?? children;
-    // 변경: label/children이 string|number일 때만 준비된 label span으로 매핑하고, 그 외 ReactNode는 그대로 렌더링한다.
-    const resolvedLabelContent =
-      typeof labelContent === "string" || typeof labelContent === "number" ? (
-        <span className="dropdown-menu-item-label">{labelContent}</span>
-      ) : (
-        labelContent
-      );
-    const hasDescription = Boolean(description);
-    const shouldRenderCheckbox = multiple && !left;
-
     const renderLeft = () => {
-      if (shouldRenderCheckbox) {
-        const checkboxClassName = clsx(
-          "dropdown-menu-item-checkbox",
-          checkboxProps?.className,
-        );
+      // 변경: 좌측 콘텐츠가 전혀 없고 multiple도 아니면 즉시 null을 반환한다.
+      if (!left && !multiple) {
+        return null;
+      }
 
-        const checkboxAdditionalProps: CheckboxProps = {
-          ...checkboxProps,
-          checked: isSelected,
-          onCheckedChange: checkboxProps?.onCheckedChange ?? (() => {}),
-          tabIndex: -1,
-          "aria-hidden": true,
-          className: checkboxClassName,
-        } as CheckboxProps;
+      // 변경: left가 있으면 우선 렌더링하고 체크박스 분기보다 앞에서 종료한다.
+      if (left) {
+        return <span className="dropdown-menu-item-left">{left}</span>;
+      }
 
+      if (multiple) {
         return (
           <span className="dropdown-menu-item-left" aria-hidden="true">
-            <Checkbox size="medium" {...checkboxAdditionalProps} />
+            <Checkbox
+              size="medium"
+              {...checkboxProps}
+              checked={isSelected}
+              onCheckedChange={checkboxProps?.onCheckedChange ?? (() => {})}
+              tabIndex={-1}
+              aria-hidden="true"
+              className={clsx(
+                "dropdown-menu-item-checkbox",
+                checkboxProps?.className,
+              )}
+            />
           </span>
         );
       }
 
-      if (left) {
-        return <span className="dropdown-menu-item-left">{left}</span>;
-      }
-
       return null;
     };
 
@@ -90,7 +82,7 @@ const DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(
           className={clsx("dropdown-menu-item-trigger", className)}
           data-state={isSelected ? "selected" : undefined}
           data-multiple={multiple ? "true" : undefined}
-          data-has-description={hasDescription ? "true" : undefined}
+          data-has-description={description ? "true" : undefined}
           onSelect={event => {
             if (multiple) {
               event.preventDefault();
@@ -99,14 +91,21 @@ const DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(
           }}
         >
           {renderLeft()}
-          <span className="dropdown-menu-item-body">
-            {resolvedLabelContent}
-            {description ? (
+          {/* 변경: description이 있을 때만 body wrapper를 렌더링해 불필요한 중첩 span을 줄인다. */}
+          {description ? (
+            <span className="dropdown-menu-item-body">
+              <Slot.Text className="dropdown-menu-item-label">
+                {label ?? children}
+              </Slot.Text>
               <span className="dropdown-menu-item-description">
                 {description}
               </span>
-            ) : null}
-          </span>
+            </span>
+          ) : (
+            <Slot.Text className="dropdown-menu-item-label">
+              {label ?? children}
+            </Slot.Text>
+          )}
           {right ? (
             <span className="dropdown-menu-item-right">{right}</span>
           ) : null}

package/src/components/dropdown/styles/dropdown.scss

@@ -81,22 +81,20 @@
   align-items: center;
   gap: var(--dropdown-option-gap-inline);
   width: 100%;
-  min-height: var(
-    --dropdown-option-height-selected,
-    var(--dropdown-option-height-medium)
-  );
+  min-height: var(--dropdown-option-height-selected);
   padding: var(--dropdown-option-padding-block-selected)
     var(--dropdown-option-padding-inline-selected);
   border-radius: var(--dropdown-option-radius-selected);
   background-color: transparent;
   color: var(--dropdown-option-color);
   cursor: pointer;
-  font-size: var(--dropdown-option-font-size, var(--dropdown-text-medium-size));
-  font-weight: var(--dropdown-option-font-weight, var(--dropdown-text-weight));
-  line-height: var(
-    --dropdown-option-line-height,
-    var(--dropdown-text-medium-line-height)
-  );
+  font-size: var(--dropdown-text-size-selected);
+  font-weight: var(--dropdown-text-weight);
+  line-height: var(--dropdown-text-line-height-selected);
+
+  span {
+    user-select: none;
+  }
 
   &[data-state="selected"] {
     background-color: var(--dropdown-option-bg-selected);
@@ -134,7 +132,8 @@
 
 .dropdown-menu-item-left,
 .dropdown-menu-item-right {
-  display: inline-flex;
+  // 변경: inline-* 금지 규칙에 맞춰 정렬 컨테이너를 flex로 통일한다.
+  display: flex;
   align-items: center;
   color: inherit;
 }
@@ -145,31 +144,30 @@
   gap: 0.2rem;
   flex: 1 1 auto;
   min-width: 0;
+  overflow: hidden;
 }
 
 .dropdown-menu-item-label {
-  display: inline-flex;
-  align-items: center;
+  // 변경: 말줄임표 동작을 위해 라벨 박스를 block + width 제약으로 고정한다.
+  display: block;
   min-width: 0;
+  width: 100%;
+  max-width: 100%;
   color: inherit;
-  font-size: var(
-    --dropdown-text-size-selected,
-    var(--dropdown-text-medium-size)
-  );
-  line-height: var(
-    --dropdown-text-line-height-selected,
-    var(--dropdown-text-medium-line-height)
-  );
-  letter-spacing: var(
-    --dropdown-text-letter-spacing-selected,
-    var(--dropdown-text-medium-letter-spacing)
-  );
+  font-size: var(--dropdown-text-size-selected);
+  line-height: var(--dropdown-text-line-height-selected);
+  letter-spacing: var(--dropdown-text-letter-spacing-selected);
   font-weight: var(--dropdown-text-weight);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+// 변경: description이 없어 body wrapper를 생략하는 경로에서 label이 가용 폭을 차지하도록 한다.
+.dropdown-menu-item-trigger > .dropdown-menu-item-label {
+  flex: 1 1 auto;
+}
+
 .dropdown-menu-item-description {
   font-size: var(--dropdown-description-size);
   line-height: var(--dropdown-description-line-height);

package/src/components/dropdown/styles/variables.scss

@@ -53,11 +53,18 @@
   --dropdown-description-size: 14px;
   --dropdown-description-line-height: 22px;
 
+  // 변경: fallback 없는 토큰 계약을 위해 기본 selected typography를 root에서 명시한다.
+  --dropdown-text-size-selected: var(--dropdown-text-medium-size);
+  --dropdown-text-line-height-selected: var(--dropdown-text-medium-line-height);
+  --dropdown-text-letter-spacing-selected: var(
+    --dropdown-text-medium-letter-spacing
+  );
+
   --dropdown-option-height-selected: var(--dropdown-option-height-medium);
   --dropdown-option-height-xsmall: 24px;
-  --dropdown-option-height-small: var(--theme-size-medium-1, 40px);
-  --dropdown-option-height-medium: var(--theme-size-medium-2, 48px);
-  --dropdown-option-height-large: var(--theme-size-medium-3, 56px);
+  --dropdown-option-height-small: var(--theme-size-medium-1);
+  --dropdown-option-height-medium: var(--theme-size-medium-2);
+  --dropdown-option-height-large: var(--theme-size-medium-3);
   --dropdown-option-padding-inline-xsmall: var(--spacing-padding-3);
   --dropdown-option-padding-block-xsmall: 0px;
   --dropdown-option-radius-xsmall: 4px;

package/src/components/slot/markup/Text.tsx

@@ -21,12 +21,30 @@ export default function SlotText<C extends ElementType = "span">({
     return children;
   }
 
+  // 변경: rest spread로 유입될 수 있는 className 충돌을 제거해 slot-text 클래스가 항상 유지되도록 한다.
+  const restPropsRecord = restProps as Record<string, unknown>;
+  const restClassName =
+    typeof restPropsRecord.className === "string"
+      ? restPropsRecord.className
+      : undefined;
+  const mergedClassName = clsx("slot-text", restClassName, className);
+  const normalizedRestProps = { ...restPropsRecord };
+  delete normalizedRestProps.className;
+
+  const hasCustomTitle =
+    "title" in normalizedRestProps &&
+    typeof normalizedRestProps.title !== "undefined";
+
+  // 변경: 텍스트 children은 기본 title을 자동 주입해 native tooltip 경로를 보장한다.
+  const nativeTitleProps = hasCustomTitle ? {} : { title: String(children) };
+
   // 문자열/숫자 children만 공통 slot text 마크업으로 감싼다.
   return (
     <SlotBase
       as={as as ElementType}
-      className={clsx("slot-text", className)}
-      {...restProps}
+      className={mergedClassName}
+      {...nativeTitleProps}
+      {...normalizedRestProps}
     >
       {children}
     </SlotBase>