@workday/canvas-kit-react 5.3.0 → 5.3.4

package/tabs/lib/menu/MenuItem.tsx

@@ -1,195 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

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

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

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

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

@@ -1,46 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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 : {},
-    };
-  }
-);