@salt-ds/lab 1.0.0-alpha.32 → 1.0.0-alpha.34

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

@@ -1 +1 @@
-{"version":3,"file":"CalendarContext.js","sources":["../src/calendar/internal/CalendarContext.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport { useCalendar } from \"../useCalendar\";\n\ntype CalendarState = {\n  state: ReturnType<typeof useCalendar>[\"state\"];\n  helpers: ReturnType<typeof useCalendar>[\"helpers\"];\n};\n\nconst CalendarContext = createContext<CalendarState | null>(null);\n\nif (process.env.NODE_ENV !== \"production\") {\n  CalendarContext.displayName = \"CalendarContext\";\n}\n\nfunction useCalendarContext(): CalendarState {\n  const context = useContext(CalendarContext);\n\n  if (!context) {\n    throw new Error(\"Unexpected usage\");\n  }\n\n  return context;\n}\n\nexport { CalendarContext, useCalendarContext };\n"],"names":["createContext","useContext"],"mappings":";;;;;;AAQM,MAAA,eAAA,GAAkBA,oBAAoC,IAAI,EAAA;AAEhE,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,eAAA,CAAgB,WAAc,GAAA,iBAAA,CAAA;AAChC,CAAA;AAEA,SAAS,kBAAoC,GAAA;AAC3C,EAAM,MAAA,OAAA,GAAUC,iBAAW,eAAe,CAAA,CAAA;AAE1C,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAM,MAAA,IAAI,MAAM,kBAAkB,CAAA,CAAA;AAAA,GACpC;AAEA,EAAO,OAAA,OAAA,CAAA;AACT;;;;;"}
+{"version":3,"file":"CalendarContext.js","sources":["../src/calendar/internal/CalendarContext.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport { useCalendar } from \"../useCalendar\";\n\ninterface CalendarState {\n  state: ReturnType<typeof useCalendar>[\"state\"];\n  helpers: ReturnType<typeof useCalendar>[\"helpers\"];\n}\n\nconst CalendarContext = createContext<CalendarState | null>(null);\n\nif (process.env.NODE_ENV !== \"production\") {\n  CalendarContext.displayName = \"CalendarContext\";\n}\n\nfunction useCalendarContext(): CalendarState {\n  const context = useContext(CalendarContext);\n\n  if (!context) {\n    throw new Error(\"Unexpected usage\");\n  }\n\n  return context;\n}\n\nexport { CalendarContext, useCalendarContext };\n"],"names":["createContext","useContext"],"mappings":";;;;;;AAQM,MAAA,eAAA,GAAkBA,oBAAoC,IAAI,EAAA;AAEhE,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,eAAA,CAAgB,WAAc,GAAA,iBAAA,CAAA;AAChC,CAAA;AAEA,SAAS,kBAAoC,GAAA;AAC3C,EAAM,MAAA,OAAA,GAAUC,iBAAW,eAAe,CAAA,CAAA;AAE1C,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAM,MAAA,IAAI,MAAM,kBAAkB,CAAA,CAAA;AAAA,GACpC;AAEA,EAAO,OAAA,OAAA,CAAA;AACT;;;;;"}

package/dist-cjs/calendar/internal/CalendarDay.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* TODO: Design need to align characteristics for CalendarDay */\n.saltCalendarDay {\n  --calendar-day-text-color: var(--salt-content-primary-foreground);\n  --calendar-day-background: var(--salt-selectable-background);\n  --calendar-day-background-hover: var(--salt-selectable-background-hover);\n  --calendar-day-text-color-hover: var(--salt-content-primary-foreground);\n  --calendar-day-outOfRange-text-color: var(--salt-content-secondary-foreground-disabled);\n  --calendar-day-blocked-text-color: var(--salt-content-primary-foreground);\n  --calendar-day-blocked-cursor: var(--salt-selectable-cursor-disabled);\n  --calendar-day-blocked-icon-color: var(--salt-status-error-foreground);\n  --calendar-day-blocked-background: var(--calendar-day-background);\n  --calendar-day-unselectable-text-color: var(--salt-content-secondary-foreground-disabled);\n  --calendar-day-unselectable-background: var(--calendar-day-background);\n  --calendar-day-unselectable-cursor: var(--salt-selectable-cursor-disabled);\n\n  --calendar-day-selected-background: var(--salt-selectable-background-selected);\n  --calendar-day-selected-text-color: var(--salt-content-primary-foreground);\n  /* --calendar-day-selected-focused-outlineColor: var(--salt-color-white); TODO: Check with design */\n\n  --calendar-day-selectedStart-background: var(--salt-selectable-background-selected);\n  --calendar-day-selectedStart-text-color: var(--salt-content-primary-foreground);\n  /* --calendar-day-selectedStart-focused-outlineColor: var(--salt-color-white);  TODO: Check with design */\n\n  --calendar-day-selectedEnd-background: var(--salt-selectable-background-selected);\n  --calendar-day-selectedEnd-text-color: var(--salt-content-primary-foreground);\n  /* --calendar-day-selectedEnd-focused-outlineColor: var(--salt-color-white);  TODO: Check with design */\n\n  --calendar-day-selectedSpan-background: var(--salt-selectable-background-blurSelected);\n  --calendar-day-selectedSpan-text-color: var(--salt-content-primary-foreground);\n\n  --calendar-day-hoveredSpan-background: var(--salt-selectable-background-hover);\n  --calendar-day-hoveredSpan-text-color: var(--salt-content-primary-foreground);\n\n  --calendar-day-hoveredOffset-background: var(--salt-selectable-background-hover);\n  --calendar-day-hoveredOffset-text-color: var(--salt-content-primary-foreground);\n\n  --calendar-day-currentDay-borderColor: var(--salt-content-primary-foreground); /* TODO should not be foreground color */\n\n  /* Focus */\n  --calendar-day-focused-outline: var(--salt-focused-outline);\n  --calendar-day-size: var(--salt-size-base);\n  --calendar-day-fontSize: var(--salt-text-fontSize);\n}\n\n.saltCalendarDay {\n  width: var(--calendar-day-size);\n  height: var(--calendar-day-size);\n  color: var(--calendar-day-text-color);\n  background-color: var(--calendar-day-background);\n  font-size: var(--calendar-day-fontSize);\n  border: 0;\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.saltCalendarDay:focus-visible {\n  outline: var(--calendar-day-focused-outline);\n  outline-offset: calc(0px - var(--salt-focused-outlineWidth));\n}\n\n.saltCalendarDay-outOfRange {\n  color: var(--calendar-day-outOfRange-text-color);\n}\n\n.saltCalendarDay:hover {\n  background: var(--calendar-day-background-hover);\n  color: var(--calendar-day-text-color-hover);\n}\n\n.saltCalendarDay-unselectableMedium,\n.saltCalendarDay-unselectableMedium:hover {\n  color: var(--calendar-day-blocked-text-color);\n  cursor: var(--calendar-day-blocked-cursor);\n  background: var(--calendar-day-blocked-background);\n}\n\n.saltCalendarDay-today {\n  border: 1px solid var(--calendar-day-currentDay-borderColor);\n}\n\n.saltCalendarDay-selectedSpan {\n  background: var(--calendar-day-selectedSpan-background);\n  color: var(--calendar-day-selectedSpan-text-color);\n}\n\n.saltCalendarDay-hoveredSpan,\n.saltCalendarDay-hoveredSpan:hover {\n  background: var(--calendar-day-hoveredSpan-background);\n  color: var(--calendar-day-hoveredSpan-text-color);\n}\n\n.saltCalendarDay-hoveredOffset,\n.saltCalendarDay-hoveredOffset:hover {\n  background: var(--calendar-day-hoveredOffset-background);\n  color: var(--calendar-day-hoveredOffset-text-color);\n}\n\n.saltCalendarDay-selected,\n.saltCalendarDay-selected:hover {\n  background: var(--calendar-day-selected-background);\n  color: var(--calendar-day-selected-text-color);\n}\n\n.saltCalendarDay-selectedStart,\n.saltCalendarDay-selectedStart:hover {\n  background: var(--calendar-day-selectedStart-background);\n  color: var(--calendar-day-selectedStart-text-color);\n}\n\n.saltCalendarDay-selectedEnd,\n.saltCalendarDay-selectedEnd:hover {\n  background: var(--calendar-day-selectedEnd-background);\n  color: var(--calendar-day-selectedEnd-text-color);\n}\n\n.saltCalendarDay-selected:focus-visible {\n  outline-color: var(--calendar-day-selected-focused-outlineColor);\n}\n\n.saltCalendarDay-selectedStart:focus-visible {\n  outline-color: var(--calendar-day-selectedStart-focused-outlineColor);\n}\n\n.saltCalendarDay-selectedEnd:focus-visible {\n  outline-color: var(--calendar-day-selectedEnd-focused-outlineColor);\n}\n\n.saltCalendarDay-unselectableLow,\n.saltCalendarDay-unselectableLow:hover {\n  color: var(--calendar-day-unselectable-text-color);\n  background: var(--calendar-day-unselectable-background);\n  cursor: var(--calendar-day-unselectable-cursor);\n  text-decoration: line-through;\n}\n\n.salt-density-high {\n  --calendar-day-blocked-icon-size: 14px;\n}\n\n.salt-density-medium {\n  --calendar-day-blocked-icon-size: 18px;\n}\n\n.salt-density-low {\n  --calendar-day-blocked-icon-size: 24px;\n}\n\n.salt-density-touch {\n  --calendar-day-blocked-icon-size: 28px;\n}\n\n.saltCalendarDay-blockedIcon {\n  fill: var(--calendar-day-blocked-icon-color);\n  position: absolute;\n  --icon-size: var(--calendar-day-blocked-icon-size);\n  pointer-events: none;\n  line-height: 1.29;\n}\n\n.saltCalendarDay-hidden {\n  visibility: hidden;\n}\n";
+var css_248z = ".saltCalendarDay {\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n  width: var(--salt-size-base);\n  height: var(--salt-size-base);\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  cursor: pointer;\n  border: none;\n  padding: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  overflow: hidden;\n}\n.saltCalendarDay-content {\n  margin: 0 var(--salt-spacing-50);\n  width: 100%;\n}\n\n.saltCalendarDay:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(0px - var(--salt-focused-outlineWidth));\n}\n\n.saltCalendarDay-outOfRange {\n  color: var(--salt-content-secondary-foreground);\n}\n\n.saltCalendarDay:hover,\n.saltCalendarDay-hoveredOffset,\n.saltCalendarDay-hoveredOffset:hover {\n  background: var(--salt-selectable-background-hover);\n}\n.saltCalendarDay-selectedStart {\n  z-index: var(--salt-zIndex-default);\n}\n\n.saltCalendarDay-selected,\n.saltCalendarDay-selected:hover,\n.saltCalendarDay-selectedStart,\n.saltCalendarDay-selectedStart:hover,\n.saltCalendarDay-selectedEnd,\n.saltCalendarDay-selectedEnd:hover {\n  background: var(--salt-selectable-background-selected);\n  box-shadow: 0 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected);\n}\n\n.saltCalendarDay-hoveredSpan,\n.saltCalendarDay-hoveredSpan:hover,\n.saltCalendarDay-selectedSpan,\n.saltCalendarDay-selectedSpan:hover {\n  background: var(--salt-selectable-background-hover);\n  box-shadow: calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover),\n    calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected), 0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltCalendarDay-disabled,\n.saltCalendarDay-disabled:hover,\n.saltCalendarDay-unselectable,\n.saltCalendarDay-unselectable:hover {\n  background: var(--salt-selectable-background-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltCalendarDay-highlighted:before {\n  content: \"\";\n  height: var(--salt-spacing-200); /* TODO: change for size-modifier when available */\n  width: var(--salt-spacing-200);\n  top: calc(var(--salt-spacing-100) * -1);\n  right: calc(var(--salt-spacing-100) * -1);\n  transform: rotate(45deg);\n  background: var(--salt-selectable-borderColor-selected);\n  position: absolute;\n}\n\n.saltCalendarDay-disabled {\n  color: var(--salt-content-secondary-foreground-disabled);\n}\n.saltCalendarDay-unselectable:after {\n  content: \"\";\n  height: var(--salt-size-border);\n  width: calc(100% - var(--salt-spacing-100));\n  background: var(--salt-content-secondary-foreground);\n  position: absolute;\n}\n\n.saltCalendarDay-today,\n.saltCalendarDay-today:hover {\n  border-bottom: var(--salt-size-indicator) var(--salt-selectable-borderStyle) var(--salt-content-foreground-active);\n  margin-bottom: calc(var(--salt-size-indicator) * -1);\n}\n\n.saltCalendarDay-hidden {\n  visibility: hidden;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=CalendarDay.css.js.map

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

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
-var icons = require('@salt-ds/icons');
 var clsx = require('clsx');
 var React = require('react');
 var useCalendarDay = require('../useCalendarDay.js');
@@ -24,48 +23,48 @@ const CalendarDay = React.forwardRef(
       window: targetWindow
     });
     const dayRef = React.useRef(null);
-    const { status, dayProps, unselectableReason } = useCalendarDay.useCalendarDay(
+    const buttonRef = core.useForkRef(ref, dayRef);
+    const { status, dayProps, unselectableReason, highlightedReason } = useCalendarDay.useCalendarDay(
       {
         date: day,
         month
       },
       dayRef
     );
-    const { outOfRange, today, unselectable, hidden } = status;
+    const { outOfRange, today, unselectable, highlighted, hidden, disabled } = status;
     return /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, {
       hideIcon: true,
-      status: "error",
-      content: unselectableReason,
-      disabled: !unselectableReason,
+      status: unselectableReason ? "error" : "info",
+      content: unselectableReason || highlightedReason || "Date is out of range",
+      disabled: !unselectableReason && !highlightedReason,
       placement: "top",
-      enterDelay: 300,
+      enterDelay: 0,
+      leaveDelay: 0,
       ...TooltipProps2,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("button", {
+      children: /* @__PURE__ */ jsxRuntime.jsx("button", {
         "aria-label": utils.formatDate(day),
+        disabled,
         ...dayProps,
-        ref: dayRef,
+        ref: buttonRef,
         ...rest,
         className: clsx.clsx(
           withBaseName(),
           {
             [withBaseName("hidden")]: hidden,
             [withBaseName("outOfRange")]: outOfRange,
-            [withBaseName("today")]: today,
+            [withBaseName("disabled")]: disabled,
             [withBaseName("unselectable")]: !!unselectable,
-            [withBaseName("unselectableLow")]: unselectable === "low",
-            [withBaseName("unselectableMedium")]: unselectable === "medium"
+            [withBaseName("highlighted")]: !!highlighted
           },
           dayProps.className,
           className
         ),
-        children: [
-          unselectable === "medium" && /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, {
-            "aria-hidden": true,
-            "aria-label": void 0,
-            className: withBaseName("blockedIcon")
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", {
+          className: clsx.clsx(withBaseName("content"), {
+            [withBaseName("today")]: today
           }),
-          renderDayContents ? renderDayContents(day, status) : utils.formatDate(day, { day: "numeric" })
-        ]
+          children: renderDayContents ? renderDayContents(day, status) : utils.formatDate(day, { day: "numeric" })
+        })
       })
     });
   }

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

@@ -1 +1 @@
-{"version":3,"file":"CalendarDay.js","sources":["../src/calendar/internal/CalendarDay.tsx"],"sourcesContent":["import { makePrefixer, Tooltip, TooltipProps } 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\";\n\nimport { DayStatus, useCalendarDay } from \"../useCalendarDay\";\nimport calendarDayCss from \"./CalendarDay.css\";\nimport { formatDate } from \"./utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\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    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 { 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={dayRef}\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":["makePrefixer","forwardRef","CalendarDay","TooltipProps","useWindow","useComponentCssInjection","calendarDayCss","useRef","useCalendarDay","jsx","Tooltip","jsxs","formatDate","clsx","CloseIcon"],"mappings":";;;;;;;;;;;;;;;AAwBA,MAAM,YAAA,GAAeA,kBAAa,iBAAiB,CAAA,CAAA;AAE5C,MAAM,WAAc,GAAAC,gBAAA;AAAA,EACzB,SAASC,YAAY,CAAA,KAAA,EAAO,GAAK,EAAA;AAC/B,IAAM,MAAA,EAAE,WAAW,GAAK,EAAA,iBAAA,EAAmB,OAAO,YAAAC,EAAAA,aAAAA,EAAAA,GAAiB,MACjE,GAAA,KAAA,CAAA;AACF,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,MAAA,GAASC,aAA0B,IAAI,CAAA,CAAA;AAC7C,IAAA,MAAM,EAAE,MAAA,EAAQ,QAAU,EAAA,kBAAA,EAAuB,GAAAC,6BAAA;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,IAAA,uBACGC,cAAA,CAAAC,YAAA,EAAA;AAAA,MACC,QAAQ,EAAA,IAAA;AAAA,MACR,MAAO,EAAA,OAAA;AAAA,MACP,OAAS,EAAA,kBAAA;AAAA,MACT,UAAU,CAAC,kBAAA;AAAA,MACX,SAAU,EAAA,KAAA;AAAA,MACV,UAAY,EAAA,GAAA;AAAA,MACX,GAAGP,aAAAA;AAAA,MAEJ,QAAC,kBAAAQ,eAAA,CAAA,QAAA,EAAA;AAAA,QACC,YAAA,EAAYC,iBAAW,GAAG,CAAA;AAAA,QACzB,GAAG,QAAA;AAAA,QACJ,GAAK,EAAA,MAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QACJ,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,YAC1B,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,UAAA;AAAA,YAC9B,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,KAAA;AAAA,YACzB,CAAC,YAAA,CAAa,cAAc,CAAA,GAAI,CAAC,CAAC,YAAA;AAAA,YAClC,CAAC,YAAA,CAAa,iBAAiB,CAAA,GAAI,YAAiB,KAAA,KAAA;AAAA,YACpD,CAAC,YAAA,CAAa,oBAAoB,CAAA,GAAI,YAAiB,KAAA,QAAA;AAAA,WACzD;AAAA,UACA,QAAS,CAAA,SAAA;AAAA,UACT,SAAA;AAAA,SACF;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,YAAA,KAAiB,4BACfJ,cAAA,CAAAK,eAAA,EAAA;AAAA,YACC,aAAW,EAAA,IAAA;AAAA,YACX,YAAY,EAAA,KAAA,CAAA;AAAA,YACZ,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,WACvC,CAAA;AAAA,UAGD,iBAAA,GACG,iBAAkB,CAAA,GAAA,EAAK,MAAM,CAAA,GAC7BF,iBAAW,GAAK,EAAA,EAAE,GAAK,EAAA,SAAA,EAAW,CAAA;AAAA,SAAA;AAAA,OACxC,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"CalendarDay.js","sources":["../src/calendar/internal/CalendarDay.tsx"],"sourcesContent":["import { makePrefixer, Tooltip, TooltipProps, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { ComponentPropsWithRef, forwardRef, ReactElement, useRef } from \"react\";\nimport { DateValue } from \"@internationalized/date\";\nimport { DayStatus, useCalendarDay } from \"../useCalendarDay\";\nimport calendarDayCss from \"./CalendarDay.css\";\nimport { formatDate } from \"./utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\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    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 buttonRef = useForkRef(ref, dayRef);\n    const { status, dayProps, unselectableReason, highlightedReason } =\n      useCalendarDay(\n        {\n          date: day,\n          month,\n        },\n        dayRef\n      );\n    const { outOfRange, today, unselectable, highlighted, hidden, disabled } =\n      status;\n\n    return (\n      <Tooltip\n        hideIcon\n        status={unselectableReason ? \"error\" : \"info\"}\n        content={\n          unselectableReason || highlightedReason || \"Date is out of range\"\n        }\n        disabled={!unselectableReason && !highlightedReason}\n        placement=\"top\"\n        enterDelay={0} // --salt-duration-instant\n        leaveDelay={0} // --salt-duration-instant\n        {...TooltipProps}\n      >\n        <button\n          aria-label={formatDate(day)}\n          disabled={disabled}\n          {...dayProps}\n          ref={buttonRef}\n          {...rest}\n          className={clsx(\n            withBaseName(),\n            {\n              [withBaseName(\"hidden\")]: hidden,\n              [withBaseName(\"outOfRange\")]: outOfRange,\n              [withBaseName(\"disabled\")]: disabled,\n              [withBaseName(\"unselectable\")]: !!unselectable,\n              [withBaseName(\"highlighted\")]: !!highlighted,\n            },\n            dayProps.className,\n            className\n          )}\n        >\n          <span\n            className={clsx(withBaseName(\"content\"), {\n              [withBaseName(\"today\")]: today,\n            })}\n          >\n            {renderDayContents\n              ? renderDayContents(day, status)\n              : formatDate(day, { day: \"numeric\" })}\n          </span>\n        </button>\n      </Tooltip>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","CalendarDay","TooltipProps","useWindow","useComponentCssInjection","calendarDayCss","useRef","useForkRef","useCalendarDay","jsx","Tooltip","formatDate","clsx"],"mappings":";;;;;;;;;;;;;;AAsBA,MAAM,YAAA,GAAeA,kBAAa,iBAAiB,CAAA,CAAA;AAE5C,MAAM,WAAc,GAAAC,gBAAA;AAAA,EACzB,SAASC,YAAY,CAAA,KAAA,EAAO,GAAK,EAAA;AAC/B,IAAM,MAAA,EAAE,WAAW,GAAK,EAAA,iBAAA,EAAmB,OAAO,YAAAC,EAAAA,aAAAA,EAAAA,GAAiB,MACjE,GAAA,KAAA,CAAA;AACF,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,MAAA,GAASC,aAA0B,IAAI,CAAA,CAAA;AAC7C,IAAM,MAAA,SAAA,GAAYC,eAAW,CAAA,GAAA,EAAK,MAAM,CAAA,CAAA;AACxC,IAAA,MAAM,EAAE,MAAA,EAAQ,QAAU,EAAA,kBAAA,EAAoB,mBAC5C,GAAAC,6BAAA;AAAA,MACE;AAAA,QACE,IAAM,EAAA,GAAA;AAAA,QACN,KAAA;AAAA,OACF;AAAA,MACA,MAAA;AAAA,KACF,CAAA;AACF,IAAA,MAAM,EAAE,UAAY,EAAA,KAAA,EAAO,cAAc,WAAa,EAAA,MAAA,EAAQ,UAC5D,GAAA,MAAA,CAAA;AAEF,IAAA,uBACGC,cAAA,CAAAC,YAAA,EAAA;AAAA,MACC,QAAQ,EAAA,IAAA;AAAA,MACR,MAAA,EAAQ,qBAAqB,OAAU,GAAA,MAAA;AAAA,MACvC,OAAA,EACE,sBAAsB,iBAAqB,IAAA,sBAAA;AAAA,MAE7C,QAAA,EAAU,CAAC,kBAAA,IAAsB,CAAC,iBAAA;AAAA,MAClC,SAAU,EAAA,KAAA;AAAA,MACV,UAAY,EAAA,CAAA;AAAA,MACZ,UAAY,EAAA,CAAA;AAAA,MACX,GAAGR,aAAAA;AAAA,MAEJ,QAAC,kBAAAO,cAAA,CAAA,QAAA,EAAA;AAAA,QACC,YAAA,EAAYE,iBAAW,GAAG,CAAA;AAAA,QAC1B,QAAA;AAAA,QACC,GAAG,QAAA;AAAA,QACJ,GAAK,EAAA,SAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QACJ,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,YAC1B,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,UAAA;AAAA,YAC9B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,YAC5B,CAAC,YAAA,CAAa,cAAc,CAAA,GAAI,CAAC,CAAC,YAAA;AAAA,YAClC,CAAC,YAAA,CAAa,aAAa,CAAA,GAAI,CAAC,CAAC,WAAA;AAAA,WACnC;AAAA,UACA,QAAS,CAAA,SAAA;AAAA,UACT,SAAA;AAAA,SACF;AAAA,QAEA,QAAC,kBAAAH,cAAA,CAAA,MAAA,EAAA;AAAA,UACC,SAAW,EAAAG,SAAA,CAAK,YAAa,CAAA,SAAS,CAAG,EAAA;AAAA,YACvC,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,KAAA;AAAA,WAC1B,CAAA;AAAA,UAEA,QAAA,EAAA,iBAAA,GACG,iBAAkB,CAAA,GAAA,EAAK,MAAM,CAAA,GAC7BD,iBAAW,GAAK,EAAA,EAAE,GAAK,EAAA,SAAA,EAAW,CAAA;AAAA,SACxC,CAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltCalendarMonth-dateGrid {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  text-align: center;\n}\n";
+var css_248z = ".saltCalendarMonth-dateGrid {\n  display: grid;\n  gap: var(--salt-size-border);\n  grid-template-columns: repeat(7, var(--salt-size-base));\n  grid-template-rows: repeat(6, var(--salt-size-base));\n  text-align: center;\n  margin: var(--salt-size-border);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=CalendarMonth.css.js.map

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

@@ -19,8 +19,6 @@ const CalendarMonth = React.forwardRef(
     const {
       className,
       date,
-      hideOutOfRangeDates,
-      isVisible,
       renderDayContents,
       onMouseLeave,
       TooltipProps,

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

@@ -1 +1 @@
-{"version":3,"file":"CalendarMonth.js","sources":["../src/calendar/internal/CalendarMonth.tsx"],"sourcesContent":["import {\n  ComponentPropsWithRef,\n  forwardRef,\n  MouseEvent,\n  SyntheticEvent,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { DateValue } from \"@internationalized/date\";\nimport { CalendarDay, CalendarDayProps } from \"./CalendarDay\";\nimport { formatDate, generateVisibleDays } from \"./utils\";\n\nimport calendarMonthCss from \"./CalendarMonth.css\";\nimport { useCalendarContext } from \"./CalendarContext\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\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":["makePrefixer","forwardRef","CalendarMonth","useWindow","useComponentCssInjection","calendarMonthCss","generateVisibleDays","useCalendarContext","jsx","clsx","CalendarDay","formatDate"],"mappings":";;;;;;;;;;;;;;;AAyBA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAASC,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,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,eAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,IAAA,GAAOC,0BAAoB,IAAI,CAAA,CAAA;AACrC,IAAM,MAAA;AAAA,MACJ,OAAA,EAAS,EAAE,cAAe,EAAA;AAAA,QACxBC,kCAAmB,EAAA,CAAA;AAEvB,IAAM,MAAA,gBAAA,GAAmB,CAAC,KAA0B,KAAA;AAClD,MAAA,cAAA,CAAe,OAAO,IAAI,CAAA,CAAA;AAC1B,MAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACjB,CAAA;AAEA,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;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,QAAC,kBAAAD,cAAA,CAAA,KAAA,EAAA;AAAA,QACC,aAAY,EAAA,kBAAA;AAAA,QACZ,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,QAEjC,QAAA,EAAA,IAAA,CAAK,GAAI,CAAA,CAAC,GAAQ,KAAA;AACjB,UAAA,uBACGA,cAAA,CAAAE,uBAAA,EAAA;AAAA,YAEC,KAAK,GAAI,CAAA,IAAA;AAAA,YACT,iBAAA;AAAA,YACA,KAAO,EAAA,IAAA;AAAA,YACP,YAAA;AAAA,WAJK,EAAAC,gBAAA,CAAW,GAAI,CAAA,IAAI,CAK1B,CAAA,CAAA;AAAA,SAEH,CAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"CalendarMonth.js","sources":["../src/calendar/internal/CalendarMonth.tsx"],"sourcesContent":["import {\n  ComponentPropsWithRef,\n  forwardRef,\n  MouseEvent,\n  SyntheticEvent,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { DateValue } from \"@internationalized/date\";\nimport { CalendarDay, CalendarDayProps } from \"./CalendarDay\";\nimport { formatDate, generateVisibleDays } from \"./utils\";\n\nimport calendarMonthCss from \"./CalendarMonth.css\";\nimport { useCalendarContext } from \"./CalendarContext\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\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      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":["makePrefixer","forwardRef","CalendarMonth","useWindow","useComponentCssInjection","calendarMonthCss","generateVisibleDays","useCalendarContext","jsx","clsx","CalendarDay","formatDate"],"mappings":";;;;;;;;;;;;;;;AAyBA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAASC,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,IAAA;AAAA,MACA,iBAAA;AAAA,MACA,YAAA;AAAA,MACA,YAAA;AAAA,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,eAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,IAAA,GAAOC,0BAAoB,IAAI,CAAA,CAAA;AACrC,IAAM,MAAA;AAAA,MACJ,OAAA,EAAS,EAAE,cAAe,EAAA;AAAA,QACxBC,kCAAmB,EAAA,CAAA;AAEvB,IAAM,MAAA,gBAAA,GAAmB,CAAC,KAA0B,KAAA;AAClD,MAAA,cAAA,CAAe,OAAO,IAAI,CAAA,CAAA;AAC1B,MAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACjB,CAAA;AAEA,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;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,QAAC,kBAAAD,cAAA,CAAA,KAAA,EAAA;AAAA,QACC,aAAY,EAAA,kBAAA;AAAA,QACZ,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,QAEjC,QAAA,EAAA,IAAA,CAAK,GAAI,CAAA,CAAC,GAAQ,KAAA;AACjB,UAAA,uBACGA,cAAA,CAAAE,uBAAA,EAAA;AAAA,YAEC,KAAK,GAAI,CAAA,IAAA;AAAA,YACT,iBAAA;AAAA,YACA,KAAO,EAAA,IAAA;AAAA,YACP,YAAA;AAAA,WAJK,EAAAC,gBAAA,CAAW,GAAI,CAAA,IAAI,CAK1B,CAAA,CAAA;AAAA,SAEH,CAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/calendar/internal/CalendarNavigation.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".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}\n\n.saltCalendarNavigation-hideYearDropdown {\n  grid-template-columns: min-content auto min-content;\n}\n";
+var css_248z = ".saltCalendarNavigation {\n  display: grid;\n  grid-template-columns: min-content auto min-content;\n  padding-bottom: var(--salt-spacing-100);\n  grid-gap: 0;\n  align-items: center;\n  height: var(--salt-size-base);\n}\n\n.saltCalendarNavigation-hideYearDropdown {\n  grid-template-columns: min-content auto min-content;\n  grid-gap: var(--salt-spacing-300);\n}\n\n.saltCalendarNavigation-dropdowns {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-gap: var(--salt-spacing-100);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=CalendarNavigation.css.js.map

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

@@ -3,27 +3,20 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var core = require('@salt-ds/core');
 var icons = require('@salt-ds/icons');
 var clsx = require('clsx');
-var React = require('react');
-require('../../dropdown/DropdownBase.js');
-require('../../dropdown/DropdownButton.js');
-var Dropdown = require('../../dropdown/Dropdown.js');
-require('../../responsive/useResizeObserver.js');
-require('../../form-field-context-legacy/FormFieldLegacyContext.js');
-require('../../list/Highlighter.js');
-var ListItem = require('../../list/ListItem.js');
-require('../../list/List.js');
-require('../../common-hooks/collectionProvider.js');
-require('../../common-hooks/keyUtils.js');
-require('../../list/VirtualizedList.js');
+var DropdownNext = require('../../dropdown-next/DropdownNext.js');
 var CalendarContext = require('./CalendarContext.js');
 var CalendarNavigation$1 = require('./CalendarNavigation.css.js');
 var date = require('@internationalized/date');
 var utils = require('./utils.js');
 var window = require('@salt-ds/window');
 var styles = require('@salt-ds/styles');
+var Option = require('../../option/Option.js');
+require('../../option/OptionGroup.js');
+var ListControlContext = require('../../list-control/ListControlContext.js');
 
 const withBaseName = core.makePrefixer("saltCalendarNavigation");
 function useCalendarNavigation() {
@@ -56,15 +49,13 @@ function useCalendarNavigation() {
       setVisibleMonth(event, newMonth);
     }
   };
-  const months = utils.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 months = utils.monthsForLocale(visibleMonth);
+  const years = [-2, -1, 0, 1, 2].map((delta) => visibleMonth.add({ years: delta })).filter((year) => !isOutsideAllowedYears(year));
   const selectedMonth = months.find(
-    (item) => date.isSameMonth(item.value, visibleMonth)
+    (month) => date.isSameMonth(month, visibleMonth)
   );
   const selectedYear = years.find(
-    (item) => date.isSameYear(item.value, visibleMonth)
+    (year) => date.isSameYear(year, visibleMonth)
   );
   const canNavigatePrevious = !(minDate && isDayVisible(minDate));
   const canNavigateNext = !(maxDate && isDayVisible(maxDate));
@@ -78,22 +69,32 @@ function useCalendarNavigation() {
     canNavigateNext,
     canNavigatePrevious,
     selectedMonth,
-    selectedYear
+    selectedYear,
+    isOutsideAllowedMonths
   };
 }
-const ListItemWithTooltip = ({
-  item,
-  label,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, {
-  placement: "right",
-  disabled: !(item == null ? void 0 : item.disabled),
-  content: "This month is out of range",
-  children: /* @__PURE__ */ jsxRuntime.jsx(ListItem.ListItem, {
-    ...props,
-    children: label
-  })
-});
+const OptionWithTooltip = ({
+  value,
+  children,
+  disabled,
+  tooltipContent
+}) => {
+  const { activeState, openState } = ListControlContext.useListControlContext();
+  const open = (activeState == null ? void 0 : activeState.value) === value;
+  return /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, {
+    placement: "right",
+    open: open && openState,
+    disabled: !disabled,
+    content: tooltipContent,
+    enterDelay: 0,
+    leaveDelay: 0,
+    children: /* @__PURE__ */ jsxRuntime.jsx(Option.Option, {
+      value,
+      disabled,
+      children
+    })
+  });
+};
 const CalendarNavigation = React.forwardRef(function CalendarNavigation2(props, ref) {
   const {
     className,
@@ -118,7 +119,8 @@ const CalendarNavigation = React.forwardRef(function CalendarNavigation2(props,
     canNavigatePrevious,
     visibleMonth,
     selectedMonth,
-    selectedYear
+    selectedYear,
+    isOutsideAllowedMonths
   } = useCalendarNavigation();
   const handleNavigatePrevious = (event) => {
     moveToPreviousMonth(event);
@@ -127,33 +129,16 @@ const CalendarNavigation = React.forwardRef(function CalendarNavigation2(props,
     moveToNextMonth(event);
   };
   const handleMonthSelect = (event, month) => {
-    if (month) {
-      moveToMonth(event, month.value);
-    }
+    moveToMonth(event, month[0]);
   };
   const handleYearSelect = (event, year) => {
-    if (year) {
-      moveToMonth(event, year.value);
-    }
+    moveToMonth(event, year[0]);
   };
-  const monthDropdownId = core.useId(MonthDropdownProps == null ? void 0 : MonthDropdownProps.id) || "";
-  const monthDropdownLabelledBy = clsx.clsx(
-    MonthDropdownProps == null ? void 0 : MonthDropdownProps["aria-labelledby"],
-    `${monthDropdownId}-control`
-  );
-  const yearDropdownId = core.useId(YearDropdownProps == null ? void 0 : YearDropdownProps.id) || "";
-  const yearDropdownLabelledBy = clsx.clsx(
-    YearDropdownProps == null ? void 0 : YearDropdownProps["aria-labelledby"],
-    `${yearDropdownId}-control`
-  );
-  const defaultItemToMonth = (date) => {
-    if (hideYearDropdown) {
-      return utils.formatDate(date.value, { month: "long" });
-    }
-    return utils.formatDate(date.value, { month: "short" });
+  const formatMonth = (date) => {
+    return !date ? "" : utils.formatDate(date, { month: hideYearDropdown ? "long" : "short" });
   };
-  const defaultItemToYear = (date) => {
-    return utils.formatDate(date.value, { year: "numeric" });
+  const formatYear = (date) => {
+    return !date ? "" : utils.formatDate(date, { year: "numeric" });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     className: clsx.clsx(
@@ -168,11 +153,12 @@ const CalendarNavigation = React.forwardRef(function CalendarNavigation2(props,
         placement: "top",
         disabled: canNavigatePrevious,
         content: "Past dates are out of range",
+        enterDelay: 0,
+        leaveDelay: 0,
         children: /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
           disabled: !canNavigatePrevious,
           variant: "secondary",
           onClick: handleNavigatePrevious,
-          className: withBaseName("previousButton"),
           focusableWhenDisabled: true,
           children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronLeftIcon, {
             "aria-label": `Previous Month, ${utils.formatDate(
@@ -181,39 +167,46 @@ const CalendarNavigation = React.forwardRef(function CalendarNavigation2(props,
           })
         })
       }),
-      /* @__PURE__ */ jsxRuntime.jsx(Dropdown.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__ */ jsxRuntime.jsx(Dropdown.Dropdown, {
-        source: years,
-        id: yearDropdownId,
-        "aria-labelledby": yearDropdownLabelledBy,
-        "aria-label": "Year Dropdown",
-        ...YearDropdownProps,
-        ListItem: ListItemWithTooltip,
-        selected: selectedYear,
-        onSelectionChange: handleYearSelect,
-        itemToString: defaultItemToYear,
-        fullWidth: true
+      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        className: withBaseName("dropdowns"),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DropdownNext.DropdownNext, {
+            "aria-label": "Month Dropdown",
+            selected: selectedMonth ? [selectedMonth] : [],
+            value: formatMonth(selectedMonth),
+            onSelectionChange: handleMonthSelect,
+            ...MonthDropdownProps,
+            children: months.map((month) => /* @__PURE__ */ jsxRuntime.jsx(OptionWithTooltip, {
+              value: month,
+              disabled: isOutsideAllowedMonths(month),
+              tooltipContent: "This month is out of range",
+              children: formatMonth(month)
+            }, formatMonth(month)))
+          }),
+          !hideYearDropdown && /* @__PURE__ */ jsxRuntime.jsx(DropdownNext.DropdownNext, {
+            "aria-label": "Year Dropdown",
+            selected: selectedYear ? [selectedYear] : [],
+            value: formatYear(selectedYear),
+            onSelectionChange: handleYearSelect,
+            ...YearDropdownProps,
+            children: years.map((year) => /* @__PURE__ */ jsxRuntime.jsx(OptionWithTooltip, {
+              value: year,
+              tooltipContent: "This year is out of range",
+              children: formatYear(year)
+            }, formatYear(year)))
+          })
+        ]
       }),
       /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, {
         placement: "top",
         disabled: canNavigateNext,
         content: "Future dates are out of range",
+        enterDelay: 0,
+        leaveDelay: 0,
         children: /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
           disabled: !canNavigateNext,
           variant: "secondary",
           onClick: handleNavigateNext,
-          className: withBaseName("nextButton"),
           focusableWhenDisabled: true,
           children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRightIcon, {
             "aria-label": `Next Month, ${utils.formatDate(

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

@@ -1 +1 @@
-{"version":3,"file":"CalendarNavigation.js","sources":["../src/calendar/internal/CalendarNavigation.tsx"],"sourcesContent":["import {\n  Button,\n  ButtonProps,\n  makePrefixer,\n  Tooltip,\n  useId,\n} from \"@salt-ds/core\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@salt-ds/icons\";\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\";\n\nimport { useCalendarContext } from \"./CalendarContext\";\n\nimport calendarNavigationCss from \"./CalendarNavigation.css\";\nimport { DateValue, isSameMonth, isSameYear } from \"@internationalized/date\";\nimport { formatDate, monthDiff, monthsForLocale } from \"./utils\";\nimport { SelectionChangeHandler } from \"../../common-hooks\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\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-navigation\",\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: SelectionChangeHandler<DropdownItem> = (\n    event,\n    month\n  ) => {\n    if (month) {\n      moveToMonth(event, month.value);\n    }\n  };\n\n  const handleYearSelect: SelectionChangeHandler<DropdownItem> = (\n    event,\n    year\n  ) => {\n    if (year) {\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        <Button\n          disabled={!canNavigatePrevious}\n          variant=\"secondary\"\n          onClick={handleNavigatePrevious}\n          className={withBaseName(\"previousButton\")}\n          focusableWhenDisabled={true}\n        >\n          <ChevronLeftIcon\n            aria-label={`Previous Month, ${formatDate(\n              visibleMonth.subtract({ months: 1 })\n            )}`}\n          />\n        </Button>\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        <Button\n          disabled={!canNavigateNext}\n          variant=\"secondary\"\n          onClick={handleNavigateNext}\n          className={withBaseName(\"nextButton\")}\n          focusableWhenDisabled={true}\n        >\n          <ChevronRightIcon\n            aria-label={`Next Month, ${formatDate(\n              visibleMonth.add({ months: 1 })\n            )}`}\n          />\n        </Button>\n      </Tooltip>\n    </div>\n  );\n});\n"],"names":["makePrefixer","useCalendarContext","monthsForLocale","monthDiff","isSameMonth","isSameYear","jsx","Tooltip","ListItem","forwardRef","CalendarNavigation","useWindow","useComponentCssInjection","calendarNavigationCss","useId","clsx","formatDate","jsxs","Button","ChevronLeftIcon","Dropdown","ChevronRightIcon"],"mappings":"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"}
+{"version":3,"file":"CalendarNavigation.js","sources":["../src/calendar/internal/CalendarNavigation.tsx"],"sourcesContent":["import {\n  ComponentPropsWithRef,\n  forwardRef,\n  MouseEventHandler,\n  SyntheticEvent,\n} from \"react\";\nimport { Button, ButtonProps, makePrefixer, Tooltip } from \"@salt-ds/core\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { DropdownNext, DropdownNextProps } from \"../../dropdown-next\";\n\nimport { useCalendarContext } from \"./CalendarContext\";\n\nimport calendarNavigationCss from \"./CalendarNavigation.css\";\nimport { DateValue, isSameMonth, isSameYear } from \"@internationalized/date\";\nimport { formatDate, monthDiff, monthsForLocale } from \"./utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { Option, OptionProps } from \"../../option\";\nimport { useListControlContext } from \"../../list-control/ListControlContext\";\n\ntype dateDropdownProps = DropdownNextProps<DateValue>;\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\ninterface OptionWithTooltipProps extends OptionProps {\n  value: DateValue;\n  tooltipContent: string;\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: DateValue[] = monthsForLocale(visibleMonth);\n\n  const years: DateValue[] = [-2, -1, 0, 1, 2]\n    .map((delta) => visibleMonth.add({ years: delta }))\n    .filter((year) => !isOutsideAllowedYears(year));\n\n  const selectedMonth: DateValue | undefined = months.find((month: DateValue) =>\n    isSameMonth(month, visibleMonth)\n  );\n  const selectedYear: DateValue | undefined = years.find((year: DateValue) =>\n    isSameYear(year, 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    isOutsideAllowedMonths,\n  };\n}\n\nconst OptionWithTooltip = ({\n  value,\n  children,\n  disabled,\n  tooltipContent,\n}: OptionWithTooltipProps) => {\n  const { activeState, openState } = useListControlContext();\n  const open = activeState?.value === value;\n\n  return (\n    <Tooltip\n      placement=\"right\"\n      open={open && openState}\n      disabled={!disabled}\n      content={tooltipContent}\n      enterDelay={0} // --salt-duration-instant\n      leaveDelay={0} // --salt-duration-instant\n    >\n      <Option value={value} disabled={disabled}>\n        {children}\n      </Option>\n    </Tooltip>\n  );\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-navigation\",\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    isOutsideAllowedMonths,\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 = (event: SyntheticEvent, month: DateValue[]) => {\n    moveToMonth(event, month[0]);\n  };\n\n  const handleYearSelect = (event: SyntheticEvent, year: DateValue[]) => {\n    moveToMonth(event, year[0]);\n  };\n\n  const formatMonth = (date?: DateValue) => {\n    return !date\n      ? \"\"\n      : formatDate(date, { month: hideYearDropdown ? \"long\" : \"short\" });\n  };\n\n  const formatYear = (date?: DateValue) => {\n    return !date ? \"\" : formatDate(date, { 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        enterDelay={0} // --salt-duration-instant\n        leaveDelay={0} // --salt-duration-instant\n      >\n        <Button\n          disabled={!canNavigatePrevious}\n          variant=\"secondary\"\n          onClick={handleNavigatePrevious}\n          focusableWhenDisabled={true}\n        >\n          <ChevronLeftIcon\n            aria-label={`Previous Month, ${formatDate(\n              visibleMonth.subtract({ months: 1 })\n            )}`}\n          />\n        </Button>\n      </Tooltip>\n      <div className={withBaseName(\"dropdowns\")}>\n        <DropdownNext\n          aria-label=\"Month Dropdown\"\n          selected={selectedMonth ? [selectedMonth] : []}\n          value={formatMonth(selectedMonth)}\n          onSelectionChange={handleMonthSelect}\n          {...MonthDropdownProps}\n        >\n          {months.map((month) => (\n            <OptionWithTooltip\n              key={formatMonth(month)}\n              value={month}\n              disabled={isOutsideAllowedMonths(month)}\n              tooltipContent=\"This month is out of range\"\n            >\n              {formatMonth(month)}\n            </OptionWithTooltip>\n          ))}\n        </DropdownNext>\n        {!hideYearDropdown && (\n          <DropdownNext\n            aria-label=\"Year Dropdown\"\n            selected={selectedYear ? [selectedYear] : []}\n            value={formatYear(selectedYear)}\n            onSelectionChange={handleYearSelect}\n            {...YearDropdownProps}\n          >\n            {years.map((year) => (\n              <OptionWithTooltip\n                key={formatYear(year)}\n                value={year}\n                tooltipContent=\"This year is out of range\"\n              >\n                {formatYear(year)}\n              </OptionWithTooltip>\n            ))}\n          </DropdownNext>\n        )}\n      </div>\n      <Tooltip\n        placement=\"top\"\n        disabled={canNavigateNext}\n        content=\"Future dates are out of range\"\n        enterDelay={0} // --salt-duration-instant\n        leaveDelay={0} // --salt-duration-instant\n      >\n        <Button\n          disabled={!canNavigateNext}\n          variant=\"secondary\"\n          onClick={handleNavigateNext}\n          focusableWhenDisabled={true}\n        >\n          <ChevronRightIcon\n            aria-label={`Next Month, ${formatDate(\n              visibleMonth.add({ months: 1 })\n            )}`}\n          />\n        </Button>\n      </Tooltip>\n    </div>\n  );\n});\n"],"names":["makePrefixer","useCalendarContext","monthsForLocale","monthDiff","isSameMonth","isSameYear","useListControlContext","jsx","Tooltip","Option","forwardRef","CalendarNavigation","useWindow","useComponentCssInjection","calendarNavigationCss","formatDate","jsxs","clsx","Button","ChevronLeftIcon","DropdownNext","ChevronRightIcon"],"mappings":"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"}

package/dist-cjs/calendar/internal/CalendarWeekHeader.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".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";
+var css_248z = ".saltCalendarWeekHeader {\n  display: grid;\n  gap: var(--salt-size-border);\n  grid-template-columns: repeat(7, var(--salt-size-base));\n  text-align: center;\n  align-items: center;\n  height: var(--salt-size-base);\n  margin: var(--salt-size-border);\n}\n\n.saltCalendarWeekHeader-dayOfWeek {\n  width: var(--salt-size-base);\n  color: var(--salt-content-secondary-foreground);\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=CalendarWeekHeader.css.js.map

package/dist-cjs/calendar/useCalendar.js

@@ -8,6 +8,8 @@ var React = require('react');
 var useSelection = require('./useSelection.js');
 
 const defaultIsDayUnselectable = () => false;
+const defaultIsDayHighlighted = () => false;
+const defaultIsDayDisabled = () => false;
 function useCalendar(props) {
   const {
     selectedDate,
@@ -19,12 +21,20 @@ function useCalendar(props) {
     onSelectedDateChange,
     onVisibleMonthChange,
     isDayUnselectable = defaultIsDayUnselectable,
+    isDayHighlighted = defaultIsDayHighlighted,
+    isDayDisabled = defaultIsDayDisabled,
     minDate = hideYearDropdown ? date.startOfYear(date.today(date.getLocalTimeZone())) : void 0,
     maxDate = hideYearDropdown ? date.endOfYear(date.today(date.getLocalTimeZone())) : void 0,
     selectionVariant,
     onHoveredDateChange,
     hoveredDate
   } = props;
+  const [visibleMonth, setVisibleMonthState] = core.useControlled({
+    controlled: visibleMonthProp ? date.startOfMonth(visibleMonthProp) : void 0,
+    default: date.startOfMonth(defaultVisibleMonth),
+    name: "Calendar",
+    state: "visibleMonth"
+  });
   const isOutsideAllowedDates = React.useCallback(
     (date) => {
       return minDate != null && date.compare(minDate) < 0 || maxDate != null && date.compare(maxDate) > 0;
@@ -38,8 +48,8 @@ function useCalendar(props) {
     return minDate != null && date.endOfYear(date$1).compare(minDate) < 0 || maxDate != null && date.startOfYear(date$1).compare(maxDate) > 0;
   };
   const isDaySelectable = React.useCallback(
-    (date) => !(date && (isDayUnselectable(date) || isOutsideAllowedDates(date))),
-    [isDayUnselectable, isOutsideAllowedDates]
+    (date) => !(date && (isDayUnselectable(date) || isDayDisabled(date) || isOutsideAllowedDates(date))),
+    [isDayUnselectable, isDayDisabled, isOutsideAllowedDates]
   );
   const selectionManager = useSelection.useSelectionCalendar({
     defaultSelectedDate,
@@ -52,12 +62,6 @@ function useCalendar(props) {
     onHoveredDateChange,
     hoveredDate
   });
-  const [visibleMonth, setVisibleMonthState] = core.useControlled({
-    controlled: visibleMonthProp ? date.startOfMonth(visibleMonthProp) : void 0,
-    default: date.startOfMonth(defaultVisibleMonth),
-    name: "Calendar",
-    state: "visibleMonth"
-  });
   const [calendarFocused, setCalendarFocused] = React.useState(false);
   const [focusedDate, setFocusedDateState] = React.useState(
     date.startOfMonth(visibleMonth)
@@ -118,6 +122,8 @@ function useCalendar(props) {
       setFocusedDate,
       setCalendarFocused,
       isDayUnselectable,
+      isDayHighlighted,
+      isDayDisabled,
       isDayVisible,
       isOutsideAllowedDates,
       isOutsideAllowedMonths,