@trackunit/filters-filter-bar 1.3.210 → 1.3.211

package/index.esm.js

@@ -1,8 +1,8 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
-import { VirtualizedList, Text, Button, Card, CardBody, useViewportBreakpoints, Popover, PopoverTrigger, Tooltip, Icon, PopoverContent, IconButton, MenuList } from '@trackunit/react-components';
+import { Filter, FilterBody, RadioFilterItem, CheckBoxFilterItem, FilterHeader as FilterHeader$1, FilterFooter } from '@trackunit/react-filter-components';
+import { Button, VirtualizedList, Text, Card, CardBody, useViewportBreakpoints, Popover, PopoverTrigger, Tooltip, Icon, PopoverContent, IconButton, MenuList } from '@trackunit/react-components';
 import { useAnalytics, useTextSearch, useCurrentUser } from '@trackunit/react-core-hooks';
-import { FilterBody, RadioFilterItem, CheckBoxFilterItem, FilterHeader as FilterHeader$1, FilterFooter, Filter } from '@trackunit/react-filter-components';
 import { useRef, useMemo, useState, useEffect, useCallback, Fragment as Fragment$1 } from 'react';
 import { capitalize } from 'string-ts';
 import { createEvent } from '@trackunit/react-core-contexts-api';
@@ -318,6 +318,137 @@ const setupLibraryTranslations = () => {
     registerTranslations(translations);
 };
 
+/**
+ * Returns the two first values, appends counter if more.
+ *
+ * @param {string[]} [input] Array of values to reduce
+ * @returns {*}  {string}
+ */
+const reduceFilterText = (input) => {
+    if (!Array.isArray(input)) {
+        return input;
+    }
+    // Only first two elements
+    const firstTwo = input.slice(0, 2);
+    const remainder = input.slice(2, input.length).length;
+    const firstTwoJoined = firstTwo.join(", ");
+    const remainderStr = remainder > 0 ? `, +${remainder}` : "";
+    return firstTwoJoined + remainderStr;
+};
+
+/**
+ * Filter is a React component that renders a filter element based on the provided filter definition and state.
+ *
+ * @returns {ReactElement} - Returns the Filter component.
+ */
+const FilterComponent = ({ filter, filterBarActions, filterState, readOnly = false, visualStyle = "button", className, asIcon, size, }) => {
+    const values = filterBarActions.getValuesByKey(filter.filterKey);
+    const valuesLength = values && Array.isArray(values) ? values.length : undefined;
+    const getFilterText = () => {
+        if (!values) {
+            return undefined;
+        }
+        if (filter.valueAsText) {
+            return reduceFilterText(filter.valueAsText(values));
+        }
+        else if (filter.type === "valueNameArray") {
+            return reduceFilterText(values.map(value => value.name));
+        }
+        else if (filter.type === "valueName") {
+            return values.name;
+        }
+        return values.toString();
+    };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const setValue = (callback) => {
+        const newValue = callback(filterBarActions.getValuesByKey(filter.filterKey));
+        if (filter.type === "string") {
+            filterBarActions.setStringValue(filter.filterKey, newValue);
+        }
+        else if (filter.type === "stringArray") {
+            filterBarActions.setArrayValue(filter.filterKey, newValue);
+        }
+        else if (filter.type === "dateRange") {
+            filterBarActions.setDateRange(filter.filterKey, newValue);
+        }
+        else if (filter.type === "area") {
+            filterBarActions.setArea(newValue);
+        }
+        else if (filter.type === "valueNameArray") {
+            filterBarActions.setArrayObjectValue(filter.filterKey, newValue);
+        }
+        else if (filter.type === "valueName") {
+            filterBarActions.setObjectValue(filter.filterKey, newValue);
+        }
+        else if (filter.type === "minMax") {
+            filterBarActions.setMinMaxValue(filter.filterKey, newValue);
+        }
+        else if (filter.type === "boolean") {
+            filterBarActions.setBooleanValue(filter.filterKey, newValue);
+        }
+        else {
+            filterBarActions.setNumberValue(filter.filterKey, newValue);
+        }
+    };
+    const text = getFilterText();
+    const activeFilterText = Array.isArray(text) ? text.join(", ") : text;
+    const showDirectly = filter.showDirectly || false;
+    return showDirectly ? (jsx(Fragment, { children: filter.component({
+            filterDefinition: filter,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            value: values,
+            setValue,
+            filterBarActions,
+            filterState,
+        }) })) : (jsx(Filter, { activeLabel: activeFilterText, activeOptionsCount: valuesLength, asIcon: asIcon, className: className, dataTestId: `${filter.filterKey}-filter-button`, isActive: filterBarActions.appliedFilterKeys().includes(filter.filterKey), popoverProps: { placement: visualStyle === "list-item" ? "right-start" : "bottom-start" }, readOnly: readOnly, size: size, title: filter.title, visualStyle: visualStyle, withStickyHeader: true, children: filter.component({
+            filterDefinition: filter,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            value: values,
+            setValue,
+            filterBarActions,
+            filterState,
+        }) }));
+};
+
+/**
+ * FiltersRenderer renders an array of Filter components from filter definitions
+ * It ignores hidden filters.
+ *
+ * Note: This component does not provide any styling or layout - use a wrapper for proper list styling.
+ *
+ * @param {object} props - The component props
+ * @param {FilterDefinition[]} props.filters - Array of filter definitions to render
+ * @param {FilterBarConfig & FilterMapActions & FilterMapGetter} props.filterBarConfig - The filter bar configuration
+ * @param {ComponentProps<typeof FilterComponent>["visualStyle"]} [props.visualStyle] - The visual style of the filters
+ * @returns {ReactElement[] | null} - Returns an array of Filter components or null
+ */
+const FiltersRenderer = ({ filters, filterBarConfig, visualStyle, }) => {
+    return filters.length === 0
+        ? null
+        : filters
+            .filter(filter => !filter.isHidden)
+            .map(filter => (jsx(FilterComponent, { filter: filter, filterBarActions: filterBarConfig, filterState: { values: filterBarConfig.values, setters: filterBarConfig.setters }, visualStyle: visualStyle }, `filter-${filter.filterKey}`)));
+};
+
+/**
+ * ResetFiltersButton is a React component that provides a button for resetting filters.
+ *
+ * @returns {ReactElement | null} The rendered ResetFiltersButton component, or null if no filters have been applied.
+ */
+const ResetFiltersButton = ({ resetFiltersToInitialState, dataTestId, className, }) => {
+    const [t] = useTranslation();
+    return (jsxs(Button, { className: className, dataTestId: dataTestId ?? "reset-filters-button", onClick: () => {
+            resetFiltersToInitialState();
+        }, size: "small", variant: "ghost", children: [t("filtersBar.resetFilters"), jsx("span", { className: "sr-only", children: "Resets all applied filters" })] }));
+};
+
+/**
+ *
+ */
+const AppliedFiltersRenderer = ({ appliedFilters, filterBarConfig, }) => {
+    return (jsxs(Fragment, { children: [appliedFilters.filter(filter => !filter.showDirectly).length > 0 ? (jsx("div", { className: "h-4 w-[1px] bg-slate-300", "data-testid": "applied-filters-buttons" })) : null, jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: appliedFilters }), filterBarConfig.appliedFilterKeys().length > 0 ? (jsx(ResetFiltersButton, { resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })) : null] }));
+};
+
 /**
  * Events — each with a name, and eventType.
  * Adding a Description is encouraged.
@@ -662,98 +793,6 @@ const FilterButtonTooltipLabel = ({ filterBarConfig, }) => {
     }
 };
 
-/**
- * Returns the two first values, appends counter if more.
- *
- * @param {string[]} [input] Array of values to reduce
- * @returns {*}  {string}
- */
-const reduceFilterText = (input) => {
-    if (!Array.isArray(input)) {
-        return input;
-    }
-    // Only first two elements
-    const firstTwo = input.slice(0, 2);
-    const remainder = input.slice(2, input.length).length;
-    const firstTwoJoined = firstTwo.join(", ");
-    const remainderStr = remainder > 0 ? `, +${remainder}` : "";
-    return firstTwoJoined + remainderStr;
-};
-
-/**
- * Filter is a React component that renders a filter element based on the provided filter definition and state.
- *
- * @returns {ReactElement} - Returns the Filter component.
- */
-const FilterComponent = ({ filter, filterBarActions, filterState, readOnly = false, visualStyle = "button", className, asIcon, size, }) => {
-    const values = filterBarActions.getValuesByKey(filter.filterKey);
-    const valuesLength = values && Array.isArray(values) ? values.length : undefined;
-    const getFilterText = () => {
-        if (!values) {
-            return undefined;
-        }
-        if (filter.valueAsText) {
-            return reduceFilterText(filter.valueAsText(values));
-        }
-        else if (filter.type === "valueNameArray") {
-            return reduceFilterText(values.map(value => value.name));
-        }
-        else if (filter.type === "valueName") {
-            return values.name;
-        }
-        return values.toString();
-    };
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const setValue = (callback) => {
-        const newValue = callback(filterBarActions.getValuesByKey(filter.filterKey));
-        if (filter.type === "string") {
-            filterBarActions.setStringValue(filter.filterKey, newValue);
-        }
-        else if (filter.type === "stringArray") {
-            filterBarActions.setArrayValue(filter.filterKey, newValue);
-        }
-        else if (filter.type === "dateRange") {
-            filterBarActions.setDateRange(filter.filterKey, newValue);
-        }
-        else if (filter.type === "area") {
-            filterBarActions.setArea(newValue);
-        }
-        else if (filter.type === "valueNameArray") {
-            filterBarActions.setArrayObjectValue(filter.filterKey, newValue);
-        }
-        else if (filter.type === "valueName") {
-            filterBarActions.setObjectValue(filter.filterKey, newValue);
-        }
-        else if (filter.type === "minMax") {
-            filterBarActions.setMinMaxValue(filter.filterKey, newValue);
-        }
-        else if (filter.type === "boolean") {
-            filterBarActions.setBooleanValue(filter.filterKey, newValue);
-        }
-        else {
-            filterBarActions.setNumberValue(filter.filterKey, newValue);
-        }
-    };
-    const text = getFilterText();
-    const activeFilterText = Array.isArray(text) ? text.join(", ") : text;
-    const showDirectly = filter.showDirectly || false;
-    return showDirectly ? (jsx(Fragment, { children: filter.component({
-            filterDefinition: filter,
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            value: values,
-            setValue,
-            filterBarActions,
-            filterState,
-        }) })) : (jsx(Filter, { activeLabel: activeFilterText, activeOptionsCount: valuesLength, asIcon: asIcon, className: className, dataTestId: `${filter.filterKey}-filter-button`, isActive: filterBarActions.appliedFilterKeys().includes(filter.filterKey), popoverProps: { placement: visualStyle === "list-item" ? "right-start" : "bottom-start" }, readOnly: readOnly, size: size, title: filter.title, visualStyle: visualStyle, withStickyHeader: true, children: filter.component({
-            filterDefinition: filter,
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            value: values,
-            setValue,
-            filterBarActions,
-            filterState,
-        }) }));
-};
-
 /**
  * Custom React hook for grouping and filtering a list of filters.
  *
@@ -835,26 +874,6 @@ const useFiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters =
     ]);
 };
 
-/**
- * FiltersRenderer renders an array of Filter components from filter definitions
- * It ignores hidden filters.
- *
- * Note: This component does not provide any styling or layout - use a wrapper for proper list styling.
- *
- * @param {object} props - The component props
- * @param {FilterDefinition[]} props.filters - Array of filter definitions to render
- * @param {FilterBarConfig & FilterMapActions & FilterMapGetter} props.filterBarConfig - The filter bar configuration
- * @param {ComponentProps<typeof FilterComponent>["visualStyle"]} [props.visualStyle] - The visual style of the filters
- * @returns {ReactElement[] | null} - Returns an array of Filter components or null
- */
-const FiltersRenderer = ({ filters, filterBarConfig, visualStyle, }) => {
-    return filters.length === 0
-        ? null
-        : filters
-            .filter(filter => !filter.isHidden)
-            .map(filter => (jsx(FilterComponent, { filter: filter, filterBarActions: filterBarConfig, filterState: { values: filterBarConfig.values, setters: filterBarConfig.setters }, visualStyle: visualStyle }, `filter-${filter.filterKey}`)));
-};
-
 /**
  * FiltersList is a React component that displays a list of filters within a filter bar.
  *
@@ -867,18 +886,6 @@ const GroupedFiltersList = ({ filterBarConfig, filtersGrouped, className, dataTe
         }) }));
 };
 
-/**
- * ResetFiltersButton is a React component that provides a button for resetting filters.
- *
- * @returns {ReactElement | null} The rendered ResetFiltersButton component, or null if no filters have been applied.
- */
-const ResetFiltersButton = ({ resetFiltersToInitialState, dataTestId, className, }) => {
-    const [t] = useTranslation();
-    return (jsxs(Button, { className: className, dataTestId: dataTestId ?? "reset-filters-button", onClick: () => {
-            resetFiltersToInitialState();
-        }, size: "small", variant: "ghost", children: [t("filtersBar.resetFilters"), jsx("span", { className: "sr-only", children: "Resets all applied filters" })] }));
-};
-
 /**
  *
  */
@@ -986,7 +993,7 @@ const MultipleFilterTooltipLabel = ({ filterBarConfig, filterKeys, filters, }) =
     }, {});
     switch (appliedFilterKeys.length) {
         case 0:
-            return t("filtersBar.appliedFiltersTooltip.none");
+            return jsx("div", { className: "text-xs font-medium", children: t("filtersBar.appliedFiltersTooltip.none") });
         case 1:
             return (jsx(SingleFilterTooltipLabel, { filter: filtersMap[appliedFilterKeys[0]], filterBarConfig: filterBarConfig, filterKey: appliedFilterKeys[0] }));
         default:
@@ -1018,7 +1025,7 @@ const FiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [],
                     }
                 }, placement: "bottom-start", children: modalState => {
                     return (jsxs(Fragment, { children: [jsx(PopoverTrigger, { children: jsx("div", { "data-testid": "starred-filters-menu-trigger", id: "starred-filters-menu-trigger", children: jsx(Tooltip, { disabled: !compact || modalState.isOpen, label: jsx(MultipleFilterTooltipLabel, { filterBarConfig: filterBarConfig, filters: appliedFilters }), children: jsx(Button, { prefix: jsx(Icon, { ariaHidden: true, color: filterBarConfig.appliedFilterKeys().length > 0 ? "primary" : undefined, name: "Filter", size: "small" }), size: "small", suffix: compact && showAppliedFiltersCount && filterBarConfig.appliedFilterKeys().length > 0 && isSm ? (jsxs("div", { children: [jsxs("span", { "aria-hidden": true, children: ["(", filterBarConfig.appliedFilterKeys().length, ")"] }), jsxs("span", { className: "sr-only", children: [filterBarConfig.appliedFilterKeys().length, " filters applied"] })] })) : undefined, variant: "secondary", ...buttonProps, children: title !== "" ? (jsx("span", { className: "hidden sm:block", children: title ?? t("filtersBar.filtersHeading") })) : null }) }) }) }), jsx(PopoverContent, { cellPadding: 100, children: jsx(FiltersMenuContent, { appliedCustomFields: appliedCustomFields, filterBarConfig: filterBarConfig, filterBarDefinitionCount: filterBarDefinitionCount, filtersToShowGrouped: filtersToShowGrouped, hasCustomFields: hasCustomFields, removeCustomFieldsGroup: removeCustomFieldsGroup, searchResultsGrouped: searchResultsGrouped, searchText: searchText, setSearchText: setSearchText, setShowCustomFilters: setShowCustomFilters, showCustomFilters: showCustomFilters }) })] }));
-                } }), showDirectlyFilters.length > 0 ? (jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: showDirectlyFilters })) : null, !compact ? (jsxs(Fragment, { children: [appliedFilters.filter(filter => !filter.showDirectly).length > 0 ? (jsx("div", { className: "h-4 w-[1px] bg-slate-300", "data-testid": "applied-filters-buttons" })) : null, jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: appliedFilters }), filterBarConfig.appliedFilterKeys().length > 0 ? (jsx(ResetFiltersButton, { resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })) : null] })) : null] }));
+                } }), showDirectlyFilters.length > 0 ? (jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: showDirectlyFilters })) : null, !compact ? jsx(AppliedFiltersRenderer, { appliedFilters: appliedFilters, filterBarConfig: filterBarConfig }) : null] }));
 };
 
 /**
@@ -1278,7 +1285,7 @@ const HierarchicalCheckboxFilter = ({ filterDefinition, filterBarActions, option
 /**
  * The FilterBar component serves as a wrapper for managing filters.
  */
-const FilterBar = ({ hiddenFilters, className, filterBarDefinition, filterBarConfig, compact = true, title, allowShowFiltersDirectly = true, }) => {
+const FilterBar = ({ hiddenFilters, className, filterBarDefinition, filterBarConfig, compact = true, allowShowFiltersDirectly = true, title, }) => {
     return (jsx(FiltersMenu, { allowShowFiltersDirectly: allowShowFiltersDirectly, className: className, compact: compact, dataTestId: `${filterBarConfig.name}-filterbar`, filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters, title: title }));
 };
 
@@ -1294,6 +1301,7 @@ const mockFilterBar = {
         getFilterBarName: doNothing,
         initialState: { customerType: [] },
         name: "test",
+        hasDefaultValue: doNothing,
         objectArrayIncludesValue: doNothing,
         resetFiltersToInitialState: doNothing,
         resetIndividualFilterToInitialState: doNothing,
@@ -1397,8 +1405,133 @@ const createInitialState = ({ name, mainFilters, setValue, }) => {
     };
 };
 
-/**
- * Custom hook for managing a filter bar's actions  .
+const areaFilterGeoJsonGeometrySchema = z.union([geoJsonPolygonSchema, geoJsonMultiPolygonSchema]);
+
+const hasValue = (value) => {
+    if (value === undefined || value === null) {
+        return false;
+    }
+    // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
+    if (typeof value === "object" && Object.keys(value).length === 0) {
+        return false;
+    }
+    return !(Array.isArray(value) && value.length === 0);
+};
+const isNotRightType = (filterDefinition, foundFilter) => {
+    return ((filterDefinition.type === "valueNameArray" && !isValueNameArray(foundFilter)) ||
+        (filterDefinition.type === "valueName" && !isValueName(foundFilter)) ||
+        (filterDefinition.type === "stringArray" && !isStringArrayFilterValue(foundFilter)) ||
+        (filterDefinition.type === "dateRange" && !isDateRangeValue(foundFilter)) ||
+        (filterDefinition.type === "area" && !isAreaFilterValue(foundFilter)) ||
+        (filterDefinition.type === "minMax" && !isMinMaxFilterValue(foundFilter)) ||
+        (filterDefinition.type === "boolean" && !isBooleanValue(foundFilter)) ||
+        (filterDefinition.type === "string" && typeof foundFilter !== "string") ||
+        (filterDefinition.type === "number" && typeof foundFilter !== "number"));
+};
+/**
+ *
+ */
+const isMinMaxFilterValue = (value) => {
+    return value
+        ? // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
+            typeof value === "object" && (Object.keys(value).includes("min") || Object.keys(value).includes("max"))
+        : false;
+};
+/**
+ *
+ */
+const isDateRangeValue = (value) => {
+    return value
+        ? // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
+            typeof value === "object" && (Object.keys(value).includes("from") || Object.keys(value).includes("to"))
+        : false;
+};
+/**
+ * {
+    type: "Polygon";
+    coordinates: [number, number][][];
+}
+ */
+const isAreaFilterValue = (value) => {
+    return areaFilterGeoJsonGeometrySchema.safeParse(value).success;
+};
+/**
+ *
+ */
+const isArrayFilterValue = (value) => {
+    return Array.isArray(value);
+};
+/**
+ *
+ */
+const isStringArrayFilterValue = (value) => {
+    return isArrayFilterValue(value) && value.every(item => typeof item === "string");
+};
+/**
+ *
+ */
+const isBooleanValue = (value) => {
+    // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
+    return value ? typeof value === "object" && Object.keys(value).includes("booleanValue") : false;
+};
+/**
+ * Type guard to check if a value is a single ValueName object
+ */
+const isValueName = (value) => {
+    return (typeof value === "object" &&
+        value !== null &&
+        // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
+        Object.keys(value).includes("name") &&
+        // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
+        Object.keys(value).includes("value"));
+};
+/**
+ * Type guard to check if a value is an array of ValueName objects
+ */
+const isValueNameArray = (value) => {
+    return isArrayFilterValue(value) && value.every(isValueName);
+};
+/**
+ * Validates a filter configuration against filter definitions.
+ *
+ * @template TFilterBarDefinition - The type of the filter bar definition.
+ * @param {FilterBarConfig<TFilterBarDefinition>} filter - The filter configuration to validate.
+ * @param {FilterDefinition[]} filterDefinitions - An array of filter definitions to validate against.
+ * @returns {boolean} - Returns `true` if the filter configuration is valid, otherwise `false`.
+ */
+const validateFilter = ({ values, starredFilterKeys, filterDefinitions, }) => {
+    const stateKeys = [];
+    let inBadState = false;
+    // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
+    for (const key of Object.keys(values)) {
+        if (filterDefinitions.find(filterDefinition => filterDefinition.filterKey === key)) {
+            stateKeys.push(key);
+        }
+        else {
+            inBadState = true;
+        }
+    }
+    filterDefinitions.forEach(filterDefinition => {
+        const foundFilter = values[filterDefinition.filterKey];
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (foundFilter && hasValue(foundFilter) && isNotRightType(filterDefinition, foundFilter)) {
+            inBadState = true;
+        }
+    });
+    if (starredFilterKeys.length > 0) {
+        const allKeys = filterDefinitions.map(f => f.filterKey);
+        const filteredStarredFilterKeys = starredFilterKeys.filter(key => allKeys.includes(key));
+        if (filteredStarredFilterKeys.length !== starredFilterKeys.length) {
+            inBadState = true;
+        }
+    }
+    stateKeys.sort((a, b) => a.localeCompare(b));
+    const filterKeysNotEqual = !isEqual(stateKeys, filterDefinitions.map(f => f.filterKey).sort((a, b) => a.localeCompare(b)));
+    return !(inBadState || filterKeysNotEqual);
+};
+
+/**
+ * Custom hook for managing a filter bar's actions  .
  *
  * @template TFilterBarDefinition - A generic type for the filter bar definition.
  * @returns {object} An object containing filter bar configuration and actions.
@@ -1417,6 +1550,33 @@ const useFilterBarActions = ({ name, filterBarConfig, filterBarDefinition, setFi
                 const filter = filterBarConfig.values[key];
                 return filter?.includes(value) || false;
             },
+            hasDefaultValue(key) {
+                // eslint-disable-next-line local-rules/no-typescript-assertion
+                const filterValue = filterBarConfig.values[key];
+                const filterDefinition = filterBarDefinition[key];
+                if (dequal(filterValue, filterBarDefinition[key]?.defaultValue) || dequal(filterValue, initialState?.[key])) {
+                    return true;
+                }
+                if (filterDefinition && filterDefinition.defaultValue === undefined) {
+                    return false;
+                }
+                if (!filterValue) {
+                    return true;
+                }
+                if (Array.isArray(filterValue)) {
+                    return filterValue.length === 0;
+                }
+                if (isMinMaxFilterValue(filterValue)) {
+                    return filterValue.min === undefined && filterValue.max === undefined;
+                }
+                if (isValueName(filterValue)) {
+                    return filterValue.value === "";
+                }
+                if (typeof filterValue === "object") {
+                    return objectKeys(filterValue).length === 0;
+                }
+                return false;
+            },
             getValuesByKey(key) {
                 return filterBarConfig.values[key];
             },
@@ -1681,131 +1841,6 @@ const useFilterBarActions = ({ name, filterBarConfig, filterBarDefinition, setFi
     return useMemo(() => ({ filterMapGetter, filterMapActions }), [filterMapGetter, filterMapActions]);
 };
 
-const areaFilterGeoJsonGeometrySchema = z.union([geoJsonPolygonSchema, geoJsonMultiPolygonSchema]);
-
-const hasValue = (value) => {
-    if (value === undefined || value === null) {
-        return false;
-    }
-    // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
-    if (typeof value === "object" && Object.keys(value).length === 0) {
-        return false;
-    }
-    return !(Array.isArray(value) && value.length === 0);
-};
-const isNotRightType = (filterDefinition, foundFilter) => {
-    return ((filterDefinition.type === "valueNameArray" && !isValueNameArray(foundFilter)) ||
-        (filterDefinition.type === "valueName" && !isValueName(foundFilter)) ||
-        (filterDefinition.type === "stringArray" && !isStringArrayFilterValue(foundFilter)) ||
-        (filterDefinition.type === "dateRange" && !isDateRangeValue(foundFilter)) ||
-        (filterDefinition.type === "area" && !isAreaFilterValue(foundFilter)) ||
-        (filterDefinition.type === "minMax" && !isMinMaxFilterValue(foundFilter)) ||
-        (filterDefinition.type === "boolean" && !isBooleanValue(foundFilter)) ||
-        (filterDefinition.type === "string" && typeof foundFilter !== "string") ||
-        (filterDefinition.type === "number" && typeof foundFilter !== "number"));
-};
-/**
- *
- */
-const isMinMaxFilterValue = (value) => {
-    return value
-        ? // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
-            typeof value === "object" && (Object.keys(value).includes("min") || Object.keys(value).includes("max"))
-        : false;
-};
-/**
- *
- */
-const isDateRangeValue = (value) => {
-    return value
-        ? // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
-            typeof value === "object" && (Object.keys(value).includes("from") || Object.keys(value).includes("to"))
-        : false;
-};
-/**
- * {
-    type: "Polygon";
-    coordinates: [number, number][][];
-}
- */
-const isAreaFilterValue = (value) => {
-    return areaFilterGeoJsonGeometrySchema.safeParse(value).success;
-};
-/**
- *
- */
-const isArrayFilterValue = (value) => {
-    return Array.isArray(value);
-};
-/**
- *
- */
-const isStringArrayFilterValue = (value) => {
-    return isArrayFilterValue(value) && value.every(item => typeof item === "string");
-};
-/**
- *
- */
-const isBooleanValue = (value) => {
-    // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
-    return value ? typeof value === "object" && Object.keys(value).includes("booleanValue") : false;
-};
-/**
- * Type guard to check if a value is a single ValueName object
- */
-const isValueName = (value) => {
-    return (typeof value === "object" &&
-        value !== null &&
-        // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
-        Object.keys(value).includes("name") &&
-        // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
-        Object.keys(value).includes("value"));
-};
-/**
- * Type guard to check if a value is an array of ValueName objects
- */
-const isValueNameArray = (value) => {
-    return isArrayFilterValue(value) && value.every(isValueName);
-};
-/**
- * Validates a filter configuration against filter definitions.
- *
- * @template TFilterBarDefinition - The type of the filter bar definition.
- * @param {FilterBarConfig<TFilterBarDefinition>} filter - The filter configuration to validate.
- * @param {FilterDefinition[]} filterDefinitions - An array of filter definitions to validate against.
- * @returns {boolean} - Returns `true` if the filter configuration is valid, otherwise `false`.
- */
-const validateFilter = ({ values, starredFilterKeys, filterDefinitions, }) => {
-    const stateKeys = [];
-    let inBadState = false;
-    // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
-    for (const key of Object.keys(values)) {
-        if (filterDefinitions.find(filterDefinition => filterDefinition.filterKey === key)) {
-            stateKeys.push(key);
-        }
-        else {
-            inBadState = true;
-        }
-    }
-    filterDefinitions.forEach(filterDefinition => {
-        const foundFilter = values[filterDefinition.filterKey];
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        if (foundFilter && hasValue(foundFilter) && isNotRightType(filterDefinition, foundFilter)) {
-            inBadState = true;
-        }
-    });
-    if (starredFilterKeys.length > 0) {
-        const allKeys = filterDefinitions.map(f => f.filterKey);
-        const filteredStarredFilterKeys = starredFilterKeys.filter(key => allKeys.includes(key));
-        if (filteredStarredFilterKeys.length !== starredFilterKeys.length) {
-            inBadState = true;
-        }
-    }
-    stateKeys.sort((a, b) => a.localeCompare(b));
-    const filterKeysNotEqual = !isEqual(stateKeys, filterDefinitions.map(f => f.filterKey).sort((a, b) => a.localeCompare(b)));
-    return !(inBadState || filterKeysNotEqual);
-};
-
 const getPersistenceKey = (name, clientSideUserId) => `filter-${name}-${clientSideUserId}`;
 /**
  * Custom hook for managing the persistence of filter bar configurations.
@@ -2095,4 +2130,4 @@ const mergeFilters = (filterBarDefinition, extraFilters) => {
  */
 setupLibraryTranslations();
 
-export { DefaultCheckboxFilter, DefaultDateRangeFilter, DefaultMinMaxFilter, DefaultRadioFilter, DynamicFilterList, FilterBar, FilterButtonTooltipLabel, FilterComponent, FilterEvents, FilterHeader, FilterResults, FilterTableComponent, FiltersMenu, FiltersMenuContent, FiltersRenderer, GroupedFiltersList, HierarchicalCheckboxFilter, ResetFiltersButton, areaFilterGeoJsonGeometrySchema, isAreaFilterValue, isArrayFilterValue, isBooleanValue, isDateRangeValue, isMinMaxFilterValue, isStringArrayFilterValue, isValueName, isValueNameArray, mergeFilters, mockFilterBar, toggleFilterValue, useFilterBar, useFilterBarAsync, useFiltersMenu, useSearchParamAsFilter, validateFilter };
+export { AppliedFiltersRenderer, DefaultCheckboxFilter, DefaultDateRangeFilter, DefaultMinMaxFilter, DefaultRadioFilter, DynamicFilterList, FilterBar, FilterButtonTooltipLabel, FilterComponent, FilterEvents, FilterHeader, FilterResults, FilterTableComponent, FiltersMenu, FiltersMenuContent, FiltersRenderer, GroupedFiltersList, HierarchicalCheckboxFilter, MultipleFilterTooltipLabel, ResetFiltersButton, areaFilterGeoJsonGeometrySchema, isAreaFilterValue, isArrayFilterValue, isBooleanValue, isDateRangeValue, isMinMaxFilterValue, isStringArrayFilterValue, isValueName, isValueNameArray, mergeFilters, mockFilterBar, toggleFilterValue, useFilterBar, useFilterBarAsync, useFiltersMenu, useSearchParamAsFilter, validateFilter };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/filters-filter-bar",
-  "version": "1.3.210",
+  "version": "1.3.211",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -14,18 +14,18 @@
     "tailwind-merge": "^2.0.0",
     "string-ts": "^2.0.0",
     "zod": "3.23.4",
-    "@trackunit/iris-app-api": "1.3.134",
-    "@trackunit/react-core-hooks": "1.3.136",
-    "@trackunit/react-filter-components": "1.3.172",
-    "@trackunit/react-date-and-time-components": "1.3.175",
-    "@trackunit/shared-utils": "1.5.126",
-    "@trackunit/react-form-components": "1.3.173",
-    "@trackunit/react-core-contexts-api": "1.4.132",
-    "@trackunit/geo-json-utils": "1.3.126",
-    "@trackunit/i18n-library-translation": "1.3.143",
-    "@trackunit/css-class-variance-utilities": "1.3.126",
-    "@trackunit/react-components": "1.4.152",
-    "@trackunit/react-test-setup": "1.0.16"
+    "@trackunit/iris-app-api": "1.3.135",
+    "@trackunit/react-core-hooks": "1.3.137",
+    "@trackunit/react-filter-components": "1.3.173",
+    "@trackunit/react-date-and-time-components": "1.3.176",
+    "@trackunit/shared-utils": "1.5.127",
+    "@trackunit/react-form-components": "1.3.174",
+    "@trackunit/react-core-contexts-api": "1.4.133",
+    "@trackunit/geo-json-utils": "1.3.127",
+    "@trackunit/i18n-library-translation": "1.3.144",
+    "@trackunit/css-class-variance-utilities": "1.3.127",
+    "@trackunit/react-components": "1.4.153",
+    "@trackunit/react-test-setup": "1.0.17"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",