@m4l/components 9.1.78 → 9.1.80

package/components/extended/React-Splitter/SplitLayout/SplitLayout.styles.js

@@ -0,0 +1,157 @@
+const splitLayoutStyles = {
+  /**
+   * Estilos para root
+   */
+  root: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    position: "relative",
+    flexGrow: 1,
+    overflow: "hidden",
+    // Configuracion por defecto en horizontal
+    "& .splitter-layout": {
+      position: "absolute",
+      display: "flex",
+      flexDirection: "row",
+      width: "100%",
+      height: "100%",
+      overflow: "hidden",
+      gap: theme.vars.size.baseSpacings.sp2
+    },
+    // Configuracion de ambos paneles a dividir
+    "& .splitter-layout .layout-pane": {
+      position: "relative",
+      flex: "0 0 auto",
+      overflow: "hidden"
+    },
+    // Configuración del panel principal
+    "& .splitter-layout .layout-pane.layout-pane-primary": {
+      flex: "1 1 auto"
+    },
+    // Configuración del cursor en horizontal
+    "& .splitter-layout.layout-changing": {
+      cursor: "col-resize"
+    },
+    // Configuración barran grande cuando es horizontal
+    "& .splitter-layout > .layout-splitter": {
+      display: "flex",
+      alignItems: "center",
+      backgroundColor: "none",
+      boxSizing: "border-box",
+      backgroundClip: "padding-box",
+      // Propiedades del horizontal
+      width: "8px",
+      margin: "0 0.5px",
+      borderLeft: "4px solid hsla(0, 0%, 5%, 0)",
+      borderRight: "4px solid hsla(0, 0%, 5%, 0)",
+      cursor: "col-resize",
+      justifyContent: "center",
+      height: "100%"
+    },
+    // Configuración divisorra interna posición horizontal del split
+    "& .splitter-layout .layout-splitter:before": {
+      content: `""`,
+      height: "56px",
+      width: "4px",
+      top: "calc(50% - 22.5px)",
+      position: "absolute",
+      background: theme.vars.palette.primary.enabled,
+      borderRadius: theme.vars.size.borderRadius["r0-5"],
+      margin: "1px 0px"
+    },
+    // Hover de la barra externa en posición horizontal
+    "& .splitter-layout > .layout-splitter:hover": {
+      borderRadius: "2px",
+      borderLeft: `2px`,
+      borderRight: `2px`
+    },
+    // Configuración del cursor en horizontal
+    "& .splitter-layout.splitter-layout-vertical.layout-changing": {
+      cursor: "row-resize"
+    },
+    // Barra divisora vertical del split
+    "& .splitter-layout.splitter-layout-vertical > .layout-splitter": {
+      height: theme.vars.size.baseSpacings.sp2,
+      width: "100% !important",
+      margin: "1px 0",
+      cursor: "row-resize"
+    },
+    // Configuración barra divisora interna vertical del split
+    "& .splitter-layout.splitter-layout-vertical .layout-splitter:before": {
+      width: "56px !important",
+      height: "4px !important",
+      left: "calc(50% - 22.5px)",
+      top: "unset",
+      background: theme.vars.palette.primary.enabled,
+      borderRadius: "2px",
+      zIndex: "1"
+    },
+    // Color del hover y el arrastrando del splitter
+    "& .splitter-layout > .layout-splitter:hover:before, .splitter-layout.layout-changing >  .layout-splitter:before": {
+      // barra interna vertical
+      background: theme.vars.palette.primary.hover
+    },
+    // Dirección flex cuando es vertical
+    "& .splitter-layout.splitter-layout-vertical": {
+      flexDirection: "column",
+      position: "relative",
+      "& .layout-splitter:after": {
+        content: `""`,
+        height: "2px",
+        left: "0",
+        right: "0",
+        /* top: 'calc(50% - 6px)', */
+        position: "absolute",
+        background: theme.vars.palette?.border.default
+      }
+    },
+    "& .splitter-layout:not(.splitter-layout-vertical)": {
+      "& .layout-splitter:after": {
+        content: `""`,
+        width: "2px",
+        top: "0",
+        bottom: "0",
+        position: "absolute",
+        background: theme.vars.palette?.border.default
+      }
+    }
+  }),
+  /**
+   * SplitMaster firstPart
+   */
+  splitMaster: () => ({
+    position: "relative",
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    "& .M4LStack-root": {
+      gap: "8px"
+    }
+  }),
+  /**
+   * SplitMaster secondPart
+   */
+  splitDetail: () => ({
+    position: "relative",
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    overflow: "hidden",
+    left: "0px",
+    right: "0px",
+    top: "0px",
+    bottom: "0px",
+    "& .M4LStack-root": {
+      //gap: '8px',
+      overflow: "hidden"
+    }
+  })
+};
+export {
+  splitLayoutStyles as s
+};

package/components/extended/React-Splitter/SplitLayout/constants.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Clave de identificación del componente SplitLayout dentro del sistema.
+ *
+ * Esta constante se utiliza como identificador único para asociar y personalizar estilos y configuraciones
+ * relacionadas con el componente `SplitLayout` dentro del sistema de temas y estilos.
+ * @default 'SplitLayout'
+ */
+export declare const SPLIT_LAYOUT_KEY_COMPONENT = "M4LSplitLayout";
+export declare const SPLIT_LAYOUT_PREFIX = "M4LSplitLayout";

package/components/extended/React-Splitter/SplitLayout/constants.js

@@ -0,0 +1,6 @@
+const SPLIT_LAYOUT_KEY_COMPONENT = "M4LSplitLayout";
+const SPLIT_LAYOUT_PREFIX = "M4LSplitLayout";
+export {
+  SPLIT_LAYOUT_PREFIX as S,
+  SPLIT_LAYOUT_KEY_COMPONENT as a
+};

package/components/extended/React-Splitter/SplitLayout/slots/SplitLayoutEnum.d.ts

@@ -0,0 +1,5 @@
+export declare enum SplitLayoutSlots {
+    root = "root",
+    splitMaster = "splitMaster",
+    splitDetail = "splitDetail"
+}

package/components/extended/React-Splitter/SplitLayout/slots/SplitLayoutEnum.js

@@ -0,0 +1,9 @@
+var SplitLayoutSlots = /* @__PURE__ */ ((SplitLayoutSlots2) => {
+  SplitLayoutSlots2["root"] = "root";
+  SplitLayoutSlots2["splitMaster"] = "splitMaster";
+  SplitLayoutSlots2["splitDetail"] = "splitDetail";
+  return SplitLayoutSlots2;
+})(SplitLayoutSlots || {});
+export {
+  SplitLayoutSlots as S
+};

package/components/extended/React-Splitter/SplitLayout/slots/SplitLayoutSlots.d.ts

@@ -0,0 +1,3 @@
+export declare const SplitLayoutRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & 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 SplitMasterStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & 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 SplitDetailStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;

package/components/extended/React-Splitter/SplitLayout/slots/SplitLayoutSlots.js

@@ -0,0 +1,21 @@
+import { styled } from "@mui/material/styles";
+import { s as splitLayoutStyles } from "../SplitLayout.styles.js";
+import { a as SPLIT_LAYOUT_KEY_COMPONENT } from "../constants.js";
+import { S as SplitLayoutSlots } from "./SplitLayoutEnum.js";
+const SplitLayoutRootStyled = styled("div", {
+  name: SPLIT_LAYOUT_KEY_COMPONENT,
+  slot: SplitLayoutSlots.root
+})(splitLayoutStyles.root);
+const SplitMasterStyled = styled("div", {
+  name: SPLIT_LAYOUT_KEY_COMPONENT,
+  slot: SplitLayoutSlots.splitMaster
+})(splitLayoutStyles.splitMaster);
+const SplitDetailStyled = styled("div", {
+  name: SPLIT_LAYOUT_KEY_COMPONENT,
+  slot: SplitLayoutSlots.splitDetail
+})(splitLayoutStyles.splitDetail);
+export {
+  SplitLayoutRootStyled as S,
+  SplitMasterStyled as a,
+  SplitDetailStyled as b
+};

package/components/extended/React-Splitter/SplitLayout/tests/SplitLayout.test.d.ts

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

package/components/{SplitLayout → extended/React-Splitter/SplitLayout}/types.d.ts

@@ -1,4 +1,8 @@
 import { ReactNode } from 'react';
+import { Theme } from '@mui/material';
+import { M4LOverridesStyleRules } from 'src/@types/augmentations';
+import { SplitLayoutSlots as slots } from './slots/SplitLayoutEnum';
+import { SPLIT_LAYOUT_KEY_COMPONENT } from './constants';
 export type SplitPosition = 'vertical' | 'horizontal' | 'none';
 /** Es una interfaz que define las propiedades aceptadas por el componente SplitLayout.  */
 export interface SplitLayoutProps {
@@ -9,12 +13,14 @@ export interface SplitLayoutProps {
     /** permite establecer un tamaño inicial específico para la segunda parte del diseño dividido.*/
     secondParrtInitialSize?: number;
     /**representa el contenido o componente que se mostrará en la primera parte de la interfaz de usuario. */
-    firstPart: ((props?: any) => JSX.Element) | ReactNode;
+    firstPart?: ((props?: any) => JSX.Element) | ReactNode;
     /** representa el contenido o componente que se mostrará en la segunda parte de la interfaz de usuario,la parte sea de abajo o a la derecha*/
-    secondPart: ((props?: any) => JSX.Element) | ReactNode;
+    secondPart?: ((props?: any) => JSX.Element) | ReactNode;
     /** se utiliza para permitir que el componente SplitLayout reciba clases CSS personalizadas desde el componente padre, lo que permite una mayor flexibilidad en la estilización de este componente.*/
     className?: string;
+    /**
+     * se utiliza el `dataTestId` para las pruebas unitarias
+     */
+    dataTestId?: string;
 }
-/**Una manera de gestionar y mantener el estado del propietario dentro del componente SplitLayout.
- * En este contexto OwnerState está siendo utilizado para almacenar información sobre la posición de la división en el diseño dividido, para controlar cómo se visualiza o se comporta el diseño dividido en la interfaz de usuario */
-export type OwnerState = Pick<SplitLayoutProps, 'splitPosition'>;
+export type SplitLayoutStyles = M4LOverridesStyleRules<keyof typeof slots, typeof SPLIT_LAYOUT_KEY_COMPONENT, Theme>;

package/components/hook-form/RHFNumberInput/RHFNumberInput.js

@@ -0,0 +1,89 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useFormContext, Controller } from "react-hook-form";
+import useId from "@mui/material/utils/useId";
+import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { L as Label } from "../../Label/Label.js";
+import { H as HelperError } from "../../HelperError/HelperError.js";
+import { N as NumberInput } from "../../NumberInput/NumberInput.js";
+import { R as RHFNumberInputSlots } from "./slots/RHFNumberInputEnum.js";
+import { R as RHF_NUMBER_INPUT_KEY_COMPONENT } from "./constants.js";
+import { R as RootStyled } from "./slots/RHFNumberInputSlots.js";
+import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
+const RHFNumberInput = (props) => {
+  const {
+    name,
+    max,
+    min,
+    step,
+    disabled,
+    size = "medium",
+    variant = "outlined",
+    label,
+    mandatory,
+    mandatoryMessage,
+    helperMessage,
+    startAdornment,
+    endAdornment,
+    ...others
+  } = props;
+  const { control } = useFormContext();
+  const { currentSize } = useComponentSize(size);
+  const ownerState = {
+    iconSize: currentSize
+  };
+  const htmlForId = useId();
+  return /* @__PURE__ */ jsx(
+    RootStyled,
+    {
+      ownerState: { ...ownerState },
+      ...getPropDataTestId(RHF_NUMBER_INPUT_KEY_COMPONENT, RHFNumberInputSlots.root),
+      children: /* @__PURE__ */ jsx(
+        Controller,
+        {
+          name,
+          control,
+          render: ({ field: { value, onChange }, fieldState: { error } }) => {
+            const onChangeLocal = (_event, newValue) => {
+              onChange(newValue);
+            };
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              label && /* @__PURE__ */ jsx(
+                Label,
+                {
+                  htmlFor: htmlForId,
+                  label,
+                  mandatory,
+                  mandatoryMessage,
+                  helperMessage,
+                  size
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                NumberInput,
+                {
+                  id: htmlForId,
+                  size,
+                  step,
+                  max,
+                  min,
+                  value,
+                  onChange: onChangeLocal,
+                  variant,
+                  disabled,
+                  startAdornment,
+                  endAdornment,
+                  error: !!error,
+                  ...others
+                }
+              ),
+              error?.message && /* @__PURE__ */ jsx(HelperError, { htmlFor: htmlForId, size, message: error.message })
+            ] });
+          }
+        }
+      )
+    }
+  );
+};
+export {
+  RHFNumberInput as R
+};

package/components/hook-form/RHFNumberInput/RHFNumberInput.styles.js

@@ -0,0 +1,16 @@
+const rhfNumberInputStyles = {
+  /**
+   * Estilos para el slot `root`.
+   *
+   * Se utiliza para aplicar estilos personalizados al contenedor principal
+   * del componente `RHFInputNumberSpinner`.
+   */
+  root: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings.sp1
+  })
+};
+export {
+  rhfNumberInputStyles as r
+};

package/components/hook-form/RHFNumberInput/constants.js

@@ -0,0 +1,4 @@
+const RHF_NUMBER_INPUT_KEY_COMPONENT = "M4LRHFNumberInput";
+export {
+  RHF_NUMBER_INPUT_KEY_COMPONENT as R
+};

package/components/hook-form/RHFNumberInput/slots/RHFNumberInputEnum.js

@@ -0,0 +1,7 @@
+var RHFNumberInputSlots = /* @__PURE__ */ ((RHFNumberInputSlots2) => {
+  RHFNumberInputSlots2["root"] = "root";
+  return RHFNumberInputSlots2;
+})(RHFNumberInputSlots || {});
+export {
+  RHFNumberInputSlots as R
+};

package/components/hook-form/RHFNumberInput/slots/RHFNumberInputSlots.js

@@ -0,0 +1,11 @@
+import { styled } from "@mui/material";
+import { R as RHF_NUMBER_INPUT_KEY_COMPONENT } from "../constants.js";
+import { r as rhfNumberInputStyles } from "../RHFNumberInput.styles.js";
+import { R as RHFNumberInputSlots } from "./RHFNumberInputEnum.js";
+const RootStyled = styled("div", {
+  name: RHF_NUMBER_INPUT_KEY_COMPONENT,
+  slot: RHFNumberInputSlots.root
+})(rhfNumberInputStyles?.root);
+export {
+  RootStyled as R
+};

package/components/hook-form/index.d.ts

@@ -13,4 +13,5 @@ export * from './RHFTextFieldPassword';
 export { RHFPeriod } from './RHFPeriod/RHFPeriod';
 export { getPeriodComponetsDictionary } from '../Period/dictionary';
 export { RHFRadioGroup } from './RHFRadioGroup';
+export { RHFNumberInput } from './RHFNumberInput/RHFNumberInput';
 export * from './RHFUpload';

package/components/index.d.ts

@@ -43,7 +43,7 @@ export type { MenuAction, ComponentActionProps } from './MenuActions/types';
 export * from './extended/React-Resizable';
 export * from './ScrollBar';
 export { ScrollToTop } from './ScrollToTop';
-export * from './SplitLayout/SplitLayout';
+export * from './extended/React-Splitter/SplitLayout/SplitLayout';
 export * from './ToastContainer';
 export * from './SideBar';
 export * from './AppBar';
@@ -53,6 +53,6 @@ export * from './popups';
 export * from './commercial';
 export * from './MFIsolationApp';
 export * from './BaseModule';
-export type { SplitPosition } from './SplitLayout/types';
+export type { SplitPosition } from './extended/React-Splitter/SplitLayout/types';
 export * from './mui_extended';
 export * from './WindowBase';

package/index.js

@@ -36,11 +36,12 @@ import { R as R6 } from "./components/hook-form/RHFHelperError/index.js";
 import { R as R7 } from "./components/hook-form/RHFPeriod/RHFPeriod.js";
 import { g as g6 } from "./components/Period/dictionary.js";
 import { R as R8 } from "./components/hook-form/RHFRadioGroup/RHFRadioGroup.js";
-import { R as R9 } from "./components/hook-form/RHFColorPicker/RFHColorPicker.js";
-import { R as R10 } from "./components/hook-form/RHFCheckbox/RHFCheckbox.js";
-import { R as R11 } from "./components/hook-form/RHFTextField/RHFTextField.js";
-import { R as R12 } from "./components/hook-form/RHFTextFieldPassword/RHFTextFieldPassword.js";
-import { R as R13 } from "./components/hook-form/RHFUpload/RHFUploadImage/RHFUploadImage.js";
+import { R as R9 } from "./components/hook-form/RHFNumberInput/RHFNumberInput.js";
+import { R as R10 } from "./components/hook-form/RHFColorPicker/RFHColorPicker.js";
+import { R as R11 } from "./components/hook-form/RHFCheckbox/RHFCheckbox.js";
+import { R as R12 } from "./components/hook-form/RHFTextField/RHFTextField.js";
+import { R as R13 } from "./components/hook-form/RHFTextFieldPassword/RHFTextFieldPassword.js";
+import { R as R14 } from "./components/hook-form/RHFUpload/RHFUploadImage/RHFUploadImage.js";
 import { B } from "./components/formatters/BooleanFormatter/BooleanFormatter.js";
 import { D as D2, u as u4 } from "./components/formatters/DateFormatter/DateFormatter.js";
 import { U, g as g7 } from "./components/formatters/UncertaintyFormatter/UncertaintyFormatter.js";
@@ -73,7 +74,7 @@ import { d, g as g13 } from "./components/CommonActions/dictionary.js";
 import { D as D5 } from "./components/DragResizeWindow/DragResizeWindow.js";
 import { d as d2 } from "./components/DragResizeWindow/classes/index.js";
 import { G } from "./components/GridLayout/GridLayout.js";
-import { R as R14 } from "./components/GridLayout/subcomponents/Responsive/index.js";
+import { R as R15 } from "./components/GridLayout/subcomponents/Responsive/index.js";
 import { c as c3, d as d3, e } from "./components/GridLayout/subcomponents/Responsive/responsiveUtils.js";
 import { i, k } from "./components/GridLayout/utils.js";
 import { w } from "./components/GridLayout/subcomponents/withSizeProvider/index.js";
@@ -127,10 +128,10 @@ import { H as H4 } from "./components/HelmetPage/index.js";
 import { P as P11 } from "./components/PropertyValue/PropertyValue.js";
 import { a as a9 } from "./components/MenuActions/dictionary.js";
 import { a as a10, M as M11 } from "./components/MenuActions/MenuActions.js";
-import { R as R15 } from "./components/extended/React-Resizable/Resizable/Resizable.js";
-import { R as R16 } from "./components/extended/React-Resizable/ResizableBox/ResizableBox.js";
+import { R as R16 } from "./components/extended/React-Resizable/Resizable/Resizable.js";
+import { R as R17 } from "./components/extended/React-Resizable/ResizableBox/ResizableBox.js";
 import { S as S3 } from "./components/ScrollBar/index.js";
-import { S as S4 } from "./components/SplitLayout/SplitLayout.js";
+import { S as S4 } from "./components/extended/React-Splitter/SplitLayout/SplitLayout.js";
 import { T as T3 } from "./components/ToastContainer/ToastContainer.js";
 import { T as T4 } from "./components/ToastContainer/subcomponents/ToastMessage/ToastMessage.js";
 import { S as S5 } from "./components/SideBar/SideBar.js";
@@ -182,12 +183,12 @@ import { T as T17 } from "./components/mui_extended/ToggleIconButton/constants.j
 import { T as T18 } from "./components/mui_extended/ToggleIconButton/slots/ToggleIconButtonEnum.js";
 import { T as T19 } from "./components/mui_extended/ToggleIconButton/slots/ToggleIconButtonSlots.js";
 import { a as a13, D as D6, M as M13 } from "./components/areas/contexts/DynamicMFParmsContext/index.js";
-import { F, R as R17, u as u9 } from "./components/hook-form/RHFormContext/index.js";
+import { F, R as R18, u as u9 } from "./components/hook-form/RHFormContext/index.js";
 import { g as g26 } from "./components/hook-form/RHFormContext/dictionary.js";
 import { u as u10 } from "./contexts/AppearanceComponentContext/useAppearanceComponentStore.js";
 import { A as A16 } from "./contexts/AppearanceComponentContext/AppearanceComponentContext.js";
 import { a as a14, M as M14 } from "./contexts/ModalContext/index.js";
-import { a as a15, R as R18 } from "./contexts/RealTimeContext/RealTimeContext.js";
+import { a as a15, R as R19 } from "./contexts/RealTimeContext/RealTimeContext.js";
 import { u as u11 } from "./hooks/useFormAddEdit/index.js";
 import { u as u12 } from "./hooks/useModal/index.js";
 import { u as u13 } from "./hooks/useTab/index.js";
@@ -310,23 +311,24 @@ export {
   P11 as PropertyValue,
   R as RHFAutocomplete,
   R2 as RHFAutocompleteAsync,
-  R10 as RHFCheckbox,
-  R9 as RHFColorPicker,
+  R11 as RHFCheckbox,
+  R10 as RHFColorPicker,
   R3 as RHFDateTime,
   R6 as RHFHelperError,
   R4 as RHFMultiCheckbox,
+  R9 as RHFNumberInput,
   R7 as RHFPeriod,
   R8 as RHFRadioGroup,
   R5 as RHFSelect,
-  R11 as RHFTextField,
-  R12 as RHFTextFieldPassword,
-  R13 as RHFUploadImage,
-  R17 as RHFormProvider,
+  R12 as RHFTextField,
+  R13 as RHFTextFieldPassword,
+  R14 as RHFUploadImage,
+  R18 as RHFormProvider,
   a15 as RealTimeContext,
-  R18 as RealTimeProvider,
-  R15 as Resizable,
-  R16 as ResizableBox,
-  R14 as Responsive,
+  R19 as RealTimeProvider,
+  R16 as Resizable,
+  R17 as ResizableBox,
+  R15 as Responsive,
   S3 as ScrollBar,
   S as ScrollToTop,
   S6 as SectionCommercial,

package/package.json

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

package/components/SplitLayout/SplitLayout.d.ts

@@ -1,16 +0,0 @@
-import { SplitLayoutProps } from './types';
-/**
- * Propiedades para el componente SplitLayout.
- * @param {SplitLayoutProps} props
- * splitPosition - determina la orientación de la división entre las dos partes de la interfaz de usuario. Puede tener tres valores: "vertical", "horizontal" o "none".
- * props.firstPart - representa el contenido o componente que se mostrará en la primera parte de la interfaz de usuario.
- * props.secondPart - Esta propiedad representa el contenido o componente que se mostrará en la segunda parte de la interfaz de usuario,la parte sea de abajo o a la derecha
- * props.secondParrtInitialSize - te permite establecer un tamaño inicial específico para la segunda parte del diseño dividido.
- * props.percentage - La propiedad percentage en la interfaz SplitLayoutProps indica si el tamaño inicial de la segunda parte del diseño dividido se proporciona en porcentaje en lugar de píxeles.
- * props.className - se utiliza para permitir que el componente SplitLayout reciba clases CSS personalizadas desde el componente padre, lo que permite una mayor flexibilidad en la estilización de este componente.
- * @returns
- */
-/**
- * TODO: Documentar
- */
-export declare function SplitLayout(props: SplitLayoutProps): import("react/jsx-runtime").JSX.Element;

package/components/SplitLayout/SplitLayout.js

@@ -1,57 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { S as SplitLayoutRoot, a as SplitMaster, b as SplitDetail } from "./styles.js";
-import { u as useSplitLayoutUtilityClasses } from "./classes/index.js";
-import clsx from "clsx";
-import { T as TEST_PROP_ID } from "../../test/constants_no_mock.js";
-import { g as getNameSplitLayoutDataTestId } from "./tests/utils.js";
-import { S as SplitterLayout } from "../../internal_libs/react-splitter-layout.js";
-function SplitLayout(props) {
-  const {
-    splitPosition,
-    firstPart,
-    secondPart,
-    secondParrtInitialSize = 50,
-    percentage = true,
-    className
-  } = props;
-  const ownerState = {
-    splitPosition
-  };
-  const classes = useSplitLayoutUtilityClasses(ownerState);
-  return /* @__PURE__ */ jsx(
-    SplitLayoutRoot,
-    {
-      className: clsx(classes.root, className),
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameSplitLayoutDataTestId("root") } : {},
-      children: SplitterLayout ? /* @__PURE__ */ jsxs(
-        SplitterLayout,
-        {
-          vertical: splitPosition === "vertical",
-          percentage,
-          secondaryInitialSize: secondParrtInitialSize,
-          children: [
-            /* @__PURE__ */ jsx(
-              SplitMaster,
-              {
-                className: classes.firstPart,
-                ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameSplitLayoutDataTestId("firstPart") } : {},
-                children: typeof firstPart === "function" ? firstPart() : firstPart
-              }
-            ),
-            splitPosition !== "none" && /* @__PURE__ */ jsx(
-              SplitDetail,
-              {
-                className: classes.secondPart,
-                ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameSplitLayoutDataTestId("secondPart") } : {},
-                children: typeof secondPart === "function" ? secondPart() : secondPart
-              }
-            )
-          ]
-        }
-      ) : null
-    }
-  );
-}
-export {
-  SplitLayout as S
-};

package/components/SplitLayout/classes/constants.d.ts

@@ -1 +0,0 @@
-export declare const componentName = "M4LSplitLayout";

package/components/SplitLayout/classes/constants.js

@@ -1,4 +0,0 @@
-const componentName = "M4LSplitLayout";
-export {
-  componentName as c
-};

package/components/SplitLayout/classes/index.d.ts

@@ -1,17 +0,0 @@
-import { SplitLayoutClassesType } from './types';
-import { OwnerState } from '../types';
-/**
- * Esta es una constante que se está exportando y que contiene las clases de estilo generadas para el componente SplitLayout.
- *
- */
-export declare const splitLayoutClasses: SplitLayoutClassesType;
-export declare function getSplitLayoutUtilityClass(slot: string): string;
-/**
- * Es un hook que facilita la gestión de clases de estilo para el componente SplitLayout, permitiendo una mayor flexibilidad en la aplicación de estilos basados en el estado del propietario.
- *  @param {OwnerState} ownerState - El estado del propietario del componente SplitLayout.
- */
-export declare const useSplitLayoutUtilityClasses: (ownerState: OwnerState) => {
-    root: string;
-    firstPart: string;
-    secondPart: string;
-};

package/components/SplitLayout/classes/index.js

@@ -1,33 +0,0 @@
-import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { unstable_composeClasses } from "@mui/base";
-import { c as componentName } from "./constants.js";
-generateUtilityClasses(componentName, [
-  /* elements */
-  "root",
-  "firstPart",
-  "secondPart",
-  /* states or variants of elements */
-  "stateVertical",
-  "stateHorizontal"
-]);
-function getSplitLayoutUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const useSplitLayoutUtilityClasses = (ownerState) => {
-  const slots = {
-    root: [
-      "root",
-      ownerState.splitPosition === "vertical" && "stateVertical",
-      ownerState.splitPosition === "horizontal" && "stateHorizontal"
-    ],
-    firstPart: ["firstPart"],
-    secondPart: ["secondPart"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getSplitLayoutUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-export {
-  useSplitLayoutUtilityClasses as u
-};