qbs-react-grid 1.1.53 → 1.2.0

package/es/qbsTable/utilities/ColumShowHide.js

@@ -132,8 +132,8 @@ var ColumnToggle = function ColumnToggle(_ref) {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, /*#__PURE__*/React.createElement("path", {
-      "fill-rule": "evenodd",
-      "clip-rule": "evenodd",
+      fillRule: "evenodd",
+      clipRule: "evenodd",
       d: "M5.20898 2.05047C4.74187 2.22322 4.43921 2.6138 4.39879 3.09588C4.33861 3.81357 4.96751 4.44246 5.68519 4.38229C6.18026 4.3408 6.59243 4.00921 6.74267 3.53164C6.82103 3.2825 6.79574 2.93719 6.68125 2.6925C6.55895 2.43113 6.37419 2.24233 6.11569 2.11459C5.92365 2.01969 5.88078 2.00965 5.63395 2.00196C5.41672 1.99517 5.3325 2.00481 5.20898 2.05047ZM10.0416 2.04376C9.7 2.16569 9.46445 2.37622 9.31379 2.69422C9.23042 2.87016 9.22458 2.90286 9.22458 3.19315C9.22458 3.4899 9.22889 3.51259 9.32123 3.70051C9.69541 4.46214 10.6879 4.6208 11.2645 4.01115C11.8315 3.4116 11.6604 2.47093 10.918 2.10616C10.7441 2.02073 10.6936 2.0094 10.4529 2.00182C10.2481 1.99536 10.1488 2.00548 10.0416 2.04376ZM5.34893 6.82474C5.11292 6.87601 4.92872 6.97801 4.74901 7.15697C4.27637 7.62757 4.27637 8.36852 4.74901 8.8401C5.21569 9.30575 5.93107 9.31874 6.40536 8.87018C6.66595 8.62374 6.78644 8.34805 6.78644 7.99837C6.78644 7.651 6.66578 7.37282 6.41027 7.13118C6.22719 6.95803 6.07668 6.87885 5.83216 6.82702C5.61146 6.78023 5.55503 6.77998 5.34893 6.82474ZM10.1516 6.82829C9.9209 6.87849 9.7661 6.96147 9.58667 7.13118C9.33115 7.37282 9.21049 7.651 9.21049 7.99837C9.21049 8.34805 9.33098 8.62374 9.59157 8.87018C10.0659 9.31877 10.7812 9.30577 11.2479 8.8401C11.7206 8.36852 11.7206 7.62822 11.2479 7.15663C11.0647 6.97379 10.8553 6.86282 10.6076 6.81715C10.4048 6.77981 10.3707 6.78062 10.1516 6.82829ZM5.28951 11.6453C4.97314 11.737 4.66594 11.9881 4.52416 12.271C4.19001 12.9376 4.53174 13.7326 5.24943 13.9583C5.37001 13.9962 5.47168 14.0058 5.65873 13.9969C5.87526 13.9865 5.93484 13.9715 6.11704 13.8815C6.52155 13.6816 6.75995 13.3194 6.78131 12.8724C6.79558 12.5741 6.74746 12.3902 6.59238 12.1502C6.46455 11.9525 6.23962 11.7698 6.02016 11.6857C5.83188 11.6135 5.46864 11.5934 5.28951 11.6453ZM10.0849 11.6514C9.75841 11.7392 9.47967 11.9748 9.32098 12.2972C9.22892 12.4841 9.22458 12.5069 9.22458 12.8036C9.22458 13.0943 9.23033 13.1264 9.31435 13.3037C9.43911 13.5671 9.62317 13.7546 9.88296 13.883C10.0896 13.9851 10.1041 13.988 10.4075 13.988C10.706 13.988 10.7283 13.9838 10.9164 13.8914C11.6598 13.5261 11.8321 12.5858 11.2655 11.9867C10.9589 11.6624 10.5141 11.5361 10.0849 11.6514Z",
       fill: "#999696"
     }))));

package/es/qbsTable/utilities/icons.js

@@ -9,9 +9,9 @@ export var ThreeDotIcon = function ThreeDotIcon() {
   }, /*#__PURE__*/React.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-width": "1.5",
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round"
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
   }));
 };
 export var SettingsIcon = function SettingsIcon() {
@@ -22,18 +22,18 @@ export var SettingsIcon = function SettingsIcon() {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
+    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-width": "1.5",
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round"
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
   }), /*#__PURE__*/React.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-width": "1.5",
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round"
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
   }));
 };

package/lib/CustomSelect.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+type CustomSelectProps = {
+    options: number[];
+    selectedValue: number;
+    onChange: (value: number) => void;
+};
+declare const CustomSelect: FC<CustomSelectProps>;
+export default CustomSelect;

package/lib/Pagination.js

@@ -1,47 +1,46 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _tablecalc = require("./qbsTable/utilities/tablecalc");
+var _CustomSelect = _interopRequireDefault(require("./CustomSelect"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+// Import the custom select component
+
 var PageIndex = function PageIndex(_ref) {
   var currentPage = _ref.currentPage,
     handleFirst = _ref.handleFirst,
     pageCount = _ref.pageCount;
   var renderPageNumbers = function renderPageNumbers() {
     var pageNumbers = [];
-
-    // Add ellipsis if necessary
     if (currentPage > 3) {
       pageNumbers.push('...');
     }
     for (var i = Math.max(1, currentPage - 2); i <= Math.min(pageCount, currentPage + 2); i++) {
       pageNumbers.push(i);
     }
-
-    // Add ellipsis if necessary
     if (currentPage < pageCount - 2) {
       pageNumbers.push('...');
     }
     return pageNumbers.map(function (pageNumber) {
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, pageNumber !== '...' ? /*#__PURE__*/_react["default"].createElement("span", {
-        key: pageNumber,
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+        key: pageNumber
+      }, pageNumber !== '...' ? /*#__PURE__*/_react["default"].createElement("span", {
         onClick: function onClick() {
           return handleFirst(pageNumber);
         },
         className: "block-item " + (pageNumber === currentPage ? 'selected' : '')
       }, pageNumber) : /*#__PURE__*/_react["default"].createElement("span", {
-        key: pageNumber,
-        className: "block-item " + (pageNumber === currentPage ? 'selected' : '')
+        className: "block-item"
       }, pageNumber));
     });
   };
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, renderPageNumbers());
 };
 var Pagination = function Pagination(_ref2) {
-  var _paginationProps$tota2, _paginationProps$rows2, _paginationProps$curr2;
   var paginationProps = _ref2.paginationProps;
   var _paginationProps$drop = paginationProps.dropOptions,
     dropOptions = _paginationProps$drop === void 0 ? [10, 20, 50, 100, 200] : _paginationProps$drop,
@@ -60,8 +59,7 @@ var Pagination = function Pagination(_ref2) {
   var _useState2 = (0, _react.useState)(1),
     pageCount = _useState2[0],
     setPageCount = _useState2[1];
-  var handleRowsPerPage = function handleRowsPerPage(e) {
-    var value = parseInt(e.target.value);
+  var handleRowsPerPage = function handleRowsPerPage(value) {
     setRowsPerPageState(value);
     onRowsPerPage === null || onRowsPerPage === void 0 ? void 0 : onRowsPerPage(value, currentPage);
   };
@@ -83,18 +81,18 @@ var Pagination = function Pagination(_ref2) {
     onPagination === null || onPagination === void 0 ? void 0 : onPagination(currentPage + 1, currentPage);
   };
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: 'qbs-table-custom-pagination',
+    className: "qbs-table-custom-pagination",
     style: {
       display: 'flex',
       justifyContent: 'space-between'
     }
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "rows-count"
-  }, (0, _tablecalc.getRowDisplayRange)((_paginationProps$tota2 = paginationProps.total) != null ? _paginationProps$tota2 : 0, (_paginationProps$rows2 = paginationProps.rowsPerPage) != null ? _paginationProps$rows2 : 0, (_paginationProps$curr2 = paginationProps.currentPage) != null ? _paginationProps$curr2 : 0)), /*#__PURE__*/_react["default"].createElement("div", {
+  }, (0, _tablecalc.getRowDisplayRange)(total, rowsPerPageState, currentPage)), /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-pagination-right-block"
   }, /*#__PURE__*/_react["default"].createElement("button", {
     className: "qbs-table-icon-container",
-    disabled: currentPage == 1,
+    disabled: currentPage === 1,
     onClick: function onClick() {
       return handleFirst(1);
     }
@@ -113,9 +111,7 @@ var Pagination = function Pagination(_ref2) {
   }))), /*#__PURE__*/_react["default"].createElement("button", {
     className: "qbs-table-icon-container",
     disabled: currentPage < 2,
-    onClick: function onClick() {
-      return handlePrevious();
-    }
+    onClick: handlePrevious
   }, /*#__PURE__*/_react["default"].createElement("svg", {
     width: "20",
     height: "20",
@@ -138,9 +134,7 @@ var Pagination = function Pagination(_ref2) {
   })), /*#__PURE__*/_react["default"].createElement("button", {
     className: "qbs-table-icon-container",
     disabled: currentPage === pageCount || pageCount === 0,
-    onClick: function onClick() {
-      return handleNext();
-    }
+    onClick: handleNext
   }, /*#__PURE__*/_react["default"].createElement("svg", {
     width: "20",
     height: "20",
@@ -155,10 +149,8 @@ var Pagination = function Pagination(_ref2) {
     strokeLinejoin: "round"
   }))), /*#__PURE__*/_react["default"].createElement("button", {
     className: "qbs-table-icon-container",
-    disabled: currentPage == pageCount || pageCount === 0,
-    onClick: function onClick() {
-      return handleLast();
-    }
+    disabled: currentPage === pageCount || pageCount === 0,
+    onClick: handleLast
   }, /*#__PURE__*/_react["default"].createElement("svg", {
     width: "20",
     height: "20",
@@ -175,18 +167,11 @@ var Pagination = function Pagination(_ref2) {
     className: "qbs-table-pagination-flexBox"
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: "qbs-table-pagination-text"
-  }, "Items per page"), /*#__PURE__*/_react["default"].createElement("select", {
-    onChange: function onChange(e) {
-      return handleRowsPerPage(e);
-    },
-    className: "qbs-table-pagination-dropdown",
-    value: rowsPerPageState
-  }, dropData === null || dropData === void 0 ? void 0 : dropData.map(function (item) {
-    return /*#__PURE__*/_react["default"].createElement("option", {
-      value: item,
-      key: item
-    }, item);
-  }))));
+  }, "Items per page"), /*#__PURE__*/_react["default"].createElement(_CustomSelect["default"], {
+    options: dropData,
+    selectedValue: rowsPerPageState,
+    onChange: handleRowsPerPage
+  })));
 };
 var _default = Pagination;
 exports["default"] = _default;

package/lib/customSelect.js

@@ -0,0 +1,84 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+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 CustomSelect = function CustomSelect(_ref) {
+  var options = _ref.options,
+    selectedValue = _ref.selectedValue,
+    onChange = _ref.onChange;
+  var _useState = (0, _react.useState)(false),
+    isOpen = _useState[0],
+    setIsOpen = _useState[1];
+  var _useState2 = (0, _react.useState)('bottom'),
+    dropdownPosition = _useState2[0],
+    setDropdownPosition = _useState2[1];
+  var ref = (0, _react.useRef)(null);
+  var inputRef = (0, _react.useRef)(null);
+  var adjustDropdownPosition = function adjustDropdownPosition() {
+    if (inputRef.current) {
+      var inputBoxRect = inputRef.current.getBoundingClientRect();
+      var viewportHeight = window.innerHeight;
+      var spaceAbove = inputBoxRect.top;
+      var spaceBelow = viewportHeight - inputBoxRect.bottom;
+      if (spaceAbove > spaceBelow) {
+        setDropdownPosition('top');
+      } else {
+        setDropdownPosition('bottom');
+      }
+    }
+  };
+  var handleToggle = function handleToggle() {
+    setIsOpen(function (prevIsOpen) {
+      return !prevIsOpen;
+    });
+  };
+  var handleSelect = function handleSelect(value) {
+    onChange(value);
+    setIsOpen(false);
+  };
+  var handleClickOutside = function handleClickOutside(event) {
+    if (ref.current && !ref.current.contains(event.target)) {
+      setIsOpen(false);
+    }
+  };
+  (0, _react.useEffect)(function () {
+    if (isOpen) {
+      adjustDropdownPosition();
+      window.addEventListener('resize', adjustDropdownPosition);
+    } else {
+      window.removeEventListener('resize', adjustDropdownPosition);
+    }
+    return function () {
+      window.removeEventListener('resize', adjustDropdownPosition);
+    };
+  }, [isOpen]);
+  (0, _react.useEffect)(function () {
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "custom-select",
+    ref: ref
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "custom-select-trigger",
+    onClick: handleToggle,
+    ref: inputRef
+  }, selectedValue), isOpen && /*#__PURE__*/_react["default"].createElement("ul", {
+    className: "custom-select-options " + dropdownPosition
+  }, options.map(function (option) {
+    return /*#__PURE__*/_react["default"].createElement("li", {
+      key: option,
+      className: "custom-select-option " + (option === selectedValue ? 'selected' : ''),
+      onClick: function onClick() {
+        return handleSelect(option);
+      }
+    }, option);
+  })));
+};
+var _default = CustomSelect;
+exports["default"] = _default;

package/lib/less/pagination.less

@@ -17,8 +17,8 @@
     }
   }
   .qbs-table-pagination-dropdown {
-    width: auto;
-    height: 24px;
+    width: 65px;
+    height: 26px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -116,3 +116,62 @@
 .qbs-table-custom-pagination .qbs-table-pagination-dropdown:focus {
   outline: none;
 }
+
+.custom-select {
+  position: relative;
+  display: inline-block;
+}
+
+.custom-select-trigger {
+  padding: 2px 8px;
+  cursor: pointer;
+  border: 1px solid #d6d8dc;
+  border-radius: 4px;
+  min-width: 65px;
+  position: relative;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.custom-select-options {
+  position: absolute;
+  width: 100%;
+  z-index: 1000;
+  list-style: none;
+  margin: 2px 0 0;
+  padding: 0;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 8px 20px 0 #00000026;
+}
+
+ul.custom-select-options.top {
+  bottom: 100%;
+}
+
+.custom-select-option {
+  padding: 6px 8px;
+  cursor: pointer;
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.custom-select-option:hover,
+.custom-select-option.selected {
+  background-color: #f0f0f0;
+}
+
+.custom-select-trigger:before {
+  content: "";
+  position: absolute;
+  right: 10px;
+  top: 6px;
+  font-weight: bold;
+  border: solid black;
+  border-width: 0 1px 1px 0;
+  display: inline-block;
+  padding: 3px;
+  vertical-align: middle;
+  transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+}

package/lib/qbsTable/CustomTableCell.js

@@ -84,7 +84,29 @@ var ExpandCell = /*#__PURE__*/_react["default"].memo(function (_ref3) {
     }
   }, expandedRowKeys.some(function (key) {
     return key === rowData[dataKey];
-  }) ? '-' : '+'));
+  }) ? /*#__PURE__*/_react["default"].createElement("svg", {
+    width: "11",
+    height: "6",
+    viewBox: "0 0 11 6",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0.792893 0.292893C1.18342 -0.097631 1.81658 -0.097631 2.20711 0.292893L5.5 3.58579L8.79289 0.292893C9.18342 -0.0976311 9.81658 -0.0976311 10.2071 0.292893C10.5976 0.683417 10.5976 1.31658 10.2071 1.70711L6.20711 5.70711C5.81658 6.09763 5.18342 6.09763 4.79289 5.70711L0.792893 1.70711C0.402369 1.31658 0.402369 0.683417 0.792893 0.292893Z",
+    fill: "#313131"
+  })) : /*#__PURE__*/_react["default"].createElement("svg", {
+    width: "7",
+    height: "10",
+    viewBox: "0 0 7 10",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0.792894 9.70711C0.402369 9.31658 0.402369 8.68342 0.792894 8.29289L4.08579 5L0.792893 1.70711C0.402369 1.31658 0.402369 0.683418 0.792893 0.292894C1.18342 -0.0976312 1.81658 -0.0976312 2.20711 0.292894L6.20711 4.29289C6.59763 4.68342 6.59763 5.31658 6.20711 5.70711L2.20711 9.70711C1.81658 10.0976 1.18342 10.0976 0.792894 9.70711Z",
+    fill: "#313131"
+  }))));
 });
 exports.ExpandCell = ExpandCell;
 var CustomTableCell = /*#__PURE__*/_react["default"].memo(function (_ref4) {

package/lib/qbsTable/utilities/ColumShowHide.js

@@ -138,8 +138,8 @@ var ColumnToggle = function ColumnToggle(_ref) {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, /*#__PURE__*/_react["default"].createElement("path", {
-      "fill-rule": "evenodd",
-      "clip-rule": "evenodd",
+      fillRule: "evenodd",
+      clipRule: "evenodd",
       d: "M5.20898 2.05047C4.74187 2.22322 4.43921 2.6138 4.39879 3.09588C4.33861 3.81357 4.96751 4.44246 5.68519 4.38229C6.18026 4.3408 6.59243 4.00921 6.74267 3.53164C6.82103 3.2825 6.79574 2.93719 6.68125 2.6925C6.55895 2.43113 6.37419 2.24233 6.11569 2.11459C5.92365 2.01969 5.88078 2.00965 5.63395 2.00196C5.41672 1.99517 5.3325 2.00481 5.20898 2.05047ZM10.0416 2.04376C9.7 2.16569 9.46445 2.37622 9.31379 2.69422C9.23042 2.87016 9.22458 2.90286 9.22458 3.19315C9.22458 3.4899 9.22889 3.51259 9.32123 3.70051C9.69541 4.46214 10.6879 4.6208 11.2645 4.01115C11.8315 3.4116 11.6604 2.47093 10.918 2.10616C10.7441 2.02073 10.6936 2.0094 10.4529 2.00182C10.2481 1.99536 10.1488 2.00548 10.0416 2.04376ZM5.34893 6.82474C5.11292 6.87601 4.92872 6.97801 4.74901 7.15697C4.27637 7.62757 4.27637 8.36852 4.74901 8.8401C5.21569 9.30575 5.93107 9.31874 6.40536 8.87018C6.66595 8.62374 6.78644 8.34805 6.78644 7.99837C6.78644 7.651 6.66578 7.37282 6.41027 7.13118C6.22719 6.95803 6.07668 6.87885 5.83216 6.82702C5.61146 6.78023 5.55503 6.77998 5.34893 6.82474ZM10.1516 6.82829C9.9209 6.87849 9.7661 6.96147 9.58667 7.13118C9.33115 7.37282 9.21049 7.651 9.21049 7.99837C9.21049 8.34805 9.33098 8.62374 9.59157 8.87018C10.0659 9.31877 10.7812 9.30577 11.2479 8.8401C11.7206 8.36852 11.7206 7.62822 11.2479 7.15663C11.0647 6.97379 10.8553 6.86282 10.6076 6.81715C10.4048 6.77981 10.3707 6.78062 10.1516 6.82829ZM5.28951 11.6453C4.97314 11.737 4.66594 11.9881 4.52416 12.271C4.19001 12.9376 4.53174 13.7326 5.24943 13.9583C5.37001 13.9962 5.47168 14.0058 5.65873 13.9969C5.87526 13.9865 5.93484 13.9715 6.11704 13.8815C6.52155 13.6816 6.75995 13.3194 6.78131 12.8724C6.79558 12.5741 6.74746 12.3902 6.59238 12.1502C6.46455 11.9525 6.23962 11.7698 6.02016 11.6857C5.83188 11.6135 5.46864 11.5934 5.28951 11.6453ZM10.0849 11.6514C9.75841 11.7392 9.47967 11.9748 9.32098 12.2972C9.22892 12.4841 9.22458 12.5069 9.22458 12.8036C9.22458 13.0943 9.23033 13.1264 9.31435 13.3037C9.43911 13.5671 9.62317 13.7546 9.88296 13.883C10.0896 13.9851 10.1041 13.988 10.4075 13.988C10.706 13.988 10.7283 13.9838 10.9164 13.8914C11.6598 13.5261 11.8321 12.5858 11.2655 11.9867C10.9589 11.6624 10.5141 11.5361 10.0849 11.6514Z",
       fill: "#999696"
     }))));

package/lib/qbsTable/utilities/icons.js

@@ -14,9 +14,9 @@ var ThreeDotIcon = function ThreeDotIcon() {
   }, /*#__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-width": "1.5",
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round"
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
   }));
 };
 exports.ThreeDotIcon = ThreeDotIcon;
@@ -28,19 +28,19 @@ var SettingsIcon = function SettingsIcon() {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/_react["default"].createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
+    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-width": "1.5",
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round"
+    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-width": "1.5",
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round"
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
   }));
 };
 exports.SettingsIcon = SettingsIcon;

package/package.json

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

package/src/Pagination.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useEffect, useState } from 'react';
-
 import { getRowDisplayRange } from './qbsTable/utilities/tablecalc';
+import CustomSelect from './CustomSelect'; // Import the custom select component
 
 type PageProps = {
   paginationProps: {
@@ -13,11 +13,11 @@ type PageProps = {
     onPagination?: (row: number, page: number) => void;
   };
 };
+
 const PageIndex = ({ currentPage, handleFirst, pageCount }) => {
   const renderPageNumbers = () => {
     const pageNumbers: any = [];
 
-    // Add ellipsis if necessary
     if (currentPage > 3) {
       pageNumbers.push('...');
     }
@@ -26,35 +26,29 @@ const PageIndex = ({ currentPage, handleFirst, pageCount }) => {
       pageNumbers.push(i);
     }
 
-    // Add ellipsis if necessary
     if (currentPage < pageCount - 2) {
       pageNumbers.push('...');
     }
 
     return pageNumbers.map((pageNumber: any) => (
-      <>
+      <React.Fragment key={pageNumber}>
         {pageNumber !== '...' ? (
           <span
-            key={pageNumber}
             onClick={() => handleFirst(pageNumber)}
             className={`block-item ${pageNumber === currentPage ? 'selected' : ''}`}
           >
             {pageNumber}
           </span>
         ) : (
-          <span
-            key={pageNumber}
-            className={`block-item ${pageNumber === currentPage ? 'selected' : ''}`}
-          >
-            {pageNumber}
-          </span>
+          <span className="block-item">{pageNumber}</span>
         )}
-      </>
+      </React.Fragment>
     ));
   };
 
   return <>{renderPageNumbers()}</>;
 };
+
 const Pagination: FC<PageProps> = ({ paginationProps }) => {
   const {
     dropOptions = [10, 20, 50, 100, 200],
@@ -66,14 +60,14 @@ const Pagination: FC<PageProps> = ({ paginationProps }) => {
   } = paginationProps;
 
   const [rowsPerPageState, setRowsPerPageState] = useState(rowsPerPage);
-
   const dropData = dropOptions ?? [10, 20, 50, 100, 200];
   const [pageCount, setPageCount] = useState(1);
-  const handleRowsPerPage = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const value = parseInt(e.target.value);
+
+  const handleRowsPerPage = (value: number) => {
     setRowsPerPageState(value);
     onRowsPerPage?.(value, currentPage);
   };
+
   const handleFirst = (index: number) => {
     onPagination?.(index, currentPage);
   };
@@ -91,26 +85,21 @@ const Pagination: FC<PageProps> = ({ paginationProps }) => {
   const handlePrevious = () => {
     onPagination?.(currentPage - 1, currentPage);
   };
+
   const handleNext = () => {
     onPagination?.(currentPage + 1, currentPage);
   };
 
   return (
     <div
-      className={'qbs-table-custom-pagination'}
+      className="qbs-table-custom-pagination"
       style={{ display: 'flex', justifyContent: 'space-between' }}
     >
-      <div className="rows-count">
-        {getRowDisplayRange(
-          paginationProps.total ?? 0,
-          paginationProps.rowsPerPage ?? 0,
-          paginationProps.currentPage ?? 0
-        )}
-      </div>
+      <div className="rows-count">{getRowDisplayRange(total, rowsPerPageState, currentPage)}</div>
       <div className="qbs-table-pagination-right-block">
         <button
           className="qbs-table-icon-container"
-          disabled={currentPage == 1}
+          disabled={currentPage === 1}
           onClick={() => handleFirst(1)}
         >
           <svg
@@ -132,7 +121,7 @@ const Pagination: FC<PageProps> = ({ paginationProps }) => {
         <button
           className="qbs-table-icon-container"
           disabled={currentPage < 2}
-          onClick={() => handlePrevious()}
+          onClick={handlePrevious}
         >
           <svg
             width="20"
@@ -161,7 +150,7 @@ const Pagination: FC<PageProps> = ({ paginationProps }) => {
         <button
           className="qbs-table-icon-container"
           disabled={currentPage === pageCount || pageCount === 0}
-          onClick={() => handleNext()}
+          onClick={handleNext}
         >
           <svg
             width="20"
@@ -181,8 +170,8 @@ const Pagination: FC<PageProps> = ({ paginationProps }) => {
         </button>
         <button
           className="qbs-table-icon-container"
-          disabled={currentPage == pageCount || pageCount === 0}
-          onClick={() => handleLast()}
+          disabled={currentPage === pageCount || pageCount === 0}
+          onClick={handleLast}
         >
           <svg
             width="20"
@@ -203,19 +192,14 @@ const Pagination: FC<PageProps> = ({ paginationProps }) => {
       </div>
       <div className="qbs-table-pagination-flexBox">
         <span className="qbs-table-pagination-text">Items per page</span>
-        <select
-          onChange={e => handleRowsPerPage(e)}
-          className="qbs-table-pagination-dropdown"
-          value={rowsPerPageState}
-        >
-          {dropData?.map(item => (
-            <option value={item} key={item}>
-              {item}
-            </option>
-          ))}
-        </select>
+        <CustomSelect
+          options={dropData}
+          selectedValue={rowsPerPageState}
+          onChange={handleRowsPerPage}
+        />
       </div>
     </div>
   );
 };
+
 export default Pagination;