@trackunit/filters-filter-bar 1.8.13 → 1.8.18
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 +5 -5
- package/index.esm.js +5 -5
- package/package.json +13 -13
package/index.cjs.js
CHANGED
|
@@ -510,7 +510,7 @@ const DynamicFilterList = ({ rowCount, keyMapper, labelMapper, onChange, checked
|
|
|
510
510
|
index,
|
|
511
511
|
};
|
|
512
512
|
}, separator: "none", children: (listItemProps, item, index) => {
|
|
513
|
-
return (jsxRuntime.jsx("li", { ...listItemProps, className: tailwindMerge.twMerge(listItemProps.className, "[&:not(:last-child)]:pb-0.5"), children: item.type === "search-more" ? (jsxRuntime.jsxs("div", { className: "p-3 pt-2", children: [jsxRuntime.jsx("span", { className: "text-sm text-
|
|
513
|
+
return (jsxRuntime.jsx("li", { ...listItemProps, className: tailwindMerge.twMerge(listItemProps.className, "[&:not(:last-child)]:pb-0.5"), children: item.type === "search-more" ? (jsxRuntime.jsxs("div", { className: "p-3 pt-2", children: [jsxRuntime.jsx("span", { className: "text-sm text-neutral-600", children: t("filter.more.options.if.you.search.title", { count: rowCount }) }), jsxRuntime.jsx("br", {}), jsxRuntime.jsx("span", { className: "text-sm italic text-neutral-400", children: t("filter.more.options.if.you.search.description") })] })) : type === "Radio" ? (jsxRuntime.jsx(reactFilterComponents.RadioFilterItem, { dataTestId: "dynamic-filter-radio-" + item.key, itemCount: item.itemCount, label: item.label, selected: item.isChecked, value: item.key }, item.key)) : (jsxRuntime.jsx(reactFilterComponents.CheckBoxFilterItem, { checked: item.isChecked, dataTestId: "dynamic-filter-check-box-" + item.key, itemCount: item.itemCount, label: item.label, name: item.key, onChange: () => {
|
|
514
514
|
onChange?.(item.index);
|
|
515
515
|
} }, item.key)) }, index));
|
|
516
516
|
} }) }));
|
|
@@ -906,7 +906,7 @@ const useFiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters =
|
|
|
906
906
|
const GroupedFiltersList = ({ filterBarConfig, filtersGrouped, className, dataTestId = "grouped-filters-list", }) => {
|
|
907
907
|
return (jsxRuntime.jsx("div", { className: className, "data-testid": dataTestId, role: "menu", children: filtersGrouped.map((group, idx) => {
|
|
908
908
|
const isLastGroup = idx === filtersGrouped.length - 1;
|
|
909
|
-
return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [jsxRuntime.jsxs("div", { children: [filtersGrouped.length > 1 && (jsxRuntime.jsx(reactComponents.Text, { className: "
|
|
909
|
+
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", dataTestId: `${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));
|
|
910
910
|
}) }));
|
|
911
911
|
};
|
|
912
912
|
|
|
@@ -927,7 +927,7 @@ const ResetFiltersButton = ({ resetFiltersToInitialState, dataTestId, className,
|
|
|
927
927
|
*/
|
|
928
928
|
const FiltersMenuContent = ({ filterBarConfig, setShowCustomFilters, setSearchText, searchText, searchResultsGrouped, filtersToShowGrouped, removeCustomFieldsGroup, hasCustomFields, appliedCustomFields, showCustomFilters, filterBarDefinitionCount, }) => {
|
|
929
929
|
const [t] = useTranslation();
|
|
930
|
-
return (jsxRuntime.jsxs(reactComponents.Card, { className: "max-h-[min(600px,_calc(100dvh-32px))] w-[300px] overflow-y-hidden", dataTestId: "starred-filters-menu-popover", id: "starred-filters-menu-popover", tabIndex: 0, children: [jsxRuntime.jsxs("div", { className: " flex-col gap-1 p-1", children: [filterBarDefinitionCount > 5 && (jsxRuntime.jsx(reactFormComponents.Search, { autoFocus: true, dataTestId: "starred-filters-menu-search", fieldSize: "small", id: "search-filters-list", onChange: e => setSearchText(e.currentTarget.value), onClear: () => setSearchText(""), placeholder: t("filtersBar.searchFiltersPlaceholder"), value: searchText })), jsxRuntime.jsxs("div", { className: "flex h-7 items-center justify-between gap-1 px-3", children: [jsxRuntime.jsx(reactComponents.Text, { className: "text-
|
|
930
|
+
return (jsxRuntime.jsxs(reactComponents.Card, { className: "max-h-[min(600px,_calc(100dvh-32px))] w-[300px] overflow-y-hidden", dataTestId: "starred-filters-menu-popover", id: "starred-filters-menu-popover", tabIndex: 0, children: [jsxRuntime.jsxs("div", { className: " flex-col gap-1 p-1", children: [filterBarDefinitionCount > 5 && (jsxRuntime.jsx(reactFormComponents.Search, { autoFocus: true, dataTestId: "starred-filters-menu-search", fieldSize: "small", id: "search-filters-list", onChange: e => setSearchText(e.currentTarget.value), onClear: () => setSearchText(""), placeholder: t("filtersBar.searchFiltersPlaceholder"), value: searchText })), jsxRuntime.jsxs("div", { className: "flex h-7 items-center justify-between gap-1 px-3", children: [jsxRuntime.jsx(reactComponents.Text, { className: "text-neutral-400", size: "small", children: jsxRuntime.jsx(FiltersAppliedCountLabel, { filterBarConfig: filterBarConfig }) }), filterBarConfig.appliedFilterKeys().length > 0 ? (jsxRuntime.jsx(ResetFiltersButton, { resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })) : null] })] }), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(reactComponents.CardBody, { className: "gap-1 p-1", density: "none", disableGap: true, children: [jsxRuntime.jsx(GroupedFiltersList, { className: "flex flex-col gap-1", filterBarConfig: filterBarConfig, filtersGrouped: searchText
|
|
931
931
|
? searchResultsGrouped
|
|
932
932
|
: showCustomFilters
|
|
933
933
|
? filtersToShowGrouped
|
|
@@ -935,7 +935,7 @@ const FiltersMenuContent = ({ filterBarConfig, setShowCustomFilters, setSearchTe
|
|
|
935
935
|
setShowCustomFilters(true);
|
|
936
936
|
} })) : null] })] }));
|
|
937
937
|
};
|
|
938
|
-
const Separator = () => jsxRuntime.jsx("hr", { className: "border-
|
|
938
|
+
const Separator = () => jsxRuntime.jsx("hr", { className: "border-neutral-200", role: "separator" });
|
|
939
939
|
const FiltersAppliedCountLabel = ({ filterBarConfig, }) => {
|
|
940
940
|
const [t] = useTranslation();
|
|
941
941
|
// Count actual applied values, not just filter keys - same logic as badge
|
|
@@ -959,7 +959,7 @@ const FiltersAppliedCountLabel = ({ filterBarConfig, }) => {
|
|
|
959
959
|
};
|
|
960
960
|
const CustomFieldsHiddenGroup = ({ appliedCustomFields, filterBarConfig, onShow, }) => {
|
|
961
961
|
const [t] = useTranslation();
|
|
962
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(reactComponents.Button, { "aria-controls": "filters-list", className: "text-primary-600 w-full justify-between px-3", onClick: onShow, prefix: jsxRuntime.jsx(reactComponents.Text, { className: "text-
|
|
962
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(reactComponents.Button, { "aria-controls": "filters-list", className: "text-primary-600 w-full justify-between px-3", onClick: onShow, prefix: jsxRuntime.jsx(reactComponents.Text, { className: "text-neutral-400", size: "small", uppercase: true, weight: "bold", children: t("filtersBar.groups.CUSTOM_FIELDS") }), size: "small", variant: "ghost-neutral", children: t("filtersBar.showAll") }), appliedCustomFields.length > 0 ? (jsxRuntime.jsx("ul", { "aria-label": "Visible custom fields", "data-testid": "applied-custom-fields-list", children: jsxRuntime.jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: appliedCustomFields, visualStyle: "list-item" }) })) : null] })] }));
|
|
963
963
|
};
|
|
964
964
|
|
|
965
965
|
/**
|
package/index.esm.js
CHANGED
|
@@ -508,7 +508,7 @@ const DynamicFilterList = ({ rowCount, keyMapper, labelMapper, onChange, checked
|
|
|
508
508
|
index,
|
|
509
509
|
};
|
|
510
510
|
}, separator: "none", children: (listItemProps, item, index) => {
|
|
511
|
-
return (jsx("li", { ...listItemProps, className: twMerge(listItemProps.className, "[&:not(:last-child)]:pb-0.5"), children: item.type === "search-more" ? (jsxs("div", { className: "p-3 pt-2", children: [jsx("span", { className: "text-sm text-
|
|
511
|
+
return (jsx("li", { ...listItemProps, className: twMerge(listItemProps.className, "[&:not(:last-child)]:pb-0.5"), children: item.type === "search-more" ? (jsxs("div", { className: "p-3 pt-2", children: [jsx("span", { className: "text-sm text-neutral-600", children: t("filter.more.options.if.you.search.title", { count: rowCount }) }), jsx("br", {}), jsx("span", { className: "text-sm italic text-neutral-400", children: t("filter.more.options.if.you.search.description") })] })) : type === "Radio" ? (jsx(RadioFilterItem, { dataTestId: "dynamic-filter-radio-" + item.key, itemCount: item.itemCount, label: item.label, selected: item.isChecked, value: item.key }, item.key)) : (jsx(CheckBoxFilterItem, { checked: item.isChecked, dataTestId: "dynamic-filter-check-box-" + item.key, itemCount: item.itemCount, label: item.label, name: item.key, onChange: () => {
|
|
512
512
|
onChange?.(item.index);
|
|
513
513
|
} }, item.key)) }, index));
|
|
514
514
|
} }) }));
|
|
@@ -904,7 +904,7 @@ const useFiltersMenu = ({ filterBarDefinition, filterBarConfig, hiddenFilters =
|
|
|
904
904
|
const GroupedFiltersList = ({ filterBarConfig, filtersGrouped, className, dataTestId = "grouped-filters-list", }) => {
|
|
905
905
|
return (jsx("div", { className: className, "data-testid": dataTestId, role: "menu", children: filtersGrouped.map((group, idx) => {
|
|
906
906
|
const isLastGroup = idx === filtersGrouped.length - 1;
|
|
907
|
-
return (jsxs("div", { className: "flex flex-col gap-1", children: [jsxs("div", { children: [filtersGrouped.length > 1 && (jsx(Text, { className: "
|
|
907
|
+
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", dataTestId: `${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));
|
|
908
908
|
}) }));
|
|
909
909
|
};
|
|
910
910
|
|
|
@@ -925,7 +925,7 @@ const ResetFiltersButton = ({ resetFiltersToInitialState, dataTestId, className,
|
|
|
925
925
|
*/
|
|
926
926
|
const FiltersMenuContent = ({ filterBarConfig, setShowCustomFilters, setSearchText, searchText, searchResultsGrouped, filtersToShowGrouped, removeCustomFieldsGroup, hasCustomFields, appliedCustomFields, showCustomFilters, filterBarDefinitionCount, }) => {
|
|
927
927
|
const [t] = useTranslation();
|
|
928
|
-
return (jsxs(Card, { className: "max-h-[min(600px,_calc(100dvh-32px))] w-[300px] overflow-y-hidden", dataTestId: "starred-filters-menu-popover", id: "starred-filters-menu-popover", tabIndex: 0, children: [jsxs("div", { className: " flex-col gap-1 p-1", children: [filterBarDefinitionCount > 5 && (jsx(Search, { autoFocus: true, dataTestId: "starred-filters-menu-search", fieldSize: "small", id: "search-filters-list", onChange: e => setSearchText(e.currentTarget.value), onClear: () => setSearchText(""), placeholder: t("filtersBar.searchFiltersPlaceholder"), value: searchText })), jsxs("div", { className: "flex h-7 items-center justify-between gap-1 px-3", children: [jsx(Text, { className: "text-
|
|
928
|
+
return (jsxs(Card, { className: "max-h-[min(600px,_calc(100dvh-32px))] w-[300px] overflow-y-hidden", dataTestId: "starred-filters-menu-popover", id: "starred-filters-menu-popover", tabIndex: 0, children: [jsxs("div", { className: " flex-col gap-1 p-1", children: [filterBarDefinitionCount > 5 && (jsx(Search, { autoFocus: true, dataTestId: "starred-filters-menu-search", fieldSize: "small", id: "search-filters-list", onChange: e => setSearchText(e.currentTarget.value), onClear: () => setSearchText(""), placeholder: t("filtersBar.searchFiltersPlaceholder"), value: searchText })), jsxs("div", { className: "flex h-7 items-center justify-between gap-1 px-3", children: [jsx(Text, { className: "text-neutral-400", size: "small", children: jsx(FiltersAppliedCountLabel, { filterBarConfig: filterBarConfig }) }), filterBarConfig.appliedFilterKeys().length > 0 ? (jsx(ResetFiltersButton, { resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })) : null] })] }), jsx(Separator, {}), jsxs(CardBody, { className: "gap-1 p-1", density: "none", disableGap: true, children: [jsx(GroupedFiltersList, { className: "flex flex-col gap-1", filterBarConfig: filterBarConfig, filtersGrouped: searchText
|
|
929
929
|
? searchResultsGrouped
|
|
930
930
|
: showCustomFilters
|
|
931
931
|
? filtersToShowGrouped
|
|
@@ -933,7 +933,7 @@ const FiltersMenuContent = ({ filterBarConfig, setShowCustomFilters, setSearchTe
|
|
|
933
933
|
setShowCustomFilters(true);
|
|
934
934
|
} })) : null] })] }));
|
|
935
935
|
};
|
|
936
|
-
const Separator = () => jsx("hr", { className: "border-
|
|
936
|
+
const Separator = () => jsx("hr", { className: "border-neutral-200", role: "separator" });
|
|
937
937
|
const FiltersAppliedCountLabel = ({ filterBarConfig, }) => {
|
|
938
938
|
const [t] = useTranslation();
|
|
939
939
|
// Count actual applied values, not just filter keys - same logic as badge
|
|
@@ -957,7 +957,7 @@ const FiltersAppliedCountLabel = ({ filterBarConfig, }) => {
|
|
|
957
957
|
};
|
|
958
958
|
const CustomFieldsHiddenGroup = ({ appliedCustomFields, filterBarConfig, onShow, }) => {
|
|
959
959
|
const [t] = useTranslation();
|
|
960
|
-
return (jsxs(Fragment, { children: [jsx(Separator, {}), jsxs("div", { children: [jsx(Button, { "aria-controls": "filters-list", className: "text-primary-600 w-full justify-between px-3", onClick: onShow, prefix: jsx(Text, { className: "text-
|
|
960
|
+
return (jsxs(Fragment, { children: [jsx(Separator, {}), jsxs("div", { children: [jsx(Button, { "aria-controls": "filters-list", className: "text-primary-600 w-full justify-between px-3", onClick: onShow, prefix: jsx(Text, { className: "text-neutral-400", size: "small", uppercase: true, weight: "bold", children: t("filtersBar.groups.CUSTOM_FIELDS") }), size: "small", variant: "ghost-neutral", children: t("filtersBar.showAll") }), appliedCustomFields.length > 0 ? (jsx("ul", { "aria-label": "Visible custom fields", "data-testid": "applied-custom-fields-list", children: jsx(FiltersRenderer, { filterBarConfig: filterBarConfig, filters: appliedCustomFields, visualStyle: "list-item" }) })) : null] })] }));
|
|
961
961
|
};
|
|
962
962
|
|
|
963
963
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trackunit/filters-filter-bar",
|
|
3
|
-
"version": "1.8.
|
|
3
|
+
"version": "1.8.18",
|
|
4
4
|
"repository": "https://github.com/Trackunit/manager",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"engines": {
|
|
@@ -13,18 +13,18 @@
|
|
|
13
13
|
"tailwind-merge": "^2.0.0",
|
|
14
14
|
"string-ts": "^2.0.0",
|
|
15
15
|
"zod": "^3.23.8",
|
|
16
|
-
"@trackunit/iris-app-api": "1.7.
|
|
17
|
-
"@trackunit/react-core-hooks": "1.7.
|
|
18
|
-
"@trackunit/react-filter-components": "1.7.
|
|
19
|
-
"@trackunit/react-date-and-time-components": "1.10.
|
|
20
|
-
"@trackunit/shared-utils": "1.9.
|
|
21
|
-
"@trackunit/react-form-components": "1.8.
|
|
22
|
-
"@trackunit/react-core-contexts-api": "1.8.
|
|
23
|
-
"@trackunit/geo-json-utils": "1.7.
|
|
24
|
-
"@trackunit/i18n-library-translation": "1.7.
|
|
25
|
-
"@trackunit/css-class-variance-utilities": "1.7.
|
|
26
|
-
"@trackunit/react-components": "1.9.
|
|
27
|
-
"@trackunit/react-test-setup": "1.4.
|
|
16
|
+
"@trackunit/iris-app-api": "1.7.11",
|
|
17
|
+
"@trackunit/react-core-hooks": "1.7.13",
|
|
18
|
+
"@trackunit/react-filter-components": "1.7.18",
|
|
19
|
+
"@trackunit/react-date-and-time-components": "1.10.18",
|
|
20
|
+
"@trackunit/shared-utils": "1.9.10",
|
|
21
|
+
"@trackunit/react-form-components": "1.8.18",
|
|
22
|
+
"@trackunit/react-core-contexts-api": "1.8.12",
|
|
23
|
+
"@trackunit/geo-json-utils": "1.7.10",
|
|
24
|
+
"@trackunit/i18n-library-translation": "1.7.14",
|
|
25
|
+
"@trackunit/css-class-variance-utilities": "1.7.10",
|
|
26
|
+
"@trackunit/react-components": "1.9.18",
|
|
27
|
+
"@trackunit/react-test-setup": "1.4.10",
|
|
28
28
|
"@tanstack/react-router": "1.114.29"
|
|
29
29
|
},
|
|
30
30
|
"module": "./index.esm.js",
|