@pisell/date-picker 1.0.75 → 1.0.77

package/es/ActionBar/index.js

@@ -13,7 +13,7 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 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 { Button } from "antd";
 import { MuiPickersAdapterContext } from "@mui/x-date-pickers";
 import { isArr, isMobile } from "@pisell/utils";
 import dayjs from "dayjs";
@@ -52,6 +52,15 @@ var ActionBar = function ActionBar(props) {
     onChange(newValue, "time");
   };
   var spaceStyle = useMemo(function () {
+    return isMobile() ? {
+      display: "flex",
+      justifyContent: "end",
+      gap: 16
+    } : {
+      display: "flex"
+    };
+  }, []);
+  var buttonStyle = useMemo(function () {
     return isMobile() ? {
       display: "flex",
       justifyContent: "end",
@@ -74,40 +83,22 @@ var ActionBar = function ActionBar(props) {
   }, [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", {
+  }, /*#__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 || {}, {
+  }, /*#__PURE__*/React.createElement(Button, _extends({
+    block: isMobile(),
+    size: "large"
+  }, cancelButtonProps || {}, {
     onClick: onCancel
   }), getText("action-bar-cancel", pLocaleMap[locale])), /*#__PURE__*/React.createElement(Button, _extends({
-    type: "primary"
+    type: "primary",
+    size: "large",
+    block: isMobile()
   }, okButtonProps || {}, {
     onClick: onOk
-  }), getText("action-bar-apply", pLocaleMap[locale])))));
+  }), getText("action-bar-apply", pLocaleMap[locale]))));
 };
 export default ActionBar;

package/es/ActionBar/index.less

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

package/es/CustomCalendarHeader/index.d.ts

@@ -0,0 +1,2 @@
+declare const CustomCalendarHeader: (props: any) => JSX.Element;
+export default CustomCalendarHeader;

package/es/CustomCalendarHeader/index.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import Stack from '@mui/material/Stack';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
+import ChevronLeft from "../icon/ChevronLeft";
+import ChevronLeftDouble from "../icon/ChevronLeftDouble";
+import ChevronRight from "../icon/ChevronRight";
+import ChevronRightDouble from "../icon/ChevronRightDouble";
+var CustomCalendarHeaderRoot = styled('div')({
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: '8px 16px',
+  alignItems: 'center'
+});
+var CustomCalendarHeader = function CustomCalendarHeader(props) {
+  var currentMonth = props.currentMonth,
+    onMonthChange = props.onMonthChange;
+  var selectNextMonth = function selectNextMonth() {
+    return onMonthChange(currentMonth.add(1, 'month'), 'left');
+  };
+  var selectNextYear = function selectNextYear() {
+    return onMonthChange(currentMonth.add(1, 'year'), 'left');
+  };
+  var selectPreviousMonth = function selectPreviousMonth() {
+    return onMonthChange(currentMonth.subtract(1, 'month'), 'right');
+  };
+  var selectPreviousYear = function selectPreviousYear() {
+    return onMonthChange(currentMonth.subtract(1, 'year'), 'right');
+  };
+  return /*#__PURE__*/React.createElement(CustomCalendarHeaderRoot, null, /*#__PURE__*/React.createElement(Stack, {
+    spacing: 1,
+    direction: "row"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    onClick: selectPreviousYear,
+    title: "Previous year"
+  }, /*#__PURE__*/React.createElement(ChevronLeftDouble, null)), /*#__PURE__*/React.createElement(IconButton, {
+    onClick: selectPreviousMonth,
+    title: "Previous month"
+  }, /*#__PURE__*/React.createElement(ChevronLeft, null))), /*#__PURE__*/React.createElement(Typography, {
+    variant: "body2"
+  }, currentMonth.format('MMMM YYYY')), /*#__PURE__*/React.createElement(Stack, {
+    spacing: 1,
+    direction: "row"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    onClick: selectNextMonth,
+    title: "Next month"
+  }, /*#__PURE__*/React.createElement(ChevronRight, null)), /*#__PURE__*/React.createElement(IconButton, {
+    onClick: selectNextYear,
+    title: "Next year"
+  }, /*#__PURE__*/React.createElement(ChevronRightDouble, null))));
+};
+export default CustomCalendarHeader;

package/es/Dialog/index.d.ts

@@ -0,0 +1,2 @@
+declare const Dialog: (props: any) => JSX.Element;
+export default Dialog;

package/es/Dialog/index.js

@@ -0,0 +1,22 @@
+import React from "react";
+// import Drawer from "../Drawer";
+
+import Drawer from "@mui/material/Drawer";
+var Dialog = function Dialog(props) {
+  var open = props.open,
+    onClose = props.onClose,
+    children = props.children;
+
+  // return <MuiDialog open={open}>
+  //   {children}
+  // </MuiDialog>
+  return /*#__PURE__*/React.createElement(Drawer, {
+    anchor: "bottom",
+    open: open,
+    onClose: onClose,
+    height: 650,
+    autoFocus: true,
+    className: window.innerWidth > 800 ? 'date-picker-paid-drawer' : 'date-picker-custom-drawer'
+  }, children);
+};
+export default Dialog;

package/es/Drawer/index.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import "./index.less";
+interface DrawerProps {
+    open: boolean;
+    className?: string;
+    height?: number;
+    children: React.ReactNode;
+    onClose: () => void;
+}
+declare const Drawer: (props: DrawerProps) => JSX.Element | null;
+export default Drawer;

package/es/Drawer/index.js

@@ -0,0 +1,35 @@
+import React from "react";
+import classNames from "classnames";
+import "./index.less";
+var Drawer = function Drawer(props) {
+  var open = props.open,
+    className = props.className,
+    onClose = props.onClose,
+    children = props.children,
+    _props$height = props.height,
+    height = _props$height === void 0 ? 375 : _props$height;
+
+  // return ReactDOM.createPortal(
+  //   drawerElement,
+  //   document.body
+  // );
+
+  if (!open) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, open && /*#__PURE__*/React.createElement("div", {
+    className: "date-picker-drawer-overlay",
+    onClick: onClose
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classNames("date-picker-drawer", className, {
+      open: open
+    }),
+    onClick: function onClick() {}
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "date-picker-drawer-content",
+    style: {
+      height: height
+    }
+  }, children)));
+};
+export default Drawer;

package/es/Drawer/index.less

@@ -0,0 +1,40 @@
+.date-picker-drawer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: white;
+  box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1);
+  transform: translateY(100%);
+  transition: transform 0.3s ease-out;
+  z-index: 1000;
+  border-radius: 8px 8px 0 0;
+}
+
+.date-picker-drawer-content {
+  //transform: translateY(100%);
+  //transition: transform 0.3s ease-out;
+  //position: absolute;
+  //padding: 20px;
+  //bottom: 0;
+  //width: 100vw;
+  //background-color: #fff;
+  //z-index: 1000;
+  //box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1);
+  //border-radius: 8px 8px 0px 0px;
+  //height: 650px;
+}
+
+.date-picker-drawer.open {
+  transform: translateY(0);
+}
+
+.date-picker-drawer-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+}

package/es/PisellDateRangePicker/LocaleContext.d.ts

@@ -0,0 +1,2 @@
+export declare const LocaleContext: any;
+export declare const LocaleProvider: any;

package/es/PisellDateRangePicker/index.d.ts

@@ -0,0 +1,81 @@
+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)[] | string) => void;
+    /** 日期改变回调 此处只为了组件外拿到当前日期项进行状态操作 通常情况下只使用onChange来拿value */
+    onDateChange?: (day: (Dayjs | null)[]) => void;
+    /** 日期选择值 */
+    value?: Dayjs[] | string;
+    /** 日期选择默认值 */
+    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;
+    /** 使用快捷筛选时返回快捷字符串 */
+    returnShortcutString?: boolean;
+}
+declare const PisellDateRangePicker: (props: PisellDateRangePickerProps) => JSX.Element;
+export default PisellDateRangePicker;

package/es/PisellDateRangePicker/index.js

@@ -10,24 +10,31 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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 React, { useState, useEffect, useMemo, useContext, useRef } from "react";
 import { DateRangePicker } from "../DateRangePicker";
 import ActionBar from "../ActionBar";
 import Shortcuts from "../Shortcuts";
 import { SingleInputDateRangeField } from "../SingleInputDateRangeField";
 import classNames from "classnames";
-import { isArr, isBoolean } from "@pisell/utils";
+import { isArr, isBoolean, isString } from "@pisell/utils";
 import useCssVariables from "./useCssVariables";
-import CloseCircle from "./CloseCircle";
+import CloseCircle from "../icon/CloseCircle";
 import "dayjs/locale/zh-cn";
 import "dayjs/locale/en";
 import "dayjs/locale/zh-tw";
 import "./index.less";
-import { getCurrentLocale, isMobile } from "../utils";
+import { formatPresets, getCurrentLocale, getPresetLabel, getShortcutValue } from "../utils";
 import { LocaleContext } from "./LocaleContext";
 import { pLocaleMap } from "../locales";
-var transDayjsArr = function transDayjsArr(dayjsArr, defaultValue) {
+import Dialog from "../Dialog";
+import Toolbar from "../Toolbar";
+import useNextDay from "../hooks/useNextDay";
+import { defaultPresets } from "../constants";
+var transDayjsArr = function transDayjsArr(dayjsArr, defaultValue, _presets) {
   var _newArr;
+  if (isString(dayjsArr)) {
+    return getShortcutValue(dayjsArr, _presets);
+  }
   var newArr = dayjsArr || defaultValue || [null, null];
   if ((dayjsArr === null || dayjsArr === void 0 ? void 0 : dayjsArr.length) === 0) {
     newArr = defaultValue || [null, null];
@@ -41,8 +48,7 @@ var transDayjsArr = function transDayjsArr(dayjsArr, defaultValue) {
 var PisellDateRangePicker = function PisellDateRangePicker(props) {
   var propsOnChange = props.onChange,
     propsValue = props.value,
-    _props$presets = props.presets,
-    presets = _props$presets === void 0 ? [] : _props$presets,
+    presets = props.presets,
     className = props.className,
     showTime = props.showTime,
     placeholder = props.placeholder,
@@ -72,25 +78,52 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
     disablePortal = props.disablePortal,
     _props$placement = props.placement,
     placement = _props$placement === void 0 ? "auto" : _props$placement,
-    inputReadOnly = props.inputReadOnly;
+    _props$inputReadOnly = props.inputReadOnly,
+    inputReadOnly = _props$inputReadOnly === void 0 ? true : _props$inputReadOnly,
+    _props$returnShortcut = props.returnShortcutString,
+    returnShortcutString = _props$returnShortcut === void 0 ? false : _props$returnShortcut;
   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;
+  var _useState3 = useState(""),
+    _useState4 = _slicedToArray(_useState3, 2),
+    currentShortcut = _useState4[0],
+    setCurrentShortcut = _useState4[1];
+  var lastConfirmShortcut = useRef(isString(propsValue) ? propsValue : null);
   useEffect(function () {
     isBoolean(propsOpen) && setOpen(propsOpen);
   }, [propsOpen]);
-  var _useState3 = useState(function () {
-      return transDayjsArr(propsValue, defaultValue);
+  var _presets = useMemo(function () {
+    return formatPresets(presets || defaultPresets);
+  }, [presets]);
+  var _useState5 = useState(function () {
+      return transDayjsArr(propsValue, defaultValue, _presets);
     }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    _value = _useState4[0],
-    setValue = _useState4[1];
+    _useState6 = _slicedToArray(_useState5, 2),
+    _value = _useState6[0],
+    setValue = _useState6[1];
   useEffect(function () {
-    setValue(transDayjsArr(propsValue, defaultValue));
+    setValue(transDayjsArr(propsValue, defaultValue, _presets));
+    if (isString(propsValue)) {
+      setCurrentShortcut(propsValue);
+    }
   }, [propsValue]);
+  var getVal = function getVal() {
+    var val = _value;
+    if (returnShortcutString) {
+      val = currentShortcut;
+    } else if (currentShortcut) {
+      val = getShortcutValue(currentShortcut, _presets);
+    }
+    return val;
+  };
+  useNextDay(function () {
+    setValue(getVal());
+    setTimeout(handleOk);
+  });
   var handleOpen = function handleOpen() {
     setOpen(true);
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
@@ -98,31 +131,24 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
   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 v = transDayjsArr(propsValue, defaultValue, _presets);
+    onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(v);
+    setValue(v);
+    setCurrentShortcut(lastConfirmShortcut.current);
   };
   var handleOk = function handleOk() {
     setOpen(false);
     onClose === null || onClose === void 0 ? void 0 : onClose();
-    propsOnChange === null || propsOnChange === void 0 ? void 0 : propsOnChange(_value);
+    propsOnChange === null || propsOnChange === void 0 ? void 0 : propsOnChange(getVal());
+    lastConfirmShortcut.current = currentShortcut;
   };
-  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 handleChange = function handleChange(val, type, shortcutValue) {
     var newVal = val;
+    if (isString(shortcutValue) && type === "shortcuts") {
+      setCurrentShortcut(shortcutValue);
+    } else {
+      setCurrentShortcut(null);
+    }
     if (isArr(showTime) && type !== "time") {
       newVal = newVal.map(function (item, index) {
         var _showTime$index;
@@ -133,16 +159,22 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
         return item || null;
       });
     }
+    if (!clearEndOnSelection) {
+      if (newVal[0] && !newVal[1]) {
+        newVal[1] = newVal[0];
+      } else if (newVal[1] && !newVal[0]) {
+        newVal[0] = newVal[1];
+      }
+    }
     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")
+      "--pisell-date-range-picker-popup-width": "".concat(popupWidth, "px")
     },
     dom: document.body
   });
@@ -152,6 +184,8 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
     setOpen(false);
     onClose === null || onClose === void 0 ? void 0 : onClose();
     propsOnChange === null || propsOnChange === void 0 ? void 0 : propsOnChange([null, null]);
+    setCurrentShortcut(null);
+    lastConfirmShortcut.current = null;
   };
   var endAdornment = useMemo(function () {
     if (!allowClear) {
@@ -185,6 +219,18 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
     }
     return localeValue === "en" || localeValue === "en-US" ? "DD/MM/YYYY" : "YYYY/MM/DD";
   }, [propsFormat, locale]);
+  var inputPropsObj = useMemo(function () {
+    var _value$every;
+    var obj = {
+      endAdornment: endAdornment
+    };
+    if (_value !== null && _value !== void 0 && (_value$every = _value.every) !== null && _value$every !== void 0 && _value$every.call(_value, Boolean) && getPresetLabel(currentShortcut, _presets)) {
+      obj = _objectSpread(_objectSpread({}, obj), {}, {
+        value: getPresetLabel(currentShortcut, _presets)
+      });
+    }
+    return obj;
+  }, [_value, endAdornment, returnShortcutString, currentShortcut]);
   return /*#__PURE__*/React.createElement("span", {
     className: classNames(className, "pisell-date-range-picker", {
       "pisell-date-range-picker-no-border": !bordered
@@ -208,7 +254,18 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
     onClose: handleClose,
     onChange: handleChange,
     onOpen: handleOpen,
-    open: open,
+    open: open
+    // onRangePositionChange={(rp) => {
+    //   console.log(rp, "rangePosition");
+    //   // if (_value.every(item => !Boolean(item))) {
+    //   //   return
+    //   // } else {
+    //     setRangePosition(rp)
+    //   // }
+    // }}
+    // // defaultRangePosition="start"
+    // rangePosition={_value.every((item) => Boolean(item)) ? "start" : undefined}
+    ,
     defaultCalendarMonth: defaultCalendarMonth,
     shouldDisableDate: function shouldDisableDate(current, position) {
       return disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(current, position, _value);
@@ -216,14 +273,18 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
     slots: {
       actionBar: ActionBar,
       shortcuts: Shortcuts,
-      field: SingleInputDateRangeField
+      field: SingleInputDateRangeField,
+      dialog: Dialog,
+      // calendarHeader: CustomCalendarHeader,
+      // calendarHeader: <div>12312</div> ,
+      toolbar: Toolbar
     },
     dayOfWeekFormatter: function dayOfWeekFormatter(day) {
       return day;
     },
     slotProps: {
       shortcuts: {
-        items: _presets,
+        items: [],
         changeImportance: "set",
         onChange: handleChange
       },
@@ -236,15 +297,25 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
         okButtonProps: okButtonProps,
         cancelButtonProps: cancelButtonProps
       },
+      toolbar: {
+        hidden: false,
+        presetItems: _presets,
+        format: format,
+        locale: locale,
+        onChange: handleChange,
+        currentShortcut: currentShortcut,
+        setCurrentShortcut: setCurrentShortcut
+      },
+      layout: {
+        orientation: "portrait"
+      },
       field: _objectSpread({
         value: _value,
         size: "small",
         fullWidth: true,
         // variant: "standard",
         // hiddenLabel: true,
-        InputProps: {
-          endAdornment: endAdornment
-        }
+        InputProps: inputPropsObj
       }, readOnlyProps),
       popper: {
         className: popupClassName,