@workday/canvas-kit-react 6.8.8 → 6.9.0-next.4

package/menu/lib/useMenuModel.tsx

@@ -0,0 +1,57 @@
+import {createModelHook} from '@workday/canvas-kit-react/common';
+import {
+  useAlwaysCloseOnOutsideClick,
+  useCloseOnEscape,
+  useFocusRedirect,
+  usePopupModel,
+  useReturnFocus,
+} from '@workday/canvas-kit-react/popup';
+import {
+  multiSelectionManager,
+  singleSelectionManager,
+  useListModel,
+} from '@workday/canvas-kit-react/collection';
+
+export const useMenuModel = createModelHook({
+  defaultConfig: {
+    ...useListModel.defaultConfig,
+    ...usePopupModel.defaultConfig,
+    /** Determines the default selection manager used as well as if the menu closes when an item is selected */
+    mode: 'single' as 'single' | 'multiple',
+  },
+  requiredConfig: {
+    ...useListModel.requiredConfig,
+    ...usePopupModel.requiredConfig,
+  },
+})(config => {
+  // don't virtualize menus by default to avoid oddities with card width
+  const list = useListModel(
+    useListModel.mergeConfig(config, {
+      shouldVirtualize: false,
+      selection: config.mode === 'single' ? singleSelectionManager : multiSelectionManager,
+    })
+  );
+
+  const popup = usePopupModel(
+    usePopupModel.mergeConfig(config, {
+      onHide() {
+        // reset the index ref to 0 again so registration doesn't start where it left off
+        list.state.indexRef.current = 0;
+      },
+    })
+  );
+
+  useAlwaysCloseOnOutsideClick(popup);
+  useCloseOnEscape(popup);
+  useReturnFocus(popup);
+  useFocusRedirect(popup);
+
+  const state = {mode: config.mode, ...list.state, ...popup.state};
+
+  const events = {
+    ...list.events,
+    ...popup.events,
+  };
+
+  return {...list, state, events};
+});

package/menu/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../dist/commonjs/menu",
+  "module": "../dist/es6/menu",
+  "sideEffects": false
+}

package/modal/lib/Modal.tsx

@@ -1,25 +1,16 @@
 import * as React from 'react';
-import {createComponent, ExtractProps, useDefaultModel} from '@workday/canvas-kit-react/common';
+import {createContainer, ExtractProps} from '@workday/canvas-kit-react/common';
 import {Dialog} from '@workday/canvas-kit-react/dialog';
-import {PopupModelContext, Popup} from '@workday/canvas-kit-react/popup';
+import {Popup} from '@workday/canvas-kit-react/popup';
 import {ModalOverlay} from './ModalOverlay';
 import {ModalCard} from './ModalCard';
 import {useModalModel} from './hooks';
 import {ModalHeading} from './ModalHeading';
+import {ModalOverflowOverlay} from './ModalOverflowOverlay';
 
-export interface ModalProps extends ExtractProps<typeof Dialog, never> {
-  /** The contents of the Modal. Can be `Modal` subcomponents or any valid elements. */
-  children: React.ReactNode;
-}
-
-export const Modal = createComponent()({
+export const Modal = createContainer()({
   displayName: 'Modal',
-  Component: ({children, model, ...config}: ModalProps) => {
-    const value = useDefaultModel(model, config, useModalModel);
-
-    return <PopupModelContext.Provider value={value}>{children}</PopupModelContext.Provider>;
-  },
-
+  modelHook: useModalModel,
   subComponents: {
     Body: Popup.Body,
     Card: ModalCard,
@@ -27,6 +18,9 @@ export const Modal = createComponent()({
     Target: Popup.Target,
     Heading: ModalHeading,
     Overlay: ModalOverlay,
+    OverflowOverlay: ModalOverflowOverlay,
     CloseButton: Popup.CloseButton,
   },
+})<ExtractProps<typeof Dialog, never>>(elemProps => {
+  return <>{elemProps.children}</>;
 });

package/modal/lib/ModalCard.tsx

@@ -1,22 +1,18 @@
 import * as React from 'react';
 
-import {createComponent, useModelContext, ExtractProps} from '@workday/canvas-kit-react/common';
-import {Popup, PopupModelContext} from '@workday/canvas-kit-react/popup';
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {Popup} from '@workday/canvas-kit-react/popup';
 
-import {useModalCard} from './hooks';
+import {useModalCard, useModalModel} from './hooks';
 
 export interface ModalCardProps extends ExtractProps<typeof Popup.Card, never> {}
 
-export const ModalCard = createComponent('div')({
+export const ModalCard = createSubcomponent('div')({
   displayName: 'Modal.Card',
-  Component: ({children, model, ...elemProps}: ModalCardProps, ref, Element) => {
-    const localModel = useModelContext(PopupModelContext, model);
-
-    const props = useModalCard(localModel, elemProps, ref);
-    return (
-      <Popup.Card as={Element} width={440} borderWidth={0} {...props}>
-        {children}
-      </Popup.Card>
-    );
-  },
+  modelHook: useModalModel,
+  elemPropsHook: useModalCard,
+})<ModalCardProps>((elemProps, Element) => {
+  return (
+    <Popup.Card as={Element} width={440} borderWidth={0} margin="xl" depth={6} {...elemProps} />
+  );
 });

package/modal/lib/ModalHeading.tsx

@@ -1,22 +1,16 @@
 import * as React from 'react';
 
-import {createComponent, useModelContext, ExtractProps} from '@workday/canvas-kit-react/common';
-import {Popup, PopupModelContext} from '@workday/canvas-kit-react/popup';
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {Popup} from '@workday/canvas-kit-react/popup';
 
-import {useModalHeading} from './hooks';
+import {useModalHeading, useModalModel} from './hooks';
 
 export interface ModalHeadingProps extends ExtractProps<typeof Popup.Heading, never> {}
 
-export const ModalHeading = createComponent('h2')({
+export const ModalHeading = createSubcomponent('h2')({
   displayName: 'Modal.Heading',
-  Component: ({children, model, ...elemProps}: ModalHeadingProps, ref, Element) => {
-    const localModel = useModelContext(PopupModelContext, model);
-
-    const props = useModalHeading(localModel, elemProps, ref);
-    return (
-      <Popup.Heading as={Element} {...props}>
-        {children}
-      </Popup.Heading>
-    );
-  },
+  modelHook: useModalModel,
+  elemPropsHook: useModalHeading,
+})<ModalHeadingProps>((elemProps, Element) => {
+  return <Popup.Heading as={Element} {...elemProps} />;
 });

package/modal/lib/ModalOverflowOverlay.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import {createSubcomponent, ExtractProps, StyledType} from '@workday/canvas-kit-react/common';
+
+import {ModalOverlay} from './ModalOverlay';
+import styled from '@emotion/styled';
+import {useModalModel} from './hooks';
+
+const StyledOverlay = styled(ModalOverlay)<StyledType>({
+  '& > div': {maxHeight: 'inherit'}, // reset maxHeight of centering div
+});
+
+export const ModalOverflowOverlay = createSubcomponent('div')({
+  displayName: 'Modal.OverflowOverlay',
+  modelHook: useModalModel,
+})<ExtractProps<typeof ModalOverlay, never>>((elemProps, Element) => {
+  return <StyledOverlay as={Element} overflowX="hidden" overflowY="auto" {...elemProps} />;
+});

package/modal/lib/ModalOverlay.tsx

@@ -2,19 +2,19 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import {
-  createComponent,
-  useModelContext,
-  createHook,
+  createSubcomponent,
+  createElemPropsHook,
   StyledType,
   useWindowSize,
   useForkRef,
 } from '@workday/canvas-kit-react/common';
-import {PopupModel, PopupModelContext, usePopupStack} from '@workday/canvas-kit-react/popup';
-import {keyframes} from '@emotion/core';
+import {usePopupModel, usePopupStack} from '@workday/canvas-kit-react/popup';
+import {keyframes} from '@emotion/react';
 import styled from '@emotion/styled';
+import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
+import {useModalModel} from './hooks';
 
-export interface ModalOverlayProps {
-  model?: PopupModel;
+export interface ModalOverlayProps extends BoxProps {
   children: React.ReactNode;
 }
 
@@ -27,7 +27,7 @@ const fadeIn = keyframes`
   }
 `;
 
-const Container = styled('div')<StyledType>({
+const Container = styled(Box)<StyledType>({
   position: 'fixed',
   top: 0,
   left: 0,
@@ -47,29 +47,32 @@ const Container = styled('div')<StyledType>({
 // the Modal. The centering container forces a "center" pixel calculation by making sure the width
 // is always an even number
 const CenteringContainer = styled('div')({
-  height: '100vh',
+  maxHeight: '100vh',
   display: 'flex',
   position: 'absolute',
   left: 0,
   top: 0,
   alignItems: 'center',
   justifyContent: 'center',
+
+  // IE11 fix for setting min-height in a flex container
+  ':before': {
+    display: 'block',
+    content: "''",
+    height: '100vh',
+  },
 });
 
-export const ModalOverlay = createComponent('div')({
+export const ModalOverlay = createSubcomponent('div')({
   displayName: 'Modal.Overlay',
-  Component: ({model, children, ...elemProps}: ModalOverlayProps, ref, Element) => {
-    const localModel = useModelContext(PopupModelContext, model);
-
-    return localModel.state.visibility !== 'hidden' ? (
-      <OpenModalOverlay ref={ref} as={Element} model={localModel} {...elemProps}>
-        {children}
-      </OpenModalOverlay>
-    ) : null;
-  },
+  modelHook: useModalModel,
+})<ModalOverlayProps>((elemProps, Element, model) => {
+  return model.state.visibility !== 'hidden' ? (
+    <OpenModalOverlay as={Element} model={model} {...elemProps} />
+  ) : null;
 });
 
-export const useModalOverlay = createHook(({state}: PopupModel, ref) => {
+export const useModalOverlay = createElemPropsHook(usePopupModel)(({state}, ref) => {
   const elementRef = useForkRef(ref, state.stackRef);
   usePopupStack(elementRef);
 
@@ -79,29 +82,29 @@ export const useModalOverlay = createHook(({state}: PopupModel, ref) => {
   };
 });
 
-const OpenModalOverlay = createComponent('div')({
+const OpenModalOverlay = createSubcomponent('div')({
   displayName: 'Modal.OpenOverlay',
-  Component: ({model, children, ...elemProps}: ModalOverlayProps, ref, Element) => {
-    const props = useModalOverlay(model!, elemProps, ref);
-    const windowSize = useWindowSize();
+  modelHook: useModalModel,
+  elemPropsHook: useModalOverlay,
+})<ModalOverlayProps>((elemProps: ModalOverlayProps, Element, model) => {
+  const windowSize = useWindowSize();
 
-    const content = (
-      <Container as={Element} {...props}>
-        <CenteringContainer
-          // make sure the centering container is an even number of pixels to avoid sub-pixel
-          // inaccuracies due to centering
-          style={{width: windowSize.width % 2 === 1 ? 'calc(100vw - 1px)' : '100vw'}}
-        >
-          {children}
-        </CenteringContainer>
-      </Container>
-    );
+  const content = (
+    <Container as={Element} {...elemProps}>
+      <CenteringContainer
+        // make sure the centering container is an even number of pixels to avoid sub-pixel
+        // inaccuracies due to centering
+        style={{width: windowSize.width % 2 === 1 ? 'calc(100vw - 1px)' : '100vw'}}
+      >
+        {elemProps.children}
+      </CenteringContainer>
+    </Container>
+  );
 
-    // only render something on the client
-    if (typeof window !== 'undefined') {
-      return ReactDOM.createPortal(content, model!.state.stackRef.current!);
-    } else {
-      return null;
-    }
-  },
+  // only render something on the client
+  if (typeof window !== 'undefined') {
+    return ReactDOM.createPortal(content, model!.state.stackRef.current!);
+  } else {
+    return null;
+  }
 });

package/modal/lib/hooks/useCloseOnOverlayClick.ts

@@ -1,14 +1,15 @@
 import React from 'react';
 
 import {PopupStack} from '@workday/canvas-kit-popup-stack';
-import {PopupModel} from '@workday/canvas-kit-react/popup';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {usePopupModel} from '@workday/canvas-kit-react/popup';
 
 /**
  * Registers global listener for all clicks. It will only call the PopupModel's `hide` event if the
  * click happened outside the `[role=dialog]` of an overlay component. The difference between `useCloseOnOutsideClick`
  * and `useCloseOnOverlayClick` is the Overlay is a child of a `stackRef` element and has a different
  */
-export const useCloseOnOverlayClick = (model: PopupModel, elemProps = {}) => {
+export const useCloseOnOverlayClick = createElemPropsHook(usePopupModel)(model => {
   const onClick = React.useCallback(
     (event: MouseEvent) => {
       if (!model.state.stackRef.current) {
@@ -33,7 +34,7 @@ export const useCloseOnOverlayClick = (model: PopupModel, elemProps = {}) => {
         elements[elements.length - 1] === model.state.stackRef.current &&
         elementsBetweenDialogAnBody.some(element => element === event.target)
       ) {
-        model.events.hide({event});
+        model.events.hide(event);
       }
     },
     [model.state.stackRef, model.events]
@@ -53,5 +54,5 @@ export const useCloseOnOverlayClick = (model: PopupModel, elemProps = {}) => {
     };
   }, [model.state.stackRef, visible, onClick]);
 
-  return elemProps;
-};
+  return {};
+});

package/modal/lib/hooks/useModalCard.ts

@@ -1,9 +1,9 @@
-import {composeHooks, createHook} from '@workday/canvas-kit-react/common';
-import {usePopupCard, PopupModel} from '@workday/canvas-kit-react/popup';
+import {composeHooks, createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {usePopupCard, usePopupModel} from '@workday/canvas-kit-react/popup';
 
 export const useModalCard = composeHooks(
   usePopupCard,
-  createHook(({state}: PopupModel) => {
+  createElemPropsHook(usePopupModel)(() => {
     return {
       'aria-modal': true,
     };

package/modal/lib/hooks/useModalHeading.ts

@@ -2,15 +2,15 @@ import React from 'react';
 
 import {
   composeHooks,
-  createHook,
+  createElemPropsHook,
   useLocalRef,
   useMountLayout,
 } from '@workday/canvas-kit-react/common';
-import {usePopupHeading, PopupModel} from '@workday/canvas-kit-react/popup';
+import {usePopupHeading, usePopupModel} from '@workday/canvas-kit-react/popup';
 
 export const useModalHeading = composeHooks(
   usePopupHeading,
-  createHook((_: PopupModel, ref?: React.Ref<HTMLElement>) => {
+  createElemPropsHook(usePopupModel)((_, ref?: React.Ref<HTMLElement>) => {
     const {elementRef, localRef} = useLocalRef(ref);
 
     useMountLayout(() => {

package/modal/lib/hooks/useModalModel.ts

@@ -1,5 +1,4 @@
 import {
-  PopupModelConfig,
   usePopupModel,
   useInitialFocus,
   useReturnFocus,
@@ -8,10 +7,15 @@ import {
   useAssistiveHideSiblings,
   useDisableBodyScroll,
 } from '@workday/canvas-kit-react/popup';
+import {createModelHook} from '../../../common';
 
 import {useCloseOnOverlayClick} from './useCloseOnOverlayClick';
 
-export const useModalModel = (config: PopupModelConfig = {}) => {
+export const useModalModel = createModelHook({
+  defaultConfig: usePopupModel.defaultConfig,
+  requiredConfig: usePopupModel.requiredConfig,
+  contextOverride: usePopupModel.Context,
+})(config => {
   const model = usePopupModel(config);
 
   useInitialFocus(model);
@@ -23,4 +27,4 @@ export const useModalModel = (config: PopupModelConfig = {}) => {
   useDisableBodyScroll(model);
 
   return model;
-};
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "6.8.8",
+  "version": "6.9.0-next.4+8ddbb273",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -10,32 +10,24 @@
   "types": "dist/es6/index.d.ts",
   "repository": {
     "type": "git",
-    "url": "http://github.com/Workday/canvas-kit/tree/master/modules/canvas-kit-react"
+    "url": "https://github.com/workday/canvas-kit.git",
+    "directory": "modules/react"
   },
   "files": [
     "*/package.json",
     "*/lib/*",
     "*/index.ts",
     "dist/",
-    "index.ts",
-    "ts3.5/**/*"
+    "index.ts"
   ],
-  "typesVersions": {
-    "<=3.5": {
-      "*": [
-        "ts3.5/*"
-      ]
-    }
-  },
   "scripts": {
     "watch": "yarn build:es6 -w",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "clean": "rimraf dist && rimraf ts3.5 && rimraf .build-info && mkdirp dist && mkdirp ts3.5/dist",
+    "clean": "rimraf dist && rimraf .build-info && mkdirp dist",
     "build:cjs": "tsc -p tsconfig.cjs.json",
     "build:es6": "tsc -p tsconfig.es6.json",
     "build:rebuild": "npm-run-all clean build",
-    "build:downlevel-dts": "yarn run downlevel-dts dist ts3.5/dist",
-    "build": "npm-run-all --parallel build:cjs build:es6 --sequential build:downlevel-dts",
+    "build": "npm-run-all --parallel build:cjs build:es6",
     "prepack": "node ../../utils/publish.js pre react",
     "postpack": "node ../../utils/publish.js post react",
     "depcheck": "node ../../utils/check-dependencies-exist.js",
@@ -52,30 +44,31 @@
     "react": "^16.8 || ^17.0"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.28",
-    "@emotion/is-prop-valid": "^0.8.2",
-    "@emotion/styled": "^10.0.27",
+    "@emotion/is-prop-valid": "^1.1.1",
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-labs-react": "^6.8.8",
-    "@workday/canvas-kit-popup-stack": "^6.8.8",
-    "@workday/canvas-kit-preview-react": "^6.8.8",
-    "@workday/canvas-system-icons-web": "1.0.41",
-    "@workday/design-assets-types": "^0.2.4",
+    "@workday/canvas-kit-labs-react": "^6.9.0-next.4+8ddbb273",
+    "@workday/canvas-kit-popup-stack": "^6.9.0-next.4+8ddbb273",
+    "@workday/canvas-kit-preview-react": "^6.9.0-next.4+8ddbb273",
+    "@workday/canvas-system-icons-web": "^3.0.0",
+    "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
+    "csstype": "^2.6.17",
     "element-closest": "^3.0.2",
-    "emotion-theming": "^10.0.10",
     "lodash": "^4.17.14",
     "polished": "^4.1.3",
     "react-innertext": "^1.1.5",
+    "react-virtual": "^2.10.4",
     "resize-observer-polyfill": "^1.5.1",
     "rtl-css-js": "^1.14.1",
     "screenfull": "^5.2.0",
     "use-resize-observer": "~7.0.1"
   },
   "devDependencies": {
-    "@workday/canvas-accent-icons-web": "^1.0.0",
-    "@workday/canvas-applet-icons-web": "^0.17.50"
+    "@workday/canvas-accent-icons-web": "^3.0.0",
+    "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "9bce0569b98c9a3644899e72e85eb636e1c02c0b"
+  "gitHead": "8ddbb27356d06d06508938ae073ce2006b6dc4fd"
 }

package/pagination/lib/Pagination/AdditionalDetails.tsx

@@ -1,11 +1,9 @@
-/** @jsx jsx */
 import * as React from 'react';
-import {jsx, css} from '@emotion/core';
-import {type, typeColors} from '@workday/canvas-kit-react/tokens';
-import {accessibleHide} from '@workday/canvas-kit-react/common';
+import {type, typeColors, space} from '@workday/canvas-kit-react/tokens';
+import {accessibleHide, styled, StyledType} from '@workday/canvas-kit-react/common';
 
 import {PaginationModel} from './types';
-import {Flex, FlexProps} from './common/Flex';
+import {Flex, FlexProps} from '@workday/canvas-kit-react/layout';
 import {useLiveRegion} from './common/useLiveRegion';
 
 export interface AdditionalDetailsProps extends FlexProps {
@@ -15,30 +13,38 @@ export interface AdditionalDetailsProps extends FlexProps {
   shouldHideDetails?: boolean;
 }
 
-// Ideally, these styles would be applied directly to a Text component
-const textStyles = css({
-  ...type.levels.subtext.medium,
-  color: typeColors.hint,
+const StyledAdditionalDetails = styled(Flex)<
+  StyledType & Pick<AdditionalDetailsProps, 'shouldHideDetails'>
+>(({shouldHideDetails}) => {
+  const styles = {
+    ...type.levels.subtext.medium,
+    color: typeColors.hint,
+  };
+  if (shouldHideDetails) {
+    return {
+      ...styles,
+      ...accessibleHide,
+      marginTop: space.zero,
+    };
+  } else {
+    return {
+      ...styles,
+      marginTop: space.xs,
+    };
+  }
 });
 
 export const AdditionalDetails = ({
   model,
   children,
   shouldAnnounceToScreenReader,
-  shouldHideDetails = false,
   ...elemProps
 }: AdditionalDetailsProps) => {
   const liveRegionProps = useLiveRegion({shouldAnnounceToScreenReader});
-  const detailStyles = css([textStyles, shouldHideDetails ? accessibleHide : null]);
 
   return (
-    <Flex
-      mt={shouldHideDetails ? 'zero' : 'xs'}
-      css={detailStyles}
-      {...liveRegionProps}
-      {...elemProps}
-    >
+    <StyledAdditionalDetails {...liveRegionProps} {...elemProps}>
       {typeof children === 'function' ? children(model) : children}
-    </Flex>
+    </StyledAdditionalDetails>
   );
 };

package/pagination/lib/Pagination/Controls.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {IconButton, IconButtonProps} from '@workday/canvas-kit-react/button';
+import {TertiaryButton, TertiaryButtonProps} from '@workday/canvas-kit-react/button';
 import {
   chevronLeftSmallIcon,
   chevron2xLeftSmallIcon,
@@ -8,10 +8,10 @@ import {
 } from '@workday/canvas-system-icons-web';
 
 import {PaginationModel} from './types';
-import {HStack} from './common/Stack';
+import {HStack} from '@workday/canvas-kit-react/layout';
 import {useRTL} from './common/utils/useRTL';
 
-export type ControlButtonProps = IconButtonProps &
+export type ControlButtonProps = TertiaryButtonProps &
   React.ButtonHTMLAttributes<HTMLButtonElement> & {
     model: PaginationModel;
   };
@@ -38,9 +38,8 @@ export const JumpToFirstButton = ({model, onClick, ...restProps}: ControlButtonP
   const {shouldUseRTL} = useRTL();
   const icon = shouldUseRTL ? chevron2xRightSmallIcon : chevron2xLeftSmallIcon;
   return (
-    <IconButton
+    <TertiaryButton
       aria-disabled={isDisabled || undefined}
-      variant="square"
       size="small"
       icon={icon}
       onClick={handleClick}
@@ -61,9 +60,8 @@ export const StepToPreviousButton = ({onClick, model, ...restProps}: ControlButt
   const {shouldUseRTL} = useRTL();
   const icon = shouldUseRTL ? chevronRightSmallIcon : chevronLeftSmallIcon;
   return (
-    <IconButton
+    <TertiaryButton
       aria-disabled={isDisabled || undefined}
-      variant="square"
       size="small"
       icon={icon}
       onClick={handleClick}
@@ -84,9 +82,8 @@ export const StepToNextButton = ({model, onClick, ...restProps}: ControlButtonPr
   const {shouldUseRTL} = useRTL();
   const icon = shouldUseRTL ? chevronLeftSmallIcon : chevronRightSmallIcon;
   return (
-    <IconButton
+    <TertiaryButton
       aria-disabled={isDisabled || undefined}
-      variant="square"
       size="small"
       icon={icon}
       onClick={handleClick}
@@ -107,9 +104,8 @@ export const JumpToLastButton = ({model, onClick, ...restProps}: ControlButtonPr
   const {shouldUseRTL} = useRTL();
   const icon = shouldUseRTL ? chevron2xLeftSmallIcon : chevron2xRightSmallIcon;
   return (
-    <IconButton
+    <TertiaryButton
       aria-disabled={isDisabled || undefined}
-      variant="square"
       size="small"
       icon={icon}
       onClick={handleClick}