@m4l/components 0.2.32 → 0.2.34

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

@@ -0,0 +1,160 @@
+import { GetLabelType } from '@m4l/core';
+import { ReactNode } from 'react';
+import { PopupsClasses } from '../../../PopupsViewer/classes/types';
+import { DraggableWindowProps } from '../../../../../DragResizeWindow/types';
+import { PositionXY } from '../../../../../../utils/types';
+export declare type PopupStatus = 'init' | 'closing' | 'hidden';
+export interface PopupStoreProps extends Pick<DraggableWindowProps, 'bounds' | 'defaultPosition'> {
+    /**
+     * "popupId" Indetificador del popupId
+     */
+    popupId: string;
+    /**
+     * "status" Estado del popup
+     */
+    status: PopupStatus;
+    /**
+     * "iconUrl" Icono de la ventan
+    */
+    iconUrl: string;
+    /**
+     * "title" Titulo de la ventan
+    */
+    title: string;
+    /**
+     * "subTitle" Subtitulo de la ventan
+    */
+    subTitle?: string;
+    /**
+     * "editionInfo" Mensaje que muestra el registro que se está editando.
+    */
+    editionInfo?: string;
+    /**
+     * draggable Indica si el popup es arrastrable, default true
+     */
+    draggable?: boolean;
+    /**
+     * resizable Indica si el popup es redimensionable, default true
+     */
+    resizable?: boolean;
+    /**
+     * maxSizeByPadding Tamaño maximo del popup en terminos de padding con respecto al conenedor padre
+     */
+    maxSizeByPadding?: PositionXY;
+    /**
+     * "componentProps" Propiedades que se le pasan al componente que se va a mostrar en el popup.
+     */
+    componentProps?: Record<string, any>;
+    /**
+     * functionComponent retorna el componente que se va a mostrar en el popup.
+     *
+     * Lo unico que necesita es guardar la referencia la función que retorna el componente.
+     */
+    functionComponent?: React.FC<Record<string, any>>;
+    /**
+     * "onMouseDown" Evento nativo del Draggable, para tomar acciones externamente
+     */
+    onMouseDown?: (e: MouseEvent) => void;
+}
+export declare type PopupsClassStatus = 'init' | 'ready';
+export declare type OwnerState = {
+    status: PopupsClassStatus;
+    /**
+     *  "isMobile" cuando el navegador está en modo celular
+     */
+    isMobile: boolean;
+    /**
+     *  "isSkeleton" indica si el componente está en skeleton.
+     */
+    isSkeleton: boolean;
+};
+/**
+ * @type
+ * @name ExternalOwnerState
+ * @description Estados que se actulizan por fuera del store, a través de hooks
+ */
+export declare type ExternalOwnerState = Pick<OwnerState, 'isMobile' | 'isSkeleton'>;
+/**
+ * @interface
+ * @description Interface que define el estado del componente (variables y funciones )
+ */
+export interface PopupsState {
+    ownerState: OwnerState;
+    /**
+     *  "classes" enfocado al funcionamiento de las clases a nivel de map
+     */
+    classes: PopupsClasses;
+    /**
+     *  "poupsIds" Poups para saber en que orden se muestran
+     */
+    popupsIds: string[];
+    /**
+     *  "hashPoups" Poups
+     */
+    hashPopups: Record<string, PopupStoreProps>;
+    /**
+     *  "getLabel" funcion que usará para traducir las etiquetas de diccionario
+     */
+    getLabel: GetLabelType;
+}
+export declare type OpenPopupOptions = {
+    /**
+     * @description Indica si se deben cerrar primero los otros propus.
+     */
+    closeOthers: boolean;
+};
+export interface PopupsStateWithActions extends PopupsState {
+    popupsActions: {
+        /**
+         * @description
+         */
+        init(layersStore: PopupStoreProps[]): void;
+        /**
+         * @description Cambia el estado del popus
+         */
+        setState: (state: PopupsClassStatus) => void;
+        /**
+         * @description Agrega una un poupup nuevo al hash de popups y al array de ids,
+         */
+        addPopup: (popupProps: Omit<PopupStoreProps, 'status'>, options?: OpenPopupOptions) => void;
+        /**
+         * @description 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.
+         */
+        closePopup: (popupId: string) => void;
+        /**
+         * @description 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 .
+         */
+        showPopup: (popupId: string) => void;
+        /**
+         * @description pasa el status a hide, no se ejecutan las transiciones, porque el popup se esconde inmediatamente.
+         */
+        hidePopup: (popupId: string) => void;
+        /**
+         * @description 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
+         */
+        setHandlerGetLabel: (newHandler: GetLabelType) => void;
+        /**
+         * @description Modifica los estados que se actualizan externamente al Store
+         * @param newIsMobile
+         * @returns
+         */
+        setExternalState: (newExternalState: ExternalOwnerState) => void;
+    };
+}
+export declare type DefaultPopupsStoreProps = PopupsState;
+export declare type InitialPopupsStoreProps = Pick<PopupsState, 'getLabel' | 'ownerState'> & Partial<DefaultPopupsStoreProps>;
+export interface PopupsProviderProps {
+    initialPopups?: PopupStoreProps[];
+    children: ReactNode;
+}

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

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

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

@@ -0,0 +1,2 @@
+export * from './contexts/PopupsContext';
+export { usePopupsStore } from './hooks/usePopupsStore';

package/components/popups/components/PopupsViewer/PopupsViewer.d.ts

@@ -0,0 +1,8 @@
+import type { PopupContainerProps } from './types';
+/**
+ * @description Visor de poups, cuyo funcionamineto depende del proveedor de popups. PoupsProvider.
+ *  Utiliza la librería de tranciones para animar la apertura y cierre de los popups.
+ * @param props
+ * @returns
+ */
+export declare const PopupsViewer: (props: PopupContainerProps) => import("react/jsx-runtime").JSX.Element | null;

package/components/popups/components/PopupsViewer/classes/index.d.ts

@@ -0,0 +1,15 @@
+import { PopupsClasses } from './types';
+import { OwnerState } from '../../PopupsProvider/contexts/PopupsContext/types';
+export declare const popupsClasses: PopupsClasses;
+export declare function getPopupsUtilityClass(slot: string): string;
+export declare const popupsUtilityClasses: (_ownerState: OwnerState) => {
+    containerRoot: string;
+    popupRoot: string;
+    popupHeaderContainer: string;
+    popupHeaderTitle: string;
+    popupHeaderSubTitle: string;
+    popupContent: string;
+    popupHidden: string;
+    popupWithSubTitle: string;
+    popupsContainer: string;
+};

package/components/popups/components/PopupsViewer/classes/types.d.ts

@@ -0,0 +1,13 @@
+import { popupsUtilityClasses } from ".";
+export interface PopupsClasses {
+    containerRoot: string;
+    popupRoot: string;
+    popupHeaderContainer: string;
+    popupHeaderTitle: string;
+    popupHeaderSubTitle: string;
+    popupContent: string;
+    popupHidden: string;
+    popupWithSubTitle: string;
+}
+export declare type PopupsClassesKey = keyof PopupsClasses;
+export declare type Classes = ReturnType<typeof popupsUtilityClasses>;

package/components/{PopupsProvider → popups/components/PopupsViewer}/constants.d.ts

@@ -1,5 +1,5 @@
-export declare const COMPONENT_TEST_ID = "M4LPopupsProvider";
-export declare const COMPONENT_CLASS_NAME = "M4LPopupsProvider";
+export declare const COMPONENT_TEST_ID = "M4LPopupsViewer";
+export declare const COMPONENT_CLASS_NAME = "M4LPopupsViewer";
 export declare const EARTH_RADIO = 6378137;
 export declare const DN = 500;
 export declare const DE = 500;

package/components/popups/components/PopupsViewer/icons.d.ts

@@ -0,0 +1,3 @@
+export declare const POPUPS_ICONS: {
+    CLOSE: string;
+};

package/components/popups/components/PopupsViewer/index.d.ts

@@ -0,0 +1 @@
+export { PopupsViewer } from './PopupsViewer';

package/components/popups/components/PopupsViewer/subcomponents/Popup/index.d.ts

@@ -0,0 +1,9 @@
+import type { PopupProps } from './types';
+/**
+ * @description Componente que representa un popup. Al estar dentro DragResizeWindow, por medio del contendor padre
+ * y su size, los popus se adaptan al tamaño del contenedor. La documetanción las funcionalidades estan directamente en
+ *  DragResizeWindow.
+ * @param props
+ * @returns
+ */
+export declare const Popup: (props: PopupProps) => import("react/jsx-runtime").JSX.Element | null;

package/components/popups/components/PopupsViewer/subcomponents/Popup/subcomponents/Header/index.d.ts

@@ -0,0 +1,2 @@
+import type { HeaderPopupProps } from './types';
+export declare const Header: (props: HeaderPopupProps) => import("react/jsx-runtime").JSX.Element | null;

package/components/popups/components/PopupsViewer/subcomponents/Popup/subcomponents/Header/types.d.ts

@@ -0,0 +1,2 @@
+import type { PopupProps } from '../../types';
+export declare type HeaderPopupProps = Pick<PopupProps, 'popupId'>;

package/components/popups/components/PopupsViewer/subcomponents/Popup/types.d.ts

@@ -0,0 +1,16 @@
+import { ContainerSize } from "../../../../../../utils/types";
+export declare type ResizeReason = 'start' | 'resize' | 'stop';
+export interface PopupProps {
+    /**
+     * "popupId" Indetificador del popupId
+     */
+    popupId: string;
+    /**
+     * Referencia el contendedor donde van a estar los popups
+     */
+    containerElement: HTMLElement;
+    /**
+     * "containerSize" tamaño del contenedor padre
+     */
+    containerSize?: ContainerSize | undefined;
+}

package/components/popups/components/PopupsViewer/types.d.ts

@@ -0,0 +1,3 @@
+export declare type PopupContainerProps = {
+    containerElement: HTMLElement;
+};

package/components/popups/index.c5eae682.js

@@ -0,0 +1 @@
+

package/components/popups/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components/PopupsProvider';
+export * from './components/PopupsViewer';

package/contexts/ModalContext/{index.3d48d675.js → index.2368bb19.js}

@@ -1,5 +1,5 @@
 import { createContext, useState } from "react";
-import { M as ModalDialog } from "../../components/ModalDialog/index.f27b7c2d.js";
+import { M as ModalDialog } from "../../components/ModalDialog/index.78c9650a.js";
 import { jsxs, jsx } from "react/jsx-runtime";
 const ModalContext = createContext(null);
 function ModalProvider({

package/hocs/withToggle/index.50aec5e4.js

@@ -0,0 +1,22 @@
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function withToggle(Component) {
+  return (props) => {
+    const {
+      isToggled: propIsToggled,
+      onToggle: propOnToggle,
+      ...rest
+    } = props;
+    const [internalIsToggled, setInternalIsToggled] = useState(props.defaultIsPressed || false);
+    const isToggled = propIsToggled !== void 0 ? propIsToggled : internalIsToggled;
+    const onToggle = propOnToggle !== void 0 ? propOnToggle : () => setInternalIsToggled((prev) => !prev);
+    return /* @__PURE__ */ jsx(Component, {
+      ...rest,
+      onToggle,
+      isToggled
+    });
+  };
+}
+export {
+  withToggle as w
+};

package/hocs/withToggle/index.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { ComponentWithToggleProps, WithToggleProps } from './types';
-export declare function withToggle<T extends WithToggleProps>(Component: React.ComponentType<T>): (props: ComponentWithToggleProps) => import("react/jsx-runtime").JSX.Element;
+import { ToggleableProps } from './types';
+export declare function withToggle<T extends ToggleableProps>(Component: React.ComponentType<T>): (props: T) => import("react/jsx-runtime").JSX.Element;

package/hocs/withToggle/types.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
-export interface WithToggleProps {
-    isPressed: boolean;
-    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+export interface ToggleableProps {
+    isToggled?: boolean;
+    onToggle?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    defaultIsPressed?: boolean;
 }
 export declare type ComponentWithToggleProps = {
-    onClick: (e: React.MouseEvent<HTMLButtonElement>, isPressed?: boolean) => void;
+    onToggle: (e: React.MouseEvent<HTMLButtonElement>, isPressed?: boolean) => void;
     defaultIsPressed?: boolean;
+    isPressed?: boolean;
     children?: React.ReactNode;
 };

package/hooks/useFormAddEdit/{index.07e5258d.js → index.000ce60b.js}

@@ -1,8 +1,8 @@
 import { useNetwork, useFlags, useModuleDictionary } from "@m4l/core";
 import { useState, useEffect } from "react";
-import { u as useModal } from "../useModal/index.cb1d6a37.js";
+import { u as useModal } from "../useModal/index.f73d7e42.js";
 import { jsx } from "react/jsx-runtime";
-import { W as WindowConfirm } from "../../components/modal/WindowConfirm.ce47a48a.js";
+import { W as WindowConfirm } from "../../components/modal/WindowConfirm.ee6de236.js";
 function useFormAddEdit(props) {
   const {
     initialValues,

package/hooks/useFormReadyForUpdate/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * hook encargado de activar la bandera de readyToUpdate cuando el formulario este completamente cargado
+ * @param statusLoad
+ * @returns
+ */
+export declare function useFormReadyForUpdate(): boolean;

package/hooks/useFormReadyForUpdate/index.f60f500e.js

@@ -0,0 +1,20 @@
+import { useState, useEffect } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
+function useFormReadyForUpdate() {
+  const [readyToUpdate, setReadyToUpdate] = useState(false);
+  const { control } = useFormContext();
+  const statusLoad = useWatch({
+    control,
+    name: "statusLoad"
+  });
+  useEffect(() => {
+    if (statusLoad !== "ready") {
+      return;
+    }
+    setReadyToUpdate(true);
+  }, [statusLoad]);
+  return readyToUpdate;
+}
+export {
+  useFormReadyForUpdate as u
+};

package/hooks/useModal/{index.cb1d6a37.js → index.f73d7e42.js}

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { M as ModalContext } from "../../contexts/ModalContext/index.3d48d675.js";
+import { M as ModalContext } from "../../contexts/ModalContext/index.2368bb19.js";
 function useModal() {
   const context = useContext(ModalContext);
   if (!context)

package/hooks/useSizeContainer/contants.d.ts

@@ -0,0 +1 @@
+export declare const THROTTLE_RESIZE_TIMEOUT = 200;

package/hooks/useSizeContainer/index.62b4e0c4.js

@@ -0,0 +1,35 @@
+import { useState, useEffect } from "react";
+import { throttle } from "lodash";
+const THROTTLE_RESIZE_TIMEOUT = 200;
+function useSizeContainer(containerElement) {
+  const [currentState, setCurrentState] = useState();
+  useEffect(() => {
+    if (!containerElement) {
+      return;
+    }
+    const throttleResize = throttle(setCurrentState, THROTTLE_RESIZE_TIMEOUT, {
+      leading: false,
+      trailing: true
+    });
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        throttleResize({
+          containerWidth: entry.contentRect.width,
+          containerHeight: entry.contentRect.height
+        });
+      }
+    });
+    if (containerElement) {
+      resizeObserver.observe(containerElement);
+    }
+    return () => {
+      if (containerElement) {
+        resizeObserver.unobserve(containerElement);
+      }
+    };
+  }, [containerElement]);
+  return currentState;
+}
+export {
+  useSizeContainer as u
+};

package/hooks/useSizeContainer/index.d.ts

@@ -0,0 +1,8 @@
+import { ContainerSize } from '../../utils/types';
+/**
+ * useSizeContainer: hook encargado de obtener el tamaño de un elemento contenedor
+ * TODO: Usar throttle para evitar llamadas innecesarias
+ * @param containerElement
+ * @returns un objeto con el ancho y alto del contenedor
+ */
+export declare function useSizeContainer(containerElement?: HTMLElement | undefined): ContainerSize | undefined;

package/hooks/useStateRef/index.538edb89.js

@@ -0,0 +1,15 @@
+import { useState, useRef } from "react";
+function useStateRef(initialValue) {
+  const [refState, setRefState] = useState(initialValue);
+  const nodeRef = useRef(null);
+  const ref = (node) => {
+    if (node && nodeRef.current !== node) {
+      nodeRef.current = node;
+      setRefState(node);
+    }
+  };
+  return [refState, ref];
+}
+export {
+  useStateRef as u
+};

package/hooks/useStateRef/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * "useStateRef" es un hook que permite tener una referencia a un elemento del DOM
+ * y al mismo tiempo tener un estado para ese elemento, lo que hace que se rerenderize
+ * donde se usa refState
+ * @param initialValue
+ * @returns
+ */
+export declare function useStateRef<T>(initialValue: T | null): [T | null, (node: T | null) => void];

package/hooks/useTab/{index.c0564138.js → index.976d5e1e.js}

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { T as TabContext } from "../../components/mui_extended/Tab/index.2068925d.js";
+import { d as TabContext } from "../../components/mui_extended/Tab/index.9214d9cc.js";
 const useTab = () => {
   const context = useContext(TabContext);
   if (context === null) {