Merge branch 'upgrade-sb-8-2' into upgrade-sb-9

# Conflicts:
#	package.json
#	yarn.lock

Author: snowystinger

package.json

@@ -101,12 +101,12 @@
     "@react-spectrum/s2-icon-builder": "^0.2.0",
     "@spectrum-css/component-builder": "workspace:^",
     "@spectrum-css/vars": "^2.3.0",
-    "@storybook/addon-a11y": "^9.0.0",
-    "@storybook/addon-docs": "^9.0.0",
-    "@storybook/addon-jest": "^9.0.0",
-    "@storybook/addon-onboarding": "^9.0.0",
-    "@storybook/addon-themes": "^9.0.0",
-    "@storybook/react": "^9.0.0",
+    "@storybook/addon-a11y": "^9.0.4",
+    "@storybook/addon-docs": "^9.0.4",
+    "@storybook/addon-jest": "^9.0.4",
+    "@storybook/addon-onboarding": "^9.0.4",
+    "@storybook/addon-themes": "^9.0.4",
+    "@storybook/react": "^9.0.4",
     "@storybook/test-runner": "^0.22.0",
     "@stylistic/eslint-plugin-ts": "^2.9.0",
     "@swc/core": "^1.3.36",
@@ -188,7 +188,7 @@
     "rimraf": "^2.6.3",
     "sharp": "^0.33.5",
     "sinon": "^7.3.1",
-    "storybook": "^9.0.0",
+    "storybook": "^9.0.4",
     "storybook-dark-mode": "patch:storybook-dark-mode@npm%3A4.0.2#~/.yarn/patches/storybook-dark-mode-npm-4.0.2-1acb0927fb.patch",
     "storybook-react-parcel": "workspace:^",
     "tailwind-variants": "patch:tailwind-variants@npm%3A0.3.1#~/.yarn/patches/tailwind-variants-npm-0.3.1-48888516de.patch",

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

@@ -41,8 +41,8 @@ export interface ContextualHelpProps extends
 
 const popover = style({
   fontFamily: 'sans',
-  minWidth: 218,
-  width: 218,
+  minWidth: 268,
+  width: 268,
   padding: 24
 });
 

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

@@ -213,24 +213,25 @@ function TabListInner<T extends object>(props: TabListProps<T>) {
       style={props.UNSAFE_style}
       className={(props.UNSAFE_className || '') + style({position: 'relative'}, getAllowedOverrides())(null, props.styles)}>
       {orientation === 'vertical' &&
-        <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density} />}
+        <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} tabList={props} density={density} />}
       <RACTabList
         {...props}
         aria-label={ariaLabel}
         aria-labelledby={ariaLabelledBy}
         ref={tablistRef}
         className={renderProps => tablist({...renderProps, labelBehavior, density})} />
       {orientation === 'horizontal' &&
-        <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density} />}
+        <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} tabList={props} density={density} />}
     </div>
   );
 }
 
-interface TabLineProps {
+interface TabLineProps<T extends object> {
   disabledKeys: Iterable<Key> | undefined,
   isDisabled: boolean | undefined,
   selectedTab: HTMLElement | undefined,
   orientation?: Orientation,
+  tabList: TabListProps<T>,
   density?: 'compact' | 'regular'
 }
 
@@ -265,12 +266,13 @@ const selectedIndicator = style<{isDisabled: boolean, orientation?: Orientation}
   transitionTimingFunction: 'in-out'
 });
 
-function TabLine(props: TabLineProps) {
+function TabLine<T extends object>(props: TabLineProps<T>) {
   let {
     disabledKeys,
     isDisabled: isTabsDisabled,
     selectedTab,
     orientation,
+    tabList,
     density
   } = props;
   let {direction} = useLocale();
@@ -314,7 +316,7 @@ function TabLine(props: TabLineProps) {
 
   useLayoutEffect(() => {
     onResize();
-  }, [onResize, state?.selectedItem?.key, density, direction, orientation]);
+  }, [onResize, state?.selectedItem?.key, density, direction, orientation, tabList]);
 
   return (
     <div style={{...style}} className={selectedIndicator({isDisabled, orientation})} />