asab_webui_components 26.1.6 → 26.1.8

package/README.md

@@ -20,7 +20,7 @@ Possible imports:
 - Service
 - Renderer
 - Humanize, humanizeToString
-- DataTable2, DataTableCard2, DataTableCardFooter2, DataTableFilter2, DataTableAdvFilterSingleValue2, DataTableAdvFilterMultiValue2
+- DataTable2, DataTableCard2, DataTableCardFooter2, DataTableFilter2, DataTableAdvFilterSingleValue2, DataTableAdvFilterMultiValue2, DataTableAdvCustomFilter
 - Spinner
 - ControlledSwitch
 - UncontrolledSwitch

package/dist/components/DataTable2/DataTable2.js

@@ -406,13 +406,9 @@ function DataTableCardPill2(_ref6) {
     getParam,
     watchParams,
     getAllParams,
-    removeSinglePill,
     removeMultiPill,
-    getFilterField
+    removeSinglePill
   } = (0, _DataTableContext.useDataTableContext)();
-  var {
-    t
-  } = (0, _reactI18next.useTranslation)();
   var displayPillArea = (0, _react.useMemo)(() => {
     if (getAllParams() && Object.keys(getAllParams()).some(key => key.startsWith('a'))) {
       return true;
@@ -426,49 +422,75 @@ function DataTableCardPill2(_ref6) {
       minHeight: rowHeight
     }
   }, Object.keys(getAllParams()).map(key => {
-    if (key.startsWith("a")) {
+    if (key.startsWith('a')) {
       var value = getParam(key, {
         splitBy: ','
       });
       return value.length > 1 ? value.map(val => /*#__PURE__*/_react.default.createElement("span", {
         key: "".concat(key).concat(val),
         className: "datatable-cardpill mx-1"
-      }, /*#__PURE__*/_react.default.createElement(_reactstrap.Badge, {
-        color: "primary",
-        pill: true
-      }, "".concat(getFilterField(key.substring(1)), ": ").concat(val), isLoading == true ? /*#__PURE__*/_react.default.createElement("i", {
-        className: "bi bi-x ps-1",
-        title: t('General|Remove')
-      }) : /*#__PURE__*/_react.default.createElement("i", {
-        className: "bi bi-x ps-1 datatable-cardpill-icon",
-        title: t('General|Remove'),
-        onClick: () => removeMultiPill(key, val)
-      })))) : /*#__PURE__*/_react.default.createElement("span", {
+      }, /*#__PURE__*/_react.default.createElement(DataTableBadge, {
+        item: key,
+        value: val,
+        isLoading: isLoading,
+        onRemove: () => removeMultiPill(key, val)
+      }))) : /*#__PURE__*/_react.default.createElement("span", {
         key: "".concat(key).concat(value),
         className: "datatable-cardpill mx-1"
-      }, /*#__PURE__*/_react.default.createElement(_reactstrap.Badge, {
-        color: "primary",
-        pill: true
-      }, "".concat(getFilterField(key.substring(1)), ": ").concat(value), isLoading == true ? /*#__PURE__*/_react.default.createElement("i", {
-        className: "bi bi-x ps-1",
-        title: t('General|Remove')
-      }) : /*#__PURE__*/_react.default.createElement("i", {
-        className: "bi bi-x ps-1 datatable-cardpill-icon",
-        title: t('General|Remove'),
-        onClick: () => removeSinglePill(key)
-      })));
+      }, /*#__PURE__*/_react.default.createElement(DataTableBadge, {
+        item: key,
+        value: value,
+        isLoading: isLoading,
+        onRemove: () => removeSinglePill(key)
+      }));
     } else {
       return null;
     }
   }));
 }
 
+// Render a filter badge with custom or default content
+function DataTableBadge(_ref7) {
+  var {
+    item,
+    value,
+    isLoading,
+    onRemove
+  } = _ref7;
+  var {
+    getFilterField,
+    getCustomPill
+  } = (0, _DataTableContext.useDataTableContext)();
+  var {
+    t
+  } = (0, _reactI18next.useTranslation)();
+
+  // Get custom pill
+  var CustomBadge = getCustomPill(item.substring(1));
+  if (CustomBadge) {
+    return /*#__PURE__*/_react.default.cloneElement(CustomBadge, {
+      isLoading
+    });
+  }
+  return /*#__PURE__*/_react.default.createElement(_reactstrap.Badge, {
+    color: "primary",
+    pill: true
+  }, "".concat(getFilterField(item.substring(1)), ": ").concat(value), isLoading == true ? /*#__PURE__*/_react.default.createElement("i", {
+    className: "bi bi-x ps-1",
+    title: t('General|Remove')
+  }) : /*#__PURE__*/_react.default.createElement("i", {
+    className: "bi bi-x ps-1 datatable-cardpill-icon",
+    title: t('General|Remove'),
+    onClick: onRemove
+  }));
+}
+
 // Inner sorting function
-function DataTableSort2(_ref7) {
+function DataTableSort2(_ref8) {
   var {
     title,
     field
-  } = _ref7;
+  } = _ref8;
   var {
     onTriggerSort,
     getParam

package/dist/components/DataTable2/DataTable2.jsx

@@ -347,9 +347,8 @@ export function DataTable2({columns, rows, limit, loading, rowHeight, rowStyle})
 }
 
 // Renders filter pills based on data table filter params
-function DataTableCardPill2({isLoading, rowHeight}) {
-	const { getParam, watchParams, getAllParams, removeSinglePill, removeMultiPill, getFilterField } = useDataTableContext();
-	const { t } = useTranslation();
+function DataTableCardPill2({ isLoading, rowHeight }) {
+	const { getParam, watchParams, getAllParams, removeMultiPill, removeSinglePill } = useDataTableContext();
 	const displayPillArea = useMemo(() => {
 		if (getAllParams() && Object.keys(getAllParams()).some(key => key.startsWith('a'))) {
 			return true;
@@ -360,54 +359,36 @@ function DataTableCardPill2({isLoading, rowHeight}) {
 
 	return(
 		displayPillArea &&
-		<div className="datatable-cardpill-area" style={{minHeight: rowHeight}}>
+		<div className='datatable-cardpill-area' style={{minHeight: rowHeight}}>
 			{Object.keys(getAllParams()).map((key) => {
-				if (key.startsWith("a")) {
+				if (key.startsWith('a')) {
 					const value = getParam(key, {splitBy: ','});
 					return (
 						(value.length > 1) ?
 							value.map(val => (
 								<span
 									key={`${key}${val}`}
-									className="datatable-cardpill mx-1"
+									className='datatable-cardpill mx-1'
 								>
-									<Badge color="primary" pill>
-										{`${getFilterField(key.substring(1))}: ${val}`}
-										{(isLoading == true) ?
-											<i
-												className="bi bi-x ps-1"
-												title={t('General|Remove')}
-											/>
-										:
-											<i
-												className="bi bi-x ps-1 datatable-cardpill-icon"
-												title={t('General|Remove')}
-												onClick={() => removeMultiPill(key, val)}
-											/>
-										}
-									</Badge>
+									<DataTableBadge
+										item={key}
+										value={val}
+										isLoading={isLoading}
+										onRemove={() => removeMultiPill(key, val)}
+									/>
 								</span>
 							))
 						:
 							<span
 								key={`${key}${value}`}
-								className="datatable-cardpill mx-1"
+								className='datatable-cardpill mx-1'
 							>
-								<Badge color="primary" pill>
-									{`${getFilterField(key.substring(1))}: ${value}`}
-									{(isLoading == true) ?
-										<i
-											className="bi bi-x ps-1"
-											title={t('General|Remove')}
-										/>
-									:
-										<i
-											className="bi bi-x ps-1 datatable-cardpill-icon"
-											title={t('General|Remove')}
-											onClick={() => removeSinglePill(key)}
-										/>
-									}
-								</Badge>
+								<DataTableBadge
+									item={key}
+									value={value}
+									isLoading={isLoading}
+									onRemove={() => removeSinglePill(key)}
+								/>
 							</span>
 					)
 				} else {
@@ -418,6 +399,37 @@ function DataTableCardPill2({isLoading, rowHeight}) {
 	)
 }
 
+// Render a filter badge with custom or default content
+function DataTableBadge({ item, value, isLoading, onRemove }) {
+	const { getFilterField, getCustomPill } = useDataTableContext();
+	const { t } = useTranslation();
+
+	// Get custom pill
+	const CustomBadge = getCustomPill(item.substring(1));
+
+	if (CustomBadge) {
+		return React.cloneElement(CustomBadge, { isLoading });
+	}
+
+	return (
+		<Badge color='primary' pill>
+			{`${getFilterField(item.substring(1))}: ${value}`}
+			{(isLoading == true) ?
+				<i
+					className='bi bi-x ps-1'
+					title={t('General|Remove')}
+				/>
+			:
+				<i
+					className='bi bi-x ps-1 datatable-cardpill-icon'
+					title={t('General|Remove')}
+					onClick={onRemove}
+				/>
+			}
+		</Badge>
+	)
+}
+
 // Inner sorting function
 function DataTableSort2({title, field}) {
 	const { onTriggerSort, getParam } = useDataTableContext();

package/dist/components/DataTable2/DataTableContext.js

@@ -32,6 +32,7 @@ var DataTableContextProvider = _ref => {
   var [searchParams, setSearchParams] = (0, _reactRouterDom.useSearchParams)(defaultParams);
   var [stateParams, setStateParams] = (0, _react.useState)(defaultParams);
   var filterFieldsRef = (0, _react.useRef)({}); // Ref to store filter fields persistently without triggering re-renders.
+  var customPillRef = (0, _react.useRef)({}); // Ref for store obj with custom pulls with individual key access
 
   // Method to get param with option to set up splitting method used for searchParams
   var getParam = function getParam(param) {
@@ -332,12 +333,30 @@ var DataTableContextProvider = _ref => {
   // Method to set filter fields in filterFieldsRef
   var setFilterField = obj => {
     var fields = Object.entries(obj)[0];
-    // Check and only add field if it doesnt exist
+    // Check and only add field if it doesn't exist
     if (!filterFieldsRef.current[fields[0]]) {
       filterFieldsRef.current[fields[0]] = fields[1];
     }
   };
 
+  //  Retrieves a custom pill component by key
+  var getCustomPill = key => {
+    var _customPillRef$curren;
+    // Return stored pill component or null if doesn't exist
+    return ((_customPillRef$curren = customPillRef.current) === null || _customPillRef$curren === void 0 ? void 0 : _customPillRef$curren[key]) || null;
+  };
+
+  // Stores or updates a custom pill component in the reference
+  var setCustomPill = (pill, field) => {
+    // Initialize ref object if empty
+    if (!customPillRef.current) {
+      customPillRef.current = {};
+    }
+
+    // Store/update the pill component for the specified field
+    customPillRef.current[field] = pill;
+  };
+
   // Inner method to update search params
   var _updateSearchParams = (searchParams, params) => {
     Object.entries(params).forEach(_ref2 => {
@@ -368,6 +387,8 @@ var DataTableContextProvider = _ref => {
     serializeParams,
     getFilterField,
     setFilterField,
+    setCustomPill,
+    getCustomPill,
     watchParams: {
       searchParams,
       stateParams

package/dist/components/DataTable2/DataTableContext.jsx

@@ -12,6 +12,7 @@ const DataTableContextProvider = ({ children, disableParams, initialLimit }) =>
 	const [searchParams, setSearchParams] = useSearchParams(defaultParams);
 	const [stateParams, setStateParams] = useState(defaultParams);
 	const filterFieldsRef = useRef({}); // Ref to store filter fields persistently without triggering re-renders.
+	const customPillRef = useRef({}); // Ref for store obj with custom pulls with individual key access
 
 	// Method to get param with option to set up splitting method used for searchParams
 	const getParam = (param, options = {}) => {
@@ -289,12 +290,29 @@ const DataTableContextProvider = ({ children, disableParams, initialLimit }) =>
 	// Method to set filter fields in filterFieldsRef
 	const setFilterField = (obj) => {
 		const fields = Object.entries(obj)[0];
-		// Check and only add field if it doesnt exist
+		// Check and only add field if it doesn't exist
 		if (!filterFieldsRef.current[fields[0]]) {
 			filterFieldsRef.current[fields[0]] = fields[1];
 		}
 	};
 
+	//  Retrieves a custom pill component by key
+	const getCustomPill = (key) => {
+		// Return stored pill component or null if doesn't exist
+		return customPillRef.current?.[key] || null;
+	}
+
+	// Stores or updates a custom pill component in the reference
+	const setCustomPill = (pill, field) => {
+		// Initialize ref object if empty
+		if (!customPillRef.current) {
+			customPillRef.current = {};
+		}
+
+		// Store/update the pill component for the specified field
+		customPillRef.current[field] = pill;
+	}
+
 	// Inner method to update search params
 	const _updateSearchParams = (searchParams, params) => {
 		Object.entries(params).forEach(([key, value]) => {
@@ -323,6 +341,8 @@ const DataTableContextProvider = ({ children, disableParams, initialLimit }) =>
 		serializeParams,
 		getFilterField,
 		setFilterField,
+		setCustomPill,
+		getCustomPill,
 		watchParams: { searchParams, stateParams } // Context value for watching params
 	}), [searchParams, stateParams]);
 

package/dist/components/DataTable2/components/filters/DataTableAdvCustomFilter.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DataTableAdvCustomFilter = DataTableAdvCustomFilter;
+var _react = _interopRequireWildcard(require("react"));
+var _DataTableContext = require("../../DataTableContext.js");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+// Custom component for filtering in the table
+function DataTableAdvCustomFilter(_ref) {
+  var {
+    field,
+    content,
+    customPill
+  } = _ref;
+  var {
+    updateSingleValueFilter,
+    setFilterField,
+    setCustomPill
+  } = (0, _DataTableContext.useDataTableContext)();
+
+  // Updates filter field and custom pill when dependencies change
+  (0, _react.useEffect)(() => {
+    // Register the filter field in data table context
+    setFilterField(field);
+    // Get the first key from field object
+    var fieldKey = Object.keys(field)[0];
+    // Store the custom pill component associated with this field
+    setCustomPill(customPill, fieldKey);
+  }, [customPill]);
+
+  // Transferring a function to the custom content for correct filter assignment
+  return content(updateSingleValueFilter);
+}

package/dist/components/DataTable2/components/filters/DataTableAdvCustomFilter.jsx

@@ -0,0 +1,21 @@
+import React, { useEffect } from 'react';
+
+import { useDataTableContext } from '../../DataTableContext.jsx';
+
+// Custom component for filtering in the table
+export function DataTableAdvCustomFilter({ field, content, customPill }) {
+	const { updateSingleValueFilter, setFilterField, setCustomPill } = useDataTableContext();
+
+	// Updates filter field and custom pill when dependencies change
+	useEffect(() => {
+		// Register the filter field in data table context
+		setFilterField(field);
+		// Get the first key from field object
+		const fieldKey = Object.keys(field)[0];
+		// Store the custom pill component associated with this field
+		setCustomPill(customPill, fieldKey);
+	},[customPill]);
+
+	// Transferring a function to the custom content for correct filter assignment
+	return content(updateSingleValueFilter);
+}

package/dist/components/DataTable2/components/filters/DataTableAdvFilterSingleValue2.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DataTableAdvFilterSingleValue2 = DataTableAdvFilterSingleValue2;
 var _react = _interopRequireWildcard(require("react"));
-var _reactI18next = require("react-i18next");
 var _reactstrap = require("reactstrap");
 var _DataTableContext = require("../../DataTableContext.js");
 require("./DataTableAdvFilter2.scss");
@@ -19,9 +18,6 @@ function DataTableAdvFilterSingleValue2(_ref) {
     updateSingleValueFilter,
     setFilterField
   } = (0, _DataTableContext.useDataTableContext)();
-  var {
-    t
-  } = (0, _reactI18next.useTranslation)();
   var [dropdownOpen, setDropdownOpen] = (0, _react.useState)(false);
   var primaryFieldEntry = Object.entries(field)[0]; // Extracts the first key-value pair from the field object
 

package/dist/components/DataTable2/components/filters/DataTableAdvFilterSingleValue2.jsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
 
 import {
 	Dropdown, DropdownToggle, DropdownItem, DropdownMenu
@@ -10,7 +9,6 @@ import './DataTableAdvFilter2.scss';
 
 export function DataTableAdvFilterSingleValue2({ field, fieldItems }) {
 	const { updateSingleValueFilter, setFilterField } = useDataTableContext();
-	const { t } = useTranslation();
 	const [ dropdownOpen, setDropdownOpen ] = useState(false);
 	const primaryFieldEntry = Object.entries(field)[0]; // Extracts the first key-value pair from the field object
 

package/dist/components/DataTable2/components/filters/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "DataTableAdvCustomFilter", {
+  enumerable: true,
+  get: function get() {
+    return _DataTableAdvCustomFilter.DataTableAdvCustomFilter;
+  }
+});
 Object.defineProperty(exports, "DataTableAdvFilterMultiValue2", {
   enumerable: true,
   get: function get() {
@@ -23,4 +29,5 @@ Object.defineProperty(exports, "DataTableFilter2", {
 });
 var _DataTableSimpleFilter = require("./DataTableSimpleFilter2.js");
 var _DataTableAdvFilterSingleValue = require("./DataTableAdvFilterSingleValue2.js");
-var _DataTableAdvFilterMultiValue = require("./DataTableAdvFilterMultiValue2.js");
+var _DataTableAdvFilterMultiValue = require("./DataTableAdvFilterMultiValue2.js");
+var _DataTableAdvCustomFilter = require("./DataTableAdvCustomFilter.js");

package/dist/components/DataTable2/components/filters/index.jsx

@@ -1,3 +1,4 @@
 export { DataTableFilter2 } from './DataTableSimpleFilter2.jsx';
 export { DataTableAdvFilterSingleValue2 } from './DataTableAdvFilterSingleValue2.jsx';
 export { DataTableAdvFilterMultiValue2 } from './DataTableAdvFilterMultiValue2.jsx';
+export { DataTableAdvCustomFilter } from './DataTableAdvCustomFilter.jsx';

package/dist/components/DateTime/utils/validateDateTime.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.validateDateTime = validateDateTime;
+// For best performance, create a regular expression only once.
+var n_digits = /^\d+n$/;
 function validateDateTime(value) {
   // Return 'Invalid Date' if the input is null or undefined
   if (value == null) {
@@ -18,6 +20,15 @@ function validateDateTime(value) {
 
   // Handle string values
   if (typeof value === 'string') {
+    // Check if string ends with 'n' AND verify the entire string consists only of digits followed by 'n'
+    if (value.endsWith('n') && n_digits.test(value)) {
+      try {
+        // Remove the 'n' suffix before converting to BigInt
+        return splDatetimeToIso(BigInt(value.slice(0, -1)));
+      } catch (_unused) {
+        return 'Invalid Date';
+      }
+    }
     return new Date(value);
   }
 

package/dist/components/DateTime/utils/validateDateTime.jsx

@@ -1,3 +1,6 @@
+// For best performance, create a regular expression only once.
+const n_digits = /^\d+n$/;
+
 export function validateDateTime(value) {
 	// Return 'Invalid Date' if the input is null or undefined
 	if (value == null) {
@@ -12,6 +15,15 @@ export function validateDateTime(value) {
 
 	// Handle string values
 	if (typeof value === 'string') {
+		// Check if string ends with 'n' AND verify the entire string consists only of digits followed by 'n'
+		if (value.endsWith('n') && n_digits.test(value)) {
+			try {
+				// Remove the 'n' suffix before converting to BigInt
+				return splDatetimeToIso(BigInt(value.slice(0, -1)));
+			} catch {
+				return 'Invalid Date';
+			}
+		}
 		return new Date(value);
 	}
 

package/dist/index.js

@@ -70,6 +70,12 @@ Object.defineProperty(exports, "DataTable2", {
     return _DataTable.DataTable2;
   }
 });
+Object.defineProperty(exports, "DataTableAdvCustomFilter", {
+  enumerable: true,
+  get: function get() {
+    return _index2.DataTableAdvCustomFilter;
+  }
+});
 Object.defineProperty(exports, "DataTableAdvFilterMultiValue2", {
   enumerable: true,
   get: function get() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "asab_webui_components",
-  "version": "26.1.6",
+  "version": "26.1.8",
   "license": "BSD-3-Clause",
   "description": "TeskaLabs ASAB WebUI Components Library",
   "contributors": [