@workday/canvas-kit-react 12.1.0-945-next.0 → 12.1.0

package/collection/index.ts

@@ -15,6 +15,9 @@ export * from './lib/useGridModel';
 export * from './lib/useListActiveDescendant';
 export * from './lib/useListItemActiveDescendant';
 export * from './lib/useListItemAllowChildStrings';
+export * from './lib/useListItemRemoveOnDeleteKey';
+export * from './lib/focusOnCurrentCursor';
+export * from './lib/listItemRemove';
 export {ListBox, ListBoxProps} from './lib/ListBox';
 export {keyboardEventToCursorEvents} from './lib/keyUtils';
 export {

package/collection/lib/focusOnCurrentCursor.ts

@@ -0,0 +1,55 @@
+import {useCursorListModel} from './useCursorListModel';
+
+// retry a function each frame so we don't rely on the timing mechanism of React's render cycle.
+const retryEachFrame = (cb: () => boolean, iterations: number, reject?: (reason?: any) => void) => {
+  if (cb() === false && iterations > 1) {
+    requestAnimationFrame(() => retryEachFrame(cb, iterations - 1));
+  }
+  reject?.('Retry timeout');
+};
+
+export const focusOnCurrentCursor = (
+  model: ReturnType<typeof useCursorListModel>,
+  nextId: string,
+  /**
+   * This can be any element in the list. It is used only to get the client-id from the element in
+   * case it is different than the server ID when DOM is hydrated.
+   */
+  element?: HTMLElement
+) => {
+  return new Promise<HTMLElement | null>((resolve, reject) => {
+    // Attempt to extract the ID from the DOM element. This fixes issues where the server and client
+    // do not agree on a generated ID
+    const clientId = (element?.dataset?.focusId || '').split('-')[0] || model.state.id;
+
+    const item = model.navigation.getItem(nextId, model);
+
+    if (item) {
+      // If the list is virtualized, we need to manually call out to the virtual list's
+      // `scrollToIndex`
+      if (model.state.isVirtualized) {
+        model.state.UNSTABLE_virtual.scrollToIndex(item.index);
+      }
+
+      const getElement = (id?: string) => {
+        return document.querySelector<HTMLElement>(`[data-focus-id="${`${id}-${item.id}`}"]`);
+      };
+
+      // In React concurrent mode, there could be several render attempts before the element we're
+      // looking for could be available in the DOM
+      retryEachFrame(
+        () => {
+          const element = getElement(clientId) || getElement(model.state.id);
+
+          if (element) {
+            element.focus();
+            resolve(element);
+          }
+          return !!element;
+        },
+        5,
+        reject
+      ); // 5 should be enough, right?!
+    }
+  });
+};

package/collection/lib/listItemRemove.ts

@@ -0,0 +1,21 @@
+import {useSelectionListModel} from './useSelectionListModel';
+
+export const listItemRemove = (
+  id: string,
+  model: ReturnType<typeof useSelectionListModel>
+): string | undefined => {
+  // bail early if an ID isn't available
+  if (!id) {
+    return;
+  }
+
+  const index = model.state.items.findIndex(item => item.id === model.state.cursorId);
+  const nextIndex = index === model.state.items.length - 1 ? index - 1 : index + 1;
+  const nextId = model.state.items[nextIndex]?.id;
+  if (nextId && model.state.cursorId === id) {
+    // We're removing the currently focused item. Focus next item
+    model.events.goTo({id: nextId});
+  }
+
+  return nextId;
+};

package/collection/lib/useListItemRemoveOnDeleteKey.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+
+import {useSelectionListModel} from './useSelectionListModel';
+import {focusOnCurrentCursor} from './focusOnCurrentCursor';
+import {listItemRemove} from './listItemRemove';
+
+/**
+ * This elemProps hook is used when a menu item is expected to be removed. It will advance the cursor to
+ * another item.
+ * This elemProps hook is used for cursor navigation by using [Roving
+ * Tabindex](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex). Only a single item in the
+ * collection has a tab stop. Pressing an arrow key moves the tab stop to a different item in the
+ * corresponding direction. See the [Roving Tabindex](#roving-tabindex) example. This elemProps hook
+ * should be applied to an `*.Item` component.
+ *
+ * ```ts
+ * const useMyItem = composeHooks(
+ *   useListItemRovingFocus, // adds the roving tabindex support
+ *   useListItemRegister
+ * );
+ * ```
+ */
+export const useListItemRemoveOnDeleteKey = createElemPropsHook(useSelectionListModel)(model => {
+  return {
+    onKeyDown(event: React.KeyboardEvent<HTMLElement>) {
+      if (event.key === 'Backspace' || event.key === 'Delete') {
+        const id = event.currentTarget.dataset.id || '';
+        const nextId = listItemRemove(id, model);
+        model.events.remove({id, nextId, event});
+        if (nextId) {
+          // use an animation frame to wait for any other model changes that may happen
+          requestAnimationFrame(() => {
+            focusOnCurrentCursor(model, nextId, event.currentTarget);
+          });
+        }
+      }
+    },
+  };
+});

package/collection/lib/useListItemRovingFocus.tsx

@@ -3,13 +3,7 @@ import {useIsRTL, createElemPropsHook} from '@workday/canvas-kit-react/common';
 
 import {useCursorListModel} from './useCursorListModel';
 import {keyboardEventToCursorEvents} from './keyUtils';
-
-// retry a function each frame so we don't rely on the timing mechanism of React's render cycle.
-const retryEachFrame = (cb: () => boolean, iterations: number) => {
-  if (cb() === false && iterations > 1) {
-    requestAnimationFrame(() => retryEachFrame(cb, iterations - 1));
-  }
-};
+import {focusOnCurrentCursor} from './focusOnCurrentCursor';
 
 /**
  * This elemProps hook is used for cursor navigation by using [Roving
@@ -33,36 +27,16 @@ export const useListItemRovingFocus = createElemPropsHook(useCursorListModel)(
     const stateRef = React.useRef(model.state);
     stateRef.current = model.state;
 
-    const keyElementRef = React.useRef<Element | null>(null);
+    const keyElementRef = React.useRef<HTMLElement | null>(null);
     const isRTL = useIsRTL();
 
     React.useEffect(() => {
+      // If the cursor change was triggered by this hook, we should change focus
       if (keyElementRef.current) {
-        const item = model.navigation.getItem(model.state.cursorId, model);
-        if (item) {
-          if (model.state.isVirtualized) {
-            model.state.UNSTABLE_virtual.scrollToIndex(item.index);
-          }
-
-          const selector = (id?: string) => {
-            return document.querySelector<HTMLElement>(`[data-focus-id="${`${id}-${item.id}`}"]`);
-          };
-
-          // In React concurrent mode, there could be several render attempts before the element we're
-          // looking for could be available in the DOM
-          retryEachFrame(() => {
-            // Attempt to extract the ID from the DOM element. This fixes issues where the server and client
-            // do not agree on a generated ID
-            const clientId = keyElementRef.current?.getAttribute('data-focus-id')?.split('-')[0];
-            const element = selector(clientId) || selector(model.state.id);
-
-            element?.focus();
-            if (element) {
-              keyElementRef.current = null;
-            }
-            return !!element;
-          }, 5); // 5 should be enough, right?!
-        }
+        focusOnCurrentCursor(model, model.state.cursorId, keyElementRef.current).then(() => {
+          // Reset key element since focus was successful
+          keyElementRef.current = null;
+        });
       }
       // we only want to run this effect if the cursor changes and not any other time
       // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -76,7 +50,7 @@ export const useListItemRovingFocus = createElemPropsHook(useCursorListModel)(
     }, [model.state.cursorId, model.state.items, model.events]);
 
     return {
-      onKeyDown(event: React.KeyboardEvent) {
+      onKeyDown(event: React.KeyboardEvent<HTMLElement>) {
         const handled = keyboardEventToCursorEvents(event, model, isRTL);
         if (handled) {
           event.preventDefault();

package/collection/lib/useListLoader.ts

@@ -269,6 +269,8 @@ export function useListLoader<
 
   const model = modelHook(
     modelHook.mergeConfig(config, {
+      // Loaders should virtualize by default. If they do not, it is an infinite scroll list
+      shouldVirtualize: true,
       items,
       shouldGoToNext: shouldLoadIndex('getNext', 'goToNext'),
       shouldGoToPrevious: shouldLoadIndex('getPrevious', 'goToPrevious'),

package/collection/lib/useListResetCursorOnBlur.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {createElemPropsHook, useMountLayout} from '@workday/canvas-kit-react/common';
 import {orientationKeyMap} from './keyUtils';
 import {useListModel} from './useListModel';
 
@@ -20,6 +20,15 @@ import {useListModel} from './useListModel';
  */
 export const useListResetCursorOnBlur = createElemPropsHook(useListModel)(({state, events}) => {
   const programmaticFocusRef = React.useRef(false);
+  const requestAnimationFrameRef = React.useRef(0);
+
+  useMountLayout(() => {
+    return () => {
+      // Cancelling the animation frame prevents React unmount errors
+      cancelAnimationFrame(requestAnimationFrameRef.current);
+    };
+  });
+
   return {
     onKeyDown(event: React.KeyboardEvent) {
       // Programmatic focus only on any focus change via keyboard
@@ -32,7 +41,12 @@ export const useListResetCursorOnBlur = createElemPropsHook(useListModel)(({stat
     },
     onBlur() {
       if (!programmaticFocusRef.current) {
-        events.goTo({id: state.selectedIds[0]});
+        // use an animation frame to wait for any other model changes that may happen on a blur
+        requestAnimationFrameRef.current = requestAnimationFrame(() => {
+          if (state.selectedIds[0] !== state.cursorId) {
+            events.goTo({id: state.selectedIds[0]});
+          }
+        });
       }
     },
   };

package/collection/lib/useSelectionListModel.tsx

@@ -109,6 +109,16 @@ export const useSelectionListModel = createModelHook({
     setSelectedIds(ids: 'all' | string[]) {
       setSelectedIds(ids);
     },
+    /**
+     * The `remove` event can be called by Behavior Hooks based on user interaction. The `onRemove`
+     * can be added to the model config to signal the user wishes to remove the item in the list.
+     * The `remove` event requires the dynamic API where `items` are passed to the model. It is up
+     * to you to remove the item from the list. Focus redirection should be automatically managed,
+     * if necessary.
+     */
+    remove(data: {id: string; nextId?: string; event?: Event | React.SyntheticEvent}) {
+      // nothing to do here. It is a signal event
+    },
   };
 
   return {...cursor, state, events, selection};

package/combobox/lib/hooks/useComboboxInput.ts

@@ -26,16 +26,13 @@ export const useComboboxInput = composeHooks(
         if (model.state.isVirtualized && item) {
           model.state.UNSTABLE_virtual.scrollToIndex(item.index);
         } else {
-          const listboxId = model.state.inputRef.current?.getAttribute('aria-controls');
-          if (listboxId) {
-            const menuItem = document.querySelector(
-              `[id="${listboxId}"] [data-id="${model.state.cursorId}"]`
-            );
-            if (menuItem) {
-              requestAnimationFrame(() => {
-                menuItem.scrollIntoView({block: 'nearest'});
-              });
-            }
+          const menuItem = document.querySelector(
+            `[id="${model.state.id}-list"] [data-id="${model.state.cursorId}"]`
+          );
+          if (menuItem) {
+            requestAnimationFrame(() => {
+              menuItem.scrollIntoView({block: 'nearest'});
+            });
           }
         }
       }

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

@@ -574,6 +574,42 @@ export declare const ActionBar: import("@workday/canvas-kit-react/common").Compo
         isVirtualized: boolean;
         items: import("../..").Item<any>[];
     }) => void) | undefined;
+    onRemove?: ((data: {
+        id: string;
+        nextId?: string | undefined;
+        event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+    }, prevState: {
+        hiddenIds: string[];
+        nonInteractiveIds: string[];
+        orientation: import("../../collection/lib/useBaseListModel").Orientation;
+        itemSizeCache: Record<string, number>;
+        itemWidthCache: Record<string, number>;
+        containerSize: number;
+        containerWidth: number;
+        containerGap: number;
+        overflowTargetWidth: number;
+        selectedIds: string[] | "all";
+        unselectedIds: string[];
+        cursorId: string;
+        columnCount: number;
+        pageSizeRef: React.MutableRefObject<number>;
+        cursorIndexRef: {
+            readonly current: 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;
+        indexRef: React.MutableRefObject<number>;
+        isVirtualized: boolean;
+        items: import("../..").Item<any>[];
+    }) => void) | undefined;
     onGoTo?: ((data: {
         id: string;
     }, prevState: {
@@ -1541,6 +1577,42 @@ export declare const ActionBar: import("@workday/canvas-kit-react/common").Compo
         isVirtualized: boolean;
         items: import("../..").Item<any>[];
     }) => boolean) | undefined;
+    shouldRemove?: ((data: {
+        id: string;
+        nextId?: string | undefined;
+        event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+    }, state: {
+        hiddenIds: string[];
+        nonInteractiveIds: string[];
+        orientation: import("../../collection/lib/useBaseListModel").Orientation;
+        itemSizeCache: Record<string, number>;
+        itemWidthCache: Record<string, number>;
+        containerSize: number;
+        containerWidth: number;
+        containerGap: number;
+        overflowTargetWidth: number;
+        selectedIds: string[] | "all";
+        unselectedIds: string[];
+        cursorId: string;
+        columnCount: number;
+        pageSizeRef: React.MutableRefObject<number>;
+        cursorIndexRef: {
+            readonly current: 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;
+        indexRef: React.MutableRefObject<number>;
+        isVirtualized: boolean;
+        items: import("../..").Item<any>[];
+    }) => boolean) | undefined;
     shouldGoTo?: ((data: {
         id: string;
     }, state: {
@@ -2076,6 +2148,11 @@ export declare const ActionBar: import("@workday/canvas-kit-react/common").Compo
         selectAll(): void;
         unselectAll(): void;
         setSelectedIds(ids: string[] | "all"): void;
+        remove(data: {
+            id: string;
+            nextId?: string | undefined;
+            event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+        }): void;
         goTo(data: {
             id: string;
         }): void;
@@ -2145,6 +2222,11 @@ export declare const ActionBar: import("@workday/canvas-kit-react/common").Compo
             selectAll(): void;
             unselectAll(): void;
             setSelectedIds(ids: string[] | "all"): void;
+            remove(data: {
+                id: string;
+                nextId?: string | undefined;
+                event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+            }): void;
             goTo(data: {
                 id: string;
             }): void;
@@ -2271,6 +2353,11 @@ export declare const ActionBar: import("@workday/canvas-kit-react/common").Compo
             selectAll(): void;
             unselectAll(): void;
             setSelectedIds(ids: string[] | "all"): void;
+            remove(data: {
+                id: string;
+                nextId?: string | undefined;
+                event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+            }): void;
             goTo(data: {
                 id: string;
             }): void;
@@ -2340,6 +2427,11 @@ export declare const ActionBar: import("@workday/canvas-kit-react/common").Compo
                 selectAll(): void;
                 unselectAll(): void;
                 setSelectedIds(ids: string[] | "all"): void;
+                remove(data: {
+                    id: string;
+                    nextId?: string | undefined;
+                    event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+                }): void;
                 goTo(data: {
                     id: string;
                 }): void;
@@ -2460,6 +2552,11 @@ export declare const ActionBar: import("@workday/canvas-kit-react/common").Compo
             selectAll(): void;
             unselectAll(): void;
             setSelectedIds(ids: string[] | "all"): void;
+            remove(data: {
+                id: string;
+                nextId?: string | undefined;
+                event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+            }): void;
             goTo(data: {
                 id: string;
             }): void;
@@ -2529,6 +2626,11 @@ export declare const ActionBar: import("@workday/canvas-kit-react/common").Compo
                 selectAll(): void;
                 unselectAll(): void;
                 setSelectedIds(ids: string[] | "all"): void;
+                remove(data: {
+                    id: string;
+                    nextId?: string | undefined;
+                    event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+                }): void;
                 goTo(data: {
                     id: string;
                 }): void;
@@ -2639,6 +2741,11 @@ export declare const ActionBar: import("@workday/canvas-kit-react/common").Compo
             selectAll(): void;
             unselectAll(): void;
             setSelectedIds(ids: string[] | "all"): void;
+            remove(data: {
+                id: string;
+                nextId?: string | undefined;
+                event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+            }): void;
             goTo(data: {
                 id: string;
             }): void;
@@ -2708,6 +2815,11 @@ export declare const ActionBar: import("@workday/canvas-kit-react/common").Compo
                 selectAll(): void;
                 unselectAll(): void;
                 setSelectedIds(ids: string[] | "all"): void;
+                remove(data: {
+                    id: string;
+                    nextId?: string | undefined;
+                    event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+                }): void;
                 goTo(data: {
                     id: string;
                 }): void;
@@ -3001,6 +3113,42 @@ export declare const ActionBar: import("@workday/canvas-kit-react/common").Compo
             items: import("../..").Item<any>[];
             mode: "multiple" | "single";
         }) => void) | undefined;
+        onRemove?: ((data: {
+            id: string;
+            nextId?: string | undefined;
+            event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+        }, prevState: {
+            stackRef: React.RefObject<HTMLDivElement>;
+            targetRef: React.RefObject<HTMLButtonElement>;
+            initialFocusRef: React.RefObject<any> | undefined;
+            returnFocusRef: React.RefObject<any> | undefined;
+            placement: import("@popperjs/core").Placement;
+            id: string;
+            visibility: "hidden" | "visible";
+            selectedIds: string[] | "all";
+            unselectedIds: string[];
+            cursorId: string;
+            columnCount: number;
+            pageSizeRef: React.MutableRefObject<number>;
+            cursorIndexRef: {
+                readonly current: 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>;
+            orientation: "horizontal" | "vertical";
+            indexRef: React.MutableRefObject<number>;
+            nonInteractiveIds: string[];
+            isVirtualized: boolean;
+            items: import("../..").Item<any>[];
+            mode: "multiple" | "single";
+        }) => void) | undefined;
         onGoTo?: ((data: {
             id: string;
         }, prevState: {
@@ -3687,6 +3835,42 @@ export declare const ActionBar: import("@workday/canvas-kit-react/common").Compo
             items: import("../..").Item<any>[];
             mode: "multiple" | "single";
         }) => boolean) | undefined;
+        shouldRemove?: ((data: {
+            id: string;
+            nextId?: string | undefined;
+            event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+        }, state: {
+            stackRef: React.RefObject<HTMLDivElement>;
+            targetRef: React.RefObject<HTMLButtonElement>;
+            initialFocusRef: React.RefObject<any> | undefined;
+            returnFocusRef: React.RefObject<any> | undefined;
+            placement: import("@popperjs/core").Placement;
+            id: string;
+            visibility: "hidden" | "visible";
+            selectedIds: string[] | "all";
+            unselectedIds: string[];
+            cursorId: string;
+            columnCount: number;
+            pageSizeRef: React.MutableRefObject<number>;
+            cursorIndexRef: {
+                readonly current: 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>;
+            orientation: "horizontal" | "vertical";
+            indexRef: React.MutableRefObject<number>;
+            nonInteractiveIds: string[];
+            isVirtualized: boolean;
+            items: import("../..").Item<any>[];
+            mode: "multiple" | "single";
+        }) => boolean) | undefined;
         shouldGoTo?: ((data: {
             id: string;
         }, state: {
@@ -4189,6 +4373,11 @@ export declare const ActionBar: import("@workday/canvas-kit-react/common").Compo
             selectAll(): void;
             unselectAll(): void;
             setSelectedIds(ids: string[] | "all"): void;
+            remove(data: {
+                id: string;
+                nextId?: string | undefined;
+                event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+            }): void;
             goTo(data: {
                 id: string;
             }): void;
@@ -4262,6 +4451,11 @@ export declare const ActionBar: import("@workday/canvas-kit-react/common").Compo
                 selectAll(): void;
                 unselectAll(): void;
                 setSelectedIds(ids: string[] | "all"): void;
+                remove(data: {
+                    id: string;
+                    nextId?: string | undefined;
+                    event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+                }): void;
                 goTo(data: {
                     id: string;
                 }): void;
@@ -4335,6 +4529,11 @@ export declare const ActionBar: import("@workday/canvas-kit-react/common").Compo
                 selectAll(): void;
                 unselectAll(): void;
                 setSelectedIds(ids: string[] | "all"): void;
+                remove(data: {
+                    id: string;
+                    nextId?: string | undefined;
+                    event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+                }): void;
                 goTo(data: {
                     id: string;
                 }): void;
@@ -4408,6 +4607,11 @@ export declare const ActionBar: import("@workday/canvas-kit-react/common").Compo
                 selectAll(): void;
                 unselectAll(): void;
                 setSelectedIds(ids: string[] | "all"): void;
+                remove(data: {
+                    id: string;
+                    nextId?: string | undefined;
+                    event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+                }): void;
                 goTo(data: {
                     id: string;
                 }): void;
@@ -4481,6 +4685,11 @@ export declare const ActionBar: import("@workday/canvas-kit-react/common").Compo
                 selectAll(): void;
                 unselectAll(): void;
                 setSelectedIds(ids: string[] | "all"): void;
+                remove(data: {
+                    id: string;
+                    nextId?: string | undefined;
+                    event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+                }): void;
                 goTo(data: {
                     id: string;
                 }): void;
@@ -4559,6 +4768,11 @@ export declare const ActionBar: import("@workday/canvas-kit-react/common").Compo
                 selectAll(): void;
                 unselectAll(): void;
                 setSelectedIds(ids: string[] | "all"): void;
+                remove(data: {
+                    id: string;
+                    nextId?: string | undefined;
+                    event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+                }): void;
                 goTo(data: {
                     id: string;
                 }): void;
@@ -4638,6 +4852,11 @@ export declare const ActionBar: import("@workday/canvas-kit-react/common").Compo
                 selectAll(): void;
                 unselectAll(): void;
                 setSelectedIds(ids: string[] | "all"): void;
+                remove(data: {
+                    id: string;
+                    nextId?: string | undefined;
+                    event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+                }): void;
                 goTo(data: {
                     id: string;
                 }): void;
@@ -4711,6 +4930,11 @@ export declare const ActionBar: import("@workday/canvas-kit-react/common").Compo
                 selectAll(): void;
                 unselectAll(): void;
                 setSelectedIds(ids: string[] | "all"): void;
+                remove(data: {
+                    id: string;
+                    nextId?: string | undefined;
+                    event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+                }): void;
                 goTo(data: {
                     id: string;
                 }): void;