@workday/canvas-kit-react 6.0.0-beta.0-next.13 → 6.0.0

package/tabs/lib/menu/MenuCard.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import {keyframes} from '@emotion/core';
+
+import {Card} from '@workday/canvas-kit-react/card';
+import {space, type} from '@workday/canvas-kit-react/tokens';
+import {
+  styled,
+  TransformOrigin,
+  getTranslateFromOrigin,
+  createComponent,
+  StyledType,
+  useModelContext,
+  ExtractProps,
+  createHook,
+} from '@workday/canvas-kit-react/common';
+import {getTransformFromPlacement} from '@workday/canvas-kit-react/popup';
+
+import {MenuModel} from './useMenuModel';
+import {MenuModelContext} from './Menu';
+
+export interface MenuCardProps<T = unknown> extends ExtractProps<typeof Card, never> {
+  /**
+   * Optionally pass a model directly to this component. Default is to implicitly use the same
+   * model as the container component which uses React context. Only use this for advanced use-cases
+   */
+  model?: MenuModel<T>;
+  children?: React.ReactNode;
+}
+
+const popupAnimation = (transformOrigin: TransformOrigin) => {
+  const translate = getTranslateFromOrigin(transformOrigin, space.xxs);
+
+  return keyframes`
+    0% {
+      opacity: 0;
+      transform: translate(${translate.x}px, ${translate.y}px);
+    }
+    100% {
+      opacity: 1;
+      transform: translate(0);
+    }
+  `;
+};
+
+const StyledCard = styled(Card)<
+  StyledType & {width?: number | string; transformOrigin?: TransformOrigin}
+>(
+  type.levels.subtext.large,
+  {
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  ({transformOrigin}) => {
+    if (transformOrigin == null) {
+      return {};
+    }
+    return {
+      animation: popupAnimation(transformOrigin),
+      animationDuration: '150ms',
+      animationTimingFunction: 'ease-out',
+      transformOrigin: `${transformOrigin.vertical} ${transformOrigin.horizontal}`,
+      // Allow overriding of animation in special cases
+      '.wd-no-animation &': {
+        animation: 'none',
+      },
+    };
+  }
+);
+
+export const MenuCard = createComponent('div')({
+  displayName: 'Menu.Card',
+  Component: ({children, model, padding = 'zero', ...elemProps}: MenuCardProps, ref, Element) => {
+    const localModel = useModelContext(MenuModelContext, model);
+    const props = useMenuCard(localModel, elemProps, ref);
+    const transformOrigin = React.useMemo(() => {
+      return getTransformFromPlacement(localModel.state.placement || 'bottom');
+    }, [localModel.state.placement]);
+
+    return (
+      <StyledCard
+        maxWidth={`calc(100vw - ${space.l})`}
+        as={Element}
+        transformOrigin={transformOrigin}
+        padding={padding}
+        {...props}
+      >
+        {children}
+      </StyledCard>
+    );
+  },
+});
+
+export const useMenuCard = createHook((_: MenuModel) => {
+  return {};
+});

package/tabs/lib/menu/MenuItem.tsx

@@ -0,0 +1,195 @@
+import * as React from 'react';
+
+import {colors, iconColors, typeColors, space, type} from '@workday/canvas-kit-react/tokens';
+import {
+  createComponent,
+  styled,
+  StyledType,
+  useModelContext,
+  composeHooks,
+  createHook,
+  useLocalRef,
+  useMount,
+} from '@workday/canvas-kit-react/common';
+import {SystemIcon} from '@workday/canvas-kit-react/icon';
+import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
+import {Box} from '@workday/canvas-kit-labs-react/common';
+
+import {useListRegisterItem} from '../list';
+import {useRovingFocus} from '../cursor';
+import {MenuModel} from './useMenuModel';
+import {MenuModelContext} from './Menu';
+import {useSelectionItem} from '../selection';
+
+export interface MenuItemProps<T = unknown> {
+  /**
+   * Optionally pass index to menu item. This should be done if `Menu.Item` components were created
+   * via a `Array::map` function. This index will ensure keyboard navigation works even if items are
+   * inserted out of order.
+   */
+  index?: number;
+  /**
+   * The label text of the MenuItem.
+   */
+  children: React.ReactNode;
+  /**
+   * The name of the menu item. This name will be used in the `onSelect` callback in the model. If
+   * this property is not provided, it will default to a string representation of the the zero-based
+   * index of the Tab when it was initialized.
+   */
+  name?: string;
+  /**
+   * Optionally pass a model directly to this component. Default is to implicitly use the same
+   * model as the container component which uses React context. Only use this for advanced use-cases
+   */
+  model?: MenuModel<T>;
+  'aria-disabled'?: boolean;
+  /**
+   * Use `hasIcon={true}` when the Tab item contains an icon. This instructs the tab item to render
+   * children as a flex container to accommodate icons. You will have to use `Tabs.Item.Text` as a
+   * child element if this is set to true.
+   *
+   * @example
+   * <Menu.Item hasIcon>
+   *   <Menu.Item.Icon icon={someIcon} />
+   *   <Menu.Item.Text>Tab Text</Menu.Item.Text>
+   * </Menu.Item>
+   */
+  hasIcon?: boolean;
+}
+
+const StyledItem = styled(Box.as('li'))<StyledType & {hasIcon?: boolean}>(
+  ({theme}) => {
+    return {
+      ...type.levels.subtext.large,
+      '& > *:not(style) ~ *:not(style)': {
+        marginLeft: space.xxs,
+      },
+      padding: `${space.xxs} ${space.s}`,
+      boxSizing: 'border-box',
+      cursor: 'pointer',
+      color: colors.blackPepper300,
+      borderWidth: 0,
+      textAlign: 'left',
+      transition: 'background-color 80ms, color 80ms',
+      '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+        fill: iconColors.active,
+      },
+      '&:hover, &[aria-selected=true]': {
+        backgroundColor: theme.canvas.palette.primary.lightest,
+        color: colors.blackPepper300,
+        '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
+          fill: iconColors.hover,
+        },
+        '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+          fill: iconColors.active,
+        },
+      },
+      '&:focus': {
+        outline: 'none',
+        backgroundColor: theme.canvas.palette.primary.main,
+        color: typeColors.inverse,
+        '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
+          fill: iconColors.inverse,
+        },
+        '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+          fill: iconColors.inverse,
+        },
+      },
+      // We want the focus styles no matter what
+      [`[data-whatinput]`]: {
+        backgroundColor: 'inherit',
+        color: colors.blackPepper300,
+        '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+          fill: iconColors.active,
+        },
+        '&:hover, &[aria-selected=true]': {
+          backgroundColor: theme.canvas.palette.primary.lightest,
+          '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
+            fill: iconColors.hover,
+          },
+        },
+        '&:focus': {
+          '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+            fill: iconColors.active,
+          },
+        },
+      },
+      backgroundColor: 'inherit',
+      '&:disabled, &[aria-disabled]': {
+        color: colors.licorice100,
+        cursor: 'default',
+        '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
+          fill: iconColors.disabled,
+        },
+        '&:focus': {
+          backgroundColor: colors.blueberry200,
+          '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+            fill: iconColors.disabled,
+          },
+          '&:hover, &[aria-selected=true]': {
+            '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+              fill: iconColors.disabled,
+            },
+          },
+        },
+      },
+    };
+  },
+  ({hasIcon}) => {
+    if (hasIcon) {
+      return {
+        display: 'flex',
+      };
+    } else {
+      return {};
+    }
+  }
+);
+
+export const MenuItem = createComponent('button')({
+  displayName: 'Menu.Item',
+  Component: ({model, children, ...elemProps}: MenuItemProps, ref, Element) => {
+    const localModel = useModelContext(MenuModelContext, model);
+
+    const props = useMenuItem(localModel, elemProps, ref);
+
+    if ('production' !== process.env.NODE_ENV) {
+      // ensure `hasIcon` is used when a child has an icon
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const {elementRef, localRef} = useLocalRef(props.ref);
+      props.ref = elementRef;
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      useMount(() => {
+        if (localRef.current.querySelector('svg') && !props.hasIcon) {
+          console.warn(
+            `A Menu.Item with an icon should have the 'hasIcon' prop set to true. This ensures correct rendering`
+          );
+        }
+      });
+    }
+
+    return (
+      <OverflowTooltip placement="left">
+        <StyledItem minHeight={space.xl} as={Element} {...props}>
+          {children}
+        </StyledItem>
+      </OverflowTooltip>
+    );
+  },
+  subComponents: {
+    Icon: SystemIcon,
+    Text: styled('span')({}),
+  },
+});
+
+export const useMenuItem = composeHooks(
+  createHook((model: MenuModel, _?: React.Ref<any>, elemProps: {name?: string} = {}) => {
+    return {
+      role: 'menuitem',
+    };
+  }),
+  useSelectionItem,
+  useRovingFocus,
+  useListRegisterItem
+);

package/tabs/lib/menu/MenuList.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+
+import {commonColors} from '@workday/canvas-kit-react/tokens';
+import {
+  createComponent,
+  useModelContext,
+  createHook,
+  ExtractProps,
+} from '@workday/canvas-kit-react/common';
+import {Stack} from '@workday/canvas-kit-labs-react/layout';
+
+import {MenuModel} from './useMenuModel';
+import {MenuModelContext} from './Menu';
+import {useRenderItems} from '../list';
+
+export interface MenuListProps<T = unknown> extends Partial<ExtractProps<typeof Stack, never>> {
+  /**
+   * The label text of the MenuList.
+   */
+  children: React.ReactNode;
+  /**
+   * Optionally pass a model directly to this component. Default is to implicitly use the same
+   * model as the container component which uses React context. Only use this for advanced use-cases
+   */
+  model?: MenuModel<T>;
+}
+
+export const MenuList = createComponent('div')({
+  displayName: 'Menu.List',
+  Component: ({model, children, ...elemProps}: MenuListProps, ref, Element) => {
+    const localModel = useModelContext(MenuModelContext, model);
+
+    const props = useMenuList(localModel, elemProps, ref);
+
+    return (
+      <Stack
+        as={Element}
+        background={commonColors.background}
+        borderRadius="m"
+        padding="zero"
+        marginY="zero"
+        marginX="xxs"
+        spacing="zero"
+        overflowY="auto"
+        flexDirection={localModel.state.orientation === 'vertical' ? 'column' : 'row'}
+        {...props}
+      >
+        {useRenderItems(localModel, children)}
+      </Stack>
+    );
+  },
+});
+
+export const useMenuList = createHook((model: MenuModel) => {
+  return {
+    role: 'menu',
+    'aria-labelledby': model.state.id,
+  };
+});

package/tabs/lib/menu/MenuPopper.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+import {createComponent, ExtractProps, useModelContext} from '@workday/canvas-kit-react/common';
+import {usePopupPopper, Popper} from '@workday/canvas-kit-react/popup';
+
+import {MenuModel} from './useMenuModel';
+import {MenuModelContext} from './Menu';
+
+export interface MenuPopperProps<T = unknown> extends ExtractProps<typeof Popper> {
+  /**
+   * Optionally pass a model directly to this component. Default is to implicitly use the same
+   * model as the container component which uses React context. Only use this for advanced use-cases
+   */
+  model?: MenuModel<T>;
+}
+
+export const MenuPopper = createComponent('div')({
+  displayName: 'Menu.Popper',
+  Component: ({children, model, ...elemProps}: MenuPopperProps, ref) => {
+    const localModel = useModelContext(MenuModelContext, model);
+
+    const props = useMenuPopper(localModel, elemProps, ref);
+    return (
+      <Popper placement="bottom-start" {...props}>
+        {children}
+      </Popper>
+    );
+  },
+});
+
+export const useMenuPopper = usePopupPopper;

package/tabs/lib/menu/MenuTarget.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+
+import {
+  composeHooks,
+  createComponent,
+  createHook,
+  useModelContext,
+} from '@workday/canvas-kit-react/common';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {usePopupTarget} from '@workday/canvas-kit-react/popup';
+
+import {MenuModel} from './useMenuModel';
+import {MenuModelContext} from './Menu';
+
+export interface MenuTargetProps<T = unknown> {
+  /**
+   * Optionally pass a model directly to this component. Default is to implicitly use the same
+   * model as the container component which uses React context. Only use this for advanced use-cases
+   */
+  model?: MenuModel<T>;
+  children?: React.ReactNode;
+}
+
+export const MenuTarget = createComponent(SecondaryButton)({
+  displayName: 'Menu.Target',
+  Component: ({children, model, ...elemProps}: MenuTargetProps, ref, Element) => {
+    const localModel = useModelContext(MenuModelContext, model);
+
+    const props = useMenuTarget(localModel, elemProps, ref);
+
+    return <Element {...props}>{children}</Element>;
+  },
+});
+
+export const useMenuTarget = composeHooks(
+  createHook((model: MenuModel) => {
+    return {
+      id: model.state.id,
+      onKeyDown(event: React.KeyboardEvent) {
+        // eslint-disable-next-line default-case
+        switch (event.key) {
+          case 'Down':
+          case 'ArrowDown': // IE11
+          case 'Up':
+          case 'ArrowUp': // IE11
+            model.events.show({event});
+        }
+      },
+    };
+  }),
+  usePopupTarget
+);

package/tabs/lib/menu/index.ts

@@ -0,0 +1,8 @@
+export * from './useMenuModel';
+export {Menu} from './Menu';
+
+export {useMenuCard} from './MenuCard';
+export {useMenuItem} from './MenuItem';
+export {useMenuList} from './MenuList';
+export {useMenuPopper} from './MenuPopper';
+export {useMenuTarget} from './MenuTarget';

package/tabs/lib/menu/useMenuModel.tsx

@@ -0,0 +1,67 @@
+import {createEventMap, Model, ToModelConfig, useEventMap} from '@workday/canvas-kit-react/common';
+import {
+  BasePopupModelConfig,
+  popupEventMap,
+  PopupEvents,
+  PopupModelConfig,
+  PopupState,
+  useAlwaysCloseOnOutsideClick,
+  useCloseOnEscape,
+  useFocusRedirect,
+  useInitialFocus,
+  usePopupModel,
+  useReturnFocus,
+} from '@workday/canvas-kit-react/popup';
+import {ListModel} from '../list';
+import {
+  SelectionState,
+  SelectionEvents,
+  selectionEventMap,
+  SelectionModelConfig,
+  useSelectionModel,
+  BaseSelectionModelConfig,
+} from '../selection';
+
+export type MenuState<T = unknown> = SelectionState<T> & PopupState & {};
+
+export type MenuEvents<T = unknown> = SelectionEvents<T> & PopupEvents & {};
+
+export interface MenuModel<T = unknown> extends Model<MenuState<T>, MenuEvents<T>> {
+  getId: ListModel<T>['getId'];
+}
+
+export const menuEventMap = createEventMap<MenuEvents>()({
+  guards: {
+    ...selectionEventMap.guards,
+    ...popupEventMap.guards,
+  },
+  callbacks: {
+    ...selectionEventMap.callbacks,
+    ...popupEventMap.callbacks,
+  },
+});
+
+export type BaseMenuModelConfig<T> = BaseSelectionModelConfig<T> & BasePopupModelConfig & {};
+
+export type MenuModelConfig<T> = BaseMenuModelConfig<T> &
+  Partial<ToModelConfig<MenuState<T>, MenuEvents<T>, typeof menuEventMap>>;
+
+export const useMenuModel = <T extends unknown>(config: MenuModelConfig<T> = {}): MenuModel<T> => {
+  const popup = usePopupModel(config as PopupModelConfig);
+  const selection = useSelectionModel(config as SelectionModelConfig<T>);
+
+  useAlwaysCloseOnOutsideClick(popup);
+  useCloseOnEscape(popup);
+  useInitialFocus(popup);
+  useReturnFocus(popup);
+  useFocusRedirect(popup);
+
+  const state = {...selection.state, ...popup.state};
+
+  const events = useEventMap(menuEventMap, state, config, {
+    ...selection.events,
+    ...popup.events,
+  } as MenuEvents<T>);
+
+  return {state, events, getId: selection.getId};
+};

package/tabs/lib/overflow/index.ts

@@ -0,0 +1,4 @@
+export * from './useOverflowModel';
+export * from './useOverflowMeasureItem';
+export * from './useOverflowMeasureContainer';
+export * from './useOverflowTarget';

package/tabs/lib/overflow/spec/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../../../../tsconfig.spec.json"
+}

package/tabs/lib/overflow/spec/useOverflowModel.spec.tsx

@@ -0,0 +1,46 @@
+import {getHiddenIds} from '../useOverflowModel';
+
+describe('useOverflowModel', () => {
+  describe('getHiddenIds', () => {
+    const itemWidthCache = {
+      first: 100,
+      second: 100,
+      third: 100,
+      fourth: 100,
+    };
+    const overflowTargetWidth = 100;
+
+    const io = [
+      {
+        containerWidth: 100,
+        selected: 'first',
+        hiddenIds: ['first', 'second', 'third', 'fourth'],
+      },
+      {
+        containerWidth: 199,
+        selected: 'first',
+        hiddenIds: ['first', 'second', 'third', 'fourth'],
+      },
+      {
+        containerWidth: 200,
+        selected: 'first',
+        hiddenIds: ['second', 'third', 'fourth'],
+      },
+      {containerWidth: 400, selected: 'first', hiddenIds: []},
+      {containerWidth: 399, selected: 'first', hiddenIds: ['third', 'fourth']},
+      {
+        containerWidth: 200,
+        selected: 'second',
+        hiddenIds: ['first', 'third', 'fourth'],
+      },
+    ].forEach(({containerWidth, hiddenIds, selected}) => {
+      it(`when containerWidth is ${containerWidth} and selected is '${selected}' should contain hiddenIds [${hiddenIds.join(
+        ', '
+      )}] `, () => {
+        expect(
+          getHiddenIds(containerWidth, overflowTargetWidth, itemWidthCache, [selected])
+        ).toEqual(hiddenIds);
+      });
+    });
+  });
+});

package/tabs/lib/overflow/useOverflowMeasureContainer.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+import {createHook, useForkRef, useResizeObserver} from '@workday/canvas-kit-react/common';
+
+import {OverflowModel} from './useOverflowModel';
+
+export const useOverflowMeasureContainer = createHook(
+  (model: OverflowModel, ref?: React.Ref<HTMLElement>) => {
+    const localRef = React.useRef(null);
+    const {ref: resizeRef} = useResizeObserver({
+      ref: localRef,
+      onResize: model.events.setContainerWidth,
+    });
+    const elementRef = useForkRef(ref, resizeRef);
+
+    return {
+      ref: elementRef,
+    };
+  }
+);

package/tabs/lib/overflow/useOverflowMeasureItem.tsx

@@ -0,0 +1,40 @@
+import {createHook, useLocalRef, useMountLayout} from '@workday/canvas-kit-react/common';
+
+import {OverflowModel} from './useOverflowModel';
+
+const hiddenStyles = {
+  position: 'absolute',
+  left: -99999,
+} as const;
+
+export const useOverflowMeasureItem = createHook(
+  (model: OverflowModel, ref?: React.Ref<HTMLElement>, elemProps: {name?: string} = {}) => {
+    const {elementRef, localRef} = useLocalRef(ref);
+    const name = elemProps.name || '';
+
+    useMountLayout(() => {
+      if (localRef.current) {
+        const styles = getComputedStyle(localRef.current);
+        model.events.addItemWidth({
+          id: name,
+          width:
+            localRef.current.offsetWidth +
+            parseFloat(styles.marginLeft) +
+            parseFloat(styles.marginRight),
+        });
+      }
+
+      return () => {
+        model.events.removeItemWidth({id: name});
+      };
+    });
+
+    const hidden = model.state.hiddenIds.includes(name);
+
+    return {
+      ref: elementRef,
+      'aria-hidden': hidden || undefined,
+      style: hidden ? hiddenStyles : {},
+    };
+  }
+);