@mailstep/design-system 0.13.3 → 0.13.5

package/ui/Modules/CommonGrid/components/ActionHead/ActionHead.js

@@ -1,11 +1,11 @@
+import { useToggleAllCheckbox } from "../../hooks/useToggleAllCheckbox.js";
 import Button from "../../../../Elements/Button/Button.js";
 import "../../../../Elements/Button/index.js";
 import { useGridActionTrigger } from "../../hooks/useGridActionTrigger.js";
-import { useToggleAllCheckbox } from "../../hooks/useToggleAllCheckbox.js";
 import ButtonMore from "../ButtonMore/ButtonMore.js";
 import { useCallback, useMemo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import styled$1 from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { i18n } from "@lingui/core";
 import { Trans } from "@lingui/react";
 //#region packages/ui/Modules/CommonGrid/components/ActionHead/ActionHead.tsx

package/ui/Modules/CommonGrid/components/ActionHead/components/ActionDropdownMenu.js

@@ -1,6 +1,6 @@
 import "react";
-import { jsx } from "react/jsx-runtime";
 import styled$1 from "@xstyled/styled-components";
+import { jsx } from "react/jsx-runtime";
 import { th as th$1 } from "@xstyled/system";
 //#region packages/ui/Modules/CommonGrid/components/ActionHead/components/ActionDropdownMenu.tsx
 const StyledDropdownWrap = styled$1.div`

package/ui/Modules/CommonGrid/components/ActionHead/components/ActionDropdownSelect.js

@@ -2,8 +2,8 @@ import Icon from "../../../../../Elements/Icon/Icon.js";
 import Popover from "../../../../../Blocks/Popover/index.js";
 import ActionDropdownMenu from "./ActionDropdownMenu.js";
 import React, { memo, useRef } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styled$1 from "@xstyled/styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { th as th$1 } from "@xstyled/system";
 import { Trans } from "@lingui/react";
 //#region packages/ui/Modules/CommonGrid/components/ActionHead/components/ActionDropdownSelect.tsx

package/ui/Modules/CommonGrid/components/ButtonMore/ButtonMore.js

@@ -1,10 +1,10 @@
+import { useClickOutside } from "../../../../Blocks/Modal/hooks/useClickOutside.js";
 import Button from "../../../../Elements/Button/Button.js";
 import { DropdownMenu } from "../../../../Elements/DropdownMenu/DropdownMenu.js";
 import "../../../../Elements/DropdownMenu/index.js";
-import { useClickOutside } from "../../../../Blocks/Modal/hooks/useClickOutside.js";
 import { useCallback, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import styled$1 from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/ui/Modules/CommonGrid/components/ButtonMore/ButtonMore.tsx
 const ButtonWrapper = styled$1.div`
   position: relative;

package/ui/Modules/CommonGrid/components/ColumnFilterCell.js

@@ -3,8 +3,8 @@ import { useAddFilter } from "../hooks/useAddFilter.js";
 import { Cell } from "./Table.js";
 import OverlayComponent from "./FilterDropdown.js";
 import React from "react";
-import { jsx } from "react/jsx-runtime";
 import { x } from "@xstyled/styled-components";
+import { jsx } from "react/jsx-runtime";
 //#region packages/ui/Modules/CommonGrid/components/ColumnFilterCell.tsx
 const ColumnFilterCell = ({ onChange, value, others, displayColumnWidth, filters, column: columnDefinition, group, comparators, actionColumn, rowsData, uxState, handleUxChange, onAsyncLoadFilterOptions }) => {
 	const cellSizeProps = getCellSizeProps(columnDefinition, displayColumnWidth);

package/ui/Modules/CommonGrid/components/ColumnTitle/ColumnTitle.js

@@ -1,7 +1,7 @@
 import Icon from "../../../../Elements/Icon/Icon.js";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styled$1, { css, x } from "@xstyled/styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region packages/ui/Modules/CommonGrid/components/ColumnTitle/ColumnTitle.tsx
 const WRAPPER_WIDTH = 35;
 const Wrap = styled$1.div`

package/ui/Modules/CommonGrid/components/ColumnTitle.js

@@ -1,7 +1,7 @@
 import { SortingDown, SortingUp } from "./icons/Sorting.js";
 import React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import styled$1, { th, useTheme } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/ui/Modules/CommonGrid/components/ColumnTitle.tsx
 const Title = styled$1.span`
   & + * {

package/ui/Modules/CommonGrid/components/ControlButtons/ControlButtons.js

@@ -1,12 +1,12 @@
 import { Settings2 } from "../../../../Elements/Icon/icons/Settings2.js";
 import { Filter } from "../../../../Elements/Icon/icons/Filter.js";
 import { Sort } from "../../../../Elements/Icon/icons/Sort.js";
+import { isFilterActive } from "../../utils/index.js";
 import Button from "../../../../Elements/Button/Button.js";
 import Tag from "../../../../Elements/Tag/Tag.js";
 import { palettes } from "../../../../Elements/Tag/palettes.js";
 import { H6 } from "../../../../Elements/Typography/Typography.js";
 import "../../../../Elements/Typography/index.js";
-import { isFilterActive } from "../../utils/index.js";
 import useQuickFilter from "../../hooks/useQuickFilter.js";
 import { useShareGrid } from "../../hooks/useShareGrid.js";
 import "../../types.js";
@@ -14,8 +14,8 @@ import ExtraControlButtons_default from "../ExtraControlButtons/index.js";
 import QuickFilter_default from "../QuickFilter/index.js";
 import { ControlButtonsContainer, CopiedMessage, Left, Right, ShareButtonWrapper, StyledColumnButton } from "./styles.js";
 import { useEffect, useMemo } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useColor, x } from "@xstyled/styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { i18n } from "@lingui/core";
 import { Trans } from "@lingui/react";
 //#region packages/ui/Modules/CommonGrid/components/ControlButtons/ControlButtons.tsx

package/ui/Modules/CommonGrid/components/DropdownButton/DropdownButton.js

@@ -1,13 +1,13 @@
+import { useClickOutside } from "../../../../Blocks/Modal/hooks/useClickOutside.js";
 import { ArrowDown } from "../../../../Elements/Icon/icons/ArrowDown.js";
 import { ArrowUp } from "../../../../Elements/Icon/icons/ArrowUp.js";
 import "../../../../Elements/Icon/index.js";
 import Button from "../../../../Elements/Button/Button.js";
 import { DropdownMenu } from "../../../../Elements/DropdownMenu/DropdownMenu.js";
 import "../../../../Elements/DropdownMenu/index.js";
-import { useClickOutside } from "../../../../Blocks/Modal/hooks/useClickOutside.js";
 import React, { useCallback, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import styled$1 from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { th as th$1 } from "@xstyled/system";
 //#region packages/ui/Modules/CommonGrid/components/DropdownButton/DropdownButton.tsx
 const ButtonWrapper = styled$1.div`

package/ui/Modules/CommonGrid/components/ExtraControlButtons/ExtraControlButtons.js

@@ -2,8 +2,8 @@ import Button from "../../../../Elements/Button/Button.js";
 import ButtonMore from "../ButtonMore/ButtonMore.js";
 import DropdownSelect_default from "../../../../Elements/DropdownSelect/index.js";
 import "react";
-import { Fragment, jsx } from "react/jsx-runtime";
 import styled$1, { x } from "@xstyled/styled-components";
+import { Fragment, jsx } from "react/jsx-runtime";
 //#region packages/ui/Modules/CommonGrid/components/ExtraControlButtons/ExtraControlButtons.tsx
 const Row = styled$1.div`
   display: flex;

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { jsx } from "react/jsx-runtime";
 import styled$1 from "@xstyled/styled-components";
+import { jsx } from "react/jsx-runtime";
 //#region packages/ui/Modules/CommonGrid/components/FilterDropdown.tsx
 const OverlayWrapper = styled$1.div`
   position: absolute;

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

@@ -1,7 +1,7 @@
-import { useToggleAllCheckbox } from "../../../hooks/useToggleAllCheckbox.js";
 import Checkbox_default from "../../../../../Forms/Checkbox/index.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { useToggleAllCheckbox } from "../../../hooks/useToggleAllCheckbox.js";
 import { x } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/ui/Modules/CommonGrid/components/Filters/ActionsFilter/ActionsFilter.tsx
 const ActionsFilter = ({ actionColumn, rowsData, uxState, handleUxChange }) => {
 	const [allChecked, toggleCheckbox] = useToggleAllCheckbox(rowsData, uxState, handleUxChange);

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

@@ -2,15 +2,17 @@ import { type FC } from 'react';
 import type { DateTimeOthers } from '../../../../../Forms/DatePicker/Datetime/types';
 import type { FilterComponentProps } from '../../../types';
 type InitialView = 'past' | 'future';
-type DatePickerRangeProps = FilterComponentProps<Date[]> & {
-    filterTime?: number;
+type DatePickerRangeBaseProps = FilterComponentProps<Date[]> & {
+    filterTime?: boolean;
     initialView?: InitialView;
     onChange: (value: Date[], others?: DateTimeOthers[]) => void;
 };
-type DateRangeProps = DatePickerRangeProps & {
+export type DatePickerRangeProps = DatePickerRangeBaseProps & {
     error?: string;
     label?: string;
     compact?: boolean;
+    placeholder?: string;
+    showRepeat?: boolean;
 };
-declare const DatePickerRange: FC<DateRangeProps>;
+declare const DatePickerRange: FC<DatePickerRangeProps>;
 export default DatePickerRange;

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

@@ -4,10 +4,10 @@ import DatePicker_default from "../../../../../Forms/DatePicker/index.js";
 import { getCleanValues } from "./utils/getCleanValues.js";
 import { pickerRangeToString } from "./utils/pickerRangeToString.js";
 import React, { useCallback, useMemo, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { DateTime } from "luxon";
 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/Modules/CommonGrid/components/Filters/DatePickerRange/DatePickerRange.tsx
 const RangeWrapper = styled$1.div`
   display: ${({ $compact }) => $compact ? "flex" : "inline-flex"};
@@ -31,9 +31,7 @@ const RangeWrapper = styled$1.div`
 `;
 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 { onChange, error, label, value, others, filterTime, initialView, compact, placeholder, showRepeat = true, OverlayComponent = OverlayComponentDefault, ...rest } = props;
 	const timeFormat = filterTime ? "HH:mm" : false;
 	const cleanValue = React.useMemo(() => getCleanValues(value), [value]);
 	const initialViewDate = useMemo(() => {
@@ -48,7 +46,6 @@ const DatePickerRange = (props) => {
 	}, [cleanValue, initialView]);
 	const [isOpen, setOpen] = useState(false);
 	const setDateFrom = useCallback((v) => {
-		setStartRangeValue(v);
 		onChange([v, cleanValue[1]], others);
 	}, [
 		onChange,
@@ -56,7 +53,6 @@ const DatePickerRange = (props) => {
 		cleanValue
 	]);
 	const setDateTo = useCallback((v) => {
-		setEndRangeValue(v);
 		onChange([cleanValue[0], v], others);
 	}, [
 		onChange,
@@ -82,8 +78,6 @@ const DatePickerRange = (props) => {
 	}, [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]);
@@ -103,6 +97,7 @@ const DatePickerRange = (props) => {
 			iconOnClick: openPicker,
 			onClear: clear,
 			error,
+			placeholder,
 			readOnly: true
 		}), /* @__PURE__ */ jsx(OverlayComponent, { children: /* @__PURE__ */ jsx(Fragment, { children: isOpen && /* @__PURE__ */ jsxs(RangeWrapper, {
 			$compact: compact,
@@ -112,10 +107,10 @@ const DatePickerRange = (props) => {
 				timeFormat,
 				value: cleanValue[0] ?? "",
 				initialViewDate: initialViewDate[0],
-				secondValue: endRangeValue,
+				secondValue: cleanValue[1],
 				onChange: setDateFrom,
-				others: others?.[0],
-				onChangeOthers: handleOthersChangeFrom,
+				others: showRepeat ? others?.[0] : void 0,
+				onChangeOthers: showRepeat ? handleOthersChangeFrom : void 0,
 				icon: false,
 				label: isOpen && i18n._({
 					id: "dataGrid.filterCell.from",
@@ -130,10 +125,10 @@ const DatePickerRange = (props) => {
 				timeFormat,
 				value: secondDatePickerValue,
 				initialViewDate: initialViewDate[1],
-				secondValue: startRangeValue,
+				secondValue: cleanValue[0],
 				onChange: setDateTo,
-				others: others?.[1],
-				onChangeOthers: handleOthersChangeTo,
+				others: showRepeat ? others?.[1] : void 0,
+				onChangeOthers: showRepeat ? handleOthersChangeTo : void 0,
 				icon: false,
 				label: isOpen && i18n._({
 					id: "dataGrid.filterCell.to",

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

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

package/ui/Modules/CommonGrid/components/FloatingButton/FloatingButton.js

@@ -2,8 +2,8 @@ import { DropdownMenu } from "../../../../Elements/DropdownMenu/DropdownMenu.js"
 import "../../../../Elements/DropdownMenu/index.js";
 import Popover from "../../../../Blocks/Popover/index.js";
 import { useCallback, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import styled$1 from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/ui/Modules/CommonGrid/components/FloatingButton/FloatingButton.tsx
 const FloatingWrapper = styled$1.div`
   display: block;

package/ui/Modules/CommonGrid/components/GridInfo/index.js

@@ -1,7 +1,7 @@
 import Icon from "../../../../Elements/Icon/Icon.js";
 import "../../../../Elements/Icon/index.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { x } from "@xstyled/styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Trans } from "@lingui/react";
 //#region packages/ui/Modules/CommonGrid/components/GridInfo/index.tsx
 const GridInfo = ({ isSortTerminatedAppeal, isSortTerminated }) => {

package/ui/Modules/CommonGrid/components/IconList/IconList.js

@@ -1,7 +1,7 @@
 import Icon from "../../../../Elements/Icon/Icon.js";
 import React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import styled$1 from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { th as th$1 } from "@xstyled/system";
 //#region packages/ui/Modules/CommonGrid/components/IconList/IconList.tsx
 const List = styled$1.ul`

package/ui/Modules/CommonGrid/components/ManageColumnForm/ManageColumnForm.js

@@ -1,8 +1,8 @@
 import { Input } from "../../../../Forms/Input/Input.js";
 import { ManageColumnRow } from "./components/ManageColumnRow.js";
 import { useCallback, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { x } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { i18n } from "@lingui/core";
 import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { DndContext, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";

package/ui/Modules/CommonGrid/components/ManageColumnForm/components/ManageColumnRow.js

@@ -1,11 +1,11 @@
 import { Group } from "../../../../../Elements/Icon/icons/Group.js";
+import Toggle from "../../../../../Elements/Toggle/Toggle.js";
 import { H6 } from "../../../../../Elements/Typography/Typography.js";
 import { getTranslatedValue } from "../utils.js";
-import Toggle from "../../../../../Elements/Toggle/Toggle.js";
 import { RowLayout } from "../styles.js";
 import { useCallback, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { x } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 //#region packages/ui/Modules/CommonGrid/components/ManageColumnForm/components/ManageColumnRow.tsx

package/ui/Modules/CommonGrid/components/MobileFilterModal.js

@@ -1,11 +1,11 @@
+import { createFilterType, getFilterName, isFilterActive } from "../utils/index.js";
 import { H6 } from "../../../Elements/Typography/Typography.js";
 import "../../../Elements/Typography/index.js";
-import { createFilterType, getFilterName, isFilterActive } from "../utils/index.js";
 import { Modal } from "../../../Blocks/Modal/Modal.js";
 import { MobileOverlayWrapper } from "./MobileOverlayWrapper.js";
 import { useCallback, useEffect, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { x } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Trans } from "@lingui/react";
 import get from "lodash/fp/get";
 //#region packages/ui/Modules/CommonGrid/components/MobileFilterModal.tsx

package/ui/Modules/CommonGrid/components/MobileSortModal.js

@@ -1,10 +1,10 @@
-import Button_default from "../../../Elements/Button/index.js";
 import { getSortName } from "../utils/index.js";
+import Button_default from "../../../Elements/Button/index.js";
 import { Modal } from "../../../Blocks/Modal/Modal.js";
 import { SortingDown, SortingUp } from "./icons/Sorting.js";
 import { useCallback } from "react";
-import { jsx } from "react/jsx-runtime";
 import { x } from "@xstyled/styled-components";
+import { jsx } from "react/jsx-runtime";
 import { Trans } from "@lingui/react";
 //#region packages/ui/Modules/CommonGrid/components/MobileSortModal.tsx
 const AscIcon = /* @__PURE__ */ jsx(SortingUp, {

package/ui/Modules/CommonGrid/components/OversizedScroll.js

@@ -1,6 +1,6 @@
 import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import styled$1, { css } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/ui/Modules/CommonGrid/components/OversizedScroll.tsx
 const ScrollWrapper = styled$1.div`
   ${(props) => props.columnLayout !== "no-scroll" && css`

package/ui/Modules/CommonGrid/components/PresetsModalBody/index.js

@@ -5,8 +5,8 @@ import { palettes } from "../../../../Elements/Tag/palettes.js";
 import { H6 } from "../../../../Elements/Typography/Typography.js";
 import { TagRemove } from "./components/TagRemove.js";
 import { useMemo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { x } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Trans } from "@lingui/react";
 import isEmpty from "lodash/isEmpty";
 //#region packages/ui/Modules/CommonGrid/components/PresetsModalBody/index.tsx

package/ui/Modules/CommonGrid/components/QuickFilter/QuickFilter.js

@@ -1,7 +1,7 @@
-import Button_default from "../../../../Elements/Button/index.js";
 import Input_default from "../../../../Forms/Input/index.js";
-import { jsx } from "react/jsx-runtime";
+import Button_default from "../../../../Elements/Button/index.js";
 import styled$1, { x } from "@xstyled/styled-components";
+import { jsx } from "react/jsx-runtime";
 //#region packages/ui/Modules/CommonGrid/components/QuickFilter/QuickFilter.tsx
 const StyledInput = styled$1(Input_default)`
   position: ${({ isMobileInputView }) => isMobileInputView ? "absolute" : "relative"};

package/ui/Modules/CommonGrid/components/Resize.js

@@ -1,6 +1,6 @@
 import { useCallback } from "react";
-import { jsx } from "react/jsx-runtime";
 import styled$1 from "@xstyled/styled-components";
+import { jsx } from "react/jsx-runtime";
 //#region packages/ui/Modules/CommonGrid/components/Resize.tsx
 const Resizer = styled$1.div`
   height: 100%;

package/ui/Modules/CommonGrid/components/TablePagination/TablePagination.js

@@ -1,8 +1,8 @@
 import Select from "../../../../Elements/Select/Select.js";
 import { rowsPerPageOptions } from "../../utils/constants.js";
 import { useCallback, useMemo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import styled$1, { x } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Trans } from "@lingui/react";
 //#region packages/ui/Modules/CommonGrid/components/TablePagination/TablePagination.tsx
 const Wrapper = styled$1.span`

package/ui/Modules/CommonGrid/components/gridCells/BoolIcon.js

@@ -2,8 +2,8 @@ import { ToastSuccess } from "../../../../Elements/Icon/icons/ToastSuccess.js";
 import { ToastError } from "../../../../Elements/Icon/icons/ToastError.js";
 import "../../../../Elements/Icon/index.js";
 import React from "react";
-import { jsx } from "react/jsx-runtime";
 import styled$1 from "@xstyled/styled-components";
+import { jsx } from "react/jsx-runtime";
 import get from "lodash/fp/get";
 //#region packages/ui/Modules/CommonGrid/components/gridCells/BoolIcon.tsx
 const Center = styled$1.div`

package/ui/Modules/CommonGrid/components/gridCells/Date.js

@@ -1,6 +1,6 @@
 import "react";
-import { jsx } from "react/jsx-runtime";
 import { DateTime } from "luxon";
+import { jsx } from "react/jsx-runtime";
 import get from "lodash/fp/get";
 //#region packages/ui/Modules/CommonGrid/components/gridCells/Date.tsx
 const DateCell = ({ rowData, column }) => {

package/ui/Modules/CommonGrid/components/gridCells/DateTime.js

@@ -1,6 +1,6 @@
 import "react";
-import { jsx } from "react/jsx-runtime";
 import { DateTime } from "luxon";
+import { jsx } from "react/jsx-runtime";
 import get from "lodash/fp/get";
 //#region packages/ui/Modules/CommonGrid/components/gridCells/DateTime.tsx
 const defaultProps = { dateTimeFormat: "dd. MM. yyyy HH:mm" };

package/ui/Modules/CommonGrid/components/gridCells/EnumInCell.js

@@ -1,7 +1,7 @@
 import HighlightBox_default from "../../../../Elements/HighlightBox/index.js";
 import { useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
 import styled$1 from "@xstyled/styled-components";
+import { jsx } from "react/jsx-runtime";
 //#region packages/ui/Modules/CommonGrid/components/gridCells/EnumInCell.tsx
 const Center = styled$1.div`
   display: flex;

package/ui/Modules/CommonGrid/components/gridCells/HoverBubble.js

@@ -1,6 +1,6 @@
 import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import styled$1 from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
 import get from "lodash/fp/get";
 //#region packages/ui/Modules/CommonGrid/components/gridCells/HoverBubble.tsx
 const Wrapper = styled$1.div`

package/ui/Modules/CommonGrid/components/gridCells/IconButtonInCell.js

@@ -1,8 +1,8 @@
 import Icon from "../../../../Elements/Icon/Icon.js";
 import { Spinner } from "../../../../Elements/Spinner/Spinner.js";
 import "react";
-import { Fragment, jsx } from "react/jsx-runtime";
 import { x } from "@xstyled/styled-components";
+import { Fragment, jsx } from "react/jsx-runtime";
 import { Link } from "react-router-dom";
 //#region packages/ui/Modules/CommonGrid/components/gridCells/IconButtonInCell.tsx
 const IconButtonInCell = ({ icon, isLoading, onClick, linkTo }) => {

package/ui/Modules/CommonGrid/components/gridCells/ImageCell.js

@@ -1,7 +1,7 @@
 import Image from "../../../../Elements/Image/Image.js";
 import "react";
-import { jsx } from "react/jsx-runtime";
 import styled$1 from "@xstyled/styled-components";
+import { jsx } from "react/jsx-runtime";
 import get from "lodash/fp/get";
 //#region packages/ui/Modules/CommonGrid/components/gridCells/ImageCell.tsx
 const ImageWrapper = styled$1.div`

package/ui/Modules/CommonGrid/components/gridCells/RemoveItem.js

@@ -1,7 +1,7 @@
 import Icon from "../../../../Elements/Icon/Icon.js";
 import React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import styled$1 from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Trans } from "@lingui/react";
 //#region packages/ui/Modules/CommonGrid/components/gridCells/RemoveItem.tsx
 const Wrap = styled$1.div`

package/ui/Modules/CommonGrid/components/gridCells/RowActionsCell.js

@@ -1,8 +1,8 @@
 import Checkbox_default from "../../../../Forms/Checkbox/index.js";
 import { IconButtonInCell } from "./IconButtonInCell.js";
 import { useCallback, useMemo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { x } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { isFunction, omit } from "lodash/fp";
 //#region packages/ui/Modules/CommonGrid/components/gridCells/RowActionsCell.tsx
 const RowActionsCell = ({ actionColumnDefinition, rowData, addRowNumbers, rowIndex, rowNumberWidth = 0, checkedRows, withCheckboxes, onUxChange, onRowAction }) => {

package/ui/Modules/CommonGrid/hooks/useCreatePreset.js

@@ -1,5 +1,5 @@
-import { useModal } from "../../../Blocks/Modal/hooks/useModal.js";
 import { useEvent } from "./useEvent.js";
+import { useModal } from "../../../Blocks/Modal/hooks/useModal.js";
 import { useCallback, useState } from "react";
 import isEmpty from "lodash/isEmpty";
 //#region packages/ui/Modules/CommonGrid/hooks/useCreatePreset.ts

package/ui/Modules/CommonGrid/hooks/usePresetFileHandlers.js

@@ -1,6 +1,6 @@
+import omit from "lodash/omit";
 import { useCallback, useRef } from "react";
 import { i18n } from "@lingui/core";
-import omit from "lodash/omit";
 //#region packages/ui/Modules/CommonGrid/hooks/usePresetFileHandlers.ts
 const usePresetFileHandlers = ({ gridName, gridActions, gridSelectors }) => {
 	const fileInputRef = useRef(null);

package/ui/Modules/CommonGrid/hooks/useQuickFilter.js

@@ -1,9 +1,9 @@
+import { createFilterType } from "../utils/index.js";
+import { useAddFilter } from "./useAddFilter.js";
 import { useCheckDeviceWidth } from "../../../utils/CheckDeviceWidth/checkDeviceWidth.js";
 import { getTranslatedValue } from "../components/ManageColumnForm/utils.js";
-import { createFilterType } from "../utils/index.js";
 import { clearShareParams } from "../utils/shareUrl/clearShareParams.js";
 import "../utils/shareUrl/index.js";
-import { useAddFilter } from "./useAddFilter.js";
 import { useCallback, useEffect, useState } from "react";
 //#region packages/ui/Modules/CommonGrid/hooks/useQuickFilter.ts
 const defaultVoidFunction = (...args) => null;

package/ui/Modules/CommonGrid/index.d.ts

@@ -1,10 +1,12 @@
-import CommonGrid from './CommonGridContainer';
 import withReduxActions from './HoC/withReduxActions';
-import reducer, { actionPrefix, createActions, createSelectors, createFullSelector, actionTypes } from './store';
+import DatePickerRange from './components/Filters/DatePickerRange';
+import { useAddFilter } from './hooks/useAddFilter';
+import { useEvent } from './hooks/useEvent';
 import useFloatingButton from './hooks/useFloatingButton';
+import CommonGrid from './CommonGridContainer';
+import reducer, { actionPrefix, createActions, createSelectors, createFullSelector, actionTypes } from './store';
 import * as Types from './types';
 export * from './components/gridCells';
-import { useAddFilter } from './hooks/useAddFilter';
-import { useEvent } from './hooks/useEvent';
+export type { DatePickerRangeProps } from './components/Filters/DatePickerRange';
 export default CommonGrid;
-export { withReduxActions, reducer, actionPrefix, actionTypes, createActions, createSelectors, createFullSelector, Types, useFloatingButton, useAddFilter, useEvent, };
+export { withReduxActions, reducer, actionPrefix, actionTypes, createActions, createSelectors, createFullSelector, Types, useFloatingButton, useAddFilter, useEvent, DatePickerRange };

package/ui/Modules/CommonGrid/index.js

@@ -1,5 +1,9 @@
+import store_default, { actionPrefix, actionTypes, createActions, createFullSelector, createSelectors } from "./store/index.js";
+import withReduxActions from "./HoC/withReduxActions.js";
+import DatePickerRange_default from "./components/Filters/DatePickerRange/index.js";
 import { useEvent } from "./hooks/useEvent.js";
 import { useAddFilter } from "./hooks/useAddFilter.js";
+import useFloatingButton from "./hooks/useFloatingButton.js";
 import { types_exports } from "./types.js";
 import { DateCell } from "./components/gridCells/Date.js";
 import { DateTimeCell } from "./components/gridCells/DateTime.js";
@@ -16,11 +20,8 @@ import { HoverBubble } from "./components/gridCells/HoverBubble.js";
 import { RowActionsCell } from "./components/gridCells/RowActionsCell.js";
 import { ToggleCell } from "./components/gridCells/ToggleCell.js";
 import "./components/gridCells/index.js";
-import store_default, { actionPrefix, actionTypes, createActions, createFullSelector, createSelectors } from "./store/index.js";
 import CommonGridContainer from "./CommonGridContainer.js";
-import withReduxActions from "./HoC/withReduxActions.js";
-import useFloatingButton from "./hooks/useFloatingButton.js";
 //#region packages/ui/Modules/CommonGrid/index.ts
 var CommonGrid_default = CommonGridContainer;
 //#endregion
-export { BoolIconCell, ButtonInCell, DateCell, DateTimeCell, EnumInCell, HoverBubble, IconButtonInCell, ImageCell, LinkInCell, RemoveCell, RowActionsCell, StringJoinCell, SwitchInCell, ToggleCell, types_exports as Types, actionPrefix, actionTypes, createActions, createFullSelector, createSelectors, CommonGrid_default as default, store_default as reducer, useAddFilter, useEvent, useFloatingButton, withReduxActions };
+export { BoolIconCell, ButtonInCell, DateCell, DatePickerRange_default as DatePickerRange, DateTimeCell, EnumInCell, HoverBubble, IconButtonInCell, ImageCell, LinkInCell, RemoveCell, RowActionsCell, StringJoinCell, SwitchInCell, ToggleCell, types_exports as Types, actionPrefix, actionTypes, createActions, createFullSelector, createSelectors, CommonGrid_default as default, store_default as reducer, useAddFilter, useEvent, useFloatingButton, withReduxActions };

package/ui/Modules/CommonGrid/store/index.js

@@ -1,8 +1,8 @@
 import migrateState_default from "./migrateState.js";
-import getOr from "lodash/fp/getOr";
-import omit from "lodash/omit";
 import produce from "immer";
 import { createSelector } from "reselect";
+import getOr from "lodash/fp/getOr";
+import omit from "lodash/omit";
 //#region packages/ui/Modules/CommonGrid/store/index.ts
 const initialState = {
 	page: 1,

package/ui/Modules/CommonGrid/storybook/utils/utils.js

@@ -1,6 +1,6 @@
+import withReduxActions from "../../HoC/withReduxActions.js";
 import { rowClassSymbol } from "../../types.js";
 import CommonGridContainer from "../../CommonGridContainer.js";
-import withReduxActions from "../../HoC/withReduxActions.js";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
 import faker from "faker";

package/ui/Modules/CommonGrid/storybook/utils/withRedux.js

@@ -1,7 +1,7 @@
 import store_default from "../../store/index.js";
-import { jsx } from "react/jsx-runtime";
 import { Provider } from "react-redux";
 import { combineReducers, compose, createStore } from "redux";
+import { jsx } from "react/jsx-runtime";
 //#region packages/ui/Modules/CommonGrid/storybook/utils/withRedux.tsx
 const reduxComposeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 const withProvider = (story) => {