tabler-react-2 0.1.125 → 0.1.127

package/dist/input/dropdown.js

@@ -44,24 +44,18 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
     maxHeight = _ref$maxHeight === void 0 ? "300px" : _ref$maxHeight,
     required = _ref.required,
     props = _objectWithoutProperties(_ref, _excluded);
-  // Allow aliasing: pass either `values` or `items`
   var values = ivalues || items || [];
-
-  // Helper: extract text from label or dropdownText for filtering
   var getLabelText = function getLabelText(val) {
     var _val$dropdownText;
-    // if it's a header/divider, it won't have dropdownText or label
+    if (val.type === "header") return String(val.text);
     var node = (_val$dropdownText = val.dropdownText) !== null && _val$dropdownText !== void 0 ? _val$dropdownText : val.label;
     if (typeof node === "string" || typeof node === "number") {
       return String(node);
     }
-    var children = _react.Children.toArray(node);
-    return children.map(function (c) {
-      return typeof c === "string" ? c : "";
+    return _react.Children.toArray(node).filter(function (c) {
+      return typeof c === "string";
     }).join("");
   };
-
-  // loading state
   if (loading) {
     return /*#__PURE__*/_react["default"].createElement(_index.Util.Col, null, showLabel && label && /*#__PURE__*/_react["default"].createElement("label", {
       className: "form-label"
@@ -70,8 +64,6 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
       disabled: true
     }, prompt));
   }
-
-  // disabled state
   if (disabled) {
     return /*#__PURE__*/_react["default"].createElement(_index.Util.Col, null, showLabel && label && /*#__PURE__*/_react["default"].createElement("label", {
       className: "form-label"
@@ -79,13 +71,9 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
       disabled: true
     }, disabledText || prompt));
   }
-
-  // Helper: if value is an object, use its id; otherwise, assume the value itself is the id.
   var getId = function getId(val) {
     return _typeof(val) === "object" && val !== null ? val.id : val;
   };
-
-  // State for selected value + search
   var _useState = (0, _react.useState)(values.find(function (v) {
       return v.id === getId(value);
     }) || null),
@@ -100,8 +88,6 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     filteredValues = _useState6[0],
     setFilteredValues = _useState6[1];
-
-  // sync selectedValue when prop changes
   (0, _react.useEffect)(function () {
     var match = values.find(function (v) {
       return v.id === getId(value);
@@ -112,25 +98,22 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
     var _str$toLowerCase;
     return str === null || str === void 0 || (_str$toLowerCase = str.toLowerCase()) === null || _str$toLowerCase === void 0 ? void 0 : _str$toLowerCase.replace(/[\s_\-+]+/g, "");
   };
-
-  // filter logic
   (0, _react.useEffect)(function () {
     setFilteredValues(values.filter(function (v) {
       var _v$searchIndex;
-      // always keep headers/dividers
       if (v.type === "divider" || v.type === "header") return true;
-      var labelText = getLabelText(v).toLowerCase();
-      return labelText.includes(searchQuery.toLowerCase()) || normalize((_v$searchIndex = v.searchIndex) !== null && _v$searchIndex !== void 0 ? _v$searchIndex : "").includes(normalize(searchQuery));
+      var text = getLabelText(v).toLowerCase();
+      return text.includes(searchQuery.toLowerCase()) || normalize((_v$searchIndex = v.searchIndex) !== null && _v$searchIndex !== void 0 ? _v$searchIndex : "").includes(normalize(searchQuery));
     }));
   }, [searchQuery, values]);
   var handleSelection = function handleSelection(val) {
     setSelectedValue(val);
-    onChange === null || onChange === void 0 || onChange(val);
+    onChange(val);
   };
   var dropdownContent = /*#__PURE__*/_react["default"].createElement("div", _extends({
     className: "dropdown"
   }, props), /*#__PURE__*/_react["default"].createElement("a", _extends({
-    href: "#",
+    href: "javascript:void(0)",
     className: "btn dropdown-toggle ".concat(props.disabled ? "disabled" : "", " ").concat(color ? "btn-".concat(outline ? "outline-" : "").concat(color) : ""),
     "data-bs-toggle": "dropdown"
   }, aprops), selectedValue ? selectedValue.label : prompt), /*#__PURE__*/_react["default"].createElement("div", {
@@ -162,18 +145,21 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
         className: "dropdown-header"
       }, v.text);
     }
-    // normal item
-    var isActive = (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.id) === (_typeof(v) === "object" ? v.id : v);
+    var isActive = (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.id) === v.id;
+    var isItemDisabled = v.disabled === true;
     return /*#__PURE__*/_react["default"].createElement("a", {
       key: (_v$id = v.id) !== null && _v$id !== void 0 ? _v$id : i,
-      className: "dropdown-item".concat(isActive ? " active" : ""),
+      className: "dropdown-item".concat(isActive ? " active" : "").concat(isItemDisabled ? " disabled" : ""),
       onClick: function onClick() {
-        return handleSelection(v);
+        return !isItemDisabled && handleSelection(v);
       },
       style: {
-        cursor: "pointer"
-      }
-    }, (_v$dropdownText = v.dropdownText) !== null && _v$dropdownText !== void 0 ? _v$dropdownText : v.label);
+        cursor: isItemDisabled ? "not-allowed" : "pointer"
+      },
+      href: v.href || "javascript:void(0)"
+    }, v.icon && /*#__PURE__*/_react["default"].createElement("span", {
+      className: "dropdown-item-icon"
+    }, v.icon), (_v$dropdownText = v.dropdownText) !== null && _v$dropdownText !== void 0 ? _v$dropdownText : v.label);
   }), filteredValues.length === 0 && /*#__PURE__*/_react["default"].createElement("div", {
     className: "dropdown-item text-muted"
   }, "No results found"))));
@@ -183,26 +169,21 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
 };
 DropdownInput.propTypes = {
   prompt: _propTypes["default"].string.isRequired,
-  // support headers, dividers, and normal items
-  values: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([
-  // divider
-  _propTypes["default"].shape({
+  values: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].shape({
     type: _propTypes["default"].oneOf(["divider"]).isRequired
-  }),
-  // header
-  _propTypes["default"].shape({
+  }), _propTypes["default"].shape({
     type: _propTypes["default"].oneOf(["header"]).isRequired,
     text: _propTypes["default"].string.isRequired
-  }),
-  // normal selectable item
-  _propTypes["default"].shape({
+  }), _propTypes["default"].shape({
     id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired,
     label: _propTypes["default"].string.isRequired,
     dropdownText: _propTypes["default"].string,
-    searchIndex: _propTypes["default"].string
+    searchIndex: _propTypes["default"].string,
+    disabled: _propTypes["default"].bool,
+    href: _propTypes["default"].string,
+    icon: _propTypes["default"].node
   })])),
   items: _propTypes["default"].array,
-  // alias for values
   value: _propTypes["default"].oneOfType([_propTypes["default"].shape({
     id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired
   }), _propTypes["default"].string, _propTypes["default"].number]),

package/dist/table/index.js

@@ -4,9 +4,10 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Table = void 0;
+exports.Table = exports.IconSortDescending = exports.IconSortAscending = exports.IconArrowsSort = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _index = require("../index");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -20,7 +21,7 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-var IconSortDescending = function IconSortDescending(_ref) {
+var IconSortDescending = exports.IconSortDescending = function IconSortDescending(_ref) {
   var size = _ref.size;
   return /*#__PURE__*/_react["default"].createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -49,7 +50,7 @@ var IconSortDescending = function IconSortDescending(_ref) {
     d: "M18 6l0 12"
   }));
 };
-var IconSortAscending = function IconSortAscending(_ref2) {
+var IconSortAscending = exports.IconSortAscending = function IconSortAscending(_ref2) {
   var size = _ref2.size;
   return /*#__PURE__*/_react["default"].createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -78,7 +79,7 @@ var IconSortAscending = function IconSortAscending(_ref2) {
     d: "M18 6l0 12"
   }));
 };
-var IconArrowsSort = function IconArrowsSort(_ref3) {
+var IconArrowsSort = exports.IconArrowsSort = function IconArrowsSort(_ref3) {
   var size = _ref3.size;
   return /*#__PURE__*/_react["default"].createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -109,9 +110,16 @@ var getValueByAccessor = function getValueByAccessor(object, accessor) {
 var Table = exports.Table = function Table(_ref4) {
   var columns = _ref4.columns,
     data = _ref4.data,
-    nowrap = _ref4.nowrap,
-    stickyHeader = _ref4.stickyHeader,
-    className = _ref4.className;
+    _ref4$nowrap = _ref4.nowrap,
+    nowrap = _ref4$nowrap === void 0 ? false : _ref4$nowrap,
+    _ref4$stickyHeader = _ref4.stickyHeader,
+    stickyHeader = _ref4$stickyHeader === void 0 ? false : _ref4$stickyHeader,
+    _ref4$className = _ref4.className,
+    className = _ref4$className === void 0 ? "" : _ref4$className,
+    _ref4$showPagination = _ref4.showPagination,
+    showPagination = _ref4$showPagination === void 0 ? false : _ref4$showPagination,
+    _ref4$defaultRowsPerP = _ref4.defaultRowsPerPage,
+    defaultRowsPerPage = _ref4$defaultRowsPerP === void 0 ? 10 : _ref4$defaultRowsPerP;
   var _useState = (0, _react.useState)({
       key: null,
       direction: "asc"
@@ -119,6 +127,14 @@ var Table = exports.Table = function Table(_ref4) {
     _useState2 = _slicedToArray(_useState, 2),
     sortConfig = _useState2[0],
     setSortConfig = _useState2[1];
+  var _useState3 = (0, _react.useState)(1),
+    _useState4 = _slicedToArray(_useState3, 2),
+    currentPage = _useState4[0],
+    setCurrentPage = _useState4[1];
+  var _useState5 = (0, _react.useState)(defaultRowsPerPage),
+    _useState6 = _slicedToArray(_useState5, 2),
+    pageSize = _useState6[0],
+    setPageSize = _useState6[1];
   var defaultSortFn = function defaultSortFn(a, b) {
     if (a === b) return 0;
     return a > b ? 1 : -1;
@@ -132,24 +148,32 @@ var Table = exports.Table = function Table(_ref4) {
       key: accessor,
       direction: direction
     });
+    setCurrentPage(1);
   };
-  var sortedData = _react["default"].useMemo(function () {
-    if (sortConfig.key) {
-      var key = sortConfig.key,
-        direction = sortConfig.direction;
-      var sortColumn = columns.find(function (col) {
-        return col.accessor === key;
-      });
-      var sortFunction = (sortColumn === null || sortColumn === void 0 ? void 0 : sortColumn.sortFn) || defaultSortFn;
-      return _toConsumableArray(data).sort(function (a, b) {
-        var aValue = getValueByAccessor(a, key);
-        var bValue = getValueByAccessor(b, key);
-        var order = direction === "asc" ? 1 : -1;
-        return sortFunction(aValue, bValue) * order;
-      });
-    }
-    return data;
+  var sortedData = (0, _react.useMemo)(function () {
+    if (!sortConfig.key) return data;
+    var key = sortConfig.key,
+      direction = sortConfig.direction;
+    var sortColumn = columns.find(function (col) {
+      return col.accessor === key;
+    });
+    var sortFunction = (sortColumn === null || sortColumn === void 0 ? void 0 : sortColumn.sortFn) || defaultSortFn;
+    var order = direction === "asc" ? 1 : -1;
+    return _toConsumableArray(data).sort(function (a, b) {
+      var aValue = getValueByAccessor(a, key);
+      var bValue = getValueByAccessor(b, key);
+      return sortFunction(aValue, bValue) * order;
+    });
   }, [data, sortConfig, columns]);
+  var pageSizeOptions = [10, 25, 50, 100];
+  var totalPages = (0, _react.useMemo)(function () {
+    return Math.max(1, Math.ceil(sortedData.length / pageSize));
+  }, [sortedData, pageSize]);
+  var paginatedData = (0, _react.useMemo)(function () {
+    if (!showPagination) return sortedData;
+    var start = (currentPage - 1) * pageSize;
+    return sortedData.slice(start, start + pageSize);
+  }, [sortedData, currentPage, pageSize, showPagination]);
   var getSortIcon = function getSortIcon(column) {
     if (sortConfig.key === column.accessor) {
       return sortConfig.direction === "asc" ? /*#__PURE__*/_react["default"].createElement(IconSortAscending, {
@@ -166,26 +190,26 @@ var Table = exports.Table = function Table(_ref4) {
     className: "table-responsive ".concat(nowrap ? "table-nowrap" : "", " ").concat(className)
   }, /*#__PURE__*/_react["default"].createElement("table", {
     className: "table table-vcenter ".concat(stickyHeader ? "sticky-top" : "")
-  }, /*#__PURE__*/_react["default"].createElement("thead", null, /*#__PURE__*/_react["default"].createElement("tr", null, columns.map(function (column, index) {
+  }, /*#__PURE__*/_react["default"].createElement("thead", null, /*#__PURE__*/_react["default"].createElement("tr", null, columns.map(function (column, idx) {
     return /*#__PURE__*/_react["default"].createElement("th", {
-      key: index,
+      key: idx,
       className: "".concat(column.className || "", " ").concat(column.sortable ? "sortable" : ""),
       onClick: column.sortable ? function () {
-        return handleSort(column.accessor, column === null || column === void 0 ? void 0 : column.sortFn);
+        return handleSort(column.accessor, column.sortFn);
       } : undefined,
       style: {
         cursor: column.sortable ? "pointer" : "default"
       }
     }, column.icon && /*#__PURE__*/_react["default"].createElement("span", {
       style: {
-        marginRight: "8px"
+        marginRight: 8
       }
     }, column.icon), /*#__PURE__*/_react["default"].createElement("span", {
       style: {
-        marginRight: "8px"
+        marginRight: 8
       }
     }, column.label), column.sortable && getSortIcon(column));
-  }))), /*#__PURE__*/_react["default"].createElement("tbody", null, sortedData.map(function (row, rowIndex) {
+  }))), /*#__PURE__*/_react["default"].createElement("tbody", null, paginatedData.map(function (row, rowIndex) {
     return /*#__PURE__*/_react["default"].createElement("tr", {
       key: rowIndex
     }, columns.map(function (column, colIndex) {
@@ -194,21 +218,57 @@ var Table = exports.Table = function Table(_ref4) {
         className: column.className || ""
       }, column.render ? column.render(getValueByAccessor(row, column.accessor), row) : getValueByAccessor(row, column.accessor));
     }));
-  }))));
+  }))), showPagination && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "d-flex justify-content-between align-items-center mt-2"
+  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_index.Button, {
+    onClick: function onClick() {
+      return setCurrentPage(function (p) {
+        return Math.max(p - 1, 1);
+      });
+    },
+    disabled: currentPage === 1
+  }, "Previous"), /*#__PURE__*/_react["default"].createElement(_index.Button, {
+    onClick: function onClick() {
+      return setCurrentPage(function (p) {
+        return Math.min(p + 1, totalPages);
+      });
+    },
+    disabled: currentPage === totalPages,
+    style: {
+      marginLeft: 8
+    }
+  }, "Next"), /*#__PURE__*/_react["default"].createElement("span", {
+    style: {
+      marginLeft: 16
+    }
+  }, "Page ", currentPage, " of ", totalPages)), /*#__PURE__*/_react["default"].createElement(_index.DropdownInput, {
+    prompt: "Rows per page",
+    items: pageSizeOptions.map(function (size) {
+      return {
+        id: size,
+        label: size
+      };
+    }),
+    onChange: function onChange(selected) {
+      setPageSize(selected.id);
+      setCurrentPage(1);
+    }
+  })));
 };
 Table.propTypes = {
   columns: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     label: _propTypes["default"].string.isRequired,
     accessor: _propTypes["default"].string.isRequired,
     className: _propTypes["default"].string,
-    // Optional: For adding specific CSS classes
     render: _propTypes["default"].func,
-    // Optional: Custom render function for the cell content
     sortable: _propTypes["default"].bool,
-    // Optional: Determines if the column is sortable
-    sortFn: _propTypes["default"].func // Optional: Custom sorting function
+    sortFn: _propTypes["default"].func,
+    icon: _propTypes["default"].node
   })).isRequired,
   data: _propTypes["default"].arrayOf(_propTypes["default"].object).isRequired,
   nowrap: _propTypes["default"].bool,
-  stickyHeader: _propTypes["default"].bool
+  stickyHeader: _propTypes["default"].bool,
+  className: _propTypes["default"].string,
+  showPagination: _propTypes["default"].bool,
+  defaultRowsPerPage: _propTypes["default"].number
 };

package/docs/src/docs/changelog.mdx

@@ -2,6 +2,14 @@
 title: Changelog
 ---
 
+# 0.1.126
+
+- Added support for `disabled` in the `DropdownInput` component.
+
+# 0.1.124
+
+- Added support for `seperator` and `header` in the `DropdownInput` component.
+
 # 0.1.123
 
 - Added `icon` prop to the `Table` component.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tabler-react-2",
-  "version": "0.1.125",
+  "version": "0.1.127",
   "description": "A react implementation of Tabler ui",
   "main": "dist/index.js",
   "scripts": {