@onesy/ui-react 1.0.163 → 1.0.165

package/CalendarAvailability/CalendarAvailability.js

@@ -118,64 +118,23 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-CalendarAvailability'
 });
 const CalendarAvailability = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8, _theme$elements9, _theme$elements0, _theme$elements1, _theme$elements10, _theme$elements11;
   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 Type = _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.Type) || _Type.default;
-  }, [theme]);
-  const Tooltip = _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.Tooltip) || _Tooltip.default;
-  }, [theme]);
-  const IconButton = _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.IconButton) || _IconButton.default;
-  }, [theme]);
-  const Label = _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.Label) || _Label.default;
-  }, [theme]);
-  const Switch = _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.Switch) || _Switch.default;
-  }, [theme]);
-  const Modal = _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.Modal) || _Modal.default;
-  }, [theme]);
-  const ModalHeader = _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.ModalHeader) || _ModalHeader.default;
-  }, [theme]);
-  const ModalMain = _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.ModalMain) || _ModalMain.default;
-  }, [theme]);
-  const Slide = _react.default.useMemo(() => {
-    var _theme$elements0;
-    return (theme === null || theme === void 0 || (_theme$elements0 = theme.elements) === null || _theme$elements0 === void 0 ? void 0 : _theme$elements0.Slide) || _Slide.default;
-  }, [theme]);
-  const Button = _react.default.useMemo(() => {
-    var _theme$elements1;
-    return (theme === null || theme === void 0 || (_theme$elements1 = theme.elements) === null || _theme$elements1 === void 0 ? void 0 : _theme$elements1.Button) || _Button.default;
-  }, [theme]);
-  const Select = _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.Select) || _Select.default;
-  }, [theme]);
-  const CalendarWeek = _react.default.useMemo(() => {
-    var _theme$elements11;
-    return (theme === null || theme === void 0 || (_theme$elements11 = theme.elements) === null || _theme$elements11 === void 0 ? void 0 : _theme$elements11.CalendarWeek) || _CalendarWeek.default;
-  }, [theme]);
+  const props = _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_);
+  const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
+  const Type = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Type) || _Type.default;
+  const Tooltip = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Tooltip) || _Tooltip.default;
+  const IconButton = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.IconButton) || _IconButton.default;
+  const Label = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Label) || _Label.default;
+  const Switch = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Switch) || _Switch.default;
+  const Modal = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.Modal) || _Modal.default;
+  const ModalHeader = (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.ModalHeader) || _ModalHeader.default;
+  const ModalMain = (theme === null || theme === void 0 || (_theme$elements9 = theme.elements) === null || _theme$elements9 === void 0 ? void 0 : _theme$elements9.ModalMain) || _ModalMain.default;
+  const Slide = (theme === null || theme === void 0 || (_theme$elements0 = theme.elements) === null || _theme$elements0 === void 0 ? void 0 : _theme$elements0.Slide) || _Slide.default;
+  const Button = (theme === null || theme === void 0 || (_theme$elements1 = theme.elements) === null || _theme$elements1 === void 0 ? void 0 : _theme$elements1.Button) || _Button.default;
+  const Select = (theme === null || theme === void 0 || (_theme$elements10 = theme.elements) === null || _theme$elements10 === void 0 ? void 0 : _theme$elements10.Select) || _Select.default;
+  const CalendarWeek = (theme === null || theme === void 0 || (_theme$elements11 = theme.elements) === null || _theme$elements11 === void 0 ? void 0 : _theme$elements11.CalendarWeek) || _CalendarWeek.default;
   const {
       name,
       date: date_,
@@ -252,11 +211,11 @@ const CalendarAvailability = /*#__PURE__*/_react.default.forwardRef((props_, ref
     }
     return ((0, _utils.is)('array', timesProps) ? timesProps : [timesProps]).filter(Boolean);
   }, [events, timesProps]);
-  const onStatusToggle = _react.default.useCallback((value = 'working') => {
+  const onStatusToggle = (value = 'working') => {
     setStatuses(previous => _objectSpread(_objectSpread({}, previous), {}, {
       [value]: previous[value] === undefined ? false : !previous[value]
     }));
-  }, []);
+  };
   const rangeShade = theme.palette.light ? 70 : 40;
   _react.default.useEffect(() => {
     // 1 minute
@@ -272,22 +231,22 @@ const CalendarAvailability = /*#__PURE__*/_react.default.forwardRef((props_, ref
   _react.default.useEffect(() => {
     if (date_ !== undefined && date_ !== date) setDate(date_);
   }, [date_]);
-  const onOpen = _react.default.useCallback(item => {
+  const onOpen = item => {
     setModal(_objectSpread(_objectSpread({}, item), {}, {
       open: true
     }));
-  }, []);
-  const onClose = _react.default.useCallback(() => {
-    setModal(item => _objectSpread(_objectSpread({}, item), {}, {
+  };
+  const onClose = () => {
+    setModal(item_0 => _objectSpread(_objectSpread({}, item_0), {}, {
       open: false
     }));
-  }, []);
-  const onChangeDisplayTime = _react.default.useCallback(valueNew => {
+  };
+  const onChangeDisplayTime = valueNew => {
     setDisplayTime(valueNew);
-  }, []);
-  const onChangeView = _react.default.useCallback(valueNew => {
-    setView(valueNew);
-  }, []);
+  };
+  const onChangeView = valueNew_0 => {
+    setView(valueNew_0);
+  };
   const optionsStatus = _react.default.useMemo(() => {
     return [{
       name: l('Working'),
@@ -312,76 +271,76 @@ const CalendarAvailability = /*#__PURE__*/_react.default.forwardRef((props_, ref
       value: 'other'
     }];
   }, []);
-  const onToday = _react.default.useCallback(() => {
-    const valueNew = new _date.OnesyDate();
-    setDate(valueNew);
-    if ((0, _utils.is)('function', onChangeDateProps)) onChangeDateProps(valueNew);
-  }, [onChangeDateProps]);
-  const onPrevious = _react.default.useCallback(() => {
-    let valueNew = new _date.OnesyDate();
-    setDate(previous => {
-      valueNew = (0, _date.remove)(1, ['week', 'simple'].includes(view) ? 'week' : view, previous);
-      return valueNew;
+  const onToday = () => {
+    const valueNew_1 = new _date.OnesyDate();
+    setDate(valueNew_1);
+    if ((0, _utils.is)('function', onChangeDateProps)) onChangeDateProps(valueNew_1);
+  };
+  const onPrevious = () => {
+    let valueNew_2 = new _date.OnesyDate();
+    setDate(previous_0 => {
+      valueNew_2 = (0, _date.remove)(1, ['week', 'simple'].includes(view) ? 'week' : view, previous_0);
+      return valueNew_2;
     });
-    if ((0, _utils.is)('function', onChangeDateProps)) onChangeDateProps(valueNew);
-  }, [view, onChangeDateProps]);
-  const onNext = _react.default.useCallback(() => {
-    let valueNew = new _date.OnesyDate();
-    setDate(previous => {
-      valueNew = (0, _date.add)(1, ['week', 'simple'].includes(view) ? 'week' : view, previous);
-      return valueNew;
+    if ((0, _utils.is)('function', onChangeDateProps)) onChangeDateProps(valueNew_2);
+  };
+  const onNext = () => {
+    let valueNew_3 = new _date.OnesyDate();
+    setDate(previous_1 => {
+      valueNew_3 = (0, _date.add)(1, ['week', 'simple'].includes(view) ? 'week' : view, previous_1);
+      return valueNew_3;
     });
-    if ((0, _utils.is)('function', onChangeDateProps)) onChangeDateProps(valueNew);
-  }, [view, onChangeDateProps]);
-  const getDates = _react.default.useCallback(available => {
+    if ((0, _utils.is)('function', onChangeDateProps)) onChangeDateProps(valueNew_3);
+  };
+  const getDates = available => {
     var _available$dates;
     const values = ((_available$dates = available.dates) === null || _available$dates === void 0 ? void 0 : _available$dates.values) || [];
-    return values.map(item => {
-      if (item.entire) {
-        if (item.from) {
-          let from = new _date.OnesyDate(item.from);
+    return values.map(item_1 => {
+      if (item_1.entire) {
+        if (item_1.from) {
+          let from = new _date.OnesyDate(item_1.from);
           let to;
-          if (['day', 'week', 'month', 'year'].includes(item.entire)) from = (0, _date.startOf)(from, 'day');
-          if (item.entire === 'minute') from = (0, _date.startOf)(from, 'minute');
-          if (item.entire === 'hour') from = (0, _date.startOf)(from, 'hour');
-          to = (0, _date.endOf)(from, item.entire);
-          item.from = from.milliseconds;
-          item.to = to.milliseconds;
+          if (['day', 'week', 'month', 'year'].includes(item_1.entire)) from = (0, _date.startOf)(from, 'day');
+          if (item_1.entire === 'minute') from = (0, _date.startOf)(from, 'minute');
+          if (item_1.entire === 'hour') from = (0, _date.startOf)(from, 'hour');
+          to = (0, _date.endOf)(from, item_1.entire);
+          item_1.from = from.milliseconds;
+          item_1.to = to.milliseconds;
         }
       }
-      return item;
+      return item_1;
     });
-  }, [times]);
-  const getDatesWeek = _react.default.useCallback(available => {
+  };
+  const getDatesWeek = available_0 => {
     const weekFrom = (0, _date.startOf)(date, 'week');
     const weekTo = (0, _date.endOf)(date, 'week');
-    return getDates(available).filter(item => {
-      const from = new _date.OnesyDate(item.from);
-      const to = new _date.OnesyDate(item.to);
-      return !(from.milliseconds >= weekTo.milliseconds || to.milliseconds <= weekFrom.milliseconds);
+    return getDates(available_0).filter(item_2 => {
+      const from_0 = new _date.OnesyDate(item_2.from);
+      const to_0 = new _date.OnesyDate(item_2.to);
+      return !(from_0.milliseconds >= weekTo.milliseconds || to_0.milliseconds <= weekFrom.milliseconds);
     });
-  }, [date, getDates]);
-  const getColor = _react.default.useCallback(item => {
+  };
+  const getColor = item_3 => {
     let palette = theme.palette.color.neutral;
-    if ((item === null || item === void 0 ? void 0 : item.status) === 'working') palette = theme.palette.color.success;
-    if ((item === null || item === void 0 ? void 0 : item.status) === 'not-working') palette = theme.palette.color.info;
-    if ((item === null || item === void 0 ? void 0 : item.status) === 'break') palette = theme.palette.color.warning;
-    if ((item === null || item === void 0 ? void 0 : item.status) === 'pending') palette = theme.methods.color(_styleReact.colors.yellow[50]);
-    if ((item === null || item === void 0 ? void 0 : item.status) === 'rescheduled') palette = theme.methods.color(_styleReact.colors.purple[50]);
-    if ((item === null || item === void 0 ? void 0 : item.status) === 'canceled') palette = theme.palette.color.error;
-    if ((item === null || item === void 0 ? void 0 : item.status) === 'other') palette = theme.palette.color.neutral;
+    if ((item_3 === null || item_3 === void 0 ? void 0 : item_3.status) === 'working') palette = theme.palette.color.success;
+    if ((item_3 === null || item_3 === void 0 ? void 0 : item_3.status) === 'not-working') palette = theme.palette.color.info;
+    if ((item_3 === null || item_3 === void 0 ? void 0 : item_3.status) === 'break') palette = theme.palette.color.warning;
+    if ((item_3 === null || item_3 === void 0 ? void 0 : item_3.status) === 'pending') palette = theme.methods.color(_styleReact.colors.yellow[50]);
+    if ((item_3 === null || item_3 === void 0 ? void 0 : item_3.status) === 'rescheduled') palette = theme.methods.color(_styleReact.colors.purple[50]);
+    if ((item_3 === null || item_3 === void 0 ? void 0 : item_3.status) === 'canceled') palette = theme.palette.color.error;
+    if ((item_3 === null || item_3 === void 0 ? void 0 : item_3.status) === 'other') palette = theme.palette.color.neutral;
     return palette[rangeShade];
-  }, [rangeShade, _styleReact.colors, theme]);
-  const itemToText = _react.default.useCallback(item => {
+  };
+  const itemToText = item_4 => {
     var _optionsStatus$find$n, _optionsStatus$find;
-    if (item === 'pending') return l('Scheduled');
-    if (item === 'not-count-workout-session') return l(`Don't count workout session`);
-    return (_optionsStatus$find$n = optionsStatus === null || optionsStatus === void 0 || (_optionsStatus$find = optionsStatus.find(itemStatus => itemStatus.value === item)) === null || _optionsStatus$find === void 0 ? void 0 : _optionsStatus$find.name) !== null && _optionsStatus$find$n !== void 0 ? _optionsStatus$find$n : l(item);
-  }, []);
+    if (item_4 === 'pending') return l('Scheduled');
+    if (item_4 === 'not-count-workout-session') return l(`Don't count workout session`);
+    return (_optionsStatus$find$n = optionsStatus === null || optionsStatus === void 0 || (_optionsStatus$find = optionsStatus.find(itemStatus => itemStatus.value === item_4)) === null || _optionsStatus$find === void 0 ? void 0 : _optionsStatus$find.name) !== null && _optionsStatus$find$n !== void 0 ? _optionsStatus$find$n : l(item_4);
+  };
   const viewOptions = _react.default.useMemo(() => {
-    return viewsProps === null || viewsProps === void 0 ? void 0 : viewsProps.map(item => ({
-      name: (0, _utils.capitalize)(item === null || item === void 0 ? void 0 : item.name),
-      value: item === null || item === void 0 ? void 0 : item.value
+    return viewsProps === null || viewsProps === void 0 ? void 0 : viewsProps.map(item_5 => ({
+      name: (0, _utils.capitalize)(item_5 === null || item_5 === void 0 ? void 0 : item_5.name),
+      value: item_5 === null || item_5 === void 0 ? void 0 : item_5.value
     }));
   }, [viewsProps]);
   const days = _react.default.useMemo(() => {
@@ -399,14 +358,14 @@ const CalendarAvailability = /*#__PURE__*/_react.default.forwardRef((props_, ref
       },
       className: classes.simpleTimes,
       fullWidth: true
-    }, days.map((itemDay, index) => {
-      const values = times.filter(item => {
-        var _item$weekly$days;
-        return (_item$weekly$days = item.weekly.days[index + 1]) === null || _item$weekly$days === void 0 ? void 0 : _item$weekly$days.active;
-      }).flatMap(item => item.weekly.days[index + 1].values).filter(item => item && [undefined, true].includes(refs.statuses.current[item.status || 'working']));
-      values.sort((a, b) => b.from > a.from ? -1 : 1);
+    }, days.map((itemDay, index_0) => {
+      const values_0 = times.filter(item_6 => {
+        var _item_6$weekly$days;
+        return (_item_6$weekly$days = item_6.weekly.days[index_0 + 1]) === null || _item_6$weekly$days === void 0 ? void 0 : _item_6$weekly$days.active;
+      }).flatMap(item_7 => item_7.weekly.days[index_0 + 1].values).filter(item_8 => item_8 && [undefined, true].includes(refs.statuses.current[item_8.status || 'working']));
+      values_0.sort((a, b) => b.from > a.from ? -1 : 1);
       return /*#__PURE__*/_react.default.createElement(Line, {
-        key: index,
+        key: index_0,
         gap: 1.5,
         direction: "column"
       }, /*#__PURE__*/_react.default.createElement(Line, {
@@ -430,7 +389,7 @@ const CalendarAvailability = /*#__PURE__*/_react.default.forwardRef((props_, ref
       })))), /*#__PURE__*/_react.default.createElement(Line, {
         gap: 2,
         fullWidth: true
-      }, !!values.length ? values.map((itemValue, indexItem) => {
+      }, !!values_0.length ? values_0.map((itemValue, indexItem) => {
         const itemValueFrom = new _date.OnesyDate(itemValue.from);
         const itemValueTo = new _date.OnesyDate(itemValue.to);
         return /*#__PURE__*/_react.default.createElement(Line, {
@@ -468,16 +427,16 @@ const CalendarAvailability = /*#__PURE__*/_react.default.forwardRef((props_, ref
     }));
   };
   const simpleExceptionsUI = () => {
-    const items = times.flatMap(item => getDatesWeek(item));
+    const items = times.flatMap(item_9 => getDatesWeek(item_9));
     if (!items.length) return /*#__PURE__*/_react.default.createElement(Type, {
       version: "b1"
     }, l('No exceptions this week'));
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, items.map((itemValue, index) => {
-      const day = (0, _date.set)(index + 1, 'dayWeek');
-      const itemValueFrom = new _date.OnesyDate(itemValue.from);
-      const itemValueTo = new _date.OnesyDate(itemValue.to);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, items.map((itemValue_0, index_1) => {
+      const day = (0, _date.set)(index_1 + 1, 'dayWeek');
+      const itemValueFrom_0 = new _date.OnesyDate(itemValue_0.from);
+      const itemValueTo_0 = new _date.OnesyDate(itemValue_0.to);
       return /*#__PURE__*/_react.default.createElement(Line, {
-        key: index,
+        key: index_1,
         gap: 1,
         direction: "column"
       }, /*#__PURE__*/_react.default.createElement(Line, {
@@ -488,7 +447,7 @@ const CalendarAvailability = /*#__PURE__*/_react.default.forwardRef((props_, ref
       }, /*#__PURE__*/_react.default.createElement(Line, {
         className: classes.palettePreview,
         style: {
-          background: getColor(itemValue)
+          background: getColor(itemValue_0)
         }
       }), /*#__PURE__*/_react.default.createElement(Line, {
         gap: 1,
@@ -501,17 +460,17 @@ const CalendarAvailability = /*#__PURE__*/_react.default.forwardRef((props_, ref
         l
       })), /*#__PURE__*/_react.default.createElement(Type, {
         version: "b2"
-      }, (0, _date.format)(itemValueFrom, _utils2.formats.entire, {
+      }, (0, _date.format)(itemValueFrom_0, _utils2.formats.entire, {
         l
-      }), " \u2014 ", (0, _date.format)(itemValueTo, _utils2.formats.entire, {
+      }), " \u2014 ", (0, _date.format)(itemValueTo_0, _utils2.formats.entire, {
         l
-      })))), itemValue.description && /*#__PURE__*/_react.default.createElement(Type, {
+      })))), itemValue_0.description && /*#__PURE__*/_react.default.createElement(Type, {
         version: "b2",
         weight: 200,
         whiteSpace: "pre-wrap",
         className: (0, _styleReact.classNames)([classes.timeDescription, !refs.displayTime.current && 'onesy-work-day-time']),
         dangerouslySetInnerHTML: {
-          __html: (0, _utils.textToInnerHTML)(itemValue.description)
+          __html: (0, _utils.textToInnerHTML)(itemValue_0.description)
         }
       }));
     }));
@@ -532,24 +491,24 @@ const CalendarAvailability = /*#__PURE__*/_react.default.forwardRef((props_, ref
       direction: "row",
       align: "center",
       className: classes.legend
-    }, optionsStatus.map((item, index) => /*#__PURE__*/_react.default.createElement(Line, {
-      key: index,
+    }, optionsStatus.map((item_10, index_2) => /*#__PURE__*/_react.default.createElement(Line, {
+      key: index_2,
       gap: 1,
       direction: "row",
       align: "center",
-      onClick: () => onStatusToggle(item.value),
+      onClick: () => onStatusToggle(item_10.value),
       flexNo: true,
-      className: (0, _styleReact.classNames)([classes.itemLegend, [undefined, true].includes(refs.statuses.current[item.value || 'working']) && classes.itemLegendActive])
+      className: (0, _styleReact.classNames)([classes.itemLegend, [undefined, true].includes(refs.statuses.current[item_10.value || 'working']) && classes.itemLegendActive])
     }, /*#__PURE__*/_react.default.createElement(Line, {
       className: classes.palettePreview,
       style: {
         background: getColor({
-          status: item.value
+          status: item_10.value
         })
       }
     }), /*#__PURE__*/_react.default.createElement(Type, {
       version: "b2"
-    }, item.name))));
+    }, item_10.name))));
   }, [theme, statuses, optionsStatus]);
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     ref: ref,

package/CalendarMenu/CalendarMenu.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IMenu } from '../Menu/Menu';
-export type ICalendarMenu = Omit<IMenu, 'onChange'> & {
+export declare type ICalendarMenu = Omit<IMenu, 'onChange'> & {
     value?: any;
     onChange?: (...args: any) => any;
     dateProperty?: string;

package/CalendarMenu/CalendarMenu.js

@@ -106,53 +106,20 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-CalendarMenu'
 });
 const CalendarMenu = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
-  var _refs$time$current;
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8, _theme$elements9, _theme$elements0, _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$elements0;
-    return (theme === null || theme === void 0 || (_theme$elements0 = theme.elements) === null || _theme$elements0 === void 0 ? void 0 : _theme$elements0.Type) || _Type.default;
-  }, [theme]);
+  const props = _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_);
+  const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
+  const Menu = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Menu) || _Menu.default;
+  const Calendar = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Calendar) || _Calendar.default;
+  const Tooltip = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Tooltip) || _Tooltip.default;
+  const IconButton = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.IconButton) || _IconButton.default;
+  const Button = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Button) || _Button.default;
+  const ListItem = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.ListItem) || _ListItem.default;
+  const PaginationItem = (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.PaginationItem) || _PaginationItem.default;
+  const TimePicker = (theme === null || theme === void 0 || (_theme$elements9 = theme.elements) === null || _theme$elements9 === void 0 ? void 0 : _theme$elements9.TimePicker) || _TimePicker.default;
+  const Type = (theme === null || theme === void 0 || (_theme$elements0 = theme.elements) === null || _theme$elements0 === void 0 ? void 0 : _theme$elements0.Type) || _Type.default;
   const {
       value,
       dateProperty = 'ends_at',
@@ -188,38 +155,38 @@ const CalendarMenu = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   refs.dateProperty.current = dateProperty;
   refs.value.current = value;
   refs.onChange.current = onChange_;
-  const onChange = _react.default.useCallback(async (...args) => {
+  const onChange = 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(() => {
+  const onMenuOpen = () => {
     setMenuOpen(true);
-  }, []);
-  const onMenuClose = _react.default.useCallback(() => {
+  };
+  const onMenuClose = () => {
     setMenuOpen(false);
-  }, []);
-  const onTimeMenuOpen = _react.default.useCallback(() => {
+  };
+  const onTimeMenuOpen = () => {
     setTimeMenuOpen(true);
-  }, []);
-  const onTimeMenuClose = _react.default.useCallback(() => {
+  };
+  const onTimeMenuClose = () => {
     setTimeMenuOpen(false);
-  }, []);
-  const onChangeDate = _react.default.useCallback(valueNew => {
+  };
+  const onChangeDate = 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 => {
+  };
+  const onChangeTime = valueNew_0 => {
     onTimeMenuClose();
-    onChange(refs.dateProperty.current, valueNew === null || valueNew === void 0 ? void 0 : valueNew.milliseconds);
-  }, [onTimeMenuClose, closeOnChange, onChange]);
-  const onRemove = _react.default.useCallback(() => {
+    onChange(refs.dateProperty.current, valueNew_0 === null || valueNew_0 === void 0 ? void 0 : valueNew_0.milliseconds);
+  };
+  const onRemove = () => {
     if ((0, _utils.is)('function', onRemove_)) onRemove_(value);
-  }, [value, onRemove_]);
+  };
   _react.default.useEffect(() => {
     // reset
     refs.repeatCount.current = {};
@@ -244,9 +211,9 @@ const CalendarMenu = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     onClick: () => onChangeDate((0, _date.add)(1, 'month')),
     icon: /*#__PURE__*/_react.default.createElement(_IconMaterialCalendarMonthW.default, iconProps)
   }];
-  const onClear = _react.default.useCallback(event => {
+  const onClear = 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;
@@ -270,19 +237,19 @@ const CalendarMenu = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         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;
+        const modulus_0 = difference % valueRepeat;
+        repeating = (0, _date.is)(day, 'after or same', date) && !modulus_0;
       }
     }
     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 modulus_1 = difference % valueRepeat;
       const monthDate = (0, _date.add)(difference, 'month', date);
-      repeating = monthDate.year === day.year && monthDate.dayYear === day.dayYear && !modulus;
+      repeating = monthDate.year === day.year && monthDate.dayYear === day.dayYear && !modulus_1;
     }
     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 modulus_2 = 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;
+      repeating = (0, _date.is)(day, 'after', date) && yearDate.year === day.year && yearDate.dayYear === day.dayYear && !modulus_2;
     }
     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) {
@@ -310,9 +277,9 @@ const CalendarMenu = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     }
     return repeating;
   };
-  const onContextMenu = _react.default.useCallback(event => {
-    event.stopPropagation();
-  }, []);
+  const onContextMenu = event_0 => {
+    event_0.stopPropagation();
+  };
   const palette = theme.palette.color.primary;
   return /*#__PURE__*/_react.default.createElement(Menu, (0, _extends2.default)({
     open: menuOpen,
@@ -402,8 +369,8 @@ const CalendarMenu = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         onClick: onRemove
       }, /*#__PURE__*/_react.default.createElement(_IconMaterialDeleteW.default, iconProps))))),
       CalendarMonthProps: {
-        renderDay: (dayOnesyDate, propsDay, day, outside) => {
-          const repeating = repeats(dayOnesyDate);
+        renderDay: (dayOnesyDate, propsDay, day_0, outside) => {
+          const repeating_0 = repeats(dayOnesyDate);
           return /*#__PURE__*/_react.default.createElement(PaginationItem, (0, _extends2.default)({
             tonal: true,
             color: "inherit",
@@ -413,19 +380,19 @@ const CalendarMenu = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
             },
             TypeProps: {
               version: 'b3',
-              priority: !day.selected ? !day.weekend ? 'primary' : 'secondary' : undefined
+              priority: !day_0.selected ? !day_0.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 ? {
+            className: (0, _styleReact.classNames)([classes.dayValue, repeating_0 && classes.dayValueRepeating]),
+            style: _objectSpread(_objectSpread({}, day_0.today ? {
               boxShadow: `inset 0px 0px 0px 1px ${palette[40]}`
-            } : undefined), day.selected ? {
+            } : undefined), day_0.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);
+          }, propsDay), day_0.value);
         },
         noTransition: true
       },

package/CalendarMonth/CalendarMonth.d.ts

@@ -3,9 +3,9 @@ import { OnesyDate } from '@onesy/date';
 import { ILine } from '../Line/Line';
 import { IColor, IPropsAny } from '../types';
 import { ICalendarViewsView } from '../CalendarViews/CalendarViews';
-export type TCalendarMonthValue = OnesyDate | [OnesyDate, OnesyDate];
-export type TCalendarMonthCalendar = OnesyDate;
-export type ICalendarMonthValuesValue = {
+export declare type TCalendarMonthValue = OnesyDate | [OnesyDate, OnesyDate];
+export declare type TCalendarMonthCalendar = OnesyDate;
+export declare type ICalendarMonthValuesValue = {
     day: string;
     month: string;
     year: string;
@@ -16,8 +16,8 @@ export type ICalendarMonthValuesValue = {
     previous: OnesyDate;
     move: 'previous' | 'next';
 };
-export type TCalendarMonthValues = [ICalendarMonthValuesValue, ICalendarMonthValuesValue];
-export type ICalendarMonth = Omit<ILine, 'onChange'> & {
+export declare type TCalendarMonthValues = [ICalendarMonthValuesValue, ICalendarMonthValuesValue];
+export declare type ICalendarMonth = Omit<ILine, 'onChange'> & {
     value?: TCalendarMonthValue;
     valueDefault?: TCalendarMonthValue;
     onChange?: (value: TCalendarMonthValue) => any;