@trackunit/filters-filter-bar 1.25.1 → 1.25.3

package/index.cjs.js

@@ -450,9 +450,9 @@ const ResetFiltersButtonWithIcon = ({ resetFiltersToInitialState, "data-testid":
 /**
  *
  */
-const AppliedFiltersRenderer = ({ appliedFilters, filterBarConfig, showResetButton = true, }) => {
+const AppliedFiltersRenderer = ({ appliedFilters, filterBarConfig, showResetButton = true, style, }) => {
     const filtersToRender = react.useMemo(() => appliedFilters.filter(filter => !filter.showDirectly), [appliedFilters]);
-    return (jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [filtersToRender.length > 0 ? (jsxRuntime.jsx("div", { className: "h-4 w-[1px] bg-neutral-300", "data-testid": "applied-filters-buttons" })) : null, jsxRuntime.jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: filtersToRender }), appliedFilters.length > 0 && showResetButton ? (jsxRuntime.jsx(ResetFiltersButtonWithIcon, { resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })) : null] }));
+    return (jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", style: style, children: [filtersToRender.length > 0 ? (jsxRuntime.jsx("div", { className: "h-4 w-[1px] bg-neutral-300", "data-testid": "applied-filters-buttons" })) : null, jsxRuntime.jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: filtersToRender }), appliedFilters.length > 0 && showResetButton ? (jsxRuntime.jsx(ResetFiltersButtonWithIcon, { resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })) : null] }));
 };
 
 /**
@@ -907,8 +907,8 @@ const useFiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters =
  *
  * @returns {ReactElement} - Returns the FiltersList component.
  */
-const GroupedFiltersList = ({ filterBarConfig, filtersGrouped, className, "data-testid": dataTestId = "grouped-filters-list", }) => {
-    return (jsxRuntime.jsx("div", { className: className, "data-testid": dataTestId, role: "menu", children: filtersGrouped.map((group, idx) => {
+const GroupedFiltersList = ({ filterBarConfig, filtersGrouped, className, style, "data-testid": dataTestId = "grouped-filters-list", }) => {
+    return (jsxRuntime.jsx("div", { className: className, "data-testid": dataTestId, role: "menu", style: style, children: filtersGrouped.map((group, idx) => {
             const isLastGroup = idx === filtersGrouped.length - 1;
             return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [jsxRuntime.jsxs("div", { children: [filtersGrouped.length > 1 && (jsxRuntime.jsx(reactComponents.Text, { className: "h-7 px-3 py-2 text-neutral-400", "data-testid": `${group.key}-group-title`, size: "small", uppercase: true, weight: "bold", children: group.title })), jsxRuntime.jsx("ul", { "aria-labelledby": `${group.key}-group-title`, className: "grid", "data-testid": `${group.key}-group-list`, children: jsxRuntime.jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: group.filters, visualStyle: "list-item" }) })] }), isLastGroup ? null : jsxRuntime.jsx("div", { className: "h-[1px] w-full bg-neutral-200", role: "separator" })] }, group.key));
         }) }));
@@ -1069,7 +1069,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 = false, title, "data-testid": dataTestId = "filters-menu", className, buttonProps, allowShowFiltersDirectly = true, includeFilterKeys, }) => {
+const FiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], compact = false, title, "data-testid": dataTestId = "filters-menu", className, style, buttonProps, allowShowFiltersDirectly = true, includeFilterKeys, }) => {
     const [t] = useTranslation();
     const [showCustomFilters, setShowCustomFilters] = react.useState(false);
     const { isSm } = reactComponents.useViewportBreakpoints();
@@ -1091,7 +1091,7 @@ const FiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [],
         includeFilterKeys,
         allowShowFiltersDirectly,
     });
-    return (jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex items-start gap-2", className), "data-testid": dataTestId, children: [jsxRuntime.jsx(reactComponents.Popover, { onOpenStateChange: open => {
+    return (jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex items-start gap-2", className), "data-testid": dataTestId, style: style, children: [jsxRuntime.jsx(reactComponents.Popover, { onOpenStateChange: open => {
                     if (!open) {
                         setShowCustomFilters(false);
                         setSearchText("");
@@ -1406,8 +1406,8 @@ const HierarchicalCheckboxFilter = ({ filterDefinition, filterBarActions, option
  * @param {FilterBarProps} props - The props for the FilterBar component
  * @returns {ReactElement} FilterBar component
  */
-const FilterBar = ({ hiddenFilters, className, filterBarDefinition, filterBarConfig, compact = true, allowShowFiltersDirectly = true, title, }) => {
-    return (jsxRuntime.jsx(FiltersMenu, { allowShowFiltersDirectly: allowShowFiltersDirectly, className: className, compact: compact, "data-testid": `${filterBarConfig.name}-filterbar`, filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters, title: title }));
+const FilterBar = ({ hiddenFilters, className, style, filterBarDefinition, filterBarConfig, compact = true, allowShowFiltersDirectly = true, title, }) => {
+    return (jsxRuntime.jsx(FiltersMenu, { allowShowFiltersDirectly: allowShowFiltersDirectly, className: className, compact: compact, "data-testid": `${filterBarConfig.name}-filterbar`, filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters, style: style, title: title }));
 };
 
 const returnFalse = () => false;

package/index.esm.js

@@ -448,9 +448,9 @@ const ResetFiltersButtonWithIcon = ({ resetFiltersToInitialState, "data-testid":
 /**
  *
  */
-const AppliedFiltersRenderer = ({ appliedFilters, filterBarConfig, showResetButton = true, }) => {
+const AppliedFiltersRenderer = ({ appliedFilters, filterBarConfig, showResetButton = true, style, }) => {
     const filtersToRender = useMemo(() => appliedFilters.filter(filter => !filter.showDirectly), [appliedFilters]);
-    return (jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [filtersToRender.length > 0 ? (jsx("div", { className: "h-4 w-[1px] bg-neutral-300", "data-testid": "applied-filters-buttons" })) : null, jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: filtersToRender }), appliedFilters.length > 0 && showResetButton ? (jsx(ResetFiltersButtonWithIcon, { resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })) : null] }));
+    return (jsxs("div", { className: "flex flex-wrap items-center gap-2", style: style, children: [filtersToRender.length > 0 ? (jsx("div", { className: "h-4 w-[1px] bg-neutral-300", "data-testid": "applied-filters-buttons" })) : null, jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: filtersToRender }), appliedFilters.length > 0 && showResetButton ? (jsx(ResetFiltersButtonWithIcon, { resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })) : null] }));
 };
 
 /**
@@ -905,8 +905,8 @@ const useFiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters =
  *
  * @returns {ReactElement} - Returns the FiltersList component.
  */
-const GroupedFiltersList = ({ filterBarConfig, filtersGrouped, className, "data-testid": dataTestId = "grouped-filters-list", }) => {
-    return (jsx("div", { className: className, "data-testid": dataTestId, role: "menu", children: filtersGrouped.map((group, idx) => {
+const GroupedFiltersList = ({ filterBarConfig, filtersGrouped, className, style, "data-testid": dataTestId = "grouped-filters-list", }) => {
+    return (jsx("div", { className: className, "data-testid": dataTestId, role: "menu", style: style, children: filtersGrouped.map((group, idx) => {
             const isLastGroup = idx === filtersGrouped.length - 1;
             return (jsxs("div", { className: "flex flex-col gap-1", children: [jsxs("div", { children: [filtersGrouped.length > 1 && (jsx(Text, { className: "h-7 px-3 py-2 text-neutral-400", "data-testid": `${group.key}-group-title`, size: "small", uppercase: true, weight: "bold", children: group.title })), jsx("ul", { "aria-labelledby": `${group.key}-group-title`, className: "grid", "data-testid": `${group.key}-group-list`, children: jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: group.filters, visualStyle: "list-item" }) })] }), isLastGroup ? null : jsx("div", { className: "h-[1px] w-full bg-neutral-200", role: "separator" })] }, group.key));
         }) }));
@@ -1067,7 +1067,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 = false, title, "data-testid": dataTestId = "filters-menu", className, buttonProps, allowShowFiltersDirectly = true, includeFilterKeys, }) => {
+const FiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], compact = false, title, "data-testid": dataTestId = "filters-menu", className, style, buttonProps, allowShowFiltersDirectly = true, includeFilterKeys, }) => {
     const [t] = useTranslation();
     const [showCustomFilters, setShowCustomFilters] = useState(false);
     const { isSm } = useViewportBreakpoints();
@@ -1089,7 +1089,7 @@ const FiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [],
         includeFilterKeys,
         allowShowFiltersDirectly,
     });
-    return (jsxs("div", { className: twMerge("flex items-start gap-2", className), "data-testid": dataTestId, children: [jsx(Popover, { onOpenStateChange: open => {
+    return (jsxs("div", { className: twMerge("flex items-start gap-2", className), "data-testid": dataTestId, style: style, children: [jsx(Popover, { onOpenStateChange: open => {
                     if (!open) {
                         setShowCustomFilters(false);
                         setSearchText("");
@@ -1404,8 +1404,8 @@ const HierarchicalCheckboxFilter = ({ filterDefinition, filterBarActions, option
  * @param {FilterBarProps} props - The props for the FilterBar component
  * @returns {ReactElement} FilterBar component
  */
-const FilterBar = ({ hiddenFilters, className, filterBarDefinition, filterBarConfig, compact = true, allowShowFiltersDirectly = true, title, }) => {
-    return (jsx(FiltersMenu, { allowShowFiltersDirectly: allowShowFiltersDirectly, className: className, compact: compact, "data-testid": `${filterBarConfig.name}-filterbar`, filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters, title: title }));
+const FilterBar = ({ hiddenFilters, className, style, filterBarDefinition, filterBarConfig, compact = true, allowShowFiltersDirectly = true, title, }) => {
+    return (jsx(FiltersMenu, { allowShowFiltersDirectly: allowShowFiltersDirectly, className: className, compact: compact, "data-testid": `${filterBarConfig.name}-filterbar`, filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters, style: style, title: title }));
 };
 
 const returnFalse = () => false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/filters-filter-bar",
-  "version": "1.25.1",
+  "version": "1.25.3",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -12,16 +12,16 @@
     "string-ts": "^2.0.0",
     "zod": "^3.25.76",
     "@trackunit/iris-app-api": "1.20.1",
-    "@trackunit/react-core-hooks": "1.17.1",
-    "@trackunit/react-filter-components": "1.24.1",
-    "@trackunit/react-date-and-time-components": "1.27.1",
+    "@trackunit/react-core-hooks": "1.17.2",
+    "@trackunit/react-filter-components": "1.24.3",
+    "@trackunit/react-date-and-time-components": "1.27.3",
     "@trackunit/shared-utils": "1.15.1",
-    "@trackunit/react-form-components": "1.25.1",
+    "@trackunit/react-form-components": "1.25.3",
     "@trackunit/iris-app-runtime-core-api": "1.16.1",
     "@trackunit/geo-json-utils": "1.14.1",
-    "@trackunit/i18n-library-translation": "1.21.1",
+    "@trackunit/i18n-library-translation": "1.21.2",
     "@trackunit/css-class-variance-utilities": "1.13.1",
-    "@trackunit/react-components": "1.24.1"
+    "@trackunit/react-components": "1.24.2"
   },
   "peerDependencies": {
     "@apollo/client": "^3.13.8",

package/src/lib/FilterBar.d.ts

@@ -1,6 +1,7 @@
+import type { Styleable } from "@trackunit/react-components";
 import { ReactElement } from "react";
 import { FilterBarConfig, FilterBarDefinition, FilterMapActions, FilterMapGetter } from "./types/FilterTypes";
-interface FilterBarProps<TFilterBarDefinition extends FilterBarDefinition> {
+interface FilterBarProps<TFilterBarDefinition extends FilterBarDefinition> extends Styleable {
     /**
      * If you want some of the filters to be hidden, but still programmatically enabled
      */
@@ -70,5 +71,5 @@ interface FilterBarProps<TFilterBarDefinition extends FilterBarDefinition> {
  * @param {FilterBarProps} props - The props for the FilterBar component
  * @returns {ReactElement} FilterBar component
  */
-export declare const FilterBar: <TFilterBarDefinition extends FilterBarDefinition>({ hiddenFilters, className, filterBarDefinition, filterBarConfig, compact, allowShowFiltersDirectly, title, }: FilterBarProps<TFilterBarDefinition>) => ReactElement;
+export declare const FilterBar: <TFilterBarDefinition extends FilterBarDefinition>({ hiddenFilters, className, style, filterBarDefinition, filterBarConfig, compact, allowShowFiltersDirectly, title, }: FilterBarProps<TFilterBarDefinition>) => ReactElement;
 export {};

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

@@ -1,10 +1,11 @@
+import type { Styleable } from "@trackunit/react-components";
 import { ReactElement } from "react";
 import { FilterBarConfig, FilterBarDefinition, FilterDefinition, FilterMapActions, FilterMapGetter } from "../types/FilterTypes";
 /**
  *
  */
-export declare const AppliedFiltersRenderer: <TFilterBarDefinition extends FilterBarDefinition>({ appliedFilters, filterBarConfig, showResetButton, }: {
+export declare const AppliedFiltersRenderer: <TFilterBarDefinition extends FilterBarDefinition>({ appliedFilters, filterBarConfig, showResetButton, style, }: {
     appliedFilters: Array<FilterDefinition>;
     filterBarConfig: FilterBarConfig<TFilterBarDefinition> & FilterMapActions & FilterMapGetter;
     showResetButton?: boolean;
-}) => ReactElement;
+} & Styleable) => ReactElement;

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

@@ -1,7 +1,7 @@
-import { ButtonProps, CommonProps } from "@trackunit/react-components";
+import { ButtonProps, CommonProps, type Styleable } from "@trackunit/react-components";
 import { ReactElement } from "react";
 import { FilterBarConfig, FilterBarDefinition, FilterMapActions, FilterMapGetter } from "../types/FilterTypes";
-interface FiltersMenuProps<TFilterBarDefinition extends FilterBarDefinition> extends CommonProps {
+interface FiltersMenuProps<TFilterBarDefinition extends FilterBarDefinition> extends CommonProps, Styleable {
     /**
      * If true, the filters marked as showDirectly will not be shown directly in the filter bar
      */
@@ -41,5 +41,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, "data-testid": dataTestId, className, buttonProps, allowShowFiltersDirectly, includeFilterKeys, }: FiltersMenuProps<TFilterBarDefinition>) => ReactElement;
+export declare const FiltersMenu: <TFilterBarDefinition extends FilterBarDefinition>({ filterBarDefinition, filterBarConfig, hiddenFilters, compact, title, "data-testid": dataTestId, className, style, buttonProps, allowShowFiltersDirectly, includeFilterKeys, }: FiltersMenuProps<TFilterBarDefinition>) => ReactElement;
 export {};

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

@@ -1,8 +1,8 @@
-import { CommonProps } from "@trackunit/react-components";
+import { CommonProps, type Styleable } from "@trackunit/react-components";
 import { ReactElement } from "react";
 import { GroupOfFilters } from "../hooks/useGroupFilters";
 import { FilterBarConfig, FilterBarDefinition, FilterMapActions, FilterMapGetter } from "../types/FilterTypes";
-interface FiltersListProps extends CommonProps {
+interface FiltersListProps extends CommonProps, Styleable {
     /**
      * The configuration of the filter bar, including its actions and state.
      */
@@ -14,5 +14,5 @@ interface FiltersListProps extends CommonProps {
  *
  * @returns {ReactElement} - Returns the FiltersList component.
  */
-export declare const GroupedFiltersList: ({ filterBarConfig, filtersGrouped, className, "data-testid": dataTestId, }: FiltersListProps) => ReactElement;
+export declare const GroupedFiltersList: ({ filterBarConfig, filtersGrouped, className, style, "data-testid": dataTestId, }: FiltersListProps) => ReactElement;
 export {};