@cimpress-ui/react 0.3.0 → 1.0.0

package/dist/esm/components/date-picker/date-picker-calendar.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getLocalTimeZone, toCalendarDate, today } from '@internationalized/date';
+import { useContext, useState } from 'react';
+import { Calendar as RACCalendar, DatePickerStateContext as RACDatePickerStateContext, } from 'react-aria-components';
+import { MonthView } from './views/month/month-view.js';
+import { MultiYearView } from './views/multi-year/multi-year-view.js';
+import { DatePickerViewProvider } from './views/view-provider.js';
+import { YearView } from './views/year/year-view.js';
+/** @internal */
+export function DatePickerCalendar({ focusedValue, defaultFocusedValue, placeholderValue, }) {
+    const datePickerState = useContext(RACDatePickerStateContext);
+    const [view, setView] = useState('month');
+    const [focusedDate, setFocusedDate] = useState(() => toCalendarDate(focusedValue ?? datePickerState?.value ?? defaultFocusedValue ?? placeholderValue ?? today(getLocalTimeZone())));
+    // `RACCalendar` has to be rendered unconditionally so that we have access to the calendar state.
+    // However, `RACCalendar` assumes that it's always displaying the month view, and keeps announcing the focused day to screen readers on every change.
+    // To prevent this, we control the focused date in `RACCalendar` with a separate state that isn't updated when the month view is hidden.
+    const [monthViewFocusedDate, setMonthViewFocusedDate] = useState(focusedDate);
+    return (_jsx(DatePickerViewProvider, { currentView: view, switchToView: setView, focusedDate: focusedDate, setFocusedDate: setFocusedDate, children: _jsx(RACCalendar, { focusedValue: view === 'month' ? focusedDate : monthViewFocusedDate, onFocusChange: (date) => {
+                setMonthViewFocusedDate(date);
+                setFocusedDate(date);
+            }, children: view === 'month' ? (_jsx(MonthView, {})) : view === 'year' ? (_jsx(YearView, {})) : view === 'multi-year' ? (_jsx(MultiYearView, {})) : (`Unsupported view '${view}'`) }) }));
+}
+//# sourceMappingURL=date-picker-calendar.js.map

package/dist/esm/components/date-picker/date-picker-calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-calendar.js","sourceRoot":"","sources":["../../../../src/components/date-picker/date-picker-calendar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,gBAAgB,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AACrG,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EACL,QAAQ,IAAI,WAAW,EAIvB,sBAAsB,IAAI,yBAAyB,GACpD,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAuB,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AACvF,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAMrD,gBAAgB;AAChB,MAAM,UAAU,kBAAkB,CAAyB,EACzD,YAAY,EACZ,mBAAmB,EACnB,gBAAgB,GACW;IAC3B,MAAM,eAAe,GAAG,UAAU,CAAC,yBAAyB,CAAC,CAAC;IAC9D,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAiB,OAAO,CAAC,CAAC;IAC1D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAe,GAAG,EAAE,CAChE,cAAc,CACZ,YAAY,IAAI,eAAe,EAAE,KAAK,IAAI,mBAAmB,IAAI,gBAAgB,IAAI,KAAK,CAAC,gBAAgB,EAAE,CAAC,CAC/G,CACF,CAAC;IAEF,iGAAiG;IACjG,qJAAqJ;IACrJ,wIAAwI;IACxI,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAe,WAAW,CAAC,CAAC;IAE5F,OAAO,CACL,KAAC,sBAAsB,IACrB,WAAW,EAAE,IAAI,EACjB,YAAY,EAAE,OAAO,EACrB,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,YAE9B,KAAC,WAAW,IACV,YAAY,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,oBAAoB,EACnE,aAAa,EAAE,CAAC,IAAI,EAAE,EAAE;gBACtB,uBAAuB,CAAC,IAAI,CAAC,CAAC;gBAC9B,cAAc,CAAC,IAAI,CAAC,CAAC;YACvB,CAAC,YAEA,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,CAClB,KAAC,SAAS,KAAG,CACd,CAAC,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CACpB,KAAC,QAAQ,KAAG,CACb,CAAC,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,CAC1B,KAAC,aAAa,KAAG,CAClB,CAAC,CAAC,CAAC,CACF,qBAAqB,IAAI,GAAG,CAC7B,GACW,GACS,CAC1B,CAAC;AACJ,CAAC","sourcesContent":["import { type CalendarDate, getLocalTimeZone, toCalendarDate, today } from '@internationalized/date';\nimport { useContext, useState } from 'react';\nimport {\n  Calendar as RACCalendar,\n  type CalendarProps as RACCalendarProps,\n  type DateValue as RACDateValue,\n  type DatePickerProps as RACDatePickerProps,\n  DatePickerStateContext as RACDatePickerStateContext,\n} from 'react-aria-components';\nimport { MonthView } from './views/month/month-view.js';\nimport { MultiYearView } from './views/multi-year/multi-year-view.js';\nimport { type DatePickerView, DatePickerViewProvider } from './views/view-provider.js';\nimport { YearView } from './views/year/year-view.js';\n\ninterface DatePickerCalendarProps<T extends RACDateValue>\n  extends Pick<RACDatePickerProps<T>, 'placeholderValue'>,\n    Pick<RACCalendarProps<T>, 'focusedValue' | 'defaultFocusedValue'> {}\n\n/** @internal */\nexport function DatePickerCalendar<T extends RACDateValue>({\n  focusedValue,\n  defaultFocusedValue,\n  placeholderValue,\n}: DatePickerCalendarProps<T>) {\n  const datePickerState = useContext(RACDatePickerStateContext);\n  const [view, setView] = useState<DatePickerView>('month');\n  const [focusedDate, setFocusedDate] = useState<CalendarDate>(() =>\n    toCalendarDate(\n      focusedValue ?? datePickerState?.value ?? defaultFocusedValue ?? placeholderValue ?? today(getLocalTimeZone()),\n    ),\n  );\n\n  // `RACCalendar` has to be rendered unconditionally so that we have access to the calendar state.\n  // However, `RACCalendar` assumes that it's always displaying the month view, and keeps announcing the focused day to screen readers on every change.\n  // To prevent this, we control the focused date in `RACCalendar` with a separate state that isn't updated when the month view is hidden.\n  const [monthViewFocusedDate, setMonthViewFocusedDate] = useState<CalendarDate>(focusedDate);\n\n  return (\n    <DatePickerViewProvider\n      currentView={view}\n      switchToView={setView}\n      focusedDate={focusedDate}\n      setFocusedDate={setFocusedDate}\n    >\n      <RACCalendar\n        focusedValue={view === 'month' ? focusedDate : monthViewFocusedDate}\n        onFocusChange={(date) => {\n          setMonthViewFocusedDate(date);\n          setFocusedDate(date);\n        }}\n      >\n        {view === 'month' ? (\n          <MonthView />\n        ) : view === 'year' ? (\n          <YearView />\n        ) : view === 'multi-year' ? (\n          <MultiYearView />\n        ) : (\n          `Unsupported view '${view}'`\n        )}\n      </RACCalendar>\n    </DatePickerViewProvider>\n  );\n}\n"]}

package/dist/esm/components/date-picker/date-picker.d.ts

@@ -0,0 +1,17 @@
+import type { CalendarDate, CalendarDateTime, ZonedDateTime } from '@internationalized/date';
+import { type CalendarProps as RACCalendarProps, type DatePickerProps as RACDatePickerProps } from 'react-aria-components';
+import type { CommonProps, FieldProps } from '../types.js';
+/** Represents a date with optional time and timezone components. */
+export type DateValue = CalendarDate | CalendarDateTime | ZonedDateTime;
+/** Maps a date value to a specific subtype depending on which components it contains. */
+export type MappedDateValue<T> = T extends ZonedDateTime ? ZonedDateTime : T extends CalendarDateTime ? CalendarDateTime : T extends CalendarDate ? CalendarDate : never;
+export interface DatePickerProps<T extends DateValue> extends CommonProps, FieldProps<MappedDateValue<T>>, Pick<RACDatePickerProps<T>, 'value' | 'defaultValue' | 'placeholderValue' | 'onChange' | 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'autoFocus' | 'onFocus' | 'onBlur' | 'isOpen' | 'defaultOpen' | 'onOpenChange' | 'minValue' | 'maxValue' | 'isDateUnavailable' | 'granularity' | 'firstDayOfWeek'>, Pick<RACCalendarProps<T>, 'focusedValue' | 'defaultFocusedValue'> {
+}
+/**
+ * Allows users to enter or select a date and time value.
+ *
+ * See [date picker usage guidelines](https://ui.cimpress.io/components/date-picker/).
+ */
+declare const _DatePicker: <T extends DateValue>(props: DatePickerProps<T> & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _DatePicker as DatePicker };
+//# sourceMappingURL=date-picker.d.ts.map

package/dist/esm/components/date-picker/date-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../../src/components/date-picker/date-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAG7F,OAAO,EACL,KAAK,aAAa,IAAI,gBAAgB,EAGtC,KAAK,eAAe,IAAI,kBAAkB,EAM3C,MAAM,uBAAuB,CAAC;AAQ/B,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAI3D,oEAAoE;AACpE,MAAM,MAAM,SAAS,GAAG,YAAY,GAAG,gBAAgB,GAAG,aAAa,CAAC;AAExE,yFAAyF;AACzF,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,CAAC,SAAS,aAAa,GACpD,aAAa,GACb,CAAC,SAAS,gBAAgB,GACxB,gBAAgB,GAChB,CAAC,SAAS,YAAY,GACpB,YAAY,GACZ,KAAK,CAAC;AAEd,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,SAAS,CAClD,SAAQ,WAAW,EACjB,UAAU,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,EAC9B,IAAI,CACF,kBAAkB,CAAC,CAAC,CAAC,EACnB,OAAO,GACP,cAAc,GACd,kBAAkB,GAClB,UAAU,GACV,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,WAAW,GACX,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,aAAa,GACb,cAAc,GACd,UAAU,GACV,UAAU,GACV,mBAAmB,GACnB,aAAa,GACb,gBAAgB,CACnB,EACD,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,cAAc,GAAG,qBAAqB,CAAC;CAAG;AAqExE;;;;GAIG;AACH,QAAA,MAAM,WAAW,GAxEG,CAAC,SAAS,SAAS,mKAwEiC,CAAC;AAEzE,OAAO,EAAE,WAAW,IAAI,UAAU,EAAE,CAAC"}

package/dist/esm/components/date-picker/date-picker.js

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useContext } from 'react';
+import { DateInput as RACDateInput, DatePicker as RACDatePicker, DatePickerStateContext as RACDatePickerStateContext, DateSegment as RACDateSegment, Dialog as RACDialog, Group as RACGroup, Popover as RACPopover, } from 'react-aria-components';
+import { forwardRef } from '../../forward-ref.js';
+import { useLocalizedMessages } from '../../i18n/index.js';
+import { IconCalendarEmpty } from '../../icons/index.js';
+import { useProductionWarning } from '../../utils/use-production-warning.js';
+import { withStyleProps } from '../../with-style-props.js';
+import { IconButton } from '../button/icon-button.js';
+import { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';
+import { textStyle } from '../typography/utils.js';
+import { DatePickerCalendar } from './date-picker-calendar.js';
+function DatePicker({ label, description, error: errorMessage, focusedValue, defaultFocusedValue, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+    useProductionWarning(() => {
+        if (!label && !ariaLabel && !ariaLabelledBy) {
+            console.warn('DatePicker requires one of label / aria-label / aria-labelledby for accessibility');
+        }
+    }, [label, ariaLabel, ariaLabelledBy]);
+    const messages = useLocalizedMessages('datePicker');
+    return (_jsxs(RACDatePicker, { ...props, ref: ref, className: clsx('cim-date-picker', UNSAFE_className), style: UNSAFE_style, children: [_jsx(FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), _jsxs(RACGroup, { className: "cim-date-picker-input-group", "data-readonly": props.isReadOnly || undefined, children: [_jsx(RACDateInput, { className: clsx('cim-date-picker-input', textStyle({ variant: 'body' })), children: (segment) => (_jsx("span", { className: "cim-date-picker-segment-wrapper", children: _jsx(RACDateSegment, { segment: segment }) })) }), _jsxs("div", { className: "cim-date-picker-input-controls", children: [_jsx(DatePickerClearButton, { isDisabled: props.isDisabled || props.isReadOnly }), _jsx(IconButton, { icon: _jsx(IconCalendarEmpty, {}), "aria-label": messages.format('openCalendar'), variant: "tertiary", size: "small" })] })] }), _jsx(FormFieldError, { children: errorMessage }), _jsx(FormFieldDescription, { children: description }), _jsx(RACPopover, { className: "cim-date-picker-popover", placement: "bottom end", offset: 5, containerPadding: 16, "data-cim-style-root": true, children: _jsx(RACDialog, { children: _jsx(DatePickerCalendar, { focusedValue: focusedValue, defaultFocusedValue: defaultFocusedValue, placeholderValue: props.placeholderValue }) }) })] }));
+}
+/**
+ * Allows users to enter or select a date and time value.
+ *
+ * See [date picker usage guidelines](https://ui.cimpress.io/components/date-picker/).
+ */
+const _DatePicker = withStyleProps(forwardRef(DatePicker), 'DatePicker');
+export { _DatePicker as DatePicker };
+function DatePickerClearButton({ isDisabled }) {
+    const datePickerState = useContext(RACDatePickerStateContext);
+    const messages = useLocalizedMessages('datePicker');
+    if (!datePickerState.value) {
+        return null;
+    }
+    return (_jsx(IconButton
+    // Don't inherit default Button behavior from DatePicker
+    , { 
+        // Don't inherit default Button behavior from DatePicker
+        slot: null, UNSAFE_className: "cim-date-picker-clear", "aria-label": messages.format('clearValue'), onPress: () => datePickerState.setValue(null), icon: _jsx(IconCloseDetached, {}), variant: "tertiary", size: "small", isDisabled: isDisabled }));
+}
+// TODO: use one of our standard icons instead of this custom one
+function IconCloseDetached() {
+    return (_jsx("svg", { viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg", className: "cim-icon", fill: "currentcolor", "data-icon": true, children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.21967 0.21967C0.512563 -0.0732233 0.987437 -0.0732233 1.28033 0.21967L6 4.93934L10.7197 0.21967C11.0126 -0.0732233 11.4874 -0.0732233 11.7803 0.21967C12.0732 0.512563 12.0732 0.987437 11.7803 1.28033L7.06066 6L11.7803 10.7197C12.0732 11.0126 12.0732 11.4874 11.7803 11.7803C11.4874 12.0732 11.0126 12.0732 10.7197 11.7803L6 7.06066L1.28033 11.7803C0.987437 12.0732 0.512563 12.0732 0.21967 11.7803C-0.0732233 11.4874 -0.0732233 11.0126 0.21967 10.7197L4.93934 6L0.21967 1.28033C-0.0732233 0.987437 -0.0732233 0.512563 0.21967 0.21967Z" }) }));
+}
+//# sourceMappingURL=date-picker.js.map

package/dist/esm/components/date-picker/date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../../../src/components/date-picker/date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport type { CalendarDate, CalendarDateTime, ZonedDateTime } from '@internationalized/date';\nimport clsx from 'clsx';\nimport { useContext, type ForwardedRef } from 'react';\nimport {\n  type CalendarProps as RACCalendarProps,\n  DateInput as RACDateInput,\n  DatePicker as RACDatePicker,\n  type DatePickerProps as RACDatePickerProps,\n  DatePickerStateContext as RACDatePickerStateContext,\n  DateSegment as RACDateSegment,\n  Dialog as RACDialog,\n  Group as RACGroup,\n  Popover as RACPopover,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.js';\nimport { IconCalendarEmpty } from '../../icons/index.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { IconButton } from '../button/icon-button.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CommonProps, FieldProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\nimport { DatePickerCalendar } from './date-picker-calendar.js';\n\n/** Represents a date with optional time and timezone components. */\nexport type DateValue = CalendarDate | CalendarDateTime | ZonedDateTime;\n\n/** Maps a date value to a specific subtype depending on which components it contains. */\nexport type MappedDateValue<T> = T extends ZonedDateTime\n  ? ZonedDateTime\n  : T extends CalendarDateTime\n    ? CalendarDateTime\n    : T extends CalendarDate\n      ? CalendarDate\n      : never;\n\nexport interface DatePickerProps<T extends DateValue>\n  extends CommonProps,\n    FieldProps<MappedDateValue<T>>,\n    Pick<\n      RACDatePickerProps<T>,\n      | 'value'\n      | 'defaultValue'\n      | 'placeholderValue'\n      | 'onChange'\n      | 'isDisabled'\n      | 'isRequired'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'autoFocus'\n      | 'onFocus'\n      | 'onBlur'\n      | 'isOpen'\n      | 'defaultOpen'\n      | 'onOpenChange'\n      | 'minValue'\n      | 'maxValue'\n      | 'isDateUnavailable'\n      | 'granularity'\n      | 'firstDayOfWeek'\n    >,\n    Pick<RACCalendarProps<T>, 'focusedValue' | 'defaultFocusedValue'> {}\n\nfunction DatePicker<T extends DateValue>(\n  {\n    label,\n    description,\n    error: errorMessage,\n    focusedValue,\n    defaultFocusedValue,\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: DatePickerProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useProductionWarning(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn('DatePicker requires one of label / aria-label / aria-labelledby for accessibility');\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  const messages = useLocalizedMessages('datePicker');\n\n  return (\n    <RACDatePicker {...props} ref={ref} className={clsx('cim-date-picker', UNSAFE_className)} style={UNSAFE_style}>\n      <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n        {label}\n      </FormFieldLabel>\n      <RACGroup className=\"cim-date-picker-input-group\" data-readonly={props.isReadOnly || undefined}>\n        <RACDateInput className={clsx('cim-date-picker-input', textStyle({ variant: 'body' }))}>\n          {(segment) => (\n            <span className=\"cim-date-picker-segment-wrapper\">\n              <RACDateSegment segment={segment} />\n            </span>\n          )}\n        </RACDateInput>\n        <div className=\"cim-date-picker-input-controls\">\n          <DatePickerClearButton isDisabled={props.isDisabled || props.isReadOnly} />\n          <IconButton\n            icon={<IconCalendarEmpty />}\n            aria-label={messages.format('openCalendar')}\n            variant=\"tertiary\"\n            size=\"small\"\n          />\n        </div>\n      </RACGroup>\n      <FormFieldError>{errorMessage}</FormFieldError>\n      <FormFieldDescription>{description}</FormFieldDescription>\n      <RACPopover\n        className=\"cim-date-picker-popover\"\n        placement=\"bottom end\"\n        offset={5} // 1px border + 4px actual offset\n        containerPadding={16}\n        data-cim-style-root\n      >\n        <RACDialog>\n          <DatePickerCalendar<T>\n            focusedValue={focusedValue}\n            defaultFocusedValue={defaultFocusedValue}\n            placeholderValue={props.placeholderValue}\n          />\n        </RACDialog>\n      </RACPopover>\n    </RACDatePicker>\n  );\n}\n\n/**\n * Allows users to enter or select a date and time value.\n *\n * See [date picker usage guidelines](https://ui.cimpress.io/components/date-picker/).\n */\nconst _DatePicker = withStyleProps(forwardRef(DatePicker), 'DatePicker');\n\nexport { _DatePicker as DatePicker };\n\nfunction DatePickerClearButton({ isDisabled }: { isDisabled: boolean | undefined }) {\n  const datePickerState = useContext(RACDatePickerStateContext)!;\n  const messages = useLocalizedMessages('datePicker');\n\n  if (!datePickerState.value) {\n    return null;\n  }\n\n  return (\n    <IconButton\n      // Don't inherit default Button behavior from DatePicker\n      slot={null}\n      UNSAFE_className=\"cim-date-picker-clear\"\n      aria-label={messages.format('clearValue')}\n      onPress={() => datePickerState.setValue(null)}\n      icon={<IconCloseDetached />}\n      variant=\"tertiary\"\n      size=\"small\"\n      isDisabled={isDisabled}\n    />\n  );\n}\n\n// TODO: use one of our standard icons instead of this custom one\nfunction IconCloseDetached() {\n  return (\n    <svg viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg\" className=\"cim-icon\" fill=\"currentcolor\" data-icon>\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M0.21967 0.21967C0.512563 -0.0732233 0.987437 -0.0732233 1.28033 0.21967L6 4.93934L10.7197 0.21967C11.0126 -0.0732233 11.4874 -0.0732233 11.7803 0.21967C12.0732 0.512563 12.0732 0.987437 11.7803 1.28033L7.06066 6L11.7803 10.7197C12.0732 11.0126 12.0732 11.4874 11.7803 11.7803C11.4874 12.0732 11.0126 12.0732 10.7197 11.7803L6 7.06066L1.28033 11.7803C0.987437 12.0732 0.512563 12.0732 0.21967 11.7803C-0.0732233 11.4874 -0.0732233 11.0126 0.21967 10.7197L4.93934 6L0.21967 1.28033C-0.0732233 0.987437 -0.0732233 0.512563 0.21967 0.21967Z\"\n      />\n    </svg>\n  );\n}\n"]}

package/dist/esm/components/date-picker/utils.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=utils.d.ts.map

package/dist/esm/components/date-picker/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/date-picker/utils.ts"],"names":[],"mappings":""}

package/dist/esm/components/date-picker/utils.js

@@ -0,0 +1,26 @@
+import { maxDate, minDate, toCalendarDate } from '@internationalized/date';
+/** @internal */
+export function getEraFormat(date) {
+    return date?.calendar.identifier === 'gregory' && date.era === 'BC' ? 'short' : undefined;
+}
+/** @internal */
+export function isDateInvalid(date, minValue, maxValue) {
+    return (minValue != null && date.compare(minValue) < 0) || (maxValue != null && date.compare(maxValue) > 0);
+}
+/** @internal */
+export function constrainValue(date, minValue, maxValue) {
+    if (minValue) {
+        const newDate = maxDate(date, toCalendarDate(minValue));
+        if (newDate) {
+            date = newDate;
+        }
+    }
+    if (maxValue) {
+        const newDate = minDate(date, toCalendarDate(maxValue));
+        if (newDate) {
+            date = newDate;
+        }
+    }
+    return date;
+}
+//# sourceMappingURL=utils.js.map

package/dist/esm/components/date-picker/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/date-picker/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAqC,MAAM,yBAAyB,CAAC;AAO9G,gBAAgB;AAChB,MAAM,UAAU,YAAY,CAAC,IAA8B;IACzD,OAAO,IAAI,EAAE,QAAQ,CAAC,UAAU,KAAK,SAAS,IAAI,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;AAC5F,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,aAAa,CAAC,IAAe,EAAE,QAA2B,EAAE,QAA2B;IACrG,OAAO,CAAC,QAAQ,IAAI,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;AAC9G,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,cAAc,CAC5B,IAAkB,EAClB,QAA2B,EAC3B,QAA2B;IAE3B,IAAI,QAAQ,EAAE,CAAC;QACb,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC;QACxD,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,GAAG,OAAO,CAAC;QACjB,CAAC;IACH,CAAC;IAED,IAAI,QAAQ,EAAE,CAAC;QACb,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC;QACxD,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,GAAG,OAAO,CAAC;QACjB,CAAC;IACH,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC","sourcesContent":["import { maxDate, minDate, toCalendarDate, type CalendarDate, type DateValue } from '@internationalized/date';\nimport type { Context } from 'react';\nimport type { CalendarStateContext as RACCalendarStateContext } from 'react-aria-components';\n\n/** @internal */\nexport type CalendarState = typeof RACCalendarStateContext extends Context<infer R> ? NonNullable<R> : never;\n\n/** @internal */\nexport function getEraFormat(date: CalendarDate | undefined): 'short' | undefined {\n  return date?.calendar.identifier === 'gregory' && date.era === 'BC' ? 'short' : undefined;\n}\n\n/** @internal */\nexport function isDateInvalid(date: DateValue, minValue?: DateValue | null, maxValue?: DateValue | null): boolean {\n  return (minValue != null && date.compare(minValue) < 0) || (maxValue != null && date.compare(maxValue) > 0);\n}\n\n/** @internal */\nexport function constrainValue(\n  date: CalendarDate,\n  minValue?: DateValue | null,\n  maxValue?: DateValue | null,\n): CalendarDate {\n  if (minValue) {\n    const newDate = maxDate(date, toCalendarDate(minValue));\n    if (newDate) {\n      date = newDate;\n    }\n  }\n\n  if (maxValue) {\n    const newDate = minDate(date, toCalendarDate(maxValue));\n    if (newDate) {\n      date = newDate;\n    }\n  }\n\n  return date;\n}\n"]}

package/dist/esm/components/date-picker/views/month/month-view.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=month-view.d.ts.map

package/dist/esm/components/date-picker/views/month/month-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"month-view.d.ts","sourceRoot":"","sources":["../../../../../../src/components/date-picker/views/month/month-view.tsx"],"names":[],"mappings":""}

package/dist/esm/components/date-picker/views/month/month-view.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { isToday } from '@internationalized/date';
+import clsx from 'clsx';
+import { useContext, useEffect } from 'react';
+import { CalendarCell as RACCalendarCell, CalendarGrid as RACCalendarGrid, CalendarGridBody as RACCalendarGridBody, CalendarGridHeader as RACCalendarGridHeader, CalendarHeaderCell as RACCalendarHeaderCell, CalendarStateContext as RACCalendarStateContext, HeadingContext as RACHeadingContext, } from 'react-aria-components';
+import { useLocalizedMessages } from '../../../../i18n/index.js';
+import { IconChevronLeft, IconChevronRight } from '../../../../icons/index.js';
+import { Button } from '../../../button/button.js';
+import { IconButton } from '../../../button/icon-button.js';
+import { textStyle } from '../../../typography/utils.js';
+import { useDatePickerView } from './../view-provider.js';
+/** @internal */
+export function MonthView() {
+    const state = useContext(RACCalendarStateContext);
+    const { 
+    // @ts-expect-error RACHeadingContext contains a `children` property, but it's not in the types
+    children: title, } = useContext(RACHeadingContext);
+    const { switchToView } = useDatePickerView();
+    const messages = useLocalizedMessages('datePicker');
+    useEffect(() => {
+        state?.setFocused(true);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "cim-date-picker-view-header", children: [_jsx(IconButton, { slot: "previous", "aria-label": messages.format('previousMonth'), icon: _jsx(IconChevronLeft, {}), variant: "tertiary", size: "small" }), _jsx(Button, { slot: null, "aria-label": messages.format('switchToYearView'), variant: "tertiary", onPress: () => switchToView('year'), children: title }), _jsx(IconButton, { slot: "next", "aria-label": messages.format('nextMonth'), icon: _jsx(IconChevronRight, {}), variant: "tertiary", size: "small" })] }), _jsxs(RACCalendarGrid, { className: "cim-date-picker-view-grid", weekdayStyle: "narrow", children: [_jsx(RACCalendarGridHeader, { children: (day) => (_jsx(RACCalendarHeaderCell, { children: _jsx("div", { className: clsx('cim-date-picker-calendar-header-cell', textStyle({ variant: 'medium-semibold', tone: 'base' })), children: day }) })) }), _jsx(RACCalendarGridBody, { children: (date) => {
+                            const isCurrentDate = isToday(date, state.timeZone);
+                            return (_jsx(RACCalendarCell, { className: clsx('cim-date-picker-calendar-cell', textStyle({ variant: isCurrentDate ? 'medium-semibold' : 'medium' })), date: date, "data-current": isCurrentDate || undefined }));
+                        } })] })] }));
+}
+//# sourceMappingURL=month-view.js.map

package/dist/esm/components/date-picker/views/month/month-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"month-view.js","sourceRoot":"","sources":["../../../../../../src/components/date-picker/views/month/month-view.tsx"],"names":[],"mappings":"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","sourcesContent":["import { isToday } from '@internationalized/date';\nimport clsx from 'clsx';\nimport { useContext, useEffect } from 'react';\nimport {\n  CalendarCell as RACCalendarCell,\n  CalendarGrid as RACCalendarGrid,\n  CalendarGridBody as RACCalendarGridBody,\n  CalendarGridHeader as RACCalendarGridHeader,\n  CalendarHeaderCell as RACCalendarHeaderCell,\n  CalendarStateContext as RACCalendarStateContext,\n  HeadingContext as RACHeadingContext,\n} from 'react-aria-components';\nimport { useLocalizedMessages } from '../../../../i18n/index.js';\nimport { IconChevronLeft, IconChevronRight } from '../../../../icons/index.js';\nimport { Button } from '../../../button/button.js';\nimport { IconButton } from '../../../button/icon-button.js';\nimport { textStyle } from '../../../typography/utils.js';\nimport { useDatePickerView } from './../view-provider.js';\n\n/** @internal */\nexport function MonthView() {\n  const state = useContext(RACCalendarStateContext);\n  const {\n    // @ts-expect-error RACHeadingContext contains a `children` property, but it's not in the types\n    children: title,\n  } = useContext(RACHeadingContext);\n  const { switchToView } = useDatePickerView();\n  const messages = useLocalizedMessages('datePicker');\n\n  useEffect(() => {\n    state?.setFocused(true);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return (\n    <>\n      <div className=\"cim-date-picker-view-header\">\n        <IconButton\n          slot=\"previous\"\n          aria-label={messages.format('previousMonth')}\n          icon={<IconChevronLeft />}\n          variant=\"tertiary\"\n          size=\"small\"\n        />\n\n        <Button\n          slot={null}\n          aria-label={messages.format('switchToYearView')}\n          variant=\"tertiary\"\n          onPress={() => switchToView('year')}\n        >\n          {title}\n        </Button>\n\n        <IconButton\n          slot=\"next\"\n          aria-label={messages.format('nextMonth')}\n          icon={<IconChevronRight />}\n          variant=\"tertiary\"\n          size=\"small\"\n        />\n      </div>\n\n      <RACCalendarGrid className=\"cim-date-picker-view-grid\" weekdayStyle=\"narrow\">\n        <RACCalendarGridHeader>\n          {(day) => (\n            <RACCalendarHeaderCell>\n              <div\n                className={clsx(\n                  'cim-date-picker-calendar-header-cell',\n                  textStyle({ variant: 'medium-semibold', tone: 'base' }),\n                )}\n              >\n                {day}\n              </div>\n            </RACCalendarHeaderCell>\n          )}\n        </RACCalendarGridHeader>\n        <RACCalendarGridBody>\n          {(date) => {\n            const isCurrentDate = isToday(date, state!.timeZone);\n\n            return (\n              <RACCalendarCell\n                className={clsx(\n                  'cim-date-picker-calendar-cell',\n                  textStyle({ variant: isCurrentDate ? 'medium-semibold' : 'medium' }),\n                )}\n                date={date}\n                data-current={isCurrentDate || undefined}\n              />\n            );\n          }}\n        </RACCalendarGridBody>\n      </RACCalendarGrid>\n    </>\n  );\n}\n"]}

package/dist/esm/components/date-picker/views/multi-year/multi-year-view.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=multi-year-view.d.ts.map

package/dist/esm/components/date-picker/views/multi-year/multi-year-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-year-view.d.ts","sourceRoot":"","sources":["../../../../../../src/components/date-picker/views/multi-year/multi-year-view.tsx"],"names":[],"mappings":""}

package/dist/esm/components/date-picker/views/multi-year/multi-year-view.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { IconButton } from '../../../button/icon-button.js';
+import { Text } from '../../../typography/text.js';
+import { useViewHeader } from '../use-view-header.js';
+import { ViewGrid } from '../view-grid.js';
+import { useMultiYearViewState } from './use-multi-year-view-state.js';
+/** @internal */
+export function MultiYearView() {
+    const state = useMultiYearViewState();
+    const { nextButtonProps, prevButtonProps } = useViewHeader(state);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "cim-date-picker-view-header", children: [_jsx(IconButton, { slot: null, ...prevButtonProps }), _jsx(Text, { as: "span", variant: "title-6", tone: "base", children: state.header }), _jsx(IconButton, { slot: null, ...nextButtonProps })] }), _jsx(ViewGrid, { state: state, className: "cim-date-picker-view-grid-multi-year" })] }));
+}
+//# sourceMappingURL=multi-year-view.js.map

package/dist/esm/components/date-picker/views/multi-year/multi-year-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-year-view.js","sourceRoot":"","sources":["../../../../../../src/components/date-picker/views/multi-year/multi-year-view.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAEvE,gBAAgB;AAChB,MAAM,UAAU,aAAa;IAC3B,MAAM,KAAK,GAAG,qBAAqB,EAAE,CAAC;IACtC,MAAM,EAAE,eAAe,EAAE,eAAe,EAAE,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IAElE,OAAO,CACL,8BACE,eAAK,SAAS,EAAC,6BAA6B,aAC1C,KAAC,UAAU,IAAC,IAAI,EAAE,IAAI,KAAM,eAAe,GAAI,EAE/C,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,YAC1C,KAAK,CAAC,MAAM,GACR,EAEP,KAAC,UAAU,IAAC,IAAI,EAAE,IAAI,KAAM,eAAe,GAAI,IAC3C,EAEN,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,sCAAsC,GAAG,IAC1E,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import { IconButton } from '../../../button/icon-button.js';\nimport { Text } from '../../../typography/text.js';\nimport { useViewHeader } from '../use-view-header.js';\nimport { ViewGrid } from '../view-grid.js';\nimport { useMultiYearViewState } from './use-multi-year-view-state.js';\n\n/** @internal */\nexport function MultiYearView() {\n  const state = useMultiYearViewState();\n  const { nextButtonProps, prevButtonProps } = useViewHeader(state);\n\n  return (\n    <>\n      <div className=\"cim-date-picker-view-header\">\n        <IconButton slot={null} {...prevButtonProps} />\n\n        <Text as=\"span\" variant=\"title-6\" tone=\"base\">\n          {state.header}\n        </Text>\n\n        <IconButton slot={null} {...nextButtonProps} />\n      </div>\n\n      <ViewGrid state={state} className=\"cim-date-picker-view-grid-multi-year\" />\n    </>\n  );\n}\n"]}

package/dist/esm/components/date-picker/views/multi-year/use-multi-year-view-state.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=use-multi-year-view-state.d.ts.map

package/dist/esm/components/date-picker/views/multi-year/use-multi-year-view-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-multi-year-view-state.d.ts","sourceRoot":"","sources":["../../../../../../src/components/date-picker/views/multi-year/use-multi-year-view-state.ts"],"names":[],"mappings":""}

package/dist/esm/components/date-picker/views/multi-year/use-multi-year-view-state.js

@@ -0,0 +1,127 @@
+import { endOfYear, isSameDay, isSameYear, startOfYear, today } from '@internationalized/date';
+import { useContext, useMemo, useState } from 'react';
+import { useDateFormatter } from 'react-aria';
+import { CalendarStateContext as RACCalendarStateContext } from 'react-aria-components';
+import { useLocalizedMessages } from '../../../../i18n/index.js';
+import { constrainValue, getEraFormat, isDateInvalid } from '../../utils.js';
+import { useDatePickerView } from '../view-provider.js';
+const ITEMS_PER_ROW = 4;
+const YEARS_PER_SECTION = 20;
+const YEARS_SKIP_AMOUNT = 100;
+/** @internal */
+export function useMultiYearViewState() {
+    const calendarState = useContext(RACCalendarStateContext);
+    const { switchToView, focusedDate, setFocusedDate } = useDatePickerView();
+    const messages = useLocalizedMessages('datePicker');
+    const [isFocused, setIsFocused] = useState(true);
+    const currentDate = useMemo(() => today(calendarState.timeZone), [calendarState.timeZone]);
+    const yearFormatter = useDateFormatter({
+        year: 'numeric',
+        era: getEraFormat(focusedDate),
+        calendar: focusedDate.calendar.identifier,
+        timeZone: calendarState.timeZone,
+    });
+    let startYear = (Math.ceil(focusedDate.year / YEARS_PER_SECTION) - 1) * YEARS_PER_SECTION + 1;
+    let endYear = startYear + YEARS_PER_SECTION - 1;
+    // Years are always represented by positive numbers.
+    // If era implies negative years, flip start and end.
+    const isNegativeEra = focusedDate.era === 'BC';
+    if (isNegativeEra) {
+        const temp = startYear;
+        startYear = endYear;
+        endYear = temp;
+    }
+    const data = useMemo(() => {
+        const rowCount = Math.ceil(YEARS_PER_SECTION / ITEMS_PER_ROW);
+        const result = new Array(rowCount);
+        for (let rowIdx = 0; rowIdx < rowCount; rowIdx++) {
+            result[rowIdx] = new Array(ITEMS_PER_ROW).fill(null);
+        }
+        for (let yearIdx = 0; yearIdx < YEARS_PER_SECTION; yearIdx++) {
+            const rowIdx = Math.floor(yearIdx / ITEMS_PER_ROW);
+            const colIdx = yearIdx % ITEMS_PER_ROW;
+            const yearToSet = startYear + (isNegativeEra ? -yearIdx : yearIdx);
+            const date = focusedDate.set({ year: yearToSet });
+            if (date.year !== yearToSet) {
+                // Reached minimum/maximum date
+                continue;
+            }
+            const content = yearFormatter.format(date.toDate(calendarState.timeZone));
+            result[rowIdx][colIdx] = {
+                date,
+                content,
+                ariaLabel: content,
+                isCurrent: isSameYear(date, currentDate),
+            };
+        }
+        return result;
+    }, [startYear, calendarState.timeZone, focusedDate, yearFormatter, isNegativeEra, currentDate]);
+    const focusCell = (date) => {
+        setFocusedDate(constrainValue(date, calendarState.minValue, calendarState.maxValue));
+    };
+    return {
+        header: yearFormatter.formatRange(focusedDate.set({ year: startYear }).toDate(calendarState.timeZone), focusedDate.set({ year: endYear }).toDate(calendarState.timeZone)),
+        previousLabel: messages.format('previousMultiYearSection', { yearCount: 20 }),
+        nextLabel: messages.format('nextMultiYearSection', { yearCount: 20 }),
+        data,
+        isReadOnly: calendarState.isReadOnly,
+        isDisabled: calendarState.isDisabled,
+        isFocused,
+        setIsFocused,
+        focusedDate,
+        setFocusedDate,
+        timeZone: calendarState.timeZone,
+        focusPreviousItem() {
+            focusCell(focusedDate.subtract({ years: 1 }));
+        },
+        focusNextItem() {
+            focusCell(focusedDate.add({ years: 1 }));
+        },
+        focusPreviousRow() {
+            focusCell(focusedDate.subtract({ years: ITEMS_PER_ROW }));
+        },
+        focusNextRow() {
+            focusCell(focusedDate.add({ years: ITEMS_PER_ROW }));
+        },
+        focusSectionStart() {
+            focusCell(focusedDate.set({ year: startYear }));
+        },
+        focusSectionEnd() {
+            focusCell(focusedDate.set({ year: endYear }));
+        },
+        focusPreviousSection(shouldSkip) {
+            focusCell(focusedDate.subtract({ years: shouldSkip ? YEARS_SKIP_AMOUNT : YEARS_PER_SECTION }));
+        },
+        focusNextSection(shouldSkip) {
+            focusCell(focusedDate.add({ years: shouldSkip ? YEARS_SKIP_AMOUNT : YEARS_PER_SECTION }));
+        },
+        isPreviousSectionInvalid() {
+            const current = startOfYear(focusedDate.set({ year: startYear }));
+            const prev = current.subtract({ days: 1 });
+            return (isDateInvalid(current, calendarState.minValue, calendarState.maxValue) ||
+                isDateInvalid(prev, calendarState.minValue, calendarState.maxValue) ||
+                isSameDay(prev, current));
+        },
+        isNextSectionInvalid() {
+            const current = endOfYear(focusedDate.set({ year: endYear }));
+            const next = current.add({ days: 1 });
+            return (isDateInvalid(current, calendarState.minValue, calendarState.maxValue) ||
+                isDateInvalid(next, calendarState.minValue, calendarState.maxValue) ||
+                isSameDay(next, current));
+        },
+        selectFocusedDate() {
+            switchToView('year');
+        },
+        isCellDisabled(date) {
+            return (isDateInvalid(endOfYear(date), calendarState.minValue, null) ||
+                isDateInvalid(startOfYear(date), null, calendarState.maxValue));
+        },
+        isCellSelected(date) {
+            return calendarState.value !== null && isSameYear(date, calendarState.value);
+        },
+        isCellTabbable(date) {
+            return isSameYear(date, focusedDate);
+        },
+    };
+}
+//# sourceMappingURL=use-multi-year-view-state.js.map

package/dist/esm/components/date-picker/views/multi-year/use-multi-year-view-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-multi-year-view-state.js","sourceRoot":"","sources":["../../../../../../src/components/date-picker/views/multi-year/use-multi-year-view-state.ts"],"names":[],"mappings":"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","sourcesContent":["import { endOfYear, isSameDay, isSameYear, startOfYear, today, type CalendarDate } from '@internationalized/date';\nimport { useContext, useMemo, useState } from 'react';\nimport { useDateFormatter } from 'react-aria';\nimport { CalendarStateContext as RACCalendarStateContext } from 'react-aria-components';\nimport { useLocalizedMessages } from '../../../../i18n/index.js';\nimport { constrainValue, getEraFormat, isDateInvalid } from '../../utils.js';\nimport type { ViewGridCellData, ViewGridState } from '../types.js';\nimport { useDatePickerView } from '../view-provider.js';\n\nconst ITEMS_PER_ROW = 4;\nconst YEARS_PER_SECTION = 20;\nconst YEARS_SKIP_AMOUNT = 100;\n\n/** @internal */\nexport function useMultiYearViewState(): ViewGridState {\n  const calendarState = useContext(RACCalendarStateContext)!;\n  const { switchToView, focusedDate, setFocusedDate } = useDatePickerView();\n  const messages = useLocalizedMessages('datePicker');\n  const [isFocused, setIsFocused] = useState(true);\n\n  const currentDate = useMemo(() => today(calendarState.timeZone), [calendarState.timeZone]);\n\n  const yearFormatter = useDateFormatter({\n    year: 'numeric',\n    era: getEraFormat(focusedDate),\n    calendar: focusedDate.calendar.identifier,\n    timeZone: calendarState.timeZone,\n  });\n\n  let startYear = (Math.ceil(focusedDate.year / YEARS_PER_SECTION) - 1) * YEARS_PER_SECTION + 1;\n  let endYear = startYear + YEARS_PER_SECTION - 1;\n\n  // Years are always represented by positive numbers.\n  // If era implies negative years, flip start and end.\n  const isNegativeEra = focusedDate.era === 'BC';\n  if (isNegativeEra) {\n    const temp = startYear;\n    startYear = endYear;\n    endYear = temp;\n  }\n\n  const data: (ViewGridCellData | null)[][] = useMemo(() => {\n    const rowCount = Math.ceil(YEARS_PER_SECTION / ITEMS_PER_ROW);\n    const result: (ViewGridCellData | null)[][] = new Array(rowCount);\n\n    for (let rowIdx = 0; rowIdx < rowCount; rowIdx++) {\n      result[rowIdx] = new Array(ITEMS_PER_ROW).fill(null);\n    }\n\n    for (let yearIdx = 0; yearIdx < YEARS_PER_SECTION; yearIdx++) {\n      const rowIdx = Math.floor(yearIdx / ITEMS_PER_ROW);\n      const colIdx = yearIdx % ITEMS_PER_ROW;\n\n      const yearToSet = startYear + (isNegativeEra ? -yearIdx : yearIdx);\n      const date = focusedDate.set({ year: yearToSet });\n\n      if (date.year !== yearToSet) {\n        // Reached minimum/maximum date\n        continue;\n      }\n\n      const content = yearFormatter.format(date.toDate(calendarState.timeZone));\n\n      result[rowIdx]![colIdx] = {\n        date,\n        content,\n        ariaLabel: content,\n        isCurrent: isSameYear(date, currentDate),\n      };\n    }\n\n    return result;\n  }, [startYear, calendarState.timeZone, focusedDate, yearFormatter, isNegativeEra, currentDate]);\n\n  const focusCell = (date: CalendarDate) => {\n    setFocusedDate(constrainValue(date, calendarState.minValue, calendarState.maxValue));\n  };\n\n  return {\n    header: yearFormatter.formatRange(\n      focusedDate.set({ year: startYear }).toDate(calendarState.timeZone),\n      focusedDate.set({ year: endYear }).toDate(calendarState.timeZone),\n    ),\n    previousLabel: messages.format('previousMultiYearSection', { yearCount: 20 }),\n    nextLabel: messages.format('nextMultiYearSection', { yearCount: 20 }),\n    data,\n    isReadOnly: calendarState.isReadOnly,\n    isDisabled: calendarState.isDisabled,\n    isFocused,\n    setIsFocused,\n    focusedDate,\n    setFocusedDate,\n    timeZone: calendarState.timeZone,\n    focusPreviousItem() {\n      focusCell(focusedDate.subtract({ years: 1 }));\n    },\n    focusNextItem() {\n      focusCell(focusedDate.add({ years: 1 }));\n    },\n    focusPreviousRow() {\n      focusCell(focusedDate.subtract({ years: ITEMS_PER_ROW }));\n    },\n    focusNextRow() {\n      focusCell(focusedDate.add({ years: ITEMS_PER_ROW }));\n    },\n    focusSectionStart() {\n      focusCell(focusedDate.set({ year: startYear }));\n    },\n    focusSectionEnd() {\n      focusCell(focusedDate.set({ year: endYear }));\n    },\n    focusPreviousSection(shouldSkip) {\n      focusCell(focusedDate.subtract({ years: shouldSkip ? YEARS_SKIP_AMOUNT : YEARS_PER_SECTION }));\n    },\n    focusNextSection(shouldSkip) {\n      focusCell(focusedDate.add({ years: shouldSkip ? YEARS_SKIP_AMOUNT : YEARS_PER_SECTION }));\n    },\n    isPreviousSectionInvalid() {\n      const current = startOfYear(focusedDate.set({ year: startYear }));\n      const prev = current.subtract({ days: 1 });\n\n      return (\n        isDateInvalid(current, calendarState.minValue, calendarState.maxValue) ||\n        isDateInvalid(prev, calendarState.minValue, calendarState.maxValue) ||\n        isSameDay(prev, current)\n      );\n    },\n    isNextSectionInvalid() {\n      const current = endOfYear(focusedDate.set({ year: endYear }));\n      const next = current.add({ days: 1 });\n\n      return (\n        isDateInvalid(current, calendarState.minValue, calendarState.maxValue) ||\n        isDateInvalid(next, calendarState.minValue, calendarState.maxValue) ||\n        isSameDay(next, current)\n      );\n    },\n    selectFocusedDate() {\n      switchToView('year');\n    },\n    isCellDisabled(date) {\n      return (\n        isDateInvalid(endOfYear(date), calendarState.minValue, null) ||\n        isDateInvalid(startOfYear(date), null, calendarState.maxValue)\n      );\n    },\n    isCellSelected(date) {\n      return calendarState.value !== null && isSameYear(date, calendarState.value);\n    },\n    isCellTabbable(date) {\n      return isSameYear(date, focusedDate);\n    },\n  };\n}\n"]}

package/dist/esm/components/date-picker/views/types.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/esm/components/date-picker/views/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/date-picker/views/types.ts"],"names":[],"mappings":""}

package/dist/esm/components/date-picker/views/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/components/date-picker/views/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../src/components/date-picker/views/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { CalendarDate } from '@internationalized/date';\n\n/** @internal */\nexport interface ViewGridCellData {\n  date: CalendarDate;\n  content: string;\n  ariaLabel: string;\n  isCurrent: boolean;\n}\n\n/** @internal */\nexport interface ViewGridState {\n  header: string;\n  previousLabel: string;\n  nextLabel: string;\n  data: (ViewGridCellData | null)[][];\n  isReadOnly: boolean;\n  isDisabled: boolean;\n  isFocused: boolean;\n  setIsFocused(value: boolean): void;\n  focusedDate: CalendarDate;\n  setFocusedDate(date: CalendarDate): void;\n  timeZone: string;\n  focusPreviousItem(): void;\n  focusNextItem(): void;\n  focusPreviousRow(): void;\n  focusNextRow(): void;\n  focusSectionStart(): void;\n  focusSectionEnd(): void;\n  focusPreviousSection(shouldSkip?: boolean): void;\n  focusNextSection(shouldSkip?: boolean): void;\n  isPreviousSectionInvalid(): boolean;\n  isNextSectionInvalid(): boolean;\n  selectFocusedDate(): void;\n  isCellDisabled(date: CalendarDate): boolean;\n  isCellSelected(date: CalendarDate): boolean;\n  isCellTabbable(date: CalendarDate): boolean;\n}\n"]}

package/dist/esm/components/date-picker/views/use-view-header.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=use-view-header.d.ts.map

package/dist/esm/components/date-picker/views/use-view-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-view-header.d.ts","sourceRoot":"","sources":["../../../../../src/components/date-picker/views/use-view-header.tsx"],"names":[],"mappings":""}

package/dist/esm/components/date-picker/views/use-view-header.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { announce } from '@react-aria/live-announcer';
+import { useUpdateEffect } from '@react-aria/utils';
+import { useState } from 'react';
+import { IconChevronLeft, IconChevronRight } from '../../../icons/index.js';
+/** @internal */
+export function useViewHeader(state) {
+    const { isFocused, header } = state;
+    // Announce when the section changes
+    useUpdateEffect(() => {
+        // only when pressing the Previous or Next button
+        if (!isFocused) {
+            announce(header);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [header]);
+    // If the next or previous buttons become disabled while they are focused, move focus to the grid.
+    const [previousFocused, setPreviousFocused] = useState(false);
+    const previousDisabled = state.isDisabled || state.isPreviousSectionInvalid();
+    if (previousDisabled && previousFocused) {
+        setPreviousFocused(false);
+        state.setIsFocused(true);
+    }
+    const [nextFocused, setNextFocused] = useState(false);
+    const nextDisabled = state.isDisabled || state.isNextSectionInvalid();
+    if (nextDisabled && nextFocused) {
+        setNextFocused(false);
+        state.setIsFocused(true);
+    }
+    return {
+        prevButtonProps: {
+            onPress: () => state.focusPreviousSection(),
+            'aria-label': state.previousLabel,
+            icon: _jsx(IconChevronLeft, {}),
+            variant: 'tertiary',
+            size: 'small',
+            isDisabled: previousDisabled,
+            // @ts-expect-error our buttons don't expose `onFocusChange`, but it gets passed to React Aria anyway
+            onFocusChange: setPreviousFocused,
+        },
+        nextButtonProps: {
+            onPress: () => state.focusNextSection(),
+            'aria-label': state.nextLabel,
+            icon: _jsx(IconChevronRight, {}),
+            variant: 'tertiary',
+            size: 'small',
+            isDisabled: nextDisabled,
+            // @ts-expect-error our buttons don't expose `onFocusChange`, but it gets passed to React Aria anyway
+            onFocusChange: setNextFocused,
+        },
+    };
+}
+//# sourceMappingURL=use-view-header.js.map

package/dist/esm/components/date-picker/views/use-view-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-view-header.js","sourceRoot":"","sources":["../../../../../src/components/date-picker/views/use-view-header.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAS5E,gBAAgB;AAChB,MAAM,UAAU,aAAa,CAAC,KAAoB;IAChD,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAEpC,oCAAoC;IACpC,eAAe,CAAC,GAAG,EAAE;QACnB,iDAAiD;QACjD,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,QAAQ,CAAC,MAAM,CAAC,CAAC;QACnB,CAAC;QACD,uDAAuD;IACzD,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,kGAAkG;IAClG,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9D,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,wBAAwB,EAAE,CAAC;IAC9E,IAAI,gBAAgB,IAAI,eAAe,EAAE,CAAC;QACxC,kBAAkB,CAAC,KAAK,CAAC,CAAC;QAC1B,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;IAED,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,oBAAoB,EAAE,CAAC;IACtE,IAAI,YAAY,IAAI,WAAW,EAAE,CAAC;QAChC,cAAc,CAAC,KAAK,CAAC,CAAC;QACtB,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;IAED,OAAO;QACL,eAAe,EAAE;YACf,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,oBAAoB,EAAE;YAC3C,YAAY,EAAE,KAAK,CAAC,aAAa;YACjC,IAAI,EAAE,KAAC,eAAe,KAAG;YACzB,OAAO,EAAE,UAAU;YACnB,IAAI,EAAE,OAAO;YACb,UAAU,EAAE,gBAAgB;YAC5B,qGAAqG;YACrG,aAAa,EAAE,kBAAkB;SAClC;QACD,eAAe,EAAE;YACf,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,gBAAgB,EAAE;YACvC,YAAY,EAAE,KAAK,CAAC,SAAS;YAC7B,IAAI,EAAE,KAAC,gBAAgB,KAAG;YAC1B,OAAO,EAAE,UAAU;YACnB,IAAI,EAAE,OAAO;YACb,UAAU,EAAE,YAAY;YACxB,qGAAqG;YACrG,aAAa,EAAE,cAAc;SAC9B;KACF,CAAC;AACJ,CAAC","sourcesContent":["import { announce } from '@react-aria/live-announcer';\nimport { useUpdateEffect } from '@react-aria/utils';\nimport { useState } from 'react';\nimport { IconChevronLeft, IconChevronRight } from '../../../icons/index.js';\nimport type { IconButtonProps } from '../../button/icon-button.js';\nimport type { ViewGridState } from './types.js';\n\ninterface UseViewHeader {\n  prevButtonProps: IconButtonProps;\n  nextButtonProps: IconButtonProps;\n}\n\n/** @internal */\nexport function useViewHeader(state: ViewGridState): UseViewHeader {\n  const { isFocused, header } = state;\n\n  // Announce when the section changes\n  useUpdateEffect(() => {\n    // only when pressing the Previous or Next button\n    if (!isFocused) {\n      announce(header);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [header]);\n\n  // If the next or previous buttons become disabled while they are focused, move focus to the grid.\n  const [previousFocused, setPreviousFocused] = useState(false);\n  const previousDisabled = state.isDisabled || state.isPreviousSectionInvalid();\n  if (previousDisabled && previousFocused) {\n    setPreviousFocused(false);\n    state.setIsFocused(true);\n  }\n\n  const [nextFocused, setNextFocused] = useState(false);\n  const nextDisabled = state.isDisabled || state.isNextSectionInvalid();\n  if (nextDisabled && nextFocused) {\n    setNextFocused(false);\n    state.setIsFocused(true);\n  }\n\n  return {\n    prevButtonProps: {\n      onPress: () => state.focusPreviousSection(),\n      'aria-label': state.previousLabel,\n      icon: <IconChevronLeft />,\n      variant: 'tertiary',\n      size: 'small',\n      isDisabled: previousDisabled,\n      // @ts-expect-error our buttons don't expose `onFocusChange`, but it gets passed to React Aria anyway\n      onFocusChange: setPreviousFocused,\n    },\n    nextButtonProps: {\n      onPress: () => state.focusNextSection(),\n      'aria-label': state.nextLabel,\n      icon: <IconChevronRight />,\n      variant: 'tertiary',\n      size: 'small',\n      isDisabled: nextDisabled,\n      // @ts-expect-error our buttons don't expose `onFocusChange`, but it gets passed to React Aria anyway\n      onFocusChange: setNextFocused,\n    },\n  };\n}\n"]}

package/dist/esm/components/date-picker/views/view-grid-cell.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=view-grid-cell.d.ts.map

package/dist/esm/components/date-picker/views/view-grid-cell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-grid-cell.d.ts","sourceRoot":"","sources":["../../../../../src/components/date-picker/views/view-grid-cell.tsx"],"names":[],"mappings":""}

package/dist/esm/components/date-picker/views/view-grid-cell.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFocusRing } from '@react-aria/focus';
+import { getInteractionModality, useHover, usePress } from '@react-aria/interactions';
+import { focusWithoutScrolling, getScrollParent, mergeProps, scrollIntoViewport } from '@react-aria/utils';
+import clsx from 'clsx';
+import { useEffect, useRef } from 'react';
+import { textStyle } from '../../typography/utils.js';
+/** @internal */
+export function ViewGridCell({ cellData, state }) {
+    const ref = useRef(null);
+    const isDisabled = cellData ? state.isDisabled || state.isCellDisabled(cellData.date) : true;
+    const isSelected = cellData ? !isDisabled && state.isCellSelected(cellData.date) : false;
+    const isTabbable = cellData ? state.isCellTabbable(cellData.date) : false;
+    const isFocused = state.isFocused && isTabbable;
+    const { pressProps, isPressed } = usePress({
+        preventFocusOnPress: true,
+        isDisabled: isDisabled || state.isReadOnly,
+        onPress: () => {
+            if (!state.isReadOnly && cellData) {
+                state.setFocusedDate(cellData.date);
+                state.selectFocusedDate();
+            }
+        },
+    });
+    let tabIndex = undefined;
+    if (!isDisabled) {
+        tabIndex = isTabbable ? 0 : -1;
+    }
+    // Focus the button in the DOM when the state updates.
+    useEffect(() => {
+        if (isFocused && ref.current) {
+            focusWithoutScrolling(ref.current);
+            // Scroll into view if navigating with a keyboard
+            if (getInteractionModality() !== 'pointer' && document.activeElement === ref.current) {
+                scrollIntoViewport(ref.current, { containingElement: getScrollParent(ref.current) });
+            }
+        }
+    }, [isFocused]);
+    const { hoverProps, isHovered } = useHover({ isDisabled });
+    const { focusProps, isFocusVisible } = useFocusRing();
+    const cellProps = {
+        role: 'gridcell',
+        'aria-disabled': isDisabled || undefined,
+        'aria-selected': isSelected || undefined,
+    };
+    if (!cellData) {
+        return _jsx("td", { ...cellProps });
+    }
+    const { date, content, ariaLabel, isCurrent } = cellData;
+    const buttonProps = mergeProps(pressProps, hoverProps, focusProps, {
+        onFocus() {
+            if (!isDisabled) {
+                state.setFocusedDate(date);
+            }
+        },
+        tabIndex,
+        role: 'button',
+        'aria-disabled': isDisabled || undefined,
+        'aria-label': ariaLabel,
+        onContextMenu(e) {
+            e.preventDefault();
+        },
+    });
+    return (_jsx("td", { ...cellProps, children: _jsx("div", { ...buttonProps, ref: ref, className: clsx('cim-date-picker-calendar-cell', textStyle({ variant: isCurrent ? 'medium-semibold' : 'medium' })), "data-disabled": isDisabled || undefined, "data-hovered": isHovered || undefined, "data-pressed": isPressed || undefined, "data-selected": isSelected || undefined, "data-focus-visible": (isFocusVisible && isFocused) || undefined, "data-current": isCurrent || undefined, children: content }) }));
+}
+//# sourceMappingURL=view-grid-cell.js.map