maru_design2 2.11.0 → 2.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/components/atoms/icon/iconmap.d.ts +1 -0
  3. package/dist/components/molecules/table/Table.d.ts +1 -1
  4. package/dist/components/molecules/table/body/TBody.d.ts +9 -2
  5. package/dist/components/molecules/table/types.d.ts +8 -0
  6. package/dist/index.js +35 -8
  7. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # Changelog
2
2
 
3
+ ## [2.12.0](https://github.com/42maru-ai/maru-design2/compare/v2.11.1...v2.12.0) (2024-07-15)
4
+
5
+
6
+ ### Features
7
+
8
+ * :sparkles: Table - ADD highlightRows [#202](https://github.com/42maru-ai/maru-design2/issues/202) ([f618e67](https://github.com/42maru-ai/maru-design2/commit/f618e67f31e68497e90534352103848d52dec3b5))
9
+ * :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))
10
+
11
+
12
+ ### Bug Fixes
13
+
14
+ * :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))
15
+
16
+ ## [2.11.1](https://github.com/42maru-ai/maru-design2/compare/v2.11.0...v2.11.1) (2024-07-11)
17
+
18
+
19
+ ### Bug Fixes
20
+
21
+ * :lipstick: Pagination, Dropdown - UPDATE input height [#196](https://github.com/42maru-ai/maru-design2/issues/196), UPDATE input reset [#195](https://github.com/42maru-ai/maru-design2/issues/195) ([bebcae6](https://github.com/42maru-ai/maru-design2/commit/bebcae6b402fb4da0e1d73ffa57f7db9f196a1e7))
22
+
3
23
  ## [2.11.0](https://github.com/42maru-ai/maru-design2/compare/v2.10.0...v2.11.0) (2024-07-10)
4
24
 
5
25
 
package/dist/components/atoms/icon/iconmap.d.ts CHANGED
@@ -119,6 +119,7 @@ export declare const ICONS: {
119
119
  readonly Downstream_s14: "Downstream_s14";
120
120
  readonly Downstream_s24: "Downstream_s24";
121
121
  readonly DragSelect_s1613: "DragSelect_s1613";
122
+ readonly Edit03_s1413: "Edit03_s1413";
122
123
  readonly Edit03_s1613: "Edit03_s1613";
123
124
  readonly Expand_s1815: "Expand_s1815";
124
125
  readonly EyeOff_s16: "EyeOff_s16";
package/dist/components/molecules/table/Table.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import { TableProps } from './types';
2
2
  import './table.scss';
3
- 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;
3
+ 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 CHANGED
@@ -7,7 +7,10 @@ interface Props {
7
7
  checkedIds?: string[];
8
8
  onCheck?: (ids: string[]) => void;
9
9
  hasActionCol: boolean;
10
- kebabContent?: (rowId: string, onClose: () => void) => React.ReactNode;
10
+ kebabMenu?: {
11
+ show?: (rowId?: string) => TShow;
12
+ content: (rowId: string, onClose: () => void) => React.ReactNode;
13
+ };
11
14
  binButton?: {
12
15
  show: (rowId?: string) => TShow;
13
16
  onClick: (rowId: string) => void;
@@ -17,6 +20,10 @@ interface Props {
17
20
  rowId: string;
18
21
  className?: string;
19
22
  };
23
+ highlightRows?: {
24
+ rowIds: string[];
25
+ className?: string;
26
+ };
20
27
  noData?: {
21
28
  isNoData: boolean;
22
29
  message: string;
@@ -27,5 +34,5 @@ interface Props {
27
34
  };
28
35
  emptyContentHeight?: number;
29
36
  }
30
- declare function TBody({ rowIdKey, formats, data, checkedIds, onCheck, hasActionCol, kebabContent, binButton, onRowClick, selectedRow, noData, loading, emptyContentHeight, }: Props): import("react/jsx-runtime").JSX.Element;
37
+ declare function TBody({ rowIdKey, formats, data, checkedIds, onCheck, hasActionCol, kebabMenu, binButton, onRowClick, selectedRow, highlightRows, noData, loading, emptyContentHeight, }: Props): import("react/jsx-runtime").JSX.Element;
31
38
  export default TBody;
package/dist/components/molecules/table/types.d.ts CHANGED
@@ -50,6 +50,7 @@ export interface TableProps {
50
50
  * 최우측 컬럼 바디의 더보기 메뉴. binButton과 같이 쓸 수 없음. { content, width } (@v1 hamberger)
51
51
  */
52
52
  kebabMenu?: {
53
+ show?: (rowId?: string) => TShow;
53
54
  content: (rowId: string, onClose: () => void) => React.ReactNode;
54
55
  };
55
56
  /**
@@ -70,6 +71,13 @@ export interface TableProps {
70
71
  rowId: string;
71
72
  className?: string;
72
73
  };
74
+ /**
75
+ * 하이라이팅할 행과 스타일 지정
76
+ */
77
+ highlightRows?: {
78
+ rowIds: string[];
79
+ className?: string;
80
+ };
73
81
  className?: string;
74
82
  id?: string;
75
83
  /**
package/dist/index.js CHANGED
@@ -1728,6 +1728,21 @@ var iconmap = {
1728
1728
  "circles": [],
1729
1729
  "rects": []
1730
1730
  },
1731
+ "Edit03_s1413": {
1732
+ "width": "14",
1733
+ "height": "14",
1734
+ "viewBox": "0 0 14 14",
1735
+ "fill": "none",
1736
+ "paths": [{
1737
+ "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",
1738
+ "stroke": "#5C5C5C",
1739
+ "strokeWidth": "1.3",
1740
+ "strokeLinecap": "round",
1741
+ "strokeLinejoin": "round"
1742
+ }],
1743
+ "circles": [],
1744
+ "rects": []
1745
+ },
1731
1746
  "Edit03_s1613": {
1732
1747
  "width": "16",
1733
1748
  "height": "16",
@@ -3606,6 +3621,7 @@ var ICONS = {
3606
3621
  "Downstream_s14": "Downstream_s14",
3607
3622
  "Downstream_s24": "Downstream_s24",
3608
3623
  "DragSelect_s1613": "DragSelect_s1613",
3624
+ "Edit03_s1413": "Edit03_s1413",
3609
3625
  "Edit03_s1613": "Edit03_s1613",
3610
3626
  "Expand_s1815": "Expand_s1815",
3611
3627
  "EyeOff_s16": "EyeOff_s16",
@@ -23429,6 +23445,9 @@ function Dropdown(_a) {
23429
23445
  useEffect(function () {
23430
23446
  if (selected === null || selected === void 0 ? void 0 : selected[displayKey]) {
23431
23447
  setInputValue(selected[displayKey]);
23448
+ } else {
23449
+ // selected === undefined
23450
+ setInputValue('');
23432
23451
  }
23433
23452
  }, [selected]);
23434
23453
  // type=input 일때, inputValue 변경 시(사용자가 타이핑) 메뉴 아이템 파싱하여 표시하기 위한 useEffect
@@ -23687,7 +23706,7 @@ function Modal(_a) {
23687
23706
  });
23688
23707
  }
23689
23708
 
23690
- var css_248z$2 = ".maru-pagination-wrapper .maru-pagination {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n}\n.maru-pagination-wrapper .maru-pagination button {\n cursor: pointer;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 12px;\n letter-spacing: -0.48px;\n font-weight: 500;\n color: #8c8c8c;\n padding: 4px;\n margin: unset;\n background-color: unset;\n border: unset;\n min-width: 30px;\n min-height: 30px;\n border-radius: 6px;\n}\n.maru-pagination-wrapper .maru-pagination button > span {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n}\n.maru-pagination-wrapper .maru-pagination button:active {\n background-color: #bdbdbd;\n}\n.maru-pagination-wrapper .maru-pagination button:disabled {\n cursor: default;\n}\n.maru-pagination-wrapper .maru-pagination .maru-pagination-input-wrapper {\n margin: 0 12px;\n}\n.maru-pagination-wrapper .maru-pagination .maru-pagination-input-wrapper .maru-pagination-input {\n width: 36px;\n border: 1px solid #bdbdbd;\n border-radius: 4px;\n padding: 3px 8px 4px 8px;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 12px;\n letter-spacing: -0.48px;\n font-weight: 500;\n margin-right: 8px;\n color: #5c5c5c;\n text-align: center;\n}\n.maru-pagination-wrapper .maru-pagination .maru-pagination-input-wrapper .maru-pagination-input::-webkit-outer-spin-button, .maru-pagination-wrapper .maru-pagination .maru-pagination-input-wrapper .maru-pagination-input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n.maru-pagination-wrapper .maru-pagination .maru-pagination-input-wrapper .maru-pagination-input:disabled {\n pointer-events: none;\n border: none;\n background-color: transparent;\n width: auto;\n margin-right: 0;\n padding: 0;\n}\n.maru-pagination-wrapper .maru-pagination .maru-pagination-input-wrapper .maru-pagination-input-label {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 12px;\n letter-spacing: -0.48px;\n font-weight: 500;\n color: #5c5c5c;\n}";
23709
+ var css_248z$2 = ".maru-pagination-wrapper .maru-pagination {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n}\n.maru-pagination-wrapper .maru-pagination button {\n cursor: pointer;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 12px;\n letter-spacing: -0.48px;\n font-weight: 500;\n color: #8c8c8c;\n padding: 4px;\n margin: unset;\n background-color: unset;\n border: unset;\n min-width: 30px;\n min-height: 30px;\n border-radius: 6px;\n}\n.maru-pagination-wrapper .maru-pagination button > span {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n}\n.maru-pagination-wrapper .maru-pagination button:active {\n background-color: #bdbdbd;\n}\n.maru-pagination-wrapper .maru-pagination button:disabled {\n cursor: default;\n}\n.maru-pagination-wrapper .maru-pagination .maru-pagination-input-wrapper {\n margin: 0 12px;\n}\n.maru-pagination-wrapper .maru-pagination .maru-pagination-input-wrapper .maru-pagination-input {\n width: 36px;\n height: 24px;\n border: 1px solid #bdbdbd;\n border-radius: 4px;\n padding: 3px 8px 4px 8px;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 12px;\n letter-spacing: -0.48px;\n font-weight: 500;\n margin-right: 8px;\n color: #5c5c5c;\n text-align: center;\n}\n.maru-pagination-wrapper .maru-pagination .maru-pagination-input-wrapper .maru-pagination-input::-webkit-outer-spin-button, .maru-pagination-wrapper .maru-pagination .maru-pagination-input-wrapper .maru-pagination-input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n.maru-pagination-wrapper .maru-pagination .maru-pagination-input-wrapper .maru-pagination-input:disabled {\n pointer-events: none;\n border: none;\n background-color: transparent;\n width: auto;\n margin-right: 0;\n padding: 0;\n}\n.maru-pagination-wrapper .maru-pagination .maru-pagination-input-wrapper .maru-pagination-input-label {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 12px;\n letter-spacing: -0.48px;\n font-weight: 500;\n color: #5c5c5c;\n}";
23691
23710
  styleInject(css_248z$2);
23692
23711
 
23693
23712
  function Pagination(_a) {
@@ -24033,10 +24052,12 @@ function TBody(_a) {
24033
24052
  checkedIds = _a.checkedIds,
24034
24053
  onCheck = _a.onCheck,
24035
24054
  hasActionCol = _a.hasActionCol,
24036
- kebabContent = _a.kebabContent,
24055
+ // kebabContent,
24056
+ kebabMenu = _a.kebabMenu,
24037
24057
  binButton = _a.binButton,
24038
24058
  onRowClick = _a.onRowClick,
24039
24059
  selectedRow = _a.selectedRow,
24060
+ highlightRows = _a.highlightRows,
24040
24061
  noData = _a.noData,
24041
24062
  loading = _a.loading,
24042
24063
  emptyContentHeight = _a.emptyContentHeight;
@@ -24084,6 +24105,7 @@ function TBody(_a) {
24084
24105
  loading: loading,
24085
24106
  emptyContentHeight: emptyContentHeight
24086
24107
  }) : data.map(function (row) {
24108
+ var _a, _b;
24087
24109
  return jsx(React__default.Fragment, {
24088
24110
  children: jsxs("tr", __assign({
24089
24111
  onClick: handleRowClick(row[rowIdKey]),
@@ -24091,8 +24113,9 @@ function TBody(_a) {
24091
24113
  onMouseLeave: handleRowLeave(),
24092
24114
  className: classNames({
24093
24115
  'clickable-row': onRowClick,
24094
- 'selected-row': selectedRow && (selectedRow === null || selectedRow === void 0 ? void 0 : selectedRow.rowId) === row[rowIdKey] || hoveredRowId === row[rowIdKey]
24095
- }, selectedRow && (selectedRow === null || selectedRow === void 0 ? void 0 : selectedRow.className))
24116
+ 'selected-row': selectedRow && (selectedRow === null || selectedRow === void 0 ? void 0 : selectedRow.rowId) === row[rowIdKey] || hoveredRowId === row[rowIdKey],
24117
+ 'highlight-row': highlightRows && (highlightRows === null || highlightRows === void 0 ? void 0 : highlightRows.rowIds.includes(row[rowIdKey]))
24118
+ }, selectedRow && (selectedRow === null || selectedRow === void 0 ? void 0 : selectedRow.className), highlightRows && (highlightRows === null || highlightRows === void 0 ? void 0 : highlightRows.className))
24096
24119
  }, {
24097
24120
  children: [checkedIds != null && jsx(CheckboxTd, {
24098
24121
  rowId: row[rowIdKey],
@@ -24104,9 +24127,11 @@ function TBody(_a) {
24104
24127
  return jsx("td", {
24105
24128
  children: format.customColumn ? format.customColumn(row[format.columnIdKey], row[rowIdKey]) : row[format.columnIdKey]
24106
24129
  }, "cell-".concat(row[format.columnIdKey], "-").concat(cellHashId));
24107
- }), hasActionCol && kebabContent ? jsx(KebabMenuTd, {
24130
+ }), ((_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] ?
24131
+ // eslint-disable-next-line react/jsx-indent
24132
+ jsx(KebabMenuTd, {
24108
24133
  rowId: row[rowIdKey],
24109
- kebabContent: kebabContent
24134
+ kebabContent: kebabMenu.content
24110
24135
  }) : (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] ?
24111
24136
  // eslint-disable-next-line jsx-a11y/control-has-associated-label, react/jsx-indent
24112
24137
  jsx("td", {
@@ -24303,7 +24328,7 @@ function Colgroup(_a) {
24303
24328
  });
24304
24329
  }
24305
24330
 
24306
- 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}";
24331
+ 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}";
24307
24332
  styleInject(css_248z$1);
24308
24333
 
24309
24334
  // eslint-disable-next-line import/prefer-default-export
@@ -24320,6 +24345,7 @@ function Table(_a) {
24320
24345
  binButton = _a.binButton,
24321
24346
  onRowClick = _a.onRowClick,
24322
24347
  selectedRow = _a.selectedRow,
24348
+ highlightRows = _a.highlightRows,
24323
24349
  className = _a.className,
24324
24350
  id = _a.id,
24325
24351
  tableBodyMaxHeight = _a.tableBodyMaxHeight,
@@ -24466,10 +24492,11 @@ function Table(_a) {
24466
24492
  checkedIds: checkedIds,
24467
24493
  onCheck: onCheck,
24468
24494
  hasActionCol: hasActionCol,
24469
- kebabContent: kebabMenu === null || kebabMenu === void 0 ? void 0 : kebabMenu.content,
24495
+ kebabMenu: kebabMenu,
24470
24496
  binButton: binButton,
24471
24497
  onRowClick: onRowClick,
24472
24498
  selectedRow: selectedRow,
24499
+ highlightRows: highlightRows,
24473
24500
  noData: noData,
24474
24501
  loading: loading,
24475
24502
  emptyContentHeight: emptyContentHeight
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "maru_design2",
3
- "version": "2.11.0",
3
+ "version": "2.12.0",
4
4
  "main": "./dist/index.js",
5
5
  "author": "zena-42maru",
6
6
  "license": "MIT",