@m4l/components 9.2.54 → 9.2.56-beta.2

package/components/DataGrid/styles.js

@@ -1,484 +0,0 @@
-import { alpha } from "@mui/material";
-import { g as getTypographyStyles } from "../../utils/getTypographyStyles.js";
-import { f as filterHeight } from "./subcomponents/Table/subcomponents/SelectColumn.js";
-const dataGridStyles = {
-  /**
-   * ***************************************************
-   * Estilos para el contenedor principal del DataGrid.
-   * ***************************************************
-   */
-  datagridRoot: ({ theme }) => ({
-    display: "flex",
-    flexDirection: "column",
-    padding: theme.vars.size.baseSpacings.sp0,
-    inset: theme.vars.size.baseSpacings.sp0,
-    overflow: "hidden",
-    container: "container / inline-size",
-    background: theme.vars.palette.background.default,
-    boxShadow: "unset",
-    borderRadius: theme.vars.size.borderRadius.r1,
-    border: theme.vars.size.borderStroke.container,
-    borderColor: theme.vars.palette?.border.default,
-    position: "relative",
-    gap: theme.vars.size.baseSpacings.sp3,
-    height: "100%",
-    width: "100%",
-    "& .rdg .MuiCheckbox-root": {
-      "& > svg": {
-        color: theme.vars.palette.text.secondary
-      }
-    },
-    [`&.M4LDataGrid-xs`]: {
-      "& .M4LDataGrid-actions": {
-        height: theme.vars.size.baseSpacings.sp11,
-        "& .M4LPager-labelRowsPerPageContainer": {
-          "& .M4LTypography-root": {
-            display: "none"
-          }
-        },
-        "& .M4LPager-labelDisplayRows": {
-          display: "none"
-        }
-      }
-    },
-    "& .M4LDataGrid-tableContaniner:not(.M4LDataGrid-withActions)": {
-      top: `${theme.vars.size.baseSpacings.sp0} !important`
-    },
-    "&& .M4lclassCssSpecificity": {
-      fontWeight: 400
-      //Se utiliza directamente el valor porque no está tokenizado
-    }
-  }),
-  customHeader: ({ ownerState }) => ({
-    display: ownerState.visibleCustomHeader ? "block" : "none"
-  }),
-  /**
-   * Estilos del contenedor de las acciones
-   */
-  actionsRoot: ({ theme }) => ({
-    alignItems: "center",
-    background: theme.vars.palette.background.default,
-    borderRadius: theme.vars.size.borderRadius.r1,
-    display: "flex",
-    flexDirection: "row",
-    fontWeight: 400,
-    //Se utiliza directamente el valor porque no está tokenizado
-    gap: theme.vars.size.baseSpacings.sp2,
-    height: theme.vars.size.baseSpacings.sp8,
-    justifyContent: "space-between",
-    lineHeight: theme.vars.size.baseSpacings.sp4,
-    minHeight: theme.vars.size.baseSpacings.sp8,
-    padding: `${theme.vars.size.baseSpacings.sp1} ${theme.vars.size.baseSpacings.sp2}`,
-    right: theme.vars.size.baseSpacings.sp0,
-    top: theme.vars.size.baseSpacings.sp0,
-    fontsize: getTypographyStyles(theme.generalSettings.isMobile, "medium", "body").fontSize,
-    '& [class*="M4LPager-root"]': {
-      flexGrow: 1
-    },
-    "@container main (max-width: 600px)": {
-      height: theme.vars.size.baseSpacings.sp11
-    }
-  }),
-  /**
-   * container de los botones de acciones
-   */
-  actionsConfigContainer: ({ theme }) => ({
-    display: "flex",
-    flexDirection: "row",
-    gap: theme.vars.size.baseSpacings.sp2,
-    alignItems: "center",
-    marginLeft: theme.vars.size.baseSpacings.sp3,
-    "& .M4LIconButton-root": {
-      background: theme.vars.palette.background.default
-    }
-  }),
-  /**
-   * Estilos para el contenedor principal de RowsCount
-   */
-  rowsCountRoot: ({ theme }) => ({
-    alignItems: "center",
-    display: "flex",
-    gap: theme.vars.size.baseSpacings.sp2
-  }),
-  /**
-   * Estilos para el label de RowsCount
-   */
-  rowsCountLabel: ({ theme }) => ({
-    color: theme.vars.palette.text.primary,
-    fontWeight: 400,
-    //Se utiliza directamente el valor porque no está tokenizado
-    height: "100%",
-    lineHeight: theme.vars.size.baseSpacings.sp4,
-    fontSize: getTypographyStyles(theme.generalSettings.isMobile, "medium", "body").fontSize
-  }),
-  /**
-   * Estilos para el valor de RowsCount
-   */
-  rowsCountValue: ({ theme }) => ({
-    background: theme.vars.palette.background.default,
-    borderRadius: theme.vars.size.baseSpacings.sp1,
-    paddingBottom: theme.vars.size.baseSpacings["sp0-5"],
-    paddingLeft: theme.vars.size.baseSpacings.sp1,
-    paddingRight: "6px",
-    //No hay token para este valor
-    paddingTop: theme.vars.size.baseSpacings.sp1,
-    fontSize: getTypographyStyles(theme.generalSettings.isMobile, "medium", "body").fontSize
-  }),
-  /**
-   * Estilos para el contenedor de las columnas
-   * de la tabla del modal de configuración de columnas.
-   */
-  columnsConfigWrapper: ({ theme }) => ({
-    color: theme.vars.palette.text.primary,
-    position: "relative",
-    display: "flex",
-    flexDirection: "column",
-    height: "100%",
-    width: "100%"
-  }),
-  /**
-   * Estilos para la configuración
-   * de selección de las columnas en
-   * el modal de configuración de columnas.
-   */
-  columnsConfigSelColumns: ({ theme }) => ({
-    fontWeight: 600,
-    //Se utiliza directamente el valor porque no está tokenizado
-    lineHeight: theme.vars.size.typography.lineHeight.lh2,
-    color: theme.vars.palette.text.primary,
-    padding: `${theme.vars.size.baseSpacings.sp4} ${theme.vars.size.baseSpacings.sp2}`
-  }),
-  /**
-   * Estilos para el contenedor de la tabla
-   * en el modal de configuración de columnas.
-   */
-  columnsConfigDataGrid: () => ({
-    position: "relative",
-    display: "flex",
-    flexDirection: "column",
-    flexGrow: 1,
-    overflow: "auto"
-  }),
-  /**
-   * Estilos para el contenedor de los botones
-   * de acción en el modal de configuración de columnas.
-   */
-  columnsConfigActios: ({ theme }) => ({
-    paddingTop: theme.vars.size.baseSpacings.sp4,
-    paddingBottom: theme.vars.size.baseSpacings.sp2,
-    display: "flex",
-    flexDirection: "row"
-  }),
-  /**
-   * *****************************************
-   * Estilos el el input editor del DataGrid.
-   * *****************************************
-   */
-  inputTexEditor: ({ theme }) => ({
-    appearance: "none",
-    boxSizing: "border-box",
-    inlineSize: "100%",
-    blockSize: "100%",
-    paddingBlock: theme.vars.size.baseSpacings.sp0,
-    verticalAlign: "top",
-    textAlign: "right",
-    fontFamily: "inherit",
-    "&:focus": {
-      outline: "none"
-    },
-    "&::placeholder": {
-      opacity: "1"
-    }
-  }),
-  /**
-   * ****************************************
-   * Estilos para los componetes Table
-   * ****************************************
-   */
-  /**
-   * Estilos para el contenedor principal
-   * del componente Table.
-   */
-  tableContaniner: ({ theme }) => ({
-    display: "flex",
-    flexDirection: "column",
-    position: "relative",
-    flexGrow: 1,
-    overflow: "hidden",
-    padding: `${theme.vars.size.baseSpacings.sp0} ${theme.vars.size.baseSpacings.sp1}`,
-    borderRadius: theme.vars.size.baseSpacings.sp1,
-    border: "none",
-    boxshadow: theme.customShadows?.z2,
-    background: theme.vars.palette.background.default,
-    ["@container main (max-width: 600px)"]: {
-      top: theme.vars.size.baseSpacings.sp11
-    }
-  }),
-  /**
-   * Estilos para el contenedor del dataGrid
-   */
-  tableWrapperDataGrid: ({ theme }) => ({
-    position: "relative",
-    height: "100%",
-    overflow: "hidden",
-    borderRadius: `${theme.vars.size.baseSpacings.sp1} ${theme.vars.size.baseSpacings.sp0}`,
-    "& .rdg ": {
-      border: "none",
-      background: theme.vars.palette.background.default,
-      gridColumnGap: theme.vars.size.baseSpacings.sp0,
-      gridRowGap: theme.vars.size.baseSpacings.sp0,
-      userSelect: "initial",
-      height: "100%",
-      contentVisibility: "unset",
-      overflow: "auto",
-      padding: theme.vars.size.baseSpacings.sp0,
-      "--rdg-grid-inline-size": theme.vars.size.baseSpacings.sp0,
-      "--rdg-header-background-color": theme.vars.palette.primary.opacity,
-      "--rdg-row-selected-background-color": theme.vars.palette.primary.opacity,
-      "--rdg-row-hover-background-color": theme.vars.palette.primary.opacity,
-      "--rdg-background-color": theme.vars.palette.background.default,
-      "--rdg-selection-color": theme.vars.palette.primary.focusVisible,
-      "--row-selected-hover-background-color": theme.vars.palette.primary.toneOpacity,
-      "--rdg-checkbox-color": theme.vars.palette.primary.enabled,
-      "--rdg-checkbox-focus-color": alpha(
-        theme.colorSchemes.finalTheme.palette.primary.enabled,
-        theme.colorSchemes.finalTheme.palette.action.selectedOpacity
-      ),
-      "--rdg-border-color": "none",
-      "&:last-child .rdg-cell": {
-        borderTop: "0.5px solid",
-        borderBottom: theme.vars.size.borderStroke.container,
-        borderLeft: "0.5px solid",
-        //Se deja el valor directamente porque no está tokenizado
-        borderRight: "0.5px solid",
-        //Se deja el valor directamente porque no está tokenizado
-        borderColor: theme.vars.palette?.border.disabled
-      }
-    },
-    '& [role="columnheader"]': {
-      justifyContent: "center",
-      alignItems: "center"
-    },
-    "& .rdg-row": {
-      '&[aria-selected="false"] .rdg-cell': {
-        backgroundColor: theme.vars.palette.background.default,
-        borderLeft: "0.5px solid",
-        borderColor: theme.vars.palette?.border.disabled
-      },
-      "&:nth-of-type(odd)": {
-        "& .rdg-cell": {
-          backgroundColor: theme.vars.palette.background.default
-        }
-      },
-      '&[aria-selected="true"] .rdg-cell': {
-        backgroundColor: theme.vars.palette.primary?.toneOpacity
-      },
-      "&:hover": {
-        "& .rdg-cell": {
-          backgroundColor: `${theme.vars.palette.default.enabled} !important`,
-          transition: "background-color 0.1s linear"
-        }
-      },
-      backgroundColor: "transparent"
-    },
-    "& .rdg-cell": {
-      transition: "background-color 0.1s linear",
-      borderBottom: `${theme.vars.size.baseSpacings.sp0} solid transparent`,
-      borderRight: `0.5px solid transparent`,
-      //Se deja el valor directamente porque no está tokenizado
-      borderColor: theme.vars.palette.background.neutral,
-      color: theme.vars.palette.text.secondary,
-      display: "inline",
-      justifyContent: "center",
-      alignItems: "center",
-      textOverflow: "inline",
-      gridTemplateColumns: "auto",
-      "& .rdg-text-editor": {
-        textAlign: "inherit",
-        color: theme.vars.palette.text.secondary,
-        padding: `${theme.vars.size.baseSpacings.sp0} ${theme.vars.size.baseSpacings.sp2}`,
-        border: theme.vars.size.baseSpacings.sp0,
-        borderTop: "0.5px solid",
-        //Se deja el valor directamente porque no está tokenizado
-        borderBottom: theme.vars.size.borderStroke.container,
-        borderLeft: "0.5px solid",
-        //Se deja el valor directamente porque no está tokenizado
-        borderRight: "0.5px solid",
-        //Se deja el valor directamente porque no está tokenizado
-        borderColor: `${theme.vars.palette?.border.disabled} !important`,
-        ...theme.colorSchemes.finalTheme.typography.body
-      },
-      "&.rdg-cell-frozen": {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        boxShadow: "unset"
-      },
-      "&:after": {
-        content: `""`,
-        borderRight: `${theme.vars.size.baseSpacings.sp0} solid ${theme.vars.palette.divider}`,
-        position: "absolute",
-        right: theme.vars.size.baseSpacings.sp0,
-        // Por desajuste en chrome en el espaciado
-        height: "100%"
-      },
-      "& .m4l_icon": {
-        height: "100%"
-      }
-    },
-    '& .rdg-cell[role="gridcell"]': {
-      ...theme.colorSchemes.finalTheme.typography.body,
-      lineHeight: "var(--rdg-row-height)!important"
-    },
-    '& .rdg-cell[role="columnheader"] .rdg-header-sort-name': {
-      ...theme.colorSchemes.finalTheme.typography.bodyDens,
-      //ajuste de contenido filtro del DataGrid
-      height: theme.vars.size.baseSpacings.sp7,
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center"
-    },
-    // Esta condicion para el flujo de cabecera cuando no tiene utilidad sort
-    '& .rdg-cell[role="columnheader"] [draggable="true"]': {
-      fontWeight: 600
-      //Se utiliza directamente el valor porque no está tokenizado
-    },
-    "& [aria-selected=true]": {
-      backgroundColor: theme.vars.palette.primary?.toneOpacity,
-      color: theme.vars.palette.text.primary,
-      //cambia el color del contorno de cada celda selecionada
-      outline: theme.vars.size.borderStroke.container,
-      outlineOffset: "-1px",
-      outlineColor: theme.vars.palette.primary.focusVisible
-    },
-    // Alineaciones
-    "& .rdg-cell.rdg-cell-align-left": {
-      textAlign: "start",
-      display: "inline",
-      justifyContent: "center",
-      alignItems: "center"
-    },
-    "& .rdg-cell.rdg-cell-align-center": {
-      textAlign: "center",
-      display: "grid",
-      alignContent: "center"
-    },
-    "& .rdg-cell.rdg-cell-align-right": {
-      textAlign: "right"
-    },
-    // Estilado de la ultima celda congelada
-    "& .rdg-row .rdg-cell-frozen-last:after": {
-      borderRight: `0px solid transparent`
-    },
-    // Estilado de la ultima celda (Quitar la linea divisora derecha)
-    "& .rdg-row :last-child:after": {
-      borderRight: `0px solid`,
-      borderColor: theme.vars.palette.background.surface
-    },
-    "& .rdg-header-row": {
-      backgroundColor: theme.vars.palette.primary.toneOpacity
-    },
-    // Estilado de celdas de la cabecera
-    "& .rdg-header-row .rdg-cell": {
-      fontFamily: theme.typography.body,
-      fontWeight: theme.typography.body,
-      fontSize: theme.typography.body,
-      color: theme.vars.palette.text.primary,
-      borderRight: "0.5px solid !important",
-      boxShadow: "none",
-      gridTemplateColumns: "auto",
-      borderBottom: "0.5px solid !important",
-      borderColor: `${theme.vars.palette?.border.disabled} !important`,
-      placeContent: "center",
-      '& [draggable="true"]': {
-        fontSize: theme.typography.body
-      },
-      // Ultima celda de la cebecera frozen
-      "&.rdg-cell-frozen-last": {
-        borderColor: theme.vars.palette.background.default,
-        boxShadow: "var(--rdg-frozen-cell-box-shadow)"
-      },
-      "& .rdg-header-sort-cell": {
-        "& .rdg-header-sort-name + span": {
-          position: "absolute",
-          margin: "auto",
-          right: "5px",
-          //Este valor no está tokenizado
-          "& .rdg-sort-arrow": {
-            width: theme.vars.size.baseSpacings.sp2
-          }
-        }
-      },
-      // Modificar el tamaño de la flecha
-      "& .rdg-sort-arrow": {}
-    },
-    // Estilado de la ultima celda Header
-    "& .rdg-header-row :last-child.rdg-cell": {
-      borderTopRightRadius: theme.vars.size.baseSpacings.sp0,
-      "&:after": {
-        borderRight: `${theme.vars.size.baseSpacings.sp0} solid transparent`
-      }
-    },
-    // filter
-    "& .filter_cell_div": {
-      paddingLeft: theme.vars.size.baseSpacings.sp2,
-      paddingRight: theme.vars.size.baseSpacings.sp2
-    },
-    //
-    "& .rdg-header-sort-cell": {
-      width: "100%",
-      flexGrow: "1",
-      alignItems: "center",
-      color: theme.vars.palette.text.primary
-    }
-  }),
-  /**
-   * Estilos para el header del componente
-   */
-  draggableHeaderRoot: () => ({
-    cursor: "move",
-    display: "flex",
-    flexDirection: "column",
-    lineHeight: "1",
-    height: "100%",
-    justifyContent: "center",
-    textAlign: "center"
-  }),
-  /**
-   * Estilos para el contenedor del input de header
-   */
-  draggableWrapperInputBase: () => ({
-    borderTop: "1px solid var(--rdg-border-color)",
-    width: "100%",
-    display: "flex",
-    alignItems: "center",
-    height: `${filterHeight}px`
-  }),
-  /**
-   * Estilos de los inputs del header para el filtro
-   */
-  headerInputBase: ({ theme }) => ({
-    width: "100%",
-    paddingBottom: theme.vars.size.baseSpacings["sp0-5"]
-  }),
-  /**
-   * Estilos para el contenedor del skeleton de los formatter
-   */
-  wrapperSkeleton: () => ({
-    display: "flex",
-    width: "100%",
-    height: "100%",
-    alignItems: "center"
-  }),
-  /**
-   * Estilos para el contenedor del cuerpo del modal de configuración
-   */
-  contentModalSetting: () => ({
-    display: "flex",
-    flexDirection: "column",
-    height: "100%"
-  })
-};
-export {
-  dataGridStyles as d
-};

package/components/DataGrid/subcomponents/Actions/index.d.ts

@@ -1,5 +0,0 @@
-import { InternalActionsProps } from './types';
-/**
- * Componente que renderiza las acciones del DataGrid
- */
-export declare function Actions(props: InternalActionsProps): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/subcomponents/Actions/index.js

@@ -1,48 +0,0 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { F as Filter } from "./subcomponents/Filter/index.js";
-import { S as Settings } from "./subcomponents/Settings/index.js";
-import { R as RowsCount } from "./subcomponents/RowsCount/index.js";
-import { D as Density } from "./subcomponents/Density/index.js";
-import { u as useDataGrid } from "../../hooks/useDataGrid.js";
-import { useIsMobile } from "@m4l/graphics";
-import { M as MobileMenuActions } from "./subcomponents/MobileMenuActions/index.js";
-import { A as ActionsRootStyled, a as ActionsConfigContainerStyled } from "../../slots/DataGridSlot.js";
-import { P as Pager } from "../../../Pager/Pager.js";
-function Actions(props) {
-  const isMobile = useIsMobile();
-  const { rowHeights } = useDataGrid();
-  const {
-    withRowsCount = true,
-    withPager = true,
-    pagerOptions,
-    withSettings = true,
-    settingsProps,
-    withLocalFilters,
-    leftActions: LeftActions,
-    rightActions: RightActions
-  } = props;
-  return /* @__PURE__ */ jsxs(ActionsRootStyled, { children: [
-    withRowsCount && !withPager && !isMobile && /* @__PURE__ */ jsx(RowsCount, {}),
-    withPager && pagerOptions && /* @__PURE__ */ jsx(
-      Pager,
-      {
-        ...pagerOptions,
-        totalRecords: pagerOptions.totalRecords
-      }
-    ),
-    isMobile ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      LeftActions,
-      /* @__PURE__ */ jsx(MobileMenuActions, {}),
-      RightActions
-    ] }) : /* @__PURE__ */ jsxs(ActionsConfigContainerStyled, { children: [
-      LeftActions,
-      typeof rowHeights !== "number" && /* @__PURE__ */ jsx(Density, {}),
-      withLocalFilters && /* @__PURE__ */ jsx(Filter, {}),
-      withSettings && /* @__PURE__ */ jsx(Settings, { ...settingsProps }),
-      RightActions
-    ] })
-  ] });
-}
-export {
-  Actions as A
-};

package/components/DataGrid/subcomponents/Actions/subcomponents/hooks/useModalSettings/index.d.ts

@@ -1,6 +0,0 @@
-/**
- * Hook que renderiza el modal de configuración de las columnas
- * de la tabla
- */
-declare const useModalSettings: () => () => void;
-export default useModalSettings;

package/components/DataGrid/subcomponents/Actions/types.d.ts

@@ -1,13 +0,0 @@
-import { PagerProps } from '../../../Pager/types';
-import { SettingsProps } from './subcomponents/types';
-export interface ActionsProps {
-    withSettings?: boolean;
-    settingsProps?: SettingsProps;
-    withRowsCount?: boolean;
-    withPager?: boolean;
-    pagerOptions?: PagerProps;
-    withLocalFilters?: boolean;
-    leftActions?: React.ReactNode;
-    rightActions?: React.ReactNode;
-}
-export type InternalActionsProps = ActionsProps;

package/components/ScrollBar/slots/ScrollBarEnum.d.ts

@@ -1,4 +0,0 @@
-export declare enum ScrollBarSlots {
-    root = "root",
-    scrollBar = "scrollBar"
-}

package/components/ScrollBar/slots/ScrollBarEnum.js

@@ -1,8 +0,0 @@
-var ScrollBarSlots = /* @__PURE__ */ ((ScrollBarSlots2) => {
-  ScrollBarSlots2["root"] = "root";
-  ScrollBarSlots2["scrollBar"] = "scrollBar";
-  return ScrollBarSlots2;
-})(ScrollBarSlots || {});
-export {
-  ScrollBarSlots as S
-};

package/components/ScrollBar/slots/index.d.ts

@@ -1,2 +0,0 @@
-export * from './ScrollBarSlots';
-export * from './ScrollBarEnum';

package/storybook/components/extended/scrollBar/ScrollBar.stories.d.ts

@@ -1,7 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { ScrollBar } from '../../../../src/components/ScrollBar/ScrollBar';
-declare const meta: Meta<typeof ScrollBar>;
-export default meta;
-type Story = StoryObj<typeof ScrollBar>;
-export declare const ScrollBarWithScroll: Story;
-export declare const ScrollBarHorizontal: Story;

package/storybook/components/extended/scrollBar/ScrollBarDecorator.d.ts

@@ -1,11 +0,0 @@
-import { StoryFn } from '@storybook/react';
-/**
- * Decorador para el componente ScrollBar con scroll vertical.
- */
-export declare const ScrollBarWithScrollDecorator: (Story: StoryFn) => import("react/jsx-runtime").JSX.Element;
-/**
- * Decorador para el componente ScrollBar con scroll horizontal.
- */
-export declare const ScrollBarHorizontalDecorator: (Story: StoryFn) => import("react/jsx-runtime").JSX.Element;
-export declare const ScrollBarWithScrollContent: import("react/jsx-runtime").JSX.Element;
-export declare const ScrollBarHorizontalContent: import("react/jsx-runtime").JSX.Element;