@m4l/components 0.1.7 → 0.1.9

package/commonjs.js

@@ -1,6 +1,6 @@
 import "react";
-import "react-dom";
 import "prop-types";
+import "react-dom";
 import "clsx";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getDefaultExportFromCjs(x) {

package/components/CommonActions/components/Actions/index.js

@@ -1,11 +1,17 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { styled } from "@mui/material/styles";
-import { I as IconButton$1 } from "../../../mui_extended/IconButton/index.js";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { u as useBase, a as useFilters, O as OriginalDataGridWrapperStyled } from "../../../DataGrid/index.js";
-import { P as Pager } from "../../../mui_extended/Pager/index.js";
+import "@mui/material/Button";
+import "../../../mui_extended/Button/index.js";
+import "react-hook-form";
+import "react-router-dom";
 import { IconButton, Tooltip, MenuItem, Skeleton, Checkbox } from "@mui/material";
 import { useState, useMemo, forwardRef, useRef, useImperativeHandle, useEffect, useCallback } from "react";
+import "../../../../contexts/ModalContext/index.js";
+import "@mui/lab";
+import { I as IconButton$1 } from "../../../mui_extended/IconButton/index.js";
+import { u as useBase, a as useFilters, O as OriginalDataGridWrapperStyled } from "../../../DataGrid/index.js";
+import { P as Pager } from "../../../mui_extended/Pager/index.js";
 import { D as DataGrid$1 } from "../../../../react-data-grid.js";
 import { u as useModal } from "../../../../hooks/useModal/index.js";
 import { A as ActionCancel } from "../ActionCancel/index.js";
@@ -13,12 +19,38 @@ import { A as ActionIntro } from "../ActionIntro/index.js";
 import { M as MenuPopover } from "../../../mui_extended/MenuPopover/index.js";
 import { I as Icon } from "../../../Icon/index.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
-import "@mui/material/Button";
-import "../../../mui_extended/Button/index.js";
-import "react-hook-form";
-import "react-router-dom";
-import "../../../../contexts/ModalContext/index.js";
-import "@mui/lab";
+const WrapperStandarActions = styled("div")(({
+  theme
+}) => ({
+  paddingTop: theme.spacing(3),
+  margin: theme.spacing(0, 1.5),
+  display: "flex",
+  flexDirection: "row",
+  justifyContent: "flex-end",
+  "& > button": {
+    marginLeft: "10px"
+  }
+}));
+const Actions$1 = (props) => {
+  const {
+    children
+  } = props;
+  return /* @__PURE__ */ jsx(WrapperStandarActions, {
+    id: "WrapperStandarActions",
+    children
+  });
+};
+function getCommonActionsDictionary() {
+  return ["common_actions"];
+}
+const defaultCommonActionsDictionary = {
+  common_actions: {
+    cancel: "Cancel",
+    intro: "Intro",
+    confirm_quit_title: "Confirm",
+    confirm_quit_msg: "Are your sure exit?"
+  }
+};
 const WrapperMenuActions = styled(IconButton)(() => ({}));
 const LabelMemuItem = styled("div")(({
   theme
@@ -574,26 +606,6 @@ const SKTWrapperColumnsSettings = styled("div")(({ theme }) => ({
   minWidth: theme.spacing(3.75),
   height: theme.spacing(3.75)
 }));
-const WrapperStandarActions = styled("div")(({
-  theme
-}) => ({
-  paddingTop: theme.spacing(3),
-  display: "flex",
-  flexDirection: "row",
-  justifyContent: "flex-end",
-  "& > button": {
-    marginLeft: "10px"
-  }
-}));
-const Actions$1 = (props) => {
-  const {
-    children
-  } = props;
-  return /* @__PURE__ */ jsx(WrapperStandarActions, {
-    id: "WrapperStandarActions",
-    children
-  });
-};
 function Settings() {
   const {
     openModal,
@@ -844,15 +856,4 @@ function Actions(props) {
     })]
   });
 }
-function getCommonActionsDictionary() {
-  return ["common_actions"];
-}
-const defaultCommonActionsDictionary = {
-  common_actions: {
-    cancel: "Cancel",
-    intro: "Intro",
-    confirm_quit_title: "Confirm",
-    confirm_quit_msg: "Are your sure exit?"
-  }
-};
 export { ActionsColumn as A, LabelMemuItem as L, MenuActions as M, PagerActions as P, Actions as a, Actions$1 as b, defaultCommonActionsDictionary as d, getCommonActionsDictionary as g };

package/components/DataGrid/components/editors/TextEditor/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { EditorProps } from 'react-data-grid';
+export declare const Input: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare function TextEditor<TRow, TSummaryRow>({ row, column, onRowChange, onClose, }: EditorProps<TRow, TSummaryRow>): JSX.Element;
+export declare function NumberEditor<TRow, TSummaryRow>({ row, column, onRowChange, onClose, }: EditorProps<TRow, TSummaryRow>): JSX.Element;
+export default TextEditor;

package/components/DataGrid/formatters/columnNestedValueFormatter/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ColumnNestedValueFormatterProps } from './types';
+export declare function columnNestedValueFormatter(props: ColumnNestedValueFormatterProps): (obProps: any) => JSX.Element;

package/components/DataGrid/formatters/columnNestedValueFormatter/types.d.ts

@@ -0,0 +1,5 @@
+import { ComponentType } from 'react';
+export interface ColumnNestedValueFormatterProps {
+    Component?: ComponentType;
+    fieldValue: string;
+}

package/components/DataGrid/formatters/columnPointsFormatter/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ColumnPointsFormatterProps } from './types';
+export declare function columnPointsFormatter(props: ColumnPointsFormatterProps): (obProps: any) => JSX.Element;

package/components/DataGrid/formatters/columnPointsFormatter/types.d.ts

@@ -0,0 +1,6 @@
+import { ComponentType } from 'react';
+export interface ColumnPointsFormatterProps {
+    Component?: ComponentType;
+    fieldValue: string;
+    fieldUnit: string;
+}

package/components/DataGrid/formatters/columnUncertaintyFormatter/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ColumnUncertaintyFormatterProps } from './types';
+export declare function columnUncertaintyFormatter(props: ColumnUncertaintyFormatterProps): (obProps: any) => JSX.Element;

package/components/DataGrid/formatters/columnUncertaintyFormatter/types.d.ts

@@ -0,0 +1,7 @@
+import { ComponentType } from 'react';
+export interface ColumnUncertaintyFormatterProps {
+    Component?: ComponentType;
+    fieldValue: string;
+    fieldUnit: string;
+    fieldSymbol: string;
+}

package/components/DataGrid/formatters/index.d.ts

@@ -0,0 +1,4 @@
+export { columnUncertaintyFormatter } from './columnUncertaintyFormatter';
+export { columnPointsFormatter } from './columnPointsFormatter';
+export { columnNestedValueFormatter } from './columnNestedValueFormatter';
+export type { ColumnUncertaintyFormatterProps } from './columnUncertaintyFormatter/types';

package/components/DataGrid/index.js

@@ -5,7 +5,7 @@ import { useDrag, useDrop, DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { SvgIcon, Checkbox, InputBase, Skeleton } from "@mui/material";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { voidFunction, useModuleDictionary } from "@m4l/core";
+import { voidFunction, useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { A as ActionsColumn, a as Actions } from "../CommonActions/components/Actions/index.js";
 import { g as getModalDialogComponentsDictionary, d as defaultModalDialogDictionary } from "../ModalDialog/index.js";
 import { g as getPagerComponentsDictionary, d as defaultPagerDictionary } from "../mui_extended/Pager/index.js";
@@ -816,7 +816,8 @@ function Table(props) {
     isMultipleSelect = false,
     columns,
     rows,
-    withActions
+    withActions,
+    onRowsChange
   } = props;
   const {
     finalColumns,
@@ -908,6 +909,7 @@ function Table(props) {
           onSortColumnsChange: onChangeSort,
           onColumnResize,
           rows: finalRows,
+          onRowsChange,
           selectedRows,
           onSelectedRowsChange: onInternalSelectedRowsChange,
           onRowClick,
@@ -928,16 +930,17 @@ function Table(props) {
 }
 function DataGrid(props) {
   const {
-    isSkeleton = false,
     withActions = true,
     rows,
     columns,
     actionsProps,
     rowActionsGetter,
+    onRowsChange,
     rowHeaderHeights = [44, 63, 75],
     rowHeights = [36, 52, 67],
     initialRowHeightVariant = "compact"
   } = props;
+  const isSkeleton = useModuleSkeleton();
   return /* @__PURE__ */ jsx(WrapperGrid, {
     id: `WrapperGrid_${props.id}`,
     children: /* @__PURE__ */ jsx(BaseProvider, {
@@ -961,6 +964,7 @@ function DataGrid(props) {
           isMultipleSelect: props.isMultipleSelect,
           selectedRows: props.selectedRows,
           rowKeyGetter: props.rowKeyGetter,
+          onRowsChange,
           onRowsSelectedChange: props.onRowsSelectedChange
         })]
       })
@@ -999,4 +1003,62 @@ function getDataGridComponentsDictionary() {
   ...defaultPagerDictionary,
   ...defaultModalDialogDictionary
 });
-export { DataGrid as D, OriginalDataGridWrapperStyled as O, useFilters as a, getDataGridComponentsDictionary as g, useBase as u };
+const Input = styled("input")(() => ({
+  appearance: "none",
+  boxSizing: "border-box",
+  inlineSize: "100%",
+  blockSize: "100%",
+  paddingBlock: "0",
+  verticalAlign: "top",
+  textAlign: "right",
+  color: "var(--rdg-color)",
+  backgroundColor: "var(--rdg-background-color)",
+  fontFamily: "inherit",
+  "&:focus": {
+    outline: "none"
+  },
+  "&::placeholder": {
+    color: "#999",
+    opacity: "1"
+  }
+}));
+function autoFocusAndSelect(input) {
+  input?.focus();
+  input?.select();
+}
+function TextEditor({
+  row,
+  column,
+  onRowChange,
+  onClose
+}) {
+  return /* @__PURE__ */ jsx(Input, {
+    className: "rdg-text-editor",
+    ref: autoFocusAndSelect,
+    value: row[column.key],
+    onChange: (event) => onRowChange({
+      ...row,
+      [column.key]: event.target.value
+    }),
+    onBlur: () => onClose(true)
+  });
+}
+function NumberEditor({
+  row,
+  column,
+  onRowChange,
+  onClose
+}) {
+  return /* @__PURE__ */ jsx(Input, {
+    className: "rdg-text-editor",
+    ref: autoFocusAndSelect,
+    type: "number",
+    value: row[column.key],
+    onChange: (event) => onRowChange({
+      ...row,
+      [column.key]: event.target.value !== "" ? Number(event.target.value) : ""
+    }),
+    onBlur: () => onClose(true)
+  });
+}
+export { DataGrid as D, NumberEditor as N, OriginalDataGridWrapperStyled as O, TextEditor as T, useFilters as a, getDataGridComponentsDictionary as g, useBase as u };

package/components/DataGrid/types.d.ts

@@ -1,7 +1,10 @@
 /// <reference types="react" />
-import { Column } from 'react-data-grid';
+import { Maybe } from '@m4l/core';
+import type { Column, RowsChangeData, FormatterProps } from 'react-data-grid';
 import type { MenuAction } from '../mui_extended/MenuActions/types';
 import { ActionsProps } from './components/Actions/types';
+export declare type GridFormatterPropss<T, SR> = FormatterProps<T, SR>;
+export type { columnUncertaintyFormatter, columnPointsFormatter, columnNestedValueFormatter, } from './formatters';
 export declare type ColumnType = 'text' | 'date' | 'number' | 'boolean' | 'custom';
 export declare type ColumnAlign = 'left' | 'center' | 'right';
 export declare interface GridRow {
@@ -38,7 +41,6 @@ export declare type RowHeightVariants = 'standard' | 'compact' | 'confortable';
 export declare type RowHeights = number | number[];
 export declare interface GridProps<TRow, TSummaryRow> {
     id: RowKey;
-    isSkeleton?: boolean;
     withActions?: boolean;
     columns: readonly Column<TRow, TSummaryRow>[];
     rows: TRow[];
@@ -49,6 +51,7 @@ export declare interface GridProps<TRow, TSummaryRow> {
     rowKeyGetter: (row: TRow) => RowKey;
     isMultipleSelect?: boolean;
     selectedRows?: Set<RowKey>;
+    onRowsChange?: Maybe<(rows: TRow[], data: RowsChangeData<TRow, TSummaryRow>) => void>;
     onRowsSelectedChange?: (mapRowsSelected: ReadonlySet<RowKey>, rawRowsSelected: TRow[]) => void;
 }
 export declare interface DataGridProps<TRow, TSummaryRow> extends GridProps<TRow, TSummaryRow> {

package/components/DynamicFilter/index.js

@@ -13,6 +13,14 @@ import "../hook-form/RHFCheckbox/index.js";
 import { R as RHFDateTime } from "../hook-form/RHFDateTime/index.js";
 import "@mui/x-date-pickers";
 import { R as RHFTextField } from "../hook-form/RHFTextField/index.js";
+import "../../index.js";
+import { I as Icon } from "../Icon/index.js";
+import { L as LabelMemuItem, b as Actions, g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.js";
+import "@mui/material/Button";
+import { F as FilterButton } from "../mui_extended/Button/index.js";
+import "react-router-dom";
+import "../../contexts/ModalContext/index.js";
+import "@mui/lab";
 import "../../lodash.js";
 import "react-dropzone";
 import "../../react-lazy-load-image-component.js";
@@ -20,16 +28,9 @@ import "../Image/index.js";
 import "../hook-form/RHFUpload/index.js";
 import { I as IconButton } from "../mui_extended/IconButton/index.js";
 import "simplebar/dist/simplebar.min.css";
-import { F as FilterButton } from "../mui_extended/Button/index.js";
-import { L as LabelMemuItem, b as Actions, g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.js";
 import { M as MenuPopover } from "../mui_extended/MenuPopover/index.js";
-import { I as Icon } from "../Icon/index.js";
 import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.js";
 import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.js";
-import "react-router-dom";
-import "@mui/material/Button";
-import "../../contexts/ModalContext/index.js";
-import "@mui/lab";
 import { useResponsiveDesktop } from "@m4l/graphics";
 const WrapperApplyedFilters = styled("div")(({
   theme

package/components/ErrorLabel/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ErrorLabelProps } from './types';
+export declare const ErrorLabel: (props: ErrorLabelProps) => JSX.Element;

package/components/ErrorLabel/styles.d.ts

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

package/components/ErrorLabel/types.d.ts

@@ -0,0 +1,3 @@
+export interface ErrorLabelProps {
+    message: string;
+}

package/components/LanguagePopover/index.js

@@ -6,10 +6,12 @@ import { useModuleSkeleton } from "@m4l/core";
 import "../Icon/index.js";
 import "@mui/material/styles";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import "../mui_extended/Accordion/index.js";
 import "../mui_extended/Avatar/index.js";
 import "react-router-dom";
-import "@mui/lab";
+import "@mui/material/Button";
 import "../mui_extended/Button/index.js";
+import "@mui/lab";
 import { M as MenuPopover } from "../mui_extended/MenuPopover/index.js";
 import "../CommonActions/components/Actions/index.js";
 import "../mui_extended/Pager/index.js";

package/components/ModalDialog/index.js

@@ -71,7 +71,7 @@ const Header = (props) => {
   const iconSrcWarning = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/warning.svg`;
   const iconSrcError = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/error.svg`;
   const iconSrcInfo = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/info.svg`;
-  const iconDefault = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/icon_bar_tittle.svg`;
+  const iconDefault = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/icon_bar_title.svg`;
   return /* @__PURE__ */ jsxs(Header$1, {
     id: "Header",
     className: "draggable-dialog-title",

package/components/NoItemSelected/index.d.ts

@@ -1,3 +1,2 @@
 /// <reference types="react" />
-import { NoItemSelectedProps } from './types';
-export declare function NoItemSelected(props: NoItemSelectedProps): JSX.Element;
+export declare function NoItemSelected(): JSX.Element;

package/components/NoItemSelected/index.js

@@ -1,4 +1,4 @@
-import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { useEnvironment, useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { styled } from "@mui/material/styles";
 import { I as Image } from "../Image/index.js";
 import { Skeleton } from "@mui/material";
@@ -34,10 +34,7 @@ const WrapperSKTNoItemSelected = styled("div")(() => ({
   mask: `url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 70 70' style='enable-background:new 0 0 70 70%3B' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M45 8.7c1.4-1.5 3.4-2.3 5.4-2.3s3.9 0.8 5.4 2.3s2.4 3.5 2.5 5.7c0 2.2-0.9 4.2-2.4 5.7s-3.5 2.3-5.5 2.2c-2.1 0.1-4-0.7-5.5-2.2c-1.4-1.5-2.3-3.5-2.4-5.7C42.6 12.2 43.5 10.2 45 8.7z'/%3E%3Cpath d='M68.4 62.1c-0.3 0.5-0.7 0.8-1.2 1.1s-1 0.4-1.6 0.4H4.3c-0.6 0-1.1-0.1-1.6-0.4s-0.9-0.6-1.2-1.1c-0.2-0.5-0.4-1-0.4-1.5s0.1-1.1 0.4-1.5l23-36.4c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l11.5 18.2c0.2 0.3 0.5 0.5 0.8 0.7c0.3 0.2 0.6 0.3 1 0.3c0.3 0 0.7-0.1 1-0.3c0.3-0.2 0.6-0.4 0.8-0.7l3.1-4.9c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l14.6 23.1c0.3 0.5 0.3 1 0.3 1.5S68.7 61.7 68.4 62.1z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain`,
   WebkitMask: `url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 70 70' style='enable-background:new 0 0 70 70%3B' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M45 8.7c1.4-1.5 3.4-2.3 5.4-2.3s3.9 0.8 5.4 2.3s2.4 3.5 2.5 5.7c0 2.2-0.9 4.2-2.4 5.7s-3.5 2.3-5.5 2.2c-2.1 0.1-4-0.7-5.5-2.2c-1.4-1.5-2.3-3.5-2.4-5.7C42.6 12.2 43.5 10.2 45 8.7z'/%3E%3Cpath d='M68.4 62.1c-0.3 0.5-0.7 0.8-1.2 1.1s-1 0.4-1.6 0.4H4.3c-0.6 0-1.1-0.1-1.6-0.4s-0.9-0.6-1.2-1.1c-0.2-0.5-0.4-1-0.4-1.5s0.1-1.1 0.4-1.5l23-36.4c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l11.5 18.2c0.2 0.3 0.5 0.5 0.8 0.7c0.3 0.2 0.6 0.3 1 0.3c0.3 0 0.7-0.1 1-0.3c0.3-0.2 0.6-0.4 0.8-0.7l3.1-4.9c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l14.6 23.1c0.3 0.5 0.3 1 0.3 1.5S68.7 61.7 68.4 62.1z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain`
 }));
-function NoItemSelected(props) {
-  const {
-    isSkeleton
-  } = props;
+function NoItemSelected() {
   const {
     host_static_assets,
     environment_assets
@@ -45,6 +42,7 @@ function NoItemSelected(props) {
   const {
     getLabel
   } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
   const src = useMemo(() => {
     return `${host_static_assets}/${environment_assets}/frontend/components/no_item_selected/assets/icons/no_selected.svg`;
   }, []);

package/components/PaperForm/components/Header.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { HeaderProps } from '../types';
+export declare const Header: (props: HeaderProps) => JSX.Element;

package/components/PaperForm/index.js

@@ -1,7 +1,8 @@
-import { Skeleton } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useModuleSkeleton } from "@m4l/core";
+import { Skeleton } from "@mui/material";
 import { I as Icon } from "../Icon/index.js";
+import { jsxs, jsx } from "react/jsx-runtime";
 const WrapperPaper = styled("div")(({
   theme
 }) => ({
@@ -16,7 +17,7 @@ const WrapperPaper = styled("div")(({
     backgroundColor: theme.palette.background.paper
   }
 }));
-const Header = styled("div")(({
+const HeaderContainer = styled("div")(({
   theme
 }) => ({
   display: "flex",
@@ -50,7 +51,7 @@ const Content = styled("div")(() => ({
   flexGrow: 1,
   position: "relative"
 }));
-const SkPaperFormHeader = styled("div")(({
+const SkTPaperFormHeader = styled("div")(({
   theme
 }) => ({
   width: "auto",
@@ -61,58 +62,49 @@ const SkPaperFormHeader = styled("div")(({
   borderBottom: `1px solid ${theme.palette.divider}`,
   marginBottom: `${theme.spacing(3)}`
 }));
-const PaperFormBoddy = styled("div")(() => ({
-  display: "flex",
-  flexDirection: "column",
-  flexGrow: "1"
-}));
-function SKTPaperForm(prop) {
+const Header = (props) => {
   const {
-    children
-  } = prop;
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsxs(SkPaperFormHeader, {
-      children: [/* @__PURE__ */ jsx(Skeleton, {
-        variant: "circular",
-        width: 16,
-        height: 16
-      }), /* @__PURE__ */ jsx(Skeleton, {
-        variant: "text",
-        width: 68,
-        height: 14
-      })]
-    }), /* @__PURE__ */ jsx(PaperFormBoddy, {
-      children
+    urlIcon,
+    title
+  } = props;
+  const isSkeleton = useModuleSkeleton();
+  return isSkeleton ? /* @__PURE__ */ jsxs(SkTPaperFormHeader, {
+    children: [/* @__PURE__ */ jsx(Skeleton, {
+      variant: "circular",
+      width: 16,
+      height: 16
+    }), /* @__PURE__ */ jsx(Skeleton, {
+      variant: "text",
+      width: 68,
+      height: 14
     })]
+  }) : /* @__PURE__ */ jsx(HeaderContainer, {
+    id: "Header",
+    children: /* @__PURE__ */ jsxs(IconTitleContainer, {
+      className: "draggable-dialog-title",
+      children: [/* @__PURE__ */ jsx(IconHeader, {
+        children: /* @__PURE__ */ jsx(Icon, {
+          src: urlIcon
+        })
+      }), title]
+    })
   });
-}
+};
 function PaperForm(props) {
   const {
     urlIcon,
-    tittle,
-    children,
-    isSkeleton = false
+    title,
+    children
   } = props;
-  return /* @__PURE__ */ jsx(WrapperPaper, {
+  return /* @__PURE__ */ jsxs(WrapperPaper, {
     id: "ContainerPropertyValue",
-    children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, {
-      children: [/* @__PURE__ */ jsx(Header, {
-        id: "Header",
-        children: /* @__PURE__ */ jsxs(IconTitleContainer, {
-          className: "draggable-dialog-title",
-          children: [/* @__PURE__ */ jsx(IconHeader, {
-            children: /* @__PURE__ */ jsx(Icon, {
-              src: urlIcon
-            })
-          }), tittle]
-        })
-      }), /* @__PURE__ */ jsx(Content, {
-        id: "Content",
-        children
-      })]
-    }) : /* @__PURE__ */ jsx(SKTPaperForm, {
+    children: [/* @__PURE__ */ jsx(Header, {
+      urlIcon,
+      title
+    }), /* @__PURE__ */ jsx(Content, {
+      id: "Content",
       children
-    })
+    })]
   });
 }
 export { PaperForm as P };

package/components/PaperForm/styles.d.ts

@@ -1,8 +1,7 @@
 /// <reference types="react" />
 export declare const WrapperPaper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Header: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const HeaderContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const IconTitleContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const IconHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Content: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const SkPaperFormHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const PaperFormBoddy: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SkTPaperFormHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/PaperForm/types.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 export interface PaperFormProps {
-    isSkeleton?: boolean;
     urlIcon: string;
-    tittle: string;
+    title: string;
     children: ReactNode;
 }
+export declare type HeaderProps = Omit<PaperFormProps, 'children'>;