@mirohq/design-system-calendar 2.4.42 → 2.5.0

package/dist/types.d.ts

@@ -32,6 +32,7 @@ type TransformProps<Props, Media> = {
 declare const StyledCalendar: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, never> & TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {}, {}>;
 type StyledCalendarProps = ComponentPropsWithRef<typeof StyledCalendar>;
 
+type CalendarPeriod = 'day' | 'week' | 'month' | 'quarter';
 interface PredefinedValue<T extends DateRange | DateValue> {
     id: string;
     label: string;
@@ -51,6 +52,32 @@ interface CalendarGridBaseProps extends Omit<StyledCalendarProps, 'defaultValue'
      * Maximum allowed date to select from
      */
     maxDate?: DateValue;
+    /**
+     * When true, the header title becomes clickable and allows navigating
+     * between day, month and year views. The quarter view is reached only with
+     * `period='quarter'`. Ignored when visibleMonths > 1.
+     * @default false
+     */
+    navigation?: boolean;
+    /**
+     * Overrides the quarter label shown in the quarter grid. Receives the
+     * quarter number (1–4) and returns the display string. When omitted the
+     * label comes from `locale`, for example "Q1" in English and "T1" in French.
+     */
+    formatQuarterLabel?: (quarter: number) => string;
+    /**
+     * Overrides the accessible label for the header title button that switches
+     * between views. Receives the visible title text and the next view name.
+     * When omitted the wording comes from `locale`.
+     */
+    formatSwitchViewLabel?: (title: string, nextView: string) => string;
+    /**
+     * Label for the "go to current period" button shown at the bottom of a
+     * single picker. Pass already-translated text. When omitted, no button is
+     * rendered. Range pickers never show it, since a range has no current
+     * period to jump to.
+     */
+    goToCurrentLabel?: string;
 }
 interface CalendarPopoverBaseProps {
     /**
@@ -90,6 +117,19 @@ interface CalendarGridDatePickerProps extends CalendarGridBaseProps {
      * Type of calendar
      */
     picker: 'single';
+    /**
+     * The granularity at which the calendar operates.
+     * - 'day' (default): standard day picker
+     * - 'week': day grid where clicking any day selects the whole week,
+     *   committing the first day of the week as the value
+     * - 'month': shows a month grid as the main view; selecting a month commits
+     *   the first day of that month as the value. Years navigation above.
+     * - 'quarter': shows a quarter grid (Q1–Q4) as the main view; selecting a
+     *   quarter commits the first day of that quarter as the value. Years
+     *   navigation above.
+     * @default 'day'
+     */
+    period?: CalendarPeriod;
     /**
      * Value given for already pre-selected date
      */
@@ -115,6 +155,11 @@ interface CalendarGridRangePickerProps extends CalendarGridBaseProps {
      * Type of calendar
      */
     picker: 'range';
+    /**
+     * Periods are a single-picker concept: a range already spans arbitrary days,
+     * so there is nothing for the granularity to mean here.
+     */
+    period?: never;
     /**
      * Value given for already pre-selected date
      */
@@ -306,6 +351,7 @@ type StyledValueProps = ComponentPropsWithRef<typeof StyledValue>;
 type FormatOptions = Pick<Intl.DateTimeFormatOptions, 'weekday' | 'era' | 'year' | 'month' | 'day' | 'formatMatcher'>;
 type ValueProps = StyledValueProps & {
     format?: FormatOptions;
+    currentLabel?: string;
 };
 declare const Value: react__default.ForwardRefExoticComponent<Omit<ValueProps, "ref"> & react__default.RefAttributes<HTMLSpanElement>>;
 
@@ -342,7 +388,7 @@ interface Partials {
     ClearButton: typeof ClearButton;
     SaveButton: typeof SaveButton;
 }
-declare const CalendarGrid: ({ picker, defaultValue, value, onValueChange, locale, visibleMonths, minDate, maxDate, predefinedValues, }: CalendarGridProps) => JSX.Element;
+declare const CalendarGrid: ({ picker, defaultValue, value, onValueChange, locale, visibleMonths, minDate, maxDate, predefinedValues, navigation, period, formatQuarterLabel, formatSwitchViewLabel, goToCurrentLabel, }: CalendarGridProps) => JSX.Element;
 
 export { Calendar, CalendarGrid };
-export type { ClearButtonProps as CalendarClearButtonProps, ContentProps as CalendarContentProps, CalendarGridProps, CalendarProps, SaveButtonProps as CalendarSaveButtonProps, TriggerProps as CalendarTriggerProps, ValueProps as CalendarValueProps };
+export type { ClearButtonProps as CalendarClearButtonProps, ContentProps as CalendarContentProps, CalendarGridProps, CalendarPeriod, CalendarProps, SaveButtonProps as CalendarSaveButtonProps, TriggerProps as CalendarTriggerProps, ValueProps as CalendarValueProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-calendar",
-  "version": "2.4.42",
+  "version": "2.5.0",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -35,19 +35,19 @@
     "react-aria": "^3.25.0",
     "react-stately": "^3.23.0",
     "@mirohq/design-system-base-form": "^2.0.2",
-    "@mirohq/design-system-base-button": "^1.2.40",
     "@mirohq/design-system-base-text-field": "^1.3.41",
-    "@mirohq/design-system-flex": "^3.2.39",
     "@mirohq/design-system-button": "^5.3.18",
     "@mirohq/design-system-icons": "^1.47.2",
+    "@mirohq/design-system-flex": "^3.2.39",
     "@mirohq/design-system-icon-button": "^4.2.43",
     "@mirohq/design-system-primitive": "^2.2.1",
+    "@mirohq/design-system-base-button": "^1.2.40",
     "@mirohq/design-system-styles": "^3.2.35",
     "@mirohq/design-system-types": "^1.0.3",
-    "@mirohq/design-system-stitches": "^3.3.35",
     "@mirohq/design-system-tooltip": "^4.4.38",
+    "@mirohq/design-system-utils": "^1.5.0",
     "@mirohq/design-system-typography": "^1.3.37",
-    "@mirohq/design-system-utils": "^1.5.0"
+    "@mirohq/design-system-stitches": "^3.3.35"
   },
   "scripts": {
     "build": "rollup -c ../../../rollup.config.js",