@workday/canvas-kit-react 9.0.0-alpha.338-next.5 → 9.0.0-alpha.348-next.3

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 {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 (
-    <Flex gap="xxxs" alignItems="center" {...elemProps}>
-      {children}
-    </Flex>
-  );
-};
+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,22 +1,36 @@
 import * as React from 'react';
+import {createComponent, useIsRTL} from '@workday/canvas-kit-react/common';
 import {Flex, FlexProps} from '@workday/canvas-kit-react/layout';
-import {useRTL} from '../common/utils/useRTL';
 
-export type GoToFormProps = React.FormHTMLAttributes<HTMLFormElement> & FlexProps;
+import {PaginationContext} from '../usePaginationModel';
+import {GoToContext, useGoToForm} from './useGoToForm';
 
-export const GoToForm = ({children, onSubmit, gap = 'xxs', ...elemProps}: GoToFormProps) => {
-  const {shouldUseRTL} = useRTL();
-  return (
-    <Flex
-      as="form"
-      alignItems="center"
-      gap={gap}
-      paddingLeft={shouldUseRTL ? 'xxs' : undefined}
-      paddingRight={shouldUseRTL ? 'xxs' : undefined}
-      onSubmit={onSubmit}
-      {...elemProps}
-    >
-      {children}
-    </Flex>
-  );
-};
+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>
+    );
+  },
+});

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

@@ -1,20 +1,31 @@
 import * as React from 'react';
 import {PaginationModel} from '../types';
 import {LabelText} from '@workday/canvas-kit-react/text';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {PaginationContext} from '../usePaginationModel';
 
-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 const GoToLabel = ({model, children, ...elemProps}: GoToLabelProps) => {
-  return (
-    <LabelText typeLevel="subtext.medium" variant="hint" whiteSpace="nowrap" {...elemProps}>
-      {typeof children === 'function' ? children(model) : children}
-    </LabelText>
-  );
-};
+export const GoToLabel = createComponent('label')({
+  displayName: 'Pagination.GoToLabel',
+  Component({children, ...elemProps}: GoToLabelProps, ref, Element) {
+    const model = React.useContext(PaginationContext);
+    return (
+      <LabelText
+        ref={ref}
+        as={Element}
+        typeLevel="subtext.medium"
+        variant="hint"
+        whiteSpace="nowrap"
+        {...elemProps}
+      >
+        {typeof children === 'function' ? children(model) : children}
+      </LabelText>
+    );
+  },
+});

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

@@ -1,16 +1,20 @@
 import * as React from 'react';
 
 import {TextInput, TextInputProps} from '@workday/canvas-kit-react/text-input';
+import {createComponent} from '@workday/canvas-kit-react/common';
+
+import {GoToContext} from './useGoToForm';
 
 export type GoToTextInputProps = TextInputProps & {
   'aria-label': string;
   value?: string | number;
 };
 
-export const GoToTextInput = ({
-  'aria-label': ariaLabel,
-  value = '',
-  ...elemProps
-}: GoToTextInputProps) => {
-  return <TextInput aria-label={ariaLabel} size={1} value={value} width={55} {...elemProps} />;
-};
+export const GoToTextInput = createComponent('input')({
+  displayName: 'Pagination.GoToTextInput',
+  Component(elemProps: GoToTextInputProps, ref, Element) {
+    const {inputProps} = React.useContext(GoToContext);
+
+    return <TextInput ref={ref} as={Element} size={1} width={55} {...inputProps} {...elemProps} />;
+  },
+});

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

@@ -7,6 +7,8 @@ export interface UseGoToFormConfig {
   onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
 }
 
+export const GoToContext = React.createContext({} as ReturnType<typeof useGoToForm>);
+
 export const useGoToForm = ({onSubmit, model}: UseGoToFormConfig = {} as UseGoToFormConfig) => {
   const [value, setValue] = React.useState<number>(model.state.currentPage);
 

package/pagination/lib/Pagination/Nav.tsx

@@ -5,11 +5,10 @@ export interface PaginationNavProps extends Omit<FlexProps, 'as'> {
   'aria-label': string;
 }
 
-export const PaginationNav = ({'aria-label': ariaLabel, ...elemProps}: PaginationNavProps) => {
+export const PaginationNav = (elemProps: PaginationNavProps) => {
   return (
     <Flex
       as="nav"
-      aria-label={ariaLabel}
       display="inline-flex"
       flexDirection="column"
       alignItems="center"

package/pagination/lib/Pagination/PageButton.tsx

@@ -1,9 +1,14 @@
 import * as React from 'react';
-import {EmotionCanvasTheme, styled, useTheme} from '@workday/canvas-kit-react/common';
+import {
+  EmotionCanvasTheme,
+  styled,
+  useTheme,
+  createComponent,
+} from '@workday/canvas-kit-react/common';
 import {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens';
 import {BaseButton} from '@workday/canvas-kit-react/button';
 
-import {PaginationModel} from './types';
+import {PaginationContext} from './usePaginationModel';
 
 const StyledPageButton = styled(BaseButton)<{toggled?: boolean}>(
   {
@@ -48,36 +53,34 @@ const getPaginationButtonColors = (toggled: boolean, theme: EmotionCanvasTheme)
   };
 };
 
-export type PageButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-  model: PaginationModel;
+export interface PageButtonProps {
   pageNumber: number;
-};
+  children?: React.ReactNode;
+}
 
-export const PageButton = ({
-  model,
-  onClick,
-  pageNumber,
-  children,
-  ...elemProps
-}: PageButtonProps) => {
-  const isCurrentPage = pageNumber === model.state.currentPage;
-  const theme = useTheme();
+export const PageButton = createComponent('button')({
+  displayName: 'Pagination.PageButton',
+  Component({pageNumber, children, ...elemProps}: PageButtonProps) {
+    const model = React.useContext(PaginationContext);
+    const isCurrentPage = pageNumber === model.state.currentPage;
+    const theme = useTheme();
 
-  const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    onClick?.(e);
-    model.events.goTo(pageNumber);
-  };
+    const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+      (elemProps as any).onClick?.(e);
+      model.events.goTo(pageNumber);
+    };
 
-  return (
-    <StyledPageButton
-      aria-current={isCurrentPage ? 'page' : undefined}
-      colors={getPaginationButtonColors(isCurrentPage, theme)}
-      aria-pressed={undefined}
-      onClick={handleClick}
-      toggled={isCurrentPage}
-      {...elemProps}
-    >
-      {children || pageNumber}
-    </StyledPageButton>
-  );
-};
+    return (
+      <StyledPageButton
+        aria-current={isCurrentPage ? 'page' : undefined}
+        colors={getPaginationButtonColors(isCurrentPage, theme)}
+        aria-pressed={undefined}
+        onClick={handleClick}
+        toggled={isCurrentPage}
+        {...elemProps}
+      >
+        {children || pageNumber}
+      </StyledPageButton>
+    );
+  },
+});

package/pagination/lib/Pagination/PageList.tsx

@@ -3,30 +3,44 @@ import * as React from 'react';
 import {PaginationModel} from './types';
 import {ListItem, ListItemProps} from './common/List';
 import {Flex, FlexProps} from '@workday/canvas-kit-react/layout';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {PaginationContext} from './usePaginationModel';
 
 export interface PageListProps extends Omit<FlexProps, 'as' | 'children'> {
-  model: PaginationModel;
+  model?: PaginationModel;
   children?: (model: PaginationModel) => React.ReactNode[] | React.ReactNode;
 }
 
-export const PageList = ({model, children, ...elemProps}: PageListProps) => {
-  return (
-    <Flex
-      margin="zero"
-      as="ol"
-      role="list"
-      paddingLeft="zero"
-      paddingRight="zero"
-      gap="xxxs"
-      {...elemProps}
-    >
-      {typeof children === 'function' ? children(model) : children}
-    </Flex>
-  );
-};
+export const PageList = createComponent('ol')({
+  displayName: 'Pagination.PageList',
+  Component({children, ...elemProps}: PageListProps, ref, Element) {
+    const model = React.useContext(PaginationContext);
+    return (
+      <Flex
+        ref={ref}
+        as={Element}
+        margin="zero"
+        role="list"
+        paddingLeft="zero"
+        paddingRight="zero"
+        gap="xxxs"
+        {...elemProps}
+      >
+        {typeof children === 'function' ? children(model) : children}
+      </Flex>
+    );
+  },
+});
 
-export type PageListItemProps = ListItemProps;
+export interface PageListItemProps extends ListItemProps {}
 
-export const PageListItem = ({children, ...elemProps}: PageListItemProps) => {
-  return <ListItem {...elemProps}>{children}</ListItem>;
-};
+export const PageListItem = createComponent('li')({
+  displayName: 'Pagination.PageListItem',
+  Component({children, ...elemProps}: PageListItemProps, ref, Element) {
+    return (
+      <ListItem ref={ref} as={Element} {...elemProps}>
+        {children}
+      </ListItem>
+    );
+  },
+});