@pisell/date-picker 1.0.87 → 1.0.89

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.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.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/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";

package/lib/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/lib/OldActionBar/index.js

@@ -0,0 +1,129 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/OldActionBar/index.tsx
+var OldActionBar_exports = {};
+__export(OldActionBar_exports, {
+  default: () => OldActionBar_default
+});
+module.exports = __toCommonJS(OldActionBar_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_antd = require("antd");
+var import_x_date_pickers = require("@mui/x-date-pickers");
+var import_utils = require("@pisell/utils");
+var import_dayjs = __toESM(require("dayjs"));
+var import_locales = require("../locales");
+var import_index = require("./index.less");
+var ActionBar = (props) => {
+  const {
+    ownerState,
+    onCancel,
+    onOk,
+    onChange,
+    showTime,
+    value = [],
+    okButtonProps,
+    cancelButtonProps
+  } = props;
+  const local = (0, import_react.useContext)(import_x_date_pickers.MuiPickersAdapterContext);
+  const locale = (0, import_react.useMemo)(() => {
+    return local.utils.locale || "en";
+  }, [local.utils.locale]);
+  const { slotProps } = ownerState;
+  const { items } = (slotProps == null ? void 0 : slotProps.shortcuts) || {};
+  const hasShortcuts = !!items.length;
+  const handleStartChange = (val) => {
+    var _a, _b;
+    const newValue = [...value];
+    const start = newValue[0] || (0, import_dayjs.default)();
+    newValue[0] = ((_b = (_a = start == null ? void 0 : start.set("hour", (val == null ? void 0 : val.get("hour")) || 0)) == null ? void 0 : _a.set("minute", (val == null ? void 0 : val.get("minute")) || 0)) == null ? void 0 : _b.set("second", (val == null ? void 0 : val.get("second")) || 0)) || null;
+    onChange(newValue, "time");
+  };
+  const handleEndChange = (val) => {
+    var _a, _b;
+    const newValue = [...value];
+    const end = newValue[1] || (0, import_dayjs.default)();
+    newValue[1] = ((_b = (_a = end == null ? void 0 : end.set("hour", (val == null ? void 0 : val.get("hour")) || 0)) == null ? void 0 : _a.set("minute", (val == null ? void 0 : val.get("minute")) || 0)) == null ? void 0 : _b.set("second", (val == null ? void 0 : val.get("second")) || 0)) || null;
+    onChange(newValue, "time");
+  };
+  const spaceStyle = (0, import_react.useMemo)(() => {
+    return (0, import_utils.isMobile)() ? {
+      display: "flex",
+      justifyContent: "end",
+      marginBottom: 12
+    } : {
+      display: "flex"
+    };
+  }, []);
+  const startTimeProps = (0, import_react.useMemo)(() => {
+    if ((0, import_utils.isArr)(showTime) && showTime[0]) {
+      return showTime[0];
+    }
+    return {};
+  }, [showTime]);
+  const endTimeProps = (0, import_react.useMemo)(() => {
+    if ((0, import_utils.isArr)(showTime) && showTime[1]) {
+      return showTime[1];
+    }
+    return {};
+  }, [showTime]);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(props.className, "date-picker-action-bar") }, hasShortcuts && /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-action-bar-left" }), /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "date-picker-action-bar-right",
+      style: (0, import_utils.isMobile)() ? { display: "block" } : {}
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { split: "-", style: { ...spaceStyle } }, showTime ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+      import_antd.TimePicker,
+      {
+        placeholder: (0, import_locales.getText)(
+          "action-bar-start.time",
+          import_locales.pLocaleMap[locale]
+        ),
+        ...startTimeProps,
+        value: value[0],
+        popupClassName: "date-picker-action-bar-time-picker-popup",
+        onChange: handleStartChange,
+        inputReadOnly: true
+      }
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_antd.TimePicker,
+      {
+        placeholder: (0, import_locales.getText)("action-bar-end.time", import_locales.pLocaleMap[locale]),
+        ...endTimeProps,
+        value: value[1],
+        popupClassName: "date-picker-action-bar-time-picker-popup",
+        onChange: handleEndChange,
+        inputReadOnly: true
+      }
+    )) : /* @__PURE__ */ import_react.default.createElement("div", null)),
+    /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { style: { ...spaceStyle, margin: 0 } }, /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { ...cancelButtonProps || {}, onClick: onCancel }, (0, import_locales.getText)("action-bar-cancel", import_locales.pLocaleMap[locale])), /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { type: "primary", ...okButtonProps || {}, onClick: onOk }, (0, import_locales.getText)("action-bar-apply", import_locales.pLocaleMap[locale])))
+  ));
+};
+var OldActionBar_default = ActionBar;