@rio-cloud/rio-uikit 1.11.0 → 1.12.0

package/lib/es/src/components/dropdown/ButtonDropdown.d.ts

@@ -0,0 +1,131 @@
+import React from 'react';
+import { type DropdownToggleEvent, type DropdownToggleButtonType } from './DropdownToggleButton';
+import type { MenuItemProps as MenuItem } from '../menuItems/MenuItem';
+import type { BUTTON_SIZE, BUTTON_STYLE, BUTTON_VARIANT } from '../button/Button';
+export type ButtonDropdownProps<T extends DropdownToggleButtonType = 'button'> = {
+    /**
+     * Unique button id. If not present a random id is generated.
+     */
+    id?: string;
+    /**
+     * The button title. This may be also a node, like a <span> or a <FormattedMessage>.
+     */
+    title: string | React.ReactNode;
+    /**
+     * Defined weather or not the menu is rendered.
+     * Use this to control the component from the outside.
+     *
+     * @default undefined
+     */
+    open?: boolean;
+    /**
+     * Defines whether the dropdown opens above or below.
+     * Set it to "true" additionally disables the automatic position feature.
+     *
+     * @default false
+     */
+    dropup?: boolean;
+    /**
+     * Defines whether the dropdown opens right aligned to the dropdown or not.
+     */
+    pullRight?: boolean;
+    /**
+     * Defines how large the button will be rendered.
+     *
+     * Possible values are: `xs`, `sm`, `md`, `lg`
+     */
+    bsSize?: BUTTON_SIZE;
+    /**
+     * Defines the button color.
+     *
+     * Possible values are: `default`, `primary`, `secondary`, `info`, `warning`, `danger`, `success`, `muted`
+     */
+    bsStyle?: BUTTON_STYLE;
+    /**
+     * Defines the variation of the button design.
+     *
+     * Possible values are: `link`, `link-inline`, `outline`, `action`
+     */
+    variant?: BUTTON_VARIANT;
+    /**
+     * Specify the toggle element type.
+     * It supports the following types: "button" | "tag" | "label"
+     *
+     * @default 'button'
+     */
+    toggleButtonType?: DropdownToggleButtonType;
+    /**
+     * Optional prop to defines whether the dropdown title is icon only which
+     * applies different padding so the button is a square.
+     *
+     * @default false
+     */
+    iconOnly?: boolean;
+    /**
+     * Defines whether the caret is shown or not.
+     *
+     * @default false
+     */
+    noCaret?: boolean;
+    /**
+     * Defines whether the dropdown-toggle (with caret) should be in a separate button.
+     *
+     * @default false
+     */
+    splitButton?: boolean;
+    /**
+     * Renders the dropdown into a dedicated react portal
+     *
+     * @default false
+     */
+    usePortal?: boolean;
+    /**
+     * Items to display in the dropdown menu. If you use a custom dropdown you can skip this prop.
+     */
+    items?: MenuItem[];
+    /**
+     * Disables the dropdown button.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback for splitButton label button click.
+     */
+    onLabelButtonClick?: () => void;
+    /**
+     * Callback for when the toggle button was clicked to open it.
+     * @param event
+     * @returns
+     */
+    onOpen?: (event: DropdownToggleEvent<T>) => void;
+    /**
+     * Callback for when the toggle button was clicked to close it.
+     * @returns
+     */
+    onClose?: () => void;
+    /**
+     * Allows to pass in custom dropdown menu content.
+     */
+    customDropdown?: React.ReactNode;
+    /**
+     * Define custom popper.js configuration for dropdown placement and modifiers.
+     */
+    popperConfig?: object;
+    /**
+     * Additional classes to be set on the dropdown-toggle button.
+     */
+    toggleClassName?: string;
+    /**
+     * Additional classes to be set on the dropdown.
+     */
+    dropdownClassName?: string;
+    /**
+     * Additional classes to be set to the wrapper element.
+     */
+    className?: string;
+};
+declare const ButtonDropdown: React.ForwardRefExoticComponent<ButtonDropdownProps<"button"> & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export default ButtonDropdown;

package/lib/es/src/components/dropdown/ButtonDropdown.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+// biome-ignore lint/style/useImportType: <explanation>
+const react_1 = require("react");
+const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+const react_popper_1 = require("react-popper");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const isNil_1 = tslib_1.__importDefault(require("lodash/fp/isNil"));
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const portalRoot_1 = require("../../utils/portalRoot");
+const useClickOutside_1 = tslib_1.__importStar(require("../../hooks/useClickOutside"));
+const MenuItems_1 = tslib_1.__importDefault(require("../menuItems/MenuItems"));
+const MenuItemList_1 = tslib_1.__importDefault(require("../menuItems/MenuItemList"));
+const DropdownToggleButton_1 = tslib_1.__importDefault(require("./DropdownToggleButton"));
+const SplitCaretButton_1 = tslib_1.__importDefault(require("./SplitCaretButton"));
+const Caret_1 = tslib_1.__importDefault(require("./Caret"));
+const getPlacement = (pullRight, dropup) => {
+    if (pullRight && dropup) {
+        return 'top-end';
+    }
+    if (!pullRight && dropup) {
+        return 'top-start';
+    }
+    if (pullRight && !dropup) {
+        return 'bottom-end';
+    }
+    return 'bottom-start';
+};
+const createButtonDropdown = () => {
+    return (0, react_1.forwardRef)((props, ref) => {
+        const { id = Math.random().toString(36).slice(2, 16), items = [], bsSize = 'md', bsStyle = 'default', variant, disabled = false, iconOnly = false, title, splitButton = false, customDropdown, open, dropup = false, pullRight = false, noCaret = false, onOpen = noop_1.default, onClose = noop_1.default, onLabelButtonClick = noop_1.default, usePortal = false, popperConfig, toggleButtonType = 'button', toggleClassName = '', dropdownClassName, className = '', ...remainingProps } = props;
+        const [internalOpen, setInternalOpen] = (0, react_1.useState)(open);
+        const [refDropdownToggle, setRefDropdownToggle] = (0, react_1.useState)(null);
+        const [refDropdownMenu, setRefDropdownMenu] = (0, react_1.useState)(null);
+        const [refSplitButtonToggle, setRefSplitButtonToggle] = (0, react_1.useState)(null);
+        const defaultPopperConfig = {
+            placement: getPlacement(pullRight, dropup),
+            modifiers: [],
+        };
+        const popperParentRef = splitButton && pullRight ? refSplitButtonToggle : refDropdownToggle;
+        const { styles, attributes } = (0, react_popper_1.usePopper)(popperParentRef, refDropdownMenu, popperConfig || defaultPopperConfig);
+        const isUncontrolled = (0, isNil_1.default)(open);
+        const isOpen = isUncontrolled ? internalOpen : open;
+        const wrapperRef = (0, useClickOutside_1.default)(event => {
+            if (usePortal) {
+                // In case the dropdown is rendered via portal the clickOutside the toggle button element is
+                // triggered since the dropdown is not a child of the wrapper element.
+                // In this case we need to check if the event target is inside the dropdown-menu and prevent closing
+                // the dropdown
+                if (!refDropdownMenu?.contains(event.target)) {
+                    closeMenu();
+                }
+            }
+            else {
+                closeMenu();
+            }
+        }, useClickOutside_1.DEFAULT_EVENT_TYPES, Boolean(isOpen) // only listen to clicks outside when the dropdown is open
+        );
+        const dropdownRoot = (0, portalRoot_1.getOrCreatePortalRoot)();
+        const shouldShowCaret = !noCaret && !splitButton && !iconOnly;
+        (0, react_1.useEffect)(() => {
+            if (!isUncontrolled) {
+                setInternalOpen(open);
+            }
+        }, [isUncontrolled, open]);
+        const toggleOpen = (event) => {
+            const isDropdownOpen = isUncontrolled ? internalOpen : open;
+            if (isDropdownOpen) {
+                closeMenu();
+            }
+            else {
+                openMenu(event);
+            }
+        };
+        const openMenu = (event) => {
+            if (isUncontrolled) {
+                setInternalOpen(true);
+            }
+            if (event) {
+                onOpen(event);
+            }
+        };
+        const closeMenu = () => {
+            if (isUncontrolled) {
+                setInternalOpen(false);
+            }
+            onClose();
+        };
+        const handleSplitLabelButtonClick = () => {
+            closeMenu();
+            onLabelButtonClick();
+        };
+        const handleSplitCaretButtonClick = (event) => {
+            toggleOpen(event);
+        };
+        const handleDropdownButtonClick = (event) => {
+            if (splitButton) {
+                handleSplitLabelButtonClick();
+            }
+            else {
+                toggleOpen(event);
+            }
+        };
+        const wrapperClasses = (0, classnames_1.default)('dropdown', 'btn-group', isOpen && 'open', className);
+        const dropdownClasses = (0, classnames_1.default)(usePortal && 'dropdown-portal', splitButton && pullRight && 'pull-right', dropdownClassName);
+        const dropdownMenu = ((0, jsx_runtime_1.jsx)(MenuItemList_1.default, { className: dropdownClasses, ref: setRefDropdownMenu, style: styles.popper, ...attributes.popper, children: customDropdown ? customDropdown : (0, jsx_runtime_1.jsx)(MenuItems_1.default, { items: items, closeMenu: toggleOpen }) }));
+        return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: wrapperClasses, ref: wrapperRef, children: [(0, jsx_runtime_1.jsx)(DropdownToggleButton_1.default, { id: id, splitButton: splitButton, bsStyle: bsStyle, bsSize: bsSize, variant: variant, iconOnly: iconOnly, disabled: disabled, ref: setRefDropdownToggle, onClick: handleDropdownButtonClick, outerRef: ref, toggleButtonType: toggleButtonType, className: toggleClassName, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title, shouldShowCaret && (0, jsx_runtime_1.jsx)(Caret_1.default, {})] }) }), splitButton && ((0, jsx_runtime_1.jsx)(SplitCaretButton_1.default, { id: id, bsStyle: bsStyle, bsSize: bsSize, disabled: disabled, className: toggleClassName, onClick: handleSplitCaretButtonClick, ref: setRefSplitButtonToggle })), isOpen && usePortal && react_dom_1.default.createPortal(dropdownMenu, dropdownRoot), isOpen && !usePortal && dropdownMenu] }));
+    });
+};
+const ButtonDropdown = createButtonDropdown();
+exports.default = ButtonDropdown;

package/lib/es/src/components/dropdown/Caret.d.ts

@@ -0,0 +1,2 @@
+declare const Caret: () => import("react/jsx-runtime").JSX.Element;
+export default Caret;

package/lib/es/src/components/dropdown/Caret.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Caret = () => (0, jsx_runtime_1.jsx)("span", { className: 'caret' });
+exports.default = Caret;

package/lib/es/src/components/dropdown/DropdownSubmenu.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { MenuItemProps as MenuItem } from '../menuItems/MenuItem';
+export type DropdownSubmenuProps = {
+    /**
+     * Displayed button title.
+     */
+    title?: string | React.ReactNode;
+    /**
+     * Items to display in the dropdown sub menu.
+     */
+    items?: MenuItem[];
+    /**
+     * Disables every entry on the title list item.
+     */
+    disabled?: boolean;
+    /**
+     * Additional classes to be set on the dropdown-submenu element.
+     */
+    className?: string;
+};
+declare const DropdownSubmenu: (props: DropdownSubmenuProps) => import("react/jsx-runtime").JSX.Element;
+export default DropdownSubmenu;

package/lib/es/src/components/dropdown/DropdownSubmenu.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_popper_1 = require("react-popper");
+const MenuItems_1 = tslib_1.__importDefault(require("../menuItems/MenuItems"));
+const MenuItemList_1 = tslib_1.__importDefault(require("../menuItems/MenuItemList"));
+const DropdownSubmenu = (props) => {
+    const { title = '', items = [], disabled = false, className, ...remainingProps } = props;
+    const classes = (0, classnames_1.default)('dropdown-submenu', disabled && 'disabled', className);
+    const [refParentPopper, setRefParentPopper] = (0, react_1.useState)(null);
+    const [refDropdownSubmenu, setRefDropdownSubmenu] = (0, react_1.useState)(null);
+    // We have to use the workaround of checking the hover state as popper may render
+    // the sub menu on an odd place and fixes it's position on the next render cycle
+    const [isHover, setIsHover] = (0, react_1.useState)(false);
+    const handleMouseEnter = () => setIsHover(true);
+    const handleMouseLeave = () => setIsHover(false);
+    const { styles, attributes } = (0, react_popper_1.usePopper)(refParentPopper, refDropdownSubmenu, {
+        placement: 'right-start',
+        modifiers: [
+            {
+                name: 'offset',
+                options: {
+                    offset: [-4, 0],
+                },
+            },
+        ],
+    });
+    // return a list item that is also automatically the new toggle for the submenu
+    return ((0, jsx_runtime_1.jsxs)("li", { ref: setRefParentPopper, ...remainingProps, className: classes, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [(0, jsx_runtime_1.jsxs)("a", { className: 'submenu-title', role: 'menuitem', children: [(0, jsx_runtime_1.jsx)("span", { className: 'submenu-title-text', children: title }), (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-right' })] }), isHover && !disabled && ((0, jsx_runtime_1.jsx)(MenuItemList_1.default, { ref: setRefDropdownSubmenu, style: styles.popper, ...attributes.popper, children: (0, jsx_runtime_1.jsx)(MenuItems_1.default, { items: items }) }))] }));
+};
+exports.default = DropdownSubmenu;

package/lib/es/src/components/dropdown/DropdownToggleButton.d.ts

@@ -0,0 +1,19 @@
+import { type HTMLProps, type PropsWithChildren } from 'react';
+import { type BUTTON_VARIANT, type BUTTON_SIZE, type BUTTON_STYLE } from '../button/Button';
+export type DropdownToggleButtonType = 'button' | 'tag' | 'label';
+export type DropdownToggleEvent<T extends DropdownToggleButtonType = 'button'> = T extends 'button' ? React.MouseEvent<HTMLButtonElement> : React.MouseEvent<HTMLDivElement>;
+export type DropdownToggleButtonProps = HTMLProps<HTMLButtonElement> & {
+    id?: string;
+    disabled?: boolean;
+    splitButton?: boolean;
+    iconOnly?: boolean;
+    onClick: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
+    bsSize: BUTTON_SIZE;
+    bsStyle: BUTTON_STYLE;
+    variant?: BUTTON_VARIANT;
+    toggleButtonType?: DropdownToggleButtonType;
+    outerRef?: React.Ref<HTMLButtonElement | HTMLDivElement>;
+    className?: string;
+};
+declare const DropdownToggleButton: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<DropdownToggleButtonProps>, "ref"> & import("react").RefAttributes<HTMLDivElement | HTMLButtonElement>>;
+export default DropdownToggleButton;

package/lib/es/src/components/dropdown/DropdownToggleButton.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Button_1 = tslib_1.__importDefault(require("../button/Button"));
+const useMergeRefs_1 = tslib_1.__importDefault(require("../../hooks/useMergeRefs"));
+const DropdownToggleButton = (0, react_1.forwardRef)((props, ref) => {
+    const { id, disabled, bsSize, bsStyle, variant, splitButton = false, onClick, toggleButtonType = 'button', className = '', children, outerRef, iconOnly, ...remainingProps } = props;
+    const toggleRef = (0, useMergeRefs_1.default)(outerRef, ref);
+    const buttonClasses = (0, classnames_1.default)(!splitButton && 'dropdown-toggle', !splitButton && className);
+    const labelClasses = (0, classnames_1.default)('dropdown-toggle', 'label', `label-${bsStyle}`, 'display-flex align-items-center', 'user-select-none cursor-pointer', disabled && 'pointer-events-none', className);
+    const tagClasses = (0, classnames_1.default)('dropdown-toggle', 'tag', 'clickable height-auto', bsSize === 'sm' && 'tag-small', 'display-flex align-items-center', 'user-select-none cursor-pointer', disabled && 'pointer-events-none', className);
+    if (toggleButtonType === 'tag') {
+        return ((0, jsx_runtime_1.jsx)("div", { ...remainingProps, id: id, ref: toggleRef, onClick: onClick, className: tagClasses, children: children }));
+    }
+    if (toggleButtonType === 'label') {
+        return ((0, jsx_runtime_1.jsx)("div", { ...remainingProps, id: id, ref: toggleRef, onClick: onClick, className: labelClasses, children: children }));
+    }
+    return ((0, jsx_runtime_1.jsx)(Button_1.default, { ...remainingProps, id: splitButton ? `button-${id}` : id, type: 'button', ref: toggleRef, disabled: disabled, bsStyle: bsStyle, bsSize: bsSize, variant: variant, onClick: onClick, iconOnly: iconOnly, className: buttonClasses, children: children }));
+});
+exports.default = DropdownToggleButton;

package/lib/es/src/components/dropdown/SimpleButtonDropdown.d.ts

@@ -0,0 +1,4 @@
+import { type ButtonDropdownProps } from './ButtonDropdown';
+export type SimpleButtonDropdownProps = ButtonDropdownProps;
+declare const SimpleButtonDropdown: (props: SimpleButtonDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export default SimpleButtonDropdown;

package/lib/es/src/components/dropdown/SimpleButtonDropdown.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ButtonDropdown_1 = tslib_1.__importDefault(require("./ButtonDropdown"));
+const SimpleButtonDropdown = (props) => (0, jsx_runtime_1.jsx)(ButtonDropdown_1.default, { ...props, noCaret: true });
+exports.default = SimpleButtonDropdown;

package/lib/es/src/components/dropdown/SingleButtonDropdown.d.ts

@@ -0,0 +1,4 @@
+import { type ButtonDropdownProps } from './ButtonDropdown';
+export type SingleButtonDropdownProps = ButtonDropdownProps;
+declare const SingleButtonDropdown: (props: SingleButtonDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export default SingleButtonDropdown;

package/lib/es/src/components/dropdown/SingleButtonDropdown.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ButtonDropdown_1 = tslib_1.__importDefault(require("./ButtonDropdown"));
+const SingleButtonDropdown = (props) => (0, jsx_runtime_1.jsx)(ButtonDropdown_1.default, { ...props });
+exports.default = SingleButtonDropdown;

package/lib/es/src/components/dropdown/SplitButtonDropdown.d.ts

@@ -0,0 +1,4 @@
+import { type ButtonDropdownProps } from './ButtonDropdown';
+export type SplitButtonDropdownProps = ButtonDropdownProps;
+declare const SplitButtonDropdown: (props: SplitButtonDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export default SplitButtonDropdown;

package/lib/es/src/components/dropdown/SplitButtonDropdown.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ButtonDropdown_1 = tslib_1.__importDefault(require("./ButtonDropdown"));
+const SplitButtonDropdown = (props) => (0, jsx_runtime_1.jsx)(ButtonDropdown_1.default, { ...props, splitButton: true });
+exports.default = SplitButtonDropdown;

package/lib/es/src/components/dropdown/SplitCaretButton.d.ts

@@ -0,0 +1,12 @@
+import React, { type HTMLProps } from 'react';
+import { BUTTON_STYLE, type BUTTON_SIZE } from '../button/Button';
+export type SplitCaretButtonProps = HTMLProps<HTMLButtonElement> & {
+    disabled?: boolean;
+    iconOnly?: boolean;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    bsSize: BUTTON_SIZE;
+    bsStyle: BUTTON_STYLE;
+    className?: string;
+};
+declare const SplitCaretButton: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<SplitCaretButtonProps>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export default SplitCaretButton;

package/lib/es/src/components/dropdown/SplitCaretButton.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Caret_1 = tslib_1.__importDefault(require("./Caret"));
+const Button_1 = tslib_1.__importDefault(require("../button/Button"));
+const SplitCaretButton = (0, react_1.forwardRef)((props, ref) => {
+    const { disabled = false, bsStyle, bsSize, onClick, className, ...remainingProps } = props;
+    const splitCaretButtonClasses = (0, classnames_1.default)('dropdown-toggle', className);
+    return ((0, jsx_runtime_1.jsx)(Button_1.default, { ...remainingProps, type: 'button', ref: ref, disabled: disabled, bsStyle: bsStyle, bsSize: bsSize, onClick: onClick, className: splitCaretButtonClasses, children: (0, jsx_runtime_1.jsx)(Caret_1.default, {}) }));
+});
+exports.default = SplitCaretButton;

package/lib/es/src/components/editableContent/EditableContent.d.ts

@@ -0,0 +1,94 @@
+import React, { type PropsWithChildren } from 'react';
+export type EditableContentProps = {
+    /**
+     * Visibility flag used to control edit mode from outside.
+     * @default undefined
+     */
+    show?: boolean;
+    /**
+     * Callback function triggered when the save button is clicked.
+     * @param value
+     * @returns
+     */
+    onSave?: (value: string) => void;
+    /**
+     * Callback function triggered when the cancel button is clicked.
+     */
+    onCancel?: VoidFunction;
+    /**
+     * Callback function triggered when the input gets focused.
+     */
+    onFocus?: VoidFunction;
+    /**
+     * Callback function triggered when input looses it's focus.
+     */
+    onBlur?: VoidFunction;
+    /**
+     * Callback function triggered when entering the edit mode.
+     */
+    onEditMode?: VoidFunction;
+    /**
+     * Validation function to intercept saving and prevent save on error.
+     */
+    onSaveValidation?: (value: string) => boolean;
+    /**
+     * Controls the error message visibility from outside. This is useful when using a custom input
+     * where the validation happens outside of this component.
+     * @default true
+     */
+    isValid?: boolean;
+    /**
+     * The error message that shall be shown to the user in case the validation fails.
+     */
+    errorMessage?: React.ReactNode;
+    /**
+     * Use this prop to define a custom editor input component like Select, NumberInput, TimePicker or DatePicker.
+     * Handling input state changes of a custom editor need to be handled outside of this component.
+     * By default the EditableContent uses a built-in textarea to allow resizing for larger text.
+     */
+    customEditor?: React.ReactNode;
+    /**
+     * Offset value to control the vertical position for the editor in case the text element has
+     * borders, spacings different text sizes.
+     * @default 0
+     */
+    editorOffsetTop?: number;
+    /**
+     * Offset value to control the horizontal position for the editor in case the text element has
+     * borders, spacings different text sizes.
+     * @default 0
+     */
+    editorOffsetLeft?: number;
+    /**
+     * Defines the input and button size. Use 'lg' for headlines.
+     * @default 'md'
+     */
+    size?: 'md' | 'lg';
+    /**
+     * Defines if the internal textarea is allowed to resize vertically.
+     * This comes in handy for larger text and when using multiple input rows.
+     * @default false
+     */
+    allowResize?: boolean;
+    /**
+     * Defines the number of rows to use by the internal textarea component.
+     * When a single line is used, the input is saved on "enter" key.
+     *
+     * @default 1
+     */
+    inputRows?: number;
+    /**
+     * Additional classes to be set on the editor input itself.
+     */
+    inputClassName?: string;
+    /**
+     * Additional classes to be set on the editor wrapper element.
+     */
+    editorClassName?: string;
+    /**
+     * Additional classes to be set on the text wrapper element.
+     */
+    className?: string;
+};
+declare const EditableContent: (props: PropsWithChildren<EditableContentProps>) => import("react/jsx-runtime").JSX.Element;
+export default EditableContent;