@trackunit/filters-filter-bar 1.3.106 → 1.3.109

package/index.cjs.js

@@ -1047,7 +1047,7 @@ const StarredFiltersMenu = ({ filterBarDefinition, updateStarredFilters, starred
  * @template TFilterBarDefinition - The type representing the filter bar definition.
  * @returns {ReactElement} - Returns the StarredFilters component.
  */
-const StarredFilters = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], compact, dataTestId, className, }) => {
+const StarredFilters = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], compact, dataTestId, className, title, }) => {
     const [t] = useTranslation();
     const { isLg } = reactComponents.useViewportBreakpoints();
     const isCompactMode = react.useMemo(() => compact ?? !isLg, [compact, isLg]);
@@ -1081,7 +1081,7 @@ const StarredFilters = ({ filterBarDefinition, filterBarConfig, hiddenFilters =
     }, [filterBarConfig, filtersGrouped]);
     return (jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex flex-wrap items-center gap-2", className), "data-testid": dataTestId, children: [jsxRuntime.jsx(reactComponents.Popover, { placement: "bottom-start", children: modalState => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx("div", { "data-testid": "starred-filters-menu-trigger", children: jsxRuntime.jsxs(reactComponents.Tooltip, { disabled: !isCompactMode || modalState.isOpen, label: jsxRuntime.jsx(FilterButtonTooltipLabel, { filterBarConfig: filterBarConfig }), children: [jsxRuntime.jsx(reactComponents.Button, { className: "@xs:flex hidden", prefix: jsxRuntime.jsx(reactComponents.Icon, { color: filterBarConfig.appliedFilterKeys().length > 0 ? "primary" : undefined, name: "Funnel", size: "small" }), size: "small", suffix: isCompactMode && filterBarConfig.appliedFilterKeys().length > 0
                                                 ? `(${filterBarConfig.appliedFilterKeys().length})`
-                                                : undefined, variant: "secondary", children: t("filtersBar.filtersHeading") }), jsxRuntime.jsx(reactComponents.IconButton, { className: "@xs:hidden", icon: jsxRuntime.jsx(reactComponents.Icon, { color: filterBarConfig.appliedFilterKeys().length > 0 ? "primary" : undefined, name: "Funnel", size: "small" }), size: "small", variant: "secondary" })] }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { cellPadding: 100, children: jsxRuntime.jsxs(reactComponents.Card, { className: "max-h-[min(600px,_calc(100dvh-32px))] overflow-hidden sm:w-[350px]", children: [filtersToShow.length > 0 ? (jsxRuntime.jsx(reactComponents.CardBody, { density: "dense", children: jsxRuntime.jsx("div", { className: "flex h-full min-w-min flex-col gap-2", children: jsxRuntime.jsx(FiltersList, { filterBarConfig: filterBarConfig, filters: filtersToShow }) }) })) : null, jsxRuntime.jsxs(reactComponents.CardFooter, { className: filtersToShow.length === 0 ? "border-none" : undefined, density: "dense", children: [jsxRuntime.jsx(StarredFiltersMenu, { className: "mr-auto", filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters, starredFilterKeys: filterBarConfig.starredFilterKeys, updateStarredFilters: filterBarConfig.updateStarredFilters }), !isCompactMode ? null : (jsxRuntime.jsx(ResetFiltersButton, { filtersHaveBeenApplied: filterBarConfig.appliedFilterKeys().length > 0, resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState }))] })] }) })] })) }), showDirectlyFilters.length > 0 ? (jsxRuntime.jsx(FiltersList, { filterBarConfig: filterBarConfig, filters: showDirectlyFilters })) : null, !isCompactMode ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [appliedFilters.filter(filter => !filter.showDirectly).length > 0 ? (jsxRuntime.jsx("div", { className: "h-4 w-[1px] bg-slate-300" })) : null, jsxRuntime.jsx(FiltersList, { filterBarConfig: filterBarConfig, filters: appliedFilters }), jsxRuntime.jsx(ResetFiltersButton, { filtersHaveBeenApplied: filterBarConfig.appliedFilterKeys().length > 0, resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })] })) : null] }));
+                                                : undefined, variant: "secondary", children: title ? title : t("filtersBar.filtersHeading") }), jsxRuntime.jsx(reactComponents.IconButton, { className: "@xs:hidden", icon: jsxRuntime.jsx(reactComponents.Icon, { color: filterBarConfig.appliedFilterKeys().length > 0 ? "primary" : undefined, name: "Funnel", size: "small" }), size: "small", variant: "secondary" })] }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { cellPadding: 100, children: jsxRuntime.jsxs(reactComponents.Card, { className: "max-h-[min(600px,_calc(100dvh-32px))] overflow-hidden sm:w-[350px]", children: [filtersToShow.length > 0 ? (jsxRuntime.jsx(reactComponents.CardBody, { density: "dense", children: jsxRuntime.jsx("div", { className: "flex h-full min-w-min flex-col gap-2", children: jsxRuntime.jsx(FiltersList, { filterBarConfig: filterBarConfig, filters: filtersToShow }) }) })) : null, jsxRuntime.jsxs(reactComponents.CardFooter, { className: filtersToShow.length === 0 ? "border-none" : undefined, density: "dense", children: [jsxRuntime.jsx(StarredFiltersMenu, { className: "mr-auto", filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters, starredFilterKeys: filterBarConfig.starredFilterKeys, updateStarredFilters: filterBarConfig.updateStarredFilters }), !isCompactMode ? null : (jsxRuntime.jsx(ResetFiltersButton, { filtersHaveBeenApplied: filterBarConfig.appliedFilterKeys().length > 0, resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState }))] })] }) })] })) }), showDirectlyFilters.length > 0 ? (jsxRuntime.jsx(FiltersList, { filterBarConfig: filterBarConfig, filters: showDirectlyFilters })) : null, !isCompactMode ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [appliedFilters.filter(filter => !filter.showDirectly).length > 0 ? (jsxRuntime.jsx("div", { className: "h-4 w-[1px] bg-slate-300" })) : null, jsxRuntime.jsx(FiltersList, { filterBarConfig: filterBarConfig, filters: appliedFilters }), jsxRuntime.jsx(ResetFiltersButton, { filtersHaveBeenApplied: filterBarConfig.appliedFilterKeys().length > 0, resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })] })) : null] }));
 };
 const FiltersList = ({ filters, filterBarConfig }) => {
     return filters.length === 0
@@ -1109,8 +1109,8 @@ const FilterButtonTooltipLabel = ({ filterBarConfig, }) => {
 /**
  * The FilterBar component serves as a wrapper for managing filters.
  */
-const FilterBar = ({ hiddenFilters, className, filterBarDefinition, filterBarConfig, compact, }) => {
-    return (jsxRuntime.jsx(StarredFilters, { className: className, compact: compact, dataTestId: `${filterBarConfig.name}-filterbar`, filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters }));
+const FilterBar = ({ hiddenFilters, className, filterBarDefinition, filterBarConfig, compact, title, }) => {
+    return (jsxRuntime.jsx(StarredFilters, { className: className, compact: compact, dataTestId: `${filterBarConfig.name}-filterbar`, filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters, title: title }));
 };
 
 // Can't import jest.fn so must define a function that does nothing but mimics the jest.fn

package/index.esm.js

@@ -1045,7 +1045,7 @@ const StarredFiltersMenu = ({ filterBarDefinition, updateStarredFilters, starred
  * @template TFilterBarDefinition - The type representing the filter bar definition.
  * @returns {ReactElement} - Returns the StarredFilters component.
  */
-const StarredFilters = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], compact, dataTestId, className, }) => {
+const StarredFilters = ({ filterBarDefinition, filterBarConfig, hiddenFilters = [], compact, dataTestId, className, title, }) => {
     const [t] = useTranslation();
     const { isLg } = useViewportBreakpoints();
     const isCompactMode = useMemo(() => compact ?? !isLg, [compact, isLg]);
@@ -1079,7 +1079,7 @@ const StarredFilters = ({ filterBarDefinition, filterBarConfig, hiddenFilters =
     }, [filterBarConfig, filtersGrouped]);
     return (jsxs("div", { className: twMerge("flex flex-wrap items-center gap-2", className), "data-testid": dataTestId, children: [jsx(Popover, { placement: "bottom-start", children: modalState => (jsxs(Fragment, { children: [jsx(PopoverTrigger, { children: jsx("div", { "data-testid": "starred-filters-menu-trigger", children: jsxs(Tooltip, { disabled: !isCompactMode || modalState.isOpen, label: jsx(FilterButtonTooltipLabel, { filterBarConfig: filterBarConfig }), children: [jsx(Button, { className: "@xs:flex hidden", prefix: jsx(Icon, { color: filterBarConfig.appliedFilterKeys().length > 0 ? "primary" : undefined, name: "Funnel", size: "small" }), size: "small", suffix: isCompactMode && filterBarConfig.appliedFilterKeys().length > 0
                                                 ? `(${filterBarConfig.appliedFilterKeys().length})`
-                                                : undefined, variant: "secondary", children: t("filtersBar.filtersHeading") }), jsx(IconButton, { className: "@xs:hidden", icon: jsx(Icon, { color: filterBarConfig.appliedFilterKeys().length > 0 ? "primary" : undefined, name: "Funnel", size: "small" }), size: "small", variant: "secondary" })] }) }) }), jsx(PopoverContent, { cellPadding: 100, children: jsxs(Card, { className: "max-h-[min(600px,_calc(100dvh-32px))] overflow-hidden sm:w-[350px]", children: [filtersToShow.length > 0 ? (jsx(CardBody, { density: "dense", children: jsx("div", { className: "flex h-full min-w-min flex-col gap-2", children: jsx(FiltersList, { filterBarConfig: filterBarConfig, filters: filtersToShow }) }) })) : null, jsxs(CardFooter, { className: filtersToShow.length === 0 ? "border-none" : undefined, density: "dense", children: [jsx(StarredFiltersMenu, { className: "mr-auto", filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters, starredFilterKeys: filterBarConfig.starredFilterKeys, updateStarredFilters: filterBarConfig.updateStarredFilters }), !isCompactMode ? null : (jsx(ResetFiltersButton, { filtersHaveBeenApplied: filterBarConfig.appliedFilterKeys().length > 0, resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState }))] })] }) })] })) }), showDirectlyFilters.length > 0 ? (jsx(FiltersList, { filterBarConfig: filterBarConfig, filters: showDirectlyFilters })) : null, !isCompactMode ? (jsxs(Fragment, { children: [appliedFilters.filter(filter => !filter.showDirectly).length > 0 ? (jsx("div", { className: "h-4 w-[1px] bg-slate-300" })) : null, jsx(FiltersList, { filterBarConfig: filterBarConfig, filters: appliedFilters }), jsx(ResetFiltersButton, { filtersHaveBeenApplied: filterBarConfig.appliedFilterKeys().length > 0, resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })] })) : null] }));
+                                                : undefined, variant: "secondary", children: title ? title : t("filtersBar.filtersHeading") }), jsx(IconButton, { className: "@xs:hidden", icon: jsx(Icon, { color: filterBarConfig.appliedFilterKeys().length > 0 ? "primary" : undefined, name: "Funnel", size: "small" }), size: "small", variant: "secondary" })] }) }) }), jsx(PopoverContent, { cellPadding: 100, children: jsxs(Card, { className: "max-h-[min(600px,_calc(100dvh-32px))] overflow-hidden sm:w-[350px]", children: [filtersToShow.length > 0 ? (jsx(CardBody, { density: "dense", children: jsx("div", { className: "flex h-full min-w-min flex-col gap-2", children: jsx(FiltersList, { filterBarConfig: filterBarConfig, filters: filtersToShow }) }) })) : null, jsxs(CardFooter, { className: filtersToShow.length === 0 ? "border-none" : undefined, density: "dense", children: [jsx(StarredFiltersMenu, { className: "mr-auto", filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters, starredFilterKeys: filterBarConfig.starredFilterKeys, updateStarredFilters: filterBarConfig.updateStarredFilters }), !isCompactMode ? null : (jsx(ResetFiltersButton, { filtersHaveBeenApplied: filterBarConfig.appliedFilterKeys().length > 0, resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState }))] })] }) })] })) }), showDirectlyFilters.length > 0 ? (jsx(FiltersList, { filterBarConfig: filterBarConfig, filters: showDirectlyFilters })) : null, !isCompactMode ? (jsxs(Fragment, { children: [appliedFilters.filter(filter => !filter.showDirectly).length > 0 ? (jsx("div", { className: "h-4 w-[1px] bg-slate-300" })) : null, jsx(FiltersList, { filterBarConfig: filterBarConfig, filters: appliedFilters }), jsx(ResetFiltersButton, { filtersHaveBeenApplied: filterBarConfig.appliedFilterKeys().length > 0, resetFiltersToInitialState: filterBarConfig.resetFiltersToInitialState })] })) : null] }));
 };
 const FiltersList = ({ filters, filterBarConfig }) => {
     return filters.length === 0
@@ -1107,8 +1107,8 @@ const FilterButtonTooltipLabel = ({ filterBarConfig, }) => {
 /**
  * The FilterBar component serves as a wrapper for managing filters.
  */
-const FilterBar = ({ hiddenFilters, className, filterBarDefinition, filterBarConfig, compact, }) => {
-    return (jsx(StarredFilters, { className: className, compact: compact, dataTestId: `${filterBarConfig.name}-filterbar`, filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters }));
+const FilterBar = ({ hiddenFilters, className, filterBarDefinition, filterBarConfig, compact, title, }) => {
+    return (jsx(StarredFilters, { className: className, compact: compact, dataTestId: `${filterBarConfig.name}-filterbar`, filterBarConfig: filterBarConfig, filterBarDefinition: filterBarDefinition, hiddenFilters: hiddenFilters, title: title }));
 };
 
 // Can't import jest.fn so must define a function that does nothing but mimics the jest.fn

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/filters-filter-bar",
-  "version": "1.3.106",
+  "version": "1.3.109",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -14,16 +14,16 @@
     "tailwind-merge": "^2.0.0",
     "string-ts": "^2.0.0",
     "zod": "3.22.4",
-    "@trackunit/react-components": "1.4.78",
-    "@trackunit/react-core-hooks": "1.3.67",
-    "@trackunit/react-filter-components": "1.3.89",
-    "@trackunit/react-date-and-time-components": "1.3.87",
-    "@trackunit/shared-utils": "1.5.64",
-    "@trackunit/react-form-components": "1.3.89",
-    "@trackunit/react-core-contexts-api": "1.4.65",
-    "@trackunit/geo-json-utils": "1.3.65",
-    "@trackunit/i18n-library-translation": "1.3.69",
-    "@trackunit/css-class-variance-utilities": "1.3.64"
+    "@trackunit/react-components": "1.4.81",
+    "@trackunit/react-core-hooks": "1.3.70",
+    "@trackunit/react-filter-components": "1.3.92",
+    "@trackunit/react-date-and-time-components": "1.3.90",
+    "@trackunit/shared-utils": "1.5.67",
+    "@trackunit/react-form-components": "1.3.92",
+    "@trackunit/react-core-contexts-api": "1.4.68",
+    "@trackunit/geo-json-utils": "1.3.68",
+    "@trackunit/i18n-library-translation": "1.3.72",
+    "@trackunit/css-class-variance-utilities": "1.3.67"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/lib/FilterBar.d.ts

@@ -22,9 +22,13 @@ interface FilterBarProps<TFilterBarDefinition extends FilterBarDefinition> {
      * If true, the starred filters will be displayed in a compact mode
      */
     compact?: boolean;
+    /**
+     * The title of the filter bar default is "Filters" (translated)
+     */
+    title?: string;
 }
 /**
  * The FilterBar component serves as a wrapper for managing filters.
  */
-export declare const FilterBar: <TFilterBarDefinition extends FilterBarDefinition>({ hiddenFilters, className, filterBarDefinition, filterBarConfig, compact, }: FilterBarProps<TFilterBarDefinition>) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterBar: <TFilterBarDefinition extends FilterBarDefinition>({ hiddenFilters, className, filterBarDefinition, filterBarConfig, compact, title, }: FilterBarProps<TFilterBarDefinition>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/StarredFilters.d.ts

@@ -17,6 +17,10 @@ interface StarredFiltersProps<TFilterBarDefinition extends FilterBarDefinition>
      * If true, the starred filters will be displayed in a compact mode
      */
     compact?: boolean;
+    /**
+     * The title of the filter bar default is "Filters" (translated)
+     */
+    title?: string;
 }
 /**
  * StarredFilters is a React component that displays a list of starred filters based on the provided filter bar configuration.
@@ -24,5 +28,5 @@ interface StarredFiltersProps<TFilterBarDefinition extends FilterBarDefinition>
  * @template TFilterBarDefinition - The type representing the filter bar definition.
  * @returns {ReactElement} - Returns the StarredFilters component.
  */
-export declare const StarredFilters: <TFilterBarDefinition extends FilterBarDefinition>({ filterBarDefinition, filterBarConfig, hiddenFilters, compact, dataTestId, className, }: StarredFiltersProps<TFilterBarDefinition>) => import("react/jsx-runtime").JSX.Element;
+export declare const StarredFilters: <TFilterBarDefinition extends FilterBarDefinition>({ filterBarDefinition, filterBarConfig, hiddenFilters, compact, dataTestId, className, title, }: StarredFiltersProps<TFilterBarDefinition>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/translation.cjs16.js

@@ -227,8 +227,8 @@ var translation = {
 	"pages.machines.telematics.operationalStatus.digitalKeyMode.UNKNOWN": "不明",
 	"pages.machines.telematics.operationalStatus.digitalKeyMode.UNLOCKED_FOR_ALL": "全員に対してロック解除済み",
 	"pages.machines.telematics.operationalStatus.digitalKeyMode.UNLOCKED_FOR_ALL_FIXED": "全員に対してロック解除済み（キーパッドはIris上のまま）",
-	"pages.machines.telematics.operationalStatus.digitalKeyMode.UNLOCKED_FOR_KEY": "キーに対してロック解除済み",
-	"pages.machines.telematics.operationalStatus.digitalKeyMode.UNLOCKED_FOR_KEY_AND_PIN": "キーとピンに対してロック解除済み",
+	"pages.machines.telematics.operationalStatus.digitalKeyMode.UNLOCKED_FOR_KEY": "キー保持者に対してロック解除済み",
+	"pages.machines.telematics.operationalStatus.digitalKeyMode.UNLOCKED_FOR_KEY_AND_PIN": "キーとピン保持者に対してロック解除済み",
 	"pages.machines.telematics.operationalStatus.digitalKeyMode.UNLOCKED_FOR_PIN": "ピンロック解除済み",
 	"pages.machines.telematics.operationalStatus.digitalKeyMode.UNSUPPORTED": "未対応",
 	"rental.status.available": "利用可能",

package/translation.esm16.js

@@ -225,8 +225,8 @@ var translation = {
 	"pages.machines.telematics.operationalStatus.digitalKeyMode.UNKNOWN": "不明",
 	"pages.machines.telematics.operationalStatus.digitalKeyMode.UNLOCKED_FOR_ALL": "全員に対してロック解除済み",
 	"pages.machines.telematics.operationalStatus.digitalKeyMode.UNLOCKED_FOR_ALL_FIXED": "全員に対してロック解除済み（キーパッドはIris上のまま）",
-	"pages.machines.telematics.operationalStatus.digitalKeyMode.UNLOCKED_FOR_KEY": "キーに対してロック解除済み",
-	"pages.machines.telematics.operationalStatus.digitalKeyMode.UNLOCKED_FOR_KEY_AND_PIN": "キーとピンに対してロック解除済み",
+	"pages.machines.telematics.operationalStatus.digitalKeyMode.UNLOCKED_FOR_KEY": "キー保持者に対してロック解除済み",
+	"pages.machines.telematics.operationalStatus.digitalKeyMode.UNLOCKED_FOR_KEY_AND_PIN": "キーとピン保持者に対してロック解除済み",
 	"pages.machines.telematics.operationalStatus.digitalKeyMode.UNLOCKED_FOR_PIN": "ピンロック解除済み",
 	"pages.machines.telematics.operationalStatus.digitalKeyMode.UNSUPPORTED": "未対応",
 	"rental.status.available": "利用可能",