@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
100 lines • 4.32 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useTooltipContext = exports.TooltipContext = void 0;
exports.useTooltip = useTooltip;
/**
*
* 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 react_2 = require("react");
function useTooltip({ isInitialOpen = false, placement = 'top', isOpen: controlledOpen, onOpenChange: setControlledOpen, type = 'simple', isPortaled = true, strategy = 'absolute', hoverDelay = undefined, shouldCloseOnReferenceClick = false, autoUpdateOptions, isDisabled = false, followCursor = false, } = {}) {
const id = (0, react_2.useId)();
const [headerId, setHeaderId] = (0, react_2.useState)(id);
const [isUncontrolledOpen, setIsUncontrolledOpen] = (0, react_2.useState)(isInitialOpen);
const isOpen = controlledOpen !== null && controlledOpen !== void 0 ? controlledOpen : isUncontrolledOpen;
const setOpen = setControlledOpen !== null && setControlledOpen !== void 0 ? setControlledOpen : setIsUncontrolledOpen;
const data = (0, react_1.useFloating)({
middleware: [
(0, react_1.offset)(5),
(0, react_1.flip)({
crossAxis: placement.includes('-'),
fallbackAxisSideDirection: 'start',
padding: 5,
}),
(0, react_1.shift)({ padding: 5 }),
],
onOpenChange: setOpen,
open: isOpen,
placement,
strategy,
whileElementsMounted(referenceEl, floatingEl, update) {
const cleanup = (0, react_1.autoUpdate)(referenceEl, floatingEl, update, Object.assign({}, autoUpdateOptions));
return cleanup;
},
});
const context = data.context;
const hover = (0, react_1.useHover)(context, {
delay: hoverDelay,
enabled: type === 'simple' && !isDisabled,
handleClose: (0, react_1.safePolygon)(),
move: false,
});
const click = (0, react_1.useClick)(context, {
enabled: type === 'rich' && !isDisabled,
});
const focus = (0, react_1.useFocus)(context, {
enabled: type === 'simple' && !isDisabled,
visibleOnly: true,
});
const dismiss = (0, react_1.useDismiss)(context, {
escapeKey: true,
outsidePress: true,
referencePress: shouldCloseOnReferenceClick,
});
const role = (0, react_1.useRole)(context, {
role: type === 'simple' ? 'tooltip' : 'dialog',
});
const followAxis = placement.startsWith('left') || placement.startsWith('right') ? 'y' : 'x';
const clientPoint = (0, react_1.useClientPoint)(context, {
axis: followAxis,
enabled: followCursor && type === 'simple' && !isDisabled,
});
const interactions = (0, react_1.useInteractions)([
hover,
focus,
dismiss,
role,
click,
clientPoint,
]);
return (0, react_2.useMemo)(() => (Object.assign(Object.assign({ headerId: type === 'rich' ? headerId : undefined, isOpen,
isPortaled, setHeaderId: type === 'rich' ? setHeaderId : undefined, setOpen,
type }, interactions), data)), [headerId, isOpen, isPortaled, setOpen, type, interactions, data]);
}
exports.TooltipContext = (0, react_2.createContext)(null);
const useTooltipContext = () => {
const context = (0, react_2.useContext)(exports.TooltipContext);
if (context === null) {
throw new Error('Tooltip components must be wrapped in <Tooltip />');
}
return context;
};
exports.useTooltipContext = useTooltipContext;
//# sourceMappingURL=use-tooltip.js.map