@react-spectrum/s2 0.9.2 → 0.10.0

package/src/DatePicker.tsx

@@ -14,56 +14,288 @@ import {
   DatePicker as AriaDatePicker,
   DatePickerProps as AriaDatePickerProps,
   Button,
-  Calendar,
-  CalendarCell,
-  CalendarGrid,
-  DateInput,
-  DateSegment,
+  ButtonRenderProps,
+  ContextValue,
   DateValue,
   Dialog,
-  FieldError,
-  Group,
-  Heading,
-  Label,
-  Popover,
-  Text
+  FormContext,
+  OverlayTriggerStateContext,
+  Provider,
+  TimeValue
 } from 'react-aria-components';
-import {HelpTextProps} from '@react-types/shared';
-import {ReactNode} from 'react';
+import {baseColor, focusRing, fontRelative, space, style} from '../style' with {type: 'macro'};
+import {Calendar, CalendarProps, IconContext, TimeField} from '../';
+import CalendarIcon from '../s2wf-icons/S2_Icon_Calendar_20_N.svg';
+import {controlBorderRadius, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {createContext, forwardRef, PropsWithChildren, ReactElement, Ref, useContext, useRef, useState} from 'react';
+import {DateInput, DateInputContainer, InvalidIndicator} from './DateField';
+import {FieldGroup, FieldLabel, HelpText} from './Field';
+import {forwardRefType, GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
+import {PopoverBase} from './Popover';
+import {pressScale} from './pressScale';
+import {useLocalizedStringFormatter} from '@react-aria/i18n';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface DatePickerProps<T extends DateValue>
-  extends AriaDatePickerProps<T>, HelpTextProps {
-  label?: ReactNode
+
+export interface DatePickerProps<T extends DateValue> extends
+  Omit<AriaDatePickerProps<T>, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>,
+  Pick<CalendarProps<T>, 'createCalendar' | 'pageBehavior' | 'isDateUnavailable'>,
+  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 function DatePicker<T extends DateValue>(
-  {label, description, errorMessage, ...props}: DatePickerProps<T>
-): ReactNode {
+export const DatePickerContext = createContext<ContextValue<Partial<DatePickerProps<any>>, HTMLDivElement>>(null);
+
+const inputButton = style<ButtonRenderProps & {isOpen: boolean, size: 'S' | 'M' | 'L' | 'XL'}>({
+  ...focusRing(),
+  ...controlBorderRadius('sm'),
+  position: 'relative',
+  font: {
+    size: {
+      S: 'ui-sm',
+      M: 'ui',
+      L: 'ui-lg',
+      XL: 'ui-xl'
+    }
+  },
+  cursor: 'default',
+  display: 'flex',
+  textAlign: 'center',
+  borderStyle: 'none',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: {
+    size: {
+      S: 16,
+      M: 20,
+      L: 24,
+      XL: 32
+    }
+  },
+  height: 'auto',
+  marginStart: 'text-to-control',
+  aspectRatio: 'square',
+  flexShrink: 0,
+  transition: {
+    default: 'default',
+    forcedColors: 'none'
+  },
+  backgroundColor: {
+    default: baseColor('gray-100'),
+    isOpen: 'gray-200',
+    isDisabled: 'disabled',
+    forcedColors: {
+      default: 'ButtonText',
+      isHovered: 'Highlight',
+      isOpen: 'Highlight',
+      isDisabled: 'GrayText'
+    }
+  },
+  color: {
+    default: baseColor('neutral'),
+    isDisabled: 'disabled',
+    forcedColors: 'ButtonFace'
+  }
+});
+
+export const timeField = style({
+  flexShrink: 1,
+  flexGrow: 0,
+  minWidth: 0,
+  width: 'unset'
+});
+
+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 {
+    label,
+    contextualHelp,
+    description: descriptionMessage,
+    errorMessage,
+    isRequired,
+    size = 'M',
+    labelPosition = 'top',
+    necessityIndicator,
+    labelAlign = 'start',
+    UNSAFE_style,
+    UNSAFE_className,
+    styles,
+    placeholderValue,
+    maxVisibleMonths = 1,
+    firstDayOfWeek,
+    createCalendar,
+    pageBehavior,
+    isDateUnavailable,
+    ...dateFieldProps
+  } = props;
+  let formContext = useContext(FormContext);
+  let [buttonHasFocus, setButtonHasFocus] = useState(false);
+
   return (
-    <AriaDatePicker {...props}>
-      <Label>{label}</Label>
-      <Group>
-        <DateInput>
-          {(segment) => <DateSegment segment={segment} />}
-        </DateInput>
-        <Button>▼</Button>
-      </Group>
-      {description && <Text slot="description">{description}</Text>}
-      <FieldError>{errorMessage}</FieldError>
-      <Popover>
-        <Dialog>
-          <Calendar>
-            <header>
-              <Button slot="previous">◀</Button>
-              <Heading />
-              <Button slot="next">▶</Button>
-            </header>
-            <CalendarGrid>
-              {(date) => <CalendarCell date={date} />}
-            </CalendarGrid>
-          </Calendar>
-        </Dialog>
-      </Popover>
+    <AriaDatePicker
+      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 (
+          <>
+            <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: {
+                  size: {
+                    S: 2,
+                    M: 4,
+                    L: space(6),
+                    XL: space(6)
+                  }
+                }
+              })({size})}>
+              <DateInputContainer>
+                <DateInput />
+              </DateInputContainer>
+              <InvalidIndicator isInvalid={isInvalid} isDisabled={isDisabled} />
+              <CalendarButton isOpen={isOpen} size={size} setButtonHasFocus={setButtonHasFocus} />
+            </FieldGroup>
+            <CalendarPopover>
+              <Calendar
+                visibleMonths={maxVisibleMonths}
+                createCalendar={createCalendar}
+                firstDayOfWeek={firstDayOfWeek}
+                isDateUnavailable={isDateUnavailable}
+                pageBehavior={pageBehavior} />
+              {showTimeField && (
+                <div className={style({display: 'flex', gap: 16, contain: 'inline-size'})}>
+                  <TimeField
+                    styles={timeField}
+                    label={stringFormatter.format('datepicker.time')}
+                    value={state.timeValue}
+                    // TODO: why do i need the cast?
+                    onChange={v => state.setTimeValue(v as TimeValue)}
+                    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}>
+              {errorMessage}
+            </HelpText>
+          </>
+        );
+      }}
     </AriaDatePicker>
   );
+});
+
+export function CalendarPopover(props: PropsWithChildren): ReactElement {
+  return (
+    <PopoverBase
+      hideArrow
+      styles={style({
+        paddingX: 16,
+        paddingY: 32,
+        overflow: 'auto',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 16
+      })}>
+      <Dialog>
+        <Provider
+          values={[
+            [OverlayTriggerStateContext, null]
+          ]}>
+          {props.children}
+        </Provider>
+      </Dialog>
+    </PopoverBase>
+  );
+}
+
+
+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 (
+    <Button
+      ref={buttonRef}
+      // Prevent press scale from sticking while DatePicker is open.
+      // @ts-ignore
+      isPressed={false}
+      onFocusChange={setButtonHasFocus}
+      style={pressScale(buttonRef)}
+      className={renderProps => inputButton({
+        ...renderProps,
+        size,
+        isOpen
+      })}>
+      <Provider
+        values={[
+          [IconContext, {
+            styles: style({
+              '--iconPrimary': {
+                type: 'fill',
+                value: 'currentColor'
+              },
+              size: fontRelative(14)
+            })
+          }]
+        ]}>
+        <CalendarIcon />
+      </Provider>
+    </Button>
+  );
 }

package/src/DateRangePicker.tsx

@@ -13,61 +13,179 @@
 import {
   DateRangePicker as AriaDateRangePicker,
   DateRangePickerProps as AriaDateRangePickerProps,
-  Button,
-  CalendarCell,
-  CalendarGrid,
-  DateInput,
-  DateSegment,
+  ContextValue,
   DateValue,
-  Dialog,
-  FieldError,
-  Group,
-  Heading,
-  Label,
-  Popover,
-  RangeCalendar,
-  Text
+  FormContext
 } from 'react-aria-components';
-import {HelpTextProps} from '@react-types/shared';
-import {ReactNode} from 'react';
+import {CalendarButton, CalendarPopover, timeField} from './DatePicker';
+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 {FieldGroup, FieldLabel, HelpText} from './Field';
+import {forwardRefType, GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
+import {RangeCalendar, RangeCalendarProps, TimeField} from '../';
+import {style} from '../style' with {type: 'macro'};
+import {useLocalizedStringFormatter} from '@react-aria/i18n';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface DateRangePickerProps<T extends DateValue>
-  extends AriaDateRangePickerProps<T>, HelpTextProps {
-  label?: ReactNode
+
+export interface DateRangePickerProps<T extends DateValue> extends
+  Omit<AriaDateRangePickerProps<T>, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>,
+  Pick<RangeCalendarProps<T>, 'createCalendar' | 'pageBehavior' | 'isDateUnavailable'>,
+  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 function DateRangePicker<T extends DateValue>(
-  {label, description, errorMessage, ...props}: DateRangePickerProps<T>
-): ReactNode {
+export const DateRangePickerContext = createContext<ContextValue<Partial<DateRangePickerProps<any>>, HTMLDivElement>>(null);
+
+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,
+    firstDayOfWeek,
+    createCalendar,
+    pageBehavior,
+    isDateUnavailable,
+    ...dateFieldProps
+  } = props;
+  let formContext = useContext(FormContext);
+  let [buttonHasFocus, setButtonHasFocus] = useState(false);
+
   return (
-    <AriaDateRangePicker {...props}>
-      <Label>{label}</Label>
-      <Group>
-        <DateInput slot="start">
-          {(segment) => <DateSegment segment={segment} />}
-        </DateInput>
-        <span aria-hidden="true">–</span>
-        <DateInput slot="end">
-          {(segment) => <DateSegment segment={segment} />}
-        </DateInput>
-        <Button>▼</Button>
-      </Group>
-      {description && <Text slot="description">{description}</Text>}
-      <FieldError>{errorMessage}</FieldError>
-      <Popover>
-        <Dialog>
-          <RangeCalendar>
-            <header>
-              <Button slot="previous">◀</Button>
-              <Heading />
-              <Button slot="next">▶</Button>
-            </header>
-            <CalendarGrid>
-              {(date) => <CalendarCell date={date} />}
-            </CalendarGrid>
-          </RangeCalendar>
-        </Dialog>
-      </Popover>
+    <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 (
+          <>
+            <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>
+              <RangeCalendar
+                visibleMonths={maxVisibleMonths}
+                createCalendar={createCalendar}
+                firstDayOfWeek={firstDayOfWeek}
+                isDateUnavailable={isDateUnavailable}
+                pageBehavior={pageBehavior} />
+              {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}>
+              {errorMessage}
+            </HelpText>
+          </>
+        );
+      }}
     </AriaDateRangePicker>
   );
-}
+});

package/src/Dialog.tsx

@@ -14,7 +14,7 @@ import {ButtonGroupContext} from './ButtonGroup';
 import {CloseButton} from './CloseButton';
 import {composeRenderProps, OverlayTriggerStateContext, Provider, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';
 import {ContentContext, FooterContext, HeaderContext, HeadingContext} from './Content';
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, GlobalDOMAttributes} from '@react-types/shared';
 import {forwardRef} from 'react';
 import {ImageContext} from './Image';
 import {Modal} from './Modal';
@@ -23,7 +23,7 @@ import {StyleProps} from './style-utils';
 import {useDOMRef} from '@react-spectrum/utils';
 
 // TODO: what style overrides should be allowed?
-export interface DialogProps extends Omit<RACDialogProps, 'className' | 'style'>, StyleProps {
+export interface DialogProps extends Omit<RACDialogProps, 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps {
   /**
    * Whether the Dialog is dismissible.
    */

package/src/Disclosure.tsx

@@ -11,7 +11,7 @@
  */
 
 import {ActionButtonContext} from './ActionButton';
-import {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue, forwardRefType} from '@react-types/shared';
+import {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue, forwardRefType, GlobalDOMAttributes} from '@react-types/shared';
 import {baseColor, focusRing, lightDark, space, style} from '../style' with { type: 'macro' };
 import {Button, ContextValue, DisclosureStateContext, Heading, Provider, Disclosure as RACDisclosure, DisclosurePanel as RACDisclosurePanel, DisclosurePanelProps as RACDisclosurePanelProps, DisclosureProps as RACDisclosureProps, useLocale, useSlottedContext} from 'react-aria-components';
 import {CenterBaseline} from './CenterBaseline';
@@ -22,7 +22,7 @@ import React, {createContext, forwardRef, ReactNode, useContext} from 'react';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface DisclosureProps extends Omit<RACDisclosureProps, 'className' | 'style' | 'children'>, StyleProps {
+export interface DisclosureProps extends Omit<RACDisclosureProps, 'className' | 'style' | 'children' | keyof GlobalDOMAttributes>, StyleProps {
   /**
    * The size of the disclosure.
    * @default 'M'

package/src/Divider.tsx

@@ -12,7 +12,7 @@
 
 import {ContextValue, Separator as RACSeparator, SeparatorProps as RACSeparatorProps} from 'react-aria-components';
 import {createContext, forwardRef} from 'react';
-import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';
 import {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
@@ -38,7 +38,7 @@ interface DividerSpectrumProps {
 }
 
 // TODO: allow overriding height (only when orientation is vertical)??
-export interface DividerProps extends DividerSpectrumProps, Omit<RACSeparatorProps, 'className' | 'style' | 'elementType'>, StyleProps {}
+export interface DividerProps extends DividerSpectrumProps, Omit<RACSeparatorProps, 'className' | 'style' | 'elementType' | keyof GlobalDOMAttributes>, StyleProps {}
 
 export const DividerContext = createContext<ContextValue<Partial<DividerProps>, DOMRefValue>>(null);
 

package/src/DropZone.tsx

@@ -12,7 +12,7 @@
 
 import {ContextValue, DropZoneRenderProps, DropZone as RACDropZone, DropZoneProps as RACDropZoneProps} from 'react-aria-components';
 import {createContext, forwardRef, ReactNode} from 'react';
-import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
+import {DOMProps, DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';
 import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {IllustratedMessageContext} from './IllustratedMessage';
 // @ts-ignore
@@ -22,7 +22,7 @@ import {useDOMRef} from '@react-spectrum/utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface DropZoneProps extends Omit<RACDropZoneProps, 'className' | 'style' | 'children' | 'isDisabled' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, UnsafeStyles, DOMProps {
+export interface DropZoneProps extends Omit<RACDropZoneProps, 'className' | 'style' | 'children' | 'isDisabled' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | keyof GlobalDOMAttributes>, UnsafeStyles, DOMProps {
   /** Spectrum-defined styles, returned by the `style()` macro. */
   styles?: StylesPropWithHeight,
   /** The content to display in the drop zone. */

package/src/Field.tsx

@@ -152,7 +152,8 @@ export const FieldLabel = forwardRef(function FieldLabel(props: FieldLabelProps,
 interface FieldGroupProps extends Omit<GroupProps, 'className' | 'style' | 'children'>, UnsafeStyles {
   size?: 'S' | 'M' | 'L' | 'XL',
   children: ReactNode,
-  styles?: StyleString
+  styles?: StyleString,
+  shouldTurnOffFocusRing?: boolean
 }
 
 const fieldGroupStyles = style({
@@ -187,10 +188,11 @@ const fieldGroupStyles = style({
 });
 
 export const FieldGroup = forwardRef(function FieldGroup(props: FieldGroupProps, ref: ForwardedRef<HTMLDivElement>) {
+  let {shouldTurnOffFocusRing, ...otherProps} = props;
   return (
     <Group
       ref={ref}
-      {...props}
+      {...otherProps}
       onPointerDown={(e) => {
         // Forward focus to input element when clicking on a non-interactive child (e.g. icon or padding)
         if (e.pointerType === 'mouse' && !(e.target as Element).closest('button,input,textarea')) {
@@ -206,7 +208,12 @@ export const FieldGroup = forwardRef(function FieldGroup(props: FieldGroupProps,
       }}
       style={props.UNSAFE_style}
       className={renderProps => (props.UNSAFE_className || '') + ' ' + centerBaselineBefore + mergeStyles(
-        fieldGroupStyles({...renderProps, size: props.size || 'M'}),
+        fieldGroupStyles({
+          ...renderProps,
+          isFocusWithin: shouldTurnOffFocusRing ? false : renderProps.isFocusWithin,
+          isFocusVisible: shouldTurnOffFocusRing ? false : renderProps.isFocusVisible,
+          size: props.size || 'M'
+        }),
         props.styles
       )} />
   );