@mantine/dates 3.1.9 → 3.2.3

package/esm/components/Calendar/Calendar.js

@@ -1,5 +1,6 @@
 import React, { forwardRef } from 'react';
 import dayjs from 'dayjs';
+import { Group } from '@mantine/core';
 import { useUncontrolled } from '@mantine/hooks';
 import { Month } from '../Month/Month.js';
 import { CalendarHeader } from './CalendarHeader/CalendarHeader.js';
@@ -59,7 +60,10 @@ const Calendar = forwardRef((_a, ref) => {
     size = "sm",
     __staticSelector = "Calendar",
     monthLabel,
-    yearLabel
+    yearLabel,
+    preventFocus,
+    firstDayOfWeek = "monday",
+    amountOfMonths = 1
   } = _b, others = __objRest(_b, [
     "classNames",
     "styles",
@@ -84,7 +88,10 @@ const Calendar = forwardRef((_a, ref) => {
     "size",
     "__staticSelector",
     "monthLabel",
-    "yearLabel"
+    "yearLabel",
+    "preventFocus",
+    "firstDayOfWeek",
+    "amountOfMonths"
   ]);
   const [_month, setMonth] = useUncontrolled({
     value: month,
@@ -94,46 +101,68 @@ const Calendar = forwardRef((_a, ref) => {
     rule: (val) => val instanceof Date
   });
   const disabledState = getDisabledState({ month: _month, minDate, maxDate });
+  const hasMultipleMonths = amountOfMonths > 1;
+  const dayStyles = (date, modifiers) => {
+    const initialStyles = typeof dayStyle === "function" ? dayStyle(date, modifiers) : null;
+    const outsideStyles = modifiers.outside && amountOfMonths > 1 ? { display: "none" } : null;
+    return __spreadValues(__spreadValues({}, initialStyles), outsideStyles);
+  };
   return /* @__PURE__ */ React.createElement(CalendarWrapper, __spreadValues({
     size,
     fullWidth,
-    ref
-  }, others), /* @__PURE__ */ React.createElement(CalendarHeader, {
-    size,
-    nextMonthLabel,
-    previousMonthLabel,
-    previousMonthDisabled: disabledState.previousDisabled,
-    nextMonthDisabled: disabledState.nextDisabled,
-    onPreviousMonth: () => setMonth(dayjs(_month).subtract(1, "month").toDate()),
-    onNextMonth: () => setMonth(dayjs(_month).add(1, "month").toDate()),
-    classNames,
-    styles,
-    locale,
-    withSelect,
-    yearsRange,
-    month: _month,
-    setMonth,
-    labelFormat,
-    __staticSelector,
-    monthLabel,
-    yearLabel
-  }), /* @__PURE__ */ React.createElement(Month, {
-    month: _month,
-    value,
-    onChange,
-    dayClassName,
-    dayStyle,
-    disableOutsideEvents,
-    minDate,
-    maxDate,
-    excludeDate,
-    classNames,
-    styles,
-    fullWidth,
-    size,
-    locale,
-    __staticSelector
-  }));
+    ref,
+    amountOfMonths
+  }, others), /* @__PURE__ */ React.createElement(Group, {
+    noWrap: true,
+    style: { alignItems: "flex-start" }
+  }, Array(amountOfMonths).fill(0).map((_, monthIndex) => {
+    const isFirstMonth = monthIndex === 0;
+    const isLastMonth = monthIndex === amountOfMonths - 1;
+    const monthToRender = isFirstMonth ? _month : dayjs(_month).add(monthIndex, "month").toDate();
+    const hiddenMonth = isFirstMonth ? "next" : isLastMonth ? "prev" : "both";
+    return /* @__PURE__ */ React.createElement("div", {
+      key: `month-${monthIndex}`
+    }, /* @__PURE__ */ React.createElement(CalendarHeader, {
+      size,
+      nextMonthLabel,
+      previousMonthLabel,
+      previousMonthDisabled: disabledState.previousDisabled,
+      nextMonthDisabled: disabledState.nextDisabled,
+      onPreviousMonth: () => setMonth(dayjs(_month).subtract(1, "month").toDate()),
+      onNextMonth: () => setMonth(dayjs(_month).add(1, "month").toDate()),
+      classNames,
+      styles,
+      locale,
+      withSelect,
+      yearsRange,
+      month: monthToRender,
+      setMonth,
+      labelFormat,
+      hiddenMonth: hasMultipleMonths ? hiddenMonth : void 0,
+      __staticSelector: isFirstMonth ? __staticSelector : `${__staticSelector}-month-${monthIndex}`,
+      monthLabel,
+      yearLabel,
+      preventFocus
+    }), /* @__PURE__ */ React.createElement(Month, {
+      month: monthToRender,
+      value,
+      onChange,
+      dayClassName,
+      disableOutsideEvents,
+      minDate,
+      maxDate,
+      excludeDate,
+      classNames,
+      styles,
+      fullWidth,
+      preventFocus,
+      size,
+      locale,
+      firstDayOfWeek,
+      __staticSelector,
+      dayStyle: dayStyles
+    }));
+  })));
 });
 Calendar.displayName = "@mantine/dates/Calendar";
 

package/esm/components/Calendar/Calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","sources":["../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport dayjs from 'dayjs';\nimport { DefaultProps } from '@mantine/core';\nimport { useUncontrolled } from '@mantine/hooks';\nimport { Month, MonthSettings, MonthStylesNames } from '../Month/Month';\nimport { CalendarLabelStylesNames } from './CalendarLabel/CalendarLabel';\nimport { CalendarHeader } from './CalendarHeader/CalendarHeader';\nimport { CalendarWrapper } from './CalendarWrapper/CalendarWrapper';\nimport { getDisabledState } from './get-disabled-state/get-disabled-state';\n\nexport interface CalendarSettings extends MonthSettings {\n  /** aria-label for next month arrow button */\n  nextMonthLabel?: string;\n\n  /** aria-label for previous month arrow button */\n  previousMonthLabel?: string;\n\n  /** aria-label for month select */\n  monthLabel?: string;\n\n  /** aria-label for year select */\n  yearLabel?: string;\n\n  /** Locale used for all labels formatting */\n  locale?: string;\n\n  /** Initial selected month */\n  initialMonth?: Date | null;\n\n  /** dayjs label format */\n  labelFormat?: string;\n\n  /** Replace calendar label with month and year selects */\n  withSelect?: boolean;\n\n  /** Years range for year select */\n  yearsRange?: { from: number; to: number };\n}\n\nexport type CalendarStylesNames = Exclude<MonthStylesNames, 'root'> | CalendarLabelStylesNames;\n\nexport interface CalendarProps\n  extends DefaultProps<CalendarStylesNames>,\n    CalendarSettings,\n    Omit<React.ComponentPropsWithoutRef<'div'>, 'value' | 'onChange'> {\n  /** Current month */\n  month?: Date;\n\n  /** Selected date */\n  value?: Date;\n\n  /** Called when selected date changes */\n  onChange?(value: Date): void;\n\n  /** Called when month changes */\n  onMonthChange?(value: Date): void;\n\n  /** Static css selector base */\n  __staticSelector?: string;\n}\n\nexport const Calendar = forwardRef<HTMLDivElement, CalendarProps>(\n  (\n    {\n      classNames,\n      styles,\n      locale = 'en',\n      nextMonthLabel,\n      previousMonthLabel,\n      initialMonth,\n      month,\n      onMonthChange,\n      value,\n      onChange,\n      labelFormat = 'MMMM YYYY',\n      withSelect = false,\n      yearsRange = { from: 2020, to: 2030 },\n      dayClassName,\n      dayStyle,\n      disableOutsideEvents,\n      minDate,\n      maxDate,\n      excludeDate,\n      fullWidth = false,\n      size = 'sm',\n      __staticSelector = 'Calendar',\n      monthLabel,\n      yearLabel,\n      ...others\n    }: CalendarProps,\n    ref\n  ) => {\n    const [_month, setMonth] = useUncontrolled({\n      value: month,\n      defaultValue: initialMonth,\n      finalValue: new Date(),\n      onChange: onMonthChange,\n      rule: (val) => val instanceof Date,\n    });\n\n    const disabledState = getDisabledState({ month: _month, minDate, maxDate });\n\n    return (\n      <CalendarWrapper size={size} fullWidth={fullWidth} ref={ref} {...others}>\n        <CalendarHeader\n          size={size}\n          nextMonthLabel={nextMonthLabel}\n          previousMonthLabel={previousMonthLabel}\n          previousMonthDisabled={disabledState.previousDisabled}\n          nextMonthDisabled={disabledState.nextDisabled}\n          onPreviousMonth={() => setMonth(dayjs(_month).subtract(1, 'month').toDate())}\n          onNextMonth={() => setMonth(dayjs(_month).add(1, 'month').toDate())}\n          classNames={classNames}\n          styles={styles}\n          locale={locale}\n          withSelect={withSelect}\n          yearsRange={yearsRange}\n          month={_month}\n          setMonth={setMonth}\n          labelFormat={labelFormat}\n          __staticSelector={__staticSelector}\n          monthLabel={monthLabel}\n          yearLabel={yearLabel}\n        />\n\n        <Month\n          month={_month}\n          value={value}\n          onChange={onChange}\n          dayClassName={dayClassName}\n          dayStyle={dayStyle}\n          disableOutsideEvents={disableOutsideEvents}\n          minDate={minDate}\n          maxDate={maxDate}\n          excludeDate={excludeDate}\n          classNames={classNames}\n          styles={styles}\n          fullWidth={fullWidth}\n          size={size}\n          locale={locale}\n          __staticSelector={__staticSelector}\n        />\n      </CalendarWrapper>\n    );\n  }\n);\n\nCalendar.displayName = '@mantine/dates/Calendar';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Calendar.js","sources":["../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport dayjs from 'dayjs';\nimport { DefaultProps, Group } from '@mantine/core';\nimport { useUncontrolled } from '@mantine/hooks';\nimport { FirstDayOfWeek } from '../../types';\nimport { Month, MonthSettings, MonthStylesNames } from '../Month/Month';\nimport { DayModifiers } from '../Month/get-day-props/get-day-props';\nimport { CalendarLabelStylesNames } from './CalendarLabel/CalendarLabel';\nimport { CalendarHeader } from './CalendarHeader/CalendarHeader';\nimport { CalendarWrapper } from './CalendarWrapper/CalendarWrapper';\nimport { getDisabledState } from './get-disabled-state/get-disabled-state';\n\nexport interface CalendarSettings extends MonthSettings {\n  /** aria-label for next month arrow button */\n  nextMonthLabel?: string;\n\n  /** aria-label for previous month arrow button */\n  previousMonthLabel?: string;\n\n  /** aria-label for month select */\n  monthLabel?: string;\n\n  /** aria-label for year select */\n  yearLabel?: string;\n\n  /** Locale used for all labels formatting */\n  locale?: string;\n\n  /** Initial selected month */\n  initialMonth?: Date | null;\n\n  /** dayjs label format */\n  labelFormat?: string;\n\n  /** Replace calendar label with month and year selects */\n  withSelect?: boolean;\n\n  /** Years range for year select */\n  yearsRange?: { from: number; to: number };\n\n  /** Set first day of the week */\n  firstDayOfWeek?: FirstDayOfWeek;\n\n  /** Amount of displayed months */\n  amountOfMonths?: number;\n}\n\nexport type CalendarStylesNames = Exclude<MonthStylesNames, 'root'> | CalendarLabelStylesNames;\n\nexport interface CalendarProps\n  extends DefaultProps<CalendarStylesNames>,\n    CalendarSettings,\n    Omit<React.ComponentPropsWithoutRef<'div'>, 'value' | 'onChange'> {\n  /** Current month */\n  month?: Date;\n\n  /** Selected date */\n  value?: Date;\n\n  /** Called when selected date changes */\n  onChange?(value: Date): void;\n\n  /** Called when month changes */\n  onMonthChange?(value: Date): void;\n\n  /** Static css selector base */\n  __staticSelector?: string;\n}\n\nexport const Calendar = forwardRef<HTMLDivElement, CalendarProps>(\n  (\n    {\n      classNames,\n      styles,\n      locale = 'en',\n      nextMonthLabel,\n      previousMonthLabel,\n      initialMonth,\n      month,\n      onMonthChange,\n      value,\n      onChange,\n      labelFormat = 'MMMM YYYY',\n      withSelect = false,\n      yearsRange = { from: 2020, to: 2030 },\n      dayClassName,\n      dayStyle,\n      disableOutsideEvents,\n      minDate,\n      maxDate,\n      excludeDate,\n      fullWidth = false,\n      size = 'sm',\n      __staticSelector = 'Calendar',\n      monthLabel,\n      yearLabel,\n      preventFocus,\n      firstDayOfWeek = 'monday',\n      amountOfMonths = 1,\n      ...others\n    }: CalendarProps,\n    ref\n  ) => {\n    const [_month, setMonth] = useUncontrolled({\n      value: month,\n      defaultValue: initialMonth,\n      finalValue: new Date(),\n      onChange: onMonthChange,\n      rule: (val) => val instanceof Date,\n    });\n\n    const disabledState = getDisabledState({ month: _month, minDate, maxDate });\n    const hasMultipleMonths = amountOfMonths > 1;\n\n    const dayStyles = (date: Date, modifiers: DayModifiers) => {\n      const initialStyles = typeof dayStyle === 'function' ? dayStyle(date, modifiers) : null;\n      const outsideStyles = modifiers.outside && amountOfMonths > 1 ? { display: 'none' } : null;\n      return { ...initialStyles, ...outsideStyles };\n    };\n\n    return (\n      <CalendarWrapper\n        size={size}\n        fullWidth={fullWidth}\n        ref={ref}\n        amountOfMonths={amountOfMonths}\n        {...others}\n      >\n        <Group noWrap style={{ alignItems: 'flex-start' }}>\n          {Array(amountOfMonths)\n            .fill(0)\n            .map((_, monthIndex) => {\n              const isFirstMonth = monthIndex === 0;\n              const isLastMonth = monthIndex === amountOfMonths - 1;\n              const monthToRender = isFirstMonth\n                ? _month\n                : dayjs(_month).add(monthIndex, 'month').toDate();\n              const hiddenMonth = isFirstMonth ? 'next' : isLastMonth ? 'prev' : 'both';\n\n              return (\n                <div key={`month-${monthIndex}`}>\n                  <CalendarHeader\n                    size={size}\n                    nextMonthLabel={nextMonthLabel}\n                    previousMonthLabel={previousMonthLabel}\n                    previousMonthDisabled={disabledState.previousDisabled}\n                    nextMonthDisabled={disabledState.nextDisabled}\n                    onPreviousMonth={() => setMonth(dayjs(_month).subtract(1, 'month').toDate())}\n                    onNextMonth={() => setMonth(dayjs(_month).add(1, 'month').toDate())}\n                    classNames={classNames}\n                    styles={styles}\n                    locale={locale}\n                    withSelect={withSelect}\n                    yearsRange={yearsRange}\n                    month={monthToRender}\n                    setMonth={setMonth}\n                    labelFormat={labelFormat}\n                    hiddenMonth={hasMultipleMonths ? hiddenMonth : undefined}\n                    __staticSelector={\n                      isFirstMonth ? __staticSelector : `${__staticSelector}-month-${monthIndex}`\n                    }\n                    monthLabel={monthLabel}\n                    yearLabel={yearLabel}\n                    preventFocus={preventFocus}\n                  />\n\n                  <Month\n                    month={monthToRender}\n                    value={value}\n                    onChange={onChange}\n                    dayClassName={dayClassName}\n                    disableOutsideEvents={disableOutsideEvents}\n                    minDate={minDate}\n                    maxDate={maxDate}\n                    excludeDate={excludeDate}\n                    classNames={classNames}\n                    styles={styles}\n                    fullWidth={fullWidth}\n                    preventFocus={preventFocus}\n                    size={size}\n                    locale={locale}\n                    firstDayOfWeek={firstDayOfWeek}\n                    __staticSelector={__staticSelector}\n                    dayStyle={dayStyles}\n                  />\n                </div>\n              );\n            })}\n        </Group>\n      </CalendarWrapper>\n    );\n  }\n);\n\nCalendar.displayName = '@mantine/dates/Calendar';\n"],"names":[],"mappings":"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"}

package/esm/components/Calendar/CalendarHeader/CalendarHeader.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useMantineTheme, getSizeValue, Group, ActionIcon } from '@mantine/core';
+import { useMantineTheme, Group, ActionIcon } from '@mantine/core';
 import { ArrowIcon } from '../ArrowIcon.js';
 import { CalendarLabel } from '../CalendarLabel/CalendarLabel.js';
 import { sizes } from '../../Month/Day/Day.styles.js';
@@ -29,11 +29,20 @@ function CalendarHeader({
   labelFormat,
   __staticSelector,
   monthLabel,
-  yearLabel
+  yearLabel,
+  preventFocus = false,
+  hiddenMonth
 }) {
   const theme = useMantineTheme();
-  const iconSize = getSizeValue({ size, sizes: iconSizes });
-  const iconButtonSize = getSizeValue({ size, sizes: sizes });
+  const iconSize = theme.fn.size({ size, sizes: iconSizes });
+  const iconButtonSize = theme.fn.size({ size, sizes: sizes });
+  const controlStyles = {
+    "&:disabled": {
+      backgroundColor: "transparent",
+      borderColor: "transparent",
+      opacity: 0.4
+    }
+  };
   return /* @__PURE__ */ React.createElement(Group, {
     position: "apart",
     noWrap: true,
@@ -41,9 +50,13 @@ function CalendarHeader({
   }, /* @__PURE__ */ React.createElement(ActionIcon, {
     "aria-label": previousMonthLabel,
     onClick: onPreviousMonth,
+    onMouseDown: (event) => preventFocus && event.preventDefault(),
+    tabIndex: preventFocus ? -1 : 0,
     disabled: previousMonthDisabled,
     size: iconButtonSize,
-    "data-mantine-stop-propagation": true
+    style: { visibility: ["prev", "both"].includes(hiddenMonth) ? "hidden" : "visible" },
+    "data-mantine-stop-propagation": true,
+    sx: controlStyles
   }, /* @__PURE__ */ React.createElement(ArrowIcon, {
     direction: "left",
     width: iconSize,
@@ -60,13 +73,18 @@ function CalendarHeader({
     size,
     __staticSelector,
     monthLabel,
-    yearLabel
+    yearLabel,
+    preventFocus
   }), /* @__PURE__ */ React.createElement(ActionIcon, {
     "aria-label": nextMonthLabel,
     onClick: onNextMonth,
+    tabIndex: preventFocus ? -1 : 0,
+    onMouseDown: (event) => preventFocus && event.preventDefault(),
     disabled: nextMonthDisabled,
     size: iconButtonSize,
-    "data-mantine-stop-propagation": true
+    style: { visibility: ["next", "both"].includes(hiddenMonth) ? "hidden" : "visible" },
+    "data-mantine-stop-propagation": true,
+    sx: controlStyles
   }, /* @__PURE__ */ React.createElement(ArrowIcon, {
     direction: "right",
     width: iconSize,

package/esm/components/Calendar/CalendarHeader/CalendarHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarHeader.js","sources":["../../../../src/components/Calendar/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  Group,\n  ActionIcon,\n  getSizeValue,\n  DefaultProps,\n  MantineSize,\n  useMantineTheme,\n} from '@mantine/core';\nimport { ArrowIcon } from '../ArrowIcon';\nimport { CalendarLabel } from '../CalendarLabel/CalendarLabel';\nimport { sizes as DAY_SIZES } from '../../Month/Day/Day.styles';\n\nconst iconSizes = {\n  xs: 10,\n  sm: 12,\n  md: 14,\n  lg: 18,\n  xl: 20,\n};\n\ninterface CalendarHeaderProps extends DefaultProps {\n  classNames: Record<string, any>;\n  styles: Record<string, any>;\n  size: MantineSize;\n  nextMonthLabel: string;\n  previousMonthLabel: string;\n  previousMonthDisabled: boolean;\n  nextMonthDisabled: boolean;\n  onPreviousMonth(): void;\n  onNextMonth(): void;\n  locale: string;\n  withSelect: boolean;\n  yearsRange: { from: number; to: number };\n  month: Date;\n  setMonth(date: Date): void;\n  labelFormat: string;\n  __staticSelector: string;\n  monthLabel?: string;\n  yearLabel?: string;\n}\n\nexport function CalendarHeader({\n  size,\n  nextMonthLabel,\n  previousMonthLabel,\n  previousMonthDisabled,\n  nextMonthDisabled,\n  onPreviousMonth,\n  onNextMonth,\n  classNames,\n  styles,\n  locale,\n  withSelect,\n  yearsRange,\n  month,\n  setMonth,\n  labelFormat,\n  __staticSelector,\n  monthLabel,\n  yearLabel,\n}: CalendarHeaderProps) {\n  const theme = useMantineTheme();\n  const iconSize = getSizeValue({ size, sizes: iconSizes });\n  const iconButtonSize = getSizeValue({ size, sizes: DAY_SIZES });\n\n  return (\n    <Group position=\"apart\" noWrap style={{ marginBottom: theme.spacing.xs / 2 }}>\n      <ActionIcon\n        aria-label={previousMonthLabel}\n        onClick={onPreviousMonth}\n        disabled={previousMonthDisabled}\n        size={iconButtonSize}\n        data-mantine-stop-propagation\n      >\n        <ArrowIcon direction=\"left\" width={iconSize} height={iconSize} />\n      </ActionIcon>\n\n      <CalendarLabel\n        locale={locale}\n        classNames={classNames}\n        styles={styles}\n        withSelect={withSelect}\n        yearsRange={yearsRange}\n        value={month}\n        onChange={setMonth}\n        labelFormat={labelFormat}\n        size={size}\n        __staticSelector={__staticSelector}\n        monthLabel={monthLabel}\n        yearLabel={yearLabel}\n      />\n\n      <ActionIcon\n        aria-label={nextMonthLabel}\n        onClick={onNextMonth}\n        disabled={nextMonthDisabled}\n        size={iconButtonSize}\n        data-mantine-stop-propagation\n      >\n        <ArrowIcon direction=\"right\" width={iconSize} height={iconSize} />\n      </ActionIcon>\n    </Group>\n  );\n}\n\nCalendarHeader.displayName = '@mantine/dates/CalendarHeader';\n"],"names":["DAY_SIZES"],"mappings":";;;;;;AAUA,MAAM,SAAS,GAAG;AAClB,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,CAAC,CAAC;AACK,SAAS,cAAc,CAAC;AAC/B,EAAE,IAAI;AACN,EAAE,cAAc;AAChB,EAAE,kBAAkB;AACpB,EAAE,qBAAqB;AACvB,EAAE,iBAAiB;AACnB,EAAE,eAAe;AACjB,EAAE,WAAW;AACb,EAAE,UAAU;AACZ,EAAE,MAAM;AACR,EAAE,MAAM;AACR,EAAE,UAAU;AACZ,EAAE,UAAU;AACZ,EAAE,KAAK;AACP,EAAE,QAAQ;AACV,EAAE,WAAW;AACb,EAAE,gBAAgB;AAClB,EAAE,UAAU;AACZ,EAAE,SAAS;AACX,CAAC,EAAE;AACH,EAAE,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;AAClC,EAAE,MAAM,QAAQ,GAAG,YAAY,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;AAC5D,EAAE,MAAM,cAAc,GAAG,YAAY,CAAC,EAAE,IAAI,EAAE,KAAK,EAAEA,KAAS,EAAE,CAAC,CAAC;AAClE,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACpD,IAAI,QAAQ,EAAE,OAAO;AACrB,IAAI,MAAM,EAAE,IAAI;AAChB,IAAI,KAAK,EAAE,EAAE,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,EAAE;AACjD,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,UAAU,EAAE;AACrD,IAAI,YAAY,EAAE,kBAAkB;AACpC,IAAI,OAAO,EAAE,eAAe;AAC5B,IAAI,QAAQ,EAAE,qBAAqB;AACnC,IAAI,IAAI,EAAE,cAAc;AACxB,IAAI,+BAA+B,EAAE,IAAI;AACzC,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AACpD,IAAI,SAAS,EAAE,MAAM;AACrB,IAAI,KAAK,EAAE,QAAQ;AACnB,IAAI,MAAM,EAAE,QAAQ;AACpB,GAAG,CAAC,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,aAAa,EAAE;AAC1D,IAAI,MAAM;AACV,IAAI,UAAU;AACd,IAAI,MAAM;AACV,IAAI,UAAU;AACd,IAAI,UAAU;AACd,IAAI,KAAK,EAAE,KAAK;AAChB,IAAI,QAAQ,EAAE,QAAQ;AACtB,IAAI,WAAW;AACf,IAAI,IAAI;AACR,IAAI,gBAAgB;AACpB,IAAI,UAAU;AACd,IAAI,SAAS;AACb,GAAG,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,UAAU,EAAE;AACtD,IAAI,YAAY,EAAE,cAAc;AAChC,IAAI,OAAO,EAAE,WAAW;AACxB,IAAI,QAAQ,EAAE,iBAAiB;AAC/B,IAAI,IAAI,EAAE,cAAc;AACxB,IAAI,+BAA+B,EAAE,IAAI;AACzC,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AACpD,IAAI,SAAS,EAAE,OAAO;AACtB,IAAI,KAAK,EAAE,QAAQ;AACnB,IAAI,MAAM,EAAE,QAAQ;AACpB,GAAG,CAAC,CAAC,CAAC,CAAC;AACP,CAAC;AACD,cAAc,CAAC,WAAW,GAAG,+BAA+B;;;;"}
+{"version":3,"file":"CalendarHeader.js","sources":["../../../../src/components/Calendar/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import React from 'react';\nimport { Group, ActionIcon, DefaultProps, MantineSize, useMantineTheme } from '@mantine/core';\nimport { ArrowIcon } from '../ArrowIcon';\nimport { CalendarLabel } from '../CalendarLabel/CalendarLabel';\nimport { sizes as DAY_SIZES } from '../../Month/Day/Day.styles';\n\nconst iconSizes = {\n  xs: 10,\n  sm: 12,\n  md: 14,\n  lg: 18,\n  xl: 20,\n};\n\ninterface CalendarHeaderProps extends DefaultProps {\n  classNames: Record<string, any>;\n  styles: Record<string, any>;\n  size: MantineSize;\n  nextMonthLabel: string;\n  previousMonthLabel: string;\n  previousMonthDisabled: boolean;\n  nextMonthDisabled: boolean;\n  onPreviousMonth(): void;\n  onNextMonth(): void;\n  locale: string;\n  withSelect: boolean;\n  yearsRange: { from: number; to: number };\n  month: Date;\n  setMonth(date: Date): void;\n  labelFormat: string;\n  __staticSelector: string;\n  monthLabel?: string;\n  yearLabel?: string;\n  preventFocus?: boolean;\n  hiddenMonth?: 'next' | 'prev' | 'both';\n}\n\nexport function CalendarHeader({\n  size,\n  nextMonthLabel,\n  previousMonthLabel,\n  previousMonthDisabled,\n  nextMonthDisabled,\n  onPreviousMonth,\n  onNextMonth,\n  classNames,\n  styles,\n  locale,\n  withSelect,\n  yearsRange,\n  month,\n  setMonth,\n  labelFormat,\n  __staticSelector,\n  monthLabel,\n  yearLabel,\n  preventFocus = false,\n  hiddenMonth,\n}: CalendarHeaderProps) {\n  const theme = useMantineTheme();\n  const iconSize = theme.fn.size({ size, sizes: iconSizes });\n  const iconButtonSize = theme.fn.size({ size, sizes: DAY_SIZES });\n  const controlStyles = {\n    '&:disabled': {\n      backgroundColor: 'transparent',\n      borderColor: 'transparent',\n      opacity: 0.4,\n    },\n  };\n\n  return (\n    <Group position=\"apart\" noWrap style={{ marginBottom: theme.spacing.xs / 2 }}>\n      <ActionIcon<'button'>\n        aria-label={previousMonthLabel}\n        onClick={onPreviousMonth}\n        onMouseDown={(event) => preventFocus && event.preventDefault()}\n        tabIndex={preventFocus ? -1 : 0}\n        disabled={previousMonthDisabled}\n        size={iconButtonSize}\n        style={{ visibility: ['prev', 'both'].includes(hiddenMonth) ? 'hidden' : 'visible' }}\n        data-mantine-stop-propagation\n        sx={controlStyles}\n      >\n        <ArrowIcon direction=\"left\" width={iconSize} height={iconSize} />\n      </ActionIcon>\n\n      <CalendarLabel\n        locale={locale}\n        classNames={classNames}\n        styles={styles}\n        withSelect={withSelect}\n        yearsRange={yearsRange}\n        value={month}\n        onChange={setMonth}\n        labelFormat={labelFormat}\n        size={size}\n        __staticSelector={__staticSelector}\n        monthLabel={monthLabel}\n        yearLabel={yearLabel}\n        preventFocus={preventFocus}\n      />\n\n      <ActionIcon<'button'>\n        aria-label={nextMonthLabel}\n        onClick={onNextMonth}\n        tabIndex={preventFocus ? -1 : 0}\n        onMouseDown={(event) => preventFocus && event.preventDefault()}\n        disabled={nextMonthDisabled}\n        size={iconButtonSize}\n        style={{ visibility: ['next', 'both'].includes(hiddenMonth) ? 'hidden' : 'visible' }}\n        data-mantine-stop-propagation\n        sx={controlStyles}\n      >\n        <ArrowIcon direction=\"right\" width={iconSize} height={iconSize} />\n      </ActionIcon>\n    </Group>\n  );\n}\n\nCalendarHeader.displayName = '@mantine/dates/CalendarHeader';\n"],"names":["DAY_SIZES"],"mappings":"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"}

package/esm/components/Calendar/CalendarLabel/CalendarLabel.js

@@ -18,7 +18,8 @@ function CalendarLabel({
   size,
   __staticSelector,
   monthLabel,
-  yearLabel
+  yearLabel,
+  preventFocus
 }) {
   const selectSize = size === "lg" || size === "xl" ? "md" : "xs";
   const { classes } = useStyles(null, { classNames, styles, name: __staticSelector });
@@ -31,6 +32,7 @@ function CalendarLabel({
     className: classes.calendarSelect,
     size: selectSize,
     value: value.getMonth(),
+    onMouseDown: (event) => preventFocus && event.preventDefault(),
     onChange: (event) => onChange(dayjs(value).set("month", parseInt(event.currentTarget.value, 10)).toDate()),
     data: getMonthsNames(locale).map((month, index) => ({
       label: upperFirst(month),
@@ -41,6 +43,7 @@ function CalendarLabel({
     className: classes.calendarSelect,
     size: selectSize,
     value: value.getFullYear(),
+    onMouseDown: (event) => preventFocus && event.preventDefault(),
     onChange: (event) => onChange(dayjs(value).set("year", parseInt(event.currentTarget.value, 10)).toDate()),
     data: getYearsRange(yearsRange).map((year) => ({
       label: year.toString(),

package/esm/components/Calendar/CalendarLabel/CalendarLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarLabel.js","sources":["../../../../src/components/Calendar/CalendarLabel/CalendarLabel.tsx"],"sourcesContent":["import React from 'react';\nimport dayjs from 'dayjs';\nimport { DefaultProps, NativeSelect, Group, Text, MantineSize, ClassNames } from '@mantine/core';\nimport { upperFirst } from '@mantine/hooks';\nimport { getMonthsNames, getYearsRange } from '../../../utils';\nimport useStyles from './CalendarLabel.styles';\n\nexport type CalendarLabelStylesNames = ClassNames<typeof useStyles>;\n\ninterface CalendarLabelProps extends DefaultProps<CalendarLabelStylesNames> {\n  locale: string;\n  withSelect: boolean;\n  yearsRange: { from: number; to: number };\n  value: Date;\n  onChange(value: Date): void;\n  labelFormat: string;\n  __staticSelector: string;\n  size: MantineSize;\n  monthLabel?: string;\n  yearLabel?: string;\n}\n\nexport function CalendarLabel({\n  locale,\n  classNames,\n  styles,\n  withSelect,\n  yearsRange,\n  value,\n  labelFormat,\n  onChange,\n  size,\n  __staticSelector,\n  monthLabel,\n  yearLabel,\n}: CalendarLabelProps) {\n  const selectSize = size === 'lg' || size === 'xl' ? 'md' : 'xs';\n  const { classes } = useStyles(null, { classNames, styles, name: __staticSelector });\n\n  return withSelect ? (\n    <Group spacing={5} noWrap className={classes.calendarSelectGroup}>\n      <NativeSelect\n        aria-label={monthLabel}\n        className={classes.calendarSelect}\n        size={selectSize}\n        value={value.getMonth()}\n        onChange={(event) =>\n          onChange(dayjs(value).set('month', parseInt(event.currentTarget.value, 10)).toDate())\n        }\n        data={getMonthsNames(locale).map((month, index) => ({\n          label: upperFirst(month),\n          value: index.toString(),\n        }))}\n      />\n\n      <NativeSelect\n        aria-label={yearLabel}\n        className={classes.calendarSelect}\n        size={selectSize}\n        value={value.getFullYear()}\n        onChange={(event) =>\n          onChange(dayjs(value).set('year', parseInt(event.currentTarget.value, 10)).toDate())\n        }\n        data={getYearsRange(yearsRange).map((year) => ({\n          label: year.toString(),\n          value: year.toString(),\n        }))}\n      />\n    </Group>\n  ) : (\n    <Text className={classes.calendarLabel} size={size}>\n      {upperFirst(dayjs(value).locale(locale).format(labelFormat))}\n    </Text>\n  );\n}\n\nCalendarLabel.displayName = '@mantine/dates/CalendarLabel';\n"],"names":[],"mappings":";;;;;;;;AAMO,SAAS,aAAa,CAAC;AAC9B,EAAE,MAAM;AACR,EAAE,UAAU;AACZ,EAAE,MAAM;AACR,EAAE,UAAU;AACZ,EAAE,UAAU;AACZ,EAAE,KAAK;AACP,EAAE,WAAW;AACb,EAAE,QAAQ;AACV,EAAE,IAAI;AACN,EAAE,gBAAgB;AAClB,EAAE,UAAU;AACZ,EAAE,SAAS;AACX,CAAC,EAAE;AACH,EAAE,MAAM,UAAU,GAAG,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAClE,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC,CAAC;AACtF,EAAE,OAAO,UAAU,mBAAmB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACjE,IAAI,OAAO,EAAE,CAAC;AACd,IAAI,MAAM,EAAE,IAAI;AAChB,IAAI,SAAS,EAAE,OAAO,CAAC,mBAAmB;AAC1C,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,YAAY,EAAE;AACvD,IAAI,YAAY,EAAE,UAAU;AAC5B,IAAI,SAAS,EAAE,OAAO,CAAC,cAAc;AACrC,IAAI,IAAI,EAAE,UAAU;AACpB,IAAI,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE;AAC3B,IAAI,QAAQ,EAAE,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC;AAC9G,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,MAAM;AACxD,MAAM,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC;AAC9B,MAAM,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE;AAC7B,KAAK,CAAC,CAAC;AACP,GAAG,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,YAAY,EAAE;AACxD,IAAI,YAAY,EAAE,SAAS;AAC3B,IAAI,SAAS,EAAE,OAAO,CAAC,cAAc;AACrC,IAAI,IAAI,EAAE,UAAU;AACpB,IAAI,KAAK,EAAE,KAAK,CAAC,WAAW,EAAE;AAC9B,IAAI,QAAQ,EAAE,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC;AAC7G,IAAI,IAAI,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,MAAM;AACnD,MAAM,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE;AAC5B,MAAM,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE;AAC5B,KAAK,CAAC,CAAC;AACP,GAAG,CAAC,CAAC,mBAAmB,KAAK,CAAC,aAAa,CAAC,IAAI,EAAE;AAClD,IAAI,SAAS,EAAE,OAAO,CAAC,aAAa;AACpC,IAAI,IAAI;AACR,GAAG,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;AAClE,CAAC;AACD,aAAa,CAAC,WAAW,GAAG,8BAA8B;;;;"}
+{"version":3,"file":"CalendarLabel.js","sources":["../../../../src/components/Calendar/CalendarLabel/CalendarLabel.tsx"],"sourcesContent":["import React from 'react';\nimport dayjs from 'dayjs';\nimport { DefaultProps, NativeSelect, Group, Text, MantineSize, ClassNames } from '@mantine/core';\nimport { upperFirst } from '@mantine/hooks';\nimport { getMonthsNames, getYearsRange } from '../../../utils';\nimport useStyles from './CalendarLabel.styles';\n\nexport type CalendarLabelStylesNames = ClassNames<typeof useStyles>;\n\ninterface CalendarLabelProps extends DefaultProps<CalendarLabelStylesNames> {\n  locale: string;\n  withSelect: boolean;\n  yearsRange: { from: number; to: number };\n  value: Date;\n  onChange(value: Date): void;\n  labelFormat: string;\n  __staticSelector: string;\n  size: MantineSize;\n  monthLabel?: string;\n  yearLabel?: string;\n  preventFocus?: boolean;\n}\n\nexport function CalendarLabel({\n  locale,\n  classNames,\n  styles,\n  withSelect,\n  yearsRange,\n  value,\n  labelFormat,\n  onChange,\n  size,\n  __staticSelector,\n  monthLabel,\n  yearLabel,\n  preventFocus,\n}: CalendarLabelProps) {\n  const selectSize = size === 'lg' || size === 'xl' ? 'md' : 'xs';\n  const { classes } = useStyles(null, { classNames, styles, name: __staticSelector });\n\n  return withSelect ? (\n    <Group spacing={5} noWrap className={classes.calendarSelectGroup}>\n      <NativeSelect\n        aria-label={monthLabel}\n        className={classes.calendarSelect}\n        size={selectSize}\n        value={value.getMonth()}\n        onMouseDown={(event) => preventFocus && event.preventDefault()}\n        onChange={(event) =>\n          onChange(dayjs(value).set('month', parseInt(event.currentTarget.value, 10)).toDate())\n        }\n        data={getMonthsNames(locale).map((month, index) => ({\n          label: upperFirst(month),\n          value: index.toString(),\n        }))}\n      />\n\n      <NativeSelect\n        aria-label={yearLabel}\n        className={classes.calendarSelect}\n        size={selectSize}\n        value={value.getFullYear()}\n        onMouseDown={(event) => preventFocus && event.preventDefault()}\n        onChange={(event) =>\n          onChange(dayjs(value).set('year', parseInt(event.currentTarget.value, 10)).toDate())\n        }\n        data={getYearsRange(yearsRange).map((year) => ({\n          label: year.toString(),\n          value: year.toString(),\n        }))}\n      />\n    </Group>\n  ) : (\n    <Text className={classes.calendarLabel} size={size}>\n      {upperFirst(dayjs(value).locale(locale).format(labelFormat))}\n    </Text>\n  );\n}\n\nCalendarLabel.displayName = '@mantine/dates/CalendarLabel';\n"],"names":[],"mappings":"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"}

package/esm/components/Calendar/CalendarWrapper/CalendarWrapper.js

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { useExtractedMargins, useSx, getSizeValue } from '@mantine/core';
+import { useExtractedMargins, useSx } from '@mantine/core';
 import { sizes } from '../../Month/Day/Day.styles.js';
 
 var __defProp = Object.defineProperty;
@@ -31,14 +31,16 @@ var __objRest = (source, exclude) => {
   return target;
 };
 const CalendarWrapper = forwardRef((_a, ref) => {
-  var _b = _a, { size, fullWidth, style, sx, className } = _b, others = __objRest(_b, ["size", "fullWidth", "style", "sx", "className"]);
+  var _b = _a, { size, fullWidth, amountOfMonths = 1, style, sx, className } = _b, others = __objRest(_b, ["size", "fullWidth", "amountOfMonths", "style", "sx", "className"]);
   const { mergedStyles, rest } = useExtractedMargins({ others, style });
-  const { sxClassName } = useSx({ sx, className });
+  const { sxClassName, theme } = useSx({ sx, className });
+  const _maxWidth = theme.fn.size({ size, sizes: sizes }) * 7;
+  const maxWidth = amountOfMonths > 1 ? _maxWidth * amountOfMonths + (amountOfMonths - 1) * 16 : _maxWidth;
   return /* @__PURE__ */ React.createElement("div", __spreadValues({
     ref,
     className: sxClassName,
     style: __spreadValues({
-      maxWidth: fullWidth ? "100%" : getSizeValue({ size, sizes: sizes }) * 7
+      maxWidth: fullWidth ? "100%" : maxWidth
     }, mergedStyles)
   }, rest));
 });

package/esm/components/Calendar/CalendarWrapper/CalendarWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarWrapper.js","sources":["../../../../src/components/Calendar/CalendarWrapper/CalendarWrapper.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { MantineSize, getSizeValue, useExtractedMargins, useSx, DefaultProps } from '@mantine/core';\nimport { sizes as DAY_SIZES } from '../../Month/Day/Day.styles';\n\ninterface CalendarWrapperProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {\n  size: MantineSize;\n  fullWidth: boolean;\n}\n\nexport const CalendarWrapper = forwardRef<HTMLDivElement, CalendarWrapperProps>(\n  ({ size, fullWidth, style, sx, className, ...others }: CalendarWrapperProps, ref) => {\n    const { mergedStyles, rest } = useExtractedMargins({ others, style });\n    const { sxClassName } = useSx({ sx, className });\n    return (\n      <div\n        ref={ref}\n        className={sxClassName}\n        style={{\n          maxWidth: fullWidth ? '100%' : getSizeValue({ size, sizes: DAY_SIZES }) * 7,\n          ...mergedStyles,\n        }}\n        {...rest}\n      />\n    );\n  }\n);\n\nCalendarWrapper.displayName = '@mantine/dates/CalendarWrapper';\n"],"names":["DAY_SIZES"],"mappings":"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"}
+{"version":3,"file":"CalendarWrapper.js","sources":["../../../../src/components/Calendar/CalendarWrapper/CalendarWrapper.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { MantineSize, useExtractedMargins, useSx, DefaultProps } from '@mantine/core';\nimport { sizes as DAY_SIZES } from '../../Month/Day/Day.styles';\n\ninterface CalendarWrapperProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {\n  size: MantineSize;\n  fullWidth: boolean;\n  amountOfMonths?: number;\n}\n\nexport const CalendarWrapper = forwardRef<HTMLDivElement, CalendarWrapperProps>(\n  (\n    { size, fullWidth, amountOfMonths = 1, style, sx, className, ...others }: CalendarWrapperProps,\n    ref\n  ) => {\n    const { mergedStyles, rest } = useExtractedMargins({ others, style });\n    const { sxClassName, theme } = useSx({ sx, className });\n    const _maxWidth = theme.fn.size({ size, sizes: DAY_SIZES }) * 7;\n    const maxWidth =\n      amountOfMonths > 1 ? _maxWidth * amountOfMonths + (amountOfMonths - 1) * 16 : _maxWidth;\n\n    return (\n      <div\n        ref={ref}\n        className={sxClassName}\n        style={{\n          maxWidth: fullWidth ? '100%' : maxWidth,\n          ...mergedStyles,\n        }}\n        {...rest}\n      />\n    );\n  }\n);\n\nCalendarWrapper.displayName = '@mantine/dates/CalendarWrapper';\n"],"names":["DAY_SIZES"],"mappings":"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"}

package/esm/components/Calendar/get-disabled-state/get-disabled-state.js

@@ -1,7 +1,7 @@
 import dayjs from 'dayjs';
 
-function getDisabledState({ maxDate, minDate, month }) {
-  const nextDisabled = maxDate instanceof Date && dayjs(month).endOf("month").isAfter(dayjs(maxDate).endOf("day").subtract(1, "minute"));
+function getDisabledState({ maxDate, minDate, month, amountOfMonths }) {
+  const nextDisabled = maxDate instanceof Date && dayjs(month).add(amountOfMonths - 1, "month").endOf("month").isAfter(dayjs(maxDate).endOf("day").subtract(1, "minute"));
   const previousDisabled = minDate instanceof Date && dayjs(month).startOf("month").isBefore(dayjs(minDate).startOf("day").add(1, "minute"));
   return { nextDisabled, previousDisabled };
 }

package/esm/components/Calendar/get-disabled-state/get-disabled-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-disabled-state.js","sources":["../../../../src/components/Calendar/get-disabled-state/get-disabled-state.ts"],"sourcesContent":["import dayjs from 'dayjs';\n\ninterface GetDisabledState {\n  /** Current selected month */\n  month: Date;\n\n  /** Min and max possible dates */\n  minDate: Date;\n  maxDate: Date;\n}\n\nexport function getDisabledState({ maxDate, minDate, month }: GetDisabledState) {\n  const nextDisabled =\n    maxDate instanceof Date &&\n    dayjs(month).endOf('month').isAfter(dayjs(maxDate).endOf('day').subtract(1, 'minute'));\n  const previousDisabled =\n    minDate instanceof Date &&\n    dayjs(month).startOf('month').isBefore(dayjs(minDate).startOf('day').add(1, 'minute'));\n\n  return { nextDisabled, previousDisabled };\n}\n"],"names":[],"mappings":";;AACO,SAAS,gBAAgB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE;AAC9D,EAAE,MAAM,YAAY,GAAG,OAAO,YAAY,IAAI,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC;AACzI,EAAE,MAAM,gBAAgB,GAAG,OAAO,YAAY,IAAI,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC;AAC7I,EAAE,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,CAAC;AAC5C;;;;"}
+{"version":3,"file":"get-disabled-state.js","sources":["../../../../src/components/Calendar/get-disabled-state/get-disabled-state.ts"],"sourcesContent":["import dayjs from 'dayjs';\n\ninterface GetDisabledState {\n  /** Current selected month */\n  month: Date;\n\n  /** Min and max possible dates */\n  minDate: Date;\n  maxDate: Date;\n\n  /** Amount of rendered months */\n  amountOfMonths?: number;\n}\n\nexport function getDisabledState({ maxDate, minDate, month, amountOfMonths }: GetDisabledState) {\n  const nextDisabled =\n    maxDate instanceof Date &&\n    dayjs(month)\n      .add(amountOfMonths - 1, 'month')\n      .endOf('month')\n      .isAfter(dayjs(maxDate).endOf('day').subtract(1, 'minute'));\n  const previousDisabled =\n    minDate instanceof Date &&\n    dayjs(month).startOf('month').isBefore(dayjs(minDate).startOf('day').add(1, 'minute'));\n\n  return { nextDisabled, previousDisabled };\n}\n"],"names":[],"mappings":";;AACO,SAAS,gBAAgB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,cAAc,EAAE,EAAE;AAC9E,EAAE,MAAM,YAAY,GAAG,OAAO,YAAY,IAAI,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,cAAc,GAAG,CAAC,EAAE,OAAO,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC;AAC1K,EAAE,MAAM,gBAAgB,GAAG,OAAO,YAAY,IAAI,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC;AAC7I,EAAE,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,CAAC;AAC5C;;;;"}

package/esm/components/DatePicker/DatePicker.js

@@ -1,6 +1,7 @@
-import React, { forwardRef, useState, useRef } from 'react';
-import { useUncontrolled, useMergedRef, upperFirst } from '@mantine/hooks';
 import dayjs from 'dayjs';
+import React, { forwardRef, useState, useRef, useEffect } from 'react';
+import { useUncontrolled, upperFirst, useMergedRef } from '@mantine/hooks';
+import { useMantineTheme } from '@mantine/core';
 import { Calendar } from '../Calendar/Calendar.js';
 import { DatePickerBase } from '../DatePickerBase/DatePickerBase.js';
 
@@ -41,7 +42,7 @@ const DatePicker = forwardRef((_a, ref) => {
     styles,
     shadow = "sm",
     locale = "en",
-    inputFormat = "MMMM D, YYYY",
+    inputFormat,
     transitionDuration = 200,
     transitionTimingFunction,
     nextMonthLabel,
@@ -63,7 +64,14 @@ const DatePicker = forwardRef((_a, ref) => {
     dropdownType = "popover",
     clearable = true,
     disabled = false,
-    clearButtonLabel
+    clearButtonLabel,
+    fixOnBlur = true,
+    allowFreeInput,
+    dateParser,
+    firstDayOfWeek = "monday",
+    onFocus,
+    onBlur,
+    amountOfMonths
   } = _b, others = __objRest(_b, [
     "value",
     "onChange",
@@ -94,11 +102,22 @@ const DatePicker = forwardRef((_a, ref) => {
     "dropdownType",
     "clearable",
     "disabled",
-    "clearButtonLabel"
+    "clearButtonLabel",
+    "fixOnBlur",
+    "allowFreeInput",
+    "dateParser",
+    "firstDayOfWeek",
+    "onFocus",
+    "onBlur",
+    "amountOfMonths"
   ]);
+  const theme = useMantineTheme();
+  const dateFormat = inputFormat || theme.dateFormat;
   const [dropdownOpened, setDropdownOpened] = useState(initiallyOpened);
+  const [calendarMonth, setCalendarMonth] = useState(initialMonth || new Date());
   const calendarSize = size === "lg" || size === "xl" ? "md" : "sm";
   const inputRef = useRef();
+  const [lastValidValue, setLastValidValue] = useState(defaultValue != null ? defaultValue : null);
   const [_value, setValue] = useUncontrolled({
     value,
     defaultValue,
@@ -106,16 +125,64 @@ const DatePicker = forwardRef((_a, ref) => {
     onChange,
     rule: (val) => val === null || val instanceof Date
   });
+  const [focused, setFocused] = useState(false);
+  const [inputState, setInputState] = useState(_value instanceof Date ? upperFirst(dayjs(_value).locale(locale).format(dateFormat)) : "");
+  useEffect(() => {
+    if (value === null && !focused) {
+      setInputState("");
+    }
+    if (value instanceof Date && !focused) {
+      setInputState(dayjs(value).locale(locale).format(dateFormat));
+    }
+  }, [value, focused]);
   const handleValueChange = (date) => {
     setValue(date);
+    setInputState(upperFirst(dayjs(date).locale(locale).format(dateFormat)));
     closeCalendarOnChange && setDropdownOpened(false);
+    window.setTimeout(() => {
+      var _a2;
+      return (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+    }, 0);
   };
   const handleClear = () => {
     var _a2;
     setValue(null);
+    setLastValidValue(null);
+    setInputState("");
+    setDropdownOpened(true);
     (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DatePickerBase, __spreadValues({
+  const parseDate = (date) => dateParser ? dateParser(date) : dayjs(date, dateFormat, locale).toDate();
+  const handleInputBlur = (event) => {
+    typeof onBlur === "function" && onBlur(event);
+    setFocused(false);
+    const date = typeof _value === "string" ? parseDate(_value) : _value;
+    if (dayjs(date).isValid()) {
+      setValue(date);
+      setLastValidValue(date);
+      setInputState(upperFirst(dayjs(date).locale(locale).format(dateFormat)));
+    } else if (fixOnBlur) {
+      setValue(lastValidValue);
+    }
+  };
+  const handleInputFocus = (event) => {
+    typeof onFocus === "function" && onFocus(event);
+    setFocused(true);
+  };
+  const handleChange = (event) => {
+    setDropdownOpened(true);
+    const date = parseDate(event.target.value);
+    if (dayjs(date).isValid()) {
+      setValue(date);
+      setLastValidValue(date);
+      setInputState(event.target.value);
+      setCalendarMonth(date);
+    } else {
+      setInputState(event.target.value);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(DatePickerBase, __spreadValues({
+    allowFreeInput,
     dropdownOpened,
     setDropdownOpened,
     shadow,
@@ -124,8 +191,12 @@ const DatePicker = forwardRef((_a, ref) => {
     size,
     styles,
     classNames,
-    inputLabel: _value instanceof Date ? upperFirst(dayjs(_value).locale(locale).format(inputFormat)) : null,
-    __staticSelector: "date-picker",
+    onChange: handleChange,
+    onBlur: handleInputBlur,
+    onFocus: handleInputFocus,
+    name,
+    inputLabel: inputState,
+    __staticSelector: "DatePicker",
     dropdownType,
     clearable: clearable && !!_value && !disabled,
     clearButtonLabel,
@@ -137,11 +208,13 @@ const DatePicker = forwardRef((_a, ref) => {
     locale,
     nextMonthLabel,
     previousMonthLabel,
-    initialMonth: _value instanceof Date ? _value : initialMonth,
-    value: _value,
+    month: allowFreeInput ? calendarMonth : void 0,
+    initialMonth: initialMonth || (_value instanceof Date ? _value : new Date()),
+    onMonthChange: setCalendarMonth,
+    value: _value instanceof Date ? _value : dayjs(_value).toDate(),
     onChange: handleValueChange,
     labelFormat,
-    withSelect,
+    withSelect: withSelect && !allowFreeInput,
     yearsRange,
     dayClassName,
     dayStyle,
@@ -149,13 +222,12 @@ const DatePicker = forwardRef((_a, ref) => {
     minDate,
     maxDate,
     excludeDate,
-    __staticSelector: "date-picker",
+    __staticSelector: "DatePicker",
     fullWidth: dropdownType === "modal",
-    size: dropdownType === "modal" ? "lg" : calendarSize
-  })), /* @__PURE__ */ React.createElement("input", {
-    type: "hidden",
-    name,
-    value: _value instanceof Date ? _value.toISOString() : ""
+    size: dropdownType === "modal" ? "lg" : calendarSize,
+    firstDayOfWeek,
+    preventFocus: allowFreeInput,
+    amountOfMonths
   }));
 });
 DatePicker.displayName = "@mantine/dates/DatePicker";