fone-design-system_v2 1.0.207 → 1.0.209

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

@@ -1,70 +1,3 @@
-import { default as React, CSSProperties } from 'react';
-import { ColumnDef as TanstackColumnDef } from '@tanstack/react-table';
-export type ColumnDef<T extends object> = TanstackColumnDef<T> & {
-    accessorKey?: string;
-    width?: string;
-    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;
-    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[];
-    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;
-};
-export interface Table2Props {
-    /** Cell 클릭 시 해당 Cell Border 스타일 변경 여부를 설정합니다. */
-    selectedCell?: boolean;
-    /** 테이블에 표시할 데이터 배열을 설정합니다. */
-    data?: any[];
-    /** 테이블의 열 정의 배열을 설정합니다. */
-    columns?: ColumnDef<any>[];
-    /** 테이블 데이터 변경 시 호출되는 콜백 함수를 설정합니다. */
-    onChange?: (data: any[]) => void;
-    /** 체크박스 표시 여부를 설정합니다. */
-    checkbox?: boolean;
-    /** 행 번호 컬럼 표시 여부를 설정합니다. */
-    no?: boolean;
-    /** 체크박스를 라디오 버튼 형태로 표시 여부를 설정합니다. */
-    radio?: boolean;
-    /** Cell 클릭 시 해당 위치의 row, col 정보를 반환합니다. */
-    onCellClick?: (row: any, rowIndex: number, col: any, colIndex: number) => void;
-    /** 행 클릭 시 동작할 콜백 함수를 설정합니다. */
-    onRowClick?: (row: any, rowIndex: number) => void;
-    /** 행 더블 클릭 시 동작할 콜백 함수를 설정합니다. */
-    onRowDoubleClick?: (row: any, rowIndex: number) => void;
-    /** 로딩 상태 표시 여부를 설정합니다. */
-    isLoading?: boolean;
-    /** 특정 행으로 스크롤할 인덱스를 설정합니다. */
-    scrollTo?: number;
-    /** 편집, 추가 구분 확인 Column 여부를 설정합니다. */
-    isEditMode?: boolean;
-    /** 행 클릭 트리거 인덱스를 설정합니다. */
-    rowClickTriggerIdx?: number;
-    /** 행 드래그앤드롭 재정렬 모드를 활성화합니다. */
-    reorderMode?: boolean;
-    /** 행 순서가 변경될 때 재정렬된 데이터를 반환합니다. */
-    onReorder?: (data: any[]) => void;
-    /** 내부 table 요소 스타일을 오버라이드합니다. */
-    sx?: CSSProperties;
-}
-declare const Table2: <T extends object>({ data, columns, onChange, checkbox, no, radio, selectedCell, onRowClick, onRowDoubleClick, isLoading, scrollTo, isEditMode, rowClickTriggerIdx, reorderMode, onReorder, onCellClick, sx, }: Table2Props) => import("react/jsx-runtime").JSX.Element;
+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;
 export default Table2;

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

@@ -3,6 +3,7 @@ import { Table as ReactTable } from '@tanstack/react-table';
 interface Props<T extends object = any> {
     table: ReactTable<T>;
     clickedRowIndex: number;
+    headerRowHeight?: number;
 }
 declare const Header: React.ForwardRefExoticComponent<Props<any> & React.RefAttributes<HTMLTableSectionElement>>;
 export default Header;

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

@@ -5,6 +5,7 @@ interface Props<T extends object = any> {
     groupIndex: number;
     headerGroupsLength: number;
     clickedRowIndex: number;
+    headerRowHeight?: number;
 }
-declare const HeaderItem: <T extends object>({ header, idx, groupIndex, headerGroupsLength, clickedRowIndex, }: Props) => import("react/jsx-runtime").JSX.Element | null;
+declare const HeaderItem: <T extends object>({ header, idx, groupIndex, headerGroupsLength, clickedRowIndex, headerRowHeight, }: Props) => import("react/jsx-runtime").JSX.Element | null;
 export default HeaderItem;

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

@@ -1,4 +1,5 @@
-import { default as Table2, ColumnDef as BaseColumnDef, Table2Props as BaseTableProps } from './Table2';
+import { default as Table2 } from './Table2';
+import { ColumnDef as BaseColumnDef, Table2Props as BaseTableProps } from './types/table.types';
 export { Table2 };
 export type Table2Props = BaseTableProps;
 export type ColumnDef<T extends object> = BaseColumnDef<T>;

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

@@ -16,8 +16,8 @@ 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, reorderMode, dragHandleProps, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+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;
 export default Cell;

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

@@ -24,6 +24,8 @@ interface Props<T extends object = any> {
     isDragging?: boolean;
     rowProps?: HTMLAttributes<HTMLTableRowElement>;
     rowStyle?: CSSProperties;
+    rowHeight?: number;
+    headerRowHeight?: number;
 }
 declare const Row: import('react').ForwardRefExoticComponent<Props<any> & import('react').RefAttributes<HTMLTableRowElement>>;
 export default Row;

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

@@ -22,6 +22,8 @@ interface Props<T extends object = any> {
     radio?: boolean;
     reorderMode?: boolean;
     tableSx?: CSSProperties;
+    rowHeight: number;
+    headerRowHeight: number;
 }
 declare const Rows: import('react').ForwardRefExoticComponent<Props<any> & import('react').RefAttributes<HTMLDivElement>>;
 export default Rows;

package/dist/components/Table2/rows/shared/CellEditorLayout.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties, ReactNode } from 'react';
+interface CellEditorFrameProps {
+    children: ReactNode;
+    justifyContent?: CSSProperties["justifyContent"];
+    padding?: string;
+    style?: CSSProperties;
+}
+export declare const CELL_EDITOR_ACTIVE_INSET = "var(--ds-table-active-inset)";
+export declare const CELL_EDITOR_COMPACT_HEIGHT = "calc(var(--ds-input-height-base) - var(--ds-table-active-inset))";
+export declare const getCellEditorFieldLayout: (isActive: boolean) => {
+    width: string;
+    margin: string | undefined;
+};
+export declare const CellEditorFrame: ({ children, justifyContent, padding, style, }: CellEditorFrameProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+export type { ColumnDef, Table2Props } from './table.types';

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

@@ -0,0 +1,5 @@
+/**
+ * Table2의 render context 타입을 모아두는 파일입니다.
+ * renderCell, renderHeaderCell, getRowProps 같은 함수에 전달되는
+ * row, cell, rowIndex, value 등의 컨텍스트 타입을 둡니다.
+ */

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

@@ -0,0 +1,5 @@
+/**
+ * Table2의 wrapper props 반환 타입을 모아두는 파일입니다.
+ * getCellProps, getRowProps, getHeaderCellProps 같은 resolver가
+ * 최종적으로 반환하는 style, className, rowSpan, colSpan 등의 타입을 둡니다.
+ */

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

@@ -0,0 +1,80 @@
+import { default as React, CSSProperties } from 'react';
+import { ColumnDef as TanstackColumnDef } from '@tanstack/react-table';
+export type ColumnDef<T extends object> = TanstackColumnDef<T> & {
+    accessorKey?: string;
+    width?: string;
+    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;
+    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[];
+    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;
+};
+export interface Table2Props {
+    /** Cell 클릭 시 해당 Cell Border 스타일 변경 여부를 설정합니다. */
+    selectedCell?: boolean;
+    /** 테이블에 표시할 데이터 배열을 설정합니다. */
+    data?: any[];
+    /** 테이블의 열 정의 배열을 설정합니다. */
+    columns?: ColumnDef<any>[];
+    /** 테이블 데이터 변경 시 호출되는 콜백 함수를 설정합니다. */
+    onChange?: (data: any[]) => void;
+    /** 체크박스 표시 여부를 설정합니다. */
+    checkbox?: boolean;
+    /** 행 번호 컬럼 표시 여부를 설정합니다. */
+    no?: boolean;
+    /** 체크박스를 라디오 버튼 형태로 표시 여부를 설정합니다. */
+    radio?: boolean;
+    /** Cell 클릭 시 해당 위치의 row, col 정보를 반환합니다. */
+    onCellClick?: (row: any, rowIndex: number, col: any, colIndex: number) => void;
+    /** 행 클릭 시 동작할 콜백 함수를 설정합니다. */
+    onRowClick?: (row: any, rowIndex: number) => void;
+    /** 행 더블 클릭 시 동작할 콜백 함수를 설정합니다. */
+    onRowDoubleClick?: (row: any, rowIndex: number) => void;
+    /** 로딩 상태 표시 여부를 설정합니다. */
+    isLoading?: boolean;
+    /** 특정 행으로 스크롤할 인덱스를 설정합니다. */
+    scrollTo?: number;
+    /** 편집, 추가 구분 확인 Column 여부를 설정합니다. */
+    isEditMode?: boolean;
+    /** 행 클릭 트리거 인덱스를 설정합니다. */
+    rowClickTriggerIdx?: number;
+    /** 행 드래그앤드롭 재정렬 모드를 활성화합니다. */
+    reorderMode?: boolean;
+    /** 행 순서가 변경될 때 재정렬된 데이터를 반환합니다. */
+    onReorder?: (data: any[]) => void;
+    /** 내부 table 요소 스타일을 오버라이드합니다. */
+    sx?: CSSProperties;
+    /** tbody 행 높이를 설정합니다. */
+    rowHeight?: number;
+    /** thead 행 높이를 설정합니다. */
+    headerRowHeight?: number;
+    /** 각 행에 대한 추가 속성을 설정할 수 있는 콜백 함수를 제공합니다. */
+    getRowProps?: (params: {
+        row: any;
+        rowIndex: number;
+        isSelected: boolean;
+        isActive: boolean;
+        isHovered: boolean;
+    }) => React.HTMLAttributes<HTMLTableRowElement>;
+}