@workday/canvas-kit-react 7.0.0-alpha.89-next.16 → 7.0.0-alpha.90-next.17

package/{tabs/lib/menu → menu/lib}/MenuItem.tsx

@@ -2,26 +2,25 @@ import * as React from 'react';
 
 import {colors, iconColors, typeColors, space, type} from '@workday/canvas-kit-react/tokens';
 import {
-  createComponent,
+  createSubcomponent,
   styled,
   StyledType,
-  useModelContext,
   composeHooks,
-  createHook,
+  createElemPropsHook,
   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-react/layout';
+import {
+  useListItemRegister,
+  useListItemRovingFocus,
+  useListItemSelect,
+} from '@workday/canvas-kit-react/collection';
 
-import {useListRegisterItem} from '../list';
-import {useRovingFocus} from '../cursor';
-import {MenuModel} from './useMenuModel';
-import {MenuModelContext} from './Menu';
-import {useSelectionItem} from '../selection';
+import {useMenuModel} from './useMenuModel';
 
-export interface MenuItemProps<T = unknown> {
+export interface MenuItemProps {
   /**
    * 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
@@ -37,34 +36,19 @@ export interface MenuItemProps<T = unknown> {
    * 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>;
+  'data-id'?: string;
   '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('button'))<StyledType & {hasIcon?: boolean}>(
+const StyledItem = styled(Box.as('button'))<StyledType>(
   ({theme}) => {
     return {
       ...type.levels.subtext.large,
       '& > *:not(style) ~ *:not(style)': {
         marginLeft: space.xxs,
       },
+      display: 'block',
+      width: '100%',
       padding: `${space.xxs} ${space.s}`,
       boxSizing: 'border-box',
       cursor: 'pointer',
@@ -136,60 +120,69 @@ const StyledItem = styled(Box.as('button'))<StyledType & {hasIcon?: boolean}>(
       },
     };
   },
-  ({hasIcon}) => {
-    if (hasIcon) {
+  ({children}) => {
+    if (typeof children === 'string') {
+      return {};
+    } else {
       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);
+export const useMenuItem = composeHooks(
+  createElemPropsHook(useMenuModel)(
+    (model, ref, elemProps: {'data-id': string} = {'data-id': ''}) => {
+      const {localRef, elementRef} = useLocalRef(ref);
+      const id = elemProps['data-id'];
 
-    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`
-          );
+      // focus on the item with the cursor
+      React.useLayoutEffect(() => {
+        if (model.state.mode === 'single') {
+          if (model.state.cursorId === id) {
+            // delay focus changes to allow PopperJS to position
+            requestAnimationFrame(() => {
+              localRef.current.focus();
+            });
+          }
         }
-      });
+        // We only need to run when the ID has changed. If the static API is used, the first time
+        // this is run, the id will be blank
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [id]);
+
+      return {
+        ref: elementRef,
+        role: 'menuitem',
+        onClick:
+          model.state.mode === 'single'
+            ? (event: React.SyntheticEvent) => {
+                model.events.hide({event});
+              }
+            : undefined,
+      };
     }
+  ),
+  useListItemSelect,
+  useListItemRovingFocus,
+  useListItemRegister
+);
 
-    return (
-      <OverflowTooltip placement="left">
-        <StyledItem minHeight={space.xl} as={Element} {...props}>
-          {children}
-        </StyledItem>
-      </OverflowTooltip>
-    );
-  },
+export const MenuItem = createSubcomponent('button')({
+  displayName: 'Menu.Item',
+  modelHook: useMenuModel,
+  elemPropsHook: useMenuItem,
   subComponents: {
     Icon: SystemIcon,
-    Text: styled('span')({}),
+    Text: styled('span')({flexGrow: 1, alignSelf: 'center'}),
   },
+})<MenuItemProps>(({children, ...elemProps}, Element) => {
+  return (
+    <OverflowTooltip placement="left">
+      <StyledItem minHeight={space.xl} as={Element} {...elemProps}>
+        {children}
+      </StyledItem>
+    </OverflowTooltip>
+  );
 });
-
-export const useMenuItem = composeHooks(
-  createHook((model: MenuModel, _?: React.Ref<any>, elemProps: {name?: string} = {}) => {
-    return {
-      role: 'menuitem',
-    };
-  }),
-  useSelectionItem,
-  useRovingFocus,
-  useListRegisterItem
-);

package/menu/lib/MenuList.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+
+import {commonColors} from '@workday/canvas-kit-react/tokens';
+import {
+  createSubcomponent,
+  createElemPropsHook,
+  ExtractProps,
+} from '@workday/canvas-kit-react/common';
+import {ListBox} from '@workday/canvas-kit-react/collection';
+import {Stack} from '@workday/canvas-kit-react/layout';
+
+import {useMenuModel} from './useMenuModel';
+
+export interface MenuListProps extends Partial<ExtractProps<typeof Stack, never>> {
+  /**
+   * The label text of the MenuList.
+   */
+  children: React.ReactNode;
+}
+
+export const useMenuList = createElemPropsHook(useMenuModel)(model => {
+  return {
+    role: 'menu',
+    'aria-labelledby': model.state.id,
+  };
+});
+
+export const MenuList = createSubcomponent('div')({
+  displayName: 'Menu.List',
+  modelHook: useMenuModel,
+  elemPropsHook: useMenuList,
+})<MenuListProps>(({children, ...elemProps}, Element, model) => {
+  return (
+    <ListBox
+      as={Element}
+      model={model}
+      background={commonColors.background}
+      borderRadius="zero"
+      padding="zero"
+      marginY="xxs"
+      spacing="zero"
+      overflowY="auto"
+      flexDirection={model.state.orientation === 'vertical' ? 'column' : 'row'}
+      {...elemProps}
+    >
+      {children}
+    </ListBox>
+  );
+});

package/menu/lib/MenuPopper.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {usePopupPopper, Popper} from '@workday/canvas-kit-react/popup';
+
+import {useMenuModel} from './useMenuModel';
+
+export interface MenuPopperProps extends ExtractProps<typeof Popper> {}
+
+export const useMenuPopper = usePopupPopper;
+
+export const MenuPopper = createSubcomponent('div')({
+  displayName: 'Menu.Popper',
+  modelHook: useMenuModel,
+  elemPropsHook: useMenuPopper,
+})<MenuPopperProps>(({children, ...elemProps}) => {
+  return (
+    <Popper placement="bottom-start" {...elemProps}>
+      {children}
+    </Popper>
+  );
+});

package/menu/lib/MenuTarget.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+
+import {
+  composeHooks,
+  createSubcomponent,
+  createElemPropsHook,
+} from '@workday/canvas-kit-react/common';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {usePopupTarget, usePopupTargetContext} from '@workday/canvas-kit-react/popup';
+
+import {useMenuModel} from './useMenuModel';
+
+export interface MenuTargetProps {
+  children?: React.ReactNode;
+}
+
+const useMenuTargetBase = createElemPropsHook(useMenuModel)(model => {
+  return {
+    id: model.state.id,
+    'aria-haspopup': 'true',
+    'aria-expanded': model.state.visibility === 'visible',
+    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});
+      }
+    },
+  };
+});
+
+export const useMenuTarget = composeHooks(useMenuTargetBase, usePopupTarget);
+export const useMenuTargetContext = composeHooks(useMenuTargetBase, usePopupTargetContext);
+
+export const MenuTarget = createSubcomponent(SecondaryButton)({
+  displayName: 'Menu.Target',
+  modelHook: useMenuModel,
+  elemPropsHook: useMenuTarget,
+})<MenuTargetProps>(({children, ...elemProps}, Element) => {
+  return <Element {...elemProps}>{children}</Element>;
+});
+
+export const MenuTargetContext = createSubcomponent(SecondaryButton)({
+  displayName: 'Menu.Target',
+  modelHook: useMenuModel,
+  elemPropsHook: useMenuTargetContext,
+})<MenuTargetProps>(({children, ...elemProps}, Element) => {
+  return <Element {...elemProps}>{children}</Element>;
+});

package/menu/lib/useMenuModel.tsx

@@ -0,0 +1,57 @@
+import {createModelHook} from '@workday/canvas-kit-react/common';
+import {
+  useAlwaysCloseOnOutsideClick,
+  useCloseOnEscape,
+  useFocusRedirect,
+  usePopupModel,
+  useReturnFocus,
+} from '@workday/canvas-kit-react/popup';
+import {
+  multiSelectionManager,
+  singleSelectionManager,
+  useListModel,
+} from '@workday/canvas-kit-react/collection';
+
+export const useMenuModel = createModelHook({
+  defaultConfig: {
+    ...useListModel.defaultConfig,
+    ...usePopupModel.defaultConfig,
+    /** Determines the default selection manager used as well as if the menu closes when an item is selected */
+    mode: 'single' as 'single' | 'multiple',
+  },
+  requiredConfig: {
+    ...useListModel.requiredConfig,
+    ...usePopupModel.requiredConfig,
+  },
+})(config => {
+  // don't virtualize menus by default to avoid oddities with card width
+  const list = useListModel(
+    useListModel.mergeConfig(config, {
+      shouldVirtualize: false,
+      selection: config.mode === 'single' ? singleSelectionManager : multiSelectionManager,
+    })
+  );
+
+  const popup = usePopupModel(
+    usePopupModel.mergeConfig(config, {
+      onHide() {
+        // reset the index ref to 0 again so registration doesn't start where it left off
+        list.state.indexRef.current = 0;
+      },
+    })
+  );
+
+  useAlwaysCloseOnOutsideClick(popup);
+  useCloseOnEscape(popup);
+  useReturnFocus(popup);
+  useFocusRedirect(popup);
+
+  const state = {mode: config.mode, ...list.state, ...popup.state};
+
+  const events = {
+    ...list.events,
+    ...popup.events,
+  };
+
+  return {...list, state, events};
+});

package/menu/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../dist/commonjs/menu",
+  "module": "../dist/es6/menu",
+  "sideEffects": false
+}

package/modal/lib/Modal.tsx

@@ -1,26 +1,16 @@
 import * as React from 'react';
-import {createComponent, ExtractProps, useDefaultModel} from '@workday/canvas-kit-react/common';
+import {createContainer, ExtractProps} from '@workday/canvas-kit-react/common';
 import {Dialog} from '@workday/canvas-kit-react/dialog';
-import {PopupModelContext, Popup} from '@workday/canvas-kit-react/popup';
+import {Popup} from '@workday/canvas-kit-react/popup';
 import {ModalOverlay} from './ModalOverlay';
 import {ModalCard} from './ModalCard';
 import {useModalModel} from './hooks';
 import {ModalHeading} from './ModalHeading';
 import {ModalOverflowOverlay} from './ModalOverflowOverlay';
 
-export interface ModalProps extends ExtractProps<typeof Dialog, never> {
-  /** The contents of the Modal. Can be `Modal` subcomponents or any valid elements. */
-  children: React.ReactNode;
-}
-
-export const Modal = createComponent()({
+export const Modal = createContainer()({
   displayName: 'Modal',
-  Component: ({children, model, ...config}: ModalProps) => {
-    const value = useDefaultModel(model, config, useModalModel);
-
-    return <PopupModelContext.Provider value={value}>{children}</PopupModelContext.Provider>;
-  },
-
+  modelHook: useModalModel,
   subComponents: {
     Body: Popup.Body,
     Card: ModalCard,
@@ -31,4 +21,6 @@ export const Modal = createComponent()({
     OverflowOverlay: ModalOverflowOverlay,
     CloseButton: Popup.CloseButton,
   },
+})<ExtractProps<typeof Dialog, never>>(elemProps => {
+  return <>{elemProps.children}</>;
 });

package/modal/lib/ModalCard.tsx

@@ -1,22 +1,18 @@
 import * as React from 'react';
 
-import {createComponent, useModelContext, ExtractProps} from '@workday/canvas-kit-react/common';
-import {Popup, PopupModelContext} from '@workday/canvas-kit-react/popup';
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {Popup} from '@workday/canvas-kit-react/popup';
 
-import {useModalCard} from './hooks';
+import {useModalCard, useModalModel} from './hooks';
 
 export interface ModalCardProps extends ExtractProps<typeof Popup.Card, never> {}
 
-export const ModalCard = createComponent('div')({
+export const ModalCard = createSubcomponent('div')({
   displayName: 'Modal.Card',
-  Component: ({children, model, ...elemProps}: ModalCardProps, ref, Element) => {
-    const localModel = useModelContext(PopupModelContext, model);
-
-    const props = useModalCard(localModel, elemProps, ref);
-    return (
-      <Popup.Card as={Element} width={440} borderWidth={0} margin="xl" depth={6} {...props}>
-        {children}
-      </Popup.Card>
-    );
-  },
+  modelHook: useModalModel,
+  elemPropsHook: useModalCard,
+})<ModalCardProps>((elemProps, Element) => {
+  return (
+    <Popup.Card as={Element} width={440} borderWidth={0} margin="xl" depth={6} {...elemProps} />
+  );
 });

package/modal/lib/ModalHeading.tsx

@@ -1,22 +1,16 @@
 import * as React from 'react';
 
-import {createComponent, useModelContext, ExtractProps} from '@workday/canvas-kit-react/common';
-import {Popup, PopupModelContext} from '@workday/canvas-kit-react/popup';
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {Popup} from '@workday/canvas-kit-react/popup';
 
-import {useModalHeading} from './hooks';
+import {useModalHeading, useModalModel} from './hooks';
 
 export interface ModalHeadingProps extends ExtractProps<typeof Popup.Heading, never> {}
 
-export const ModalHeading = createComponent('h2')({
+export const ModalHeading = createSubcomponent('h2')({
   displayName: 'Modal.Heading',
-  Component: ({children, model, ...elemProps}: ModalHeadingProps, ref, Element) => {
-    const localModel = useModelContext(PopupModelContext, model);
-
-    const props = useModalHeading(localModel, elemProps, ref);
-    return (
-      <Popup.Heading as={Element} {...props}>
-        {children}
-      </Popup.Heading>
-    );
-  },
+  modelHook: useModalModel,
+  elemPropsHook: useModalHeading,
+})<ModalHeadingProps>((elemProps, Element) => {
+  return <Popup.Heading as={Element} {...elemProps} />;
 });

package/modal/lib/ModalOverflowOverlay.tsx

@@ -1,25 +1,18 @@
 import * as React from 'react';
 
-import {createComponent, ExtractProps, StyledType} from '@workday/canvas-kit-react/common';
+import {createSubcomponent, ExtractProps, StyledType} from '@workday/canvas-kit-react/common';
 
 import {ModalOverlay} from './ModalOverlay';
 import styled from '@emotion/styled';
+import {useModalModel} from './hooks';
 
 const StyledOverlay = styled(ModalOverlay)<StyledType>({
   '& > div': {maxHeight: 'inherit'}, // reset maxHeight of centering div
 });
 
-export const ModalOverflowOverlay = createComponent('div')({
+export const ModalOverflowOverlay = createSubcomponent('div')({
   displayName: 'Modal.OverflowOverlay',
-  Component: (
-    {children, model, ...elemProps}: ExtractProps<typeof ModalOverlay, never>,
-    ref,
-    Element
-  ) => {
-    return (
-      <StyledOverlay as={Element} ref={ref} overflowX="hidden" overflowY="auto" {...elemProps}>
-        {children}
-      </StyledOverlay>
-    );
-  },
+  modelHook: useModalModel,
+})<ExtractProps<typeof ModalOverlay, never>>((elemProps, Element) => {
+  return <StyledOverlay as={Element} overflowX="hidden" overflowY="auto" {...elemProps} />;
 });

package/modal/lib/ModalOverlay.tsx

@@ -2,20 +2,19 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import {
-  createComponent,
-  useModelContext,
-  createHook,
+  createSubcomponent,
+  createElemPropsHook,
   StyledType,
   useWindowSize,
   useForkRef,
 } from '@workday/canvas-kit-react/common';
-import {PopupModel, PopupModelContext, usePopupStack} from '@workday/canvas-kit-react/popup';
+import {usePopupModel, usePopupStack} from '@workday/canvas-kit-react/popup';
 import {keyframes} from '@emotion/react';
 import styled from '@emotion/styled';
 import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
+import {useModalModel} from './hooks';
 
 export interface ModalOverlayProps extends BoxProps {
-  model?: PopupModel;
   children: React.ReactNode;
 }
 
@@ -64,20 +63,16 @@ const CenteringContainer = styled('div')({
   },
 });
 
-export const ModalOverlay = createComponent('div')({
+export const ModalOverlay = createSubcomponent('div')({
   displayName: 'Modal.Overlay',
-  Component: ({model, children, ...elemProps}: ModalOverlayProps, ref, Element) => {
-    const localModel = useModelContext(PopupModelContext, model);
-
-    return localModel.state.visibility !== 'hidden' ? (
-      <OpenModalOverlay ref={ref} as={Element} model={localModel} {...elemProps}>
-        {children}
-      </OpenModalOverlay>
-    ) : null;
-  },
+  modelHook: useModalModel,
+})<ModalOverlayProps>((elemProps, Element, model) => {
+  return model.state.visibility !== 'hidden' ? (
+    <OpenModalOverlay as={Element} model={model} {...elemProps} />
+  ) : null;
 });
 
-export const useModalOverlay = createHook(({state}: PopupModel, ref) => {
+export const useModalOverlay = createElemPropsHook(usePopupModel)(({state}, ref) => {
   const elementRef = useForkRef(ref, state.stackRef);
   usePopupStack(elementRef);
 
@@ -87,29 +82,29 @@ export const useModalOverlay = createHook(({state}: PopupModel, ref) => {
   };
 });
 
-const OpenModalOverlay = createComponent('div')({
+const OpenModalOverlay = createSubcomponent('div')({
   displayName: 'Modal.OpenOverlay',
-  Component: ({model, children, ...elemProps}: ModalOverlayProps, ref, Element) => {
-    const props = useModalOverlay(model!, elemProps, ref);
-    const windowSize = useWindowSize();
+  modelHook: useModalModel,
+  elemPropsHook: useModalOverlay,
+})<ModalOverlayProps>((elemProps: ModalOverlayProps, Element, model) => {
+  const windowSize = useWindowSize();
 
-    const content = (
-      <Container as={Element} {...props}>
-        <CenteringContainer
-          // make sure the centering container is an even number of pixels to avoid sub-pixel
-          // inaccuracies due to centering
-          style={{width: windowSize.width % 2 === 1 ? 'calc(100vw - 1px)' : '100vw'}}
-        >
-          {children}
-        </CenteringContainer>
-      </Container>
-    );
+  const content = (
+    <Container as={Element} {...elemProps}>
+      <CenteringContainer
+        // make sure the centering container is an even number of pixels to avoid sub-pixel
+        // inaccuracies due to centering
+        style={{width: windowSize.width % 2 === 1 ? 'calc(100vw - 1px)' : '100vw'}}
+      >
+        {elemProps.children}
+      </CenteringContainer>
+    </Container>
+  );
 
-    // only render something on the client
-    if (typeof window !== 'undefined') {
-      return ReactDOM.createPortal(content, model!.state.stackRef.current!);
-    } else {
-      return null;
-    }
-  },
+  // only render something on the client
+  if (typeof window !== 'undefined') {
+    return ReactDOM.createPortal(content, model!.state.stackRef.current!);
+  } else {
+    return null;
+  }
 });

package/modal/lib/hooks/useCloseOnOverlayClick.ts

@@ -1,14 +1,15 @@
 import React from 'react';
 
 import {PopupStack} from '@workday/canvas-kit-popup-stack';
-import {PopupModel} from '@workday/canvas-kit-react/popup';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {usePopupModel} from '@workday/canvas-kit-react/popup';
 
 /**
  * Registers global listener for all clicks. It will only call the PopupModel's `hide` event if the
  * click happened outside the `[role=dialog]` of an overlay component. The difference between `useCloseOnOutsideClick`
  * and `useCloseOnOverlayClick` is the Overlay is a child of a `stackRef` element and has a different
  */
-export const useCloseOnOverlayClick = (model: PopupModel, elemProps = {}) => {
+export const useCloseOnOverlayClick = createElemPropsHook(usePopupModel)(model => {
   const onClick = React.useCallback(
     (event: MouseEvent) => {
       if (!model.state.stackRef.current) {
@@ -53,5 +54,5 @@ export const useCloseOnOverlayClick = (model: PopupModel, elemProps = {}) => {
     };
   }, [model.state.stackRef, visible, onClick]);
 
-  return elemProps;
-};
+  return {};
+});

package/modal/lib/hooks/useModalCard.ts

@@ -1,9 +1,9 @@
-import {composeHooks, createHook} from '@workday/canvas-kit-react/common';
-import {usePopupCard, PopupModel} from '@workday/canvas-kit-react/popup';
+import {composeHooks, createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {usePopupCard, usePopupModel} from '@workday/canvas-kit-react/popup';
 
 export const useModalCard = composeHooks(
   usePopupCard,
-  createHook(({state}: PopupModel) => {
+  createElemPropsHook(usePopupModel)(() => {
     return {
       'aria-modal': true,
     };