@workday/canvas-kit-docs 12.0.0-alpha.841-next.0 → 12.0.0-alpha.852-next.0

package/dist/mdx/12.0-UPGRADE-GUIDE.mdx

@@ -1,3 +1,10 @@
+import {Table} from '@workday/canvas-kit-react/table';
+import {base, brand, system} from '@workday/canvas-tokens-web';
+import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
+import {cssVar} from '@workday/canvas-kit-styling';
+import {Box} from '@workday/canvas-kit-react/layout';
+
+
 # Canvas Kit 12.0 Upgrade Guide
 
 This guide contains an overview of the changes in Canvas Kit v12. Please
@@ -6,10 +13,59 @@ any questions.
 
 ## Why You Should Upgrade
 
+Canvas Kit v12 is transitioning into a
+[new way of styling](https://github.com/Workday/canvas-kit/discussions/2265). Theming and building
+an in sync Canvas Kit CSS has been at the top of our minds. We've started using our new
+[Canvas Tokens Web](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs)
+package to take advantage of
+[CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) and
+provide semantic tokens that can translate to theming components.
+
+A note to the reader:
+
+- While we still support our old tokens from `@workday/canvas-kit-react/tokens` in v12, you must
+  install our new tokens from `@workday/canvas-tokens-web`. You can find more info in our
+  [docs](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
+- In this release, we've introduced a
+  [new styling API](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-stencil).
+  This shouldn't effect the way you currently style your components. Because we're moving away from
+  Emotion, support for style props will eventually be removed, however, this API provide backwards
+  compatability. If you want to slowly move off of Emotion as well, you can start styling components
+  via the `cs` prop or our new styling utilities.
+
 ## Table of contents
 
+- [Canvas Tokens](#canvas-tokens)
+- [Codemod](#codemod)
+- [Deprecations](#deprecations)
 - [Removals](#removals)
+  - [InputIconContainer](#inputiconcontainer)
   - [Select (Preview)](#select-preview)
+- [Component Updates](#component-updates)
+  - [Popup, Dialog and Modal](#popup-dialog-and-modal)
+  - [Toast](#toast)
+- [Style Utility Updates](#style-utility-updates)
+  - [createStencil](#createstencil)
+- [Troubleshooting](#troubleshooting)
+- [Glossary](#glossary)
+  - [Main](#main)
+  - [Preview](#preview)
+  - [Labs](#labs)
+
+## Canvas Tokens
+
+In v12, all the components listed in this guide have started using our new
+[Canvas Tokens Web](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
+
+In v12 you must add `@workday/canvas-tokens-web` to ensure our components are properly styled and the
+variables are defined. For more information on installing and using, please reference our tokens
+[docs](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
+
+## Deprecations
+
+We add the [@deprecated](https://jsdoc.app/tags-deprecated.html) JSDoc tag to code we plan to remove
+in a future major release. This signals consumers to migrate to a more stable alternative before the
+deprecated code is removed.
 
 ## Removals
 Removals are deletions from our codebase and you can no longer consume this component. We've either promoted or replaced a component or utility.
@@ -18,4 +74,106 @@ Removals are deletions from our codebase and you can no longer consume this comp
 
 **PR:** [#2796](https://github.com/Workday/canvas-kit/pull/2796)
 
-We've removed the `Select` component that was in Preview. Please use the compound [`Select` component from Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic).
+We've removed the `Select` component that was in Preview. Please use the compound [Select component from Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic).
+
+### InputIconContainer
+
+**PR:** [#2838](https://github.com/Workday/canvas-kit/pull/2838)
+
+We've removed `InputIconContainer` from Main. Please use [InputGroup](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-text-input--icons) from Main instead.
+
+---
+
+## Component Updates
+
+### Styling API and CSS Tokens
+
+Several components have been refactored to use our new
+[Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and
+[styling API](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api).
+The React interface **has not changed**, but CSS variables are now used for dynamic properties.
+
+The following components are affected:
+
+- `Popup`
+- `Dialog`
+- `Modal`
+- `Toast`
+
+> **Note:** These components also support our new `cs` prop for styling. Learn more about styling
+> with `cs` in our
+> [documentation](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--cs-prop).
+
+### Popup, Dialog and Modal
+
+**PR:** [#2795](https://github.com/Workday/canvas-kit/pull/2795)
+
+### Toast
+
+**PR:** [#2795](https://github.com/Workday/canvas-kit/pull/2795)
+
+## Style Utility Updates
+
+## Troubleshooting
+
+### My Styles Seem Broken?
+
+Our components are reliant on our new Canvas Tokens Web package. Be sure you install
+`@workday/canvas-tokens-web`. For more information, reference our
+[Getting Started docs](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs)
+for this package.
+
+### Did You Upgrade All Canvas Kit Related Packages?
+
+In order for all the packages to work in harmony, you must upgrade all Canvas Kit packages to the
+same version that you're using, including:
+
+- `@workday/canvas-kit-react`
+- `@workday/canvas-kit-preview-react`
+- `@workday/canvas-kit-labs-react`
+- `@workday/canvas-kit-styling`
+- `@workday/canvas-kit-react-fonts`
+- `@workday/canvas-kit-docs`
+
+## Glossary
+
+### Main
+
+Our Main package of Canvas Kit tokens, components, and utilities at `@workday/canvas-kit-react` has
+undergone a full design and a11y review and is approved for use in product.
+
+Breaking changes to code in Main will only occur during major version updates and will always be
+communicated in advance and accompanied by migration strategies.
+
+---
+
+### Preview
+
+Our Preview package of Canvas Kit tokens, components, and utilities at
+`@workday/canvas-kit-preview-react` has undergone a full design and a11y review and is approved for
+use in product, but may not be up to the high code standards upheld in the [Main](#main) package.
+Preview is analagous to code in beta.
+
+Breaking changes are unlikely, but possible, and can be deployed to Preview at any time without
+triggering a major version update, though such changes will be communicated in advance and
+accompanied by migration strategies.
+
+Generally speaking, our goal is to eventually promote code from Preview to [Main](#main).
+Occasionally, a component with the same name will exist in both [Main](#main) and Preview (for
+example, see Segmented Control in [Preview](/components/buttons/segmented-control/) and
+[Main](https://d2krrudi3mmzzw.cloudfront.net/v8/?path=/docs/components-buttons-segmented-control--basic)).
+In these cases, Preview serves as a staging ground for an improved version of the component with a
+different API. The component in [Main](#main) will eventually be replaced with the one in Preview.
+
+---
+
+### Labs
+
+Our Labs package of Canvas Kit tokens, components, and utilities at `@workday/canvas-kit-labs-react`
+has **not** undergone a full design and a11y review. Labs serves as an incubator space for new and
+experimental code and is analagous to code in alpha.
+
+Breaking changes can be deployed to Labs at any time without triggering a major version update and
+may not be subject to the same rigor in communcation and migration strategies reserved for breaking
+changes in [Preview](#preview) and [Main](#main). import { opacity } from
+"@workday/canvas-tokens-web/dist/es6/system"

package/dist/mdx/react/_examples/AriaLiveRegions.mdx

@@ -1,9 +1,8 @@
 import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
-import FilterListWithLiveStatus from './examples/common/FilterListWithLiveStatus';
-import VisibleLiveRegion from './examples/common/VisibleLiveRegion';
-import HiddenLiveRegion from './examples/common/HiddenLiveRegion';
-import TextInputWithLiveError from './examples/common/TextInputWithLiveError';
-import IconButtonsWithLiveBadges from './examples/common/IconButtonsWithLiveBadges';
+import FilterListWithLiveStatus from './examples/AriaLiveRegions/FilterListWithLiveStatus';
+import VisibleLiveRegion from './examples/AriaLiveRegions/VisibleLiveRegion';
+import HiddenLiveRegion from './examples/AriaLiveRegions/HiddenLiveRegion';
+import TextInputWithLiveError from './examples/AriaLiveRegions/TextInputWithLiveError';
 
 
 # ARIA Live Regions
@@ -56,7 +55,7 @@ experience when moving the keyboard focus to a new element on screen isn't feasi
 
 In this example, a live region is applied to a short UI text describing the number of items shown in
 the list. As you type characters into the input, listen for the screen reader to automatically
-describe how many items in the list or shown.
+describe how many items in the list are shown.
 
 <ExampleCodeBlock code={FilterListWithLiveStatus} />
 
@@ -72,4 +71,9 @@ of error conditions. As forms increase in complexity, live regions on each error
 increasingly distracting and disruptive to the experience, especially if users are trying to first
 understand the information that is required of them to complete the task.
 
+**Note:** The `<AriaLiveRegion>` component is used inside of the `Hint` to ensure the live
+region remains in the browser DOM at all times. The `Hint` is only rendered in the DOM when it
+contains content, so it will not work reliably as a live region for screen readers using the
+`as={AriaLiveRegion}` prop.
+
 <ExampleCodeBlock code={TextInputWithLiveError} />

package/dist/mdx/react/_examples/examples/{common → AriaLiveRegions}/FilterListWithLiveStatus.tsx

@@ -1,10 +1,12 @@
 import React, {useState} from 'react';
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
-import {BodyText, Heading} from '@workday/canvas-kit-react/text';
+
 import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
+import {BodyText, Heading} from '@workday/canvas-kit-react/text';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {system, base} from '@workday/canvas-tokens-web';
-import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {createStyles, cssVar, px2rem} from '@workday/canvas-kit-styling';
 
 const fruits = [
   'Apples',
@@ -23,13 +25,19 @@ const liveRegionStyle = createStyles({
   padding: system.space.x2,
 });
 
-const listStyles = {paddingLeft: '0px'};
+const listStyles = createStyles({
+  paddingLeft: system.space.zero,
+});
 
 const listItemStyles = createStyles({
   listStyle: 'none',
   paddingLeft: system.space.zero,
 });
 
+const flexStyles = createStyles({
+  gap: system.space.x4,
+});
+
 let filteredFruits = fruits;
 
 export default () => {
@@ -41,7 +49,7 @@ export default () => {
 
   return (
     <>
-      <Flex gap="1rem">
+      <Flex cs={flexStyles}>
         <Heading size="small">Fruits</Heading>
         <AriaLiveRegion>
           <BodyText size="small" cs={liveRegionStyle}>
@@ -49,11 +57,11 @@ export default () => {
           </BodyText>
         </AriaLiveRegion>
       </Flex>
-      <TextInput orientation="vertical">
-        <TextInput.Label>Filter Items:</TextInput.Label>
-        <TextInput.Field value={filter} onChange={handleFilter} />
-      </TextInput>
-      <ul style={listStyles}>
+      <FormField>
+        <FormField.Label>Filter Items:</FormField.Label>
+        <FormField.Input as={TextInput} value={filter} onChange={handleFilter} />
+      </FormField>
+      <ul className={listStyles}>
         {filteredFruits.map(i => (
           <BodyText size="small" as="li" cs={listItemStyles} key={i}>
             {i}

package/dist/mdx/react/_examples/examples/AriaLiveRegions/HiddenLiveRegion.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import {AccessibleHide, AriaLiveRegion} from '@workday/canvas-kit-react/common';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Text} from '@workday/canvas-kit-react/text';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+let liveRegionStr = '';
+
+const flexStyles = createStyles({
+  gap: system.space.x4,
+  alignItems: 'center',
+});
+
+export default () => {
+  const [message, setMessage] = React.useState('');
+
+  function handleChange(e) {
+    setMessage(e.target.value);
+  }
+
+  function handleSendMessage(e) {
+    e.preventDefault();
+    liveRegionStr = message;
+    setMessage('');
+  }
+
+  return (
+    <>
+      <Flex as="form" aria-label="Hidden Live Region" onSubmit={handleSendMessage} cs={flexStyles}>
+        <FormField>
+          <FormField.Label>Type your message:</FormField.Label>
+          <FormField.Input as={TextInput} onChange={handleChange} value={message} />
+        </FormField>
+        <PrimaryButton type="submit">Send Message</PrimaryButton>
+      </Flex>
+      <AriaLiveRegion>
+        <Text as={AccessibleHide}>{liveRegionStr}</Text>
+      </AriaLiveRegion>
+    </>
+  );
+};

package/dist/mdx/react/_examples/examples/AriaLiveRegions/TextInputWithLiveError.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {AriaLiveRegion, changeFocus} from '@workday/canvas-kit-react/common';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {system} from '@workday/canvas-tokens-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const hintStyles = createStyles({
+  height: system.space.x6,
+});
+export default () => {
+  const errMsg = 'Error: First name is required.';
+  const [hasError, setHasError] = React.useState('no');
+  const inputRef = React.useRef(null);
+  const handleBlur = e => setHasError(e.target.value.trim().length === 0 ? 'error' : 'no');
+  const handleSubmit = () => hasError && changeFocus(inputRef.current);
+
+  return (
+    <>
+      <FormField error={hasError === 'error' ? 'error' : undefined} isRequired={true}>
+        <FormField.Label>First Name:</FormField.Label>
+        <FormField.Input as={TextInput} onBlur={handleBlur} ref={inputRef} />
+        <FormField.Hint cs={hintStyles}>
+          <AriaLiveRegion>{hasError === 'error' && errMsg}</AriaLiveRegion>
+        </FormField.Hint>
+      </FormField>
+      <PrimaryButton onClick={handleSubmit}>Continue</PrimaryButton>
+    </>
+  );
+};

package/dist/mdx/react/_examples/examples/AriaLiveRegions/VisibleLiveRegion.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Text} from '@workday/canvas-kit-react/text';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {system, base} from '@workday/canvas-tokens-web';
+import {createStyles, px2rem, calc} from '@workday/canvas-kit-styling';
+
+const liveRegionStyle = createStyles({
+  border: `${px2rem(1)} solid ${system.color.border.caution.default}`,
+  backgroundColor: system.color.bg.caution.default,
+  padding: system.space.x4,
+  display: 'block',
+  marginBlockStart: system.space.x4,
+  marginBlockEnd: system.space.x4,
+  width: calc.multiply(system.space.x16, 7),
+});
+
+const flexGapStyles = createStyles({
+  gap: system.space.x4,
+  alignItems: 'center',
+});
+
+let liveRegionStr = 'This is an ARIA Live Region!';
+
+export default () => {
+  const [message, setMessage] = React.useState('');
+
+  function handleChange(e) {
+    setMessage(e.target.value);
+  }
+
+  function handleSendMessage(e) {
+    e.preventDefault();
+    liveRegionStr = message;
+    setMessage('');
+  }
+
+  return (
+    <>
+      <AriaLiveRegion>
+        <Text cs={liveRegionStyle}>{liveRegionStr}</Text>
+      </AriaLiveRegion>
+      <Flex
+        as="form"
+        aria-label="Visible Live Region"
+        onSubmit={handleSendMessage}
+        cs={flexGapStyles}
+      >
+        <FormField>
+          <FormField.Label>Type your message:</FormField.Label>
+          <FormField.Input as={TextInput} onChange={handleChange} value={message} />
+        </FormField>
+        <PrimaryButton type="submit">Send Message</PrimaryButton>
+      </Flex>
+    </>
+  );
+};

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

@@ -10,6 +10,7 @@ import FocusRedirect from './examples/FocusRedirect';
 import FocusTrap from './examples/FocusTrap';
 import RTL from './examples/RTL';
 import CustomTarget from './examples/CustomTarget';
+import ExternalWindow from './examples/ExternalWindow';
 import FullScreen from './examples/FullScreen';
 
 
@@ -159,6 +160,16 @@ the popup's stack context when entering/exiting fullscreen.
 
 <ExampleCodeBlock code={FullScreen} />
 
+### Opening an external window
+
+A popup can open an external window. This isn't supported directly. The `Popup.Popper` subcomponent
+is replaced with a custom subcomponent that connects to the Popup model and controls the lifecycle
+of the extenal window. Be sure to connect the `unload` event of both the parent `window` and the
+external child `window` to the lifecycle of the Popup model to prevent memory leaks or zombie
+windows.
+
+<ExampleCodeBlock code={ExternalWindow} />
+
 ### RTL
 
 The Popup component automatically handles right-to-left rendering.
@@ -170,8 +181,8 @@ The Popup component automatically handles right-to-left rendering.
 ## Component API
 
 <>
-<SymbolDoc name="Popper" fileName="/react/" />
-<SymbolDoc name="Popup" fileName="/react/" />
+  <SymbolDoc name="Popper" fileName="/react/" />
+  <SymbolDoc name="Popup" fileName="/react/" />
 </>
 
 ## Hooks

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

@@ -26,7 +26,7 @@ export default () => {
   return (
     <Popup model={model}>
       <Popup.Target as={DeleteButton}>Delete Item</Popup.Target>
-      <Popup.Popper placement="bottom">
+      <Popup.Popper placement="top">
         <Popup.Card width={400}>
           <Popup.CloseIcon aria-label="Close" />
           <Popup.Heading>Delete Item</Popup.Heading>

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

@@ -0,0 +1,177 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import {system} from '@workday/canvas-tokens-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {infoIcon} from '@workday/canvas-system-icons-web';
+
+import {
+  CanvasProvider,
+  ContentDirection,
+  createSubcomponent,
+  PartialEmotionCanvasTheme,
+  useMount,
+  useTheme,
+} from '@workday/canvas-kit-react/common';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {Popup, usePopupModel} from '@workday/canvas-kit-react/popup';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {Flex} from '../../../layout';
+
+const mainContentStyles = createStyles({
+  padding: system.space.x4,
+});
+
+export interface ExternalWindowPortalProps {
+  /**
+   * Child components of WindowPortal
+   */
+  children: React.ReactNode;
+  /**
+   * Callback to close the popup
+   */
+  onWindowClose?: () => void;
+  /**
+   * Width of the popup window
+   */
+  width?: number;
+  /**
+   * Height of the popup window
+   */
+  height?: number;
+  /**
+   * The name of the popup window. If another popup opens with the same name, that instance will
+   * be reused. Use caution with setting this value
+   */
+  target?: string;
+}
+
+async function copyAssets(sourceDoc: Document, targetDoc: Document) {
+  for (const font of (sourceDoc as any).fonts.values()) {
+    (targetDoc as any).fonts.add(font);
+
+    font.load();
+  }
+
+  await (targetDoc as any).fonts.ready;
+
+  // The current ES lib version doesn't include iterable interfaces, so we cast as an iterable
+  for (const styleSheet of sourceDoc.styleSheets as StyleSheetList & Iterable<CSSStyleSheet>) {
+    if (styleSheet.cssRules) {
+      // text based styles
+      const styleEl = targetDoc.createElement('style');
+      for (const cssRule of styleSheet.cssRules as CSSRuleList & Iterable<CSSRule>) {
+        styleEl.appendChild(targetDoc.createTextNode(cssRule.cssText));
+      }
+      targetDoc.head.appendChild(styleEl);
+    } else if (styleSheet.href) {
+      // link based styles
+      const linkEl = targetDoc.createElement('link');
+
+      linkEl.rel = 'stylesheet';
+      linkEl.href = styleSheet.href;
+      targetDoc.head.appendChild(linkEl);
+    }
+  }
+}
+
+const ExternalWindowPortal = ({
+  children,
+  width = 300,
+  height = 500,
+  target = '',
+  onWindowClose,
+}: ExternalWindowPortalProps) => {
+  const [portalElement, setPortalElement] = React.useState<HTMLDivElement | null>(null);
+
+  useMount(() => {
+    const newWindow = window.open(
+      '', // url
+      target,
+      `width=${width},height=${height},left=100,top=100,popup=true`
+    );
+
+    if (newWindow) {
+      // copy fonts and styles
+      copyAssets(document, newWindow.document);
+
+      const element = newWindow.document.createElement('div');
+      newWindow.document.body.appendChild(element);
+      setPortalElement(element);
+    } else {
+      onWindowClose();
+    }
+
+    const closeWindow = event => {
+      onWindowClose();
+    };
+
+
+    window.addEventListener('unload', closeWindow);
+    newWindow?.addEventListener('unload', closeWindow);
+
+    return () => {
+      window.removeEventListener('unload', closeWindow);
+      newWindow?.removeEventListener('unload', closeWindow);
+      newWindow?.close();
+    };
+  });
+
+  if (!portalElement) {
+    return null;
+  }
+
+  return ReactDOM.createPortal(<CanvasProvider>{children}</CanvasProvider>, portalElement);
+};
+
+const PopupExternalWindow = createSubcomponent()({
+  displayName: 'Popup.ExternalWindow',
+  modelHook: usePopupModel,
+})<ExternalWindowPortalProps>(({children, ...elemProps}, Element, model) => {
+  if (model.state.visibility === 'visible') {
+    return (
+      <ExternalWindowPortal onWindowClose={model.events.hide} {...elemProps}>
+        {children}
+      </ExternalWindowPortal>
+    );
+  }
+
+  return null;
+});
+
+export default () => {
+  // useTheme is filling in the Canvas theme object if any keys are missing
+  const canvasTheme: PartialEmotionCanvasTheme = useTheme({
+    canvas: {
+      // Switch to `ContentDirection.RTL` to change direction
+      direction: ContentDirection.LTR,
+    },
+  });
+
+  const model = usePopupModel();
+
+  return (
+    <CanvasProvider theme={canvasTheme}>
+      <>
+        <main className={mainContentStyles}>
+          <p>Popup that opens a new Operating System Window</p>
+          <Popup model={model}>
+            <Tooltip title="Open External Window Tooltip">
+              <Popup.Target>Open External Window</Popup.Target>
+            </Tooltip>
+            <PopupExternalWindow>
+              <p>External Window Contents! Mouse over the info icon to get a tooltip</p>
+              <Flex gap="s">
+                <Tooltip title="More information">
+                  <SecondaryButton icon={infoIcon} />
+                </Tooltip>
+                <Popup.CloseButton>Close Window</Popup.CloseButton>
+              </Flex>
+            </PopupExternalWindow>
+          </Popup>
+          <p>Popup visibility: {model.state.visibility}</p>
+        </main>
+      </>
+    </CanvasProvider>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "12.0.0-alpha.841-next.0",
+  "version": "12.0.0-alpha.852-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,13 +44,13 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^12.0.0-alpha.841-next.0",
-    "@workday/canvas-kit-preview-react": "^12.0.0-alpha.841-next.0",
-    "@workday/canvas-kit-react": "^12.0.0-alpha.841-next.0",
-    "@workday/canvas-kit-styling": "^12.0.0-alpha.841-next.0",
+    "@workday/canvas-kit-labs-react": "^12.0.0-alpha.852-next.0",
+    "@workday/canvas-kit-preview-react": "^12.0.0-alpha.852-next.0",
+    "@workday/canvas-kit-react": "^12.0.0-alpha.852-next.0",
+    "@workday/canvas-kit-styling": "^12.0.0-alpha.852-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.0",
-    "markdown-to-jsx": "^6.10.3",
+    "markdown-to-jsx": "^7.2.0",
     "ts-node": "^10.9.1"
   },
   "devDependencies": {
@@ -59,5 +59,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.2"
   },
-  "gitHead": "066c4b170850949586bf9f89370f5302a6c8f9a4"
+  "gitHead": "bbd7343aec2a6657b8eff4981a7aa4a6e47af161"
 }