@workday/canvas-kit-preview-react 7.1.4 → 7.2.0-427-next.2

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../menu/lib/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,aAAa,EAAC,MAAM,YAAY,CAAC;AAGzC,OAAO,EAAiB,cAAc,EAAmB,MAAM,kCAAkC,CAAC;AAElG,MAAM,WAAW,SAAU,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACvF;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;IACnF;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,SAAS;IACxB,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAaD,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,KAAK,CAAC,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC;IACrE,OAAO,CAAC,EAAE,CAAsB;IAChC,OAAO,CAAC,SAAS,CAAU;IAE3B,OAAO,CAAC,OAAO,CAAoC;IACnD,OAAO,CAAC,eAAe,CAAY;gBAEvB,KAAK,EAAE,SAAS;IAe5B,kBAAkB,CAAC,SAAS,EAAE,SAAS;IAevC,iBAAiB;IAKjB,oBAAoB;IAIb,MAAM;IAmDN,sBAAsB,UAAW,MAAM,GAAG,SAAS,KAAG,MAAM,CAQjE;IAEK,sBAAsB,UAAW,MAAM,GAAG,SAAS,KAAG,IAAI,CAE/D;IAEF,OAAO,CAAC,uBAAuB,CA4E7B;IAEF,OAAO,CAAC,WAAW,CAoBjB;IAEF,OAAO,CAAC,kBAAkB,CAWxB;IAEF,OAAO,CAAC,kBAAkB,CA+BxB;IAEF,OAAO,CAAC,sBAAsB,CAU5B;IAEF,OAAO,CAAC,sBAAsB,CAG5B;CACH"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../menu/lib/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,uBAAuB,EAAC,MAAM,YAAY,CAAC;AAGnD,OAAO,EAAiB,cAAc,EAAmB,MAAM,kCAAkC,CAAC;AAElG;;;;;;;GAOG;AACH,MAAM,WAAW,mBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACxC;;OAEG;IACH,QAAQ,CAAC,EACL,KAAK,CAAC,YAAY,CAAC,uBAAuB,CAAC,GAC3C,KAAK,CAAC,YAAY,CAAC,uBAAuB,CAAC,EAAE,CAAC;IAClD;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAaD;;;;;;;;;;;;;;GAcG;AACH,qBAAa,cAAe,SAAQ,KAAK,CAAC,SAAS,CAAC,mBAAmB,EAAE,mBAAmB,CAAC;IAC3F,OAAO,CAAC,EAAE,CAAsB;IAChC,OAAO,CAAC,SAAS,CAAU;IAE3B,OAAO,CAAC,OAAO,CAAoC;IACnD,OAAO,CAAC,eAAe,CAAY;gBAEvB,KAAK,EAAE,mBAAmB;IAetC,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;IAejD,iBAAiB;IAYjB,oBAAoB;IAIb,MAAM;IAyDN,sBAAsB,UAAW,MAAM,GAAG,SAAS,KAAG,MAAM,CAQjE;IAEK,sBAAsB,UAAW,MAAM,GAAG,SAAS,KAAG,IAAI,CAE/D;IAEF,OAAO,CAAC,uBAAuB,CA+E7B;IAEF,OAAO,CAAC,WAAW,CAoBjB;IAEF,OAAO,CAAC,kBAAkB,CAWxB;IAEF,OAAO,CAAC,kBAAkB,CAkCxB;IAEF,OAAO,CAAC,sBAAsB,CAU5B;IAEF,OAAO,CAAC,sBAAsB,CAG5B;CACH"}

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

@@ -1,28 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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]; } });
@@ -42,65 +18,80 @@ 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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var React = __importStar(require("react"));
-var styled_1 = __importDefault(require("@emotion/styled"));
-var card_1 = require("@workday/canvas-kit-react/card");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_1 = require("@workday/canvas-kit-react/common");
-var List = styled_1.default('ul')(__assign({ background: tokens_1.commonColors.background, borderRadius: tokens_1.borderRadius.m, padding: 0, margin: tokens_1.space.xxs + " 0", '&:focus': {
+exports.DeprecatedMenu = void 0;
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const card_1 = require("@workday/canvas-kit-react/card");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const common_1 = require("@workday/canvas-kit-react/common");
+const List = styled_1.default('ul')({
+    background: tokens_1.commonColors.background,
+    borderRadius: tokens_1.borderRadius.m,
+    padding: 0,
+    margin: `${tokens_1.space.xxs} 0`,
+    '&:focus': {
         outline: 'none',
-    } }, common_1.hideMouseFocus));
-var Menu = /** @class */ (function (_super) {
-    __extends(Menu, _super);
-    function Menu(props) {
-        var _this = _super.call(this, props) || this;
-        _this.id = common_1.generateUniqueId();
-        _this.getNormalizedItemIndex = function (index) {
-            var itemCount = React.Children.count(_this.props.children);
-            var firstItem = 0;
-            var lastItem = itemCount - 1;
+    },
+    ...common_1.hideMouseFocus,
+});
+/**
+ * As of Canvas Kit v8, Menu is being deprecated.
+ * It will be removed in v10. Please see the [upgrade
+ * guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page) for
+ * more information.
+ *
+ * `DeprecatedMenu` renders a styled `<ul role="menu">` element within a {@link Card} and follows
+ * the [Active Menu
+ * pattern](https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-actions-active-descendant.html)
+ * using `aria-activedescendant`.
+ *
+ * Undocumented props are spread to the underlying `<ul>` element.
+ *
+ * @deprecated
+ */
+class DeprecatedMenu extends React.Component {
+    constructor(props) {
+        super(props);
+        this.id = common_1.generateUniqueId();
+        this.getNormalizedItemIndex = (index) => {
+            const itemCount = React.Children.count(this.props.children);
+            const firstItem = 0;
+            const lastItem = itemCount - 1;
             if (!index) {
                 return firstItem;
             }
             return index < 0 ? firstItem : index >= itemCount ? lastItem : index;
         };
-        _this.setNormalizedItemIndex = function (index) {
-            _this.setState({ selectedItemIndex: _this.getNormalizedItemIndex(index) });
+        this.setNormalizedItemIndex = (index) => {
+            this.setState({ selectedItemIndex: this.getNormalizedItemIndex(index) });
         };
-        _this.handleKeyboardShortcuts = function (event) {
+        this.handleKeyboardShortcuts = (event) => {
             if (event.ctrlKey || event.altKey || event.metaKey) {
                 return;
             }
-            var children = React.Children.toArray(_this.props.children);
-            var nextSelectedIndex = 0;
-            var isShortcut = false;
-            var itemCount = children.length;
-            var firstItem = 0;
-            var lastItem = itemCount - 1;
+            const children = React.Children.toArray(this.props.children);
+            let nextSelectedIndex = 0;
+            let isShortcut = false;
+            const interactiveItems = children.filter(child => {
+                var _a, _b;
+                return !((_b = (_a = child) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.isHeader);
+            });
+            const interactiveItemCount = interactiveItems.length;
+            const firstIndex = 0;
+            const lastIndex = interactiveItemCount - 1;
             if (event.key.length === 1 && event.key.match(/\S/)) {
-                var start = _this.state.selectedItemIndex + 1;
-                var searchIndex = void 0;
+                let start = this.state.selectedItemIndex + 1;
+                let searchIndex;
                 if (start === children.length) {
                     start = 0;
                 }
-                searchIndex = _this.getIndexFirstChars(start, event.key.toLowerCase());
+                searchIndex = this.getIndexFirstChars(start, event.key.toLowerCase());
                 if (searchIndex === -1) {
-                    searchIndex = _this.getIndexFirstChars(0, event.key.toLowerCase(), start);
+                    searchIndex = this.getIndexFirstChars(0, event.key.toLowerCase(), start);
                 }
                 if (searchIndex > -1) {
                     isShortcut = true;
@@ -111,80 +102,77 @@ var Menu = /** @class */ (function (_super) {
                 switch (event.key) {
                     case 'ArrowUp':
                     case 'ArrowDown':
-                    case 'Down': // IE/Edge specific value
-                    case 'Up': // IE/Edge specific value
-                        var direction = event.key === 'ArrowUp' ? -1 : 1;
+                        const direction = event.key === 'ArrowUp' ? -1 : 1;
                         isShortcut = true;
-                        var nextIndex = _this.state.selectedItemIndex + direction;
+                        const nextIndex = this.state.selectedItemIndex + direction;
                         nextSelectedIndex =
-                            nextIndex < 0 ? lastItem : nextIndex >= itemCount ? firstItem : nextIndex;
+                            nextIndex < 0 ? lastIndex : nextIndex >= interactiveItemCount ? firstIndex : nextIndex;
                         break;
                     case 'Home':
                     case 'End':
-                        var skipTo = event.key === 'Home' ? firstItem : lastItem;
+                        const skipTo = event.key === 'Home' ? firstIndex : lastIndex;
                         isShortcut = true;
                         nextSelectedIndex = skipTo;
                         break;
                     case 'Tab':
-                        if (_this.props.onClose) {
-                            _this.props.onClose();
+                        if (this.props.onClose) {
+                            this.props.onClose();
                         }
                         break;
                     case 'Escape':
                     case 'Esc': // IE/Edge specific value
                         isShortcut = true;
-                        if (_this.props.onClose) {
-                            _this.props.onClose();
+                        if (this.props.onClose) {
+                            this.props.onClose();
                         }
                         break;
                     case 'Spacebar':
                     case ' ':
                     case 'Enter':
-                        nextSelectedIndex = _this.state.selectedItemIndex;
-                        var child = children[_this.state.selectedItemIndex];
-                        _this.handleClick(event, child.props);
+                        nextSelectedIndex = this.state.selectedItemIndex;
+                        const child = interactiveItems[this.state.selectedItemIndex];
+                        this.handleClick(event, child.props);
                         isShortcut = true;
                         break;
                     default:
                 }
             }
             if (isShortcut) {
-                _this.setNormalizedItemIndex(nextSelectedIndex);
+                this.setNormalizedItemIndex(nextSelectedIndex);
                 event.stopPropagation();
                 event.preventDefault();
             }
         };
-        _this.handleClick = function (event, menuItemProps) {
+        this.handleClick = (event, menuItemProps) => {
             /* istanbul ignore next line for coverage */
             if (menuItemProps.isDisabled) {
-                // You should only hit this point if you are using a custom MenuItem implementation.
+                // You should only hit this point if you are using a custom DeprecatedMenuItem implementation.
                 return;
             }
             if (menuItemProps.onClick) {
                 menuItemProps.onClick(event);
             }
-            if (_this.props.onSelect) {
-                _this.props.onSelect();
+            if (this.props.onSelect) {
+                this.props.onSelect();
             }
-            if (_this.props.onClose) {
+            if (this.props.onClose) {
                 if (menuItemProps.shouldClose) {
-                    _this.props.onClose();
+                    this.props.onClose();
                 }
             }
         };
-        _this.getIndexFirstChars = function (startIndex, character, lastIndex) {
-            if (lastIndex === void 0) { lastIndex = _this.firstCharacters.length; }
-            for (var i = startIndex; i < lastIndex; i++) {
-                if (character === _this.firstCharacters[i]) {
+        this.getIndexFirstChars = (startIndex, character, lastIndex = this.firstCharacters.length) => {
+            for (let i = startIndex; i < lastIndex; i++) {
+                if (character === this.firstCharacters[i]) {
                     return i;
                 }
             }
             return -1;
         };
-        _this.setFirstCharacters = function () {
-            var getFirstCharacter = function (child) {
-                var character = '';
-                if (!child || typeof child === 'boolean' || child === {}) {
+        this.setFirstCharacters = () => {
+            const getFirstCharacter = (child) => {
+                let character = '';
+                if (!child || typeof child === 'boolean') {
                     character = '';
                 }
                 else if (typeof child === 'string' || typeof child === 'number') {
@@ -199,7 +187,7 @@ var Menu = /** @class */ (function (_super) {
                     character = getFirstCharacter(child[0]);
                 }
                 else if ('props' in child) {
-                    var children = child.props.children;
+                    const { children } = child.props;
                     if (Array.isArray(children)) {
                         character = getFirstCharacter(children[0]);
                     }
@@ -209,39 +197,41 @@ var Menu = /** @class */ (function (_super) {
                 }
                 return character;
             };
-            var firstCharacters = React.Children.map(_this.props.children, function (child) {
+            const firstCharacters = React.Children.map(this.props.children, child => {
+                var _a, _b;
+                if ((_b = (_a = child) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.isHeader) {
+                    return;
+                }
                 return getFirstCharacter(child);
             });
-            _this.firstCharacters = firstCharacters;
+            this.firstCharacters = firstCharacters;
         };
-        _this.getInitialSelectedItem = function () {
-            var selected = _this.props.initialSelectedItem || 0;
-            selected = selected < 0 ? React.Children.count(_this.props.children) + selected : selected;
+        this.getInitialSelectedItem = () => {
+            let selected = this.props.initialSelectedItem || 0;
+            selected = selected < 0 ? React.Children.count(this.props.children) + selected : selected;
             if (selected < 0) {
                 selected = 0;
             }
-            else if (selected > React.Children.count(_this.props.children) - 1) {
-                selected = React.Children.count(_this.props.children) - 1;
+            else if (selected > React.Children.count(this.props.children) - 1) {
+                selected = React.Children.count(this.props.children) - 1;
             }
             return selected;
         };
-        _this.setInitialSelectedItem = function () {
-            var selected = _this.getInitialSelectedItem();
-            _this.setState({ selectedItemIndex: selected });
+        this.setInitialSelectedItem = () => {
+            const selected = this.getInitialSelectedItem();
+            this.setState({ selectedItemIndex: selected });
         };
-        _this.menuRef = React.createRef();
-        var selected = _this.getInitialSelectedItem();
+        this.menuRef = React.createRef();
+        const selected = this.getInitialSelectedItem();
         // We track the active menu item by index so we can avoid setting a bunch of refs
         // for doing things like selecting an item by first character (or really calling .focus() at all)
         // It allows us to use the activedescendant design pattern
         // https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-actions-active-descendant.html
-        _this.state = {
+        this.state = {
             selectedItemIndex: selected,
         };
-        return _this;
     }
-    Menu.prototype.componentDidUpdate = function (prevProps) {
-        var _this = this;
+    componentDidUpdate(prevProps) {
         if (this.props.children !== prevProps.children) {
             this.setFirstCharacters();
             this.setInitialSelectedItem();
@@ -249,39 +239,46 @@ var Menu = /** @class */ (function (_super) {
         if (this.props.isOpen && !prevProps.isOpen) {
             this.setInitialSelectedItem();
         }
-        this.animateId = requestAnimationFrame(function () {
-            if (_this.props.isOpen && _this.menuRef.current) {
-                _this.menuRef.current.focus();
+        this.animateId = requestAnimationFrame(() => {
+            if (this.props.isOpen && this.menuRef.current) {
+                this.menuRef.current.focus();
             }
         });
-    };
-    Menu.prototype.componentDidMount = function () {
+    }
+    componentDidMount() {
+        console.warn(`This component is being deprecated and will be removed in Canvas Kit V9.\n
+      For more information, please see the V8 upgrade guide:\n
+      https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page
+      `);
         this.setFirstCharacters();
         this.setInitialSelectedItem();
-    };
-    Menu.prototype.componentWillUnmount = function () {
+    }
+    componentWillUnmount() {
         cancelAnimationFrame(this.animateId);
-    };
-    Menu.prototype.render = function () {
-        var _this = this;
+    }
+    render() {
         // TODO: Standardize on prop spread location (see #150)
-        var _a = this.props, _b = _a.id, id = _b === void 0 ? this.id : _b, _c = _a.isOpen, isOpen = _c === void 0 ? true : _c, children = _a.children, ariaLabelledby = _a["aria-labelledby"], grow = _a.grow, width = _a.width, onSelect = _a.onSelect, onClose = _a.onClose, initialSelectedItem = _a.initialSelectedItem, elemProps = __rest(_a, ["id", "isOpen", "children", 'aria-labelledby', "grow", "width", "onSelect", "onClose", "initialSelectedItem"]);
-        var selectedItemIndex = this.state.selectedItemIndex;
-        var cardWidth = grow ? '100%' : width;
+        const { id = this.id, isOpen = true, children, 'aria-labelledby': ariaLabelledby, grow, width, onSelect, onClose, initialSelectedItem, ...elemProps } = this.props;
+        const { selectedItemIndex } = this.state;
+        const cardWidth = grow ? '100%' : width;
+        let interactiveItemIndex = null;
         return (React.createElement(card_1.Card, { display: "inline-block", padding: tokens_1.space.zero, width: cardWidth, depth: 3 },
             React.createElement(card_1.Card.Body, null,
-                React.createElement(List, __assign({ role: "menu", tabIndex: 0, id: id, "aria-labelledby": ariaLabelledby, "aria-activedescendant": id + "-" + selectedItemIndex, onKeyDown: this.handleKeyboardShortcuts, ref: this.menuRef }, elemProps), React.Children.map(children, function (menuItem, index) {
+                React.createElement(List, Object.assign({ role: "menu", tabIndex: 0, id: id, "aria-labelledby": ariaLabelledby, "aria-activedescendant": `${id}-${selectedItemIndex}`, onKeyDown: this.handleKeyboardShortcuts, ref: this.menuRef }, elemProps), React.Children.map(children, menuItem => {
                     if (!React.isValidElement(menuItem)) {
                         return;
                     }
-                    var itemId = id + "-" + index;
+                    let itemId;
+                    if (!menuItem.props.isHeader) {
+                        interactiveItemIndex = (interactiveItemIndex !== null && interactiveItemIndex !== void 0 ? interactiveItemIndex : -1) + 1;
+                        itemId = `${id}-${interactiveItemIndex}`;
+                    }
                     return (React.createElement(React.Fragment, { key: itemId }, React.cloneElement(menuItem, {
-                        onClick: function (event) { return _this.handleClick(event, menuItem.props); },
+                        onClick: (event) => this.handleClick(event, menuItem.props),
                         id: itemId,
-                        isFocused: selectedItemIndex === index,
+                        isFocused: selectedItemIndex === interactiveItemIndex && !menuItem.props.isHeader,
                     })));
                 })))));
-    };
-    return Menu;
-}(React.Component));
-exports.default = Menu;
+    }
+}
+exports.DeprecatedMenu = DeprecatedMenu;

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

@@ -1,53 +1,84 @@
 import * as React from 'react';
 import { CanvasSystemIcon } from '@workday/design-assets-types';
-export interface MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+/**
+ * ### Deprecated Menu Item Props
+ *
+ * As of Canvas Kit v8, Menu is being deprecated.
+ * It will be removed in v10. Please see the
+ * [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
+ * for more information.
+ */
+export interface DeprecatedMenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
     /**
-     * The function called when the MenuItem is clicked. If the item is a child of the Menu component, this callback will be decorated with the onSelect and onClose Menu callbacks. This callback will not fire if the item is disabled (see below).
+     * The function called when the DeprecatedMenuItem is clicked. If the item is a child of the DeprecatedMenu component, this callback will be decorated with the onSelect and onClose DeprecatedMenu callbacks. This callback will not fire if the item is disabled (see below).
      */
     onClick?: (event: React.MouseEvent) => void;
     /**
-     * The unique id for the MenuItem used for ARIA attributes. If the item is a child of the `Menu` component, this property will be generated and overridden.
+     * The unique id for the DeprecatedMenuItem used for ARIA attributes. If the item is a child of the `DeprecatedMenu` component, this property will be generated and overridden.
      */
     id?: string;
     /**
-     * The icon of the MenuItem. This icon is displayed before what you supplied for the children.
+     * The icon of the DeprecatedMenuItem. This icon is displayed before what you supplied for the children.
      */
     icon?: CanvasSystemIcon;
     /**
-     * The secondary icon of the MenuItem. This icon is displayed after what you supplied for the children.
+     * The secondary icon of the DeprecatedMenuItem. This icon is displayed after what you supplied for the children.
      */
     secondaryIcon?: CanvasSystemIcon;
     /**
-     * If true, render a top border on the MenuItem.
+     * If true, render a top border on the DeprecatedMenuItem.
      * @default false
      */
     hasDivider?: boolean;
     /**
-     * If true, set the MenuItem to the disabled state so it is not clickable.
+     * If true, render a header to group data, this menu item will not be intractable.
+     * @default false
+     */
+    isHeader?: boolean;
+    /**
+     * If true, set the DeprecatedMenuItem to the disabled state so it is not clickable.
      * @default false
      */
     isDisabled?: boolean;
     /**
-     * If true, set the MenuItem to be the currently selected item. If the item is a child of the Menu component, this property will be generated and overridden.
+     * If true, set the DeprecatedMenuItem to be the currently selected item. If the item is a child of the DeprecatedMenu component, this property will be generated and overridden.
      * @default false
      */
     isFocused?: boolean;
     /**
-     * The role of the MenuItem. Use this to override the role of the item (e.g. you can use this element as an option in a Combobox).
+     * The role of the DeprecatedMenuItem. Use this to override the role of the item (e.g. you can use this element as an option in a Combobox).
      * @default menuItem
      */
     role?: string;
     /**
-     * If true, allow the onClose Menu callback to be fired after the MenuItem has been clicked.
+     * If true, allow the onClose DeprecatedMenu callback to be fired after the DeprecatedMenuItem has been clicked.
      * @default true
      */
     shouldClose?: boolean;
 }
-declare class MenuItem extends React.Component<MenuItemProps> {
+/**
+ * `DeprecatedMenuItem` renders an `<li>` element with the correct attributes to ensure it is
+ * accessible. If you choose to implement your own custom menu items, be sure to use semantic `<li>`
+ * elements with the following attributes:
+ *
+ * - `role="menuitem"`
+ * - `tabindex={-1}`
+ * - `id`s following this pattern: `${MenuId}-${index}`
+ *
+ * As of Canvas Kit v8, Menu is being deprecated.
+ * It will be removed in v10. Please see the [upgrade
+ * guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page) for
+ * more information.
+ *
+ * Undocumented props are spread to the underlying `<li>` element.
+ *
+ * @deprecated
+ */
+export declare class DeprecatedMenuItem extends React.Component<DeprecatedMenuItemProps> {
     ref: React.RefObject<HTMLLIElement>;
-    componentDidUpdate: (prevProps: MenuItemProps) => void;
-    render(): React.ReactNode;
+    componentDidMount(): void;
+    componentDidUpdate: (prevProps: DeprecatedMenuItemProps) => void;
+    render(): JSX.Element;
     private handleClick;
 }
-export default MenuItem;
 //# 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;AAU/B,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC;IAC1E;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAwLD,cAAM,QAAS,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;IACnD,GAAG,iCAAoC;IAEvC,kBAAkB,cAAe,aAAa,UAM5C;IAEF,MAAM,IAAI,KAAK,CAAC,SAAS;IAyCzB,OAAO,CAAC,WAAW,CAOjB;CACH;AAcD,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D;;;;;;;GAOG;AACH,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC;IACpF;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA2LD;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,kBAAmB,SAAQ,KAAK,CAAC,SAAS,CAAC,uBAAuB,CAAC;IAC9E,GAAG,iCAAoC;IAEvC,iBAAiB;IASjB,kBAAkB,cAAe,uBAAuB,UAMtD;IAEF,MAAM;IA4CN,OAAO,CAAC,WAAW,CAOjB;CACH"}