@workday/canvas-kit-react 9.0.0-alpha.418-next.20 → 9.0.0-alpha.420-next.22

package/dist/es6/text-input/lib/InputGroup.d.ts

@@ -1,9 +1,64 @@
 import React from 'react';
-export declare const InputGroupInnerStart: import("@workday/canvas-kit-react/common").ElementComponent<"div", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps & React.HTMLAttributes<HTMLDivElement>>;
-export declare const InputGroupInnerEnd: import("@workday/canvas-kit-react/common").ElementComponent<"div", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps & React.HTMLAttributes<HTMLDivElement>>;
-export declare const InputGroupInput: import("@workday/canvas-kit-react/common").ElementComponent<import("@workday/canvas-kit-react/common").ElementComponent<"input", import("./TextInput").TextInputProps> & {
+export declare const useInputGroupModel: (<TT_Special_Generic>(config?: (Partial<{}> & {} & {}) | undefined) => {
+    state: {
+        inputRef: React.RefObject<HTMLInputElement>;
+    };
+    events: {};
+}) & import("@workday/canvas-kit-react/common").ModelExtras<{}, {}, {
+    inputRef: React.RefObject<HTMLInputElement>;
+}, {}, {
+    state: {
+        inputRef: React.RefObject<HTMLInputElement>;
+    };
+    events: {};
+}>;
+export declare const InputGroupInnerStart: import("@workday/canvas-kit-react/common").ElementComponentM<"div", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps, {
+    state: {
+        inputRef: React.RefObject<HTMLInputElement>;
+    };
+    events: {};
+}>;
+export declare const InputGroupInnerEnd: import("@workday/canvas-kit-react/common").ElementComponentM<"div", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps, {
+    state: {
+        inputRef: React.RefObject<HTMLInputElement>;
+    };
+    events: {};
+}>;
+export declare const InputGroupInput: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"input", import("./TextInput").TextInputProps> & {
     ErrorType: typeof import("@workday/canvas-kit-react/common").ErrorType;
-}, Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps & React.HTMLAttributes<HTMLDivElement>>;
+}, Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps, {
+    state: {
+        inputRef: React.RefObject<HTMLInputElement>;
+    };
+    events: {};
+}>;
+export declare const useClearButton: import("@workday/canvas-kit-react/common").BehaviorHook<{
+    state: {
+        inputRef: React.RefObject<HTMLInputElement>;
+    };
+    events: {};
+}, {
+    readonly role: "presentation";
+    readonly tabIndex: -1;
+    readonly icon: import("@workday/design-assets-types").CanvasSystemIcon;
+    readonly size: "small";
+    readonly transition: "opacity 300ms ease";
+    readonly onMouseDown: (event: React.MouseEvent) => void;
+    readonly onClick: () => void;
+    readonly style: {
+        readonly opacity: 0 | 1;
+        readonly pointerEvents: "none" | "auto";
+    };
+}>;
+/**
+ * A clear input button. This can be a component later.
+ */
+export declare const ClearButton: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"button", import("@workday/canvas-kit-react/button").TertiaryButtonProps>, import("@workday/canvas-kit-react/button").TertiaryButtonProps, {
+    state: {
+        inputRef: React.RefObject<HTMLInputElement>;
+    };
+    events: {};
+}>;
 /**
  * An `InputGroup` is a container around a {@link TextInput} with optional inner start and end
  * elements. The inner start and end elements are usually icons or icon buttons visually represented
@@ -24,27 +79,57 @@ export declare const InputGroupInput: import("@workday/canvas-kit-react/common")
  * </InputGroup>
  * ```
  */
-export declare const InputGroup: import("@workday/canvas-kit-react/common").ElementComponent<"div", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps & React.HTMLAttributes<HTMLDivElement>> & {
+export declare const InputGroup: import("@workday/canvas-kit-react/common").ElementComponentM<"div", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps & Partial<{}> & {} & {}, {
+    state: {
+        inputRef: React.RefObject<HTMLInputElement>;
+    };
+    events: {};
+}> & {
     /**
      * A component to show inside and at the start of the input. The input's padding will be
      * adjusted to not overlap with this element. Use `width` (number of pixels only) to adjust the
      * width offset. The width defaults to 40px which is the correct width for icons or icon
      * buttons.
      */
-    InnerStart: import("@workday/canvas-kit-react/common").ElementComponent<"div", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps & React.HTMLAttributes<HTMLDivElement>>;
+    InnerStart: import("@workday/canvas-kit-react/common").ElementComponentM<"div", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps, {
+        state: {
+            inputRef: React.RefObject<HTMLInputElement>;
+        };
+        events: {};
+    }>;
     /**
      * The input to render. By default, this is a {@link TextInput}. Use the `as` prop to change the
      * component to be rendered.
      */
-    Input: import("@workday/canvas-kit-react/common").ElementComponent<import("@workday/canvas-kit-react/common").ElementComponent<"input", import("./TextInput").TextInputProps> & {
+    Input: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"input", import("./TextInput").TextInputProps> & {
         ErrorType: typeof import("@workday/canvas-kit-react/common").ErrorType;
-    }, Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps & React.HTMLAttributes<HTMLDivElement>>;
+    }, Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps, {
+        state: {
+            inputRef: React.RefObject<HTMLInputElement>;
+        };
+        events: {};
+    }>;
     /**
      * A component to show inside and at the end of the input. The input's padding will be adjusted
      * to not overlap with this element. Use `width` (number of pixels only) to adjust the width
      * offset. The width defaults to 40px which is the correct width for icons or icon buttons
      * within the input.
      */
-    InnerEnd: import("@workday/canvas-kit-react/common").ElementComponent<"div", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps & React.HTMLAttributes<HTMLDivElement>>;
+    InnerEnd: import("@workday/canvas-kit-react/common").ElementComponentM<"div", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps, {
+        state: {
+            inputRef: React.RefObject<HTMLInputElement>;
+        };
+        events: {};
+    }>;
+    /**
+     * A component that can be added to an input group that will clear the input. It will only render
+     * when the input has a value and will fade when a value is entered.
+     */
+    ClearButton: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"button", import("@workday/canvas-kit-react/button").TertiaryButtonProps>, import("@workday/canvas-kit-react/button").TertiaryButtonProps, {
+        state: {
+            inputRef: React.RefObject<HTMLInputElement>;
+        };
+        events: {};
+    }>;
 };
 //# sourceMappingURL=InputGroup.d.ts.map

package/dist/es6/text-input/lib/InputGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/InputGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,eAAO,MAAM,oBAAoB,6OAe/B,CAAC;AAEH,eAAO,MAAM,kBAAkB,6OAe7B,CAAC;AAEH,eAAO,MAAM,eAAe;;2KAI1B,CAAC;AAmBH;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,UAAU;IA8DnB;;;;;OAKG;;IAEH;;;OAGG;;;;IAEH;;;;;OAKG;;CAGL,CAAC"}
+{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/InputGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAmB1B,eAAO,MAAM,kBAAkB;;;;;;;;;;;;EAS7B,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;EAc/B,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;EAc7B,CAAC;AAUH,eAAO,MAAM,eAAe;;;;;;;EAK1B,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;kCAwBJ,gBAAgB;;;;;;EAYrC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,WAAW;;;;;EAKtB,CAAC;AAmBH;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,UAAU;;;;;;IAInB;;;;;OAKG;;;;;;;IAEH;;;OAGG;;;;;;;;;IAEH;;;;;OAKG;;;;;;;IAEH;;;OAGG;;;;;;;CA6DL,CAAC"}

package/dist/es6/text-input/lib/InputGroup.js

@@ -1,22 +1,83 @@
 import React from 'react';
 import { space } from '@workday/canvas-kit-react/tokens';
-import { createComponent, useIsRTL } from '@workday/canvas-kit-react/common';
+import { createContainer, createElemPropsHook, createModelHook, createSubcomponent, dispatchInputEvent, useForkRef, useIsRTL, } from '@workday/canvas-kit-react/common';
 import { Flex } from '@workday/canvas-kit-react/layout';
+import { TertiaryButton } from '@workday/canvas-kit-react/button';
+import { xSmallIcon } from '@workday/canvas-system-icons-web';
 import { TextInput } from './TextInput';
-export const InputGroupInnerStart = createComponent('div')({
-    Component(elemProps, ref, Element) {
-        return (React.createElement(Flex, Object.assign({ ref: ref, as: Element, position: "absolute", alignItems: "center", justifyContent: "center", height: "xl", width: "xl" }, elemProps)));
-    },
+export const useInputGroupModel = createModelHook({})(() => {
+    const inputRef = React.useRef(null);
+    return {
+        state: {
+            inputRef,
+        },
+        events: {},
+    };
 });
-export const InputGroupInnerEnd = createComponent('div')({
-    Component(elemProps, ref, Element) {
-        return (React.createElement(Flex, Object.assign({ ref: ref, as: Element, position: "absolute", alignItems: "center", justifyContent: "center", height: "xl", width: "xl" }, elemProps)));
-    },
+export const InputGroupInnerStart = createSubcomponent('div')({
+    modelHook: useInputGroupModel,
+})((elemProps, Element) => {
+    return (React.createElement(Flex, Object.assign({ as: Element, position: "absolute", alignItems: "center", justifyContent: "center", height: "xl", width: "xl" }, elemProps)));
 });
-export const InputGroupInput = createComponent(TextInput)({
-    Component(elemProps, ref, Element) {
-        return React.createElement(Flex, Object.assign({ ref: ref, as: Element, width: "100%" }, elemProps));
-    },
+export const InputGroupInnerEnd = createSubcomponent('div')({
+    modelHook: useInputGroupModel,
+})((elemProps, Element) => {
+    return (React.createElement(Flex, Object.assign({ as: Element, position: "absolute", alignItems: "center", justifyContent: "center", height: "xl", width: "xl" }, elemProps)));
+});
+const useInputGroupInput = createElemPropsHook(useInputGroupModel)((model, ref) => {
+    const elementRef = useForkRef(ref, model.state.inputRef);
+    return {
+        ref: elementRef,
+    };
+});
+export const InputGroupInput = createSubcomponent(TextInput)({
+    modelHook: useInputGroupModel,
+    elemPropsHook: useInputGroupInput,
+})((elemProps, Element) => {
+    return React.createElement(Flex, Object.assign({ as: Element, width: "100%" }, elemProps));
+});
+export const useClearButton = createElemPropsHook(useInputGroupModel)(model => {
+    const [inputHasValue, setInputHasValue] = React.useState(false);
+    React.useLayoutEffect(() => {
+        const input = model.state.inputRef.current;
+        if (input) {
+            input.addEventListener('input', () => {
+                setInputHasValue(!!input.value);
+            });
+        }
+    }, [model.state.inputRef]);
+    return {
+        // This element does not need to be accessible via screen reader. The user can already clear
+        // an input
+        role: 'presentation',
+        // A clear input button doesn't need focus. There's already keyboard keys to clear an input
+        tabIndex: -1,
+        icon: xSmallIcon,
+        // "small" is needed to render correctly within a `TextInput`
+        size: 'small',
+        transition: 'opacity 300ms ease',
+        // prevent a focus change to the button. Focus should stay in the input.
+        onMouseDown(event) {
+            event.preventDefault();
+        },
+        onClick() {
+            // This will clear the input's value
+            dispatchInputEvent(model.state.inputRef.current, '');
+        },
+        style: {
+            opacity: inputHasValue ? 1 : 0,
+            pointerEvents: inputHasValue ? 'auto' : 'none',
+        },
+    };
+});
+/**
+ * A clear input button. This can be a component later.
+ */
+export const ClearButton = createSubcomponent(TertiaryButton)({
+    modelHook: useInputGroupModel,
+    elemPropsHook: useClearButton,
+})((elemProps, Element) => {
+    return React.createElement(Element, Object.assign({}, elemProps));
 });
 // make sure we always use pixels if the input is a number - this is required for `calc`
 const toPx = (input) => {
@@ -53,57 +114,9 @@ const wrapInCalc = (values) => {
  * </InputGroup>
  * ```
  */
-export const InputGroup = createComponent('div')({
+export const InputGroup = createContainer('div')({
     displayName: 'InputGroup',
-    Component({ children, ...elemProps }, ref, Element) {
-        const isRTL = useIsRTL();
-        const offsetsStart = [];
-        const offsetsEnd = [];
-        // Collect the widths of the `InnerStart` and `InnerEnd` components into `offsetStart` and
-        // `offsetEnd` arrays
-        React.Children.forEach(children, child => {
-            if (React.isValidElement(child) && child.type === InputGroupInnerStart) {
-                const width = child.props.width || space.xl;
-                offsetsStart.push(width);
-            }
-            if (React.isValidElement(child) && child.type === InputGroupInnerEnd) {
-                const width = child.props.width || space.xl;
-                offsetsEnd.push(width);
-            }
-        });
-        // keep track of the index offsets to make sure we calculate the correct position offset
-        let indexStart = 0;
-        let indexEnd = 0;
-        // Loop over all the children and set the correct padding and positions
-        const mappedChildren = React.Children.map(children, child => {
-            if (React.isValidElement(child)) {
-                if (child.type === InputGroupInput) {
-                    return React.cloneElement(child, {
-                        paddingInlineStart: wrapInCalc(offsetsStart),
-                        paddingInlineEnd: wrapInCalc(offsetsEnd),
-                    });
-                }
-                if (child.type === InputGroupInnerStart) {
-                    const offset = wrapInCalc(offsetsStart.slice(0, indexStart)) || 0;
-                    indexStart++;
-                    return React.cloneElement(child, {
-                        left: isRTL ? undefined : offset,
-                        right: isRTL ? offset : undefined,
-                    });
-                }
-                if (child.type === InputGroupInnerEnd) {
-                    const offset = wrapInCalc(offsetsEnd.slice(indexEnd, -1)) || 0;
-                    indexEnd++;
-                    return React.cloneElement(child, {
-                        left: isRTL ? offset : undefined,
-                        right: isRTL ? undefined : offset,
-                    });
-                }
-            }
-            return child;
-        });
-        return (React.createElement(Flex, Object.assign({ ref: ref, as: Element, position: "relative" }, elemProps), mappedChildren));
-    },
+    modelHook: useInputGroupModel,
     subComponents: {
         /**
          * A component to show inside and at the start of the input. The input's padding will be
@@ -124,5 +137,58 @@ export const InputGroup = createComponent('div')({
          * within the input.
          */
         InnerEnd: InputGroupInnerEnd,
+        /**
+         * A component that can be added to an input group that will clear the input. It will only render
+         * when the input has a value and will fade when a value is entered.
+         */
+        ClearButton: ClearButton,
     },
+})(({ children, ...elemProps }, Element) => {
+    const isRTL = useIsRTL();
+    const offsetsStart = [];
+    const offsetsEnd = [];
+    // Collect the widths of the `InnerStart` and `InnerEnd` components into `offsetStart` and
+    // `offsetEnd` arrays
+    React.Children.forEach(children, child => {
+        if (React.isValidElement(child) && child.type === InputGroupInnerStart) {
+            const width = child.props.width || space.xl;
+            offsetsStart.push(width);
+        }
+        if (React.isValidElement(child) && child.type === InputGroupInnerEnd) {
+            const width = child.props.width || space.xl;
+            offsetsEnd.push(width);
+        }
+    });
+    // keep track of the index offsets to make sure we calculate the correct position offset
+    let indexStart = 0;
+    let indexEnd = 0;
+    // Loop over all the children and set the correct padding and positions
+    const mappedChildren = React.Children.map(children, child => {
+        if (React.isValidElement(child)) {
+            if (child.type === InputGroupInput) {
+                return React.cloneElement(child, {
+                    paddingInlineStart: wrapInCalc(offsetsStart),
+                    paddingInlineEnd: wrapInCalc(offsetsEnd),
+                });
+            }
+            if (child.type === InputGroupInnerStart) {
+                const offset = wrapInCalc(offsetsStart.slice(0, indexStart)) || 0;
+                indexStart++;
+                return React.cloneElement(child, {
+                    left: isRTL ? undefined : offset,
+                    right: isRTL ? offset : undefined,
+                });
+            }
+            if (child.type === InputGroupInnerEnd) {
+                const offset = wrapInCalc(offsetsEnd.slice(indexEnd, -1)) || 0;
+                indexEnd++;
+                return React.cloneElement(child, {
+                    left: isRTL ? offset : undefined,
+                    right: isRTL ? undefined : offset,
+                });
+            }
+        }
+        return child;
+    });
+    return (React.createElement(Flex, Object.assign({ as: Element, position: "relative" }, elemProps), mappedChildren));
 });

package/index.ts

@@ -8,6 +8,7 @@ export * from './card';
 export * from './checkbox';
 export * from './collection';
 export * from './color-picker';
+export * from './combobox';
 export * from './common';
 export * from './dialog';
 export * from './disclosure';

package/menu/index.ts

@@ -2,7 +2,7 @@ export {useMenuModel} from './lib/useMenuModel';
 export {Menu} from './lib/Menu';
 
 export {useMenuCard} from './lib/MenuCard';
-export {useMenuItem} from './lib/MenuItem';
+export {useMenuItem, StyledMenuItem} from './lib/MenuItem';
 export {useMenuList} from './lib/MenuList';
 export {useMenuPopper} from './lib/MenuPopper';
 export {useMenuTarget, useMenuTargetContext} from './lib/MenuTarget';

package/menu/lib/Menu.tsx

@@ -83,7 +83,7 @@ export const Menu = createContainer()({
      *   return (
      *     <Menu model={model}>
      *       <Menu.List>
-     *         {(item) => <Menu.Item name={item.id}>{item.text}</Menu.Item>}
+     *         {(item) => <Menu.Item data-id={item.id}>{item.text}</Menu.Item>}
      *       </Menu.List>
      *     </Menu>
      *   )
@@ -92,9 +92,11 @@ export const Menu = createContainer()({
      */
     List: MenuList,
     /**
-     * A menu item has an optional `name` prop that identifies the item in the menu list and will be
-     * passed to the optional `onSelect` callback of the menu model. A menu item can contain any
-     * HTML. If more complex HTML is provided, consider
+     * A `Menu.Item` has an optional `data-id` prop that identifies the item in the `Menu.List` and
+     * will be passed to the optional `onSelect` callback of the `Menu` model. A `Menu.Item` can
+     * contain any HTML. If more complex HTML is provided, add `data-text` to the `Menu.Item`
+     * component if using the static API. If you're using the dynamic API, pass `getTextValue` to
+     * the model.
      */
     Item: MenuItem,
     Divider: MenuDivider,

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.418-next.20+fbc6e240",
+  "version": "9.0.0-alpha.420-next.22+87587db5",
   "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.418-next.20+fbc6e240",
+    "@workday/canvas-kit-popup-stack": "^9.0.0-alpha.420-next.22+87587db5",
     "@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": "fbc6e240f8596001531f9f5374943f2f7afa49ec"
+  "gitHead": "87587db5b8bc197a9b1a544d8851b884848647e9"
 }

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;