@m4l/components 0.2.35 → 0.2.36

package/components/Period/{index.3f89d8a4.js → index.c6d1a95a.js}

@@ -1,31 +1,24 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useModuleDictionary, useModuleSkeleton, useEnvironment } from "@m4l/core";
 import { styled, generateUtilityClasses, generateUtilityClass, Skeleton, Autocomplete, TextField } from "@mui/material";
 import { useState, useMemo } from "react";
-import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.fa7ab18c.js";
+import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.273645af.js";
 import { unstable_composeClasses } from "@mui/base";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { T as Typography } from "../mui_extended/Typography/index.379dd374.js";
-import { I as IconButton } from "../mui_extended/IconButton/index.f8a3021b.js";
-const ContainerPeriod = styled("div")(({
-  theme
-}) => ({
+import { T as Typography } from "../mui_extended/Typography/index.a1e774a2.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.b0ee4965.js";
+const ContainerPeriod = styled("div")(({ theme }) => ({
   ...theme.components?.M4LPeriod?.styleOverrides
 }));
-styled("div")(({
-  theme
-}) => ({
+styled("div")(({ theme }) => ({
   width: "1px",
   height: "20px",
   backgroundColor: theme.palette.divider
 }));
 styled("div", {
   shouldForwardProp: (props) => props !== "readOnly"
-})(({
-  theme,
-  readOnly
-}) => ({
+})(({ theme, readOnly }) => ({
   display: "flex",
   width: "100%",
   height: "37.5px",
@@ -38,9 +31,7 @@ styled("div", {
   padding: theme.spacing(0.5, 1),
   borderRadius: "4px"
 }));
-styled("div")(({
-  theme
-}) => ({
+styled("div")(({ theme }) => ({
   ...theme.typography.body2,
   width: "100%",
   display: "flex",
@@ -49,9 +40,7 @@ styled("div")(({
   padding: "5px",
   textAlign: "left"
 }));
-styled("div")(({
-  theme
-}) => ({
+styled("div")(({ theme }) => ({
   ...theme.typography.body2,
   width: "70px",
   display: "flex",
@@ -96,7 +85,19 @@ function getPeriodUtilityClass(slot) {
 }
 const periodUtilityClasses = (ownerState) => {
   const slots = {
-    root: ["root", ownerState.size === "small" && "sizeSmall", ownerState.size === "medium" && "sizeMedium", ownerState.state === "error" && "stateError", ownerState.state === "success" && "stateSuccess", ownerState.state === "warning" && "stateWarning", ownerState.state === "info" && "stateInfo", ownerState.readOnly && "stateReadOnly", ownerState.variant === "monoperiod" ? "variantMonoperiod" : null, ownerState.variant === "multiperiod" ? "variantMultiperiod" : null, ownerState.focus && "isFocus"],
+    root: [
+      "root",
+      ownerState.size === "small" && "sizeSmall",
+      ownerState.size === "medium" && "sizeMedium",
+      ownerState.state === "error" && "stateError",
+      ownerState.state === "success" && "stateSuccess",
+      ownerState.state === "warning" && "stateWarning",
+      ownerState.state === "info" && "stateInfo",
+      ownerState.readOnly && "stateReadOnly",
+      ownerState.variant === "monoperiod" ? "variantMonoperiod" : null,
+      ownerState.variant === "multiperiod" ? "variantMultiperiod" : null,
+      ownerState.focus && "isFocus"
+    ],
     containerDateLabel: ["containerDateLabel"],
     containerDateValue: ["containerDateValue"],
     skeleton: ["skeleton"],
@@ -113,25 +114,11 @@ const getNamePeriodDataTestId = (KEY) => {
   return `${PERIOD_PREFIX}-${KEY}`;
 };
 const SkeletonPeriod = (props) => {
-  const {
-    classes
-  } = props;
-  return /* @__PURE__ */ jsxs("div", {
-    className: classes.skeleton,
-    children: [/* @__PURE__ */ jsx("div", {
-      className: classes.skeletonFieldPrimary,
-      children: /* @__PURE__ */ jsx(Skeleton, {
-        variant: "text",
-        width: "50%"
-      })
-    }), /* @__PURE__ */ jsx("div", {
-      className: classes.skeletonFieldSecondary,
-      children: /* @__PURE__ */ jsx(Skeleton, {
-        variant: "text",
-        width: "50%"
-      })
-    })]
-  });
+  const { classes } = props;
+  return /* @__PURE__ */ jsxs("div", { className: classes.skeleton, children: [
+    /* @__PURE__ */ jsx("div", { className: classes.skeletonFieldPrimary, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "50%" }) }),
+    /* @__PURE__ */ jsx("div", { className: classes.skeletonFieldSecondary, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "50%" }) })
+  ] });
 };
 const getSelPeriodTime = (period) => {
   if (!period)
@@ -168,19 +155,14 @@ const Period = (props) => {
     variant = "monoperiod",
     size = "small"
   } = props;
-  const {
-    getLabel
-  } = useModuleDictionary();
+  const { getLabel } = useModuleDictionary();
   const [open, setOpen] = useState(false);
   const [isFocus, setIsFocus] = useState(false);
   const isSkeleton = useModuleSkeleton();
   const selPeriodTime = getSelPeriodTime(value);
   const singleValue = getSingleValue(value);
   const isDesktop = useResponsiveDesktop();
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
+  const { host_static_assets, environment_assets } = useEnvironment();
   const iconDown = `${host_static_assets}/${environment_assets}/frontend/components/RHFAutocompletarAsync/assets/icons/chevronDown.svg`;
   const handleFocus = () => {
     setIsFocus(true);
@@ -211,16 +193,23 @@ const Period = (props) => {
       onTotalChange(newPeriodTime.id, singleValue);
     }
   };
-  const options = useMemo(() => [{
-    id: 0,
-    label: getLabel(dictionary.LABEL_YEARS)
-  }, {
-    id: 1,
-    label: getLabel(dictionary.LABEL_MONTHS)
-  }, {
-    id: 2,
-    label: getLabel(dictionary.LABEL_DAYS)
-  }], [getLabel]);
+  const options = useMemo(
+    () => [
+      {
+        id: 0,
+        label: getLabel(dictionary.LABEL_YEARS)
+      },
+      {
+        id: 1,
+        label: getLabel(dictionary.LABEL_MONTHS)
+      },
+      {
+        id: 2,
+        label: getLabel(dictionary.LABEL_DAYS)
+      }
+    ],
+    [getLabel]
+  );
   const ownerState = {
     readOnly,
     state,
@@ -229,76 +218,70 @@ const Period = (props) => {
     focus: isFocus
   };
   const classes = periodUtilityClasses(ownerState);
-  return /* @__PURE__ */ jsx(ContainerPeriod, {
-    className: classes.root,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getNamePeriodDataTestId("root")
-    } : {},
-    children: !isSkeleton ? /* @__PURE__ */ jsx(Fragment, {
-      children: readOnly ? /* @__PURE__ */ jsxs(Fragment, {
-        children: [/* @__PURE__ */ jsx("div", {
-          className: classes.containerDateLabel,
-          children: /* @__PURE__ */ jsx(Typography, {
-            variant: "body",
-            skeletonWidth: "50%",
-            children: value.selPeriodTime === 0 ? getLabel(dictionary.LABEL_YEARS) : value.selPeriodTime === 1 ? getLabel(dictionary.LABEL_MONTHS) : value.selPeriodTime === 2 ? getLabel(dictionary.LABEL_DAYS) : null
-          })
-        }), /* @__PURE__ */ jsx("div", {
-          className: classes.containerDateValue,
-          children: /* @__PURE__ */ jsx(Typography, {
-            variant: "body",
-            skeletonWidth: "80%",
-            children: value.singleValue
-          })
-        })]
-      }) : /* @__PURE__ */ jsxs(Fragment, {
-        children: [/* @__PURE__ */ jsx(Autocomplete, {
-          options,
-          value: options[selPeriodTime],
-          disableClearable: true,
-          open,
-          onOpen: () => setOpen(true),
-          onClose: () => setOpen(false),
-          onChange: (_event, autcValue) => {
-            onChangeTime(autcValue);
-          },
-          renderInput: (params) => {
-            return /* @__PURE__ */ jsx(TextField, {
-              ...params,
-              fullWidth: true,
-              variant: "standard",
-              SelectProps: {
-                native: true
-              },
-              InputProps: {
-                disableUnderline: true,
-                ...params.InputProps,
-                endAdornment: /* @__PURE__ */ jsx(IconButton, {
-                  src: iconDown,
-                  onClick: () => setOpen((open2) => !open2)
-                })
-              },
-              autoComplete: "off"
-            }, `tx_async_${params.id}`);
+  return /* @__PURE__ */ jsx(
+    ContainerPeriod,
+    {
+      className: classes.root,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNamePeriodDataTestId("root") } : {},
+      children: !isSkeleton ? readOnly ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: classes.containerDateLabel, children: /* @__PURE__ */ jsx(Typography, { variant: "body", skeletonWidth: "50%", children: value.selPeriodTime === 0 ? getLabel(dictionary.LABEL_YEARS) : value.selPeriodTime === 1 ? getLabel(dictionary.LABEL_MONTHS) : value.selPeriodTime === 2 ? getLabel(dictionary.LABEL_DAYS) : null }) }),
+        /* @__PURE__ */ jsx("div", { className: classes.containerDateValue, children: /* @__PURE__ */ jsx(Typography, { variant: "body", skeletonWidth: "80%", children: value.singleValue }) })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Autocomplete,
+          {
+            options,
+            value: options[selPeriodTime],
+            disableClearable: true,
+            open,
+            onOpen: () => setOpen(true),
+            onClose: () => setOpen(false),
+            onChange: (_event, autcValue) => {
+              onChangeTime(autcValue);
+            },
+            renderInput: (params) => {
+              return /* @__PURE__ */ jsx(
+                TextField,
+                {
+                  ...params,
+                  fullWidth: true,
+                  variant: "standard",
+                  SelectProps: { native: true },
+                  InputProps: {
+                    disableUnderline: true,
+                    ...params.InputProps,
+                    endAdornment: /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        src: iconDown,
+                        onClick: () => setOpen((currentOpen) => !currentOpen)
+                      }
+                    )
+                  },
+                  autoComplete: "off"
+                },
+                `tx_async_${params.id}`
+              );
+            }
           }
-        }), /* @__PURE__ */ jsx(TextField, {
-          type: "number",
-          variant: "standard",
-          value: singleValue,
-          InputProps: {
-            disableUnderline: true
-          },
-          onChange: (e) => {
-            onTotalChange(selPeriodTime, e.target.value === "" ? "" : parseInt(e.target.value));
+        ),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            type: "number",
+            variant: "standard",
+            value: singleValue,
+            InputProps: { disableUnderline: true },
+            onChange: (e) => {
+              onTotalChange(selPeriodTime, e.target.value === "" ? "" : parseInt(e.target.value));
+            }
           }
-        })]
-      })
-    }) : /* @__PURE__ */ jsx(SkeletonPeriod, {
-      classes
-    })
-  });
+        )
+      ] }) : /* @__PURE__ */ jsx(SkeletonPeriod, { classes })
+    }
+  );
 };
 export {
   Period as P,

package/components/Period/styles.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { SKTWrapperProps } from './types';
+export declare const ContainerPeriod: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Gap: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SKTWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & SKTWrapperProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FieldPeriod: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FieldValue: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/PrintingSystem/classes/types.d.ts

@@ -1,4 +1,4 @@
-import { printingSystemUtilityClasses } from ".";
+import { printingSystemUtilityClasses } from '.';
 export interface PrintingSystemClassesType {
     root: string;
     pageNodeRoot: string;

package/components/PrintingSystem/{index.27f1f209.js → index.f51a00f8.js}

@@ -1,21 +1,21 @@
+import { jsxs, jsx } from "react/jsx-runtime";
 import { generateUtilityClasses, styled } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../utils/index.6469f148.js";
+import { g as getComponentUtilityClass } from "../../utils/index.0718eeac.js";
 import clsx from "clsx";
-import { D as DividerNode } from "./subcomponents/DividerNode/index.e504dbd2.js";
-import { S as SectionNode } from "./subcomponents/SectionNode/index.83f1efea.js";
-import { T as TextBoxNode } from "./subcomponents/TextBoxNode/index.5427cb75.js";
-import { H as HeaderNode } from "./subcomponents/HeaderNode/index.89e4eaab.js";
-import { a as ImageNode, Q as QRImageNode } from "../Image/index.b799c514.js";
-import { B as BodyNode } from "./subcomponents/BodyNode/index.319a3bb9.js";
-import { F as FooterNode } from "./subcomponents/FooterNode/index.9a19a7cb.js";
-import { P as PaperNode } from "./subcomponents/PaperNode/index.dd4ca449.js";
-import { P as PropertyValueNode } from "./subcomponents/PropertyValueNode/index.048d7ebf.js";
-import { G as GridNode } from "./subcomponents/GridNode/index.8d14e1b6.js";
-import { C as ChartNode } from "./subcomponents/ChartNode/index.990e164c.js";
-import { P as PagerNode, a as PageRender } from "../Page/index.5d34dc4d.js";
+import { D as DividerNode } from "./subcomponents/DividerNode/index.e58467c9.js";
+import { S as SectionNode } from "./subcomponents/SectionNode/index.879cf13d.js";
+import { T as TextBoxNode } from "./subcomponents/TextBoxNode/index.eb6af0ca.js";
+import { H as HeaderNode } from "./subcomponents/HeaderNode/index.e8b151ad.js";
+import { a as ImageNode, Q as QRImageNode } from "../Image/index.8cc036b1.js";
+import { B as BodyNode } from "./subcomponents/BodyNode/index.6792c353.js";
+import { F as FooterNode } from "./subcomponents/FooterNode/index.920b75c9.js";
+import { P as PaperNode } from "./subcomponents/PaperNode/index.bf199422.js";
+import { P as PropertyValueNode } from "./subcomponents/PropertyValueNode/index.44d436b9.js";
+import { G as GridNode } from "./subcomponents/GridNode/index.6c1ad53c.js";
+import { C as ChartNode } from "./subcomponents/ChartNode/index.eec6b4cd.js";
+import { P as PagerNode, a as PageRender } from "../Page/index.c1d4a319.js";
 import { useBase, evaluateWithContext } from "@m4l/core";
-import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, useImperativeHandle } from "react";
 import { useTheme } from "@mui/material/styles";
 const componentName = "M4LPrintingSystem";
@@ -85,9 +85,7 @@ const printingSystemUtilityClasses = () => {
     ...composedClasses
   };
 };
-const PrintingSystemRoot = styled("div")(({
-  theme
-}) => ({
+const PrintingSystemRoot = styled("div")(({ theme }) => ({
   ...theme.components?.M4LPrintingSystem?.styleOverrides
 }));
 const getSize = (value, unitSize) => {
@@ -98,16 +96,9 @@ const getSize = (value, unitSize) => {
   }
 };
 const FactoryRender = (props) => {
-  const {
-    data: parent
-  } = props;
-  const {
-    children,
-    ...otherProps
-  } = parent || {};
-  const {
-    sourceData
-  } = useBase();
+  const { data: parent } = props;
+  const { children, ...otherProps } = parent || {};
+  const { sourceData } = useBase();
   const strategiesComponents = {
     section: SectionNode,
     textBox: TextBoxNode,
@@ -127,23 +118,22 @@ const FactoryRender = (props) => {
     }
   };
   const Component = strategiesComponents[parent.type] ?? strategiesComponents.__default__;
-  return /* @__PURE__ */ jsxs(Component, {
-    ...otherProps,
-    children: [Array.isArray(children) && children.length > 0 ? children.map((subComponent, _id) => {
-      return /* @__PURE__ */ jsx(FactoryRender, {
-        data: subComponent
-      }, `${subComponent.key}-${Math.random().toString(36).substring(7)}`);
-    }) : null, typeof children === "string" ? evaluateWithContext(sourceData, children) : null]
-  });
+  return /* @__PURE__ */ jsxs(Component, { ...otherProps, children: [
+    Array.isArray(children) && children.length > 0 ? children.map((subComponent, _id) => {
+      return /* @__PURE__ */ jsx(
+        FactoryRender,
+        {
+          data: subComponent
+        },
+        `${subComponent.key}-${Math.random().toString(36).substring(7)}`
+      );
+    }) : null,
+    typeof children === "string" ? evaluateWithContext(sourceData, children) : null
+  ] });
 };
 const PrintingSystem = forwardRef((props, ref) => {
-  const {
-    templateData: nodeRoot,
-    sourceData,
-    className
-  } = props;
+  const { templateData: nodeRoot, sourceData, className } = props;
   const theme = useTheme();
-  console.log("sourceData", sourceData);
   const classes2 = printingSystemUtilityClasses();
   const listPages = Array.isArray(nodeRoot.pages) && nodeRoot.pages.length > 0 ? nodeRoot.pages : [];
   const rootRef = useRef(null);
@@ -154,11 +144,13 @@ const PrintingSystem = forwardRef((props, ref) => {
         const printWindow = window.open("", "_blank");
         if (printWindow) {
           const printDocument = printWindow.document;
-          printDocument.write("<html><head><title>Contenido a imprimir</title></head><body></body></html>");
+          printDocument.write(
+            "<html><head><title>Contenido a imprimir</title></head><body></body></html>"
+          );
           printDocument.body.appendChild(content.cloneNode(true));
           const styleElement = printDocument.createElement("style");
           styleElement.textContent = `
-                        ${theme.components?.M4LPrintingSystem?.styleOverrides} 
+                        ${theme.components?.M4LPrintingSystem?.styleOverrides}
                     `;
           printDocument.head.appendChild(styleElement);
           printDocument.close();
@@ -167,17 +159,12 @@ const PrintingSystem = forwardRef((props, ref) => {
       }
     }
   }));
-  const Header = () => /* @__PURE__ */ jsx(FactoryRender, {
-    data: nodeRoot.header[0]
-  });
-  const Footer = () => /* @__PURE__ */ jsx(FactoryRender, {
-    data: nodeRoot.footer[0]
-  });
-  return /* @__PURE__ */ jsx(PrintingSystemRoot, {
-    className: clsx(classes2.root, className),
-    ref: rootRef,
-    children: listPages.map((page, id) => {
-      return /* @__PURE__ */ jsx(PageRender, {
+  const Header = () => /* @__PURE__ */ jsx(FactoryRender, { data: nodeRoot.header[0] });
+  const Footer = () => /* @__PURE__ */ jsx(FactoryRender, { data: nodeRoot.footer[0] });
+  return /* @__PURE__ */ jsx(PrintingSystemRoot, { className: clsx(classes2.root, className), ref: rootRef, children: listPages.map((page, id) => {
+    return /* @__PURE__ */ jsx(
+      PageRender,
+      {
         data: page,
         id: id + 1,
         unitSize: nodeRoot.unitSizes,
@@ -187,9 +174,10 @@ const PrintingSystem = forwardRef((props, ref) => {
         FooterGeneral: Footer,
         sourceData,
         templateData: nodeRoot
-      }, page.key);
-    })
-  });
+      },
+      page.key
+    );
+  }) });
 });
 export {
   FactoryRender as F,

package/components/PrintingSystem/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const PrintingSystemRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/PrintingSystem/subcomponents/BodyNode/index.6792c353.js

@@ -0,0 +1,49 @@
+import { jsx } from "react/jsx-runtime";
+import { useBase } from "@m4l/core";
+import { c as classes, g as getSize } from "../../index.f51a00f8.js";
+import clsx from "clsx";
+const BodyNode = (props) => {
+  const {
+    children,
+    className,
+    direction = "row",
+    gap = "unset",
+    style,
+    width = "auto",
+    height = "auto",
+    paddingTop = "unset",
+    paddingRight = "unset",
+    paddingBottom = "unset",
+    paddingLeft = "unset",
+    alignX = "unset",
+    alignY = "unset",
+    grow = false
+  } = props;
+  const { unitSize } = useBase();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(classes.bodyNodeRoot, className),
+      style: {
+        flexDirection: direction,
+        gap: getSize(gap, unitSize),
+        width: getSize(width, unitSize),
+        height: getSize(height, unitSize),
+        minWidth: getSize(width, unitSize),
+        minHeight: getSize(height, unitSize),
+        paddingTop: getSize(paddingTop, unitSize),
+        paddingRight: getSize(paddingRight, unitSize),
+        paddingBottom: getSize(paddingBottom, unitSize),
+        paddingLeft: getSize(paddingLeft, unitSize),
+        justifyContent: direction === "row" ? alignX : alignY,
+        alignItems: direction === "row" ? alignY : alignX,
+        flex: grow ? 1 : "unset",
+        ...style
+      },
+      children
+    }
+  );
+};
+export {
+  BodyNode as B
+};

package/components/PrintingSystem/subcomponents/BodyNode/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SectionNode } from "../../types";
+import { SectionNode } from '../../types';
 export interface BodyNodeProps extends Omit<SectionNode, 'children' | 'type'> {
     children?: React.ReactNode;
 }

package/components/PrintingSystem/subcomponents/ChartNode/{index.990e164c.js → index.eec6b4cd.js}

@@ -1,24 +1,21 @@
-import { c as classes } from "../../index.27f1f209.js";
+import { jsx } from "react/jsx-runtime";
+import { c as classes } from "../../index.f51a00f8.js";
 import clsx from "clsx";
 import { createRef, useEffect } from "react";
 import { Chart, registerables } from "chart.js";
 import { ScatterWithErrorBarsController, LineWithErrorBarsChart, PointWithErrorBar } from "chartjs-chart-error-bars";
 import { useBase, getPropertyByString, evaluateWithContext } from "@m4l/core";
-import { jsx } from "react/jsx-runtime";
-Chart.register(ScatterWithErrorBarsController, LineWithErrorBarsChart, PointWithErrorBar, ...registerables);
+Chart.register(
+  ScatterWithErrorBarsController,
+  LineWithErrorBarsChart,
+  PointWithErrorBar,
+  ...registerables
+);
 const ChartNode = (props) => {
-  const {
-    style = {},
-    className = "",
-    points,
-    messageX,
-    messageY
-  } = props;
+  const { style = {}, className = "", points, messageX, messageY } = props;
   const canvasRef = createRef();
   const regexPattern = /\$\{([^{}]+)\}/g;
-  const {
-    sourceData
-  } = useBase();
+  const { sourceData } = useBase();
   const pointsMaybeString = typeof points === "string" && regexPattern.exec(points) || "";
   const formatPoints = typeof points === "string" ? getPropertyByString(sourceData, pointsMaybeString[1]) : points;
   const adjustedPoints = [];
@@ -29,11 +26,7 @@ const ChartNode = (props) => {
         const nextPoint = formatPoints[index + 1];
         const step = 0.5;
         for (let x = point.avg + step; x < nextPoint.avg; x += step) {
-          adjustedPoints.push({
-            avg: x,
-            correction: null,
-            uncertainty: null
-          });
+          adjustedPoints.push({ avg: x, correction: null, uncertainty: null });
         }
       }
     });
@@ -54,11 +47,13 @@ const ChartNode = (props) => {
         new LineWithErrorBarsChart(ctx, {
           data: {
             labels: Array.isArray(adjustedPoints) && adjustedPoints.length > 0 ? adjustedPoints.map((point) => point.avg) : [],
-            datasets: [{
-              data,
-              borderWidth: 0,
-              pointBorderWidth: 0
-            }]
+            datasets: [
+              {
+                data,
+                borderWidth: 0,
+                pointBorderWidth: 0
+              }
+            ]
           },
           options: {
             plugins: {
@@ -92,15 +87,16 @@ const ChartNode = (props) => {
       }
     }
   }, [canvasRef, points]);
-  return /* @__PURE__ */ jsx("div", {
-    className: clsx(classes.chartNodeRoot, className),
-    style: {
-      ...style
-    },
-    children: /* @__PURE__ */ jsx("canvas", {
-      ref: canvasRef
-    })
-  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(classes.chartNodeRoot, className),
+      style: {
+        ...style
+      },
+      children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef })
+    }
+  );
 };
 export {
   ChartNode as C

package/components/PrintingSystem/subcomponents/ChartNode/types.d.ts

@@ -1,3 +1,2 @@
 import { ChartNode } from '../../types';
-export interface ChartNodeProps extends Omit<ChartNode, 'children'> {
-}
+export declare type ChartNodeProps = Omit<ChartNode, 'children'>;