@trackunit/filters-filter-bar 1.18.4 → 1.18.6

package/index.cjs.js

@@ -495,7 +495,7 @@ const ITEM_HEIGHT = 28; //measured in DevTools on 03/10/2025
  *
  * @returns {ReactElement} - Returns the DynamicFilterList component.
  */
-const DynamicFilterList = ({ rowCount, keyMapper, labelMapper, onChange, checked, count, showRequestMoreUseSearch = false, type, className, }) => {
+const DynamicFilterList = ({ rowCount, keyMapper, labelMapper, onChange, checked, count, showRequestMoreUseSearch = false, type = undefined, className, }) => {
     const [t] = useTranslation();
     const parentRef = react.useRef(null);
     const updatedRowCount = react.useMemo(() => (showRequestMoreUseSearch ? rowCount + 1 : rowCount), [rowCount, showRequestMoreUseSearch]);
@@ -532,13 +532,14 @@ const DynamicFilterList = ({ rowCount, keyMapper, labelMapper, onChange, checked
  *
  * @returns {ReactElement} - Returns the FilterHeader component.
  */
-const FilterHeader = ({ filterKey, title, searchEnabled, searchProps, filterHasChanges, resetIndividualFilterToInitialState, onResetFilter, loading = false, className, "data-testid": dataTestId, hideHeader = false, children, }) => {
+const FilterHeader = ({ filterKey, title, searchEnabled = false, searchProps, filterHasChanges, resetIndividualFilterToInitialState, onResetFilter, loading = false, className, "data-testid": dataTestId, hideHeader = false, children, }) => {
     const [t] = useTranslation();
     const handleResetFilter = () => {
         resetIndividualFilterToInitialState(filterKey);
         onResetFilter?.();
     };
-    return (jsxRuntime.jsx(reactFilterComponents.FilterHeader, { className: className, "data-testid": dataTestId ?? `${filterKey}-filter-header`, loading: loading, onReset: handleResetFilter, resetLabel: t("filtersBar.resetFilter"), searchComponent: searchEnabled ? jsxRuntime.jsx(FilterHeaderSearchComponent, { filterKey: filterKey, searchProps: searchProps }) : undefined, showReset: filterHasChanges, title: hideHeader ? undefined : title, children: children }));
+    const searchComponent = searchEnabled && searchProps !== undefined ? (jsxRuntime.jsx(FilterHeaderSearchComponent, { filterKey: filterKey, searchProps: searchProps })) : undefined;
+    return (jsxRuntime.jsx(reactFilterComponents.FilterHeader, { className: className, "data-testid": dataTestId ?? `${filterKey}-filter-header`, loading: loading, onReset: handleResetFilter, resetLabel: t("filtersBar.resetFilter"), searchComponent: searchComponent, showReset: filterHasChanges, title: hideHeader ? undefined : title, children: children }));
 };
 /**
  * FilterHeaderSearchComponent renders a search input for the FilterHeader component.
@@ -560,7 +561,7 @@ const FilterHeaderSearchComponent = ({ searchProps, filterKey, }) => {
  * shows no results if length or array is 0
  * otherwise it calls children as a render prop
  */
-const FilterResults = ({ results, ignoreUndefined, loading, children, }) => {
+const FilterResults = ({ results, ignoreUndefined = false, loading, children, }) => {
     if (!results) {
         return null;
     }
@@ -569,7 +570,7 @@ const FilterResults = ({ results, ignoreUndefined, loading, children, }) => {
     }
     return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children(results) });
 };
-const EmptyResults = ({ loading }) => {
+const EmptyResults = ({ loading = false }) => {
     const [t] = useTranslation();
     return (jsxRuntime.jsx("div", { className: "grid h-20 w-[280px] place-content-center pl-2 pr-2", "data-testid": "empty-filter-results", children: jsxRuntime.jsx(reactComponents.Text, { align: "center", className: "w-full break-words", italicize: true, subtle: true, children: loading ? t("filtersBar.loading") : t("filtersBar.emptyResults") }) }));
 };
@@ -2516,6 +2517,41 @@ const useFilterBarAsync = ({ name, onValuesChange, filterBarDefinition, loadData
     }, [filterBarConfigMemoed, internalFilterBarDefinitions, dataLoaded, name, stableOnValuesChange]);
 };
 
+/**
+ * Converts a filter bar configuration to a link.
+ *
+ * @example
+ * ```ts
+ * const filterBarLinkConfig: FilterBarToLinkConfig = {
+ *   searchPropertyName: "assetFilters",
+ *   filterBar: "ASSETS",
+ * };
+ *
+ * const { getFilterBarLink } = useFilterBarsAsLink(filterBarLinkConfig);
+ *
+ * const link = getFilterBarLink({ ASSETS: { search: "excavator" } });
+ * ```
+ * @param filterBarLinkConfig - The filter bar configuration to convert to a link.
+ * @returns { UseFilterBarsAsLinkResult } An object with a `getFilterBarLink` function that takes a merged filter bar definitions and returns a link.
+ */
+const useFilterBarsAsLink = (filterBarLinkConfig) => {
+    const filterBarLinkConfigArray = react.useMemo(() => {
+        return Array.isArray(filterBarLinkConfig) ? filterBarLinkConfig : filterBarLinkConfig ? [filterBarLinkConfig] : [];
+    }, [filterBarLinkConfig]);
+    const { encode } = reactComponents.useCustomEncoding();
+    const getFilterBarLink = react.useCallback((mergedFilterBarDefinitions) => {
+        return filterBarLinkConfigArray
+            .map(config => {
+            const value = mergedFilterBarDefinitions[config.filterBar];
+            return `${config.searchPropertyName || "filter"}=${value ? encode(value) : ""}`;
+        })
+            .join("&");
+    }, [filterBarLinkConfigArray, encode]);
+    return react.useMemo(() => {
+        return { getFilterBarLink };
+    }, [getFilterBarLink]);
+};
+
 /**
  * Handles the application of a URL search parameter as a filter in the system.
  * The parameter is validated using the provided Zod schema.
@@ -2633,6 +2669,7 @@ exports.stringSchema = stringSchema;
 exports.toggleFilterValue = toggleFilterValue;
 exports.useFilterBar = useFilterBar;
 exports.useFilterBarAsync = useFilterBarAsync;
+exports.useFilterBarsAsLink = useFilterBarsAsLink;
 exports.useFiltersMenu = useFiltersMenu;
 exports.useSearchParamAsFilter = useSearchParamAsFilter;
 exports.validateFilter = validateFilter;

package/index.esm.js

@@ -493,7 +493,7 @@ const ITEM_HEIGHT = 28; //measured in DevTools on 03/10/2025
  *
  * @returns {ReactElement} - Returns the DynamicFilterList component.
  */
-const DynamicFilterList = ({ rowCount, keyMapper, labelMapper, onChange, checked, count, showRequestMoreUseSearch = false, type, className, }) => {
+const DynamicFilterList = ({ rowCount, keyMapper, labelMapper, onChange, checked, count, showRequestMoreUseSearch = false, type = undefined, className, }) => {
     const [t] = useTranslation();
     const parentRef = useRef(null);
     const updatedRowCount = useMemo(() => (showRequestMoreUseSearch ? rowCount + 1 : rowCount), [rowCount, showRequestMoreUseSearch]);
@@ -530,13 +530,14 @@ const DynamicFilterList = ({ rowCount, keyMapper, labelMapper, onChange, checked
  *
  * @returns {ReactElement} - Returns the FilterHeader component.
  */
-const FilterHeader = ({ filterKey, title, searchEnabled, searchProps, filterHasChanges, resetIndividualFilterToInitialState, onResetFilter, loading = false, className, "data-testid": dataTestId, hideHeader = false, children, }) => {
+const FilterHeader = ({ filterKey, title, searchEnabled = false, searchProps, filterHasChanges, resetIndividualFilterToInitialState, onResetFilter, loading = false, className, "data-testid": dataTestId, hideHeader = false, children, }) => {
     const [t] = useTranslation();
     const handleResetFilter = () => {
         resetIndividualFilterToInitialState(filterKey);
         onResetFilter?.();
     };
-    return (jsx(FilterHeader$1, { className: className, "data-testid": dataTestId ?? `${filterKey}-filter-header`, loading: loading, onReset: handleResetFilter, resetLabel: t("filtersBar.resetFilter"), searchComponent: searchEnabled ? jsx(FilterHeaderSearchComponent, { filterKey: filterKey, searchProps: searchProps }) : undefined, showReset: filterHasChanges, title: hideHeader ? undefined : title, children: children }));
+    const searchComponent = searchEnabled && searchProps !== undefined ? (jsx(FilterHeaderSearchComponent, { filterKey: filterKey, searchProps: searchProps })) : undefined;
+    return (jsx(FilterHeader$1, { className: className, "data-testid": dataTestId ?? `${filterKey}-filter-header`, loading: loading, onReset: handleResetFilter, resetLabel: t("filtersBar.resetFilter"), searchComponent: searchComponent, showReset: filterHasChanges, title: hideHeader ? undefined : title, children: children }));
 };
 /**
  * FilterHeaderSearchComponent renders a search input for the FilterHeader component.
@@ -558,7 +559,7 @@ const FilterHeaderSearchComponent = ({ searchProps, filterKey, }) => {
  * shows no results if length or array is 0
  * otherwise it calls children as a render prop
  */
-const FilterResults = ({ results, ignoreUndefined, loading, children, }) => {
+const FilterResults = ({ results, ignoreUndefined = false, loading, children, }) => {
     if (!results) {
         return null;
     }
@@ -567,7 +568,7 @@ const FilterResults = ({ results, ignoreUndefined, loading, children, }) => {
     }
     return jsx(Fragment, { children: children(results) });
 };
-const EmptyResults = ({ loading }) => {
+const EmptyResults = ({ loading = false }) => {
     const [t] = useTranslation();
     return (jsx("div", { className: "grid h-20 w-[280px] place-content-center pl-2 pr-2", "data-testid": "empty-filter-results", children: jsx(Text, { align: "center", className: "w-full break-words", italicize: true, subtle: true, children: loading ? t("filtersBar.loading") : t("filtersBar.emptyResults") }) }));
 };
@@ -2514,6 +2515,41 @@ const useFilterBarAsync = ({ name, onValuesChange, filterBarDefinition, loadData
     }, [filterBarConfigMemoed, internalFilterBarDefinitions, dataLoaded, name, stableOnValuesChange]);
 };
 
+/**
+ * Converts a filter bar configuration to a link.
+ *
+ * @example
+ * ```ts
+ * const filterBarLinkConfig: FilterBarToLinkConfig = {
+ *   searchPropertyName: "assetFilters",
+ *   filterBar: "ASSETS",
+ * };
+ *
+ * const { getFilterBarLink } = useFilterBarsAsLink(filterBarLinkConfig);
+ *
+ * const link = getFilterBarLink({ ASSETS: { search: "excavator" } });
+ * ```
+ * @param filterBarLinkConfig - The filter bar configuration to convert to a link.
+ * @returns { UseFilterBarsAsLinkResult } An object with a `getFilterBarLink` function that takes a merged filter bar definitions and returns a link.
+ */
+const useFilterBarsAsLink = (filterBarLinkConfig) => {
+    const filterBarLinkConfigArray = useMemo(() => {
+        return Array.isArray(filterBarLinkConfig) ? filterBarLinkConfig : filterBarLinkConfig ? [filterBarLinkConfig] : [];
+    }, [filterBarLinkConfig]);
+    const { encode } = useCustomEncoding();
+    const getFilterBarLink = useCallback((mergedFilterBarDefinitions) => {
+        return filterBarLinkConfigArray
+            .map(config => {
+            const value = mergedFilterBarDefinitions[config.filterBar];
+            return `${config.searchPropertyName || "filter"}=${value ? encode(value) : ""}`;
+        })
+            .join("&");
+    }, [filterBarLinkConfigArray, encode]);
+    return useMemo(() => {
+        return { getFilterBarLink };
+    }, [getFilterBarLink]);
+};
+
 /**
  * Handles the application of a URL search parameter as a filter in the system.
  * The parameter is validated using the provided Zod schema.
@@ -2590,4 +2626,4 @@ const mergeFilters = (filterBarDefinition, extraFilters) => {
  */
 setupLibraryTranslations();
 
-export { AppliedFiltersRenderer, DefaultCheckboxFilter, DefaultDateRangeFilter, DefaultMinMaxFilter, DefaultRadioFilter, DynamicFilterList, FilterBar, FilterButtonTooltipLabel, FilterComponent, FilterEvents, FilterHeader, FilterResults, FilterTableComponent, FiltersMenu, FiltersMenuContent, FiltersRenderer, GroupedFiltersList, HierarchicalCheckboxFilter, MultipleFilterTooltipLabel, ResetFiltersButton, TooltipLabel, areaFilterGeoJsonGeometrySchema, booleanSchema, dateRangeSchema, isAreaFilterValue, isArrayFilterValue, isBooleanValue, isDateRangeValue, isMinMaxFilterValue, isStringArrayFilterValue, isValueName, isValueNameArray, mergeFilters, minMaxFilterSchema, mockFilterBar, numberSchema, stringArraySchema, stringSchema, toggleFilterValue, useFilterBar, useFilterBarAsync, useFiltersMenu, useSearchParamAsFilter, validateFilter, valueNameArraySchema, valueNameSchema };
+export { AppliedFiltersRenderer, DefaultCheckboxFilter, DefaultDateRangeFilter, DefaultMinMaxFilter, DefaultRadioFilter, DynamicFilterList, FilterBar, FilterButtonTooltipLabel, FilterComponent, FilterEvents, FilterHeader, FilterResults, FilterTableComponent, FiltersMenu, FiltersMenuContent, FiltersRenderer, GroupedFiltersList, HierarchicalCheckboxFilter, MultipleFilterTooltipLabel, ResetFiltersButton, TooltipLabel, areaFilterGeoJsonGeometrySchema, booleanSchema, dateRangeSchema, isAreaFilterValue, isArrayFilterValue, isBooleanValue, isDateRangeValue, isMinMaxFilterValue, isStringArrayFilterValue, isValueName, isValueNameArray, mergeFilters, minMaxFilterSchema, mockFilterBar, numberSchema, stringArraySchema, stringSchema, toggleFilterValue, useFilterBar, useFilterBarAsync, useFilterBarsAsLink, useFiltersMenu, useSearchParamAsFilter, validateFilter, valueNameArraySchema, valueNameSchema };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/filters-filter-bar",
-  "version": "1.18.4",
+  "version": "1.18.6",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -11,17 +11,17 @@
     "tailwind-merge": "^2.0.0",
     "string-ts": "^2.0.0",
     "zod": "^3.23.8",
-    "@trackunit/iris-app-api": "1.15.8",
-    "@trackunit/react-core-hooks": "1.14.2",
-    "@trackunit/react-filter-components": "1.17.3",
-    "@trackunit/react-date-and-time-components": "1.20.3",
+    "@trackunit/iris-app-api": "1.15.9",
+    "@trackunit/react-core-hooks": "1.14.3",
+    "@trackunit/react-filter-components": "1.17.5",
+    "@trackunit/react-date-and-time-components": "1.20.5",
     "@trackunit/shared-utils": "1.13.77",
-    "@trackunit/react-form-components": "1.18.2",
+    "@trackunit/react-form-components": "1.18.4",
     "@trackunit/iris-app-runtime-core-api": "1.13.2",
     "@trackunit/geo-json-utils": "1.11.78",
-    "@trackunit/i18n-library-translation": "1.15.2",
+    "@trackunit/i18n-library-translation": "1.15.4",
     "@trackunit/css-class-variance-utilities": "1.11.77",
-    "@trackunit/react-components": "1.20.2"
+    "@trackunit/react-components": "1.20.4"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/index.d.ts

@@ -23,6 +23,7 @@ export * from "./lib/hooks/mockFilterBar";
 export * from "./lib/hooks/types";
 export * from "./lib/hooks/useFilterBar";
 export * from "./lib/hooks/useFilterBarAsync";
+export * from "./lib/hooks/useFilterBarsAsLink";
 export * from "./lib/hooks/useFiltersMenu";
 export * from "./lib/hooks/useSearchParamAsFilter";
 export * from "./lib/types/FilterTypes";

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

@@ -0,0 +1,37 @@
+import { AssetFilterKeysWithCustomFields, CustomerFilterKeysWithCustomFields, FilterBarToLinkConfig, SiteFilterKeysWithCustomFields } from "@trackunit/iris-app-api";
+export type FiltersConfigValues = {
+    ASSETS?: Partial<Record<AssetFilterKeysWithCustomFields[number], unknown>>;
+    SITES?: Partial<Record<SiteFilterKeysWithCustomFields[number], unknown>>;
+    CUSTOMERS?: Partial<Record<CustomerFilterKeysWithCustomFields[number], unknown>>;
+    TIME_RANGE?: Record<string, unknown> | null;
+};
+/**
+ * The result of the useFilterBarsAsLink hook.
+ */
+export interface UseFilterBarsAsLinkResult {
+    /**
+     * Gets the filter bar link.
+     *
+     * @param mergedFilterBarDefinitions - The merged filter bar definitions.
+     * @returns The filter bar link.
+     */
+    getFilterBarLink: (mergedFilterBarDefinitions: FiltersConfigValues) => string;
+}
+/**
+ * Converts a filter bar configuration to a link.
+ *
+ * @example
+ * ```ts
+ * const filterBarLinkConfig: FilterBarToLinkConfig = {
+ *   searchPropertyName: "assetFilters",
+ *   filterBar: "ASSETS",
+ * };
+ *
+ * const { getFilterBarLink } = useFilterBarsAsLink(filterBarLinkConfig);
+ *
+ * const link = getFilterBarLink({ ASSETS: { search: "excavator" } });
+ * ```
+ * @param filterBarLinkConfig - The filter bar configuration to convert to a link.
+ * @returns { UseFilterBarsAsLinkResult } An object with a `getFilterBarLink` function that takes a merged filter bar definitions and returns a link.
+ */
+export declare const useFilterBarsAsLink: (filterBarLinkConfig: FilterBarToLinkConfig | Array<FilterBarToLinkConfig> | null) => UseFilterBarsAsLinkResult;