@workday/canvas-kit-react 9.0.0-alpha.419-next.21 → 9.0.0

package/menu/lib/MenuItem.tsx

@@ -40,7 +40,7 @@ export interface MenuItemProps {
   'aria-disabled'?: boolean;
 }
 
-const StyledItem = styled(Box.as('button'))<StyledType>(
+export const StyledMenuItem = styled(Box.as('button'))<StyledType>(
   ({theme}) => {
     return {
       ...type.levels.subtext.large,
@@ -65,7 +65,7 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
           fill: iconColors.hover,
         },
       },
-      '&:focus': {
+      '&:focus, &.focus': {
         outline: 'none',
         backgroundColor: theme.canvas.palette.primary.main,
         color: typeColors.inverse,
@@ -89,7 +89,7 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
             fill: iconColors.hover,
           },
         },
-        '&:focus': {
+        '&:focus, &.focus': {
           '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
             fill: iconColors.hover,
           },
@@ -102,7 +102,7 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
         '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
           fill: iconColors.disabled,
         },
-        '&:focus': {
+        '&:focus, &.focus': {
           backgroundColor: colors.blueberry200,
           '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
             fill: iconColors.disabled,
@@ -133,7 +133,7 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
 export const useMenuItem = composeHooks(
   createElemPropsHook(useMenuModel)(
     (model, ref, elemProps: {'data-id': string} = {'data-id': ''}) => {
-      const {localRef, elementRef} = useLocalRef(ref);
+      const {localRef, elementRef} = useLocalRef(ref as React.Ref<HTMLElement>);
       const id = elemProps['data-id'];
 
       // focus on the item with the cursor
@@ -142,14 +142,11 @@ export const useMenuItem = composeHooks(
           if (model.state.cursorId === id) {
             // delay focus changes to allow PopperJS to position
             requestAnimationFrame(() => {
-              localRef.current.focus();
+              localRef.current?.focus();
             });
           }
         }
-        // We only need to run when the ID or cursorId 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, model.state.cursorId]);
+      }, [id, localRef, model.state.cursorId, model.state.mode]);
 
       return {
         ref: elementRef,
@@ -182,9 +179,9 @@ export const MenuItem = createSubcomponent('button')({
 })<MenuItemProps>(({children, ...elemProps}, Element) => {
   return (
     <OverflowTooltip placement="left">
-      <StyledItem minHeight={space.xl} as={Element} {...elemProps}>
+      <StyledMenuItem minHeight={space.xl} as={Element} {...elemProps}>
         {children}
-      </StyledItem>
+      </StyledMenuItem>
     </OverflowTooltip>
   );
 });

package/menu/lib/MenuList.tsx

@@ -5,25 +5,31 @@ import {
   createSubcomponent,
   createElemPropsHook,
   ExtractProps,
+  composeHooks,
 } from '@workday/canvas-kit-react/common';
-import {ListBox} from '@workday/canvas-kit-react/collection';
-import {Flex} from '@workday/canvas-kit-react/layout';
+import {ListBox, ListProps} from '@workday/canvas-kit-react/collection';
+import {useReturnFocus, useFocusRedirect} from '@workday/canvas-kit-react/popup';
 
 import {useMenuModel} from './useMenuModel';
 
-export interface MenuListProps<T = any> extends Omit<ExtractProps<typeof Flex, never>, 'children'> {
+export interface MenuListProps<T = any>
+  extends Omit<ExtractProps<typeof ListBox, never>, 'children'> {
   /**
    * The label text of the MenuList.
    */
-  children: React.ReactNode | ((item: T) => React.ReactNode);
+  children: ListProps<T>['children'];
 }
 
-export const useMenuList = createElemPropsHook(useMenuModel)(model => {
-  return {
-    role: 'menu',
-    'aria-labelledby': model.state.id,
-  };
-});
+export const useMenuList = composeHooks(
+  createElemPropsHook(useMenuModel)(model => {
+    return {
+      role: 'menu',
+      'aria-labelledby': model.state.id,
+    };
+  }),
+  useReturnFocus,
+  useFocusRedirect
+);
 
 export const MenuList = createSubcomponent('div')({
   displayName: 'Menu.List',

package/menu/lib/useMenuModel.tsx

@@ -2,9 +2,7 @@ import {createModelHook} from '@workday/canvas-kit-react/common';
 import {
   useAlwaysCloseOnOutsideClick,
   useCloseOnEscape,
-  useFocusRedirect,
   usePopupModel,
-  useReturnFocus,
 } from '@workday/canvas-kit-react/popup';
 import {
   multiSelectionManager,
@@ -18,16 +16,17 @@ export const useMenuModel = createModelHook({
     ...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',
+    // don't virtualize menus by default to avoid oddities with card width
+
+    shouldVirtualize: false,
   },
   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,
     })
   );
@@ -43,8 +42,6 @@ export const useMenuModel = createModelHook({
 
   useAlwaysCloseOnOutsideClick(popup);
   useCloseOnEscape(popup);
-  useReturnFocus(popup);
-  useFocusRedirect(popup);
 
   const state = {mode: config.mode, ...list.state, ...popup.state};
 
@@ -53,5 +50,5 @@ export const useMenuModel = createModelHook({
     ...popup.events,
   };
 
-  return {...list, state, events};
+  return {...list, ...popup, state, events};
 });

package/modal/lib/hooks/useModalHeading.ts

@@ -10,8 +10,8 @@ import {usePopupHeading, usePopupModel} from '@workday/canvas-kit-react/popup';
 
 export const useModalHeading = composeHooks(
   usePopupHeading,
-  createElemPropsHook(usePopupModel)((_, ref?: React.Ref<HTMLElement>) => {
-    const {elementRef, localRef} = useLocalRef(ref);
+  createElemPropsHook(usePopupModel)((_, ref) => {
+    const {elementRef, localRef} = useLocalRef(ref as React.Ref<HTMLElement>);
 
     useMountLayout(() => {
       if (localRef.current?.parentElement?.querySelector('button')?.textContent) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "9.0.0-alpha.419-next.21+2436a0cd",
+  "version": "9.0.0",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,7 +49,7 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^9.0.0-alpha.419-next.21+2436a0cd",
+    "@workday/canvas-kit-popup-stack": "^9.0.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
@@ -66,5 +66,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "2436a0cd3dc23fd2d4f6350af6f76a9591f83e30"
+  "gitHead": "4e8110ad9758d19ef214fc6792f4803c2e25bac3"
 }

package/tabs/lib/TabsItem.tsx

@@ -170,21 +170,18 @@ export const StyledTabItem = styled(Box.as('button'))<StyledType & Pick<TabsItem
 );
 
 export const useTabsItem = composeHooks(
-  createElemPropsHook(useTabsModel)(
-    ({state}, _?: React.Ref<HTMLButtonElement>, elemProps: {'data-id'?: string} = {}) => {
-      const name = elemProps['data-id'] || '';
+  createElemPropsHook(useTabsModel)(({state}, _, elemProps: {'data-id'?: string} = {}) => {
+    const name = elemProps['data-id'] || '';
 
-      const selected = !!elemProps['data-id'] && isSelected(name, state);
+    const selected = !!elemProps['data-id'] && isSelected(name, state);
 
-      return {
-        type: 'button' as const,
-        role: 'tab' as const,
-        id: `${state.id}-${name}`,
-        'aria-selected': selected,
-        'aria-controls': `tabpanel-${state.id}-${name}`,
-      };
-    }
-  ),
+    return {
+      type: 'button' as const,
+      role: 'tab' as const,
+      'aria-selected': selected,
+      'aria-controls': `tabpanel-${state.id}-${name}`,
+    };
+  }),
   useListItemSelect,
   useOverflowListItemMeasure,
   useListItemRovingFocus,

package/tabs/lib/TabsPanel.tsx

@@ -39,11 +39,7 @@ export interface TabPanelProps extends ExtractProps<typeof Box, never> {
 const StyledTabsPanel = styled(Box)<StyledType>(hideMouseFocus);
 
 export const useTabsPanel = createElemPropsHook(useTabsModel)(
-  (
-    {state, events},
-    _?: React.Ref<HTMLElement>,
-    elemProps: {'data-id'?: string; item?: Item<any>} = {}
-  ) => {
+  ({state, events}, _, elemProps: {'data-id'?: string; item?: Item<any>} = {}) => {
     const [localId, setLocalId] = React.useState(elemProps['data-id'] || elemProps.item?.id || '');
 
     useMountLayout(() => {

package/tabs/lib/useTabsModel.tsx

@@ -48,6 +48,7 @@ export const useTabsModel = createModelHook({
     menuConfig: {} as typeof useMenuModel.TConfig,
   },
   requiredConfig: useOverflowListModel.requiredConfig,
+  contextOverride: useOverflowListModel.Context,
 })(config => {
   const initialSelectedRef = React.useRef(config.initialTab);
   const getId = config.getId || defaultGetId;