@workday/canvas-kit-react 7.0.0-alpha.103-next.28 → 7.0.0-alpha.129-next.3

package/collection/lib/useCursorListModel.tsx

@@ -6,17 +6,40 @@ import {useBaseListModel, Item, defaultGetId as getId} from './useBaseListModel'
 type NavigationInput = Pick<ReturnType<typeof useCursorListModel>, 'state'>;
 
 export interface NavigationManager {
+  /** Get the first item in a collection. This will be called when the `Home` key is pressed for
+   * Lists and `Ctrl+Home` for Grids. */
   getFirst: NavigationRequestor;
+  /** Get the last item in a collection. This will be called when the `End` key is pressed for Lists
+   * and `Ctrl+End` for Grids. */
   getLast: NavigationRequestor;
+  /** Get an item with the provided `id`. */
   getItem: NavigationRequestor;
+  /** Get the next item after the provided `id`. This will be called when the `Right` arrow key is
+   * pressed for RTL languages and when the `Left` arrow is pressed for LTR languages. */
   getNext: NavigationRequestor;
+  /** **For Grids:** Get the cell in the next row from the provided `id`. This will be called when
+   * the `Down` arrow is pressed.  */
   getNextRow: NavigationRequestor;
+  /** Get the previous item before the provided `id`. This will be called when the `Left` arrow key
+   * is pressed for RTL languages and when the `Right` arrow is pressed for LTR languages. */
   getPrevious: NavigationRequestor;
+  /** **For Grids:** Get the cell in the previous row from the provided `id`. This will be called
+   * when the `Up` arrow is pressed.  */
   getPreviousRow: NavigationRequestor;
+  /** **For Grids:** Get the first item in a row. This will be called when the `Home` key is
+   * pressed. */
   getFirstOfRow: NavigationRequestor;
+  /** **For Grids:** Get the last item in a row. This will be called when the `End` key is
+   * pressed. */
   getLastOfRow: NavigationRequestor;
-  getPreviousPage: NavigationRequestor;
+  /** Get the next "page". A "page" is application specific and usually means next visible screen.
+   * If the viewport is scrollable, it would scroll so that the last item visible is now the first
+   * item visible. This is called when the `PageDown` key is pressed */
   getNextPage: NavigationRequestor;
+  /** Get the next "page". A "page" is application specific and usually means previous visible
+   * screen. If the viewport is scrollable, it would scroll so that the first item visible is now
+   * the last item visible. This is called when the `PageUp` key is pressed */
+  getPreviousPage: NavigationRequestor;
 }
 
 /**
@@ -56,7 +79,7 @@ export const getLast: NavigationRequestor = (_, {state}) => state.items[state.it
 export const getFirstOfRow: NavigationRequestor = (id, {state}) => {
   if (state.columnCount) {
     const item = getItem(id, {state});
-    const currentIndex = state.items.findIndex(i => getId(item) === getId(i));
+    const currentIndex = item.index;
     const offset = currentIndex % state.columnCount;
     return state.items[currentIndex - offset];
   }
@@ -69,9 +92,13 @@ export const getFirstOfRow: NavigationRequestor = (id, {state}) => {
 export const getLastOfRow: NavigationRequestor = (id, {state}) => {
   if (state.columnCount) {
     const item = getItem(id, {state});
-    const currentIndex = state.items.findIndex(i => getId(item) === getId(i));
+    const currentIndex = item.index;
     const offset = (currentIndex % state.columnCount) - state.columnCount + 1;
-    return state.items[currentIndex - offset];
+    let nextIndex = currentIndex - offset;
+    if (nextIndex >= state.items.length) {
+      nextIndex = state.items.length - 1;
+    }
+    return state.items[nextIndex];
   }
   return getLast(id, {state});
 };
@@ -83,7 +110,7 @@ export const getLastOfRow: NavigationRequestor = (id, {state}) => {
 export const getPreviousPage: NavigationRequestor = (id, {state}) => {
   if (state.columnCount) {
     const item = getItem(id, {state});
-    const currentIndex = state.items.findIndex(i => getId(item) === getId(i));
+    const currentIndex = item.index;
     return state.items[currentIndex % state.columnCount];
   }
   return getFirst(id, {state});
@@ -96,7 +123,7 @@ export const getPreviousPage: NavigationRequestor = (id, {state}) => {
 export const getNextPage: NavigationRequestor = (id, {state}) => {
   if (state.columnCount) {
     const item = getItem(id, {state});
-    const currentIndex = state.items.findIndex(i => getId(item) === getId(i));
+    const currentIndex = item.index;
     const lastRowIndex = state.items.length - state.columnCount;
     return state.items[lastRowIndex + (currentIndex % state.columnCount)];
   }
@@ -117,12 +144,38 @@ export const getWrappingOffsetItem = (offset: number) => (
   const items = state.items;
   const item = getItem(id, {state});
 
-  const currentIndex = items.findIndex(i => getId(item) === getId(i));
+  const currentIndex = item.index;
   let nextIndex = currentIndex + offset;
+
+  // calculate idealLength as in if the grid was a perfect rectangle
+  const rows = Math.ceil(items.length / state.columnCount);
+  const idealLength = rows * state.columnCount;
   if (nextIndex < 0) {
-    nextIndex = items.length + nextIndex;
+    if (offset === -1) {
+      // if the offset is -1, we want to wrap to the end
+      nextIndex = items.length - 1;
+    } else {
+      // if the offset is smaller than -1, we want to wrap by column
+      if (idealLength + nextIndex >= items.length) {
+        // we'll overflow the grid because there isn't enough items. Move `nextIndex` up so we wrap in
+        // the right spot
+        nextIndex -= state.columnCount;
+      }
+      nextIndex = idealLength + nextIndex;
+    }
   } else if (nextIndex >= items.length) {
-    nextIndex = nextIndex - items.length;
+    if (offset === 1) {
+      // if the offset is 1, we want to wrap to the beginning
+      nextIndex = 0;
+    } else {
+      // if the offset is larger than 1, we want to wrap by column
+      if (nextIndex - idealLength < 0) {
+        // we're going to overflow the grid because there isn't enough items. Move `nextIndex` down to
+        // the missing item in the next row. This way we'll end up wrapping in the right spot
+        nextIndex += state.columnCount;
+      }
+      nextIndex = nextIndex - idealLength;
+    }
   }
 
   if (state.nonInteractiveIds.includes(getId(items[nextIndex])) && tries > 0) {
@@ -142,8 +195,9 @@ export const getOffsetItem = (offset: number) => (
   const {items, columnCount} = state;
   const item = getItem(id, {state});
 
-  const currentIndex = items.findIndex(i => getId(item) === getId(i));
+  const currentIndex = item.index;
   let nextIndex = currentIndex + offset;
+
   if (Math.abs(offset) < columnCount) {
     // if we're here, the columnCount is non-zero and the absolute value of offset is less than the
     // column count. We don't want to wrap, so we'll bound within the row
@@ -157,10 +211,19 @@ export const getOffsetItem = (offset: number) => (
     // if we're here, there's a column count, but the offset will move into another row. We need to
     // bound to row values
     const nextRow = Math.floor(nextIndex / columnCount);
+
     if (nextRow < 0 || nextRow >= columnCount) {
       nextIndex = currentIndex;
     }
-  } else if (nextIndex < 0) {
+
+    // make sure we don't go out of bounds if the grid isn't a perfect rectangle
+    if (nextIndex > items.length - 1) {
+      nextIndex = currentIndex;
+    }
+  }
+
+  // make sure we're always in bounds
+  if (nextIndex < 0) {
     nextIndex = 0;
   } else if (nextIndex >= items.length) {
     nextIndex = items.length - 1;
@@ -176,30 +239,36 @@ export const getOffsetItem = (offset: number) => (
 };
 
 /**
- * The default navigation manager of lists
+ * The default navigation manager of lists. This navigation manager will wrap around when the edge
+ * is hit. For example, if the user is the the right-most item in a list or right-most item in a
+ * row, the cursor will wrap around to the beginning or the next row.
  */
 export const wrappingNavigationManager = createNavigationManager({
   getFirst,
   getLast,
   getItem,
   getNext: getWrappingOffsetItem(1),
-  getNextRow: (id, {state}) => getWrappingOffsetItem(-state.columnCount)(id, {state}),
+  getNextRow: (id, {state}) => getWrappingOffsetItem(state.columnCount)(id, {state}),
   getPrevious: getWrappingOffsetItem(-1),
-  getPreviousRow: (id, {state}) => getWrappingOffsetItem(state.columnCount)(id, {state}),
+  getPreviousRow: (id, {state}) => getWrappingOffsetItem(-state.columnCount)(id, {state}),
   getPreviousPage,
   getNextPage,
   getFirstOfRow,
   getLastOfRow,
 });
 
+/**
+ * The default navigation of grids. This navigation manager will not wrap, but will stop when an
+ * edge is detected. This could be the last item in a list or the last item of a row in a grid.
+ */
 export const navigationManager = createNavigationManager({
   getFirst,
   getLast,
   getItem,
   getNext: getOffsetItem(1),
-  getNextRow: (id, {state}) => getOffsetItem(-state.columnCount)(id, {state}),
+  getNextRow: (id, {state}) => getOffsetItem(state.columnCount)(id, {state}),
   getPrevious: getOffsetItem(-1),
-  getPreviousRow: (id, {state}) => getOffsetItem(state.columnCount)(id, {state}),
+  getPreviousRow: (id, {state}) => getOffsetItem(-state.columnCount)(id, {state}),
   getPreviousPage,
   getNextPage,
   getFirstOfRow,
@@ -229,9 +298,7 @@ export const useCursorListModel = createModelHook({
      * (left-to-right or right-to-left) and call the correct navigation method. In our example, a
      * left-to-right language would send a `getNext`. The navigation manager may return the next item
      * in the list. Different managers can be created for slightly different use cases. The default
-     * navigation manager will accept `orientation` and directionality to determine mapping. If
-     * `columnCount` is non-zero, it will use a grid mode where `orientation` is ignored and only
-     * directionality matters.
+     * navigation manager will accept `orientation` and directionality to determine mapping.
      *
      * An example override might be a tab list with an overflow menu that is meant to be transparent
      * to screen reader users. This would require the overflow menu to accept both up/down keys as
@@ -247,6 +314,7 @@ export const useCursorListModel = createModelHook({
   const initialCurrentRef = React.useRef(
     config.initialCursorId || (config.items?.length ? getId(config.items![0]) : '')
   );
+  const navigation = config.navigation;
 
   const state = {
     ...list.state,
@@ -255,10 +323,10 @@ export const useCursorListModel = createModelHook({
     /**
      * Any positive non-zero value treats the list like a grid with rows and columns
      * @default 0
+     * @private Use useGridModel instead to make a grid instead of a list
      */
     columnCount,
   };
-  const navigation = config.navigation || wrappingNavigationManager;
 
   const events = {
     ...list.events,

package/collection/lib/useGridModel.ts

@@ -0,0 +1,34 @@
+import {createModelHook} from '@workday/canvas-kit-react/common';
+import {navigationManager} from './useCursorListModel';
+import {useListModel} from './useListModel';
+
+const {columnCount, orientation, ...defaultConfig} = useListModel.defaultConfig;
+
+export const useGridModel = createModelHook({
+  defaultConfig: {
+    ...defaultConfig,
+    /**
+     * Controls the state changes when the user sends navigation events to the model. For example,
+     * when the user hits the "right" arrow, a behavior hook will determine directionality
+     * (left-to-right or right-to-left) and call the correct navigation method. In our example, a
+     * left-to-right language would send a `getNext`. The navigation manager may return the next
+     * item in the list. Different managers can be created for slightly different use cases. The
+     * default navigation manager will stop when the end of a row/column is detected. For example,
+     * `getNext` will return the same item the cursor was previously on if the cursor is on the last
+     * item of a row.
+     */
+    navigation: navigationManager,
+  },
+  requiredConfig: {
+    /**
+     * The number of columns represented in a grid
+     */
+    columnCount: 1,
+    ...useListModel.requiredConfig,
+  },
+  contextOverride: useListModel.Context,
+})(config => {
+  const list = useListModel(config);
+
+  return list;
+});

package/collection/lib/useListItemRovingFocus.tsx

@@ -103,10 +103,12 @@ export const useListItemRovingFocus = createElemPropsHook(useCursorListModel)(
         if (event.ctrlKey) {
           for (const key in ctrlKeyMap) {
             if (hasOwnKey(ctrlKeyMap, key)) {
-              keyDownRef.current = true;
-              events[ctrlKeyMap[key]]?.();
-              event.preventDefault();
-              return;
+              if (event.key === key) {
+                keyDownRef.current = true;
+                events[ctrlKeyMap[key]]?.();
+                event.preventDefault();
+                return;
+              }
             }
           }
         }

package/collection/lib/useListRenderItem.tsx

@@ -7,26 +7,36 @@ import {useBaseListModel} from './useBaseListModel';
 export function useListRenderItems<T>(
   model: ReturnType<typeof useBaseListModel>,
   children: ((item: Generic, index: number) => React.ReactNode) | React.ReactNode
-) {
+): React.ReactNode {
   const items =
     typeof children === 'function'
       ? model.state.isVirtualized
         ? model.state.UNSTABLE_virtual.virtualItems.map(virtual => {
             const item = model.state.items[virtual.index];
             const child = children(item.value, virtual.index);
-            return React.cloneElement(child, {
-              // 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...
-              virtual,
-              key: item.id,
-              item,
-            });
+            if (React.isValidElement(child)) {
+              return React.cloneElement(child, {
+                // 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...
+                virtual,
+                key: item.id,
+                item,
+              });
+            }
+            return child;
           })
-        : model.state.items.map(item =>
-            React.cloneElement(children(item.value, item.index), {key: item.id, item: item.value})
-          )
-      : null;
+        : model.state.items.map(item => {
+            const child = children(item.value, item.index);
+            if (React.isValidElement(child)) {
+              return React.cloneElement(child, {
+                key: item.id,
+                item: item.value,
+              });
+            }
+            return child;
+          })
+      : children;
 
-  return items || children;
+  return items;
 }

package/collection/lib/useOverflowListModel.tsx

@@ -55,10 +55,17 @@ export const useOverflowListModel = createModelHook({
     ...useSelectionListModel.defaultConfig,
     initialHiddenIds: [] as string[],
     containerWidth: 0,
+    /**
+     * Determines if overflow should actually occur. For example, touch devices are better at
+     * side-scrolling than mouse devices. In these cases, it makes sense to disable overflowing.
+     * @default true
+     */ shouldCalculateOverflow: true,
   },
   requiredConfig: useSelectionListModel.requiredConfig,
   contextOverride: useSelectionListModel.Context,
 })(config => {
+  const shouldCalculateOverflow =
+    config.shouldCalculateOverflow === undefined ? true : config.shouldCalculateOverflow;
   const [hiddenIds, setHiddenIds] = React.useState(config.initialHiddenIds);
   const [itemWidthCache, setItemWidthCache] = React.useState<Record<string, number>>({});
   const [containerWidth, setContainerWidth] = React.useState(0);
@@ -67,9 +74,11 @@ export const useOverflowListModel = createModelHook({
   const [overflowTargetWidth, setOverflowTargetWidth] = React.useState(0);
   const overflowTargetWidthRef = React.useRef(0);
 
+  const internalHiddenIds = shouldCalculateOverflow ? hiddenIds : [];
+
   // Cursors skip over disabled ids, but know nothing of hidden ids. We'll go ahead and disable
   // hidden ids as well
-  const nonInteractiveIds = (config.nonInteractiveIds || []).concat(hiddenIds);
+  const nonInteractiveIds = (config.nonInteractiveIds || []).concat(internalHiddenIds);
 
   const model = useSelectionListModel({
     ...config,
@@ -78,7 +87,7 @@ export const useOverflowListModel = createModelHook({
 
   const state = {
     ...model.state,
-    hiddenIds,
+    hiddenIds: internalHiddenIds,
     itemWidthCache,
     containerWidth,
     overflowTargetWidth,

package/collection/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/collection",
   "module": "../dist/es6/collection",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/collection"
 }

package/color-picker/index.ts

@@ -1,7 +1,4 @@
-import ColorInput from './lib/ColorInput';
-import ColorPreview from './lib/ColorPreview';
 
-export {ColorInput, ColorPreview};
 export * from './lib/ColorInput';
 export * from './lib/ColorPreview';
 export * from './lib/parts/ColorSwatch';

package/color-picker/lib/ColorInput.tsx

@@ -184,5 +184,3 @@ export const ColorInput = createComponent('input')({
     );
   },
 });
-
-export default ColorInput;

package/color-picker/lib/ColorPreview.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ColorInput from './ColorInput';
+import {ColorInput} from './ColorInput';
 import {createComponent, StyledType} from '@workday/canvas-kit-react/common';
 import {TextInputProps} from '@workday/canvas-kit-react/text-input';
 import styled from '@emotion/styled';
@@ -36,5 +36,3 @@ export const ColorPreview = createComponent('input')({
     />
   ),
 });
-
-export default ColorPreview;

package/color-picker/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/color-picker",
   "module": "../dist/es6/color-picker",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/color-picker"
 }

package/common/lib/InputProvider.tsx

@@ -117,7 +117,7 @@ const supportsPassive = () => {
 /**
  * This component takes heavy inspiration from what-input (https://github.com/ten1seven/what-input)
  */
-export class InputProvider extends React.Component<InputProviderProps> {
+export class InputProvider extends React.Component<React.PropsWithChildren<InputProviderProps>> {
   private eventTimer: number | undefined;
 
   private currentInput: InputType;

package/common/lib/parts/_brand-assets.ts

@@ -1,4 +1,4 @@
-const CDN_URI = '//design.workday.com/images/';
+const CDN_URI = 'https://design.workday.com/images/';
 
 export const dubLogoBlue = `<img src="${CDN_URI}ck-dub-logo-blue.svg" alt="">`;
 

package/common/lib/styles/focusRing.ts

@@ -1,5 +1,5 @@
 import {keyframes, Theme, CSSObject} from '@emotion/react';
-import canvas from '@workday/canvas-kit-react/tokens';
+import {canvas} from '@workday/canvas-kit-react/tokens';
 import {defaultCanvasTheme} from '../theming/index';
 import memoize from 'lodash/memoize';
 

package/common/lib/utils/StaticStates.tsx

@@ -29,8 +29,8 @@ export const convertToStaticStates = (obj?: CSSProperties): CSSProperties | unde
   }, {});
 };
 
-export const StaticStates: React.FC<{theme?: PartialEmotionCanvasTheme} & React.HTMLAttributes<
-  HTMLElement
+export const StaticStates: React.FC<React.PropsWithChildren<
+  {theme?: PartialEmotionCanvasTheme} & React.HTMLAttributes<HTMLElement>
 >> = ({children, theme, ...elemProps}) => {
   const localTheme: EmotionCanvasTheme & {_staticStates?: boolean} = useTheme(theme);
   localTheme._staticStates = true;

package/common/lib/utils/components.ts

@@ -212,7 +212,7 @@ interface RefForwardingComponent<T, P = {}> {
      * `never`
      */
     Element: T extends undefined ? never : T
-  ): React.ReactElement | null;
+  ): JSX.Element | null;
 }
 
 function defaultGetElemProps(input: any) {
@@ -256,7 +256,7 @@ export const createContainer = <
       props: Props & RemoveNull<ReturnType<TElemPropsHook>> & {ref: ExtractRef<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>
@@ -356,7 +356,7 @@ export const createSubcomponent = <
             }),
       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`

package/common/lib/utils/elements.ts

@@ -1,8 +1,12 @@
 /**
  * Is an element focusable? This function performs various tests to see if the element in question
- * can receive focus.
+ * can receive focus. Should skip disabled elements as they are not focusable.
  */
 export const isFocusable = (element: HTMLElement) => {
+  if (element.hasAttribute('disabled')) {
+    return null;
+  }
+
   const nodeName = element.nodeName.toLowerCase();
   const validInput = nodeName === 'input' && element.getAttribute('type') !== 'hidden';
   const validAnchor = nodeName === 'a' && element.hasAttribute('href');

package/common/lib/utils/index.ts

@@ -12,6 +12,7 @@ export * from './models';
 export * from './elements';
 export * from './useConstant';
 export * from './useIsFullscreen';
+export * from './useModalityType';
 export * from './useWindowSize';
 export * from './useResizeObserver';
 export * from './StaticStates';

package/common/lib/utils/useModalityType.ts

@@ -0,0 +1,65 @@
+import React from 'react';
+
+type Modality = 'mouse' | 'touch' | 'pen';
+
+// Use this shared global value to reduce calls to localStorage which is a synchronous API to a
+// drive which could be slow (spinning disks could be hundreds of ms). We read only once this way.
+// The following initialization is very difficult to test via automation. Don't mess with it unless
+// you plan to manually test.
+//
+// 1. Initialize modality to localStorage
+//   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;
+
+// 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;
+};
+
+/**
+ * Uses heuristics to determine if the user is on a touch device, uses a pen, or a mouse. This hook
+ * is useful if you have styles or behaviors that depend on the user's interaction type. For
+ * example, touch users can scroll horizontally easier than mouse users, so horizontal overflow
+ * might be more desired than overflow menus on touch devices. For devices that support multiple
+ * input types, the last used input type is saved. For these devices, consider the possibility this
+ * value could change after your component is rendered, so make sure you component rerenders
+ * properly in this case.
+ *
+ * Uses `PointerEvent.pointerType` to determine last used input.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType
+ */
+export const useModalityType = (): Modality => {
+  const [modality, setModality] = React.useState(localStorageValue);
+
+  React.useEffect(() => {
+    const handlePointerDown = (event: PointerEvent) => {
+      const value = event.pointerType as Modality;
+      setModality(value);
+      updateLocalStorage(value);
+    };
+
+    document.addEventListener('pointerdown', handlePointerDown);
+
+    return () => {
+      document.removeEventListener('pointerdown', handlePointerDown);
+    };
+  }, []);
+
+  return modality;
+};

package/common/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/common",
   "module": "../dist/es6/common",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/common"
 }

package/dialog/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/dialog",
   "module": "../dist/es6/dialog",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/dialog"
 }

package/disclosure/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/disclosure",
   "module": "../dist/es6/disclosure",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/disclosure"
 }

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

@@ -30,6 +30,7 @@ export declare const ActionBar: import("../../common").ComponentM<ActionBarProps
     }>;
     initialHiddenIds: string[];
     containerWidth: number;
+    shouldCalculateOverflow: boolean;
     initialSelectedIds: import("../../collection/lib/useSelectionListModel").SelectedIds;
     initialUnselectedIds: string[];
     selection: import("../../collection/lib/useSelectionListModel").SelectionManager;
@@ -1389,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[];
@@ -1682,10 +1683,7 @@ export declare const ActionBar: import("../../common").ComponentM<ActionBarProps
         selection: import("../../collection/lib/useSelectionListModel").SelectionManager;
         navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
         getId: (item: any) => string;
-    }> & {
-        Icon: import("../../common").ElementComponent<"span", import("../..").SystemIconProps>;
-        Text: import("../../common").ElementComponent<"span", {}>;
-    };
+    }>;
     OverflowButton: import("../../common").ElementComponentM<"button", {}, {
         state: {
             hiddenIds: string[];
@@ -3148,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>;