@croquiscom/pds 12.2.3 → 12.3.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @croquiscom/pds
 
+## 12.3.0
+
+### Minor Changes
+
+- 5e20ba7: TextButton Loading 상태 추가
+- c3379a4: feat: Datable Expandable Row 옵션 추가
+
 ## 12.2.3
 
 ### Patch Changes

package/dist/components/button/TextButton.d.ts

@@ -5,6 +5,8 @@ export interface TextButtonProps extends Omit<ButtonProps, 'loading' | 'kind'> {
     /** @default text */
     kind?: TextButtonKind;
     /** @default false */
+    loading?: boolean;
+    /** @default false */
     underline?: boolean;
     /** @default medium */
     size?: TextButtonSize;

package/dist/components/button/TextButton.stories.d.ts

@@ -9,4 +9,5 @@ export declare const TextUnderline: Story;
 export declare const LinkUnderline: Story;
 export declare const StartIcon: Story;
 export declare const EndIcon: Story;
+export declare const Loading: Story;
 export declare const Combination: Story;

package/dist/components/table/DataTable.d.ts

@@ -100,6 +100,12 @@ export interface DataTableProps<DataType> {
      * @default true
      */
     cellDisabledStyle?: boolean;
+    /**
+     *  열 하위에 확장된 Row를 렌더링합니다.
+     *   - 각 테이블 로우에 고유 key가 존재해야 합니다.
+     *   - row의 expanded 값으로 row의 확장 여부를 전달합니다.
+     */
+    renderExpandedRow?: (row: DataType, index: number) => ReactNode | null;
     /**
      * Row 배경색을 지정하는 함수 혹은 컬러값을 전달합니다.
      * hover는 auto code 정책을 따릅니다.

package/dist/components/table/DataTable.stories.d.ts

@@ -33,3 +33,4 @@ export declare const WithPagination: Story;
 export declare const Disabled: Story;
 export declare const CustomRowColor: Story;
 export declare const DisabledCellOff: Story;
+export declare const ExpandableRow: Story;

package/dist/components/table/DataTableHeader.d.ts

@@ -1,9 +1,9 @@
 import { Key } from 'react';
 import { DataTableProps } from './DataTable';
 import { SelectRowsAction, DataTableRowType } from './types';
-export interface DataTableHeaderProps<DataType> extends Pick<DataTableProps<DataType>, 'columns' | 'rows' | 'stickyHeader' | 'sortBy' | 'sortDirection' | 'onSortBy' | 'selectableRows' | 'hideSelectAll' | 'resize'> {
+export interface DataTableHeaderProps<DataType> extends Pick<DataTableProps<DataType>, 'columns' | 'rows' | 'stickyHeader' | 'sortBy' | 'sortDirection' | 'onSortBy' | 'selectableRows' | 'renderExpandedRow' | 'hideSelectAll' | 'resize'> {
     allSelected?: boolean;
     selectedRows?: Map<Key, DataTableRowType<DataType>>;
     onSelectedRows?: (action: SelectRowsAction<DataType>) => void;
 }
-export declare const DataTableHeader: <DataType extends object = any>({ columns, rows, stickyHeader, sortBy, sortDirection, allSelected, selectedRows, selectableRows, hideSelectAll, resize, onSelectedRows, onSortBy, }: DataTableHeaderProps<DataType>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DataTableHeader: <DataType extends object = any>({ columns, rows, stickyHeader, sortBy, sortDirection, allSelected, selectedRows, selectableRows, renderExpandedRow, hideSelectAll, resize, onSelectedRows, onSortBy, }: DataTableHeaderProps<DataType>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/table/DataTableRow.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { DataTableColumnsType, DataTableRowsType, DataTableRowType } from './types';
 import { DataTableProps } from './DataTable';
 export interface DataTableRowProps<DataType extends object = any> extends Pick<DataTableProps<DataType>, 'selectableRows' | 'clickableRows' | 'cellHoverStyle' | 'cellDisabledStyle' | 'resize'> {
@@ -5,8 +6,11 @@ export interface DataTableRowProps<DataType extends object = any> extends Pick<D
     columns: DataTableColumnsType<DataType>;
     index: number;
     rows: DataTableRowsType<DataType>;
+    renderExpandedRow?: (row: DataType, index: number) => ReactNode | null;
     selected: boolean;
+    expanded: boolean;
     rowColor?: string;
     onSelectedRow?: (row: DataTableRowType<DataType>, selected: boolean) => void;
+    onExpandedRow?: (row: DataTableRowType<DataType>, expanded: boolean) => void;
 }
-export declare const DataTableRow: <DataType extends object = any>({ row, columns, index, rows, selected, rowColor, onSelectedRow, selectableRows, clickableRows, cellHoverStyle, cellDisabledStyle, resize, }: DataTableRowProps<DataType>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DataTableRow: <DataType extends object = any>({ row, columns, index, rows, selected, expanded, rowColor, onSelectedRow, onExpandedRow, selectableRows, renderExpandedRow, clickableRows, cellHoverStyle, cellDisabledStyle, resize, }: DataTableRowProps<DataType>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/table/DataTableRows.d.ts

@@ -1,12 +1,15 @@
-import { Key } from 'react';
+import { Key, ReactNode } from 'react';
 import { DataTableProps } from './DataTable';
-import { SelectRowAction, DataTableRowType } from './types';
+import { SelectRowAction, DataTableRowType, ExpandedRowAction } from './types';
 interface DataTableRowsProps<DataType> extends Pick<DataTableProps<DataType>, 'columns' | 'rows' | 'noDataText' | 'noDataPadding' | 'loading' | 'selectableRows' | 'clickableRows' | 'cellHoverStyle' | 'cellDisabledStyle' | 'resize'> {
     tableContainerAttribute: number;
     allSelected?: boolean;
     selectedRows?: Map<Key, DataTableRowType<DataType>>;
+    expandedRows?: Key[];
+    renderExpandedRow?: (row: DataType, index: number) => ReactNode | null;
     rowColor?: (row: DataTableRowType<DataType>, index: number) => (string | undefined) | string;
     onSelectedRow?: (action: SelectRowAction<DataType>) => void;
+    onExpandedRow?: (action: ExpandedRowAction<DataType>) => void;
 }
-export declare const DataTableRows: <DataType extends object = any>({ columns, rows, loading, selectableRows, clickableRows, selectedRows, noDataText, noDataPadding, cellHoverStyle, cellDisabledStyle, tableContainerAttribute, resize, onSelectedRow, rowColor, }: DataTableRowsProps<DataType>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DataTableRows: <DataType extends object = any>({ columns, rows, loading, selectableRows, clickableRows, selectedRows, expandedRows, noDataText, noDataPadding, cellHoverStyle, cellDisabledStyle, tableContainerAttribute, resize, renderExpandedRow, onSelectedRow, onExpandedRow, rowColor, }: DataTableRowsProps<DataType>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/table/constants.d.ts

@@ -1,2 +1,3 @@
 export declare const COLUMN_MIN_WIDTH = 48;
 export declare const COLUMN_MIN_HEIGHT = 48;
+export declare const EXPAND_COLUMN_WIDTH = 52;

package/dist/components/table/storybook-helper/expandTableData.d.ts

@@ -0,0 +1,13 @@
+import React, { Key } from 'react';
+export interface ExpandTableDataType {
+    key?: Key;
+    order: number;
+    status: React.ReactNode;
+    qty: number;
+    price: number;
+    assignee: string;
+    started_at: string;
+    completed_at: string;
+}
+export declare const ExpandComponent: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ExpandComponent2: () => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/table/storybook-helper/sampleData.d.ts

@@ -3,6 +3,7 @@ import { DataTableColumnsType, DataTableRowsType } from '../index';
 export interface DataType {
     key?: Key;
     disabled?: boolean;
+    expandable?: boolean;
     id: number;
     image?: string;
     name: string;
@@ -18,6 +19,7 @@ export declare const customColumns: DataTableColumnsType<DataType>;
 export declare const customWidthColumns: DataTableColumnsType<DataType>;
 export declare const customColumnCell: DataTableColumnsType<DataType>;
 export declare const customRowCellColumns: DataTableColumnsType<DataType>;
+export declare const fixedExpandRowCellColumns: DataTableColumnsType<DataType>;
 export declare const groupColumns: DataTableColumnsType<DataType>;
 export declare const groupRows: DataTableRowsType<DataType>;
 export declare const SpanColumns: DataTableColumnsType<DataType>;
@@ -28,3 +30,4 @@ export declare const selectionRows2: DataTableRowsType<DataType>;
 export declare const sortColumns: DataTableColumnsType<DataType>;
 export declare const customRowStyleColumns: DataTableColumnsType<DataType>;
 export declare const comprehensiveCustomColumns: DataTableColumnsType<DataType>;
+export declare const ExpandRows: DataTableRowsType<DataType>;

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

@@ -91,6 +91,7 @@ export type DataTableRowType<DataType> = DataType & {
      * 테이블 로우의 disabled 여부를 지정합니다. selectable 보다 우선합니다.
      */
     disabled?: boolean;
+    expandable?: boolean;
 };
 export type DataTableRowsType<DataType = unknown> = Array<DataTableRowType<DataType>>;
 export interface DataTableState<DataType = unknown> {
@@ -98,6 +99,7 @@ export interface DataTableState<DataType = unknown> {
     selectedRows?: Map<Key, DataTableRowType<DataType>>;
     emitSelectedEvent?: boolean;
     autoResetRowSelection?: boolean;
+    expandedRows?: Key[];
 }
 export interface SelectRowsAction<DataType> {
     type: 'SELECT_ROWS';
@@ -121,4 +123,9 @@ export interface CheckAllSelectedRowsAction<DataType> {
     type: 'CHECK_ALL_SELECTED_ROWS';
     rows: DataTableRowsType<DataType>;
 }
-export type DataTableAction<DataType> = SelectRowsAction<DataType> | SelectRowAction<DataType> | SelectControlledRowAction<DataType> | ResetSelectRowsAction | CheckAllSelectedRowsAction<DataType>;
+export interface ExpandedRowAction<DataType> {
+    type: 'EXPAND_ROW';
+    row: DataTableRowType<DataType>;
+    expanded: boolean;
+}
+export type DataTableAction<DataType> = SelectRowsAction<DataType> | SelectRowAction<DataType> | SelectControlledRowAction<DataType> | ResetSelectRowsAction | CheckAllSelectedRowsAction<DataType> | ExpandedRowAction<DataType>;

package/dist/components/table/utils.d.ts

@@ -6,5 +6,5 @@ export interface UseTableColumnsProps<DataType> {
 export declare function getColGroup<DataType>({ columns }: UseTableColumnsProps<DataType>): any[];
 export declare function getGroupColumns<DataType>({ columns }: UseTableColumnsProps<DataType>): DataTableColumnsType<DataType>;
 export declare function getFlattenColumns<DataType>({ columns, }: UseTableColumnsProps<DataType>): DataTableColumnsType<DataType>;
-export declare function getFixedMergeColumn<DataType>(columns: DataTableColumnsType<DataType>, selectableRows: boolean, columnCount: number): number;
+export declare function getFixedMergeColumn<DataType>(columns: DataTableColumnsType<DataType>, selectableRows: boolean, columnCount: number, renderExpandedRow: boolean): number;
 export declare function getRowsKey<DataType>(rows: DataTableRowsType<DataType>): Key[];