@trackunit/filters-filter-bar 0.0.162 → 0.0.164-alpha-52ec6ef4f8.0

package/index.cjs.js

@@ -4,10 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
+var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
+var reactComponents = require('@trackunit/react-components');
 var sharedUtils = require('@trackunit/shared-utils');
 var react = require('react');
+var tailwindMerge = require('tailwind-merge');
 var reactFilterComponents = require('@trackunit/react-filter-components');
-var reactComponents = require('@trackunit/react-components');
 var reactRouterDom = require('react-router-dom');
 var reactCoreHooks = require('@trackunit/react-core-hooks');
 var reactCoreContextsApi = require('@trackunit/react-core-contexts-api');
@@ -395,7 +397,15 @@ const Filter = ({ filter, filterBarActions, filterState, }) => {
     };
     const text = filterText();
     const activeFilterText = Array.isArray(text) ? text.join(", ") : text;
-    return (jsxRuntime.jsx(reactFilterComponents.Filter, { title: filter.title, dataTestId: `${filter.filterKey}-filter-button`, isActive: filterText().length > 0, activeLabel: activeFilterText, withStickyHeader: true, children: filter.component({
+    const showDirectly = filter.showDirectly || false;
+    return showDirectly ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: filter.component({
+            filterDefinition: filter,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            value: values,
+            setValue,
+            filterBarActions,
+            filterState,
+        }) })) : (jsxRuntime.jsx(reactFilterComponents.Filter, { title: filter.title, dataTestId: `${filter.filterKey}-filter-button`, isActive: filterText().length > 0, activeLabel: activeFilterText, withStickyHeader: true, children: filter.component({
             filterDefinition: filter,
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             value: values,
@@ -486,13 +496,30 @@ const StarredFiltersMenu = ({ filterBarDefinition, updateStarredFilters, starred
                                 }) }) }) })] }), starredFilterKeys.length > 0 ? jsxRuntime.jsx("div", { className: "h-7 w-[1px] bg-neutral-300" }) : null] }));
 };
 
+const cvaCollapserHeader = cssClassVarianceUtilities.cvaMerge(["bg-inherit", "md:hidden"], {
+    variants: { expanded: { true: ["w-full", "flex-1", "border-solid"], false: ["max-w-[130px]", "w-auto"] } },
+});
+const cvaCollapse = cssClassVarianceUtilities.cvaMerge(["bg-inherit", "md:hidden"], {
+    variants: {
+        expanded: { true: "w-full", false: ["max-w-[130px]", "w-auto", "border-transparent"] },
+        disableCollapse: { true: "hidden" },
+    },
+});
+const cvaFilterWithoutCollapse = cssClassVarianceUtilities.cvaMerge([], {
+    variants: { disableCollapse: { true: "flex", false: ["hidden", "md:flex"] } },
+});
 /**
  * StarredFilters is a React component that displays a list of starred filters based on the provided filter bar configuration.
  *
  * @template TFilterBarDefinition - The type representing the filter bar definition.
  * @returns {JSX.Element} - Returns the StarredFilters component.
  */
-const StarredFilters = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], }) => {
+const StarredFilters = ({ filterBarDefinition, filterBarConfig, disableCollapse, hiddenFilters = [], }) => {
+    const [expanded, setExpanded] = react.useState(false);
+    const [t] = useTranslation();
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactComponents.Collapse, { id: "storybook_collapsible", headerClassName: cvaCollapserHeader({ expanded }), className: cvaCollapse({ expanded, disableCollapse }), initialExpanded: expanded, onToggle: () => setExpanded(prev => !prev), label: t("filtersBar.filtersHeading") + (filterBarConfig.filtersHaveBeenApplied === true ? " *" : ""), children: jsxRuntime.jsx(FilterSelection, { filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters, className: "flex" }) }), jsxRuntime.jsx(FilterSelection, { className: cvaFilterWithoutCollapse({ disableCollapse }), filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters })] }));
+};
+const FilterSelection = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], className, disableCollapse, }) => {
     const hideInFilterBar = react.useMemo(() => {
         return Object.values(filterBarDefinition)
             .map(filter => {
@@ -505,7 +532,7 @@ const StarredFilters = ({ filterBarDefinition, filterBarConfig, hiddenFilters =
         ...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
+    return (jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge([className, "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 => {
                 const showMenuAnyway = filterBarConfig.filterHasChanged(filter.filterKey) &&
@@ -522,8 +549,8 @@ const StarredFilters = ({ filterBarDefinition, filterBarConfig, hiddenFilters =
 /**
  * The FilterBar component serves as a wrapper for managing filters.
  */
-const FilterBar = ({ hiddenFilters, className, filterBarDefinition, filterBarConfig, }) => {
-    return (jsxRuntime.jsx("div", { className: `flex ${className}`, "data-testid": `${filterBarConfig.name}-filterbar`, children: jsxRuntime.jsx(StarredFilters, { hiddenFilters: hiddenFilters, filterBarDefinition: filterBarDefinition, filterBarConfig: filterBarConfig }) }));
+const FilterBar = ({ hiddenFilters, className, filterBarDefinition, filterBarConfig, disableCollapse = false, }) => {
+    return (jsxRuntime.jsx("div", { className: `flex ${className}`, "data-testid": `${filterBarConfig.name}-filterbar`, children: jsxRuntime.jsx(StarredFilters, { hiddenFilters: hiddenFilters, filterBarDefinition: filterBarDefinition, filterBarConfig: filterBarConfig, disableCollapse: disableCollapse }) }));
 };
 
 /**
@@ -973,7 +1000,7 @@ const validateFilter = (filter, filterDefinitions) => {
         }
     }
     filterDefinitions.forEach(filterDefinition => {
-        const foundFilter = filter && filter.values[filterDefinition.filterKey];
+        const foundFilter = (filter === null || filter === void 0 ? void 0 : filter.values) && filter.values[filterDefinition.filterKey];
         if (filter) {
             // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
             if (foundFilter && hasValue(foundFilter) && isNotRightType(filterDefinition, foundFilter)) {

package/index.esm.js

@@ -1,9 +1,11 @@
-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 { cvaMerge } from '@trackunit/css-class-variance-utilities';
+import { Button, Popover, PopoverTrigger, IconButton, Icon, PopoverContent, MenuList, Text, StarButton, Collapse, DayRangePicker } from '@trackunit/react-components';
 import { truthy, capitalize as capitalize$1, nonNullable } from '@trackunit/shared-utils';
-import { useMemo, Fragment as Fragment$1, useCallback, useEffect, useRef, useState } from 'react';
+import { useMemo, useState, Fragment as Fragment$1, useCallback, useEffect, useRef } from 'react';
+import { twMerge } from 'tailwind-merge';
 import { Filter as Filter$1, FilterBody, RadioFilterItem, CheckBoxFilterItem, FilterHeader as FilterHeader$1, FilterFooter } from '@trackunit/react-filter-components';
-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';
 import { createEvent } from '@trackunit/react-core-contexts-api';
@@ -387,7 +389,15 @@ const Filter = ({ filter, filterBarActions, filterState, }) => {
     };
     const text = filterText();
     const activeFilterText = Array.isArray(text) ? text.join(", ") : text;
-    return (jsx(Filter$1, { title: filter.title, dataTestId: `${filter.filterKey}-filter-button`, isActive: filterText().length > 0, activeLabel: activeFilterText, withStickyHeader: true, children: filter.component({
+    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$1, { title: filter.title, dataTestId: `${filter.filterKey}-filter-button`, isActive: filterText().length > 0, activeLabel: activeFilterText, withStickyHeader: true, children: filter.component({
             filterDefinition: filter,
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             value: values,
@@ -478,13 +488,30 @@ const StarredFiltersMenu = ({ filterBarDefinition, updateStarredFilters, starred
                                 }) }) }) })] }), starredFilterKeys.length > 0 ? jsx("div", { className: "h-7 w-[1px] bg-neutral-300" }) : null] }));
 };
 
+const cvaCollapserHeader = cvaMerge(["bg-inherit", "md:hidden"], {
+    variants: { expanded: { true: ["w-full", "flex-1", "border-solid"], false: ["max-w-[130px]", "w-auto"] } },
+});
+const cvaCollapse = cvaMerge(["bg-inherit", "md:hidden"], {
+    variants: {
+        expanded: { true: "w-full", false: ["max-w-[130px]", "w-auto", "border-transparent"] },
+        disableCollapse: { true: "hidden" },
+    },
+});
+const cvaFilterWithoutCollapse = cvaMerge([], {
+    variants: { disableCollapse: { true: "flex", false: ["hidden", "md:flex"] } },
+});
 /**
  * StarredFilters is a React component that displays a list of starred filters based on the provided filter bar configuration.
  *
  * @template TFilterBarDefinition - The type representing the filter bar definition.
  * @returns {JSX.Element} - Returns the StarredFilters component.
  */
-const StarredFilters = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], }) => {
+const StarredFilters = ({ filterBarDefinition, filterBarConfig, disableCollapse, hiddenFilters = [], }) => {
+    const [expanded, setExpanded] = useState(false);
+    const [t] = useTranslation();
+    return (jsxs(Fragment, { children: [jsx(Collapse, { id: "storybook_collapsible", headerClassName: cvaCollapserHeader({ expanded }), className: cvaCollapse({ expanded, disableCollapse }), initialExpanded: expanded, onToggle: () => setExpanded(prev => !prev), label: t("filtersBar.filtersHeading") + (filterBarConfig.filtersHaveBeenApplied === true ? " *" : ""), children: jsx(FilterSelection, { filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters, className: "flex" }) }), jsx(FilterSelection, { className: cvaFilterWithoutCollapse({ disableCollapse }), filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters })] }));
+};
+const FilterSelection = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], className, disableCollapse, }) => {
     const hideInFilterBar = useMemo(() => {
         return Object.values(filterBarDefinition)
             .map(filter => {
@@ -497,7 +524,7 @@ const StarredFilters = ({ filterBarDefinition, filterBarConfig, hiddenFilters =
         ...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
+    return (jsxs("div", { className: twMerge([className, "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 => {
                 const showMenuAnyway = filterBarConfig.filterHasChanged(filter.filterKey) &&
@@ -514,8 +541,8 @@ const StarredFilters = ({ filterBarDefinition, filterBarConfig, hiddenFilters =
 /**
  * The FilterBar component serves as a wrapper for managing filters.
  */
-const FilterBar = ({ hiddenFilters, className, filterBarDefinition, filterBarConfig, }) => {
-    return (jsx("div", { className: `flex ${className}`, "data-testid": `${filterBarConfig.name}-filterbar`, children: jsx(StarredFilters, { hiddenFilters: hiddenFilters, filterBarDefinition: filterBarDefinition, filterBarConfig: filterBarConfig }) }));
+const FilterBar = ({ hiddenFilters, className, filterBarDefinition, filterBarConfig, disableCollapse = false, }) => {
+    return (jsx("div", { className: `flex ${className}`, "data-testid": `${filterBarConfig.name}-filterbar`, children: jsx(StarredFilters, { hiddenFilters: hiddenFilters, filterBarDefinition: filterBarDefinition, filterBarConfig: filterBarConfig, disableCollapse: disableCollapse }) }));
 };
 
 /**
@@ -965,7 +992,7 @@ const validateFilter = (filter, filterDefinitions) => {
         }
     }
     filterDefinitions.forEach(filterDefinition => {
-        const foundFilter = filter && filter.values[filterDefinition.filterKey];
+        const foundFilter = (filter === null || filter === void 0 ? void 0 : filter.values) && filter.values[filterDefinition.filterKey];
         if (filter) {
             // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
             if (foundFilter && hasValue(foundFilter) && isNotRightType(filterDefinition, foundFilter)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/filters-filter-bar",
-  "version": "0.0.162",
+  "version": "0.0.164-alpha-52ec6ef4f8.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -19,7 +19,9 @@
     "jest-fetch-mock": "^3.0.3",
     "@trackunit/react-core-contexts-api": "*",
     "@trackunit/i18n-library-translation": "*",
-    "@tanstack/react-virtual": "3.0.0-beta.68"
+    "@tanstack/react-virtual": "3.0.0-beta.68",
+    "@trackunit/css-class-variance-utilities": "*",
+    "tailwind-merge": "^2.0.0"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js"

package/src/lib/FilterBar.d.ts

@@ -19,9 +19,13 @@ interface FilterBarProps<TFilterBarDefinition extends FilterBarDefinition> {
      * @see FilterBarConfig
      */
     filterBarConfig: FilterBarConfig<TFilterBarDefinition> & FilterMapActions & FilterMapGetter;
+    /**
+     * If you want to disable the collapse functionality - if you filter only have 1 or 2 filters and it can fit on mobile screens.
+     */
+    disableCollapse?: boolean;
 }
 /**
  * The FilterBar component serves as a wrapper for managing filters.
  */
-export declare const FilterBar: <TFilterBarDefinition extends FilterBarDefinition>({ hiddenFilters, className, filterBarDefinition, filterBarConfig, }: FilterBarProps<TFilterBarDefinition>) => JSX.Element;
+export declare const FilterBar: <TFilterBarDefinition extends FilterBarDefinition>({ hiddenFilters, className, filterBarDefinition, filterBarConfig, disableCollapse, }: FilterBarProps<TFilterBarDefinition>) => JSX.Element;
 export {};

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

@@ -13,6 +13,10 @@ interface StarredFiltersProps<TFilterBarDefinition extends FilterBarDefinition>
      * If you want some of the filters to be hidden, but still programmatically enabled
      */
     hiddenFilters?: string[];
+    /**
+     * If you want to disable the collapse functionality - if you filter only have 1 or 2 filters and it can fit on mobile screens.
+     */
+    disableCollapse?: boolean;
 }
 /**
  * StarredFilters is a React component that displays a list of starred filters based on the provided filter bar configuration.
@@ -20,5 +24,5 @@ interface StarredFiltersProps<TFilterBarDefinition extends FilterBarDefinition>
  * @template TFilterBarDefinition - The type representing the filter bar definition.
  * @returns {JSX.Element} - Returns the StarredFilters component.
  */
-export declare const StarredFilters: <TFilterBarDefinition extends FilterBarDefinition>({ filterBarDefinition, filterBarConfig, hiddenFilters, }: StarredFiltersProps<TFilterBarDefinition>) => JSX.Element;
+export declare const StarredFilters: <TFilterBarDefinition extends FilterBarDefinition>({ filterBarDefinition, filterBarConfig, disableCollapse, hiddenFilters, }: StarredFiltersProps<TFilterBarDefinition>) => JSX.Element;
 export {};

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

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