qbs-react-grid 2.2.4 → 2.2.5

package/lib/qbsTable/labels.d.ts

@@ -1,48 +0,0 @@
-export interface QbsTableLabels {
-    search?: string;
-    searchAriaLabel?: string;
-    clear?: string;
-    selectedItems?: string;
-    switchToDefaultView?: string;
-    switchToRelaxedView?: string;
-    switchToFullScreen?: string;
-    switchToTableView?: string;
-    switchToCardView?: string;
-    noDataFound?: string;
-    showingRange?: (start: number, end: number, total: number) => string;
-    itemsPerPage?: string;
-    fixedColumns?: string;
-    visibleColumns?: string;
-    availableColumns?: string;
-    resetToDefault?: string;
-    save?: string;
-    viewMore?: string;
-    viewLess?: string;
-    actions?: string;
-}
-export declare const DEFAULT_QBS_TABLE_LABELS: Required<Omit<QbsTableLabels, 'showingRange'>> & {
-    showingRange: (start: number, end: number, total: number) => string;
-};
-export declare const mergeLabels: (labels?: QbsTableLabels) => {
-    showingRange: (start: number, end: number, total: number) => string;
-    search: string;
-    searchAriaLabel: string;
-    clear: string;
-    selectedItems: string;
-    switchToDefaultView: string;
-    switchToRelaxedView: string;
-    switchToFullScreen: string;
-    switchToTableView: string;
-    switchToCardView: string;
-    noDataFound: string;
-    itemsPerPage: string;
-    fixedColumns: string;
-    visibleColumns: string;
-    availableColumns: string;
-    resetToDefault: string;
-    save: string;
-    viewMore: string;
-    viewLess: string;
-    actions: string;
-};
-export declare const formatSelectedItems: (selectedItemsLabel: string, count: number) => string;

package/lib/qbsTable/labels.js

@@ -1,42 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-exports.__esModule = true;
-exports.mergeLabels = exports.formatSelectedItems = exports.DEFAULT_QBS_TABLE_LABELS = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var DEFAULT_QBS_TABLE_LABELS = {
-  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.DEFAULT_QBS_TABLE_LABELS = DEFAULT_QBS_TABLE_LABELS;
-var mergeLabels = function mergeLabels(labels) {
-  var _labels$showingRange;
-  return (0, _extends2["default"])({}, DEFAULT_QBS_TABLE_LABELS, labels, {
-    showingRange: (_labels$showingRange = labels === null || labels === void 0 ? void 0 : labels.showingRange) != null ? _labels$showingRange : DEFAULT_QBS_TABLE_LABELS.showingRange
-  });
-};
-exports.mergeLabels = mergeLabels;
-var formatSelectedItems = function formatSelectedItems(selectedItemsLabel, count) {
-  return selectedItemsLabel + "(" + count + ") ";
-};
-exports.formatSelectedItems = formatSelectedItems;

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

@@ -1,13 +0,0 @@
-import React from 'react';
-import { ActionProps } from '../commontypes';
-type Props = {
-    actionDropDown: ActionProps[];
-    handleMenuActions?: (slug: ActionProps, rowData?: any) => void;
-    rowData?: any;
-    dataTheme?: string;
-    tableBodyRef: React.RefObject<HTMLDivElement | null>;
-    rowIndex?: number;
-    wheelWrapperRef?: React.RefObject<HTMLDivElement>;
-};
-declare const VerticalMenuDropdown: React.FC<Props>;
-export default VerticalMenuDropdown;

package/lib/qbsTable/utilities/VerticalDropDownMenu.js

@@ -1,165 +0,0 @@
-"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"));
-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 = _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 menuButtonRef = (0, _react.useRef)(null);
-  var menuRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(function () {
-    var handleClickOutside = function handleClickOutside(event) {
-      if (menuRef.current && !menuRef.current.contains(event.target)) {
-        setOpenMenu(false);
-      }
-    };
-    var handleScroll = function handleScroll() {
-      setOpenMenu(false);
-    };
-    document.addEventListener('click', handleClickOutside);
-    window.addEventListener('scroll', handleScroll, true);
-    // Use capture phase to catch all scrolls
-
-    return function () {
-      document.removeEventListener('click', handleClickOutside);
-      window.removeEventListener('scroll', handleScroll, true);
-    };
-  }, []);
-  (0, _react.useEffect)(function () {
-    var handleStyleChange = function handleStyleChange() {
-      setOpenMenu(false); // Close the dropdown
-    };
-    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') {
-          handleStyleChange();
-        }
-      }
-    });
-    observer.observe(scrollbarHandle, {
-      attributes: true,
-      attributeFilter: ['style']
-    });
-    return function () {
-      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 handleShowHideMenu = function handleShowHideMenu() {
-    var _actionDropDown$filte, _actionDropDown$filte2;
-    return (_actionDropDown$filte = actionDropDown === null || actionDropDown === void 0 ? void 0 : (_actionDropDown$filte2 = actionDropDown.filter(function (item) {
-      var _item$hide;
-      return !item.hidden && !(item !== null && item !== void 0 && (_item$hide = item.hide) !== null && _item$hide !== void 0 && _item$hide.call(item, rowData, rowIndex));
-    })) === null || _actionDropDown$filte2 === void 0 ? void 0 : _actionDropDown$filte2.length) != null ? _actionDropDown$filte : 0;
-  };
-  var toggleMenu = function toggleMenu() {
-    if (!openMenu && menuButtonRef.current) {
-      var _actionDropDown$filte3;
-      var rect = menuButtonRef.current.getBoundingClientRect();
-      var viewportPadding = 8;
-      var menuGap = 4;
-      var dropdownWidth = 200;
-      var visibleItems = (_actionDropDown$filte3 = actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.filter(function (item) {
-        var _item$hide2;
-        return !item.hidden && !(item !== null && item !== void 0 && (_item$hide2 = item.hide) !== null && _item$hide2 !== void 0 && _item$hide2.call(item, rowData, rowIndex));
-      })) != null ? _actionDropDown$filte3 : [];
-      var menuHeight = visibleItems.length * 40;
-      var spaceBelow = window.innerHeight - rect.bottom;
-      var openBelow = spaceBelow >= menuHeight + menuGap;
-
-      // Anchor to trigger; prefer opening toward inline-start (left in LTR).
-      var left = rect.right - dropdownWidth;
-      if (left < viewportPadding) {
-        left = rect.left;
-      }
-      if (left + dropdownWidth > window.innerWidth - viewportPadding) {
-        left = Math.max(viewportPadding, rect.left - dropdownWidth);
-      }
-      if (left + dropdownWidth > window.innerWidth - viewportPadding) {
-        left = window.innerWidth - viewportPadding - dropdownWidth;
-      }
-      setPosition({
-        top: openBelow ? rect.bottom + menuGap : rect.top - menuHeight - menuGap,
-        left: left
-      });
-    }
-    setTimeout(function () {
-      setOpenMenu(function (prev) {
-        return !prev;
-      });
-    }, 200);
-  };
-  var portalTarget = document.getElementById('portal-root');
-  var dropdownContent = /*#__PURE__*/_react["default"].createElement("div", {
-    className: "absolute z-[60] min-w-48 rounded-md vertical-menu-dropdown-content",
-    ref: menuRef,
-    style: {
-      width: 200,
-      top: position.top,
-      left: position.left,
-      position: 'fixed'
-    }
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "py-1"
-  }, actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.map(function (item) {
-    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-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 === null || item === void 0 ? void 0 : 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"
-  }, handleShowHideMenu() > 0 && /*#__PURE__*/_react["default"].createElement("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: toggleMenu,
-    ref: menuButtonRef
-  }, /*#__PURE__*/_react["default"].createElement(_icons.ThreeDotIcon, null))), openMenu && portalTarget && /*#__PURE__*/_reactDom["default"].createPortal(dropdownContent, portalTarget));
-};
-var _default = VerticalMenuDropdown;
-exports["default"] = _default;

package/src/qbsTable/labels.ts

@@ -1,58 +0,0 @@
-export interface QbsTableLabels {
-  search?: string;
-  searchAriaLabel?: string;
-  clear?: string;
-  selectedItems?: string;
-  switchToDefaultView?: string;
-  switchToRelaxedView?: string;
-  switchToFullScreen?: string;
-  switchToTableView?: string;
-  switchToCardView?: string;
-  noDataFound?: string;
-  showingRange?: (start: number, end: number, total: number) => string;
-  itemsPerPage?: string;
-  fixedColumns?: string;
-  visibleColumns?: string;
-  availableColumns?: string;
-  resetToDefault?: string;
-  save?: string;
-  viewMore?: string;
-  viewLess?: string;
-  actions?: string;
-}
-
-export const DEFAULT_QBS_TABLE_LABELS: Required<
-  Omit<QbsTableLabels, 'showingRange'>
-> & {
-  showingRange: (start: number, end: number, total: number) => string;
-} = {
-  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: (start, end, total) => `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'
-};
-
-export const mergeLabels = (labels?: QbsTableLabels) => ({
-  ...DEFAULT_QBS_TABLE_LABELS,
-  ...labels,
-  showingRange: labels?.showingRange ?? DEFAULT_QBS_TABLE_LABELS.showingRange
-});
-
-export const formatSelectedItems = (selectedItemsLabel: string, count: number) =>
-  `${selectedItemsLabel}(${count}) `;

package/src/qbsTable/utilities/VerticalDropDownMenu.tsx

@@ -1,178 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import ReactDOM from 'react-dom';
-
-import { ActionProps } from '../commontypes';
-import { ThreeDotIcon } from './icons';
-import TooltipComponent from './ToolTip';
-
-type Props = {
-  actionDropDown: ActionProps[];
-  handleMenuActions?: (slug: ActionProps, rowData?: any) => void;
-  rowData?: any;
-  dataTheme?: string;
-  tableBodyRef: React.RefObject<HTMLDivElement | null>;
-  rowIndex?: number;
-  wheelWrapperRef?: React.RefObject<HTMLDivElement>;
-};
-
-const VerticalMenuDropdown: React.FC<Props> = ({
-  actionDropDown,
-  handleMenuActions,
-  rowData,
-  tableBodyRef,
-  rowIndex
-}) => {
-  const [openMenu, setOpenMenu] = useState(false);
-  const [position, setPosition] = useState({ top: 0, left: 0 });
-  const menuButtonRef = useRef<HTMLButtonElement | null>(null);
-  const menuRef = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
-        setOpenMenu(false);
-      }
-    };
-    const handleScroll = () => {
-      setOpenMenu(false);
-    };
-
-    document.addEventListener('click', handleClickOutside);
-    window.addEventListener('scroll', handleScroll, true);
-    // Use capture phase to catch all scrolls
-
-    return () => {
-      document.removeEventListener('click', handleClickOutside);
-      window.removeEventListener('scroll', handleScroll, true);
-    };
-  }, []);
-  useEffect(() => {
-    const handleStyleChange = () => {
-      setOpenMenu(false); // Close the dropdown
-    };
-
-    const scrollbarHandle = document.querySelector('.rs-table-scrollbar-handle');
-    if (!scrollbarHandle) return;
-
-    const observer = new MutationObserver(mutations => {
-      for (const mutation of mutations) {
-        if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
-          handleStyleChange();
-        }
-      }
-    });
-
-    observer.observe(scrollbarHandle, {
-      attributes: true,
-      attributeFilter: ['style']
-    });
-
-    return () => {
-      observer.disconnect();
-    };
-  }, [openMenu]);
-
-  const handleMenuItemClick = (slug: ActionProps) => {
-    handleMenuActions?.(slug, rowData);
-    slug.action?.(rowData);
-    setOpenMenu(false);
-  };
-
-  const handleShowHideMenu = () => {
-    return (
-      actionDropDown?.filter(item => !item.hidden && !item?.hide?.(rowData, rowIndex))?.length ?? 0
-    );
-  };
-
-  const toggleMenu = () => {
-    if (!openMenu && menuButtonRef.current) {
-      const rect = menuButtonRef.current.getBoundingClientRect();
-      const viewportPadding = 8;
-      const menuGap = 4;
-      const dropdownWidth = 200;
-      const visibleItems =
-        actionDropDown?.filter(item => !item.hidden && !item?.hide?.(rowData, rowIndex)) ?? [];
-      const menuHeight = visibleItems.length * 40;
-
-      const spaceBelow = window.innerHeight - rect.bottom;
-      const openBelow = spaceBelow >= menuHeight + menuGap;
-
-      // Anchor to trigger; prefer opening toward inline-start (left in LTR).
-      let left = rect.right - dropdownWidth;
-
-      if (left < viewportPadding) {
-        left = rect.left;
-      }
-      if (left + dropdownWidth > window.innerWidth - viewportPadding) {
-        left = Math.max(viewportPadding, rect.left - dropdownWidth);
-      }
-      if (left + dropdownWidth > window.innerWidth - viewportPadding) {
-        left = window.innerWidth - viewportPadding - dropdownWidth;
-      }
-
-      setPosition({
-        top: openBelow ? rect.bottom + menuGap : rect.top - menuHeight - menuGap,
-        left,
-      });
-    }
-    setTimeout(() => {
-      setOpenMenu(prev => !prev);
-    }, 200);
-  };
-
-  const portalTarget = document.getElementById('portal-root');
-  const dropdownContent = (
-    <div
-      className="absolute z-[60] min-w-48 rounded-md vertical-menu-dropdown-content"
-      ref={menuRef}
-      style={{
-        width: 200,
-        top: position.top,
-        left: position.left,
-        position: 'fixed',
-      }}
-    >
-      <div className="py-1">
-        {actionDropDown?.map(item =>
-          !item?.hidden && !item?.hide?.(rowData, rowIndex) ? (
-            <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={e => {
-                e.preventDefault();
-                item.action?.(item);
-                handleMenuItemClick(item);
-              }}
-            >
-              <TooltipComponent title={item.toolTip} tableBodyRef={tableBodyRef}>
-                <div className="vertical-menu-icon-title flex items-center gap-2">
-                  {item?.icon && <span className="vertical-menu-icon">{item.icon}</span>}
-                  <span className="vertical-menu-title">{item.title}</span>
-                </div>
-              </TooltipComponent>
-            </div>
-          ) : null
-        )}
-      </div>
-    </div>
-  );
-
-  return (
-    <>
-      <div className="inline-block vertical-menu-dropdown-wrapper">
-        {handleShowHideMenu() > 0 && (
-          <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={toggleMenu}
-            ref={menuButtonRef}
-          >
-            <ThreeDotIcon />
-          </button>
-        )}
-      </div>
-      {openMenu && portalTarget && ReactDOM.createPortal(dropdownContent, portalTarget)}
-    </>
-  );
-};
-
-export default VerticalMenuDropdown;