@m4l/components 9.1.69 → 9.1.70

package/@types/types.d.ts

@@ -138,6 +138,7 @@ import { AccountPopoverOwnerState, AccountPopoverSlotsType } from '../components
 import { PropertyVaLueOwnerState, PropertyValueType } from '../components/PropertyValue/types';
 import { RHFTextFieldPasswordOwnerState, RHFTextFieldPasswordType } from '../components/hook-form/RHFTextFieldPassword/types';
 import { RHFAutocompleteOwnerState, RHFAutocompleteSlotsType } from '../components/hook-form/RHFAutocomplete/types';
+import { PropagateLoaderSpinnerOwnerState, PropagateLoaderSpinnerType } from '../components/extended/React-Spinners/PropagateLoaderSpinner/types';
 import { LinearProgressIndeterminateOwnerState, LinearProgressIndeterminateType } from '../components/LinearProgressIndeterminate/types';
 import { MenuDividerOwnerState, MenuDividerSlotsType } from '../components/mui_extended/MenuDivider/types';
 
@@ -193,6 +194,7 @@ declare module '@mui/material/styles' {
     RHFM4LAutocomplete: RHFAutocompleteSlotsType;
     M4LAccountPopover: AccountPopoverSlotsType;
     M4LPropertyValue: PropertyValueType;
+    M4LPropagateLoaderSpinner: PropagateLoaderSpinnerType;
     M4LRHFTextFieldPassword: RHFTextFieldPasswordType;
     M4LLinearProgressIndeterminate: LinearProgressIndeterminateType;
     M4LMenuDivider: MenuDividerSlotsType;
@@ -249,6 +251,7 @@ declare module '@mui/material/styles' {
     M4LPropertyValue: Partial<PropertyVaLueOwnerState>;
     M4LColor: Partial<ColorOwnerState>;
     M4LRHFColorPicker: Partial<RHFColorPickerOwnerState>;
+    M4LPropagateLoaderSpinner: Partial<PropagateLoaderSpinnerOwnerState>;
     M4LRHFTextFieldPassword: Partial<RHFTextFieldPasswordOwnerState>;
     M4LLinearProgressIndeterminate: Partial<LinearProgressIndeterminateOwnerState>;
     M4LMenuDivider: Partial<MenuDividerOwnerState>;
@@ -500,6 +503,11 @@ declare module '@mui/material/styles' {
         styleOverrides?: ComponentsOverrides<Theme>['M4LAccountPopover'];
         variants?: ComponentsVariants['M4LAccountPopover'];
       };
+    M4LPropagateLoaderSpinner?: {
+      defaultProps?: ComponentsPropsList['M4LPropagateLoaderSpinner'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LPropagateLoaderSpinner'];
+      variants?: ComponentsVariants['M4LPropagateLoaderSpinner'];
+    };
     M4LRHFTextFieldPassword?: {
         defaultProps?: ComponentsPropsList['M4LRHFTextFieldPassword'];
         styleOverrides?: ComponentsOverrides<Theme>['M4LRHFTextFieldPassword'];

package/components/Loadable/index.d.ts

@@ -3,8 +3,16 @@ import { ElementType } from 'react';
  * Función que envuelve un componente en un componente Suspense con un loader de propagación como fallback.
  * @param Component El componente a ser cargado dinámicamente.
  * @returns Un componente funcional que carga dinámicamente el componente proporcionado.
+ * @author cesar - automatic
+ * @createdAt 2025-01-07 11:39:01 - automatic
+ * @updatedAt 2025-01-13 18:04:35 - automatic
+ * @updatedUser cesar - automatic
  */
 /**
  * TODO: Documentar
+ * @author cesar - automatic
+ * @createdAt 2025-01-07 11:39:01 - automatic
+ * @updatedAt 2025-01-13 18:04:35 - automatic
+ * @updatedUser cesar - automatic
  */
 export declare const Loadable: (Component: ElementType) => (props: any) => import("react/jsx-runtime").JSX.Element;

package/components/Loadable/index.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { Suspense } from "react";
-import { P as PropagateLoader } from "../animate/PropagateLoader/index.js";
+import { P as PropagateLoaderSpinner } from "../extended/React-Spinners/PropagateLoaderSpinner/PropagateLoaderSpinner.js";
 const Loadable = (Component) => function EmbededLoadable(props) {
-  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(PropagateLoader, {}), children: /* @__PURE__ */ jsx(Component, { ...props }) });
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(PropagateLoaderSpinner, {}), children: /* @__PURE__ */ jsx(Component, { ...props }) });
 };
 export {
   Loadable as L

package/components/animate/index.d.ts

@@ -3,5 +3,5 @@ export { IconButtonAnimate } from './IconButtonAnimate';
 export { MotionContainer } from './MotionContainer';
 export { MotionLazyContainer } from './MotionLazyContainer';
 export { LoadingScreen } from './LoadingScreen';
-export { PropagateLoader } from './PropagateLoader';
+export { PropagateLoaderSpinner } from '../extended/React-Spinners/PropagateLoaderSpinner/PropagateLoaderSpinner';
 export { AnimatedScroll } from './AnimatedScroll';

package/components/extended/React-Spinners/PropagateLoaderSpinner/PropagateLoaderSpinner.d.ts

@@ -0,0 +1,11 @@
+import { PropagateLoaderSpinnerProps } from './types';
+/**
+ * Un componente de cargador que muestra un propagador de carga.
+ * Utiliza React Spinners bajo el nombre de `PropagateLoader`.
+ * @returns Un componente de cargador que muestra un propagador de carga.
+ * @author cesar - automatic
+ * @createdAt 2025-01-07 11:39:01 - automatic
+ * @updatedAt 2025-01-14 14:13:30 - automatic
+ * @updatedUser cesar - automatic
+ */
+export declare const PropagateLoaderSpinner: React.FC<PropagateLoaderSpinnerProps>;

package/components/extended/React-Spinners/PropagateLoaderSpinner/PropagateLoaderSpinner.js

@@ -0,0 +1,53 @@
+import { jsx } from "react/jsx-runtime";
+import { useTheme } from "@mui/material";
+import { P as PropagateLoaderSpinnerStyled, L as LoaderStyled } from "./slots/PropagateLoaderSpinnerSlots.js";
+import { P as PROPAGATE_LOADER_SPINNER_KEY_COMPONENT } from "./constants.js";
+import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
+import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
+import clsx from "clsx";
+import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
+import { P as PropagateLoaderSpinnerSlots } from "./slots/PropagateLoaderSpinnerEnum.js";
+const PropagateLoaderSpinner = ({
+  loading = true,
+  color,
+  speedMultiplier = 1,
+  cssOverride,
+  size = "medium",
+  dataTestId,
+  className,
+  ...other
+}) => {
+  const { palette } = useTheme();
+  const { currentSize } = useComponentSize(size);
+  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
+  const ownerState = {
+    propagateLoaderSize: adjustedSize
+  };
+  if (!loading) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    PropagateLoaderSpinnerStyled,
+    {
+      ownerState,
+      className: clsx(getComponentSlotRoot(PROPAGATE_LOADER_SPINNER_KEY_COMPONENT), className),
+      ...getPropDataTestId(PROPAGATE_LOADER_SPINNER_KEY_COMPONENT, PropagateLoaderSpinnerSlots.root, dataTestId),
+      ...other,
+      role: "propagate-loader-spinner",
+      children: /* @__PURE__ */ jsx(
+        LoaderStyled,
+        {
+          ownerState: {},
+          loading,
+          color: color || palette.primary.main,
+          speedMultiplier,
+          cssOverride,
+          ...other
+        }
+      )
+    }
+  );
+};
+export {
+  PropagateLoaderSpinner as P
+};

package/components/extended/React-Spinners/PropagateLoaderSpinner/PropagateLoaderSpinner.styles.d.ts

@@ -0,0 +1,2 @@
+import { PropagateLoaderSpinnerStyles } from './types';
+export declare const propagateLoaderSpinnerStyles: PropagateLoaderSpinnerStyles;

package/components/extended/React-Spinners/PropagateLoaderSpinner/PropagateLoaderSpinner.styles.js

@@ -0,0 +1,39 @@
+import { g as getHeightSizeStyles } from "../../../../utils/getHeightSizeStyles.js";
+const propagateLoaderSpinnerStyles = {
+  /**
+   * Estilos del componente raíz del contenedor de la ventana.
+   * @author cesar - automatic
+   * @createdAt 2024-11-21 08:55:01 - automatic
+   * @updatedAt 2025-01-14 14:13:30 - automatic
+   * @updatedUser cesar - automatic
+   */
+  root: () => ({
+    height: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }),
+  /**
+   * Estilos del loader.
+   * @author cesar - automatic
+   * @createdAt 2025-01-14 14:13:30 - automatic
+   * @updatedAt 2025-01-14 14:13:30 - automatic
+   * @updatedUser cesar - automatic
+   */
+  loader: ({ theme, ownerState }) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    ...getHeightSizeStyles(
+      theme.generalSettings.isMobile,
+      ownerState.propagateLoaderSize || "medium",
+      "action"
+    ),
+    "& > span": {
+      alignItems: "center"
+    }
+  })
+};
+export {
+  propagateLoaderSpinnerStyles as p
+};

package/components/extended/React-Spinners/PropagateLoaderSpinner/constants.d.ts

@@ -0,0 +1 @@
+export declare const PROPAGATE_LOADER_SPINNER_KEY_COMPONENT = "M4LPropagateLoaderSpinner";

package/components/extended/React-Spinners/PropagateLoaderSpinner/constants.js

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

package/components/extended/React-Spinners/PropagateLoaderSpinner/slots/PropagateLoaderSpinnerEnum.d.ts

@@ -0,0 +1,4 @@
+export declare enum PropagateLoaderSpinnerSlots {
+    root = "root",
+    loader = "loader"
+}

package/components/extended/React-Spinners/PropagateLoaderSpinner/slots/PropagateLoaderSpinnerEnum.js

@@ -0,0 +1,8 @@
+var PropagateLoaderSpinnerSlots = /* @__PURE__ */ ((PropagateLoaderSpinnerSlots2) => {
+  PropagateLoaderSpinnerSlots2["root"] = "root";
+  PropagateLoaderSpinnerSlots2["loader"] = "loader";
+  return PropagateLoaderSpinnerSlots2;
+})(PropagateLoaderSpinnerSlots || {});
+export {
+  PropagateLoaderSpinnerSlots as P
+};

package/components/extended/React-Spinners/PropagateLoaderSpinner/slots/PropagateLoaderSpinnerSlots.d.ts

@@ -0,0 +1,6 @@
+export declare const PropagateLoaderSpinnerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').PropagateLoaderSpinnerOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PropagateLoaderSpinnerOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
+export declare const LoaderStyled: import('@emotion/styled').StyledComponent<Pick<import('react-spinners/helpers/props').LoaderSizeProps, keyof import('react-spinners/helpers/props').LoaderSizeProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').PropagateLoaderSpinnerOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PropagateLoaderSpinnerOwnerState> & Record<string, unknown>;
+}, {}, {}>;

package/components/extended/React-Spinners/PropagateLoaderSpinner/slots/PropagateLoaderSpinnerSlots.js

@@ -0,0 +1,17 @@
+import { styled } from "@mui/material";
+import { P as PROPAGATE_LOADER_SPINNER_KEY_COMPONENT } from "../constants.js";
+import { P as PropagateLoaderSpinnerSlots } from "./PropagateLoaderSpinnerEnum.js";
+import { p as propagateLoaderSpinnerStyles } from "../PropagateLoaderSpinner.styles.js";
+import { PropagateLoader } from "react-spinners";
+const PropagateLoaderSpinnerStyled = styled("div", {
+  name: PROPAGATE_LOADER_SPINNER_KEY_COMPONENT,
+  slot: PropagateLoaderSpinnerSlots.root
+})(propagateLoaderSpinnerStyles?.root);
+const LoaderStyled = styled(PropagateLoader, {
+  name: PROPAGATE_LOADER_SPINNER_KEY_COMPONENT,
+  slot: PropagateLoaderSpinnerSlots.loader
+})(propagateLoaderSpinnerStyles?.loader);
+export {
+  LoaderStyled as L,
+  PropagateLoaderSpinnerStyled as P
+};

package/components/extended/React-Spinners/PropagateLoaderSpinner/slots/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PropagateLoaderSpinnerEnum';
+export * from './PropagateLoaderSpinnerSlots';

package/components/extended/React-Spinners/PropagateLoaderSpinner/slots/index.js

@@ -0,0 +1 @@
+

package/components/extended/React-Spinners/PropagateLoaderSpinner/tests/PropagateLoaderSpinner.test.d.ts

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

package/components/extended/React-Spinners/PropagateLoaderSpinner/types.d.ts

@@ -0,0 +1,58 @@
+import { CSSProperties } from 'react';
+import { PropagateLoaderSpinnerSlots } from './slots/PropagateLoaderSpinnerEnum';
+import { PROPAGATE_LOADER_SPINNER_KEY_COMPONENT } from './constants';
+import { OverridesStyleRules } from '@mui/material/styles/overrides';
+import { Theme } from '@mui/material';
+import { Sizes } from '@m4l/styles';
+export type PropagateLoaderSpinnerType = keyof typeof PropagateLoaderSpinnerSlots;
+/**
+ * Propiedades comunes para configurar el loader.
+ */
+export interface PropagateLoaderSpinnerProps {
+    /**
+     * Indica si el loader debe mostrarse o no.
+     * Por defecto: `true`.
+     */
+    loading?: boolean;
+    /**
+     * Color del loader.
+     * Puede ser cualquier valor de color válido en CSS.
+     */
+    color?: string;
+    /**
+     * Factor de multiplicación de la velocidad del loader.
+     * Por defecto: `1`.
+     */
+    speedMultiplier?: number;
+    /**
+     * Estilos en línea para sobrescribir los predeterminados del loader.
+     */
+    cssOverride?: CSSProperties;
+    /**
+     * 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 PropagateLoaderSpinnerOwnerState {
+    /**
+     * Tamaño del campo de texto.
+     */
+    propagateLoaderSize: PropagateLoaderSpinnerProps['size'];
+    /**
+     * Props adicionales que se pueden pasar al loader.
+     */
+    [key: string]: unknown;
+}
+export type PropagateLoaderSpinnerStyles = OverridesStyleRules<PropagateLoaderSpinnerType, typeof PROPAGATE_LOADER_SPINNER_KEY_COMPONENT, Theme>;

package/index.js

@@ -10,7 +10,7 @@ import { I as I2 } from "./components/animate/IconButtonAnimate/index.js";
 import { M } from "./components/animate/MotionContainer/index.js";
 import { M as M2 } from "./components/animate/MotionLazyContainer/index.js";
 import { L } from "./components/animate/LoadingScreen/index.js";
-import { P } from "./components/animate/PropagateLoader/index.js";
+import { P } from "./components/extended/React-Spinners/PropagateLoaderSpinner/PropagateLoaderSpinner.js";
 import { A } from "./components/animate/AnimatedScroll/animatedScroll.js";
 import { v } from "./components/animate/variants/fade.js";
 import { v as v2 } from "./components/animate/variants/bounce.js";
@@ -306,7 +306,7 @@ export {
   P13 as PopupsViewer,
   P4 as PriceFormatter,
   P5 as PrintingSystem,
-  P as PropagateLoader,
+  P as PropagateLoaderSpinner,
   P11 as PropertyValue,
   R as RHFAutocomplete,
   R2 as RHFAutocompleteAsync,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.1.69",
+  "version": "9.1.70",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"

package/components/animate/PropagateLoader/index.d.ts

@@ -1,6 +0,0 @@
-/**
- * Un componente de cargador que muestra un propagador de carga.
- * Utiliza React Spinners bajo el nombre de `PropagateLoader`.
- * @returns Un componente de cargador que muestra un propagador de carga.
- */
-export declare const PropagateLoader: () => import("react/jsx-runtime").JSX.Element;

package/components/animate/PropagateLoader/index.js

@@ -1,11 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useTheme } from "@mui/material";
-import { PropagateLoader as PropagateLoader$1 } from "react-spinners";
-import { W as WrapperPropageteLoader } from "./syles.js";
-const PropagateLoader = () => {
-  const { palette } = useTheme();
-  return /* @__PURE__ */ jsx(WrapperPropageteLoader, { children: /* @__PURE__ */ jsx(PropagateLoader$1, { color: palette.primary.main }) });
-};
-export {
-  PropagateLoader as P
-};

package/components/animate/PropagateLoader/syles.d.ts

@@ -1 +0,0 @@
-export declare const WrapperPropageteLoader: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/animate/PropagateLoader/syles.js

@@ -1,16 +0,0 @@
-import { styled } from "@mui/material/styles";
-const WrapperPropageteLoader = styled("div")(({ theme }) => ({
-  right: 0,
-  bottom: 0,
-  zIndex: 99999,
-  width: "100%",
-  height: "100%",
-  position: "fixed",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  background: theme.vars.palette.background.default
-}));
-export {
-  WrapperPropageteLoader as W
-};