@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
78 lines (77 loc) • 4.24 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useSelectInput = void 0;
const react_1 = __importDefault(require("react"));
const common_1 = require("@workday/canvas-kit-react/common");
const combobox_1 = require("@workday/canvas-kit-react/combobox");
const useSelectModel_1 = require("./useSelectModel");
/**
* `useSelectInput` extends {@link useComboboxInput useComboboxInput} and {@link useComboboxKeyboardTypeAhead useComboboxKeyboardTypeAhead} and adds type ahead functionality and Select-specific [keyboard support](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/).
*/
exports.useSelectInput = (0, common_1.composeHooks)((0, common_1.createElemPropsHook)(useSelectModel_1.useSelectModel)((model, ref, elemProps = {}) => {
const { elementRef, localRef } = (0, common_1.useLocalRef)(ref);
(0, common_1.useResizeObserver)({
ref: localRef,
onResize: data => {
if (model.state.visibility === 'visible') {
// Width of the Input + 2px border + 8px padding
const calculatedWidth = data.width ? data.width + 42 + 8 : 0;
model.events.setWidth(calculatedWidth);
}
},
});
// This effect is a copy of what is in useComboboxInput. In this case, we need access to `textInputRef` instead of `model.state.inputRef`
// since it points to the visual input and not the hidden input. This allows scroll to index to work
react_1.default.useEffect(() => {
var _a;
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 listboxId = (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-controls');
if (listboxId) {
const menuItem = document.querySelector(`[id="${listboxId}"] [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) {
// Prevent the keys from being enter in the input
if (event.key !== 'Tab') {
event.preventDefault();
}
// Select should open if Spacebar is typed and nothing has been typed AND the menu is hidden
if (event.key === 'Spacebar' ||
(event.key === ' ' && model.state.visibility === 'hidden' && (elemProps === null || elemProps === void 0 ? void 0 : elemProps.keySoFar) === '')) {
model.events.show();
}
// if the menu is visible
if ((event.key === 'Spacebar' || event.key === ' ') &&
model.state.visibility === 'visible') {
// If key so far is empty, they're done typing, select the item where the cursor is located and hide the menu
if ((elemProps === null || elemProps === void 0 ? void 0 : elemProps.keySoFar) === '') {
model.events.select({
id: model.state.cursorId,
});
model.events.hide();
}
}
},
autoComplete: 'off',
keySoFar: null,
ref: elementRef,
};
}), combobox_1.useComboboxKeyboardTypeAhead, combobox_1.useComboboxResetCursorToSelected, combobox_1.useComboboxMoveCursorToSelected, combobox_1.useComboboxInputConstrained, combobox_1.useComboboxInput);