@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
115 lines (114 loc) • 4.75 kB
JavaScript
"use client";
const require_create_event_handler = require("../../../core/utils/create-event-handler/create-event-handler.cjs");
const require_use_props = require("../../../core/MantineProvider/use-props/use-props.cjs");
const require_factory = require("../../../core/factory/factory.cjs");
const require_Input = require("../../Input/Input.cjs");
const require_Menu_context = require("../Menu.context.cjs");
const require_Menu_module = require("../Menu.module.cjs");
let react = require("react");
let _mantine_hooks = require("@mantine/hooks");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/Menu/MenuSearch/MenuSearch.tsx
const ITEM_SELECTOR = "[data-menu-item]:not([data-disabled])";
const ACTIVE_SELECTOR = "[data-menu-active]";
function getDropdown(node) {
return node?.closest("[data-menu-dropdown]");
}
function getItems(dropdown) {
if (!dropdown) return [];
return Array.from(dropdown.querySelectorAll(ITEM_SELECTOR)).filter((item) => item.closest("[data-menu-dropdown]") === dropdown);
}
function clearActive(dropdown) {
if (!dropdown) return;
dropdown.querySelectorAll(ACTIVE_SELECTOR).forEach((node) => {
if (node.closest("[data-menu-dropdown]") === dropdown) node.removeAttribute("data-menu-active");
});
}
function setActive(item, dropdown) {
clearActive(dropdown);
if (item) {
item.setAttribute("data-menu-active", "true");
item.scrollIntoView({ block: "nearest" });
}
}
function getActiveIndex(items) {
return items.findIndex((item) => item.hasAttribute("data-menu-active"));
}
const defaultProps = { clearSearchOnClose: true };
const MenuSearch = require_factory.factory((props) => {
const { classNames, styles, onKeyDown, onChange, size, clearSearchOnClose, ref, ...others } = require_use_props.useProps("MenuSearch", defaultProps, props);
const ctx = require_Menu_context.useMenuContext();
const inputRef = (0, react.useRef)(null);
const mergedRef = (0, _mantine_hooks.useMergedRef)(ref, inputRef);
const onChangeRef = (0, react.useRef)(onChange);
onChangeRef.current = onChange;
(0, react.useEffect)(() => {
return ctx.registerSearch();
}, [ctx.registerSearch]);
(0, react.useEffect)(() => {
if (clearSearchOnClose) ctx.searchExitClearRef.current = () => {
onChangeRef.current?.({ currentTarget: { value: "" } });
};
else ctx.searchExitClearRef.current = null;
}, [clearSearchOnClose, ctx.searchExitClearRef]);
(0, react.useEffect)(() => {
if (!ctx.opened) clearActive(getDropdown(inputRef.current));
}, [ctx.opened]);
const handleChange = require_create_event_handler.createEventHandler(onChange, (event) => {
clearActive(getDropdown(event.currentTarget));
});
const handleKeyDown = require_create_event_handler.createEventHandler(onKeyDown, (event) => {
if (event.defaultPrevented) return;
const dropdown = getDropdown(event.currentTarget);
const items = getItems(dropdown);
if (event.key === "ArrowDown") {
event.preventDefault();
if (items.length === 0) return;
const current = getActiveIndex(items);
setActive(items[current >= items.length - 1 ? ctx.loop ? 0 : current : current + 1] ?? null, dropdown);
} else if (event.key === "ArrowUp") {
event.preventDefault();
if (items.length === 0) return;
const current = getActiveIndex(items);
setActive(items[current <= 0 ? current === -1 ? items.length - 1 : ctx.loop ? items.length - 1 : 0 : current - 1] ?? null, dropdown);
} else if (event.key === "Home") {
event.preventDefault();
if (items.length > 0) setActive(items[0], dropdown);
} else if (event.key === "End") {
event.preventDefault();
if (items.length > 0) setActive(items[items.length - 1], dropdown);
} else if (event.key === "Enter") {
if (event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229) return;
const target = items[getActiveIndex(items)];
if (target) {
event.preventDefault();
if (target.hasAttribute("data-sub-menu-item")) {
target.focus();
target.dispatchEvent(new KeyboardEvent("keydown", {
key: "ArrowRight",
bubbles: true
}));
} else target.click();
}
}
});
const _styles = ctx.getStyles("search");
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Input.Input, {
"data-autofocus": true,
"data-mantine-stop-propagation": true,
type: "search",
size,
...others,
ref: mergedRef,
classNames: [{ input: _styles.className }, classNames],
styles: [{ input: _styles.style }, styles],
onKeyDown: handleKeyDown,
onChange: handleChange,
__staticSelector: "Menu"
});
});
MenuSearch.classes = require_Menu_module.default;
MenuSearch.displayName = "@mantine/core/MenuSearch";
//#endregion
exports.MenuSearch = MenuSearch;
//# sourceMappingURL=MenuSearch.cjs.map