@workday/canvas-kit-react 8.0.0 → 8.0.2

package/common/lib/utils/components.ts

@@ -10,6 +10,9 @@ export type StyledType = {
   as?: React.ElementType;
 };
 
+// For React class components
+type Constructor<T> = new (...args: any[]) => T;
+
 /**
  * Extract a Ref from T if it exists
  * This will return the following:
@@ -20,6 +23,8 @@ export type StyledType = {
  */
 type ExtractRef<T> = T extends undefined // test if T was even passed in
   ? never // T not passed in, we'll set the ref to `never`
+  : T extends Constructor<infer C>
+  ? React.LegacyRef<C>
   : React.Ref<
       T extends keyof ElementTagNameMap // test if T is an element string like 'button' or 'div'
         ? ElementTagNameMap[T] // if yes, the ref should be the element interface. `'button' => HTMLButtonElement`
@@ -212,7 +217,7 @@ interface RefForwardingComponent<T, P = {}> {
      * `never`
      */
     Element: T extends undefined ? never : T
-  ): React.ReactElement | null;
+  ): JSX.Element | null;
 }
 
 function defaultGetElemProps(input: any) {
@@ -232,7 +237,7 @@ export const createContainer = <
     Context?: React.Context<any>;
   } & {defaultConfig?: Record<string, any>},
   TDefaultContext extends {state: Record<string, any>; events: Record<string, any>},
-  TElemPropsHook extends (...args: any) => any,
+  TElemPropsHook,
   SubComponents = {}
 >({
   displayName,
@@ -247,16 +252,18 @@ export const createContainer = <
   defaultContext?: TDefaultContext;
   subComponents?: SubComponents;
 }) => {
-  const Context =
-    modelHook.Context ||
-    React.createContext({state: {}, events: {}, defaultConfig: modelHook.defaultConfig});
+  assert(
+    modelHook.Context,
+    'createContainer only works on models with context. Please use `createModelHook` to create the `modelHook`'
+  );
+  const Context = modelHook.Context;
 
   return <Props>(
     Component: (
-      props: Props & RemoveNull<ReturnType<TElemPropsHook>> & {ref: ExtractRef<E>},
+      props: CompoundProps<Props, TElemPropsHook, E>,
       Element: E extends undefined ? never : E,
       model: TModelHook extends (config: infer TConfig) => infer TModel ? TModel : never
-    ) => React.ReactElement | null
+    ) => JSX.Element | null
   ): (TModelHook extends (config: infer TConfig) => infer TModel
     ? E extends undefined
       ? ComponentM<Props & TConfig, TModel>
@@ -267,7 +274,7 @@ export const createContainer = <
           E extends undefined ? React.FC : E,
           Props & TConfig,
           TModel
-        > & {Context: React.Context<TModel>}
+        >
     : never) &
     SubComponents => {
     const ReturnedComponent = React.forwardRef<E, Props & {as?: React.ElementType} & {model?: any}>(
@@ -275,14 +282,14 @@ export const createContainer = <
         const localModel = useDefaultModel(model, props, modelHook);
         const elemProps = ((modelHook as any).getElemProps || defaultGetElemProps)(props);
         const finalElemProps = elemPropsHook
-          ? elemPropsHook(localModel, elemProps, ref)
+          ? (elemPropsHook as any)(localModel, elemProps, ref)
           : elemProps;
 
         return React.createElement(
           Context.Provider,
           {value: localModel},
           Component(
-            finalElemProps as Props & RemoveNull<ReturnType<TElemPropsHook>> & {ref: ExtractRef<E>},
+            finalElemProps,
             // 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
             // doesn't actually matter, so cast to `any` it is.
@@ -298,9 +305,13 @@ export const createContainer = <
       // we'll cast to `Record<string, any>` for assignment. Note the lack of type checking
       // properties. Take care when changing the runtime of this function.
       (ReturnedComponent as Record<string, any>)[key] = (subComponents as Record<string, any>)[key];
+      // Add a displayName if one isn't already created. This prevents us from having to add
+      // `displayName` to subcomponents if a container component has a `displayName`
+      if (displayName && !(subComponents as Record<string, any>)[key].displayName) {
+        (subComponents as Record<string, any>)[key].displayName = `${displayName}.${key}`;
+      }
     });
     ReturnedComponent.displayName = displayName;
-    (ReturnedComponent as any).Context = Context;
 
     // Cast as `any`. We have already specified the return type. Be careful making changes to this
     // file due to this `any` `ReturnedComponent` is a `React.ForwardRefExoticComponent`, but we want
@@ -309,9 +320,30 @@ export const createContainer = <
   };
 };
 
+/**
+ * If elemProps returns `null` for a prop, that prop is to be removed from the prop
+ * list. This is useful for passing props to an elemProp hook that should not be exposed
+ * to the DOM element
+ */
 type RemoveNull<T> = {[K in keyof T]: Exclude<T[K], null>};
 
-// export type ModelComponentFn<TModelHook, TElemPropsHook, SubComponents> = <Props={}>(Component: ())
+/**
+ * Props for the compound component based on props, elemPropsHook, and element. It will
+ * return a prop interface according to all these inputs. The following will be added to
+ * the passed in `Props` type:
+ * - The prop interface returned by the `elemPropsHook` function
+ * - if there is no detected `ref` in the `Props` interface, a `ref` will be added based on the element type E
+ * - if there is no detected `children` in the `Props` interface, `children` will be added based on `ReactNode`
+ */
+type CompoundProps<Props, TElemPropsHook, E> = Props &
+  (TElemPropsHook extends (...args: any[]) => infer TProps // try to infer TProps returned from the elemPropsHook function
+    ? RemoveNull<TProps extends {ref: any} ? TProps : TProps & {ref: ExtractRef<E>}>
+    : {ref: ExtractRef<E>}) &
+  (Props extends {children: any}
+    ? {}
+    : {
+        children?: React.ReactNode;
+      });
 
 export const createSubcomponent = <
   E extends
@@ -331,6 +363,7 @@ export const createSubcomponent = <
   elemPropsHook,
   subComponents,
 }: {
+  /** @deprecated You no longer need to use displayName. A `displayName` will be automatically added if it belongs to a container */
   displayName?: string;
   modelHook: TModelHook;
   elemPropsHook?: TElemPropsHook;
@@ -343,20 +376,10 @@ export const createSubcomponent = <
 
   return <Props = {}>(
     Component: (
-      props: Props &
-        (TElemPropsHook extends (...args: any[]) => infer TProps // try to infer TProps returned from the elemPropsHook function
-          ? TProps extends {ref: infer R}
-            ? TProps
-            : TProps & {ref: ExtractRef<E>}
-          : {ref: ExtractRef<E>}) &
-        (Props extends {children: any}
-          ? {}
-          : {
-              children?: React.ReactNode;
-            }),
+      props: CompoundProps<Props, TElemPropsHook, E>,
       Element: E extends undefined ? never : E,
       model: TModelHook extends (...args: any[]) => infer TModel ? TModel : never
-    ) => React.ReactElement | null
+    ) => JSX.Element | null
   ): (TModelHook extends (...args: any[]) => infer TModel
     ? ElementComponentM<
         // E is not `undefined` here, but Typescript thinks it could be, so we add another `undefined`
@@ -393,7 +416,10 @@ export const createSubcomponent = <
       // properties. Take care when changing the runtime of this function.
       (ReturnedComponent as Record<string, any>)[key] = (subComponents as Record<string, any>)[key];
     });
-    ReturnedComponent.displayName = displayName;
+
+    if (displayName) {
+      ReturnedComponent.displayName = displayName;
+    }
 
     // Cast as `any`. We have already specified the return type. Be careful making changes to this
     // file due to this `any` `ReturnedComponent` is a `React.ForwardRefExoticComponent`, but we want

package/common/lib/utils/elements.ts

@@ -2,9 +2,9 @@
  * Is an element focusable? This function performs various tests to see if the element in question
  * can receive focus. Should skip disabled elements as they are not focusable.
  */
-export const isFocusable = (element: HTMLElement) => {
+export const isFocusable = (element: Element): boolean => {
   if (element.hasAttribute('disabled')) {
-    return null;
+    return false;
   }
 
   const nodeName = element.nodeName.toLowerCase();
@@ -12,14 +12,9 @@ export const isFocusable = (element: HTMLElement) => {
   const validAnchor = nodeName === 'a' && element.hasAttribute('href');
   const validAudioVideo = ['audio', 'video'].includes(nodeName) && element.hasAttribute('controls');
   const validImgObject = ['img', 'object'].includes(nodeName) && element.hasAttribute('usemap');
-  const validNativelyFocusable = [
-    'button',
-    'details',
-    'embed',
-    'iframe',
-    'select',
-    'textarea',
-  ].includes(nodeName);
+  const validNativelyFocusable =
+    ['button', 'details', 'embed', 'iframe', 'select', 'textarea'].includes(nodeName) &&
+    element.getAttribute('tabindex') !== '-1';
   const hasTabIndex = element.getAttribute('tabindex') === '0';
 
   return (
@@ -40,7 +35,7 @@ export const getFirstFocusableElement = (container: HTMLElement): HTMLElement |
 
   for (let i = 0; i < elements.length; i++) {
     const element = elements.item(i);
-    if (element && isFocusable(element as HTMLElement)) {
+    if (element && isFocusable(element) && element.getAttribute('tabindex') !== '-1') {
       return element as HTMLElement;
     }
   }
@@ -56,7 +51,7 @@ export const getLastFocusableElement = (container: HTMLElement): HTMLElement | n
 
   for (let i = elements.length - 1; i >= 0; i--) {
     const element = elements.item(i);
-    if (element && isFocusable(element as HTMLElement)) {
+    if (element && isFocusable(element) && element.getAttribute('tabindex') !== '-1') {
       return element as HTMLElement;
     }
   }

package/common/lib/utils/index.ts

@@ -15,4 +15,3 @@ export * from './useIsFullscreen';
 export * from './useModalityType';
 export * from './useWindowSize';
 export * from './useResizeObserver';
-export * from './StaticStates';

package/common/lib/utils/isWithinBreakpoint.ts

@@ -0,0 +1,6 @@
+/**
+ * This function determines whether or not a container's width is within two values.
+ */
+export const isWithinBreakpoint = (width: number, min: number, max?: number) => {
+  return width >= min && (!max || (max && width <= max - 0.5));
+};

package/common/lib/utils/models.ts

@@ -1,6 +1,9 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import React from 'react';
 
+/**
+ * @deprecated The returned model is now inferred from `createModelHook`
+ */
 export type Model<State, Events extends IEvent> = {
   state: State;
   events: Events;
@@ -60,6 +63,8 @@ type ToCallbackConfig<
  *   // additional config your model requires goes here
  *   id?: string
  * } & Partial<ToModelConfig<State, Events, typeof eventMap>>
+ *
+ * @deprecated `createModelHook` now infers the config type
  */
 export type ToModelConfig<
   TState extends Record<string, any>,
@@ -91,6 +96,8 @@ export type ToModelConfig<
  *     onOpen: 'open'
  *   }
  * })
+ *
+ * @deprecated `createModelHook` uses Template Literal Types to create event map types
  */
 export const createEventMap = <TEvents extends IEvent>() => <
   TGuardMap extends Record<string, keyof TEvents>,
@@ -124,6 +131,7 @@ const keys = <T extends object>(input: T) => Object.keys(input) as (keyof T)[];
  *     }
  *   }
  * })
+ * @deprecated Use `createModelHook` instead
  */
 export const useEventMap = <
   TEvents extends IEvent,
@@ -225,7 +233,7 @@ export type ModelExtras<TDefaultConfig, TRequiredConfig, TState, TEvents, TModel
   /**
    * This is only a type and not a value. If you want to
    */
-  TConfig: TDefaultConfig & TRequiredConfig;
+  TConfig: Partial<TDefaultConfig> & TRequiredConfig & ToEventConfig<TState, TEvents>;
   /**
    * The context of the model. This can be used directly, but is mostly used internally by
    * `createContainer` or `createSubcomponent` to handle model context automatically.
@@ -268,7 +276,7 @@ export type ModelExtras<TDefaultConfig, TRequiredConfig, TState, TEvents, TModel
    * ```
    */
   mergeConfig: (
-    source: TDefaultConfig & TRequiredConfig,
+    source: Partial<TDefaultConfig> & TRequiredConfig,
     target: Partial<
       TDefaultConfig & TRequiredConfig & ToEventConfig<TState, TEvents>
     >

package/common/lib/utils/useModalityType.ts

@@ -11,24 +11,24 @@ type Modality = 'mouse' | 'touch' | 'pen';
 //   a. if localStorage isn't primed, use clientWidth of the browsers
 //   b. if < 768, default to 'touch'
 //   c. else default to 'mouse'
-const localStorageValue = 'mouse' as Modality; //((typeof localStorage !== 'undefined'
-//   ? localStorage.getItem('modality')
-//   : '') ||
-//   (typeof document !== 'undefined'
-//     ? document.documentElement.clientWidth < 768
-//       ? 'touch'
-//       : ''
-//     : '') ||
-//   'mouse') as Modality;
+let localStorageValue = ((typeof localStorage !== 'undefined'
+  ? localStorage.getItem('modality')
+  : '') ||
+  (typeof document !== 'undefined'
+    ? document.documentElement.clientWidth < 768
+      ? 'touch'
+      : ''
+    : '') ||
+  'mouse') as Modality;
 
 // Update the `localStorageValue`, but conditionally update localStorage only if the value has
 // changed. This prevents too many calls to `localStorage` which can be costly on spinning disk
 // drives
 const updateLocalStorage = (value: Modality) => {
-  // if (localStorageValue !== value) {
-  //   localStorage.setItem('modality', value);
-  // }
-  // localStorageValue = value;
+  if (localStorageValue !== value) {
+    localStorage.setItem('modality', value);
+  }
+  localStorageValue = value;
 };
 
 /**

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

@@ -1390,7 +1390,7 @@ export declare const ActionBar: import("../../common").ComponentM<ActionBarProps
     navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
     getId: (item: any) => string;
 }> & {
-    List: import("../../common").ElementComponentM<"div", import("./ActionBarList").ActionBarListProps<unknown>, {
+    List: import("../../common").ElementComponentM<"div", import("./ActionBarList").ActionBarListProps<any>, {
         state: {
             hiddenIds: string[];
             nonInteractiveIds: string[];
@@ -1684,7 +1684,7 @@ export declare const ActionBar: import("../../common").ComponentM<ActionBarProps
         navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
         getId: (item: any) => string;
     }>;
-    OverflowButton: import("../../common").ElementComponentM<"button", {}, {
+    OverflowButton: import("../../common").ElementComponentM<"button", import("./ActionBarOverflowButton").ActionBarOverflowButtonProps, {
         state: {
             hiddenIds: string[];
             nonInteractiveIds: string[];
@@ -3146,7 +3146,7 @@ export declare const ActionBar: import("../../common").ComponentM<ActionBarProps
             navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
             getId: (item: any) => string;
         }>;
-        List: import("../../common").ElementComponentM<"div", import("../../menu/lib/MenuList").MenuListProps, {
+        List: import("../../common").ElementComponentM<"div", import("../../menu/lib/MenuList").MenuListProps<any>, {
             state: {
                 stackRef: React.RefObject<HTMLDivElement>;
                 targetRef: React.RefObject<HTMLButtonElement>;

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

@@ -17,6 +17,8 @@ export interface ActionBarItemProps {
 }
 export declare const useActionBarItem: <P extends {}, R>(model: {
     state: {
+        selectedIds: import("../../collection/lib/useSelectionListModel").SelectedIds;
+        unselectedIds: string[];
         cursorId: string;
         columnCount: number;
         UNSTABLE_virtual: {
@@ -36,6 +38,11 @@ export declare const useActionBarItem: <P extends {}, R>(model: {
         items: import("../../collection").Item<any>[];
     };
     events: {
+        select(data: {
+            id: string;
+        }): void;
+        selectAll(): void;
+        unselectAll(): void;
         registerItem(data: {
             item: any;
             textValue: string;
@@ -60,6 +67,7 @@ export declare const useActionBarItem: <P extends {}, R>(model: {
             value: number;
         }): void;
     };
+    selection: import("../../collection/lib/useSelectionListModel").SelectionManager;
     navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
     getId: (item: any) => string;
 }, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {} & P & (R extends HTMLOrSVGElement ? {

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;AAW/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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAI5B,CAAC;AAEF,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAAgE,CAAC;AAE9F,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMxB,CAAC"}

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

@@ -36,7 +36,7 @@ var common_1 = require("@workday/canvas-kit-react/common");
 var button_1 = require("@workday/canvas-kit-react/button");
 var collection_1 = require("@workday/canvas-kit-react/collection");
 var useActionBarModel_1 = require("./useActionBarModel");
-exports.useActionBarItem = common_1.composeHooks(collection_1.useOverflowListItemMeasure, collection_1.useListItemRovingFocus, collection_1.useListItemRegister);
+exports.useActionBarItem = common_1.composeHooks(collection_1.useOverflowListItemMeasure, collection_1.useListItemRegister);
 exports.ActionBarItem = common_1.createSubcomponent(button_1.SecondaryButton)({
     displayName: 'ActionBar.Item',
     modelHook: useActionBarModel_1.useActionBarModel,

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ExtractProps } from '@workday/canvas-kit-react/common';
 import { HStack } from '@workday/canvas-kit-react/layout';
-export interface ActionBarListProps<T = unknown> extends Partial<ExtractProps<typeof HStack, never>> {
+export interface ActionBarListProps<T = any> extends Omit<Partial<ExtractProps<typeof HStack, never>>, 'children'> {
     /**
      * If items are passed to a `ActionBarModel`, the child of `ActionBar.List` should be a render prop. The
      * List will determine how and when the item will be rendered.
@@ -11,9 +11,101 @@ export interface ActionBarListProps<T = unknown> extends Partial<ExtractProps<ty
      *   {(item) => <ActionBar.Item key={item.id} name={item.name}>{item.text}</ActionBar.Item>}
      * </ActionBar.List>
      */
-    children: ((item: T) => React.ReactNode) | React.ReactNode;
+    children: ((item: T, index: number) => React.ReactNode) | React.ReactNode;
+    /**
+     * `ActionBar.List` will render overflow button component if  it's passed in `overflowButton`.
+     *
+     * @example
+     * <ActionBar.List overflowButton={<ActionBar.OverflowButton aria-label="More actions" />}>
+     *   {(item) => <ActionBar.Item>{item.text}</ActionBar.Item>}
+     * </ActionBar.List>
+     */
+    overflowButton?: React.ReactNode;
 }
-export declare const ActionBarList: import("../../common").ElementComponentM<"div", ActionBarListProps<unknown>, {
+export declare const useActionBarList: <P extends {}, R>(model: {
+    state: {
+        hiddenIds: string[];
+        itemWidthCache: Record<string, number>;
+        containerWidth: number;
+        overflowTargetWidth: number;
+        selectedIds: import("../../collection/lib/useSelectionListModel").SelectedIds;
+        unselectedIds: string[];
+        cursorId: string;
+        columnCount: number;
+        UNSTABLE_virtual: {
+            virtualItems: import("../../collection/lib/react-virtual").VirtualItem[];
+            totalSize: number;
+            scrollToOffset: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToOffsetOptions | undefined) => void;
+            scrollToIndex: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToIndexOptions | undefined) => void;
+            measure: () => void;
+        };
+        UNSTABLE_defaultItemHeight: number;
+        containerRef: React.RefObject<HTMLDivElement>;
+        id: string;
+        orientation: import("../../collection/lib/useBaseListModel").Orientation;
+        indexRef: React.MutableRefObject<number>;
+        nonInteractiveIds: string[];
+        isVirtualized: boolean;
+        items: import("../../collection").Item<any>[];
+    };
+    events: {
+        select(data: {
+            id: string;
+        }): void;
+        setContainerWidth(data: {
+            width?: number | undefined;
+        }): void;
+        setOverflowTargetWidth(data: {
+            width: number;
+        }): void;
+        addItemWidth(data: {
+            id: string;
+            width: number;
+        }): void;
+        removeItemWidth(data: {
+            id: string;
+        }): void;
+        addHiddenKey(data: {
+            id: string;
+        }): void;
+        removeHiddenKey(data: {
+            id: string;
+        }): void;
+        selectAll(): void;
+        unselectAll(): void;
+        registerItem(data: {
+            item: any;
+            textValue: string;
+        }): void;
+        goTo(data: {
+            id: string;
+        }): void;
+        goToNext(): void;
+        goToPrevious(): void;
+        goToPreviousRow(): void;
+        goToNextRow(): void;
+        goToFirst(): void;
+        goToLast(): void;
+        goToFirstOfRow(): void;
+        goToLastOfRow(): void;
+        goToNextPage(): void;
+        goToPreviousPage(): void;
+        unregisterItem(data: {
+            id: string;
+        }): void;
+        updateItemHeight(data: {
+            value: number;
+        }): void;
+    };
+    selection: import("../../collection/lib/useSelectionListModel").SelectionManager;
+    navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
+    getId: (item: any) => string;
+}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
+    ref: (instance: HTMLElement | null) => void;
+} & P & (R extends HTMLOrSVGElement ? {
+    ref: React.Ref<R>;
+} : {});
+export declare const ActionBarList: import("../../common").ElementComponentM<"div", ActionBarListProps<any>, {
     state: {
         hiddenIds: string[];
         nonInteractiveIds: string[];

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

@@ -1 +1 @@
-{"version":3,"file":"ActionBarList.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBarList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,MAAM,EAAC,MAAM,kCAAkC,CAAC;AAOxD,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,OAAO,CAC7C,SAAQ,OAAO,CAAC,YAAY,CAAC,OAAO,MAAM,EAAE,KAAK,CAAC,CAAC;IACnD;;;;;;;;OAQG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;CAC5D;AAWD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBxB,CAAC"}
+{"version":3,"file":"ActionBarList.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBarList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,MAAM,EAAC,MAAM,kCAAkC,CAAC;AAMxD,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,GAAG,CACzC,SAAQ,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,MAAM,EAAE,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC;IACrE;;;;;;;;OAQG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAC1E;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAWD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAAyB,CAAC;AAEvD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBxB,CAAC"}

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

@@ -41,14 +41,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActionBarList = void 0;
+exports.ActionBarList = exports.useActionBarList = void 0;
 var React = __importStar(require("react"));
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var common_1 = require("@workday/canvas-kit-react/common");
 var layout_1 = require("@workday/canvas-kit-react/layout");
 var collection_1 = require("@workday/canvas-kit-react/collection");
 var useActionBarModel_1 = require("./useActionBarModel");
-var ActionBar_1 = require("./ActionBar");
 var ResponsiveHStack = common_1.styled(layout_1.HStack)(function (_a) {
     var _b;
     var theme = _a.theme;
@@ -61,13 +60,14 @@ var ResponsiveHStack = common_1.styled(layout_1.HStack)(function (_a) {
         },
         _b);
 });
+exports.useActionBarList = collection_1.useOverflowListMeasure;
 exports.ActionBarList = common_1.createSubcomponent('div')({
     displayName: 'ActionBar.List',
     modelHook: useActionBarModel_1.useActionBarModel,
-    elemPropsHook: collection_1.useOverflowListMeasure,
+    elemPropsHook: exports.useActionBarList,
 })(function (_a, Element, model) {
-    var children = _a.children, elemProps = __rest(_a, ["children"]);
+    var children = _a.children, overflowButton = _a.overflowButton, elemProps = __rest(_a, ["children", "overflowButton"]);
     return (React.createElement(ResponsiveHStack, __assign({ as: Element, spacing: "s", depth: 1, background: tokens_1.commonColors.background, borderTop: "solid 1px " + tokens_1.colors.soap400, padding: tokens_1.space.s + " " + tokens_1.space.xl + " ", position: "fixed", bottom: 0, left: 0, right: 0 }, elemProps),
         collection_1.useListRenderItems(model, children),
-        React.createElement(ActionBar_1.ActionBar.OverflowButton, null)));
+        overflowButton));
 });

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

@@ -1,4 +1,8 @@
 import * as React from 'react';
+import { SecondaryButtonProps } from '@workday/canvas-kit-react/button';
+export interface ActionBarOverflowButtonProps extends SecondaryButtonProps {
+    'aria-label': string;
+}
 export declare const useActionBarOverflowButton: <P extends {}, R>(model: {
     state: {
         hiddenIds: string[];
@@ -80,7 +84,7 @@ export declare const useActionBarOverflowButton: <P extends {}, R>(model: {
 }, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {} & P & (R extends HTMLOrSVGElement ? {
     ref: React.Ref<R>;
 } : {});
-export declare const ActionBarOverflowButton: import("../../common").ElementComponentM<"button", {}, {
+export declare const ActionBarOverflowButton: import("../../common").ElementComponentM<"button", ActionBarOverflowButtonProps, {
     state: {
         hiddenIds: string[];
         nonInteractiveIds: string[];

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

@@ -1 +1 @@
-{"version":3,"file":"ActionBarOverflowButton.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBarOverflowButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiB/B,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAMtC,CAAC;AAMF,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMlC,CAAC"}
+{"version":3,"file":"ActionBarOverflowButton.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBarOverflowButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,OAAO,EAAkB,oBAAoB,EAAC,MAAM,kCAAkC,CAAC;AAEvF,MAAM,WAAW,4BAA6B,SAAQ,oBAAoB;IACxE,YAAY,EAAE,MAAM,CAAC;CACtB;AAMD,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAMtC,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMlC,CAAC"}

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

@@ -42,12 +42,12 @@ var collection_1 = require("@workday/canvas-kit-react/collection");
 var menu_1 = require("@workday/canvas-kit-react/menu");
 var useActionBarModel_1 = require("./useActionBarModel");
 var button_1 = require("@workday/canvas-kit-react/button");
-exports.useActionBarOverflowButton = common_1.composeHooks(common_1.createElemPropsHook(useActionBarModel_1.useActionBarModel)(function () { return ({
-    'aria-haspopup': true,
-}); }), collection_1.useOverflowListTarget, common_1.subModelHook(function (m) { return m.menu; }, menu_1.useMenuTarget));
 var StyledSecondaryButton = styled_1.default(button_1.SecondaryButton)({
     flex: 0,
 });
+exports.useActionBarOverflowButton = common_1.composeHooks(common_1.createElemPropsHook(useActionBarModel_1.useActionBarModel)(function () { return ({
+    'aria-haspopup': true,
+}); }), collection_1.useOverflowListTarget, common_1.subModelHook(function (m) { return m.menu; }, menu_1.useMenuTarget));
 exports.ActionBarOverflowButton = common_1.createSubcomponent('button')({
     displayName: 'ActionBar.OverflowButton',
     modelHook: useActionBarModel_1.useActionBarModel,

package/dist/commonjs/avatar/index.d.ts

@@ -1,5 +1,2 @@
-import Avatar from './lib/Avatar';
-export default Avatar;
-export { Avatar };
 export * from './lib/Avatar';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/avatar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,cAAc,CAAC;AAElC,eAAe,MAAM,CAAC;AACtB,OAAO,EAAC,MAAM,EAAC,CAAC;AAChB,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../avatar/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/commonjs/avatar/index.js

@@ -9,12 +9,5 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Avatar = void 0;
-var Avatar_1 = __importDefault(require("./lib/Avatar"));
-exports.Avatar = Avatar_1.default;
-exports.default = Avatar_1.default;
 __exportStar(require("./lib/Avatar"), exports);

package/dist/commonjs/avatar/lib/Avatar.d.ts

@@ -49,6 +49,6 @@ declare type AvatarOverload = {
     Variant: typeof AvatarVariant;
     Size: typeof SystemIconCircleSize;
 };
-declare const Avatar: AvatarOverload;
-export default Avatar;
+export declare const Avatar: AvatarOverload;
+export {};
 //# sourceMappingURL=Avatar.d.ts.map

package/dist/commonjs/avatar/lib/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAItC,OAAO,EAAmB,oBAAoB,EAAC,MAAM,gCAAgC,CAAC;AAGtF,oBAAY,aAAa;IACvB,KAAK,IAAA;IACL,IAAI,IAAA;CACL;AAED,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC;CACZ;AAED;;GAEG;AACH,aAAK,cAAc,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,GAC1F,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEvC;;GAEG;AACH,aAAK,cAAc,GAAG;IACpB,CAAC,KAAK,EAAE;QAAC,EAAE,EAAE,KAAK,CAAA;KAAC,GAAG,cAAc,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC3F,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC5F,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,IAAI,EAAE,OAAO,oBAAoB,CAAC;CACnC,CAAC;AAoEF,QAAA,MAAM,MAAM,EAAE,cAmDN,CAAC;AAKT,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAItC,OAAO,EAAmB,oBAAoB,EAAC,MAAM,gCAAgC,CAAC;AAGtF,oBAAY,aAAa;IACvB,KAAK,IAAA;IACL,IAAI,IAAA;CACL;AAED,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC;CACZ;AAED;;GAEG;AACH,aAAK,cAAc,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,GAC1F,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEvC;;GAEG;AACH,aAAK,cAAc,GAAG;IACpB,CAAC,KAAK,EAAE;QAAC,EAAE,EAAE,KAAK,CAAA;KAAC,GAAG,cAAc,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC3F,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC5F,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,IAAI,EAAE,OAAO,oBAAoB,CAAC;CACnC,CAAC;AAoEF,eAAO,MAAM,MAAM,EAAE,cAmDb,CAAC"}