@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
154 lines (153 loc) • 5.12 kB
JavaScript
"use client";
require("../../../_virtual/_rolldown/runtime.cjs");
const require_get_virtualized_index = require("./get-index/get-virtualized-index.cjs");
let react = require("react");
let _mantine_hooks = require("@mantine/hooks");
//#region packages/@mantine/core/src/components/Combobox/use-combobox/use-virtualized-combobox.ts
function useVirtualizedCombobox({ defaultOpened, opened, onOpenedChange, onDropdownClose, onDropdownOpen, loop = true, totalOptionsCount, isOptionDisabled = () => false, getOptionId, selectedOptionIndex, setSelectedOptionIndex, activeOptionIndex, onSelectedOptionSubmit } = {
totalOptionsCount: 0,
getOptionId: () => null,
selectedOptionIndex: -1,
setSelectedOptionIndex: () => {},
onSelectedOptionSubmit: () => {}
}) {
const [dropdownOpened, setDropdownOpened] = (0, _mantine_hooks.useUncontrolled)({
value: opened,
defaultValue: defaultOpened,
finalValue: false,
onChange: onOpenedChange
});
const listId = (0, react.useRef)(null);
const searchRef = (0, react.useRef)(null);
const targetRef = (0, react.useRef)(null);
const focusSearchTimeout = (0, react.useRef)(-1);
const focusTargetTimeout = (0, react.useRef)(-1);
const openDropdown = (0, react.useCallback)((eventSource = "unknown") => {
if (!dropdownOpened) {
setDropdownOpened(true);
onDropdownOpen?.(eventSource);
}
}, [
setDropdownOpened,
onDropdownOpen,
dropdownOpened
]);
const closeDropdown = (0, react.useCallback)((eventSource = "unknown") => {
if (dropdownOpened) {
setDropdownOpened(false);
onDropdownClose?.(eventSource);
}
}, [
setDropdownOpened,
onDropdownClose,
dropdownOpened
]);
const toggleDropdown = (0, react.useCallback)((eventSource = "unknown") => {
if (dropdownOpened) closeDropdown(eventSource);
else openDropdown(eventSource);
}, [
closeDropdown,
openDropdown,
dropdownOpened
]);
const selectOption = (0, react.useCallback)((index) => {
if (totalOptionsCount === 0) {
setSelectedOptionIndex(-1);
return null;
}
const nextIndex = index >= totalOptionsCount ? 0 : index < 0 ? totalOptionsCount - 1 : index;
if (isOptionDisabled(nextIndex)) return null;
setSelectedOptionIndex(nextIndex);
return getOptionId(nextIndex);
}, [
totalOptionsCount,
isOptionDisabled,
setSelectedOptionIndex,
getOptionId
]);
const selectActiveOption = (0, react.useCallback)(() => selectOption(activeOptionIndex ?? 0), [selectOption, activeOptionIndex]);
const selectNextOption = (0, react.useCallback)(() => selectOption(require_get_virtualized_index.getNextIndex({
currentIndex: selectedOptionIndex,
isOptionDisabled,
totalOptionsCount,
loop
})), [
selectOption,
selectedOptionIndex,
isOptionDisabled,
totalOptionsCount,
loop
]);
const selectPreviousOption = (0, react.useCallback)(() => selectOption(require_get_virtualized_index.getPreviousIndex({
currentIndex: selectedOptionIndex,
isOptionDisabled,
totalOptionsCount,
loop
})), [
selectOption,
selectedOptionIndex,
isOptionDisabled,
totalOptionsCount,
loop
]);
const selectFirstOption = (0, react.useCallback)(() => selectOption(require_get_virtualized_index.getFirstIndex({
isOptionDisabled,
totalOptionsCount
})), [
selectOption,
isOptionDisabled,
totalOptionsCount
]);
const resetSelectedOption = (0, react.useCallback)(() => {
setSelectedOptionIndex(-1);
}, [setSelectedOptionIndex]);
const clickSelectedOption = (0, react.useCallback)(() => {
if (selectedOptionIndex >= 0 && selectedOptionIndex < totalOptionsCount && !isOptionDisabled(selectedOptionIndex)) onSelectedOptionSubmit?.(selectedOptionIndex);
}, [
selectedOptionIndex,
totalOptionsCount,
isOptionDisabled,
onSelectedOptionSubmit
]);
const setListId = (0, react.useCallback)((id) => {
listId.current = id;
}, []);
const focusSearchInput = (0, react.useCallback)(() => {
focusSearchTimeout.current = window.setTimeout(() => searchRef.current?.focus(), 0);
}, []);
const focusTarget = (0, react.useCallback)(() => {
focusTargetTimeout.current = window.setTimeout(() => targetRef.current?.focus(), 0);
}, []);
(0, react.useEffect)(() => () => {
window.clearTimeout(focusSearchTimeout.current);
window.clearTimeout(focusTargetTimeout.current);
}, []);
return {
dropdownOpened,
openDropdown,
closeDropdown,
toggleDropdown,
selectedOptionIndex,
getSelectedOptionIndex: (0, react.useCallback)(() => selectedOptionIndex, [selectedOptionIndex]),
selectOption,
selectFirstOption,
selectActiveOption,
selectNextOption,
selectPreviousOption,
resetSelectedOption,
updateSelectedOptionIndex: (0, react.useCallback)((index) => {
if (typeof index === "number") setSelectedOptionIndex(index);
if (index === "active" && typeof activeOptionIndex === "number") setSelectedOptionIndex(activeOptionIndex);
}, [setSelectedOptionIndex, activeOptionIndex]),
listId: listId.current,
setListId,
clickSelectedOption,
searchRef,
focusSearchInput,
targetRef,
focusTarget
};
}
//#endregion
exports.useVirtualizedCombobox = useVirtualizedCombobox;
//# sourceMappingURL=use-virtualized-combobox.cjs.map