@trackunit/filters-filter-bar 1.3.224 → 1.3.227

package/index.cjs.js

@@ -12,6 +12,7 @@ var reactFormComponents = require('@trackunit/react-form-components');
 var reactDateAndTimeComponents = require('@trackunit/react-date-and-time-components');
 var sharedUtils = require('@trackunit/shared-utils');
 var tailwindMerge = require('tailwind-merge');
+var irisAppApi = require('@trackunit/iris-app-api');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var dequal = require('dequal');
 var isEqual = require('lodash/isEqual');
@@ -801,7 +802,7 @@ const FilterButtonTooltipLabel = ({ filterBarConfig, }) => {
  * Custom React hook for grouping and filtering a list of filters.
  *
  * @param {FilterDefinition[]} filterDefinitions - The list of filter definitions to group and filter.
- * @param {string[]} hiddenFilters - An array of filter keys representing filters to be hidden.
+ * @param {string[]} hiddenFilters - An array of filter keys representing filters to be hidden, if not provided, all filters will be shown
  * @returns {UseGroupFiltersReturnType} An object containing the grouped filters.
  */
 const useGroupFilters = (filterDefinitions, hiddenFilters) => {
@@ -812,7 +813,12 @@ const useGroupFilters = (filterDefinitions, hiddenFilters) => {
             .map(key => ({
             key,
             title: t(`filtersBar.groups.${key}`),
-            filters: filterDefinitions.filter(rawFilter => rawFilter.group === key && hiddenFilters.includes(rawFilter.filterKey) === false),
+            filters: filterDefinitions.filter(rawFilter => {
+                const isInGroup = rawFilter.group === key;
+                const isHidden = hiddenFilters ? hiddenFilters.includes(rawFilter.filterKey) : false;
+                const shouldInclude = isInGroup && !isHidden;
+                return shouldInclude;
+            }),
         }))
             .filter(filter => filter.filters.length > 0);
     }, [filterDefinitions, hiddenFilters, t]);
@@ -825,21 +831,29 @@ const uniqueKeysFromGroups = (filters) => [...new Set(filters.map(filter => filt
  * It returns the filters that should be shown in the menu, the filters that should be shown directly in the filter bar,
  * and the filters that should be shown in the search results.
  */
-const useFiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], allowShowFiltersDirectly = true, }) => {
+const useFiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], allowShowFiltersDirectly = true, includeFilterKeys, }) => {
     const hideInMenu = react.useMemo(() => {
-        return sharedUtils.objectValues(filterBarDefinition)
+        const result = sharedUtils.objectValues(filterBarDefinition)
             .map(filter => {
             const showInFilterBar = filter.showInFilterBar ? filter.showInFilterBar() : true;
             const showInStarredMenu = filter.showInStarredMenu ? filter.showInStarredMenu() : true;
             const showMenuAnywayBecauseFilterHasChanged = filterBarConfig.appliedFilterKeys().includes(filter.filterKey);
-            return (!showInFilterBar || !showInStarredMenu) && !showMenuAnywayBecauseFilterHasChanged
+            const showInMenu = includeFilterKeys
+                ? filter.filterKey.startsWith("cf__")
+                    ? includeFilterKeys.includes(irisAppApi.customFieldFilterKey)
+                    : includeFilterKeys.includes(filter.filterKey)
+                : true;
+            return ((!showInFilterBar || !showInStarredMenu) && !showMenuAnywayBecauseFilterHasChanged) || !showInMenu
                 ? filter.filterKey
                 : null;
         })
             .filter(sharedUtils.truthy);
-    }, [filterBarConfig, filterBarDefinition]);
+        return result;
+    }, [filterBarConfig, filterBarDefinition, includeFilterKeys]);
     const removeCustomFieldsGroup = react.useCallback((groupOfFilters) => groupOfFilters.filter(group => group.key !== "CUSTOM_FIELDS"), []);
-    const { filtersGrouped } = useGroupFilters(sharedUtils.objectValues(filterBarDefinition), [...hideInMenu, ...hiddenFilters]);
+    const filterBarDefinitionArray = react.useMemo(() => sharedUtils.objectValues(filterBarDefinition), [filterBarDefinition]);
+    const hiddenFiltersArray = react.useMemo(() => [...hideInMenu, ...hiddenFilters], [hideInMenu, hiddenFilters]);
+    const { filtersGrouped } = useGroupFilters(filterBarDefinitionArray, hiddenFiltersArray);
     const { appliedFilters, filtersToShow, showDirectlyFilters, hasCustomFields } = react.useMemo(() => {
         const allFilters = filtersGrouped.map(group => group.filters).flat();
         return {
@@ -849,9 +863,10 @@ const useFiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters =
             hasCustomFields: allFilters.some(filter => filter.group === "CUSTOM_FIELDS"),
         };
     }, [filterBarConfig, filtersGrouped, allowShowFiltersDirectly]);
-    const [searchResults, searchText, setSearchText] = reactCoreHooks.useTextSearch(filtersToShow, item => [item.title]);
-    const { filtersGrouped: searchResultsGrouped } = useGroupFilters(searchResults, []);
-    const { filtersGrouped: filtersToShowGrouped } = useGroupFilters(filtersToShow, []);
+    const textCallback = react.useCallback((item) => [item.title], []);
+    const [searchResults, searchText, setSearchText] = reactCoreHooks.useTextSearch(filtersToShow, textCallback);
+    const { filtersGrouped: searchResultsGrouped } = useGroupFilters(searchResults);
+    const { filtersGrouped: filtersToShowGrouped } = useGroupFilters(filtersToShow);
     const appliedCustomFields = react.useMemo(() => appliedFilters.filter(filter => filter.group === "CUSTOM_FIELDS"), [appliedFilters]);
     return react.useMemo(() => {
         return {
@@ -1023,7 +1038,7 @@ const MultipleFilterTooltipLabel = ({ filterBarConfig, filterKeys, filters, }) =
  * @template TFilterBarDefinition - The type representing the filter bar definition.
  * @returns {ReactElement} - Returns the FilterMenu component.
  */
-const FiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], compact, title, dataTestId = "filters-menu", className, showAppliedFiltersCount = true, buttonProps, allowShowFiltersDirectly = true, }) => {
+const FiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], compact, title, dataTestId = "filters-menu", className, showAppliedFiltersCount = true, buttonProps, allowShowFiltersDirectly = true, includeFilterKeys, }) => {
     const [t] = useTranslation();
     const { isSm } = reactComponents.useViewportBreakpoints();
     const [showCustomFilters, setShowCustomFilters] = react.useState(false);
@@ -1032,6 +1047,7 @@ const FiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [],
         filterBarDefinition,
         filterBarConfig,
         hiddenFilters,
+        includeFilterKeys,
         allowShowFiltersDirectly,
     });
     return (jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex items-center gap-2", className), "data-testid": dataTestId, children: [jsxRuntime.jsx(reactComponents.Popover, { onOpenStateChange: open => {

package/index.esm.js

@@ -10,6 +10,7 @@ import { Search, NumberField, RadioGroup } from '@trackunit/react-form-component
 import { DayRangePicker } from '@trackunit/react-date-and-time-components';
 import { nonNullable, capitalize as capitalize$1, objectValues, truthy, objectKeys } from '@trackunit/shared-utils';
 import { twMerge } from 'tailwind-merge';
+import { customFieldFilterKey } from '@trackunit/iris-app-api';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { dequal } from 'dequal';
 import isEqual from 'lodash/isEqual';
@@ -799,7 +800,7 @@ const FilterButtonTooltipLabel = ({ filterBarConfig, }) => {
  * Custom React hook for grouping and filtering a list of filters.
  *
  * @param {FilterDefinition[]} filterDefinitions - The list of filter definitions to group and filter.
- * @param {string[]} hiddenFilters - An array of filter keys representing filters to be hidden.
+ * @param {string[]} hiddenFilters - An array of filter keys representing filters to be hidden, if not provided, all filters will be shown
  * @returns {UseGroupFiltersReturnType} An object containing the grouped filters.
  */
 const useGroupFilters = (filterDefinitions, hiddenFilters) => {
@@ -810,7 +811,12 @@ const useGroupFilters = (filterDefinitions, hiddenFilters) => {
             .map(key => ({
             key,
             title: t(`filtersBar.groups.${key}`),
-            filters: filterDefinitions.filter(rawFilter => rawFilter.group === key && hiddenFilters.includes(rawFilter.filterKey) === false),
+            filters: filterDefinitions.filter(rawFilter => {
+                const isInGroup = rawFilter.group === key;
+                const isHidden = hiddenFilters ? hiddenFilters.includes(rawFilter.filterKey) : false;
+                const shouldInclude = isInGroup && !isHidden;
+                return shouldInclude;
+            }),
         }))
             .filter(filter => filter.filters.length > 0);
     }, [filterDefinitions, hiddenFilters, t]);
@@ -823,21 +829,29 @@ const uniqueKeysFromGroups = (filters) => [...new Set(filters.map(filter => filt
  * It returns the filters that should be shown in the menu, the filters that should be shown directly in the filter bar,
  * and the filters that should be shown in the search results.
  */
-const useFiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], allowShowFiltersDirectly = true, }) => {
+const useFiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], allowShowFiltersDirectly = true, includeFilterKeys, }) => {
     const hideInMenu = useMemo(() => {
-        return objectValues(filterBarDefinition)
+        const result = objectValues(filterBarDefinition)
             .map(filter => {
             const showInFilterBar = filter.showInFilterBar ? filter.showInFilterBar() : true;
             const showInStarredMenu = filter.showInStarredMenu ? filter.showInStarredMenu() : true;
             const showMenuAnywayBecauseFilterHasChanged = filterBarConfig.appliedFilterKeys().includes(filter.filterKey);
-            return (!showInFilterBar || !showInStarredMenu) && !showMenuAnywayBecauseFilterHasChanged
+            const showInMenu = includeFilterKeys
+                ? filter.filterKey.startsWith("cf__")
+                    ? includeFilterKeys.includes(customFieldFilterKey)
+                    : includeFilterKeys.includes(filter.filterKey)
+                : true;
+            return ((!showInFilterBar || !showInStarredMenu) && !showMenuAnywayBecauseFilterHasChanged) || !showInMenu
                 ? filter.filterKey
                 : null;
         })
             .filter(truthy);
-    }, [filterBarConfig, filterBarDefinition]);
+        return result;
+    }, [filterBarConfig, filterBarDefinition, includeFilterKeys]);
     const removeCustomFieldsGroup = useCallback((groupOfFilters) => groupOfFilters.filter(group => group.key !== "CUSTOM_FIELDS"), []);
-    const { filtersGrouped } = useGroupFilters(objectValues(filterBarDefinition), [...hideInMenu, ...hiddenFilters]);
+    const filterBarDefinitionArray = useMemo(() => objectValues(filterBarDefinition), [filterBarDefinition]);
+    const hiddenFiltersArray = useMemo(() => [...hideInMenu, ...hiddenFilters], [hideInMenu, hiddenFilters]);
+    const { filtersGrouped } = useGroupFilters(filterBarDefinitionArray, hiddenFiltersArray);
     const { appliedFilters, filtersToShow, showDirectlyFilters, hasCustomFields } = useMemo(() => {
         const allFilters = filtersGrouped.map(group => group.filters).flat();
         return {
@@ -847,9 +861,10 @@ const useFiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters =
             hasCustomFields: allFilters.some(filter => filter.group === "CUSTOM_FIELDS"),
         };
     }, [filterBarConfig, filtersGrouped, allowShowFiltersDirectly]);
-    const [searchResults, searchText, setSearchText] = useTextSearch(filtersToShow, item => [item.title]);
-    const { filtersGrouped: searchResultsGrouped } = useGroupFilters(searchResults, []);
-    const { filtersGrouped: filtersToShowGrouped } = useGroupFilters(filtersToShow, []);
+    const textCallback = useCallback((item) => [item.title], []);
+    const [searchResults, searchText, setSearchText] = useTextSearch(filtersToShow, textCallback);
+    const { filtersGrouped: searchResultsGrouped } = useGroupFilters(searchResults);
+    const { filtersGrouped: filtersToShowGrouped } = useGroupFilters(filtersToShow);
     const appliedCustomFields = useMemo(() => appliedFilters.filter(filter => filter.group === "CUSTOM_FIELDS"), [appliedFilters]);
     return useMemo(() => {
         return {
@@ -1021,7 +1036,7 @@ const MultipleFilterTooltipLabel = ({ filterBarConfig, filterKeys, filters, }) =
  * @template TFilterBarDefinition - The type representing the filter bar definition.
  * @returns {ReactElement} - Returns the FilterMenu component.
  */
-const FiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], compact, title, dataTestId = "filters-menu", className, showAppliedFiltersCount = true, buttonProps, allowShowFiltersDirectly = true, }) => {
+const FiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], compact, title, dataTestId = "filters-menu", className, showAppliedFiltersCount = true, buttonProps, allowShowFiltersDirectly = true, includeFilterKeys, }) => {
     const [t] = useTranslation();
     const { isSm } = useViewportBreakpoints();
     const [showCustomFilters, setShowCustomFilters] = useState(false);
@@ -1030,6 +1045,7 @@ const FiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [],
         filterBarDefinition,
         filterBarConfig,
         hiddenFilters,
+        includeFilterKeys,
         allowShowFiltersDirectly,
     });
     return (jsxs("div", { className: twMerge("flex items-center gap-2", className), "data-testid": dataTestId, children: [jsx(Popover, { onOpenStateChange: open => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/filters-filter-bar",
-  "version": "1.3.224",
+  "version": "1.3.227",
   "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.138",
-    "@trackunit/react-core-hooks": "1.3.141",
-    "@trackunit/react-filter-components": "1.3.183",
-    "@trackunit/react-date-and-time-components": "1.3.185",
-    "@trackunit/shared-utils": "1.5.130",
-    "@trackunit/react-form-components": "1.3.184",
-    "@trackunit/react-core-contexts-api": "1.4.137",
-    "@trackunit/geo-json-utils": "1.3.130",
-    "@trackunit/i18n-library-translation": "1.3.148",
-    "@trackunit/css-class-variance-utilities": "1.3.130",
-    "@trackunit/react-components": "1.4.161",
-    "@trackunit/react-test-setup": "1.0.20"
+    "@trackunit/iris-app-api": "1.3.141",
+    "@trackunit/react-core-hooks": "1.3.144",
+    "@trackunit/react-filter-components": "1.3.185",
+    "@trackunit/react-date-and-time-components": "1.3.188",
+    "@trackunit/shared-utils": "1.5.132",
+    "@trackunit/react-form-components": "1.3.187",
+    "@trackunit/react-core-contexts-api": "1.4.139",
+    "@trackunit/geo-json-utils": "1.3.132",
+    "@trackunit/i18n-library-translation": "1.3.151",
+    "@trackunit/css-class-variance-utilities": "1.3.132",
+    "@trackunit/react-components": "1.4.163",
+    "@trackunit/react-test-setup": "1.0.22"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/lib/components/FiltersMenu.d.ts

@@ -34,6 +34,10 @@ interface FiltersMenuProps<TFilterBarDefinition extends FilterBarDefinition> ext
      * The icon props for the filter button to override the icon look and feel.
      */
     buttonProps?: ButtonProps;
+    /**
+     * The filter keys to include in the filter bar, if not defined all filters will be shown.
+     */
+    includeFilterKeys?: string[];
 }
 /**
  * FilterMenu is a React component that displays a list of filters in a popover menu based on the provided filter bar configuration.
@@ -41,5 +45,5 @@ interface FiltersMenuProps<TFilterBarDefinition extends FilterBarDefinition> ext
  * @template TFilterBarDefinition - The type representing the filter bar definition.
  * @returns {ReactElement} - Returns the FilterMenu component.
  */
-export declare const FiltersMenu: <TFilterBarDefinition extends FilterBarDefinition>({ filterBarDefinition, filterBarConfig, hiddenFilters, compact, title, dataTestId, className, showAppliedFiltersCount, buttonProps, allowShowFiltersDirectly, }: FiltersMenuProps<TFilterBarDefinition>) => ReactElement;
+export declare const FiltersMenu: <TFilterBarDefinition extends FilterBarDefinition>({ filterBarDefinition, filterBarConfig, hiddenFilters, compact, title, dataTestId, className, showAppliedFiltersCount, buttonProps, allowShowFiltersDirectly, includeFilterKeys, }: FiltersMenuProps<TFilterBarDefinition>) => ReactElement;
 export {};

package/src/lib/hooks/useFiltersMenu.d.ts

@@ -1,21 +1,22 @@
-import { FilterBarConfig, FilterBarDefinition, FilterMapActions, FilterMapGetter } from "../types/FilterTypes";
+import { FilterBarConfig, FilterBarDefinition, FilterDefinition, FilterMapActions, FilterMapGetter } from "../types/FilterTypes";
 import { GroupOfFilters } from "./useGroupFilters";
 type UseFiltersMenuProps<TFilterBarDefinition extends FilterBarDefinition> = {
     filterBarDefinition: TFilterBarDefinition;
     filterBarConfig: FilterBarConfig<TFilterBarDefinition> & FilterMapActions & FilterMapGetter;
     hiddenFilters?: string[];
     allowShowFiltersDirectly?: boolean;
+    includeFilterKeys?: string[];
 };
 /**
  * This hook is used to manage the filters menu.
  * It returns the filters that should be shown in the menu, the filters that should be shown directly in the filter bar,
  * and the filters that should be shown in the search results.
  */
-export declare const useFiltersMenu: <TFilterBarDefinition extends FilterBarDefinition>({ filterBarDefinition, filterBarConfig, hiddenFilters, allowShowFiltersDirectly, }: UseFiltersMenuProps<TFilterBarDefinition>) => {
-    appliedFilters: import("../types/FilterTypes").FilterDefinition[];
+export declare const useFiltersMenu: <TFilterBarDefinition extends FilterBarDefinition>({ filterBarDefinition, filterBarConfig, hiddenFilters, allowShowFiltersDirectly, includeFilterKeys, }: UseFiltersMenuProps<TFilterBarDefinition>) => {
+    appliedFilters: FilterDefinition[];
     hasCustomFields: boolean;
-    showDirectlyFilters: import("../types/FilterTypes").FilterDefinition[];
-    appliedCustomFields: import("../types/FilterTypes").FilterDefinition[];
+    showDirectlyFilters: FilterDefinition[];
+    appliedCustomFields: FilterDefinition[];
     searchText: string;
     setSearchText: import("react").Dispatch<string>;
     filtersToShowGrouped: GroupOfFilters[];

package/src/lib/hooks/useGroupFilters.d.ts

@@ -20,8 +20,8 @@ interface UseGroupFiltersReturnType {
  * Custom React hook for grouping and filtering a list of filters.
  *
  * @param {FilterDefinition[]} filterDefinitions - The list of filter definitions to group and filter.
- * @param {string[]} hiddenFilters - An array of filter keys representing filters to be hidden.
+ * @param {string[]} hiddenFilters - An array of filter keys representing filters to be hidden, if not provided, all filters will be shown
  * @returns {UseGroupFiltersReturnType} An object containing the grouped filters.
  */
-export declare const useGroupFilters: (filterDefinitions: FilterDefinition[], hiddenFilters: string[]) => UseGroupFiltersReturnType;
+export declare const useGroupFilters: (filterDefinitions: FilterDefinition[], hiddenFilters?: string[]) => UseGroupFiltersReturnType;
 export {};