@workday/canvas-kit-docs 5.3.0-next.18 → 5.3.0-next.32

package/dist/commonjs/lib/specs.js

@@ -5185,6 +5185,22 @@ module.exports = {specifications: [
                 "type": "it",
                 "name": "should not show the \"More\" button"
               },
+              {
+                "type": "describe",
+                "name": "when the \"First Tab\" is focused",
+                "children": [
+                  {
+                    "type": "describe",
+                    "name": "when the Tab key is pressed",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should focus on the tab panel"
+                      }
+                    ]
+                  }
+                ]
+              },
               {
                 "type": "describe",
                 "name": "when tab list container is only 500px wide",
@@ -5197,6 +5213,22 @@ module.exports = {specifications: [
                     "type": "it",
                     "name": "should show the \"More\" button"
                   },
+                  {
+                    "type": "describe",
+                    "name": "when the \"First Tab\" is focused",
+                    "children": [
+                      {
+                        "type": "describe",
+                        "name": "when the Tab key is pressed",
+                        "children": [
+                          {
+                            "type": "it",
+                            "name": "should focus on the \"More\" button"
+                          }
+                        ]
+                      }
+                    ]
+                  },
                   {
                     "type": "describe",
                     "name": "when the \"More\" button is clicked",
@@ -5981,7 +6013,7 @@ module.exports = {specifications: [
               },
               {
                 "type": "describe",
-                "name": "when the \"Delete\" button is hovered",
+                "name": "when the \"Some Text\" text is hovered",
                 "children": [
                   {
                     "type": "it",

package/dist/es6/lib/specs.js

@@ -5185,6 +5185,22 @@ module.exports = {specifications: [
                 "type": "it",
                 "name": "should not show the \"More\" button"
               },
+              {
+                "type": "describe",
+                "name": "when the \"First Tab\" is focused",
+                "children": [
+                  {
+                    "type": "describe",
+                    "name": "when the Tab key is pressed",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should focus on the tab panel"
+                      }
+                    ]
+                  }
+                ]
+              },
               {
                 "type": "describe",
                 "name": "when tab list container is only 500px wide",
@@ -5197,6 +5213,22 @@ module.exports = {specifications: [
                     "type": "it",
                     "name": "should show the \"More\" button"
                   },
+                  {
+                    "type": "describe",
+                    "name": "when the \"First Tab\" is focused",
+                    "children": [
+                      {
+                        "type": "describe",
+                        "name": "when the Tab key is pressed",
+                        "children": [
+                          {
+                            "type": "it",
+                            "name": "should focus on the \"More\" button"
+                          }
+                        ]
+                      }
+                    ]
+                  },
                   {
                     "type": "describe",
                     "name": "when the \"More\" button is clicked",
@@ -5981,7 +6013,7 @@ module.exports = {specifications: [
               },
               {
                 "type": "describe",
-                "name": "when the \"Delete\" button is hovered",
+                "name": "when the \"Some Text\" text is hovered",
                 "children": [
                   {
                     "type": "it",

package/dist/mdx/5.0-MIGRATION-GUIDE.mdx

@@ -10,6 +10,7 @@ any questions about the update.
   - [Canvas Kit Preview](#canvas-kit-preview)
   - [Type Deprecations and Hierarchy Updates](#type-deprecations-and-hierarchy-updates)
   - [Canvas Kit CSS Maintenance Mode](#canvas-kit-css-maintenance-mode)
+  - [Prop Interfaces](#prop-interfaces)
 - [Component Changes](#component-changes)
   - [Component Promotions](#component-promotions)
   - [Core](#core)
@@ -423,6 +424,59 @@ provide more focused support and to dedicate our efforts to making bigger and be
 our most used components: Canvas Kit React. If you have questions or concerns, please
 [let us know](https://github.com/Workday/canvas-kit/issues/new?labels=&template=question.md).
 
+### Prop Interfaces
+
+Many components were updated to be polymorphic using the `createComponent` utility function. Most
+components in Canvas Kit extend from an HTML interface and spread extra props onto the HTML element.
+Since these components are now polymorphic, the exported props no longer extend from an HTML
+interface since the HTML interface is now determined by an optional `as` prop. It is common to wrap
+Canvas Kit components with your own component and extend from the Canvas Kit component's prop
+interface. To support this use-case in addition to polymorphic prop interfaces, `ExtractProp` was
+introduced. `ExtractProp` understands these polymorphic components and will return the base props in
+addition to the HTML interface. There is an optional second argument that can override the default
+HTML interface if your wrapper component uses the `as`.
+
+```tsx
+// v4
+import {TextInput, TextInputProps} from '@workday/canvas-kit-react-text-input';
+
+const FancyTextInput: React.FC<TextInputProps> = props => <TextInput {...props} />;
+
+// v5
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {ExtractProps} from '@workday/canvas-kit-react/common';
+
+const FancyTextInput: React.FC<ExtractProps<typeof TextInput>> = props => {};
+
+// v5 via createComponent
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {createComponent} from '@workday/canvas-kit-react/common';
+
+const FancyTextInput = createComponent(TextInput)({
+  displayName: 'FancyTextInput',
+  Component((props) => <TextInput {...props} />)
+})
+```
+
+Components that made this change:
+
+- Button
+- IconButton
+- Card
+- Hyperlink
+- Select
+- TextArea
+- TextInput
+- Checkbox
+- Radio
+- ColorInput
+- ColorPreview
+- Modal
+- Popup
+- Skeleton
+- Tabs
+- Toast
+
 ## Component Changes
 
 ### Component Promotions
@@ -799,20 +853,25 @@ Button prop interface and accesses properties like `onClick`, you'll need to pro
 attribute yourself in order to avoid TypeScript issues (this doesn't affect runtime). This is not
 code-moddable since intent cannot be pre-determined.
 
+#### Props
+
+The exported props no longer extend from the `HTMLButtonElement` interface. Use
+[ExtractProps](#prop-interfaces) instead.
+
 ```tsx
 interface MyButtonProps extends ButtonProps {}
 
 // onClick no longer exists in `ButtonProps`, so TypeScript will complain about onClick not
 // existing in `MyButtonProps` (`onClick` does exist as a prop on `<Button>`, however)
 const MyButton = ({children, onClick}: MyButtonProps) => (
-  <Button onClick={onClick}>{children}</Button>
+  <SecondaryButton onClick={onClick}>{children}</SecondaryButton>
 );
 
 // After
-interface MyButtonProps extends ButtonProps, React.ButtonHTMLAttributes<HTMLButtonElement> {}
+interface MyButtonProps extends ExtractProps<typeof SecondaryButton> {}
 
 // After (alternate fix)
-interface MyButtonProps extends ButtonProps {
+interface MyButtonProps extends ExtractProps<> {
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
 ```
@@ -881,6 +940,21 @@ const props = {
 import {Card} from './Card' // where `Card` is a re-exported Canvas Kit `Card`
 ```
 
+#### Props
+
+The exported props no longer extend from the `HTMLDivElement` interface. Use
+[ExtractProps](#prop-interfaces) instead.
+
+```tsx
+// NOT handled by the codemod
+
+// v4
+interface MyCard extends CardProps {}
+
+// v5
+interface MyCard extends ExtractProps<typeof Card>
+```
+
 ---
 
 ### Inputs
@@ -924,14 +998,14 @@ element that `inputRef` was applied to previously. Select and Select (Preview) d
 `inputRef` in v4, but now support `ref` in v5. See each component's documentation for information on
 which element `ref` is forwarded to for that particular component.
 
+#### Props
+
 Input component prop interfaces no longer extend directly from their underlying element interface
 (e.g. `TextInputProps` no longer extends from `React.InputHTMLAttributes<HTMLInputElement>`).
 `createComponent` returns a component that determines the element interface via the `as` prop. This
 is why input component props no longer contain an element interface directly. If you extend from an
 input component prop interface, or have code that uses an input component prop interface and
-accesses properties like `onClick`, you'll need to provide the input attribute yourself in order to
-avoid TypeScript issues (this doesn't affect runtime). This is not code-moddable since intent cannot
-be pre-determined.
+accesses properties like `onClick`, you'll need to use [ExtractProps](#prop-interfaces) instead.
 
 ```tsx
 interface MyTextInputProps extends TextInputProps {}
@@ -941,7 +1015,7 @@ interface MyTextInputProps extends TextInputProps {}
 const MyTextInput = ({onClick}: MyTextInputProps) => <TextInput onClick={onClick} />;
 
 // Fix
-interface MyTextInputProps extends TextInputProps, React.InputHTMLAttributes<HTMLInputElement> {}
+interface MyTextInputProps extends ExtractProps<typeof TextInput> {}
 
 // Alternate fix
 interface MyTextInputProps extends TextInputProps {

package/dist/mdx/6.0-MIGRATION-GUIDE.mdx

@@ -216,6 +216,9 @@ const CustomGlobalHeader = props => {
 };
 ```
 
+You may continue to use this component exactly as you did in v5, but note that we plan to hard-deprecate it in Canvas Kit v7.
+If you would like to migrate away from this deprecated component now, you can reference [this example](https://workday.github.io/canvas-kit/?path=/story/examples-global-header-react--basic) instead.
+
 ### Page Header
 
 We are [soft-deprecating](#soft-deprecation) `PageHeader`. It has been renamed to
@@ -267,6 +270,9 @@ export const CustomPageHeader = (props: CustomPageHeaderProps) => {
 };
 ```
 
+You may continue to use this component exactly as you did in v5, but note that we plan to hard-deprecate it in Canvas Kit v7.
+If you would like to migrate away from this deprecated component now, you can reference [this example](https://workday.github.io/canvas-kit/?path=/story/examples-page-header-react--basic) instead.
+
 ## Component Migrations
 
 ### Search Bar

package/dist/mdx/TESTING.mdx

@@ -29,7 +29,7 @@ do. A "test" simply has to pass. A specification requires meaning.
 test('SomeComponent should render correctly', async () => {
   const {getByTestId} = render(<SomeComponent data-testid="test" text="foo" />);
 
-  const component = await getByTestId('test');
+  const component = getByTestId('test');
 
   expect(component.textContent).toEqual('foo');
   expect(component.getAttribute('aria-label')).toEqual('foo');
@@ -53,14 +53,14 @@ describe('SomeComponent', () => {
   it('should render the "text" prop as the text', async () => {
     const {getByTestId} = render(<SomeComponent data-testid="test" text="foo" />);
 
-    const component = await getByTestId('test');
+    const component = getByTestId('test');
     expect(component).toHaveTextContent('foo');
   });
 
   it('should render the "text" prop as an aria-label for accessibility', async () => {
     const {getByTestId} = render(<SomeComponent data-testid="test" text="foo" />);
 
-    const component = await getByTestId('test');
+    const component = getByTestId('test');
     expect(component).toHaveAttribute('aria-label', 'foo');
   });
 });
@@ -124,8 +124,8 @@ const {getByTestId} = render(
   </SomeComponent>
 );
 
-const component = await getByTestId('container');
-const child = await getByTestId('test');
+const component = getByTestId('container');
+const child = getByTestId('test');
 
 expect(component).toContainElement(child);
 ```
@@ -136,6 +136,30 @@ specification is met). Also this example will have a more useful failure message
 `.toContainElement` has the context that it is expecting an element in another element vs a match of
 a string.
 
+### Snapshot tests
+
+Canvas Kit does not contain DOM-based snapshot tests and uses [Visual Tests](#visual-tests) instead.
+DOM snapshots failures are often difficult to parse. Humans tend to be better at noticing and
+discerning visual changes than changes to a DOM structure.
+
+If your project uses snapshot tests and Canvas Kit, chances are you'll run into issues with changing
+ids and other ARIA attributes. Canvas Kit generates unique ids that are different every time the
+page loads. This can be a problem with snapshot tests. To fix this, you'll need to add special code
+to your test bootstrap file. For example:
+
+```ts
+import {setUniqueSeed, resetUniqueIdCount} from '@workday/canvas-kit-react/common';
+
+beforeEach(() => {
+  setUniqueSeed('a'); // set a static seed
+  resetUniqueIdCount(); // reset the id counter before every test
+});
+```
+
+This will ensure snapshot tests have stable ids for each snapshot. It is still possible to get ids
+changing if you add an additional component that uses id generation - subsequent ids will be
+different, but this will prevent snapshot tests that don't have any changes from showing diffs.
+
 ## Functional tests
 
 Canvas Kit uses [Cypress][https://cypress.io] for browser-based behavior testing (additional info:

package/dist/mdx/preview-react/menu/examples/ContextMenu.tsx

@@ -8,6 +8,7 @@ import {
   usePopupModel,
   useAlwaysCloseOnOutsideClick,
   useCloseOnEscape,
+  useTransferOnFullscreenExit,
 } from '@workday/canvas-kit-react/popup';
 
 const ContextMenuTarget = createComponent('div')({
@@ -40,6 +41,7 @@ export default () => {
 
   useAlwaysCloseOnOutsideClick(model);
   useCloseOnEscape(model);
+  useTransferOnFullscreenExit(model);
 
   return (
     <Popup model={model}>

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

@@ -0,0 +1,8 @@
+import Basic from './examples/CookieBanner';
+
+
+# Canvas Kit Examples
+
+## CookieBanner
+
+<ExampleCodeBlock code={Basic} />

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

@@ -0,0 +1,9 @@
+import Basic from './examples/GlobalHeader';
+
+
+# Canvas Kit Examples
+
+## GlobalHeader
+Developers building internal Workday applications will likely not need to create this component. However, if you're building components to be used outside of Workday, this is a helpful reference for building a global navigation header that looks like our internal `GlobalHeader`.
+
+<ExampleCodeBlock code={Basic} />

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

@@ -0,0 +1,8 @@
+import {Basic} from "./examples/PageHeader";
+
+
+# Canvas Kit Examples
+
+## PageHeader
+
+<ExampleCodeBlock code={Basic} />

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/examples/Primary.tsx

@@ -4,10 +4,11 @@ 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 () => (
+export default props => (
   <HStack spacing="s" padding="s">
-    <PrimaryButton>Primary</PrimaryButton>
-    <PrimaryButton icon={plusIcon} iconPosition="right">
+    <PrimaryButton {...props}>Primary</PrimaryButton>
+    <p>{JSON.stringify(props.theme)}</p>
+    <PrimaryButton icon={plusIcon} iconPosition="right" {...props}>
       Primary
     </PrimaryButton>
   </HStack>

package/dist/mdx/react/loading-animation/LoadingAnimation.mdx

@@ -1,6 +1,7 @@
 import {LoadingAnimation} from '@workday/canvas-kit-react/loading-animation';
 
 import Basic from './examples/Basic';
+import RTL from './examples/RTL';
 
 
 # Canvas Kit Loading Animation
@@ -22,6 +23,10 @@ yarn add @workday/canvas-kit-react
 
 <ExampleCodeBlock code={Basic} />
 
+### Right-to-Left (RTL)
+
+<ExampleCodeBlock code={RTL} />
+
 ## Props
 
 Loading Animation does not have any documented props. Undocumented props are spread to its outermost

package/dist/mdx/react/loading-animation/examples/RTL.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {LoadingAnimation} from '@workday/canvas-kit-react/loading-animation';
+import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+
+export default () => {
+  const theme = {
+    canvas: {
+      direction: ContentDirection.RTL,
+    },
+  };
+  return (
+    <CanvasProvider theme={theme}>
+      <LoadingAnimation />
+    </CanvasProvider>
+  );
+};

package/dist/mdx/react/popup/Popup.mdx

@@ -9,6 +9,7 @@ import FocusRedirect from './examples/FocusRedirect';
 import FocusTrap from './examples/FocusTrap';
 import RTL from './examples/RTL';
 import CustomTarget from './examples/CustomTarget';
+import FullScreen from './examples/FullScreen';
 import {
   PopupModelConfigComponent,
   PopupStateComponent,
@@ -143,6 +144,25 @@ requires a `label` prop.
 
 <ExampleCodeBlock code={CustomTarget} />
 
+### Full Screen API
+
+By default, popups are created as children of the `document.body` element, but the `PopupStack`
+supports the [Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API). When
+fullscreen is entered, the `PopupStack` will automatically create a new stacking context for all
+future popups. Any existing popups will disappear, but not be removed. They disappear because the
+fullscreen API is only showing content within the fullscreen element. There are instances where a
+popup may not close when fullscreen is exited:
+
+- The escape key is used to exit fullscreen
+- There is a button to exit fullscreen, but the popup doesn't use `useCloseOnOutsideClick`
+
+If fullscreen is exited, popups within the fullscreen stacking context are not removed or
+transferred automatically. If you do not handle this case, the popup may not render correctly. This
+example shows a popup that closes when fullscreen is entered/exited and another popup that transfers
+the popup's stack context when entering/exiting fullscreen.
+
+<ExampleCodeBlock code={FullScreen} />
+
 ### RTL
 
 The Popup component automatically handles right-to-left rendering.
@@ -396,6 +416,15 @@ stack. This is useful for Tooltips or hierarchical menus. Adds a
 This should be used with popup elements that should close no matter their position in the stack
 (i.e. Tooltips).
 
+### useCloseOnFullscreenExit
+
+```ts
+useCloseOnFullscreenExit(model: PopupModel): {}
+```
+
+Closes the popup when fullscreen is exited. Entering/exiting fullscreen changes the context of the
+entire screen. This should be added to popup types that are very context sensitive like Tooltips.
+
 ### useDisableBodyScroll
 
 ```ts
@@ -442,6 +471,10 @@ This should be used on popup elements that need to hide content (i.e. Modals).
 
 ### useInitialFocus
 
+```ts
+useInitialFocus(model: PopupModel): {}
+```
+
 Moves focus within the popup when the popup becomes visible. This is useful for keyboard and screen
 reader users alike. This should be used with [useFocusRedirect](#usefocusredirect) or
 [useFocusTrap](#usefocustrap) for a complete focus management solution.
@@ -451,12 +484,41 @@ menus, etc.
 
 ### useReturnFocus
 
+```ts
+useReturnFocus(model: PopupModel): {}
+```
+
 Returns focus to the target element when the popup is hidden. This works well with
 [useInitialFocus](#useinitialfocus). This should be used with [useFocusRedirect](#usefocusredirect)
 or [useFocusTrap](#usefocustrap) for a complete focus management solution.
 
 This should ble used on popup elements that use [useInitialFocus](#useinitialfocus).
 
+### useTransferOnFullscreenEnter
+
+```ts
+useTransferOnFullscreenEnter(model: PopupModel): {}
+```
+
+Makes the popup transfer to the fullscreen element when fullscreen is entered. Without this, the
+popup would seem to disappear because the popup container element is not a child of the fullscreen
+element.
+
+Don't use this in conjunction with a hook that will close the popup when entering fullscreen. Doing
+so would open the popup when the intention was to close it.
+
+### useTransferOnFullscreenExit
+
+```ts
+useTransferOnFullscreenExit(model: PopupModel): {}
+```
+
+Makes the popup transfer to fullscreen when fullscreen is exited. Without this hook, the popup would
+not operate correctly with other popups on the screen.
+
+Don't use this in conjunction with a hook that will close the popup when exiting fullscreen. Doing
+so would open the popup when the intention was to close it.
+
 ### usePopupPopper
 
 ```ts

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

@@ -0,0 +1,115 @@
+import * as React from 'react';
+
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {
+  Popup,
+  useCloseOnEscape,
+  useCloseOnOutsideClick,
+  useFocusTrap,
+  useInitialFocus,
+  useReturnFocus,
+  usePopupModel,
+  useCloseOnFullscreenExit,
+  useTransferOnFullscreenExit,
+  useTransferOnFullscreenEnter,
+} from '@workday/canvas-kit-react/popup';
+import {HStack, Flex} from '@workday/canvas-kit-labs-react/layout';
+import {useIsFullscreen} from '@workday/canvas-kit-react/common';
+import screenfull from 'screenfull';
+
+const SelfClosePopup = () => {
+  const model = usePopupModel();
+
+  useCloseOnOutsideClick(model);
+  useCloseOnEscape(model);
+  useInitialFocus(model);
+  useReturnFocus(model);
+  useFocusTrap(model);
+  useCloseOnFullscreenExit(model);
+
+  return (
+    <Popup model={model}>
+      <Popup.Target>Open Self-close Popup</Popup.Target>
+      <Popup.Popper>
+        <Popup.Card width={400} padding="s">
+          <Popup.CloseIcon aria-label="Close" />
+          <Popup.Heading>Self-close Popup</Popup.Heading>
+          <Popup.Body>
+            <p>
+              When in fullscreen, the escape key will be highjacked by the browser to exit
+              fullscreen and <code>useCloseOnEscape</code> hook will not receive the escape key. To
+              close when fullscreen is exited, use the <code>useCloseOnFullscreenExit</code> hook.
+            </p>
+          </Popup.Body>
+          <Popup.CloseButton>Close</Popup.CloseButton>
+        </Popup.Card>
+      </Popup.Popper>
+    </Popup>
+  );
+};
+
+const TransferClosePopup = () => {
+  const model = usePopupModel();
+
+  useCloseOnEscape(model);
+  useInitialFocus(model);
+  useReturnFocus(model);
+  useFocusTrap(model);
+  useTransferOnFullscreenEnter(model);
+  useTransferOnFullscreenExit(model);
+
+  return (
+    <Popup model={model}>
+      <Popup.Target>Open Transfer Popup</Popup.Target>
+      <Popup.Popper>
+        <Popup.Card width={400} padding="s">
+          <Popup.CloseIcon aria-label="Close" />
+          <Popup.Heading>Transfer Popup</Popup.Heading>
+          <Popup.Body>
+            <p>
+              When in fullscreen, the escape key will be highjacked by the browser to exit
+              fullscreen and <code>useCloseOnEscape</code> hook will not receive the escape key. To
+              close when fullscreen is exited, use the <code>useTransferOnFullscreenExit</code>{' '}
+              hook.
+            </p>
+          </Popup.Body>
+          <Popup.CloseButton>Close</Popup.CloseButton>
+        </Popup.Card>
+      </Popup.Popper>
+    </Popup>
+  );
+};
+
+export default () => {
+  // you could make this a hook depending on which fullscreen library your application uses
+  const fullscreenElementRef = React.useRef<HTMLDivElement>();
+  const isFullscreen = useIsFullscreen();
+
+  const enterFullScreen = () => {
+    screenfull.request(fullscreenElementRef.current);
+  };
+
+  const exitFullscreen = () => {
+    screenfull.exit();
+  };
+
+  return (
+    <>
+      <SecondaryButton onClick={enterFullScreen}>Open Fullscreen</SecondaryButton>
+      <Flex
+        ref={fullscreenElementRef}
+        alignItems="center"
+        justifyContent="center"
+        background="white"
+      >
+        <HStack spacing="s">
+          <SelfClosePopup />
+          <TransferClosePopup />
+          {isFullscreen ? (
+            <SecondaryButton onClick={exitFullscreen}>Exit fullscreen</SecondaryButton>
+          ) : null}
+        </HStack>
+      </Flex>
+    </>
+  );
+};

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

@@ -4,17 +4,28 @@ import {space} from '@workday/canvas-kit-react/tokens';
 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([
+  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({
-    shouldSelect: ({data}) => data.id !== 'last',
+    items: tabs,
+    shouldSelect: ({data}) => data.id !== 'add',
   });
 
+  // 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:
@@ -22,8 +33,9 @@ export default () => {
    * * **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 = (id: string, model: SelectionModel) => {
+  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) {
@@ -41,48 +53,52 @@ export default () => {
     }
   };
 
-  const onKeyDown = (e: React.KeyboardEvent<HTMLElement>, id: string) => {
-    if (e.key === 'Delete') {
+  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.id}
-            name={item.id}
-            index={index}
-            onKeyDown={e => onKeyDown(e, item.id)}
-          >
+      <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}`, id: `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.id} name={item.id}>
+      <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/tooltip/Tooltip.mdx

@@ -3,6 +3,7 @@ import {Specifications} from '@workday/canvas-kit-docs';
 
 import Default from './examples/Default';
 import CustomContent from './examples/CustomContent';
+import DelayedTooltip from './examples/DelayedTooltip';
 import DescribeType from './examples/DescribeType';
 import Muted from './examples/Muted';
 import Placements from './examples/Placements';
@@ -87,6 +88,13 @@ a dialog instead.
 
 <ExampleCodeBlock code={CustomContent} />
 
+### Delayed Tooltip
+
+The default delay for showing and hiding a tooltip are 300ms and 100ms, respectively. You can
+control the length of the delay by providing custom `showDelay` and `hideDelay` in ms.
+
+<ExampleCodeBlock code={DelayedTooltip} />
+
 ### Placements
 
 The tooltip allows for a `placement` configuration. The tooltip uses

package/dist/mdx/react/tooltip/examples/DelayedTooltip.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+
+export default () => {
+  return (
+    <React.Fragment>
+      <Tooltip type="describe" title="Tooltip Text" showDelay={2000} hideDelay={1000}>
+        <SecondaryButton>
+          Tooltip appears after 2 seconds and disappears after 1 second
+        </SecondaryButton>
+      </Tooltip>
+    </React.Fragment>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "5.3.0-next.18+6a7c92ab",
+  "version": "5.3.0-next.32+a02de5eb",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -35,7 +35,8 @@
     "build:specs": "node ./utils/build-specifications.js",
     "build:downlevel-dts": "yarn run downlevel-dts dist ts3.5/dist",
     "build": "npm-run-all --parallel build:cjs build:es6 build:mdx --sequential build:specs build:downlevel-dts",
-    "depcheck": "node ../../utils/check-dependencies-exist.js"
+    "depcheck": "node ../../utils/check-dependencies-exist.js",
+    "typecheck:src": "tsc -p . --noEmit --incremental false"
   },
   "publishConfig": {
     "access": "public"
@@ -49,7 +50,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^5.3.0-next.18+6a7c92ab"
+    "@workday/canvas-kit-react": "^5.3.0-next.32+a02de5eb"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -57,5 +58,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "^3.8.3"
   },
-  "gitHead": "6a7c92ab26c236a362790dceab7a2f10d84fe9ae"
+  "gitHead": "a02de5eb284c706211aa55ef3554b11f52668b28"
 }