@m4l/components 0.2.26 → 0.2.27

package/components/areas/components/AreasViewer/{index.82a22acb.js → index.2a286dfa.js}

@@ -4,30 +4,30 @@ import { unstable_composeClasses } from "@mui/base";
 import { g as getComponentUtilityClass } from "../../../../utils/index.de903261.js";
 import { a as AREAS_VIEWER_CLASS_NAME } from "../../constants.66529246.js";
 import { shallow } from "zustand/shallow";
-import React__default, { useMemo, useEffect } from "react";
+import React__default, { useMemo, useRef, useEffect } from "react";
 import clsx from "clsx";
-import { u as useAreasStore } from "../../hooks/useAreas/index.ca15a4b6.js";
+import { u as useAreasStore } from "../../hooks/useAreas/index.febe901b.js";
 import { useModuleDictionary, useEnvironment, useModuleSkeleton } from "@m4l/core";
-import { a as MemonizedMenuActions } from "../../../mui_extended/MenuActions/index.e6e3aac8.js";
-import { useResponsiveDesktop } from "@m4l/graphics";
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { a as MemonizedMenuActions } from "../../../mui_extended/MenuActions/index.fdea20e7.js";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useResponsiveDesktop, useResponsiveRelativeStore, ResponsiveRelativeProvider } from "@m4l/graphics";
 import { I as ICONS } from "../../icons.8266ccc8.js";
 import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary.08cfc4c9.js";
-import { I as IconButton } from "../../../mui_extended/IconButton/index.383f5496.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.32fc9419.js";
 import { L as LinearProgressIndeterminate } from "../../../LinearProgressIndeterminate/index.a0ad2d9e.js";
-import { I as Icon } from "../../../Icon/index.8c744412.js";
+import { I as Icon } from "../../../Icon/index.58eaf354.js";
 import { T as Typography } from "../../../mui_extended/Typography/index.379dd374.js";
-import { M as MFLoader } from "../../../MFLoader/index.7cd7c372.js";
+import { M as MFLoader } from "../../../MFLoader/index.f6a46c70.js";
 import { W as WindowToolsMFProvider } from "../../contexts/WindowToolsMFContext/index.8f3e2a04.js";
 import { D as DynamicMFParmsProvider } from "../../contexts/DynamicMFParmsContext/index.1607c78e.js";
 import { L as LinearProgress } from "../../../mui_extended/LinearProgress/index.c92b9ba9.js";
 import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.86c553a9.js";
 import { g as getNameDataTestId } from "../../../../test/getNameDataTestId.14875ec7.js";
-import { R as RESPONSIVE_COLAPSED_HEIGHTS, a as RESPONSIVE_ROW_HEIGHTS, M as MARGIN_GRIDLAYOUT, P as PADDING_GRIDLAYOUT } from "../../contexts/AreasContext/index.0dc69929.js";
-import { w as withSizeProvider } from "../../../GridLayout/subcomponents/SizeProvider/index.7669a2cd.js";
-import { R as Responsive } from "../../../GridLayout/subcomponents/Responsive/index.0fd1b7f8.js";
+import { R as RESPONSIVE_COLAPSED_HEIGHTS, a as RESPONSIVE_ROW_HEIGHTS, M as MARGIN_GRIDLAYOUT, P as PADDING_GRIDLAYOUT } from "../../contexts/AreasContext/index.3eb6b2a4.js";
+import { w as withSizeProvider } from "../../../GridLayout/subcomponents/SizeProvider/index.06986ab4.js";
+import { R as Responsive } from "../../../GridLayout/subcomponents/Responsive/index.d2ec9ddb.js";
 import { useLocation } from "react-router-dom";
-import { L as LoadingError } from "../../../LoadingError/index.9c64680a.js";
+import { L as LoadingError } from "../../../LoadingError/index.4f4724c4.js";
 import { c as cjs } from "../../../../react-draggable.ee21cb7e.js";
 import { R as ResizeableWindow } from "../../../Resizeable/index.8db8f77d.js";
 const areasViewerClasses = generateUtilityClasses(AREAS_VIEWER_CLASS_NAME, [
@@ -237,151 +237,72 @@ const AreasViewerRoot = styled("div")`
 
     ${(props) => props.theme.components?.M4LAreasViewer?.styleOverrides}
 `;
-styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  alignItems: "center",
-  position: "relative",
-  borderBottom: `1px solid ${theme.palette.divider}`,
-  height: "60px",
-  minHeight: "60px",
-  " > span": {
-    marginRight: "12px"
-  },
-  "& > h5": {
-    paddingRight: theme.spacing(3),
-    borderRight: `1px solid ${theme.palette.divider}`
-  },
-  " > nav": {
-    marginRight: "12px",
-    flexGrow: 1
-  },
-  "& .splitactions.Mui-disabled": {
-    color: theme.palette.primary.main
-  },
-  "& svg ": {
-    width: "20px",
-    height: "20px"
-  }
-}));
-const Wrapper = styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  justifyContent: "space-between",
-  padding: `0 0`,
-  borderBottom: `1px solid ${theme.palette.divider}`,
-  minHeight: "60px"
-}));
-const ModuleTitleContent = styled("div")(({
-  theme
-}) => ({
-  display: "grid",
-  gridTemplateColumns: "auto",
-  gridGap: theme.spacing(1.75),
-  alignItems: "center",
-  width: "auto",
-  height: "auto",
-  [theme.breakpoints.up("sm")]: {
-    gridTemplateColumns: "repeat(3, auto)"
-  }
-}));
-const ModuleTitle = styled("div")(({
-  theme
-}) => ({
-  display: "grid",
-  gridTemplateColumns: `${theme.spacing(3)} auto`,
-  gridGap: theme.spacing(2),
-  alignItems: "center",
-  width: "auto",
-  height: "auto"
-}));
-const Separator = styled("div")(({
-  theme
-}) => ({
-  display: "none",
-  alignItems: "center",
-  width: "1px",
-  background: theme.palette.divider,
-  height: "100%",
-  margin: `0 ${theme.spacing(2)}`,
-  [theme.breakpoints.up("sm")]: {
-    display: "flex"
-  }
-}));
-const Breadcrumbs = styled("div")(({
-  theme
-}) => ({
-  display: "grid",
-  alignItems: "center",
-  gridTemplateColumns: `repeat(3, auto)`,
-  gridGap: theme.spacing(2)
-}));
-const ModuleActions = styled("div")(({
-  theme
-}) => ({
-  display: "grid",
-  gridTemplateColumns: "auto",
-  alignItems: "center",
-  width: "auto",
-  height: "auto",
-  [theme.breakpoints.up("sm")]: {
-    gridTemplateColumns: `repeat(3, ${theme.spacing(3)})`,
-    gridGap: theme.spacing(2)
-  }
-}));
-function SKTModuleHeader() {
-  const isDesktop = useResponsiveDesktop();
-  return /* @__PURE__ */ jsxs(Wrapper, {
-    id: "HeaderSkeleton",
-    children: [/* @__PURE__ */ jsxs(ModuleTitleContent, {
-      children: [/* @__PURE__ */ jsxs(ModuleTitle, {
-        children: [/* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: 24,
-          height: 24
-        }), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "text",
-          width: 120,
-          height: 14
-        })]
-      }), /* @__PURE__ */ jsx(Separator, {}), /* @__PURE__ */ jsxs(Breadcrumbs, {
-        children: [/* @__PURE__ */ jsx(Skeleton, {
-          variant: "text",
-          width: 68,
-          height: 14
-        }), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: 4,
-          height: 4
-        }), /* @__PURE__ */ jsx(Skeleton, {
+function WindowHeaderSkeleton(props) {
+  const {
+    colapsed
+  } = props;
+  return /* @__PURE__ */ jsx("div", {
+    className: clsx(areasViewerClasses.windowHeader),
+    children: /* @__PURE__ */ jsxs("div", {
+      className: areasViewerClasses.windowHeaderContent,
+      children: [/* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        sx: {
+          margin: "0 5px",
+          minWidth: "18px",
+          minHeight: "18px"
+        }
+      }), /* @__PURE__ */ jsx("div", {
+        style: {
+          width: "100%"
+        },
+        children: /* @__PURE__ */ jsx(Skeleton, {
           variant: "text",
-          width: 68,
-          height: 14
-        })]
-      })]
-    }), /* @__PURE__ */ jsx(ModuleActions, {
-      children: isDesktop ? /* @__PURE__ */ jsxs(Fragment, {
-        children: [/* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: 24,
-          height: 24
-        }), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: 24,
-          height: 24
-        }), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: 24,
-          height: 24
-        })]
-      }) : /* @__PURE__ */ jsx(Skeleton, {
+          width: 80,
+          height: 16
+        })
+      }), /* @__PURE__ */ jsx("div", {
+        className: areasViewerClasses.windowHeaderCancelHandle,
+        children: !colapsed && /* @__PURE__ */ jsxs(Fragment, {
+          children: [/* @__PURE__ */ jsx(Skeleton, {
+            variant: "circular",
+            sx: {
+              margin: "0 5px",
+              minWidth: "16px",
+              minHeight: "16px"
+            }
+          }), /* @__PURE__ */ jsx(Skeleton, {
+            variant: "circular",
+            sx: {
+              margin: "0 5px",
+              minWidth: "16px",
+              minHeight: "16px"
+            }
+          }), /* @__PURE__ */ jsx(Skeleton, {
+            variant: "circular",
+            sx: {
+              margin: "0 5px",
+              minWidth: "16px",
+              minHeight: "16px"
+            }
+          })]
+        })
+      }), /* @__PURE__ */ jsx(Skeleton, {
         variant: "circular",
-        width: 24,
-        height: 24
-      })
-    })]
+        sx: {
+          margin: "0 5px",
+          minWidth: "16px",
+          minHeight: "16px"
+        }
+      }), /* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        sx: {
+          margin: "0 5px",
+          minWidth: "16px",
+          minHeight: "16px"
+        }
+      })]
+    })
   });
 }
 function getMainActions(isDesktop, moduleActions) {
@@ -480,38 +401,6 @@ function MainActions(props) {
     })
   });
 }
-const WindowPopUpsList = (props) => {
-  const {
-    areaId,
-    windowId
-  } = props;
-  const windowsPopUps = useAreasStore((state) => state.hashAreas[areaId].layoutItemsIds.filter((li) => state.hashWindows[li].parentLayoutId === windowId && state.hashWindows[li].emergeType === "popup").map((lim) => {
-    const w = state.hashWindows[lim];
-    return {
-      i: w.windowId,
-      url_icon: w.url_icon,
-      title: w.title
-    };
-  }), shallow);
-  const {
-    maximizeLayout
-  } = useAreasStore((state) => state.areaActions);
-  const onTouched = (layoutId) => {
-    maximizeLayout(areaId, layoutId);
-  };
-  const menuActions = windowsPopUps ? windowsPopUps.map((element) => {
-    return {
-      onClick: () => onTouched(element.i),
-      label: element.title,
-      urlIcon: element.url_icon
-    };
-  }) : null;
-  if (menuActions && menuActions.length > 0) {
-    return /* @__PURE__ */ jsx(Fragment, {});
-  } else {
-    return null;
-  }
-};
 function Header(props) {
   const {
     areaId,
@@ -592,7 +481,7 @@ function Header(props) {
     e.stopPropagation();
   };
   if (isSkeleton) {
-    return /* @__PURE__ */ jsx(SKTModuleHeader, {});
+    return /* @__PURE__ */ jsx(WindowHeaderSkeleton, {});
   }
   return /* @__PURE__ */ jsxs("div", {
     className: clsx(areasViewerClasses.windowHeader, "m4l_draggable_handle"),
@@ -609,10 +498,7 @@ function Header(props) {
         className: areasViewerClasses.windowHeaderCancelHandle,
         children: [!colapsed && /* @__PURE__ */ jsx(MainActions, {
           windowId
-        }), !colapsed ? /* @__PURE__ */ jsx(WindowPopUpsList, {
-          areaId,
-          windowId
-        }) : null, !colapsed && menuActions.length > 0 && /* @__PURE__ */ jsx(MemonizedMenuActions, {
+        }), !colapsed && menuActions.length > 0 && /* @__PURE__ */ jsx(MemonizedMenuActions, {
           arrowType: "no-arrow",
           marginTop: "12px!important",
           marginLeft: "14px!important",
@@ -650,6 +536,8 @@ function Header(props) {
   });
 }
 const MicroFrontend = (props) => {
+  const breakPoint = useResponsiveRelativeStore((state) => state.breakPoint, shallow);
+  console.log("test breakPoint", breakPoint);
   return /* @__PURE__ */ jsx(MFLoader, {
     ...props
   });
@@ -844,6 +732,7 @@ const Window = (props) => {
   const selected = useAreasStore((state) => {
     return emergeType === "layout" ? state.hashAreas[areaId]?.currentLayoutId : state.hashAreas[areaId]?.currentPopUpId;
   }) === windowId;
+  const observedDivRef = useRef(null);
   const mfProps = useAreasStore((state) => state.hashWindows[windowId]?.mfProps, shallow);
   const component = useAreasStore((state) => state.hashWindows[windowId]?.component, shallow);
   const loading = useAreasStore((state) => state.hashWindows[windowId]?.loading, shallow);
@@ -906,32 +795,43 @@ const Window = (props) => {
     ...process.env.NODE_ENV !== "production" ? {
       [TEST_PROP_ID]: getNameDataTestId(AREAS_VIEWER_CLASS_NAME, "windowRoot", `${emergeType}`)
     } : {},
-    children: /* @__PURE__ */ jsxs("div", {
-      className: areasViewerClasses.windowRootContainer,
-      children: [/* @__PURE__ */ jsx(Header, {
-        areaId,
-        windowId,
-        emergeType
-      }), /* @__PURE__ */ jsx(Toasties, {
-        windowId
-      }), /* @__PURE__ */ jsxs("div", {
-        className: clsx(
-          areasViewerClasses.windowContent
-        ),
-        children: [status === "init" ? /* @__PURE__ */ jsx(Fragment, {
-          children: "Cargando..."
-        }) : null, status === "loaded" ? winType === "microfrontend" ? /* @__PURE__ */ jsx(MemonizedMicroFrontend, {
-          moduleId,
-          dynamicMFStore,
-          windowTools,
-          ...mfProps
-        }) : /* @__PURE__ */ jsx(Component, {
-          moduleId,
-          dynamicMFStore,
-          windowTools,
-          component
-        }) : null]
-      })]
+    children: /* @__PURE__ */ jsx(ResponsiveRelativeProvider, {
+      observedDivRef,
+      children: /* @__PURE__ */ jsx("div", {
+        ref: observedDivRef,
+        className: "div-breakpoint-observer",
+        style: {
+          width: "100%",
+          height: "100%"
+        },
+        children: /* @__PURE__ */ jsxs("div", {
+          className: areasViewerClasses.windowRootContainer,
+          children: [/* @__PURE__ */ jsx(Header, {
+            areaId,
+            windowId,
+            emergeType
+          }), /* @__PURE__ */ jsx(Toasties, {
+            windowId
+          }), /* @__PURE__ */ jsxs("div", {
+            className: clsx(
+              areasViewerClasses.windowContent
+            ),
+            children: [status === "init" ? /* @__PURE__ */ jsx(Fragment, {
+              children: "Cargando..."
+            }) : null, status === "loaded" ? winType === "microfrontend" ? /* @__PURE__ */ jsx(MemonizedMicroFrontend, {
+              moduleId,
+              dynamicMFStore,
+              windowTools,
+              ...mfProps
+            }) : /* @__PURE__ */ jsx(Component, {
+              moduleId,
+              dynamicMFStore,
+              windowTools,
+              component
+            }) : null]
+          })]
+        })
+      })
     })
   });
 };

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/subcomponents/Header/subcomponents/WindowHeaderSkeleton/index.d.ts

@@ -0,0 +1,2 @@
+import { WindowHeaderSkeletonProps } from './types';
+export declare function WindowHeaderSkeleton(props: WindowHeaderSkeletonProps): import("react/jsx-runtime").JSX.Element;

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/subcomponents/Header/subcomponents/WindowHeaderSkeleton/types.d.ts

@@ -0,0 +1,3 @@
+export interface WindowHeaderSkeletonProps {
+    colapsed?: boolean;
+}

package/components/areas/contexts/AreasContext/helper.d.ts

@@ -1,8 +1,8 @@
 import { WritableDraft } from 'immer/dist/internal';
 import type { Area, AreasStateWithActions } from './types';
 import type { WindowState, WindowStateProps } from '../../types';
-export declare const PADDING_GRIDLAYOUT = 8;
-export declare const MARGIN_GRIDLAYOUT = 8;
+export declare const PADDING_GRIDLAYOUT = 10;
+export declare const MARGIN_GRIDLAYOUT = 10;
 export declare const DEBOUCED_SAVE_TIME = 500;
 export declare const THROTTLE_RESIZE_TIME = 300;
 export declare const COOKIE_BREAKPOINT_LAYOUTS = "layoutPros";

package/components/areas/contexts/AreasContext/{index.0dc69929.js → index.3eb6b2a4.js}

@@ -5,17 +5,17 @@ import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
 import { useHostTools, useModuleDictionary, useNetwork, useModuleSkeleton, EmitEvents } from "@m4l/core";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
-import { u as useAreasViewerUtilityClasses } from "../../components/AreasViewer/index.82a22acb.js";
-import { u as useAreasAdminUtilityClasses } from "../../components/AreasAdmin/index.debe3e3d.js";
+import { u as useAreasViewerUtilityClasses } from "../../components/AreasViewer/index.2a286dfa.js";
+import { u as useAreasAdminUtilityClasses } from "../../components/AreasAdmin/index.6d902d47.js";
 import { c as createDynamicMFStore } from "../DynamicMFParmsContext/index.1607c78e.js";
 import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary.08cfc4c9.js";
-import { a as addLayoutItemToBreakPointIfNoExists, b as addLayoutItemToBreakPoints, c as cloneLayouts } from "../../../GridLayout/subcomponents/Responsive/index.0fd1b7f8.js";
+import { a as addLayoutItemToBreakPointIfNoExists, b as addLayoutItemToBreakPoints, c as cloneLayouts } from "../../../GridLayout/subcomponents/Responsive/index.d2ec9ddb.js";
 import { debounce, cloneDeep } from "lodash";
 import { A as isEqualLayouts } from "../../../GridLayout/index.0996cd19.js";
 import { useNavigate } from "react-router-dom";
 import { jsx } from "react/jsx-runtime";
-const PADDING_GRIDLAYOUT = 8;
-const MARGIN_GRIDLAYOUT = 8;
+const PADDING_GRIDLAYOUT = 10;
+const MARGIN_GRIDLAYOUT = 10;
 const DEBOUCED_SAVE_TIME = 500;
 const COOKIE_BREAKPOINT_LAYOUTS = "layoutPros";
 const COOKIE_WINDOWS = "windows";

package/components/areas/hooks/useAreas/{index.ca15a4b6.js → index.febe901b.js}

@@ -1,6 +1,6 @@
 import { useContext } from "react";
 import { useStore } from "zustand";
-import { A as AreasContext } from "../../contexts/AreasContext/index.0dc69929.js";
+import { A as AreasContext } from "../../contexts/AreasContext/index.3eb6b2a4.js";
 function useAreasStore(selector, equalityFn) {
   const context = useContext(AreasContext);
   if (!context)

package/components/commercial/TopBar/{index.32a332c4.js → index.08853566.js}

@@ -5,11 +5,11 @@ import { g as getComponentUtilityClass } from "../../../utils/index.de903261.js"
 import { createContext, useContext, useState } from "react";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useEnvironment } from "@m4l/core";
-import { I as Icon } from "../../Icon/index.8c744412.js";
+import { I as Icon } from "../../Icon/index.58eaf354.js";
 import clsx from "clsx";
 import { g as getNameDataTestId } from "../../../test/getNameDataTestId.14875ec7.js";
-import { A as Accordion } from "../../mui_extended/Accordion/index.4393eca9.js";
-import { B as Button } from "../../mui_extended/Button/index.93389adb.js";
+import { A as Accordion } from "../../mui_extended/Accordion/index.a32a5761.js";
+import { B as Button } from "../../mui_extended/Button/index.81367a73.js";
 import { P as Popover } from "../../mui_extended/Popover/index.d85de73b.js";
 const componentName = "M4LTopBar";
 const TopBarClasses = generateUtilityClasses(componentName, [

package/components/formatters/BooleanFormatter/{index.0703a256.js → index.4bb3d2f9.js}

@@ -1,8 +1,8 @@
 import { useMemo } from "react";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
-import { I as Icon } from "../../Icon/index.8c744412.js";
+import { I as Icon } from "../../Icon/index.58eaf354.js";
 import { W as WrapperComponent } from "../../WrapperComponent/index.5e872594.js";
-import { F as FormatterRoot, f as formatterClasses } from "../index.94be7098.js";
+import { F as FormatterRoot, f as formatterClasses } from "../index.3e9e2305.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 const BOOLEAN_FORMATTER_DICTIONARY_KEY = `boolean_formatter`;

package/components/formatters/{index.94be7098.js → index.3e9e2305.js}

@@ -3,7 +3,7 @@ import "@mui/base";
 import { jsx } from "react/jsx-runtime";
 import { W as WrapperComponent } from "../WrapperComponent/index.5e872594.js";
 import { useModuleDictionary } from "@m4l/core";
-import { a as BOOLEAN_FORMATTER_DICTIONARY_KEY } from "./BooleanFormatter/index.0703a256.js";
+import { a as BOOLEAN_FORMATTER_DICTIONARY_KEY } from "./BooleanFormatter/index.4bb3d2f9.js";
 const COMPONENT_CLASS_NAME = "M4LFormatter";
 const formatterClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
   "root",

package/components/hook-form/RHFAutocomplete/classes/types.d.ts

@@ -18,6 +18,7 @@ export interface RHFAutocompleteClassesType {
     sizeSmall: string;
     sizeMedium: string;
     isFocus: string;
+    isTabSelected: string;
 }
 export declare type RHFAutocompleteClassesKey = keyof RHFAutocompleteClassesType;
 export declare type Classes = ReturnType<typeof useUtilityClasses>;

package/components/hook-form/RHFAutocomplete/{index.993794f8.js → index.f9be5465.js}

@@ -1,7 +1,7 @@
 import { useModuleDictionary, useModuleSkeleton, useEnvironment } from "@m4l/core";
 import { useFormContext, Controller } from "react-hook-form";
 import { styled, Skeleton, generateUtilityClasses, generateUtilityClass, useTheme, Autocomplete, Popper, TextField, CircularProgress } from "@mui/material";
-import { I as Image } from "../../Image/index.39b3b9d9.js";
+import { I as Image } from "../../Image/index.fa98eb78.js";
 import { useMemo, useRef, useState, useEffect } from "react";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
@@ -9,8 +9,9 @@ import { T as Typography } from "../../mui_extended/Typography/index.379dd374.js
 import { unstable_composeClasses } from "@mui/base";
 import { H as HelperText } from "../../HelperText/index.7d2afdb3.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
-import { F as FieldLabel } from "../../FieldLabel/index.1da2a28d.js";
-import { I as IconButton } from "../../mui_extended/IconButton/index.383f5496.js";
+import { u as useFormFocus } from "../../../vendor.47f1f3d4.js";
+import { F as FieldLabel } from "../../FieldLabel/index.8d3d6bb4.js";
+import { I as IconButton } from "../../mui_extended/IconButton/index.32fc9419.js";
 const AutocompleteRoot = styled("div")(({
   theme
 }) => ({
@@ -121,14 +122,15 @@ generateUtilityClasses(componentName, [
   "variantError",
   "sizeSmall",
   "sizeMedium",
-  "isFocus"
+  "isFocus",
+  "isTabSelected"
 ]);
 function getRHFAutocompleteClassesUtilityClass(slot) {
   return generateUtilityClass(componentName, slot);
 }
 const useUtilityClasses = (ownerState) => {
   const slots = {
-    root: ["root", ownerState.size === "small" && "sizeSmall", ownerState.size === "medium" && "sizeMedium", ownerState.focus && "isFocus", ownerState.disabled && "isDisabled", ownerState.semantics === "info" && "variantInfo", ownerState.semantics === "success" && "variantSuccess", ownerState.semantics === "warning" && "variantWarning", ownerState.semantics === "error" && "variantError", ownerState.imageWidthDefined && "imageWidthDefined"],
+    root: ["root", ownerState.size === "small" && "sizeSmall", ownerState.size === "medium" && "sizeMedium", ownerState.isFocus && "isFocus", ownerState.isTabSelected && "isTabSelected", ownerState.disabled && "isDisabled", ownerState.semantics === "info" && "variantInfo", ownerState.semantics === "success" && "variantSuccess", ownerState.semantics === "warning" && "variantWarning", ownerState.semantics === "error" && "variantError", ownerState.imageWidthDefined && "imageWidthDefined"],
     withImage: ["withImage"],
     skeleton: ["skeleton"],
     label: ["label"],
@@ -177,6 +179,13 @@ function RHFAutocomplete(props) {
     host_static_assets,
     environment_assets
   } = useEnvironment();
+  const {
+    isFocus,
+    isTabSelected,
+    handlerFocus,
+    handlerOnKeyUp,
+    handlerOnBlur
+  } = useFormFocus();
   const autocompleteRef = useRef(null);
   const [open, setOpen] = useState(false);
   const isDesktop = useResponsiveDesktop();
@@ -214,7 +223,6 @@ function RHFAutocomplete(props) {
       errors
     }
   } = useFormContext();
-  const [isFocus, setIsFocus] = useState(false);
   const [currentVariant, setCurrentVariant] = useState(null);
   useEffect(() => {
     if (errors[nameRHF]) {
@@ -225,23 +233,23 @@ function RHFAutocomplete(props) {
       setCurrentVariant(null);
     }
   }, [errors[nameRHF], variant, control]);
-  const handleFocus = () => {
-    setIsFocus(true);
-  };
-  const handleBlur = () => {
-    setIsFocus(false);
-  };
   const ownerState = {
     size: !isDesktop ? "medium" : size,
-    focus: isFocus,
+    isFocus: !isSkeleton ? isFocus : false,
+    isTabSelected: !isSkeleton ? isTabSelected : false,
     semantics: currentVariant,
     disabled,
     imageWidthDefined: imageWidth ? true : false
   };
   const classes = useUtilityClasses(ownerState);
+  console.log("classes ***", classes);
   const theme = useTheme();
   return /* @__PURE__ */ jsx(AutocompleteRoot, {
     className: classes.root,
+    tabIndex: 0,
+    onFocus: handlerFocus,
+    onBlur: handlerOnBlur,
+    onKeyUp: handlerOnKeyUp,
     ...process.env.NODE_ENV !== "production" ? {
       [TEST_PROP_ID]: `${RHFTAUTOCOMPLET_ROOT_TEST_ID}_${nameRHF}`
     } : {},
@@ -282,8 +290,6 @@ function RHFAutocomplete(props) {
             autoComplete: true,
             size,
             ref: autocompleteRef,
-            onFocus: handleFocus,
-            onBlur: handleBlur,
             autoSelect: false,
             options,
             getOptionLabel: getOptionLabelLocal,
@@ -358,6 +364,7 @@ function RHFAutocomplete(props) {
                       className: classes.iconDown,
                       src: `${host_static_assets}/${environment_assets}/frontend/components/RHFAutocompletarAsync/assets/icons/chevronDown.svg`,
                       onClick: (event) => onOpenLocal(event),
+                      disabled,
                       size
                     })
                   })

package/components/hook-form/RHFAutocomplete/types.d.ts

@@ -25,7 +25,8 @@ export interface RHFAutocompleteProps<T> extends Omit<TextFieldProps, 'label' |
     imageHeight?: string | number;
 }
 export interface OwnerState extends Pick<RHFAutocompleteProps<any>, 'size' | 'disabled'> {
-    focus: boolean;
+    isFocus: boolean;
+    isTabSelected: boolean;
     semantics: RHFAutocompleteVariants | 'error' | null;
     variant?: 'withImage';
     imageWidthDefined: boolean;

package/components/hook-form/RHFAutocompleteAsync/{index.924c6473.js → index.c01fd38a.js}

@@ -5,7 +5,7 @@ import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/mater
 import { unstable_composeClasses } from "@mui/base";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
 import { jsx } from "react/jsx-runtime";
-import { R as RHFAutocomplete, g as getRHFAutocompleteComponentsDictionary } from "../RHFAutocomplete/index.993794f8.js";
+import { R as RHFAutocomplete, g as getRHFAutocompleteComponentsDictionary } from "../RHFAutocomplete/index.f9be5465.js";
 styled("div")(() => ({
   display: "flex",
   width: "100%",

package/components/hook-form/RHFCheckbox/classes/types.d.ts

@@ -6,5 +6,7 @@ export interface RHFCheckboxClassesType {
     medium: string;
     stateDisabled: string;
     stateError: string;
+    isFocus: string;
+    isTabSelected: string;
 }
 export declare type RHFCheckboxClassesKey = keyof RHFCheckboxClassesType;