@cashub/ui 0.48.28 → 0.49.0-beta.0

package/datetimePicker/DatePicker.js

@@ -1,309 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _reactI18next = require("react-i18next");
-var _reactOutsideClickHandler = _interopRequireDefault(require("react-outside-click-handler"));
-var _hooks = require("@cashub/hooks");
-var _utils = require("@cashub/utils");
-var _Button = _interopRequireDefault(require("../button/Button"));
-var _Accordion = _interopRequireDefault(require("./subComponent/Accordion"));
-var _Input = _interopRequireDefault(require("../form/Input"));
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-const DatePicker = _ref => {
-  let {
-    onConfirm,
-    selected,
-    minDate,
-    maxDate,
-    fixedYear,
-    disabled
-  } = _ref;
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
-  const [currentDisplayType, setCurrentDisplayType] = (0, _react.useState)(null);
-  const [displayPicker, setDisplayPicker] = (0, _react.useState)(false);
-  const [selectedYear, setSelectedYear] = (0, _react.useState)(selected ? new Date(selected).getFullYear() : new Date().getFullYear());
-  const [selectedMonth, setSelectedMonth] = (0, _react.useState)(selected ? new Date(selected).getMonth() : new Date().getMonth());
-  const [selectedDay, setSelectedDay] = (0, _react.useState)(selected ? new Date(selected).getDate() : new Date().getDate());
-  const [confirmYear, setConfirmYear] = (0, _react.useState)(selected ? new Date(selected).getFullYear() : '');
-  const [confirmMonth, setConfirmMonth] = (0, _react.useState)(selected ? new Date(selected).getMonth() : '');
-  const [confirmDay, setConfirmDay] = (0, _react.useState)(selected ? new Date(selected).getDate() : '');
-  const [inputValue, setInputValue] = (0, _react.useState)(selected ? selected : '');
-  const [toggleElement, setToggleElement] = (0, _react.useState)(null);
-  const [contentElement, setContentElement] = (0, _react.useState)(null);
-  const {
-    styles,
-    attributes,
-    state,
-    update
-  } = (0, _hooks.useCustomPopper)(toggleElement, contentElement, {
-    strategy: 'absolute',
-    placement: 'bottom-start'
-  });
-  const weeks = (0, _react.useMemo)(() => {
-    return ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map(week => /*#__PURE__*/(0, _jsxRuntime.jsx)(Week, {
-      children: week
-    }, week));
-  }, []);
-  const handleDisplayAccordionContent = (0, _react.useCallback)(type => {
-    if (currentDisplayType === type) {
-      setCurrentDisplayType(null);
-    } else {
-      setCurrentDisplayType(type);
-    }
-  }, [currentDisplayType]);
-  const handleChangeYear = selected => {
-    if (selected === 'previous') {
-      setSelectedYear(previousParams => {
-        if (previousParams <= 1) {
-          return previousParams;
-        }
-        return previousParams - 1;
-      });
-    } else if (selected === 'next') {
-      setSelectedYear(previousParams => {
-        return previousParams + 1;
-      });
-    }
-    setCurrentDisplayType(null);
-  };
-  const handleChangeMonth = selected => {
-    if (selected === 'previous') {
-      setSelectedMonth(previousParams => {
-        if (previousParams <= 0) {
-          return 11;
-        }
-        return previousParams - 1;
-      });
-    } else if (selected === 'next') {
-      setSelectedMonth(previousParams => {
-        if (previousParams >= 11) {
-          return 0;
-        }
-        return previousParams + 1;
-      });
-    }
-    setCurrentDisplayType(null);
-  };
-  const handleDisabled = (0, _react.useCallback)((firstWeekOfMonth, daysOfMonthForSelectedDate, dayIndex, day) => {
-    const selectedDate = (0, _utils.formatDate)(new Date(selectedYear, firstWeekOfMonth >= dayIndex + 1 ? selectedMonth - 1 : daysOfMonthForSelectedDate + firstWeekOfMonth < dayIndex + 1 ? selectedMonth + 1 : selectedMonth, day).getTime() + 86399 * 1000);
-    if (minDate && minDate > selectedDate || maxDate && maxDate < selectedDate) {
-      return true;
-    }
-    if (fixedYear) {
-      const disabledDateInDec = selectedMonth === 11 && dayIndex >= daysOfMonthForSelectedDate + firstWeekOfMonth;
-      const disabledDateInJan = selectedMonth === 0 && dayIndex < firstWeekOfMonth;
-      return !!(disabledDateInDec || disabledDateInJan);
-    }
-    return false;
-  }, [fixedYear, minDate, maxDate, selectedMonth, selectedYear]);
-  const handleChangeDate = (0, _react.useCallback)((daysOfMonthForSelectedDate, firstWeekOfMonth, dayIndex, day) => {
-    if (!fixedYear) {
-      setSelectedYear(() => {
-        if (selectedMonth === 0 && dayIndex < firstWeekOfMonth && selectedYear > 1) {
-          return selectedYear - 1;
-        } else if (selectedMonth === 11 && dayIndex >= daysOfMonthForSelectedDate + firstWeekOfMonth) {
-          return selectedYear + 1;
-        }
-        return selectedYear;
-      });
-      setConfirmYear(() => {
-        if (selectedMonth === 0 && dayIndex < firstWeekOfMonth && selectedYear > 1) {
-          return selectedYear - 1;
-        } else if (selectedMonth === 11 && dayIndex >= daysOfMonthForSelectedDate + firstWeekOfMonth) {
-          return selectedYear + 1;
-        }
-        return selectedYear;
-      });
-    }
-    setSelectedMonth(() => {
-      if (firstWeekOfMonth > dayIndex) {
-        return selectedMonth !== 0 ? selectedMonth - 1 : 11;
-      } else if (daysOfMonthForSelectedDate + firstWeekOfMonth <= dayIndex) {
-        return selectedMonth !== 11 ? selectedMonth + 1 : 0;
-      }
-      return selectedMonth;
-    });
-    setConfirmMonth(() => {
-      if (firstWeekOfMonth > dayIndex) {
-        return selectedMonth !== 0 ? selectedMonth - 1 : 11;
-      } else if (daysOfMonthForSelectedDate + firstWeekOfMonth <= dayIndex) {
-        return selectedMonth !== 11 ? selectedMonth + 1 : 0;
-      }
-      return selectedMonth;
-    });
-    setConfirmDay(day);
-  }, [fixedYear, selectedMonth, selectedYear]);
-  const handleSelectedDay = (0, _react.useCallback)((day, daysOfMonthForSelectedDate, index, firstWeekOfMonth, lastWeekOfMonth) => {
-    if (confirmDay === day && confirmYear === selectedYear && confirmMonth === selectedMonth) {
-      if (firstWeekOfMonth === 6 && lastWeekOfMonth === 6) {
-        return true;
-      } else if (firstWeekOfMonth !== 6 && lastWeekOfMonth === 6) {
-        return index + 1 > firstWeekOfMonth;
-      }
-      return !!(index + 1 >= firstWeekOfMonth && index + 1 <= daysOfMonthForSelectedDate + firstWeekOfMonth);
-    }
-    return false;
-  }, [confirmYear, confirmMonth, confirmDay, selectedYear, selectedMonth]);
-  const handleDisplayDays = (0, _react.useMemo)(() => {
-    const daysOfMonthForSelectedDate = new Date(selectedYear, selectedMonth + 1, 0).getDate();
-    const daysOfPrevioueMonthForSelectedDate = new Date(selectedYear, selectedMonth + 1 - 1, 0).getDate();
-    const firstWeekOfMonth = new Date("".concat(selectedYear, "/").concat(selectedMonth + 1, "/1")).getDay();
-    const lastWeekOfMonth = new Date("".concat(selectedYear, "/").concat(selectedMonth + 1, "/").concat(daysOfMonthForSelectedDate)).getDay();
-    const days = [];
-    for (const day of [...Array(daysOfMonthForSelectedDate).keys()]) {
-      days.push(day + 1);
-    }
-    if (firstWeekOfMonth !== 0) {
-      for (let index = daysOfPrevioueMonthForSelectedDate; index > daysOfPrevioueMonthForSelectedDate - firstWeekOfMonth; index -= 1) {
-        days.unshift(index);
-      }
-    }
-    if (lastWeekOfMonth !== 6) {
-      for (let index = 1; index <= 6 - lastWeekOfMonth; index += 1) {
-        days.push(index);
-      }
-    }
-    return days.map((day, index) => {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Day, {
-        disabled: handleDisabled(firstWeekOfMonth, daysOfMonthForSelectedDate, index, day),
-        onClick: () => {
-          handleChangeDate(daysOfMonthForSelectedDate, firstWeekOfMonth, index, day);
-        },
-        selected: handleSelectedDay(day, daysOfMonthForSelectedDate, index, firstWeekOfMonth, lastWeekOfMonth),
-        children: day
-      }, index);
-    });
-  }, [selectedMonth, selectedYear, handleDisabled, handleChangeDate, handleSelectedDay]);
-  const handleToggle = () => {
-    setDisplayPicker(!displayPicker);
-    update();
-  };
-  const handleConfirm = () => {
-    onConfirm(inputValue);
-    setDisplayPicker(false);
-    setCurrentDisplayType(null);
-  };
-  (0, _react.useEffect)(() => {
-    if (!selected) return;
-    const date = new Date(selected);
-    setSelectedYear(date.getFullYear());
-    setSelectedMonth(date.getMonth());
-    setSelectedDay(date.getDate());
-    setConfirmYear(date.getFullYear());
-    setConfirmMonth(date.getMonth());
-    setConfirmDay(date.getDate());
-    setInputValue(selected);
-  }, [selected]);
-  (0, _react.useEffect)(() => {
-    if (!(confirmYear && confirmMonth && confirmDay)) return;
-    setInputValue((0, _utils.formatDate)(new Date(confirmYear, confirmMonth, confirmDay), 'date'));
-  }, [confirmYear, confirmMonth, confirmDay]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactOutsideClickHandler.default, {
-    onOutsideClick: handleConfirm,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PickerInput, {
-      ref: setToggleElement,
-      value: inputValue,
-      onClick: handleToggle,
-      readOnly: true,
-      disabled: disabled
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, _objectSpread(_objectSpread({}, attributes.popper), {}, {
-      style: styles.popper,
-      placement: state && state.placement,
-      ref: setContentElement,
-      displayPicker: displayPicker,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Body, {
-        displayType: currentDisplayType,
-        children: [!fixedYear && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Accordion.default, {
-          type: "year",
-          handleDisplayAccordionContent: () => {
-            handleDisplayAccordionContent('year');
-          },
-          handleChangeTitle: handleChangeYear,
-          setCurrentDisplayType: setCurrentDisplayType,
-          currentDisplayType: currentDisplayType,
-          selectedYear: selectedYear,
-          setSelectedYear: setSelectedYear,
-          selectedDay: selectedDay,
-          minDate: minDate,
-          maxDate: maxDate,
-          fixedYear: fixedYear
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Accordion.default, {
-          type: "month",
-          handleDisplayAccordionContent: () => {
-            handleDisplayAccordionContent('month');
-          },
-          handleChangeTitle: handleChangeMonth,
-          setCurrentDisplayType: setCurrentDisplayType,
-          currentDisplayType: currentDisplayType,
-          selectedMonth: selectedMonth,
-          setSelectedMonth: setSelectedMonth,
-          selectedYear: selectedYear,
-          selectedDay: selectedDay,
-          fixedYear: fixedYear,
-          minDate: minDate,
-          maxDate: maxDate
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateContent, {
-          children: [weeks, handleDisplayDays]
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Footer, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ConfirmButton, {
-          fullWidth: true,
-          alignCenter: true,
-          onClick: handleConfirm,
-          children: t('Confirm')
-        })
-      })]
-    }))]
-  });
-};
-const Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-bottom: var(--spacing-s);\n  background: var(--color-background1);\n  border-radius: var(--border-radius);\n  border: var(--border-width) solid var(--border-color);\n  box-shadow: var(--box-shadow);\n  overflow: hidden;\n  width: 286px;\n  z-index: 1;\n  color: var(--font-on-background);\n\n  display: ", ";\n"])), _ref2 => {
-  let {
-    displayPicker
-  } = _ref2;
-  return displayPicker ? 'block' : 'none';
-});
-const Week = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  min-width: 36px;\n  height: 36px;\n  border-radius: var(--border-radius-s);\n  line-height: 36px;\n  text-align: center;\n"])));
-const Day = _styledComponents.default.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  min-width: 36px;\n  height: 36px;\n  border-radius: var(--border-radius-s);\n  line-height: 36px;\n  text-align: center;\n  padding: 0;\n  border: 0;\n  background: var(--color-background1);\n  color: var(--font-on-background);\n  &:hover {\n    background: var(--color-primary);\n  }\n\n  ", "\n\n  ", "\n"])), _ref3 => {
-  let {
-    selected
-  } = _ref3;
-  return selected && 'background: var(--color-hover);';
-}, _ref4 => {
-  let {
-    disabled
-  } = _ref4;
-  return disabled && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      color: var(--font-on-mute);\n      background: none;\n      &:hover {\n        background: none;\n      }\n    "])));
-});
-const DateContent = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n"])));
-const PickerInput = (0, _styledComponents.default)(_Input.default)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n"])));
-const ConfirmButton = (0, _styledComponents.default)(_Button.default)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin: 16px auto 0;\n"])));
-const Body = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  ", "\n\n  overflow: hidden;\n  padding: ", ";\n"])), _ref5 => {
-  let {
-    displayType
-  } = _ref5;
-  return displayType && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      height: 216px;\n    "])));
-}, _ref6 => {
-  let {
-    displayType
-  } = _ref6;
-  return displayType === 'year' ? ' 0 4px var(--spacing-s) var(--spacing-s)' : '0 var(--spacing-s) 0 var(--spacing-s)';
-});
-const Footer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  padding: 0 var(--spacing-s);\n"])));
-var _default = exports.default = DatePicker;

package/datetimePicker/DatePickerV2.js

@@ -1,348 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _reactI18next = require("react-i18next");
-var _reactOutsideClickHandler = _interopRequireDefault(require("react-outside-click-handler"));
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _md = require("react-icons/md");
-var _hooks = require("@cashub/hooks");
-var _utils = require("@cashub/utils");
-var _Button = _interopRequireDefault(require("../button/Button"));
-var _Input = _interopRequireDefault(require("../form/Input"));
-var _Month = _interopRequireDefault(require("./accordion/Month"));
-var _Year = _interopRequireDefault(require("./accordion/Year"));
-var _DateTimePickerContext = _interopRequireDefault(require("./subComponent/DateTimePickerContext"));
-var _toUTC = _interopRequireDefault(require("./utils/toUTC0"));
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-const DEFAULT_TIME = '00:00:00';
-const DatePickerV2 = _ref => {
-  let {
-    selected,
-    fixedYear,
-    allowClear,
-    minDate,
-    maxDate,
-    onConfirm,
-    disabled
-  } = _ref;
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
-  const [toggleElement, setToggleElement] = (0, _react.useState)(null);
-  const [contentElement, setContentElement] = (0, _react.useState)(null);
-  const [selectedDate, setSelectedDate] = (0, _react.useState)(() => {
-    const defaultDate = selected ? new Date(selected) : new Date();
-    return "".concat((0, _utils.formatDate)((0, _toUTC.default)(defaultDate), 'date'), " ").concat(DEFAULT_TIME);
-  });
-  const [confirmDate, setConfirmDate] = (0, _react.useState)(selected ? (0, _utils.formatDate)((0, _toUTC.default)(selected), 'date') : '');
-  const [displayPicker, setDisplayPicker] = (0, _react.useState)(false);
-  const [accordionCurrentDisplayType, setAccordionCurrentDisplayType] = (0, _react.useState)(null);
-  const weeks = (0, _react.useMemo)(() => {
-    return ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map(week => /*#__PURE__*/(0, _jsxRuntime.jsx)(Week, {
-      children: week
-    }, week));
-  }, []);
-  const minDateWithTime = (0, _react.useMemo)(() => {
-    if (!minDate) return;
-    return "".concat(minDate, " 00:00:00");
-  }, [minDate]);
-  const maxDateWithTime = (0, _react.useMemo)(() => {
-    if (!maxDate) return;
-    return "".concat(maxDate, " 00:00:00");
-  }, [maxDate]);
-  const {
-    styles,
-    attributes,
-    state,
-    update
-  } = (0, _hooks.useCustomPopper)(toggleElement, contentElement, {
-    strategy: 'absolute',
-    placement: 'bottom-start'
-  });
-  const context = {
-    fixedYear,
-    minDate: minDateWithTime,
-    maxDate: maxDateWithTime,
-    selectedDate,
-    setSelectedDate,
-    setAccordionCurrentDisplayType
-  };
-  const handleToggle = () => {
-    setDisplayPicker(!displayPicker);
-    update();
-  };
-  const changeDisplayAccordion = (0, _react.useCallback)(type => {
-    if (accordionCurrentDisplayType === type) {
-      setAccordionCurrentDisplayType(null);
-    } else {
-      setAccordionCurrentDisplayType(type);
-    }
-  }, [accordionCurrentDisplayType]);
-  const handleConfirm = (0, _react.useCallback)(() => {
-    if (confirmDate) {
-      onConfirm(confirmDate);
-    }
-    setDisplayPicker(false);
-    setAccordionCurrentDisplayType(null);
-  }, [confirmDate, onConfirm]);
-  const handleChangeDate = (0, _react.useCallback)((daysOfMonthForSelectedDate, firstWeekOfMonth, dayIndex, day) => {
-    const date = new Date(selectedDate);
-    // 先把日期設定成所有月分都有的日期，設定月份時才不會設定到非預期的date
-    date.setDate(1);
-    const selectedYear = date.getFullYear();
-    const selectedMonth = date.getMonth();
-    if (!fixedYear) {
-      if (dayIndex < firstWeekOfMonth && selectedYear >= 1) {
-        if (selectedMonth === 0) {
-          date.setFullYear(selectedYear - 1);
-          date.setMonth(11);
-        } else {
-          date.setMonth(selectedMonth - 1);
-        }
-      } else if (dayIndex >= daysOfMonthForSelectedDate + firstWeekOfMonth) {
-        if (selectedMonth === 11) {
-          date.setFullYear(selectedYear + 1);
-          date.setMonth(0);
-        } else {
-          date.setMonth(selectedMonth + 1);
-        }
-      }
-      date.setDate(day);
-    } else if (fixedYear) {
-      if (dayIndex < firstWeekOfMonth) {
-        if (selectedMonth === 0) {
-          return;
-        }
-        date.setMonth(selectedMonth - 1);
-      } else if (dayIndex >= daysOfMonthForSelectedDate + firstWeekOfMonth) {
-        if (selectedMonth === 11) {
-          return;
-        }
-        date.setMonth(selectedMonth + 1);
-      }
-      date.setDate(day);
-    }
-    const formattedDate = (0, _utils.formatDate)(date, 'date');
-    setSelectedDate("".concat(formattedDate, " ").concat(DEFAULT_TIME));
-    setConfirmDate(formattedDate);
-  }, [fixedYear, selectedDate]);
-  const handleDisabled = (0, _react.useCallback)((firstDayOfMonth, lastDayOfMonth, daysOfMonthForSelectedDate, dayIndex, day) => {
-    let [year, month] = selectedDate.split('-');
-
-    // disabled date before first month of first year
-    if (year === '0001' && month === '01' && dayIndex < firstDayOfMonth) {
-      return true;
-    }
-    let myDay = day.toString();
-    if (myDay.length === 1) myDay = "0".concat(myDay);
-    if (fixedYear) {
-      if (month === '01') {
-        // disabled date before first month
-        return dayIndex < firstDayOfMonth;
-      } else if (month === '12') {
-        // disabled date in december
-        return dayIndex >= daysOfMonthForSelectedDate + firstDayOfMonth;
-      }
-    }
-
-    // previous year's date
-    if (month === '01' && firstDayOfMonth !== 0 && dayIndex + 1 <= firstDayOfMonth) {
-      year = +year - 1;
-    }
-
-    // next year's date
-    if (month === '12' && lastDayOfMonth !== 6 && day + firstDayOfMonth < dayIndex + 1) {
-      year = +year + 1;
-    }
-    month = firstDayOfMonth >= dayIndex + 1 ? +month - 1 : daysOfMonthForSelectedDate + firstDayOfMonth < dayIndex + 1 ? +month + 1 : +month;
-    if (month < 1) {
-      month = 12;
-    } else if (month > 12) {
-      month = 1;
-    }
-    month = month.toString();
-    if (month.length === 1) {
-      month = "0".concat(month);
-    }
-    year = year.toString();
-    if (year.length === 1) year = "000".concat(year);
-    if (year.length === 2) year = "00".concat(year);
-    if (year.length === 3) year = "0".concat(year);
-    const currentDate = "".concat(year, "-").concat(month, "-").concat(myDay, " ").concat(DEFAULT_TIME);
-    if (minDateWithTime && currentDate < minDateWithTime) {
-      return true;
-    }
-    if (maxDateWithTime && currentDate > maxDateWithTime) {
-      return true;
-    }
-    return false;
-  }, [fixedYear, minDateWithTime, maxDateWithTime, selectedDate]);
-  const isSelectedDay = (0, _react.useCallback)((day, index, firstDayOfMonth, daysOfMonthForSelectedDate) => {
-    const selectedDateObj = new Date(selectedDate);
-    const confirmDateObj = (0, _toUTC.default)(new Date(confirmDate));
-    if (confirmDateObj.getFullYear() === selectedDateObj.getFullYear() && confirmDateObj.getMonth() === selectedDateObj.getMonth() && confirmDateObj.getDate() === day) {
-      if (index + 1 > firstDayOfMonth && index < daysOfMonthForSelectedDate + firstDayOfMonth) {
-        return true;
-      }
-      return false;
-    }
-    return false;
-  }, [selectedDate, confirmDate]);
-  const getLastDateOfMonth = selectedDate => {
-    const date = new Date(selectedDate);
-
-    // 先把日期設定成所有月分都有的日期，設定月份時才不會設定到非預期的date
-    date.setDate(1);
-    date.setMonth(date.getMonth() + 1);
-    date.setDate(0);
-    return date;
-  };
-  const days = (0, _react.useMemo)(() => {
-    const lastDateOfSelectedDate = getLastDateOfMonth(selectedDate);
-    const daysOfMonthForSelectedDate = lastDateOfSelectedDate.getDate();
-    const lastDayOfMonth = lastDateOfSelectedDate.getDay();
-    let date = new Date(selectedDate);
-    date.setMonth(date.getMonth() + 1 - 1);
-    date.setDate(0);
-    const daysOfPrevioueMonthForSelectedDate = date.getDate();
-    date = new Date(selectedDate);
-    // 先把日期設定成所有月分都有的日期，設定月份時才不會設定到非預期的date
-    date.setDate(1);
-    const firstDayOfMonth = date.getDay();
-    const days = [...Array(daysOfMonthForSelectedDate)].map((value, index) => {
-      return index + 1;
-    });
-    if (firstDayOfMonth !== 0) {
-      for (let index = daysOfPrevioueMonthForSelectedDate; index > daysOfPrevioueMonthForSelectedDate - firstDayOfMonth; index -= 1) {
-        if (date.getFullYear() === 1 && date.getMonth() === 0) {
-          days.unshift(null);
-        } else {
-          days.unshift(index);
-        }
-      }
-    }
-    if (lastDayOfMonth !== 6) {
-      for (let index = 1; index <= 6 - lastDayOfMonth; index += 1) {
-        days.push(index);
-      }
-    }
-    return days.map((day, index) => {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Day, {
-        disabled: handleDisabled(firstDayOfMonth, lastDayOfMonth, daysOfMonthForSelectedDate, index, day),
-        onClick: () => {
-          handleChangeDate(daysOfMonthForSelectedDate, firstDayOfMonth, index, day);
-        },
-        selected: isSelectedDay(day, index, firstDayOfMonth, daysOfMonthForSelectedDate),
-        children: day
-      }, index);
-    });
-  }, [selectedDate, handleChangeDate, isSelectedDay, handleDisabled]);
-  (0, _react.useEffect)(() => {
-    if (selected) {
-      const formattedDate = (0, _utils.formatDate)((0, _toUTC.default)(selected), 'date');
-      setSelectedDate("".concat(formattedDate, " ").concat(DEFAULT_TIME));
-      setConfirmDate(formattedDate);
-    } else {
-      setConfirmDate('');
-    }
-  }, [selected]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateTimePickerContext.default.Provider, {
-    value: context,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactOutsideClickHandler.default, {
-      onOutsideClick: handleConfirm,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
-          disabled: disabled,
-          ref: setToggleElement,
-          value: confirmDate,
-          onClick: handleToggle,
-          readOnly: true
-        }), confirmDate && !disabled && allowClear && /*#__PURE__*/(0, _jsxRuntime.jsx)(CloseButton, {
-          onClick: () => {
-            setConfirmDate('');
-            onConfirm('');
-          }
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Picker, _objectSpread(_objectSpread({}, attributes.popper), {}, {
-        style: styles.popper,
-        placement: state && state.placement,
-        ref: setContentElement,
-        displayPicker: displayPicker,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Body, {
-          accordionCurrentDisplayType: accordionCurrentDisplayType,
-          children: [!fixedYear && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Year.default, {
-            expand: accordionCurrentDisplayType === 'year',
-            handleDisplayAccordionContent: () => {
-              changeDisplayAccordion('year');
-            }
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Month.default, {
-            expand: accordionCurrentDisplayType === 'month',
-            handleDisplayAccordionContent: () => {
-              changeDisplayAccordion('month');
-            },
-            confirmDate: confirmDate
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateContent, {
-            children: [weeks, days]
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Footer, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ConfirmButton, {
-            fullWidth: true,
-            alignCenter: true,
-            onClick: handleConfirm,
-            children: t('Confirm')
-          })
-        })]
-      }))]
-    })
-  });
-};
-const Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-const CloseButton = (0, _styledComponents.default)(_md.MdClose)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--font-on-background);\n  font-size: var(--font-body1);\n  right: var(--spacing-s);\n  cursor: pointer;\n"])));
-CloseButton.displayName = 'CloseButton';
-const Picker = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding-bottom: var(--spacing-s);\n  background: var(--color-background1);\n  border-radius: var(--border-radius);\n  border: var(--border-width) solid var(--border-color);\n  box-shadow: var(--box-shadow);\n  overflow: hidden;\n  width: 286px;\n  z-index: 1;\n  color: var(--font-on-background);\n\n  display: ", ";\n"])), _ref2 => {
-  let {
-    displayPicker
-  } = _ref2;
-  return displayPicker ? 'block' : 'none';
-});
-const Week = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: calc(100% / 7);\n  height: 36px;\n  border-radius: var(--border-radius-s);\n  line-height: 36px;\n  text-align: center;\n"])));
-const Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", "\n\n  overflow: hidden;\n  padding: ", ";\n"])), _ref3 => {
-  let {
-    accordionCurrentDisplayType
-  } = _ref3;
-  return accordionCurrentDisplayType && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      height: 216px;\n    "])));
-}, _ref4 => {
-  let {
-    accordionCurrentDisplayType
-  } = _ref4;
-  return accordionCurrentDisplayType === 'year' ? ' 0 4px var(--spacing-s) var(--spacing-s)' : '0 var(--spacing-s) 0 var(--spacing-s)';
-});
-const Footer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  padding: 0 var(--spacing-s);\n"])));
-const Day = _styledComponents.default.button(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  width: calc(100% / 7);\n  height: 36px;\n  border-radius: var(--border-radius-s);\n  line-height: 36px;\n  text-align: center;\n  padding: 0;\n  border: 0;\n  background: var(--color-background1);\n  color: var(--font-on-background);\n  &:hover {\n    background: var(--color-primary);\n  }\n\n  ", "\n\n  ", "\n"])), _ref5 => {
-  let {
-    selected
-  } = _ref5;
-  return selected && 'background: var(--color-hover);';
-}, _ref6 => {
-  let {
-    disabled
-  } = _ref6;
-  return disabled && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      color: var(--font-on-mute);\n      background: none;\n      &:hover {\n        background: none;\n      }\n    "])));
-});
-const ConfirmButton = (0, _styledComponents.default)(_Button.default)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin: 16px auto 0;\n"])));
-const DateContent = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n"])));
-var _default = exports.default = DatePickerV2;