3.37 audit (#7092)

* Add some missing docs descriptions

* Rename strange interface in props

* Fix sizes of pending button spinner

* Add docs for --tree-item-level custom property in Tree

* fix ts

* Require children for disclosures

* Make it so Accordion isn't labellable

* fix button typescript

* narrow test utils exports and future proof

* Remove isPending from ActionButton

---------

Co-authored-by: Robert Snow <rsnow@adobe.com>
Co-authored-by: GitHub <snowystinger@gmail.com>

Author: devongovett

packages/@react-aria/test-utils/src/index.ts

@@ -11,6 +11,8 @@
  */
 
 export {triggerLongPress} from './events';
-export * from './testSetup';
-export * from './userEventMaps';
-export * from './user';
+export {installMouseEvent, installPointerEvent} from './testSetup';
+export {pointerMap} from './userEventMaps';
+export {User} from './user';
+
+export type {UserOpts} from './user';

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

@@ -20,7 +20,7 @@ import styles from '@adobe/spectrum-css-temp/components/accordion/vars.css';
 import {useLocale} from '@react-aria/i18n';
 import {useProviderProps} from '@react-spectrum/provider';
 
-export interface SpectrumAccordionProps extends Omit<DisclosureGroupProps, 'className' | 'style' | 'children'>, StyleProps, DOMProps, AriaLabelingProps {
+export interface SpectrumAccordionProps extends Omit<DisclosureGroupProps, 'className' | 'style' | 'children'>, StyleProps, DOMProps {
   /** The disclosures within the accordion group. */
   children: React.ReactNode
 }
@@ -76,7 +76,7 @@ function DisclosurePanel(props: SpectrumDisclosurePanelProps, ref: DOMRef<HTMLDi
 }
 
 export interface SpectrumDisclosureHeaderProps extends DOMProps, AriaLabelingProps {
-  /** 
+  /**
    * The heading level of the disclosure header.
    * @default 3
    */

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

@@ -44,7 +44,7 @@ interface ToggleButtonStyleProps {
   isEmphasized?: boolean
 }
 
-export interface ActionButtonProps extends Omit<ButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, ActionButtonStyleProps {
+export interface ActionButtonProps extends Omit<ButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'isPending'>, StyleProps, ActionButtonStyleProps {
   /** The content to display in the ActionButton. */
   children?: ReactNode
 }

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

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {baseColor, fontRelative, style} from '../style/spectrum-theme' with {type: 'macro'};
+import {baseColor, fontRelative, size as sizeValue, style} from '../style/spectrum-theme' 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 {centerPadding, focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
@@ -370,8 +370,21 @@ function Button(props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) {
                 isProgressVisible: 1
               }
             })({isProgressVisible, isPending})}>
-            {/* TODO: size based on t-shirt size once ProgressCircle supports custom sizes */}
-            <ProgressCircle isIndeterminate aria-label={stringFormatter.format('button.pending')} size="S" staticColor={staticColor} UNSAFE_style={{display: 'block'}} />
+            <ProgressCircle
+              isIndeterminate
+              aria-label={stringFormatter.format('button.pending')}
+              size="S"
+              staticColor={staticColor}
+              styles={style({
+                size: {
+                  size: {
+                    S: sizeValue(14),
+                    M: sizeValue(18),
+                    L: 20,
+                    XL: 24
+                  }
+                }
+              })({size})} />
           </div>
         }
       </Provider>
@@ -405,7 +418,8 @@ function LinkButton(props: LinkButtonProps, ref: FocusableRef<HTMLAnchorElement>
         variant: props.variant || 'primary',
         fillStyle: props.fillStyle || 'fill',
         size: props.size || 'M',
-        staticColor: props.staticColor
+        staticColor: props.staticColor,
+        isPending: false
       }, props.styles)}>
       <Provider
         values={[

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

@@ -13,7 +13,7 @@
 import {ContextValue, ProgressBar as RACProgressBar, ProgressBarProps as RACProgressBarProps} from 'react-aria-components';
 import {createContext, forwardRef} from 'react';
 import {DOMRef, DOMRefValue} from '@react-types/shared';
-import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {keyframes} from '../style/style-macro' with {type: 'macro'};
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
@@ -45,8 +45,7 @@ const wrapper = style<ProgressCircleStyleProps>({
       L: 64
     }
   },
-  aspectRatio: 'square',
-  display: 'inline-block'
+  aspectRatio: 'square'
 }, getAllowedOverrides({height: true}));
 
 const track = style<ProgressCircleStyleProps>({
@@ -73,7 +72,10 @@ const fill = style<ProgressCircleStyleProps>({
   transformOrigin: 'center'
 });
 
-export interface ProgressCircleProps extends Omit<RACProgressBarProps, 'children' | 'style' | 'valueLabel' | 'formatOptions' | 'label' | 'className'>, ProgressCircleStyleProps, StyleProps {}
+export interface ProgressCircleProps extends Omit<RACProgressBarProps, 'children' | 'style' | 'valueLabel' | 'formatOptions' | 'label' | 'className'>, ProgressCircleStyleProps, UnsafeStyles {
+  /** Spectrum-defined styles, returned by the `style()` macro. */
+  styles?: StylesPropWithHeight
+}
 
 const rotationAnimation = keyframes(`
   0% {

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

@@ -259,13 +259,13 @@ function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRe
 }
 
 /**
- * A control items represents an individual control within a segmented control.
+ * A SegmentedControlItem represents an option within a SegmentedControl.
  */
 const _SegmentedControlItem = /*#__PURE__*/ forwardRef(SegmentedControlItem);
 export {_SegmentedControlItem as SegmentedControlItem};
 
 /**
- * A segmented control is a mutually exclusive group of buttons, with or without a track.
+ * A SegmentedControl is a mutually exclusive group of buttons used for view switching.
  */
 const _SegmentedControl = /*#__PURE__*/ forwardRef(SegmentedControl);
 export {_SegmentedControl as SegmentedControl};

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

@@ -64,6 +64,9 @@ export interface SkeletonProps {
   isLoading: boolean
 }
 
+/**
+ * A Skeleton wraps around content to render it as a placeholder.
+ */
 export function Skeleton({children, isLoading}: SkeletonProps) {
   // Disable all form components inside a skeleton.
   return (

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

@@ -19,6 +19,10 @@ export interface SkeletonCollectionProps {
 }
 
 let cache = new WeakMap();
+
+/**
+ * A SkeletonCollection generates placeholder content within a collection component such as CardView.
+ */
 export const SkeletonCollection = createLeafComponent('skeleton', (props: SkeletonCollectionProps, ref, node) => {
   // Cache rendering based on node object identity. This allows the children function to randomize
   // its content (e.g. heights) and preserve on re-renders.

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

@@ -48,7 +48,8 @@ function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElem
         staticColor: props.staticColor,
         size: props.size,
         isQuiet: props.isQuiet,
-        isEmphasized: props.isEmphasized
+        isEmphasized: props.isEmphasized,
+        isPending: false
       }, props.styles)}>
       <Provider
         values={[

packages/@react-stately/data/docs/useTreeData.mdx

@@ -62,12 +62,12 @@ as the unique key for that item, and the `items` property as the children. In ad
 for the listbox, which will automatically be updated when items are removed from the tree.
 
 ```tsx
-interface Iitem {
+interface ItemValue {
   name: string;
-  items?: Array<Iitem>;
+  items?: Array<ItemValue>;
 }
 
-let tree = useTreeData<Iitem>({
+let tree = useTreeData<ItemValue>({
   initialItems: [
     {
       name: 'People',