@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
165 lines (164 loc) • 6.49 kB
JavaScript
"use client";
import { findElementBySelector, findElementsBySelector, getRootElement } from "../../../core/utils/find-element-in-shadow-dom/find-element-in-shadow-dom.mjs";
import { getFirstIndex, getNextIndex, getPreviousIndex } from "./get-index/get-index.mjs";
import { useCallback, useEffect, useRef } from "react";
import { useUncontrolled } from "@mantine/hooks";
//#region packages/@mantine/core/src/components/Combobox/use-combobox/use-combobox.ts
function useCombobox({ defaultOpened, opened, onOpenedChange, onDropdownClose, onDropdownOpen, loop = true, scrollBehavior = "instant" } = {}) {
const [dropdownOpened, setDropdownOpened] = useUncontrolled({
value: opened,
defaultValue: defaultOpened,
finalValue: false,
onChange: onOpenedChange
});
const listId = useRef(null);
const selectedOptionIndex = useRef(-1);
const searchRef = useRef(null);
const targetRef = useRef(null);
const focusSearchTimeout = useRef(-1);
const focusTargetTimeout = useRef(-1);
const selectedIndexUpdateTimeout = useRef(-1);
const openDropdown = useCallback((eventSource = "unknown") => {
if (!dropdownOpened) {
setDropdownOpened(true);
onDropdownOpen?.(eventSource);
}
}, [
setDropdownOpened,
onDropdownOpen,
dropdownOpened
]);
const closeDropdown = useCallback((eventSource = "unknown") => {
if (dropdownOpened) {
setDropdownOpened(false);
onDropdownClose?.(eventSource);
}
}, [
setDropdownOpened,
onDropdownClose,
dropdownOpened
]);
const toggleDropdown = useCallback((eventSource = "unknown") => {
if (dropdownOpened) closeDropdown(eventSource);
else openDropdown(eventSource);
}, [
closeDropdown,
openDropdown,
dropdownOpened
]);
const clearSelectedItem = useCallback(() => {
const root = getRootElement(targetRef.current);
const selected = findElementBySelector(`#${listId.current} [data-combobox-selected]`, root);
selected?.removeAttribute("data-combobox-selected");
selected?.removeAttribute("aria-selected");
}, []);
const selectOption = useCallback((index) => {
const root = getRootElement(targetRef.current);
const list = findElementBySelector(`#${listId.current}`, root);
const items = list ? findElementsBySelector("[data-combobox-option]", list) : null;
if (!items) return null;
const nextIndex = index >= items.length ? 0 : index < 0 ? items.length - 1 : index;
selectedOptionIndex.current = nextIndex;
if (items?.[nextIndex] && !items[nextIndex].hasAttribute("data-combobox-disabled")) {
clearSelectedItem();
items[nextIndex].setAttribute("data-combobox-selected", "true");
items[nextIndex].setAttribute("aria-selected", "true");
items[nextIndex].scrollIntoView({
block: "nearest",
behavior: scrollBehavior
});
return items[nextIndex].id;
}
return null;
}, [scrollBehavior, clearSelectedItem]);
const selectActiveOption = useCallback(() => {
const root = getRootElement(targetRef.current);
const activeOption = findElementBySelector(`#${listId.current} [data-combobox-active]`, root);
if (activeOption) return selectOption(findElementsBySelector(`#${listId.current} [data-combobox-option]`, root).findIndex((option) => option === activeOption));
return selectOption(0);
}, [selectOption]);
const selectNextOption = useCallback(() => {
const root = getRootElement(targetRef.current);
const items = findElementsBySelector(`#${listId.current} [data-combobox-option]`, root);
return selectOption(getNextIndex(selectedOptionIndex.current, items, loop));
}, [selectOption, loop]);
const selectPreviousOption = useCallback(() => {
const root = getRootElement(targetRef.current);
const items = findElementsBySelector(`#${listId.current} [data-combobox-option]`, root);
return selectOption(getPreviousIndex(selectedOptionIndex.current, items, loop));
}, [selectOption, loop]);
const selectFirstOption = useCallback(() => {
const root = getRootElement(targetRef.current);
return selectOption(getFirstIndex(findElementsBySelector(`#${listId.current} [data-combobox-option]`, root)));
}, [selectOption]);
const updateSelectedOptionIndex = useCallback((target = "selected", options) => {
if (typeof target === "number") {
selectedOptionIndex.current = target;
const root = getRootElement(targetRef.current);
const items = findElementsBySelector(`#${listId.current} [data-combobox-option]`, root);
if (options?.scrollIntoView) items[target]?.scrollIntoView({
block: "nearest",
behavior: scrollBehavior
});
return;
}
selectedIndexUpdateTimeout.current = window.setTimeout(() => {
const root = getRootElement(targetRef.current);
const items = findElementsBySelector(`#${listId.current} [data-combobox-option]`, root);
const index = items.findIndex((option) => option.hasAttribute(`data-combobox-${target}`));
selectedOptionIndex.current = index;
if (options?.scrollIntoView) items[index]?.scrollIntoView({
block: "nearest",
behavior: scrollBehavior
});
}, 0);
}, []);
const resetSelectedOption = useCallback(() => {
selectedOptionIndex.current = -1;
clearSelectedItem();
}, [clearSelectedItem]);
const clickSelectedOption = useCallback(() => {
const root = getRootElement(targetRef.current);
(findElementsBySelector(`#${listId.current} [data-combobox-option]`, root)?.[selectedOptionIndex.current])?.click();
}, []);
const setListId = useCallback((id) => {
listId.current = id;
}, []);
const focusSearchInput = useCallback(() => {
focusSearchTimeout.current = window.setTimeout(() => searchRef.current?.focus(), 0);
}, []);
const focusTarget = useCallback(() => {
focusTargetTimeout.current = window.setTimeout(() => targetRef.current?.focus(), 0);
}, []);
const getSelectedOptionIndex = useCallback(() => selectedOptionIndex.current, []);
useEffect(() => () => {
window.clearTimeout(focusSearchTimeout.current);
window.clearTimeout(focusTargetTimeout.current);
window.clearTimeout(selectedIndexUpdateTimeout.current);
}, []);
return {
dropdownOpened,
openDropdown,
closeDropdown,
toggleDropdown,
selectedOptionIndex: selectedOptionIndex.current,
getSelectedOptionIndex,
selectOption,
selectFirstOption,
selectActiveOption,
selectNextOption,
selectPreviousOption,
resetSelectedOption,
updateSelectedOptionIndex,
listId: listId.current,
setListId,
clickSelectedOption,
searchRef,
focusSearchInput,
targetRef,
focusTarget
};
}
//#endregion
export { useCombobox };
//# sourceMappingURL=use-combobox.mjs.map