@workday/canvas-kit-react 8.0.0-alpha.253-next.22 → 8.0.0-alpha.428-next.2

package/modal/lib/Modal.tsx

@@ -7,19 +7,91 @@ import {ModalCard} from './ModalCard';
 import {useModalModel} from './hooks';
 import {ModalHeading} from './ModalHeading';
 import {ModalOverflowOverlay} from './ModalOverflowOverlay';
+import {ModalBody} from './ModalBody';
 
+/**
+ * This component is the container component and does not render any semantic elements. It provides
+ * a React Context model for the `Modal` subcomponents. If you manually pass a `model` to all
+ * subcomponents, this container component isn't needed. If you do not pass a `model`, the `Modal`
+ * container component will build a default one using `useModalModel`. `Modal` is a composition of a
+ * {@link Popup} component and has a similar structure to `Popup`.
+ */
 export const Modal = createContainer()({
   displayName: 'Modal',
   modelHook: useModalModel,
   subComponents: {
-    Body: Popup.Body,
-    Card: ModalCard,
-    CloseIcon: Popup.CloseIcon,
+    /**
+     * The `Modal.Target` is any element that is meant to show the Modal. The default component
+     * rendered by this component is a {@link SecondaryButton} element. You can override this by
+     * passing the desired component via `as`. Many examples above use `as={DeleteButton}`. If you
+     * want to render an icon button instead, pass an icon to the the `icon` prop and pass no
+     * children to the button. The `Modal.Target` is an alias for {@link PopupTarget Popup.Target}
+     * and uses the `usePopupTarget` hook, which provides a `ref` and an `onClick`. The provided
+     * `ref` will be used to return focus to this element when the Modal is closed. If the provided
+     * component does not forward the `ref` to an element, the fallback is to capture an element in
+     * the `onClick`. This can be overridden by providing a `returnFocusRef` to the model.
+     */
     Target: Popup.Target,
-    Heading: ModalHeading,
+    /**
+     * The `Modal.Overlay` is the component that hooks a Modal up to the {@link PopupStack} as well
+     * as the semi-transparent overlay commonly used with modals. Internally, the `Modal.Overlay`
+     * component uses two `div` elements to ensure proper rendering of the `Modal` content. The
+     * default element is a `div` element and can be changed via the `as` prop.
+     */
     Overlay: ModalOverlay,
-    OverflowOverlay: ModalOverflowOverlay,
+    /**
+     * The `Modal.Card` is wraps a {@link PopupCard Popup.Card} which wraps a {@link Card}. It is
+     * the `role="dialog"` element and is uses `useModalCard` behavior hook which sets
+     * `aria-modal="true"` and sets the `aria-labelledby` that points to the `id` of the
+     * {@link ModalHeading Modal.Heading}. If you don't use a `Modal.Heading`, add an `aria-label`
+     * instead. The default element is a `div` and can be changed via the `as` prop.
+     */
+    Card: ModalCard,
+    /**
+     * The `Modal.Heading` semantically labels the Modal via adding an `id` that the
+     * {@link ModalCard Modal.Card} points to via `aria-labelledby`. If this component is not used,
+     * you must add an `aria-label` to the `Modal.Card` to label the Modal for screen reader users.
+     * This component uses the `useModalHeading` behavior hook which sets an `id` and also does some
+     * focus management logic for situations where there is no
+     * {@link ModalCloseIcon Modal.CloseIcon} component used. Please use `Modal.Heading` and don't
+     * use your own unless you also use the `useModalHeading` hook in your component. Consult
+     * accessibility if you cannot use this component. The default element is an `h2` and can be
+     * changed via the `as` prop.
+     */
+    Heading: ModalHeading,
+    /**
+     * The `Modal.CloseIcon` is the 'X' icon in the top corner of a Modal. It always requires an
+     * `aria-label` which must be translated. It uses the `usePopupCloseIcon` which adds an
+     * `onClick` that will close the Modal. The default component rendered is an
+     * {@link TertiaryButton} with just an icon that can be changed via the `as`. All props that
+     * `TertiaryButton` takes are also available by default.
+     */
+    CloseIcon: Popup.CloseIcon,
+    /**
+     * The `Modal.CloseButton` is a convenience component that attaches an `onClick` listener to
+     * close the Modal. It uses the `usePopupCloseButton` behavior hook which adds an `onClick` that
+     * calls `model.events.hide()`. If you don't use this component, you'll have to add your own
+     * `onClick` and you'll have to hoist the model. The default component rendered is a
+     * {@link SecondaryButton} and can be changed via the `as` prop. This component doesn't contain
+     * any styles and will take on the styles of the component given to it. For example,
+     * `as={DeleteButton}` will render a delete button. `as={TertiaryButton}` with no children and
+     * an `icon` will render a {@link TertiaryButton} styled icon button. If you give it a base
+     * element like `as="button"`, you are responsible for styling the element. You can add your own
+     * `onClick` to perform side effects. Your callback will be merged with the `onClick` that
+     * closes the Modal.
+     */
     CloseButton: Popup.CloseButton,
+    Body: ModalBody,
+    /**
+     * If content is large, scrolling the entire overlay container is an option. Use the
+     * `Modal.OverflowOverlay` component instead of the {@link ModalOverlay Modal.Overlay}
+     * component. The {@link ModalCard Modal.Card}'s `maxHeight` and `height` will need to be reset
+     * to `inherit` to prevent any internal overflow.
+     *
+     * This component should be used in place of the {@link ModalOverlay Modal.Overlay} component if
+     * full body overflow is desired.
+     */
+    OverflowOverlay: ModalOverflowOverlay,
   },
 })<ExtractProps<typeof Dialog, never>>(elemProps => {
   return <>{elemProps.children}</>;

package/modal/lib/ModalBody.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+import {
+  createSubcomponent,
+  ExtractProps,
+  getTheme,
+  styled,
+  StyledType,
+} from '@workday/canvas-kit-react/common';
+import {Popup} from '@workday/canvas-kit-react/popup';
+import {space} from '@workday/canvas-kit-react/tokens';
+
+import {useModalModel} from './hooks';
+
+export interface ModalBodyProps extends ExtractProps<typeof Popup.Body, never> {}
+
+const ResponsiveModalBody = styled(Popup.Body)<ModalBodyProps & StyledType>(({theme}) => {
+  const {canvas: canvasTheme} = getTheme(theme);
+  return {
+    [canvasTheme.breakpoints.down('s')]: {
+      marginBottom: space.zero,
+      padding: `${space.xxxs} ${space.xxs} ${space.xxs} ${space.xxs}`,
+    },
+  };
+});
+
+export const ModalBody = createSubcomponent('div')({
+  displayName: 'Modal.Body',
+  modelHook: useModalModel,
+})<ModalBodyProps>((elemProps, Element) => {
+  return <ResponsiveModalBody as={Element} {...elemProps} />;
+});

package/modal/lib/ModalCard.tsx

@@ -5,6 +5,7 @@ import {
   ExtractProps,
   StyledType,
   styled,
+  getTheme,
 } from '@workday/canvas-kit-react/common';
 import {space} from '@workday/canvas-kit-react/tokens';
 import {Popup} from '@workday/canvas-kit-react/popup';
@@ -13,14 +14,17 @@ import {useModalCard, useModalModel} from './hooks';
 
 export interface ModalCardProps extends ExtractProps<typeof Popup.Card, never> {}
 
-const ResponsiveModalCard = styled(Popup.Card)<ModalCardProps & StyledType>(({theme}) => ({
-  margin: space.xl,
-  [theme.canvas.breakpoints.down('s')]: {
-    margin: space.s, // 16px all around margin on smaller screen sizes
-    padding: space.xxs, // brings total padding between edge and content to 16px
-    borderRadius: space.m, // 24px border radius on smaller devices.
-  },
-}));
+const ResponsiveModalCard = styled(Popup.Card)<ModalCardProps & StyledType>(({theme}) => {
+  const {canvas: canvasTheme} = getTheme(theme);
+  return {
+    margin: space.xl,
+    [canvasTheme.breakpoints.down('s')]: {
+      margin: space.s, // 16px all around margin on smaller screen sizes
+      padding: space.s, // brings total padding between edge and content to 24px
+      borderRadius: space.m, // 24px border radius on smaller devices.
+    },
+  };
+});
 
 export const ModalCard = createSubcomponent('div')({
   displayName: 'Modal.Card',

package/modal/lib/ModalHeading.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import {
   createSubcomponent,
   ExtractProps,
+  getTheme,
   styled,
   StyledType,
 } from '@workday/canvas-kit-react/common';
@@ -13,11 +14,15 @@ import {useModalHeading, useModalModel} from './hooks';
 
 export interface ModalHeadingProps extends ExtractProps<typeof Popup.Heading, never> {}
 
-const ResponsiveModalHeading = styled(Popup.Heading)<ModalHeadingProps & StyledType>(({theme}) => ({
-  [theme.canvas.breakpoints.down('s')]: {
-    marginBottom: space.zero,
-  },
-}));
+const ResponsiveModalHeading = styled(Popup.Heading)<ModalHeadingProps & StyledType>(({theme}) => {
+  const {canvas: canvasTheme} = getTheme(theme);
+  return {
+    [canvasTheme.breakpoints.down('s')]: {
+      marginBottom: space.zero,
+      padding: `${space.xxs} ${space.xxs} ${space.xxxs} ${space.xxs}`,
+    },
+  };
+});
 
 export const ModalHeading = createSubcomponent('h2')({
   displayName: 'Modal.Heading',

package/modal/lib/ModalOverlay.tsx

@@ -7,6 +7,7 @@ import {
   StyledType,
   useWindowSize,
   useForkRef,
+  getTheme,
 } from '@workday/canvas-kit-react/common';
 import {usePopupModel, usePopupStack} from '@workday/canvas-kit-react/popup';
 import {keyframes} from '@emotion/react';
@@ -44,19 +45,22 @@ const Container = styled(Box)<StyledType>({
 // positioning, but seems to when using flexbox centering. This messes up Popper calculations inside
 // the Modal. The centering container forces a "center" pixel calculation by making sure the width
 // is always an even number
-const ResponsiveContainer = styled('div')(({theme}) => ({
-  maxHeight: '100vh',
-  display: 'flex',
-  position: 'absolute',
-  left: 0,
-  top: 0,
-  justifyContent: 'center',
-  alignItems: 'center',
-  height: '100vh',
-  [theme.canvas.breakpoints.down('s')]: {
-    alignItems: 'end',
-  },
-}));
+const ResponsiveContainer = styled('div')(({theme}) => {
+  const {canvas: canvasTheme} = getTheme(theme);
+  return {
+    maxHeight: '100vh',
+    display: 'flex',
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '100vh',
+    [canvasTheme.breakpoints.down('s')]: {
+      alignItems: 'end',
+    },
+  };
+});
 
 export const ModalOverlay = createSubcomponent('div')({
   displayName: 'Modal.Overlay',

package/modal/lib/hooks/useModalHeading.ts

@@ -10,8 +10,8 @@ import {usePopupHeading, usePopupModel} from '@workday/canvas-kit-react/popup';
 
 export const useModalHeading = composeHooks(
   usePopupHeading,
-  createElemPropsHook(usePopupModel)((_, ref?: React.Ref<HTMLElement>) => {
-    const {elementRef, localRef} = useLocalRef(ref);
+  createElemPropsHook(usePopupModel)((_, ref) => {
+    const {elementRef, localRef} = useLocalRef(ref as React.Ref<HTMLElement>);
 
     useMountLayout(() => {
       if (localRef.current?.parentElement?.querySelector('button')?.textContent) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "8.0.0-alpha.253-next.22+7350b9a5",
+  "version": "8.0.0-alpha.428-next.2+2c79134a",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -41,7 +41,7 @@
     "workday"
   ],
   "peerDependencies": {
-    "react": "^17.0 || ^18.0"
+    "react": ">=16.14"
   },
   "dependencies": {
     "@emotion/is-prop-valid": "^1.1.1",
@@ -49,12 +49,11 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^8.0.0-alpha.253-next.22+7350b9a5",
+    "@workday/canvas-kit-popup-stack": "^8.0.0-alpha.428-next.2+2c79134a",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
     "csstype": "^3.0.2",
-    "lodash": "^4.17.14",
     "polished": "^4.1.3",
     "react-innertext": "^1.1.5",
     "react-virtual": "^2.10.4",
@@ -67,5 +66,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "7350b9a521c0c710ec18a027afd8442dc92dd875"
+  "gitHead": "2c79134aa48ef0efde9cdf883b529b8157337a28"
 }

package/pagination/lib/Pagination/AdditionalDetails.tsx

@@ -1,14 +1,19 @@
 import * as React from 'react';
 import {type, space, typeColors} from '@workday/canvas-kit-react/tokens';
-import {accessibleHide, styled, StyledType} from '@workday/canvas-kit-react/common';
+import {
+  accessibleHide,
+  styled,
+  StyledType,
+  createComponent,
+} from '@workday/canvas-kit-react/common';
 
 import {PaginationModel} from './types';
 import {Flex, FlexProps} from '@workday/canvas-kit-react/layout';
 import {useLiveRegion} from './common/useLiveRegion';
+import {PaginationContext} from './usePaginationModel';
 
 export interface AdditionalDetailsProps extends Omit<FlexProps, 'children'> {
   children: (model: PaginationModel) => React.ReactNode | React.ReactNode;
-  model: PaginationModel;
   shouldAnnounceToScreenReader?: boolean;
   shouldHideDetails?: boolean;
 }
@@ -28,22 +33,27 @@ const StyledAdditionalDetails = styled(Flex)<
   }
 });
 
-export const AdditionalDetails = ({
-  model,
-  children,
-  shouldAnnounceToScreenReader,
-  ...elemProps
-}: AdditionalDetailsProps) => {
-  const liveRegionProps = useLiveRegion({shouldAnnounceToScreenReader});
+export const AdditionalDetails = createComponent('div')({
+  displayName: 'Pagination.AdditionalDetails',
+  Component(
+    {children, shouldAnnounceToScreenReader, ...elemProps}: AdditionalDetailsProps,
+    ref,
+    Element
+  ) {
+    const model = React.useContext(PaginationContext);
+    const liveRegionProps = useLiveRegion({shouldAnnounceToScreenReader});
 
-  return (
-    <StyledAdditionalDetails
-      {...type.levels.subtext.medium}
-      color={typeColors.hint}
-      {...liveRegionProps}
-      {...elemProps}
-    >
-      {typeof children === 'function' ? children(model) : children}
-    </StyledAdditionalDetails>
-  );
-};
+    return (
+      <StyledAdditionalDetails
+        ref={ref}
+        as={Element}
+        {...type.levels.subtext.medium}
+        color={typeColors.hint}
+        {...liveRegionProps}
+        {...elemProps}
+      >
+        {typeof children === 'function' ? children(model) : children}
+      </StyledAdditionalDetails>
+    );
+  },
+});

package/pagination/lib/Pagination/Controls.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import {TertiaryButton, TertiaryButtonProps} from '@workday/canvas-kit-react/button';
+import {TertiaryButton} from '@workday/canvas-kit-react/button';
+import {createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {
   chevronLeftSmallIcon,
   chevron2xLeftSmallIcon,
@@ -7,109 +8,131 @@ import {
   chevron2xRightSmallIcon,
 } from '@workday/canvas-system-icons-web';
 
-import {PaginationModel} from './types';
-import {HStack} from '@workday/canvas-kit-react/layout';
+import {Flex} from '@workday/canvas-kit-react/layout';
 import {useRTL} from './common/utils/useRTL';
+import {PaginationContext} from './usePaginationModel';
 
-export type ControlButtonProps = TertiaryButtonProps &
-  React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    model: PaginationModel;
-  };
+export interface ControlButtonProps extends ExtractProps<typeof TertiaryButton, never> {
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
 
-export type ControlsProps = React.HTMLAttributes<HTMLDivElement>;
+export interface PaginationControlsProps {}
 
-export const Controls = ({children, ...elemProps}: ControlsProps) => {
-  return (
-    <HStack spacing="xxxs" alignItems="center" {...elemProps}>
-      {children}
-    </HStack>
-  );
-};
+export const PaginationControls = createComponent('div')({
+  displayName: 'Pagination.Controls',
+  Component(elemProps: PaginationControlsProps, ref, Element) {
+    return <Flex ref={ref} as={Element} gap="xxxs" alignItems="center" {...elemProps} />;
+  },
+});
 
-export const JumpToFirstButton = ({model, onClick, ...restProps}: ControlButtonProps) => {
-  const isDisabled = model.state.currentPage <= model.state.firstPage;
-  const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    if (isDisabled) {
-      return;
-    }
-    onClick?.(e);
-    model.events.setCurrentPage(model.state.firstPage);
-  };
-  const {shouldUseRTL} = useRTL();
-  const icon = shouldUseRTL ? chevron2xRightSmallIcon : chevron2xLeftSmallIcon;
-  return (
-    <TertiaryButton
-      aria-disabled={isDisabled || undefined}
-      size="small"
-      icon={icon}
-      onClick={handleClick}
-      {...restProps}
-    />
-  );
-};
+export const JumpToFirstButton = createComponent('button')({
+  displayName: 'Pagination.JumpToFirstButton',
+  Component({onClick, ...restProps}: ControlButtonProps, ref, Element) {
+    const model = React.useContext(PaginationContext);
+    const isDisabled = model.state.currentPage <= model.state.firstPage;
+    const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+      if (isDisabled) {
+        return;
+      }
+      onClick?.(e);
+      model.events.setCurrentPage(model.state.firstPage);
+    };
+    const {shouldUseRTL} = useRTL();
+    const icon = shouldUseRTL ? chevron2xRightSmallIcon : chevron2xLeftSmallIcon;
+    return (
+      <TertiaryButton
+        ref={ref}
+        as={Element}
+        aria-disabled={isDisabled || undefined}
+        size="small"
+        icon={icon}
+        onClick={handleClick}
+        {...restProps}
+      />
+    );
+  },
+});
 
-export const StepToPreviousButton = ({onClick, model, ...restProps}: ControlButtonProps) => {
-  const isDisabled = model.state.currentPage <= model.state.firstPage;
-  const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    if (isDisabled) {
-      return;
-    }
-    onClick?.(e);
-    model.events.setCurrentPage(model.state.currentPage - 1);
-  };
-  const {shouldUseRTL} = useRTL();
-  const icon = shouldUseRTL ? chevronRightSmallIcon : chevronLeftSmallIcon;
-  return (
-    <TertiaryButton
-      aria-disabled={isDisabled || undefined}
-      size="small"
-      icon={icon}
-      onClick={handleClick}
-      {...restProps}
-    />
-  );
-};
+export const StepToPreviousButton = createComponent('button')({
+  displayName: 'Pagination.StepToPreviousButton',
+  Component({onClick, ...restProps}: ControlButtonProps, ref, Element) {
+    const model = React.useContext(PaginationContext);
+    const isDisabled = model.state.currentPage <= model.state.firstPage;
+    const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+      if (isDisabled) {
+        return;
+      }
+      onClick?.(e);
+      model.events.setCurrentPage(model.state.currentPage - 1);
+    };
+    const {shouldUseRTL} = useRTL();
+    const icon = shouldUseRTL ? chevronRightSmallIcon : chevronLeftSmallIcon;
+    return (
+      <TertiaryButton
+        ref={ref}
+        as={Element}
+        aria-disabled={isDisabled || undefined}
+        size="small"
+        icon={icon}
+        onClick={handleClick}
+        {...restProps}
+      />
+    );
+  },
+});
 
-export const StepToNextButton = ({model, onClick, ...restProps}: ControlButtonProps) => {
-  const isDisabled = model.state.currentPage >= model.state.lastPage;
-  const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    if (isDisabled) {
-      return;
-    }
-    onClick?.(e);
-    model.events.setCurrentPage(model.state.currentPage + 1);
-  };
-  const {shouldUseRTL} = useRTL();
-  const icon = shouldUseRTL ? chevronLeftSmallIcon : chevronRightSmallIcon;
-  return (
-    <TertiaryButton
-      aria-disabled={isDisabled || undefined}
-      size="small"
-      icon={icon}
-      onClick={handleClick}
-      {...restProps}
-    />
-  );
-};
+export const StepToNextButton = createComponent('button')({
+  displayName: 'Pagination.StepToNextButton',
+  Component({onClick, ...restProps}: ControlButtonProps, ref, Element) {
+    const model = React.useContext(PaginationContext);
+    const isDisabled = model.state.currentPage >= model.state.lastPage;
+    const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+      if (isDisabled) {
+        return;
+      }
+      onClick?.(e);
+      model.events.setCurrentPage(model.state.currentPage + 1);
+    };
+    const {shouldUseRTL} = useRTL();
+    const icon = shouldUseRTL ? chevronLeftSmallIcon : chevronRightSmallIcon;
+    return (
+      <TertiaryButton
+        ref={ref}
+        as={Element}
+        aria-disabled={isDisabled || undefined}
+        size="small"
+        icon={icon}
+        onClick={handleClick}
+        {...restProps}
+      />
+    );
+  },
+});
 
-export const JumpToLastButton = ({model, onClick, ...restProps}: ControlButtonProps) => {
-  const isDisabled = model.state.currentPage >= model.state.lastPage;
-  const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    if (isDisabled) {
-      return;
-    }
-    onClick?.(e);
-    model.events.setCurrentPage(model.state.lastPage);
-  };
-  const {shouldUseRTL} = useRTL();
-  const icon = shouldUseRTL ? chevron2xLeftSmallIcon : chevron2xRightSmallIcon;
-  return (
-    <TertiaryButton
-      aria-disabled={isDisabled || undefined}
-      size="small"
-      icon={icon}
-      onClick={handleClick}
-      {...restProps}
-    />
-  );
-};
+export const JumpToLastButton = createComponent('button')({
+  displayName: 'Paganation.JumpToLastButton',
+  Component({onClick, ...restProps}: ControlButtonProps, ref, Element) {
+    const model = React.useContext(PaginationContext);
+    const isDisabled = model.state.currentPage >= model.state.lastPage;
+    const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+      if (isDisabled) {
+        return;
+      }
+      onClick?.(e);
+      model.events.setCurrentPage(model.state.lastPage);
+    };
+    const {shouldUseRTL} = useRTL();
+    const icon = shouldUseRTL ? chevron2xLeftSmallIcon : chevron2xRightSmallIcon;
+    return (
+      <TertiaryButton
+        ref={ref}
+        as={Element}
+        aria-disabled={isDisabled || undefined}
+        size="small"
+        icon={icon}
+        onClick={handleClick}
+        {...restProps}
+      />
+    );
+  },
+});

package/pagination/lib/Pagination/GoTo/Form.tsx

@@ -1,25 +1,36 @@
 import * as React from 'react';
-import {HStack, HStackProps, StackSpacing} from '@workday/canvas-kit-react/layout';
-import {useRTL} from '../common/utils/useRTL';
+import {createComponent, useIsRTL} from '@workday/canvas-kit-react/common';
+import {Flex, FlexProps} from '@workday/canvas-kit-react/layout';
 
-export type GoToFormProps = React.FormHTMLAttributes<HTMLFormElement> &
-  Omit<HStackProps, 'spacing'> & {
-    spacing?: StackSpacing;
-  };
+import {PaginationContext} from '../usePaginationModel';
+import {GoToContext, useGoToForm} from './useGoToForm';
 
-export const GoToForm = ({children, onSubmit, spacing = 'xxs', ...elemProps}: GoToFormProps) => {
-  const {shouldUseRTL} = useRTL();
-  return (
-    <HStack
-      as="form"
-      alignItems="center"
-      spacing={spacing}
-      paddingLeft={shouldUseRTL ? 'xxs' : undefined}
-      paddingRight={shouldUseRTL ? 'xxs' : undefined}
-      onSubmit={onSubmit}
-      {...elemProps}
-    >
-      {children}
-    </HStack>
-  );
-};
+export interface GoToFormProps extends FlexProps {
+  onSubmit?: React.FormEventHandler<HTMLFormElement>;
+}
+
+export const GoToForm = createComponent('form')({
+  Component({children, onSubmit, ...elemProps}: GoToFormProps, ref, Element) {
+    const model = React.useContext(PaginationContext);
+    const goToContext = useGoToForm({model, onSubmit});
+    const {formProps} = goToContext;
+    const shouldUseRTL = useIsRTL();
+
+    return (
+      <GoToContext.Provider value={goToContext}>
+        <Flex
+          ref={ref}
+          as={Element}
+          alignItems="center"
+          gap="xxs"
+          paddingLeft={shouldUseRTL ? 'xxs' : undefined}
+          paddingRight={shouldUseRTL ? 'xxs' : undefined}
+          {...formProps}
+          {...elemProps}
+        >
+          {children}
+        </Flex>
+      </GoToContext.Provider>
+    );
+  },
+});