chore: remove @internationalized/message from calendar

package.json

@@ -85,8 +85,8 @@
     "tsup": "7.2.0",
     "turbo": "1.10.13",
     "typescript": "4.9.5",
-    "vite": "3.2.7",
-    "vite-plugin-solid": "2.7.0"
+    "vite": "5.0.11",
+    "vite-plugin-solid": "2.8.0"
   },
   "packageManager": "[email protected]"
 }

packages/core/src/calendar/calendar-context.tsx

@@ -2,8 +2,9 @@ import { CalendarDate, DateDuration } from "@internationalized/date";
 import { RangeValue, ValidationState } from "@kobalte/utils";
 import { Accessor, createContext, useContext } from "solid-js";
 
-import { Direction, LocalizedMessageFormatter } from "../i18n";
+import { Direction } from "../i18n";
 import { CalendarSelectionMode, DateValue } from "./types";
+import { CalendarIntlTranslations } from "./calendar.intl";
 
 export interface CalendarDataSet {}
 
@@ -23,7 +24,7 @@ export interface CalendarContextValue {
   max: Accessor<DateValue | undefined>;
   timeZone: Accessor<string>;
   validationState: Accessor<ValidationState | null>;
-  messageFormatter: Accessor<LocalizedMessageFormatter>;
+  translations: Accessor<CalendarIntlTranslations>;
   isDisabled: Accessor<boolean>;
   isReadOnly: Accessor<boolean>;
   isDragging: Accessor<boolean>;

packages/core/src/calendar/calendar-grid-body-cell-trigger.tsx

@@ -132,7 +132,7 @@ export function CalendarGridBodyCellTrigger(props: CalendarGridBodyCellTriggerPr
       if (start && end && (isSameDay(context.date(), start) || isSameDay(context.date(), end))) {
         label =
           getSelectedDateDescription(
-            rootContext.messageFormatter(),
+            rootContext.translations(),
             context.date(),
             rootContext.timeZone(),
           ) + ", ";
@@ -142,25 +142,19 @@ export function CalendarGridBodyCellTrigger(props: CalendarGridBodyCellTriggerPr
     label += labelDateFormatter().format(nativeDate());
     if (context.isDateToday()) {
       // If date is today, set appropriate string depending on selected state:
-      label = rootContext
-        .messageFormatter()
-        .format(context.isSelected() ? "todayDateSelected" : "todayDate", {
-          date: label,
-        });
+      label = rootContext.translations().todayDate(label, context.isSelected());
     } else if (context.isSelected()) {
       // If date is selected but not today:
-      label = rootContext.messageFormatter().format("dateSelected", {
-        date: label,
-      });
+      label = rootContext.translations().dateSelected(label);
     }
 
     const min = rootContext.min();
     const max = rootContext.max();
 
     if (min && isSameDay(context.date(), min)) {
-      label += ", " + rootContext.messageFormatter().format("minimumDate");
+      label += ", " + rootContext.translations().minimumDate;
     } else if (max && isSameDay(context.date(), max)) {
-      label += ", " + rootContext.messageFormatter().format("maximumDate");
+      label += ", " + rootContext.translations().maximumDate;
     }
 
     return label;

packages/core/src/calendar/calendar-grid.tsx

@@ -81,7 +81,7 @@ export function CalendarGrid(props: CalendarGridProps) {
 
   const visibleRangeDescription = createMemo(() => {
     return getVisibleRangeDescription(
-      rootContext.messageFormatter(),
+      rootContext.translations(),
       startDate(),
       endDate(),
       rootContext.timeZone(),

packages/core/src/calendar/calendar-heading.tsx

@@ -20,7 +20,7 @@ export function CalendarHeading(props: CalendarHeadingProps) {
 
   const title = createMemo(() => {
     return getVisibleRangeDescription(
-      rootContext.messageFormatter(),
+      rootContext.translations(),
       rootContext.startDate(),
       rootContext.endDate(),
       rootContext.timeZone(),

packages/core/src/calendar/calendar-next-trigger.tsx

@@ -59,7 +59,7 @@ export function CalendarNextTrigger(props: CalendarNextTriggerProps) {
   return (
     <Button.Root
       disabled={nextTriggerDisabled()}
-      aria-label={context.messageFormatter().format("next")}
+      aria-label={context.translations().next}
       onClick={onClick}
       onFocus={onFocus}
       onBlur={onBlur}

packages/core/src/calendar/calendar-prev-trigger.tsx

@@ -59,7 +59,7 @@ export function CalendarPrevTrigger(props: CalendarPrevTriggerProps) {
   return (
     <Button.Root
       disabled={prevTriggerDisabled()}
-      aria-label={context.messageFormatter().format("previous")}
+      aria-label={context.translations().previous}
       onClick={onClick}
       onFocus={onFocus}
       onBlur={onBlur}

packages/core/src/calendar/calendar-root.tsx

@@ -41,11 +41,11 @@ import {
   splitProps,
 } from "solid-js";
 
-import { createMessageFormatter, getReadingDirection, useLocale } from "../i18n";
+import { getReadingDirection, useLocale } from "../i18n";
 import { announce } from "../live-announcer";
 import { AsChildProp, Polymorphic } from "../polymorphic";
 import { createControllableSignal, createInteractOutside } from "../primitives";
-import { CALENDAR_INTL_MESSAGES } from "./calendar.intl";
+import { CalendarIntlTranslations, CALENDAR_INTL_MESSAGES } from "./calendar.intl";
 import { CalendarContext, CalendarContextValue, CalendarDataSet } from "./calendar-context";
 import { DateAlignment, DateValue } from "./types";
 import {
@@ -135,6 +135,9 @@ export type CalendarRootOptions = (
   | CalendarRangeSelectionOptions
 ) &
   AsChildProp & {
+    /** The localized strings of the component. */
+    translations?: CalendarIntlTranslations;
+
     /**
      * A function that creates a [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html)
      * object for a given calendar identifier. Such a function may be imported from the
@@ -207,11 +210,13 @@ export function CalendarRoot(props: CalendarRootProps) {
     {
       visibleDuration: { months: 1 },
       selectionMode: "single",
+      translations: CALENDAR_INTL_MESSAGES,
     },
     props,
   );
 
   const [local, others] = splitProps(props, [
+    "translations",
     "ref",
     "locale",
     "createCalendar",
@@ -235,8 +240,6 @@ export function CalendarRoot(props: CalendarRootProps) {
     "aria-label",
   ]);
 
-  const messageFormatter = createMessageFormatter(() => CALENDAR_INTL_MESSAGES);
-
   const locale = createMemo(() => {
     return local.locale ?? useLocale().locale();
   });
@@ -366,7 +369,13 @@ export function CalendarRoot(props: CalendarRootProps) {
   const [isDragging, setIsDragging] = createSignal(false);
 
   const visibleRangeDescription = createMemo(() => {
-    return getVisibleRangeDescription(messageFormatter(), startDate(), endDate(), timeZone(), true);
+    return getVisibleRangeDescription(
+      local.translations!,
+      startDate(),
+      endDate(),
+      timeZone(),
+      true,
+    );
   });
 
   const ariaLabel = () => {
@@ -776,16 +785,16 @@ export function CalendarRoot(props: CalendarRootProps) {
 
     if (local.selectionMode === "single") {
       const date = asSingleValue(value());
-      description = date && getSelectedDateDescription(messageFormatter(), date, timeZone());
+      description = date && getSelectedDateDescription(local.translations!, date, timeZone());
     } else if (local.selectionMode === "multiple") {
       const dates = asArrayValue(value());
       description = dates
-        ?.map(date => getSelectedDateDescription(messageFormatter(), date, timeZone()))
+        ?.map(date => getSelectedDateDescription(local.translations!, date, timeZone()))
         .join(", ");
     } else if (local.selectionMode === "range") {
       const dateRange = asRangeValue(value()) ?? {};
       description = getSelectedDateRangeDescription(
-        messageFormatter(),
+        local.translations!,
         dateRange,
         anchorDate(),
         timeZone(),
@@ -895,7 +904,7 @@ export function CalendarRoot(props: CalendarRootProps) {
     min,
     max,
     timeZone,
-    messageFormatter,
+    translations: () => local.translations!,
     setStartDate,
     setAnchorDate,
     setIsFocused,