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

Material-UI templates for DevExtreme React Scheduler component

{"version":3,"file":"dx-react-scheduler-material-ui.cjs.cjs","sources":["../src/templates/common/container.jsx","../src/templates/layout.jsx","../src/scheduler.jsx","../src/templates/constants.js","../src/templates/utils.js","../src/templates/layouts/main-layout.jsx","../src/templates/views/common/row.jsx","../src/templates/views/common/day-scale/day-scale-empty-cell.jsx","../src/templates/appointment/container.jsx","../src/templates/views/vertical/time-scale/ticks-layout.jsx","../src/templates/views/vertical/time-scale/layout.jsx","../src/templates/views/vertical/time-scale/label.jsx","../src/templates/views/vertical/time-scale/tick-cell.jsx","../src/templates/views/common/table.jsx","../src/templates/views/common/layout.jsx","../src/templates/views/vertical/time-table/layout.jsx","../src/templates/views/vertical/time-table/cell.jsx","../src/templates/views/common/day-scale/layout.jsx","../src/templates/views/vertical/day-scale/cell.jsx","../src/plugins/day-view.jsx","../src/plugins/week-view.jsx","../src/templates/views/horizontal/time-table/layout.jsx","../src/templates/views/horizontal/time-table/cell.jsx","../src/templates/views/horizontal/day-scale/cell.jsx","../src/plugins/month-view.jsx","../src/templates/appointment/horizontal-appointment.jsx","../src/templates/appointment/vertical-appointment.jsx","../src/templates/appointment/appointment-content.jsx","../src/templates/appointment/appointment.jsx","../src/templates/appointment/split-indicator.jsx","../src/templates/appointment/appointment-container.jsx","../src/plugins/appointments.jsx","../src/templates/toolbar/toolbar.jsx","../src/templates/toolbar/flexible-space.jsx","../src/plugins/toolbar.jsx","../src/templates/date-navigator/root.jsx","../src/templates/date-navigator/overlay.jsx","../src/templates/date-navigator/open-button.jsx","../src/templates/date-navigator/navigation-button.jsx","../src/templates/date-navigator/calendar/table.jsx","../src/templates/date-navigator/calendar/root.jsx","../src/templates/date-navigator/calendar/cell.jsx","../src/templates/date-navigator/calendar/header-cell.jsx","../src/templates/date-navigator/calendar/row.jsx","../src/templates/date-navigator/calendar/navigator.jsx","../src/templates/date-navigator/calendar/text.jsx","../src/plugins/date-navigator.jsx","../src/templates/appointment-tooltip/layout.jsx","../src/templates/appointment-tooltip/header.jsx","../src/templates/appointment-tooltip/content.jsx","../src/templates/appointment-tooltip/command-button.jsx","../src/plugins/appointment-tooltip.jsx","../src/templates/common/select/outlined-select.jsx","../src/templates/view-switcher/switcher.jsx","../src/plugins/view-switcher.jsx","../src/templates/all-day-panel/layout.jsx","../src/templates/all-day-panel/cell.jsx","../src/templates/all-day-panel/title-cell.jsx","../src/templates/all-day-panel/container.jsx","../src/plugins/all-day-panel.jsx","../src/templates/appointment-form/layout.jsx","../src/templates/appointment-form/common/text-editor.jsx","../src/templates/appointment-form/basic/layout.jsx","../src/templates/appointment-form/command/layout.jsx","../src/templates/appointment-form/command/save-button.jsx","../src/templates/appointment-form/command/delete-button.jsx","../src/templates/appointment-form/command/cancel-button.jsx","../src/templates/appointment-form/command/command-button.jsx","../src/templates/appointment-form/overlay.jsx","../src/templates/appointment-form/common/date-editor.jsx","../src/templates/appointment-form/common/label.jsx","../src/templates/appointment-form/common/boolean-editor.jsx","../src/templates/common/select/filled-select.jsx","../src/templates/common/select/select.jsx","../src/templates/appointment-form/recurrence/layouts/interval-editor.jsx","../src/templates/appointment-form/recurrence/layouts/daily.jsx","../src/templates/appointment-form/recurrence/layouts/weekly.jsx","../src/templates/appointment-form/recurrence/layouts/monthly.jsx","../src/templates/appointment-form/recurrence/layouts/yearly.jsx","../src/templates/appointment-form/recurrence/layout.jsx","../src/templates/appointment-form/recurrence/radio-group/end-repeat-editor.jsx","../src/templates/appointment-form/recurrence/radio-group/monthly-editor.jsx","../src/templates/appointment-form/recurrence/radio-group/change-month-editor.jsx","../src/templates/appointment-form/recurrence/radio-group/change-week-number-editor.jsx","../src/templates/appointment-form/recurrence/radio-group/yealy-editor.jsx","../src/templates/appointment-form/recurrence/radio-group/radio-group.jsx","../src/templates/appointment-form/recurrence/weekly-recurrence-selector.jsx","../src/templates/common/overlay-container.jsx","../src/templates/appointment-form/basic/resource-editor.jsx","../src/plugins/appointment-form.jsx","../src/templates/drag-drop/appointments.jsx","../src/templates/drag-drop/container.jsx","../src/templates/drag-drop/resize.jsx","../src/plugins/drag-drop-provider.jsx","../src/templates/today-button/today-button.jsx","../src/plugins/today-button.jsx","../src/templates/common/dialog/overlay.jsx","../src/templates/edit-recurrence-menu/layout.jsx","../src/templates/common/dialog/button.jsx","../src/plugins/edit-recurrence-menu.jsx","../src/templates/confirmation-dialog/layout.jsx","../src/plugins/confirmation-dialog.jsx","../src/templates/current-time-indicator/indicator.jsx","../src/plugins/current-time-indicator.jsx","../src/plugins/resources.jsx","../src/templates/grouping-panel/horizontal-layout.jsx","../src/templates/grouping-panel/vertical-layout.jsx","../src/templates/grouping-panel/cell.jsx","../src/plugins/grouping-panel.jsx"],"sourcesContent":["import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\n\nconst PREFIX = 'Container';\n\nexport const classes = {\n  container: `${PREFIX}-container`,\n};\n\nexport const ContainerBase = ({\n  children, className, ...restProps\n}) => (\n  <div className={classNames(classes.container, className)} {...restProps}>\n    {children}\n  </div>\n);\n\nContainerBase.propTypes = {\n  children: PropTypes.node.isRequired,\n  className: PropTypes.string,\n};\n\nContainerBase.defaultProps = {\n  className: undefined,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material';\nimport { AUTO_HEIGHT } from '@devexpress/dx-scheduler-core';\nimport { ContainerBase, classes } from './common/container';\n\nconst StyledContainerBase = styled(ContainerBase)({\n  [`&.${classes.container}`]: {\n    WebkitOverflowScrolling: 'touch',\n    // NOTE: fix sticky positioning in Safari\n    width: '100%',\n    height: '100%',\n    position: 'relative',\n    display: 'flex',\n    flexDirection: 'column',\n  },\n});\n\nexport const Root = ({\n  height, style, ...restProps\n}) => {\n  const containerStyle = height === AUTO_HEIGHT ? { height: '100%' } : { height: `${height}px` };\n\n  return (\n    <StyledContainerBase\n      style={{ ...containerStyle, ...style }}\n      {...restProps}\n    />\n  );\n};\n\nRoot.propTypes = {\n  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,\n  style: PropTypes.object,\n};\n\nRoot.defaultProps = {\n  style: null,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { Scheduler as SchedulerBase } from '@devexpress/dx-react-scheduler';\nimport { Root } from './templates/layout';\n\nexport const Scheduler = ({ children, ...restProps }) => (\n  <SchedulerBase\n    rootComponent={Root}\n    {...restProps}\n  >\n    {children}\n  </SchedulerBase>\n);\n\nScheduler.Root = Root;\n\nScheduler.propTypes = {\n  children: PropTypes.node.isRequired,\n};\n","import { colors } from '@mui/material';\nimport { VIEW_TYPES } from '@devexpress/dx-scheduler-core';\n\nconst {\n  red, pink, purple, deepPurple, indigo, blue, lightBlue, cyan, teal,\n  green, lightGreen, lime, yellow, amber, orange, deepOrange,\n} = colors;\n\nexport const PRIMARY_COLOR = blue;\nexport const TRANSITIONS_TIME = 400;\nexport const DEFAULT_PALETTE = [\n  red, pink, purple, deepPurple, indigo, blue, lightBlue, cyan, teal,\n  green, lightGreen, lime, yellow, amber, orange, deepOrange,\n];\n\nexport const XS_CELL_WIDTH = 50;\nexport const SMALL_CELL_WIDTH = 65;\nexport const CELL_WIDTH = 100;\n\nexport const XS_LAYOUT_WIDTH = 500;\nexport const SMALL_LAYOUT_WIDTH = 700;\n\nexport const SMALL_LAYOUT_MEDIA_QUERY = `@media (max-width: ${XS_LAYOUT_WIDTH}px)`;\nexport const LAYOUT_MEDIA_QUERY = `@media (max-width: ${SMALL_LAYOUT_WIDTH}px)`;\n\nexport const GROUPING_PANEL_VERTICAL_CELL_WIDTH = 12.5;\n\nexport const DEFAULT_SPACING = 8;\nexport const SPACING_CELL_HEIGHT = {\n  [VIEW_TYPES.MONTH]: 12.5,\n  [VIEW_TYPES.WEEK]: 6,\n  [VIEW_TYPES.DAY]: 6,\n  [VIEW_TYPES.ALL_DAY_PANEL]: 5.75,\n};\nexport const BASIC_CELL_HEIGHT = {\n  [VIEW_TYPES.MONTH]: SPACING_CELL_HEIGHT[VIEW_TYPES.MONTH] * DEFAULT_SPACING,\n  [VIEW_TYPES.WEEK]: SPACING_CELL_HEIGHT[VIEW_TYPES.WEEK] * DEFAULT_SPACING,\n  [VIEW_TYPES.DAY]: SPACING_CELL_HEIGHT[VIEW_TYPES.DAY] * DEFAULT_SPACING,\n  [VIEW_TYPES.ALL_DAY_PANEL]: SPACING_CELL_HEIGHT[VIEW_TYPES.ALL_DAY_PANEL] * DEFAULT_SPACING,\n};\nexport const SPACING_LABEL_HEIGHT = SPACING_CELL_HEIGHT[VIEW_TYPES.WEEK];\nexport const LEFT_PANEL_WIDTH_SPACING = 10;\n","import { darken, alpha, lighten } from '@mui/material';\nimport { PRIMARY_COLOR } from './constants';\n\nexport const getBorder = theme => (`1px solid ${\n  theme.palette.mode === 'light'\n    ? lighten(alpha(theme.palette.divider, 1), 0.88)\n    : darken(alpha(theme.palette.divider, 1), 0.68)\n}`);\n\nexport const getBrightBorder = theme => (`1px solid ${\n  theme.palette.mode === 'light'\n    ? lighten(alpha(theme.palette.divider, 1), 0.72)\n    : darken(alpha(theme.palette.divider, 1), 0.5)\n}`);\n\nexport const cellsMeta = (tableElement) => {\n  const cellElements = Array.from(tableElement.querySelectorAll('td'));\n  return {\n    parentRect: () => tableElement.getBoundingClientRect(),\n    getCellRects: cellElements.map(element => () => element.getBoundingClientRect()),\n  };\n};\n\nexport const scrollingStrategy = (scrollablePart, fixedPartVertical, fixedPartHorizontal) => {\n  const fixedPartVerticalRect = fixedPartVertical.getBoundingClientRect();\n  const fixedPartHorizontalRect = fixedPartHorizontal\n    && fixedPartHorizontal.getBoundingClientRect();\n\n  const changeVerticalScroll = (value) => {\n    // eslint-disable-next-line no-param-reassign\n    scrollablePart.scrollTop += value;\n  };\n  const changeHorizontalScroll = (value) => {\n    // eslint-disable-next-line no-param-reassign\n    scrollablePart.scrollLeft += value;\n  };\n\n  return ({\n    topBoundary: fixedPartVerticalRect.height + fixedPartVerticalRect.top,\n    bottomBoundary: scrollablePart.offsetTop + scrollablePart.clientHeight,\n    fixedTopHeight: fixedPartVerticalRect.height,\n    leftBoundary: fixedPartHorizontalRect\n      ? fixedPartHorizontalRect.width + fixedPartHorizontalRect.left\n      : scrollablePart.offsetLeft,\n    rightBoundary: scrollablePart.offsetLeft + scrollablePart.clientWidth,\n    fixedLeftWidth: fixedPartHorizontalRect?.width,\n    changeVerticalScroll,\n    changeHorizontalScroll,\n  });\n};\n\nexport const ensureColor = (level, color) => (color[level] || PRIMARY_COLOR[level]);\n\nexport const getResourceColor = (resources) => {\n  if (resources && resources.length) {\n    return resources.find(resource => resource.isMain)?.color;\n  } return undefined;\n};\n\nexport const getAppointmentColor = (level, color, defaultColor) => {\n  if (!color) return ensureColor(level, defaultColor);\n  if (typeof color === 'string') return color;\n  return ensureColor(level, color);\n};\n\nexport const getWidthInPixels = (cellsNumber, cellWidth) => `${cellsNumber * cellWidth}px`;\n\nexport const getViewCellKey = (startDate, groups) => {\n  if (!groups) return startDate.toString();\n  return groups.reduce((acc, group) => acc.concat(group.id), startDate.toString());\n};\n\nexport const addCommaAndSpaceToString = string => string && `${string},\\xa0`;\n\nexport const getEmptyCellWidth = (theme, width, calculatedWidth) => (width ? `${width}px` : `calc(${theme.spacing(calculatedWidth)} + 1px)`);\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material';\nimport classNames from 'clsx';\nimport {\n  scrollingStrategy,\n  getBorder,\n  getBrightBorder,\n  getEmptyCellWidth,\n} from '../utils';\nimport { GROUPING_PANEL_VERTICAL_CELL_WIDTH, LEFT_PANEL_WIDTH_SPACING } from '../constants';\n\nconst PREFIX = 'MainLayout';\n\nexport const classes = {\n  container: `${PREFIX}-container`,\n  stickyElement: `${PREFIX}-stickyElement`,\n  header: `${PREFIX}-header`,\n  leftPanel: `${PREFIX}-leftPanel`,\n  ordinaryLeftPanelBorder: `${PREFIX}-ordinaryLeftPanelBorder`,\n  brightLeftPanelBorder: `${PREFIX}-brightLeftPanelBorder`,\n  ordinaryHeaderBorder: `${PREFIX}-ordinaryHeaderBorder`,\n  brightHeaderBorder: `${PREFIX}-brightHeaderBorder`,\n  dayScaleEmptyCell: `${PREFIX}-dayScaleEmptyCell`,\n  flexRow: `${PREFIX}-flexRow`,\n  relativeContainer: `${PREFIX}-relativeContainer`,\n  inlineFlex: `${PREFIX}-inlineFlex`,\n  background: `${PREFIX}-background`,\n};\n\nconst StyledDiv = styled('div', {\n  shouldForwardProp: prop => prop !== 'leftPanelWidth' && prop !== 'calculatedLeftPanelWidth',\n})(({ theme, leftPanelWidth, calculatedLeftPanelWidth }) => ({\n  [`&.${classes.container}`]: {\n    overflowY: 'auto',\n    position: 'relative',\n    tableLayout: 'fixed',\n  },\n  [`& .${classes.stickyElement}`]: {\n    tableLayout: 'fixed',\n    position: 'sticky',\n    overflow: 'visible',\n    background: theme.palette.background.paper,\n  },\n  [`& .${classes.header}`]: {\n    top: 0,\n    zIndex: 2,\n  },\n  [`& .${classes.leftPanel}`]: {\n    left: 0,\n    zIndex: 1,\n    boxSizing: 'border-box',\n  },\n  [`& .${classes.ordinaryLeftPanelBorder}`]: {\n    borderRight: getBorder(theme),\n  },\n  [`& .${classes.brightLeftPanelBorder}`]: {\n    borderRight: getBrightBorder(theme),\n  },\n  [`& .${classes.ordinaryHeaderBorder}`]: {\n    borderBottom: getBorder(theme),\n  },\n  [`& .${classes.brightHeaderBorder}`]: {\n    borderBottom: getBrightBorder(theme),\n  },\n  [`& .${classes.dayScaleEmptyCell}`]: {\n    display: 'flex',\n    alignItems: 'flex-end',\n    width: getEmptyCellWidth(theme, leftPanelWidth, calculatedLeftPanelWidth),\n    minWidth: getEmptyCellWidth(theme, leftPanelWidth, calculatedLeftPanelWidth),\n  },\n  [`& .${classes.flexRow}`]: {\n    display: 'flex',\n    flexDirection: 'row',\n  },\n  [`& .${classes.relativeContainer}`]: {\n    position: 'relative',\n  },\n  [`& .${classes.inlineFlex}`]: {\n    display: 'inline-flex',\n  },\n  [`& .${classes.background}`]: {\n    background: theme.palette.background.paper,\n  },\n}));\n\nexport const MainLayout = React.memo(({\n  timeScaleComponent: TimeScale,\n  dayScaleComponent: DayScale,\n  timeTableComponent: TimeTable,\n  dayScaleEmptyCellComponent: DayScaleEmptyCell,\n  groupingPanelComponent: GroupingPanel,\n  groupingPanelSize,\n  setScrollingStrategy,\n  className,\n  forwardedRef,\n  ...restProps\n}) => {\n  const layoutRef = React.useRef(null);\n  const layoutHeaderRef = React.useRef(null);\n  const leftPanelRef = React.useRef(null);\n\n  const [isLeftBorderSet, setIsLeftBorderSet] = React.useState(false);\n  const [isTopBorderSet, setIsTopBorderSet] = React.useState(false);\n  const [leftPanelWidth, setLeftPanelWidth] = React.useState(0);\n\n  React.useEffect(() => {\n    const leftPanel = leftPanelRef.current;\n    setScrollingStrategy(scrollingStrategy(\n      layoutRef.current, layoutHeaderRef.current, leftPanel,\n    ));\n    // eslint-disable-next-line no-unused-expressions\n    leftPanel && setLeftPanelWidth(leftPanel.getBoundingClientRect().width);\n  }, [layoutRef, layoutHeaderRef, leftPanelRef, setScrollingStrategy, setLeftPanelWidth]);\n\n  const renderTimeScale = !!TimeScale;\n  const renderLeftPanel = renderTimeScale || !!groupingPanelSize;\n\n  const calculatedGroupPanelWidth = groupingPanelSize\n    ? groupingPanelSize * GROUPING_PANEL_VERTICAL_CELL_WIDTH : 0;\n  const calculatedLeftPanelWidth = LEFT_PANEL_WIDTH_SPACING + calculatedGroupPanelWidth;\n\n  const setBorders = React.useCallback((event) => {\n    // eslint-disable-next-line no-bitwise\n    if ((!!event.target.scrollLeft ^ isLeftBorderSet)) {\n      setIsLeftBorderSet(!isLeftBorderSet);\n    }\n    // eslint-disable-next-line no-bitwise\n    if (!!event.target.scrollTop ^ isTopBorderSet) {\n      setIsTopBorderSet(!isTopBorderSet);\n    }\n  }, [isLeftBorderSet, isTopBorderSet]);\n\n  return (\n    <StyledDiv\n      leftPanelWidth={leftPanelWidth}\n      calculatedLeftPanelWidth={calculatedLeftPanelWidth}\n      ref={(node) => {\n        layoutRef.current = node;\n        if (typeof forwardedRef === 'function') {\n          forwardedRef(node);\n        } else if (forwardedRef) {\n          // eslint-disable-next-line no-param-reassign\n          forwardedRef.current = node;\n        }\n      }}\n      className={classNames(classes.container, className)}\n      onScroll={setBorders}\n      {...restProps}\n    >\n      {/* Fix Safari sticky header https://bugs.webkit.org/show_bug.cgi?id=175029 */}\n      <div>\n        <div\n          ref={layoutHeaderRef}\n          className={classNames(classes.stickyElement, classes.header, classes.flexRow)}\n        >\n          <div\n            className={classNames({\n              [classes.background]: true,\n              [classes.inlineFlex]: true,\n              [classes.ordinaryHeaderBorder]: !isTopBorderSet,\n              [classes.brightHeaderBorder]: isTopBorderSet,\n            })}\n          >\n            {renderLeftPanel && (\n              <div\n                className={classNames({\n                  [classes.stickyElement]: true,\n                  [classes.leftPanel]: true,\n                  [classes.dayScaleEmptyCell]: true,\n                  [classes.ordinaryLeftPanelBorder]: !isLeftBorderSet,\n                  [classes.brightLeftPanelBorder]: isLeftBorderSet,\n                })}\n              >\n                <DayScaleEmptyCell />\n              </div>\n            )}\n\n            <div>\n              <DayScale />\n            </div>\n          </div>\n        </div>\n\n        <div className={classes.flexRow}>\n          <div className={classes.inlineFlex}>\n            {renderLeftPanel && (\n              <div\n                ref={leftPanelRef}\n                className={classNames({\n                  [classes.flexRow]: true,\n                  [classes.stickyElement]: true,\n                  [classes.leftPanel]: true,\n                  [classes.ordinaryLeftPanelBorder]: !isLeftBorderSet,\n                  [classes.brightLeftPanelBorder]: isLeftBorderSet,\n                })}\n              >\n                <GroupingPanel />\n                {renderTimeScale && (\n                  <TimeScale />\n                )}\n              </div>\n            )}\n            <div className={classes.relativeContainer}>\n              <TimeTable />\n            </div>\n          </div>\n        </div>\n      </div>\n    </StyledDiv>\n  );\n});\n\nMainLayout.propTypes = {\n  // oneOfType is a workaround because withStyles returns react object\n  timeScaleComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),\n  dayScaleComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,\n  timeTableComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,\n  dayScaleEmptyCellComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,\n  groupingPanelComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),\n  groupingPanelSize: PropTypes.number,\n  setScrollingStrategy: PropTypes.func.isRequired,\n  className: PropTypes.string,\n  forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),\n};\n\nMainLayout.defaultProps = {\n  groupingPanelComponent: () => null,\n  timeScaleComponent: undefined,\n  groupingPanelSize: 0,\n  className: undefined,\n  forwardedRef: undefined,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { TableRow } from '@mui/material';\n\nexport const Row = ({\n  children,\n  ...restProps\n}) => (\n  <TableRow\n    {...restProps}\n  >\n    {children}\n  </TableRow>\n);\n\nRow.propTypes = {\n  children: PropTypes.node,\n};\n\nRow.defaultProps = {\n  children: null,\n};\n","import * as React from 'react';\nimport { styled } from '@mui/material';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\n\nconst PREFIX = 'DayScaleEmptyCell';\n\nexport const classes = {\n  emptyCell: `${PREFIX}-emptyCell`,\n};\n\nconst StyledDiv = styled('div')({\n  [`&.${classes.emptyCell}`]: {\n    height: '100%',\n    width: '100%',\n  },\n});\n\nexport const DayScaleEmptyCell = ({\n  className,\n  children,\n  ...restProps\n}) => (\n  <StyledDiv {...restProps} className={classNames(classes.emptyCell, className)}>\n    {children}\n  </StyledDiv>\n);\n\nDayScaleEmptyCell.propTypes = {\n  className: PropTypes.string,\n  children: PropTypes.node,\n};\n\nDayScaleEmptyCell.defaultProps = {\n  className: undefined,\n  children: undefined,\n};\n","import { styled } from '@mui/material';\nimport { ContainerBase, classes } from '../common/container';\n\nexport const Container = styled(ContainerBase)({\n  [`&.${classes.container}`]: {\n    position: 'absolute',\n    width: '100%',\n    top: 0,\n    left: 0,\n  },\n});\n","import * as React from 'react';\nimport { styled, Table, TableBody } from '@mui/material';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\nimport { HORIZONTAL_GROUP_ORIENTATION, VERTICAL_GROUP_ORIENTATION } from '@devexpress/dx-scheduler-core';\n\nconst PREFIX = 'TicksLayout';\n\nexport const classes = {\n  table: `${PREFIX}-table`,\n};\n\nconst StyledTable = styled(Table)({\n  [`&.${classes.table}`]: {\n    tableLayout: 'fixed',\n    boxSizing: 'border-box',\n  },\n});\n\nexport const TicksLayout = ({\n  cellComponent: Cell,\n  rowComponent: Row,\n  cellsData,\n  groupOrientation,\n  className,\n  groupCount,\n  includeAllDayCell,\n  ...restProps\n}) => {\n  const groupHeight = cellsData.length / groupCount;\n  return (\n    <StyledTable {...restProps} className={classNames(classes.table, className)}>\n      <TableBody>\n        {cellsData.map(([firstDay], index) => (\n          <React.Fragment key={index.toString()}>\n            {index % groupHeight === 0 && includeAllDayCell && (\n              <Row key={(index / groupHeight).toString()}>\n                <Cell\n                  key={`all-day-tick ${index / groupHeight}`}\n                  isAllDay\n                  startDate={firstDay.startDate}\n                  endDate={firstDay.endDate}\n                  endOfGroup={false}\n                  groupingInfo={firstDay.groupingInfo}\n                />\n              </Row>\n            )}\n            <Row key={(firstDay.startDate + index).toString()}>\n              <Cell\n                key={index.toString()}\n                startDate={firstDay.startDate}\n                endDate={firstDay.endDate}\n                endOfGroup={firstDay.endOfGroup && groupOrientation === VERTICAL_GROUP_ORIENTATION}\n                groupingInfo={firstDay.groupingInfo}\n              />\n            </Row>\n          </React.Fragment>\n        ))}\n      </TableBody>\n    </StyledTable>\n  );\n};\n\nTicksLayout.propTypes = {\n  cellsData: PropTypes.arrayOf(Array).isRequired,\n  cellComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,\n  rowComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,\n  groupOrientation: PropTypes.oneOf([HORIZONTAL_GROUP_ORIENTATION, VERTICAL_GROUP_ORIENTATION]),\n  groupCount: PropTypes.number,\n  includeAllDayCell: PropTypes.bool,\n  className: PropTypes.string,\n};\n\nTicksLayout.defaultProps = {\n  className: undefined,\n  groupOrientation: HORIZONTAL_GROUP_ORIENTATION,\n  groupCount: 1,\n  includeAllDayCell: false,\n};\n","import * as React from 'react';\nimport {\n  styled, Table, TableBody, TableRow, TableCell,\n} from '@mui/material';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\nimport {\n  getLabelsForAllGroups, getGroupsLastRow, VIEW_TYPES,\n  HORIZONTAL_GROUP_ORIENTATION, VERTICAL_GROUP_ORIENTATION,\n} from '@devexpress/dx-scheduler-core';\nimport { TicksLayout } from './ticks-layout';\nimport { getBrightBorder } from '../../../utils';\nimport { SPACING_CELL_HEIGHT, LEFT_PANEL_WIDTH_SPACING } from '../../../constants';\n\nconst PREFIX = 'Layout';\n\nexport const classes = {\n  timeScaleContainer: `${PREFIX}-timeScaleContainer`,\n  ticks: `${PREFIX}-ticks`,\n  cell: `${PREFIX}-cell`,\n  verticalCell: `${PREFIX}-verticalCell`,\n  flexRow: `${PREFIX}-flexRow`,\n};\n\nconst StyledDiv = styled('div', {\n  shouldForwardProp: prop => prop !== 'height' && prop !== 'defaultHeight',\n})(({ theme, height, defaultHeight }) => ({\n  [`& .${classes.timeScaleContainer}`]: {\n    width: theme.spacing(LEFT_PANEL_WIDTH_SPACING - 1),\n  },\n  [`& .${classes.ticks}`]: {\n    width: theme.spacing(1),\n  },\n  [`& .${classes.cell}`]: {\n    boxSizing: 'border-box',\n    padding: 0,\n    borderBottom: 'none',\n  },\n  [`& .${classes.verticalCell}`]: {\n    borderBottom: getBrightBorder(theme),\n    'tr:last-child &': {\n      borderBottom: 'none',\n    },\n    height: height ? `${height}px` : theme.spacing(defaultHeight),\n  },\n  [`&.${classes.flexRow}`]: {\n    display: 'flex',\n    flexDirection: 'row',\n  },\n}));\n\nexport const Layout = ({\n  labelComponent: Label,\n  rowComponent,\n  tickCellComponent,\n  allDayTitleComponent: AllDayTitle,\n  cellsData,\n  formatDate,\n  groupOrientation,\n  groups,\n  showAllDayTitle,\n  height,\n  className,\n  ...restProps\n}) => {\n  const groupCount = getGroupsLastRow(groups).length;\n  const cellsCount = cellsData.length / groupCount;\n  const heightWithoutAllDayTitle = SPACING_CELL_HEIGHT[VIEW_TYPES.WEEK] * cellsCount;\n  const defaultHeight = showAllDayTitle\n    ? heightWithoutAllDayTitle + SPACING_CELL_HEIGHT[VIEW_TYPES.ALL_DAY_PANEL]\n    : heightWithoutAllDayTitle;\n  const calculatedHeight = height / groupCount;\n\n  return (\n    <StyledDiv\n      height={calculatedHeight}\n      defaultHeight={defaultHeight}\n      className={classNames(classes.flexRow, className)}\n      {...restProps}\n    >\n      <Table className={classes.timeScaleContainer}>\n        <TableBody>\n          {getLabelsForAllGroups(cellsData, groups, groupOrientation).map(\n            (groupedLabels, groupIndex) => {\n              const firstDataLabel = groupedLabels[0];\n              const lastDataLabel = groupedLabels[groupedLabels.length - 1];\n              return (\n                <TableRow key={groupIndex.toString()}>\n                  <TableCell\n                    className={classNames({\n                      [classes.cell]: true,\n                      [classes.verticalCell]: groupOrientation === VERTICAL_GROUP_ORIENTATION,\n                    })}\n                  >\n                    <AllDayTitle fixedHeight />\n                    <Label\n                      key={firstDataLabel.startDate}\n                      groupingInfo={firstDataLabel.groupingInfo}\n                    />\n                    {groupedLabels.map((label, index) => (\n                      index !== cellsData.length - 1 && (\n                        <Label\n                          time={label.endDate}\n                          formatDate={formatDate}\n                          key={label.key}\n                          groupingInfo={label.groupingInfo}\n                        />\n                      )\n                    ))}\n                    <Label\n                      key={lastDataLabel.endDate}\n                      groupingInfo={lastDataLabel.groupingInfo}\n                    />\n                  </TableCell>\n                </TableRow>\n              );\n            },\n          )}\n        </TableBody>\n      </Table>\n      <TicksLayout\n        rowComponent={rowComponent}\n        cellComponent={tickCellComponent}\n        cellsData={cellsData}\n        className={classes.ticks}\n        groupOrientation={groupOrientation}\n        groupCount={groupCount}\n        includeAllDayCell={showAllDayTitle}\n      />\n    </StyledDiv>\n  );\n};\n\nLayout.propTypes = {\n  cellsData: PropTypes.arrayOf(Array).isRequired,\n  labelComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,\n  rowComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,\n  allDayTitleComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),\n  tickCellComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,\n  formatDate: PropTypes.func.isRequired,\n  groups: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.object)),\n  groupOrientation: PropTypes.oneOf([HORIZONTAL_GROUP_ORIENTATION, VERTICAL_GROUP_ORIENTATION]),\n  showAllDayTitle: PropTypes.bool,\n  height: PropTypes.number,\n  className: PropTypes.string,\n};\n\nLayout.defaultProps = {\n  groups: [[{}]],\n  groupOrientation: HORIZONTAL_GROUP_ORIENTATION,\n  allDayTitleComponent: () => null,\n  showAllDayTitle: false,\n  height: 0,\n  className: undefined,\n};\n","import * as React from 'react';\nimport { styled } from '@mui/material';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\nimport { HOUR_MINUTE_OPTIONS } from '@devexpress/dx-scheduler-core';\nimport { SPACING_LABEL_HEIGHT } from '../../../constants';\n\nconst PREFIX = 'Label';\n\nexport const classes = {\n  label: `${PREFIX}-label`,\n  text: `${PREFIX}-text`,\n  emptyLabel: `${PREFIX}-emptyLabel`,\n};\n\nconst StyledDiv = styled('div')(({ theme }) => ({\n  [`&.${classes.label}`]: {\n    userSelect: 'none',\n    border: 0,\n    height: theme.spacing(SPACING_LABEL_HEIGHT),\n    lineHeight: theme.spacing(SPACING_LABEL_HEIGHT),\n    padding: 0,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    textAlign: 'right',\n    paddingLeft: theme.spacing(0.25),\n    paddingRight: theme.spacing(1),\n  },\n  [`& .${classes.text}`]: {\n    ...theme.typography.caption,\n    fontSize: '0.7rem',\n    whiteSpace: 'nowrap',\n    color: theme.palette.text.secondary,\n  },\n  [`&.${classes.emptyLabel}`]: {\n    height: theme.spacing(SPACING_LABEL_HEIGHT / 2),\n    '&:last-child': {\n      height: `calc(${theme.spacing(SPACING_LABEL_HEIGHT / 2)} - 1px)`,\n    },\n  },\n}));\n\nexport const Label = ({\n  className,\n  time,\n  formatDate,\n  groupingInfo,\n  endOfGroup,\n  ...restProps\n}) => (\n  <StyledDiv\n    className={classNames({\n      [classes.label]: true,\n      [classes.emptyLabel]: !time,\n    }, className)}\n    {...restProps}\n  >\n    {time && (\n      <span className={classes.text}>\n        {formatDate(time, HOUR_MINUTE_OPTIONS)}\n      </span>\n    )}\n\n  </StyledDiv>\n);\n\nLabel.propTypes = {\n  formatDate: PropTypes.func,\n  time: PropTypes.instanceOf(Date),\n  groupingInfo: PropTypes.arrayOf(PropTypes.object),\n  endOfGroup: PropTypes.bool,\n  className: PropTypes.string,\n};\n\nLabel.defaultProps = {\n  className: undefined,\n  time: undefined,\n  formatDate: () => undefined,\n  groupingInfo: undefined,\n  endOfGroup: false,\n};\n","import * as React from 'react';\nimport { styled, TableCell } from '@mui/material';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\nimport { VIEW_TYPES } from '@devexpress/dx-scheduler-core';\nimport { getBorder, getBrightBorder } from '../../../utils';\nimport { SPACING_CELL_HEIGHT } from '../../../constants';\n\nconst PREFIX = 'TickCell';\n\nexport const classes = {\n  cell: `${PREFIX}-cell`,\n  brightBottomBorder: `${PREFIX}-brightBottomBorder`,\n  allDayCell: `${PREFIX}-allDayCell`,\n};\n\nconst StyledTableCell = styled(TableCell)(({ theme }) => ({\n  [`&.${classes.cell}`]: {\n    height: theme.spacing(SPACING_CELL_HEIGHT[VIEW_TYPES.WEEK]),\n    padding: 0,\n    boxSizing: 'border-box',\n    borderBottom: getBorder(theme),\n    'tr:last-child &': {\n      borderBottom: 'none',\n    },\n  },\n  [`&.${classes.brightBottomBorder}`]: {\n    borderBottom: getBrightBorder(theme),\n  },\n  [`&.${classes.allDayCell}`]: {\n    height: theme.spacing(SPACING_CELL_HEIGHT[VIEW_TYPES.ALL_DAY_PANEL]),\n  },\n}));\n\nexport const TickCell = ({\n  className,\n  startDate,\n  endDate,\n  endOfGroup,\n  groupingInfo,\n  isAllDay,\n  ...restProps\n}) => (\n  <StyledTableCell\n    className={classNames({\n      [classes.cell]: true,\n      [classes.brightBottomBorder]: endOfGroup,\n      [classes.allDayCell]: isAllDay,\n    }, className)}\n    {...restProps}\n  />\n);\n\nTickCell.propTypes = {\n  startDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),\n  endDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),\n  endOfGroup: PropTypes.bool,\n  groupingInfo: PropTypes.arrayOf(PropTypes.object),\n  isAllDay: PropTypes.bool,\n  className: PropTypes.string,\n};\n\nTickCell.defaultProps = {\n  className: undefined,\n  startDate: undefined,\n  endDate: undefined,\n  endOfGroup: false,\n  groupingInfo: undefined,\n  isAllDay: false,\n};\n","import * as React from 'react';\nimport { styled, Table as TableMUI, TableBody } from '@mui/material';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\nimport { getWidthInPixels } from '../../utils';\nimport {\n  CELL_WIDTH, SMALL_CELL_WIDTH,\n  XS_CELL_WIDTH, SMALL_LAYOUT_MEDIA_QUERY, LAYOUT_MEDIA_QUERY,\n} from '../../constants';\n\nconst PREFIX = 'Table';\n\nconst classes = {\n  table: `${PREFIX}-table`,\n};\n\nconst StyledTableMUI = styled(TableMUI, { shouldForwardProp: prop => prop !== 'cellsNumber' })(({ cellsNumber }) => ({\n  [`&.${classes.table}`]: {\n    tableLayout: 'fixed',\n    minWidth: getWidthInPixels(cellsNumber, CELL_WIDTH),\n    width: '100%',\n    [`${LAYOUT_MEDIA_QUERY}`]: {\n      minWidth: getWidthInPixels(cellsNumber, SMALL_CELL_WIDTH),\n    },\n    [`${SMALL_LAYOUT_MEDIA_QUERY}`]: {\n      minWidth: getWidthInPixels(cellsNumber, XS_CELL_WIDTH),\n    },\n  },\n}));\n\n/* This component is a workaround to the bug when appointments flicker after being drag-dropped.\n  It is used to define the minimum width of a parent layout depending on the number of cells.\n  It's impossible to do it in the layout because appointments begin to flicker when using\n  functional component instead of PureComponent (and to define the minimum width it is necessary\n  to use material-ui's makeStyles).\n*/\nexport const Table = React.forwardRef(({\n  className,\n  cellsNumber,\n  children,\n  ...restProps\n}, ref) => (\n  <StyledTableMUI\n    cellsNumber={cellsNumber}\n    ref={ref}\n    className={classNames(classes.table, className)}\n    {...restProps}\n  >\n    <TableBody>\n      {children}\n    </TableBody>\n  </StyledTableMUI>\n));\n\nTable.propTypes = {\n  cellsNumber: PropTypes.number.isRequired,\n  className: PropTypes.string,\n  children: PropTypes.node.isRequired,\n};\n\nTable.defaultProps = {\n  className: undefined,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { Table } from './table';\nimport { cellsMeta } from '../../utils';\n\nexport const Layout = React.memo(({\n  setCellElementsMeta,\n  cellsNumber,\n  children,\n  ...restProps\n}) => {\n  const tableRef = React.useRef(null);\n\n  React.useEffect(() => {\n    const tableElement = tableRef.current;\n    setCellElementsMeta(cellsMeta(tableElement));\n  });\n\n  return (\n    <Table\n      ref={tableRef}\n      cellsNumber={cellsNumber}\n      {...restProps}\n    >\n      {children}\n    </Table>\n  );\n});\n\nLayout.propTypes = {\n  setCellElementsMeta: PropTypes.func.isRequired,\n  cellsNumber: PropTypes.number.isRequired,\n  children: PropTypes.node.isRequired,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { prepareVerticalViewCellsData } from '@devexpress/dx-scheduler-core';\nimport { Layout as LayoutBase } from '../../common/layout';\nimport { getViewCellKey } from '../../../utils';\n\nconst renderCell = (\n  Cell, startDate, endDate, endOfGroup, groupingInfo, groupOrientation,\n) => (\n  <Cell\n    key={getViewCellKey(startDate, groupingInfo)}\n    startDate={startDate}\n    endDate={endDate}\n    endOfGroup={endOfGroup}\n    hasRightBorder={endOfGroup}\n    groupingInfo={groupingInfo}\n    groupOrientation={groupOrientation}\n  />\n);\n\nexport const Layout = React.memo(({\n  setCellElementsMeta,\n  cellComponent,\n  allDayCellComponent,\n  rowComponent: Row,\n  allDayRowComponent: AllDayRow,\n  cellsData,\n  allDayCellsData,\n  formatDate,\n  ...restProps\n}) => (\n  <LayoutBase\n    setCellElementsMeta={setCellElementsMeta}\n    cellsNumber={cellsData[0].length}\n    {...restProps}\n  >\n    {prepareVerticalViewCellsData(cellsData, allDayCellsData).map((group, groupIndex) => (\n      <React.Fragment key={groupIndex.toString()}>\n        {allDayCellsData && (\n          <AllDayRow>\n            {allDayCellsData[groupIndex].map(({\n              startDate, endDate, endOfGroup, groupingInfo, groupOrientation,\n            }) => renderCell(\n              allDayCellComponent, startDate, endDate,\n              endOfGroup, groupingInfo, groupOrientation,\n            ))}\n          </AllDayRow>\n        )}\n        {group.map((days, index) => (\n          <Row key={index.toString()}>\n            {days.map(({\n              startDate, endDate, groupingInfo, endOfGroup, groupOrientation,\n            }) => renderCell(\n              cellComponent, startDate, endDate,\n              endOfGroup, groupingInfo, groupOrientation,\n            ))}\n          </Row>\n        ))}\n      </React.Fragment>\n    ))}\n  </LayoutBase>\n));\n\nLayout.propTypes = {\n  cellsData: PropTypes.arrayOf(Array).isRequired,\n  allDayCellsData: PropTypes.arrayOf(Array),\n  cellComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,\n  allDayCellComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),\n  rowComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,\n  allDayRowComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),\n  formatDate: PropTypes.func.isRequired,\n  setCellElementsMeta: PropTypes.func.isRequired,\n};\n\nLayout.defaultProps = {\n  allDayCellComponent: () => null,\n  allDayRowComponent: () => null,\n  allDayCellsData: undefined,\n};\n","import * as React from 'react';\nimport { styled, alpha, TableCell } from '@mui/material';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\nimport { HORIZONTAL_GROUP_ORIENTATION, VERTICAL_GROUP_ORIENTATION, VIEW_TYPES } from '@devexpress/dx-scheduler-core';\nimport { getBorder, getBrightBorder } from '../../../utils';\nimport { SPACING_CELL_HEIGHT } from '../../../constants';\n\nconst PREFIX = 'Cell';\n\nexport const classes = {\n  cell: `${PREFIX}-cell`,\n  shadedCell: `${PREFIX}-shadedCell`,\n  shadedPart: `${PREFIX}-shadedPart`,\n  brightRightBorder: `${PREFIX}-brightRightBorder`,\n  brightBorderBottom: `${PREFIX}-brightBorderBottom`,\n};\n\nconst StyledTableCell = styled(TableCell, {\n  shouldForwardProp: prop => prop !== 'shadedHeight',\n})(({ theme, shadedHeight }) => ({\n  [`&.${classes.cell}`]: {\n    position: 'relative',\n    height: theme.spacing(SPACING_CELL_HEIGHT[VIEW_TYPES.WEEK]),\n    padding: 0,\n    boxSizing: 'border-box',\n    borderRight: getBorder(theme),\n    '&:last-child': {\n      borderRight: 'none',\n      paddingRight: 0,\n    },\n    'tr:last-child &': {\n      borderBottom: 'none',\n    },\n    '&:hover': {\n      backgroundColor: theme.palette.action.hover,\n    },\n    '&:focus': {\n      backgroundColor: alpha(theme.palette.primary.main, 0.15),\n      outline: 0,\n    },\n  },\n  [`&.${classes.shadedCell}`]: {\n    backgroundColor: alpha(theme.palette.action.disabledBackground, 0.04),\n    '&:hover': {\n      backgroundColor: theme.palette.action.selected,\n    },\n    '&:focus': {\n      backgroundColor: alpha(theme.palette.primary.main, 0.15),\n      outline: 0,\n    },\n  },\n  [`& .${classes.shadedPart}`]: {\n    backgroundColor: alpha(theme.palette.action.disabledBackground, 0.04),\n    position: 'absolute',\n    height: shadedHeight,\n    width: '100%',\n    left: 0,\n    top: 0,\n    '&:hover': {\n      backgroundColor: theme.palette.action.hover,\n    },\n    'td:focus &': {\n      opacity: 0,\n    },\n  },\n  [`&.${classes.brightRightBorder}`]: {\n    borderRight: getBrightBorder(theme),\n    '&:last-child': {\n      borderRight: 'none',\n    },\n  },\n  [`&.${classes.brightBorderBottom}`]: {\n    borderBottom: getBrightBorder(theme),\n  },\n}));\n\nexport const Cell = ({\n  className,\n  children,\n  startDate,\n  endDate,\n  currentTimeIndicatorPosition,\n  currentTimeIndicatorComponent: CurrentTimeIndicator,\n  isShaded,\n  endOfGroup,\n  groupingInfo,\n  groupOrientation,\n  // @deprecated\n  hasRightBorder,\n  ...restProps\n}) => {\n  const isNow = !!currentTimeIndicatorPosition;\n  return (\n    <StyledTableCell\n      shadedHeight={currentTimeIndicatorPosition}\n      tabIndex={0}\n      className={classNames({\n        [classes.cell]: true,\n        [classes.shadedCell]: isShaded && !isNow,\n        [classes.brightRightBorder]: (endOfGroup || hasRightBorder)\n          && groupOrientation === HORIZONTAL_GROUP_ORIENTATION,\n        [classes.brightBorderBottom]: endOfGroup\n          && groupOrientation === VERTICAL_GROUP_ORIENTATION,\n      }, className)}\n      {...restProps}\n    >\n      {isNow && isShaded && (\n        <div className={classes.shadedPart} />\n      )}\n      {isNow && (\n        <CurrentTimeIndicator\n          top={currentTimeIndicatorPosition}\n        />\n      )}\n      {children}\n    </StyledTableCell>\n  );\n};\n\nCell.propTypes = {\n  startDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),\n  endDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),\n  children: PropTypes.node,\n  className: PropTypes.string,\n  currentTimeIndicatorPosition: PropTypes.string,\n  currentTimeIndicatorComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),\n  isShaded: PropTypes.bool,\n  endOfGroup: PropTypes.bool,\n  hasRightBorder: PropTypes.bool,\n  groupingInfo: PropTypes.arrayOf(PropTypes.object),\n  groupOrientation: PropTypes.oneOf([HORIZONTAL_GROUP_ORIENTATION, VERTICAL_GROUP_ORIENTATION]),\n};\n\nCell.defaultProps = {\n  children: null,\n  className: undefined,\n  startDate: new Date(),\n  endDate: new Date(),\n  currentTimeIndicatorPosition: undefined,\n  currentTimeIndicatorComponent: () => null,\n  isShaded: false,\n  endOfGroup: false,\n  hasRightBorder: false,\n  groupingInfo: undefined,\n  groupOrientation: HORIZONTAL_GROUP_ORIENTATION,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { getDayScaleCells } from '@devexpress/dx-scheduler-core';\nimport { Table } from '../table';\n\nexport const Layout = React.memo(({\n  cellComponent: Cell,\n  rowComponent: Row,\n  groupingPanelComponent: GroupingPanel,\n  cellsData,\n  formatDate,\n  groupedByDate,\n  ...restProps\n}) => (\n  <Table\n    cellsNumber={cellsData[0].length}\n    {...restProps}\n  >\n    {!groupedByDate && (\n      <GroupingPanel />\n    )}\n    <Row>\n      {getDayScaleCells(cellsData, groupedByDate).map(({\n        startDate, endDate, today, key,\n        endOfGroup, groupingInfo, colSpan,\n      }) => (\n        <Cell\n          key={key}\n          startDate={startDate}\n          endDate={endDate}\n          today={today}\n          formatDate={formatDate}\n          endOfGroup={endOfGroup}\n          hasRightBorder={endOfGroup}\n          groupingInfo={groupingInfo}\n          colSpan={colSpan}\n        />\n      ))}\n    </Row>\n    {groupedByDate && (\n      <GroupingPanel />\n    )}\n  </Table>\n));\n\nLayout.propTypes = {\n  cellsData: PropTypes.arrayOf(Array).isRequired,\n  cellComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,\n  rowComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,\n  groupingPanelComponent: PropTypes.func,\n  formatDate: PropTypes.func.isRequired,\n  groupedByDate: PropTypes.bool,\n};\nLayout.defaultProps = {\n  groupingPanelComponent: () => null,\n  groupedByDate: false,\n};\n","import * as React from 'react';\nimport { styled, TableCell } from '@mui/material';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\nimport { WEEK_DAY_OPTIONS, DAY_OPTIONS } from '@devexpress/dx-scheduler-core';\nimport { getBrightBorder } from '../../../utils';\nimport { LAYOUT_MEDIA_QUERY } from '../../../constants';\n\nconst PREFIX = 'Cell';\n\nexport const classes = {\n  cell: `${PREFIX}-cell`,\n  dayOfWeek: `${PREFIX}-dayOfWeek`,\n  dayOfMonth: `${PREFIX}-dayOfMonth`,\n  highlightedText: `${PREFIX}-highlightedText`,\n  dayView: `${PREFIX}-dayView`,\n  brightRightBorder: `${PREFIX}-brightRightBorder`,\n};\n\nconst StyledTableCell = styled(TableCell)(({ theme }) => ({\n  [`&.${classes.cell}`]: {\n    userSelect: 'none',\n    paddingBottom: theme.spacing(0.5),\n    textAlign: 'center',\n    borderBottom: 'none',\n    paddingRight: 0,\n    paddingLeft: 0,\n    boxSizing: 'border-box',\n    [`${LAYOUT_MEDIA_QUERY}`]: {\n      padding: theme.spacing(1),\n      paddingBottom: 0,\n    },\n    '&:only-child': {\n      textAlign: 'left',\n      paddingLeft: theme.spacing(2),\n    },\n    paddingTop: theme.spacing(0.5),\n  },\n  [`& .${classes.dayOfWeek}`]: {\n    ...theme.typography.caption,\n    margin: 0,\n    color: theme.palette.text.secondary,\n    lineHeight: 1.17,\n  },\n  [`& .${classes.dayOfMonth}`]: {\n    ...theme.typography.h4,\n    [`${LAYOUT_MEDIA_QUERY}`]: {\n      ...theme.typography.h6,\n    },\n    color: theme.palette.text.secondary,\n    lineHeight: 1.2,\n    fontSize: '1.8rem',\n  },\n  [`& .${classes.highlightedText}`]: {\n    color: theme.palette.primary.main,\n    fontWeight: 'bold',\n  },\n  [`& .${classes.dayView}`]: {\n    'td:only-child &': {\n      textAlign: 'center',\n      width: 'auto',\n      display: 'inline-block',\n    },\n  },\n  [`&.${classes.brightRightBorder}`]: {\n    borderRight: getBrightBorder(theme),\n    '&:last-child': {\n      borderRight: 'none',\n    },\n  },\n}));\n\nexport const Cell = ({\n  className,\n  startDate,\n  endDate,\n  today,\n  formatDate,\n  endOfGroup,\n  groupingInfo,\n  // @deprecated\n  hasRightBorder,\n  ...restProps\n}) => (\n  <StyledTableCell\n    className={classNames({\n      [classes.cell]: true,\n      [classes.brightRightBorder]: endOfGroup || hasRightBorder,\n    }, className)}\n    {...restProps}\n  >\n    <div className={classes.dayView}>\n      <p\n        className={classNames({\n          [classes.dayOfWeek]: true,\n          [classes.highlightedText]: today,\n        })}\n      >\n        {formatDate(startDate, WEEK_DAY_OPTIONS)}\n      </p>\n      <div\n        className={classNames({\n          [classes.dayOfMonth]: true,\n          [classes.highlightedText]: today,\n        })}\n      >\n        {formatDate(startDate, DAY_OPTIONS)}\n      </div>\n    </div>\n  </StyledTableCell>\n);\n\nCell.propTypes = {\n  formatDate: PropTypes.func.isRequired,\n  startDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]).isRequired,\n  endDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),\n  className: PropTypes.string,\n  today: PropTypes.bool,\n  endOfGroup: PropTypes.bool,\n  hasRightBorder: PropTypes.bool,\n  groupingInfo: PropTypes.arrayOf(PropTypes.object),\n};\n\nCell.defaultProps = {\n  className: undefined,\n  endDate: undefined,\n  today: false,\n  endOfGroup: false,\n  hasRightBorder: false,\n  groupingInfo: undefined,\n};\n","import { withComponents } from '@devexpress/dx-react-core';\nimport { DayView as DayViewBase } from '@devexpress/dx-react-scheduler';\nimport { MainLayout as Layout } from '../templates/layouts/main-layout';\n\nimport { Row } from '../templates/views/common/row';\nimport { DayScaleEmptyCell } from '../templates/views/common/day-scale/day-scale-empty-cell';\nimport { Container as AppointmentLayer } from '../templates/appointment/container';\n\nimport { Layout as TimeScaleLayout } from '../templates/views/vertical/time-scale/layout';\nimport { Label as TimeScaleLabel } from '../templates/views/vertical/time-scale/label';\nimport { TickCell as TimeScaleTickCell } from '../templates/views/vertical/time-scale/tick-cell';\n\nimport { Layout as TimeTableLayout } from '../templates/views/vertical/time-table/layout';\nimport { Cell as TimeTableCell } from '../templates/views/vertical/time-table/cell';\n\nimport { Layout as DayScaleLayout } from '../templates/views/common/day-scale/layout';\nimport { Cell as DayScaleCell } from '../templates/views/vertical/day-scale/cell';\n\nexport const DayView = withComponents({\n  Layout,\n  AppointmentLayer,\n  DayScaleEmptyCell,\n  TimeScaleLayout,\n  TimeScaleLabel,\n  TimeScaleTickCell,\n  TimeScaleTicksRow: Row,\n  DayScaleLayout,\n  DayScaleCell,\n  DayScaleRow: Row,\n  TimeTableLayout,\n  TimeTableCell,\n  TimeTableRow: Row,\n})(DayViewBase);\n","import { withComponents } from '@devexpress/dx-react-core';\nimport { WeekView as WeekViewBase } from '@devexpress/dx-react-scheduler';\nimport { MainLayout as Layout } from '../templates/layouts/main-layout';\n\nimport { Row } from '../templates/views/common/row';\nimport { DayScaleEmptyCell } from '../templates/views/common/day-scale/day-scale-empty-cell';\nimport { Container as AppointmentLayer } from '../templates/appointment/container';\n\nimport { Layout as TimeScaleLayout } from '../templates/views/vertical/time-scale/layout';\nimport { Label as TimeScaleLabel } from '../templates/views/vertical/time-scale/label';\