@khanacademy/wonder-blocks-tabs 0.2.7 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,53 @@
 # @khanacademy/wonder-blocks-tabs
 
+## 0.3.1
+
+### Patch Changes
+
+- Updated dependencies [a1be4c5]
+- Updated dependencies [d00a6f1]
+- Updated dependencies [abf5496]
+- Updated dependencies [812c167]
+    - @khanacademy/wonder-blocks-tokens@10.1.0
+    - @khanacademy/wonder-blocks-typography@3.2.2
+
+## 0.3.0
+
+### Minor Changes
+
+- 28fa0c0: Tabs: Add keyboard navigation support and `activationMode` prop.
+- 282fcee: Tabs:
+
+    - Add styling
+    - Add support for `styles` prop
+    - Add `animated` prop for enabling transition animations for the selected tab
+
+    NavigationTabs:
+
+    - Refactored current tab indicator logic to work with Tabs
+
+- 26afba7: Tabs: Add `mountAllPanels` prop. Defaults to `false` so tab panels are only rendered if they are visited
+- 6327e23: Adds Tabs component
+- e44197b: Tabs
+
+    - Added `id` and `testId` props
+    - Cache previously visited tab panels. This is so tabs are only mounted when
+      they are selected the first time. Re-visiting a tab doesn't re-mount the panel
+    - Support ARIA props in items in the `tabs` prop
+    - Support a render function for a tab's label in the `tabs` prop
+
+### Patch Changes
+
+- 5acef63: Tabs: Update border token usage
+- 3be8b60: Tabs: Allow keydown events to pass when `Enter` or `Space` is pressed. This is so that a tab could trigger a Popover to open
+- db0c716: Tabs: Fix keyboard navigation for right-to-left
+- 5acef63: Tabs and NavigationTabs: Use inline styles for tab indicator
+- 5acef63: NavigationTabs: Make sure the current tab styles don't change when interacted with
+- Updated dependencies [28fa0c0]
+- Updated dependencies [28fa0c0]
+    - @khanacademy/wonder-blocks-core@12.3.0
+    - @khanacademy/wonder-blocks-typography@3.2.1
+
 ## 0.2.7
 
 ### Patch Changes

package/dist/components/navigation-tab-item.d.ts

@@ -35,7 +35,7 @@ export declare const NavigationTabItem: React.ForwardRefExoticComponent<Readonly
      * cases where the `Link` component is wrapped by another component (like a
      * `Tooltip` or `Popover`), a render function can be used instead. The
      * render function provides the Link props that should be applied to the
-     * Link component. See example in the docs for more details.
+     * Link component.
      */
     children: React.ReactElement | ((linkProps: NavigationTabItemLinkProps) => React.ReactElement);
     /**

package/dist/components/tab-panel.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { StyleType } from "@khanacademy/wonder-blocks-core";
+type Props = {
+    /**
+     * The contents of the tab panel.
+     */
+    children: React.ReactNode;
+    /**
+     * A unique id for the tab panel.
+     */
+    id: string;
+    /**
+     * Optional test ID for e2e testing.
+     */
+    testId?: string;
+    /**
+     * The id of the associated element with role="tab".
+     */
+    "aria-labelledby": string;
+    /**
+     * Whether the tab panel is active.
+     */
+    active?: boolean;
+    /**
+     * Custom styles for the `TabPanel` component.
+     */
+    style?: StyleType;
+};
+/**
+ * A component that has `role="tabpanel"` and is used to represent a tab panel
+ * in a tabbed interface.
+ */
+export declare const TabPanel: (props: Props) => React.JSX.Element;
+export {};

package/dist/components/tab.d.ts

@@ -0,0 +1,43 @@
+import { StyleType } from "@khanacademy/wonder-blocks-core";
+import * as React from "react";
+/**
+ * A component that has `role="tab"` and is used to represent a tab in a tabbed
+ * interface.
+ */
+export declare const Tab: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole;
+}> & {
+    /**
+     * The contents of the tab label.
+     */
+    children: React.ReactNode;
+    /**
+     * Called when the tab is clicked.
+     */
+    onClick?: (event: React.MouseEvent) => unknown;
+    /**
+     * A unique id for the tab.
+     */
+    id: string;
+    /**
+     * Optional test ID for e2e testing.
+     */
+    testId?: string;
+    /**
+     * The id of the panel that the tab controls.
+     */
+    "aria-controls": string;
+    /**
+     * If the tab is currently selected.
+     */
+    selected?: boolean;
+    /**
+     * Called when a key is pressed on the tab.
+     */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+    /**
+     * Custom styles for the `Tab` component.
+     */
+    style?: StyleType;
+} & React.RefAttributes<HTMLButtonElement>>;
+export declare const styles: import("aphrodite").StyleDeclaration;

package/dist/components/tablist.d.ts

@@ -0,0 +1,39 @@
+import { StyleType } from "@khanacademy/wonder-blocks-core";
+import * as React from "react";
+type Props = {
+    /**
+     * The id of the tablist.
+     */
+    id?: string;
+    /**
+     * Optional test ID for e2e testing.
+     */
+    testId?: string;
+    /**
+     * The contents of the tablist.
+     */
+    children: React.ReactNode;
+    /**
+     * If there is no visible label for the tablist, set aria-label to a
+     * label describing the tablist.
+     */
+    "aria-label"?: string;
+    /**
+     * If the tablist has a visible label, set aria-labelledby to a value
+     * that refers to the labelling element.
+     */
+    "aria-labelledby"?: string;
+    /**
+     * Called when focus moves out of the tablist.
+     */
+    onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
+    /**
+     * Custom styles for the `Tablist` component.
+     */
+    style?: StyleType;
+};
+/**
+ * A component that has `role="tablist"` and is used to group tab elements.
+ */
+export declare const Tablist: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/tabs.d.ts

@@ -0,0 +1,149 @@
+import * as React from "react";
+import { AriaProps, PropsFor, StyleType } from "@khanacademy/wonder-blocks-core";
+import { Tab } from "./tab";
+export type TabRenderProps = Omit<PropsFor<typeof Tab>, "children">;
+export type TabItem = AriaProps & {
+    /**
+     * A unique id for the tab.
+     *
+     * Here is how the id is used for the different elements in the component:
+     * - The tab will have an id formatted as `${id}-tab`
+     * - The associated tab panel will have an id formatted as `${id}-panel`
+     *
+     * It is also used to communicate the id of the selected tab via the
+     * `selectedTabId` and `onTabSelected` props.
+     */
+    id: string;
+    /**
+     * The contents of the tab label.
+     *
+     * For specific use cases where the underlying tab element is wrapped
+     * by another component (like a `Tooltip` or `Popover`), a render function
+     * can be used with the `Tab` component instead. The render function
+     * provides the tab props that should be applied to the `Tab` component.
+     */
+    label: React.ReactNode | ((tabProps: TabRenderProps) => React.ReactElement);
+    /**
+     * The contents of the panel associated with the tab.
+     */
+    panel: React.ReactNode;
+    /**
+     * Optional test ID for e2e testing.
+     *
+     * Here is how the test id is used for the different elements in the component:
+     * - The tab will have a testId formatted as `${testId}-tab`
+     * - The associated tab panel will have a testId formatted as `${testId}-panel`
+     */
+    testId?: string;
+};
+/**
+ * Type to help ensure aria-label or aria-labelledby is set.
+ */
+type AriaLabelOrAriaLabelledby = {
+    /**
+     * If there is no visible label for the tabs, set aria-label to a
+     * label describing the tabs.
+     */
+    "aria-label": string;
+    "aria-labelledby"?: never;
+} | {
+    /**
+     * If the tabs have a visible label, set aria-labelledby to a value
+     * that refers to the labelling element.
+     */
+    "aria-labelledby": string;
+    "aria-label"?: never;
+};
+type Props = {
+    /**
+     * A unique id to use as the base of the ids for the elements within the
+     * component. If the `id` prop is not provided, a base unique id will be
+     * auto-generated.
+     *
+     * Here is how the id is used for the different elements in the component:
+     * - The root will have an id of `${id}`
+     * - The tablist will have an id formatted as ${id}-tablist
+     *
+     * If you need to apply an id to a specific tab or tab panel, the `id` for
+     * the tab item in the `tabs` prop will be used:
+     * - The tab will have an id formatted as `${id}-tab`
+     * - The associated tab panel will have an id formatted as `${id}-panel`
+     */
+    id?: string;
+    /**
+     * Optional test ID for e2e testing. Here is how the test id is used for the
+     * different elements in the component:
+     * - The root will have a testId formatted as `${testId}`
+     * - The tablist will have a testId formatted as `${testId}-tablist`
+     *
+     * If you need to apply a testId to a specific tab or tab panel, add the
+     * test id to the tab item in the `tabs` prop:
+     * - The tab will have a testId formatted as `${testId}-tab`
+     * - The associated tab panel will have a testId formatted as `${testId}-panel`
+     */
+    testId?: string;
+    /**
+     * The tabs to render. The Tabs component will wire up the tab and panel
+     * attributes for accessibility.
+     */
+    tabs: Array<TabItem>;
+    /**
+     * The id of the tab that is selected.
+     */
+    selectedTabId: string;
+    /**
+     * Called when a tab is selected.
+     */
+    onTabSelected: (id: string) => unknown;
+    /**
+     * The mode of activation for the tabs for keyboard navigation. Defaults to
+     * `manual`.
+     *
+     * - If `manual`, the tab will only be activated when a tab receives focus
+     * and is selected by pressing `Space` or `Enter`.
+     * - If `automatic`, the tab will be activated once a tab receives focus.
+     */
+    activationMode?: "manual" | "automatic";
+    /**
+     * Whether to include animation in the `Tabs` component. This should be
+     * false if the user has `prefers-reduced-motion` opted in. Defaults to
+     * `false`.
+     */
+    animated?: boolean;
+    /**
+     * Custom styles for the `Tabs` component.
+     * - `root`: Styles the root `div` element.
+     * - `tablist`: Styles the `tablist` element.
+     * - `tab`: Styles all `tab` elements.
+     * - `tabPanel`: Styles all the `tabpanel` elements.
+     *
+     * If styles need to be applied to specific tab or tab panel elements,
+     * consider setting the styles on the `label` and `panel` content for the
+     * `tabs` prop.
+     */
+    styles?: {
+        root?: StyleType;
+        tablist?: StyleType;
+        tab?: StyleType;
+        tabPanel?: StyleType;
+    };
+    /**
+     * Whether to mount all tab panels when the component mounts.
+     *
+     * - When enabled, all tab panels are in the DOM. This is useful if the
+     * tab contents should be crawlable for SEO purposes.
+     * - When disabled, tab panels are only in the DOM if they've been visited.
+     * This is useful for performance so that unvisited panels are not mounted.
+     *
+     * Defaults to `false`.
+     */
+    mountAllPanels?: boolean;
+} & AriaLabelOrAriaLabelledby;
+/**
+ * A component that uses a tabbed interface to control a specific view. The
+ * tabs have `role=”tab”` and keyboard users can change tabs using arrow keys.
+ * For a tabbed interface where the tabs are links, see the NavigationTabs
+ * component.
+ */
+export declare const Tabs: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/es/index.js

@@ -1,12 +1,25 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { addStyle, useOnMountEffect, View } from '@khanacademy/wonder-blocks-core';
-import { sizing, semanticColor, breakpoint, border } from '@khanacademy/wonder-blocks-tokens';
+import { useOnMountEffect, addStyle, keys } from '@khanacademy/wonder-blocks-core';
+import { border, semanticColor, sizing, breakpoint } from '@khanacademy/wonder-blocks-tokens';
 import { StyleSheet } from 'aphrodite';
 import * as React from 'react';
-import { styles as styles$2 } from '@khanacademy/wonder-blocks-typography';
+import { styles as styles$7 } from '@khanacademy/wonder-blocks-typography';
+import { focusStyles } from '@khanacademy/wonder-blocks-styles';
 
-const StyledNav=addStyle("nav");const StyledUl=addStyle("ul");const StyledDiv=addStyle("div");const NavigationTabs=React.forwardRef(function NavigationTabs(props,ref){const{id,testId,children,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,styles:stylesProp,animated=false,...otherProps}=props;const listRef=React.useRef(null);const indicatorIsReady=React.useRef(false);const[underlineStyle,setUnderlineStyle]=React.useState({left:0,width:0});const updateUnderlineStyle=React.useCallback(()=>{if(!listRef.current){return}const activeTab=Array.from(listRef.current.children).find(child=>child.children[0]?.ariaCurrent);if(activeTab){const tabRect=activeTab.getBoundingClientRect();const parentRect=listRef.current.getBoundingClientRect();const zoomFactor=parentRect.width/listRef.current.offsetWidth;const left=(tabRect.left-parentRect.left)/zoomFactor;const width=tabRect.width/zoomFactor;setUnderlineStyle({left,width});}},[setUnderlineStyle,listRef]);useOnMountEffect(()=>{if(!listRef.current||!window.ResizeObserver){return}const observer=new window.ResizeObserver(([entry])=>{if(entry){updateUnderlineStyle();if(!indicatorIsReady.current){indicatorIsReady.current=true;}}});observer.observe(listRef.current);return ()=>{observer.disconnect();}});React.useEffect(()=>{updateUnderlineStyle();},[children,updateUnderlineStyle]);return jsx(StyledNav,{id:id,"data-testid":testId,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,ref:ref,style:[styles$1.nav,stylesProp?.root],...otherProps,children:jsxs(StyledDiv,{style:styles$1.contents,children:[jsx(StyledUl,{style:[styles$1.list,stylesProp?.list],ref:listRef,children:children}),indicatorIsReady.current&&jsx(View,{style:[{transform:`translateX(${underlineStyle.left}px)`,width:`${underlineStyle.width}px`},styles$1.currentUnderline,animated&&styles$1.underlineTransition],role:"presentation"})]})})});const styles$1=StyleSheet.create({nav:{overflowX:"auto"},contents:{position:"relative"},list:{paddingInline:sizing.size_040,paddingBlock:sizing.size_0,margin:sizing.size_0,display:"flex",gap:sizing.size_160,flexWrap:"nowrap"},currentUnderline:{position:"absolute",bottom:0,left:0,height:sizing.size_040,backgroundColor:semanticColor.action.secondary.progressive.default.foreground},underlineTransition:{transition:"transform 0.3s ease, width 0.3s ease"}});
+const useTabIndicator=props=>{const{animated,tabsContainerRef,isTabActive}=props;const indicatorIsReady=React.useRef(false);const[underlineStyle,setUnderlineStyle]=React.useState({left:0,width:0});const updateUnderlineStyle=React.useCallback(()=>{if(!tabsContainerRef.current){return}const activeTab=Array.from(tabsContainerRef.current.children).find(isTabActive);if(activeTab){const tabRect=activeTab.getBoundingClientRect();const parentRect=tabsContainerRef.current.getBoundingClientRect();const zoomFactor=parentRect.width/tabsContainerRef.current.offsetWidth;const left=(tabRect.left-parentRect.left)/zoomFactor;const width=tabRect.width/zoomFactor;setUnderlineStyle({left,width});}},[setUnderlineStyle,tabsContainerRef,isTabActive]);useOnMountEffect(()=>{if(!tabsContainerRef.current||!window?.ResizeObserver){return}const observer=new window.ResizeObserver(([entry])=>{if(entry){updateUnderlineStyle();if(!indicatorIsReady.current){indicatorIsReady.current=true;}}});observer.observe(tabsContainerRef.current);return ()=>{observer.disconnect();}});const positioningStyle={transform:`translateX(${underlineStyle.left}px)`,width:`${underlineStyle.width}px`};const indicatorProps={style:{...styles$6.currentUnderline,...positioningStyle,...animated?styles$6.underlineTransition:{},...!indicatorIsReady.current?{display:"none"}:{}},role:"presentation"};return {indicatorProps,updateUnderlineStyle}};const styles$6={currentUnderline:{position:"absolute",bottom:0,left:0,height:border.width.thick,backgroundColor:semanticColor.action.secondary.progressive.default.foreground},underlineTransition:{transition:"transform 0.3s ease, width 0.3s ease"}};
 
-const StyledLi=addStyle("li");const NavigationTabItem=React.forwardRef(function NavigationTabItem(props,ref){const{children,id,testId,current,style,...otherProps}=props;function renderChildren(){const linkProps={style:[styles$2.Body,styles.link,current&&styles.currentLink],"aria-current":current?"page":undefined};if(typeof children==="function"){return children(linkProps)}return React.cloneElement(children,linkProps)}return jsx(StyledLi,{id:id,"data-testid":testId,style:[styles.root,current&&styles.current,style],ref:ref,...otherProps,children:renderChildren()})});const styles=StyleSheet.create({root:{listStyle:"none",display:"inline-flex",[":has(a:hover)"]:{boxShadow:`inset 0 calc(${sizing.size_020}*-1) 0 0 ${semanticColor.action.secondary.progressive.hover.foreground}`},[":has(a:active)"]:{boxShadow:`inset 0 calc(${sizing.size_060}*-1) 0 0 ${semanticColor.action.secondary.progressive.press.foreground}`},paddingBlockStart:sizing.size_080,paddingBlockEnd:sizing.size_180,[breakpoint.mediaQuery.mdOrLarger]:{paddingBlockStart:sizing.size_200,paddingBlockEnd:sizing.size_240}},current:{[":has(a:hover)"]:{boxShadow:"none"}},currentLink:{color:semanticColor.action.secondary.progressive.default.foreground},link:{display:"flex",margin:0,color:semanticColor.text.primary,paddingInline:0,position:"relative",whiteSpace:"nowrap",textDecoration:"none",[":hover:not([aria-disabled=true])"]:{textDecoration:"none",border:"none",outline:"none",color:semanticColor.action.secondary.progressive.default.foreground,backgroundColor:"transparent"},[":active:not([aria-disabled=true])"]:{textDecoration:"none",border:"none",outline:"none",color:semanticColor.action.secondary.progressive.press.foreground},":focus-visible":{color:semanticColor.action.secondary.progressive.default.foreground,border:"none",outline:"none",boxShadow:`0 0 0 ${sizing.size_020} ${semanticColor.focus.inner}, 0 0 0 ${sizing.size_040} ${semanticColor.focus.outer}`,borderRadius:border.radius.radius_0}}});
+const StyledNav=addStyle("nav");const StyledUl=addStyle("ul");const StyledDiv$3=addStyle("div");const NavigationTabs=React.forwardRef(function NavigationTabs(props,ref){const{id,testId,children,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,styles:stylesProp,animated=false,...otherProps}=props;const listRef=React.useRef(null);const isTabActive=React.useCallback(navTabItemElement=>{return navTabItemElement.children[0]?.ariaCurrent==="page"},[]);const{indicatorProps,updateUnderlineStyle}=useTabIndicator({animated,tabsContainerRef:listRef,isTabActive});React.useEffect(()=>{updateUnderlineStyle();},[children,updateUnderlineStyle]);return jsx(StyledNav,{id:id,"data-testid":testId,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,ref:ref,style:[styles$5.nav,stylesProp?.root],...otherProps,children:jsxs(StyledDiv$3,{style:styles$5.contents,children:[jsx(StyledUl,{style:[styles$5.list,stylesProp?.list],ref:listRef,children:children}),jsx("div",{...indicatorProps})]})})});const styles$5=StyleSheet.create({nav:{overflowX:"auto"},contents:{position:"relative"},list:{paddingInline:sizing.size_040,paddingBlock:sizing.size_0,margin:sizing.size_0,display:"flex",gap:sizing.size_160,flexWrap:"nowrap"}});
 
-export { NavigationTabItem, NavigationTabs };
+const StyledLi=addStyle("li");const NavigationTabItem=React.forwardRef(function NavigationTabItem(props,ref){const{children,id,testId,current,style,...otherProps}=props;function renderChildren(){const linkProps={style:[styles$7.Body,styles$4.link,current&&styles$4.currentLink],"aria-current":current?"page":undefined};if(typeof children==="function"){return children(linkProps)}return React.cloneElement(children,linkProps)}return jsx(StyledLi,{id:id,"data-testid":testId,style:[styles$4.root,current&&styles$4.current,style],ref:ref,...otherProps,children:renderChildren()})});const styles$4=StyleSheet.create({root:{listStyle:"none",display:"inline-flex",[":has(a:hover)"]:{boxShadow:`inset 0 calc(${sizing.size_020}*-1) 0 0 ${semanticColor.action.secondary.progressive.hover.foreground}`},[":has(a:active)"]:{boxShadow:`inset 0 calc(${sizing.size_060}*-1) 0 0 ${semanticColor.action.secondary.progressive.press.foreground}`},paddingBlockStart:sizing.size_080,paddingBlockEnd:sizing.size_180,[breakpoint.mediaQuery.mdOrLarger]:{paddingBlockStart:sizing.size_200,paddingBlockEnd:sizing.size_240}},current:{[":has(a:hover)"]:{boxShadow:"none"},[":has(a:active):not([aria-disabled=true])"]:{boxShadow:"none"}},currentLink:{color:semanticColor.action.secondary.progressive.default.foreground,[":active:not([aria-disabled=true])"]:{color:semanticColor.action.secondary.progressive.default.foreground}},link:{display:"flex",margin:0,color:semanticColor.text.primary,paddingInline:0,position:"relative",whiteSpace:"nowrap",textDecoration:"none",[":hover:not([aria-disabled=true])"]:{textDecoration:"none",border:"none",outline:"none",color:semanticColor.action.secondary.progressive.default.foreground,backgroundColor:"transparent"},[":active:not([aria-disabled=true])"]:{textDecoration:"none",border:"none",outline:"none",color:semanticColor.action.secondary.progressive.press.foreground},":focus-visible":{color:semanticColor.action.secondary.progressive.default.foreground,border:"none",outline:"none",boxShadow:`0 0 0 ${sizing.size_020} ${semanticColor.focus.inner}, 0 0 0 ${sizing.size_040} ${semanticColor.focus.outer}`,borderRadius:border.radius.radius_0}}});
+
+const FOCUSABLE_ELEMENTS='button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';function findFocusableNodes(root){return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS))}
+
+const StyledDiv$2=addStyle("div");const TabPanel=props=>{const{children,id,"aria-labelledby":ariaLabelledby,active=false,testId,style}=props;const ref=React.useRef(null);const[hasFocusableElement,setHasFocusableElement]=React.useState(false);React.useEffect(()=>{if(ref.current){setHasFocusableElement(findFocusableNodes(ref.current).length>0);}},[active,ref,children]);return jsx(StyledDiv$2,{ref:ref,role:"tabpanel",id:id,"aria-labelledby":ariaLabelledby,tabIndex:hasFocusableElement?undefined:0,hidden:!active,"data-testid":testId,style:active&&[styles$3.tabPanel,style],children:children})};const styles$3=StyleSheet.create({tabPanel:{display:"flex"}});
+
+const StyledButton=addStyle("button");const Tab=React.forwardRef(function Tab(props,ref){const{children,onClick,id,"aria-controls":ariaControls,selected,onKeyDown,testId,style,...otherProps}=props;return jsx(StyledButton,{...otherProps,role:"tab",onClick:onClick,ref:ref,id:id,"aria-controls":ariaControls,"aria-selected":selected,tabIndex:selected?0:-1,onKeyDown:onKeyDown,"data-testid":testId,style:[styles$7.Body,styles$2.tab,selected&&styles$2.selectedTab,style],children:children})});const bottomSpacing=sizing.size_140;const styles$2=StyleSheet.create({tab:{display:"flex",alignItems:"center",textWrap:"nowrap",backgroundColor:"transparent",border:"none",margin:0,padding:0,cursor:"pointer",marginBlockStart:sizing.size_080,marginBlockEnd:bottomSpacing,position:"relative",...focusStyles.focus,":after":{content:"''",position:"absolute",left:0,right:0,bottom:`calc(${bottomSpacing} * -1)`},[":hover:not([aria-selected='true'])"]:{color:semanticColor.action.secondary.progressive.hover.foreground,[":after"]:{height:border.width.thin,backgroundColor:semanticColor.action.secondary.progressive.hover.foreground}},[":active:not([aria-selected='true'])"]:{color:semanticColor.action.secondary.progressive.press.foreground,[":after"]:{height:border.width.thick,backgroundColor:semanticColor.action.secondary.progressive.press.foreground}}},selectedTab:{color:semanticColor.action.secondary.progressive.default.foreground}});
+
+const StyledDiv$1=addStyle("div");const Tablist=React.forwardRef(function Tablist(props,ref){const{id,children,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,onBlur,testId,style}=props;return jsx(StyledDiv$1,{id:id,role:"tablist",style:[styles$1.tablist,style],ref:ref,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,onBlur:onBlur,"data-testid":testId,children:children})});const styles$1=StyleSheet.create({tablist:{display:"flex",gap:sizing.size_240,borderBottom:`${border.width.thin} solid ${semanticColor.border.subtle}`,paddingInline:sizing.size_040}});
+
+function getTabId(tabId){return `${tabId}-tab`}function getTabPanelId(tabId){return `${tabId}-panel`}const StyledDiv=addStyle("div");const Tabs=React.forwardRef(function Tabs(props,ref){const{tabs,selectedTabId,onTabSelected,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,activationMode="manual",id,testId,animated=false,styles:stylesProp,mountAllPanels=false}=props;const focusedTabId=React.useRef(selectedTabId);const tabRefs=React.useRef({});const generatedUniqueId=React.useId();const uniqueId=id??generatedUniqueId;const tablistId=`${uniqueId}-tablist`;const visitedTabsRef=React.useRef(new Set);visitedTabsRef.current.add(selectedTabId);const tablistRef=React.useRef(null);const isTabActive=React.useCallback(tabElement=>{return tabElement.ariaSelected==="true"},[]);const{indicatorProps,updateUnderlineStyle}=useTabIndicator({animated,tabsContainerRef:tablistRef,isTabActive});React.useEffect(()=>{focusedTabId.current=selectedTabId;},[selectedTabId]);React.useEffect(()=>{updateUnderlineStyle();},[updateUnderlineStyle,tabs,selectedTabId]);const selectTab=React.useCallback(tabId=>{if(tabId!==selectedTabId){onTabSelected(tabId);}},[onTabSelected,selectedTabId]);const handleKeyInteraction=React.useCallback(tabId=>{const tabElement=tabRefs.current[tabId];tabElement?.focus();switch(activationMode){case"manual":{focusedTabId.current=tabId;break}case"automatic":{selectTab(tabId);break}}},[activationMode,selectTab,focusedTabId]);const handleKeyDown=React.useCallback(event=>{const currentIndex=tabs.findIndex(tab=>tab.id===focusedTabId.current);const element=event.currentTarget;const isRtl=!!element.closest("[dir=rtl]");switch(event.key){case isRtl&&keys.right:case!isRtl&&keys.left:{event.preventDefault();const prevIndex=(currentIndex-1+tabs.length)%tabs.length;handleKeyInteraction(tabs[prevIndex].id);break}case isRtl&&keys.left:case!isRtl&&keys.right:{event.preventDefault();const nextIndex=(currentIndex+1)%tabs.length;handleKeyInteraction(tabs[nextIndex].id);break}case keys.home:{event.preventDefault();handleKeyInteraction(tabs[0].id);break}case keys.end:{event.preventDefault();handleKeyInteraction(tabs[tabs.length-1].id);break}case keys.enter:case keys.space:{selectTab(focusedTabId.current);break}}},[handleKeyInteraction,selectTab,tabs,focusedTabId]);const handleTablistBlur=React.useCallback(()=>{focusedTabId.current=selectedTabId;},[selectedTabId]);if(tabs.length===0){return jsx(React.Fragment,{})}return jsxs(StyledDiv,{ref:ref,id:uniqueId,"data-testid":testId,style:[styles.tabs,stylesProp?.root],children:[jsxs(StyledDiv,{style:styles.tablistWrapper,children:[jsx(Tablist,{"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,onBlur:handleTablistBlur,id:tablistId,testId:testId&&`${testId}-tablist`,ref:tablistRef,style:stylesProp?.tablist,children:tabs.map(tab=>{const{id,label,panel:_,testId:tabTestId,...otherProps}=tab;const tabProps={...otherProps,key:id,id:getTabId(id),testId:tabTestId&&getTabId(tabTestId),selected:id===selectedTabId,"aria-controls":getTabPanelId(id),onClick:()=>{onTabSelected(id);},onKeyDown:handleKeyDown,ref:element=>{tabRefs.current[tab.id]=element;},style:stylesProp?.tab};if(typeof label==="function"){return label(tabProps)}return jsx(Tab,{...tabProps,children:label})})}),jsx("div",{...indicatorProps})]}),tabs.map(tab=>{return jsx(TabPanel,{id:getTabPanelId(tab.id),"aria-labelledby":getTabId(tab.id),active:selectedTabId===tab.id,testId:tab.testId&&getTabPanelId(tab.testId),style:stylesProp?.tabPanel,children:(mountAllPanels||visitedTabsRef.current.has(tab.id))&&tab.panel},tab.id)})]})});const styles=StyleSheet.create({tabs:{display:"inline-flex",flexDirection:"column",alignItems:"stretch",position:"relative"},tablistWrapper:{position:"relative",overflowX:"auto"}});
+
+export { NavigationTabItem, NavigationTabs, Tab, Tabs };

package/dist/hooks/use-tab-indicator.d.ts

@@ -0,0 +1,37 @@
+import { AriaRole } from "@khanacademy/wonder-blocks-core";
+import * as React from "react";
+type IndicatorProps = {
+    /**
+     * Inline styles for the indicator.
+     */
+    style: React.CSSProperties;
+    role: AriaRole;
+};
+type Props = {
+    /**
+     * Whether to include animation.
+     */
+    animated: boolean;
+    /**
+     * Ref for the container of the tabs so we can observe when the size of the
+     * children changes. This is necessary to update the underline position.
+     */
+    tabsContainerRef: React.RefObject<HTMLElement>;
+    /**
+     * Function that determines if a tab is active. The `childElement` argument
+     * is the child element of the `tabsContainerRef` prop
+     */
+    isTabActive(childElement: Element): boolean;
+};
+/**
+ * A hook that is used to manage the underline current indicator for tabs.
+ * It returns:
+ * - `indicatorProps`: The props to apply to the underline current indicator
+ * - `updateUnderlineStyle`: A function that updates the underline style. Use
+ * this function when the component detects a change in the tabs
+ */
+export declare const useTabIndicator: (props: Props) => {
+    indicatorProps: IndicatorProps;
+    updateUnderlineStyle: () => void;
+};
+export {};

package/dist/index.d.ts

@@ -1,2 +1,5 @@
 export { NavigationTabs } from "./components/navigation-tabs";
 export { NavigationTabItem } from "./components/navigation-tab-item";
+export { Tabs } from "./components/tabs";
+export type { TabItem, TabRenderProps } from "./components/tabs";
+export { Tab } from "./components/tab";

package/dist/index.js

@@ -8,6 +8,7 @@ var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
 var aphrodite = require('aphrodite');
 var React = require('react');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
+var wonderBlocksStyles = require('@khanacademy/wonder-blocks-styles');
 
 function _interopNamespace(e) {
     if (e && e.__esModule) return e;
@@ -29,9 +30,23 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-const StyledNav=wonderBlocksCore.addStyle("nav");const StyledUl=wonderBlocksCore.addStyle("ul");const StyledDiv=wonderBlocksCore.addStyle("div");const NavigationTabs=React__namespace.forwardRef(function NavigationTabs(props,ref){const{id,testId,children,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,styles:stylesProp,animated=false,...otherProps}=props;const listRef=React__namespace.useRef(null);const indicatorIsReady=React__namespace.useRef(false);const[underlineStyle,setUnderlineStyle]=React__namespace.useState({left:0,width:0});const updateUnderlineStyle=React__namespace.useCallback(()=>{if(!listRef.current){return}const activeTab=Array.from(listRef.current.children).find(child=>child.children[0]?.ariaCurrent);if(activeTab){const tabRect=activeTab.getBoundingClientRect();const parentRect=listRef.current.getBoundingClientRect();const zoomFactor=parentRect.width/listRef.current.offsetWidth;const left=(tabRect.left-parentRect.left)/zoomFactor;const width=tabRect.width/zoomFactor;setUnderlineStyle({left,width});}},[setUnderlineStyle,listRef]);wonderBlocksCore.useOnMountEffect(()=>{if(!listRef.current||!window.ResizeObserver){return}const observer=new window.ResizeObserver(([entry])=>{if(entry){updateUnderlineStyle();if(!indicatorIsReady.current){indicatorIsReady.current=true;}}});observer.observe(listRef.current);return ()=>{observer.disconnect();}});React__namespace.useEffect(()=>{updateUnderlineStyle();},[children,updateUnderlineStyle]);return jsxRuntime.jsx(StyledNav,{id:id,"data-testid":testId,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,ref:ref,style:[styles$1.nav,stylesProp?.root],...otherProps,children:jsxRuntime.jsxs(StyledDiv,{style:styles$1.contents,children:[jsxRuntime.jsx(StyledUl,{style:[styles$1.list,stylesProp?.list],ref:listRef,children:children}),indicatorIsReady.current&&jsxRuntime.jsx(wonderBlocksCore.View,{style:[{transform:`translateX(${underlineStyle.left}px)`,width:`${underlineStyle.width}px`},styles$1.currentUnderline,animated&&styles$1.underlineTransition],role:"presentation"})]})})});const styles$1=aphrodite.StyleSheet.create({nav:{overflowX:"auto"},contents:{position:"relative"},list:{paddingInline:wonderBlocksTokens.sizing.size_040,paddingBlock:wonderBlocksTokens.sizing.size_0,margin:wonderBlocksTokens.sizing.size_0,display:"flex",gap:wonderBlocksTokens.sizing.size_160,flexWrap:"nowrap"},currentUnderline:{position:"absolute",bottom:0,left:0,height:wonderBlocksTokens.sizing.size_040,backgroundColor:wonderBlocksTokens.semanticColor.action.secondary.progressive.default.foreground},underlineTransition:{transition:"transform 0.3s ease, width 0.3s ease"}});
+const useTabIndicator=props=>{const{animated,tabsContainerRef,isTabActive}=props;const indicatorIsReady=React__namespace.useRef(false);const[underlineStyle,setUnderlineStyle]=React__namespace.useState({left:0,width:0});const updateUnderlineStyle=React__namespace.useCallback(()=>{if(!tabsContainerRef.current){return}const activeTab=Array.from(tabsContainerRef.current.children).find(isTabActive);if(activeTab){const tabRect=activeTab.getBoundingClientRect();const parentRect=tabsContainerRef.current.getBoundingClientRect();const zoomFactor=parentRect.width/tabsContainerRef.current.offsetWidth;const left=(tabRect.left-parentRect.left)/zoomFactor;const width=tabRect.width/zoomFactor;setUnderlineStyle({left,width});}},[setUnderlineStyle,tabsContainerRef,isTabActive]);wonderBlocksCore.useOnMountEffect(()=>{if(!tabsContainerRef.current||!window?.ResizeObserver){return}const observer=new window.ResizeObserver(([entry])=>{if(entry){updateUnderlineStyle();if(!indicatorIsReady.current){indicatorIsReady.current=true;}}});observer.observe(tabsContainerRef.current);return ()=>{observer.disconnect();}});const positioningStyle={transform:`translateX(${underlineStyle.left}px)`,width:`${underlineStyle.width}px`};const indicatorProps={style:{...styles$6.currentUnderline,...positioningStyle,...animated?styles$6.underlineTransition:{},...!indicatorIsReady.current?{display:"none"}:{}},role:"presentation"};return {indicatorProps,updateUnderlineStyle}};const styles$6={currentUnderline:{position:"absolute",bottom:0,left:0,height:wonderBlocksTokens.border.width.thick,backgroundColor:wonderBlocksTokens.semanticColor.action.secondary.progressive.default.foreground},underlineTransition:{transition:"transform 0.3s ease, width 0.3s ease"}};
 
-const StyledLi=wonderBlocksCore.addStyle("li");const NavigationTabItem=React__namespace.forwardRef(function NavigationTabItem(props,ref){const{children,id,testId,current,style,...otherProps}=props;function renderChildren(){const linkProps={style:[wonderBlocksTypography.styles.Body,styles.link,current&&styles.currentLink],"aria-current":current?"page":undefined};if(typeof children==="function"){return children(linkProps)}return React__namespace.cloneElement(children,linkProps)}return jsxRuntime.jsx(StyledLi,{id:id,"data-testid":testId,style:[styles.root,current&&styles.current,style],ref:ref,...otherProps,children:renderChildren()})});const styles=aphrodite.StyleSheet.create({root:{listStyle:"none",display:"inline-flex",[":has(a:hover)"]:{boxShadow:`inset 0 calc(${wonderBlocksTokens.sizing.size_020}*-1) 0 0 ${wonderBlocksTokens.semanticColor.action.secondary.progressive.hover.foreground}`},[":has(a:active)"]:{boxShadow:`inset 0 calc(${wonderBlocksTokens.sizing.size_060}*-1) 0 0 ${wonderBlocksTokens.semanticColor.action.secondary.progressive.press.foreground}`},paddingBlockStart:wonderBlocksTokens.sizing.size_080,paddingBlockEnd:wonderBlocksTokens.sizing.size_180,[wonderBlocksTokens.breakpoint.mediaQuery.mdOrLarger]:{paddingBlockStart:wonderBlocksTokens.sizing.size_200,paddingBlockEnd:wonderBlocksTokens.sizing.size_240}},current:{[":has(a:hover)"]:{boxShadow:"none"}},currentLink:{color:wonderBlocksTokens.semanticColor.action.secondary.progressive.default.foreground},link:{display:"flex",margin:0,color:wonderBlocksTokens.semanticColor.text.primary,paddingInline:0,position:"relative",whiteSpace:"nowrap",textDecoration:"none",[":hover:not([aria-disabled=true])"]:{textDecoration:"none",border:"none",outline:"none",color:wonderBlocksTokens.semanticColor.action.secondary.progressive.default.foreground,backgroundColor:"transparent"},[":active:not([aria-disabled=true])"]:{textDecoration:"none",border:"none",outline:"none",color:wonderBlocksTokens.semanticColor.action.secondary.progressive.press.foreground},":focus-visible":{color:wonderBlocksTokens.semanticColor.action.secondary.progressive.default.foreground,border:"none",outline:"none",boxShadow:`0 0 0 ${wonderBlocksTokens.sizing.size_020} ${wonderBlocksTokens.semanticColor.focus.inner}, 0 0 0 ${wonderBlocksTokens.sizing.size_040} ${wonderBlocksTokens.semanticColor.focus.outer}`,borderRadius:wonderBlocksTokens.border.radius.radius_0}}});
+const StyledNav=wonderBlocksCore.addStyle("nav");const StyledUl=wonderBlocksCore.addStyle("ul");const StyledDiv$3=wonderBlocksCore.addStyle("div");const NavigationTabs=React__namespace.forwardRef(function NavigationTabs(props,ref){const{id,testId,children,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,styles:stylesProp,animated=false,...otherProps}=props;const listRef=React__namespace.useRef(null);const isTabActive=React__namespace.useCallback(navTabItemElement=>{return navTabItemElement.children[0]?.ariaCurrent==="page"},[]);const{indicatorProps,updateUnderlineStyle}=useTabIndicator({animated,tabsContainerRef:listRef,isTabActive});React__namespace.useEffect(()=>{updateUnderlineStyle();},[children,updateUnderlineStyle]);return jsxRuntime.jsx(StyledNav,{id:id,"data-testid":testId,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,ref:ref,style:[styles$5.nav,stylesProp?.root],...otherProps,children:jsxRuntime.jsxs(StyledDiv$3,{style:styles$5.contents,children:[jsxRuntime.jsx(StyledUl,{style:[styles$5.list,stylesProp?.list],ref:listRef,children:children}),jsxRuntime.jsx("div",{...indicatorProps})]})})});const styles$5=aphrodite.StyleSheet.create({nav:{overflowX:"auto"},contents:{position:"relative"},list:{paddingInline:wonderBlocksTokens.sizing.size_040,paddingBlock:wonderBlocksTokens.sizing.size_0,margin:wonderBlocksTokens.sizing.size_0,display:"flex",gap:wonderBlocksTokens.sizing.size_160,flexWrap:"nowrap"}});
+
+const StyledLi=wonderBlocksCore.addStyle("li");const NavigationTabItem=React__namespace.forwardRef(function NavigationTabItem(props,ref){const{children,id,testId,current,style,...otherProps}=props;function renderChildren(){const linkProps={style:[wonderBlocksTypography.styles.Body,styles$4.link,current&&styles$4.currentLink],"aria-current":current?"page":undefined};if(typeof children==="function"){return children(linkProps)}return React__namespace.cloneElement(children,linkProps)}return jsxRuntime.jsx(StyledLi,{id:id,"data-testid":testId,style:[styles$4.root,current&&styles$4.current,style],ref:ref,...otherProps,children:renderChildren()})});const styles$4=aphrodite.StyleSheet.create({root:{listStyle:"none",display:"inline-flex",[":has(a:hover)"]:{boxShadow:`inset 0 calc(${wonderBlocksTokens.sizing.size_020}*-1) 0 0 ${wonderBlocksTokens.semanticColor.action.secondary.progressive.hover.foreground}`},[":has(a:active)"]:{boxShadow:`inset 0 calc(${wonderBlocksTokens.sizing.size_060}*-1) 0 0 ${wonderBlocksTokens.semanticColor.action.secondary.progressive.press.foreground}`},paddingBlockStart:wonderBlocksTokens.sizing.size_080,paddingBlockEnd:wonderBlocksTokens.sizing.size_180,[wonderBlocksTokens.breakpoint.mediaQuery.mdOrLarger]:{paddingBlockStart:wonderBlocksTokens.sizing.size_200,paddingBlockEnd:wonderBlocksTokens.sizing.size_240}},current:{[":has(a:hover)"]:{boxShadow:"none"},[":has(a:active):not([aria-disabled=true])"]:{boxShadow:"none"}},currentLink:{color:wonderBlocksTokens.semanticColor.action.secondary.progressive.default.foreground,[":active:not([aria-disabled=true])"]:{color:wonderBlocksTokens.semanticColor.action.secondary.progressive.default.foreground}},link:{display:"flex",margin:0,color:wonderBlocksTokens.semanticColor.text.primary,paddingInline:0,position:"relative",whiteSpace:"nowrap",textDecoration:"none",[":hover:not([aria-disabled=true])"]:{textDecoration:"none",border:"none",outline:"none",color:wonderBlocksTokens.semanticColor.action.secondary.progressive.default.foreground,backgroundColor:"transparent"},[":active:not([aria-disabled=true])"]:{textDecoration:"none",border:"none",outline:"none",color:wonderBlocksTokens.semanticColor.action.secondary.progressive.press.foreground},":focus-visible":{color:wonderBlocksTokens.semanticColor.action.secondary.progressive.default.foreground,border:"none",outline:"none",boxShadow:`0 0 0 ${wonderBlocksTokens.sizing.size_020} ${wonderBlocksTokens.semanticColor.focus.inner}, 0 0 0 ${wonderBlocksTokens.sizing.size_040} ${wonderBlocksTokens.semanticColor.focus.outer}`,borderRadius:wonderBlocksTokens.border.radius.radius_0}}});
+
+const FOCUSABLE_ELEMENTS='button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';function findFocusableNodes(root){return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS))}
+
+const StyledDiv$2=wonderBlocksCore.addStyle("div");const TabPanel=props=>{const{children,id,"aria-labelledby":ariaLabelledby,active=false,testId,style}=props;const ref=React__namespace.useRef(null);const[hasFocusableElement,setHasFocusableElement]=React__namespace.useState(false);React__namespace.useEffect(()=>{if(ref.current){setHasFocusableElement(findFocusableNodes(ref.current).length>0);}},[active,ref,children]);return jsxRuntime.jsx(StyledDiv$2,{ref:ref,role:"tabpanel",id:id,"aria-labelledby":ariaLabelledby,tabIndex:hasFocusableElement?undefined:0,hidden:!active,"data-testid":testId,style:active&&[styles$3.tabPanel,style],children:children})};const styles$3=aphrodite.StyleSheet.create({tabPanel:{display:"flex"}});
+
+const StyledButton=wonderBlocksCore.addStyle("button");const Tab=React__namespace.forwardRef(function Tab(props,ref){const{children,onClick,id,"aria-controls":ariaControls,selected,onKeyDown,testId,style,...otherProps}=props;return jsxRuntime.jsx(StyledButton,{...otherProps,role:"tab",onClick:onClick,ref:ref,id:id,"aria-controls":ariaControls,"aria-selected":selected,tabIndex:selected?0:-1,onKeyDown:onKeyDown,"data-testid":testId,style:[wonderBlocksTypography.styles.Body,styles$2.tab,selected&&styles$2.selectedTab,style],children:children})});const bottomSpacing=wonderBlocksTokens.sizing.size_140;const styles$2=aphrodite.StyleSheet.create({tab:{display:"flex",alignItems:"center",textWrap:"nowrap",backgroundColor:"transparent",border:"none",margin:0,padding:0,cursor:"pointer",marginBlockStart:wonderBlocksTokens.sizing.size_080,marginBlockEnd:bottomSpacing,position:"relative",...wonderBlocksStyles.focusStyles.focus,":after":{content:"''",position:"absolute",left:0,right:0,bottom:`calc(${bottomSpacing} * -1)`},[":hover:not([aria-selected='true'])"]:{color:wonderBlocksTokens.semanticColor.action.secondary.progressive.hover.foreground,[":after"]:{height:wonderBlocksTokens.border.width.thin,backgroundColor:wonderBlocksTokens.semanticColor.action.secondary.progressive.hover.foreground}},[":active:not([aria-selected='true'])"]:{color:wonderBlocksTokens.semanticColor.action.secondary.progressive.press.foreground,[":after"]:{height:wonderBlocksTokens.border.width.thick,backgroundColor:wonderBlocksTokens.semanticColor.action.secondary.progressive.press.foreground}}},selectedTab:{color:wonderBlocksTokens.semanticColor.action.secondary.progressive.default.foreground}});
+
+const StyledDiv$1=wonderBlocksCore.addStyle("div");const Tablist=React__namespace.forwardRef(function Tablist(props,ref){const{id,children,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,onBlur,testId,style}=props;return jsxRuntime.jsx(StyledDiv$1,{id:id,role:"tablist",style:[styles$1.tablist,style],ref:ref,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,onBlur:onBlur,"data-testid":testId,children:children})});const styles$1=aphrodite.StyleSheet.create({tablist:{display:"flex",gap:wonderBlocksTokens.sizing.size_240,borderBottom:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.border.subtle}`,paddingInline:wonderBlocksTokens.sizing.size_040}});
+
+function getTabId(tabId){return `${tabId}-tab`}function getTabPanelId(tabId){return `${tabId}-panel`}const StyledDiv=wonderBlocksCore.addStyle("div");const Tabs=React__namespace.forwardRef(function Tabs(props,ref){const{tabs,selectedTabId,onTabSelected,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,activationMode="manual",id,testId,animated=false,styles:stylesProp,mountAllPanels=false}=props;const focusedTabId=React__namespace.useRef(selectedTabId);const tabRefs=React__namespace.useRef({});const generatedUniqueId=React__namespace.useId();const uniqueId=id??generatedUniqueId;const tablistId=`${uniqueId}-tablist`;const visitedTabsRef=React__namespace.useRef(new Set);visitedTabsRef.current.add(selectedTabId);const tablistRef=React__namespace.useRef(null);const isTabActive=React__namespace.useCallback(tabElement=>{return tabElement.ariaSelected==="true"},[]);const{indicatorProps,updateUnderlineStyle}=useTabIndicator({animated,tabsContainerRef:tablistRef,isTabActive});React__namespace.useEffect(()=>{focusedTabId.current=selectedTabId;},[selectedTabId]);React__namespace.useEffect(()=>{updateUnderlineStyle();},[updateUnderlineStyle,tabs,selectedTabId]);const selectTab=React__namespace.useCallback(tabId=>{if(tabId!==selectedTabId){onTabSelected(tabId);}},[onTabSelected,selectedTabId]);const handleKeyInteraction=React__namespace.useCallback(tabId=>{const tabElement=tabRefs.current[tabId];tabElement?.focus();switch(activationMode){case"manual":{focusedTabId.current=tabId;break}case"automatic":{selectTab(tabId);break}}},[activationMode,selectTab,focusedTabId]);const handleKeyDown=React__namespace.useCallback(event=>{const currentIndex=tabs.findIndex(tab=>tab.id===focusedTabId.current);const element=event.currentTarget;const isRtl=!!element.closest("[dir=rtl]");switch(event.key){case isRtl&&wonderBlocksCore.keys.right:case!isRtl&&wonderBlocksCore.keys.left:{event.preventDefault();const prevIndex=(currentIndex-1+tabs.length)%tabs.length;handleKeyInteraction(tabs[prevIndex].id);break}case isRtl&&wonderBlocksCore.keys.left:case!isRtl&&wonderBlocksCore.keys.right:{event.preventDefault();const nextIndex=(currentIndex+1)%tabs.length;handleKeyInteraction(tabs[nextIndex].id);break}case wonderBlocksCore.keys.home:{event.preventDefault();handleKeyInteraction(tabs[0].id);break}case wonderBlocksCore.keys.end:{event.preventDefault();handleKeyInteraction(tabs[tabs.length-1].id);break}case wonderBlocksCore.keys.enter:case wonderBlocksCore.keys.space:{selectTab(focusedTabId.current);break}}},[handleKeyInteraction,selectTab,tabs,focusedTabId]);const handleTablistBlur=React__namespace.useCallback(()=>{focusedTabId.current=selectedTabId;},[selectedTabId]);if(tabs.length===0){return jsxRuntime.jsx(React__namespace.Fragment,{})}return jsxRuntime.jsxs(StyledDiv,{ref:ref,id:uniqueId,"data-testid":testId,style:[styles.tabs,stylesProp?.root],children:[jsxRuntime.jsxs(StyledDiv,{style:styles.tablistWrapper,children:[jsxRuntime.jsx(Tablist,{"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,onBlur:handleTablistBlur,id:tablistId,testId:testId&&`${testId}-tablist`,ref:tablistRef,style:stylesProp?.tablist,children:tabs.map(tab=>{const{id,label,panel:_,testId:tabTestId,...otherProps}=tab;const tabProps={...otherProps,key:id,id:getTabId(id),testId:tabTestId&&getTabId(tabTestId),selected:id===selectedTabId,"aria-controls":getTabPanelId(id),onClick:()=>{onTabSelected(id);},onKeyDown:handleKeyDown,ref:element=>{tabRefs.current[tab.id]=element;},style:stylesProp?.tab};if(typeof label==="function"){return label(tabProps)}return jsxRuntime.jsx(Tab,{...tabProps,children:label})})}),jsxRuntime.jsx("div",{...indicatorProps})]}),tabs.map(tab=>{return jsxRuntime.jsx(TabPanel,{id:getTabPanelId(tab.id),"aria-labelledby":getTabId(tab.id),active:selectedTabId===tab.id,testId:tab.testId&&getTabPanelId(tab.testId),style:stylesProp?.tabPanel,children:(mountAllPanels||visitedTabsRef.current.has(tab.id))&&tab.panel},tab.id)})]})});const styles=aphrodite.StyleSheet.create({tabs:{display:"inline-flex",flexDirection:"column",alignItems:"stretch",position:"relative"},tablistWrapper:{position:"relative",overflowX:"auto"}});
 
 exports.NavigationTabItem = NavigationTabItem;
 exports.NavigationTabs = NavigationTabs;
+exports.Tab = Tab;
+exports.Tabs = Tabs;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-tabs",
-  "version": "0.2.7",
+  "version": "0.3.1",
   "design": "v1",
   "description": "Tabs are used to control what content is shown",
   "main": "dist/index.js",
@@ -12,9 +12,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@khanacademy/wonder-blocks-core": "12.2.1",
-    "@khanacademy/wonder-blocks-tokens": "10.0.0",
-    "@khanacademy/wonder-blocks-typography": "3.2.0"
+    "@khanacademy/wonder-blocks-core": "12.3.0",
+    "@khanacademy/wonder-blocks-tokens": "10.1.0",
+    "@khanacademy/wonder-blocks-typography": "3.2.2"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",