qlu-20-ui-library 1.7.91 → 1.8.0

package/dist/types/components/NoteEditor/TextStyles.js

@@ -1,69 +1,49 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "./TextStyles.scss";
-import { RichUtils } from "draft-js";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faUnderline, faItalic, faListUl, faT, faB, } from "@fortawesome/free-solid-svg-icons";
-const TextStyles = ({ editorState, updateEditorState }) => {
+import styles from "./TextStyles.module.scss";
+const TextStyles = ({ editor }) => {
+    if (!editor) {
+        return null;
+    }
     const inlineStyles = [
         {
             label: "TITLE",
-            style: "TITLE",
-            icon: _jsx(FontAwesomeIcon, { icon: faT, size: "sm" }),
+            action: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
+            isActive: () => editor.isActive('heading', { level: 1 }),
+            icon: _jsx(FontAwesomeIcon, { icon: faT }),
         },
         {
             label: "BOLD",
-            style: "BOLD",
-            icon: _jsx(FontAwesomeIcon, { icon: faB, size: "sm" }),
+            action: () => editor.chain().focus().toggleBold().run(),
+            isActive: () => editor.isActive('bold'),
+            icon: _jsx(FontAwesomeIcon, { icon: faB }),
         },
         {
             label: "ITALIC",
-            style: "ITALIC",
-            icon: _jsx(FontAwesomeIcon, { icon: faItalic, size: "sm" }),
+            action: () => editor.chain().focus().toggleItalic().run(),
+            isActive: () => editor.isActive('italic'),
+            icon: _jsx(FontAwesomeIcon, { icon: faItalic }),
         },
         {
-            label: "Underline",
-            style: "UNDERLINE",
-            icon: _jsx(FontAwesomeIcon, { icon: faUnderline, size: "sm" }),
+            label: "UNDERLINE",
+            action: () => editor.chain().focus().toggleUnderline().run(),
+            isActive: () => editor.isActive('underline'),
+            icon: _jsx(FontAwesomeIcon, { icon: faUnderline }),
         },
     ];
-    const blockStyle = [
+    const blockStyles = [
         {
             label: "list",
-            style: "unordered-list-item",
-            icon: _jsx(FontAwesomeIcon, { icon: faListUl, size: "sm" }),
+            action: () => editor.chain().focus().toggleBulletList().run(),
+            isActive: () => editor.isActive('bulletList'),
+            icon: _jsx(FontAwesomeIcon, { icon: faListUl }),
         },
     ];
-    const applyStyle = (e, style) => {
+    const handleStyleClick = (e, action) => {
         e.preventDefault();
-        // console.log("Applying style:", style);
-        updateEditorState(RichUtils.toggleInlineStyle(editorState, style));
+        action();
     };
-    const applyBlockStyle = (_e, style) => {
-        _e.preventDefault();
-        updateEditorState(RichUtils.toggleBlockType(editorState, style));
-    };
-    const isActive = (style) => {
-        const currentStyle = editorState.getCurrentInlineStyle();
-        return currentStyle.has(style);
-    };
-    const isActiveBlock = (style) => {
-        const currentStyle = RichUtils.getCurrentBlockType(editorState);
-        return style === currentStyle;
-    };
-    return (_jsxs("div", { className: "renderInlineEditorContainer", children: [inlineStyles.map((item, idx) => {
-                return (_jsx("div", { className: `renderInlineEditortoolBarItem${isActive(item.style)
-                        ? " renderInlineEditortoolBarItemIsActive"
-                        : ""}`, onMouseDown: (e) => {
-                        e.preventDefault();
-                        applyStyle(e, item.style);
-                    }, children: item.icon || item.label }, `${item.label}-${idx}`));
-            }), blockStyle.map((item, index) => {
-                return (_jsx("div", { className: `renderInlineEditortoolBarItem ${isActiveBlock(item.style)
-                        ? "renderInlineEditortoolBarItemIsActive"
-                        : ""}`, onMouseDown: (e) => {
-                        e.preventDefault();
-                        applyBlockStyle(e, item.style);
-                    }, children: item.icon || item.label }, `${item.label}-${index}`));
-            })] }));
+    return (_jsxs("div", { className: styles.textStylesContainer, children: [_jsx("div", { className: styles.inlineStyles, children: inlineStyles.map((style) => (_jsx("button", { type: "button", className: `${styles.styleButton} ${style.isActive() ? styles.active : ""}`, onClick: (e) => handleStyleClick(e, style.action), title: style.label, children: style.icon }, style.label))) }), _jsx("div", { className: styles.blockStyles, children: blockStyles.map((style) => (_jsx("button", { type: "button", className: `${styles.styleButton} ${style.isActive() ? styles.active : ""}`, onClick: (e) => handleStyleClick(e, style.action), title: style.label, children: style.icon }, style.label))) })] }));
 };
 export default TextStyles;

package/dist/types/components/NoteEditor/ToolbarItem.d.ts

@@ -1,3 +1,8 @@
-import "./ToolbarItem.scss";
-declare const ToolbarItem: ({ editorState, updateEditorState, pasteHandler, value, contributors, isLoading, }: any) => import("react/jsx-runtime").JSX.Element;
+import { Editor } from "@tiptap/react";
+interface ToolbarItemProps {
+    editor: Editor | null;
+    contributors?: string[];
+    isLoading?: boolean;
+}
+declare const ToolbarItem: ({ editor, contributors, isLoading, }: ToolbarItemProps) => import("react/jsx-runtime").JSX.Element;
 export default ToolbarItem;

package/dist/types/components/NoteEditor/ToolbarItem.js

@@ -1,22 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import FontSizeControl from "./FontSizeControl";
-// import FontSizeControl from "./FontSizeControl";
-// import { CircularIcon } from ".."
 import { Loader } from "..";
 import { getInitials } from "../../utils";
 import TextStyles from "./TextStyles";
-import "./ToolbarItem.scss";
-const ToolbarItem = ({ editorState, updateEditorState, pasteHandler, value, contributors, isLoading = false, }) => {
-    return (_jsxs("div", { className: "textEditortToolBarContainer", children: [_jsx(TextStyles, { editorState: editorState, updateEditorState: updateEditorState, pasteHandler: pasteHandler, value: value }), _jsx("span", { children: _jsx(FontSizeControl, { updateEditorState: updateEditorState, editorState: editorState }) }), _jsxs("div", { children: [isLoading && _jsx(Loader, { width: "16", height: "16" }), contributors && !isLoading && (_jsxs(_Fragment, { children: [_jsx("p", { children: "Contributors: " }), (() => {
-                                if (contributors?.length > 3) {
-                                    return (_jsxs("span", { className: "initialsContainer", children: [_jsx("div", { children: _jsx(_Fragment, { children: (contributor) => (_jsx("p", { className: "initials", children: getInitials(contributor) })) }) }), _jsxs("p", { children: ["+ ", contributors?.length - 1, " More"] })] }));
-                                }
-                                if (contributors?.length === 0 || !contributors) {
-                                    return _jsx("p", { children: "No contributors yet" });
-                                }
-                                return contributors?.map((contributor) => (_jsx("p", { className: "initials", children: getInitials(contributor) }))
-                                // <CircularIcon iconPath={contributor} iconSize="28"/>
-                                );
-                            })()] }))] })] }));
+import FontSizeControl from "./FontSizeControl";
+import styles from "./ToolbarItem.module.scss";
+const ToolbarItem = ({ editor, contributors, isLoading = false, }) => {
+    return (_jsxs("div", { className: styles.textEditortToolBarContainer, children: [_jsx(TextStyles, { editor: editor }), _jsx("span", { children: _jsx(FontSizeControl, { editor: editor }) }), _jsxs("div", { children: [isLoading && _jsx(Loader, { width: "16", height: "16" }), contributors && !isLoading && (_jsxs(_Fragment, { children: [_jsx("p", { children: "Contributors: " }), contributors.map((contributor, index) => (_jsx("p", { children: getInitials(contributor) }, index)))] }))] })] }));
 };
 export default ToolbarItem;

package/dist/types/components/NoteEditor/index.d.ts

@@ -1,13 +1 @@
-import "./style.scss";
-import "@draft-js-plugins/inline-toolbar/lib/plugin.css";
-import "draft-js/dist/Draft.css";
-interface Props {
-    value: string;
-    handleChange: (newTextValue: string) => void;
-    contributors?: string[];
-    isDisabled: boolean;
-    isLoading: boolean;
-    notesLoading: boolean;
-}
-declare const NoteEditor: ({ value, handleChange, contributors, isDisabled, isLoading, notesLoading, }: Props) => import("react/jsx-runtime").JSX.Element;
-export default NoteEditor;
+export { default } from "./NoteEditor";

package/dist/types/components/NoteEditor/index.js

@@ -1,59 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect } from "react";
-import { EditorState, ContentState, RichUtils } from "draft-js";
-import Editor from "@draft-js-plugins/editor";
-import ToolbarItem from "./ToolbarItem";
-import "./style.scss";
-import "@draft-js-plugins/inline-toolbar/lib/plugin.css";
-import "draft-js/dist/Draft.css";
-const NoteEditor = ({ value = "", handleChange = () => false, contributors, isDisabled = false, isLoading = false, notesLoading = false, }) => {
-    const [editorState, setEditorState] = React.useState(() => EditorState.createEmpty());
-    const handleKeyCommand = (command, editorState) => {
-        const newState = RichUtils.handleKeyCommand(editorState, command);
-        if (newState) {
-            handleEditorChange(newState);
-            return "handled";
-        }
-        return "not-handled";
-    };
-    const customBlockStyleFn = (block) => {
-        const type = block.getType();
-        if (type === "BOLD") {
-            return "custom-bold";
-        }
-        else if (type === "ITALIC") {
-            return "custom-italic";
-        }
-        else if (type === "UNDERLINE") {
-            return "custom-underline";
-        }
-        else {
-            return "";
-        }
-    };
-    const customStyleMap = {
-        TITLE: {
-            fontSize: "18px",
-            fontWeight: "bold",
-        },
-        FONTSIZE_16: {
-            fontSize: "16px",
-        },
-        FONTSIZE_18: {
-            fontSize: "18px",
-        },
-    };
-    useEffect(() => {
-        const newContentState = ContentState.createFromText(value);
-        const newEditorState = EditorState.createWithContent(newContentState);
-        setEditorState(newEditorState);
-    }, [value]);
-    const handleEditorChange = (newEditorState) => {
-        if (!notesLoading) {
-            setEditorState(newEditorState);
-            handleChange(newEditorState.getCurrentContent().getPlainText());
-        }
-    };
-    return (_jsxs("div", { className: "noteEditorContainer", children: [_jsx(ToolbarItem, { editorState: editorState, updateEditorState: setEditorState, value: value, contributors: contributors, isLoading: isLoading }), _jsx("div", { children: _jsx(Editor, { readOnly: isDisabled, customStyleMap: customStyleMap, blockStyleFn: customBlockStyleFn, editorState: editorState, onChange: handleEditorChange, handleKeyCommand: handleKeyCommand }) })] }));
-};
-export default NoteEditor;
+export { default } from "./NoteEditor";

package/dist/types/components/PayChart/index.js

@@ -31,7 +31,7 @@ const PayChart = ({ inputLabels = [], inputValues = [], titleSet = [], symbol =
                     },
                     font: {
                         size: 16,
-                        weight: "400",
+                        weight: 400,
                         family: "Inter",
                     },
                 },
@@ -48,7 +48,7 @@ const PayChart = ({ inputLabels = [], inputValues = [], titleSet = [], symbol =
                     color: "#FAFAFA",
                     font: {
                         size: 16,
-                        weight: "400",
+                        weight: 400,
                         family: "Inter",
                     },
                 },

package/dist/types/components/PersonView/PersonViewGrowthChart/index.js

@@ -140,7 +140,7 @@ const PersonViewGrowthChart = ({ inputLabels = [], targetValues = [], comparison
                     gradient.addColorStop(0.6, "rgba(139, 130, 125, 0.9)");
                     return gradient;
                 },
-                backgroundColor: "rgba(54, 162, 235, 0.2)",
+                backgroundColor: "rgba(54, 162, 235, 0.2)", // Transparent fill color
                 borderWidth: 2,
             },
         ],

package/dist/types/components/RadioButton/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './style.scss';
 interface RadioButtonProps {
     value: (val: boolean) => void;

package/dist/types/components/RangeComponent/RangeComponent.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface RangeObject {
+    minRange: number;
+    maxRange: number;
+}
+interface RangeComponentProps {
+    minValue: number;
+    maxValue: number;
+    getRange: (value: RangeObject) => void;
+    disabled?: boolean;
+}
+declare const RangeComponent: React.FC<RangeComponentProps>;
+export default RangeComponent;

package/dist/types/components/RangeComponent/RangeComponent.js

@@ -0,0 +1,149 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect } from "react";
+import styles from "./RangeComponent.module.scss";
+import clsx from "clsx";
+const RangeComponent = ({ minValue = 2, maxValue = 6, getRange, disabled = false, }) => {
+    const keyMap = {
+        1: 1,
+        10: 2,
+        25: 3,
+        50: 4,
+        200: 5,
+        500: 6,
+        1000: 7,
+        5000: 8,
+        10000: 9,
+        50000000: 10,
+    };
+    const numberMap = {
+        1: 1,
+        2: 10,
+        3: 25,
+        4: 50,
+        5: 200,
+        6: 500,
+        7: 1000,
+        8: 5000,
+        9: 10000,
+        10: 50000000,
+    };
+    // const [minSliderValue, setMinSliderValue] = useState<number>(keyMap[minValue] || 3);
+    // const [maxSliderValue, setMaxSliderValue] = useState<number>(keyMap[maxValue] || 8);
+    // Use prop values directly instead of state
+    const minSliderValue = keyMap[minValue] || 3;
+    const maxSliderValue = keyMap[maxValue] || 8;
+    const [isDragging, setIsDragging] = useState(null);
+    // Removed showTooltips state - now handled by CSS opacity
+    const sliderRef = useRef(null);
+    const compositeClassNames = clsx({
+        [styles["discrete-Slider--Generic"]]: true,
+        [styles["discrete-Slider--Disabled"]]: disabled,
+    });
+    const formatLabel = (value) => {
+        if (disabled) {
+            return "";
+        }
+        else if (value < 7) {
+            return `${numberMap[value]}`;
+        }
+        else if (value === 7) {
+            return `1K`;
+        }
+        else if (value === 8) {
+            return `5K`;
+        }
+        else if (value === 9) {
+            return `10K`;
+        }
+        else {
+            return `10K+`;
+        }
+    };
+    const getPercentage = (value) => {
+        return ((value - 1) / (10 - 1)) * 100;
+    };
+    const getValueFromPercentage = (percentage) => {
+        return Math.round(1 + (percentage / 100) * (10 - 1));
+    };
+    const handleTrackClick = useCallback((e) => {
+        if (disabled || isDragging)
+            return;
+        const rect = sliderRef.current?.getBoundingClientRect();
+        if (!rect)
+            return;
+        const percentage = Math.max(0, Math.min(100, ((e.clientX - rect.left) / rect.width) * 100));
+        const clickValue = getValueFromPercentage(percentage);
+        // Determine which thumb is closer to the click position
+        const distanceToMin = Math.abs(clickValue - minSliderValue);
+        const distanceToMax = Math.abs(clickValue - maxSliderValue);
+        if (distanceToMin <= distanceToMax) {
+            // Move min thumb, but ensure it doesn't go beyond max - 1
+            const newMinValue = Math.min(clickValue, maxSliderValue - 1);
+            const minRangeMap = numberMap[newMinValue];
+            const maxRangeMap = numberMap[maxSliderValue];
+            getRange({ minRange: minRangeMap, maxRange: maxRangeMap });
+        }
+        else {
+            // Move max thumb, but ensure it doesn't go below min + 1
+            const newMaxValue = Math.max(clickValue, minSliderValue + 1);
+            const minRangeMap = numberMap[minSliderValue];
+            const maxRangeMap = numberMap[newMaxValue];
+            getRange({ minRange: minRangeMap, maxRange: maxRangeMap });
+        }
+    }, [disabled, isDragging, minSliderValue, maxSliderValue, numberMap, getRange]);
+    const handleMouseDown = useCallback((type) => (e) => {
+        if (disabled)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(type);
+        // Removed setShowTooltips - now handled by CSS
+    }, [disabled]);
+    const handleMouseMove = useCallback((e) => {
+        if (!isDragging || !sliderRef.current || disabled)
+            return;
+        const rect = sliderRef.current.getBoundingClientRect();
+        const percentage = Math.max(0, Math.min(100, ((e.clientX - rect.left) / rect.width) * 100));
+        const value = getValueFromPercentage(percentage);
+        if (isDragging === 'min') {
+            const newMinValue = Math.min(value, maxSliderValue - 1);
+            // setMinSliderValue(newMinValue); // Removed - now controlled by props
+            const minRangeMap = numberMap[newMinValue];
+            const maxRangeMap = numberMap[maxSliderValue];
+            getRange({ minRange: minRangeMap, maxRange: maxRangeMap });
+        }
+        else if (isDragging === 'max') {
+            const newMaxValue = Math.max(value, minSliderValue + 1);
+            // setMaxSliderValue(newMaxValue); // Removed - now controlled by props
+            const minRangeMap = numberMap[minSliderValue];
+            const maxRangeMap = numberMap[newMaxValue];
+            getRange({ minRange: minRangeMap, maxRange: maxRangeMap });
+        }
+    }, [isDragging, maxSliderValue, minSliderValue, disabled, numberMap, getRange]);
+    const handleMouseUp = useCallback(() => {
+        setIsDragging(null);
+        // Removed setShowTooltips - now handled by CSS
+    }, []);
+    useEffect(() => {
+        if (isDragging) {
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+            return () => {
+                document.removeEventListener('mousemove', handleMouseMove);
+                document.removeEventListener('mouseup', handleMouseUp);
+            };
+        }
+    }, [isDragging, handleMouseMove, handleMouseUp]);
+    // Removed tooltip show/hide handlers - now handled by CSS hover states
+    // const handleSliderMouseEnter = () => { ... }
+    // const handleSliderMouseLeave = () => { ... }
+    // const handleThumbMouseEnter = () => { ... }
+    // const handleThumbMouseLeave = () => { ... }
+    const minPercentage = getPercentage(minSliderValue);
+    const maxPercentage = getPercentage(maxSliderValue);
+    return (_jsxs("span", { className: compositeClassNames, children: ["1", _jsxs("div", { className: styles["range-slider-container"], ref: sliderRef, onClick: handleTrackClick, children: [_jsx("div", { className: styles["range-slider-track"], children: _jsx("div", { className: styles["range-slider-track-active"], style: {
+                                left: `${minPercentage}%`,
+                                width: `${maxPercentage - minPercentage}%`,
+                            } }) }), _jsx("div", { className: `${styles["range-slider-thumb"]} ${styles["range-slider-thumb--min"]}`, style: { left: `${minPercentage}%` }, onMouseDown: handleMouseDown('min'), children: _jsx("div", { className: styles["range-slider-tooltip"], children: formatLabel(minSliderValue) }) }), _jsx("div", { className: `${styles["range-slider-thumb"]} ${styles["range-slider-thumb--max"]}`, style: { left: `${maxPercentage}%` }, onMouseDown: handleMouseDown('max'), children: _jsx("div", { className: styles["range-slider-tooltip"], children: formatLabel(maxSliderValue) }) })] }), "10K+"] }));
+};
+export default RangeComponent;

package/dist/types/components/RangeComponent/index.d.ts

@@ -1,15 +1,2 @@
-import React from "react";
-import "react-input-range/lib/css/index.css";
-import "./style.scss";
-export interface RangeObject {
-    minRange: number;
-    maxRange: number;
-}
-interface RangeComponentProps {
-    minValue: number;
-    maxValue: number;
-    getRange: (value: RangeObject) => void;
-    disabled?: boolean;
-}
-declare const RangeComponent: React.FC<RangeComponentProps>;
-export default RangeComponent;
+export { default } from "./RangeComponent";
+export type { RangeObject } from "./RangeComponent";

package/dist/types/components/RangeComponent/index.js

@@ -1,69 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import InputRange from "react-input-range";
-import "react-input-range/lib/css/index.css";
-import "./style.scss";
-import clsx from "clsx";
-const RangeComponent = ({ minValue = 2, maxValue = 6, getRange, disabled = false, }) => {
-    const keyMap = {
-        1: 1,
-        10: 2,
-        25: 3,
-        50: 4,
-        200: 5,
-        500: 6,
-        1000: 7,
-        5000: 8,
-        10000: 9,
-        50000000: 10,
-    };
-    // const [minValueState, setMinValue] = useState<number>(keyMap[minValue] || 3);
-    // const [maxValueState, setMaxValue] = useState<number>(keyMap[maxValue] || 8);
-    const numberMap = {
-        1: 1,
-        2: 10,
-        3: 25,
-        4: 50,
-        5: 200,
-        6: 500,
-        7: 1000,
-        8: 5000,
-        9: 10000,
-        10: 50000000,
-    };
-    const compositeClassNames = clsx({
-        "discrete-Slider--Generic": true,
-        "discrete-Slider--Disabled": disabled,
-    });
-    const handleChange = (newValue) => {
-        if (typeof newValue !== "number") {
-            const { min, max } = newValue;
-            // setMinValue(min);
-            // setMaxValue(max);
-            const minRangeMap = numberMap[min];
-            const maxRangeMap = numberMap[max];
-            getRange({ minRange: minRangeMap, maxRange: maxRangeMap });
-        }
-    };
-    const formatLabel = (value) => {
-        if (disabled) {
-            return "";
-        }
-        else if (value < 7) {
-            return `${numberMap[value]}`;
-        }
-        else if (value === 7) {
-            return `1K`;
-        }
-        else if (value === 8) {
-            return `5K`;
-        }
-        else if (value === 9) {
-            return `10K`;
-        }
-        else {
-            return `10K+`;
-        }
-    };
-    return (_jsxs("span", { className: compositeClassNames, children: ["1", _jsx(InputRange, { disabled: disabled, minValue: 1, maxValue: 10, value: { min: keyMap[minValue], max: keyMap[maxValue] }, onChange: handleChange, formatLabel: formatLabel }), "10K+"] }));
-};
-export default RangeComponent;
+export { default } from "./RangeComponent";

package/dist/types/components/RectangularSvgButton/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./style.scss";
 import { IconSize, IconType } from "../../types";
 interface RectangularSvgButtonProps {

package/dist/types/components/RoundCard/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './style.scss';
 interface RoundCardProps {
 }

package/dist/types/components/SearchArrowButton/SearchSvgButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './style.scss';
 import { IconSize, IconType } from "../../types";
 interface SearchSvgButtonProps {

package/dist/types/components/SearchFilterButton/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./style.scss";
 import { IconType } from "../../types";
 interface SearchFilterButtonProps {

package/dist/types/components/SettingsNavbar/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./style.scss";
 interface SettingsNavbarProps {
     active: "Personal Information" | "Qmail" | "Organisation" | "Privacy" | "Subscription" | "Password";

package/dist/types/components/StyleableTextAreaContainer/StyleableTextArea.d.ts

@@ -1,19 +1,14 @@
-/// <reference types="react" />
-import { EditorState } from "draft-js";
-import "draft-js/dist/Draft.css";
+import { Editor } from '@tiptap/react';
 import "./style.scss";
 interface Props {
     placeholder?: string;
     value: string;
-    maxLength?: number;
-    onChange: (editorState: EditorState) => void;
-    editorState: EditorState;
-    updateEditorState: any;
     isNextDisabled: boolean;
     className?: string;
     showHeader?: boolean;
     headerPosition?: string;
     showError?: boolean;
+    editor: Editor | null;
 }
-declare const StyleableTextArea: import("react").MemoExoticComponent<({ placeholder, onChange, maxLength, editorState, isNextDisabled, className, updateEditorState, value, showHeader, headerPosition, showError, }: Props) => import("react/jsx-runtime").JSX.Element>;
+declare const StyleableTextArea: import("react").MemoExoticComponent<({ placeholder, isNextDisabled, className, value, showHeader, headerPosition, showError, editor, }: Props) => import("react/jsx-runtime").JSX.Element | null>;
 export default StyleableTextArea;