qbs-react-grid 2.2.3 → 2.2.5

package/lib/less/qbs-table.less

@@ -104,156 +104,52 @@
   }
 }
 .qbs-table[data-theme='dark'] {
-  background-color: #1f1f1f;
-  color: #f5f5f5;
+  background-color: #333333;
+  color: #ffffff;
 
-  .qbs-table-border-wrap {
-    border-color: #3d3d3d;
-    background: #262626;
-  }
-
-  .qbs-table-toolbar-container,
-  .qbs-table-toolbar,
-  .qbs-table-toolbar-sub-container,
-  .sub-qbs-table-toolbar {
-    color: #f5f5f5;
-  }
-
-  .qbs-table-search-container {
-    .input {
-      border-color: #4a4a4a;
-      background: #2d2d2d;
-      color: #f5f5f5;
-
-      &:hover,
-      &:focus {
-        border-color: #6b6b6b;
-        background: #2d2d2d;
-      }
-    }
-
-    .search-button,
-    .close-button {
-      color: #d1d1d1;
-      background-color: transparent;
-    }
-  }
-
-  .qbs-table-column-popup,
-  .qbs-table-popup-container {
-    background: #2d2d2d;
-    color: #f5f5f5;
-    border-color: #4a4a4a;
-  }
-
-  .qbs-table-popup-label,
-  .qbs-table-popup-value,
-  .qbs-table-reset-link {
-    color: #f5f5f5;
-  }
-
-  .qbs-table-custom-pagination,
-  .qbs-table-pagination-text,
-  .rows-count {
-    color: #f5f5f5;
-  }
-
-  .qbs-table-icon-container svg path {
-    stroke: #e5e5e5;
-  }
-
-  .custom-select-trigger,
-  .custom-select-options {
-    background: #2d2d2d;
-    color: #f5f5f5;
-    border-color: #4a4a4a;
-  }
-
-  .qbs-card-container {
-    border-color: #4a4a4a;
-    background: #262626;
-    color: #f5f5f5;
-  }
-
-  .nodata-title {
-    color: #f5f5f5;
-  }
-
-  .tooltiptext {
-    background-color: #3d3d3d;
-    color: #fff;
-  }
-}
-
-.qbs-table-custom-pagination[data-theme='dark'] {
-  color: #f5f5f5;
-
-  .rows-count,
-  .qbs-table-pagination-text {
-    color: #f5f5f5;
-  }
-
-  .qbs-table-icon-container svg path {
-    stroke: #e5e5e5;
-  }
-}
-
-.rs-table-cell-content[data-theme='dark'] {
-  background-color: #262626;
-  color: #f5f5f5;
-}
-
-.qbs-table[data-theme='dark'] {
-  .rs-table,
-  .rs-table-body-row-wrapper,
-  .rs-table-row,
-  .rs-table-cell,
   .rs-table-cell-group,
-  .rs-table-row-header,
-  .rs-table-row-header .rs-table-cell {
-    background-color: #262626;
-    color: #f5f5f5;
+  .rs-table-cell-group-fixed-left,
+  .rs-table-cell-group-fixed-right {
+    background-color: #262626 !important;
   }
 
-  .rs-table-cell-content {
-    background-color: #262626;
-    color: #f5f5f5;
-  }
-
-  .rs-table-row-header .rs-table-cell-content,
-  .rs-table-cell-header .rs-table-cell-content {
-    background-color: #1b2028;
-    color: #f5f5f5;
+  .rs-table-hover .rs-table-body-row-wrapper .rs-table-row:hover .rs-table-cell-group,
+  .rs-table-hover .rs-table-body-row-wrapper .rs-table-row:hover .rs-table-cell-group-fixed-left,
+  .rs-table-hover .rs-table-body-row-wrapper .rs-table-row:hover .rs-table-cell-group-fixed-right,
+  .rs-table-hover .rs-table-body-row-wrapper .rs-table-row:hover .rs-table-cell-group > div,
+  .rs-table-hover .rs-table-body-row-wrapper .rs-table-row:hover .rs-table-cell-group .rs-table-cell,
+  .rs-table-hover .rs-table-body-row-wrapper .rs-table-row:hover .rs-table-cell-group .rs-table-cell-content {
+    background-color: #1d2633 !important;
   }
 
-  .rs-table-hover .rs-table-body-row-wrapper .rs-table-row:hover,
-  .rs-table-hover .rs-table-body-row-wrapper .rs-table-row:hover .rs-table-cell,
-  .rs-table-hover .rs-table-body-row-wrapper .rs-table-row:hover .rs-table-cell-content {
-    background-color: #1d2633;
+  .rs-table-row:has(.qbs-table-checkbox-input:checked) .rs-table-cell-group-scroll .rs-table-cell,
+  .rs-table-row:has(.qbs-table-checkbox-input:checked) .rs-table-cell-group-scroll .rs-table-cell-content,
+  .rs-table-row.qbs-table-row-checked .rs-table-cell-group-scroll .rs-table-cell,
+  .rs-table-row.qbs-table-row-checked .rs-table-cell-group-scroll .rs-table-cell-content {
+    background-color: #8f5cff1f !important;
   }
 
-  .rs-table-cell {
-    border-color: #3d3d3d;
+  .rs-table-row:has(.qbs-table-checkbox-input:checked) .rs-table-cell-group-fixed-left,
+  .rs-table-row:has(.qbs-table-checkbox-input:checked) .rs-table-cell-group-fixed-right,
+  .rs-table-row.qbs-table-row-checked .rs-table-cell-group-fixed-left,
+  .rs-table-row.qbs-table-row-checked .rs-table-cell-group-fixed-right,
+  .rs-table-row:has(.qbs-table-checkbox-input:checked) .rs-table-cell-group-fixed-left > div,
+  .rs-table-row:has(.qbs-table-checkbox-input:checked) .rs-table-cell-group-fixed-right > div,
+  .rs-table-row:has(.qbs-table-checkbox-input:checked) .rs-table-cell-group-fixed-left .rs-table-cell,
+  .rs-table-row:has(.qbs-table-checkbox-input:checked) .rs-table-cell-group-fixed-right .rs-table-cell,
+  .rs-table-row:has(.qbs-table-checkbox-input:checked) .rs-table-cell-group-fixed-left .rs-table-cell-content,
+  .rs-table-row:has(.qbs-table-checkbox-input:checked) .rs-table-cell-group-fixed-right .rs-table-cell-content {
+    background-color: #2a2438 !important;
   }
 
-  .rs-table-scrollbar {
-    background-color: #2d2d2d;
-  }
-
-  .rs-table-scrollbar-handle {
-    background-color: #5a5a5a;
+  .qbs-table-checkbox .qbs-table-checkbox-input:checked ~ label {
+    background-color: #8f5cff !important;
+    border-color: #a78bfa !important;
   }
 }
-
-.qbs-table[dir='rtl'] {
-  .rs-table-cell-header .rs-table-cell-content {
-    text-align: right;
-  }
-
-  .rs-table-cell-wrap {
-    justify-content: flex-start;
-    width: 100%;
-  }
+.rs-table-cell-content[data-theme='dark'] {
+  background-color: #333333;
+  color: #ffffff;
 }
 /* Dropdown container */
 .qbs-table-menu-dropdown {
@@ -387,98 +283,70 @@
 .qbs-table-tooltip {
   cursor: pointer;
   position: relative;
-  display: inline-flex;
+  width: auto;
+  display: flex;
 }
 
 .qbs-table-tooltip .tooltiptext {
   visibility: hidden;
-  background-color: var(--tooltip-bg, #222);
-  color: var(--tooltip-text, #fff);
+  background-color: black;
+  color: white;
   text-align: center;
-  padding: 6px 10px;
-  border-radius: 6px;
+  padding: 6px;
+  border-radius: 4px;
   position: absolute;
-  z-index: 10050;
+  z-index: 9999;
   opacity: 0;
-  transition: opacity 0.15s ease;
+  transition: opacity 0.3s;
   font-size: 12px;
-  font-weight: 500;
+  font-style: normal;
+  font-weight: 400;
   line-height: 16px;
-  white-space: nowrap;
-  max-width: min(280px, 90vw);
-  pointer-events: none;
-  inset-inline-start: 50%;
-  translate: -50% 0;
+  width: 100px;
 }
 
 .qbs-table-tooltip.up .tooltiptext {
-  bottom: calc(100% + 8px);
-  top: auto;
+  bottom: calc(100% + 10px);
+  right: -8px;
+  left: unset;
 }
 
 .qbs-table-tooltip.down .tooltiptext {
+  right: -10px;
   top: calc(100% + 8px);
-  bottom: auto;
 }
 
+// .qbs-table-tooltip:hover .tooltiptext {
+//   visibility: visible;
+//   opacity: 1;
+// }
+
 .qbs-table-tooltip .tooltiptext::after {
   content: '';
   position: absolute;
-  inset-inline-start: 50%;
-  translate: -50% 0;
-  border: 5px solid transparent;
+  border-width: 5px;
+  border-style: solid;
 }
 
 .qbs-table-tooltip.up .tooltiptext::after {
-  top: 100%;
-  border-top-color: var(--tooltip-bg, #222);
+  border-color: black transparent transparent !important;
+  right: 12px !important;
+  margin-left: -5px !important;
+  top: 100% !important;
+  left: unset !important;
 }
 
 .qbs-table-tooltip.down .tooltiptext::after {
-  bottom: 100%;
-  border-bottom-color: var(--tooltip-bg, #222);
+  border-color: transparent transparent black;
+  bottom: 100% !important;
+  right: 12px !important;
+  margin-left: -5px !important;
+  left: unset !important;
 }
-
-.qbs-table-tooltip-floating.tooltiptext {
-  position: fixed;
-  z-index: 10050;
-  visibility: hidden;
-  opacity: 0;
-  pointer-events: none;
-  background-color: var(--tooltip-bg, #222);
-  color: var(--tooltip-text, #fff);
-  text-align: center;
-  padding: 6px 10px;
-  border-radius: 6px;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 16px;
-  white-space: nowrap;
-  max-width: min(280px, 90vw);
-  transition: opacity 0.15s ease;
-}
-
-.qbs-table-tooltip-floating.tooltiptext.is-positioned {
-  visibility: visible;
-  opacity: 1;
-}
-
-.qbs-table-tooltip-floating.tooltiptext::after {
-  content: '';
-  position: absolute;
-  left: var(--tooltip-arrow-offset, 50%);
-  translate: -50% 0;
-  border: 5px solid transparent;
-}
-
-.qbs-table-tooltip-floating--down.tooltiptext::after {
-  bottom: 100%;
-  border-bottom-color: var(--tooltip-bg, #222);
-}
-
-.qbs-table-tooltip-floating--up.tooltiptext::after {
-  top: 100%;
-  border-top-color: var(--tooltip-bg, #222);
+.qbs-table-tooltip.down .tooltiptext {
+  top: 145% !important;
+  right: -10px !important;
+  left: auto !important;
 }
 .rs-table-row {
   overflow: visible !important;
@@ -879,8 +747,8 @@
 .qbs-table-top-icons {
   color: #999696;
 
-  .active {
-    color: #ec6a17;
+  .active{
+    color: #EC6A17;
   }
 }
 .qbs-card-empty-wrapper {
@@ -889,4 +757,4 @@
   align-items: center;
   height: 100%;
   width: 100%;
-}
+}

package/lib/qbsTable/CustomTableCell.js

@@ -10,7 +10,6 @@ var _reactRouterDom = require("react-router-dom");
 var _Cell = _interopRequireDefault(require("../Cell"));
 var _handleFormatCell = require("./utilities/handleFormatCell");
 var _menuDropDown = _interopRequireDefault(require("./utilities/menuDropDown"));
-var _VerticalDropDownMenu = _interopRequireDefault(require("./utilities/VerticalDropDownMenu"));
 var _excluded = ["rowData", "onChange", "checkedKeys", "dataKey", "dataTheme"],
   _excluded2 = ["rowData", "dataKey", "expandedRowKeys", "onChange"],
   _excluded3 = ["rowData", "renderCell", "toolTip", "hideLink", "dataKey", "onChange", "rowClick", "type", "path", "link"],
@@ -62,18 +61,8 @@ var ActionCell = /*#__PURE__*/_react["default"].memo(function (_ref2) {
     dataTheme = _ref2.dataTheme,
     actionProps = _ref2.actionProps,
     tableBodyRef = _ref2.tableBodyRef,
-    rowIndex = _ref2.rowIndex,
-    dropType = _ref2.dropType,
-    wheelWrapperRef = _ref2.wheelWrapperRef;
-  return /*#__PURE__*/_react["default"].createElement("div", null, dropType == 'vertical' ? /*#__PURE__*/_react["default"].createElement(_VerticalDropDownMenu["default"], {
-    tableBodyRef: tableBodyRef,
-    actionDropDown: actionProps,
-    rowData: rowData,
-    dataTheme: dataTheme,
-    rowIndex: rowIndex,
-    handleMenuActions: handleMenuActions,
-    wheelWrapperRef: wheelWrapperRef
-  }) : /*#__PURE__*/_react["default"].createElement(_menuDropDown["default"], {
+    rowIndex = _ref2.rowIndex;
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_menuDropDown["default"], {
     tableBodyRef: tableBodyRef,
     actionDropDown: actionProps,
     rowData: rowData,