Experimental Tabs

Author: joshwooding

packages/lab/src/tabs-next/TabListNext.css

@@ -1,5 +1,11 @@
 /* Component class applied to the root element */
 .saltTabListNext {
+  max-width: 100%;
+  width: 100%;
+  min-width: 0;
+}
+
+.saltTabListNext [role="tablist"] {
   display: flex;
   flex-wrap: nowrap;
   justify-content: flex-start;

packages/lab/src/tabs-next/TabListNext.tsx

@@ -81,13 +81,13 @@ export const TabListNext = forwardRef<HTMLDivElement, TabListNextProps>(
     const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
       onKeyDown?.(event);
 
+      if (menuOpen) return;
+
       const actionMap = {
         ArrowRight: getNext,
         ArrowLeft: getPrevious,
         Home: getFirst,
         End: getLast,
-        ArrowUp: menuOpen ? getPrevious : undefined,
-        ArrowDown: menuOpen ? getNext : undefined,
       };
 
       const action = actionMap[event.key as keyof typeof actionMap];
@@ -111,7 +111,6 @@ export const TabListNext = forwardRef<HTMLDivElement, TabListNextProps>(
 
     return (
       <div
-        role="tablist"
         className={clsx(
           withBaseName(),
           withBaseName(appearance),
@@ -120,7 +119,6 @@ export const TabListNext = forwardRef<HTMLDivElement, TabListNextProps>(
           className,
         )}
         data-ismeasuring={isMeasuring ? true : undefined}
-        ref={handleRef}
         onKeyDown={handleKeyDown}
         aria-describedby={clsx(ariaDescribedBy, warningId)}
         {...rest}
@@ -131,16 +129,17 @@ export const TabListNext = forwardRef<HTMLDivElement, TabListNextProps>(
             inaccurate or change when a tab is selected
           </span>
         )}
-        {visible}
-        <TabOverflowList
-          isMeasuring={isMeasuring}
-          buttonRef={overflowButtonRef}
-          tabstripRef={tabstripRef}
-          open={menuOpen}
-          setOpen={setMenuOpen}
-        >
-          {hidden}
-        </TabOverflowList>
+        <div role="tablist" ref={handleRef}>
+          {visible}
+          <TabOverflowList
+            isMeasuring={isMeasuring}
+            buttonRef={overflowButtonRef}
+            open={menuOpen}
+            setOpen={setMenuOpen}
+          >
+            {hidden}
+          </TabOverflowList>
+        </div>
       </div>
     );
   },

packages/lab/src/tabs-next/TabNextTrigger.tsx

@@ -1,3 +1,4 @@
+import { useListItem } from "@floating-ui/react";
 import {
   makePrefixer,
   useForkRef,
@@ -15,6 +16,7 @@ import {
 } from "react";
 import { useTabNext } from "./TabNextContext";
 import tabTriggerCss from "./TabNextTrigger.css";
+import { useTabOverflow } from "./TabOverflowContext";
 import { useTabsNext } from "./TabsNextContext";
 
 export interface TabNextTriggerProps
@@ -52,6 +54,8 @@ export const TabNextTrigger = forwardRef<
 
   const { setSelected, registerTab, getPanelId } = useTabsNext();
   const { selected, value, focused, disabled, tabId, actions } = useTabNext();
+  const overflowContext = useTabOverflow();
+  const item = useListItem();
 
   const tabRef = useRef<HTMLButtonElement>(null);
 
@@ -77,7 +81,8 @@ export const TabNextTrigger = forwardRef<
     }
   };
 
-  const handleRef = useForkRef<HTMLButtonElement>(tabRef, ref);
+  const handleTabRef = useForkRef<HTMLButtonElement>(item.ref, tabRef);
+  const handleRef = useForkRef<HTMLButtonElement>(handleTabRef, ref);
   const panelId = getPanelId(value);
 
   // Applying aria-actions this way avoid React warnings about unknown props
@@ -87,14 +92,17 @@ export const TabNextTrigger = forwardRef<
       }
     : {};
 
+  const active = overflowContext && item.index === overflowContext?.activeIndex;
+  console.log("TabNextTrigger", { overflowContext, item });
+
   return (
     <button
       aria-selected={selected}
       aria-disabled={disabled}
       aria-controls={panelId}
       {...ariaActionsProps}
       aria-description={getAriaDescription(actions.length)}
-      tabIndex={focused || selected ? undefined : -1}
+      tabIndex={focused || selected || active ? undefined : -1}
       role="tab"
       type="button"
       onClick={!disabled ? handleClick : undefined}

packages/lab/src/tabs-next/TabOverflowContext.ts

@@ -0,0 +1,16 @@
+import { createContext } from "@salt-ds/core";
+import { useContext } from "react";
+
+export interface TabOverflowContextValue {
+  activeIndex: number | null;
+  getItemProps: (props: any) => Record<string, unknown>;
+}
+
+export const TabOverflowContext = createContext<TabOverflowContextValue | null>(
+  "TabOverflowContext",
+  null,
+);
+
+export function useTabOverflow() {
+  return useContext(TabOverflowContext);
+}