@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
89 lines • 3.63 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useSpotlight = useSpotlight;
/**
*
* Copyright (c) "Neo4j"
* Neo4j Sweden AB [http://neo4j.com]
*
* This file is part of Neo4j.
*
* Neo4j is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
const react_1 = require("@floating-ui/react");
const base_1 = require("@neo4j-ndl/base");
const react_2 = require("react");
function useSpotlight({ isInitialOpen = false, placement = 'bottom', isOpen: controlledOpen, onOpenChange: setControlledOpen, anchorElement, anchorElementAsPortalAnchor, initialFocus, closeOnClickOutside, strategy = 'absolute', } = {}) {
var _a;
const [isOpenUncontrolled, setIsOpenUncontrolled] = (0, react_2.useState)(isInitialOpen);
const [labelId, setLabelId] = (0, react_2.useState)();
const [descriptionId, setDescriptionId] = (0, react_2.useState)();
const isOpen = controlledOpen !== null && controlledOpen !== void 0 ? controlledOpen : isOpenUncontrolled;
const setIsOpen = setControlledOpen !== null && setControlledOpen !== void 0 ? setControlledOpen : setIsOpenUncontrolled;
const data = (0, react_1.useFloating)({
elements: {
reference: anchorElement,
},
middleware: [
(0, react_1.offset)(10),
(0, react_1.flip)({
crossAxis: placement.includes('-'),
fallbackAxisSideDirection: 'end',
padding: 5,
}),
(0, react_1.shift)({ padding: 5 }),
],
onOpenChange: (open, event) => {
setIsOpen(open);
setControlledOpen === null || setControlledOpen === void 0 ? void 0 : setControlledOpen(open, event);
},
open: isOpen,
placement: placement,
strategy,
whileElementsMounted: react_1.autoUpdate,
});
const context = data.context;
const click = (0, react_1.useClick)(context, {
enabled: controlledOpen === undefined,
});
const dismiss = (0, react_1.useDismiss)(context, {
outsidePress: closeOnClickOutside,
});
const role = (0, react_1.useRole)(context, {
role: 'dialog',
});
const interactions = (0, react_1.useInteractions)([click, dismiss, role]);
const { styles: transitionStyles } = (0, react_1.useTransitionStyles)(context, {
duration: (_a = Number.parseInt(base_1.tokens.transitions.values.duration.quick, 10)) !== null && _a !== void 0 ? _a : 0,
});
return (0, react_2.useMemo)(() => (Object.assign(Object.assign(Object.assign({ isOpen,
setIsOpen }, interactions), data), { transitionStyles,
labelId,
descriptionId,
setLabelId,
setDescriptionId,
anchorElementAsPortalAnchor,
initialFocus })), [
isOpen,
setIsOpen,
interactions,
data,
transitionStyles,
labelId,
descriptionId,
anchorElementAsPortalAnchor,
initialFocus,
]);
}
//# sourceMappingURL=use-spotlight.js.map