@vuu-ui/vuu-ui-controls 0.0.26

package/esm/calendar/internal/CalendarDay.js

@@ -0,0 +1,81 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { makePrefixer, useForkRef, Tooltip } from '@salt-ds/core';
+import { CloseIcon } from '@salt-ds/icons';
+import { clsx } from 'clsx';
+import { forwardRef, useRef } from 'react';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useCalendarDay } from '../useCalendarDay.js';
+import { formatDate } from './utils.js';
+import calendarDayCss from './CalendarDay.css.js';
+
+const withBaseName = makePrefixer("saltCalendarDay");
+const CalendarDay = forwardRef(
+  function CalendarDay2(props, ref) {
+    const { className, day, renderDayContents, month, TooltipProps: TooltipProps2, ...rest } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-calendar-day",
+      css: calendarDayCss,
+      window: targetWindow
+    });
+    const dayRef = useRef(null);
+    const forkedRef = useForkRef(ref, dayRef);
+    const { status, dayProps, unselectableReason } = useCalendarDay(
+      {
+        date: day,
+        month
+      },
+      dayRef
+    );
+    const { outOfRange, today, unselectable, hidden } = status;
+    return /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        hideIcon: true,
+        status: "error",
+        content: unselectableReason,
+        disabled: !unselectableReason,
+        placement: "top",
+        enterDelay: 300,
+        ...TooltipProps2,
+        children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            "aria-label": formatDate(day),
+            ...dayProps,
+            ref: forkedRef,
+            ...rest,
+            className: clsx(
+              withBaseName(),
+              {
+                [withBaseName("hidden")]: hidden,
+                [withBaseName("outOfRange")]: outOfRange,
+                [withBaseName("today")]: today,
+                [withBaseName("unselectable")]: !!unselectable,
+                [withBaseName("unselectableLow")]: unselectable === "low",
+                [withBaseName("unselectableMedium")]: unselectable === "medium"
+              },
+              dayProps.className,
+              className
+            ),
+            children: [
+              unselectable === "medium" && /* @__PURE__ */ jsx(
+                CloseIcon,
+                {
+                  "aria-hidden": true,
+                  "aria-label": void 0,
+                  className: withBaseName("blockedIcon")
+                }
+              ),
+              renderDayContents ? renderDayContents(day, status) : formatDate(day, { day: "numeric" })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+
+export { CalendarDay };
+//# sourceMappingURL=CalendarDay.js.map

package/esm/calendar/internal/CalendarDay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarDay.js","sources":["../../../src/calendar/internal/CalendarDay.tsx"],"sourcesContent":["import { makePrefixer, Tooltip, TooltipProps, useForkRef } from \"@salt-ds/core\";\nimport { CloseIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { ComponentPropsWithRef, forwardRef, ReactElement, useRef } from \"react\";\nimport { DateValue } from \"@internationalized/date\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { DayStatus, useCalendarDay } from \"../useCalendarDay\";\nimport { formatDate } from \"./utils\";\n\nimport calendarDayCss from \"./CalendarDay.css\";\n\nexport type DateFormatter = (day: Date) => string | undefined;\n\nexport interface CalendarDayProps\n  extends Omit<ComponentPropsWithRef<\"button\">, \"children\"> {\n  day: DateValue;\n  formatDate?: DateFormatter;\n  renderDayContents?: (date: DateValue, status: DayStatus) => ReactElement;\n  status?: DayStatus;\n  month: DateValue;\n  TooltipProps?: Partial<TooltipProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarDay\");\n\nexport const CalendarDay = forwardRef<HTMLButtonElement, CalendarDayProps>(\n  function CalendarDay(props, ref) {\n    const { className, day, renderDayContents, month, TooltipProps, ...rest } =\n      props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-calendar-day\",\n      css: calendarDayCss,\n      window: targetWindow,\n    });\n\n    const dayRef = useRef<HTMLButtonElement>(null);\n    const forkedRef = useForkRef(ref, dayRef);\n\n    const { status, dayProps, unselectableReason } = useCalendarDay(\n      {\n        date: day,\n        month,\n      },\n      dayRef\n    );\n    const { outOfRange, today, unselectable, hidden } = status;\n\n    return (\n      <Tooltip\n        hideIcon\n        status=\"error\"\n        content={unselectableReason}\n        disabled={!unselectableReason}\n        placement=\"top\"\n        enterDelay={300}\n        {...TooltipProps}\n      >\n        <button\n          aria-label={formatDate(day)}\n          {...dayProps}\n          ref={forkedRef}\n          {...rest}\n          className={clsx(\n            withBaseName(),\n            {\n              [withBaseName(\"hidden\")]: hidden,\n              [withBaseName(\"outOfRange\")]: outOfRange,\n              [withBaseName(\"today\")]: today,\n              [withBaseName(\"unselectable\")]: !!unselectable,\n              [withBaseName(\"unselectableLow\")]: unselectable === \"low\",\n              [withBaseName(\"unselectableMedium\")]: unselectable === \"medium\",\n            },\n            dayProps.className,\n            className\n          )}\n        >\n          {unselectable === \"medium\" && (\n            <CloseIcon\n              aria-hidden\n              aria-label={undefined}\n              className={withBaseName(\"blockedIcon\")}\n            />\n          )}\n\n          {renderDayContents\n            ? renderDayContents(day, status)\n            : formatDate(day, { day: \"numeric\" })}\n        </button>\n      </Tooltip>\n    );\n  }\n);\n"],"names":["CalendarDay","TooltipProps"],"mappings":";;;;;;;;;;;AAwBA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA,CAAA;AAE5C,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,SAASA,YAAY,CAAA,KAAA,EAAO,GAAK,EAAA;AAC/B,IAAM,MAAA,EAAE,WAAW,GAAK,EAAA,iBAAA,EAAmB,OAAO,YAAAC,EAAAA,aAAAA,EAAc,GAAG,IAAA,EACjE,GAAA,KAAA,CAAA;AAEF,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAA,cAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,MAAA,GAAS,OAA0B,IAAI,CAAA,CAAA;AAC7C,IAAM,MAAA,SAAA,GAAY,UAAW,CAAA,GAAA,EAAK,MAAM,CAAA,CAAA;AAExC,IAAA,MAAM,EAAE,MAAA,EAAQ,QAAU,EAAA,kBAAA,EAAuB,GAAA,cAAA;AAAA,MAC/C;AAAA,QACE,IAAM,EAAA,GAAA;AAAA,QACN,KAAA;AAAA,OACF;AAAA,MACA,MAAA;AAAA,KACF,CAAA;AACA,IAAA,MAAM,EAAE,UAAA,EAAY,KAAO,EAAA,YAAA,EAAc,QAAW,GAAA,MAAA,CAAA;AAEpD,IACE,uBAAA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,QAAQ,EAAA,IAAA;AAAA,QACR,MAAO,EAAA,OAAA;AAAA,QACP,OAAS,EAAA,kBAAA;AAAA,QACT,UAAU,CAAC,kBAAA;AAAA,QACX,SAAU,EAAA,KAAA;AAAA,QACV,UAAY,EAAA,GAAA;AAAA,QACX,GAAGA,aAAAA;AAAA,QAEJ,QAAA,kBAAA,IAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,YAAA,EAAY,WAAW,GAAG,CAAA;AAAA,YACzB,GAAG,QAAA;AAAA,YACJ,GAAK,EAAA,SAAA;AAAA,YACJ,GAAG,IAAA;AAAA,YACJ,SAAW,EAAA,IAAA;AAAA,cACT,YAAa,EAAA;AAAA,cACb;AAAA,gBACE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAA;AAAA,gBAC1B,CAAC,YAAA,CAAa,YAAY,CAAC,GAAG,UAAA;AAAA,gBAC9B,CAAC,YAAA,CAAa,OAAO,CAAC,GAAG,KAAA;AAAA,gBACzB,CAAC,YAAa,CAAA,cAAc,CAAC,GAAG,CAAC,CAAC,YAAA;AAAA,gBAClC,CAAC,YAAA,CAAa,iBAAiB,CAAC,GAAG,YAAiB,KAAA,KAAA;AAAA,gBACpD,CAAC,YAAA,CAAa,oBAAoB,CAAC,GAAG,YAAiB,KAAA,QAAA;AAAA,eACzD;AAAA,cACA,QAAS,CAAA,SAAA;AAAA,cACT,SAAA;AAAA,aACF;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,YAAA,KAAiB,QAChB,oBAAA,GAAA;AAAA,gBAAC,SAAA;AAAA,gBAAA;AAAA,kBACC,aAAW,EAAA,IAAA;AAAA,kBACX,YAAY,EAAA,KAAA,CAAA;AAAA,kBACZ,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,iBAAA;AAAA,eACvC;AAAA,cAGD,iBAAA,GACG,iBAAkB,CAAA,GAAA,EAAK,MAAM,CAAA,GAC7B,WAAW,GAAK,EAAA,EAAE,GAAK,EAAA,SAAA,EAAW,CAAA;AAAA,aAAA;AAAA,WAAA;AAAA,SACxC;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF;;;;"}

package/esm/calendar/internal/CalendarMonth.css.js

@@ -0,0 +1,4 @@
+var calendarMonthCss = ".saltCalendarMonth-dateGrid {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  text-align: center;\n}\n";
+
+export { calendarMonthCss as default };
+//# sourceMappingURL=CalendarMonth.css.js.map

package/esm/calendar/internal/CalendarMonth.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarMonth.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/calendar/internal/CalendarMonth.js

@@ -0,0 +1,71 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { useCalendarContext } from './CalendarContext.js';
+import { CalendarDay } from './CalendarDay.js';
+import { generateVisibleDays, formatDate } from './utils.js';
+import calendarMonthCss from './CalendarMonth.css.js';
+
+const withBaseName = makePrefixer("saltCalendarMonth");
+const CalendarMonth = forwardRef(
+  function CalendarMonth2(props, ref) {
+    const {
+      className,
+      date,
+      hideOutOfRangeDates,
+      isVisible,
+      renderDayContents,
+      onMouseLeave,
+      TooltipProps,
+      ...rest
+    } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-calendar-month",
+      css: calendarMonthCss,
+      window: targetWindow
+    });
+    const days = generateVisibleDays(date);
+    const {
+      helpers: { setHoveredDate }
+    } = useCalendarContext();
+    const handleMouseLeave = (event) => {
+      setHoveredDate(event, null);
+      onMouseLeave?.(event);
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(withBaseName(), className),
+        ref,
+        onMouseLeave: handleMouseLeave,
+        ...rest,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-testid": "CalendarDateGrid",
+            className: withBaseName("dateGrid"),
+            children: days.map((day) => {
+              return /* @__PURE__ */ jsx(
+                CalendarDay,
+                {
+                  day: day.date,
+                  renderDayContents,
+                  month: date,
+                  TooltipProps
+                },
+                formatDate(day.date)
+              );
+            })
+          }
+        )
+      }
+    );
+  }
+);
+
+export { CalendarMonth };
+//# sourceMappingURL=CalendarMonth.js.map

package/esm/calendar/internal/CalendarMonth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarMonth.js","sources":["../../../src/calendar/internal/CalendarMonth.tsx"],"sourcesContent":["import { DateValue } from \"@internationalized/date\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  ComponentPropsWithRef,\n  forwardRef,\n  MouseEvent,\n  SyntheticEvent,\n} from \"react\";\nimport { useCalendarContext } from \"./CalendarContext\";\nimport { CalendarDay, CalendarDayProps } from \"./CalendarDay\";\nimport { formatDate, generateVisibleDays } from \"./utils\";\n\nimport calendarMonthCss from \"./CalendarMonth.css\";\n\nexport interface CalendarMonthProps extends ComponentPropsWithRef<\"div\"> {\n  date: DateValue;\n  hideOutOfRangeDates?: boolean;\n  renderDayContents?: CalendarDayProps[\"renderDayContents\"];\n  isVisible?: boolean;\n  TooltipProps?: CalendarDayProps[\"TooltipProps\"];\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarMonth\");\n\nexport const CalendarMonth = forwardRef<HTMLDivElement, CalendarMonthProps>(\n  function CalendarMonth(props, ref) {\n    const {\n      className,\n      date,\n      hideOutOfRangeDates,\n      isVisible,\n      renderDayContents,\n      onMouseLeave,\n      TooltipProps,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-calendar-month\",\n      css: calendarMonthCss,\n      window: targetWindow,\n    });\n\n    const days = generateVisibleDays(date);\n    const {\n      helpers: { setHoveredDate },\n    } = useCalendarContext();\n\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\n          data-testid=\"CalendarDateGrid\"\n          className={withBaseName(\"dateGrid\")}\n        >\n          {days.map((day) => {\n            return (\n              <CalendarDay\n                key={formatDate(day.date)}\n                day={day.date}\n                renderDayContents={renderDayContents}\n                month={date}\n                TooltipProps={TooltipProps}\n              />\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n);\n"],"names":["CalendarMonth"],"mappings":";;;;;;;;;;;AAyBA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,IAAA;AAAA,MACA,mBAAA;AAAA,MACA,SAAA;AAAA,MACA,iBAAA;AAAA,MACA,YAAA;AAAA,MACA,YAAA;AAAA,MACA,GAAG,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAA,gBAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,IAAA,GAAO,oBAAoB,IAAI,CAAA,CAAA;AACrC,IAAM,MAAA;AAAA,MACJ,OAAA,EAAS,EAAE,cAAe,EAAA;AAAA,QACxB,kBAAmB,EAAA,CAAA;AAEvB,IAAM,MAAA,gBAAA,GAAmB,CAAC,KAA0B,KAAA;AAClD,MAAA,cAAA,CAAe,OAAO,IAAI,CAAA,CAAA;AAC1B,MAAA,YAAA,GAAe,KAAmC,CAAA,CAAA;AAAA,KACpD,CAAA;AAEA,IACE,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACA,YAAc,EAAA,gBAAA;AAAA,QACb,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,aAAY,EAAA,kBAAA;AAAA,YACZ,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,YAEjC,QAAA,EAAA,IAAA,CAAK,GAAI,CAAA,CAAC,GAAQ,KAAA;AACjB,cACE,uBAAA,GAAA;AAAA,gBAAC,WAAA;AAAA,gBAAA;AAAA,kBAEC,KAAK,GAAI,CAAA,IAAA;AAAA,kBACT,iBAAA;AAAA,kBACA,KAAO,EAAA,IAAA;AAAA,kBACP,YAAA;AAAA,iBAAA;AAAA,gBAJK,UAAA,CAAW,IAAI,IAAI,CAAA;AAAA,eAK1B,CAAA;AAAA,aAEH,CAAA;AAAA,WAAA;AAAA,SACH;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF;;;;"}

package/esm/calendar/internal/CalendarNavigation.css.js

@@ -0,0 +1,4 @@
+var calendarNavigationCss = ".salt-density-medium,\n.salt-density-touch,\n.salt-density-low {\n  --calendar-navigation-gap: calc(var(--salt-size-unit) * 0.5);\n}\n\n.salt-density-high {\n  --calendar-navigation-gap: 0px;\n}\n\n.saltCalendarNavigation-hideYearDropdown {\n  --calendar-navigation-gap: calc(var(--salt-size-unit) * 2);\n}\n\n.saltCalendarNavigation {\n  display: grid;\n  grid-template-columns: min-content auto auto min-content;\n  grid-gap: var(--calendar-navigation-gap);\n  align-items: center;\n}\n\n.saltCalendarNavigation-hideYearDropdown {\n  grid-template-columns: min-content auto min-content;\n}\n";
+
+export { calendarNavigationCss as default };
+//# sourceMappingURL=CalendarNavigation.css.js.map

package/esm/calendar/internal/CalendarNavigation.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarNavigation.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/calendar/internal/CalendarNavigation.js

@@ -0,0 +1,248 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, useId, Tooltip } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import '../../dropdown/DropdownBase.js';
+import '../../dropdown/DropdownButton.js';
+import { Dropdown } from '../../dropdown/Dropdown.js';
+import '../../common-hooks/collectionProvider.js';
+import '../../common-hooks/use-resize-observer.js';
+import '@vuu-ui/vuu-utils';
+import '../../list/common-hooks/keyUtils.js';
+import '../../list/Highlighter.js';
+import { ListItem } from '../../list/ListItem.js';
+import '../../list/List.js';
+import '../../drag-drop/DragDropProvider.js';
+import '../../drag-drop/Draggable.js';
+import { useCalendarContext } from './CalendarContext.js';
+import calendarNavigationCss from './CalendarNavigation.css.js';
+import { isSameMonth, isSameYear } from '@internationalized/date';
+import { IconButton } from '../../icon-button/IconButton.js';
+import { formatDate, monthsForLocale, monthDiff } from './utils.js';
+
+const withBaseName = makePrefixer("saltCalendarNavigation");
+function useCalendarNavigation() {
+  const {
+    state: { visibleMonth, minDate, maxDate },
+    helpers: {
+      setVisibleMonth,
+      isDayVisible,
+      isOutsideAllowedYears,
+      isOutsideAllowedMonths
+    }
+  } = useCalendarContext();
+  const moveToNextMonth = (event) => {
+    setVisibleMonth(event, visibleMonth.add({ months: 1 }));
+  };
+  const moveToPreviousMonth = (event) => {
+    setVisibleMonth(event, visibleMonth.subtract({ months: 1 }));
+  };
+  const moveToMonth = (event, month) => {
+    let newMonth = month;
+    if (!isOutsideAllowedYears(newMonth)) {
+      if (isOutsideAllowedMonths(newMonth)) {
+        const navigableMonths = monthsForLocale(visibleMonth).filter(
+          (n) => !isOutsideAllowedMonths(n)
+        );
+        newMonth = navigableMonths.reduce(
+          (closestMonth, currentMonth) => Math.abs(monthDiff(currentMonth, newMonth)) < Math.abs(monthDiff(closestMonth, newMonth)) ? currentMonth : closestMonth
+        );
+      }
+      setVisibleMonth(event, newMonth);
+    }
+  };
+  const months = monthsForLocale(visibleMonth).map((month) => {
+    return { value: month, disabled: isOutsideAllowedMonths(month) };
+  });
+  const years = [-2, -1, 0, 1, 2].map((delta) => ({ value: visibleMonth.add({ years: delta }) })).filter(({ value }) => !isOutsideAllowedYears(value));
+  const selectedMonth = months.find(
+    (item) => isSameMonth(item.value, visibleMonth)
+  );
+  const selectedYear = years.find(
+    (item) => isSameYear(item.value, visibleMonth)
+  );
+  const canNavigatePrevious = !(minDate && isDayVisible(minDate));
+  const canNavigateNext = !(maxDate && isDayVisible(maxDate));
+  return {
+    moveToNextMonth,
+    moveToPreviousMonth,
+    moveToMonth,
+    visibleMonth,
+    months,
+    years,
+    canNavigateNext,
+    canNavigatePrevious,
+    selectedMonth,
+    selectedYear
+  };
+}
+const ListItemWithTooltip = ({
+  item,
+  label,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  Tooltip,
+  {
+    placement: "right",
+    disabled: !item?.disabled,
+    content: "This month is out of range",
+    children: /* @__PURE__ */ jsx(ListItem, { ...props, children: label })
+  }
+);
+const CalendarNavigation = forwardRef(function CalendarNavigation2(props, ref) {
+  const {
+    className,
+    MonthDropdownProps,
+    YearDropdownProps,
+    hideYearDropdown,
+    ...rest
+  } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-calendar-month",
+    css: calendarNavigationCss,
+    window: targetWindow
+  });
+  const {
+    moveToPreviousMonth,
+    moveToNextMonth,
+    moveToMonth,
+    months,
+    years,
+    canNavigateNext,
+    canNavigatePrevious,
+    visibleMonth,
+    selectedMonth,
+    selectedYear
+  } = useCalendarNavigation();
+  const handleNavigatePrevious = (event) => {
+    moveToPreviousMonth(event);
+  };
+  const handleNavigateNext = (event) => {
+    moveToNextMonth(event);
+  };
+  const handleMonthSelect = (event, month) => {
+    if (month && event) {
+      moveToMonth(event, month.value);
+    }
+  };
+  const handleYearSelect = (event, year) => {
+    if (year && event) {
+      moveToMonth(event, year.value);
+    }
+  };
+  const monthDropdownId = useId(MonthDropdownProps?.id) || "";
+  const monthDropdownLabelledBy = clsx(
+    MonthDropdownProps?.["aria-labelledby"],
+    // TODO need a prop on Dropdown to allow buttonId to be passed, should not make assumptions about internal
+    // id assignment like this
+    `${monthDropdownId}-control`
+  );
+  const yearDropdownId = useId(YearDropdownProps?.id) || "";
+  const yearDropdownLabelledBy = clsx(
+    YearDropdownProps?.["aria-labelledby"],
+    `${yearDropdownId}-control`
+  );
+  const defaultItemToMonth = (date) => {
+    if (hideYearDropdown) {
+      return formatDate(date.value, { month: "long" });
+    }
+    return formatDate(date.value, { month: "short" });
+  };
+  const defaultItemToYear = (date) => {
+    return formatDate(date.value, { year: "numeric" });
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        withBaseName(),
+        { [withBaseName("hideYearDropdown")]: hideYearDropdown },
+        className
+      ),
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            placement: "top",
+            disabled: canNavigatePrevious,
+            content: "Past dates are out of range",
+            children: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                "aria-label": `Previous Month, ${formatDate(
+                  visibleMonth.subtract({ months: 1 })
+                )}`,
+                disabled: !canNavigatePrevious,
+                icon: "chevron-left",
+                variant: "secondary",
+                onClick: handleNavigatePrevious,
+                className: withBaseName("previousButton"),
+                focusableWhenDisabled: true
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Dropdown,
+          {
+            source: months,
+            id: monthDropdownId,
+            "aria-labelledby": monthDropdownLabelledBy,
+            "aria-label": "Month Dropdown",
+            ...MonthDropdownProps,
+            ListItem: ListItemWithTooltip,
+            selected: selectedMonth,
+            itemToString: defaultItemToMonth,
+            onSelectionChange: handleMonthSelect,
+            fullWidth: true
+          }
+        ),
+        !hideYearDropdown && /* @__PURE__ */ jsx(
+          Dropdown,
+          {
+            source: years,
+            id: yearDropdownId,
+            "aria-labelledby": yearDropdownLabelledBy,
+            "aria-label": "Year Dropdown",
+            ...YearDropdownProps,
+            ListItem: ListItemWithTooltip,
+            selected: selectedYear,
+            onSelectionChange: handleYearSelect,
+            itemToString: defaultItemToYear,
+            fullWidth: true
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            placement: "top",
+            disabled: canNavigateNext,
+            content: "Future dates are out of range",
+            children: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                "aria-label": `Next Month, ${formatDate(
+                  visibleMonth.add({ months: 1 })
+                )}`,
+                disabled: !canNavigateNext,
+                icon: "chevron-right",
+                variant: "secondary",
+                onClick: handleNavigateNext,
+                className: withBaseName("nextButton"),
+                focusableWhenDisabled: true
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+});
+
+export { CalendarNavigation };
+//# sourceMappingURL=CalendarNavigation.js.map

package/esm/calendar/internal/CalendarNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarNavigation.js","sources":["../../../src/calendar/internal/CalendarNavigation.tsx"],"sourcesContent":["import { ButtonProps, makePrefixer, Tooltip, useId } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  ComponentPropsWithRef,\n  forwardRef,\n  MouseEventHandler,\n  SyntheticEvent,\n} from \"react\";\nimport { Dropdown, DropdownProps } from \"../../dropdown\";\nimport { ListItem, ListItemType } from \"../../list\";\nimport { useCalendarContext } from \"./CalendarContext\";\n\nimport calendarNavigationCss from \"./CalendarNavigation.css\";\n\nimport { DateValue, isSameMonth, isSameYear } from \"@internationalized/date\";\nimport { SingleSelectionHandler } from \"../../common-hooks\";\nimport { IconButton } from \"../../icon-button\";\nimport { formatDate, monthDiff, monthsForLocale } from \"./utils\";\n\ntype DropdownItem = {\n  value: DateValue;\n  disabled?: boolean;\n};\n\ntype dateDropdownProps = DropdownProps<DropdownItem>;\n\nexport interface CalendarNavigationProps extends ComponentPropsWithRef<\"div\"> {\n  MonthDropdownProps?: dateDropdownProps;\n  YearDropdownProps?: dateDropdownProps;\n  onMonthSelect?: dateDropdownProps[\"onChange\"];\n  onYearSelect?: dateDropdownProps[\"onChange\"];\n  onNavigateNext?: ButtonProps[\"onClick\"];\n  onNavigatePrevious?: ButtonProps[\"onClick\"];\n  hideYearDropdown?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarNavigation\");\n\nfunction useCalendarNavigation() {\n  const {\n    state: { visibleMonth, minDate, maxDate },\n    helpers: {\n      setVisibleMonth,\n      isDayVisible,\n      isOutsideAllowedYears,\n      isOutsideAllowedMonths,\n    },\n  } = useCalendarContext();\n\n  const moveToNextMonth = (event: SyntheticEvent) => {\n    setVisibleMonth(event, visibleMonth.add({ months: 1 }));\n  };\n\n  const moveToPreviousMonth = (event: SyntheticEvent) => {\n    setVisibleMonth(event, visibleMonth.subtract({ months: 1 }));\n  };\n\n  const moveToMonth = (event: SyntheticEvent, month: DateValue) => {\n    let newMonth = month;\n\n    if (!isOutsideAllowedYears(newMonth)) {\n      if (isOutsideAllowedMonths(newMonth)) {\n        // If month is navigable we should move to the closest navigable month\n        const navigableMonths = monthsForLocale(visibleMonth).filter(\n          (n) => !isOutsideAllowedMonths(n)\n        );\n        newMonth = navigableMonths.reduce((closestMonth, currentMonth) =>\n          Math.abs(monthDiff(currentMonth, newMonth)) <\n          Math.abs(monthDiff(closestMonth, newMonth))\n            ? currentMonth\n            : closestMonth\n        );\n      }\n      setVisibleMonth(event, newMonth);\n    }\n  };\n\n  const months = monthsForLocale(visibleMonth).map((month) => {\n    return { value: month, disabled: isOutsideAllowedMonths(month) };\n  });\n\n  const years = [-2, -1, 0, 1, 2]\n    .map((delta) => ({ value: visibleMonth.add({ years: delta }) }))\n    .filter(({ value }) => !isOutsideAllowedYears(value));\n\n  const selectedMonth = months.find((item: DropdownItem) =>\n    isSameMonth(item.value, visibleMonth)\n  );\n  const selectedYear = years.find((item: DropdownItem) =>\n    isSameYear(item.value, visibleMonth)\n  );\n\n  const canNavigatePrevious = !(minDate && isDayVisible(minDate));\n  const canNavigateNext = !(maxDate && isDayVisible(maxDate));\n\n  return {\n    moveToNextMonth,\n    moveToPreviousMonth,\n    moveToMonth,\n    visibleMonth,\n    months,\n    years,\n    canNavigateNext,\n    canNavigatePrevious,\n    selectedMonth,\n    selectedYear,\n  };\n}\n\nconst ListItemWithTooltip: ListItemType<DropdownItem> = ({\n  item,\n  label,\n  ...props\n}) => (\n  <Tooltip\n    placement=\"right\"\n    disabled={!item?.disabled}\n    content=\"This month is out of range\"\n  >\n    <ListItem {...props}>{label}</ListItem>\n  </Tooltip>\n);\n\nexport const CalendarNavigation = forwardRef<\n  HTMLDivElement,\n  CalendarNavigationProps\n>(function CalendarNavigation(props, ref) {\n  const {\n    className,\n    MonthDropdownProps,\n    YearDropdownProps,\n    hideYearDropdown,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-calendar-month\",\n    css: calendarNavigationCss,\n    window: targetWindow,\n  });\n\n  const {\n    moveToPreviousMonth,\n    moveToNextMonth,\n    moveToMonth,\n    months,\n    years,\n    canNavigateNext,\n    canNavigatePrevious,\n    visibleMonth,\n    selectedMonth,\n    selectedYear,\n  } = useCalendarNavigation();\n\n  const handleNavigatePrevious: MouseEventHandler<HTMLButtonElement> = (\n    event\n  ) => {\n    moveToPreviousMonth(event);\n  };\n\n  const handleNavigateNext: MouseEventHandler<HTMLButtonElement> = (event) => {\n    moveToNextMonth(event);\n  };\n\n  const handleMonthSelect: SingleSelectionHandler<DropdownItem> = (\n    event,\n    month\n  ) => {\n    if (month && event) {\n      moveToMonth(event, month.value);\n    }\n  };\n\n  const handleYearSelect: SingleSelectionHandler<DropdownItem> = (\n    event,\n    year\n  ) => {\n    if (year && event) {\n      moveToMonth(event, year.value);\n    }\n  };\n\n  const monthDropdownId = useId(MonthDropdownProps?.id) || \"\";\n  const monthDropdownLabelledBy = clsx(\n    MonthDropdownProps?.[\"aria-labelledby\"],\n    // TODO need a prop on Dropdown to allow buttonId to be passed, should not make assumptions about internal\n    // id assignment like this\n    `${monthDropdownId}-control`\n  );\n\n  const yearDropdownId = useId(YearDropdownProps?.id) || \"\";\n  const yearDropdownLabelledBy = clsx(\n    YearDropdownProps?.[\"aria-labelledby\"],\n    `${yearDropdownId}-control`\n  );\n\n  const defaultItemToMonth = (date: DropdownItem) => {\n    if (hideYearDropdown) {\n      return formatDate(date.value, { month: \"long\" });\n    }\n    return formatDate(date.value, { month: \"short\" });\n  };\n\n  const defaultItemToYear = (date: DropdownItem) => {\n    return formatDate(date.value, { year: \"numeric\" });\n  };\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        { [withBaseName(\"hideYearDropdown\")]: hideYearDropdown },\n        className\n      )}\n      ref={ref}\n      {...rest}\n    >\n      <Tooltip\n        placement=\"top\"\n        disabled={canNavigatePrevious}\n        content=\"Past dates are out of range\"\n      >\n        <IconButton\n          aria-label={`Previous Month, ${formatDate(\n            visibleMonth.subtract({ months: 1 })\n          )}`}\n          disabled={!canNavigatePrevious}\n          icon=\"chevron-left\"\n          variant=\"secondary\"\n          onClick={handleNavigatePrevious}\n          className={withBaseName(\"previousButton\")}\n          focusableWhenDisabled={true}\n        />\n      </Tooltip>\n      <Dropdown<DropdownItem>\n        source={months}\n        id={monthDropdownId}\n        aria-labelledby={monthDropdownLabelledBy}\n        aria-label=\"Month Dropdown\"\n        {...MonthDropdownProps}\n        ListItem={ListItemWithTooltip}\n        selected={selectedMonth}\n        itemToString={defaultItemToMonth}\n        onSelectionChange={handleMonthSelect}\n        fullWidth\n      />\n      {!hideYearDropdown && (\n        <Dropdown<DropdownItem>\n          source={years}\n          id={yearDropdownId}\n          aria-labelledby={yearDropdownLabelledBy}\n          aria-label=\"Year Dropdown\"\n          {...YearDropdownProps}\n          ListItem={ListItemWithTooltip}\n          selected={selectedYear}\n          onSelectionChange={handleYearSelect}\n          itemToString={defaultItemToYear}\n          fullWidth\n        />\n      )}\n      <Tooltip\n        placement=\"top\"\n        disabled={canNavigateNext}\n        content=\"Future dates are out of range\"\n      >\n        <IconButton\n          aria-label={`Next Month, ${formatDate(\n            visibleMonth.add({ months: 1 })\n          )}`}\n          disabled={!canNavigateNext}\n          icon=\"chevron-right\"\n          variant=\"secondary\"\n          onClick={handleNavigateNext}\n          className={withBaseName(\"nextButton\")}\n          focusableWhenDisabled={true}\n        />\n      </Tooltip>\n    </div>\n  );\n});\n"],"names":["CalendarNavigation"],"mappings":"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"}

package/esm/calendar/internal/CalendarWeekHeader.css.js

@@ -0,0 +1,4 @@
+var calendarWeekHeaderCss = ".saltCalendarWeekHeader {\n  --calendar-week-header-underline-color: var(--salt-separable-secondary-borderColor);\n  --calendar-week-header-text-color: var(--salt-content-secondary-foreground);\n  --calendar-week-header-size: var(--salt-size-base);\n  --calendar-week-header-fontSize: var(--saltCalendar-week-header-fontSize, var(--salt-text-label-fontSize));\n}\n\n.saltCalendarWeekHeader {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  text-align: center;\n  box-shadow: inset 0 -1px 0 var(--calendar-week-header-underline-color);\n}\n\n.saltCalendarWeekHeader-dayOfWeek {\n  width: var(--calendar-week-header-size);\n  height: var(--calendar-week-header-size);\n  color: var(--calendar-week-header-text-color);\n  line-height: var(--calendar-week-header-size);\n  font-size: var(--calendar-week-header-fontSize);\n}\n";
+
+export { calendarWeekHeaderCss as default };
+//# sourceMappingURL=CalendarWeekHeader.css.js.map

package/esm/calendar/internal/CalendarWeekHeader.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarWeekHeader.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/calendar/internal/CalendarWeekHeader.js

@@ -0,0 +1,41 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from 'clsx';
+import { makePrefixer } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { daysForLocale } from './utils.js';
+import calendarWeekHeaderCss from './CalendarWeekHeader.css.js';
+
+const withBaseName = makePrefixer("saltCalendarWeekHeader");
+const CalendarWeekHeader = forwardRef(function CalendarWeekHeader2({ className, ...rest }, ref) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-calendar-month",
+    css: calendarWeekHeaderCss,
+    window: targetWindow
+  });
+  const weekdaysShort = daysForLocale("narrow");
+  const weekdaysLong = daysForLocale("long");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-testid": "CalendarWeekHeader",
+      className: clsx(withBaseName(), className),
+      ref,
+      ...rest,
+      children: weekdaysShort.map((day, index) => /* @__PURE__ */ jsx(
+        "small",
+        {
+          "aria-hidden": "true",
+          className: withBaseName("dayOfWeek"),
+          children: day
+        },
+        weekdaysLong[index]
+      ))
+    }
+  );
+});
+
+export { CalendarWeekHeader };
+//# sourceMappingURL=CalendarWeekHeader.js.map

package/esm/calendar/internal/CalendarWeekHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarWeekHeader.js","sources":["../../../src/calendar/internal/CalendarWeekHeader.tsx"],"sourcesContent":["import { ComponentPropsWithRef, forwardRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport { daysForLocale } from \"./utils\";\n\nimport calendarWeekHeaderCss from \"./CalendarWeekHeader.css\";\n\nexport type CalendarWeekHeaderProps = ComponentPropsWithRef<\"div\">;\n\nconst withBaseName = makePrefixer(\"saltCalendarWeekHeader\");\n\nexport const CalendarWeekHeader = forwardRef<\n  HTMLDivElement,\n  CalendarWeekHeaderProps\n>(function CalendarWeekHeader({ className, ...rest }, ref) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-calendar-month\",\n    css: calendarWeekHeaderCss,\n    window: targetWindow,\n  });\n\n  const weekdaysShort = daysForLocale(\"narrow\");\n  const weekdaysLong = daysForLocale(\"long\");\n\n  return (\n    <div\n      data-testid=\"CalendarWeekHeader\"\n      className={clsx(withBaseName(), className)}\n      ref={ref}\n      {...rest}\n    >\n      {weekdaysShort.map((day, index) => (\n        <small\n          aria-hidden=\"true\"\n          key={weekdaysLong[index]}\n          className={withBaseName(\"dayOfWeek\")}\n        >\n          {day}\n        </small>\n      ))}\n    </div>\n  );\n});\n"],"names":["CalendarWeekHeader"],"mappings":";;;;;;;;;AAYA,MAAM,YAAA,GAAe,aAAa,wBAAwB,CAAA,CAAA;AAE7C,MAAA,kBAAA,GAAqB,WAGhC,SAASA,mBAAAA,CAAmB,EAAE,SAAW,EAAA,GAAG,IAAK,EAAA,EAAG,GAAK,EAAA;AACzD,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAA,qBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,aAAA,GAAgB,cAAc,QAAQ,CAAA,CAAA;AAC5C,EAAM,MAAA,YAAA,GAAe,cAAc,MAAM,CAAA,CAAA;AAEzC,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAY,EAAA,oBAAA;AAAA,MACZ,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAc,EAAA,aAAA,CAAA,GAAA,CAAI,CAAC,GAAA,EAAK,KACvB,qBAAA,GAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,aAAY,EAAA,MAAA;AAAA,UAEZ,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,UAElC,QAAA,EAAA,GAAA;AAAA,SAAA;AAAA,QAHI,aAAa,KAAK,CAAA;AAAA,OAK1B,CAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ,CAAC;;;;"}

package/esm/calendar/internal/useFocusManagement.js

@@ -0,0 +1,61 @@
+import { useCalendarContext } from './CalendarContext.js';
+import { endOfWeek, startOfWeek } from '@internationalized/date';
+import { getCurrentLocale } from './utils.js';
+
+function useFocusManagement({ date }) {
+  const {
+    helpers: { setFocusedDate }
+  } = useCalendarContext();
+  const handleClick = (event) => {
+    setFocusedDate(event, date);
+  };
+  const handleKeyDown = (event) => {
+    let newDate = date;
+    switch (event.key) {
+      case "ArrowUp":
+        newDate = date.subtract({ weeks: 1 });
+        break;
+      case "ArrowDown":
+        newDate = date.add({ weeks: 1 });
+        break;
+      case "ArrowLeft":
+        newDate = date.subtract({ days: 1 });
+        break;
+      case "ArrowRight":
+        newDate = date.add({ days: 1 });
+        break;
+      case "Home":
+        newDate = startOfWeek(date, getCurrentLocale());
+        break;
+      case "End":
+        newDate = endOfWeek(date, getCurrentLocale());
+        break;
+      case "PageUp":
+        if (event.shiftKey) {
+          newDate = date.subtract({ years: 1 });
+        } else {
+          newDate = date.subtract({ months: 1 });
+        }
+        break;
+      case "PageDown":
+        if (event.shiftKey) {
+          newDate = date.add({ years: 1 });
+        } else {
+          newDate = date.add({ months: 1 });
+        }
+        break;
+    }
+    setFocusedDate(event, newDate);
+  };
+  const handleFocus = (event) => {
+    setFocusedDate(event, date);
+  };
+  return {
+    handleClick,
+    handleKeyDown,
+    handleFocus
+  };
+}
+
+export { useFocusManagement };
+//# sourceMappingURL=useFocusManagement.js.map

package/esm/calendar/internal/useFocusManagement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusManagement.js","sources":["../../../src/calendar/internal/useFocusManagement.ts"],"sourcesContent":["import {\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n} from \"react\";\nimport { useCalendarContext } from \"./CalendarContext\";\nimport { DateValue, endOfWeek, startOfWeek } from \"@internationalized/date\";\nimport { getCurrentLocale } from \"./utils\";\n\nexport function useFocusManagement({ date }: { date: DateValue }) {\n  const {\n    helpers: { setFocusedDate },\n  } = useCalendarContext();\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 = date.subtract({ weeks: 1 });\n        break;\n      case \"ArrowDown\":\n        newDate = date.add({ weeks: 1 });\n        break;\n      case \"ArrowLeft\":\n        newDate = date.subtract({ days: 1 });\n        break;\n      case \"ArrowRight\":\n        newDate = date.add({ days: 1 });\n        break;\n      case \"Home\":\n        newDate = startOfWeek(date, getCurrentLocale());\n        break;\n      case \"End\":\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore TODO bug in @internationalized/date\n        newDate = endOfWeek(date, getCurrentLocale());\n        break;\n      case \"PageUp\":\n        if (event.shiftKey) {\n          newDate = date.subtract({ years: 1 });\n        } else {\n          newDate = date.subtract({ months: 1 });\n        }\n        break;\n      case \"PageDown\":\n        if (event.shiftKey) {\n          newDate = date.add({ years: 1 });\n        } else {\n          newDate = date.add({ months: 1 });\n        }\n        break;\n      default:\n    }\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":[],"mappings":";;;;AASgB,SAAA,kBAAA,CAAmB,EAAE,IAAA,EAA6B,EAAA;AAChE,EAAM,MAAA;AAAA,IACJ,OAAA,EAAS,EAAE,cAAe,EAAA;AAAA,MACxB,kBAAmB,EAAA,CAAA;AACvB,EAAM,MAAA,WAAA,GAAoD,CAAC,KAAU,KAAA;AACnE,IAAA,cAAA,CAAe,OAAO,IAAI,CAAA,CAAA;AAAA,GAC5B,CAAA;AAEA,EAAM,MAAA,aAAA,GAAyD,CAAC,KAAU,KAAA;AACxE,IAAA,IAAI,OAAU,GAAA,IAAA,CAAA;AACd,IAAA,QAAQ,MAAM,GAAK;AAAA,MACjB,KAAK,SAAA;AACH,QAAA,OAAA,GAAU,IAAK,CAAA,QAAA,CAAS,EAAE,KAAA,EAAO,GAAG,CAAA,CAAA;AACpC,QAAA,MAAA;AAAA,MACF,KAAK,WAAA;AACH,QAAA,OAAA,GAAU,IAAK,CAAA,GAAA,CAAI,EAAE,KAAA,EAAO,GAAG,CAAA,CAAA;AAC/B,QAAA,MAAA;AAAA,MACF,KAAK,WAAA;AACH,QAAA,OAAA,GAAU,IAAK,CAAA,QAAA,CAAS,EAAE,IAAA,EAAM,GAAG,CAAA,CAAA;AACnC,QAAA,MAAA;AAAA,MACF,KAAK,YAAA;AACH,QAAA,OAAA,GAAU,IAAK,CAAA,GAAA,CAAI,EAAE,IAAA,EAAM,GAAG,CAAA,CAAA;AAC9B,QAAA,MAAA;AAAA,MACF,KAAK,MAAA;AACH,QAAU,OAAA,GAAA,WAAA,CAAY,IAAM,EAAA,gBAAA,EAAkB,CAAA,CAAA;AAC9C,QAAA,MAAA;AAAA,MACF,KAAK,KAAA;AAGH,QAAU,OAAA,GAAA,SAAA,CAAU,IAAM,EAAA,gBAAA,EAAkB,CAAA,CAAA;AAC5C,QAAA,MAAA;AAAA,MACF,KAAK,QAAA;AACH,QAAA,IAAI,MAAM,QAAU,EAAA;AAClB,UAAA,OAAA,GAAU,IAAK,CAAA,QAAA,CAAS,EAAE,KAAA,EAAO,GAAG,CAAA,CAAA;AAAA,SAC/B,MAAA;AACL,UAAA,OAAA,GAAU,IAAK,CAAA,QAAA,CAAS,EAAE,MAAA,EAAQ,GAAG,CAAA,CAAA;AAAA,SACvC;AACA,QAAA,MAAA;AAAA,MACF,KAAK,UAAA;AACH,QAAA,IAAI,MAAM,QAAU,EAAA;AAClB,UAAA,OAAA,GAAU,IAAK,CAAA,GAAA,CAAI,EAAE,KAAA,EAAO,GAAG,CAAA,CAAA;AAAA,SAC1B,MAAA;AACL,UAAA,OAAA,GAAU,IAAK,CAAA,GAAA,CAAI,EAAE,MAAA,EAAQ,GAAG,CAAA,CAAA;AAAA,SAClC;AACA,QAAA,MAAA;AACF,KACF;AAEA,IAAA,cAAA,CAAe,OAAO,OAAO,CAAA,CAAA;AAAA,GAC/B,CAAA;AAEA,EAAM,MAAA,WAAA,GAAoD,CAAC,KAAU,KAAA;AACnE,IAAA,cAAA,CAAe,OAAO,IAAI,CAAA,CAAA;AAAA,GAC5B,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,WAAA;AAAA,IACA,aAAA;AAAA,IACA,WAAA;AAAA,GACF,CAAA;AACF;;;;"}