@insticc/react-datagrid-2 1.1.13 → 1.1.16

package/build/wrapper/styles/styles.css

@@ -0,0 +1,30 @@
+.clearFilter {
+  background-color: #ffb66c;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  padding: 5px;
+  border-radius: .28571429rem;
+  transition: opacity 0.2s ease;
+  /* box-shadow: 0 0 0 1px rgb(253, 175, 27); */
+}
+
+.clearFilter:hover {
+  background-color: #ff8c18;
+  /* box-shadow: 0 0 0 1px rgb(206, 145, 0); */
+}
+
+.fixed {
+  position: fixed !important;
+  z-Index: 99 !important;
+  width: calc(100% - 50px) !important;
+  background-color: white !important;
+}
+
+.fixed.fixed-100{
+  top: 100px !important;
+}
+
+.fixed.fixed-0  {
+  top: 0 !important;
+}

package/build/wrapper/utils/DefaultCellTypes.js

@@ -0,0 +1,186 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_CELL_TYPES = void 0;
+var _FormatDate = _interopRequireDefault(require("./FormatDate"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+/**
+ * @file DefaultCellTypes.js
+ * @description Defines default cell type renderers for table columns.
+ * Provides a collection of pre-configured cell formatters for various data types
+ * including text, dates, numbers, currency, links, and custom complex types.
+ */
+
+/**
+ * @typedef {Object} CellContext
+ * @property {Object} cell - The cell object containing value and metadata
+ * @property {Function} cell.getValue - Returns the current cell value
+ * @property {Object} column - Column configuration object
+ * @property {string} [column.locale] - Locale string for date/number formatting (e.g., 'pt-PT', 'en-US')
+ * @property {boolean} [column.onlyFlag] - Flag to show only country code alongside flag
+ * @property {Object} [column.columnDef] - Column definition metadata
+ * @property {string} [column.columnDef.header] - Column header text
+ */
+
+/**
+ * @constant {Object} DEFAULT_CELL_TYPES
+ * @description Collection of default cell type renderers for table columns.
+ * Each property is a function that receives cell context and returns formatted content.
+ * 
+ * @property {Function} text - Renders plain text value
+ * @property {Function} textTitle - Renders bold text using <strong> tag
+ * @property {Function} textDescription - Renders gray text with color #666
+ * @property {Function} textSmall - Renders text in smaller font using <small> tag
+ * 
+ * @property {Function} date - Formats date without time (uses locale from column or defaults to 'pt-PT')
+ * @property {Function} datetime - Formats date with time (uses locale from column or defaults to 'pt-PT')
+ * 
+ * @property {Function} number - Renders numeric value as-is
+ * @property {Function} integer - Rounds finite numbers to nearest integer
+ * @property {Function} currency - Formats number as EUR currency using locale-specific formatting
+ * @property {Function} percentage - Converts decimal to percentage with 2 decimal places (e.g., 0.1234 → "12.34%")
+ * 
+ * @property {Function} email - Renders clickable email link with mailto: protocol
+ * @property {Function} phone - Renders clickable phone link with tel: protocol
+ * @property {Function} link - Renders external link with target="_blank" and security attributes
+ * 
+ * @property {Function} array - Joins array elements with comma separator
+ * @property {Function} json - Renders formatted JSON in <pre> tag with 2-space indentation
+ * 
+ * @property {Function} countryFlag - Displays country flag image from flagcdn.com using ISO2 code
+ * @property {Function} persons - Displays first person with "et al." if multiple, includes tooltip with full list
+ * 
+ */
+
+var DEFAULT_CELL_TYPES = exports.DEFAULT_CELL_TYPES = {
+  text: function text(_ref) {
+    var cell = _ref.cell;
+    return cell.getValue();
+  },
+  textTitle: function textTitle(_ref2) {
+    var cell = _ref2.cell;
+    return /*#__PURE__*/React.createElement("strong", null, cell.getValue());
+  },
+  textDescription: function textDescription(_ref3) {
+    var cell = _ref3.cell;
+    return /*#__PURE__*/React.createElement("span", {
+      style: {
+        color: '#666'
+      }
+    }, cell.getValue());
+  },
+  textSmall: function textSmall(_ref4) {
+    var cell = _ref4.cell;
+    return /*#__PURE__*/React.createElement("small", null, cell.getValue());
+  },
+  date: function date(_ref5) {
+    var cell = _ref5.cell,
+      column = _ref5.column;
+    return (0, _FormatDate["default"])(cell.getValue(), {
+      onlyDate: true,
+      locale: column.locale || 'pt-PT'
+    });
+  },
+  datetime: function datetime(_ref6) {
+    var cell = _ref6.cell,
+      column = _ref6.column;
+    return (0, _FormatDate["default"])(cell.getValue(), {
+      onlyDate: false,
+      locale: column.locale || 'pt-PT'
+    });
+  },
+  number: function number(_ref7) {
+    var cell = _ref7.cell;
+    return cell.getValue();
+  },
+  integer: function integer(_ref8) {
+    var cell = _ref8.cell;
+    return Number.isFinite(cell.getValue()) ? Math.round(cell.getValue()) : cell.getValue();
+  },
+  currency: function currency(_ref9) {
+    var cell = _ref9.cell;
+    var v = cell.getValue();
+    return typeof v === 'number' ? v.toLocaleString(undefined, {
+      style: 'currency',
+      currency: 'EUR'
+    }) : v;
+  },
+  percentage: function percentage(_ref10) {
+    var cell = _ref10.cell;
+    var v = cell.getValue();
+    return typeof v === 'number' ? "".concat((v * 100).toFixed(2), "%") : v;
+  },
+  email: function email(_ref11) {
+    var cell = _ref11.cell;
+    return /*#__PURE__*/React.createElement("a", {
+      href: "mailto:".concat(cell.getValue())
+    }, cell.getValue());
+  },
+  phone: function phone(_ref12) {
+    var cell = _ref12.cell;
+    return /*#__PURE__*/React.createElement("a", {
+      href: "tel:".concat(cell.getValue())
+    }, cell.getValue());
+  },
+  link: function link(_ref13) {
+    var cell = _ref13.cell;
+    var value = cell.getValue();
+    return /*#__PURE__*/React.createElement("span", {
+      title: value
+    }, /*#__PURE__*/React.createElement("a", {
+      href: value,
+      target: "_blank",
+      rel: "noopener noreferrer"
+    }, value));
+  },
+  array: function array(_ref14) {
+    var cell = _ref14.cell;
+    var value = cell.getValue();
+    var arr = Array.isArray(value) ? value : [];
+    return /*#__PURE__*/React.createElement("span", {
+      title: arr.join(', ')
+    }, arr.join(', '));
+  },
+  json: function json(_ref15) {
+    var cell = _ref15.cell;
+    var value = cell.getValue();
+    return /*#__PURE__*/React.createElement("span", {
+      title: JSON.stringify(value)
+    }, /*#__PURE__*/React.createElement("pre", null, JSON.stringify(value, null, 2)));
+  },
+  countryFlag: function countryFlag(_ref16) {
+    var cell = _ref16.cell,
+      column = _ref16.column;
+    var v = cell.getValue();
+    if (!v) return "";
+    var iso2 = String(v).toUpperCase();
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 8
+      }
+    }, (column === null || column === void 0 ? void 0 : column.onlyFlag) && /*#__PURE__*/React.createElement("span", null, iso2), /*#__PURE__*/React.createElement("img", {
+      src: "https://flagcdn.com/24x18/".concat(iso2.toLowerCase(), ".png"),
+      alt: iso2,
+      style: {
+        width: 24,
+        height: 18,
+        borderRadius: 2
+      }
+    }));
+  },
+  persons: function persons(_ref17) {
+    var cell = _ref17.cell,
+      column = _ref17.column;
+    var v = cell.getValue();
+    var arr = Array.isArray(v) ? v : typeof v === "string" ? v.split(/[,;]\s*/g).filter(Boolean) : [];
+    var label = arr[0] ? "".concat(arr[0]).concat(arr.length > 1 ? " et al." : "") : "N/A";
+    var tooltip = "".concat(column.columnDef.header, ":\n\u2022 ").concat(arr.join("\n• ") || "N/A");
+    return /*#__PURE__*/React.createElement("span", {
+      title: tooltip
+    }, label);
+  }
+};

package/build/wrapper/utils/FormatDate.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * @file FormatDate.js
+ * @description Utility to format dates with locale and custom options.
+ *
+ * @param {Date|string|number} date
+ * @param {FormatDateOptions} [options]
+ * @returns {string}
+ *
+ * @example
+ * // Basic date with default locale (pt-PT)
+ * FormatDate('2025-11-18');
+ * // → "18/11/2025"
+ *
+ * @example
+ * // Date & time with custom locale
+ * FormatDate('2025-11-18T14:30:00', { locale: 'en-US' });
+ * // → "11/18/2025, 2:30 PM"
+ *
+ * @example
+ * // Custom formatting
+ * FormatDate('2025-11-18', {
+ *   locale: 'en-US',
+ *   dateOptions: { weekday: 'long', month: 'long', day: 'numeric' }
+ * });
+ * // → "Tuesday, November 18"
+ *
+ * @example
+ * // Unix timestamp
+ * FormatDate(1700318400000);
+ *
+ * @example
+ * // Invalid / empty dates
+ * FormatDate(null); // → ""
+ * FormatDate('invalid'); // → ""
+ */
+
+var FormatDate = function FormatDate(date) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  if (!date) return '';
+  var _options$onlyDate = options.onlyDate,
+    onlyDate = _options$onlyDate === void 0 ? false : _options$onlyDate,
+    _options$locale = options.locale,
+    locale = _options$locale === void 0 ? 'pt-PT' : _options$locale,
+    _options$dateOptions = options.dateOptions,
+    dateOptions = _options$dateOptions === void 0 ? {} : _options$dateOptions,
+    _options$timeOptions = options.timeOptions,
+    timeOptions = _options$timeOptions === void 0 ? {} : _options$timeOptions;
+  var d = new Date(date);
+  if (isNaN(d.getTime())) return '';
+  var defaultDateOpts = {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit'
+  };
+  var defaultTimeOpts = {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false
+  };
+  return d.toLocaleString(locale, onlyDate ? _objectSpread(_objectSpread({}, defaultDateOpts), dateOptions) : _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, defaultDateOpts), defaultTimeOpts), dateOptions), timeOptions));
+};
+var _default = exports["default"] = FormatDate;

package/build/wrapper/utils/GridHelper.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _semanticUiReact = require("semantic-ui-react");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var GridHelper = function GridHelper(_ref) {
+  var open = _ref.open,
+    content = _ref.content,
+    onClose = _ref.onClose,
+    title = _ref.title;
+  return /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Modal, {
+    open: open,
+    centered: true,
+    style: {
+      top: 'auto',
+      right: 'auto',
+      left: 'auto',
+      bottom: 'auto',
+      height: 'fit-content'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Modal.Header, null, title), /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Modal.Content, null, content), /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Modal.Actions, null, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Button, {
+    primary: true,
+    onClick: onClose
+  }, "Close")));
+};
+var _default = exports["default"] = GridHelper;

package/build/wrapper/utils/filters.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.regexFilterTooltip = exports.logicalFilterTooltip = exports.logicalFilter = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _semanticUiReact = require("semantic-ui-react");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var logicalFilter = exports.logicalFilter = function logicalFilter(row, id, filterValue) {
+  var rowValue = row.getValue(id).toLowerCase();
+  var contains = function contains(value, term) {
+    return value.includes(term.toLowerCase());
+  };
+  var parseFilter = function parseFilter(filter) {
+    var regex = /(\w+|\&\&|\|\||\~)/g;
+    return filter.match(regex);
+  };
+  var analyseParts = function analyseParts(parts) {
+    var result = null;
+    var currentOperator = null;
+    if (parts.includes('&&') || parts.includes('||') || parts.includes('~')) {
+      parts.forEach(function (p) {
+        if (p === '&&' || p === '||' || p === '~') {
+          currentOperator = p;
+        } else {
+          if (currentOperator === '&&') {
+            result = result && contains(rowValue, p);
+            currentOperator = null;
+          } else if (currentOperator === '||') {
+            result = result || contains(rowValue, p);
+            currentOperator = null;
+          } else if (currentOperator === '~') {
+            result = result ? result && !contains(rowValue, p) : !contains(rowValue, p);
+            currentOperator = null;
+          } else {
+            result = contains(rowValue, p);
+          }
+        }
+      });
+    } else {
+      result = rowValue.includes(filterValue.toLowerCase());
+    }
+    return result;
+  };
+  var parts = parseFilter(filterValue);
+  if (!parts) return false;
+  return analyseParts(parts);
+};
+var logicalFilterTooltip = exports.logicalFilterTooltip = /*#__PURE__*/_react["default"].createElement("div", {
+  style: {
+    display: 'flex',
+    flexDirection: 'column',
+    textAlign: 'start'
+  }
+}, "This filter admits logical operators such as:", /*#__PURE__*/_react["default"].createElement("ul", null, /*#__PURE__*/_react["default"].createElement("li", null, "'&&' (AND) "), /*#__PURE__*/_react["default"].createElement("li", null, "'||' (OR) "), /*#__PURE__*/_react["default"].createElement("li", null, "'~' (NOT) ")), /*#__PURE__*/_react["default"].createElement("br", null), "These operators can be combined.", /*#__PURE__*/_react["default"].createElement("br", null), "For example, 'John Doe && Smith || James' will return rows that have both 'John Doe' and 'Smith', or 'James'.");
+var regexFilterTooltip = exports.regexFilterTooltip = /*#__PURE__*/_react["default"].createElement("div", {
+  style: {
+    display: 'flex',
+    flexDirection: 'column',
+    textAlign: 'start'
+  }
+}, "This filter enables the use of regular expression to search for patterns in the row data.", /*#__PURE__*/_react["default"].createElement("br", null), "For example, '^[A-Z]' will find entries that start with a capital letter.");

package/build/wrapper/utils/gridFixedHeader.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = gridFixedHeader;
+/**
+ * Makes a MUI-DataGrid header – and optionally its toolbar – stick to the top
+ * once the page is scrolled past a given point.
+ *
+ * @param {string|null} referenceDiv – id of a wrapper element whose top edge defines the sticky offset.
+ * @param {boolean} fixedGridActions – if true, also pin the toolbar (class "Mui-ToolbarDropZone").
+ *
+ * @returns {Function} cleanup – call if you need to remove the scroll listener.
+ */
+function gridFixedHeader(referenceDiv) {
+  var fixedGridActions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var cssFixed = 'fixed';
+  var cssFixed0 = 'fixed-0';
+  var cssFixed100 = 'fixed-100';
+  var gridHeaderRowClassName = 'grid-sticky-header';
+  var gridToolbarClassName = 'grid-sticky-actions';
+  var handleScroll = function handleScroll() {
+    var _refEl$getBoundingCli;
+    var refEl = referenceDiv ? document.getElementById(referenceDiv) : null;
+    var headerEl = (refEl !== null && refEl !== void 0 ? refEl : document).getElementsByClassName(gridHeaderRowClassName)[0];
+    var toolbarEl = fixedGridActions ? (refEl !== null && refEl !== void 0 ? refEl : document).getElementsByClassName(gridToolbarClassName)[0] : null;
+    if (!headerEl) return;
+    var offset = referenceDiv ? window.scrollY + ((_refEl$getBoundingCli = refEl === null || refEl === void 0 ? void 0 : refEl.getBoundingClientRect().top) !== null && _refEl$getBoundingCli !== void 0 ? _refEl$getBoundingCli : 0) : 270;
+    if (window.scrollY > offset) {
+      headerEl.classList.add(cssFixed, toolbarEl ? cssFixed100 : cssFixed0);
+      toolbarEl === null || toolbarEl === void 0 || toolbarEl.classList.add(cssFixed, cssFixed0);
+      var spacer = ((toolbarEl === null || toolbarEl === void 0 ? void 0 : toolbarEl.offsetHeight) || 0) + ((headerEl === null || headerEl === void 0 ? void 0 : headerEl.offsetHeight) || 0);
+      (refEl !== null && refEl !== void 0 ? refEl : document.body).style.paddingTop = "".concat(spacer, "px");
+    } else {
+      headerEl.classList.remove(cssFixed, toolbarEl ? cssFixed100 : cssFixed0);
+      toolbarEl === null || toolbarEl === void 0 || toolbarEl.classList.remove(cssFixed, cssFixed0);
+      (refEl !== null && refEl !== void 0 ? refEl : document.body).style.paddingTop = '';
+    }
+  };
+  window.addEventListener('scroll', handleScroll, {
+    passive: true
+  });
+  handleScroll();
+  return function () {
+    return window.removeEventListener('scroll', handleScroll);
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@insticc/react-datagrid-2",
-  "version": "1.1.13",
+  "version": "1.1.16",
   "description": "",
   "main": "build/index.js",
   "scripts": {
@@ -10,7 +10,7 @@
     "type": "git",
     "url": "https://set1.insticc.org/Bonobo.Git.Server/React-Datagrid-2.git"
   },
-  "author": "Bernardo Lagos",
+  "author": "Mário Delgadinho",
   "license": "ISC",
   "peerDependencies": {
     "bootstrap": "^5.3.3",
@@ -35,6 +35,7 @@
     "@mui/styled-engine-sc": "^6.0.0-alpha.18",
     "@mui/x-data-grid": "^7.1.0",
     "@mui/x-date-pickers": "^7.1.0",
+    "babel": "^5.8.38",
     "bootstrap": "^5.3.3",
     "date-fns": "^2.29.3",
     "jspdf": "^2.5.1",