@mailstep/design-system 0.8.31-beta.4 → 0.8.31

package/ui/Blocks/CommonGrid/components/FilterDropdown.js

@@ -1,36 +1,32 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
+import React from "react";
+import styled$1 from "@xstyled/styled-components";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Blocks/CommonGrid/components/FilterDropdown.tsx
+const OverlayWrapper = styled$1.div`
+  position: absolute;
+  z-index: 1;
+  visibility: hidden;
+`;
+const OverlayComponent = ({ children }) => {
+	const overlayRef = React.useRef(null);
+	React.useEffect(() => {
+		const Overlay = overlayRef.current;
+		if (!Overlay) return;
+		const FilterCell = Overlay.closest(".cell");
+		const GridWrapper = FilterCell?.closest(".gridWrapper");
+		const relativeLeftOffset = (FilterCell?.offsetLeft ?? 0) - (FilterCell?.parentElement?.offsetLeft ?? 0);
+		const spaceLeft = (GridWrapper?.clientWidth ?? 0) + (GridWrapper?.scrollLeft ?? 0) - relativeLeftOffset - (Overlay.clientWidth ?? 0);
+		const left = spaceLeft > 0 ? FilterCell?.offsetLeft ?? 0 : (FilterCell?.offsetLeft ?? 0) + spaceLeft;
+		const topOffset = (FilterCell?.offsetTop ?? 0) + (FilterCell?.clientHeight ?? 0);
+		Overlay.style.left = `${left}px`;
+		Overlay.style.top = `${topOffset}px`;
+		Overlay.style.visibility = `initial`;
+	});
+	return /* @__PURE__ */ jsx(OverlayWrapper, {
+		ref: overlayRef,
+		className: "filterOverlay",
+		children
+	});
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import styled from '@xstyled/styled-components';
-var OverlayWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 1;\n  visibility: hidden;\n"], ["\n  position: absolute;\n  z-index: 1;\n  visibility: hidden;\n"])));
-var OverlayComponent = function (_a) {
-    var children = _a.children;
-    var overlayRef = React.useRef(null);
-    React.useEffect(function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        var Overlay = overlayRef.current;
-        if (!Overlay)
-            return;
-        var FilterCell = Overlay.closest('.cell');
-        var GridWrapper = FilterCell === null || FilterCell === void 0 ? void 0 : FilterCell.closest('.gridWrapper');
-        // position of left edge of filter cell
-        var relativeLeftOffset = ((_a = FilterCell === null || FilterCell === void 0 ? void 0 : FilterCell.offsetLeft) !== null && _a !== void 0 ? _a : 0) - ((_c = (_b = FilterCell === null || FilterCell === void 0 ? void 0 : FilterCell.parentElement) === null || _b === void 0 ? void 0 : _b.offsetLeft) !== null && _c !== void 0 ? _c : 0); // parent element = row
-        // space available to the right edge of visible part of grid
-        var spaceTotal = ((_d = GridWrapper === null || GridWrapper === void 0 ? void 0 : GridWrapper.clientWidth) !== null && _d !== void 0 ? _d : 0) + ((_e = GridWrapper === null || GridWrapper === void 0 ? void 0 : GridWrapper.scrollLeft) !== null && _e !== void 0 ? _e : 0) - relativeLeftOffset;
-        // difference between availible space and width
-        var spaceLeft = spaceTotal - ((_f = Overlay.clientWidth) !== null && _f !== void 0 ? _f : 0);
-        // left position
-        var left = spaceLeft > 0 ? (_g = FilterCell === null || FilterCell === void 0 ? void 0 : FilterCell.offsetLeft) !== null && _g !== void 0 ? _g : 0 : ((_h = FilterCell === null || FilterCell === void 0 ? void 0 : FilterCell.offsetLeft) !== null && _h !== void 0 ? _h : 0) + spaceLeft;
-        // top calculation
-        var topOffset = ((_j = FilterCell === null || FilterCell === void 0 ? void 0 : FilterCell.offsetTop) !== null && _j !== void 0 ? _j : 0) + ((_k = FilterCell === null || FilterCell === void 0 ? void 0 : FilterCell.clientHeight) !== null && _k !== void 0 ? _k : 0);
-        Overlay.style.left = "".concat(left, "px");
-        Overlay.style.top = "".concat(topOffset, "px");
-        Overlay.style.visibility = "initial";
-    });
-    return (_jsx(OverlayWrapper, { ref: overlayRef, className: "filterOverlay", children: children }));
-};
-export default OverlayComponent;
-var templateObject_1;
+//#endregion
+export { OverlayComponent as default };

package/ui/Blocks/CommonGrid/components/FilterRow.d.ts

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { Settings, ColumnDefinition as ColumnDefinitionType, ActionColumn, GridActionsType, GridSelectorsType, Group, CustomComparators, FiltersConfig, UxState, RowProps } from '../types';
-
+import type { FC } from 'react';
+import type { Settings, ColumnDefinition as ColumnDefinitionType, ActionColumn, GridActionsType, GridSelectorsType, Group, CustomComparators, FiltersConfig, UxState, RowProps } from '../types';
 type Props = {
     columns: ColumnDefinitionType[];
     actionColumn?: ActionColumn;

package/ui/Blocks/CommonGrid/components/FilterRow.js

@@ -1,12 +1,30 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { getFilterName } from '../utils';
-import get from 'lodash/fp/get';
-import throttle from 'lodash/throttle';
-import ColumnFilterCell from './ColumnFilterCell';
-import { Row } from './Table';
-var FilterRow = function (_a) {
-    var columns = _a.columns, groups = _a.groups, actionColumn = _a.actionColumn, onChange = _a.onChange, _b = _a.filterValues, filterValues = _b === void 0 ? {} : _b, displayColumnsWidth = _a.displayColumnsWidth, filters = _a.filters, comparators = _a.comparators, handleUxChange = _a.handleUxChange, onAsyncLoadFilterOptions = _a.onAsyncLoadFilterOptions, rowsData = _a.rowsData, uxState = _a.uxState;
-    var handleOnChange = throttle(onChange, 500);
-    return (_jsx(Row, { className: "filterRow", children: columns.map(function (column, index) { return (_jsx(ColumnFilterCell, { column: column, actionColumn: actionColumn, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange, onChange: handleOnChange, value: get([getFilterName(column), 'value'], filterValues), others: get([getFilterName(column), 'others'], filterValues), displayColumnWidth: displayColumnsWidth[column.name], filters: filters, comparators: comparators, group: groups === null || groups === void 0 ? void 0 : groups[index], onAsyncLoadFilterOptions: onAsyncLoadFilterOptions }, index)); }) }));
+import { getFilterName } from "../utils/index.js";
+import { Row } from "./Table.js";
+import ColumnFilterCell from "./ColumnFilterCell.js";
+import { jsx } from "react/jsx-runtime";
+import get from "lodash/fp/get";
+import throttle from "lodash/throttle";
+//#region packages/ui/Blocks/CommonGrid/components/FilterRow.tsx
+const FilterRow = ({ columns, groups, actionColumn, onChange, filterValues = {}, displayColumnsWidth, filters, comparators, handleUxChange, onAsyncLoadFilterOptions, rowsData, uxState }) => {
+	const handleOnChange = throttle(onChange, 500);
+	return /* @__PURE__ */ jsx(Row, {
+		className: "filterRow",
+		children: columns.map((column, index) => /* @__PURE__ */ jsx(ColumnFilterCell, {
+			column,
+			actionColumn,
+			rowsData,
+			uxState,
+			handleUxChange,
+			onChange: handleOnChange,
+			value: get([getFilterName(column), "value"], filterValues),
+			others: get([getFilterName(column), "others"], filterValues),
+			displayColumnWidth: displayColumnsWidth[column.name],
+			filters,
+			comparators,
+			group: groups?.[index],
+			onAsyncLoadFilterOptions
+		}, index))
+	});
 };
-export default FilterRow;
+//#endregion
+export { FilterRow as default };

package/ui/Blocks/CommonGrid/components/Filters/ActionsFilter/ActionsFilter.d.ts

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { ActionColumn, GridActionsType, RowProps, UxState } from '../../../types';
-
+import type { FC } from 'react';
+import type { ActionColumn, GridActionsType, RowProps, UxState } from '../../../types';
 type Props = {
     actionColumn?: ActionColumn;
     rowsData?: RowProps[];

package/ui/Blocks/CommonGrid/components/Filters/ActionsFilter/ActionsFilter.js

@@ -1,14 +1,34 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Checkbox from '../../../../../Forms/Checkbox';
-import { useToggleAllCheckbox } from '../../../hooks/useToggleAllCheckbox';
-import { x } from '@xstyled/styled-components';
-var ActionsFilter = function (_a) {
-    var _b, _c;
-    var actionColumn = _a.actionColumn, rowsData = _a.rowsData, uxState = _a.uxState, handleUxChange = _a.handleUxChange;
-    var _d = useToggleAllCheckbox(rowsData, uxState, handleUxChange), allChecked = _d[0], toggleCheckbox = _d[1];
-    var displayRowNumberLabel = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbers;
-    var rowsNumberLabel = (_b = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbersLabel) !== null && _b !== void 0 ? _b : '#';
-    var displayCheckbox = ((_c = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _c === void 0 ? void 0 : _c.length) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.forceCheckboxes);
-    return (_jsxs(x.div, { display: "flex", alignItems: "center", justifyContent: "space-between", gap: "16px", pl: "4px", children: [displayCheckbox && (_jsx(x.div, { w: "100%", children: _jsx(Checkbox, { checked: allChecked, onChange: toggleCheckbox, label: "" }, "check-all") })), displayRowNumberLabel && (_jsx(x.div, { w: "100%", pr: "12px", display: "flex", justifyContent: "center", children: rowsNumberLabel }))] }));
+import { useToggleAllCheckbox } from "../../../hooks/useToggleAllCheckbox.js";
+import Checkbox_default from "../../../../../Forms/Checkbox/index.js";
+import { x } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Blocks/CommonGrid/components/Filters/ActionsFilter/ActionsFilter.tsx
+const ActionsFilter = ({ actionColumn, rowsData, uxState, handleUxChange }) => {
+	const [allChecked, toggleCheckbox] = useToggleAllCheckbox(rowsData, uxState, handleUxChange);
+	const displayRowNumberLabel = actionColumn?.addRowNumbers;
+	const rowsNumberLabel = actionColumn?.addRowNumbersLabel ?? "#";
+	const displayCheckbox = actionColumn?.actionOptions?.length || actionColumn?.forceCheckboxes;
+	return /* @__PURE__ */ jsxs(x.div, {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		gap: "16px",
+		pl: "4px",
+		children: [displayCheckbox && /* @__PURE__ */ jsx(x.div, {
+			w: "100%",
+			children: /* @__PURE__ */ jsx(Checkbox_default, {
+				checked: allChecked,
+				onChange: toggleCheckbox,
+				label: ""
+			}, "check-all")
+		}), displayRowNumberLabel && /* @__PURE__ */ jsx(x.div, {
+			w: "100%",
+			pr: "12px",
+			display: "flex",
+			justifyContent: "center",
+			children: rowsNumberLabel
+		})]
+	});
 };
-export default ActionsFilter;
+//#endregion
+export { ActionsFilter as default };

package/ui/Blocks/CommonGrid/components/Filters/ActionsFilter/index.d.ts

@@ -1,3 +1,2 @@
-import { default as ActionsFilter } from './ActionsFilter';
-
+import ActionsFilter from './ActionsFilter';
 export default ActionsFilter;

package/ui/Blocks/CommonGrid/components/Filters/ActionsFilter/index.js

@@ -1,2 +1,5 @@
-import ActionsFilter from './ActionsFilter';
-export default ActionsFilter;
+import ActionsFilter from "./ActionsFilter.js";
+//#region packages/ui/Blocks/CommonGrid/components/Filters/ActionsFilter/index.ts
+var ActionsFilter_default = ActionsFilter;
+//#endregion
+export { ActionsFilter_default as default };

package/ui/Blocks/CommonGrid/components/Filters/BooleanSelect/BooleanSelect.d.ts

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-
+import { type FC } from 'react';
 type Props = {
     onChange: (data: any) => void;
     value?: string;

package/ui/Blocks/CommonGrid/components/Filters/BooleanSelect/BooleanSelect.js

@@ -1,25 +1,37 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+import GridSelect_default from "../GridSelect/index.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { i18n } from "@lingui/core";
+//#region packages/ui/Blocks/CommonGrid/components/Filters/BooleanSelect/BooleanSelect.tsx
+const getFlagOptions = () => [
+	{
+		value: "",
+		label: i18n._({
+			id: "dataGrid.columnActive.filterOptions.all",
+			message: "All"
+		})
+	},
+	{
+		value: "1",
+		label: i18n._({
+			id: "dataGrid.columnActive.filterOptions.yes",
+			message: "Yes"
+		})
+	},
+	{
+		value: "0",
+		label: i18n._({
+			id: "dataGrid.columnActive.filterOptions.no",
+			message: "No"
+		})
+	}
+];
+const SelectFilter = (props) => {
+	return /* @__PURE__ */ jsx(GridSelect_default, {
+		options: useMemo(() => getFlagOptions(), []),
+		...props,
+		isClearable: false
+	});
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import GridSelect from '../GridSelect';
-import { i18n } from '@lingui/core';
-var getFlagOptions = function () { return [
-    { value: '', label: i18n._({ id: 'dataGrid.columnActive.filterOptions.all', message: 'All' }) },
-    { value: '1', label: i18n._({ id: 'dataGrid.columnActive.filterOptions.yes', message: 'Yes' }) },
-    { value: '0', label: i18n._({ id: 'dataGrid.columnActive.filterOptions.no', message: 'No' }) }
-]; };
-var SelectFilter = function (props) {
-    var options = useMemo(function () { return getFlagOptions(); }, []);
-    return _jsx(GridSelect, __assign({ options: options }, props, { isClearable: false }));
-};
-export default SelectFilter;
+//#endregion
+export { SelectFilter as default };

package/ui/Blocks/CommonGrid/components/Filters/BooleanSelect/index.d.ts

@@ -1,3 +1,2 @@
-import { default as BooleanSelect } from './BooleanSelect';
-
+import BooleanSelect from './BooleanSelect';
 export default BooleanSelect;

package/ui/Blocks/CommonGrid/components/Filters/BooleanSelect/index.js

@@ -1,2 +1,5 @@
-import BooleanSelect from './BooleanSelect';
-export default BooleanSelect;
+import SelectFilter from "./BooleanSelect.js";
+//#region packages/ui/Blocks/CommonGrid/components/Filters/BooleanSelect/index.tsx
+var BooleanSelect_default = SelectFilter;
+//#endregion
+export { BooleanSelect_default as default };

package/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/DatePickerRange.d.ts

@@ -1,7 +1,6 @@
-import { FC } from 'react';
-import { DateTimeOthers } from '../../../../../Elements/DatePicker/Datetime/types';
-import { FilterComponentProps } from '../../../types';
-
+import { type FC } from 'react';
+import type { DateTimeOthers } from '../../../../../Elements/DatePicker/Datetime/types';
+import type { FilterComponentProps } from '../../../types';
 type InitialView = 'past' | 'future';
 type DatePickerRangeProps = FilterComponentProps<Date[]> & {
     filterTime?: number;

package/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/DatePickerRange.js

@@ -1,111 +1,152 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
+import { useClickOutside } from "../../../../Modal/hooks/useClickOutside.js";
+import Input_default from "../../../../../Forms/Input/index.js";
+import DatePicker_default from "../../../../../Elements/DatePicker/index.js";
+import { getCleanValues } from "./utils/getCleanValues.js";
+import { pickerRangeToString } from "./utils/pickerRangeToString.js";
+import React, { useCallback, useMemo, useState } from "react";
+import styled$1, { css } from "@xstyled/styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { i18n } from "@lingui/core";
+import { DateTime } from "luxon";
+//#region packages/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/DatePickerRange.tsx
+const RangeWrapper = styled$1.div`
+  display: ${({ $compact }) => $compact ? "flex" : "inline-flex"};
+  flex-direction: ${({ $compact }) => $compact ? "column" : "row"};
+  margin-right: ${({ $compact }) => $compact ? "0" : "20px"};
+
+  ${({ $compact }) => $compact && css`
+      .rdtPicker {
+        min-width: unset;
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0.5rem 0.5rem;
+      }
+      .rdtPicker .rdtDays {
+        min-width: unset;
+      }
+      .rdtPicker td {
+        padding: 0 0.2rem;
+      }
+    `}
+`;
+const OverlayComponentDefault = ({ children }) => /* @__PURE__ */ jsx("div", { children });
+const DatePickerRange = (props) => {
+	const { onChange, error, label, value, others, filterTime, initialView, compact, OverlayComponent = OverlayComponentDefault, ...rest } = props;
+	const [startRangeValue, setStartRangeValue] = useState(value?.[0] ?? void 0);
+	const [endRangeValue, setEndRangeValue] = useState(value?.[1] ?? void 0);
+	const timeFormat = filterTime ? "HH:mm" : false;
+	const cleanValue = React.useMemo(() => getCleanValues(value), [value]);
+	const initialViewDate = useMemo(() => {
+		if (cleanValue[0] && cleanValue[1]) return cleanValue;
+		const firstDate = /* @__PURE__ */ new Date();
+		firstDate.setHours(0, 0, 0, 0);
+		const secondDate = /* @__PURE__ */ new Date();
+		secondDate.setHours(23, 59, 59, 0);
+		if (initialView === "future") secondDate.setMonth(secondDate.getMonth() + 1);
+		else firstDate.setMonth(firstDate.getMonth());
+		return [cleanValue[0] || firstDate, cleanValue[1] || secondDate];
+	}, [cleanValue, initialView]);
+	const [isOpen, setOpen] = useState(false);
+	const setDateFrom = useCallback((v) => {
+		setStartRangeValue(v);
+		onChange([v, cleanValue[1]], others);
+	}, [
+		onChange,
+		others,
+		cleanValue
+	]);
+	const setDateTo = useCallback((v) => {
+		setEndRangeValue(v);
+		onChange([cleanValue[0], v], others);
+	}, [
+		onChange,
+		others,
+		cleanValue
+	]);
+	const handleOthersChangeFrom = useCallback((othersFrom) => {
+		onChange(cleanValue, [othersFrom, others?.[1]]);
+	}, [
+		onChange,
+		cleanValue,
+		others
+	]);
+	const handleOthersChangeTo = useCallback((othersTo) => {
+		onChange(cleanValue, [others?.[0], othersTo]);
+	}, [
+		onChange,
+		cleanValue,
+		others
+	]);
+	const openPicker = useCallback(() => {
+		setOpen(true);
+	}, [setOpen]);
+	const clear = useCallback(() => {
+		onChange([], []);
+		setStartRangeValue(void 0);
+		setEndRangeValue(void 0);
+	}, [onChange]);
+	const isValidDateFrom = useCallback((current) => !cleanValue[1] || DateTime.fromJSDate(cleanValue[1]) >= DateTime.fromJSDate(current), [cleanValue]);
+	const isValidDateTo = useCallback((current) => !cleanValue[0] || DateTime.fromJSDate(current) >= DateTime.fromJSDate(cleanValue[0]), [cleanValue]);
+	const onClose = useCallback(() => {
+		setOpen(false);
+	}, []);
+	const secondDatePickerValue = cleanValue[1] === null ? cleanValue[0] : cleanValue[1];
+	return /* @__PURE__ */ jsxs("div", {
+		ref: useClickOutside({ onClose }),
+		children: [/* @__PURE__ */ jsx(Input_default, {
+			name: props.name,
+			type: "text",
+			icon: "calendar",
+			value: pickerRangeToString(cleanValue, others),
+			label: props.label,
+			onFocus: openPicker,
+			iconOnClick: openPicker,
+			onClear: clear,
+			error,
+			readOnly: true
+		}), /* @__PURE__ */ jsx(OverlayComponent, { children: /* @__PURE__ */ jsx(Fragment, { children: isOpen && /* @__PURE__ */ jsxs(RangeWrapper, {
+			$compact: compact,
+			className: "ignore-element-for-closing-hook",
+			children: [/* @__PURE__ */ jsx(DatePicker_default, {
+				...rest,
+				timeFormat,
+				value: cleanValue[0] ?? "",
+				initialViewDate: initialViewDate[0],
+				secondValue: endRangeValue,
+				onChange: setDateFrom,
+				others: others?.[0],
+				onChangeOthers: handleOthersChangeFrom,
+				icon: false,
+				label: isOpen && i18n._({
+					id: "dataGrid.filterCell.from",
+					message: "From"
+				}),
+				isValidDate: isValidDateFrom,
+				input: false,
+				spaceAround: !compact,
+				open: true
+			}), /* @__PURE__ */ jsx(DatePicker_default, {
+				...rest,
+				timeFormat,
+				value: secondDatePickerValue,
+				initialViewDate: initialViewDate[1],
+				secondValue: startRangeValue,
+				onChange: setDateTo,
+				others: others?.[1],
+				onChangeOthers: handleOthersChangeTo,
+				icon: false,
+				label: isOpen && i18n._({
+					id: "dataGrid.filterCell.to",
+					message: "To"
+				}),
+				isValidDate: isValidDateTo,
+				input: false,
+				spaceAround: !compact,
+				open: true,
+				isSecondDatePicker: true
+			})]
+		}) }) })]
+	});
 };
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useState, useCallback, useMemo } from 'react';
-import { DateTime } from 'luxon';
-import DatePicker from '../../../../../Elements/DatePicker';
-import Input from '../../../../../Forms/Input';
-import { useClickOutside } from '../../../../Modal/hooks/useClickOutside';
-import { getCleanValues } from './utils/getCleanValues';
-import { pickerRangeToString } from './utils/pickerRangeToString';
-import { i18n } from '@lingui/core';
-import styled, { css } from '@xstyled/styled-components';
-var RangeWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: ", ";\n  flex-direction: ", ";\n  margin-right: ", ";\n\n  ", "\n"], ["\n  display: ", ";\n  flex-direction: ", ";\n  margin-right: ", ";\n\n  ", "\n"])), function (_a) {
-    var $compact = _a.$compact;
-    return ($compact ? 'flex' : 'inline-flex');
-}, function (_a) {
-    var $compact = _a.$compact;
-    return ($compact ? 'column' : 'row');
-}, function (_a) {
-    var $compact = _a.$compact;
-    return ($compact ? '0' : '20px');
-}, function (_a) {
-    var $compact = _a.$compact;
-    return $compact && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      .rdtPicker {\n        min-width: unset;\n        width: 100%;\n        box-sizing: border-box;\n        padding: 0.5rem 0.5rem;\n      }\n      .rdtPicker .rdtDays {\n        min-width: unset;\n      }\n      .rdtPicker td {\n        padding: 0 0.2rem;\n      }\n    "], ["\n      .rdtPicker {\n        min-width: unset;\n        width: 100%;\n        box-sizing: border-box;\n        padding: 0.5rem 0.5rem;\n      }\n      .rdtPicker .rdtDays {\n        min-width: unset;\n      }\n      .rdtPicker td {\n        padding: 0 0.2rem;\n      }\n    "])));
-});
-var OverlayComponentDefault = function (_a) {
-    var children = _a.children;
-    return _jsx("div", { children: children });
-};
-var DatePickerRange = function (props) {
-    var _a, _b, _c;
-    var onChange = props.onChange, error = props.error, label = props.label, value = props.value, others = props.others, filterTime = props.filterTime, initialView = props.initialView, compact = props.compact, _d = props.OverlayComponent, OverlayComponent = _d === void 0 ? OverlayComponentDefault : _d, rest = __rest(props, ["onChange", "error", "label", "value", "others", "filterTime", "initialView", "compact", "OverlayComponent"]);
-    var _e = useState((_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : undefined), startRangeValue = _e[0], setStartRangeValue = _e[1];
-    var _f = useState((_b = value === null || value === void 0 ? void 0 : value[1]) !== null && _b !== void 0 ? _b : undefined), endRangeValue = _f[0], setEndRangeValue = _f[1];
-    var timeFormat = filterTime ? 'HH:mm' : false;
-    var cleanValue = React.useMemo(function () { return getCleanValues(value); }, [value]);
-    var initialViewDate = useMemo(function () {
-        if (cleanValue[0] && cleanValue[1]) {
-            return cleanValue;
-        }
-        var firstDate = new Date();
-        firstDate.setHours(0, 0, 0, 0);
-        var secondDate = new Date();
-        secondDate.setHours(23, 59, 59, 0);
-        if (initialView === 'future') {
-            secondDate.setMonth(secondDate.getMonth() + 1);
-        }
-        else {
-            firstDate.setMonth(firstDate.getMonth());
-        }
-        return [cleanValue[0] || firstDate, cleanValue[1] || secondDate];
-    }, [cleanValue, initialView]);
-    var _g = useState(false), isOpen = _g[0], setOpen = _g[1];
-    var setDateFrom = useCallback(function (v) {
-        setStartRangeValue(v);
-        onChange([v, cleanValue[1]], others);
-    }, [onChange, others, cleanValue]);
-    var setDateTo = useCallback(function (v) {
-        setEndRangeValue(v);
-        onChange([cleanValue[0], v], others);
-    }, [onChange, others, cleanValue]);
-    var handleOthersChangeFrom = useCallback(function (othersFrom) {
-        onChange(cleanValue, [othersFrom, others === null || others === void 0 ? void 0 : others[1]]);
-    }, [onChange, cleanValue, others]);
-    var handleOthersChangeTo = useCallback(function (othersTo) {
-        onChange(cleanValue, [others === null || others === void 0 ? void 0 : others[0], othersTo]);
-    }, [onChange, cleanValue, others]);
-    var openPicker = useCallback(function () {
-        setOpen(true);
-    }, [setOpen]);
-    var clear = useCallback(function () {
-        onChange([], []);
-        setStartRangeValue(undefined);
-        setEndRangeValue(undefined);
-    }, [onChange]);
-    var isValidDateFrom = useCallback(function (current) { return !cleanValue[1] || DateTime.fromJSDate(cleanValue[1]) >= DateTime.fromJSDate(current); }, [cleanValue]);
-    var isValidDateTo = useCallback(function (current) { return !cleanValue[0] || DateTime.fromJSDate(current) >= DateTime.fromJSDate(cleanValue[0]); }, [cleanValue]);
-    var onClose = useCallback(function () {
-        setOpen(false);
-    }, []);
-    // Check if the second value is not selected and the first value is the same as the initial value
-    var secondDatePickerValue = cleanValue[1] === null ? cleanValue[0] : cleanValue[1];
-    var ref = useClickOutside({ onClose: onClose });
-    return (_jsxs("div", { ref: ref, children: [_jsx(Input, { name: props.name, type: "text", icon: "calendar", value: pickerRangeToString(cleanValue, others), label: props.label, onFocus: openPicker, iconOnClick: openPicker, onClear: clear, error: error, readOnly: true }), _jsx(OverlayComponent, { children: _jsx(_Fragment, { children: isOpen && (_jsxs(RangeWrapper, { "$compact": compact, className: "ignore-element-for-closing-hook", children: [_jsx(DatePicker, __assign({}, rest, { timeFormat: timeFormat, value: (_c = cleanValue[0]) !== null && _c !== void 0 ? _c : '', initialViewDate: initialViewDate[0], secondValue: endRangeValue, onChange: setDateFrom, others: others === null || others === void 0 ? void 0 : others[0], onChangeOthers: handleOthersChangeFrom, icon: false, label: isOpen && i18n._({ id: 'dataGrid.filterCell.from', message: 'From' }), isValidDate: isValidDateFrom, input: false, spaceAround: !compact, open: true })), _jsx(DatePicker, __assign({}, rest, { timeFormat: timeFormat, value: secondDatePickerValue, initialViewDate: initialViewDate[1], secondValue: startRangeValue, onChange: setDateTo, others: others === null || others === void 0 ? void 0 : others[1], onChangeOthers: handleOthersChangeTo, icon: false, label: isOpen && i18n._({ id: 'dataGrid.filterCell.to', message: 'To' }), isValidDate: isValidDateTo, input: false, spaceAround: !compact, open: true, isSecondDatePicker: true }))] })) }) })] }));
-};
-export default DatePickerRange;
-var templateObject_1, templateObject_2;
+//#endregion
+export { DatePickerRange as default };

package/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/index.d.ts

@@ -1,3 +1,2 @@
-import { default as DatePickerRange } from './DatePickerRange';
-
+import DatePickerRange from './DatePickerRange';
 export default DatePickerRange;

package/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/index.js

@@ -1,2 +1,5 @@
-import DatePickerRange from './DatePickerRange';
-export default DatePickerRange;
+import DatePickerRange from "./DatePickerRange.js";
+//#region packages/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/index.tsx
+var DatePickerRange_default = DatePickerRange;
+//#endregion
+export { DatePickerRange_default as default };

package/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/utils/getCleanValues.js

@@ -1,11 +1,10 @@
-var getCleanValue = function (value) {
-    if (typeof value === 'string') {
-        return new Date(value);
-    }
-    return value || undefined;
+//#region packages/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/utils/getCleanValues.ts
+const getCleanValue = (value) => {
+	if (typeof value === "string") return new Date(value);
+	return value || void 0;
 };
-export var getCleanValues = function (value) {
-    var from = getCleanValue(value === null || value === void 0 ? void 0 : value[0]);
-    var to = getCleanValue(value === null || value === void 0 ? void 0 : value[1]);
-    return [from, to];
+const getCleanValues = (value) => {
+	return [getCleanValue(value?.[0]), getCleanValue(value?.[1])];
 };
+//#endregion
+export { getCleanValues };

package/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/utils/pickerRangeToString.d.ts

@@ -1,3 +1,2 @@
-import { DateTimeOthers } from '../../../../../../Elements/DatePicker/Datetime/types';
-
+import type { DateTimeOthers } from '../../../../../../Elements/DatePicker/Datetime/types';
 export declare const pickerRangeToString: (values?: Date[], others?: DateTimeOthers[]) => string;