@khanacademy/wonder-blocks-tabs 0.0.0-PR2905-20251212174807 → 0.0.0-PR2906-20251212234252

package/CHANGELOG.md

@@ -1,6 +1,10 @@
 # @khanacademy/wonder-blocks-tabs
 
-## 0.0.0-PR2905-20251212174807
+## 0.0.0-PR2906-20251212234252
+
+### Minor Changes
+
+- bf01dea: Adds TabsDropdown component
 
 ### Patch Changes
 

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

@@ -0,0 +1,85 @@
+import * as React from "react";
+import { StyleType } from "@khanacademy/wonder-blocks-core";
+import { AriaLabelOrAriaLabelledby } from "./types";
+type TabDropdownItem = {
+    /**
+     * The label of the tab
+     */
+    label: string;
+    /**
+     * The id of the tab
+     */
+    id: string;
+    /**
+     * The contents for the tab
+     */
+    panel: React.ReactNode;
+    /**
+     * Optional test ID for e2e testing of the menu item.
+     */
+    testId?: string;
+};
+type Props = AriaLabelOrAriaLabelledby & {
+    /**
+     * A unique id for the component. If not provided, a unique base id will be
+     * generated automatically.
+     *
+     * Here is how the id is used for the different elements in the component:
+     * - The root will have an id of `${id}`
+     * - The opener will have an id of `${id}-opener`
+     * - The panel will have an id of `${id}-panel`
+     */
+    id?: string;
+    /**
+     * Optional test ID for e2e testing.
+     *
+     * Here is how the testId is used for the different elements in the component:
+     * - The root will have a testId of `${testId}`
+     * - The opener will have a testId of `${testId}-opener`
+     * - The panel will have a testId of `${testId}-panel`
+     */
+    testId?: string;
+    /**
+     * The tabs to render in the dropdown.
+     */
+    tabs: Array<TabDropdownItem>;
+    /**
+     * The id of the tab that is selected.
+     *
+     * If the selectedTabId is not valid, the `labels.defaultOpenerLabel` will
+     * be used to label the dropdown opener.
+     */
+    selectedTabId: string;
+    /**
+     * Called when a tab is selected.
+     */
+    onTabSelected: (id: string) => unknown;
+    /**
+     * Labels for the dropdown.
+     */
+    labels?: {
+        defaultOpenerLabel?: string;
+    };
+    /**
+     * Can be used to override the opened state for the dropdown
+     */
+    opened?: boolean;
+    /**
+     * Styling for the tabs dropdown.
+     */
+    styles?: {
+        root?: StyleType;
+        actionMenu?: StyleType;
+        opener?: StyleType;
+    };
+};
+/**
+ * The TabsDropdown component is used to represent tabs in an ActionMenu when
+ * there is not enough horizontal space to render the tabs as a horizontal layout.
+ *
+ * Note: This component is meant to be used internally to address responsiveness
+ * 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 {};

package/dist/components/tabs.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { AriaProps, PropsFor, StyleType } from "@khanacademy/wonder-blocks-core";
 import { Tab } from "./tab";
+import { AriaLabelOrAriaLabelledby } from "./types";
 export type TabRenderProps = Omit<PropsFor<typeof Tab>, "children">;
 export type TabItem = AriaProps & {
     /**
@@ -36,24 +37,6 @@ export type TabItem = AriaProps & {
      */
     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

package/dist/components/types.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Type to help ensure aria-label or aria-labelledby is set.
+ */
+export 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;
+};

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-PR2905-20251212174807",
+  "version": "0.0.0-PR2906-20251212234252",
   "publishConfig": {
     "access": "public"
   },
@@ -20,8 +20,12 @@
   "module": "dist/es/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
+    "@phosphor-icons/core": "^2.0.2",
+    "@khanacademy/wonder-blocks-button": "11.2.10",
     "@khanacademy/wonder-blocks-core": "12.4.2",
+    "@khanacademy/wonder-blocks-dropdown": "10.6.0",
     "@khanacademy/wonder-blocks-tokens": "14.1.3",
+    "@khanacademy/wonder-blocks-icon": "5.3.5",
     "@khanacademy/wonder-blocks-typography": "4.2.27"
   },
   "peerDependencies": {