qbs-react-grid 2.2.4 → 2.2.6

package/src/customSelect.tsx

@@ -1,88 +1,88 @@
-import React, { FC, useState, useEffect, useRef } from 'react';
-
-type CustomSelectProps = {
-  options: number[];
-  selectedValue: number;
-  onChange: (value: number) => void;
-};
-
-const CustomSelect: FC<CustomSelectProps> = ({ options, selectedValue, onChange }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [dropdownPosition, setDropdownPosition] = useState('bottom');
-  const ref = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLDivElement>(null);
-
-  const adjustDropdownPosition = () => {
-    if (inputRef.current) {
-      const inputBoxRect = inputRef.current.getBoundingClientRect();
-      const viewportHeight = window.innerHeight;
-
-      const spaceAbove = inputBoxRect.top;
-      const spaceBelow = viewportHeight - inputBoxRect.bottom;
-
-      if (spaceAbove > spaceBelow) {
-        setDropdownPosition('top');
-      } else {
-        setDropdownPosition('bottom');
-      }
-    }
-  };
-
-  const handleToggle = () => {
-    setIsOpen(prevIsOpen => !prevIsOpen);
-  };
-
-  const handleSelect = (value: number) => {
-    onChange(value);
-    setIsOpen(false);
-  };
-
-  const handleClickOutside = (event: MouseEvent) => {
-    if (ref.current && !ref.current.contains(event.target as Node)) {
-      setIsOpen(false);
-    }
-  };
-
-  useEffect(() => {
-    if (isOpen) {
-      adjustDropdownPosition();
-      window.addEventListener('resize', adjustDropdownPosition);
-    } else {
-      window.removeEventListener('resize', adjustDropdownPosition);
-    }
-
-    return () => {
-      window.removeEventListener('resize', adjustDropdownPosition);
-    };
-  }, [isOpen]);
-
-  useEffect(() => {
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
-
-  return (
-    <div className="custom-select" ref={ref}>
-      <div className="custom-select-trigger" onClick={handleToggle} ref={inputRef}>
-        {selectedValue}
-      </div>
-      {isOpen && (
-        <ul className={`custom-select-options ${dropdownPosition}`}>
-          {options.map(option => (
-            <li
-              key={option}
-              className={`custom-select-option ${option === selectedValue ? 'selected' : ''}`}
-              onClick={() => handleSelect(option)}
-            >
-              {option}
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  );
-};
-
-export default CustomSelect;
+import React, { FC, useState, useEffect, useRef } from 'react';
+
+type CustomSelectProps = {
+  options: number[];
+  selectedValue: number;
+  onChange: (value: number) => void;
+};
+
+const CustomSelect: FC<CustomSelectProps> = ({ options, selectedValue, onChange }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [dropdownPosition, setDropdownPosition] = useState('bottom');
+  const ref = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLDivElement>(null);
+
+  const adjustDropdownPosition = () => {
+    if (inputRef.current) {
+      const inputBoxRect = inputRef.current.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+
+      const spaceAbove = inputBoxRect.top;
+      const spaceBelow = viewportHeight - inputBoxRect.bottom;
+
+      if (spaceAbove > spaceBelow) {
+        setDropdownPosition('top');
+      } else {
+        setDropdownPosition('bottom');
+      }
+    }
+  };
+
+  const handleToggle = () => {
+    setIsOpen(prevIsOpen => !prevIsOpen);
+  };
+
+  const handleSelect = (value: number) => {
+    onChange(value);
+    setIsOpen(false);
+  };
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (ref.current && !ref.current.contains(event.target as Node)) {
+      setIsOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      adjustDropdownPosition();
+      window.addEventListener('resize', adjustDropdownPosition);
+    } else {
+      window.removeEventListener('resize', adjustDropdownPosition);
+    }
+
+    return () => {
+      window.removeEventListener('resize', adjustDropdownPosition);
+    };
+  }, [isOpen]);
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div className="custom-select" ref={ref}>
+      <div className="custom-select-trigger" onClick={handleToggle} ref={inputRef}>
+        {selectedValue}
+      </div>
+      {isOpen && (
+        <ul className={`custom-select-options ${dropdownPosition}`}>
+          {options.map(option => (
+            <li
+              key={option}
+              className={`custom-select-option ${option === selectedValue ? 'selected' : ''}`}
+              onClick={() => handleSelect(option)}
+            >
+              {option}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default CustomSelect;

package/src/index.ts

@@ -11,7 +11,7 @@ export type { ColumnProps } from './Column';
 export type { CellProps } from './Cell';
 export type { HeaderCellProps } from './HeaderCell';
 export type { ColumnGroupProps } from './ColumnGroup';
-export type { QbsTableProps, QbsTableLabels } from './qbsTable/commontypes';
+export type { QbsTableProps } from './qbsTable/commontypes';
 export type {
   StandardProps,
   SortType,

package/src/less/pagination.less

@@ -5,8 +5,8 @@
   min-height: 40px;
   align-items: center;
   border-radius: 0 0 4px 4px;
-  border-top: 1px solid var(--base-gray-border, #d6d8dc);
-  background: var(--table-bg, #fff);
+  border-top: 1px solid #d6d8dc;
+  background: #fff;
   &-header {
     border-bottom: 1px solid #eee;
     position: absolute;
@@ -27,8 +27,8 @@
     font-weight: 500;
     line-height: 20px;
     border-radius: 6px;
-    border: 1px solid var(--base-gray-border, #d6d8dc);
-    background: var(--gray-light-1, #fff);
+    border: 1px solid #d6d8dc;
+    background: #fff;
   }
   .qbs-table-icon-container {
     padding: 0;
@@ -109,7 +109,7 @@
     font-style: normal;
     font-weight: 500;
     line-height: 20px;
-    color: var(--gray-dark-3, #313131);
+    color: #313131;
   }
 }
 
@@ -125,7 +125,7 @@
 .custom-select-trigger {
   padding: 2px 8px;
   cursor: pointer;
-  border: 1px solid var(--base-gray-border, #d6d8dc);
+  border: 1px solid #d6d8dc;
   border-radius: 4px;
   min-width: 65px;
   position: relative;
@@ -140,7 +140,7 @@
   list-style: none;
   margin: 2px 0 0;
   padding: 0;
-  background: var(--gray-light-1, #fff);
+  background: #fff;
   border-radius: 8px;
   box-shadow: 0 8px 20px 0 #00000026;
 }
@@ -158,7 +158,7 @@ ul.custom-select-options.top {
 
 .custom-select-option:hover,
 .custom-select-option.selected {
-  background-color: var(--table-row-hover-bg, #f0f0f0);
+  background-color: #f0f0f0;
 }
 
 .custom-select-trigger:before {
@@ -167,7 +167,7 @@ ul.custom-select-options.top {
   right: 10px;
   top: 6px;
   font-weight: bold;
-  border: solid var(--gray-dark-3, black);
+  border: solid black;
   border-width: 0 1px 1px 0;
   display: inline-block;
   padding: 3px;

package/src/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/src/qbsTable/CustomTableCell.tsx

@@ -46,33 +46,29 @@ export const ActionCell: React.FC<any> = React.memo(
     tableBodyRef,
     rowIndex,
     dropType,
-    wheelWrapperRef
-  }) => {
-    return (
-      <div>
-        {dropType == 'vertical' ? (
-          <VerticalMenuDropdown
-            tableBodyRef={tableBodyRef}
-            actionDropDown={actionProps}
-            rowData={rowData}
-            dataTheme={dataTheme}
-            rowIndex={rowIndex}
-            handleMenuActions={handleMenuActions}
-            wheelWrapperRef={wheelWrapperRef}
-          />
-        ) : (
-          <MenuDropDown
-            tableBodyRef={tableBodyRef}
-            actionDropDown={actionProps}
-            rowData={rowData}
-            dataTheme={dataTheme}
-            rowIndex={rowIndex}
-            handleMenuActions={handleMenuActions}
-          />
-        )}
-      </div>
-    );
-  }
+    ...props
+  }) => (
+    <Cell {...props} dataTheme={dataTheme} style={{ padding: 0 }}>
+      {dropType === 'vertical' ? (
+        <VerticalMenuDropdown
+          tableBodyRef={tableBodyRef}
+          actionDropDown={actionProps}
+          rowData={rowData}
+          rowIndex={rowIndex}
+          handleMenuActions={handleMenuActions}
+        />
+      ) : (
+        <MenuDropDown
+          tableBodyRef={tableBodyRef}
+          actionDropDown={actionProps}
+          rowData={rowData}
+          dataTheme={dataTheme}
+          rowIndex={rowIndex}
+          handleMenuActions={handleMenuActions}
+        />
+      )}
+    </Cell>
+  )
 );
 export const ExpandCell: React.FC<any> = React.memo(
   ({ rowData, dataKey, expandedRowKeys, onChange, ...props }) => (