@workday/canvas-kit-react 8.0.0 → 8.0.2

package/breadcrumbs/lib/BreadcrumbsMenu.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import {createContainer, createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {Menu, useMenuModel} from '@workday/canvas-kit-react/menu';
+
+export const BreadcrumbsMenuItem = createComponent('a')({
+  displayName: 'Breadcrumbs.Menu.Item',
+  Component: (props: ExtractProps<typeof Menu.Item, never>, ref, Element) => {
+    return <Menu.Item as={Element} style={{textDecoration: 'none'}} {...props} ref={ref} />;
+  },
+});
+
+export const BreadcrumbsMenu = createContainer()({
+  displayName: 'Breadcrumbs.Menu',
+  modelHook: useMenuModel,
+  subComponents: {
+    Card: (elemProps: ExtractProps<typeof Menu.Card, never>) => (
+      <Menu.Card width={280} maxWidth={280} maxHeight={296} {...elemProps} />
+    ),
+    List: Menu.List,
+    Item: BreadcrumbsMenuItem,
+    Divider: Menu.Divider,
+    Target: Menu.Target,
+    TargetContext: Menu.TargetContext,
+    Popper: Menu.Popper,
+  },
+})<ExtractProps<typeof Menu>>(({children}) => {
+  return <>{children}</>;
+});

package/breadcrumbs/lib/BreadcrumbsOverflowButton.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import {chevronRightSmallIcon, relatedActionsIcon} from '@workday/canvas-system-icons-web';
+import {colors, space} from '@workday/canvas-kit-react/tokens';
+import {SystemIcon} from '@workday/canvas-kit-react/icon';
+import {Flex, FlexProps} from '@workday/canvas-kit-react/layout';
+import {
+  composeHooks,
+  createElemPropsHook,
+  createSubcomponent,
+  subModelHook,
+  useIsRTL,
+} from '@workday/canvas-kit-react/common';
+import {useOverflowListTarget} from '@workday/canvas-kit-react/collection';
+import {useMenuTarget} from '@workday/canvas-kit-react/menu';
+import {useBreadcrumbsModel} from './hooks/useBreadcrumbsModel';
+import {TertiaryButton, TertiaryButtonProps} from '@workday/canvas-kit-react/button';
+
+export interface BreadcrumbsOverflowButtonProps extends TertiaryButtonProps {
+  'aria-label': string;
+  /**
+   * style prop applies styles to the whole Flex component,
+   * `useOverflowListTarget` automatically adds hidden styles if list doesn't have items to hide
+   * style prop passed through `overflowButtonProps` from `Breadcrumbs.List` will ignore
+   */
+  style?: FlexProps;
+}
+
+export const useBreadcrumbsOverflowButton = composeHooks(
+  createElemPropsHook(useBreadcrumbsModel)(() => ({
+    'aria-haspopup': true,
+    'aria-controls': 'menu',
+  })),
+  useOverflowListTarget,
+  subModelHook((m: ReturnType<typeof useBreadcrumbsModel>) => m.menu, useMenuTarget)
+);
+
+export const BreadcrumbsOverflowButton = createSubcomponent('button')({
+  displayName: 'Breadcrumbs.OverflowButton',
+  modelHook: useBreadcrumbsModel,
+  elemPropsHook: useBreadcrumbsOverflowButton,
+})<BreadcrumbsOverflowButtonProps>(({style, ...elemProps}, Element) => {
+  return (
+    <Flex alignItems="center" {...style}>
+      <TertiaryButton as={Element} icon={relatedActionsIcon} {...elemProps} />
+      <SystemIcon
+        icon={chevronRightSmallIcon}
+        color={colors.licorice200}
+        colorHover={colors.licorice200}
+        size={20}
+        height={space.l}
+        width={space.l}
+        shouldMirror={useIsRTL()}
+        styles={{justifyContent: 'center', alignItems: 'center', display: 'inline-flex'}}
+        aria-hidden
+      />
+    </Flex>
+  );
+});

package/breadcrumbs/lib/hooks/useBreadcrumbsModel.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import {createModelHook} from '@workday/canvas-kit-react/common';
+import {defaultGetId, useOverflowListModel} from '@workday/canvas-kit-react/collection';
+import {useMenuModel} from '@workday/canvas-kit-react/menu';
+import {reorganizeHiddenItems} from './utils';
+
+export const useBreadcrumbsModel = createModelHook({
+  defaultConfig: {
+    ...useOverflowListModel.defaultConfig,
+    /**
+     * Optional id for the whole `Breadcrumbs` group. If not provided, a unique id will be created.
+     * @default useUniqueId()
+     */
+    id: '',
+    /**
+     * The default Breadcrumbs component only handles rendering of the link group in a horizontal
+     * orientation, but the subcomponents could be replaced to handle vertical orientations.
+     * @default 'horizontal'
+     */
+    orientation: 'horizontal' as typeof useOverflowListModel.defaultConfig.orientation,
+    menuConfig: {} as Partial<typeof useMenuModel.defaultConfig>,
+  },
+  requiredConfig: useOverflowListModel.requiredConfig,
+})(config => {
+  const getId = config.getId || defaultGetId;
+  const items = config.items;
+
+  const model = useOverflowListModel(
+    useOverflowListModel.mergeConfig(config, {
+      orientation: config.orientation || 'horizontal',
+      items,
+      shouldVirtualize: false,
+    })
+  );
+
+  let hiddenIds = model.state.hiddenIds;
+  let nonInteractiveIds = model.state.nonInteractiveIds;
+  hiddenIds = reorganizeHiddenItems(items, hiddenIds, getId);
+  nonInteractiveIds = hiddenIds;
+
+  const state = {
+    ...model.state,
+    hiddenIds,
+    nonInteractiveIds,
+    orientation: config.orientation || 'horizontal',
+  };
+
+  const overflowItems = React.useMemo(
+    () => (items ? items.filter(item => state.hiddenIds.includes(getId(item))) : undefined),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state.hiddenIds, items]
+  );
+
+  const events = {
+    ...model.events,
+  };
+
+  const menu = useMenuModel(
+    useMenuModel.mergeConfig(config.menuConfig as Required<typeof config.menuConfig>, {
+      id: `breadcrumbs-menu-${model.state.id}`,
+      items: overflowItems,
+      nonInteractiveIds: state.nonInteractiveIds.filter(key => !state.hiddenIds.includes(key)),
+      onShow() {
+        // Always select the first item when the menu is opened
+        menu.events.goToFirst();
+      },
+    })
+  );
+
+  return {
+    ...model,
+    state,
+    events,
+    menu,
+  };
+});

package/breadcrumbs/lib/hooks/utils/index.ts

@@ -0,0 +1,22 @@
+export const reorganizeHiddenItems = (
+  items: {id: string}[],
+  hiddenIds: string[],
+  getId: (item: {id: string}) => string
+): string[] => {
+  let updatedHiddenIds = hiddenIds;
+  const totalSize = items.length;
+  const itemSpace = totalSize - hiddenIds.length;
+
+  if (itemSpace <= 2) {
+    // Keep only last items if there is place for two or less items
+    updatedHiddenIds = items.slice(0, totalSize - 1).map(getId);
+  } else if (itemSpace === 3) {
+    // Always keep first and last item if there is place for 3 items
+    updatedHiddenIds = items.slice(1, totalSize - 1).map(getId);
+  } else if (itemSpace > 3 && itemSpace < totalSize) {
+    // Always keep first and 2 last items if there is place for 4 items
+    updatedHiddenIds = items.slice(1, totalSize - 2).map(getId);
+  }
+
+  return updatedHiddenIds;
+};

package/breadcrumbs/package.json

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

package/button/index.ts

@@ -9,6 +9,12 @@ export {
 export {ToolbarIconButton, ToolbarIconButtonProps} from './lib/ToolbarIconButton';
 export {ToolbarDropdownButton, ToolbarDropdownButtonProps} from './lib/ToolbarDropdownButton';
 export {Hyperlink, HyperlinkProps} from './lib/Hyperlink';
-export {BaseButton, ButtonContainerProps} from './lib/BaseButton';
+export {
+  BaseButton,
+  ButtonContainerProps,
+  BaseButtonProps,
+  getMinWidthStyles,
+  getPaddingStyles,
+} from './lib/BaseButton';
 export {ExternalHyperlink, ExternalHyperlinkProps} from './lib/ExternalHyperlink';
 export * from './lib/types';

package/button/lib/BaseButton.tsx

@@ -29,10 +29,6 @@ export interface ButtonContainerProps extends BoxProps, GrowthBehavior {
    * @default 'medium'
    */
   size?: ButtonSizes;
-  /**
-   * The ref to the button that the styled component renders.
-   */
-  ref?: React.Ref<HTMLButtonElement>;
   /**
    * Whether the icon should received filled (colored background layer) or regular styles.
    * Corresponds to `toggled` in ToolbarIconButton
@@ -40,6 +36,13 @@ export interface ButtonContainerProps extends BoxProps, GrowthBehavior {
   fillIcon?: boolean;
 }
 
+/**
+ * Extends all the style properties from Box to our buttons as well as props from ButtonContainerProps.
+ * We omit `ref` since all of our buttons use `createComponent` and already give access to `ref`.
+ * Use this type to extend and customize any one off buttons that you want full control over styling.
+ */
+export interface BaseButtonProps extends Omit<ButtonContainerProps, 'ref'> {}
+
 function getIconColorSelectors(
   {
     canvas: {

package/button/lib/DeleteButton.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {ButtonColors} from './types';
-import {BaseButton, getMinWidthStyles, getPaddingStyles} from './BaseButton';
+import {BaseButton, BaseButtonProps, getMinWidthStyles, getPaddingStyles} from './BaseButton';
 import {
   GrowthBehavior,
   useTheme,
@@ -9,7 +9,7 @@ import {
   createComponent,
 } from '@workday/canvas-kit-react/common';
 
-export interface DeleteButtonProps extends Themeable, GrowthBehavior {
+export interface DeleteButtonProps extends Themeable, GrowthBehavior, BaseButtonProps {
   /**
    * The size of the Button.
    * @default 'medium'

package/button/lib/PrimaryButton.tsx

@@ -11,7 +11,7 @@ import {
 import {colors} from '@workday/canvas-kit-react/tokens';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
 import {ButtonSizes, IconPositions} from './types';
-import {BaseButton, getMinWidthStyles, getPaddingStyles} from './BaseButton';
+import {BaseButton, BaseButtonProps, getMinWidthStyles, getPaddingStyles} from './BaseButton';
 
 const getPrimaryButtonColors = (variant: 'inverse' | undefined, theme: EmotionCanvasTheme) => {
   const {
@@ -85,7 +85,7 @@ const getPrimaryButtonColors = (variant: 'inverse' | undefined, theme: EmotionCa
   }
 };
 
-export interface PrimaryButtonProps extends Themeable, GrowthBehavior {
+export interface PrimaryButtonProps extends Themeable, GrowthBehavior, BaseButtonProps {
   /**
    * The variant of the PrimaryButton.
    * @default undefined

package/button/lib/SecondaryButton.tsx

@@ -11,9 +11,9 @@ import {
 } from '@workday/canvas-kit-react/common';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
 import {ButtonColors, ButtonSizes, IconPositions} from './types';
-import {BaseButton, getMinWidthStyles, getPaddingStyles} from './BaseButton';
+import {BaseButton, BaseButtonProps, getMinWidthStyles, getPaddingStyles} from './BaseButton';
 
-export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
+export interface SecondaryButtonProps extends Themeable, GrowthBehavior, BaseButtonProps {
   /**
    * The variant of the SecondaryButton.
    * @default undefined

package/button/lib/TertiaryButton.tsx

@@ -11,9 +11,9 @@ import {
 import {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
 import {ButtonColors, IconPositions, ButtonSizes} from './types';
-import {BaseButton} from './BaseButton';
+import {BaseButton, BaseButtonProps} from './BaseButton';
 
-export interface TertiaryButtonProps extends Themeable {
+export interface TertiaryButtonProps extends Themeable, BaseButtonProps {
   /**
    * The variant of the TertiaryButton.
    * @default undefined
@@ -44,14 +44,23 @@ export interface TertiaryButtonProps extends Themeable {
    * @default false
    */
   shouldMirrorIcon?: boolean;
+  /**
+   * If set to `true`, transform text to all letters uppercase
+   * @default undefined
+   */
   allCaps?: boolean;
   children?: React.ReactNode;
+  /**
+   * If set to `true`, make icon button available to use theme colors instead of default
+   * @default false
+   */
+  isThemeable?: boolean;
 }
 
 const getTertiaryButtonColors = (
   variant: 'inverse' | undefined,
   theme: EmotionCanvasTheme,
-  children: React.ReactNode
+  hasThemeStyles: boolean
 ): ButtonColors => {
   const {
     canvas: {
@@ -99,27 +108,27 @@ const getTertiaryButtonColors = (
   } else {
     return {
       default: {
-        icon: children ? themePrimary.main : colors.blackPepper400,
+        icon: hasThemeStyles ? themePrimary.main : colors.blackPepper400,
         label: themePrimary.main,
       },
       hover: {
         background: colors.soap200,
-        icon: children ? themePrimary.dark : colors.blackPepper500,
+        icon: hasThemeStyles ? themePrimary.dark : colors.blackPepper500,
         label: themePrimary.dark,
       },
       active: {
         background: colors.soap300,
-        icon: children ? themePrimary.dark : colors.blackPepper500,
+        icon: hasThemeStyles ? themePrimary.dark : colors.blackPepper500,
         label: themePrimary.dark,
       },
       focus: {
-        icon: children ? themePrimary.main : colors.blackPepper500,
+        icon: hasThemeStyles ? themePrimary.main : colors.blackPepper500,
         label: themePrimary.main,
         focusRing: focusRing({innerColor: colors.blueberry400}, theme),
       },
       disabled: {
         background: 'transparent',
-        icon: children ? themePrimary.main : colors.blackPepper400,
+        icon: hasThemeStyles ? themePrimary.main : colors.blackPepper400,
         label: themePrimary.main,
       },
     };
@@ -197,6 +206,7 @@ export const TertiaryButton = createComponent('button')({
     {
       size = 'medium',
       iconPosition = 'start',
+      isThemeable = false,
       variant,
       children,
       icon,
@@ -208,17 +218,18 @@ export const TertiaryButton = createComponent('button')({
     Element
   ) => {
     const theme = useTheme();
+    const hasThemeStyles = !!children || isThemeable;
 
     return (
       <StyledTertiaryButtonContainer
         ref={ref}
         as={Element}
         allCaps={allCaps}
-        colors={getTertiaryButtonColors(variant, theme, children)}
+        colors={getTertiaryButtonColors(variant, theme, hasThemeStyles)}
         size={size}
         padding={getPaddingStyles(icon, iconPosition, children, size)}
         minWidth={getMinWidthStyles(children, size)}
-        style={{borderRadius: children ? borderRadius.m : borderRadius.circle}}
+        borderRadius={children ? borderRadius.m : borderRadius.circle}
         {...elemProps}
       >
         {icon && iconPosition === 'start' && (

package/button/lib/deprecated_Button.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import canvas, {borderRadius, type} from '@workday/canvas-kit-react/tokens';
+import {canvas, borderRadius, type} from '@workday/canvas-kit-react/tokens';
 import {
   focusRing,
   mouseFocusBehavior,

package/card/lib/CardBody.tsx

@@ -1,18 +1,15 @@
 import * as React from 'react';
-import styled from '@emotion/styled';
 import {type} from '@workday/canvas-kit-react/tokens';
-import {StyledType, createComponent} from '@workday/canvas-kit-react/common';
+import {createComponent} from '@workday/canvas-kit-react/common';
 import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
 
-const Body = styled(Box)<BoxProps & StyledType>(type.levels.subtext.large);
-
 export const CardBody = createComponent('div')({
   displayName: 'Card.Body',
   Component: ({children, ...elemProps}: BoxProps, ref, Element) => {
     return (
-      <Body ref={ref} as={Element} {...elemProps}>
+      <Box ref={ref} as={Element} {...type.levels.subtext.large} {...elemProps}>
         {children}
-      </Body>
+      </Box>
     );
   },
 });

package/card/lib/CardHeading.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import styled from '@emotion/styled';
-import {type} from '@workday/canvas-kit-react/tokens';
-import {StyledType, createComponent} from '@workday/canvas-kit-react/common';
-import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {BoxProps} from '@workday/canvas-kit-react/layout';
+import {Text} from '@workday/canvas-kit-react/text';
 
 export interface CardHeadingProps extends BoxProps {
   /**
@@ -13,17 +12,21 @@ export interface CardHeadingProps extends BoxProps {
   children?: React.ReactNode;
 }
 
-const Heading = styled(Box.as('h3'))<StyledType>(type.levels.body.large, {
-  fontWeight: type.properties.fontWeights.bold,
-});
-
 export const CardHeading = createComponent('h3')({
   displayName: 'Card.Heading',
   Component: ({children, ...elemProps}: CardHeadingProps, ref, Element) => {
     return (
-      <Heading ref={ref} marginBottom="m" marginTop={0} as={Element} {...elemProps}>
+      <Text
+        ref={ref}
+        typeLevel="body.large"
+        fontWeight="bold"
+        marginBottom="m"
+        marginTop={0}
+        as={Element}
+        {...elemProps}
+      >
         {children}
-      </Heading>
+      </Text>
     );
   },
 });

package/checkbox/index.ts

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

package/checkbox/lib/Checkbox.tsx

@@ -11,14 +11,10 @@ import {
   useTheme,
   Themeable,
 } from '@workday/canvas-kit-react/common';
-import canvas, {
-  borderRadius,
-  colors,
-  inputColors,
-  spaceNumbers,
-} from '@workday/canvas-kit-react/tokens';
+import {borderRadius, colors, inputColors, spaceNumbers} from '@workday/canvas-kit-react/tokens';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
 import {checkSmallIcon} from '@workday/canvas-system-icons-web';
+import {LabelText} from '@workday/canvas-kit-react/text';
 
 export interface CheckboxProps extends Themeable {
   /**
@@ -307,21 +303,6 @@ const IndeterminateBox = styled('div')<CheckboxProps>(
   })
 );
 
-const CheckboxLabel = styled('label')<{disabled?: boolean; variant?: string}>(
-  {
-    ...canvas.type.levels.subtext.large,
-    paddingLeft: checkboxLabelDistance,
-  },
-  ({variant}) => (variant === 'inverse' ? {color: colors.frenchVanilla100} : undefined),
-  ({disabled, variant}) =>
-    disabled
-      ? {
-          color: variant === 'inverse' ? colors.frenchVanilla100 : inputColors.disabled.text,
-          opacity: variant === 'inverse' ? '.4' : '1',
-        }
-      : {cursor: 'pointer'}
-);
-
 export const Checkbox = createComponent('input')({
   displayName: 'Checkbox',
   Component: (
@@ -380,9 +361,14 @@ export const Checkbox = createComponent('input')({
           </CheckboxBackground>
         </CheckboxInputWrapper>
         {label && (
-          <CheckboxLabel variant={variant} htmlFor={inputId} disabled={disabled}>
+          <LabelText
+            htmlFor={inputId}
+            disabled={disabled}
+            variant={variant}
+            paddingLeft={checkboxLabelDistance}
+          >
             {label}
-          </CheckboxLabel>
+          </LabelText>
         )}
       </CheckboxContainer>
     );
@@ -391,5 +377,3 @@ export const Checkbox = createComponent('input')({
     ErrorType,
   },
 });
-
-export default Checkbox;

package/collection/index.ts

@@ -9,9 +9,11 @@ export * from './lib/useListResetCursorOnBlur';
 export * from './lib/useListItemRovingFocus';
 export * from './lib/useListItemSelect';
 export * from './lib/useListModel';
+export * from './lib/useGridModel';
 export {ListBox} from './lib/ListBox';
 export {
   singleSelectionManager,
   multiSelectionManager,
   isSelected,
 } from './lib/useSelectionListModel';
+export {wrappingNavigationManager, navigationManager} from './lib/useCursorListModel';

package/collection/lib/ListBox.tsx

@@ -10,7 +10,7 @@ import {useListModel} from './useListModel';
 import {useListRenderItems} from './useListRenderItem';
 import {useListItemRegister} from './useListItemRegister';
 
-export interface ListBoxProps extends BoxProps {
+export interface ListBoxProps extends Omit<BoxProps, 'children'> {
   children?: React.ReactNode | ((item: any) => React.ReactNode);
 }
 

package/collection/lib/useBaseListModel.tsx

@@ -170,7 +170,7 @@ export const useBaseListModel = createModelHook({
         return items.concat({
           id: getId(data.item),
           value: data.item,
-          index: items.length - 1,
+          index: items.length,
           textValue: data.textValue,
         });
       });