@workday/canvas-kit-react 7.0.0-alpha.97-next.23 → 7.0.0

package/action-bar/index.ts

@@ -1 +1,2 @@
 export * from './lib/ActionBar';
+export * from './lib/useActionBarModel';

package/action-bar/lib/ActionBar.tsx

@@ -1,37 +1,39 @@
 import * as React from 'react';
-import {createComponent, styled, StyledType} from '@workday/canvas-kit-react/common';
-import {commonColors, colors, space} from '@workday/canvas-kit-react/tokens';
-import {HStack, HStackProps, StackSpacing} from '@workday/canvas-kit-react/layout';
+import {createContainer} from '@workday/canvas-kit-react/common';
+import {Menu} from '@workday/canvas-kit-react/menu';
+import {useActionBarModel} from './useActionBarModel';
+import {ActionBarList} from './ActionBarList';
+import {ActionBarOverflowButton} from './ActionBarOverflowButton';
+import {ActionBarItem} from './ActionBarItem';
 
-interface ActionBarProps extends Omit<HStackProps, 'spacing'> {
-  spacing?: StackSpacing;
+export interface ActionBarProps {
+  /**
+   * The contents of the ActionBar. Can be `ActionBar` children or any valid elements.
+   */
+  children: React.ReactNode;
 }
 
-const ResponsiveHStack = styled(HStack)<HStackProps & StyledType>(({theme}) => ({
-  [theme.canvas.breakpoints.down('s')]: {
-    padding: space.s,
-    '> *:not(div)': {
-      flex: 1,
-    },
-  },
-}));
-
-export const ActionBar = createComponent('div')({
+export const ActionBar = createContainer()({
   displayName: 'ActionBar',
-  Component: (elemProps: ActionBarProps, ref, Element) => (
-    <ResponsiveHStack
-      ref={ref}
-      as={Element}
-      spacing="s"
-      depth={1}
-      background={commonColors.background}
-      borderTop={`solid 1px ${colors.soap400}`}
-      padding={`${space.s} ${space.xl} `}
-      position="fixed"
-      bottom={0}
-      left={0}
-      right={0}
-      {...elemProps}
-    />
-  ),
+  modelHook: useActionBarModel,
+  subComponents: {
+    List: ActionBarList,
+    Item: ActionBarItem,
+    OverflowButton: ActionBarOverflowButton,
+    /**
+     * The overflow menu of the ActionBar component. If there isn't enough room to render all the action
+     * items, the extra actions that don't fit will be overflowed into this menu.
+     * @example
+     * <ActionBar.Menu.Popper>
+     *   <ActionBar.Menu.Card>
+     *     <ActionBar.Menu.List>
+     *       {(item: MyActionItem) => <ActionBar.Menu.Item>{item.text}</ActionBar.Menu.Item>}
+     *     </ActionBar.Menu.List>
+     *   </ActionBar.Menu.Card>
+     * </ActionBar.Menu.Popper>
+     */
+    Menu,
+  },
+})<ActionBarProps>(({children}, _, model) => {
+  return <Menu model={model.menu}>{children}</Menu>;
 });

package/action-bar/lib/ActionBarItem.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import {composeHooks, EllipsisText, createSubcomponent} from '@workday/canvas-kit-react/common';
+import {SystemIcon} from '@workday/canvas-kit-react/icon';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {
+  useListItemRegister,
+  useListItemRovingFocus,
+  useOverflowListItemMeasure,
+} from '@workday/canvas-kit-react/collection';
+
+import {useActionBarModel} from './useActionBarModel';
+
+export interface ActionBarItemProps {
+  /**
+   * The contents of the action item. This will be the accessible name of the action for screen readers.
+   *
+   * ```tsx
+   * <ActionBar.Item>First Action</ActionBar.Item>
+   * ```
+   */
+  children: React.ReactNode;
+  /**
+   * The identifier of the action. This identifier will be used for correct overflow behavior.
+   * If this property is not provided, it will default to a string representation
+   * of the the zero-based index of the Item when it was initialized.
+   */
+  'data-id'?: string;
+}
+
+export const useActionBarItem = composeHooks(
+  useOverflowListItemMeasure,
+  useListItemRovingFocus,
+  useListItemRegister
+);
+
+export const ActionBarItem = createSubcomponent(SecondaryButton)({
+  displayName: 'ActionBar.Item',
+  modelHook: useActionBarModel,
+  elemPropsHook: useActionBarItem,
+  subComponents: {
+    Icon: SystemIcon,
+    Text: EllipsisText,
+  },
+})<ActionBarItemProps>((elemProps, Element) => {
+  return <Element {...elemProps} />;
+});

package/action-bar/lib/ActionBarList.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+
+import {commonColors, colors, space} from '@workday/canvas-kit-react/tokens';
+import {
+  composeHooks,
+  createSubcomponent,
+  ExtractProps,
+  styled,
+  StyledType,
+} from '@workday/canvas-kit-react/common';
+import {HStack} from '@workday/canvas-kit-react/layout';
+import {
+  useOverflowListMeasure,
+  useListRenderItems,
+  useListResetCursorOnBlur,
+} from '@workday/canvas-kit-react/collection';
+
+import {useActionBarModel} from './useActionBarModel';
+import {ActionBar} from './ActionBar';
+
+// Use `Partial` here to make `spacing` optional
+export interface ActionBarListProps<T = unknown>
+  extends Partial<ExtractProps<typeof HStack, never>> {
+  /**
+   * If items are passed to a `ActionBarModel`, the child of `ActionBar.List` should be a render prop. The
+   * List will determine how and when the item will be rendered.
+   *
+   * @example
+   * <ActionBar.List>
+   *   {(item) => <ActionBar.Item key={item.id} name={item.name}>{item.text}</ActionBar.Item>}
+   * </ActionBar.List>
+   */
+  children: ((item: T) => React.ReactNode) | React.ReactNode;
+}
+
+const ResponsiveHStack = styled(HStack)<ActionBarListProps & StyledType>(({theme}) => ({
+  [theme.canvas.breakpoints.down('s')]: {
+    padding: space.s,
+    '> *': {
+      flex: 1,
+    },
+  },
+}));
+
+export const useActionBarList = composeHooks(useOverflowListMeasure, useListResetCursorOnBlur);
+
+export const ActionBarList = createSubcomponent('div')({
+  displayName: 'ActionBar.List',
+  modelHook: useActionBarModel,
+  elemPropsHook: useActionBarList,
+})<ActionBarListProps>(({children, ...elemProps}, Element, model) => {
+  return (
+    <ResponsiveHStack
+      as={Element}
+      spacing="s"
+      depth={1}
+      background={commonColors.background}
+      borderTop={`solid 1px ${colors.soap400}`}
+      padding={`${space.s} ${space.xl} `}
+      position="fixed"
+      bottom={0}
+      left={0}
+      right={0}
+      {...elemProps}
+    >
+      {useListRenderItems(model, children)}
+      <ActionBar.OverflowButton />
+    </ResponsiveHStack>
+  );
+});

package/action-bar/lib/ActionBarOverflowButton.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+
+import {relatedActionsIcon} from '@workday/canvas-system-icons-web';
+import {
+  createElemPropsHook,
+  composeHooks,
+  subModelHook,
+  createSubcomponent,
+  StyledType,
+} from '@workday/canvas-kit-react/common';
+import {useOverflowListTarget} from '@workday/canvas-kit-react/collection';
+
+import {useMenuTarget} from '@workday/canvas-kit-react/menu';
+import {useActionBarModel} from './useActionBarModel';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+
+export const useActionBarOverflowButton = composeHooks(
+  createElemPropsHook(useActionBarModel)(() => ({
+    'aria-haspopup': true,
+  })),
+  useOverflowListTarget,
+  subModelHook((m: ReturnType<typeof useActionBarModel>) => m.menu, useMenuTarget)
+);
+
+const StyledSecondaryButton = styled(SecondaryButton)<StyledType>({
+  flex: 0,
+});
+
+export const ActionBarOverflowButton = createSubcomponent('button')({
+  displayName: 'ActionBar.OverflowButton',
+  modelHook: useActionBarModel,
+  elemPropsHook: useActionBarOverflowButton,
+})((elemProps, Element) => {
+  return <StyledSecondaryButton as={Element} icon={relatedActionsIcon} {...elemProps} />;
+});

package/action-bar/lib/useActionBarModel.tsx

@@ -0,0 +1,91 @@
+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';
+
+export const useActionBarModel = createModelHook({
+  defaultConfig: {
+    ...useOverflowListModel.defaultConfig,
+    /**
+     * Optional id for the whole `ActionBar` group. If not provided, a unique id will be created.
+     * @default useUniqueId()
+     */
+    id: '',
+    /**
+     * The default ActionBar sub-components only handle rendering of button group in a horizontal orientation,
+     * but the sub-components 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;
+  const totalSize = model.state.items.length;
+
+  // Only show a maximum of 3 buttons
+  if (totalSize - hiddenIds.length >= 3) {
+    hiddenIds = items.slice(3, totalSize).map(getId);
+  }
+
+  // Always show the first button and make sure it is interactive
+  if (totalSize - hiddenIds.length === 0) {
+    hiddenIds = items.slice(1, totalSize).map(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: `act-bar-menu-${model.state.id}`,
+      items: overflowItems,
+      nonInteractiveIds: state.nonInteractiveIds.filter(key => !state.hiddenIds.includes(key)),
+      onSelect() {
+        menu.events.hide();
+      },
+      onShow() {
+        // Always select the first item when the menu is opened
+        menu.events.goToFirst();
+      },
+    })
+  );
+
+  return {
+    ...model,
+    state,
+    events,
+    menu,
+  };
+});

package/avatar/lib/Avatar.tsx

@@ -139,6 +139,10 @@ const Avatar: AvatarOverload = React.forwardRef(
       }
     };
 
+    React.useLayoutEffect(() => {
+      setImageLoaded(false);
+    }, [url]);
+
     const background = variant === AvatarVariant.Dark ? colors.blueberry400 : colors.soap300;
 
     return (

package/button/index.ts

@@ -10,4 +10,5 @@ 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 {ExternalHyperlink, ExternalHyperlinkProps} from './lib/ExternalHyperlink';
 export * from './lib/types';

package/button/lib/ExternalHyperlink.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import {styled, createComponent, StyledType} from '@workday/canvas-kit-react/common';
+import {extLinkIcon} from '@workday/canvas-system-icons-web';
+import {SystemIcon, systemIconStyles} from '@workday/canvas-kit-react/icon';
+import {Hyperlink, HyperlinkProps} from './Hyperlink';
+
+export interface ExternalHyperlinkProps extends HyperlinkProps {
+  /**
+   * Informs a screen reader user the link will open in a new window. It is read after the link text.
+   * This value will need to be translated.
+   * @default 'Opens link in new window'
+   */
+  iconLabel?: string;
+}
+
+const iconStyles = {
+  ...systemIconStyles({fill: 'currentColor', fillHover: 'currentColor'}),
+};
+
+const Anchor = styled(Hyperlink)<ExternalHyperlinkProps & StyledType>({
+  ...iconStyles,
+  display: 'inline-flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+});
+
+const iconSize = '1em';
+const minIconSize = '16px';
+
+const StyledSystemIcon = styled(SystemIcon)<StyledType>({
+  ...iconStyles,
+  width: `calc(${iconSize} - 1px)`,
+  minWidth: `calc(${minIconSize} - 1px)`,
+  marginLeft: '2px',
+});
+
+export const ExternalHyperlink = createComponent('a')({
+  displayName: 'ExternalHyperlink',
+  Component: (
+    {
+      children,
+      variant,
+      iconLabel = 'Opens link in new window',
+      ...elemProps
+    }: ExternalHyperlinkProps,
+    ref
+  ) => (
+    <Anchor ref={ref} target="_blank" rel="noreferrer" variant={variant} {...elemProps}>
+      <span>{children}</span>
+      <StyledSystemIcon
+        icon={extLinkIcon}
+        role="img"
+        aria-label={iconLabel}
+        size={iconSize}
+        styles={{['& svg']: {minWidth: minIconSize, minHeight: minIconSize}}}
+      />
+    </Anchor>
+  ),
+});

package/button/lib/TertiaryButton.tsx

@@ -118,6 +118,7 @@ const getTertiaryButtonColors = (
         focusRing: focusRing({innerColor: colors.blueberry400}, theme),
       },
       disabled: {
+        background: 'transparent',
         icon: children ? themePrimary.main : colors.blackPepper400,
         label: themePrimary.main,
       },

package/collection/lib/useListItemRovingFocus.tsx

@@ -85,7 +85,9 @@ export const useListItemRovingFocus = createElemPropsHook(useCursorListModel)(
         }
         requestAnimationFrame(() => {
           document
-            .querySelector<HTMLElement>(`[id="${state.id}-${getIdRef.current(item)}"]`)
+            .querySelector<HTMLElement>(
+              `[data-focus-id="${`${state.id}-${getIdRef.current(item)}`}"]`
+            )
             ?.focus();
         });
 
@@ -132,7 +134,7 @@ export const useListItemRovingFocus = createElemPropsHook(useCursorListModel)(
       onClick() {
         events.goTo({id: elemProps['data-id']!});
       },
-      id: `${state.id}-${elemProps['data-id']}`,
+      'data-focus-id': `${state.id}-${elemProps['data-id']}`,
       tabIndex: !state.cursorId
         ? 0 // cursor isn't known yet, be safe and mark this as focusable
         : !!elemProps['data-id'] && state.cursorId === elemProps['data-id']

package/collection/lib/useListRenderItem.tsx

@@ -6,14 +6,14 @@ import {useBaseListModel} from './useBaseListModel';
 
 export function useListRenderItems<T>(
   model: ReturnType<typeof useBaseListModel>,
-  children: ((item: Generic) => React.ReactNode) | React.ReactNode
+  children: ((item: Generic, index: number) => React.ReactNode) | React.ReactNode
 ) {
   const items =
     typeof children === 'function'
       ? model.state.isVirtualized
         ? model.state.UNSTABLE_virtual.virtualItems.map(virtual => {
             const item = model.state.items[virtual.index];
-            const child = children(item.value);
+            const child = children(item.value, virtual.index);
             return React.cloneElement(child, {
               // We call this `virtual` instead of `virtualItem` to avoid a React render warning
               // about capital letters in attributes. React thinks this will be applied to the DOM
@@ -24,7 +24,7 @@ export function useListRenderItems<T>(
             });
           })
         : model.state.items.map(item =>
-            React.cloneElement(children(item.value), {key: item.id, item: item.value})
+            React.cloneElement(children(item.value, item.index), {key: item.id, item: item.value})
           )
       : null;
 

package/common/lib/parts/_brand-assets.ts

@@ -1,4 +1,4 @@
-const CDN_URI = '//design.workday.com/images/';
+const CDN_URI = 'https://design.workday.com/images/';
 
 export const dubLogoBlue = `<img src="${CDN_URI}ck-dub-logo-blue.svg" alt="">`;
 

package/common/lib/utils/elements.ts

@@ -1,8 +1,12 @@
 /**
  * Is an element focusable? This function performs various tests to see if the element in question
- * can receive focus.
+ * can receive focus. Should skip disabled elements as they are not focusable.
  */
 export const isFocusable = (element: HTMLElement) => {
+  if (element.hasAttribute('disabled')) {
+    return null;
+  }
+
   const nodeName = element.nodeName.toLowerCase();
   const validInput = nodeName === 'input' && element.getAttribute('type') !== 'hidden';
   const validAnchor = nodeName === 'a' && element.hasAttribute('href');

package/dist/commonjs/action-bar/index.d.ts

@@ -1,2 +1,3 @@
 export * from './lib/ActionBar';
+export * from './lib/useActionBarModel';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/action-bar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../action-bar/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../action-bar/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC"}

package/dist/commonjs/action-bar/index.js

@@ -11,3 +11,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./lib/ActionBar"), exports);
+__exportStar(require("./lib/useActionBarModel"), exports);