npm - @mantine/dates - Versions diffs - 3.1.9 → 3.2.3 - Mend

@mantine/dates 3.1.9 → 3.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (120) hide show

package/README.md CHANGED Viewed

@@ -29,6 +29,6 @@ function App() {
 }
 ```
-## Licence
+## License
-All Mantine packages have MIT licence. All Mantine dependencies also have MIT licence.
+All Mantine packages have MIT license. All Mantine dependencies also have MIT license.

package/cjs/components/Calendar/Calendar.js CHANGED Viewed

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var dayjs = require('dayjs');
+var core = require('@mantine/core');
 var hooks = require('@mantine/hooks');
 var Month = require('../Month/Month.js');
 var CalendarHeader = require('./CalendarHeader/CalendarHeader.js');
@@ -68,7 +69,10 @@ const Calendar = React.forwardRef((_a, ref) => {
     size = "sm",
     __staticSelector = "Calendar",
     monthLabel,
-    yearLabel
+    yearLabel,
+    preventFocus,
+    firstDayOfWeek = "monday",
+    amountOfMonths = 1
   } = _b, others = __objRest(_b, [
     "classNames",
     "styles",
@@ -93,7 +97,10 @@ const Calendar = React.forwardRef((_a, ref) => {
     "size",
     "__staticSelector",
     "monthLabel",
-    "yearLabel"
+    "yearLabel",
+    "preventFocus",
+    "firstDayOfWeek",
+    "amountOfMonths"
   ]);
   const [_month, setMonth] = hooks.useUncontrolled({
     value: month,
@@ -103,46 +110,68 @@ const Calendar = React.forwardRef((_a, ref) => {
     rule: (val) => val instanceof Date
   });
   const disabledState = getDisabledState.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__default.createElement(CalendarWrapper.CalendarWrapper, __spreadValues({
     size,
     fullWidth,
-    ref
-  }, others), /* @__PURE__ */ React__default.createElement(CalendarHeader.CalendarHeader, {
-    size,
-    nextMonthLabel,
-    previousMonthLabel,
-    previousMonthDisabled: disabledState.previousDisabled,
-    nextMonthDisabled: disabledState.nextDisabled,
-    onPreviousMonth: () => setMonth(dayjs__default(_month).subtract(1, "month").toDate()),
-    onNextMonth: () => setMonth(dayjs__default(_month).add(1, "month").toDate()),
-    classNames,
-    styles,
-    locale,
-    withSelect,
-    yearsRange,
-    month: _month,
-    setMonth,
-    labelFormat,
-    __staticSelector,
-    monthLabel,
-    yearLabel
-  }), /* @__PURE__ */ React__default.createElement(Month.Month, {
-    month: _month,
-    value,
-    onChange,
-    dayClassName,
-    dayStyle,
-    disableOutsideEvents,
-    minDate,
-    maxDate,
-    excludeDate,
-    classNames,
-    styles,
-    fullWidth,
-    size,
-    locale,
-    __staticSelector
-  }));
+    ref,
+    amountOfMonths
+  }, others), /* @__PURE__ */ React__default.createElement(core.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__default(_month).add(monthIndex, "month").toDate();
+    const hiddenMonth = isFirstMonth ? "next" : isLastMonth ? "prev" : "both";
+    return /* @__PURE__ */ React__default.createElement("div", {
+      key: `month-${monthIndex}`
+    }, /* @__PURE__ */ React__default.createElement(CalendarHeader.CalendarHeader, {
+      size,
+      nextMonthLabel,
+      previousMonthLabel,
+      previousMonthDisabled: disabledState.previousDisabled,
+      nextMonthDisabled: disabledState.nextDisabled,
+      onPreviousMonth: () => setMonth(dayjs__default(_month).subtract(1, "month").toDate()),
+      onNextMonth: () => setMonth(dayjs__default(_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__default.createElement(Month.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/cjs/components/Calendar/Calendar.js.map CHANGED Viewed

	@@ -1 +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":["forwardRef","useUncontrolled","getDisabledState","React","CalendarWrapper","CalendarHeader","dayjs","Month"],"mappings":"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"}
1	+ {"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":["forwardRef","useUncontrolled","getDisabledState","React","CalendarWrapper","Group","dayjs","CalendarHeader","Month"],"mappings":"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"}

package/cjs/components/Calendar/CalendarHeader/CalendarHeader.js CHANGED Viewed

@@ -37,11 +37,20 @@ function CalendarHeader({
   labelFormat,
   __staticSelector,
   monthLabel,
-  yearLabel
+  yearLabel,
+  preventFocus = false,
+  hiddenMonth
 }) {
   const theme = core.useMantineTheme();
-  const iconSize = core.getSizeValue({ size, sizes: iconSizes });
-  const iconButtonSize = core.getSizeValue({ size, sizes: Day_styles.sizes });
+  const iconSize = theme.fn.size({ size, sizes: iconSizes });
+  const iconButtonSize = theme.fn.size({ size, sizes: Day_styles.sizes });
+  const controlStyles = {
+    "&:disabled": {
+      backgroundColor: "transparent",
+      borderColor: "transparent",
+      opacity: 0.4
+    }
+  };
   return /* @__PURE__ */ React__default.createElement(core.Group, {
     position: "apart",
     noWrap: true,
@@ -49,9 +58,13 @@ function CalendarHeader({
   }, /* @__PURE__ */ React__default.createElement(core.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__default.createElement(ArrowIcon.ArrowIcon, {
     direction: "left",
     width: iconSize,
@@ -68,13 +81,18 @@ function CalendarHeader({
     size,
     __staticSelector,
     monthLabel,
-    yearLabel
+    yearLabel,
+    preventFocus
   }), /* @__PURE__ */ React__default.createElement(core.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__default.createElement(ArrowIcon.ArrowIcon, {
     direction: "right",
     width: iconSize,

package/cjs/components/Calendar/CalendarHeader/CalendarHeader.js.map CHANGED Viewed

	@@ -1 +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":["useMantineTheme","~~getSizeValue","~~DAY_SIZES","React","Group","ActionIcon","ArrowIcon","CalendarLabel"],"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,GAAGA,oBAAe,EAAE,CAAC;AAClC,EAAE,MAAM,QAAQ,~~GAAGC~~,~~iBAAY~~,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;~~AAC5D~~,EAAE,MAAM,cAAc,~~GAAGA~~,~~iBAAY~~,CAAC,EAAE,IAAI,EAAE,KAAK,EAAEC,gBAAS,EAAE,CAAC,CAAC;~~AAClE~~,EAAE,uBAAuBC,cAAK,CAAC,aAAa,CAACC,UAAK,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,kBAAkBD,cAAK,CAAC,aAAa,CAACE,eAAU,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,kBAAkBF,cAAK,CAAC,aAAa,CAACG,mBAAS,EAAE;AACpD,IAAI,SAAS,EAAE,MAAM;AACrB,IAAI,KAAK,EAAE,QAAQ;AACnB,IAAI,MAAM,EAAE,QAAQ;AACpB,GAAG,CAAC,CAAC,kBAAkBH,cAAK,CAAC,aAAa,CAACI,2BAAa,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,kBAAkBJ,cAAK,CAAC,aAAa,CAACE,eAAU,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,kBAAkBF,cAAK,CAAC,aAAa,CAACG,mBAAS,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;;;;"}
1	+ {"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":["useMantineTheme","DAY_SIZES","React","Group","ActionIcon","ArrowIcon","CalendarLabel"],"mappings":"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"}

package/cjs/components/Calendar/CalendarLabel/CalendarLabel.js CHANGED Viewed

@@ -27,7 +27,8 @@ function CalendarLabel({
   size,
   __staticSelector,
   monthLabel,
-  yearLabel
+  yearLabel,
+  preventFocus
 }) {
   const selectSize = size === "lg" || size === "xl" ? "md" : "xs";
   const { classes } = CalendarLabel_styles['default'](null, { classNames, styles, name: __staticSelector });
@@ -40,6 +41,7 @@ function CalendarLabel({
     className: classes.calendarSelect,
     size: selectSize,
     value: value.getMonth(),
+    onMouseDown: (event) => preventFocus && event.preventDefault(),
     onChange: (event) => onChange(dayjs__default(value).set("month", parseInt(event.currentTarget.value, 10)).toDate()),
     data: getMonthsNames.getMonthsNames(locale).map((month, index) => ({
       label: hooks.upperFirst(month),
@@ -50,6 +52,7 @@ function CalendarLabel({
     className: classes.calendarSelect,
     size: selectSize,
     value: value.getFullYear(),
+    onMouseDown: (event) => preventFocus && event.preventDefault(),
     onChange: (event) => onChange(dayjs__default(value).set("year", parseInt(event.currentTarget.value, 10)).toDate()),
     data: getYearsRange.getYearsRange(yearsRange).map((year) => ({
       label: year.toString(),

package/cjs/components/Calendar/CalendarLabel/CalendarLabel.js.map CHANGED Viewed

	@@ -1 +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":["useStyles","React","Group","NativeSelect","dayjs","getMonthsNames","upperFirst","getYearsRange","Text"],"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,GAAGA,+BAAS,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC,CAAC;AACtF,EAAE,OAAO,UAAU,mBAAmBC,cAAK,CAAC,aAAa,CAACC,UAAK,EAAE;AACjE,IAAI,OAAO,EAAE,CAAC;AACd,IAAI,MAAM,EAAE,IAAI;AAChB,IAAI,SAAS,EAAE,OAAO,CAAC,mBAAmB;AAC1C,GAAG,kBAAkBD,cAAK,CAAC,aAAa,CAACE,iBAAY,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,CAACC,cAAK,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,EAAEC,6BAAc,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,MAAM;AACxD,MAAM,KAAK,EAAEC,gBAAU,CAAC,KAAK,CAAC;AAC9B,MAAM,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE;AAC7B,KAAK,CAAC,CAAC;AACP,GAAG,CAAC,kBAAkBL,cAAK,CAAC,aAAa,CAACE,iBAAY,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,CAACC,cAAK,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,EAAEG,2BAAa,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,mBAAmBN,cAAK,CAAC,aAAa,CAACO,SAAI,EAAE;AAClD,IAAI,SAAS,EAAE,OAAO,CAAC,aAAa;AACpC,IAAI,IAAI;AACR,GAAG,EAAEF,gBAAU,CAACF,cAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;AAClE,CAAC;AACD,aAAa,CAAC,WAAW,GAAG,8BAA8B;;;;"}
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 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":["useStyles","React","Group","NativeSelect","dayjs","getMonthsNames","upperFirst","getYearsRange","Text"],"mappings":"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"}

package/cjs/components/Calendar/CalendarWrapper/CalendarWrapper.js CHANGED Viewed

@@ -39,14 +39,16 @@ var __objRest = (source, exclude) => {
   return target;
 };
 const CalendarWrapper = React.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 } = core.useExtractedMargins({ others, style });
-  const { sxClassName } = core.useSx({ sx, className });
+  const { sxClassName, theme } = core.useSx({ sx, className });
+  const _maxWidth = theme.fn.size({ size, sizes: Day_styles.sizes }) * 7;
+  const maxWidth = amountOfMonths > 1 ? _maxWidth * amountOfMonths + (amountOfMonths - 1) * 16 : _maxWidth;
   return /* @__PURE__ */ React__default.createElement("div", __spreadValues({
     ref,
     className: sxClassName,
     style: __spreadValues({
-      maxWidth: fullWidth ? "100%" : core.getSizeValue({ size, sizes: Day_styles.sizes }) * 7
+      maxWidth: fullWidth ? "100%" : maxWidth
     }, mergedStyles)
   }, rest));
 });

package/cjs/components/Calendar/CalendarWrapper/CalendarWrapper.js.map CHANGED Viewed

	@@ -1 +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":["forwardRef","useExtractedMargins","useSx","~~React~~","~~getSizeValue~~"~~,"DAY_SIZES"~~],"mappings":";;;;;;;;;;;;AAAA,IAAI,SAAS,GAAG,MAAM,CAAC,cAAc,CAAC;AACtC,IAAI,mBAAmB,GAAG,MAAM,CAAC,qBAAqB,CAAC;AACvD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC;AACnD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,oBAAoB,CAAC;AACzD,IAAI,eAAe,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,KAAK,GAAG,IAAI,GAAG,GAAG,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAChK,IAAI,cAAc,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK;AAC/B,EAAE,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;AAChC,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AAClC,MAAM,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AACxC,EAAE,IAAI,mBAAmB;AACzB,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,CAAC,CAAC,EAAE;AAC7C,MAAM,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AACpC,QAAQ,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1C,KAAK;AACL,EAAE,OAAO,CAAC,CAAC;AACX,CAAC,CAAC;AACF,IAAI,SAAS,GAAG,CAAC,MAAM,EAAE,OAAO,KAAK;AACrC,EAAE,IAAI,MAAM,GAAG,EAAE,CAAC;AAClB,EAAE,KAAK,IAAI,IAAI,IAAI,MAAM;AACzB,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AACpE,MAAM,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAClC,EAAE,IAAI,MAAM,IAAI,IAAI,IAAI,mBAAmB;AAC3C,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,MAAM,CAAC,EAAE;AAClD,MAAM,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AACtE,QAAQ,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AACpC,KAAK;AACL,EAAE,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAIU,MAAC,eAAe,GAAGA,gBAAU,CAAC,CAAC,EAAE,EAAE,GAAG,KAAK;AACvD,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,EAAE,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC;~~AACzI~~,EAAE,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,GAAGC,wBAAmB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;AACxE,EAAE,MAAM,EAAE,WAAW,EAAE,GAAGC,UAAK,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC;~~AACnD~~,EAAE,uBAAuBC,cAAK,CAAC,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC;AACnE,IAAI,GAAG;AACP,IAAI,SAAS,EAAE,WAAW;AAC1B,IAAI,KAAK,EAAE,cAAc,CAAC;AAC1B,MAAM,QAAQ,EAAE,SAAS,GAAG,MAAM,~~GAAGC,iBAAY,CAAC,EAAE,IAAI,EAAE,KAAK,EAAEC,gBAAS,EAAE,CAAC,~~GAAG,~~CAAC~~;~~AACjF~~,KAAK,EAAE,YAAY,CAAC;AACpB,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC;AACZ,CAAC,EAAE;AACH,eAAe,CAAC,WAAW,GAAG,gCAAgC;;;;"}
1	+ {"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":["forwardRef","useExtractedMargins","useSx","DAY_SIZES","React"],"mappings":"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"}

package/cjs/components/Calendar/get-disabled-state/get-disabled-state.js CHANGED Viewed

@@ -8,8 +8,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
-function getDisabledState({ maxDate, minDate, month }) {
-  const nextDisabled = maxDate instanceof Date && dayjs__default(month).endOf("month").isAfter(dayjs__default(maxDate).endOf("day").subtract(1, "minute"));
+function getDisabledState({ maxDate, minDate, month, amountOfMonths }) {
+  const nextDisabled = maxDate instanceof Date && dayjs__default(month).add(amountOfMonths - 1, "month").endOf("month").isAfter(dayjs__default(maxDate).endOf("day").subtract(1, "minute"));
   const previousDisabled = minDate instanceof Date && dayjs__default(month).startOf("month").isBefore(dayjs__default(minDate).startOf("day").add(1, "minute"));
   return { nextDisabled, previousDisabled };
 }

package/cjs/components/Calendar/get-disabled-state/get-disabled-state.js.map CHANGED Viewed

	@@ -1 +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":["dayjs"],"mappings":";;;;;;;;;;AACO,SAAS,gBAAgB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE;~~AAC9D~~,EAAE,MAAM,YAAY,GAAG,OAAO,YAAY,IAAI,IAAIA,cAAK,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,CAACA,cAAK,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,IAAIA,cAAK,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,QAAQ,CAACA,cAAK,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;;;;"}
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 /* 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":["dayjs"],"mappings":";;;;;;;;;;AACO,SAAS,gBAAgB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,cAAc,EAAE,EAAE;AAC9E,EAAE,MAAM,YAAY,GAAG,OAAO,YAAY,IAAI,IAAIA,cAAK,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,cAAc,GAAG,CAAC,EAAE,OAAO,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,CAACA,cAAK,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,IAAIA,cAAK,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,QAAQ,CAACA,cAAK,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/cjs/components/DatePicker/DatePicker.js CHANGED Viewed

@@ -2,16 +2,17 @@
 Object.defineProperty(exports, '__esModule', { value: true });
+var dayjs = require('dayjs');
 var React = require('react');
 var hooks = require('@mantine/hooks');
-var dayjs = require('dayjs');
+var core = require('@mantine/core');
 var Calendar = require('../Calendar/Calendar.js');
 var DatePickerBase = require('../DatePickerBase/DatePickerBase.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var __defProp = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -50,7 +51,7 @@ const DatePicker = React.forwardRef((_a, ref) => {
     styles,
     shadow = "sm",
     locale = "en",
-    inputFormat = "MMMM D, YYYY",
+    inputFormat,
     transitionDuration = 200,
     transitionTimingFunction,
     nextMonthLabel,
@@ -72,7 +73,14 @@ const DatePicker = React.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",
@@ -103,11 +111,22 @@ const DatePicker = React.forwardRef((_a, ref) => {
     "dropdownType",
     "clearable",
     "disabled",
-    "clearButtonLabel"
+    "clearButtonLabel",
+    "fixOnBlur",
+    "allowFreeInput",
+    "dateParser",
+    "firstDayOfWeek",
+    "onFocus",
+    "onBlur",
+    "amountOfMonths"
   ]);
+  const theme = core.useMantineTheme();
+  const dateFormat = inputFormat || theme.dateFormat;
   const [dropdownOpened, setDropdownOpened] = React.useState(initiallyOpened);
+  const [calendarMonth, setCalendarMonth] = React.useState(initialMonth || new Date());
   const calendarSize = size === "lg" || size === "xl" ? "md" : "sm";
   const inputRef = React.useRef();
+  const [lastValidValue, setLastValidValue] = React.useState(defaultValue != null ? defaultValue : null);
   const [_value, setValue] = hooks.useUncontrolled({
     value,
     defaultValue,
@@ -115,16 +134,64 @@ const DatePicker = React.forwardRef((_a, ref) => {
     onChange,
     rule: (val) => val === null || val instanceof Date
   });
+  const [focused, setFocused] = React.useState(false);
+  const [inputState, setInputState] = React.useState(_value instanceof Date ? hooks.upperFirst(dayjs__default(_value).locale(locale).format(dateFormat)) : "");
+  React.useEffect(() => {
+    if (value === null && !focused) {
+      setInputState("");
+    }
+    if (value instanceof Date && !focused) {
+      setInputState(dayjs__default(value).locale(locale).format(dateFormat));
+    }
+  }, [value, focused]);
   const handleValueChange = (date) => {
     setValue(date);
+    setInputState(hooks.upperFirst(dayjs__default(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__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(DatePickerBase.DatePickerBase, __spreadValues({
+  const parseDate = (date) => dateParser ? dateParser(date) : dayjs__default(date, dateFormat, locale).toDate();
+  const handleInputBlur = (event) => {
+    typeof onBlur === "function" && onBlur(event);
+    setFocused(false);
+    const date = typeof _value === "string" ? parseDate(_value) : _value;
+    if (dayjs__default(date).isValid()) {
+      setValue(date);
+      setLastValidValue(date);
+      setInputState(hooks.upperFirst(dayjs__default(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__default(date).isValid()) {
+      setValue(date);
+      setLastValidValue(date);
+      setInputState(event.target.value);
+      setCalendarMonth(date);
+    } else {
+      setInputState(event.target.value);
+    }
+  };
+  return /* @__PURE__ */ React__default.createElement(DatePickerBase.DatePickerBase, __spreadValues({
+    allowFreeInput,
     dropdownOpened,
     setDropdownOpened,
     shadow,
@@ -133,8 +200,12 @@ const DatePicker = React.forwardRef((_a, ref) => {
     size,
     styles,
     classNames,
-    inputLabel: _value instanceof Date ? hooks.upperFirst(dayjs__default(_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,
@@ -146,11 +217,13 @@ const DatePicker = React.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__default(_value).toDate(),
     onChange: handleValueChange,
     labelFormat,
-    withSelect,
+    withSelect: withSelect && !allowFreeInput,
     yearsRange,
     dayClassName,
     dayStyle,
@@ -158,13 +231,12 @@ const DatePicker = React.forwardRef((_a, ref) => {
     minDate,
     maxDate,
     excludeDate,
-    __staticSelector: "date-picker",
+    __staticSelector: "DatePicker",
     fullWidth: dropdownType === "modal",
-    size: dropdownType === "modal" ? "lg" : calendarSize
-  })), /* @__PURE__ */ React__default.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";