@m4l/components 7.0.0 → 7.1.2

package/components/mui_extended/Typography/utils/Clases/index.js

@@ -0,0 +1,22 @@
+import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+generateUtilityClasses("M4LTypography", [
+  /* elements */
+  "root"
+  /* states or variants of elements */
+]);
+function getTypographyClassesUtilityClass(slot) {
+  return generateUtilityClass("M4LTypography", slot);
+}
+const useUtilityClasses = () => {
+  const slots = {
+    root: ["root"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getTypographyClassesUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+export {
+  useUtilityClasses as u
+};

package/components/mui_extended/Typography/utils/Clases/types.d.ts

@@ -1,4 +1,4 @@
 export interface TypographyClassesType {
     root: string;
 }
-export declare type TypographyClassesKey = keyof TypographyClassesType;
+export type TypographyClassesKey = keyof TypographyClassesType;

package/components/mui_extended/index.js

@@ -0,0 +1 @@
+

package/components/popups/components/PopupsProvider/contexts/PopupsContext/PopupsContext.d.ts

@@ -1,19 +1,22 @@
-import React from 'react';
-import type { PopupsProviderProps } from './types';
-declare const PopupsContext: React.Context<(Omit<Omit<import("zustand").StoreApi<import("./types").PopupsStateWithActions>, "setState"> & {
+import { default as React } from 'react';
+import { PopupsProviderProps } from './types';
+declare const PopupsContext: React.Context<(Omit<Omit<import('zustand').StoreApi<import('./types').PopupsStateWithActions>, "setState"> & {
     setState<A extends string | {
         type: unknown;
-    }>(partial: import("./types").PopupsStateWithActions | Partial<import("./types").PopupsStateWithActions> | ((state: import("./types").PopupsStateWithActions) => import("./types").PopupsStateWithActions | Partial<import("./types").PopupsStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
+    }>(partial: import('./types').PopupsStateWithActions | Partial<import('./types').PopupsStateWithActions> | ((state: import('./types').PopupsStateWithActions) => import('./types').PopupsStateWithActions | Partial<import('./types').PopupsStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
 }, "setState"> & {
-    setState(nextStateOrUpdater: import("./types").PopupsStateWithActions | Partial<import("./types").PopupsStateWithActions> | ((state: import("immer/dist/internal").WritableDraft<import("./types").PopupsStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
+    setState(nextStateOrUpdater: import('./types').PopupsStateWithActions | Partial<import('./types').PopupsStateWithActions> | ((state: import('immer/dist/internal').WritableDraft<import('./types').PopupsStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
         type: unknown;
     } | undefined): void;
 }) | null>;
 /**
- * @description Provedor del contexto de los popups.
+ * Provedor del contexto de los popups.
  * Expone el store (PopupsStore) encargado de gestionar la creación, modificación y borrado de capas.
  * @param props
  * @returns
  */
+/**
+ * TODO: Documentar
+ */
 declare function PopupsProvider(props: PopupsProviderProps): import("react/jsx-runtime").JSX.Element;
 export { PopupsProvider, PopupsContext };

package/components/popups/components/PopupsProvider/contexts/PopupsContext/PopupsContext.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import React, { createContext, useRef, useEffect } from "react";
+import { useStore } from "zustand";
+import { shallow } from "zustand/shallow";
+import { useFirstRender } from "@m4l/graphics";
+import { useModuleDictionary } from "@m4l/core";
+import { c as createPopupsStore } from "./store.js";
+const PopupsContext = createContext(null);
+function PopupsProvider(props) {
+  const { children, initialPopups, baseZindex = 0, storeId, containerElement } = props;
+  const { getLabel } = useModuleDictionary();
+  const isFirstRender = useFirstRender([getLabel]);
+  const popupsStoreRef = useRef();
+  if (!popupsStoreRef.current) {
+    popupsStoreRef.current = createPopupsStore({
+      getLabel,
+      baseZindex,
+      storeId,
+      containerElement
+    });
+    popupsStoreRef.current?.getState().popupsActions.init(initialPopups || []);
+  }
+  const { setHandlerGetLabel } = useStore(
+    popupsStoreRef.current,
+    (state) => state.popupsActions,
+    shallow
+  );
+  useEffect(() => {
+    if (!isFirstRender) {
+      setHandlerGetLabel(getLabel);
+    }
+  }, [getLabel]);
+  return /* @__PURE__ */ jsx(PopupsContext.Provider, { value: popupsStoreRef.current, children: /* @__PURE__ */ jsx(React.Fragment, { children }) });
+}
+export {
+  PopupsProvider as P,
+  PopupsContext as a
+};

package/components/popups/components/PopupsProvider/contexts/PopupsContext/index.js

@@ -0,0 +1 @@
+

package/components/popups/components/PopupsProvider/contexts/PopupsContext/store.d.ts

@@ -1,16 +1,19 @@
-import type { PopupsStateWithActions, InitialPopupsStoreProps } from './types';
+import { PopupsStateWithActions, InitialPopupsStoreProps } from './types';
 /**
- * @description Crea el Store, por defecto inicia en estado 'init'
+ * Crea el Store, por defecto inicia en estado 'init'
  * @param initProps propiedades iniciales del store
  * @returns
  */
-export declare const createPopupsStore: (initProps: InitialPopupsStoreProps) => Omit<Omit<import("zustand").StoreApi<PopupsStateWithActions>, "setState"> & {
+/**
+ * Crea el store de los popups
+ */
+export declare const createPopupsStore: (initProps: InitialPopupsStoreProps) => Omit<Omit<import('zustand').StoreApi<PopupsStateWithActions>, "setState"> & {
     setState<A extends string | {
         type: unknown;
     }>(partial: PopupsStateWithActions | Partial<PopupsStateWithActions> | ((state: PopupsStateWithActions) => PopupsStateWithActions | Partial<PopupsStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
 }, "setState"> & {
-    setState(nextStateOrUpdater: PopupsStateWithActions | Partial<PopupsStateWithActions> | ((state: import("immer/dist/internal").WritableDraft<PopupsStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
+    setState(nextStateOrUpdater: PopupsStateWithActions | Partial<PopupsStateWithActions> | ((state: import('immer/dist/internal').WritableDraft<PopupsStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
         type: unknown;
     } | undefined): void;
 };
-export declare type PopupsStoreWithActionsType = ReturnType<typeof createPopupsStore>;
+export type PopupsStoreWithActionsType = ReturnType<typeof createPopupsStore>;

package/components/popups/components/PopupsProvider/contexts/PopupsContext/store.js

@@ -0,0 +1,160 @@
+import { createStore } from "zustand";
+import { devtools } from "zustand/middleware";
+import { immer } from "zustand/middleware/immer";
+import cloneDeep from "lodash.clonedeep";
+const createPopupsStore = (initProps) => {
+  const startProps = {
+    currentZindex: initProps.baseZindex,
+    popupsIds: [],
+    hashPopups: {},
+    getContainer: () => initProps.containerElement,
+    ...initProps
+  };
+  return createStore(
+    devtools(
+      immer((set, get) => ({
+        ...startProps,
+        popupsActions: {
+          /**
+           * TODO: Documentar
+           */
+          init: (initialPopups) => {
+            set((state) => {
+              let maxZindex = state.baseZindex;
+              for (let index = 0; index < initialPopups.length; index++) {
+                state.hashPopups[initialPopups[index].popupId] = cloneDeep(initialPopups[index]);
+                state.popupsIds.push(initialPopups[index].popupId);
+                if (initialPopups[index].zIndex > maxZindex) {
+                  maxZindex = initialPopups[index].zIndex;
+                }
+              }
+              state.currentZindex = maxZindex + 1;
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          addPopup: (popupProps, options) => {
+            if (get().hashPopups[popupProps.popupId]) {
+              throw new Error(`Poupup with id ${popupProps.popupId} already exists`);
+            }
+            if (options?.closeOthers) {
+              set((state) => {
+                state.popupsIds.forEach((popupId) => {
+                  state.hashPopups[popupId].status = "closing";
+                });
+                state.hashPopups[popupProps.popupId] = {
+                  ...popupProps,
+                  status: "init",
+                  zIndex: state.currentZindex
+                };
+                state.popupsIds.push(popupProps.popupId);
+                state.currentZindex = state.currentZindex + 1;
+              });
+            } else {
+              set((state) => {
+                state.hashPopups[popupProps.popupId] = {
+                  ...popupProps,
+                  status: "init",
+                  zIndex: state.currentZindex
+                };
+                state.popupsIds.push(popupProps.popupId);
+                state.currentZindex = state.currentZindex + 1;
+              });
+            }
+          },
+          /**
+           * TODO: Documentar
+           */
+          removePopup: (popupId) => {
+            if (!get().hashPopups[popupId]) {
+              return;
+            }
+            set((state) => {
+              state.popupsIds.splice(state.popupsIds.indexOf(popupId), 1);
+              delete state.hashPopups[popupId];
+              if (state.popupsIds.length === 0) {
+                state.currentZindex = state.baseZindex;
+              } else {
+                state.currentZindex = state.currentZindex - 1;
+              }
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          closePopup: (popupId) => {
+            if (!get().hashPopups[popupId]) {
+              return;
+            }
+            set((state) => {
+              state.hashPopups[popupId].status = "closing";
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          updatePopup: (popupId, popupProps) => {
+            if (!get().hashPopups[popupId]) {
+              return;
+            }
+            set((state) => {
+              state.hashPopups[popupId] = { ...state.hashPopups[popupId], ...popupProps };
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          showPopup: (popupId) => {
+            if (!get().hashPopups[popupId]) {
+              return;
+            }
+            set((state) => {
+              state.hashPopups[popupId].status = "init";
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          hidePopup: (popupId) => {
+            if (!get().hashPopups[popupId]) {
+              return;
+            }
+            set((state) => {
+              state.hashPopups[popupId].status = "hidden";
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          setPopupOnFront: (popupId) => {
+            if (!get().hashPopups[popupId]) {
+              return;
+            }
+            set((state) => {
+              const maxIndex = state.popupsIds.reduce((max, _pId, cIndex) => {
+                return state.hashPopups[state.popupsIds[cIndex]].zIndex > max ? state.hashPopups[state.popupsIds[cIndex]].zIndex : max;
+              }, state.hashPopups[state.popupsIds[0]].zIndex);
+              if (state.hashPopups[popupId].zIndex !== maxIndex) {
+                state.hashPopups[popupId].zIndex = state.currentZindex;
+                state.currentZindex = state.currentZindex + 1;
+              }
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          setHandlerGetLabel: (newHandler) => {
+            set((state) => {
+              state.getLabel = newHandler;
+            });
+          }
+        }
+      })),
+      { name: `Popups store: ${initProps.storeId}` }
+    )
+  );
+};
+export {
+  createPopupsStore as c
+};

package/components/popups/components/PopupsProvider/contexts/PopupsContext/types.d.ts

@@ -2,7 +2,7 @@ import { GetLabelType } from '@m4l/core';
 import { ReactNode } from 'react';
 import { DraggableWindowProps } from '../../../../../DragResizeWindow/types';
 import { PopupStatus } from '../../../PopupsViewer/types';
-export declare type PopupVariantType = 'normal' | 'small' | 'large';
+export type PopupVariantType = 'normal' | 'small' | 'large';
 export interface PopupStoreProps extends Pick<DraggableWindowProps, 'bounds' | 'defaultPosition'> {
     /**
      * "popupId" Indetificador del popupId
@@ -60,12 +60,11 @@ export interface PopupStoreProps extends Pick<DraggableWindowProps, 'bounds' | '
     onMouseDown?: (e: MouseEvent) => void;
 }
 /**
- * @interface
- * @description Interface que define el store del componente (variables y funciones )
+ * Interface que define el store del componente (variables y funciones )
  */
 export interface PopupsStore {
     /**
-     * @description Id del store, para identificarlo en las herramientas de redux.
+     * Id del store, para identificarlo en las herramientas de redux.
      */
     storeId?: string;
     /**
@@ -94,9 +93,9 @@ export interface PopupsStore {
      */
     getContainer: () => HTMLElement;
 }
-export declare type OpenPopupOptions = {
+export type OpenPopupOptions = {
     /**
-     * @description Indica si se deben cerrar primero los otros propus.
+     * Indica si se deben cerrar primero los otros propus.
      */
     closeOthers: boolean;
 };
@@ -107,35 +106,35 @@ export interface PopupsStateWithActions extends PopupsStore {
          */
         init(layersStore: PopupStoreProps[]): void;
         /**
-         * @description Agrega una un poupup nuevo al hash de popups y al array de ids,
+         * Agrega una un poupup nuevo al hash de popups y al array de ids,
          */
         addPopup: (popupProps: Omit<PopupStoreProps, 'status' | 'zIndex'>, options?: OpenPopupOptions) => void;
         /**
-         * @description Remueve el poupup del hash de poups y de arrays de ids
+         * Remueve el poupup del hash de poups y de arrays de ids
          */
         removePopup: (popupId: string) => void;
         /**
-         * @description pasa el status a closing para que las las transiciones se ejecuten.
+         * pasa el status a closing para que las las transiciones se ejecuten.
          */
         closePopup: (popupId: string) => void;
         /**
-         * @description Modifica un popup espeficio
+         * Modifica un popup espeficio
          */
         updatePopup: (popupId: string, popupProps: Partial<Omit<PopupStoreProps, 'status'>>) => void;
         /**
-         * @description pasa el status a init, no se ejecutan las transiciones, porque el popup viene de estar hide .
+         * pasa el status a init, no se ejecutan las transiciones, porque el popup viene de estar hide .
          */
         showPopup: (popupId: string) => void;
         /**
-         * @description pasa el status a hide, no se ejecutan las transiciones, porque el popup se esconde inmediatamente.
+         * pasa el status a hide, no se ejecutan las transiciones, porque el popup se esconde inmediatamente.
          */
         hidePopup: (popupId: string) => void;
         /**
-         * @description Pone el popup  con zIndex igual a currentIndex y lo amuneta en uno.
+         * Pone el popup  con zIndex igual a currentIndex y lo amuneta en uno.
          */
         setPopupOnFront: (popupId: string) => void;
         /**
-         * @description Actualiza la variable de estado "getLabel"
+         * Actualiza la variable de estado "getLabel"
          * @param newHandler handle o función que va a traducir las etiquetas, esto es necesario debido que getLabel de useModuleDictionary
          * cambia por el useCallback, cuando el diccionario se carga.
          * @returns void
@@ -143,8 +142,8 @@ export interface PopupsStateWithActions extends PopupsStore {
         setHandlerGetLabel: (newHandler: GetLabelType) => void;
     };
 }
-export declare type DefaultPopupsStoreProps = PopupsStore;
-export declare type InitialPopupsStoreProps = Pick<PopupsStore, 'getLabel' | 'baseZindex'> & Partial<DefaultPopupsStoreProps> & {
+export type DefaultPopupsStoreProps = PopupsStore;
+export type InitialPopupsStoreProps = Pick<PopupsStore, 'getLabel' | 'baseZindex'> & Partial<DefaultPopupsStoreProps> & {
     containerElement: HTMLElement;
 };
 export interface PopupsProviderProps extends Pick<PopupsStore, 'baseZindex' | 'storeId'> {
@@ -153,11 +152,11 @@ export interface PopupsProviderProps extends Pick<PopupsStore, 'baseZindex' | 's
      */
     containerElement: HTMLElement;
     /**
-     * @description Poopus abiertos desde el principio, puede servir para abrir los poupus previamente cargados en las cookies
+     * Poopus abiertos desde el principio, puede servir para abrir los poupus previamente cargados en las cookies
      */
     initialPopups?: PopupStoreProps[];
     /**
-     * @description children
+     * children
      */
     children: ReactNode;
 }

package/components/popups/components/PopupsProvider/hooks/usePopupsStore/index.d.ts

@@ -1,3 +1,6 @@
 import { PopupsStateWithActions } from '../../contexts/PopupsContext/types';
+/**
+ * TODO: Documentar
+ */
 export declare function usePopupsStore<T>(selector: (state: PopupsStateWithActions) => T, equalityFn?: (left: T, right: T) => boolean): T;
 export default usePopupsStore;

package/components/popups/components/PopupsProvider/hooks/usePopupsStore/index.js

@@ -0,0 +1,13 @@
+import { useContext } from "react";
+import { useStore } from "zustand";
+import { a as PopupsContext } from "../../contexts/PopupsContext/PopupsContext.js";
+function usePopupsStore(selector, equalityFn) {
+  const context = useContext(PopupsContext);
+  if (!context) {
+    throw new Error("usePopupsStore context must be use inside PopupsContext");
+  }
+  return useStore(context, selector, equalityFn);
+}
+export {
+  usePopupsStore as u
+};

package/components/popups/components/PopupsProvider/index.js

@@ -0,0 +1 @@
+

package/components/popups/components/PopupsViewer/PopupsViewer.js

@@ -0,0 +1,53 @@
+import { jsx } from "react/jsx-runtime";
+import { TransitionGroup, CSSTransition } from "react-transition-group";
+import { shallow } from "zustand/shallow";
+import { P as Popup } from "./subcomponents/Popup/index.js";
+import { u as usePopupsStore } from "../PopupsProvider/hooks/usePopupsStore/index.js";
+import { u as useSizeContainer } from "../../../../hooks/useSizeContainer/index.js";
+import { R as RootStyled } from "./slots/popupsViewerSlots.js";
+const PopupsViewer = () => {
+  const popupsIds = usePopupsStore(
+    (state) => state.popupsIds.filter((pId) => state.hashPopups[pId].status !== "closing"),
+    shallow
+  );
+  const baseZindex = usePopupsStore((state) => state.baseZindex, shallow);
+  const containerElement = usePopupsStore((state) => state.getContainer, shallow)();
+  const { removePopup } = usePopupsStore((state) => state.popupsActions, shallow);
+  const containerSize = useSizeContainer(containerElement);
+  if (!containerElement || !containerSize) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(RootStyled, { ownerState: { baseZindex }, children: /* @__PURE__ */ jsx(TransitionGroup, { children: popupsIds.map((id) => {
+    return /* @__PURE__ */ jsx(
+      CSSTransition,
+      {
+        timeout: { appear: 0, enter: 1300, exit: 0 },
+        unmountOnExit: true,
+        onExited: () => {
+          removePopup(id);
+        },
+        classNames: {
+          // appear: 'fade-appear', // Clases para la animación de aparición
+          // appearActive: 'fade-appear-active',
+          enter: "fade-enter",
+          // Clases para la animación de entrada
+          enterActive: "fade-enter-active",
+          enterDone: "fade-enter-done"
+        },
+        children: /* @__PURE__ */ jsx(
+          Popup,
+          {
+            popupId: id,
+            containerElement,
+            containerSize
+          },
+          id
+        )
+      },
+      id
+    );
+  }) }) });
+};
+export {
+  PopupsViewer as P
+};

package/components/popups/components/PopupsViewer/PopupsViewer.styles.js

@@ -0,0 +1,122 @@
+const CONTAINER_QUERY_NAME = "poupup_root";
+const popupsViewerStyles = {
+  /**
+   * TODO: Documentar
+   */
+  root: ({ ownerState }) => ({
+    containerName: CONTAINER_QUERY_NAME,
+    containerType: "inline-size",
+    position: "absolute",
+    left: "0px",
+    top: "0px",
+    width: "0px",
+    height: "0px",
+    cursor: "default",
+    zIndex: ownerState.baseZindex || 0
+  }),
+  /**
+   * TODO: Documentar
+   */
+  popupDragWindowRoot: ({ theme, ownerState }) => ({
+    display: "flex",
+    flexDirection: "column",
+    position: "relative",
+    width: "100%",
+    height: "100%",
+    backgroundColor: theme.vars.palette.background.default,
+    zIndex: ownerState.zIndex || 0,
+    "&.fade-enter": {
+      opacity: 0
+    },
+    "&.fade-enter-active": {
+      opacity: 1,
+      transition: "opacity 300ms"
+    },
+    "&.fade-enter-done": {
+      opacity: 1
+    },
+    "& .fade-exit": {
+      opacity: 1
+    },
+    "& .fade-exit-active": {
+      opacity: 0
+      //transition: 'opacity 10ms',
+    },
+    ...ownerState?.status === "hidden" ? {
+      visibility: "hidden",
+      pointerEvents: "none"
+    } : {},
+    ...ownerState?.variant === "small" ? {
+      border: "1px solid red"
+    } : {}
+  }),
+  /**
+   * TODO: Documentar
+   */
+  pDWHeaderContainer: ({ ownerState }) => ({
+    display: "flex",
+    position: "relative",
+    margin: "6px",
+    gap: "8px",
+    marginLeft: "8px",
+    borderBottom: "2px solid blue",
+    cursor: "move",
+    ...ownerState?.variant === "small" ? {
+      border: "1px solid green"
+    } : {}
+  }),
+  /**
+   * TODO: Documentar
+   */
+  pDWHeaderTitle: ({ ownerState }) => ({
+    flexGrow: 1,
+    fontWeight: "bold",
+    ...ownerState?.subTitle ? {
+      flexGrow: "unset",
+      "&:after": {
+        content: '"*"',
+        color: "red",
+        fontSize: "22px",
+        top: "0px",
+        bottom: "0px",
+        position: "absolute"
+      }
+    } : {}
+  }),
+  pDWHeaderSubTitle: () => ({
+    flexGrow: 1
+  }),
+  /**
+   * TODO: Documentar
+   */
+  pDWContentRoot: () => ({
+    display: "flex",
+    padding: "12px",
+    position: "relative",
+    flexGrow: 1,
+    flexDirection: "column",
+    overflow: "hidden"
+  }),
+  /**
+   * TODO: Documentar
+   */
+  pDWContentEditionInfo: () => ({
+    display: "flex",
+    justifyContent: "flex-end",
+    "& .M4LIcon-root": {
+      paddingRight: "8px"
+    }
+  }),
+  /**
+   * TODO: Documentar
+   */
+  pDWContentWrapper: () => ({
+    flexGrow: 1,
+    display: "flex",
+    position: "relative",
+    overflow: "auto"
+  })
+};
+export {
+  popupsViewerStyles as p
+};

package/components/popups/components/PopupsViewer/constants.js

@@ -0,0 +1,4 @@
+const POPUPS_VIEWER_KEY_COMPONENT = "M4LPopupsViewer";
+export {
+  POPUPS_VIEWER_KEY_COMPONENT as P
+};

package/components/popups/components/PopupsViewer/icons.js

@@ -0,0 +1,7 @@
+const POPUPS_ICONS = {
+  CLOSE: "close.svg",
+  EDITION_INFO: "edition_info.svg"
+};
+export {
+  POPUPS_ICONS as P
+};

package/components/popups/components/PopupsViewer/index.js

@@ -0,0 +1 @@
+