@onesy/ui-react 1.0.130 → 1.0.132

package/CalendarViews/CalendarViews.js

@@ -1,266 +1,415 @@
 "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 IconMaterialArrowBackIosNewW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialArrowBackIosNewW100"));
-const IconMaterialArrowForwardIosW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialArrowForwardIosW100"));
-const CalendarWeek_1 = __importDefault(require("../CalendarWeek"));
-const CalendarMonth_1 = __importDefault(require("../CalendarMonth"));
-const IconButton_1 = __importDefault(require("../IconButton"));
-const Line_1 = __importDefault(require("../Line"));
-const Tooltip_1 = __importDefault(require("../Tooltip"));
-const Type_1 = __importDefault(require("../Type"));
-const Select_1 = __importDefault(require("../Select"));
-const Button_1 = __importDefault(require("../Button"));
-const utils_2 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {
-        padding: '16px',
-        color: theme.methods.palette.color.value('primary', 10),
-        background: theme.palette.background.default.primary,
-        '& .onesy-Label-text': {
-            whiteSpace: 'nowrap'
-        }
-    },
-    main: {
-        paddingTop: '4px',
-        overflow: 'auto hidden'
-    },
-    aside: {
-        width: 'auto',
-        maxWidth: '100%'
-    },
-    month: {
-        position: 'relative',
-        width: 'auto',
-        minWidth: '100%'
-    },
-    monthDay: {
-        width: '32px',
-        height: '32px',
-        marginTop: '4px',
-        borderRadius: '50%'
+
+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 _IconMaterialArrowBackIosNewW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialArrowBackIosNewW100"));
+var _IconMaterialArrowForwardIosW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialArrowForwardIosW100"));
+var _CalendarWeek = _interopRequireDefault(require("../CalendarWeek"));
+var _CalendarMonth = _interopRequireDefault(require("../CalendarMonth"));
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _Line = _interopRequireDefault(require("../Line"));
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+var _Type = _interopRequireDefault(require("../Type"));
+var _Select = _interopRequireDefault(require("../Select"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _utils2 = require("../utils");
+const _excluded = ["viewDefault", "dateDefault", "times", "events", "views", "render", "onTimeClick", "onChangeView", "onChangeDate", "startHeader", "endHeader", "startLeft", "endLeft", "startRight", "endRight", "noViews", "IconPrevious", "IconNext", "WeekProps", "DayProps", "CalendarMonthProps", "TypeDateFormattedProps", "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: {
+    padding: '16px',
+    color: theme.methods.palette.color.value('primary', 10),
+    background: theme.palette.background.default.primary,
+    '& .onesy-Label-text': {
+      whiteSpace: 'nowrap'
+    }
+  },
+  main: {
+    paddingTop: '4px',
+    overflow: 'auto hidden'
+  },
+  aside: {
+    width: 'auto',
+    maxWidth: '100%'
+  },
+  month: {
+    position: 'relative',
+    width: 'auto',
+    minWidth: '100%'
+  },
+  monthDay: {
+    width: '32px',
+    height: '32px',
+    marginTop: '4px',
+    borderRadius: '50%'
+  },
+  today: {
+    background: theme.palette.color.primary[40],
+    color: '#fff'
+  },
+  contentItemsMonth: {
+    position: 'relative',
+    padding: '0px 4px 8px',
+    height: '100px',
+    overflow: 'hidden auto'
+  },
+  calendarMonth: {
+    '&.onesy-CalendarMonth-root': {
+      width: '100%',
+      height: '100%',
+      minHeight: '0',
+      flex: '0 0 auto',
+      minWidth: 'unset',
+      overflow: 'unset',
+      transition: theme.methods.transitions.make('opacity')
     },
-    today: {
-        background: theme.palette.color.primary[40],
-        color: '#fff'
+    '& .onesy-CalendarMonth-weeks': {
+      position: 'relative',
+      top: '0',
+      width: 'calc(100% - 2px)',
+      height: 'auto',
+      marginLeft: '1px',
+      gap: '0'
     },
-    contentItemsMonth: {
-        position: 'relative',
-        padding: '0px 4px 8px',
-        height: '100px',
-        overflow: 'hidden auto'
+    '& .onesy-CalendarMonth-week': {
+      flex: '1 1 auto'
     },
-    calendarMonth: {
-        '&.onesy-CalendarMonth-root': {
-            width: '100%',
-            height: '100%',
-            minHeight: '0',
-            flex: '0 0 auto',
-            minWidth: 'unset',
-            overflow: 'unset',
-            transition: theme.methods.transitions.make('opacity')
-        },
-        '& .onesy-CalendarMonth-weeks': {
-            position: 'relative',
-            top: '0',
-            width: 'calc(100% - 2px)',
-            height: 'auto',
-            marginLeft: '1px',
-            gap: '0'
-        },
-        '& .onesy-CalendarMonth-week': {
-            flex: '1 1 auto'
-        },
-        '& .onesy-CalendarMonth-day': {
-            height: 'unset',
-            minWidth: '170px',
-            minHeight: '100px',
-            marginTop: '-1px',
-            marginLeft: '-1px',
-            border: `1px solid ${theme.palette.light ? '#dadada' : '#575757'}`
-        },
-        '& .onesy-CalendarMonth-day-name': {
-            minWidth: '170px'
-        },
-        '& .onesy-CalendarMonth-day-out': {
-            zIndex: '-1px'
-        }
+    '& .onesy-CalendarMonth-day': {
+      height: 'unset',
+      minWidth: '170px',
+      minHeight: '100px',
+      marginTop: '-1px',
+      marginLeft: '-1px',
+      border: `1px solid ${theme.palette.light ? '#dadada' : '#575757'}`
     },
-    dayWrapper: {
-        height: '100%'
+    '& .onesy-CalendarMonth-day-name': {
+      minWidth: '170px'
     },
-    overflowX: {
-        padding: '2px 0',
-        overflow: 'auto hidden'
+    '& .onesy-CalendarMonth-day-out': {
+      zIndex: '-1px'
     }
-}), { name: 'onesy-CalendarViews' });
-const CalendarViews = react_1.default.forwardRef((props_, ref) => {
-    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.onesyCalendarViews) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    const CalendarMonth = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.CalendarMonth) || CalendarMonth_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 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 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 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 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 Select = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Select) || Select_1.default; }, [theme]);
-    const CalendarWeek = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.CalendarWeek) || CalendarWeek_1.default; }, [theme]);
-    const { viewDefault, dateDefault, times: timesProps, events, views: viewsProps = [
-        { name: l('Month'), value: 'month' },
-        { name: l('Week'), value: 'week' },
-        { name: l('Day'), value: 'day' }
-    ], render, onTimeClick, onChangeView: onChangeViewProps, onChangeDate: onChangeDateProps, startHeader, endHeader, startLeft, endLeft, startRight, endRight, noViews, IconPrevious = IconMaterialArrowBackIosNewW100_1.default, IconNext = IconMaterialArrowForwardIosW100_1.default, WeekProps, DayProps, CalendarMonthProps, TypeDateFormattedProps, className } = props, other = __rest(props, ["viewDefault", "dateDefault", "times", "events", "views", "render", "onTimeClick", "onChangeView", "onChangeDate", "startHeader", "endHeader", "startLeft", "endLeft", "startRight", "endRight", "noViews", "IconPrevious", "IconNext", "WeekProps", "DayProps", "CalendarMonthProps", "TypeDateFormattedProps", "className"]);
-    const { classes } = useStyle(props);
-    const [now, setNow] = react_1.default.useState(new date_1.OnesyDate());
-    const [date, setDate] = react_1.default.useState(dateDefault || new date_1.OnesyDate());
-    const [view, setView] = react_1.default.useState(viewDefault || 'month');
-    const refs = {
-        interval: react_1.default.useRef(undefined)
+  },
+  dayWrapper: {
+    height: '100%'
+  },
+  overflowX: {
+    padding: '2px 0',
+    overflow: 'auto hidden'
+  }
+}), {
+  name: 'onesy-CalendarViews'
+});
+const CalendarViews = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  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.onesyCalendarViews) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  }, [props_]);
+  const CalendarMonth = _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.CalendarMonth) || _CalendarMonth.default;
+  }, [theme]);
+  const IconButton = _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.IconButton) || _IconButton.default;
+  }, [theme]);
+  const Line = _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.Line) || _Line.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 Type = _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.Type) || _Type.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 Select = _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.Select) || _Select.default;
+  }, [theme]);
+  const CalendarWeek = _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.CalendarWeek) || _CalendarWeek.default;
+  }, [theme]);
+  const {
+      viewDefault,
+      dateDefault,
+      times: timesProps,
+      events,
+      views: viewsProps = [{
+        name: l('Month'),
+        value: 'month'
+      }, {
+        name: l('Week'),
+        value: 'week'
+      }, {
+        name: l('Day'),
+        value: 'day'
+      }],
+      render,
+      onTimeClick,
+      onChangeView: onChangeViewProps,
+      onChangeDate: onChangeDateProps,
+      startHeader,
+      endHeader,
+      startLeft,
+      endLeft,
+      startRight,
+      endRight,
+      noViews,
+      IconPrevious = _IconMaterialArrowBackIosNewW.default,
+      IconNext = _IconMaterialArrowForwardIosW.default,
+      WeekProps,
+      DayProps,
+      CalendarMonthProps,
+      TypeDateFormattedProps,
+      className
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    classes
+  } = useStyle(props);
+  const [now, setNow] = _react.default.useState(new _date.OnesyDate());
+  const [date, setDate] = _react.default.useState(dateDefault || new _date.OnesyDate());
+  const [view, setView] = _react.default.useState(viewDefault || 'month');
+  const refs = {
+    interval: _react.default.useRef(undefined)
+  };
+  _react.default.useEffect(() => {
+    // 1 minute
+    refs.interval.current = setInterval(() => {
+      setNow(new _date.OnesyDate());
+    }, 60 * 1e3);
+    return () => {
+      clearInterval(refs.interval.current);
     };
-    react_1.default.useEffect(() => {
-        // 1 minute
-        refs.interval.current = setInterval(() => {
-            setNow(new date_1.OnesyDate());
-        }, 60 * 1e3);
-        return () => {
-            clearInterval(refs.interval.current);
-        };
-    }, []);
-    const times = react_1.default.useMemo(() => {
-        if (events) {
-            return [
-                {
-                    dates: {
-                        active: true,
-                        values: ((0, utils_1.is)('array', events) ? events : [events]).filter(Boolean)
-                    }
-                }
-            ];
+  }, []);
+  const times = _react.default.useMemo(() => {
+    if (events) {
+      return [{
+        dates: {
+          active: true,
+          values: ((0, _utils.is)('array', events) ? events : [events]).filter(Boolean)
         }
-        return ((0, utils_1.is)('array', timesProps) ? timesProps : [timesProps]).filter(Boolean);
-    }, [events, timesProps]);
-    const viewOptions = react_1.default.useMemo(() => {
-        return viewsProps === null || viewsProps === void 0 ? void 0 : viewsProps.map(item => ({
-            name: item === null || item === void 0 ? void 0 : item.name,
-            value: item === null || item === void 0 ? void 0 : item.value
-        }));
-    }, [viewsProps]);
-    const formattedDate = react_1.default.useMemo(() => {
-        if (view === 'day')
-            return (0, date_1.format)(date, `MMMM DD, YYYY`, { l });
-        if (view === 'week')
-            return `${(0, date_1.format)((0, date_1.startOf)(date, 'week'), `MMM DD, YYYY`, { l })} – ${(0, date_1.format)((0, date_1.endOf)(date, 'week'), `MMM DD, YYYY`, { l })}`;
-        if (view === 'month')
-            return (0, date_1.format)(date, `MMMM YYYY`, { l });
-    }, [view, date]);
-    const onChangeView = react_1.default.useCallback((valueNew) => {
-        setView(valueNew);
-        if ((0, utils_1.is)('function', onChangeViewProps))
-            onChangeViewProps(valueNew);
-    }, [onChangeViewProps]);
-    const onToday = react_1.default.useCallback(() => {
-        const valueNew = new date_1.OnesyDate();
-        setDate(valueNew);
-        if ((0, utils_1.is)('function', onChangeDateProps))
-            onChangeDateProps(valueNew);
-    }, [onChangeDateProps]);
-    const onPrevious = react_1.default.useCallback(() => {
-        let valueNew = new date_1.OnesyDate();
-        setDate(previous => {
-            valueNew = (0, date_1.remove)(1, view, previous);
-            return valueNew;
-        });
-        if ((0, utils_1.is)('function', onChangeDateProps))
-            onChangeDateProps(valueNew);
-    }, [view, onChangeDateProps]);
-    const onNext = react_1.default.useCallback(() => {
-        let valueNew = new date_1.OnesyDate();
-        setDate(previous => {
-            valueNew = (0, date_1.add)(1, view, previous);
-            return valueNew;
-        });
-        if ((0, utils_1.is)('function', onChangeDateProps))
-            onChangeDateProps(valueNew);
-    }, [view, onChangeDateProps]);
-    const renderDay = react_1.default.useCallback((valueCalendarMonth, propsDay, day, outside) => {
-        return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, direction: 'column', align: 'center', flex: true, fullWidth: true, className: classes.dayWrapper }, { children: [(0, jsx_runtime_1.jsx)(Line, Object.assign({ direction: 'row', justify: 'center', align: 'center', fullWidth: true, className: (0, style_react_1.classNames)([
-                        classes.monthDay,
-                        day.today && classes.today
-                    ]) }, { children: (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2' }, { children: (0, date_1.format)(valueCalendarMonth, 'D', { l }) })) })), (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 0.5, flex: true, fullWidth: true, className: classes.contentItemsMonth }, { children: (0, utils_1.is)('function', render) && render(valueCalendarMonth, view) }))] })));
-    }, [render, view]);
-    const renderDayName = react_1.default.useCallback((order) => {
-        const values = {
-            1: l('Mo'),
-            2: l('Tu'),
-            3: l('We'),
-            4: l('Th'),
-            5: l('Fr'),
-            6: l('Sa'),
-            7: l('Su')
-        };
-        return values[order];
-    }, []);
-    const ui = {
-        month: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 0, className: classes.month }, { children: (0, jsx_runtime_1.jsx)(CalendarMonth, Object.assign({ value: now, calendar: date, renderDay: renderDay, renderDayName: renderDayName, onTimeClick: onTimeClick, size: 'large', dayNamesFull: true, noTransition: true, outside: false, DayNameProps: {
-                        version: 'l1',
-                        weight: 200
-                    } }, CalendarMonthProps, { className: (0, style_react_1.classNames)([
-                        CalendarMonthProps === null || CalendarMonthProps === void 0 ? void 0 : CalendarMonthProps.className,
-                        classes.calendarMonth
-                    ]) })) })) }),
-        week: ((0, jsx_runtime_1.jsx)(CalendarWeek, Object.assign({ date: date, times: times, events: events, onTimeClick: onTimeClick }, WeekProps))),
-        day: ((0, jsx_runtime_1.jsx)(CalendarWeek, Object.assign({ date: date, times: times, events: events, onTimeClick: onTimeClick, day: true }, WeekProps)))
-    };
-    const iconProps = {
-        size: 'regular'
-    };
-    const iconButtonProps = {
-        size: 'regular'
+      }];
+    }
+    return ((0, _utils.is)('array', timesProps) ? timesProps : [timesProps]).filter(Boolean);
+  }, [events, timesProps]);
+  const viewOptions = _react.default.useMemo(() => {
+    return viewsProps === null || viewsProps === void 0 ? void 0 : viewsProps.map(item => ({
+      name: item === null || item === void 0 ? void 0 : item.name,
+      value: item === null || item === void 0 ? void 0 : item.value
+    }));
+  }, [viewsProps]);
+  const formattedDate = _react.default.useMemo(() => {
+    if (view === 'day') return (0, _date.format)(date, `MMMM DD, YYYY`, {
+      l
+    });
+    if (view === 'week') return `${(0, _date.format)((0, _date.startOf)(date, 'week'), `MMM DD, YYYY`, {
+      l
+    })} – ${(0, _date.format)((0, _date.endOf)(date, 'week'), `MMM DD, YYYY`, {
+      l
+    })}`;
+    if (view === 'month') return (0, _date.format)(date, `MMMM YYYY`, {
+      l
+    });
+  }, [view, date]);
+  const onChangeView = _react.default.useCallback(valueNew => {
+    setView(valueNew);
+    if ((0, _utils.is)('function', onChangeViewProps)) onChangeViewProps(valueNew);
+  }, [onChangeViewProps]);
+  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, view, previous);
+      return valueNew;
+    });
+    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, view, previous);
+      return valueNew;
+    });
+    if ((0, _utils.is)('function', onChangeDateProps)) onChangeDateProps(valueNew);
+  }, [view, onChangeDateProps]);
+  const renderDay = _react.default.useCallback((valueCalendarMonth, propsDay, day, outside) => {
+    return /*#__PURE__*/_react.default.createElement(Line, {
+      gap: 0.5,
+      direction: "column",
+      align: "center",
+      flex: true,
+      fullWidth: true,
+      className: classes.dayWrapper
+    }, /*#__PURE__*/_react.default.createElement(Line, {
+      direction: "row",
+      justify: "center",
+      align: "center",
+      fullWidth: true,
+      className: (0, _styleReact.classNames)([classes.monthDay, day.today && classes.today])
+    }, /*#__PURE__*/_react.default.createElement(Type, {
+      version: "b2"
+    }, (0, _date.format)(valueCalendarMonth, 'D', {
+      l
+    }))), /*#__PURE__*/_react.default.createElement(Line, {
+      gap: 0.5,
+      flex: true,
+      fullWidth: true,
+      className: classes.contentItemsMonth
+    }, (0, _utils.is)('function', render) && render(valueCalendarMonth, view)));
+  }, [render, view]);
+  const renderDayName = _react.default.useCallback(order => {
+    const values = {
+      1: l('Mo'),
+      2: l('Tu'),
+      3: l('We'),
+      4: l('Th'),
+      5: l('Fr'),
+      6: l('Sa'),
+      7: l('Su')
     };
-    return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ ref: ref, flex: true, fullWidth: true, className: (0, style_react_1.classNames)([
-            (0, utils_2.staticClassName)('CalendarViews', theme) && [
-                'onesy-CalendarViews-root'
-            ],
-            className,
-            classes.root
-        ]) }, other, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, fullWidth: true, className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('CalendarViews', theme) && [
-                        'onesy-CalendarViews-header'
-                    ]
-                ]) }, { children: [startHeader, (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 2, direction: 'row', wrap: 'wrap', justify: 'space-between', align: 'center', fullWidth: true }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1.5, direction: 'row', wrap: 'wrap', align: 'center', className: classes.aside }, { children: [startLeft, (0, jsx_runtime_1.jsx)(Button, Object.assign({ color: 'inherit', version: 'outlined', size: 'small', onClick: onToday, selected: now.days === date.days }, { children: l('Today') })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: `${l('Previous')} ${l(view)}` }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onPrevious }, iconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconPrevious, Object.assign({}, iconProps)) })) })), (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: `${l('Next')} ${l(view)}` }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onNext }, iconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconNext, Object.assign({}, iconProps)) })) }))] })), (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'h3', weight: 300, whiteSpace: 'nowrap' }, TypeDateFormattedProps, { children: formattedDate })), endLeft] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1.5, direction: 'row', align: 'center', flexNo: true, className: (0, style_react_1.classNames)([
-                                    classes.aside,
-                                    classes.overflowX
-                                ]) }, { children: [startRight, !noViews && ((0, jsx_runtime_1.jsx)(Select, { name: l('View'), value: view, onChange: onChangeView, options: viewOptions, size: 'small', MenuProps: {
-                                            portal: true,
-                                            size: 'regular'
-                                        }, WrapperProps: {
-                                            style: {
-                                                width: 170,
-                                                minWidth: 'unset'
-                                            }
-                                        }, style: {
-                                            width: 170,
-                                            minWidth: 'unset'
-                                        } })), endRight] }))] })), endHeader] })), (0, jsx_runtime_1.jsx)(Line, Object.assign({ flex: true, fullWidth: true, className: classes.main }, { children: ui[view] }))] })));
+    return values[order];
+  }, []);
+  const ui = {
+    month: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Line, {
+      gap: 0,
+      className: classes.month
+    }, /*#__PURE__*/_react.default.createElement(CalendarMonth, (0, _extends2.default)({
+      value: now,
+      calendar: date,
+      renderDay: renderDay,
+      renderDayName: renderDayName,
+      onTimeClick: onTimeClick,
+      size: "large",
+      dayNamesFull: true,
+      noTransition: true,
+      outside: false,
+      DayNameProps: {
+        version: 'l1',
+        weight: 200
+      }
+    }, CalendarMonthProps, {
+      className: (0, _styleReact.classNames)([CalendarMonthProps === null || CalendarMonthProps === void 0 ? void 0 : CalendarMonthProps.className, classes.calendarMonth])
+    })))),
+    week: /*#__PURE__*/_react.default.createElement(CalendarWeek, (0, _extends2.default)({
+      date: date,
+      times: times,
+      events: events,
+      onTimeClick: onTimeClick
+    }, WeekProps)),
+    day: /*#__PURE__*/_react.default.createElement(CalendarWeek, (0, _extends2.default)({
+      date: date,
+      times: times,
+      events: events,
+      onTimeClick: onTimeClick,
+      day: true
+    }, WeekProps))
+  };
+  const iconProps = {
+    size: 'regular'
+  };
+  const iconButtonProps = {
+    size: 'regular'
+  };
+  return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+    ref: ref,
+    flex: true,
+    fullWidth: true,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CalendarViews', theme) && ['onesy-CalendarViews-root'], className, classes.root])
+  }, other), /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 1,
+    fullWidth: true,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CalendarViews', theme) && ['onesy-CalendarViews-header']])
+  }, startHeader, /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 2,
+    direction: "row",
+    wrap: "wrap",
+    justify: "space-between",
+    align: "center",
+    fullWidth: true
+  }, /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 1.5,
+    direction: "row",
+    wrap: "wrap",
+    align: "center",
+    className: classes.aside
+  }, startLeft, /*#__PURE__*/_react.default.createElement(Button, {
+    color: "inherit",
+    version: "outlined",
+    size: "small",
+    onClick: onToday,
+    selected: now.days === date.days
+  }, l('Today')), /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 0,
+    direction: "row",
+    align: "center"
+  }, /*#__PURE__*/_react.default.createElement(Tooltip, {
+    name: `${l('Previous')} ${l(view)}`
+  }, /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+    onClick: onPrevious
+  }, iconButtonProps), /*#__PURE__*/_react.default.createElement(IconPrevious, iconProps))), /*#__PURE__*/_react.default.createElement(Tooltip, {
+    name: `${l('Next')} ${l(view)}`
+  }, /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+    onClick: onNext
+  }, iconButtonProps), /*#__PURE__*/_react.default.createElement(IconNext, iconProps)))), /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
+    version: "h3",
+    weight: 300,
+    whiteSpace: "nowrap"
+  }, TypeDateFormattedProps), formattedDate), endLeft), /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 1.5,
+    direction: "row",
+    align: "center",
+    flexNo: true,
+    className: (0, _styleReact.classNames)([classes.aside, classes.overflowX])
+  }, startRight, !noViews && /*#__PURE__*/_react.default.createElement(Select, {
+    name: l('View'),
+    value: view,
+    onChange: onChangeView,
+    options: viewOptions,
+    size: "small",
+    MenuProps: {
+      portal: true,
+      size: 'regular'
+    },
+    WrapperProps: {
+      style: {
+        width: 170,
+        minWidth: 'unset'
+      }
+    },
+    style: {
+      width: 170,
+      minWidth: 'unset'
+    }
+  }), endRight)), endHeader), /*#__PURE__*/_react.default.createElement(Line, {
+    flex: true,
+    fullWidth: true,
+    className: classes.main
+  }, ui[view]));
 });
 CalendarViews.displayName = 'onesy-CalendarViews';
-exports.default = CalendarViews;
+var _default = exports.default = CalendarViews;