@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
73 lines (72 loc) • 3.05 kB
JavaScript
"use client";
require("../../../_virtual/_rolldown/runtime.cjs");
const require_Combobox_context = require("../Combobox.context.cjs");
let react = require("react");
//#region packages/@mantine/core/src/components/Combobox/use-combobox-target-props/use-combobox-target-props.ts
function useComboboxTargetProps({ onKeyDown, onClick, withKeyboardNavigation, withAriaAttributes, withExpandedAttribute, targetType, autoComplete }) {
const ctx = require_Combobox_context.useComboboxContext();
const [selectedOptionId, setSelectedOptionId] = (0, react.useState)(null);
const handleKeyDown = (event) => {
onKeyDown?.(event);
if (ctx.readOnly) return;
if (withKeyboardNavigation) {
if (event.nativeEvent.isComposing) return;
if (event.nativeEvent.code === "ArrowDown") {
event.preventDefault();
if (!ctx.store.dropdownOpened) {
ctx.store.openDropdown("keyboard");
setSelectedOptionId(ctx.store.selectActiveOption());
ctx.store.updateSelectedOptionIndex("selected", { scrollIntoView: true });
} else setSelectedOptionId(ctx.store.selectNextOption());
}
if (event.nativeEvent.code === "ArrowUp") {
event.preventDefault();
if (!ctx.store.dropdownOpened) {
ctx.store.openDropdown("keyboard");
setSelectedOptionId(ctx.store.selectActiveOption());
ctx.store.updateSelectedOptionIndex("selected", { scrollIntoView: true });
} else setSelectedOptionId(ctx.store.selectPreviousOption());
}
if (event.nativeEvent.code === "Enter" || event.nativeEvent.code === "NumpadEnter") {
if (event.nativeEvent.keyCode === 229) return;
const selectedOptionIndex = ctx.store.getSelectedOptionIndex();
if (ctx.store.dropdownOpened && selectedOptionIndex !== -1) {
event.preventDefault();
ctx.store.clickSelectedOption();
} else if (targetType === "button") {
event.preventDefault();
ctx.store.openDropdown("keyboard");
}
}
if (event.key === "Escape") ctx.store.closeDropdown("keyboard");
if (event.nativeEvent.code === "Space") {
if (targetType === "button") {
event.preventDefault();
ctx.store.toggleDropdown("keyboard");
}
}
}
};
const ariaAttributes = withAriaAttributes ? {
...withExpandedAttribute ? { role: "combobox" } : {},
"aria-haspopup": "listbox",
"aria-expanded": withExpandedAttribute ? !!(ctx.store.listId && ctx.store.dropdownOpened) : void 0,
"aria-controls": ctx.store.dropdownOpened && ctx.store.listId ? ctx.store.listId : void 0,
"aria-activedescendant": ctx.store.dropdownOpened ? selectedOptionId || void 0 : void 0,
autoComplete,
"data-expanded": ctx.store.dropdownOpened || void 0,
"data-mantine-stop-propagation": ctx.store.dropdownOpened || void 0
} : {};
const handleClick = (event) => {
if (targetType === "button") event.currentTarget.focus();
onClick?.(event);
};
return {
...ariaAttributes,
onKeyDown: handleKeyDown,
onClick: handleClick
};
}
//#endregion
exports.useComboboxTargetProps = useComboboxTargetProps;
//# sourceMappingURL=use-combobox-target-props.cjs.map