fone-design-system_v2 1.0.210 → 1.0.212

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, scrollTo, isEditMode, rowClickTriggerIdx, 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, 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/Rows.d.ts

@@ -24,6 +24,7 @@ interface Props<T extends object = any> {
     tableSx?: CSSProperties;
     rowHeight: number;
     headerRowHeight: number;
+    rowCountChangeScrollPosition?: "top" | "bottom" | number | "preserve";
 }
 declare const Rows: import('react').ForwardRefExoticComponent<Props<any> & import('react').RefAttributes<HTMLDivElement>>;
 export default Rows;

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?: 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를 반환하는 경우 reorderMode와 함께 사용하는 것은 지원하지 않습니다. */
+    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;
@@ -79,13 +124,17 @@ export interface Table2Props {
     onRowDoubleClick?: (row: any, rowIndex: number) => void;
     /** 로딩 상태 표시 여부를 설정합니다. */
     isLoading?: boolean;
+    /** 행 개수 변경 시 스크롤 위치 유지 방식 설정합니다. */
+    rowCountChangeScrollPosition?: "top" | "bottom" | number | "preserve";
     /** 특정 행으로 스크롤할 인덱스를 설정합니다. */
     scrollTo?: number;
     /** 편집, 추가 구분 확인 Column 여부를 설정합니다. */
     isEditMode?: boolean;
     /** 행 클릭 트리거 인덱스를 설정합니다. */
     rowClickTriggerIdx?: number;
-    /** 행 드래그앤드롭 재정렬 모드를 활성화합니다. */
+    /** 데이터 변경 시 행 클릭 트리거 인덱스 초기화 여부를 설정합니다. */
+    resetTriggerOnDataChange?: boolean;
+    /** 행 드래그앤드롭 재정렬 모드를 활성화합니다. getCellProps의 merge 기반 행병합과 함께 사용하는 것은 지원하지 않습니다. */
     reorderMode?: boolean;
     /** 행 순서가 변경될 때 재정렬된 데이터를 반환합니다. */
     onReorder?: (data: any[]) => void;
@@ -104,3 +153,4 @@ export interface Table2Props {
         isHovered: boolean;
     }) => React.HTMLAttributes<HTMLTableRowElement>;
 }
+export {};