@workday/canvas-kit-preview-react 9.0.0-alpha.364-next.3 → 9.0.0-alpha.382-next.2

package/dist/es6/form-field/lib/FormFieldHint.js

@@ -1,40 +1,17 @@
-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 __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;
-};
 import React from 'react';
 import { createSubcomponent, useTheme } from '@workday/canvas-kit-react/common';
 import { space } from '@workday/canvas-kit-react/tokens';
 import { useFormFieldHint, useFormFieldModel } from './hooks';
 import { Subtext } from '@workday/canvas-kit-react/text';
-export var FormFieldHint = createSubcomponent('p')({
+export const FormFieldHint = createSubcomponent('p')({
     displayName: 'FormField.Hint',
     modelHook: useFormFieldModel,
     elemPropsHook: useFormFieldHint,
-})(function (_a, Element, model) {
-    var children = _a.children, elemProps = __rest(_a, ["children"]);
-    var theme = useTheme();
+})(({ children, ...elemProps }, Element, model) => {
+    const theme = useTheme();
     if (!children) {
         // If there is no hint text just skip rendering
         return null;
     }
-    return (React.createElement(Subtext, __assign({ as: Element, size: "medium", color: model.state.hasError ? theme.canvas.palette.error.main : undefined, marginY: space.xxs }, elemProps), children));
+    return (React.createElement(Subtext, Object.assign({ as: Element, size: "medium", color: model.state.hasError ? theme.canvas.palette.error.main : undefined, marginY: space.xxs }, elemProps), children));
 });

package/dist/es6/form-field/lib/FormFieldInput.js

@@ -1,22 +1,11 @@
-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);
-};
 import React from 'react';
 import { createSubcomponent } from '@workday/canvas-kit-react/common';
 import { Box } from '@workday/canvas-kit-react/layout';
 import { useFormFieldInput, useFormFieldModel } from './hooks';
-export var FormFieldInput = createSubcomponent('input')({
+export const FormFieldInput = createSubcomponent('input')({
     displayName: 'FormField.Input',
     modelHook: useFormFieldModel,
     elemPropsHook: useFormFieldInput,
-})(function (elemProps, Element) {
-    return React.createElement(Box, __assign({ as: Element }, elemProps));
+})((elemProps, Element) => {
+    return React.createElement(Box, Object.assign({ as: Element }, elemProps));
 });

package/dist/es6/form-field/lib/FormFieldLabel.js

@@ -1,38 +1,15 @@
-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 __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;
-};
 import React from 'react';
 import { createSubcomponent, useTheme } from '@workday/canvas-kit-react/common';
 import { Flex } from '@workday/canvas-kit-react/layout';
 import { LabelText, Text } from '@workday/canvas-kit-react/text';
 import { useFormFieldLabel, useFormFieldModel } from './hooks';
-export var FormFieldLabel = createSubcomponent('label')({
+export const FormFieldLabel = createSubcomponent('label')({
     displayName: 'FormField.Label',
     modelHook: useFormFieldModel,
     elemPropsHook: useFormFieldLabel,
-})(function (_a, Element, model) {
-    var _b = _a.gap, gap = _b === void 0 ? 'xxxs' : _b, children = _a.children, elemProps = __rest(_a, ["gap", "children"]);
-    var theme = useTheme();
-    return (React.createElement(Flex, __assign({ as: Element, gap: gap, minWidth: "180px" }, elemProps),
+})(({ gap = 'xxxs', children, ...elemProps }, Element, model) => {
+    const theme = useTheme();
+    return (React.createElement(Flex, Object.assign({ as: Element, gap: gap, minWidth: "180px" }, elemProps),
         React.createElement(LabelText, { as: "span", fontWeight: "medium" }, children),
         model.state.isRequired && (React.createElement(Text, { fontSize: 20, fontWeight: "regular", textDecoration: "unset", color: theme.canvas.palette.error.main, "aria-hidden": "true" }, "*"))));
 });

package/dist/es6/form-field/lib/hooks/useFormFieldHint.js

@@ -4,9 +4,8 @@ import { useFormFieldModel } from './useFormFieldModel';
  * Adds the necessary props to a `Hint` component.
  * Used by the FormField.Hint subcomponent and other input type components
  */
-export var useFormFieldHint = createElemPropsHook(useFormFieldModel)(function (_a) {
-    var state = _a.state;
+export const useFormFieldHint = createElemPropsHook(useFormFieldModel)(({ state }) => {
     return {
-        id: "hint-" + state.id,
+        id: `hint-${state.id}`,
     };
 });

package/dist/es6/form-field/lib/hooks/useFormFieldInput.js

@@ -4,12 +4,11 @@ import { useFormFieldModel } from './useFormFieldModel';
  * Adds the necessary props to an `Input` component.
  * Used by the FormField.Input subcomponent and other input type components
  */
-export var useFormFieldInput = createElemPropsHook(useFormFieldModel)(function (_a) {
-    var state = _a.state;
+export const useFormFieldInput = createElemPropsHook(useFormFieldModel)(({ state }) => {
     return {
         required: state.isRequired ? true : undefined,
         'aria-invalid': state.hasError ? true : undefined,
-        'aria-describedby': "hint-" + state.id,
-        id: "input-" + state.id,
+        'aria-describedby': `hint-${state.id}`,
+        id: `input-${state.id}`,
     };
 });

package/dist/es6/form-field/lib/hooks/useFormFieldLabel.js

@@ -4,9 +4,8 @@ import { useFormFieldModel } from './useFormFieldModel';
  * Adds the necessary props to a `Label` component.
  * Used by the FormField.Label subcomponent and other input type components
  */
-export var useFormFieldLabel = createElemPropsHook(useFormFieldModel)(function (_a) {
-    var state = _a.state;
+export const useFormFieldLabel = createElemPropsHook(useFormFieldModel)(({ state }) => {
     return {
-        htmlFor: "input-" + state.id,
+        htmlFor: `input-${state.id}`,
     };
 });

package/dist/es6/form-field/lib/hooks/useFormFieldModel.js

@@ -1,16 +1,5 @@
-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);
-};
 import { createModelHook, useUniqueId } from '@workday/canvas-kit-react/common';
-export var useFormFieldModel = createModelHook({
+export const useFormFieldModel = createModelHook({
     defaultConfig: {
         /**
          * Optional flag to denote if this field has an error to display. When true the `FormField.Input` will have
@@ -34,11 +23,14 @@ export var useFormFieldModel = createModelHook({
          */
         isRequired: false,
     },
-})(function (config) {
-    var id = useUniqueId(config.id);
-    var state = __assign(__assign({}, config), { id: id });
+})(config => {
+    const id = useUniqueId(config.id);
+    const state = {
+        ...config,
+        id,
+    };
     return {
-        state: state,
+        state,
         events: {},
     };
 });

package/dist/es6/form-field/lib/hooks/useFormFieldOrientation.js

@@ -2,8 +2,8 @@ import { space } from '@workday/canvas-kit-react/tokens';
 /**
  * Adds the necessary layout props to a `FormField` component.
  */
-export var useFormFieldOrientation = function (orientation) {
-    var layoutProps;
+export const useFormFieldOrientation = (orientation) => {
+    let layoutProps;
     if (orientation === 'horizontal') {
         layoutProps = {
             flexDirection: 'row',

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

@@ -1,48 +1,18 @@
-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) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        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 __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;
-};
 import * as React from 'react';
 import styled from '@emotion/styled';
 import { Card } from '@workday/canvas-kit-react/card';
 import { commonColors, space, borderRadius } from '@workday/canvas-kit-react/tokens';
 import { hideMouseFocus, generateUniqueId } from '@workday/canvas-kit-react/common';
-var List = styled('ul')(__assign({ background: commonColors.background, borderRadius: borderRadius.m, padding: 0, margin: space.xxs + " 0", '&:focus': {
+const List = styled('ul')({
+    background: commonColors.background,
+    borderRadius: borderRadius.m,
+    padding: 0,
+    margin: `${space.xxs} 0`,
+    '&:focus': {
         outline: 'none',
-    } }, hideMouseFocus));
+    },
+    ...hideMouseFocus,
+});
 /**
  * As of Canvas Kit v8, this component is being soft-deprecated. It will be hard-deprecated
  * (completely removed) in v9. Please see the [upgrade
@@ -58,46 +28,45 @@ var List = styled('ul')(__assign({ background: commonColors.background, borderRa
  *
  * @deprecated
  */
-var DeprecatedMenu = /** @class */ (function (_super) {
-    __extends(DeprecatedMenu, _super);
-    function DeprecatedMenu(props) {
-        var _this = _super.call(this, props) || this;
-        _this.id = generateUniqueId();
-        _this.getNormalizedItemIndex = function (index) {
-            var itemCount = React.Children.count(_this.props.children);
-            var firstItem = 0;
-            var lastItem = itemCount - 1;
+export class DeprecatedMenu extends React.Component {
+    constructor(props) {
+        super(props);
+        this.id = 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 interactiveItems = children.filter(function (child) {
+            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);
             });
-            var interactiveItemCount = interactiveItems.length;
-            var firstIndex = 0;
-            var lastIndex = interactiveItemCount - 1;
+            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;
@@ -108,48 +77,48 @@ var DeprecatedMenu = /** @class */ (function (_super) {
                 switch (event.key) {
                     case 'ArrowUp':
                     case 'ArrowDown':
-                        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 ? lastIndex : nextIndex >= interactiveItemCount ? firstIndex : nextIndex;
                         break;
                     case 'Home':
                     case 'End':
-                        var skipTo = event.key === 'Home' ? firstIndex : lastIndex;
+                        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 = interactiveItems[_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 DeprecatedMenuItem implementation.
@@ -158,27 +127,26 @@ var DeprecatedMenu = /** @class */ (function (_super) {
             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 = '';
+        this.setFirstCharacters = () => {
+            const getFirstCharacter = (child) => {
+                let character = '';
                 if (!child || typeof child === 'boolean') {
                     character = '';
                 }
@@ -194,7 +162,7 @@ var DeprecatedMenu = /** @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]);
                     }
@@ -204,43 +172,41 @@ var DeprecatedMenu = /** @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;
     }
-    DeprecatedMenu.prototype.componentDidUpdate = function (prevProps) {
-        var _this = this;
+    componentDidUpdate(prevProps) {
         if (this.props.children !== prevProps.children) {
             this.setFirstCharacters();
             this.setInitialSelectedItem();
@@ -248,45 +214,45 @@ var DeprecatedMenu = /** @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();
             }
         });
-    };
-    DeprecatedMenu.prototype.componentDidMount = function () {
-        console.warn("This component is being deprecated and will be removed in Canvas Kit V9.\n\n      For more information, please see the V8 upgrade guide:\n\n      https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page\n      ");
+    }
+    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();
-    };
-    DeprecatedMenu.prototype.componentWillUnmount = function () {
+    }
+    componentWillUnmount() {
         cancelAnimationFrame(this.animateId);
-    };
-    DeprecatedMenu.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;
-        var interactiveItemIndex = null;
+        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, { display: "inline-block", padding: space.zero, width: cardWidth, depth: 3 },
             React.createElement(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) {
+                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;
+                    let itemId;
                     if (!menuItem.props.isHeader) {
                         interactiveItemIndex = (interactiveItemIndex !== null && interactiveItemIndex !== void 0 ? interactiveItemIndex : -1) + 1;
-                        itemId = id + "-" + interactiveItemIndex;
+                        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 === interactiveItemIndex && !menuItem.props.isHeader,
                     })));
                 })))));
-    };
-    return DeprecatedMenu;
-}(React.Component));
-export { DeprecatedMenu };
+    }
+}