@react-spectrum/tabs 3.0.0-beta.0 → 3.0.0-nightly-641446f65-240905

package/src/Tabs.tsx

@@ -10,83 +10,102 @@
  * governing permissions and limitations under the License.
  */
 
-import {classNames, SlotProvider, unwrapDOMRef, useDOMRef, useStyleProps, useValueEffect} from '@react-spectrum/utils';
-import {DOMProps, DOMRef, Node, Orientation} from '@react-types/shared';
+import {AriaTabPanelProps, SpectrumTabListProps, SpectrumTabPanelsProps, SpectrumTabsProps} from '@react-types/tabs';
+import {classNames, SlotProvider, unwrapDOMRef, useDOMRef, useStyleProps} from '@react-spectrum/utils';
+import {DOMProps, DOMRef, DOMRefValue, Key, Node, Orientation, RefObject, StyleProps} from '@react-types/shared';
+import {filterDOMProps, mergeProps, useId, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
 import {FocusRing} from '@react-aria/focus';
 import {Item, Picker} from '@react-spectrum/picker';
-import {mergeProps, useId, useLayoutEffect} from '@react-aria/utils';
-import React, {HTMLAttributes, Key, MutableRefObject, ReactElement, useCallback, useEffect, useRef, useState} from 'react';
-import {SingleSelectListState} from '@react-stately/list';
+import {ListCollection} from '@react-stately/list';
+import React, {
+  CSSProperties,
+  HTMLAttributes,
+  ReactElement,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
 import {SpectrumPickerProps} from '@react-types/select';
-import {SpectrumTabsProps} from '@react-types/tabs';
 import styles from '@adobe/spectrum-css-temp/components/tabs/vars.css';
+import {TabListState, useTabListState} from '@react-stately/tabs';
 import {Text} from '@react-spectrum/text';
+import {useCollection} from '@react-stately/collections';
 import {useHover} from '@react-aria/interactions';
 import {useLocale} from '@react-aria/i18n';
 import {useProvider, useProviderProps} from '@react-spectrum/provider';
-import {useResizeObserver} from '@react-aria/utils';
-import {useTab, useTabs} from '@react-aria/tabs';
-import {useTabsState} from '@react-stately/tabs';
+import {useTab, useTabList, useTabPanel} from '@react-aria/tabs';
+
+interface TabsContext<T> {
+  tabProps: SpectrumTabsProps<T>,
+  tabState: {
+    tabListState: TabListState<T> | null,
+    setTabListState: (state: TabListState<T>) => void,
+    selectedTab: HTMLElement | null,
+    collapsed: boolean
+  },
+  refs: {
+    wrapperRef: RefObject<HTMLDivElement | null>,
+    tablistRef: RefObject<HTMLDivElement | null>
+  },
+  tabPanelProps: HTMLAttributes<HTMLElement>,
+  tabLineState: Array<DOMRect>
+}
+
+const TabContext = React.createContext<TabsContext<any> | null>(null);
 
 function Tabs<T extends object>(props: SpectrumTabsProps<T>, ref: DOMRef<HTMLDivElement>) {
   props = useProviderProps(props);
   let {
     orientation = 'horizontal' as Orientation,
-    isDisabled,
-    isQuiet,
     density = 'regular',
     children,
     ...otherProps
   } = props;
 
   let domRef = useDOMRef(ref);
-  let tablistRef = useRef<HTMLDivElement>();
-  let wrapperRef = useRef<HTMLDivElement>();
-  let state = useTabsState(props);
+  let tablistRef = useRef<HTMLDivElement>(null);
+  let wrapperRef = useRef<HTMLDivElement>(null);
 
   let {direction} = useLocale();
   let {styleProps} = useStyleProps(otherProps);
-  let {tabListProps, tabPanelProps} = useTabs(props, state, tablistRef);
-  let [collapse, setCollapse] = useValueEffect(false);
-  let [selectedTab, setSelectedTab] = useState<HTMLElement>();
+  let [collapsed, setCollapsed] = useState(false);
+  let [selectedTab, setSelectedTab] = useState<HTMLElement | null>(null);
+  const [tabListState, setTabListState] = useState<TabListState<T> | null>(null);
+  let [tabPositions, setTabPositions] = useState<DOMRect[]>([]);
+  let prevTabPositions = useRef<DOMRect[]>(tabPositions);
 
   useEffect(() => {
     if (tablistRef.current) {
-      let selectedTab: HTMLElement = tablistRef.current.querySelector(`[data-key="${state.selectedKey}"]`);
+      let selectedTab: HTMLElement | null = tablistRef.current.querySelector(`[data-key="${CSS.escape(tabListState?.selectedKey?.toString() ?? '')}"]`);
 
       if (selectedTab != null) {
         setSelectedTab(selectedTab);
       }
     }
     // collapse is in the dep array so selectedTab can be updated for TabLine positioning
-  }, [children, state.selectedKey, collapse, tablistRef]);
+  }, [children, tabListState?.selectedKey, collapsed, tablistRef]);
 
   let checkShouldCollapse = useCallback(() => {
-    let computeShouldCollapse = () => {
-      if (wrapperRef.current) {
-        let tabsComponent = wrapperRef.current;
-        let tabs = tablistRef.current.querySelectorAll('[role="tab"]');
-        let lastTab = tabs[tabs.length - 1];
-
-        let end = direction === 'rtl' ? 'left' : 'right';
-        let farEdgeTabList = tabsComponent.getBoundingClientRect()[end];
-        let farEdgeLastTab = lastTab?.getBoundingClientRect()[end];
-        let shouldCollapse = direction === 'rtl' ? farEdgeLastTab < farEdgeTabList : farEdgeTabList < farEdgeLastTab;
-
-        return shouldCollapse;
+    if (wrapperRef.current && orientation !== 'vertical') {
+      let tabsComponent = wrapperRef.current;
+      let tabs: NodeListOf<Element> = tablistRef.current?.querySelectorAll('[role="tab"]') ?? new NodeList() as NodeListOf<Element>;
+      let tabDimensions = [...tabs].map((tab: Element) => tab.getBoundingClientRect());
+
+      let end = direction === 'rtl' ? 'left' : 'right';
+      let farEdgeTabList = tabsComponent.getBoundingClientRect()[end];
+      let farEdgeLastTab = tabDimensions[tabDimensions.length - 1][end];
+      let shouldCollapse = direction === 'rtl' ? farEdgeLastTab < farEdgeTabList : farEdgeTabList < farEdgeLastTab;
+      setCollapsed(shouldCollapse);
+      if (tabDimensions.length !== prevTabPositions.current.length
+        || tabDimensions.some((box, index) => box?.left !== prevTabPositions.current[index]?.left || box?.right !== prevTabPositions.current[index]?.right)) {
+        setTabPositions(tabDimensions);
+        prevTabPositions.current = tabDimensions;
       }
-    };
-
-    if (orientation !== 'vertical') {
-      setCollapse(function* () {
-        // Make Tabs render in non-collapsed state
-        yield false;
-
-        // Compute if Tabs should collapse and update
-        yield computeShouldCollapse();
-      });
     }
-  }, [tablistRef, wrapperRef, direction, orientation, setCollapse]);
+  }, [tablistRef, wrapperRef, direction, orientation, setCollapsed, prevTabPositions, setTabPositions]);
 
   useEffect(() => {
     checkShouldCollapse();
@@ -94,74 +113,63 @@ function Tabs<T extends object>(props: SpectrumTabsProps<T>, ref: DOMRef<HTMLDiv
 
   useResizeObserver({ref: wrapperRef, onResize: checkShouldCollapse});
 
+  let tabPanelProps: HTMLAttributes<HTMLElement> = {
+    'aria-labelledby': undefined
+  };
+
   // When the tabs are collapsed, the tabPanel should be labelled by the Picker button element.
   let collapsibleTabListId = useId();
-  if (collapse && orientation !== 'vertical') {
+  if (collapsed && orientation !== 'vertical') {
     tabPanelProps['aria-labelledby'] = collapsibleTabListId;
   }
-
   return (
-    <div
-      {...styleProps}
-      ref={domRef}
-      className={classNames(
-        styles,
-        'spectrum-TabsPanel',
-        `spectrum-TabsPanel--${orientation}`,
-        styleProps.className
-      )}>
-      {orientation === 'vertical' &&
-        <TabList
-          {...tabListProps}
-          ref={tablistRef}
-          orientation={orientation}
-          density={density}
-          isQuiet={isQuiet}
-          isDisabled={isDisabled}
-          state={state}
-          selectedTab={selectedTab} />
-      }
-      {orientation !== 'vertical' &&
-        <CollapsibleTabList
-          {...props}
-          id={collapsibleTabListId}
-          wrapperRef={wrapperRef}
-          collapse={collapse}
-          tabListProps={tabListProps}
-          state={state}
-          selectedTab={selectedTab}
-          ref={tablistRef} />
-      }
-      <div {...tabPanelProps} className={classNames(styles, 'spectrum-TabsPanel-tabpanel')}>
-        {state.selectedItem && state.selectedItem.props.children}
+    <TabContext.Provider
+      value={{
+        tabProps: {...props, orientation, density},
+        tabState: {tabListState, setTabListState, selectedTab, collapsed},
+        refs: {tablistRef, wrapperRef},
+        tabPanelProps,
+        tabLineState: tabPositions
+      }}>
+      <div
+        {...filterDOMProps(otherProps)}
+        {...styleProps}
+        ref={domRef}
+        className={classNames(
+          styles,
+          'spectrum-TabsPanel',
+          `spectrum-TabsPanel--${orientation}`,
+          styleProps.className
+        )}>
+        {props.children}
       </div>
-    </div>
+    </TabContext.Provider>
   );
 }
 
 interface TabProps<T> extends DOMProps {
   item: Node<T>,
-  state: SingleSelectListState<T>,
+  state: TabListState<T>,
   isDisabled?: boolean,
   orientation?: Orientation
 }
 
-export function Tab<T>(props: TabProps<T>) {
-  let {item, state, isDisabled: propsDisabled} = props;
+// @private
+function Tab<T>(props: TabProps<T>) {
+  let {item, state} = props;
   let {key, rendered} = item;
-  let isDisabled = propsDisabled || state.disabledKeys.has(key);
 
-  let ref = useRef<HTMLDivElement>();
-  let {tabProps} = useTab({item, isDisabled}, state, ref);
+  let ref = useRef<any>(undefined);
+  let {tabProps, isSelected, isDisabled} = useTab({key}, state, ref);
 
   let {hoverProps, isHovered} = useHover({
     ...props
   });
-  let isSelected = state.selectedKey === key;
+  let ElementType: React.ElementType = item.props.href ? 'a' : 'div';
 
   return (
     <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>
-      <div
+      <ElementType
         {...mergeProps(tabProps, hoverProps)}
         ref={ref}
         className={classNames(
@@ -187,17 +195,18 @@ export function Tab<T>(props: TabProps<T>) {
             ? <Text>{rendered}</Text>
             : rendered}
         </SlotProvider>
-      </div>
+      </ElementType>
     </FocusRing>
   );
 }
 
 interface TabLineProps {
   orientation?: Orientation,
-  selectedTab?: HTMLElement,
-  selectedKey?: Key
+  selectedTab?: HTMLElement | null,
+  selectedKey?: Key | null
 }
 
+// @private
 function TabLine(props: TabLineProps) {
   let {
     orientation,
@@ -207,164 +216,200 @@ function TabLine(props: TabLineProps) {
     selectedKey
   } = props;
 
-  let verticalSelectionIndicatorOffset = 12;
   let {direction} = useLocale();
   let {scale} = useProvider();
+  let {tabLineState} = useContext(TabContext)!;
 
-  let [style, setStyle] = useState({
+  let [style, setStyle] = useState<CSSProperties>({
     width: undefined,
     height: undefined
   });
 
-  useLayoutEffect(() => {
+  let onResize = useCallback(() => {
     if (selectedTab) {
-      let styleObj = {transform: undefined, width: undefined, height: undefined};
+      let styleObj: CSSProperties = {transform: undefined, width: undefined, height: undefined};
       // In RTL, calculate the transform from the right edge of the tablist so that resizing the window doesn't break the Tabline position due to offsetLeft changes
-      let offset = direction === 'rtl' ? -1 * ((selectedTab.offsetParent as HTMLElement)?.offsetWidth - selectedTab.offsetWidth - selectedTab.offsetLeft) : selectedTab.offsetLeft;
+      let offset = direction === 'rtl' ?
+        -1 * ((selectedTab.offsetParent as HTMLElement)?.offsetWidth - selectedTab.offsetWidth - selectedTab.offsetLeft) :
+        selectedTab.offsetLeft;
       styleObj.transform = orientation === 'vertical'
-        ? `translateY(${selectedTab.offsetTop + verticalSelectionIndicatorOffset / 2}px)`
+        ? `translateY(${selectedTab.offsetTop}px)`
         : `translateX(${offset}px)`;
 
       if (orientation === 'horizontal') {
         styleObj.width = `${selectedTab.offsetWidth}px`;
       } else {
-        styleObj.height = `${selectedTab.offsetHeight - verticalSelectionIndicatorOffset}px`;
+        styleObj.height = `${selectedTab.offsetHeight}px`;
       }
       setStyle(styleObj);
     }
+  }, [direction, setStyle, selectedTab, orientation]);
 
-  }, [direction, setStyle, selectedTab, orientation, scale, verticalSelectionIndicatorOffset, selectedKey]);
+  useLayoutEffect(() => {
+    onResize();
+  }, [onResize, scale, selectedKey, tabLineState]);
 
   return <div className={classNames(styles, 'spectrum-Tabs-selectionIndicator')} role="presentation" style={style} />;
 }
 
-interface CollapsibleTabListProps<T> extends TabListProps<T>, TabPickerProps<T> {
-  tabListProps?: HTMLAttributes<HTMLElement>,
-  wrapperRef: MutableRefObject<HTMLDivElement>,
-  collapse?: boolean,
-  tabListclassName?: string
-}
-
-const CollapsibleTabList = React.forwardRef(function <T> (props: CollapsibleTabListProps<T>, ref: MutableRefObject<HTMLDivElement>) {
-  let {
-    tabListProps,
-    density,
-    isQuiet,
-    isDisabled,
-    state,
-    selectedTab,
-    wrapperRef,
-    collapse
-  } = props;
+/**
+ * A TabList is used within Tabs to group tabs that a user can switch between.
+ * The keys of the items within the <TabList> must match up with a corresponding item inside the <TabPanels>.
+ */
+export function TabList<T>(props: SpectrumTabListProps<T>) {
+  const tabContext = useContext(TabContext)!;
+  const {refs, tabState, tabProps, tabPanelProps} = tabContext;
+  const {isQuiet, density, isEmphasized, orientation} = tabProps;
+  const {selectedTab, collapsed, setTabListState} = tabState;
+  const {tablistRef, wrapperRef} = refs;
+  // Pass original Tab props but override children to create the collection.
+  const state = useTabListState({...tabProps, children: props.children});
+
+  let {styleProps} = useStyleProps(props);
+  const {tabListProps} = useTabList({...tabProps, ...props}, state, tablistRef);
 
-  let tabListclassName = classNames(styles, 'spectrum-TabsPanel-tabs');
+  useEffect(() => {
+    // Passing back to root as useTabPanel needs the TabListState
+    setTabListState(state);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.disabledKeys, state.selectedItem, state.selectedKey, props.children]);
 
-  return (
-    <div
-      ref={wrapperRef}
-      className={classNames(
-        styles,
-        'spectrum-TabsPanel-collapseWrapper'
-      )}>
-      {collapse && <TabPicker {...props} className={tabListclassName} />}
-      {!collapse && (
-        <TabList
-          {...tabListProps}
-          density={density}
-          isQuiet={isQuiet}
-          isDisabled={isDisabled}
-          state={state}
-          selectedTab={selectedTab}
-          ref={ref}
-          orientation="horizontal"
-          className={tabListclassName} />
-      )}
-    </div>
-  );
-});
+  let collapseStyle : React.CSSProperties = collapsed && orientation !== 'vertical' ? {maxWidth: 'calc(100% + 1px)', overflow: 'hidden', visibility: 'hidden', position: 'absolute'} : {maxWidth: 'calc(100% + 1px)'};
+  let stylePropsFinal = orientation === 'vertical' ? styleProps : {style: collapseStyle};
 
-interface TabListProps<T> {
-  isQuiet?: boolean,
-  density?: 'compact' | 'regular',
-  isDisabled?: boolean,
-  orientation?: Orientation,
-  state: SingleSelectListState<T>,
-  selectedTab: HTMLElement,
-  className?: string
-}
+  if (collapsed && orientation !== 'vertical') {
+    tabListProps['aria-hidden'] = true;
+  }
 
-const TabList = React.forwardRef(function <T> (props: TabListProps<T>, ref: MutableRefObject<HTMLDivElement>) {
-  let {
-    isQuiet,
-    density,
-    state,
-    isDisabled,
-    orientation,
-    selectedTab,
-    className,
-    ...otherProps
-  } = props;
+  let tabListclassName = classNames(styles, 'spectrum-TabsPanel-tabs');
 
-  return (
+  const tabContent = (
     <div
-      {...otherProps}
-      ref={ref}
+      {...stylePropsFinal}
+      {...tabListProps}
+      ref={tablistRef}
       className={classNames(
         styles,
         'spectrum-Tabs',
         `spectrum-Tabs--${orientation}`,
+        tabListclassName,
         {
           'spectrum-Tabs--quiet': isQuiet,
+          'spectrum-Tabs--emphasized': isEmphasized,
           ['spectrum-Tabs--compact']: density === 'compact'
         },
-        className
-      )}>
+        orientation === 'vertical' && styleProps.className
+      )
+      }>
       {[...state.collection].map((item) => (
-        <Tab key={item.key} item={item} state={state} isDisabled={isDisabled} orientation={orientation} />
+        <Tab key={item.key} item={item} state={state} orientation={orientation} />
       ))}
       <TabLine orientation={orientation} selectedTab={selectedTab} />
     </div>
   );
-});
 
-interface TabPickerProps<T> extends SpectrumPickerProps<T> {
+
+  if (orientation === 'vertical') {
+    return tabContent;
+  } else {
+    return (
+      <div
+        {...styleProps}
+        ref={wrapperRef}
+        className={classNames(
+          styles,
+          'spectrum-TabsPanel-collapseWrapper',
+          styleProps.className
+        )}>
+        <TabPicker {...props} {...tabProps} visible={collapsed} id={tabPanelProps['aria-labelledby']} state={state} className={tabListclassName} />
+        {tabContent}
+      </div>
+    );
+  }
+}
+
+/**
+ * TabPanels is used within Tabs as a container for the content of each tab.
+ * The keys of the items within the <TabPanels> must match up with a corresponding item inside the <TabList>.
+ */
+export function TabPanels<T extends object>(props: SpectrumTabPanelsProps<T>) {
+  const {tabState, tabProps} = useContext(TabContext)!;
+  const {tabListState} = tabState;
+
+  const factory = useCallback((nodes: Iterable<Node<T>>) => new ListCollection(nodes), []);
+  const collection = useCollection({items: tabProps.items, ...props}, factory, {suppressTextValueWarning: true});
+  const selectedItem = tabListState && tabListState.selectedKey != null ? collection.getItem(tabListState.selectedKey) : null;
+
+  return (
+    <TabPanel {...props} key={tabListState?.selectedKey}>
+      {selectedItem && selectedItem.props.children}
+    </TabPanel>
+  );
+}
+
+interface TabPanelProps extends AriaTabPanelProps, StyleProps {
+  children?: ReactNode
+}
+
+// @private
+function TabPanel(props: TabPanelProps) {
+  const {tabState, tabPanelProps: ctxTabPanelProps} = useContext(TabContext)!;
+  const {tabListState} = tabState;
+  let ref = useRef<HTMLDivElement | null>(null);
+  const {tabPanelProps} = useTabPanel(props, tabListState, ref);
+  let {styleProps} = useStyleProps(props);
+
+  if (ctxTabPanelProps['aria-labelledby']) {
+    tabPanelProps['aria-labelledby'] = ctxTabPanelProps['aria-labelledby'];
+  }
+
+  return (
+    <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>
+      <div {...styleProps} {...tabPanelProps} ref={ref} className={classNames(styles, 'spectrum-TabsPanel-tabpanel', styleProps.className)}>
+        {props.children}
+      </div>
+    </FocusRing>
+  );
+}
+
+interface TabPickerProps<T> extends Omit<SpectrumPickerProps<T>, 'children'> {
   density?: 'compact' | 'regular',
-  state: SingleSelectListState<T>,
-  className?: string
+  isEmphasized?: boolean,
+  state: TabListState<T>,
+  className?: string,
+  visible: boolean
 }
 
 function TabPicker<T>(props: TabPickerProps<T>) {
   let {
     isDisabled,
+    isEmphasized,
     isQuiet,
     state,
     'aria-labelledby': ariaLabeledBy,
     'aria-label': ariaLabel,
     density,
     className,
-    id
+    id,
+    visible
   } = props;
 
-  let ref = useRef();
-  let [pickerNode, setPickerNode] = useState(null);
+  let ref = useRef<DOMRefValue<HTMLDivElement>>(null);
+  let [pickerNode, setPickerNode] = useState<HTMLElement | null>(null);
 
   useEffect(() => {
     let node = unwrapDOMRef(ref);
     setPickerNode(node.current);
   }, [ref]);
 
-  let items = [...state.collection].map((item) => ({
-    rendered: item.rendered,
-    textValue: item.textValue,
-    id: item.key
-  }));
-
+  let items = [...state.collection];
   let pickerProps = {
     'aria-labelledby': ariaLabeledBy,
     'aria-label': ariaLabel
   };
 
-  // TODO: Figure out if tabListProps should go onto the div here, v2 doesn't do it
+  const style : React.CSSProperties = visible ? {} : {visibility: 'hidden', position: 'absolute'};
+
   return (
     <div
       className={classNames(
@@ -374,10 +419,13 @@ function TabPicker<T>(props: TabPickerProps<T>) {
         'spectrum-Tabs--isCollapsed',
         {
           'spectrum-Tabs--quiet': isQuiet,
-          ['spectrum-Tabs--compact']: density === 'compact'
+          ['spectrum-Tabs--compact']: density === 'compact',
+          'spectrum-Tabs--emphasized': isEmphasized
         },
         className
-      )}>
+      )}
+      style={style}
+      aria-hidden={visible ? undefined : true}>
       <SlotProvider
         slots={{
           icon: {
@@ -394,11 +442,12 @@ function TabPicker<T>(props: TabPickerProps<T>) {
           items={items}
           ref={ref}
           isQuiet
-          isDisabled={isDisabled}
+          isDisabled={!visible || isDisabled}
           selectedKey={state.selectedKey}
           disabledKeys={state.disabledKeys}
-          onSelectionChange={state.setSelectedKey}>
-          {item => <Item textValue={item.textValue}>{item.rendered}</Item>}
+          onSelectionChange={state.setSelectedKey}
+          UNSAFE_className={classNames(styles, 'spectrum-Tabs-picker')}>
+          {item => <Item {...item.props}>{item.rendered}</Item>}
         </Picker>
         {pickerNode && <TabLine orientation="horizontal" selectedTab={pickerNode} selectedKey={state.selectedKey} />}
       </SlotProvider>

package/src/index.ts

@@ -12,5 +12,6 @@
 
 /// <reference types="css-module-types" />
 
-export * from './Tabs';
+export {TabList, TabPanels, Tabs} from './Tabs';
 export {Item} from '@react-stately/collections';
+export type {SpectrumTabsProps, SpectrumTabListProps, SpectrumTabPanelsProps} from '@react-types/tabs';