@workday/canvas-kit-react/dist/es6/collection/lib/useListItemRemoveOnDeleteKey.js

The parent module that contains all Workday Canvas Kit React components

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) {
            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);
                    });
                }
            }
        },
    };
});