@workday/canvas-kit-react 5.3.0-next.2 → 5.3.0-next.24

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

@@ -29,7 +29,7 @@ import { useTooltip } from './useTooltip';
  * Look for an element within the tree for an overflow element (auto, scroll, clip, or hidden).
  * This could be the passed element, or a descendant. If no element is found, `null` is returned.
  */
-var findOverflowElement = function (element) {
+export var findOverflowElement = function (element) {
     var style = getComputedStyle(element);
     if (style.overflow === 'auto' ||
         style.overflow === 'scroll' ||
@@ -53,12 +53,13 @@ var findOverflowElement = function (element) {
  * Look for an element within the tree for a `text-overflow` CSS property of `ellipsis`.
  * This could be the passed element, or a descendant. If no element is found, `null` is returned.
  */
-var findEllipsisElement = function (element) {
+export var findEllipsisElement = function (element) {
     var style = getComputedStyle(element);
     if (style.textOverflow === 'ellipsis' || Number(style.webkitLineClamp) > 0) {
         return element;
     }
-    else {
+    else if (element.children) {
+        // `children` is not defined for SVGElement in IE11
         for (var i = 0; i < element.children.length; i++) {
             var overflowElement = findEllipsisElement(element.children[i]);
             if (overflowElement) {
@@ -67,6 +68,7 @@ var findEllipsisElement = function (element) {
         }
         return null;
     }
+    return null;
 };
 var isOverflowed = function (element) {
     var overflowElement = findEllipsisElement(element) || findOverflowElement(element);

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

@@ -37,6 +37,14 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
      * @default 'label'
      */
     type?: 'label' | 'describe' | 'muted';
+    /**
+     * 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;
 }
-export declare const Tooltip: ({ type, placement, title, children, ...elemProps }: TooltipProps) => JSX.Element;
+export declare const Tooltip: ({ type, placement, title, children, showDelay, hideDelay, ...elemProps }: TooltipProps) => JSX.Element;
 //# sourceMappingURL=Tooltip.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAA4B,SAAS,EAAS,MAAM,iCAAiC,CAAC;AAM7F,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACvF;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;CACvC;AAiBD,eAAO,MAAM,OAAO,mFA+BnB,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAA4B,SAAS,EAAS,MAAM,iCAAiC,CAAC;AAM7F,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACvF;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;;;;;;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;CACpB;AAiBD,eAAO,MAAM,OAAO,yGAsCnB,CAAC"}

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

@@ -39,9 +39,14 @@ function mergeCallbacks(elemProps, componentProps, keys) {
     }, {});
 }
 export var Tooltip = function (_a) {
-    var _b = _a.type, type = _b === void 0 ? 'label' : _b, _c = _a.placement, placement = _c === void 0 ? 'top' : _c, title = _a.title, children = _a.children, elemProps = __rest(_a, ["type", "placement", "title", "children"]);
+    var _b = _a.type, type = _b === void 0 ? 'label' : _b, _c = _a.placement, placement = _c === void 0 ? 'top' : _c, title = _a.title, children = _a.children, _d = _a.showDelay, showDelay = _d === void 0 ? 300 : _d, _e = _a.hideDelay, hideDelay = _e === void 0 ? 100 : _e, elemProps = __rest(_a, ["type", "placement", "title", "children", "showDelay", "hideDelay"]);
     var titleText = innerText(title);
-    var _d = useTooltip({ type: type, titleText: titleText }), targetProps = _d.targetProps, popperProps = _d.popperProps, tooltipProps = _d.tooltipProps;
+    var _f = useTooltip({
+        type: type,
+        titleText: titleText,
+        showDelay: showDelay,
+        hideDelay: hideDelay,
+    }), targetProps = _f.targetProps, popperProps = _f.popperProps, tooltipProps = _f.tooltipProps;
     return (React.createElement(React.Fragment, null,
         React.cloneElement(children, __assign(__assign(__assign({}, targetProps), mergeCallbacks(children.props, targetProps)), (type === 'muted' && children.props['aria-label']
             ? { 'aria-label': children.props['aria-label'] }

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>) => void;
+        onFocus: (event: React.FocusEvent<Element, 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-next.2+eccb106b",
+  "version": "5.3.0-next.24+98e275f5",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -38,7 +38,8 @@
     "build": "npm-run-all --parallel build:cjs build:es6 --sequential build:downlevel-dts",
     "prepack": "node ../../utils/publish.js pre react",
     "postpack": "node ../../utils/publish.js post react",
-    "depcheck": "node ../../utils/check-dependencies-exist.js"
+    "depcheck": "node ../../utils/check-dependencies-exist.js",
+    "typecheck:src": "tsc -p . --noEmit --incremental false"
   },
   "keywords": [
     "canvas",
@@ -56,10 +57,9 @@
     "@emotion/styled": "^10.0.27",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-depth-web": "^0.16.4",
-    "@workday/canvas-kit-labs-react": "^5.3.0-next.2+eccb106b",
-    "@workday/canvas-kit-popup-stack": "^5.3.0-next.2+eccb106b",
-    "@workday/canvas-kit-preview-react": "^5.3.0-next.2+eccb106b",
+    "@workday/canvas-kit-labs-react": "^5.3.0-next.24+98e275f5",
+    "@workday/canvas-kit-popup-stack": "^5.3.0-next.24+98e275f5",
+    "@workday/canvas-kit-preview-react": "^5.3.0-next.24+98e275f5",
     "@workday/canvas-system-icons-web": "1.0.41",
     "@workday/design-assets-types": "^0.2.4",
     "chroma-js": "^2.1.0",
@@ -68,12 +68,14 @@
     "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": "eccb106b919fe5959334db591b44efd81e5e2aad"
+  "gitHead": "98e275f55f5fb0abecdc77f1cea1189eb5d6b791"
 }

package/page-header/README.md

@@ -1,4 +1,9 @@
-# Canvas Kit Page Header
+# 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.
 
 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
@@ -16,19 +21,19 @@ yarn add @workday/canvas-kit-react
 
 ```tsx
 import * as React from 'react';
-import {PageHeader} from '@workday/canvas-kit-react/page-header';
+import {DeprecatedPageHeader} from '@workday/canvas-kit-react/page-header';
 import {IconButton} from '@workday/canvas-kit-react/button';
 import {exportIcon, fullscreenIcon} from '@workday/canvas-system-icons-web';
 
-<PageHeader title="Product">
+<DeprecatedPageHeader title="Product">
   <IconButton icon={exportIcon} />
   <IconButton icon={fullscreenIcon} />
-</PageHeader>
+</DeprecatedPageHeader>
 
-<PageHeader title="With Cap Width" capWidth={true}>
+<DeprecatedPageHeader title="With Cap Width" capWidth={true}>
   <IconButton icon={exportIcon} />
   <IconButton icon={fullscreenIcon} />
-</PageHeader>
+</DeprecatedPageHeader>
 ```
 
 ## Static Properties

package/page-header/index.ts

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

package/page-header/lib/PageHeader.tsx

@@ -3,7 +3,15 @@ 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';
 
-export interface PageHeaderProps {
+/**
+ * ### 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 {
   /**
    * The text of the PageHeader title.
    */
@@ -28,7 +36,7 @@ const Header = styled('header')({
   MozOsxFontSmoothing: 'grayscale',
 });
 
-const Container = styled('div')<Pick<PageHeaderProps, 'breakpoint' | 'capWidth'>>(
+const Container = styled('div')<Pick<DeprecatedPageHeaderProps, 'breakpoint' | 'capWidth'>>(
   {
     display: 'flex',
     alignItems: 'center',
@@ -68,7 +76,24 @@ const IconList = styled('div')({
   },
 });
 
-export default class PageHeader extends React.Component<PageHeaderProps> {
+/**
+ * ### 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
+      `
+    );
+  }
+
   private renderChildren(children: React.ReactNode): React.ReactNode {
     return React.Children.map(children, child => {
       if (!React.isValidElement(child)) {

package/pagination/lib/Pagination/GoTo/Label.tsx

@@ -7,6 +7,9 @@ import {PaginationModel} from '../types';
 
 export interface GoToLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
   model: PaginationModel;
+  /**
+   * Accepts child elements or a render prop.
+   */
   children?: (model: PaginationModel) => React.ReactNode | React.ReactNode;
 }
 

package/pagination/lib/Pagination/types.ts

@@ -1,17 +1,56 @@
 export interface PaginationState {
-  currentPage: number; // current page
-  firstPage: number; // first page
-  lastPage: number; // last page
-  range: number[]; // array of page numbers
-  rangeSize: number; // size of the range
+  /**
+   * The page number for the current page
+   */
+  currentPage: number;
+  /**
+   * The page number for the first page
+   */
+  firstPage: number;
+  /**
+   * The page number for the last page (it can also be used as a total page
+   * count)
+   */
+  lastPage: number;
+  /**
+   * An array of page numbers included in the pagination range
+   */
+  range: number[];
+  /**
+   * The size of the pagination range
+   */
+  rangeSize: number;
 }
 
 export interface PaginationEvents {
+  /**
+   * Sets the current page to a given page number (no safeguards)
+   */
   setCurrentPage: (page: number) => void;
+  /**
+   * Sets the current page to the first page
+   */
   first: () => void;
+  /**
+   * Sets the current page to the last page
+   */
   last: () => void;
+  /**
+   * Increments the current page by 1
+   */
   next: () => void;
+  /**
+   * Decrements the current page by 1
+   */
   previous: () => void;
+  /**
+   * Sets the current page to a given page number (with safeguards). `goTo`
+   * is very similar to `setCurrentPage`, but it has some built-in safeguards.
+   * If the page number provided is below the first page (e.g: `0`),
+   * `currentPage` will be set to the `firstPage`. Similarly, if the number
+   * provided is larger than the `lastPage`, it will set `currentPage` to the
+   * `lastPage`.
+   */
   goTo: (page: number) => void;
 }
 

package/pagination/lib/Pagination/usePaginationModel.ts

@@ -5,10 +5,29 @@ import {getRangeMax, getRangeMin} from './common/utils/helpers';
 import {PaginationModel} from './types';
 
 export type UsePaginationModelConfig = {
+  /**
+   * The page number for the last page (it can also be used as a total page
+   * count)
+   */
   lastPage: number;
+  /**
+   * The page number for the first page
+   * @default 1
+   */
   firstPage?: number;
+  /**
+   * The initial current page
+   * @default 1
+   */
   initialCurrentPage?: number;
+  /**
+   * The function called when the page changes
+   */
   onPageChange?: (pageNumber: number) => void;
+  /**
+   * The size of the pagination range
+   * @default 5
+   */
   rangeSize?: number;
 };
 

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} from '@workday/canvas-kit-react/tokens';
+import {space, type} from '@workday/canvas-kit-react/tokens';
 import {
   styled,
   TransformOrigin,
@@ -42,36 +42,25 @@ const popupAnimation = (transformOrigin: TransformOrigin) => {
 
 const StyledPopupCard = styled(Card)<
   StyledType & {width?: number | string; transformOrigin?: TransformOrigin}
->(
-  {
-    position: 'relative',
-    maxWidth: `calc(100vw - ${space.l})`,
-  },
-  ({width}) => width && {width},
-  ({transformOrigin}) => {
-    if (transformOrigin == null) {
-      return {};
-    }
-    return {
-      animation: popupAnimation(transformOrigin),
-      animationDuration: '150ms',
-      animationTimingFunction: 'ease-out',
-      transformOrigin: `${transformOrigin.vertical} ${transformOrigin.horizontal}`,
-      // Allow overriding of animation in special cases
-      '.wd-no-animation &': {
-        animation: 'none',
-      },
-    };
+>(type.levels.subtext.large, ({transformOrigin}) => {
+  if (transformOrigin == null) {
+    return {};
   }
-);
+  return {
+    animation: popupAnimation(transformOrigin),
+    animationDuration: '150ms',
+    animationTimingFunction: 'ease-out',
+    transformOrigin: `${transformOrigin.vertical} ${transformOrigin.horizontal}`,
+    // Allow overriding of animation in special cases
+    '.wd-no-animation &': {
+      animation: 'none',
+    },
+  };
+});
 
 export const PopupCard = createComponent('div')({
   displayName: 'Popup.Card',
-  Component: (
-    {children, model, padding = 'l', depth = 2, width, ...elemProps}: PopupCardProps,
-    ref,
-    Element
-  ) => {
+  Component: ({children, model, ...elemProps}: PopupCardProps, ref, Element) => {
     const localModel = useModelContext(PopupModelContext, model);
     const props = usePopupCard(localModel, elemProps, ref);
     const transformOrigin = React.useMemo(() => {
@@ -82,12 +71,13 @@ export const PopupCard = createComponent('div')({
       <StyledPopupCard
         as={Element}
         transformOrigin={transformOrigin}
-        depth={depth}
-        width={width}
-        padding={padding}
+        position="relative"
+        padding="l"
+        depth={2}
+        maxWidth={`calc(100vw - ${space.l})`}
         {...props}
       >
-        <Card.Body>{children}</Card.Body>
+        {children}
       </StyledPopupCard>
     );
   },

package/popup/lib/hooks/useReturnFocus.tsx

@@ -8,7 +8,7 @@ import {changeFocus} from '@workday/canvas-kit-react/common';
  * `useInitialFocus`. This should be used with `useFocusRedirect` or `useFocusTrap` for a complete
  * focus management solution.
  *
- * This should ble used on popup elements that use `useInitialFocus`.
+ * This should be used on popup elements that use `useInitialFocus`.
  */
 export const useReturnFocus = (model: PopupModel, elemProps = {}) => {
   const visible = model.state.visibility !== 'hidden';

package/tabs/index.ts

@@ -1,2 +1,8 @@
 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/Tabs.tsx

@@ -1,15 +1,20 @@
 import React from 'react';
 
 import {createComponent, useDefaultModel} from '@workday/canvas-kit-react/common';
+import {Menu} from './menu';
 
-import {Tab} from './Tab';
-import {TabList} from './TabList';
-import {TabPanel} from './TabPanel';
+import {TabsItem} from './TabsItem';
+import {TabsList} from './TabsList';
+import {TabsPanel} from './TabsPanel';
 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);
 
-export interface TabsProps extends TabsModelConfig {
+// use `T = any` here because there's no way to pass generics to a compound component...
+export interface TabsProps<T = any> extends TabsModelConfig<T> {
   /**
    * The contents of the Tabs. Can be `Tabs` children or any valid elements.
    */
@@ -19,7 +24,7 @@ export interface TabsProps extends TabsModelConfig {
    * config passed to this component.
    * @default useTabsModel(config)
    */
-  model?: TabsModel;
+  model?: TabsModel<T>;
 }
 
 export const Tabs = createComponent()({
@@ -27,11 +32,31 @@ export const Tabs = createComponent()({
   Component: ({children, model, ...config}: TabsProps) => {
     const value = useDefaultModel(model, config, useTabsModel);
 
-    return <TabsModelContext.Provider value={value}>{children}</TabsModelContext.Provider>;
+    return (
+      <TabsModelContext.Provider value={value}>
+        <Menu model={value.menu}>{children}</Menu>
+      </TabsModelContext.Provider>
+    );
   },
   subComponents: {
-    List: TabList,
-    Item: Tab,
-    Panel: TabPanel,
+    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,
   },
 });