@mantine/dates 9.0.1 → 9.1.0

package/lib/components/YearPicker/YearPicker.d.ts

@@ -3,8 +3,19 @@ import { DatePickerType, DateStringValue, PickerBaseProps } from '../../types';
 import { CalendarBaseProps } from '../Calendar';
 import { DecadeLevelBaseSettings } from '../DecadeLevel';
 import { DecadeLevelGroupStylesNames } from '../DecadeLevelGroup';
-export type YearPickerStylesNames = DecadeLevelGroupStylesNames;
+export interface YearPickerPreset<Type extends DatePickerType> {
+    value: Type extends 'range' ? [DateStringValue | null, DateStringValue | null] : Type extends 'multiple' ? DateStringValue[] : DateStringValue | null;
+    label: React.ReactNode;
+}
+export type YearPickerCssVariables = {
+    yearPickerRoot: '--preset-font-size';
+};
+export type YearPickerStylesNames = DecadeLevelGroupStylesNames | 'presetsList' | 'presetButton' | 'yearPickerRoot';
 export interface YearPickerBaseProps<Type extends DatePickerType = 'default'> extends PickerBaseProps<Type>, DecadeLevelBaseSettings, Omit<CalendarBaseProps, 'onNextYear' | 'onPreviousYear' | 'onNextMonth' | 'onPreviousMonth' | 'hasNextLevel'> {
+    /** Predefined values to pick from */
+    presets?: YearPickerPreset<Type>[];
+    /** If defined, called with preset value, suppresses `onChange` call */
+    __onPresetSelect?: (preset: Type extends 'range' ? [DateStringValue | null, DateStringValue | null] : DateStringValue | null) => void;
 }
 export interface YearPickerProps<Type extends DatePickerType = 'default'> extends BoxProps, YearPickerBaseProps<Type>, StylesApiProps<YearPickerFactory>, ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {
     /** Called when year is selected */
@@ -14,6 +25,7 @@ export type YearPickerFactory = Factory<{
     props: YearPickerProps;
     ref: HTMLDivElement;
     stylesNames: YearPickerStylesNames;
+    vars: YearPickerCssVariables;
 }>;
 type YearPickerComponent = (<Type extends DatePickerType = 'default'>(props: YearPickerProps<Type> & {
     ref?: React.Ref<HTMLDivElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/dates",
-  "version": "9.0.1",
+  "version": "9.1.0",
   "description": "Calendars, date and time pickers based on Mantine components",
   "homepage": "https://mantine.dev/dates/getting-started/",
   "license": "MIT",
@@ -45,8 +45,8 @@
     "directory": "packages/@mantine/dates"
   },
   "peerDependencies": {
-    "@mantine/core": "9.0.1",
-    "@mantine/hooks": "9.0.1",
+    "@mantine/core": "9.1.0",
+    "@mantine/hooks": "9.1.0",
     "dayjs": ">=1.0.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
@@ -59,7 +59,7 @@
     "@mantine-tests/dates": "workspace:*",
     "@mantine/core": "workspace:*",
     "@mantine/hooks": "workspace:*",
-    "react": "19.2.4",
-    "react-dom": "19.2.4"
+    "react": "19.2.5",
+    "react-dom": "19.2.5"
   }
 }

package/styles.css

@@ -638,6 +638,102 @@
     cursor: default;
   }
 
+.m_d01e596f {
+  display: flex;
+  font-size: var(--preset-font-size);
+}
+
+.m_52a6b4b0 {
+  display: flex;
+  flex-direction: column;
+  border-inline-end: calc(0.0625rem * var(--mantine-scale)) solid;
+  padding-inline-end: 0.5em;
+  margin-inline-end: 0.5em;
+}
+
+:where([data-mantine-color-scheme='light']) .m_52a6b4b0 {
+    border-color: var(--mantine-color-gray-2);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_52a6b4b0 {
+    border-color: var(--mantine-color-dark-5);
+}
+
+.m_b0d93233 {
+  padding: 0.52em 0.8em;
+  border-radius: var(--mantine-radius-default);
+  font-size: var(--preset-font-size);
+  white-space: nowrap;
+}
+
+@media (hover: hover) {
+    :where([data-mantine-color-scheme='light']) .m_b0d93233:hover {
+      background-color: var(--mantine-color-gray-0);
+  }
+
+    :where([data-mantine-color-scheme='dark']) .m_b0d93233:hover {
+      background-color: var(--mantine-color-dark-5);
+  }
+}
+
+@media (hover: none) {
+    :where([data-mantine-color-scheme='light']) .m_b0d93233:active {
+      background-color: var(--mantine-color-gray-0);
+  }
+
+    :where([data-mantine-color-scheme='dark']) .m_b0d93233:active {
+      background-color: var(--mantine-color-dark-5);
+  }
+}
+
+.m_53c9e871 {
+  display: flex;
+  font-size: var(--preset-font-size);
+}
+
+.m_cccb8ff3 {
+  display: flex;
+  flex-direction: column;
+  border-inline-end: calc(0.0625rem * var(--mantine-scale)) solid;
+  padding-inline-end: 0.5em;
+  margin-inline-end: 0.5em;
+}
+
+:where([data-mantine-color-scheme='light']) .m_cccb8ff3 {
+    border-color: var(--mantine-color-gray-2);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_cccb8ff3 {
+    border-color: var(--mantine-color-dark-5);
+}
+
+.m_7b4fbf50 {
+  padding: 0.52em 0.8em;
+  border-radius: var(--mantine-radius-default);
+  font-size: var(--preset-font-size);
+  white-space: nowrap;
+}
+
+@media (hover: hover) {
+    :where([data-mantine-color-scheme='light']) .m_7b4fbf50:hover {
+      background-color: var(--mantine-color-gray-0);
+  }
+
+    :where([data-mantine-color-scheme='dark']) .m_7b4fbf50:hover {
+      background-color: var(--mantine-color-dark-5);
+  }
+}
+
+@media (hover: none) {
+    :where([data-mantine-color-scheme='light']) .m_7b4fbf50:active {
+      background-color: var(--mantine-color-gray-0);
+  }
+
+    :where([data-mantine-color-scheme='dark']) .m_7b4fbf50:active {
+      background-color: var(--mantine-color-dark-5);
+  }
+}
+
 .m_765a40cf {
   display: flex;
   font-size: var(--preset-font-size);

package/styles.layer.css

@@ -638,6 +638,102 @@
     cursor: default;
   }
 
+.m_d01e596f {
+  display: flex;
+  font-size: var(--preset-font-size);
+}
+
+.m_52a6b4b0 {
+  display: flex;
+  flex-direction: column;
+  border-inline-end: calc(0.0625rem * var(--mantine-scale)) solid;
+  padding-inline-end: 0.5em;
+  margin-inline-end: 0.5em;
+}
+
+:where([data-mantine-color-scheme='light']) .m_52a6b4b0 {
+    border-color: var(--mantine-color-gray-2);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_52a6b4b0 {
+    border-color: var(--mantine-color-dark-5);
+}
+
+.m_b0d93233 {
+  padding: 0.52em 0.8em;
+  border-radius: var(--mantine-radius-default);
+  font-size: var(--preset-font-size);
+  white-space: nowrap;
+}
+
+@media (hover: hover) {
+    :where([data-mantine-color-scheme='light']) .m_b0d93233:hover {
+      background-color: var(--mantine-color-gray-0);
+  }
+
+    :where([data-mantine-color-scheme='dark']) .m_b0d93233:hover {
+      background-color: var(--mantine-color-dark-5);
+  }
+}
+
+@media (hover: none) {
+    :where([data-mantine-color-scheme='light']) .m_b0d93233:active {
+      background-color: var(--mantine-color-gray-0);
+  }
+
+    :where([data-mantine-color-scheme='dark']) .m_b0d93233:active {
+      background-color: var(--mantine-color-dark-5);
+  }
+}
+
+.m_53c9e871 {
+  display: flex;
+  font-size: var(--preset-font-size);
+}
+
+.m_cccb8ff3 {
+  display: flex;
+  flex-direction: column;
+  border-inline-end: calc(0.0625rem * var(--mantine-scale)) solid;
+  padding-inline-end: 0.5em;
+  margin-inline-end: 0.5em;
+}
+
+:where([data-mantine-color-scheme='light']) .m_cccb8ff3 {
+    border-color: var(--mantine-color-gray-2);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_cccb8ff3 {
+    border-color: var(--mantine-color-dark-5);
+}
+
+.m_7b4fbf50 {
+  padding: 0.52em 0.8em;
+  border-radius: var(--mantine-radius-default);
+  font-size: var(--preset-font-size);
+  white-space: nowrap;
+}
+
+@media (hover: hover) {
+    :where([data-mantine-color-scheme='light']) .m_7b4fbf50:hover {
+      background-color: var(--mantine-color-gray-0);
+  }
+
+    :where([data-mantine-color-scheme='dark']) .m_7b4fbf50:hover {
+      background-color: var(--mantine-color-dark-5);
+  }
+}
+
+@media (hover: none) {
+    :where([data-mantine-color-scheme='light']) .m_7b4fbf50:active {
+      background-color: var(--mantine-color-gray-0);
+  }
+
+    :where([data-mantine-color-scheme='dark']) .m_7b4fbf50:active {
+      background-color: var(--mantine-color-dark-5);
+  }
+}
+
 .m_765a40cf {
   display: flex;
   font-size: var(--preset-font-size);