@m4l/components 9.1.79 → 9.1.81

package/components/{mui_extended/Pager → Pager}/subcomponents/PagerActions/types.d.ts

@@ -1,8 +1,8 @@
-import { Classes } from '../../classes/types';
+import { Sizes } from '@m4l/styles';
 export interface PagerActionsProps {
     count: number;
     page: number;
     rowsPerPage: number;
     onPageChange: (event: React.MouseEvent<HTMLButtonElement>, newPage: number) => void;
-    classes: Classes;
+    size?: Extract<Sizes, 'small' | 'medium'>;
 }

package/components/Pager/tests/Pager.test.d.ts

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

package/components/Pager/types.d.ts

@@ -0,0 +1,25 @@
+import { Theme } from '@mui/material';
+import { PAGER_KEY_COMPONENT } from './constants';
+import { OverridesStyleRules } from '@mui/material/styles/overrides';
+import { PagerSlots } from './slots/PagerEnum';
+import { Sizes } from '@m4l/styles';
+export type PagerType = keyof typeof PagerSlots;
+export interface PagerProps {
+    records: number;
+    totalRecords: number;
+    rowsPerPageOptions?: number[];
+    rowsPerPage?: number;
+    page: number;
+    onPageChange: (newPage: number) => void;
+    onRowsPerPageChange: (newRowsPerPage: number) => void;
+    labelRows?: string;
+    labelOf?: string;
+    size?: Extract<Sizes, 'small' | 'medium'>;
+}
+export type selectOption<T = unknown> = {
+    id: T;
+    label: string;
+    value?: T;
+    startAdornment?: React.ReactNode;
+};
+export type PagerStyles = OverridesStyleRules<PagerType, typeof PAGER_KEY_COMPONENT, Theme>;

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

@@ -0,0 +1,14 @@
+import { SplitLayoutProps } from './types';
+/**
+ * Componente SplitLayout refactorizado de la libreria `react-splitter-layout` que usa `SplitterLayout`.
+ * @param {SplitLayoutProps} props
+ * @example
+ *  ```
+ * <SplitLayout
+ * splitPosition={isDesktop ? splitPosition : 'none'}
+ * firstPart={masterComponent}
+ * secondPart={detailComponent}
+ * />
+ *  ```
+ */
+export declare const SplitLayout: (props: SplitLayoutProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { S as SplitterLayout } from "../../../../internal_libs/react-splitter-layout.js";
+import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
+import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
+import { S as SplitLayoutRootStyled, a as SplitMasterStyled, b as SplitDetailStyled } from "./slots/SplitLayoutSlots.js";
+import { S as SplitLayoutSlots } from "./slots/SplitLayoutEnum.js";
+import { S as SPLIT_LAYOUT_PREFIX, a as SPLIT_LAYOUT_KEY_COMPONENT } from "./constants.js";
+const SplitLayout = (props) => {
+  const {
+    splitPosition,
+    firstPart,
+    secondPart,
+    secondParrtInitialSize = 50,
+    percentage = true,
+    dataTestId,
+    className
+  } = props;
+  return /* @__PURE__ */ jsx(
+    SplitLayoutRootStyled,
+    {
+      ...getPropDataTestId(SPLIT_LAYOUT_PREFIX, SplitLayoutSlots.root, dataTestId),
+      className: clsx(getComponentSlotRoot(SPLIT_LAYOUT_KEY_COMPONENT), className),
+      children: /* @__PURE__ */ jsxs(
+        SplitterLayout,
+        {
+          vertical: splitPosition === "vertical",
+          percentage,
+          secondaryInitialSize: secondParrtInitialSize,
+          children: [
+            /* @__PURE__ */ jsx(
+              SplitMasterStyled,
+              {
+                ...getPropDataTestId(SPLIT_LAYOUT_PREFIX, SplitLayoutSlots.splitMaster, dataTestId),
+                children: typeof firstPart === "function" ? firstPart() : firstPart
+              }
+            ),
+            splitPosition !== "none" && /* @__PURE__ */ jsx(
+              SplitDetailStyled,
+              {
+                ...getPropDataTestId(SPLIT_LAYOUT_PREFIX, SplitLayoutSlots.splitDetail, dataTestId),
+                children: typeof secondPart === "function" ? secondPart() : secondPart
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  SplitLayout as S
+};

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

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

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/RHFSelect/slots/RHFSlots.js

@@ -3,8 +3,8 @@ import { a as RHFSELECT_COMPONENT_KEY } from "../constants.js";
 import { R as RHFSelectEnum } from "./RHFSelectEnum.js";
 import { r as rhfSelectStyles } from "../RHFSelect.styles.js";
 import { L as Label } from "../../../Label/Label.js";
-import { S as Select } from "../../../mui_extended/Select/Select.js";
 import { H as HelperError } from "../../../HelperError/HelperError.js";
+import { S as Select } from "../../../mui_extended/Select/Select.js";
 const RootStyled = styled("div", {
   name: RHFSELECT_COMPONENT_KEY,
   slot: RHFSelectEnum.root

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/components/mui_extended/Select/Select.styles.js

@@ -5,8 +5,8 @@ const selectStyles = {
    * Estilos para el componente Select
    * @author Bruce Escobar - automatic
    * @createdAt 2024-10-22 10:30:26 - automatic
-   * @updatedAt 2025-01-03 11:42:15 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2025-01-17 19:00:56 - automatic
+   * @updatedUser cesar - automatic
    */
   root: ({ theme, ownerState }) => ({
     [`&.${SELECT_CLASSES.root}`]: {
@@ -67,6 +67,13 @@ const selectStyles = {
       "&:focus-within": {
         borderColor: ownerState.paletteColor?.focus
       },
+      '&[aria-hidden="true"]': {
+        pointerEvents: "none"
+      },
+      "&[inert]": {
+        pointerEvents: "none",
+        opacity: 0.5
+      },
       ...ownerState.error && {
         borderColor: ownerState.paletteColor?.enabled,
         "&:hover": {
@@ -100,8 +107,8 @@ const selectStyles = {
    * @returns {object} The styles for the render option container
    * @author SebastianM - automatic
    * @createdAt 2024-12-18 15:11:13 - automatic
-   * @updatedAt 2025-01-03 11:42:15 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2025-01-17 19:00:56 - automatic
+   * @updatedUser cesar - automatic
    */
   renderValueContainer: ({ theme }) => ({
     display: "flex",
@@ -116,8 +123,8 @@ const selectStyles = {
    * Styles for the label option
    * @author SebastianM - automatic
    * @createdAt 2024-12-23 10:47:53 - automatic
-   * @updatedAt 2025-01-03 11:42:15 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2025-01-17 19:00:56 - automatic
+   * @updatedUser cesar - automatic
    */
   labelOption: ({ theme }) => ({
     paddingLeft: theme.vars.size.baseSpacings.sp1,
@@ -128,8 +135,8 @@ const selectStyles = {
    * @returns {object} The styles for the label placeholder
    * @author SebastianM - automatic
    * @createdAt 2024-12-26 14:16:33 - automatic
-   * @updatedAt 2025-01-03 11:42:15 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2025-01-17 19:00:56 - automatic
+   * @updatedUser cesar - automatic
    */
   labelPlaceholer: ({ theme }) => ({
     paddingLeft: theme.vars.size.baseSpacings.sp1
@@ -158,8 +165,8 @@ const selectStyles = {
    * Styles for the skeleton select component
    * @author SebastianM - automatic
    * @createdAt 2024-12-17 15:54:22 - automatic
-   * @updatedAt 2025-01-03 11:42:15 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2025-01-17 19:00:56 - automatic
+   * @updatedUser cesar - automatic
    */
   skeletonSelect: ({ theme, ownerState }) => ({
     width: "100%",

package/components/mui_extended/index.d.ts

@@ -19,9 +19,9 @@ export * from './Skeleton';
 export * from './Stack';
 export * from './Tabs';
 export * from './TabContent';
-export { Pager } from './Pager';
-export type { PagerProps } from './Pager/types';
-export { getPagerComponentsDictionary } from './Pager/dicctionary';
+export { Pager } from '../Pager/Pager';
+export type { PagerProps } from '../Pager/types';
+export { getPagerComponentsDictionary } from '../Pager/dicctionary';
 export { Tab } from './Tab/Tab';
 export * from './TabContext';
 export * from './Typography/Typography';

package/index.js

@@ -131,7 +131,7 @@ import { a as a10, M as M11 } from "./components/MenuActions/MenuActions.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";
@@ -157,8 +157,8 @@ import { B as B5 } from "./components/mui_extended/Badge/Badge.js";
 import { L as L9 } from "./components/mui_extended/LinearProgress/index.js";
 import { L as L10 } from "./components/mui_extended/LinkWithRoute/index.js";
 import { L as L11 } from "./components/mui_extended/LoadingButton/LoadingButton.js";
-import { P as P14 } from "./components/mui_extended/Pager/index.js";
-import { g as g25 } from "./components/mui_extended/Pager/dicctionary.js";
+import { P as P14 } from "./components/Pager/Pager.js";
+import { g as g25 } from "./components/Pager/dicctionary.js";
 import { T as T6 } from "./components/mui_extended/Tab/Tab.js";
 import { T as T7 } from "./components/mui_extended/Tooltip/Tooltip.js";
 import { I as I6 } from "./components/mui_extended/IconButton/IconButton.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.1.79",
+  "version": "9.1.81",
   "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
-};