@workday/canvas-kit-react 12.0.0-alpha.862-next.0 → 12.0.0-alpha.898-next.0

package/avatar/lib/Avatar.tsx

@@ -1,20 +1,28 @@
 import React, {useState} from 'react';
 import {Property} from 'csstype';
 import {createComponent, focusRing} from '@workday/canvas-kit-react/common';
-import {createStencil, calc} from '@workday/canvas-kit-styling';
+import {createStencil, calc, CSProps, px2rem} from '@workday/canvas-kit-styling';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {borderRadius} from '@workday/canvas-kit-react/tokens';
-import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {SystemIcon, SystemIconCircleSize, systemIconStencil} from '@workday/canvas-kit-react/icon';
 
 import {userIcon} from '@workday/canvas-system-icons-web';
 import {system} from '@workday/canvas-tokens-web';
 
-export interface AvatarProps {
+/**
+ * @deprecated `AvatarVariant` is deprecated and will be removed in a future major version. Update your types and values to use the string literal of either `light` or `dark`.
+ */
+export enum AvatarVariant {
+  Light,
+  Dark,
+}
+
+export interface AvatarProps extends CSProps {
   /**
    * The variant of the avatar. Use `light` on dark backgrounds and `dark` on light backgrounds.
    * @default "light"
    */
-  variant?: 'light' | 'dark';
+  variant?: 'light' | 'dark' | AvatarVariant;
   /**
    * The size of the Avatar.
    * - `extraExtraLarge`: 7.5rem x 7.5rem (120px  x 120px)
@@ -26,7 +34,15 @@ export interface AvatarProps {
    * @default "medium"
    */
   size?: /** size of small */
-  'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge' | 'extraExtraLarge' | (string & {});
+  | 'extraSmall'
+    | 'small'
+    | 'medium'
+    | 'large'
+    | 'extraLarge'
+    | 'extraExtraLarge'
+    | (string & {})
+    | SystemIconCircleSize
+    | number;
   /**
    * The alt text of the Avatar image. This prop is also used for the aria-label.
    * @default Avatar
@@ -67,14 +83,14 @@ export const avatarStencil = createStencil({
     ':is(button)': {
       cursor: 'pointer',
     },
-    ['& > [data-slot="avatar-icon"]']: {
+    ['& > [data-part="avatar-icon"]']: {
       transition: 'opacity 150ms linear',
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
       [systemIconStencil.vars.size]: calc.multiply(size, 0.625),
     },
-    ['& > [data-slot="avatar-image"]']: {
+    ['& > [data-part="avatar-image"]']: {
       position: 'absolute',
       width: '100%',
       height: '100%',
@@ -86,13 +102,13 @@ export const avatarStencil = createStencil({
     variant: {
       light: {
         backgroundColor: system.color.bg.alt.default,
-        ['& [data-slot="avatar-icon"]']: {
+        ['& [data-part="avatar-icon"]']: {
           [systemIconStencil.vars.color]: system.color.fg.default,
         },
       },
       dark: {
         backgroundColor: system.color.bg.primary.default,
-        ['& [data-slot="avatar-icon"]']: {
+        ['& [data-part="avatar-icon"]']: {
           [systemIconStencil.vars.color]: system.color.fg.inverse,
         },
       },
@@ -101,112 +117,112 @@ export const avatarStencil = createStencil({
       extraSmall: {
         width: system.space.x4,
         height: system.space.x4,
-        ['& [data-slot="avatar-icon"]']: {
+        ['& [data-part="avatar-icon"]']: {
           [systemIconStencil.vars.size]: calc.multiply(system.space.x4, 0.625),
         },
       },
       small: {
         width: system.space.x6,
         height: system.space.x6,
-        ['& [data-slot="avatar-icon"]']: {
+        ['& [data-part="avatar-icon"]']: {
           [systemIconStencil.vars.size]: calc.multiply(system.space.x6, 0.625),
         },
       },
       medium: {
         width: system.space.x8,
         height: system.space.x8,
-        ['& [data-slot="avatar-icon"]']: {
+        ['& [data-part="avatar-icon"]']: {
           [systemIconStencil.vars.size]: calc.multiply(system.space.x8, 0.625),
         },
       },
       large: {
         width: system.space.x10,
         height: system.space.x10,
-        ['& [data-slot="avatar-icon"]']: {
+        ['& [data-part="avatar-icon"]']: {
           [systemIconStencil.vars.size]: calc.multiply(system.space.x10, 0.625),
         },
       },
       extraLarge: {
         width: system.space.x16,
         height: system.space.x16,
-        ['& [data-slot="avatar-icon"]']: {
+        ['& [data-part="avatar-icon"]']: {
           [systemIconStencil.vars.size]: calc.multiply(system.space.x16, 0.625),
         },
       },
       extraExtraLarge: {
         width: calc.multiply(system.space.x10, 3),
         height: calc.multiply(system.space.x10, 3),
-        ['& [data-slot="avatar-icon"]']: {
+        ['& [data-part="avatar-icon"]']: {
           [systemIconStencil.vars.size]: calc.multiply(calc.multiply(system.space.x10, 3), 0.625),
         },
       },
     },
     objectFit: {
       contain: {
-        ['& [data-slot="avatar-image"]']: {
+        ['& [data-part="avatar-image"]']: {
           objectFit: 'contain',
         },
       },
       fill: {
-        ['& [data-slot="avatar-image"]']: {
+        ['& [data-part="avatar-image"]']: {
           objectFit: 'fill',
         },
       },
       cover: {
-        ['& [data-slot="avatar-image"]']: {
+        ['& [data-part="avatar-image"]']: {
           objectFit: 'cover',
         },
       },
       ['scale-down']: {
-        ['& [data-slot="avatar-image"]']: {
+        ['& [data-part="avatar-image"]']: {
           objectFit: 'scale-down',
         },
       },
       none: {
-        ['& [data-slot="avatar-image"]']: {
+        ['& [data-part="avatar-image"]']: {
           objectFit: 'none',
         },
       },
       ['-moz-initial']: {
-        ['& [data-slot="avatar-image"]']: {
+        ['& [data-part="avatar-image"]']: {
           objectFit: '-moz-initial',
         },
       },
       ['initial']: {
-        ['& [data-slot="avatar-image"]']: {
+        ['& [data-part="avatar-image"]']: {
           objectFit: 'initial',
         },
       },
       ['inherit']: {
-        ['& [data-slot="avatar-image"]']: {
+        ['& [data-part="avatar-image"]']: {
           objectFit: 'inherit',
         },
       },
       ['revert']: {
-        ['& [data-slot="avatar-image"]']: {
+        ['& [data-part="avatar-image"]']: {
           objectFit: 'revert',
         },
       },
       ['unset']: {
-        ['& [data-slot="avatar-image"]']: {
+        ['& [data-part="avatar-image"]']: {
           objectFit: 'unset',
         },
       },
     },
     isImageLoaded: {
       true: {
-        ['& [data-slot="avatar-icon"]']: {
+        ['& [data-part="avatar-icon"]']: {
           opacity: 0,
         },
-        ['& [data-slot="avatar-image"]']: {
+        ['& [data-part="avatar-image"]']: {
           opacity: 1,
         },
       },
       false: {
-        ['& [data-slot="avatar-icon"]']: {
+        ['& [data-part="avatar-icon"]']: {
           opacity: 1,
         },
-        ['& [data-slot="avatar-image"]']: {
+        ['& [data-part="avatar-image"]']: {
           opacity: 0,
         },
       },
@@ -239,22 +255,51 @@ export const Avatar = createComponent('button')({
       setImageLoaded(false);
     }, [url]);
 
+    // TODO: Remove this warning for a hard breaking change in v13
+    if (process.env.NODE_ENV === 'development') {
+      if (typeof variant === 'number') {
+        console.warn(
+          'Avatar: Avatar.Variant is deprecated and will be removed in v13. Please use a string literal of "light"  or "dark"'
+        );
+      }
+      if (typeof size === 'number') {
+        console.warn(
+          "Avatar: Avatar.Size is deprecated and will be removed in v13. Use the string literal values for size: 'extraSmall' | 'small | 'medium' | 'large' | 'extraLarge | 'extraExtraLarge' | (string & {})"
+        );
+      }
+    }
     return (
       <Element
         ref={ref}
         aria-label={altText}
+        role={Element === 'button' ? 'button' : 'img'}
         {...mergeStyles(elemProps, [
           avatarStencil({
-            variant,
-            size,
+            variant:
+              variant === AvatarVariant.Light
+                ? 'light'
+                : variant === AvatarVariant.Dark
+                ? 'dark'
+                : variant,
+            size: typeof size === 'number' ? px2rem(size) : size,
             objectFit,
             isImageLoaded: imageLoaded,
           }),
         ])}
       >
-        <SystemIcon icon={userIcon} data-slot="avatar-icon" />
-        {url && <img data-slot="avatar-image" src={url} alt={altText} onLoad={loadImage} />}
+        <SystemIcon icon={userIcon} data-part="avatar-icon" />
+        {url && <img data-part="avatar-image" src={url} alt={altText} onLoad={loadImage} />}
       </Element>
     );
   },
+  subComponents: {
+    /**
+     * @deprecated `Avatar.Variant` is deprecated and will be removed in a future major version. Use the string literal of `light` or `dark`.
+     */
+    Variant: AvatarVariant,
+    /**
+     * @deprecated `Avatar.Size` is deprecated and will be removed in a future major version. Use the string literal values for size: 'extraSmall' | 'small | 'medium' | 'large' | 'extraLarge | 'extraExtraLarge' | (string & {})
+     */
+    Size: SystemIconCircleSize,
+  },
 });

package/breadcrumbs/lib/BreadcrumbsItem.tsx

@@ -1,10 +1,5 @@
 import * as React from 'react';
-import {
-  composeHooks,
-  createSubcomponent,
-  createElemPropsHook,
-  useIsRTL,
-} from '@workday/canvas-kit-react/common';
+import {composeHooks, createSubcomponent, useIsRTL} from '@workday/canvas-kit-react/common';
 import {
   useListItemRegister,
   useOverflowListItemMeasure,
@@ -33,27 +28,7 @@ export interface BreadcrumbsItemProps extends FlexProps {
   'data-id'?: string;
 }
 
-export const useBreadcrumbsItem = composeHooks(
-  useOverflowListItemMeasure,
-  createElemPropsHook(useBreadcrumbsModel)(
-    (
-      {state},
-      _,
-      elemProps: {
-        'data-id'?: string;
-        item?: {id: string};
-      } = {}
-    ) => {
-      const [localId] = React.useState(elemProps['data-id'] || elemProps.item?.id || '');
-
-      return {
-        inert: state.nonInteractiveIds.includes(localId) ? '' : undefined,
-        disabled: undefined,
-      };
-    }
-  ),
-  useListItemRegister
-);
+export const useBreadcrumbsItem = composeHooks(useOverflowListItemMeasure, useListItemRegister);
 
 export const BreadcrumbsItem = createSubcomponent('li')({
   displayName: 'Breadcrumbs.Item',

package/breadcrumbs/lib/BreadcrumbsOverflowButton.tsx

@@ -40,7 +40,7 @@ export const BreadcrumbsOverflowButton = createSubcomponent('button')({
   elemPropsHook: useBreadcrumbsOverflowButton,
 })<BreadcrumbsOverflowButtonProps>(({style, ...elemProps}, Element) => {
   return (
-    <Flex alignItems="center" {...style}>
+    <Flex as="li" alignItems="center" {...style}>
       <TertiaryButton as={Element} icon={relatedActionsIcon} {...elemProps} />
       <SystemIcon
         icon={chevronRightSmallIcon}

package/button/lib/BaseButton.tsx

@@ -189,7 +189,7 @@ export const buttonStencil = createStencil({
         ),
         outerColor: cssVar(
           buttonColorPropVars.focus.boxShadowOuter,
-          cssVar(boxShadowOuter, brand.primary.base)
+          cssVar(boxShadowOuter, brand.common.focusOutline)
         ),
       }),
     },

package/button/lib/types.ts

@@ -16,7 +16,18 @@ export interface ButtonColors {
   hover?: ButtonStateColors;
   active?: ButtonStateColors;
   focus?: ButtonStateColors & {
+    /**
+     * @deprecated This option is no longer supported at run time and will be removed from the type interface in a v12. If you want to customize the focus ring, use `boxShadowInner` and `boxShadowOuter` to update the inner and outer colors of the focus ring. Use with caution.
+     */
     focusRing?: CSSObject;
+    /**
+     * Updates the color of the inner `box-shadow` within a focus ring.
+     */
+    boxShadowInner?: string;
+    /**
+     * Updates the color of the outer `box-shadow` within a focus ring.
+     */
+    boxShadowOuter?: string;
   };
   disabled?: ButtonStateColors;
 }

package/checkbox/lib/CheckboxInput.tsx

@@ -223,8 +223,8 @@ const checkboxInputStencil = createStencil({
 
 export const CheckboxInput = createComponent('input')({
   displayName: 'CheckboxInput',
-  Component: ({variant, error, ...elemProps}: CheckboxProps, ref, Element) => {
-    const {checked, disabled, indeterminate} = elemProps;
+  Component: ({variant, error, indeterminate, ...elemProps}: CheckboxProps, ref, Element) => {
+    const {checked, disabled} = elemProps;
 
     return (
       <Element

package/collection/lib/ListBox.tsx

@@ -3,9 +3,8 @@ import {
   createContainer,
   createElemPropsHook,
   createSubcomponent,
-  ExtractProps,
 } from '@workday/canvas-kit-react/common';
-import {Box, Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
@@ -13,16 +12,34 @@ import {useListModel} from './useListModel';
 import {useListRenderItems} from './useListRenderItem';
 import {useListItemRegister} from './useListItemRegister';
 
-export interface ListBoxProps<T = any> extends Omit<ExtractProps<typeof Flex, never>, 'children'> {
+export interface ListBoxProps<T = any> extends Omit<FlexProps, 'children'> {
   children?: React.ReactNode | ((item: T, index: number) => React.ReactNode);
+  /**
+   * Set the margin top of the list box. You must use this prop and not style any other way. The
+   * `Menu` uses virtualization and needs margins to be set on the correct element. This ensure
+   * proper rendering. If a `marginTop` is not provided, the value falls back to `marginY`.
+   */
+  marginTop?: FlexProps['marginTop'];
+  /**
+   * Set the margin bottom of the list box. You must use this prop and not style any other way. The
+   * `Menu` uses virtualization and needs margins to be set on the correct element. This ensure
+   * proper rendering. If a `marginBottom` is not provided, the value falls back to `marginY`.
+   */
+  marginBottom?: FlexProps['marginBottom'];
+  /**
+   * Set the margin top and bottom of the list box. You must use this prop and not style any other way. The
+   * `Menu` uses virtualization and needs margins to be set on the correct element. This ensure
+   * proper rendering.
+   */
+  marginY?: FlexProps['marginY'];
 }
 
 export const ListBoxItem = createSubcomponent('li')({
   displayName: 'Item',
   modelHook: useListModel,
   elemPropsHook: useListItemRegister,
-})<ExtractProps<typeof Flex, never>>((elemProps, Element) => {
-  return <Box as={Element} {...elemProps} />;
+})<FlexProps>((elemProps, Element) => {
+  return <Element {...mergeStyles(elemProps)} />;
 });
 
 export const useListBox = createElemPropsHook(useListModel)(model => {
@@ -50,6 +67,7 @@ const listBoxContainerStencil = createStencil({
 
 const listBoxStencil = createStencil({
   base: {
+    display: 'flex',
     flexDirection: 'column',
     marginTop: system.space.zero,
     marginBottom: system.space.zero,
@@ -104,16 +122,16 @@ export const ListBox = createContainer('ul')({
           {
             style: {
               maxHeight,
-              marginBottom: marginY || marginBottom,
-              marginTop: marginY || marginBottom,
+              marginBottom: marginBottom ?? marginY,
+              marginTop: marginTop ?? marginY,
             },
           },
           listBoxContainerStencil({orientation: model.state.orientation})
         )}
       >
-        <Flex as={Element} {...mergeStyles(elemProps, listBoxStencil())}>
+        <Element {...mergeStyles(elemProps, listBoxStencil())}>
           {useListRenderItems(model, elemProps.children)}
-        </Flex>
+        </Element>
       </div>
     );
   }

package/collection/lib/useListRenderItem.tsx

@@ -29,7 +29,7 @@ export function useListRenderItems<T>(
             const item = model.state.items[virtual.index];
             const child = children(item.value, virtual.index);
             if (React.isValidElement(child)) {
-              return React.cloneElement(child, {
+              return React.cloneElement(child as any, {
                 // We call this `virtual` instead of `virtualItem` to avoid a React render warning
                 // about capital letters in attributes. React thinks this will be applied to the DOM
                 // element even though we remove it later...
@@ -43,9 +43,9 @@ export function useListRenderItems<T>(
         : model.state.items.map(item => {
             const child = children(item.value, item.index);
             if (React.isValidElement(child)) {
-              return React.cloneElement(child, {
+              return React.cloneElement(child as any, {
                 key: item.id || item.index,
-                item: item,
+                item,
               });
             }
             return child;

package/collection/lib/useOverflowListItemMeasure.tsx

@@ -45,7 +45,9 @@ export const useOverflowListItemMeasure = createElemPropsHook(useOverflowListMod
     return {
       ref: elementRef,
       'aria-hidden': hidden || undefined,
+
       style: hidden ? hiddenStyles : {},
+      inert: hidden ? '' : undefined,
     };
   }
 );

package/combobox/lib/ComboboxMenuItem.tsx

@@ -11,6 +11,7 @@ import {SystemIcon} from '@workday/canvas-kit-react/icon';
 import {
   useListItemAllowChildStrings,
   useListItemRegister,
+  isSelected,
 } from '@workday/canvas-kit-react/collection';
 import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
 
@@ -45,7 +46,7 @@ export const useComboboxMenuItem = composeHooks(
       event.preventDefault();
     };
 
-    const selected = model.state.cursorId === id;
+    const selected = isSelected(id, model.state);
 
     return {
       role: 'option',

package/common/lib/AccessibleHide.tsx

@@ -19,7 +19,7 @@ export const accessibleHide = {
   border: 0,
 } as const;
 
-const accessibleHideStyles = createStyles(accessibleHide);
+export const accessibleHideStyles = createStyles(accessibleHide);
 
 /**
  * A convenient component wrapper to visually hide content, while still making it accessible to screen readers

package/common/lib/theming/getObjectProxy.ts

@@ -20,7 +20,8 @@ export function getObjectProxy<T extends {}>(
     return new Proxy(target, {
       get<T>(target: T, prop: string | symbol, receiver: any) {
         if (typeof (fallback as any)[prop] === 'object') {
-          return getObjectProxy(target[prop as keyof T], (fallback as any)[prop]);
+          // @ts-ignore
+          return getObjectProxy(target[prop], (fallback as any)[prop]);
         }
         const targetProp = target[prop as keyof T];
         if (targetProp !== undefined) {

package/common/lib/theming/useTheme.ts

@@ -98,7 +98,7 @@ export function useTheme(theme?: PartialEmotionCanvasTheme): EmotionCanvasTheme
         return getFilledTheme(contextTheme);
       }
     } catch (e) {
-      if (process && process.env.NODE_ENV === 'development') {
+      if (process.env.NODE_ENV === 'development') {
         console.warn(
           'useTheme: Context not supported or invalid. Please consider using `getTheme` function instead for `styled` or class components.'
         );

package/common/lib/utils/components.ts

@@ -538,7 +538,7 @@ export const createComponent =
     const ReturnedComponent = React.forwardRef<E, P & {as?: React.ElementType}>(
       ({as: asOverride, ...props}, ref) => {
         return Component(
-          props as P,
+          props as any,
           ref as ExtractRef<E>,
           // Cast to `any` to avoid: "ts(2345): Type 'undefined' is not assignable to type 'E extends
           // undefined ? never : E'" I'm not sure I can actually cast to this conditional type and it

package/common/lib/utils/deepMerge.ts

@@ -4,7 +4,7 @@ export function deepMerge<T, S>(target: T, source: S): T & S {
     return source as T & S;
   }
 
-  Object.keys(source).forEach(key => {
+  Object.keys(source as object).forEach(key => {
     const targetValue = target[key as keyof T];
     const sourceValue = source[key as keyof S];
 

package/common/lib/utils/models.ts

@@ -228,7 +228,13 @@ export const createEvents =
  */
 export type Generic = any;
 
-export type ModelExtras<TDefaultConfig, TRequiredConfig, TState, TEvents, TModel> = {
+export type ModelExtras<
+  TDefaultConfig,
+  TRequiredConfig,
+  TState,
+  TEvents extends Record<string, any>,
+  TModel
+> = {
   /** Default config of the model. Useful when composing models to reused config */
   defaultConfig: TDefaultConfig;
   /** Required config of the model. Useful when composing models to reused config */
@@ -287,10 +293,12 @@ export type ModelFn<TDefaultConfig, TRequiredConfig, TModel> = TModel extends {
   state: infer TState;
   events: infer TEvents;
 }
-  ? (<TT_Special_Generic>( // special generic used by post processing to handle generic models
-      config?: Partial<TDefaultConfig> & TRequiredConfig & ToEventConfig<TState, TEvents>
-    ) => TModel) &
-      ModelExtras<TDefaultConfig, TRequiredConfig, TState, TEvents, TModel>
+  ? TEvents extends Record<string, any>
+    ? (<TT_Special_Generic>( // special generic used by post processing to handle generic models
+        config?: Partial<TDefaultConfig> & TRequiredConfig & ToEventConfig<TState, TEvents>
+      ) => TModel) &
+        ModelExtras<TDefaultConfig, TRequiredConfig, TState, TEvents, TModel>
+    : never
   : never;
 
 /**

package/dist/commonjs/action-bar/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    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];

package/dist/commonjs/action-bar/lib/ActionBar.d.ts

@@ -3801,7 +3801,7 @@ export declare const ActionBar: import("@workday/canvas-kit-react/common").Compo
             }, {}, {}>;
             Text: import("@emotion/styled").StyledComponent<{
                 theme?: import("@emotion/react").Theme | undefined;
-                as?: React.ElementType<any> | undefined;
+                as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
             }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
         };
         Divider: import("@workday/canvas-kit-react/common").ElementComponent<"hr", unknown>;

package/dist/commonjs/action-bar/lib/ActionBar.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    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];
@@ -45,7 +49,7 @@ const ActionBarItem_1 = require("./ActionBarItem");
  * <ActionBar model={model}>{Child components}</ActionBar>;
  * ```
  */
-exports.ActionBar = common_1.createContainer()({
+exports.ActionBar = (0, common_1.createContainer)()({
     displayName: 'ActionBar',
     modelHook: useActionBarModel_1.useActionBarModel,
     subComponents: {

package/dist/commonjs/action-bar/lib/ActionBarItem.d.ts

@@ -101,6 +101,7 @@ export declare const useActionBarItem: import("@workday/canvas-kit-react/common"
     ref: (instance: HTMLElement | null) => void;
     'aria-hidden': true | undefined;
     style: {};
+    inert: string | undefined;
 } & {
     ref: (instance: HTMLElement | null) => void;
     'data-id': string;

package/dist/commonjs/action-bar/lib/ActionBarItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBarItem.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,WAAW,kBAAkB;IACjC;;;;;;OAMG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAgE,CAAC;AAE9F,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMxB,CAAC"}
+{"version":3,"file":"ActionBarItem.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,WAAW,kBAAkB;IACjC;;;;;;OAMG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAgE,CAAC;AAE9F,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMxB,CAAC"}