@m4l/components 0.1.75 → 0.1.77

package/components/PaperForm/{index.d79c6f76.js → index.1bd86ee5.js}

@@ -1,9 +1,10 @@
 import { styled } from "@mui/material/styles";
 import { useModuleSkeleton } from "@m4l/core";
-import { Skeleton } from "@mui/material";
-import { I as Icon } from "../Icon/index.f9119f5e.js";
-import { jsxs, jsx } from "react/jsx-runtime";
-const WrapperPaper = styled("div")(({
+import { Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { I as Icon } from "../Icon/index.ecb63e65.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { unstable_composeClasses } from "@mui/base";
+const PaperFormRoot = styled("div")(({
   theme
 }) => ({
   display: "flex",
@@ -15,7 +16,8 @@ const WrapperPaper = styled("div")(({
     boxShadow: theme.shadows[8],
     padding: theme.spacing(3),
     backgroundColor: theme.palette.background.paper
-  }
+  },
+  ...theme.components?.M4LPaperForm?.styleOverrides
 }));
 const HeaderContainer = styled("div")(({
   theme
@@ -65,44 +67,75 @@ const SkTPaperFormHeader = styled("div")(({
 const Header = (props) => {
   const {
     urlIcon,
-    title
+    title,
+    classes
   } = 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, {
+  return /* @__PURE__ */ jsx(HeaderContainer, {
     id: "Header",
-    children: /* @__PURE__ */ jsxs(IconTitleContainer, {
-      className: "m4l_draggable_handle",
-      children: [/* @__PURE__ */ jsx(IconHeader, {
+    className: classes.headerContainer,
+    children: !isSkeleton ? /* @__PURE__ */ jsxs(IconTitleContainer, {
+      className: classes.iconTitleContainer,
+      children: [urlIcon ? /* @__PURE__ */ jsx(IconHeader, {
+        className: classes.iconHeaderContainer,
         children: /* @__PURE__ */ jsx(Icon, {
           src: urlIcon
         })
-      }), title]
+      }) : null, title]
+    }) : /* @__PURE__ */ jsxs(SkTPaperFormHeader, {
+      className: classes.skeletonContainer,
+      children: [/* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        width: 16,
+        height: 16
+      }), /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width: 68,
+        height: 14
+      })]
     })
   });
 };
+const componentName = "M4LPaperForm";
+generateUtilityClasses(componentName, [
+  "root",
+  "headerContainer",
+  "iconTitleContainer",
+  "iconHeaderContainer",
+  "skeletonContainer"
+]);
+function getPaperFormUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const paperFormUtilityClasses = () => {
+  const slots = {
+    root: ["root"],
+    headerContainer: ["headerContainer"],
+    iconTitleContainer: ["iconTitleContainer"],
+    iconHeaderContainer: ["iconHeaderContainer"],
+    skeletonContainer: ["skeletonContainer"],
+    content: ["content"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getPaperFormUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
 function PaperForm(props) {
   const {
     urlIcon,
     title,
     children
   } = props;
-  return /* @__PURE__ */ jsxs(WrapperPaper, {
-    id: "ContainerPropertyValue",
+  const classes = paperFormUtilityClasses();
+  return /* @__PURE__ */ jsxs(PaperFormRoot, {
+    className: classes.root,
     children: [/* @__PURE__ */ jsx(Header, {
       urlIcon,
-      title
+      title,
+      classes
     }), /* @__PURE__ */ jsx(Content, {
-      id: "Content",
+      className: classes.content,
       children
     })]
   });

package/components/PaperForm/types.d.ts

@@ -1,7 +1,10 @@
 import type { ReactNode } from 'react';
+import { Classes } from './classes/types';
 export interface PaperFormProps {
-    urlIcon: string;
+    urlIcon?: string;
     title: string;
     children: ReactNode;
 }
-export declare type HeaderProps = Omit<PaperFormProps, 'children'>;
+export interface HeaderProps extends Omit<PaperFormProps, 'children'> {
+    classes: Classes;
+}

package/components/Period/Period.d.ts

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

package/components/Period/classes/constants.d.ts

@@ -0,0 +1 @@
+export declare const componentName = "M4LPeriod";

package/components/Period/classes/index.d.ts

@@ -0,0 +1,10 @@
+import { PeriodClassesType } from './types';
+import { OwnerState } from '../types';
+export declare const periodClasses: PeriodClassesType;
+export declare function getPeriodUtilityClass(slot: string): string;
+export declare const periodUtilityClasses: (ownerState: OwnerState) => {
+    root: string;
+    gap: string;
+    containerDateLabel: string;
+    containerDateValue: string;
+};

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

@@ -0,0 +1,13 @@
+import { periodUtilityClasses } from ".";
+export interface PeriodClassesType {
+    root: string;
+    gap: string;
+    containerDateLabel: string;
+    containerDateValue: string;
+    stateError: string;
+    stateReadOnly: string;
+    variantMonoperiod: string;
+    variantMultiperiod: string;
+}
+export declare type PeriodClassesKey = keyof PeriodClassesType;
+export declare type Classes = ReturnType<typeof periodUtilityClasses>;

package/components/Period/index.711db043.js

@@ -0,0 +1,321 @@
+import { useModuleDictionary, useModuleSkeleton, useEnvironment } from "@m4l/core";
+import { styled, generateUtilityClasses, generateUtilityClass, Autocomplete, TextField, Skeleton } from "@mui/material";
+import { useMemo } from "react";
+import { I as Icon } from "../Icon/index.ecb63e65.js";
+import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.3eba9d91.js";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import "@mui/material/Button";
+import "../mui_extended/Button/index.4288f9fc.js";
+import "clsx";
+import "react-hook-form";
+import "../../contexts/ModalContext/index.dee85a61.js";
+import "../../react-draggable.7abb5d0a.js";
+import "../Resizeable/index.9a9c79a4.js";
+import "@m4l/graphics";
+import "../modal/index.a0978193.js";
+import "../Image/index.c18ebf5a.js";
+import "../mui_extended/IconButton/index.fc5b7c2d.js";
+import "../mui_extended/Accordion/index.12b1339a.js";
+import { T as Typography } from "../mui_extended/Typography/index.443590d6.js";
+import "../mui_extended/Avatar/index.75e6ed57.js";
+import "react-router-dom";
+import "../mui_extended/Badge/index.8c2b8b66.js";
+import "@mui/lab";
+import "../mui_extended/Popover/index.9f35d0eb.js";
+import "../mui_extended/MenuActions/index.f5b1c022.js";
+import "../mui_extended/Pager/index.435af0df.js";
+import "../mui_extended/Tab/index.9e2f6e34.js";
+import "../mui_extended/Tooltip/index.5a795dcd.js";
+import "zustand";
+import "../areas/contexts/AreasContext/index.c8147e8e.js";
+import "../areas/components/AreasAdmin/index.cc4cbf56.js";
+import "zustand/shallow";
+import "../ScrollBar/index.bbe48f4d.js";
+import "../areas/components/AreasViewer/index.9c2aaaeb.js";
+import "../LinearProgressIndeterminate/index.60dabc06.js";
+import "../areas/contexts/WindowToolsMFContext/index.8f3e2a04.js";
+import "../areas/contexts/DynamicMFParmsContext/index.1607c78e.js";
+import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
+import { unstable_composeClasses } from "@mui/base";
+const ContainerPeriod = styled("div")(({
+  theme
+}) => ({
+  ...theme.components?.M4LPeriod?.styleOverrides
+}));
+const Gap = styled("div")(({
+  theme
+}) => ({
+  width: "1px",
+  height: "20px",
+  backgroundColor: theme.palette.divider
+}));
+const SKTWrapper = styled("div", {
+  shouldForwardProp: (props) => props !== "readOnly"
+})(({
+  theme,
+  readOnly
+}) => ({
+  display: "flex",
+  width: "100%",
+  height: "37.5px",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  border: `1px solid ${theme.palette.divider}`,
+  ...readOnly && {
+    border: "0px"
+  },
+  padding: theme.spacing(0.5, 1),
+  borderRadius: "4px"
+}));
+styled("div")(({
+  theme
+}) => ({
+  ...theme.typography.body2,
+  width: "100%",
+  display: "flex",
+  textOverflow: "elipsis",
+  overflow: "hidden",
+  padding: "5px",
+  textAlign: "left"
+}));
+styled("div")(({
+  theme
+}) => ({
+  ...theme.typography.body2,
+  width: "70px",
+  display: "flex",
+  textOverflow: "elipsis",
+  overflow: "hidden",
+  padding: "5px",
+  textAlign: "left"
+}));
+var ETimePeriods = /* @__PURE__ */ ((ETimePeriods2) => {
+  ETimePeriods2[ETimePeriods2["YEARS"] = 0] = "YEARS";
+  ETimePeriods2[ETimePeriods2["MONTHS"] = 1] = "MONTHS";
+  ETimePeriods2[ETimePeriods2["DAYS"] = 2] = "DAYS";
+  return ETimePeriods2;
+})(ETimePeriods || {});
+const dictionary = {
+  LABEL_YEARS: "period.label_years",
+  LABEL_MONTHS: "period.label_months",
+  LABEL_DAYS: "period.label_days"
+};
+function getPeriodComponetsDictionary() {
+  return ["period"].concat(getCommonActionsDictionary());
+}
+const componentName = "M4LPeriod";
+generateUtilityClasses(componentName, [
+  "root",
+  "gap",
+  "containerDateLabel",
+  "containerDateValue",
+  "stateError",
+  "stateReadOnly",
+  "variantMonoperiod",
+  "variantMultiperiod"
+]);
+function getPeriodUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const periodUtilityClasses = (ownerState) => {
+  const slots = {
+    root: ["root", 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],
+    gap: ["gap"],
+    containerDateLabel: ["containerDateLabel"],
+    containerDateValue: ["containerDateValue"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getPeriodUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const PERIOD_PREFIX = "M4LPeriod";
+const getNamePeriodDataTestId = (KEY) => {
+  return `${PERIOD_PREFIX}-${KEY}`;
+};
+const getSelPeriodTime = (period) => {
+  if (!period)
+    return ETimePeriods.YEARS;
+  if (period.selPeriodTime)
+    return period.selPeriodTime;
+  if (period.years && period.years > 0)
+    return ETimePeriods.YEARS;
+  if (period.months && period.months > 0)
+    return ETimePeriods.MONTHS;
+  if (period.days && period.days > 0)
+    return ETimePeriods.DAYS;
+  return ETimePeriods.YEARS;
+};
+const getSingleValue = (period) => {
+  if (!period)
+    return "";
+  if (period.singleValue !== void 0)
+    return period.singleValue;
+  if (period.years && period.years > 0)
+    return period.years;
+  if (period.months && period.months > 0)
+    return period.months;
+  if (period.days && period.days > 0)
+    return period.days;
+  return "";
+};
+const Period = (props) => {
+  const {
+    value,
+    onChange,
+    state,
+    readOnly = false,
+    skeletonWidth = "100%",
+    skeletonHeight = "18px",
+    variant = "monoperiod"
+  } = props;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
+  const selPeriodTime = getSelPeriodTime(value);
+  const singleValue = getSingleValue(value);
+  const onTotalChange = (newPeriodTime, newValue) => {
+    const newPeriod = {
+      selPeriodTime: newPeriodTime,
+      singleValue: newValue
+    };
+    if (newValue !== "" && newValue > 0) {
+      newPeriod.years = 0;
+      newPeriod.months = 0;
+      newPeriod.days = 0;
+      if (newPeriodTime === ETimePeriods.YEARS)
+        newPeriod.years = newValue;
+      if (newPeriodTime === ETimePeriods.MONTHS)
+        newPeriod.months = newValue;
+      if (newPeriodTime === ETimePeriods.DAYS)
+        newPeriod.days = newValue;
+    }
+    onChange(newPeriod);
+  };
+  const onChangeTime = (newPeriodTime) => {
+    if (newPeriodTime) {
+      onTotalChange(newPeriodTime.id, singleValue);
+    }
+  };
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const options = useMemo(() => [{
+    id: 0,
+    label: getLabel(dictionary.LABEL_DAYS)
+  }, {
+    id: 1,
+    label: getLabel(dictionary.LABEL_MONTHS)
+  }, {
+    id: 2,
+    label: getLabel(dictionary.LABEL_YEARS)
+  }], [getLabel]);
+  const ownerState = {
+    readOnly,
+    state,
+    variant
+  };
+  const classes = periodUtilityClasses(ownerState);
+  return /* @__PURE__ */ jsx(ContainerPeriod, {
+    className: classes.root,
+    ...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(Gap, {
+          className: classes.gap,
+          ...process.env.NODE_ENV !== "production" ? {
+            [TEST_PROP_ID]: getNamePeriodDataTestId("gap")
+          } : {}
+        }), /* @__PURE__ */ jsx("div", {
+          className: classes.containerDateValue,
+          children: /* @__PURE__ */ jsx(Typography, {
+            variant: "body",
+            skeletonWidth: "80%",
+            children: value.singleValue
+          })
+        }), /* @__PURE__ */ jsx(Icon, {
+          src: `${host_static_assets}/${environment_assets}/frontend/components/period/assets/icons/clock.svg`
+        })]
+      }) : /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx(Autocomplete, {
+          options,
+          value: options[selPeriodTime],
+          disableClearable: true,
+          onChange: (_event, autcValue) => {
+            onChangeTime(autcValue);
+          },
+          renderInput: (params) => {
+            return /* @__PURE__ */ jsx(TextField, {
+              ...params,
+              fullWidth: true,
+              variant: "standard",
+              SelectProps: {
+                native: true
+              },
+              InputProps: {
+                disableUnderline: true,
+                ...params.InputProps
+              },
+              autoComplete: "off"
+            }, `tx_async_${params.id}`);
+          }
+        }), /* @__PURE__ */ jsx(Gap, {
+          className: classes.gap,
+          ...process.env.NODE_ENV !== "production" ? {
+            [TEST_PROP_ID]: getNamePeriodDataTestId("gap")
+          } : {}
+        }), /* @__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(Icon, {
+          src: `${host_static_assets}/${environment_assets}/frontend/components/period/assets/icons/clock.svg`
+        })]
+      })
+    }) : /* @__PURE__ */ jsxs(SKTWrapper, {
+      readOnly,
+      children: [/* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width: "50%",
+        height: skeletonHeight
+      }), /* @__PURE__ */ jsx(Gap, {
+        className: classes.gap,
+        ...process.env.NODE_ENV !== "production" ? {
+          [TEST_PROP_ID]: getNamePeriodDataTestId("gap")
+        } : {}
+      }), /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width: skeletonWidth,
+        height: skeletonHeight
+      }), /* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        width: 20,
+        sx: {
+          minWidth: "20px",
+          minHeight: "20px"
+        }
+      })]
+    })
+  });
+};
+export {
+  Period as P,
+  getPeriodComponetsDictionary as g
+};

package/components/Period/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-import { PeriodProps } from './types';
-export declare const Period: (props: PeriodProps) => import("react").JSX.Element;
+export { Period } from './Period';
+export type { PeriodType } from './types';

package/components/Period/tests/constants.d.ts

@@ -0,0 +1 @@
+export declare const PERIOD_PREFIX = "M4LPeriod";

package/components/Period/tests/utils.d.ts

@@ -0,0 +1,2 @@
+import type { PeriodClassesKey } from '../classes/types';
+export declare const getNamePeriodDataTestId: (KEY: PeriodClassesKey) => string;

package/components/Period/types.d.ts

@@ -8,10 +8,8 @@ export declare type PeriodTime = {
     id: number;
     label: string;
 };
-export interface WrapperProps extends Pick<PeriodProps, 'readOnly'> {
-    error: boolean;
-}
 export declare type SKTWrapperProps = Pick<PeriodProps, 'readOnly'>;
+export declare type PeriodState = 'error' | 'success' | 'warning' | 'info' | undefined;
 export declare type PeriodType = {
     selPeriodTime: ETimePeriods;
     singleValue: number | '';
@@ -22,7 +20,7 @@ export declare type PeriodType = {
 export interface PeriodProps {
     value: PeriodType;
     onChange: (newValue: PeriodType) => void;
-    error?: boolean;
+    state?: PeriodState;
     readOnly?: boolean;
     variant?: PeriodVariant;
     skeletonWidth?: string | number;
@@ -31,3 +29,4 @@ export interface PeriodProps {
 export interface WrapperProps {
     error: boolean;
 }
+export declare type OwnerState = Pick<PeriodProps, 'state' | 'readOnly' | 'variant'>;

package/components/PropertyValue/classes/constants.d.ts

@@ -0,0 +1 @@
+export declare const componentName = "M4LPropertyValue";

package/components/PropertyValue/classes/index.d.ts

@@ -0,0 +1,9 @@
+import { PropertyValueClassesType } from './types';
+export declare const propertyValueClasses: PropertyValueClassesType;
+export declare function getPropertyValueUtilityClass(slot: string): string;
+export declare const propertyValueUtilityClasses: () => {
+    value: string;
+    root: string;
+    property: string;
+    skeletonProperty: string;
+};

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

@@ -0,0 +1,9 @@
+import { propertyValueUtilityClasses } from ".";
+export interface PropertyValueClassesType {
+    root: string;
+    property: string;
+    value: string;
+    skeletonProperty: string;
+}
+export declare type PropertyValueClassesKey = keyof PropertyValueClassesType;
+export declare type Classes = ReturnType<typeof propertyValueUtilityClasses>;

package/components/PropertyValue/{index.dfcfe1ba.js → index.8a1adf3e.js}

@@ -1,9 +1,12 @@
 import { styled } from "@mui/material/styles";
-import { Skeleton } from "@mui/material";
+import { Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { useModuleSkeleton } from "@m4l/core";
-const WrapperPropertyValue = styled("div", {
+import { unstable_composeClasses } from "@mui/base";
+import clsx from "clsx";
+const PropertyValueRoot = styled("div", {
   shouldForwardProp: (prop) => prop !== "propertyWidth" && prop !== "propertyHeight" && prop !== "isForm"
 })(({
   propertyWidth,
@@ -24,7 +27,8 @@ const WrapperPropertyValue = styled("div", {
     gridTemplateColumns: propertyWidth ? `${propertyWidth}px 1fr` : "150px 1fr",
     gap: theme.spacing(2),
     alignItems: "center"
-  }
+  },
+  ...theme.components?.M4LPropertyValue?.styleOverrides
 }));
 const Property = styled("div", {
   shouldForwardProp: (prop) => prop !== "propertyWidth" && prop !== "propertyHeight" && prop !== "isForm"
@@ -79,8 +83,19 @@ const SKTWrapperProperty = styled("div")(() => ({
   display: "flex",
   justifyContent: "flex-end"
 }));
-function SKTProperty() {
+const ICON_PREFIX = "M4LPropertyValue";
+const getNamePropertyValueDataTestId = (KEY) => {
+  return `${ICON_PREFIX}-${KEY}`;
+};
+function SKTProperty(props) {
+  const {
+    className
+  } = props;
   return /* @__PURE__ */ jsx(SKTWrapperProperty, {
+    className,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNamePropertyValueDataTestId("skeletonProperty")
+    } : {},
     children: /* @__PURE__ */ jsx(Skeleton, {
       variant: "text",
       width: 68,
@@ -88,6 +103,28 @@ function SKTProperty() {
     })
   });
 }
+const componentName = "M4LPropertyValue";
+generateUtilityClasses(componentName, [
+  "root",
+  "property",
+  "value",
+  "skeletonProperty"
+]);
+function getPropertyValueUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const propertyValueUtilityClasses = () => {
+  const slots = {
+    root: ["root"],
+    property: ["property"],
+    value: ["value"],
+    skeletonProperty: ["skeletonProperty"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getPropertyValueUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
 function PropertyValue(props) {
   const {
     property,
@@ -96,7 +133,8 @@ function PropertyValue(props) {
     valueHeight = "auto",
     valueWidth = "100",
     valueWidthMobile,
-    isForm
+    isForm,
+    className
   } = props;
   const isDesktop = useResponsiveDesktop();
   const isSkeleton = useModuleSkeleton();
@@ -125,19 +163,31 @@ function PropertyValue(props) {
     }
     return 100;
   };
-  return /* @__PURE__ */ jsxs(WrapperPropertyValue, {
-    id: "WrapperPropertyValue",
+  const classes = propertyValueUtilityClasses();
+  return /* @__PURE__ */ jsxs(PropertyValueRoot, {
+    className: clsx(classes.root, className),
     isForm,
     propertyWidth,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNamePropertyValueDataTestId("root")
+    } : {},
     children: [/* @__PURE__ */ jsx(Property, {
-      id: "Property",
+      className: classes.property,
       isForm,
       propertyWidth,
-      children: isSkeleton ? /* @__PURE__ */ jsx(SKTProperty, {}) : property
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getNamePropertyValueDataTestId("property")
+      } : {},
+      children: isSkeleton ? /* @__PURE__ */ jsx(SKTProperty, {
+        className: classes.skeletonProperty
+      }) : property
     }), /* @__PURE__ */ jsx(Value, {
-      id: "Value",
+      className: classes.value,
       valueWidth: getValueW(),
       valueHeight,
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getNamePropertyValueDataTestId("value")
+      } : {},
       children: value
     })]
   });

package/components/PropertyValue/skeleton.d.ts

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