Merge branch 'main' into layout-rebuild-batch-3

Author: aveline

.changeset/mean-bananas-drum.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Updated `IndexTable` and `ProgressBar` to no longer log errors about deprecated `React.findDOMNode`

.changeset/sixty-squids-promise.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Updated `Box` allowable aria roles

polaris-react/src/components/Box/Box.tsx

@@ -151,7 +151,10 @@ export interface BoxProps extends React.AriaAttributes {
    */
   paddingInlineEnd?: Spacing;
   /** Aria role */
-  role?: Extract<React.AriaRole, 'status' | 'presentation' | 'menu'>;
+  role?: Extract<
+    React.AriaRole,
+    'status' | 'presentation' | 'menu' | 'listbox' | 'combobox'
+  >;
   /** Shadow on box */
   shadow?: DepthShadowAlias;
   /** Set tab order */

polaris-react/src/components/IndexTable/IndexTable.tsx

@@ -148,6 +148,7 @@ function IndexTableBase({
   const scrollableContainerElement = useRef<HTMLDivElement>(null);
   const tableElement = useRef<HTMLTableElement>(null);
   const condensedListElement = useRef<HTMLUListElement>(null);
+  const loadingElement = useRef<HTMLDivElement>(null);
 
   const [tableInitialized, setTableInitialized] = useState(false);
   const [stickyWrapper, setStickyWrapper] = useState<HTMLElement | null>(null);
@@ -512,10 +513,11 @@ function IndexTableBase({
       in={loading}
       classNames={loadingTransitionClassNames}
       timeout={parseInt(motion['duration-100'], 10)}
+      nodeRef={loadingElement}
       appear
       unmountOnExit
     >
-      <div className={styles.LoadingPanel}>
+      <div className={styles.LoadingPanel} ref={loadingElement}>
         <div className={styles.LoadingPanelRow}>
           <Spinner size="small" />
           <span className={styles.LoadingPanelText}>

polaris-react/src/components/Modal/components/Dialog/Dialog.tsx

@@ -10,6 +10,8 @@ import {TrapFocus} from '../../../TrapFocus';
 
 import styles from './Dialog.scss';
 
+type CSSTransitionProps = React.ComponentProps<typeof CSSTransition>;
+
 export interface DialogProps {
   labelledBy?: string;
   instant?: boolean;
@@ -117,7 +119,7 @@ const fadeUpClasses = {
   exitActive: classNames(styles.animateFadeUp, styles.exited),
 };
 
-function FadeUp({children, ...props}: any) {
+function FadeUp({children, ...props}: CSSTransitionProps) {
   return (
     <CSSTransition {...props} classNames={fadeUpClasses}>
       {children}

polaris-react/src/components/ProgressBar/ProgressBar.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useRef} from 'react';
 import {CSSTransition} from 'react-transition-group';
 import {motion} from '@shopify/polaris-tokens';
 
@@ -45,6 +45,7 @@ export function ProgressBar({
   ariaLabelledBy,
 }: ProgressBarProps) {
   const i18n = useI18n();
+  const indicatorRef = useRef<HTMLDivElement>(null);
 
   const className = classNames(
     styles.ProgressBar,
@@ -78,12 +79,14 @@ export function ProgressBar({
         in
         appear
         timeout={parseInt(progressBarDuration, 10)}
+        nodeRef={indicatorRef}
         classNames={{
           appearActive: styles.IndicatorAppearActive,
           appearDone: styles.IndicatorAppearDone,
         }}
       >
         <div
+          ref={indicatorRef}
           className={styles.Indicator}
           style={
             {