@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
26 lines (25 loc) • 1.13 kB
JavaScript
Object.defineProperty(exports, "__esModule", { value: true });
exports.useListItemActiveDescendant = void 0;
const common_1 = require("@workday/canvas-kit-react/common");
const useCursorListModel_1 = require("./useCursorListModel");
/**
* This elemProps hook is used for cursor navigation by using [Active
* Descendant](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_focus_activedescendant).
* This hook should be applied to List Items, not the list (use {@link useListActiveDescendant} for the list).
* This hook adds the focus class so that lists using `aria-activedescendant` get the correct
* visual cue for visual users.
*
* ```ts
* const useMyItem = composeHooks(
* useListItemActiveDescendant, // adds `aria-activedescendant` support
* useListItemRegister
* );
```
*/
exports.useListItemActiveDescendant = (0, common_1.createElemPropsHook)(useCursorListModel_1.useCursorListModel)((model, _ref, elemProps = {}) => {
const id = elemProps['data-id'] || '';
return {
className: model.state.cursorId && model.state.cursorId === id ? 'focus' : '',
};
});
;