@trackunit/filters-filter-bar 0.0.5 → 0.0.6

package/index.cjs.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
+var sharedUtils = require('@trackunit/shared-utils');
 var React = require('react');
 var reactFilterComponents = require('@trackunit/react-filter-components');
-var sharedUtils = require('@trackunit/shared-utils');
 var reactComponents = require('@trackunit/react-components');
 var reactRouterDom = require('react-router-dom');
 var reactCoreHooks = require('@trackunit/react-core-hooks');
@@ -447,16 +447,15 @@ const FilterEvents = {
 const StarredFiltersMenu = ({ filterBarDefinition, updateStarredFilters, starredFilterKeys, hiddenFilters = [], }) => {
     const [t] = useTranslation();
     const { logEvent } = reactCoreHooks.useAnalytics(FilterEvents);
-    const hideInStarredMenu = Object.values(filterBarDefinition)
-        .map(filter => {
-        if (filter.showInStarredMenu) {
-            return filter.showInStarredMenu() ? null : filter.filterKey;
-        }
-        else {
-            return null;
-        }
-    })
-        .filter(sharedUtils.truthy);
+    const hideInStarredMenu = React.useMemo(() => {
+        return Object.values(filterBarDefinition)
+            .map(filter => {
+            const showInStarredMenu = filter.showInStarredMenu ? filter.showInStarredMenu() : true;
+            const showInFilterBar = filter.showInFilterBar ? filter.showInFilterBar() : true;
+            return !showInStarredMenu && !showInFilterBar ? filter.filterKey : null;
+        })
+            .filter(sharedUtils.truthy);
+    }, [filterBarDefinition]);
     const { filtersGrouped } = useStarredGroupFilters(Object.values(filterBarDefinition), [
         ...hideInStarredMenu,
         ...hiddenFilters,
@@ -488,7 +487,18 @@ const StarredFiltersMenu = ({ filterBarDefinition, updateStarredFilters, starred
  * @returns {JSX.Element} - Returns the StarredFilters component.
  */
 const StarredFilters = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], }) => {
-    const { filtersGrouped } = useStarredGroupFilters(Object.values(filterBarDefinition), hiddenFilters);
+    const hideInFilterBar = React.useMemo(() => {
+        return Object.values(filterBarDefinition)
+            .map(filter => {
+            const showInFilterBar = filter.showInFilterBar ? filter.showInFilterBar() : true;
+            return !showInFilterBar ? filter.filterKey : null;
+        })
+            .filter(sharedUtils.truthy);
+    }, [filterBarDefinition]);
+    const { filtersGrouped } = useStarredGroupFilters(Object.values(filterBarDefinition), [
+        ...hideInFilterBar,
+        ...hiddenFilters,
+    ]);
     return (jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3", "data-testid": "starred-filters", children: [jsxRuntime.jsx(StarredFiltersMenu, { hiddenFilters: hiddenFilters, starredFilterKeys: filterBarConfig.starredFilterKeys, filterBarDefinition: filterBarDefinition, updateStarredFilters: filterBarConfig.updateStarredFilters }), filtersGrouped.map(group => group.filters
                 .filter(filter => !hiddenFilters.includes(filter.filterKey))
                 .map(filter => {

package/index.esm.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
+import { titleCase, truthy, capitalize as capitalize$1, nonNullable } from '@trackunit/shared-utils';
 import React, { useMemo, Fragment as Fragment$1, useRef, useState, useEffect, useCallback } from 'react';
 import { Filter as Filter$1, FilterBody, RadioFilterItem, CheckBoxFilterItem, FilterHeader as FilterHeader$1, FilterFooter } from '@trackunit/react-filter-components';
-import { titleCase, truthy, capitalize as capitalize$1, nonNullable } from '@trackunit/shared-utils';
 import { Button, Popover, PopoverTrigger, IconButton, Icon, PopoverContent, MenuList, Text, StarButton, DayRangePicker } from '@trackunit/react-components';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useAnalytics, useTextSearch } from '@trackunit/react-core-hooks';
@@ -439,16 +439,15 @@ const FilterEvents = {
 const StarredFiltersMenu = ({ filterBarDefinition, updateStarredFilters, starredFilterKeys, hiddenFilters = [], }) => {
     const [t] = useTranslation();
     const { logEvent } = useAnalytics(FilterEvents);
-    const hideInStarredMenu = Object.values(filterBarDefinition)
-        .map(filter => {
-        if (filter.showInStarredMenu) {
-            return filter.showInStarredMenu() ? null : filter.filterKey;
-        }
-        else {
-            return null;
-        }
-    })
-        .filter(truthy);
+    const hideInStarredMenu = useMemo(() => {
+        return Object.values(filterBarDefinition)
+            .map(filter => {
+            const showInStarredMenu = filter.showInStarredMenu ? filter.showInStarredMenu() : true;
+            const showInFilterBar = filter.showInFilterBar ? filter.showInFilterBar() : true;
+            return !showInStarredMenu && !showInFilterBar ? filter.filterKey : null;
+        })
+            .filter(truthy);
+    }, [filterBarDefinition]);
     const { filtersGrouped } = useStarredGroupFilters(Object.values(filterBarDefinition), [
         ...hideInStarredMenu,
         ...hiddenFilters,
@@ -480,7 +479,18 @@ const StarredFiltersMenu = ({ filterBarDefinition, updateStarredFilters, starred
  * @returns {JSX.Element} - Returns the StarredFilters component.
  */
 const StarredFilters = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], }) => {
-    const { filtersGrouped } = useStarredGroupFilters(Object.values(filterBarDefinition), hiddenFilters);
+    const hideInFilterBar = useMemo(() => {
+        return Object.values(filterBarDefinition)
+            .map(filter => {
+            const showInFilterBar = filter.showInFilterBar ? filter.showInFilterBar() : true;
+            return !showInFilterBar ? filter.filterKey : null;
+        })
+            .filter(truthy);
+    }, [filterBarDefinition]);
+    const { filtersGrouped } = useStarredGroupFilters(Object.values(filterBarDefinition), [
+        ...hideInFilterBar,
+        ...hiddenFilters,
+    ]);
     return (jsxs("div", { className: "flex flex-wrap items-center gap-3", "data-testid": "starred-filters", children: [jsx(StarredFiltersMenu, { hiddenFilters: hiddenFilters, starredFilterKeys: filterBarConfig.starredFilterKeys, filterBarDefinition: filterBarDefinition, updateStarredFilters: filterBarConfig.updateStarredFilters }), filtersGrouped.map(group => group.filters
                 .filter(filter => !hiddenFilters.includes(filter.filterKey))
                 .map(filter => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/filters-filter-bar",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/lib/types/FilterTypes.d.ts

@@ -93,6 +93,10 @@ export interface AbstractFilterDefinition {
      * A function that determines if the filter should be displayed in the starred filter menu.
      */
     showInStarredMenu?: () => boolean;
+    /**
+     * A function that determines if the filter should be displayed in the filter bar.
+     */
+    showInFilterBar?: () => boolean;
 }
 export interface BooleanFilterDefinition extends AbstractFilterDefinition {
     type: "boolean";