@m4l/components 0.1.8 → 0.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/commonjs.js +1 -1
  2. package/components/CommonActions/components/Actions/index.js +42 -41
  3. package/components/DataGrid/formatters/columnNestedValueFormatter/index.d.ts +3 -0
  4. package/components/DataGrid/formatters/columnNestedValueFormatter/types.d.ts +5 -0
  5. package/components/DataGrid/formatters/columnPointsFormatter/index.d.ts +3 -0
  6. package/components/DataGrid/formatters/columnPointsFormatter/types.d.ts +6 -0
  7. package/components/DataGrid/formatters/columnUncertaintyFormatter/index.d.ts +3 -0
  8. package/components/DataGrid/formatters/columnUncertaintyFormatter/types.d.ts +7 -0
  9. package/components/DataGrid/formatters/index.d.ts +4 -0
  10. package/components/DataGrid/types.d.ts +3 -1
  11. package/components/DynamicFilter/index.js +8 -7
  12. package/components/ErrorLabel/index.d.ts +3 -0
  13. package/components/ErrorLabel/styles.d.ts +2 -0
  14. package/components/ErrorLabel/types.d.ts +3 -0
  15. package/components/LanguagePopover/index.js +1 -0
  16. package/components/PaperForm/components/Header.d.ts +3 -0
  17. package/components/PaperForm/index.js +37 -46
  18. package/components/PaperForm/styles.d.ts +2 -3
  19. package/components/PaperForm/types.d.ts +1 -0
  20. package/components/PropertyValue/index.js +35 -24
  21. package/components/PropertyValue/styles.d.ts +3 -4
  22. package/components/PropertyValue/types.d.ts +8 -8
  23. package/components/animate/variants/bounce.d.ts +1 -1
  24. package/components/animate/variants/container.d.ts +1 -1
  25. package/components/animate/variants/fade.d.ts +1 -1
  26. package/components/animate/variants/transition.d.ts +3 -3
  27. package/components/formatters/BooleanFormatter/index.js +4 -3
  28. package/components/formatters/BooleanFormatter/types.d.ts +1 -1
  29. package/components/formatters/PointsFormatter/index.d.ts +3 -0
  30. package/components/formatters/PointsFormatter/types.d.ts +7 -0
  31. package/components/formatters/PriceFormatter/index.d.ts +3 -0
  32. package/components/formatters/PriceFormatter/types.d.ts +5 -0
  33. package/components/formatters/UncertaintyFormatter/index.d.ts +3 -0
  34. package/components/formatters/UncertaintyFormatter/types.d.ts +14 -0
  35. package/components/formatters/index.d.ts +4 -0
  36. package/components/formatters/index.js +100 -4
  37. package/components/hook-form/FormProvider/index.js +19 -7
  38. package/components/hook-form/FormProvider/types.d.ts +4 -1
  39. package/components/hook-form/RHFAutocompleteAsync/index.js +0 -1
  40. package/components/hook-form/RHFCheckbox/index.js +34 -29
  41. package/components/hook-form/RHFCheckbox/styles.d.ts +12 -1
  42. package/components/hook-form/RHFPeriod/dictionary.d.ts +3 -0
  43. package/components/hook-form/RHFPeriod/index.d.ts +3 -0
  44. package/components/hook-form/RHFPeriod/styles.d.ts +6 -0
  45. package/components/hook-form/RHFPeriod/types.d.ts +29 -0
  46. package/components/hook-form/RHFUpload/index.js +2 -3
  47. package/components/hook-form/index.d.ts +4 -0
  48. package/components/index.d.ts +4 -1
  49. package/components/mui_extended/Accordion/components/AccordionLabel.d.ts +3 -0
  50. package/components/mui_extended/Accordion/index.js +68 -8
  51. package/components/mui_extended/Accordion/styles.d.ts +4 -0
  52. package/components/mui_extended/Accordion/types.d.ts +4 -0
  53. package/components/mui_extended/Tab/index.d.ts +2 -1
  54. package/components/mui_extended/Tab/types.d.ts +5 -0
  55. package/hooks/index.d.ts +2 -0
  56. package/hooks/useFormAddEdit/index.d.ts +6 -0
  57. package/hooks/useFormAddEdit/types.d.ts +8 -0
  58. package/index.d.ts +1 -1
  59. package/index.js +289 -19
  60. package/package.json +3 -3
  61. package/components/PaperForm/skeleton.d.ts +0 -6
  62. package/components/hook-form/RHFCheckbox/skeleton.d.ts +0 -2
package/commonjs.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import "react";
2
- import "react-dom";
3
2
  import "prop-types";
3
+ import "react-dom";
4
4
  import "clsx";
5
5
  var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
6
6
  function getDefaultExportFromCjs(x) {
@@ -1,11 +1,17 @@
1
+ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
1
2
  import { styled } from "@mui/material/styles";
2
- import { I as IconButton$1 } from "../../../mui_extended/IconButton/index.js";
3
3
  import { useEnvironment, useModuleDictionary } from "@m4l/core";
4
- import { jsxs, Fragment, jsx } from "react/jsx-runtime";
5
- import { u as useBase, a as useFilters, O as OriginalDataGridWrapperStyled } from "../../../DataGrid/index.js";
6
- import { P as Pager } from "../../../mui_extended/Pager/index.js";
4
+ import "@mui/material/Button";
5
+ import "../../../mui_extended/Button/index.js";
6
+ import "react-hook-form";
7
+ import "react-router-dom";
7
8
  import { IconButton, Tooltip, MenuItem, Skeleton, Checkbox } from "@mui/material";
8
9
  import { useState, useMemo, forwardRef, useRef, useImperativeHandle, useEffect, useCallback } from "react";
10
+ import "../../../../contexts/ModalContext/index.js";
11
+ import "@mui/lab";
12
+ import { I as IconButton$1 } from "../../../mui_extended/IconButton/index.js";
13
+ import { u as useBase, a as useFilters, O as OriginalDataGridWrapperStyled } from "../../../DataGrid/index.js";
14
+ import { P as Pager } from "../../../mui_extended/Pager/index.js";
9
15
  import { D as DataGrid$1 } from "../../../../react-data-grid.js";
10
16
  import { u as useModal } from "../../../../hooks/useModal/index.js";
11
17
  import { A as ActionCancel } from "../ActionCancel/index.js";
@@ -13,12 +19,38 @@ import { A as ActionIntro } from "../ActionIntro/index.js";
13
19
  import { M as MenuPopover } from "../../../mui_extended/MenuPopover/index.js";
14
20
  import { I as Icon } from "../../../Icon/index.js";
15
21
  import { useResponsiveDesktop } from "@m4l/graphics";
16
- import "@mui/material/Button";
17
- import "../../../mui_extended/Button/index.js";
18
- import "react-hook-form";
19
- import "react-router-dom";
20
- import "../../../../contexts/ModalContext/index.js";
21
- import "@mui/lab";
22
+ const WrapperStandarActions = styled("div")(({
23
+ theme
24
+ }) => ({
25
+ paddingTop: theme.spacing(3),
26
+ margin: theme.spacing(0, 1.5),
27
+ display: "flex",
28
+ flexDirection: "row",
29
+ justifyContent: "flex-end",
30
+ "& > button": {
31
+ marginLeft: "10px"
32
+ }
33
+ }));
34
+ const Actions$1 = (props) => {
35
+ const {
36
+ children
37
+ } = props;
38
+ return /* @__PURE__ */ jsx(WrapperStandarActions, {
39
+ id: "WrapperStandarActions",
40
+ children
41
+ });
42
+ };
43
+ function getCommonActionsDictionary() {
44
+ return ["common_actions"];
45
+ }
46
+ const defaultCommonActionsDictionary = {
47
+ common_actions: {
48
+ cancel: "Cancel",
49
+ intro: "Intro",
50
+ confirm_quit_title: "Confirm",
51
+ confirm_quit_msg: "Are your sure exit?"
52
+ }
53
+ };
22
54
  const WrapperMenuActions = styled(IconButton)(() => ({}));
23
55
  const LabelMemuItem = styled("div")(({
24
56
  theme
@@ -574,26 +606,6 @@ const SKTWrapperColumnsSettings = styled("div")(({ theme }) => ({
574
606
  minWidth: theme.spacing(3.75),
575
607
  height: theme.spacing(3.75)
576
608
  }));
577
- const WrapperStandarActions = styled("div")(({
578
- theme
579
- }) => ({
580
- paddingTop: theme.spacing(3),
581
- display: "flex",
582
- flexDirection: "row",
583
- justifyContent: "flex-end",
584
- "& > button": {
585
- marginLeft: "10px"
586
- }
587
- }));
588
- const Actions$1 = (props) => {
589
- const {
590
- children
591
- } = props;
592
- return /* @__PURE__ */ jsx(WrapperStandarActions, {
593
- id: "WrapperStandarActions",
594
- children
595
- });
596
- };
597
609
  function Settings() {
598
610
  const {
599
611
  openModal,
@@ -844,15 +856,4 @@ function Actions(props) {
844
856
  })]
845
857
  });
846
858
  }
847
- function getCommonActionsDictionary() {
848
- return ["common_actions"];
849
- }
850
- const defaultCommonActionsDictionary = {
851
- common_actions: {
852
- cancel: "Cancel",
853
- intro: "Intro",
854
- confirm_quit_title: "Confirm",
855
- confirm_quit_msg: "Are your sure exit?"
856
- }
857
- };
858
859
  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 };
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ import { ColumnNestedValueFormatterProps } from './types';
3
+ export declare function columnNestedValueFormatter(props: ColumnNestedValueFormatterProps): (obProps: any) => JSX.Element;
@@ -0,0 +1,5 @@
1
+ import { ComponentType } from 'react';
2
+ export interface ColumnNestedValueFormatterProps {
3
+ Component?: ComponentType;
4
+ fieldValue: string;
5
+ }
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ import { ColumnPointsFormatterProps } from './types';
3
+ export declare function columnPointsFormatter(props: ColumnPointsFormatterProps): (obProps: any) => JSX.Element;
@@ -0,0 +1,6 @@
1
+ import { ComponentType } from 'react';
2
+ export interface ColumnPointsFormatterProps {
3
+ Component?: ComponentType;
4
+ fieldValue: string;
5
+ fieldUnit: string;
6
+ }
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ import { ColumnUncertaintyFormatterProps } from './types';
3
+ export declare function columnUncertaintyFormatter(props: ColumnUncertaintyFormatterProps): (obProps: any) => JSX.Element;
@@ -0,0 +1,7 @@
1
+ import { ComponentType } from 'react';
2
+ export interface ColumnUncertaintyFormatterProps {
3
+ Component?: ComponentType;
4
+ fieldValue: string;
5
+ fieldUnit: string;
6
+ fieldSymbol: string;
7
+ }
@@ -0,0 +1,4 @@
1
+ export { columnUncertaintyFormatter } from './columnUncertaintyFormatter';
2
+ export { columnPointsFormatter } from './columnPointsFormatter';
3
+ export { columnNestedValueFormatter } from './columnNestedValueFormatter';
4
+ export type { ColumnUncertaintyFormatterProps } from './columnUncertaintyFormatter/types';
@@ -1,8 +1,10 @@
1
1
  /// <reference types="react" />
2
2
  import { Maybe } from '@m4l/core';
3
- import type { Column, RowsChangeData } from 'react-data-grid';
3
+ import type { Column, RowsChangeData, FormatterProps } from 'react-data-grid';
4
4
  import type { MenuAction } from '../mui_extended/MenuActions/types';
5
5
  import { ActionsProps } from './components/Actions/types';
6
+ export declare type GridFormatterPropss<T, SR> = FormatterProps<T, SR>;
7
+ export type { columnUncertaintyFormatter, columnPointsFormatter, columnNestedValueFormatter, } from './formatters';
6
8
  export declare type ColumnType = 'text' | 'date' | 'number' | 'boolean' | 'custom';
7
9
  export declare type ColumnAlign = 'left' | 'center' | 'right';
8
10
  export declare interface GridRow {
@@ -13,6 +13,14 @@ import "../hook-form/RHFCheckbox/index.js";
13
13
  import { R as RHFDateTime } from "../hook-form/RHFDateTime/index.js";
14
14
  import "@mui/x-date-pickers";
15
15
  import { R as RHFTextField } from "../hook-form/RHFTextField/index.js";
16
+ import "../../index.js";
17
+ import { I as Icon } from "../Icon/index.js";
18
+ import { L as LabelMemuItem, b as Actions, g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.js";
19
+ import "@mui/material/Button";
20
+ import { F as FilterButton } from "../mui_extended/Button/index.js";
21
+ import "react-router-dom";
22
+ import "../../contexts/ModalContext/index.js";
23
+ import "@mui/lab";
16
24
  import "../../lodash.js";
17
25
  import "react-dropzone";
18
26
  import "../../react-lazy-load-image-component.js";
@@ -20,16 +28,9 @@ import "../Image/index.js";
20
28
  import "../hook-form/RHFUpload/index.js";
21
29
  import { I as IconButton } from "../mui_extended/IconButton/index.js";
22
30
  import "simplebar/dist/simplebar.min.css";
23
- import { F as FilterButton } from "../mui_extended/Button/index.js";
24
- import { L as LabelMemuItem, b as Actions, g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.js";
25
31
  import { M as MenuPopover } from "../mui_extended/MenuPopover/index.js";
26
- import { I as Icon } from "../Icon/index.js";
27
32
  import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.js";
28
33
  import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.js";
29
- import "react-router-dom";
30
- import "@mui/material/Button";
31
- import "../../contexts/ModalContext/index.js";
32
- import "@mui/lab";
33
34
  import { useResponsiveDesktop } from "@m4l/graphics";
34
35
  const WrapperApplyedFilters = styled("div")(({
35
36
  theme
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ import { ErrorLabelProps } from './types';
3
+ export declare const ErrorLabel: (props: ErrorLabelProps) => JSX.Element;
@@ -0,0 +1,2 @@
1
+ /// <reference types="react" />
2
+ export declare const Wrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
@@ -0,0 +1,3 @@
1
+ export interface ErrorLabelProps {
2
+ message: string;
3
+ }
@@ -6,6 +6,7 @@ import { useModuleSkeleton } from "@m4l/core";
6
6
  import "../Icon/index.js";
7
7
  import "@mui/material/styles";
8
8
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
9
+ import "../mui_extended/Accordion/index.js";
9
10
  import "../mui_extended/Avatar/index.js";
10
11
  import "react-router-dom";
11
12
  import "@mui/material/Button";
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ import { HeaderProps } from '../types';
3
+ export declare const Header: (props: HeaderProps) => JSX.Element;
@@ -1,8 +1,8 @@
1
- import { Skeleton } from "@mui/material";
2
1
  import { styled } from "@mui/material/styles";
3
- import { jsxs, Fragment, jsx } from "react/jsx-runtime";
4
- import { I as Icon } from "../Icon/index.js";
5
2
  import { useModuleSkeleton } from "@m4l/core";
3
+ import { Skeleton } from "@mui/material";
4
+ import { I as Icon } from "../Icon/index.js";
5
+ import { jsxs, jsx } from "react/jsx-runtime";
6
6
  const WrapperPaper = styled("div")(({
7
7
  theme
8
8
  }) => ({
@@ -17,7 +17,7 @@ const WrapperPaper = styled("div")(({
17
17
  backgroundColor: theme.palette.background.paper
18
18
  }
19
19
  }));
20
- const Header = styled("div")(({
20
+ const HeaderContainer = styled("div")(({
21
21
  theme
22
22
  }) => ({
23
23
  display: "flex",
@@ -51,7 +51,7 @@ const Content = styled("div")(() => ({
51
51
  flexGrow: 1,
52
52
  position: "relative"
53
53
  }));
54
- const SkPaperFormHeader = styled("div")(({
54
+ const SkTPaperFormHeader = styled("div")(({
55
55
  theme
56
56
  }) => ({
57
57
  width: "auto",
@@ -62,58 +62,49 @@ const SkPaperFormHeader = styled("div")(({
62
62
  borderBottom: `1px solid ${theme.palette.divider}`,
63
63
  marginBottom: `${theme.spacing(3)}`
64
64
  }));
65
- const PaperFormBoddy = styled("div")(() => ({
66
- display: "flex",
67
- flexDirection: "column",
68
- flexGrow: "1"
69
- }));
70
- function SKTPaperForm(prop) {
65
+ const Header = (props) => {
71
66
  const {
72
- children
73
- } = prop;
74
- return /* @__PURE__ */ jsxs(Fragment, {
75
- children: [/* @__PURE__ */ jsxs(SkPaperFormHeader, {
76
- children: [/* @__PURE__ */ jsx(Skeleton, {
77
- variant: "circular",
78
- width: 16,
79
- height: 16
80
- }), /* @__PURE__ */ jsx(Skeleton, {
81
- variant: "text",
82
- width: 68,
83
- height: 14
84
- })]
85
- }), /* @__PURE__ */ jsx(PaperFormBoddy, {
86
- children
67
+ urlIcon,
68
+ title
69
+ } = props;
70
+ const isSkeleton = useModuleSkeleton();
71
+ return isSkeleton ? /* @__PURE__ */ jsxs(SkTPaperFormHeader, {
72
+ children: [/* @__PURE__ */ jsx(Skeleton, {
73
+ variant: "circular",
74
+ width: 16,
75
+ height: 16
76
+ }), /* @__PURE__ */ jsx(Skeleton, {
77
+ variant: "text",
78
+ width: 68,
79
+ height: 14
87
80
  })]
81
+ }) : /* @__PURE__ */ jsx(HeaderContainer, {
82
+ id: "Header",
83
+ children: /* @__PURE__ */ jsxs(IconTitleContainer, {
84
+ className: "draggable-dialog-title",
85
+ children: [/* @__PURE__ */ jsx(IconHeader, {
86
+ children: /* @__PURE__ */ jsx(Icon, {
87
+ src: urlIcon
88
+ })
89
+ }), title]
90
+ })
88
91
  });
89
- }
92
+ };
90
93
  function PaperForm(props) {
91
94
  const {
92
95
  urlIcon,
93
96
  title,
94
97
  children
95
98
  } = props;
96
- const isSkeleton = useModuleSkeleton();
97
- return /* @__PURE__ */ jsx(WrapperPaper, {
99
+ return /* @__PURE__ */ jsxs(WrapperPaper, {
98
100
  id: "ContainerPropertyValue",
99
- children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, {
100
- children: [/* @__PURE__ */ jsx(Header, {
101
- id: "Header",
102
- children: /* @__PURE__ */ jsxs(IconTitleContainer, {
103
- className: "draggable-dialog-title",
104
- children: [/* @__PURE__ */ jsx(IconHeader, {
105
- children: /* @__PURE__ */ jsx(Icon, {
106
- src: urlIcon
107
- })
108
- }), title]
109
- })
110
- }), /* @__PURE__ */ jsx(Content, {
111
- id: "Content",
112
- children
113
- })]
114
- }) : /* @__PURE__ */ jsx(SKTPaperForm, {
101
+ children: [/* @__PURE__ */ jsx(Header, {
102
+ urlIcon,
103
+ title
104
+ }), /* @__PURE__ */ jsx(Content, {
105
+ id: "Content",
115
106
  children
116
- })
107
+ })]
117
108
  });
118
109
  }
119
110
  export { PaperForm as P };
@@ -1,8 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  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>, {}>;
3
- 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>, {}>;
3
+ 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>, {}>;
4
4
  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>, {}>;
5
5
  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>, {}>;
6
6
  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>, {}>;
7
- 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>, {}>;
8
- 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>, {}>;
7
+ 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>, {}>;
@@ -4,3 +4,4 @@ export interface PaperFormProps {
4
4
  title: string;
5
5
  children: ReactNode;
6
6
  }
7
+ export declare type HeaderProps = Omit<PaperFormProps, 'children'>;
@@ -6,50 +6,58 @@ import { useModuleSkeleton } from "@m4l/core";
6
6
  const WrapperPropertyValue = styled("div", {
7
7
  shouldForwardProp: (prop) => prop !== "propertyWidth" && prop !== "propertyHeight" && prop !== "isForm"
8
8
  })(({
9
- propertyHeight,
9
+ propertyWidth,
10
10
  isForm,
11
11
  theme
12
12
  }) => ({
13
- display: "flex",
13
+ display: "grid",
14
+ gridTemplateColumns: "1fr",
14
15
  alignItems: "flex-start",
15
16
  width: "100%",
16
17
  padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
17
- maxHeight: propertyHeight || "auto",
18
18
  ":hover": {
19
19
  backgroundColor: isForm ? "unset" : theme.palette.grid?.rowHover
20
20
  },
21
21
  borderBottom: isForm ? "none" : `1px solid ${theme.palette.divider}`,
22
22
  flexDirection: "column",
23
23
  [theme.breakpoints.up("sm")]: {
24
- flexDirection: "row",
24
+ gridTemplateColumns: propertyWidth ? `${propertyWidth}px 1fr` : "150px 1fr",
25
+ gap: theme.spacing(2),
25
26
  alignItems: "center"
26
27
  }
27
28
  }));
28
- const Property = styled("span", {
29
+ const Property = styled("div", {
29
30
  shouldForwardProp: (prop) => prop !== "propertyWidth" && prop !== "propertyHeight" && prop !== "isForm"
30
31
  })(({
31
32
  propertyWidth,
32
33
  isForm,
33
34
  theme
34
35
  }) => ({
35
- width: propertyWidth || "150px",
36
- minWidth: propertyWidth || "150px",
36
+ width: "100%",
37
+ minWidth: "100%",
37
38
  ...theme.typography.subtitle2,
38
39
  color: theme.palette.text.primary,
40
+ height: "100%",
41
+ display: "flex",
42
+ alignItems: "center",
43
+ justifyContent: "flex-start",
39
44
  position: "relative",
40
45
  [theme.breakpoints.up("sm")]: {
41
46
  borderRight: isForm ? "none" : `1px solid ${theme.palette.divider}`,
42
47
  paddingRight: theme.spacing(2),
43
- textAlign: "right"
48
+ textAlign: "right",
49
+ width: propertyWidth || "150px",
50
+ minWidth: propertyWidth || "150px",
51
+ justifyContent: "flex-end"
44
52
  },
45
53
  overflow: "hidden",
46
54
  overflowWrap: "break-word"
47
55
  }));
48
56
  const Value = styled("div", {
49
- shouldForwardProp: (prop) => prop !== "propertyWidth" && prop !== "propertyHeight" && prop !== "valueWidth"
57
+ shouldForwardProp: (prop) => prop !== "valueWidth" && prop !== "valueHeight" && prop !== "withGrid"
50
58
  })(({
51
- width,
52
- propertyHeight,
59
+ valueWidth,
60
+ valueHeight,
53
61
  theme
54
62
  }) => ({
55
63
  flexGrow: "1",
@@ -57,11 +65,12 @@ const Value = styled("div", {
57
65
  color: theme.palette.text.secondary,
58
66
  position: "relative",
59
67
  padding: "1px",
60
- width: width ? `${width}%` : "100%",
61
- height: propertyHeight ? propertyHeight : "auto",
68
+ maxWidth: `${valueWidth}%`,
69
+ width: `${valueWidth}%`,
70
+ height: valueHeight,
62
71
  marginTop: theme.spacing(1),
63
72
  [theme.breakpoints.up("sm")]: {
64
- marginLeft: theme.spacing(2),
73
+ marginLeft: theme.spacing(0),
65
74
  marginTop: "0px"
66
75
  },
67
76
  overflow: "hidden",
@@ -84,8 +93,8 @@ function PropertyValue(props) {
84
93
  const {
85
94
  property,
86
95
  value,
87
- propertyWidth,
88
- propertyHeight,
96
+ propertyWidth = 200,
97
+ valueHeight = "auto",
89
98
  valueWidth = "100",
90
99
  isForm
91
100
  } = props;
@@ -103,28 +112,30 @@ function PropertyValue(props) {
103
112
  return "100";
104
113
  }
105
114
  if (valueWidth === "25" && isDesktop || valueWidth === "12.5" && isDesktop) {
106
- return parseFloat(valueWidth).toString(10);
107
- } else if (valueWidth === "25" && !isDesktop || valueWidth === "12.5" && !isDesktop) {
108
- return (parseFloat(valueWidth) * 2).toString(10);
115
+ return `${valueWidth}`;
116
+ }
117
+ if (valueWidth === "25" && !isDesktop) {
118
+ return "50";
119
+ }
120
+ if (valueWidth === "12.5" && !isDesktop) {
121
+ return "25";
109
122
  }
110
123
  return "100";
111
124
  };
112
125
  const valueW = getValueW();
113
126
  return /* @__PURE__ */ jsxs(WrapperPropertyValue, {
114
- id: "ContainerPropertyValue",
127
+ id: "WrapperPropertyValue",
115
128
  isForm,
116
129
  propertyWidth,
117
- propertyHeight,
118
130
  children: [/* @__PURE__ */ jsx(Property, {
119
131
  id: "Property",
120
132
  isForm,
121
133
  propertyWidth,
122
- propertyHeight,
123
134
  children: isSkeleton ? /* @__PURE__ */ jsx(SKTProperty, {}) : property
124
135
  }), /* @__PURE__ */ jsx(Value, {
125
136
  id: "Value",
126
- width: valueW,
127
- propertyHeight,
137
+ valueWidth: valueW,
138
+ valueHeight,
128
139
  children: value
129
140
  })]
130
141
  });
@@ -1,6 +1,5 @@
1
1
  /// <reference types="react" />
2
- import { PropertyProps, ValueProps } from './types';
3
- export declare const WrapperPropertyValue: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & PropertyProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
4
- export declare const Property: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & PropertyProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
5
- export declare const Value: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & ValueProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
2
+ export declare const WrapperPropertyValue: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & import("./types").PropertyProps & Pick<import("./types").PropertyValueProps, "isForm">, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
3
+ export declare const Property: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & import("./types").PropertyProps & Pick<import("./types").PropertyValueProps, "isForm">, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
4
+ export declare const Value: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & import("./types").ValueProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
6
5
  export declare const SKTWrapperProperty: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -1,17 +1,17 @@
1
1
  import type { ReactNode } from 'react';
2
2
  export interface PropertyProps {
3
3
  propertyWidth?: number;
4
- propertyHeight?: number | string;
5
- isForm?: boolean;
6
4
  }
7
5
  export interface ValueProps {
8
- width: string;
9
- propertyHeight?: number | string;
6
+ valueHeight?: number | string;
7
+ valueWidth?: valueWidthType;
10
8
  }
11
- export interface PropertyValueProps extends PropertyProps, ValueTypeProps {
9
+ export declare type valueWidthType = '100' | '75' | '50' | '25' | '12.5';
10
+ export interface PropertyValueProps extends PropertyProps, ValueProps {
12
11
  property: string;
13
12
  value: number | string | ReactNode;
13
+ isForm?: boolean;
14
14
  }
15
- export interface ValueTypeProps {
16
- valueWidth?: '100' | '75' | '50' | '25' | '12.5';
17
- }
15
+ export declare type WrapperProps = PropertyProps & Pick<PropertyValueProps, 'isForm'>;
16
+ export declare type WrapperPropertyProps = WrapperProps;
17
+ export declare type WrapperValueProps = ValueProps;
@@ -1,5 +1,5 @@
1
1
  import { VariantsType } from '../type';
2
- export declare const varBounce: (props?: VariantsType | undefined) => {
2
+ export declare const varBounce: (props?: VariantsType) => {
3
3
  in: {
4
4
  initial: {};
5
5
  animate: {
@@ -3,7 +3,7 @@ export declare type Props = {
3
3
  delayIn?: number;
4
4
  staggerOut?: number;
5
5
  };
6
- export declare const varContainer: (props?: Props | undefined) => {
6
+ export declare const varContainer: (props?: Props) => {
7
7
  animate: {
8
8
  transition: {
9
9
  staggerChildren: number;
@@ -1,5 +1,5 @@
1
1
  import { VariantsType } from '../type';
2
- export declare const varFade: (props?: VariantsType | undefined) => {
2
+ export declare const varFade: (props?: VariantsType) => {
3
3
  in: {
4
4
  initial: {
5
5
  opacity: number;
@@ -1,13 +1,13 @@
1
1
  import { TranHoverType, TranEnterType, TranExitType } from '../type';
2
- export declare const varTranHover: (props?: TranHoverType | undefined) => {
2
+ export declare const varTranHover: (props?: TranHoverType) => {
3
3
  duration: number;
4
4
  ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
5
5
  };
6
- export declare const varTranEnter: (props?: TranEnterType | undefined) => {
6
+ export declare const varTranEnter: (props?: TranEnterType) => {
7
7
  duration: number;
8
8
  ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
9
9
  };
10
- export declare const varTranExit: (props?: TranExitType | undefined) => {
10
+ export declare const varTranExit: (props?: TranExitType) => {
11
11
  duration: number;
12
12
  ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
13
13
  };
@@ -11,18 +11,19 @@ function BooleanFormatter(props) {
11
11
  const {
12
12
  getLabel
13
13
  } = useModuleDictionary();
14
+ const final_value = value ?? false;
14
15
  if (presentationType === "string_yes_no") {
15
16
  return /* @__PURE__ */ jsx(Component, {
16
- children: value ? getLabel("formatters.boolean_yes") : getLabel("formatters.boolean_no")
17
+ children: final_value ? getLabel("formatters.boolean_yes") : getLabel("formatters.boolean_no")
17
18
  });
18
19
  }
19
20
  if (presentationType === "string_true_false") {
20
21
  return /* @__PURE__ */ jsx(Component, {
21
- children: value ? getLabel("formatters.boolean_true") : getLabel("formatters.boolean_false")
22
+ children: final_value ? getLabel("formatters.boolean_true") : getLabel("formatters.boolean_false")
22
23
  });
23
24
  }
24
25
  return /* @__PURE__ */ jsx(Checkbox, {
25
- checked: value !== void 0 ? value : false,
26
+ checked: final_value,
26
27
  size: "small",
27
28
  readOnly: true,
28
29
  disableFocusRipple: true,
@@ -3,5 +3,5 @@ export declare type PresentationType = 'string_yes_no' | 'string_true_false' | '
3
3
  export interface BooleanFormatterProps {
4
4
  Component?: ComponentForrmaterType;
5
5
  presentationType: PresentationType;
6
- value: boolean;
6
+ value?: boolean;
7
7
  }
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ import { PointsFormatterProps } from './types';
3
+ export declare function PointsFormatter(props: PointsFormatterProps): JSX.Element;