@workday/canvas-kit-react 5.3.0 → 5.3.4

package/dist/es6/tooltip/lib/useTooltip.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
  * Convenience hook for creating components with tooltips. It will return an object of properties to mix
  * into a target, popper and tooltip
  */
-export declare function useTooltip<T extends Element = Element>({ type, titleText, }?: {
+export declare function useTooltip<T extends Element = Element>({ type, titleText, showDelay, hideDelay, }?: {
     /**
      * Determines the tooltip type for accessibility.
      *
@@ -25,6 +25,14 @@ export declare function useTooltip<T extends Element = Element>({ type, titleTex
      * The content of the `aria-label` if `type` is `label.
      */
     titleText?: string;
+    /**
+     * Amount of time (in ms) to delay before showing the tooltip
+     */
+    showDelay?: number;
+    /**
+     * Amount of time (in ms) to delay before hiding the tooltip
+     */
+    hideDelay?: number;
 }): {
     /** Mix these properties into the target element. **Must be an Element** */
     targetProps: {
@@ -33,7 +41,7 @@ export declare function useTooltip<T extends Element = Element>({ type, titleTex
         onMouseEnter: (event: React.SyntheticEvent<Element, Event>) => void;
         onMouseLeave: () => void;
         onMouseDown: (event: React.MouseEvent<Element, MouseEvent>) => void;
-        onFocus: (event: React.FocusEvent<Element, Element>) => void;
+        onFocus: (event: React.FocusEvent<Element>) => void;
         onBlur: () => void;
     };
     /** Mix these properties into the `Popper` component */

package/dist/es6/tooltip/lib/useTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/useTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiD/B;;;GAGG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,EAAE,EACtD,IAAc,EACd,SAAc,GACf,GAAE;IACD;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACf;IAuCF,2EAA2E;;;;;;;;;;IAY3E,uDAAuD;;;;;;IAMvD,iEAAiE;;;;;;;EAQpE"}
+{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/useTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiD/B;;;GAGG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,EAAE,EACtD,IAAc,EACd,SAAc,EACd,SAAe,EACf,SAAe,GAChB,GAAE;IACD;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACf;IA4CF,2EAA2E;;;;;;;;;;IAY3E,uDAAuD;;;;;;IAMvD,iEAAiE;;;;;;;EAQpE"}

package/dist/es6/tooltip/lib/useTooltip.js

@@ -41,15 +41,20 @@ var isInteractiveElement = function (element) {
  * into a target, popper and tooltip
  */
 export function useTooltip(_a) {
-    var _b = _a === void 0 ? {} : _a, _c = _b.type, type = _c === void 0 ? 'label' : _c, _d = _b.titleText, titleText = _d === void 0 ? '' : _d;
+    var _b = _a === void 0 ? {} : _a, _c = _b.type, type = _c === void 0 ? 'label' : _c, _d = _b.titleText, titleText = _d === void 0 ? '' : _d, _e = _b.showDelay, showDelay = _e === void 0 ? 300 : _e, _f = _b.hideDelay, hideDelay = _f === void 0 ? 100 : _f;
     var mouseDownRef = React.useRef(false); // use to prevent newly focused from making tooltip flash
     var popupModel = usePopupModel();
-    var _e = React.useState(null), anchorElement = _e[0], setAnchorElement = _e[1];
+    var _g = React.useState(null), anchorElement = _g[0], setAnchorElement = _g[1];
     var id = React.useState(function () { return uuid(); })[0];
-    var intentTimer = useIntentTimer(popupModel.events.hide, 100);
+    var intentTimerHide = useIntentTimer(popupModel.events.hide, hideDelay);
+    var intentTimerShow = useIntentTimer(popupModel.events.show, showDelay);
+    var onHide = function () {
+        intentTimerHide.start();
+        intentTimerShow.clear();
+    };
     var onOpen = function () {
-        popupModel.events.show();
-        intentTimer.clear();
+        intentTimerShow.start();
+        intentTimerHide.clear();
     };
     var onOpenFromTarget = function (event) {
         setAnchorElement(event.currentTarget);
@@ -78,10 +83,10 @@ export function useTooltip(_a) {
             // This will replace the accessible name of the target element
             'aria-label': type === 'label' ? titleText : undefined,
             onMouseEnter: onOpenFromTarget,
-            onMouseLeave: intentTimer.start,
+            onMouseLeave: onHide,
             onMouseDown: onMouseDown,
             onFocus: onFocus,
-            onBlur: intentTimer.start,
+            onBlur: onHide,
         },
         /** Mix these properties into the `Popper` component */
         popperProps: {
@@ -94,7 +99,7 @@ export function useTooltip(_a) {
             id: type === 'describe' && visible ? id : undefined,
             role: 'tooltip',
             onMouseEnter: onOpen,
-            onMouseLeave: intentTimer.start,
+            onMouseLeave: onHide,
         },
     };
 }

package/loading-animation/lib/LoadingDots.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {keyframes} from '@emotion/core';
-import styled from '@emotion/styled';
 import canvas, {borderRadius} from '@workday/canvas-kit-react/tokens';
+import {styled} from '@workday/canvas-kit-react/common';
 
 /**
  * Keyframe for the dots loading animation.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "5.3.0",
+  "version": "5.3.4",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -56,9 +56,10 @@
     "@emotion/styled": "^10.0.27",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-labs-react": "^5.3.0",
-    "@workday/canvas-kit-popup-stack": "^5.3.0",
-    "@workday/canvas-kit-preview-react": "^5.3.0",
+    "@workday/canvas-depth-web": "^0.16.4",
+    "@workday/canvas-kit-labs-react": "^5.3.4",
+    "@workday/canvas-kit-popup-stack": "^5.3.4",
+    "@workday/canvas-kit-preview-react": "^5.3.4",
     "@workday/canvas-system-icons-web": "1.0.41",
     "@workday/design-assets-types": "^0.2.4",
     "chroma-js": "^2.1.0",
@@ -67,14 +68,12 @@
     "lodash": "^4.17.14",
     "polished": "^4.1.3",
     "react-innertext": "^1.1.5",
-    "resize-observer-polyfill": "^1.5.1",
     "rtl-css-js": "^1.14.1",
-    "use-resize-observer": "~7.0.1",
     "uuid": "^3.3.3"
   },
   "devDependencies": {
     "@workday/canvas-accent-icons-web": "^1.0.0",
     "@workday/canvas-applet-icons-web": "^0.17.50"
   },
-  "gitHead": "0cf3030eb73935b5679f8c9bb79fb6178a721a4a"
+  "gitHead": "4816e7af5053c69d3dc6f302d0205b4259ffe943"
 }

package/page-header/README.md

@@ -1,9 +1,4 @@
-# Canvas Kit Page Header (Deprecated)
-
-> Note: As of Canvas Kit v6, PageHeader is being soft-deprecated. It will be hard-deprecated
-> (completely removed) in v7. Please see the
-> [migration guide](https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page)
-> for more information.
+# Canvas Kit Page Header
 
 A Canvas component that displays the header of a specific page within a website or application. It
 is generally used as a sub-header to the main application header
@@ -21,19 +16,19 @@ yarn add @workday/canvas-kit-react
 
 ```tsx
 import * as React from 'react';
-import {DeprecatedPageHeader} from '@workday/canvas-kit-react/page-header';
+import {PageHeader} from '@workday/canvas-kit-react/page-header';
 import {IconButton} from '@workday/canvas-kit-react/button';
 import {exportIcon, fullscreenIcon} from '@workday/canvas-system-icons-web';
 
-<DeprecatedPageHeader title="Product">
+<PageHeader title="Product">
   <IconButton icon={exportIcon} />
   <IconButton icon={fullscreenIcon} />
-</DeprecatedPageHeader>
+</PageHeader>
 
-<DeprecatedPageHeader title="With Cap Width" capWidth={true}>
+<PageHeader title="With Cap Width" capWidth={true}>
   <IconButton icon={exportIcon} />
   <IconButton icon={fullscreenIcon} />
-</DeprecatedPageHeader>
+</PageHeader>
 ```
 
 ## Static Properties

package/page-header/index.ts

@@ -1,5 +1,5 @@
-import DeprecatedPageHeader from './lib/PageHeader';
+import PageHeader from './lib/PageHeader';
 
-export default DeprecatedPageHeader;
-export {DeprecatedPageHeader};
+export default PageHeader;
+export {PageHeader};
 export * from './lib/PageHeader';

package/page-header/lib/PageHeader.tsx

@@ -3,15 +3,7 @@ import styled from '@emotion/styled';
 import {colors, gradients, space, type} from '@workday/canvas-kit-react/tokens';
 import {IconButton, IconButtonProps} from '@workday/canvas-kit-react/button';
 
-/**
- * ### Deprecated Page Header Props
- *
- * As of Canvas Kit v6, PageHeader is being soft-deprecated.
- * It will be hard-deprecated (completely removed) in v7. Please see the
- * [migration guide](https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page)
- * for more information.
- */
-export interface DeprecatedPageHeaderProps {
+export interface PageHeaderProps {
   /**
    * The text of the PageHeader title.
    */
@@ -36,7 +28,7 @@ const Header = styled('header')({
   MozOsxFontSmoothing: 'grayscale',
 });
 
-const Container = styled('div')<Pick<DeprecatedPageHeaderProps, 'breakpoint' | 'capWidth'>>(
+const Container = styled('div')<Pick<PageHeaderProps, 'breakpoint' | 'capWidth'>>(
   {
     display: 'flex',
     alignItems: 'center',
@@ -76,24 +68,7 @@ const IconList = styled('div')({
   },
 });
 
-/**
- * ### Deprecated Page Header
- *
- * As of Canvas Kit v6, this component is being soft-deprecated.
- * It will be hard-deprecated (completely removed) in v7. Please see the
- * [migration guide](https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page)
- * for more information.
- */
-export default class DeprecatedPageHeader extends React.Component<DeprecatedPageHeaderProps> {
-  componentDidMount() {
-    console.warn(
-      `This component is being deprecated and will be removed in Canvas Kit V7.\n
-      For more information, please see the V6 migration guide:\n
-      https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page
-      `
-    );
-  }
-
+export default class PageHeader extends React.Component<PageHeaderProps> {
   private renderChildren(children: React.ReactNode): React.ReactNode {
     return React.Children.map(children, child => {
       if (!React.isValidElement(child)) {

package/popup/lib/PopupCard.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {keyframes} from '@emotion/core';
 
 import {Card} from '@workday/canvas-kit-react/card';
-import {space, type} from '@workday/canvas-kit-react/tokens';
+import {space} from '@workday/canvas-kit-react/tokens';
 import {
   styled,
   TransformOrigin,
@@ -43,7 +43,6 @@ const popupAnimation = (transformOrigin: TransformOrigin) => {
 const StyledPopupCard = styled(Card)<
   StyledType & {width?: number | string; transformOrigin?: TransformOrigin}
 >(
-  type.levels.subtext.large,
   {
     position: 'relative',
     maxWidth: `calc(100vw - ${space.l})`,
@@ -88,7 +87,7 @@ export const PopupCard = createComponent('div')({
         padding={padding}
         {...props}
       >
-        {children}
+        <Card.Body>{children}</Card.Body>
       </StyledPopupCard>
     );
   },

package/tabs/index.ts

@@ -1,8 +1,2 @@
 export * from './lib/Tabs';
 export * from './lib/useTabsModel';
-
-export {StyledTabItem, useTabsItem} from './lib/TabsItem';
-export {useTabsList} from './lib/TabsList';
-export {useTabsMenuPopper} from './lib/TabsMenuPopper';
-export {useTabsOverflowButton} from './lib/TabsOverflowButton';
-export {useTabsPanel} from './lib/TabsPanel';

package/tabs/lib/Tab.tsx

@@ -0,0 +1,170 @@
+import * as React from 'react';
+
+import {colors, space, type, borderRadius} from '@workday/canvas-kit-react/tokens';
+import {
+  createComponent,
+  focusRing,
+  hideMouseFocus,
+  mergeProps,
+  styled,
+  StyledType,
+  useLocalRef,
+  useModelContext,
+} from '@workday/canvas-kit-react/common';
+
+import {TabsModelContext} from './Tabs';
+import {TabsModel} from './useTabsModel';
+import {useRegisterItem} from './list';
+import {useRovingFocusItem} from './cursor';
+
+export interface TabProps {
+  /**
+   * Optionally pass index to tab item. This should be done if `Tabs.Item` components were created
+   * via a `Array::map` function. This index will ensure keyboard navigation works even if items are
+   * inserted out of order.
+   */
+  index?: number;
+  /**
+   * The label text of the Tab.
+   */
+  children: React.ReactNode;
+  /**
+   * The name of the tab. This name will be used in change events and for `initialTab`. Must match
+   * the `name` of the associated tab panel. If this property is not provided, it will default to a
+   * string representation of the the zero-based index of the Tab when it was initialized.
+   */
+  name?: string;
+  /**
+   * Optionally pass a model directly to this component. Default is to implicitly use the same
+   * model as the container component which uses React context. Only use this for advanced use-cases
+   */
+  model?: TabsModel;
+  /**
+   * Optional id. If not set, it will inherit the ID passed to the `Tabs` component and append the
+   * index at the end. Only set this for advanced cases.
+   */
+  id?: string;
+  /**
+   * Part of the ARIA specification for tabs. This attributes links a `role=tab` to a
+   * `role=tabpanel`. This value must be the same as the associated `id` attribute of the tab panel.
+   * This is automatically set by the component and should only be used in advanced cases.
+   */
+  'aria-controls'?: string;
+  /**
+   * Part of the ARIA specification for tabs. Lets screen readers know which tab is active. This
+   * should either be `true` or `undefined` and never `false`. This is automatically set by the
+   * component and should only be used in advanced cases.
+   */
+  'aria-selected'?: boolean;
+  /**
+   * Part of the ARIA specification for tabs. The currently active tab should not have a `tabIndex` set while
+   * all inactive tabs should have a `tabIndex={-1}`
+   */
+  tabIndex?: number;
+}
+
+const StyledButton = styled('button')<{isSelected: boolean} & StyledType>({
+  ...type.levels.subtext.large,
+  fontWeight: type.properties.fontWeights.medium,
+  border: 'none',
+  backgroundColor: 'transparent',
+  flex: '0 0 auto',
+  maxWidth: '280px',
+  padding: space.s,
+  boxSizing: 'border-box',
+  cursor: 'pointer',
+  color: colors.licorice300,
+  position: 'relative',
+  marginLeft: `${space.xxxs}`,
+  borderRadius: `${borderRadius.m} ${borderRadius.m} 0px 0px`,
+  transition: 'background 150ms ease, color 150ms ease',
+
+  '&:first-of-type': {
+    marginLeft: 0,
+  },
+
+  ...hideMouseFocus,
+
+  '&:hover, &:focus': {
+    backgroundColor: colors.soap200,
+    color: colors.blackPepper400,
+  },
+
+  '&:focus': {
+    outline: `none`,
+    ...focusRing({inset: 'outer', width: 0, separation: 2}),
+  },
+
+  '&:disabled': {
+    color: colors.licorice100,
+    '&:hover': {
+      cursor: 'auto',
+      backgroundColor: `transparent`,
+    },
+  },
+
+  '&[aria-selected=true]': {
+    color: colors.blueberry400,
+    cursor: 'default',
+    '&:after': {
+      position: 'absolute',
+      height: space.xxxs,
+      borderRadius: `${borderRadius.m} ${borderRadius.m} 0px 0px`,
+      backgroundColor: colors.blueberry400,
+      bottom: 0,
+      content: `''`,
+      left: 0,
+      marginTop: '-2px',
+      width: '100%',
+    },
+    '&:hover, &:focus': {
+      backgroundColor: `transparent`,
+      color: colors.blueberry400,
+    },
+  },
+});
+
+const useTab = (
+  model: TabsModel,
+  elemProps: {index?: number; name?: string} = {},
+  ref: React.Ref<HTMLButtonElement>
+) => {
+  const {localRef, elementRef} = useLocalRef(ref);
+
+  const name = useRegisterItem(model, localRef, elemProps.name, elemProps.index);
+  const {state, events} = model;
+
+  const onSelect = () => {
+    events.activate({tab: name});
+  };
+
+  const isSelected = !!name && state.activeTab === name;
+
+  return mergeProps(
+    {
+      id: `tab-${state.id}-${name}`,
+      tabIndex: !!name && state.cursorId === name ? undefined : -1,
+      'aria-selected': isSelected,
+      'aria-controls': `tabpanel-${state.id}-${name}`,
+      onClick: onSelect,
+      isSelected: isSelected,
+      ref: elementRef,
+    },
+    useRovingFocusItem(model, elemProps)
+  );
+};
+
+export const Tab = createComponent('button')({
+  displayName: 'Tabs.Item',
+  Component: ({model, children, ...elemProps}: TabProps, ref, Element) => {
+    const localModel = useModelContext(TabsModelContext, model);
+
+    const props = useTab(localModel, elemProps, ref);
+
+    return (
+      <StyledButton type="button" role="tab" as={Element} {...props}>
+        {children}
+      </StyledButton>
+    );
+  },
+});

package/tabs/lib/TabList.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+
+import {space, commonColors} from '@workday/canvas-kit-react/tokens';
+import {
+  composeHooks,
+  createComponent,
+  styled,
+  StyledType,
+  useModelContext,
+} from '@workday/canvas-kit-react/common';
+
+import {useRovingFocusList} from './cursor';
+import {TabsModelContext} from './Tabs';
+import {useResetCursorOnBlur} from './hooks';
+import {TabsModel} from './useTabsModel';
+
+export interface TabListProps {
+  /**
+   *
+   */
+  children: React.ReactNode;
+  /**
+   * Optionally pass a model directly to this component. Default is to implicitly use the same
+   * model as the container component which uses React context. Only use this for advanced use-cases.
+   */
+  model?: TabsModel;
+}
+
+const TabsListContainer = styled('div')({
+  display: 'inline-block',
+  position: 'relative',
+  width: `100%`,
+  borderBottom: `1px solid ${commonColors.divider}`,
+});
+
+const TabsListInnerContainer = styled('div')<StyledType>({
+  display: `flex`,
+  margin: `0 ${space.m}`,
+});
+
+export const TabList = createComponent('div')({
+  displayName: 'Tabs.List',
+  Component: ({children, model, ...elemProps}: TabListProps, ref, Element) => {
+    const localModel = useModelContext(TabsModelContext, model);
+    const props = composeHooks(useRovingFocusList, useResetCursorOnBlur)(
+      localModel,
+      elemProps,
+      ref
+    );
+
+    return (
+      <TabsListContainer>
+        <TabsListInnerContainer as={Element} ref={ref} role="tablist" {...props}>
+          {children}
+        </TabsListInnerContainer>
+      </TabsListContainer>
+    );
+  },
+});

package/tabs/lib/{TabsPanel.tsx → TabPanel.tsx}

@@ -1,21 +1,19 @@
+/** @jsx jsx */
 import React from 'react';
-import styled from '@emotion/styled';
+import {jsx, css} from '@emotion/core';
 
 import {
   createComponent,
+  mouseFocusBehavior,
+  useLocalRef,
   useModelContext,
   useMountLayout,
-  createHook,
-  ExtractProps,
-  hideMouseFocus,
-  StyledType,
 } from '@workday/canvas-kit-react/common';
-import {Box} from '@workday/canvas-kit-labs-react/common';
 
 import {TabsModelContext} from './Tabs';
 import {TabsModel} from './useTabsModel';
 
-export interface TabPanelProps<T = unknown> extends ExtractProps<typeof Box, never> {
+export interface TabPanelProps {
   /**
    * The contents of the TabPanel.
    */
@@ -37,20 +35,28 @@ export interface TabPanelProps<T = unknown> extends ExtractProps<typeof Box, nev
    * Optionally pass a model directly to this component. Default is to implicitly use the same
    * model as the container component which uses React context. Only use this for advanced use-cases
    */
-  model?: TabsModel<T>;
+  model?: TabsModel;
 }
 
-const StyledTabsPanel = styled(Box)<StyledType>(hideMouseFocus);
+const styles = css(
+  mouseFocusBehavior({
+    '&:focus': {
+      outline: 'none',
+    },
+  })
+);
 
-export const useTabsPanel = createHook(
-  ({state, events}: TabsModel, _?: React.Ref<HTMLElement>, elemProps: {name?: string} = {}) => {
-    const name = elemProps.name;
-    const [tabName, setTabName] = React.useState(elemProps.name || '');
+export const TabPanel = createComponent('div')({
+  displayName: 'Tabs.Panel',
+  Component: ({children, name = '', model, ...elemProps}: TabPanelProps, ref, Element) => {
+    const {state, events} = useModelContext(TabsModelContext, model);
+    const [tabName, setTabName] = React.useState(name);
+    const {localRef, elementRef} = useLocalRef(ref);
 
     useMountLayout(() => {
       const index = state.panelIndexRef.current;
       const tabName = name || String(index);
-      events.registerPanel({item: {id: tabName}});
+      events.registerPanel({item: {id: tabName, ref: localRef}});
       setTabName(tabName);
 
       return () => {
@@ -58,27 +64,19 @@ export const useTabsPanel = createHook(
       };
     });
 
-    return {
-      role: 'tabpanel',
-      'aria-labelledby': `${state.id}-${tabName}`,
-      hidden: !!tabName && tabName !== state.selectedIds[0],
-      id: `tabpanel-${state.id}-${tabName}`,
-      tabIndex: 0,
-    };
-  }
-);
-
-export const TabsPanel = createComponent('div')({
-  displayName: 'Tabs.Panel',
-  Component: ({children, model, ...elemProps}: TabPanelProps, ref, Element) => {
-    const localModel = useModelContext(TabsModelContext, model);
-
-    const props = useTabsPanel(localModel, elemProps, ref);
-
     return (
-      <StyledTabsPanel as={Element} {...props}>
+      <Element
+        ref={elementRef}
+        role="tabpanel"
+        css={styles}
+        aria-labelledby={`tab-${state.id}-${tabName}`}
+        hidden={!!tabName && tabName !== state.activeTab}
+        id={`tabpanel-${state.id}-${tabName}`}
+        tabIndex={0}
+        {...elemProps}
+      >
         {children}
-      </StyledTabsPanel>
+      </Element>
     );
   },
 });

package/tabs/lib/Tabs.tsx

@@ -1,20 +1,15 @@
 import React from 'react';
 
 import {createComponent, useDefaultModel} from '@workday/canvas-kit-react/common';
-import {Menu} from './menu';
 
-import {TabsItem} from './TabsItem';
-import {TabsList} from './TabsList';
-import {TabsPanel} from './TabsPanel';
+import {Tab} from './Tab';
+import {TabList} from './TabList';
+import {TabPanel} from './TabPanel';
 import {useTabsModel, TabsModel, TabsModelConfig} from './useTabsModel';
-import {TabsOverflowButton} from './TabsOverflowButton';
-import {TabsMenuPopper} from './TabsMenuPopper';
-import {TabsPanels} from './TabsPanels';
 
 export const TabsModelContext = React.createContext<TabsModel>({} as any);
 
-// use `T = any` here because there's no way to pass generics to a compound component...
-export interface TabsProps<T = any> extends TabsModelConfig<T> {
+export interface TabsProps extends TabsModelConfig {
   /**
    * The contents of the Tabs. Can be `Tabs` children or any valid elements.
    */
@@ -24,7 +19,7 @@ export interface TabsProps<T = any> extends TabsModelConfig<T> {
    * config passed to this component.
    * @default useTabsModel(config)
    */
-  model?: TabsModel<T>;
+  model?: TabsModel;
 }
 
 export const Tabs = createComponent()({
@@ -32,31 +27,11 @@ export const Tabs = createComponent()({
   Component: ({children, model, ...config}: TabsProps) => {
     const value = useDefaultModel(model, config, useTabsModel);
 
-    return (
-      <TabsModelContext.Provider value={value}>
-        <Menu model={value.menu}>{children}</Menu>
-      </TabsModelContext.Provider>
-    );
+    return <TabsModelContext.Provider value={value}>{children}</TabsModelContext.Provider>;
   },
   subComponents: {
-    List: TabsList,
-    Item: TabsItem,
-    Panel: TabsPanel,
-    Panels: TabsPanels,
-    OverflowButton: TabsOverflowButton,
-    MenuPopper: TabsMenuPopper,
-    /**
-     * The overflow menu of the Tabs component. If there isn't enough room to render all the tab
-     * items, the extra tabs that don't fit will be overflowed into this menu.
-     * @example
-     * <Tabs.Menu.Popper>
-     *   <Tabs.Menu.Card>
-     *     <Tabs.Menu.List>
-     *       {(item: MyTabItem) => <Tabs.Menu.Item name={item.id}>{item.text}</Tabs.Menu.Item>}
-     *     </Tabs.Menu.List>
-     *   </Tabs.Menu.Card>
-     * </Tabs.Menu.Popper>
-     */
-    Menu,
+    List: TabList,
+    Item: Tab,
+    Panel: TabPanel,
   },
 });