@workday/canvas-kit-docs 5.3.15 → 5.4.0-next.1

package/dist/mdx/react/_examples/examples/CookieBanner.tsx

@@ -0,0 +1,97 @@
+import * as React from 'react';
+
+import {createComponent, styled, StyledType} from '@workday/canvas-kit-react/common';
+import {colors, commonColors, depth, type, space} from '@workday/canvas-kit-react/tokens';
+import {PrimaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
+
+const CookieBannerItem = createComponent('div')({
+  displayName: 'CookieBanner.Item',
+  Component: ({isRow, ...elProps}: ItemProps, ref) => (
+    <BannerItem ref={ref} isRow={isRow} {...elProps} />
+  ),
+});
+
+const CookieBanner = createComponent('div')({
+  displayName: 'CookieBanner',
+  Component: (props: BannerProps, ref, Element) => <Banner ref={ref} as={Element} {...props} />,
+  subComponents: {Item: CookieBannerItem},
+});
+
+export default () => {
+  const DefaultNotice = `We use cookies to ensure that we give you the best experience on our website. 
+    If you continue without changing your settings, we'll assume that you are willing to receive cookies.`;
+
+  return (
+    <ExampleContainer>
+      <CookieBanner isClosed={false}>
+        <CookieBanner.Item>{DefaultNotice}</CookieBanner.Item>
+        <CookieBanner.Item isRow>
+          <TertiaryButton>Settings</TertiaryButton>
+          <PrimaryButton>Continue</PrimaryButton>
+        </CookieBanner.Item>
+      </CookieBanner>
+    </ExampleContainer>
+  );
+};
+
+interface BannerProps {
+  isClosed?: boolean;
+}
+
+interface ItemProps {
+  isRow?: boolean;
+}
+
+const ExampleContainer = styled('div')({
+  minHeight: 84,
+  margin: space.xs,
+  position: 'relative',
+});
+
+const Banner = styled('div')<BannerProps & StyledType>(
+  type.levels.subtext.medium,
+  {
+    backgroundColor: commonColors.background,
+    borderTop: `1px solid ${colors.soap400}`,
+    display: 'flex',
+    ...depth[1],
+    padding: space.m,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    zIndex: 99,
+    transition: 'transform 0.2s ease-out',
+    '@media (max-width: 450px)': {
+      flexDirection: 'column',
+      alignItems: 'stretch',
+      textAlign: 'center',
+      padding: `${space.s} 0`,
+    },
+  },
+  ({isClosed}) => isClosed && {transform: 'translateY(100%)'}
+);
+
+const BannerItem = styled('div')<ItemProps & StyledType>(
+  {
+    marginLeft: space.s,
+    marginRight: space.s,
+    '@media (max-width: 450px)': {
+      '&:not(:first-of-type)': {
+        marginTop: space.s,
+        '> *': {
+          flex: 1,
+        },
+      },
+    },
+  },
+  ({isRow}) =>
+    isRow && {
+      display: 'flex',
+      '> *': {
+        marginLeft: space.s,
+      },
+    }
+);

package/dist/mdx/react/_examples/examples/GlobalHeader.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import {styled, createComponent, dubLogoBlue} from '@workday/canvas-kit-react/common';
+import {colors, depth, space, type} from '@workday/canvas-kit-react/tokens';
+
+import {
+  notificationsIcon,
+  inboxIcon,
+  justifyIcon,
+  assistantIcon,
+} from '@workday/canvas-system-icons-web';
+
+import {IconButton, Hyperlink} from '@workday/canvas-kit-react/button';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+import {SearchForm, HStack, HStackProps, StackSpacing} from '@workday/canvas-kit-labs-react';
+
+interface HeaderItemProps extends Omit<HStackProps, 'spacing'> {
+  spacing?: StackSpacing;
+}
+
+export default () => (
+  <GlobalHeader>
+    <GlobalHeader.Item>
+      <IconButton aria-label="menu" icon={justifyIcon} />
+      <Hyperlink>
+        <WorkdayLogo dangerouslySetInnerHTML={{__html: dubLogoBlue}} />
+      </Hyperlink>
+    </GlobalHeader.Item>
+    <GlobalHeader.Item margin="auto" width="100%" maxWidth={`calc(${space.xxxl} * 6)`}>
+      <SearchForm onSubmit={() => 1} />
+    </GlobalHeader.Item>
+    <GlobalHeader.Item>
+      <IconButton aria-label="messages" icon={assistantIcon} />
+      <IconButton aria-label="notifications" icon={notificationsIcon} />
+      <IconButton aria-label="inbox" icon={inboxIcon} />
+      <Avatar size={Avatar.Size.m} variant={Avatar.Variant.Light} />
+    </GlobalHeader.Item>
+  </GlobalHeader>
+);
+
+const GlobalHeaderItem = createComponent('div')({
+  displayName: 'GlobalHeader.Item',
+  Component: ({spacing = 's', ...props}: HeaderItemProps, ref) => (
+    <HStack spacing={spacing} alignItems="center" marginX={space.xs} ref={ref} {...props} />
+  ),
+});
+
+const GlobalHeader = createComponent('header')({
+  displayName: 'GlobalHeader',
+  Component: (props, ref, Element) => <HeaderWrapper ref={ref} as={Element} {...props} />,
+  subComponents: {Item: GlobalHeaderItem},
+});
+
+const HeaderWrapper = styled('header')({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  boxSizing: 'border-box',
+  ...type.levels.subtext.large,
+  WebkitFontSmoothing: 'antialiased',
+  MozOsxFontSmoothing: 'grayscale',
+  backgroundColor: colors.frenchVanilla100,
+  ...depth[1],
+  padding: space.xxs,
+});
+
+const WorkdayLogo = styled('span')({lineHeight: 0});

package/dist/mdx/react/_examples/examples/PageHeader.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import {styled, createComponent} from '@workday/canvas-kit-react/common';
+
+import {colors, gradients, space, type} from '@workday/canvas-kit-react/tokens';
+
+import {HStack, HStackProps, StackSpacing} from '@workday/canvas-kit-labs-react';
+import {IconButton} from '@workday/canvas-kit-react/button';
+import {justifyIcon, notificationsIcon} from '@workday/canvas-system-icons-web';
+
+interface HeaderItemProps extends Omit<HStackProps, 'spacing'> {
+  spacing?: StackSpacing;
+}
+
+export default () => (
+  <PageHeader>
+    <PageHeader.Title>Page Header</PageHeader.Title>
+    <PageHeader.Item>
+      <IconButton aria-label="notifications" icon={notificationsIcon} variant="inverse" />
+      <IconButton aria-label="menu" icon={justifyIcon} variant="inverse" />
+    </PageHeader.Item>
+  </PageHeader>
+);
+
+const PageHeaderItem = createComponent('div')({
+  displayName: 'PageHeader.Item',
+  Component: ({spacing = 'xxs', ...props}: HeaderItemProps, ref, Element) => (
+    <HStack spacing={spacing} ref={ref} as={Element} {...props} />
+  ),
+});
+
+const PageHeaderTitle = createComponent('h2')({
+  displayName: 'PageHeader.Title',
+  Component: ({children, ...props}, ref, Element) => (
+    <Title ref={ref} as={Element} {...props}>
+      {children}
+    </Title>
+  ),
+});
+
+const PageHeader = createComponent('header')({
+  displayName: 'PageHeader',
+  Component: (props, ref, Element) => <Header ref={ref} as={Element} {...props} />,
+  subComponents: {Item: PageHeaderItem, Title: PageHeaderTitle},
+});
+
+const Header = styled('header')({
+  padding: `${space.xs} ${space.xl}`,
+  backgroundImage: gradients.blueberry,
+  color: colors.frenchVanilla100,
+  WebkitFontSmoothing: 'antialiased',
+  MozOsxFontSmoothing: 'grayscale',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+});
+
+const Title = styled('h2')({
+  ...type.levels.heading.medium,
+  color: colors.frenchVanilla100,
+  padding: `${space.xs} 0`,
+  margin: 0,
+  whiteSpace: 'nowrap',
+});

package/dist/mdx/react/button/button/Button.mdx

@@ -7,8 +7,11 @@ import {
 import {Specifications} from '@workday/canvas-kit-docs';
 
 import Primary from './examples/Primary';
+import PrimaryInverse from './examples/PrimaryInverse';
 import Secondary from './examples/Secondary';
+import SecondaryInverse from './examples/SecondaryInverse';
 import Tertiary from './examples/Tertiary';
+import TertiaryInverse from './examples/TertiaryInverse';
 import Delete from './examples/Delete';
 
 
@@ -35,8 +38,17 @@ Primary Buttons are high emphasis. Use once per screen to draw attention to the
 action. Multiple primary buttons make it confusing for the user to understand what action they
 should take. Not all screens require a Primary Button.
 
+Primary Buttons have four sizes: `extraSmall`, `small`, `medium`, and `large`. Icons are supported
+for every size and can be positioned to the `left` or `right` with the `iconPosition` prop.
+
 <ExampleCodeBlock code={Primary} />
 
+Primary Buttons also have an `inverse` variant. While it looks similar to the default Secondary
+Button, the default outline as well as the hover and focus states are different. Use this variant
+when you need to place a Primary Button on a dark or colorful background such as `blueberry400`.
+
+<ExampleCodeBlock code={PrimaryInverse} />
+
 #### Props
 
 Undocumented props are spread to the underlying `<button>` element.
@@ -49,10 +61,16 @@ Secondary Buttons have a medium level of emphasis. Use them for non-critical act
 Buttons can be used on most pages without restrictions and work well for multiple actions of equal
 weight. They can be used in conjunction with a Primary Button or independently.
 
-Use the `inverse` variants on dark or colorful backgrounds.
+Secondary Buttons have four sizes: `extraSmall`, `small`, `medium`, and `large`. Icons are supported
+for every size and can be positioned to the `left` or `right` with the `iconPosition` prop.
 
 <ExampleCodeBlock code={Secondary} />
 
+Secondary Buttons also have an `inverse` variant. Use this when you need to place a Secondary Button
+on a dark or colorful background such as `blueberry400`.
+
+<ExampleCodeBlock code={SecondaryInverse} />
+
 #### Props
 
 Undocumented props are spread to the underlying `<button>` element.
@@ -66,10 +84,16 @@ the user may not often be looking to do. Tertiary Buttons have lower prominence
 not visible until it is interacted with. Use Tertiary Buttons for supplemental actions such as “View
 More”, “Read More” or “Select a File”. Tertiary Buttons are frequently used on Cards.
 
-Use the `inverse` variants on dark or colorful backgrounds.
+Tertiary Buttons have three sizes: `extraSmall`, `small`, and `medium`. Icons are supported for
+every size and can be positioned to the `left` or `right` with the `iconPosition` prop.
 
 <ExampleCodeBlock code={Tertiary} />
 
+Tertiary Buttons also have an `inverse` variant. Use this when you need to place a Tertiary Button
+on a dark or colorful background such as `blueberry400`.
+
+<ExampleCodeBlock code={TertiaryInverse} />
+
 #### Props
 
 Undocumented props are spread to the underlying `<button>` element.

package/dist/mdx/react/button/button/examples/Primary.tsx

@@ -1,5 +1,14 @@
 import React from 'react';
 
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {plusIcon} from '@workday/canvas-system-icons-web';
 
-export default () => <PrimaryButton>Click Me</PrimaryButton>;
+export default () => (
+  <HStack spacing="s" padding="s">
+    <PrimaryButton>Primary</PrimaryButton>
+    <PrimaryButton icon={plusIcon} iconPosition="right">
+      Primary
+    </PrimaryButton>
+  </HStack>
+);

package/dist/mdx/react/button/button/examples/PrimaryInverse.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {plusIcon} from '@workday/canvas-system-icons-web';
+
+export default () => (
+  <HStack spacing="s" backgroundColor="blueberry400" padding="s">
+    <PrimaryButton variant="inverse">Primary</PrimaryButton>
+    <PrimaryButton icon={plusIcon} iconPosition="right" variant="inverse">
+      Primary
+    </PrimaryButton>
+  </HStack>
+);

package/dist/mdx/react/button/button/examples/Secondary.tsx

@@ -1,5 +1,14 @@
 import React from 'react';
 
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {plusIcon} from '@workday/canvas-system-icons-web';
 
-export default () => <SecondaryButton>Click Me</SecondaryButton>;
+export default () => (
+  <HStack spacing="s" padding="s">
+    <SecondaryButton>Secondary</SecondaryButton>
+    <SecondaryButton icon={plusIcon} iconPosition="right">
+      Secondary
+    </SecondaryButton>
+  </HStack>
+);

package/dist/mdx/react/button/button/examples/SecondaryInverse.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {plusIcon} from '@workday/canvas-system-icons-web';
+
+export default () => (
+  <HStack spacing="s" backgroundColor="blueberry400" padding="s">
+    <SecondaryButton variant="inverse">Secondary</SecondaryButton>
+    <SecondaryButton icon={plusIcon} iconPosition="right" variant="inverse">
+      Secondary
+    </SecondaryButton>
+  </HStack>
+);

package/dist/mdx/react/button/button/examples/Tertiary.tsx

@@ -1,5 +1,17 @@
 import React from 'react';
 
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
+import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {plusIcon} from '@workday/canvas-system-icons-web';
 
-export default () => <TertiaryButton>Click Me</TertiaryButton>;
+export default () => (
+  <HStack spacing="s" padding="s">
+    <TertiaryButton>Tertiary</TertiaryButton>
+    <TertiaryButton icon={plusIcon} iconPosition="right">
+      Tertiary
+    </TertiaryButton>
+    <TertiaryButton icon={plusIcon} iconPosition="right" disabled>
+      Tertiary
+    </TertiaryButton>
+  </HStack>
+);

package/dist/mdx/react/button/button/examples/TertiaryInverse.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {TertiaryButton} from '@workday/canvas-kit-react/button';
+import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {plusIcon} from '@workday/canvas-system-icons-web';
+
+export default () => (
+  <HStack spacing="s" backgroundColor="blueberry400" padding="s">
+    <TertiaryButton variant="inverse">Tertiary</TertiaryButton>
+    <TertiaryButton icon={plusIcon} iconPosition="right" variant="inverse">
+      Tertiary
+    </TertiaryButton>
+  </HStack>
+);

package/dist/mdx/react/popup/examples/FocusRedirect.tsx

@@ -49,7 +49,8 @@ export default () => {
               <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
                 Delete
               </Popup.CloseButton>
-              <Popup.CloseButton>Cancel</Popup.CloseButton>
+              {/* Disabled elements should not be focusable and focus should move to the next focusable element */}
+              <Popup.CloseButton disabled>Cancel</Popup.CloseButton>
             </HStack>
           </Popup.Card>
         </Popup.Popper>

package/dist/mdx/react/tabs/Tabs.mdx

@@ -2,9 +2,11 @@ import {Tabs} from '@workday/canvas-kit-react/tabs';
 import {Specifications} from '@workday/canvas-kit-docs';
 
 import Basic from './examples/Basic';
-import NamedKeys from './examples/NamedKeys';
+import NamedTabs from './examples/NamedTabs';
 import RightToLeft from './examples/RightToLeft';
+import OverflowTabs from './examples/OverflowTabs';
 import DisabledTab from './examples/DisabledTab';
+import Icons from './examples/Icons';
 import SinglePanel from './examples/SinglePanel';
 import AlternativeTabStop from './examples/AlternativeTabStop';
 import HoistedModel from './examples/HoistedModel';
@@ -38,10 +40,26 @@ yarn add @workday/canvas-kit-react
 in a variety of ways: `Tabs.List`, `Tabs.Item` and `Tabs.Panel`. It follows the
 [W3 Tabs specification](https://www.w3.org/TR/wai-aria-practices/#tabpanel).
 
-In this example, we set up a basic `Tabs` component with five tabs.
+In this example, we set up a basic `Tabs` component with five tabs. This example uses a static API
+that does not support overflow.
 
 <ExampleCodeBlock code={Basic} />
 
+### Overflow Tabs
+
+Tabs is a responsive component based on the width of its container. If the rendered tabs exceed the
+width of the `Tabs.List`, an overflow menu will be rendered. This only works against the dynamic API
+where you give the `TabsModel` an array of items to be rendered. The dynamic API handles the React
+`key` for you based on the item's identifier. The dynamic API requires either an `id` on each item
+object or a `getId` function that returns an identifier based on the item. The below example uses an
+`id` property on each item.
+
+The dynamic API takes in any object, but since nothing is known about your object, a
+[render prop](https://reactjs.org/docs/render-props.html) is necessary to instruct a list how it
+should render.
+
+<ExampleCodeBlock code={OverflowTabs} />
+
 ### Hoisted Model
 
 By default, `Tabs` will create and use its own [model](#model) internally. Alternatively, you may
@@ -55,13 +73,13 @@ trigger an event to change the active tab.
 
 <ExampleCodeBlock code={HoistedModel} />
 
-### Named Keys
+### Named Tabs
 
 `Tabs.Item` and `Tabs.Panel` both take an optional `name` attribute that is used for the
-`onActivate` callback. This example is identical to the Basic Example, but with named keys for the
+`onActivate` callback. This example is identical to the Basic Example, but with named tabs for the
 `Tabs.Item` and `Tabs.Panel` subcomponents.
 
-<ExampleCodeBlock code={NamedKeys} />
+<ExampleCodeBlock code={NamedTabs} />
 
 ### Right-to-Left (RTL)
 
@@ -75,6 +93,14 @@ Set the `disabled` prop of a `Tabs.Item` to `true` to disable it.
 
 <ExampleCodeBlock code={DisabledTab} />
 
+### Tab Icons
+
+Tabs can have icons. You must set `hasIcon` on the `Tabs.Item` and use the `Icon` and `Text`
+subcomponent. The `hasIcon` changes the `Tabs.Item` to change where overflow detection is from the
+`Tabs.Item` element to the `Tabs.Item.Text` element.
+
+<ExampleCodeBlock code={Icons} />
+
 ### Alternative Tab Stop
 
 By default, tab panels are focusable for accessibility. If the contents of a tab panel have a

package/dist/mdx/react/tabs/examples/DisabledTab.tsx

@@ -8,7 +8,7 @@ export default () => {
     <Tabs>
       <Tabs.List>
         <Tabs.Item>First Tab</Tabs.Item>
-        <Tabs.Item disabled>Disabled Tab</Tabs.Item>
+        <Tabs.Item aria-disabled>Disabled Tab</Tabs.Item>
         <Tabs.Item>Third Tab</Tabs.Item>
       </Tabs.List>
       <div style={{marginTop: space.m}}>

package/dist/mdx/react/tabs/examples/DynamicTabs.tsx

@@ -1,60 +1,104 @@
 import React from 'react';
 import {space} from '@workday/canvas-kit-react/tokens';
 
-import {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';
+import {Tabs, useTabsModel, TabsModel} from '@workday/canvas-kit-react/tabs';
+import {SelectionModel} from '../../lib/selection';
+
+type Tab = {
+  tab: string;
+  id: string;
+};
 
 export default () => {
-  const [tabs, setTabs] = React.useState([
-    {tab: 'Tab 1', name: 'tab-1'},
-    {tab: 'Tab 2', name: 'tab-2'},
-    {tab: 'Tab 3', name: 'tab-3'},
+  const [tabs, setTabs] = React.useState<Tab[]>([
+    {tab: 'Tab 1', id: 'tab-1'},
+    {tab: 'Tab 2', id: 'tab-2'},
+    {tab: 'Tab 3', id: 'tab-3'},
+    {tab: 'Add Tab', id: 'add'},
   ]);
-  const addedRef = React.useRef(tabs.length);
+  const addedRef = React.useRef(tabs.length - 1);
   const model = useTabsModel({
-    shouldActivate: ({data}) => data.tab !== 'last',
+    items: tabs,
+    shouldSelect: ({data}) => data.id !== 'add',
   });
 
-  const onKeyDown = (e: React.KeyboardEvent<HTMLElement>, name: string) => {
-    if (e.key === 'Backspace') {
-      setTabs(tabs.filter(item => item.name !== name));
+  // A ref of the model for the render functions to work around the caching done to lists
+  const modelRef = React.useRef(model);
+  modelRef.current = model;
+
+  /**
+   * Helper function that should be called when an item is programmatically removed. The following
+   * side effects depend on state of the model:
+   * * **Item is focused**: Focus will be moved to next item in the list
+   * * **Item is selected**: Selection will be moved to the next item in the list
+   * @param id The id of the item that will be removed
+   */
+  const removeItem = <T extends unknown>(id: string, model: SelectionModel<T>) => {
+    const index = model.state.items.findIndex(item => model.getId(item) === model.state.cursorId);
+    console.log('index', index, id, model.state.cursorId, model.state.items);
+    const nextIndex = index === model.state.items.length - 1 ? index - 1 : index + 1;
+    const nextId = model.getId(model.state.items[nextIndex]);
+    if (model.state.selectedIds[0] === id) {
+      // We're removing the currently selected item. Select next item
+      model.events.select({id: nextId});
+    }
+    if (model.state.cursorId === id) {
+      // We're removing the currently focused item. Focus next item
+      model.events.goTo({id: nextId});
+
+      // wait for stabilization of state
+      requestAnimationFrame(() => {
+        document.querySelector<HTMLElement>(`#${model.state.id}-${nextId}`)?.focus();
+      });
+    }
+  };
+
+  const onKeyDown = (id: string) => (e: React.KeyboardEvent<HTMLElement>) => {
+    if (e.key === 'Delete' && id !== 'add') {
+      setTabs(tabs.filter(item => item.id !== id));
+      const model = modelRef.current;
+      removeItem(id, model);
+    }
+  };
+
+  const onClick = (id: string) => (e: React.MouseEvent) => {
+    if (id === 'add') {
+      addedRef.current += 1;
+      setTabs(tabs => {
+        const newTabs = tabs.slice(0, tabs.length - 1);
+        const addTab = tabs.slice(-1);
+        return newTabs.concat(
+          {tab: `Tab ${addedRef.current}`, id: `tab-${addedRef.current}`},
+          addTab
+        );
+      });
+      model.events.goTo({id: 'add'});
     }
   };
 
   return (
     <Tabs model={model}>
-      <Tabs.List>
-        {tabs.map((item, index) => (
-          <Tabs.Item
-            key={item.name}
-            name={item.name}
-            index={index}
-            onKeyDown={e => onKeyDown(e, item.name)}
-          >
+      <Tabs.List overflowButton={<Tabs.OverflowButton>More</Tabs.OverflowButton>}>
+        {(item: Tab) => (
+          <Tabs.Item name={item.id} onKeyDown={onKeyDown(item.id)} onClick={onClick(item.id)}>
             {item.tab}
           </Tabs.Item>
-        ))}
-        <Tabs.Item
-          key={'last'}
-          index={tabs.length}
-          name={'last'}
-          onClick={() => {
-            addedRef.current += 1;
-            setTabs(tabs =>
-              tabs.concat({tab: `Tab ${addedRef.current}`, name: `tab-${addedRef.current}`})
-            );
-            model.events.goTo({id: 'last'});
-          }}
-        >
-          Add Tab
-        </Tabs.Item>
+        )}
       </Tabs.List>
-      <div style={{marginTop: space.m}}>
-        {tabs.map((item, index) => (
-          <Tabs.Panel key={item.name} name={item.name}>
+      <Tabs.Menu.Popper>
+        <Tabs.Menu.Card maxWidth={300} maxHeight={200}>
+          <Tabs.Menu.List>
+            {(item: Tab) => <Tabs.Menu.Item name={item.id}>{item.tab}</Tabs.Menu.Item>}
+          </Tabs.Menu.List>
+        </Tabs.Menu.Card>
+      </Tabs.Menu.Popper>
+      <Tabs.Panels>
+        {(item: Tab) => (
+          <Tabs.Panel marginTop="m" name={item.id}>
             Contents of {item.tab}
           </Tabs.Panel>
-        ))}
-      </div>
+        )}
+      </Tabs.Panels>
     </Tabs>
   );
 };

package/dist/mdx/react/tabs/examples/HoistedModel.tsx

@@ -6,8 +6,8 @@ import {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';
 
 export default () => {
   const model = useTabsModel({
-    onActivate({data, prevState}) {
-      console.log('Activated Tab', data, prevState);
+    onSelect({data, prevState}) {
+      console.log('Selected Tab', data, prevState);
     },
   });
 
@@ -27,10 +27,10 @@ export default () => {
       </Tabs>
       <SecondaryButton
         onClick={() => {
-          model.events.activate({tab: 'third'});
+          model.events.select({id: 'third'});
         }}
       >
-        Activate Third Tab
+        Select Third Tab
       </SecondaryButton>
     </>
   );