@react-spectrum/s2 1.3.1 → 1.5.0

package/src/DateRangePicker.tsx

@@ -19,11 +19,20 @@ import {CalendarButton, CalendarPopover, timeField} from './DatePicker';
 import {ContextValue} from 'react-aria-components/slots';
 import {createContext, forwardRef, ReactElement, Ref, useContext, useState} from 'react';
 import {DateInput, DateInputContainer, InvalidIndicator} from './DateField';
-import {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {
+  field,
+  fieldInput,
+  getAllowedOverrides,
+  StyleProps
+} from './style-utils' with {type: 'macro'};
 import {FieldGroup, FieldLabel, HelpText} from './Field';
 import {FormContext} from 'react-aria-components/Form';
-import {forwardRefType, GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
-// @ts-ignore
+import {
+  forwardRefType,
+  GlobalDOMAttributes,
+  HelpTextProps,
+  SpectrumLabelableProps
+} from '@react-types/shared';
 import intlMessages from '../intl/*.json';
 import {PopoverProps} from 'react-aria-components/Popover';
 import {RangeCalendar, RangeCalendarProps} from './RangeCalendar';
@@ -32,168 +41,210 @@ import {TimeField} from './TimeField';
 import {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-
-export interface DateRangePickerProps<T extends DateValue> extends
-  Omit<AriaDateRangePickerProps<T>, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>,
-  Pick<RangeCalendarProps<T>, 'createCalendar' | 'pageBehavior' | 'firstDayOfWeek' | 'isDateUnavailable' | 'commitBehavior'>,
-  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 DateRangePickerProps<T extends DateValue>
+  extends
+    Omit<
+      AriaDateRangePickerProps<T>,
+      'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes
+    >,
+    Pick<
+      RangeCalendarProps<T>,
+      'createCalendar' | 'pageBehavior' | 'firstDayOfWeek' | 'isDateUnavailable' | 'commitBehavior'
+    >,
+    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 DateRangePickerContext = createContext<ContextValue<Partial<DateRangePickerProps<any>>, HTMLDivElement>>(null);
+export const DateRangePickerContext =
+  createContext<ContextValue<Partial<DateRangePickerProps<any>>, HTMLDivElement>>(null);
 
 /**
  * DateRangePickers combine two DateFields and a RangeCalendar popover to allow users
  * to enter or select a date and time range.
  */
-export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function DateRangePicker<T extends DateValue>(
-  props: DateRangePickerProps<T>, ref: Ref<HTMLDivElement>
-): ReactElement {
-  [props, ref] = useSpectrumContextProps(props, ref, DateRangePickerContext);
-  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
-  let {
-    label,
-    contextualHelp,
-    description: descriptionMessage,
-    errorMessage,
-    isRequired,
-    size = 'M',
-    labelPosition = 'top',
-    necessityIndicator,
-    labelAlign = 'start',
-    UNSAFE_style,
-    UNSAFE_className,
-    styles,
-    placeholderValue,
-    maxVisibleMonths = 1,
-    createCalendar,
-    commitBehavior,
-    ...dateFieldProps
-  } = props;
-  let formContext = useContext(FormContext);
-  let [buttonHasFocus, setButtonHasFocus] = useState(false);
+export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(
+  function DateRangePicker<T extends DateValue>(
+    props: DateRangePickerProps<T>,
+    ref: Ref<HTMLDivElement>
+  ): ReactElement {
+    [props, ref] = useSpectrumContextProps(props, ref, DateRangePickerContext);
+    let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
+    let {
+      label,
+      contextualHelp,
+      description: descriptionMessage,
+      errorMessage,
+      isRequired,
+      size = 'M',
+      labelPosition = 'top',
+      necessityIndicator,
+      labelAlign = 'start',
+      UNSAFE_style,
+      UNSAFE_className,
+      styles,
+      placeholderValue,
+      maxVisibleMonths = 1,
+      createCalendar,
+      commitBehavior,
+      ...dateFieldProps
+    } = props;
+    let formContext = useContext(FormContext);
+    let [buttonHasFocus, setButtonHasFocus] = useState(false);
 
-  return (
-    <AriaDateRangePicker
-      ref={ref}
-      isRequired={isRequired}
-      {...dateFieldProps}
-      style={UNSAFE_style}
-      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 showTimeField = !!timeGranularity;
+    return (
+      <AriaDateRangePicker
+        ref={ref}
+        isRequired={isRequired}
+        {...dateFieldProps}
+        style={UNSAFE_style}
+        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 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(' '));
-        return (
-          <>
-            <FieldLabel
-              isDisabled={isDisabled}
-              isRequired={isRequired}
-              size={size}
-              labelPosition={labelPosition}
-              labelAlign={labelAlign}
-              necessityIndicator={necessityIndicator}
-              contextualHelp={contextualHelp}>
-              {label}
-            </FieldLabel>
-            <FieldGroup
-              role="presentation"
-              shouldTurnOffFocusRing={buttonHasFocus}
-              isDisabled={isDisabled}
-              isInvalid={isInvalid}
-              size={size}
-              styles={style({
-                ...fieldInput(),
-                textWrap: 'nowrap',
-                paddingStart: 'edge-to-text',
-                paddingEnd: 4
-              })({size})}>
-              <DateInputContainer>
-                <DateInput slot="start" />
-                <span aria-hidden="true" className={style({flexShrink: 0, flexGrow: 0, paddingX: 2})}>–</span>
-                <DateInput slot="end" />
-              </DateInputContainer>
-              <InvalidIndicator isInvalid={isInvalid} isDisabled={isDisabled} />
-              <div
-                className={style({
-                  flexShrink: 0,
-                  flexGrow: 1,
-                  display: 'flex',
-                  justifyContent: 'end'
-                })}>
-                <CalendarButton isOpen={isOpen} size={size} setButtonHasFocus={setButtonHasFocus} />
-              </div>
-            </FieldGroup>
-            <CalendarPopover shouldFlip={props.shouldFlip}>
-              <RangeCalendar
-                visibleMonths={maxVisibleMonths}
-                createCalendar={createCalendar}
-                commitBehavior={commitBehavior}
-                errorMessage={resolvedErrorMessage} />
-              {showTimeField && (
-                <div className={style({display: 'flex', gap: 16, contain: 'inline-size', marginTop: 24})}>
-                  <TimeField
-                    styles={timeField}
-                    label={stringFormatter.format('datepicker.startTime')}
-                    value={state.timeRange?.start || null}
-                    onChange={v => state.setTime('start', v)}
-                    placeholderValue={timePlaceholder}
-                    granularity={timeGranularity}
-                    minValue={timeMinValue}
-                    maxValue={timeMaxValue}
-                    hourCycle={props.hourCycle}
-                    hideTimeZone={props.hideTimeZone} />
-                  <TimeField
-                    styles={timeField}
-                    label={stringFormatter.format('datepicker.endTime')}
-                    value={state.timeRange?.end || null}
-                    onChange={v => state.setTime('end', v)}
-                    placeholderValue={timePlaceholder}
-                    granularity={timeGranularity}
-                    minValue={timeMinValue}
-                    maxValue={timeMaxValue}
-                    hourCycle={props.hourCycle}
-                    hideTimeZone={props.hideTimeZone} />
+          // 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(' ');
+          return (
+            <>
+              <FieldLabel
+                isDisabled={isDisabled}
+                isRequired={isRequired}
+                size={size}
+                labelPosition={labelPosition}
+                labelAlign={labelAlign}
+                necessityIndicator={necessityIndicator}
+                contextualHelp={contextualHelp}>
+                {label}
+              </FieldLabel>
+              <FieldGroup
+                role="presentation"
+                shouldTurnOffFocusRing={buttonHasFocus}
+                isDisabled={isDisabled}
+                isInvalid={isInvalid}
+                size={size}
+                styles={style({
+                  ...fieldInput(),
+                  textWrap: 'nowrap',
+                  paddingStart: 'edge-to-text',
+                  paddingEnd: 4
+                })({size})}>
+                <DateInputContainer>
+                  <DateInput slot="start" />
+                  <span
+                    aria-hidden="true"
+                    className={style({flexShrink: 0, flexGrow: 0, paddingX: 2})}>
+                    –
+                  </span>
+                  <DateInput slot="end" />
+                </DateInputContainer>
+                <InvalidIndicator isInvalid={isInvalid} isDisabled={isDisabled} />
+                <div
+                  className={style({
+                    flexShrink: 0,
+                    flexGrow: 1,
+                    display: 'flex',
+                    justifyContent: 'end'
+                  })}>
+                  <CalendarButton
+                    isOpen={isOpen}
+                    size={size}
+                    setButtonHasFocus={setButtonHasFocus}
+                  />
                 </div>
-              )}
-            </CalendarPopover>
-            <HelpText
-              size={size}
-              isDisabled={isDisabled}
-              isInvalid={isInvalid}
-              description={descriptionMessage}>
-              {resolvedErrorMessage}
-            </HelpText>
-          </>
-        );
-      }}
-    </AriaDateRangePicker>
-  );
-});
+              </FieldGroup>
+              <CalendarPopover shouldFlip={props.shouldFlip}>
+                <RangeCalendar
+                  visibleMonths={maxVisibleMonths}
+                  createCalendar={createCalendar}
+                  commitBehavior={commitBehavior}
+                  errorMessage={resolvedErrorMessage}
+                />
+                {showTimeField && (
+                  <div
+                    className={style({
+                      display: 'flex',
+                      gap: 16,
+                      contain: 'inline-size',
+                      marginTop: 24
+                    })}>
+                    <TimeField
+                      styles={timeField}
+                      label={stringFormatter.format('datepicker.startTime')}
+                      value={state.timeRange?.start || null}
+                      onChange={v => state.setTime('start', v)}
+                      placeholderValue={timePlaceholder}
+                      granularity={timeGranularity}
+                      minValue={timeMinValue}
+                      maxValue={timeMaxValue}
+                      hourCycle={props.hourCycle}
+                      hideTimeZone={props.hideTimeZone}
+                    />
+                    <TimeField
+                      styles={timeField}
+                      label={stringFormatter.format('datepicker.endTime')}
+                      value={state.timeRange?.end || null}
+                      onChange={v => state.setTime('end', v)}
+                      placeholderValue={timePlaceholder}
+                      granularity={timeGranularity}
+                      minValue={timeMinValue}
+                      maxValue={timeMaxValue}
+                      hourCycle={props.hourCycle}
+                      hideTimeZone={props.hideTimeZone}
+                    />
+                  </div>
+                )}
+              </CalendarPopover>
+              <HelpText
+                size={size}
+                isDisabled={isDisabled}
+                isInvalid={isInvalid}
+                description={descriptionMessage}>
+                {resolvedErrorMessage}
+              </HelpText>
+            </>
+          );
+        }}
+      </AriaDateRangePicker>
+    );
+  }
+);

package/src/Dialog.tsx

@@ -29,19 +29,22 @@ import {StyleProps} from './style-utils';
 import {useDOMRef} from './useDOMRef';
 
 // TODO: what style overrides should be allowed?
-export interface DialogProps extends Omit<RACDialogProps, 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, StyleProps {
+export interface DialogProps
+  extends
+    Omit<RACDialogProps, 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>,
+    StyleProps {
   /**
    * Whether the Dialog is dismissible.
    */
-  isDismissible?: boolean,
+  isDismissible?: boolean;
   /**
    * The size of the Dialog.
    *
    * @default 'M'
    */
-  size?: 'S' | 'M' | 'L' | 'XL',
+  size?: 'S' | 'M' | 'L' | 'XL';
   /** Whether pressing the escape key to close the dialog should be disabled. */
-  isKeyboardDismissDisabled?: boolean
+  isKeyboardDismissDisabled?: boolean;
 }
 
 const image = style({
@@ -61,7 +64,7 @@ const header = style({
   font: 'body'
 });
 
-const content =  style({
+const content = style({
   flexGrow: 1,
   flexShrink: {
     [`@container (height < ${500 / 16}rem)`]: 0
@@ -101,25 +104,29 @@ export const dialogInner = style({
 });
 
 /**
- * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.
- * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.
+ * Dialogs are windows containing contextual information, tasks, or workflows that appear over the
+ * user interface. Depending on the kind of Dialog, further interactions may be blocked until the
+ * Dialog is acknowledged.
  */
 export const Dialog = forwardRef(function Dialog(props: DialogProps, ref: DOMRef) {
   let {size = 'M', isDismissible, isKeyboardDismissDisabled} = props;
   let domRef = useDOMRef(ref);
 
   return (
-    (<Modal size={size} isDismissable={isDismissible} isKeyboardDismissDisabled={isKeyboardDismissDisabled}>
+    <Modal
+      size={size}
+      isDismissable={isDismissible}
+      isKeyboardDismissDisabled={isKeyboardDismissDisabled}>
       <RACDialog
         {...props}
         ref={domRef}
         style={props.UNSAFE_style}
         className={(props.UNSAFE_className || '') + dialogInner}>
-        {composeRenderProps(props.children, (children) => (
+        {composeRenderProps(props.children, children => (
           // Render the children multiple times inside the wrappers we need to implement the layout.
           // Each instance hides certain children so that they are all rendered in the correct locations.
           // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.
-          (<OverlayTriggerStateContext.Provider value={null}>
+          <OverlayTriggerStateContext.Provider value={null}>
             {/* Hero image */}
             <Provider
               values={[
@@ -187,9 +194,7 @@ export const Dialog = forwardRef(function Dialog(props: DialogProps, ref: DOMRef
                   {children}
                 </Provider>
               </div>
-              {props.isDismissible &&
-                <CloseButton styles={style({marginBottom: 12})} />
-              }
+              {props.isDismissible && <CloseButton styles={style({marginBottom: 12})} />}
             </div>
             {/* Main content */}
             <Provider
@@ -228,14 +233,17 @@ export const Dialog = forwardRef(function Dialog(props: DialogProps, ref: DOMRef
                   [HeaderContext, {isHidden: true}],
                   [ContentContext, {isHidden: true}],
                   [FooterContext, {styles: footer}],
-                  [ButtonGroupContext, {isHidden: props.isDismissible, styles: buttonGroup, align: 'end'}]
+                  [
+                    ButtonGroupContext,
+                    {isHidden: props.isDismissible, styles: buttonGroup, align: 'end'}
+                  ]
                 ]}>
                 {children}
               </Provider>
             </div>
-          </OverlayTriggerStateContext.Provider>)
+          </OverlayTriggerStateContext.Provider>
         ))}
       </RACDialog>
-    </Modal>)
+    </Modal>
   );
 });

package/src/DialogContainer.tsx

@@ -17,9 +17,9 @@ import {useSlottedContext} from 'react-aria-components/slots';
 
 export interface DialogContainerProps {
   /** The Dialog to display, if any. */
-  children: ReactNode,
+  children: ReactNode;
   /** Handler that is called when the 'x' button of a dismissable Dialog is clicked. */
-  onDismiss: () => void
+  onDismiss: () => void;
 }
 
 /**
@@ -28,10 +28,7 @@ export interface DialogContainerProps {
  * or when the trigger unmounts while the dialog is open.
  */
 export function DialogContainer(props: DialogContainerProps): ReactNode {
-  let {
-    children,
-    onDismiss
-  } = props;
+  let {children, onDismiss} = props;
 
   let childArray = React.Children.toArray(children);
   if (childArray.length > 1) {
@@ -70,7 +67,7 @@ export interface DialogContainerValue {
   /**
    * A handler to programmatically dismiss the dialog.
    */
-  dismiss(): void
+  dismiss(): void;
 }
 
 export function useDialogContainer(): DialogContainerValue {

package/src/DialogTrigger.tsx

@@ -20,18 +20,16 @@ import {ReactNode} from 'react';
 export interface DialogTriggerProps extends AriaDialogTriggerProps {}
 
 /**
- * DialogTrigger serves as a wrapper around a Dialog and its associated trigger, linking the Dialog's
- * open state with the trigger's press state. Additionally, it allows you to customize the type and
- * positioning of the Dialog.
+ * DialogTrigger serves as a wrapper around a Dialog and its associated trigger, linking the
+ * Dialog's open state with the trigger's press state. Additionally, it allows you to customize the
+ * type and positioning of the Dialog.
  */
 export function DialogTrigger(props: DialogTriggerProps): ReactNode {
   return (
     <AriaDialogTrigger {...props}>
       {/* RAC sets isPressed via PressResponder when the dialog is open.
           We don't want press scaling to appear to get "stuck", so override this. */}
-      <PressResponder isPressed={false}>
-        {props.children}
-      </PressResponder>
+      <PressResponder isPressed={false}>{props.children}</PressResponder>
     </AriaDialogTrigger>
   );
 }