@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
216 lines • 14.5 kB
JavaScript
"use strict";
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SideNavigation = 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 base_1 = require("@neo4j-ndl/base");
const classnames_1 = __importDefault(require("classnames"));
const react_2 = require("react");
const IconIndicatorWrapper_1 = require("../../_common/IconIndicatorWrapper");
const conditional_wrap_1 = require("../../conditional-wrap");
const divider_1 = require("../../divider");
const icon_button_1 = require("../../icon-button");
const icons_1 = require("../../icons");
const tooltip_1 = require("../../tooltip");
const typography_1 = require("../../typography");
const SideNavContext = (0, react_2.createContext)(null);
const useSideNavContext = () => {
const context = (0, react_2.useContext)(SideNavContext);
if (!context) {
throw new Error('SideNavigation subcomponents must be wrapped in <SideNavigation /> component');
}
return context;
};
const SideNavComponent = (0, react_2.forwardRef)(function SideNavComponent({ children, className, style, htmlAttributes, isExpanded = false, shouldExpandOnHover = true, pinButtonCallback, expandedWidth = '196px', }, ref) {
const [isHovered, setIsHovered] = (0, react_2.useState)(false);
const { refs, context } = (0, react_1.useFloating)({
middleware: [(0, react_1.offset)(0)],
onOpenChange: setIsHovered,
open: shouldExpandOnHover && isHovered,
});
const hover = (0, react_1.useHover)(context, {
delay: { close: 250, open: 100 },
});
const { getReferenceProps, getFloatingProps } = (0, react_1.useInteractions)([hover]);
const classes = (0, classnames_1.default)('ndl-side-nav ndl-side-nav-root', {
'ndl-side-nav-collapsed': !isExpanded && !shouldExpandOnHover,
'ndl-side-nav-expanded': isExpanded,
});
const innerClasses = (0, classnames_1.default)('ndl-side-nav-inner', className, {
'ndl-side-nav-hover': shouldExpandOnHover && isHovered && !isExpanded,
});
const customStyle = Object.assign(Object.assign({}, style), (Boolean(expandedWidth) && {
'--side-nav-width-expanded': typeof expandedWidth === 'string'
? expandedWidth
: `${expandedWidth}px`,
}));
const mergedRef = (0, react_1.useMergeRefs)([ref, refs.setFloating]);
return ((0, jsx_runtime_1.jsx)(SideNavContext.Provider, { value: {
isExpanded,
isHovered,
pinButtonCallback,
shouldExpandOnHover,
}, children: (0, jsx_runtime_1.jsx)("div", Object.assign({ ref: refs.setReference, className: classes }, getReferenceProps(), { style: customStyle, children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: mergedRef, className: innerClasses }, getFloatingProps(), htmlAttributes, { children: [(0, jsx_runtime_1.jsx)("nav", { className: "ndl-side-nav-nav", children: children }), shouldExpandOnHover && ((0, jsx_runtime_1.jsx)("div", { className: "ndl-side-nav-footer", children: (0, jsx_runtime_1.jsx)(PinButton, {}) }))] })) })) }));
});
const SideNavList = (0, react_2.forwardRef)(function SideNavList({ children, className, style }, ref) {
useSideNavContext();
const classes = (0, classnames_1.default)('ndl-side-nav-list', className);
return ((0, jsx_runtime_1.jsx)("ul", { className: classes, ref: ref, style: style, children: children }));
});
const NavItem = (0, react_2.forwardRef)(function NavItem(_a, ref) {
var { icon, label, rightElement, isSelected, className, style, htmlAttributes, as, badge } = _a, restProps = __rest(_a, ["icon", "label", "rightElement", "isSelected", "className", "style", "htmlAttributes", "as", "badge"]);
const { isExpanded, isHovered, shouldExpandOnHover } = useSideNavContext();
const isInCategory = useSideNavCategoryContext();
const outerClasses = (0, classnames_1.default)('ndl-side-nav-item', className, {
'ndl-active': isSelected === true,
});
const Component = as !== null && as !== void 0 ? as : 'button';
return ((0, jsx_runtime_1.jsx)("li", { className: outerClasses, children: (0, jsx_runtime_1.jsxs)("div", { className: "ndl-side-nav-item-inner", children: [(0, jsx_runtime_1.jsx)(SelectedIndicator, { isActive: isSelected === true }), (0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: isExpanded === false &&
(isHovered === false || !shouldExpandOnHover) &&
!isInCategory &&
Boolean(label), wrap: (children) => ((0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, { type: "simple", placement: "right", hoverDelay: { close: 0, open: shouldExpandOnHover ? 100 : 0 }, children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Trigger, { hasButtonWrapper: true, children: children }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Content, { children: label })] })), children: (0, jsx_runtime_1.jsxs)(Component, Object.assign({ ref: ref, className: "ndl-side-nav-item-button", style: style }, htmlAttributes, restProps, { onKeyDown: (e) => {
if (isInCategory && (e.key === 'Enter' || e.key === ' ')) {
e.stopPropagation();
}
}, children: [Boolean(icon) && ((0, jsx_runtime_1.jsx)("div", { className: "ndl-side-nav-item-left-element", children: (0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: Boolean(badge) && !isHovered && !isExpanded, wrap: (children) => {
var _a;
return ((0, jsx_runtime_1.jsx)(IconIndicatorWrapper_1.IconIndicatorWrapper, { type: (_a = badge === null || badge === void 0 ? void 0 : badge.type) !== null && _a !== void 0 ? _a : 'info', children: children }));
}, children: icon }) })), Boolean(label) && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: "body-medium", as: "div", className: "ndl-side-nav-item-label", children: label })), (Boolean(rightElement) || Boolean(badge)) && ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-side-nav-item-right-element", children: [rightElement, badge !== undefined && ((0, jsx_runtime_1.jsx)(ItemBadge, { type: badge.type, number: badge.number }))] }))] })) })] }) }));
});
/**
* SelectedIndicator
*/
const SelectedIndicator = ({ isActive }) => {
return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ndl-side-nav-selected-indicator', {
'ndl-active': isActive,
}) }));
};
const SideNavCategoryContext = (0, react_2.createContext)(false);
const useSideNavCategoryContext = () => {
return (0, react_2.useContext)(SideNavCategoryContext);
};
const CategoryItem = (0, react_2.forwardRef)(function CategoryItem({ children, icon, label, isSelected, className, style, htmlAttributes, badge, isMenuOpen = false, }, ref) {
var _a;
const { isExpanded, isHovered } = useSideNavContext();
const anchorRef = (0, react_2.useRef)(null);
const [isOpen, setIsOpen] = (0, react_2.useState)(false);
const outerClasses = (0, classnames_1.default)('ndl-side-nav-category-item', className);
// Floating UI setup
const { refs, context } = (0, react_1.useFloating)({
elements: {
reference: anchorRef.current,
},
middleware: [
(0, react_1.offset)(5),
(0, react_1.flip)({ crossAxis: true, fallbackAxisSideDirection: 'end', padding: 5 }),
(0, react_1.shift)({ padding: 5 }),
],
onOpenChange: setIsOpen,
open: isOpen || isMenuOpen,
placement: 'right-start',
strategy: 'fixed',
whileElementsMounted: react_1.autoUpdate,
});
const dismiss = (0, react_1.useDismiss)(context);
const hover = (0, react_1.useHover)(context, {
delay: { close: 130, open: 130 },
handleClose: (0, react_1.safePolygon)({
blockPointerEvents: true,
requireIntent: false,
}),
});
const interactions = (0, react_1.useInteractions)([dismiss, hover]);
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,
});
const mergedRef = (0, react_1.useMergeRefs)([refs.setReference, ref]);
return ((0, jsx_runtime_1.jsx)(SideNavCategoryContext.Provider, { value: true, children: (0, jsx_runtime_1.jsx)("li", { className: outerClasses, ref: anchorRef, children: (0, jsx_runtime_1.jsxs)("div", { className: "ndl-side-nav-item-inner", children: [(0, jsx_runtime_1.jsx)(SelectedIndicator, { isActive: isSelected === true }), (0, jsx_runtime_1.jsxs)("button", Object.assign({ ref: mergedRef }, interactions.getReferenceProps(Object.assign(Object.assign({ className: 'ndl-side-nav-category-item-button', style }, htmlAttributes), { onKeyDown: (e) => {
var _a;
if (e.key === 'Enter' || e.key === ' ') {
setIsOpen(!isOpen);
}
(_a = htmlAttributes === null || htmlAttributes === void 0 ? void 0 : htmlAttributes.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(htmlAttributes, e);
} })), { children: [Boolean(icon) && ((0, jsx_runtime_1.jsx)("div", { className: "ndl-side-nav-item-left-element", children: (0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: Boolean(badge) && !isHovered && !isExpanded, wrap: (children) => {
var _a;
return ((0, jsx_runtime_1.jsx)(IconIndicatorWrapper_1.IconIndicatorWrapper, { type: (_a = badge === null || badge === void 0 ? void 0 : badge.type) !== null && _a !== void 0 ? _a : 'info', children: children }));
}, children: icon }) })), Boolean(label) && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: "body-medium", as: "div", className: "ndl-side-nav-item-label", children: label })), (0, jsx_runtime_1.jsxs)("div", { className: "ndl-side-nav-item-right-element", children: [badge && (0, jsx_runtime_1.jsx)(ItemBadge, { type: badge.type, number: badge.number }), (0, jsx_runtime_1.jsx)(icons_1.ChevronRightIconOutline, { className: "n-size-4 n-text-palette-neutral-icon" })] })] })), context.open && ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, { root: context.refs.reference.current, children: (0, jsx_runtime_1.jsx)(react_1.FloatingFocusManager, { context: context, modal: true, initialFocus: undefined, children: (0, jsx_runtime_1.jsx)("nav", Object.assign({ ref: refs.setFloating, className: "ndl-side-nav ndl-side-nav-popover", style: Object.assign(Object.assign({}, context.floatingStyles), transitionStyles) }, interactions.getFloatingProps(), { children: (0, jsx_runtime_1.jsx)("ul", { className: "ndl-side-nav-popover-list", children: children }) })) }) }))] }) }) }));
});
const CategoryHeader = ({ children, className }) => {
const { isExpanded, isHovered } = useSideNavContext();
const classes = (0, classnames_1.default)('ndl-side-nav-category-header', className, {
'ndl-side-nav-category-header-expanded': isExpanded || isHovered,
});
return ((0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: "h6", as: "div", className: classes, children: isExpanded || isHovered ? children : (0, jsx_runtime_1.jsx)(divider_1.Divider, {}) }));
};
/**
* SideNavDivider
*/
const SideNavDivider = () => {
return (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: "horizontal", className: "ndl-side-nav-divider" });
};
const ItemBadge = ({ number, type }) => {
useSideNavContext();
const badgeClasses = (0, classnames_1.default)('ndl-side-nav-item-badge', {
'ndl-danger': type === 'danger',
'ndl-info': type === 'info',
'ndl-warning': type === 'warning',
});
return ((0, jsx_runtime_1.jsx)(typography_1.Typography, { as: "span", className: badgeClasses, variant: "subheading-small", htmlAttributes: {
'aria-label': `${number} notifications of type ${type}`,
}, children: number }));
};
/**
* PinButton
*/
const PinButton = () => {
const { isExpanded, shouldExpandOnHover, pinButtonCallback } = useSideNavContext();
const classes = (0, classnames_1.default)('ndl-side-nav-pin-button');
if (!shouldExpandOnHover) {
return null;
}
return ((0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { onClick: pinButtonCallback, className: classes, ariaLabel: "Pin side navigation", size: "medium", isClean: true, isActive: isExpanded, children: (0, jsx_runtime_1.jsx)(icons_1.PinIcon, {}) }));
};
const SideNavigation = Object.assign(SideNavComponent, {
CategoryHeader,
CategoryItem,
Divider: SideNavDivider,
ItemBadge,
List: SideNavList,
NavItem,
});
exports.SideNavigation = SideNavigation;
//# sourceMappingURL=SideNavigation.js.map