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

package/common/lib/theming/styled.ts

@@ -1,22 +1,25 @@
 import {default as emotionStyled, CreateStyled, Interpolation, CSSObject} from '@emotion/styled';
+import {CSSProperties} from '@workday/canvas-kit-react/tokens';
 
 import {useTheme, EmotionCanvasTheme, ContentDirection} from './index';
 import rtlCSSJS from 'rtl-css-js';
-import {convertToStaticStates} from '../utils/StaticStates';
 
 const noop = (styles: any) => styles;
 
 // Pulled from https://github.com/emotion-js/emotion/blob/master/packages/styled-base/src/utils.js#L6 (not exported)
 type Interpolations = Array<any>;
+export type StyleRewriteFn = (obj?: CSSProperties) => CSSProperties | undefined;
 
 function styled<Props>(node: any) {
   return (...args: Interpolation<Props>[]) => {
     const newArgs: Interpolations = args.map(
-      interpolation => (props: Props & {theme: EmotionCanvasTheme & {_staticStates?: boolean}}) => {
+      interpolation => (
+        props: Props & {theme: EmotionCanvasTheme & {_styleRewriteFn?: StyleRewriteFn}}
+      ) => {
         props.theme = useTheme(props.theme);
         const direction = props.theme.canvas.direction;
         const maybeFlip = direction === ContentDirection.RTL ? rtlCSSJS : noop;
-        const maybeConvert = props.theme._staticStates ? convertToStaticStates : noop;
+        const maybeConvert = props.theme._styleRewriteFn || noop;
         try {
           if (typeof interpolation === 'function') {
             return maybeFlip(maybeConvert(interpolation(props)) as CSSObject);

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`
@@ -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,13 +252,15 @@ 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
     ) => JSX.Element | null
@@ -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,17 +376,7 @@ 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
     ) => JSX.Element | null
@@ -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

@@ -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[];

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

@@ -12,7 +12,99 @@ export interface ActionBarListProps<T = any> extends Omit<Partial<ExtractProps<t
      * </ActionBar.List>
      */
     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 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[];

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,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;CAC3E;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/banner/lib/Banner.d.ts

@@ -19,15 +19,6 @@ export declare const Banner: import("../../common").ElementComponentM<"button",
     };
     events: {};
 }> & {
-    Context: React.Context<{
-        state: {
-            id: string;
-            hasError: boolean;
-            isSticky: boolean;
-        };
-        events: {};
-    }>;
-} & {
     Icon: import("../../common").ElementComponentM<"span", import("./BannerIcon").BannerIconProps, {
         state: {
             id: string;

package/dist/commonjs/banner/lib/Banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../banner/lib/Banner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAQtD,MAAM,WAAW,WAAY,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACnE;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAkBD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CjB,CAAC"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../banner/lib/Banner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAQtD,MAAM,WAAW,WAAY,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACnE;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAYD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDjB,CAAC"}

package/dist/commonjs/banner/lib/Banner.js

@@ -33,9 +33,7 @@ var hooks_1 = require("./hooks");
 var BannerIcon_1 = require("./BannerIcon");
 var BannerLabel_1 = require("./BannerLabel");
 var BannerActionText_1 = require("./BannerActionText");
-// Remove color from our type since it is set on the Flex style attribute
-var _a = tokens_1.type.levels.subtext.large, _color = _a.color, typeLevelsSubtextLarge = __rest(_a, ["color"]);
-var styles = __assign(__assign(__assign({}, typeLevelsSubtextLarge), { cursor: 'pointer', fontWeight: tokens_1.type.properties.fontWeights.medium, textAlign: 'left', transition: 'background-color 120ms', '&:focus': __assign({ outline: 'none' }, common_1.focusRing({ separation: 2 })) }), common_1.hideMouseFocus);
+var styles = __assign({ cursor: 'pointer', transition: 'background-color 120ms', '&:focus': __assign({ outline: 'none' }, common_1.focusRing({ separation: 2 })) }, common_1.hideMouseFocus);
 exports.Banner = common_1.createContainer('button')({
     displayName: 'Banner',
     modelHook: hooks_1.useBannerModel,
@@ -65,5 +63,5 @@ exports.Banner = common_1.createContainer('button')({
         _b[borderBottomRightRadius] = model.state.isSticky ? 0 : tokens_1.borderRadius.m,
         _b[borderTopRightRadius] = model.state.isSticky ? 0 : tokens_1.borderRadius.m,
         _b);
-    return (react_1.jsx(layout_1.Flex, __assign({ as: Element, width: model.state.isSticky ? '222px' : '328px', backgroundColor: palette.normal, color: palette.contrast, padding: tokens_1.space.xxs + " " + tokens_1.space.s, border: "0", display: "flex", alignItems: "center" }, borderStyleProps, { css: [styles, themedBackgroundStyles] }, elemProps), children));
+    return (react_1.jsx(layout_1.Flex, __assign({ as: Element }, tokens_1.type.levels.subtext.large, { fontWeight: "medium", textAlign: "left", width: model.state.isSticky ? '222px' : '328px', backgroundColor: palette.normal, color: palette.contrast, padding: tokens_1.space.xxs + " " + tokens_1.space.s, border: "0", display: "flex", alignItems: "center" }, borderStyleProps, { css: [styles, themedBackgroundStyles] }, elemProps), children));
 });

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../breadcrumbs/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,iCAAiC,CAAC"}

package/dist/commonjs/breadcrumbs/index.js

@@ -0,0 +1,14 @@
+"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]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./lib/Breadcrumbs"), exports);
+__exportStar(require("./lib/hooks/useBreadcrumbsModel"), exports);