@trackunit/filters-filter-bar 0.0.165 → 0.0.167
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 +3 -2
- package/index.esm.js +4 -3
- package/package.json +1 -1
package/index.cjs.js
CHANGED
|
@@ -517,7 +517,8 @@ const cvaFilterWithoutCollapse = cssClassVarianceUtilities.cvaMerge([], {
|
|
|
517
517
|
const StarredFilters = ({ filterBarDefinition, filterBarConfig, disableCollapse, hiddenFilters = [], }) => {
|
|
518
518
|
const [expanded, setExpanded] = react.useState(false);
|
|
519
519
|
const [t] = useTranslation();
|
|
520
|
-
|
|
520
|
+
const dimensions = reactComponents.useResize();
|
|
521
|
+
return dimensions.width > 768 ? (jsxRuntime.jsx(FilterSelection, { className: cvaFilterWithoutCollapse({ disableCollapse }), filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters })) : (jsxRuntime.jsx(reactComponents.Collapse, { id: "storybook_collapsible", headerClassName: cvaCollapserHeader({ expanded }), className: cvaCollapse({ expanded, disableCollapse }), initialExpanded: expanded, onToggle: () => setExpanded(prev => !prev), label: t("filtersBar.filtersHeading") + (filterBarConfig.filtersHaveBeenApplied === true ? " *" : ""), children: jsxRuntime.jsx(FilterSelection, { filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters, className: "flex" }) }));
|
|
521
522
|
};
|
|
522
523
|
const FilterSelection = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], className, disableCollapse, }) => {
|
|
523
524
|
const hideInFilterBar = react.useMemo(() => {
|
|
@@ -540,7 +541,7 @@ const FilterSelection = ({ filterBarDefinition, filterBarConfig, hiddenFilters =
|
|
|
540
541
|
!filter.showInStarredMenu();
|
|
541
542
|
if (filterBarConfig.starredFilterKeys.includes(filter.filterKey) ||
|
|
542
543
|
showMenuAnyway) {
|
|
543
|
-
return (jsxRuntime.jsx(react.Fragment, { children: jsxRuntime.jsx(Filter, { filter: filter, filterBarActions: filterBarConfig, filterState: { values: filterBarConfig.values, setters: filterBarConfig.setters } },
|
|
544
|
+
return (jsxRuntime.jsx(react.Fragment, { children: jsxRuntime.jsx(Filter, { filter: filter, filterBarActions: filterBarConfig, filterState: { values: filterBarConfig.values, setters: filterBarConfig.setters } }, `filter-${filter.filterKey}`) }, filter.filterKey));
|
|
544
545
|
}
|
|
545
546
|
return null;
|
|
546
547
|
})), jsxRuntime.jsx(ResetFiltersButton, { filtersHaveBeenApplied: filterBarConfig.filtersHaveBeenApplied, isFilterIncludedByKey: filterBarConfig.isFilterIncludedByKey, resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })] }));
|
package/index.esm.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
|
|
3
3
|
import { cvaMerge } from '@trackunit/css-class-variance-utilities';
|
|
4
|
-
import { Button, Popover, PopoverTrigger, IconButton, Icon, PopoverContent, MenuList, Text, StarButton, Collapse, DayRangePicker } from '@trackunit/react-components';
|
|
4
|
+
import { Button, Popover, PopoverTrigger, IconButton, Icon, PopoverContent, MenuList, Text, StarButton, useResize, Collapse, DayRangePicker } from '@trackunit/react-components';
|
|
5
5
|
import { truthy, capitalize as capitalize$1, nonNullable } from '@trackunit/shared-utils';
|
|
6
6
|
import { useMemo, useState, Fragment as Fragment$1, useCallback, useEffect, useRef } from 'react';
|
|
7
7
|
import { twMerge } from 'tailwind-merge';
|
|
@@ -509,7 +509,8 @@ const cvaFilterWithoutCollapse = cvaMerge([], {
|
|
|
509
509
|
const StarredFilters = ({ filterBarDefinition, filterBarConfig, disableCollapse, hiddenFilters = [], }) => {
|
|
510
510
|
const [expanded, setExpanded] = useState(false);
|
|
511
511
|
const [t] = useTranslation();
|
|
512
|
-
|
|
512
|
+
const dimensions = useResize();
|
|
513
|
+
return dimensions.width > 768 ? (jsx(FilterSelection, { className: cvaFilterWithoutCollapse({ disableCollapse }), filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters })) : (jsx(Collapse, { id: "storybook_collapsible", headerClassName: cvaCollapserHeader({ expanded }), className: cvaCollapse({ expanded, disableCollapse }), initialExpanded: expanded, onToggle: () => setExpanded(prev => !prev), label: t("filtersBar.filtersHeading") + (filterBarConfig.filtersHaveBeenApplied === true ? " *" : ""), children: jsx(FilterSelection, { filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters, className: "flex" }) }));
|
|
513
514
|
};
|
|
514
515
|
const FilterSelection = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], className, disableCollapse, }) => {
|
|
515
516
|
const hideInFilterBar = useMemo(() => {
|
|
@@ -532,7 +533,7 @@ const FilterSelection = ({ filterBarDefinition, filterBarConfig, hiddenFilters =
|
|
|
532
533
|
!filter.showInStarredMenu();
|
|
533
534
|
if (filterBarConfig.starredFilterKeys.includes(filter.filterKey) ||
|
|
534
535
|
showMenuAnyway) {
|
|
535
|
-
return (jsx(Fragment$1, { children: jsx(Filter, { filter: filter, filterBarActions: filterBarConfig, filterState: { values: filterBarConfig.values, setters: filterBarConfig.setters } },
|
|
536
|
+
return (jsx(Fragment$1, { children: jsx(Filter, { filter: filter, filterBarActions: filterBarConfig, filterState: { values: filterBarConfig.values, setters: filterBarConfig.setters } }, `filter-${filter.filterKey}`) }, filter.filterKey));
|
|
536
537
|
}
|
|
537
538
|
return null;
|
|
538
539
|
})), jsx(ResetFiltersButton, { filtersHaveBeenApplied: filterBarConfig.filtersHaveBeenApplied, isFilterIncludedByKey: filterBarConfig.isFilterIncludedByKey, resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })] }));
|