@mantine/schedule 9.1.0 → 9.1.1

package/esm/components/ScheduleHeader/ViewSelect/ViewSelect.mjs.map

@@ -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], labels) as string}\n        aria-selected={isSelected}\n        tabIndex={isSelected ? 0 : -1}\n      >\n        {getLabel(view, labels)}\n      </HeaderControl>\n    );\n  });\n\n  return (\n    <Box\n      {...getStyles('viewSelect')}\n      role=\"tablist\"\n      aria-label={getLabel('viewSelectLabel', labels)}\n      {...others}\n    >\n      {items}\n    </Box>\n  );\n});\n\nViewSelect.displayName = '@mantine/schedule/ViewSelect';\nViewSelect.classes = classes;\n"],"mappings":";;;;;;;;AA+CA,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,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,OAAO;GACrD,iBAAe;GACf,UAAU,aAAa,IAAI;aAE1B,SAAS,MAAM,OAAO;GACT,EAlBT,KAkBS;GAElB;AAEF,QACE,oBAAC,KAAD;EACE,GAAI,UAAU,aAAa;EAC3B,MAAK;EACL,cAAY,SAAS,mBAAmB,OAAO;EAC/C,GAAI;YAEH;EACG,CAAA;EAER;AAEF,WAAW,cAAc;AACzB,WAAW,UAAUA"}
+{"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"}

package/lib/components/MoreEvents/MoreEvents.d.ts

@@ -1,7 +1,7 @@
 import { BoxProps, ElementProps, Factory, MantineRadius, ModalProps, PopoverProps, StylesApiProps } from '@mantine/core';
 import { ScheduleLabelsOverride } from '../../labels';
 import { ScheduleEventData, ScheduleMode } from '../../types';
-import { RenderEventBody } from '../ScheduleEvent/ScheduleEvent';
+import { RenderEvent, RenderEventBody } from '../ScheduleEvent/ScheduleEvent';
 export type MoreEventsDropdownType = 'popover' | 'modal';
 export type MoreEventsStylesNames = 'moreEventsButton' | 'moreEventsList' | 'moreEventsDropdown';
 export interface MoreEventsProps extends BoxProps, StylesApiProps<MoreEventsFactory>, ElementProps<'button'> {
@@ -23,10 +23,14 @@ export interface MoreEventsProps extends BoxProps, StylesApiProps<MoreEventsFact
     onDropdownClose?: () => void;
     /** Function to customize event body, `event` object is passed as first argument */
     renderEventBody?: RenderEventBody;
+    /** Function to fully customize event rendering, receives all props that would be passed to the root element including children */
+    renderEvent?: RenderEvent;
     /** Labels override */
     labels?: ScheduleLabelsOverride;
     /** Interaction mode: 'default' allows all interactions, 'static' disables event interactions @default default */
     mode?: ScheduleMode;
+    /** Called when an event inside the dropdown is clicked */
+    onEventClick?: (event: ScheduleEventData, e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 export type MoreEventsFactory = Factory<{
     props: MoreEventsProps;

package/lib/components/ScheduleHeader/ScheduleHeader.d.ts

@@ -1,4 +1,5 @@
 import { BoxProps, ElementProps, Factory, StylesApiProps } from '@mantine/core';
+import { ScheduleLabelsOverride } from '../../labels';
 import { HeaderControl, HeaderControlStylesNames, ScheduleHeaderNext, ScheduleHeaderPrevious, ScheduleHeaderToday } from './HeaderControl/HeaderControl';
 import { MonthYearSelect, MonthYearSelectStylesNames } from './MonthYearSelect/MonthYearSelect';
 import { ViewSelect, ViewSelectStylesNames } from './ViewSelect/ViewSelect';
@@ -9,6 +10,8 @@ export type ScheduleHeaderCssVariables = {
 };
 export interface ScheduleHeaderProps extends BoxProps, StylesApiProps<ScheduleHeaderFactory>, ElementProps<'div'> {
     __staticSelector?: string;
+    /** Labels override shared with compound components rendered inside */
+    labels?: ScheduleLabelsOverride;
 }
 export type ScheduleHeaderFactory = Factory<{
     props: ScheduleHeaderProps;

package/lib/components/ScheduleHeader/ScheduleHeaderContext.d.ts

@@ -0,0 +1,3 @@
+import type { ScheduleLabelsOverride } from '../../labels';
+export declare const ScheduleHeaderLabelsContext: import("react").Context<Partial<import("../..").ScheduleLabels> | undefined>;
+export declare function useScheduleHeaderLabels(override?: ScheduleLabelsOverride): ScheduleLabelsOverride | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/schedule",
-  "version": "9.1.0",
+  "version": "9.1.1",
   "description": "Schedule Mantine component",
   "homepage": "https://mantine.dev/",
   "license": "MIT",
@@ -35,9 +35,9 @@
     "directory": "packages/@mantine/schedule"
   },
   "peerDependencies": {
-    "@mantine/core": "9.1.0",
-    "@mantine/dates": "9.1.0",
-    "@mantine/hooks": "9.1.0",
+    "@mantine/core": "9.1.1",
+    "@mantine/dates": "9.1.1",
+    "@mantine/hooks": "9.1.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },