@workday/canvas-kit-react 8.0.0-alpha.253-next.22 → 8.0.0-alpha.428-next.2

package/dist/commonjs/menu/lib/MenuDivider.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -34,20 +23,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuDivider = void 0;
-var React = __importStar(require("react"));
-var styled_1 = __importDefault(require("@emotion/styled"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_1 = require("@workday/canvas-kit-react/common");
-var Divider = styled_1.default('hr')({
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const common_1 = require("@workday/canvas-kit-react/common");
+const Divider = styled_1.default('hr')({
     display: 'block',
     height: 1,
     border: 0,
-    borderTop: "1px solid " + tokens_1.colors.soap400,
-    margin: tokens_1.space.xxs + " 0",
+    borderTop: `1px solid ${tokens_1.colors.soap400}`,
+    margin: `${tokens_1.space.xxs} 0`,
 });
 exports.MenuDivider = common_1.createComponent('hr')({
     displayName: 'Menu.Divider',
-    Component: function (elemProps, ref, Element) {
-        return React.createElement(Divider, __assign({ as: Element, ref: ref }, elemProps));
+    Component(elemProps, ref, Element) {
+        return React.createElement(Divider, Object.assign({ as: Element, ref: ref }, elemProps));
     },
 });

package/dist/commonjs/menu/lib/MenuItem.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { StyledType } from '@workday/canvas-kit-react/common';
 export interface MenuItemProps {
     /**
      * Optionally pass index to menu item. This should be done if `Menu.Item` components were created
@@ -18,10 +19,28 @@ export interface MenuItemProps {
     'data-id'?: string;
     'aria-disabled'?: boolean;
 }
-export declare const useMenuItem: <P extends {}, R>(model: {
+export declare const StyledMenuItem: import("@emotion/styled").StyledComponent<import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "left" | "right" | "top" | "bottom" | "fill" | "as" | "color" | "resize" | "width" | "height" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "inset" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "stroke" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY"> & {
+    ref?: React.Ref<HTMLButtonElement> | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & StyledType, {}, {}>;
+export declare const useMenuItem: import("@workday/canvas-kit-react/common").BehaviorHook<{
     state: {
+        stackRef: React.RefObject<HTMLDivElement>;
+        targetRef: React.RefObject<HTMLButtonElement>;
+        initialFocusRef: React.RefObject<any> | undefined;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: "hidden" | "visible";
+        selectedIds: string[] | "all";
+        unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: React.MutableRefObject<number>;
+        cursorIndexRef: {
+            readonly current: number;
+        };
         UNSTABLE_virtual: {
             virtualItems: import("../../collection/lib/react-virtual").VirtualItem[];
             totalSize: number;
@@ -31,18 +50,24 @@ export declare const useMenuItem: <P extends {}, R>(model: {
         };
         UNSTABLE_defaultItemHeight: number;
         containerRef: React.RefObject<HTMLDivElement>;
-        id: string;
-        orientation: import("../../collection/lib/useBaseListModel").Orientation;
+        orientation: "horizontal" | "vertical";
         indexRef: React.MutableRefObject<number>;
         nonInteractiveIds: string[];
         isVirtualized: boolean;
-        items: import("../../collection").Item<any>[];
+        items: import("@workday/canvas-kit-react/collection").Item<any>[];
+        mode: "multiple" | "single";
     };
     events: {
-        registerItem(data: {
-            item: any;
-            textValue: string;
+        updatePlacement(data: {
+            placement: import("@popperjs/core").Placement;
         }): void;
+        show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        select(data: {
+            id: string;
+        }): void;
+        selectAll(): void;
+        unselectAll(): void;
         goTo(data: {
             id: string;
         }): void;
@@ -56,6 +81,10 @@ export declare const useMenuItem: <P extends {}, R>(model: {
         goToLastOfRow(): void;
         goToNextPage(): void;
         goToPreviousPage(): void;
+        registerItem(data: {
+            item: any;
+            textValue: string;
+        }): void;
         unregisterItem(data: {
             id: string;
         }): void;
@@ -63,12 +92,32 @@ export declare const useMenuItem: <P extends {}, R>(model: {
             value: number;
         }): void;
     };
+    selection: import("../../collection/lib/useSelectionListModel").SelectionManager;
     navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
     getId: (item: any) => string;
-}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {} & P & (R extends HTMLOrSVGElement ? {
-    ref: React.Ref<R>;
-} : {});
-export declare const MenuItem: import("../../common").ElementComponentM<"button", MenuItemProps, {
+}, {
+    ref: (instance: HTMLElement | null) => void;
+    role: string;
+    onClick: ((event: React.SyntheticEvent) => void) | undefined;
+} & {
+    onClick: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+} & {
+    onKeyDown(event: React.KeyboardEvent<Element>): void;
+    onClick(): void;
+    'data-focus-id': string;
+    tabIndex: number;
+} & {
+    ref: (instance: HTMLElement | null) => void;
+    'data-id': string;
+    disabled: boolean | undefined;
+    item: null;
+    virtual: null;
+    'aria-setsize': number | undefined;
+    'aria-posinset': number | undefined;
+    style: React.CSSProperties;
+    id: string;
+}>;
+export declare const MenuItem: import("@workday/canvas-kit-react/common").ElementComponentM<"button", MenuItemProps, {
     state: {
         stackRef: React.RefObject<HTMLDivElement>;
         targetRef: React.RefObject<HTMLButtonElement>;
@@ -76,11 +125,15 @@ export declare const MenuItem: import("../../common").ElementComponentM<"button"
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
-        selectedIds: import("../../collection/lib/useSelectionListModel").SelectedIds;
+        visibility: "hidden" | "visible";
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: React.MutableRefObject<number>;
+        cursorIndexRef: {
+            readonly current: number;
+        };
         UNSTABLE_virtual: {
             virtualItems: import("../../collection/lib/react-virtual").VirtualItem[];
             totalSize: number;
@@ -90,11 +143,11 @@ export declare const MenuItem: import("../../common").ElementComponentM<"button"
         };
         UNSTABLE_defaultItemHeight: number;
         containerRef: React.RefObject<HTMLDivElement>;
-        orientation: import("../../collection/lib/useBaseListModel").Orientation;
+        orientation: "horizontal" | "vertical";
         indexRef: React.MutableRefObject<number>;
         nonInteractiveIds: string[];
         isVirtualized: boolean;
-        items: import("../../collection").Item<any>[];
+        items: import("@workday/canvas-kit-react/collection").Item<any>[];
         mode: "multiple" | "single";
     };
     events: {
@@ -108,10 +161,6 @@ export declare const MenuItem: import("../../common").ElementComponentM<"button"
         }): void;
         selectAll(): void;
         unselectAll(): void;
-        registerItem(data: {
-            item: any;
-            textValue: string;
-        }): void;
         goTo(data: {
             id: string;
         }): void;
@@ -125,6 +174,10 @@ export declare const MenuItem: import("../../common").ElementComponentM<"button"
         goToLastOfRow(): void;
         goToNextPage(): void;
         goToPreviousPage(): void;
+        registerItem(data: {
+            item: any;
+            textValue: string;
+        }): void;
         unregisterItem(data: {
             id: string;
         }): void;
@@ -136,10 +189,14 @@ export declare const MenuItem: import("../../common").ElementComponentM<"button"
     navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
     getId: (item: any) => string;
 }> & {
-    Icon: import("../../common").ElementComponent<"span", import("../../icon").SystemIconProps>;
+    Icon: import("@emotion/styled").StyledComponent<import("@workday/canvas-kit-react/icon").SystemIconProps & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "as" | keyof import("@workday/canvas-kit-react/icon").SystemIconProps> & {
+        ref?: React.Ref<HTMLSpanElement> | undefined;
+    } & {
+        theme?: import("@emotion/react").Theme | undefined;
+    }, {}, {}>;
     Text: import("@emotion/styled").StyledComponent<{
         theme?: import("@emotion/react").Theme | undefined;
-        as?: "symbol" | "object" | "s" | "big" | "link" | "small" | "sub" | "sup" | "circle" | "stop" | "path" | "style" | "map" | "filter" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined;
+        as?: React.ElementType<any> | undefined;
     }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 };
 //# sourceMappingURL=MenuItem.d.ts.map

package/dist/commonjs/menu/lib/MenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsB/B,MAAM,WAAW,aAAa;IAC5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA6FD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAoCvB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBnB,CAAC"}
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAGL,UAAU,EAIX,MAAM,kCAAkC,CAAC;AAY1C,MAAM,WAAW,aAAa;IAC5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc;;;;uBAwF1B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAuBF,MAAM,cAAc;;;;;;;;;;;;;;;;;;EAazC,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBnB,CAAC"}

package/dist/commonjs/menu/lib/MenuItem.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,91 +18,94 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuItem = exports.useMenuItem = void 0;
-var React = __importStar(require("react"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_1 = require("@workday/canvas-kit-react/common");
-var icon_1 = require("@workday/canvas-kit-react/icon");
-var tooltip_1 = require("@workday/canvas-kit-react/tooltip");
-var layout_1 = require("@workday/canvas-kit-react/layout");
-var collection_1 = require("@workday/canvas-kit-react/collection");
-var useMenuModel_1 = require("./useMenuModel");
-var StyledItem = common_1.styled(layout_1.Box.as('button'))(function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return __assign(__assign({}, tokens_1.type.levels.subtext.large), (_b = { '& > *:not(style) ~ *:not(style)': {
-                marginLeft: tokens_1.space.xxs,
-            }, display: 'block', width: '100%', padding: tokens_1.space.xxs + " " + tokens_1.space.s, boxSizing: 'border-box', cursor: 'pointer', color: tokens_1.colors.blackPepper300, borderWidth: 0, textAlign: 'left', transition: 'background-color 80ms, color 80ms', '&:hover, &[aria-selected=true]': {
-                backgroundColor: theme.canvas.palette.primary.lightest,
-                color: tokens_1.colors.blackPepper300,
-                '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-                    fill: tokens_1.iconColors.hover,
-                },
-                '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-                    fill: tokens_1.iconColors.hover,
-                },
-            }, '&:focus': {
-                outline: 'none',
-                backgroundColor: theme.canvas.palette.primary.main,
-                color: tokens_1.typeColors.inverse,
-                '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-                    fill: tokens_1.iconColors.inverse,
-                },
-                '*:hover .wd-icon-fill': {
-                    fill: tokens_1.iconColors.inverse,
-                },
-                '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-                    fill: tokens_1.iconColors.inverse,
-                },
-            } }, _b["[data-whatinput]"] = {
-        backgroundColor: 'inherit',
+exports.MenuItem = exports.useMenuItem = exports.StyledMenuItem = void 0;
+const React = __importStar(require("react"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const common_1 = require("@workday/canvas-kit-react/common");
+const icon_1 = require("@workday/canvas-kit-react/icon");
+const tooltip_1 = require("@workday/canvas-kit-react/tooltip");
+const layout_1 = require("@workday/canvas-kit-react/layout");
+const collection_1 = require("@workday/canvas-kit-react/collection");
+const useMenuModel_1 = require("./useMenuModel");
+exports.StyledMenuItem = common_1.styled(layout_1.Box.as('button'))(({ theme }) => {
+    return {
+        ...tokens_1.type.levels.subtext.large,
+        display: 'grid',
+        alignItems: 'center',
+        width: '100%',
+        gap: tokens_1.space.s,
+        padding: `${tokens_1.space.xxs} ${tokens_1.space.s}`,
+        boxSizing: 'border-box',
+        cursor: 'pointer',
         color: tokens_1.colors.blackPepper300,
+        borderWidth: 0,
+        textAlign: 'left',
+        transition: 'background-color 80ms, color 80ms',
         '&:hover, &[aria-selected=true]': {
             backgroundColor: theme.canvas.palette.primary.lightest,
+            color: tokens_1.colors.blackPepper300,
             '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
                 fill: tokens_1.iconColors.hover,
             },
-        },
-        '&:focus': {
             '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
                 fill: tokens_1.iconColors.hover,
             },
         },
-    }, _b.backgroundColor = 'inherit', _b['&:disabled, &[aria-disabled]'] = {
-        color: tokens_1.colors.licorice100,
-        cursor: 'default',
-        '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-            fill: tokens_1.iconColors.disabled,
-        },
-        '&:focus': {
-            backgroundColor: tokens_1.colors.blueberry200,
+        '&:focus, &.focus': {
+            outline: 'none',
+            backgroundColor: theme.canvas.palette.primary.main,
+            color: tokens_1.typeColors.inverse,
+            '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
+                fill: tokens_1.iconColors.inverse,
+            },
+            '*:hover .wd-icon-fill': {
+                fill: tokens_1.iconColors.inverse,
+            },
             '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-                fill: tokens_1.iconColors.disabled,
+                fill: tokens_1.iconColors.inverse,
             },
         },
-        '&:hover, &[aria-selected=true]': {
-            '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-                fill: tokens_1.iconColors.disabled,
+        // We want the focus styles no matter what
+        [`[data-whatinput]`]: {
+            backgroundColor: 'inherit',
+            color: tokens_1.colors.blackPepper300,
+            '&:hover, &[aria-selected=true]': {
+                backgroundColor: theme.canvas.palette.primary.lightest,
+                '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
+                    fill: tokens_1.iconColors.hover,
+                },
             },
-            '*:hover .wd-icon-fill': {
+            '&:focus, &.focus': {
+                '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+                    fill: tokens_1.iconColors.hover,
+                },
+            },
+        },
+        backgroundColor: 'inherit',
+        '&:disabled, &[aria-disabled=true]': {
+            color: tokens_1.colors.licorice100,
+            cursor: 'default',
+            '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
                 fill: tokens_1.iconColors.disabled,
             },
+            '&:focus, &.focus': {
+                backgroundColor: tokens_1.colors.blueberry200,
+                '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+                    fill: tokens_1.iconColors.disabled,
+                },
+            },
+            '&:hover, &[aria-selected=true]': {
+                '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+                    fill: tokens_1.iconColors.disabled,
+                },
+                '*:hover .wd-icon-fill': {
+                    fill: tokens_1.iconColors.disabled,
+                },
+            },
         },
-    }, _b));
-}, function (_a) {
-    var children = _a.children;
+    };
+}, ({ children }) => {
     if (typeof children === 'string') {
         return {};
     }
@@ -123,30 +115,30 @@ var StyledItem = common_1.styled(layout_1.Box.as('button'))(function (_a) {
         };
     }
 });
-exports.useMenuItem = common_1.composeHooks(common_1.createElemPropsHook(useMenuModel_1.useMenuModel)(function (model, ref, elemProps) {
-    if (elemProps === void 0) { elemProps = { 'data-id': '' }; }
-    var _a = common_1.useLocalRef(ref), localRef = _a.localRef, elementRef = _a.elementRef;
-    var id = elemProps['data-id'];
+exports.useMenuItem = common_1.composeHooks(common_1.createElemPropsHook(useMenuModel_1.useMenuModel)((model, ref, elemProps = { 'data-id': '' }) => {
+    const { localRef, elementRef } = common_1.useLocalRef(ref);
+    const id = elemProps['data-id'];
     // focus on the item with the cursor
-    React.useLayoutEffect(function () {
+    React.useLayoutEffect(() => {
         if (model.state.mode === 'single') {
             if (model.state.cursorId === id) {
                 // delay focus changes to allow PopperJS to position
-                requestAnimationFrame(function () {
-                    localRef.current.focus();
+                requestAnimationFrame(() => {
+                    var _a;
+                    (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.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]);
+    }, [id, localRef, model.state.cursorId, model.state.mode]);
     return {
         ref: elementRef,
         role: 'menuitem',
         onClick: model.state.mode === 'single'
-            ? function (event) {
-                model.events.hide(event);
+            ? (event) => {
+                // only hide if the item isn't disabled
+                if (event.currentTarget.getAttribute('aria-disabled') !== 'true') {
+                    model.events.hide(event);
+                }
             }
             : undefined,
     };
@@ -156,11 +148,10 @@ exports.MenuItem = common_1.createSubcomponent('button')({
     modelHook: useMenuModel_1.useMenuModel,
     elemPropsHook: exports.useMenuItem,
     subComponents: {
-        Icon: icon_1.SystemIcon,
+        Icon: common_1.styled(icon_1.SystemIcon)({ alignSelf: 'start' }),
         Text: common_1.styled('span')({ flexGrow: 1, alignSelf: 'center' }),
     },
-})(function (_a, Element) {
-    var children = _a.children, elemProps = __rest(_a, ["children"]);
+})(({ children, ...elemProps }, Element) => {
     return (React.createElement(tooltip_1.OverflowTooltip, { placement: "left" },
-        React.createElement(StyledItem, __assign({ minHeight: tokens_1.space.xl, as: Element }, elemProps), children)));
+        React.createElement(exports.StyledMenuItem, Object.assign({ minHeight: tokens_1.space.xl, as: Element }, elemProps), children)));
 });

package/dist/commonjs/menu/lib/MenuList.d.ts

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { Stack } from '@workday/canvas-kit-react/layout';
-export interface MenuListProps<T = any> extends Omit<Partial<ExtractProps<typeof Stack, never>>, 'children'> {
+import { ListBox, ListProps } from '@workday/canvas-kit-react/collection';
+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 declare const useMenuList: <P extends {}, R>(model: {
+export declare const useMenuList: import("@workday/canvas-kit-react/common").BehaviorHook<{
     state: {
         stackRef: React.RefObject<HTMLDivElement>;
         targetRef: React.RefObject<HTMLButtonElement>;
@@ -15,11 +15,15 @@ export declare const useMenuList: <P extends {}, R>(model: {
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
-        selectedIds: import("../../collection/lib/useSelectionListModel").SelectedIds;
+        visibility: "hidden" | "visible";
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: React.MutableRefObject<number>;
+        cursorIndexRef: {
+            readonly current: number;
+        };
         UNSTABLE_virtual: {
             virtualItems: import("../../collection/lib/react-virtual").VirtualItem[];
             totalSize: number;
@@ -29,11 +33,11 @@ export declare const useMenuList: <P extends {}, R>(model: {
         };
         UNSTABLE_defaultItemHeight: number;
         containerRef: React.RefObject<HTMLDivElement>;
-        orientation: import("../../collection/lib/useBaseListModel").Orientation;
+        orientation: "horizontal" | "vertical";
         indexRef: React.MutableRefObject<number>;
         nonInteractiveIds: string[];
         isVirtualized: boolean;
-        items: import("../../collection").Item<any>[];
+        items: import("@workday/canvas-kit-react/collection").Item<any>[];
         mode: "multiple" | "single";
     };
     events: {
@@ -47,10 +51,6 @@ export declare const useMenuList: <P extends {}, R>(model: {
         }): void;
         selectAll(): void;
         unselectAll(): void;
-        registerItem(data: {
-            item: any;
-            textValue: string;
-        }): void;
         goTo(data: {
             id: string;
         }): void;
@@ -64,6 +64,10 @@ export declare const useMenuList: <P extends {}, R>(model: {
         goToLastOfRow(): void;
         goToNextPage(): void;
         goToPreviousPage(): void;
+        registerItem(data: {
+            item: any;
+            textValue: string;
+        }): void;
         unregisterItem(data: {
             id: string;
         }): void;
@@ -74,13 +78,11 @@ export declare const useMenuList: <P extends {}, R>(model: {
     selection: import("../../collection/lib/useSelectionListModel").SelectionManager;
     navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
     getId: (item: any) => string;
-}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
+}, {
     role: string;
     'aria-labelledby': string;
-} & P & (R extends HTMLOrSVGElement ? {
-    ref: React.Ref<R>;
-} : {});
-export declare const MenuList: import("../../common").ElementComponentM<"div", MenuListProps<any>, {
+}>;
+export declare const MenuList: import("@workday/canvas-kit-react/common").ElementComponentM<"div", MenuListProps<any>, {
     state: {
         stackRef: React.RefObject<HTMLDivElement>;
         targetRef: React.RefObject<HTMLButtonElement>;
@@ -88,11 +90,15 @@ export declare const MenuList: import("../../common").ElementComponentM<"div", M
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
-        selectedIds: import("../../collection/lib/useSelectionListModel").SelectedIds;
+        visibility: "hidden" | "visible";
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
+        pageSizeRef: React.MutableRefObject<number>;
+        cursorIndexRef: {
+            readonly current: number;
+        };
         UNSTABLE_virtual: {
             virtualItems: import("../../collection/lib/react-virtual").VirtualItem[];
             totalSize: number;
@@ -102,11 +108,11 @@ export declare const MenuList: import("../../common").ElementComponentM<"div", M
         };
         UNSTABLE_defaultItemHeight: number;
         containerRef: React.RefObject<HTMLDivElement>;
-        orientation: import("../../collection/lib/useBaseListModel").Orientation;
+        orientation: "horizontal" | "vertical";
         indexRef: React.MutableRefObject<number>;
         nonInteractiveIds: string[];
         isVirtualized: boolean;
-        items: import("../../collection").Item<any>[];
+        items: import("@workday/canvas-kit-react/collection").Item<any>[];
         mode: "multiple" | "single";
     };
     events: {
@@ -120,10 +126,6 @@ export declare const MenuList: import("../../common").ElementComponentM<"div", M
         }): void;
         selectAll(): void;
         unselectAll(): void;
-        registerItem(data: {
-            item: any;
-            textValue: string;
-        }): void;
         goTo(data: {
             id: string;
         }): void;
@@ -137,6 +139,10 @@ export declare const MenuList: import("../../common").ElementComponentM<"div", M
         goToLastOfRow(): void;
         goToNextPage(): void;
         goToPreviousPage(): void;
+        registerItem(data: {
+            item: any;
+            textValue: string;
+        }): void;
         unregisterItem(data: {
             id: string;
         }): void;

package/dist/commonjs/menu/lib/MenuList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAGL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,KAAK,EAAC,MAAM,kCAAkC,CAAC;AAIvD,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,GAAG,CACpC,SAAQ,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC;IACpE;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CAC5D;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAKtB,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqBnB,CAAC"}
+{"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAGL,YAAY,EAEb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,OAAO,EAAE,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAKxE,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,GAAG,CACpC,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,OAAO,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IAC7D;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;CACpC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASvB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqBnB,CAAC"}