mui-tiptap/dist/esm/MenuBar.js

A Material-UI (MUI) styled WYSIWYG rich text editor, using Tiptap

import { jsx as _jsx } from "react/jsx-runtime";
import Collapse from "@mui/material/Collapse";
import { styled, useThemeProps } from "@mui/material/styles";
import { clsx } from "clsx";
import { menuBarClasses, } from "./MenuBar.classes";
import { Z_INDEXES, getUtilityComponentName } from "./styles";
const componentName = getUtilityComponentName("MenuBar");
const MenuBarRoot = styled(Collapse, {
    name: componentName,
    slot: "root",
    overridesResolver: (props, styles) => [
        styles.root,
        props.ownerState.disableSticky ? styles.nonSticky : styles.sticky,
    ],
})(({ theme, ownerState }) => ({
    borderBottomColor: theme.palette.divider,
    borderBottomStyle: "solid",
    borderBottomWidth: 1,
    ...(ownerState.disableSticky
        ? {}
        : {
            position: "sticky",
            top: ownerState.stickyOffset,
            zIndex: Z_INDEXES.MENU_BAR,
            background: theme.palette.background.default,
        }),
}));
const MenuBarContent = styled("div", {
    name: componentName,
    slot: "content",
    overridesResolver: (props, styles) => styles.content,
})({});
/**
 * A collapsible, optionally-sticky container for showing editor controls atop
 * the editor content.
 */
export default function MenuBar(inProps) {
    const props = useThemeProps({ props: inProps, name: componentName });
    const { hide, disableSticky, stickyOffset = 0, children, className, classes = {}, unmountOnExit = true, sx, ...collapseProps } = props;
    const ownerState = {
        hide,
        disableSticky,
        stickyOffset,
        unmountOnExit,
    };
    return (_jsx(MenuBarRoot, { ...collapseProps, in: !hide, unmountOnExit: unmountOnExit, 
        // Note that we have to apply the sticky CSS classes to the container
        // (rather than the menu bar itself) in order for it to behave
        // properly
        className: clsx([
            menuBarClasses.root,
            classes.root,
            disableSticky
                ? [menuBarClasses.nonSticky, classes.nonSticky]
                : [menuBarClasses.sticky, classes.sticky],
            className,
        ]), ownerState: ownerState, sx: sx, children: _jsx(MenuBarContent, { className: clsx([menuBarClasses.content, classes.content]), ownerState: ownerState, children: children }) }));
}