fix: Release audit fixes (#9291)

* update content elements to point to mdn

* update Accordion props to copy disclosure props directly

* make linearGradient/edgeToText internal only

* fix lint

* ide import fix doesnt move the ts ignore

Author: LFDanLu

packages/@react-spectrum/s2/src/Accordion.tsx

@@ -10,26 +10,23 @@
  * governing permissions and limitations under the License.
  */
 
-import {ContextValue, DisclosureGroup, DisclosureGroupProps, SlotProps} from 'react-aria-components';
+import {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue, Key} from '@react-types/shared';
+import {ContextValue, DisclosureGroup, RenderProps, SlotProps} from 'react-aria-components';
 import {
   Disclosure,
   DisclosureContext,
   DisclosureHeader,
   DisclosurePanel,
-  DisclosurePanelProps,
-  DisclosureProps,
-  DisclosureTitle,
-  DisclosureTitleProps
+  DisclosureTitle
 } from './Disclosure';
-import {DOMProps, DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';
-import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with { type: 'macro' };
+import {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with { type: 'macro' };
 import React, {createContext, forwardRef, ReactNode} from 'react';
 import {style} from '../style' with { type: 'macro' };
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface AccordionProps extends Omit<DisclosureGroupProps, 'className' | 'style' | 'children' | keyof GlobalDOMAttributes>, UnsafeStyles, DOMProps, SlotProps {
-  /** The disclosure elements in the accordion. */
+export interface AccordionProps extends UnsafeStyles, DOMProps, SlotProps {
+  /** The accordion item elements in the accordion. */
   children: React.ReactNode,
   /** Spectrum-defined styles, returned by the `style()` macro. */
   styles?: StylesPropWithHeight,
@@ -39,12 +36,22 @@ export interface AccordionProps extends Omit<DisclosureGroupProps, 'className' |
    */
   size?: 'S' | 'M' | 'L' | 'XL',
   /**
-   * The amount of space between the disclosure items.
+   * The amount of space between the accordion items.
    * @default 'regular'
    */
   density?: 'compact' | 'regular' | 'spacious',
   /** Whether the accordion should be displayed with a quiet style. */
-  isQuiet?: boolean
+  isQuiet?: boolean,
+  /** Whether multiple accordion items can be expanded at the same time. */
+  allowsMultipleExpanded?: boolean,
+  /** Whether all accordion items are disabled. */
+  isDisabled?: boolean,
+  /** The currently expanded keys in the accordion (controlled). */
+  expandedKeys?: Iterable<Key>,
+  /** The initial expanded keys in the accordion (uncontrolled). */
+  defaultExpandedKeys?: Iterable<Key>,
+  /** Handler that is called when accordion items are expanded or collapsed. */
+  onExpandedChange?: (keys: Set<Key>) => any
 }
 
 const accordion = style({
@@ -80,18 +87,85 @@ export const Accordion = forwardRef(function Accordion(props: AccordionProps, re
   );
 });
 
-export interface AccordionItemProps extends DisclosureProps {
-  /** The contents of the accordion, consisting of a AccordionItemTitle and AccordionItemPanel. */
-  children: ReactNode
+export interface AccordionItemState {
+  /** Whether the accordion item is currently expanded. */
+  readonly isExpanded: boolean,
+  /** Sets whether the accordion item is expanded. */
+  setExpanded(isExpanded: boolean): void,
+  /** Expand the accordion item. */
+  expand(): void,
+  /** Collapse the accordion item. */
+  collapse(): void,
+  /** Toggles the accordion item's visibility. */
+  toggle(): void
 }
+
+export interface AccordionItemRenderProps {
+  /**
+   * Whether the accordion item is expanded.
+   * @selector [data-expanded]
+   */
+  isExpanded: boolean,
+  /**
+   * Whether the accordion item has keyboard focus.
+   * @selector [data-focus-visible-within]
+   */
+  isFocusVisibleWithin: boolean,
+  /**
+   * Whether the accordion item is disabled.
+   * @selector [data-disabled]
+   */
+  isDisabled: boolean,
+  /**
+   * State of the accordion item.
+   */
+  state: AccordionItemState
+}
+
+export interface AccordionItemProps extends Omit<RenderProps<AccordionItemRenderProps>, 'className' | 'style'>, SlotProps, StyleProps {
+  /**
+   * The size of the accordion item.
+   * @default 'M'
+   */
+  size?: 'S' | 'M' | 'L' | 'XL',
+  /**
+   * The amount of space between the accordion item.
+   * @default 'regular'
+   */
+  density?: 'compact' | 'regular' | 'spacious',
+  /** Whether the accordion item should be displayed with a quiet style. */
+  isQuiet?: boolean,
+  /** The contents of the accordion item, consisting of a accordion item title and accordion item panel. */
+  children: ReactNode,
+  /** An id for the accordion item, matching the id used in `expandedKeys`. */
+  id?: Key,
+  /** Whether the accordion item is disabled. */
+  isDisabled?: boolean,
+  /** Handler that is called when the accordion item's expanded state changes. */
+  onExpandedChange?: (isExpanded: boolean) => void,
+  /** Whether the accordion item is expanded (controlled). */
+  isExpanded?: boolean,
+  /** Whether the accordion item is expanded by default (uncontrolled). */
+  defaultExpanded?: boolean
+}
+
 /**
  * A accordion item is a collapsible section of content. It is composed of a header with a heading and trigger button, and a panel that contains the content.
  */
 export const AccordionItem = forwardRef(function AccordionItem(props: AccordionItemProps, ref: DOMRef<HTMLDivElement>) {
   return <Disclosure {...props} ref={ref} />;
 });
 
-export interface AccordionItemTitleProps extends DisclosureTitleProps {}
+export interface AccordionItemTitleProps extends UnsafeStyles, DOMProps {
+  /** The heading level of the accordion item title.
+   *
+   * @default 3
+   */
+  level?: number,
+  /** The contents of the accordion item title. */
+  children: React.ReactNode
+}
+
 /**
  * An accordion item title consisting of a heading and a trigger button to expand/collapse the panel.
  */
@@ -100,16 +174,27 @@ export const AccordionItemTitle = forwardRef(function AccordionItemTitle(props:
 });
 
 export interface AccordionItemHeaderProps extends UnsafeStyles, DOMProps {
+  /** The contents of the accordion item header. */
   children: React.ReactNode
 }
+
 /**
  * A wrapper element for the accordion item title that can contain other elements not part of the trigger.
  */
 export const AccordionItemHeader = forwardRef(function AccordionItemHeader(props: AccordionItemHeaderProps, ref: DOMRef<HTMLDivElement>) {
   return <DisclosureHeader {...props} ref={ref} />;
 });
 
-export interface AccordionItemPanelProps extends DisclosurePanelProps {}
+export interface AccordionItemPanelProps extends UnsafeStyles, DOMProps, AriaLabelingProps {
+  /** The contents of the accordion item panel. */
+  children: React.ReactNode,
+  /**
+   * The accessibility role for the accordion item panel.
+   * @default 'group'
+   */
+  role?: 'group' | 'region'
+}
+
 /**
  * An accordion item panel is a collapsible section of content that is hidden until the accordion item is expanded.
  */

packages/@react-spectrum/s2/src/Button.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {baseColor, focusRing, fontRelative, lightDark, linearGradient, style} from '../style' with {type: 'macro'};
+import {baseColor, focusRing, fontRelative, lightDark, style} from '../style' with {type: 'macro'};
 import {ButtonRenderProps, ContextValue, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components';
 import {centerBaseline} from './CenterBaseline';
 import {control, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};
@@ -19,6 +19,7 @@ import {FocusableRef, FocusableRefValue, GlobalDOMAttributes} from '@react-types
 import {IconContext} from './Icon';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
+import {linearGradient} from '../style/spectrum-theme' with {type: 'macro'};
 import {pressScale} from './pressScale';
 import {ProgressCircle} from './ProgressCircle';
 import {SkeletonContext} from './Skeleton';

packages/@react-spectrum/s2/src/ComboBox.tsx

@@ -36,7 +36,7 @@ import {
 import {AsyncLoadable, GlobalDOMAttributes, HelpTextProps, LoadingState, SpectrumLabelableProps} from '@react-types/shared';
 import {AvatarContext} from './Avatar';
 import {BaseCollection, CollectionNode, createLeafComponent} from '@react-aria/collections';
-import {baseColor, edgeToText, focusRing, space, style} from '../style' with {type: 'macro'};
+import {baseColor, focusRing, space, style} from '../style' with {type: 'macro'};
 import {centerBaseline} from './CenterBaseline';
 import {centerPadding, control, controlBorderRadius, controlFont, controlSize, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {
@@ -51,6 +51,7 @@ import CheckmarkIcon from '../ui-icons/Checkmark';
 import ChevronIcon from '../ui-icons/Chevron';
 import {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import {createFocusableRef} from '@react-spectrum/utils';
+import {edgeToText} from '../style/spectrum-theme' with {type: 'macro'};
 import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';
 import {FormContext, useFormProps} from './Form';
 import {forwardRefType} from './types';

packages/@react-spectrum/s2/src/Menu.tsx

@@ -28,7 +28,7 @@ import {
   Separator,
   SeparatorProps
 } from 'react-aria-components';
-import {baseColor, edgeToText, focusRing, fontRelative, size, space, style} from '../style' with {type: 'macro'};
+import {baseColor, focusRing, fontRelative, size, space, style} from '../style' with {type: 'macro'};
 import {box, iconStyles} from './Checkbox';
 import {centerBaseline} from './CenterBaseline';
 import {centerPadding, control, controlFont, controlSize, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
@@ -37,6 +37,7 @@ import ChevronRightIcon from '../ui-icons/Chevron';
 import {createContext, forwardRef, JSX, ReactNode, useContext, useRef, useState} from 'react';
 import {divider} from './Divider';
 import {DOMRef, DOMRefValue, GlobalDOMAttributes, PressEvent} from '@react-types/shared';
+import {edgeToText} from '../style/spectrum-theme' with {type: 'macro'};
 import {forwardRefType} from './types';
 import {HeaderContext, HeadingContext, KeyboardContext, Text, TextContext} from './Content';
 import {IconContext} from './Icon'; // chevron right removed??

packages/@react-spectrum/s2/src/Picker.tsx

@@ -34,7 +34,7 @@ import {
 } from 'react-aria-components';
 import {AsyncLoadable, FocusableRef, FocusableRefValue, GlobalDOMAttributes, HelpTextProps, LoadingState, PressEvent, RefObject, SpectrumLabelableProps} from '@react-types/shared';
 import {AvatarContext} from './Avatar';
-import {baseColor, edgeToText, focusRing, style} from '../style' with {type: 'macro'};
+import {baseColor, focusRing, style} from '../style' with {type: 'macro'};
 import {box, iconStyles as checkboxIconStyles} from './Checkbox';
 import {centerBaseline} from './CenterBaseline';
 import {
@@ -57,6 +57,7 @@ import {
   listboxItem,
   LOADER_ROW_HEIGHTS
 } from './ComboBox';
+import {edgeToText} from '../style/spectrum-theme' with {type: 'macro'};
 import {
   FieldErrorIcon,
   FieldLabel,

packages/@react-spectrum/s2/src/TabsPicker.tsx

@@ -23,7 +23,7 @@ import {
   Provider,
   SelectValue
 } from 'react-aria-components';
-import {baseColor, edgeToText, focusRing, size, style} from '../style' with {type: 'macro'};
+import {baseColor, focusRing, size, style} from '../style' with {type: 'macro'};
 import {centerBaseline} from './CenterBaseline';
 import {
   checkmark,
@@ -37,6 +37,7 @@ import {
 import CheckmarkIcon from '../ui-icons/Checkmark';
 import ChevronIcon from '../ui-icons/Chevron';
 import {controlFont, fieldInput, StyleProps} from './style-utils' with {type: 'macro'};
+import {edgeToText} from '../style/spectrum-theme' with {type: 'macro'};
 import {
   FieldLabel
 } from './Field';

packages/@react-spectrum/s2/src/index.ts

@@ -94,7 +94,7 @@ export {pressScale} from './pressScale';
 export {Autocomplete, Collection, FileTrigger, parseColor, useLocale} from 'react-aria-components';
 export {useListData, useTreeData, useAsyncList} from 'react-stately';
 
-export type {AccordionProps, AccordionItemProps, AccordionItemHeaderProps, AccordionItemTitleProps, AccordionItemPanelProps} from './Accordion';
+export type {AccordionProps, AccordionItemProps, AccordionItemHeaderProps, AccordionItemTitleProps, AccordionItemPanelProps, AccordionItemState, AccordionItemRenderProps} from './Accordion';
 export type {ActionBarProps} from './ActionBar';
 export type {ActionButtonProps} from './ActionButton';
 export type {ActionButtonGroupProps} from './ActionButtonGroup';

packages/@react-spectrum/s2/style/index.ts

@@ -15,7 +15,7 @@ import {Inset, fontRelative as internalFontRelative, space as internalSpace, Spa
 import type {MacroContext} from '@parcel/macros';
 import {StyleString} from './types';
 
-export {baseColor, color, edgeToText, lightDark, linearGradient, colorMix, size, style} from './spectrum-theme';
+export {baseColor, color, lightDark, colorMix, size, style} from './spectrum-theme';
 export type {StyleString} from './types';
 
 // Wrap these functions in arbitrary value syntax when called from the outside.

packages/dev/s2-docs/pages/s2/ActionButton.mdx

@@ -74,7 +74,7 @@ function PendingButton() {
 
 ## API
 
-```tsx links={{ActionButton: '#actionbutton', Avatar: 'Avatar', Icon: 'icons'}}
+```tsx links={{ActionButton: '#actionbutton', Avatar: 'Avatar', Icon: 'icons', Text: 'https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span'}}
 <ActionButton>
   <Icon /> or <Avatar />
   <Text />

packages/dev/s2-docs/pages/s2/Button.mdx

@@ -74,7 +74,7 @@ function PendingButton() {
 
 ## API
 
-```tsx links={{Button: '#button', Icon: 'icons'}}
+```tsx links={{Button: '#button', Icon: 'icons', Text: 'https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span'}}
 <Button>
   <Icon />
   <Text />