@cakemail-org/ui-components-v2 2.1.17 → 2.1.19

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({ children, 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,11 @@
 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 children = _a.children, 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
@@ -10787,9 +10786,7 @@ function InlineTextEdit(_a) {
                 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, { 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 || ' ')));
 }
 
@@ -17172,6 +17197,20 @@ var CommonFormModel = /** @class */ (function () {
             });
         });
     };
+    CommonFormModel.prototype.save = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var _this = this;
+            return __generator(this, function (_a) {
+                if (!this.id) {
+                    throw new Error("Form was not initialized");
+                }
+                return [2 /*return*/, patchForm({ id: this.id.toString(), data: this.toJson() }).then(function (data) {
+                        trackEvent(exports.EEvents.FORM_UPDATED, { id: _this.id });
+                        return data.data;
+                    })];
+            });
+        });
+    };
     return CommonFormModel;
 }());
 var FormModel = /** @class */ (function (_super) {
@@ -17276,20 +17315,6 @@ var SummaryEnhancedFormModel = /** @class */ (function (_super) {
             });
         });
     };
-    SummaryEnhancedFormModel.prototype.save = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var _this = this;
-            return __generator(this, function (_a) {
-                if (!this.id) {
-                    throw new Error("Form was not initialized");
-                }
-                return [2 /*return*/, patchForm({ id: this.id.toString(), data: this.toJson() }).then(function (data) {
-                        trackEvent(exports.EEvents.FORM_UPDATED, { id: _this.id });
-                        return data.data;
-                    })];
-            });
-        });
-    };
     SummaryEnhancedFormModel.prototype.toJson = function () {
         return modelToJson(this);
     };

package/dist/cjs/models/form/index.d.ts

@@ -14,6 +14,7 @@ export declare class CommonFormModel {
     toJson(): any;
     set<T extends keyof this>(property: T, value: this[T]): void;
     delete(): Promise<TDeleteApiResource>;
+    save(): Promise<EnhancedFormModel>;
 }
 export declare class FormModel extends CommonFormModel {
     readonly status: string;
@@ -59,7 +60,6 @@ export declare class SummaryEnhancedFormModel extends CommonFormModel {
     disable(): Promise<EnhancedFormModel>;
     publish(): Promise<EnhancedFormModel>;
     render(published?: boolean): Promise<string>;
-    save(): Promise<EnhancedFormModel>;
     toJson(): any;
     set<T extends keyof this>(property: T, value: this[T]): void;
 }

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({ children, 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,11 @@
 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 children = _a.children, 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
@@ -10767,9 +10766,7 @@ function InlineTextEdit(_a) {
                 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, { 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 || ' ')));
 }
 
@@ -17152,6 +17177,20 @@ var CommonFormModel = /** @class */ (function () {
             });
         });
     };
+    CommonFormModel.prototype.save = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var _this = this;
+            return __generator(this, function (_a) {
+                if (!this.id) {
+                    throw new Error("Form was not initialized");
+                }
+                return [2 /*return*/, patchForm({ id: this.id.toString(), data: this.toJson() }).then(function (data) {
+                        trackEvent(EEvents.FORM_UPDATED, { id: _this.id });
+                        return data.data;
+                    })];
+            });
+        });
+    };
     return CommonFormModel;
 }());
 var FormModel = /** @class */ (function (_super) {
@@ -17256,20 +17295,6 @@ var SummaryEnhancedFormModel = /** @class */ (function (_super) {
             });
         });
     };
-    SummaryEnhancedFormModel.prototype.save = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var _this = this;
-            return __generator(this, function (_a) {
-                if (!this.id) {
-                    throw new Error("Form was not initialized");
-                }
-                return [2 /*return*/, patchForm({ id: this.id.toString(), data: this.toJson() }).then(function (data) {
-                        trackEvent(EEvents.FORM_UPDATED, { id: _this.id });
-                        return data.data;
-                    })];
-            });
-        });
-    };
     SummaryEnhancedFormModel.prototype.toJson = function () {
         return modelToJson(this);
     };

package/dist/esm/models/form/index.d.ts

@@ -14,6 +14,7 @@ export declare class CommonFormModel {
     toJson(): any;
     set<T extends keyof this>(property: T, value: this[T]): void;
     delete(): Promise<TDeleteApiResource>;
+    save(): Promise<EnhancedFormModel>;
 }
 export declare class FormModel extends CommonFormModel {
     readonly status: string;
@@ -59,7 +60,6 @@ export declare class SummaryEnhancedFormModel extends CommonFormModel {
     disable(): Promise<EnhancedFormModel>;
     publish(): Promise<EnhancedFormModel>;
     render(published?: boolean): Promise<string>;
-    save(): Promise<EnhancedFormModel>;
     toJson(): any;
     set<T extends keyof this>(property: T, value: this[T]): void;
 }

package/package.json

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