@workday/canvas-kit-preview-react 7.0.0-alpha.129-next.3 → 7.0.0-alpha.256-next.2

package/dist/es6/text-input/lib/TextInput.d.ts

@@ -26,16 +26,7 @@ export declare const TextInput: import("@workday/canvas-kit-react/common").Eleme
     };
     events: {};
 }> & {
-    Context: React.Context<{
-        state: {
-            id: string;
-            hasError: boolean;
-            isRequired: boolean;
-        };
-        events: {};
-    }>;
-} & {
-    Field: 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 & import("@workday/canvas-kit-react/common").PropsWithModel<{
+    Field: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/color").BorderColorStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/radius").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/width").BorderWidthStyleProps & 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").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
         state: {
             id: string;
             hasError: boolean;
@@ -58,7 +49,7 @@ export declare const TextInput: import("@workday/canvas-kit-react/common").Eleme
         };
         events: {};
     }>;
-    Hint: 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, {
+    Hint: 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/text-input/lib/TextInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAC,SAAS,EAA0B,MAAM,8CAA8C,CAAC;AAMhG,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC;IAC3E;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBpB,CAAC"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAC,SAAS,EAA0B,MAAM,8CAA8C,CAAC;AAMhG,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC;IAC3E;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBpB,CAAC"}

package/dist/es6/text-input/lib/TextInputField.d.ts

@@ -1,4 +1,4 @@
-export declare const TextInputField: 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 & import("@workday/canvas-kit-react/common").PropsWithModel<{
+export declare const TextInputField: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/color").BorderColorStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/radius").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/width").BorderWidthStyleProps & 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").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
     state: {
         id: string;
         hasError: boolean;

package/dist/es6/text-input/lib/TextInputField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInputField.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInputField.tsx"],"names":[],"mappings":"AA0CA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;EAgCzB,CAAC"}
+{"version":3,"file":"TextInputField.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInputField.tsx"],"names":[],"mappings":"AAyCA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;EAiCzB,CAAC"}

package/dist/es6/text-input/lib/TextInputField.js

@@ -17,22 +17,29 @@ import { createSubcomponent, useTheme } from '@workday/canvas-kit-react/common';
 import { useThemedRing } from '@workday/canvas-kit-labs-react/common';
 import { FormField } from '@workday/canvas-kit-preview-react/form-field';
 import { useTextInputField, useTextInputModel } from './hooks';
-var baseStyles = __assign(__assign({}, type.levels.subtext.large), { transition: '0.2s box-shadow, 0.2s border-color', '&::placeholder': {
+var baseStyles = {
+    transition: '0.2s box-shadow, 0.2s border-color',
+    '&::placeholder': {
         color: inputColors.placeholder,
-    }, '&:hover': {
+    },
+    '&:hover': {
         borderColor: inputColors.hoverBorder,
-    }, '&:focus:not([disabled])': {
+    },
+    '&:focus:not([disabled])': {
         outline: 'none',
-    }, '&:disabled': {
+    },
+    '&:disabled': {
         backgroundColor: inputColors.disabled.background,
         borderColor: inputColors.disabled.border,
         color: inputColors.disabled.text,
         '&::placeholder': {
             color: inputColors.disabled.text,
         },
-    }, '::-ms-clear': {
+    },
+    '::-ms-clear': {
         display: 'none',
-    } });
+    },
+};
 export var TextInputField = createSubcomponent('input')({
     displayName: 'TextInput.Field',
     modelHook: useTextInputModel,
@@ -48,5 +55,5 @@ export var TextInputField = createSubcomponent('input')({
                 boxShadow: "inset 0 0 0 1px " + theme.canvas.palette.common.focusOutline,
             },
         };
-    return (jsx(FormField.Input, __assign({ as: "input", css: [baseStyles, focusStyles], padding: space.xxs, margin: 0, display: "block", height: "40px", minWidth: "280px", border: "1px solid " + inputColors.border, backgroundColor: inputColors.background, borderRadius: borderRadius.m }, elemProps)));
+    return (jsx(FormField.Input, __assign({ as: "input" }, type.levels.subtext.large, { css: [baseStyles, focusStyles], padding: space.xxs, margin: 0, display: "block", height: "40px", minWidth: "280px", border: "1px solid " + inputColors.border, backgroundColor: inputColors.background, borderRadius: borderRadius.m }, elemProps)));
 });

package/form-field/lib/FormFieldHint.tsx

@@ -1,40 +1,33 @@
 import React from 'react';
-import {
-  createSubcomponent,
-  ExtractProps,
-  useTheme,
-  styled,
-  StyledType,
-} from '@workday/canvas-kit-react/common';
-import {space, type} from '@workday/canvas-kit-react/tokens';
-import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
+import {createSubcomponent, ExtractProps, useTheme} from '@workday/canvas-kit-react/common';
+import {space} from '@workday/canvas-kit-react/tokens';
 
 import {useFormFieldHint, useFormFieldModel} from './hooks';
-
-const StyledHint = styled(Box)<StyledType & BoxProps>({
-  ...type.levels.subtext.medium,
-});
+import {Subtext} from '@workday/canvas-kit-react/text';
 
 export const FormFieldHint = createSubcomponent('p')({
   displayName: 'FormField.Hint',
   modelHook: useFormFieldModel,
   elemPropsHook: useFormFieldHint,
-})<ExtractProps<typeof Box, never>>(({children, ...elemProps}, Element, model) => {
-  const theme = useTheme();
+})<Omit<ExtractProps<typeof Subtext, never>, 'size'>>(
+  ({children, ...elemProps}, Element, model) => {
+    const theme = useTheme();
 
-  if (!children) {
-    // If there is no hint text just skip rendering
-    return null;
-  }
+    if (!children) {
+      // If there is no hint text just skip rendering
+      return null;
+    }
 
-  return (
-    <StyledHint
-      as={Element}
-      color={model.state.hasError ? theme.canvas.palette.error.main : undefined}
-      marginY={space.xxs}
-      {...elemProps}
-    >
-      {children}
-    </StyledHint>
-  );
-});
+    return (
+      <Subtext
+        as={Element}
+        size="medium"
+        color={model.state.hasError ? theme.canvas.palette.error.main : undefined}
+        marginY={space.xxs}
+        {...elemProps}
+      >
+        {children}
+      </Subtext>
+    );
+  }
+);

package/form-field/lib/FormFieldLabel.tsx

@@ -1,15 +1,8 @@
 import React from 'react';
 
-import {
-  createSubcomponent,
-  ExtractProps,
-  useTheme,
-  styled,
-  StyledType,
-} from '@workday/canvas-kit-react/common';
-import {Box, HStack, StackSpacing} from '@workday/canvas-kit-react/layout';
-import {type} from '@workday/canvas-kit-react/tokens';
-
+import {createSubcomponent, ExtractProps, useTheme} from '@workday/canvas-kit-react/common';
+import {HStack, StackSpacing} from '@workday/canvas-kit-react/layout';
+import {LabelText, Text} from '@workday/canvas-kit-react/text';
 import {useFormFieldLabel, useFormFieldModel} from './hooks';
 
 export interface FormFieldLabelProps extends Omit<ExtractProps<typeof HStack, never>, 'spacing'> {
@@ -24,17 +17,6 @@ export interface FormFieldLabelProps extends Omit<ExtractProps<typeof HStack, ne
   spacing?: StackSpacing;
 }
 
-const StyledFormFieldLabel = styled('span')({
-  ...type.levels.subtext.large,
-  fontWeight: type.properties.fontWeights.medium,
-});
-
-const StyledAsterisk = styled(Box)<StyledType>({
-  fontSize: type.properties.fontSizes[20],
-  fontWeight: type.properties.fontWeights.regular,
-  textDecoration: 'unset',
-});
-
 export const FormFieldLabel = createSubcomponent('label')({
   displayName: 'FormField.Label',
   modelHook: useFormFieldModel,
@@ -44,11 +26,19 @@ export const FormFieldLabel = createSubcomponent('label')({
 
   return (
     <HStack as={Element} spacing={spacing} minWidth="180px" {...elemProps}>
-      <StyledFormFieldLabel>{children}</StyledFormFieldLabel>
+      <LabelText as="span" fontWeight="medium">
+        {children}
+      </LabelText>
       {model.state.isRequired && (
-        <StyledAsterisk as="span" color={theme.canvas.palette.error.main} aria-hidden="true">
+        <Text
+          fontSize={20}
+          fontWeight="regular"
+          textDecoration="unset"
+          color={theme.canvas.palette.error.main}
+          aria-hidden="true"
+        >
           *
-        </StyledAsterisk>
+        </Text>
       )}
     </HStack>
   );

package/index.ts

@@ -1,11 +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/menu/lib/Menu.tsx

@@ -1,23 +1,35 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
 
-import {MenuItemProps} from './MenuItem';
+import {DeprecatedMenuItemProps} from './MenuItem';
 import {Card} from '@workday/canvas-kit-react/card';
 import {commonColors, space, borderRadius} from '@workday/canvas-kit-react/tokens';
 import {hideMouseFocus, GrowthBehavior, generateUniqueId} 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;
   /**
@@ -25,7 +37,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;
   /**
@@ -33,16 +45,24 @@ 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;
 }
 
@@ -57,14 +77,22 @@ const List = styled('ul')({
   ...hideMouseFocus,
 });
 
-export 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 class DeprecatedMenu extends React.Component<DeprecatedMenuProps, DeprecatedMenuState> {
   private id = generateUniqueId();
   private animateId!: number;
 
   private menuRef: React.RefObject<HTMLUListElement>;
   private firstCharacters!: string[];
 
-  constructor(props: MenuProps) {
+  constructor(props: DeprecatedMenuProps) {
     super(props);
     this.menuRef = React.createRef();
 
@@ -79,7 +107,7 @@ export class Menu extends React.Component<MenuProps, MenuState> {
     };
   }
 
-  componentDidUpdate(prevProps: MenuProps) {
+  componentDidUpdate(prevProps: DeprecatedMenuProps) {
     if (this.props.children !== prevProps.children) {
       this.setFirstCharacters();
       this.setInitialSelectedItem();
@@ -95,6 +123,13 @@ export class Menu extends React.Component<MenuProps, MenuState> {
   }
 
   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();
   }
@@ -119,6 +154,7 @@ export class Menu extends React.Component<MenuProps, MenuState> {
     } = this.props;
     const {selectedItemIndex} = this.state;
     const cardWidth = grow ? '100%' : width;
+    let interactiveItemIndex: number | null = null;
 
     return (
       <Card display="inline-block" padding={space.zero} width={cardWidth} depth={3}>
@@ -133,17 +169,22 @@ export class Menu extends React.Component<MenuProps, MenuState> {
             ref={this.menuRef}
             {...elemProps}
           >
-            {React.Children.map(children, (menuItem, index) => {
+            {React.Children.map(children, menuItem => {
               if (!React.isValidElement(menuItem)) {
                 return;
               }
-              const itemId = `${id}-${index}`;
+              let itemId;
+              if (!menuItem.props.isHeader) {
+                interactiveItemIndex = (interactiveItemIndex ?? -1) + 1;
+                itemId = `${id}-${interactiveItemIndex}`;
+              }
               return (
                 <React.Fragment key={itemId}>
                   {React.cloneElement(menuItem, {
                     onClick: (event: React.MouseEvent) => this.handleClick(event, menuItem.props),
                     id: itemId,
-                    isFocused: selectedItemIndex === index,
+                    isFocused:
+                      selectedItemIndex === interactiveItemIndex && !menuItem.props.isHeader,
                   })}
                 </React.Fragment>
               );
@@ -175,9 +216,12 @@ export class Menu extends React.Component<MenuProps, MenuState> {
     const children = React.Children.toArray(this.props.children);
     let nextSelectedIndex = 0;
     let isShortcut = false;
-    const itemCount = children.length;
-    const firstItem = 0;
-    const lastItem = itemCount - 1;
+    const interactiveItems = children.filter(child => {
+      return !(child as React.ReactElement<DeprecatedMenuItemProps>)?.props?.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;
@@ -197,18 +241,16 @@ export class Menu extends React.Component<MenuProps, MenuState> {
       switch (event.key) {
         case 'ArrowUp':
         case 'ArrowDown':
-        case 'Down': // IE/Edge specific value
-        case 'Up': // IE/Edge specific value
           const direction = event.key === 'ArrowUp' ? -1 : 1;
           isShortcut = true;
           const nextIndex = this.state.selectedItemIndex + direction;
           nextSelectedIndex =
-            nextIndex < 0 ? lastItem : nextIndex >= itemCount ? firstItem : nextIndex;
+            nextIndex < 0 ? lastIndex : nextIndex >= interactiveItemCount ? firstIndex : nextIndex;
           break;
 
         case 'Home':
         case 'End':
-          const skipTo = event.key === 'Home' ? firstItem : lastItem;
+          const skipTo = event.key === 'Home' ? firstIndex : lastIndex;
           isShortcut = true;
           nextSelectedIndex = skipTo;
           break;
@@ -231,7 +273,9 @@ export class Menu extends React.Component<MenuProps, MenuState> {
         case ' ':
         case 'Enter':
           nextSelectedIndex = this.state.selectedItemIndex;
-          const child = children[this.state.selectedItemIndex] as React.ReactElement<MenuItemProps>;
+          const child = interactiveItems[this.state.selectedItemIndex] as React.ReactElement<
+            DeprecatedMenuItemProps
+          >;
           this.handleClick(event, child.props);
           isShortcut = true;
           break;
@@ -248,11 +292,11 @@ export class Menu extends React.Component<MenuProps, MenuState> {
 
   private handleClick = (
     event: React.MouseEvent | React.KeyboardEvent,
-    menuItemProps: MenuItemProps
+    menuItemProps: DeprecatedMenuItemProps
   ): void => {
     /* 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) {
@@ -308,6 +352,9 @@ export class Menu extends React.Component<MenuProps, MenuState> {
     };
 
     const firstCharacters = React.Children.map(this.props.children, child => {
+      if ((child as React.ReactElement<DeprecatedMenuItemProps>)?.props?.isHeader) {
+        return;
+      }
       return getFirstCharacter(child);
     });
 

package/menu/lib/MenuItem.tsx

@@ -11,51 +11,64 @@ import {
 import {CanvasSystemIcon} from '@workday/design-assets-types';
 import {SystemIcon, SystemIconProps} from '@workday/canvas-kit-react/icon';
 
-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;
 }
 
-const Item = styled('li')<Pick<MenuItemProps, 'isDisabled' | 'isFocused'>>(
+const Item = styled('li')<Pick<DeprecatedMenuItemProps, 'isDisabled' | 'isFocused' | 'isHeader'>>(
   {
     ...type.levels.subtext.large,
     padding: `${space.xxs} ${space.s}`,
@@ -71,6 +84,9 @@ const Item = styled('li')<Pick<MenuItemProps, 'isDisabled' | 'isFocused'>>(
       outline: 'none',
     },
   },
+  ({isHeader}) => {
+    return {pointerEvents: isHeader ? 'none' : 'all'};
+  },
   ({isFocused, isDisabled}) => {
     if (!isFocused && !isDisabled) {
       return {
@@ -237,10 +253,27 @@ const scrollIntoViewIfNeeded = (elem: HTMLElement, centerIfNeeded = true): void
   }
 };
 
-export 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 class DeprecatedMenuItem extends React.Component<DeprecatedMenuItemProps> {
   ref = React.createRef<HTMLLIElement>();
 
-  componentDidUpdate = (prevProps: MenuItemProps) => {
+  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
+      `
+    );
+  }
+
+  componentDidUpdate = (prevProps: DeprecatedMenuItemProps) => {
     if (!prevProps.isFocused && this.props.isFocused) {
       if (this.ref.current) {
         scrollIntoViewIfNeeded(this.ref.current);
@@ -248,7 +281,7 @@ export class MenuItem extends React.Component<MenuItemProps> {
     }
   };
 
-  render(): React.ReactNode {
+  render() {
     const {
       onClick,
       children,
@@ -258,6 +291,7 @@ export class MenuItem extends React.Component<MenuItemProps> {
       hasDivider,
       isDisabled,
       isFocused,
+      isHeader,
       role,
       ...elemProps
     } = this.props;
@@ -272,11 +306,12 @@ export class MenuItem extends React.Component<MenuItemProps> {
           ref={this.ref}
           tabIndex={-1}
           id={id}
-          role={role}
+          role={isHeader ? 'presentation' : role}
           onClick={this.handleClick}
           aria-disabled={isDisabled ? true : undefined}
           isDisabled={!!isDisabled}
           isFocused={!!isFocused}
+          isHeader={!!isHeader}
           {...elemProps}
         >
           {icon && iconProps && <StyledSystemIcon {...iconProps} />}
@@ -306,7 +341,7 @@ export class MenuItem extends React.Component<MenuItemProps> {
  */
 // TODO: Remove this ts-ignore when we convert to a functional component
 // @ts-ignore
-MenuItem.defaultProps = {
+DeprecatedMenuItem.defaultProps = {
   shouldClose: true,
   role: 'menuitem',
 };