@salt-ds/lab 1.0.0-alpha.55 → 1.0.0-alpha.57

package/dist-cjs/tabs-next/TabListNext.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Component class applied to the root element */\n.saltTabListNext {\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  position: relative;\n  background: transparent;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  gap: var(--salt-spacing-100);\n  max-width: 100%;\n}\n\n.saltTabListNext-center {\n  justify-content: center;\n}\n\n.saltTabListNext-right {\n  justify-content: flex-end;\n}\n\n.saltTabListNext-activeColorPrimary {\n  --saltTabListNext-activeColor: var(--salt-container-primary-background);\n}\n\n.saltTabListNext-activeColorSecondary {\n  --saltTabListNext-activeColor: var(--salt-container-secondary-background);\n}\n\n.saltTabListNext-activeColorTertiary {\n  --saltTabListNext-activeColor: var(--salt-container-tertiary-background);\n}\n";
+var css_248z = "/* Component class applied to the root element */\n.saltTabListNext {\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  position: relative;\n  background: transparent;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  gap: var(--salt-spacing-100);\n  max-width: 100%;\n}\n\n.saltTabListNext-center {\n  justify-content: center;\n}\n\n.saltTabListNext-right {\n  justify-content: flex-end;\n}\n\n.saltTabListNext-activeColorPrimary {\n  --saltTabListNext-activeColor: var(--salt-container-primary-background);\n}\n\n.saltTabListNext-activeColorSecondary {\n  --saltTabListNext-activeColor: var(--salt-container-secondary-background);\n}\n\n.saltTabListNext-activeColorTertiary {\n  --saltTabListNext-activeColor: var(--salt-container-tertiary-background);\n}\n\n.saltTabListNext-overflowWarning {\n  display: none;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=TabListNext.css.js.map

package/dist-cjs/tabs-next/TabListNext.js

@@ -17,6 +17,7 @@ const TabListNext = react.forwardRef(
     const {
       appearance = "bordered",
       activeColor = "primary",
+      "aria-describedby": ariaDescribedBy,
       children,
       className,
       onKeyDown,
@@ -89,6 +90,7 @@ const TabListNext = react.forwardRef(
         }
       });
     }, [visible, returnFocus, targetWindow, items, selected]);
+    const warningId = core.useId();
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -103,8 +105,10 @@ const TabListNext = react.forwardRef(
         "data-ismeasuring": isMeasuring ? true : void 0,
         ref: handleRef,
         onKeyDown: handleKeyDown,
+        "aria-describedby": clsx.clsx(ariaDescribedBy, warningId),
         ...rest,
         children: [
+          hidden.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { id: warningId, className: withBaseName("overflowWarning"), children: "Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected" }),
           visible,
           /* @__PURE__ */ jsxRuntime.jsx(
             TabOverflowList.TabOverflowList,

package/dist-cjs/tabs-next/TabListNext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabListNext.js","sources":["../src/tabs-next/TabListNext.tsx"],"sourcesContent":["import {\n  capitalize,\n  makePrefixer,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  forwardRef,\n  useRef,\n} from \"react\";\n\nimport tablistNextCss from \"./TabListNext.css\";\nimport { TabOverflowList } from \"./TabOverflowList\";\nimport { useTabsNext } from \"./TabsNextContext\";\nimport { useOverflow } from \"./hooks/useOverflow\";\n\nconst withBaseName = makePrefixer(\"saltTabListNext\");\n\nexport interface TabListNextProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * Styling active color variant. Defaults to \"primary\".\n   */\n  activeColor?: \"primary\" | \"secondary\" | \"tertiary\";\n  /**\n   * The appearance of the tabs. Defaults to \"bordered\".\n   */\n  appearance?: \"bordered\" | \"transparent\";\n}\n\nexport const TabListNext = forwardRef<HTMLDivElement, TabListNextProps>(\n  function TabstripNext(props, ref) {\n    const {\n      appearance = \"bordered\",\n      activeColor = \"primary\",\n      children,\n      className,\n      onKeyDown,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tablist-next\",\n      css: tablistNextCss,\n      window: targetWindow,\n    });\n\n    const {\n      selected,\n      getNext,\n      getPrevious,\n      getFirst,\n      getLast,\n      items,\n      activeTab,\n      menuOpen,\n      setMenuOpen,\n      returnFocus,\n    } = useTabsNext();\n\n    const tabstripRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(tabstripRef, ref);\n    const overflowButtonRef = useRef<HTMLButtonElement>(null);\n\n    const [visible, hidden, isMeasuring] = useOverflow({\n      container: tabstripRef,\n      tabs: items,\n      children,\n      selected,\n      overflowButton: overflowButtonRef,\n    });\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n\n      const actionMap = {\n        ArrowRight: getNext,\n        ArrowLeft: getPrevious,\n        Home: getFirst,\n        End: getLast,\n        ArrowUp: menuOpen ? getPrevious : undefined,\n        ArrowDown: menuOpen ? getNext : undefined,\n      };\n\n      const action = actionMap[event.key as keyof typeof actionMap];\n\n      if (action) {\n        event.preventDefault();\n        const activeTabId = activeTab.current?.id;\n        if (!activeTabId) return;\n        const nextItem = action(activeTabId);\n        if (nextItem) {\n          nextItem.element?.scrollIntoView({\n            block: \"nearest\",\n            inline: \"nearest\",\n          });\n          nextItem.element?.focus({ preventScroll: true });\n        }\n      }\n    };\n\n    useIsomorphicLayoutEffect(() => {\n      if (!returnFocus.current || visible.length < 1 || selected === undefined)\n        return;\n\n      const itemToFocus = items.find((i) => i.value === returnFocus.current);\n      itemToFocus?.element?.focus({ preventScroll: true });\n\n      requestAnimationFrame(() => {\n        if (targetWindow?.document?.activeElement === itemToFocus?.element) {\n          returnFocus.current = undefined;\n        }\n      });\n    }, [visible, returnFocus, targetWindow, items, selected]);\n\n    return (\n      <div\n        role=\"tablist\"\n        className={clsx(\n          withBaseName(),\n          withBaseName(appearance),\n          withBaseName(\"horizontal\"),\n          withBaseName(`activeColor${capitalize(activeColor)}`),\n          className,\n        )}\n        data-ismeasuring={isMeasuring ? true : undefined}\n        ref={handleRef}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        {visible}\n        <TabOverflowList\n          isMeasuring={isMeasuring}\n          buttonRef={overflowButtonRef}\n          tabstripRef={tabstripRef}\n          open={menuOpen}\n          setOpen={setMenuOpen}\n        >\n          {hidden}\n        </TabOverflowList>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","tablistNextCss","useTabsNext","useRef","useForkRef","useOverflow","useIsomorphicLayoutEffect","_a","jsxs","clsx","capitalize","jsx","TabOverflowList"],"mappings":"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"}
+{"version":3,"file":"TabListNext.js","sources":["../src/tabs-next/TabListNext.tsx"],"sourcesContent":["import {\n  capitalize,\n  makePrefixer,\n  useForkRef,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  forwardRef,\n  useRef,\n} from \"react\";\n\nimport tablistNextCss from \"./TabListNext.css\";\nimport { TabOverflowList } from \"./TabOverflowList\";\nimport { useTabsNext } from \"./TabsNextContext\";\nimport { useOverflow } from \"./hooks/useOverflow\";\n\nconst withBaseName = makePrefixer(\"saltTabListNext\");\n\nexport interface TabListNextProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * Styling active color variant. Defaults to \"primary\".\n   */\n  activeColor?: \"primary\" | \"secondary\" | \"tertiary\";\n  /**\n   * The appearance of the tabs. Defaults to \"bordered\".\n   */\n  appearance?: \"bordered\" | \"transparent\";\n}\n\nexport const TabListNext = forwardRef<HTMLDivElement, TabListNextProps>(\n  function TabstripNext(props, ref) {\n    const {\n      appearance = \"bordered\",\n      activeColor = \"primary\",\n      \"aria-describedby\": ariaDescribedBy,\n      children,\n      className,\n      onKeyDown,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tablist-next\",\n      css: tablistNextCss,\n      window: targetWindow,\n    });\n\n    const {\n      selected,\n      getNext,\n      getPrevious,\n      getFirst,\n      getLast,\n      items,\n      activeTab,\n      menuOpen,\n      setMenuOpen,\n      returnFocus,\n    } = useTabsNext();\n\n    const tabstripRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(tabstripRef, ref);\n    const overflowButtonRef = useRef<HTMLButtonElement>(null);\n\n    const [visible, hidden, isMeasuring] = useOverflow({\n      container: tabstripRef,\n      tabs: items,\n      children,\n      selected,\n      overflowButton: overflowButtonRef,\n    });\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n\n      const actionMap = {\n        ArrowRight: getNext,\n        ArrowLeft: getPrevious,\n        Home: getFirst,\n        End: getLast,\n        ArrowUp: menuOpen ? getPrevious : undefined,\n        ArrowDown: menuOpen ? getNext : undefined,\n      };\n\n      const action = actionMap[event.key as keyof typeof actionMap];\n\n      if (action) {\n        event.preventDefault();\n        const activeTabId = activeTab.current?.id;\n        if (!activeTabId) return;\n        const nextItem = action(activeTabId);\n        if (nextItem) {\n          nextItem.element?.scrollIntoView({\n            block: \"nearest\",\n            inline: \"nearest\",\n          });\n          nextItem.element?.focus({ preventScroll: true });\n        }\n      }\n    };\n\n    useIsomorphicLayoutEffect(() => {\n      if (!returnFocus.current || visible.length < 1 || selected === undefined)\n        return;\n\n      const itemToFocus = items.find((i) => i.value === returnFocus.current);\n      itemToFocus?.element?.focus({ preventScroll: true });\n\n      requestAnimationFrame(() => {\n        if (targetWindow?.document?.activeElement === itemToFocus?.element) {\n          returnFocus.current = undefined;\n        }\n      });\n    }, [visible, returnFocus, targetWindow, items, selected]);\n\n    const warningId = useId();\n\n    return (\n      <div\n        role=\"tablist\"\n        className={clsx(\n          withBaseName(),\n          withBaseName(appearance),\n          withBaseName(\"horizontal\"),\n          withBaseName(`activeColor${capitalize(activeColor)}`),\n          className,\n        )}\n        data-ismeasuring={isMeasuring ? true : undefined}\n        ref={handleRef}\n        onKeyDown={handleKeyDown}\n        aria-describedby={clsx(ariaDescribedBy, warningId)}\n        {...rest}\n      >\n        {hidden.length > 0 && (\n          <span id={warningId} className={withBaseName(\"overflowWarning\")}>\n            Note: This tab list includes overflow; tab positions may be\n            inaccurate or change when a tab is selected\n          </span>\n        )}\n        {visible}\n        <TabOverflowList\n          isMeasuring={isMeasuring}\n          buttonRef={overflowButtonRef}\n          tabstripRef={tabstripRef}\n          open={menuOpen}\n          setOpen={setMenuOpen}\n        >\n          {hidden}\n        </TabOverflowList>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","tablistNextCss","useTabsNext","useRef","useForkRef","useOverflow","useIsomorphicLayoutEffect","_a","useId","jsxs","clsx","capitalize","jsx","TabOverflowList"],"mappings":"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"}

package/dist-es/calendar/Calendar.js

@@ -6,13 +6,14 @@ import { CalendarContext } from './internal/CalendarContext.js';
 import { useCalendar } from './useCalendar.js';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
-import { DateFormatter } from '@internationalized/date';
+import { useLocalization } from '../localization-provider/LocalizationProvider.js';
 import css_248z from './Calendar.css.js';
 
 const withBaseName = makePrefixer("saltCalendar");
 const Calendar = forwardRef(
-  function Calendar2(props, ref) {
+  (props, ref) => {
     const targetWindow = useWindow();
+    const { dateAdapter } = useLocalization();
     useComponentCssInjection({
       testId: "salt-calendar",
       css: css_248z,
@@ -24,15 +25,14 @@ const Calendar = forwardRef(
       selectedDate,
       defaultSelectedDate,
       visibleMonth: visibleMonthProp,
-      timeZone,
-      locale,
       defaultVisibleMonth,
-      onSelectedDateChange,
+      onSelectionChange,
       onVisibleMonthChange,
       hideOutOfRangeDates,
       isDayUnselectable,
       isDayHighlighted,
       isDayDisabled,
+      locale,
       minDate,
       maxDate,
       selectionVariant,
@@ -52,14 +52,13 @@ const Calendar = forwardRef(
       selectedDate,
       defaultSelectedDate,
       visibleMonth: visibleMonthProp,
-      timeZone,
-      locale,
       defaultVisibleMonth,
-      onSelectedDateChange,
+      onSelectionChange,
       onVisibleMonthChange,
       isDayUnselectable,
       isDayHighlighted,
       isDayDisabled,
+      locale,
       minDate,
       maxDate,
       selectionVariant,
@@ -70,10 +69,11 @@ const Calendar = forwardRef(
       endDateOffset
     };
     const { state, helpers } = useCalendar(useCalendarProps);
-    const calendarLabel = new DateFormatter(state.locale, {
-      month: "long",
-      year: "numeric"
-    }).format(state.visibleMonth.toDate(state.timeZone));
+    const calendarLabel = dateAdapter.format(
+      state.visibleMonth,
+      "MMMM YYYY",
+      locale
+    );
     return /* @__PURE__ */ jsx(
       CalendarContext.Provider,
       {

package/dist-es/calendar/Calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","sources":["../src/calendar/Calendar.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\nimport { CalendarContext } from \"./internal/CalendarContext\";\nimport {\n  type UseCalendarMultiSelectProps,\n  type UseCalendarOffsetProps,\n  type UseCalendarRangeProps,\n  type UseCalendarSingleProps,\n  useCalendar,\n} from \"./useCalendar\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport { DateFormatter } from \"@internationalized/date\";\nimport calendarCss from \"./Calendar.css\";\n\n/**\n * Base props for the Calendar component.\n */\nexport interface CalendarBaseProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content to be rendered inside the Calendar.\n   */\n  children: ReactNode;\n  /**\n   * If `true`, hides dates that are out of the selectable range.\n   */\n  hideOutOfRangeDates?: boolean;\n}\n\n/**\n * Props for the Calendar component with single date selection.\n */\nexport interface CalendarSingleProps\n  extends CalendarBaseProps,\n    UseCalendarSingleProps {\n  /**\n   * The selection variant, set to \"single\".\n   */\n  selectionVariant: \"single\";\n}\n\n/**\n * Props for the Calendar component with date range selection.\n */\nexport interface CalendarRangeProps\n  extends CalendarBaseProps,\n    UseCalendarRangeProps {\n  /**\n   * The selection variant, set to \"range\".\n   */\n  selectionVariant: \"range\";\n}\n\n/**\n * Props for the Calendar component with multi-select date selection.\n */\nexport interface CalendarMultiSelectProps\n  extends CalendarBaseProps,\n    UseCalendarMultiSelectProps {\n  /**\n   * The selection variant, set to \"multiselect\".\n   */\n  selectionVariant: \"multiselect\";\n}\n\n/**\n * Props for the Calendar component with offset date selection.\n */\nexport interface CalendarOffsetProps\n  extends CalendarBaseProps,\n    UseCalendarOffsetProps {\n  /**\n   * The selection variant, set to \"offset\".\n   */\n  selectionVariant: \"offset\";\n}\n\n/**\n * Type representing the props for the Calendar component with various selection variants.\n */\nexport type CalendarProps =\n  | CalendarSingleProps\n  | CalendarRangeProps\n  | CalendarMultiSelectProps\n  | CalendarOffsetProps;\n\nconst withBaseName = makePrefixer(\"saltCalendar\");\n\nexport const Calendar = forwardRef<HTMLDivElement, CalendarProps>(\n  function Calendar(props, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-calendar\",\n      css: calendarCss,\n      window: targetWindow,\n    });\n    const {\n      children,\n      className,\n      selectedDate,\n      defaultSelectedDate,\n      visibleMonth: visibleMonthProp,\n      timeZone,\n      locale,\n      defaultVisibleMonth,\n      onSelectedDateChange,\n      onVisibleMonthChange,\n      hideOutOfRangeDates,\n      isDayUnselectable,\n      isDayHighlighted,\n      isDayDisabled,\n      minDate,\n      maxDate,\n      selectionVariant,\n      onHoveredDateChange,\n      hoveredDate,\n      ...propsRest\n    } = props;\n    let startDateOffset: CalendarOffsetProps[\"startDateOffset\"];\n    let endDateOffset: CalendarOffsetProps[\"startDateOffset\"];\n    let rest: Partial<typeof props>;\n    if (selectionVariant === \"offset\") {\n      ({ startDateOffset, endDateOffset, ...rest } =\n        propsRest as CalendarOffsetProps);\n    } else {\n      rest = propsRest;\n    }\n    // biome-ignore lint/suspicious/noExplicitAny: type guard\n    const useCalendarProps: any = {\n      selectedDate,\n      defaultSelectedDate,\n      visibleMonth: visibleMonthProp,\n      timeZone,\n      locale,\n      defaultVisibleMonth,\n      onSelectedDateChange,\n      onVisibleMonthChange,\n      isDayUnselectable,\n      isDayHighlighted,\n      isDayDisabled,\n      minDate,\n      maxDate,\n      selectionVariant,\n      onHoveredDateChange,\n      hideOutOfRangeDates,\n      hoveredDate,\n      startDateOffset,\n      endDateOffset,\n    };\n    const { state, helpers } = useCalendar(useCalendarProps);\n    const calendarLabel = new DateFormatter(state.locale, {\n      month: \"long\",\n      year: \"numeric\",\n    }).format(state.visibleMonth.toDate(state.timeZone));\n\n    return (\n      <CalendarContext.Provider\n        value={{\n          state,\n          helpers,\n        }}\n      >\n        <div\n          className={clsx(withBaseName(), className)}\n          role=\"application\"\n          aria-label={calendarLabel}\n          ref={ref}\n          {...rest}\n        >\n          {children}\n        </div>\n      </CalendarContext.Provider>\n    );\n  },\n);\n"],"names":["Calendar","calendarCss"],"mappings":";;;;;;;;;;;AA6FA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA;AAEzC,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,SAAS,CAAA,KAAA,EAAO,GAAK,EAAA;AAC5B,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,eAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AACD,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,mBAAA;AAAA,MACA,YAAc,EAAA,gBAAA;AAAA,MACd,QAAA;AAAA,MACA,MAAA;AAAA,MACA,mBAAA;AAAA,MACA,oBAAA;AAAA,MACA,oBAAA;AAAA,MACA,mBAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,aAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,gBAAA;AAAA,MACA,mBAAA;AAAA,MACA,WAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AACJ,IAAI,IAAA,eAAA;AACJ,IAAI,IAAA,aAAA;AACJ,IAAI,IAAA,IAAA;AACJ,IAAA,IAAI,qBAAqB,QAAU,EAAA;AACjC,MAAA,CAAC,EAAE,eAAA,EAAiB,aAAe,EAAA,GAAG,MACpC,GAAA,SAAA;AAAA,KACG,MAAA;AACL,MAAO,IAAA,GAAA,SAAA;AAAA;AAGT,IAAA,MAAM,gBAAwB,GAAA;AAAA,MAC5B,YAAA;AAAA,MACA,mBAAA;AAAA,MACA,YAAc,EAAA,gBAAA;AAAA,MACd,QAAA;AAAA,MACA,MAAA;AAAA,MACA,mBAAA;AAAA,MACA,oBAAA;AAAA,MACA,oBAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,aAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,gBAAA;AAAA,MACA,mBAAA;AAAA,MACA,mBAAA;AAAA,MACA,WAAA;AAAA,MACA,eAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM,EAAE,KAAA,EAAO,OAAQ,EAAA,GAAI,YAAY,gBAAgB,CAAA;AACvD,IAAA,MAAM,aAAgB,GAAA,IAAI,aAAc,CAAA,KAAA,CAAM,MAAQ,EAAA;AAAA,MACpD,KAAO,EAAA,MAAA;AAAA,MACP,IAAM,EAAA;AAAA,KACP,EAAE,MAAO,CAAA,KAAA,CAAM,aAAa,MAAO,CAAA,KAAA,CAAM,QAAQ,CAAC,CAAA;AAEnD,IACE,uBAAA,GAAA;AAAA,MAAC,eAAgB,CAAA,QAAA;AAAA,MAAhB;AAAA,QACC,KAAO,EAAA;AAAA,UACL,KAAA;AAAA,UACA;AAAA,SACF;AAAA,QAEA,QAAA,kBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,YACzC,IAAK,EAAA,aAAA;AAAA,YACL,YAAY,EAAA,aAAA;AAAA,YACZ,GAAA;AAAA,YACC,GAAG,IAAA;AAAA,YAEH;AAAA;AAAA;AACH;AAAA,KACF;AAAA;AAGN;;;;"}
+{"version":3,"file":"Calendar.js","sources":["../src/calendar/Calendar.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\nimport { CalendarContext } from \"./internal/CalendarContext\";\nimport {\n  type UseCalendarMultiSelectProps,\n  type UseCalendarOffsetProps,\n  type UseCalendarRangeProps,\n  type UseCalendarSingleProps,\n  useCalendar,\n} from \"./useCalendar\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport { useLocalization } from \"../localization-provider\";\nimport calendarCss from \"./Calendar.css\";\n\n/**\n * Base props for the Calendar component.\n */\nexport interface CalendarBaseProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content to be rendered inside the Calendar.\n   */\n  children: ReactNode;\n  /**\n   * If `true`, hides dates that are out of the selectable range.\n   */\n  hideOutOfRangeDates?: boolean;\n  /**\n   * Locale for date formatting\n   */\n  locale?: any;\n}\n\n/**\n * Props for the Calendar component with single date selection.\n */\nexport interface CalendarSingleProps<TDate extends DateFrameworkType>\n  extends CalendarBaseProps,\n    UseCalendarSingleProps<TDate> {\n  /**\n   * The selection variant, set to \"single\".\n   */\n  selectionVariant: \"single\";\n}\n\n/**\n * Props for the Calendar component with date range selection.\n */\nexport interface CalendarRangeProps<TDate extends DateFrameworkType>\n  extends CalendarBaseProps,\n    UseCalendarRangeProps<TDate> {\n  /**\n   * The selection variant, set to \"range\".\n   */\n  selectionVariant: \"range\";\n}\n\n/**\n * Props for the Calendar component with multi-select date selection.\n */\nexport interface CalendarMultiSelectProps<TDate extends DateFrameworkType>\n  extends CalendarBaseProps,\n    UseCalendarMultiSelectProps<TDate> {\n  /**\n   * The selection variant, set to \"multiselect\".\n   */\n  selectionVariant: \"multiselect\";\n}\n\n/**\n * Props for the Calendar component with offset date selection.\n */\nexport interface CalendarOffsetProps<TDate extends DateFrameworkType>\n  extends CalendarBaseProps,\n    UseCalendarOffsetProps<TDate> {\n  /**\n   * The selection variant, set to \"offset\".\n   */\n  selectionVariant: \"offset\";\n}\n\n/**\n * Type representing the props for the Calendar component with various selection variants.\n */\nexport type CalendarProps<TDate extends DateFrameworkType> =\n  | CalendarSingleProps<TDate>\n  | CalendarRangeProps<TDate>\n  | CalendarMultiSelectProps<TDate>\n  | CalendarOffsetProps<TDate>;\n\nconst withBaseName = makePrefixer(\"saltCalendar\");\n\nexport const Calendar = forwardRef<HTMLDivElement, CalendarProps<any>>(\n  <TDate extends DateFrameworkType>(\n    props: CalendarProps<TDate>,\n    ref: React.Ref<HTMLDivElement>,\n  ) => {\n    const targetWindow = useWindow();\n    const { dateAdapter } = useLocalization<TDate>();\n    useComponentCssInjection({\n      testId: \"salt-calendar\",\n      css: calendarCss,\n      window: targetWindow,\n    });\n    const {\n      children,\n      className,\n      selectedDate,\n      defaultSelectedDate,\n      visibleMonth: visibleMonthProp,\n      defaultVisibleMonth,\n      onSelectionChange,\n      onVisibleMonthChange,\n      hideOutOfRangeDates,\n      isDayUnselectable,\n      isDayHighlighted,\n      isDayDisabled,\n      locale,\n      minDate,\n      maxDate,\n      selectionVariant,\n      onHoveredDateChange,\n      hoveredDate,\n      ...propsRest\n    } = props;\n    let startDateOffset: CalendarOffsetProps<TDate>[\"startDateOffset\"];\n    let endDateOffset: CalendarOffsetProps<TDate>[\"startDateOffset\"];\n    let rest: Partial<typeof props>;\n    if (selectionVariant === \"offset\") {\n      ({ startDateOffset, endDateOffset, ...rest } =\n        propsRest as CalendarOffsetProps<TDate>);\n    } else {\n      rest = propsRest;\n    }\n    // biome-ignore lint/suspicious/noExplicitAny: type guard\n    const useCalendarProps: any = {\n      selectedDate,\n      defaultSelectedDate,\n      visibleMonth: visibleMonthProp,\n      defaultVisibleMonth,\n      onSelectionChange,\n      onVisibleMonthChange,\n      isDayUnselectable,\n      isDayHighlighted,\n      isDayDisabled,\n      locale,\n      minDate,\n      maxDate,\n      selectionVariant,\n      onHoveredDateChange,\n      hideOutOfRangeDates,\n      hoveredDate,\n      startDateOffset,\n      endDateOffset,\n    };\n    const { state, helpers } = useCalendar<TDate>(useCalendarProps);\n    const calendarLabel = dateAdapter.format(\n      state.visibleMonth,\n      \"MMMM YYYY\",\n      locale,\n    );\n\n    return (\n      <CalendarContext.Provider\n        value={{\n          state,\n          helpers,\n        }}\n      >\n        <div\n          className={clsx(withBaseName(), className)}\n          role=\"application\"\n          aria-label={calendarLabel}\n          ref={ref}\n          {...rest}\n        >\n          {children}\n        </div>\n      </CalendarContext.Provider>\n    );\n  },\n);\n"],"names":["calendarCss"],"mappings":";;;;;;;;;;;AAkGA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA;AAEzC,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,CACE,OACA,GACG,KAAA;AACH,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAM,MAAA,EAAE,WAAY,EAAA,GAAI,eAAuB,EAAA;AAC/C,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,eAAA;AAAA,MACR,GAAK,EAAAA,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AACD,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,mBAAA;AAAA,MACA,YAAc,EAAA,gBAAA;AAAA,MACd,mBAAA;AAAA,MACA,iBAAA;AAAA,MACA,oBAAA;AAAA,MACA,mBAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,gBAAA;AAAA,MACA,mBAAA;AAAA,MACA,WAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AACJ,IAAI,IAAA,eAAA;AACJ,IAAI,IAAA,aAAA;AACJ,IAAI,IAAA,IAAA;AACJ,IAAA,IAAI,qBAAqB,QAAU,EAAA;AACjC,MAAA,CAAC,EAAE,eAAA,EAAiB,aAAe,EAAA,GAAG,MACpC,GAAA,SAAA;AAAA,KACG,MAAA;AACL,MAAO,IAAA,GAAA,SAAA;AAAA;AAGT,IAAA,MAAM,gBAAwB,GAAA;AAAA,MAC5B,YAAA;AAAA,MACA,mBAAA;AAAA,MACA,YAAc,EAAA,gBAAA;AAAA,MACd,mBAAA;AAAA,MACA,iBAAA;AAAA,MACA,oBAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,gBAAA;AAAA,MACA,mBAAA;AAAA,MACA,mBAAA;AAAA,MACA,WAAA;AAAA,MACA,eAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM,EAAE,KAAA,EAAO,OAAQ,EAAA,GAAI,YAAmB,gBAAgB,CAAA;AAC9D,IAAA,MAAM,gBAAgB,WAAY,CAAA,MAAA;AAAA,MAChC,KAAM,CAAA,YAAA;AAAA,MACN,WAAA;AAAA,MACA;AAAA,KACF;AAEA,IACE,uBAAA,GAAA;AAAA,MAAC,eAAgB,CAAA,QAAA;AAAA,MAAhB;AAAA,QACC,KAAO,EAAA;AAAA,UACL,KAAA;AAAA,UACA;AAAA,SACF;AAAA,QAEA,QAAA,kBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,YACzC,IAAK,EAAA,aAAA;AAAA,YACL,YAAY,EAAA,aAAA;AAAA,YACZ,GAAA;AAAA,YACC,GAAG,IAAA;AAAA,YAEH;AAAA;AAAA;AACH;AAAA,KACF;AAAA;AAGN;;;;"}

package/dist-es/calendar/CalendarGrid.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltCalendarGrid-grid {\n  display: grid;\n  grid-auto-flow: column;\n}\n\n.saltCalendarGrid-grid > * {\n  position: absolute;\n  left: 0;\n  width: 100%;\n}\n\n.saltCalendarGrid-grid > :nth-child(2) {\n  position: relative;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=CalendarGrid.css.js.map

package/dist-es/calendar/CalendarGrid.css.js.map

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

package/dist-es/calendar/CalendarGrid.js

@@ -0,0 +1,105 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, useIsomorphicLayoutEffect } from '@salt-ds/core';
+import { forwardRef, useRef, useCallback, useMemo } from 'react';
+import { useCalendarContext } from './internal/CalendarContext.js';
+import { CalendarMonth } from './internal/CalendarMonth.js';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { useLocalization } from '../localization-provider/LocalizationProvider.js';
+import css_248z from './CalendarGrid.css.js';
+import { monthDiff } from './internal/utils.js';
+
+const withBaseName = makePrefixer("saltCalendarGrid");
+const CalendarGrid = forwardRef(
+  (props, ref) => {
+    const {
+      onFocus,
+      onBlur,
+      getCalendarMonthProps = () => void 0,
+      ...rest
+    } = props;
+    const { dateAdapter } = useLocalization();
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-calendar-grid",
+      css: css_248z,
+      window: targetWindow
+    });
+    const {
+      state: { visibleMonth, locale },
+      helpers: { setCalendarFocused }
+    } = useCalendarContext();
+    const containerRef = useRef(null);
+    const diffIndex = (a, b) => monthDiff(dateAdapter, a, b);
+    const { current: baseIndex } = useRef(visibleMonth);
+    useIsomorphicLayoutEffect(() => {
+      if (containerRef.current) {
+        containerRef.current.style.transform = `translate3d(${diffIndex(baseIndex, visibleMonth) * -101}%, 0, 0)`;
+      }
+    });
+    const getMonths = useCallback(
+      (month) => {
+        return [
+          dateAdapter.subtract(month, { months: 1 }),
+          month,
+          dateAdapter.add(month, { months: 1 })
+        ];
+      },
+      [dateAdapter.subtract]
+    );
+    const handleFocus = useCallback(
+      (event) => {
+        setCalendarFocused(true);
+        onFocus == null ? void 0 : onFocus(event);
+      },
+      [setCalendarFocused, onFocus]
+    );
+    const handleBlur = useCallback(
+      (event) => {
+        setCalendarFocused(false);
+        onBlur == null ? void 0 : onBlur(event);
+      },
+      [setCalendarFocused, onBlur]
+    );
+    const months = useMemo(() => {
+      return getMonths(visibleMonth);
+    }, [dateAdapter.format(visibleMonth)]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: withBaseName(),
+        tabIndex: -1,
+        style: {
+          overflowX: "hidden",
+          position: "relative"
+        },
+        ref,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: withBaseName("grid"),
+            ref: containerRef,
+            onBlur: handleBlur,
+            onFocus: handleFocus,
+            ...rest,
+            children: months.map((date, index) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: withBaseName("slide"),
+                style: {
+                  transform: `translateX(${diffIndex(date, baseIndex) * -101}%)`
+                },
+                "aria-hidden": index !== 1 ? "true" : void 0,
+                children: /* @__PURE__ */ jsx(CalendarMonth, { ...getCalendarMonthProps(date), date })
+              },
+              dateAdapter.format(date, locale)
+            ))
+          }
+        )
+      }
+    );
+  }
+);
+
+export { CalendarGrid };
+//# sourceMappingURL=CalendarGrid.js.map

package/dist-es/calendar/CalendarGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarGrid.js","sources":["../src/calendar/CalendarGrid.tsx"],"sourcesContent":["import { makePrefixer, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport {\n  type ComponentPropsWithoutRef,\n  type FocusEventHandler,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { useCalendarContext } from \"./internal/CalendarContext\";\nimport {\n  CalendarMonth,\n  type CalendarMonthProps,\n} from \"./internal/CalendarMonth\";\n\nimport type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useLocalization } from \"../localization-provider\";\nimport calendarGridCss from \"./CalendarGrid.css\";\nimport { monthDiff } from \"./internal/utils\";\n\n/**\n * Props for the CalendarGrid component.\n */\nexport interface CalendarGridProps<TDate extends DateFrameworkType>\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Props getter to pass to each CalendarMonth element\n   */\n  getCalendarMonthProps?: (\n    date: TDate,\n  ) => Omit<CalendarMonthProps<TDate>, \"date\">;\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarGrid\");\n\nexport const CalendarGrid = forwardRef<HTMLDivElement, CalendarGridProps<any>>(\n  <TDate extends DateFrameworkType>(\n    props: CalendarGridProps<TDate>,\n    ref: React.Ref<HTMLDivElement>,\n  ) => {\n    const {\n      onFocus,\n      onBlur,\n      getCalendarMonthProps = () => undefined,\n      ...rest\n    } = props;\n\n    const { dateAdapter } = useLocalization<TDate>();\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-calendar-grid\",\n      css: calendarGridCss,\n      window: targetWindow,\n    });\n\n    const {\n      state: { visibleMonth, locale },\n      helpers: { setCalendarFocused },\n    } = useCalendarContext<TDate>();\n    const containerRef = useRef<HTMLDivElement>(null);\n    const diffIndex = (a: TDate, b: TDate) =>\n      monthDiff<TDate>(dateAdapter, a, b);\n\n    const { current: baseIndex } = useRef(visibleMonth);\n\n    useIsomorphicLayoutEffect(() => {\n      if (containerRef.current) {\n        containerRef.current.style.transform = `translate3d(${\n          diffIndex(baseIndex, visibleMonth) * -101 // needs to be higher than 100% so the next month doesn't show on the edges\n        }%, 0, 0)`;\n      }\n    });\n\n    const getMonths = useCallback(\n      (month: TDate) => {\n        return [\n          dateAdapter.subtract(month, { months: 1 }),\n          month,\n          dateAdapter.add(month, { months: 1 }),\n        ];\n      },\n      [dateAdapter.subtract],\n    );\n\n    const handleFocus: FocusEventHandler<HTMLDivElement> = useCallback(\n      (event) => {\n        setCalendarFocused(true);\n        onFocus?.(event);\n      },\n      [setCalendarFocused, onFocus],\n    );\n\n    const handleBlur: FocusEventHandler<HTMLDivElement> = useCallback(\n      (event) => {\n        setCalendarFocused(false);\n        onBlur?.(event);\n      },\n      [setCalendarFocused, onBlur],\n    );\n\n    const months = useMemo(() => {\n      return getMonths(visibleMonth);\n    }, [dateAdapter.format(visibleMonth)]);\n\n    return (\n      <div\n        className={withBaseName()}\n        tabIndex={-1} // https://bugzilla.mozilla.org/show_bug.cgi?id=1069739\n        style={{\n          overflowX: \"hidden\",\n          position: \"relative\",\n        }}\n        ref={ref}\n      >\n        <div\n          className={withBaseName(\"grid\")}\n          ref={containerRef}\n          onBlur={handleBlur}\n          onFocus={handleFocus}\n          {...rest}\n        >\n          {months.map((date, index) => (\n            <div\n              key={dateAdapter.format(date, locale)}\n              className={withBaseName(\"slide\")}\n              style={{\n                transform: `translateX(${diffIndex(date, baseIndex) * -101}%)`,\n              }}\n              aria-hidden={index !== 1 ? \"true\" : undefined}\n            >\n              <CalendarMonth {...getCalendarMonthProps(date)} date={date} />\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["calendarGridCss"],"mappings":"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"}