maru_design2 2.12.3 → 2.12.5
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.
- package/CHANGELOG.md +15 -0
- package/dist/index.js +52 -41
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [2.12.5](https://github.com/42maru-ai/maru-design2/compare/v2.12.4...v2.12.5) (2024-07-18)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Bug Fixes
|
|
7
|
+
|
|
8
|
+
* :bug: Table - UPDATE header scroll cond. to data fetching ([6f7061e](https://github.com/42maru-ai/maru-design2/commit/6f7061ec4a3a8fce8e06a5e84b7da70fe530a5e0))
|
|
9
|
+
|
|
10
|
+
## [2.12.4](https://github.com/42maru-ai/maru-design2/compare/v2.12.3...v2.12.4) (2024-07-18)
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
### Bug Fixes
|
|
14
|
+
|
|
15
|
+
* :bug: Table - kebab, bin wrapper style ([0df8e2b](https://github.com/42maru-ai/maru-design2/commit/0df8e2b683fdbe66b241856aa4f588256ce7463b))
|
|
16
|
+
* :bug: Table - UPDATE scroll wrapper ref ([3b83738](https://github.com/42maru-ai/maru-design2/commit/3b83738f9bf195e9230c71595551c3d97929c757))
|
|
17
|
+
|
|
3
18
|
## [2.12.3](https://github.com/42maru-ai/maru-design2/compare/v2.12.2...v2.12.3) (2024-07-18)
|
|
4
19
|
|
|
5
20
|
|
package/dist/index.js
CHANGED
|
@@ -24001,29 +24001,33 @@ function KebabMenuTd(_a) {
|
|
|
24001
24001
|
var handleClose = function handleClose() {
|
|
24002
24002
|
return setOpen(false);
|
|
24003
24003
|
};
|
|
24004
|
-
return (kebabContent === null || kebabContent === void 0 ? void 0 : kebabContent(rowId, handleClose)) != null ?
|
|
24005
|
-
className: "maru-table-body-kebab-
|
|
24004
|
+
return (kebabContent === null || kebabContent === void 0 ? void 0 : kebabContent(rowId, handleClose)) != null ? jsx("td", __assign({
|
|
24005
|
+
className: "maru-table-body-kebab-td"
|
|
24006
24006
|
}, {
|
|
24007
|
-
children:
|
|
24008
|
-
|
|
24009
|
-
className: "maru-table-body-kebab",
|
|
24010
|
-
startIcon: {
|
|
24011
|
-
name: ICONS.DotsVertical_s1815,
|
|
24012
|
-
color: '#5c5c5c'
|
|
24013
|
-
},
|
|
24014
|
-
variant: "text",
|
|
24015
|
-
color: "secondary",
|
|
24016
|
-
onClick: handleOpen
|
|
24017
|
-
}), btnRef.current && jsx(Popover, __assign({
|
|
24018
|
-
className: "maru-table-body-kebab-popover",
|
|
24019
|
-
direction: "left-start",
|
|
24020
|
-
open: open,
|
|
24021
|
-
anchorEl: btnRef.current,
|
|
24022
|
-
onClose: handleClose,
|
|
24023
|
-
portal: true
|
|
24007
|
+
children: jsxs("div", __assign({
|
|
24008
|
+
className: "maru-table-body-kebab-wrapper"
|
|
24024
24009
|
}, {
|
|
24025
|
-
children:
|
|
24026
|
-
|
|
24010
|
+
children: [jsx(Button, {
|
|
24011
|
+
ref: btnRef,
|
|
24012
|
+
className: "maru-table-body-kebab",
|
|
24013
|
+
startIcon: {
|
|
24014
|
+
name: ICONS.DotsVertical_s1815,
|
|
24015
|
+
color: '#5c5c5c'
|
|
24016
|
+
},
|
|
24017
|
+
variant: "text",
|
|
24018
|
+
color: "secondary",
|
|
24019
|
+
onClick: handleOpen
|
|
24020
|
+
}), btnRef.current && jsx(Popover, __assign({
|
|
24021
|
+
className: "maru-table-body-kebab-popover",
|
|
24022
|
+
direction: "left-start",
|
|
24023
|
+
open: open,
|
|
24024
|
+
anchorEl: btnRef.current,
|
|
24025
|
+
onClose: handleClose,
|
|
24026
|
+
portal: true
|
|
24027
|
+
}, {
|
|
24028
|
+
children: kebabContent === null || kebabContent === void 0 ? void 0 : kebabContent(rowId, handleClose)
|
|
24029
|
+
}))]
|
|
24030
|
+
}))
|
|
24027
24031
|
})) : null;
|
|
24028
24032
|
}
|
|
24029
24033
|
|
|
@@ -24150,18 +24154,22 @@ function TBody(_a) {
|
|
|
24150
24154
|
}) : (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] ?
|
|
24151
24155
|
// eslint-disable-next-line jsx-a11y/control-has-associated-label, react/jsx-indent
|
|
24152
24156
|
jsx("td", __assign({
|
|
24153
|
-
className: "maru-table-body-bin-button-
|
|
24157
|
+
className: "maru-table-body-bin-button-td"
|
|
24154
24158
|
}, {
|
|
24155
|
-
children: jsx(
|
|
24156
|
-
|
|
24157
|
-
|
|
24158
|
-
|
|
24159
|
-
|
|
24160
|
-
|
|
24161
|
-
|
|
24162
|
-
|
|
24163
|
-
|
|
24164
|
-
|
|
24159
|
+
children: jsx("div", __assign({
|
|
24160
|
+
className: "maru-table-body-bin-button-wrapper"
|
|
24161
|
+
}, {
|
|
24162
|
+
children: jsx(Button, {
|
|
24163
|
+
startIcon: {
|
|
24164
|
+
name: ICONS.Trash01_s1815,
|
|
24165
|
+
color: hoveredRowId === row[rowIdKey] ? 'danger' : '#8c8c8c'
|
|
24166
|
+
},
|
|
24167
|
+
color: "danger",
|
|
24168
|
+
onClick: function onClick() {
|
|
24169
|
+
return binButton.onClick(row[rowIdKey]);
|
|
24170
|
+
}
|
|
24171
|
+
})
|
|
24172
|
+
}))
|
|
24165
24173
|
})) : hasActionCol ? jsx("td", {
|
|
24166
24174
|
children: jsx("div", {
|
|
24167
24175
|
style: {
|
|
@@ -24356,7 +24364,7 @@ function Colgroup(_a) {
|
|
|
24356
24364
|
});
|
|
24357
24365
|
}
|
|
24358
24366
|
|
|
24359
|
-
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.toggle-on .filter-box {\n width: 100%;\n height: 33px;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th.toggle-on {\n padding: 18px 15px 16px 15px;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th.toggle-on .filter-buttons-wrapper {\n height: 67px;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th .filter-buttons-wrapper {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th .filter-buttons-wrapper .reset-button {\n margin-bottom: 8px;\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 display: flex;\n flex-direction: column;\n}\n.maru-table-wrapper .maru-table-body-bin-button-wrapper {\n display: flex;\n flex-direction: column;\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}";
|
|
24367
|
+
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.toggle-on .filter-box {\n width: 100%;\n height: 33px;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th.toggle-on {\n padding: 18px 15px 16px 15px;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th.toggle-on .filter-buttons-wrapper {\n height: 67px;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th .filter-buttons-wrapper {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th .filter-buttons-wrapper .reset-button {\n margin-bottom: 8px;\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-td .maru-table-body-kebab-wrapper {\n display: flex;\n flex-direction: column;\n}\n.maru-table-wrapper .maru-table-body-bin-button-td .maru-table-body-bin-button-wrapper {\n display: flex;\n flex-direction: column;\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}";
|
|
24360
24368
|
styleInject(css_248z$1);
|
|
24361
24369
|
|
|
24362
24370
|
// eslint-disable-next-line import/prefer-default-export
|
|
@@ -24382,6 +24390,7 @@ function Table(_a) {
|
|
|
24382
24390
|
emptyContentHeight = _a.emptyContentHeight;
|
|
24383
24391
|
var tableWrapperRef = useRef(null);
|
|
24384
24392
|
var tableHeaderWrapperRef = useRef(null);
|
|
24393
|
+
var tableBodyScrollWrapperRef = useRef(null);
|
|
24385
24394
|
var tableBodyWrapperRef = useRef(null);
|
|
24386
24395
|
var _b = useState(false),
|
|
24387
24396
|
allChecked = _b[0],
|
|
@@ -24398,18 +24407,19 @@ function Table(_a) {
|
|
|
24398
24407
|
* setting table size
|
|
24399
24408
|
*/
|
|
24400
24409
|
useEffect(function () {
|
|
24401
|
-
if (tableBodyMaxHeight && tableWrapperRef.current &&
|
|
24402
|
-
var tableHeaderWrapper = tableHeaderWrapperRef.current;
|
|
24403
|
-
var
|
|
24404
|
-
tableBodyWrapper
|
|
24405
|
-
|
|
24406
|
-
|
|
24410
|
+
if (data.length && tableBodyMaxHeight && tableWrapperRef.current && tableHeaderWrapperRef.current && tableBodyScrollWrapperRef.current && tableBodyWrapperRef.current) {
|
|
24411
|
+
var tableHeaderWrapper = tableHeaderWrapperRef.current; // table
|
|
24412
|
+
var tableBodyScrollWrapper = tableBodyScrollWrapperRef.current; // div
|
|
24413
|
+
var tableBodyWrapper = tableBodyWrapperRef.current; // table
|
|
24414
|
+
tableBodyScrollWrapper.style.maxHeight = "".concat(tableBodyMaxHeight, "px");
|
|
24415
|
+
// 스크롤바가 생겼으면, 스크롤바 가로길이 만큼 헤더에서 빼주기
|
|
24416
|
+
if (tableBodyWrapper.scrollHeight > tableBodyScrollWrapper.offsetHeight) {
|
|
24407
24417
|
tableHeaderWrapper.style.width = 'calc(100% - 6px)'; // scroll-width
|
|
24408
24418
|
} else {
|
|
24409
24419
|
tableHeaderWrapper.style.width = '100%';
|
|
24410
24420
|
}
|
|
24411
24421
|
}
|
|
24412
|
-
}, [tableBodyMaxHeight]);
|
|
24422
|
+
}, [data, tableBodyMaxHeight]);
|
|
24413
24423
|
/**
|
|
24414
24424
|
* setting all checkbox
|
|
24415
24425
|
*/
|
|
@@ -24503,10 +24513,11 @@ function Table(_a) {
|
|
|
24503
24513
|
filter: filter
|
|
24504
24514
|
})]
|
|
24505
24515
|
})), jsx("div", __assign({
|
|
24506
|
-
ref:
|
|
24516
|
+
ref: tableBodyScrollWrapperRef,
|
|
24507
24517
|
className: "maru-table-body-scroll-wrapper"
|
|
24508
24518
|
}, {
|
|
24509
24519
|
children: jsxs("table", __assign({
|
|
24520
|
+
ref: tableBodyWrapperRef,
|
|
24510
24521
|
className: "maru-table-body-wrapper"
|
|
24511
24522
|
}, {
|
|
24512
24523
|
children: [jsx(Colgroup, {
|