@trackunit/filters-filter-bar 0.0.178 → 0.0.182
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.cjs.js +24 -24
- package/index.esm.js +24 -24
- package/package.json +1 -1
package/index.cjs.js
CHANGED
|
@@ -406,7 +406,7 @@ const Filter = ({ filter, filterBarActions, filterState, }) => {
|
|
|
406
406
|
setValue,
|
|
407
407
|
filterBarActions,
|
|
408
408
|
filterState,
|
|
409
|
-
}) })) : (jsxRuntime.jsx(reactFilterComponents.Filter, {
|
|
409
|
+
}) })) : (jsxRuntime.jsx(reactFilterComponents.Filter, { activeLabel: activeFilterText, dataTestId: `${filter.filterKey}-filter-button`, isActive: filterText().length > 0, title: filter.title, withStickyHeader: true, children: filter.component({
|
|
410
410
|
filterDefinition: filter,
|
|
411
411
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
412
412
|
value: values,
|
|
@@ -434,10 +434,10 @@ const ResetFiltersButton = ({ isFilterIncludedByKey, filtersHaveBeenApplied, res
|
|
|
434
434
|
if (!filtersHaveBeenApplied) {
|
|
435
435
|
return null;
|
|
436
436
|
}
|
|
437
|
-
return (jsxRuntime.jsx(reactComponents.Button, {
|
|
437
|
+
return (jsxRuntime.jsx(reactComponents.Button, { dataTestId: "reset-filters-button", onClick: () => {
|
|
438
438
|
clearSearch();
|
|
439
439
|
resetFiltersToInitialState();
|
|
440
|
-
},
|
|
440
|
+
}, size: "small", variant: "ghost-neutral", children: t("filtersBar.resetFilters") }));
|
|
441
441
|
};
|
|
442
442
|
|
|
443
443
|
/**
|
|
@@ -477,22 +477,22 @@ const StarredFiltersMenu = ({ filterBarDefinition, updateStarredFilters, starred
|
|
|
477
477
|
...hideInStarredMenu,
|
|
478
478
|
...hiddenFilters,
|
|
479
479
|
]);
|
|
480
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(reactComponents.Popover, { placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.IconButton, { icon: jsxRuntime.jsx(reactComponents.Icon, { name: "Funnel", size: "small" }), size: "small", title: t("filtersBar.starredFiltersTitle")
|
|
480
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(reactComponents.Popover, { placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.IconButton, { dataTestId: "starred-filters-menu", icon: jsxRuntime.jsx(reactComponents.Icon, { name: "Funnel", size: "small" }), size: "small", title: t("filtersBar.starredFiltersTitle") }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: jsxRuntime.jsx(reactComponents.MenuList, { className: "max-h-[55vh] w-72 overflow-y-auto", dataTestId: "starred-filters-menu-popover", children: jsxRuntime.jsx("div", { children: filtersGrouped.map((group, idx) => {
|
|
481
481
|
const isLast = idx === filtersGrouped.length - 1;
|
|
482
|
-
return (jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsx("div", { className: "mt-2 mb-1 flex px-2", children: jsxRuntime.jsx(reactComponents.Text, {
|
|
483
|
-
return (jsxRuntime.jsxs("div", { className: "flex w-full cursor-pointer items-center justify-between rounded-sm py-0 px-2 transition hover:bg-neutral-50", onClick: () => {
|
|
482
|
+
return (jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsx("div", { className: "mt-2 mb-1 flex px-2", children: jsxRuntime.jsx(reactComponents.Text, { dataTestId: "starred-filters-group-title", size: "small", subtle: true, uppercase: true, weight: "bold", children: group.key }) }), group.filters.map(filter => {
|
|
483
|
+
return (jsxRuntime.jsxs("div", { className: "flex w-full cursor-pointer items-center justify-between rounded-sm py-0 px-2 transition hover:bg-neutral-50", "data-testid": `${filter.filterKey}-star-filter`, onClick: () => {
|
|
484
484
|
updateStarredFilters(filter.filterKey);
|
|
485
485
|
logEvent("StarringFilter", {
|
|
486
486
|
type: filter.filterKey,
|
|
487
487
|
});
|
|
488
|
-
},
|
|
488
|
+
}, children: [jsxRuntime.jsx(reactComponents.Text, { weight: "thick", children: filter.title }), jsxRuntime.jsx(reactComponents.StarButton, { onClick: e => {
|
|
489
489
|
e.preventDefault();
|
|
490
490
|
e.stopPropagation();
|
|
491
491
|
updateStarredFilters(filter.filterKey);
|
|
492
492
|
logEvent("StarringFilter", {
|
|
493
493
|
type: filter.filterKey,
|
|
494
494
|
});
|
|
495
|
-
} })] }, filter.filterKey));
|
|
495
|
+
}, starred: starredFilterKeys.includes(filter.filterKey) })] }, filter.filterKey));
|
|
496
496
|
}), !isLast && jsxRuntime.jsx("div", { className: "mt-2 h-[1px] w-full bg-neutral-300" })] }, group.key));
|
|
497
497
|
}) }) }) })] }), starredFilterKeys.length > 0 ? jsxRuntime.jsx("div", { className: "h-7 w-[1px] bg-neutral-300" }) : null] }));
|
|
498
498
|
};
|
|
@@ -519,7 +519,7 @@ const StarredFilters = ({ filterBarDefinition, filterBarConfig, disableCollapse,
|
|
|
519
519
|
const [expanded, setExpanded] = react.useState(false);
|
|
520
520
|
const [t] = useTranslation();
|
|
521
521
|
const dimensions = reactComponents.useResize();
|
|
522
|
-
return dimensions.width > 768 || disableCollapse ? (jsxRuntime.jsx(FilterSelection, { className: cvaFilterWithoutCollapse({ disableCollapse }), filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters })) : (jsxRuntime.jsx(reactComponents.Collapse, {
|
|
522
|
+
return dimensions.width > 768 || disableCollapse ? (jsxRuntime.jsx(FilterSelection, { className: cvaFilterWithoutCollapse({ disableCollapse }), filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters })) : (jsxRuntime.jsx(reactComponents.Collapse, { className: cvaCollapse({ expanded, disableCollapse }), headerClassName: cvaCollapserHeader({ expanded }), 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 }) }));
|
|
523
523
|
};
|
|
524
524
|
const FilterSelection = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], className, disableCollapse, }) => {
|
|
525
525
|
const hideInFilterBar = react.useMemo(() => {
|
|
@@ -534,7 +534,7 @@ const FilterSelection = ({ filterBarDefinition, filterBarConfig, hiddenFilters =
|
|
|
534
534
|
...hideInFilterBar,
|
|
535
535
|
...hiddenFilters,
|
|
536
536
|
]);
|
|
537
|
-
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,
|
|
537
|
+
return (jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge([className, "flex-wrap", "items-center", "gap-3"]), "data-testid": "starred-filters", children: [jsxRuntime.jsx(StarredFiltersMenu, { filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters, starredFilterKeys: filterBarConfig.starredFilterKeys, updateStarredFilters: filterBarConfig.updateStarredFilters }), filtersGrouped.map(group => group.filters
|
|
538
538
|
.filter(filter => !hiddenFilters.includes(filter.filterKey))
|
|
539
539
|
.map(filter => {
|
|
540
540
|
const showMenuAnyway = filterBarConfig.filterHasChanged(filter.filterKey) &&
|
|
@@ -552,7 +552,7 @@ const FilterSelection = ({ filterBarDefinition, filterBarConfig, hiddenFilters =
|
|
|
552
552
|
* The FilterBar component serves as a wrapper for managing filters.
|
|
553
553
|
*/
|
|
554
554
|
const FilterBar = ({ hiddenFilters, className, filterBarDefinition, filterBarConfig, disableCollapse = false, }) => {
|
|
555
|
-
return (jsxRuntime.jsx("div", { className: `flex ${className}`, "data-testid": `${filterBarConfig.name}-filterbar`, children: jsxRuntime.jsx(StarredFilters, {
|
|
555
|
+
return (jsxRuntime.jsx("div", { className: `flex ${className}`, "data-testid": `${filterBarConfig.name}-filterbar`, children: jsxRuntime.jsx(StarredFilters, { disableCollapse: disableCollapse, filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters }) }));
|
|
556
556
|
};
|
|
557
557
|
|
|
558
558
|
/**
|
|
@@ -608,8 +608,8 @@ const DynamicFilterList = ({ rowCount, keyMapper, labelMapper, prefixMapper, onC
|
|
|
608
608
|
const [t] = useTranslation();
|
|
609
609
|
const parentRef = react.useRef(null);
|
|
610
610
|
const updatedRowCount = react.useMemo(() => (showRequestMoreUseSearch ? rowCount + 1 : rowCount), [rowCount, showRequestMoreUseSearch]);
|
|
611
|
-
return (jsxRuntime.jsx(reactFilterComponents.FilterBody, { limitSize: true, ref: parentRef, children: jsxRuntime.jsx(VirtualizedList, {
|
|
612
|
-
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),
|
|
611
|
+
return (jsxRuntime.jsx(reactFilterComponents.FilterBody, { limitSize: true, ref: parentRef, children: jsxRuntime.jsx(VirtualizedList, { count: updatedRowCount, parentRef: parentRef, rowHeight: 40, children: index => {
|
|
612
|
+
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
613
|
} }) }));
|
|
614
614
|
};
|
|
615
615
|
|
|
@@ -624,7 +624,7 @@ const FilterHeader = ({ filterKey, title, searchEnabled, searchProps, filterHasC
|
|
|
624
624
|
resetIndividualFilterToInitialState(filterKey);
|
|
625
625
|
onResetFilter === null || onResetFilter === void 0 ? void 0 : onResetFilter();
|
|
626
626
|
};
|
|
627
|
-
return (jsxRuntime.jsx(reactFilterComponents.FilterHeader, {
|
|
627
|
+
return (jsxRuntime.jsx(reactFilterComponents.FilterHeader, { dataTestId: `${filterKey}-filter-header`, loading: loading, onReset: handleResetFilter, resetLabel: t("filtersBar.resetFilter"), showReset: filterHasChanged(filterKey), title: title, children: searchEnabled ? (jsxRuntime.jsx(reactFormComponents.Search, { autoFocus: true, fieldSize: "small", onChange: e => searchProps.onChange(e.currentTarget.value), placeholder: t("assetFilters.searchPlaceholder"), showBorderWhenNotInFocus: true, suffix: jsxRuntime.jsx(reactComponents.Text, { size: "small", subtle: true, children: searchProps.count }), value: searchProps.value })) : null }));
|
|
628
628
|
};
|
|
629
629
|
|
|
630
630
|
/**
|
|
@@ -644,7 +644,7 @@ const FilterResults = ({ results, ignoreUndefined, loading, children }) => {
|
|
|
644
644
|
};
|
|
645
645
|
const EmptyResults = ({ loading }) => {
|
|
646
646
|
const [t] = useTranslation();
|
|
647
|
-
return (jsxRuntime.jsx("div", { className: "grid h-20 w-full place-content-center pl-2 pr-2", "data-testid": "empty-filter-results", children: jsxRuntime.jsx(reactComponents.Text, {
|
|
647
|
+
return (jsxRuntime.jsx("div", { className: "grid h-20 w-full place-content-center pl-2 pr-2", "data-testid": "empty-filter-results", children: jsxRuntime.jsx(reactComponents.Text, { align: "center", italicize: true, subtle: true, children: loading ? t("filtersBar.loading") : t("filtersBar.emptyResults") }) }));
|
|
648
648
|
};
|
|
649
649
|
|
|
650
650
|
/**
|
|
@@ -710,11 +710,11 @@ const DefaultCheckboxFilter = ({ filterDefinition, filterBarActions, options, lo
|
|
|
710
710
|
value: (_a = customSearch === null || customSearch === void 0 ? void 0 : customSearch.value) !== null && _a !== void 0 ? _a : searchText,
|
|
711
711
|
onChange: (_b = customSearch === null || customSearch === void 0 ? void 0 : customSearch.onChange) !== null && _b !== void 0 ? _b : setSearchText,
|
|
712
712
|
count: undefinedCount ? filteredOptions.length - 1 : filteredOptions.length,
|
|
713
|
-
} })), jsxRuntime.jsx(FilterResults, {
|
|
713
|
+
} })), jsxRuntime.jsx(FilterResults, { ignoreUndefined: undefinedCount !== null, loading: loading, results: results, children: res => (jsxRuntime.jsx(DynamicFilterList, { checked: index => filterDefinition.type === "valueName"
|
|
714
714
|
? filterBarActions.objectArrayIncludesValue(filterDefinition.filterKey, res[index].key)
|
|
715
|
-
: filterBarActions.arrayIncludesValue(filterDefinition.filterKey, res[index].key),
|
|
716
|
-
? filterBarActions.objectArrayIncludesValue(filterDefinition.filterKey, (
|
|
717
|
-
: filterBarActions.arrayIncludesValue(filterDefinition.filterKey, (_e = results[undefinedCount.index]) === null || _e === void 0 ? void 0 : _e.
|
|
715
|
+
: filterBarActions.arrayIncludesValue(filterDefinition.filterKey, res[index].key), count: index => res[index].count, keyMapper: index => res[index].key, labelMapper: index => res[index].label, onChange: index => handleClick(res[index]), prefixMapper: index => res[index].prefix, rowCount: undefinedCount ? res.length - 1 : res.length, showRequestMoreUseSearch: showRequestMoreUseSearch, showTooltip: showTooltip, type: "CheckBox" })) }), showUndefinedOptionWithCountAtBottom && undefinedCount ? (jsxRuntime.jsx(reactFilterComponents.CheckBoxFilterItem, { checked: filterDefinition.type === "valueName"
|
|
716
|
+
? filterBarActions.objectArrayIncludesValue(filterDefinition.filterKey, (_c = results[undefinedCount.index]) === null || _c === void 0 ? void 0 : _c.key)
|
|
717
|
+
: 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: () => handleClick(results[undefinedCount.index]) }, "dynamic-filter-check-box-undefined")) : null] }));
|
|
718
718
|
};
|
|
719
719
|
|
|
720
720
|
const formatToJustDate = (date) => {
|
|
@@ -768,13 +768,13 @@ const DefaultDateRangeFilter = ({ filterDefinition, filterName, value, setValue,
|
|
|
768
768
|
});
|
|
769
769
|
setValue(() => ({ from: fromDateValue, to: toDateValue }));
|
|
770
770
|
};
|
|
771
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactFilterComponents.FilterHeader, {
|
|
771
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactFilterComponents.FilterHeader, { onReset: reset, resetLabel: t("filtersBar.resetFilter"), showReset: hasSelection, title: filterDefinition.title }), jsxRuntime.jsxs(reactFilterComponents.FilterBody, { children: [jsxRuntime.jsx("div", { className: "flex gap-4 px-1", children: jsxRuntime.jsx(reactComponents.DayRangePicker, { language: "en", onRangeSelect: dateRange => {
|
|
772
772
|
setFromDateValue(formatToJustDate(dateRange === null || dateRange === void 0 ? void 0 : dateRange.from));
|
|
773
773
|
setToDateValue(formatToJustDate(dateRange === null || dateRange === void 0 ? void 0 : dateRange.to));
|
|
774
774
|
}, selectedDays: {
|
|
775
775
|
from: fromDateValue ? new Date(fromDateValue) : undefined,
|
|
776
776
|
to: toDateValue ? new Date(toDateValue) : undefined,
|
|
777
|
-
} }) }), jsxRuntime.jsx(reactFilterComponents.FilterFooter, { children: jsxRuntime.jsxs("div", { className: "flex gap-2", children: [jsxRuntime.jsx(reactComponents.Button, {
|
|
777
|
+
} }) }), jsxRuntime.jsx(reactFilterComponents.FilterFooter, { children: jsxRuntime.jsxs("div", { className: "flex gap-2", children: [jsxRuntime.jsx(reactComponents.Button, { onClick: cancel, size: "small", variant: "secondary", children: t("filtersBar.defaultDateRangeFilters.cancel") }), jsxRuntime.jsx(reactComponents.Button, { onClick: handleApply, size: "small", children: t("filtersBar.defaultDateRangeFilters.apply") })] }) })] })] }));
|
|
778
778
|
};
|
|
779
779
|
|
|
780
780
|
/**
|
|
@@ -804,7 +804,7 @@ const DefaultMinMaxFilter = ({ filterDefinition, filterName, value, setValue, fi
|
|
|
804
804
|
return realMinValue || realMaxValue ? { min: realMinValue, max: realMaxValue } : {};
|
|
805
805
|
});
|
|
806
806
|
};
|
|
807
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactFilterComponents.FilterHeader, {
|
|
807
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactFilterComponents.FilterHeader, { onReset: () => filterBarActions.resetIndividualFilterToInitialState(filterDefinition.filterKey), resetLabel: t("filtersBar.resetFilter"), showReset: filterBarActions.filterHasChanged(filterDefinition.filterKey), title: filterDefinition.title }), jsxRuntime.jsxs(reactFilterComponents.FilterBody, { children: [jsxRuntime.jsxs("div", { className: "flex gap-4 px-1", children: [jsxRuntime.jsx(reactFormComponents.NumberField, { addonAfter: unit, className: "w-40", label: t("filtersBar.defaultMinMaxFilters.min"), max: filterDefinition.type === "minMax" ? filterDefinition.maximumNumber : undefined, min: filterDefinition.type === "minMax" ? filterDefinition.minimumNumber : undefined, onChange: e => setMinValue(Number(e.target.value)), value: minValue === 0 ? "" : minValue !== null && minValue !== void 0 ? minValue : "" }), jsxRuntime.jsx(reactFormComponents.NumberField, { addonAfter: unit, className: "w-40", label: t("filtersBar.defaultMinMaxFilters.max"), max: filterDefinition.type === "minMax" ? filterDefinition.maximumNumber : undefined, min: filterDefinition.type === "minMax" ? filterDefinition.minimumNumber : undefined, onChange: e => setMaxValue(Number(e.target.value)), value: maxValue === 0 ? "" : maxValue !== null && maxValue !== void 0 ? maxValue : "" })] }), jsxRuntime.jsx(reactFilterComponents.FilterFooter, { children: jsxRuntime.jsx(reactComponents.Button, { onClick: handleApply, size: "small", variant: "ghost", children: t("filtersBar.defaultMinMaxFilters.apply") }) })] })] }));
|
|
808
808
|
};
|
|
809
809
|
|
|
810
810
|
/**
|
|
@@ -832,9 +832,9 @@ const DefaultRadioFilter = ({ filterDefinition, filterBarActions, options, loadi
|
|
|
832
832
|
value: (_b = customSearch === null || customSearch === void 0 ? void 0 : customSearch.value) !== null && _b !== void 0 ? _b : searchText,
|
|
833
833
|
onChange: (_c = customSearch === null || customSearch === void 0 ? void 0 : customSearch.onChange) !== null && _c !== void 0 ? _c : setSearchText,
|
|
834
834
|
count: filteredOptions.length,
|
|
835
|
-
} })), jsxRuntime.jsx(FilterResults, { results: customSearch ? options : filteredOptions,
|
|
835
|
+
} })), jsxRuntime.jsx(FilterResults, { loading: loading, results: customSearch ? options : filteredOptions, children: res => (jsxRuntime.jsx(reactFormComponents.RadioGroup, { id: "DefaultRadioFilter", onChange: e => {
|
|
836
836
|
handleClick(e.currentTarget.value);
|
|
837
|
-
}, children: jsxRuntime.jsx(DynamicFilterList, {
|
|
837
|
+
}, value: selectedRadioId, children: jsxRuntime.jsx(DynamicFilterList, { checked: index => filterBarActions.objectArrayIncludesValue(filterDefinition.filterKey, res[index].key), count: index => res[index].count, keyMapper: index => res[index].key, labelMapper: index => res[index].label, prefixMapper: index => res[index].prefix, rowCount: res.length, showRequestMoreUseSearch: showRequestMoreUseSearch, showTooltip: showTooltip, type: "Radio" }) })) })] }));
|
|
838
838
|
};
|
|
839
839
|
|
|
840
840
|
/**
|
package/index.esm.js
CHANGED
|
@@ -398,7 +398,7 @@ const Filter = ({ filter, filterBarActions, filterState, }) => {
|
|
|
398
398
|
setValue,
|
|
399
399
|
filterBarActions,
|
|
400
400
|
filterState,
|
|
401
|
-
}) })) : (jsx(Filter$1, {
|
|
401
|
+
}) })) : (jsx(Filter$1, { activeLabel: activeFilterText, dataTestId: `${filter.filterKey}-filter-button`, isActive: filterText().length > 0, title: filter.title, withStickyHeader: true, children: filter.component({
|
|
402
402
|
filterDefinition: filter,
|
|
403
403
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
404
404
|
value: values,
|
|
@@ -426,10 +426,10 @@ const ResetFiltersButton = ({ isFilterIncludedByKey, filtersHaveBeenApplied, res
|
|
|
426
426
|
if (!filtersHaveBeenApplied) {
|
|
427
427
|
return null;
|
|
428
428
|
}
|
|
429
|
-
return (jsx(Button, {
|
|
429
|
+
return (jsx(Button, { dataTestId: "reset-filters-button", onClick: () => {
|
|
430
430
|
clearSearch();
|
|
431
431
|
resetFiltersToInitialState();
|
|
432
|
-
},
|
|
432
|
+
}, size: "small", variant: "ghost-neutral", children: t("filtersBar.resetFilters") }));
|
|
433
433
|
};
|
|
434
434
|
|
|
435
435
|
/**
|
|
@@ -469,22 +469,22 @@ const StarredFiltersMenu = ({ filterBarDefinition, updateStarredFilters, starred
|
|
|
469
469
|
...hideInStarredMenu,
|
|
470
470
|
...hiddenFilters,
|
|
471
471
|
]);
|
|
472
|
-
return (jsxs(Fragment, { children: [jsxs(Popover, { placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(IconButton, { icon: jsx(Icon, { name: "Funnel", size: "small" }), size: "small", title: t("filtersBar.starredFiltersTitle")
|
|
472
|
+
return (jsxs(Fragment, { children: [jsxs(Popover, { placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(IconButton, { dataTestId: "starred-filters-menu", icon: jsx(Icon, { name: "Funnel", size: "small" }), size: "small", title: t("filtersBar.starredFiltersTitle") }) }), jsx(PopoverContent, { children: jsx(MenuList, { className: "max-h-[55vh] w-72 overflow-y-auto", dataTestId: "starred-filters-menu-popover", children: jsx("div", { children: filtersGrouped.map((group, idx) => {
|
|
473
473
|
const isLast = idx === filtersGrouped.length - 1;
|
|
474
|
-
return (jsxs("div", { className: "mb-2", children: [jsx("div", { className: "mt-2 mb-1 flex px-2", children: jsx(Text, {
|
|
475
|
-
return (jsxs("div", { className: "flex w-full cursor-pointer items-center justify-between rounded-sm py-0 px-2 transition hover:bg-neutral-50", onClick: () => {
|
|
474
|
+
return (jsxs("div", { className: "mb-2", children: [jsx("div", { className: "mt-2 mb-1 flex px-2", children: jsx(Text, { dataTestId: "starred-filters-group-title", size: "small", subtle: true, uppercase: true, weight: "bold", children: group.key }) }), group.filters.map(filter => {
|
|
475
|
+
return (jsxs("div", { className: "flex w-full cursor-pointer items-center justify-between rounded-sm py-0 px-2 transition hover:bg-neutral-50", "data-testid": `${filter.filterKey}-star-filter`, onClick: () => {
|
|
476
476
|
updateStarredFilters(filter.filterKey);
|
|
477
477
|
logEvent("StarringFilter", {
|
|
478
478
|
type: filter.filterKey,
|
|
479
479
|
});
|
|
480
|
-
},
|
|
480
|
+
}, children: [jsx(Text, { weight: "thick", children: filter.title }), jsx(StarButton, { onClick: e => {
|
|
481
481
|
e.preventDefault();
|
|
482
482
|
e.stopPropagation();
|
|
483
483
|
updateStarredFilters(filter.filterKey);
|
|
484
484
|
logEvent("StarringFilter", {
|
|
485
485
|
type: filter.filterKey,
|
|
486
486
|
});
|
|
487
|
-
} })] }, filter.filterKey));
|
|
487
|
+
}, starred: starredFilterKeys.includes(filter.filterKey) })] }, filter.filterKey));
|
|
488
488
|
}), !isLast && jsx("div", { className: "mt-2 h-[1px] w-full bg-neutral-300" })] }, group.key));
|
|
489
489
|
}) }) }) })] }), starredFilterKeys.length > 0 ? jsx("div", { className: "h-7 w-[1px] bg-neutral-300" }) : null] }));
|
|
490
490
|
};
|
|
@@ -511,7 +511,7 @@ const StarredFilters = ({ filterBarDefinition, filterBarConfig, disableCollapse,
|
|
|
511
511
|
const [expanded, setExpanded] = useState(false);
|
|
512
512
|
const [t] = useTranslation();
|
|
513
513
|
const dimensions = useResize();
|
|
514
|
-
return dimensions.width > 768 || disableCollapse ? (jsx(FilterSelection, { className: cvaFilterWithoutCollapse({ disableCollapse }), filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters })) : (jsx(Collapse, {
|
|
514
|
+
return dimensions.width > 768 || disableCollapse ? (jsx(FilterSelection, { className: cvaFilterWithoutCollapse({ disableCollapse }), filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters })) : (jsx(Collapse, { className: cvaCollapse({ expanded, disableCollapse }), headerClassName: cvaCollapserHeader({ expanded }), 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 }) }));
|
|
515
515
|
};
|
|
516
516
|
const FilterSelection = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], className, disableCollapse, }) => {
|
|
517
517
|
const hideInFilterBar = useMemo(() => {
|
|
@@ -526,7 +526,7 @@ const FilterSelection = ({ filterBarDefinition, filterBarConfig, hiddenFilters =
|
|
|
526
526
|
...hideInFilterBar,
|
|
527
527
|
...hiddenFilters,
|
|
528
528
|
]);
|
|
529
|
-
return (jsxs("div", { className: twMerge([className, "flex-wrap", "items-center", "gap-3"]), "data-testid": "starred-filters", children: [jsx(StarredFiltersMenu, { hiddenFilters: hiddenFilters, starredFilterKeys: filterBarConfig.starredFilterKeys,
|
|
529
|
+
return (jsxs("div", { className: twMerge([className, "flex-wrap", "items-center", "gap-3"]), "data-testid": "starred-filters", children: [jsx(StarredFiltersMenu, { filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters, starredFilterKeys: filterBarConfig.starredFilterKeys, updateStarredFilters: filterBarConfig.updateStarredFilters }), filtersGrouped.map(group => group.filters
|
|
530
530
|
.filter(filter => !hiddenFilters.includes(filter.filterKey))
|
|
531
531
|
.map(filter => {
|
|
532
532
|
const showMenuAnyway = filterBarConfig.filterHasChanged(filter.filterKey) &&
|
|
@@ -544,7 +544,7 @@ const FilterSelection = ({ filterBarDefinition, filterBarConfig, hiddenFilters =
|
|
|
544
544
|
* The FilterBar component serves as a wrapper for managing filters.
|
|
545
545
|
*/
|
|
546
546
|
const FilterBar = ({ hiddenFilters, className, filterBarDefinition, filterBarConfig, disableCollapse = false, }) => {
|
|
547
|
-
return (jsx("div", { className: `flex ${className}`, "data-testid": `${filterBarConfig.name}-filterbar`, children: jsx(StarredFilters, {
|
|
547
|
+
return (jsx("div", { className: `flex ${className}`, "data-testid": `${filterBarConfig.name}-filterbar`, children: jsx(StarredFilters, { disableCollapse: disableCollapse, filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters }) }));
|
|
548
548
|
};
|
|
549
549
|
|
|
550
550
|
/**
|
|
@@ -600,8 +600,8 @@ const DynamicFilterList = ({ rowCount, keyMapper, labelMapper, prefixMapper, onC
|
|
|
600
600
|
const [t] = useTranslation();
|
|
601
601
|
const parentRef = useRef(null);
|
|
602
602
|
const updatedRowCount = useMemo(() => (showRequestMoreUseSearch ? rowCount + 1 : rowCount), [rowCount, showRequestMoreUseSearch]);
|
|
603
|
-
return (jsx(FilterBody, { limitSize: true, ref: parentRef, children: jsx(VirtualizedList, {
|
|
604
|
-
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),
|
|
603
|
+
return (jsx(FilterBody, { limitSize: true, ref: parentRef, children: jsx(VirtualizedList, { count: updatedRowCount, parentRef: parentRef, rowHeight: 40, children: index => {
|
|
604
|
+
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
605
|
} }) }));
|
|
606
606
|
};
|
|
607
607
|
|
|
@@ -616,7 +616,7 @@ const FilterHeader = ({ filterKey, title, searchEnabled, searchProps, filterHasC
|
|
|
616
616
|
resetIndividualFilterToInitialState(filterKey);
|
|
617
617
|
onResetFilter === null || onResetFilter === void 0 ? void 0 : onResetFilter();
|
|
618
618
|
};
|
|
619
|
-
return (jsx(FilterHeader$1, {
|
|
619
|
+
return (jsx(FilterHeader$1, { dataTestId: `${filterKey}-filter-header`, loading: loading, onReset: handleResetFilter, resetLabel: t("filtersBar.resetFilter"), showReset: filterHasChanged(filterKey), title: title, children: searchEnabled ? (jsx(Search, { autoFocus: true, fieldSize: "small", onChange: e => searchProps.onChange(e.currentTarget.value), placeholder: t("assetFilters.searchPlaceholder"), showBorderWhenNotInFocus: true, suffix: jsx(Text, { size: "small", subtle: true, children: searchProps.count }), value: searchProps.value })) : null }));
|
|
620
620
|
};
|
|
621
621
|
|
|
622
622
|
/**
|
|
@@ -636,7 +636,7 @@ const FilterResults = ({ results, ignoreUndefined, loading, children }) => {
|
|
|
636
636
|
};
|
|
637
637
|
const EmptyResults = ({ loading }) => {
|
|
638
638
|
const [t] = useTranslation();
|
|
639
|
-
return (jsx("div", { className: "grid h-20 w-full place-content-center pl-2 pr-2", "data-testid": "empty-filter-results", children: jsx(Text, {
|
|
639
|
+
return (jsx("div", { className: "grid h-20 w-full place-content-center pl-2 pr-2", "data-testid": "empty-filter-results", children: jsx(Text, { align: "center", italicize: true, subtle: true, children: loading ? t("filtersBar.loading") : t("filtersBar.emptyResults") }) }));
|
|
640
640
|
};
|
|
641
641
|
|
|
642
642
|
/**
|
|
@@ -702,11 +702,11 @@ const DefaultCheckboxFilter = ({ filterDefinition, filterBarActions, options, lo
|
|
|
702
702
|
value: (_a = customSearch === null || customSearch === void 0 ? void 0 : customSearch.value) !== null && _a !== void 0 ? _a : searchText,
|
|
703
703
|
onChange: (_b = customSearch === null || customSearch === void 0 ? void 0 : customSearch.onChange) !== null && _b !== void 0 ? _b : setSearchText,
|
|
704
704
|
count: undefinedCount ? filteredOptions.length - 1 : filteredOptions.length,
|
|
705
|
-
} })), jsx(FilterResults, {
|
|
705
|
+
} })), jsx(FilterResults, { ignoreUndefined: undefinedCount !== null, loading: loading, results: results, children: res => (jsx(DynamicFilterList, { checked: index => filterDefinition.type === "valueName"
|
|
706
706
|
? filterBarActions.objectArrayIncludesValue(filterDefinition.filterKey, res[index].key)
|
|
707
|
-
: filterBarActions.arrayIncludesValue(filterDefinition.filterKey, res[index].key),
|
|
708
|
-
? filterBarActions.objectArrayIncludesValue(filterDefinition.filterKey, (
|
|
709
|
-
: filterBarActions.arrayIncludesValue(filterDefinition.filterKey, (_e = results[undefinedCount.index]) === null || _e === void 0 ? void 0 : _e.
|
|
707
|
+
: filterBarActions.arrayIncludesValue(filterDefinition.filterKey, res[index].key), count: index => res[index].count, keyMapper: index => res[index].key, labelMapper: index => res[index].label, onChange: index => handleClick(res[index]), prefixMapper: index => res[index].prefix, rowCount: undefinedCount ? res.length - 1 : res.length, showRequestMoreUseSearch: showRequestMoreUseSearch, showTooltip: showTooltip, type: "CheckBox" })) }), showUndefinedOptionWithCountAtBottom && undefinedCount ? (jsx(CheckBoxFilterItem, { checked: filterDefinition.type === "valueName"
|
|
708
|
+
? filterBarActions.objectArrayIncludesValue(filterDefinition.filterKey, (_c = results[undefinedCount.index]) === null || _c === void 0 ? void 0 : _c.key)
|
|
709
|
+
: 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: () => handleClick(results[undefinedCount.index]) }, "dynamic-filter-check-box-undefined")) : null] }));
|
|
710
710
|
};
|
|
711
711
|
|
|
712
712
|
const formatToJustDate = (date) => {
|
|
@@ -760,13 +760,13 @@ const DefaultDateRangeFilter = ({ filterDefinition, filterName, value, setValue,
|
|
|
760
760
|
});
|
|
761
761
|
setValue(() => ({ from: fromDateValue, to: toDateValue }));
|
|
762
762
|
};
|
|
763
|
-
return (jsxs(Fragment, { children: [jsx(FilterHeader$1, {
|
|
763
|
+
return (jsxs(Fragment, { children: [jsx(FilterHeader$1, { onReset: reset, resetLabel: t("filtersBar.resetFilter"), showReset: hasSelection, title: filterDefinition.title }), jsxs(FilterBody, { children: [jsx("div", { className: "flex gap-4 px-1", children: jsx(DayRangePicker, { language: "en", onRangeSelect: dateRange => {
|
|
764
764
|
setFromDateValue(formatToJustDate(dateRange === null || dateRange === void 0 ? void 0 : dateRange.from));
|
|
765
765
|
setToDateValue(formatToJustDate(dateRange === null || dateRange === void 0 ? void 0 : dateRange.to));
|
|
766
766
|
}, selectedDays: {
|
|
767
767
|
from: fromDateValue ? new Date(fromDateValue) : undefined,
|
|
768
768
|
to: toDateValue ? new Date(toDateValue) : undefined,
|
|
769
|
-
} }) }), jsx(FilterFooter, { children: jsxs("div", { className: "flex gap-2", children: [jsx(Button, {
|
|
769
|
+
} }) }), jsx(FilterFooter, { children: jsxs("div", { className: "flex gap-2", children: [jsx(Button, { onClick: cancel, size: "small", variant: "secondary", children: t("filtersBar.defaultDateRangeFilters.cancel") }), jsx(Button, { onClick: handleApply, size: "small", children: t("filtersBar.defaultDateRangeFilters.apply") })] }) })] })] }));
|
|
770
770
|
};
|
|
771
771
|
|
|
772
772
|
/**
|
|
@@ -796,7 +796,7 @@ const DefaultMinMaxFilter = ({ filterDefinition, filterName, value, setValue, fi
|
|
|
796
796
|
return realMinValue || realMaxValue ? { min: realMinValue, max: realMaxValue } : {};
|
|
797
797
|
});
|
|
798
798
|
};
|
|
799
|
-
return (jsxs(Fragment, { children: [jsx(FilterHeader$1, {
|
|
799
|
+
return (jsxs(Fragment, { children: [jsx(FilterHeader$1, { onReset: () => filterBarActions.resetIndividualFilterToInitialState(filterDefinition.filterKey), resetLabel: t("filtersBar.resetFilter"), showReset: filterBarActions.filterHasChanged(filterDefinition.filterKey), title: filterDefinition.title }), jsxs(FilterBody, { children: [jsxs("div", { className: "flex gap-4 px-1", children: [jsx(NumberField, { addonAfter: unit, className: "w-40", label: t("filtersBar.defaultMinMaxFilters.min"), max: filterDefinition.type === "minMax" ? filterDefinition.maximumNumber : undefined, min: filterDefinition.type === "minMax" ? filterDefinition.minimumNumber : undefined, onChange: e => setMinValue(Number(e.target.value)), value: minValue === 0 ? "" : minValue !== null && minValue !== void 0 ? minValue : "" }), jsx(NumberField, { addonAfter: unit, className: "w-40", label: t("filtersBar.defaultMinMaxFilters.max"), max: filterDefinition.type === "minMax" ? filterDefinition.maximumNumber : undefined, min: filterDefinition.type === "minMax" ? filterDefinition.minimumNumber : undefined, onChange: e => setMaxValue(Number(e.target.value)), value: maxValue === 0 ? "" : maxValue !== null && maxValue !== void 0 ? maxValue : "" })] }), jsx(FilterFooter, { children: jsx(Button, { onClick: handleApply, size: "small", variant: "ghost", children: t("filtersBar.defaultMinMaxFilters.apply") }) })] })] }));
|
|
800
800
|
};
|
|
801
801
|
|
|
802
802
|
/**
|
|
@@ -824,9 +824,9 @@ const DefaultRadioFilter = ({ filterDefinition, filterBarActions, options, loadi
|
|
|
824
824
|
value: (_b = customSearch === null || customSearch === void 0 ? void 0 : customSearch.value) !== null && _b !== void 0 ? _b : searchText,
|
|
825
825
|
onChange: (_c = customSearch === null || customSearch === void 0 ? void 0 : customSearch.onChange) !== null && _c !== void 0 ? _c : setSearchText,
|
|
826
826
|
count: filteredOptions.length,
|
|
827
|
-
} })), jsx(FilterResults, { results: customSearch ? options : filteredOptions,
|
|
827
|
+
} })), jsx(FilterResults, { loading: loading, results: customSearch ? options : filteredOptions, children: res => (jsx(RadioGroup, { id: "DefaultRadioFilter", onChange: e => {
|
|
828
828
|
handleClick(e.currentTarget.value);
|
|
829
|
-
}, children: jsx(DynamicFilterList, {
|
|
829
|
+
}, value: selectedRadioId, children: jsx(DynamicFilterList, { checked: index => filterBarActions.objectArrayIncludesValue(filterDefinition.filterKey, res[index].key), count: index => res[index].count, keyMapper: index => res[index].key, labelMapper: index => res[index].label, prefixMapper: index => res[index].prefix, rowCount: res.length, showRequestMoreUseSearch: showRequestMoreUseSearch, showTooltip: showTooltip, type: "Radio" }) })) })] }));
|
|
830
830
|
};
|
|
831
831
|
|
|
832
832
|
/**
|