@m4l/components 9.2.57 → 9.2.58

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

@@ -0,0 +1,8 @@
+import { GridProps } from '../../../../../types';
+import { Column } from 'react-data-grid';
+/**
+ * Hook que renderiza el modal de configuración de las columnas
+ * de la tabla
+ */
+declare const useModalSettings: (size: GridProps<unknown, unknown>["size"], columns: readonly Column<any, any>[]) => () => void;
+export default useModalSettings;

package/components/DataGrid/subcomponents/{Actions → HeaderActions}/subcomponents/hooks/useModalSettings/index.js

@@ -5,15 +5,15 @@ import { useRef, useCallback } from "react";
 import { u as useDataGrid } from "../../../../../hooks/useDataGrid.js";
 import { u as useModal } from "../../../../../../../hooks/useModal/index.js";
 import { C as ColumnsConfig } from "../../Settings/subcomponents/ColumnsConfig/index.js";
-import { h as ContentModalSettingStyled, D as DataGridRootStyled, i as TableContainerStyled, T as TableWrapperDataGridStyled } from "../../../../../slots/DataGridSlot.js";
+import { k as ContentModalSettingStyled, D as DataGridRootStyled } from "../../../../../slots/DataGridSlot.js";
 import { p as pathIcons } from "../../../../../icons.js";
 import { A as ActionsContainer } from "../../../../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
 import { W as WindowBase } from "../../../../../../WindowBase/WindowBase.js";
 import { A as ActionCancel } from "../../../../../../CommonActions/components/ActionCancel/ActionCancel.js";
 import { A as ActionIntro } from "../../../../../../CommonActions/components/ActionIntro/ActionIntro.js";
-const useModalSettings = (columns) => {
+const useModalSettings = (size, columns) => {
   const { openModal, closeModal } = useModal();
-  const { columnsConfig, onChangeColumnsConfig, currentRowHeight } = useDataGrid();
+  const { columnsConfig, onChangeColumnsConfig, currentRowHeight, classes } = useDataGrid();
   const { getLabel } = useModuleDictionary();
   const { host_static_assets, environment_assets } = useEnvironment();
   const isMobile = useIsMobile();
@@ -40,8 +40,11 @@ const useModalSettings = (columns) => {
           title: getLabel("data_grid.settings_title"),
           iconUrl: `${host_static_assets}/${environment_assets}/${pathIcons.configuration}`,
           onClose: closeModal,
-          children: /* @__PURE__ */ jsxs(ContentModalSettingStyled, { children: [
-            /* @__PURE__ */ jsx(DataGridRootStyled, { children: /* @__PURE__ */ jsx(TableContainerStyled, { children: /* @__PURE__ */ jsx(TableWrapperDataGridStyled, { children: /* @__PURE__ */ jsx(
+          className: "settings-modal",
+          variant: "outlined",
+          type: "modal",
+          children: /* @__PURE__ */ jsxs(ContentModalSettingStyled, { classes: classes?.contentModalSetting, children: [
+            /* @__PURE__ */ jsx(DataGridRootStyled, { children: /* @__PURE__ */ jsx(
               ColumnsConfig,
               {
                 ref,
@@ -49,9 +52,11 @@ const useModalSettings = (columns) => {
                 columnsConfig,
                 onChangeColumnsConfig: handleColumnsSetting,
                 onCloseSettings,
+                classes,
+                size,
                 columns
               }
-            ) }) }) }),
+            ) }),
             /* @__PURE__ */ jsxs(ActionsContainer, { children: [
               /* @__PURE__ */ jsx(ActionCancel, { onClick: closeModal }),
               /* @__PURE__ */ jsx(ActionIntro, { onClick: onClickIntro })

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

@@ -0,0 +1,5 @@
+import { ActionsProps, DataGridProps } from '../../types';
+export interface HeaderActionsProps extends Omit<ActionsProps, 'pagerOptions'> {
+    size: DataGridProps<unknown, unknown>['size'];
+    columns: DataGridProps<unknown, unknown>['columns'];
+}

package/components/DataGrid/subcomponents/Table/hooks/useSortColumnsRows.js

@@ -1,12 +1,12 @@
 import { useState, useEffect, useMemo } from "react";
 import { g as getDragHeaderRenderer } from "./getDragHeaderRenderer.js";
 import { A as ActionsColumn } from "../subcomponents/ActionsColumn.js";
-import { a as filterColumnClassName, S as SelectColumn } from "../subcomponents/SelectColumn.js";
+import { f as filterColumnClassName, S as SelectColumn } from "../subcomponents/SelectColumn.js";
 import { useModuleSkeleton, getPropertyByString } from "@m4l/core";
 import { u as useFilters } from "../../../hooks/useFilters.js";
 import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
 import { S as SkeletonFormatter } from "../subcomponents/SkeletonFormatter/index.js";
-import { a as DATAGRID_SELECT_COLUMN_KEY } from "../../../constants.js";
+import { c as DATAGRID_SELECT_COLUMN_KEY } from "../../../constants.js";
 function getComparator(columns, sortColumn) {
   const column = columns.find((d) => d.key === sortColumn);
   let typeOrder = "string";
@@ -17,7 +17,6 @@ function getComparator(columns, sortColumn) {
     return column.customSort;
   }
   switch (typeOrder) {
-    //Si el tipo de dato de la columna es un numerico, retorna una función de ordenamiento numérica
     case "number":
       return (a, b) => {
         try {
@@ -26,7 +25,6 @@ function getComparator(columns, sortColumn) {
           return -1;
         }
       };
-    //Por defecto retorna una función de ordenamiento de string
     default:
       return (a, b) => {
         try {
@@ -121,9 +119,11 @@ const useSortColumnsRows = (sourceColumns, sourceRows) => {
   const finalColumns = useMemo(() => {
     const DragAndDropHeaderRenderer = getDragHeaderRenderer(onChangeColumnsOrder);
     return columns.map((c) => {
+      const cellClass = c.align !== void 0 ? `rdg-cell-align-${c.align}` : `rdg-cell-align-${getAligByType(c.type)}`;
       const newColumn = {
         ...c,
-        cellClass: c.align !== void 0 ? `rdg-cell-align-${c.align}` : `rdg-cell-align-${getAligByType(c.type)}`
+        cellClass,
+        headerCellClass: cellClass
       };
       if (newColumn.key === DATAGRID_SELECT_COLUMN_KEY || newColumn.isDraggable !== void 0 && newColumn.isDraggable === false) {
         return newColumn;
@@ -136,7 +136,7 @@ const useSortColumnsRows = (sourceColumns, sourceRows) => {
         newColumn.withinHeaderRenderer = newColumn.headerRenderer;
       }
       if ((newColumn?.withFilter === void 0 || newColumn.withFilter === true) && activeFilters) {
-        newColumn.headerCellClass = filterColumnClassName;
+        newColumn.headerCellClass = `${newColumn.headerCellClass} ${filterColumnClassName}`.trim();
       }
       newColumn.headerRenderer = DragAndDropHeaderRenderer;
       return newColumn;

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

@@ -4,11 +4,11 @@ import DataGrid from "react-data-grid";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { C as CheckboxFormatter } from "./subcomponents/CheckboxFormatter.js";
-import { f as filterHeight } from "./subcomponents/SelectColumn.js";
+import { a as filterHeight } from "./subcomponents/SelectColumn.js";
 import { u as useSortColumnsRows } from "./hooks/useSortColumnsRows.js";
 import { u as useFilters } from "../../hooks/useFilters.js";
 import { u as useDataGrid } from "../../hooks/useDataGrid.js";
-import { i as TableContainerStyled, T as TableWrapperDataGridStyled } from "../../slots/DataGridSlot.js";
+import { l as TableContainerStyled, T as TableWrapperDataGridStyled } from "../../slots/DataGridSlot.js";
 function Table(props) {
   const { columns, rows, onRowsChange, rowKeyGetter, selectedRows, onSelectedRowsChange } = props;
   const { finalColumns, sortColumns, setSortColumns, finalRows } = useSortColumnsRows(
@@ -16,7 +16,7 @@ function Table(props) {
     rows
   );
   const { activeFilters } = useFilters();
-  const { onChangeColumnWidth, setRowsCount, currentRowHeight, currentRowHeaderHeight } = useDataGrid();
+  const { onChangeColumnWidth, setRowsCount, currentRowHeight, currentRowHeaderHeight, size } = useDataGrid();
   const ref_data_grid = useRef(null);
   const onRowClick = (row) => {
     if (selectedRows && onSelectedRowsChange) {
@@ -50,7 +50,7 @@ function Table(props) {
   const onChangeSort = (newSortColumns) => {
     setSortColumns(newSortColumns);
   };
-  return /* @__PURE__ */ jsx(TableContainerStyled, { id: "WrapperTable", children: /* @__PURE__ */ jsx(TableWrapperDataGridStyled, { children: /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, context: window, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(TableContainerStyled, { id: "WrapperTable", children: /* @__PURE__ */ jsx(TableWrapperDataGridStyled, { ownerState: { size }, children: /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, context: window, children: /* @__PURE__ */ jsx(
     DataGrid,
     {
       className: "rdg-light",

package/components/DataGrid/subcomponents/Table/subcomponents/ActionsColumn.js

@@ -1,7 +1,7 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
 import { useTheme } from "@mui/material";
-import { b as DATAGRID_SEMANTIC_WIDTHS, c as DATAGRID_ACTIONS_COLUMN_KEY } from "../../../constants.js";
+import { d as DATAGRID_SEMANTIC_WIDTHS, e as DATAGRID_ACTIONS_COLUMN_KEY } from "../../../constants.js";
 import { M as MenuActions } from "../../../../MenuActions/MenuActions.js";
 function ActionsFormatter(props) {
   const { rowActionsGetter } = useDataGrid();

package/components/DataGrid/subcomponents/Table/subcomponents/CustomIcons.js

@@ -1,10 +1,19 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { SvgIcon } from "@mui/material";
 function CheckboxIcon(props) {
-  return /* @__PURE__ */ jsx(SvgIcon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M17 3a4 4 0 014 4v10a4 4 0 01-4 4H7a4 4 0 01-4-4V7a4 4 0 014-4h10zm0 2H7a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2z" }) });
+  return /* @__PURE__ */ jsx(SvgIcon, { ...props, viewBox: "0 0 16 17", className: "checkbox-unChecked", children: /* @__PURE__ */ jsxs("svg", { width: "16", height: "17", viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx("g", { "clip-path": "url(#clip0_13395_49048)", children: /* @__PURE__ */ jsx("path", { d: "M13.0156 2.5H3.01562C2.75041 2.5 2.49605 2.60536 2.30852 2.79289C2.12098 2.98043 2.01563 3.23478 2.01562 3.5V13.5C2.01563 13.7652 2.12098 14.0196 2.30852 14.2071C2.49605 14.3946 2.75041 14.5 3.01562 14.5H13.0156C13.2808 14.5 13.5352 14.3946 13.7227 14.2071C13.9103 14.0196 14.0156 13.7652 14.0156 13.5V3.5C14.0156 3.23478 13.9103 2.98043 13.7227 2.79289C13.5352 2.60536 13.2808 2.5 13.0156 2.5ZM3.01562 13.5V3.5H13.0156V13.5H3.01562Z", fill: "#323B3B" }) }),
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_13395_49048", children: /* @__PURE__ */ jsx("rect", { width: "16", height: "16", fill: "white", transform: "translate(0 0.5)" }) }) })
+  ] }) });
 }
 function CheckboxCheckedIcon(props) {
-  return /* @__PURE__ */ jsx(SvgIcon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M17 3a4 4 0 014 4v10a4 4 0 01-4 4H7a4 4 0 01-4-4V7a4 4 0 014-4h10zm-1.372 4.972a1.006 1.006 0 00-.928.388l-3.78 5-1.63-2.08a1.001 1.001 0 00-1.58 1.23l2.44 3.11a1 1 0 001.58-.01l4.57-6v-.03a1.006 1.006 0 00-.672-1.608z" }) });
+  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, viewBox: "0 0 16 17", className: "checkbox-checked", children: [
+    /* @__PURE__ */ jsxs("g", { "clip-path": "url(#clip0_13395_49057)", children: [
+      /* @__PURE__ */ jsx("path", { d: "M13.4323 2H2.59896C2.31164 2 2.03609 2.11414 1.83293 2.3173C1.62976 2.52047 1.51563 2.79602 1.51562 3.08333V13.9167C1.51563 14.204 1.62976 14.4795 1.83293 14.6827C2.03609 14.8859 2.31164 15 2.59896 15H13.4323C13.7196 15 13.9952 14.8859 14.1983 14.6827C14.4015 14.4795 14.5156 14.204 14.5156 13.9167V3.08333C14.5156 2.79602 14.4015 2.52047 14.1983 2.3173C13.9952 2.11414 13.7196 2 13.4323 2Z", fill: "#323B3B" }),
+      /* @__PURE__ */ jsx("path", { d: "M6.92119 11.6245L4.10001 8.8274L4.99759 7.95696L6.92119 9.84467L11.1014 5.70001L11.9996 6.58993L6.92119 11.6245Z", fill: "#F3F5F7" })
+    ] }),
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_13395_49057", children: /* @__PURE__ */ jsx("rect", { width: "16", height: "16", fill: "white", transform: "translate(0 0.5)" }) }) })
+  ] });
 }
 function CheckboxIndeterminateIcon(props) {
   return /* @__PURE__ */ jsx(SvgIcon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M17 3a4 4 0 014 4v10a4 4 0 01-4 4H7a4 4 0 01-4-4V7a4 4 0 014-4h10zm-1.75 8h-6.5a.75.75 0 00-.75.75v.5c0 .414.336.75.75.75h6.5a.75.75 0 00.75-.75v-.5a.75.75 0 00-.75-.75z" }) });

package/components/DataGrid/subcomponents/Table/subcomponents/DraggableHeaderRenderer.js

@@ -1,15 +1,19 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-import { useModuleDictionary } from "@m4l/core";
+import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import { useDrag, useDrop } from "react-dnd";
 import { HeaderRenderer } from "react-data-grid";
 import { u as useFocusRef } from "../hooks/useFocusRef.js";
 import { u as useFilters } from "../../../hooks/useFilters.js";
-import { j as DraggableHeaderRootStyled, k as DraggableWrapperInputBaseStyled, H as HeaderInputBaseStyled } from "../../../slots/DataGridSlot.js";
+import { m as DraggableHeaderRootStyled, n as DraggableWrapperInputBaseStyled, I as IconSearchStyled, H as HeaderInputBaseStyled } from "../../../slots/DataGridSlot.js";
+import { p as pathIcons } from "../../../icons.js";
+import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
 function DraggableHeaderRenderer(props) {
   const { onColumnsReorder, column, isCellSelected, ...others } = props;
   const { ref, tabIndex } = useFocusRef(isCellSelected);
   const { getLabel } = useModuleDictionary();
+  const { size, classes } = useDataGrid();
+  const { host_static_assets, environment_assets } = useEnvironment();
   const { activeFilters, filters, onChangeFilter } = useFilters();
   const [filter, setFilter] = useState(filters?.get(column.key) || "");
   const [{ isDragging }, drag] = useDrag({
@@ -52,6 +56,7 @@ function DraggableHeaderRenderer(props) {
   return /* @__PURE__ */ jsxs(
     DraggableHeaderRootStyled,
     {
+      className: classes?.draggableHeaderRoot,
       ref: (newRef) => {
         drag(newRef);
         drop(newRef);
@@ -62,17 +67,27 @@ function DraggableHeaderRenderer(props) {
       },
       children: [
         /* @__PURE__ */ jsx(HeaderRenderer, { column: newColumn, isCellSelected, ...others }),
-        activeFilters && (column?.withFilter === void 0 || column.withFilter === true) && /* @__PURE__ */ jsx(DraggableWrapperInputBaseStyled, { children: /* @__PURE__ */ jsx(
-          HeaderInputBaseStyled,
-          {
-            inputRef: ref,
-            placeholder: getLabel("data_grid.filter_holder"),
-            tabIndex,
-            type: "text",
-            onChange: handleChange,
-            value: filter
-          }
-        ) })
+        activeFilters && (column?.withFilter === void 0 || column.withFilter === true) && /* @__PURE__ */ jsxs(DraggableWrapperInputBaseStyled, { children: [
+          /* @__PURE__ */ jsx(
+            IconSearchStyled,
+            {
+              src: `${host_static_assets}/${environment_assets}/${pathIcons.search}`,
+              color: "text.secondary",
+              size
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            HeaderInputBaseStyled,
+            {
+              inputRef: ref,
+              placeholder: getLabel("data_grid.filter_holder"),
+              tabIndex,
+              type: "text",
+              onChange: handleChange,
+              value: filter
+            }
+          )
+        ] })
       ]
     }
   );

package/components/DataGrid/subcomponents/Table/subcomponents/SelectColumn.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useRowSelection, SelectCellFormatter } from "react-data-grid";
 import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
-import { a as DATAGRID_SELECT_COLUMN_KEY } from "../../../constants.js";
+import { c as DATAGRID_SELECT_COLUMN_KEY } from "../../../constants.js";
 const filterColumnClassName = "filter-cell";
 const filterHeight = 35;
 function SelectGroupFormatter(props) {
@@ -74,6 +74,6 @@ const SelectColumn = {
 };
 export {
   SelectColumn as S,
-  filterColumnClassName as a,
-  filterHeight as f
+  filterHeight as a,
+  filterColumnClassName as f
 };

package/components/DataGrid/subcomponents/Table/subcomponents/SkeletonFormatter/index.js

@@ -1,8 +1,10 @@
 import { jsx } from "react/jsx-runtime";
-import { Skeleton } from "@mui/material";
+import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
+import { S as Skeleton } from "../../../../../mui_extended/Skeleton/Skeleton.js";
 import { W as WrapperSkeletonStyled } from "../../../../slots/DataGridSlot.js";
 function SkeletonFormatter() {
-  return /* @__PURE__ */ jsx(WrapperSkeletonStyled, { children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "100%", height: "12px" }) });
+  const { size } = useDataGrid();
+  return /* @__PURE__ */ jsx(WrapperSkeletonStyled, { ownerState: { size }, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "100%" }) });
 }
 export {
   SkeletonFormatter as S

package/components/DataGrid/subcomponents/editors/TextEditor/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { I as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
+import { o as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
 function autoFocusAndSelect(input) {
   input?.focus();
   input?.select();

package/components/DataGrid/types.d.ts

@@ -2,11 +2,13 @@ import { Maybe } from '@m4l/core';
 import { Theme } from '@mui/material/styles';
 import { Column, RowsChangeData, FormatterProps } from 'react-data-grid';
 import { MenuAction } from '../MenuActions/types';
-import { ActionsProps } from './subcomponents/Actions/types';
-import { ActionsSlots, ColumnsConfigSlots, DataGridSlots, RowsCountSlots, TableSlots, TextEditorSlots } from './slots/DataGridEnum';
+import { ActionsSlots, ColumnsConfigSlots, ControlNavigateSlots, DataGridSlots, RowsCountSlots, TableSlots, TextEditorSlots } from './slots/DataGridEnum';
 import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { DATAGRID_PREFIX_NAME } from './constants';
 import { IGridConfig } from './contexts/DataGridContext/types';
+import { Sizes } from '@m4l/styles';
+import { PagerProps } from '../Pager';
+import { SettingsProps } from './subcomponents/HeaderActions/subcomponents/Settings/types';
 export type GridFormatterPropss<T, SR> = FormatterProps<T, SR>;
 export type { ColumnUncertaintyFormatter, ColumnPointsFormatter, ColumnNestedValueFormatter, } from './formatters';
 export declare type ColumnType = 'string' | 'date' | 'number' | 'boolean' | 'custom';
@@ -83,6 +85,11 @@ export interface GridProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> {
      * las configuraciones de las columnas.
      */
     onChangeUserColumns?: OnChangeUserColumns;
+    /**
+     * Tamaño del componente
+     * @default 'medium'
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
 }
 export declare const DATAGRID_TEST_ID = "m4ldatagrid";
 export declare const PREFIX_TEST_ATTRIBUTE = "data-testid";
@@ -93,6 +100,16 @@ export declare interface DataGridProps<TRow, TSummaryRow, TKey extends RowKey =
     customHeader?: React.ReactNode;
     visibleCustomHeader?: boolean;
 }
+export interface ActionsProps {
+    withSettings?: boolean;
+    settingsProps?: SettingsProps;
+    withRowsCount?: boolean;
+    withPager?: boolean;
+    pagerOptions?: PagerProps;
+    withLocalFilters?: boolean;
+    leftActions?: React.ReactNode;
+    rightActions?: React.ReactNode;
+}
 export type DataGridOwnerState<TRow, TSummaryRow, TKey extends RowKey = RowKey> = Pick<DataGridProps<TRow, TSummaryRow, TKey>, 'visibleCustomHeader'>;
-export type DataGridSlotsType = DataGridSlots | TextEditorSlots | ActionsSlots | RowsCountSlots | ColumnsConfigSlots | TableSlots;
+export type DataGridSlotsType = DataGridSlots | TextEditorSlots | ActionsSlots | RowsCountSlots | ColumnsConfigSlots | TableSlots | ControlNavigateSlots;
 export type DataGridStyles = OverridesStyleRules<DataGridSlotsType, typeof DATAGRID_PREFIX_NAME, Theme>;

package/components/DragResizeWindowRND/DragResizeWindowRND.styles.js

@@ -5,7 +5,7 @@ const dragResizeWindowStyles = {
    * @param {Object} params - Object containing theme and ownerState properties.
    * @param {Object} params.theme - Theme object for accessing theme variables.
    * @param {Object} params.ownerState - Object holding the component's current state.
-   * @param {boolean} [params.ownerState.hidden] - Controls visibility; if true, sets the component to be hidden and disables pointer events.
+   * @param {boolean} [params.ownerState?.hidden] - Controls visibility; if true, sets the component to be hidden and disables pointer events.
    * @returns {Object} - Style object for the root container.
    */
   root: ({ theme, ownerState }) => ({

package/components/DragResizeWindowRND/slots/DragResizeWindowRNDSlots.d.ts

@@ -1,12 +1,10 @@
 import { Rnd } from 'react-rnd';
 export declare const RootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
-    ownerState: any;
+    ownerState?: any;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const IconResizeFormatterStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
-    ownerState: any;
+    ownerState?: any;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const RndStyled: import('@emotion/styled').StyledComponent<Pick<import('react-rnd').Props, keyof import('react-rnd').Props> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
-    ownerState: any;
-}, {}, {
+export declare const RndStyled: import('@emotion/styled').StyledComponent<Pick<import('react-rnd').Props, keyof import('react-rnd').Props> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, {}, {
     ref?: import('react').Ref<Rnd> | undefined;
 }>;

package/components/DynamicFilter/DynamicFilter.styles.js

@@ -22,10 +22,10 @@ const dynamicFilterStyles = {
     height: "fit-content",
     border: theme.vars.size.borderStroke.container,
     borderRadius: theme.vars.size.borderRadius.r1,
-    borderColor: ownerState.isValid ? theme.vars.palette.border?.default : theme.vars.palette.error.enabled,
+    borderColor: ownerState?.isValid ? theme.vars.palette.border?.default : theme.vars.palette.error.enabled,
     background: theme.vars.palette.background.default,
     '&:has([aria-expanded="true"])': {
-      borderColor: ownerState.isValid ? theme.vars.palette.primary.active : theme.vars.palette.error.enabled
+      borderColor: ownerState?.isValid ? theme.vars.palette.primary.active : theme.vars.palette.error.enabled
     }
   }),
   /**
@@ -48,7 +48,7 @@ const dynamicFilterStyles = {
     borderColor: theme.vars.palette.border?.default,
     ...getSizeStyles(
       theme,
-      ownerState.size || "medium",
+      ownerState?.size || "medium",
       "container",
       (size) => ({
         height: size
@@ -61,7 +61,7 @@ const dynamicFilterStyles = {
   inputFilterInput: ({ theme, ownerState }) => ({
     ...getSizeStyles(
       theme,
-      ownerState.size || "medium",
+      ownerState?.size || "medium",
       "action",
       (size) => ({
         height: size,
@@ -71,7 +71,7 @@ const dynamicFilterStyles = {
     ),
     ...getTypographyStyles(
       theme.generalSettings.isMobile,
-      ownerState.size || "medium",
+      ownerState?.size || "medium",
       "body"
     ),
     background: theme.vars.palette.background.default,
@@ -113,8 +113,6 @@ const dynamicFilterStyles = {
    * appliedFilterInnerContainer: Estilos del contenedor interno de los filtros aplicados.
    */
   appliedFilterInnerContainer: ({ theme }) => ({
-    overflow: "overlay",
-    overflowY: "hidden",
     padding: theme.vars.size.baseSpacings["sp0-5"],
     gap: theme.vars.size.baseSpacings.sp1,
     height: "fit-content",
@@ -122,7 +120,9 @@ const dynamicFilterStyles = {
     flexWrap: "nowrap",
     width: "100%",
     justifyContent: "flex-start",
-    alignItems: "center"
+    alignItems: "center",
+    overflow: "auto hidden",
+    position: "relative"
   }),
   /**
    * actions: Estilos del contenedor de los botones de acción.
@@ -138,7 +138,7 @@ const dynamicFilterStyles = {
     alignItems: "center",
     borderTopRightRadius: theme.vars.size.borderRadius.r1,
     borderBottomRightRadius: theme.vars.size.borderRadius.r1,
-    borderLeft: !ownerState.visibleRefresh && !ownerState.isDirty ? "none" : theme.vars.size.borderStroke.container,
+    borderLeft: !ownerState?.visibleRefresh && !ownerState?.isDirty ? "none" : theme.vars.size.borderStroke.container,
     borderColor: theme.vars.palette.border?.default
   }),
   actionsClearButton: {
@@ -148,10 +148,10 @@ const dynamicFilterStyles = {
    * actionsSubmitButton: Estilos del botón de acción de filtrado.
    */
   actionsSubmitButton: ({ theme, ownerState }) => ({
-    ...ownerState.isValid === false ? { border: `1px dashed ${theme.vars.palette.error.enabled}` } : {
+    ...ownerState?.isValid === false ? { border: `1px dashed ${theme.vars.palette.error.enabled}` } : {
       visibility: "visible"
     },
-    ...ownerState.isDirty ? {
+    ...ownerState?.isDirty ? {
       animation: "changeBgColor 0.9s ease infinite",
       "& .M4LIcon-icon": {
         background: `${theme.vars.palette.primary.main} !important`
@@ -223,7 +223,7 @@ const dynamicFilterStyles = {
     },
     ...getSizeStyles(
       theme,
-      ownerState.size || "medium",
+      ownerState?.size || "medium",
       "container",
       (size) => ({
         height: size
@@ -272,7 +272,7 @@ const dynamicFilterStyles = {
     marginRight: theme.vars.size.baseSpacings.sp2,
     ...getSizeStyles(
       theme,
-      ownerState.size || "medium",
+      ownerState?.size || "medium",
       "base",
       (size) => ({
         height: size,