qbs-react-grid 2.2.1 → 2.2.3

package/lib/qbsTable/utilities/ToolTip.js

@@ -1,95 +1,125 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-// import React, { useRef, useState } from 'react';
-
-// const TooltipComponent: React.FC<any> = ({ title, children, tableBodyRef }) => {
-//   const [dropdownPosition, setDropdownPosition] = useState('bottom-position');
-//   const dropRef = useRef(null);
-//   const menuButtonRef = useRef<HTMLElement>(null);
-//   const adjustDropdownPosition = () => {
-//     if (menuButtonRef.current && tableBodyRef?.current) {
-//       const inputBoxRect = menuButtonRef.current?.getBoundingClientRect();
-//       const tableRect = tableBodyRef.current.getBoundingClientRect();
-//       // Calculate positions relative to the table
-//       const spaceAbove = inputBoxRect.top - tableRect.top;
-//       const spaceBelow = tableRect.bottom - inputBoxRect.bottom;
-
-//       if (spaceAbove > spaceBelow) {
-//         setDropdownPosition('top-position');
-//       } else {
-//         setDropdownPosition('bottom-position');
-//       }
-//     }
-//   };
-
-//   return (
-//     <div className={`qbs-table-tooltip ${dropdownPosition == 'bottom-position' ? 'down' : 'up'} `}>
-//       <span
-//         ref={menuButtonRef}
-//         style={{ display: 'flex' }}
-//         onMouseEnter={() => adjustDropdownPosition()}
-//       >
-//         {children}
-//       </span>
-//       <span ref={dropRef} className={'tooltiptext'}>
-//         {title}
-//       </span>
-//     </div>
-//   );
-// };
-
-// export default TooltipComponent;
-
+var VIEWPORT_PADDING = 8;
+var TOOLTIP_GAP = 8;
 var TooltipComponent = function TooltipComponent(_ref) {
   var title = _ref.title,
     children = _ref.children,
-    tableBodyRef = _ref.tableBodyRef;
-  var _useState = (0, _react.useState)('down'),
-    dropdownPosition = _useState[0],
-    setDropdownPosition = _useState[1];
-  var menuButtonRef = (0, _react.useRef)(null);
-  var adjustDropdownPosition = function adjustDropdownPosition() {
-    if (menuButtonRef.current && tableBodyRef !== null && tableBodyRef !== void 0 && tableBodyRef.current) {
-      var triggerRect = menuButtonRef.current.getBoundingClientRect();
-      var tableRect = tableBodyRef.current.getBoundingClientRect();
-      var spaceAbove = triggerRect.top - tableRect.top;
-      var spaceBelow = tableRect.bottom - triggerRect.bottom;
-      setDropdownPosition(spaceAbove > spaceBelow ? 'up' : 'down');
+    tableBodyRef = _ref.tableBodyRef,
+    _ref$enabled = _ref.enabled,
+    enabled = _ref$enabled === void 0 ? true : _ref$enabled;
+  var _useState = (0, _react.useState)(false),
+    visible = _useState[0],
+    setVisible = _useState[1];
+  var _useState2 = (0, _react.useState)(false),
+    positioned = _useState2[0],
+    setPositioned = _useState2[1];
+  var _useState3 = (0, _react.useState)('down'),
+    placement = _useState3[0],
+    setPlacement = _useState3[1];
+  var _useState4 = (0, _react.useState)({
+      top: 0,
+      left: 0
+    }),
+    coords = _useState4[0],
+    setCoords = _useState4[1];
+  var _useState5 = (0, _react.useState)(0),
+    arrowOffset = _useState5[0],
+    setArrowOffset = _useState5[1];
+  var triggerRef = (0, _react.useRef)(null);
+  var tooltipRef = (0, _react.useRef)(null);
+  var updatePosition = (0, _react.useCallback)(function () {
+    var _tableBodyRef$current, _tableBodyRef$current2, _trigger$closest;
+    var trigger = triggerRef.current;
+    var tooltip = tooltipRef.current;
+    if (!trigger || !tooltip) {
+      return;
     }
+    var triggerRect = trigger.getBoundingClientRect();
+    var tooltipRect = tooltip.getBoundingClientRect();
+    var boundaryRect = (_tableBodyRef$current = tableBodyRef === null || tableBodyRef === void 0 ? void 0 : (_tableBodyRef$current2 = tableBodyRef.current) === null || _tableBodyRef$current2 === void 0 ? void 0 : _tableBodyRef$current2.getBoundingClientRect()) != null ? _tableBodyRef$current : (_trigger$closest = trigger.closest('.qbs-table')) === null || _trigger$closest === void 0 ? void 0 : _trigger$closest.getBoundingClientRect();
+    var spaceAbove = boundaryRect ? triggerRect.top - boundaryRect.top : triggerRect.top;
+    var spaceBelow = boundaryRect ? boundaryRect.bottom - triggerRect.bottom : window.innerHeight - triggerRect.bottom;
+    var nextPlacement = spaceBelow >= tooltipRect.height + TOOLTIP_GAP || spaceBelow >= spaceAbove ? 'down' : 'up';
+    var triggerCenter = triggerRect.left + triggerRect.width / 2;
+    var left = triggerCenter - tooltipRect.width / 2;
+    if (left < VIEWPORT_PADDING) {
+      left = VIEWPORT_PADDING;
+    } else if (left + tooltipRect.width > window.innerWidth - VIEWPORT_PADDING) {
+      left = window.innerWidth - VIEWPORT_PADDING - tooltipRect.width;
+    }
+    var top = nextPlacement === 'down' ? triggerRect.bottom + TOOLTIP_GAP : triggerRect.top - tooltipRect.height - TOOLTIP_GAP;
+    setPlacement(nextPlacement);
+    setCoords({
+      top: top,
+      left: left
+    });
+    setArrowOffset(triggerCenter - left);
+    setPositioned(true);
+  }, [tableBodyRef]);
+  var showTooltip = function showTooltip() {
+    setPositioned(false);
+    setVisible(true);
+  };
+  var hideTooltip = function hideTooltip() {
+    setVisible(false);
+    setPositioned(false);
   };
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "qbs-table-tooltip " + dropdownPosition,
-    onMouseEnter: adjustDropdownPosition,
-    onMouseLeave: function onMouseLeave() {
-      var _menuButtonRef$curren;
-      var tooltip = menuButtonRef === null || menuButtonRef === void 0 ? void 0 : (_menuButtonRef$curren = menuButtonRef.current) === null || _menuButtonRef$curren === void 0 ? void 0 : _menuButtonRef$curren.querySelector('.tooltiptext');
-      if (tooltip) {
-        tooltip.style.visibility = 'hidden';
-        tooltip.style.opacity = '0';
-      }
+  (0, _react.useLayoutEffect)(function () {
+    if (!visible) {
+      return;
     }
-  }, /*#__PURE__*/_react["default"].createElement("span", {
-    ref: menuButtonRef,
+    updatePosition();
+    var frame = window.requestAnimationFrame(updatePosition);
+    return function () {
+      return window.cancelAnimationFrame(frame);
+    };
+  }, [visible, title, updatePosition]);
+  (0, _react.useEffect)(function () {
+    if (!visible) {
+      return;
+    }
+    var handleReposition = function handleReposition() {
+      return updatePosition();
+    };
+    window.addEventListener('resize', handleReposition);
+    window.addEventListener('scroll', handleReposition, true);
+    return function () {
+      window.removeEventListener('resize', handleReposition);
+      window.removeEventListener('scroll', handleReposition, true);
+    };
+  }, [visible, updatePosition]);
+  if (!title || enabled === false) {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);
+  }
+  var portalRoot = typeof document !== 'undefined' ? document.body : null;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
+    ref: triggerRef,
+    className: "qbs-table-tooltip-trigger",
     style: {
-      display: 'flex'
+      display: 'inline-flex'
     },
-    onMouseEnter: function onMouseEnter() {
-      var _menuButtonRef$curren2;
-      adjustDropdownPosition();
-      var tooltip = menuButtonRef === null || menuButtonRef === void 0 ? void 0 : (_menuButtonRef$curren2 = menuButtonRef.current) === null || _menuButtonRef$curren2 === void 0 ? void 0 : _menuButtonRef$curren2.querySelector('.tooltiptext');
-      if (tooltip) {
-        tooltip.style.visibility = 'visible';
-        tooltip.style.opacity = '1';
-      }
+    onMouseEnter: showTooltip,
+    onMouseLeave: hideTooltip,
+    onFocus: showTooltip,
+    onBlur: hideTooltip
+  }, children), visible && portalRoot && /*#__PURE__*/_reactDom["default"].createPortal(/*#__PURE__*/_react["default"].createElement("span", {
+    ref: tooltipRef,
+    role: "tooltip",
+    className: "qbs-table-tooltip-floating tooltiptext qbs-table-tooltip-floating--" + placement + " " + (positioned ? 'is-positioned' : ''),
+    style: {
+      top: coords.top,
+      left: coords.left,
+      '--tooltip-arrow-offset': arrowOffset + "px"
     }
-  }, children, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "tooltiptext"
-  }, title)));
+  }, title), portalRoot));
 };
 var _default = TooltipComponent;
 exports["default"] = _default;

package/lib/qbsTable/utilities/VerticalDropDownMenu.js

@@ -130,7 +130,7 @@ var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
   };
   var portalTarget = document.getElementById('portal-root');
   var dropdownContent = /*#__PURE__*/_react["default"].createElement("div", {
-    className: "absolute z-50 min-w-48 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 vertical-menu-dropdown-content",
+    className: "absolute z-[60] min-w-48 rounded-md vertical-menu-dropdown-content",
     ref: menuRef,
     style: {
       width: 200,
@@ -144,7 +144,7 @@ var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
     var _item$hide3;
     return !(item !== null && item !== void 0 && item.hidden) && !(item !== null && item !== void 0 && (_item$hide3 = item.hide) !== null && _item$hide3 !== void 0 && _item$hide3.call(item, rowData, rowIndex)) ? /*#__PURE__*/_react["default"].createElement("div", {
       key: item.title,
-      className: "vertical-menu-item px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer flex items-center gap-2 transition-colors",
+      className: "vertical-menu-item px-4 py-2 text-sm text-base-black hover:bg-gray-light-1 cursor-pointer flex items-center gap-2 transition-colors",
       onClick: function onClick(e) {
         var _item$action;
         e.preventDefault();
@@ -165,7 +165,7 @@ var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
     className: "inline-block vertical-menu-dropdown-wrapper"
   }, handleShowHideMenu() > 0 && /*#__PURE__*/_react["default"].createElement("button", {
-    className: "vertical-menu-trigger-button p-2 rounded hover:bg-gray-100 transition-colors",
+    className: "vertical-menu-trigger-button p-2 rounded text-base-gray hover:bg-gray-light-1 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
     onClick: toggleMenu,
     ref: menuButtonRef
   }, /*#__PURE__*/_react["default"].createElement(_icons.ThreeDotIcon, null))), openMenu && portalTarget && /*#__PURE__*/_reactDom["default"].createPortal(dropdownContent, portalTarget));

package/lib/qbsTable/utilities/icons.js

@@ -13,7 +13,7 @@ var ThreeDotIcon = function ThreeDotIcon() {
     xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/_react["default"].createElement("path", {
     d: "M2 2.16665L2 2.17498M2 7.99998L2 8.00831M2 13.8333L2 13.8416M2 2.99998C1.53976 2.99998 1.16667 2.62688 1.16667 2.16665C1.16667 1.70641 1.53976 1.33331 2 1.33331C2.46024 1.33331 2.83333 1.70641 2.83333 2.16665C2.83333 2.62688 2.46024 2.99998 2 2.99998ZM2 8.83331C1.53976 8.83331 1.16667 8.46022 1.16667 7.99998C1.16667 7.53974 1.53976 7.16665 2 7.16665C2.46024 7.16665 2.83333 7.53974 2.83333 7.99998C2.83333 8.46022 2.46024 8.83331 2 8.83331ZM2 14.6666C1.53976 14.6666 1.16666 14.2935 1.16666 13.8333C1.16666 13.3731 1.53976 13 2 13C2.46024 13 2.83333 13.3731 2.83333 13.8333C2.83333 14.2935 2.46024 14.6666 2 14.6666Z",
-    stroke: "#313131",
+    stroke: "currentColor",
     strokeWidth: "1.5",
     strokeLinecap: "round",
     strokeLinejoin: "round"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qbs-react-grid",
-  "version": "2.2.1",
+  "version": "2.2.3",
   "description": "A React table component",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",

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 #d6d8dc;
-  background: #fff;
+  border-top: 1px solid var(--base-gray-border, #d6d8dc);
+  background: var(--table-bg, #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 #d6d8dc;
-    background: #fff;
+    border: 1px solid var(--base-gray-border, #d6d8dc);
+    background: var(--gray-light-1, #fff);
   }
   .qbs-table-icon-container {
     padding: 0;
@@ -109,7 +109,7 @@
     font-style: normal;
     font-weight: 500;
     line-height: 20px;
-    color: #313131;
+    color: var(--gray-dark-3, #313131);
   }
 }
 
@@ -125,7 +125,7 @@
 .custom-select-trigger {
   padding: 2px 8px;
   cursor: pointer;
-  border: 1px solid #d6d8dc;
+  border: 1px solid var(--base-gray-border, #d6d8dc);
   border-radius: 4px;
   min-width: 65px;
   position: relative;
@@ -140,7 +140,7 @@
   list-style: none;
   margin: 2px 0 0;
   padding: 0;
-  background: #fff;
+  background: var(--gray-light-1, #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: #f0f0f0;
+  background-color: var(--table-row-hover-bg, #f0f0f0);
 }
 
 .custom-select-trigger:before {
@@ -167,7 +167,7 @@ ul.custom-select-options.top {
   right: 10px;
   top: 6px;
   font-weight: bold;
-  border: solid black;
+  border: solid var(--gray-dark-3, black);
   border-width: 0 1px 1px 0;
   display: inline-block;
   padding: 3px;

package/src/less/qbs-table.less

@@ -387,71 +387,98 @@
 .qbs-table-tooltip {
   cursor: pointer;
   position: relative;
-  width: auto;
-  display: flex;
+  display: inline-flex;
 }
 
 .qbs-table-tooltip .tooltiptext {
   visibility: hidden;
-  background-color: black;
-  color: white;
+  background-color: var(--tooltip-bg, #222);
+  color: var(--tooltip-text, #fff);
   text-align: center;
-  padding: 6px;
-  border-radius: 4px;
+  padding: 6px 10px;
+  border-radius: 6px;
   position: absolute;
-  z-index: 9999;
+  z-index: 10050;
   opacity: 0;
-  transition: opacity 0.3s;
+  transition: opacity 0.15s ease;
   font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
+  font-weight: 500;
   line-height: 16px;
-  min-width: 100px;
-  max-width: 200px;
+  white-space: nowrap;
+  max-width: min(280px, 90vw);
+  pointer-events: none;
+  inset-inline-start: 50%;
+  translate: -50% 0;
 }
 
 .qbs-table-tooltip.up .tooltiptext {
-  bottom: calc(100% + 10px);
-  right: -8px;
-  left: unset;
+  bottom: calc(100% + 8px);
+  top: auto;
 }
 
 .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;
-  border-width: 5px;
-  border-style: solid;
+  inset-inline-start: 50%;
+  translate: -50% 0;
+  border: 5px solid transparent;
 }
 
 .qbs-table-tooltip.up .tooltiptext::after {
-  border-color: black transparent transparent !important;
-  right: 12px !important;
-  margin-left: -5px !important;
-  top: 100% !important;
-  left: unset !important;
+  top: 100%;
+  border-top-color: var(--tooltip-bg, #222);
 }
 
 .qbs-table-tooltip.down .tooltiptext::after {
-  border-color: transparent transparent black;
-  bottom: 100% !important;
-  right: 12px !important;
-  margin-left: -5px !important;
-  left: unset !important;
+  bottom: 100%;
+  border-bottom-color: var(--tooltip-bg, #222);
 }
-.qbs-table-tooltip.down .tooltiptext {
-  top: 145% !important;
-  right: -10px !important;
-  left: auto !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);
 }
 .rs-table-row {
   overflow: visible !important;

package/src/qbsTable/utilities/CardMenuDropdown.tsx

@@ -81,7 +81,7 @@ const CardMenuDropdown: React.FC<Props> = ({
   return (
     <div className="dropdown text-black dark:text-white dark:bg-[#424242] bg-white" ref={menuRef}>
       <button className="dropdown-toggle" onClick={toggleMenu} ref={menuButtonRef}>
-        <TooltipComponent title={labels.actions} enabled={false} ref={menuButtonRef}>
+        <TooltipComponent title={labels.actions} enabled={false}>
           <ThreeDotIcon />
         </TooltipComponent>
       </button>