qbs-react-grid 2.2.12 → 2.2.14

package/es/less/qbs-table.less

@@ -408,36 +408,34 @@
 }
 
 .qbs-table-column-popup {
-  position: absolute;
-  top: calc(100% + 4px);
-  inset-inline-end: 0;
-  inset-inline-start: auto;
+  position: fixed;
   padding: 8px;
   z-index: 10060;
   border-radius: 8px;
   background: #fff;
+  border: 1px solid #e5e7eb;
   box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
-  min-width: 300px;
+  min-width: 360px;
   width: max-content;
-  max-width: min(400px, calc(100vw - 16px));
+  max-width: min(480px, calc(100vw - 16px));
   gap: 4px;
   display: flex;
   flex-direction: column;
   max-height: 500px;
 }
 .qbs-table-popup-container {
-  max-width: 400px;
+  min-width: 100%;
+  max-width: 480px;
   overflow-y: auto;
 }
 
 .qbs-table-container {
   padding: 8px 4px;
-  white-space: nowrap;
   width: 100%;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 8px;
+  justify-content: flex-start;
+  gap: 12px;
 }
 
 .qbs-table-columns-container {
@@ -458,6 +456,14 @@
   text-align: right;
 }
 
+.qbs-table-column-popup--rtl .qbs-table-columns-container {
+  flex-direction: row;
+}
+
+.qbs-table-column-popup--rtl .qbs-table-container {
+  flex-direction: row;
+}
+
 .qbs-table-column-popup--rtl .qbs-table-popup-footer {
   flex-direction: row-reverse;
 }
@@ -480,6 +486,7 @@
 
 .qbs-table-columns-drag-icon {
   cursor: grab;
+  flex: 0 0 16px;
   margin-right: 0;
 }
 
@@ -511,6 +518,11 @@
   }
 }
 
+.qbs-table-container .qbs-table-checkbox {
+  flex: 0 0 24px;
+  min-width: 24px;
+}
+
 .qbs-table-checkbox {
   position: relative;
   display: flex;
@@ -598,8 +610,12 @@
 
 .qbs-table-container .qbs-table-popup-value {
   padding: 0;
-  flex: 1;
-  margin-left: 8px;
+  flex: 1 1 0;
+  min-width: 0;
+  margin-inline-start: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   transition: all 0.2s ease;
 }
 .qbs-table-container:hover .qbs-table-popup-value,
@@ -610,11 +626,20 @@
 
 .qbs-table-container .qbs-table-popup-label {
   padding: 0;
-  flex: 1;
-  margin-left: 8px;
+  flex: 1 1 0;
+  min-width: 0;
+  margin-inline-start: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   transition: all 0.2s ease;
 }
 
+.qbs-table-column-popup--rtl .qbs-table-container .qbs-table-popup-value,
+.qbs-table-column-popup--rtl .qbs-table-container .qbs-table-popup-label {
+  text-align: right;
+}
+
 .qbs-table-reset-link {
   padding: 8px;
   font-size: 14px;

package/es/qbsTable/utilities/ColumShowHide.js

@@ -1,8 +1,10 @@
 import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
 import { mergeQbsTableLabels } from '../labels';
 import { closeOtherColumnToggles, COLUMN_TOGGLE_CLOSE_OTHERS } from './columnToggleCoordinator';
 import { SettingsIcon } from './icons';
 var ColumnToggle = function ColumnToggle(_ref) {
+  var _document$getElementB;
   var columns = _ref.columns,
     onToggle = _ref.onToggle,
     onReorder = _ref.onReorder,
@@ -21,9 +23,39 @@ var ColumnToggle = function ColumnToggle(_ref) {
     draggedItem = _useState[0],
     setDraggedItem = _useState[1];
   var popupRef = useRef(null);
+  var settingsBtnRef = useRef(null);
   var _useState2 = useState(),
     dragOverPosition = _useState2[0],
     setDragOverPosition = _useState2[1];
+  var _useState3 = useState({
+      top: 0,
+      left: 0
+    }),
+    position = _useState3[0],
+    setPosition = _useState3[1];
+  var updatePopupPosition = useCallback(function () {
+    var _popupRef$current, _popupRef$current2;
+    if (!settingsBtnRef.current) return;
+    var rect = settingsBtnRef.current.getBoundingClientRect();
+    var viewportPadding = 8;
+    var popupWidth = ((_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : _popupRef$current.offsetWidth) || 360;
+    var popupHeight = ((_popupRef$current2 = popupRef.current) === null || _popupRef$current2 === void 0 ? void 0 : _popupRef$current2.offsetHeight) || 320;
+    var left = rtl ? rect.left : rect.right - popupWidth;
+    if (left + popupWidth > window.innerWidth - viewportPadding) {
+      left = Math.max(viewportPadding, window.innerWidth - popupWidth - viewportPadding);
+    }
+    if (left < viewportPadding) {
+      left = viewportPadding;
+    }
+    var top = rect.bottom + 4;
+    if (top + popupHeight > window.innerHeight - viewportPadding) {
+      top = Math.max(viewportPadding, rect.top - popupHeight - 4);
+    }
+    setPosition({
+      top: top,
+      left: left
+    });
+  }, [rtl]);
   useEffect(function () {
     var handleCloseOthers = function handleCloseOthers(event) {
       var detail = event.detail;
@@ -60,20 +92,29 @@ var ColumnToggle = function ColumnToggle(_ref) {
     setDraggedItem(null);
   }, [columns, draggedItem, onReorder]);
   var handleClickOutside = useCallback(function (event) {
-    var _popupRef$current;
+    var _popupRef$current3, _settingsBtnRef$curre;
     var target = event.target;
-    if ((_popupRef$current = popupRef.current) !== null && _popupRef$current !== void 0 && _popupRef$current.contains(target)) {
+    if ((_popupRef$current3 = popupRef.current) !== null && _popupRef$current3 !== void 0 && _popupRef$current3.contains(target) || (_settingsBtnRef$curre = settingsBtnRef.current) !== null && _settingsBtnRef$curre !== void 0 && _settingsBtnRef$curre.contains(target)) {
       return;
     }
     setIsOpen(false);
   }, [setIsOpen]);
   useEffect(function () {
     if (!isOpen) return;
+    updatePopupPosition();
+    var frame = requestAnimationFrame(function () {
+      return updatePopupPosition();
+    });
     document.addEventListener('mousedown', handleClickOutside);
+    window.addEventListener('resize', updatePopupPosition);
+    window.addEventListener('scroll', updatePopupPosition, true);
     return function () {
-      return document.removeEventListener('mousedown', handleClickOutside);
+      cancelAnimationFrame(frame);
+      document.removeEventListener('mousedown', handleClickOutside);
+      window.removeEventListener('resize', updatePopupPosition);
+      window.removeEventListener('scroll', updatePopupPosition, true);
     };
-  }, [handleClickOutside, isOpen]);
+  }, [handleClickOutside, isOpen, updatePopupPosition]);
   var renderFixedColumn = function renderFixedColumn(column, index) {
     return /*#__PURE__*/React.createElement("div", {
       key: column.title,
@@ -171,23 +212,15 @@ var ColumnToggle = function ColumnToggle(_ref) {
     setIsOpen(false);
     handleColumnToggle === null || handleColumnToggle === void 0 ? void 0 : handleColumnToggle(columns);
   };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "qbs-table-settings-wrapper"
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: function onClick(event) {
-      event.stopPropagation();
-      if (isOpen) {
-        setIsOpen(false);
-        return;
-      }
-      closeOtherColumnToggles(toggleId);
-      setIsOpen(true);
-    }
-  }, /*#__PURE__*/React.createElement(SettingsIcon, null)), isOpen && /*#__PURE__*/React.createElement("div", {
+  var portalTarget = (_document$getElementB = document.getElementById('portal-root')) != null ? _document$getElementB : document.body;
+  var popupContent = /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-column-popup" + (rtl ? ' qbs-table-column-popup--rtl' : ''),
     style: {
-      maxHeight: tableHeight - 40
+      position: 'fixed',
+      top: position.top,
+      left: position.left,
+      maxHeight: Math.min(tableHeight - 40, window.innerHeight - position.top - 16),
+      zIndex: 10060
     },
     ref: popupRef,
     dir: rtl ? 'rtl' : 'ltr'
@@ -243,6 +276,22 @@ var ColumnToggle = function ColumnToggle(_ref) {
     onClick: function onClick() {
       return handleColToggle();
     }
-  }, labels.save)))));
+  }, labels.save))));
+  return /*#__PURE__*/React.createElement("div", {
+    className: "qbs-table-settings-wrapper"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    ref: settingsBtnRef,
+    onClick: function onClick(event) {
+      event.stopPropagation();
+      if (isOpen) {
+        setIsOpen(false);
+        return;
+      }
+      closeOtherColumnToggles(toggleId);
+      updatePopupPosition();
+      setIsOpen(true);
+    }
+  }, /*#__PURE__*/React.createElement(SettingsIcon, null)), isOpen && portalTarget && /*#__PURE__*/ReactDOM.createPortal(popupContent, portalTarget));
 };
 export default ColumnToggle;

package/lib/less/qbs-table.less

@@ -408,36 +408,34 @@
 }
 
 .qbs-table-column-popup {
-  position: absolute;
-  top: calc(100% + 4px);
-  inset-inline-end: 0;
-  inset-inline-start: auto;
+  position: fixed;
   padding: 8px;
   z-index: 10060;
   border-radius: 8px;
   background: #fff;
+  border: 1px solid #e5e7eb;
   box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
-  min-width: 300px;
+  min-width: 360px;
   width: max-content;
-  max-width: min(400px, calc(100vw - 16px));
+  max-width: min(480px, calc(100vw - 16px));
   gap: 4px;
   display: flex;
   flex-direction: column;
   max-height: 500px;
 }
 .qbs-table-popup-container {
-  max-width: 400px;
+  min-width: 100%;
+  max-width: 480px;
   overflow-y: auto;
 }
 
 .qbs-table-container {
   padding: 8px 4px;
-  white-space: nowrap;
   width: 100%;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 8px;
+  justify-content: flex-start;
+  gap: 12px;
 }
 
 .qbs-table-columns-container {
@@ -458,6 +456,14 @@
   text-align: right;
 }
 
+.qbs-table-column-popup--rtl .qbs-table-columns-container {
+  flex-direction: row;
+}
+
+.qbs-table-column-popup--rtl .qbs-table-container {
+  flex-direction: row;
+}
+
 .qbs-table-column-popup--rtl .qbs-table-popup-footer {
   flex-direction: row-reverse;
 }
@@ -480,6 +486,7 @@
 
 .qbs-table-columns-drag-icon {
   cursor: grab;
+  flex: 0 0 16px;
   margin-right: 0;
 }
 
@@ -511,6 +518,11 @@
   }
 }
 
+.qbs-table-container .qbs-table-checkbox {
+  flex: 0 0 24px;
+  min-width: 24px;
+}
+
 .qbs-table-checkbox {
   position: relative;
   display: flex;
@@ -598,8 +610,12 @@
 
 .qbs-table-container .qbs-table-popup-value {
   padding: 0;
-  flex: 1;
-  margin-left: 8px;
+  flex: 1 1 0;
+  min-width: 0;
+  margin-inline-start: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   transition: all 0.2s ease;
 }
 .qbs-table-container:hover .qbs-table-popup-value,
@@ -610,11 +626,20 @@
 
 .qbs-table-container .qbs-table-popup-label {
   padding: 0;
-  flex: 1;
-  margin-left: 8px;
+  flex: 1 1 0;
+  min-width: 0;
+  margin-inline-start: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   transition: all 0.2s ease;
 }
 
+.qbs-table-column-popup--rtl .qbs-table-container .qbs-table-popup-value,
+.qbs-table-column-popup--rtl .qbs-table-container .qbs-table-popup-label {
+  text-align: right;
+}
+
 .qbs-table-reset-link {
   padding: 8px;
   font-size: 14px;

package/lib/qbsTable/utilities/ColumShowHide.js

@@ -1,14 +1,17 @@
 "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"));
 var _labels = require("../labels");
 var _columnToggleCoordinator = require("./columnToggleCoordinator");
 var _icons = require("./icons");
 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; }
 var ColumnToggle = function ColumnToggle(_ref) {
+  var _document$getElementB;
   var columns = _ref.columns,
     onToggle = _ref.onToggle,
     onReorder = _ref.onReorder,
@@ -27,9 +30,39 @@ var ColumnToggle = function ColumnToggle(_ref) {
     draggedItem = _useState[0],
     setDraggedItem = _useState[1];
   var popupRef = (0, _react.useRef)(null);
+  var settingsBtnRef = (0, _react.useRef)(null);
   var _useState2 = (0, _react.useState)(),
     dragOverPosition = _useState2[0],
     setDragOverPosition = _useState2[1];
+  var _useState3 = (0, _react.useState)({
+      top: 0,
+      left: 0
+    }),
+    position = _useState3[0],
+    setPosition = _useState3[1];
+  var updatePopupPosition = (0, _react.useCallback)(function () {
+    var _popupRef$current, _popupRef$current2;
+    if (!settingsBtnRef.current) return;
+    var rect = settingsBtnRef.current.getBoundingClientRect();
+    var viewportPadding = 8;
+    var popupWidth = ((_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : _popupRef$current.offsetWidth) || 360;
+    var popupHeight = ((_popupRef$current2 = popupRef.current) === null || _popupRef$current2 === void 0 ? void 0 : _popupRef$current2.offsetHeight) || 320;
+    var left = rtl ? rect.left : rect.right - popupWidth;
+    if (left + popupWidth > window.innerWidth - viewportPadding) {
+      left = Math.max(viewportPadding, window.innerWidth - popupWidth - viewportPadding);
+    }
+    if (left < viewportPadding) {
+      left = viewportPadding;
+    }
+    var top = rect.bottom + 4;
+    if (top + popupHeight > window.innerHeight - viewportPadding) {
+      top = Math.max(viewportPadding, rect.top - popupHeight - 4);
+    }
+    setPosition({
+      top: top,
+      left: left
+    });
+  }, [rtl]);
   (0, _react.useEffect)(function () {
     var handleCloseOthers = function handleCloseOthers(event) {
       var detail = event.detail;
@@ -66,20 +99,29 @@ var ColumnToggle = function ColumnToggle(_ref) {
     setDraggedItem(null);
   }, [columns, draggedItem, onReorder]);
   var handleClickOutside = (0, _react.useCallback)(function (event) {
-    var _popupRef$current;
+    var _popupRef$current3, _settingsBtnRef$curre;
     var target = event.target;
-    if ((_popupRef$current = popupRef.current) !== null && _popupRef$current !== void 0 && _popupRef$current.contains(target)) {
+    if ((_popupRef$current3 = popupRef.current) !== null && _popupRef$current3 !== void 0 && _popupRef$current3.contains(target) || (_settingsBtnRef$curre = settingsBtnRef.current) !== null && _settingsBtnRef$curre !== void 0 && _settingsBtnRef$curre.contains(target)) {
       return;
     }
     setIsOpen(false);
   }, [setIsOpen]);
   (0, _react.useEffect)(function () {
     if (!isOpen) return;
+    updatePopupPosition();
+    var frame = requestAnimationFrame(function () {
+      return updatePopupPosition();
+    });
     document.addEventListener('mousedown', handleClickOutside);
+    window.addEventListener('resize', updatePopupPosition);
+    window.addEventListener('scroll', updatePopupPosition, true);
     return function () {
-      return document.removeEventListener('mousedown', handleClickOutside);
+      cancelAnimationFrame(frame);
+      document.removeEventListener('mousedown', handleClickOutside);
+      window.removeEventListener('resize', updatePopupPosition);
+      window.removeEventListener('scroll', updatePopupPosition, true);
     };
-  }, [handleClickOutside, isOpen]);
+  }, [handleClickOutside, isOpen, updatePopupPosition]);
   var renderFixedColumn = function renderFixedColumn(column, index) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       key: column.title,
@@ -177,23 +219,15 @@ var ColumnToggle = function ColumnToggle(_ref) {
     setIsOpen(false);
     handleColumnToggle === null || handleColumnToggle === void 0 ? void 0 : handleColumnToggle(columns);
   };
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "qbs-table-settings-wrapper"
-  }, /*#__PURE__*/_react["default"].createElement("button", {
-    type: "button",
-    onClick: function onClick(event) {
-      event.stopPropagation();
-      if (isOpen) {
-        setIsOpen(false);
-        return;
-      }
-      (0, _columnToggleCoordinator.closeOtherColumnToggles)(toggleId);
-      setIsOpen(true);
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_icons.SettingsIcon, null)), isOpen && /*#__PURE__*/_react["default"].createElement("div", {
+  var portalTarget = (_document$getElementB = document.getElementById('portal-root')) != null ? _document$getElementB : document.body;
+  var popupContent = /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-column-popup" + (rtl ? ' qbs-table-column-popup--rtl' : ''),
     style: {
-      maxHeight: tableHeight - 40
+      position: 'fixed',
+      top: position.top,
+      left: position.left,
+      maxHeight: Math.min(tableHeight - 40, window.innerHeight - position.top - 16),
+      zIndex: 10060
     },
     ref: popupRef,
     dir: rtl ? 'rtl' : 'ltr'
@@ -249,7 +283,23 @@ var ColumnToggle = function ColumnToggle(_ref) {
     onClick: function onClick() {
       return handleColToggle();
     }
-  }, labels.save)))));
+  }, labels.save))));
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "qbs-table-settings-wrapper"
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    ref: settingsBtnRef,
+    onClick: function onClick(event) {
+      event.stopPropagation();
+      if (isOpen) {
+        setIsOpen(false);
+        return;
+      }
+      (0, _columnToggleCoordinator.closeOtherColumnToggles)(toggleId);
+      updatePopupPosition();
+      setIsOpen(true);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_icons.SettingsIcon, null)), isOpen && portalTarget && /*#__PURE__*/_reactDom["default"].createPortal(popupContent, portalTarget));
 };
 var _default = ColumnToggle;
 exports["default"] = _default;

package/package.json

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

package/src/less/qbs-table.less

@@ -408,36 +408,34 @@
 }
 
 .qbs-table-column-popup {
-  position: absolute;
-  top: calc(100% + 4px);
-  inset-inline-end: 0;
-  inset-inline-start: auto;
+  position: fixed;
   padding: 8px;
   z-index: 10060;
   border-radius: 8px;
   background: #fff;
+  border: 1px solid #e5e7eb;
   box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
-  min-width: 300px;
+  min-width: 360px;
   width: max-content;
-  max-width: min(400px, calc(100vw - 16px));
+  max-width: min(480px, calc(100vw - 16px));
   gap: 4px;
   display: flex;
   flex-direction: column;
   max-height: 500px;
 }
 .qbs-table-popup-container {
-  max-width: 400px;
+  min-width: 100%;
+  max-width: 480px;
   overflow-y: auto;
 }
 
 .qbs-table-container {
   padding: 8px 4px;
-  white-space: nowrap;
   width: 100%;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 8px;
+  justify-content: flex-start;
+  gap: 12px;
 }
 
 .qbs-table-columns-container {
@@ -458,6 +456,14 @@
   text-align: right;
 }
 
+.qbs-table-column-popup--rtl .qbs-table-columns-container {
+  flex-direction: row;
+}
+
+.qbs-table-column-popup--rtl .qbs-table-container {
+  flex-direction: row;
+}
+
 .qbs-table-column-popup--rtl .qbs-table-popup-footer {
   flex-direction: row-reverse;
 }
@@ -480,6 +486,7 @@
 
 .qbs-table-columns-drag-icon {
   cursor: grab;
+  flex: 0 0 16px;
   margin-right: 0;
 }
 
@@ -511,6 +518,11 @@
   }
 }
 
+.qbs-table-container .qbs-table-checkbox {
+  flex: 0 0 24px;
+  min-width: 24px;
+}
+
 .qbs-table-checkbox {
   position: relative;
   display: flex;
@@ -598,8 +610,12 @@
 
 .qbs-table-container .qbs-table-popup-value {
   padding: 0;
-  flex: 1;
-  margin-left: 8px;
+  flex: 1 1 0;
+  min-width: 0;
+  margin-inline-start: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   transition: all 0.2s ease;
 }
 .qbs-table-container:hover .qbs-table-popup-value,
@@ -610,11 +626,20 @@
 
 .qbs-table-container .qbs-table-popup-label {
   padding: 0;
-  flex: 1;
-  margin-left: 8px;
+  flex: 1 1 0;
+  min-width: 0;
+  margin-inline-start: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   transition: all 0.2s ease;
 }
 
+.qbs-table-column-popup--rtl .qbs-table-container .qbs-table-popup-value,
+.qbs-table-column-popup--rtl .qbs-table-container .qbs-table-popup-label {
+  text-align: right;
+}
+
 .qbs-table-reset-link {
   padding: 8px;
   font-size: 14px;