@m4l/components 0.2.33 → 0.2.34

package/components/mui_extended/Pager/{index.0d7d95be.js → index.ea2a4f3e.js}

@@ -1,13 +1,13 @@
 import { useMemo } from "react";
 import { styled, generateUtilityClasses, generateUtilityClass, useTheme, Select, InputBase, MenuItem } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { I as IconButton } from "../IconButton/index.21215143.js";
+import { I as IconButton } from "../IconButton/index.f8a3021b.js";
 import { useEnvironment } from "@m4l/core";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useResponsiveContainerStore } from "@m4l/graphics";
 import { shallow } from "zustand/shallow";
 import { T as Typography } from "../Typography/index.379dd374.js";
-import { I as Icon } from "../../Icon/index.d34ed400.js";
+import { I as Icon } from "../../Icon/index.ad330e78.js";
 const PagerRoot = styled("div")(({ theme }) => ({
   ...theme.components?.M4LPager?.styleOverrides
 }));

package/components/mui_extended/Tab/{index.2068925d.js → index.9214d9cc.js}

@@ -148,9 +148,9 @@ function TabProvider(props) {
   });
 }
 export {
-  TabContext as T,
+  Tabs as T,
   Tab as a,
-  Tabs as b,
-  TabContent as c,
-  TabProvider as d
+  TabContent as b,
+  TabProvider as c,
+  TabContext as d
 };

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

@@ -1,5 +1,5 @@
 import { Key } from "react";
-export interface TabContentProps {
+export interface TabContentProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     style?: React.CSSProperties;
     key?: Key | null | undefined;

package/components/mui_extended/ToggleButton/ToggleButton.d.ts

@@ -1 +1,2 @@
-export declare const ToggleButton: (props: import("../../../hocs/withToggle/types").ComponentWithToggleProps) => import("react/jsx-runtime").JSX.Element;
+import { ToggleButtonProps } from "./types";
+export declare const ToggleButton: (props: ToggleButtonProps) => import("react/jsx-runtime").JSX.Element;

package/components/mui_extended/ToggleButton/{index.aa37e2cb.js → index.191711f3.js}

@@ -1,19 +1,16 @@
 import clsx from "clsx";
-import { B as Button, b as buttonClasses } from "../Button/index.7265987f.js";
-import { w as withToggle } from "../../../hocs/withToggle/index.e44eb0da.js";
+import { B as Button, b as buttonClasses } from "../Button/index.c3084916.js";
+import { w as withToggle } from "../../../hocs/withToggle/index.50aec5e4.js";
 import { jsx } from "react/jsx-runtime";
 const ToggleAbleButton = ({
-  onClick,
-  isPressed,
+  onToggle,
+  isToggled,
   ...props
 }) => {
-  const onLocalClick = (e) => {
-    onClick(e, !isPressed);
-  };
   return /* @__PURE__ */ jsx(Button, {
-    onClick: onLocalClick,
+    onClick: onToggle,
     ...props,
-    className: clsx(isPressed ? buttonClasses.togglePressed : buttonClasses.toggleNotPressed)
+    className: clsx(isToggled ? buttonClasses.togglePressed : buttonClasses.toggleNotPressed)
   });
 };
 const ToggleButton = withToggle(ToggleAbleButton);

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

@@ -1,4 +1,4 @@
-import type { ComponentWithToggleProps, WithToggleProps } from '../../../hocs/withToggle/types';
+import type { ToggleableProps } from '../../../hocs/withToggle/types';
 import { ButtonProps } from '../Button';
-export interface ToggleButtonProps extends Omit<ButtonProps, 'onClick'>, Pick<ComponentWithToggleProps, 'onClick'>, Pick<WithToggleProps, 'isPressed'> {
+export interface ToggleButtonProps extends Omit<ButtonProps, 'onClick'>, ToggleableProps {
 }

package/components/mui_extended/ToggleIconButton/ToggleIconButton.d.ts

@@ -1,13 +1,2 @@
-/// <reference types="react" />
 import { ToggleIconButtonProps } from "./types";
-interface ToggleIconButtonWrapperProps extends Omit<ToggleIconButtonProps, 'isPressed'> {
-    src: string;
-}
-/**
- * Para no tener que poner src en ComponentWithToggleProps, dejando de ser generico
- * se crea wrapper que recibe src a traves de ToggleIconButtonWrapperProps el cual extiende ComponentWithToggleProps
- * por lo tanto es aceptado withToggle.
-
- **/
-export declare const ToggleIconButton: React.FC<ToggleIconButtonWrapperProps>;
-export {};
+export declare const ToggleIconButton: (props: ToggleIconButtonProps) => import("react/jsx-runtime").JSX.Element;

package/components/mui_extended/ToggleIconButton/index.d9dbf650.js

@@ -0,0 +1,19 @@
+import clsx from "clsx";
+import { I as IconButton, i as iconButtonClasses } from "../IconButton/index.f8a3021b.js";
+import { w as withToggle } from "../../../hocs/withToggle/index.50aec5e4.js";
+import { jsx } from "react/jsx-runtime";
+const ToggleAbleIconButton = ({
+  onToggle,
+  isToggled,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(IconButton, {
+    onClick: onToggle,
+    ...props,
+    className: clsx(onToggle ? iconButtonClasses.togglePressed : iconButtonClasses.toggleNotPressed)
+  });
+};
+const ToggleIconButton = withToggle(ToggleAbleIconButton);
+export {
+  ToggleIconButton as T
+};

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

@@ -1,5 +1,4 @@
-import { ComponentWithToggleProps, WithToggleProps } from "../../../hocs/withToggle/types";
+import { ToggleableProps } from "../../../hocs/withToggle/types";
 import { IconButtonProps } from "../IconButton";
-export interface ToggleIconButtonProps extends Omit<IconButtonProps, 'onClick'>, Pick<ComponentWithToggleProps, 'onClick'>, Pick<WithToggleProps, 'isPressed'> {
-    src: string;
+export interface ToggleIconButtonProps extends Omit<IconButtonProps, 'onClick'>, ToggleableProps {
 }

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

@@ -0,0 +1,179 @@
+import React__default, { createContext, useRef, useEffect, useContext } from "react";
+import { createStore, useStore } from "zustand";
+import { shallow } from "zustand/shallow";
+import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
+import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
+import { devtools } from "zustand/middleware";
+import { immer } from "zustand/middleware/immer";
+import { p as popupsUtilityClasses } from "../PopupsViewer/index.1500ce72.js";
+import { cloneDeep } from "lodash";
+import { jsx } from "react/jsx-runtime";
+const updateOwnerStateClasses = (state) => {
+  state.classes = popupsUtilityClasses(state.ownerState);
+};
+const createPopupsStore = (initProps) => {
+  const startProps = {
+    classes: popupsUtilityClasses(initProps.ownerState),
+    popupsIds: [],
+    hashPopups: {},
+    ...initProps
+  };
+  return createStore(
+    devtools(
+      immer((set, get) => ({
+        ...startProps,
+        popupsActions: {
+          init: (initialPopups) => {
+            set((state) => {
+              for (let index = 0; index < initialPopups.length; index++) {
+                state.hashPopups[initialPopups[index].popupId] = cloneDeep(
+                  initialPopups[index]
+                );
+                state.popupsIds.push(initialPopups[index].popupId);
+              }
+            });
+          },
+          setState: (status) => {
+            set((state) => {
+              state.ownerState.status = status;
+            });
+          },
+          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";
+                });
+              });
+              set((state) => {
+                state.hashPopups[popupProps.popupId] = { ...popupProps, status: "init" };
+                state.popupsIds.push(popupProps.popupId);
+              });
+            } else {
+              set((state) => {
+                state.hashPopups[popupProps.popupId] = { ...popupProps, status: "init" };
+                state.popupsIds.push(popupProps.popupId);
+              });
+            }
+          },
+          removePopup: (popupId) => {
+            if (!get().hashPopups[popupId]) {
+              return;
+            }
+            set((state) => {
+              state.popupsIds.splice(state.popupsIds.indexOf(popupId), 1);
+              delete state.hashPopups[popupId];
+            });
+          },
+          closePopup: (popupId) => {
+            if (!get().hashPopups[popupId]) {
+              return;
+            }
+            set((state) => {
+              state.hashPopups[popupId].status = "closing";
+            });
+          },
+          updatePopup: (popupId, popupProps) => {
+            if (!get().hashPopups[popupId]) {
+              return;
+            }
+            set((state) => {
+              state.hashPopups[popupId] = { ...state.hashPopups[popupId], ...popupProps };
+            });
+          },
+          showPopup: (popupId) => {
+            if (!get().hashPopups[popupId]) {
+              return;
+            }
+            set((state) => {
+              state.hashPopups[popupId].status = "init";
+            });
+          },
+          hidePopup: (popupId) => {
+            if (!get().hashPopups[popupId]) {
+              return;
+            }
+            set((state) => {
+              state.hashPopups[popupId].status = "hidden";
+            });
+          },
+          setHandlerGetLabel: (newHandler) => {
+            set((state) => {
+              state.getLabel = newHandler;
+            });
+          },
+          setExternalState: (newExternalState) => {
+            set((state) => {
+              state.ownerState = { ...state.ownerState, ...newExternalState };
+              updateOwnerStateClasses(state);
+            });
+          }
+        }
+      })),
+      { name: `Popups store` }
+    )
+  );
+};
+const PopupsContext = createContext(null);
+function PopupsProvider(props) {
+  const {
+    children,
+    initialPopups
+  } = props;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const isDesktop = useResponsiveDesktop();
+  const isSkeleton = useModuleSkeleton();
+  const isFirstRender = useFirstRender([getLabel]);
+  const popupsStoreRef = useRef();
+  if (!popupsStoreRef.current) {
+    popupsStoreRef.current = createPopupsStore({
+      getLabel,
+      ownerState: {
+        status: "init",
+        isMobile: !isDesktop,
+        isSkeleton
+      }
+    });
+    popupsStoreRef.current?.getState().popupsActions.init(initialPopups || []);
+  }
+  const {
+    setHandlerGetLabel,
+    setExternalState
+  } = useStore(popupsStoreRef.current, (state) => state.popupsActions, shallow);
+  useEffect(() => {
+    if (!isFirstRender) {
+      setHandlerGetLabel(getLabel);
+    }
+  }, [getLabel]);
+  useEffect(() => {
+    if (isFirstRender) {
+      return;
+    }
+    setExternalState({
+      isMobile: !isDesktop,
+      isSkeleton
+    });
+  }, [isDesktop, isSkeleton]);
+  return /* @__PURE__ */ jsx(PopupsContext.Provider, {
+    value: popupsStoreRef.current,
+    children: /* @__PURE__ */ jsx(React__default.Fragment, {
+      children
+    })
+  });
+}
+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 {
+  PopupsProvider as P,
+  PopupsContext as a,
+  usePopupsStore as u
+};

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

@@ -0,0 +1,186 @@
+import { TransitionGroup, CSSTransition } from "react-transition-group";
+import { shallow } from "zustand/shallow";
+import { useState, useRef } from "react";
+import clsx from "clsx";
+import { useEnvironment } from "@m4l/core";
+import { u as usePopupsStore } from "../PopupsProvider/index.d7409f48.js";
+import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { d as draggableWindowClasses, D as DragResizeWindow } from "../../DragResizeWindow/index.13ef022e.js";
+import { I as Icon } from "../../Icon/index.ad330e78.js";
+import { I as IconButton } from "../../mui_extended/IconButton/index.f8a3021b.js";
+import { u as useSizeContainer } from "../../../hooks/useSizeContainer/index.62b4e0c4.js";
+import { styled } from "@mui/material/styles";
+const COMPONENT_CLASS_NAME = "M4LPopupsViewer";
+const MAP_ZINDEX_OVER_MAP = 1100;
+const popupsClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
+  "containerRoot",
+  "popupRoot",
+  "popupHeaderContainer",
+  "popupHeaderTitle",
+  "popupHeaderSubTitle",
+  "popupContent",
+  "popupHidden",
+  "popupWithSubTitle"
+]);
+function getPopupsUtilityClass(slot) {
+  return generateUtilityClass(COMPONENT_CLASS_NAME, slot);
+}
+const popupsUtilityClasses = (_ownerState) => {
+  const slots = {
+    containerRoot: ["containerRoot"],
+    popupsContainer: ["popupsContainer"],
+    popupRoot: ["popupRoot"],
+    popupHeaderContainer: ["popupHeaderContainer"],
+    popupHeaderTitle: ["popupHeaderTitle"],
+    popupHeaderSubTitle: ["popupHeaderSubTitle"],
+    popupContent: ["popupContent"],
+    popupHidden: ["popupHidden"],
+    popupWithSubTitle: ["popupWithSubTitle"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getPopupsUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const POPUPS_ICONS = {
+  CLOSE: "close.svg"
+};
+const Header = (props) => {
+  const {
+    popupId
+  } = props;
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const popup = usePopupsStore((state) => state.hashPopups[popupId], shallow);
+  usePopupsStore((state) => state.popupsActions, shallow);
+  const {
+    iconUrl
+  } = popup || {};
+  const [inProp, setInProp] = useState(false);
+  const onClose = () => {
+    setInProp((l) => !l);
+  };
+  console.log("Render", inProp);
+  if (!popup) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    className: clsx(popupsClasses.popupHeaderContainer, draggableWindowClasses.draggableHandle),
+    children: [/* @__PURE__ */ jsx(Icon, {
+      src: iconUrl,
+      size: "small"
+    }), /* @__PURE__ */ jsx("span", {
+      className: clsx(popupsClasses.popupHeaderTitle, popup.subTitle ? popupsClasses.popupWithSubTitle : null),
+      children: popup.title
+    }), popup.subTitle && /* @__PURE__ */ jsx("span", {
+      className: popupsClasses.popupHeaderSubTitle,
+      children: popup.subTitle
+    }), /* @__PURE__ */ jsx(IconButton, {
+      className: draggableWindowClasses.draggableCancel,
+      onClick: onClose,
+      "aria-label": "click",
+      src: `${host_static_assets}/${environment_assets}/frontend/commons/assets/icons/${POPUPS_ICONS.CLOSE}`
+    })]
+  });
+};
+const Popup = (props) => {
+  const {
+    popupId,
+    containerElement,
+    containerSize
+  } = props;
+  const popup = usePopupsStore((state) => state.hashPopups[popupId], shallow);
+  const {
+    draggable = true,
+    resizable = true,
+    defaultPosition,
+    bounds,
+    ...others
+  } = popup || {};
+  const nodeRef = useRef(null);
+  if (!popup) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(DragResizeWindow, {
+    ref: nodeRef,
+    className: clsx(popupsClasses.popupRoot, popup.status === "hidden" && popupsClasses.popupHidden),
+    onMouseDown: popup?.onMouseDown,
+    containerElement,
+    containerSize,
+    bounds,
+    draggable,
+    resizeable: resizable,
+    defaultPosition,
+    ...others,
+    children: [/* @__PURE__ */ jsx(Header, {
+      popupId: popup.popupId
+    }), /* @__PURE__ */ jsx("div", {
+      className: popupsClasses.popupContent,
+      children: popup.functionComponent && popup.functionComponent({
+        ...popup.componentProps
+      })
+    })]
+  });
+};
+const PopupsViewerRoot = styled("div")`
+   
+
+    ${(props) => props.theme.components?.M4LPopupsViewer?.styleOverrides}
+
+`;
+const PopupsViewer = (props) => {
+  const {
+    containerElement
+  } = props;
+  const popupsIds = usePopupsStore((state) => state.popupsIds.filter((pId) => state.hashPopups[pId].status !== "closing"), shallow);
+  const {
+    removePopup
+  } = usePopupsStore((state) => state.popupsActions, shallow);
+  const containerSize = useSizeContainer(containerElement);
+  if (!containerElement) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(PopupsViewerRoot, {
+    className: popupsClasses.containerRoot,
+    children: /* @__PURE__ */ jsx(TransitionGroup, {
+      children: popupsIds.map((id) => {
+        return /* @__PURE__ */ jsx(
+          CSSTransition,
+          {
+            in: true,
+            timeout: {
+              appear: 500,
+              enter: 300,
+              exit: 1300
+            },
+            unmountOnExit: true,
+            onEnter: () => console.log("onEnter"),
+            onExit: () => {
+              console.log("onExit");
+            },
+            onExited: () => {
+              console.log("onExited");
+              removePopup(id);
+            },
+            classNames: "popup-fade",
+            children: /* @__PURE__ */ jsx(Popup, {
+              popupId: id,
+              containerElement,
+              containerSize
+            }, id)
+          },
+          id
+        );
+      })
+    })
+  });
+};
+export {
+  MAP_ZINDEX_OVER_MAP as M,
+  PopupsViewer as P,
+  popupsUtilityClasses as p
+};

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { 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;
+}, "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 | {
+        type: unknown;
+    } | undefined): void;
+}) | null>;
+/**
+ * @description 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
+ */
+declare function PopupsProvider(props: PopupsProviderProps): import("react/jsx-runtime").JSX.Element;
+export { PopupsProvider, PopupsContext };

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

@@ -0,0 +1,7 @@
+import { WritableDraft } from 'immer/dist/internal';
+import type { PopupsStateWithActions } from './types';
+/**
+ * @description Actualiza la clases basado en owner state
+ * @param state immer State
+ */
+export declare const updateOwnerStateClasses: (state: WritableDraft<PopupsStateWithActions>) => void;

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

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

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

@@ -0,0 +1,16 @@
+import type { PopupsStateWithActions, InitialPopupsStoreProps } from './types';
+/**
+ * @description 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"> & {
+    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 | {
+        type: unknown;
+    } | undefined): void;
+};
+export declare type PopupsStore = ReturnType<typeof createPopupsStore>;