@m4l/components 9.3.6 → 9.3.8

package/components/ObjectLogs/hooks/useFilterAndSort.js

@@ -0,0 +1,52 @@
+import { useCallback } from "react";
+import { useEnvironment } from "@m4l/core";
+import { f as filterFieldsGenerator } from "../helpers/Fields/filterFields.js";
+import { g as getRawFiltersForNetwork } from "../../DynamicFilter/helpers/getRawFiltersForNetwork.js";
+import { u as useDynamicFilterAndSort } from "../../../hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js";
+function useFilterAndSort(props) {
+  const { setBackendQueryParams, Refresh, otherApp = false, resourceTypeId, resourceSerialId } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const onChangeFilterSort = useCallback((params) => {
+    const fixedFields = [
+      {
+        n: "resourceTypeId",
+        o: "c",
+        o1: resourceTypeId,
+        ft: "string"
+      },
+      {
+        n: "resourceSerialId",
+        o: "c",
+        o1: resourceSerialId,
+        ft: "string"
+      }
+    ];
+    const allFields = [...fixedFields, ...params.eventFilters?.rawFilters || []];
+    if (otherApp) {
+      setBackendQueryParams({
+        f: getRawFiltersForNetwork(allFields, "snakeCase")
+      });
+    } else {
+      setBackendQueryParams((prevParams) => ({
+        ...prevParams,
+        f: getRawFiltersForNetwork(prevParams.eventFilters?.rawFilters || [], "snakeCase")
+      }));
+    }
+    Refresh();
+  }, [Refresh, setBackendQueryParams, otherApp, resourceTypeId, resourceSerialId]);
+  const { leftActions, visibleCustomHeader, customHeaderComponent } = useDynamicFilterAndSort({
+    onChangeFilterSort,
+    fields: filterFieldsGenerator(`${host_static_assets}/${environment_assets}`, otherApp),
+    withAllField: true,
+    visibleRefresh: true,
+    filterSortAutomatic: false
+  });
+  return {
+    leftActions,
+    visibleCustomHeader,
+    customHeaderComponent
+  };
+}
+export {
+  useFilterAndSort as u
+};

package/components/ObjectLogs/slots/ObjectLogsSlots.js

@@ -13,7 +13,7 @@ const ContainerWrapperStyled = styled("div", {
   name: OBJECT_LOGS_KEY_COMPONENT,
   slot: ObjectLogsSlots.root
 })(objectLogsStyles?.root);
-const ActionsWrapperStyled = styled("div", {
+styled("div", {
   name: OBJECT_LOGS_KEY_COMPONENT,
   slot: ObjectLogsSlots.actionsWrapperStyled
 })(objectLogsStyles?.actionsWrapperStyled);
@@ -54,7 +54,6 @@ styled(ReactJson, {
   slot: ObjectLogsSlots.reactJsonSlot
 })(objectLogsStyles?.reactJsonSlot);
 export {
-  ActionsWrapperStyled as A,
   ContainerWrapperStyled as C,
   DetailDialogComponent as D,
   GridWrapperStyled as G,

package/components/ObjectLogs/subcomponents/ObjectLogsByM4L/ObjectLogsByM4L.js

@@ -1,20 +1,16 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { D as DataGrid } from "../../../DataGrid/DataGrid.js";
-import { useEnvironment } from "@m4l/core";
-import { D as DynamicFilter } from "../../../DynamicFilter/DynamicFilter.js";
 import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.js";
-import { C as ContainerWrapperStyled, A as ActionsWrapperStyled, G as GridWrapperStyled } from "../../slots/ObjectLogsSlots.js";
-import { D as DICTIONARY } from "../../dictionary.js";
+import { C as ContainerWrapperStyled, G as GridWrapperStyled } from "../../slots/ObjectLogsSlots.js";
 import { usePaginate } from "@m4l/graphics";
 import { u as useObjectLogsColumns } from "../../hooks/useObjectLogsColumns.js";
 import { a as OBJECT_LOGS_M4L_END_POINT, O as OBJECT_LOGS_KEY_COMPONENT } from "../../constants.js";
 import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
-import { endOfDay, startOfMonth } from "date-fns";
+import { u as useFilterAndSort } from "../../hooks/useFilterAndSort.js";
 import { O as ObjectLogsSlots } from "../../slots/ObjectLogsEnum.js";
 function ObjectLogsByM4L(props) {
   const { resourceId, objectId, dataTestId = "" } = props;
-  const { host_static_assets, environment_assets } = useEnvironment();
   const [backendQueryParams, setBackendQueryParams] = useState(() => {
     return { resource_id: resourceId, object_id: objectId };
   });
@@ -31,92 +27,47 @@ function ObjectLogsByM4L(props) {
     clearRows();
     setBackendQueryParams({ resource_id: resourceId, object_id: objectId });
   }, [resourceId, objectId]);
-  const onChangeFilter = (_initFilters, rawFilters) => {
-    setBackendQueryParams((oldParms) => ({ ...oldParms, f: rawFilters }));
-    Refresh();
-  };
-  return /* @__PURE__ */ jsxs(
+  const { leftActions, visibleCustomHeader, customHeaderComponent } = useFilterAndSort({ setBackendQueryParams, Refresh, otherApp: false });
+  return /* @__PURE__ */ jsx(
     ContainerWrapperStyled,
     {
       ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: `m4ldatagrid-${dataTestId}` } : {},
       ...getPropDataTestId(OBJECT_LOGS_KEY_COMPONENT, ObjectLogsSlots.root, dataTestId),
-      children: [
-        /* @__PURE__ */ jsx(ActionsWrapperStyled, { children: /* @__PURE__ */ jsx(
-          DynamicFilter,
-          {
-            withAllField: true,
-            onChangeFilters: onChangeFilter,
-            automatic: false,
-            fields: [
-              {
-                name: "user_logs.created_at",
-                dictionaryId: DICTIONARY.LABEL_CREATED_AT,
-                type: "datetime",
-                multiple: false,
-                presence: "fixed",
-                urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/email.svg`,
-                defaultOperand1: startOfMonth(/* @__PURE__ */ new Date()),
-                defaultOperand2: endOfDay(/* @__PURE__ */ new Date())
-              },
-              {
-                name: "users.email",
-                dictionaryId: DICTIONARY.LABEL_USER,
-                type: "string",
-                multiple: true,
-                presence: "optional",
-                urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/email.svg`
-              },
-              {
-                name: "user_logs.log_preview",
-                dictionaryId: DICTIONARY.LABEL_LOG_PREVIEW,
-                type: "string",
-                multiple: true,
-                presence: "optional",
-                urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/log_preview.svg`
-              },
-              {
-                name: "user_logs.log_detail",
-                dictionaryId: DICTIONARY.LABEL_LOG_DETAIL,
-                type: "string",
-                multiple: true,
-                presence: "optional",
-                urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/log_detail.svg`
-              }
-            ],
-            initialAppliedFilters: []
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          GridWrapperStyled,
-          {
-            children: /* @__PURE__ */ jsx(
-              DataGrid,
-              {
-                id: "users_logs_list",
-                dataTestId,
-                columns,
-                rows,
-                rowKeyGetter: (row) => row.id,
-                withActions: true,
-                actionsProps: {
-                  withPager: true,
-                  withLocalFilters: true,
-                  pagerOptions: {
-                    records: rows.length,
-                    totalRecords: pagerState.totalRecords,
-                    rowsPerPageOptions: [1, 2, 3, 4, 5, 10, 25],
-                    page: pagerState.page,
-                    rowsPerPage: pagerState.rowsPerPage,
-                    onPageChange,
-                    onRowsPerPageChange
-                  }
+      role: "grid",
+      "aria-label": "object-logs",
+      children: /* @__PURE__ */ jsx(
+        GridWrapperStyled,
+        {
+          children: /* @__PURE__ */ jsx(
+            DataGrid,
+            {
+              id: "users_logs_list",
+              dataTestId,
+              columns,
+              rows,
+              rowKeyGetter: (row) => row.id,
+              visibleCustomHeader,
+              customHeader: customHeaderComponent,
+              withActions: true,
+              actionsProps: {
+                leftActions,
+                withPager: true,
+                withLocalFilters: true,
+                pagerOptions: {
+                  records: rows.length,
+                  totalRecords: pagerState.totalRecords,
+                  rowsPerPageOptions: [1, 2, 3, 4, 5, 10, 25],
+                  page: pagerState.page,
+                  rowsPerPage: pagerState.rowsPerPage,
+                  onPageChange,
+                  onRowsPerPageChange
                 }
-              },
-              "users_list_logs"
-            )
-          }
-        )
-      ]
+              }
+            },
+            "users_list_logs"
+          )
+        }
+      )
     }
   );
 }

package/components/ObjectLogs/subcomponents/ObjectLogsByOthers/ObjectLogsByOthers.js

@@ -1,22 +1,16 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-import { endOfDay, startOfDay } from "date-fns";
 import { D as DataGrid } from "../../../DataGrid/DataGrid.js";
-import { useEnvironment } from "@m4l/core";
-import { D as DynamicFilter } from "../../../DynamicFilter/DynamicFilter.js";
 import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.js";
-import { C as ContainerWrapperStyled, A as ActionsWrapperStyled, G as GridWrapperStyled } from "../../slots/ObjectLogsSlots.js";
-import { D as DICTIONARY } from "../../dictionary.js";
+import { C as ContainerWrapperStyled, G as GridWrapperStyled } from "../../slots/ObjectLogsSlots.js";
 import { useRows } from "@m4l/graphics";
 import { u as useObjectLogsColumns } from "../../hooks/useObjectLogsColumns.js";
 import { b as OBJECT_LOGS_OTHERS_END_POINT, O as OBJECT_LOGS_KEY_COMPONENT } from "../../constants.js";
 import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
-import { g as getRawFiltersForNetwork } from "../../../DynamicFilter/helpers/getRawFiltersForNetwork.js";
-import { g as getRawSortsForNetwork } from "../../../DynamicSort/helpers/getRawSortsForNetwork.js";
+import { u as useFilterAndSort } from "../../hooks/useFilterAndSort.js";
 import { O as ObjectLogsSlots } from "../../slots/ObjectLogsEnum.js";
 function ObjectLogsByOthers(props) {
   const { dataTestId = "", resourceSerialId, resourceTypeId } = props;
-  const { host_static_assets, environment_assets } = useEnvironment();
   const [backendQueryParams, setBackendQueryParams] = useState({});
   const columns = useObjectLogsColumns("other");
   const { rows, clearRows, refresh } = useRows({
@@ -30,106 +24,38 @@ function ObjectLogsByOthers(props) {
   useEffect(() => {
     clearRows();
   }, [resourceSerialId, resourceTypeId]);
-  const onChangeFilter = (_initFilters, rawFilters) => {
-    const fixedFields = [
-      {
-        n: "resourceTypeId",
-        o: "c",
-        o1: resourceTypeId,
-        ft: "string"
-      },
-      {
-        n: "resourceSerialId",
-        o: "c",
-        o1: resourceSerialId,
-        ft: "string"
-      }
-    ];
-    const sortFields = [
-      // {
-      //   n: 'created_at',
-      //   o: 'desc',
-      //   ft: 'string',
-      // } ,
-    ];
-    const allFields = [...fixedFields, ...rawFilters];
-    const parms = {
-      f: getRawFiltersForNetwork(allFields, "snakeCase"),
-      s: getRawSortsForNetwork(sortFields, "snakeCase")
-    };
-    setBackendQueryParams(parms);
-    refresh();
-  };
-  return /* @__PURE__ */ jsxs(
+  const { leftActions, visibleCustomHeader, customHeaderComponent } = useFilterAndSort({ setBackendQueryParams, Refresh: refresh, otherApp: true, resourceTypeId, resourceSerialId });
+  return /* @__PURE__ */ jsx(
     ContainerWrapperStyled,
     {
       ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: `m4ldatagrid-${dataTestId}` } : {},
       ...getPropDataTestId(OBJECT_LOGS_KEY_COMPONENT, ObjectLogsSlots.root, dataTestId),
-      children: [
-        /* @__PURE__ */ jsx(ActionsWrapperStyled, { children: /* @__PURE__ */ jsx(
-          DynamicFilter,
-          {
-            withAllField: true,
-            onChangeFilters: onChangeFilter,
-            automatic: false,
-            fields: [
-              {
-                name: "createdAt",
-                dictionaryId: DICTIONARY.LABEL_CREATED_AT,
-                type: "datetime",
-                multiple: false,
-                presence: "initialized",
-                urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/email.svg`,
-                defaultOperand1: startOfDay(/* @__PURE__ */ new Date()),
-                defaultOperand2: endOfDay(/* @__PURE__ */ new Date())
-              },
-              {
-                name: "userId",
-                dictionaryId: DICTIONARY.LABEL_USER,
-                type: "string",
-                multiple: true,
-                presence: "optional",
-                urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/email.svg`
-              },
-              {
-                name: "logPreview",
-                dictionaryId: DICTIONARY.LABEL_LOG_PREVIEW,
-                type: "string",
-                multiple: true,
-                presence: "optional",
-                urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/log_preview.svg`
-              },
-              {
-                name: "logDetail",
-                dictionaryId: DICTIONARY.LABEL_LOG_DETAIL,
-                type: "string",
-                multiple: true,
-                presence: "optional",
-                urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/log_detail.svg`
+      role: "grid",
+      "aria-label": "object-logs",
+      children: /* @__PURE__ */ jsx(
+        GridWrapperStyled,
+        {
+          children: /* @__PURE__ */ jsx(
+            DataGrid,
+            {
+              id: "users_logs_list",
+              dataTestId,
+              columns,
+              rows,
+              rowKeyGetter: (row) => row.id,
+              withActions: true,
+              visibleCustomHeader,
+              customHeader: customHeaderComponent,
+              actionsProps: {
+                leftActions,
+                withPager: false,
+                withLocalFilters: false
               }
-            ],
-            initialAppliedFilters: []
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          GridWrapperStyled,
-          {
-            children: /* @__PURE__ */ jsx(
-              DataGrid,
-              {
-                id: "users_logs_list",
-                dataTestId,
-                columns,
-                rows,
-                rowKeyGetter: (row) => row.id,
-                withActions: true,
-                actionsProps: {}
-              },
-              "users_list_logs"
-            )
-          }
-        )
-      ]
+            },
+            "users_list_logs"
+          )
+        }
+      )
     }
   );
 }

package/components/PropertyValue/PropertyValue.styles.js

@@ -44,7 +44,7 @@ const propertyValueStyles = {
       containerType: "inline-size",
       display: "flex",
       flexDirection: ownerState?.isForm ? "column" : "row",
-      justifyContent: ownerState?.isForm ? "space-between" : "left",
+      justifyContent: "flex-start",
       alignItems: "center",
       gap: theme.vars.size.baseSpacings["sp1"],
       width: ownerState?.semanticWidth ? "auto" : "200px",

package/components/SideBar/subcomponents/ContentComponent/style.js

@@ -142,6 +142,9 @@ const contentComponentStyles = {
     [`&.${CLASS_NAME_IS_ROOT}.${CLASS_NAME_MENU_ACTIVE}.${CLASS_NAME_ITEM_IN_TREE_ACTIVE} > .M4LSideBar-wrapperMenuItem`]: {
       backgroundColor: theme.vars.palette.primary.opacity
     },
+    [`&.${CLASS_NAME_IS_ROOT}.${CLASS_NAME_MENU_ACTIVE} > .M4LSideBar-wrapperMenuItem`]: {
+      backgroundColor: theme.vars.palette.primary.opacity
+    },
     [`&.${CLASS_NAME_IS_ROOT} > .M4LSideBar-wrapperMenuItem`]: {
       paddingRight: "7px",
       paddingTop: theme.vars.size.baseSpacings.sp1,

package/components/SideBar/subcomponents/TreeGroupItems/styles.js

@@ -116,7 +116,7 @@ const contentGroupStyles = {
         ...getSizeStyles(
           theme,
           ownerState?.size || "medium",
-          "case",
+          "base",
           (sizeValue) => ({
             width: `${sizeValue}!important`,
             height: `${sizeValue}!important`,

package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/NodeMenuItem/index.js

@@ -46,7 +46,7 @@ function NodeMenuItem(props) {
             ),
             label: item.title,
             selected: item.active,
-            startIcon: /* @__PURE__ */ jsx(AdornmentIcon, { icon: `${urlIconPrefix}${item.iconUrl}`, variant: isRoot && item.itemInTreeActive ? "root" : item.active ? "itemActive" : "normal" }),
+            startIcon: /* @__PURE__ */ jsx(AdornmentIcon, { icon: `${urlIconPrefix}${item.iconUrl}`, variant: isRoot && item.itemInTreeActive || isRoot && item.active ? "root" : item.active ? "itemActive" : "normal" }),
             endIcon: hasChildren ? /* @__PURE__ */ jsx(ArrowIcon, { openState: isOpen, active: item.active }) : null,
             onClick: () => handlerClick(),
             size: currentSize

package/components/formatters/BooleanFormatter/BooleanFormatter.js

@@ -50,6 +50,7 @@ function BooleanFormatter(props) {
           ownerState,
           className: clsx(getComponentSlotRoot(BOOLEAN_FORMATTER_KEY_COMPONENT), className),
           color: value ? "primary" : "default",
+          opacity: true,
           variant: "contained"
         }
       );

package/components/hook-form/RHFTextField/RHFTextField.js

@@ -9,6 +9,7 @@ import clsx from "clsx";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
 import { R as RHFTextFieldRootStyled, L as LabelStyled, T as TextFieldStyled, H as HelperErrorStyled } from "./slots/RHFTextFieldSlots.js";
 import { R as RHFTextFieldSlots } from "./slots/RHFTextFieldEnum.js";
+import { g as getLimitCharacters } from "../../../utils/getLimitCharacters/getLimitCharacters.js";
 const RHFTextField = forwardRef((props, ref) => {
   const {
     name,
@@ -61,8 +62,9 @@ const RHFTextField = forwardRef((props, ref) => {
           control,
           render: ({ field: { onChange, value, ref: inputRef }, fieldState: { error } }) => {
             const onInternalChange = (event) => {
-              const newValue = event.target.value;
-              onChange(newValue);
+              const finalValue = other.maxLength ? getLimitCharacters({ limitCharacters: other.maxLength, value: event.target.value }) : event.target.value;
+              const stringValue = String(finalValue || "");
+              onChange(stringValue);
             };
             return /* @__PURE__ */ jsxs(Fragment, { children: [
               label && /* @__PURE__ */ jsx(
@@ -88,7 +90,7 @@ const RHFTextField = forwardRef((props, ref) => {
                   autoComplete,
                   onChange: onInternalChange,
                   variant,
-                  value: type === "number" ? isNaN(parseFloat(value)) ? "" : value : value || "",
+                  value: String(value || ""),
                   fullWidth: true,
                   error: !!error,
                   type,

package/components/hook-form/RHFTextField/slots/RHFTextFieldSlots.d.ts

@@ -4,7 +4,7 @@ export declare const RHFTextFieldRootStyled: import('@emotion/styled').StyledCom
 export declare const LabelStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Label').LabelProps, keyof import('../../../Label').LabelProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').RHFTextFieldOwnerState> & Record<string, unknown> & {
     ownerState: Partial<import('..').RHFTextFieldOwnerState> & Record<string, unknown>;
 }, {}, {}>;
-export declare const TextFieldStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../../mui_extended/TextField/types').TextFieldProps, "ref"> & import('react').RefAttributes<HTMLDivElement>, "value" | "size" | "children" | "title" | "component" | "name" | "error" | "select" | "rows" | "id" | "type" | "disabled" | "hidden" | "content" | "style" | "variant" | "margin" | "translate" | "className" | "classes" | "sx" | "label" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "dataTestId" | "autoComplete" | "placeholder" | "required" | keyof import('react').RefAttributes<HTMLDivElement> | "maxRows" | "fullWidth" | "inputProps" | "inputRef" | "multiline" | "minRows" | "hiddenLabel" | "focused" | "InputProps" | "FormHelperTextProps" | "helperText" | "InputLabelProps" | "SelectProps"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').RHFTextFieldOwnerState> & Record<string, unknown> & {
+export declare const TextFieldStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../../mui_extended/TextField/types').TextFieldProps, "ref"> & import('react').RefAttributes<HTMLDivElement>, "value" | "size" | "children" | "title" | "component" | "name" | "error" | "select" | "rows" | "id" | "type" | "disabled" | "hidden" | "content" | "style" | "variant" | "margin" | "translate" | "className" | "classes" | "sx" | "label" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "dataTestId" | "autoComplete" | "maxLength" | "placeholder" | "required" | keyof import('react').RefAttributes<HTMLDivElement> | "maxRows" | "fullWidth" | "inputProps" | "inputRef" | "multiline" | "minRows" | "hiddenLabel" | "focused" | "InputProps" | "FormHelperTextProps" | "helperText" | "InputLabelProps" | "SelectProps"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').RHFTextFieldOwnerState> & Record<string, unknown> & {
     ownerState: Partial<import('..').RHFTextFieldOwnerState> & Record<string, unknown>;
 }, {}, {}>;
 export declare const HelperErrorStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../HelperError').HelperErrorProps & import('react').RefAttributes<HTMLLabelElement>, keyof import('../../../HelperError').HelperErrorProps | keyof import('react').RefAttributes<HTMLLabelElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').RHFTextFieldOwnerState> & Record<string, unknown> & {

package/components/hook-form/RHFTextFieldPassword/RHFTextFieldPassword.js

@@ -6,6 +6,7 @@ import { useFormContext, Controller } from "react-hook-form";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
 import { R as RHFTextFieldPasswordRoot, L as LabelStyled, T as TextFieldStyled, I as IconButtonStyled } from "./slots/RHFTextFieldPasswordSlots.js";
 import { H as HelperError } from "../../HelperError/HelperError.js";
+import { g as getLimitCharacters } from "../../../utils/getLimitCharacters/getLimitCharacters.js";
 const RHFTextFieldPassword = (props) => {
   const {
     name,
@@ -27,62 +28,69 @@ const RHFTextFieldPassword = (props) => {
     {
       name,
       control,
-      render: ({ field: { onChange, value, ref }, fieldState: { error } }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-        label && /* @__PURE__ */ jsx(
-          LabelStyled,
-          {
-            ownerState: { error: !!error },
-            size: adjustedSize,
-            label,
-            htmlFor: name,
-            mandatory,
-            mandatoryMessage,
-            helperMessage
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          TextFieldStyled,
-          {
-            ownerState: { error: !!error },
-            name,
-            id: name,
-            type: showPassword ? "text" : "password",
-            size,
-            error: !!error,
-            disabled,
-            inputProps: {
-              role: "textbox",
-              "aria-label": name,
-              disabled,
+      render: ({ field: { onChange, value, ref }, fieldState: { error } }) => {
+        const onInternalChange = (event) => {
+          const finalValue = other.maxLength ? getLimitCharacters({ limitCharacters: other.maxLength, value: event.target.value }) : event.target.value;
+          const stringValue = String(finalValue || "");
+          onChange(stringValue);
+        };
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          label && /* @__PURE__ */ jsx(
+            LabelStyled,
+            {
+              ownerState: { error: !!error },
+              size: adjustedSize,
+              label,
+              htmlFor: name,
+              mandatory,
+              mandatoryMessage,
+              helperMessage
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TextFieldStyled,
+            {
+              ownerState: { error: !!error },
               name,
-              type: showPassword ? "text" : "password"
-            },
-            InputProps: {
-              /* InputAdornment: Componente de la librería externa material ui, permite agregar un elemento gráfico
-                 personalizado dentro del campo de texto*/
-              endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
-                IconButtonStyled,
-                {
-                  ownerState: { error: !!error },
-                  onClick: () => setShowPassword(!showPassword),
-                  icon: showPassword ? `${host_static_assets}/${environment_assets}/frontend/components/rhftextfieldpassword/assests/icons/view.svg` : `${host_static_assets}/${environment_assets}/frontend/components/rhftextfieldpassword/assests/icons/view_off.svg`
-                }
-              ) })
-            },
-            onChange,
-            value: value || "",
-            inputRef: ref,
-            ...other
-          }
-        ),
-        error?.message && /* @__PURE__ */ jsx(
-          HelperError,
-          {
-            message: error.message,
-            size
-          }
-        )
-      ] })
+              id: name,
+              type: showPassword ? "text" : "password",
+              size,
+              error: !!error,
+              disabled,
+              inputProps: {
+                role: "textbox",
+                "aria-label": name,
+                disabled,
+                name,
+                type: showPassword ? "text" : "password"
+              },
+              InputProps: {
+                /* InputAdornment: Componente de la librería externa material ui, permite agregar un elemento gráfico
+                   personalizado dentro del campo de texto*/
+                endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
+                  IconButtonStyled,
+                  {
+                    ownerState: { error: !!error },
+                    onClick: () => setShowPassword(!showPassword),
+                    icon: showPassword ? `${host_static_assets}/${environment_assets}/frontend/components/rhftextfieldpassword/assests/icons/view.svg` : `${host_static_assets}/${environment_assets}/frontend/components/rhftextfieldpassword/assests/icons/view_off.svg`
+                  }
+                ) })
+              },
+              onChange: onInternalChange,
+              value: String(value || ""),
+              inputRef: ref,
+              ...other
+            }
+          ),
+          error?.message && /* @__PURE__ */ jsx(
+            HelperError,
+            {
+              message: error.message,
+              size
+            }
+          )
+        ] });
+      }
     }
   ) });
 };