@khanacademy/wonder-blocks-tabs 0.0.0-PR2913-20251217210125 → 0.0.0-PR2913-20251218223804

package/CHANGELOG.md

@@ -1,10 +1,11 @@
 # @khanacademy/wonder-blocks-tabs
 
-## 0.0.0-PR2913-20251217210125
+## 0.0.0-PR2913-20251218223804
 
 ### Minor Changes
 
 - 27a30ad: Adds TabsDropdown component
+- 11cf421: Adds ResponsiveTabs component
 
 ### Patch Changes
 

package/dist/components/responsive-tabs.d.ts

@@ -1,4 +1,6 @@
 import * as React from "react";
+import { TabsProps } from "./tabs";
+import { TabsDropdownProps } from "./tabs-dropdown";
 import { AriaLabelOrAriaLabelledby } from "./types";
 export type ResponsiveTabItem = {
     /**
@@ -13,8 +15,32 @@ export type ResponsiveTabItem = {
      * The panel of the tab.
      */
     panel: React.ReactNode;
+    /**
+     * Optional test ID for e2e testing of the tab.
+     */
+    testId?: string;
 };
 type Props = AriaLabelOrAriaLabelledby & {
+    /**
+     * A unique id for the component.
+     *
+     * Here is how the id is used for the different elements in the component:
+     * - The root will have an id of `${id}`
+     *
+     * To set the id of the tabs or dropdown, set the `id` prop in the props:
+     * `tabsProps` or `dropdownProps`.
+     */
+    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 of `${testId}`
+     *
+     * To set the test id of the tabs or dropdown, set the `testId` prop in the props:
+     * `tabsProps` or `dropdownProps`.
+     */
+    testId?: string;
     /**
      * The tabs to render.
      */
@@ -31,6 +57,20 @@ type Props = AriaLabelOrAriaLabelledby & {
      * Called when the layout changes.
      */
     onLayoutChange?: (layout: "tabs" | "dropdown") => void;
+    /**
+     * Additional props to pass to the Tabs component when it is used.
+     *
+     * Note: This prop doesn't include the props that are available on the
+     * ResponsiveTabs component already.
+     */
+    tabsProps?: Omit<TabsProps, "tabs" | "selectedTabId" | "onTabSelected" | "aria-label" | "aria-labelledby">;
+    /**
+     * Additional props to pass to the TabsDropdown component when it is used.
+     *
+     * Note: This prop doesn't include the props that are available on the
+     * ResponsiveTabs component already.
+     */
+    dropdownProps?: Omit<TabsDropdownProps, "tabs" | "selectedTabId" | "onTabSelected" | "aria-label" | "aria-labelledby">;
 };
 /**
  * Renders the Tabs component when there is enough space to display the tabs as

package/dist/components/tabs-dropdown.d.ts

@@ -19,7 +19,7 @@ type TabDropdownItem = {
      */
     testId?: string;
 };
-type Props = AriaLabelOrAriaLabelledby & {
+export type TabsDropdownProps = AriaLabelOrAriaLabelledby & {
     /**
      * A unique id for the component. If not provided, a unique base id will be
      * generated automatically.
@@ -81,5 +81,5 @@ type Props = AriaLabelOrAriaLabelledby & {
  * in the ResponsiveTabs component. Please reach out to the WB team if there is
  * a need to use this component directly.
  */
-export declare const TabsDropdown: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export declare const TabsDropdown: React.ForwardRefExoticComponent<TabsDropdownProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/components/tabs.d.ts

@@ -37,7 +37,7 @@ export type TabItem = AriaProps & {
      */
     testId?: string;
 };
-type Props = {
+export type TabsProps = {
     /**
      * 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
@@ -131,5 +131,4 @@ type Props = {
  * For responsive cases where the tabs should switch to a dropdown when there is
  * not enough horizontal space, use the `ResponsiveTabs` component.
  */
-export declare const Tabs: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
-export {};
+export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;

package/dist/es/index.js

@@ -31,6 +31,6 @@ function getTabId(tabId){return `${tabId}-tab`}function getTabPanelId(tabId){ret
 
 const defaultLabels={defaultOpenerLabel:"Tabs"};const TabsDropdown=React.forwardRef((props,ref)=>{const{tabs,selectedTabId,onTabSelected,labels:labelsProp,opened,id:idProp,testId,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,styles:stylesProp}=props;const labels=React.useMemo(()=>{return {...defaultLabels,...labelsProp}},[labelsProp]);const generatedUniqueId=React.useId();const uniqueId=idProp??generatedUniqueId;const openerId=`${uniqueId}-opener`;const panelId=`${uniqueId}-panel`;const selectedTabItem=React.useMemo(()=>{return tabs.find(tab=>tab.id===selectedTabId)},[tabs,selectedTabId]);if(tabs.length===0){return jsx(React.Fragment,{})}const menuText=selectedTabItem?.label||labels.defaultOpenerLabel;return jsxs(View,{ref:ref,id:uniqueId,testId:testId,style:stylesProp?.root,role:"region","aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,children:[jsx(ActionMenu,{opened:opened,id:openerId,menuText:menuText,opener:()=>jsx(Button,{testId:testId?`${testId}-opener`:undefined,kind:"tertiary",endIcon:caretDown,style:[styles$1.opener,stylesProp?.opener],children:menuText}),style:[styles$1.actionMenu,stylesProp?.actionMenu],children:tabs.map(tab=>{return jsx(ActionItem,{label:tab.label,onClick:()=>{onTabSelected(tab.id);},active:tab.id===selectedTabId,testId:tab.testId,rightAccessory:tab.id===selectedTabId?jsx(PhosphorIcon,{icon:checkCircleIcon,size:"medium","aria-hidden":"true"}):undefined},tab.id)})}),jsx(View,{id:panelId,role:"group","aria-labelledby":openerId,testId:testId?`${testId}-panel`:undefined,children:selectedTabItem?.panel})]})});const styles$1=StyleSheet.create({actionMenu:{width:"100%",alignItems:"flex-start",borderBlockEnd:`${border.width.thin} solid ${semanticColor.core.border.neutral.subtle}`},opener:{position:"relative",height:"unset",paddingBlockStart:sizing.size_120,paddingBlockEnd:sizing.size_140,paddingInline:sizing.size_180,width:"100%",justifyContent:"space-between"}});
 
-const ResponsiveTabs=props=>{const{tabs,selectedTabId,onTabSelected,onLayoutChange,...ariaProps}=props;const[showDropdown,setShowDropdown]=React.useState(false);const tabsRef=React.useRef(null);const containerRef=React.useRef(null);const tabsWidthRef=React.useRef(null);const tabsSignature=React.useMemo(()=>tabs.map(t=>`${t.id}:${t.label}`).join("|"),[tabs]);const checkOverflow=React.useCallback(()=>{const container=containerRef.current;if(!container){return}if(!showDropdown&&tabsRef.current){const tablistWrapper=tabsRef.current.firstElementChild;if(tablistWrapper){const hasOverflow=tablistWrapper.scrollWidth>tablistWrapper.clientWidth;if(hasOverflow){tabsWidthRef.current=tablistWrapper.scrollWidth;setShowDropdown(true);}}}else if(showDropdown&&tabsWidthRef.current){const containerWidth=container.clientWidth;if(containerWidth>=tabsWidthRef.current){setShowDropdown(false);}}},[showDropdown,containerRef]);React.useEffect(()=>{if(showDropdown){tabsWidthRef.current=null;setShowDropdown(false);}else {checkOverflow();}},[tabsSignature]);React.useEffect(()=>{const container=containerRef.current;if(!container||!window.ResizeObserver){return}const resizeObserver=new ResizeObserver(()=>{checkOverflow();});resizeObserver.observe(container);return ()=>{resizeObserver.disconnect();}},[checkOverflow]);React.useEffect(()=>{onLayoutChange?.(showDropdown?"dropdown":"tabs");},[showDropdown,onLayoutChange]);return jsx("div",{ref:containerRef,style:{width:"100%"},children:showDropdown?createElement(TabsDropdown,{...ariaProps,key:"dropdown",tabs:tabs,selectedTabId:selectedTabId,onTabSelected:onTabSelected,styles:{root:styles.fadeIn}}):createElement(Tabs,{...ariaProps,key:"tabs",ref:tabsRef,tabs:tabs,selectedTabId:selectedTabId,onTabSelected:onTabSelected,styles:{root:[styles.fadeIn,{maxWidth:"100%",width:"100%"}]}})})};const fadeInKeyframes={from:{opacity:0},to:{opacity:1}};const styles=StyleSheet.create({fadeIn:{animationName:fadeInKeyframes,animationDuration:"150ms",animationTimingFunction:"ease-in-out"}});
+const ResponsiveTabs=props=>{const{tabs,selectedTabId,onTabSelected,onLayoutChange,id,testId,tabsProps,dropdownProps,...ariaProps}=props;const[showDropdown,setShowDropdown]=React.useState(false);const tabsRef=React.useRef(null);const containerRef=React.useRef(null);const tabsWidthRef=React.useRef(null);const tabsSignature=React.useMemo(()=>tabs.map(t=>`${t.id}:${t.label}`).join("|"),[tabs]);const checkOverflow=React.useCallback(()=>{const container=containerRef.current;if(!container){return}if(!showDropdown&&tabsRef.current){const tablistWrapper=tabsRef.current.firstElementChild;if(tablistWrapper){const hasOverflow=tablistWrapper.scrollWidth>tablistWrapper.clientWidth;if(hasOverflow){tabsWidthRef.current=tablistWrapper.scrollWidth;setShowDropdown(true);}}}else if(showDropdown&&tabsWidthRef.current){const containerWidth=container.clientWidth;if(containerWidth>=tabsWidthRef.current){setShowDropdown(false);}}},[showDropdown,containerRef]);React.useEffect(()=>{if(showDropdown){tabsWidthRef.current=null;setShowDropdown(false);}else {checkOverflow();}},[tabsSignature]);React.useEffect(()=>{const container=containerRef.current;if(!container||!window.ResizeObserver){return}const resizeObserver=new ResizeObserver(()=>{checkOverflow();});resizeObserver.observe(container);return ()=>{resizeObserver.disconnect();}},[checkOverflow]);React.useEffect(()=>{onLayoutChange?.(showDropdown?"dropdown":"tabs");},[showDropdown,onLayoutChange]);return jsx(View,{ref:containerRef,style:styles.container,id:id,testId:testId,children:showDropdown?createElement(TabsDropdown,{...dropdownProps,...ariaProps,key:"dropdown",tabs:tabs,selectedTabId:selectedTabId,onTabSelected:onTabSelected,styles:{root:styles.fadeIn}}):createElement(Tabs,{...tabsProps,...ariaProps,key:"tabs",ref:tabsRef,tabs:tabs,selectedTabId:selectedTabId,onTabSelected:onTabSelected,styles:{root:[styles.fadeIn,{maxWidth:"100%",width:"100%"}]}})})};const fadeInKeyframes={from:{opacity:0},to:{opacity:1}};const styles=StyleSheet.create({fadeIn:{animationName:fadeInKeyframes,animationDuration:"150ms",animationTimingFunction:"ease-in-out"},container:{width:"100%"}});
 
 export { NavigationTabItem, NavigationTabs, ResponsiveTabs, Tab, Tabs };

package/dist/index.js

@@ -59,7 +59,7 @@ function getTabId(tabId){return `${tabId}-tab`}function getTabPanelId(tabId){ret
 
 const defaultLabels={defaultOpenerLabel:"Tabs"};const TabsDropdown=React__namespace.forwardRef((props,ref)=>{const{tabs,selectedTabId,onTabSelected,labels:labelsProp,opened,id:idProp,testId,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,styles:stylesProp}=props;const labels=React__namespace.useMemo(()=>{return {...defaultLabels,...labelsProp}},[labelsProp]);const generatedUniqueId=React__namespace.useId();const uniqueId=idProp??generatedUniqueId;const openerId=`${uniqueId}-opener`;const panelId=`${uniqueId}-panel`;const selectedTabItem=React__namespace.useMemo(()=>{return tabs.find(tab=>tab.id===selectedTabId)},[tabs,selectedTabId]);if(tabs.length===0){return jsxRuntime.jsx(React__namespace.Fragment,{})}const menuText=selectedTabItem?.label||labels.defaultOpenerLabel;return jsxRuntime.jsxs(wonderBlocksCore.View,{ref:ref,id:uniqueId,testId:testId,style:stylesProp?.root,role:"region","aria-label":ariaLabel,"aria-labelledby":ariaLabelledby,children:[jsxRuntime.jsx(wonderBlocksDropdown.ActionMenu,{opened:opened,id:openerId,menuText:menuText,opener:()=>jsxRuntime.jsx(Button__default["default"],{testId:testId?`${testId}-opener`:undefined,kind:"tertiary",endIcon:caretDown__default["default"],style:[styles$1.opener,stylesProp?.opener],children:menuText}),style:[styles$1.actionMenu,stylesProp?.actionMenu],children:tabs.map(tab=>{return jsxRuntime.jsx(wonderBlocksDropdown.ActionItem,{label:tab.label,onClick:()=>{onTabSelected(tab.id);},active:tab.id===selectedTabId,testId:tab.testId,rightAccessory:tab.id===selectedTabId?jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:checkCircleIcon__default["default"],size:"medium","aria-hidden":"true"}):undefined},tab.id)})}),jsxRuntime.jsx(wonderBlocksCore.View,{id:panelId,role:"group","aria-labelledby":openerId,testId:testId?`${testId}-panel`:undefined,children:selectedTabItem?.panel})]})});const styles$1=aphrodite.StyleSheet.create({actionMenu:{width:"100%",alignItems:"flex-start",borderBlockEnd:`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`},opener:{position:"relative",height:"unset",paddingBlockStart:wonderBlocksTokens.sizing.size_120,paddingBlockEnd:wonderBlocksTokens.sizing.size_140,paddingInline:wonderBlocksTokens.sizing.size_180,width:"100%",justifyContent:"space-between"}});
 
-const ResponsiveTabs=props=>{const{tabs,selectedTabId,onTabSelected,onLayoutChange,...ariaProps}=props;const[showDropdown,setShowDropdown]=React__namespace.useState(false);const tabsRef=React__namespace.useRef(null);const containerRef=React__namespace.useRef(null);const tabsWidthRef=React__namespace.useRef(null);const tabsSignature=React__namespace.useMemo(()=>tabs.map(t=>`${t.id}:${t.label}`).join("|"),[tabs]);const checkOverflow=React__namespace.useCallback(()=>{const container=containerRef.current;if(!container){return}if(!showDropdown&&tabsRef.current){const tablistWrapper=tabsRef.current.firstElementChild;if(tablistWrapper){const hasOverflow=tablistWrapper.scrollWidth>tablistWrapper.clientWidth;if(hasOverflow){tabsWidthRef.current=tablistWrapper.scrollWidth;setShowDropdown(true);}}}else if(showDropdown&&tabsWidthRef.current){const containerWidth=container.clientWidth;if(containerWidth>=tabsWidthRef.current){setShowDropdown(false);}}},[showDropdown,containerRef]);React__namespace.useEffect(()=>{if(showDropdown){tabsWidthRef.current=null;setShowDropdown(false);}else {checkOverflow();}},[tabsSignature]);React__namespace.useEffect(()=>{const container=containerRef.current;if(!container||!window.ResizeObserver){return}const resizeObserver=new ResizeObserver(()=>{checkOverflow();});resizeObserver.observe(container);return ()=>{resizeObserver.disconnect();}},[checkOverflow]);React__namespace.useEffect(()=>{onLayoutChange?.(showDropdown?"dropdown":"tabs");},[showDropdown,onLayoutChange]);return jsxRuntime.jsx("div",{ref:containerRef,style:{width:"100%"},children:showDropdown?React.createElement(TabsDropdown,{...ariaProps,key:"dropdown",tabs:tabs,selectedTabId:selectedTabId,onTabSelected:onTabSelected,styles:{root:styles.fadeIn}}):React.createElement(Tabs,{...ariaProps,key:"tabs",ref:tabsRef,tabs:tabs,selectedTabId:selectedTabId,onTabSelected:onTabSelected,styles:{root:[styles.fadeIn,{maxWidth:"100%",width:"100%"}]}})})};const fadeInKeyframes={from:{opacity:0},to:{opacity:1}};const styles=aphrodite.StyleSheet.create({fadeIn:{animationName:fadeInKeyframes,animationDuration:"150ms",animationTimingFunction:"ease-in-out"}});
+const ResponsiveTabs=props=>{const{tabs,selectedTabId,onTabSelected,onLayoutChange,id,testId,tabsProps,dropdownProps,...ariaProps}=props;const[showDropdown,setShowDropdown]=React__namespace.useState(false);const tabsRef=React__namespace.useRef(null);const containerRef=React__namespace.useRef(null);const tabsWidthRef=React__namespace.useRef(null);const tabsSignature=React__namespace.useMemo(()=>tabs.map(t=>`${t.id}:${t.label}`).join("|"),[tabs]);const checkOverflow=React__namespace.useCallback(()=>{const container=containerRef.current;if(!container){return}if(!showDropdown&&tabsRef.current){const tablistWrapper=tabsRef.current.firstElementChild;if(tablistWrapper){const hasOverflow=tablistWrapper.scrollWidth>tablistWrapper.clientWidth;if(hasOverflow){tabsWidthRef.current=tablistWrapper.scrollWidth;setShowDropdown(true);}}}else if(showDropdown&&tabsWidthRef.current){const containerWidth=container.clientWidth;if(containerWidth>=tabsWidthRef.current){setShowDropdown(false);}}},[showDropdown,containerRef]);React__namespace.useEffect(()=>{if(showDropdown){tabsWidthRef.current=null;setShowDropdown(false);}else {checkOverflow();}},[tabsSignature]);React__namespace.useEffect(()=>{const container=containerRef.current;if(!container||!window.ResizeObserver){return}const resizeObserver=new ResizeObserver(()=>{checkOverflow();});resizeObserver.observe(container);return ()=>{resizeObserver.disconnect();}},[checkOverflow]);React__namespace.useEffect(()=>{onLayoutChange?.(showDropdown?"dropdown":"tabs");},[showDropdown,onLayoutChange]);return jsxRuntime.jsx(wonderBlocksCore.View,{ref:containerRef,style:styles.container,id:id,testId:testId,children:showDropdown?React.createElement(TabsDropdown,{...dropdownProps,...ariaProps,key:"dropdown",tabs:tabs,selectedTabId:selectedTabId,onTabSelected:onTabSelected,styles:{root:styles.fadeIn}}):React.createElement(Tabs,{...tabsProps,...ariaProps,key:"tabs",ref:tabsRef,tabs:tabs,selectedTabId:selectedTabId,onTabSelected:onTabSelected,styles:{root:[styles.fadeIn,{maxWidth:"100%",width:"100%"}]}})})};const fadeInKeyframes={from:{opacity:0},to:{opacity:1}};const styles=aphrodite.StyleSheet.create({fadeIn:{animationName:fadeInKeyframes,animationDuration:"150ms",animationTimingFunction:"ease-in-out"},container:{width:"100%"}});
 
 exports.NavigationTabItem = NavigationTabItem;
 exports.NavigationTabs = NavigationTabs;

package/package.json

@@ -3,7 +3,7 @@
   "description": "Tabs are used to control what content is shown",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "0.0.0-PR2913-20251217210125",
+  "version": "0.0.0-PR2913-20251218223804",
   "publishConfig": {
     "access": "public"
   },
@@ -22,11 +22,11 @@
   "dependencies": {
     "@phosphor-icons/core": "^2.0.2",
     "@khanacademy/wonder-blocks-button": "11.2.10",
+    "@khanacademy/wonder-blocks-dropdown": "10.6.1",
     "@khanacademy/wonder-blocks-core": "12.4.2",
     "@khanacademy/wonder-blocks-icon": "5.3.5",
-    "@khanacademy/wonder-blocks-typography": "4.2.27",
-    "@khanacademy/wonder-blocks-dropdown": "10.6.1",
-    "@khanacademy/wonder-blocks-tokens": "14.1.3"
+    "@khanacademy/wonder-blocks-tokens": "14.1.3",
+    "@khanacademy/wonder-blocks-typography": "4.2.27"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",