@croquiscom/pds 3.4.2 → 3.5.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @croquiscom/pds
 
+## 3.5.0
+
+### Minor Changes
+
+- b6acaf0: DateRangePicker > 최상위 HStack width 제거
+- b6acaf0: Table > clickableRows, colSpan, selectable 추가
+
+## 3.4.3
+
+### Patch Changes
+
+- 53e1083: 신규 ArrowChevronBold 아이콘 4종 추가
+
 ## 3.4.2
 
 ### Patch Changes

package/assets/icons/ArrowChevronDoubleLeftBold.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M10.9393 2.93933L13.0606 5.06065L6.1213 12L13.0606 18.9393L10.9393 21.0606L1.87866 12L10.9393 2.93933Z" fill="#363644"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M19.9393 2.93933L22.0606 5.06065L15.1213 12L22.0606 18.9393L19.9393 21.0606L10.8787 12L19.9393 2.93933Z" fill="#363644"/>
+</svg>

package/assets/icons/ArrowChevronDoubleRightBold.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.87867 12L1.93933 5.06065L4.06065 2.93933L13.1213 12L4.06065 21.0606L1.93933 18.9393L8.87867 12Z" fill="#363644"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M17.8787 12L10.9393 5.06065L13.0607 2.93933L22.1213 12L13.0607 21.0606L10.9393 18.9393L17.8787 12Z" fill="#363644"/>
+</svg>

package/assets/icons/ArrowChevronLeftBold.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M14.9393 2.93933L17.0606 5.06065L10.1213 12L17.0606 18.9393L14.9393 21.0606L5.87866 12L14.9393 2.93933Z" fill="#363644"/>
+</svg>

package/assets/icons/ArrowChevronRightBold.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.8787 12L6.93933 5.06065L9.06065 2.93933L18.1213 12L9.06065 21.0606L6.93933 18.9393L13.8787 12Z" fill="#363644"/>
+</svg>

package/dist/components/icons/generated/ArrowChevronDoubleLeftBold.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IconProps } from '.';
+declare const SvgArrowChevronDoubleLeftBold: ({ size, color, secondaryColor, ...props }: IconProps) => JSX.Element;
+export default SvgArrowChevronDoubleLeftBold;

package/dist/components/icons/generated/ArrowChevronDoubleRightBold.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IconProps } from '.';
+declare const SvgArrowChevronDoubleRightBold: ({ size, color, secondaryColor, ...props }: IconProps) => JSX.Element;
+export default SvgArrowChevronDoubleRightBold;

package/dist/components/icons/generated/ArrowChevronLeftBold.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IconProps } from '.';
+declare const SvgArrowChevronLeftBold: ({ size, color, secondaryColor, ...props }: IconProps) => JSX.Element;
+export default SvgArrowChevronLeftBold;

package/dist/components/icons/generated/ArrowChevronRightBold.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IconProps } from '.';
+declare const SvgArrowChevronRightBold: ({ size, color, secondaryColor, ...props }: IconProps) => JSX.Element;
+export default SvgArrowChevronRightBold;

package/dist/components/icons/generated/index.d.ts

@@ -4,9 +4,13 @@ export interface IconProps extends React.SVGProps<SVGSVGElement> {
     color?: string;
     secondaryColor?: string;
 }
+export { default as IconArrowChevronDoubleLeftBold } from './ArrowChevronDoubleLeftBold';
+export { default as IconArrowChevronDoubleRightBold } from './ArrowChevronDoubleRightBold';
 export { default as IconArrowChevronDown } from './ArrowChevronDown';
 export { default as IconArrowChevronLeft } from './ArrowChevronLeft';
+export { default as IconArrowChevronLeftBold } from './ArrowChevronLeftBold';
 export { default as IconArrowChevronRight } from './ArrowChevronRight';
+export { default as IconArrowChevronRightBold } from './ArrowChevronRightBold';
 export { default as IconArrowChevronUp } from './ArrowChevronUp';
 export { default as IconArrowDecrease } from './ArrowDecrease';
 export { default as IconArrowDirectionDown } from './ArrowDirectionDown';

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

@@ -42,6 +42,12 @@ export interface TableProps<DataType> {
      *  - true일 경우 각 테이블 로우는 고유 key가 존재해야 합니다.
      */
     selectableRows?: boolean;
+    /**
+     * Row 클릭으로 Selection 사용 유무
+     *  - 먼저 selectableRows가 true여야 하며, Row 클릭으로도 선택/해제가 가능합니다.
+     *  - 해당 옵션 사용시 ROW 내부에 버튼, 링크 등 추가적인 클릭이벤트가 있을 경우 stopPropagation 처리가 필요합니다.
+     */
+    clickableRows?: boolean;
     /**
      * Row 선택 상태 정보
      *  - 이하 두가지 타입으로 로우 셀렉 상태를 받습니다.

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

@@ -15,11 +15,12 @@ export declare const Loading: any;
 export declare const NoData: any;
 export declare const CustomNoDataText: any;
 export declare const ColumnGroup: any;
-export declare const CellRowSpan: any;
+export declare const CellSpan: any;
 export declare const ColumnFixed: any;
 export declare const StickyHeader: any;
 export declare const Scroll: any;
 export declare const Selection: any;
+export declare const ClickableSelection: any;
 export declare const ResetSelectedRows: any;
 export declare const BeforehandSelectionByKey: any;
 export declare const BeforehandSelectionByFunction: any;

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

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 import { TableProps } from './Table';
 import { TableRowsType, SelectRowAction } from './types';
-interface TableRowsProps<DataType> extends Pick<TableProps<DataType>, 'columns' | 'rows' | 'noDataText' | 'loading' | 'selectableRows' | 'cellHoverStyle'> {
+interface TableRowsProps<DataType> extends Pick<TableProps<DataType>, 'columns' | 'rows' | 'noDataText' | 'loading' | 'selectableRows' | 'clickableRows' | 'cellHoverStyle'> {
     tableContainerAttribute: number;
     allSelected?: boolean;
     selectedRows?: TableRowsType<DataType>;
     onSelectedRow?: (action: SelectRowAction<DataType>) => void;
 }
-export declare const TableRows: <DataType extends object = any>({ columns, rows, loading, selectableRows, selectedRows, noDataText, cellHoverStyle, tableContainerAttribute, onSelectedRow, }: TableRowsProps<DataType>) => JSX.Element;
+export declare const TableRows: <DataType extends object = any>({ columns, rows, loading, selectableRows, clickableRows, selectedRows, noDataText, cellHoverStyle, tableContainerAttribute, onSelectedRow, }: TableRowsProps<DataType>) => JSX.Element;
 export {};

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

@@ -1,10 +1,2 @@
-/// <reference types="react" />
 import { TableState, TableAction } from './types';
-export declare function tableReducer<DataType>(state: TableState<DataType>, action: TableAction<DataType>): {
-    allSelected: boolean;
-    selectedRows: import("./types").TableRowsType<DataType>;
-    selectedRowsKey: import("react").Key[];
-    emitSelectedEvent: boolean;
-    selectableRows?: boolean;
-    autoResetRowSelection?: boolean;
-};
+export declare function tableReducer<DataType>(state: TableState<DataType>, action: TableAction<DataType>): TableState<DataType>;

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

@@ -17,9 +17,10 @@ export declare const customColumnCell: TableColumnsType<DataType>;
 export declare const customRowCellColumns: TableColumnsType<DataType>;
 export declare const groupColumns: TableColumnsType<DataType>;
 export declare const groupRows: TableRowsType<DataType>;
-export declare const RowSpanColumns: TableColumnsType<DataType>;
-export declare const RowSpanRows: TableRowsType<DataType>;
+export declare const SpanColumns: TableColumnsType<DataType>;
+export declare const SpanRows: TableRowsType<DataType>;
 export declare const fixedColumns: TableColumnsType<DataType>;
 export declare const selectionRows: TableRowsType<DataType>;
+export declare const selectionRows2: TableRowsType<DataType>;
 export declare const sortColumns: TableColumnsType<DataType>;
 export declare const customRowStyleColumns: TableColumnsType<DataType>;

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

@@ -13,7 +13,7 @@ export type CellAttributes = {
     style?: CSSObject;
 };
 export type RowSelectState<DataType> = ((row: DataType) => boolean) | Array<Key> | null;
-export type CellAttributesProps<DataType> = (row: DataType, index?: number) => Pick<TdHTMLAttributes<any>, 'rowSpan'> & CellAttributes;
+export type CellAttributesProps<DataType> = (row: DataType, index?: number) => Pick<TdHTMLAttributes<any>, 'rowSpan' | 'colSpan'> & CellAttributes;
 export type CellProps<DataType> = ({ row, value, index, }: {
     row: DataType;
     value: CellValue<any>;
@@ -71,11 +71,11 @@ export interface TableColumnGroupType<DataType> extends Omit<TableColumnType<Dat
 export type TableColumnsType<DataType = unknown> = Array<TableColumnType<DataType> | TableColumnGroupType<DataType>>;
 export type TableRowType<DataType> = DataType & {
     key?: Key;
+    selectable?: boolean;
 };
 export type TableRowsType<DataType = unknown> = Array<TableRowType<DataType>>;
 export interface TableState<DataType = unknown> {
     allSelected?: boolean;
-    selectableRows?: boolean;
     selectedRowsKey?: Key[];
     selectedRows?: TableRowsType<DataType>;
     emitSelectedEvent?: boolean;
@@ -87,16 +87,16 @@ export interface SelectRowsAction<DataType> {
 }
 export interface SelectRowAction<DataType> {
     type: 'SELECT_ROW';
+    rows: TableRowsType<DataType>;
     row: TableRowType<DataType>;
     selected: boolean;
-    totalRowCount: number;
 }
 export interface SelectControlledRowAction<DataType> {
     type: 'SELECT_CONTROLLED_ROW';
+    controlled_rows: TableRowsType<DataType>;
     rows: TableRowsType<DataType>;
-    totalRowCount: number;
 }
 export interface ResetSelectRows {
-    type: 'RESET_SELECT_ROWS';
+    type: 'RESET_SELECTED_ROWS';
 }
 export type TableAction<DataType> = SelectRowsAction<DataType> | SelectRowAction<DataType> | SelectControlledRowAction<DataType> | ResetSelectRows;