maru_design2 2.11.1 → 2.12.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [2.12.0](https://github.com/42maru-ai/maru-design2/compare/v2.11.1...v2.12.0) (2024-07-15)
+
+
+### Features
+
+* :sparkles: Table - ADD highlightRows [#202](https://github.com/42maru-ai/maru-design2/issues/202) ([f618e67](https://github.com/42maru-ai/maru-design2/commit/f618e67f31e68497e90534352103848d52dec3b5))
+* :sparkles: Table - ADD show option to Kebab [#203](https://github.com/42maru-ai/maru-design2/issues/203) ([be8512b](https://github.com/42maru-ai/maru-design2/commit/be8512b590462650eaa33240c0fe69c3d15c00d3))
+
+
+### Bug Fixes
+
+* :bento: Icon - ADD edit 14 icon [#201](https://github.com/42maru-ai/maru-design2/issues/201) ([bbd732a](https://github.com/42maru-ai/maru-design2/commit/bbd732a58f03253cf8fe3fe0a445ec056eb9512d))
+
 ## [2.11.1](https://github.com/42maru-ai/maru-design2/compare/v2.11.0...v2.11.1) (2024-07-11)
 
 

package/dist/components/atoms/icon/iconmap.d.ts

@@ -119,6 +119,7 @@ export declare const ICONS: {
     readonly Downstream_s14: "Downstream_s14";
     readonly Downstream_s24: "Downstream_s24";
     readonly DragSelect_s1613: "DragSelect_s1613";
+    readonly Edit03_s1413: "Edit03_s1413";
     readonly Edit03_s1613: "Edit03_s1613";
     readonly Expand_s1815: "Expand_s1815";
     readonly EyeOff_s16: "EyeOff_s16";

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, filter, kebabMenu, binButton, onRowClick, selectedRow, className, id, tableBodyMaxHeight, noData, loading, emptyContentHeight, }: TableProps): import("react/jsx-runtime").JSX.Element;
+export declare function Table({ rowIdKey, data, formats, sort, onSort, checkedIds, onCheck, filter, kebabMenu, binButton, onRowClick, selectedRow, highlightRows, className, id, tableBodyMaxHeight, noData, loading, emptyContentHeight, }: TableProps): import("react/jsx-runtime").JSX.Element;

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

@@ -7,7 +7,10 @@ interface Props {
     checkedIds?: string[];
     onCheck?: (ids: string[]) => void;
     hasActionCol: boolean;
-    kebabContent?: (rowId: string, onClose: () => void) => React.ReactNode;
+    kebabMenu?: {
+        show?: (rowId?: string) => TShow;
+        content: (rowId: string, onClose: () => void) => React.ReactNode;
+    };
     binButton?: {
         show: (rowId?: string) => TShow;
         onClick: (rowId: string) => void;
@@ -17,6 +20,10 @@ interface Props {
         rowId: string;
         className?: string;
     };
+    highlightRows?: {
+        rowIds: string[];
+        className?: string;
+    };
     noData?: {
         isNoData: boolean;
         message: string;
@@ -27,5 +34,5 @@ interface Props {
     };
     emptyContentHeight?: number;
 }
-declare function TBody({ rowIdKey, formats, data, checkedIds, onCheck, hasActionCol, kebabContent, binButton, onRowClick, selectedRow, noData, loading, emptyContentHeight, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function TBody({ rowIdKey, formats, data, checkedIds, onCheck, hasActionCol, kebabMenu, binButton, onRowClick, selectedRow, highlightRows, noData, loading, emptyContentHeight, }: Props): import("react/jsx-runtime").JSX.Element;
 export default TBody;

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

@@ -50,6 +50,7 @@ export interface TableProps {
      * 최우측 컬럼 바디의 더보기 메뉴. binButton과 같이 쓸 수 없음. { content, width } (@v1 hamberger)
      */
     kebabMenu?: {
+        show?: (rowId?: string) => TShow;
         content: (rowId: string, onClose: () => void) => React.ReactNode;
     };
     /**
@@ -70,6 +71,13 @@ export interface TableProps {
         rowId: string;
         className?: string;
     };
+    /**
+     * 하이라이팅할 행과 스타일 지정
+     */
+    highlightRows?: {
+        rowIds: string[];
+        className?: string;
+    };
     className?: string;
     id?: string;
     /**

package/dist/index.js

@@ -1728,6 +1728,21 @@ var iconmap = {
     "circles": [],
     "rects": []
   },
+  "Edit03_s1413": {
+    "width": "14",
+    "height": "14",
+    "viewBox": "0 0 14 14",
+    "fill": "none",
+    "paths": [{
+      "d": "M7.24998 12.4874H12.5M2 12.4874H2.97682C3.26217 12.4874 3.40485 12.4874 3.53912 12.4552C3.65816 12.4266 3.77196 12.3795 3.87635 12.3155C3.99408 12.2434 4.09497 12.1425 4.29675 11.9407L11.625 4.61244C12.1083 4.12919 12.1083 3.34569 11.625 2.86244C11.1418 2.37919 10.3583 2.37919 9.87501 2.86244L2.54674 10.1907C2.34496 10.3925 2.24407 10.4934 2.17192 10.6111C2.10795 10.7155 2.06081 10.8293 2.03224 10.9483C2 11.0826 2 11.2253 2 11.5106V12.4874Z",
+      "stroke": "#5C5C5C",
+      "strokeWidth": "1.3",
+      "strokeLinecap": "round",
+      "strokeLinejoin": "round"
+    }],
+    "circles": [],
+    "rects": []
+  },
   "Edit03_s1613": {
     "width": "16",
     "height": "16",
@@ -3606,6 +3621,7 @@ var ICONS = {
   "Downstream_s14": "Downstream_s14",
   "Downstream_s24": "Downstream_s24",
   "DragSelect_s1613": "DragSelect_s1613",
+  "Edit03_s1413": "Edit03_s1413",
   "Edit03_s1613": "Edit03_s1613",
   "Expand_s1815": "Expand_s1815",
   "EyeOff_s16": "EyeOff_s16",
@@ -24036,10 +24052,12 @@ function TBody(_a) {
     checkedIds = _a.checkedIds,
     onCheck = _a.onCheck,
     hasActionCol = _a.hasActionCol,
-    kebabContent = _a.kebabContent,
+    // kebabContent,
+    kebabMenu = _a.kebabMenu,
     binButton = _a.binButton,
     onRowClick = _a.onRowClick,
     selectedRow = _a.selectedRow,
+    highlightRows = _a.highlightRows,
     noData = _a.noData,
     loading = _a.loading,
     emptyContentHeight = _a.emptyContentHeight;
@@ -24087,6 +24105,7 @@ function TBody(_a) {
       loading: loading,
       emptyContentHeight: emptyContentHeight
     }) : data.map(function (row) {
+      var _a, _b;
       return jsx(React__default.Fragment, {
         children: jsxs("tr", __assign({
           onClick: handleRowClick(row[rowIdKey]),
@@ -24094,8 +24113,9 @@ function TBody(_a) {
           onMouseLeave: handleRowLeave(),
           className: classNames({
             'clickable-row': onRowClick,
-            '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))
+            'selected-row': selectedRow && (selectedRow === null || selectedRow === void 0 ? void 0 : selectedRow.rowId) === row[rowIdKey] || hoveredRowId === row[rowIdKey],
+            'highlight-row': highlightRows && (highlightRows === null || highlightRows === void 0 ? void 0 : highlightRows.rowIds.includes(row[rowIdKey]))
+          }, selectedRow && (selectedRow === null || selectedRow === void 0 ? void 0 : selectedRow.className), highlightRows && (highlightRows === null || highlightRows === void 0 ? void 0 : highlightRows.className))
         }, {
           children: [checkedIds != null && jsx(CheckboxTd, {
             rowId: row[rowIdKey],
@@ -24107,9 +24127,11 @@ function TBody(_a) {
             return jsx("td", {
               children: format.customColumn ? format.customColumn(row[format.columnIdKey], row[rowIdKey]) : row[format.columnIdKey]
             }, "cell-".concat(row[format.columnIdKey], "-").concat(cellHashId));
-          }), hasActionCol && kebabContent ? jsx(KebabMenuTd, {
+          }), ((_a = kebabMenu === null || kebabMenu === void 0 ? void 0 : kebabMenu.show) === null || _a === void 0 ? void 0 : _a.call(kebabMenu, row[rowIdKey])) === 'always' || ((_b = kebabMenu === null || kebabMenu === void 0 ? void 0 : kebabMenu.show) === null || _b === void 0 ? void 0 : _b.call(kebabMenu, row[rowIdKey])) === 'hover' && hoveredRowId === row[rowIdKey] ?
+          // eslint-disable-next-line react/jsx-indent
+          jsx(KebabMenuTd, {
             rowId: row[rowIdKey],
-            kebabContent: kebabContent
+            kebabContent: kebabMenu.content
           }) : (binButton === null || binButton === void 0 ? void 0 : binButton.show(row[rowIdKey])) === 'always' || (binButton === null || binButton === void 0 ? void 0 : binButton.show(row[rowIdKey])) === 'hover' && hoveredRowId === row[rowIdKey] ?
           // eslint-disable-next-line jsx-a11y/control-has-associated-label, react/jsx-indent
           jsx("td", {
@@ -24306,7 +24328,7 @@ function Colgroup(_a) {
   });
 }
 
-var css_248z$1 = "@-webkit-keyframes rotate {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes rotate {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n@-webkit-keyframes blink {\n  0% {\n    opacity: 0.6;\n  }\n  20% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0.6;\n  }\n}\n@keyframes blink {\n  0% {\n    opacity: 0.6;\n  }\n  20% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0.6;\n  }\n}\n@-webkit-keyframes fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.maru-table-wrapper {\n  width: 100%;\n  background-color: white;\n  box-shadow: 0px 0px 6px 0px #e4e4e4;\n  border-radius: 10px;\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  width: 100%;\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-05);\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: 10px;\n}\n.maru-table-wrapper .maru-table-body tr:last-of-type td:last-of-type {\n  border-bottom-right-radius: 10px;\n}\n.maru-table-wrapper .maru-table-body .clickable-row {\n  cursor: pointer;\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}\n.maru-table-wrapper .maru-table-body-empty-tr > td p {\n  margin-top: 20px;\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-empty-tr .loading-wrapper {\n  -webkit-animation: blink 1s infinite;\n  animation: blink 1s infinite;\n}";
+var css_248z$1 = "@-webkit-keyframes rotate {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes rotate {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n@-webkit-keyframes blink {\n  0% {\n    opacity: 0.6;\n  }\n  20% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0.6;\n  }\n}\n@keyframes blink {\n  0% {\n    opacity: 0.6;\n  }\n  20% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0.6;\n  }\n}\n@-webkit-keyframes fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.maru-table-wrapper {\n  width: 100%;\n  background-color: white;\n  box-shadow: 0px 0px 6px 0px #e4e4e4;\n  border-radius: 10px;\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  width: 100%;\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-05);\n}\n.maru-table-wrapper .maru-table-body .highlight-row {\n  background-color: var(--p-20);\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: 10px;\n}\n.maru-table-wrapper .maru-table-body tr:last-of-type td:last-of-type {\n  border-bottom-right-radius: 10px;\n}\n.maru-table-wrapper .maru-table-body .clickable-row {\n  cursor: pointer;\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}\n.maru-table-wrapper .maru-table-body-empty-tr > td p {\n  margin-top: 20px;\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-empty-tr .loading-wrapper {\n  -webkit-animation: blink 1s infinite;\n  animation: blink 1s infinite;\n}";
 styleInject(css_248z$1);
 
 // eslint-disable-next-line import/prefer-default-export
@@ -24323,6 +24345,7 @@ function Table(_a) {
     binButton = _a.binButton,
     onRowClick = _a.onRowClick,
     selectedRow = _a.selectedRow,
+    highlightRows = _a.highlightRows,
     className = _a.className,
     id = _a.id,
     tableBodyMaxHeight = _a.tableBodyMaxHeight,
@@ -24469,10 +24492,11 @@ function Table(_a) {
           checkedIds: checkedIds,
           onCheck: onCheck,
           hasActionCol: hasActionCol,
-          kebabContent: kebabMenu === null || kebabMenu === void 0 ? void 0 : kebabMenu.content,
+          kebabMenu: kebabMenu,
           binButton: binButton,
           onRowClick: onRowClick,
           selectedRow: selectedRow,
+          highlightRows: highlightRows,
           noData: noData,
           loading: loading,
           emptyContentHeight: emptyContentHeight

package/package.json

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