@workday/canvas-kit-docs 12.0.0-alpha.855-next.0 → 12.0.0-alpha.898-next.0

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

@@ -0,0 +1,143 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {DeleteButton, SecondaryButton} from '@workday/canvas-kit-react/button';
+import {useMount} from '@workday/canvas-kit-react/common';
+import {
+  Popup,
+  useCloseOnOutsideClick,
+  useCloseOnEscape,
+  usePopupModel,
+  usePopupStack,
+  useBringToTopOnClick,
+  useInitialFocus,
+  useReturnFocus,
+} from '@workday/canvas-kit-react/popup';
+
+interface WindowProps {
+  top: number;
+  left: number;
+  heading: string;
+  children: React.ReactNode;
+  relativeNode: React.RefObject<HTMLDivElement>;
+}
+
+const Window = ({children, heading, relativeNode, top, left}: WindowProps) => {
+  const model = usePopupModel({
+    initialVisibility: 'visible',
+  });
+
+  usePopupStack(model.state.stackRef);
+  useBringToTopOnClick(model);
+
+  // position Window relative to a container
+  useMount(() => {
+    const element = model.state.stackRef.current;
+    const rect = relativeNode.current.getBoundingClientRect();
+    element.style.position = 'absolute';
+    element.style.top = `${top + rect.top}px`;
+    element.style.left = `${left + rect.left}px`;
+  });
+
+  return ReactDOM.createPortal(
+    <Popup model={model}>
+      <Popup.Card width={500}>
+        <Popup.Heading>{heading}</Popup.Heading>
+        <Popup.Body>{children}</Popup.Body>
+      </Popup.Card>
+    </Popup>,
+    model.state.stackRef.current
+  );
+};
+
+const TempPopup = ({
+  heading,
+  deleteText,
+  children,
+}: {
+  heading: string;
+  deleteText: string;
+  children: ({onClose}: {onClose: () => void}) => React.ReactNode;
+}) => {
+  const model = usePopupModel();
+
+  useInitialFocus(model);
+  useReturnFocus(model);
+  useCloseOnOutsideClick(model);
+  useCloseOnEscape(model);
+
+  return (
+    <Popup model={model}>
+      <Popup.Target as={DeleteButton} style={{marginRight: '16px'}}>
+        {deleteText}
+      </Popup.Target>
+      <Popup.Popper>
+        <Popup.Card width={400} padding="s">
+          <Popup.Heading>{heading}</Popup.Heading>
+          <Popup.Body>{children({onClose: model.events.hide})}</Popup.Body>
+        </Popup.Card>
+      </Popup.Popper>
+    </Popup>
+  );
+};
+
+export default () => {
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  return (
+    <div ref={ref} style={{height: 420}}>
+      <Window heading="Window 1" top={50} left={50} relativeNode={ref}>
+        <Tooltip title="Really long tooltip showing how popup stacks overlap 1">
+          <span tabIndex={0}>Contents of Window 1</span>
+        </Tooltip>
+      </Window>
+      <Window heading="Window 2" top={100} left={250} relativeNode={ref}>
+        <Tooltip title="Really long tooltip showing how popup stacks overlap 2">
+          <span tabIndex={0}>Contents of Window 2</span>
+        </Tooltip>
+      </Window>
+      <Window heading="Window 4" top={300} left={250} relativeNode={ref}>
+        <div>
+          <Tooltip title="Really long tooltip showing how popup stacks overlap 3">
+            <span tabIndex={0}>Contents of Window 4</span>
+          </Tooltip>
+        </div>
+      </Window>
+      <Window heading="Window 3" top={200} left={75} relativeNode={ref}>
+        <div>
+          <Tooltip title="Really long tooltip showing how popup stacks overlap 4">
+            <span tabIndex={0} onClick={() => console.log('clicked')}>
+              Contents of Window 3
+            </span>
+          </Tooltip>
+          <div>
+            <TempPopup heading="Delete Item" deleteText="Delete Item">
+              {({onClose}) => (
+                <>
+                  <div style={{marginBottom: '24px'}}>
+                    Are you sure you'd like to delete the item titled 'My Item'?
+                  </div>
+                  <TempPopup heading="Really Delete Item" deleteText="Delete">
+                    {({onClose}) => (
+                      <>
+                        <div style={{marginBottom: '24px'}}>
+                          Are you REALLY sure you'd like to delete the item titled 'My Item'?
+                        </div>
+
+                        <DeleteButton style={{marginRight: '16px'}} onClick={onClose}>
+                          Really Delete
+                        </DeleteButton>
+                        <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
+                      </>
+                    )}
+                  </TempPopup>
+                  <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
+                </>
+              )}
+            </TempPopup>
+          </div>
+        </div>
+      </Window>
+    </div>
+  );
+};

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

@@ -0,0 +1,82 @@
+import React from 'react';
+import {PopperController} from '../../../../../utils/storybook';
+import {DeleteButton} from '@workday/canvas-kit-react/button';
+import {
+  Popup,
+  usePopupModel,
+  useCloseOnEscape,
+  useCloseOnOutsideClick,
+  useInitialFocus,
+  useReturnFocus,
+  Placement,
+} from '@workday/canvas-kit-react/popup';
+import {Box, Flex} from '@workday/canvas-kit-react/layout';
+
+export default () => {
+  const [placement, setPlacement] = React.useState<Placement>('top');
+  const [marginLeftBtn, setMarginLeftBtn] = React.useState(0);
+  const [marginRightBtn, setMarginRightBtn] = React.useState(0);
+  const model = usePopupModel();
+
+  useCloseOnOutsideClick(model);
+  useCloseOnEscape(model);
+  useInitialFocus(model);
+  useReturnFocus(model);
+
+  const handleDelete = () => {
+    console.log('Delete Item');
+  };
+
+  const handlePlacement = (placement: Placement) => {
+    setPlacement(placement);
+  };
+
+  const handleMarginLeftBtn = (marginLeftBtn: number) => {
+    setMarginLeftBtn(marginLeftBtn);
+  };
+
+  const handleMarginRightBtn = (marginLeftBtn: number) => {
+    setMarginRightBtn(marginLeftBtn);
+  };
+
+  return (
+    <div style={{height: 1200}} data-testid="scroll-area-fallback-placement">
+      <PopperController
+        marginLeftBtn={marginLeftBtn}
+        marginRightBtn={marginRightBtn}
+        placement={placement}
+        onSetPlacement={handlePlacement}
+        onSetMarginLeftBtn={handleMarginLeftBtn}
+        onSetMarginRightBtn={handleMarginRightBtn}
+      >
+        <Flex width="100%" marginTop={240} justifyContent="center" alignItems="start">
+          <Popup model={model}>
+            <Popup.Target
+              as={DeleteButton}
+              style={{marginLeft: marginLeftBtn, marginRight: marginRightBtn}}
+            >
+              Delete Item
+            </Popup.Target>
+            <Popup.Popper placement={placement}>
+              <Popup.Card width={400}>
+                <Popup.CloseIcon aria-label="Close" />
+                <Popup.Heading>Delete Item</Popup.Heading>
+                <Popup.Body>
+                  <Box as="p" marginY="zero">
+                    Are you sure you'd like to delete the item titled 'My Item'?
+                  </Box>
+                </Popup.Body>
+                <Flex gap="s" padding="xxs" marginTop="xxs">
+                  <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
+                    Delete
+                  </Popup.CloseButton>
+                  <Popup.CloseButton>Cancel</Popup.CloseButton>
+                </Flex>
+              </Popup.Card>
+            </Popup.Popper>
+          </Popup>
+        </Flex>
+      </PopperController>
+    </div>
+  );
+};

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {
+  Popup,
+  useCloseOnOutsideClick,
+  useCloseOnEscape,
+  usePopupModel,
+} from '@workday/canvas-kit-react/popup';
+
+export default () => {
+  const popup1 = usePopupModel();
+  const popup2 = usePopupModel();
+
+  useCloseOnOutsideClick(popup1);
+  useCloseOnEscape(popup1);
+
+  return (
+    <Flex gap="s">
+      <Popup model={popup1}>
+        <Popup.Target>Open Popup 1</Popup.Target>
+        <Popup.Popper>
+          <Popup.Card aria-label="Popup 1">
+            <Popup.CloseIcon aria-label="Close" size="small" />
+            <Popup.Body>
+              <p>Contents of Popup 1</p>
+              <Popup.Target model={popup2}>Open Popup 2</Popup.Target>
+            </Popup.Body>
+          </Popup.Card>
+        </Popup.Popper>
+      </Popup>
+      <Popup model={popup2}>
+        <Popup.Popper>
+          <Popup.Card aria-label="Popup 1">
+            <Popup.CloseIcon aria-label="Close" size="small" />
+            <Popup.Heading>Popup 2 (Not hidable on outside click)</Popup.Heading>
+            <Popup.Body>Contents of Popup 2</Popup.Body>
+          </Popup.Card>
+        </Popup.Popper>
+      </Popup>
+    </Flex>
+  );
+};

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

@@ -0,0 +1,68 @@
+import React from 'react';
+
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {TertiaryButton} from '@workday/canvas-kit-react/button';
+import {
+  Popup,
+  useCloseOnOutsideClick,
+  useCloseOnEscape,
+  usePopupModel,
+  useInitialFocus,
+  useReturnFocus,
+} from '@workday/canvas-kit-react/popup';
+
+export default () => {
+  const model = usePopupModel();
+
+  useCloseOnOutsideClick(model);
+  useCloseOnEscape(model);
+  useInitialFocus(model);
+  useReturnFocus(model);
+
+  return (
+    <div
+      style={{width: 400, height: 400, overflow: 'scroll', padding: 4}}
+      data-testid="scroll-area"
+    >
+      <div style={{width: 950}}>
+        <p style={{marginBottom: 400}}>Scroll down</p>
+        <p>Scroll right and click on the button</p>
+        <Popup model={model}>
+          <FormField id="return-focus-text-input" cs={{marginLeft: 400}}>
+            <FormField.Label>Name</FormField.Label>
+            <FormField.Input as={TextInput} />
+          </FormField>
+          <Popup.Target style={{marginBottom: 400, marginLeft: 410}} data-testid="target">
+            Open Popup
+          </Popup.Target>
+          <Popup.Popper>
+            <Popup.Card>
+              <Popup.CloseIcon aria-label="Close" />
+              <Popup.Body>
+                <p>The "Open Popup" button should not receive focus if:</p>
+                <ul>
+                  <li>You click on the input</li>
+                  <li>
+                    You scroll the container so that less than half of the "Open Popup" is showing
+                  </li>
+                  <li>
+                    <TertiaryButton
+                      data-testid="focus-text-input-link"
+                      onClick={() => {
+                        model.events.hide();
+                        document.getElementById('input-return-focus-text-input').focus();
+                      }}
+                    >
+                      You click this link
+                    </TertiaryButton>
+                  </li>
+                </ul>
+              </Popup.Body>
+            </Popup.Card>
+          </Popup.Popper>
+        </Popup>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {TertiaryButton} from '@workday/canvas-kit-react/button';
+import {
+  Popup,
+  useCloseOnOutsideClick,
+  useCloseOnEscape,
+  usePopupModel,
+  useInitialFocus,
+  useReturnFocus,
+} from '@workday/canvas-kit-react/popup';
+import {menuGroupIcon} from '@workday/canvas-system-icons-web';
+
+export default () => {
+  const model = usePopupModel();
+
+  useCloseOnOutsideClick(model);
+  useCloseOnEscape(model);
+  useInitialFocus(model);
+  useReturnFocus(model);
+
+  return (
+    <Popup model={model}>
+      <Tooltip title="Open Popup">
+        <Popup.Target as={TertiaryButton} icon={menuGroupIcon} />
+      </Tooltip>
+      <Popup.Popper>
+        <Popup.Card>
+          <Popup.CloseIcon aria-label="Close" />
+          <Popup.Heading>Popup</Popup.Heading>
+          <Popup.Body>Contents</Popup.Body>
+        </Popup.Card>
+      </Popup.Popper>
+    </Popup>
+  );
+};

package/dist/mdx/react/radio/Radio.mdx

@@ -1,7 +1,9 @@
-import {SymbolDoc, Specifications, InformationHighlight} from '@workday/canvas-kit-docs';
-
-import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
-
+import {
+  ExampleCodeBlock,
+  InformationHighlight,
+  SymbolDoc,
+  Specifications,
+} from '@workday/canvas-kit-docs';
 import Alert from './examples/Alert';
 import Basic from './examples/Basic';
 import Disabled from './examples/Disabled';
@@ -27,18 +29,6 @@ yarn add @workday/canvas-kit-react
 
 ## Usage
 
-<InformationHighlight style={{margin: '1.5rem 0'}}>
-  <InformationHighlight.Icon />
-  <InformationHighlight.Heading>Note</InformationHighlight.Heading>
-  <InformationHighlight.Body>
-    These examples are using FormField from Preview. We can plan to promote this component to the
-    Main package in a future major version.
-  </InformationHighlight.Body>
-  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-form-field--basic">
-    View Form Field (Preview) Documentation
-  </InformationHighlight.Link>
-</InformationHighlight>
-
 ### Basic Example
 
 Radio Buttons are intended to be grouped together using a Radio Group.

package/dist/mdx/react/radio/examples/Alert.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
 import {space} from '@workday/canvas-kit-react/tokens';

package/dist/mdx/react/radio/examples/Disabled.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
 

package/dist/mdx/react/radio/examples/Error.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
 

package/dist/mdx/react/radio/examples/LabelPosition.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
 
@@ -11,7 +11,7 @@ export default () => {
   };
 
   return (
-    <FormField orientation="horizontal" as="fieldset">
+    <FormField orientation="horizontalStart" as="fieldset">
       <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
       <FormField.Input as={RadioGroup} name={useUniqueId()} onChange={handleChange} value={value}>
         <Radio label="Deep dish" value="deep-dish" />

package/dist/mdx/react/radio/examples/NoValue.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 import {Subtext} from '@workday/canvas-kit-react/text';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
 
 export default () => {
-  const [value, setValue] = React.useState<string | number>(0);
+  const [value, setValue] = React.useState<string | number>('');
 
   const handleChange = (value: string | number) => {
     setValue(value);

package/dist/mdx/react/radio/examples/RefForwarding.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
 

package/dist/mdx/react/radio/examples/Required.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
 

package/dist/mdx/react/segmented-control/SegmentedControl.mdx

@@ -1,10 +1,6 @@
-import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
-
-import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
-
+import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
 
-
 # Canvas Kit Segmented Control
 
 A linear set of two or more segments, each of which functions as a mutually exclusive button. This

package/dist/mdx/react/select/Select.mdx

@@ -1,7 +1,9 @@
-import {SymbolDoc, Specifications, InformationHighlight} from '@workday/canvas-kit-docs';
-
-import {Select} from '@workday/canvas-kit-react/select';
-
+import {
+  ExampleCodeBlock,
+  InformationHighlight,
+  SymbolDoc,
+  Specifications,
+} from '@workday/canvas-kit-docs';
 import Alert from './examples/Alert';
 import Basic from './examples/Basic';
 import Complex from './examples/Complex';
@@ -17,7 +19,7 @@ import HoistedModel from './examples/HoistedModel';
 import RefForwarding from './examples/RefForwarding';
 import FetchingDynamicItems from './examples/FetchingDynamicItems';
 import Placeholder from './examples/Placeholder';
-import InitialSelectedItem from './examples/InitialSelectedItem';
+import InitialSelectedItem from './examples/InitialSelectedItem';import {Table} from '@workday/canvas-kit-react/table';
 
 
 # Canvas Kit Select
@@ -34,18 +36,6 @@ yarn add @workday/canvas-kit-react
 
 ## Usage
 
-<InformationHighlight style={{margin: '1.5rem 0'}}>
-  <InformationHighlight.Icon />
-  <InformationHighlight.Heading>Note</InformationHighlight.Heading>
-  <InformationHighlight.Body>
-    These examples are using FormField from Preview. We can plan to promote this component to the
-    Main package in a future major version.
-  </InformationHighlight.Body>
-  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-form-field--basic">
-    View Form Field (Preview) Documentation
-  </InformationHighlight.Link>
-</InformationHighlight>
-
 ### Basic Example
 
 `Select` supports a
@@ -119,13 +109,13 @@ Set the `disabled` prop of `Select.Input` to prevent users from interacting with
 
 In order to disable items and prevent users from interacting with them:
 
-1. Set the `nonInteractiveIds` prop of `Select` to an array of disabled item `id`s. If your items
-   are an array of `strings` this will be just the text value. If your items are an array of
-   `objects`, this will be that value of the `id` property. This will disable interaction for those
-   items and exclude them from type-ahead.
+1.  Set the `nonInteractiveIds` prop of `Select` to an array of disabled item `id`s. If your items
+    are an array of `strings` this will be just the text value. If your items are an array of
+    `objects`, this will be that value of the `id` property. This will disable interaction for those
+    items and exclude them from type-ahead.
 
-2. Set the `aria-disabled` attribute of all disabled `Select.Item`s to `true`. This ensures the
-   items are styled as disabled.
+2.  Set the `aria-disabled` attribute of all disabled `Select.Item`s to `true`. This ensures the
+    items are styled as disabled.
 
 The following example adds the string value of the items we want disable to `nonInteractiveIds` and
 sets `aria-disabled` for the disabled items.
@@ -139,11 +129,11 @@ accepts [system icons](/assets/system-icons/) from `@workday/canvas-system-icons
 
 In order to render the icon for the selected item in the `Select.Input`:
 
-1. Obtain a reference to the `model` by registering your `items` with `useSelectModel`.
-2. Get the selected item:
-   `const selectedItem = model.navigation.getItem(model.state.selectedIds[0], model)`
-3. Pass the icon for the selected item to the input:
-   `<Select.Input inputStartIcon={selectedItem.value.icon}>`
+1.  Obtain a reference to the `model` by registering your `items` with `useSelectModel`.
+2.  Get the selected item:
+    `const selectedItem = model.navigation.getItem(model.state.selectedIds[0], model)`
+3.  Pass the icon for the selected item to the input:
+    `<Select.Input inputStartIcon={selectedItem.value.icon}>`
 
 > **Note: `data-id` on `Select.Item` must match the `id` property in your array of objects. This
 > ensures proper keyboard handling and type-ahead.**

package/dist/mdx/react/select/examples/Alert.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {createStyles} from '@workday/canvas-kit-styling';
@@ -25,18 +25,20 @@ export default () => {
   };
   return (
     <Flex cs={parentContainerStyles}>
-      <Select items={options}>
-        <FormField error="alert">
-          <FormField.Label>Contact</FormField.Label>
-          <FormField.Input as={Select.Input} onChange={e => handleChange(e)} id="alert-select" />
-          <Select.Popper>
-            <Select.Card>
-              <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
-            </Select.Card>
-          </Select.Popper>
-          <FormField.Hint>Please choose a form of contact.</FormField.Hint>
-        </FormField>
-      </Select>
+      <FormField error="alert">
+        <FormField.Label>Contact</FormField.Label>
+        <FormField.Field>
+          <Select items={options}>
+            <FormField.Input as={Select.Input} onChange={e => handleChange(e)} id="alert-select" />
+            <Select.Popper>
+              <Select.Card>
+                <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
+              </Select.Card>
+            </Select.Popper>
+            <FormField.Hint>Please choose a form of contact.</FormField.Hint>
+          </Select>
+        </FormField.Field>
+      </FormField>
       Selected value: {value}
     </Flex>
   );