@workday/canvas-kit-preview-react 14.0.0-alpha.1147-next.0 → 14.0.0-alpha.1149-next.0

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

@@ -1,249 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DeprecatedMenuItem = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const React = __importStar(require("react"));
-const styled_1 = __importDefault(require("@emotion/styled"));
-const tokens_1 = require("@workday/canvas-kit-react/tokens");
-const icon_1 = require("@workday/canvas-kit-react/icon");
-const Item = (0, styled_1.default)('li')({
-    ...tokens_1.type.levels.subtext.large,
-    padding: `${tokens_1.space.xxs} ${tokens_1.space.s}`,
-    height: tokens_1.space.xl,
-    boxSizing: 'border-box',
-    cursor: 'pointer',
-    color: tokens_1.colors.blackPepper300,
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    transition: 'background-color 80ms, color 80ms',
-    '&:focus': {
-        outline: 'none',
-    },
-}, ({ isHeader }) => {
-    return { pointerEvents: isHeader ? 'none' : 'all' };
-}, ({ isFocused, isDisabled }) => {
-    if (!isFocused && !isDisabled) {
-        return {
-            backgroundColor: 'inherit',
-            '&:hover': {
-                backgroundColor: tokens_1.commonColors.hoverBackground,
-                color: tokens_1.colors.blackPepper300,
-                '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-                    fill: tokens_1.iconColors.hover,
-                },
-            },
-        };
-    }
-    else if (isDisabled && !isFocused) {
-        return {
-            color: tokens_1.colors.licorice100,
-            cursor: 'default',
-        };
-    }
-    else {
-        // Is focused or focused and disabled
-        return {
-            backgroundColor: isDisabled ? tokens_1.colors.blueberry200 : tokens_1.commonColors.focusBackground,
-            color: tokens_1.typeColors.inverse,
-            'span .wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-                fill: isDisabled ? tokens_1.iconColors.disabled : tokens_1.iconColors.active,
-            },
-            '&:hover': {
-                'span .wd-icon-fill, span .wd-icon-accent, span .wd-icon-accent2': {
-                    fill: tokens_1.iconColors.inverse,
-                },
-                'span .wd-icon-background ~ .wd-icon-accent, span .wd-icon-background ~ .wd-icon-accent2': {
-                    fill: isDisabled ? tokens_1.iconColors.disabled : tokens_1.iconColors.active,
-                },
-                'span .wd-icon-background': {
-                    fill: tokens_1.iconColors.inverse,
-                },
-            },
-            [`[data-whatinput='mouse'] &,
-          [data-whatinput='touch'] &,
-          [data-whatinput='pointer'] &`]: {
-                backgroundColor: 'inherit',
-                color: tokens_1.colors.blackPepper300,
-                'span .wd-icon-background ~ .wd-icon-accent, span .wd-icon-background ~ .wd-icon-accent2': {
-                    fill: tokens_1.iconColors.standard,
-                },
-                '&:hover': {
-                    backgroundColor: tokens_1.commonColors.hoverBackground,
-                    'span .wd-icon-fill, span .wd-icon-accent, span .wd-icon-accent2': {
-                        fill: tokens_1.iconColors.hover,
-                    },
-                },
-                '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-                    fill: tokens_1.iconColors.standard,
-                },
-            },
-        };
-    }
-});
-const LabelContainer = (0, styled_1.default)('span')({
-    flex: '1 1 auto',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-});
-const Divider = (0, styled_1.default)('hr')({
-    display: 'block',
-    height: 1,
-    border: 0,
-    borderTop: `1px solid ${tokens_1.colors.soap400}`,
-    margin: `${tokens_1.space.xxs} 0`,
-});
-const iconSize = 24;
-const iconPadding = 16;
-const StyledSystemIcon = (0, styled_1.default)(icon_1.SystemIcon)({
-    minWidth: iconSize + iconPadding, // gives padding between LabelContainer, no matter the direction
-});
-const SecondaryStyledSystemIcon = (0, styled_1.default)(icon_1.SystemIcon)({
-    display: `flex`,
-    minWidth: iconSize + iconPadding,
-    justifyContent: `flex-end`,
-});
-let iconProps = null;
-let secondaryIconProps = null;
-const setIconProps = (icon, isDisabled, isFocused) => {
-    if (!icon) {
-        return null;
-    }
-    let props = {
-        icon: icon,
-        size: iconSize,
-    };
-    if (isDisabled) {
-        props = {
-            ...props,
-            fill: tokens_1.iconColors.disabled,
-            fillHover: tokens_1.iconColors.disabled,
-            accent: tokens_1.iconColors.disabled,
-            accentHover: tokens_1.iconColors.disabled,
-        };
-    }
-    if (isFocused) {
-        props = {
-            ...props,
-            fill: tokens_1.iconColors.inverse,
-            fillHover: tokens_1.iconColors.inverse,
-            accent: tokens_1.iconColors.inverse,
-            accentHover: tokens_1.iconColors.inverse,
-            background: tokens_1.iconColors.inverse,
-        };
-    }
-    return props;
-};
-const scrollIntoViewIfNeeded = (elem, centerIfNeeded = true) => {
-    const parent = elem.parentElement;
-    if (elem && parent) {
-        const parentComputedStyle = window.getComputedStyle(parent, null), parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width'), 10), parentBorderLeftWidth = parseInt(parentComputedStyle.getPropertyValue('border-left-width'), 10), overTop = elem.offsetTop - parent.offsetTop < parent.scrollTop, overBottom = elem.offsetTop - parent.offsetTop + elem.clientHeight - parentBorderTopWidth >
-            parent.scrollTop + parent.clientHeight, overLeft = elem.offsetLeft - parent.offsetLeft < parent.scrollLeft, overRight = elem.offsetLeft - parent.offsetLeft + elem.clientWidth - parentBorderLeftWidth >
-            parent.scrollLeft + parent.clientWidth, alignWithTop = overTop && !overBottom;
-        if ((overTop || overBottom) && centerIfNeeded) {
-            parent.scrollTop =
-                elem.offsetTop -
-                    parent.offsetTop -
-                    parent.clientHeight / 2 -
-                    parentBorderTopWidth +
-                    elem.clientHeight / 2;
-        }
-        if ((overLeft || overRight) && centerIfNeeded) {
-            parent.scrollLeft =
-                elem.offsetLeft -
-                    parent.offsetLeft -
-                    parent.clientWidth / 2 -
-                    parentBorderLeftWidth +
-                    elem.clientWidth / 2;
-        }
-        if ((overTop || overBottom || overLeft || overRight) && !centerIfNeeded) {
-            elem.scrollIntoView(alignWithTop);
-        }
-    }
-};
-/**
- * `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}`
- *
- * Undocumented props are spread to the underlying `<li>` element.
- *
- * @deprecated ⚠️ `DeprecatedMenuItem` has been deprecated and will be removed in a future major version. Please use [Menu in Main](https://workday.github.io/canvas-kit/?path=/docs/components-popups-menu--basic) instead.
- *
- */
-class DeprecatedMenuItem extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.ref = React.createRef();
-        this.componentDidUpdate = (prevProps) => {
-            if (!prevProps.isFocused && this.props.isFocused) {
-                if (this.ref.current) {
-                    scrollIntoViewIfNeeded(this.ref.current);
-                }
-            }
-        };
-        this.handleClick = (event) => {
-            if (this.props.isDisabled) {
-                return;
-            }
-            if (this.props.onClick) {
-                this.props.onClick(event);
-            }
-        };
-    }
-    componentDidMount() {
-        console.warn(`This component is being deprecated and will be removed in a future major version.\n
-      For more information, please see the V8 upgrade guide:\n
-      https://workday.github.io/canvas-kit/?path=/docs/guides-upgrade-guides-v8-0--docs#menu-preview
-      `);
-    }
-    render() {
-        const { onClick, children, id, icon, secondaryIcon, hasDivider, isDisabled, isFocused, isHeader, role, ...elemProps } = this.props;
-        iconProps = setIconProps(icon, isDisabled, isFocused);
-        secondaryIconProps = setIconProps(secondaryIcon, isDisabled, isFocused);
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [hasDivider && (0, jsx_runtime_1.jsx)(Divider, { "aria-hidden": "true" }), (0, jsx_runtime_1.jsxs)(Item, { ref: this.ref, tabIndex: -1, id: id, role: isHeader ? 'presentation' : role, "aria-hidden": isHeader ? true : undefined, onClick: this.handleClick, "aria-disabled": isDisabled ? true : undefined, isDisabled: !!isDisabled, isFocused: !!isFocused, isHeader: !!isHeader, ...elemProps, children: [icon && iconProps && (0, jsx_runtime_1.jsx)(StyledSystemIcon, { ...iconProps }), (0, jsx_runtime_1.jsx)(LabelContainer, { children: children }), secondaryIcon && secondaryIconProps && ((0, jsx_runtime_1.jsx)(SecondaryStyledSystemIcon, { ...secondaryIconProps }))] })] }));
-    }
-}
-exports.DeprecatedMenuItem = DeprecatedMenuItem;
-/**
- * If we destructure props, shouldClose will be undefined because the value is only applied for the render method only.
- * We have to use defaultProps so that the value of shouldClose is applied for every method and therefore references in the Menu component.
- * For reference: https://github.com/Workday/canvas-kit/blob/f6d4d29e9bb2eb2af0b204e6f4ce2e5ed5a98e57/modules/_labs/menu/react/lib/Menu.tsx#L259,
- */
-// TODO: Remove this ts-ignore when we convert to a functional component
-// @ts-ignore
-DeprecatedMenuItem.defaultProps = {
-    shouldClose: true,
-    role: 'menuitem',
-};

package/dist/es6/menu/index.d.ts

@@ -1,3 +0,0 @@
-export * from './lib/Menu';
-export * from './lib/MenuItem';
-//# sourceMappingURL=index.d.ts.map

package/dist/es6/menu/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../menu/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC"}

package/dist/es6/menu/index.js

@@ -1,2 +0,0 @@
-export * from './lib/Menu';
-export * from './lib/MenuItem';

package/dist/es6/menu/lib/Menu.d.ts

@@ -1,78 +0,0 @@
-import * as React from 'react';
-import { DeprecatedMenuItemProps } from './MenuItem';
-import { GrowthBehavior } from '@workday/canvas-kit-react/common';
-/**
- * @deprecated ⚠️ `DeprecatedMenuProps` has been deprecated and will be removed in a future major version. Please use [Menu in Main](https://workday.github.io/canvas-kit/?path=/docs/components-popups-menu--basic) instead.
- */
-export interface DeprecatedMenuProps extends GrowthBehavior, React.HTMLAttributes<HTMLUListElement> {
-    /**
-     * The DeprecatedMenuItem children of the DeprecatedMenu (must be at least one). Also accepts other components which share the same interface as `DeprecatedMenuItem`.
-     */
-    children?: React.ReactElement<DeprecatedMenuItemProps> | React.ReactElement<DeprecatedMenuItemProps>[];
-    /**
-     * If true, set the DeprecatedMenu to the open state. Useful for showing and hiding the DeprecatedMenu from a parent component such as a menu button.
-     * @default true
-     */
-    isOpen?: boolean;
-    /**
-     * The width of the DeprecatedMenu. If no value is provided, the DeprecatedMenu will collapse around its content.
-     */
-    width?: number | string;
-    /**
-     * The function called when a menu item is selected.
-     */
-    onSelect?: () => void;
-    /**
-     * The function called when the DeprecatedMenu should close. This is called after a menu item is selected or if the escape shortcut key is used. This will not fire if the menu item sets `shouldClose` to false.
-     */
-    onClose?: () => void;
-    /**
-     * The zero-based index of the menu item which should initially receive focus.
-     */
-    initialSelectedItem?: number;
-    /**
-     * The unique id of the DeprecatedMenu used for ARIA and HTML `id` attributes.
-     */
-    id?: string;
-    /**
-     * The HTML `id` of the element that labels the DeprecatedMenu. Often used with menu buttons.
-     */
-    'aria-labelledby'?: string;
-}
-/**
- *
- * @deprecated ⚠️ `DeprecatedMenuState` has been deprecated and will be removed in a future major version. Please use [Menu in Main](https://workday.github.io/canvas-kit/?path=/docs/components-popups-menu--basic) instead.
- */
-export interface DeprecatedMenuState {
-    selectedItemIndex: number;
-}
-/**
- * `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 ⚠️ Deprecated Menu has been deprecated and will be removed in a future major version. Please use [Menu in Main](https://workday.github.io/canvas-kit/?path=/docs/components-popups-menu--basic) instead.
- */
-export declare class DeprecatedMenu extends React.Component<DeprecatedMenuProps, DeprecatedMenuState> {
-    private id;
-    private animateId;
-    private menuRef;
-    private firstCharacters;
-    constructor(props: DeprecatedMenuProps);
-    componentDidUpdate(prevProps: DeprecatedMenuProps): void;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    render(): import("react/jsx-runtime").JSX.Element;
-    getNormalizedItemIndex: (index: number | undefined) => number;
-    setNormalizedItemIndex: (index: number | undefined) => void;
-    private handleKeyboardShortcuts;
-    private handleClick;
-    private getIndexFirstChars;
-    private setFirstCharacters;
-    private getInitialSelectedItem;
-    private setInitialSelectedItem;
-}
-//# sourceMappingURL=Menu.d.ts.map

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

@@ -1 +0,0 @@
-{"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,EAAC,cAAc,EAAmB,MAAM,kCAAkC,CAAC;AAElF;;GAEG;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;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAYD;;;;;;;;;GASG;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,CA8BxB;IAEF,OAAO,CAAC,sBAAsB,CAU5B;IAEF,OAAO,CAAC,sBAAsB,CAG5B;CACH"}

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

@@ -1,247 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-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 { generateUniqueId } from '@workday/canvas-kit-react/common';
-const List = styled('ul')({
-    background: commonColors.background,
-    borderRadius: borderRadius.m,
-    padding: 0,
-    margin: `${space.xxs} 0`,
-    '&:focus-visible, &.focus': {
-        outline: 'none',
-    },
-});
-/**
- * `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 ⚠️ Deprecated Menu has been deprecated and will be removed in a future major version. Please use [Menu in Main](https://workday.github.io/canvas-kit/?path=/docs/components-popups-menu--basic) instead.
- */
-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 = (index) => {
-            this.setState({ selectedItemIndex: this.getNormalizedItemIndex(index) });
-        };
-        this.handleKeyboardShortcuts = (event) => {
-            if (event.ctrlKey || event.altKey || event.metaKey) {
-                return;
-            }
-            const children = React.Children.toArray(this.props.children);
-            let nextSelectedIndex = 0;
-            let isShortcut = false;
-            const interactiveItems = children.filter(child => {
-                var _a;
-                return !((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.isHeader);
-            });
-            const interactiveItemCount = interactiveItems.length;
-            const firstIndex = 0;
-            const lastIndex = interactiveItemCount - 1;
-            if (event.key.length === 1 && event.key.match(/\S/)) {
-                let start = this.state.selectedItemIndex + 1;
-                let searchIndex;
-                if (start === children.length) {
-                    start = 0;
-                }
-                searchIndex = this.getIndexFirstChars(start, event.key.toLowerCase());
-                if (searchIndex === -1) {
-                    searchIndex = this.getIndexFirstChars(0, event.key.toLowerCase(), start);
-                }
-                if (searchIndex > -1) {
-                    isShortcut = true;
-                    nextSelectedIndex = searchIndex;
-                }
-            }
-            else {
-                switch (event.key) {
-                    case 'ArrowUp':
-                    case 'ArrowDown':
-                        const direction = event.key === 'ArrowUp' ? -1 : 1;
-                        isShortcut = true;
-                        const nextIndex = this.state.selectedItemIndex + direction;
-                        nextSelectedIndex =
-                            nextIndex < 0 ? lastIndex : nextIndex >= interactiveItemCount ? firstIndex : nextIndex;
-                        break;
-                    case 'Home':
-                    case 'End':
-                        const skipTo = event.key === 'Home' ? firstIndex : lastIndex;
-                        isShortcut = true;
-                        nextSelectedIndex = skipTo;
-                        break;
-                    case 'Tab':
-                        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();
-                        }
-                        break;
-                    case 'Spacebar':
-                    case ' ':
-                    case 'Enter':
-                        nextSelectedIndex = this.state.selectedItemIndex;
-                        const child = interactiveItems[this.state.selectedItemIndex];
-                        this.handleClick(event, child.props);
-                        isShortcut = true;
-                        break;
-                    default:
-                }
-            }
-            if (isShortcut) {
-                this.setNormalizedItemIndex(nextSelectedIndex);
-                event.stopPropagation();
-                event.preventDefault();
-            }
-        };
-        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.
-                return;
-            }
-            if (menuItemProps.onClick) {
-                menuItemProps.onClick(event);
-            }
-            if (this.props.onSelect) {
-                this.props.onSelect();
-            }
-            if (this.props.onClose) {
-                if (menuItemProps.shouldClose) {
-                    this.props.onClose();
-                }
-            }
-        };
-        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 = () => {
-            const getFirstCharacter = (child) => {
-                let character = '';
-                if (!child || typeof child === 'boolean') {
-                    character = '';
-                }
-                else if (typeof child === 'string' || typeof child === 'number') {
-                    character = child.toString().trim().substring(0, 1).toLowerCase();
-                }
-                else if (Array.isArray(child) && child[0]) {
-                    // TODO test React.ReactNodeArray
-                    character = getFirstCharacter(child[0]);
-                }
-                else if ('props' in child) {
-                    const { children } = child.props;
-                    if (Array.isArray(children)) {
-                        character = getFirstCharacter(children[0]);
-                    }
-                    else {
-                        character = getFirstCharacter(children);
-                    }
-                }
-                return character;
-            };
-            const firstCharacters = React.Children.map(this.props.children, child => {
-                var _a;
-                if ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.isHeader) {
-                    return;
-                }
-                return getFirstCharacter(child);
-            });
-            this.firstCharacters = firstCharacters;
-        };
-        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;
-            }
-            return selected;
-        };
-        this.setInitialSelectedItem = () => {
-            const selected = this.getInitialSelectedItem();
-            this.setState({ selectedItemIndex: selected });
-        };
-        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 = {
-            selectedItemIndex: selected,
-        };
-    }
-    componentDidUpdate(prevProps) {
-        if (this.props.children !== prevProps.children) {
-            this.setFirstCharacters();
-            this.setInitialSelectedItem();
-        }
-        if (this.props.isOpen && !prevProps.isOpen) {
-            this.setInitialSelectedItem();
-        }
-        this.animateId = requestAnimationFrame(() => {
-            if (this.props.isOpen && this.menuRef.current) {
-                this.menuRef.current.focus();
-            }
-        });
-    }
-    componentDidMount() {
-        console.warn(`This component is being deprecated and will be removed in a future major version.\n
-      For more information, please see the V8 upgrade guide:\n
-      https://workday.github.io/canvas-kit/?path=/docs/guides-upgrade-guides-v8-0--docs#menu-preview
-      `);
-        this.setFirstCharacters();
-        this.setInitialSelectedItem();
-    }
-    componentWillUnmount() {
-        cancelAnimationFrame(this.animateId);
-    }
-    render() {
-        // TODO: Standardize on prop spread location (see #150)
-        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 (_jsx(Card, { display: "inline-block", padding: space.zero, width: cardWidth, depth: 3, children: _jsx(Card.Body, { children: _jsx(List, { role: "menu", tabIndex: 0, id: id, "aria-labelledby": ariaLabelledby, "aria-activedescendant": `${id}-${selectedItemIndex}`, onKeyDown: this.handleKeyboardShortcuts, ref: this.menuRef, ...elemProps, children: React.Children.map(children, menuItem => {
-                        if (!React.isValidElement(menuItem)) {
-                            return;
-                        }
-                        let itemId;
-                        if (!menuItem.props.isHeader) {
-                            interactiveItemIndex = (interactiveItemIndex !== null && interactiveItemIndex !== void 0 ? interactiveItemIndex : -1) + 1;
-                            itemId = `${id}-${interactiveItemIndex}`;
-                        }
-                        return (_jsx(React.Fragment, { children: React.cloneElement(menuItem, {
-                                onClick: (event) => this.handleClick(event, menuItem.props),
-                                id: itemId,
-                                isFocused: selectedItemIndex === interactiveItemIndex && !menuItem.props.isHeader,
-                            }) }, itemId));
-                    }) }) }) }));
-    }
-}

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

@@ -1,75 +0,0 @@
-import * as React from 'react';
-import { CanvasSystemIcon } from '@workday/design-assets-types';
-/**
- * @deprecated ⚠️ `DeprecatedMenuItemProps` has been deprecated and will be removed in a future major version. Please use [Menu in Main](https://workday.github.io/canvas-kit/?path=/docs/components-popups-menu--basic) instead.
- */
-export interface DeprecatedMenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
-    /**
-     * 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 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 DeprecatedMenuItem. This icon is displayed before what you supplied for the children.
-     */
-    icon?: CanvasSystemIcon;
-    /**
-     * 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 DeprecatedMenuItem.
-     * @default false
-     */
-    hasDivider?: boolean;
-    /**
-     * 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 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 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 DeprecatedMenu callback to be fired after the DeprecatedMenuItem has been clicked.
-     * @default true
-     */
-    shouldClose?: boolean;
-}
-/**
- * `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}`
- *
- * Undocumented props are spread to the underlying `<li>` element.
- *
- * @deprecated ⚠️ `DeprecatedMenuItem` has been deprecated and will be removed in a future major version. Please use [Menu in Main](https://workday.github.io/canvas-kit/?path=/docs/components-popups-menu--basic) instead.
- *
- */
-export declare class DeprecatedMenuItem extends React.Component<DeprecatedMenuItemProps> {
-    ref: React.RefObject<HTMLLIElement>;
-    componentDidMount(): void;
-    componentDidUpdate: (prevProps: DeprecatedMenuItemProps) => void;
-    render(): import("react/jsx-runtime").JSX.Element;
-    private handleClick;
-}
-//# sourceMappingURL=MenuItem.d.ts.map

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

@@ -1 +0,0 @@
-{"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;;GAEG;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;AA6LD;;;;;;;;;;;;;GAaG;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"}