cecomponent 1.0.134 → 1.0.136

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) => {
@@ -43833,22 +43859,24 @@ const CEAdvancedMultiSelectDropdown = ({
   id: o
 }) => {
   const [l, c] = useState(!1), [f, u] = useState(!1), [x, d] = useState(""), y = useRef(null), m = useRef(null), p = t.filter(
-    (_) => _.label.toLowerCase().includes(x.toLowerCase())
-  ), E = (_) => {
+    (T) => T.label.toLowerCase().includes(x.toLowerCase())
+  ), E = (T) => {
     if (s) {
-      const T = i.includes(_.value);
+      const b = i.includes(T.value);
       n(
-        T ? i.filter((b) => b !== _.value) : [...i, _.value]
+        b ? i.filter((C) => C !== T.value) : [...i, T.value]
       ), d("");
     } else
-      n([_.value]), d(_.label), c(!1);
-  }, g = (_) => {
-    m.current && !m.current.contains(_.target) && (c(!1), u(!1));
+      n([T.value]), d(T.label), c(!1);
+  }, g = (T) => {
+    m.current && !m.current.contains(T.target) && (c(!1), u(!1));
   };
   useEffect(() => (document.addEventListener("mousedown", g), () => document.removeEventListener("mousedown", g)), []);
-  const S = (_) => {
-    var T;
-    return ((T = t.find((b) => b.value === _)) == null ? void 0 : T.label) || _;
+  const S = (T) => {
+    var b;
+    return ((b = t.find((C) => C.value === T)) == null ? void 0 : b.label) || T;
+  }, _ = (T) => {
+    T.stopPropagation(), d(""), n([]);
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
@@ -43866,18 +43894,18 @@ const CEAdvancedMultiSelectDropdown = ({
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "autocomplete-label", children: e }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "input-area", children: [
-                s && i.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "selected-values", children: i.map((_) => /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "selected-tag", children: [
-                  S(_),
+                s && i.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "selected-values", children: i.map((T) => /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "selected-tag", children: [
+                  S(T),
                   /* @__PURE__ */ jsxRuntimeExports.jsx(
                     "button",
                     {
-                      onClick: (T) => {
-                        T.stopPropagation(), n(i.filter((b) => b !== _));
+                      onClick: (b) => {
+                        b.stopPropagation(), n(i.filter((C) => C !== T));
                       },
                       children: "×"
                     }
                   )
-                ] }, _)) }),
+                ] }, T)) }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
                   "input",
                   {
@@ -43885,17 +43913,20 @@ const CEAdvancedMultiSelectDropdown = ({
                     type: "text",
                     className: "autocomplete-input",
                     value: x,
-                    onChange: (_) => d(_.target.value),
+                    onChange: (T) => d(T.target.value),
                     onFocus: () => {
                       u(!0), c(!0);
                     }
                   }
                 ),
+                i.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "clear-icon", onClick: _, title: "Clear", children: "×" }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
                   "span",
                   {
                     className: "dropdown-toggle-icon",
-                    onClick: () => c((_) => !_),
+                    onClick: (T) => {
+                      T.stopPropagation(), c((b) => !b);
+                    },
                     children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M7 10l5 5 5-5H7z", fill: "gray" }) })
                   }
                 )
@@ -43911,25 +43942,25 @@ const CEAdvancedMultiSelectDropdown = ({
                 type: "checkbox",
                 checked: i.length === t.length,
                 onChange: () => {
-                  const _ = i.length === t.length;
-                  n(_ ? [] : t.map((T) => T.value));
+                  const T = i.length === t.length;
+                  n(T ? [] : t.map((b) => b.value));
                 }
               }
             ),
             "Select All"
           ] }) }),
-          p.map((_) => /* @__PURE__ */ jsxRuntimeExports.jsx("li", { onClick: () => E(_), children: s && a ? /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { children: [
+          p.map((T) => /* @__PURE__ */ jsxRuntimeExports.jsx("li", { onClick: () => E(T), children: s && a ? /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               "input",
               {
                 type: "checkbox",
-                checked: i.includes(_.value),
-                onChange: () => E(_),
-                onClick: (T) => T.stopPropagation()
+                checked: i.includes(T.value),
+                onChange: () => E(T),
+                onClick: (b) => b.stopPropagation()
               }
             ),
-            _.label
-          ] }) : _.label }, _.value))
+            T.label
+          ] }) : T.label }, T.value))
         ] })
       ]
     }

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.136",
   "main": "dist/ce-component-lib.js",
   "module": "dist/ce-component-lib.mjs",
   "types": "dist/index.d.ts",