@uniai-fe/uds-primitives 0.3.17 → 0.3.19

package/src/components/select/markup/multiple/Multiple.tsx

@@ -8,6 +8,7 @@ import { Dropdown } from "../../../dropdown/markup";
 import type { DropdownSize } from "../../../dropdown/types";
 import type { SelectMultipleComponentProps } from "../../types/props";
 import type { SelectMultipleTag } from "../../types/multiple";
+import type { SelectDropdownOption } from "../../types/option";
 import { SelectMultipleSelectedChip } from "./SelectedChip";
 import { SelectTriggerBase, SelectTriggerSelected } from "../foundation";
 import { useSelectDropdownOpenState } from "../../hooks";
@@ -15,6 +16,8 @@ import { useSelectDropdownOpenState } from "../../hooks";
 const isSameIdList = (previousIds: string[], nextIds: string[]) =>
   previousIds.length === nextIds.length &&
   previousIds.every((selectedId, index) => selectedId === nextIds[index]);
+// 변경: synthetic "전체" 옵션 id의 기본 키다. 실제 options id와 충돌하면 suffix를 붙여 회피한다.
+const SELECT_MULTIPLE_ALL_OPTION_BASE_ID = "__select_multiple_all__";
 
 /**
  * Select trigger for multi select; 선택된 tag들을 chip 형태로 렌더링한다.
@@ -44,6 +47,8 @@ const isSameIdList = (previousIds: string[], nextIds: string[]) =>
  * @param {boolean} [props.open] controlled open 상태
  * @param {boolean} [props.defaultOpen] uncontrolled 초기 open 상태
  * @param {(open: boolean) => void} [props.onOpenChange] open 상태 변경 콜백
+ * @param {boolean} [props.showSelectAllOption] dropdown 첫 번째에 "전체" 옵션 노출 여부
+ * @param {React.ReactNode} [props.selectAllLabel="전체"] 전체 옵션 라벨
  */
 const SelectMultipleTrigger = forwardRef<
   HTMLElement,
@@ -76,6 +81,8 @@ const SelectMultipleTrigger = forwardRef<
       open,
       defaultOpen,
       onOpenChange,
+      showSelectAllOption,
+      selectAllLabel = "전체",
       ...rest
     },
     ref,
@@ -104,6 +111,39 @@ const SelectMultipleTrigger = forwardRef<
       () => new Map(options.map(option => [option.id, option])),
       [options],
     );
+    // 변경: 전체 선택 대상은 disabled option을 제외한 "선택 가능 옵션"으로 한정한다.
+    const selectableOptions = useMemo(
+      () => options.filter(option => !option.disabled),
+      [options],
+    );
+    // 변경: 전체 선택 토글 계산을 위해 선택 가능 옵션 id 배열을 별도로 보관한다.
+    const selectableOptionIds = useMemo(
+      () => selectableOptions.map(option => option.id),
+      [selectableOptions],
+    );
+    // 변경: 전체 해제 시 빠른 membership 체크를 위해 Set 형태도 함께 보관한다.
+    const selectableOptionIdSet = useMemo(
+      () => new Set(selectableOptionIds),
+      [selectableOptionIds],
+    );
+    const allOptionId = useMemo(() => {
+      // 현재 전달된 옵션 id 집합을 먼저 만든다.
+      const existingIdSet = new Set(options.map(option => option.id));
+      // "__select_multiple_all__"가 비어 있으면 그대로 사용한다.
+      if (!existingIdSet.has(SELECT_MULTIPLE_ALL_OPTION_BASE_ID)) {
+        return SELECT_MULTIPLE_ALL_OPTION_BASE_ID;
+      }
+
+      // 충돌 시 "__select_multiple_all___1", "_2" 형태로 suffix를 증가시키며 빈 id를 찾는다.
+      let offset = 1;
+      let nextId = `${SELECT_MULTIPLE_ALL_OPTION_BASE_ID}_${offset}`;
+      while (existingIdSet.has(nextId)) {
+        offset += 1;
+        nextId = `${SELECT_MULTIPLE_ALL_OPTION_BASE_ID}_${offset}`;
+      }
+      // 최종적으로 충돌하지 않는 synthetic all-option id를 반환한다.
+      return nextId;
+    }, [options]);
 
     /**
      * 4) uncontrolled 초기 선택값 계산
@@ -154,17 +194,46 @@ const SelectMultipleTrigger = forwardRef<
      * - controlled: selectedOptionIds 우선
      * - uncontrolled: 내부 state 사용
      */
-    const resolvedSelectedIds = useMemo(
-      () =>
-        isSelectionControlled
-          ? (selectedOptionIds ?? [])
-          : uncontrolledSelectedOptionIds,
-      [isSelectionControlled, selectedOptionIds, uncontrolledSelectedOptionIds],
-    );
+    const resolvedSelectedIds = useMemo(() => {
+      const sourceSelectedIds = isSelectionControlled
+        ? (selectedOptionIds ?? [])
+        : uncontrolledSelectedOptionIds;
+
+      // 변경: 실제 option id만 유지해 내부 synthetic all-option id가 상태에 저장되지 않도록 차단한다.
+      // 이 필터 덕분에 최종 선택 상태는 "실 데이터 옵션"만 source of truth로 유지된다.
+      return sourceSelectedIds.filter(selectedId => optionMap.has(selectedId));
+    }, [
+      isSelectionControlled,
+      optionMap,
+      selectedOptionIds,
+      uncontrolledSelectedOptionIds,
+    ]);
     const selectedIdSet = useMemo(
       () => new Set(resolvedSelectedIds),
       [resolvedSelectedIds],
     );
+    const isAllSelectableOptionsSelected = useMemo(
+      // 선택 가능 옵션이 1개 이상이고, 그 id가 전부 selectedIdSet에 포함될 때만 true다.
+      () =>
+        selectableOptionIds.length > 0 &&
+        selectableOptionIds.every(selectableId =>
+          selectedIdSet.has(selectableId),
+        ),
+      [selectableOptionIds, selectedIdSet],
+    );
+    const selectAllOption = useMemo<SelectDropdownOption>(
+      // 변경: "전체" 옵션은 렌더링을 위한 synthetic option 객체다.
+      // 실제 options 배열에 저장하지 않고 render 단계에서만 주입한다.
+      () => ({
+        id: allOptionId,
+        value: allOptionId,
+        label: selectAllLabel,
+        multiple: true,
+        // 선택 가능한 옵션이 하나도 없으면 "전체" 항목도 disabled로 처리한다.
+        disabled: selectableOptionIds.length === 0,
+      }),
+      [allOptionId, selectAllLabel, selectableOptionIds.length],
+    );
 
     /**
      * 8) 표시 라벨 계산(보조)
@@ -248,6 +317,16 @@ const SelectMultipleTrigger = forwardRef<
      */
     const panelSize = (dropdownSize ?? size) as DropdownSize;
     const hasOptions = options.length > 0;
+    // "전체" 항목은 옵션이 존재할 때만 의미가 있으므로 hasOptions와 함께 gating한다.
+    const shouldRenderSelectAllOption = Boolean(
+      showSelectAllOption && hasOptions,
+    );
+    const renderedOptions = useMemo(
+      // 변경: all-option은 dropdown 첫 행 고정 요구사항에 맞춰 항상 배열 맨 앞에 주입한다.
+      () =>
+        shouldRenderSelectAllOption ? [selectAllOption, ...options] : options,
+      [options, selectAllOption, shouldRenderSelectAllOption],
+    );
     const MAX_VISIBLE_TAGS = 3;
     const visibleTags = hasTags ? derivedTags.slice(0, MAX_VISIBLE_TAGS) : [];
     const overflowCount = hasTags
@@ -262,6 +341,55 @@ const SelectMultipleTrigger = forwardRef<
      * - legacy onOptionSelect는 하위호환으로 유지
      */
     const handleOptionSelect = (optionId: string) => {
+      // 현재 클릭된 옵션이 synthetic all-option인지 먼저 판별한다.
+      const isSelectAllOption =
+        shouldRenderSelectAllOption && optionId === allOptionId;
+      if (isSelectAllOption) {
+        // all-option 클릭 분기
+        // - 이미 전체 선택 상태면: selectable option들만 제거(전체 해제)
+        // - 일부 선택 상태면: selectable option들을 전부 합집합으로 추가(전체 선택)
+        const nextSelectedOptionIds = isAllSelectableOptionsSelected
+          ? resolvedSelectedIds.filter(
+              selectedId => !selectableOptionIdSet.has(selectedId),
+            )
+          : Array.from(
+              new Set([...resolvedSelectedIds, ...selectableOptionIds]),
+            );
+        // 최종 id 배열을 실제 option 객체 배열로 역매핑해 payload 계약을 유지한다.
+        const nextSelectedOptions = nextSelectedOptionIds
+          .map(selectedId => optionMap.get(selectedId))
+          .filter(
+            (
+              selectedOption,
+            ): selectedOption is NonNullable<typeof selectedOption> =>
+              Boolean(selectedOption),
+          );
+
+        // uncontrolled 모드에서는 내부 state를 즉시 동기화한다.
+        if (!isSelectionControlled) {
+          setUncontrolledSelectedOptionIds(nextSelectedOptionIds);
+        }
+
+        // onChange payload는 기존 multiple 계약을 그대로 사용한다.
+        // currentOption은 synthetic all-option으로 전달해 "전체 선택 액션"임을 호출부에서 구분 가능하게 한다.
+        onChange?.({
+          mode: "multiple",
+          selectedOptionIds: nextSelectedOptionIds,
+          selectedValues: nextSelectedOptions.map(
+            selectedOption => selectedOption.value,
+          ),
+          selectedOptions: nextSelectedOptions,
+          currentOption: selectAllOption,
+          isSelected: !isAllSelectableOptionsSelected,
+        });
+
+        // legacy 하위호환 콜백도 동일하게 호출한다.
+        onOptionSelect?.(selectAllOption);
+        return;
+      }
+
+      // 일반 옵션 클릭 분기
+      // 이미 선택된 id면 제거, 미선택 id면 추가하는 기본 multiple toggle 로직이다.
       const wasSelected = selectedIdSet.has(optionId);
       const nextSelectedOptionIds = wasSelected
         ? resolvedSelectedIds.filter(selectedId => selectedId !== optionId)
@@ -370,7 +498,7 @@ const SelectMultipleTrigger = forwardRef<
               {hasOptions ? (
                 <>
                   {/* multi select 전용 옵션을 Dropdown.Menu.Item으로 노출한다. */}
-                  {options.map(option => (
+                  {renderedOptions.map(option => (
                     <Dropdown.Menu.Item
                       key={option.id}
                       label={option.label}
@@ -379,7 +507,13 @@ const SelectMultipleTrigger = forwardRef<
                       left={option.left}
                       right={option.right}
                       multiple
-                      isSelected={selectedIdSet.has(option.id)}
+                      isSelected={
+                        // synthetic all-option의 checked 상태는 "전체가 선택되었는가"로 계산한다.
+                        // 일반 option은 기존 selectedIdSet membership으로 계산한다.
+                        option.id === allOptionId
+                          ? isAllSelectableOptionsSelected
+                          : selectedIdSet.has(option.id)
+                      }
                       onSelect={event => {
                         if (option.disabled || isInteractionBlocked) {
                           event.preventDefault();

package/src/components/select/styles/select.scss

@@ -331,7 +331,7 @@
 }
 
 .select-button[data-priority="secondary"][data-size="large"] .select-label {
-  font-weight: 600;
+  --select-text-large-weight: 600;
 }
 
 .select-tags {

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

@@ -66,18 +66,19 @@
     --input-table-text-large-line-height
   );
   --select-table-text-large-weight: var(--input-table-text-large-weight);
-  --select-text-small-size: 15px;
-  --select-text-small-line-height: 1.4;
-  --select-text-small-letter-spacing: 0.2px;
-  --select-text-small-weight: 400;
-  --select-text-medium-size: var(--font-body-medium-size);
-  --select-text-medium-line-height: var(--font-body-medium-line-height);
-  --select-text-medium-letter-spacing: 0;
-  --select-text-medium-weight: 400;
-  --select-text-large-size: var(--font-body-large-size);
-  --select-text-large-line-height: var(--font-body-large-line-height);
-  --select-text-large-letter-spacing: 0;
-  --select-text-large-weight: 400;
+  /* 변경: trigger 텍스트 토큰을 input text 토큰과 직접 매핑해 size별 typography를 동기화한다. */
+  --select-text-small-size: var(--input-text-small-size);
+  --select-text-small-line-height: var(--input-text-small-line-height);
+  --select-text-small-letter-spacing: var(--input-text-small-letter-spacing);
+  --select-text-small-weight: var(--input-text-small-weight);
+  --select-text-medium-size: var(--input-text-medium-size);
+  --select-text-medium-line-height: var(--input-text-medium-line-height);
+  --select-text-medium-letter-spacing: var(--input-text-medium-letter-spacing);
+  --select-text-medium-weight: var(--input-text-medium-weight);
+  --select-text-large-size: var(--input-text-large-size);
+  --select-text-large-line-height: var(--input-text-large-line-height);
+  --select-text-large-letter-spacing: var(--input-text-large-letter-spacing);
+  --select-text-large-weight: var(--input-text-large-weight);
 
   --select-icon-size-small: 1.6rem;
   --select-icon-size-medium: 2rem;

package/src/components/select/types/props.ts

@@ -257,9 +257,25 @@ export type SelectDefaultComponentProps = SelectTriggerDefaultProps &
   SelectDropdownBehaviorProps &
   SelectWidthOption;
 
+/**
+ * Select.Multiple 전체 선택 옵션 props
+ * @property {boolean} [showSelectAllOption] dropdown 첫 행에 "전체" 옵션 노출 여부
+ * @property {ReactNode} [selectAllLabel] "전체" 옵션 라벨 커스터마이징
+ */
+export interface SelectMultipleAllOptionProps {
+  /**
+   * dropdown 첫 행에 "전체" 옵션 노출 여부
+   */
+  showSelectAllOption?: boolean;
+  /**
+   * "전체" 옵션 라벨 커스터마이징
+   */
+  selectAllLabel?: ReactNode;
+}
+
 /**
  * Select.Multiple 컴포넌트 props
- * @typedef {SelectTriggerMultipleProps & SelectDropdownConfigProps & SelectDropdownBehaviorProps & SelectWidthOption} SelectMultipleComponentProps
+ * @typedef {SelectTriggerMultipleProps & SelectDropdownConfigProps & SelectDropdownBehaviorProps & SelectWidthOption & SelectMultipleAllOptionProps} SelectMultipleComponentProps
  * @property {ReactNode} [displayLabel] 선택된 라벨
  * @property {ReactNode} [placeholder] placeholder 텍스트
  * @property {SelectMultipleTag[]} [tags] multi select tag 리스트
@@ -284,8 +300,11 @@ export type SelectDefaultComponentProps = SelectTriggerDefaultProps &
  * @property {boolean} [open] dropdown open 상태
  * @property {boolean} [defaultOpen] uncontrolled 초기 open 상태
  * @property {(open: boolean) => void} [onOpenChange] open state change 콜백
+ * @property {boolean} [showSelectAllOption] dropdown 첫 행에 "전체" 옵션 노출 여부
+ * @property {ReactNode} [selectAllLabel] "전체" 옵션 라벨 커스터마이징
  */
 export type SelectMultipleComponentProps = SelectTriggerMultipleProps &
   SelectDropdownConfigProps &
   SelectDropdownBehaviorProps &
-  SelectWidthOption;
+  SelectWidthOption &
+  SelectMultipleAllOptionProps;

package/src/components/slot/index.tsx

@@ -1,6 +1,2 @@
-export { default as SlotComponent } from "./markup/Component";
-export type {
-  SlotComponentProps,
-  SlotComponentType,
-  PolymorphicRef,
-} from "./types/props";
+export * from "./markup";
+export type * from "./types";

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

@@ -0,0 +1,34 @@
+import type { ElementType } from "react";
+import clsx from "clsx";
+import SlotBase from "./Base";
+import type { SlotTextProps } from "../types/text";
+
+/**
+ * SlotText; 텍스트 역할 children만 래핑하는 공용 슬롯.
+ * @component
+ * @param {SlotTextProps} props
+ * @param {React.ElementType} [props.as="span"] 렌더링할 요소.
+ * @param {React.ReactNode} [props.children] 문자열/숫자는 래핑하고, 그 외 ReactNode는 그대로 반환한다.
+ * @param {string} [props.className] 래핑 시 적용할 className.
+ */
+export default function SlotText<C extends ElementType = "span">({
+  as = "span" as C,
+  children,
+  className,
+  ...restProps
+}: SlotTextProps<C>) {
+  if (!["string", "number"].includes(typeof children)) {
+    return children;
+  }
+
+  // 문자열/숫자 children만 공통 slot text 마크업으로 감싼다.
+  return (
+    <SlotBase
+      as={as as ElementType}
+      className={clsx("slot-text", className)}
+      {...restProps}
+    >
+      {children}
+    </SlotBase>
+  );
+}

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

@@ -0,0 +1,7 @@
+import SlotBase from "./Base";
+import SlotText from "./Text";
+
+export const Slot = {
+  Base: SlotBase,
+  Text: SlotText,
+};

package/src/components/slot/types/index.ts

@@ -0,0 +1,2 @@
+export type * from "./props";
+export type * from "./text";

package/src/components/slot/types/text.ts

@@ -0,0 +1,24 @@
+import type { ElementType, ReactNode } from "react";
+import type { SlotComponentRestProps } from "./props";
+
+/**
+ * SlotTextProps; 텍스트 역할 children 래핑용 공통 props.
+ * @property {React.ElementType} [as] 렌더링할 요소. 기본값은 span.
+ * @property {React.ReactNode} [children] 문자열/숫자는 래핑하고 그 외 ReactNode는 그대로 반환한다.
+ * @property {string} [className] 텍스트 래퍼 className.
+ */
+export type SlotTextProps<C extends ElementType = "span"> =
+  SlotComponentRestProps<C> & {
+    /**
+     * 렌더링할 요소.
+     */
+    as?: C;
+    /**
+     * 텍스트/노드 children.
+     */
+    children?: ReactNode;
+    /**
+     * 텍스트 래퍼 className.
+     */
+    className?: string;
+  };

package/src/components/table/markup/foundation/Cell.tsx

@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import { forwardRef } from "react";
 import type { TableCellContentProps } from "../../types";
+import TableText from "./Text";
 
 /**
  * Table Foundation; Cell 콘텐츠 래퍼 컴포넌트
@@ -48,18 +49,9 @@ const TableCell = forwardRef<HTMLDivElement, TableCellContentProps>(
         )}
       >
         {/* 변경: 텍스트 콘텐츠는 slot 전용 className으로 감싸 스타일 적용 범위를 고정한다. */}
-        {typeof children === "string" || typeof children === "number" ? (
-          <span
-            className={clsx(
-              "table-cell-text",
-              section && `table-${section}-cell-text`,
-            )}
-          >
-            {children}
-          </span>
-        ) : (
-          children
-        )}
+        <TableText className={clsx(section && `table-${section}-cell-text`)}>
+          {children}
+        </TableText>
       </div>
     );
   },

package/src/components/table/markup/foundation/Td.tsx

@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import { forwardRef } from "react";
 import type { TableTdProps } from "../../types";
+import TableText from "./Text";
 
 /**
  * Table Foundation; Td 마크업 컴포넌트
@@ -20,13 +21,9 @@ const TableTd = forwardRef<HTMLTableCellElement, TableTdProps>(
         style={{ ...style, textAlign: "left" }}
       >
         {/* 변경: 태그 셀렉터 의존을 피하기 위해 className 기반 텍스트 노드를 사용한다. */}
-        {typeof children === "string" || typeof children === "number" ? (
-          <span className={clsx("table-native-cell-text", "table-td-text")}>
-            {children}
-          </span>
-        ) : (
-          children
-        )}
+        <TableText className={clsx("table-native-cell-text", "table-td-text")}>
+          {children}
+        </TableText>
       </td>
     );
   },

package/src/components/table/markup/foundation/Text.tsx

@@ -0,0 +1,16 @@
+import clsx from "clsx";
+import { Slot } from "../../../slot";
+import type { TableTextProps } from "../../types";
+
+/**
+ * Table Text; th/td/cell 텍스트 공통 렌더 컴포넌트.
+ * @component
+ * @param {TableTextProps} props
+ * @param {React.ReactNode} [props.children] 텍스트 콘텐츠
+ * @param {string} [props.className] table text className
+ */
+export default function TableText({ className, ...restProps }: TableTextProps) {
+  return (
+    <Slot.Text className={clsx("table-cell-text", className)} {...restProps} />
+  );
+}

package/src/components/table/markup/foundation/Th.tsx

@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import { forwardRef } from "react";
 import type { TableThProps } from "../../types";
+import TableText from "./Text";
 
 /**
  * Table Foundation; Th 마크업 컴포넌트
@@ -29,13 +30,9 @@ const TableTh = forwardRef<HTMLTableCellElement, TableThProps>(
         style={style}
       >
         {/* 변경: 태그 셀렉터 의존을 피하기 위해 className 기반 텍스트 노드를 사용한다. */}
-        {typeof children === "string" || typeof children === "number" ? (
-          <span className={clsx("table-native-cell-text", "table-th-text")}>
-            {children}
-          </span>
-        ) : (
-          children
-        )}
+        <TableText className={clsx("table-native-cell-text", "table-th-text")}>
+          {children}
+        </TableText>
       </th>
     );
   },

package/src/components/table/markup/foundation/index.tsx

@@ -8,6 +8,7 @@ import TableTh from "./Th";
 import TableRoot from "./Root";
 import TableRow from "./Row";
 import TableTd from "./Td";
+import TableText from "./Text";
 
 /**
  * Table Foundation; 기초 마크업 컴포넌트 세트
@@ -27,4 +28,5 @@ export const TableFoundation = {
   Tr: TableRow,
   Th: TableTh,
   Td: TableTd,
+  Text: TableText,
 };