@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
210 lines • 12.9 kB
JavaScript
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;
};
import { jsx as _jsx, jsxs as _jsxs } from "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/>.
*/
import { autoUpdate, flip, FloatingFocusManager, FloatingPortal, offset, safePolygon, shift, useDismiss, useFloating, useHover, useInteractions, useMergeRefs, useTransitionStyles, } from '@floating-ui/react';
import { tokens } from '@neo4j-ndl/base';
import classNames from 'classnames';
import { createContext, forwardRef, useContext, useRef, useState } from 'react';
import { IconIndicatorWrapper, } from '../../_common/IconIndicatorWrapper';
import { ConditionalWrap } from '../../conditional-wrap';
import { Divider } from '../../divider';
import { IconButton } from '../../icon-button';
import { ChevronRightIconOutline, PinIcon } from '../../icons';
import { Tooltip } from '../../tooltip';
import { Typography } from '../../typography';
const SideNavContext = createContext(null);
const useSideNavContext = () => {
const context = useContext(SideNavContext);
if (!context) {
throw new Error('SideNavigation subcomponents must be wrapped in <SideNavigation /> component');
}
return context;
};
const SideNavComponent = forwardRef(function SideNavComponent({ children, className, style, htmlAttributes, isExpanded = false, shouldExpandOnHover = true, pinButtonCallback, expandedWidth = '196px', }, ref) {
const [isHovered, setIsHovered] = useState(false);
const { refs, context } = useFloating({
middleware: [offset(0)],
onOpenChange: setIsHovered,
open: shouldExpandOnHover && isHovered,
});
const hover = useHover(context, {
delay: { close: 250, open: 100 },
});
const { getReferenceProps, getFloatingProps } = useInteractions([hover]);
const classes = classNames('ndl-side-nav ndl-side-nav-root', {
'ndl-side-nav-collapsed': !isExpanded && !shouldExpandOnHover,
'ndl-side-nav-expanded': isExpanded,
});
const innerClasses = classNames('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 = useMergeRefs([ref, refs.setFloating]);
return (_jsx(SideNavContext.Provider, { value: {
isExpanded,
isHovered,
pinButtonCallback,
shouldExpandOnHover,
}, children: _jsx("div", Object.assign({ ref: refs.setReference, className: classes }, getReferenceProps(), { style: customStyle, children: _jsxs("div", Object.assign({ ref: mergedRef, className: innerClasses }, getFloatingProps(), htmlAttributes, { children: [_jsx("nav", { className: "ndl-side-nav-nav", children: children }), shouldExpandOnHover && (_jsx("div", { className: "ndl-side-nav-footer", children: _jsx(PinButton, {}) }))] })) })) }));
});
const SideNavList = forwardRef(function SideNavList({ children, className, style }, ref) {
useSideNavContext();
const classes = classNames('ndl-side-nav-list', className);
return (_jsx("ul", { className: classes, ref: ref, style: style, children: children }));
});
const NavItem = 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 = classNames('ndl-side-nav-item', className, {
'ndl-active': isSelected === true,
});
const Component = as !== null && as !== void 0 ? as : 'button';
return (_jsx("li", { className: outerClasses, children: _jsxs("div", { className: "ndl-side-nav-item-inner", children: [_jsx(SelectedIndicator, { isActive: isSelected === true }), _jsx(ConditionalWrap, { shouldWrap: isExpanded === false &&
(isHovered === false || !shouldExpandOnHover) &&
!isInCategory &&
Boolean(label), wrap: (children) => (_jsxs(Tooltip, { type: "simple", placement: "right", hoverDelay: { close: 0, open: shouldExpandOnHover ? 100 : 0 }, children: [_jsx(Tooltip.Trigger, { hasButtonWrapper: true, children: children }), _jsx(Tooltip.Content, { children: label })] })), children: _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) && (_jsx("div", { className: "ndl-side-nav-item-left-element", children: _jsx(ConditionalWrap, { shouldWrap: Boolean(badge) && !isHovered && !isExpanded, wrap: (children) => {
var _a;
return (_jsx(IconIndicatorWrapper, { type: (_a = badge === null || badge === void 0 ? void 0 : badge.type) !== null && _a !== void 0 ? _a : 'info', children: children }));
}, children: icon }) })), Boolean(label) && (_jsx(Typography, { variant: "body-medium", as: "div", className: "ndl-side-nav-item-label", children: label })), (Boolean(rightElement) || Boolean(badge)) && (_jsxs("div", { className: "ndl-side-nav-item-right-element", children: [rightElement, badge !== undefined && (_jsx(ItemBadge, { type: badge.type, number: badge.number }))] }))] })) })] }) }));
});
/**
* SelectedIndicator
*/
const SelectedIndicator = ({ isActive }) => {
return (_jsx("div", { className: classNames('ndl-side-nav-selected-indicator', {
'ndl-active': isActive,
}) }));
};
const SideNavCategoryContext = createContext(false);
const useSideNavCategoryContext = () => {
return useContext(SideNavCategoryContext);
};
const CategoryItem = forwardRef(function CategoryItem({ children, icon, label, isSelected, className, style, htmlAttributes, badge, isMenuOpen = false, }, ref) {
var _a;
const { isExpanded, isHovered } = useSideNavContext();
const anchorRef = useRef(null);
const [isOpen, setIsOpen] = useState(false);
const outerClasses = classNames('ndl-side-nav-category-item', className);
// Floating UI setup
const { refs, context } = useFloating({
elements: {
reference: anchorRef.current,
},
middleware: [
offset(5),
flip({ crossAxis: true, fallbackAxisSideDirection: 'end', padding: 5 }),
shift({ padding: 5 }),
],
onOpenChange: setIsOpen,
open: isOpen || isMenuOpen,
placement: 'right-start',
strategy: 'fixed',
whileElementsMounted: autoUpdate,
});
const dismiss = useDismiss(context);
const hover = useHover(context, {
delay: { close: 130, open: 130 },
handleClose: safePolygon({
blockPointerEvents: true,
requireIntent: false,
}),
});
const interactions = useInteractions([dismiss, hover]);
const { styles: transitionStyles } = useTransitionStyles(context, {
duration: (_a = Number.parseInt(tokens.transitions.values.duration.quick, 10)) !== null && _a !== void 0 ? _a : 0,
});
const mergedRef = useMergeRefs([refs.setReference, ref]);
return (_jsx(SideNavCategoryContext.Provider, { value: true, children: _jsx("li", { className: outerClasses, ref: anchorRef, children: _jsxs("div", { className: "ndl-side-nav-item-inner", children: [_jsx(SelectedIndicator, { isActive: isSelected === true }), _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) && (_jsx("div", { className: "ndl-side-nav-item-left-element", children: _jsx(ConditionalWrap, { shouldWrap: Boolean(badge) && !isHovered && !isExpanded, wrap: (children) => {
var _a;
return (_jsx(IconIndicatorWrapper, { type: (_a = badge === null || badge === void 0 ? void 0 : badge.type) !== null && _a !== void 0 ? _a : 'info', children: children }));
}, children: icon }) })), Boolean(label) && (_jsx(Typography, { variant: "body-medium", as: "div", className: "ndl-side-nav-item-label", children: label })), _jsxs("div", { className: "ndl-side-nav-item-right-element", children: [badge && _jsx(ItemBadge, { type: badge.type, number: badge.number }), _jsx(ChevronRightIconOutline, { className: "n-size-4 n-text-palette-neutral-icon" })] })] })), context.open && (_jsx(FloatingPortal, { root: context.refs.reference.current, children: _jsx(FloatingFocusManager, { context: context, modal: true, initialFocus: undefined, children: _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: _jsx("ul", { className: "ndl-side-nav-popover-list", children: children }) })) }) }))] }) }) }));
});
const CategoryHeader = ({ children, className }) => {
const { isExpanded, isHovered } = useSideNavContext();
const classes = classNames('ndl-side-nav-category-header', className, {
'ndl-side-nav-category-header-expanded': isExpanded || isHovered,
});
return (_jsx(Typography, { variant: "h6", as: "div", className: classes, children: isExpanded || isHovered ? children : _jsx(Divider, {}) }));
};
/**
* SideNavDivider
*/
const SideNavDivider = () => {
return _jsx(Divider, { orientation: "horizontal", className: "ndl-side-nav-divider" });
};
const ItemBadge = ({ number, type }) => {
useSideNavContext();
const badgeClasses = classNames('ndl-side-nav-item-badge', {
'ndl-danger': type === 'danger',
'ndl-info': type === 'info',
'ndl-warning': type === 'warning',
});
return (_jsx(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 = classNames('ndl-side-nav-pin-button');
if (!shouldExpandOnHover) {
return null;
}
return (_jsx(IconButton, { onClick: pinButtonCallback, className: classes, ariaLabel: "Pin side navigation", size: "medium", isClean: true, isActive: isExpanded, children: _jsx(PinIcon, {}) }));
};
const SideNavigation = Object.assign(SideNavComponent, {
CategoryHeader,
CategoryItem,
Divider: SideNavDivider,
ItemBadge,
List: SideNavList,
NavItem,
});
export { SideNavigation };
//# sourceMappingURL=SideNavigation.js.map