@apexcura/ui-components 0.0.15-Beta11 → 0.0.15-Beta3

package/dist/index.css

@@ -341,12 +341,29 @@ video {
 .m-\[10px\] {
   margin: 10px;
 }
+.mr-3 {
+  margin-right: 0.75rem;
+}
 .flex {
   display: flex;
 }
 .table {
   display: table;
 }
+.h-5 {
+  height: 1.25rem;
+}
+.w-5 {
+  width: 1.25rem;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
 .rounded-\[8px\] {
   border-radius: 8px;
 }

package/dist/index.d.mts

@@ -120,6 +120,6 @@ declare const Upload: (props: ElementType) => React$1.JSX.Element;
 
 declare const OtpElement: (props: ElementType) => React$1.JSX.Element;
 
-declare const Donut: React$1.FC<any>;
+declare const Donut: (props: ElementType) => React$1.JSX.Element;
 
 export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, Donut, DropDownGroup, FileUpload, Image, MultipleSelectElement, Navbar, NumberElement, OtpElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleCheckbox, SingleSelectElement, SwitchElement, TableElement, TabsElement, TextElement, TextareaElement, Upload };

package/dist/index.d.ts

@@ -120,6 +120,6 @@ declare const Upload: (props: ElementType) => React$1.JSX.Element;
 
 declare const OtpElement: (props: ElementType) => React$1.JSX.Element;
 
-declare const Donut: React$1.FC<any>;
+declare const Donut: (props: ElementType) => React$1.JSX.Element;
 
 export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, Donut, DropDownGroup, FileUpload, Image, MultipleSelectElement, Navbar, NumberElement, OtpElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleCheckbox, SingleSelectElement, SwitchElement, TableElement, TabsElement, TextElement, TextareaElement, Upload };

package/dist/index.js

@@ -382,6 +382,7 @@ var ButtonElement = (props) => {
   const [svgContent, setSvgContent] = (0, import_react11.useState)(null);
   const [originalSvgContent, setOriginalSvgContent] = (0, import_react11.useState)(null);
   const [hoverColor, setHoverColor] = (0, import_react11.useState)(null);
+  const [defaultColor, setDefaultColor] = (0, import_react11.useState)(null);
   (0, import_react11.useEffect)(() => {
     if (props.icon) {
       fetch(props.icon).then((response) => response.text()).then((data) => {
@@ -399,6 +400,7 @@ var ButtonElement = (props) => {
             document.body.removeChild(tempSpan);
             const paths = svgElement.querySelectorAll("path");
             paths.forEach((path) => path.setAttribute("fill", computedColor));
+            setDefaultColor(computedColor);
           }
           if (hoverColorClass) {
             const tempSpan = document.createElement("span");
@@ -417,7 +419,7 @@ var ButtonElement = (props) => {
         }
       }).catch((error) => console.error("Error fetching SVG:", error));
     }
-  }, [props.icon, props.className]);
+  }, []);
   const handleMouseEnter = () => {
     if (hoverColor && originalSvgContent) {
       const tempDiv = document.createElement("div");
@@ -429,8 +431,13 @@ var ButtonElement = (props) => {
     }
   };
   const handleMouseLeave = () => {
-    if (originalSvgContent) {
-      setSvgContent(originalSvgContent);
+    if (defaultColor && originalSvgContent) {
+      const tempDiv = document.createElement("div");
+      tempDiv.innerHTML = originalSvgContent;
+      const svgElement = tempDiv.querySelector("svg");
+      const paths = svgElement?.querySelectorAll("path");
+      paths?.forEach((path) => path.setAttribute("fill", defaultColor));
+      setSvgContent(tempDiv.innerHTML);
     }
   };
   return /* @__PURE__ */ import_react11.default.createElement(
@@ -439,15 +446,15 @@ var ButtonElement = (props) => {
       onClick: props.onClick,
       className: `${props.className ? props.className : ""}`,
       onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave
+      onMouseLeave: handleMouseLeave,
+      disabled: props.isLoading
     },
-    props.isSVGStylesOverride === false ? props.icon && /* @__PURE__ */ import_react11.default.createElement("img", { className: props.iconsClassName, src: props.icon, alt: props.label }) : svgContent && /* @__PURE__ */ import_react11.default.createElement(
+    props.isLoading ? /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement("svg", { className: "animate-spin h-5 w-5 mr-3", viewBox: "0 0 24 24" }), props.label) : /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, props.isSVGStylesOverride === false ? props.icon && /* @__PURE__ */ import_react11.default.createElement("img", { className: props.iconsClassName, src: props.icon, alt: props.label }) : svgContent && /* @__PURE__ */ import_react11.default.createElement(
       "span",
       {
         dangerouslySetInnerHTML: { __html: svgContent }
       }
-    ),
-    props.label
+    ), props.label)
   );
 };
 
@@ -810,7 +817,8 @@ var TableElement = (props) => {
       dataSource,
       columns,
       size: props.size,
-      bordered: true
+      bordered: true,
+      scroll: { x: 1300 }
     }
   ), model && /* @__PURE__ */ import_react20.default.createElement(ModelElement, { selectedRecord, ...props, columns, model, onCancel: () => setModel(false) }));
 };
@@ -825,7 +833,7 @@ var DatePickerElement = (props) => {
   const [dateState, setDateState] = (0, import_react21.useState)("");
   const handleChange = (date, dateString) => {
     if (date) {
-      const formattedDate = dateString;
+      const formattedDate = date;
       setDateState(date);
       if (props.onChange) {
         props.onChange(formattedDate);
@@ -1137,7 +1145,7 @@ var Donut = (props) => {
       }
     ]
   };
-  return /* @__PURE__ */ import_react31.default.createElement(import_react31.default.Fragment, null, /* @__PURE__ */ import_react31.default.createElement(HighchartsChart, { options: chartOptions }));
+  return /* @__PURE__ */ import_react31.default.createElement(import_react31.default.Fragment, null, /* @__PURE__ */ import_react31.default.createElement(HighchartsChart, { highcharts: import_highcharts.default, options: chartOptions }));
 };
 var Donut_default = Donut;
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.mjs

@@ -321,6 +321,7 @@ var ButtonElement = (props) => {
   const [svgContent, setSvgContent] = useState4(null);
   const [originalSvgContent, setOriginalSvgContent] = useState4(null);
   const [hoverColor, setHoverColor] = useState4(null);
+  const [defaultColor, setDefaultColor] = useState4(null);
   useEffect(() => {
     if (props.icon) {
       fetch(props.icon).then((response) => response.text()).then((data) => {
@@ -338,6 +339,7 @@ var ButtonElement = (props) => {
             document.body.removeChild(tempSpan);
             const paths = svgElement.querySelectorAll("path");
             paths.forEach((path) => path.setAttribute("fill", computedColor));
+            setDefaultColor(computedColor);
           }
           if (hoverColorClass) {
             const tempSpan = document.createElement("span");
@@ -356,7 +358,7 @@ var ButtonElement = (props) => {
         }
       }).catch((error) => console.error("Error fetching SVG:", error));
     }
-  }, [props.icon, props.className]);
+  }, []);
   const handleMouseEnter = () => {
     if (hoverColor && originalSvgContent) {
       const tempDiv = document.createElement("div");
@@ -368,8 +370,13 @@ var ButtonElement = (props) => {
     }
   };
   const handleMouseLeave = () => {
-    if (originalSvgContent) {
-      setSvgContent(originalSvgContent);
+    if (defaultColor && originalSvgContent) {
+      const tempDiv = document.createElement("div");
+      tempDiv.innerHTML = originalSvgContent;
+      const svgElement = tempDiv.querySelector("svg");
+      const paths = svgElement?.querySelectorAll("path");
+      paths?.forEach((path) => path.setAttribute("fill", defaultColor));
+      setSvgContent(tempDiv.innerHTML);
     }
   };
   return /* @__PURE__ */ React11.createElement(
@@ -378,15 +385,15 @@ var ButtonElement = (props) => {
       onClick: props.onClick,
       className: `${props.className ? props.className : ""}`,
       onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave
+      onMouseLeave: handleMouseLeave,
+      disabled: props.isLoading
     },
-    props.isSVGStylesOverride === false ? props.icon && /* @__PURE__ */ React11.createElement("img", { className: props.iconsClassName, src: props.icon, alt: props.label }) : svgContent && /* @__PURE__ */ React11.createElement(
+    props.isLoading ? /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement("svg", { className: "animate-spin h-5 w-5 mr-3", viewBox: "0 0 24 24" }), props.label) : /* @__PURE__ */ React11.createElement(React11.Fragment, null, props.isSVGStylesOverride === false ? props.icon && /* @__PURE__ */ React11.createElement("img", { className: props.iconsClassName, src: props.icon, alt: props.label }) : svgContent && /* @__PURE__ */ React11.createElement(
       "span",
       {
         dangerouslySetInnerHTML: { __html: svgContent }
       }
-    ),
-    props.label
+    ), props.label)
   );
 };
 
@@ -749,7 +756,8 @@ var TableElement = (props) => {
       dataSource,
       columns,
       size: props.size,
-      bordered: true
+      bordered: true,
+      scroll: { x: 1300 }
     }
   ), model && /* @__PURE__ */ React20.createElement(ModelElement, { selectedRecord, ...props, columns, model, onCancel: () => setModel(false) }));
 };
@@ -764,7 +772,7 @@ var DatePickerElement = (props) => {
   const [dateState, setDateState] = useState7("");
   const handleChange = (date, dateString) => {
     if (date) {
-      const formattedDate = dateString;
+      const formattedDate = date;
       setDateState(date);
       if (props.onChange) {
         props.onChange(formattedDate);
@@ -1076,7 +1084,7 @@ var Donut = (props) => {
       }
     ]
   };
-  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(HighchartsChart, { options: chartOptions }));
+  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(HighchartsChart, { highcharts: Highcharts, options: chartOptions }));
 };
 var Donut_default = Donut;
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.15-Beta11",
+  "version": "0.0.15-Beta3",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",