fone-design-system_v2 1.0.211 → 1.0.213

package/dist/components/Table2/Table2.d.ts

@@ -1,3 +1,3 @@
 import { Table2Props } from './types';
-declare const Table2: <T extends object>({ data, columns, onChange, checkbox, no, radio, selectedCell, onRowClick, onRowDoubleClick, isLoading, rowCountChangeScrollPosition, scrollTo, isEditMode, rowClickTriggerIdx, resetTriggerOnDataChange, reorderMode, onReorder, onCellClick, rowHeight, headerRowHeight, sx, }: Table2Props) => import("react/jsx-runtime").JSX.Element;
+declare const Table2: <T extends object>({ data, columns, onChange, checkbox, no, radio, selectedCell, onRowClick, onRowDoubleClick, isLoading, rowCountChangeScrollPosition, scrollTo, isEditMode, rowClickTriggerIdx, resetTriggerOnDataChange, reorderMode, onReorder, onCellClick, getRowProps, rowHeight, headerRowHeight, sx, }: Table2Props) => import("react/jsx-runtime").JSX.Element;
 export default Table2;

package/dist/components/Table2/rows/Cell.d.ts

@@ -5,6 +5,7 @@ interface Props<T extends object = any> {
     idx: number;
     isHover: boolean;
     isRowClicked: boolean;
+    isRowActive?: boolean;
     selectedCellInfo: {
         rowIndex: number;
         colIndex: number;
@@ -16,8 +17,9 @@ interface Props<T extends object = any> {
     setRowSelection: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
     rowSelection: Record<string, boolean>;
     radio?: boolean;
+    reorderMode?: boolean;
     dragHandleProps?: DraggableProvidedDragHandleProps | null;
     rowHeight?: number;
 }
-declare const Cell: <T extends object>({ onCellClick, cell, idx, isHover, isRowClicked, selectedCellInfo, showSelectedCellBorder, onChange, setTableData, setRowSelection, rowSelection, radio, dragHandleProps, rowHeight, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+declare const Cell: <T extends object>({ onCellClick, cell, idx, isHover, isRowClicked, isRowActive, selectedCellInfo, showSelectedCellBorder, onChange, setTableData, setRowSelection, rowSelection, radio, reorderMode, dragHandleProps, rowHeight, }: Props<T>) => import("react/jsx-runtime").JSX.Element | null;
 export default Cell;

package/dist/components/Table2/rows/Row.d.ts

@@ -20,6 +20,13 @@ interface Props<T extends object = any> {
     isRowActive: boolean;
     radio?: boolean;
     reorderMode?: boolean;
+    getRowProps?: (params: {
+        row: T;
+        rowIndex: number;
+        isSelected: boolean;
+        isActive: boolean;
+        isHovered: boolean;
+    }) => HTMLAttributes<HTMLTableRowElement>;
     dragHandleProps?: DraggableProvidedDragHandleProps | null;
     isDragging?: boolean;
     rowProps?: HTMLAttributes<HTMLTableRowElement>;

package/dist/components/Table2/rows/Rows.d.ts

@@ -21,6 +21,13 @@ interface Props<T extends object = any> {
     rowActiveIdx: number;
     radio?: boolean;
     reorderMode?: boolean;
+    getRowProps?: (params: {
+        row: T;
+        rowIndex: number;
+        isSelected: boolean;
+        isActive: boolean;
+        isHovered: boolean;
+    }) => React.HTMLAttributes<HTMLTableRowElement>;
     tableSx?: CSSProperties;
     rowHeight: number;
     headerRowHeight: number;

package/dist/components/Table2/types/table.types.d.ts

@@ -1,61 +1,106 @@
 import { default as React, CSSProperties } from 'react';
 import { ColumnDef as TanstackColumnDef } from '@tanstack/react-table';
-export type ColumnDef<T extends object> = TanstackColumnDef<T> & {
+type BodyCellType<T extends object> = "input" | "textarea" | "inputNum" | "inputEng" | "select" | "checkbox" | "checkboxN" | "datePicker" | "modal" | "file" | "button" | "custom" | "text" | "date" | ((row: T) => "input" | "textarea" | "inputNum" | "inputEng" | "select" | "checkbox" | "checkboxN" | "datePicker" | "modal" | "file" | "button" | "custom" | "text" | "date") | string;
+type RenderCellParams<T extends object> = {
+    rowData: T;
+    rowIndex: number;
+    column: ColumnDef<T>;
+    columnId: string;
+    value: unknown;
+    isCellActive: boolean;
+    isRowSelected: boolean;
+    isRowActive: boolean;
+};
+type GetCellPropsParams<T extends object> = {
+    rowData: T;
+    rowIndex: number;
+    column: ColumnDef<T>;
+    columnId: string;
+    value: unknown;
+    isCellActive: boolean;
+    isRowSelected: boolean;
+    isRowActive: boolean;
+};
+type CellMerge = {
+    /** 여러 행/열을 병합할 때 사용합니다. reorderMode에서는 rowSpan 기반 행병합만 지원하지 않으며, colSpan만 사용하는 경우는 허용됩니다. */
+    rowSpan?: number;
+    colSpan?: number;
+    skipCell?: boolean;
+};
+type GetCellPropsResult = React.TdHTMLAttributes<HTMLTableCellElement> & {
+    merge?: CellMerge;
+};
+type ColumnCommonProps<T extends object> = {
     accessorKey?: string;
     width?: string;
+    role?: "group";
+    setSort?: React.Dispatch<React.SetStateAction<string[]>>;
+    visible?: boolean;
+    /** 바디 td 요소에 추가 속성이나 스타일을 주입합니다. merge.rowSpan 기반 행병합은 reorderMode와 함께 사용할 수 없지만, colSpan만 사용하는 경우는 허용됩니다. */
+    getCellProps?: (params: GetCellPropsParams<T>) => GetCellPropsResult;
+    /** 헤더 셀의 내용을 컬럼 단위로 커스텀 렌더링합니다. */
+    renderHeaderCell?: (params: {
+        column: ColumnDef<T>;
+        columnId: string;
+    }) => React.ReactNode;
+    /** 헤더 th 요소에 추가 속성이나 스타일을 주입합니다. */
+    getHeaderCellProps?: (params: {
+        column: ColumnDef<T>;
+        columnId: string;
+    }) => React.ThHTMLAttributes<HTMLTableCellElement>;
+};
+type StandardColumnProps<T extends object> = {
     align?: "start" | "center" | "right";
     editable?: boolean;
-    type?: "input" | "textarea" | "inputNum" | "inputEng" | "select" | "checkbox" | "checkboxN" | "datePicker" | "modal" | "file" | "button" | "custom" | "text" | "date" | ((row: T) => "input" | "textarea" | "inputNum" | "inputEng" | "select" | "checkbox" | "checkboxN" | "datePicker" | "modal" | "file" | "button" | "custom" | "text" | "date") | string;
+    type?: BodyCellType<T>;
     selectItems?: {
         value: string | number;
         label: string;
     }[];
     required?: boolean;
-    setSort?: React.Dispatch<React.SetStateAction<string[]>>;
     button?: React.ReactNode | ((row: T) => React.ReactNode);
     ellipsis?: boolean;
-    role?: "group";
     tags?: (row: T) => React.ReactNode[];
     disabled?: (row: T) => boolean | boolean;
     isOnly?: boolean;
     maxLength?: number;
     numRange?: number[];
+    /** custom 타입에서 사용하는 기존 전용 렌더러입니다. 신규 코드는 renderCell 사용을 권장합니다. */
     component?: (row: T) => React.ReactNode;
     modalFn?: (row: T) => void;
     accept?: string;
     icon?: React.ReactNode;
     onChange?: (...args: any[]) => any;
     readOnly?: boolean;
-    visible?: boolean;
     simpleSelect?: boolean;
     showEditIcon?: boolean;
-    /** 바디 셀의 내용을 컬럼 단위로 커스텀 렌더링합니다. */
-    renderCell?: (params: {
-        rowData: T;
-        rowIndex: number;
-        column: ColumnDef<T>;
-        columnId: string;
-        value: unknown;
-    }) => React.ReactNode;
-    /** 바디 td 요소에 추가 속성이나 스타일을 주입합니다. */
-    getCellProps?: (params: {
-        rowData: T;
-        rowIndex: number;
-        column: ColumnDef<T>;
-        columnId: string;
-        value: unknown;
-    }) => React.TdHTMLAttributes<HTMLTableCellElement>;
-    /** 헤더 셀의 내용을 컬럼 단위로 커스텀 렌더링합니다. */
-    renderHeaderCell?: (params: {
-        column: ColumnDef<T>;
-        columnId: string;
-    }) => React.ReactNode;
-    /** 헤더 th 요소에 추가 속성이나 스타일을 주입합니다. */
-    getHeaderCellProps?: (params: {
-        column: ColumnDef<T>;
-        columnId: string;
-    }) => React.ThHTMLAttributes<HTMLTableCellElement>;
+    renderCell?: never;
+};
+type RenderCellColumnProps<T extends object> = {
+    /** 바디 셀의 내용을 컬럼 단위로 완전히 커스텀 렌더링합니다. 이 경로에서는 align, editable, type, maxLength 같은 표준 셀 옵션이 자동 적용되지 않습니다. */
+    renderCell: (params: RenderCellParams<T>) => React.ReactNode;
+    align?: never;
+    editable?: never;
+    type?: never;
+    selectItems?: never;
+    required?: never;
+    button?: never;
+    ellipsis?: never;
+    tags?: never;
+    disabled?: never;
+    isOnly?: never;
+    maxLength?: never;
+    numRange?: never;
+    component?: never;
+    modalFn?: never;
+    accept?: never;
+    icon?: never;
+    onChange?: never;
+    readOnly?: never;
+    simpleSelect?: never;
+    showEditIcon?: never;
 };
+export type ColumnDef<T extends object> = TanstackColumnDef<T> & ColumnCommonProps<T> & (StandardColumnProps<T> | RenderCellColumnProps<T>);
 export interface Table2Props {
     /** Cell 클릭 시 해당 Cell Border 스타일 변경 여부를 설정합니다. */
     selectedCell?: boolean;
@@ -89,7 +134,7 @@ export interface Table2Props {
     rowClickTriggerIdx?: number;
     /** 데이터 변경 시 행 클릭 트리거 인덱스 초기화 여부를 설정합니다. */
     resetTriggerOnDataChange?: boolean;
-    /** 행 드래그앤드롭 재정렬 모드를 활성화합니다. */
+    /** 행 드래그앤드롭 재정렬 모드를 활성화합니다. getCellProps의 merge.rowSpan 기반 행병합과 함께 사용하는 것은 지원하지 않지만, colSpan만 사용하는 경우는 허용됩니다. */
     reorderMode?: boolean;
     /** 행 순서가 변경될 때 재정렬된 데이터를 반환합니다. */
     onReorder?: (data: any[]) => void;
@@ -108,3 +153,4 @@ export interface Table2Props {
         isHovered: boolean;
     }) => React.HTMLAttributes<HTMLTableRowElement>;
 }
+export {};