@salt-ds/lab 1.0.0-alpha.66 → 1.0.0-alpha.68

package/dist-cjs/calendar/internal/CalendarMonth.js

@@ -1,9 +1,9 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 var core = require('@salt-ds/core');
 var clsx = require('clsx');
-var react = require('react');
 var CalendarDay = require('./CalendarDay.js');
 var utils = require('./utils.js');
 var styles = require('@salt-ds/styles');
@@ -14,14 +14,7 @@ var CalendarMonth$1 = require('./CalendarMonth.css.js');
 
 const withBaseName = core.makePrefixer("saltCalendarMonth");
 const CalendarMonth = react.forwardRef(function CalendarMonth2(props, ref) {
-  const {
-    className,
-    date,
-    renderDayContents,
-    onMouseLeave,
-    TooltipProps,
-    ...rest
-  } = props;
+  const { className, date, onMouseLeave, CalendarDayProps, ...rest } = props;
   const { dateAdapter } = LocalizationProvider.useLocalization();
   const targetWindow = window.useWindow();
   styles.useComponentCssInjection({
@@ -30,10 +23,10 @@ const CalendarMonth = react.forwardRef(function CalendarMonth2(props, ref) {
     window: targetWindow
   });
   const {
-    state: { locale },
+    state: { timezone = "default" },
     helpers: { setHoveredDate }
   } = CalendarContext.useCalendarContext();
-  const days = utils.generateVisibleDays(dateAdapter, date, locale);
+  const days = utils.generateVisibleDays(dateAdapter, date, timezone);
   const handleMouseLeave = (event) => {
     setHoveredDate(event, null);
     onMouseLeave == null ? void 0 : onMouseLeave(event);
@@ -45,18 +38,15 @@ const CalendarMonth = react.forwardRef(function CalendarMonth2(props, ref) {
       ref,
       onMouseLeave: handleMouseLeave,
       ...rest,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "CalendarGrid", className: withBaseName("grid"), children: days.map((day) => {
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          CalendarDay.CalendarDay,
-          {
-            day: day.date,
-            renderDayContents,
-            month: date,
-            TooltipProps
-          },
-          dateAdapter.format(day.date, "DD MMM YYYY", locale)
-        );
-      }) })
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "CalendarGrid", className: withBaseName("grid"), children: days.map((day) => /* @__PURE__ */ react.createElement(
+        CalendarDay.CalendarDay,
+        {
+          ...CalendarDayProps,
+          key: dateAdapter.format(day, "DD MMM YYYY"),
+          date: day,
+          month: date
+        }
+      )) })
     }
   );
 });

package/dist-cjs/calendar/internal/CalendarMonth.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarMonth.js","sources":["../src/calendar/internal/CalendarMonth.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithRef,\n  type MouseEvent,\n  type SyntheticEvent,\n  forwardRef,\n} from \"react\";\nimport { CalendarDay, type CalendarDayProps } from \"./CalendarDay\";\nimport { generateVisibleDays } from \"./utils\";\n\nimport type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useLocalization } from \"../../localization-provider\";\nimport { useCalendarContext } from \"./CalendarContext\";\nimport calendarMonthCss from \"./CalendarMonth.css\";\n\nexport interface CalendarMonthProps<TDate>\n  extends ComponentPropsWithRef<\"div\"> {\n  /**\n   * Month to render as selectable dates\n   */\n  date: TDate;\n  /**\n   * Function to render the contents of a day.\n   */\n  renderDayContents?: CalendarDayProps<TDate>[\"renderDayContents\"];\n  /**\n   * Props for the tooltip component.\n   */\n  TooltipProps?: CalendarDayProps<TDate>[\"TooltipProps\"];\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarMonth\");\n\nexport const CalendarMonth = forwardRef<\n  HTMLDivElement,\n  CalendarMonthProps<any>\n>(function CalendarMonth<TDate extends DateFrameworkType>(\n  props: CalendarMonthProps<TDate>,\n  ref: React.Ref<HTMLDivElement>,\n) {\n  const {\n    className,\n    date,\n    renderDayContents,\n    onMouseLeave,\n    TooltipProps,\n    ...rest\n  } = props;\n  const { dateAdapter } = useLocalization<TDate>();\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-calendar-month\",\n    css: calendarMonthCss,\n    window: targetWindow,\n  });\n\n  const {\n    state: { locale },\n    helpers: { setHoveredDate },\n  } = useCalendarContext<TDate>();\n  const days = generateVisibleDays<TDate>(dateAdapter, date, locale);\n  const handleMouseLeave = (event: SyntheticEvent) => {\n    setHoveredDate(event, null);\n    onMouseLeave?.(event as MouseEvent<HTMLDivElement>);\n  };\n\n  return (\n    <div\n      className={clsx(withBaseName(), className)}\n      ref={ref}\n      onMouseLeave={handleMouseLeave}\n      {...rest}\n    >\n      <div data-testid=\"CalendarGrid\" className={withBaseName(\"grid\")}>\n        {days.map((day) => {\n          return (\n            <CalendarDay\n              key={dateAdapter.format(day.date, \"DD MMM YYYY\", locale)}\n              day={day.date}\n              renderDayContents={renderDayContents}\n              month={date}\n              TooltipProps={TooltipProps}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","CalendarMonth","useLocalization","useWindow","useComponentCssInjection","calendarMonthCss","useCalendarContext","generateVisibleDays","jsx","clsx","CalendarDay"],"mappings":";;;;;;;;;;;;;;AAkCA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA;AAE9C,MAAM,aAAgB,GAAAC,gBAAA,CAG3B,SAASC,cAAAA,CACT,OACA,GACA,EAAA;AACA,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,IAAA;AAAA,IACA,iBAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AACJ,EAAM,MAAA,EAAE,WAAY,EAAA,GAAIC,oCAAuB,EAAA;AAC/C,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAAC,eAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,KAAA,EAAO,EAAE,MAAO,EAAA;AAAA,IAChB,OAAA,EAAS,EAAE,cAAe;AAAA,MACxBC,kCAA0B,EAAA;AAC9B,EAAA,MAAM,IAAO,GAAAC,yBAAA,CAA2B,WAAa,EAAA,IAAA,EAAM,MAAM,CAAA;AACjE,EAAM,MAAA,gBAAA,GAAmB,CAAC,KAA0B,KAAA;AAClD,IAAA,cAAA,CAAe,OAAO,IAAI,CAAA;AAC1B,IAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,KAAA,CAAA;AAAA,GACjB;AAEA,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,MACA,YAAc,EAAA,gBAAA;AAAA,MACb,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAAD,cAAA,CAAC,KAAI,EAAA,EAAA,aAAA,EAAY,cAAe,EAAA,SAAA,EAAW,YAAa,CAAA,MAAM,CAC3D,EAAA,QAAA,EAAA,IAAA,CAAK,GAAI,CAAA,CAAC,GAAQ,KAAA;AACjB,QACE,uBAAAA,cAAA;AAAA,UAACE,uBAAA;AAAA,UAAA;AAAA,YAEC,KAAK,GAAI,CAAA,IAAA;AAAA,YACT,iBAAA;AAAA,YACA,KAAO,EAAA,IAAA;AAAA,YACP;AAAA,WAAA;AAAA,UAJK,WAAY,CAAA,MAAA,CAAO,GAAI,CAAA,IAAA,EAAM,eAAe,MAAM;AAAA,SAKzD;AAAA,OAEH,CACH,EAAA;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}
+{"version":3,"file":"CalendarMonth.js","sources":["../src/calendar/internal/CalendarMonth.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithRef,\n  type MouseEvent,\n  type SyntheticEvent,\n  forwardRef,\n} from \"react\";\nimport { CalendarDay, type CalendarDayProps } from \"./CalendarDay\";\nimport { generateVisibleDays } from \"./utils\";\n\nimport type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useLocalization } from \"../../localization-provider\";\nimport { useCalendarContext } from \"./CalendarContext\";\nimport calendarMonthCss from \"./CalendarMonth.css\";\n\nexport interface CalendarMonthProps<TDate>\n  extends ComponentPropsWithRef<\"div\"> {\n  /**\n   * Month to render as selectable dates\n   */\n  date: TDate;\n  /**\n   * Props for the CalendarDay component.\n   */\n  CalendarDayProps?: Partial<CalendarDayProps<TDate>>;\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarMonth\");\n\nexport const CalendarMonth = forwardRef<\n  HTMLDivElement,\n  CalendarMonthProps<DateFrameworkType>\n>(function CalendarMonth<TDate extends DateFrameworkType>(\n  props: CalendarMonthProps<TDate>,\n  ref: React.Ref<HTMLDivElement>,\n) {\n  const { className, date, onMouseLeave, CalendarDayProps, ...rest } = props;\n  const { dateAdapter } = useLocalization<TDate>();\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-calendar-month\",\n    css: calendarMonthCss,\n    window: targetWindow,\n  });\n\n  const {\n    state: { timezone = \"default\" },\n    helpers: { setHoveredDate },\n  } = useCalendarContext<TDate>();\n  const days = generateVisibleDays<TDate>(dateAdapter, date, timezone);\n  const handleMouseLeave = (event: SyntheticEvent) => {\n    setHoveredDate(event, null);\n    onMouseLeave?.(event as MouseEvent<HTMLDivElement>);\n  };\n\n  return (\n    <div\n      className={clsx(withBaseName(), className)}\n      ref={ref}\n      onMouseLeave={handleMouseLeave}\n      {...rest}\n    >\n      <div data-testid=\"CalendarGrid\" className={withBaseName(\"grid\")}>\n        {days.map((day) => (\n          <CalendarDay\n            {...CalendarDayProps}\n            key={dateAdapter.format(day, \"DD MMM YYYY\")}\n            date={day}\n            month={date}\n          />\n        ))}\n      </div>\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","CalendarMonth","useLocalization","useWindow","useComponentCssInjection","calendarMonthCss","useCalendarContext","generateVisibleDays","jsx","clsx","createElement","CalendarDay"],"mappings":";;;;;;;;;;;;;;AA8BA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA;AAE9C,MAAM,aAAgB,GAAAC,gBAAA,CAG3B,SAASC,cAAAA,CACT,OACA,GACA,EAAA;AACA,EAAA,MAAM,EAAE,SAAW,EAAA,IAAA,EAAM,cAAc,gBAAkB,EAAA,GAAG,MAAS,GAAA,KAAA;AACrE,EAAM,MAAA,EAAE,WAAY,EAAA,GAAIC,oCAAuB,EAAA;AAC/C,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAAC,eAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,KAAA,EAAO,EAAE,QAAA,GAAW,SAAU,EAAA;AAAA,IAC9B,OAAA,EAAS,EAAE,cAAe;AAAA,MACxBC,kCAA0B,EAAA;AAC9B,EAAA,MAAM,IAAO,GAAAC,yBAAA,CAA2B,WAAa,EAAA,IAAA,EAAM,QAAQ,CAAA;AACnE,EAAM,MAAA,gBAAA,GAAmB,CAAC,KAA0B,KAAA;AAClD,IAAA,cAAA,CAAe,OAAO,IAAI,CAAA;AAC1B,IAAe,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAA,KAAA,CAAA;AAAA,GACjB;AAEA,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,MACA,YAAc,EAAA,gBAAA;AAAA,MACb,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAAD,cAAA,CAAC,KAAI,EAAA,EAAA,aAAA,EAAY,cAAe,EAAA,SAAA,EAAW,YAAa,CAAA,MAAM,CAC3D,EAAA,QAAA,EAAA,IAAA,CAAK,GAAI,CAAA,CAAC,GACT,qBAAAE,mBAAA;AAAA,QAACC,uBAAA;AAAA,QAAA;AAAA,UACE,GAAG,gBAAA;AAAA,UACJ,GAAK,EAAA,WAAA,CAAY,MAAO,CAAA,GAAA,EAAK,aAAa,CAAA;AAAA,UAC1C,IAAM,EAAA,GAAA;AAAA,UACN,KAAO,EAAA;AAAA;AAAA,OAEV,CACH,EAAA;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}

package/dist-cjs/calendar/internal/useFocusManagement.js

@@ -8,14 +8,13 @@ function useFocusManagement({
 }) {
   const { dateAdapter } = LocalizationProvider.useLocalization();
   const {
-    state: { locale },
     helpers: { setFocusedDate }
   } = CalendarContext.useCalendarContext();
   const handleClick = (event) => {
     setFocusedDate(event, date);
   };
   const handleKeyDown = (event) => {
-    let newDate = date;
+    let newDate = void 0;
     switch (event.key) {
       case "ArrowUp":
         newDate = dateAdapter.subtract(date, { weeks: 1 });
@@ -30,10 +29,10 @@ function useFocusManagement({
         newDate = dateAdapter.add(date, { days: 1 });
         break;
       case "Home":
-        newDate = dateAdapter.startOf(date, "week", locale);
+        newDate = dateAdapter.startOf(date, "week");
         break;
       case "End":
-        newDate = dateAdapter.endOf(date, "week", locale);
+        newDate = dateAdapter.endOf(date, "week");
         break;
       case "PageUp":
         if (event.shiftKey) {
@@ -50,10 +49,10 @@ function useFocusManagement({
         }
         break;
     }
-    if (dateAdapter.compare(newDate, date) !== 0) {
+    if (newDate && dateAdapter.compare(newDate, date) !== 0) {
       event.preventDefault();
+      setFocusedDate(event, newDate);
     }
-    setFocusedDate(event, newDate);
   };
   const handleFocus = (event) => {
     setFocusedDate(event, date);

package/dist-cjs/calendar/internal/useFocusManagement.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusManagement.js","sources":["../src/calendar/internal/useFocusManagement.ts"],"sourcesContent":["import type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport type {\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n} from \"react\";\nimport { useLocalization } from \"../../localization-provider\";\nimport { useCalendarContext } from \"./CalendarContext\";\n\nexport function useFocusManagement<TDate extends DateFrameworkType>({\n  date,\n}: {\n  date: TDate;\n}) {\n  const { dateAdapter } = useLocalization<TDate>();\n  const {\n    state: { locale },\n    helpers: { setFocusedDate },\n  } = useCalendarContext<TDate>();\n  const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n    setFocusedDate(event, date);\n  };\n\n  const handleKeyDown: KeyboardEventHandler<HTMLButtonElement> = (event) => {\n    let newDate = date;\n    switch (event.key) {\n      case \"ArrowUp\":\n        newDate = dateAdapter.subtract(date, { weeks: 1 });\n        break;\n      case \"ArrowDown\":\n        newDate = dateAdapter.add(date, { weeks: 1 });\n        break;\n      case \"ArrowLeft\":\n        newDate = dateAdapter.subtract(date, { days: 1 });\n        break;\n      case \"ArrowRight\":\n        newDate = dateAdapter.add(date, { days: 1 });\n        break;\n      case \"Home\":\n        newDate = dateAdapter.startOf(date, \"week\", locale);\n        break;\n      case \"End\":\n        newDate = dateAdapter.endOf(date, \"week\", locale);\n        break;\n      case \"PageUp\":\n        if (event.shiftKey) {\n          newDate = dateAdapter.subtract(date, { years: 1 });\n        } else {\n          newDate = dateAdapter.subtract(date, { months: 1 });\n        }\n        break;\n      case \"PageDown\":\n        if (event.shiftKey) {\n          newDate = dateAdapter.add(date, { years: 1 });\n        } else {\n          newDate = dateAdapter.add(date, { months: 1 });\n        }\n        break;\n      default:\n    }\n    if (dateAdapter.compare(newDate, date) !== 0) {\n      event.preventDefault();\n    }\n    setFocusedDate(event, newDate);\n  };\n\n  const handleFocus: FocusEventHandler<HTMLButtonElement> = (event) => {\n    setFocusedDate(event, date);\n  };\n\n  return {\n    handleClick,\n    handleKeyDown,\n    handleFocus,\n  };\n}\n"],"names":["useLocalization","useCalendarContext"],"mappings":";;;;;AASO,SAAS,kBAAoD,CAAA;AAAA,EAClE;AACF,CAEG,EAAA;AACD,EAAM,MAAA,EAAE,WAAY,EAAA,GAAIA,oCAAuB,EAAA;AAC/C,EAAM,MAAA;AAAA,IACJ,KAAA,EAAO,EAAE,MAAO,EAAA;AAAA,IAChB,OAAA,EAAS,EAAE,cAAe;AAAA,MACxBC,kCAA0B,EAAA;AAC9B,EAAM,MAAA,WAAA,GAAoD,CAAC,KAAU,KAAA;AACnE,IAAA,cAAA,CAAe,OAAO,IAAI,CAAA;AAAA,GAC5B;AAEA,EAAM,MAAA,aAAA,GAAyD,CAAC,KAAU,KAAA;AACxE,IAAA,IAAI,OAAU,GAAA,IAAA;AACd,IAAA,QAAQ,MAAM,GAAK;AAAA,MACjB,KAAK,SAAA;AACH,QAAA,OAAA,GAAU,YAAY,QAAS,CAAA,IAAA,EAAM,EAAE,KAAA,EAAO,GAAG,CAAA;AACjD,QAAA;AAAA,MACF,KAAK,WAAA;AACH,QAAA,OAAA,GAAU,YAAY,GAAI,CAAA,IAAA,EAAM,EAAE,KAAA,EAAO,GAAG,CAAA;AAC5C,QAAA;AAAA,MACF,KAAK,WAAA;AACH,QAAA,OAAA,GAAU,YAAY,QAAS,CAAA,IAAA,EAAM,EAAE,IAAA,EAAM,GAAG,CAAA;AAChD,QAAA;AAAA,MACF,KAAK,YAAA;AACH,QAAA,OAAA,GAAU,YAAY,GAAI,CAAA,IAAA,EAAM,EAAE,IAAA,EAAM,GAAG,CAAA;AAC3C,QAAA;AAAA,MACF,KAAK,MAAA;AACH,QAAA,OAAA,GAAU,WAAY,CAAA,OAAA,CAAQ,IAAM,EAAA,MAAA,EAAQ,MAAM,CAAA;AAClD,QAAA;AAAA,MACF,KAAK,KAAA;AACH,QAAA,OAAA,GAAU,WAAY,CAAA,KAAA,CAAM,IAAM,EAAA,MAAA,EAAQ,MAAM,CAAA;AAChD,QAAA;AAAA,MACF,KAAK,QAAA;AACH,QAAA,IAAI,MAAM,QAAU,EAAA;AAClB,UAAA,OAAA,GAAU,YAAY,QAAS,CAAA,IAAA,EAAM,EAAE,KAAA,EAAO,GAAG,CAAA;AAAA,SAC5C,MAAA;AACL,UAAA,OAAA,GAAU,YAAY,QAAS,CAAA,IAAA,EAAM,EAAE,MAAA,EAAQ,GAAG,CAAA;AAAA;AAEpD,QAAA;AAAA,MACF,KAAK,UAAA;AACH,QAAA,IAAI,MAAM,QAAU,EAAA;AAClB,UAAA,OAAA,GAAU,YAAY,GAAI,CAAA,IAAA,EAAM,EAAE,KAAA,EAAO,GAAG,CAAA;AAAA,SACvC,MAAA;AACL,UAAA,OAAA,GAAU,YAAY,GAAI,CAAA,IAAA,EAAM,EAAE,MAAA,EAAQ,GAAG,CAAA;AAAA;AAE/C,QAAA;AACF;AAEF,IAAA,IAAI,WAAY,CAAA,OAAA,CAAQ,OAAS,EAAA,IAAI,MAAM,CAAG,EAAA;AAC5C,MAAA,KAAA,CAAM,cAAe,EAAA;AAAA;AAEvB,IAAA,cAAA,CAAe,OAAO,OAAO,CAAA;AAAA,GAC/B;AAEA,EAAM,MAAA,WAAA,GAAoD,CAAC,KAAU,KAAA;AACnE,IAAA,cAAA,CAAe,OAAO,IAAI,CAAA;AAAA,GAC5B;AAEA,EAAO,OAAA;AAAA,IACL,WAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
+{"version":3,"file":"useFocusManagement.js","sources":["../src/calendar/internal/useFocusManagement.ts"],"sourcesContent":["import type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport type {\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n} from \"react\";\nimport { useLocalization } from \"../../localization-provider\";\nimport { useCalendarContext } from \"./CalendarContext\";\n\nexport function useFocusManagement<TDate extends DateFrameworkType>({\n  date,\n}: {\n  date: TDate;\n}) {\n  const { dateAdapter } = useLocalization<TDate>();\n  const {\n    helpers: { setFocusedDate },\n  } = useCalendarContext<TDate>();\n  const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n    setFocusedDate(event, date);\n  };\n\n  const handleKeyDown: KeyboardEventHandler<HTMLButtonElement> = (event) => {\n    let newDate: TDate | undefined = undefined;\n    switch (event.key) {\n      case \"ArrowUp\":\n        newDate = dateAdapter.subtract(date, { weeks: 1 });\n        break;\n      case \"ArrowDown\":\n        newDate = dateAdapter.add(date, { weeks: 1 });\n        break;\n      case \"ArrowLeft\":\n        newDate = dateAdapter.subtract(date, { days: 1 });\n        break;\n      case \"ArrowRight\":\n        newDate = dateAdapter.add(date, { days: 1 });\n        break;\n      case \"Home\":\n        newDate = dateAdapter.startOf(date, \"week\");\n        break;\n      case \"End\":\n        newDate = dateAdapter.endOf(date, \"week\");\n        break;\n      case \"PageUp\":\n        if (event.shiftKey) {\n          newDate = dateAdapter.subtract(date, { years: 1 });\n        } else {\n          newDate = dateAdapter.subtract(date, { months: 1 });\n        }\n        break;\n      case \"PageDown\":\n        if (event.shiftKey) {\n          newDate = dateAdapter.add(date, { years: 1 });\n        } else {\n          newDate = dateAdapter.add(date, { months: 1 });\n        }\n        break;\n      default:\n    }\n    if (newDate && dateAdapter.compare(newDate, date) !== 0) {\n      event.preventDefault();\n      setFocusedDate(event, newDate);\n    }\n  };\n\n  const handleFocus: FocusEventHandler<HTMLButtonElement> = (event) => {\n    setFocusedDate(event, date);\n  };\n\n  return {\n    handleClick,\n    handleKeyDown,\n    handleFocus,\n  };\n}\n"],"names":["useLocalization","useCalendarContext"],"mappings":";;;;;AASO,SAAS,kBAAoD,CAAA;AAAA,EAClE;AACF,CAEG,EAAA;AACD,EAAM,MAAA,EAAE,WAAY,EAAA,GAAIA,oCAAuB,EAAA;AAC/C,EAAM,MAAA;AAAA,IACJ,OAAA,EAAS,EAAE,cAAe;AAAA,MACxBC,kCAA0B,EAAA;AAC9B,EAAM,MAAA,WAAA,GAAoD,CAAC,KAAU,KAAA;AACnE,IAAA,cAAA,CAAe,OAAO,IAAI,CAAA;AAAA,GAC5B;AAEA,EAAM,MAAA,aAAA,GAAyD,CAAC,KAAU,KAAA;AACxE,IAAA,IAAI,OAA6B,GAAA,MAAA;AACjC,IAAA,QAAQ,MAAM,GAAK;AAAA,MACjB,KAAK,SAAA;AACH,QAAA,OAAA,GAAU,YAAY,QAAS,CAAA,IAAA,EAAM,EAAE,KAAA,EAAO,GAAG,CAAA;AACjD,QAAA;AAAA,MACF,KAAK,WAAA;AACH,QAAA,OAAA,GAAU,YAAY,GAAI,CAAA,IAAA,EAAM,EAAE,KAAA,EAAO,GAAG,CAAA;AAC5C,QAAA;AAAA,MACF,KAAK,WAAA;AACH,QAAA,OAAA,GAAU,YAAY,QAAS,CAAA,IAAA,EAAM,EAAE,IAAA,EAAM,GAAG,CAAA;AAChD,QAAA;AAAA,MACF,KAAK,YAAA;AACH,QAAA,OAAA,GAAU,YAAY,GAAI,CAAA,IAAA,EAAM,EAAE,IAAA,EAAM,GAAG,CAAA;AAC3C,QAAA;AAAA,MACF,KAAK,MAAA;AACH,QAAU,OAAA,GAAA,WAAA,CAAY,OAAQ,CAAA,IAAA,EAAM,MAAM,CAAA;AAC1C,QAAA;AAAA,MACF,KAAK,KAAA;AACH,QAAU,OAAA,GAAA,WAAA,CAAY,KAAM,CAAA,IAAA,EAAM,MAAM,CAAA;AACxC,QAAA;AAAA,MACF,KAAK,QAAA;AACH,QAAA,IAAI,MAAM,QAAU,EAAA;AAClB,UAAA,OAAA,GAAU,YAAY,QAAS,CAAA,IAAA,EAAM,EAAE,KAAA,EAAO,GAAG,CAAA;AAAA,SAC5C,MAAA;AACL,UAAA,OAAA,GAAU,YAAY,QAAS,CAAA,IAAA,EAAM,EAAE,MAAA,EAAQ,GAAG,CAAA;AAAA;AAEpD,QAAA;AAAA,MACF,KAAK,UAAA;AACH,QAAA,IAAI,MAAM,QAAU,EAAA;AAClB,UAAA,OAAA,GAAU,YAAY,GAAI,CAAA,IAAA,EAAM,EAAE,KAAA,EAAO,GAAG,CAAA;AAAA,SACvC,MAAA;AACL,UAAA,OAAA,GAAU,YAAY,GAAI,CAAA,IAAA,EAAM,EAAE,MAAA,EAAQ,GAAG,CAAA;AAAA;AAE/C,QAAA;AACF;AAEF,IAAA,IAAI,WAAW,WAAY,CAAA,OAAA,CAAQ,OAAS,EAAA,IAAI,MAAM,CAAG,EAAA;AACvD,MAAA,KAAA,CAAM,cAAe,EAAA;AACrB,MAAA,cAAA,CAAe,OAAO,OAAO,CAAA;AAAA;AAC/B,GACF;AAEA,EAAM,MAAA,WAAA,GAAoD,CAAC,KAAU,KAAA;AACnE,IAAA,cAAA,CAAe,OAAO,IAAI,CAAA;AAAA,GAC5B;AAEA,EAAO,OAAA;AAAA,IACL,WAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/dist-cjs/calendar/internal/utils.js

@@ -1,9 +1,9 @@
 'use strict';
 
-function daysOfWeek(dateAdapter, format, locale) {
+function daysOfWeek(dateAdapter, format) {
   return Array.from(
     { length: 7 },
-    (_, day) => dateAdapter.getDayOfWeekName(day, format, locale)
+    (_, day) => dateAdapter.getDayOfWeekName(day, format)
   );
 }
 function generateMonthsForYear(dateAdapter, currentYear) {
@@ -13,20 +13,16 @@ function generateMonthsForYear(dateAdapter, currentYear) {
     (_, month) => dateAdapter.add(startOfYear, { months: month })
   );
 }
-function generateVisibleDays(dateAdapter, currentMonth, locale) {
+function generateVisibleDays(dateAdapter, currentMonth, timezone) {
   const totalDays = 6 * 7;
   const startDate = dateAdapter.startOf(
-    dateAdapter.startOf(currentMonth, "month", locale),
-    "week",
-    locale
+    dateAdapter.startOf(currentMonth, "month"),
+    "week"
   );
   return [...Array(totalDays).keys()].map((dayDelta) => {
-    const day = dateAdapter.add(startDate, { days: dayDelta });
-    return {
-      date: day,
-      dateOfMonth: dateAdapter.getMonth(day),
-      isCurrentMonth: dateAdapter.isSame(day, currentMonth, "month")
-    };
+    let day = dateAdapter.add(startDate, { days: dayDelta });
+    day = dateAdapter.setTimezone(day, timezone);
+    return day;
   });
 }
 function monthDiff(dateAdapter, a, b) {

package/dist-cjs/calendar/internal/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../src/calendar/internal/utils.ts"],"sourcesContent":["import type {\n  DateFrameworkType,\n  SaltDateAdapter,\n} from \"@salt-ds/date-adapters\";\n\nexport function daysOfWeek<TDate extends DateFrameworkType>(\n  dateAdapter: SaltDateAdapter<TDate>,\n  format: \"long\" | \"short\" | \"narrow\",\n  locale?: any,\n) {\n  return Array.from({ length: 7 }, (_, day) =>\n    dateAdapter.getDayOfWeekName(day, format, locale),\n  );\n}\n\nexport function generateMonthsForYear<TDate extends DateFrameworkType>(\n  dateAdapter: SaltDateAdapter<TDate>,\n  currentYear: TDate,\n) {\n  const startOfYear = dateAdapter.startOf(currentYear, \"year\");\n  return Array.from({ length: 12 }, (_, month) =>\n    dateAdapter.add(startOfYear, { months: month }),\n  );\n}\n\nexport function generateVisibleDays<TDate extends DateFrameworkType>(\n  dateAdapter: SaltDateAdapter<TDate>,\n  currentMonth: TDate,\n  locale?: any,\n) {\n  const totalDays = 6 * 7;\n  const startDate = dateAdapter.startOf(\n    dateAdapter.startOf(currentMonth, \"month\", locale),\n    \"week\",\n    locale,\n  );\n  return [...Array(totalDays).keys()].map((dayDelta) => {\n    const day = dateAdapter.add(startDate, { days: dayDelta });\n    return {\n      date: day,\n      dateOfMonth: dateAdapter.getMonth(day),\n      isCurrentMonth: dateAdapter.isSame(day, currentMonth, \"month\"),\n    };\n  });\n}\n\nexport function monthDiff<TDate extends DateFrameworkType>(\n  dateAdapter: SaltDateAdapter<TDate>,\n  a: TDate,\n  b: TDate,\n) {\n  const aMonth = dateAdapter.getMonth(a);\n  const aYear = dateAdapter.getYear(a);\n  const bMonth = dateAdapter.getMonth(b);\n  const bYear = dateAdapter.getYear(b);\n\n  return bMonth - aMonth + 12 * (bYear - aYear);\n}\n\nexport function generateDatesForMonth<TDate extends DateFrameworkType>(\n  dateAdapter: SaltDateAdapter<TDate>,\n  date: TDate,\n): TDate[] {\n  const startDate = dateAdapter.startOf(date, \"month\");\n  const endDate = dateAdapter.endOf(date, \"month\");\n  const dates: TDate[] = [];\n  for (\n    let currentDate = startDate;\n    dateAdapter.compare(currentDate, endDate) <= 0;\n    currentDate = dateAdapter.add(currentDate, { days: 1 })\n  ) {\n    dates.push(currentDate);\n  }\n  return dates;\n}\n"],"names":[],"mappings":";;AAKgB,SAAA,UAAA,CACd,WACA,EAAA,MAAA,EACA,MACA,EAAA;AACA,EAAA,OAAO,KAAM,CAAA,IAAA;AAAA,IAAK,EAAE,QAAQ,CAAE,EAAA;AAAA,IAAG,CAAC,CAAG,EAAA,GAAA,KACnC,YAAY,gBAAiB,CAAA,GAAA,EAAK,QAAQ,MAAM;AAAA,GAClD;AACF;AAEgB,SAAA,qBAAA,CACd,aACA,WACA,EAAA;AACA,EAAA,MAAM,WAAc,GAAA,WAAA,CAAY,OAAQ,CAAA,WAAA,EAAa,MAAM,CAAA;AAC3D,EAAA,OAAO,KAAM,CAAA,IAAA;AAAA,IAAK,EAAE,QAAQ,EAAG,EAAA;AAAA,IAAG,CAAC,GAAG,KACpC,KAAA,WAAA,CAAY,IAAI,WAAa,EAAA,EAAE,MAAQ,EAAA,KAAA,EAAO;AAAA,GAChD;AACF;AAEgB,SAAA,mBAAA,CACd,WACA,EAAA,YAAA,EACA,MACA,EAAA;AACA,EAAA,MAAM,YAAY,CAAI,GAAA,CAAA;AACtB,EAAA,MAAM,YAAY,WAAY,CAAA,OAAA;AAAA,IAC5B,WAAY,CAAA,OAAA,CAAQ,YAAc,EAAA,OAAA,EAAS,MAAM,CAAA;AAAA,IACjD,MAAA;AAAA,IACA;AAAA,GACF;AACA,EAAO,OAAA,CAAC,GAAG,KAAA,CAAM,SAAS,CAAA,CAAE,MAAM,CAAA,CAAE,GAAI,CAAA,CAAC,QAAa,KAAA;AACpD,IAAA,MAAM,MAAM,WAAY,CAAA,GAAA,CAAI,WAAW,EAAE,IAAA,EAAM,UAAU,CAAA;AACzD,IAAO,OAAA;AAAA,MACL,IAAM,EAAA,GAAA;AAAA,MACN,WAAA,EAAa,WAAY,CAAA,QAAA,CAAS,GAAG,CAAA;AAAA,MACrC,cAAgB,EAAA,WAAA,CAAY,MAAO,CAAA,GAAA,EAAK,cAAc,OAAO;AAAA,KAC/D;AAAA,GACD,CAAA;AACH;AAEgB,SAAA,SAAA,CACd,WACA,EAAA,CAAA,EACA,CACA,EAAA;AACA,EAAM,MAAA,MAAA,GAAS,WAAY,CAAA,QAAA,CAAS,CAAC,CAAA;AACrC,EAAM,MAAA,KAAA,GAAQ,WAAY,CAAA,OAAA,CAAQ,CAAC,CAAA;AACnC,EAAM,MAAA,MAAA,GAAS,WAAY,CAAA,QAAA,CAAS,CAAC,CAAA;AACrC,EAAM,MAAA,KAAA,GAAQ,WAAY,CAAA,OAAA,CAAQ,CAAC,CAAA;AAEnC,EAAO,OAAA,MAAA,GAAS,MAAS,GAAA,EAAA,IAAM,KAAQ,GAAA,KAAA,CAAA;AACzC;AAEgB,SAAA,qBAAA,CACd,aACA,IACS,EAAA;AACT,EAAA,MAAM,SAAY,GAAA,WAAA,CAAY,OAAQ,CAAA,IAAA,EAAM,OAAO,CAAA;AACnD,EAAA,MAAM,OAAU,GAAA,WAAA,CAAY,KAAM,CAAA,IAAA,EAAM,OAAO,CAAA;AAC/C,EAAA,MAAM,QAAiB,EAAC;AACxB,EAAA,KAAA,IACM,cAAc,SAClB,EAAA,WAAA,CAAY,OAAQ,CAAA,WAAA,EAAa,OAAO,CAAK,IAAA,CAAA,EAC7C,WAAc,GAAA,WAAA,CAAY,IAAI,WAAa,EAAA,EAAE,IAAM,EAAA,CAAA,EAAG,CACtD,EAAA;AACA,IAAA,KAAA,CAAM,KAAK,WAAW,CAAA;AAAA;AAExB,EAAO,OAAA,KAAA;AACT;;;;;;;;"}
+{"version":3,"file":"utils.js","sources":["../src/calendar/internal/utils.ts"],"sourcesContent":["import type {\n  DateFrameworkType,\n  SaltDateAdapter,\n  Timezone,\n} from \"@salt-ds/date-adapters\";\n\nexport function daysOfWeek<TDate extends DateFrameworkType>(\n  dateAdapter: SaltDateAdapter<TDate>,\n  format: \"long\" | \"short\" | \"narrow\",\n) {\n  return Array.from({ length: 7 }, (_, day) =>\n    dateAdapter.getDayOfWeekName(day, format),\n  );\n}\n\nexport function generateMonthsForYear<TDate extends DateFrameworkType>(\n  dateAdapter: SaltDateAdapter<TDate>,\n  currentYear: TDate,\n) {\n  const startOfYear = dateAdapter.startOf(currentYear, \"year\");\n  return Array.from({ length: 12 }, (_, month) =>\n    dateAdapter.add(startOfYear, { months: month }),\n  );\n}\n\nexport function generateVisibleDays<TDate extends DateFrameworkType>(\n  dateAdapter: SaltDateAdapter<TDate>,\n  currentMonth: TDate,\n  timezone: Timezone,\n) {\n  const totalDays = 6 * 7;\n  const startDate = dateAdapter.startOf(\n    dateAdapter.startOf(currentMonth, \"month\"),\n    \"week\",\n  );\n  return [...Array(totalDays).keys()].map((dayDelta) => {\n    let day = dateAdapter.add(startDate, { days: dayDelta });\n    day = dateAdapter.setTimezone(day, timezone);\n    return day;\n  });\n}\n\nexport function monthDiff<TDate extends DateFrameworkType>(\n  dateAdapter: SaltDateAdapter<TDate>,\n  a: TDate,\n  b: TDate,\n) {\n  const aMonth = dateAdapter.getMonth(a);\n  const aYear = dateAdapter.getYear(a);\n  const bMonth = dateAdapter.getMonth(b);\n  const bYear = dateAdapter.getYear(b);\n\n  return bMonth - aMonth + 12 * (bYear - aYear);\n}\n\nexport function generateDatesForMonth<TDate extends DateFrameworkType>(\n  dateAdapter: SaltDateAdapter<TDate>,\n  date: TDate,\n): TDate[] {\n  const startDate = dateAdapter.startOf(date, \"month\");\n  const endDate = dateAdapter.endOf(date, \"month\");\n  const dates: TDate[] = [];\n  for (\n    let currentDate = startDate;\n    dateAdapter.compare(currentDate, endDate) <= 0;\n    currentDate = dateAdapter.add(currentDate, { days: 1 })\n  ) {\n    dates.push(currentDate);\n  }\n  return dates;\n}\n"],"names":[],"mappings":";;AAMgB,SAAA,UAAA,CACd,aACA,MACA,EAAA;AACA,EAAA,OAAO,KAAM,CAAA,IAAA;AAAA,IAAK,EAAE,QAAQ,CAAE,EAAA;AAAA,IAAG,CAAC,CAAG,EAAA,GAAA,KACnC,WAAY,CAAA,gBAAA,CAAiB,KAAK,MAAM;AAAA,GAC1C;AACF;AAEgB,SAAA,qBAAA,CACd,aACA,WACA,EAAA;AACA,EAAA,MAAM,WAAc,GAAA,WAAA,CAAY,OAAQ,CAAA,WAAA,EAAa,MAAM,CAAA;AAC3D,EAAA,OAAO,KAAM,CAAA,IAAA;AAAA,IAAK,EAAE,QAAQ,EAAG,EAAA;AAAA,IAAG,CAAC,GAAG,KACpC,KAAA,WAAA,CAAY,IAAI,WAAa,EAAA,EAAE,MAAQ,EAAA,KAAA,EAAO;AAAA,GAChD;AACF;AAEgB,SAAA,mBAAA,CACd,WACA,EAAA,YAAA,EACA,QACA,EAAA;AACA,EAAA,MAAM,YAAY,CAAI,GAAA,CAAA;AACtB,EAAA,MAAM,YAAY,WAAY,CAAA,OAAA;AAAA,IAC5B,WAAA,CAAY,OAAQ,CAAA,YAAA,EAAc,OAAO,CAAA;AAAA,IACzC;AAAA,GACF;AACA,EAAO,OAAA,CAAC,GAAG,KAAA,CAAM,SAAS,CAAA,CAAE,MAAM,CAAA,CAAE,GAAI,CAAA,CAAC,QAAa,KAAA;AACpD,IAAA,IAAI,MAAM,WAAY,CAAA,GAAA,CAAI,WAAW,EAAE,IAAA,EAAM,UAAU,CAAA;AACvD,IAAM,GAAA,GAAA,WAAA,CAAY,WAAY,CAAA,GAAA,EAAK,QAAQ,CAAA;AAC3C,IAAO,OAAA,GAAA;AAAA,GACR,CAAA;AACH;AAEgB,SAAA,SAAA,CACd,WACA,EAAA,CAAA,EACA,CACA,EAAA;AACA,EAAM,MAAA,MAAA,GAAS,WAAY,CAAA,QAAA,CAAS,CAAC,CAAA;AACrC,EAAM,MAAA,KAAA,GAAQ,WAAY,CAAA,OAAA,CAAQ,CAAC,CAAA;AACnC,EAAM,MAAA,MAAA,GAAS,WAAY,CAAA,QAAA,CAAS,CAAC,CAAA;AACrC,EAAM,MAAA,KAAA,GAAQ,WAAY,CAAA,OAAA,CAAQ,CAAC,CAAA;AAEnC,EAAO,OAAA,MAAA,GAAS,MAAS,GAAA,EAAA,IAAM,KAAQ,GAAA,KAAA,CAAA;AACzC;AAEgB,SAAA,qBAAA,CACd,aACA,IACS,EAAA;AACT,EAAA,MAAM,SAAY,GAAA,WAAA,CAAY,OAAQ,CAAA,IAAA,EAAM,OAAO,CAAA;AACnD,EAAA,MAAM,OAAU,GAAA,WAAA,CAAY,KAAM,CAAA,IAAA,EAAM,OAAO,CAAA;AAC/C,EAAA,MAAM,QAAiB,EAAC;AACxB,EAAA,KAAA,IACM,cAAc,SAClB,EAAA,WAAA,CAAY,OAAQ,CAAA,WAAA,EAAa,OAAO,CAAK,IAAA,CAAA,EAC7C,WAAc,GAAA,WAAA,CAAY,IAAI,WAAa,EAAA,EAAE,IAAM,EAAA,CAAA,EAAG,CACtD,EAAA;AACA,IAAA,KAAA,CAAM,KAAK,WAAW,CAAA;AAAA;AAExB,EAAO,OAAA,KAAA;AACT;;;;;;;;"}

package/dist-cjs/calendar/useCalendar.js

@@ -3,40 +3,50 @@
 var core = require('@salt-ds/core');
 var react = require('react');
 var LocalizationProvider = require('../localization-provider/LocalizationProvider.js');
-var utils = require('./internal/utils.js');
 var useCalendarSelection = require('./useCalendarSelection.js');
 
 const defaultIsDayUnselectable = () => false;
 const defaultIsDayHighlighted = () => false;
 const defaultIsDayDisabled = () => false;
 function useCalendar(props) {
+  var _a;
   const {
     dateAdapter,
     defaultDates: { minDate: defaultMinDate, maxDate: defaultMaxDate }
   } = LocalizationProvider.useLocalization();
   const {
-    selectedDate,
+    timezone,
     defaultSelectedDate,
-    visibleMonth: visibleMonthProp,
+    defaultVisibleMonth = dateAdapter.today(timezone),
     hideOutOfRangeDates,
-    locale,
-    defaultVisibleMonth = dateAdapter.today(locale),
-    onSelectionChange,
-    onVisibleMonthChange,
-    isDayUnselectable = defaultIsDayUnselectable,
-    isDayHighlighted = defaultIsDayHighlighted,
+    hoveredDate,
+    focusedDate: focusedDateProp,
+    focusedDateRef,
     isDayDisabled = defaultIsDayDisabled,
-    minDate = defaultMinDate,
+    isDayHighlighted = defaultIsDayHighlighted,
+    isDayUnselectable = defaultIsDayUnselectable,
     maxDate = defaultMaxDate,
-    selectionVariant,
+    minDate = defaultMinDate,
+    numberOfVisibleMonths = 1,
     onHoveredDateChange,
-    hoveredDate
+    onSelectionChange,
+    onVisibleMonthChange,
+    onFocusedDateChange,
+    selectedDate,
+    selectionVariant,
+    visibleMonth: visibleMonthProp
     // startDateOffset,
     // endDateOffset,
   } = props;
+  const { matchedBreakpoints } = core.useBreakpoint();
+  const responsiveNumberOfVisibleMonths = core.resolveResponsiveValue(numberOfVisibleMonths, matchedBreakpoints) ?? 1;
   const [visibleMonth, setVisibleMonthState] = core.useControlled({
-    controlled: visibleMonthProp ? dateAdapter.startOf(visibleMonthProp, "month", locale) : void 0,
-    default: dateAdapter.startOf(defaultVisibleMonth, "month", locale),
+    controlled: visibleMonthProp ? dateAdapter.startOf(visibleMonthProp, "month") : void 0,
+    // biome-ignore lint/correctness/useExhaustiveDependencies: just on mount
+    default: react.useMemo(
+      () => dateAdapter.startOf(defaultVisibleMonth, "month"),
+      []
+    ),
     name: "Calendar",
     state: "visibleMonth"
   });
@@ -44,94 +54,75 @@ function useCalendar(props) {
     (date) => {
       return dateAdapter.compare(date, minDate) < 0 || dateAdapter.compare(date, maxDate) > 0;
     },
-    [maxDate, minDate]
+    [dateAdapter, maxDate, minDate]
   );
   const isOutsideAllowedMonths = react.useCallback(
     (date) => {
-      const startOfMonth = dateAdapter.startOf(date, "month", locale);
-      const endOfMonth = dateAdapter.endOf(date, "month", locale);
+      const startOfMonth = dateAdapter.startOf(date, "month");
+      const endOfMonth = dateAdapter.endOf(date, "month");
       return dateAdapter.compare(endOfMonth, minDate) < 0 || dateAdapter.compare(startOfMonth, maxDate) > 0;
     },
-    [minDate, maxDate]
+    [dateAdapter, minDate, maxDate]
   );
   const isOutsideAllowedYears = react.useCallback(
     (date) => {
-      const startOfYear = dateAdapter.startOf(date, "year", locale);
-      const endOfYear = dateAdapter.endOf(date, "year", locale);
+      const startOfYear = dateAdapter.startOf(date, "year");
+      const endOfYear = dateAdapter.endOf(date, "year");
       return dateAdapter.compare(endOfYear, minDate) < 0 || dateAdapter.compare(startOfYear, maxDate) > 0;
     },
-    [minDate, maxDate]
+    [dateAdapter, minDate, maxDate]
   );
   const isDaySelectable = react.useCallback(
     (date) => !(date && (isDayUnselectable(date) || isDayDisabled(date) || isOutsideAllowedDates(date))),
     [isDayUnselectable, isDayDisabled, isOutsideAllowedDates]
   );
+  const isDayVisible = react.useCallback(
+    (date) => {
+      if (!date) {
+        return false;
+      }
+      const startInsideDays = dateAdapter.startOf(visibleMonth, "month");
+      if (dateAdapter.compare(date, startInsideDays) < 0) return false;
+      const endVisibleMonth = dateAdapter.add(visibleMonth, {
+        months: responsiveNumberOfVisibleMonths - 1
+      });
+      const endInsideDays = dateAdapter.endOf(endVisibleMonth, "month");
+      return !(dateAdapter.compare(date, endInsideDays) > 0);
+    },
+    [dateAdapter, responsiveNumberOfVisibleMonths, visibleMonth]
+  );
   const selectionManager = useCalendarSelection.useCalendarSelection({
     defaultSelectedDate,
     selectedDate,
     onSelectionChange,
     startDateOffset: props.selectionVariant === "offset" ? props.startDateOffset : void 0,
     endDateOffset: props.selectionVariant === "offset" ? props.endDateOffset : void 0,
+    isOutsideAllowedDates,
     isDaySelectable,
+    isDayVisible,
+    focusedDate: focusedDateProp,
+    focusedDateRef,
+    onFocusedDateChange,
     selectionVariant,
     onHoveredDateChange,
-    hoveredDate
+    hoveredDate,
+    timezone,
+    visibleMonth
   });
-  const [calendarFocused, setCalendarFocused] = react.useState(false);
-  const isInVisibleMonth = react.useCallback(
-    (date) => date != null && dateAdapter.isSame(date, visibleMonth, "month"),
-    [visibleMonth]
-  );
-  const getInitialFocusedDate = react.useCallback(() => {
-    const selectedDate2 = selectionManager.state.selectedDate;
-    if ((selectionVariant === "range" || selectionVariant === "offset") && useCalendarSelection.isDateRangeSelection(selectedDate2)) {
-      if (isInVisibleMonth(selectedDate2 == null ? void 0 : selectedDate2.startDate)) {
-        return selectedDate2.startDate;
-      }
-      if (isInVisibleMonth(selectedDate2 == null ? void 0 : selectedDate2.endDate)) {
-        return selectedDate2.endDate;
-      }
-    } else if (selectionVariant === "multiselect" && Array.isArray(selectedDate2)) {
-      const selectionInMonth = selectedDate2.filter((day) => isInVisibleMonth(day)).sort((a, b) => dateAdapter.compare(a, b));
-      if (selectionInMonth.length > 0) {
-        return selectionInMonth[0];
-      }
-    } else if (selectionVariant === "single" && !useCalendarSelection.isDateRangeSelection(selectedDate2) && !Array.isArray(selectedDate2) && isInVisibleMonth(selectedDate2)) {
-      return selectedDate2;
-    }
-    if (isDaySelectable(dateAdapter.today(locale)) && isInVisibleMonth(dateAdapter.today(locale))) {
-      return dateAdapter.today(locale);
-    }
-    const firstSelectableDate = utils.generateDatesForMonth(
-      dateAdapter,
-      visibleMonth
-    ).find((visibleDay) => isDaySelectable(visibleDay));
-    if (firstSelectableDate) {
-      return firstSelectableDate;
+  react.useEffect(() => {
+    var _a2;
+    const focusedDate = (_a2 = selectionManager == null ? void 0 : selectionManager.state) == null ? void 0 : _a2.focusedDate;
+    const shouldTransition = focusedDate && !focusedDateProp !== void 0 && !isDayVisible(focusedDate) && isDaySelectable(focusedDate) && !isOutsideAllowedDates(focusedDate);
+    if (shouldTransition) {
+      setVisibleMonth(null, dateAdapter.startOf(focusedDate, "month"));
     }
-    return null;
   }, [
-    isInVisibleMonth,
-    selectionVariant,
-    selectionManager.state.selectedDate,
-    visibleMonth
+    dateAdapter,
+    focusedDateProp,
+    isOutsideAllowedDates,
+    isDaySelectable,
+    (_a = selectionManager == null ? void 0 : selectionManager.state) == null ? void 0 : _a.focusedDate
   ]);
-  const [focusedDate, setFocusedDateState] = react.useState(
-    getInitialFocusedDate
-  );
-  const isDayVisible = react.useCallback(
-    (date) => {
-      const startInsideDays = dateAdapter.startOf(
-        visibleMonth,
-        "month",
-        locale
-      );
-      if (dateAdapter.compare(date, startInsideDays) < 0) return false;
-      const endInsideDays = dateAdapter.endOf(visibleMonth, "month", locale);
-      return !(dateAdapter.compare(date, endInsideDays) > 0);
-    },
-    [visibleMonth]
-  );
   const setVisibleMonth = react.useCallback(
     (event, newVisibleMonth) => {
       setVisibleMonthState(newVisibleMonth);
@@ -139,49 +130,20 @@ function useCalendar(props) {
     },
     [onVisibleMonthChange]
   );
-  const setFocusedDate = react.useCallback(
-    (event, date) => {
-      if (!focusedDate || dateAdapter.isSame(date, focusedDate, "day") || isOutsideAllowedDates(date))
-        return;
-      setFocusedDateState(date);
-      const shouldTransition = !isDayVisible(date) && isDaySelectable(date) && !isOutsideAllowedDates(date);
-      if (shouldTransition) {
-        setVisibleMonth(event, dateAdapter.startOf(date, "month", locale));
-      }
-    },
-    [
-      focusedDate,
-      isDaySelectable,
-      isDayVisible,
-      isOutsideAllowedDates,
-      setVisibleMonth
-    ]
-  );
-  react.useEffect(() => {
-    if (visibleMonth && focusedDate && !isDayVisible(focusedDate)) {
-      const focusableDate = getInitialFocusedDate();
-      if (focusableDate) {
-        setFocusedDateState(focusableDate);
-      }
-    }
-  }, [isDayVisible, focusedDate, getInitialFocusedDate, visibleMonth]);
   return react.useMemo(
     () => ({
       state: {
         visibleMonth,
-        focusedDate,
-        locale,
+        timezone,
         minDate,
         maxDate,
+        numberOfVisibleMonths: responsiveNumberOfVisibleMonths,
         selectionVariant,
         hideOutOfRangeDates,
-        calendarFocused,
         ...selectionManager.state
       },
       helpers: {
         setVisibleMonth,
-        setFocusedDate,
-        setCalendarFocused,
         isDayUnselectable,
         isDayHighlighted,
         isDayDisabled,
@@ -194,15 +156,12 @@ function useCalendar(props) {
     }),
     [
       visibleMonth,
-      focusedDate,
-      locale,
+      timezone,
       minDate,
       maxDate,
       selectionVariant,
       hideOutOfRangeDates,
-      calendarFocused,
       setVisibleMonth,
-      setFocusedDate,
       isDayUnselectable,
       isDayHighlighted,
       isDayDisabled,
@@ -210,6 +169,7 @@ function useCalendar(props) {
       isOutsideAllowedDates,
       isOutsideAllowedMonths,
       isOutsideAllowedYears,
+      responsiveNumberOfVisibleMonths,
       selectionManager
     ]
   );

package/dist-cjs/calendar/useCalendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCalendar.js","sources":["../src/calendar/useCalendar.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport {\n  type SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { useLocalization } from \"../localization-provider\";\nimport { generateDatesForMonth } from \"./internal/utils\";\nimport {\n  type UseCalendarSelectionMultiSelectProps,\n  type UseCalendarSelectionOffsetProps,\n  type UseCalendarSelectionProps,\n  type UseCalendarSelectionRangeProps,\n  type UseCalendarSelectionSingleProps,\n  isDateRangeSelection,\n  useCalendarSelection,\n} from \"./useCalendarSelection\";\n\n/**\n * Interface representing the base properties UseCalendar hook.\n */\ninterface UseCalendarBaseProps<TDate> {\n  /**\n   * The default visible month.\n   */\n  defaultVisibleMonth?: TDate;\n  /**\n   * Callback fired when the visible month changes.\n   * @param event - The synthetic event.\n   * @param visibleMonth - The new visible month.\n   */\n  onVisibleMonthChange?: (event: SyntheticEvent, visibleMonth: TDate) => void;\n  /**\n   * Function to determine if a day is unselectable.\n   * @param date - The date to check.\n   * @returns A string reason if the day is unselectable, otherwise `false` or `undefined`.\n   */\n  isDayUnselectable?: (date: TDate) => string | false | undefined;\n  /**\n   * Function to determine if a day is highlighted.\n   * @param date - The date to check.\n   * @returns A string reason if the day is highlighted, otherwise `false` or `undefined`.\n   */\n  isDayHighlighted?: (date: TDate) => string | false | undefined;\n  /**\n   * Function to determine if a day is disabled.\n   * @param date - The date to check.\n   * @returns A string reason if the day is disabled, otherwise `false` or `undefined`.\n   */\n  isDayDisabled?: (date: TDate) => string | false | undefined;\n  /**\n   * The currently visible month.\n   */\n  visibleMonth?: TDate;\n  /**\n   * If `true`, hides dates that are out of the selectable range.\n   */\n  hideOutOfRangeDates?: boolean;\n  /**\n   * Locale for date formatting\n   */\n  locale?: any;\n  /**\n   * The minimum selectable date.\n   */\n  minDate?: TDate;\n  /**\n   * The maximum selectable date.\n   */\n  maxDate?: TDate;\n}\n\n/**\n * UseCalendar hook props for a single date selection Calendar.\n */\nexport interface UseCalendarSingleProps<TDate extends DateFrameworkType>\n  extends UseCalendarSelectionSingleProps<TDate>,\n    UseCalendarBaseProps<TDate> {\n  /**\n   * The selection variant, set to \"single\".\n   */\n  selectionVariant: \"single\";\n}\n\n/**\n * UseCalendar hook props for a date range selection Calendar.\n */\nexport interface UseCalendarRangeProps<TDate extends DateFrameworkType>\n  extends UseCalendarSelectionRangeProps<TDate>,\n    UseCalendarBaseProps<TDate> {\n  /**\n   * The selection variant, set to \"range\".\n   */\n  selectionVariant: \"range\";\n}\n\n/**\n * UseCalendar hook props for a multi-select Calendar.\n */\nexport interface UseCalendarMultiSelectProps<TDate extends DateFrameworkType>\n  extends UseCalendarSelectionMultiSelectProps<TDate>,\n    UseCalendarBaseProps<TDate> {\n  /**\n   * The selection variant, set to \"multiselect\".\n   */\n  selectionVariant: \"multiselect\";\n}\n\n/**\n * UseCalendar hook props for an offset date selection Calendar.\n */\nexport interface UseCalendarOffsetProps<TDate extends DateFrameworkType>\n  extends UseCalendarSelectionOffsetProps<TDate>,\n    UseCalendarBaseProps<TDate> {\n  /**\n   * The selection variant, set to \"offset\".\n   */\n  selectionVariant: \"offset\";\n}\n\n/**\n * UseCalendar hook props, wth the selection variant determining the return type of the date selection\n */\nexport type UseCalendarProps<TDate extends DateFrameworkType> =\n  | UseCalendarSingleProps<TDate>\n  | UseCalendarRangeProps<TDate>\n  | UseCalendarMultiSelectProps<TDate>\n  | UseCalendarOffsetProps<TDate>;\n\n/**\n * Default function to determine if a day is unselectable.\n * @returns `false` indicating the day is selectable.\n */\nconst defaultIsDayUnselectable = (): string | false => false;\n\n/**\n * Default function to determine if a day is highlighted.\n * @returns `false` indicating the day is not highlighted.\n */\nconst defaultIsDayHighlighted = (): string | false => false;\n\n/**\n * Default function to determine if a day is disabled.\n * @returns `false` indicating the day is not disabled.\n */\nconst defaultIsDayDisabled = (): false => false;\n\n/**\n * Represents the return type of the useCalendar hook.\n *\n * @template TDate - The type of the date object used in the calendar.\n */\nexport interface UseCalendarReturn<TDate extends DateFrameworkType> {\n  /**\n   * The state of the calendar.\n   */\n  state: {\n    /**\n     * The currently visible month in the calendar.\n     */\n    visibleMonth: TDate;\n\n    /**\n     * The currently focused date in the calendar, or null if no date is focused.\n     */\n    focusedDate: TDate | null;\n\n    /**\n     * The locale used for date formatting.\n     */\n    locale: any;\n\n    /**\n     * The minimum selectable date in the calendar.\n     */\n    minDate: TDate;\n\n    /**\n     * The maximum selectable date in the calendar.\n     */\n    maxDate: TDate;\n\n    /**\n     * The selection variant of the calendar, indicating the type of selection allowed.\n     */\n    selectionVariant: \"single\" | \"range\" | \"multiselect\" | \"offset\";\n\n    /**\n     * Whether to hide dates that are out of the selectable range.\n     */\n    hideOutOfRangeDates?: boolean;\n\n    /**\n     * Whether the calendar is currently focused.\n     */\n    calendarFocused: boolean;\n\n    /**\n     * Additional state properties from selectionManager.state.\n     */\n    [key: string]: any; // Use a more specific type if possible\n  };\n\n  /**\n   * Helper functions for interacting with the calendar.\n   */\n  helpers: {\n    /**\n     * Sets the visible month in the calendar.\n     *\n     * @param event - The synthetic event triggering the change.\n     * @param newVisibleMonth - The new visible month to set.\n     */\n    setVisibleMonth: (event: SyntheticEvent, newVisibleMonth: TDate) => void;\n\n    /**\n     * Sets the focused date in the calendar.\n     *\n     * @param event - The synthetic event triggering the change.\n     * @param date - The new date to focus.\n     */\n    setFocusedDate: (event: SyntheticEvent, date: TDate) => void;\n\n    /**\n     * Sets whether the calendar is focused.\n     *\n     * @param focused - Whether the calendar should be focused.\n     */\n    setCalendarFocused: (focused: boolean) => void;\n\n    /**\n     * Determines if a day is unselectable.\n     *\n     * @param date - The date to check.\n     * @returns A string reason if the day is unselectable, otherwise `false` or `undefined`.\n     */\n    isDayUnselectable: (date: TDate) => string | false | undefined;\n\n    /**\n     * Determines if a day is highlighted.\n     *\n     * @param date - The date to check.\n     * @returns A string reason if the day is highlighted, otherwise `false` or `undefined`.\n     */\n    isDayHighlighted: (date: TDate) => string | false | undefined;\n\n    /**\n     * Determines if a day is disabled.\n     *\n     * @param date - The date to check.\n     * @returns A string reason if the day is disabled, otherwise `false` or `undefined`.\n     */\n    isDayDisabled: (date: TDate) => string | false | undefined;\n\n    /**\n     * Determines if a day is visible in the calendar.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the day is visible, otherwise `false`.\n     */\n    isDayVisible: (date: TDate) => boolean;\n\n    /**\n     * Determines if a date is outside the allowed date range.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the date is outside the allowed range, otherwise `false`.\n     */\n    isOutsideAllowedDates: (date: TDate) => boolean;\n\n    /**\n     * Determines if a month is outside the allowed range.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the month is outside the allowed range, otherwise `false`.\n     */\n    isOutsideAllowedMonths: (date: TDate) => boolean;\n\n    /**\n     * Determines if a year is outside the allowed range.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the year is outside the allowed range, otherwise `false`.\n     */\n    isOutsideAllowedYears: (date: TDate) => boolean;\n\n    /**\n     * Sets the selected date in the calendar.\n     *\n     * @param event - The event triggering the change.\n     * @param newSelectedDate - The new date to select.\n     */\n    setSelectedDate: (\n      event:\n        | React.KeyboardEvent<HTMLButtonElement>\n        | React.MouseEvent<HTMLButtonElement, MouseEvent>,\n      newSelectedDate: TDate,\n    ) => void;\n\n    /**\n     * Determines if a date is selected.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the date is selected, otherwise `false`.\n     */\n    isSelected: (date: TDate) => boolean;\n\n    /**\n     * Sets the hovered date in the calendar.\n     *\n     * @param event - The event triggering the change.\n     * @param newHoveredDate - The new date to hover.\n     */\n    setHoveredDate: (\n      event: SyntheticEvent,\n      newHoveredDate: TDate | null,\n    ) => void;\n\n    /**\n     * Determines if a date is part of a selected span.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the date is part of a selected span, otherwise `false`.\n     */\n    isSelectedSpan: (date: TDate) => boolean;\n\n    /**\n     * Determines if a date is part of a hovered span.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the date is part of a hovered span, otherwise `false`.\n     */\n    isHoveredSpan: (date: TDate) => boolean;\n\n    /**\n     * Determines if a date is the start of a selected range.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the date is the start of a selected range, otherwise `false`.\n     */\n    isSelectedStart: (date: TDate) => boolean;\n\n    /**\n     * Determines if a date is the end of a selected range.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the date is the end of a selected range, otherwise `false`.\n     */\n    isSelectedEnd: (date: TDate) => boolean;\n\n    /**\n     * Determines if a date is hovered.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the date is hovered, otherwise `false`.\n     */\n    isHovered: (date: TDate) => boolean;\n\n    /**\n     * Determines if a date is part of a hovered offset.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the date is part of a hovered offset, otherwise `false`.\n     */\n    isHoveredOffset: (date: TDate) => boolean;\n\n    /**\n     * Determines if a day is selectable.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the day is selectable, otherwise `false`.\n     */\n    isDaySelectable: (date: TDate) => boolean;\n  };\n}\n\nexport function useCalendar<TDate extends DateFrameworkType>(\n  props: UseCalendarProps<TDate>,\n): UseCalendarReturn<TDate> {\n  const {\n    dateAdapter,\n    defaultDates: { minDate: defaultMinDate, maxDate: defaultMaxDate },\n  } = useLocalization<TDate>();\n  const {\n    selectedDate,\n    defaultSelectedDate,\n    visibleMonth: visibleMonthProp,\n    hideOutOfRangeDates,\n    locale,\n    defaultVisibleMonth = dateAdapter.today(locale),\n    onSelectionChange,\n    onVisibleMonthChange,\n    isDayUnselectable = defaultIsDayUnselectable,\n    isDayHighlighted = defaultIsDayHighlighted,\n    isDayDisabled = defaultIsDayDisabled,\n    minDate = defaultMinDate,\n    maxDate = defaultMaxDate,\n    selectionVariant,\n    onHoveredDateChange,\n    hoveredDate,\n    // startDateOffset,\n    // endDateOffset,\n  } = props;\n  const [visibleMonth, setVisibleMonthState] = useControlled({\n    controlled: visibleMonthProp\n      ? dateAdapter.startOf(visibleMonthProp, \"month\", locale)\n      : undefined,\n    default: dateAdapter.startOf(defaultVisibleMonth, \"month\", locale),\n    name: \"Calendar\",\n    state: \"visibleMonth\",\n  });\n\n  const isOutsideAllowedDates = useCallback(\n    (date: TDate) => {\n      return (\n        dateAdapter.compare(date, minDate) < 0 ||\n        dateAdapter.compare(date, maxDate) > 0\n      );\n    },\n    [maxDate, minDate],\n  );\n\n  const isOutsideAllowedMonths = useCallback(\n    (date: TDate) => {\n      const startOfMonth = dateAdapter.startOf(date, \"month\", locale);\n      const endOfMonth = dateAdapter.endOf(date, \"month\", locale);\n      return (\n        dateAdapter.compare(endOfMonth, minDate) < 0 ||\n        dateAdapter.compare(startOfMonth, maxDate) > 0\n      );\n    },\n    [minDate, maxDate],\n  );\n\n  const isOutsideAllowedYears = useCallback(\n    (date: TDate) => {\n      const startOfYear = dateAdapter.startOf(date, \"year\", locale);\n      const endOfYear = dateAdapter.endOf(date, \"year\", locale);\n      return (\n        dateAdapter.compare(endOfYear, minDate) < 0 ||\n        dateAdapter.compare(startOfYear, maxDate) > 0\n      );\n    },\n    [minDate, maxDate],\n  );\n\n  const isDaySelectable = useCallback(\n    (date?: TDate) =>\n      !(\n        date &&\n        (isDayUnselectable(date) ||\n          isDayDisabled(date) ||\n          isOutsideAllowedDates(date))\n      ),\n    [isDayUnselectable, isDayDisabled, isOutsideAllowedDates],\n  );\n\n  const selectionManager = useCalendarSelection<TDate>({\n    defaultSelectedDate: defaultSelectedDate,\n    selectedDate,\n    onSelectionChange,\n    startDateOffset:\n      props.selectionVariant === \"offset\" ? props.startDateOffset : undefined,\n    endDateOffset:\n      props.selectionVariant === \"offset\" ? props.endDateOffset : undefined,\n    isDaySelectable,\n    selectionVariant,\n    onHoveredDateChange,\n    hoveredDate,\n  } as UseCalendarSelectionProps<TDate>);\n\n  const [calendarFocused, setCalendarFocused] = useState(false);\n\n  const isInVisibleMonth = useCallback(\n    (date: TDate | undefined | null): date is TDate =>\n      date != null && dateAdapter.isSame(date, visibleMonth, \"month\"),\n    [visibleMonth],\n  );\n\n  const getInitialFocusedDate = useCallback(() => {\n    const selectedDate = selectionManager.state.selectedDate;\n    if (\n      (selectionVariant === \"range\" || selectionVariant === \"offset\") &&\n      isDateRangeSelection<TDate>(selectedDate)\n    ) {\n      if (isInVisibleMonth(selectedDate?.startDate)) {\n        return selectedDate.startDate;\n      }\n      if (isInVisibleMonth(selectedDate?.endDate)) {\n        return selectedDate.endDate;\n      }\n    } else if (\n      selectionVariant === \"multiselect\" &&\n      Array.isArray(selectedDate)\n    ) {\n      // return first selected day in visible month\n      const selectionInMonth = selectedDate\n        .filter((day) => isInVisibleMonth(day))\n        .sort((a, b) => dateAdapter.compare(a, b));\n      if (selectionInMonth.length > 0) {\n        return selectionInMonth[0];\n      }\n    } else if (\n      selectionVariant === \"single\" &&\n      !isDateRangeSelection(selectedDate) &&\n      !Array.isArray(selectedDate) &&\n      isInVisibleMonth(selectedDate)\n    ) {\n      return selectedDate;\n    }\n    // Defaults\n    if (\n      isDaySelectable(dateAdapter.today(locale)) &&\n      isInVisibleMonth(dateAdapter.today(locale))\n    ) {\n      return dateAdapter.today(locale);\n    }\n    const firstSelectableDate = generateDatesForMonth(\n      dateAdapter,\n      visibleMonth,\n    ).find((visibleDay) => isDaySelectable(visibleDay));\n    if (firstSelectableDate) {\n      return firstSelectableDate;\n    }\n    return null;\n  }, [\n    isInVisibleMonth,\n    selectionVariant,\n    selectionManager.state.selectedDate,\n    visibleMonth,\n  ]);\n\n  const [focusedDate, setFocusedDateState] = useState<TDate | null>(\n    getInitialFocusedDate,\n  );\n\n  const isDayVisible = useCallback(\n    (date: TDate) => {\n      const startInsideDays = dateAdapter.startOf(\n        visibleMonth,\n        \"month\",\n        locale,\n      );\n\n      if (dateAdapter.compare(date, startInsideDays) < 0) return false;\n\n      const endInsideDays = dateAdapter.endOf(visibleMonth, \"month\", locale);\n\n      return !(dateAdapter.compare(date, endInsideDays) > 0);\n    },\n    [visibleMonth],\n  );\n\n  const setVisibleMonth = useCallback(\n    (event: SyntheticEvent, newVisibleMonth: TDate) => {\n      setVisibleMonthState(newVisibleMonth);\n      onVisibleMonthChange?.(event, newVisibleMonth);\n    },\n    [onVisibleMonthChange],\n  );\n\n  const setFocusedDate = useCallback(\n    (event: SyntheticEvent, date: TDate) => {\n      if (\n        !focusedDate ||\n        dateAdapter.isSame(date, focusedDate, \"day\") ||\n        isOutsideAllowedDates(date)\n      )\n        return;\n\n      setFocusedDateState(date);\n\n      const shouldTransition =\n        !isDayVisible(date) &&\n        isDaySelectable(date) &&\n        !isOutsideAllowedDates(date);\n      if (shouldTransition) {\n        setVisibleMonth(event, dateAdapter.startOf(date, \"month\", locale));\n      }\n    },\n    [\n      focusedDate,\n      isDaySelectable,\n      isDayVisible,\n      isOutsideAllowedDates,\n      setVisibleMonth,\n    ],\n  );\n\n  useEffect(() => {\n    if (visibleMonth && focusedDate && !isDayVisible(focusedDate)) {\n      const focusableDate = getInitialFocusedDate();\n      if (focusableDate) {\n        setFocusedDateState(focusableDate);\n      }\n    }\n  }, [isDayVisible, focusedDate, getInitialFocusedDate, visibleMonth]);\n\n  return useMemo(\n    () =>\n      ({\n        state: {\n          visibleMonth,\n          focusedDate,\n          locale,\n          minDate,\n          maxDate,\n          selectionVariant,\n          hideOutOfRangeDates,\n          calendarFocused,\n          ...selectionManager.state,\n        },\n        helpers: {\n          setVisibleMonth,\n          setFocusedDate,\n          setCalendarFocused,\n          isDayUnselectable,\n          isDayHighlighted,\n          isDayDisabled,\n          isDayVisible,\n          isOutsideAllowedDates,\n          isOutsideAllowedMonths,\n          isOutsideAllowedYears,\n          ...selectionManager.helpers,\n        },\n      }) as UseCalendarReturn<TDate>,\n    [\n      visibleMonth,\n      focusedDate,\n      locale,\n      minDate,\n      maxDate,\n      selectionVariant,\n      hideOutOfRangeDates,\n      calendarFocused,\n      setVisibleMonth,\n      setFocusedDate,\n      isDayUnselectable,\n      isDayHighlighted,\n      isDayDisabled,\n      isDayVisible,\n      isOutsideAllowedDates,\n      isOutsideAllowedMonths,\n      isOutsideAllowedYears,\n      selectionManager,\n    ],\n  );\n}\n"],"names":["useLocalization","useControlled","useCallback","useCalendarSelection","useState","selectedDate","isDateRangeSelection","generateDatesForMonth","useEffect","useMemo"],"mappings":"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"}
+{"version":3,"file":"useCalendar.js","sources":["../src/calendar/useCalendar.ts"],"sourcesContent":["import {\n  type ResponsiveProp,\n  resolveResponsiveValue,\n  useBreakpoint,\n  useControlled,\n} from \"@salt-ds/core\";\nimport type { DateFrameworkType, Timezone } from \"@salt-ds/date-adapters\";\nimport { type SyntheticEvent, useCallback, useEffect, useMemo } from \"react\";\nimport { useLocalization } from \"../localization-provider\";\nimport {\n  type UseCalendarSelectionBaseProps,\n  type UseCalendarSelectionMultiSelectProps,\n  type UseCalendarSelectionOffsetProps,\n  type UseCalendarSelectionProps,\n  type UseCalendarSelectionRangeProps,\n  type UseCalendarSelectionSingleProps,\n  useCalendarSelection,\n} from \"./useCalendarSelection\";\n\n/**\n * Base properties for the UseCalendar hook.\n * @template TDate - The type of the date object.\n */\ninterface UseCalendarBaseProps<TDate>\n  extends UseCalendarSelectionBaseProps<TDate> {\n  /**\n   * The default visible month.\n   */\n  defaultVisibleMonth?: TDate;\n  /**\n   * Callback fired when the visible month changes.\n   * @param event - The synthetic event or null if triggered by code.\n   * @param visibleMonth - The new visible month.\n   */\n  onVisibleMonthChange?: (\n    event: SyntheticEvent | null,\n    visibleMonth: TDate,\n  ) => void;\n  /**\n   * Function to determine if a day is unselectable.\n   * @param date - The date to check.\n   * @returns A string reason if the day is unselectable, otherwise `false` or `undefined`.\n   */\n  isDayUnselectable?: (date: TDate) => string | false | undefined;\n  /**\n   * Function to determine if a day is highlighted.\n   * @param date - The date to check.\n   * @returns A string reason if the day is highlighted, otherwise `false` or `undefined`.\n   */\n  isDayHighlighted?: (date: TDate) => string | false | undefined;\n  /**\n   * Function to determine if a day is disabled.\n   * @param date - The date to check.\n   * @returns A string reason if the day is disabled, otherwise `false` or `undefined`.\n   */\n  isDayDisabled?: (date: TDate) => string | false | undefined;\n  /**\n   * If `true`, hides dates that are out of the selectable range.\n   */\n  hideOutOfRangeDates?: boolean;\n  /**\n   * The minimum selectable date.\n   */\n  minDate?: TDate;\n  /**\n   * The maximum selectable date.\n   */\n  maxDate?: TDate;\n  /**\n   * Number of visible months, maximum 12, defaults to 1.\n   */\n  numberOfVisibleMonths?: ResponsiveProp<\n    1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n  >;\n}\n\n/**\n * UseCalendar hook props for a single date selection Calendar.\n */\nexport interface UseCalendarSingleProps<TDate extends DateFrameworkType>\n  extends UseCalendarSelectionSingleProps<TDate>,\n    UseCalendarBaseProps<TDate> {\n  /**\n   * The selection variant, set to \"single\".\n   */\n  selectionVariant: \"single\";\n}\n\n/**\n * UseCalendar hook props for a date range selection Calendar.\n * @template TDate - The type of the date object.\n */\nexport interface UseCalendarRangeProps<TDate extends DateFrameworkType>\n  extends UseCalendarSelectionRangeProps<TDate>,\n    UseCalendarBaseProps<TDate> {\n  /**\n   * The selection variant, set to \"range\".\n   */\n  selectionVariant: \"range\";\n}\n\n/**\n * UseCalendar hook props for a multi-select Calendar.\n * @template TDate - The type of the date object.\n */\nexport interface UseCalendarMultiSelectProps<TDate extends DateFrameworkType>\n  extends UseCalendarSelectionMultiSelectProps<TDate>,\n    UseCalendarBaseProps<TDate> {\n  /**\n   * The selection variant, set to \"multiselect\".\n   */\n  selectionVariant: \"multiselect\";\n}\n\n/**\n * UseCalendar hook props for an offset date selection Calendar.\n * @template TDate - The type of the date object.\n */\nexport interface UseCalendarOffsetProps<TDate extends DateFrameworkType>\n  extends UseCalendarSelectionOffsetProps<TDate>,\n    UseCalendarBaseProps<TDate> {\n  /**\n   * The selection variant, set to \"offset\".\n   */\n  selectionVariant: \"offset\";\n}\n\n/**\n * UseCalendar hook props, wth the selection variant determining the return type of the date selection\n * @template TDate - The type of the date object.\n */\nexport type UseCalendarProps<TDate extends DateFrameworkType> =\n  | UseCalendarSingleProps<TDate>\n  | UseCalendarRangeProps<TDate>\n  | UseCalendarMultiSelectProps<TDate>\n  | UseCalendarOffsetProps<TDate>;\n\n/**\n * Default function to determine if a day is unselectable.\n * @returns `false` indicating the day is selectable.\n */\nconst defaultIsDayUnselectable = (): string | false => false;\n\n/**\n * Default function to determine if a day is highlighted.\n * @returns `false` indicating the day is not highlighted.\n */\nconst defaultIsDayHighlighted = (): string | false => false;\n\n/**\n * Default function to determine if a day is disabled.\n * @returns `false` indicating the day is not disabled.\n */\nconst defaultIsDayDisabled = (): false => false;\n\n/**\n * Represents the return type of the useCalendar hook.\n * @template TDate - The type of the date object.\n */\nexport interface UseCalendarReturn<TDate extends DateFrameworkType> {\n  /**\n   * The state of the calendar.\n   */\n  state: {\n    /**\n     * The currently visible month in the calendar.\n     */\n    visibleMonth: TDate;\n\n    /**\n     * The currently focused date in the calendar, or null if no date is focused.\n     */\n    focusedDate: TDate | null;\n\n    /**\n     *  Focusable dates based on current state\n     */\n    focusableDates: TDate[];\n\n    /**\n     * The minimum selectable date in the calendar.\n     */\n    minDate: TDate;\n\n    /**\n     * The maximum selectable date in the calendar.\n     */\n    maxDate: TDate;\n\n    /**\n     * The selection variant of the calendar, indicating the type of selection allowed.\n     */\n    selectionVariant: \"single\" | \"range\" | \"multiselect\" | \"offset\";\n\n    /**\n     * Whether to hide dates that are out of the selectable range.\n     */\n    hideOutOfRangeDates?: boolean;\n\n    /**\n     * Number of visible months\n     */\n    numberOfVisibleMonths: number;\n    /**\n     * Specifies the timezone behavior:\n     * - If undefined, the timezone will be derived from the passed date, or from `defaultSelectedDate`/`selectedDate`.\n     * - If set to \"default\", the default timezone of the date library will be used.\n     * - If set to \"system\", the local system's timezone will be applied.\n     * - If set to \"UTC\", the time will be returned in UTC.\n     * - If set to a valid IANA timezone identifier, the time will be returned for that specific timezone.\n     */\n    timezone?: Timezone;\n    /**\n     * Additional state properties from selectionManager.state.\n     */\n    // biome-ignore lint/suspicious/noExplicitAny: user defined\n    [key: string]: any; // Use a more specific type if possible\n  };\n\n  /**\n   * Helper functions for interacting with the calendar.\n   */\n  helpers: {\n    /**\n     * Sets the visible month in the calendar.\n     *\n     * @param event - The synthetic event or null if triggered by code.\n     * @param newVisibleMonth - The new visible month to set.\n     */\n    setVisibleMonth: (\n      event: SyntheticEvent | null,\n      newVisibleMonth: TDate,\n    ) => void;\n\n    /**\n     * Sets the focused date in the calendar.\n     *\n     * @param event - The synthetic event or null if triggered by code.\n     * @param date - The new date to focus.\n     */\n    setFocusedDate: (event: SyntheticEvent | null, date: TDate | null) => void;\n\n    /**\n     * Determines if a day is unselectable.\n     *\n     * @param date - The date to check.\n     * @returns A string reason if the day is unselectable, otherwise `false` or `undefined`.\n     */\n    isDayUnselectable: (date: TDate) => string | false | undefined;\n\n    /**\n     * Determines if a day is highlighted.\n     *\n     * @param date - The date to check.\n     * @returns A string reason if the day is highlighted, otherwise `false` or `undefined`.\n     */\n    isDayHighlighted: (date: TDate) => string | false | undefined;\n\n    /**\n     * Determines if a day is disabled.\n     *\n     * @param date - The date to check.\n     * @returns A string reason if the day is disabled, otherwise `false` or `undefined`.\n     */\n    isDayDisabled: (date: TDate) => string | false | undefined;\n\n    /**\n     * Determines if a day is visible in the calendar.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the day is visible, otherwise `false`.\n     */\n    isDayVisible: (date: TDate) => boolean;\n\n    /**\n     * Determines if a date is outside the allowed date range.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the date is outside the allowed range, otherwise `false`.\n     */\n    isOutsideAllowedDates: (date: TDate) => boolean;\n\n    /**\n     * Determines if a month is outside the allowed range.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the month is outside the allowed range, otherwise `false`.\n     */\n    isOutsideAllowedMonths: (date: TDate) => boolean;\n\n    /**\n     * Determines if a year is outside the allowed range.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the year is outside the allowed range, otherwise `false`.\n     */\n    isOutsideAllowedYears: (date: TDate) => boolean;\n\n    /**\n     * Sets the selected date in the calendar.\n     *\n     * @param event - The event triggering the change.\n     * @param newSelectedDate - The new date to select.\n     */\n    setSelectedDate: (\n      event:\n        | React.KeyboardEvent<HTMLButtonElement>\n        | React.MouseEvent<HTMLButtonElement, MouseEvent>,\n      newSelectedDate: TDate,\n    ) => void;\n\n    /**\n     * Determines if a date is selected.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the date is selected, otherwise `false`.\n     */\n    isSelected: (date: TDate) => boolean;\n\n    /**\n     * Sets the hovered date in the calendar.\n     *\n     * @param event - The event triggering the change.\n     * @param newHoveredDate - The new date to hover.\n     */\n    setHoveredDate: (\n      event: SyntheticEvent,\n      newHoveredDate: TDate | null,\n    ) => void;\n\n    /**\n     * Determines if a date is part of a selected span.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the date is part of a selected span, otherwise `false`.\n     */\n    isSelectedSpan: (date: TDate) => boolean;\n\n    /**\n     * Determines if a date is part of a hovered span.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the date is part of a hovered span, otherwise `false`.\n     */\n    isHoveredSpan: (date: TDate) => boolean;\n\n    /**\n     * Determines if a date is the start of a selected range.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the date is the start of a selected range, otherwise `false`.\n     */\n    isSelectedStart: (date: TDate) => boolean;\n\n    /**\n     * Determines if a date is the end of a selected range.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the date is the end of a selected range, otherwise `false`.\n     */\n    isSelectedEnd: (date: TDate) => boolean;\n\n    /**\n     * Determines if a date is hovered.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the date is hovered, otherwise `false`.\n     */\n    isHovered: (date: TDate) => boolean;\n\n    /**\n     * Determines if a date is part of a hovered offset.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the date is part of a hovered offset, otherwise `false`.\n     */\n    isHoveredOffset: (date: TDate) => boolean;\n\n    /**\n     * Determines if a day is selectable.\n     *\n     * @param date - The date to check.\n     * @returns `true` if the day is selectable, otherwise `false`.\n     */\n    isDaySelectable: (date: TDate) => boolean;\n  };\n}\n\nexport function useCalendar<TDate extends DateFrameworkType>(\n  props: UseCalendarProps<TDate>,\n): UseCalendarReturn<TDate> {\n  const {\n    dateAdapter,\n    defaultDates: { minDate: defaultMinDate, maxDate: defaultMaxDate },\n  } = useLocalization<TDate>();\n  const {\n    timezone,\n    defaultSelectedDate,\n    defaultVisibleMonth = dateAdapter.today(timezone),\n    hideOutOfRangeDates,\n    hoveredDate,\n    focusedDate: focusedDateProp,\n    focusedDateRef,\n    isDayDisabled = defaultIsDayDisabled,\n    isDayHighlighted = defaultIsDayHighlighted,\n    isDayUnselectable = defaultIsDayUnselectable,\n    maxDate = defaultMaxDate,\n    minDate = defaultMinDate,\n    numberOfVisibleMonths = 1,\n    onHoveredDateChange,\n    onSelectionChange,\n    onVisibleMonthChange,\n    onFocusedDateChange,\n    selectedDate,\n    selectionVariant,\n    visibleMonth: visibleMonthProp,\n    // startDateOffset,\n    // endDateOffset,\n  } = props;\n  const { matchedBreakpoints } = useBreakpoint();\n\n  const responsiveNumberOfVisibleMonths =\n    resolveResponsiveValue(numberOfVisibleMonths, matchedBreakpoints) ?? 1;\n\n  const [visibleMonth, setVisibleMonthState] = useControlled({\n    controlled: visibleMonthProp\n      ? dateAdapter.startOf(visibleMonthProp, \"month\")\n      : undefined,\n    // biome-ignore lint/correctness/useExhaustiveDependencies: just on mount\n    default: useMemo(\n      () => dateAdapter.startOf(defaultVisibleMonth, \"month\"),\n      [],\n    ),\n    name: \"Calendar\",\n    state: \"visibleMonth\",\n  });\n\n  const isOutsideAllowedDates = useCallback(\n    (date: TDate) => {\n      return (\n        dateAdapter.compare(date, minDate) < 0 ||\n        dateAdapter.compare(date, maxDate) > 0\n      );\n    },\n    [dateAdapter, maxDate, minDate],\n  );\n\n  const isOutsideAllowedMonths = useCallback(\n    (date: TDate) => {\n      const startOfMonth = dateAdapter.startOf(date, \"month\");\n      const endOfMonth = dateAdapter.endOf(date, \"month\");\n      return (\n        dateAdapter.compare(endOfMonth, minDate) < 0 ||\n        dateAdapter.compare(startOfMonth, maxDate) > 0\n      );\n    },\n    [dateAdapter, minDate, maxDate],\n  );\n\n  const isOutsideAllowedYears = useCallback(\n    (date: TDate) => {\n      const startOfYear = dateAdapter.startOf(date, \"year\");\n      const endOfYear = dateAdapter.endOf(date, \"year\");\n      return (\n        dateAdapter.compare(endOfYear, minDate) < 0 ||\n        dateAdapter.compare(startOfYear, maxDate) > 0\n      );\n    },\n    [dateAdapter, minDate, maxDate],\n  );\n\n  const isDaySelectable = useCallback(\n    (date?: TDate) =>\n      !(\n        date &&\n        (isDayUnselectable(date) ||\n          isDayDisabled(date) ||\n          isOutsideAllowedDates(date))\n      ),\n    [isDayUnselectable, isDayDisabled, isOutsideAllowedDates],\n  );\n\n  const isDayVisible = useCallback(\n    (date?: TDate | null) => {\n      if (!date) {\n        return false;\n      }\n      const startInsideDays = dateAdapter.startOf(visibleMonth, \"month\");\n\n      if (dateAdapter.compare(date, startInsideDays) < 0) return false;\n\n      const endVisibleMonth = dateAdapter.add(visibleMonth, {\n        months: responsiveNumberOfVisibleMonths - 1,\n      });\n      const endInsideDays = dateAdapter.endOf(endVisibleMonth, \"month\");\n\n      return !(dateAdapter.compare(date, endInsideDays) > 0);\n    },\n    [dateAdapter, responsiveNumberOfVisibleMonths, visibleMonth],\n  );\n\n  const selectionManager = useCalendarSelection<TDate>({\n    defaultSelectedDate,\n    selectedDate,\n    onSelectionChange,\n    startDateOffset:\n      props.selectionVariant === \"offset\" ? props.startDateOffset : undefined,\n    endDateOffset:\n      props.selectionVariant === \"offset\" ? props.endDateOffset : undefined,\n    isOutsideAllowedDates,\n    isDaySelectable,\n    isDayVisible,\n    focusedDate: focusedDateProp,\n    focusedDateRef,\n    onFocusedDateChange,\n    selectionVariant,\n    onHoveredDateChange,\n    hoveredDate,\n    timezone,\n    visibleMonth,\n  } as UseCalendarSelectionProps<TDate>);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: isDayVisible ignored (due to dependency on visibleMonth)\n  useEffect(() => {\n    const focusedDate = selectionManager?.state?.focusedDate;\n    const shouldTransition =\n      focusedDate &&\n      !focusedDateProp !== undefined &&\n      !isDayVisible(focusedDate) &&\n      isDaySelectable(focusedDate) &&\n      !isOutsideAllowedDates(focusedDate);\n\n    if (shouldTransition) {\n      setVisibleMonth(null, dateAdapter.startOf(focusedDate, \"month\"));\n    }\n  }, [\n    dateAdapter,\n    focusedDateProp,\n    isOutsideAllowedDates,\n    isDaySelectable,\n    selectionManager?.state?.focusedDate,\n  ]);\n\n  const setVisibleMonth = useCallback(\n    (event: SyntheticEvent | null, newVisibleMonth: TDate) => {\n      setVisibleMonthState(newVisibleMonth);\n      onVisibleMonthChange?.(event, newVisibleMonth);\n    },\n    [onVisibleMonthChange],\n  );\n\n  return useMemo(\n    () =>\n      ({\n        state: {\n          visibleMonth,\n          timezone,\n          minDate,\n          maxDate,\n          numberOfVisibleMonths: responsiveNumberOfVisibleMonths,\n          selectionVariant,\n          hideOutOfRangeDates,\n          ...selectionManager.state,\n        },\n        helpers: {\n          setVisibleMonth,\n          isDayUnselectable,\n          isDayHighlighted,\n          isDayDisabled,\n          isDayVisible,\n          isOutsideAllowedDates,\n          isOutsideAllowedMonths,\n          isOutsideAllowedYears,\n          ...selectionManager.helpers,\n        },\n      }) as UseCalendarReturn<TDate>,\n    [\n      visibleMonth,\n      timezone,\n      minDate,\n      maxDate,\n      selectionVariant,\n      hideOutOfRangeDates,\n      setVisibleMonth,\n      isDayUnselectable,\n      isDayHighlighted,\n      isDayDisabled,\n      isDayVisible,\n      isOutsideAllowedDates,\n      isOutsideAllowedMonths,\n      isOutsideAllowedYears,\n      responsiveNumberOfVisibleMonths,\n      selectionManager,\n    ],\n  );\n}\n"],"names":["useLocalization","useBreakpoint","resolveResponsiveValue","useControlled","useMemo","useCallback","useCalendarSelection","useEffect","_a"],"mappings":"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"}