npm - @workday/canvas-kit-docs - Versions diffs - 12.0.0-alpha.862-next.0 → 12.0.0-alpha.898-next.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (434) hide show

package/dist/mdx/react/modal/examples/IframeTest.tsx ADDED Viewed

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import {Modal} from '@workday/canvas-kit-react/modal';
+import {DeleteButton} from '@workday/canvas-kit-react/button';
+import {Flex} from '@workday/canvas-kit-react/layout';
+export default () => {
+  return (
+    <Modal>
+      <Modal.Target as={DeleteButton}>Delete Item</Modal.Target>
+      <Modal.Overlay>
+        <Modal.Card>
+          <Modal.CloseIcon aria-label="Close" />
+          <Modal.Heading>Delete Item</Modal.Heading>
+          <Modal.Body>
+            <p>Are you sure you want to delete the item?</p>
+            <Flex gap="s">
+              <Modal.CloseButton as={DeleteButton}>Delete</Modal.CloseButton>
+              <Modal.CloseButton>Cancel</Modal.CloseButton>
+            </Flex>
+            <iframe srcDoc="<html><body>Hello, <b>world</b>.<button>iframe button 1</button><button>iframe button 2</button></body></html>" />
+          </Modal.Body>
+        </Modal.Card>
+      </Modal.Overlay>
+    </Modal>
+  );
+};

package/dist/mdx/react/modal/examples/ModalWithPopup.tsx ADDED Viewed

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
+import {DeleteButton} from '@workday/canvas-kit-react/button';
+import {
+  Popup,
+  useCloseOnOutsideClick,
+  useCloseOnEscape,
+  usePopupModel,
+} from '@workday/canvas-kit-react/popup';
+import {Flex} from '@workday/canvas-kit-react/layout';
+export default () => {
+  const modal = useModalModel();
+  const popup = usePopupModel();
+  const handleDelete = () => {
+    console.log('Delete Item');
+  };
+  useCloseOnOutsideClick(popup);
+  useCloseOnEscape(popup);
+  return (
+    <>
+      <Modal model={modal}>
+        <Modal.Target as={DeleteButton}>Delete Item</Modal.Target>
+        <Modal.Overlay>
+          <Modal.Card>
+            <Modal.CloseIcon aria-label="Close" />
+            <Modal.Heading>Delete Item</Modal.Heading>
+            <Modal.Body>
+              <p>Are you sure you want to delete the item?</p>
+              <Popup model={popup}>
+                <Flex gap="s">
+                  <Popup.Target as={DeleteButton}>Yes, Delete</Popup.Target>
+                  <Popup.CloseButton>Cancel</Popup.CloseButton>
+                </Flex>
+                <Popup.Popper>
+                  <Popup.Card>
+                    <Popup.CloseIcon aria-label="Close" />
+                    <Popup.Heading>Really Delete Item</Popup.Heading>
+                    <Popup.Body>
+                      <p>Are you sure you'd like to delete the item titled 'My Item'?</p>
+                      <Flex gap="s">
+                        <Popup.CloseButton
+                          as={DeleteButton}
+                          onClick={event => {
+                            modal.events.hide(event);
+                            handleDelete();
+                          }}
+                        >
+                          Yes, Really Delete
+                        </Popup.CloseButton>
+                        <Popup.CloseButton>Cancel</Popup.CloseButton>
+                      </Flex>
+                    </Popup.Body>
+                  </Popup.Card>
+                </Popup.Popper>
+              </Popup>
+            </Modal.Body>
+          </Modal.Card>
+        </Modal.Overlay>
+      </Modal>
+    </>
+  );
+};

package/dist/mdx/react/modal/examples/ReturnFocus.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 import {DeleteButton} 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 {Flex, Box} from '@workday/canvas-kit-react/layout';
 import {Select} from '@workday/canvas-kit-react/select';

package/dist/mdx/react/modal/examples/StackedModals.tsx ADDED Viewed

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
+import {DeleteButton} from '@workday/canvas-kit-react/button';
+import {Flex} from '@workday/canvas-kit-react/layout';
+export default () => {
+  const model = useModalModel();
+  const handleDelete = () => {
+    console.log('Delete Item');
+  };
+  return (
+    <Modal model={model}>
+      <Modal.Target as={DeleteButton}>Delete Item</Modal.Target>
+      <Modal.Overlay>
+        <Modal.Card>
+          <Modal.CloseIcon aria-label="Close" />
+          <Modal.Heading>Delete Item</Modal.Heading>
+          <Modal.Body>
+            <p>Are you sure you want to delete the item?</p>
+            <Flex gap="s">
+              <Modal>
+                <Modal.Target as={DeleteButton}>Yes, Delete</Modal.Target>
+                <Modal.Overlay>
+                  <Modal.Card>
+                    <Modal.CloseIcon aria-label="Close" />
+                    <Modal.Heading>Really Delete Item</Modal.Heading>
+                    <Modal.Body>
+                      <p>
+                        Are you <em>really</em> sure you want to delete the item?
+                      </p>
+                      <Flex gap="s">
+                        <Modal.CloseButton
+                          as={DeleteButton}
+                          onClick={event => {
+                            model.events.hide(event);
+                            handleDelete();
+                          }}
+                        >
+                          Yes, Really Delete
+                        </Modal.CloseButton>
+                        <Modal.CloseButton>Cancel</Modal.CloseButton>
+                      </Flex>
+                    </Modal.Body>
+                  </Modal.Card>
+                </Modal.Overlay>
+              </Modal>
+              <Modal.CloseButton>Cancel</Modal.CloseButton>
+            </Flex>
+          </Modal.Body>
+        </Modal.Card>
+      </Modal.Overlay>
+    </Modal>
+  );
+};

package/dist/mdx/react/modal/examples/WithRadioButtons.tsx ADDED Viewed

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import {Modal} from '@workday/canvas-kit-react/modal';
+import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
+export default () => {
+  const [value, setValue] = React.useState('');
+  return (
+    <Modal>
+      <Modal.Target>With Radio Buttons</Modal.Target>
+      <Modal.Overlay>
+        <Modal.Card>
+          <Modal.CloseIcon aria-label="Close" />
+          <Modal.Heading>Select Item</Modal.Heading>
+          <Modal.Body>
+            <RadioGroup
+              name="contact"
+              data-testid="radiogroup"
+              value={value}
+              onChange={value => setValue(String(value))}
+            >
+              <Radio id="1" value="email" label="E-mail" />
+              <Radio id="2" value="phone" label="Phone" />
+            </RadioGroup>
+          </Modal.Body>
+        </Modal.Card>
+      </Modal.Overlay>
+    </Modal>
+  );
+};

package/dist/mdx/react/modal/examples/WithTooltips.tsx ADDED Viewed

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
+import {Popup, useCloseOnOutsideClick, usePopupModel} from '@workday/canvas-kit-react/popup';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+export default () => {
+  const modal = useModalModel();
+  const popup1 = usePopupModel();
+  const popup2 = usePopupModel();
+  const closeModal = (event: React.MouseEvent) => modal.events.hide(event);
+  useCloseOnOutsideClick(popup1);
+  return (
+    <>
+      <Modal model={modal}>
+        <Modal.Target>Open Modal</Modal.Target>
+        <Modal.Overlay>
+          <Modal.Card width={'auto'}>
+            <Modal.CloseIcon aria-label="Close" />
+            <Modal.Heading>Open Modal</Modal.Heading>
+            <Modal.Body>
+              <p>Open a hidable and non-hidable popups</p>
+              <Flex gap="s">
+                <Popup.Target model={popup1}>Hidable Popup</Popup.Target>
+                <Popup.Target model={popup2}>Non-hidable Popup</Popup.Target>
+                <Tooltip title="Not so sure" type="muted">
+                  <Popup.CloseButton onClick={closeModal}>Cancel</Popup.CloseButton>
+                </Tooltip>
+              </Flex>
+            </Modal.Body>
+          </Modal.Card>
+        </Modal.Overlay>
+      </Modal>
+      <Popup model={popup1}>
+        <Popup.Popper>
+          <Popup.Card>
+            <Popup.CloseIcon aria-label="Close" />
+            <Popup.Heading>Hidable Popup</Popup.Heading>
+            <Popup.Body>
+              <p>Pressing 'OK' will close the modal</p>
+              <Tooltip
+                placement="left"
+                title="Really, Really, Really, Really, Really sure"
+                type="muted"
+              >
+                <Popup.CloseButton onClick={closeModal}>OK</Popup.CloseButton>
+              </Tooltip>
+            </Popup.Body>
+          </Popup.Card>
+        </Popup.Popper>
+      </Popup>
+      <Popup model={popup2}>
+        <Popup.Popper>
+          <Popup.Card>
+            <Popup.CloseIcon aria-label="Close" />
+            <Popup.Heading>Non-hidable Popup</Popup.Heading>
+            <Popup.Body>
+              <p>Pressing 'OK' will close the modal</p>
+              <Tooltip
+                placement="left"
+                title="Really, Really, Really, Really, Really sure"
+                type="muted"
+              >
+                <Popup.CloseButton onClick={closeModal}>OK</Popup.CloseButton>
+              </Tooltip>
+            </Popup.Body>
+          </Popup.Card>
+        </Popup.Popper>
+      </Popup>
+    </>
+  );
+};

package/dist/mdx/react/pagination/pagination.mdx CHANGED Viewed

@@ -1,7 +1,4 @@
-import {SymbolDoc} from '@workday/canvas-kit-docs';
-import {Pagination} from '@workday/canvas-kit-react/pagination';
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
 import CustomRange from './examples/CustomRange';
 import JumpControls from './examples/JumpControls';
@@ -10,7 +7,6 @@ import HoistedModel from './examples/HoistedModel';
 import ResponsiveRange from './examples/ResponsiveRange';
 import RTL from './examples/RTL';
 # Canvas Kit Pagination
 `Pagination` is a

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

@@ -1,7 +1,4 @@
-import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
-import {Popup} from '@workday/canvas-kit-react/popup';
+import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
 import InitialFocus from './examples/InitialFocus';
 import MultiplePopups from './examples/MultiplePopups';
@@ -182,41 +179,68 @@ The Popup component automatically handles right-to-left rendering.
 <>
   <SymbolDoc name="Popper" fileName="/react/" />
   <SymbolDoc name="Popup" fileName="/react/" />
 </>
 ## Hooks
 <>
-<SymbolDoc name="usePopupStack" fileName="/react/" />
+  <SymbolDoc name="usePopupStack" fileName="/react/" />
+{' '}
 <SymbolDoc name="useAssistiveHideSiblings" fileName="/react/" />
+{' '}
 <SymbolDoc name="useBringToTopOnClick" fileName="/react/" />
+{' '}
 <SymbolDoc name="useCloseOnEscape" fileName="/react/" />
+{' '}
 <SymbolDoc name="useCloseOnOutsideClick" fileName="/react/" />
+{' '}
 <SymbolDoc name="useAlwaysCloseOnOutsideClick" fileName="/react/" />
+{' '}
 <SymbolDoc name="useAlwaysCloseOnOutsideClick" fileName="/react/" />
+{' '}
 <SymbolDoc name="useCloseOnTargetHidden" fileName="/react/" />
+{' '}
 <SymbolDoc name="useDisableBodyScroll" fileName="/react/" />
+{' '}
 <SymbolDoc name="useFocusRedirect" fileName="/react/" />
+{' '}
 <SymbolDoc name="useFocusTrap" fileName="/react/" />
+{' '}
 <SymbolDoc name="useInitialFocus" fileName="/react/" />
+{' '}
 <SymbolDoc name="useReturnFocus" fileName="/react/" />
+{' '}
 <SymbolDoc name="useTransferOnFullscreenEnter" fileName="/react/" />
-<SymbolDoc name="useTransferOnFullscreenExit" fileName="/react/" />
+  <SymbolDoc name="useTransferOnFullscreenExit" fileName="/react/" />
 </>
 ## Specifications

package/dist/mdx/react/popup/examples/CloseOnTargetHiddenTest.tsx ADDED Viewed

@@ -0,0 +1,54 @@
+import React from 'react';
+import {
+  Popup,
+  useCloseOnEscape,
+  useCloseOnTargetHidden,
+  usePopupModel,
+} from '@workday/canvas-kit-react/popup';
+export default () => {
+  const model = usePopupModel();
+  useCloseOnEscape(model);
+  useCloseOnTargetHidden(model);
+  return (
+    <div
+      style={{width: 400, height: 400, overflow: 'scroll', padding: 4, position: 'relative'}}
+      data-testid="scroll-area"
+    >
+      <div style={{width: 950, height: 950}}>
+        <p style={{marginBottom: 400}}>Scroll down</p>
+        <p>Scroll right and click on the button</p>
+        <Popup model={model}>
+          <div
+            style={{
+              position: 'absolute',
+              width: 950,
+              height: 950,
+              display: 'flex',
+              top: 0,
+              left: 0,
+              justifyContent: 'center',
+            }}
+          >
+            <Popup.Target data-testid="target" style={{alignSelf: 'center'}}>
+              Open Popup
+            </Popup.Target>
+          </div>
+          <Popup.Popper>
+            <Popup.Card>
+              <Popup.CloseIcon aria-label="Close" />
+              <Popup.Body>
+                <p>
+                  Scroll in any direction. The popup should close when at least 50% of the target
+                  button is hidden from view
+                </p>
+              </Popup.Body>
+            </Popup.Card>
+          </Popup.Popper>
+        </Popup>
+      </div>
+    </div>
+  );
+};

package/dist/mdx/react/popup/examples/ComboboxWithinPopup.tsx ADDED Viewed

@@ -0,0 +1,48 @@
+import React from 'react';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {Combobox} from '@workday/canvas-kit-react/combobox';
+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 (
+    <Popup model={model}>
+      <Popup.Target as={SecondaryButton}>Open Popup</Popup.Target>
+      <Popup.Popper>
+        <Popup.Card>
+          <Popup.CloseIcon aria-label="Close" />
+          <Popup.Heading>Popup With Combobox</Popup.Heading>
+          <Popup.Body>
+            <FormField orientation="vertical">
+              <FormField.Label>Choose Your Food</FormField.Label>
+              <Combobox items={['Pizza', 'Cheeseburger', 'Fries', 'Hot Dog']}>
+                <FormField.Input as={Combobox.Input} />
+                <Combobox.Menu.Popper>
+                  <Combobox.Menu.Card>
+                    <Combobox.Menu.List>
+                      {item => <Combobox.Menu.Item>{item}</Combobox.Menu.Item>}
+                    </Combobox.Menu.List>
+                  </Combobox.Menu.Card>
+                </Combobox.Menu.Popper>
+              </Combobox>
+            </FormField>
+          </Popup.Body>
+        </Popup.Card>
+      </Popup.Popper>
+    </Popup>
+  );
+};

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

@@ -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>
+  );
+};