@trackunit/filters-filter-bar 0.0.295-alpha-1f3fb7cf8b5.0 → 0.0.295

package/index.cjs.js

@@ -13,7 +13,6 @@ var reactFilterComponents = require('@trackunit/react-filter-components');
 var reactCoreHooks = require('@trackunit/react-core-hooks');
 var reactCoreContextsApi = require('@trackunit/react-core-contexts-api');
 var reactFormComponents = require('@trackunit/react-form-components');
-var dateAndTimeComponents = require('@trackunit/date-and-time-components');
 var dequal = require('dequal');
 var isEqual = require('lodash/isEqual');
 
@@ -703,12 +702,18 @@ const formatToJustDate = (date) => {
  *
  * @param {DefaultFilterProps<DateRangeValue>} props - The properties required for the `DefaultDateRangeFilter` component.
  */
-const DefaultDateRangeFilter = ({ filterDefinition, filterName, value, setValue, showQuickOptions }) => {
+const DefaultDateRangeFilter = ({ filterDefinition, filterName, value, setValue, }) => {
+    var _a, _b;
     const [t] = useTranslation();
+    const [fromDateValue, setFromDateValue] = react.useState((_a = value === null || value === void 0 ? void 0 : value.from) !== null && _a !== void 0 ? _a : undefined);
+    const [toDateValue, setToDateValue] = react.useState((_b = value === null || value === void 0 ? void 0 : value.to) !== null && _b !== void 0 ? _b : undefined);
     const hasSelection = [value === null || value === void 0 ? void 0 : value.from, value === null || value === void 0 ? void 0 : value.to].some(val => sharedUtils.nonNullable(val));
     const reset = () => {
+        var _a, _b;
         // The Types for DefaultFilterProps and FilterDefinition could probably be improved to avoid this check
         if (filterDefinition.type === "dateRange") {
+            setFromDateValue((_a = filterDefinition.defaultValue) === null || _a === void 0 ? void 0 : _a.from);
+            setToDateValue((_b = filterDefinition.defaultValue) === null || _b === void 0 ? void 0 : _b.to);
             setValue(() => {
                 var _a, _b;
                 return ({
@@ -717,24 +722,29 @@ const DefaultDateRangeFilter = ({ filterDefinition, filterName, value, setValue,
                 });
             });
         }
-        else {
-            setValue(() => ({ from: undefined, to: undefined }));
-        }
+        setFromDateValue(undefined);
+        setToDateValue(undefined);
+        setValue(() => ({ from: undefined, to: undefined }));
+    };
+    const cancel = () => {
+        setFromDateValue(value === null || value === void 0 ? void 0 : value.from);
+        setToDateValue(value === null || value === void 0 ? void 0 : value.to);
     };
     const { logEvent } = reactCoreHooks.useAnalytics(FilterEvents);
-    const handleApply = (fromDateValue, toDateValue) => {
+    const handleApply = () => {
         logEvent("FilterApplied", {
             type: filterName !== null && filterName !== void 0 ? filterName : `${sharedUtils.capitalize(filterDefinition.filterKey)}Filter`,
             value: JSON.stringify({ from: fromDateValue, to: toDateValue }),
         });
         setValue(() => ({ from: fromDateValue, to: toDateValue }));
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactFilterComponents.FilterHeader, { onReset: reset, resetLabel: t("filtersBar.resetFilter"), showReset: hasSelection, title: filterDefinition.title }), jsxRuntime.jsx(reactFilterComponents.FilterBody, { children: jsxRuntime.jsx("div", { className: "flex gap-4 px-1", children: jsxRuntime.jsx(dateAndTimeComponents.DayRangePicker, { language: "en", onRangeSelect: dateRange => {
-                            handleApply(formatToJustDate(dateRange === null || dateRange === void 0 ? void 0 : dateRange.from), formatToJustDate(dateRange === null || dateRange === void 0 ? void 0 : dateRange.to));
-                        }, selectedDays: {
-                            from: (value === null || value === void 0 ? void 0 : value.from) ? new Date(value.from) : undefined,
-                            to: (value === null || value === void 0 ? void 0 : value.to) ? new Date(value.to) : undefined,
-                        }, showQuickOptions: showQuickOptions }) }) })] }));
+    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 => {
+                                setFromDateValue(formatToJustDate(dateRange === null || dateRange === void 0 ? void 0 : dateRange.from));
+                                setToDateValue(formatToJustDate(dateRange === null || dateRange === void 0 ? void 0 : dateRange.to));
+                            }, selectedDays: {
+                                from: fromDateValue ? new Date(fromDateValue) : undefined,
+                                to: toDateValue ? new Date(toDateValue) : undefined,
+                            } }) }), 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") })] }) })] })] }));
 };
 
 /**

package/index.esm.js

@@ -2,14 +2,13 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
 import { twMerge } from 'tailwind-merge';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
-import { Button, Popover, PopoverTrigger, IconButton, Icon, PopoverContent, MenuList, Text, StarButton, useResize, Collapse, VirtualizedList } from '@trackunit/react-components';
+import { Button, Popover, PopoverTrigger, IconButton, Icon, PopoverContent, MenuList, Text, StarButton, useResize, Collapse, VirtualizedList, DayRangePicker } from '@trackunit/react-components';
 import { objectValues, truthy, capitalize as capitalize$1, nonNullable } from '@trackunit/shared-utils';
 import { useMemo, useState, Fragment as Fragment$1, useRef, useEffect, useCallback } from 'react';
 import { Filter as Filter$1, FilterBody, RadioFilterItem, CheckBoxFilterItem, FilterHeader as FilterHeader$1, FilterFooter } from '@trackunit/react-filter-components';
 import { useAnalytics, useTextSearch } from '@trackunit/react-core-hooks';
 import { createEvent } from '@trackunit/react-core-contexts-api';
 import { Search, NumberField, RadioGroup } from '@trackunit/react-form-components';
-import { DayRangePicker } from '@trackunit/date-and-time-components';
 import { dequal } from 'dequal';
 import isEqual from 'lodash/isEqual';
 
@@ -695,12 +694,18 @@ const formatToJustDate = (date) => {
  *
  * @param {DefaultFilterProps<DateRangeValue>} props - The properties required for the `DefaultDateRangeFilter` component.
  */
-const DefaultDateRangeFilter = ({ filterDefinition, filterName, value, setValue, showQuickOptions }) => {
+const DefaultDateRangeFilter = ({ filterDefinition, filterName, value, setValue, }) => {
+    var _a, _b;
     const [t] = useTranslation();
+    const [fromDateValue, setFromDateValue] = useState((_a = value === null || value === void 0 ? void 0 : value.from) !== null && _a !== void 0 ? _a : undefined);
+    const [toDateValue, setToDateValue] = useState((_b = value === null || value === void 0 ? void 0 : value.to) !== null && _b !== void 0 ? _b : undefined);
     const hasSelection = [value === null || value === void 0 ? void 0 : value.from, value === null || value === void 0 ? void 0 : value.to].some(val => nonNullable(val));
     const reset = () => {
+        var _a, _b;
         // The Types for DefaultFilterProps and FilterDefinition could probably be improved to avoid this check
         if (filterDefinition.type === "dateRange") {
+            setFromDateValue((_a = filterDefinition.defaultValue) === null || _a === void 0 ? void 0 : _a.from);
+            setToDateValue((_b = filterDefinition.defaultValue) === null || _b === void 0 ? void 0 : _b.to);
             setValue(() => {
                 var _a, _b;
                 return ({
@@ -709,24 +714,29 @@ const DefaultDateRangeFilter = ({ filterDefinition, filterName, value, setValue,
                 });
             });
         }
-        else {
-            setValue(() => ({ from: undefined, to: undefined }));
-        }
+        setFromDateValue(undefined);
+        setToDateValue(undefined);
+        setValue(() => ({ from: undefined, to: undefined }));
+    };
+    const cancel = () => {
+        setFromDateValue(value === null || value === void 0 ? void 0 : value.from);
+        setToDateValue(value === null || value === void 0 ? void 0 : value.to);
     };
     const { logEvent } = useAnalytics(FilterEvents);
-    const handleApply = (fromDateValue, toDateValue) => {
+    const handleApply = () => {
         logEvent("FilterApplied", {
             type: filterName !== null && filterName !== void 0 ? filterName : `${capitalize$1(filterDefinition.filterKey)}Filter`,
             value: JSON.stringify({ from: fromDateValue, to: toDateValue }),
         });
         setValue(() => ({ from: fromDateValue, to: toDateValue }));
     };
-    return (jsxs(Fragment, { children: [jsx(FilterHeader$1, { onReset: reset, resetLabel: t("filtersBar.resetFilter"), showReset: hasSelection, title: filterDefinition.title }), jsx(FilterBody, { children: jsx("div", { className: "flex gap-4 px-1", children: jsx(DayRangePicker, { language: "en", onRangeSelect: dateRange => {
-                            handleApply(formatToJustDate(dateRange === null || dateRange === void 0 ? void 0 : dateRange.from), formatToJustDate(dateRange === null || dateRange === void 0 ? void 0 : dateRange.to));
-                        }, selectedDays: {
-                            from: (value === null || value === void 0 ? void 0 : value.from) ? new Date(value.from) : undefined,
-                            to: (value === null || value === void 0 ? void 0 : value.to) ? new Date(value.to) : undefined,
-                        }, showQuickOptions: showQuickOptions }) }) })] }));
+    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 => {
+                                setFromDateValue(formatToJustDate(dateRange === null || dateRange === void 0 ? void 0 : dateRange.from));
+                                setToDateValue(formatToJustDate(dateRange === null || dateRange === void 0 ? void 0 : dateRange.to));
+                            }, selectedDays: {
+                                from: fromDateValue ? new Date(fromDateValue) : undefined,
+                                to: toDateValue ? new Date(toDateValue) : undefined,
+                            } }) }), 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") })] }) })] })] }));
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/filters-filter-bar",
-  "version": "0.0.295-alpha-1f3fb7cf8b5.0",
+  "version": "0.0.295",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -19,8 +19,7 @@
     "@trackunit/react-core-contexts-api": "*",
     "@trackunit/i18n-library-translation": "*",
     "@trackunit/css-class-variance-utilities": "*",
-    "tailwind-merge": "^2.0.0",
-    "@trackunit/date-and-time-components": "*"
+    "tailwind-merge": "^2.0.0"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js"

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

@@ -1,18 +1,10 @@
 /// <reference types="react" />
 import { DateRangeValue } from "../types/FilterTypes";
 import { DefaultFilterProps } from "./DefaultFilterTypes";
-import { ShowQuickOption } from "@trackunit/date-and-time-components";
-interface DefaultDateRangeFilterProps extends DefaultFilterProps<DateRangeValue> {
-    /**
-     * Display quick options buttons above calendar which will preselect date range
-     */
-    showQuickOptions?: ShowQuickOption;
-}
 /**
  * `DefaultDateRangeFilter` is a React component for handling date range filters.
  * Formats the date range as YYYY-MM-DD - YYYY-MM-DD
  *
  * @param {DefaultFilterProps<DateRangeValue>} props - The properties required for the `DefaultDateRangeFilter` component.
  */
-export declare const DefaultDateRangeFilter: ({ filterDefinition, filterName, value, setValue, showQuickOptions }: DefaultDateRangeFilterProps) => JSX.Element;
-export {};
+export declare const DefaultDateRangeFilter: ({ filterDefinition, filterName, value, setValue, }: DefaultFilterProps<DateRangeValue>) => JSX.Element;