@react-spectrum/s2 1.0.0 → 1.2.0

package/src/Checkbox.tsx

@@ -36,7 +36,7 @@ interface CheckboxStyleProps {
 
 interface RenderProps extends CheckboxRenderProps, CheckboxStyleProps {}
 
-export interface CheckboxProps extends Omit<AriaCheckboxProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps, CheckboxStyleProps {
+export interface CheckboxProps extends Omit<AriaCheckboxProps, 'className' | 'style' | 'render' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps, CheckboxStyleProps {
   /** The label for the element. */
   children?: ReactNode
 }
@@ -110,6 +110,7 @@ export const box = style<RenderProps>({
 });
 
 export const iconStyles = style({
+  pointerEvents: 'none',
   '--iconPrimary': {
     type: 'fill',
     value: {

package/src/CheckboxGroup.tsx

@@ -25,7 +25,7 @@ import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'className' | 'style' | 'children' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps {
+export interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'className' | 'style' | 'render' | 'children' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps {
   /**
    * The size of the Checkboxes in the CheckboxGroup.
    *

package/src/CoachMark.tsx

@@ -320,7 +320,7 @@ const actionButtonSize = {
   XL: 'L'
 } as const;
 
-export const CoachMarkContext = createContext<ContextValue<CoachMarkProps, HTMLElement>>({});
+export const CoachMarkContext = createContext<ContextValue<Partial<CoachMarkProps>, HTMLElement>>({});
 
 export const CoachMark = forwardRef((props: CoachMarkProps, ref: ForwardedRef<HTMLElement>) => {
   let colorScheme = useContext(ColorSchemeContext);

package/src/ColorArea.tsx

@@ -24,7 +24,7 @@ import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface ColorAreaProps extends Omit<AriaColorAreaProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps {}
+export interface ColorAreaProps extends Omit<AriaColorAreaProps, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, StyleProps {}
 
 export const ColorAreaContext = createContext<ContextValue<Partial<ColorAreaProps>, DOMRefValue<HTMLDivElement>>>(null);
 

package/src/ColorField.tsx

@@ -26,7 +26,7 @@ import {style} from '../style' with {type: 'macro'};
 import {TextFieldRef} from '@react-types/textfield';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps, Pick<InputProps, 'placeholder'> {
+export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps, Pick<InputProps, 'placeholder'> {
   /**
    * The size of the color field.
    *

package/src/ColorSlider.tsx

@@ -27,7 +27,7 @@ import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface ColorSliderProps extends Omit<AriaColorSliderProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>, Pick<SpectrumLabelableProps, 'contextualHelp'>, StyleProps {
+export interface ColorSliderProps extends Omit<AriaColorSliderProps, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, Pick<SpectrumLabelableProps, 'contextualHelp'>, StyleProps {
   label?: string
 }
 

package/src/ColorSwatch.tsx

@@ -24,7 +24,7 @@ import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface ColorSwatchProps extends Omit<AriaColorSwatchProps, 'className' | 'style' | keyof GlobalDOMAttributes>, UnsafeStyles {
+export interface ColorSwatchProps extends Omit<AriaColorSwatchProps, 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, UnsafeStyles {
   /**
    * The size of the ColorSwatch.
    * @default 'M'

package/src/ColorWheel.tsx

@@ -24,7 +24,7 @@ import {StyleProps} from './style-utils';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface ColorWheelProps extends Omit<AriaColorWheelProps, 'children' | 'className' | 'style' | 'outerRadius' | 'innerRadius' | keyof GlobalDOMAttributes>, StyleProps {
+export interface ColorWheelProps extends Omit<AriaColorWheelProps, 'children' | 'className' | 'style' | 'render' | 'outerRadius' | 'innerRadius' | keyof GlobalDOMAttributes>, StyleProps {
   /**
    * @default 192
    */
@@ -51,7 +51,7 @@ export const ColorWheel = forwardRef(function ColorWheel(props: ColorWheelProps,
       outerRadius={outerRadius}
       innerRadius={innerRadius}
       ref={containerRef}
-      style={UNSAFE_style}
+      style={{...UNSAFE_style, width: outerRadius * 2, height: outerRadius * 2}}
       className={UNSAFE_className + styles}>
       {({isDisabled, state}) => (<>
         <ColorWheelTrack

package/src/ComboBox.tsx

@@ -33,7 +33,7 @@ import {
   SectionProps,
   Virtualizer
 } from 'react-aria-components';
-import {AsyncLoadable, GlobalDOMAttributes, HelpTextProps, LoadingState, SpectrumLabelableProps} from '@react-types/shared';
+import {AsyncLoadable, GlobalDOMAttributes, HelpTextProps, LoadingState, SingleSelection, SpectrumLabelableProps} from '@react-types/shared';
 import {AvatarContext} from './Avatar';
 import {BaseCollection, CollectionNode, createLeafComponent} from '@react-aria/collections';
 import {baseColor, focusRing, space, style} from '../style' with {type: 'macro'};
@@ -79,7 +79,8 @@ export interface ComboboxStyleProps {
   size?: 'S' | 'M' | 'L' | 'XL'
 }
 export interface ComboBoxProps<T extends object> extends
-  Omit<AriaComboBoxProps<T>, 'children' | 'style' | 'className' | 'defaultFilter' | 'allowsEmptyCollection' | keyof GlobalDOMAttributes>,
+  Omit<AriaComboBoxProps<T>, 'children' | 'style' | 'className' | 'render' | 'defaultFilter' | 'allowsEmptyCollection' | 'selectionMode' | 'selectedKey' | 'defaultSelectedKey' | 'onSelectionChange' | 'value' | 'defaultValue' | 'onChange' | keyof GlobalDOMAttributes>,
+  Omit<SingleSelection, 'disallowEmptySelection'>,
   ComboboxStyleProps,
   StyleProps,
   SpectrumLabelableProps,
@@ -368,7 +369,7 @@ export const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function Co
   );
 });
 
-export interface ComboBoxItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps {
+export interface ComboBoxItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className' | 'render' | 'onClick' | 'onKeyDown' | 'onKeyUp' | keyof GlobalDOMAttributes>, StyleProps {
   children: ReactNode
 }
 

package/src/ContextualHelp.tsx

@@ -1,11 +1,11 @@
 import {ActionButton} from './ActionButton';
 import {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';
-import {ContentContext, FooterContext, HeadingContext} from './Content';
-import {ContextValue, DEFAULT_SLOT, Provider, Dialog as RACDialog, TextContext} from 'react-aria-components';
+import {ContentContext, FooterContext, HeadingContext, TextContext as SpectrumTextContext} from './Content';
+import {ContextValue, DEFAULT_SLOT, Provider, TextContext} from 'react-aria-components';
 import {createContext, forwardRef, ReactNode} from 'react';
 import {dialogInner} from './Dialog';
 import {DialogTrigger, DialogTriggerProps} from './DialogTrigger';
-import {filterDOMProps, mergeProps, useLabels} from '@react-aria/utils';
+import {filterDOMProps, mergeProps, useId, useLabels} from '@react-aria/utils';
 import HelpIcon from '../s2wf-icons/S2_Icon_HelpCircle_20_N.svg';
 import InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';
 // @ts-ignore
@@ -18,6 +18,80 @@ import {StyleProps} from './style-utils' with { type: 'macro' };
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
+export interface ContextualHelpPopoverProps extends PopoverDialogProps {
+  /**
+   * The children of the contextual help popover. Supports Heading, Content, and Footer elements. */
+  children: ReactNode
+}
+
+const wrappingDiv = style({
+  minWidth: 268,
+  width: 268,
+  padding: 24,
+  boxSizing: 'border-box',
+  height: 'full'
+});
+
+const headingStyles = style({
+  font: 'heading-xs',
+  margin: 0,
+  marginBottom: space(8) // This only makes it 10px on mobile and should be 12px
+});
+
+// TODO: docs to come after release, for now this is just mentioned in unavaiable menu docs
+/**
+ * A popover with contextual help styling that supports Heading, Content, and Footer.
+ */
+export function ContextualHelpPopover(props: ContextualHelpPopoverProps) {
+  let {children, ...popoverProps} = props;
+  let titleId = useId();
+
+  return (
+    <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}))}>
+          <Provider
+            values={[
+              [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}
+                }
+              }],
+              [ContentContext, {styles: style({
+                font: 'body-sm'
+              })}],
+              [FooterContext, {styles: style({
+                font: 'body-sm',
+                marginTop: 16
+              })}]
+            ]}>
+            {children}
+          </Provider>
+        </div>
+      </div>
+    </Popover>
+  );
+}
+
 export interface ContextualHelpStyleProps {
   /**
    * Indicates whether contents are informative or provides helpful guidance.
@@ -45,14 +119,6 @@ export interface ContextualHelpProps extends
   size?: 'XS' | 'S'
 }
 
-const wrappingDiv = style({
-  minWidth: 268,
-  width: 268,
-  padding: 24,
-  boxSizing: 'border-box',
-  height: 'full'
-});
-
 export const ContextualHelpContext = createContext<ContextValue<Partial<ContextualHelpProps>, FocusableRefValue<HTMLButtonElement>>>(null);
 
 /**
@@ -102,42 +168,14 @@ export const ContextualHelp = forwardRef(function ContextualHelp(props: Contextu
         isQuiet>
         {variant === 'info' ? <InfoIcon /> : <HelpIcon />}
       </ActionButton>
-      <Popover
-        padding="none"
+      <ContextualHelpPopover
         placement={placement}
         shouldFlip={shouldFlip}
         containerPadding={containerPadding}
         offset={8}
-        crossOffset={crossOffset}
-        hideArrow>
-        <div
-          className={wrappingDiv}>
-          <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: 'calc(self(paddingTop) * -1)', padding: 24}))}>
-            <Provider
-              values={[
-                [TextContext, {
-                  slots: {
-                    [DEFAULT_SLOT]: {}
-                  }
-                }],
-                [HeadingContext, {styles: style({
-                  font: 'heading-xs',
-                  margin: 0,
-                  marginBottom: space(8) // This only makes it 10px on mobile and should be 12px
-                })}],
-                [ContentContext, {styles: style({
-                  font: 'body-sm'
-                })}],
-                [FooterContext, {styles: style({
-                  font: 'body-sm',
-                  marginTop: 16
-                })}]
-              ]}>
-              {children}
-            </Provider>
-          </RACDialog>
-        </div>
-      </Popover>
+        crossOffset={crossOffset}>
+        {children}
+      </ContextualHelpPopover>
     </DialogTrigger>
   );
 });

package/src/CustomDialog.tsx

@@ -18,7 +18,7 @@ import {Modal} from './Modal';
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
 
-export interface CustomDialogProps extends Omit<RACDialogProps, 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps {
+export interface CustomDialogProps extends Omit<RACDialogProps, 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, StyleProps {
   /**
    * The size of the Dialog.
    */

package/src/DateField.tsx

@@ -30,7 +30,7 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 
 export interface DateFieldProps<T extends DateValue> extends
-  Omit<AriaDateFieldProps<T>, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>,
+  Omit<AriaDateFieldProps<T>, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>,
   StyleProps,
   SpectrumLabelableProps,
   HelpTextProps {

package/src/DatePicker.tsx

@@ -41,7 +41,7 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 
 export interface DatePickerProps<T extends DateValue> extends
-  Omit<AriaDatePickerProps<T>, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>,
+  Omit<AriaDatePickerProps<T>, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>,
   Pick<CalendarProps<T>, 'createCalendar' | 'pageBehavior' | 'firstDayOfWeek' | 'isDateUnavailable'>,
   Pick<PopoverProps, 'shouldFlip'>,
   StyleProps,

package/src/DateRangePicker.tsx

@@ -33,7 +33,7 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 
 export interface DateRangePickerProps<T extends DateValue> extends
-  Omit<AriaDateRangePickerProps<T>, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>,
+  Omit<AriaDateRangePickerProps<T>, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>,
   Pick<RangeCalendarProps<T>, 'createCalendar' | 'pageBehavior' | 'firstDayOfWeek' | 'isDateUnavailable'>,
   Pick<PopoverProps, 'shouldFlip'>,
   StyleProps,

package/src/Dialog.tsx

@@ -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' | keyof GlobalDOMAttributes>, StyleProps {
+export interface DialogProps extends Omit<RACDialogProps, 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, StyleProps {
   /**
    * Whether the Dialog is dismissible.
    */

package/src/Disclosure.tsx

@@ -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' | keyof GlobalDOMAttributes>, StyleProps {
+export interface DisclosureProps extends Omit<RACDisclosureProps, 'className' | 'style' | 'render' | 'children' | keyof GlobalDOMAttributes>, StyleProps {
   /**
    * The size of the disclosure.
    * @default 'M'
@@ -295,7 +295,7 @@ export const DisclosureTitle = forwardRef(function DisclosureTitle(props: Disclo
   );
 });
 
-export interface DisclosurePanelProps extends Omit<RACDisclosurePanelProps, 'className' | 'style' | 'children'>, UnsafeStyles, DOMProps, AriaLabelingProps {
+export interface DisclosurePanelProps extends Omit<RACDisclosurePanelProps, 'className' | 'style' | 'render' | 'children'>, UnsafeStyles, DOMProps, AriaLabelingProps {
   children: React.ReactNode
 }
 

package/src/Divider.tsx

@@ -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' | keyof GlobalDOMAttributes>, StyleProps {}
+export interface DividerProps extends DividerSpectrumProps, Omit<RACSeparatorProps, 'className' | 'style' | 'render' | 'elementType' | keyof GlobalDOMAttributes>, StyleProps {}
 
 export const DividerContext = createContext<ContextValue<Partial<DividerProps>, DOMRefValue>>(null);
 

package/src/DropZone.tsx

@@ -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' | keyof GlobalDOMAttributes>, UnsafeStyles, DOMProps {
+export interface DropZoneProps extends Omit<RACDropZoneProps, 'className' | 'style' | 'render' | '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

@@ -19,16 +19,16 @@ import {composeRenderProps, FieldError, FieldErrorProps, Group, GroupProps, Labe
 import {ContextualHelpContext} from './ContextualHelp';
 import {control, controlFont, fieldInput, fieldLabel, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {ForwardedRef, forwardRef, ReactNode} from 'react';
+import {getEventTarget, useId} from '@react-aria/utils';
 import {IconContext} from './Icon';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {mergeStyles} from '../style/runtime';
 import {StyleString} from '../style/types';
 import {useDOMRef} from '@react-spectrum/utils';
-import {useId} from '@react-aria/utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
-interface FieldLabelProps extends Omit<LabelProps, 'className' | 'style' | 'children'>, StyleProps {
+interface FieldLabelProps extends Omit<LabelProps, 'className' | 'style' | 'render' | 'children'>, StyleProps {
   isDisabled?: boolean,
   isRequired?: boolean,
   size?: 'S' | 'M' | 'L' | 'XL',
@@ -150,7 +150,7 @@ export const FieldLabel = forwardRef(function FieldLabel(props: FieldLabelProps,
   );
 });
 
-interface FieldGroupProps extends Omit<GroupProps, 'className' | 'style' | 'children'>, UnsafeStyles {
+interface FieldGroupProps extends Omit<GroupProps, 'className' | 'style' | 'render' | 'children'>, UnsafeStyles {
   size?: 'S' | 'M' | 'L' | 'XL',
   children: ReactNode,
   styles?: StyleString,
@@ -207,13 +207,13 @@ export const FieldGroup = forwardRef(function FieldGroup(props: FieldGroupProps,
       {...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,[role="button"]')) {
+        if (e.pointerType === 'mouse' && !(getEventTarget(e) as Element).closest('button,input,textarea,[role="button"]')) {
           e.preventDefault();
           (e.currentTarget.querySelector('input, textarea') as HTMLElement)?.focus();
         }
       }}
       onTouchEnd={e => {
-        let target = e.target as HTMLElement;
+        let target = getEventTarget(e) as HTMLElement;
         if (!target.isContentEditable && !target.closest('button,input,textarea,[role="button"]')) {
           e.preventDefault();
           (e.currentTarget.querySelector('input, textarea') as HTMLElement)?.focus();
@@ -232,7 +232,7 @@ export const FieldGroup = forwardRef(function FieldGroup(props: FieldGroupProps,
   );
 });
 
-export interface InputProps extends Omit<RACInputProps, 'className' | 'style'>, StyleProps {}
+export interface InputProps extends Omit<RACInputProps, 'className' | 'style' | 'render'>, StyleProps {}
 
 export const Input = forwardRef(function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {
   let {UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;

package/src/Form.tsx

@@ -30,7 +30,7 @@ interface FormStyleProps extends Omit<SpectrumLabelableProps, 'label' | 'context
   isEmphasized?: boolean
 }
 
-export interface FormProps extends FormStyleProps, Omit<RACFormProps, 'className' | 'style' | 'children' | keyof GlobalDOMAttributes>, StyleProps {
+export interface FormProps extends FormStyleProps, Omit<RACFormProps, 'className' | 'style' | 'render' | 'children' | keyof GlobalDOMAttributes>, StyleProps {
   children: ReactNode
 }
 

package/src/FullscreenDialog.tsx

@@ -21,7 +21,7 @@ import {StyleProps} from './style-utils';
 import {useDOMRef} from '@react-spectrum/utils';
 
 // TODO: what style overrides should be allowed?
-export interface FullscreenDialogProps extends Omit<RACDialogProps, 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps {
+export interface FullscreenDialogProps extends Omit<RACDialogProps, 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, StyleProps {
   /**
    * The variant of fullscreen dialog to display.
    * @default "fullscreen"

package/src/Link.tsx

@@ -34,7 +34,7 @@ interface LinkStyleProps {
   isQuiet?: boolean
 }
 
-export interface LinkProps extends Omit<RACLinkProps, 'isDisabled' | 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps, LinkStyleProps {
+export interface LinkProps extends Omit<RACLinkProps, 'isDisabled' | 'className' | 'style' | 'render' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps, LinkStyleProps {
   children: ReactNode
 }