@cakemail-org/ui-components-v2 2.1.18 → 2.1.20

package/dist/cjs/components/inlineTextEdit/index.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import "./styles.scss";
 import { TInlineTextEdit } from "./types";
-export declare function InlineTextEdit({ children, disabled, tooltipTitle, tooltipPlacement, value, defaultValue, name, onChange, onTimeoutChange, onConfirm, onCancel, placeholder, showActionButtons, maxRows, maxLength }: TInlineTextEdit): React.JSX.Element;
+export declare function InlineTextEdit({ disabled, tooltipTitle, tooltipPlacement, defaultValue, name, onConfirm, onCancel, placeholder, showActionButtons, maxRows, maxLength }: TInlineTextEdit): React.JSX.Element;
 export default InlineTextEdit;
 export * from "./types";

package/dist/cjs/components/inlineTextEdit/types.d.ts

@@ -1,15 +1,10 @@
 import { TTooltipPlacement } from "../header/types";
-import { TTextFieldChange } from "../textField/types";
 export type TInlineTextEdit = {
-    children: any;
     tooltipTitle: string;
     tooltipPlacement?: TTooltipPlacement;
-    value?: string;
     defaultValue?: string;
     placeholder?: string;
     name?: string;
-    onChange?: TTextFieldChange;
-    onTimeoutChange?: TTextFieldChange;
     onConfirm: TInlineTextEditActions;
     onCancel?: TInlineTextEditActions;
     showActionButtons?: boolean;

package/dist/cjs/index.js

@@ -10736,11 +10736,11 @@ styleInject(css_248z$5);
 
 function InlineTextEdit(_a) {
     var _b, _c;
-    var children = _a.children, disabled = _a.disabled, tooltipTitle = _a.tooltipTitle, tooltipPlacement = _a.tooltipPlacement, value = _a.value, defaultValue = _a.defaultValue, name = _a.name, onChange = _a.onChange, onTimeoutChange = _a.onTimeoutChange, onConfirm = _a.onConfirm, onCancel = _a.onCancel, placeholder = _a.placeholder, showActionButtons = _a.showActionButtons, maxRows = _a.maxRows, maxLength = _a.maxLength;
+    var disabled = _a.disabled, tooltipTitle = _a.tooltipTitle, tooltipPlacement = _a.tooltipPlacement, defaultValue = _a.defaultValue, name = _a.name, onConfirm = _a.onConfirm, onCancel = _a.onCancel, placeholder = _a.placeholder, showActionButtons = _a.showActionButtons, maxRows = _a.maxRows, maxLength = _a.maxLength;
     var _d = React.useState(false), editing = _d[0], setEditing = _d[1];
     var id = React.useRef(Math.floor(Math.random() * 1000000000));
     var spanRef = React.useRef(null);
-    var valueRef = React.useRef(value || defaultValue);
+    var _e = React.useState(defaultValue), value = _e[0], setValue = _e[1];
     maxRows = maxRows || 1;
     var multiline = maxRows > 1;
     React.useLayoutEffect(function () {
@@ -10750,26 +10750,24 @@ function InlineTextEdit(_a) {
                 input.focus();
         }
     }, [editing]);
-    React.useLayoutEffect(function () {
-    }, [value]);
     function handleClick() {
         setEditing(!editing);
     }
     function handleClose() {
         handleClick();
-        onCancel && onCancel({ name: name, value: value || valueRef.current });
+        setValue(defaultValue);
+        onCancel && onCancel({ name: name, value: value });
     }
     function handleConfirm() {
         handleClick();
-        onConfirm && onConfirm({ name: name, value: value || valueRef.current });
+        onConfirm && onConfirm({ name: name, value: value });
     }
     function handleOnClickAway() {
         if (!showActionButtons && editing)
             handleConfirm();
     }
     function handleOnChange(e) {
-        valueRef.current = e.target.value;
-        onChange && onChange(e);
+        setValue(e.target.value);
     }
     tooltipPlacement = tooltipPlacement || "right";
     var offsetWidthOfSpan = ((_b = spanRef === null || spanRef === void 0 ? void 0 : spanRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 150;
@@ -10777,6 +10775,7 @@ function InlineTextEdit(_a) {
         offsetWidthOfSpan = 150;
     }
     var offsetHeightOfSpan = ((_c = spanRef === null || spanRef === void 0 ? void 0 : spanRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) || 20;
+    console.log("offsetWidthOfSpan", value);
     var classes = classNames("inlineTextEdit-component-v2", {
         "editing": editing,
         "disabled": disabled
@@ -10785,11 +10784,9 @@ function InlineTextEdit(_a) {
         React.createElement(Box, { id: "inlineTextEdit-id-" + id.current, className: classes },
             !editing &&
                 React.createElement(Tooltip, { title: tooltipTitle, arrow: true, placement: tooltipPlacement },
-                    React.createElement(Box, { component: "span", className: "".concat(!children && placeholder ? "hasPlaceholder" : "", " pointer"), onClick: handleClick, style: { maxHeight: offsetHeightOfSpan * maxRows } }, children || placeholder)),
+                    React.createElement(Box, { component: "span", className: "".concat(!value && placeholder ? "hasPlaceholder" : "", " pointer"), onClick: handleClick, style: { maxHeight: offsetHeightOfSpan * maxRows } }, value || placeholder)),
             React.createElement(Box, { className: editing ? "" : "hidden" },
-                React.createElement(TextField, { disabled: disabled, inputProps: { maxLength: maxLength || 256 }, maxRows: maxRows, multiline: multiline, placeholder: placeholder, variant: "standard", name: name, style: { width: "".concat(offsetWidthOfSpan, "px") }, defaultValue: defaultValue, value: value, onChange: handleOnChange, timeout: onTimeoutChange && {
-                        callback: onTimeoutChange
-                    } }),
+                React.createElement(TextField, { disabled: disabled, inputProps: { maxLength: maxLength || 256 }, maxRows: maxRows, multiline: multiline, placeholder: placeholder, variant: "standard", name: name, style: { width: "".concat(offsetWidthOfSpan, "px") }, value: value, onChange: handleOnChange }),
                 showActionButtons &&
                     React.createElement(material.Stack, { className: "actions", direction: "row", justifyContent: "center", alignContent: "center" },
                         React.createElement(Button, { onClick: handleConfirm, className: "confirm", color: "body1", size: "small" },
@@ -10798,9 +10795,37 @@ function InlineTextEdit(_a) {
                             React.createElement(Icon, { name: "X18", color: "white" })))),
             React.createElement("span", { ref: spanRef, style: {
                     visibility: 'hidden',
-                    whiteSpace: 'pre', // To respect spaces in the input
+                    whiteSpace: multiline ? 'pre-wrap' : 'pre', // For multiline, allow wrapping
                     position: 'absolute',
-                    padding: multiline ? "0 8px" : "0 4px"
+                    top: '-9999px', // Move completely off-screen
+                    left: '-9999px',
+                    padding: '0', // Remove padding to match input exactly
+                    margin: '0',
+                    border: 'none',
+                    outline: 'none',
+                    fontFamily: 'inherit',
+                    fontSize: 'inherit',
+                    fontWeight: 'inherit',
+                    lineHeight: 'inherit',
+                    letterSpacing: 'inherit',
+                    wordSpacing: 'inherit',
+                    textTransform: 'inherit',
+                    fontVariant: 'inherit',
+                    fontStretch: 'inherit',
+                    fontStyle: 'inherit',
+                    textDecoration: 'inherit',
+                    textAlign: 'inherit',
+                    textIndent: 'inherit',
+                    textShadow: 'inherit',
+                    textOverflow: 'inherit',
+                    textRendering: 'inherit',
+                    unicodeBidi: 'inherit',
+                    writingMode: 'inherit',
+                    direction: 'inherit',
+                    // Ensure the span behaves like an input field
+                    display: 'inline-block',
+                    minWidth: '1px',
+                    width: 'auto', // Use available width for multiline
                 } }, value || ' ')));
 }
 

package/dist/esm/components/inlineTextEdit/index.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import "./styles.scss";
 import { TInlineTextEdit } from "./types";
-export declare function InlineTextEdit({ children, disabled, tooltipTitle, tooltipPlacement, value, defaultValue, name, onChange, onTimeoutChange, onConfirm, onCancel, placeholder, showActionButtons, maxRows, maxLength }: TInlineTextEdit): React.JSX.Element;
+export declare function InlineTextEdit({ disabled, tooltipTitle, tooltipPlacement, defaultValue, name, onConfirm, onCancel, placeholder, showActionButtons, maxRows, maxLength }: TInlineTextEdit): React.JSX.Element;
 export default InlineTextEdit;
 export * from "./types";

package/dist/esm/components/inlineTextEdit/types.d.ts

@@ -1,15 +1,10 @@
 import { TTooltipPlacement } from "../header/types";
-import { TTextFieldChange } from "../textField/types";
 export type TInlineTextEdit = {
-    children: any;
     tooltipTitle: string;
     tooltipPlacement?: TTooltipPlacement;
-    value?: string;
     defaultValue?: string;
     placeholder?: string;
     name?: string;
-    onChange?: TTextFieldChange;
-    onTimeoutChange?: TTextFieldChange;
     onConfirm: TInlineTextEditActions;
     onCancel?: TInlineTextEditActions;
     showActionButtons?: boolean;

package/dist/esm/index.js

@@ -10716,11 +10716,11 @@ styleInject(css_248z$5);
 
 function InlineTextEdit(_a) {
     var _b, _c;
-    var children = _a.children, disabled = _a.disabled, tooltipTitle = _a.tooltipTitle, tooltipPlacement = _a.tooltipPlacement, value = _a.value, defaultValue = _a.defaultValue, name = _a.name, onChange = _a.onChange, onTimeoutChange = _a.onTimeoutChange, onConfirm = _a.onConfirm, onCancel = _a.onCancel, placeholder = _a.placeholder, showActionButtons = _a.showActionButtons, maxRows = _a.maxRows, maxLength = _a.maxLength;
+    var disabled = _a.disabled, tooltipTitle = _a.tooltipTitle, tooltipPlacement = _a.tooltipPlacement, defaultValue = _a.defaultValue, name = _a.name, onConfirm = _a.onConfirm, onCancel = _a.onCancel, placeholder = _a.placeholder, showActionButtons = _a.showActionButtons, maxRows = _a.maxRows, maxLength = _a.maxLength;
     var _d = useState(false), editing = _d[0], setEditing = _d[1];
     var id = useRef(Math.floor(Math.random() * 1000000000));
     var spanRef = useRef(null);
-    var valueRef = useRef(value || defaultValue);
+    var _e = useState(defaultValue), value = _e[0], setValue = _e[1];
     maxRows = maxRows || 1;
     var multiline = maxRows > 1;
     useLayoutEffect(function () {
@@ -10730,26 +10730,24 @@ function InlineTextEdit(_a) {
                 input.focus();
         }
     }, [editing]);
-    useLayoutEffect(function () {
-    }, [value]);
     function handleClick() {
         setEditing(!editing);
     }
     function handleClose() {
         handleClick();
-        onCancel && onCancel({ name: name, value: value || valueRef.current });
+        setValue(defaultValue);
+        onCancel && onCancel({ name: name, value: value });
     }
     function handleConfirm() {
         handleClick();
-        onConfirm && onConfirm({ name: name, value: value || valueRef.current });
+        onConfirm && onConfirm({ name: name, value: value });
     }
     function handleOnClickAway() {
         if (!showActionButtons && editing)
             handleConfirm();
     }
     function handleOnChange(e) {
-        valueRef.current = e.target.value;
-        onChange && onChange(e);
+        setValue(e.target.value);
     }
     tooltipPlacement = tooltipPlacement || "right";
     var offsetWidthOfSpan = ((_b = spanRef === null || spanRef === void 0 ? void 0 : spanRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 150;
@@ -10757,6 +10755,7 @@ function InlineTextEdit(_a) {
         offsetWidthOfSpan = 150;
     }
     var offsetHeightOfSpan = ((_c = spanRef === null || spanRef === void 0 ? void 0 : spanRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) || 20;
+    console.log("offsetWidthOfSpan", value);
     var classes = classNames("inlineTextEdit-component-v2", {
         "editing": editing,
         "disabled": disabled
@@ -10765,11 +10764,9 @@ function InlineTextEdit(_a) {
         React__default.createElement(Box$1, { id: "inlineTextEdit-id-" + id.current, className: classes },
             !editing &&
                 React__default.createElement(Tooltip$1, { title: tooltipTitle, arrow: true, placement: tooltipPlacement },
-                    React__default.createElement(Box$1, { component: "span", className: "".concat(!children && placeholder ? "hasPlaceholder" : "", " pointer"), onClick: handleClick, style: { maxHeight: offsetHeightOfSpan * maxRows } }, children || placeholder)),
+                    React__default.createElement(Box$1, { component: "span", className: "".concat(!value && placeholder ? "hasPlaceholder" : "", " pointer"), onClick: handleClick, style: { maxHeight: offsetHeightOfSpan * maxRows } }, value || placeholder)),
             React__default.createElement(Box$1, { className: editing ? "" : "hidden" },
-                React__default.createElement(TextField, { disabled: disabled, inputProps: { maxLength: maxLength || 256 }, maxRows: maxRows, multiline: multiline, placeholder: placeholder, variant: "standard", name: name, style: { width: "".concat(offsetWidthOfSpan, "px") }, defaultValue: defaultValue, value: value, onChange: handleOnChange, timeout: onTimeoutChange && {
-                        callback: onTimeoutChange
-                    } }),
+                React__default.createElement(TextField, { disabled: disabled, inputProps: { maxLength: maxLength || 256 }, maxRows: maxRows, multiline: multiline, placeholder: placeholder, variant: "standard", name: name, style: { width: "".concat(offsetWidthOfSpan, "px") }, value: value, onChange: handleOnChange }),
                 showActionButtons &&
                     React__default.createElement(Stack$1, { className: "actions", direction: "row", justifyContent: "center", alignContent: "center" },
                         React__default.createElement(Button, { onClick: handleConfirm, className: "confirm", color: "body1", size: "small" },
@@ -10778,9 +10775,37 @@ function InlineTextEdit(_a) {
                             React__default.createElement(Icon, { name: "X18", color: "white" })))),
             React__default.createElement("span", { ref: spanRef, style: {
                     visibility: 'hidden',
-                    whiteSpace: 'pre', // To respect spaces in the input
+                    whiteSpace: multiline ? 'pre-wrap' : 'pre', // For multiline, allow wrapping
                     position: 'absolute',
-                    padding: multiline ? "0 8px" : "0 4px"
+                    top: '-9999px', // Move completely off-screen
+                    left: '-9999px',
+                    padding: '0', // Remove padding to match input exactly
+                    margin: '0',
+                    border: 'none',
+                    outline: 'none',
+                    fontFamily: 'inherit',
+                    fontSize: 'inherit',
+                    fontWeight: 'inherit',
+                    lineHeight: 'inherit',
+                    letterSpacing: 'inherit',
+                    wordSpacing: 'inherit',
+                    textTransform: 'inherit',
+                    fontVariant: 'inherit',
+                    fontStretch: 'inherit',
+                    fontStyle: 'inherit',
+                    textDecoration: 'inherit',
+                    textAlign: 'inherit',
+                    textIndent: 'inherit',
+                    textShadow: 'inherit',
+                    textOverflow: 'inherit',
+                    textRendering: 'inherit',
+                    unicodeBidi: 'inherit',
+                    writingMode: 'inherit',
+                    direction: 'inherit',
+                    // Ensure the span behaves like an input field
+                    display: 'inline-block',
+                    minWidth: '1px',
+                    width: 'auto', // Use available width for multiline
                 } }, value || ' ')));
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cakemail-org/ui-components-v2",
-    "version": "2.1.18",
+    "version": "2.1.20",
     "description": "ui library kit made with material UI",
     "main": "dist/cjs/index.js",
     "module": "dist/esm/index.js",