@mantine/schedule 9.1.0 → 9.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/components/DayView/DayView.cjs +3 -0
- package/cjs/components/DayView/DayView.cjs.map +1 -1
- package/cjs/components/MonthView/MonthView.cjs +4 -0
- package/cjs/components/MonthView/MonthView.cjs.map +1 -1
- package/cjs/components/MoreEvents/MoreEvents.cjs +3 -1
- package/cjs/components/MoreEvents/MoreEvents.cjs.map +1 -1
- package/cjs/components/ScheduleHeader/HeaderControl/HeaderControl.cjs +7 -5
- package/cjs/components/ScheduleHeader/HeaderControl/HeaderControl.cjs.map +1 -1
- package/cjs/components/ScheduleHeader/MonthYearSelect/MonthYearSelect.cjs +6 -4
- package/cjs/components/ScheduleHeader/MonthYearSelect/MonthYearSelect.cjs.map +1 -1
- package/cjs/components/ScheduleHeader/ScheduleHeader.cjs +22 -17
- package/cjs/components/ScheduleHeader/ScheduleHeader.cjs.map +1 -1
- package/cjs/components/ScheduleHeader/ScheduleHeaderBase.cjs +1 -0
- package/cjs/components/ScheduleHeader/ScheduleHeaderBase.cjs.map +1 -1
- package/cjs/components/ScheduleHeader/ScheduleHeaderContext.cjs +20 -0
- package/cjs/components/ScheduleHeader/ScheduleHeaderContext.cjs.map +1 -0
- package/cjs/components/ScheduleHeader/ViewSelect/ViewSelect.cjs +5 -3
- package/cjs/components/ScheduleHeader/ViewSelect/ViewSelect.cjs.map +1 -1
- package/esm/components/DayView/DayView.mjs +3 -0
- package/esm/components/DayView/DayView.mjs.map +1 -1
- package/esm/components/MonthView/MonthView.mjs +4 -0
- package/esm/components/MonthView/MonthView.mjs.map +1 -1
- package/esm/components/MoreEvents/MoreEvents.mjs +3 -1
- package/esm/components/MoreEvents/MoreEvents.mjs.map +1 -1
- package/esm/components/ScheduleHeader/HeaderControl/HeaderControl.mjs +7 -5
- package/esm/components/ScheduleHeader/HeaderControl/HeaderControl.mjs.map +1 -1
- package/esm/components/ScheduleHeader/MonthYearSelect/MonthYearSelect.mjs +6 -4
- package/esm/components/ScheduleHeader/MonthYearSelect/MonthYearSelect.mjs.map +1 -1
- package/esm/components/ScheduleHeader/ScheduleHeader.mjs +22 -17
- package/esm/components/ScheduleHeader/ScheduleHeader.mjs.map +1 -1
- package/esm/components/ScheduleHeader/ScheduleHeaderBase.mjs +1 -0
- package/esm/components/ScheduleHeader/ScheduleHeaderBase.mjs.map +1 -1
- package/esm/components/ScheduleHeader/ScheduleHeaderContext.mjs +18 -0
- package/esm/components/ScheduleHeader/ScheduleHeaderContext.mjs.map +1 -0
- package/esm/components/ScheduleHeader/ViewSelect/ViewSelect.mjs +5 -3
- package/esm/components/ScheduleHeader/ViewSelect/ViewSelect.mjs.map +1 -1
- package/lib/components/MoreEvents/MoreEvents.d.ts +5 -1
- package/lib/components/ScheduleHeader/ScheduleHeader.d.ts +3 -0
- package/lib/components/ScheduleHeader/ScheduleHeaderContext.d.ts +3 -0
- package/package.json +4 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MonthYearSelect.cjs","names":["getYearsList","UnstyledButton","getLabel","getMonthsList","Popover","HeaderControl","formatDate","classes"],"sources":["../../../../src/components/ScheduleHeader/MonthYearSelect/MonthYearSelect.tsx"],"sourcesContent":["import {\n BoxProps,\n createScopedKeydownHandler,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n factory,\n Factory,\n getRadius,\n MantineRadius,\n Popover,\n PopoverProps,\n StylesApiProps,\n UnstyledButton,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport { useDatesContext } from '@mantine/dates';\nimport { useDisclosure } from '@mantine/hooks';\nimport { getLabel, ScheduleLabelsOverride } from '../../../labels';\nimport { DateLabelFormat } from '../../../types';\nimport { formatDate, getMonthsList, getYearsList } from '../../../utils';\nimport { HeaderControl } from '../HeaderControl/HeaderControl';\nimport classes from './MonthYearSelect.module.css';\n\nexport type MonthYearSelectStylesNames =\n | 'monthYearSelectTarget'\n | 'monthYearSelectDropdown'\n | 'monthYearSelectControl'\n | 'monthYearSelectList'\n | 'monthYearSelectLabel';\n\nexport type MonthYearSelectCssVariables = {\n monthYearSelectDropdown: '--control-radius';\n};\n\nexport interface MonthYearSelectProps\n extends BoxProps, StylesApiProps<MonthYearSelectFactory>, ElementProps<'button'> {\n __staticSelector?: string;\n\n /** Locale passed down to dayjs, overrides value defined on `DatesProvider` */\n locale?: string;\n\n /** Props passed down to the underlying Popover component */\n popoverProps?: PopoverProps;\n\n /** Start year for year selection, calculated from the current date by default */\n startYear?: number;\n\n /** End year for year selection, calculated from the current date by default */\n endYear?: number;\n\n /** Current year value (e.g. `2025`) */\n yearValue?: number;\n\n /** Current month value (0-11) */\n monthValue?: number;\n\n /** Called with year value (e.g. `2025`) when year is selected in the dropdown */\n onYearChange?: (year: number) => void;\n\n /** Called with month value (0-11) when month is selected in the dropdown */\n onMonthChange?: (month: number) => void;\n\n /** Format for displaying months in the dropdown, dayjs format or custom formatter function @default 'MMM' */\n monthsListFormat?: DateLabelFormat;\n\n /** Format for displaying month label in the control, dayjs format @default 'MMMM YYYY' */\n labelFormat?: DateLabelFormat;\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** Props passed down to year controls */\n getYearControlProps?: (year: number) => React.ComponentProps<'button'> & DataAttributes;\n\n /** Props passed down to month controls */\n getMonthControlProps?: (month: number) => React.ComponentProps<'button'> & DataAttributes;\n\n /** If set to false, months are not displayed in the dropdown @default true */\n withMonths?: boolean;\n\n /** Labels override */\n labels?: ScheduleLabelsOverride;\n}\n\nexport type MonthYearSelectFactory = Factory<{\n props: MonthYearSelectProps;\n ref: HTMLButtonElement;\n stylesNames: MonthYearSelectStylesNames;\n vars: MonthYearSelectCssVariables;\n}>;\n\nconst defaultProps = {\n __staticSelector: 'MonthYearSelect',\n withMonths: true,\n} satisfies Partial<MonthYearSelectProps>;\n\nconst varsResolver = createVarsResolver<MonthYearSelectFactory>((_theme, { radius }) => ({\n monthYearSelectDropdown: {\n '--control-radius': radius === undefined ? undefined : getRadius(radius),\n },\n}));\n\nexport const MonthYearSelect = factory<MonthYearSelectFactory>((_props) => {\n const props = useProps('MonthYearSelect', defaultProps, _props);\n const {\n __staticSelector,\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n attributes,\n popoverProps,\n startYear,\n endYear,\n onYearChange,\n onMonthChange,\n locale,\n monthsListFormat,\n monthValue,\n yearValue,\n labelFormat,\n radius,\n getMonthControlProps,\n getYearControlProps,\n withMonths,\n id,\n labels,\n ...others\n } = props;\n\n const getStyles = useStyles<MonthYearSelectFactory>({\n name: __staticSelector,\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n rootSelector: 'monthYearSelectTarget',\n });\n\n const [opened, handlers] = useDisclosure(false);\n\n const today = new Date();\n const ctx = useDatesContext();\n const _startYear = startYear ?? today.getFullYear() - 5;\n const _endYear = endYear ?? today.getFullYear() + 5;\n const hasActiveYear = yearValue !== undefined && yearValue >= _startYear && yearValue <= _endYear;\n\n const years = getYearsList({ startYear: _startYear, endYear: _endYear }).map((year, index) => {\n const controlProps = getYearControlProps?.(year);\n return (\n <UnstyledButton\n key={year}\n onClick={() => {\n onYearChange?.(year);\n if (!withMonths) {\n handlers.close();\n }\n }}\n mod={{ type: 'year', active: year === yearValue }}\n aria-label={`${getLabel('selectYear', labels)} ${year}`}\n tabIndex={hasActiveYear ? (year === yearValue ? 0 : -1) : index === 0 ? 0 : -1}\n {...controlProps}\n onKeyDown={createScopedKeydownHandler({\n siblingSelector: '[data-type=\"year\"]:not(:disabled)',\n parentSelector: '[data-list]',\n activateOnFocus: false,\n loop: true,\n orientation: 'vertical',\n onKeyDown: controlProps?.onKeyDown,\n })}\n {...getStyles('monthYearSelectControl', {\n className: controlProps?.className,\n style: controlProps?.style,\n })}\n >\n {year}\n </UnstyledButton>\n );\n });\n\n const months = withMonths\n ? getMonthsList({\n locale: ctx.getLocale(locale),\n format: monthsListFormat || 'MMMM',\n }).map((month) => {\n const controlProps = getMonthControlProps?.(month.month);\n return (\n <UnstyledButton\n key={month.name}\n onClick={() => onMonthChange?.(month.month)}\n mod={{ type: 'month', active: month.month === monthValue }}\n tabIndex={month.month === monthValue ? 0 : -1}\n onKeyDown={createScopedKeydownHandler({\n siblingSelector: '[data-type=\"month\"]:not(:disabled)',\n parentSelector: '[data-list]',\n activateOnFocus: false,\n loop: true,\n orientation: 'vertical',\n onKeyDown: controlProps?.onKeyDown,\n })}\n {...controlProps}\n {...getStyles('monthYearSelectControl', {\n className: controlProps?.className,\n style: controlProps?.style,\n })}\n aria-label={`${getLabel('selectMonth', labels)} ${month.name}`}\n >\n {month.name}\n </UnstyledButton>\n );\n })\n : null;\n\n return (\n <Popover\n position=\"bottom-start\"\n __staticSelector={__staticSelector}\n trapFocus\n transitionProps={{ transition: 'pop', duration: 120 }}\n radius={radius || 'var(--schedule-radius, var(--mantine-radius-default))'}\n shadow=\"md\"\n offset={3}\n width={withMonths ? undefined : 'target'}\n opened={opened}\n onChange={handlers.set}\n id={id}\n {...popoverProps}\n >\n <Popover.Target>\n <HeaderControl\n {...getStyles('monthYearSelectTarget')}\n __staticSelector={__staticSelector}\n radius={radius}\n data-with-months={withMonths || undefined}\n onClick={handlers.toggle}\n {...others}\n >\n {formatDate({\n locale: ctx.getLocale(locale),\n date: new Date(yearValue ?? today.getFullYear(), monthValue ?? today.getMonth()),\n format: labelFormat || (withMonths ? 'MMMM YYYY' : 'YYYY'),\n })}\n </HeaderControl>\n </Popover.Target>\n\n <Popover.Dropdown\n data-with-months={withMonths || undefined}\n {...getStyles('monthYearSelectDropdown')}\n >\n {withMonths && (\n <div data-list {...getStyles('monthYearSelectList')}>\n <div {...getStyles('monthYearSelectLabel')}>{getLabel('month', labels)}</div>\n {months}\n </div>\n )}\n <div data-list {...getStyles('monthYearSelectList')}>\n {withMonths && (\n <div {...getStyles('monthYearSelectLabel')}>{getLabel('year', labels)}</div>\n )}\n {years}\n </div>\n </Popover.Dropdown>\n </Popover>\n );\n});\n\nMonthYearSelect.displayName = '@mantine/schedule/MonthYearSelect';\nMonthYearSelect.classes = classes;\nMonthYearSelect.varsResolver = varsResolver;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MonthYearSelect.cjs","names":["useScheduleHeaderLabels","getYearsList","UnstyledButton","getLabel","getMonthsList","Popover","HeaderControl","formatDate","classes"],"sources":["../../../../src/components/ScheduleHeader/MonthYearSelect/MonthYearSelect.tsx"],"sourcesContent":["import {\n BoxProps,\n createScopedKeydownHandler,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n factory,\n Factory,\n getRadius,\n MantineRadius,\n Popover,\n PopoverProps,\n StylesApiProps,\n UnstyledButton,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport { useDatesContext } from '@mantine/dates';\nimport { useDisclosure } from '@mantine/hooks';\nimport { getLabel, ScheduleLabelsOverride } from '../../../labels';\nimport { DateLabelFormat } from '../../../types';\nimport { formatDate, getMonthsList, getYearsList } from '../../../utils';\nimport { HeaderControl } from '../HeaderControl/HeaderControl';\nimport { useScheduleHeaderLabels } from '../ScheduleHeaderContext';\nimport classes from './MonthYearSelect.module.css';\n\nexport type MonthYearSelectStylesNames =\n | 'monthYearSelectTarget'\n | 'monthYearSelectDropdown'\n | 'monthYearSelectControl'\n | 'monthYearSelectList'\n | 'monthYearSelectLabel';\n\nexport type MonthYearSelectCssVariables = {\n monthYearSelectDropdown: '--control-radius';\n};\n\nexport interface MonthYearSelectProps\n extends BoxProps, StylesApiProps<MonthYearSelectFactory>, ElementProps<'button'> {\n __staticSelector?: string;\n\n /** Locale passed down to dayjs, overrides value defined on `DatesProvider` */\n locale?: string;\n\n /** Props passed down to the underlying Popover component */\n popoverProps?: PopoverProps;\n\n /** Start year for year selection, calculated from the current date by default */\n startYear?: number;\n\n /** End year for year selection, calculated from the current date by default */\n endYear?: number;\n\n /** Current year value (e.g. `2025`) */\n yearValue?: number;\n\n /** Current month value (0-11) */\n monthValue?: number;\n\n /** Called with year value (e.g. `2025`) when year is selected in the dropdown */\n onYearChange?: (year: number) => void;\n\n /** Called with month value (0-11) when month is selected in the dropdown */\n onMonthChange?: (month: number) => void;\n\n /** Format for displaying months in the dropdown, dayjs format or custom formatter function @default 'MMM' */\n monthsListFormat?: DateLabelFormat;\n\n /** Format for displaying month label in the control, dayjs format @default 'MMMM YYYY' */\n labelFormat?: DateLabelFormat;\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** Props passed down to year controls */\n getYearControlProps?: (year: number) => React.ComponentProps<'button'> & DataAttributes;\n\n /** Props passed down to month controls */\n getMonthControlProps?: (month: number) => React.ComponentProps<'button'> & DataAttributes;\n\n /** If set to false, months are not displayed in the dropdown @default true */\n withMonths?: boolean;\n\n /** Labels override */\n labels?: ScheduleLabelsOverride;\n}\n\nexport type MonthYearSelectFactory = Factory<{\n props: MonthYearSelectProps;\n ref: HTMLButtonElement;\n stylesNames: MonthYearSelectStylesNames;\n vars: MonthYearSelectCssVariables;\n}>;\n\nconst defaultProps = {\n __staticSelector: 'MonthYearSelect',\n withMonths: true,\n} satisfies Partial<MonthYearSelectProps>;\n\nconst varsResolver = createVarsResolver<MonthYearSelectFactory>((_theme, { radius }) => ({\n monthYearSelectDropdown: {\n '--control-radius': radius === undefined ? undefined : getRadius(radius),\n },\n}));\n\nexport const MonthYearSelect = factory<MonthYearSelectFactory>((_props) => {\n const props = useProps('MonthYearSelect', defaultProps, _props);\n const {\n __staticSelector,\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n attributes,\n popoverProps,\n startYear,\n endYear,\n onYearChange,\n onMonthChange,\n locale,\n monthsListFormat,\n monthValue,\n yearValue,\n labelFormat,\n radius,\n getMonthControlProps,\n getYearControlProps,\n withMonths,\n id,\n labels,\n ...others\n } = props;\n\n const getStyles = useStyles<MonthYearSelectFactory>({\n name: __staticSelector,\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n rootSelector: 'monthYearSelectTarget',\n });\n\n const [opened, handlers] = useDisclosure(false);\n const resolvedLabels = useScheduleHeaderLabels(labels);\n\n const today = new Date();\n const ctx = useDatesContext();\n const _startYear = startYear ?? today.getFullYear() - 5;\n const _endYear = endYear ?? today.getFullYear() + 5;\n const hasActiveYear = yearValue !== undefined && yearValue >= _startYear && yearValue <= _endYear;\n\n const years = getYearsList({ startYear: _startYear, endYear: _endYear }).map((year, index) => {\n const controlProps = getYearControlProps?.(year);\n return (\n <UnstyledButton\n key={year}\n onClick={() => {\n onYearChange?.(year);\n if (!withMonths) {\n handlers.close();\n }\n }}\n mod={{ type: 'year', active: year === yearValue }}\n aria-label={`${getLabel('selectYear', resolvedLabels)} ${year}`}\n tabIndex={hasActiveYear ? (year === yearValue ? 0 : -1) : index === 0 ? 0 : -1}\n {...controlProps}\n onKeyDown={createScopedKeydownHandler({\n siblingSelector: '[data-type=\"year\"]:not(:disabled)',\n parentSelector: '[data-list]',\n activateOnFocus: false,\n loop: true,\n orientation: 'vertical',\n onKeyDown: controlProps?.onKeyDown,\n })}\n {...getStyles('monthYearSelectControl', {\n className: controlProps?.className,\n style: controlProps?.style,\n })}\n >\n {year}\n </UnstyledButton>\n );\n });\n\n const months = withMonths\n ? getMonthsList({\n locale: ctx.getLocale(locale),\n format: monthsListFormat || 'MMMM',\n }).map((month) => {\n const controlProps = getMonthControlProps?.(month.month);\n return (\n <UnstyledButton\n key={month.name}\n onClick={() => onMonthChange?.(month.month)}\n mod={{ type: 'month', active: month.month === monthValue }}\n tabIndex={month.month === monthValue ? 0 : -1}\n onKeyDown={createScopedKeydownHandler({\n siblingSelector: '[data-type=\"month\"]:not(:disabled)',\n parentSelector: '[data-list]',\n activateOnFocus: false,\n loop: true,\n orientation: 'vertical',\n onKeyDown: controlProps?.onKeyDown,\n })}\n {...controlProps}\n {...getStyles('monthYearSelectControl', {\n className: controlProps?.className,\n style: controlProps?.style,\n })}\n aria-label={`${getLabel('selectMonth', resolvedLabels)} ${month.name}`}\n >\n {month.name}\n </UnstyledButton>\n );\n })\n : null;\n\n return (\n <Popover\n position=\"bottom-start\"\n __staticSelector={__staticSelector}\n trapFocus\n transitionProps={{ transition: 'pop', duration: 120 }}\n radius={radius || 'var(--schedule-radius, var(--mantine-radius-default))'}\n shadow=\"md\"\n offset={3}\n width={withMonths ? undefined : 'target'}\n opened={opened}\n onChange={handlers.set}\n id={id}\n {...popoverProps}\n >\n <Popover.Target>\n <HeaderControl\n {...getStyles('monthYearSelectTarget')}\n __staticSelector={__staticSelector}\n radius={radius}\n data-with-months={withMonths || undefined}\n onClick={handlers.toggle}\n {...others}\n >\n {formatDate({\n locale: ctx.getLocale(locale),\n date: new Date(yearValue ?? today.getFullYear(), monthValue ?? today.getMonth()),\n format: labelFormat || (withMonths ? 'MMMM YYYY' : 'YYYY'),\n })}\n </HeaderControl>\n </Popover.Target>\n\n <Popover.Dropdown\n data-with-months={withMonths || undefined}\n {...getStyles('monthYearSelectDropdown')}\n >\n {withMonths && (\n <div data-list {...getStyles('monthYearSelectList')}>\n <div {...getStyles('monthYearSelectLabel')}>{getLabel('month', resolvedLabels)}</div>\n {months}\n </div>\n )}\n <div data-list {...getStyles('monthYearSelectList')}>\n {withMonths && (\n <div {...getStyles('monthYearSelectLabel')}>{getLabel('year', resolvedLabels)}</div>\n )}\n {years}\n </div>\n </Popover.Dropdown>\n </Popover>\n );\n});\n\nMonthYearSelect.displayName = '@mantine/schedule/MonthYearSelect';\nMonthYearSelect.classes = classes;\nMonthYearSelect.varsResolver = varsResolver;\n"],"mappings":"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"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
require("../../_virtual/_rolldown/runtime.cjs");
|
|
3
|
+
const require_ScheduleHeaderContext = require("./ScheduleHeaderContext.cjs");
|
|
3
4
|
const require_HeaderControl = require("./HeaderControl/HeaderControl.cjs");
|
|
4
5
|
const require_MonthYearSelect = require("./MonthYearSelect/MonthYearSelect.cjs");
|
|
5
6
|
const require_ViewSelect = require("./ViewSelect/ViewSelect.cjs");
|
|
@@ -11,23 +12,27 @@ const defaultProps = { __staticSelector: "ScheduleHeader" };
|
|
|
11
12
|
const varsResolver = (0, _mantine_core.createVarsResolver)(() => ({ scheduleHeader: { "--test": "test" } }));
|
|
12
13
|
const ScheduleHeader = (0, _mantine_core.factory)((_props) => {
|
|
13
14
|
const props = (0, _mantine_core.useProps)("ScheduleHeader", defaultProps, _props);
|
|
14
|
-
const { classNames, className, style, styles, unstyled, vars, attributes, __staticSelector, ...others } = props;
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
15
|
+
const { classNames, className, style, styles, unstyled, vars, attributes, __staticSelector, labels, ...others } = props;
|
|
16
|
+
const getStyles = (0, _mantine_core.useStyles)({
|
|
17
|
+
name: __staticSelector,
|
|
18
|
+
classes: require_ScheduleHeader_module.default,
|
|
19
|
+
props,
|
|
20
|
+
className,
|
|
21
|
+
style,
|
|
22
|
+
classNames,
|
|
23
|
+
styles,
|
|
24
|
+
unstyled,
|
|
25
|
+
vars,
|
|
26
|
+
varsResolver,
|
|
27
|
+
attributes,
|
|
28
|
+
rootSelector: "header"
|
|
29
|
+
});
|
|
30
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScheduleHeaderContext.ScheduleHeaderLabelsContext.Provider, {
|
|
31
|
+
value: labels,
|
|
32
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, {
|
|
33
|
+
...getStyles("header"),
|
|
34
|
+
...others
|
|
35
|
+
})
|
|
31
36
|
});
|
|
32
37
|
});
|
|
33
38
|
ScheduleHeader.displayName = "@mantine/schedule/ScheduleHeader";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScheduleHeader.cjs","names":["Box","classes","HeaderControl","ScheduleHeaderNext","ScheduleHeaderPrevious","ScheduleHeaderToday","ViewSelect","MonthYearSelect"],"sources":["../../../src/components/ScheduleHeader/ScheduleHeader.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n StylesApiProps,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport {\n HeaderControl,\n HeaderControlStylesNames,\n ScheduleHeaderNext,\n ScheduleHeaderPrevious,\n ScheduleHeaderToday,\n} from './HeaderControl/HeaderControl';\nimport { MonthYearSelect, MonthYearSelectStylesNames } from './MonthYearSelect/MonthYearSelect';\nimport { ViewSelect, ViewSelectStylesNames } from './ViewSelect/ViewSelect';\nimport classes from './ScheduleHeader.module.css';\n\nexport type CombinedScheduleHeaderStylesNames =\n | ScheduleHeaderStylesNames\n | ViewSelectStylesNames\n | HeaderControlStylesNames\n | MonthYearSelectStylesNames;\n\nexport type ScheduleHeaderStylesNames = 'header';\nexport type ScheduleHeaderCssVariables = {\n scheduleHeader: '--test';\n};\n\nexport interface ScheduleHeaderProps\n extends BoxProps, StylesApiProps<ScheduleHeaderFactory>, ElementProps<'div'> {\n __staticSelector?: string;\n}\n\nexport type ScheduleHeaderFactory = Factory<{\n props: ScheduleHeaderProps;\n ref: HTMLDivElement;\n stylesNames: ScheduleHeaderStylesNames;\n vars: ScheduleHeaderCssVariables;\n staticComponents: {\n Control: typeof HeaderControl;\n Previous: typeof ScheduleHeaderPrevious;\n Next: typeof ScheduleHeaderNext;\n Today: typeof ScheduleHeaderToday;\n ViewSelect: typeof ViewSelect;\n MonthYearSelect: typeof MonthYearSelect;\n };\n}>;\n\nconst defaultProps = {\n __staticSelector: 'ScheduleHeader',\n} satisfies Partial<ScheduleHeaderProps>;\n\nconst varsResolver = createVarsResolver<ScheduleHeaderFactory>(() => ({\n scheduleHeader: {\n '--test': 'test',\n },\n}));\n\nexport const ScheduleHeader = factory<ScheduleHeaderFactory>((_props) => {\n const props = useProps('ScheduleHeader', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n attributes,\n __staticSelector,\n ...others\n } = props;\n\n const getStyles = useStyles<ScheduleHeaderFactory>({\n name: __staticSelector,\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n vars,\n varsResolver,\n attributes,\n rootSelector: 'header',\n });\n\n return <Box {...getStyles('header')} {...others}
|
|
1
|
+
{"version":3,"file":"ScheduleHeader.cjs","names":["ScheduleHeaderLabelsContext","Box","classes","HeaderControl","ScheduleHeaderNext","ScheduleHeaderPrevious","ScheduleHeaderToday","ViewSelect","MonthYearSelect"],"sources":["../../../src/components/ScheduleHeader/ScheduleHeader.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n StylesApiProps,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport { ScheduleLabelsOverride } from '../../labels';\nimport {\n HeaderControl,\n HeaderControlStylesNames,\n ScheduleHeaderNext,\n ScheduleHeaderPrevious,\n ScheduleHeaderToday,\n} from './HeaderControl/HeaderControl';\nimport { MonthYearSelect, MonthYearSelectStylesNames } from './MonthYearSelect/MonthYearSelect';\nimport { ScheduleHeaderLabelsContext } from './ScheduleHeaderContext';\nimport { ViewSelect, ViewSelectStylesNames } from './ViewSelect/ViewSelect';\nimport classes from './ScheduleHeader.module.css';\n\nexport type CombinedScheduleHeaderStylesNames =\n | ScheduleHeaderStylesNames\n | ViewSelectStylesNames\n | HeaderControlStylesNames\n | MonthYearSelectStylesNames;\n\nexport type ScheduleHeaderStylesNames = 'header';\nexport type ScheduleHeaderCssVariables = {\n scheduleHeader: '--test';\n};\n\nexport interface ScheduleHeaderProps\n extends BoxProps, StylesApiProps<ScheduleHeaderFactory>, ElementProps<'div'> {\n __staticSelector?: string;\n\n /** Labels override shared with compound components rendered inside */\n labels?: ScheduleLabelsOverride;\n}\n\nexport type ScheduleHeaderFactory = Factory<{\n props: ScheduleHeaderProps;\n ref: HTMLDivElement;\n stylesNames: ScheduleHeaderStylesNames;\n vars: ScheduleHeaderCssVariables;\n staticComponents: {\n Control: typeof HeaderControl;\n Previous: typeof ScheduleHeaderPrevious;\n Next: typeof ScheduleHeaderNext;\n Today: typeof ScheduleHeaderToday;\n ViewSelect: typeof ViewSelect;\n MonthYearSelect: typeof MonthYearSelect;\n };\n}>;\n\nconst defaultProps = {\n __staticSelector: 'ScheduleHeader',\n} satisfies Partial<ScheduleHeaderProps>;\n\nconst varsResolver = createVarsResolver<ScheduleHeaderFactory>(() => ({\n scheduleHeader: {\n '--test': 'test',\n },\n}));\n\nexport const ScheduleHeader = factory<ScheduleHeaderFactory>((_props) => {\n const props = useProps('ScheduleHeader', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n attributes,\n __staticSelector,\n labels,\n ...others\n } = props;\n\n const getStyles = useStyles<ScheduleHeaderFactory>({\n name: __staticSelector,\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n vars,\n varsResolver,\n attributes,\n rootSelector: 'header',\n });\n\n return (\n <ScheduleHeaderLabelsContext.Provider value={labels}>\n <Box {...getStyles('header')} {...others} />\n </ScheduleHeaderLabelsContext.Provider>\n );\n});\n\nScheduleHeader.displayName = '@mantine/schedule/ScheduleHeader';\nScheduleHeader.classes = classes;\nScheduleHeader.varsResolver = varsResolver;\nScheduleHeader.Control = HeaderControl;\nScheduleHeader.Next = ScheduleHeaderNext;\nScheduleHeader.Previous = ScheduleHeaderPrevious;\nScheduleHeader.Today = ScheduleHeaderToday;\nScheduleHeader.ViewSelect = ViewSelect;\nScheduleHeader.MonthYearSelect = MonthYearSelect;\n"],"mappings":";;;;;;;;;;AA0DA,MAAM,eAAe,EACnB,kBAAkB,kBACnB;AAED,MAAM,gBAAA,GAAA,cAAA,2BAAgE,EACpE,gBAAgB,EACd,UAAU,QACX,EACF,EAAE;AAEH,MAAa,kBAAA,GAAA,cAAA,UAAiD,WAAW;CACvE,MAAM,SAAA,GAAA,cAAA,UAAiB,kBAAkB,cAAc,OAAO;CAC9D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,YACA,kBACA,QACA,GAAG,WACD;CAEJ,MAAM,aAAA,GAAA,cAAA,WAA6C;EACjD,MAAM;EACN,SAAA,8BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACf,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACA,8BAAAA,4BAA4B,UAA7B;EAAsC,OAAO;YAC3C,iBAAA,GAAA,kBAAA,KAACC,cAAAA,KAAD;GAAK,GAAI,UAAU,SAAS;GAAE,GAAI;GAAU,CAAA;EACP,CAAA;EAEzC;AAEF,eAAe,cAAc;AAC7B,eAAe,UAAUC,8BAAAA;AACzB,eAAe,eAAe;AAC9B,eAAe,UAAUC,sBAAAA;AACzB,eAAe,OAAOC,sBAAAA;AACtB,eAAe,WAAWC,sBAAAA;AAC1B,eAAe,QAAQC,sBAAAA;AACvB,eAAe,aAAaC,mBAAAA;AAC5B,eAAe,kBAAkBC,wBAAAA"}
|
|
@@ -29,6 +29,7 @@ function ScheduleHeaderBase({ view, navigationHandlers, control, labels, onDateC
|
|
|
29
29
|
}));
|
|
30
30
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ScheduleHeader.ScheduleHeader, {
|
|
31
31
|
...stylesApiProps,
|
|
32
|
+
labels,
|
|
32
33
|
children: [
|
|
33
34
|
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
34
35
|
className: require_ScheduleHeader_module.default.navigationGroup,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScheduleHeaderBase.cjs","names":["ScheduleHeader","getLabel","classes","NativeSelect"],"sources":["../../../src/components/ScheduleHeader/ScheduleHeaderBase.tsx"],"sourcesContent":["import { NativeSelect, StylesApiProps } from '@mantine/core';\nimport { getLabel, ScheduleLabelsOverride } from '../../labels';\nimport { DateStringValue, ScheduleViewLevel } from '../../types';\nimport { MonthYearSelectProps } from './MonthYearSelect/MonthYearSelect';\nimport { ScheduleHeader } from './ScheduleHeader';\nimport { ViewSelectProps } from './ViewSelect/ViewSelect';\nimport classes from './ScheduleHeader.module.css';\n\ninterface NavigationHandlers {\n /** Handler for previous button click, returns new date */\n previous: () => DateStringValue;\n\n /** Handler for next button click, returns new date */\n next: () => DateStringValue;\n\n /** Handler for today button click, returns new date */\n today: () => DateStringValue;\n}\n\ninterface HeaderControlOptions {\n /** Title to render in a simple control (used by DayView, WeekView) */\n title?: React.ReactNode;\n /** MonthYearSelect props (used by MonthView, YearView) */\n monthYearSelect?: {\n yearValue: number;\n monthValue: number;\n onYearChange?: (year: number) => void;\n onMonthChange?: (month: number) => void;\n withMonths?: boolean;\n } & Partial<MonthYearSelectProps>;\n /** Minimum width for control */\n miw?: React.CSSProperties['minWidth'];\n}\n\nexport interface ScheduleHeaderBaseProps {\n /** Current view level */\n view: ScheduleViewLevel;\n\n /** Navigation handlers for previous, next, and today */\n navigationHandlers: NavigationHandlers;\n\n /** Central control configuration (either title or monthYearSelect) */\n control: HeaderControlOptions;\n\n /** Label overrides */\n labels?: ScheduleLabelsOverride;\n\n /** Called when date is changed */\n onDateChange?: (date: DateStringValue) => void;\n\n /** Called when view is changed */\n onViewChange?: (view: ScheduleViewLevel) => void;\n\n /** Props passed to previous control button */\n previousControlProps?: React.ComponentProps<'button'>;\n\n /** Props passed to next control button */\n nextControlProps?: React.ComponentProps<'button'>;\n\n /** Props passed to today control button */\n todayControlProps?: React.ComponentProps<'button'>;\n\n /** Props passed to view select */\n viewSelectProps?: Partial<ViewSelectProps>;\n\n /** Styles API props to pass through */\n stylesApiProps?: StylesApiProps<any>;\n}\n\nconst VIEW_LEVELS: ScheduleViewLevel[] = ['day', 'week', 'month', 'year'];\n\nexport function ScheduleHeaderBase({\n view,\n navigationHandlers,\n control,\n labels,\n onDateChange,\n onViewChange,\n previousControlProps,\n nextControlProps,\n todayControlProps,\n viewSelectProps,\n stylesApiProps,\n}: ScheduleHeaderBaseProps) {\n const centralControl = control.monthYearSelect ? (\n <ScheduleHeader.MonthYearSelect\n {...stylesApiProps}\n labels={labels}\n {...control.monthYearSelect}\n />\n ) : (\n <ScheduleHeader.Control {...stylesApiProps} interactive={false} miw={control.miw}>\n {control.title}\n </ScheduleHeader.Control>\n );\n\n const views = viewSelectProps?.views || VIEW_LEVELS;\n const compactViewSelectData = views.map((v) => ({\n value: v,\n label: getLabel(v, labels) as string,\n }));\n\n return (\n <ScheduleHeader {...stylesApiProps}>\n <div className={classes.navigationGroup}>\n <ScheduleHeader.Previous\n {...stylesApiProps}\n onClick={() => onDateChange?.(navigationHandlers.previous())}\n labels={labels}\n {...previousControlProps}\n />\n\n {centralControl}\n\n <ScheduleHeader.Next\n {...stylesApiProps}\n onClick={() => onDateChange?.(navigationHandlers.next())}\n labels={labels}\n {...nextControlProps}\n />\n </div>\n\n <div className={classes.todayControl}>\n <ScheduleHeader.Today\n {...stylesApiProps}\n onClick={() => onDateChange?.(navigationHandlers.today())}\n labels={labels}\n {...todayControlProps}\n />\n </div>\n\n <NativeSelect\n className={classes.compactViewSelect}\n data={compactViewSelectData}\n value={view}\n onChange={(event) => onViewChange?.(event.currentTarget.value as ScheduleViewLevel)}\n aria-label={getLabel('viewSelectLabel', labels) as string}\n size=\"sm\"\n />\n\n <div className={classes.viewSelect} style={{ marginInlineStart: 'auto' }}>\n <ScheduleHeader.ViewSelect\n value={view}\n onChange={onViewChange}\n labels={labels}\n {...stylesApiProps}\n {...viewSelectProps}\n />\n </div>\n </ScheduleHeader>\n );\n}\n"],"mappings":";;;;;;;;AAqEA,MAAM,cAAmC;CAAC;CAAO;CAAQ;CAAS;CAAO;AAEzE,SAAgB,mBAAmB,EACjC,MACA,oBACA,SACA,QACA,cACA,cACA,sBACA,kBACA,mBACA,iBACA,kBAC0B;CAC1B,MAAM,iBAAiB,QAAQ,kBAC7B,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,eAAe,iBAAhB;EACE,GAAI;EACI;EACR,GAAI,QAAQ;EACZ,CAAA,GAEF,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,eAAe,SAAhB;EAAwB,GAAI;EAAgB,aAAa;EAAO,KAAK,QAAQ;YAC1E,QAAQ;EACc,CAAA;CAI3B,MAAM,yBADQ,iBAAiB,SAAS,aACJ,KAAK,OAAO;EAC9C,OAAO;EACP,OAAOC,eAAAA,SAAS,GAAG,OAAO;EAC3B,EAAE;AAEH,QACE,iBAAA,GAAA,kBAAA,MAACD,uBAAAA,gBAAD;EAAgB,GAAI;
|
|
1
|
+
{"version":3,"file":"ScheduleHeaderBase.cjs","names":["ScheduleHeader","getLabel","classes","NativeSelect"],"sources":["../../../src/components/ScheduleHeader/ScheduleHeaderBase.tsx"],"sourcesContent":["import { NativeSelect, StylesApiProps } from '@mantine/core';\nimport { getLabel, ScheduleLabelsOverride } from '../../labels';\nimport { DateStringValue, ScheduleViewLevel } from '../../types';\nimport { MonthYearSelectProps } from './MonthYearSelect/MonthYearSelect';\nimport { ScheduleHeader } from './ScheduleHeader';\nimport { ViewSelectProps } from './ViewSelect/ViewSelect';\nimport classes from './ScheduleHeader.module.css';\n\ninterface NavigationHandlers {\n /** Handler for previous button click, returns new date */\n previous: () => DateStringValue;\n\n /** Handler for next button click, returns new date */\n next: () => DateStringValue;\n\n /** Handler for today button click, returns new date */\n today: () => DateStringValue;\n}\n\ninterface HeaderControlOptions {\n /** Title to render in a simple control (used by DayView, WeekView) */\n title?: React.ReactNode;\n /** MonthYearSelect props (used by MonthView, YearView) */\n monthYearSelect?: {\n yearValue: number;\n monthValue: number;\n onYearChange?: (year: number) => void;\n onMonthChange?: (month: number) => void;\n withMonths?: boolean;\n } & Partial<MonthYearSelectProps>;\n /** Minimum width for control */\n miw?: React.CSSProperties['minWidth'];\n}\n\nexport interface ScheduleHeaderBaseProps {\n /** Current view level */\n view: ScheduleViewLevel;\n\n /** Navigation handlers for previous, next, and today */\n navigationHandlers: NavigationHandlers;\n\n /** Central control configuration (either title or monthYearSelect) */\n control: HeaderControlOptions;\n\n /** Label overrides */\n labels?: ScheduleLabelsOverride;\n\n /** Called when date is changed */\n onDateChange?: (date: DateStringValue) => void;\n\n /** Called when view is changed */\n onViewChange?: (view: ScheduleViewLevel) => void;\n\n /** Props passed to previous control button */\n previousControlProps?: React.ComponentProps<'button'>;\n\n /** Props passed to next control button */\n nextControlProps?: React.ComponentProps<'button'>;\n\n /** Props passed to today control button */\n todayControlProps?: React.ComponentProps<'button'>;\n\n /** Props passed to view select */\n viewSelectProps?: Partial<ViewSelectProps>;\n\n /** Styles API props to pass through */\n stylesApiProps?: StylesApiProps<any>;\n}\n\nconst VIEW_LEVELS: ScheduleViewLevel[] = ['day', 'week', 'month', 'year'];\n\nexport function ScheduleHeaderBase({\n view,\n navigationHandlers,\n control,\n labels,\n onDateChange,\n onViewChange,\n previousControlProps,\n nextControlProps,\n todayControlProps,\n viewSelectProps,\n stylesApiProps,\n}: ScheduleHeaderBaseProps) {\n const centralControl = control.monthYearSelect ? (\n <ScheduleHeader.MonthYearSelect\n {...stylesApiProps}\n labels={labels}\n {...control.monthYearSelect}\n />\n ) : (\n <ScheduleHeader.Control {...stylesApiProps} interactive={false} miw={control.miw}>\n {control.title}\n </ScheduleHeader.Control>\n );\n\n const views = viewSelectProps?.views || VIEW_LEVELS;\n const compactViewSelectData = views.map((v) => ({\n value: v,\n label: getLabel(v, labels) as string,\n }));\n\n return (\n <ScheduleHeader {...stylesApiProps} labels={labels}>\n <div className={classes.navigationGroup}>\n <ScheduleHeader.Previous\n {...stylesApiProps}\n onClick={() => onDateChange?.(navigationHandlers.previous())}\n labels={labels}\n {...previousControlProps}\n />\n\n {centralControl}\n\n <ScheduleHeader.Next\n {...stylesApiProps}\n onClick={() => onDateChange?.(navigationHandlers.next())}\n labels={labels}\n {...nextControlProps}\n />\n </div>\n\n <div className={classes.todayControl}>\n <ScheduleHeader.Today\n {...stylesApiProps}\n onClick={() => onDateChange?.(navigationHandlers.today())}\n labels={labels}\n {...todayControlProps}\n />\n </div>\n\n <NativeSelect\n className={classes.compactViewSelect}\n data={compactViewSelectData}\n value={view}\n onChange={(event) => onViewChange?.(event.currentTarget.value as ScheduleViewLevel)}\n aria-label={getLabel('viewSelectLabel', labels) as string}\n size=\"sm\"\n />\n\n <div className={classes.viewSelect} style={{ marginInlineStart: 'auto' }}>\n <ScheduleHeader.ViewSelect\n value={view}\n onChange={onViewChange}\n labels={labels}\n {...stylesApiProps}\n {...viewSelectProps}\n />\n </div>\n </ScheduleHeader>\n );\n}\n"],"mappings":";;;;;;;;AAqEA,MAAM,cAAmC;CAAC;CAAO;CAAQ;CAAS;CAAO;AAEzE,SAAgB,mBAAmB,EACjC,MACA,oBACA,SACA,QACA,cACA,cACA,sBACA,kBACA,mBACA,iBACA,kBAC0B;CAC1B,MAAM,iBAAiB,QAAQ,kBAC7B,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,eAAe,iBAAhB;EACE,GAAI;EACI;EACR,GAAI,QAAQ;EACZ,CAAA,GAEF,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,eAAe,SAAhB;EAAwB,GAAI;EAAgB,aAAa;EAAO,KAAK,QAAQ;YAC1E,QAAQ;EACc,CAAA;CAI3B,MAAM,yBADQ,iBAAiB,SAAS,aACJ,KAAK,OAAO;EAC9C,OAAO;EACP,OAAOC,eAAAA,SAAS,GAAG,OAAO;EAC3B,EAAE;AAEH,QACE,iBAAA,GAAA,kBAAA,MAACD,uBAAAA,gBAAD;EAAgB,GAAI;EAAwB;YAA5C;GACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAAK,WAAWE,8BAAAA,QAAQ;cAAxB;KACE,iBAAA,GAAA,kBAAA,KAACF,uBAAAA,eAAe,UAAhB;MACE,GAAI;MACJ,eAAe,eAAe,mBAAmB,UAAU,CAAC;MACpD;MACR,GAAI;MACJ,CAAA;KAED;KAED,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,eAAe,MAAhB;MACE,GAAI;MACJ,eAAe,eAAe,mBAAmB,MAAM,CAAC;MAChD;MACR,GAAI;MACJ,CAAA;KACE;;GAEN,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAWE,8BAAAA,QAAQ;cACtB,iBAAA,GAAA,kBAAA,KAACF,uBAAAA,eAAe,OAAhB;KACE,GAAI;KACJ,eAAe,eAAe,mBAAmB,OAAO,CAAC;KACjD;KACR,GAAI;KACJ,CAAA;IACE,CAAA;GAEN,iBAAA,GAAA,kBAAA,KAACG,cAAAA,cAAD;IACE,WAAWD,8BAAAA,QAAQ;IACnB,MAAM;IACN,OAAO;IACP,WAAW,UAAU,eAAe,MAAM,cAAc,MAA2B;IACnF,cAAYD,eAAAA,SAAS,mBAAmB,OAAO;IAC/C,MAAK;IACL,CAAA;GAEF,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAWC,8BAAAA,QAAQ;IAAY,OAAO,EAAE,mBAAmB,QAAQ;cACtE,iBAAA,GAAA,kBAAA,KAACF,uBAAAA,eAAe,YAAhB;KACE,OAAO;KACP,UAAU;KACF;KACR,GAAI;KACJ,GAAI;KACJ,CAAA;IACE,CAAA;GACS"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
require("../../_virtual/_rolldown/runtime.cjs");
|
|
3
|
+
let react = require("react");
|
|
4
|
+
//#region packages/@mantine/schedule/src/components/ScheduleHeader/ScheduleHeaderContext.ts
|
|
5
|
+
const ScheduleHeaderLabelsContext = (0, react.createContext)(void 0);
|
|
6
|
+
ScheduleHeaderLabelsContext.displayName = "@mantine/schedule/ScheduleHeaderLabelsContext";
|
|
7
|
+
function useScheduleHeaderLabels(override) {
|
|
8
|
+
const contextLabels = (0, react.useContext)(ScheduleHeaderLabelsContext);
|
|
9
|
+
if (!override) return contextLabels;
|
|
10
|
+
if (!contextLabels) return override;
|
|
11
|
+
return {
|
|
12
|
+
...contextLabels,
|
|
13
|
+
...override
|
|
14
|
+
};
|
|
15
|
+
}
|
|
16
|
+
//#endregion
|
|
17
|
+
exports.ScheduleHeaderLabelsContext = ScheduleHeaderLabelsContext;
|
|
18
|
+
exports.useScheduleHeaderLabels = useScheduleHeaderLabels;
|
|
19
|
+
|
|
20
|
+
//# sourceMappingURL=ScheduleHeaderContext.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScheduleHeaderContext.cjs","names":[],"sources":["../../../src/components/ScheduleHeader/ScheduleHeaderContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport type { ScheduleLabelsOverride } from '../../labels';\n\nexport const ScheduleHeaderLabelsContext = createContext<ScheduleLabelsOverride | undefined>(\n undefined\n);\nScheduleHeaderLabelsContext.displayName = '@mantine/schedule/ScheduleHeaderLabelsContext';\n\nexport function useScheduleHeaderLabels(\n override?: ScheduleLabelsOverride\n): ScheduleLabelsOverride | undefined {\n const contextLabels = useContext(ScheduleHeaderLabelsContext);\n if (!override) {\n return contextLabels;\n }\n if (!contextLabels) {\n return override;\n }\n return { ...contextLabels, ...override };\n}\n"],"mappings":";;;;AAGA,MAAa,+BAAA,GAAA,MAAA,eACX,KAAA,EACD;AACD,4BAA4B,cAAc;AAE1C,SAAgB,wBACd,UACoC;CACpC,MAAM,iBAAA,GAAA,MAAA,YAA2B,4BAA4B;AAC7D,KAAI,CAAC,SACH,QAAO;AAET,KAAI,CAAC,cACH,QAAO;AAET,QAAO;EAAE,GAAG;EAAe,GAAG;EAAU"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
require("../../../_virtual/_rolldown/runtime.cjs");
|
|
3
3
|
const require_labels = require("../../../labels.cjs");
|
|
4
|
+
const require_ScheduleHeaderContext = require("../ScheduleHeaderContext.cjs");
|
|
4
5
|
const require_HeaderControl = require("../HeaderControl/HeaderControl.cjs");
|
|
5
6
|
const require_ViewSelect_module = require("./ViewSelect.module.cjs");
|
|
6
7
|
let _mantine_core = require("@mantine/core");
|
|
@@ -32,6 +33,7 @@ const ViewSelect = (0, _mantine_core.factory)((_props) => {
|
|
|
32
33
|
vars,
|
|
33
34
|
rootSelector: "viewSelect"
|
|
34
35
|
});
|
|
36
|
+
const resolvedLabels = require_ScheduleHeaderContext.useScheduleHeaderLabels(labels);
|
|
35
37
|
const { resolvedClassNames, resolvedStyles } = (0, _mantine_core.useResolvedStylesApi)({
|
|
36
38
|
classNames,
|
|
37
39
|
styles,
|
|
@@ -88,16 +90,16 @@ const ViewSelect = (0, _mantine_core.factory)((_props) => {
|
|
|
88
90
|
__staticSelector,
|
|
89
91
|
radius,
|
|
90
92
|
role: "tab",
|
|
91
|
-
"aria-label": require_labels.getLabel(switchToLabelKeys[view],
|
|
93
|
+
"aria-label": require_labels.getLabel(switchToLabelKeys[view], resolvedLabels),
|
|
92
94
|
"aria-selected": isSelected,
|
|
93
95
|
tabIndex: isSelected ? 0 : -1,
|
|
94
|
-
children: require_labels.getLabel(view,
|
|
96
|
+
children: require_labels.getLabel(view, resolvedLabels)
|
|
95
97
|
}, view);
|
|
96
98
|
});
|
|
97
99
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, {
|
|
98
100
|
...getStyles("viewSelect"),
|
|
99
101
|
role: "tablist",
|
|
100
|
-
"aria-label": require_labels.getLabel("viewSelectLabel",
|
|
102
|
+
"aria-label": require_labels.getLabel("viewSelectLabel", resolvedLabels),
|
|
101
103
|
...others,
|
|
102
104
|
children: items
|
|
103
105
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ViewSelect.cjs","names":["HeaderControl","getLabel","Box","classes"],"sources":["../../../../src/components/ScheduleHeader/ViewSelect/ViewSelect.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport {\n Box,\n BoxProps,\n ElementProps,\n factory,\n Factory,\n MantineRadius,\n StylesApiProps,\n useDirection,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { getLabel, ScheduleLabels, ScheduleLabelsOverride } from '../../../labels';\nimport { ScheduleViewLevel } from '../../../types';\nimport { HeaderControl } from '../HeaderControl/HeaderControl';\nimport classes from './ViewSelect.module.css';\n\nexport type ViewSelectStylesNames = 'viewSelect';\n\nexport interface ViewSelectProps\n extends BoxProps, StylesApiProps<ViewSelectFactory>, ElementProps<'div', 'value' | 'onChange'> {\n __staticSelector?: string;\n\n /** A list of views to display @default ['day', 'week', 'month', 'year'] */\n views?: readonly ScheduleViewLevel[];\n\n /** Selected view type */\n value?: ScheduleViewLevel;\n\n /** Called when view type changes */\n onChange?: (value: ScheduleViewLevel) => void;\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** Labels override */\n labels?: ScheduleLabelsOverride;\n}\n\nexport type ViewSelectFactory = Factory<{\n props: ViewSelectProps;\n ref: HTMLDivElement;\n stylesNames: ViewSelectStylesNames;\n}>;\n\nconst defaultProps = {\n __staticSelector: 'ViewSelect',\n views: ['day', 'week', 'month', 'year'],\n} satisfies Partial<ViewSelectProps>;\n\nexport const ViewSelect = factory<ViewSelectFactory>((_props) => {\n const props = useProps('ViewSelect', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n attributes,\n value,\n onChange,\n views,\n __staticSelector,\n radius,\n labels,\n ...others\n } = props;\n\n const getStyles = useStyles<ViewSelectFactory>({\n name: __staticSelector,\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n rootSelector: 'viewSelect',\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ViewSelectFactory>({\n classNames,\n styles,\n props,\n });\n\n const { dir } = useDirection();\n const controlsRef = useRef<(HTMLButtonElement | null)[]>([]);\n const activatedWithKeyboardRef = useRef(false);\n\n // Restore focus to the selected tab when the component mounts\n // This handles the case where focus is lost due to view switch (header unmount/remount)\n // Only restore focus if the view was activated via keyboard (Enter/Space)\n useEffect(() => {\n if (activatedWithKeyboardRef.current && document.activeElement === document.body) {\n const selectedIndex = views!.findIndex((view) => view === value);\n if (selectedIndex !== -1) {\n controlsRef.current[selectedIndex]?.focus();\n }\n }\n activatedWithKeyboardRef.current = false;\n }, []);\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>, index: number) => {\n const isRtl = dir === 'rtl';\n const nextKey = isRtl ? 'ArrowLeft' : 'ArrowRight';\n const prevKey = isRtl ? 'ArrowRight' : 'ArrowLeft';\n\n if (event.key === nextKey) {\n event.preventDefault();\n const nextIndex = index < views!.length - 1 ? index + 1 : 0;\n controlsRef.current[nextIndex]?.focus();\n } else if (event.key === prevKey) {\n event.preventDefault();\n const prevIndex = index > 0 ? index - 1 : views!.length - 1;\n controlsRef.current[prevIndex]?.focus();\n } else if (event.key === 'Home') {\n event.preventDefault();\n controlsRef.current[0]?.focus();\n } else if (event.key === 'End') {\n event.preventDefault();\n controlsRef.current[views!.length - 1]?.focus();\n } else if (event.key === 'Enter' || event.key === ' ') {\n activatedWithKeyboardRef.current = true;\n }\n };\n\n const switchToLabelKeys: Record<ScheduleViewLevel, keyof ScheduleLabels> = {\n day: 'switchToDayView',\n week: 'switchToWeekView',\n month: 'switchToMonthView',\n year: 'switchToYearView',\n };\n\n const items = views!.map((view, index) => {\n const isSelected = value === view;\n return (\n <HeaderControl\n key={view}\n ref={(node) => {\n controlsRef.current[index] = node;\n }}\n data-type={view}\n active={isSelected}\n onClick={() => onChange?.(view)}\n onKeyDown={(event) => handleKeyDown(event, index)}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n __staticSelector={__staticSelector}\n radius={radius}\n role=\"tab\"\n aria-label={getLabel(switchToLabelKeys[view],
|
|
1
|
+
{"version":3,"file":"ViewSelect.cjs","names":["useScheduleHeaderLabels","HeaderControl","getLabel","Box","classes"],"sources":["../../../../src/components/ScheduleHeader/ViewSelect/ViewSelect.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport {\n Box,\n BoxProps,\n ElementProps,\n factory,\n Factory,\n MantineRadius,\n StylesApiProps,\n useDirection,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { getLabel, ScheduleLabels, ScheduleLabelsOverride } from '../../../labels';\nimport { ScheduleViewLevel } from '../../../types';\nimport { HeaderControl } from '../HeaderControl/HeaderControl';\nimport { useScheduleHeaderLabels } from '../ScheduleHeaderContext';\nimport classes from './ViewSelect.module.css';\n\nexport type ViewSelectStylesNames = 'viewSelect';\n\nexport interface ViewSelectProps\n extends BoxProps, StylesApiProps<ViewSelectFactory>, ElementProps<'div', 'value' | 'onChange'> {\n __staticSelector?: string;\n\n /** A list of views to display @default ['day', 'week', 'month', 'year'] */\n views?: readonly ScheduleViewLevel[];\n\n /** Selected view type */\n value?: ScheduleViewLevel;\n\n /** Called when view type changes */\n onChange?: (value: ScheduleViewLevel) => void;\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** Labels override */\n labels?: ScheduleLabelsOverride;\n}\n\nexport type ViewSelectFactory = Factory<{\n props: ViewSelectProps;\n ref: HTMLDivElement;\n stylesNames: ViewSelectStylesNames;\n}>;\n\nconst defaultProps = {\n __staticSelector: 'ViewSelect',\n views: ['day', 'week', 'month', 'year'],\n} satisfies Partial<ViewSelectProps>;\n\nexport const ViewSelect = factory<ViewSelectFactory>((_props) => {\n const props = useProps('ViewSelect', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n attributes,\n value,\n onChange,\n views,\n __staticSelector,\n radius,\n labels,\n ...others\n } = props;\n\n const getStyles = useStyles<ViewSelectFactory>({\n name: __staticSelector,\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n rootSelector: 'viewSelect',\n });\n\n const resolvedLabels = useScheduleHeaderLabels(labels);\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ViewSelectFactory>({\n classNames,\n styles,\n props,\n });\n\n const { dir } = useDirection();\n const controlsRef = useRef<(HTMLButtonElement | null)[]>([]);\n const activatedWithKeyboardRef = useRef(false);\n\n // Restore focus to the selected tab when the component mounts\n // This handles the case where focus is lost due to view switch (header unmount/remount)\n // Only restore focus if the view was activated via keyboard (Enter/Space)\n useEffect(() => {\n if (activatedWithKeyboardRef.current && document.activeElement === document.body) {\n const selectedIndex = views!.findIndex((view) => view === value);\n if (selectedIndex !== -1) {\n controlsRef.current[selectedIndex]?.focus();\n }\n }\n activatedWithKeyboardRef.current = false;\n }, []);\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>, index: number) => {\n const isRtl = dir === 'rtl';\n const nextKey = isRtl ? 'ArrowLeft' : 'ArrowRight';\n const prevKey = isRtl ? 'ArrowRight' : 'ArrowLeft';\n\n if (event.key === nextKey) {\n event.preventDefault();\n const nextIndex = index < views!.length - 1 ? index + 1 : 0;\n controlsRef.current[nextIndex]?.focus();\n } else if (event.key === prevKey) {\n event.preventDefault();\n const prevIndex = index > 0 ? index - 1 : views!.length - 1;\n controlsRef.current[prevIndex]?.focus();\n } else if (event.key === 'Home') {\n event.preventDefault();\n controlsRef.current[0]?.focus();\n } else if (event.key === 'End') {\n event.preventDefault();\n controlsRef.current[views!.length - 1]?.focus();\n } else if (event.key === 'Enter' || event.key === ' ') {\n activatedWithKeyboardRef.current = true;\n }\n };\n\n const switchToLabelKeys: Record<ScheduleViewLevel, keyof ScheduleLabels> = {\n day: 'switchToDayView',\n week: 'switchToWeekView',\n month: 'switchToMonthView',\n year: 'switchToYearView',\n };\n\n const items = views!.map((view, index) => {\n const isSelected = value === view;\n return (\n <HeaderControl\n key={view}\n ref={(node) => {\n controlsRef.current[index] = node;\n }}\n data-type={view}\n active={isSelected}\n onClick={() => onChange?.(view)}\n onKeyDown={(event) => handleKeyDown(event, index)}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n __staticSelector={__staticSelector}\n radius={radius}\n role=\"tab\"\n aria-label={getLabel(switchToLabelKeys[view], resolvedLabels) as string}\n aria-selected={isSelected}\n tabIndex={isSelected ? 0 : -1}\n >\n {getLabel(view, resolvedLabels)}\n </HeaderControl>\n );\n });\n\n return (\n <Box\n {...getStyles('viewSelect')}\n role=\"tablist\"\n aria-label={getLabel('viewSelectLabel', resolvedLabels)}\n {...others}\n >\n {items}\n </Box>\n );\n});\n\nViewSelect.displayName = '@mantine/schedule/ViewSelect';\nViewSelect.classes = classes;\n"],"mappings":";;;;;;;;;;AAgDA,MAAM,eAAe;CACnB,kBAAkB;CAClB,OAAO;EAAC;EAAO;EAAQ;EAAS;EAAO;CACxC;AAED,MAAa,cAAA,GAAA,cAAA,UAAyC,WAAW;CAC/D,MAAM,SAAA,GAAA,cAAA,UAAiB,cAAc,cAAc,OAAO;CAC1D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,YACA,OACA,UACA,OACA,kBACA,QACA,QACA,GAAG,WACD;CAEJ,MAAM,aAAA,GAAA,cAAA,WAAyC;EAC7C,MAAM;EACN,SAAA,0BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACf,CAAC;CAEF,MAAM,iBAAiBA,8BAAAA,wBAAwB,OAAO;CAEtD,MAAM,EAAE,oBAAoB,oBAAA,GAAA,cAAA,sBAA2D;EACrF;EACA;EACA;EACD,CAAC;CAEF,MAAM,EAAE,SAAA,GAAA,cAAA,eAAsB;CAC9B,MAAM,eAAA,GAAA,MAAA,QAAmD,EAAE,CAAC;CAC5D,MAAM,4BAAA,GAAA,MAAA,QAAkC,MAAM;AAK9C,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,yBAAyB,WAAW,SAAS,kBAAkB,SAAS,MAAM;GAChF,MAAM,gBAAgB,MAAO,WAAW,SAAS,SAAS,MAAM;AAChE,OAAI,kBAAkB,GACpB,aAAY,QAAQ,gBAAgB,OAAO;;AAG/C,2BAAyB,UAAU;IAClC,EAAE,CAAC;CAEN,MAAM,iBAAiB,OAA+C,UAAkB;EACtF,MAAM,QAAQ,QAAQ;EACtB,MAAM,UAAU,QAAQ,cAAc;EACtC,MAAM,UAAU,QAAQ,eAAe;AAEvC,MAAI,MAAM,QAAQ,SAAS;AACzB,SAAM,gBAAgB;GACtB,MAAM,YAAY,QAAQ,MAAO,SAAS,IAAI,QAAQ,IAAI;AAC1D,eAAY,QAAQ,YAAY,OAAO;aAC9B,MAAM,QAAQ,SAAS;AAChC,SAAM,gBAAgB;GACtB,MAAM,YAAY,QAAQ,IAAI,QAAQ,IAAI,MAAO,SAAS;AAC1D,eAAY,QAAQ,YAAY,OAAO;aAC9B,MAAM,QAAQ,QAAQ;AAC/B,SAAM,gBAAgB;AACtB,eAAY,QAAQ,IAAI,OAAO;aACtB,MAAM,QAAQ,OAAO;AAC9B,SAAM,gBAAgB;AACtB,eAAY,QAAQ,MAAO,SAAS,IAAI,OAAO;aACtC,MAAM,QAAQ,WAAW,MAAM,QAAQ,IAChD,0BAAyB,UAAU;;CAIvC,MAAM,oBAAqE;EACzE,KAAK;EACL,MAAM;EACN,OAAO;EACP,MAAM;EACP;CAED,MAAM,QAAQ,MAAO,KAAK,MAAM,UAAU;EACxC,MAAM,aAAa,UAAU;AAC7B,SACE,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,eAAD;GAEE,MAAM,SAAS;AACb,gBAAY,QAAQ,SAAS;;GAE/B,aAAW;GACX,QAAQ;GACR,eAAe,WAAW,KAAK;GAC/B,YAAY,UAAU,cAAc,OAAO,MAAM;GACjD,YAAY;GACZ,QAAQ;GACU;GACV;GACR,MAAK;GACL,cAAYC,eAAAA,SAAS,kBAAkB,OAAO,eAAe;GAC7D,iBAAe;GACf,UAAU,aAAa,IAAI;aAE1BA,eAAAA,SAAS,MAAM,eAAe;GACjB,EAlBT,KAkBS;GAElB;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,KAAD;EACE,GAAI,UAAU,aAAa;EAC3B,MAAK;EACL,cAAYD,eAAAA,SAAS,mBAAmB,eAAe;EACvD,GAAI;YAEH;EACG,CAAA;EAER;AAEF,WAAW,cAAc;AACzB,WAAW,UAAUE,0BAAAA"}
|
|
@@ -423,7 +423,10 @@ const DayView = factory((_props) => {
|
|
|
423
423
|
events: eventsData.allDayEvents,
|
|
424
424
|
moreEventsCount: allDayEventsCount.hiddenEventsCount,
|
|
425
425
|
renderEventBody,
|
|
426
|
+
renderEvent,
|
|
426
427
|
mode,
|
|
428
|
+
labels,
|
|
429
|
+
onEventClick,
|
|
427
430
|
...stylesApiProps,
|
|
428
431
|
...moreEventsProps
|
|
429
432
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DayView.mjs","names":["classes"],"sources":["../../../src/components/DayView/DayView.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useCallback, useRef } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n factory,\n Factory,\n getRadius,\n MantineRadius,\n rem,\n ScrollArea,\n ScrollAreaAutosizeProps,\n StylesApiProps,\n UnstyledButton,\n useMantineTheme,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { useDatesContext } from '@mantine/dates';\nimport { useIsomorphicEffect, useMergedRef } from '@mantine/hooks';\nimport { useAutoScrollOnDrag } from '../../hooks/use-auto-scroll-on-drag';\nimport { useDragDropHandlers } from '../../hooks/use-drag-drop-handlers';\nimport { useEventResize } from '../../hooks/use-event-resize';\nimport { useSlotDragSelect } from '../../hooks/use-slot-drag-select';\nimport { getLabel, ScheduleLabelsOverride } from '../../labels';\nimport {\n DateLabelFormat,\n DateStringValue,\n DateTimeStringValue,\n ScheduleEventData,\n ScheduleMode,\n ScheduleViewLevel,\n} from '../../types';\nimport {\n calculateDropTime,\n clampIntervalMinutes,\n expandRecurringEvents,\n formatDate,\n getBusinessHoursMod,\n getDayTimeIntervals,\n getVisibleEvents,\n isAllDayEvent,\n toDateString,\n} from '../../utils';\nimport {\n CurrentTimeIndicator,\n CurrentTimeIndicatorStylesNames,\n} from '../CurrentTimeIndicator/CurrentTimeIndicator';\nimport { DragContext } from '../DragContext/DragContext';\nimport { MoreEvents, MoreEventsProps, MoreEventsStylesNames } from '../MoreEvents/MoreEvents';\nimport {\n RenderEvent,\n RenderEventBody,\n ScheduleEvent,\n ScheduleEventStylesNames,\n} from '../ScheduleEvent/ScheduleEvent';\nimport { MonthYearSelectStylesNames } from '../ScheduleHeader/MonthYearSelect/MonthYearSelect';\nimport { CombinedScheduleHeaderStylesNames } from '../ScheduleHeader/ScheduleHeader';\nimport { ScheduleHeaderBase } from '../ScheduleHeader/ScheduleHeaderBase';\nimport { ViewSelectProps } from '../ScheduleHeader/ViewSelect/ViewSelect';\nimport { getDayViewEvents } from './get-day-view-events/get-day-view-events';\nimport classes from './DayView.module.css';\n\nexport type DayViewStylesNames =\n | 'dayView'\n | 'dayViewInner'\n | 'dayViewScrollArea'\n | 'dayViewAllDay'\n | 'dayViewAllDayEvents'\n | 'dayViewSlot'\n | 'dayViewSlots'\n | 'dayViewTimeSlots'\n | 'dayViewSlotLabel'\n | 'dayViewSlotLabels'\n | 'dayViewBackgroundEvent'\n | MoreEventsStylesNames\n | ScheduleEventStylesNames\n | Exclude<CombinedScheduleHeaderStylesNames, MonthYearSelectStylesNames>\n | CurrentTimeIndicatorStylesNames;\n\nexport type DayViewCssVariables = {\n dayView: '--day-view-radius' | '--day-view-slot-height' | '--day-view-all-day-slot-height';\n};\n\nexport interface DayViewProps\n extends BoxProps, StylesApiProps<DayViewFactory>, ElementProps<'div'> {\n __staticSelector?: string;\n\n /** Day to display, Date object or date string in `YYYY-MM-DD` format */\n date: Date | DateStringValue;\n\n /** Called when date is changed */\n onDateChange?: (date: DateStringValue) => void;\n\n /** Events to display, must be a stable reference */\n events?: ScheduleEventData[];\n\n /** Time slots start time, in `HH:mm:ss` format @default 00:00:00 */\n startTime?: string;\n\n /** Time slots end time in `HH:mm:ss` format @default 23:59:59 */\n endTime?: string;\n\n /** Number of minutes for each time slot @default 15 */\n intervalMinutes?: number;\n\n /** If set, the all-day slot is displayed below the header @default true */\n withAllDaySlot?: boolean;\n\n /** Locale passed down to dayjs, overrides value defined on `DatesProvider` */\n locale?: string;\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** Dayjs format for slot labels or a callback function that returns formatted value @default HH:mm */\n slotLabelFormat?: DateLabelFormat;\n\n /** Date format in the header @default MMMM D, YYYY */\n headerFormat?: DateLabelFormat;\n\n /** If set, displays a line indicating the current time. By default, displayed only for the current day. */\n withCurrentTimeIndicator?: boolean;\n\n /** If set, the time indicator displays the current time in the bubble @default true */\n withCurrentTimeBubble?: boolean;\n\n /** If set, the header is displayed @default true */\n withHeader?: boolean;\n\n /** Called when view level select button is clicked */\n onViewChange?: (view: ScheduleViewLevel) => void;\n\n /** Props passed to previous month control */\n previousControlProps?: React.ComponentProps<'button'> & DataAttributes;\n\n /** Props passed to next month control */\n nextControlProps?: React.ComponentProps<'button'> & DataAttributes;\n\n /** Props passed to today control */\n todayControlProps?: React.ComponentProps<'button'> & DataAttributes;\n\n /** Props passed to view level select */\n viewSelectProps?: Partial<ViewSelectProps> & DataAttributes;\n\n /** Height of 1hr slot @default 64px */\n slotHeight?: React.CSSProperties['height'];\n\n /** Height of all-day slot @default 44px */\n allDaySlotHeight?: React.CSSProperties['height'];\n\n /** Props passed down to the `ScrollArea.Autosize` component */\n scrollAreaProps?: ScrollAreaAutosizeProps & DataAttributes;\n\n /** Props passed down to `MoreEvents` component */\n moreEventsProps?: Partial<MoreEventsProps>;\n\n /** Function to customize event body, `event` object is passed as first argument */\n renderEventBody?: RenderEventBody;\n\n /** Function to fully customize event rendering, receives all props that would be passed to the root element including children */\n renderEvent?: RenderEvent;\n\n /** Labels override */\n labels?: ScheduleLabelsOverride;\n\n /** If set to true, highlights business hours with white background @default false */\n highlightBusinessHours?: boolean;\n\n /** Business hours range in `HH:mm:ss` format @default ['09:00:00', '17:00:00'] */\n businessHours?: [string, string];\n\n /** If true, events can be dragged and dropped @default false */\n withEventsDragAndDrop?: boolean;\n\n /** Called when event is dropped at new time */\n onEventDrop?: (data: {\n eventId: string | number;\n newStart: DateTimeStringValue;\n newEnd: DateTimeStringValue;\n event: ScheduleEventData;\n }) => void;\n\n /** Function to determine if event can be dragged */\n canDragEvent?: (event: ScheduleEventData) => boolean;\n\n /** Called when any event drag starts */\n onEventDragStart?: (event: ScheduleEventData) => void;\n\n /** Called when any event drag ends */\n onEventDragEnd?: () => void;\n\n /** Called when time slot is clicked */\n onTimeSlotClick?: (data: {\n slotStart: DateTimeStringValue;\n slotEnd: DateTimeStringValue;\n nativeEvent: React.MouseEvent<HTMLButtonElement>;\n }) => void;\n\n /** Called when all-day slot is clicked */\n onAllDaySlotClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;\n\n /** Called when event is clicked */\n onEventClick?: (event: ScheduleEventData, e: React.MouseEvent<HTMLButtonElement>) => void;\n\n /** If set, enables drag-to-select time slot ranges @default false */\n withDragSlotSelect?: boolean;\n\n /** Called when a time slot range is selected by dragging */\n onSlotDragEnd?: (rangeStart: DateTimeStringValue, rangeEnd: DateTimeStringValue) => void;\n\n /** Interaction mode: 'default' allows all interactions, 'static' disables event interactions @default default */\n mode?: ScheduleMode;\n\n /** Time to scroll to on initial render, in `HH:mm:ss` format */\n startScrollTime?: string;\n\n /** Called when an external item is dropped onto the schedule. Receives the `DataTransfer` object and the drop target datetime. */\n onExternalEventDrop?: (dataTransfer: DataTransfer, dropDateTime: DateTimeStringValue) => void;\n\n /** If true, events can be resized by dragging their edges @default false */\n withEventResize?: boolean;\n\n /** Called when event is resized */\n onEventResize?: (data: {\n eventId: string | number;\n newStart: DateTimeStringValue;\n newEnd: DateTimeStringValue;\n event: ScheduleEventData;\n }) => void;\n\n /** Function to determine if event can be resized */\n canResizeEvent?: (event: ScheduleEventData) => boolean;\n\n /** Max number of generated recurring instances per recurring series @default 2000 */\n recurrenceExpansionLimit?: number;\n\n /** Function to get additional props for each time slot. Receives slot start and end datetime strings. Returned props are spread onto the slot element. Event handlers returned by this function are composed with internal handlers (e.g. onClick) rather than overriding them. */\n getTimeSlotProps?: (data: {\n start: DateTimeStringValue;\n end: DateTimeStringValue;\n }) => Record<string, any> | undefined;\n}\n\nexport type DayViewFactory = Factory<{\n props: DayViewProps;\n ref: HTMLDivElement;\n stylesNames: DayViewStylesNames;\n vars: DayViewCssVariables;\n}>;\n\nconst defaultProps = {\n __staticSelector: 'DayView',\n startTime: '00:00:00',\n endTime: '23:59:59',\n intervalMinutes: 15,\n withAllDaySlot: true,\n slotLabelFormat: 'HH:mm',\n headerFormat: 'MMMM D, YYYY',\n withCurrentTimeBubble: true,\n withHeader: true,\n highlightBusinessHours: false,\n businessHours: ['09:00:00', '17:00:00'],\n withEventsDragAndDrop: false,\n withDragSlotSelect: false,\n withEventResize: false,\n mode: 'default',\n} satisfies Partial<DayViewProps>;\n\nconst varsResolver = createVarsResolver<DayViewFactory>(\n (_theme, { radius, slotHeight, allDaySlotHeight }) => ({\n dayView: {\n '--day-view-radius': radius !== undefined ? getRadius(radius) : undefined,\n '--day-view-slot-height': rem(slotHeight),\n '--day-view-all-day-slot-height': rem(allDaySlotHeight),\n },\n })\n);\n\nexport const DayView = factory<DayViewFactory>((_props) => {\n const props = useProps('DayView', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n attributes,\n vars,\n __staticSelector,\n startTime,\n endTime,\n intervalMinutes,\n withAllDaySlot,\n date,\n locale,\n slotLabelFormat,\n headerFormat,\n withCurrentTimeIndicator = dayjs(date).isSame(dayjs(), 'day'),\n withCurrentTimeBubble,\n withHeader,\n radius,\n onDateChange,\n onViewChange,\n previousControlProps,\n nextControlProps,\n todayControlProps,\n viewSelectProps,\n slotHeight,\n allDaySlotHeight,\n scrollAreaProps,\n events,\n moreEventsProps,\n renderEventBody,\n renderEvent,\n labels,\n highlightBusinessHours,\n businessHours,\n withEventsDragAndDrop,\n onEventDrop,\n canDragEvent,\n onEventDragStart,\n onEventDragEnd,\n onTimeSlotClick,\n onAllDaySlotClick,\n onEventClick,\n withDragSlotSelect,\n onSlotDragEnd,\n mode,\n startScrollTime,\n onExternalEventDrop,\n withEventResize,\n onEventResize,\n canResizeEvent,\n recurrenceExpansionLimit,\n getTimeSlotProps,\n ...others\n } = props;\n\n const getStyles = useStyles<DayViewFactory>({\n name: __staticSelector,\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n rootSelector: 'dayView',\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<DayViewFactory>({\n classNames,\n styles,\n props,\n });\n\n const stylesApiProps = {\n classNames: resolvedClassNames,\n styles: resolvedStyles,\n attributes,\n __staticSelector,\n radius,\n };\n\n const theme = useMantineTheme();\n const ctx = useDatesContext();\n const slots = getDayTimeIntervals({ startTime, endTime, intervalMinutes });\n const slotsRef = useRef<HTMLButtonElement[]>([]);\n const viewportRef = useRef<HTMLDivElement>(null);\n const timeSlotsContainerRef = useRef<HTMLDivElement>(null);\n const mergedViewportRef = useMergedRef(viewportRef, scrollAreaProps?.viewportRef);\n\n useAutoScrollOnDrag({\n viewportRef,\n enabled: (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== 'static',\n });\n\n useIsomorphicEffect(() => {\n if (!startScrollTime || !viewportRef.current || slotsRef.current.length === 0) {\n return;\n }\n\n const targetIndex = slots.findIndex((s) => s.startTime >= startScrollTime);\n if (targetIndex < 0) {\n return;\n }\n\n const targetSlot = slotsRef.current[targetIndex];\n if (!targetSlot) {\n return;\n }\n\n const slotRect = targetSlot.getBoundingClientRect();\n const viewportRect = viewportRef.current.getBoundingClientRect();\n viewportRef.current.scrollTo({ left: 0, top: slotRect.top - viewportRect.top });\n }, []);\n\n const getSlotIndexFromDragPoint = useCallback((event: React.DragEvent) => {\n const slotIndex = slotsRef.current.findIndex((slotNode) => {\n if (!slotNode) {\n return false;\n }\n\n const rect = slotNode.getBoundingClientRect();\n return event.clientY >= rect.top && event.clientY <= rect.bottom;\n });\n\n if (slotIndex >= 0) {\n return slotIndex;\n }\n\n const firstSlot = slotsRef.current[0];\n const lastSlot = slotsRef.current[slotsRef.current.length - 1];\n\n if (!firstSlot || !lastSlot) {\n return null;\n }\n\n const firstRect = firstSlot.getBoundingClientRect();\n const lastRect = lastSlot.getBoundingClientRect();\n\n if (event.clientY < firstRect.top) {\n return 0;\n }\n\n if (event.clientY > lastRect.bottom) {\n return slotsRef.current.length - 1;\n }\n\n return null;\n }, []);\n\n const handleSlotKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>, slotIndex: number) => {\n const direction = event.key;\n if (direction === 'ArrowDown' && slotIndex < slots.length - 1) {\n event.preventDefault();\n slotsRef.current[slotIndex + 1]?.focus();\n } else if (direction === 'ArrowUp' && slotIndex > 0) {\n event.preventDefault();\n slotsRef.current[slotIndex - 1]?.focus();\n }\n };\n\n const slotDragSelect = useSlotDragSelect({\n enabled: withDragSlotSelect && mode !== 'static',\n onDragEnd: (startIndex, endIndex) => {\n if (!onSlotDragEnd) {\n return;\n }\n const slotDate = dayjs(date).format('YYYY-MM-DD');\n onSlotDragEnd(\n `${slotDate} ${slots[startIndex].startTime}`,\n `${slotDate} ${slots[endIndex].endTime}`\n );\n },\n });\n\n const expandedEvents = expandRecurringEvents({\n events,\n rangeStart: dayjs(date).startOf('day').toDate(),\n rangeEnd: dayjs(date).endOf('day').toDate(),\n expansionLimit: recurrenceExpansionLimit,\n });\n\n const eventsData = getDayViewEvents({ events: expandedEvents, date, startTime, endTime });\n\n const handleExternalDrop = useCallback(\n (e: React.DragEvent, slotIndex: number) => {\n if (!onExternalEventDrop) {\n return;\n }\n const slotDate = dayjs(date).format('YYYY-MM-DD');\n onExternalEventDrop(e.dataTransfer, `${slotDate} ${slots[slotIndex].startTime}`);\n },\n [onExternalEventDrop, date, slots]\n );\n\n const dragDrop = useDragDropHandlers({\n enabled: withEventsDragAndDrop,\n mode,\n onEventDrop,\n canDragEvent,\n onEventDragStart,\n onEventDragEnd,\n calculateDropTarget: (slotIndex: number, draggedEvent: ScheduleEventData) => {\n const slotTime = slots[slotIndex].startTime;\n return calculateDropTime({\n draggedEvent,\n targetDate: date,\n targetSlotTime: slotTime,\n intervalMinutes,\n });\n },\n onExternalDrop: onExternalEventDrop ? handleExternalDrop : undefined,\n });\n\n const eventResize = useEventResize({\n enabled: withEventResize,\n mode,\n startTime,\n endTime,\n intervalMinutes,\n onEventResize,\n canResizeEvent,\n });\n\n const withDragHandlers = (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== 'static';\n\n const eventsNodes = eventsData.regularEvents.map((event) => {\n const eventIsAllDay = isAllDayEvent({ event, date });\n const isDraggable = !eventIsAllDay && dragDrop.isDraggableEvent(event);\n const isResizable = !eventIsAllDay && eventResize.isResizableEvent(event);\n const resizePosition = eventResize.getResizePosition(event.id);\n const eventTop = resizePosition ? resizePosition.top : event.position.top;\n const eventHeight = resizePosition ? resizePosition.height : event.position.height;\n\n return (\n <ScheduleEvent\n event={event}\n key={event.id}\n renderEventBody={renderEventBody}\n renderEvent={renderEvent}\n autoSize\n draggable={isDraggable}\n withResize={isResizable}\n isResizing={resizePosition !== null}\n onResizeStart={\n isResizable\n ? (edge, e) => {\n if (timeSlotsContainerRef.current) {\n eventResize.handleResizeStart({\n event,\n edge,\n container: timeSlotsContainerRef.current,\n originalTop: event.position.top,\n originalHeight: event.position.height,\n eventDate: dayjs(date).format('YYYY-MM-DD'),\n pointerEvent: e,\n });\n }\n }\n : undefined\n }\n mode={mode}\n onClick={\n onEventClick\n ? (e) => {\n if (!eventResize.wasResizing()) {\n onEventClick(event, e);\n }\n }\n : undefined\n }\n {...stylesApiProps}\n style={{\n ...stylesApiProps.styles?.event,\n top: `${eventTop}%`,\n height: `${eventHeight}%`,\n insetInlineStart: `${event.position.offset}%`,\n width: `${event.position.width}%`,\n position: 'absolute',\n }}\n />\n );\n });\n\n const allDayEventsCount = getVisibleEvents({\n maxEvents: 2,\n totalEvents: eventsData.allDayEvents.length,\n });\n\n const allDayEventsNodes = eventsData.allDayEvents\n .slice(0, allDayEventsCount.visibleEventsCount)\n .map((event) => (\n <ScheduleEvent\n key={event.id}\n event={event}\n renderEventBody={renderEventBody}\n renderEvent={renderEvent}\n style={{ maxHeight: '50%' }}\n nowrap\n autoSize\n mode={mode}\n onClick={onEventClick ? (e) => onEventClick(event, e) : undefined}\n {...stylesApiProps}\n />\n ));\n\n const dayGroup = dayjs(date).format('YYYY-MM-DD');\n\n const items = slots.map((slot, index) => {\n const isDropTarget = dragDrop.isDropTarget(index);\n const isDragSelected = slotDragSelect.isSlotSelected(index, dayGroup);\n const slotStart = `${dayGroup} ${slot.startTime}` as DateTimeStringValue;\n const slotEnd = `${dayGroup} ${slot.endTime}` as DateTimeStringValue;\n const { onClick: externalOnClick, ...externalSlotProps } =\n getTimeSlotProps?.({ start: slotStart, end: slotEnd }) || {};\n\n const handleClick =\n mode === 'static'\n ? undefined\n : (event: React.MouseEvent<HTMLButtonElement>) => {\n onTimeSlotClick?.({\n slotStart,\n slotEnd,\n nativeEvent: event,\n });\n externalOnClick?.(event);\n };\n\n return (\n <UnstyledButton\n {...getStyles('dayViewSlot')}\n key={slot.startTime}\n ref={(node) => {\n slotsRef.current[index] = node!;\n }}\n mod={{\n 'hour-start': slot.isHourStart,\n ...getBusinessHoursMod({\n time: slot.startTime,\n businessHours,\n highlightBusinessHours,\n }),\n 'drop-target': isDropTarget,\n 'drag-selected': isDragSelected,\n static: mode === 'static',\n }}\n __vars={{ '--slot-size': `${clampIntervalMinutes(intervalMinutes) / 60}` }}\n aria-label={`${getLabel('timeSlot', labels)} ${slot.startTime} - ${slot.endTime}`}\n tabIndex={mode === 'static' ? -1 : index === 0 ? 0 : -1}\n data-drag-slot-index={withDragSlotSelect && mode !== 'static' ? index : undefined}\n data-drag-slot-group={withDragSlotSelect && mode !== 'static' ? dayGroup : undefined}\n onKeyDown={mode === 'static' ? undefined : (e) => handleSlotKeyDown(e, index)}\n onPointerDown={\n withDragSlotSelect && mode !== 'static'\n ? (e) => slotDragSelect.handleSlotPointerDown(e, index, dayGroup)\n : undefined\n }\n onClick={handleClick}\n onDragOver={withDragHandlers ? (event) => event.preventDefault() : undefined}\n {...externalSlotProps}\n />\n );\n });\n\n const slotsLabels = slots.reduce<React.ReactNode[]>((acc, slot) => {\n if (slot.isHourStart) {\n const slotTime = dayjs(`${dayjs(date).format('YYYY-MM-DD')} ${slot.startTime}`);\n const label = formatDate({\n locale: ctx.getLocale(locale),\n date: slotTime,\n format: slotLabelFormat,\n });\n\n acc.push(\n <Box\n {...getStyles('dayViewSlotLabel')}\n key={slot.startTime}\n mod={getBusinessHoursMod({\n time: slot.startTime,\n businessHours,\n highlightBusinessHours,\n })}\n >\n {label}\n </Box>\n );\n }\n return acc;\n }, []);\n\n const backgroundAllDayEventNodes = eventsData.backgroundAllDayEvents.map((event) => {\n const colors = theme.variantColorResolver({\n color: event.color || theme.primaryColor,\n theme,\n variant: 'light',\n autoContrast: true,\n });\n\n const bgEventBody =\n typeof renderEventBody === 'function' ? renderEventBody(event) : event.title;\n\n const bgEventProps = {\n key: `bg-allday-${event.id}`,\n ...getStyles('dayViewBackgroundEvent', {\n style: { top: 0, height: '100%', width: '100%' },\n }),\n __vars: {\n '--bg-event-bg': colors.background,\n '--bg-event-color': colors.color,\n },\n children: bgEventBody,\n };\n\n if (typeof renderEvent === 'function') {\n return renderEvent(event, bgEventProps as any);\n }\n\n const { key: bgEventKey, ...restBgEventProps } = bgEventProps;\n return <Box key={bgEventKey} {...restBgEventProps} />;\n });\n\n const backgroundTimedEventNodes = eventsData.backgroundTimedEvents.map((event) => {\n const colors = theme.variantColorResolver({\n color: event.color || theme.primaryColor,\n theme,\n variant: 'light',\n autoContrast: true,\n });\n\n const bgEventBody =\n typeof renderEventBody === 'function' ? renderEventBody(event) : event.title;\n\n const bgEventProps = {\n key: event.id,\n ...getStyles('dayViewBackgroundEvent', {\n style: {\n top: `calc(${event.position.top}% + 1px)`,\n height: `calc(${event.position.height}% - 2px)`,\n width: '100%',\n },\n }),\n __vars: {\n '--bg-event-bg': colors.background,\n '--bg-event-color': colors.color,\n },\n children: bgEventBody,\n };\n\n if (typeof renderEvent === 'function') {\n return renderEvent(event, bgEventProps as any);\n }\n\n const { key: bgEventKey, ...restBgEventProps } = bgEventProps;\n return <Box key={bgEventKey} {...restBgEventProps} />;\n });\n\n const content = (\n <Box\n {...getStyles('dayView')}\n mod={{ static: mode === 'static', 'slot-dragging': slotDragSelect.isDragging }}\n {...others}\n >\n {withHeader && (\n <ScheduleHeaderBase\n view=\"day\"\n navigationHandlers={{\n previous: () => toDateString(dayjs(date).subtract(1, 'day')),\n next: () => toDateString(dayjs(date).add(1, 'day')),\n today: () => toDateString(dayjs()),\n }}\n control={{\n title: formatDate({ locale: ctx.getLocale(locale), date, format: headerFormat }),\n miw: 140,\n }}\n labels={labels}\n onDateChange={onDateChange}\n onViewChange={onViewChange}\n previousControlProps={previousControlProps}\n nextControlProps={nextControlProps}\n todayControlProps={todayControlProps}\n viewSelectProps={viewSelectProps}\n stylesApiProps={stylesApiProps}\n />\n )}\n\n <ScrollArea.Autosize\n scrollbarSize={4}\n {...scrollAreaProps}\n {...getStyles('dayViewScrollArea', {\n className: scrollAreaProps?.className,\n style: scrollAreaProps?.style,\n })}\n viewportRef={mergedViewportRef}\n >\n <Box {...getStyles('dayViewInner')}>\n <div {...getStyles('dayViewSlotLabels')}>\n {withAllDaySlot && (\n <Box {...getStyles('dayViewSlotLabel')} mod={{ 'all-day': true }}>\n {getLabel('allDay', labels)}\n </Box>\n )}\n {slotsLabels}\n </div>\n\n <div {...getStyles('dayViewSlots')}>\n {withAllDaySlot && (\n <div {...getStyles('dayViewAllDay')}>\n {backgroundAllDayEventNodes}\n <div {...getStyles('dayViewAllDayEvents')}>\n {allDayEventsNodes}\n {allDayEventsCount.hiddenEventsCount > 0 && (\n <MoreEvents\n events={eventsData.allDayEvents}\n moreEventsCount={allDayEventsCount.hiddenEventsCount}\n renderEventBody={renderEventBody}\n mode={mode}\n {...stylesApiProps}\n {...moreEventsProps}\n />\n )}\n </div>\n <UnstyledButton\n {...getStyles('dayViewSlot')}\n mod={{ 'all-day': true, static: mode === 'static' }}\n aria-label={`${getLabel('timeSlot', labels)} ${getLabel('allDay', labels)}`}\n onClick={\n mode === 'static' || !onAllDaySlotClick\n ? undefined\n : (e) => {\n onAllDaySlotClick(dayjs(date).format('YYYY-MM-DD'), e);\n }\n }\n />\n </div>\n )}\n\n <div\n ref={timeSlotsContainerRef}\n {...getStyles('dayViewTimeSlots')}\n onDragOver={\n withDragHandlers\n ? (event) => {\n const slotIndex = getSlotIndexFromDragPoint(event);\n if (slotIndex !== null) {\n dragDrop.handleDragOver(event, slotIndex);\n }\n }\n : undefined\n }\n onDragLeave={withDragHandlers ? dragDrop.handleDragLeave : undefined}\n onDrop={\n withDragHandlers\n ? (event) => {\n const slotIndex = getSlotIndexFromDragPoint(event);\n if (slotIndex !== null) {\n dragDrop.handleDrop(event, slotIndex);\n }\n }\n : undefined\n }\n >\n {backgroundTimedEventNodes}\n\n {eventsNodes}\n\n {withCurrentTimeIndicator && (\n <CurrentTimeIndicator\n startOffset=\"calc(var(--day-view-slot-labels-width) * -1)\"\n endOffset=\"0rem\"\n topOffset=\"0rem\"\n timeBubbleStartOffset=\"calc(var(--day-view-slot-labels-width) * -1 + 30px)\"\n currentTimeFormat={slotLabelFormat}\n withTimeBubble={withCurrentTimeBubble}\n withThumb={!withCurrentTimeBubble}\n locale={locale}\n startTime={startTime}\n endTime={endTime}\n {...stylesApiProps}\n />\n )}\n {items}\n </div>\n </div>\n </Box>\n </ScrollArea.Autosize>\n </Box>\n );\n\n if (withEventsDragAndDrop) {\n return <DragContext.Provider value={dragDrop.dragContextValue}>{content}</DragContext.Provider>;\n }\n\n return content;\n});\n\nDayView.displayName = '@mantine/schedule/DayView';\nDayView.classes = classes;\nDayView.varsResolver = varsResolver;\n\nexport namespace DayView {\n export type Props = DayViewProps;\n export type Factory = DayViewFactory;\n export type StylesNames = DayViewStylesNames;\n export type CssVariables = DayViewCssVariables;\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DayView.mjs","names":["classes"],"sources":["../../../src/components/DayView/DayView.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useCallback, useRef } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n factory,\n Factory,\n getRadius,\n MantineRadius,\n rem,\n ScrollArea,\n ScrollAreaAutosizeProps,\n StylesApiProps,\n UnstyledButton,\n useMantineTheme,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { useDatesContext } from '@mantine/dates';\nimport { useIsomorphicEffect, useMergedRef } from '@mantine/hooks';\nimport { useAutoScrollOnDrag } from '../../hooks/use-auto-scroll-on-drag';\nimport { useDragDropHandlers } from '../../hooks/use-drag-drop-handlers';\nimport { useEventResize } from '../../hooks/use-event-resize';\nimport { useSlotDragSelect } from '../../hooks/use-slot-drag-select';\nimport { getLabel, ScheduleLabelsOverride } from '../../labels';\nimport {\n DateLabelFormat,\n DateStringValue,\n DateTimeStringValue,\n ScheduleEventData,\n ScheduleMode,\n ScheduleViewLevel,\n} from '../../types';\nimport {\n calculateDropTime,\n clampIntervalMinutes,\n expandRecurringEvents,\n formatDate,\n getBusinessHoursMod,\n getDayTimeIntervals,\n getVisibleEvents,\n isAllDayEvent,\n toDateString,\n} from '../../utils';\nimport {\n CurrentTimeIndicator,\n CurrentTimeIndicatorStylesNames,\n} from '../CurrentTimeIndicator/CurrentTimeIndicator';\nimport { DragContext } from '../DragContext/DragContext';\nimport { MoreEvents, MoreEventsProps, MoreEventsStylesNames } from '../MoreEvents/MoreEvents';\nimport {\n RenderEvent,\n RenderEventBody,\n ScheduleEvent,\n ScheduleEventStylesNames,\n} from '../ScheduleEvent/ScheduleEvent';\nimport { MonthYearSelectStylesNames } from '../ScheduleHeader/MonthYearSelect/MonthYearSelect';\nimport { CombinedScheduleHeaderStylesNames } from '../ScheduleHeader/ScheduleHeader';\nimport { ScheduleHeaderBase } from '../ScheduleHeader/ScheduleHeaderBase';\nimport { ViewSelectProps } from '../ScheduleHeader/ViewSelect/ViewSelect';\nimport { getDayViewEvents } from './get-day-view-events/get-day-view-events';\nimport classes from './DayView.module.css';\n\nexport type DayViewStylesNames =\n | 'dayView'\n | 'dayViewInner'\n | 'dayViewScrollArea'\n | 'dayViewAllDay'\n | 'dayViewAllDayEvents'\n | 'dayViewSlot'\n | 'dayViewSlots'\n | 'dayViewTimeSlots'\n | 'dayViewSlotLabel'\n | 'dayViewSlotLabels'\n | 'dayViewBackgroundEvent'\n | MoreEventsStylesNames\n | ScheduleEventStylesNames\n | Exclude<CombinedScheduleHeaderStylesNames, MonthYearSelectStylesNames>\n | CurrentTimeIndicatorStylesNames;\n\nexport type DayViewCssVariables = {\n dayView: '--day-view-radius' | '--day-view-slot-height' | '--day-view-all-day-slot-height';\n};\n\nexport interface DayViewProps\n extends BoxProps, StylesApiProps<DayViewFactory>, ElementProps<'div'> {\n __staticSelector?: string;\n\n /** Day to display, Date object or date string in `YYYY-MM-DD` format */\n date: Date | DateStringValue;\n\n /** Called when date is changed */\n onDateChange?: (date: DateStringValue) => void;\n\n /** Events to display, must be a stable reference */\n events?: ScheduleEventData[];\n\n /** Time slots start time, in `HH:mm:ss` format @default 00:00:00 */\n startTime?: string;\n\n /** Time slots end time in `HH:mm:ss` format @default 23:59:59 */\n endTime?: string;\n\n /** Number of minutes for each time slot @default 15 */\n intervalMinutes?: number;\n\n /** If set, the all-day slot is displayed below the header @default true */\n withAllDaySlot?: boolean;\n\n /** Locale passed down to dayjs, overrides value defined on `DatesProvider` */\n locale?: string;\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** Dayjs format for slot labels or a callback function that returns formatted value @default HH:mm */\n slotLabelFormat?: DateLabelFormat;\n\n /** Date format in the header @default MMMM D, YYYY */\n headerFormat?: DateLabelFormat;\n\n /** If set, displays a line indicating the current time. By default, displayed only for the current day. */\n withCurrentTimeIndicator?: boolean;\n\n /** If set, the time indicator displays the current time in the bubble @default true */\n withCurrentTimeBubble?: boolean;\n\n /** If set, the header is displayed @default true */\n withHeader?: boolean;\n\n /** Called when view level select button is clicked */\n onViewChange?: (view: ScheduleViewLevel) => void;\n\n /** Props passed to previous month control */\n previousControlProps?: React.ComponentProps<'button'> & DataAttributes;\n\n /** Props passed to next month control */\n nextControlProps?: React.ComponentProps<'button'> & DataAttributes;\n\n /** Props passed to today control */\n todayControlProps?: React.ComponentProps<'button'> & DataAttributes;\n\n /** Props passed to view level select */\n viewSelectProps?: Partial<ViewSelectProps> & DataAttributes;\n\n /** Height of 1hr slot @default 64px */\n slotHeight?: React.CSSProperties['height'];\n\n /** Height of all-day slot @default 44px */\n allDaySlotHeight?: React.CSSProperties['height'];\n\n /** Props passed down to the `ScrollArea.Autosize` component */\n scrollAreaProps?: ScrollAreaAutosizeProps & DataAttributes;\n\n /** Props passed down to `MoreEvents` component */\n moreEventsProps?: Partial<MoreEventsProps>;\n\n /** Function to customize event body, `event` object is passed as first argument */\n renderEventBody?: RenderEventBody;\n\n /** Function to fully customize event rendering, receives all props that would be passed to the root element including children */\n renderEvent?: RenderEvent;\n\n /** Labels override */\n labels?: ScheduleLabelsOverride;\n\n /** If set to true, highlights business hours with white background @default false */\n highlightBusinessHours?: boolean;\n\n /** Business hours range in `HH:mm:ss` format @default ['09:00:00', '17:00:00'] */\n businessHours?: [string, string];\n\n /** If true, events can be dragged and dropped @default false */\n withEventsDragAndDrop?: boolean;\n\n /** Called when event is dropped at new time */\n onEventDrop?: (data: {\n eventId: string | number;\n newStart: DateTimeStringValue;\n newEnd: DateTimeStringValue;\n event: ScheduleEventData;\n }) => void;\n\n /** Function to determine if event can be dragged */\n canDragEvent?: (event: ScheduleEventData) => boolean;\n\n /** Called when any event drag starts */\n onEventDragStart?: (event: ScheduleEventData) => void;\n\n /** Called when any event drag ends */\n onEventDragEnd?: () => void;\n\n /** Called when time slot is clicked */\n onTimeSlotClick?: (data: {\n slotStart: DateTimeStringValue;\n slotEnd: DateTimeStringValue;\n nativeEvent: React.MouseEvent<HTMLButtonElement>;\n }) => void;\n\n /** Called when all-day slot is clicked */\n onAllDaySlotClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;\n\n /** Called when event is clicked */\n onEventClick?: (event: ScheduleEventData, e: React.MouseEvent<HTMLButtonElement>) => void;\n\n /** If set, enables drag-to-select time slot ranges @default false */\n withDragSlotSelect?: boolean;\n\n /** Called when a time slot range is selected by dragging */\n onSlotDragEnd?: (rangeStart: DateTimeStringValue, rangeEnd: DateTimeStringValue) => void;\n\n /** Interaction mode: 'default' allows all interactions, 'static' disables event interactions @default default */\n mode?: ScheduleMode;\n\n /** Time to scroll to on initial render, in `HH:mm:ss` format */\n startScrollTime?: string;\n\n /** Called when an external item is dropped onto the schedule. Receives the `DataTransfer` object and the drop target datetime. */\n onExternalEventDrop?: (dataTransfer: DataTransfer, dropDateTime: DateTimeStringValue) => void;\n\n /** If true, events can be resized by dragging their edges @default false */\n withEventResize?: boolean;\n\n /** Called when event is resized */\n onEventResize?: (data: {\n eventId: string | number;\n newStart: DateTimeStringValue;\n newEnd: DateTimeStringValue;\n event: ScheduleEventData;\n }) => void;\n\n /** Function to determine if event can be resized */\n canResizeEvent?: (event: ScheduleEventData) => boolean;\n\n /** Max number of generated recurring instances per recurring series @default 2000 */\n recurrenceExpansionLimit?: number;\n\n /** Function to get additional props for each time slot. Receives slot start and end datetime strings. Returned props are spread onto the slot element. Event handlers returned by this function are composed with internal handlers (e.g. onClick) rather than overriding them. */\n getTimeSlotProps?: (data: {\n start: DateTimeStringValue;\n end: DateTimeStringValue;\n }) => Record<string, any> | undefined;\n}\n\nexport type DayViewFactory = Factory<{\n props: DayViewProps;\n ref: HTMLDivElement;\n stylesNames: DayViewStylesNames;\n vars: DayViewCssVariables;\n}>;\n\nconst defaultProps = {\n __staticSelector: 'DayView',\n startTime: '00:00:00',\n endTime: '23:59:59',\n intervalMinutes: 15,\n withAllDaySlot: true,\n slotLabelFormat: 'HH:mm',\n headerFormat: 'MMMM D, YYYY',\n withCurrentTimeBubble: true,\n withHeader: true,\n highlightBusinessHours: false,\n businessHours: ['09:00:00', '17:00:00'],\n withEventsDragAndDrop: false,\n withDragSlotSelect: false,\n withEventResize: false,\n mode: 'default',\n} satisfies Partial<DayViewProps>;\n\nconst varsResolver = createVarsResolver<DayViewFactory>(\n (_theme, { radius, slotHeight, allDaySlotHeight }) => ({\n dayView: {\n '--day-view-radius': radius !== undefined ? getRadius(radius) : undefined,\n '--day-view-slot-height': rem(slotHeight),\n '--day-view-all-day-slot-height': rem(allDaySlotHeight),\n },\n })\n);\n\nexport const DayView = factory<DayViewFactory>((_props) => {\n const props = useProps('DayView', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n attributes,\n vars,\n __staticSelector,\n startTime,\n endTime,\n intervalMinutes,\n withAllDaySlot,\n date,\n locale,\n slotLabelFormat,\n headerFormat,\n withCurrentTimeIndicator = dayjs(date).isSame(dayjs(), 'day'),\n withCurrentTimeBubble,\n withHeader,\n radius,\n onDateChange,\n onViewChange,\n previousControlProps,\n nextControlProps,\n todayControlProps,\n viewSelectProps,\n slotHeight,\n allDaySlotHeight,\n scrollAreaProps,\n events,\n moreEventsProps,\n renderEventBody,\n renderEvent,\n labels,\n highlightBusinessHours,\n businessHours,\n withEventsDragAndDrop,\n onEventDrop,\n canDragEvent,\n onEventDragStart,\n onEventDragEnd,\n onTimeSlotClick,\n onAllDaySlotClick,\n onEventClick,\n withDragSlotSelect,\n onSlotDragEnd,\n mode,\n startScrollTime,\n onExternalEventDrop,\n withEventResize,\n onEventResize,\n canResizeEvent,\n recurrenceExpansionLimit,\n getTimeSlotProps,\n ...others\n } = props;\n\n const getStyles = useStyles<DayViewFactory>({\n name: __staticSelector,\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n rootSelector: 'dayView',\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<DayViewFactory>({\n classNames,\n styles,\n props,\n });\n\n const stylesApiProps = {\n classNames: resolvedClassNames,\n styles: resolvedStyles,\n attributes,\n __staticSelector,\n radius,\n };\n\n const theme = useMantineTheme();\n const ctx = useDatesContext();\n const slots = getDayTimeIntervals({ startTime, endTime, intervalMinutes });\n const slotsRef = useRef<HTMLButtonElement[]>([]);\n const viewportRef = useRef<HTMLDivElement>(null);\n const timeSlotsContainerRef = useRef<HTMLDivElement>(null);\n const mergedViewportRef = useMergedRef(viewportRef, scrollAreaProps?.viewportRef);\n\n useAutoScrollOnDrag({\n viewportRef,\n enabled: (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== 'static',\n });\n\n useIsomorphicEffect(() => {\n if (!startScrollTime || !viewportRef.current || slotsRef.current.length === 0) {\n return;\n }\n\n const targetIndex = slots.findIndex((s) => s.startTime >= startScrollTime);\n if (targetIndex < 0) {\n return;\n }\n\n const targetSlot = slotsRef.current[targetIndex];\n if (!targetSlot) {\n return;\n }\n\n const slotRect = targetSlot.getBoundingClientRect();\n const viewportRect = viewportRef.current.getBoundingClientRect();\n viewportRef.current.scrollTo({ left: 0, top: slotRect.top - viewportRect.top });\n }, []);\n\n const getSlotIndexFromDragPoint = useCallback((event: React.DragEvent) => {\n const slotIndex = slotsRef.current.findIndex((slotNode) => {\n if (!slotNode) {\n return false;\n }\n\n const rect = slotNode.getBoundingClientRect();\n return event.clientY >= rect.top && event.clientY <= rect.bottom;\n });\n\n if (slotIndex >= 0) {\n return slotIndex;\n }\n\n const firstSlot = slotsRef.current[0];\n const lastSlot = slotsRef.current[slotsRef.current.length - 1];\n\n if (!firstSlot || !lastSlot) {\n return null;\n }\n\n const firstRect = firstSlot.getBoundingClientRect();\n const lastRect = lastSlot.getBoundingClientRect();\n\n if (event.clientY < firstRect.top) {\n return 0;\n }\n\n if (event.clientY > lastRect.bottom) {\n return slotsRef.current.length - 1;\n }\n\n return null;\n }, []);\n\n const handleSlotKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>, slotIndex: number) => {\n const direction = event.key;\n if (direction === 'ArrowDown' && slotIndex < slots.length - 1) {\n event.preventDefault();\n slotsRef.current[slotIndex + 1]?.focus();\n } else if (direction === 'ArrowUp' && slotIndex > 0) {\n event.preventDefault();\n slotsRef.current[slotIndex - 1]?.focus();\n }\n };\n\n const slotDragSelect = useSlotDragSelect({\n enabled: withDragSlotSelect && mode !== 'static',\n onDragEnd: (startIndex, endIndex) => {\n if (!onSlotDragEnd) {\n return;\n }\n const slotDate = dayjs(date).format('YYYY-MM-DD');\n onSlotDragEnd(\n `${slotDate} ${slots[startIndex].startTime}`,\n `${slotDate} ${slots[endIndex].endTime}`\n );\n },\n });\n\n const expandedEvents = expandRecurringEvents({\n events,\n rangeStart: dayjs(date).startOf('day').toDate(),\n rangeEnd: dayjs(date).endOf('day').toDate(),\n expansionLimit: recurrenceExpansionLimit,\n });\n\n const eventsData = getDayViewEvents({ events: expandedEvents, date, startTime, endTime });\n\n const handleExternalDrop = useCallback(\n (e: React.DragEvent, slotIndex: number) => {\n if (!onExternalEventDrop) {\n return;\n }\n const slotDate = dayjs(date).format('YYYY-MM-DD');\n onExternalEventDrop(e.dataTransfer, `${slotDate} ${slots[slotIndex].startTime}`);\n },\n [onExternalEventDrop, date, slots]\n );\n\n const dragDrop = useDragDropHandlers({\n enabled: withEventsDragAndDrop,\n mode,\n onEventDrop,\n canDragEvent,\n onEventDragStart,\n onEventDragEnd,\n calculateDropTarget: (slotIndex: number, draggedEvent: ScheduleEventData) => {\n const slotTime = slots[slotIndex].startTime;\n return calculateDropTime({\n draggedEvent,\n targetDate: date,\n targetSlotTime: slotTime,\n intervalMinutes,\n });\n },\n onExternalDrop: onExternalEventDrop ? handleExternalDrop : undefined,\n });\n\n const eventResize = useEventResize({\n enabled: withEventResize,\n mode,\n startTime,\n endTime,\n intervalMinutes,\n onEventResize,\n canResizeEvent,\n });\n\n const withDragHandlers = (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== 'static';\n\n const eventsNodes = eventsData.regularEvents.map((event) => {\n const eventIsAllDay = isAllDayEvent({ event, date });\n const isDraggable = !eventIsAllDay && dragDrop.isDraggableEvent(event);\n const isResizable = !eventIsAllDay && eventResize.isResizableEvent(event);\n const resizePosition = eventResize.getResizePosition(event.id);\n const eventTop = resizePosition ? resizePosition.top : event.position.top;\n const eventHeight = resizePosition ? resizePosition.height : event.position.height;\n\n return (\n <ScheduleEvent\n event={event}\n key={event.id}\n renderEventBody={renderEventBody}\n renderEvent={renderEvent}\n autoSize\n draggable={isDraggable}\n withResize={isResizable}\n isResizing={resizePosition !== null}\n onResizeStart={\n isResizable\n ? (edge, e) => {\n if (timeSlotsContainerRef.current) {\n eventResize.handleResizeStart({\n event,\n edge,\n container: timeSlotsContainerRef.current,\n originalTop: event.position.top,\n originalHeight: event.position.height,\n eventDate: dayjs(date).format('YYYY-MM-DD'),\n pointerEvent: e,\n });\n }\n }\n : undefined\n }\n mode={mode}\n onClick={\n onEventClick\n ? (e) => {\n if (!eventResize.wasResizing()) {\n onEventClick(event, e);\n }\n }\n : undefined\n }\n {...stylesApiProps}\n style={{\n ...stylesApiProps.styles?.event,\n top: `${eventTop}%`,\n height: `${eventHeight}%`,\n insetInlineStart: `${event.position.offset}%`,\n width: `${event.position.width}%`,\n position: 'absolute',\n }}\n />\n );\n });\n\n const allDayEventsCount = getVisibleEvents({\n maxEvents: 2,\n totalEvents: eventsData.allDayEvents.length,\n });\n\n const allDayEventsNodes = eventsData.allDayEvents\n .slice(0, allDayEventsCount.visibleEventsCount)\n .map((event) => (\n <ScheduleEvent\n key={event.id}\n event={event}\n renderEventBody={renderEventBody}\n renderEvent={renderEvent}\n style={{ maxHeight: '50%' }}\n nowrap\n autoSize\n mode={mode}\n onClick={onEventClick ? (e) => onEventClick(event, e) : undefined}\n {...stylesApiProps}\n />\n ));\n\n const dayGroup = dayjs(date).format('YYYY-MM-DD');\n\n const items = slots.map((slot, index) => {\n const isDropTarget = dragDrop.isDropTarget(index);\n const isDragSelected = slotDragSelect.isSlotSelected(index, dayGroup);\n const slotStart = `${dayGroup} ${slot.startTime}` as DateTimeStringValue;\n const slotEnd = `${dayGroup} ${slot.endTime}` as DateTimeStringValue;\n const { onClick: externalOnClick, ...externalSlotProps } =\n getTimeSlotProps?.({ start: slotStart, end: slotEnd }) || {};\n\n const handleClick =\n mode === 'static'\n ? undefined\n : (event: React.MouseEvent<HTMLButtonElement>) => {\n onTimeSlotClick?.({\n slotStart,\n slotEnd,\n nativeEvent: event,\n });\n externalOnClick?.(event);\n };\n\n return (\n <UnstyledButton\n {...getStyles('dayViewSlot')}\n key={slot.startTime}\n ref={(node) => {\n slotsRef.current[index] = node!;\n }}\n mod={{\n 'hour-start': slot.isHourStart,\n ...getBusinessHoursMod({\n time: slot.startTime,\n businessHours,\n highlightBusinessHours,\n }),\n 'drop-target': isDropTarget,\n 'drag-selected': isDragSelected,\n static: mode === 'static',\n }}\n __vars={{ '--slot-size': `${clampIntervalMinutes(intervalMinutes) / 60}` }}\n aria-label={`${getLabel('timeSlot', labels)} ${slot.startTime} - ${slot.endTime}`}\n tabIndex={mode === 'static' ? -1 : index === 0 ? 0 : -1}\n data-drag-slot-index={withDragSlotSelect && mode !== 'static' ? index : undefined}\n data-drag-slot-group={withDragSlotSelect && mode !== 'static' ? dayGroup : undefined}\n onKeyDown={mode === 'static' ? undefined : (e) => handleSlotKeyDown(e, index)}\n onPointerDown={\n withDragSlotSelect && mode !== 'static'\n ? (e) => slotDragSelect.handleSlotPointerDown(e, index, dayGroup)\n : undefined\n }\n onClick={handleClick}\n onDragOver={withDragHandlers ? (event) => event.preventDefault() : undefined}\n {...externalSlotProps}\n />\n );\n });\n\n const slotsLabels = slots.reduce<React.ReactNode[]>((acc, slot) => {\n if (slot.isHourStart) {\n const slotTime = dayjs(`${dayjs(date).format('YYYY-MM-DD')} ${slot.startTime}`);\n const label = formatDate({\n locale: ctx.getLocale(locale),\n date: slotTime,\n format: slotLabelFormat,\n });\n\n acc.push(\n <Box\n {...getStyles('dayViewSlotLabel')}\n key={slot.startTime}\n mod={getBusinessHoursMod({\n time: slot.startTime,\n businessHours,\n highlightBusinessHours,\n })}\n >\n {label}\n </Box>\n );\n }\n return acc;\n }, []);\n\n const backgroundAllDayEventNodes = eventsData.backgroundAllDayEvents.map((event) => {\n const colors = theme.variantColorResolver({\n color: event.color || theme.primaryColor,\n theme,\n variant: 'light',\n autoContrast: true,\n });\n\n const bgEventBody =\n typeof renderEventBody === 'function' ? renderEventBody(event) : event.title;\n\n const bgEventProps = {\n key: `bg-allday-${event.id}`,\n ...getStyles('dayViewBackgroundEvent', {\n style: { top: 0, height: '100%', width: '100%' },\n }),\n __vars: {\n '--bg-event-bg': colors.background,\n '--bg-event-color': colors.color,\n },\n children: bgEventBody,\n };\n\n if (typeof renderEvent === 'function') {\n return renderEvent(event, bgEventProps as any);\n }\n\n const { key: bgEventKey, ...restBgEventProps } = bgEventProps;\n return <Box key={bgEventKey} {...restBgEventProps} />;\n });\n\n const backgroundTimedEventNodes = eventsData.backgroundTimedEvents.map((event) => {\n const colors = theme.variantColorResolver({\n color: event.color || theme.primaryColor,\n theme,\n variant: 'light',\n autoContrast: true,\n });\n\n const bgEventBody =\n typeof renderEventBody === 'function' ? renderEventBody(event) : event.title;\n\n const bgEventProps = {\n key: event.id,\n ...getStyles('dayViewBackgroundEvent', {\n style: {\n top: `calc(${event.position.top}% + 1px)`,\n height: `calc(${event.position.height}% - 2px)`,\n width: '100%',\n },\n }),\n __vars: {\n '--bg-event-bg': colors.background,\n '--bg-event-color': colors.color,\n },\n children: bgEventBody,\n };\n\n if (typeof renderEvent === 'function') {\n return renderEvent(event, bgEventProps as any);\n }\n\n const { key: bgEventKey, ...restBgEventProps } = bgEventProps;\n return <Box key={bgEventKey} {...restBgEventProps} />;\n });\n\n const content = (\n <Box\n {...getStyles('dayView')}\n mod={{ static: mode === 'static', 'slot-dragging': slotDragSelect.isDragging }}\n {...others}\n >\n {withHeader && (\n <ScheduleHeaderBase\n view=\"day\"\n navigationHandlers={{\n previous: () => toDateString(dayjs(date).subtract(1, 'day')),\n next: () => toDateString(dayjs(date).add(1, 'day')),\n today: () => toDateString(dayjs()),\n }}\n control={{\n title: formatDate({ locale: ctx.getLocale(locale), date, format: headerFormat }),\n miw: 140,\n }}\n labels={labels}\n onDateChange={onDateChange}\n onViewChange={onViewChange}\n previousControlProps={previousControlProps}\n nextControlProps={nextControlProps}\n todayControlProps={todayControlProps}\n viewSelectProps={viewSelectProps}\n stylesApiProps={stylesApiProps}\n />\n )}\n\n <ScrollArea.Autosize\n scrollbarSize={4}\n {...scrollAreaProps}\n {...getStyles('dayViewScrollArea', {\n className: scrollAreaProps?.className,\n style: scrollAreaProps?.style,\n })}\n viewportRef={mergedViewportRef}\n >\n <Box {...getStyles('dayViewInner')}>\n <div {...getStyles('dayViewSlotLabels')}>\n {withAllDaySlot && (\n <Box {...getStyles('dayViewSlotLabel')} mod={{ 'all-day': true }}>\n {getLabel('allDay', labels)}\n </Box>\n )}\n {slotsLabels}\n </div>\n\n <div {...getStyles('dayViewSlots')}>\n {withAllDaySlot && (\n <div {...getStyles('dayViewAllDay')}>\n {backgroundAllDayEventNodes}\n <div {...getStyles('dayViewAllDayEvents')}>\n {allDayEventsNodes}\n {allDayEventsCount.hiddenEventsCount > 0 && (\n <MoreEvents\n events={eventsData.allDayEvents}\n moreEventsCount={allDayEventsCount.hiddenEventsCount}\n renderEventBody={renderEventBody}\n renderEvent={renderEvent}\n mode={mode}\n labels={labels}\n onEventClick={onEventClick}\n {...stylesApiProps}\n {...moreEventsProps}\n />\n )}\n </div>\n <UnstyledButton\n {...getStyles('dayViewSlot')}\n mod={{ 'all-day': true, static: mode === 'static' }}\n aria-label={`${getLabel('timeSlot', labels)} ${getLabel('allDay', labels)}`}\n onClick={\n mode === 'static' || !onAllDaySlotClick\n ? undefined\n : (e) => {\n onAllDaySlotClick(dayjs(date).format('YYYY-MM-DD'), e);\n }\n }\n />\n </div>\n )}\n\n <div\n ref={timeSlotsContainerRef}\n {...getStyles('dayViewTimeSlots')}\n onDragOver={\n withDragHandlers\n ? (event) => {\n const slotIndex = getSlotIndexFromDragPoint(event);\n if (slotIndex !== null) {\n dragDrop.handleDragOver(event, slotIndex);\n }\n }\n : undefined\n }\n onDragLeave={withDragHandlers ? dragDrop.handleDragLeave : undefined}\n onDrop={\n withDragHandlers\n ? (event) => {\n const slotIndex = getSlotIndexFromDragPoint(event);\n if (slotIndex !== null) {\n dragDrop.handleDrop(event, slotIndex);\n }\n }\n : undefined\n }\n >\n {backgroundTimedEventNodes}\n\n {eventsNodes}\n\n {withCurrentTimeIndicator && (\n <CurrentTimeIndicator\n startOffset=\"calc(var(--day-view-slot-labels-width) * -1)\"\n endOffset=\"0rem\"\n topOffset=\"0rem\"\n timeBubbleStartOffset=\"calc(var(--day-view-slot-labels-width) * -1 + 30px)\"\n currentTimeFormat={slotLabelFormat}\n withTimeBubble={withCurrentTimeBubble}\n withThumb={!withCurrentTimeBubble}\n locale={locale}\n startTime={startTime}\n endTime={endTime}\n {...stylesApiProps}\n />\n )}\n {items}\n </div>\n </div>\n </Box>\n </ScrollArea.Autosize>\n </Box>\n );\n\n if (withEventsDragAndDrop) {\n return <DragContext.Provider value={dragDrop.dragContextValue}>{content}</DragContext.Provider>;\n }\n\n return content;\n});\n\nDayView.displayName = '@mantine/schedule/DayView';\nDayView.classes = classes;\nDayView.varsResolver = varsResolver;\n\nexport namespace DayView {\n export type Props = DayViewProps;\n export type Factory = DayViewFactory;\n export type StylesNames = DayViewStylesNames;\n export type CssVariables = DayViewCssVariables;\n}\n"],"mappings":"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"}
|
|
@@ -272,6 +272,10 @@ const MonthView = factory((_props) => {
|
|
|
272
272
|
events: dayEvents,
|
|
273
273
|
moreEventsCount: hiddenEventsCount,
|
|
274
274
|
mode,
|
|
275
|
+
labels,
|
|
276
|
+
renderEventBody,
|
|
277
|
+
renderEvent,
|
|
278
|
+
onEventClick,
|
|
275
279
|
style: {
|
|
276
280
|
position: "absolute",
|
|
277
281
|
top: `calc(100% - 2px)`,
|