@onesy/ui-react 1.0.130 → 1.0.131

package/CalendarMenu/CalendarMenu.js

@@ -1,314 +1,441 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("@onesy/utils");
-const style_react_1 = require("@onesy/style-react");
-const date_1 = require("@onesy/date");
-const IconMaterialScheduleW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialScheduleW100"));
-const IconMaterialWbSunnyW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialWbSunnyW100"));
-const IconMaterialWbTwilightW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialWbTwilightW100"));
-const IconMaterialCounter7W100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialCounter7W100"));
-const IconMaterialCalendarMonthW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialCalendarMonthW100"));
-const IconMaterialDeleteW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialDeleteW100"));
-const Menu_1 = __importDefault(require("../Menu"));
-const Calendar_1 = __importDefault(require("../Calendar"));
-const Line_1 = __importDefault(require("../Line"));
-const Tooltip_1 = __importDefault(require("../Tooltip"));
-const IconButton_1 = __importDefault(require("../IconButton"));
-const Button_1 = __importDefault(require("../Button"));
-const ListItem_1 = __importDefault(require("../ListItem"));
-const PaginationItem_1 = __importDefault(require("../PaginationItem"));
-const TimePicker_1 = __importDefault(require("../TimePicker"));
-const Type_1 = __importDefault(require("../Type"));
-const utils_2 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {},
-    weekday: {
-        cursor: 'pointer'
-    },
-    dayValue: {
-        '&:hover': {
-            boxShadow: 'inset 0px 0px 0px 1px currentColor'
-        }
-    },
-    dayValueRepeating: {
-        background: theme.palette.background.secondary.quaternary
-    },
-    calendar: {
-        boxShadow: '0px 4px 32px 0px rgba(0, 0, 0, 0.04)',
-        '& .onesy-Calendar-header': {
-            paddingTop: '0px'
-        },
-        '& .onesy-Calendar-calendars': {
-            paddingBottom: '4px'
-        }
-    },
-    calendarShortcuts: {
-        padding: '14px 16px 2px'
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("@onesy/utils");
+var _styleReact = require("@onesy/style-react");
+var _date = require("@onesy/date");
+var _IconMaterialScheduleW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialScheduleW100"));
+var _IconMaterialWbSunnyW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialWbSunnyW100"));
+var _IconMaterialWbTwilightW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialWbTwilightW100"));
+var _IconMaterialCounter7W = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialCounter7W100"));
+var _IconMaterialCalendarMonthW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialCalendarMonthW100"));
+var _IconMaterialDeleteW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialDeleteW100"));
+var _Menu = _interopRequireDefault(require("../Menu"));
+var _Calendar = _interopRequireDefault(require("../Calendar"));
+var _Line = _interopRequireDefault(require("../Line"));
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _ListItem = _interopRequireDefault(require("../ListItem"));
+var _PaginationItem = _interopRequireDefault(require("../PaginationItem"));
+var _TimePicker = _interopRequireDefault(require("../TimePicker"));
+var _Type = _interopRequireDefault(require("../Type"));
+var _utils2 = require("../utils");
+const _excluded = ["value", "dateProperty", "menuOpen", "menuOpenDefault", "timeMenuOpen", "timeMenuOpenDefault", "onChange", "onRemove", "closeOnChange", "startBottom", "endBottom", "noRemove", "TimePickerProps", "children", "className"];
+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) { (0, _defineProperty2.default)(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; }
+const useStyle = (0, _styleReact.style)(theme => ({
+  root: {},
+  weekday: {
+    cursor: 'pointer'
+  },
+  dayValue: {
+    '&:hover': {
+      boxShadow: 'inset 0px 0px 0px 1px currentColor'
+    }
+  },
+  dayValueRepeating: {
+    background: theme.palette.background.secondary.quaternary
+  },
+  calendar: {
+    boxShadow: '0px 4px 32px 0px rgba(0, 0, 0, 0.04)',
+    '& .onesy-Calendar-header': {
+      paddingTop: '0px'
     },
-    end: {
-        padding: '0 12px 12px',
-        '& .onesy-ListItem-root': {
-            minHeight: '24px !important',
-            padding: '0 8px',
-            borderRadius: theme.methods.shape.radius.value(0.5, 'px')
-        }
+    '& .onesy-Calendar-calendars': {
+      paddingBottom: '4px'
+    }
+  },
+  calendarShortcuts: {
+    padding: '14px 16px 2px'
+  },
+  end: {
+    padding: '0 12px 12px',
+    '& .onesy-ListItem-root': {
+      minHeight: '24px !important',
+      padding: '0 8px',
+      borderRadius: theme.methods.shape.radius.value(0.5, 'px')
+    }
+  },
+  minorMenu: {
+    '& .onesy-List-root': {
+      width: '100%'
+    }
+  },
+  repeatEndMenu: {
+    '& .onesy-List-root': {
+      width: '100%'
+    }
+  },
+  menuMore: {
+    width: '100%',
+    padding: '12px',
+    borderRadius: theme.methods.shape.radius.value(0.5, 'px'),
+    '& .onesy-TextField-input-wrapper': {
+      paddingBlock: '12px',
+      height: '40px'
     },
-    minorMenu: {
-        '& .onesy-List-root': {
-            width: '100%'
-        }
+    '& .onesy-TextField-icon-end': {
+      paddingBlock: '8px'
+    }
+  },
+  item: {
+    '& .onesy-ListItem-root': {
+      minHeight: '30px !important'
     },
-    repeatEndMenu: {
-        '& .onesy-List-root': {
-            width: '100%'
+    '&.onesy-Surface-root': {
+      background: 'transparent'
+    }
+  },
+  iconInactive: {
+    opacity: '0',
+    pointerEvents: 'none'
+  },
+  menuFooter: {
+    marginTop: '8px'
+  }
+}), {
+  name: 'onesy-CalendarMenu'
+});
+const CalendarMenu = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _refs$time$current;
+  const theme = (0, _styleReact.useOnesyTheme)();
+  const l = theme.l;
+  const props = _react.default.useMemo(() => {
+    var _theme$ui, _theme$ui2;
+    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyCalendarAvailability) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  }, [props_]);
+  const Line = _react.default.useMemo(() => {
+    var _theme$elements;
+    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
+  }, [theme]);
+  const Menu = _react.default.useMemo(() => {
+    var _theme$elements2;
+    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Menu) || _Menu.default;
+  }, [theme]);
+  const Calendar = _react.default.useMemo(() => {
+    var _theme$elements3;
+    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Calendar) || _Calendar.default;
+  }, [theme]);
+  const Tooltip = _react.default.useMemo(() => {
+    var _theme$elements4;
+    return (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Tooltip) || _Tooltip.default;
+  }, [theme]);
+  const IconButton = _react.default.useMemo(() => {
+    var _theme$elements5;
+    return (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.IconButton) || _IconButton.default;
+  }, [theme]);
+  const Button = _react.default.useMemo(() => {
+    var _theme$elements6;
+    return (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Button) || _Button.default;
+  }, [theme]);
+  const ListItem = _react.default.useMemo(() => {
+    var _theme$elements7;
+    return (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.ListItem) || _ListItem.default;
+  }, [theme]);
+  const PaginationItem = _react.default.useMemo(() => {
+    var _theme$elements8;
+    return (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.PaginationItem) || _PaginationItem.default;
+  }, [theme]);
+  const TimePicker = _react.default.useMemo(() => {
+    var _theme$elements9;
+    return (theme === null || theme === void 0 || (_theme$elements9 = theme.elements) === null || _theme$elements9 === void 0 ? void 0 : _theme$elements9.TimePicker) || _TimePicker.default;
+  }, [theme]);
+  const Type = _react.default.useMemo(() => {
+    var _theme$elements10;
+    return (theme === null || theme === void 0 || (_theme$elements10 = theme.elements) === null || _theme$elements10 === void 0 ? void 0 : _theme$elements10.Type) || _Type.default;
+  }, [theme]);
+  const {
+      value,
+      dateProperty = 'ends_at',
+      menuOpen: menuOpen_,
+      menuOpenDefault,
+      timeMenuOpen: timeMenuOpen_,
+      timeMenuOpenDefault,
+      onChange: onChange_,
+      onRemove: onRemove_,
+      closeOnChange = true,
+      startBottom,
+      endBottom,
+      noRemove,
+      TimePickerProps,
+      children,
+      className
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const [menuOpen, setMenuOpen] = _react.default.useState(menuOpenDefault !== undefined ? menuOpenDefault : menuOpen_ !== undefined ? menuOpen_ : false);
+  const [timeMenuOpen, setTimeMenuOpen] = _react.default.useState(timeMenuOpenDefault !== undefined ? timeMenuOpenDefault : timeMenuOpen_ !== undefined ? timeMenuOpen_ : false);
+  const refs = {
+    value: _react.default.useRef(value),
+    dateProperty: _react.default.useRef(dateProperty),
+    time: _react.default.useRef(undefined),
+    repeat: _react.default.useRef(undefined),
+    repeatEnd: _react.default.useRef(undefined),
+    onChange: _react.default.useRef(onChange_),
+    repeatCount: _react.default.useRef({})
+  };
+  refs.dateProperty.current = dateProperty;
+  refs.value.current = value;
+  refs.onChange.current = onChange_;
+  const onChange = _react.default.useCallback(async (...args) => {
+    if ((0, _utils.is)('function', onChange_)) onChange_(...args);
+  }, [onChange_]);
+  _react.default.useEffect(() => {
+    if (menuOpen !== menuOpen_ && menuOpen_ !== undefined) setMenuOpen(menuOpen_);
+  }, [menuOpen_]);
+  _react.default.useEffect(() => {
+    if (timeMenuOpen !== timeMenuOpen_ && timeMenuOpen_ !== undefined) setTimeMenuOpen(timeMenuOpen_);
+  }, [timeMenuOpen_]);
+  const onMenuOpen = _react.default.useCallback(() => {
+    setMenuOpen(true);
+  }, []);
+  const onMenuClose = _react.default.useCallback(() => {
+    setMenuOpen(false);
+  }, []);
+  const onTimeMenuOpen = _react.default.useCallback(() => {
+    setTimeMenuOpen(true);
+  }, []);
+  const onTimeMenuClose = _react.default.useCallback(() => {
+    setTimeMenuOpen(false);
+  }, []);
+  const onChangeDate = _react.default.useCallback(valueNew => {
+    if (closeOnChange) onMenuClose();
+    onChange(refs.dateProperty.current, valueNew === null || valueNew === void 0 ? void 0 : valueNew.milliseconds);
+  }, [closeOnChange, onChange]);
+  const onChangeTime = _react.default.useCallback(valueNew => {
+    onTimeMenuClose();
+    onChange(refs.dateProperty.current, valueNew === null || valueNew === void 0 ? void 0 : valueNew.milliseconds);
+  }, [onTimeMenuClose, closeOnChange, onChange]);
+  const onRemove = _react.default.useCallback(() => {
+    if ((0, _utils.is)('function', onRemove_)) onRemove_(value);
+  }, [value, onRemove_]);
+  _react.default.useEffect(() => {
+    // reset
+    refs.repeatCount.current = {};
+  }, [(0, _utils.hash)(value)]);
+  const iconProps = {
+    size: 'regular'
+  };
+  const shortcuts = [{
+    name: l('Today'),
+    onClick: () => onChangeDate(new _date.OnesyDate()),
+    icon: /*#__PURE__*/_react.default.createElement(_IconMaterialWbSunnyW.default, iconProps)
+  }, {
+    name: l('Tomorrow'),
+    onClick: () => onChangeDate((0, _date.add)(1, 'day')),
+    icon: /*#__PURE__*/_react.default.createElement(_IconMaterialWbTwilightW.default, iconProps)
+  }, {
+    name: l('7 days'),
+    onClick: () => onChangeDate((0, _date.add)(7, 'day')),
+    icon: /*#__PURE__*/_react.default.createElement(_IconMaterialCounter7W.default, iconProps)
+  }, {
+    name: l('1 month'),
+    onClick: () => onChangeDate((0, _date.add)(1, 'month')),
+    icon: /*#__PURE__*/_react.default.createElement(_IconMaterialCalendarMonthW.default, iconProps)
+  }];
+  const onClear = _react.default.useCallback(event => {
+    onChange(refs.dateProperty.current, null);
+  }, [onChange]);
+  const date = _react.default.useMemo(() => new _date.OnesyDate((value === null || value === void 0 ? void 0 : value[dateProperty]) || undefined), [value, dateProperty]);
+  const repeats = day => {
+    var _value$repeat, _value$repeat2, _value$repeat3, _value$repeat4, _value$repeat7, _value$repeat8, _value$repeat9;
+    if (!(value !== null && value !== void 0 && (_value$repeat = value.repeat) !== null && _value$repeat !== void 0 && _value$repeat.active)) return;
+    let unit = value === null || value === void 0 || (_value$repeat2 = value.repeat) === null || _value$repeat2 === void 0 ? void 0 : _value$repeat2.unit;
+    let valueRepeat = value === null || value === void 0 || (_value$repeat3 = value.repeat) === null || _value$repeat3 === void 0 ? void 0 : _value$repeat3.value;
+    if (unit === 'day') unit = 'days';
+    if (unit === 'week') {
+      unit = 'days';
+      valueRepeat *= 7;
+    }
+    if (unit === 'month') unit = 'months';
+    let difference = (0, _date.diff)(day, date, unit);
+    let repeating = false;
+    if (['day', 'week'].includes(value === null || value === void 0 || (_value$repeat4 = value.repeat) === null || _value$repeat4 === void 0 ? void 0 : _value$repeat4.unit)) {
+      var _value$repeat5;
+      if ((value === null || value === void 0 ? void 0 : value.repeat.unit) === 'week' && !!(value !== null && value !== void 0 && (_value$repeat5 = value.repeat) !== null && _value$repeat5 !== void 0 && (_value$repeat5 = _value$repeat5.weekdays) !== null && _value$repeat5 !== void 0 && _value$repeat5.length)) {
+        var _value$repeat6, _value$repeat$weekday;
+        difference = (0, _date.diff)(day, date.dayWeek === 0 ? (0, _date.add)(-1, 'week', date) : date, 'weeks');
+        if (day.dayWeek === 0) difference -= 1;
+        const modulus = difference % (value === null || value === void 0 || (_value$repeat6 = value.repeat) === null || _value$repeat6 === void 0 ? void 0 : _value$repeat6.value);
+        repeating = (0, _date.is)(day, 'after or same', date) && !modulus && (value === null || value === void 0 || (_value$repeat$weekday = value.repeat.weekdays) === null || _value$repeat$weekday === void 0 ? void 0 : _value$repeat$weekday.includes(day.dayWeek));
+      } else {
+        const modulus = difference % valueRepeat;
+        repeating = (0, _date.is)(day, 'after or same', date) && !modulus;
+      }
+    }
+    if (['month'].includes(value === null || value === void 0 || (_value$repeat7 = value.repeat) === null || _value$repeat7 === void 0 ? void 0 : _value$repeat7.unit)) {
+      const modulus = difference % valueRepeat;
+      const monthDate = (0, _date.add)(difference, 'month', date);
+      repeating = monthDate.year === day.year && monthDate.dayYear === day.dayYear && !modulus;
+    }
+    if (['year'].includes(value === null || value === void 0 || (_value$repeat8 = value.repeat) === null || _value$repeat8 === void 0 ? void 0 : _value$repeat8.unit)) {
+      const modulus = difference % valueRepeat;
+      const yearDate = (0, _date.add)(difference, 'year', date);
+      repeating = (0, _date.is)(day, 'after', date) && yearDate.year === day.year && yearDate.dayYear === day.dayYear && !modulus;
+    }
+    if (value !== null && value !== void 0 && (_value$repeat9 = value.repeat) !== null && _value$repeat9 !== void 0 && _value$repeat9.skip_weekends && [0, 6].includes(day.dayWeek)) repeating = false;
+    if (repeating) {
+      var _value$repeat10, _value$repeat11, _value$repeat$ends;
+      const formated = (0, _date.format)(day, _utils2.formats.date);
+      if (value !== null && value !== void 0 && (_value$repeat10 = value.repeat) !== null && _value$repeat10 !== void 0 && (_value$repeat10 = _value$repeat10.ends) !== null && _value$repeat10 !== void 0 && _value$repeat10.active) {
+        // date
+        if ((value === null || value === void 0 ? void 0 : value.repeat.ends.version) === 'date') {
+          const endsDate = new _date.OnesyDate(value === null || value === void 0 ? void 0 : value.repeat.ends.value);
+          repeating = repeating && (day.year < endsDate.year || day.year === endsDate.year && (day.month < endsDate.month || day.month === endsDate.month && day.dayYear <= endsDate.dayYear));
         }
-    },
-    menuMore: {
-        width: '100%',
-        padding: '12px',
-        borderRadius: theme.methods.shape.radius.value(0.5, 'px'),
-        '& .onesy-TextField-input-wrapper': {
-            paddingBlock: '12px',
-            height: '40px'
+      }
+      if (repeating) {
+        if (!refs.repeatCount.current[value === null || value === void 0 ? void 0 : value.id]) refs.repeatCount.current[value === null || value === void 0 ? void 0 : value.id] = [];
+        if (!refs.repeatCount.current[value === null || value === void 0 ? void 0 : value.id].includes(formated)) refs.repeatCount.current[value === null || value === void 0 ? void 0 : value.id].push(formated);
+      }
+      if (value !== null && value !== void 0 && (_value$repeat11 = value.repeat) !== null && _value$repeat11 !== void 0 && (_value$repeat11 = _value$repeat11.ends) !== null && _value$repeat11 !== void 0 && _value$repeat11.active) {
+        var _refs$repeatCount$cur;
+        const indexRepeated = (_refs$repeatCount$cur = refs.repeatCount.current[value === null || value === void 0 ? void 0 : value.id]) === null || _refs$repeatCount$cur === void 0 ? void 0 : _refs$repeatCount$cur.indexOf(formated);
+
+        // count
+        if ((value === null || value === void 0 ? void 0 : value.repeat.ends.version) === 'count') repeating = repeating && (value === null || value === void 0 ? void 0 : value.repeat.ends.value) >= (indexRepeated === -1 ? 0 : indexRepeated) + 1;
+      }
+      repeating = !(value !== null && value !== void 0 && (_value$repeat$ends = value.repeat.ends) !== null && _value$repeat$ends !== void 0 && _value$repeat$ends.active) || repeating;
+    }
+    return repeating;
+  };
+  const onContextMenu = _react.default.useCallback(event => {
+    event.stopPropagation();
+  }, []);
+  const palette = theme.palette.color.primary;
+  return /*#__PURE__*/_react.default.createElement(Menu, (0, _extends2.default)({
+    open: menuOpen,
+    onOpen: onMenuOpen,
+    onClose: onMenuClose,
+    onContextMenu: onContextMenu,
+    name: /*#__PURE__*/_react.default.createElement(Calendar, {
+      tonal: true,
+      color: "themed",
+      calendarDefault: date,
+      start: /*#__PURE__*/_react.default.createElement(Line, {
+        gap: 1,
+        direction: "row",
+        align: "center",
+        justify: "center",
+        className: classes.calendarShortcuts
+      }, shortcuts.map((item, index) => /*#__PURE__*/_react.default.createElement(Tooltip, {
+        key: index,
+        name: item.name
+      }, /*#__PURE__*/_react.default.createElement(IconButton, {
+        onClick: () => {
+          item.onClick();
+          onMenuClose();
         },
-        '& .onesy-TextField-icon-end': {
-            paddingBlock: '8px'
+        size: "small"
+      }, item.icon)))),
+      value: value !== null && value !== void 0 && value[dateProperty] ? date : null,
+      onChange: onChangeDate,
+      onContextMenu: onContextMenu,
+      size: "small",
+      end: /*#__PURE__*/_react.default.createElement(Line, {
+        gap: 0.5,
+        fullWidth: true,
+        className: classes.end
+      }, startBottom, (value === null || value === void 0 ? void 0 : value[dateProperty]) && /*#__PURE__*/_react.default.createElement(Menu, {
+        open: timeMenuOpen,
+        onOpen: onTimeMenuOpen,
+        onClose: onTimeMenuClose,
+        name: () => /*#__PURE__*/_react.default.createElement(Line, {
+          gap: 1,
+          align: "center",
+          fullWidth: true
+        }, /*#__PURE__*/_react.default.createElement(TimePicker, (0, _extends2.default)({
+          value: date,
+          onChange: onChangeTime,
+          clear: false,
+          MainProps: {
+            elevation: theme.palette.light ? 8 : 0
+          },
+          size: "small",
+          static: true
+        }, TimePickerProps))),
+        className: (0, _styleReact.classNames)([classes.timeMenu, 'onesy-time']),
+        style: {
+          width: (_refs$time$current = refs.time.current) === null || _refs$time$current === void 0 ? void 0 : _refs$time$current.clientWidth
         }
-    },
-    item: {
-        '& .onesy-ListItem-root': {
-            minHeight: '30px !important'
+      }, /*#__PURE__*/_react.default.createElement(ListItem, {
+        ref: refs.time,
+        start: /*#__PURE__*/_react.default.createElement(_IconMaterialScheduleW.default, iconProps),
+        primary: /*#__PURE__*/_react.default.createElement(Type, {
+          version: "b2",
+          color: "inherit"
+        }, (0, _date.format)(date, 'HH:mm', {
+          l
+        })),
+        startAlign: "center",
+        size: "small",
+        button: true,
+        Component: "div",
+        className: classes.item
+      })), endBottom, /*#__PURE__*/_react.default.createElement(Line, {
+        gap: 0.4,
+        direction: "row",
+        align: "center",
+        justify: "space-between",
+        fullWidth: true,
+        className: classes.menuFooter
+      }, /*#__PURE__*/_react.default.createElement(Button, {
+        onClick: onClear,
+        version: "text",
+        size: "small",
+        disabled: !(value !== null && value !== void 0 && value[dateProperty])
+      }, l('Clear')), !noRemove && /*#__PURE__*/_react.default.createElement(Tooltip, {
+        name: l('Remove')
+      }, /*#__PURE__*/_react.default.createElement(IconButton, {
+        size: "small",
+        onClick: onRemove
+      }, /*#__PURE__*/_react.default.createElement(_IconMaterialDeleteW.default, iconProps))))),
+      CalendarMonthProps: {
+        renderDay: (dayOnesyDate, propsDay, day, outside) => {
+          const repeating = repeats(dayOnesyDate);
+          return /*#__PURE__*/_react.default.createElement(PaginationItem, (0, _extends2.default)({
+            tonal: true,
+            color: "inherit",
+            size: "small",
+            InteractionProps: {
+              background: false
+            },
+            TypeProps: {
+              version: 'b3',
+              priority: !day.selected ? !day.weekend ? 'primary' : 'secondary' : undefined
+            },
+            "aria-label": (0, _date.format)(dayOnesyDate, 'DD-MM-YYYY', {
+              l
+            }),
+            className: (0, _styleReact.classNames)([classes.dayValue, repeating && classes.dayValueRepeating]),
+            style: _objectSpread(_objectSpread({}, day.today ? {
+              boxShadow: `inset 0px 0px 0px 1px ${palette[40]}`
+            } : undefined), day.selected ? {
+              color: theme.methods.palette.color.value(undefined, 90, true, palette),
+              backgroundColor: theme.methods.palette.color.value(undefined, 40, true, palette)
+            } : undefined)
+          }, propsDay), day.value);
         },
-        '&.onesy-Surface-root': {
-            background: 'transparent'
-        }
-    },
-    iconInactive: {
-        opacity: '0',
-        pointerEvents: 'none'
+        noTransition: true
+      },
+      className: (0, _styleReact.classNames)(['onesy-ObjectCalendar-root', classes.calendar])
+    }),
+    ClickListenerProps: {
+      contextMenu: false
     },
-    menuFooter: {
-        marginTop: '8px'
-    }
-}), { name: 'onesy-CalendarMenu' });
-const CalendarMenu = react_1.default.forwardRef((props_, ref) => {
-    var _a;
-    const theme = (0, style_react_1.useOnesyTheme)();
-    const l = theme.l;
-    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyCalendarAvailability) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
-    const Menu = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Menu) || Menu_1.default; }, [theme]);
-    const Calendar = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Calendar) || Calendar_1.default; }, [theme]);
-    const Tooltip = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tooltip) || Tooltip_1.default; }, [theme]);
-    const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
-    const Button = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Button) || Button_1.default; }, [theme]);
-    const ListItem = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ListItem) || ListItem_1.default; }, [theme]);
-    const PaginationItem = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.PaginationItem) || PaginationItem_1.default; }, [theme]);
-    const TimePicker = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.TimePicker) || TimePicker_1.default; }, [theme]);
-    const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
-    const { value, dateProperty = 'ends_at', menuOpen: menuOpen_, menuOpenDefault, timeMenuOpen: timeMenuOpen_, timeMenuOpenDefault, onChange: onChange_, onRemove: onRemove_, closeOnChange = true, startBottom, endBottom, noRemove, TimePickerProps, children, className } = props, other = __rest(props, ["value", "dateProperty", "menuOpen", "menuOpenDefault", "timeMenuOpen", "timeMenuOpenDefault", "onChange", "onRemove", "closeOnChange", "startBottom", "endBottom", "noRemove", "TimePickerProps", "children", "className"]);
-    const { classes } = useStyle();
-    const [menuOpen, setMenuOpen] = react_1.default.useState(menuOpenDefault !== undefined ? menuOpenDefault : menuOpen_ !== undefined ? menuOpen_ : false);
-    const [timeMenuOpen, setTimeMenuOpen] = react_1.default.useState(timeMenuOpenDefault !== undefined ? timeMenuOpenDefault : timeMenuOpen_ !== undefined ? timeMenuOpen_ : false);
-    const refs = {
-        value: react_1.default.useRef(value),
-        dateProperty: react_1.default.useRef(dateProperty),
-        time: react_1.default.useRef(undefined),
-        repeat: react_1.default.useRef(undefined),
-        repeatEnd: react_1.default.useRef(undefined),
-        onChange: react_1.default.useRef(onChange_),
-        repeatCount: react_1.default.useRef({})
-    };
-    refs.dateProperty.current = dateProperty;
-    refs.value.current = value;
-    refs.onChange.current = onChange_;
-    const onChange = react_1.default.useCallback(async (...args) => {
-        if ((0, utils_1.is)('function', onChange_))
-            onChange_(...args);
-    }, [onChange_]);
-    react_1.default.useEffect(() => {
-        if (menuOpen !== menuOpen_ && menuOpen_ !== undefined)
-            setMenuOpen(menuOpen_);
-    }, [menuOpen_]);
-    react_1.default.useEffect(() => {
-        if (timeMenuOpen !== timeMenuOpen_ && timeMenuOpen_ !== undefined)
-            setTimeMenuOpen(timeMenuOpen_);
-    }, [timeMenuOpen_]);
-    const onMenuOpen = react_1.default.useCallback(() => {
-        setMenuOpen(true);
-    }, []);
-    const onMenuClose = react_1.default.useCallback(() => {
-        setMenuOpen(false);
-    }, []);
-    const onTimeMenuOpen = react_1.default.useCallback(() => {
-        setTimeMenuOpen(true);
-    }, []);
-    const onTimeMenuClose = react_1.default.useCallback(() => {
-        setTimeMenuOpen(false);
-    }, []);
-    const onChangeDate = react_1.default.useCallback((valueNew) => {
-        if (closeOnChange)
-            onMenuClose();
-        onChange(refs.dateProperty.current, valueNew === null || valueNew === void 0 ? void 0 : valueNew.milliseconds);
-    }, [closeOnChange, onChange]);
-    const onChangeTime = react_1.default.useCallback((valueNew) => {
-        onTimeMenuClose();
-        onChange(refs.dateProperty.current, valueNew === null || valueNew === void 0 ? void 0 : valueNew.milliseconds);
-    }, [onTimeMenuClose, closeOnChange, onChange]);
-    const onRemove = react_1.default.useCallback(() => {
-        if ((0, utils_1.is)('function', onRemove_))
-            onRemove_(value);
-    }, [value, onRemove_]);
-    react_1.default.useEffect(() => {
-        // reset
-        refs.repeatCount.current = {};
-    }, [(0, utils_1.hash)(value)]);
-    const iconProps = {
-        size: 'regular'
-    };
-    const shortcuts = [
-        { name: l('Today'), onClick: () => onChangeDate(new date_1.OnesyDate()), icon: (0, jsx_runtime_1.jsx)(IconMaterialWbSunnyW100_1.default, Object.assign({}, iconProps)) },
-        { name: l('Tomorrow'), onClick: () => onChangeDate((0, date_1.add)(1, 'day')), icon: (0, jsx_runtime_1.jsx)(IconMaterialWbTwilightW100_1.default, Object.assign({}, iconProps)) },
-        { name: l('7 days'), onClick: () => onChangeDate((0, date_1.add)(7, 'day')), icon: (0, jsx_runtime_1.jsx)(IconMaterialCounter7W100_1.default, Object.assign({}, iconProps)) },
-        { name: l('1 month'), onClick: () => onChangeDate((0, date_1.add)(1, 'month')), icon: (0, jsx_runtime_1.jsx)(IconMaterialCalendarMonthW100_1.default, Object.assign({}, iconProps)) }
-    ];
-    const onClear = react_1.default.useCallback((event) => {
-        onChange(refs.dateProperty.current, null);
-    }, [onChange]);
-    const date = react_1.default.useMemo(() => new date_1.OnesyDate((value === null || value === void 0 ? void 0 : value[dateProperty]) || undefined), [value, dateProperty]);
-    const repeats = (day) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
-        if (!((_a = value === null || value === void 0 ? void 0 : value.repeat) === null || _a === void 0 ? void 0 : _a.active))
-            return;
-        let unit = (_b = value === null || value === void 0 ? void 0 : value.repeat) === null || _b === void 0 ? void 0 : _b.unit;
-        let valueRepeat = (_c = value === null || value === void 0 ? void 0 : value.repeat) === null || _c === void 0 ? void 0 : _c.value;
-        if (unit === 'day')
-            unit = 'days';
-        if (unit === 'week') {
-            unit = 'days';
-            valueRepeat *= 7;
-        }
-        if (unit === 'month')
-            unit = 'months';
-        let difference = (0, date_1.diff)(day, date, unit);
-        let repeating = false;
-        if (['day', 'week'].includes((_d = value === null || value === void 0 ? void 0 : value.repeat) === null || _d === void 0 ? void 0 : _d.unit)) {
-            if ((value === null || value === void 0 ? void 0 : value.repeat.unit) === 'week' &&
-                !!((_f = (_e = value === null || value === void 0 ? void 0 : value.repeat) === null || _e === void 0 ? void 0 : _e.weekdays) === null || _f === void 0 ? void 0 : _f.length)) {
-                difference = (0, date_1.diff)(day, date.dayWeek === 0 ? (0, date_1.add)(-1, 'week', date) : date, 'weeks');
-                if (day.dayWeek === 0)
-                    difference -= 1;
-                const modulus = difference % ((_g = value === null || value === void 0 ? void 0 : value.repeat) === null || _g === void 0 ? void 0 : _g.value);
-                repeating = (0, date_1.is)(day, 'after or same', date) && !modulus && ((_h = value === null || value === void 0 ? void 0 : value.repeat.weekdays) === null || _h === void 0 ? void 0 : _h.includes(day.dayWeek));
-            }
-            else {
-                const modulus = difference % valueRepeat;
-                repeating = (0, date_1.is)(day, 'after or same', date) && !modulus;
-            }
-        }
-        if (['month'].includes((_j = value === null || value === void 0 ? void 0 : value.repeat) === null || _j === void 0 ? void 0 : _j.unit)) {
-            const modulus = difference % valueRepeat;
-            const monthDate = (0, date_1.add)(difference, 'month', date);
-            repeating = (monthDate.year === day.year && monthDate.dayYear === day.dayYear) && !modulus;
-        }
-        if (['year'].includes((_k = value === null || value === void 0 ? void 0 : value.repeat) === null || _k === void 0 ? void 0 : _k.unit)) {
-            const modulus = difference % valueRepeat;
-            const yearDate = (0, date_1.add)(difference, 'year', date);
-            repeating = (0, date_1.is)(day, 'after', date) && (yearDate.year === day.year && yearDate.dayYear === day.dayYear) && !modulus;
-        }
-        if (((_l = value === null || value === void 0 ? void 0 : value.repeat) === null || _l === void 0 ? void 0 : _l.skip_weekends) &&
-            [0, 6].includes(day.dayWeek))
-            repeating = false;
-        if (repeating) {
-            const formated = (0, date_1.format)(day, utils_2.formats.date);
-            if ((_o = (_m = value === null || value === void 0 ? void 0 : value.repeat) === null || _m === void 0 ? void 0 : _m.ends) === null || _o === void 0 ? void 0 : _o.active) {
-                // date
-                if ((value === null || value === void 0 ? void 0 : value.repeat.ends.version) === 'date') {
-                    const endsDate = new date_1.OnesyDate(value === null || value === void 0 ? void 0 : value.repeat.ends.value);
-                    repeating = repeating && ((day.year < endsDate.year) ||
-                        (day.year === endsDate.year &&
-                            ((day.month < endsDate.month) ||
-                                (day.month === endsDate.month &&
-                                    day.dayYear <= endsDate.dayYear))));
-                }
-            }
-            if (repeating) {
-                if (!refs.repeatCount.current[value === null || value === void 0 ? void 0 : value.id])
-                    refs.repeatCount.current[value === null || value === void 0 ? void 0 : value.id] = [];
-                if (!refs.repeatCount.current[value === null || value === void 0 ? void 0 : value.id].includes(formated))
-                    refs.repeatCount.current[value === null || value === void 0 ? void 0 : value.id].push(formated);
-            }
-            if ((_q = (_p = value === null || value === void 0 ? void 0 : value.repeat) === null || _p === void 0 ? void 0 : _p.ends) === null || _q === void 0 ? void 0 : _q.active) {
-                const indexRepeated = (_r = refs.repeatCount.current[value === null || value === void 0 ? void 0 : value.id]) === null || _r === void 0 ? void 0 : _r.indexOf(formated);
-                // count
-                if ((value === null || value === void 0 ? void 0 : value.repeat.ends.version) === 'count')
-                    repeating = repeating && (value === null || value === void 0 ? void 0 : value.repeat.ends.value) >= ((indexRepeated === -1 ? 0 : indexRepeated) + 1);
-            }
-            repeating = !((_s = value === null || value === void 0 ? void 0 : value.repeat.ends) === null || _s === void 0 ? void 0 : _s.active) || repeating;
-        }
-        return repeating;
-    };
-    const onContextMenu = react_1.default.useCallback((event) => {
-        event.stopPropagation();
-    }, []);
-    const palette = theme.palette.color.primary;
-    return ((0, jsx_runtime_1.jsx)(Menu, Object.assign({ open: menuOpen, onOpen: onMenuOpen, onClose: onMenuClose, onContextMenu: onContextMenu, name: ((0, jsx_runtime_1.jsx)(Calendar, { tonal: true, color: 'themed', calendarDefault: date, start: ((0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center', justify: 'center', className: classes.calendarShortcuts }, { children: shortcuts.map((item, index) => ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: item.name }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => {
-                            item.onClick();
-                            onMenuClose();
-                        }, size: 'small' }, { children: item.icon })) }), index))) }))), value: (value === null || value === void 0 ? void 0 : value[dateProperty]) ? date : null, onChange: onChangeDate, onContextMenu: onContextMenu, size: 'small', end: ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, fullWidth: true, className: classes.end }, { children: [startBottom, (value === null || value === void 0 ? void 0 : value[dateProperty]) && ((0, jsx_runtime_1.jsx)(Menu, Object.assign({ open: timeMenuOpen, onOpen: onTimeMenuOpen, onClose: onTimeMenuClose, name: () => ((0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 1, align: 'center', fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(TimePicker, Object.assign({ value: date, onChange: onChangeTime, clear: false, MainProps: {
-                                    elevation: theme.palette.light ? 8 : 0
-                                }, size: 'small', static: true }, TimePickerProps)) }))), className: (0, style_react_1.classNames)([
-                            classes.timeMenu,
-                            'onesy-time'
-                        ]), style: {
-                            width: (_a = refs.time.current) === null || _a === void 0 ? void 0 : _a.clientWidth
-                        } }, { children: (0, jsx_runtime_1.jsx)(ListItem, { ref: refs.time, start: ((0, jsx_runtime_1.jsx)(IconMaterialScheduleW100_1.default, Object.assign({}, iconProps))), primary: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2', color: 'inherit' }, { children: (0, date_1.format)(date, 'HH:mm', { l }) }))), startAlign: 'center', size: 'small', button: true, Component: 'div', className: classes.item }) }))), endBottom, (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.4, direction: 'row', align: 'center', justify: 'space-between', fullWidth: true, className: classes.menuFooter }, { children: [(0, jsx_runtime_1.jsx)(Button, Object.assign({ onClick: onClear, version: 'text', size: 'small', disabled: !(value === null || value === void 0 ? void 0 : value[dateProperty]) }, { children: l('Clear') })), !noRemove && ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Remove') }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ size: 'small', onClick: onRemove }, { children: (0, jsx_runtime_1.jsx)(IconMaterialDeleteW100_1.default, Object.assign({}, iconProps)) })) })))] }))] }))), CalendarMonthProps: {
-                renderDay: (dayOnesyDate, propsDay, day, outside) => {
-                    const repeating = repeats(dayOnesyDate);
-                    return ((0, jsx_runtime_1.jsx)(PaginationItem, Object.assign({ tonal: true, color: 'inherit', size: 'small', InteractionProps: {
-                            background: false
-                        }, TypeProps: {
-                            version: 'b3',
-                            priority: !day.selected ? !day.weekend ? 'primary' : 'secondary' : undefined
-                        }, "aria-label": (0, date_1.format)(dayOnesyDate, 'DD-MM-YYYY', { l }), className: (0, style_react_1.classNames)([
-                            classes.dayValue,
-                            repeating && classes.dayValueRepeating
-                        ]), style: Object.assign(Object.assign({}, (day.today ? {
-                            boxShadow: `inset 0px 0px 0px 1px ${palette[40]}`
-                        } : undefined)), (day.selected ? {
-                            color: theme.methods.palette.color.value(undefined, 90, true, palette),
-                            backgroundColor: theme.methods.palette.color.value(undefined, 40, true, palette)
-                        } : undefined)) }, propsDay, { children: day.value })));
-                },
-                noTransition: true
-            }, className: (0, style_react_1.classNames)([
-                'onesy-ObjectCalendar-root',
-                classes.calendar
-            ]) })), ClickListenerProps: {
-            contextMenu: false
-        }, className: (0, style_react_1.classNames)([
-            (0, utils_2.staticClassName)('CalendarMenu', theme) && [
-                'onesy-CalendarMenu-root'
-            ],
-            className,
-            classes.root
-        ]) }, other, { children: children })));
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CalendarMenu', theme) && ['onesy-CalendarMenu-root'], className, classes.root])
+  }, other), children);
 });
 CalendarMenu.displayName = 'onesy-CalendarMenu';
-exports.default = CalendarMenu;
+var _default = exports.default = CalendarMenu;