@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
297 lines • 17.8 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Menu = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
/**
*
* 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 classnames_1 = __importDefault(require("classnames"));
const react_2 = __importStar(require("react"));
const conditional_wrap_1 = require("../conditional-wrap");
const dialog_1 = require("../dialog");
const divider_1 = require("../divider");
const icon_button_1 = require("../icon-button");
const icons_1 = require("../icons");
const popover_1 = require("../popover");
const theme_1 = require("../theme");
const MenuContext = (0, react_2.createContext)({
activeIndex: null,
getItemProps: () => ({}),
isOpen: false,
// eslint-disable-next-line @typescript-eslint/no-empty-function
setActiveIndex: () => { },
// eslint-disable-next-line @typescript-eslint/no-empty-function
setHasFocusInside: () => { },
});
const MenuComponent = (0, react_2.forwardRef)(function MenuComponent({ children, isOpen: controlledOpen, onClose, isRoot, anchorRef, as, className, placement, minWidth, title, isDisabled, description, icon, isPortaled = true, portalTarget, htmlAttributes, strategy, }, forwardedRef) {
const [isOpen, setIsOpen] = (0, react_2.useState)(false);
const [hasFocusInside, setHasFocusInside] = (0, react_2.useState)(false);
const [activeIndex, setActiveIndex] = (0, react_2.useState)(null);
const elementsRef = (0, react_2.useRef)([]);
const labelsRef = (0, react_2.useRef)([]);
const parent = (0, react_2.useContext)(MenuContext);
const isInsideDialog = (0, dialog_1.useIsInsideDialog)();
const tree = (0, react_1.useFloatingTree)();
const nodeId = (0, react_1.useFloatingNodeId)();
const parentId = (0, react_1.useFloatingParentNodeId)();
const item = (0, react_1.useListItem)();
const { themeClassName } = (0, theme_1.useNeedleTheme)();
(0, react_2.useEffect)(() => {
if (controlledOpen === undefined) {
return;
}
setIsOpen(controlledOpen);
}, [controlledOpen]);
(0, react_2.useEffect)(() => {
if (isOpen) {
setActiveIndex(0);
}
}, [isOpen]);
const Component = as !== null && as !== void 0 ? as : 'div';
const isNested = parentId !== null;
const defaultPlacement = isNested ? 'right-start' : 'bottom-start';
const { floatingStyles, refs, context } = (0, react_1.useFloating)({
elements: {
reference: anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current,
},
middleware: [
(0, react_1.offset)({
alignmentAxis: isNested ? -4 : 0,
mainAxis: isNested ? 0 : 4,
}),
(0, react_1.flip)({
fallbackPlacements: ['left-start', 'right-start'],
}),
(0, react_1.shift)(),
],
nodeId,
onOpenChange: (open, event) => {
if (controlledOpen === undefined) {
setIsOpen(open);
}
if (!open) {
if (event instanceof PointerEvent) {
onClose === null || onClose === void 0 ? void 0 : onClose(event, { type: 'backdropClick' });
}
else if (event instanceof KeyboardEvent) {
onClose === null || onClose === void 0 ? void 0 : onClose(event, { type: 'escapeKeyDown' });
}
}
},
open: isOpen,
placement: placement ? popover_1.placementTranslation[placement] : defaultPlacement,
strategy: strategy !== null && strategy !== void 0 ? strategy : (isInsideDialog ? 'fixed' : 'absolute'),
whileElementsMounted: react_1.autoUpdate,
});
const hover = (0, react_1.useHover)(context, {
delay: { open: 75 },
enabled: isNested,
handleClose: (0, react_1.safePolygon)({ blockPointerEvents: true }),
});
const click = (0, react_1.useClick)(context, {
event: 'mousedown',
ignoreMouse: isNested,
toggle: !isNested,
});
const role = (0, react_1.useRole)(context, { role: 'menu' });
const dismiss = (0, react_1.useDismiss)(context, { bubbles: true });
const listNavigation = (0, react_1.useListNavigation)(context, {
activeIndex,
listRef: elementsRef,
nested: isNested,
onNavigate: setActiveIndex,
});
const typeahead = (0, react_1.useTypeahead)(context, {
activeIndex,
listRef: labelsRef,
onMatch: isOpen ? setActiveIndex : undefined,
});
const { getReferenceProps, getFloatingProps, getItemProps } = (0, react_1.useInteractions)([hover, click, role, dismiss, listNavigation, typeahead]);
// Event emitter allows you to communicate across tree components.
// This effect closes all menus when an item gets clicked anywhere
// in the tree.
(0, react_2.useEffect)(() => {
if (!tree)
return;
function handleTreeClick(data) {
if (controlledOpen === undefined) {
setIsOpen(false);
}
onClose === null || onClose === void 0 ? void 0 : onClose(undefined, { id: data === null || data === void 0 ? void 0 : data.id, type: 'itemClick' });
}
function onSubMenuOpen(event) {
if (event.nodeId !== nodeId && event.parentId === parentId) {
if (controlledOpen === undefined) {
setIsOpen(false);
}
onClose === null || onClose === void 0 ? void 0 : onClose(undefined, { type: 'itemClick' });
}
}
tree.events.on('click', handleTreeClick);
tree.events.on('menuopen', onSubMenuOpen);
return () => {
tree.events.off('click', handleTreeClick);
tree.events.off('menuopen', onSubMenuOpen);
};
}, [tree, nodeId, parentId, onClose, controlledOpen]);
(0, react_2.useEffect)(() => {
if (isOpen && tree) {
tree.events.emit('menuopen', { nodeId, parentId });
}
}, [tree, isOpen, nodeId, parentId]);
const menuClasses = (0, classnames_1.default)('ndl-menu', themeClassName, className);
const ref = (0, react_1.useMergeRefs)([refs.setReference, item.ref, forwardedRef]);
return ((0, jsx_runtime_1.jsxs)(react_1.FloatingNode, { id: nodeId, children: [isRoot !== true && ((0, jsx_runtime_1.jsx)(NestedMenuItem, { ref: ref, className: isNested ? 'MenuItem' : 'RootMenu', isDisabled: isDisabled, htmlAttributes: Object.assign(Object.assign({ 'data-focus-inside': hasFocusInside ? '' : undefined, 'data-nested': isNested ? '' : undefined, 'data-open': isOpen ? '' : undefined, role: isNested ? 'menuitem' : undefined, tabIndex: !isNested
? undefined
: parent.activeIndex === item.index
? 0
: -1 }, htmlAttributes), getReferenceProps(parent.getItemProps({
onFocus(event) {
var _a;
(_a = htmlAttributes === null || htmlAttributes === void 0 ? void 0 : htmlAttributes.onFocus) === null || _a === void 0 ? void 0 : _a.call(htmlAttributes, event);
setHasFocusInside(false);
parent.setHasFocusInside(true);
},
}))), title: title, description: description, icon: icon })), (0, jsx_runtime_1.jsx)(MenuContext.Provider, { value: {
activeIndex,
getItemProps,
isOpen: isDisabled === true ? false : isOpen,
setActiveIndex,
setHasFocusInside,
}, children: (0, jsx_runtime_1.jsx)(react_1.FloatingList, { elementsRef: elementsRef, labelsRef: labelsRef, children: isOpen && ((0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: isPortaled, wrap: (wrapChildren) => ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, { root: portalTarget, children: wrapChildren })), children: (0, jsx_runtime_1.jsx)(react_1.FloatingFocusManager, { context: context, modal: false, initialFocus: isNested ? -1 : 0, returnFocus: !isNested, closeOnFocusOut: true, guards: true, children: (0, jsx_runtime_1.jsx)(Component, Object.assign({ ref: refs.setFloating, className: menuClasses, style: Object.assign({ minWidth: minWidth !== undefined ? `${minWidth}px` : undefined }, floatingStyles) }, getFloatingProps(), { children: children })) }) })) }) })] }));
});
const MenuItem = (0, react_2.forwardRef)(function MenuItem({ title, className, style, icon, description, isDisabled, as, onClick, onFocus, htmlAttributes, id, }, forwardedRef) {
const menu = (0, react_2.useContext)(MenuContext);
const itemLabel = typeof title === 'string' ? title : undefined;
const item = (0, react_1.useListItem)({ label: isDisabled === true ? null : itemLabel });
const tree = (0, react_1.useFloatingTree)();
const isActive = item.index === menu.activeIndex;
const classes = (0, classnames_1.default)(`ndl-menu-item`, className, {
'ndl-disabled': isDisabled,
});
const ref = (0, react_1.useMergeRefs)([item.ref, forwardedRef]);
const Component = as !== null && as !== void 0 ? as : 'button';
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Component, Object.assign({ className: classes, ref: ref, type: "button", role: "menuitem", tabIndex: isActive ? 0 : -1, disabled: isDisabled }, htmlAttributes, menu.getItemProps({
onClick(event) {
onClick === null || onClick === void 0 ? void 0 : onClick(event);
tree === null || tree === void 0 ? void 0 : tree.events.emit('click', { id });
},
onFocus(event) {
onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
menu.setHasFocusInside(true);
},
style: style,
}), { children: (0, jsx_runtime_1.jsxs)("div", { className: "ndl-menu-item-inner", children: [Boolean(icon) && (0, jsx_runtime_1.jsx)("div", { className: "ndl-menu-item-icon", children: icon }), (0, jsx_runtime_1.jsxs)("div", { className: "ndl-menu-item-title-wrapper", children: [(0, jsx_runtime_1.jsx)("div", { className: "ndl-menu-item-title", children: title }), Boolean(description) && ((0, jsx_runtime_1.jsx)("div", { className: "ndl-menu-item-description", children: description }))] })] }) })) }));
});
const NestedMenuItem = (0, react_2.forwardRef)(function MenuItem({ title, isDisabled, className, description, icon, as, onFocus, onClick, htmlAttributes, }, forwardedRef) {
const menu = (0, react_2.useContext)(MenuContext);
const itemLabel = typeof title === 'string' ? title : undefined;
const item = (0, react_1.useListItem)({ label: isDisabled === true ? null : itemLabel });
const isActive = item.index === menu.activeIndex;
const Component = as !== null && as !== void 0 ? as : 'button';
const ref = (0, react_1.useMergeRefs)([item.ref, forwardedRef]);
const classes = (0, classnames_1.default)(`ndl-menu-item`, className, {
'ndl-disabled': isDisabled,
});
return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ className: classes, ref: ref, type: "button", role: "menuitem", tabIndex: isActive ? 0 : -1, disabled: isDisabled }, htmlAttributes, menu.getItemProps({
onClick(event) {
onClick === null || onClick === void 0 ? void 0 : onClick(event);
},
onFocus(event) {
onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
menu.setHasFocusInside(true);
},
onTouchStart() {
menu.setHasFocusInside(true);
},
}), { children: (0, jsx_runtime_1.jsxs)("div", { className: "ndl-menu-item-inner", children: [Boolean(icon) && (0, jsx_runtime_1.jsx)("div", { className: "ndl-menu-item-icon", children: icon }), (0, jsx_runtime_1.jsxs)("div", { className: "ndl-menu-item-title-wrapper", children: [(0, jsx_runtime_1.jsx)("div", { className: "ndl-menu-item-title", children: title }), Boolean(description) && ((0, jsx_runtime_1.jsx)("div", { className: "ndl-menu-item-description", children: description }))] }), (0, jsx_runtime_1.jsx)("span", { className: "ndl-menu-item-chevron", children: (0, jsx_runtime_1.jsx)(icons_1.ChevronRightIconOutline, {}) })] }) })));
});
const MenuWrapper = (0, react_2.forwardRef)(function Menu(props, ref) {
const parentId = (0, react_1.useFloatingParentNodeId)();
if (parentId === null) {
return ((0, jsx_runtime_1.jsx)(react_1.FloatingTree, { children: (0, jsx_runtime_1.jsx)(MenuComponent, Object.assign({ ref: ref }, props, { isRoot: true })) }));
}
return (0, jsx_runtime_1.jsx)(MenuComponent, Object.assign({ ref: ref }, props));
});
const MenuItems = react_2.default.forwardRef(function MenuItems({ as, children, className, htmlAttributes, style, }, ref) {
const classes = (0, classnames_1.default)('ndl-menu-items', className);
const Component = as !== null && as !== void 0 ? as : 'div';
return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ className: classes, style: style, ref: ref }, htmlAttributes, { children: children })));
});
const MenuDivider = (0, react_2.forwardRef)(function MenuDivider(props, ref) {
return (0, jsx_runtime_1.jsx)(divider_1.Divider, Object.assign({ ref: ref }, props));
});
const MenuSubheader = (props) => ((0, jsx_runtime_1.jsx)("div", { className: "ndl-menu-subheader", children: (0, jsx_runtime_1.jsx)("div", { className: "ndl-menu-subheader-title", children: props.title }) }));
const MenuHeader = (0, react_2.forwardRef)(function MenuHeader({ as, title, description, className, htmlAttributes, }, forwardedRef) {
const Component = as !== null && as !== void 0 ? as : 'div';
const menu = (0, react_2.useContext)(MenuContext);
const item = (0, react_1.useListItem)({ label: null });
const tree = (0, react_1.useFloatingTree)();
const ref = (0, react_1.useMergeRefs)([item.ref, forwardedRef]);
const classes = (0, classnames_1.default)('ndl-menu-header', className);
return ((0, jsx_runtime_1.jsxs)(Component, { className: classes, children: [(0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: "ndl-menu-header-title", children: title }), Boolean(description) && ((0, jsx_runtime_1.jsx)("div", { className: "ndl-menu-header-description", children: description }))] }), (0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { className: "ndl-menu-header-close-button", ariaLabel: "Close", isClean: true, htmlAttributes: Object.assign(Object.assign(Object.assign({}, htmlAttributes), { tabIndex: 0 }), menu.getItemProps({
onClick(event) {
var _a;
(_a = htmlAttributes === null || htmlAttributes === void 0 ? void 0 : htmlAttributes.onClick) === null || _a === void 0 ? void 0 : _a.call(htmlAttributes, event);
tree === null || tree === void 0 ? void 0 : tree.events.emit('click');
},
onFocus(event) {
var _a;
(_a = htmlAttributes === null || htmlAttributes === void 0 ? void 0 : htmlAttributes.onFocus) === null || _a === void 0 ? void 0 : _a.call(htmlAttributes, event);
menu.setHasFocusInside(true);
},
})), ref: ref, children: (0, jsx_runtime_1.jsx)(icons_1.XMarkIconOutline, {}) })] }));
});
const Menu = Object.assign(MenuWrapper, {
Divider: MenuDivider,
Header: MenuHeader,
Item: MenuItem,
Items: MenuItems,
Subheader: MenuSubheader,
});
exports.Menu = Menu;
//# sourceMappingURL=ContextMenu.js.map