Revert "fix: tab: added a prop to enable standard key navigation for tabs com…" (#1026)

This reverts commit 7934881.

Co-authored-by: ypatadia-eightfold <ypatadia@eightfold.ai>

Author: mbhagat-c-eightfold

src/components/Dialog/BaseDialog/BaseDialog.tsx

@@ -155,8 +155,8 @@ export const BaseDialog: FC<BaseDialogProps> = React.forwardRef(
                   <span
                     id={labelId}
                     {...(header && {
-                      role: 'heading',
-                      'aria-level': headingLevel,
+                      role: "heading",
+                      "aria-level": headingLevel
                     })}
                   >
                     {headerButtonProps && (

src/components/Dialog/Dialog.tsx

@@ -42,7 +42,7 @@ export const Dialog: FC<DialogProps> = React.forwardRef(
       headerButtonProps,
       headerClassNames,
       headerIcon,
-      headingLevel = 1,
+      headingLevel=1,
       height,
       locale = enUS,
       okButtonProps,

src/components/Tabs/Tab/Tab.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { FC, Ref, useEffect, useRef } from 'react';
+import React, { FC, Ref } from 'react';
 import { mergeClasses } from '../../../shared/utilities';
 import { TabIconAlign, TabProps, TabSize, TabVariant } from '../Tabs.types';
 import { useTabs } from '../Tabs.context';
@@ -12,7 +12,6 @@ import { Badge } from '../../Badge';
 import { Loader } from '../../Loader';
 import { useCanvasDirection } from '../../../hooks/useCanvasDirection';
 
-import { useMergedRefs } from '../../../hooks/useMergedRefs';
 import styles from '../tabs.module.scss';
 
 export const Tab: FC<TabProps> = React.forwardRef(
@@ -26,15 +25,11 @@ export const Tab: FC<TabProps> = React.forwardRef(
       label,
       loading,
       value,
-      ariaControls,
-      index = 0,
       ...rest
     },
     ref: Ref<HTMLButtonElement>
   ) => {
     const htmlDir: string = useCanvasDirection();
-    const tabRef = useRef(null);
-    const combinedRef = useMergedRefs(ref, tabRef);
 
     const {
       alignIcon,
@@ -43,10 +38,6 @@ export const Tab: FC<TabProps> = React.forwardRef(
       currentActiveTab,
       size,
       variant,
-      enableArrowNav,
-      handleKeyDown,
-      registerTab,
-      focusedTabIndex,
       theme,
     } = useTabs();
 
@@ -72,12 +63,6 @@ export const Tab: FC<TabProps> = React.forwardRef(
       [TabSize.XSmall, IconSize.Small],
     ]);
 
-    useEffect(() => {
-      if (registerTab) {
-        registerTab(tabRef.current, index);
-      }
-    }, [registerTab, index]);
-
     const getIcon = (): JSX.Element =>
       // TODO: Once sizes are implemented for other variants, use the mapping.
       // For now, a ternary determines if mapping vs using the default icon size (medium).
@@ -121,41 +106,16 @@ export const Tab: FC<TabProps> = React.forwardRef(
     const getLoader = (): JSX.Element =>
       loading && <Loader classNames={styles.loader} />;
 
-    const handleTabKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
-      if (enableArrowNav && index !== undefined) {
-        handleKeyDown?.(e, index);
-      }
-    };
-
-    const match = currentActiveTab?.match(/\d+/);
-    const currentActiveTabIndex = match ? Number(match[0]) - 1 : -1;
-
-    const getTabIndex = () => {
-      if (
-        currentActiveTabIndex !== undefined &&
-        currentActiveTabIndex !== null &&
-        index === currentActiveTabIndex
-      ) {
-        return 0;
-      }
-      return -1;
-    };
-
     return (
       <button
         {...rest}
-        aria-controls={ariaControls}
-        ref={combinedRef}
+        ref={ref}
         className={tabClassNames}
         aria-label={ariaLabel}
         aria-selected={isActive}
         role="tab"
         disabled={disabled}
         onClick={(e) => onTabClick(value, e)}
-        onKeyDown={handleTabKeyDown}
-        tabIndex={getTabIndex()}
-        data-index={index}
-        data-value={value}
       >
         {alignIcon === TabIconAlign.Start && getIcon()}
         {getLabel()}

src/components/Tabs/Tabs.context.tsx

@@ -1,10 +1,4 @@
-import React, {
-  createContext,
-  useCallback,
-  useEffect,
-  useState,
-  useRef,
-} from 'react';
+import React, { createContext, useEffect, useState } from 'react';
 import {
   TabsContextProps,
   ITabsContext,
@@ -35,188 +29,17 @@ const TabsProvider = ({
   themeContainerId,
   statgrouptheme,
   value,
-  disabledTabIndexes = [],
-  enableArrowNav = true,
   variant = TabVariant.default,
 }: TabsContextProps) => {
-  const [currentActiveTab, setCurrentActiveTab] = useState(value);
-  const [focusedTabIndex, setFocusedTabIndex] = useState<number | null>(null);
-  const tabsRef = useRef<HTMLElement[]>([]);
-  const tabListRef = useRef<HTMLElement | null>(null);
-  const tabsValuesRef = useRef<TabValue[]>([]);
+  const [currentActiveTab, setCurrentActiveTab] = useState<TabValue>(value);
 
   useEffect(() => {
     setCurrentActiveTab(value);
   }, [value]);
 
-  const registerTab = useCallback(
-    (tabElement: HTMLElement | null, index: number) => {
-      if (tabElement) {
-        tabsRef.current[index] = tabElement;
-        const tabValue = tabElement.getAttribute('data-value');
-        if (tabValue) {
-          tabsValuesRef.current[index] = tabValue;
-        }
-      }
-    },
-    []
-  );
-
-  const registerTablist = useCallback((tabListElement: HTMLElement | null) => {
-    tabListRef.current = tabListElement;
-  }, []);
-
-  const onTabClick = useCallback(
-    (value: TabValue, e: SelectTabEvent) => {
-      if (!readOnly) {
-        setCurrentActiveTab(value);
-        onChange(value, e);
-      }
-    },
-    [onChange, readOnly]
-  );
-
-  const moveFocusToNextTab = useCallback(() => {
-    const tabValues = tabsValuesRef.current.filter(Boolean);
-    if (tabValues.length === 0) return;
-
-    let currentIndex =
-      focusedTabIndex !== null
-        ? focusedTabIndex
-        : tabValues.indexOf(currentActiveTab);
-    if (currentIndex === -1) currentIndex = 0;
-
-    let nextIndex = currentIndex;
-    do {
-      nextIndex = (nextIndex + 1) % tabValues.length;
-      if (nextIndex === currentIndex) break;
-    } while (disabledTabIndexes.includes(nextIndex));
-
-    const nextTab = tabsRef.current[nextIndex];
-    if (nextTab && !disabledTabIndexes.includes(nextIndex)) {
-      nextTab.focus();
-      setFocusedTabIndex(nextIndex);
-    }
-  }, [focusedTabIndex, currentActiveTab, disabledTabIndexes]);
-
-  const moveFocusToPreviousTab = useCallback(() => {
-    const tabValues = tabsValuesRef.current.filter(Boolean);
-    if (tabValues.length == 0) return;
-
-    let currentIndex =
-      focusedTabIndex !== null
-        ? focusedTabIndex
-        : tabValues.indexOf(currentActiveTab);
-    if (currentIndex === -1) currentIndex = 0;
-
-    let prevIndex = currentIndex;
-    do {
-      prevIndex = (prevIndex - 1 + tabValues.length) % tabValues.length;
-      if (prevIndex === currentIndex) break;
-    } while (disabledTabIndexes.includes(prevIndex));
-
-    const prevTab = tabsRef.current[prevIndex];
-    if (prevTab && !disabledTabIndexes.includes(prevIndex)) {
-      prevTab.focus();
-      setFocusedTabIndex(prevIndex);
-    }
-  }, [focusedTabIndex, currentActiveTab, disabledTabIndexes]);
-
-  useEffect(() => {
-    const handleKeyDown = (event: globalThis.KeyboardEvent) => {
-      if (enableArrowNav) return;
-      if (event.key == 'Tab') {
-        const activeElement = document.activeElement;
-        const tabList = tabListRef.current;
-
-        if (
-          tabList &&
-          tabList.contains(activeElement) &&
-          activeElement?.getAttribute('role') === 'tab'
-        ) {
-          event.preventDefault();
-          if (event.shiftKey) {
-            moveFocusToPreviousTab();
-          } else {
-            moveFocusToNextTab();
-          }
-        }
-      }
-    };
-    document.addEventListener('keydown', handleKeyDown);
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [moveFocusToNextTab, moveFocusToPreviousTab]);
-
-  const handleKeyDown = useCallback(
-    (event: React.KeyboardEvent, tabIndex: number) => {
-      if (!enableArrowNav || readOnly) return;
-
-      if (event.key === 'Tab') {
-        return;
-      }
-
-      const enableTabIndexes = tabsRef.current
-        .map((_, index) => index)
-        .filter((index) => !disabledTabIndexes.includes(index));
-
-      const currentEnabledIndex = enableTabIndexes.indexOf(tabIndex);
-
-      if (currentEnabledIndex === -1) return;
-
-      let nextFocusIndex: number | null = null;
-
-      switch (event.key) {
-        case 'ArrowLeft':
-          nextFocusIndex =
-            currentEnabledIndex === 0
-              ? enableTabIndexes[enableTabIndexes.length - 1]
-              : enableTabIndexes[currentEnabledIndex - 1];
-          event.preventDefault();
-          break;
-        case 'ArrowRight':
-          nextFocusIndex =
-            currentEnabledIndex === enableTabIndexes.length - 1
-              ? enableTabIndexes[0]
-              : enableTabIndexes[currentEnabledIndex + 1];
-          event.preventDefault();
-          break;
-        case 'Home':
-          nextFocusIndex = enableTabIndexes[0];
-          event.preventDefault();
-          break;
-        case 'End':
-          nextFocusIndex = enableTabIndexes[enableTabIndexes.length - 1];
-          event.preventDefault();
-          break;
-        case 'Enter':
-          const currentTab = tabsRef.current[tabIndex];
-          if (currentTab) {
-            const tabValue = currentTab.getAttribute('data-value');
-            if (tabValue) {
-              setCurrentActiveTab(tabValue);
-              onChange?.(tabValue, {
-                currentTarget: currentTab,
-              } as SelectTabEvent);
-            }
-          }
-          event.preventDefault();
-          return;
-        default:
-          return;
-      }
-
-      if (nextFocusIndex !== null) {
-        const nextTab = tabsRef.current[nextFocusIndex];
-        if (nextTab) {
-          nextTab.focus();
-          setFocusedTabIndex(nextFocusIndex);
-        }
-      }
-    },
-    [enableArrowNav, disabledTabIndexes, readOnly, onChange]
-  );
+  const onTabClick = (value: TabValue, e: SelectTabEvent) => {
+    onChange(value, e);
+  };
 
   return (
     <TabsContext.Provider
@@ -236,12 +59,6 @@ const TabsProvider = ({
         theme,
         themeContainerId,
         variant,
-        registerTab,
-        registerTablist,
-        handleKeyDown,
-        enableArrowNav,
-        disabledTabIndexes,
-        focusedTabIndex,
       }}
     >
       {children}

src/components/Tabs/Tabs.stories.tsx

@@ -73,15 +73,13 @@ const tabs = [1, 2, 3, 4].map((i) => ({
   value: `tab${i}`,
   label: `Tab ${i}`,
   ariaLabel: `Tab ${i}`,
-  id: `tab-${i}`,
   ...(i === 4 ? { disabled: true } : {}),
 }));
 
 const badgeTabs = [1, 2, 3, 4].map((i) => ({
   value: `tab${i}`,
   label: `Tab ${i}`,
   ariaLabel: `Tab ${i}`,
-  id: `tab-${i}`,
   badgeContent: i,
   ...(i === 4 ? { disabled: true } : {}),
 }));
@@ -90,7 +88,6 @@ const iconTabs = [1, 2, 3, 4].map((i) => ({
   value: `tab${i}`,
   icon: IconName.mdiCardsHeart,
   ariaLabel: `Tab ${i}`,
-  id: `tab-${i}`,
   ...(i === 4 ? { disabled: true } : {}),
 }));
 
@@ -99,22 +96,16 @@ const iconLabelTabs = [1, 2, 3, 4].map((i) => ({
   icon: IconName.mdiCardsHeart,
   label: `Tab ${i}`,
   ariaLabel: `Tab ${i}`,
-  id: `tab-${i}`,
   ...(i === 4 ? { disabled: true } : {}),
 }));
 
 const scrollableTabs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => ({
   value: `tab${i}`,
   label: `Tab ${i}`,
   ariaLabel: `Tab ${i}`,
-  id: `tab-${i}`,
   ...(i === 4 ? { disabled: true } : {}),
 }));
 
-const disabledTabIndexes = tabs
-  .map((tab, index) => (tab.disabled ? index : -1))
-  .filter((index) => index !== -1);
-
 const Tabs_Story: ComponentStory<typeof Tabs> = (args) => {
   const [activeTabs, setActiveTabs] = useState({ defaultTab: 'tab1' });
   return (
@@ -132,7 +123,6 @@ const Tabs_Story: ComponentStory<typeof Tabs> = (args) => {
         {...args}
         onChange={(tab) => setActiveTabs({ ...activeTabs, defaultTab: tab })}
         value={activeTabs.defaultTab}
-        disabledTabIndexes={disabledTabIndexes}
       />
     </div>
   );
@@ -180,7 +170,6 @@ const tabsArgs: Object = {
   variant: TabVariant.default,
   size: TabSize.Medium,
   underlined: false,
-  enableArrowNav: false,
   children: tabs.map((tab) => <Tab key={tab.value} {...tab} />),
   style: {},
 };