@react-spectrum/s2 1.3.1 → 1.5.0

package/src/DatePicker.tsx

@@ -10,21 +10,44 @@
  * governing permissions and limitations under the License.
  */
 
-import {DatePicker as AriaDatePicker, DatePickerProps as AriaDatePickerProps, DateValue} from 'react-aria-components/DatePicker';
+import {
+  DatePicker as AriaDatePicker,
+  DatePickerProps as AriaDatePickerProps,
+  DateValue
+} from 'react-aria-components/DatePicker';
 import {baseColor, focusRing, fontRelative, space, style} from '../style' with {type: 'macro'};
 import {Button, ButtonRenderProps} from 'react-aria-components/Button';
 import {Calendar, CalendarProps} from './Calendar';
 import CalendarIcon from '../s2wf-icons/S2_Icon_Calendar_20_N.svg';
 import {ContextValue, Provider} from 'react-aria-components/slots';
-import {controlBorderRadius, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {createContext, forwardRef, ReactElement, ReactNode, Ref, useContext, useRef, useState} from 'react';
+import {
+  controlBorderRadius,
+  field,
+  fieldInput,
+  getAllowedOverrides,
+  StyleProps
+} from './style-utils' with {type: 'macro'};
+import {
+  createContext,
+  forwardRef,
+  ReactElement,
+  ReactNode,
+  Ref,
+  useContext,
+  useRef,
+  useState
+} from 'react';
 import {DateInput, DateInputContainer, InvalidIndicator} from './DateField';
 import {Dialog, OverlayTriggerStateContext} from 'react-aria-components/Dialog';
 import {FieldGroup, FieldLabel, HelpText} from './Field';
 import {FormContext} from 'react-aria-components/Form';
-import {forwardRefType, GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
+import {
+  forwardRefType,
+  GlobalDOMAttributes,
+  HelpTextProps,
+  SpectrumLabelableProps
+} from '@react-types/shared';
 import {IconContext} from './Icon';
-// @ts-ignore
 import intlMessages from '../intl/*.json';
 import {Popover} from './Popover';
 import {PopoverProps} from 'react-aria-components/Popover';
@@ -34,30 +57,39 @@ import {TimeValue} from 'react-aria-components/TimeField';
 import {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-
-export interface DatePickerProps<T extends DateValue> extends
-  Omit<AriaDatePickerProps<T>, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>,
-  Pick<CalendarProps<T>, 'createCalendar' | 'pageBehavior' | 'firstDayOfWeek' | 'isDateUnavailable'>,
-  Pick<PopoverProps, 'shouldFlip'>,
-  StyleProps,
-  SpectrumLabelableProps,
-  HelpTextProps {
-    /**
-     * The size of the DateField.
-     *
-     * @default 'M'
-     */
-    size?: 'S' | 'M' | 'L' | 'XL',
-    /**
-     * The maximum number of months to display at once in the calendar popover, if screen space permits.
-     * @default 1
-     */
-    maxVisibleMonths?: number
+export interface DatePickerProps<T extends DateValue>
+  extends
+    Omit<
+      AriaDatePickerProps<T>,
+      'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes
+    >,
+    Pick<
+      CalendarProps<T>,
+      'createCalendar' | 'pageBehavior' | 'firstDayOfWeek' | 'isDateUnavailable'
+    >,
+    Pick<PopoverProps, 'shouldFlip'>,
+    StyleProps,
+    SpectrumLabelableProps,
+    HelpTextProps {
+  /**
+   * The size of the DateField.
+   *
+   * @default 'M'
+   */
+  size?: 'S' | 'M' | 'L' | 'XL';
+  /**
+   * The maximum number of months to display at once in the calendar popover, if screen space
+   * permits.
+   *
+   * @default 1
+   */
+  maxVisibleMonths?: number;
 }
 
-export const DatePickerContext = createContext<ContextValue<Partial<DatePickerProps<any>>, HTMLDivElement>>(null);
+export const DatePickerContext =
+  createContext<ContextValue<Partial<DatePickerProps<any>>, HTMLDivElement>>(null);
 
-const inputButton = style<ButtonRenderProps & {isOpen: boolean, size: 'S' | 'M' | 'L' | 'XL'}>({
+const inputButton = style<ButtonRenderProps & {isOpen: boolean; size: 'S' | 'M' | 'L' | 'XL'}>({
   ...focusRing(),
   ...controlBorderRadius('sm'),
   position: 'relative',
@@ -117,11 +149,12 @@ export const timeField = style({
 });
 
 /**
- * DatePickers combine a DateField and a Calendar popover to allow users to enter or select a date and time value.
+ * DatePickers combine a DateField and a Calendar popover to allow users to enter or select a date
+ * and time value.
  */
-export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function DatePicker<T extends DateValue>(
-  props: DatePickerProps<T>, ref: Ref<HTMLDivElement>
-): ReactElement {
+export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function DatePicker<
+  T extends DateValue
+>(props: DatePickerProps<T>, ref: Ref<HTMLDivElement>): ReactElement {
   [props, ref] = useSpectrumContextProps(props, ref, DatePickerContext);
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   let {
@@ -151,22 +184,36 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
       isRequired={isRequired}
       {...dateFieldProps}
       style={UNSAFE_style}
-      className={(UNSAFE_className || '') + style(field(), getAllowedOverrides())({
-        isInForm: !!formContext,
-        labelPosition,
-        size
-      }, styles)}>
+      className={
+        (UNSAFE_className || '') +
+        style(field(), getAllowedOverrides())(
+          {
+            isInForm: !!formContext,
+            labelPosition,
+            size
+          },
+          styles
+        )
+      }>
       {({isDisabled, isInvalid, isOpen, state}) => {
         let placeholder: DateValue | undefined = placeholderValue ?? undefined;
         let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : undefined;
         let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : undefined;
         let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : undefined;
-        let timeGranularity = state.granularity === 'hour' || state.granularity === 'minute' || state.granularity === 'second' ? state.granularity : undefined;
+        let timeGranularity =
+          state.granularity === 'hour' ||
+          state.granularity === 'minute' ||
+          state.granularity === 'second'
+            ? state.granularity
+            : undefined;
         let showTimeField = !!timeGranularity;
 
         // Ideally, we could omit errorMessage here and let S2 Calendar read it from RAC's CalendarContext which already contains the resolved value via calendarProps from useDatePicker.
         // However, RAC's CalendarProps omits errorMessage, so reading it back from the context would require an unsafe cast. Instead, we resolve it here using the same logic as useDatePicker.
-        let resolvedErrorMessage = typeof errorMessage === 'function' ? errorMessage(state.displayValidation) : (errorMessage || state.displayValidation.validationErrors.join(' '));
+        let resolvedErrorMessage =
+          typeof errorMessage === 'function'
+            ? errorMessage(state.displayValidation)
+            : errorMessage || state.displayValidation.validationErrors.join(' ');
         return (
           <>
             <FieldLabel
@@ -208,7 +255,8 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
               <Calendar
                 visibleMonths={maxVisibleMonths}
                 createCalendar={createCalendar}
-                errorMessage={resolvedErrorMessage} />
+                errorMessage={resolvedErrorMessage}
+              />
               {showTimeField && (
                 <div className={style({display: 'flex', gap: 16, contain: 'inline-size'})}>
                   <TimeField
@@ -222,7 +270,8 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
                     minValue={timeMinValue}
                     maxValue={timeMaxValue}
                     hourCycle={props.hourCycle}
-                    hideTimeZone={props.hideTimeZone} />
+                    hideTimeZone={props.hideTimeZone}
+                  />
                 </div>
               )}
             </CalendarPopover>
@@ -240,12 +289,11 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
   );
 });
 
-export function CalendarPopover(props: Omit<PopoverProps, 'children'> & {children: ReactNode}): ReactElement {
+export function CalendarPopover(
+  props: Omit<PopoverProps, 'children'> & {children: ReactNode}
+): ReactElement {
   return (
-    <Popover
-      {...props}
-      hideArrow
-      padding="none">
+    <Popover {...props} hideArrow padding="none">
       <div
         className={style({
           paddingX: 16,
@@ -258,20 +306,18 @@ export function CalendarPopover(props: Omit<PopoverProps, 'children'> & {childre
           size: 'full'
         })}>
         <Dialog>
-          <Provider
-            values={[
-              [OverlayTriggerStateContext, null]
-            ]}>
-            {props.children}
-          </Provider>
+          <Provider values={[[OverlayTriggerStateContext, null]]}>{props.children}</Provider>
         </Dialog>
       </div>
     </Popover>
   );
 }
 
-
-export function CalendarButton(props: {isOpen: boolean, size: 'S' | 'M' | 'L' | 'XL', setButtonHasFocus: (hasFocus: boolean) => void}): ReactElement {
+export function CalendarButton(props: {
+  isOpen: boolean;
+  size: 'S' | 'M' | 'L' | 'XL';
+  setButtonHasFocus: (hasFocus: boolean) => void;
+}): ReactElement {
   let buttonRef = useRef<HTMLButtonElement>(null);
   let {isOpen, size, setButtonHasFocus} = props;
   return (
@@ -282,22 +328,27 @@ export function CalendarButton(props: {isOpen: boolean, size: 'S' | 'M' | 'L' |
       isPressed={false}
       onFocusChange={setButtonHasFocus}
       style={pressScale(buttonRef)}
-      className={renderProps => inputButton({
-        ...renderProps,
-        size,
-        isOpen
-      })}>
+      className={renderProps =>
+        inputButton({
+          ...renderProps,
+          size,
+          isOpen
+        })
+      }>
       <Provider
         values={[
-          [IconContext, {
-            styles: style({
-              '--iconPrimary': {
-                type: 'fill',
-                value: 'currentColor'
-              },
-              size: fontRelative(14)
-            })
-          }]
+          [
+            IconContext,
+            {
+              styles: style({
+                '--iconPrimary': {
+                  type: 'fill',
+                  value: 'currentColor'
+                },
+                size: fontRelative(14)
+              })
+            }
+          ]
         ]}>
         <CalendarIcon />
       </Provider>