mui-tiptap/dist/esm/FieldContainer.js

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

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Box from "@mui/material/Box";
import { styled, useThemeProps } from "@mui/material/styles";
import { clsx } from "clsx";
import { fieldContainerClasses, } from "./FieldContainer.classes";
import { Z_INDEXES, getUtilityComponentName } from "./styles";
const componentName = getUtilityComponentName("FieldContainer");
const FieldContainerRoot = styled(Box, {
    name: componentName,
    slot: "root",
    overridesResolver: (props, styles) => [
        styles.root,
        props.ownerState.variant === "outlined" && styles.outlined,
        props.ownerState.variant === "standard" && styles.standard,
        props.ownerState.focused && styles.focused,
        props.ownerState.disabled && styles.disabled,
    ],
})(({ theme, ownerState }) => ({
    // Based on the concept behind and styles of OutlinedInput and NotchedOutline
    // styles here, to imitate outlined input appearance in material-ui
    // https://github.com/mui-org/material-ui/blob/a4972c5931e637611f6421ed2a5cc3f78207cbb2/packages/material-ui/src/OutlinedInput/OutlinedInput.js#L9-L37
    // https://github.com/mui/material-ui/blob/a4972c5931e637611f6421ed2a5cc3f78207cbb2/packages/material-ui/src/OutlinedInput/NotchedOutline.js
    ...(ownerState.variant === "outlined" && {
        borderRadius: theme.shape.borderRadius,
        padding: 1,
        position: "relative",
        ...(!ownerState.focused &&
            !ownerState.disabled && {
            [`&:hover .${fieldContainerClasses.notchedOutline}`]: {
                borderColor: theme.palette.text.primary,
            },
        }),
    }),
}));
const FieldContainerNotchedOutline = styled("div", {
    name: componentName,
    slot: "notchedOutline",
    overridesResolver: (props, styles) => styles.notchedOutline,
})(({ theme, ownerState }) => ({
    position: "absolute",
    inset: 0,
    borderRadius: "inherit",
    borderColor: theme.palette.mode === "light"
        ? "rgba(0, 0, 0, 0.23)"
        : "rgba(255, 255, 255, 0.23)",
    borderStyle: "solid",
    borderWidth: 1,
    pointerEvents: "none",
    overflow: "hidden",
    zIndex: Z_INDEXES.NOTCHED_OUTLINE,
    ...(ownerState.focused && {
        borderColor: theme.palette.primary.main,
        borderWidth: 2,
    }),
    ...(ownerState.disabled && {
        borderColor: theme.palette.action.disabled,
    }),
}));
/**
 * Renders an element with classes and styles that correspond to the state and
 * style-variant of a user-input field, the content of which should be passed in as
 * `children`.
 */
export default function FieldContainer(inProps) {
    const props = useThemeProps({ props: inProps, name: componentName });
    const { variant = "outlined", children, focused, disabled, classes = {}, className, sx, ...boxProps } = props;
    const ownerState = { variant, focused, disabled };
    return (_jsxs(FieldContainerRoot, { ...boxProps, className: clsx([
            fieldContainerClasses.root,
            className,
            classes.root,
            variant === "outlined"
                ? [fieldContainerClasses.outlined, classes.outlined]
                : [fieldContainerClasses.standard, classes.standard],
            // Note that we want focused and disabled styles of equal specificity to
            // trump default root/outlined/standard styles, so they should be defined
            // in this order
            focused && [fieldContainerClasses.focused, classes.focused],
            disabled && [fieldContainerClasses.disabled, classes.disabled],
        ]), sx: sx, ownerState: ownerState, children: [children, variant === "outlined" && (_jsx(FieldContainerNotchedOutline, { ownerState: ownerState, className: clsx([
                    fieldContainerClasses.notchedOutline,
                    classes.notchedOutline,
                ]), "aria-hidden": true }))] }));
}