@simplysm/solid 13.0.53 → 13.0.56

package/src/components/form-control/combobox/Combobox.tsx

@@ -1,25 +1,14 @@
-import {
-  children,
-  createMemo,
-  createSignal,
-  For,
-  type JSX,
-  onCleanup,
-  Show,
-  splitProps,
-} from "solid-js";
+import { createMemo, createSignal, For, type JSX, onCleanup, Show, splitProps } from "solid-js";
 import clsx from "clsx";
 import { IconChevronDown, IconLoader2 } from "@tabler/icons-solidjs";
 import { DebounceQueue } from "@simplysm/core-common";
 import { Icon } from "../../display/Icon";
 import { Dropdown } from "../../disclosure/Dropdown";
 import { List } from "../../data/list/List";
-import { ComboboxContext, type ComboboxContextValue } from "./ComboboxContext";
+import { ComboboxContext, type ComboboxContextValue, useComboboxContext } from "./ComboboxContext";
 import { ComboboxItem } from "./ComboboxItem";
 import { ripple } from "../../../directives/ripple";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
-import { createItemTemplate } from "../../../hooks/createItemTemplate";
-import { splitSlots } from "../../../helpers/splitSlots";
 import { type ComponentSize, textMuted } from "../../../styles/tokens.styles";
 import { chevronWrapperClass, getTriggerClass } from "../DropdownTrigger.styles";
 import { Invalid } from "../Invalid";
@@ -36,8 +25,18 @@ const inputClass = clsx(
 
 const noResultsClass = clsx("px-3 py-2", textMuted);
 
-const { TemplateSlot: ComboboxItemTemplate, getTemplate: getComboboxItemTemplate } =
-  createItemTemplate<[item: unknown, index: number]>("data-combobox-item-template");
+/**
+ * 아이템 템플릿 서브 컴포넌트
+ */
+const ComboboxItemTemplate = <TArgs extends unknown[]>(props: {
+  children: (...args: TArgs) => JSX.Element;
+}) => {
+  const ctx = useComboboxContext();
+  // eslint-disable-next-line solid/reactivity -- 렌더 함수를 signal에 저장, JSX tracked scope에서 호출됨
+  ctx.setItemTemplate(props.children as (...args: unknown[]) => JSX.Element);
+  onCleanup(() => ctx.setItemTemplate(undefined));
+  return null;
+};
 
 // Props 정의
 export interface ComboboxProps<TValue = unknown> {
@@ -150,8 +149,6 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
     "touchMode",
   ]);
 
-  let triggerRef!: HTMLDivElement;
-
   // 상태
   const [open, setOpen] = createSignal(false);
   const [query, setQuery] = createSignal("");
@@ -190,11 +187,19 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
     setOpen(false);
   };
 
+  // 아이템 템플릿 signal
+  const [itemTemplate, _setItemTemplate] = createSignal<
+    ((...args: unknown[]) => JSX.Element) | undefined
+  >();
+  const setItemTemplate = (fn: ((...args: unknown[]) => JSX.Element) | undefined) =>
+    _setItemTemplate(() => fn);
+
   // Context 값
   const contextValue: ComboboxContextValue<T> = {
     isSelected,
     selectValue,
     closeDropdown,
+    setItemTemplate,
   };
 
   // 검색 실행
@@ -224,24 +229,11 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
     }
   };
 
-  // 트리거 클릭
-  const handleTriggerClick = (e: MouseEvent) => {
-    if (local.disabled) return;
-
-    // input 클릭 시 드롭다운 토글
-    const target = e.target as HTMLElement;
-    if (target.tagName === "INPUT") {
-      if (!open()) {
-        setOpen(true);
-        performSearch(query());
-      }
-    } else {
-      // 다른 영역 클릭 시 토글
-      const wasOpen = open();
-      setOpen(!wasOpen);
-      if (!wasOpen) {
-        performSearch(query());
-      }
+  // Dropdown 열림/닫힘 변경 핸들러
+  const handleOpenChange = (isOpen: boolean) => {
+    setOpen(isOpen);
+    if (isOpen) {
+      performSearch(query());
     }
   };
 
@@ -283,122 +275,106 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
   // 참고: 초기 검색은 handleTriggerClick에서 수행됨
   // 입력 시에는 handleInput에서 performSearch가 호출됨
 
-  // 내부 컴포넌트
-  const ComboboxInner = (innerProps: { children?: JSX.Element }) => {
-    const resolved = children(() => innerProps.children);
-    const [slots, childItems] = splitSlots(resolved, ["comboboxItemTemplate"] as const);
-
-    // itemTemplate 함수 추출
-    const getItemTemplate = (): ((item: T, index: number) => JSX.Element) | undefined => {
-      return getComboboxItemTemplate(slots().comboboxItemTemplate) as
-        | ((item: T, index: number) => JSX.Element)
-        | undefined;
-    };
-
-    // 선택된 값 또는 입력 표시
-    const renderDisplayContent = (): JSX.Element => {
-      const currentValue = getValue();
-
-      // 드롭다운이 열려있거나 값이 없으면 입력 필드 표시
-      if (open() || currentValue === undefined) {
-        return (
-          <input
-            ref={(el) => {
-              // 드롭다운이 열릴 때 input에 포커스
-              if (open()) {
-                requestAnimationFrame(() => el.focus());
-              }
-            }}
-            type="text"
-            class={inputClass}
-            value={query()}
-            placeholder={currentValue === undefined ? local.placeholder : undefined}
-            disabled={local.disabled}
-            onInput={handleInput}
-          />
-        );
-      }
-
-      // 값이 있고 드롭다운이 닫혀있으면 값 표시
-      return <div class="truncate">{local.renderValue(currentValue)}</div>;
-    };
+  // 선택된 값 또는 입력 표시
+  const renderDisplayContent = (): JSX.Element => {
+    const currentValue = getValue();
 
-    // 아이템 렌더링
-    const renderItems = (): JSX.Element => {
-      const itemTemplate = getItemTemplate();
+    // 드롭다운이 열려있거나 값이 없으면 입력 필드 표시
+    if (open() || currentValue === undefined) {
+      return (
+        <input
+          ref={(el) => {
+            // 드롭다운이 열릴 때 input에 포커스
+            if (open()) {
+              requestAnimationFrame(() => el.focus());
+            }
+          }}
+          type="text"
+          class={inputClass}
+          value={query()}
+          placeholder={currentValue === undefined ? local.placeholder : undefined}
+          disabled={local.disabled}
+          autocomplete="one-time-code"
+          onInput={handleInput}
+        />
+      );
+    }
 
-      // 로딩 중
-      if (busyCount() > 0) {
-        return <div class={noResultsClass}>검색 중...</div>;
-      }
+    // 값이 있고 드롭다운이 닫혀있으면 값 표시
+    return <div class="truncate">{local.renderValue(currentValue)}</div>;
+  };
 
-      // children 방식 (아이템이 직접 전달된 경우)
-      const resolvedChildren = childItems();
-      if (resolvedChildren.length > 0) {
-        return <>{resolvedChildren}</>;
-      }
+  // 아이템 렌더링
+  const renderItems = (): JSX.Element => {
+    const template = itemTemplate() as ((item: T, index: number) => JSX.Element) | undefined;
 
-      // items가 비어있는 경우
-      if (items().length === 0) {
-        return <div class={noResultsClass}>검색 결과가 없습니다</div>;
-      }
+    // 로딩 중
+    if (busyCount() > 0) {
+      return <div class={noResultsClass}>검색 중...</div>;
+    }
 
-      // ItemTemplate 방식
-      if (itemTemplate) {
-        return (
-          <For each={items()}>
-            {(item, index) => (
-              <ComboboxItem value={item}>{itemTemplate(item, index())}</ComboboxItem>
-            )}
-          </For>
-        );
-      }
+    // items가 비어있는 경우
+    if (items().length === 0) {
+      return <div class={noResultsClass}>검색 결과가 없습니다</div>;
+    }
 
-      // 기본 렌더링
+    // ItemTemplate 방식
+    if (template) {
       return (
         <For each={items()}>
-          {(item) => <ComboboxItem value={item}>{String(item)}</ComboboxItem>}
+          {(item, index) => <ComboboxItem value={item}>{template(item, index())}</ComboboxItem>}
         </For>
       );
-    };
+    }
 
+    // 기본 렌더링
     return (
-      <div {...rest} data-combobox 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={getTriggerClassName()}
-          style={local.style}
-          onClick={handleTriggerClick}
-          onKeyDown={handleTriggerKeyDown}
-        >
-          <div class={selectedValueClass}>{renderDisplayContent()}</div>
-          <div class={chevronWrapperClass}>
-            <Show when={busyCount() > 0} fallback={<Icon icon={IconChevronDown} size="1em" />}>
-              <Icon icon={IconLoader2} size="1em" class="animate-spin" />
-            </Show>
-          </div>
-        </div>
-
-        <Dropdown triggerRef={() => triggerRef} open={open()} onOpenChange={setOpen} keyboardNav>
-          <List inset role="listbox">
-            {renderItems()}
-          </List>
-        </Dropdown>
-      </div>
+      <For each={items()}>{(item) => <ComboboxItem value={item}>{String(item)}</ComboboxItem>}</For>
     );
   };
 
   return (
     <Invalid message={errorMsg()} variant="border" touchMode={local.touchMode}>
       <ComboboxContext.Provider value={contextValue as ComboboxContextValue}>
-        <ComboboxInner>{local.children}</ComboboxInner>
+        <div {...rest} data-combobox class={local.inset ? "flex" : "inline-flex"}>
+          <Dropdown
+            disabled={local.disabled}
+            open={open()}
+            onOpenChange={handleOpenChange}
+            keyboardNav
+          >
+            <Dropdown.Trigger>
+              <div
+                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={getTriggerClassName()}
+                style={local.style}
+                onKeyDown={handleTriggerKeyDown}
+              >
+                <div class={selectedValueClass}>{renderDisplayContent()}</div>
+                <div class={chevronWrapperClass}>
+                  <Show
+                    when={busyCount() > 0}
+                    fallback={<Icon icon={IconChevronDown} size="1em" />}
+                  >
+                    <Icon icon={IconLoader2} size="1em" class="animate-spin" />
+                  </Show>
+                </div>
+              </div>
+            </Dropdown.Trigger>
+            <Dropdown.Content>
+              <List inset role="listbox">
+                {local.children}
+                {renderItems()}
+              </List>
+            </Dropdown.Content>
+          </Dropdown>
+        </div>
       </ComboboxContext.Provider>
     </Invalid>
   );

package/src/components/form-control/combobox/ComboboxContext.ts

@@ -1,4 +1,4 @@
-import { createContext, useContext } from "solid-js";
+import { type JSX, createContext, useContext } from "solid-js";
 
 export interface ComboboxContextValue<TValue = unknown> {
   /** 값이 선택되어 있는지 확인 */
@@ -9,6 +9,9 @@ export interface ComboboxContextValue<TValue = unknown> {
 
   /** 드롭다운 닫기 */
   closeDropdown: () => void;
+
+  /** 아이템 템플릿 등록 */
+  setItemTemplate: (fn: ((...args: unknown[]) => JSX.Element) | undefined) => void;
 }
 
 export const ComboboxContext = createContext<ComboboxContextValue>();

package/src/components/form-control/date-range-picker/DateRangePicker.tsx

@@ -39,9 +39,6 @@ export interface DateRangePickerProps {
   /** 사이즈 */
   size?: FieldSize;
 
-  /** 기간 타입 라벨 (기본값: { day: "일", month: "월", range: "범위" }) */
-  periodLabels?: Partial<Record<DateRangePeriodType, string>>;
-
   /** 커스텀 class */
   class?: string;
 
@@ -90,19 +87,10 @@ export const DateRangePicker: Component<DateRangePickerProps> = (props) => {
     "required",
     "disabled",
     "size",
-    "periodLabels",
     "class",
     "style",
   ]);
 
-  // 기간 타입 라벨
-  const labels = (): Record<DateRangePeriodType, string> => ({
-    day: "일",
-    month: "월",
-    range: "범위",
-    ...local.periodLabels,
-  });
-
   // controlled/uncontrolled 패턴
   const [periodType, setPeriodType] = createControllableSignal({
     value: () => local.periodType ?? ("range" as DateRangePeriodType),
@@ -170,15 +158,17 @@ export const DateRangePicker: Component<DateRangePickerProps> = (props) => {
       <Select
         value={periodType()}
         onValueChange={handlePeriodTypeChange}
-        renderValue={(v: DateRangePeriodType) => <>{labels()[v]}</>}
+        renderValue={(v: DateRangePeriodType) => (
+          <>{{ day: "일", month: "월", range: "범위" }[v]}</>
+        )}
         required
         disabled={local.disabled}
         size={local.size}
         inset
       >
-        <Select.Item value={"day" as DateRangePeriodType}>{labels().day}</Select.Item>
-        <Select.Item value={"month" as DateRangePeriodType}>{labels().month}</Select.Item>
-        <Select.Item value={"range" as DateRangePeriodType}>{labels().range}</Select.Item>
+        <Select.Item value={"day" as DateRangePeriodType}>일</Select.Item>
+        <Select.Item value={"month" as DateRangePeriodType}>월</Select.Item>
+        <Select.Item value={"range" as DateRangePeriodType}>범위</Select.Item>
       </Select>
 
       <Show

package/src/components/form-control/field/DatePicker.tsx

@@ -3,7 +3,7 @@ import { type Component, createMemo, type JSX, Show, splitProps } from "solid-js
 import { twMerge } from "tailwind-merge";
 import { DateOnly } from "@simplysm/core-common";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
-import { type FieldSize, fieldInputClass, getFieldWrapperClass } from "./Field.styles";
+import { fieldInputClass, type FieldSize, getFieldWrapperClass } from "./Field.styles";
 import { Invalid } from "../../form-control/Invalid";
 
 type DatePickerUnit = "year" | "month" | "date";
@@ -181,6 +181,7 @@ export const DatePicker: Component<DatePickerProps> = (props) => {
       disabled: local.disabled,
       inset: local.inset,
       includeCustomClass: includeCustomClass && local.class,
+      extra: "min-w-32",
     });
 
   // 편집 가능 여부
@@ -231,6 +232,7 @@ export const DatePicker: Component<DatePickerProps> = (props) => {
                 title={local.title}
                 min={formatDateValue(local.min, fieldType())}
                 max={formatDateValue(local.max, fieldType())}
+                autocomplete="one-time-code"
                 onChange={handleChange}
               />
             </div>
@@ -257,6 +259,7 @@ export const DatePicker: Component<DatePickerProps> = (props) => {
                 title={local.title}
                 min={formatDateValue(local.min, fieldType())}
                 max={formatDateValue(local.max, fieldType())}
+                autocomplete="one-time-code"
                 onChange={handleChange}
               />
             </div>

package/src/components/form-control/field/DateTimePicker.tsx

@@ -176,6 +176,7 @@ export const DateTimePicker: Component<DateTimePickerProps> = (props) => {
       disabled: local.disabled,
       inset: local.inset,
       includeCustomClass: includeCustomClass && local.class,
+      extra: "min-w-44",
     });
 
   // 편집 가능 여부
@@ -230,6 +231,7 @@ export const DateTimePicker: Component<DateTimePickerProps> = (props) => {
                 min={formatDateTimeValue(local.min, fieldType())}
                 max={formatDateTimeValue(local.max, fieldType())}
                 step={getStep()}
+                autocomplete="one-time-code"
                 onChange={handleChange}
               />
             </div>
@@ -262,6 +264,7 @@ export const DateTimePicker: Component<DateTimePickerProps> = (props) => {
                 min={formatDateTimeValue(local.min, fieldType())}
                 max={formatDateTimeValue(local.max, fieldType())}
                 step={getStep()}
+                autocomplete="one-time-code"
                 onChange={handleChange}
               />
             </div>

package/src/components/form-control/field/Field.styles.ts

@@ -22,6 +22,7 @@ export const fieldBaseClass = clsx(
   fieldSurface,
   "px-2 py-1",
   "h-field",
+  "[text-decoration:inherit]",
 );
 
 // 사이즈별 스타일