qbs-react-grid 2.2.5 → 2.2.9

package/lib/qbsTable/labels.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.mergeQbsTableLabels = exports.formatSelectedItems = exports.defaultQbsTableLabels = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var defaultQbsTableLabels = {
+  search: 'Search',
+  searchAriaLabel: 'Search',
+  clear: 'Clear',
+  selectedItems: 'Selected items',
+  switchToDefaultView: 'Switch to Default View',
+  switchToRelaxedView: 'Switch to Relaxed View',
+  switchToFullScreen: 'Switch to Full Screen',
+  switchToTableView: 'Switch to Table View',
+  switchToCardView: 'Switch to Card View',
+  noDataFound: 'No Data Found',
+  showingRange: function showingRange(start, end, total) {
+    return "Showing " + start + " to " + end + " of " + total;
+  },
+  itemsPerPage: 'Items per page',
+  fixedColumns: 'FIXED COLUMNS',
+  visibleColumns: 'VISIBLE COLUMNS',
+  availableColumns: 'AVAILABLE COLUMNS',
+  resetToDefault: 'Reset to default',
+  save: 'Save',
+  viewMore: 'View More',
+  viewLess: 'View Less',
+  actions: 'Actions'
+};
+exports.defaultQbsTableLabels = defaultQbsTableLabels;
+var mergeQbsTableLabels = function mergeQbsTableLabels(overrides) {
+  return (0, _extends2["default"])({}, defaultQbsTableLabels, overrides);
+};
+exports.mergeQbsTableLabels = mergeQbsTableLabels;
+var formatSelectedItems = function formatSelectedItems(count, labels) {
+  var merged = mergeQbsTableLabels(labels);
+  return merged.selectedItems + " (" + count + ")";
+};
+exports.formatSelectedItems = formatSelectedItems;

package/lib/qbsTable/utilities/ColumShowHide.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { QbsColumnProps } from '../commontypes';
+import type { QbsTableLabels } from '../labels';
 interface ColumnToggleProps {
     columns: QbsColumnProps[];
     onToggle: (columnName: string) => void;
@@ -9,6 +10,8 @@ interface ColumnToggleProps {
     handleColumnToggle?: (columns: QbsColumnProps[]) => void;
     handleResetColumns?: () => void;
     tableHeight?: number;
+    labels?: QbsTableLabels;
+    rtl?: boolean;
 }
 declare const ColumnToggle: React.FC<ColumnToggleProps>;
 export default ColumnToggle;

package/lib/qbsTable/utilities/ColumShowHide.js

@@ -1,12 +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,
@@ -15,14 +20,71 @@ var ColumnToggle = function ColumnToggle(_ref) {
     handleResetColumns = _ref.handleResetColumns,
     handleColumnToggle = _ref.handleColumnToggle,
     _ref$tableHeight = _ref.tableHeight,
-    tableHeight = _ref$tableHeight === void 0 ? 450 : _ref$tableHeight;
+    tableHeight = _ref$tableHeight === void 0 ? 450 : _ref$tableHeight,
+    labelsProp = _ref.labels,
+    _ref$rtl = _ref.rtl,
+    rtl = _ref$rtl === void 0 ? false : _ref$rtl;
+  var labels = (0, _labels.mergeQbsTableLabels)(labelsProp);
+  var toggleId = (0, _react.useId)();
   var _useState = (0, _react.useState)(null),
     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) || 272;
+    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;
+      if ((detail === null || detail === void 0 ? void 0 : detail.exceptId) !== toggleId) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener(_columnToggleCoordinator.COLUMN_TOGGLE_CLOSE_OTHERS, handleCloseOthers);
+    return function () {
+      return document.removeEventListener(_columnToggleCoordinator.COLUMN_TOGGLE_CLOSE_OTHERS, handleCloseOthers);
+    };
+  }, [setIsOpen, toggleId]);
+  (0, _react.useEffect)(function () {
+    if (!isOpen) return;
+    updatePopupPosition();
+    var frame = requestAnimationFrame(function () {
+      return updatePopupPosition();
+    });
+    return function () {
+      return cancelAnimationFrame(frame);
+    };
+  }, [isOpen, updatePopupPosition]);
   var handleToggle = (0, _react.useCallback)(function (columnName) {
     onToggle(columnName);
   }, [onToggle]);
@@ -45,18 +107,22 @@ var ColumnToggle = function ColumnToggle(_ref) {
       setDragOverPosition(null);
     }
     setDraggedItem(null);
-  }, [columns, draggedItem]);
+  }, [columns, draggedItem, onReorder]);
   var handleClickOutside = (0, _react.useCallback)(function (event) {
-    if (popupRef.current && !popupRef.current.contains(event.target)) {
-      setIsOpen(false);
+    var _popupRef$current3, _settingsBtnRef$curre;
+    var target = event.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;
     document.addEventListener('mousedown', handleClickOutside);
     return function () {
-      document.removeEventListener('mousedown', handleClickOutside);
+      return document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, [handleClickOutside]);
+  }, [handleClickOutside, isOpen]);
   var renderFixedColumn = function renderFixedColumn(column, index) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       key: column.title,
@@ -148,80 +214,94 @@ var ColumnToggle = function ColumnToggle(_ref) {
     var _columns$filter;
     return ((_columns$filter = columns.filter(function (item) {
       return !item.isVisible;
-    })) === null || _columns$filter === void 0 ? void 0 : _columns$filter.length) > 0 ? true : false;
+    })) === null || _columns$filter === void 0 ? void 0 : _columns$filter.length) > 0;
   };
   var handleColToggle = function handleColToggle() {
     setIsOpen(false);
     handleColumnToggle === null || handleColumnToggle === void 0 ? void 0 : handleColumnToggle(columns);
   };
-  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("button", {
-    onClick: function onClick() {
-      return setIsOpen(!isOpen);
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_icons.SettingsIcon, null)), isOpen && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "qbs-table-column-popup",
+  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: tableHeight - 40,
+      zIndex: 10060
     },
-    ref: popupRef
+    ref: popupRef,
+    dir: rtl ? 'rtl' : 'ltr'
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-popup-container"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-popup-item"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-popup-label"
-  }, "FIXED COLUMNS"), /*#__PURE__*/_react["default"].createElement("div", {
+  }, labels.fixedColumns), /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-columns-container"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-column"
   }, columns.map(function (column, index) {
-    return column.fixed ? renderFixedColumn(column, index) : '';
+    return column.fixed ? renderFixedColumn(column, index) : null;
   })))), /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-divider"
   }), /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-popup-item"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-popup-label"
-  }, "VISIBLE COLUMNS"), /*#__PURE__*/_react["default"].createElement("div", {
+  }, labels.visibleColumns), /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-columns-container"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-column"
   }, columns.map(function (column, index) {
-    return column.isVisible && !column.fixed ? renderColumn(column, index) : '';
+    return column.isVisible && !column.fixed ? renderColumn(column, index) : null;
   })))), handleAvailableColumns() && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-divider"
   }), /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-popup-item"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-popup-label"
-  }, "AVAILABLE COLUMNS"), /*#__PURE__*/_react["default"].createElement("div", {
+  }, labels.availableColumns), /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-columns-container"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-column"
   }, columns.map(function (column, index) {
-    return !column.isVisible && !column.fixed ? renderFixedColumn(column, index) : '';
+    return !column.isVisible && !column.fixed ? renderFixedColumn(column, index) : null;
   })))))), handleResetColumns && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-divider"
   }), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "qbs-table-popup-item",
-    style: {
-      display: 'flex',
-      flexDirection: 'row',
-      justifyContent: 'space-between'
-    }
-  }, /*#__PURE__*/_react["default"].createElement("a", {
+    className: "qbs-table-popup-footer"
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
     className: "qbs-table-reset-link",
-    href: "#",
     onClick: function onClick() {
       return handleResetColumns === null || handleResetColumns === void 0 ? void 0 : handleResetColumns();
     }
-  }, "Reset to default"), /*#__PURE__*/_react["default"].createElement("a", {
+  }, labels.resetToDefault), /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
     className: "qbs-table-reset-link",
-    href: "#",
     onClick: function onClick() {
       return handleColToggle();
     }
-  }, "Save"))))));
+  }, labels.save))));
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "qbs-table-settings-wrapper"
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    className: "qbs-table-settings-btn",
+    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/lib/qbsTable/utilities/VerticalDropDownMenu.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ActionProps } from '../commontypes';
+type VerticalMenuDropdownProps = {
+    actionDropDown?: readonly ActionProps[];
+    handleMenuActions?: (actions: ActionProps, rowData: any) => void;
+    rowData: any;
+    tableBodyRef?: React.RefObject<HTMLDivElement>;
+    rowIndex?: number;
+};
+declare const VerticalMenuDropdown: React.FC<VerticalMenuDropdownProps>;
+export default VerticalMenuDropdown;

package/lib/qbsTable/utilities/VerticalDropDownMenu.js

@@ -0,0 +1,190 @@
+"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 _icons = require("./icons");
+var _ToolTip = _interopRequireDefault(require("./ToolTip"));
+var _verticalMenuCoordinator = require("./verticalMenuCoordinator");
+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; }
+function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
+  var _actionDropDown$filte2, _document$getElementB;
+  var actionDropDown = _ref.actionDropDown,
+    handleMenuActions = _ref.handleMenuActions,
+    rowData = _ref.rowData,
+    tableBodyRef = _ref.tableBodyRef,
+    rowIndex = _ref.rowIndex;
+  var _useState = (0, _react.useState)(false),
+    openMenu = _useState[0],
+    setOpenMenu = _useState[1];
+  var _useState2 = (0, _react.useState)({
+      top: 0,
+      left: 0
+    }),
+    position = _useState2[0],
+    setPosition = _useState2[1];
+  var menuId = (0, _react.useId)();
+  var menuButtonRef = (0, _react.useRef)(null);
+  var menuRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    var handleCloseOthers = function handleCloseOthers(event) {
+      var detail = event.detail;
+      if ((detail === null || detail === void 0 ? void 0 : detail.exceptId) !== menuId) {
+        setOpenMenu(false);
+      }
+    };
+    document.addEventListener(_verticalMenuCoordinator.VERTICAL_MENU_CLOSE_OTHERS, handleCloseOthers);
+    return function () {
+      return document.removeEventListener(_verticalMenuCoordinator.VERTICAL_MENU_CLOSE_OTHERS, handleCloseOthers);
+    };
+  }, [menuId]);
+  var updateMenuPosition = function updateMenuPosition() {
+    var _actionDropDown$filte;
+    if (!menuButtonRef.current) return;
+    var rect = menuButtonRef.current.getBoundingClientRect();
+    var viewportPadding = 8;
+    var menuGap = 4;
+    var visibleItems = (_actionDropDown$filte = actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.filter(function (item) {
+      var _item$hide$call, _item$hide;
+      return !item.hidden && !((_item$hide$call = (_item$hide = item.hide) === null || _item$hide === void 0 ? void 0 : _item$hide.call(item, rowData, rowIndex)) != null ? _item$hide$call : false);
+    })) != null ? _actionDropDown$filte : [];
+    var menuWidth = menuRef.current && menuRef.current.offsetWidth > 0 ? menuRef.current.offsetWidth : Math.max(120, visibleItems.length * 48);
+    var menuHeight = visibleItems.length * 40;
+    var spaceBelow = window.innerHeight - rect.bottom;
+    var openBelow = spaceBelow >= menuHeight + menuGap;
+    var left = rect.left;
+    if (left + menuWidth > window.innerWidth - viewportPadding) {
+      left = Math.max(viewportPadding, rect.right - menuWidth);
+    }
+    setPosition({
+      top: openBelow ? rect.bottom + menuGap : rect.top - menuHeight - menuGap,
+      left: left
+    });
+  };
+  (0, _react.useEffect)(function () {
+    if (!openMenu) return;
+    updateMenuPosition();
+    var frame = requestAnimationFrame(function () {
+      return updateMenuPosition();
+    });
+    var resizeObserver = menuRef.current && typeof ResizeObserver !== 'undefined' ? new ResizeObserver(function () {
+      return updateMenuPosition();
+    }) : null;
+    if (resizeObserver && menuRef.current) {
+      resizeObserver.observe(menuRef.current);
+    }
+    return function () {
+      cancelAnimationFrame(frame);
+      resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+    };
+  }, [openMenu]);
+  (0, _react.useEffect)(function () {
+    if (!openMenu) return;
+    var handleClickOutside = function handleClickOutside(event) {
+      var _menuRef$current, _menuButtonRef$curren;
+      var target = event.target;
+      if ((_menuRef$current = menuRef.current) !== null && _menuRef$current !== void 0 && _menuRef$current.contains(target) || (_menuButtonRef$curren = menuButtonRef.current) !== null && _menuButtonRef$curren !== void 0 && _menuButtonRef$curren.contains(target)) {
+        return;
+      }
+      setOpenMenu(false);
+    };
+    var handleScroll = function handleScroll() {
+      return setOpenMenu(false);
+    };
+    document.addEventListener('click', handleClickOutside);
+    window.addEventListener('scroll', handleScroll, true);
+    return function () {
+      document.removeEventListener('click', handleClickOutside);
+      window.removeEventListener('scroll', handleScroll, true);
+    };
+  }, [openMenu]);
+  (0, _react.useEffect)(function () {
+    var scrollbarHandle = document.querySelector('.rs-table-scrollbar-handle');
+    if (!scrollbarHandle) return;
+    var observer = new MutationObserver(function (mutations) {
+      for (var _iterator = _createForOfIteratorHelperLoose(mutations), _step; !(_step = _iterator()).done;) {
+        var mutation = _step.value;
+        if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
+          setOpenMenu(false);
+        }
+      }
+    });
+    observer.observe(scrollbarHandle, {
+      attributes: true,
+      attributeFilter: ['style']
+    });
+    return function () {
+      return observer.disconnect();
+    };
+  }, [openMenu]);
+  var handleMenuItemClick = function handleMenuItemClick(slug) {
+    var _slug$action;
+    handleMenuActions === null || handleMenuActions === void 0 ? void 0 : handleMenuActions(slug, rowData);
+    (_slug$action = slug.action) === null || _slug$action === void 0 ? void 0 : _slug$action.call(slug, rowData);
+    setOpenMenu(false);
+  };
+  var visibleCount = (_actionDropDown$filte2 = actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.filter(function (item) {
+    var _item$hide$call2, _item$hide2;
+    return !item.hidden && !((_item$hide$call2 = (_item$hide2 = item.hide) === null || _item$hide2 === void 0 ? void 0 : _item$hide2.call(item, rowData, rowIndex)) != null ? _item$hide$call2 : false);
+  }).length) != null ? _actionDropDown$filte2 : 0;
+  var portalTarget = (_document$getElementB = document.getElementById('portal-root')) != null ? _document$getElementB : document.body;
+  var dropdownContent = /*#__PURE__*/_react["default"].createElement("div", {
+    className: "absolute z-[60] min-w-48 rounded-md vertical-menu-dropdown-content",
+    ref: menuRef,
+    style: {
+      top: position.top,
+      left: position.left,
+      position: 'fixed',
+      minWidth: 120,
+      width: 'max-content'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "py-1"
+  }, actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.map(function (item) {
+    var _item$hide$call3, _item$hide3;
+    return !item.hidden && !((_item$hide$call3 = (_item$hide3 = item.hide) === null || _item$hide3 === void 0 ? void 0 : _item$hide3.call(item, rowData, rowIndex)) != null ? _item$hide$call3 : false) ? /*#__PURE__*/_react["default"].createElement("div", {
+      key: item.title,
+      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();
+        (_item$action = item.action) === null || _item$action === void 0 ? void 0 : _item$action.call(item, item);
+        handleMenuItemClick(item);
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
+      title: item.toolTip,
+      tableBodyRef: tableBodyRef
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "vertical-menu-icon-title flex items-center gap-2"
+    }, item.icon && /*#__PURE__*/_react["default"].createElement("span", {
+      className: "vertical-menu-icon"
+    }, item.icon), /*#__PURE__*/_react["default"].createElement("span", {
+      className: "vertical-menu-title"
+    }, item.title)))) : null;
+  })));
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "inline-block vertical-menu-dropdown-wrapper"
+  }, visibleCount > 0 && /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    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: function onClick(event) {
+      event.stopPropagation();
+      if (openMenu) {
+        setOpenMenu(false);
+        return;
+      }
+      (0, _verticalMenuCoordinator.closeOtherVerticalMenus)(menuId);
+      updateMenuPosition();
+      setOpenMenu(true);
+    },
+    ref: menuButtonRef
+  }, /*#__PURE__*/_react["default"].createElement(_icons.ThreeDotIcon, null))), openMenu && portalTarget && /*#__PURE__*/_reactDom["default"].createPortal(dropdownContent, portalTarget));
+};
+var _default = VerticalMenuDropdown;
+exports["default"] = _default;

package/lib/qbsTable/utilities/columnToggleCoordinator.d.ts

@@ -0,0 +1,5 @@
+export declare const COLUMN_TOGGLE_CLOSE_OTHERS = "qbs-column-toggle-close-others";
+export type ColumnToggleCloseDetail = {
+    exceptId: string;
+};
+export declare const closeOtherColumnToggles: (exceptId: string) => void;

package/lib/qbsTable/utilities/columnToggleCoordinator.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+exports.closeOtherColumnToggles = exports.COLUMN_TOGGLE_CLOSE_OTHERS = void 0;
+var COLUMN_TOGGLE_CLOSE_OTHERS = 'qbs-column-toggle-close-others';
+exports.COLUMN_TOGGLE_CLOSE_OTHERS = COLUMN_TOGGLE_CLOSE_OTHERS;
+var closeOtherColumnToggles = function closeOtherColumnToggles(exceptId) {
+  if (typeof document === 'undefined') return;
+  document.dispatchEvent(new CustomEvent(COLUMN_TOGGLE_CLOSE_OTHERS, {
+    detail: {
+      exceptId: exceptId
+    }
+  }));
+};
+exports.closeOtherColumnToggles = closeOtherColumnToggles;

package/lib/qbsTable/utilities/icons.d.ts

@@ -6,3 +6,6 @@ export declare const TableIcon: React.FC<any>;
 export declare const CardIcon: React.FC<any>;
 export declare const CardView: React.FC<any>;
 export declare const TableView: React.FC<any>;
+export declare const ExpandIcon: React.FC<any>;
+export declare const ContentView: React.FC<any>;
+export declare const DefaultView: React.FC<any>;

package/lib/qbsTable/utilities/icons.js

@@ -2,7 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.ThreeDotIcon = exports.TableView = exports.TableIcon = exports.SettingsIcon = exports.CardView = exports.CardIcon = exports.ArrowUpIcon = void 0;
+exports.ThreeDotIcon = exports.TableView = exports.TableIcon = exports.SettingsIcon = exports.ExpandIcon = exports.DefaultView = exports.ContentView = exports.CardView = exports.CardIcon = exports.ArrowUpIcon = void 0;
 var _react = _interopRequireDefault(require("react"));
 var ThreeDotIcon = function ThreeDotIcon() {
   return /*#__PURE__*/_react["default"].createElement("svg", {
@@ -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"
@@ -31,13 +31,13 @@ var SettingsIcon = function SettingsIcon() {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M10 12.5C8.61929 12.5 7.5 11.3807 7.5 10C7.5 8.61929 8.61929 7.5 10 7.5C11.3807 7.5 12.5 8.61929 12.5 10C12.5 11.3807 11.3807 12.5 10 12.5Z",
-    stroke: "#313131",
+    stroke: "currentColor",
     strokeWidth: "1.5",
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }), /*#__PURE__*/_react["default"].createElement("path", {
     d: "M1.66797 9.26718C1.66797 8.40052 2.3763 7.68385 3.2513 7.68385C4.75964 7.68385 5.3763 6.61718 4.61797 5.30885C4.18464 4.55885 4.44297 3.58385 5.2013 3.15052L6.64297 2.32552C7.3013 1.93385 8.1513 2.16718 8.54297 2.82552L8.63463 2.98385C9.38463 4.29218 10.618 4.29218 11.3763 2.98385L11.468 2.82552C11.8596 2.16718 12.7096 1.93385 13.368 2.32552L14.8096 3.15052C15.568 3.58385 15.8263 4.55885 15.393 5.30885C14.6346 6.61718 15.2513 7.68385 16.7596 7.68385C17.6263 7.68385 18.343 8.39218 18.343 9.26718V10.7338C18.343 11.6005 17.6346 12.3172 16.7596 12.3172C15.2513 12.3172 14.6346 13.3838 15.393 14.6922C15.8263 15.4505 15.568 16.4172 14.8096 16.8505L13.368 17.6755C12.7096 18.0672 11.8596 17.8339 11.468 17.1755L11.3763 17.0172C10.6263 15.7089 9.39297 15.7089 8.63463 17.0172L8.54297 17.1755C8.1513 17.8339 7.3013 18.0672 6.64297 17.6755L5.2013 16.8505C4.44297 16.4172 4.18464 15.4422 4.61797 14.6922C5.3763 13.3838 4.75964 12.3172 3.2513 12.3172C2.3763 12.3172 1.66797 11.6005 1.66797 10.7338V9.26718Z",
-    stroke: "#313131",
+    stroke: "currentColor",
     strokeWidth: "1.5",
     strokeLinecap: "round",
     strokeLinejoin: "round"
@@ -137,4 +137,71 @@ var TableView = function TableView(_ref5) {
     strokeWidth: "1.5"
   }));
 };
-exports.TableView = TableView;
+exports.TableView = TableView;
+var ExpandIcon = function ExpandIcon(_ref6) {
+  var className = _ref6.className;
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    width: "16",
+    height: "16",
+    className: className,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M2.66797 5.33073V2.66406M2.66797 2.66406H5.33464M2.66797 2.66406L6.0013 5.9974M13.3346 5.33073V2.66406M13.3346 2.66406H10.668M13.3346 2.66406L10.0013 5.9974M2.66797 10.6641V13.3307M2.66797 13.3307H5.33464M2.66797 13.3307L6.0013 9.9974M13.3346 13.3307L10.0013 9.9974M13.3346 13.3307V10.6641M13.3346 13.3307H10.668",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};
+exports.ExpandIcon = ExpandIcon;
+var ContentView = function ContentView(_ref7) {
+  var className = _ref7.className;
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    width: "16",
+    height: "17",
+    className: className,
+    viewBox: "0 0 16 17",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M4.00344 9.48438C3.24485 9.48438 2.94141 9.80804 2.94141 10.6122V12.6553C2.94141 13.4594 3.24485 13.7831 4.00344 13.7831H11.994C12.7526 13.7831 13.056 13.4594 13.056 12.6553V10.6122C13.056 9.80804 12.7526 9.48438 11.994 9.48438H4.00344Z",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M4.00344 3.66406C3.24485 3.66406 2.94141 3.98773 2.94141 4.79184V6.835C2.94141 7.63911 3.24485 7.96278 4.00344 7.96278H11.994C12.7526 7.96278 13.056 7.63911 13.056 6.835V4.79184C13.056 3.98773 12.7526 3.66406 11.994 3.66406H4.00344Z",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};
+exports.ContentView = ContentView;
+var DefaultView = function DefaultView(_ref8) {
+  var className = _ref8.className;
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    width: "16",
+    height: "17",
+    className: className,
+    viewBox: "0 0 16 17",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2.39844 4.72969C2.39844 4.28786 2.75661 3.92969 3.19844 3.92969H12.7984C13.2403 3.92969 13.5984 4.28786 13.5984 4.72969C13.5984 5.17152 13.2403 5.52969 12.7984 5.52969H3.19844C2.75661 5.52969 2.39844 5.17152 2.39844 4.72969Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2.39844 8.72969C2.39844 8.28786 2.75661 7.92969 3.19844 7.92969H12.7984C13.2403 7.92969 13.5984 8.28786 13.5984 8.72969C13.5984 9.17152 13.2403 9.52969 12.7984 9.52969H3.19844C2.75661 9.52969 2.39844 9.17152 2.39844 8.72969Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2.39844 12.7297C2.39844 12.2879 2.75661 11.9297 3.19844 11.9297H12.7984C13.2403 11.9297 13.5984 12.2879 13.5984 12.7297C13.5984 13.1715 13.2403 13.5297 12.7984 13.5297H3.19844C2.75661 13.5297 2.39844 13.1715 2.39844 12.7297Z",
+    fill: "currentColor"
+  }));
+};
+exports.DefaultView = DefaultView;

package/lib/qbsTable/utilities/verticalMenuCoordinator.d.ts

@@ -0,0 +1,5 @@
+export declare const VERTICAL_MENU_CLOSE_OTHERS = "qbs-vertical-menu-close-others";
+export type VerticalMenuCloseDetail = {
+    exceptId: string;
+};
+export declare const closeOtherVerticalMenus: (exceptId: string) => void;