@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
41 lines (40 loc) • 1.91 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useListItemRemoveOnDeleteKey = void 0;
const common_1 = require("@workday/canvas-kit-react/common");
const useSelectionListModel_1 = require("./useSelectionListModel");
const focusOnCurrentCursor_1 = require("./focusOnCurrentCursor");
const listItemRemove_1 = require("./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
* );
* ```
*/
exports.useListItemRemoveOnDeleteKey = (0, common_1.createElemPropsHook)(useSelectionListModel_1.useSelectionListModel)(model => {
return {
onKeyDown(event) {
if (event.key === 'Backspace' || event.key === 'Delete') {
const id = event.currentTarget.dataset.id || '';
const nextId = (0, listItemRemove_1.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(() => {
(0, focusOnCurrentCursor_1.focusOnCurrentCursor)(model, nextId, event.currentTarget);
});
}
}
},
};
});