@devexpress/dx-react-scheduler-material-ui/dist/dx-react-scheduler-material-ui.cjs.cjs

Material-UI templates for DevExtreme React Scheduler component

/**
 * Bundle of @devexpress/dx-react-scheduler-material-ui
 * Generated: 2025-05-05
 * Version: 4.0.11
 * License: https://js.devexpress.com/Licensing
 */

'use strict';

if (typeof process === "undefined") { var process = { env: {} }; }

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var PropTypes = _interopDefault(require('prop-types'));
var dxReactScheduler = require('@devexpress/dx-react-scheduler');
var material = require('@mui/material');
var dxSchedulerCore = require('@devexpress/dx-scheduler-core');
var classNames = _interopDefault(require('clsx'));
var dxReactCore = require('@devexpress/dx-react-core');
var Repeat = _interopDefault(require('@mui/icons-material/Repeat'));
var CalendarToday = _interopDefault(require('@mui/icons-material/CalendarToday'));
var ChevronLeft = _interopDefault(require('@mui/icons-material/ChevronLeft'));
var ChevronRight = _interopDefault(require('@mui/icons-material/ChevronRight'));
var AccessTime = _interopDefault(require('@mui/icons-material/AccessTime'));
var Lens = _interopDefault(require('@mui/icons-material/Lens'));
var EditIcon = _interopDefault(require('@mui/icons-material/Edit'));
var CloseIcon = _interopDefault(require('@mui/icons-material/Close'));
var DeleteIcon = _interopDefault(require('@mui/icons-material/Delete'));
var AdapterMoment = require('@mui/x-date-pickers/AdapterMoment');
var DateTimePicker = require('@mui/x-date-pickers/DateTimePicker');
var LocalizationProvider = require('@mui/x-date-pickers/LocalizationProvider');

function ownKeys(object, enumerableOnly) {
  var keys = Object.keys(object);

  if (Object.getOwnPropertySymbols) {
    var symbols = Object.getOwnPropertySymbols(object);

    if (enumerableOnly) {
      symbols = symbols.filter(function (sym) {
        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
      });
    }

    keys.push.apply(keys, symbols);
  }

  return keys;
}

function _objectSpread2(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i] != null ? arguments[i] : {};

    if (i % 2) {
      ownKeys(Object(source), true).forEach(function (key) {
        _defineProperty(target, key, source[key]);
      });
    } else if (Object.getOwnPropertyDescriptors) {
      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
    } else {
      ownKeys(Object(source)).forEach(function (key) {
        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
      });
    }
  }

  return target;
}

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

function _defineProperties(target, props) {
  for (var i = 0; i < props.length; i++) {
    var descriptor = props[i];
    descriptor.enumerable = descriptor.enumerable || false;
    descriptor.configurable = true;
    if ("value" in descriptor) descriptor.writable = true;
    Object.defineProperty(target, descriptor.key, descriptor);
  }
}

function _createClass(Constructor, protoProps, staticProps) {
  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
  if (staticProps) _defineProperties(Constructor, staticProps);
  return Constructor;
}

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

function _extends() {
  _extends = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };

  return _extends.apply(this, arguments);
}

function _inherits(subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function");
  }

  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      writable: true,
      configurable: true
    }
  });
  if (superClass) _setPrototypeOf(subClass, superClass);
}

function _getPrototypeOf(o) {
  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
    return o.__proto__ || Object.getPrototypeOf(o);
  };
  return _getPrototypeOf(o);
}

function _setPrototypeOf(o, p) {
  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
    o.__proto__ = p;
    return o;
  };

  return _setPrototypeOf(o, p);
}

function _isNativeReflectConstruct() {
  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
  if (Reflect.construct.sham) return false;
  if (typeof Proxy === "function") return true;

  try {
    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
    return true;
  } catch (e) {
    return false;
  }
}

function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

function _objectWithoutProperties(source, excluded) {
  if (source == null) return {};

  var target = _objectWithoutPropertiesLoose(source, excluded);

  var key, i;

  if (Object.getOwnPropertySymbols) {
    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);

    for (i = 0; i < sourceSymbolKeys.length; i++) {
      key = sourceSymbolKeys[i];
      if (excluded.indexOf(key) >= 0) continue;
      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
      target[key] = source[key];
    }
  }

  return target;
}

function _assertThisInitialized(self) {
  if (self === void 0) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }

  return self;
}

function _possibleConstructorReturn(self, call) {
  if (call && (typeof call === "object" || typeof call === "function")) {
    return call;
  }

  return _assertThisInitialized(self);
}

function _createSuper(Derived) {
  var hasNativeReflectConstruct = _isNativeReflectConstruct();

  return function _createSuperInternal() {
    var Super = _getPrototypeOf(Derived),
        result;

    if (hasNativeReflectConstruct) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

function _slicedToArray(arr, i) {
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}

function _toConsumableArray(arr) {
  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
}

function _arrayWithoutHoles(arr) {
  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
}

function _arrayWithHoles(arr) {
  if (Array.isArray(arr)) return arr;
}

function _iterableToArray(iter) {
  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
}

function _iterableToArrayLimit(arr, i) {
  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];

  if (_i == null) return;
  var _arr = [];
  var _n = true;
  var _d = false;

  var _s, _e;

  try {
    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
      _arr.push(_s.value);

      if (i && _arr.length === i) break;
    }
  } catch (err) {
    _d = true;
    _e = err;
  } finally {
    try {
      if (!_n && _i["return"] != null) _i["return"]();
    } finally {
      if (_d) throw _e;
    }
  }

  return _arr;
}

function _unsupportedIterableToArray(o, minLen) {
  if (!o) return;
  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
  var n = Object.prototype.toString.call(o).slice(8, -1);
  if (n === "Object" && o.constructor) n = o.constructor.name;
  if (n === "Map" || n === "Set") return Array.from(o);
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}

function _arrayLikeToArray(arr, len) {
  if (len == null || len > arr.length) len = arr.length;

  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];

  return arr2;
}

function _nonIterableSpread() {
  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}

function _nonIterableRest() {
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}

var _excluded = ["children", "className"];
var PREFIX = 'Container';
var classes = {
  container: "".concat(PREFIX, "-container")
};
var ContainerBase = function ContainerBase(_ref) {
  var children = _ref.children,
      className = _ref.className,
      restProps = _objectWithoutProperties(_ref, _excluded);

  return /*#__PURE__*/React.createElement("div", _extends({
    className: classNames(classes.container, className)
  }, restProps), children);
};
process.env.NODE_ENV !== "production" ? ContainerBase.propTypes = {
  children: PropTypes.node.isRequired,
  className: PropTypes.string
} : void 0;
ContainerBase.defaultProps = {
  className: undefined
};

var _excluded$1 = ["height", "style"];
var StyledContainerBase = material.styled(ContainerBase)(_defineProperty({}, "&.".concat(classes.container), {
  WebkitOverflowScrolling: 'touch',
  // NOTE: fix sticky positioning in Safari
  width: '100%',
  height: '100%',
  position: 'relative',
  display: 'flex',
  flexDirection: 'column'
}));
var Root = function Root(_ref) {
  var height = _ref.height,
      style = _ref.style,
      restProps = _objectWithoutProperties(_ref, _excluded$1);

  var containerStyle = height === dxSchedulerCore.AUTO_HEIGHT ? {
    height: '100%'
  } : {
    height: "".concat(height, "px")
  };
  return /*#__PURE__*/React.createElement(StyledContainerBase, _extends({
    style: _objectSpread2(_objectSpread2({}, containerStyle), style)
  }, restProps));
};
process.env.NODE_ENV !== "production" ? Root.propTypes = {
  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
  style: PropTypes.object
} : void 0;
Root.defaultProps = {
  style: null
};

var _excluded$2 = ["children"];
var Scheduler = function Scheduler(_ref) {
  var children = _ref.children,
      restProps = _objectWithoutProperties(_ref, _excluded$2);

  return /*#__PURE__*/React.createElement(dxReactScheduler.Scheduler, _extends({
    rootComponent: Root
  }, restProps), children);
};
Scheduler.Root = Root;
process.env.NODE_ENV !== "production" ? Scheduler.propTypes = {
  children: PropTypes.node.isRequired
} : void 0;

var _SPACING_CELL_HEIGHT, _BASIC_CELL_HEIGHT;
var red = material.colors.red,
    pink = material.colors.pink,
    purple = material.colors.purple,
    deepPurple = material.colors.deepPurple,
    indigo = material.colors.indigo,
    blue = material.colors.blue,
    lightBlue = material.colors.lightBlue,
    cyan = material.colors.cyan,
    teal = material.colors.teal,
    green = material.colors.green,
    lightGreen = material.colors.lightGreen,
    lime = material.colors.lime,
    yellow = material.colors.yellow,
    amber = material.colors.amber,
    orange = material.colors.orange,
    deepOrange = material.colors.deepOrange;
var PRIMARY_COLOR = blue;
var TRANSITIONS_TIME = 400;
var DEFAULT_PALETTE = [red, pink, purple, deepPurple, indigo, blue, lightBlue, cyan, teal, green, lightGreen, lime, yellow, amber, orange, deepOrange];
var XS_CELL_WIDTH = 50;
var SMALL_CELL_WIDTH = 65;
var CELL_WIDTH = 100;
var XS_LAYOUT_WIDTH = 500;
var SMALL_LAYOUT_WIDTH = 700;
var SMALL_LAYOUT_MEDIA_QUERY = "@media (max-width: ".concat(XS_LAYOUT_WIDTH, "px)");
var LAYOUT_MEDIA_QUERY = "@media (max-width: ".concat(SMALL_LAYOUT_WIDTH, "px)");
var GROUPING_PANEL_VERTICAL_CELL_WIDTH = 12.5;
var DEFAULT_SPACING = 8;
var SPACING_CELL_HEIGHT = (_SPACING_CELL_HEIGHT = {}, _defineProperty(_SPACING_CELL_HEIGHT, dxSchedulerCore.VIEW_TYPES.MONTH, 12.5), _defineProperty(_SPACING_CELL_HEIGHT, dxSchedulerCore.VIEW_TYPES.WEEK, 6), _defineProperty(_SPACING_CELL_HEIGHT, dxSchedulerCore.VIEW_TYPES.DAY, 6), _defineProperty(_SPACING_CELL_HEIGHT, dxSchedulerCore.VIEW_TYPES.ALL_DAY_PANEL, 5.75), _SPACING_CELL_HEIGHT);
var BASIC_CELL_HEIGHT = (_BASIC_CELL_HEIGHT = {}, _defineProperty(_BASIC_CELL_HEIGHT, dxSchedulerCore.VIEW_TYPES.MONTH, SPACING_CELL_HEIGHT[dxSchedulerCore.VIEW_TYPES.MONTH] * DEFAULT_SPACING), _defineProperty(_BASIC_CELL_HEIGHT, dxSchedulerCore.VIEW_TYPES.WEEK, SPACING_CELL_HEIGHT[dxSchedulerCore.VIEW_TYPES.WEEK] * DEFAULT_SPACING), _defineProperty(_BASIC_CELL_HEIGHT, dxSchedulerCore.VIEW_TYPES.DAY, SPACING_CELL_HEIGHT[dxSchedulerCore.VIEW_TYPES.DAY] * DEFAULT_SPACING), _defineProperty(_BASIC_CELL_HEIGHT, dxSchedulerCore.VIEW_TYPES.ALL_DAY_PANEL, SPACING_CELL_HEIGHT[dxSchedulerCore.VIEW_TYPES.ALL_DAY_PANEL] * DEFAULT_SPACING), _BASIC_CELL_HEIGHT);
var SPACING_LABEL_HEIGHT = SPACING_CELL_HEIGHT[dxSchedulerCore.VIEW_TYPES.WEEK];
var LEFT_PANEL_WIDTH_SPACING = 10;

var getBorder = function getBorder(theme) {
  return "1px solid ".concat(theme.palette.mode === 'light' ? material.lighten(material.alpha(theme.palette.divider, 1), 0.88) : material.darken(material.alpha(theme.palette.divider, 1), 0.68));
};
var getBrightBorder = function getBrightBorder(theme) {
  return "1px solid ".concat(theme.palette.mode === 'light' ? material.lighten(material.alpha(theme.palette.divider, 1), 0.72) : material.darken(material.alpha(theme.palette.divider, 1), 0.5));
};
var cellsMeta = function cellsMeta(tableElement) {
  var cellElements = Array.from(tableElement.querySelectorAll('td'));
  return {
    parentRect: function parentRect() {
      return tableElement.getBoundingClientRect();
    },
    getCellRects: cellElements.map(function (element) {
      return function () {
        return element.getBoundingClientRect();
      };
    })
  };
};
var scrollingStrategy = function scrollingStrategy(scrollablePart, fixedPartVertical, fixedPartHorizontal) {
  var fixedPartVerticalRect = fixedPartVertical.getBoundingClientRect();
  var fixedPartHorizontalRect = fixedPartHorizontal && fixedPartHorizontal.getBoundingClientRect();

  var changeVerticalScroll = function changeVerticalScroll(value) {
    // eslint-disable-next-line no-param-reassign
    scrollablePart.scrollTop += value;
  };

  var changeHorizontalScroll = function changeHorizontalScroll(value) {
    // eslint-disable-next-line no-param-reassign
    scrollablePart.scrollLeft += value;
  };

  return {
    topBoundary: fixedPartVerticalRect.height + fixedPartVerticalRect.top,
    bottomBoundary: scrollablePart.offsetTop + scrollablePart.clientHeight,
    fixedTopHeight: fixedPartVerticalRect.height,
    leftBoundary: fixedPartHorizontalRect ? fixedPartHorizontalRect.width + fixedPartHorizontalRect.left : scrollablePart.offsetLeft,
    rightBoundary: scrollablePart.offsetLeft + scrollablePart.clientWidth,
    fixedLeftWidth: fixedPartHorizontalRect === null || fixedPartHorizontalRect === void 0 ? void 0 : fixedPartHorizontalRect.width,
    changeVerticalScroll: changeVerticalScroll,
    changeHorizontalScroll: changeHorizontalScroll
  };
};
var ensureColor = function ensureColor(level, color) {
  return color[level] || PRIMARY_COLOR[level];
};
var getResourceColor = function getResourceColor(resources) {
  if (resources && resources.length) {
    var _resources$find;

    return (_resources$find = resources.find(function (resource) {
      return resource.isMain;
    })) === null || _resources$find === void 0 ? void 0 : _resources$find.color;
  }

  return undefined;
};
var getAppointmentColor = function getAppointmentColor(level, color, defaultColor) {
  if (!color) return ensureColor(level, defaultColor);
  if (typeof color === 'string') return color;
  return ensureColor(level, color);
};
var getWidthInPixels = function getWidthInPixels(cellsNumber, cellWidth) {
  return "".concat(cellsNumber * cellWidth, "px");
};
var getViewCellKey = function getViewCellKey(startDate, groups) {
  if (!groups) return startDate.toString();
  return groups.reduce(function (acc, group) {
    return acc.concat(group.id);
  }, startDate.toString());
};
var addCommaAndSpaceToString = function addCommaAndSpaceToString(string) {
  return string && "".concat(string, ",\xA0");
};
var getEmptyCellWidth = function getEmptyCellWidth(theme, width, calculatedWidth) {
  return width ? "".concat(width, "px") : "calc(".concat(theme.spacing(calculatedWidth), " + 1px)");
};

var _excluded$3 = ["timeScaleComponent", "dayScaleComponent", "timeTableComponent", "dayScaleEmptyCellComponent", "groupingPanelComponent", "groupingPanelSize", "setScrollingStrategy", "className", "forwardedRef"];
var PREFIX$1 = 'MainLayout';
var classes$1 = {
  container: "".concat(PREFIX$1, "-container"),
  stickyElement: "".concat(PREFIX$1, "-stickyElement"),
  header: "".concat(PREFIX$1, "-header"),
  leftPanel: "".concat(PREFIX$1, "-leftPanel"),
  ordinaryLeftPanelBorder: "".concat(PREFIX$1, "-ordinaryLeftPanelBorder"),
  brightLeftPanelBorder: "".concat(PREFIX$1, "-brightLeftPanelBorder"),
  ordinaryHeaderBorder: "".concat(PREFIX$1, "-ordinaryHeaderBorder"),
  brightHeaderBorder: "".concat(PREFIX$1, "-brightHeaderBorder"),
  dayScaleEmptyCell: "".concat(PREFIX$1, "-dayScaleEmptyCell"),
  flexRow: "".concat(PREFIX$1, "-flexRow"),
  relativeContainer: "".concat(PREFIX$1, "-relativeContainer"),
  inlineFlex: "".concat(PREFIX$1, "-inlineFlex"),
  background: "".concat(PREFIX$1, "-background")
};
var StyledDiv = material.styled('div', {
  shouldForwardProp: function shouldForwardProp(prop) {
    return prop !== 'leftPanelWidth' && prop !== 'calculatedLeftPanelWidth';
  }
})(function (_ref) {
  var _ref2;

  var theme = _ref.theme,
      leftPanelWidth = _ref.leftPanelWidth,
      calculatedLeftPanelWidth = _ref.calculatedLeftPanelWidth;
  return _ref2 = {}, _defineProperty(_ref2, "&.".concat(classes$1.container), {
    overflowY: 'auto',
    position: 'relative',
    tableLayout: 'fixed'
  }), _defineProperty(_ref2, "& .".concat(classes$1.stickyElement), {
    tableLayout: 'fixed',
    position: 'sticky',
    overflow: 'visible',
    background: theme.palette.background.paper
  }), _defineProperty(_ref2, "& .".concat(classes$1.header), {
    top: 0,
    zIndex: 2
  }), _defineProperty(_ref2, "& .".concat(classes$1.leftPanel), {
    left: 0,
    zIndex: 1,
    boxSizing: 'border-box'
  }), _defineProperty(_ref2, "& .".concat(classes$1.ordinaryLeftPanelBorder), {
    borderRight: getBorder(theme)
  }), _defineProperty(_ref2, "& .".concat(classes$1.brightLeftPanelBorder), {
    borderRight: getBrightBorder(theme)
  }), _defineProperty(_ref2, "& .".concat(classes$1.ordinaryHeaderBorder), {
    borderBottom: getBorder(theme)
  }), _defineProperty(_ref2, "& .".concat(classes$1.brightHeaderBorder), {
    borderBottom: getBrightBorder(theme)
  }), _defineProperty(_ref2, "& .".concat(classes$1.dayScaleEmptyCell), {
    display: 'flex',
    alignItems: 'flex-end',
    width: getEmptyCellWidth(theme, leftPanelWidth, calculatedLeftPanelWidth),
    minWidth: getEmptyCellWidth(theme, leftPanelWidth, calculatedLeftPanelWidth)
  }), _defineProperty(_ref2, "& .".concat(classes$1.flexRow), {
    display: 'flex',
    flexDirection: 'row'
  }), _defineProperty(_ref2, "& .".concat(classes$1.relativeContainer), {
    position: 'relative'
  }), _defineProperty(_ref2, "& .".concat(classes$1.inlineFlex), {
    display: 'inline-flex'
  }), _defineProperty(_ref2, "& .".concat(classes$1.background), {
    background: theme.palette.background.paper
  }), _ref2;
});
var MainLayout = /*#__PURE__*/React.memo(function (_ref3) {
  var _classNames, _classNames2, _classNames3;

  var TimeScale = _ref3.timeScaleComponent,
      DayScale = _ref3.dayScaleComponent,
      TimeTable = _ref3.timeTableComponent,
      DayScaleEmptyCell = _ref3.dayScaleEmptyCellComponent,
      GroupingPanel = _ref3.groupingPanelComponent,
      groupingPanelSize = _ref3.groupingPanelSize,
      setScrollingStrategy = _ref3.setScrollingStrategy,
      className = _ref3.className,
      forwardedRef = _ref3.forwardedRef,
      restProps = _objectWithoutProperties(_ref3, _excluded$3);

  var layoutRef = React.useRef(null);
  var layoutHeaderRef = React.useRef(null);
  var leftPanelRef = React.useRef(null);

  var _React$useState = React.useState(false),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      isLeftBorderSet = _React$useState2[0],
      setIsLeftBorderSet = _React$useState2[1];

  var _React$useState3 = React.useState(false),
      _React$useState4 = _slicedToArray(_React$useState3, 2),
      isTopBorderSet = _React$useState4[0],
      setIsTopBorderSet = _React$useState4[1];

  var _React$useState5 = React.useState(0),
      _React$useState6 = _slicedToArray(_React$useState5, 2),
      leftPanelWidth = _React$useState6[0],
      setLeftPanelWidth = _React$useState6[1];

  React.useEffect(function () {
    var leftPanel = leftPanelRef.current;
    setScrollingStrategy(scrollingStrategy(layoutRef.current, layoutHeaderRef.current, leftPanel)); // eslint-disable-next-line no-unused-expressions

    leftPanel && setLeftPanelWidth(leftPanel.getBoundingClientRect().width);
  }, [layoutRef, layoutHeaderRef, leftPanelRef, setScrollingStrategy, setLeftPanelWidth]);
  var renderTimeScale = !!TimeScale;
  var renderLeftPanel = renderTimeScale || !!groupingPanelSize;
  var calculatedGroupPanelWidth = groupingPanelSize ? groupingPanelSize * GROUPING_PANEL_VERTICAL_CELL_WIDTH : 0;
  var calculatedLeftPanelWidth = LEFT_PANEL_WIDTH_SPACING + calculatedGroupPanelWidth;
  var setBorders = React.useCallback(function (event) {
    // eslint-disable-next-line no-bitwise
    if (!!event.target.scrollLeft ^ isLeftBorderSet) {
      setIsLeftBorderSet(!isLeftBorderSet);
    } // eslint-disable-next-line no-bitwise


    if (!!event.target.scrollTop ^ isTopBorderSet) {
      setIsTopBorderSet(!isTopBorderSet);
    }
  }, [isLeftBorderSet, isTopBorderSet]);
  return /*#__PURE__*/React.createElement(StyledDiv, _extends({
    leftPanelWidth: leftPanelWidth,
    calculatedLeftPanelWidth: calculatedLeftPanelWidth,
    ref: function ref(node) {
      layoutRef.current = node;

      if (typeof forwardedRef === 'function') {
        forwardedRef(node);
      } else if (forwardedRef) {
        // eslint-disable-next-line no-param-reassign
        forwardedRef.current = node;
      }
    },
    className: classNames(classes$1.container, className),
    onScroll: setBorders
  }, restProps), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    ref: layoutHeaderRef,
    className: classNames(classes$1.stickyElement, classes$1.header, classes$1.flexRow)
  }, /*#__PURE__*/React.createElement("div", {
    className: classNames((_classNames = {}, _defineProperty(_classNames, classes$1.background, true), _defineProperty(_classNames, classes$1.inlineFlex, true), _defineProperty(_classNames, classes$1.ordinaryHeaderBorder, !isTopBorderSet), _defineProperty(_classNames, classes$1.brightHeaderBorder, isTopBorderSet), _classNames))
  }, renderLeftPanel && /*#__PURE__*/React.createElement("div", {
    className: classNames((_classNames2 = {}, _defineProperty(_classNames2, classes$1.stickyElement, true), _defineProperty(_classNames2, classes$1.leftPanel, true), _defineProperty(_classNames2, classes$1.dayScaleEmptyCell, true), _defineProperty(_classNames2, classes$1.ordinaryLeftPanelBorder, !isLeftBorderSet), _defineProperty(_classNames2, classes$1.brightLeftPanelBorder, isLeftBorderSet), _classNames2))
  }, /*#__PURE__*/React.createElement(DayScaleEmptyCell, null)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DayScale, null)))), /*#__PURE__*/React.createElement("div", {
    className: classes$1.flexRow
  }, /*#__PURE__*/React.createElement("div", {
    className: classes$1.inlineFlex
  }, renderLeftPanel && /*#__PURE__*/React.createElement("div", {
    ref: leftPanelRef,
    className: classNames((_classNames3 = {}, _defineProperty(_classNames3, classes$1.flexRow, true), _defineProperty(_classNames3, classes$1.stickyElement, true), _defineProperty(_classNames3, classes$1.leftPanel, true), _defineProperty(_classNames3, classes$1.ordinaryLeftPanelBorder, !isLeftBorderSet), _defineProperty(_classNames3, classes$1.brightLeftPanelBorder, isLeftBorderSet), _classNames3))
  }, /*#__PURE__*/React.createElement(GroupingPanel, null), renderTimeScale && /*#__PURE__*/React.createElement(TimeScale, null)), /*#__PURE__*/React.createElement("div", {
    className: classes$1.relativeContainer
  }, /*#__PURE__*/React.createElement(TimeTable, null))))));
});
process.env.NODE_ENV !== "production" ? MainLayout.propTypes = {
  // oneOfType is a workaround because withStyles returns react object
  timeScaleComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
  dayScaleComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
  timeTableComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
  dayScaleEmptyCellComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
  groupingPanelComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
  groupingPanelSize: PropTypes.number,
  setScrollingStrategy: PropTypes.func.isRequired,
  className: PropTypes.string,
  forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
} : void 0;
MainLayout.defaultProps = {
  groupingPanelComponent: function groupingPanelComponent() {
    return null;
  },
  timeScaleComponent: undefined,
  groupingPanelSize: 0,
  className: undefined,
  forwardedRef: undefined
};

var _excluded$4 = ["children"];
var Row = function Row(_ref) {
  var children = _ref.children,
      restProps = _objectWithoutProperties(_ref, _excluded$4);

  return /*#__PURE__*/React.createElement(material.TableRow, restProps, children);
};
process.env.NODE_ENV !== "production" ? Row.propTypes = {
  children: PropTypes.node
} : void 0;
Row.defaultProps = {
  children: null
};

var _excluded$5 = ["className", "children"];
var PREFIX$2 = 'DayScaleEmptyCell';
var classes$2 = {
  emptyCell: "".concat(PREFIX$2, "-emptyCell")
};
var StyledDiv$1 = material.styled('div')(_defineProperty({}, "&.".concat(classes$2.emptyCell), {
  height: '100%',
  width: '100%'
}));
var DayScaleEmptyCell = function DayScaleEmptyCell(_ref) {
  var className = _ref.className,
      children = _ref.children,
      restProps = _objectWithoutProperties(_ref, _excluded$5);

  return /*#__PURE__*/React.createElement(StyledDiv$1, _extends({}, restProps, {
    className: classNames(classes$2.emptyCell, className)
  }), children);
};
process.env.NODE_ENV !== "production" ? DayScaleEmptyCell.propTypes = {
  className: PropTypes.string,
  children: PropTypes.node
} : void 0;
DayScaleEmptyCell.defaultProps = {
  className: undefined,
  children: undefined
};

var Container = material.styled(ContainerBase)(_defineProperty({}, "&.".concat(classes.container), {
  position: 'absolute',
  width: '100%',
  top: 0,
  left: 0
}));

var _excluded$6 = ["cellComponent", "rowComponent", "cellsData", "groupOrientation", "className", "groupCount", "includeAllDayCell"];
var PREFIX$3 = 'TicksLayout';
var classes$3 = {
  table: "".concat(PREFIX$3, "-table")
};
var StyledTable = material.styled(material.Table)(_defineProperty({}, "&.".concat(classes$3.table), {
  tableLayout: 'fixed',
  boxSizing: 'border-box'
}));
var TicksLayout = function TicksLayout(_ref) {
  var Cell = _ref.cellComponent,
      Row = _ref.rowComponent,
      cellsData = _ref.cellsData,
      groupOrientation = _ref.groupOrientation,
      className = _ref.className,
      groupCount = _ref.groupCount,
      includeAllDayCell = _ref.includeAllDayCell,
      restProps = _objectWithoutProperties(_ref, _excluded$6);

  var groupHeight = cellsData.length / groupCount;
  return /*#__PURE__*/React.createElement(StyledTable, _extends({}, restProps, {
    className: classNames(classes$3.table, className)
  }), /*#__PURE__*/React.createElement(material.TableBody, null, cellsData.map(function (_ref2, index) {
    var _ref3 = _slicedToArray(_ref2, 1),
        firstDay = _ref3[0];

    return /*#__PURE__*/React.createElement(React.Fragment, {
      key: index.toString()
    }, index % groupHeight === 0 && includeAllDayCell && /*#__PURE__*/React.createElement(Row, {
      key: (index / groupHeight).toString()
    }, /*#__PURE__*/React.createElement(Cell, {
      key: "all-day-tick ".concat(index / groupHeight),
      isAllDay: true,
      startDate: firstDay.startDate,
      endDate: firstDay.endDate,
      endOfGroup: false,
      groupingInfo: firstDay.groupingInfo
    })), /*#__PURE__*/React.createElement(Row, {
      key: (firstDay.startDate + index).toString()
    }, /*#__PURE__*/React.createElement(Cell, {
      key: index.toString(),
      startDate: firstDay.startDate,
      endDate: firstDay.endDate,
      endOfGroup: firstDay.endOfGroup && groupOrientation === dxSchedulerCore.VERTICAL_GROUP_ORIENTATION,
      groupingInfo: firstDay.groupingInfo
    })));
  })));
};
process.env.NODE_ENV !== "production" ? TicksLayout.propTypes = {
  cellsData: PropTypes.arrayOf(Array).isRequired,
  cellComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
  rowComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
  groupOrientation: PropTypes.oneOf([dxSchedulerCore.HORIZONTAL_GROUP_ORIENTATION, dxSchedulerCore.VERTICAL_GROUP_ORIENTATION]),
  groupCount: PropTypes.number,
  includeAllDayCell: PropTypes.bool,
  className: PropTypes.string
} : void 0;
TicksLayout.defaultProps = {
  className: undefined,
  groupOrientation: dxSchedulerCore.HORIZONTAL_GROUP_ORIENTATION,
  groupCount: 1,
  includeAllDayCell: false
};

var _excluded$7 = ["labelComponent", "rowComponent", "tickCellComponent", "allDayTitleComponent", "cellsData", "formatDate", "groupOrientation", "groups", "showAllDayTitle", "height", "className"];
var PREFIX$4 = 'Layout';
var classes$4 = {
  timeScaleContainer: "".concat(PREFIX$4, "-timeScaleContainer"),
  ticks: "".concat(PREFIX$4, "-ticks"),
  cell: "".concat(PREFIX$4, "-cell"),
  verticalCell: "".concat(PREFIX$4, "-verticalCell"),
  flexRow: "".concat(PREFIX$4, "-flexRow")
};
var StyledDiv$2 = material.styled('div', {
  shouldForwardProp: function shouldForwardProp(prop) {
    return prop !== 'height' && prop !== 'defaultHeight';
  }
})(function (_ref) {
  var _ref2;

  var theme = _ref.theme,
      height = _ref.height,
      defaultHeight = _ref.defaultHeight;
  return _ref2 = {}, _defineProperty(_ref2, "& .".concat(classes$4.timeScaleContainer), {
    width: theme.spacing(LEFT_PANEL_WIDTH_SPACING - 1)
  }), _defineProperty(_ref2, "& .".concat(classes$4.ticks), {
    width: theme.spacing(1)
  }), _defineProperty(_ref2, "& .".concat(classes$4.cell), {
    boxSizing: 'border-box',
    padding: 0,
    borderBottom: 'none'
  }), _defineProperty(_ref2, "& .".concat(classes$4.verticalCell), {
    borderBottom: getBrightBorder(theme),
    'tr:last-child &': {
      borderBottom: 'none'
    },
    height: height ? "".concat(height, "px") : theme.spacing(defaultHeight)
  }), _defineProperty(_ref2, "&.".concat(classes$4.flexRow), {
    display: 'flex',
    flexDirection: 'row'
  }), _ref2;
});
var Layout = function Layout(_ref3) {
  var Label = _ref3.labelComponent,
      rowComponent = _ref3.rowComponent,
      tickCellComponent = _ref3.tickCellComponent,
      AllDayTitle = _ref3.allDayTitleComponent,
      cellsData = _ref3.cellsData,
      formatDate = _ref3.formatDate,
      groupOrientation = _ref3.groupOrientation,
      groups = _ref3.groups,
      showAllDayTitle = _ref3.showAllDayTitle,
      height = _ref3.height,
      className = _ref3.className,
      restProps = _objectWithoutProperties(_ref3, _excluded$7);

  var groupCount = dxSchedulerCore.getGroupsLastRow(groups).length;
  var cellsCount = cellsData.length / groupCount;
  var heightWithoutAllDayTitle = SPACING_CELL_HEIGHT[dxSchedulerCore.VIEW_TYPES.WEEK] * cellsCount;
  var defaultHeight = showAllDayTitle ? heightWithoutAllDayTitle + SPACING_CELL_HEIGHT[dxSchedulerCore.VIEW_TYPES.ALL_DAY_PANEL] : heightWithoutAllDayTitle;
  var calculatedHeight = height / groupCount;
  return /*#__PURE__*/React.createElement(StyledDiv$2, _extends({
    height: calculatedHeight,
    defaultHeight: defaultHeight,
    className: classNames(classes$4.flexRow, className)
  }, restProps), /*#__PURE__*/React.createElement(material.Table, {
    className: classes$4.timeScaleContainer
  }, /*#__PURE__*/React.createElement(material.TableBody, null, dxSchedulerCore.getLabelsForAllGroups(cellsData, groups, groupOrientation).map(function (groupedLabels, groupIndex) {
    var _classNames;

    var firstDataLabel = groupedLabels[0];
    var lastDataLabel = groupedLabels[groupedLabels.length - 1];
    return /*#__PURE__*/React.createElement(material.TableRow, {
      key: groupIndex.toString()
    }, /*#__PURE__*/React.createElement(material.TableCell, {
      className: classNames((_classNames = {}, _defineProperty(_classNames, classes$4.cell, true), _defineProperty(_classNames, classes$4.verticalCell, groupOrientation === dxSchedulerCore.VERTICAL_GROUP_ORIENTATION), _classNames))
    }, /*#__PURE__*/React.createElement(AllDayTitle, {
      fixedHeight: true
    }), /*#__PURE__*/React.createElement(Label, {
      key: firstDataLabel.startDate,
      groupingInfo: firstDataLabel.groupingInfo
    }), groupedLabels.map(function (label, index) {
      return index !== cellsData.length - 1 && /*#__PURE__*/React.createElement(Label, {
        time: label.endDate,
        formatDate: formatDate,
        key: label.key,
        groupingInfo: label.groupingInfo
      });
    }), /*#__PURE__*/React.createElement(Label, {
      key: lastDataLabel.endDate,
      groupingInfo: lastDataLabel.groupingInfo
    })));
  }))), /*#__PURE__*/React.createElement(TicksLayout, {
    rowComponent: rowComponent,
    cellComponent: tickCellComponent,
    cellsData: cellsData,
    className: classes$4.ticks,
    groupOrientation: groupOrientation,
    groupCount: groupCount,
    includeAllDayCell: showAllDayTitle
  }));
};
process.env.NODE_ENV !== "production" ? Layout.propTypes = {
  cellsData: PropTypes.arrayOf(Array).isRequired,
  labelComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
  rowComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
  allDayTitleComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
  tickCellComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
  formatDate: PropTypes.func.isRequired,
  groups: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.object)),
  groupOrientation: PropTypes.oneOf([dxSchedulerCore.HORIZONTAL_GROUP_ORIENTATION, dxSchedulerCore.VERTICAL_GROUP_ORIENTATION]),
  showAllDayTitle: PropTypes.bool,
  height: PropTypes.number,
  className: PropTypes.string
} : void 0;
Layout.defaultProps = {
  groups: [[{}]],
  groupOrientation: dxSchedulerCore.HORIZONTAL_GROUP_ORIENTATION,
  allDayTitleComponent: function allDayTitleComponent() {
    return null;
  },
  showAllDayTitle: false,
  height: 0,
  className: undefined
};

var _excluded$8 = ["className", "time", "formatDate", "groupingInfo", "endOfGroup"];
var PREFIX$5 = 'Label';
var classes$5 = {
  label: "".concat(PREFIX$5, "-label"),
  text: "".concat(PREFIX$5, "-text"),
  emptyLabel: "".concat(PREFIX$5, "-emptyLabel")
};
var StyledDiv$3 = material.styled('div')(function (_ref) {
  var _ref2;

  var theme = _ref.theme;
  return _ref2 = {}, _defineProperty(_ref2, "&.".concat(classes$5.label), {
    userSelect: 'none',
    border: 0,
    height: theme.spacing(SPACING_LABEL_HEIGHT),
    lineHeight: theme.spacing(SPACING_LABEL_HEIGHT),
    padding: 0,
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    textAlign: 'right',
    paddingLeft: theme.spacing(0.25),
    paddingRight: theme.spacing(1)
  }), _defineProperty(_ref2, "& .".concat(classes$5.text), _objectSpread2(_objectSpread2({}, theme.typography.caption), {}, {
    fontSize: '0.7rem',
    whiteSpace: 'nowrap',
    color: theme.palette.text.secondary
  })), _defineProperty(_ref2, "&.".concat(classes$5.emptyLabel), {
    height: theme.spacing(SPACING_LABEL_HEIGHT / 2),
    '&:last-child': {
      height: "calc(".concat(theme.spacing(SPACING_LABEL_HEIGHT / 2), " - 1px)")
    }
  }), _ref2;
});
var Label = function Label(_ref3) {
  var _classNames;

  var className = _ref3.className,
      time = _ref3.time,
      formatDate = _ref3.formatDate,
      groupingInfo = _ref3.groupingInfo,
      endOfGroup = _ref3.endOfGroup,
      restProps = _objectWithoutProperties(_ref3, _excluded$8);

  return /*#__PURE__*/React.createElement(StyledDiv$3, _extends({
    className: classNames((_classNames = {}, _defineProperty(_classNames, classes$5.label, true), _defineProperty(_classNames, classes$5.emptyLabel, !time), _classNames), className)
  }, restProps), time && /*#__PURE__*/React.createElement("span", {
    className: classes$5.text
  }, formatDate(time, dxSchedulerCore.HOUR_MINUTE_OPTIONS)));
};
process.env.NODE_ENV !== "production" ? Label.propTypes = {
  formatDate: PropTypes.func,
  time: PropTypes.instanceOf(Date),
  groupingInfo: PropTypes.arrayOf(PropTypes.object),
  endOfGroup: PropTypes.bool,
  className: PropTypes.string
} : void 0;
Label.defaultProps = {
  className: undefined,
  time: undefined,
  formatDate: function formatDate() {
    return undefined;
  },
  groupingInfo: undefined,
  endOfGroup: false
};

var _excluded$9 = ["className", "startDate", "endDate", "endOfGroup", "groupingInfo", "isAllDay"];
var PREFIX$6 = 'TickCell';
var classes$6 = {
  cell: "".concat(PREFIX$6, "-cell"),
  brightBottomBorder: "".concat(PREFIX$6, "-brightBottomBorder"),
  allDayCell: "".concat(PREFIX$6, "-allDayCell")
};
var StyledTableCell = material.styled(material.TableCell)(function (_ref) {
  var _ref2;

  var theme = _ref.theme;
  return _ref2 = {}, _defineProperty(_ref2, "&.".concat(classes$6.cell), {
    height: theme.spacing(SPACING_CELL_HEIGHT[dxSchedulerCore.VIEW_TYPES.WEEK]),
    padding: 0,
    boxSizing: 'border-box',
    borderBottom: getBorder(theme),
    'tr:last-child &': {
      borderBottom: 'none'
    }
  }), _defineProperty(_ref2, "&.".concat(classes$6.brightBottomBorder), {
    borderBottom: getBrightBorder(theme)
  }), _defineProperty(_ref2, "&.".concat(classes$6.allDayCell), {
    height: theme.spacing(SPACING_CELL_HEIGHT[dxSchedulerCore.VIEW_TYPES.ALL_DAY_PANEL])
  }), _ref2;
});
var TickCell = function TickCell(_ref3) {
  var _classNames;

  var className = _ref3.className,
      startDate = _ref3.startDate,
      endDate = _ref3.endDate,
      endOfGroup = _ref3.endOfGroup,
      groupingInfo = _ref3.groupingInfo,
      isAllDay = _ref3.isAllDay,
      restProps = _objectWithoutProperties(_ref3, _excluded$9);

  return /*#__PURE__*/React.createElement(StyledTableCell, _extends({
    className: classNames((_classNames = {}, _defineProperty(_classNames, classes$6.cell, true), _defineProperty(_classNames, classes$6.brightBottomBorder, endOfGroup), _defineProperty(_classNames, classes$6.allDayCell, isAllDay), _classNames), className)
  }, restProps));
};
process.env.NODE_ENV !== "production" ? TickCell.propTypes = {
  startDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
  endDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
  endOfGroup: PropTypes.bool,
  groupingInfo: PropTypes.arrayOf(PropTypes.object),
  isAllDay: PropTypes.bool,
  className: PropTypes.string
} : void 0;
TickCell.defaultProps = {
  className: undefined,
  startDate: undefined,
  endDate: undefined,
  endOfGroup: false,
  groupingInfo: undefined,
  isAllDay: false
};

var _excluded$a = ["className", "cellsNumber", "children"];
var PREFIX$7 = 'Table';
var classes$7 = {
  table: "".concat(PREFIX$7, "-table")
};
var StyledTableMUI = material.styled(material.Table, {
  shouldForwardProp: function shouldForwardProp(prop) {
    return prop !== 'cellsNumber';
  }
})(function (_ref) {
  var _$concat;

  var cellsNumber = _ref.cellsNumber;
  return _defineProperty({}, "&.".concat(classes$7.table), (_$concat = {
    tableLayout: 'fixed',
    minWidth: getWidthInPixels(cellsNumber, CELL_WIDTH),
    width: '100%'
  }, _defineProperty(_$concat, "".concat(LAYOUT_MEDIA_QUERY), {
    minWidth: getWidthInPixels(cellsNumber, SMALL_CELL_WIDTH)
  }), _defineProperty(_$concat, "".concat(SMALL_LAYOUT_MEDIA_QUERY), {
    minWidth: getWidthInPixels(cellsNumber, XS_CELL_WIDTH)
  }), _$concat));
});
/* This component is a workaround to the bug when appointments flicker after being drag-dropped.
  It is used to define the minimum width of a parent layout depending on the number of cells.
  It's impossible to do it in the layout because appointments begin to flicker when using
  functional component instead of PureComponent (and to define the minimum width it is necessary
  to use material-ui's makeStyles).
*/

var Table = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
  var className = _ref3.className,
      cellsNumber = _ref3.cellsNumber,
      children = _ref3.children,
      restProps = _objectWithoutProperties(_ref3, _excluded$a);

  return /*#__PURE__*/React.createElement(StyledTableMUI, _extends({
    cellsNumber: cellsNumber,
    ref: ref,
    className: classNames(classes$7.table, className)
  }, restProps), /*#__PURE__*/React.createElement(material.TableBody, null, children));
});
Table.propTypes = {
  cellsNumber: PropTypes.number.isRequired,
  className: PropTypes.string,
  children: PropTypes.node.isRequired
};
Table.defaultProps = {
  className: undefined
};

var _excluded$b = ["setCellElementsMeta", "cellsNumber", "children"];
var Layout$1 = /*#__PURE__*/React.memo(function (_ref) {
  var setCellElementsMeta = _ref.setCellElementsMeta,
      cellsNumber = _ref.cellsNumber,
      children = _ref.children,
      restProps = _objectWithoutProperties(_ref, _excluded$b);

  var tableRef = React.useRef(null);
  React.useEffect(function () {
    var tableElement = tableRef.current;
    setCellElementsMeta(cellsMeta(tableElement));
  });
  return /*#__PURE__*/React.createElement(Table, _extends({
    ref: tableRef,
    cellsNumber: cellsNumber
  }, restProps), children);
});
process.env.NODE_ENV !== "production" ? Layout$1.propTypes = {
  setCellElementsMeta: PropTypes.func.isRequired,
  cellsNumber: PropTypes.number.isRequired,
  children: PropTypes.node.isRequired
} : void 0;

var _excluded$c = ["setCellElementsMeta", "cellComponent", "allDayCellComponent", "rowComponent", "allDayRowComponent", "cellsData", "allDayCellsData", "formatDate"];

var renderCell = function renderCell(Cell, startDate, endDate, endOfGroup, groupingInfo, groupOrientation) {
  return /*#__PURE__*/React.createElement(Cell, {
    key: getViewCellKey(startDate, groupingInfo),
    startDate: startDate,
    endDate: endDate,
    endOfGroup: endOfGroup,
    hasRightBorder: endOfGroup,
    groupingInfo: groupingInfo,
    groupOrientation: groupOrientation
  });
};

var Layout$2 = /*#__PURE__*/React.memo(function (_ref) {
  var setCellElementsMeta = _ref.setCellElementsMeta,
      cellComponent = _ref.cellComponent,
      allDayCellComponent = _ref.allDayCellComponent,
      Row = _ref.rowComponent,
      AllDayRow = _ref.allDayRowComponent,
      cellsData = _ref.cellsData,
      allDayCellsData = _ref.allDayCellsData,
      formatDate = _ref.formatDate,
      restProps = _objectWithoutProperties(_ref, _excluded$c);

  return /*#__PURE__*/React.createElement(Layout$1, _extends({
    setCellElementsMeta: setCellElementsMeta,
    cellsNumber: cellsData[0].length
  }, restProps), dxSchedulerCore.prepareVerticalViewCellsData(cellsData, allDayCellsData).map(function (group, groupIndex) {
    return /*#__PURE__*/React.createElement(React.Fragment, {
      key: groupIndex.toString()
    }, allDayCellsData && /*#__PURE__*/React.createElement(AllDayRow, null, allDayCellsData[groupIndex].map(function (_ref2) {
      var startDate = _ref2.startDate,
          endDate = _ref2.endDate,
          endOfGroup = _ref2.endOfGroup,
          groupingInfo = _ref2.groupingInfo,
          groupOrientation = _ref2.groupOrientation;
      return renderCell(allDayCellComponent, startDate, endDate, endOfGroup, groupingInfo, groupOrientation);
    })), group.map(function (days, index) {
      return /*#__PURE__*/React.createElement(Row, {
        key: index.toString()
      }, days.map(function (_ref3) {
        var startDate = _ref3.startDate,
            endDate = _ref3.endDate,
            groupingInfo = _ref3.groupingInfo,
            endOfGroup = _ref3.endOfGroup,
            groupOrientation = _ref3.groupOrientation;
        return renderCell(cellComponent, startDate, endDate, endOfGroup, groupingInfo, groupOrientation);
      }));
    }));
  }));
});
Layout$2.propTypes = {
  cellsData: PropTypes.arrayOf(Array).isRequired,
  allDayCellsData: PropTypes.arrayOf(Array),
  cellComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
  allDayCellComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
  rowComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
  allDayRowComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
  formatDate: PropTypes.func.isRequired,
  setCellElementsMeta: PropTypes.func.isRequired
};
Layout$2.defaultProps = {
  allDayCellComponent: function allDayCellComponent() {
    return null;
  },
  allDayRowComponent: function allDayRowComponent() {
    return null;
  },
  allDayCellsData: undefined
};

var _excluded$d = ["className", "children", "startDate", "endDate", "currentTimeIndicatorPosition", "currentTimeIndicatorComponent", "isShaded", "endOfGroup", "groupingInfo", "groupOrientation", "hasRightBorder"];
var PREFIX$8 = 'Cell';
var classes$8 = {
  cell: "".concat(PREFIX$8, "-cell"),
  shadedCell: "".concat(PREFIX$8, "-shadedCell"),
  shadedPart: "".concat(PREFIX$8, "-shadedPart"),
  brightRightBorder: "".concat(PREFIX$8, "-brightRightBorder"),
  brightBorderBottom: "".concat(PREFIX$8, "-brightBorderBottom")
};
var StyledTableCell$1 = material.styled(material.TableCell, {
  shouldForwardProp: function shouldForwardProp(prop) {
    return prop !== 'shadedHeight';
  }
})(function (_ref) {
  var _ref2;

  var theme = _ref.theme,
      shadedHeight = _ref.shadedHeight;
  return _ref2 = {}, _defineProperty(_ref2, "&.".concat(classes$8.cell), {
    position: 'relative',
    height: theme.spacing(SPACING_CELL_HEIGHT[dxSchedulerCore.VIEW_TYPES.WEEK]),
    padding: 0,
    boxSizing: 'border-box',
    borderRight: getBorder(theme),
    '&:last-child': {
      borderRight: 'none',
      paddingRight: 0
    },
    'tr:last-child &': {
      borderBottom: 'none'
    },
    '&:hover': {
      backgroundColor: theme.palette.action.hover
    },
    '&:focus': {
      backgroundColor: material.alpha(theme.palette.primary.main, 0.15),
      outline: 0
    }
  }), _defineProperty(_ref2, "&.".concat(classes$8.shadedCell), {
    backgroundColor: material.alpha(theme.palette.action.disabledBackground, 0.04),
    '&:hover': {
      backgroundColor: theme.palette.action.selected
    },
    '&:focus': {
      backgroundColor: material.alpha(theme.palette.primary.main, 0.15),
      outline: 0
    }
  }), _defineProperty(_ref2, "& .".concat(classes$8.shadedPart), {
    backgroundColor: material.alpha(theme.palette.action.disabledBackground, 0.04),
    position: 'absolute',
    height: shadedHeight,
    width: '100%',
    left: 0,
    top: 0,
    '&:hover': {
      backgroundColor: theme.palette.action.hover
    },
    'td:focus &': {
      opacity: 0
    }
  }), _defineProperty(_ref2, "&.".concat(classes$8.brightRightBorder), {
    borderRight: getBrightBorder(theme),
    '&:last-child': {
      borderRight: 'none'
    }
  }), _defineProperty(_ref2, "&.".concat(classes$8.brightBorderBottom), {
    borderBottom: getBrightBorder(theme)
  }), _ref2;
});
var Cell = function Cell(_ref3) {
  var _classNames;

  var className = _ref3.className,
      children = _ref3.children,
      startDate = _ref3.startDate,
      endDate = _ref3.endDate,
      currentTimeIndicatorPosition = _ref3.currentTimeIndicatorPosition,
      CurrentTimeIndicator = _ref3.currentTimeIndicatorComponent,
      isShaded = _ref3.isShaded,
      endOfGroup = _ref3.endOfGroup,
      groupingInfo = _ref3.groupingInfo,
      groupOrientation = _ref3.groupOrientation,
      hasRightBorder = _ref3.hasRightBorder,
      restProps = _objectWithoutProperties(_ref3, _excluded$d);

  var isNow = !!currentTimeIndicatorPosition;
  return /*#__PURE__*/React.createElement(StyledTableCell$1, _extends({
    shadedHeight: currentTimeIndicatorPosition,
    tabIndex: 0,
    className: classNames((_classNames = {}, _defineProperty(_classNames, classes$8.cell, true), _defineProperty(_classNames, classes$8.shadedCell, isShaded && !isNow), _defineProperty(_classNames, classes$8.brightRightBorder, (endOfGroup || hasRightBorder) && groupOrientation === dxSchedulerCore.HORIZONTAL_GROUP_ORIENTATION), _defineProperty(_classNames, classes$8.brightBorderBot