maru_design2 2.7.2 → 2.8.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## [2.8.0](https://github.com/42maru-ai/maru-design2/compare/v2.7.2...v2.8.0) (2024-06-14)
+
+
+### Features
+
+* :fire: Table - REMOVE row mouse over / leave ([1d21841](https://github.com/42maru-ai/maru-design2/commit/1d218411d0d0a5b3a8de65d8bf41d4b204793e23))
+* :sparkles: Table - ADD binButton ([e27effb](https://github.com/42maru-ai/maru-design2/commit/e27effb05595793793bd5b80aabacbb8efb0cb9e))
+* :sparkles: Table - ADD header filter column ([1cbf792](https://github.com/42maru-ai/maru-design2/commit/1cbf792f22468599af3188f310d42ad4ea4c6d55))
+* :sparkles: Toast - ADD description props ([e22a69c](https://github.com/42maru-ai/maru-design2/commit/e22a69c789b9ad785f075d8b7fb38b49454c3ca3))
+
+
+### Bug Fixes
+
+* :bug: Button - FIX event handlers ([31d1d87](https://github.com/42maru-ai/maru-design2/commit/31d1d87354b948b9a8f155d1927ae02812970c37))
+* :coffin: Table - REMOVE kebab header, width ([5cc16e8](https://github.com/42maru-ai/maru-design2/commit/5cc16e8512255e49b0fd3dd1f37e6659f60cafc6))
+* :coffin: Table - REMOVE table mouse enter/leave ([8e59f35](https://github.com/42maru-ai/maru-design2/commit/8e59f359e74f985a3ed86e0c540fb304014c7c0f))
+* :fire: Table - REMOVE expand row ([ad2cba4](https://github.com/42maru-ai/maru-design2/commit/ad2cba49d588459fa80c5db711723f749b2f8216))
+
 ## [2.7.2](https://github.com/42maru-ai/maru-design2/compare/v2.7.1...v2.7.2) (2024-06-05)
 
 

package/dist/components/atoms/button/Button.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { TColor } from '../../../enums/color';
 import { TButtonSize } from '../../../enums/size';
 import { TButtonVariant } from '../../../enums/variant';
-import { IconProps } from '../icon/Icon';
+import { IconProps } from '../icon';
 import './button.scss';
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     children?: React.ReactNode;

package/dist/components/molecules/table/Colgroup.d.ts

@@ -2,8 +2,7 @@ import { IColumnFormats } from './types';
 interface Props {
     hasCheckbox?: boolean;
     formats: IColumnFormats[];
-    hasKebabMenu: boolean;
-    kebabMenuWidth?: string;
+    hasActionCol: boolean;
 }
-declare function Colgroup({ hasCheckbox, formats, hasKebabMenu, kebabMenuWidth, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function Colgroup({ hasCheckbox, formats, hasActionCol }: Props): import("react/jsx-runtime").JSX.Element;
 export default Colgroup;

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

@@ -1,3 +1,3 @@
 import { TableProps } from './types';
 import './table.scss';
-export declare function Table({ rowIdKey, data, formats, sort, onSort, checkedIds, onCheck, kebabMenu, onRowClick, selectedRow, onRowMouseOver, onRowMouseLeave, className, id, tableMaxHeight, noData, loading, }: TableProps): import("react/jsx-runtime").JSX.Element;
+export declare function Table({ rowIdKey, data, formats, sort, onSort, checkedIds, onCheck, filter, kebabMenu, binButton, onRowClick, selectedRow, className, id, tableMaxHeight, noData, loading, }: TableProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/table/body/TBody.d.ts

@@ -2,12 +2,21 @@ import React from 'react';
 import { IColumnFormats } from '../types';
 interface Props {
     rowIdKey: string;
-    data: Record<string, any>[];
     formats: IColumnFormats[];
+    data: Record<string, any>[];
     checkedIds?: string[];
     onCheck?: (ids: string[]) => void;
-    hasKebabMenu: boolean;
+    hasActionCol: boolean;
     kebabContent?: (rowId: string, onClose: () => void) => React.ReactNode;
+    binButton?: {
+        show: 'hover' | 'always';
+        onClick: (rowId: string) => void;
+    };
+    onRowClick?: (rowId: string) => void;
+    selectedRow?: {
+        rowId: string;
+        className?: string;
+    };
     noData?: {
         isNoData: boolean;
         message: string;
@@ -16,13 +25,6 @@ interface Props {
         isLoading: boolean;
         content?: React.ReactNode;
     };
-    onRowClick?: (rowId: string) => void;
-    selectedRow?: {
-        rowId: string;
-        className?: string;
-    };
-    onRowMouseOver?: (rowId: string) => void;
-    onRowMouseLeave?: (rowId: string) => void;
 }
-declare function TBody({ rowIdKey, formats, data, checkedIds, onCheck, hasKebabMenu, kebabContent, onRowClick, selectedRow, onRowMouseOver, onRowMouseLeave, noData, loading, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function TBody({ rowIdKey, formats, data, checkedIds, onCheck, hasActionCol, kebabContent, binButton, onRowClick, selectedRow, noData, loading, }: Props): import("react/jsx-runtime").JSX.Element;
 export default TBody;

package/dist/components/molecules/table/header/FilterButtonsTh.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    toggle: boolean;
+    onToggle: () => void;
+    onReset?: () => void;
+}
+declare function FilterButtonsTh({ toggle, onToggle, onReset }: Props): import("react/jsx-runtime").JSX.Element;
+export default FilterButtonsTh;

package/dist/components/molecules/table/header/FilterTh.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface Props {
+    children: React.ReactElement;
+    toggle: boolean;
+    filter?: React.ReactNode;
+}
+declare function FilterTh({ children, toggle, filter }: Props): import("react/jsx-runtime").JSX.Element;
+export default FilterTh;

package/dist/components/molecules/table/header/SortableColumn.d.ts

@@ -0,0 +1,8 @@
+import { IColumnFormats, ISort } from '../types';
+interface Props {
+    format: IColumnFormats;
+    currentSort?: ISort;
+    onSortClick: (columnName: string, sortable: boolean) => () => void;
+}
+declare function SortableColumn({ format, currentSort, onSortClick }: Props): import("react/jsx-runtime").JSX.Element;
+export default SortableColumn;

package/dist/components/molecules/table/header/THead.d.ts

@@ -6,7 +6,11 @@ interface Props {
     hasCheckbox?: boolean;
     allCheckbox: boolean;
     onAllCheck: (checked: boolean) => void;
-    hasKebabMenu: boolean;
+    hasActionCol: boolean;
+    filter?: {
+        on: boolean;
+        onReset: () => void;
+    };
 }
-declare function THead({ formats, currentSort, onSortClick, hasCheckbox, allCheckbox, onAllCheck, hasKebabMenu, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function THead({ formats, currentSort, onSortClick, hasCheckbox, allCheckbox, onAllCheck, hasActionCol, filter, }: Props): import("react/jsx-runtime").JSX.Element;
 export default THead;

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

@@ -6,25 +6,20 @@ export interface ISort {
 export interface IColumnFormats {
     columnIdKey: string;
     columnName?: string;
-    customHeader?: (content: any, colId: string) => React.ReactNode;
+    filter?: React.ReactNode;
     customColumn?: (content: any, rowId: string) => React.ReactNode;
     width?: string;
     sortable?: boolean;
     isHide?: boolean;
 }
-export interface IExpandingColumnFormats {
-    columnIdKeys: string[];
-    colSpan?: number;
-    customColumn?: (contents: any, rowId1: string, rowId2: string) => React.ReactNode;
-}
 export interface TableProps {
-    data: Record<string, any>[];
     /**
      * 행 아이디로 쓸 키
      */
     rowIdKey: string;
+    data: Record<string, any>[];
     /**
-     * { columnIdKey, columnName, customHeader, customColumn, width, sortable, isHide }
+     * { columnIdKey, columnName, filter, customColumn, width, sortable, isHide }
      */
     formats: IColumnFormats[];
     /**
@@ -44,26 +39,29 @@ export interface TableProps {
      */
     onCheck?: (ids: string[]) => void;
     /**
-     * 더보기 메뉴. { content, width } (@v1 hamberger)
+     * 최우측 컬럼 헤더의 필터 영역. { on, onReset }
      */
-    kebabMenu?: {
-        content: (rowId: string, onClose: () => void) => React.ReactNode;
-        width?: string;
+    filter?: {
+        on: boolean;
+        onReset: () => void;
     };
     /**
-     * 테이블 행 click 이벤트
+     * 최우측 컬럼 바디의 더보기 메뉴. binButton과 같이 쓸 수 없음. { content, width } (@v1 hamberger)
      */
-    onRowClick?: (rowId: string) => void;
+    kebabMenu?: {
+        content: (rowId: string, onClose: () => void) => React.ReactNode;
+    };
     /**
-     * 테이블 행 mouse over 이벤트
+     * 최우측 컬럼 바디의 휴지통 버튼. kebabMenu와 같이 쓸 수 없음. { show, onClick }
      */
-    onRowMouseOver?: (rowId: string) => void;
+    binButton?: {
+        show: 'hover' | 'always';
+        onClick: (rowId: string) => void;
+    };
     /**
-     * 테이블 행 mouse leave 이벤트
+     * 테이블 행 click 이벤트
      */
-    onRowMouseLeave?: (rowId: string) => void;
-    className?: string;
-    id?: string;
+    onRowClick?: (rowId: string) => void;
     /**
      * 선택된 행 스타일 지정 (@v1 focusedRowInfo)
      */
@@ -71,6 +69,8 @@ export interface TableProps {
         rowId: string;
         className?: string;
     };
+    className?: string;
+    id?: string;
     /**
      * 최대 높이
      */

package/dist/components/molecules/toast/Toast.d.ts

@@ -2,6 +2,7 @@ import { TToastVariant } from '../../../enums/variant';
 export interface IToast {
     variant: TToastVariant;
     content: string;
+    description?: string;
     details?: string[];
     disableAutoOff?: boolean;
 }

package/dist/components/molecules/toast/ToastStyle.d.ts

@@ -6,13 +6,17 @@ export interface ToastStyleProps {
      */
     variant: TToastVariant;
     /**
-     * 컴포넌트에 들어갈 내용
+     * 컴포넌트에 들어갈 한 줄짜리 내용
      */
     content: string;
+    /**
+     *  컴포넌트에 들어갈 여러 줄 짜리 내용
+     */
+    description?: string;
     /**
      * details, summary 태그를 활용하여 노출할 내용
      */
     details?: string[];
     onClose: () => void;
 }
-export declare function ToastStyle({ variant, content, details, onClose, }: ToastStyleProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToastStyle({ variant, content, description, details, onClose, }: ToastStyleProps): import("react/jsx-runtime").JSX.Element;

package/dist/index.js

@@ -2879,17 +2879,29 @@ var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
     }, {
       'maru-button-only-icon': !children && (startIcon || endIcon)
     }, props.className),
-    onMouseEnter: function onMouseEnter() {
-      return setIsHover(true);
+    onMouseEnter: function onMouseEnter(event) {
+      if (props.onMouseEnter) {
+        props.onMouseEnter(event);
+      }
+      setIsHover(true);
     },
-    onMouseLeave: function onMouseLeave() {
-      return setIsHover(false);
+    onMouseLeave: function onMouseLeave(event) {
+      if (props.onMouseLeave) {
+        props.onMouseLeave(event);
+      }
+      setIsHover(false);
     },
-    onMouseDown: function onMouseDown() {
-      return setIsActive(true);
+    onMouseDown: function onMouseDown(event) {
+      if (props.onMouseDown) {
+        props.onMouseDown(event);
+      }
+      setIsActive(true);
     },
-    onMouseUp: function onMouseUp() {
-      return setIsActive(false);
+    onMouseUp: function onMouseUp(event) {
+      if (props.onMouseUp) {
+        props.onMouseUp(event);
+      }
+      setIsActive(false);
     }
   }, {
     children: [startIcon && jsx(Icon, {
@@ -23016,32 +23028,23 @@ function TBody(_a) {
     data = _a.data,
     checkedIds = _a.checkedIds,
     onCheck = _a.onCheck,
-    hasKebabMenu = _a.hasKebabMenu,
+    hasActionCol = _a.hasActionCol,
     kebabContent = _a.kebabContent,
-    // expandable,
-    // expandingIdKey,
-    // expandingRowIdKey,
-    // expandingFormat,
+    binButton = _a.binButton,
+    // onRowMouseOver,
+    // onRowMouseLeave,
     onRowClick = _a.onRowClick,
     selectedRow = _a.selectedRow,
-    onRowMouseOver = _a.onRowMouseOver,
-    onRowMouseLeave = _a.onRowMouseLeave,
     noData = _a.noData,
     loading = _a.loading;
-  var _b = useState([]);
-    _b[0];
-    _b[1];
+  var _b = useState(''),
+    hoveredRowId = _b[0],
+    setHoveredRowId = _b[1];
   var tableBodyStatus = useMemo(function () {
     if (loading === null || loading === void 0 ? void 0 : loading.isLoading) return 'loading';
     if (noData === null || noData === void 0 ? void 0 : noData.isNoData) return 'no-data';
     return 'enable';
   }, [noData, loading]);
-  // const hasRowEvent = useMemo(
-  //   () =>
-  //     (onRowClick && onRowClick.name !== 'mockConstructor') ||
-  //     (onRowMouseOver && onRowMouseOver.name !== 'mockConstructor'),
-  //   [onRowClick, onRowMouseOver],
-  // );
   var handleCheck = function handleCheck(rowId, checked) {
     if (checked) {
       var newCheckedArray = checkedIds ? __spreadArray([], checkedIds, true) : [];
@@ -23056,34 +23059,19 @@ function TBody(_a) {
   };
   var handleRowClick = function handleRowClick(rowId) {
     return function () {
-      // if (hasRowEvent) {
       onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(rowId);
-      // }
     };
   };
   var handleRowEnter = function handleRowEnter(rowId) {
     return function () {
-      // if (hasRowEvent) {
-      onRowMouseOver === null || onRowMouseOver === void 0 ? void 0 : onRowMouseOver(rowId);
-      // }
+      setHoveredRowId(rowId);
     };
   };
-  var handleRowLeave = function handleRowLeave(rowId) {
+  var handleRowLeave = function handleRowLeave() {
     return function () {
-      // if (hasRowEvent) {
-      onRowMouseLeave === null || onRowMouseLeave === void 0 ? void 0 : onRowMouseLeave(rowId);
-      // }
+      setHoveredRowId('');
     };
   };
-  // const handleExpandClick = (rowId: string) => () => {
-  //   let newExpand = [...expand];
-  //   if (newExpand.includes(rowId)) {
-  //     newExpand = newExpand.filter((i) => i !== rowId);
-  //   } else {
-  //     newExpand = newExpand.concat(rowId);
-  //   }
-  //   setExpand(newExpand);
-  // };
   return jsx("tbody", __assign({
     className: "maru-table-body"
   }, {
@@ -23096,11 +23084,10 @@ function TBody(_a) {
         children: jsxs("tr", __assign({
           onClick: handleRowClick(row[rowIdKey]),
           onMouseEnter: handleRowEnter(row[rowIdKey]),
-          onMouseLeave: handleRowLeave(row[rowIdKey]),
-          // aria-hidden={hasRowEvent}
+          onMouseLeave: handleRowLeave(),
           className: classNames({
             'clickable-row': onRowClick,
-            'selected-row': selectedRow && (selectedRow === null || selectedRow === void 0 ? void 0 : selectedRow.rowId) === row[rowIdKey]
+            'selected-row': selectedRow && (selectedRow === null || selectedRow === void 0 ? void 0 : selectedRow.rowId) === row[rowIdKey] || hoveredRowId === row[rowIdKey]
           }, selectedRow && (selectedRow === null || selectedRow === void 0 ? void 0 : selectedRow.className))
         }, {
           children: [checkedIds != null && jsx(CheckboxTd, {
@@ -23108,16 +23095,34 @@ function TBody(_a) {
             checked: !!(checkedIds === null || checkedIds === void 0 ? void 0 : checkedIds.includes(row[rowIdKey])),
             onCheck: handleCheck
           }), formats.map(function (format) {
-            if (format.isHide) {
-              return null;
-            }
+            if (format.isHide) return null;
             var cellHashId = uuidv4(4);
             return jsx("td", {
               children: format.customColumn ? format.customColumn(row[format.columnIdKey], row[rowIdKey]) : row[format.columnIdKey]
             }, "cell-".concat(row[format.columnIdKey], "-").concat(cellHashId));
-          }), hasKebabMenu && jsx(KebabMenuTd, {
+          }), hasActionCol && kebabContent ? jsx(KebabMenuTd, {
             rowId: row[rowIdKey],
             kebabContent: kebabContent
+          }) : (binButton === null || binButton === void 0 ? void 0 : binButton.show) === 'always' || (binButton === null || binButton === void 0 ? void 0 : binButton.show) === 'hover' && hoveredRowId === row[rowIdKey] ?
+          // eslint-disable-next-line jsx-a11y/control-has-associated-label, react/jsx-indent
+          jsx("td", {
+            children: jsx(Button, {
+              startIcon: {
+                name: ICONS.Trash01Thin,
+                size: 18,
+                color: hoveredRowId === row[rowIdKey] ? 'danger' : '#8c8c8c'
+              },
+              color: "danger",
+              onClick: function onClick() {
+                return binButton.onClick(row[rowIdKey]);
+              }
+            })
+          }) : jsx("td", {
+            children: jsx("div", {
+              style: {
+                width: '18px'
+              }
+            })
           })]
         }))
       }, "table-row-".concat(row[rowIdKey]));
@@ -23125,6 +23130,66 @@ function TBody(_a) {
   }));
 }
 
+function FilterButtonsTh(_a) {
+  var toggle = _a.toggle,
+    onToggle = _a.onToggle,
+    onReset = _a.onReset;
+  return jsx("th", {
+    children: jsxs("div", __assign({
+      className: "filter-buttons-th"
+    }, {
+      children: [jsx(Button, {
+        onClick: onToggle,
+        startIcon: {
+          name: ICONS.FilterLinesThin,
+          size: 18,
+          color: 'primary'
+        },
+        className: "filter-icon-button"
+      }), toggle && jsx(Button, {
+        onClick: onReset,
+        startIcon: {
+          name: ICONS.RefreshCw01Thin,
+          size: 18,
+          color: '#bdbdbd'
+        }
+      })]
+    }))
+  });
+}
+
+function FilterTh(_a) {
+  var children = _a.children,
+    toggle = _a.toggle,
+    filter = _a.filter;
+  return jsxs("div", __assign({
+    className: "filter-th"
+  }, {
+    children: [children, toggle && (filter || jsx("div", {}))]
+  }));
+}
+
+function SortableColumn(_a) {
+  var format = _a.format,
+    currentSort = _a.currentSort,
+    onSortClick = _a.onSortClick;
+  return !format.sortable ? jsx("span", {
+    children: format.columnName
+  }) : jsx(Button, __assign({
+    onClick: onSortClick(format.columnIdKey, format.sortable),
+    variant: "text",
+    endIcon: {
+      name: ICONS.SortOutlineThin,
+      size: 18,
+      color: (currentSort === null || currentSort === void 0 ? void 0 : currentSort.columnName) === format.columnIdKey ? 'primary' : '#8c8c8c'
+    },
+    color: "secondary",
+    className: "maru-table-header-sortable"
+  }, {
+    children: format.columnName
+  }));
+}
+
 function THead(_a) {
   var formats = _a.formats,
     currentSort = _a.currentSort,
@@ -23132,7 +23197,21 @@ function THead(_a) {
     hasCheckbox = _a.hasCheckbox,
     allCheckbox = _a.allCheckbox,
     onAllCheck = _a.onAllCheck,
-    hasKebabMenu = _a.hasKebabMenu;
+    hasActionCol = _a.hasActionCol,
+    filter = _a.filter;
+  var _b = useState(false),
+    filterToggle = _b[0],
+    setFilterToggle = _b[1];
+  useEffect(function () {
+    if (filter === null || filter === void 0 ? void 0 : filter.on) {
+      setFilterToggle(filter === null || filter === void 0 ? void 0 : filter.on);
+    }
+  }, [filter === null || filter === void 0 ? void 0 : filter.on]);
+  var handleFilterToggle = function handleFilterToggle() {
+    setFilterToggle(function (prev) {
+      return !prev;
+    });
+  };
   var handleChange = function handleChange(e) {
     e.stopPropagation();
     onAllCheck(e.currentTarget.checked);
@@ -23152,42 +23231,34 @@ function THead(_a) {
           color: "#5C5C5C"
         })
       })), formats === null || formats === void 0 ? void 0 : formats.map(function (format) {
-        if (format.isHide) {
-          return null;
-        }
-        // eslint-disable-next-line max-len
-        // eslint-disable-next-line react/no-unstable-nested-components, react/function-component-definition
-        var Header = function Header() {
-          return !format.sortable ? format.columnName : jsx(Button, __assign({
-            onClick: onSortClick(format.columnIdKey, format.sortable),
-            variant: "text",
-            endIcon: {
-              name: ICONS.SortOutlineThin,
-              size: 18,
-              color: (currentSort === null || currentSort === void 0 ? void 0 : currentSort.columnName) === format.columnIdKey ? 'primary' : '#8c8c8c'
-            },
-            color: "secondary",
-            className: "maru-table-header-sortable"
-          }, {
-            children: format.columnName
-          }));
-        };
+        if (format.isHide) return null;
         return jsx("th", {
-          children: format.customHeader ? format.customHeader(Header(), format.columnIdKey) : Header()
-        }, "header-".concat(format.columnIdKey));
-      }), hasKebabMenu ?
-      // kebabMenuHeader ? (
-      //   <th>{kebabMenuHeader()}</th>
-      // ) : (
-      jsx("th", {
+          children: filter ? jsx(FilterTh, __assign({
+            toggle: filterToggle,
+            filter: format.filter
+          }, {
+            children: jsx(SortableColumn, {
+              format: format,
+              currentSort: currentSort,
+              onSortClick: onSortClick
+            })
+          })) : jsx(SortableColumn, {
+            format: format,
+            currentSort: currentSort,
+            onSortClick: onSortClick
+          })
+        }, "column-".concat(format.columnIdKey));
+      }), hasActionCol && filter ? jsx(FilterButtonsTh, {
+        toggle: filterToggle,
+        onToggle: handleFilterToggle,
+        onReset: filter === null || filter === void 0 ? void 0 : filter.onReset
+      }) : jsx("th", {
         children: jsx("div", {
           style: {
-            width: '20px'
+            width: '18px'
           }
         })
-      }) :
-      // )
-      null]
+      })]
     })
   }));
 }
@@ -23195,8 +23266,7 @@ function THead(_a) {
 function Colgroup(_a) {
   var hasCheckbox = _a.hasCheckbox,
     formats = _a.formats,
-    hasKebabMenu = _a.hasKebabMenu,
-    kebabMenuWidth = _a.kebabMenuWidth;
+    hasActionCol = _a.hasActionCol;
   return jsxs("colgroup", {
     children: [hasCheckbox ? jsx("col", {
       width: "5%"
@@ -23207,15 +23277,13 @@ function Colgroup(_a) {
       return jsx("col", {
         width: format.width || "".concat(90 / formats.length, "%")
       }, "col-".concat(format.columnIdKey));
-    }), hasKebabMenu ? kebabMenuWidth ? jsx("col", {
-      width: kebabMenuWidth
-    }) : jsx("col", {
+    }), hasActionCol ? jsx("col", {
       width: "5%"
     }) : null]
   });
 }
 
-var css_248z$1 = ".maru-table-wrapper {\n  width: 100%;\n  background-color: white;\n  box-shadow: 0px 0px 6px #e4e4e4;\n  border-radius: 15px;\n}\n.maru-table-wrapper .maru-table-header-wrapper,\n.maru-table-wrapper .maru-table-body-wrapper {\n  width: 100%;\n}\n.maru-table-wrapper tr {\n  height: 54px;\n}\n.maru-table-wrapper th,\n.maru-table-wrapper td {\n  text-align: start;\n  vertical-align: middle;\n  padding: 16.5px 15px;\n  word-break: break-word;\n  color: #5c5c5c;\n}\n.maru-table-wrapper th:first-of-type,\n.maru-table-wrapper td:first-of-type {\n  padding: 16.5px 25px;\n}\n.maru-table-wrapper .checkbox-td {\n  padding: 18px 15px 18px 25px !important;\n}\n.maru-table-wrapper .maru-table-header tr {\n  border-bottom: 1px solid #e4e4e4;\n}\n.maru-table-wrapper .maru-table-header tr th {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 700;\n}\n.maru-table-wrapper .maru-table-header .maru-table-header-sortable {\n  padding: unset;\n  margin: unset;\n  color: #5c5c5c;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 700;\n}\n.maru-table-wrapper .maru-table-body-scroll-wrapper {\n  overflow-y: auto;\n}\n.maru-table-wrapper .maru-table-body-scroll-wrapper .maru-table-scroll {\n  overflow-y: auto;\n}\n.maru-table-wrapper .maru-table-body tr:not(:last-of-type) {\n  border-bottom: 1px solid #fafafa;\n}\n.maru-table-wrapper .maru-table-body tr:hover,\n.maru-table-wrapper .maru-table-body .clickable-row:hover,\n.maru-table-wrapper .maru-table-body .selected-row {\n  background-color: var(--p-10);\n}\n.maru-table-wrapper .maru-table-body td {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n}\n.maru-table-wrapper .maru-table-body tr:last-of-type td:first-of-type {\n  border-bottom-left-radius: 15px;\n}\n.maru-table-wrapper .maru-table-body tr:last-of-type td:last-of-type {\n  border-bottom-right-radius: 15px;\n}\n.maru-table-wrapper .maru-table-body .clickable-row {\n  cursor: pointer;\n}\n.maru-table-wrapper .maru-table-body .expanding {\n  border-bottom: unset !important;\n}\n.maru-table-wrapper .maru-checkbox {\n  border-color: #bdbdbd;\n}\n.maru-table-wrapper .maru-table-body-kebab-wrapper {\n  text-align: center;\n}\n.maru-table-wrapper .maru-table-body-kebab {\n  margin: unset;\n  padding: unset;\n  height: auto;\n}\n.maru-table-wrapper .maru-table-body-empty-tr > td {\n  width: 100%;\n  vertical-align: middle;\n  text-align: center;\n  padding: 61px 0;\n}\n.maru-table-wrapper .maru-table-body-empty-tr > td p {\n  margin-top: 10px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n  color: #bdbdbd;\n}\n.maru-table-wrapper .maru-table-body-empty-tr:hover {\n  background-color: inherit !important;\n}\n.maru-table-wrapper .maru-table-body-expandable-button {\n  width: 24px;\n  height: 24px;\n  padding: 0.2rem;\n}\n.maru-table-wrapper .maru-table-body-expanding-row {\n  border: unset !important;\n}\n.maru-table-wrapper .maru-table-body-expanding-row.empty-last-expanding-row {\n  border-bottom: 1px solid #bdbdbd !important;\n  height: 12px !important;\n}";
+var css_248z$1 = ".maru-table-wrapper {\n  width: 100%;\n  background-color: white;\n  box-shadow: 0px 0px 6px #e4e4e4;\n  border-radius: 15px;\n}\n.maru-table-wrapper .maru-table-header-wrapper,\n.maru-table-wrapper .maru-table-body-wrapper {\n  width: 100%;\n}\n.maru-table-wrapper tr {\n  height: 54px;\n}\n.maru-table-wrapper th,\n.maru-table-wrapper td {\n  text-align: start;\n  vertical-align: middle;\n  padding: 16.5px 15px;\n  word-break: break-word;\n  color: #5c5c5c;\n}\n.maru-table-wrapper th:first-of-type,\n.maru-table-wrapper td:first-of-type {\n  padding: 16.5px 25px;\n}\n.maru-table-wrapper .checkbox-td {\n  padding: 18px 15px 18px 25px !important;\n}\n.maru-table-wrapper .maru-table-header tr {\n  border-bottom: 1px solid #e4e4e4;\n}\n.maru-table-wrapper .maru-table-header tr th {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 700;\n}\n.maru-table-wrapper .maru-table-header .filter-th {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 16.5px;\n}\n.maru-table-wrapper .maru-table-header .filter-th > div {\n  height: 33px;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th {\n  display: flex;\n  flex-direction: column;\n  gap: 26px;\n}\n.maru-table-wrapper .maru-table-header .maru-table-header-sortable {\n  padding: unset;\n  margin: unset;\n  color: #5c5c5c;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 700;\n}\n.maru-table-wrapper .maru-table-body-scroll-wrapper {\n  overflow-y: auto;\n}\n.maru-table-wrapper .maru-table-body-scroll-wrapper .maru-table-scroll {\n  overflow-y: auto;\n}\n.maru-table-wrapper .maru-table-body tr:not(:last-of-type) {\n  border-bottom: 1px solid #fafafa;\n}\n.maru-table-wrapper .maru-table-body tr:hover,\n.maru-table-wrapper .maru-table-body .clickable-row:hover,\n.maru-table-wrapper .maru-table-body .selected-row {\n  background-color: var(--p-10);\n}\n.maru-table-wrapper .maru-table-body td {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n}\n.maru-table-wrapper .maru-table-body tr:last-of-type td:first-of-type {\n  border-bottom-left-radius: 15px;\n}\n.maru-table-wrapper .maru-table-body tr:last-of-type td:last-of-type {\n  border-bottom-right-radius: 15px;\n}\n.maru-table-wrapper .maru-table-body .clickable-row {\n  cursor: pointer;\n}\n.maru-table-wrapper .maru-table-body .expanding {\n  border-bottom: unset !important;\n}\n.maru-table-wrapper .maru-checkbox {\n  border-color: #bdbdbd;\n}\n.maru-table-wrapper .maru-table-body-kebab-wrapper {\n  text-align: center;\n}\n.maru-table-wrapper .maru-table-body-kebab {\n  margin: unset;\n  padding: unset;\n  height: auto;\n}\n.maru-table-wrapper .maru-table-body-empty-tr > td {\n  width: 100%;\n  vertical-align: middle;\n  text-align: center;\n  padding: 61px 0;\n}\n.maru-table-wrapper .maru-table-body-empty-tr > td p {\n  margin-top: 10px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n  color: #bdbdbd;\n}\n.maru-table-wrapper .maru-table-body-empty-tr:hover {\n  background-color: inherit !important;\n}\n.maru-table-wrapper .maru-table-body-expandable-button {\n  width: 24px;\n  height: 24px;\n  padding: 0.2rem;\n}\n.maru-table-wrapper .maru-table-body-expanding-row {\n  border: unset !important;\n}\n.maru-table-wrapper .maru-table-body-expanding-row.empty-last-expanding-row {\n  border-bottom: 1px solid #bdbdbd !important;\n  height: 12px !important;\n}";
 styleInject(css_248z$1);
 
 // eslint-disable-next-line import/prefer-default-export
@@ -23227,17 +23295,13 @@ function Table(_a) {
     onSort = _a.onSort,
     checkedIds = _a.checkedIds,
     onCheck = _a.onCheck,
+    filter = _a.filter,
     kebabMenu = _a.kebabMenu,
-    // expandable,
-    // expandingIdKey,
-    // expandingRowIdKey,
-    // expandingFormat,
-    // onTableMouseEnter,
-    // onTableMouseLeave,
+    binButton = _a.binButton,
     onRowClick = _a.onRowClick,
     selectedRow = _a.selectedRow,
-    onRowMouseOver = _a.onRowMouseOver,
-    onRowMouseLeave = _a.onRowMouseLeave,
+    // onRowMouseOver,
+    // onRowMouseLeave,
     className = _a.className,
     id = _a.id,
     tableMaxHeight = _a.tableMaxHeight,
@@ -23249,6 +23313,14 @@ function Table(_a) {
   var _b = useState(false),
     allChecked = _b[0],
     setAllCheck = _b[1];
+  /**
+   * 최우측 컬럼(=액션 컬럼)에 자리를 차지 하는지 여부
+   * 헤더에는 filter 가 올 수 있고,
+   * 바디에는 kebabMenu, binButton, expandable 중 하나가 올 수 있다.
+   *
+   * TODO: expandable
+   */
+  var hasActionCol = filter != null || kebabMenu != null || binButton != null;
   /**
    * setting table size
    */
@@ -23291,12 +23363,6 @@ function Table(_a) {
       }
     }
   }, [data, checkedIds]);
-  var handleTableMouseEnter = function handleTableMouseEnter() {
-    // onTableMouseEnter?.();
-  };
-  var handleTableMouseLeave = function handleTableMouseLeave() {
-    // onTableMouseLeave?.();
-  };
   var handleSortClick = function handleSortClick(columnName, sortable) {
     if (sortable === void 0) {
       sortable = false;
@@ -23344,9 +23410,7 @@ function Table(_a) {
   return jsxs("div", __assign({
     ref: tableWrapperRef,
     id: id,
-    className: classNames('maru-table-wrapper', className),
-    onMouseEnter: handleTableMouseEnter,
-    onMouseLeave: handleTableMouseLeave
+    className: classNames('maru-table-wrapper', className)
   }, {
     children: [jsxs("table", __assign({
       ref: tableHeaderWrapperRef,
@@ -23355,8 +23419,7 @@ function Table(_a) {
       children: [jsx(Colgroup, {
         hasCheckbox: checkedIds != null,
         formats: formats,
-        hasKebabMenu: kebabMenu != null,
-        kebabMenuWidth: kebabMenu === null || kebabMenu === void 0 ? void 0 : kebabMenu.width
+        hasActionCol: hasActionCol
       }), jsx(THead, {
         formats: formats,
         currentSort: sort,
@@ -23364,7 +23427,8 @@ function Table(_a) {
         hasCheckbox: checkedIds != null,
         allCheckbox: allChecked,
         onAllCheck: handleAllCheckboxChange,
-        hasKebabMenu: kebabMenu != null
+        hasActionCol: hasActionCol,
+        filter: filter
       })]
     })), jsx("div", __assign({
       ref: tableBodyWrapperRef,
@@ -23376,23 +23440,19 @@ function Table(_a) {
         children: [jsx(Colgroup, {
           hasCheckbox: checkedIds != null,
           formats: formats,
-          hasKebabMenu: kebabMenu != null,
-          kebabMenuWidth: kebabMenu === null || kebabMenu === void 0 ? void 0 : kebabMenu.width
+          hasActionCol: hasActionCol
         }), jsx(TBody, {
           rowIdKey: rowIdKey,
           formats: formats,
           data: data,
           checkedIds: checkedIds,
           onCheck: onCheck,
-          hasKebabMenu: kebabMenu != null,
+          hasActionCol: hasActionCol,
           kebabContent: kebabMenu === null || kebabMenu === void 0 ? void 0 : kebabMenu.content,
-          // expandable={expandable}
-          // expandingIdKey={expandingIdKey}
-          // expandingRowIdKey={expandingRowIdKey}
-          // expandingFormat={expandingFormat}
+          binButton: binButton,
           onRowClick: onRowClick,
-          onRowMouseOver: onRowMouseOver,
-          onRowMouseLeave: onRowMouseLeave,
+          // onRowMouseOver={onRowMouseOver}
+          // onRowMouseLeave={onRowMouseLeave}
           selectedRow: selectedRow,
           noData: noData,
           loading: loading
@@ -23449,7 +23509,7 @@ function Details(_a) {
   });
 }
 
-var css_248z = ".maru-toast-style {\n  padding: 10px 10px 10px 12px;\n  border-radius: 6px;\n  background-color: #fff;\n  box-shadow: 0 0 6px 0 #bdbdbd;\n}\n.maru-toast-style div:first-child {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-toast-style .maru-toast-style-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  margin-right: 8px;\n  width: 24px;\n  height: 24px;\n}\n.maru-toast-style .maru-toast-style-content {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n  color: #5c5c5c;\n  margin-right: 16px;\n}\n.maru-toast-style details {\n  background-color: #fafafa;\n  padding: 10px 10px 10px 14px;\n  margin-top: 8px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n  color: #5c5c5c;\n}\n.maru-toast-style details summary {\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  flex-direction: row;\n  white-space: pre-wrap;\n}\n.maru-toast-style details summary > div:first-child {\n  position: relative;\n}\n.maru-toast-style details summary .maru-toast-details-summary {\n  cursor: pointer;\n}\n.maru-toast-style details summary .maru-toast-details-summary > p {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 600;\n}\n.maru-toast-style details summary .maru-toast-details-summary-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  position: absolute;\n  right: -25px;\n  bottom: 3px;\n}\n\n.maru-toast {\n  margin-top: 24px;\n  position: relative;\n  opacity: 0;\n  transform: translateY(100%);\n  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease-out;\n}\n.maru-toast.entered {\n  transform: translateY(0);\n  opacity: 1;\n}\n.maru-toast.fade-out {\n  opacity: 0;\n  transform: translateX(100%);\n}\n\n.maru-toaster {\n  position: fixed;\n  z-index: 6007;\n  right: 24px;\n  bottom: 24px;\n  transition: transform 0.5s ease-out;\n  display: flex;\n  flex-direction: column-reverse;\n  align-items: flex-end;\n}";
+var css_248z = ".maru-toast-style {\n  padding: 10px 10px 10px 12px;\n  border-radius: 6px;\n  background-color: #fff;\n  box-shadow: 0 0 6px 0 #bdbdbd;\n}\n.maru-toast-style div:first-child {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-toast-style .maru-toast-style-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  margin-right: 8px;\n  width: 24px;\n  height: 24px;\n}\n.maru-toast-style .maru-toast-style-content {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n  color: #5c5c5c;\n  margin-right: 16px;\n}\n.maru-toast-style .maru-toast-style-description {\n  white-space: pre-wrap;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n  color: #5c5c5c;\n}\n.maru-toast-style details {\n  background-color: #fafafa;\n  padding: 10px 10px 10px 14px;\n  margin-top: 8px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n  color: #5c5c5c;\n}\n.maru-toast-style details summary {\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  flex-direction: row;\n  white-space: pre-wrap;\n}\n.maru-toast-style details summary > div:first-child {\n  position: relative;\n}\n.maru-toast-style details summary .maru-toast-details-summary {\n  cursor: pointer;\n}\n.maru-toast-style details summary .maru-toast-details-summary > p {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 600;\n}\n.maru-toast-style details summary .maru-toast-details-summary-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  position: absolute;\n  right: -25px;\n  bottom: 3px;\n}\n\n.maru-toast {\n  margin-top: 24px;\n  position: relative;\n  opacity: 0;\n  transform: translateY(100%);\n  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease-out;\n}\n.maru-toast.entered {\n  transform: translateY(0);\n  opacity: 1;\n}\n.maru-toast.fade-out {\n  opacity: 0;\n  transform: translateX(100%);\n}\n\n.maru-toaster {\n  position: fixed;\n  z-index: 6007;\n  right: 24px;\n  bottom: 24px;\n  transition: transform 0.5s ease-out;\n  display: flex;\n  flex-direction: column-reverse;\n  align-items: flex-end;\n}";
 styleInject(css_248z);
 
 var iconSettings = {
@@ -23470,6 +23530,7 @@ function ToastStyle(_a) {
   var _b = _a.variant,
     variant = _b === void 0 ? 'success' : _b,
     content = _a.content,
+    description = _a.description,
     details = _a.details,
     onClose = _a.onClose;
   var _c = useState(false),
@@ -23511,7 +23572,11 @@ function ToastStyle(_a) {
         color: "secondary",
         onClick: handleClose
       })]
-    }), jsx(Details, {
+    }), jsx("div", __assign({
+      className: "maru-toast-style-description"
+    }, {
+      children: description
+    })), jsx(Details, {
       details: details,
       isDetailsOpen: isDetailsOpen,
       handleToggleDetails: handleDetailsToggle
@@ -23563,6 +23628,7 @@ function Toast(_a) {
       variant: toast.variant,
       content: toast.content,
       onClose: handleClose,
+      description: toast.description,
       details: toast.details
     })
   }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "maru_design2",
-  "version": "2.7.2",
+  "version": "2.8.0",
   "main": "./dist/index.js",
   "author": "zena-42maru",
   "license": "MIT",

package/dist/components/molecules/table/body/ExpandingRow.d.ts

@@ -1,9 +0,0 @@
-import { IExpandingColumnFormats } from '../types';
-interface Props {
-    rowId: string;
-    expandingData: any;
-    expandingRowIdKey?: string;
-    expandingFormat?: IExpandingColumnFormats[];
-}
-declare function ExpandingRow({ rowId, expandingData, expandingRowIdKey, expandingFormat, }: Props): import("react/jsx-runtime").JSX.Element | null;
-export default ExpandingRow;