Adding collapsible Tabs

packages/@adobe/spectrum-css-temp/components/tabs/index.css

@@ -17,6 +17,21 @@ governing permissions and limitations under the License.
   --spectrum-tabs-compact-item-height: calc(var(--spectrum-tabs-quiet-compact-height) - var(--spectrum-tabs-rule-height));
 }
 
+.spectrum-TabsPanel {
+  display: flex;
+  /* This is so TabsPanel can collapse with wrapping block/flex containers out of the box. If end user wants to place element next to tabpanel,
+  they must include flex: 1 1 auto and min-width: 0 on the Tabs component. */
+  width: 100%;
+}
+
+.spectrum-TabsPanel--horizontal {
+  flex-direction: column;
+}
+
+.spectrum-TabsPanel--vertical {
+  flex-direction: row;
+}
+
 .spectrum-Tabs {
   display: flex;
 
@@ -65,9 +80,7 @@ governing permissions and limitations under the License.
     block-size: var(--spectrum-tabs-item-height);
 
     & + .spectrum-Tabs-itemLabel {
-      /* icons are inexplicably offset by 3px. Subtract this value from the icon-gap
-         to correct the gap in CSS */
-      margin-inline-start: calc(var(--spectrum-tabs-icon-gap) - var(--spectrum-global-dimension-size-40));
+      margin-inline-start: var(--spectrum-tabs-icon-gap);
     }
   }
 
@@ -105,14 +118,23 @@ governing permissions and limitations under the License.
 
 .spectrum-Tabs-selectionIndicator {
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
 
   /* Be below the tab */
   z-index: 0;
 
   transition: transform var(--spectrum-tabs-selection-indicator-animation-duration) ease-in-out;
   transform-origin: top left;
 
+
+  [dir='ltr'] .spectrum-Tabs--horizontal & {
+    transform: translateX(var(--spectrum-tabs-focus-ring-padding-x));
+  }
+
+  [dir='rtl'] .spectrum-Tabs--horizontal & {
+    transform: translateX(calc(var(--spectrum-tabs-focus-ring-padding-x) * -1));
+  }
+
   border-radius: var(--spectrum-tabs-rule-border-radius);
 }
 
@@ -149,6 +171,36 @@ governing permissions and limitations under the License.
     inset-block-end: calc(var(--spectrum-tabs-rule-height) * -1);
   }
 
+  &.spectrum-Tabs--isCollapsed {
+    inset-inline-start: 0;
+    block-size: var(--spectrum-tabs-item-height);
+
+    /* FieldButton Picker focus ring override */
+    & button {
+      &::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+
+        box-sizing: border-box;
+
+        block-size: var(--spectrum-tabs-focus-ring-height);
+        margin-block-start: calc(calc(var(--spectrum-tabs-focus-ring-height) / -2) + calc(var(--spectrum-tabs-rule-height) / 2));
+        inset-inline-start: calc(var(--spectrum-tabs-focus-ring-padding-x) * -1);
+        inset-inline-end: calc(var(--spectrum-tabs-focus-ring-padding-x) * -1);
+        border: var(--spectrum-tabs-focus-ring-size) solid transparent;
+        border-radius: var(--spectrum-tabs-focus-ring-border-radius);
+
+        pointer-events: none;
+      }
+    }
+
+    &.spectrum-Tabs--compact {
+      & button {
+        height: calc(var(--spectrum-tabs-compact-item-height));
+      }
+    }
+  }
 
   &.spectrum-Tabs--compact {
     /* The ActionButton is taller than the tabs, so don't push tabs around */
@@ -204,3 +256,18 @@ governing permissions and limitations under the License.
     inset-inline-start: calc(var(--spectrum-tabs-vertical-rule-width) * -1);
   }
 }
+
+.spectrum-TabsPanel-collapseWrapper {
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: 0%;
+  overflow: hidden;
+  position: relative;
+}
+
+.spectrum-TabsPanel-tabs {
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: 0%;
+}

packages/@adobe/spectrum-css-temp/components/tabs/skin.css

@@ -12,6 +12,17 @@ governing permissions and limitations under the License.
 
 .spectrum-Tabs {
   border-block-end-color: var(--spectrum-tabs-rule-color);
+
+  &.spectrum-Tabs--isCollapsed {
+    :focus-ring {
+      /* FieldButton Picker focus ring override */
+      box-shadow: none;
+
+      &::before {
+        border-color: var(--spectrum-tabs-focus-ring-color);
+      }
+    }
+  }
 }
 
 .spectrum-Tabs--vertical {

packages/@react-aria/tabs/src/useTabs.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 import {HTMLAttributes, Key, RefObject, useMemo, useState} from 'react';
-import {mergeProps, useId} from '@react-aria/utils';
+import {mergeProps, useId, useLabels} from '@react-aria/utils';
 import {SingleSelectListState} from '@react-stately/list';
 import {TabAriaProps, TabsAriaProps} from '@react-types/tabs';
 import {TabsKeyboardDelegate} from './TabsKeyboardDelegate';
@@ -30,7 +30,6 @@ const tabsIds = new WeakMap<SingleSelectListState<unknown>, string>();
 export function useTabs<T>(props: TabsAriaProps<T>, state: SingleSelectListState<T>, ref): TabsAria {
   let {
     isDisabled,
-    'aria-label': ariaLabel,
     orientation = 'horizontal',
     keyboardActivation = 'automatic'
   } = props;
@@ -55,11 +54,6 @@ export function useTabs<T>(props: TabsAriaProps<T>, state: SingleSelectListState
     disallowEmptySelection: true
   });
 
-  // Ensure a tab is always selected
-  if (manager.isEmpty) {
-    manager.replaceSelection(delegate.getFirstKey());
-  }
-
   // Compute base id for all tabs
   let tabsId = useId();
   tabsIds.set(state, tabsId);
@@ -69,13 +63,13 @@ export function useTabs<T>(props: TabsAriaProps<T>, state: SingleSelectListState
     onFocusWithinChange: setFocusWithin
   });
   let tabIndex = isFocusWithin ? -1 : 0;
+  let tabListLabelProps = useLabels({...props, id: tabsId});
 
   return {
     tabListProps: {
-      ...mergeProps(focusWithinProps, collectionProps),
+      ...mergeProps(focusWithinProps, collectionProps, tabListLabelProps),
       role: 'tablist',
       'aria-disabled': isDisabled,
-      'aria-label': ariaLabel,
       tabIndex: isDisabled ? null : tabIndex
     },
     tabPanelProps: {

packages/@react-aria/utils/src/useResizeObserver.ts

@@ -13,7 +13,8 @@ export function useResizeObserver<T extends HTMLElement>(options: useResizeObser
   const {ref, onResize} = options;
 
   useEffect(() => {
-    if (!ref) {
+    let element = ref?.current;
+    if (!element) {
       return;
     }
 
@@ -31,10 +32,12 @@ export function useResizeObserver<T extends HTMLElement>(options: useResizeObser
 
         onResize();
       });
-      resizeObserverInstance.observe(ref.current);
+      resizeObserverInstance.observe(element);
 
       return () => {
-        resizeObserverInstance.unobserve(ref.current);
+        if (element) {
+          resizeObserverInstance.unobserve(element);
+        }
       };
     }
 

packages/@react-spectrum/breadcrumbs/src/Breadcrumbs.tsx

@@ -11,11 +11,11 @@
  */
 import {ActionButton} from '@react-spectrum/button';
 import {BreadcrumbItem} from './BreadcrumbItem';
-import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
+import {classNames, useDOMRef, useStyleProps, useValueEffect} from '@react-spectrum/utils';
 import {DOMRef} from '@react-types/shared';
 import FolderBreadcrumb from '@spectrum-icons/ui/FolderBreadcrumb';
 import {Menu, MenuTrigger} from '@react-spectrum/menu';
-import React, {Key, ReactElement, useCallback, useRef, useState} from 'react';
+import React, {Key, ReactElement, useCallback, useRef} from 'react';
 import {SpectrumBreadcrumbsProps} from '@react-types/breadcrumbs';
 import styles from '@adobe/spectrum-css-temp/components/breadcrumb/vars.css';
 import {useBreadcrumbs} from '@react-aria/breadcrumbs';
@@ -217,52 +217,6 @@ function Breadcrumbs<T>(props: SpectrumBreadcrumbsProps<T>, ref: DOMRef) {
   );
 }
 
-// This hook works like `useState`, but when setting the value, you pass a generator function
-// that can yield multiple values. Each yielded value updates the state and waits for the next
-// layout effect, then continues the generator. This allows sequential updates to state to be
-// written linearly.
-function useValueEffect(defaultValue) {
-  let [value, setValue] = useState(defaultValue);
-  let effect = useRef(null);
-
-  // Store the function in a ref so we can always access the current version
-  // which has the proper `value` in scope.
-  let nextRef = useRef(null);
-  nextRef.current = () => {
-    // Run the generator to the next yield.
-    let newValue = effect.current.next();
-
-    // If the generator is done, reset the effect.
-    if (newValue.done) {
-      effect.current = null;
-      return;
-    }
-
-    // If the value is the same as the current value,
-    // then continue to the next yield. Otherwise,
-    // set the value in state and wait for the next layout effect.
-    if (value === newValue.value) {
-      nextRef.current();
-    } else {
-      setValue(newValue.value);
-    }
-  };
-
-  useLayoutEffect(() => {
-    // If there is an effect currently running, continue to the next yield.
-    if (effect.current) {
-      nextRef.current();
-    }
-  });
-
-  let queue = useCallback(fn => {
-    effect.current = fn();
-    nextRef.current();
-  }, [effect, nextRef]);
-
-  return [value, queue];
-}
-
 /**
  * Breadcrumbs show hierarchy and navigational context for a user’s location within an application.
  */

packages/@react-spectrum/button/package.json

@@ -40,6 +40,7 @@
     "@react-spectrum/utils": "^3.3.0",
     "@react-stately/toggle": "^3.2.1",
     "@react-types/button": "^3.2.1",
+    "@react-types/provider": "^3.1.1",
     "@react-types/shared": "^3.2.1",
     "@spectrum-icons/ui": "^3.2.0"
   },

packages/@react-spectrum/button/src/FieldButton.tsx

@@ -11,7 +11,8 @@
  */
 
 import {ButtonProps} from '@react-types/button';
-import {classNames, SlotProvider, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
+import {classNames, SlotProvider, useFocusableRef, useSlotProps, useStyleProps} from '@react-spectrum/utils';
+import {CSSModule} from '@react-types/provider';
 import {DOMProps, FocusableRef, StyleProps} from '@react-types/shared';
 import {FocusRing} from '@react-aria/focus';
 import {mergeProps} from '@react-aria/utils';
@@ -23,27 +24,32 @@ import {useHover} from '@react-aria/interactions';
 interface FieldButtonProps extends ButtonProps, DOMProps, StyleProps {
   isQuiet?: boolean,
   isActive?: boolean,
-  validationState?: 'valid' | 'invalid'
+  validationState?: 'valid' | 'invalid',
+  focusRingStyles?: CSSModule
 }
 
 // @private
 function FieldButton(props: FieldButtonProps, ref: FocusableRef) {
+  props = useSlotProps(props, 'button');
   let {
     isQuiet,
     isDisabled,
     validationState,
     children,
     autoFocus,
     isActive,
+    focusRingStyles,
     ...otherProps
   } = props;
   let domRef = useFocusableRef(ref) as RefObject<HTMLButtonElement>;
   let {buttonProps, isPressed} = useButton(props, domRef);
   let {hoverProps, isHovered} = useHover({isDisabled});
   let {styleProps} = useStyleProps(otherProps);
 
+  let focusRingClass = focusRingStyles ? classNames(focusRingStyles, 'focus-ring') : null;
+
   return (
-    <FocusRing focusRingClass={classNames(styles, 'focus-ring')} autoFocus={autoFocus}>
+    <FocusRing focusRingClass={classNames(styles, 'focus-ring', focusRingClass)} autoFocus={autoFocus}>
       <button
         {...mergeProps(buttonProps, hoverProps)}
         ref={domRef}

packages/@react-spectrum/tabs/package.json

@@ -41,8 +41,11 @@
     "@react-spectrum/button": "^3.2.1",
     "@react-spectrum/menu": "^3.2.1",
     "@react-spectrum/picker": "^3.2.1",
+    "@react-spectrum/text": "^3.1.0",
     "@react-spectrum/utils": "^3.3.0",
+    "@react-stately/collections": "^3.2.1",
     "@react-stately/list": "^3.2.1",
+    "@react-types/select": "^3.1.1",
     "@react-types/shared": "^3.2.1",
     "@react-types/tabs": "3.0.0-alpha.1",
     "@spectrum-icons/workflow": "^3.2.0"