@workday/canvas-kit-preview-react 8.0.0 → 8.0.2

package/dist/es6/form-field/lib/FormFieldHint.d.ts

@@ -1,4 +1,4 @@
-export declare const FormFieldHint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps, {
+export declare const FormFieldHint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Pick<import("@workday/canvas-kit-react/text").TypeLevelProps, "top" | "left" | "right" | "bottom" | "fill" | "children" | "color" | "resize" | "width" | "height" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "stroke" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "variant">, {
     state: {
         id: string;
         hasError: boolean;

package/dist/es6/form-field/lib/FormFieldHint.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldHint.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldHint.tsx"],"names":[],"mappings":"AAiBA,eAAO,MAAM,aAAa;;;;;;;EAsBxB,CAAC"}
+{"version":3,"file":"FormFieldHint.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldHint.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,aAAa;;;;;;;EAyBzB,CAAC"}

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

@@ -21,11 +21,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import { createSubcomponent, useTheme, styled, } from '@workday/canvas-kit-react/common';
-import { space, type } from '@workday/canvas-kit-react/tokens';
-import { Box } from '@workday/canvas-kit-react/layout';
+import { createSubcomponent, useTheme } from '@workday/canvas-kit-react/common';
+import { space } from '@workday/canvas-kit-react/tokens';
 import { useFormFieldHint, useFormFieldModel } from './hooks';
-var StyledHint = styled(Box)(__assign({}, type.levels.subtext.medium));
+import { Subtext } from '@workday/canvas-kit-react/text';
 export var FormFieldHint = createSubcomponent('p')({
     displayName: 'FormField.Hint',
     modelHook: useFormFieldModel,
@@ -37,5 +36,5 @@ export var FormFieldHint = createSubcomponent('p')({
         // If there is no hint text just skip rendering
         return null;
     }
-    return (React.createElement(StyledHint, __assign({ as: Element, color: model.state.hasError ? theme.canvas.palette.error.main : undefined, marginY: space.xxs }, elemProps), children));
+    return (React.createElement(Subtext, __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.d.ts

@@ -1,4 +1,4 @@
-export declare const FormFieldInput: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps, {
+export declare const FormFieldInput: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").CommonStyleProps, {
     state: {
         id: string;
         hasError: boolean;

package/dist/es6/form-field/lib/FormFieldLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldLabel.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAEL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAM,MAAM,EAAE,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAK3E,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,MAAM,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IAC9F;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAaD,eAAO,MAAM,cAAc;;;;;;;EAiBzB,CAAC"}
+{"version":3,"file":"FormFieldLabel.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAqB,YAAY,EAAW,MAAM,kCAAkC,CAAC;AAC5F,OAAO,EAAC,MAAM,EAAE,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAItE,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,MAAM,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IAC9F;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED,eAAO,MAAM,cAAc;;;;;;;EAyBzB,CAAC"}

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

@@ -21,16 +21,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import { createSubcomponent, useTheme, styled, } from '@workday/canvas-kit-react/common';
-import { Box, HStack } from '@workday/canvas-kit-react/layout';
-import { type } from '@workday/canvas-kit-react/tokens';
+import { createSubcomponent, useTheme } from '@workday/canvas-kit-react/common';
+import { HStack } from '@workday/canvas-kit-react/layout';
+import { LabelText, Text } from '@workday/canvas-kit-react/text';
 import { useFormFieldLabel, useFormFieldModel } from './hooks';
-var StyledFormFieldLabel = styled('span')(__assign(__assign({}, type.levels.subtext.large), { fontWeight: type.properties.fontWeights.medium }));
-var StyledAsterisk = styled(Box)({
-    fontSize: type.properties.fontSizes[20],
-    fontWeight: type.properties.fontWeights.regular,
-    textDecoration: 'unset',
-});
 export var FormFieldLabel = createSubcomponent('label')({
     displayName: 'FormField.Label',
     modelHook: useFormFieldModel,
@@ -39,6 +33,6 @@ export var FormFieldLabel = createSubcomponent('label')({
     var _b = _a.spacing, spacing = _b === void 0 ? 'xxxs' : _b, children = _a.children, elemProps = __rest(_a, ["spacing", "children"]);
     var theme = useTheme();
     return (React.createElement(HStack, __assign({ as: Element, spacing: spacing, minWidth: "180px" }, elemProps),
-        React.createElement(StyledFormFieldLabel, null, children),
-        model.state.isRequired && (React.createElement(StyledAsterisk, { as: "span", color: theme.canvas.palette.error.main, "aria-hidden": "true" }, "*"))));
+        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/index.d.ts

@@ -1,10 +1,11 @@
-export * from './breadcrumbs';
 export * from './color-picker';
 export * from './form-field';
 export * from './menu';
 export * from './pill';
+export * from './segmented-control';
 export * from './select';
 export * from './side-panel';
+export * from './status-indicator';
 export * from './text-area';
 export * from './text-input';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}

package/dist/es6/index.js

@@ -1,10 +1,10 @@
-export * from './breadcrumbs';
 export * from './color-picker';
 export * from './form-field';
 export * from './menu';
 export * from './pill';
+export * from './segmented-control';
 export * from './select';
 export * from './side-panel';
+export * from './status-indicator';
 export * from './text-area';
 export * from './text-input';
-/// <reference types="@types/node" />

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

@@ -1,6 +1,3 @@
-import Menu, { MenuProps } from './lib/Menu';
-import MenuItem from './lib/MenuItem';
-export { Menu, MenuItem, MenuProps };
-export default Menu;
+export * from './lib/Menu';
 export * from './lib/MenuItem';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,EAAE,EAAC,SAAS,EAAC,MAAM,YAAY,CAAC;AAC3C,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AAEtC,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAC,CAAC;AAEnC,eAAe,IAAI,CAAC;AACpB,cAAc,gBAAgB,CAAC"}
+{"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,5 +1,2 @@
-import Menu from './lib/Menu';
-import MenuItem from './lib/MenuItem';
-export { Menu, MenuItem };
-export default Menu;
+export * from './lib/Menu';
 export * from './lib/MenuItem';

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

@@ -1,18 +1,26 @@
 import * as React from 'react';
-import { MenuItemProps } from './MenuItem';
+import { DeprecatedMenuItemProps } from './MenuItem';
 import { GrowthBehavior } from '@workday/canvas-kit-react/common';
-export interface MenuProps extends GrowthBehavior, React.HTMLAttributes<HTMLUListElement> {
+/**
+ * ### Deprecated Menu
+ *
+ * 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.
+ */
+export interface DeprecatedMenuProps extends GrowthBehavior, React.HTMLAttributes<HTMLUListElement> {
     /**
-     * The MenuItem children of the Menu (must be at least one). Also accepts other components which share the same interface as `MenuItem`.
+     * 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<MenuItemProps> | React.ReactElement<MenuItemProps>[];
+    children?: React.ReactElement<DeprecatedMenuItemProps> | React.ReactElement<DeprecatedMenuItemProps>[];
     /**
-     * If true, set the Menu to the open state. Useful for showing and hiding the Menu from a parent component such as a menu button.
+     * 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 Menu. If no value is provided, the Menu will collapse around its content.
+     * The width of the DeprecatedMenu. If no value is provided, the DeprecatedMenu will collapse around its content.
      */
     width?: number | string;
     /**
@@ -20,7 +28,7 @@ export interface MenuProps extends GrowthBehavior, React.HTMLAttributes<HTMLULis
      */
     onSelect?: () => void;
     /**
-     * The function called when the Menu 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.
+     * 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;
     /**
@@ -28,24 +36,40 @@ export interface MenuProps extends GrowthBehavior, React.HTMLAttributes<HTMLULis
      */
     initialSelectedItem?: number;
     /**
-     * The unique id of the Menu used for ARIA and HTML `id` attributes.
+     * The unique id of the DeprecatedMenu used for ARIA and HTML `id` attributes.
      */
     id?: string;
     /**
-     * The HTML `id` of the element that labels the Menu. Often used with menu buttons.
+     * The HTML `id` of the element that labels the DeprecatedMenu. Often used with menu buttons.
      */
     'aria-labelledby'?: string;
 }
-export interface MenuState {
+/**
+ * ### Deprecated Menu State
+ *
+ * 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.
+ */
+export interface DeprecatedMenuState {
     selectedItemIndex: number;
 }
-export default class Menu extends React.Component<MenuProps, MenuState> {
+/**
+ * ### Deprecated Menu
+ *
+ * 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.
+ */
+export declare class DeprecatedMenu extends React.Component<DeprecatedMenuProps, DeprecatedMenuState> {
     private id;
     private animateId;
     private menuRef;
     private firstCharacters;
-    constructor(props: MenuProps);
-    componentDidUpdate(prevProps: MenuProps): void;
+    constructor(props: DeprecatedMenuProps);
+    componentDidUpdate(prevProps: DeprecatedMenuProps): void;
     componentDidMount(): void;
     componentWillUnmount(): void;
     render(): JSX.Element;

package/dist/es6/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;;;;;;;GAOG;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/es6/menu/lib/Menu.js

@@ -41,9 +41,17 @@ import { hideMouseFocus, generateUniqueId } from '@workday/canvas-kit-react/comm
 var List = styled('ul')(__assign({ background: commonColors.background, borderRadius: borderRadius.m, padding: 0, margin: space.xxs + " 0", '&:focus': {
         outline: 'none',
     } }, hideMouseFocus));
-var Menu = /** @class */ (function (_super) {
-    __extends(Menu, _super);
-    function Menu(props) {
+/**
+ * ### Deprecated Menu
+ *
+ * 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.
+ */
+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) {
@@ -65,9 +73,13 @@ var Menu = /** @class */ (function (_super) {
             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;
+            var interactiveItems = children.filter(function (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;
             if (event.key.length === 1 && event.key.match(/\S/)) {
                 var start = _this.state.selectedItemIndex + 1;
                 var searchIndex = void 0;
@@ -87,17 +99,15 @@ 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;
                         isShortcut = true;
                         var 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;
+                        var skipTo = event.key === 'Home' ? firstIndex : lastIndex;
                         isShortcut = true;
                         nextSelectedIndex = skipTo;
                         break;
@@ -117,7 +127,7 @@ var Menu = /** @class */ (function (_super) {
                     case ' ':
                     case 'Enter':
                         nextSelectedIndex = _this.state.selectedItemIndex;
-                        var child = children[_this.state.selectedItemIndex];
+                        var child = interactiveItems[_this.state.selectedItemIndex];
                         _this.handleClick(event, child.props);
                         isShortcut = true;
                         break;
@@ -133,7 +143,7 @@ var Menu = /** @class */ (function (_super) {
         _this.handleClick = function (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) {
@@ -160,7 +170,7 @@ var Menu = /** @class */ (function (_super) {
         _this.setFirstCharacters = function () {
             var getFirstCharacter = function (child) {
                 var character = '';
-                if (!child || typeof child === 'boolean' || child === {}) {
+                if (!child || typeof child === 'boolean') {
                     character = '';
                 }
                 else if (typeof child === 'string' || typeof child === 'number') {
@@ -186,6 +196,10 @@ var Menu = /** @class */ (function (_super) {
                 return character;
             };
             var firstCharacters = React.Children.map(_this.props.children, function (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;
@@ -216,7 +230,7 @@ var Menu = /** @class */ (function (_super) {
         };
         return _this;
     }
-    Menu.prototype.componentDidUpdate = function (prevProps) {
+    DeprecatedMenu.prototype.componentDidUpdate = function (prevProps) {
         var _this = this;
         if (this.props.children !== prevProps.children) {
             this.setFirstCharacters();
@@ -231,33 +245,39 @@ var Menu = /** @class */ (function (_super) {
             }
         });
     };
-    Menu.prototype.componentDidMount = function () {
+    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      ");
         this.setFirstCharacters();
         this.setInitialSelectedItem();
     };
-    Menu.prototype.componentWillUnmount = function () {
+    DeprecatedMenu.prototype.componentWillUnmount = function () {
         cancelAnimationFrame(this.animateId);
     };
-    Menu.prototype.render = function () {
+    DeprecatedMenu.prototype.render = function () {
         var _this = this;
         // 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;
         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, index) {
+                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) {
                     if (!React.isValidElement(menuItem)) {
                         return;
                     }
-                    var itemId = id + "-" + index;
+                    var 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); },
                         id: itemId,
-                        isFocused: selectedItemIndex === index,
+                        isFocused: selectedItemIndex === interactiveItemIndex && !menuItem.props.isHeader,
                     })));
                 })))));
     };
-    return Menu;
+    return DeprecatedMenu;
 }(React.Component));
-export default Menu;
+export { DeprecatedMenu };

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

@@ -1,53 +1,74 @@
 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 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.
+ */
+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> {
+/**
+ * ### Deprecated Menu Item
+ *
+ * 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.
+ */
+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/es6/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;;;;;;;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"}

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

@@ -40,6 +40,9 @@ import { SystemIcon } from '@workday/canvas-kit-react/icon';
 var Item = styled('li')(__assign(__assign({}, type.levels.subtext.large), { padding: space.xxs + " " + space.s, height: space.xl, boxSizing: 'border-box', cursor: 'pointer', color: colors.blackPepper300, display: 'flex', flexDirection: 'row', alignItems: 'center', transition: 'background-color 80ms, color 80ms', '&:focus': {
         outline: 'none',
     } }), function (_a) {
+    var isHeader = _a.isHeader;
+    return { pointerEvents: isHeader ? 'none' : 'all' };
+}, function (_a) {
     var _b;
     var isFocused = _a.isFocused, isDisabled = _a.isDisabled;
     if (!isFocused && !isDisabled) {
@@ -168,9 +171,17 @@ var scrollIntoViewIfNeeded = function (elem, centerIfNeeded) {
         }
     }
 };
-var MenuItem = /** @class */ (function (_super) {
-    __extends(MenuItem, _super);
-    function MenuItem() {
+/**
+ * ### Deprecated Menu Item
+ *
+ * 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.
+ */
+var DeprecatedMenuItem = /** @class */ (function (_super) {
+    __extends(DeprecatedMenuItem, _super);
+    function DeprecatedMenuItem() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.ref = React.createRef();
         _this.componentDidUpdate = function (prevProps) {
@@ -190,19 +201,23 @@ var MenuItem = /** @class */ (function (_super) {
         };
         return _this;
     }
-    MenuItem.prototype.render = function () {
-        var _a = this.props, onClick = _a.onClick, children = _a.children, id = _a.id, icon = _a.icon, secondaryIcon = _a.secondaryIcon, hasDivider = _a.hasDivider, isDisabled = _a.isDisabled, isFocused = _a.isFocused, role = _a.role, elemProps = __rest(_a, ["onClick", "children", "id", "icon", "secondaryIcon", "hasDivider", "isDisabled", "isFocused", "role"]);
+    DeprecatedMenuItem.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      ");
+    };
+    DeprecatedMenuItem.prototype.render = function () {
+        var _a = this.props, onClick = _a.onClick, children = _a.children, id = _a.id, icon = _a.icon, secondaryIcon = _a.secondaryIcon, hasDivider = _a.hasDivider, isDisabled = _a.isDisabled, isFocused = _a.isFocused, isHeader = _a.isHeader, role = _a.role, elemProps = __rest(_a, ["onClick", "children", "id", "icon", "secondaryIcon", "hasDivider", "isDisabled", "isFocused", "isHeader", "role"]);
         iconProps = setIconProps(icon, isDisabled, isFocused);
         secondaryIconProps = setIconProps(secondaryIcon, isDisabled, isFocused);
         return (React.createElement(React.Fragment, null,
             hasDivider && React.createElement(Divider, null),
-            React.createElement(Item, __assign({ ref: this.ref, tabIndex: -1, id: id, role: role, onClick: this.handleClick, "aria-disabled": isDisabled ? true : undefined, isDisabled: !!isDisabled, isFocused: !!isFocused }, elemProps),
+            React.createElement(Item, __assign({ ref: this.ref, tabIndex: -1, id: id, role: isHeader ? 'presentation' : role, onClick: this.handleClick, "aria-disabled": isDisabled ? true : undefined, isDisabled: !!isDisabled, isFocused: !!isFocused, isHeader: !!isHeader }, elemProps),
                 icon && iconProps && React.createElement(StyledSystemIcon, __assign({}, iconProps)),
                 React.createElement(LabelContainer, null, children),
                 secondaryIcon && secondaryIconProps && (React.createElement(SecondaryStyledSystemIcon, __assign({}, secondaryIconProps))))));
     };
-    return MenuItem;
+    return DeprecatedMenuItem;
 }(React.Component));
+export { 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.
@@ -210,8 +225,7 @@ var MenuItem = /** @class */ (function (_super) {
  */
 // TODO: Remove this ts-ignore when we convert to a functional component
 // @ts-ignore
-MenuItem.defaultProps = {
+DeprecatedMenuItem.defaultProps = {
     shouldClose: true,
     role: 'menuitem',
 };
-export default MenuItem;