@workday/canvas-kit-preview-react 7.1.4 → 7.2.0-427-next.2

package/table/lib/TableHead.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import {GridProps, Grid} from '@workday/canvas-kit-react/layout';
+import {createComponent, styled, StyledType} from '@workday/canvas-kit-react/common';
+
+const StyledHead = styled(Grid.as('thead'))<StyledType>({
+  'th:last-of-type': {
+    borderRight: 'none',
+  },
+  'th:first-of-type': {
+    borderLeft: 'none',
+  },
+});
+
+export const TableHead = createComponent('thead')({
+  displayName: 'Table.Head',
+  Component: ({children, ...elemProps}: GridProps, ref, Element) => {
+    return (
+      <StyledHead as={Element} ref={ref} backgroundColor="soap100" minHeight="48px" {...elemProps}>
+        {children}
+      </StyledHead>
+    );
+  },
+});

package/table/lib/TableHeader.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import {Grid, GridProps} from '@workday/canvas-kit-react/layout';
+import {colors} from '@workday/canvas-kit-react/tokens';
+import {createComponent} from '@workday/canvas-kit-react/common';
+
+export const TableHeader = createComponent('th')({
+  displayName: 'Table.Header',
+  Component: ({children, ...elemProps}: GridProps, ref, Element) => {
+    return (
+      <Grid
+        as={Element}
+        ref={ref}
+        alignItems="center"
+        backgroundColor="frenchVanilla100"
+        borderBottom={`1px solid ${colors.soap400}`}
+        justifyContent="left"
+        minHeight="56px"
+        paddingY="xxs"
+        paddingX="s"
+        wordBreak="break-word"
+        fontWeight="medium"
+        {...elemProps}
+      >
+        {children}
+      </Grid>
+    );
+  },
+});

package/table/lib/TableRow.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import {GridProps, Grid} from '@workday/canvas-kit-react/layout';
+import {createComponent} from '@workday/canvas-kit-react/common';
+
+export const TableRow = createComponent('tr')({
+  displayName: 'Table.Row',
+  Component: ({children, ...elemProps}: GridProps, ref, Element) => {
+    const validChildren = (children: React.ReactNode) => {
+      return React.Children.toArray(children).filter(child =>
+        React.isValidElement(child)
+      ) as React.ReactElement[];
+    };
+    const childrenArray = validChildren(children).length;
+    return (
+      <Grid
+        as={Element}
+        ref={ref}
+        gridAutoFlow="column"
+        gridTemplateColumns={`repeat(${childrenArray}, minmax(10rem, 1fr))`}
+        {...elemProps}
+      >
+        {children}
+      </Grid>
+    );
+  },
+});

package/table/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../dist/commonjs/table",
+  "module": "../dist/es6/table",
+  "sideEffects": false,
+  "types": "../dist/es6/table"
+}

package/text-area/lib/TextArea.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
 
 import {createContainer, ExtractProps} from '@workday/canvas-kit-react/common';
-import {FormField, useFormFieldOrientation} from '@workday/canvas-kit-preview-react/form-field';
-import {Stack} from '@workday/canvas-kit-react/layout';
+import {
+  FormField,
+  useFormFieldModel,
+  useFormFieldOrientation,
+} from '@workday/canvas-kit-preview-react/form-field';
+import {Flex} from '@workday/canvas-kit-react/layout';
 
-import {useTextAreaModel} from './hooks';
 import {TextAreaField} from './TextAreaField';
 
 export interface TextAreaProps extends ExtractProps<typeof FormField, never> {
@@ -16,7 +19,7 @@ export interface TextAreaProps extends ExtractProps<typeof FormField, never> {
 
 export const TextArea = createContainer('div')({
   displayName: 'TextArea',
-  modelHook: useTextAreaModel,
+  modelHook: useFormFieldModel,
   subComponents: {
     Field: TextAreaField,
     Label: FormField.Label,
@@ -26,8 +29,8 @@ export const TextArea = createContainer('div')({
   const layoutProps = useFormFieldOrientation(orientation);
 
   return (
-    <Stack as={Element} {...layoutProps} {...elemProps}>
+    <Flex as={Element} {...layoutProps} {...elemProps}>
       {children}
-    </Stack>
+    </Flex>
   );
 });

package/text-area/lib/TextAreaField.tsx

@@ -9,13 +9,16 @@ import {
   spaceNumbers,
   type,
 } from '@workday/canvas-kit-react/tokens';
-import {createSubcomponent, ExtractProps, useTheme} from '@workday/canvas-kit-react/common';
-import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
+import {
+  createSubcomponent,
+  ExtractProps,
+  useTheme,
+  useThemedRing,
+} from '@workday/canvas-kit-react/common';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {useTextInputModel} from '@workday/canvas-kit-preview-react/text-input';
 
 const baseStyles: CSSProperties = {
-  ...type.levels.subtext.large,
   transition: '0.2s box-shadow, 0.2s border-color',
   resize: 'both',
   '&::webkit-resizer': {
@@ -59,6 +62,7 @@ export const TextAreaField = createSubcomponent('textarea')({
   return (
     <FormField.Input
       as={Element}
+      {...type.levels.subtext.large}
       css={[baseStyles, focusStyles]}
       {...elemProps}
       border={`1px solid ${inputColors.border}`}

package/text-area/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/text-area",
   "module": "../dist/es6/text-area",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/text-area"
 }

package/text-input/lib/TextInput.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
 
 import {createContainer, ExtractProps} from '@workday/canvas-kit-react/common';
-import {FormField, useFormFieldOrientation} from '@workday/canvas-kit-preview-react/form-field';
-import {Stack} from '@workday/canvas-kit-react/layout';
+import {
+  FormField,
+  useFormFieldModel,
+  useFormFieldOrientation,
+} from '@workday/canvas-kit-preview-react/form-field';
+import {Flex} from '@workday/canvas-kit-react/layout';
 
-import {useTextInputModel} from './hooks';
 import {TextInputField} from './TextInputField';
 
 export interface TextInputProps extends ExtractProps<typeof FormField, never> {
@@ -16,7 +19,7 @@ export interface TextInputProps extends ExtractProps<typeof FormField, never> {
 
 export const TextInput = createContainer('div')({
   displayName: 'TextInput',
-  modelHook: useTextInputModel,
+  modelHook: useFormFieldModel,
   subComponents: {
     Field: TextInputField,
     Label: FormField.Label,
@@ -26,8 +29,8 @@ export const TextInput = createContainer('div')({
   const layoutProps = useFormFieldOrientation(orientation);
 
   return (
-    <Stack as={Element} {...layoutProps} {...elemProps}>
+    <Flex as={Element} {...layoutProps} {...elemProps}>
       {children}
-    </Stack>
+    </Flex>
   );
 });

package/text-input/lib/TextInputField.tsx

@@ -9,14 +9,17 @@ import {
   space,
   type,
 } from '@workday/canvas-kit-react/tokens';
-import {createSubcomponent, ExtractProps, useTheme} from '@workday/canvas-kit-react/common';
-import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {
+  createSubcomponent,
+  ExtractProps,
+  useTheme,
+  useThemedRing,
+} from '@workday/canvas-kit-react/common';
+import {FormField, useFormFieldModel} from '@workday/canvas-kit-preview-react/form-field';
 
-import {useTextInputField, useTextInputModel} from './hooks';
+import {useTextInputField} from './hooks';
 
 const baseStyles: CSSProperties = {
-  ...type.levels.subtext.large,
   transition: '0.2s box-shadow, 0.2s border-color',
   '&::placeholder': {
     color: inputColors.placeholder,
@@ -42,7 +45,7 @@ const baseStyles: CSSProperties = {
 
 export const TextInputField = createSubcomponent('input')({
   displayName: 'TextInput.Field',
-  modelHook: useTextInputModel,
+  modelHook: useFormFieldModel,
   elemPropsHook: useTextInputField,
 })<ExtractProps<typeof FormField.Input, never>>((elemProps, Element, model) => {
   const theme = useTheme();
@@ -60,6 +63,7 @@ export const TextInputField = createSubcomponent('input')({
   return (
     <FormField.Input
       as="input"
+      {...type.levels.subtext.large}
       css={[baseStyles, focusStyles]}
       padding={space.xxs}
       margin={0}

package/text-input/lib/hooks/useTextInputModel.ts

@@ -1,3 +1,4 @@
 import {useFormFieldModel} from '@workday/canvas-kit-preview-react/form-field';
 
+/** @deprecated Please use `useFormFieldModel` instead */
 export const useTextInputModel = useFormFieldModel;

package/text-input/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/text-input",
   "module": "../dist/es6/text-input",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/text-input"
 }

package/breadcrumbs/README.md

@@ -1,7 +0,0 @@
-# Canvas Kit Breadcrumbs
-
-View the
-[documentation for Breadcrumbs](https://workday.github.io/canvas-kit/?path=/docs/preview-breadcrumbs-react--page)
-on Storybook.
-
-[> Workday Design Reference](https://design.workday.com/components/navigation/breadcrumbs)

package/breadcrumbs/index.ts

@@ -1,5 +0,0 @@
-import {Breadcrumbs} from './lib/Breadcrumbs';
-
-export default Breadcrumbs;
-export {Breadcrumbs};
-export * from './lib/Breadcrumbs';

package/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.tsx

@@ -1,85 +0,0 @@
-import React from 'react';
-import {BaseButton} from '@workday/canvas-kit-react/button';
-import {relatedActionsIcon} from '@workday/canvas-system-icons-web';
-import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {createComponent, EmotionCanvasTheme, useTheme} from '@workday/canvas-kit-react/common';
-import {colors, space} from '@workday/canvas-kit-react/tokens';
-
-export interface DropdownButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
-  /**
-   * The accessibility label for the button
-   */
-  'aria-label': string;
-  /**
-   * The Canvas System Icon for the button
-   *
-   * @default relatedActionsIcon
-   */
-  buttonIcon?: CanvasSystemIcon;
-  /**
-   * The boolean to determine whether the button should be in a 'toggled' state
-   */
-  toggled: boolean;
-}
-
-export const DropdownButton = createComponent('button')({
-  displayName: 'DropdownButton',
-  Component: (
-    {buttonIcon = relatedActionsIcon, toggled, ...elemProps}: DropdownButtonProps,
-    ref,
-    Element
-  ) => {
-    const theme = useTheme();
-    return (
-      <BaseButton
-        as={Element}
-        ref={ref}
-        aria-pressed={undefined} // removing aria-pressed from button and opting for aria-expanded
-        aria-expanded={toggled}
-        aria-haspopup
-        aria-controls="menu"
-        size="small"
-        height={space.l}
-        width={space.l}
-        padding={space.zero}
-        colors={getDropdownColors(toggled, theme)}
-        {...elemProps}
-      >
-        <BaseButton.Icon icon={buttonIcon} />
-      </BaseButton>
-    );
-  },
-});
-
-const getDropdownColors = (toggled: boolean, theme: EmotionCanvasTheme) => {
-  const {
-    canvas: {
-      palette: {primary: themePrimary},
-    },
-  } = theme;
-
-  return {
-    default: {
-      icon: toggled ? themePrimary.main : colors.blackPepper400,
-      label: themePrimary.main,
-    },
-    hover: {
-      background: colors.soap200,
-      icon: toggled ? themePrimary.dark : colors.blackPepper500,
-      label: themePrimary.dark,
-    },
-    active: {
-      background: colors.soap300,
-      icon: toggled ? themePrimary.dark : colors.blackPepper500,
-      label: themePrimary.dark,
-    },
-    focus: {
-      icon: toggled ? themePrimary.main : colors.blackPepper500,
-      label: themePrimary.main,
-    },
-    disabled: {
-      icon: toggled ? themePrimary.main : colors.blackPepper400,
-      label: themePrimary.main,
-    },
-  };
-};

package/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.tsx

@@ -1,152 +0,0 @@
-import React from 'react';
-import {styled} from '@workday/canvas-kit-react/common';
-import {
-  borderRadius,
-  colors,
-  commonColors,
-  depth,
-  space,
-  type,
-} from '@workday/canvas-kit-react/tokens';
-
-// types
-import {Breadcrumb} from '../types';
-// local components
-import {DropdownMenuItemLink} from './MenuItemLink';
-import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
-
-export interface DropdownMenuProps {
-  /**
-   * The active dropdown item in the menu
-   */
-  activeDropdownItem: Breadcrumb;
-  /**
-   * The HTML `id` of the element that labels the Menu. It should match the id of the menu button.
-   */
-  'aria-labelledby': string;
-  /**
-   * An array of Breadcrumb items to render in the dropdown menu
-   */
-  dropdownItems: Breadcrumb[];
-  /**
-   * A function to set the active dropdown item
-   */
-  setActiveDropdownItem: React.Dispatch<React.SetStateAction<Breadcrumb>>;
-  /**
-   * The ref of the rendered HTMLAnchorElement
-   */
-  activeDropdownItemRef: React.RefObject<HTMLAnchorElement>;
-  /**
-   * A function to return the focus to the dropdown button
-   */
-  resetFocus: () => void;
-  /**
-   * A function to toggle the focus to the previous list item
-   */
-  toggleActiveItemUp: () => void;
-  /**
-   * A function to toggle the focus to the next list item
-   */
-  toggleActiveItemDown: () => void;
-}
-
-const StyledDropdownMenu = styled(Box)<BoxProps>({
-  ...type.levels.subtext.large,
-  ...depth[3],
-  backgroundColor: commonColors.background,
-  border: `1px solid ${colors.soap500}`,
-  borderRadius: borderRadius.m,
-  boxSizing: 'border-box',
-  display: 'inline-block',
-  marginTop: space.xxxs,
-  maxHeight: 200,
-  outline: 'none',
-  overflowY: 'auto',
-  position: 'relative',
-  width: 'max-content',
-});
-
-const StyledMenuList = styled('ul')({
-  boxSizing: 'border-box',
-  listStyle: 'none',
-  margin: `${space.xxs} 0`,
-  padding: 0,
-  width: 280,
-  wordBreak: 'break-word',
-  wordWrap: 'break-word', // Needed for IE11
-});
-
-const MenuList = (elemProps: React.HTMLAttributes<HTMLUListElement>) => {
-  return <StyledMenuList role="menu" {...elemProps} />;
-};
-
-export const DropdownMenu = ({
-  activeDropdownItemRef,
-  activeDropdownItem,
-  dropdownItems = [],
-  resetFocus,
-  setActiveDropdownItem,
-  toggleActiveItemDown,
-  toggleActiveItemUp,
-  ...elemProps
-}: DropdownMenuProps) => {
-  const handleItemKeyUp = (event: React.KeyboardEvent<HTMLLIElement>) => {
-    switch (event.key) {
-      case 'ArrowUp':
-      case 'Up': // IE/Edge specific value
-      case 'ArrowLeft':
-      case 'Left': // IE/Edge specific value
-        toggleActiveItemUp();
-        break;
-      case 'ArrowDown':
-      case 'Down': // IE/Edge specific value
-      case 'ArrowRight':
-      case 'Right': // IE/Edge specific value
-        toggleActiveItemDown();
-        break;
-      default:
-        break;
-    }
-  };
-
-  const handleItemKeyDown = (event: React.KeyboardEvent<HTMLLIElement>, item: Breadcrumb) => {
-    switch (event.key) {
-      case 'Tab':
-        event.preventDefault();
-        break;
-      case 'Enter':
-        event.preventDefault();
-        if (item.onAction) {
-          item.onAction(item.link);
-          resetFocus();
-          break;
-        }
-        window.location.href = item.link;
-        break;
-      default:
-        break;
-    }
-  };
-
-  return (
-    <StyledDropdownMenu>
-      <MenuList {...elemProps}>
-        {dropdownItems.map((item, i) => {
-          const {index, link, text, ...elemProps} = item;
-          const isFocused = index === activeDropdownItem.index;
-          return (
-            <li onKeyUp={handleItemKeyUp} onKeyDown={e => handleItemKeyDown(e, item)} key={i}>
-              <DropdownMenuItemLink
-                ref={isFocused ? activeDropdownItemRef : null}
-                href={link}
-                {...elemProps}
-              >
-                {text}
-              </DropdownMenuItemLink>
-            </li>
-          );
-        })}
-      </MenuList>
-    </StyledDropdownMenu>
-  );
-};

package/breadcrumbs/lib/Breadcrumbs/Dropdown/MenuItemLink.tsx

@@ -1,63 +0,0 @@
-import React, {forwardRef} from 'react';
-import {styled} from '@workday/canvas-kit-react/common';
-import {colors, commonColors, type, typeColors, space} from '@workday/canvas-kit-react/tokens';
-
-interface DropdownMenuItemLinkProps extends React.HTMLAttributes<HTMLAnchorElement> {
-  /**
-   * The href url of the anchor tag
-   */
-  href: string;
-  /**
-   * A handler function for overriding hard-redirects with links
-   */
-  onAction?: (href: string) => void;
-}
-
-const MenuItemLink = styled('a')({
-  ...type.levels.subtext.large,
-  boxSizing: 'border-box',
-  textAlign: 'left',
-  color: colors.blackPepper300,
-  cursor: 'pointer',
-  display: 'block',
-  outline: 'none',
-  padding: `${space.xxs} ${space.s}`,
-  textDecoration: 'none',
-  transition: 'background-color color 80ms',
-  '&:hover': {
-    backgroundColor: commonColors.hoverBackground,
-  },
-  '&:focus': {
-    backgroundColor: commonColors.focusBackground,
-    color: typeColors.inverse,
-    outline: 'none',
-  },
-});
-
-export const DropdownMenuItemLink = forwardRef(
-  (
-    {children, href, onAction, onClick, ...elemProps}: DropdownMenuItemLinkProps,
-    ref: React.Ref<HTMLAnchorElement>
-  ) => {
-    const handleClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
-      event.preventDefault();
-      // allow an override to the hard redirect
-      if (onAction) {
-        onAction(href);
-      } else {
-        // default to hard redirecting
-        window.location.href = href;
-      }
-      // don't block the onClick event if it's provided
-      if (onClick) {
-        onClick(event);
-      }
-    };
-
-    return (
-      <MenuItemLink ref={ref} href={href} role="menuitem" onClick={handleClick} {...elemProps}>
-        {children}
-      </MenuItemLink>
-    );
-  }
-);

package/breadcrumbs/lib/Breadcrumbs/Dropdown/hooks.ts

@@ -1,109 +0,0 @@
-import {useState, useLayoutEffect} from 'react';
-import {useUniqueId, changeFocus} from '@workday/canvas-kit-react/common';
-import {
-  useCloseOnOutsideClick,
-  useCloseOnEscape,
-  usePopupModel,
-  useReturnFocus,
-  usePopupTarget,
-  usePopupPopper,
-} from '@workday/canvas-kit-react/popup';
-
-import {DropdownButtonProps} from './Button';
-import {DropdownMenuProps} from './Menu';
-import {Breadcrumb} from '../types';
-
-export const useFocusActiveItemElement = <E extends HTMLElement>(
-  activeDropdownItemRef: React.RefObject<E>
-) => {
-  useLayoutEffect(() => {
-    if (activeDropdownItemRef.current) {
-      return activeDropdownItemRef.current.focus();
-    }
-  });
-};
-
-const initialActiveItem = {
-  index: 0,
-  link: '',
-  text: '',
-  width: 0,
-} as Breadcrumb;
-
-interface UseDropdown {
-  dropdownButtonProps: Omit<DropdownButtonProps, 'aria-label'>;
-  dropdownMenuProps: DropdownMenuProps;
-  popperProps: ReturnType<typeof usePopupPopper>;
-}
-
-export const useDropdown = (
-  activeDropdownItemRef: React.RefObject<HTMLAnchorElement>,
-  items: Breadcrumb[],
-  buttonId?: string
-): UseDropdown => {
-  // state
-  const [activeDropdownItem, setActiveDropdownItem] = useState(initialActiveItem);
-  // behaviors
-  const model = usePopupModel({
-    initialFocusRef: activeDropdownItemRef,
-  });
-
-  useCloseOnOutsideClick(model);
-  useCloseOnEscape(model);
-  useReturnFocus(model);
-  useFocusActiveItemElement(activeDropdownItemRef);
-
-  const handleButtonKeyUp = (e: React.KeyboardEvent<HTMLButtonElement>) => {
-    if (e.key === 'Enter') {
-      setActiveDropdownItem(items[0]);
-    }
-  };
-
-  const resetMenuFocus = () => {
-    model.events.hide();
-    changeFocus(model.state.targetRef.current);
-  };
-
-  const findActiveDropdownItemByIndex = (index: number) => {
-    return items.filter(item => item.index === index)[0];
-  };
-
-  const toggleActiveItemUp = () => {
-    const previousItem = findActiveDropdownItemByIndex(activeDropdownItem.index - 1);
-    if (!previousItem) {
-      return resetMenuFocus();
-    }
-    return setActiveDropdownItem(previousItem);
-  };
-
-  const toggleActiveItemDown = () => {
-    const nextItem = findActiveDropdownItemByIndex(activeDropdownItem.index + 1);
-    if (!nextItem) {
-      return setActiveDropdownItem(items[0]);
-    }
-    return setActiveDropdownItem(nextItem);
-  };
-
-  const uniqueButtonId = useUniqueId(buttonId);
-
-  const dropdownButtonProps = usePopupTarget(model, {
-    id: uniqueButtonId,
-    toggled: model.state.visibility !== 'hidden',
-    onKeyUp: handleButtonKeyUp,
-  });
-
-  const dropdownMenuProps = {
-    'aria-labelledby': uniqueButtonId,
-    dropdownItems: items,
-    activeDropdownItem,
-    activeDropdownItemRef,
-    setActiveDropdownItem,
-    resetFocus: resetMenuFocus,
-    toggleActiveItemUp,
-    toggleActiveItemDown,
-  };
-
-  const popperProps = usePopupPopper(model);
-
-  return {dropdownButtonProps, dropdownMenuProps, popperProps};
-};