@trackunit/filters-filter-bar 0.0.365 → 0.0.368

package/index.cjs.js

@@ -504,9 +504,9 @@ const StarredFilters = ({ filterBarDefinition, filterBarConfig, disableCollapse,
     const [expanded, setExpanded] = react.useState(false);
     const [t] = useTranslation();
     const dimensions = reactComponents.useResize();
-    return dimensions.width > 768 || disableCollapse ? (jsxRuntime.jsx(FilterSelection, { className: cvaFilterWithoutCollapse({ disableCollapse }), filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters })) : (jsxRuntime.jsx(reactComponents.Collapse, { className: cvaCollapse({ disableCollapse }), id: "storybook_collapsible", initialExpanded: expanded, label: t("filtersBar.filtersHeading") + (filterBarConfig.filtersHaveBeenApplied === true ? " *" : ""), onToggle: () => setExpanded(prev => !prev), children: jsxRuntime.jsx(FilterSelection, { className: "flex", filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters }) }));
+    return dimensions.width > 768 || disableCollapse ? (jsxRuntime.jsx(FilterSelection, { className: cvaFilterWithoutCollapse({ disableCollapse }), filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters })) : (jsxRuntime.jsx(reactComponents.Collapse, { className: cvaCollapse({ disableCollapse }), id: "storybook_collapsible", initialExpanded: expanded, label: t("filtersBar.filtersHeading") + (filterBarConfig.filtersHaveBeenApplied ? " *" : ""), onToggle: () => setExpanded(prev => !prev), children: jsxRuntime.jsx(FilterSelection, { className: "flex", filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters }) }));
 };
-const FilterSelection = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], className, disableCollapse, }) => {
+const FilterSelection = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], className, }) => {
     const hideInFilterBar = react.useMemo(() => {
         return sharedUtils.objectValues(filterBarDefinition)
             .map(filter => {
@@ -565,8 +565,10 @@ const DynamicFilterList = ({ rowCount, keyMapper, labelMapper, prefixMapper, onC
     const [t] = useTranslation();
     const parentRef = react.useRef(null);
     const updatedRowCount = react.useMemo(() => (showRequestMoreUseSearch ? rowCount + 1 : rowCount), [rowCount, showRequestMoreUseSearch]);
-    return (jsxRuntime.jsx(reactFilterComponents.FilterBody, { limitSize: true, ref: parentRef, children: jsxRuntime.jsx(reactComponents.VirtualizedList, { count: updatedRowCount, rowHeight: 40, separator: "none", children: index => {
-                return (jsxRuntime.jsx("div", { children: showRequestMoreUseSearch && index === rowCount ? (jsxRuntime.jsxs("div", { className: "p-3 pt-2", children: [jsxRuntime.jsx("span", { className: "text-sm text-gray-600", children: t("filter.more.options.if.you.search.title", { count: rowCount }) }), jsxRuntime.jsx("br", {}), jsxRuntime.jsx("span", { className: "text-sm italic text-gray-400", children: t("filter.more.options.if.you.search.description") })] })) : type === "Radio" ? (jsxRuntime.jsx(reactFilterComponents.RadioFilterItem, { dataTestId: "dynamic-filter-radio-" + keyMapper(index), itemCount: count(index), label: labelMapper(index), prefix: prefixMapper === null || prefixMapper === void 0 ? void 0 : prefixMapper(index), selected: checked(index), value: keyMapper(index) }, keyMapper(index))) : (jsxRuntime.jsx(reactFilterComponents.CheckBoxFilterItem, { checked: checked(index), dataTestId: "dynamic-filter-check-box-" + keyMapper(index), itemCount: count(index), label: labelMapper(index), name: keyMapper(index), onChange: () => onChange === null || onChange === void 0 ? void 0 : onChange(index), prefix: prefixMapper === null || prefixMapper === void 0 ? void 0 : prefixMapper(index), showTooltip: showTooltip }, keyMapper(index))) }));
+    return (jsxRuntime.jsx(reactFilterComponents.FilterBody, { limitSize: true, ref: parentRef, children: jsxRuntime.jsx(reactComponents.VirtualizedList, { count: updatedRowCount, rowHeight: 40, separator: "space", children: index => {
+                return (jsxRuntime.jsx("div", { children: showRequestMoreUseSearch && index === rowCount ? (jsxRuntime.jsxs("div", { className: "p-3 pt-2", children: [jsxRuntime.jsx("span", { className: "text-sm text-gray-600", children: t("filter.more.options.if.you.search.title", { count: rowCount }) }), jsxRuntime.jsx("br", {}), jsxRuntime.jsx("span", { className: "text-sm italic text-gray-400", children: t("filter.more.options.if.you.search.description") })] })) : type === "Radio" ? (jsxRuntime.jsx(reactFilterComponents.RadioFilterItem, { dataTestId: "dynamic-filter-radio-" + keyMapper(index), itemCount: count(index), label: labelMapper(index), prefix: prefixMapper === null || prefixMapper === void 0 ? void 0 : prefixMapper(index), selected: checked(index), value: keyMapper(index) }, keyMapper(index))) : (jsxRuntime.jsx(reactFilterComponents.CheckBoxFilterItem, { checked: checked(index), dataTestId: "dynamic-filter-check-box-" + keyMapper(index), itemCount: count(index), label: labelMapper(index), name: keyMapper(index), onChange: () => {
+                            onChange === null || onChange === void 0 ? void 0 : onChange(index);
+                        }, prefix: prefixMapper === null || prefixMapper === void 0 ? void 0 : prefixMapper(index), showTooltip: showTooltip }, keyMapper(index))) }));
             } }) }));
 };
 
@@ -613,7 +615,7 @@ const DefaultCheckboxFilter = ({ filterDefinition, filterBarActions, options, lo
     var _a, _b, _c, _d, _e;
     const [undefinedCount, setUndefinedCount] = react.useState(null);
     const { logEvent } = reactCoreHooks.useAnalytics(FilterEvents);
-    const handleClick = (value) => {
+    const handleSetValue = (value) => {
         logEvent("Filters Applied - V2", {
             type: filterName !== null && filterName !== void 0 ? filterName : `${sharedUtils.capitalize(filterDefinition.filterKey)}Filter`,
             value: value.key,
@@ -675,14 +677,14 @@ const DefaultCheckboxFilter = ({ filterDefinition, filterBarActions, options, lo
                     }, count: index => { var _a; return (_a = res[index]) === null || _a === void 0 ? void 0 : _a.count; }, keyMapper: index => { var _a; return ((_a = res[index]) === null || _a === void 0 ? void 0 : _a.key) || ""; }, labelMapper: index => { var _a; return ((_a = res[index]) === null || _a === void 0 ? void 0 : _a.label) || ""; }, onChange: index => {
                         const result = res[index];
                         if (result) {
-                            handleClick(result);
+                            handleSetValue(result);
                         }
                     }, prefixMapper: index => { var _a; return ((_a = res[index]) === null || _a === void 0 ? void 0 : _a.prefix) || ""; }, rowCount: undefinedCount ? res.length - 1 : res.length, showRequestMoreUseSearch: showRequestMoreUseSearch, showTooltip: showTooltip, type: "CheckBox" })) }), showUndefinedOptionWithCountAtBottom && undefinedCount ? (jsxRuntime.jsx(reactFilterComponents.CheckBoxFilterItem, { checked: filterDefinition.type === "valueName"
                     ? filterBarActions.objectArrayIncludesValue(filterDefinition.filterKey, ((_c = results[undefinedCount.index]) === null || _c === void 0 ? void 0 : _c.key) || "")
                     : filterBarActions.arrayIncludesValue(filterDefinition.filterKey, ((_d = results[undefinedCount.index]) === null || _d === void 0 ? void 0 : _d.key) || ""), className: "border-t-2", dataTestId: "dynamic-filter-check-box-undefined", itemCount: undefinedCount.count, label: (_e = results[undefinedCount.index]) === null || _e === void 0 ? void 0 : _e.label, name: "dynamic-filter-check-box-undefined", onChange: () => {
                     const result = results[undefinedCount.index];
                     if (result) {
-                        handleClick(result);
+                        handleSetValue(result);
                     }
                 } }, "dynamic-filter-check-box-undefined")) : null] }));
 };
@@ -816,15 +818,15 @@ const capitalize = (s) => {
  * @returns {string[] | ValueName[] | null | { min: undefined, max: undefined } | { from: undefined, to: undefined }} - The initial value corresponding to the given filter type.
  */
 const getInitialValueFromType = (type) => {
+    if (type === "string") {
+        return '';
+    }
     if (type === "stringArray") {
         return [];
     }
     if (type === "valueName") {
         return [];
     }
-    if (type === "boolean") {
-        return null;
-    }
     if (type === "minMax") {
         return { min: undefined, max: undefined };
     }
@@ -1011,14 +1013,14 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
         //To do this for a changing default value as in customers and sites we would need to recreate the initialFilterBarConfig every time the default value changes.
         //This mean that filterbars that have this functionality wouldn't be able to save the state of the filterbar.
         //Another option would be to create a new filterbar for each customer or site. This also has its drawbacks. Would raise it with the frontend community.
-        const hasNonVisibleDefaultValues = sharedUtils.objectValues(filterBarDefinition).some(key => {
+        const hasNonVisibleDefaultValues = sharedUtils.objectValues(filterBarDefinition).some(value => {
             var _a;
-            return key.showInStarredMenu &&
-                !key.showInStarredMenu() &&
-                key.showInFilterBar &&
-                !key.showInFilterBar() &&
-                ((_a = key.defaultValue) === null || _a === void 0 ? void 0 : _a.toString) &&
-                key.defaultValue.toString().length > 0;
+            return value.showInStarredMenu &&
+                !value.showInStarredMenu() &&
+                value.showInFilterBar &&
+                !value.showInFilterBar() &&
+                ((_a = value.defaultValue) === null || _a === void 0 ? void 0 : _a.toString) &&
+                value.defaultValue.toString().length > 0;
         });
         if (initialFilterBarConfig === undefined || hasNonVisibleDefaultValues) {
             initialFilterBarConfig = createInitialState(name, sharedUtils.objectValues(filterBarDefinition), initialState || {}, setValue);

package/index.esm.js

@@ -496,9 +496,9 @@ const StarredFilters = ({ filterBarDefinition, filterBarConfig, disableCollapse,
     const [expanded, setExpanded] = useState(false);
     const [t] = useTranslation();
     const dimensions = useResize();
-    return dimensions.width > 768 || disableCollapse ? (jsx(FilterSelection, { className: cvaFilterWithoutCollapse({ disableCollapse }), filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters })) : (jsx(Collapse, { className: cvaCollapse({ disableCollapse }), id: "storybook_collapsible", initialExpanded: expanded, label: t("filtersBar.filtersHeading") + (filterBarConfig.filtersHaveBeenApplied === true ? " *" : ""), onToggle: () => setExpanded(prev => !prev), children: jsx(FilterSelection, { className: "flex", filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters }) }));
+    return dimensions.width > 768 || disableCollapse ? (jsx(FilterSelection, { className: cvaFilterWithoutCollapse({ disableCollapse }), filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters })) : (jsx(Collapse, { className: cvaCollapse({ disableCollapse }), id: "storybook_collapsible", initialExpanded: expanded, label: t("filtersBar.filtersHeading") + (filterBarConfig.filtersHaveBeenApplied ? " *" : ""), onToggle: () => setExpanded(prev => !prev), children: jsx(FilterSelection, { className: "flex", filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters }) }));
 };
-const FilterSelection = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], className, disableCollapse, }) => {
+const FilterSelection = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], className, }) => {
     const hideInFilterBar = useMemo(() => {
         return objectValues(filterBarDefinition)
             .map(filter => {
@@ -557,8 +557,10 @@ const DynamicFilterList = ({ rowCount, keyMapper, labelMapper, prefixMapper, onC
     const [t] = useTranslation();
     const parentRef = useRef(null);
     const updatedRowCount = useMemo(() => (showRequestMoreUseSearch ? rowCount + 1 : rowCount), [rowCount, showRequestMoreUseSearch]);
-    return (jsx(FilterBody, { limitSize: true, ref: parentRef, children: jsx(VirtualizedList, { count: updatedRowCount, rowHeight: 40, separator: "none", children: index => {
-                return (jsx("div", { children: showRequestMoreUseSearch && index === rowCount ? (jsxs("div", { className: "p-3 pt-2", children: [jsx("span", { className: "text-sm text-gray-600", children: t("filter.more.options.if.you.search.title", { count: rowCount }) }), jsx("br", {}), jsx("span", { className: "text-sm italic text-gray-400", children: t("filter.more.options.if.you.search.description") })] })) : type === "Radio" ? (jsx(RadioFilterItem, { dataTestId: "dynamic-filter-radio-" + keyMapper(index), itemCount: count(index), label: labelMapper(index), prefix: prefixMapper === null || prefixMapper === void 0 ? void 0 : prefixMapper(index), selected: checked(index), value: keyMapper(index) }, keyMapper(index))) : (jsx(CheckBoxFilterItem, { checked: checked(index), dataTestId: "dynamic-filter-check-box-" + keyMapper(index), itemCount: count(index), label: labelMapper(index), name: keyMapper(index), onChange: () => onChange === null || onChange === void 0 ? void 0 : onChange(index), prefix: prefixMapper === null || prefixMapper === void 0 ? void 0 : prefixMapper(index), showTooltip: showTooltip }, keyMapper(index))) }));
+    return (jsx(FilterBody, { limitSize: true, ref: parentRef, children: jsx(VirtualizedList, { count: updatedRowCount, rowHeight: 40, separator: "space", children: index => {
+                return (jsx("div", { children: showRequestMoreUseSearch && index === rowCount ? (jsxs("div", { className: "p-3 pt-2", children: [jsx("span", { className: "text-sm text-gray-600", children: t("filter.more.options.if.you.search.title", { count: rowCount }) }), jsx("br", {}), jsx("span", { className: "text-sm italic text-gray-400", children: t("filter.more.options.if.you.search.description") })] })) : type === "Radio" ? (jsx(RadioFilterItem, { dataTestId: "dynamic-filter-radio-" + keyMapper(index), itemCount: count(index), label: labelMapper(index), prefix: prefixMapper === null || prefixMapper === void 0 ? void 0 : prefixMapper(index), selected: checked(index), value: keyMapper(index) }, keyMapper(index))) : (jsx(CheckBoxFilterItem, { checked: checked(index), dataTestId: "dynamic-filter-check-box-" + keyMapper(index), itemCount: count(index), label: labelMapper(index), name: keyMapper(index), onChange: () => {
+                            onChange === null || onChange === void 0 ? void 0 : onChange(index);
+                        }, prefix: prefixMapper === null || prefixMapper === void 0 ? void 0 : prefixMapper(index), showTooltip: showTooltip }, keyMapper(index))) }));
             } }) }));
 };
 
@@ -605,7 +607,7 @@ const DefaultCheckboxFilter = ({ filterDefinition, filterBarActions, options, lo
     var _a, _b, _c, _d, _e;
     const [undefinedCount, setUndefinedCount] = useState(null);
     const { logEvent } = useAnalytics(FilterEvents);
-    const handleClick = (value) => {
+    const handleSetValue = (value) => {
         logEvent("Filters Applied - V2", {
             type: filterName !== null && filterName !== void 0 ? filterName : `${capitalize$1(filterDefinition.filterKey)}Filter`,
             value: value.key,
@@ -667,14 +669,14 @@ const DefaultCheckboxFilter = ({ filterDefinition, filterBarActions, options, lo
                     }, count: index => { var _a; return (_a = res[index]) === null || _a === void 0 ? void 0 : _a.count; }, keyMapper: index => { var _a; return ((_a = res[index]) === null || _a === void 0 ? void 0 : _a.key) || ""; }, labelMapper: index => { var _a; return ((_a = res[index]) === null || _a === void 0 ? void 0 : _a.label) || ""; }, onChange: index => {
                         const result = res[index];
                         if (result) {
-                            handleClick(result);
+                            handleSetValue(result);
                         }
                     }, prefixMapper: index => { var _a; return ((_a = res[index]) === null || _a === void 0 ? void 0 : _a.prefix) || ""; }, rowCount: undefinedCount ? res.length - 1 : res.length, showRequestMoreUseSearch: showRequestMoreUseSearch, showTooltip: showTooltip, type: "CheckBox" })) }), showUndefinedOptionWithCountAtBottom && undefinedCount ? (jsx(CheckBoxFilterItem, { checked: filterDefinition.type === "valueName"
                     ? filterBarActions.objectArrayIncludesValue(filterDefinition.filterKey, ((_c = results[undefinedCount.index]) === null || _c === void 0 ? void 0 : _c.key) || "")
                     : filterBarActions.arrayIncludesValue(filterDefinition.filterKey, ((_d = results[undefinedCount.index]) === null || _d === void 0 ? void 0 : _d.key) || ""), className: "border-t-2", dataTestId: "dynamic-filter-check-box-undefined", itemCount: undefinedCount.count, label: (_e = results[undefinedCount.index]) === null || _e === void 0 ? void 0 : _e.label, name: "dynamic-filter-check-box-undefined", onChange: () => {
                     const result = results[undefinedCount.index];
                     if (result) {
-                        handleClick(result);
+                        handleSetValue(result);
                     }
                 } }, "dynamic-filter-check-box-undefined")) : null] }));
 };
@@ -808,15 +810,15 @@ const capitalize = (s) => {
  * @returns {string[] | ValueName[] | null | { min: undefined, max: undefined } | { from: undefined, to: undefined }} - The initial value corresponding to the given filter type.
  */
 const getInitialValueFromType = (type) => {
+    if (type === "string") {
+        return '';
+    }
     if (type === "stringArray") {
         return [];
     }
     if (type === "valueName") {
         return [];
     }
-    if (type === "boolean") {
-        return null;
-    }
     if (type === "minMax") {
         return { min: undefined, max: undefined };
     }
@@ -1003,14 +1005,14 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
         //To do this for a changing default value as in customers and sites we would need to recreate the initialFilterBarConfig every time the default value changes.
         //This mean that filterbars that have this functionality wouldn't be able to save the state of the filterbar.
         //Another option would be to create a new filterbar for each customer or site. This also has its drawbacks. Would raise it with the frontend community.
-        const hasNonVisibleDefaultValues = objectValues(filterBarDefinition).some(key => {
+        const hasNonVisibleDefaultValues = objectValues(filterBarDefinition).some(value => {
             var _a;
-            return key.showInStarredMenu &&
-                !key.showInStarredMenu() &&
-                key.showInFilterBar &&
-                !key.showInFilterBar() &&
-                ((_a = key.defaultValue) === null || _a === void 0 ? void 0 : _a.toString) &&
-                key.defaultValue.toString().length > 0;
+            return value.showInStarredMenu &&
+                !value.showInStarredMenu() &&
+                value.showInFilterBar &&
+                !value.showInFilterBar() &&
+                ((_a = value.defaultValue) === null || _a === void 0 ? void 0 : _a.toString) &&
+                value.defaultValue.toString().length > 0;
         });
         if (initialFilterBarConfig === undefined || hasNonVisibleDefaultValues) {
             initialFilterBarConfig = createInitialState(name, objectValues(filterBarDefinition), initialState || {}, setValue);

package/package.json

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

package/src/lib/utils/createInitialState.d.ts

@@ -1,17 +1,36 @@
-import { FilterBarConfig, FilterBarDefinition, FilterBarInferredValue, FilterDefinition, FilterTypes, InitialState, ValueName } from "../types/FilterTypes";
+import { FilterBarConfig, FilterBarDefinition, FilterBarInferredValue, FilterDefinition, InitialState, ValueName } from "../types/FilterTypes";
+type InitialTypes = {
+    Arg: "string";
+    Init: '';
+} | {
+    Arg: "stringArray";
+    Init: string[];
+} | {
+    Arg: "valueName";
+    Init: ValueName[];
+} | {
+    Arg: "minMax";
+    Init: {
+        min: undefined;
+        max: undefined;
+    };
+} | {
+    Arg: "dateRange";
+    Init: {
+        from: undefined;
+        to: undefined;
+    };
+} | {
+    Arg: unknown;
+    Init: null;
+};
 /**
  * A helper function that returns a default value based on the filter type.
  *
  * @param {FilterTypes} type - The filter type for which to retrieve the initial value.
  * @returns {string[] | ValueName[] | null | { min: undefined, max: undefined } | { from: undefined, to: undefined }} - The initial value corresponding to the given filter type.
  */
-export declare const getInitialValueFromType: (type: FilterTypes) => string[] | ValueName[] | null | {
-    min: undefined;
-    max: undefined;
-} | {
-    from: undefined;
-    to: undefined;
-};
+export declare const getInitialValueFromType: <InitialType extends InitialTypes>(type: InitialType['Arg']) => InitialType['Init'];
 /**
  * Creates an initial state object for a filter bar configuration based on the provided parameters.
  *
@@ -19,3 +38,4 @@ export declare const getInitialValueFromType: (type: FilterTypes) => string[] |
  * @returns {FilterBarConfig<TFilterBarDefinition>} - Returns an initial filter bar configuration object.
  */
 export declare const createInitialState: <TFilterBarDefinition extends FilterBarDefinition>(name: string, mainFilters: FilterDefinition[], initialState: InitialState<TFilterBarDefinition>, setValue: (key: string, callback: (prev: FilterBarInferredValue<TFilterBarDefinition, never> | undefined) => FilterBarInferredValue<TFilterBarDefinition, never> | undefined) => void) => FilterBarConfig<TFilterBarDefinition>;
+export {};