@simplysm/solid 13.0.0-beta.6

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

@@ -0,0 +1,404 @@
+import { children, createSignal, For, type JSX, type ParentComponent, Show, splitProps } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { IconChevronDown } from "@tabler/icons-solidjs";
+import { Icon } from "../../display/Icon";
+import { Dropdown } from "../../disclosure/Dropdown";
+import { List } from "../../data/list/List";
+import { SelectContext, type SelectContextValue } from "./SelectContext";
+import { SelectItem } from "./SelectItem";
+import { ripple } from "../../../directives/ripple";
+import { splitSlots } from "../../../helpers/splitSlots";
+import { borderDefault, type ComponentSize, textMuted } from "../../../styles/tokens.styles";
+import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import { chevronWrapperClass, getTriggerClass } from "../DropdownTrigger.styles";
+
+void ripple;
+
+// Select 전용 스타일
+const multiTagClass = clsx("rounded", "bg-base-200 px-1", "dark:bg-base-600");
+const selectedValueClass = clsx("flex-1", "whitespace-nowrap");
+
+/**
+ * Select 우측 액션 서브 컴포넌트
+ */
+interface SelectActionProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+const SelectAction: ParentComponent<SelectActionProps> = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class"]);
+
+  return (
+    <button
+      {...rest}
+      type="button"
+      data-select-action
+      class={twMerge(
+        clsx(
+          "border",
+          borderDefault,
+          "px-1.5",
+          "rounded-r",
+          "font-bold text-primary-500",
+          "hover:bg-base-100 dark:hover:bg-base-700",
+        ),
+        local.class,
+      )}
+      onClick={(e) => {
+        e.stopPropagation();
+        if (typeof rest.onClick === "function") {
+          rest.onClick(e);
+        }
+      }}
+    >
+      {local.children}
+    </button>
+  );
+};
+
+/**
+ * 드롭다운 상단 커스텀 영역 서브 컴포넌트
+ */
+const SelectHeader: ParentComponent = (props) => <div data-select-header>{props.children}</div>;
+
+/**
+ * items prop 방식일 때 아이템 렌더링 템플릿
+ *
+ * 함수 참조를 저장하기 위해 전역 Map 사용
+ */
+interface SelectItemTemplateProps<T> {
+  children: (item: T, index: number, depth: number) => JSX.Element;
+}
+
+// 템플릿 함수를 저장하는 전역 Map (WeakMap 사용하여 메모리 누수 방지)
+const templateFnMap = new WeakMap<HTMLElement, (item: unknown, index: number, depth: number) => JSX.Element>();
+
+const SelectItemTemplate = <T,>(props: SelectItemTemplateProps<T>) => (
+  <span
+    ref={(el) => {
+      templateFnMap.set(el, props.children as (item: unknown, index: number, depth: number) => JSX.Element);
+    }}
+    data-select-item-template
+    style={{ display: "none" }}
+  />
+);
+
+// Props 정의
+
+// 공통 Props (value, onValueChange, multiple 제외)
+interface SelectCommonProps {
+  /** 비활성화 */
+  disabled?: boolean;
+
+  /** 필수 입력 */
+  required?: boolean;
+
+  /** 미선택 시 표시 텍스트 */
+  placeholder?: string;
+
+  /** 트리거 크기 */
+  size?: ComponentSize;
+
+  /** 테두리 없는 스타일 */
+  inset?: boolean;
+
+  /** 커스텀 class */
+  class?: string;
+
+  /** 커스텀 style */
+  style?: JSX.CSSProperties;
+}
+
+// 단일 선택 Props
+interface SelectSingleBaseProps<T> extends SelectCommonProps {
+  /** 다중 선택 모드 */
+  multiple?: false;
+
+  /** 현재 선택된 값 */
+  value?: T;
+
+  /** 값 변경 콜백 */
+  onValueChange?: (value: T) => void;
+
+  /** 다중 선택 시 표시 방향 (단일 선택에서는 사용 안 함) */
+  multiDisplayDirection?: never;
+
+  /** 전체 선택 버튼 숨기기 (단일 선택에서는 사용 안 함) */
+  hideSelectAll?: never;
+}
+
+// 다중 선택 Props
+interface SelectMultipleBaseProps<T> extends SelectCommonProps {
+  /** 다중 선택 모드 */
+  multiple: true;
+
+  /** 현재 선택된 값 */
+  value?: T[];
+
+  /** 값 변경 콜백 */
+  onValueChange?: (value: T[]) => void;
+
+  /** 다중 선택 시 표시 방향 */
+  multiDisplayDirection?: "horizontal" | "vertical";
+
+  /** 전체 선택 버튼 숨기기 */
+  hideSelectAll?: boolean;
+}
+
+// items 방식
+interface SelectWithItemsPropsBase<T> {
+  items: T[];
+  getChildren?: (item: T, index: number, depth: number) => T[] | undefined;
+  renderValue?: (value: T) => JSX.Element;
+  children?: JSX.Element;
+}
+
+// children 방식
+interface SelectWithChildrenPropsBase<T> {
+  items?: never;
+  getChildren?: never;
+  renderValue: (value: T) => JSX.Element;
+  children: JSX.Element;
+}
+
+export type SelectProps<T = unknown> =
+  | (SelectSingleBaseProps<T> & SelectWithItemsPropsBase<T>)
+  | (SelectSingleBaseProps<T> & SelectWithChildrenPropsBase<T>)
+  | (SelectMultipleBaseProps<T> & SelectWithItemsPropsBase<T>)
+  | (SelectMultipleBaseProps<T> & SelectWithChildrenPropsBase<T>);
+
+interface SelectComponent {
+  <T = unknown>(props: SelectProps<T>): JSX.Element;
+  Item: typeof SelectItem;
+  Action: typeof SelectAction;
+  Header: typeof SelectHeader;
+  ItemTemplate: typeof SelectItemTemplate;
+}
+
+/**
+ * Select 컴포넌트
+ *
+ * @example
+ * ```tsx
+ * // children 방식
+ * <Select value={selected()} onValueChange={setSelected} renderValue={(v) => v.name}>
+ *   <Select.Item value={item1}>{item1.name}</Select.Item>
+ *   <Select.Item value={item2}>{item2.name}</Select.Item>
+ * </Select>
+ *
+ * // items prop 방식
+ * <Select items={data} value={selected()} onValueChange={setSelected}>
+ *   <Select.ItemTemplate>
+ *     {(item) => <>{item.name}</>}
+ *   </Select.ItemTemplate>
+ * </Select>
+ * ```
+ */
+export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
+  const [local, rest] = splitProps(props as SelectProps<T> & { children?: JSX.Element }, [
+    "children",
+    "class",
+    "style",
+    "value",
+    "onValueChange",
+    "multiple",
+    "disabled",
+    "required",
+    "placeholder",
+    "size",
+    "inset",
+    "multiDisplayDirection",
+    "hideSelectAll",
+    "items",
+    "getChildren",
+    "renderValue",
+  ]);
+
+  let triggerRef!: HTMLDivElement;
+
+  const [open, setOpen] = createSignal(false);
+
+  // 선택된 값 관리 (controlled/uncontrolled 패턴)
+  type ValueType = T | T[] | undefined;
+  const [getValue, setInternalValue] = 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();
+    if (current === undefined) return false;
+
+    if (local.multiple) {
+      return Array.isArray(current) && current.includes(value);
+    }
+    return current === value;
+  };
+
+  // 값 토글
+  const toggleValue = (value: T) => {
+    if (local.multiple) {
+      const current = (getValue() as T[] | undefined) ?? [];
+      const idx = current.indexOf(value);
+      if (idx >= 0) {
+        setInternalValue([...current.slice(0, idx), ...current.slice(idx + 1)] as T[]);
+      } else {
+        setInternalValue([...current, value] as T[]);
+      }
+    } else {
+      setInternalValue(value);
+    }
+  };
+
+  // 드롭다운 닫기
+  const closeDropdown = () => {
+    setOpen(false);
+  };
+
+  // Context 값
+  const contextValue: SelectContextValue<T> = {
+    multiple: () => local.multiple ?? false,
+    isSelected,
+    toggleValue,
+    closeDropdown,
+  };
+
+  // 트리거 클릭
+  const handleTriggerClick = () => {
+    if (local.disabled) return;
+    setOpen((v) => !v);
+  };
+
+  // 트리거 키보드 처리 (Enter/Space만 처리, ArrowUp/Down은 Dropdown이 처리)
+  const handleTriggerKeyDown = (e: KeyboardEvent) => {
+    if (local.disabled) return;
+
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      setOpen(true);
+    }
+  };
+
+  // 트리거 클래스
+  const getTriggerClassName = () =>
+    getTriggerClass({
+      size: local.size,
+      disabled: local.disabled,
+      inset: local.inset,
+      class: local.class,
+    });
+
+  // 내부 컴포넌트: Provider 안에서 children을 resolve
+  const SelectInner: ParentComponent = (innerProps) => {
+    const resolved = children(() => innerProps.children);
+    const [slots, items] = splitSlots(resolved, ["selectHeader", "selectAction", "selectItemTemplate"] as const);
+
+    // itemTemplate 함수 추출
+    const getItemTemplate = (): ((item: T, index: number, depth: number) => JSX.Element) | undefined => {
+      const templateSlots = slots().selectItemTemplate;
+      if (templateSlots.length === 0) return undefined;
+      // WeakMap에서 함수 참조 가져오기
+      return templateFnMap.get(templateSlots[0]) as
+        | ((item: T, index: number, depth: number) => JSX.Element)
+        | undefined;
+    };
+
+    // items 재귀 렌더링
+    const renderItems = (itemList: T[], depth: number): JSX.Element => {
+      const itemTemplate = getItemTemplate();
+      return (
+        <For each={itemList}>
+          {(item, index) => (
+            <SelectItem value={item}>
+              {itemTemplate ? itemTemplate(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>
+          )}
+        </For>
+      );
+    };
+
+    // 선택된 값 렌더링 (items 방식일 때 itemTemplate 재사용)
+    const renderValue = (value: T): JSX.Element => {
+      if (local.renderValue) {
+        return local.renderValue(value);
+      }
+      const itemTemplate = getItemTemplate();
+      if (itemTemplate) {
+        return itemTemplate(value, 0, 0);
+      }
+      return <>{String(value)}</>;
+    };
+
+    // 선택된 값 표시
+    const renderSelectedValue = (): JSX.Element => {
+      const current = getValue();
+
+      if (current === undefined || (Array.isArray(current) && current.length === 0)) {
+        return <span class={textMuted}>{local.placeholder ?? ""}</span>;
+      }
+
+      if (local.multiple && Array.isArray(current)) {
+        const direction = local.multiDisplayDirection ?? "horizontal";
+        return (
+          <div class={clsx("flex gap-1", direction === "vertical" ? "flex-col" : "flex-wrap")}>
+            <For each={current}>{(v) => <span class={multiTagClass}>{renderValue(v)}</span>}</For>
+          </div>
+        );
+      }
+
+      return renderValue(current as T);
+    };
+
+    return (
+      <div {...rest} data-select class={local.inset ? "flex" : "inline-flex"}>
+        <div
+          ref={triggerRef}
+          use:ripple={!local.disabled}
+          role="combobox"
+          aria-haspopup="listbox"
+          aria-expanded={open()}
+          aria-disabled={local.disabled || undefined}
+          aria-required={local.required || undefined}
+          tabIndex={local.disabled ? -1 : 0}
+          class={twMerge(getTriggerClassName(), slots().selectAction.length > 0 && "rounded-r-none border-r-0")}
+          style={local.style}
+          onClick={handleTriggerClick}
+          onKeyDown={handleTriggerKeyDown}
+        >
+          <div class={selectedValueClass}>{renderSelectedValue()}</div>
+          <div class={chevronWrapperClass}>
+            <Icon icon={IconChevronDown} size="1em" />
+          </div>
+        </div>
+        <Show when={slots().selectAction.length > 0}>{slots().selectAction}</Show>
+
+        <Dropdown triggerRef={() => triggerRef} open={open()} onOpenChange={setOpen} keyboardNav>
+          <Show when={slots().selectHeader.length > 0}>{slots().selectHeader.single()}</Show>
+          <List inset role="listbox">
+            <Show when={local.items} fallback={items()}>
+              {renderItems(local.items!, 0)}
+            </Show>
+          </List>
+        </Dropdown>
+      </div>
+    );
+  };
+
+  return (
+    <SelectContext.Provider value={contextValue as SelectContextValue}>
+      <SelectInner>{local.children}</SelectInner>
+    </SelectContext.Provider>
+  );
+};
+
+Select.Item = SelectItem;
+Select.Action = SelectAction;
+Select.Header = SelectHeader;
+Select.ItemTemplate = SelectItemTemplate;

package/src/components/form-control/select/SelectContext.ts

@@ -0,0 +1,25 @@
+import { createContext, useContext, type Accessor } from "solid-js";
+
+export interface SelectContextValue<T = unknown> {
+  /** 다중 선택 모드 여부 */
+  multiple: Accessor<boolean>;
+
+  /** 값이 선택되어 있는지 확인 */
+  isSelected: (value: T) => boolean;
+
+  /** 값 선택/해제 토글 */
+  toggleValue: (value: T) => void;
+
+  /** 드롭다운 닫기 */
+  closeDropdown: () => void;
+}
+
+export const SelectContext = createContext<SelectContextValue>();
+
+export function useSelectContext<T = unknown>(): SelectContextValue<T> {
+  const context = useContext(SelectContext);
+  if (!context) {
+    throw new Error("useSelectContext는 Select 컴포넌트 내부에서만 사용할 수 있습니다");
+  }
+  return context as SelectContextValue<T>;
+}

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

@@ -0,0 +1,124 @@
+import { children, type JSX, type ParentComponent, Show, splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { IconCheck } from "@tabler/icons-solidjs";
+import { Icon } from "../../display/Icon";
+import { useSelectContext } from "./SelectContext";
+import { ripple } from "../../../directives/ripple";
+import { List } from "../../data/list/List";
+import { Collapse } from "../../disclosure/Collapse";
+import { splitSlots } from "../../../helpers/splitSlots";
+import {
+  listItemBaseClass,
+  listItemSelectedClass,
+  listItemDisabledClass,
+  listItemIndentGuideClass,
+  listItemContentClass,
+  getListItemSelectedIconClass,
+} from "../../data/list/ListItem.styles";
+
+void ripple;
+
+/**
+ * 중첩 아이템을 담는 서브 컴포넌트
+ */
+const SelectItemChildren: ParentComponent = (props) => (
+  <div class="flex" data-select-item-children>
+    <div class={listItemIndentGuideClass} />
+    <List inset class="flex-1">
+      {props.children}
+    </List>
+  </div>
+);
+
+export interface SelectItemProps<T = unknown> extends Omit<
+  JSX.ButtonHTMLAttributes<HTMLButtonElement>,
+  "value" | "onClick"
+> {
+  /** 아이템의 값 */
+  value: T;
+
+  /** 비활성화 */
+  disabled?: boolean;
+}
+
+interface SelectItemComponent<T = unknown> extends ParentComponent<SelectItemProps<T>> {
+  Children: typeof SelectItemChildren;
+}
+
+/**
+ * Select 드롭다운 내의 선택 가능한 아이템
+ *
+ * @example
+ * ```tsx
+ * <Select.Item value={item}>{item.name}</Select.Item>
+ *
+ * // 중첩 아이템
+ * <Select.Item value={parent}>
+ *   {parent.name}
+ *   <Select.Item.Children>
+ *     <Select.Item value={child}>{child.name}</Select.Item>
+ *   </Select.Item.Children>
+ * </Select.Item>
+ * ```
+ */
+export const SelectItem: SelectItemComponent = <T,>(props: SelectItemProps<T> & { children?: JSX.Element }) => {
+  const [local, rest] = splitProps(props, ["children", "class", "value", "disabled"]);
+
+  const context = useSelectContext<T>();
+
+  const resolved = children(() => local.children);
+  const [slots, content] = splitSlots(resolved, ["selectItemChildren"] as const);
+
+  const hasChildren = () => slots().selectItemChildren.length > 0;
+  const isSelected = () => context.isSelected(local.value);
+  const useRipple = () => !local.disabled;
+
+  const handleClick = () => {
+    if (local.disabled) return;
+
+    context.toggleValue(local.value);
+
+    // 단일 선택 모드에서만 드롭다운 닫기
+    if (!context.multiple()) {
+      context.closeDropdown();
+    }
+  };
+
+  const getClassName = () =>
+    twMerge(
+      listItemBaseClass,
+      isSelected() && listItemSelectedClass,
+      local.disabled && listItemDisabledClass,
+      local.class,
+    );
+
+  const getCheckIconClass = () => getListItemSelectedIconClass(isSelected());
+
+  return (
+    <>
+      <button
+        {...rest}
+        type="button"
+        use:ripple={useRipple()}
+        class={getClassName()}
+        data-select-item
+        data-list-item
+        role="option"
+        aria-selected={isSelected() || undefined}
+        aria-disabled={local.disabled || undefined}
+        tabIndex={local.disabled ? -1 : 0}
+        onClick={handleClick}
+      >
+        <Show when={context.multiple() && !hasChildren()}>
+          <Icon icon={IconCheck} class={getCheckIconClass()} />
+        </Show>
+        <span class={listItemContentClass}>{content()}</span>
+      </button>
+      <Show when={hasChildren()}>
+        <Collapse open={true}>{slots().selectItemChildren.single()}</Collapse>
+      </Show>
+    </>
+  );
+};
+
+SelectItem.Children = SelectItemChildren;