feat: S2 DateField/DatePicker/Calendar

packages/@react-aria/calendar/src/index.ts

@@ -14,6 +14,7 @@ export {useCalendar} from './useCalendar';
 export {useRangeCalendar} from './useRangeCalendar';
 export {useCalendarGrid} from './useCalendarGrid';
 export {useCalendarCell} from './useCalendarCell';
+export {getEraFormat} from './utils';
 
 export type {AriaCalendarProps, AriaRangeCalendarProps, CalendarProps, DateValue, RangeCalendarProps} from '@react-types/calendar';
 export type {CalendarAria} from './useCalendarBase';

packages/@react-spectrum/s2/intl/en-US.json

@@ -35,5 +35,8 @@
   "breadcrumbs.more": "More items",
   "toast.clearAll": "Clear all",
   "toast.collapse": "Collapse",
-  "toast.showAll": "Show all"
+  "toast.showAll": "Show all",
+  "rangeCalendar.startTime": "Start time",
+  "rangeCalendar.endTime": "End time",
+  "calendar.time": "Time"
 }

packages/@react-spectrum/s2/package.json

@@ -150,7 +150,9 @@
     "jest": "^29.5.0"
   },
   "dependencies": {
+    "@internationalized/date": "^3.8.2",
     "@internationalized/number": "^3.6.3",
+    "@react-aria/calendar": "^3.8.3",
     "@react-aria/collections": "3.0.0-rc.3",
     "@react-aria/focus": "^3.20.5",
     "@react-aria/i18n": "^3.12.10",

packages/@react-spectrum/s2/src/Calendar.tsx

@@ -10,38 +10,307 @@
  * governing permissions and limitations under the License.
  */
 
+import {ActionButton, Header, Heading, pressScale} from './';
 import {
   Calendar as AriaCalendar,
+  CalendarCell as AriaCalendarCell,
   CalendarProps as AriaCalendarProps,
-  Button,
-  CalendarCell,
+  ButtonProps,
+  CalendarCellProps,
+  CalendarCellRenderProps,
   CalendarGrid,
+  CalendarGridBody,
+  CalendarGridHeader,
+  CalendarHeaderCell,
+  CalendarStateContext,
+  ContextValue,
   DateValue,
-  Heading,
   Text
 } from 'react-aria-components';
-import {ReactNode} from 'react';
+import {baseColor, focusRing, lightDark, style} from '../style' with {type: 'macro'};
+import ChevronLeftIcon from '../s2wf-icons/S2_Icon_ChevronLeft_20_N.svg';
+import ChevronRightIcon from '../s2wf-icons/S2_Icon_ChevronRight_20_N.svg';
+import {controlFont, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {createContext, ForwardedRef, forwardRef, Fragment, ReactNode, useContext, useMemo, useRef} from 'react';
+import {forwardRefType, ValidationResult} from '@react-types/shared';
+import {getEraFormat} from '@react-aria/calendar';
+import {useDateFormatter} from '@react-aria/i18n';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 
 export interface CalendarProps<T extends DateValue>
-  extends AriaCalendarProps<T> {
-  errorMessage?: string
+  extends Omit<AriaCalendarProps<T>, 'visibleDuration' | 'style' | 'className' | 'styles'>,
+  StyleProps {
+  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode),
+  visibleMonths?: number
 }
 
-export function Calendar<T extends DateValue>(
-  {errorMessage, ...props}: CalendarProps<T>
-): ReactNode {
+export const CalendarContext = createContext<ContextValue<Partial<CalendarProps<any>>, HTMLDivElement>>(null);
+
+const calendarStyles = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 24,
+  width: 'fit'
+}, getAllowedOverrides());
+
+const headerStyles = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  width: 'full'
+});
+
+const headingStyles = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  margin: 0,
+  width: 'full'
+});
+
+const titleStyles = style({
+  font: 'title-lg',
+  textAlign: 'center',
+  flexGrow: 1,
+  flexShrink: 0,
+  flexBasis: '0%',
+  minWidth: 0
+});
+
+const headerCellStyles = style({
+  font: 'title-sm',
+  cursor: 'default',
+  textAlign: 'center',
+  flexGrow: 1
+});
+
+const cellStyles = style<CalendarCellRenderProps>({
+  paddingX: 4,
+  '--cell-gap': {
+    type: 'paddingStart',
+    value: 4
+  },
+  paddingY: 2
+});
+
+const cellInnerStyles = style({
+  ...focusRing(),
+  outlineOffset: {
+    default: -2,
+    isToday: 2,
+    isSelected: 2
+  },
+  position: 'relative',
+  font: 'body-sm',
+  cursor: 'default',
+  width: 32,
+  height: 32,
+  margin: 2,
+  borderRadius: 'full',
+  display: {
+    default: 'flex',
+    isOutsideMonth: 'none'
+  },
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor: {
+    default: 'transparent',
+    isHovered: 'gray-100',
+    isToday: {
+      default: baseColor('gray-300'),
+      isDisabled: 'disabled'
+    },
+    isSelected: {
+      default: lightDark('accent-900', 'accent-700'),
+      isHovered: lightDark('accent-1000', 'accent-600'),
+      isPressed: lightDark('accent-1000', 'accent-600'),
+      isFocusVisible: lightDark('accent-1000', 'accent-600')
+    }
+  },
+  color: {
+    isSelected: 'white',
+    isDisabled: 'disabled'
+  }
+});
+
+const unavailableStyles = style({
+  position: 'absolute',
+  top: 'calc(50% - 1px)',
+  left: 'calc(25% - 1px)',
+  right: 'calc(25% - 1px)',
+  height: 2,
+  transform: 'rotate(-16deg)',
+  borderRadius: 'full',
+  backgroundColor: '[currentColor]'
+});
+
+export const helpTextStyles = style({
+  gridArea: 'helptext',
+  display: 'flex',
+  alignItems: 'baseline',
+  gap: 'text-to-visual',
+  font: controlFont(),
+  color: {
+    default: 'neutral-subdued',
+    isInvalid: 'negative',
+    isDisabled: 'disabled'
+  },
+  '--iconPrimary': {
+    type: 'fill',
+    value: 'currentColor'
+  },
+  contain: 'inline-size',
+  paddingTop: '--field-gap',
+  cursor: {
+    default: 'text',
+    isDisabled: 'default'
+  }
+});
+
+
+export const Calendar = /*#__PURE__*/ (forwardRef as forwardRefType)(function Calendar<T extends DateValue>(props: CalendarProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, CalendarContext);
+  let {
+    visibleMonths = 1,
+    errorMessage,
+    UNSAFE_style,
+    UNSAFE_className,
+    styles,
+    ...otherProps
+  } = props;
   return (
-    <AriaCalendar {...props}>
-      <header>
-        <Button slot="previous">◀</Button>
-        <Heading />
-        <Button slot="next">▶</Button>
-      </header>
-      <CalendarGrid>
-        {(date) => <CalendarCell date={date} />}
-      </CalendarGrid>
-      {errorMessage && <Text slot="errorMessage">{errorMessage}</Text>}
+    <AriaCalendar
+      {...otherProps}
+      ref={ref}
+      visibleDuration={{months: visibleMonths}}
+      style={UNSAFE_style}
+      className={(UNSAFE_className || '') + calendarStyles(null, styles)}>
+      {({isInvalid, isDisabled}) => {
+        return (
+          <>
+            <Header styles={headerStyles}>
+              <CalendarButton slot="previous"><ChevronLeftIcon /></CalendarButton>
+              <CalendarHeading />
+              <CalendarButton slot="next"><ChevronRightIcon /></CalendarButton>
+            </Header>
+            <div
+              className={style({
+                display: 'flex',
+                flexDirection: 'row',
+                gap: 24,
+                width: 'full'
+              })}>
+              {Array.from({length: visibleMonths}).map((_, i) => (
+                <CalendarGrid offset={{months: i}} key={i}>
+                  <CalendarGridHeader>
+                    {(day) => (
+                      <CalendarHeaderCell className={headerCellStyles}>
+                        {day}
+                      </CalendarHeaderCell>
+                    )}
+                  </CalendarGridHeader>
+                  <CalendarGridBody>
+                    {(date) => (
+                      <CalendarCell date={date} />
+                    )}
+                  </CalendarGridBody>
+                </CalendarGrid>
+              ))}
+            </div>
+            {errorMessage && (
+              <Text slot="errorMessage" className={helpTextStyles({isInvalid, isDisabled})}>
+                {/* @ts-ignore */}
+                {errorMessage}
+              </Text>
+            )}
+          </>
+        );
+      }}
     </AriaCalendar>
   );
-}
+});
+
+// Ordinarily the heading is a formatted date range, ie January 2025 - February 2025.
+// However, we want to show each month individually.
+const CalendarHeading = () => {
+  let {visibleRange, timeZone} = useContext(CalendarStateContext) ?? {};
+  let era: any = getEraFormat(visibleRange?.start) || getEraFormat(visibleRange?.end);
+  let monthFormatter = useDateFormatter({
+    month: 'long',
+    year: 'numeric',
+    era,
+    calendar: visibleRange?.start.calendar.identifier,
+    timeZone
+  });
+  let months = useMemo(() => {
+    if (!visibleRange) {
+      return [];
+    }
+    let months: string[] = [];
+    for (let i = visibleRange.start; i.compare(visibleRange.end) <= 0; i = i.add({months: 1})) {
+      // TODO: account for the first week possibly overlapping, like with a custom 454 calendar.
+      // there has to be a better way to do this...
+      if (i.month === visibleRange.start.month) {
+        i = i.add({weeks: 1});
+      }
+      months.push(monthFormatter.format(i.toDate(timeZone!)));
+    }
+    return months;
+  }, [visibleRange, monthFormatter, timeZone]);
+
+  return (
+    <Heading styles={headingStyles}>
+      {months.map((month, i) => {
+        if (i === 0) {
+          return (
+            <Fragment key={month}>
+              <div className={titleStyles}>{month}</div>
+            </Fragment>
+          );
+        } else {
+          return (
+            <Fragment key={month}>
+              {/* Spacers to account for Next/Previous buttons and gap, spelled out to show the math */}
+              <div className={style({visibility: 'hidden', width: 32})} role="presentation" />
+              <div className={style({visibility: 'hidden', width: 24})} role="presentation" />
+              <div className={style({visibility: 'hidden', width: 32})} role="presentation" />
+              <div className={titleStyles}>{month}</div>
+            </Fragment>
+          );
+        }
+      })}
+    </Heading>
+  );
+};
+
+const CalendarButton = (props: Omit<ButtonProps, 'children'> & {children: ReactNode}) => {
+  return (
+    <ActionButton
+      {...props}
+      isQuiet>
+      {props.children}
+    </ActionButton>
+  );
+};
+
+const CalendarCell = (props: Omit<CalendarCellProps, 'children'>) => {
+  let ref = useRef<HTMLTableCellElement>(null);
+  return (
+    <AriaCalendarCell
+      ref={ref}
+      date={props.date}
+      cellClassName={cellStyles}
+      style={pressScale(ref, {})}
+      className={cellInnerStyles}>
+      {({isUnavailable, formattedDate}) => (
+        <>
+          <div>
+            {formattedDate}
+          </div>
+          {isUnavailable && <div className={unavailableStyles} role="presentation" />}
+        </>
+      )}
+    </AriaCalendarCell>
+  );
+};

packages/@react-spectrum/s2/src/Content.tsx

@@ -27,7 +27,8 @@ interface ContentProps extends UnsafeStyles, SlotProps {
   id?: string
 }
 
-interface HeadingProps extends ContentProps {
+interface HeadingProps extends Omit<ContentProps, 'children'> {
+  children?: ReactNode,
   level?: number
 }