@workday/canvas-kit-docs 11.1.0-833-next.0 → 11.1.0-864-next.0

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

@@ -41,9 +41,24 @@ const myCustomStyles = createStyles({
   textTransform: 'uppercase',
 });
 
+const customColors = {
+  default: {
+    background: system.color.static.green.soft,
+    icon: system.color.static.green.strong,
+    label: system.color.static.green.strong,
+  },
+  hover: {
+    background: system.color.static.green.default,
+    icon: system.color.static.green.strong,
+  },
+};
+
 export default () => (
   <Grid cs={{gap: px2rem(4), gridTemplateColumns: 'repeat(3, 1fr)', alignItems: 'center'}}>
     <MyCustomButton icon={plusIcon}>Styling Override Via Stencil Variables</MyCustomButton>
     <PrimaryButton cs={myCustomStyles}>Style Override Via Create Styles</PrimaryButton>
+    <PrimaryButton icon={plusIcon} colors={customColors}>
+      Styling Override Via Colors Prop
+    </PrimaryButton>
   </Grid>
 );

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,176 @@
+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 '@workday/canvas-kit-react/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.1.0-833-next.0",
+  "version": "11.1.0-864-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": "^11.1.0-833-next.0",
-    "@workday/canvas-kit-preview-react": "^11.1.0-833-next.0",
-    "@workday/canvas-kit-react": "^11.1.0-833-next.0",
-    "@workday/canvas-kit-styling": "^11.1.0-833-next.0",
+    "@workday/canvas-kit-labs-react": "^11.1.0-864-next.0",
+    "@workday/canvas-kit-preview-react": "^11.1.0-864-next.0",
+    "@workday/canvas-kit-react": "^11.1.0-864-next.0",
+    "@workday/canvas-kit-styling": "^11.1.0-864-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": "d810cce07772db36ba395b874bd25d90e6072b09"
+  "gitHead": "d52f5c29b5ee0296fd415d02c7edb127af9b1a59"
 }

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

@@ -1,30 +0,0 @@
-import React, {useState, useRef} from 'react';
-import {AriaLiveRegion, AccessibleHide} from '@workday/canvas-kit-react/common';
-import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {system} from '@workday/canvas-tokens-web';
-
-export default () => {
-  const [message, setMessage] = useState('This is an ARIA Live Region!');
-  const inputRef = useRef();
-  function handleSendMessage() {
-    setMessage(inputRef.current.value);
-    inputRef.current.value = '';
-  }
-
-  return (
-    <>
-      <Flex gap={`var(${system.space.x4})`} alignItems="flex-end">
-        <TextInput orientation="vertical">
-          <TextInput.Label>Type your message:</TextInput.Label>
-          <TextInput.Field ref={inputRef} />
-        </TextInput>
-        <PrimaryButton onClick={handleSendMessage}>Send Message</PrimaryButton>
-      </Flex>
-      <AriaLiveRegion>
-        <AccessibleHide>{message}</AccessibleHide>
-      </AriaLiveRegion>
-    </>
-  );
-};

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

@@ -1,25 +0,0 @@
-import React, {useState, useRef} from 'react';
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
-import {AriaLiveRegion, changeFocus} from '@workday/canvas-kit-react/common';
-import {PrimaryButton} from '@workday/canvas-kit-react/button';
-
-export default () => {
-  const errMsg = 'Error: First name is required.';
-  const [hasError, setHasError] = useState(false);
-  const inputRef = useRef();
-  const handleBlur = e => setHasError(e.target.value.trim().length === 0);
-  const handleSubmit = () => hasError && changeFocus(inputRef.current);
-
-  return (
-    <>
-      <TextInput orientation="vertical" hasError={hasError} isRequired={true}>
-        <TextInput.Label>First Name:</TextInput.Label>
-        <TextInput.Field onBlur={handleBlur} ref={inputRef} />
-        <TextInput.Hint height={'16px'}>
-          <AriaLiveRegion>{hasError && errMsg}</AriaLiveRegion>
-        </TextInput.Hint>
-      </TextInput>
-      <PrimaryButton onClick={handleSubmit}>Continue</PrimaryButton>
-    </>
-  );
-};

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

@@ -1,40 +0,0 @@
-import React, {useState, useRef} from 'react';
-import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
-import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {Text} from '@workday/canvas-kit-react/text';
-import {system, base} from '@workday/canvas-tokens-web';
-import {createStyles, px2rem} from '@workday/canvas-kit-styling';
-
-const liveRegionStyle = createStyles({
-  border: `${px2rem(1)} solid ${base.cantaloupe400}`,
-  backgroundColor: base.cantaloupe100,
-  padding: system.space.x4,
-  display: 'block',
-  margin: system.space.x4 + ' 0',
-});
-
-export default () => {
-  const [message, setMessage] = useState('This is an ARIA Live Region!');
-  const inputRef = useRef();
-  function handleSendMessage() {
-    setMessage(inputRef.current.value);
-    inputRef.current.value = '';
-  }
-
-  return (
-    <>
-      <AriaLiveRegion>
-        <Text cs={liveRegionStyle}>{message}</Text>
-      </AriaLiveRegion>
-      <Flex gap={`var(${system.space.x4})`} alignItems="flex-end">
-        <TextInput orientation="vertical">
-          <TextInput.Label>Type your message:</TextInput.Label>
-          <TextInput.Field ref={inputRef} />
-        </TextInput>
-        <PrimaryButton onClick={handleSendMessage}>Send Message</PrimaryButton>
-      </Flex>
-    </>
-  );
-};