@simplysm/solid 13.0.0-beta.6

package/src/components/data/sheet/DataSheetColumn.tsx

@@ -0,0 +1,29 @@
+import type { JSX } from "solid-js";
+import type { DataSheetColumnDef, DataSheetColumnProps } from "./types";
+import { normalizeHeader } from "./sheetUtils";
+
+export function isDataSheetColumnDef(value: unknown): value is DataSheetColumnDef<unknown> {
+  return value != null && typeof value === "object" && (value as Record<string, unknown>)["__type"] === "sheet-column";
+}
+
+/* eslint-disable solid/reactivity -- plain object 반환 패턴으로 reactive context 불필요 */
+export function DataSheetColumn<T>(props: DataSheetColumnProps<T>): JSX.Element {
+  return {
+    __type: "sheet-column",
+    key: props.key,
+    header: normalizeHeader(props.header),
+    headerContent: props.headerContent,
+    headerStyle: props.headerStyle,
+    summary: props.summary,
+    tooltip: props.tooltip,
+    cell: props.children,
+    class: props.class,
+    fixed: props.fixed ?? false,
+    hidden: props.hidden ?? false,
+    collapse: props.collapse ?? false,
+    width: props.width,
+    sortable: props.sortable ?? true,
+    resizable: props.resizable ?? true,
+  } as unknown as JSX.Element;
+}
+/* eslint-enable solid/reactivity */

package/src/components/data/sheet/DataSheetConfigDialog.tsx

@@ -0,0 +1,146 @@
+import { type Component } from "solid-js";
+import { createStore, reconcile } from "solid-js/store";
+import clsx from "clsx";
+import { useDialogInstance } from "../../disclosure/DialogInstanceContext";
+import type { DataSheetConfig, DataSheetConfigColumn, DataSheetConfigColumnInfo, DataSheetReorderEvent } from "./types";
+import { DataSheet } from "./DataSheet";
+import { Checkbox } from "../../form-control/checkbox/Checkbox";
+import { TextInput } from "../../form-control/field/TextInput";
+import { Button } from "../../form-control/Button";
+import { borderSubtle } from "../../../styles/tokens.styles";
+
+const containerClass = clsx("flex flex-col", "gap-2", "p-2");
+const sheetWrapperClass = clsx("rounded border", borderSubtle);
+const footerClass = clsx("flex justify-between", "gap-2");
+const footerActionsClass = clsx("flex gap-2");
+
+interface EditColumnItem {
+  key: string;
+  headerText: string;
+  fixed: boolean;
+  hidden: boolean;
+  width: string;
+}
+
+export interface DataSheetConfigDialogProps {
+  columnInfos: DataSheetConfigColumnInfo[];
+  currentConfig: DataSheetConfig;
+}
+
+export const DataSheetConfigDialog: Component<DataSheetConfigDialogProps> = (props) => {
+  const dialog = useDialogInstance<DataSheetConfig>();
+
+  /* eslint-disable solid/reactivity -- 모달 props는 마운트 시 한 번만 사용되는 정적 값 */
+  const initialItems: EditColumnItem[] = props.columnInfos
+    .filter((info) => !info.collapse)
+    .map((info) => {
+      const saved = props.currentConfig.columnRecord?.[info.key];
+      return {
+        key: info.key,
+        headerText: info.header.join(" > "),
+        fixed: saved?.fixed ?? info.fixed,
+        hidden: saved?.hidden ?? info.hidden,
+        width: saved?.width ?? info.width ?? "",
+      };
+    })
+    .sort((a, b) => {
+      const orderA = props.currentConfig.columnRecord?.[a.key]?.displayOrder ?? Infinity;
+      const orderB = props.currentConfig.columnRecord?.[b.key]?.displayOrder ?? Infinity;
+      return orderA - orderB;
+    });
+  /* eslint-enable solid/reactivity */
+
+  const [editItems, setEditItems] = createStore<EditColumnItem[]>(initialItems);
+
+  function handleReorder(event: DataSheetReorderEvent<EditColumnItem>): void {
+    const items = [...editItems];
+    const fromIndex = items.findIndex((i) => i.key === event.item.key);
+    if (fromIndex < 0) return;
+
+    const [moved] = items.splice(fromIndex, 1);
+    let toIndex = items.findIndex((i) => i.key === event.targetItem.key);
+    if (toIndex < 0) return;
+
+    if (event.position === "after") toIndex++;
+    items.splice(toIndex, 0, moved);
+    setEditItems(reconcile(items));
+  }
+
+  function updateItem(key: string, field: keyof EditColumnItem, value: EditColumnItem[keyof EditColumnItem]): void {
+    const index = editItems.findIndex((item) => item.key === key);
+    if (index >= 0) {
+      setEditItems(index, { [field]: value } as Partial<EditColumnItem>);
+    }
+  }
+
+  function handleOk(): void {
+    const columnRecord: Record<string, DataSheetConfigColumn> = {};
+
+    for (let i = 0; i < editItems.length; i++) {
+      const item = editItems[i];
+      const info = props.columnInfos.find((c) => c.key === item.key)!;
+
+      const entry: DataSheetConfigColumn = {};
+
+      if (item.fixed !== info.fixed) entry.fixed = item.fixed;
+      if (item.hidden !== info.hidden) entry.hidden = item.hidden;
+      if (item.width && item.width !== (info.width ?? "")) entry.width = item.width;
+      entry.displayOrder = i;
+
+      if (Object.keys(entry).length > 0) {
+        columnRecord[item.key] = entry;
+      }
+    }
+
+    dialog?.close({ columnRecord });
+  }
+
+  function handleReset(): void {
+    if (!confirm("모든 시트 설정을 초기화하시겠습니까?")) return;
+    dialog?.close({ columnRecord: {} });
+  }
+
+  return (
+    <div class={containerClass}>
+      <div class={sheetWrapperClass}>
+        <DataSheet items={editItems} inset hideConfigBar onItemsReorder={handleReorder}>
+          <DataSheet.Column<EditColumnItem> key="header" header="컬럼" class="px-2 py-1" sortable={false}>
+            {(ctx) => ctx.item.headerText}
+          </DataSheet.Column>
+          <DataSheet.Column<EditColumnItem> key="fixed" header="고정" sortable={false}>
+            {(ctx) => (
+              <Checkbox inset value={ctx.item.fixed} onValueChange={(v) => updateItem(ctx.item.key, "fixed", v)} />
+            )}
+          </DataSheet.Column>
+          <DataSheet.Column<EditColumnItem> key="hidden" header="숨김" sortable={false}>
+            {(ctx) => (
+              <Checkbox inset value={ctx.item.hidden} onValueChange={(v) => updateItem(ctx.item.key, "hidden", v)} />
+            )}
+          </DataSheet.Column>
+          <DataSheet.Column<EditColumnItem> key="width" header="너비" sortable={false}>
+            {(ctx) => (
+              <TextInput
+                value={ctx.item.width}
+                onValueChange={(v) => updateItem(ctx.item.key, "width", v)}
+                inset
+                placeholder="auto"
+              />
+            )}
+          </DataSheet.Column>
+        </DataSheet>
+      </div>
+
+      <div class={footerClass}>
+        <Button onClick={handleReset} theme="warning" variant="solid">
+          초기화
+        </Button>
+        <div class={footerActionsClass}>
+          <Button onClick={() => dialog?.close(undefined)}>취소</Button>
+          <Button onClick={handleOk} theme="primary" variant="solid">
+            확인
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/data/sheet/sheetUtils.ts

@@ -0,0 +1,156 @@
+import type { DataSheetColumnDef, FlatItem, HeaderDef, SortingDef } from "./types";
+import { objGetChainValue } from "@simplysm/core-common";
+
+export function normalizeHeader(header?: string | string[]): string[] {
+  if (header == null) return [""];
+  if (typeof header === "string") return [header];
+  return header;
+}
+
+export function buildHeaderTable<T>(columns: DataSheetColumnDef<T>[]): (HeaderDef | null)[][] {
+  if (columns.length === 0) return [];
+
+  const maxDepth = Math.max(...columns.map((c) => c.header.length));
+  if (maxDepth === 0) return [];
+
+  // occupied[r][c] = true이면 이미 다른 셀의 병합 영역
+  const occupied: boolean[][] = Array.from({ length: maxDepth }, () =>
+    Array.from({ length: columns.length }, () => false),
+  );
+  const table: (HeaderDef | null)[][] = Array.from({ length: maxDepth }, () =>
+    Array.from({ length: columns.length }, () => null),
+  );
+
+  // 각 컬럼의 헤더를 maxDepth까지 패딩
+  const padded = columns.map((col) => {
+    const h = col.header;
+    const result: string[] = [];
+    for (let d = 0; d < maxDepth; d++) {
+      result.push(d < h.length ? h[d] : h[h.length - 1]);
+    }
+    return result;
+  });
+
+  for (let r = 0; r < maxDepth; r++) {
+    for (let c = 0; c < columns.length; c++) {
+      if (occupied[r][c]) continue;
+
+      const text = padded[c][r];
+      // 원본 header 길이 기반으로 판별: 현재 행이 원본 header의 마지막 레벨 이상이면 leaf
+      const isLastRow = r >= columns[c].header.length - 1;
+
+      // colspan: 같은 행에서 같은 텍스트 + 같은 상위 그룹 + 고정 경계를 넘지 않음
+      let colspan = 1;
+      if (!isLastRow) {
+        const startFixed = columns[c].fixed;
+        while (
+          c + colspan < columns.length &&
+          !occupied[r][c + colspan] &&
+          padded[c + colspan][r] === text &&
+          columns[c + colspan].fixed === startFixed &&
+          isSameGroup(padded, c, c + colspan, 0, r)
+        ) {
+          colspan++;
+        }
+      }
+
+      // rowspan: isLastRow이면 남은 깊이만큼
+      const rowspan = isLastRow ? maxDepth - r : 1;
+
+      const col = columns[c];
+      table[r][c] = {
+        text,
+        colspan,
+        rowspan,
+        isLastRow,
+        colIndex: isLastRow ? c : undefined,
+        fixed: isLastRow ? col.fixed : undefined,
+        width: isLastRow ? col.width : undefined,
+        style: isLastRow ? col.headerStyle : undefined,
+        headerContent: isLastRow ? col.headerContent : undefined,
+      };
+
+      // 병합 영역 마킹
+      for (let dr = 0; dr < rowspan; dr++) {
+        for (let dc = 0; dc < colspan; dc++) {
+          if (dr === 0 && dc === 0) continue;
+          occupied[r + dr][c + dc] = true;
+        }
+      }
+    }
+  }
+
+  return table;
+}
+
+// 같은 병합 그룹에 속하는지 확인 (행 0~endRow까지 같은 텍스트 시퀀스)
+function isSameGroup(padded: string[][], colA: number, colB: number, startRow: number, endRow: number): boolean {
+  for (let r = startRow; r < endRow; r++) {
+    if (padded[colA][r] !== padded[colB][r]) return false;
+  }
+  return true;
+}
+
+export function flattenTree<T>(
+  items: T[],
+  expandedItems: T[],
+  getChildren?: (item: T, index: number) => T[] | undefined,
+): FlatItem<T>[] {
+  if (!getChildren) {
+    return items.map((item, i) => ({
+      item,
+      index: i,
+      depth: 0,
+      hasChildren: false,
+    }));
+  }
+
+  const result: FlatItem<T>[] = [];
+  let index = 0;
+
+  function walk(list: T[], depth: number, parent?: T): void {
+    for (const item of list) {
+      const children = getChildren!(item, index);
+      const hasChildren = children != null && children.length > 0;
+      result.push({ item, index, depth, hasChildren, parent });
+      index++;
+
+      if (hasChildren && expandedItems.includes(item)) {
+        walk(children, depth + 1, item);
+      }
+    }
+  }
+
+  walk(items, 0);
+  return result;
+}
+
+export function collectAllExpandable<T>(items: T[], getChildren: (item: T, index: number) => T[] | undefined): T[] {
+  const result: T[] = [];
+  let index = 0;
+
+  function walk(list: T[]): void {
+    for (const item of list) {
+      const children = getChildren(item, index);
+      index++;
+      if (children != null && children.length > 0) {
+        result.push(item);
+        walk(children);
+      }
+    }
+  }
+
+  walk(items);
+  return result;
+}
+
+export function applySorting<T>(items: T[], sorts: SortingDef[]): T[] {
+  if (sorts.length === 0) return items;
+
+  let result = [...items];
+  for (const sort of [...sorts].reverse()) {
+    const selector = (item: T) => objGetChainValue(item, sort.key) as string | number | undefined;
+    result = sort.desc ? result.orderByDesc(selector) : result.orderBy(selector);
+  }
+  return result;
+}

package/src/components/data/sheet/types.ts

@@ -0,0 +1,143 @@
+import type { JSX } from "solid-js";
+
+export interface DataSheetProps<T> {
+  // 데이터
+  items?: T[];
+  // 설정
+  persistKey?: string;
+  hideConfigBar?: boolean;
+  inset?: boolean;
+  contentStyle?: JSX.CSSProperties | string;
+
+  // 정렬
+  sorts?: SortingDef[];
+  onSortsChange?: (sorts: SortingDef[]) => void;
+  autoSort?: boolean;
+
+  // 페이지네이션
+  pageIndex?: number;
+  onPageIndexChange?: (pageIndex: number) => void;
+  totalPageCount?: number;
+  itemsPerPage?: number;
+  displayPageCount?: number;
+
+  // 선택
+  selectMode?: "single" | "multiple";
+  selectedItems?: T[];
+  onSelectedItemsChange?: (items: T[]) => void;
+  autoSelect?: "click";
+  isItemSelectable?: (item: T) => boolean | string;
+
+  // 트리 확장
+  expandedItems?: T[];
+  onExpandedItemsChange?: (items: T[]) => void;
+  getChildren?: (item: T, index: number) => T[] | undefined;
+
+  // 셀 스타일
+  cellClass?: (item: T, colKey: string) => string | undefined;
+  cellStyle?: (item: T, colKey: string) => string | undefined;
+
+  // 재정렬
+  onItemsReorder?: (event: DataSheetReorderEvent<T>) => void;
+
+  // 기타
+  class?: string;
+  children: JSX.Element;
+}
+
+export interface DataSheetColumnProps<T> {
+  key: string;
+  header?: string | string[];
+  headerContent?: () => JSX.Element;
+  headerStyle?: string;
+  summary?: () => JSX.Element;
+  tooltip?: string;
+  fixed?: boolean;
+  hidden?: boolean;
+  collapse?: boolean;
+  width?: string;
+  class?: string;
+  sortable?: boolean;
+  resizable?: boolean;
+  children: (ctx: DataSheetCellContext<T>) => JSX.Element;
+}
+
+export interface DataSheetCellContext<T> {
+  item: T;
+  index: number;
+  depth: number;
+}
+
+export interface SortingDef {
+  key: string;
+  desc: boolean;
+}
+
+export interface DataSheetConfig {
+  columnRecord?: Partial<Record<string, DataSheetConfigColumn>>;
+}
+
+export interface DataSheetConfigColumn {
+  fixed?: boolean;
+  width?: string;
+  displayOrder?: number;
+  hidden?: boolean;
+}
+
+export interface DataSheetColumnDef<T> {
+  __type: "sheet-column";
+  key: string;
+  header: string[];
+  headerContent?: () => JSX.Element;
+  headerStyle?: string;
+  summary?: () => JSX.Element;
+  tooltip?: string;
+  fixed: boolean;
+  hidden: boolean;
+  collapse: boolean;
+  width?: string;
+  class?: string;
+  sortable: boolean;
+  resizable: boolean;
+  cell: (ctx: DataSheetCellContext<T>) => JSX.Element;
+}
+
+export interface HeaderDef {
+  text: string;
+  colspan: number;
+  rowspan: number;
+  isLastRow: boolean;
+  colIndex?: number;
+  fixed?: boolean;
+  width?: string;
+  style?: string;
+  headerContent?: () => JSX.Element;
+}
+
+export interface FlatItem<T> {
+  item: T;
+  index: number;
+  depth: number;
+  hasChildren: boolean;
+  parent?: T;
+}
+
+// 드래그 앤 드롭 위치
+export type DataSheetDragPosition = "before" | "after" | "inside";
+
+// 재정렬 이벤트
+export interface DataSheetReorderEvent<T> {
+  item: T;
+  targetItem: T;
+  position: DataSheetDragPosition;
+}
+
+// 설정 모달에 전달할 컬럼 정보
+export interface DataSheetConfigColumnInfo {
+  key: string;
+  header: string[];
+  fixed: boolean;
+  hidden: boolean;
+  collapse: boolean;
+  width?: string;
+}

package/src/components/disclosure/Collapse.tsx

@@ -0,0 +1,72 @@
+import { type JSX, type ParentComponent, splitProps, createSignal, onMount, onCleanup } from "solid-js";
+import { createElementSize } from "@solid-primitives/resize-observer";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { mergeStyles } from "../../helpers/mergeStyles";
+
+export interface CollapseProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /**
+   * 콘텐츠 표시 여부. 기본값: false (닫힘)
+   *
+   * 접근성 참고:
+   * - 토글 버튼에 `aria-expanded`와 `aria-controls`를 사용하세요.
+   * - `Button` 컴포넌트를 사용하면 Enter/Space 키보드 접근성이 자동 지원됩니다.
+   *
+   * @example
+   * ```tsx
+   * <Button aria-expanded={open()} aria-controls="content" onClick={() => setOpen(!open())}>
+   *   Toggle
+   * </Button>
+   * <Collapse id="content" open={open()}>Content</Collapse>
+   * ```
+   */
+  open?: boolean;
+}
+
+const transitionClass = clsx("transition-[margin-top]", "duration-200", "ease-out", "motion-reduce:transition-none");
+
+export const Collapse: ParentComponent<CollapseProps> = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class", "style", "open"]);
+
+  // 콘텐츠 요소 ref
+  const [contentRef, setContentRef] = createSignal<HTMLDivElement>();
+
+  // 콘텐츠 높이 추적
+  const size = createElementSize(contentRef);
+
+  // 초기 렌더링 시 transition 비활성화 (깜빡임 방지)
+  // requestAnimationFrame으로 다음 프레임에 활성화
+  const [mounted, setMounted] = createSignal(false);
+  onMount(() => {
+    const rafId = requestAnimationFrame(() => setMounted(true));
+    onCleanup(() => cancelAnimationFrame(rafId));
+  });
+
+  // open이 undefined일 때 false로 처리
+  const isOpen = () => local.open ?? false;
+
+  // margin-top 계산
+  const marginTop = () => (isOpen() ? undefined : `${-(size.height ?? 0)}px`);
+
+  return (
+    <div
+      {...rest}
+      data-collapse
+      class={twMerge("block", local.class)}
+      style={mergeStyles(local.style, { overflow: "hidden" })}
+      aria-hidden={!isOpen()}
+    >
+      <div
+        ref={setContentRef}
+        class={mounted() ? transitionClass : ""}
+        style={{
+          "margin-top": marginTop(),
+          // 닫힌 상태에서 포커스 가능 요소 접근 차단 및 FOUC 방지
+          "visibility": !isOpen() ? "hidden" : undefined,
+        }}
+      >
+        {local.children}
+      </div>
+    </div>
+  );
+};