@react-spectrum/s2 0.6.0 → 0.7.0

package/src/Tabs.tsx

@@ -11,28 +11,32 @@
  */
 
 import {
-    TabListProps as AriaTabListProps,
-    TabPanel as AriaTabPanel,
-    TabPanelProps as AriaTabPanelProps,
-    TabProps as AriaTabProps,
-    TabsProps as AriaTabsProps,
-    ContextValue,
-    Provider,
-    Tab as RACTab,
-    TabList as RACTabList,
-    Tabs as RACTabs,
-    TabListStateContext,
-    useSlottedContext
-  } from 'react-aria-components';
+  TabListProps as AriaTabListProps,
+  TabPanel as AriaTabPanel,
+  TabPanelProps as AriaTabPanelProps,
+  TabProps as AriaTabProps,
+  TabsProps as AriaTabsProps,
+  ContextValue,
+  Group,
+  Provider,
+  Tab as RACTab,
+  TabList as RACTabList,
+  Tabs as RACTabs,
+  TabListStateContext
+} from 'react-aria-components';
 import {centerBaseline} from './CenterBaseline';
-import {Collection, DOMRef, DOMRefValue, Key, Node, Orientation} from '@react-types/shared';
-import {createContext, forwardRef, ReactNode, useCallback, useContext, useEffect, useRef, useState} from 'react';
-import {focusRing, style} from '../style' with {type: 'macro'};
+import {Collection, DOMRef, DOMRefValue, Key, Node, Orientation, RefObject} from '@react-types/shared';
+import {CollectionBuilder} from '@react-aria/collections';
+import {createContext, forwardRef, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import {focusRing, size, style} from '../style' with {type: 'macro'};
 import {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {IconContext} from './Icon';
+import {inertValue, useEffectEvent, useId, useLabels, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
+import {Picker, PickerItem} from './TabsPicker';
 import {Text, TextContext} from './Content';
+import {useControlledState} from '@react-stately/utils';
 import {useDOMRef} from '@react-spectrum/utils';
-import {useLayoutEffect} from '@react-aria/utils';
+import {useHasTabbableChild} from '@react-aria/focus';
 import {useLocale} from '@react-aria/i18n';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
@@ -40,108 +44,104 @@ export interface TabsProps extends Omit<AriaTabsProps, 'className' | 'style' | '
   /** Spectrum-defined styles, returned by the `style()` macro. */
   styles?: StylesPropWithHeight,
   /** The content to display in the tabs. */
-  children?: ReactNode,
+  children: ReactNode,
   /**
    * The amount of space between the tabs.
    * @default 'regular'
    */
-  density?: 'compact' | 'regular'
+  density?: 'compact' | 'regular',
+  /**
+   * Defines if the text within the tabs should be hidden and only the icon should be shown.
+   * The text is always visible when the item is collapsed into a picker.
+   * @default 'show'
+   */
+  labelBehavior?: 'show' | 'hide'
 }
 
 export interface TabProps extends Omit<AriaTabProps, 'children' | 'style' | 'className'>, StyleProps {
   /** The content to display in the tab. */
-  children?: ReactNode
+  children: ReactNode
 }
 
-export interface TabListProps<T> extends Omit<AriaTabListProps<T>, 'children' | 'style' | 'className'>, StyleProps {
+export interface TabListProps<T> extends Omit<AriaTabListProps<T>, 'style' | 'className' | 'aria-label' | 'aria-labelledby'>, StyleProps {
   /** The content to display in the tablist. */
-  children?: ReactNode
+  children: ReactNode | ((item: T) => ReactNode)
 }
 
 export interface TabPanelProps extends Omit<AriaTabPanelProps, 'children' | 'style' | 'className'>, UnsafeStyles {
   /** Spectrum-defined styles, returned by the `style()` macro. */
   styles?: StylesPropWithHeight,
   /** The content to display in the tab panels. */
-  children?: ReactNode
+  children: ReactNode
 }
 
-export const TabsContext = createContext<ContextValue<TabsProps, DOMRefValue<HTMLDivElement>>>(null);
-
-const tabPanel = style({
-  marginTop: 4,
-  color: 'gray-800',
-  flexGrow: 1,
-  flexBasis: '[0%]',
-  minHeight: 0,
-  minWidth: 0
-}, getAllowedOverrides({height: true}));
-
-export function TabPanel(props: TabPanelProps) {
-  return (
-    <AriaTabPanel
-      {...props}
-      style={props.UNSAFE_style}
-      className={(props.UNSAFE_className || '') + tabPanel(null, props.styles)} />
-  );
-}
+export const TabsContext = createContext<ContextValue<Partial<TabsProps>, DOMRefValue<HTMLDivElement>>>(null);
+const InternalTabsContext = createContext<Partial<TabsProps>>({});
+const CollapseContext = createContext({
+  showTabs: true,
+  menuId: '',
+  valueId: ''
+});
 
-const tab = style({
-  ...focusRing(),
-  display: 'flex',
-  color: {
-    default: 'neutral-subdued',
-    isSelected: 'neutral',
-    isHovered: 'neutral-subdued',
-    isDisabled: 'disabled',
-    forcedColors: {
-      isSelected: 'Highlight',
-      isDisabled: 'GrayText'
-    }
-  },
-  borderRadius: 'sm',
-  gap: 'text-to-visual',
-  height: {
-    density: {
-      compact: 32,
-      regular: 48
-    }
-  },
-  alignItems: 'center',
+const tabs = style({
   position: 'relative',
-  cursor: 'default',
-  flexShrink: 0,
-  transition: 'default'
-}, getAllowedOverrides());
-
-const icon = style({
+  display: 'flex',
   flexShrink: 0,
-  '--iconPrimary': {
-    type: 'fill',
-    value: 'currentColor'
+  font: 'ui',
+  flexDirection: {
+    orientation: {
+      horizontal: 'column'
+    }
   }
-});
+}, getAllowedOverrides({height: true}));
 
-export function Tab(props: TabProps) {
-  let {density} = useSlottedContext(TabsContext) ?? {};
+/**
+ * Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.
+ */
+export const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, TabsContext);
+  let {
+    density = 'regular',
+    isDisabled,
+    disabledKeys,
+    orientation = 'horizontal',
+    labelBehavior = 'show'
+  } = props;
+  let domRef = useDOMRef(ref);
+  let [value, setValue] = useControlledState(props.selectedKey, props.defaultSelectedKey ?? null!, props.onSelectionChange);
+
+  if (!props['aria-label'] && !props['aria-labelledby']) {
+    throw new Error('An aria-label or aria-labelledby prop is required on Tabs for accessibility.');
+  }
 
   return (
-    <RACTab
-      {...props}
-      style={props.UNSAFE_style}
-      className={renderProps => (props.UNSAFE_className || '') + tab({...renderProps, density}, props.styles)}>
-      <Provider
-        values={[
-          [TextContext, {styles: style({order: 1})}],
-          [IconContext, {
-            render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
-            styles: icon
-          }]
-        ]}>
-        {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}
-      </Provider>
-    </RACTab>
+    <Provider
+      values={[
+        [InternalTabsContext, {
+          density,
+          isDisabled,
+          orientation,
+          disabledKeys,
+          selectedKey: value,
+          onSelectionChange: setValue,
+          labelBehavior,
+          'aria-label': props['aria-label'],
+          'aria-labelledby': props['aria-labelledby']
+        }]
+      ]}>
+      <CollectionBuilder content={props.children}>
+        {collection => (
+          <CollapsingTabs
+            {...props}
+            selectedKey={value}
+            onSelectionChange={setValue}
+            collection={collection}
+            containerRef={domRef} />
+        )}
+      </CollectionBuilder>
+    </Provider>
   );
-}
+});
 
 const tablist = style({
   display: 'flex',
@@ -151,6 +151,14 @@ const tablist = style({
         density: {
           compact: 24,
           regular: 32
+        },
+        labelBehavior: {
+          hide: {
+            density: {
+              compact: 16,
+              regular: 24
+            }
+          }
         }
       }
     }
@@ -175,7 +183,15 @@ const tablist = style({
 });
 
 export function TabList<T extends object>(props: TabListProps<T>) {
-  let {density, isDisabled, disabledKeys, orientation} = useSlottedContext(TabsContext) ?? {};
+  let {showTabs} = useContext(CollapseContext) ?? {};
+
+  if (showTabs) {
+    return <TabListInner {...props} />;
+  }
+}
+
+function TabListInner<T extends object>(props: TabListProps<T>) {
+  let {density, isDisabled, disabledKeys, orientation, labelBehavior, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy} = useContext(InternalTabsContext) ?? {};
   let state = useContext(TabListStateContext);
   let [selectedTab, setSelectedTab] = useState<HTMLElement | undefined>(undefined);
   let tablistRef = useRef<HTMLDivElement>(null);
@@ -198,34 +214,16 @@ export function TabList<T extends object>(props: TabListProps<T>) {
         <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density} />}
       <RACTabList
         {...props}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
         ref={tablistRef}
-        className={renderProps => tablist({...renderProps, density})} />
+        className={renderProps => tablist({...renderProps, labelBehavior, density})} />
       {orientation === 'horizontal' &&
         <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density} />}
     </div>
   );
 }
 
-function isAllTabsDisabled<T>(collection: Collection<Node<T>> | null, disabledKeys: Set<Key>) {
-  let testKey: Key | null = null;
-  if (collection && collection.size > 0) {
-    testKey = collection.getFirstKey();
-
-    let index = 0;
-    while (testKey && index < collection.size) {
-      // We have to check if the item in the collection has a key in disabledKeys or has the isDisabled prop set directly on it
-      if (!disabledKeys.has(testKey) && !collection.getItem(testKey)?.props?.isDisabled) {
-        return false;
-      }
-
-      testKey = collection.getKeyAfter(testKey);
-      index++;
-    }
-    return true;
-  }
-  return false;
-}
-
 interface TabLineProps {
   disabledKeys: Iterable<Key> | undefined,
   isDisabled: boolean | undefined,
@@ -279,7 +277,7 @@ function TabLine(props: TabLineProps) {
   // We want to add disabled styling to the selection indicator only if all the Tabs are disabled
   let [isDisabled, setIsDisabled] = useState<boolean>(false);
   useEffect(() => {
-    let isDisabled = isTabsDisabled || isAllTabsDisabled(state?.collection || null, disabledKeys ? new Set(disabledKeys) : new Set(null));
+    let isDisabled = isTabsDisabled || isAllTabsDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set(null));
     setIsDisabled(isDisabled);
   }, [state?.collection, disabledKeys, isTabsDisabled, setIsDisabled]);
 
@@ -314,50 +312,358 @@ function TabLine(props: TabLineProps) {
 
   useLayoutEffect(() => {
     onResize();
-  }, [onResize, state?.selectedItem?.key, direction, orientation, density]);
+  }, [onResize, state?.selectedItem?.key, density, direction, orientation]);
 
   return (
     <div style={{...style}} className={selectedIndicator({isDisabled, orientation})} />
   );
 }
 
-const tabs = style({
+const tab = style({
+  ...focusRing(),
   display: 'flex',
+  color: {
+    default: 'neutral-subdued',
+    isSelected: 'neutral',
+    isHovered: 'neutral-subdued',
+    isDisabled: 'disabled',
+    forcedColors: {
+      isSelected: 'Highlight',
+      isDisabled: 'GrayText'
+    }
+  },
+  borderRadius: 'sm',
+  gap: 'text-to-visual',
+  height: {
+    density: {
+      compact: 32,
+      regular: 48
+    }
+  },
+  alignItems: 'center',
+  position: 'relative',
+  cursor: 'default',
   flexShrink: 0,
-  fontFamily: 'sans',
-  fontWeight: 'normal',
-  flexDirection: {
-    orientation: {
-      horizontal: 'column'
+  transition: 'default',
+  paddingX: {
+    labelBehavior: {
+      hide: size(6)
     }
+  },
+  disableTapHighlight: true
+}, getAllowedOverrides());
+
+const icon = style({
+  display: 'block',
+  flexShrink: 0,
+  '--iconPrimary': {
+    type: 'fill',
+    value: 'currentColor'
   }
-}, getAllowedOverrides({height: true}));
+});
 
-/**
- * Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.
- */
-export const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLDivElement>) {
-  [props, ref] = useSpectrumContextProps(props, ref, TabsContext);
-  let {
-    density = 'regular',
-    isDisabled,
-    disabledKeys,
-    orientation = 'horizontal'
-  } = props;
-  let domRef = useDOMRef(ref);
+export function Tab(props: TabProps) {
+  let {density, labelBehavior} = useContext(InternalTabsContext) ?? {};
 
+  let contentId = useId();
+  let ariaLabelledBy = props['aria-labelledby'] || '';
   return (
-    <RACTabs
+    <RACTab
       {...props}
-      ref={domRef}
+      // @ts-ignore
+      originalProps={props}
+      aria-labelledby={`${labelBehavior === 'hide' ? contentId : ''} ${ariaLabelledBy}`}
       style={props.UNSAFE_style}
-      className={renderProps => (props.UNSAFE_className || '') + tabs({...renderProps}, props.styles)}>
-      <Provider
-        values={[
-          [TabsContext, {density, isDisabled, disabledKeys, orientation}]
-        ]}>
+      className={renderProps => (props.UNSAFE_className || '') + tab({...renderProps, density, labelBehavior}, props.styles)}>
+      {({
+          // @ts-ignore
+          isMenu
+        }) => {
+        if (isMenu) {
+          return props.children;
+        } else {
+          return (
+            <Provider
+              values={[
+                [TextContext, {
+                  id: contentId,
+                  styles:
+                    style({
+                      order: 1,
+                      display: {
+                        labelBehavior: {
+                          hide: 'none'
+                        }
+                      }
+                    })({labelBehavior})
+                }],
+                [IconContext, {
+                  render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
+                  styles: icon
+                }]
+              ]}>
+              {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}
+            </Provider>
+          );
+        }
+      }}
+    </RACTab>
+  );
+}
+
+const tabPanel = style({
+  ...focusRing(),
+  marginTop: 4,
+  color: 'gray-800',
+  flexGrow: 1,
+  flexBasis: '[0%]',
+  minHeight: 0,
+  minWidth: 0
+}, getAllowedOverrides({height: true}));
+
+export function TabPanel(props: TabPanelProps) {
+  let {showTabs} = useContext(CollapseContext);
+  let {selectedKey} = useContext(InternalTabsContext);
+  if (showTabs) {
+    return (
+      <AriaTabPanel
+        {...props}
+        style={props.UNSAFE_style}
+        className={renderProps => (props.UNSAFE_className ?? '') + tabPanel(renderProps, props.styles)} />
+    );
+  }
+
+  if (props.id !== selectedKey) {
+    return null;
+  }
+
+  return <CollapsedTabPanel {...props} />;
+}
+
+function CollapsedTabPanel(props: TabPanelProps) {
+  let {UNSAFE_style, UNSAFE_className = '', ...otherProps} = props;
+  let {menuId, valueId} = useContext(CollapseContext);
+  let ref = useRef(null);
+  let tabIndex = useHasTabbableChild(ref) ? undefined : 0;
+
+  return (
+    <Group
+      {...otherProps}
+      ref={ref}
+      aria-labelledby={menuId + ' ' + valueId}
+      tabIndex={tabIndex}
+      style={UNSAFE_style}
+      className={renderProps => UNSAFE_className + tabPanel(renderProps, props.styles)} />
+  );
+}
+
+function isAllTabsDisabled<T>(collection: Collection<Node<T>> | undefined, disabledKeys: Set<Key>) {
+  let testKey: Key | null = null;
+  if (collection && collection.size > 0) {
+    testKey = collection.getFirstKey();
+
+    let index = 0;
+    while (testKey && index < collection.size) {
+      // We have to check if the item in the collection has a key in disabledKeys or has the isDisabled prop set directly on it
+      if (!disabledKeys.has(testKey) && !collection.getItem(testKey)?.props?.isDisabled) {
+        return false;
+      }
+
+      testKey = collection.getKeyAfter(testKey);
+      index++;
+    }
+    return true;
+  }
+  return false;
+}
+
+let HiddenTabs = function (props: {
+  listRef: RefObject<HTMLDivElement | null>,
+  items: Array<Node<any>>,
+  size?: string,
+  density?: 'compact' | 'regular'
+}) {
+  let {listRef, items, size, density} = props;
+
+  return (
+    <div
+      // @ts-ignore
+      inert={inertValue(true)}
+      ref={listRef}
+      className={style({
+        display: '[inherit]',
+        flexDirection: '[inherit]',
+        gap: '[inherit]',
+        flexWrap: '[inherit]',
+        position: 'absolute',
+        inset: 0,
+        visibility: 'hidden',
+        overflow: 'hidden',
+        opacity: 0
+      })}>
+      {items.map((item) => {
+        // pull off individual props as an allow list, don't want refs or other props getting through
+        return (
+          <div
+            data-hidden-tab
+            style={item.props.UNSAFE_style}
+            key={item.key}
+            className={item.props.className({size, density})}>
+            {item.props.children({size, density})}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+let TabsMenu = (props: {valueId: string, items: Array<Node<any>>, onSelectionChange: TabsProps['onSelectionChange']} & Omit<TabsProps, 'children'>) => {
+  let {id, items, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, valueId} = props;
+  let {density, onSelectionChange, selectedKey, isDisabled, disabledKeys, labelBehavior} = useContext(InternalTabsContext);
+  let state = useContext(TabListStateContext);
+  let allKeysDisabled = useMemo(() => {
+    return isAllTabsDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set());
+  }, [state?.collection, disabledKeys]);
+  let labelProps = useLabels({
+    id,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy
+  });
+
+  return (
+    <div
+      className={style({
+        display: 'flex',
+        flexShrink: 0,
+        alignItems: 'center',
+        height: {
+          density: {
+            compact: 32,
+            regular: 48
+          }
+        }})({density})}>
+      <Picker
+        id={id}
+        valueId={valueId}
+        {...labelProps}
+        aria-describedby={props['aria-describedby']}
+        aria-details={props['aria-details']}
+        isDisabled={isDisabled || allKeysDisabled}
+        density={density!}
+        labelBehavior={labelBehavior}
+        items={items}
+        disabledKeys={disabledKeys}
+        selectedKey={selectedKey}
+        onSelectionChange={onSelectionChange}>
+        {(item: Node<any>) => {
+          return (
+            <PickerItem
+              {...item.props.originalProps}
+              isDisabled={isDisabled || allKeysDisabled}
+              key={item.key}>
+              {item.props.children({density, isMenu: true})}
+            </PickerItem>
+          );
+        }}
+      </Picker>
+    </div>
+  );
+};
+
+let CollapsingTabs = ({collection, containerRef, ...props}: {collection: Collection<Node<unknown>>, containerRef: any} & TabsProps) => {
+  let {density = 'regular', orientation = 'horizontal', labelBehavior = 'show', onSelectionChange} = props;
+  let [showItems, _setShowItems] = useState(true);
+  showItems = orientation === 'vertical' ? true : showItems;
+  let setShowItems = useCallback((value: boolean) => {
+    if (orientation === 'vertical') {
+      // if orientation is vertical, we always show the items
+      _setShowItems(true);
+    } else {
+      _setShowItems(value);
+    }
+  }, [orientation]);
+
+  let {direction} = useLocale();
+
+  let children = useMemo(() => [...collection], [collection]);
+
+  let listRef = useRef<HTMLDivElement | null>(null);
+  let updateOverflow = useEffectEvent(() => {
+    if (orientation === 'vertical' || !listRef.current || !containerRef?.current) {
+      return;
+    }
+    let container = listRef.current;
+    let containerRect = container.getBoundingClientRect();
+    let tabs = container.querySelectorAll('[data-hidden-tab]');
+    let lastTab = tabs[tabs.length - 1];
+    let lastTabRect = lastTab.getBoundingClientRect();
+    if (direction === 'ltr') {
+      setShowItems?.(lastTabRect.right <= containerRect.right);
+    } else {
+      setShowItems?.(lastTabRect.left >= containerRect.left);
+    }
+  });
+
+  useResizeObserver({ref: containerRef, onResize: updateOverflow});
+
+  useLayoutEffect(() => {
+    if (collection.size > 0) {
+      queueMicrotask(updateOverflow);
+    }
+  }, [collection.size, updateOverflow]);
+
+  // start with null so that the first render won't have a flicker
+  let prevOrientation = useRef<Orientation | null>(null);
+  useLayoutEffect(() => {
+    if (collection.size > 0 && prevOrientation.current !== orientation) {
+      updateOverflow();
+    }
+    prevOrientation.current = orientation;
+  }, [collection.size, updateOverflow, orientation]);
+
+  useEffect(() => {
+    // Recalculate visible tags when fonts are loaded.
+    document.fonts?.ready.then(() => updateOverflow());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  let menuId = useId();
+  let valueId = useId();
+
+  let contents: ReactNode;
+  if (showItems) {
+    contents = (
+      <RACTabs
+        {...props}
+        style={{display: 'contents'}}>
         {props.children}
-      </Provider>
-    </RACTabs>
+      </RACTabs>
+    );
+  } else {
+    contents = (
+      <>
+        <TabsMenu
+          id={menuId}
+          valueId={valueId}
+          items={children}
+          onSelectionChange={onSelectionChange}
+          aria-label={props['aria-label']}
+          aria-describedby={props['aria-labelledby']} />
+        <CollapseContext.Provider value={{showTabs: false, menuId, valueId}}>
+          {props.children}
+        </CollapseContext.Provider>
+      </>
+    );
+  }
+
+  return (
+    <div style={props.UNSAFE_style} className={(props.UNSAFE_className || '') + tabs({orientation}, props.styles)} ref={containerRef}>
+      <div className={tablist({orientation, labelBehavior, density})}>
+        <HiddenTabs items={children} density={density} listRef={listRef} />
+      </div>
+      <CollapseContext.Provider value={{showTabs: true, menuId, valueId}}>
+        {contents}
+      </CollapseContext.Provider>
+    </div>
   );
-});
+};