cecomponent 1.0.134 → 1.0.135

package/dist/ce-component-lib.mjs

@@ -4092,7 +4092,94 @@ const CEDynamicSelectField = forwardRef(
   }
 );
 CEDynamicSelectField.displayName = "CESelectField";
-const CEDynamicTextField = forwardRef(({
+const CEInputBox = ({
+  value: e,
+  onChange: t,
+  placeholder: i = "",
+  type: n = "text",
+  maxLength: s,
+  minLength: a,
+  required: o = !1,
+  customValidator: l,
+  errorMessage: c = "Invalid input",
+  showError: f = !0,
+  label: u,
+  labelSuffix: x,
+  disabled: d = !1,
+  style: y = {},
+  size: m = "medium",
+  onFocus: p,
+  onBlur: E,
+  autoFocus: g = !1,
+  alwaysShowLabel: S,
+  id: _,
+  name: T,
+  onChangeMeta: b
+}) => {
+  const [C, R] = useState(!1), F = (te) => {
+    R(!0), p == null || p(te);
+  }, M = (te) => {
+    R(!1), E == null || E(te);
+  }, A = (te) => {
+    const J = te.target.value;
+    n === "number" && !/^\d*\.?\d{0,2}$/.test(J) || n === "alphanumeric" && !/^[a-zA-Z0-9]*$/.test(J) || (t(J), b == null || b(J, { id: _, name: T }));
+  }, V = getSizeStyle$1(m || "medium"), U = f && o && !e, Y = {
+    fontSize: V.fontSize,
+    padding: V.padding,
+    ...y
+    // if you have a style prop
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: `validated-input-wrapper ${C ? "focused" : ""} ${U ? "error" : ""}`,
+      children: [
+        u && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "label",
+          {
+            className: `validated-input-label ${S || e || C ? "shrink" : ""}`,
+            children: [
+              u,
+              x && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { marginLeft: 4 }, children: x })
+            ]
+          }
+        ),
+        n === "textarea" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "textarea",
+          {
+            value: e,
+            onChange: A,
+            onFocus: F,
+            onBlur: M,
+            placeholder: i || " ",
+            id: _,
+            name: T,
+            className: `validated-input-field ${U ? "input-error" : ""}`,
+            disabled: d,
+            style: Y
+          }
+        ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "input",
+          {
+            type: n,
+            value: e,
+            onChange: A,
+            onFocus: F,
+            onBlur: M,
+            placeholder: i || " ",
+            id: _,
+            name: T,
+            className: `validated-input-field ${U ? "input-error" : ""}`,
+            disabled: d,
+            style: Y,
+            autoFocus: g
+          }
+        ),
+        f && !e && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "validated-input-error", children: c })
+      ]
+    }
+  );
+}, CEDynamicTextField = forwardRef(({
   label: e,
   error: t = !1,
   errorMessage: i,
@@ -4104,9 +4191,13 @@ const CEDynamicTextField = forwardRef(({
   className: c,
   id: f,
   name: u,
-  ...x
-}, d) => {
-  const y = f || `ce-text-field-${Math.random().toString(36).substr(2, 9)}`;
+  multiline: x = !1,
+  rows: d,
+  minHeight: y,
+  width: m,
+  ...p
+}, E) => {
+  const g = f || `ce-text-field-${Math.random().toString(36).substr(2, 9)}`;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -4116,20 +4207,42 @@ const CEDynamicTextField = forwardRef(({
         e && /* @__PURE__ */ jsxRuntimeExports.jsx(
           "label",
           {
-            htmlFor: y,
+            htmlFor: g,
             className: `ce-text-field-label ${t ? "error" : ""} ${a}`,
             children: e
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
+        x ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          CEInputBox,
+          {
+            type: "textarea",
+            value: p.value,
+            onChange: (S) => {
+              p.onChange && p.onChange({ target: { value: S, name: u } });
+            },
+            id: g,
+            name: u,
+            placeholder: p.placeholder,
+            errorMessage: i,
+            showError: t,
+            label: e,
+            required: p.required,
+            alwaysShowLabel: !0,
+            style: {
+              minHeight: y || "100px",
+              width: m || "100%"
+              // ✅ Use the new width prop
+            }
+          }
+        ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
           "input",
           {
-            ref: d,
+            ref: E,
             type: "text",
-            id: y,
+            id: g,
             name: u,
             className: `ce-text-field-input ${t ? "error" : ""} ${o} ${c || ""}`,
-            ...x
+            ...p
           }
         ),
         t && i && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ce-text-field-error-message", children: i })
@@ -39671,93 +39784,6 @@ const ExportIcon = "data:image/svg+xml,%3csvg%20width='24'%20height='25'%20viewB
     return t;
   }
   return e;
-}, CEInputBox = ({
-  value: e,
-  onChange: t,
-  placeholder: i = "",
-  type: n = "text",
-  maxLength: s,
-  minLength: a,
-  required: o = !1,
-  customValidator: l,
-  errorMessage: c = "Invalid input",
-  showError: f = !0,
-  label: u,
-  labelSuffix: x,
-  disabled: d = !1,
-  style: y = {},
-  size: m = "medium",
-  onFocus: p,
-  onBlur: E,
-  autoFocus: g = !1,
-  alwaysShowLabel: S,
-  id: _,
-  name: T,
-  onChangeMeta: b
-}) => {
-  const [C, R] = useState(!1), F = (te) => {
-    R(!0), p == null || p(te);
-  }, M = (te) => {
-    R(!1), E == null || E(te);
-  }, A = (te) => {
-    const J = te.target.value;
-    n === "number" && !/^\d*\.?\d{0,2}$/.test(J) || n === "alphanumeric" && !/^[a-zA-Z0-9]*$/.test(J) || (t(J), b == null || b(J, { id: _, name: T }));
-  }, V = getSizeStyle$1(m || "medium"), U = f && o && !e, Y = {
-    fontSize: V.fontSize,
-    padding: V.padding,
-    ...y
-    // if you have a style prop
-  };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "div",
-    {
-      className: `validated-input-wrapper ${C ? "focused" : ""} ${U ? "error" : ""}`,
-      children: [
-        u && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "label",
-          {
-            className: `validated-input-label ${S || e || C ? "shrink" : ""}`,
-            children: [
-              u,
-              x && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { marginLeft: 4 }, children: x })
-            ]
-          }
-        ),
-        n === "textarea" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "textarea",
-          {
-            value: e,
-            onChange: A,
-            onFocus: F,
-            onBlur: M,
-            placeholder: i || " ",
-            id: _,
-            name: T,
-            className: `validated-input-field ${U ? "input-error" : ""}`,
-            disabled: d,
-            style: Y
-          }
-        ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "input",
-          {
-            type: n,
-            value: e,
-            onChange: A,
-            onFocus: F,
-            onBlur: M,
-            placeholder: i || " ",
-            id: _,
-            name: T,
-            className: `validated-input-field ${U ? "input-error" : ""}`,
-            disabled: d,
-            style: Y,
-            autoFocus: g
-          }
-        ),
-        f && !e && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "validated-input-error", children: c })
-      ]
-    }
-  );
 }, DatePickerCell = ({ row: e, colId: t }) => {
   var n;
   const i = (s) => {

package/dist/components/Common/CEFieldComponet/DynamicTextField/DynamicTextField.d.ts

@@ -10,6 +10,10 @@ export interface CETextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElem
     containerStyle?: React.CSSProperties;
     id?: string;
     name?: string;
+    multiline?: boolean;
+    rows?: number;
+    minHeight?: number | string;
+    width?: number | string;
 }
 declare const CEDynamicTextField: React.ForwardRefExoticComponent<CETextFieldProps & React.RefAttributes<HTMLInputElement>>;
 export default CEDynamicTextField;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cecomponent",
   "description": "A React component library for building modern UIs for Cleanearth",
-  "version": "1.0.134",
+  "version": "1.0.135",
   "main": "dist/ce-component-lib.js",
   "module": "dist/ce-component-lib.mjs",
   "types": "dist/index.d.ts",