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

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,78 +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 });
 exports.DeprecatedMenu = void 0;
-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': {
+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));
+    },
+    ...common_1.hideMouseFocus,
+});
 /**
- * ### Deprecated Menu
+ * 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`.
  *
- * As of Canvas Kit v8, this component is being soft-deprecated.
- * It will be hard-deprecated (completely removed) in v9. 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 `<ul>` element.
+ *
+ * @deprecated
  */
-var DeprecatedMenu = /** @class */ (function (_super) {
-    __extends(DeprecatedMenu, _super);
-    function DeprecatedMenu(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;
+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 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;
@@ -124,48 +102,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.
@@ -174,27 +152,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 = '';
                 }
@@ -210,7 +187,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]);
                     }
@@ -220,43 +197,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();
@@ -264,45 +239,46 @@ 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_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) {
+                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));
+    }
+}
 exports.DeprecatedMenu = DeprecatedMenu;

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

@@ -3,8 +3,8 @@ import { CanvasSystemIcon } from '@workday/design-assets-types';
 /**
  * ### Deprecated Menu Item Props
  *
- * As of Canvas Kit v8, Menu is being soft-deprecated.
- * It will be hard-deprecated (completely removed) in v9. Please see the
+ * 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.
  */
@@ -57,12 +57,22 @@ export interface DeprecatedMenuItemProps extends React.LiHTMLAttributes<HTMLLIEl
     shouldClose?: boolean;
 }
 /**
- * ### Deprecated Menu Item
+ * `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:
  *
- * As of Canvas Kit v8, Menu is being soft-deprecated.
- * It will be hard-deprecated (completely removed) in v9. Please see the
- * [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
- * for more information.
+ * - `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>;

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;;;;;;;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;;;;;;;GAOG;AACH,qBAAa,kBAAmB,SAAQ,KAAK,CAAC,SAAS,CAAC,uBAAuB,CAAC;IAC9E,GAAG,iCAAoC;IAEvC,iBAAiB;IASjB,kBAAkB,cAAe,uBAAuB,UAMtD;IAEF,MAAM;IA2CN,OAAO,CAAC,WAAW,CAOjB;CACH"}
+{"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"}