@workday/canvas-kit-react 8.5.0-339-next.0 → 8.5.0-342-next.2

package/dist/es6/modal/lib/ModalOverlay.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { BoxProps } from '@workday/canvas-kit-react/layout';
 export interface ModalOverlayProps extends BoxProps {
 }
-export declare const ModalOverlay: import("../../common").ElementComponentM<"div", ModalOverlayProps, {
+export declare const ModalOverlay: import("@workday/canvas-kit-react/common").ElementComponentM<"div", ModalOverlayProps, {
     state: {
         stackRef: React.RefObject<HTMLDivElement>;
         targetRef: React.RefObject<HTMLButtonElement>;
@@ -10,7 +10,7 @@ export declare const ModalOverlay: import("../../common").ElementComponentM<"div
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
+        visibility: "hidden" | "visible";
     };
     events: {
         updatePlacement(data: {
@@ -28,7 +28,7 @@ export declare const useModalOverlay: <P extends {}, R>(model: {
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
+        visibility: "hidden" | "visible";
     };
     events: {
         updatePlacement(data: {
@@ -37,7 +37,7 @@ export declare const useModalOverlay: <P extends {}, R>(model: {
         show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
     };
-}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
+}, elemProps?: P | undefined, ref?: React.Ref<R> | undefined) => {
     ref: undefined;
 } & P & (R extends HTMLOrSVGElement ? {
     ref: React.Ref<R>;

package/dist/es6/modal/lib/hooks/useCloseOnOverlayClick.d.ts

@@ -12,7 +12,7 @@ export declare const useCloseOnOverlayClick: <P extends {}, R>(model: {
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../../..").Visibility;
+        visibility: "hidden" | "visible";
     };
     events: {
         updatePlacement(data: {
@@ -21,7 +21,7 @@ export declare const useCloseOnOverlayClick: <P extends {}, R>(model: {
         show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
     };
-}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {} & P & (R extends HTMLOrSVGElement ? {
+}, elemProps?: P | undefined, ref?: React.Ref<R> | undefined) => {} & P & (R extends HTMLOrSVGElement ? {
     ref: React.Ref<R>;
 } : {});
 //# sourceMappingURL=useCloseOnOverlayClick.d.ts.map

package/dist/es6/modal/lib/hooks/useModalCard.d.ts

@@ -6,7 +6,7 @@ export declare const useModalCard: <P extends {}, R>(model: {
         returnFocusRef: import("react").RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../../..").Visibility;
+        visibility: "hidden" | "visible";
     };
     events: {
         updatePlacement(data: {
@@ -15,7 +15,7 @@ export declare const useModalCard: <P extends {}, R>(model: {
         show(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
         hide(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
     };
-}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {} & P & (R extends HTMLOrSVGElement ? {
+}, elemProps?: P | undefined, ref?: import("react").Ref<R> | undefined) => {} & P & (R extends HTMLOrSVGElement ? {
     ref: import("react").Ref<R>;
 } : {});
 //# sourceMappingURL=useModalCard.d.ts.map

package/dist/es6/modal/lib/hooks/useModalHeading.d.ts

@@ -7,7 +7,7 @@ export declare const useModalHeading: <P extends {}, R>(model: {
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../../..").Visibility;
+        visibility: "hidden" | "visible";
     };
     events: {
         updatePlacement(data: {
@@ -16,7 +16,7 @@ export declare const useModalHeading: <P extends {}, R>(model: {
         show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
     };
-}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {} & P & (R extends HTMLOrSVGElement ? {
+}, elemProps?: P | undefined, ref?: React.Ref<R> | undefined) => {} & P & (R extends HTMLOrSVGElement ? {
     ref: React.Ref<R>;
 } : {});
 //# sourceMappingURL=useModalHeading.d.ts.map

package/dist/es6/modal/lib/hooks/useModalModel.d.ts

@@ -13,7 +13,7 @@ export declare const useModalModel: (<TT_Special_Generic>(config?: (Partial<{
         returnFocusRef: import("react").RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../../..").Visibility;
+        visibility: "hidden" | "visible";
     }) => void) | undefined;
     onShow?: ((data: Event | import("react").SyntheticEvent<Element, Event> | undefined, prevState: {
         stackRef: import("react").RefObject<HTMLDivElement>;
@@ -22,7 +22,7 @@ export declare const useModalModel: (<TT_Special_Generic>(config?: (Partial<{
         returnFocusRef: import("react").RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../../..").Visibility;
+        visibility: "hidden" | "visible";
     }) => void) | undefined;
     onHide?: ((data: Event | import("react").SyntheticEvent<Element, Event> | undefined, prevState: {
         stackRef: import("react").RefObject<HTMLDivElement>;
@@ -31,7 +31,7 @@ export declare const useModalModel: (<TT_Special_Generic>(config?: (Partial<{
         returnFocusRef: import("react").RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../../..").Visibility;
+        visibility: "hidden" | "visible";
     }) => void) | undefined;
 } & {
     shouldUpdatePlacement?: ((data: {
@@ -43,7 +43,7 @@ export declare const useModalModel: (<TT_Special_Generic>(config?: (Partial<{
         returnFocusRef: import("react").RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../../..").Visibility;
+        visibility: "hidden" | "visible";
     }) => boolean) | undefined;
     shouldShow?: ((data: Event | import("react").SyntheticEvent<Element, Event> | undefined, state: {
         stackRef: import("react").RefObject<HTMLDivElement>;
@@ -52,7 +52,7 @@ export declare const useModalModel: (<TT_Special_Generic>(config?: (Partial<{
         returnFocusRef: import("react").RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../../..").Visibility;
+        visibility: "hidden" | "visible";
     }) => boolean) | undefined;
     shouldHide?: ((data: Event | import("react").SyntheticEvent<Element, Event> | undefined, state: {
         stackRef: import("react").RefObject<HTMLDivElement>;
@@ -61,7 +61,7 @@ export declare const useModalModel: (<TT_Special_Generic>(config?: (Partial<{
         returnFocusRef: import("react").RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../../..").Visibility;
+        visibility: "hidden" | "visible";
     }) => boolean) | undefined;
 }) | undefined) => {
     state: {
@@ -71,7 +71,7 @@ export declare const useModalModel: (<TT_Special_Generic>(config?: (Partial<{
         returnFocusRef: import("react").RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../../..").Visibility;
+        visibility: "hidden" | "visible";
     };
     events: {
         updatePlacement(data: {
@@ -80,7 +80,7 @@ export declare const useModalModel: (<TT_Special_Generic>(config?: (Partial<{
         show(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
         hide(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
     };
-}) & import("../../../common").ModelExtras<{
+}) & import("@workday/canvas-kit-react/common").ModelExtras<{
     returnFocusRef: import("react").RefObject<any> | undefined;
     initialFocusRef: import("react").RefObject<any> | undefined;
     id: string;
@@ -92,7 +92,7 @@ export declare const useModalModel: (<TT_Special_Generic>(config?: (Partial<{
     returnFocusRef: import("react").RefObject<any> | undefined;
     placement: import("@popperjs/core").Placement;
     id: string;
-    visibility: import("../../..").Visibility;
+    visibility: "hidden" | "visible";
 }, {
     updatePlacement(data: {
         placement: import("@popperjs/core").Placement;
@@ -107,7 +107,7 @@ export declare const useModalModel: (<TT_Special_Generic>(config?: (Partial<{
         returnFocusRef: import("react").RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../../..").Visibility;
+        visibility: "hidden" | "visible";
     };
     events: {
         updatePlacement(data: {

package/dist/es6/pagination/lib/Pagination/AdditionalDetails.d.ts

@@ -3,9 +3,8 @@ import { PaginationModel } from './types';
 import { FlexProps } from '@workday/canvas-kit-react/layout';
 export interface AdditionalDetailsProps extends Omit<FlexProps, 'children'> {
     children: (model: PaginationModel) => React.ReactNode | React.ReactNode;
-    model: PaginationModel;
     shouldAnnounceToScreenReader?: boolean;
     shouldHideDetails?: boolean;
 }
-export declare const AdditionalDetails: ({ model, children, shouldAnnounceToScreenReader, ...elemProps }: AdditionalDetailsProps) => JSX.Element;
+export declare const AdditionalDetails: import("@workday/canvas-kit-react/common").ElementComponent<"div", AdditionalDetailsProps>;
 //# sourceMappingURL=AdditionalDetails.d.ts.map

package/dist/es6/pagination/lib/Pagination/AdditionalDetails.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdditionalDetails.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/AdditionalDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AACxC,OAAO,EAAO,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAGjE,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACzE,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;IACxE,KAAK,EAAE,eAAe,CAAC;IACvB,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAiBD,eAAO,MAAM,iBAAiB,oEAK3B,sBAAsB,gBAaxB,CAAC"}
+{"version":3,"file":"AdditionalDetails.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/AdditionalDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AACxC,OAAO,EAAO,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAIjE,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACzE,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;IACxE,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAiBD,eAAO,MAAM,iBAAiB,4FAuB5B,CAAC"}

package/dist/es6/pagination/lib/Pagination/AdditionalDetails.js

@@ -22,9 +22,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import { type, space, typeColors } from '@workday/canvas-kit-react/tokens';
-import { accessibleHide, styled } from '@workday/canvas-kit-react/common';
+import { accessibleHide, styled, createComponent, } from '@workday/canvas-kit-react/common';
 import { Flex } from '@workday/canvas-kit-react/layout';
 import { useLiveRegion } from './common/useLiveRegion';
+import { PaginationContext } from './usePaginationModel';
 var StyledAdditionalDetails = styled(Flex)(function (_a) {
     var shouldHideDetails = _a.shouldHideDetails;
     if (shouldHideDetails) {
@@ -36,8 +37,12 @@ var StyledAdditionalDetails = styled(Flex)(function (_a) {
         };
     }
 });
-export var AdditionalDetails = function (_a) {
-    var model = _a.model, children = _a.children, shouldAnnounceToScreenReader = _a.shouldAnnounceToScreenReader, elemProps = __rest(_a, ["model", "children", "shouldAnnounceToScreenReader"]);
-    var liveRegionProps = useLiveRegion({ shouldAnnounceToScreenReader: shouldAnnounceToScreenReader });
-    return (React.createElement(StyledAdditionalDetails, __assign({}, type.levels.subtext.medium, { color: typeColors.hint }, liveRegionProps, elemProps), typeof children === 'function' ? children(model) : children));
-};
+export var AdditionalDetails = createComponent('div')({
+    displayName: 'Pagination.AdditionalDetails',
+    Component: function (_a, ref, Element) {
+        var children = _a.children, shouldAnnounceToScreenReader = _a.shouldAnnounceToScreenReader, elemProps = __rest(_a, ["children", "shouldAnnounceToScreenReader"]);
+        var model = React.useContext(PaginationContext);
+        var liveRegionProps = useLiveRegion({ shouldAnnounceToScreenReader: shouldAnnounceToScreenReader });
+        return (React.createElement(StyledAdditionalDetails, __assign({ ref: ref, as: Element }, type.levels.subtext.medium, { color: typeColors.hint }, liveRegionProps, elemProps), typeof children === 'function' ? children(model) : children));
+    },
+});

package/dist/es6/pagination/lib/Pagination/Controls.d.ts

@@ -1,13 +1,14 @@
 import * as React from 'react';
-import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
-import { PaginationModel } from './types';
-export declare type ControlButtonProps = TertiaryButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    model: PaginationModel;
-};
-export declare type ControlsProps = React.HTMLAttributes<HTMLDivElement>;
-export declare const Controls: ({ children, ...elemProps }: ControlsProps) => JSX.Element;
-export declare const JumpToFirstButton: ({ model, onClick, ...restProps }: ControlButtonProps) => JSX.Element;
-export declare const StepToPreviousButton: ({ onClick, model, ...restProps }: ControlButtonProps) => JSX.Element;
-export declare const StepToNextButton: ({ model, onClick, ...restProps }: ControlButtonProps) => JSX.Element;
-export declare const JumpToLastButton: ({ model, onClick, ...restProps }: ControlButtonProps) => JSX.Element;
+import { TertiaryButton } from '@workday/canvas-kit-react/button';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+export interface ControlButtonProps extends ExtractProps<typeof TertiaryButton, never> {
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+export interface PaginationControlsProps {
+}
+export declare const PaginationControls: import("@workday/canvas-kit-react/common").ElementComponent<"div", PaginationControlsProps>;
+export declare const JumpToFirstButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", ControlButtonProps>;
+export declare const StepToPreviousButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", ControlButtonProps>;
+export declare const StepToNextButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", ControlButtonProps>;
+export declare const JumpToLastButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", ControlButtonProps>;
 //# sourceMappingURL=Controls.d.ts.map

package/dist/es6/pagination/lib/Pagination/Controls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Controls.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/Controls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAiB,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AAQrF,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAIxC,oBAAY,kBAAkB,GAAG,mBAAmB,GAClD,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC9C,KAAK,EAAE,eAAe,CAAC;CACxB,CAAC;AAEJ,oBAAY,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEjE,eAAO,MAAM,QAAQ,4DAMpB,CAAC;AAEF,eAAO,MAAM,iBAAiB,qCAAoC,kBAAkB,gBAoBnF,CAAC;AAEF,eAAO,MAAM,oBAAoB,qCAAoC,kBAAkB,gBAoBtF,CAAC;AAEF,eAAO,MAAM,gBAAgB,qCAAoC,kBAAkB,gBAoBlF,CAAC;AAEF,eAAO,MAAM,gBAAgB,qCAAoC,kBAAkB,gBAoBlF,CAAC"}
+{"version":3,"file":"Controls.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/Controls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAkB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAY/E,MAAM,WAAW,kBAAmB,SAAQ,YAAY,CAAC,OAAO,cAAc,EAAE,KAAK,CAAC;IACpF,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACtD;AAED,MAAM,WAAW,uBAAuB;CAAG;AAE3C,eAAO,MAAM,kBAAkB,6FAK7B,CAAC;AAEH,eAAO,MAAM,iBAAiB,2FA0B5B,CAAC;AAEH,eAAO,MAAM,oBAAoB,2FA0B/B,CAAC;AAEH,eAAO,MAAM,gBAAgB,2FA0B3B,CAAC;AAEH,eAAO,MAAM,gBAAgB,2FA0B3B,CAAC"}

package/dist/es6/pagination/lib/Pagination/Controls.js

@@ -22,66 +22,86 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import { TertiaryButton } from '@workday/canvas-kit-react/button';
+import { createComponent } from '@workday/canvas-kit-react/common';
 import { chevronLeftSmallIcon, chevron2xLeftSmallIcon, chevronRightSmallIcon, chevron2xRightSmallIcon, } from '@workday/canvas-system-icons-web';
 import { HStack } from '@workday/canvas-kit-react/layout';
 import { useRTL } from './common/utils/useRTL';
-export var Controls = function (_a) {
-    var children = _a.children, elemProps = __rest(_a, ["children"]);
-    return (React.createElement(HStack, __assign({ spacing: "xxxs", alignItems: "center" }, elemProps), children));
-};
-export var JumpToFirstButton = function (_a) {
-    var model = _a.model, onClick = _a.onClick, restProps = __rest(_a, ["model", "onClick"]);
-    var isDisabled = model.state.currentPage <= model.state.firstPage;
-    var handleClick = function (e) {
-        if (isDisabled) {
-            return;
-        }
-        onClick === null || onClick === void 0 ? void 0 : onClick(e);
-        model.events.setCurrentPage(model.state.firstPage);
-    };
-    var shouldUseRTL = useRTL().shouldUseRTL;
-    var icon = shouldUseRTL ? chevron2xRightSmallIcon : chevron2xLeftSmallIcon;
-    return (React.createElement(TertiaryButton, __assign({ "aria-disabled": isDisabled || undefined, size: "small", icon: icon, onClick: handleClick }, restProps)));
-};
-export var StepToPreviousButton = function (_a) {
-    var onClick = _a.onClick, model = _a.model, restProps = __rest(_a, ["onClick", "model"]);
-    var isDisabled = model.state.currentPage <= model.state.firstPage;
-    var handleClick = function (e) {
-        if (isDisabled) {
-            return;
-        }
-        onClick === null || onClick === void 0 ? void 0 : onClick(e);
-        model.events.setCurrentPage(model.state.currentPage - 1);
-    };
-    var shouldUseRTL = useRTL().shouldUseRTL;
-    var icon = shouldUseRTL ? chevronRightSmallIcon : chevronLeftSmallIcon;
-    return (React.createElement(TertiaryButton, __assign({ "aria-disabled": isDisabled || undefined, size: "small", icon: icon, onClick: handleClick }, restProps)));
-};
-export var StepToNextButton = function (_a) {
-    var model = _a.model, onClick = _a.onClick, restProps = __rest(_a, ["model", "onClick"]);
-    var isDisabled = model.state.currentPage >= model.state.lastPage;
-    var handleClick = function (e) {
-        if (isDisabled) {
-            return;
-        }
-        onClick === null || onClick === void 0 ? void 0 : onClick(e);
-        model.events.setCurrentPage(model.state.currentPage + 1);
-    };
-    var shouldUseRTL = useRTL().shouldUseRTL;
-    var icon = shouldUseRTL ? chevronLeftSmallIcon : chevronRightSmallIcon;
-    return (React.createElement(TertiaryButton, __assign({ "aria-disabled": isDisabled || undefined, size: "small", icon: icon, onClick: handleClick }, restProps)));
-};
-export var JumpToLastButton = function (_a) {
-    var model = _a.model, onClick = _a.onClick, restProps = __rest(_a, ["model", "onClick"]);
-    var isDisabled = model.state.currentPage >= model.state.lastPage;
-    var handleClick = function (e) {
-        if (isDisabled) {
-            return;
-        }
-        onClick === null || onClick === void 0 ? void 0 : onClick(e);
-        model.events.setCurrentPage(model.state.lastPage);
-    };
-    var shouldUseRTL = useRTL().shouldUseRTL;
-    var icon = shouldUseRTL ? chevron2xLeftSmallIcon : chevron2xRightSmallIcon;
-    return (React.createElement(TertiaryButton, __assign({ "aria-disabled": isDisabled || undefined, size: "small", icon: icon, onClick: handleClick }, restProps)));
-};
+import { PaginationContext } from './usePaginationModel';
+export var PaginationControls = createComponent('div')({
+    displayName: 'Pagination.Controls',
+    Component: function (elemProps, ref, Element) {
+        return React.createElement(HStack, __assign({ ref: ref, as: Element, spacing: "xxxs", alignItems: "center" }, elemProps));
+    },
+});
+export var JumpToFirstButton = createComponent('button')({
+    displayName: 'Pagination.JumpToFirstButton',
+    Component: function (_a, ref, Element) {
+        var onClick = _a.onClick, restProps = __rest(_a, ["onClick"]);
+        var model = React.useContext(PaginationContext);
+        var isDisabled = model.state.currentPage <= model.state.firstPage;
+        var handleClick = function (e) {
+            if (isDisabled) {
+                return;
+            }
+            onClick === null || onClick === void 0 ? void 0 : onClick(e);
+            model.events.setCurrentPage(model.state.firstPage);
+        };
+        var shouldUseRTL = useRTL().shouldUseRTL;
+        var icon = shouldUseRTL ? chevron2xRightSmallIcon : chevron2xLeftSmallIcon;
+        return (React.createElement(TertiaryButton, __assign({ ref: ref, as: Element, "aria-disabled": isDisabled || undefined, size: "small", icon: icon, onClick: handleClick }, restProps)));
+    },
+});
+export var StepToPreviousButton = createComponent('button')({
+    displayName: 'Pagination.StepToPreviousButton',
+    Component: function (_a, ref, Element) {
+        var onClick = _a.onClick, restProps = __rest(_a, ["onClick"]);
+        var model = React.useContext(PaginationContext);
+        var isDisabled = model.state.currentPage <= model.state.firstPage;
+        var handleClick = function (e) {
+            if (isDisabled) {
+                return;
+            }
+            onClick === null || onClick === void 0 ? void 0 : onClick(e);
+            model.events.setCurrentPage(model.state.currentPage - 1);
+        };
+        var shouldUseRTL = useRTL().shouldUseRTL;
+        var icon = shouldUseRTL ? chevronRightSmallIcon : chevronLeftSmallIcon;
+        return (React.createElement(TertiaryButton, __assign({ ref: ref, as: Element, "aria-disabled": isDisabled || undefined, size: "small", icon: icon, onClick: handleClick }, restProps)));
+    },
+});
+export var StepToNextButton = createComponent('button')({
+    displayName: 'Pagination.StepToNextButton',
+    Component: function (_a, ref, Element) {
+        var onClick = _a.onClick, restProps = __rest(_a, ["onClick"]);
+        var model = React.useContext(PaginationContext);
+        var isDisabled = model.state.currentPage >= model.state.lastPage;
+        var handleClick = function (e) {
+            if (isDisabled) {
+                return;
+            }
+            onClick === null || onClick === void 0 ? void 0 : onClick(e);
+            model.events.setCurrentPage(model.state.currentPage + 1);
+        };
+        var shouldUseRTL = useRTL().shouldUseRTL;
+        var icon = shouldUseRTL ? chevronLeftSmallIcon : chevronRightSmallIcon;
+        return (React.createElement(TertiaryButton, __assign({ ref: ref, as: Element, "aria-disabled": isDisabled || undefined, size: "small", icon: icon, onClick: handleClick }, restProps)));
+    },
+});
+export var JumpToLastButton = createComponent('button')({
+    displayName: 'Paganation.JumpToLastButton',
+    Component: function (_a, ref, Element) {
+        var onClick = _a.onClick, restProps = __rest(_a, ["onClick"]);
+        var model = React.useContext(PaginationContext);
+        var isDisabled = model.state.currentPage >= model.state.lastPage;
+        var handleClick = function (e) {
+            if (isDisabled) {
+                return;
+            }
+            onClick === null || onClick === void 0 ? void 0 : onClick(e);
+            model.events.setCurrentPage(model.state.lastPage);
+        };
+        var shouldUseRTL = useRTL().shouldUseRTL;
+        var icon = shouldUseRTL ? chevron2xLeftSmallIcon : chevron2xRightSmallIcon;
+        return (React.createElement(TertiaryButton, __assign({ ref: ref, as: Element, "aria-disabled": isDisabled || undefined, size: "small", icon: icon, onClick: handleClick }, restProps)));
+    },
+});

package/dist/es6/pagination/lib/Pagination/GoTo/Form.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { HStackProps, StackSpacing } from '@workday/canvas-kit-react/layout';
-export declare type GoToFormProps = React.FormHTMLAttributes<HTMLFormElement> & Omit<HStackProps, 'spacing'> & {
+export interface GoToFormProps extends Omit<HStackProps, 'spacing'> {
+    onSubmit?: React.FormEventHandler<HTMLFormElement>;
     spacing?: StackSpacing;
-};
-export declare const GoToForm: ({ children, onSubmit, spacing, ...elemProps }: GoToFormProps) => JSX.Element;
+}
+export declare const GoToForm: import("@workday/canvas-kit-react/common").ElementComponent<"form", GoToFormProps>;
 //# sourceMappingURL=Form.d.ts.map

package/dist/es6/pagination/lib/Pagination/GoTo/Form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../../../pagination/lib/Pagination/GoTo/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAS,WAAW,EAAE,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAGnF,oBAAY,aAAa,GAAG,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC,GACnE,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG;IAC7B,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB,CAAC;AAEJ,eAAO,MAAM,QAAQ,kDAAyD,aAAa,gBAe1F,CAAC"}
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../../../pagination/lib/Pagination/GoTo/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAS,WAAW,EAAE,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAKnF,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC;IACjE,QAAQ,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;IACnD,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED,eAAO,MAAM,QAAQ,oFAwBnB,CAAC"}

package/dist/es6/pagination/lib/Pagination/GoTo/Form.js

@@ -21,10 +21,18 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
+import { createComponent, useIsRTL } from '@workday/canvas-kit-react/common';
 import { HStack } from '@workday/canvas-kit-react/layout';
-import { useRTL } from '../common/utils/useRTL';
-export var GoToForm = function (_a) {
-    var children = _a.children, onSubmit = _a.onSubmit, _b = _a.spacing, spacing = _b === void 0 ? 'xxs' : _b, elemProps = __rest(_a, ["children", "onSubmit", "spacing"]);
-    var shouldUseRTL = useRTL().shouldUseRTL;
-    return (React.createElement(HStack, __assign({ as: "form", alignItems: "center", spacing: spacing, paddingLeft: shouldUseRTL ? 'xxs' : undefined, paddingRight: shouldUseRTL ? 'xxs' : undefined, onSubmit: onSubmit }, elemProps), children));
-};
+import { PaginationContext } from '../usePaginationModel';
+import { GoToContext, useGoToForm } from './useGoToForm';
+export var GoToForm = createComponent('form')({
+    Component: function (_a, ref, Element) {
+        var children = _a.children, onSubmit = _a.onSubmit, elemProps = __rest(_a, ["children", "onSubmit"]);
+        var model = React.useContext(PaginationContext);
+        var goToContext = useGoToForm({ model: model, onSubmit: onSubmit });
+        var formProps = goToContext.formProps;
+        var shouldUseRTL = useIsRTL();
+        return (React.createElement(GoToContext.Provider, { value: goToContext },
+            React.createElement(HStack, __assign({ ref: ref, as: Element, alignItems: "center", spacing: "xxs", paddingLeft: shouldUseRTL ? 'xxs' : undefined, paddingRight: shouldUseRTL ? 'xxs' : undefined }, formProps, elemProps), children)));
+    },
+});

package/dist/es6/pagination/lib/Pagination/GoTo/Label.d.ts

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { PaginationModel } from '../types';
-export interface GoToLabelProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'children'> {
-    model: PaginationModel;
+export interface GoToLabelProps {
     /**
      * Accepts child elements or a render prop.
      */
     children?: (model: PaginationModel) => React.ReactNode | React.ReactNode;
 }
-export declare const GoToLabel: ({ model, children, ...elemProps }: GoToLabelProps) => JSX.Element;
+export declare const GoToLabel: import("@workday/canvas-kit-react/common").ElementComponent<"label", GoToLabelProps>;
 //# sourceMappingURL=Label.d.ts.map

package/dist/es6/pagination/lib/Pagination/GoTo/Label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../../../pagination/lib/Pagination/GoTo/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,eAAe,EAAC,MAAM,UAAU,CAAC;AAGzC,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC;IACrE,KAAK,EAAE,eAAe,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;CAC1E;AAED,eAAO,MAAM,SAAS,sCAAqC,cAAc,gBAMxE,CAAC"}
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../../../pagination/lib/Pagination/GoTo/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,eAAe,EAAC,MAAM,UAAU,CAAC;AAKzC,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;CAC1E;AAED,eAAO,MAAM,SAAS,sFAiBpB,CAAC"}

package/dist/es6/pagination/lib/Pagination/GoTo/Label.js

@@ -22,7 +22,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import { LabelText } from '@workday/canvas-kit-react/text';
-export var GoToLabel = function (_a) {
-    var model = _a.model, children = _a.children, elemProps = __rest(_a, ["model", "children"]);
-    return (React.createElement(LabelText, __assign({ typeLevel: "subtext.medium", variant: "hint", whiteSpace: "nowrap" }, elemProps), typeof children === 'function' ? children(model) : children));
-};
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { PaginationContext } from '../usePaginationModel';
+export var GoToLabel = createComponent('label')({
+    displayName: 'Pagination.GoToLabel',
+    Component: function (_a, ref, Element) {
+        var children = _a.children, elemProps = __rest(_a, ["children"]);
+        var model = React.useContext(PaginationContext);
+        return (React.createElement(LabelText, __assign({ ref: ref, as: Element, typeLevel: "subtext.medium", variant: "hint", whiteSpace: "nowrap" }, elemProps), typeof children === 'function' ? children(model) : children));
+    },
+});

package/dist/es6/pagination/lib/Pagination/GoTo/TextInput.d.ts

@@ -3,5 +3,8 @@ export declare type GoToTextInputProps = TextInputProps & {
     'aria-label': string;
     value?: string | number;
 };
-export declare const GoToTextInput: ({ "aria-label": ariaLabel, value, ...elemProps }: GoToTextInputProps) => JSX.Element;
+export declare const GoToTextInput: import("@workday/canvas-kit-react/common").ElementComponent<"input", TextInputProps & {
+    'aria-label': string;
+    value?: string | number | undefined;
+}>;
 //# sourceMappingURL=TextInput.d.ts.map

package/dist/es6/pagination/lib/Pagination/GoTo/TextInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../../../pagination/lib/Pagination/GoTo/TextInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAE/E,oBAAY,kBAAkB,GAAG,cAAc,GAAG;IAChD,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,aAAa,qDAIvB,kBAAkB,gBAEpB,CAAC"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../../../pagination/lib/Pagination/GoTo/TextInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAK/E,oBAAY,kBAAkB,GAAG,cAAc,GAAG;IAChD,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,aAAa;kBAJV,MAAM;;EAWpB,CAAC"}

package/dist/es6/pagination/lib/Pagination/GoTo/TextInput.js

@@ -9,20 +9,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import * as React from 'react';
 import { TextInput } from '@workday/canvas-kit-react/text-input';
-export var GoToTextInput = function (_a) {
-    var ariaLabel = _a["aria-label"], _b = _a.value, value = _b === void 0 ? '' : _b, elemProps = __rest(_a, ['aria-label', "value"]);
-    return React.createElement(TextInput, __assign({ "aria-label": ariaLabel, size: 1, value: value, width: 55 }, elemProps));
-};
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { GoToContext } from './useGoToForm';
+export var GoToTextInput = createComponent('input')({
+    displayName: 'Pagination.GoToTextInput',
+    Component: function (elemProps, ref, Element) {
+        var inputProps = React.useContext(GoToContext).inputProps;
+        return React.createElement(TextInput, __assign({ ref: ref, as: Element, size: 1, width: 55 }, inputProps, elemProps));
+    },
+});

package/dist/es6/pagination/lib/Pagination/GoTo/useGoToForm.d.ts

@@ -4,6 +4,15 @@ export interface UseGoToFormConfig {
     model: PaginationModel;
     onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
 }
+export declare const GoToContext: React.Context<{
+    formProps: {
+        onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
+    };
+    inputProps: {
+        value: number;
+        onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    };
+}>;
 export declare const useGoToForm: ({ onSubmit, model }?: UseGoToFormConfig) => {
     formProps: {
         onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;

package/dist/es6/pagination/lib/Pagination/GoTo/useGoToForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useGoToForm.d.ts","sourceRoot":"","sources":["../../../../../../pagination/lib/Pagination/GoTo/useGoToForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,eAAe,EAAC,MAAM,UAAU,CAAC;AAEzC,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;CAC9D;AAED,eAAO,MAAM,WAAW,yBAAuB,iBAAiB;;0BAUjC,MAAM,SAAS,CAAC,eAAe,CAAC;;;;0BAMhC,MAAM,WAAW,CAAC,gBAAgB,CAAC;;CAkBjE,CAAC"}
+{"version":3,"file":"useGoToForm.d.ts","sourceRoot":"","sources":["../../../../../../pagination/lib/Pagination/GoTo/useGoToForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,eAAe,EAAC,MAAM,UAAU,CAAC;AAEzC,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;CAC9D;AAED,eAAO,MAAM,WAAW;;0BAYO,MAAM,SAAS,CAAC,eAAe,CAAC;;;;0BAMhC,MAAM,WAAW,CAAC,gBAAgB,CAAC;;EAlBkB,CAAC;AAErF,eAAO,MAAM,WAAW,yBAAuB,iBAAiB;;0BAUjC,MAAM,SAAS,CAAC,eAAe,CAAC;;;;0BAMhC,MAAM,WAAW,CAAC,gBAAgB,CAAC;;CAkBjE,CAAC"}

package/dist/es6/pagination/lib/Pagination/GoTo/useGoToForm.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+export var GoToContext = React.createContext({});
 export var useGoToForm = function (_a) {
     var _b = _a === void 0 ? {} : _a, onSubmit = _b.onSubmit, model = _b.model;
     var _c = React.useState(model.state.currentPage), value = _c[0], setValue = _c[1];

package/dist/es6/pagination/lib/Pagination/Nav.d.ts

@@ -2,5 +2,5 @@ import { FlexProps } from '@workday/canvas-kit-react/layout';
 export interface PaginationNavProps extends Omit<FlexProps, 'as'> {
     'aria-label': string;
 }
-export declare const PaginationNav: ({ "aria-label": ariaLabel, ...elemProps }: PaginationNavProps) => JSX.Element;
+export declare const PaginationNav: (elemProps: PaginationNavProps) => JSX.Element;
 //# sourceMappingURL=Nav.d.ts.map

package/dist/es6/pagination/lib/Pagination/Nav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Nav.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/Nav.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAEjE,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC;IAC/D,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,8CAA6C,kBAAkB,gBAWxF,CAAC"}
+{"version":3,"file":"Nav.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/Nav.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAEjE,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC;IAC/D,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,cAAe,kBAAkB,gBAU1D,CAAC"}