@workday/canvas-kit-docs 5.3.0-next.3 → 5.3.1

package/dist/mdx/preview-react/menu/examples/ContextMenu.tsx

@@ -1,49 +1,65 @@
 import * as React from 'react';
 
-import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+import {createComponent, useForkRef} from '@workday/canvas-kit-react/common';
 import {Menu, MenuItem} from '@workday/canvas-kit-preview-react/menu';
 import {
   Popup,
+  PopupModelContext,
   usePopupModel,
   useAlwaysCloseOnOutsideClick,
   useCloseOnEscape,
 } from '@workday/canvas-kit-react/popup';
 
-import {ContextMenuTarget} from './ContextMenuTarget';
+const ContextMenuTarget = createComponent('div')({
+  displayName: 'Popup.ContextMenuTarget',
+  Component: ({children, ...elemProps}, ref, Element) => {
+    const model = React.useContext(PopupModelContext);
+    const elementRef = useForkRef(ref, model.state.targetRef as any);
 
-export default () => {
-  const canvasTheme = {
-    canvas: {
-      direction: ContentDirection.LTR,
-    },
-  };
+    const onContextMenu = (event: React.MouseEvent) => {
+      if (model.state.visibility === 'visible') {
+        model.events.hide({event});
+      } else if (model.state.visibility === 'hidden') {
+        model.events.show({event});
+      }
+
+      // Prevent the default context menu from showing to avoid double menus
+      event.preventDefault();
+    };
 
+    return (
+      <Element ref={elementRef} onContextMenu={onContextMenu} {...elemProps}>
+        {children}
+      </Element>
+    );
+  },
+});
+
+export default () => {
   const model = usePopupModel();
 
   useAlwaysCloseOnOutsideClick(model);
   useCloseOnEscape(model);
 
   return (
-    <CanvasProvider theme={canvasTheme}>
-      <Popup model={model}>
-        <ContextMenuTarget style={{display: 'inline'}} tabIndex={0}>
-          Right click on this text (Context menu target)
-        </ContextMenuTarget>
-        <Popup.Popper>
-          <Menu onClose={model.events.hide}>
-            <MenuItem>Back</MenuItem>
-            <MenuItem>Forward</MenuItem>
-            <MenuItem>Reload</MenuItem>
-            <MenuItem hasDivider>Bookmark Page</MenuItem>
-            <MenuItem>Save Page As...</MenuItem>
-            <MenuItem>Select All</MenuItem>
-            <MenuItem hasDivider>Take Screenshot</MenuItem>
-            <MenuItem hasDivider>View Page Source</MenuItem>
-            <MenuItem>Inspect Accessibility Properties</MenuItem>
-            <MenuItem>Inspect</MenuItem>
-          </Menu>
-        </Popup.Popper>
-      </Popup>
-    </CanvasProvider>
+    <Popup model={model}>
+      <ContextMenuTarget style={{display: 'inline'}} tabIndex={0}>
+        Right click on this text (Context menu target)
+      </ContextMenuTarget>
+      <Popup.Popper>
+        <Menu onClose={model.events.hide}>
+          <MenuItem>Back</MenuItem>
+          <MenuItem>Forward</MenuItem>
+          <MenuItem>Reload</MenuItem>
+          <MenuItem hasDivider>Bookmark Page</MenuItem>
+          <MenuItem>Save Page As...</MenuItem>
+          <MenuItem>Select All</MenuItem>
+          <MenuItem hasDivider>Take Screenshot</MenuItem>
+          <MenuItem hasDivider>View Page Source</MenuItem>
+          <MenuItem>Inspect Accessibility Properties</MenuItem>
+          <MenuItem>Inspect</MenuItem>
+        </Menu>
+      </Popup.Popper>
+    </Popup>
   );
 };

package/dist/mdx/preview-react/menu/examples/CustomMenuItem.tsx

@@ -4,10 +4,10 @@ import {Menu, MenuItem} from '@workday/canvas-kit-preview-react/menu';
 
 export default () => {
   return (
-    <Menu title="Menu Title">
+    <Menu>
       <MenuItem>First Item</MenuItem>
       <MenuItem>Second Item</MenuItem>
-      <li role="menuItem" id="customMenu-3" tabIndex={-1} style={{listStyle: 'none'}}>
+      <li role="menuitem" tabIndex={-1} style={{listStyle: 'none'}}>
         Third Item (custom)
       </li>
     </Menu>

package/dist/mdx/preview-react/menu/examples/Icons.tsx

@@ -10,7 +10,7 @@ import {Menu, MenuItem} from '@workday/canvas-kit-preview-react/menu';
 
 export default () => {
   return (
-    <Menu title="Menu Title">
+    <Menu>
       <MenuItem icon={uploadCloudIcon}>First Item</MenuItem>
       <MenuItem icon={setupIcon}>Second Item (with a really really really long label)</MenuItem>
       <MenuItem isDisabled icon={uploadCloudIcon} secondaryIcon={taskContactIcon}>

package/dist/mdx/preview-react/menu/examples/ManyItems.tsx

@@ -4,11 +4,11 @@ import {Menu, MenuItem} from '@workday/canvas-kit-preview-react/menu';
 
 export default () => {
   return (
-    <Menu title="Menu Titles">
+    <Menu>
       {'One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen'
         .split(' ')
         .map(item => {
-          return <MenuItem>Item {item}</MenuItem>;
+          return <MenuItem key={item}>Item {item}</MenuItem>;
         })}
     </Menu>
   );

package/dist/mdx/react/action-bar/ActionBar.mdx

@@ -51,6 +51,6 @@ At 575px, responsive styles will take effect:
 
 ## Props
 
-Undocumented props are spread to the underlying container `div` element.
+Undocumented props are spread to the underlying container `<div>` element.
 
 <ArgsTable of={ActionBar} />

package/dist/mdx/react/button/button/Button.mdx

@@ -39,7 +39,7 @@ should take. Not all screens require a Primary Button.
 
 #### Props
 
-Undocumented props are spread to the underlying `button` element.
+Undocumented props are spread to the underlying `<button>` element.
 
 <ArgsTable of={PrimaryButton} />
 
@@ -55,7 +55,7 @@ Use the `inverse` variants on dark or colorful backgrounds.
 
 #### Props
 
-Undocumented props are spread to the underlying `button` element.
+Undocumented props are spread to the underlying `<button>` element.
 
 <ArgsTable of={SecondaryButton} />
 
@@ -72,7 +72,7 @@ Use the `inverse` variants on dark or colorful backgrounds.
 
 #### Props
 
-Undocumented props are spread to the underlying `button` element.
+Undocumented props are spread to the underlying `<button>` element.
 
 <ArgsTable of={TertiaryButton} />
 
@@ -86,16 +86,16 @@ before deleting.
 
 #### Props
 
-Undocumented props are spread to the underlying `button` element.
+Undocumented props are spread to the underlying `<button>` element.
 
 <ArgsTable of={DeleteButton} />
 
 ### Accessible Use of the `as` Prop
 
 Like many of our components, Buttons accept an `as` prop, which lets you change the underlying
-semantic element - usually an `a` (anchor), or a `button`. This should be done with caution to
-ensure the best accessibility. Generally, `button` elements should be used for actions, and `a`
-(anchor) elements should be used for navigation.
+semantic element - usually an `<a>`, or a `<button>`. This should be done with caution to ensure the
+best accessibility. Generally, `<button>` elements should be used for actions, and `<a>` elements
+should be used for navigation.
 
 ## Specifications
 

package/dist/mdx/react/button/icon-button/IconButton.mdx

@@ -98,6 +98,6 @@ The `toggle` prop can be used to make icon buttons toggleable.
 
 ## Props
 
-Undocumented props are spread to the underlying `button` element.
+Undocumented props are spread to the underlying `<button>` element.
 
 <ArgsTable of={IconButton} />

package/dist/mdx/react/pagination/PropTables.splitprops.tsx

@@ -0,0 +1,47 @@
+import {
+  PaginationModel,
+  PaginationState,
+  PaginationEvents,
+  UsePaginationModelConfig,
+} from '@workday/canvas-kit-react/pagination';
+
+// <ArgsTable of={Pagination} /> generates a very large props table given that
+// PaginationProps includes FlexProps. Use this dummy component instead to
+// limit the props shown.
+export const PaginationHoistedComponent = (_: {model: PaginationModel}) => <div />;
+
+// <ArgsTable of={Pagination.PageButton} /> generates a props table with
+// IconButton props. Use this dummy component instead to limit the props shown.
+export const PageButtonComponent = (_: {pageNumber: number}) => <div />;
+
+// <ArgsTable of={Pagination.PageListComponent} /> generates a very large props
+// table given that PageListProps includes FlexProps. Use this dummy component
+// instead to limit the props shown.
+export const PageListComponent = (_: {
+  /**
+   * Accepts child elements or a render prop.
+   */
+  children: (model: PaginationModel) => React.ReactNode | React.ReactNode;
+}) => <div />;
+
+// <ArgsTable of={Pagination.AdditionalDetails} /> generates a very large props
+// table given that AdditionalDetailsProps includes FlexProps. Use this dummy
+// component instead to limit the props shown.
+export const AdditionalDetailsComponent = (_: {
+  /**
+   * Accepts child elements or a render prop.
+   */
+  children: (model: PaginationModel) => React.ReactNode | React.ReactNode;
+  /**
+   * @default true
+   */
+  shouldAnnounceToScreenReader?: boolean;
+  /**
+   * @default false
+   */
+  shouldHideDetails?: boolean;
+}) => <div />;
+
+export const PaginationModelConfigComponent = (_: UsePaginationModelConfig) => <div />;
+export const PaginationStateComponent = (_: PaginationState) => <div />;
+export const PaginationEventsComponent = (_: PaginationEvents) => <div />;

package/dist/mdx/react/pagination/examples/{StepControls.tsx → Basic.tsx}

@@ -30,7 +30,7 @@ export default () => {
         </Pagination.PageList>
         <Pagination.StepToNextButton aria-label="Next" />
       </Pagination.Controls>
-      <Pagination.AdditionalDetails shouldHideDetails>
+      <Pagination.AdditionalDetails>
         {({state}) =>
           `${getVisibleResultsMin(state.currentPage, resultCount)}-${getVisibleResultsMax(
             state.currentPage,

package/dist/mdx/react/pagination/examples/GoToForm.tsx

@@ -33,7 +33,7 @@ export default () => {
         <Pagination.JumpToLastButton aria-label="Last" />
         <Pagination.GoToForm>
           <Pagination.GoToTextInput aria-label="Go to page number" />
-          <Pagination.GoToLabel>{({state}) => `of ${totalCount} results`}</Pagination.GoToLabel>
+          <Pagination.GoToLabel>{({state}) => `of ${state.lastPage} pages`}</Pagination.GoToLabel>
         </Pagination.GoToForm>
       </Pagination.Controls>
       <Pagination.AdditionalDetails shouldHideDetails>

package/dist/mdx/react/pagination/examples/HoistedModel.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {
   Pagination,
   getLastPage,
@@ -16,30 +17,43 @@ export default () => {
     lastPage,
     onPageChange: number => console.log(number),
   });
+
   return (
-    <Pagination aria-label="Pagination" model={model}>
-      <Pagination.Controls>
-        <Pagination.StepToPreviousButton aria-label="Previous" />
-        <Pagination.PageList>
+    <>
+      <Pagination aria-label="Pagination" model={model}>
+        <Pagination.Controls>
+          <Pagination.StepToPreviousButton aria-label="Previous" />
+          <Pagination.PageList>
+            {({state}) =>
+              state.range.map(pageNumber => (
+                <Pagination.PageListItem key={pageNumber}>
+                  <Pagination.PageButton
+                    aria-label={`Page ${pageNumber}`}
+                    pageNumber={pageNumber}
+                  />
+                </Pagination.PageListItem>
+              ))
+            }
+          </Pagination.PageList>
+          <Pagination.StepToNextButton aria-label="Next" />
+        </Pagination.Controls>
+        <Pagination.AdditionalDetails shouldHideDetails>
           {({state}) =>
-            state.range.map(pageNumber => (
-              <Pagination.PageListItem key={pageNumber}>
-                <Pagination.PageButton aria-label={`Page ${pageNumber}`} pageNumber={pageNumber} />
-              </Pagination.PageListItem>
-            ))
+            `${getVisibleResultsMin(state.currentPage, resultCount)}-${getVisibleResultsMax(
+              state.currentPage,
+              resultCount,
+              totalCount
+            )} of ${totalCount} results`
           }
-        </Pagination.PageList>
-        <Pagination.StepToNextButton aria-label="Next" />
-      </Pagination.Controls>
-      <Pagination.AdditionalDetails shouldHideDetails>
-        {({state}) =>
-          `${getVisibleResultsMin(state.currentPage, resultCount)}-${getVisibleResultsMax(
-            state.currentPage,
-            resultCount,
-            totalCount
-          )} of ${totalCount} results`
-        }
-      </Pagination.AdditionalDetails>
-    </Pagination>
+        </Pagination.AdditionalDetails>
+      </Pagination>
+      <SecondaryButton
+        onClick={() => {
+          model.events.goTo(7);
+        }}
+      >
+        Go to Page 7
+      </SecondaryButton>
+    </>
   );
 };

package/dist/mdx/react/pagination/examples/RTL.tsx

@@ -36,7 +36,7 @@ export default () => {
           <Pagination.JumpToLastButton aria-label="Last" />
           <Pagination.GoToForm>
             <Pagination.GoToTextInput aria-label="Go to page number" />
-            <Pagination.GoToLabel>{() => `من 100 صفحات`}</Pagination.GoToLabel>
+            <Pagination.GoToLabel>{({state}) => `از ${state.lastPage} صفحه`}</Pagination.GoToLabel>
           </Pagination.GoToForm>
         </Pagination.Controls>
         <Pagination.AdditionalDetails shouldHideDetails>