@harvest-profit/npk
Version:
NPK UI Design System
116 lines • 7.27 kB
JavaScript
;
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 () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__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 });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const ThemeContext_1 = __importDefault(require("../ThemeContext"));
const Menu_module_css_1 = __importDefault(require("./Menu.module.css"));
const MenuContext_1 = __importStar(require("./MenuContext"));
const react_2 = require("@floating-ui/react");
const usePopover_1 = __importDefault(require("./usePopover"));
function placementFromContextPlacement(placement) {
if (!placement)
return 'bottom-start';
return placement.includes('end') ? 'left-start' : 'right-start';
}
const Menu = ({ children, variant = null, arrow = null, autoDismiss = true, placement, initialFocus = 0, onOpen, onClose, ...restOptions }) => {
const menuContentsContext = (0, react_1.useContext)(MenuContext_1.MenuContentsContext);
const popover = (0, usePopover_1.default)({
showArrow: arrow || (variant === 'menu' ? true : false),
autoDismiss,
initialFocus,
submenu: menuContentsContext.inMenu,
placement: placement || placementFromContextPlacement(menuContentsContext.placement),
variant: menuContentsContext.variant,
...restOptions
});
(0, react_1.useEffect)(() => {
if (popover.refs?.reference?.current) {
if (onOpen && popover.open)
onOpen();
if (onClose && !popover.open)
onClose();
}
}, [popover.open]);
const menuContentsOptions = {};
if (autoDismiss === true || autoDismiss === 'menu') {
menuContentsOptions.onDismiss = () => {
popover.setOpen(false);
if (autoDismiss === true && menuContentsContext.onDismiss)
menuContentsContext.onDismiss();
};
}
return ((0, jsx_runtime_1.jsx)(MenuContext_1.MenuContentsContext.Provider, { value: { inMenu: false, ...menuContentsOptions, variant: variant || menuContentsContext.variant }, children: (0, jsx_runtime_1.jsx)(MenuContext_1.default.Provider, { value: popover, children: children }) }));
};
Menu.Overlay = (0, react_1.forwardRef)(({ children, style, ...props }, forwardedRef) => {
const theme = (0, react_1.useContext)(ThemeContext_1.default);
const menuContext = (0, MenuContext_1.useMenuContext)();
const menuContentsContext = (0, react_1.useContext)(MenuContext_1.MenuContentsContext);
const ref = menuContext.useMergeRefs([menuContext.refs.setFloating, forwardedRef]);
if (!menuContext.open)
return null;
return ((0, jsx_runtime_1.jsx)(react_2.FloatingPortal, { id: theme.appendRootId, children: (0, jsx_runtime_1.jsx)(react_2.FloatingFocusManager, { context: menuContext.context, modal: menuContext.context.modal, initialFocus: menuContext.initialFocus, children: (0, jsx_runtime_1.jsxs)("div", { ref: ref, style: { ...menuContext.floatingStyles, ...style }, className: Menu_module_css_1.default.Overlay, "data-component": menuContext.submenu ? 'submenu' : 'menu', "data-variant": menuContentsContext.variant, "aria-labelledby": menuContext.labelId, "aria-describedby": menuContext.descriptionId, ...menuContext.getFloatingProps(props), children: [menuContext.showArrow && (0, jsx_runtime_1.jsx)(react_2.FloatingArrow, { "data-component": "menu-arrow", fill: "currentColor", stroke: "var(--menu-border-color)", strokeWidth: 1, tipRadius: 1, ref: menuContext.arrowRef, context: menuContext.context }), (0, jsx_runtime_1.jsx)("div", { "data-component": "menu-contents", children: (0, jsx_runtime_1.jsx)(MenuContext_1.MenuContentsContext.Provider, { value: { ...menuContentsContext, variant: menuContentsContext.variant, placement: menuContext.placement, inMenu: true }, children: children }) })] }) }) }));
});
Menu.useAnchor = (props = {}) => {
const menuContext = (0, MenuContext_1.useMenuContext)();
return [menuContext.refs.setReference, { ...menuContext.getReferenceProps(props) }];
};
Menu.Anchor = ({ render }) => {
const [ref, props] = Menu.useAnchor();
if (render) {
return render([ref, props]);
}
return ((0, jsx_runtime_1.jsx)("span", { ref: ref }));
};
Menu.Overlay.displayName = "Menu.Overlay";
Menu.Divider = ({ className = '', ...props }) => ((0, jsx_runtime_1.jsx)("hr", { className: `${Menu_module_css_1.default.Divider} ${className}`, ...props }));
Menu.Divider.displayName = "Menu.Divider";
Menu.Section = ({ className = '', children, ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: `${Menu_module_css_1.default.Section} ${className}`, ...props, children: children }));
Menu.Section.displayName = "Menu.Section";
Menu.List = ({ className = '', ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: `${Menu_module_css_1.default.List} ${className}`, ...props }));
Menu.List.displayName = "Menu.List";
Menu.Item = ({ as: Tag = 'div', block, className = '', ...props }) => {
return ((0, jsx_runtime_1.jsx)(MenuContext_1.MenuContentsContext.Provider, { value: { inMenu: false }, children: (0, jsx_runtime_1.jsx)(MenuContext_1.default.Provider, { value: { menu: false }, children: (0, jsx_runtime_1.jsx)(Tag, { "data-block": block, className: `${Menu_module_css_1.default.Item} ${className}`, ...props }) }) }));
};
Menu.Item.displayName = "Menu.Item";
Menu.Header = ({ className = '', ...props }) => ((0, jsx_runtime_1.jsx)(Menu.Item, { as: "header", className: `${Menu_module_css_1.default.Header} ${className}`, ...props }));
Menu.Header.displayName = "Menu.Header";
Menu.Footer = ({ className = '', ...props }) => ((0, jsx_runtime_1.jsx)(Menu.Item, { as: "footer", className: `${Menu_module_css_1.default.Footer} ${className}`, ...props }));
Menu.Footer.displayName = "Menu.Footer";
exports.default = Menu;
//# sourceMappingURL=Menu.js.map