@workday/canvas-kit-docs 11.0.18 → 11.0.20

package/dist/es6/lib/docs.js

@@ -4692,7 +4692,27 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                       "required": false,
                       "type": {
                         "kind": "function",
-                        "parameters": [],
+                        "parameters": [
+                          {
+                            "kind": "parameter",
+                            "name": "element",
+                            "type": {
+                              "kind": "symbol",
+                              "name": "HTMLElement",
+                              "value": "HTMLElement"
+                            },
+                            "required": false,
+                            "rest": false,
+                            "description": "",
+                            "declarations": [
+                              {
+                                "name": "element",
+                                "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/popup-stack/lib/PopupStack.ts"
+                              }
+                            ],
+                            "tags": {}
+                          }
+                        ],
                         "members": [],
                         "returnType": {
                           "kind": "symbol",
@@ -4700,7 +4720,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                           "value": "HTMLElement"
                         }
                       },
-                      "description": "",
+                      "description": "Returns the container of a stack given an optional element.",
                       "declarations": [
                         {
                           "name": "container",

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/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": "11.0.18",
+  "version": "11.0.20",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,10 +44,10 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^11.0.18",
-    "@workday/canvas-kit-preview-react": "^11.0.18",
-    "@workday/canvas-kit-react": "^11.0.18",
-    "@workday/canvas-kit-styling": "^11.0.18",
+    "@workday/canvas-kit-labs-react": "^11.0.20",
+    "@workday/canvas-kit-preview-react": "^11.0.20",
+    "@workday/canvas-kit-react": "^11.0.20",
+    "@workday/canvas-kit-styling": "^11.0.20",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.0",
     "markdown-to-jsx": "^7.2.0",
@@ -59,5 +59,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.2"
   },
-  "gitHead": "b8919f552eadd3b280dffd8e6c4d445a275d2ee5"
+  "gitHead": "d0151684ede96da03067c069fec4011c898f7101"
 }