@m4l/components 9.1.93 → 9.1.95

package/components/mui_extended/Popover/Popover.styles.js

@@ -3,8 +3,8 @@ const popoverStyles = {
    * Styles applied to the Popover root element.
    * @author Andrés Quintero - automatic
    * @createdAt 2024-12-27 08:27:31 - automatic
-   * @updatedAt 2024-12-30 14:36:11 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2025-01-30 08:26:28 - automatic
+   * @updatedUser cesar - automatic
    */
   root: ({ theme }) => ({
     "&.M4lclassCssSpecificity": {
@@ -18,8 +18,8 @@ const popoverStyles = {
    * Styles applied to the Popover arrow element.
    * @author Andrés Quintero - automatic
    * @createdAt 2024-12-27 08:27:31 - automatic
-   * @updatedAt 2024-12-30 14:36:11 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2025-01-30 08:26:28 - automatic
+   * @updatedUser cesar - automatic
    */
   arrow: () => ({})
 };

package/components/mui_extended/Select/Select.styles.js

@@ -5,7 +5,7 @@ const selectStyles = {
    * Estilos para el componente Select
    * @author Bruce Escobar - automatic
    * @createdAt 2024-10-22 10:30:26 - automatic
-   * @updatedAt 2025-01-17 19:00:56 - automatic
+   * @updatedAt 2025-01-31 11:37:44 - automatic
    * @updatedUser cesar - automatic
    */
   root: ({ theme, ownerState }) => ({
@@ -107,7 +107,7 @@ const selectStyles = {
    * @returns {object} The styles for the render option container
    * @author SebastianM - automatic
    * @createdAt 2024-12-18 15:11:13 - automatic
-   * @updatedAt 2025-01-17 19:00:56 - automatic
+   * @updatedAt 2025-01-31 11:37:44 - automatic
    * @updatedUser cesar - automatic
    */
   renderValueContainer: ({ theme }) => ({
@@ -123,7 +123,7 @@ const selectStyles = {
    * Styles for the label option
    * @author SebastianM - automatic
    * @createdAt 2024-12-23 10:47:53 - automatic
-   * @updatedAt 2025-01-17 19:00:56 - automatic
+   * @updatedAt 2025-01-31 11:37:44 - automatic
    * @updatedUser cesar - automatic
    */
   labelOption: ({ theme }) => ({
@@ -135,7 +135,7 @@ const selectStyles = {
    * @returns {object} The styles for the label placeholder
    * @author SebastianM - automatic
    * @createdAt 2024-12-26 14:16:33 - automatic
-   * @updatedAt 2025-01-17 19:00:56 - automatic
+   * @updatedAt 2025-01-31 11:37:44 - automatic
    * @updatedUser cesar - automatic
    */
   labelPlaceholer: ({ theme }) => ({
@@ -165,7 +165,7 @@ const selectStyles = {
    * Styles for the skeleton select component
    * @author SebastianM - automatic
    * @createdAt 2024-12-17 15:54:22 - automatic
-   * @updatedAt 2025-01-17 19:00:56 - automatic
+   * @updatedAt 2025-01-31 11:37:44 - automatic
    * @updatedUser cesar - automatic
    */
   skeletonSelect: ({ theme, ownerState }) => ({

package/components/mui_extended/Select/types.d.ts

@@ -27,14 +27,20 @@ export type selectOption<T = unknown> = {
 export interface SelectProps<T> extends Omit<MUISelectProps<T>, 'size' | 'onChange' | 'error' | 'variant' | 'color'> {
     /**
      * Lista de opciones para enseñar en el Select.
+     * @createdAt 2025-01-31 11:34:36 - automatic
      */
     options: selectOption<T>[];
     /**
      * Tamaño del Select.
+     * @createdAt 2025-01-31 11:34:36 - automatic
      */
     size?: Extract<Sizes, 'small' | 'medium'>;
     /**
      * procedimiento para ejecutarse cuando cabia la selección.
+     * @author cesar - automatic
+     * @createdAt 2025-01-31 11:34:36 - automatic
+     * @updatedAt 2025-01-31 11:37:44 - automatic
+     * @updatedUser cesar - automatic
      */
     onChange?: (option: selectOption<T>) => void;
     /**

package/components/mui_extended/Stack/Stack.d.ts

@@ -1,5 +1,9 @@
 import { StackProps } from './types';
 /**
  * Stack es un componente contenedor para organizar elementos vertical u horizontalmente.
+ * @author cesar - automatic
+ * @createdAt 2025-02-04 15:44:12 - automatic
+ * @updatedAt 2025-02-04 15:44:12 - automatic
+ * @updatedUser cesar - automatic
  */
 export declare const Stack: (props: StackProps) => import("react/jsx-runtime").JSX.Element;

package/index.js

@@ -16,7 +16,7 @@ import { v } from "./components/animate/variants/fade.js";
 import { v as v2 } from "./components/animate/variants/bounce.js";
 import { v as v3 } from "./components/animate/variants/container.js";
 import { v as v4, a, b } from "./components/animate/variants/transition.js";
-import { A as A2 } from "./components/areas/components/AreasAdmin/index.js";
+import { A as A2 } from "./components/areas/components/AreasAdmin/AreasAdmin.js";
 import { A as A3 } from "./components/areas/components/AreasViewer/index.js";
 import { a as a2, W } from "./components/areas/contexts/WindowToolsMFContext/index.js";
 import { c as c2 } from "./components/areas/contexts/DynamicMFParmsContext/store.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.1.93",
+  "version": "9.1.95",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"
@@ -53,7 +53,7 @@
     "zustand": "4.3.6"
   },
   "peerDependencies": {
-    "@m4l/core": "^2.0.15",
+    "@m4l/core": "^2.0.18",
     "@m4l/graphics": "^7.0.8",
     "@m4l/styles": "^7.1.18",
     "@mui/lab": "5.0.0-alpha.173",

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

@@ -1,10 +0,0 @@
-/**
- * Componente para administrar áreas.
- * Este componente permite al usuario administrar las áreas disponibles,
- * seleccionar un área específica y agregar nuevas áreas.
- * Utiliza hooks como useAreasStore, useEnvironment, useModuleDictionary y useResponsiveDesktop.
- */
-/**
- * TODO: Documentar
- */
-export declare function AreasAdmin(): import("react/jsx-runtime").JSX.Element | null;

package/components/areas/components/AreasAdmin/index.js

@@ -1,95 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { u as useAreasStore } from "../../hooks/useAreas/index.js";
-import { useEnvironment, useModuleDictionary } from "@m4l/core";
-import { A as AreaChip } from "./subcomponents/AreaChip/index.js";
-import { shallow } from "zustand/shallow";
-import { A as AreasAdminRoot } from "./styles.js";
-import { a as areasAdminClasses } from "./classes/index.js";
-import { I as ICONS } from "../../icons.js";
-import { S as ScrollBar } from "../../../ScrollBar/index.js";
-import { useResponsiveDesktop } from "@m4l/graphics";
-import { A as AreaChipMobile } from "./subcomponents/AreaChipMobile/index.js";
-import { useRef } from "react";
-import { u as useOnClickOutside } from "../../utils/useOnClickOutside/index.js";
-import { P as PanelWindowPopUp } from "./subcomponents/PanelWindowPopUp/index.js";
-import { g as getAreasDictionary, A as AREAS_DICCTIONARY } from "../../dictionary.js";
-import { I as IconButton } from "../../../mui_extended/IconButton/IconButton.js";
-function AreasAdmin() {
-  const areas = useAreasStore((state) => state.areasIds, shallow);
-  const currentArea = useAreasStore((state) => state.currentAreaId, shallow);
-  const status = useAreasStore((state) => state.ownerState.status);
-  const { setFocus } = useAreasStore((state) => state.areaAdminActions, shallow);
-  const classesRoot = useAreasStore((state) => state.adminClasses.root);
-  const areasLength = useAreasStore((state) => state.areasIds.length);
-  const isDesktop = useResponsiveDesktop();
-  const { addArea } = useAreasStore((state) => state.areasActions, shallow);
-  const maximizedId = useAreasStore(
-    (state) => state.hashAreas[currentArea] ? state.hashAreas[currentArea].maximizedId : false,
-    shallow
-  );
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { getLabel } = useModuleDictionary();
-  const divRef = useRef(null);
-  const divRefOut = useRef(null);
-  const handleClickOutsideFn = () => {
-    setFocus(false);
-  };
-  useOnClickOutside(divRef, handleClickOutsideFn, divRefOut);
-  const rippleRef = useRef(null);
-  const onRippleStart = (e) => {
-    if (rippleRef.current) {
-      rippleRef.current.start(e);
-    }
-  };
-  const onRippleStop = (e) => {
-    if (rippleRef.current) {
-      rippleRef.current.stop(e);
-    }
-  };
-  if (status !== "loaded") {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    AreasAdminRoot,
-    {
-      ref: divRefOut,
-      onMouseDown: onRippleStart,
-      onMouseUp: onRippleStop,
-      className: classesRoot,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          role: "presentation",
-          ref: divRef,
-          className: areasAdminClasses.rootContent,
-          onClick: () => setFocus(true),
-          children: [
-            /* @__PURE__ */ jsx("div", { className: areasAdminClasses.areaContainerChipsIcon, children: /* @__PURE__ */ jsx("div", { className: areasAdminClasses.areaContainerChips, children: /* @__PURE__ */ jsx("div", { className: areasAdminClasses.areaContainerContentChips, children: isDesktop ? /* @__PURE__ */ jsx(ScrollBar, { children: /* @__PURE__ */ jsx("div", { className: areasAdminClasses.areaContentChips, children: areas.map((area) => /* @__PURE__ */ jsx(
-              AreaChip,
-              {
-                areaId: area,
-                selected: area === currentArea,
-                disabled: areasLength === 1
-              },
-              area
-            )) }) }) : /* @__PURE__ */ jsx(AreaChipMobile, {}) }) }) }),
-            isDesktop ? /* @__PURE__ */ jsx(
-              IconButton,
-              {
-                className: areasAdminClasses.areasAddButton,
-                src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.ADD_AREA}`,
-                size: "small",
-                onClick: addArea,
-                tooltip: getLabel(getAreasDictionary(AREAS_DICCTIONARY.area_add_new))
-              }
-            ) : null,
-            !isDesktop && maximizedId ? /* @__PURE__ */ jsx(PanelWindowPopUp, { currentAreaId: currentArea }) : null
-          ]
-        }
-      )
-    }
-  );
-}
-export {
-  AreasAdmin as A
-};

package/components/areas/components/AreasAdmin/styles.js

@@ -1,17 +0,0 @@
-import { styled } from "@mui/material";
-import { a as areasAdminClasses } from "./classes/index.js";
-const AreasAdminRoot = styled("div")`
-  display: flex;
-  position: relative;
-  background-color: transparent;
-
-  //areaRoot
-  & .${areasAdminClasses.areaChipRoot} {
-    display: flex;
-  }
-
-  ${(props) => props.theme.components?.M4LAreasAdmin?.styleOverrides}
-`;
-export {
-  AreasAdminRoot as A
-};

package/components/areas/components/AreasAdmin/subcomponents/AreaChip/styles.js

@@ -1,29 +0,0 @@
-import { styled } from "@mui/material/styles";
-styled("div")(() => ({
-  display: "flex",
-  flexDirection: "row",
-  border: "1px solid gray",
-  "&.active": {
-    border: "1px solid red"
-  }
-}));
-styled("div")(({ theme }) => ({
-  height: "100%",
-  width: theme.spacing(1),
-  backgroundColor: theme.vars.palette.background.default,
-  "&.active": {
-    backgroundColor: theme.vars.palette.primary.main
-  }
-}));
-const EditAreaHeader = styled("div")(({ theme }) => ({
-  display: "flex",
-  width: "100%",
-  height: "25px",
-  borderBottom: "1px solid",
-  borderColor: theme.vars.palette.border.default,
-  justifyContent: "space-between",
-  alignItems: "center"
-}));
-export {
-  EditAreaHeader as E
-};

package/components/areas/components/AreasAdmin/subcomponents/AreaChip/subcomponents/ChipActionsMobile/index.js

@@ -1,56 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useEnvironment, useModuleDictionary } from "@m4l/core";
-import { I as ICONS } from "../../../../../../icons.js";
-import { g as getAreasDictionary, A as AREAS_DICCTIONARY } from "../../../../../../dictionary.js";
-import { u as useAreasStore } from "../../../../../../hooks/useAreas/index.js";
-import { shallow } from "zustand/shallow";
-import { M as MenuActions } from "../../../../../../../MenuActions/MenuActions.js";
-const ChipActionsMobile = (props) => {
-  const { handlerOpenPopoverEditArea, areaId } = props;
-  const { deleteArea } = useAreasStore((state) => state.areasActions);
-  const { setFocus } = useAreasStore((state) => state.areaAdminActions, shallow);
-  const listAreas = useAreasStore((state) => state.areasIds, shallow);
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { getLabel } = useModuleDictionary();
-  const menuActions = [
-    {
-      type: "menuItem",
-      startIcon: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.EDIT_AREA}`,
-      onClick: handlerOpenPopoverEditArea,
-      label: getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_edit_area))
-    }
-  ];
-  if (listAreas.length > 1) {
-    menuActions.push({
-      type: "menuItem",
-      startIcon: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.DELETE_AREA}`,
-      /**
-       * OnClick
-       * @author Andrés Quintero - automatic
-       * @createdAt 2024-12-27 08:27:31 - automatic
-       * @updatedAt 2025-01-22 08:48:47 - automatic
-       * @updatedUser cesar - automatic
-       */
-      onClick: () => {
-        deleteArea(areaId);
-        setFocus(false);
-      },
-      label: getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_delete_area))
-    });
-  }
-  return /* @__PURE__ */ jsx(
-    MenuActions,
-    {
-      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.SHOW_OPTIONS}`,
-      arrowType: "no-arrow",
-      marginTop: "12px",
-      anchorOrigin: { vertical: "bottom", horizontal: "right" },
-      transformOrigin: { vertical: "top", horizontal: "right" },
-      menuActions,
-      externalClose: () => setFocus(false)
-    }
-  );
-};
-export {
-  ChipActionsMobile as C
-};

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

@@ -1,96 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { u as useAreasStore } from "../../../../hooks/useAreas/index.js";
-import { shallow } from "zustand/shallow";
-import { a as areasAdminClasses } from "../../classes/index.js";
-import { useModuleDictionary, useEnvironment } from "@m4l/core";
-import { I as ICONS } from "../../../../icons.js";
-import { useState, useMemo } from "react";
-import { g as getAreasDictionary, A as AREAS_DICCTIONARY } from "../../../../dictionary.js";
-import { useTheme } from "@mui/material";
-import { C as ChipMobile } from "./subcomponents/ChipMobile/ChipMobile.js";
-import { M as MenuActions } from "../../../../../MenuActions/MenuActions.js";
-import { B as Button } from "../../../../../mui_extended/Button/Button.js";
-const AreaChipMobile = () => {
-  const areas = useAreasStore(
-    (state) => state.areasIds.map((a) => ({ id: a, name: state.hashAreas[a].name })),
-    shallow
-  );
-  const { selectArea } = useAreasStore((state) => state.areasActions);
-  const currentAreaId = useAreasStore((state) => state.currentAreaId, shallow);
-  const { addArea } = useAreasStore((state) => state.areasActions, shallow);
-  const { setFocus } = useAreasStore((state) => state.areaAdminActions, shallow);
-  const [anchorMenuAreas, setAnchorMenuAreas] = useState(null);
-  const { getLabel } = useModuleDictionary();
-  const theme = useTheme();
-  const currentArea = areas.find((area) => area.id === currentAreaId);
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const menuActions = useMemo(
-    () => areas.filter((area) => area.id !== currentAreaId).map((area) => {
-      return {
-        urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.LAYERS}`,
-        /**
-         * OnClick
-         * @author SebastianM - automatic
-         * @createdAt 2024-11-06 09:00:05 - automatic
-         * @updatedAt 2025-01-22 08:50:39 - automatic
-         * @updatedUser cesar - automatic
-         */
-        onClick: () => {
-          selectArea(area.id);
-          setFocus(false);
-        },
-        label: area.name,
-        type: "menuItem"
-      };
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [areas, currentAreaId]
-  );
-  const handlerSetAnchorMenuAreas = (element) => {
-    setFocus(false);
-    setAnchorMenuAreas(element);
-  };
-  return /* @__PURE__ */ jsx("div", { className: areasAdminClasses.areaChipMobileRoot, children: /* @__PURE__ */ jsxs("div", { className: areasAdminClasses.areaContainerContentChips, children: [
-    currentArea ? /* @__PURE__ */ jsx(
-      ChipMobile,
-      {
-        areaId: currentArea.id,
-        selected: true,
-        disabled: true,
-        setAnchorMenuAreas
-      },
-      currentArea.id
-    ) : null,
-    menuActions.length >= 0 ? /* @__PURE__ */ jsx("div", { className: areasAdminClasses.areaChipMobileIconContainer, children: /* @__PURE__ */ jsx(
-      MenuActions,
-      {
-        urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.CHEVRON_DOWN}`,
-        arrowType: "no-arrow",
-        marginTop: "12px!important",
-        marginLeft: "14px!important",
-        anchorOrigin: { vertical: "bottom", horizontal: "right" },
-        transformOrigin: { vertical: "top", horizontal: "right" },
-        menuActions,
-        externalOpen: anchorMenuAreas,
-        externalClose: handlerSetAnchorMenuAreas,
-        className: areasAdminClasses.areasPopoverMobileOptions,
-        menuActionSx: theme.components?.M4LAreasAdminMobilePopoverOptions?.styleOverrides,
-        endListElement: /* @__PURE__ */ jsx(
-          Button,
-          {
-            onClick: () => {
-              addArea();
-              setAnchorMenuAreas(null);
-            },
-            variant: "outlined",
-            startIcon: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.ADD_AREA}`,
-            label: getLabel(getAreasDictionary(AREAS_DICCTIONARY.area_add_new))
-          }
-        )
-      }
-    ) }) : null
-  ] }) });
-};
-export {
-  AreaChipMobile as A
-};

package/components/areas/components/AreasAdmin/subcomponents/PanelWindowPopUp/index.js

@@ -1,54 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useEnvironment } from "@m4l/core";
-import { shallow } from "zustand/shallow";
-import { useTheme } from "@mui/material";
-import { u as useAreasStore } from "../../../../hooks/useAreas/index.js";
-import { I as ICONS } from "../../../../icons.js";
-import { a as areasAdminClasses } from "../../classes/index.js";
-import { M as MenuActions } from "../../../../../MenuActions/MenuActions.js";
-const PanelWindowPopUp = (props) => {
-  const { currentAreaId } = props;
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const windowsLayouts = useAreasStore(
-    (state) => state.hashAreas[currentAreaId].layoutItemsIds.filter((li) => state.hashWindows[li].emergeType === "layout").map((lim) => {
-      const w = state.hashWindows[lim];
-      return {
-        i: w.windowId,
-        url_icon: w.iconUrl,
-        title: w.title
-      };
-    }),
-    shallow
-  );
-  const theme = useTheme();
-  const { maximizeLayout } = useAreasStore((state) => state.areaActions);
-  const onTouched = (layoutId) => {
-    maximizeLayout(currentAreaId, layoutId);
-  };
-  const menuActions = windowsLayouts.map((element) => {
-    return {
-      type: "menuItem",
-      onClick: () => onTouched(element.i),
-      label: element.title,
-      urlIcon: element.url_icon
-    };
-  });
-  return menuActions.length > 0 ? /* @__PURE__ */ jsx(
-    MenuActions,
-    {
-      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.LAYERS}`,
-      arrowType: "no-arrow",
-      marginTop: "12px!important",
-      marginLeft: "14px!important",
-      anchorOrigin: { vertical: "bottom", horizontal: "right" },
-      transformOrigin: { vertical: "top", horizontal: "right" },
-      menuActions,
-      className: areasAdminClasses.areasPopoverListWindows,
-      iconButtonClassName: areasAdminClasses.areasPopoverListWindowsIcon,
-      menuActionSx: theme.components?.M4LAreasAdminMobilePopoverOptions?.styleOverrides
-    }
-  ) : null;
-};
-export {
-  PanelWindowPopUp as P
-};

package/components/areas/utils/useOnClickOutside/index.js

@@ -1,22 +0,0 @@
-import { useEffect } from "react";
-function useOnClickOutside(ref, handler, noRef) {
-  useEffect(() => {
-    const listener = (event) => {
-      const el = ref?.current;
-      const noEl = noRef?.current;
-      if (!el || el.contains(event.target) || noEl && noEl.contains(event.target)) {
-        return;
-      }
-      handler(event);
-    };
-    document.addEventListener("mousedown", listener);
-    document.addEventListener("touchstart", listener);
-    return () => {
-      document.removeEventListener("mousedown", listener);
-      document.removeEventListener("touchstart", listener);
-    };
-  }, [ref, handler]);
-}
-export {
-  useOnClickOutside as u
-};