@mailstep/design-system 0.8.30 → 0.8.31-beta.2

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

@@ -1,32 +1,36 @@
-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
-	});
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
-//#endregion
-export { OverlayComponent as default };
+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;

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

@@ -1,5 +1,6 @@
-import type { FC } from 'react';
-import type { Settings, ColumnDefinition as ColumnDefinitionType, ActionColumn, GridActionsType, GridSelectorsType, Group, CustomComparators, FiltersConfig, UxState, RowProps } from '../types';
+import { FC } from 'react';
+import { 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,30 +1,12 @@
-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))
-	});
+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)); }) }));
 };
-//#endregion
-export { FilterRow as default };
+export default FilterRow;

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

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

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

@@ -1,34 +1,14 @@
-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
-		})]
-	});
+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 }))] }));
 };
-//#endregion
-export { ActionsFilter as default };
+export default ActionsFilter;

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

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

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

@@ -1,5 +1,2 @@
-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 };
+import ActionsFilter from './ActionsFilter';
+export default ActionsFilter;

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

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

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

@@ -1,37 +1,25 @@
-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
-	});
+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);
 };
-//#endregion
-export { SelectFilter as default };
+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;

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

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

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

@@ -1,5 +1,2 @@
-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 };
+import BooleanSelect from './BooleanSelect';
+export default BooleanSelect;

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

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

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

@@ -1,152 +1,111 @@
-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 __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
-//#endregion
-export { DatePickerRange as default };
+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;

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

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

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

@@ -1,5 +1,2 @@
-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 };
+import DatePickerRange from './DatePickerRange';
+export default DatePickerRange;

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

@@ -1,10 +1,11 @@
-//#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;
+var getCleanValue = function (value) {
+    if (typeof value === 'string') {
+        return new Date(value);
+    }
+    return value || undefined;
 };
-const getCleanValues = (value) => {
-	return [getCleanValue(value?.[0]), getCleanValue(value?.[1])];
+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];
 };
-//#endregion
-export { getCleanValues };

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

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