@workday/canvas-kit-docs 6.0.0-beta.0-next.15 → 6.0.2

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>