asab_webui_components 27.3.10 → 27.4.1

package/dist/components/DataTable2/DataTable2.js

@@ -459,24 +459,34 @@ function DataTableBadge(_ref7) {
     onRemove
   } = _ref7;
   var {
-    getFilterField,
+    getFilterFieldLabel,
+    getNormalizedFieldItems,
     getCustomPill
   } = (0, _DataTableContext.useDataTableContext)();
   var {
     t
   } = (0, _reactI18next.useTranslation)();
+  var fieldKey = item.substring(1);
 
   // Get custom pill
-  var CustomBadge = getCustomPill(item.substring(1));
+  var CustomBadge = getCustomPill(fieldKey);
   if (CustomBadge) {
     return /*#__PURE__*/_react.default.cloneElement(CustomBadge, {
       isLoading
     });
   }
+  var normalizedFieldItems = getNormalizedFieldItems(fieldKey);
+  var displayValue = Array.isArray(value) ? value[0] : value;
+  if (normalizedFieldItems) {
+    var matchingItem = normalizedFieldItems.find(item => item.value === displayValue);
+    if (matchingItem) {
+      displayValue = matchingItem.label;
+    }
+  }
   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", {
+  }, "".concat(getFilterFieldLabel(fieldKey), ": ").concat(displayValue), isLoading == true ? /*#__PURE__*/_react.default.createElement("i", {
     className: "bi bi-x ps-1",
     title: t('General|Remove')
   }) : /*#__PURE__*/_react.default.createElement("i", {

package/dist/components/DataTable2/DataTable2.jsx

@@ -402,19 +402,30 @@ function DataTableCardPill2({ isLoading, rowHeight }) {
 
 // Render a filter badge with custom or default content
 function DataTableBadge({ item, value, isLoading, onRemove }) {
-	const { getFilterField, getCustomPill } = useDataTableContext();
+	const { getFilterFieldLabel, getNormalizedFieldItems, getCustomPill } = useDataTableContext();
 	const { t } = useTranslation();
+	const fieldKey = item.substring(1);
 
 	// Get custom pill
-	const CustomBadge = getCustomPill(item.substring(1));
+	const CustomBadge = getCustomPill(fieldKey);
 
 	if (CustomBadge) {
 		return React.cloneElement(CustomBadge, { isLoading });
 	}
 
+	const normalizedFieldItems = getNormalizedFieldItems(fieldKey);
+
+	let displayValue = Array.isArray(value) ? value[0] : value;
+	if (normalizedFieldItems) {
+		const matchingItem = normalizedFieldItems.find(item => item.value === displayValue);
+		if (matchingItem) {
+			displayValue = matchingItem.label;
+		}
+	}
+
 	return (
 		<Badge color='primary' pill>
-			{`${getFilterField(item.substring(1))}: ${value}`}
+			{`${getFilterFieldLabel(fieldKey)}: ${displayValue}`}
 			{(isLoading == true) ?
 				<i
 					className='bi bi-x ps-1'

package/dist/components/DataTable2/DataTableContext.js

@@ -10,6 +10,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _reactRouter = require("react-router");
 var _updateTableLimit = require("./components/utils/updateTableLimit.js");
+var _translateFromContent = require("../../utils/translateFromContent.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); }
 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); }
@@ -31,8 +32,8 @@ var DataTableContextProvider = _ref => {
   };
   var [searchParams, setSearchParams] = (0, _reactRouter.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
+  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 pills with individual key access
 
   // Method to get param with option to set up splitting method used for searchParams
   var getParam = function getParam(param) {
@@ -339,18 +340,56 @@ var DataTableContextProvider = _ref => {
     }
   };
 
-  // Method to get the current filter fields based on a given key
-  var getFilterField = key => {
-    return filterFieldsRef.current[key];
+  // Method to get filter field label to be displayed in the DataTableBadge
+  var getFilterFieldLabel = key => {
+    var _filterFieldsRef$curr, _filterFieldsRef$curr2;
+    return (_filterFieldsRef$curr = (_filterFieldsRef$curr2 = filterFieldsRef.current[key]) === null || _filterFieldsRef$curr2 === void 0 ? void 0 : _filterFieldsRef$curr2.fieldLabel) !== null && _filterFieldsRef$curr !== void 0 ? _filterFieldsRef$curr : null;
   };
 
-  // Method to set filter fields in filterFieldsRef
-  var setFilterField = obj => {
-    var fields = Object.entries(obj)[0];
-    // Check and only add field if it doesn't exist
-    if (!filterFieldsRef.current[fields[0]]) {
-      filterFieldsRef.current[fields[0]] = fields[1];
+  // Method to normalize field items
+  var setNormalizedFieldItems = (key, fieldItems) => {
+    var _filterFieldsRef$curr3;
+    if (!fieldItems || fieldItems.length === 0) return;
+    if ((_filterFieldsRef$curr3 = filterFieldsRef.current[key]) !== null && _filterFieldsRef$curr3 !== void 0 && _filterFieldsRef$curr3.items) return;
+    var normalized = fieldItems.map(item => {
+      if (typeof item === 'object' && item !== null) {
+        var _item$key, _item$key2;
+        var label = item.label ? (0, _translateFromContent.translateFromContent)(item.label) : String((_item$key = item.key) !== null && _item$key !== void 0 ? _item$key : item.value); // Fallback to key or value if label is not available
+        return {
+          value: String((_item$key2 = item.key) !== null && _item$key2 !== void 0 ? _item$key2 : item.value),
+          label
+        };
+      }
+      return {
+        value: String(item),
+        label: String(item)
+      }; // Fallback to value if item is not an object
+    });
+    filterFieldsRef.current[key] = _objectSpread(_objectSpread({}, filterFieldsRef.current[key]), {}, {
+      items: normalized
+    });
+  };
+
+  // Method to get normalized field items
+  var getNormalizedFieldItems = key => {
+    var _filterFieldsRef$curr4, _filterFieldsRef$curr5;
+    return (_filterFieldsRef$curr4 = (_filterFieldsRef$curr5 = filterFieldsRef.current[key]) === null || _filterFieldsRef$curr5 === void 0 ? void 0 : _filterFieldsRef$curr5.items) !== null && _filterFieldsRef$curr4 !== void 0 ? _filterFieldsRef$curr4 : null;
+  };
+
+  // Method to set filter field label
+  var setFilterFieldLabel = obj => {
+    var _filterFieldsRef$curr6;
+    var entries = obj != null && typeof obj === 'object' ? Object.entries(obj) : [];
+    var fieldEntry = entries[0]; // Extracts the first key-value pair from the field object
+    if (!fieldEntry) {
+      console.warn('DataTableContext: "obj" prop is missing or empty - cannot set filter field label.');
+      return;
     }
+    var [fieldKey, fieldLabel] = fieldEntry; // Extract the key and label from the field entry
+    if ((_filterFieldsRef$curr6 = filterFieldsRef.current[fieldKey]) !== null && _filterFieldsRef$curr6 !== void 0 && _filterFieldsRef$curr6.fieldLabel) return;
+    filterFieldsRef.current[fieldKey] = _objectSpread(_objectSpread({}, filterFieldsRef.current[fieldKey]), {}, {
+      fieldLabel
+    });
   };
 
   //  Retrieves a custom pill component by key
@@ -399,8 +438,10 @@ var DataTableContextProvider = _ref => {
     removeMultiPill,
     onTriggerSort,
     serializeParams,
-    getFilterField,
-    setFilterField,
+    getFilterFieldLabel,
+    setNormalizedFieldItems,
+    getNormalizedFieldItems,
+    setFilterFieldLabel,
     setCustomPill,
     getCustomPill,
     watchParams: {

package/dist/components/DataTable2/DataTableContext.jsx

@@ -2,6 +2,7 @@ import React, { createContext, useContext, useMemo, useState, useRef } from 'rea
 import { useSearchParams } from 'react-router';
 
 import { updateLimit, updateStateLimit } from './components/utils/updateTableLimit.jsx';
+import { translateFromContent } from '../../utils/translateFromContent.js';
 
 // Create an empty context
 const CreateDataTableContext = createContext();
@@ -11,8 +12,8 @@ const DataTableContextProvider = ({ children, disableParams, initialLimit }) =>
 	const defaultParams = { p: 1, i: 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
+	const filterFieldsRef = useRef({}); // Ref to store filter fields persistently without triggering re-renders
+	const customPillRef = useRef({}); // Ref for store obj with custom pills with individual key access
 
 	// Method to get param with option to set up splitting method used for searchParams
 	const getParam = (param, options = {}) => {
@@ -293,18 +294,49 @@ const DataTableContextProvider = ({ children, disableParams, initialLimit }) =>
 		}
 	};
 
-	// Method to get the current filter fields based on a given key
-	const getFilterField = (key) => {
-		return filterFieldsRef.current[key];
+	// Method to get filter field label to be displayed in the DataTableBadge
+	const getFilterFieldLabel = (key) => {
+		return filterFieldsRef.current[key]?.fieldLabel ?? null;
 	};
 
-	// Method to set filter fields in filterFieldsRef
-	const setFilterField = (obj) => {
-		const fields = Object.entries(obj)[0];
-		// Check and only add field if it doesn't exist
-		if (!filterFieldsRef.current[fields[0]]) {
-			filterFieldsRef.current[fields[0]] = fields[1];
+	// Method to normalize field items
+	const setNormalizedFieldItems = (key, fieldItems) => {
+		if (!fieldItems || fieldItems.length === 0) return;
+		if (filterFieldsRef.current[key]?.items) return;
+
+		const normalized = fieldItems.map(item => {
+			if (typeof item === 'object' && item !== null) {
+				const label = item.label
+					? translateFromContent(item.label)
+					: String(item.key ?? item.value); // Fallback to key or value if label is not available
+				return {
+					value: String(item.key ?? item.value),
+					label
+				};
+			}
+			return { value: String(item), label: String(item) }; // Fallback to value if item is not an object
+		});
+
+		filterFieldsRef.current[key] = { ...filterFieldsRef.current[key], items: normalized };
+	};
+
+	// Method to get normalized field items
+	const getNormalizedFieldItems = (key) => {
+		return filterFieldsRef.current[key]?.items ?? null;
+	};
+
+	// Method to set filter field label
+	const setFilterFieldLabel = (obj) => {
+		const entries = obj != null && typeof obj === 'object' ? Object.entries(obj) : [];
+		const fieldEntry = entries[0]; // Extracts the first key-value pair from the field object
+		if (!fieldEntry) {
+			console.warn('DataTableContext: "obj" prop is missing or empty - cannot set filter field label.');
+			return;
 		}
+
+		const [fieldKey, fieldLabel] = fieldEntry; // Extract the key and label from the field entry
+		if (filterFieldsRef.current[fieldKey]?.fieldLabel) return;
+		filterFieldsRef.current[fieldKey] = { ...filterFieldsRef.current[fieldKey], fieldLabel };
 	};
 
 	//  Retrieves a custom pill component by key
@@ -350,8 +382,10 @@ const DataTableContextProvider = ({ children, disableParams, initialLimit }) =>
 		removeMultiPill,
 		onTriggerSort,
 		serializeParams,
-		getFilterField,
-		setFilterField,
+		getFilterFieldLabel,
+		setNormalizedFieldItems,
+		getNormalizedFieldItems,
+		setFilterFieldLabel,
 		setCustomPill,
 		getCustomPill,
 		watchParams: { searchParams, stateParams } // Context value for watching params

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

@@ -16,14 +16,14 @@ function DataTableAdvCustomFilter(_ref) {
   } = _ref;
   var {
     updateSingleValueFilter,
-    setFilterField,
+    setFilterFieldLabel,
     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);
+    setFilterFieldLabel(field);
     // Get the first key from field object
     var fieldKey = Object.keys(field)[0];
     // Store the custom pill component associated with this field

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

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

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

@@ -19,21 +19,31 @@ function DataTableAdvFilterMultiValue2(_ref) {
     getParam,
     updateMultiValueFilter,
     clearMultiValueFilter,
-    setFilterField
+    setFilterFieldLabel,
+    setNormalizedFieldItems,
+    getNormalizedFieldItems
   } = (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
-  var valuesToUpdate = getParam("a".concat(primaryFieldEntry[0]), {
+  var entries = field != null && typeof field === 'object' ? Object.entries(field) : [];
+  var primaryFieldEntry = entries[0]; // Extracts the first key-value pair from the field object
+  var [primaryFieldKey, primaryFieldValue] = primaryFieldEntry !== null && primaryFieldEntry !== void 0 ? primaryFieldEntry : [];
+  var valuesToUpdate = getParam("a".concat(primaryFieldKey), {
     splitBy: ','
   });
+  var normalizedFieldItems = getNormalizedFieldItems(primaryFieldKey);
 
-  // Update filterFields in DataTable context
+  // Update filterFields and normalizedFieldItems in DataTable context
   (0, _react.useEffect)(() => {
-    setFilterField(field);
+    setFilterFieldLabel(field);
+    setNormalizedFieldItems(primaryFieldKey, fieldItems); // Store normalized items in context for DataTableBadge label lookup
   }, []);
+  if (!primaryFieldEntry) {
+    console.warn('DataTableAdvFilterMultiValue2:  "field" prop is missing or empty - cannot render filter.');
+    return null;
+  }
   var toggle = () => setDropdownOpen(prevState => !prevState);
   return /*#__PURE__*/_react.default.createElement(_reactstrap.Dropdown, {
     className: "adv-filter-dropdown",
@@ -43,25 +53,28 @@ function DataTableAdvFilterMultiValue2(_ref) {
     color: "primary",
     outline: true,
     className: "adv-filter-dropdown-toggle",
-    title: primaryFieldEntry[1] // Use value of field object as title
+    title: primaryFieldValue // Use value of field object as title
     ,
     caret: true
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "adv-filter-title"
-  }, primaryFieldEntry[1], " ")), /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownMenu, {
+  }, primaryFieldValue, " ")), /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownMenu, {
     className: "adv-filter-dropdown-menu overflow-y-auto"
   }, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
-    onClick: () => clearMultiValueFilter(primaryFieldEntry[0]) // Use key of field object to clear filter
+    onClick: () => clearMultiValueFilter(primaryFieldKey) // Use key of field object to clear filter
   }, t('General|Clear')), /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
     divider: true
-  }), fieldItems.map((item, idx) => /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
-    key: idx,
-    onClick: () => updateMultiValueFilter(primaryFieldEntry[0], item) // Use key of field object to update the filter
-  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
-    className: "me-2",
-    type: "checkbox",
-    checked: valuesToUpdate && valuesToUpdate !== null && valuesToUpdate !== void 0 && valuesToUpdate.includes(item) ? true : false,
-    readOnly: true,
-    name: "".concat(idx).concat(item)
-  }), item))));
+  }), normalizedFieldItems === null || normalizedFieldItems === void 0 ? void 0 : normalizedFieldItems.map((item, idx) => {
+    var itemValue = item.value;
+    return /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
+      key: idx,
+      onClick: () => updateMultiValueFilter(primaryFieldKey, itemValue) // Use key of field object to update the filter
+    }, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
+      className: "me-2",
+      type: "checkbox",
+      checked: valuesToUpdate && valuesToUpdate !== null && valuesToUpdate !== void 0 && valuesToUpdate.includes(itemValue) ? true : false,
+      readOnly: true,
+      name: "".concat(idx).concat(itemValue)
+    }), item.label);
+  })));
 }

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

@@ -10,17 +10,26 @@ import { useDataTableContext } from '../../DataTableContext.jsx';
 import './DataTableAdvFilter2.scss';
 
 export function DataTableAdvFilterMultiValue2({ field, fieldItems }) {
-	const { getParam, updateMultiValueFilter, clearMultiValueFilter, setFilterField } = useDataTableContext();
+	const { getParam, updateMultiValueFilter, clearMultiValueFilter, setFilterFieldLabel, setNormalizedFieldItems, getNormalizedFieldItems } = 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
-	const valuesToUpdate = getParam(`a${primaryFieldEntry[0]}`, { splitBy: ','});
+	const entries = field != null && typeof field === 'object' ? Object.entries(field) : [];
+	const primaryFieldEntry = entries[0]; // Extracts the first key-value pair from the field object
+	const [primaryFieldKey, primaryFieldValue] = primaryFieldEntry ?? []; 
+	const valuesToUpdate = getParam(`a${primaryFieldKey}`, { splitBy: ','});
+	const normalizedFieldItems = getNormalizedFieldItems(primaryFieldKey);
 
-	// Update filterFields in DataTable context
+	// Update filterFields and normalizedFieldItems in DataTable context
 	useEffect(() => {
-		setFilterField(field);
+		setFilterFieldLabel(field);
+		setNormalizedFieldItems(primaryFieldKey, fieldItems); // Store normalized items in context for DataTableBadge label lookup
 	},[]);
 
+	if (!primaryFieldEntry) {
+		console.warn('DataTableAdvFilterMultiValue2:  "field" prop is missing or empty - cannot render filter.');
+		return null;
+	}
+
 	const toggle = () => setDropdownOpen((prevState) => !prevState);
 
 	return (
@@ -29,35 +38,38 @@ export function DataTableAdvFilterMultiValue2({ field, fieldItems }) {
 				color="primary"
 				outline
 				className="adv-filter-dropdown-toggle"
-				title={primaryFieldEntry[1]} // Use value of field object as title
+				title={primaryFieldValue} // Use value of field object as title
 				caret
 			>
 				<span className="adv-filter-title">
-					{primaryFieldEntry[1]} {/* Use value of field object as title */}
+					{primaryFieldValue} {/* Use value of field object as title */}
 				</span>
 			</DropdownToggle>
 			<DropdownMenu className='adv-filter-dropdown-menu overflow-y-auto'>
 				<DropdownItem
-					onClick={() => clearMultiValueFilter(primaryFieldEntry[0])} // Use key of field object to clear filter
+					onClick={() => clearMultiValueFilter(primaryFieldKey)} // Use key of field object to clear filter
 				>
 					{t('General|Clear')}
 				</DropdownItem>
 				<DropdownItem divider />
-				{fieldItems.map((item, idx) => (
-					<DropdownItem
-						key={idx}
-						onClick={() => updateMultiValueFilter(primaryFieldEntry[0], item)} // Use key of field object to update the filter
-					>
-						<Input
-							className="me-2"
-							type="checkbox"
-							checked={valuesToUpdate && valuesToUpdate?.includes(item) ? true : false}
-							readOnly
-							name={`${idx}${item}`}
-						/>
-						{item}
-					</DropdownItem>
-				))}
+				{normalizedFieldItems?.map((item, idx) => {
+					const itemValue = item.value;
+					return (
+						<DropdownItem
+							key={idx}
+							onClick={() => updateMultiValueFilter(primaryFieldKey, itemValue)} // Use key of field object to update the filter
+						>
+							<Input
+								className="me-2"
+								type="checkbox"
+								checked={valuesToUpdate && valuesToUpdate?.includes(itemValue) ? true : false}
+								readOnly
+								name={`${idx}${itemValue}`}
+							/>
+							{item.label}
+						</DropdownItem>
+					);
+				})}
 			</DropdownMenu>
 		</Dropdown>
 	)

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

@@ -16,15 +16,25 @@ function DataTableAdvFilterSingleValue2(_ref) {
   } = _ref;
   var {
     updateSingleValueFilter,
-    setFilterField
+    setFilterFieldLabel,
+    setNormalizedFieldItems,
+    getNormalizedFieldItems
   } = (0, _DataTableContext.useDataTableContext)();
   var [dropdownOpen, setDropdownOpen] = (0, _react.useState)(false);
-  var primaryFieldEntry = Object.entries(field)[0]; // Extracts the first key-value pair from the field object
+  var entries = field != null && typeof field === 'object' ? Object.entries(field) : [];
+  var primaryFieldEntry = entries[0]; // Extracts the first key-value pair from the field object
+  var [primaryFieldKey, primaryFieldValue] = primaryFieldEntry !== null && primaryFieldEntry !== void 0 ? primaryFieldEntry : [];
+  var normalizedFieldItems = getNormalizedFieldItems(primaryFieldKey);
 
-  // Update filterFields in DataTable context
+  // Update filterFields and normalizedFieldItems in DataTable context
   (0, _react.useEffect)(() => {
-    setFilterField(field);
+    setFilterFieldLabel(field);
+    setNormalizedFieldItems(primaryFieldKey, fieldItems); // Store normalized items in context for DataTableBadge label lookup
   }, []);
+  if (!primaryFieldEntry) {
+    console.warn('DataTableAdvFilterSingleValue2: "field" prop is missing or empty - cannot render filter.');
+    return null;
+  }
   var toggle = () => setDropdownOpen(prevState => !prevState);
   return /*#__PURE__*/_react.default.createElement(_reactstrap.Dropdown, {
     className: "adv-filter-dropdown",
@@ -34,13 +44,13 @@ function DataTableAdvFilterSingleValue2(_ref) {
     color: "primary",
     outline: true,
     className: "adv-filter-dropdown-toggle",
-    title: primaryFieldEntry[1] // Use value of field object as title
+    title: primaryFieldValue // Use value of field object as title
     ,
     caret: true
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "adv-filter-title"
-  }, primaryFieldEntry[1], " ")), /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownMenu, null, fieldItems.map((item, idx) => /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
+  }, primaryFieldValue, " ")), /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownMenu, null, normalizedFieldItems === null || normalizedFieldItems === void 0 ? void 0 : normalizedFieldItems.map((item, idx) => /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
     key: idx,
-    onClick: () => updateSingleValueFilter(primaryFieldEntry[0], item) // Use key of field object to update the filter
-  }, item))));
+    onClick: () => updateSingleValueFilter(primaryFieldKey, item.value) // Use key of field object to update the filter
+  }, item.label))));
 }

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

@@ -8,15 +8,24 @@ import { useDataTableContext } from '../../DataTableContext.jsx';
 import './DataTableAdvFilter2.scss';
 
 export function DataTableAdvFilterSingleValue2({ field, fieldItems }) {
-	const { updateSingleValueFilter, setFilterField } = useDataTableContext();
+	const { updateSingleValueFilter, setFilterFieldLabel, setNormalizedFieldItems, getNormalizedFieldItems } = useDataTableContext();
 	const [ dropdownOpen, setDropdownOpen ] = useState(false);
-	const primaryFieldEntry = Object.entries(field)[0]; // Extracts the first key-value pair from the field object
+	const entries = field != null && typeof field === 'object' ? Object.entries(field) : [];
+	const primaryFieldEntry = entries[0]; // Extracts the first key-value pair from the field object
+	const [primaryFieldKey, primaryFieldValue] = primaryFieldEntry ?? []; 
+	const normalizedFieldItems = getNormalizedFieldItems(primaryFieldKey);
 
-	// Update filterFields in DataTable context
+	// Update filterFields and normalizedFieldItems in DataTable context
 	useEffect(() => {
-		setFilterField(field);
+		setFilterFieldLabel(field);
+		setNormalizedFieldItems(primaryFieldKey, fieldItems); // Store normalized items in context for DataTableBadge label lookup
 	},[]);
 
+	if (!primaryFieldEntry) {
+		console.warn('DataTableAdvFilterSingleValue2: "field" prop is missing or empty - cannot render filter.');
+		return null;
+	}
+
 	const toggle = () => setDropdownOpen((prevState) => !prevState);
 
 	return (
@@ -25,20 +34,20 @@ export function DataTableAdvFilterSingleValue2({ field, fieldItems }) {
 				color="primary"
 				outline
 				className="adv-filter-dropdown-toggle"
-				title={primaryFieldEntry[1]} // Use value of field object as title
+				title={primaryFieldValue} // Use value of field object as title
 				caret
 			>
 				<span className="adv-filter-title">
-					{primaryFieldEntry[1]} {/* Use value of field object as title */}
+					{primaryFieldValue} {/* Use value of field object as title */}
 				</span>
 			</DropdownToggle>
 			<DropdownMenu>
-				{fieldItems.map((item, idx) => (
+				{normalizedFieldItems?.map((item, idx) => (
 					<DropdownItem
 						key={idx}
-						onClick={() => updateSingleValueFilter(primaryFieldEntry[0], item)} // Use key of field object to update the filter
+						onClick={() => updateSingleValueFilter(primaryFieldKey, item.value)} // Use key of field object to update the filter
 					>
-						{item}
+						{item.label}
 					</DropdownItem>
 				))}
 			</DropdownMenu>

package/package.json

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