maru_design2 2.12.3 → 2.12.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [2.12.4](https://github.com/42maru-ai/maru-design2/compare/v2.12.3...v2.12.4) (2024-07-18)
+
+
+### Bug Fixes
+
+* :bug: Table - kebab, bin wrapper style ([0df8e2b](https://github.com/42maru-ai/maru-design2/commit/0df8e2b683fdbe66b241856aa4f588256ce7463b))
+* :bug: Table - UPDATE scroll wrapper ref ([3b83738](https://github.com/42maru-ai/maru-design2/commit/3b83738f9bf195e9230c71595551c3d97929c757))
+
 ## [2.12.3](https://github.com/42maru-ai/maru-design2/compare/v2.12.2...v2.12.3) (2024-07-18)
 
 

package/dist/index.js

@@ -24001,29 +24001,33 @@ function KebabMenuTd(_a) {
   var handleClose = function handleClose() {
     return setOpen(false);
   };
-  return (kebabContent === null || kebabContent === void 0 ? void 0 : kebabContent(rowId, handleClose)) != null ? jsxs("td", __assign({
-    className: "maru-table-body-kebab-wrapper"
+  return (kebabContent === null || kebabContent === void 0 ? void 0 : kebabContent(rowId, handleClose)) != null ? jsx("td", __assign({
+    className: "maru-table-body-kebab-td"
   }, {
-    children: [jsx(Button, {
-      ref: btnRef,
-      className: "maru-table-body-kebab",
-      startIcon: {
-        name: ICONS.DotsVertical_s1815,
-        color: '#5c5c5c'
-      },
-      variant: "text",
-      color: "secondary",
-      onClick: handleOpen
-    }), btnRef.current && jsx(Popover, __assign({
-      className: "maru-table-body-kebab-popover",
-      direction: "left-start",
-      open: open,
-      anchorEl: btnRef.current,
-      onClose: handleClose,
-      portal: true
+    children: jsxs("div", __assign({
+      className: "maru-table-body-kebab-wrapper"
     }, {
-      children: kebabContent === null || kebabContent === void 0 ? void 0 : kebabContent(rowId, handleClose)
-    }))]
+      children: [jsx(Button, {
+        ref: btnRef,
+        className: "maru-table-body-kebab",
+        startIcon: {
+          name: ICONS.DotsVertical_s1815,
+          color: '#5c5c5c'
+        },
+        variant: "text",
+        color: "secondary",
+        onClick: handleOpen
+      }), btnRef.current && jsx(Popover, __assign({
+        className: "maru-table-body-kebab-popover",
+        direction: "left-start",
+        open: open,
+        anchorEl: btnRef.current,
+        onClose: handleClose,
+        portal: true
+      }, {
+        children: kebabContent === null || kebabContent === void 0 ? void 0 : kebabContent(rowId, handleClose)
+      }))]
+    }))
   })) : null;
 }
 
@@ -24150,18 +24154,22 @@ function TBody(_a) {
           }) : (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", __assign({
-            className: "maru-table-body-bin-button-wrapper"
+            className: "maru-table-body-bin-button-td"
           }, {
-            children: jsx(Button, {
-              startIcon: {
-                name: ICONS.Trash01_s1815,
-                color: hoveredRowId === row[rowIdKey] ? 'danger' : '#8c8c8c'
-              },
-              color: "danger",
-              onClick: function onClick() {
-                return binButton.onClick(row[rowIdKey]);
-              }
-            })
+            children: jsx("div", __assign({
+              className: "maru-table-body-bin-button-wrapper"
+            }, {
+              children: jsx(Button, {
+                startIcon: {
+                  name: ICONS.Trash01_s1815,
+                  color: hoveredRowId === row[rowIdKey] ? 'danger' : '#8c8c8c'
+                },
+                color: "danger",
+                onClick: function onClick() {
+                  return binButton.onClick(row[rowIdKey]);
+                }
+              })
+            }))
           })) : hasActionCol ? jsx("td", {
             children: jsx("div", {
               style: {
@@ -24356,7 +24364,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.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}";
+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}";
 styleInject(css_248z$1);
 
 // eslint-disable-next-line import/prefer-default-export
@@ -24382,6 +24390,7 @@ function Table(_a) {
     emptyContentHeight = _a.emptyContentHeight;
   var tableWrapperRef = useRef(null);
   var tableHeaderWrapperRef = useRef(null);
+  var tableBodyScrollWrapperRef = useRef(null);
   var tableBodyWrapperRef = useRef(null);
   var _b = useState(false),
     allChecked = _b[0],
@@ -24398,12 +24407,13 @@ function Table(_a) {
    * setting table size
    */
   useEffect(function () {
-    if (tableBodyMaxHeight && tableWrapperRef.current && tableBodyWrapperRef.current && tableHeaderWrapperRef.current) {
-      var tableHeaderWrapper = tableHeaderWrapperRef.current;
-      var tableBodyWrapper = tableBodyWrapperRef.current;
-      tableBodyWrapper.style.maxHeight = "".concat(tableBodyMaxHeight, "px");
-      // 스크롤바 가로길이 만큼 헤더에서 빼주기
-      if (tableBodyWrapper.scrollHeight > tableBodyWrapper.offsetHeight) {
+    if (tableBodyMaxHeight && tableWrapperRef.current && tableHeaderWrapperRef.current && tableBodyScrollWrapperRef.current && tableBodyWrapperRef.current) {
+      var tableHeaderWrapper = tableHeaderWrapperRef.current; // table
+      var tableBodyScrollWrapper = tableBodyScrollWrapperRef.current; // div
+      var tableBodyWrapper = tableBodyWrapperRef.current; // table
+      tableBodyScrollWrapper.style.maxHeight = "".concat(tableBodyMaxHeight, "px");
+      // 스크롤바가 생겼으면, 스크롤바 가로길이 만큼 헤더에서 빼주기
+      if (tableBodyWrapper.scrollHeight > tableBodyScrollWrapper.offsetHeight) {
         tableHeaderWrapper.style.width = 'calc(100% - 6px)'; // scroll-width
       } else {
         tableHeaderWrapper.style.width = '100%';
@@ -24503,10 +24513,11 @@ function Table(_a) {
         filter: filter
       })]
     })), jsx("div", __assign({
-      ref: tableBodyWrapperRef,
+      ref: tableBodyScrollWrapperRef,
       className: "maru-table-body-scroll-wrapper"
     }, {
       children: jsxs("table", __assign({
+        ref: tableBodyWrapperRef,
         className: "maru-table-body-wrapper"
       }, {
         children: [jsx(Colgroup, {

package/package.json

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