@pisell/date-picker 1.0.86 → 1.0.88

package/es/ActionBar/index.less

@@ -7,7 +7,7 @@
   .date-picker-action-bar-right {
     flex: 1;
     display: flex;
-    justify-content: end;
+    justify-content: end !important;
     padding: 16px;
     border-top: 1px solid rgba(0, 0, 0, 0.12);
     gap: 16px;

package/es/OldActionBar/index.d.ts

@@ -0,0 +1,18 @@
+import { ButtonProps } from "antd";
+import { Dayjs } from "dayjs";
+import "./index.less";
+interface ActionBarProps {
+    ownerState: any;
+    onCancel: () => void;
+    onChange: (val: any[], type?: "time") => void;
+    onOk: () => void;
+    value: any[];
+    showTime?: boolean | {
+        defaultValue: Dayjs;
+        [key: string]: any;
+    }[];
+    okButtonProps?: ButtonProps;
+    cancelButtonProps?: ButtonProps;
+}
+declare const ActionBar: (props: ActionBarProps) => JSX.Element;
+export default ActionBar;

package/es/OldActionBar/index.js

@@ -0,0 +1,113 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import React, { useMemo, useContext } from "react";
+import classNames from "classnames";
+import { Button, Space, TimePicker } from "antd";
+import { MuiPickersAdapterContext } from "@mui/x-date-pickers";
+import { isArr, isMobile } from "@pisell/utils";
+import dayjs from "dayjs";
+import { getText, pLocaleMap } from "../locales";
+import "./index.less";
+var ActionBar = function ActionBar(props) {
+  var ownerState = props.ownerState,
+    onCancel = props.onCancel,
+    onOk = props.onOk,
+    onChange = props.onChange,
+    showTime = props.showTime,
+    _props$value = props.value,
+    value = _props$value === void 0 ? [] : _props$value,
+    okButtonProps = props.okButtonProps,
+    cancelButtonProps = props.cancelButtonProps;
+  var local = useContext(MuiPickersAdapterContext);
+  var locale = useMemo(function () {
+    return local.utils.locale || "en";
+  }, [local.utils.locale]);
+  var slotProps = ownerState.slotProps;
+  var _ref = (slotProps === null || slotProps === void 0 ? void 0 : slotProps.shortcuts) || {},
+    items = _ref.items;
+  var hasShortcuts = !!items.length;
+  var handleStartChange = function handleStartChange(val) {
+    var _start$set, _start$set$set;
+    var newValue = _toConsumableArray(value);
+    var start = newValue[0] || dayjs();
+    newValue[0] = (start === null || start === void 0 ? void 0 : (_start$set = start.set("hour", (val === null || val === void 0 ? void 0 : val.get("hour")) || 0)) === null || _start$set === void 0 ? void 0 : (_start$set$set = _start$set.set("minute", (val === null || val === void 0 ? void 0 : val.get("minute")) || 0)) === null || _start$set$set === void 0 ? void 0 : _start$set$set.set("second", (val === null || val === void 0 ? void 0 : val.get("second")) || 0)) || null;
+    onChange(newValue, "time");
+  };
+  var handleEndChange = function handleEndChange(val) {
+    var _end$set, _end$set$set;
+    var newValue = _toConsumableArray(value);
+    var end = newValue[1] || dayjs();
+    newValue[1] = (end === null || end === void 0 ? void 0 : (_end$set = end.set("hour", (val === null || val === void 0 ? void 0 : val.get("hour")) || 0)) === null || _end$set === void 0 ? void 0 : (_end$set$set = _end$set.set("minute", (val === null || val === void 0 ? void 0 : val.get("minute")) || 0)) === null || _end$set$set === void 0 ? void 0 : _end$set$set.set("second", (val === null || val === void 0 ? void 0 : val.get("second")) || 0)) || null;
+    onChange(newValue, "time");
+  };
+  var spaceStyle = useMemo(function () {
+    return isMobile() ? {
+      display: "flex",
+      justifyContent: "end",
+      marginBottom: 12
+    } : {
+      display: "flex"
+    };
+  }, []);
+  var startTimeProps = useMemo(function () {
+    if (isArr(showTime) && showTime[0]) {
+      return showTime[0];
+    }
+    return {};
+  }, [showTime]);
+  var endTimeProps = useMemo(function () {
+    if (isArr(showTime) && showTime[1]) {
+      return showTime[1];
+    }
+    return {};
+  }, [showTime]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(props.className, "date-picker-action-bar")
+  }, hasShortcuts && /*#__PURE__*/React.createElement("div", {
+    className: "date-picker-action-bar-left"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "date-picker-action-bar-right",
+    style: isMobile() ? {
+      display: "block"
+    } : {}
+  }, /*#__PURE__*/React.createElement(Space, {
+    split: "-",
+    style: _objectSpread({}, spaceStyle)
+  }, showTime ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TimePicker, _extends({
+    placeholder: getText("action-bar-start.time", pLocaleMap[locale])
+  }, startTimeProps, {
+    value: value[0],
+    popupClassName: "date-picker-action-bar-time-picker-popup",
+    onChange: handleStartChange,
+    inputReadOnly: true
+  })), /*#__PURE__*/React.createElement(TimePicker, _extends({
+    placeholder: getText("action-bar-end.time", pLocaleMap[locale])
+  }, endTimeProps, {
+    value: value[1],
+    popupClassName: "date-picker-action-bar-time-picker-popup",
+    onChange: handleEndChange,
+    inputReadOnly: true
+  }))) : /*#__PURE__*/React.createElement("div", null)), /*#__PURE__*/React.createElement(Space, {
+    style: _objectSpread(_objectSpread({}, spaceStyle), {}, {
+      margin: 0
+    })
+  }, /*#__PURE__*/React.createElement(Button, _extends({}, cancelButtonProps || {}, {
+    onClick: onCancel
+  }), getText("action-bar-cancel", pLocaleMap[locale])), /*#__PURE__*/React.createElement(Button, _extends({
+    type: "primary"
+  }, okButtonProps || {}, {
+    onClick: onOk
+  }), getText("action-bar-apply", pLocaleMap[locale])))));
+};
+export default ActionBar;

package/es/OldActionBar/index.less

@@ -0,0 +1,18 @@
+.date-picker-action-bar {
+  display: flex;
+  .date-picker-action-bar-left {
+    width: 192px;
+    border-right: 1px solid rgba(0, 0, 0, 0.12);
+  }
+  .date-picker-action-bar-right {
+    flex: 1;
+    display: flex;
+    justify-content: space-between;
+    padding: 16px;
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+  }
+}
+
+.date-picker-action-bar-time-picker-popup {
+  z-index: 1400;
+}

package/es/OldPisellDateRangePicker/index.d.ts

@@ -0,0 +1,79 @@
+import { Dayjs } from 'dayjs';
+import React from 'react';
+import { ButtonProps } from 'antd';
+import { PopperPlacementType } from '@mui/base/Popper/Popper.types';
+import { PresetType } from '../Shortcuts';
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/en';
+import 'dayjs/locale/zh-tw';
+import './index.less';
+export interface PisellDateRangePickerProps {
+    /** 再次选择日期时是否清除结束时间 */
+    clearEndOnSelection?: boolean;
+    /** 日期选择确认回调 */
+    onChange?: (day: (Dayjs | null)[]) => void;
+    /** 日期改变回调 此处只为了组件外拿到当前日期项进行状态操作 通常情况下只使用onChange来拿value */
+    onDateChange?: (day: (Dayjs | null)[]) => void;
+    /** 日期选择值 */
+    value?: Dayjs[];
+    /** 日期选择默认值 */
+    defaultValue?: Dayjs[];
+    /** 快捷选择项 */
+    presets?: PresetType[];
+    /** 类名 */
+    className?: string;
+    /** 是否显示时间选择 这里参数为antd TimePickerProps */
+    showTime?: boolean | {
+        defaultValue: Dayjs;
+        [key: string]: any;
+    }[];
+    /** 占位符 */
+    placeholder?: string;
+    /** 是否禁用日期 */
+    disabledDate?: (day: Dayjs, position: 'start' | 'end', value: Dayjs[]) => boolean;
+    /** 日期格式 */
+    format?: string;
+    /** 后缀图标 */
+    suffixIcon?: React.ReactNode;
+    /** 是否显示边框 */
+    bordered?: boolean;
+    /** 是否打开日期选择 */
+    open?: boolean;
+    /** 关闭回调 */
+    onClose?: () => void;
+    /** 打开回调 */
+    onOpen?: () => void;
+    /** 弹窗宽度 */
+    popupWidth?: number;
+    /** 最小日期 */
+    minDate?: Dayjs;
+    /** 最大日期 */
+    maxDate?: Dayjs;
+    /** 月份切换事件 */
+    onMonthChange?: (value: Dayjs) => void;
+    /** 额外的弹出日历 className	 */
+    popupClassName?: string;
+    /** 默认显示月份	 */
+    defaultCalendarMonth?: Dayjs;
+    /** ok 按钮 props		 */
+    okButtonProps?: ButtonProps;
+    /** cancel 按钮 props		 */
+    cancelButtonProps?: ButtonProps;
+    /**
+     * CSS media query when `Mobile` mode will be changed to `Desktop`.
+     * @default '@media (pointer: fine)'
+     * @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
+     */
+    desktopModeMediaQuery?: string;
+    style?: React.CSSProperties;
+    /** 是否展示清除按钮 */
+    allowClear?: boolean;
+    /** true 将弹窗当前DOM层次结构下 false 追加到body */
+    disablePortal?: boolean;
+    /** 弹窗放置位置 */
+    placement?: PopperPlacementType;
+    /** 输入框只读 */
+    inputReadOnly: boolean;
+}
+declare const PisellDateRangePicker: (props: PisellDateRangePickerProps) => JSX.Element;
+export default PisellDateRangePicker;

package/es/OldPisellDateRangePicker/index.js

@@ -0,0 +1,264 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useState, useEffect, useMemo, useContext } from 'react';
+import { DateRangePicker } from "../DateRangePicker";
+import ActionBar from "../OldActionBar";
+import Shortcuts from "../Shortcuts";
+import { SingleInputDateRangeField } from "../SingleInputDateRangeField";
+import classNames from 'classnames';
+import { isArr, isBoolean } from '@pisell/utils';
+import useCssVariables from "../PisellDateRangePicker/useCssVariables";
+import CloseCircle from "../icon/CloseCircle";
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/en';
+import 'dayjs/locale/zh-tw';
+import { getCurrentLocale, isMobile } from "../utils";
+import { LocaleContext } from "../PisellDateRangePicker/LocaleContext";
+import { pLocaleMap } from "../locales";
+import "./index.less";
+var transDayjsArr = function transDayjsArr(dayjsArr, defaultValue) {
+  var _newArr;
+  var newArr = dayjsArr || defaultValue || [null, null];
+  if ((dayjsArr === null || dayjsArr === void 0 ? void 0 : dayjsArr.length) === 0) {
+    newArr = defaultValue || [null, null];
+  }
+  return (_newArr = newArr) === null || _newArr === void 0 ? void 0 : _newArr.map(function (item) {
+    return item ? item : null;
+  });
+};
+// api详情
+// https://mui.com/x/api/date-pickers/date-range-picker/
+var PisellDateRangePicker = function PisellDateRangePicker(props) {
+  var propsOnChange = props.onChange,
+    propsValue = props.value,
+    _props$presets = props.presets,
+    presets = _props$presets === void 0 ? [] : _props$presets,
+    className = props.className,
+    showTime = props.showTime,
+    placeholder = props.placeholder,
+    disabledDate = props.disabledDate,
+    propsFormat = props.format,
+    defaultValue = props.defaultValue,
+    suffixIcon = props.suffixIcon,
+    _props$bordered = props.bordered,
+    bordered = _props$bordered === void 0 ? true : _props$bordered,
+    propsOpen = props.open,
+    onClose = props.onClose,
+    _props$popupWidth = props.popupWidth,
+    popupWidth = _props$popupWidth === void 0 ? 625 : _props$popupWidth,
+    clearEndOnSelection = props.clearEndOnSelection,
+    minDate = props.minDate,
+    maxDate = props.maxDate,
+    onOpen = props.onOpen,
+    onMonthChange = props.onMonthChange,
+    popupClassName = props.popupClassName,
+    defaultCalendarMonth = props.defaultCalendarMonth,
+    okButtonProps = props.okButtonProps,
+    cancelButtonProps = props.cancelButtonProps,
+    onDateChange = props.onDateChange,
+    desktopModeMediaQuery = props.desktopModeMediaQuery,
+    style = props.style,
+    allowClear = props.allowClear,
+    disablePortal = props.disablePortal,
+    _props$placement = props.placement,
+    placement = _props$placement === void 0 ? 'auto' : _props$placement,
+    inputReadOnly = props.inputReadOnly;
+  var _useState = useState(propsOpen !== null && propsOpen !== void 0 ? propsOpen : false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var _ref = useContext(LocaleContext) || {},
+    locale = _ref.locale;
+  useEffect(function () {
+    isBoolean(propsOpen) && setOpen(propsOpen);
+  }, [propsOpen]);
+  var _useState3 = useState(function () {
+      return transDayjsArr(propsValue, defaultValue);
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    _value = _useState4[0],
+    setValue = _useState4[1];
+  useEffect(function () {
+    setValue(transDayjsArr(propsValue, defaultValue));
+  }, [propsValue]);
+  var handleOpen = function handleOpen() {
+    setOpen(true);
+    onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+  };
+  var handleClose = function handleClose() {
+    setOpen(false);
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+    onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(transDayjsArr(propsValue, defaultValue));
+    setValue(transDayjsArr(propsValue, defaultValue));
+  };
+  var handleOk = function handleOk() {
+    setOpen(false);
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+    propsOnChange === null || propsOnChange === void 0 ? void 0 : propsOnChange(_value);
+  };
+  var _presets = useMemo(function () {
+    if (isMobile()) return [];
+    return presets.map(function (item) {
+      var getValue = function getValue() {
+        if (typeof item.getValue === 'function') {
+          return item.getValue();
+        }
+        return item === null || item === void 0 ? void 0 : item.value;
+      };
+      return {
+        label: item.label,
+        getValue: getValue
+      };
+    });
+  }, [presets]);
+  var handleChange = function handleChange(val, type) {
+    var newVal = val;
+    if (isArr(showTime) && type !== 'time') {
+      newVal = newVal.map(function (item, index) {
+        var _showTime$index;
+        if (showTime !== null && showTime !== void 0 && (_showTime$index = showTime[index]) !== null && _showTime$index !== void 0 && _showTime$index.defaultValue) {
+          var _showTime$index2, _showTime$index2$defa, _showTime$index3, _showTime$index3$defa, _showTime$index4, _showTime$index4$defa;
+          return (item === null || item === void 0 ? void 0 : item.set('hour', (_showTime$index2 = showTime[index]) === null || _showTime$index2 === void 0 ? void 0 : (_showTime$index2$defa = _showTime$index2.defaultValue) === null || _showTime$index2$defa === void 0 ? void 0 : _showTime$index2$defa.get('hour')).set('minute', (_showTime$index3 = showTime[index]) === null || _showTime$index3 === void 0 ? void 0 : (_showTime$index3$defa = _showTime$index3.defaultValue) === null || _showTime$index3$defa === void 0 ? void 0 : _showTime$index3$defa.get('minute')).set('second', (_showTime$index4 = showTime[index]) === null || _showTime$index4 === void 0 ? void 0 : (_showTime$index4$defa = _showTime$index4.defaultValue) === null || _showTime$index4$defa === void 0 ? void 0 : _showTime$index4$defa.get('second'))) || null;
+        }
+        return item || null;
+      });
+    }
+    if (clearEndOnSelection && type !== 'set' && _value.filter(Boolean).length === 2) {
+      newVal = [newVal[0], null];
+    }
+    onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(newVal);
+    setValue(newVal);
+  };
+  var hasPreset = (_presets === null || _presets === void 0 ? void 0 : _presets.length) > 0;
+  useCssVariables({
+    variables: {
+      '--pisell-date-range-picker-popup-width': "".concat(hasPreset ? popupWidth + 192 : popupWidth, "px")
+    },
+    dom: document.body
+  });
+  var handleClear = function handleClear(e) {
+    e.stopPropagation();
+    setValue([null, null]);
+    setOpen(false);
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+    propsOnChange === null || propsOnChange === void 0 ? void 0 : propsOnChange([null, null]);
+  };
+  var endAdornment = useMemo(function () {
+    if (!allowClear) {
+      return suffixIcon;
+    }
+    if (_value !== null && _value !== void 0 && _value.some(function (item) {
+      return !!item;
+    })) {
+      return /*#__PURE__*/React.createElement(CloseCircle, {
+        className: "pisell-date-range-picker-clear",
+        onClick: handleClear
+      });
+    }
+  }, [suffixIcon, allowClear, _value]);
+  var readOnlyProps = useMemo(function () {
+    if (inputReadOnly) {
+      return {
+        readOnly: true,
+        selectedSections: null
+      };
+    }
+    return {};
+  }, [inputReadOnly]);
+  var format = useMemo(function () {
+    if (propsFormat) {
+      return propsFormat;
+    }
+    var localeValue = locale;
+    if (!localeValue) {
+      localeValue = pLocaleMap[getCurrentLocale()];
+    }
+    return localeValue === 'en' || localeValue === 'en-US' ? 'DD/MM/YYYY' : 'YYYY/MM/DD';
+  }, [propsFormat, locale]);
+  console.log(_presets, presets, '_presets');
+  return /*#__PURE__*/React.createElement("span", {
+    className: classNames(className, 'pisell-date-range-picker', 'pisell-date-range-picker-old', {
+      'pisell-date-range-picker-no-border': !bordered
+    }),
+    style: style,
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/React.createElement(DateRangePicker
+  // defaultValue={defaultValue}
+  // key={`${_value?.[0]?.valueOf()}-${_value?.[1]?.valueOf()}`}
+  , {
+    desktopModeMediaQuery: desktopModeMediaQuery,
+    onMonthChange: onMonthChange,
+    minDate: minDate,
+    maxDate: maxDate,
+    format: format,
+    label: placeholder,
+    value: _value,
+    closeOnSelect: false,
+    onClose: handleClose,
+    onChange: handleChange,
+    onOpen: handleOpen,
+    open: open,
+    defaultCalendarMonth: defaultCalendarMonth,
+    shouldDisableDate: function shouldDisableDate(current, position) {
+      return disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(current, position, _value);
+    },
+    slots: {
+      actionBar: ActionBar,
+      shortcuts: Shortcuts,
+      field: SingleInputDateRangeField
+    },
+    dayOfWeekFormatter: function dayOfWeekFormatter(day) {
+      return day;
+    },
+    slotProps: {
+      shortcuts: {
+        items: _presets,
+        changeImportance: 'set',
+        onChange: handleChange
+      },
+      actionBar: {
+        onOk: handleOk,
+        onCancel: handleClose,
+        showTime: showTime,
+        onChange: handleChange,
+        value: _value,
+        okButtonProps: okButtonProps,
+        cancelButtonProps: cancelButtonProps
+      },
+      field: _objectSpread({
+        value: _value,
+        size: 'small',
+        fullWidth: true,
+        // variant: "standard",
+        // hiddenLabel: true,
+        InputProps: {
+          endAdornment: endAdornment
+        }
+      }, readOnlyProps),
+      popper: {
+        className: classNames(popupClassName, "pisell-date-range-picker-popper-old"),
+        disablePortal: disablePortal,
+        placement: placement
+      },
+      dialog: {
+        disablePortal: disablePortal
+      },
+      mobilePaper: {
+        className: popupClassName
+      }
+    }
+  }));
+};
+export default PisellDateRangePicker;

package/es/OldPisellDateRangePicker/index.less

@@ -0,0 +1,102 @@
+.pisell-date-range-picker {
+  display: inline-block;
+  width: 100%;
+  //width: 350px;
+  //.MuiInputBase-input {
+  //  padding: 10px;
+  //}
+  label {
+    font-size: 14px;
+  }
+  .pisell-date-range-picker-clear {
+    color: rgba(0, 0, 0, 0.25);
+    cursor: pointer;
+    display: none;
+    line-height: 0;
+    :hover {
+      color: rgba(0, 0, 0, 0.45);
+    }
+  }
+  :hover {
+    .pisell-date-range-picker-clear {
+      display: block;
+    }
+  }
+}
+.pisell-date-range-picker-no-border {
+  .MuiOutlinedInput-notchedOutline {
+    border: none;
+  }
+}
+.MuiOutlinedInput-notchedOutline {
+  legend {
+    color: inherit !important;
+    width: auto !important;
+    margin-bottom: 0.5em !important;
+    font-size: 1.5em !important;
+    line-height: 11px !important;
+    border: none !important;
+  }
+}
+
+.MuiPickersPopper-root {
+  .MuiPickersLayout-root {
+    width: var(--pisell-date-range-picker-popup-width, 625px);
+    .MuiDateRangeCalendar-root {
+      width: 100%;
+      flex: 1;
+      .MuiDateRangeCalendar-monthContainer {
+        width: 50%;
+        .MuiDayCalendar-header {
+          padding: 0 20px;
+          .MuiDayCalendar-weekDayLabel {
+            flex: 1;
+            width: 100%;
+          }
+        }
+        .MuiPickersSlideTransition-root {
+          min-width: 200px;
+          //min-height: auto;
+          &::before {
+            content: "";
+            display: block;
+            padding-top: 67%;
+          }
+        }
+        .MuiDayCalendar-monthContainer {
+          padding: 0 20px;
+        }
+        .MuiDayCalendar-weekContainer {
+          .MuiDateRangePickerDay-root {
+            flex: 1;
+            .MuiDateRangePickerDay-day {
+              width: 100%;
+              height: auto;
+              &::before {
+                content: "";
+                display: block;
+                padding-top: 100%;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.MuiDialog-root {
+  .MuiPickersLayout-toolbar {
+    display: none;
+  }
+}
+
+.MuiPickersLayout-shortcuts {
+  grid-column: 1 !important;
+  grid-row: 1/3 !important;
+}
+.pisell-date-range-picker-popper-old {
+  .MuiPickersLayout-root {
+    display: grid !important;
+  }
+}

package/es/PisellDateRangePicker/index.js

@@ -153,6 +153,14 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
     } else {
       setCurrentShortcut(null);
     }
+    if (!clearEndOnSelection && type !== "shortcuts" && type !== "write") {
+      if (rangePosition === 'start') {
+        newVal = [newVal[0], newVal[0]];
+      }
+      if (!newVal[1]) {
+        newVal = [newVal[0], newVal[0]];
+      }
+    }
     if (isArr(showTime) && type !== "time") {
       newVal = newVal.map(function (item, index) {
         var _showTime$index;
@@ -163,14 +171,6 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
         return item || null;
       });
     }
-    if (!clearEndOnSelection && type !== "shortcuts" && type !== "write") {
-      if (rangePosition === 'start') {
-        newVal = [newVal[0], newVal[0]];
-      }
-      if (!newVal[1]) {
-        newVal = [newVal[0], newVal[0]];
-      }
-    }
     if (clearEndOnSelection && type !== "set" && _value.filter(Boolean).length === 2) {
       newVal = [newVal[0], null];
     }

package/es/index.d.ts

@@ -1,5 +1,6 @@
 import { ConfigProvider } from 'antd';
 import PisellDateRangePicker from "./PisellDateRangePicker";
+import OldPisellDateRangePicker from "./OldPisellDateRangePicker";
 import { LocaleContext, LocaleProvider } from "./PisellDateRangePicker/LocaleContext";
 export * from "@mui/x-date-pickers";
 export * from "@mui/material/styles";
@@ -19,6 +20,7 @@ export * from "./dateRangeViewRenderers";
 export type { DateRange, RangePosition } from "./internals/models/range";
 export type { UseDateRangeFieldProps } from "./internals/models/dateRange";
 export { PisellDateRangePicker as RangePicker };
+export { OldPisellDateRangePicker };
 export { LocaleContext, LocaleProvider, ConfigProvider };
 export { getDatePickerValueByShortcut, formatPresets, getShortcutValue, getPresetLabel, getDatePickerValue, } from "./utils/index";
 export * from "./models";

package/es/index.js

@@ -1,5 +1,6 @@
 import { ConfigProvider } from 'antd';
 import PisellDateRangePicker from "./PisellDateRangePicker";
+import OldPisellDateRangePicker from "./OldPisellDateRangePicker";
 import { LocaleContext, LocaleProvider } from "./PisellDateRangePicker/LocaleContext";
 export * from "@mui/x-date-pickers";
 export * from "@mui/material/styles";
@@ -24,6 +25,7 @@ export * from "./StaticDateRangePicker";
 // View renderers
 export * from "./dateRangeViewRenderers";
 export { PisellDateRangePicker as RangePicker };
+export { OldPisellDateRangePicker };
 export { LocaleContext, LocaleProvider, ConfigProvider };
 export { getDatePickerValueByShortcut, formatPresets, getShortcutValue, getPresetLabel, getDatePickerValue } from "./utils/index";
 export * from "./models";