LG-4251: remove portal and use descendants pattern in tabs

packages/tabs/package.json

@@ -24,11 +24,11 @@
   "dependencies": {
     "@leafygreen-ui/a11y": "^1.4.13",
     "@leafygreen-ui/box": "^3.1.9",
+    "@leafygreen-ui/descendants": "^0.1.1",
     "@leafygreen-ui/emotion": "^4.0.8",
     "@leafygreen-ui/hooks": "^8.1.3",
     "@leafygreen-ui/lib": "^13.3.0",
     "@leafygreen-ui/palette": "^4.0.9",
-    "@leafygreen-ui/portal": "^5.1.1",
     "@leafygreen-ui/tokens": "^2.7.0",
     "@leafygreen-ui/typography": "^19.1.1",
     "@lg-tools/test-harnesses": "0.1.2"
@@ -45,10 +45,10 @@
     "url": "https://jira.mongodb.org/projects/PD/summary"
   },
   "devDependencies": {
-    "@leafygreen-ui/card": "^10.0.7",
     "@leafygreen-ui/button": "^21.2.0",
+    "@leafygreen-ui/card": "^10.0.7",
+    "@leafygreen-ui/icon": "^12.0.1",
     "@leafygreen-ui/icon-button": "^15.0.21",
-    "@leafygreen-ui/icon": "^12.2.0",
     "@lg-tools/storybook-utils": "^0.1.1"
   }
 }

packages/tabs/src/Tab/Tab.tsx

@@ -40,7 +40,6 @@ Tab.propTypes = {
   name: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   content: PropTypes.node,
   disabled: PropTypes.bool,
-  ariaControl: PropTypes.string,
 };
 
 export default Tab;

packages/tabs/src/Tab/Tab.types.ts

@@ -1,20 +1,5 @@
 import { HTMLElementProps } from '@leafygreen-ui/lib';
 
-import { TabsProps } from '../Tabs/Tabs.types';
-
-export type InternalTabProps = Pick<
-  TabsProps,
-  'as' | 'darkMode' | 'className'
-> & {
-  child: React.ReactElement;
-  onKeyDown: (e: KeyboardEvent) => void;
-  onClick?: (e: React.MouseEvent) => void;
-  isAnyTabFocused?: boolean;
-  selected: boolean;
-  tabRef: HTMLDivElement | null;
-  panelRef: HTMLDivElement | null;
-};
-
 export interface TabProps extends HTMLElementProps<'div'> {
   /**
    * Content that will appear as the title in the Tab list.
@@ -57,12 +42,6 @@ export interface TabProps extends HTMLElementProps<'div'> {
    */
   selected?: boolean;
 
-  /**
-   * TODO: remove, or do something with this
-   * @internal
-   */
-  ariaControl?: string;
-
   // Done in order to support any Router system, such that TabTitle component can accept any URL destination prop.
   [key: string]: any;
 }

packages/tabs/src/Tab/index.ts

@@ -1,3 +1,2 @@
-export { default as InternalTab } from './InternalTab';
 export { default } from './Tab';
 export type { TabProps } from './Tab.types';

packages/tabs/src/TabPanel/TabPanel.tsx

@@ -0,0 +1,33 @@
+import React, { useMemo } from 'react';
+
+import { useDescendant } from '@leafygreen-ui/descendants';
+
+import {
+  TabPanelDescendantsContext,
+  useTabDescendantsContext,
+} from '../context';
+
+import { TabPanelProps } from './TabPanel.types';
+
+const TabPanel = ({ child, selectedIndex }: TabPanelProps) => {
+  const { id, index, ref } = useDescendant(TabPanelDescendantsContext);
+  const { tabDescendants } = useTabDescendantsContext();
+
+  const relatedTab = useMemo(() => {
+    return tabDescendants.find(tabDescendant => tabDescendant.index === index);
+  }, [tabDescendants, index]);
+
+  return (
+    <div ref={ref}>
+      {React.cloneElement(child, {
+        id,
+        selected: !child.props.disabled && index === selectedIndex,
+        ['aria-labelledby']: relatedTab?.id,
+      })}
+    </div>
+  );
+};
+
+TabPanel.displayName = 'TabPanel';
+
+export default TabPanel;

packages/tabs/src/TabPanel/TabPanel.types.ts

@@ -0,0 +1,4 @@
+export interface TabPanelProps {
+  child: React.ReactElement;
+  selectedIndex: number;
+}

packages/tabs/src/TabPanel/index.ts

@@ -0,0 +1 @@
+export { default } from './TabPanel';

packages/tabs/src/TabTitle/TabTitle.tsx

@@ -1,11 +1,17 @@
-import React, { RefObject, useEffect, useRef } from 'react';
+import React, { RefObject, useCallback, useMemo, useRef } from 'react';
 
 import Box, { ExtendableBox } from '@leafygreen-ui/box';
+import { useDescendant } from '@leafygreen-ui/descendants';
 import { cx } from '@leafygreen-ui/emotion';
 import { getNodeTextContent, Theme } from '@leafygreen-ui/lib';
 import { BaseFontSize } from '@leafygreen-ui/tokens';
 import { useUpdatedBaseFontSize } from '@leafygreen-ui/typography';
 
+import {
+  TabDescendantsContext,
+  useTabPanelDescendantsContext,
+} from '../context';
+
 import {
   listTitleChildrenStyles,
   listTitleFontSize,
@@ -15,36 +21,34 @@ import {
 import { BaseTabTitleProps } from './TabTitle.types';
 
 const TabTitle: ExtendableBox<BaseTabTitleProps, 'button'> = ({
-  selected = false,
-  disabled = false,
   children,
   className,
   darkMode,
-  parentRef,
+  disabled = false,
+  onClick,
+  selectedIndex,
   ...rest
 }: BaseTabTitleProps) => {
-  const titleRef = useRef<HTMLAnchorElement | HTMLButtonElement>(null);
   const baseFontSize: BaseFontSize = useUpdatedBaseFontSize();
+  const titleRef = useRef<HTMLAnchorElement | HTMLButtonElement>(null);
+  const { index, ref, id } = useDescendant(TabDescendantsContext);
+  const { tabPanelDescendants } = useTabPanelDescendantsContext();
 
   const theme = darkMode ? Theme.Dark : Theme.Light;
+  const selected = index === selectedIndex;
 
-  // Checks to see if the current activeElement is a part of the same tab set
-  // as the current TabTitle. If so, and the current TabTitle is not disabled
-  // and is selected, we manually move focus to that TabTitle.
-  useEffect(() => {
-    const tabsList = Array.from(parentRef?.children ?? []);
-    const activeEl = document.activeElement;
+  const relatedTabPanel = useMemo(() => {
+    return tabPanelDescendants.find(
+      tabPanelDescendant => tabPanelDescendant.index === index,
+    );
+  }, [tabPanelDescendants, index]);
 
-    if (
-      activeEl &&
-      tabsList.indexOf(activeEl) !== -1 &&
-      !disabled &&
-      selected &&
-      titleRef.current
-    ) {
-      titleRef.current.focus();
-    }
-  }, [parentRef, disabled, selected, titleRef]);
+  const handleClick = useCallback(
+    (event: React.MouseEvent) => {
+      onClick(event, index);
+    },
+    [index, onClick],
+  );
 
   const nodeText = getNodeTextContent(rest.name);
 
@@ -55,19 +59,22 @@ const TabTitle: ExtendableBox<BaseTabTitleProps, 'button'> = ({
       listTitleStyles,
       listTitleModeStyles[theme].base,
       {
-        [listTitleModeStyles[theme].selected]: selected,
+        [listTitleModeStyles[theme].selected]: !disabled && selected,
         [listTitleModeStyles[theme].hover]: !disabled && !selected,
         [listTitleModeStyles[theme].disabled]: disabled,
       },
       listTitleModeStyles[theme].focus,
       className,
     ),
+    disabled,
+    id,
+    name: nodeText,
+    onClick: handleClick,
     role: 'tab',
     tabIndex: selected ? 0 : -1,
-    ['aria-selected']: selected,
-    name: nodeText,
+    ['aria-controls']: relatedTabPanel?.id,
+    ['aria-selected']: !disabled && selected,
     ['data-text']: nodeText,
-    disabled,
   } as const;
 
   if (typeof rest.href === 'string') {
@@ -77,7 +84,9 @@ const TabTitle: ExtendableBox<BaseTabTitleProps, 'button'> = ({
         ref={titleRef as RefObject<HTMLAnchorElement>}
         {...sharedTabProps}
       >
-        <div className={listTitleChildrenStyles}>{children}</div>
+        <div className={listTitleChildrenStyles} ref={ref}>
+          {children}
+        </div>
       </Box>
     );
   }
@@ -88,7 +97,9 @@ const TabTitle: ExtendableBox<BaseTabTitleProps, 'button'> = ({
       ref={titleRef as RefObject<HTMLButtonElement>}
       {...sharedTabProps}
     >
-      <div className={listTitleChildrenStyles}>{children}</div>
+      <div className={listTitleChildrenStyles} ref={ref}>
+        {children}
+      </div>
     </Box>
   );
 };

packages/tabs/src/TabTitle/TabTitle.types.ts

@@ -1,11 +1,10 @@
 export interface BaseTabTitleProps {
   darkMode?: boolean;
-  selected?: boolean;
   href?: string;
   children?: React.ReactNode;
   className?: string;
   disabled?: boolean;
   isAnyTabFocused?: boolean;
-  parentRef?: HTMLDivElement;
+  selectedIndex: number;
   [key: string]: any;
 }

packages/tabs/src/Tabs.spec.tsx

@@ -77,16 +77,6 @@ describe('packages/tabs', () => {
   });
 
   describe('when controlled', () => {
-    test('clicking a tab fires setSelected callback', () => {
-      const { getTabUtilsByName } = renderTabs({ setSelected, selected: 1 });
-      const tabUtils = getTabUtilsByName('Second');
-
-      if (tabUtils) {
-        fireEvent.click(tabUtils.getTab());
-      }
-      expect(setSelected).toHaveBeenCalled();
-    });
-
     test(`renders "${tabsClassName}" to the tabs classList`, () => {
       renderTabs({
         setSelected,
@@ -134,8 +124,16 @@ describe('packages/tabs', () => {
       const selectedPanel = getSelectedPanel();
       expect(selectedPanel).toHaveTextContent('Content 2');
     });
+    test('clicking a tab fires setSelected callback', () => {
+      const { getTabUtilsByName } = renderTabs({ setSelected, selected: 1 });
+      const tabUtils = getTabUtilsByName('Second');
 
-    test('clicking a tab does not change the selected tab panel', () => {
+      if (tabUtils) {
+        fireEvent.click(tabUtils.getTab());
+      }
+      expect(setSelected).toHaveBeenCalled();
+    });
+    test('clicking a tab does not update selected index and calls setSelected callback', () => {
       const { getTabUtilsByName, getSelectedPanel } = renderTabs({
         setSelected,
         selected: 1,
@@ -148,9 +146,10 @@ describe('packages/tabs', () => {
 
       const selectedPanel = getSelectedPanel();
       expect(selectedPanel).toHaveTextContent('Content 2');
+      expect(setSelected).toHaveBeenCalled();
     });
 
-    test('keyboard nav is not supported', () => {
+    test('keying down arrow keys does not update selected index and calls setSelected callback', () => {
       const { getTabUtilsByName, getSelectedPanel } = renderTabs({
         setSelected,
         selected: 1,
@@ -165,6 +164,7 @@ describe('packages/tabs', () => {
       }
 
       expect(activeTab).toBeVisible();
+      expect(setSelected).toHaveBeenCalled();
     });
   });
 
@@ -196,19 +196,21 @@ describe('packages/tabs', () => {
     test('keyboard navigation is supported', () => {
       const { getTabUtilsByName } = renderTabs({}, { default: true });
       const firstTabUtils = getTabUtilsByName('First');
+      const firstTab = firstTabUtils?.getTab();
       const secondTabUtils = getTabUtilsByName('Second');
+      const secondTab = secondTabUtils?.getTab();
 
       // Focus on first tab
       userEvent.tab();
-      expect(firstTabUtils?.getTab()).toHaveFocus();
+      expect(firstTab).toHaveFocus();
 
       // Keyboard navigate between tabs
-      if (firstTabUtils) {
-        fireEvent.keyDown(firstTabUtils.getTab(), {
+      if (firstTab) {
+        fireEvent.keyDown(firstTab, {
           key: keyMap.ArrowRight,
         });
       }
-      expect(secondTabUtils?.getTab()).toHaveFocus();
+      expect(secondTab).toHaveFocus();
     });
 
     test('keyboard navigation skips disabled tabs', () => {