qbs-react-grid 1.2.1 → 1.2.3

package/lib/qbsTable/utilities/CardComponent.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _CardMenuDropdown = _interopRequireDefault(require("./CardMenuDropdown"));
+var _SwitchCardColumns = require("./SwitchCardColumns");
+var _handleFormatCell = require("./handleFormatCell");
+var _icons = require("./icons");
+var _store = require("./store");
+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; }
+var CardComponent = function CardComponent(_ref) {
+  var columns = _ref.columns,
+    data = _ref.data,
+    tableBodyRef = _ref.tableBodyRef,
+    actionProps = _ref.actionProps,
+    index = _ref.index,
+    _ref$cardColumLimit = _ref.cardColumLimit,
+    cardColumLimit = _ref$cardColumLimit === void 0 ? 5 : _ref$cardColumLimit,
+    handleMenuActions = _ref.handleMenuActions,
+    _ref$childDetailHeadi = _ref.childDetailHeading,
+    childDetailHeading = _ref$childDetailHeadi === void 0 ? '' : _ref$childDetailHeadi;
+  var _useState = (0, _react.useState)(false),
+    viewMore = _useState[0],
+    setViewMore = _useState[1];
+  var initialDisplayCount = cardColumLimit;
+  var toggleViewMore = function toggleViewMore() {
+    setViewMore(!viewMore);
+  };
+  var useCardRef = (0, _react.useRef)(null);
+  var displayedColumns = viewMore ? columns : columns.slice(0, initialDisplayCount);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: useCardRef,
+    className: "p-3 gap-3 border-2 border-grey shadow-sm rounded-lg relative qbs-card-container"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "grid " + (0, _store.getGridColsClass)(initialDisplayCount) + " qbs-card-columns"
+  }, displayedColumns.map(function (col, index) {
+    var _col$colSpan;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: index,
+      className: "grid " + (0, _store.getGridColSpanClass)((_col$colSpan = col.colSpan) != null ? _col$colSpan : 1) + " place-content-start text-sm qbs-card-column   " + (index === initialDisplayCount - 1 ? 'mr-4' : '') + " "
+    }, /*#__PURE__*/_react["default"].createElement("p", {
+      className: " text-grey "
+    }, col.title), col.customCell || col.link ? /*#__PURE__*/_react["default"].createElement("span", {
+      className: "qbs-card-column-content mt-1   " + (!viewMore ? 'line-clamp-1' : '')
+    }, /*#__PURE__*/_react["default"].createElement(_SwitchCardColumns.CustomTableCell, {
+      dataKey: col.field,
+      rowData: data,
+      type: col.type,
+      path: col.getPath,
+      link: col.link,
+      viewMore: viewMore,
+      rowClick: col.rowClick,
+      renderCell: col.renderCell
+    })) : /*#__PURE__*/_react["default"].createElement("p", {
+      className: "mt-1  qbs-card-column-content " + (!viewMore ? 'line-clamp-1' : ''),
+      key: index
+    }, (0, _handleFormatCell.handleCellFormat)(data[col.field], col.type)));
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "qbs-card-column-action absolute  text-blue-500 mt-2 right-2 " + (columns.length > initialDisplayCount ? 'top-2' : 'top-4') + "  text-xs"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "flex  qbs-card-column-action-container\n               flex-col   items-center gap-y-2\n          "
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "  text-blue-500 qbs-card-column-action-menu "
+  }, /*#__PURE__*/_react["default"].createElement(_CardMenuDropdown["default"], {
+    tableBodyRef: tableBodyRef,
+    actionDropDown: actionProps,
+    rowData: data,
+    iconName: "more",
+    rowIndex: index,
+    handleMenuActions: handleMenuActions
+  })), columns.length > initialDisplayCount && /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
+    tableBodyRef: useCardRef,
+    title: viewMore ? ' View Less' : 'View More',
+    enabled: false
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    onClick: toggleViewMore,
+    className: " qbs-card-column-action-menu-view-more justify-end text-blue-500 text-xs"
+  }, /*#__PURE__*/_react["default"].createElement(_icons.ArrowUpIcon, {
+    className: (viewMore ? 'rotate-180' : '') + " "
+  })))))), viewMore && (data === null || data === void 0 ? void 0 : data.childDetail) && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "mt-4 p-3 border-t border-grey qbs-card-child-detail-container"
+  }, childDetailHeading && /*#__PURE__*/_react["default"].createElement("p", {
+    className: " text-lg qbs-card-child-detail-head font-semibold "
+  }, childDetailHeading), data === null || data === void 0 ? void 0 : data.childDetail));
+};
+var _default = CardComponent;
+exports["default"] = _default;

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

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

package/lib/qbsTable/utilities/CardMenuDropdown.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+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; }
+var CardMenuDropdown = function CardMenuDropdown(_ref) {
+  var actionDropDown = _ref.actionDropDown,
+    handleMenuActions = _ref.handleMenuActions,
+    rowData = _ref.rowData;
+  var _useState = (0, _react.useState)(false),
+    openMenu = _useState[0],
+    setOpenMenu = _useState[1];
+  var _useState2 = (0, _react.useState)({}),
+    menuPositionStyles = _useState2[0],
+    setMenuPositionStyles = _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);
+      }
+    };
+    document.addEventListener('click', handleClickOutside);
+    return function () {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, []);
+  var toggleMenu = function toggleMenu() {
+    setOpenMenu(function (prevState) {
+      if (!prevState && menuButtonRef.current) {
+        var buttonRect = menuButtonRef.current.getBoundingClientRect();
+        var dropdownHeight = 200; // Adjust this if your dropdown height varies
+        var spaceBelow = window.innerHeight - buttonRect.bottom;
+        var spaceAbove = buttonRect.top;
+        console.log(spaceAbove, spaceBelow, dropdownHeight);
+        if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
+          setMenuPositionStyles({
+            bottom: '30px',
+            right: '10px'
+          });
+        } else {
+          setMenuPositionStyles({
+            top: buttonRect.height + "px",
+            right: '10px'
+          });
+        }
+      }
+      return !prevState;
+    });
+  };
+  var handleClose = function handleClose() {
+    setOpenMenu(false);
+  };
+  var handleMenuItemClick = function handleMenuItemClick(item) {
+    var _item$action;
+    (_item$action = item.action) === null || _item$action === void 0 ? void 0 : _item$action.call(item, item);
+    handleMenuActions === null || handleMenuActions === void 0 ? void 0 : handleMenuActions(item, rowData);
+    handleClose();
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "dropdown text-black dark:text-white dark:bg-[#424242] bg-white",
+    ref: menuRef
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    className: "dropdown-toggle",
+    onClick: toggleMenu,
+    ref: menuButtonRef
+  }, /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
+    title: "Actions",
+    enabled: false,
+    ref: menuButtonRef
+  }, /*#__PURE__*/_react["default"].createElement(_icons.ThreeDotIcon, null))), openMenu && /*#__PURE__*/_react["default"].createElement("div", {
+    className: " qbs-card-dropdown rounded absolute right-0 mt-2 w-auto min-w-11 z-10 shadow-modalShadow bg-white dark:bg-[#424242] dark:text-white",
+    style: menuPositionStyles
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "qbs-card-dropdown-menu px-2 bg-white rounded w-full border border-grey-border shadow-lg shadow-menudropdown dark:bg-[#424242] dark:text-white"
+  }, actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.map(function (item) {
+    return !item.hidden && /*#__PURE__*/_react["default"].createElement("a", {
+      key: item.title,
+      href: "#/",
+      className: 'px-1  hover:bg-background no-underline whitespace-nowrap ',
+      onClick: function onClick(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        handleMenuItemClick(item);
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: " qbs-card-dropdown-menu-item no-underline " + (item.isWarning ? 'text-error-light' : ' text-black/70  dark:text-white') + " text-xxs flex items-center w-full tracking-[0.24px] font-medium "
+    }, (item === null || item === void 0 ? void 0 : item.icon) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, item.icon), /*#__PURE__*/_react["default"].createElement("span", {
+      className: "pl-1.5 no-underline text-sm "
+    }, 'Edit this column')));
+  }))));
+};
+var _default = CardMenuDropdown;
+exports["default"] = _default;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CustomTableCell: React.FC<any>;

package/lib/qbsTable/utilities/SwitchCardColumns.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.CustomTableCell = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _handleFormatCell = require("./handleFormatCell");
+var CustomTableCell = /*#__PURE__*/_react["default"].memo(function (_ref) {
+  var _renderCell, _path, _renderCell2, _renderCell3;
+  var rowData = _ref.rowData,
+    renderCell = _ref.renderCell,
+    hideLink = _ref.hideLink,
+    dataKey = _ref.dataKey,
+    rowClick = _ref.rowClick,
+    type = _ref.type,
+    path = _ref.path,
+    link = _ref.link,
+    viewMore = _ref.viewMore;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, link && !path && !(hideLink !== null && hideLink !== void 0 && hideLink(rowData)) ? /*#__PURE__*/_react["default"].createElement("a", {
+    onClick: function onClick() {
+      return rowClick === null || rowClick === void 0 ? void 0 : rowClick(rowData);
+    },
+    className: "qbs-table-row-link no-underline   " + (!viewMore ? 'line-clamp-1' : '')
+  }, renderCell ? (_renderCell = renderCell(rowData)) === null || _renderCell === void 0 ? void 0 : _renderCell.cell : (0, _handleFormatCell.handleCellFormat)(rowData[dataKey], type)) : path && !(hideLink !== null && hideLink !== void 0 && hideLink(rowData)) ? /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Link, {
+    to: (_path = path === null || path === void 0 ? void 0 : path(rowData)) != null ? _path : '',
+    className: "qbs-table-row-link no-underline " + (!viewMore ? 'line-clamp-1' : '')
+  }, renderCell ? (_renderCell2 = renderCell(rowData)) === null || _renderCell2 === void 0 ? void 0 : _renderCell2.cell : (0, _handleFormatCell.handleCellFormat)(rowData[dataKey], type)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, renderCell ? (_renderCell3 = renderCell(rowData)) === null || _renderCell3 === void 0 ? void 0 : _renderCell3.cell : (0, _handleFormatCell.handleCellFormat)(rowData[dataKey], type)));
+});
+exports.CustomTableCell = CustomTableCell;

package/lib/qbsTable/utilities/ToolTip.js

@@ -16,15 +16,12 @@ var TooltipComponent = function TooltipComponent(_ref) {
   var menuButtonRef = (0, _react.useRef)(null);
   var adjustDropdownPosition = function adjustDropdownPosition() {
     if (menuButtonRef.current && tableBodyRef !== null && tableBodyRef !== void 0 && tableBodyRef.current) {
-      var _menuButtonRef$curren, _tableBodyRef$current, _tableBodyRef$current2;
+      var _menuButtonRef$curren;
       var inputBoxRect = (_menuButtonRef$curren = menuButtonRef.current) === null || _menuButtonRef$curren === void 0 ? void 0 : _menuButtonRef$curren.getBoundingClientRect();
-      var viewportHeight = (_tableBodyRef$current = tableBodyRef === null || tableBodyRef === void 0 ? void 0 : (_tableBodyRef$current2 = tableBodyRef.current) === null || _tableBodyRef$current2 === void 0 ? void 0 : _tableBodyRef$current2.offsetHeight) != null ? _tableBodyRef$current : window.innerHeight;
       var tableRect = tableBodyRef.current.getBoundingClientRect();
-
       // Calculate positions relative to the table
       var spaceAbove = inputBoxRect.top - tableRect.top;
       var spaceBelow = tableRect.bottom - inputBoxRect.bottom;
-      console.log(viewportHeight, spaceAbove, spaceBelow);
       if (spaceAbove > spaceBelow) {
         setDropdownPosition('top-position');
       } else {
@@ -44,7 +41,7 @@ var TooltipComponent = function TooltipComponent(_ref) {
     }
   }, children), /*#__PURE__*/_react["default"].createElement("span", {
     ref: dropRef,
-    className: "tooltiptext "
+    className: 'tooltiptext'
   }, title));
 };
 var _default = TooltipComponent;

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

@@ -1,3 +1,6 @@
 import React from 'react';
 export declare const ThreeDotIcon: React.FC<any>;
 export declare const SettingsIcon: React.FC<any>;
+export declare const ArrowUpIcon: React.FC<any>;
+export declare const TableIcon: React.FC<any>;
+export declare const CardIcon: 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.SettingsIcon = void 0;
+exports.ThreeDotIcon = exports.TableIcon = exports.SettingsIcon = exports.CardIcon = exports.ArrowUpIcon = void 0;
 var _react = _interopRequireDefault(require("react"));
 var ThreeDotIcon = function ThreeDotIcon() {
   return /*#__PURE__*/_react["default"].createElement("svg", {
@@ -43,4 +43,52 @@ var SettingsIcon = function SettingsIcon() {
     strokeLinejoin: "round"
   }));
 };
-exports.SettingsIcon = SettingsIcon;
+exports.SettingsIcon = SettingsIcon;
+var ArrowUpIcon = function ArrowUpIcon(_ref) {
+  var className = _ref.className;
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: "3",
+    stroke: "currentColor",
+    className: className + " w-4 h-4"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "m19.5 8.25-7.5 7.5-7.5-7.5"
+  }));
+};
+exports.ArrowUpIcon = ArrowUpIcon;
+var TableIcon = function TableIcon(_ref2) {
+  var className = _ref2.className;
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: "1.5",
+    stroke: "currentColor",
+    className: className + " w-6 h-6"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z"
+  }));
+};
+exports.TableIcon = TableIcon;
+var CardIcon = function CardIcon(_ref3) {
+  var className = _ref3.className;
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: "1.5",
+    stroke: "currentColor",
+    className: className + " w-6 h-6"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 0 1-1.125-1.125M3.375 19.5h7.5c.621 0 1.125-.504 1.125-1.125m-9.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-7.5A1.125 1.125 0 0 1 12 18.375m9.75-12.75c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125m19.5 0v1.5c0 .621-.504 1.125-1.125 1.125M2.25 5.625v1.5c0 .621.504 1.125 1.125 1.125m0 0h17.25m-17.25 0h7.5c.621 0 1.125.504 1.125 1.125M3.375 8.25c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m17.25-3.75h-7.5c-.621 0-1.125.504-1.125 1.125m8.625-1.125c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M12 10.875v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125M13.125 12h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125M20.625 12c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5M12 14.625v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 14.625c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m0 1.5v-1.5m0 0c0-.621.504-1.125 1.125-1.125m0 0h7.5"
+  }));
+};
+exports.CardIcon = CardIcon;

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

@@ -0,0 +1,2 @@
+export declare const getGridColsClass: (count: number) => "grid-cols-1" | "grid-cols-2" | "grid-cols-3" | "grid-cols-4" | "grid-cols-5" | "grid-cols-6" | "grid-cols-7" | "grid-cols-8" | "grid-cols-9" | "grid-cols-10" | "grid-cols-11" | "grid-cols-12";
+export declare const getGridColSpanClass: (count: number) => "col-span-1" | "col-span-2" | "col-span-3" | "col-span-4" | "col-span-5" | "col-span--6" | "col-span--7" | "col-span--8" | "col-span--9" | "col-span--10" | "col-span--11" | "col-span--12" | "col-span--1";

package/lib/qbsTable/utilities/store.js

@@ -0,0 +1,66 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getGridColsClass = exports.getGridColSpanClass = void 0;
+var getGridColsClass = function getGridColsClass(count) {
+  switch (count) {
+    case 1:
+      return 'grid-cols-1';
+    case 2:
+      return 'grid-cols-2';
+    case 3:
+      return 'grid-cols-3';
+    case 4:
+      return 'grid-cols-4';
+    case 5:
+      return 'grid-cols-5';
+    case 6:
+      return 'grid-cols-6';
+    case 7:
+      return 'grid-cols-7';
+    case 8:
+      return 'grid-cols-8';
+    case 9:
+      return 'grid-cols-9';
+    case 10:
+      return 'grid-cols-10';
+    case 11:
+      return 'grid-cols-11';
+    case 12:
+      return 'grid-cols-12';
+    default:
+      return 'grid-cols-1';
+  }
+};
+exports.getGridColsClass = getGridColsClass;
+var getGridColSpanClass = function getGridColSpanClass(count) {
+  switch (count) {
+    case 1:
+      return 'col-span-1';
+    case 2:
+      return 'col-span-2';
+    case 3:
+      return 'col-span-3';
+    case 4:
+      return 'col-span-4';
+    case 5:
+      return 'col-span-5';
+    case 6:
+      return 'col-span--6';
+    case 7:
+      return 'col-span--7';
+    case 8:
+      return 'col-span--8';
+    case 9:
+      return 'col-span--9';
+    case 10:
+      return 'col-span--10';
+    case 11:
+      return 'col-span--11';
+    case 12:
+      return 'col-span--12';
+    default:
+      return 'col-span--1';
+  }
+};
+exports.getGridColSpanClass = getGridColSpanClass;

package/lib/utils/getTotalByColumns.js

@@ -11,7 +11,7 @@ function getTotalByColumns(columns) {
   var totalWidth = 0;
   var count = function count(items) {
     Array.from(items).forEach(function (column) {
-      if ( /*#__PURE__*/_react["default"].isValidElement(column)) {
+      if (/*#__PURE__*/_react["default"].isValidElement(column)) {
         var _getColumnProps = (0, _getColumnProps2["default"])(column),
           flexGrow = _getColumnProps.flexGrow,
           _getColumnProps$width = _getColumnProps.width,

package/lib/utils/mergeCells.js

@@ -51,7 +51,7 @@ function mergeCells(cells) {
             removed: true
           });
         }
-        groupChildren.push( /*#__PURE__*/_react["default"].createElement(_HeaderCell["default"], {
+        groupChildren.push(/*#__PURE__*/_react["default"].createElement(_HeaderCell["default"], {
           key: j,
           left: left,
           align: align,

package/lib/utils/useCellDescriptor.js

@@ -145,11 +145,11 @@ var useCellDescriptor = function useCellDescriptor(props) {
     totalFlexGrow = _getTotalByColumns.totalFlexGrow,
     totalWidth = _getTotalByColumns.totalWidth;
   _react["default"].Children.forEach(columns, function (column, index) {
-    if ( /*#__PURE__*/_react["default"].isValidElement(column)) {
+    if (/*#__PURE__*/_react["default"].isValidElement(column)) {
       var _initialColumnWidths$, _columnWidths$current;
       var columnChildren = column.props.children;
       var columnProps = (0, _getColumnProps["default"])(column);
-      var _width = columnProps.width,
+      var width = columnProps.width,
         resizable = columnProps.resizable,
         flexGrow = columnProps.flexGrow,
         minWidth = columnProps.minWidth,
@@ -168,23 +168,23 @@ var useCellDescriptor = function useCellDescriptor(props) {
       // get column width from cache.
       var initialColumnWidth = (_initialColumnWidths$ = initialColumnWidths.current) === null || _initialColumnWidths$ === void 0 ? void 0 : _initialColumnWidths$[cellWidthId];
       var currentWidth = (_columnWidths$current = columnWidths.current) === null || _columnWidths$current === void 0 ? void 0 : _columnWidths$current[cellWidthId];
-      var cellWidth = currentWidth || _width || 0;
-      var isControlled = typeof _width === 'number' && typeof onResize === 'function';
+      var cellWidth = currentWidth || width || 0;
+      var isControlled = typeof width === 'number' && typeof onResize === 'function';
 
       /**
        * in resizable mode,
        *    if width !== initialColumnWidth, use current column width and update cache.
        */
-      if (resizable && (initialColumnWidth || _width) && initialColumnWidth !== _width) {
+      if (resizable && (initialColumnWidth || width) && initialColumnWidth !== width) {
         // initial or update initialColumnWidth cache.
-        initialColumnWidths.current[cellWidthId] = _width;
+        initialColumnWidths.current[cellWidthId] = width;
         /**
          * if currentWidth exist, update columnWidths cache.
          */
         if (currentWidth) {
-          columnWidths.current[cellWidthId] = _width;
+          columnWidths.current[cellWidthId] = width;
           // update cellWidth
-          cellWidth = _width;
+          cellWidth = width;
         }
       }
       if (tableWidth.current && flexGrow && totalFlexGrow) {
@@ -200,7 +200,7 @@ var useCellDescriptor = function useCellDescriptor(props) {
         left: left,
         headerHeight: headerHeight,
         key: index,
-        width: isControlled ? _width : cellWidth,
+        width: isControlled ? width : cellWidth,
         height: typeof rowHeight === 'function' ? rowHeight() : rowHeight,
         firstColumn: index === 0,
         lastColumn: index === count - 1
@@ -227,9 +227,9 @@ var useCellDescriptor = function useCellDescriptor(props) {
             onColumnResizeMove: handleColumnResizeMove
           });
         }
-        headerCells.push( /*#__PURE__*/_react["default"].cloneElement(headerCell, (0, _extends2["default"])({}, cellProps, headerCellProps)));
+        headerCells.push(/*#__PURE__*/_react["default"].cloneElement(headerCell, (0, _extends2["default"])({}, cellProps, headerCellProps)));
       }
-      bodyCells.push( /*#__PURE__*/_react["default"].cloneElement(cell, cellProps));
+      bodyCells.push(/*#__PURE__*/_react["default"].cloneElement(cell, cellProps));
       left += cellWidth;
     }
   });

package/lib/utils/useClassNames.js

@@ -9,7 +9,9 @@ var _prefix = require("./prefix");
 var _TableContext = _interopRequireDefault(require("../TableContext"));
 // This is the only way I found to break circular references between ClassArray and ClassValue
 // https://github.com/Microsoft/TypeScript/issues/3496#issuecomment-128553540
+
 //eslint-disable-line @typescript-eslint/no-empty-interface
+
 /**
  * Add a prefix to all classNames.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qbs-react-grid",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "A React table component",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -43,7 +43,9 @@
     "@rsuite/icons": "^1.0.0",
     "classnames": "^2.3.1",
     "dom-lib": "^3.1.3",
+    "i": "^0.3.7",
     "lodash": "^4.17.21",
+    "npm": "^10.8.3",
     "react-is": "^17.0.2",
     "react-router-dom": "^6.21.0"
   },
@@ -51,8 +53,8 @@
     "prop-types": "^15.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rsuite": "^5.21.0",
-    "react-router-dom": "^6.21.0"
+    "react-router-dom": "^6.21.0",
+    "rsuite": "^5.21.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.12.8",
@@ -77,7 +79,7 @@
     "@types/react-dom": "^18.0.6",
     "@typescript-eslint/eslint-plugin": "^4.28.2",
     "@typescript-eslint/parser": "^4.28.2",
-    "autoprefixer": "^8.3.0",
+    "autoprefixer": "^10.4.20",
     "babel-loader": "^8.2.2",
     "babel-plugin-date-fns": "^0.2.1",
     "babel-plugin-istanbul": "^4.1.4",
@@ -87,7 +89,7 @@
     "coveralls": "^3.1.0",
     "cross-env": "^5.2.1",
     "css-loader": "^0.23.1",
-    "cssnano": "^4.1.10",
+    "cssnano": "^4.1.11",
     "cz-conventional-changelog": "^3.3.0",
     "del": "^5.1.0",
     "eslint": "^7.30.0",
@@ -102,7 +104,7 @@
     "gulp": "^4.0.2",
     "gulp-babel": "^8.0.0",
     "gulp-less": "^5.0.0",
-    "gulp-postcss": "^7.0.1",
+    "gulp-postcss": "^10.0.0",
     "gulp-rename": "^1.2.2",
     "gulp-rtlcss": "^1.4.1",
     "gulp-sourcemaps": "^2.6.4",
@@ -122,6 +124,8 @@
     "less-loader": "^11.0.0",
     "mini-css-extract-plugin": "^2.3.0",
     "mocha": "^9.0.2",
+    "postcss": "^8.4.47",
+    "postcss-loader": "^8.1.1",
     "prettier": "^2.3.2",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
@@ -133,6 +137,7 @@
     "sinon": "^11.1.2",
     "sinon-chai": "^3.7.0",
     "style-loader": "^0.13.1",
+    "tailwindcss": "^3.4.12",
     "ts-expect": "^1.3.0",
     "typescript": "^4.5.5",
     "url-loader": "^0.5.7",

package/src/less/index.less

@@ -1,3 +1,6 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 @import './themes.less';
 
 .rs {