cecomponent 2.0.81 → 2.0.83

package/dist/ce-component-lib.mjs

@@ -40239,20 +40239,42 @@ const CESkeletonTable = ({ columns: e, rows: t }) => /* @__PURE__ */ jsxRuntimeE
     }
   );
 }, DatePickerCell = ({ row: e, colId: t }) => {
-  var i;
-  const n = (o) => {
-    var u;
-    const l = o.target.value;
-    (u = e[t]) == null || u.onchange(l);
-  };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { minWidth: "120px" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "input",
-    {
-      type: "date",
-      value: (i = e[t]) == null ? void 0 : i.value,
-      onChange: (o) => n(o)
+  var u;
+  const n = (f) => {
+    if (!f) return "";
+    if (/^\d{4}-\d{2}-\d{2}$/.test(f)) return f;
+    if (f.includes("/")) {
+      const d = f.split("/").map((g) => g.trim());
+      if (d.length >= 3) {
+        const g = d[0].padStart(2, "0").slice(0, 2), b = d[1].padStart(2, "0").slice(0, 2), S = d[2].replace(/\D/g, "").slice(0, 4);
+        return S.length !== 4 ? "" : `${S}-${g}-${b}`;
+      }
+    }
+    const p = f.replace(/\D/g, "");
+    if (p.length === 8) {
+      const d = p.slice(0, 4), g = p.slice(4, 6), b = p.slice(6, 8);
+      if (+g >= 1 && +g <= 12)
+        return `${d}-${g}-${b}`;
+      const E = p.slice(0, 2), S = p.slice(2, 4);
+      return `${p.slice(4, 8)}-${E}-${S}`;
+    }
+    const m = new Date(f);
+    if (!isNaN(m.getTime())) {
+      const d = m.getFullYear().toString().slice(0, 4).padStart(4, "0"), g = (m.getMonth() + 1).toString().padStart(2, "0"), b = m.getDate().toString().padStart(2, "0");
+      return `${d}-${g}-${b}`;
     }
-  ) });
+    return "";
+  }, [i, o] = useState(((u = e[t]) == null ? void 0 : u.value) || "");
+  useEffect(() => {
+    var f;
+    o(n(((f = e[t]) == null ? void 0 : f.value) || ""));
+  }, [e, t]);
+  const l = (f) => {
+    var m;
+    const p = n(f.target.value);
+    o(p), (m = e[t]) == null || m.onchange(p);
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { minWidth: "120px" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("input", { type: "date", value: i, onChange: (f) => l(f) }) });
 }, AddNewRowCell = ({
   row: e,
   column: t,
@@ -44647,23 +44669,24 @@ const CESkeletonTable = ({ columns: e, rows: t }) => /* @__PURE__ */ jsxRuntimeE
   placeholder: i = "Select status...",
   size: o = "medium",
   disabled: l = !1,
-  ariaLabel: u = "Status selection dropdown"
+  ariaLabel: u = "Status selection dropdown",
+  fullButtonAsDropdown: f = !1
 }) => {
-  const [f, p] = useState(!1), m = useRef(null), d = e.find((_) => _.value === t), g = (_) => {
-    n(_), p(!1);
+  const [p, m] = useState(!1), d = useRef(null), g = e.find((T) => T.value === t), b = (T) => {
+    n(T), m(!1);
   };
   useEffect(() => {
-    const _ = (T) => {
-      var C;
-      (C = m.current) != null && C.contains(T.target) || p(!1);
+    const T = (C) => {
+      var R;
+      (R = d.current) != null && R.contains(C.target) || m(!1);
     };
-    return document.addEventListener("mousedown", _), () => document.removeEventListener("mousedown", _);
+    return document.addEventListener("mousedown", T), () => document.removeEventListener("mousedown", T);
   }, []);
-  const b = (_) => {
-    l || (_.key === "Enter" || _.key === " " ? (_.preventDefault(), p(!f)) : _.key === "Escape" && p(!1));
-  }, E = (_) => {
-    if (_ != null && _.statusType)
-      switch (_.statusType) {
+  const E = (T) => {
+    l || (T.key === "Enter" || T.key === " " ? (T.preventDefault(), m(!p)) : T.key === "Escape" && m(!1));
+  }, S = (T) => {
+    if (T != null && T.statusType)
+      switch (T.statusType) {
         case "in-progress":
           return "in-progress";
         case "declined":
@@ -44674,10 +44697,10 @@ const CESkeletonTable = ({ columns: e, rows: t }) => /* @__PURE__ */ jsxRuntimeE
           return "";
       }
     return "";
-  }, S = () => {
-    if (d) {
-      const _ = {};
-      return d.backgroundColor && (_.backgroundColor = d.backgroundColor), d.textColor && (_.color = d.textColor), _;
+  }, _ = () => {
+    if (g) {
+      const T = {};
+      return g.backgroundColor && (T.backgroundColor = g.backgroundColor), g.textColor && (T.color = g.textColor), T;
     }
     return {};
   };
@@ -44685,28 +44708,30 @@ const CESkeletonTable = ({ columns: e, rows: t }) => /* @__PURE__ */ jsxRuntimeE
     "div",
     {
       className: `status-dropdown-container ${l ? "disabled" : ""} size-${o}`,
-      ref: m,
+      ref: d,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "div",
           {
-            className: `status-dropdown-trigger ${f ? "open" : ""} ${d ? `has-selection ${E(d)}` : ""}`,
-            onClick: () => !l && g((d == null ? void 0 : d.value) || ""),
-            onKeyDown: b,
+            className: `status-dropdown-trigger ${p ? "open" : ""} ${g ? `has-selection ${S(g)}` : ""}`,
+            onClick: () => {
+              l || (f ? m(!p) : b((g == null ? void 0 : g.value) || ""));
+            },
+            onKeyDown: E,
             tabIndex: l ? -1 : 0,
             role: "button",
             "aria-haspopup": "listbox",
-            "aria-expanded": f ? "true" : "false",
+            "aria-expanded": p ? "true" : "false",
             "aria-label": u,
-            style: S(),
+            style: _(),
             children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "status-text", children: d ? d.label : i }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "status-text", children: g ? g.label : i }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "span",
                 {
                   className: "status-dropdown-icon",
-                  onClick: (_) => {
-                    _.stopPropagation(), !l && p(!f);
+                  onClick: (T) => {
+                    T.stopPropagation(), !l && m(!p);
                   },
                   children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                     "svg",
@@ -44716,7 +44741,7 @@ const CESkeletonTable = ({ columns: e, rows: t }) => /* @__PURE__ */ jsxRuntimeE
                       viewBox: "0 0 24 24",
                       fill: "none",
                       xmlns: "http://www.w3.org/2000/svg",
-                      className: `dropdown-arrow ${f ? "rotate" : ""}`,
+                      className: `dropdown-arrow ${p ? "rotate" : ""}`,
                       children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                         "path",
                         {
@@ -44732,25 +44757,25 @@ const CESkeletonTable = ({ columns: e, rows: t }) => /* @__PURE__ */ jsxRuntimeE
             ]
           }
         ),
-        f && !l && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        p && !l && /* @__PURE__ */ jsxRuntimeExports.jsx(
           "ul",
           {
             className: "status-dropdown-options",
             role: "listbox",
             "aria-label": "Status options",
-            children: e.map((_) => {
-              const T = {};
-              return _.backgroundColor && (T.backgroundColor = _.backgroundColor), _.textColor && (T.color = _.textColor), /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            children: e.map((T) => {
+              const C = {};
+              return T.backgroundColor && (C.backgroundColor = T.backgroundColor), T.textColor && (C.color = T.textColor), /* @__PURE__ */ jsxRuntimeExports.jsxs(
                 "li",
                 {
-                  className: `status-dropdown-option ${t === _.value ? "selected" : ""} ${E(_)}`,
-                  onClick: () => g(_.value),
+                  className: `status-dropdown-option ${t === T.value ? "selected" : ""} ${S(T)}`,
+                  onClick: () => b(T.value),
                   role: "option",
-                  "aria-selected": t === _.value ? "true" : "false",
-                  style: T,
+                  "aria-selected": t === T.value ? "true" : "false",
+                  style: C,
                   children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "option-indicator", children: _.icon ? _.icon : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-                      _.statusType === "declined" && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "option-indicator", children: T.icon ? T.icon : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                      T.statusType === "declined" && /* @__PURE__ */ jsxRuntimeExports.jsxs(
                         "svg",
                         {
                           width: "16",
@@ -44771,7 +44796,7 @@ const CESkeletonTable = ({ columns: e, rows: t }) => /* @__PURE__ */ jsxRuntimeE
                           ]
                         }
                       ),
-                      _.statusType === "withdrawn" && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                      T.statusType === "withdrawn" && /* @__PURE__ */ jsxRuntimeExports.jsxs(
                         "svg",
                         {
                           width: "16",
@@ -44792,7 +44817,7 @@ const CESkeletonTable = ({ columns: e, rows: t }) => /* @__PURE__ */ jsxRuntimeE
                           ]
                         }
                       ),
-                      _.statusType === "in-progress" && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                      T.statusType === "in-progress" && /* @__PURE__ */ jsxRuntimeExports.jsxs(
                         "svg",
                         {
                           width: "16",
@@ -44815,10 +44840,10 @@ const CESkeletonTable = ({ columns: e, rows: t }) => /* @__PURE__ */ jsxRuntimeE
                         }
                       )
                     ] }) }),
-                    _.label
+                    T.label
                   ]
                 },
-                _.value
+                T.value
               );
             })
           }

package/dist/components/Common/StatusDropDown/CEStatusDropdown.d.ts

@@ -16,6 +16,7 @@ interface StatusDropdownProps {
     size?: Size;
     disabled?: boolean;
     ariaLabel?: string;
+    fullButtonAsDropdown?: boolean;
 }
 declare const CEStatusDropdown: React.FC<StatusDropdownProps>;
 export default CEStatusDropdown;

package/package.json

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