@mantine/schedule 9.5.1 → 9.6.0

package/cjs/components/ScheduleHeader/ScheduleHeader.cjs.map

@@ -1 +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,iBACpB;AAEA,MAAM,gBAAA,GAAA,cAAA,mBAAA,QAAgE,EACpE,gBAAgB,EACd,UAAU,OACZ,EACF,EAAE;AAEF,MAAa,kBAAA,GAAA,cAAA,QAAA,EAAiD,WAAW;CACvE,MAAM,SAAA,GAAA,cAAA,SAAA,CAAiB,kBAAkB,cAAc,MAAM;CAC7D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,YACA,kBACA,QACA,GAAG,WACD;CAEJ,MAAM,aAAA,GAAA,cAAA,UAAA,CAA6C;EACjD,MAAM;EACN,SAAA,8BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,8BAAAA,4BAA4B,UAA7B;EAAsC,OAAO;YAC3C,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,KAAD;GAAK,GAAI,UAAU,QAAQ;GAAG,GAAI;EAAS,CAAA;CACP,CAAA;AAE1C,CAAC;AAED,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"}
+{"version":3,"file":"ScheduleHeader.cjs","names":["createVarsResolver","factory","useProps","useStyles","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,iBACpB;AAEA,MAAM,gBAAA,GAAeA,cAAAA,mBAAAA,QAAiD,EACpE,gBAAgB,EACd,UAAU,OACZ,EACF,EAAE;AAEF,MAAa,kBAAA,GAAiBC,cAAAA,QAAAA,EAAgC,WAAW;CACvE,MAAM,SAAA,GAAQC,cAAAA,SAAAA,CAAS,kBAAkB,cAAc,MAAM;CAC7D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,YACA,kBACA,QACA,GAAG,WACD;CAEJ,MAAM,aAAA,GAAYC,cAAAA,UAAAA,CAAiC;EACjD,MAAM;EACN,SAAA,8BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,8BAAAA,4BAA4B,UAA7B;EAAsC,OAAO;EAC3C,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,KAAD;GAAK,GAAI,UAAU,QAAQ;GAAG,GAAI;EAAS,CAAA;CACP,CAAA;AAE1C,CAAC;AAED,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"}

package/cjs/components/ScheduleHeader/ScheduleHeaderBase.cjs.map

@@ -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  /** Called when agenda button is clicked */\n  onAgendaClick?: () => void;\n\n  /** Whether the agenda view is currently active */\n  agendaActive?: boolean;\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  onAgendaClick,\n  agendaActive,\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        {onAgendaClick && (\n          <ScheduleHeader.Control\n            {...stylesApiProps}\n            data-type=\"agenda\"\n            active={agendaActive}\n            onClick={onAgendaClick}\n            aria-label={getLabel('agenda', labels) as string}\n          >\n            {getLabel('agenda', labels)}\n          </ScheduleHeader.Control>\n        )}\n      </div>\n\n      <div className={classes.compactControls}>\n        {onAgendaClick && (\n          <ScheduleHeader.Control\n            {...stylesApiProps}\n            data-type=\"agenda\"\n            active={agendaActive}\n            onClick={onAgendaClick}\n            aria-label={getLabel('agenda', labels) as string}\n            className={classes.compactAgendaControl}\n          >\n            {getLabel('agenda', labels)}\n          </ScheduleHeader.Control>\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      </div>\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":";;;;;;;AA2EA,MAAM,cAAmC;CAAC;CAAO;CAAQ;CAAS;AAAM;AAExE,SAAgB,mBAAmB,EACjC,MACA,oBACA,SACA,QACA,cACA,cACA,sBACA,kBACA,mBACA,iBACA,gBACA,eACA,gBAC0B;CAC1B,MAAM,iBAAiB,QAAQ,kBAC7B,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,eAAe,iBAAhB;EACE,GAAI;EACI;EACR,GAAI,QAAQ;CACb,CAAA,IAED,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,eAAe,SAAhB;EAAwB,GAAI;EAAgB,aAAa;EAAO,KAAK,QAAQ;YAC1E,QAAQ;CACa,CAAA;CAI1B,MAAM,yBADQ,iBAAiB,SAAS,YAAA,CACJ,KAAK,OAAO;EAC9C,OAAO;EACP,OAAOC,eAAAA,SAAS,GAAG,MAAM;CAC3B,EAAE;CAEF,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACD,uBAAAA,gBAAD;EAAgB,GAAI;EAAwB;YAA5C;GACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAWE,8BAAAA,QAAQ;cAAxB;KACE,iBAAA,GAAA,kBAAA,IAAA,CAACF,uBAAAA,eAAe,UAAhB;MACE,GAAI;MACJ,eAAe,eAAe,mBAAmB,SAAS,CAAC;MACnD;MACR,GAAI;KACL,CAAA;KAEA;KAED,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,eAAe,MAAhB;MACE,GAAI;MACJ,eAAe,eAAe,mBAAmB,KAAK,CAAC;MAC/C;MACR,GAAI;KACL,CAAA;IACE;;GAEL,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAWE,8BAAAA,QAAQ;cAAxB,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACF,uBAAAA,eAAe,OAAhB;KACE,GAAI;KACJ,eAAe,eAAe,mBAAmB,MAAM,CAAC;KAChD;KACR,GAAI;IACL,CAAA,GACA,iBACC,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,eAAe,SAAhB;KACE,GAAI;KACJ,aAAU;KACV,QAAQ;KACR,SAAS;KACT,cAAYC,eAAAA,SAAS,UAAU,MAAM;eAEpCA,eAAAA,SAAS,UAAU,MAAM;IACJ,CAAA,CAEvB;;GAEL,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAWC,8BAAAA,QAAQ;cAAxB,CACG,iBACC,iBAAA,GAAA,kBAAA,IAAA,CAACF,uBAAAA,eAAe,SAAhB;KACE,GAAI;KACJ,aAAU;KACV,QAAQ;KACR,SAAS;KACT,cAAYC,eAAAA,SAAS,UAAU,MAAM;KACrC,WAAWC,8BAAAA,QAAQ;eAElBD,eAAAA,SAAS,UAAU,MAAM;IACJ,CAAA,GAE1B,iBAAA,GAAA,kBAAA,IAAA,CAACE,cAAAA,cAAD;KACE,WAAWD,8BAAAA,QAAQ;KACnB,MAAM;KACN,OAAO;KACP,WAAW,UAAU,eAAe,MAAM,cAAc,KAA0B;KAClF,cAAYD,eAAAA,SAAS,mBAAmB,MAAM;KAC9C,MAAK;IACN,CAAA,CACE;;GAEL,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,WAAWC,8BAAAA,QAAQ;IAAY,OAAO,EAAE,mBAAmB,OAAO;cACrE,iBAAA,GAAA,kBAAA,IAAA,CAACF,uBAAAA,eAAe,YAAhB;KACE,OAAO;KACP,UAAU;KACF;KACR,GAAI;KACJ,GAAI;IACL,CAAA;GACE,CAAA;EACS;;AAEpB"}
+{"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  /** Called when agenda button is clicked */\n  onAgendaClick?: () => void;\n\n  /** Whether the agenda view is currently active */\n  agendaActive?: boolean;\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  onAgendaClick,\n  agendaActive,\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        {onAgendaClick && (\n          <ScheduleHeader.Control\n            {...stylesApiProps}\n            data-type=\"agenda\"\n            active={agendaActive}\n            onClick={onAgendaClick}\n            aria-label={getLabel('agenda', labels) as string}\n          >\n            {getLabel('agenda', labels)}\n          </ScheduleHeader.Control>\n        )}\n      </div>\n\n      <div className={classes.compactControls}>\n        {onAgendaClick && (\n          <ScheduleHeader.Control\n            {...stylesApiProps}\n            data-type=\"agenda\"\n            active={agendaActive}\n            onClick={onAgendaClick}\n            aria-label={getLabel('agenda', labels) as string}\n            className={classes.compactAgendaControl}\n          >\n            {getLabel('agenda', labels)}\n          </ScheduleHeader.Control>\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      </div>\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":";;;;;;;AA2EA,MAAM,cAAmC;CAAC;CAAO;CAAQ;CAAS;AAAM;AAExE,SAAgB,mBAAmB,EACjC,MACA,oBACA,SACA,QACA,cACA,cACA,sBACA,kBACA,mBACA,iBACA,gBACA,eACA,gBAC0B;CAC1B,MAAM,iBAAiB,QAAQ,kBAC7B,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,eAAe,iBAAhB;EACE,GAAI;EACI;EACR,GAAI,QAAQ;CACb,CAAA,IAED,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,eAAe,SAAhB;EAAwB,GAAI;EAAgB,aAAa;EAAO,KAAK,QAAQ;EAC1E,UAAA,QAAQ;CACa,CAAA;CAI1B,MAAM,yBADQ,iBAAiB,SAAS,YAAA,CACJ,KAAK,OAAO;EAC9C,OAAO;EACP,OAAOC,eAAAA,SAAS,GAAG,MAAM;CAC3B,EAAE;CAEF,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACD,uBAAAA,gBAAD;EAAgB,GAAI;EAAwB;EAA5C,UAAA;GACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAWE,8BAAAA,QAAQ;IAAxB,UAAA;KACE,iBAAA,GAAA,kBAAA,IAAA,CAACF,uBAAAA,eAAe,UAAhB;MACE,GAAI;MACJ,eAAe,eAAe,mBAAmB,SAAS,CAAC;MACnD;MACR,GAAI;KACL,CAAA;KAEA;KAED,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,eAAe,MAAhB;MACE,GAAI;MACJ,eAAe,eAAe,mBAAmB,KAAK,CAAC;MAC/C;MACR,GAAI;KACL,CAAA;IACE;;GAEL,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAWE,8BAAAA,QAAQ;IAAxB,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACF,uBAAAA,eAAe,OAAhB;KACE,GAAI;KACJ,eAAe,eAAe,mBAAmB,MAAM,CAAC;KAChD;KACR,GAAI;IACL,CAAA,GACA,iBACC,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,eAAe,SAAhB;KACE,GAAI;KACJ,aAAU;KACV,QAAQ;KACR,SAAS;KACT,cAAYC,eAAAA,SAAS,UAAU,MAAM;KAEpCA,UAAAA,eAAAA,SAAS,UAAU,MAAM;IACJ,CAAA,CAEvB;;GAEL,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAWC,8BAAAA,QAAQ;IAAxB,UAAA,CACG,iBACC,iBAAA,GAAA,kBAAA,IAAA,CAACF,uBAAAA,eAAe,SAAhB;KACE,GAAI;KACJ,aAAU;KACV,QAAQ;KACR,SAAS;KACT,cAAYC,eAAAA,SAAS,UAAU,MAAM;KACrC,WAAWC,8BAAAA,QAAQ;KAElBD,UAAAA,eAAAA,SAAS,UAAU,MAAM;IACJ,CAAA,GAE1B,iBAAA,GAAA,kBAAA,IAAA,CAACE,cAAAA,cAAD;KACE,WAAWD,8BAAAA,QAAQ;KACnB,MAAM;KACN,OAAO;KACP,WAAW,UAAU,eAAe,MAAM,cAAc,KAA0B;KAClF,cAAYD,eAAAA,SAAS,mBAAmB,MAAM;KAC9C,MAAK;IACN,CAAA,CACE;;GAEL,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,WAAWC,8BAAAA,QAAQ;IAAY,OAAO,EAAE,mBAAmB,OAAO;IACrE,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACF,uBAAAA,eAAe,YAAhB;KACE,OAAO;KACP,UAAU;KACF;KACR,GAAI;KACJ,GAAI;IACL,CAAA;GACE,CAAA;EACS;;AAEpB"}

package/cjs/components/ScheduleHeader/ScheduleHeaderContext.cjs.map

@@ -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,cAAA,CACX,KAAA,CACF;AACA,4BAA4B,cAAc;AAE1C,SAAgB,wBACd,UACoC;CACpC,MAAM,iBAAA,GAAA,MAAA,WAAA,CAA2B,2BAA2B;CAC5D,IAAI,CAAC,UACH,OAAO;CAET,IAAI,CAAC,eACH,OAAO;CAET,OAAO;EAAE,GAAG;EAAe,GAAG;CAAS;AACzC"}
+{"version":3,"file":"ScheduleHeaderContext.cjs","names":["createContext","useContext"],"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,GAA8BA,MAAAA,cAAAA,CACzC,KAAA,CACF;AACA,4BAA4B,cAAc;AAE1C,SAAgB,wBACd,UACoC;CACpC,MAAM,iBAAA,GAAgBC,MAAAA,WAAAA,CAAW,2BAA2B;CAC5D,IAAI,CAAC,UACH,OAAO;CAET,IAAI,CAAC,eACH,OAAO;CAET,OAAO;EAAE,GAAG;EAAe,GAAG;CAAS;AACzC"}

package/cjs/components/ScheduleHeader/ViewSelect/ViewSelect.cjs.map

@@ -1 +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":"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"}
+{"version":3,"file":"ViewSelect.cjs","names":["factory","useProps","useStyles","useScheduleHeaderLabels","useResolvedStylesApi","useDirection","useRef","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":"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"}

package/cjs/components/WeekView/WeekView.cjs

@@ -9,6 +9,7 @@ const require_get_week_days = require("../../utils/get-week-days/get-week-days.c
 const require_next_week = require("../../utils/next-week/next-week.cjs");
 const require_previous_week = require("../../utils/previous-week/previous-week.cjs");
 const require_is_all_day_event = require("../../utils/is-all-day-event/is-all-day-event.cjs");
+const require_get_day_position = require("../../utils/get-day-position/get-day-position.cjs");
 const require_get_time_axis_event_style = require("../../utils/get-time-axis-event-style/get-time-axis-event-style.cjs");
 const require_calculate_drop_time = require("../../utils/calculate-drop-time/calculate-drop-time.cjs");
 const require_get_business_hours_mod = require("../../utils/get-business-hours-mod/get-business-hours-mod.cjs");
@@ -21,6 +22,7 @@ const require_AgendaView = require("../AgendaView/AgendaView.cjs");
 const require_CurrentTimeIndicator = require("../CurrentTimeIndicator/CurrentTimeIndicator.cjs");
 const require_DragContext = require("../DragContext/DragContext.cjs");
 const require_ScheduleEvent = require("../ScheduleEvent/ScheduleEvent.cjs");
+const require_ScheduleBackgroundEvent = require("../ScheduleBackgroundEvent/ScheduleBackgroundEvent.cjs");
 const require_ScheduleHeaderBase = require("../ScheduleHeader/ScheduleHeaderBase.cjs");
 const require_get_week_label = require("./get-week-label/get-week-label.cjs");
 const require_get_week_view_events = require("./get-week-view-events/get-week-view-events.cjs");
@@ -55,7 +57,8 @@ const defaultProps = {
 	withEventsDragAndDrop: false,
 	withDragSlotSelect: false,
 	withEventResize: false,
-	mode: "default"
+	mode: "default",
+	withInteractiveBackgroundEvents: false
 };
 const varsResolver = (0, _mantine_core.createVarsResolver)((_theme, { radius, allDaySlotHeight, slotHeight }) => ({ weekView: {
 	"--week-view-radius": radius !== void 0 ? (0, _mantine_core.getRadius)(radius) : void 0,
@@ -64,7 +67,7 @@ const varsResolver = (0, _mantine_core.createVarsResolver)((_theme, { radius, al
 } }));
 const WeekView = (0, _mantine_core.factory)((_props) => {
 	const props = (0, _mantine_core.useProps)("WeekView", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, attributes, vars, startTime, endTime, date, onDateChange, intervalMinutes, withSubHourGridLines, slotLabelFormat, withWeekendDays, weekendDays, firstDayOfWeek, weekdayFormat, radius, highlightToday, withCurrentTimeIndicator, forceCurrentTimeIndicator, getCurrentTime, scrollAreaProps, locale, withWeekNumber, withCurrentTimeBubble, withAllDaySlots, __staticSelector, withHeader, onViewChange, previousControlProps, nextControlProps, todayControlProps, viewSelectProps, weekLabelFormat, events, allDaySlotHeight, slotHeight, labels, highlightBusinessHours, businessHours, renderEventBody, renderEvent, withEventsDragAndDrop, onEventDrop, canDragEvent, onEventDragStart, onEventDragEnd, onTimeSlotClick, onAllDaySlotClick, onEventClick, withDragSlotSelect, onSlotDragEnd, mode, startScrollTime, renderWeekLabel, onExternalEventDrop, withEventResize, onEventResize, canResizeEvent, recurrenceExpansionLimit, getTimeSlotProps, withAgenda, ...others } = props;
+	const { classNames, className, style, styles, unstyled, attributes, vars, startTime, endTime, date, onDateChange, intervalMinutes, withSubHourGridLines, slotLabelFormat, withWeekendDays, weekendDays, firstDayOfWeek, weekdayFormat, radius, highlightToday, withCurrentTimeIndicator, forceCurrentTimeIndicator, getCurrentTime, scrollAreaProps, locale, withWeekNumber, withCurrentTimeBubble, withAllDaySlots, __staticSelector, withHeader, onViewChange, previousControlProps, nextControlProps, todayControlProps, viewSelectProps, weekLabelFormat, events, allDaySlotHeight, slotHeight, labels, highlightBusinessHours, businessHours, renderEventBody, renderEvent, withEventsDragAndDrop, onEventDrop, canDragEvent, eventDragInterval, onEventDragStart, onEventDragEnd, onTimeSlotClick, onAllDaySlotClick, onEventClick, withInteractiveBackgroundEvents, withDragSlotSelect, onSlotDragEnd, mode, startScrollTime, renderWeekLabel, onExternalEventDrop, withEventResize, onEventResize, canResizeEvent, eventResizeInterval, recurrenceExpansionLimit, getTimeSlotProps, withAgenda, ...others } = props;
 	const [agendaOpen, setAgendaOpen] = (0, react.useState)(false);
 	const getStyles = (0, _mantine_core.useStyles)({
 		name: __staticSelector,
@@ -92,7 +95,6 @@ const WeekView = (0, _mantine_core.factory)((_props) => {
 		__staticSelector,
 		radius
 	};
-	const theme = (0, _mantine_core.useMantineTheme)();
 	const [scrolled, setScrolled] = (0, react.useState)(false);
 	const ctx = (0, _mantine_dates.useDatesContext)();
 	const slots = require_get_day_time_intervals.getDayTimeIntervals({
@@ -105,11 +107,56 @@ const WeekView = (0, _mantine_core.factory)((_props) => {
 		viewportRef,
 		enabled: (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== "static"
 	});
+	const dragOffsetRef = (0, react.useRef)({
+		offset: 0,
+		size: 0
+	});
+	const getDropTimeForSlot = (target, draggedEvent) => {
+		const slotTime = slots[target.slotIndex].startTime;
+		return require_calculate_drop_time.calculateDropTime({
+			draggedEvent,
+			targetDate: target.day,
+			targetSlotTime: slotTime,
+			intervalMinutes,
+			dragIntervalMinutes: eventDragInterval,
+			slotOffset: eventDragInterval == null ? void 0 : dragOffsetRef.current.offset,
+			slotSize: eventDragInterval == null ? void 0 : dragOffsetRef.current.size,
+			startTime,
+			endTime
+		});
+	};
 	const handleExternalDrop = (0, react.useCallback)((e, target) => {
 		if (!onExternalEventDrop) return;
 		const slotDate = (0, dayjs.default)(target.day).format("YYYY-MM-DD");
-		onExternalEventDrop(e.dataTransfer, `${slotDate} ${slots[target.slotIndex].startTime}`);
-	}, [onExternalEventDrop, slots]);
+		const slotTime = slots[target.slotIndex].startTime;
+		if (eventDragInterval == null) {
+			onExternalEventDrop(e.dataTransfer, `${slotDate} ${slotTime}`);
+			return;
+		}
+		const slotStart = `${slotDate} ${slotTime}`;
+		const { start } = require_calculate_drop_time.calculateDropTime({
+			draggedEvent: {
+				start: slotStart,
+				end: slotStart
+			},
+			targetDate: target.day,
+			targetSlotTime: slotTime,
+			intervalMinutes,
+			dragIntervalMinutes: eventDragInterval,
+			slotOffset: dragOffsetRef.current.offset,
+			slotSize: dragOffsetRef.current.size,
+			startTime,
+			endTime
+		});
+		onExternalEventDrop(e.dataTransfer, (0, dayjs.default)(start).format("YYYY-MM-DD HH:mm:ss"));
+	}, [
+		onExternalEventDrop,
+		slots,
+		eventDragInterval,
+		intervalMinutes,
+		startTime,
+		endTime
+	]);
 	const handleExternalAllDayDrop = (0, react.useCallback)((e, day) => {
 		if (!onExternalEventDrop) return;
 		onExternalEventDrop(e.dataTransfer, `${(0, dayjs.default)(day).format("YYYY-MM-DD")} 00:00:00`);
@@ -121,17 +168,21 @@ const WeekView = (0, _mantine_core.factory)((_props) => {
 		canDragEvent,
 		onEventDragStart,
 		onEventDragEnd,
-		calculateDropTarget: (target, draggedEvent) => {
-			const slotTime = slots[target.slotIndex].startTime;
-			return require_calculate_drop_time.calculateDropTime({
-				draggedEvent,
-				targetDate: target.day,
-				targetSlotTime: slotTime,
-				intervalMinutes
-			});
-		},
+		calculateDropTarget: getDropTimeForSlot,
 		onExternalDrop: onExternalEventDrop ? handleExternalDrop : void 0
 	});
+	const updateDragPreview = (target) => {
+		const draggedEvent = dragDrop.dragContextValue.draggedEvent;
+		if (eventDragInterval == null || !draggedEvent) return;
+		const { start, end } = getDropTimeForSlot(target, draggedEvent);
+		const newStart = (0, dayjs.default)(start).format("YYYY-MM-DD HH:mm:ss");
+		if (dragDrop.dragPreview?.start !== newStart || dragDrop.dragPreview?.target.day !== target.day) dragDrop.setDragPreview({
+			start: newStart,
+			end: (0, dayjs.default)(end).format("YYYY-MM-DD HH:mm:ss"),
+			target
+		});
+	};
+	const suppressDropHighlight = eventDragInterval != null && dragDrop.dragContextValue.isDragging;
 	const allDayDragDrop = require_use_drag_drop_handlers.useDragDropHandlers({
 		enabled: withEventsDragAndDrop,
 		mode,
@@ -163,6 +214,7 @@ const WeekView = (0, _mantine_core.factory)((_props) => {
 		startTime,
 		endTime,
 		intervalMinutes,
+		resizeIntervalMinutes: eventResizeInterval,
 		onEventResize,
 		canResizeEvent
 	});
@@ -185,14 +237,15 @@ const WeekView = (0, _mantine_core.factory)((_props) => {
 		weekendDays: ctx.getWeekendDays(weekendDays),
 		firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek)
 	});
+	const expandedEvents = require_expand_recurring_events.expandRecurringEvents({
+		events,
+		rangeStart: (0, dayjs.default)(weekdays[0]).startOf("day").toDate(),
+		rangeEnd: (0, dayjs.default)(weekdays[weekdays.length - 1]).endOf("day").toDate(),
+		expansionLimit: recurrenceExpansionLimit
+	});
 	const weekEvents = require_get_week_view_events.getWeekViewEvents({
 		date,
-		events: require_expand_recurring_events.expandRecurringEvents({
-			events,
-			rangeStart: (0, dayjs.default)(weekdays[0]).startOf("day").toDate(),
-			rangeEnd: (0, dayjs.default)(weekdays[weekdays.length - 1]).endOf("day").toDate(),
-			expansionLimit: recurrenceExpansionLimit
-		}),
+		events: expandedEvents,
 		startTime,
 		endTime,
 		intervalMinutes,
@@ -202,8 +255,9 @@ const WeekView = (0, _mantine_core.factory)((_props) => {
 	});
 	const timeValues = slots.reduce((acc, interval) => {
 		if (!interval.isHourStart) return acc;
+		const intervalTime = (0, dayjs.default)(`${(0, dayjs.default)(date).format("YYYY-MM-DD")} ${interval.startTime}`);
 		const label = require_format_date.formatDate({
-			date: (0, dayjs.default)(`${(0, dayjs.default)(date).format("YYYY-MM-DD")} ${interval.startTime}`),
+			date: intervalTime,
 			locale: ctx.getLocale(locale),
 			format: slotLabelFormat
 		});
@@ -252,14 +306,33 @@ const WeekView = (0, _mantine_core.factory)((_props) => {
 			const rect = slotNode.getBoundingClientRect();
 			return event.clientY >= rect.top && event.clientY <= rect.bottom;
 		});
-		if (slotIndex >= 0) return slotIndex;
+		if (slotIndex >= 0) {
+			const rect = daySlots[slotIndex].getBoundingClientRect();
+			dragOffsetRef.current = {
+				offset: event.clientY - rect.top,
+				size: rect.height
+			};
+			return slotIndex;
+		}
 		const firstSlot = daySlots[0];
 		const lastSlot = daySlots[daySlots.length - 1];
 		if (!firstSlot || !lastSlot) return null;
 		const firstRect = firstSlot.getBoundingClientRect();
 		const lastRect = lastSlot.getBoundingClientRect();
-		if (event.clientY < firstRect.top) return 0;
-		if (event.clientY > lastRect.bottom) return daySlots.length - 1;
+		if (event.clientY < firstRect.top) {
+			dragOffsetRef.current = {
+				offset: 0,
+				size: firstRect.height
+			};
+			return 0;
+		}
+		if (event.clientY > lastRect.bottom) {
+			dragOffsetRef.current = {
+				offset: lastRect.height,
+				size: lastRect.height
+			};
+			return daySlots.length - 1;
+		}
 		return null;
 	}, []);
 	const handleSlotKeyDown = (event, dayIndex, slotIndex) => {
@@ -325,32 +398,20 @@ const WeekView = (0, _mantine_core.factory)((_props) => {
 		...getStyles("weekViewDayNumber"),
 		key: "date"
 	}, (0, dayjs.default)(day).date())));
+	const interactiveBackgroundEvents = withInteractiveBackgroundEvents && mode !== "static";
 	const days = weekdays.map((day, dayIndex) => {
-		const backgroundEventNodes = (weekEvents.backgroundEvents[day] || []).filter((event) => !event.position.allDay).map((event) => {
-			const colors = theme.variantColorResolver({
-				color: event.color || theme.primaryColor,
-				theme,
-				variant: "light",
-				autoContrast: true
-			});
-			const bgEventBody = typeof renderEventBody === "function" ? renderEventBody(event) : event.title;
-			const bgEventProps = {
-				key: `bg-${event.id}`,
-				...getStyles("weekViewBackgroundEvent", { style: {
-					top: `${event.position.top}%`,
-					height: `${event.position.height}%`,
-					width: "100%"
-				} }),
-				__vars: {
-					"--bg-event-bg": colors.background,
-					"--bg-event-color": colors.color
-				},
-				children: bgEventBody
-			};
-			if (typeof renderEvent === "function") return renderEvent(event, bgEventProps);
-			const { key: bgEventKey, ...restBgEventProps } = bgEventProps;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, { ...restBgEventProps }, bgEventKey);
-		});
+		const backgroundEventNodes = (weekEvents.backgroundEvents[day] || []).filter((event) => !event.position.allDay).map((event) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScheduleBackgroundEvent.ScheduleBackgroundEvent, {
+			event,
+			renderEvent,
+			renderEventBody,
+			interactive: interactiveBackgroundEvents,
+			onEventClick,
+			...getStyles("weekViewBackgroundEvent", { style: {
+				top: `${event.position.top}%`,
+				height: `${event.position.height}%`,
+				width: "100%"
+			} })
+		}, `bg-${event.id}`));
 		const dayEvents = (weekEvents.regularEvents[day] || []).map((event) => {
 			const eventIsAllDay = require_is_all_day_event.isAllDayEvent({
 				event,
@@ -420,10 +481,16 @@ const WeekView = (0, _mantine_core.factory)((_props) => {
 			} : void 0,
 			onDaySlotsDragOver: (event, dayStr, dayIdx) => {
 				const slotIndex = getSlotIndexFromDragPoint(event, dayIdx);
-				if (slotIndex !== null) dragDrop.handleDragOver(event, {
-					day: dayStr,
-					slotIndex
-				});
+				if (slotIndex !== null) {
+					dragDrop.handleDragOver(event, {
+						day: dayStr,
+						slotIndex
+					});
+					updateDragPreview({
+						day: dayStr,
+						slotIndex
+					});
+				}
 			},
 			onDaySlotsDragLeave: dragDrop.handleDragLeave,
 			onDaySlotsDrop: (event, dayStr, dayIdx) => {
@@ -433,7 +500,7 @@ const WeekView = (0, _mantine_core.factory)((_props) => {
 					slotIndex
 				});
 			},
-			dropTargetSlotIndex: dragDrop.dropTarget?.day === day ? dragDrop.dropTarget.slotIndex : void 0,
+			dropTargetSlotIndex: !suppressDropHighlight && dragDrop.dropTarget?.day === day ? dragDrop.dropTarget.slotIndex : void 0,
 			withDragSlotSelect,
 			onSlotPointerDown: slotDragSelect.handleSlotPointerDown,
 			isSlotDragSelected: slotDragSelect.isSlotSelected,
@@ -441,7 +508,29 @@ const WeekView = (0, _mantine_core.factory)((_props) => {
 				daySlotsContainersRef.current[dayIndex] = node;
 			},
 			getTimeSlotProps,
-			children: [backgroundEventNodes, dayEvents]
+			children: [
+				backgroundEventNodes,
+				dayEvents,
+				dragDrop.dragPreview?.target.day === day && dragDrop.dragContextValue.draggedEvent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, { ...getStyles("weekViewDragPreview", { style: (() => {
+					const { top, height } = require_get_day_position.getDayPosition({
+						event: {
+							...dragDrop.dragContextValue.draggedEvent,
+							start: dragDrop.dragPreview.start,
+							end: dragDrop.dragPreview.end
+						},
+						startTime,
+						endTime,
+						intervalMinutes
+					});
+					return {
+						position: "absolute",
+						insetInlineStart: 0,
+						insetInlineEnd: 0,
+						top: `${top}%`,
+						height: `${height}%`
+					};
+				})() }) })
+			]
 		}, day);
 	});
 	const allDaySlots = weekdays.map((day, dayIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.UnstyledButton, {
@@ -482,32 +571,19 @@ const WeekView = (0, _mantine_core.factory)((_props) => {
 		const allDayBgEvents = (weekEvents.backgroundEvents[day] || []).filter((event) => event.position.allDay);
 		const dayWidth = 100 / weekdays.length;
 		const dayOffset = dayIndex * dayWidth;
-		return allDayBgEvents.map((event) => {
-			const colors = theme.variantColorResolver({
-				color: event.color || theme.primaryColor,
-				theme,
-				variant: "light",
-				autoContrast: true
-			});
-			const bgEventBody = typeof renderEventBody === "function" ? renderEventBody(event) : event.title;
-			const bgEventProps = {
-				key: `bg-allday-${event.id}-${day}`,
-				...getStyles("weekViewBackgroundEvent", { style: {
-					top: 0,
-					height: "100%",
-					left: `${dayOffset}%`,
-					width: `${dayWidth}%`
-				} }),
-				__vars: {
-					"--bg-event-bg": colors.background,
-					"--bg-event-color": colors.color
-				},
-				children: bgEventBody
-			};
-			if (typeof renderEvent === "function") return renderEvent(event, bgEventProps);
-			const { key: bgEventKey, ...restBgEventProps } = bgEventProps;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, { ...restBgEventProps }, bgEventKey);
-		});
+		return allDayBgEvents.map((event) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScheduleBackgroundEvent.ScheduleBackgroundEvent, {
+			event,
+			renderEvent,
+			renderEventBody,
+			interactive: interactiveBackgroundEvents,
+			onEventClick,
+			...getStyles("weekViewBackgroundEvent", { style: {
+				top: 0,
+				height: "100%",
+				left: `${dayOffset}%`,
+				width: `${dayWidth}%`
+			} })
+		}, `bg-allday-${event.id}-${day}`));
 	});
 	const extraRows = Math.max(...weekEvents.allDayEvents.map((event) => event.position.row), 1) - 1;
 	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Box, {
@@ -565,7 +641,8 @@ const WeekView = (0, _mantine_core.factory)((_props) => {
 				mod: {
 					"with-weekends": withWeekendDays,
 					"hide-sub-hour-grid-lines": !withSubHourGridLines,
-					"event-interaction": eventResize.isResizing || dragDrop.dragContextValue.isDragging
+					"event-interaction": eventResize.isResizing || dragDrop.dragContextValue.isDragging,
+					"all-day-dragging": allDayDragDrop.dragContextValue.isDragging
 				},
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.ScrollArea.Autosize, {
 					scrollbarSize: 4,