@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
74 lines (73 loc) • 3.94 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useComboboxInput = void 0;
const react_1 = __importDefault(require("react"));
const common_1 = require("@workday/canvas-kit-react/common");
const popup_1 = require("@workday/canvas-kit-react/popup");
const collection_1 = require("@workday/canvas-kit-react/collection");
const useComboboxModel_1 = require("./useComboboxModel");
const useComboboxInputOpenWithArrowKeys_1 = require("./useComboboxInputOpenWithArrowKeys");
const useSetPopupWidth_1 = require("./useSetPopupWidth");
const useComboboxListKeyboardHandler_1 = require("./useComboboxListKeyboardHandler");
/**
* `useComboboxInput` Adds all attributes necessary to start with a {@link ComboboxInput Combobox.Input}. It opens the
* menu with arrow keys, uses {@link useListActiveDescendant}, and handles keyboard arrows to
* navigate items of the menu. You may also compose this hook to add more specific behaviors for
* your {@link ComboboxInput Combobox.Input}.
*/
exports.useComboboxInput = (0, common_1.composeHooks)((0, common_1.createElemPropsHook)(useComboboxModel_1.useComboboxModel)((model, ref) => {
const elementRef = (0, common_1.useForkRef)(ref, model.state.inputRef);
react_1.default.useEffect(() => {
if (model.state.cursorId && model.state.visibility === 'visible') {
const item = model.navigation.getItem(model.state.cursorId, model);
if (model.state.isVirtualized && item) {
model.state.UNSTABLE_virtual.scrollToIndex(item.index);
}
else {
const menuItem = document.querySelector(`[id="${model.state.id}-list"] [data-id="${model.state.cursorId}"]`);
if (menuItem) {
requestAnimationFrame(() => {
menuItem.scrollIntoView({ block: 'nearest' });
});
}
}
}
// we only want to run this effect if the cursor, visibility and selectedIds change and not any other time
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [model.state.cursorId, model.state.selectedIds, model.state.visibility]);
return {
onKeyDown(event) {
if (event.key === 'Enter' && !event.metaKey && model.state.visibility === 'visible') {
const element = document.querySelector(`[data-id="${model.state.cursorId}"]`);
if (element && (element === null || element === void 0 ? void 0 : element.getAttribute('aria-disabled')) !== 'true') {
model.events.select({ id: model.state.cursorId });
if (model.state.mode === 'single') {
model.events.hide(event);
}
}
// We don't want to submit forms while the combobox is open
event.preventDefault();
}
},
onBlur(event) {
// model.events.hide(event);
},
onClick(event) {
if (model.state.visibility === 'hidden') {
model.events.setWidth(event.currentTarget.clientWidth);
}
},
value: model.state.value,
role: 'combobox',
'aria-haspopup': 'listbox',
'aria-expanded': model.state.visibility === 'visible',
'aria-autocomplete': 'list',
'aria-controls': `${model.state.id}-list`,
'aria-activedescendant': model.state.visibility === 'hidden' ? null : undefined,
id: model.state.id,
ref: elementRef,
};
}), useSetPopupWidth_1.useSetPopupWidth, useComboboxInputOpenWithArrowKeys_1.useComboboxInputOpenWithArrowKeys, collection_1.useListActiveDescendant, useComboboxListKeyboardHandler_1.useComboboxListKeyboardHandler, popup_1.usePopupTarget);