@m4l/components 9.1.93 → 9.1.94

package/components/areas/components/AreasAdmin/subcomponents/AreaChipMobile/subcomponents/ChipMobile/ChipMobile.js

@@ -1,22 +1,18 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { useState, useRef, useMemo } from "react";
 import * as Yup from "yup";
-import { useTheme } from "@mui/material";
 import { shallow } from "zustand/shallow";
 import TouchRipple from "@mui/material/ButtonBase/TouchRipple";
 import { u as useAreasStore } from "../../../../../../hooks/useAreas/index.js";
-import { useResponsiveDesktop } from "@m4l/graphics";
 import { g as getAreasDictionary, A as AREAS_DICCTIONARY } from "../../../../../../dictionary.js";
-import { a as areasAdminClasses } from "../../../../classes/index.js";
-import clsx from "clsx";
 import { I as ICONS } from "../../../../../../icons.js";
-import { C as ChipActionsMobile } from "../../../AreaChip/subcomponents/ChipActionsMobile/index.js";
-import { E as EditAreaHeader } from "../../../AreaChip/styles.js";
-import { I as IconButton } from "../../../../../../../mui_extended/IconButton/IconButton.js";
+import { C as ChipActionsMobile } from "../../../AreaChip/subcomponents/ChipActionsMobile/ChipActionsMobile.js";
+import { l as ChipMobileRootStyled, m as ChipMobileContentStyled, N as NameChipMobileStyled, n as EditAreaChipMobileContainerStyled } from "../../../../slots/AreasAdminSlots.js";
 import { R as RHFormProvider } from "../../../../../../../hook-form/RHFormContext/index.js";
 import { T as Typography } from "../../../../../../../mui_extended/Typography/Typography.js";
 import { A as ActionsContainer } from "../../../../../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
+import { M as MenuActions } from "../../../../../../../MenuActions/MenuActions.js";
 import { P as Popover } from "../../../../../../../mui_extended/Popover/Popover.js";
 import { R as RHFTextField } from "../../../../../../../hook-form/RHFTextField/RHFTextField.js";
 import { A as ActionCancel } from "../../../../../../../CommonActions/components/ActionCancel/ActionCancel.js";
@@ -25,29 +21,23 @@ const ChipMobile = (props) => {
   const { areaId, selected, disabled, setAnchorMenuAreas } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
   const { deleteArea, selectArea, editArea } = useAreasStore((state) => state.areasActions);
-  const { setFocus } = useAreasStore((state) => state.areaAdminActions);
   const areaName = useAreasStore((state) => state.hashAreas[areaId].name, shallow);
   const listAreas = useAreasStore((state) => state.areasIds, shallow);
   const [open, setOpen] = useState(false);
   const { getLabel } = useModuleDictionary();
-  const isDesktop = useResponsiveDesktop();
   const anchorRef = useRef(null);
-  const theme = useTheme();
   const onClickDeleteArea = (e) => {
     if (listAreas.length > 1) {
       e.stopPropagation();
-      setFocus(true);
       deleteArea(areaId);
     }
   };
   const onSubmit = (data) => {
     editArea(areaId, data.inputEditArea);
     setOpen(false);
-    setFocus(false);
   };
   const handlerOpenPopoverEditArea = (e) => {
     e?.stopPropagation();
-    setFocus(true);
     setOpen(true);
   };
   const initialValues = {
@@ -66,67 +56,55 @@ const ChipMobile = (props) => {
     selectArea(areaId);
   };
   const rippleRef = useRef(null);
-  const onRippleStart = (e) => {
-    if (rippleRef.current) {
-      rippleRef.current.start(e);
-    }
-  };
   const onRippleStop = (e) => {
     if (rippleRef.current) {
       rippleRef.current.stop(e);
     }
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  const menuActions = [
+    {
+      type: "menuItem",
+      startIcon: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.EDIT_AREA}`,
+      label: `${getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_edit_area))}`,
+      onClick: handlerOpenPopoverEditArea
+    },
+    {
+      type: "menuItem",
+      startIcon: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.DELETE_AREA}`,
+      label: `${getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_delete_area))}`,
+      onClick: onClickDeleteArea
+    }
+  ];
+  return /* @__PURE__ */ jsxs(ChipMobileRootStyled, { selected, disabled, ownerState: {}, children: [
     /* @__PURE__ */ jsxs(
-      "div",
+      ChipMobileContentStyled,
       {
+        ownerState: {},
         role: "presentation",
         ref: anchorRef,
-        onMouseDown: onRippleStart,
         onMouseUp: onRippleStop,
-        className: clsx(
-          areasAdminClasses.areaChipRoot,
-          selected ? areasAdminClasses.selected : null,
-          disabled ? areasAdminClasses.disabled : null
-        ),
         onClick: (e) => {
           handlerOnClick(e);
         },
         children: [
-          /* @__PURE__ */ jsx(TouchRipple, { ref: rippleRef, center: false, style: { position: "absolute", inset: "0" } }),
-          /* @__PURE__ */ jsx("div", { className: areasAdminClasses.areaChipTitle, children: areaName })
+          /* @__PURE__ */ jsx(TouchRipple, { ref: rippleRef, center: false }),
+          /* @__PURE__ */ jsx(NameChipMobileStyled, { ownerState: {}, variant: "body", children: `${areaName}` }),
+          /* @__PURE__ */ jsx(
+            MenuActions,
+            {
+              icon: `${host_static_assets}/${environment_assets}/frontend/components/window_base/assets/icons/${ICONS.MORE_VERTICAL}`,
+              arrowType: "no-arrow",
+              anchorOrigin: { vertical: "bottom", horizontal: "right" },
+              transformOrigin: { vertical: "top", horizontal: "right" },
+              menuActions
+            }
+          )
         ]
       }
     ),
-    isDesktop ? /* @__PURE__ */ jsxs("div", { className: areasAdminClasses.areaContainerChipEditButton, children: [
-      /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          className: areasAdminClasses.areaChipEditButton,
-          src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.EDIT_AREA}`,
-          size: "small",
-          onClick: (e) => {
-            handlerOpenPopoverEditArea(e);
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          className: areasAdminClasses.areaChipDeleteButton,
-          src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.DELETE_AREA}`,
-          size: "small",
-          onClick: (e) => {
-            onClickDeleteArea(e);
-          }
-        }
-      )
-    ] }) : /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(
       ChipActionsMobile,
-      {
-        areaId,
-        handlerOpenPopoverEditArea
-      }
+      {}
     ),
     /* @__PURE__ */ jsx(
       "div",
@@ -140,18 +118,12 @@ const ChipMobile = (props) => {
           {
             arrowType: "top-center",
             open,
-            className: areasAdminClasses.areaEditPopover,
             anchorEl: anchorRef.current,
             anchorOrigin: { vertical: "bottom", horizontal: "center" },
             transformOrigin: { vertical: "top", horizontal: "center" },
             onClose: () => {
-              setFocus(false);
               setOpen(false);
             },
-            sx: {
-              mt: "10px",
-              ...theme.components?.M4LAreasAdminEditPopover?.styleOverrides || {}
-            },
             children: /* @__PURE__ */ jsxs(
               RHFormProvider,
               {
@@ -159,20 +131,7 @@ const ChipMobile = (props) => {
                 values: initialValues,
                 validationSchema,
                 children: [
-                  /* @__PURE__ */ jsxs(EditAreaHeader, { children: [
-                    /* @__PURE__ */ jsx(Typography, { children: getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_edit_area)) }),
-                    /* @__PURE__ */ jsx(
-                      IconButton,
-                      {
-                        src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.CLOSE}`,
-                        size: "small",
-                        onClick: () => {
-                          setFocus(false);
-                          setOpen(false);
-                        }
-                      }
-                    )
-                  ] }),
+                  /* @__PURE__ */ jsx(EditAreaChipMobileContainerStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(Typography, { children: getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_edit_area)) }) }),
                   /* @__PURE__ */ jsx(
                     RHFTextField,
                     {
@@ -186,7 +145,6 @@ const ChipMobile = (props) => {
                       {
                         onClick: () => {
                           setOpen(false);
-                          setFocus(false);
                         },
                         variant: "outlined"
                       }

package/components/areas/components/AreasAdmin/subcomponents/AreaChipMobile/subcomponents/PanelWindowPopUp/index.d.ts

@@ -3,7 +3,7 @@ import { PanelWindowPopUpProps } from './types';
  * TODO: Documentar
  * @author Andrés Quintero - automatic
  * @createdAt 2024-12-27 08:27:31 - automatic
- * @updatedAt 2025-01-22 08:50:39 - automatic
+ * @updatedAt 2025-01-31 11:37:44 - automatic
  * @updatedUser cesar - automatic
  */
 export declare const PanelWindowPopUp: (props: PanelWindowPopUpProps) => import("react/jsx-runtime").JSX.Element;

package/components/areas/components/AreasAdmin/subcomponents/PanelWindowPopUp/{index.d.ts → PanelWindowPopUp.d.ts}

@@ -3,7 +3,7 @@ import { PanelWindowPopUpProps } from './types';
  * TODO: Documentar
  * @author Andrés Quintero - automatic
  * @createdAt 2024-12-27 08:27:31 - automatic
- * @updatedAt 2025-01-22 08:50:39 - automatic
+ * @updatedAt 2025-01-31 11:37:44 - automatic
  * @updatedUser cesar - automatic
  */
 export declare const PanelWindowPopUp: (props: PanelWindowPopUpProps) => import("react/jsx-runtime").JSX.Element | null;

package/components/areas/components/AreasAdmin/test/AreasAdmin.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/areas/components/AreasAdmin/types.d.ts

@@ -0,0 +1,47 @@
+import { Theme } from '@mui/material';
+import { AreasAdminSlots } from './slots/AreasAdminEnum';
+import { AREAS_ADMIN_KEY_COMPONENT } from './constants';
+import { ComponentPalletColor, Sizes } from '@m4l/styles';
+import { M4LOverridesStyleRules } from '../../../../../src/@types/augmentations';
+export type AreasAdminType = keyof typeof AreasAdminSlots;
+export interface AreasAdminProps {
+    /**
+     * Clase CSS personalizada que se aplicará al componente
+     */
+    color?: Extract<ComponentPalletColor, 'primary'>;
+    /**
+     * Opciones de tamaño del componente.
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * data-testid para pruebas unitarias.
+     */
+    dataTestId?: string;
+    /**
+     * Clase CSS para sobrescribir los estilos predeterminados del loader.
+     */
+    className?: string;
+    /**
+     * Props adicionales que se pueden pasar al loader.
+     */
+    [key: string]: unknown;
+}
+export interface AreasAdminOwnerState {
+    /**
+     * Indica si el dispositivo es móvil.
+     */
+    isMobile: boolean;
+    /**
+     * Tamaño del campo de texto.
+     */
+    size: AreasAdminProps['size'];
+    /**
+     * Color del componente.
+     */
+    color: AreasAdminProps['color'];
+    /**
+     * Props adicionales que se pueden pasar al loader.
+     */
+    [key: string]: unknown;
+}
+export type AreasAdminStyles = M4LOverridesStyleRules<AreasAdminType, typeof AREAS_ADMIN_KEY_COMPONENT, Theme>;

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

@@ -3,16 +3,36 @@ import { AreaWindowAction, WindowOptions } from '../../../../../../../../types';
 /**
  * TODO: Documentar
  * @updatedUser cesar - automatic
- * @updatedAt 2025-01-21 14:45:38 - automatic
+ * @updatedAt 2025-01-31 11:37:44 - automatic
+ * @createdAt 2025-01-31 11:37:43 - automatic
+ * @author cesar - automatic
+ * @updatedUser cesar - automatic
+ * @updatedAt 2025-01-31 11:37:44 - automatic
+ * @createdAt 2025-01-31 11:36:54 - automatic
+ * @author cesar - automatic
+ * @updatedUser cesar - automatic
+ * @updatedAt 2025-01-31 11:37:44 - automatic
+ * @createdAt 2025-01-31 11:36:15 - automatic
+ * @author cesar - automatic
+ * @updatedUser cesar - automatic
+ * @updatedAt 2025-01-31 11:37:44 - automatic
+ * @createdAt 2025-01-31 11:35:35 - automatic
+ * @author cesar - automatic
+ * @updatedUser cesar - automatic
+ * @updatedAt 2025-01-31 11:37:44 - automatic
+ * @createdAt 2025-01-31 11:34:36 - automatic
+ * @author cesar - automatic
+ * @updatedUser cesar - automatic
+ * @updatedAt 2025-01-31 11:37:44 - automatic
  * @createdAt 2025-01-21 14:45:38 - automatic
  * @author cesar - automatic
  * @updatedUser cesar - automatic
- * @updatedAt 2025-01-21 14:45:38 - automatic
+ * @updatedAt 2025-01-31 11:37:44 - automatic
  * @createdAt 2025-01-18 21:23:13 - automatic
  * @author cesar - automatic
  * @author cesar - automatic
  * @createdAt 2025-01-18 21:23:13 - automatic
- * @updatedAt 2025-01-21 14:45:38 - automatic
+ * @updatedAt 2025-01-31 11:37:44 - automatic
  * @updatedUser cesar - automatic
  */
 export declare function getMainActions(isDesktop: boolean | undefined, moduleActions: AreaWindowAction[]): AreaWindowAction[];

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

@@ -3,7 +3,7 @@ import { HeaderProps } from './types';
  * TODO: Documentar
  * @author Andrés Quintero - automatic
  * @createdAt 2024-12-27 08:27:31 - automatic
- * @updatedAt 2025-01-22 08:48:47 - automatic
+ * @updatedAt 2025-01-31 11:37:44 - automatic
  * @updatedUser cesar - automatic
  */
 export declare function Header(props: HeaderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -3,7 +3,7 @@ import { WindowPopUpsListProps } from './types';
  * TODO: Documentar
  * @author Andrés Quintero - automatic
  * @createdAt 2024-12-27 08:27:31 - automatic
- * @updatedAt 2025-01-21 14:45:38 - automatic
+ * @updatedAt 2025-01-31 11:37:44 - automatic
  * @updatedUser cesar - automatic
  */
 export declare const WindowPopUpsList: (props: WindowPopUpsListProps) => import("react/jsx-runtime").JSX.Element | null;

package/components/areas/components/index.d.ts

@@ -1,3 +1,3 @@
-export * from './AreasAdmin';
+export * from './AreasAdmin/AreasAdmin';
 export * from './AreasViewer';
 export type { NewWindowProps as NewWindow } from '../types';

package/components/areas/contexts/AreasContext/index.js

@@ -23,6 +23,7 @@ function AreasProvider(props) {
       networkOperation,
       ownerState: {
         status: "init",
+        readyForHooks: false,
         isMobile: !isDesktop,
         isSkeleton,
         focus: false
@@ -66,6 +67,7 @@ function AreasProvider(props) {
   }, [getLabel]);
   useEffect(() => {
     events_add_listener(EmitEvents.EMMIT_EVENT_HOST_EMERGE_WINDOW, addWindow);
+    setExternalState({ readyForHooks: true });
     return () => {
       events_remove_listener(EmitEvents.EMMIT_EVENT_HOST_EMERGE_WINDOW, addWindow);
     };

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

@@ -5,8 +5,8 @@ import { AreasStateWithActions, InitialAreasStoreProps } from './types';
  * @returns
  * @author Bruce Escobar - automatic
  * @createdAt 2024-10-22 09:41:31 - automatic
- * @updatedAt 2024-12-30 14:36:10 - automatic
- * @updatedUser Andrés Quintero - automatic
+ * @updatedAt 2025-01-29 16:33:53 - automatic
+ * @updatedUser cesar - automatic
  */
 export declare const createAreasStore: (initProps: InitialAreasStoreProps) => Omit<Omit<import('zustand').StoreApi<AreasStateWithActions>, "setState"> & {
     setState<A extends string | {