@react-fabric/date 1.0.0-beta.0

package/dist/cjs/panels/RangePanel.js

@@ -0,0 +1,340 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var core = require('@react-fabric/core');
+var utilities = require('@react-fabric/utilities');
+var classNames = require('classnames');
+var dateFns = require('date-fns');
+var react = require('react');
+var reactI18next = require('react-i18next');
+var index = require('../types/index.js');
+var dateUtil = require('../utils/dateUtil.js');
+var BasePanel = require('./BasePanel.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["className", "max", "min", "dateDisabled", "onChange", "showHijriToggle", "value", "withTime", "showApply"];
+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; }
+var RangePanel = function RangePanel(_ref) {
+  var className = _ref.className,
+    max = _ref.max,
+    min = _ref.min,
+    dateDisabled = _ref.dateDisabled,
+    onChange = _ref.onChange,
+    showHijriToggle = _ref.showHijriToggle,
+    value = _ref.value,
+    withTime = _ref.withTime,
+    _ref$showApply = _ref.showApply,
+    showApply = _ref$showApply === void 0 ? false : _ref$showApply,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useTranslation = reactI18next.useTranslation("date"),
+    t = _useTranslation.t;
+  var _useGlobals = core.useGlobals(),
+    currentCalendar = _useGlobals.currentCalendar;
+  var _useState = react.useState(currentCalendar === "hijri"),
+    _useState2 = _slicedToArray(_useState, 2),
+    isHijri = _useState2[0],
+    setHijri = _useState2[1];
+  var fireChange = core.useDebounce(onChange, [onChange]);
+  react.useEffect(function () {
+    setHijri(currentCalendar === "hijri");
+  }, [currentCalendar]);
+  var _useReducer = react.useReducer(function (state, action) {
+      if (action.type === "reset") {
+        if (!utilities.isEmpty(action.date)) {
+          var _action$date = _slicedToArray(action.date, 2),
+            start = _action$date[0],
+            end = _action$date[1];
+          var dateStart = new Date(start);
+          var dateEnd = new Date(end);
+          state.hilight = undefined;
+          state.selected = [dateStart, dateEnd];
+          state.start.pageDate = dateStart;
+          state.start.hour = dateStart.getHours();
+          state.start.minute = dateStart.getMinutes();
+          state.end.pageDate = dateEnd;
+          state.end.hour = dateEnd.getHours();
+          state.end.minute = dateEnd.getMinutes();
+        } else {
+          state.hilight = undefined;
+          state.selected = undefined;
+          state.start.pageDate = new Date();
+          state.start.hour = 0;
+          state.start.minute = 0;
+          state.end.pageDate = dateUtil.DateUtil.addMonths(new Date(), 1);
+          state.end.hour = 0;
+          state.end.minute = 0;
+        }
+      }
+      if (action.type === "changeDate") {
+        if (!state.hilight) {
+          state.hilight = [action.date, action.date];
+          state.start.pageDate = action.date;
+          state.end.pageDate = dateUtil.DateUtil.addMonths(action.date, 1, isHijri);
+        } else {
+          var isStartAfter = dateFns.isAfter(state.hilight[0], action.date);
+          var _start = isStartAfter ? action.date : state.hilight[0];
+          var _end = isStartAfter ? state.hilight[0] : action.date;
+          state.selected = [_start, _end];
+          state.hilight = undefined;
+          state.start.pageDate = _start;
+          state.end.pageDate = _end;
+        }
+      }
+      if (action.type === "changeHilight") {
+        if (state.hilight && action.date) {
+          var _state$hilight = _slicedToArray(state.hilight, 1),
+            _start2 = _state$hilight[0];
+          state.hilight = [_start2, action.date];
+        } else {
+          state.hilight = undefined;
+        }
+      }
+      if (action.type === "changeTime") {
+        if (action.range === "start") {
+          state.start.hour = action.hour;
+          state.start.minute = action.minute;
+          if (state.selected) {
+            var _state$selected$, _state$selected$2;
+            (_state$selected$ = state.selected[0]) === null || _state$selected$ === void 0 || _state$selected$.setHours(action.hour);
+            (_state$selected$2 = state.selected[0]) === null || _state$selected$2 === void 0 || _state$selected$2.setMinutes(action.minute);
+          }
+        }
+        if (action.range === "end") {
+          state.end.hour = action.hour;
+          state.end.minute = action.minute;
+          if (state.selected) {
+            var _state$selected$3, _state$selected$4;
+            (_state$selected$3 = state.selected[1]) === null || _state$selected$3 === void 0 || _state$selected$3.setHours(action.hour);
+            (_state$selected$4 = state.selected[1]) === null || _state$selected$4 === void 0 || _state$selected$4.setMinutes(action.minute);
+          }
+        }
+      }
+      if (action.type === "changePage") {
+        state[action.range].page = action.page;
+      }
+      if (action.type === "changePageDate") {
+        state[action.range].pageDate = action.date;
+        if (action.pageChange) {
+          state[action.range].page = Math.max(state[action.range].page - 1, 0);
+          action.range === "start" && state.start.page === index.PageType.DATE && (state.end.pageDate = dateFns.addMonths(action.date, 1));
+        }
+      }
+      if (action.type === "changeDate" || action.type === "changeTime") {
+        if (min && state.selected && dateFns.isBefore(state.selected[0], new Date(min))) {
+          state.selected[0] = new Date(min);
+          state.start.hour = state.selected[0].getHours();
+          state.start.minute = state.selected[0].getMinutes();
+        }
+        if (max && state.selected && dateFns.isAfter(state.selected[1], new Date(max))) {
+          state.selected[1] = new Date(max);
+          state.end.hour = state.selected[1].getHours();
+          state.end.minute = state.selected[1].getMinutes();
+        }
+        !showApply && state.selected && !state.hilight && (fireChange === null || fireChange === void 0 ? void 0 : fireChange([state.selected[0].toISOString(), state.selected[1].toISOString()]));
+      }
+      return _objectSpread({}, state);
+    }, {
+      start: {
+        page: index.PageType.DATE,
+        pageDate: new Date(),
+        hour: 0,
+        minute: 0
+      },
+      end: {
+        page: index.PageType.DATE,
+        pageDate: dateUtil.DateUtil.addMonths(new Date(), 1, isHijri),
+        hour: 0,
+        minute: 0
+      }
+    }),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  react.useEffect(function () {
+    dispatch({
+      type: "reset",
+      date: value
+    });
+  }, [value]);
+  var isStartDateDisabled = react.useCallback(function (dt) {
+    if (state.start.page === index.PageType.DATE) {
+      if (utilities.isArray(dateDisabled)) {
+        return !!dateDisabled.find(function (dd) {
+          return dateFns.isSameDay(new Date(dd), dt);
+        });
+      }
+    }
+    return dateUtil.DateUtil.isDisabled(dt, state.start.page, min, max);
+  }, [state.start.page, min, max, dateDisabled]);
+  var isEndDateDisabled = react.useCallback(function (dt) {
+    if (state.end.page === index.PageType.DATE) {
+      if (utilities.isArray(dateDisabled)) {
+        return !!dateDisabled.find(function (dd) {
+          return dateFns.isSameDay(new Date(dd), dt);
+        });
+      }
+    }
+    return dateUtil.DateUtil.isDisabled(dt, state.end.page, min, max);
+  }, [state.end.page, min, max, dateDisabled]);
+  var changeStartPageDate = react.useCallback(function (date) {
+    var pageChange = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    dispatch({
+      type: "changePageDate",
+      pageChange: pageChange,
+      range: "start",
+      date: date
+    });
+  }, []);
+  var changeEndPageDate = react.useCallback(function (date) {
+    var pageChange = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    dispatch({
+      type: "changePageDate",
+      pageChange: pageChange,
+      range: "end",
+      date: date
+    });
+  }, []);
+  var selectDate = react.useCallback(function (date) {
+    dispatch({
+      type: "changeDate",
+      date: date
+    });
+  }, []);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
+    className: classNames("block overflow-hidden bg-base rounded-capped", className)
+  }, rest), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-nowrap",
+      children: [/*#__PURE__*/jsxRuntime.jsx(BasePanel.BasePanel, _objectSpread(_objectSpread({}, state.start), {}, {
+        max: max,
+        min: min,
+        hideNext: true,
+        withTime: withTime,
+        isHijri: isHijri,
+        hilight: state.hilight,
+        selected: state.selected,
+        selectDate: selectDate,
+        isDateDisabled: isStartDateDisabled,
+        changeTime: function changeTime(time) {
+          return dispatch(_objectSpread({
+            type: "changeTime",
+            range: "start"
+          }, time));
+        },
+        changePage: function changePage(page) {
+          return dispatch({
+            type: "changePage",
+            range: "start",
+            page: page
+          });
+        },
+        mouseOver: function mouseOver(date) {
+          return dispatch({
+            type: "changeHilight",
+            date: date
+          });
+        },
+        changePageDate: changeStartPageDate
+      })), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "border-s border-s-dimmed"
+      }), /*#__PURE__*/jsxRuntime.jsx(BasePanel.BasePanel, _objectSpread(_objectSpread({}, state.end), {}, {
+        max: max,
+        min: min,
+        hidePrevious: true,
+        withTime: withTime,
+        isHijri: isHijri,
+        hilight: state.hilight,
+        selected: state.selected,
+        selectDate: selectDate,
+        isDateDisabled: isEndDateDisabled,
+        changeTime: function changeTime(time) {
+          return dispatch(_objectSpread({
+            type: "changeTime",
+            range: "end"
+          }, time));
+        },
+        changePage: function changePage(page) {
+          return dispatch({
+            type: "changePage",
+            range: "end",
+            page: page
+          });
+        },
+        mouseOver: function mouseOver(date) {
+          return dispatch({
+            type: "changeHilight",
+            date: date
+          });
+        },
+        changePageDate: changeEndPageDate
+      }))]
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "border-t flex flex-nowrap justify-between px-2",
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+        children: showHijriToggle && /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+          size: "sm",
+          variant: "link",
+          color: "primary",
+          className: "my-1",
+          onClick: function onClick() {
+            setHijri(!isHijri);
+          },
+          children: t(isHijri ? "label.gregorian" : "label.hijri")
+        })
+      }), state.start.page !== index.PageType.DATE && /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+        size: "sm",
+        variant: "link",
+        color: "primary",
+        className: "my-1",
+        onClick: function onClick() {
+          return dispatch({
+            type: "changePage",
+            range: "start",
+            page: index.PageType.DATE
+          });
+        },
+        children: t("core:action.cancel")
+      }), state.end.page !== index.PageType.DATE && /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+        size: "sm",
+        variant: "link",
+        color: "primary",
+        className: "my-1",
+        onClick: function onClick() {
+          return dispatch({
+            type: "changePage",
+            range: "end",
+            page: index.PageType.DATE
+          });
+        },
+        children: t("core:action.cancel")
+      }), state.hilight && /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+        size: "sm",
+        variant: "link",
+        color: "primary",
+        className: "my-1",
+        onClick: function onClick() {
+          return dispatch({
+            type: "changeHilight"
+          });
+        },
+        children: t("core:action.cancel")
+      }), !state.hilight && showApply && /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+        size: "sm",
+        variant: "solid",
+        color: "primary",
+        disabled: !state.selected,
+        className: "my-1",
+        onClick: function onClick() {
+          var _state$selected, _state$selected2;
+          return fireChange === null || fireChange === void 0 ? void 0 : fireChange([(_state$selected = state.selected) === null || _state$selected === void 0 ? void 0 : _state$selected[0].toISOString(), (_state$selected2 = state.selected) === null || _state$selected2 === void 0 ? void 0 : _state$selected2[1].toISOString()]);
+        },
+        children: t("core:action.apply")
+      })]
+    })]
+  }));
+};
+
+exports.RangePanel = RangePanel;

package/dist/cjs/superdate/EventPanel.js

@@ -0,0 +1,173 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var core = require('@react-fabric/core');
+var utilities = require('@react-fabric/utilities');
+var dateFns = require('date-fns');
+var i18next = require('i18next');
+var react = require('react');
+var reactI18next = require('react-i18next');
+var DateHeader = require('../components/DateHeader.js');
+var DecadePage = require('../components/DecadePage.js');
+var YearPage = require('../components/YearPage.js');
+var index = require('../types/index.js');
+var dateUtil = require('../utils/dateUtil.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+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; }
+var makeList = function makeList(year) {
+  var predefined = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var list = _toConsumableArray(predefined);
+  list.push({
+    label: "superdate:event.newYear",
+    start: dateFns.startOfDay(new Date("".concat(year - 1, "-12-31"))),
+    end: dateFns.endOfDay(new Date("".concat(year, "-01-01")))
+  });
+  list.push({
+    label: "superdate:event.christmas",
+    start: dateFns.startOfDay(new Date("".concat(year, "-12-24"))),
+    end: dateFns.endOfDay(new Date("".concat(year, "-12-26")))
+  });
+  // calculate ramadan period
+  var hijriStart = dateUtil.DateUtil.startOfYear(new Date("".concat(year - 1, "-12-31")), true);
+  hijriStart = dateUtil.DateUtil.addMonths(hijriStart, 8, true);
+  if (hijriStart.getFullYear() !== year) {
+    hijriStart = dateUtil.DateUtil.addYears(hijriStart, hijriStart.getFullYear() > year ? -1 : 1, true);
+  }
+  var hijriEnd = dateUtil.DateUtil.endOfMonth(hijriStart, true);
+  list.push({
+    label: "superdate:event.ramadan",
+    start: dateFns.startOfDay(hijriStart),
+    end: dateFns.endOfDay(hijriEnd)
+  });
+  return list.sort(function (a, b) {
+    return a.start.getTime() < b.start.getTime() ? -1 : 1;
+  });
+};
+var EventPanel = function EventPanel(_ref) {
+  var isHijri = _ref.isHijri,
+    onChange = _ref.onChange,
+    _ref$events = _ref.events,
+    events = _ref$events === void 0 ? utilities.EMPTY_ARRAY : _ref$events;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useState = react.useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    predefined = _useState2[0],
+    setPredefined = _useState2[1];
+  var _useReducer = react.useReducer(function (state, action) {
+      var resetList = false;
+      if (action.type === "init") {
+        state.pageDate = new Date();
+        resetList = true;
+      }
+      if (action.type === "changePage") {
+        state.page = Math.max(action.page, index.PageType.MONTH);
+      }
+      if (action.type === "changePageDate") {
+        resetList = true;
+        state.pageDate = action.date;
+        if (action.changePage !== false) {
+          state.page = Math.max(state.page - 1, index.PageType.MONTH);
+        }
+      }
+      if (resetList) {
+        var _predefined$year;
+        var year = state.pageDate.getFullYear();
+        state.events = makeList(year, (_predefined$year = predefined[year]) !== null && _predefined$year !== void 0 ? _predefined$year : []);
+      }
+      return _objectSpread({}, state);
+    }, {
+      pageDate: new Date(),
+      page: index.PageType.MONTH,
+      events: []
+    }),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  react.useEffect(function () {
+    dispatch({
+      type: "init"
+    });
+  }, []);
+  react.useEffect(function () {
+    var predefined = {};
+    events.forEach(function (evt) {
+      var start = dateFns.startOfDay(new Date(evt.start));
+      var end = dateFns.endOfDay(new Date(evt.end));
+      if (!predefined[start.getFullYear()]) predefined[start.getFullYear()] = [];
+      predefined[start.getFullYear()].push(evt);
+      if (start.getFullYear() !== end.getFullYear()) {
+        if (!predefined[end.getFullYear()]) predefined[end.getFullYear()] = [];
+        predefined[end.getFullYear()].push(evt);
+      }
+    });
+    setPredefined(predefined);
+  }, [events]);
+  return /*#__PURE__*/jsxRuntime.jsxs(core.Section, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(DateHeader.DateHeader, {
+      page: state.page,
+      pageDate: state.pageDate,
+      changePage: function changePage(page) {
+        return dispatch({
+          type: "changePage",
+          page: page
+        });
+      },
+      changePageDate: function changePageDate(date) {
+        return dispatch({
+          type: "changePageDate",
+          date: date,
+          changePage: false
+        });
+      }
+    }), state.page === index.PageType.MONTH && /*#__PURE__*/jsxRuntime.jsx(core.Content, {
+      className: "p-2 max-h-48",
+      children: state.events.map(function (evt) {
+        return /*#__PURE__*/jsxRuntime.jsxs("div", {
+          role: "none",
+          onClick: function onClick() {
+            onChange === null || onChange === void 0 || onChange("".concat(evt.start.toISOString(), "|").concat(evt.end.toISOString()), [evt.start.toISOString(), evt.end.toISOString()]);
+          },
+          className: "text-sm my-1 py-1 px-2 flex flex-nowrap items-center cursor-pointer rounded hover:bg-primary-50",
+          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "flex-1 truncate",
+            children: t(evt.label, {
+              defaultValue: evt.label
+            })
+          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "text-muted text-xs",
+            children: [dateUtil.DateUtil.format(evt.start, dateFns.isSameMonth(evt.start, evt.end) ? "dd" : "dd/MMM", i18next.language, isHijri), /*#__PURE__*/jsxRuntime.jsx("span", {
+              children: " - "
+            }), dateUtil.DateUtil.format(evt.end, "dd/MMM", i18next.language, isHijri)]
+          })]
+        }, evt.label);
+      })
+    }), state.page === index.PageType.YEAR && /*#__PURE__*/jsxRuntime.jsx(YearPage.YearPage, {
+      isHijri: isHijri,
+      page: state.page,
+      pageDate: state.pageDate,
+      changePageDate: function changePageDate(date) {
+        return dispatch({
+          type: "changePageDate",
+          date: date
+        });
+      }
+    }), state.page === index.PageType.DECADE && /*#__PURE__*/jsxRuntime.jsx(DecadePage.DecadePage, {
+      isHijri: isHijri,
+      page: state.page,
+      pageDate: state.pageDate,
+      changePageDate: function changePageDate(date) {
+        return dispatch({
+          type: "changePageDate",
+          date: date
+        });
+      }
+    })]
+  });
+};
+
+exports.EventPanel = EventPanel;

package/dist/cjs/superdate/QuickSelect.js

@@ -0,0 +1,134 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var core = require('@react-fabric/core');
+var form = require('@react-fabric/form');
+var utilities = require('@react-fabric/utilities');
+var react = require('react');
+var reactI18next = require('react-i18next');
+var index = require('../types/index.js');
+var RelativeInput = require('./RelativeInput.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+var DEFAULT_PRESETS = [{
+  value: "$day",
+  label: "superdate:now.$day"
+}, {
+  value: "$day-1",
+  label: "superdate:prev.$day"
+}, {
+  value: "$day+1",
+  label: "superdate:next.$day"
+}, {
+  value: "$week",
+  label: "superdate:now.$week"
+}, {
+  value: "$week-1",
+  label: "superdate:prev.$week"
+}, {
+  value: "$week+1",
+  label: "superdate:next.$week"
+}, {
+  value: "$month",
+  label: "superdate:now.$month"
+}, {
+  value: "$month-1",
+  label: "superdate:prev.$month"
+}, {
+  value: "$month+1",
+  label: "superdate:next.$month"
+}, {
+  value: "$quarter",
+  label: "superdate:now.$quarter"
+}, {
+  value: "$quarter-1",
+  label: "superdate:prev.$quarter"
+}, {
+  value: "$quarter+1",
+  label: "superdate:next.$quarter"
+}, {
+  value: "$year",
+  label: "superdate:now.$year"
+}, {
+  value: "$year-1",
+  label: "superdate:prev.$year"
+}, {
+  value: "$year+1",
+  label: "superdate:next.$year"
+}];
+var schema = utilities.yup.object({
+  rel: utilities.yup.object({
+    diff: utilities.yup.number().required().label("Difference"),
+    op: utilities.yup.string().required().oneOf(["+", "-"]).label("Operator"),
+    part: utilities.yup.string().required().oneOf(Object.values(index.DatePart)).label("Date part")
+  })
+});
+var QuickSelect = function QuickSelect(_ref) {
+  var _ref$presets = _ref.presets,
+    presets = _ref$presets === void 0 ? DEFAULT_PRESETS : _ref$presets,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? "" : _ref$value,
+    onChange = _ref.onChange;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var handleChange = react.useCallback(function (_ref2) {
+    var _ref2$rel = _ref2.rel,
+      part = _ref2$rel.part,
+      diff = _ref2$rel.diff,
+      op = _ref2$rel.op;
+    onChange("".concat(part).concat(op).concat(diff, "|").concat(index.DatePart.NOW));
+  }, []);
+  var defaultValue = react.useMemo(function () {
+    if (value !== null && value !== void 0 && value.endsWith(index.DatePart.NOW)) {
+      var _value$split$shift$ma;
+      var _ref3 = (_value$split$shift$ma = value.split("|").shift().match(/^(\$\w+)([+-])(\d+)?$/)) !== null && _value$split$shift$ma !== void 0 ? _value$split$shift$ma : [],
+        _ref4 = _slicedToArray(_ref3, 4),
+        part = _ref4[1],
+        op = _ref4[2],
+        _ref4$ = _ref4[3],
+        diff = _ref4$ === void 0 ? "0" : _ref4$;
+      return {
+        rel: {
+          part: part,
+          op: op,
+          diff: diff
+        }
+      };
+    }
+  }, [value]);
+  return /*#__PURE__*/jsxRuntime.jsxs(core.Content, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "inline-block origin-left rtl:origin-right",
+      style: {
+        zoom: 0.85
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx(form.Form, {
+        schema: schema,
+        onSubmit: handleChange,
+        defaultValues: defaultValue,
+        children: /*#__PURE__*/jsxRuntime.jsx(RelativeInput.RelativeInput, {
+          label: t("superdate:label.relative"),
+          prefix: "rel",
+          showApply: true
+        })
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(core.Divider, {
+      children: t("superdate:label.preset")
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "grid grid-cols-3 flex-row text-sm gap-2",
+      children: presets.map(function (pr) {
+        return /*#__PURE__*/jsxRuntime.jsx("button", {
+          className: "link appearance-none text-start",
+          onClick: function onClick() {
+            return onChange === null || onChange === void 0 ? void 0 : onChange(pr.value);
+          },
+          children: t(pr.label, {
+            defaultValue: pr.label
+          })
+        }, pr.value);
+      })
+    })]
+  });
+};
+
+exports.QuickSelect = QuickSelect;