@simplysm/solid 13.0.61 → 13.0.64

package/src/components/form-control/data-select-button/DataSelectButton.tsx

@@ -0,0 +1,279 @@
+import {
+  createEffect,
+  createMemo,
+  createResource,
+  createSignal,
+  For,
+  type JSX,
+  on,
+  Show,
+  splitProps,
+} from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { IconSearch, IconX } from "@tabler/icons-solidjs";
+import { Icon } from "../../display/Icon";
+import { Invalid } from "../Invalid";
+import { useDialog, type DialogShowOptions } from "../../disclosure/DialogContext";
+import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import { type ComponentSize, textMuted } from "../../../styles/tokens.styles";
+import {
+  triggerBaseClass,
+  triggerDisabledClass,
+  triggerInsetClass,
+  triggerSizeClasses,
+} from "../DropdownTrigger.styles";
+
+/** 모달에서 반환하는 결과 인터페이스 */
+export interface DataSelectModalResult<TKey> {
+  selectedKeys: TKey[];
+}
+
+/** DataSelectButton Props */
+export interface DataSelectButtonProps<TItem, TKey = string | number> {
+  /** 현재 선택된 키 (단일 또는 다중) */
+  value?: TKey | TKey[];
+  /** 값 변경 콜백 */
+  onValueChange?: (value: TKey | TKey[] | undefined) => void;
+
+  /** 키로 아이템을 로드하는 함수 */
+  load: (keys: TKey[]) => TItem[] | Promise<TItem[]>;
+  /** 선택 모달 컴포넌트 팩토리 */
+  modal: () => JSX.Element;
+  /** 아이템 렌더링 함수 */
+  renderItem: (item: TItem) => JSX.Element;
+
+  /** 다중 선택 모드 */
+  multiple?: boolean;
+  /** 필수 입력 */
+  required?: boolean;
+  /** 비활성화 */
+  disabled?: boolean;
+  /** 트리거 크기 */
+  size?: ComponentSize;
+  /** 테두리 없는 스타일 */
+  inset?: boolean;
+
+  /** 커스텀 유효성 검사 함수 */
+  validate?: (value: unknown) => string | undefined;
+  /** touchMode: 포커스 해제 후에만 에러 표시 */
+  touchMode?: boolean;
+
+  /** 다이얼로그 옵션 */
+  dialogOptions?: DialogShowOptions;
+}
+
+// 스타일
+const containerClass = clsx("inline-flex items-center", "group");
+const selectedValueClass = clsx("flex-1", "whitespace-nowrap", "overflow-hidden", "text-ellipsis");
+const actionButtonClass = clsx(
+  "flex-shrink-0",
+  "p-0.5",
+  "rounded",
+  "cursor-pointer",
+  "transition-colors",
+  "hover:bg-base-200 dark:hover:bg-base-700",
+  "focus:outline-none",
+);
+
+function getTriggerContainerClass(options: {
+  size?: ComponentSize;
+  disabled?: boolean;
+  inset?: boolean;
+  class?: string;
+}): string {
+  return twMerge(
+    triggerBaseClass,
+    "px-2 py-1",
+    options.size && triggerSizeClasses[options.size],
+    options.disabled && triggerDisabledClass,
+    options.inset && triggerInsetClass,
+    options.class,
+  );
+}
+
+export function DataSelectButton<TItem, TKey = string | number>(
+  props: DataSelectButtonProps<TItem, TKey>,
+): JSX.Element {
+  const [local] = splitProps(props, [
+    "value",
+    "onValueChange",
+    "load",
+    "modal",
+    "renderItem",
+    "multiple",
+    "required",
+    "disabled",
+    "size",
+    "inset",
+    "validate",
+    "touchMode",
+    "dialogOptions",
+  ]);
+
+  const dialog = useDialog();
+
+  // value를 항상 배열로 정규화
+  const normalizeKeys = (value: TKey | TKey[] | undefined): TKey[] => {
+    if (value === undefined || value === null) return [];
+    if (Array.isArray(value)) return value;
+    return [value];
+  };
+
+  // controlled/uncontrolled 패턴
+  type ValueType = TKey | TKey[] | undefined;
+  const [getValue, setValue] = createControllableSignal<ValueType>({
+    value: () => local.value,
+    onChange: () => local.onValueChange as ((v: ValueType) => void) | undefined,
+  } as Parameters<typeof createControllableSignal<ValueType>>[0]);
+
+  // load를 위한 키 추적 signal
+  // eslint-disable-next-line solid/reactivity -- 초기값은 mount 시점에 한 번만 읽음
+  const [loadKeys, setLoadKeys] = createSignal<TKey[]>(normalizeKeys(local.value));
+
+  // value가 변경되면 loadKeys 업데이트
+  createEffect(
+    on(
+      () => getValue(),
+      (value) => {
+        setLoadKeys(normalizeKeys(value));
+      },
+    ),
+  );
+
+  // createResource로 load 호출
+  // eslint-disable-next-line solid/reactivity -- createResource의 fetcher는 source 변경 시 호출됨
+  const [selectedItems] = createResource(loadKeys, async (keys) => {
+    if (keys.length === 0) return [];
+    return Promise.resolve(local.load(keys));
+  });
+
+  // 값이 있는지 확인
+  const hasValue = createMemo(() => {
+    const keys = normalizeKeys(getValue());
+    return keys.length > 0;
+  });
+
+  // 지우기 가능 여부
+  const clearable = createMemo(() => !local.required && hasValue() && !local.disabled);
+
+  // 유효성 검사
+  const errorMsg = createMemo(() => {
+    const v = getValue();
+    if (local.required) {
+      const keys = normalizeKeys(v);
+      if (keys.length === 0) return "필수 입력 항목입니다";
+    }
+    return local.validate?.(v);
+  });
+
+  // 모달 열기
+  const handleOpenModal = async () => {
+    if (local.disabled) return;
+
+    const result = await dialog.show<DataSelectModalResult<TKey>>(
+      local.modal,
+      local.dialogOptions ?? {},
+    );
+
+    if (result) {
+      const newKeys = result.selectedKeys;
+      if (local.multiple) {
+        setValue(newKeys);
+      } else {
+        setValue(newKeys.length > 0 ? newKeys[0] : undefined);
+      }
+    }
+  };
+
+  // 지우기
+  const handleClear = (e: MouseEvent) => {
+    e.stopPropagation();
+    if (local.multiple) {
+      setValue([] as unknown as TKey[]);
+    } else {
+      setValue(undefined);
+    }
+  };
+
+  // 선택된 값 표시
+  const renderSelectedDisplay = (): JSX.Element => {
+    const items = selectedItems();
+    if (!items || items.length === 0) {
+      return <span class={textMuted} />;
+    }
+    return (
+      <span class="flex items-center gap-1">
+        <For each={items}>
+          {(item, index) => (
+            <>
+              <Show when={index() > 0}>
+                <span class={textMuted}>,</span>
+              </Show>
+              {local.renderItem(item)}
+            </>
+          )}
+        </For>
+      </span>
+    );
+  };
+
+  // 트리거 클래스 계산
+  const triggerClassName = () =>
+    getTriggerContainerClass({
+      size: local.size,
+      disabled: local.disabled,
+      inset: local.inset,
+    });
+
+  return (
+    <Invalid message={errorMsg()} variant="border" touchMode={local.touchMode}>
+      <div data-data-select-button class={containerClass}>
+        <div
+          role="combobox"
+          aria-haspopup="dialog"
+          aria-expanded={false}
+          aria-disabled={local.disabled || undefined}
+          aria-required={local.required || undefined}
+          tabIndex={local.disabled ? -1 : 0}
+          class={triggerClassName()}
+          onKeyDown={(e) => {
+            if (local.disabled) return;
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              void handleOpenModal();
+            }
+          }}
+        >
+          <div class={selectedValueClass}>{renderSelectedDisplay()}</div>
+          <div class="flex items-center gap-0.5">
+            <Show when={clearable()}>
+              <button
+                type="button"
+                data-clear-button
+                class={twMerge(actionButtonClass, "text-base-400 hover:text-danger-500")}
+                onClick={handleClear}
+                tabIndex={-1}
+                aria-label="선택 해제"
+              >
+                <Icon icon={IconX} size="0.875em" />
+              </button>
+            </Show>
+            <Show when={!local.disabled}>
+              <button
+                type="button"
+                data-search-button
+                class={twMerge(actionButtonClass, "text-base-400 hover:text-primary-500")}
+                onClick={() => void handleOpenModal()}
+                tabIndex={-1}
+                aria-label="검색"
+              >
+                <Icon icon={IconSearch} size="0.875em" />
+              </button>
+            </Show>
+          </div>
+        </div>
+      </div>
+    </Invalid>
+  );
+}

package/src/components/form-control/select/Select.tsx

@@ -1,5 +1,6 @@
 import {
   children,
+  createEffect,
   createMemo,
   createSignal,
   For,
@@ -19,7 +20,13 @@ import { SelectContext, type SelectContextValue } from "./SelectContext";
 import { useSelectContext } from "./SelectContext";
 import { SelectItem } from "./SelectItem";
 import { ripple } from "../../../directives/ripple";
-import { borderDefault, type ComponentSize, textMuted } from "../../../styles/tokens.styles";
+import {
+  borderDefault,
+  borderSubtle,
+  type ComponentSize,
+  textMuted,
+  textPlaceholder,
+} from "../../../styles/tokens.styles";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { createSlotSignal } from "../../../hooks/createSlotSignal";
 import { chevronWrapperClass, getTriggerClass } from "../DropdownTrigger.styles";
@@ -31,6 +38,28 @@ void ripple;
 const multiTagClass = clsx("rounded", "bg-base-200 px-1", "dark:bg-base-600");
 const selectedValueClass = clsx("flex-1", "whitespace-nowrap");
 
+// 검색 입력 스타일
+const searchInputClass = clsx(
+  "w-full",
+  "border-b",
+  borderSubtle,
+  "bg-transparent",
+  "px-2 py-1.5",
+  "text-sm",
+  "outline-none",
+  textPlaceholder,
+);
+
+// 전체선택/해제 버튼 영역 스타일
+const selectAllBarClass = clsx("flex gap-2", "border-b", borderSubtle, "px-2 py-1", "text-xs");
+
+// 전체선택/해제 버튼 스타일
+const selectAllBtnClass = clsx(
+  "text-primary-500",
+  "hover:text-primary-600 dark:hover:text-primary-400",
+  "cursor-pointer",
+);
+
 /**
  * Select 우측 액션 서브 컴포넌트
  */
@@ -94,7 +123,7 @@ const SelectItemTemplate = <TArgs extends unknown[]>(props: {
 // Props 정의
 
 // 공통 Props (value, onValueChange, multiple 제외)
-interface SelectCommonProps {
+interface SelectCommonProps<TValue = unknown> {
   /** 비활성화 */
   disabled?: boolean;
 
@@ -116,6 +145,12 @@ interface SelectCommonProps {
   /** touchMode: 포커스 해제 후에만 에러 표시 */
   touchMode?: boolean;
 
+  /** 검색 텍스트 추출 함수 (설정 시 검색 입력 자동 표시) */
+  getSearchText?: (item: TValue) => string;
+
+  /** 숨김 여부 판별 함수 */
+  getIsHidden?: (item: TValue) => boolean;
+
   /** 커스텀 class */
   class?: string;
 
@@ -124,7 +159,7 @@ interface SelectCommonProps {
 }
 
 // 단일 선택 Props
-interface SelectSingleBaseProps<TValue> extends SelectCommonProps {
+interface SelectSingleBaseProps<TValue> extends SelectCommonProps<TValue> {
   /** 다중 선택 모드 */
   multiple?: false;
 
@@ -142,7 +177,7 @@ interface SelectSingleBaseProps<TValue> extends SelectCommonProps {
 }
 
 // 다중 선택 Props
-interface SelectMultipleBaseProps<TValue> extends SelectCommonProps {
+interface SelectMultipleBaseProps<TValue> extends SelectCommonProps<TValue> {
   /** 다중 선택 모드 */
   multiple: true;
 
@@ -228,40 +263,52 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
     "renderValue",
     "validate",
     "touchMode",
+    "getSearchText",
+    "getIsHidden",
   ]);
 
   const [open, setOpen] = createSignal(false);
 
+  // 검색 텍스트 signal
+  const [searchText, setSearchText] = createSignal("");
+
+  // open → false 시 searchText 초기화
+  createEffect(() => {
+    if (!open()) {
+      setSearchText("");
+    }
+  });
+
   // 선택된 값 관리 (controlled/uncontrolled 패턴)
   type ValueType = T | T[] | undefined;
-  const [getValue, setInternalValue] = createControllableSignal<ValueType>({
+  const [value, setValue] = createControllableSignal<ValueType>({
     value: () => local.value,
     onChange: () => local.onValueChange as ((v: ValueType) => void) | undefined,
   } as Parameters<typeof createControllableSignal<ValueType>>[0]);
 
   // 값이 선택되어 있는지 확인
-  const isSelected = (value: T): boolean => {
-    const current = getValue();
+  const isSelected = (itemValue: T): boolean => {
+    const current = value();
     if (current === undefined) return false;
 
     if (local.multiple) {
-      return Array.isArray(current) && current.includes(value);
+      return Array.isArray(current) && current.includes(itemValue);
     }
-    return current === value;
+    return current === itemValue;
   };
 
   // 값 토글
-  const toggleValue = (value: T) => {
+  const toggleValue = (itemValue: T) => {
     if (local.multiple) {
-      const current = (getValue() as T[] | undefined) ?? [];
-      const idx = current.indexOf(value);
+      const current = (value() as T[] | undefined) ?? [];
+      const idx = current.indexOf(itemValue);
       if (idx >= 0) {
-        setInternalValue([...current.slice(0, idx), ...current.slice(idx + 1)] as T[]);
+        setValue([...current.slice(0, idx), ...current.slice(idx + 1)] as T[]);
       } else {
-        setInternalValue([...current, value] as T[]);
+        setValue([...current, itemValue] as T[]);
       }
     } else {
-      setInternalValue(value);
+      setValue(itemValue);
     }
   };
 
@@ -302,7 +349,7 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
 
   // 유효성 검사 메시지
   const errorMsg = createMemo(() => {
-    const v = getValue();
+    const v = value();
     if (local.required && (v === undefined || v === null || v === ""))
       return "필수 입력 항목입니다";
     return local.validate?.(v);
@@ -317,6 +364,57 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
       class: local.class,
     });
 
+  // 검색 필터링 (계층 구조 지원)
+  const filteredItems = createMemo((): T[] | undefined => {
+    if (!local.items) return undefined;
+    if (!local.getSearchText || !searchText()) return local.items;
+
+    const terms = searchText().trim().split(" ").filter(Boolean);
+    if (terms.length === 0) return local.items;
+
+    // 계층 구조에서 자식 매칭 시 부모도 포함
+    const matchesSearch = (item: T): boolean => {
+      const text = local.getSearchText!(item).toLowerCase();
+      if (terms.every((t) => text.includes(t.toLowerCase()))) return true;
+
+      // 자식 중 매칭되는 항목이 있으면 부모도 표시
+      if (local.getChildren) {
+        const itemChildren = local.getChildren(item, 0, 0);
+        if (itemChildren?.some((child) => matchesSearch(child))) return true;
+      }
+
+      return false;
+    };
+
+    return local.items.filter((item) => matchesSearch(item));
+  });
+
+  // 숨김 필터링 적용된 items
+  const visibleItems = createMemo((): T[] | undefined => {
+    const items = filteredItems();
+    if (!items || !local.getIsHidden) return items;
+
+    return items.filter((item) => {
+      // 숨김 항목이지만 선택된 경우 표시 (취소선으로)
+      if (local.getIsHidden!(item)) {
+        return isSelected(item);
+      }
+      return true;
+    });
+  });
+
+  // 전체선택
+  const handleSelectAll = () => {
+    const items = visibleItems();
+    if (!items) return;
+    setValue(items);
+  };
+
+  // 전체해제
+  const handleDeselectAll = () => {
+    setValue([] as unknown as T[]);
+  };
+
   // 내부 컴포넌트: Provider 안에서 children을 resolve하여 슬롯 등록을 트리거
   const SelectInner: ParentComponent = (innerProps) => {
     // children() resolve로 서브 컴포넌트 등록 트리거 (Header, Action, ItemTemplate은 null 반환)
@@ -334,39 +432,52 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
       const tpl = getItemTemplate();
       return (
         <For each={itemList}>
-          {(item, index) => (
-            <SelectItem value={item}>
-              {tpl ? tpl(item, index(), depth) : String(item)}
-              <Show when={local.getChildren?.(item, index(), depth)} keyed>
-                {(itemChildren) => (
-                  <Show when={itemChildren.length > 0}>
-                    <SelectItem.Children>
-                      {renderItems(itemChildren, depth + 1)}
-                    </SelectItem.Children>
-                  </Show>
-                )}
-              </Show>
-            </SelectItem>
-          )}
+          {(item, index) => {
+            const hidden = () => local.getIsHidden?.(item) ?? false;
+            return (
+              <SelectItem value={item} class={hidden() ? "line-through opacity-60" : undefined}>
+                {tpl ? tpl(item, index(), depth) : String(item)}
+                <Show when={local.getChildren?.(item, index(), depth)} keyed>
+                  {(itemChildren) => {
+                    // 자식 목록에서 숨김 필터링 적용
+                    const visibleChildren = () => {
+                      if (!local.getIsHidden) return itemChildren;
+                      return itemChildren.filter((child) => {
+                        if (local.getIsHidden!(child)) return isSelected(child);
+                        return true;
+                      });
+                    };
+                    return (
+                      <Show when={visibleChildren().length > 0}>
+                        <SelectItem.Children>
+                          {renderItems(visibleChildren(), depth + 1)}
+                        </SelectItem.Children>
+                      </Show>
+                    );
+                  }}
+                </Show>
+              </SelectItem>
+            );
+          }}
         </For>
       );
     };
 
     // 선택된 값 렌더링 (items 방식일 때 itemTemplate 재사용)
-    const renderValue = (value: T): JSX.Element => {
+    const renderValue = (renderVal: T): JSX.Element => {
       if (local.renderValue) {
-        return local.renderValue(value);
+        return local.renderValue(renderVal);
       }
       const tpl = getItemTemplate();
       if (tpl) {
-        return tpl(value, 0, 0);
+        return tpl(renderVal, 0, 0);
       }
-      return <>{String(value)}</>;
+      return <>{String(renderVal)}</>;
     };
 
     // 선택된 값 표시
     const renderSelectedValue = (): JSX.Element => {
-      const current = getValue();
+      const current = value();
 
       if (current === undefined || (Array.isArray(current) && current.length === 0)) {
         return <span class={textMuted}>{local.placeholder ?? ""}</span>;
@@ -384,6 +495,13 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
       return renderValue(current as T);
     };
 
+    // 미지정 항목 표시 여부: 단일 선택 + required 아님 + items 모드
+    const showUnsetItem = () => !local.multiple && !local.required && local.items !== undefined;
+
+    // 전체선택/해제 버튼 표시 여부: multiple + hideSelectAll 아님 + items 모드
+    const showSelectAllBar = () =>
+      local.multiple === true && !local.hideSelectAll && local.items !== undefined;
+
     return (
       <div {...rest} data-select class={clsx("group", local.inset ? "flex" : "inline-flex")}>
         <Dropdown disabled={local.disabled} open={open()} onOpenChange={setOpen} keyboardNav>
@@ -415,9 +533,47 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
           </Dropdown.Trigger>
           <Dropdown.Content>
             <Show when={header()}>{header()!()}</Show>
+            {/* 검색 입력 */}
+            <Show when={local.getSearchText && local.items}>
+              <input
+                type="text"
+                data-select-search
+                class={searchInputClass}
+                placeholder="검색..."
+                value={searchText()}
+                onInput={(e) => setSearchText(e.currentTarget.value)}
+              />
+            </Show>
+            {/* 전체선택/해제 버튼 */}
+            <Show when={showSelectAllBar()}>
+              <div class={selectAllBarClass}>
+                <button
+                  type="button"
+                  data-select-all
+                  class={selectAllBtnClass}
+                  onClick={handleSelectAll}
+                >
+                  전체선택
+                </button>
+                <button
+                  type="button"
+                  data-deselect-all
+                  class={selectAllBtnClass}
+                  onClick={handleDeselectAll}
+                >
+                  전체해제
+                </button>
+              </div>
+            </Show>
             <List inset role="listbox">
               <Show when={local.items} fallback={resolved()}>
-                {renderItems(local.items!, 0)}
+                {/* 미지정 항목 */}
+                <Show when={showUnsetItem()}>
+                  <SelectItem value={undefined as T}>
+                    <span class={textMuted}>미지정</span>
+                  </SelectItem>
+                </Show>
+                {renderItems(visibleItems() ?? [], 0)}
               </Show>
             </List>
           </Dropdown.Content>