@mantine/schedule 9.1.0 → 9.2.0
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/cjs/components/WeekView/WeekView.cjs.map +1 -1
- package/cjs/components/WeekView/WeekViewDay.cjs +5 -2
- package/cjs/components/WeekView/WeekViewDay.cjs.map +1 -1
- package/cjs/utils/get-business-hours-mod/get-business-hours-mod.cjs +20 -3
- package/cjs/utils/get-business-hours-mod/get-business-hours-mod.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/esm/components/WeekView/WeekView.mjs.map +1 -1
- package/esm/components/WeekView/WeekViewDay.mjs +5 -2
- package/esm/components/WeekView/WeekViewDay.mjs.map +1 -1
- package/esm/utils/get-business-hours-mod/get-business-hours-mod.mjs +20 -3
- package/esm/utils/get-business-hours-mod/get-business-hours-mod.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/lib/components/WeekView/WeekView.d.ts +3 -2
- package/lib/components/WeekView/WeekViewDay.d.ts +3 -3
- package/lib/utils/get-business-hours-mod/get-business-hours-mod.d.ts +12 -3
- package/lib/utils/index.d.ts +1 -1
- package/package.json +4 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderControl.mjs","names":["classes"],"sources":["../../../../src/components/ScheduleHeader/HeaderControl/HeaderControl.tsx"],"sourcesContent":["import {\n AccordionChevron,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getRadius,\n MantineRadius,\n StylesApiProps,\n UnstyledButton,\n useDirection,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport { getLabel, ScheduleLabelsOverride } from '../../../labels';\nimport classes from './HeaderControl.module.css';\n\nexport type HeaderControlStylesNames = 'headerControl';\nexport type HeaderControlCssVariables = {\n headerControl: '--control-radius';\n};\n\nexport interface HeaderControlProps\n extends BoxProps, StylesApiProps<HeaderControlFactory>, ElementProps<'button'> {\n __staticSelector?: string;\n\n /** Applies active styles */\n active?: boolean;\n\n /** Removes inline padding */\n square?: boolean;\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** If set to `false`, the control will not be clickable */\n interactive?: boolean;\n\n /** Labels override */\n labels?: ScheduleLabelsOverride;\n}\n\nexport type HeaderControlFactory = Factory<{\n props: HeaderControlProps;\n ref: HTMLButtonElement;\n stylesNames: HeaderControlStylesNames;\n vars: HeaderControlCssVariables;\n}>;\n\nconst defaultProps = {\n __staticSelector: 'HeaderControl',\n interactive: true,\n} satisfies Partial<HeaderControlProps>;\n\nconst varsResolver = createVarsResolver<HeaderControlFactory>((_theme, { radius }) => ({\n headerControl: {\n '--control-radius': radius === undefined ? undefined : getRadius(radius),\n },\n}));\n\nexport const HeaderControl = factory<HeaderControlFactory>((_props) => {\n const props = useProps('HeaderControl', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n __staticSelector,\n mod,\n attributes,\n active,\n square,\n radius,\n interactive,\n ...others\n } = props;\n\n const getStyles = useStyles<HeaderControlFactory>({\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: 'headerControl',\n });\n\n return (\n <UnstyledButton\n {...getStyles('headerControl', { active: interactive })}\n mod={[{ active, square, interactive }, mod]}\n tabIndex={interactive ? undefined : -1}\n {...others}\n />\n );\n});\n\nHeaderControl.displayName = '@mantine/schedule/HeaderControl';\nHeaderControl.classes = classes;\nHeaderControl.varsResolver = varsResolver;\n\nexport function ScheduleHeaderNext(props: HeaderControlProps) {\n const { dir } = useDirection();\n\n return (\n <HeaderControl data-type=\"next\" aria-label={getLabel('next',
|
|
1
|
+
{"version":3,"file":"HeaderControl.mjs","names":["classes"],"sources":["../../../../src/components/ScheduleHeader/HeaderControl/HeaderControl.tsx"],"sourcesContent":["import {\n AccordionChevron,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getRadius,\n MantineRadius,\n StylesApiProps,\n UnstyledButton,\n useDirection,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport { getLabel, ScheduleLabelsOverride } from '../../../labels';\nimport { useScheduleHeaderLabels } from '../ScheduleHeaderContext';\nimport classes from './HeaderControl.module.css';\n\nexport type HeaderControlStylesNames = 'headerControl';\nexport type HeaderControlCssVariables = {\n headerControl: '--control-radius';\n};\n\nexport interface HeaderControlProps\n extends BoxProps, StylesApiProps<HeaderControlFactory>, ElementProps<'button'> {\n __staticSelector?: string;\n\n /** Applies active styles */\n active?: boolean;\n\n /** Removes inline padding */\n square?: boolean;\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** If set to `false`, the control will not be clickable */\n interactive?: boolean;\n\n /** Labels override */\n labels?: ScheduleLabelsOverride;\n}\n\nexport type HeaderControlFactory = Factory<{\n props: HeaderControlProps;\n ref: HTMLButtonElement;\n stylesNames: HeaderControlStylesNames;\n vars: HeaderControlCssVariables;\n}>;\n\nconst defaultProps = {\n __staticSelector: 'HeaderControl',\n interactive: true,\n} satisfies Partial<HeaderControlProps>;\n\nconst varsResolver = createVarsResolver<HeaderControlFactory>((_theme, { radius }) => ({\n headerControl: {\n '--control-radius': radius === undefined ? undefined : getRadius(radius),\n },\n}));\n\nexport const HeaderControl = factory<HeaderControlFactory>((_props) => {\n const props = useProps('HeaderControl', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n __staticSelector,\n mod,\n attributes,\n active,\n square,\n radius,\n interactive,\n labels,\n ...others\n } = props;\n\n const getStyles = useStyles<HeaderControlFactory>({\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: 'headerControl',\n });\n\n return (\n <UnstyledButton\n {...getStyles('headerControl', { active: interactive })}\n mod={[{ active, square, interactive }, mod]}\n tabIndex={interactive ? undefined : -1}\n {...others}\n />\n );\n});\n\nHeaderControl.displayName = '@mantine/schedule/HeaderControl';\nHeaderControl.classes = classes;\nHeaderControl.varsResolver = varsResolver;\n\nexport function ScheduleHeaderNext(props: HeaderControlProps) {\n const { dir } = useDirection();\n const resolvedLabels = useScheduleHeaderLabels(props.labels);\n\n return (\n <HeaderControl data-type=\"next\" aria-label={getLabel('next', resolvedLabels)} square {...props}>\n <AccordionChevron style={{ transform: `rotate(${dir === 'rtl' ? 90 : -90}deg)` }} />\n </HeaderControl>\n );\n}\n\nexport function ScheduleHeaderPrevious(props: HeaderControlProps) {\n const { dir } = useDirection();\n const resolvedLabels = useScheduleHeaderLabels(props.labels);\n\n return (\n <HeaderControl\n data-type=\"previous\"\n aria-label={getLabel('previous', resolvedLabels)}\n square\n {...props}\n >\n <AccordionChevron style={{ transform: `rotate(${dir === 'rtl' ? -90 : 90}deg)` }} />\n </HeaderControl>\n );\n}\n\nexport function ScheduleHeaderToday(props: HeaderControlProps) {\n const resolvedLabels = useScheduleHeaderLabels(props.labels);\n\n return (\n <HeaderControl data-type=\"today\" aria-label={getLabel('today', resolvedLabels)} {...props}>\n {getLabel('today', resolvedLabels)}\n </HeaderControl>\n );\n}\n\nScheduleHeaderNext.displayName = '@mantine/schedule/ScheduleHeaderNext';\nScheduleHeaderPrevious.displayName = '@mantine/schedule/ScheduleHeaderPrevious';\nScheduleHeaderToday.displayName = '@mantine/schedule/ScheduleHeaderToday';\n"],"mappings":";;;;;;;AAmDA,MAAM,eAAe;CACnB,kBAAkB;CAClB,aAAa;CACd;AAED,MAAM,eAAe,oBAA0C,QAAQ,EAAE,cAAc,EACrF,eAAe,EACb,oBAAoB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,OAAO,EACzE,EACF,EAAE;AAEH,MAAa,gBAAgB,SAA+B,WAAW;CACrE,MAAM,QAAQ,SAAS,iBAAiB,cAAc,OAAO;CAC7D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,kBACA,KACA,YACA,QACA,QACA,QACA,aACA,QACA,GAAG,WACD;AAiBJ,QACE,oBAAC,gBAAD;EACE,GAjBc,UAAgC;GAChD,MAAM;GACN,SAAA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,cAAc;GACf,CAAC,CAIgB,iBAAiB,EAAE,QAAQ,aAAa,CAAC;EACvD,KAAK,CAAC;GAAE;GAAQ;GAAQ;GAAa,EAAE,IAAI;EAC3C,UAAU,cAAc,KAAA,IAAY;EACpC,GAAI;EACJ,CAAA;EAEJ;AAEF,cAAc,cAAc;AAC5B,cAAc,UAAUA;AACxB,cAAc,eAAe;AAE7B,SAAgB,mBAAmB,OAA2B;CAC5D,MAAM,EAAE,QAAQ,cAAc;AAG9B,QACE,oBAAC,eAAD;EAAe,aAAU;EAAO,cAAY,SAAS,QAHhC,wBAAwB,MAAM,OAAO,CAGkB;EAAE,QAAA;EAAO,GAAI;YACvF,oBAAC,kBAAD,EAAkB,OAAO,EAAE,WAAW,UAAU,QAAQ,QAAQ,KAAK,IAAI,OAAO,EAAI,CAAA;EACtE,CAAA;;AAIpB,SAAgB,uBAAuB,OAA2B;CAChE,MAAM,EAAE,QAAQ,cAAc;AAG9B,QACE,oBAAC,eAAD;EACE,aAAU;EACV,cAAY,SAAS,YALF,wBAAwB,MAAM,OAAO,CAKR;EAChD,QAAA;EACA,GAAI;YAEJ,oBAAC,kBAAD,EAAkB,OAAO,EAAE,WAAW,UAAU,QAAQ,QAAQ,MAAM,GAAG,OAAO,EAAI,CAAA;EACtE,CAAA;;AAIpB,SAAgB,oBAAoB,OAA2B;CAC7D,MAAM,iBAAiB,wBAAwB,MAAM,OAAO;AAE5D,QACE,oBAAC,eAAD;EAAe,aAAU;EAAQ,cAAY,SAAS,SAAS,eAAe;EAAE,GAAI;YACjF,SAAS,SAAS,eAAe;EACpB,CAAA;;AAIpB,mBAAmB,cAAc;AACjC,uBAAuB,cAAc;AACrC,oBAAoB,cAAc"}
|
|
@@ -3,6 +3,7 @@ import { getLabel } from "../../../labels.mjs";
|
|
|
3
3
|
import { formatDate } from "../../../utils/format-date/format-date.mjs";
|
|
4
4
|
import { getMonthsList } from "../../../utils/get-months-list/get-months-list.mjs";
|
|
5
5
|
import { getYearsList } from "../../../utils/get-years-list/get-years-list.mjs";
|
|
6
|
+
import { useScheduleHeaderLabels } from "../ScheduleHeaderContext.mjs";
|
|
6
7
|
import { HeaderControl } from "../HeaderControl/HeaderControl.mjs";
|
|
7
8
|
import MonthYearSelect_module_default from "./MonthYearSelect.module.mjs";
|
|
8
9
|
import { Popover, UnstyledButton, createScopedKeydownHandler, createVarsResolver, factory, getRadius, useProps, useStyles } from "@mantine/core";
|
|
@@ -33,6 +34,7 @@ const MonthYearSelect = factory((_props) => {
|
|
|
33
34
|
rootSelector: "monthYearSelectTarget"
|
|
34
35
|
});
|
|
35
36
|
const [opened, handlers] = useDisclosure(false);
|
|
37
|
+
const resolvedLabels = useScheduleHeaderLabels(labels);
|
|
36
38
|
const today = /* @__PURE__ */ new Date();
|
|
37
39
|
const ctx = useDatesContext();
|
|
38
40
|
const _startYear = startYear ?? today.getFullYear() - 5;
|
|
@@ -52,7 +54,7 @@ const MonthYearSelect = factory((_props) => {
|
|
|
52
54
|
type: "year",
|
|
53
55
|
active: year === yearValue
|
|
54
56
|
},
|
|
55
|
-
"aria-label": `${getLabel("selectYear",
|
|
57
|
+
"aria-label": `${getLabel("selectYear", resolvedLabels)} ${year}`,
|
|
56
58
|
tabIndex: hasActiveYear ? year === yearValue ? 0 : -1 : index === 0 ? 0 : -1,
|
|
57
59
|
...controlProps,
|
|
58
60
|
onKeyDown: createScopedKeydownHandler({
|
|
@@ -95,7 +97,7 @@ const MonthYearSelect = factory((_props) => {
|
|
|
95
97
|
className: controlProps?.className,
|
|
96
98
|
style: controlProps?.style
|
|
97
99
|
}),
|
|
98
|
-
"aria-label": `${getLabel("selectMonth",
|
|
100
|
+
"aria-label": `${getLabel("selectMonth", resolvedLabels)} ${month.name}`,
|
|
99
101
|
children: month.name
|
|
100
102
|
}, month.name);
|
|
101
103
|
}) : null;
|
|
@@ -135,14 +137,14 @@ const MonthYearSelect = factory((_props) => {
|
|
|
135
137
|
...getStyles("monthYearSelectList"),
|
|
136
138
|
children: [/* @__PURE__ */ jsx("div", {
|
|
137
139
|
...getStyles("monthYearSelectLabel"),
|
|
138
|
-
children: getLabel("month",
|
|
140
|
+
children: getLabel("month", resolvedLabels)
|
|
139
141
|
}), months]
|
|
140
142
|
}), /* @__PURE__ */ jsxs("div", {
|
|
141
143
|
"data-list": true,
|
|
142
144
|
...getStyles("monthYearSelectList"),
|
|
143
145
|
children: [withMonths && /* @__PURE__ */ jsx("div", {
|
|
144
146
|
...getStyles("monthYearSelectLabel"),
|
|
145
|
-
children: getLabel("year",
|
|
147
|
+
children: getLabel("year", resolvedLabels)
|
|
146
148
|
}), years]
|
|
147
149
|
})]
|
|
148
150
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MonthYearSelect.mjs","names":["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.mjs","names":["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,4 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import { ScheduleHeaderLabelsContext } from "./ScheduleHeaderContext.mjs";
|
|
2
3
|
import { HeaderControl, ScheduleHeaderNext, ScheduleHeaderPrevious, ScheduleHeaderToday } from "./HeaderControl/HeaderControl.mjs";
|
|
3
4
|
import { MonthYearSelect } from "./MonthYearSelect/MonthYearSelect.mjs";
|
|
4
5
|
import { ViewSelect } from "./ViewSelect/ViewSelect.mjs";
|
|
@@ -10,23 +11,27 @@ const defaultProps = { __staticSelector: "ScheduleHeader" };
|
|
|
10
11
|
const varsResolver = createVarsResolver(() => ({ scheduleHeader: { "--test": "test" } }));
|
|
11
12
|
const ScheduleHeader = factory((_props) => {
|
|
12
13
|
const props = useProps("ScheduleHeader", defaultProps, _props);
|
|
13
|
-
const { classNames, className, style, styles, unstyled, vars, attributes, __staticSelector, ...others } = props;
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
14
|
+
const { classNames, className, style, styles, unstyled, vars, attributes, __staticSelector, labels, ...others } = props;
|
|
15
|
+
const getStyles = useStyles({
|
|
16
|
+
name: __staticSelector,
|
|
17
|
+
classes: ScheduleHeader_module_default,
|
|
18
|
+
props,
|
|
19
|
+
className,
|
|
20
|
+
style,
|
|
21
|
+
classNames,
|
|
22
|
+
styles,
|
|
23
|
+
unstyled,
|
|
24
|
+
vars,
|
|
25
|
+
varsResolver,
|
|
26
|
+
attributes,
|
|
27
|
+
rootSelector: "header"
|
|
28
|
+
});
|
|
29
|
+
return /* @__PURE__ */ jsx(ScheduleHeaderLabelsContext.Provider, {
|
|
30
|
+
value: labels,
|
|
31
|
+
children: /* @__PURE__ */ jsx(Box, {
|
|
32
|
+
...getStyles("header"),
|
|
33
|
+
...others
|
|
34
|
+
})
|
|
30
35
|
});
|
|
31
36
|
});
|
|
32
37
|
ScheduleHeader.displayName = "@mantine/schedule/ScheduleHeader";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScheduleHeader.mjs","names":["classes"],"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.mjs","names":["classes"],"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,eAAe,0BAAiD,EACpE,gBAAgB,EACd,UAAU,QACX,EACF,EAAE;AAEH,MAAa,iBAAiB,SAAgC,WAAW;CACvE,MAAM,QAAQ,SAAS,kBAAkB,cAAc,OAAO;CAC9D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,YACA,kBACA,QACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAiC;EACjD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACf,CAAC;AAEF,QACE,oBAAC,4BAA4B,UAA7B;EAAsC,OAAO;YAC3C,oBAAC,KAAD;GAAK,GAAI,UAAU,SAAS;GAAE,GAAI;GAAU,CAAA;EACP,CAAA;EAEzC;AAEF,eAAe,cAAc;AAC7B,eAAe,UAAUA;AACzB,eAAe,eAAe;AAC9B,eAAe,UAAU;AACzB,eAAe,OAAO;AACtB,eAAe,WAAW;AAC1B,eAAe,QAAQ;AACvB,eAAe,aAAa;AAC5B,eAAe,kBAAkB"}
|
|
@@ -28,6 +28,7 @@ function ScheduleHeaderBase({ view, navigationHandlers, control, labels, onDateC
|
|
|
28
28
|
}));
|
|
29
29
|
return /* @__PURE__ */ jsxs(ScheduleHeader, {
|
|
30
30
|
...stylesApiProps,
|
|
31
|
+
labels,
|
|
31
32
|
children: [
|
|
32
33
|
/* @__PURE__ */ jsxs("div", {
|
|
33
34
|
className: ScheduleHeader_module_default.navigationGroup,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScheduleHeaderBase.mjs","names":["classes"],"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,oBAAC,eAAe,iBAAhB;EACE,GAAI;EACI;EACR,GAAI,QAAQ;EACZ,CAAA,GAEF,oBAAC,eAAe,SAAhB;EAAwB,GAAI;EAAgB,aAAa;EAAO,KAAK,QAAQ;YAC1E,QAAQ;EACc,CAAA;CAI3B,MAAM,yBADQ,iBAAiB,SAAS,aACJ,KAAK,OAAO;EAC9C,OAAO;EACP,OAAO,SAAS,GAAG,OAAO;EAC3B,EAAE;AAEH,QACE,qBAAC,gBAAD;EAAgB,GAAI;
|
|
1
|
+
{"version":3,"file":"ScheduleHeaderBase.mjs","names":["classes"],"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,oBAAC,eAAe,iBAAhB;EACE,GAAI;EACI;EACR,GAAI,QAAQ;EACZ,CAAA,GAEF,oBAAC,eAAe,SAAhB;EAAwB,GAAI;EAAgB,aAAa;EAAO,KAAK,QAAQ;YAC1E,QAAQ;EACc,CAAA;CAI3B,MAAM,yBADQ,iBAAiB,SAAS,aACJ,KAAK,OAAO;EAC9C,OAAO;EACP,OAAO,SAAS,GAAG,OAAO;EAC3B,EAAE;AAEH,QACE,qBAAC,gBAAD;EAAgB,GAAI;EAAwB;YAA5C;GACE,qBAAC,OAAD;IAAK,WAAWA,8BAAQ;cAAxB;KACE,oBAAC,eAAe,UAAhB;MACE,GAAI;MACJ,eAAe,eAAe,mBAAmB,UAAU,CAAC;MACpD;MACR,GAAI;MACJ,CAAA;KAED;KAED,oBAAC,eAAe,MAAhB;MACE,GAAI;MACJ,eAAe,eAAe,mBAAmB,MAAM,CAAC;MAChD;MACR,GAAI;MACJ,CAAA;KACE;;GAEN,oBAAC,OAAD;IAAK,WAAWA,8BAAQ;cACtB,oBAAC,eAAe,OAAhB;KACE,GAAI;KACJ,eAAe,eAAe,mBAAmB,OAAO,CAAC;KACjD;KACR,GAAI;KACJ,CAAA;IACE,CAAA;GAEN,oBAAC,cAAD;IACE,WAAWA,8BAAQ;IACnB,MAAM;IACN,OAAO;IACP,WAAW,UAAU,eAAe,MAAM,cAAc,MAA2B;IACnF,cAAY,SAAS,mBAAmB,OAAO;IAC/C,MAAK;IACL,CAAA;GAEF,oBAAC,OAAD;IAAK,WAAWA,8BAAQ;IAAY,OAAO,EAAE,mBAAmB,QAAQ;cACtE,oBAAC,eAAe,YAAhB;KACE,OAAO;KACP,UAAU;KACF;KACR,GAAI;KACJ,GAAI;KACJ,CAAA;IACE,CAAA;GACS"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { createContext, useContext } from "react";
|
|
3
|
+
//#region packages/@mantine/schedule/src/components/ScheduleHeader/ScheduleHeaderContext.ts
|
|
4
|
+
const ScheduleHeaderLabelsContext = createContext(void 0);
|
|
5
|
+
ScheduleHeaderLabelsContext.displayName = "@mantine/schedule/ScheduleHeaderLabelsContext";
|
|
6
|
+
function useScheduleHeaderLabels(override) {
|
|
7
|
+
const contextLabels = useContext(ScheduleHeaderLabelsContext);
|
|
8
|
+
if (!override) return contextLabels;
|
|
9
|
+
if (!contextLabels) return override;
|
|
10
|
+
return {
|
|
11
|
+
...contextLabels,
|
|
12
|
+
...override
|
|
13
|
+
};
|
|
14
|
+
}
|
|
15
|
+
//#endregion
|
|
16
|
+
export { ScheduleHeaderLabelsContext, useScheduleHeaderLabels };
|
|
17
|
+
|
|
18
|
+
//# sourceMappingURL=ScheduleHeaderContext.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScheduleHeaderContext.mjs","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,8BAA8B,cACzC,KAAA,EACD;AACD,4BAA4B,cAAc;AAE1C,SAAgB,wBACd,UACoC;CACpC,MAAM,gBAAgB,WAAW,4BAA4B;AAC7D,KAAI,CAAC,SACH,QAAO;AAET,KAAI,CAAC,cACH,QAAO;AAET,QAAO;EAAE,GAAG;EAAe,GAAG;EAAU"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { getLabel } from "../../../labels.mjs";
|
|
3
|
+
import { useScheduleHeaderLabels } from "../ScheduleHeaderContext.mjs";
|
|
3
4
|
import { HeaderControl } from "../HeaderControl/HeaderControl.mjs";
|
|
4
5
|
import ViewSelect_module_default from "./ViewSelect.module.mjs";
|
|
5
6
|
import { Box, factory, useDirection, useProps, useResolvedStylesApi, useStyles } from "@mantine/core";
|
|
@@ -31,6 +32,7 @@ const ViewSelect = factory((_props) => {
|
|
|
31
32
|
vars,
|
|
32
33
|
rootSelector: "viewSelect"
|
|
33
34
|
});
|
|
35
|
+
const resolvedLabels = useScheduleHeaderLabels(labels);
|
|
34
36
|
const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
|
|
35
37
|
classNames,
|
|
36
38
|
styles,
|
|
@@ -87,16 +89,16 @@ const ViewSelect = factory((_props) => {
|
|
|
87
89
|
__staticSelector,
|
|
88
90
|
radius,
|
|
89
91
|
role: "tab",
|
|
90
|
-
"aria-label": getLabel(switchToLabelKeys[view],
|
|
92
|
+
"aria-label": getLabel(switchToLabelKeys[view], resolvedLabels),
|
|
91
93
|
"aria-selected": isSelected,
|
|
92
94
|
tabIndex: isSelected ? 0 : -1,
|
|
93
|
-
children: getLabel(view,
|
|
95
|
+
children: getLabel(view, resolvedLabels)
|
|
94
96
|
}, view);
|
|
95
97
|
});
|
|
96
98
|
return /* @__PURE__ */ jsx(Box, {
|
|
97
99
|
...getStyles("viewSelect"),
|
|
98
100
|
role: "tablist",
|
|
99
|
-
"aria-label": getLabel("viewSelectLabel",
|
|
101
|
+
"aria-label": getLabel("viewSelectLabel", resolvedLabels),
|
|
100
102
|
...others,
|
|
101
103
|
children: items
|
|
102
104
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ViewSelect.mjs","names":["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.mjs","names":["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,aAAa,SAA4B,WAAW;CAC/D,MAAM,QAAQ,SAAS,cAAc,cAAc,OAAO;CAC1D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,YACA,OACA,UACA,OACA,kBACA,QACA,QACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA6B;EAC7C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACf,CAAC;CAEF,MAAM,iBAAiB,wBAAwB,OAAO;CAEtD,MAAM,EAAE,oBAAoB,mBAAmB,qBAAwC;EACrF;EACA;EACA;EACD,CAAC;CAEF,MAAM,EAAE,QAAQ,cAAc;CAC9B,MAAM,cAAc,OAAqC,EAAE,CAAC;CAC5D,MAAM,2BAA2B,OAAO,MAAM;AAK9C,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,oBAAC,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,cAAY,SAAS,kBAAkB,OAAO,eAAe;GAC7D,iBAAe;GACf,UAAU,aAAa,IAAI;aAE1B,SAAS,MAAM,eAAe;GACjB,EAlBT,KAkBS;GAElB;AAEF,QACE,oBAAC,KAAD;EACE,GAAI,UAAU,aAAa;EAC3B,MAAK;EACL,cAAY,SAAS,mBAAmB,eAAe;EACvD,GAAI;YAEH;EACG,CAAA;EAER;AAEF,WAAW,cAAc;AACzB,WAAW,UAAUA"}
|