3.37 audit (#7092)

devongovett · snowystinger · web-flow · commit 8ee13f339a0d · 2024-09-26T19:01:40.000Z
* 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 &lt;rsnow@adobe.com&gt;
Co-authored-by: GitHub &lt;snowystinger@gmail.com&gt;
diff --git a/packages/@react-aria/test-utils/src/index.ts b/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';
diff --git a/packages/@react-spectrum/accordion/src/Accordion.tsx b/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
    */
diff --git a/packages/@react-spectrum/s2/src/ActionButton.tsx b/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
 }
diff --git a/packages/@react-spectrum/s2/src/Button.tsx b/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={[
diff --git a/packages/@react-spectrum/s2/src/ProgressCircle.tsx b/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% {
diff --git a/packages/@react-spectrum/s2/src/SegmentedControl.tsx b/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};
diff --git a/packages/@react-spectrum/s2/src/Skeleton.tsx b/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 (
diff --git a/packages/@react-spectrum/s2/src/SkeletonCollection.tsx b/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.
diff --git a/packages/@react-spectrum/s2/src/ToggleButton.tsx b/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={[
diff --git a/packages/@react-stately/data/docs/useTreeData.mdx b/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',
diff --git a/packages/@react-stately/disclosure/src/useDisclosureGroupState.ts b/packages/@react-stately/disclosure/src/useDisclosureGroupState.ts
@@ -38,6 +38,10 @@ export interface DisclosureGroupState {
   setExpandedKeys(keys: Set<Key>): void
 }
 
+/**
+ * Manages state for a group of disclosures, e.g. an accordion.
+ * It supports both single and multiple expanded items.
+ */
 export function useDisclosureGroupState(props: DisclosureGroupProps): DisclosureGroupState {
   let {allowsMultipleExpanded = false, isDisabled = false} = props;
   let [expandedKeys, setExpandedKeys] = useControlledState(
diff --git a/packages/react-aria-components/docs/Tree.mdx b/packages/react-aria-components/docs/Tree.mdx
@@ -312,3 +312,11 @@ A `Tree` can be targeted with the `.react-aria-Tree` CSS selector, or by overrid
 A `TreeItem` can be targeted with the `.react-aria-TreeItem` CSS selector, or by overriding with a custom `className`. It supports the following states and render props:
 
 <StateTable properties={docs.exports.TreeItemRenderProps.properties} showOptional />
+
+TreeItem also exposes a `--tree-item-level` CSS custom property, which you can use to adjust the indentation.
+
+```css render=false
+.react-aria-TreeItem {
+  padding-left: calc((var(--tree-item-level) - 1) * 20px);
+}
+```
diff --git a/packages/react-aria-components/src/Button.tsx b/packages/react-aria-components/src/Button.tsx
@@ -59,10 +59,10 @@ export interface ButtonRenderProps {
    */
   isDisabled: boolean,
   /**
-   * If the button is currently in the `isPending` state.
+   * Whether the button is currently in a pending state.
    * @selector [data-pending]
    */
-  isPending?: boolean
+  isPending: boolean
 }
 
 export interface ButtonProps extends Omit<AriaButtonProps, 'children' | 'href' | 'target' | 'rel' | 'elementType'>, HoverEvents, SlotProps, RenderProps<ButtonRenderProps> {
@@ -89,7 +89,8 @@ export interface ButtonProps extends Omit<AriaButtonProps, 'children' | 'href' |
   /** The value associated with the button's name when it's submitted with the form data. */
   value?: string,
   /**
-   * Whether to disable events immediately and display the `ProgressBar`.
+   * Whether the button is in a pending state. This disables press and hover events
+   * while retaining focusability, and announces the pending state to screen readers.
    */
   isPending?: boolean
 }
@@ -119,7 +120,7 @@ function Button(props: ButtonProps, ref: ForwardedRef<HTMLButtonElement>) {
     isFocused,
     isFocusVisible,
     isDisabled: props.isDisabled || false,
-    isPending
+    isPending: isPending ?? false
   };
 
   let renderProps = useRenderProps({
diff --git a/packages/react-aria-components/src/Disclosure.tsx b/packages/react-aria-components/src/Disclosure.tsx
@@ -71,7 +71,9 @@ export {_DisclosureGroup as DisclosureGroup};
 
 export interface DisclosureProps extends Omit<AriaDisclosureProps, 'children'>, RenderProps<DisclosureRenderProps>, SlotProps {
   /** An id for the disclosure when used within a DisclosureGroup, matching the id used in `expandedKeys`. */
-  id?: Key
+  id?: Key,
+  /** The children of the component. A function may be provided to alter the children based on component state. */
+  children: ReactNode | ((values: DisclosureRenderProps & {defaultChildren: ReactNode | undefined}) => ReactNode)
 }
 
 export interface DisclosureRenderProps {
@@ -185,6 +187,9 @@ export interface DisclosurePanelProps extends RenderProps<{}> {
    * @default 'group'
    */
   role?: 'group' | 'region',
+  /**
+   * The children of the component.
+   */
   children: ReactNode
 }
 
@@ -225,5 +230,8 @@ function DisclosurePanel(props: DisclosurePanelProps, ref: ForwardedRef<HTMLDivE
 const _Disclosure = /*#__PURE__*/ (forwardRef as forwardRefType)(Disclosure);
 export {_Disclosure as Disclosure};
 
+/**
+ * A DisclosurePanel provides the content for a disclosure.
+ */
 const _DisclosurePanel = /*#__PURE__*/ (forwardRef as forwardRefType)(DisclosurePanel);
 export {_DisclosurePanel as DisclosurePanel};
diff --git a/packages/react-aria-components/stories/Breadcrumbs.stories.tsx b/packages/react-aria-components/stories/Breadcrumbs.stories.tsx
@@ -32,19 +32,19 @@ export const BreadcrumbsExample = (args: any) => (
   </Breadcrumbs>
 );
 
-interface Iitem {
+interface ItemValue {
   id: string,
   url: string
 }
-let items: Array<Iitem> = [
+let items: Array<ItemValue> = [
   {id: 'Home', url: '/'},
   {id: 'React Aria', url: '/react-aria'},
   {id: 'Breadcrumbs', url: '/react-aria/breadcrumbs'}
 ];
 
 export const DynamicBreadcrumbsExample = (args: any) => (
   <Breadcrumbs {...args} items={items}>
-    {(item: Iitem) => (
+    {(item: ItemValue) => (
       <Breadcrumb>
         <Link href={item.url}>{item.id}</Link>
       </Breadcrumb>

Original file line number	Diff line number	Diff line change
`@@ -44,7 +44,7 @@ interface ToggleButtonStyleProps {`
`44`	`44`	`isEmphasized?: boolean`
`45`	`45`	`}`
`46`	`46`
`47`		`-export interface ActionButtonProps extends Omit<ButtonProps, 'className' \| 'style' \| 'children' \| 'onHover' \| 'onHoverStart' \| 'onHoverEnd' \| 'onHoverChange'>, StyleProps, ActionButtonStyleProps {`
	`47`	`+export interface ActionButtonProps extends Omit<ButtonProps, 'className' \| 'style' \| 'children' \| 'onHover' \| 'onHoverStart' \| 'onHoverEnd' \| 'onHoverChange' \| 'isPending'>, StyleProps, ActionButtonStyleProps {`
`48`	`48`	`/** The content to display in the ActionButton. */`
`49`	`49`	`children?: ReactNode`
`50`	`50`	`}`
Original file line number	Diff line number	Diff line change
`@@ -64,6 +64,9 @@ export interface SkeletonProps {`
`64`	`64`	`isLoading: boolean`
`65`	`65`	`}`
`66`	`66`
	`67`	`+/**`
	`68`	`+ * A Skeleton wraps around content to render it as a placeholder.`
	`69`	`+ */`
`67`	`70`	`export function Skeleton({children, isLoading}: SkeletonProps) {`
`68`	`71`	`// Disable all form components inside a skeleton.`
`69`	`72`	`return (`
Original file line number	Diff line number	Diff line change
@@ -62,12 +62,12 @@ as the unique key for that item, and the `items` property as the children. In ad
`62`	`62`	`for the listbox, which will automatically be updated when items are removed from the tree.`
`63`	`63`
`64`	`64`	```tsx
`65`		`-interface Iitem {`
	`65`	`+interface ItemValue {`
`66`	`66`	`name: string;`
`67`		`- items?: Array<Iitem>;`
	`67`	`+ items?: Array<ItemValue>;`
`68`	`68`	`}`
`69`	`69`
`70`		`-let tree = useTreeData<Iitem>({`
	`70`	`+let tree = useTreeData<ItemValue>({`
`71`	`71`	`initialItems: [`
`72`	`72`	`{`
`73`	`73`	`name: 'People',`