@react-spectrum/s2 1.3.1 → 1.5.0

package/src/Content.tsx

@@ -26,44 +26,49 @@ import {useIsSkeleton, useSkeletonText} from './Skeleton';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 interface ContentProps extends UnsafeStyles, SlotProps {
-  children: ReactNode,
-  styles?: StyleString,
-  isHidden?: boolean,
-  id?: string,
-  itemProp?: string,
-  itemScope?: boolean,
-  itemType?: string,
-  itemID?: string,
-  itemRef?: string
+  children: ReactNode;
+  styles?: StyleString;
+  isHidden?: boolean;
+  id?: string;
+  itemProp?: string;
+  itemScope?: boolean;
+  itemType?: string;
+  itemID?: string;
+  itemRef?: string;
 }
 
 interface HeadingProps extends Omit<ContentProps, 'children'> {
-  children: ReactNode,
-  level?: number
+  children: ReactNode;
+  level?: number;
 }
 
-export const HeadingContext = createContext<ContextValue<Partial<HeadingProps>, DOMRefValue<HTMLHeadingElement>>>(null);
-
-export const Heading = forwardRef(// Wrapper around RAC Heading to unmount when hidden.
-function Heading(props: HeadingProps, ref: DOMRef<HTMLHeadingElement>) {
-  [props, ref] = useSpectrumContextProps(props, ref, HeadingContext);
-  let domRef = useDOMRef(ref);
-  let {UNSAFE_className = '', UNSAFE_style, styles = '', isHidden, slot, ...otherProps} = props;
-  if (isHidden) {
-    return null;
+export const HeadingContext =
+  createContext<ContextValue<Partial<HeadingProps>, DOMRefValue<HTMLHeadingElement>>>(null);
+
+export const Heading = forwardRef(
+  // Wrapper around RAC Heading to unmount when hidden.
+  function Heading(props: HeadingProps, ref: DOMRef<HTMLHeadingElement>) {
+    [props, ref] = useSpectrumContextProps(props, ref, HeadingContext);
+    let domRef = useDOMRef(ref);
+    let {UNSAFE_className = '', UNSAFE_style, styles = '', isHidden, slot, ...otherProps} = props;
+    if (isHidden) {
+      return null;
+    }
+
+    return (
+      <RACHeading
+        {...otherProps}
+        ref={domRef}
+        className={UNSAFE_className + styles}
+        style={UNSAFE_style}
+        slot={slot || undefined}
+      />
+    );
   }
+);
 
-  return (
-    <RACHeading
-      {...otherProps}
-      ref={domRef}
-      className={UNSAFE_className + styles}
-      style={UNSAFE_style}
-      slot={slot || undefined} />
-  );
-});
-
-export const HeaderContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLElement>>>(null);
+export const HeaderContext =
+  createContext<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLElement>>>(null);
 
 export const Header = forwardRef(function Header(props: ContentProps, ref: DOMRef) {
   [props, ref] = useSpectrumContextProps(props, ref, HeaderContext);
@@ -79,13 +84,18 @@ export const Header = forwardRef(function Header(props: ContentProps, ref: DOMRe
       ref={domRef}
       className={UNSAFE_className + styles}
       style={UNSAFE_style}
-      slot={slot || undefined} />
+      slot={slot || undefined}
+    />
   );
 });
 
-export const ContentContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const ContentContext =
+  createContext<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLDivElement>>>(null);
 
-export const Content = forwardRef(function Content(props: ContentProps, ref: DOMRef<HTMLDivElement>) {
+export const Content = forwardRef(function Content(
+  props: ContentProps,
+  ref: DOMRef<HTMLDivElement>
+) {
   [props, ref] = useSpectrumContextProps(props, ref, ContentContext);
   let domRef = useDOMRef(ref);
   let {UNSAFE_className = '', UNSAFE_style, styles = '', isHidden, slot, ...otherProps} = props;
@@ -98,7 +108,8 @@ export const Content = forwardRef(function Content(props: ContentProps, ref: DOM
       ref={domRef}
       className={UNSAFE_className + styles}
       style={UNSAFE_style}
-      slot={slot || undefined} />
+      slot={slot || undefined}
+    />
   );
 });
 
@@ -107,7 +118,15 @@ export const TextContext = createContext<ContextValue<Partial<ContentProps>, DOM
 export const Text = forwardRef(function Text(props: ContentProps, ref: DOMRef) {
   [props, ref] = useSpectrumContextProps(props, ref, TextContext);
   let domRef = useDOMRef(ref);
-  let {UNSAFE_className = '', UNSAFE_style, styles = '', isHidden, slot, children, ...otherProps} = props;
+  let {
+    UNSAFE_className = '',
+    UNSAFE_style,
+    styles = '',
+    isHidden,
+    slot,
+    children,
+    ...otherProps
+  } = props;
   let racContext = useContext(RACTextContext);
   let isSkeleton = useIsSkeleton();
   [children, UNSAFE_style] = useSkeletonText(children, UNSAFE_style);
@@ -151,7 +170,8 @@ export const Keyboard = forwardRef(function Keyboard(props: ContentProps, ref: D
       ref={domRef}
       className={UNSAFE_className + styles}
       style={UNSAFE_style}
-      slot={slot || undefined} />
+      slot={slot || undefined}
+    />
   );
 });
 
@@ -170,6 +190,7 @@ export const Footer = forwardRef(function Footer(props: ContentProps, ref: DOMRe
       ref={domRef}
       className={UNSAFE_className + styles}
       style={UNSAFE_style}
-      slot={slot || undefined} />
+      slot={slot || undefined}
+    />
   );
 });

package/src/ContextualHelp.tsx

@@ -1,6 +1,11 @@
 import {ActionButton} from './ActionButton';
 import {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';
-import {ContentContext, FooterContext, HeadingContext, TextContext as SpectrumTextContext} from './Content';
+import {
+  ContentContext,
+  FooterContext,
+  HeadingContext,
+  TextContext as SpectrumTextContext
+} from './Content';
 import {ContextValue, DEFAULT_SLOT, Provider} from 'react-aria-components/slots';
 import {createContext, forwardRef, ReactNode} from 'react';
 import {dialogInner} from './Dialog';
@@ -12,20 +17,20 @@ import intlMessages from '../intl/*.json';
 import {mergeProps} from 'react-aria/mergeProps';
 import {mergeStyles} from '../style/runtime';
 import {Placement} from 'react-aria-components/Popover';
-// @ts-ignore
 import {Popover, PopoverDialogProps} from './Popover';
 import {space, style} from '../style' with {type: 'macro'};
-import {StyleProps} from './style-utils' with { type: 'macro' };
+import {StyleProps} from './style-utils' with {type: 'macro'};
 import {TextContext} from 'react-aria-components/Text';
 import {useId} from 'react-aria/useId';
 import {useLabels} from 'react-aria/private/utils/useLabels';
 import {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface ContextualHelpPopoverProps extends PopoverDialogProps {
+export interface ContextualHelpPopoverProps extends Omit<PopoverDialogProps, 'isNonModal'> {
   /**
-   * The children of the contextual help popover. Supports Heading, Content, and Footer elements. */
-  children: ReactNode
+   * The children of the contextual help popover. Supports Heading, Content, and Footer elements.
+   */
+  children: ReactNode;
 }
 
 const wrappingDiv = style({
@@ -51,42 +56,55 @@ export function ContextualHelpPopover(props: ContextualHelpPopoverProps) {
   let titleId = useId();
 
   return (
-    <Popover
-      padding="none"
-      hideArrow
-      aria-labelledby={titleId}
-      {...popoverProps}>
-      <div
-        className={wrappingDiv}>
+    <Popover padding="none" hideArrow aria-labelledby={titleId} {...popoverProps}>
+      <div className={wrappingDiv}>
         <div
-
-          className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: 'calc(self(paddingTop) * -1)', padding: 24}))}>
+          className={mergeStyles(
+            dialogInner,
+            style({borderRadius: 'none', margin: 'calc(self(paddingTop) * -1)', padding: 24})
+          )}>
           <Provider
             values={[
-              [TextContext, {
-                slots: {
-                  [DEFAULT_SLOT]: {}
+              [
+                TextContext,
+                {
+                  slots: {
+                    [DEFAULT_SLOT]: {}
+                  }
                 }
-              }],
+              ],
               // Make sure to clear context from above Menu
               [SpectrumTextContext, null],
-              [HeadingContext, {
-                styles: headingStyles,
-                slots: {
-                  // needed so combobox/picker does not need to provide slot="title" to their provided
-                  // ContextualHelp (they get the aria-labelled by from the button)
-                  // otherwise, use the heading if available aka unavaiable menu item
-                  [DEFAULT_SLOT]: {styles: headingStyles},
-                  title: {id: titleId, styles: headingStyles, level: 2}
+              [
+                HeadingContext,
+                {
+                  styles: headingStyles,
+                  slots: {
+                    // needed so combobox/picker does not need to provide slot="title" to their provided
+                    // ContextualHelp (they get the aria-labelled by from the button)
+                    // otherwise, use the heading if available aka unavaiable menu item
+                    [DEFAULT_SLOT]: {styles: headingStyles},
+                    title: {id: titleId, styles: headingStyles, level: 2}
+                  }
+                }
+              ],
+              [
+                ContentContext,
+                {
+                  styles: style({
+                    font: 'body-sm'
+                  })
                 }
-              }],
-              [ContentContext, {styles: style({
-                font: 'body-sm'
-              })}],
-              [FooterContext, {styles: style({
-                font: 'body-sm',
-                marginTop: 16
-              })}]
+              ],
+              [
+                FooterContext,
+                {
+                  styles: style({
+                    font: 'body-sm',
+                    marginTop: 16
+                  })
+                }
+              ]
             ]}>
             {children}
           </Provider>
@@ -102,33 +120,48 @@ export interface ContextualHelpStyleProps {
    *
    * @default 'help'
    */
-  variant?: 'info' | 'help'
+  variant?: 'info' | 'help';
 }
-export interface ContextualHelpProps extends
-  Pick<DialogTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange'>,
-  Pick<PopoverDialogProps, 'shouldFlip' | 'offset' | 'crossOffset' | 'placement' | 'containerPadding'>,
-  ContextualHelpStyleProps, StyleProps, DOMProps, AriaLabelingProps {
+export interface ContextualHelpProps
+  extends
+    Pick<DialogTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange'>,
+    Pick<
+      PopoverDialogProps,
+      'shouldFlip' | 'offset' | 'crossOffset' | 'placement' | 'containerPadding'
+    >,
+    ContextualHelpStyleProps,
+    StyleProps,
+    DOMProps,
+    AriaLabelingProps {
   /**
    * The placement of the popover with respect to the action button.
+   *
    * @default 'bottom start'
    */
-  placement?: Placement,
+  placement?: Placement;
   /** Contents of the Contextual Help popover. */
-  children: ReactNode,
+  children: ReactNode;
   /**
    * The size of the ActionButton.
    *
    * @default 'XS'
    */
-  size?: 'XS' | 'S'
+  size?: 'XS' | 'S';
 }
 
-export const ContextualHelpContext = createContext<ContextValue<Partial<ContextualHelpProps>, FocusableRefValue<HTMLButtonElement>>>(null);
+export const ContextualHelpContext =
+  createContext<ContextValue<Partial<ContextualHelpProps>, FocusableRefValue<HTMLButtonElement>>>(
+    null
+  );
 
 /**
- * Contextual help shows a user extra information about the state of an adjacent component, or a total view.
+ * Contextual help shows a user extra information about the state of an adjacent component, or a
+ * total view.
  */
-export const ContextualHelp = forwardRef(function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {
+export const ContextualHelp = forwardRef(function ContextualHelp(
+  props: ContextualHelpProps,
+  ref: FocusableRef<HTMLButtonElement>
+) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   [props, ref] = useSpectrumContextProps(props, ref, ContextualHelpContext);
   let {
@@ -152,15 +185,14 @@ export const ContextualHelp = forwardRef(function ContextualHelp(props: Contextu
   // then ContextualHelp variant
   let labelProps = useLabels(props);
   let label = stringFormatter.format(`contextualhelp.${variant}`);
-  labelProps['aria-label'] = labelProps['aria-label'] ? labelProps['aria-label'] + ' ' + label : label;
+  labelProps['aria-label'] = labelProps['aria-label']
+    ? labelProps['aria-label'] + ' ' + label
+    : label;
 
   let buttonProps = filterDOMProps(props, {labelable: true});
 
   return (
-    <DialogTrigger
-      isOpen={isOpen}
-      defaultOpen={defaultOpen}
-      onOpenChange={onOpenChange}>
+    <DialogTrigger isOpen={isOpen} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
       <ActionButton
         slot={null}
         ref={ref}

package/src/CustomDialog.tsx

@@ -25,69 +25,77 @@ import {
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from './useDOMRef';
 
-export interface CustomDialogProps extends Omit<RACDialogProps, 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, StyleProps {
+export interface CustomDialogProps
+  extends
+    Omit<RACDialogProps, 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>,
+    StyleProps {
   /**
    * The size of the Dialog.
    */
-  size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover',
+  size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover';
   /**
    * Whether the Dialog is dismissible.
    */
-  isDismissible?: boolean,
+  isDismissible?: boolean;
   /** Whether pressing the escape key to close the dialog should be disabled. */
-  isKeyboardDismissDisabled?: boolean,
+  isKeyboardDismissDisabled?: boolean;
   /**
    * The amount of padding around the contents of the dialog.
+   *
    * @default 'default'
    */
-  padding?: 'default' | 'none'
+  padding?: 'default' | 'none';
 }
 
-const dialogStyle = style({
-  padding: {
+const dialogStyle = style(
+  {
     padding: {
-      default: {
-        default: 24,
-        sm: 32
-      },
-      none: 0
-    }
+      padding: {
+        default: {
+          default: 24,
+          sm: 32
+        },
+        none: 0
+      }
+    },
+    boxSizing: 'border-box',
+    outlineStyle: 'none',
+    borderRadius: 'inherit',
+    overflow: 'auto',
+    position: 'relative',
+    size: 'full',
+    maxSize: 'inherit'
   },
-  boxSizing: 'border-box',
-  outlineStyle: 'none',
-  borderRadius: 'inherit',
-  overflow: 'auto',
-  position: 'relative',
-  size: 'full',
-  maxSize: 'inherit'
-}, getAllowedOverrides({height: true, width: true}));
+  getAllowedOverrides({height: true, width: true})
+);
 
 /**
  * A CustomDialog is a floating window with a custom layout.
  */
-export const CustomDialog = forwardRef(function CustomDialog(props: CustomDialogProps, ref: DOMRef) {
-  let {
-    size,
-    isDismissible,
-    isKeyboardDismissDisabled,
-    padding = 'default'
-  } = props;
+export const CustomDialog = forwardRef(function CustomDialog(
+  props: CustomDialogProps,
+  ref: DOMRef
+) {
+  let {size, isDismissible, isKeyboardDismissDisabled, padding = 'default'} = 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 || '') + dialogStyle({padding}, props.styles)}>
-        {composeRenderProps(props.children, (children) => (
+        {composeRenderProps(props.children, children => (
           // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.
-          (<OverlayTriggerStateContext.Provider value={null}>
+          <OverlayTriggerStateContext.Provider value={null}>
             {children}
-          </OverlayTriggerStateContext.Provider>)
+          </OverlayTriggerStateContext.Provider>
         ))}
       </RACDialog>
-    </Modal>)
+    </Modal>
   );
 });

package/src/DateField.tsx

@@ -22,28 +22,42 @@ import {
 
 import {ContextValue} from 'react-aria-components/slots';
 import {createContext, forwardRef, PropsWithChildren, ReactElement, Ref, useContext} from 'react';
-import {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {
+  field,
+  fieldInput,
+  getAllowedOverrides,
+  StyleProps
+} from './style-utils' with {type: 'macro'};
 import {FieldErrorIcon, 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 {style} from '../style' with {type: 'macro'};
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-
-export interface DateFieldProps<T extends DateValue> extends
-  Omit<AriaDateFieldProps<T>, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>,
-  StyleProps,
-  SpectrumLabelableProps,
-  HelpTextProps {
-    /**
-     * The size of the DateField.
-     *
-     * @default 'M'
-     */
-    size?: 'S' | 'M' | 'L' | 'XL'
+export interface DateFieldProps<T extends DateValue>
+  extends
+    Omit<
+      AriaDateFieldProps<T>,
+      'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes
+    >,
+    StyleProps,
+    SpectrumLabelableProps,
+    HelpTextProps {
+  /**
+   * The size of the DateField.
+   *
+   * @default 'M'
+   */
+  size?: 'S' | 'M' | 'L' | 'XL';
 }
 
-export const DateFieldContext = createContext<ContextValue<Partial<DateFieldProps<any>>, HTMLDivElement>>(null);
+export const DateFieldContext =
+  createContext<ContextValue<Partial<DateFieldProps<any>>, HTMLDivElement>>(null);
 
 const segmentContainer = style({
   flexGrow: 1,
@@ -94,9 +108,9 @@ const iconStyles = style({
  * DateFields allow users to enter and edit date and time values using a keyboard.
  * Each part of a date value is displayed in an individually editable segment.
  */
-export const DateField = /*#__PURE__*/ (forwardRef as forwardRefType)(function DateField<T extends DateValue>(
-  props: DateFieldProps<T>, ref: Ref<HTMLDivElement>
-): ReactElement {
+export const DateField = /*#__PURE__*/ (forwardRef as forwardRefType)(function DateField<
+  T extends DateValue
+>(props: DateFieldProps<T>, ref: Ref<HTMLDivElement>): ReactElement {
   [props, ref] = useSpectrumContextProps(props, ref, DateFieldContext);
   let {
     label,
@@ -121,11 +135,17 @@ export const DateField = /*#__PURE__*/ (forwardRef as forwardRefType)(function D
       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}) => {
         return (
           <>
@@ -176,15 +196,25 @@ export function DateInputContainer(props: PropsWithChildren): ReactElement {
 export function DateInput(props: Omit<DateInputProps, 'children'>): ReactElement {
   return (
     <AriaDateInput className="" {...props}>
-      {(segment) => (
+      {segment => (
         <AriaDateSegment
           segment={segment}
-          className={(renderProps) => dateSegment({...renderProps, isPunctuation: segment.type === 'literal'})} />
+          className={renderProps =>
+            dateSegment({...renderProps, isPunctuation: segment.type === 'literal'})
+          }
+        />
       )}
     </AriaDateInput>
   );
 }
 
-export function InvalidIndicator(props: {isInvalid: boolean, isDisabled: boolean}): ReactElement | null {
-  return props.isInvalid ? <div className={iconStyles}><FieldErrorIcon isDisabled={props.isDisabled} /></div> : null;
+export function InvalidIndicator(props: {
+  isInvalid: boolean;
+  isDisabled: boolean;
+}): ReactElement | null {
+  return props.isInvalid ? (
+    <div className={iconStyles}>
+      <FieldErrorIcon isDisabled={props.isDisabled} />
+    </div>
+  ) : null;
 }