@m4l/components 9.3.25-beta.0 → 9.3.26

package/components/formatters/TagsFormatter/subcomponents/Tag/index.js

@@ -0,0 +1 @@
+

package/components/formatters/TagsFormatter/types.d.ts

@@ -0,0 +1,47 @@
+import { Maybe } from '@m4l/core';
+import { Sizes } from '@m4l/styles';
+import { M4LOverridesStyleRules } from '../../../@types/augmentations';
+import { Theme } from '@mui/material';
+import { TAGS_FORMATTER_KEY_COMPONENT } from './constants';
+import { TagsFormatterSlots } from './slots/TagsFormatterEnum';
+/**
+ * Props de configuración de un tag
+ */
+export interface TagConfig {
+    key?: number | string;
+    label: string;
+    backgroundColor: string;
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    className?: string;
+}
+/**
+ * Props del TagFormatter
+ */
+export interface TagsFormatterProps {
+    tags: Maybe<TagConfig | TagConfig[]>;
+    className?: string;
+    dataTestId?: string;
+    size?: Extract<Sizes, 'small' | 'medium'>;
+}
+/**
+ * Props del renderTag
+ */
+export interface RenderTagProps {
+    tag: TagConfig;
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    className?: string;
+}
+/**
+ * Owner state del TagFormatter
+ */
+export interface TagFormatterOwnerState extends Pick<TagConfig, 'size'> {
+    backgroundColor?: string;
+}
+/**
+ * Tipos de slots disponibles para el TagFormatter
+ */
+export type TagsFormatterSlotsType = TagsFormatterSlots;
+/**
+ * Estilos aplicables al TagFormatter
+ */
+export type TagsFormatterStyles = M4LOverridesStyleRules<TagsFormatterSlotsType, typeof TAGS_FORMATTER_KEY_COMPONENT, Theme>;

package/components/formatters/index.d.ts

@@ -1,10 +1,11 @@
 export { BooleanFormatter } from './BooleanFormatter/BooleanFormatter';
 export * from './ChipStatusFormatter';
 export { getFormatDate, DateFormatter } from './DateFormatter/DateFormatter';
-export { UncertaintyFormatter, getUncertaintyFormat } from './UncertaintyFormatter/UncertaintyFormatter';
-export { PointsFormatter, getFormatPoints } from './PointsFormatter/PointsFormatter';
-export { getFormatConcatenated, ConcatenatedFormatter } from './ConcatenatedFormatter/ConcatenatedFormatter';
-export { useFormatPeriod, PeriodFormatter } from './PeriodFormatter/PeriodFormatter';
-export { PriceFormatter, getFormatPrice } from './PriceFormatter/PriceFormatter';
+export { UncertaintyFormatter, getUncertaintyFormat, } from './UncertaintyFormatter/UncertaintyFormatter';
+export { PointsFormatter, getFormatPoints, } from './PointsFormatter/PointsFormatter';
+export { getFormatConcatenated, ConcatenatedFormatter, } from './ConcatenatedFormatter/ConcatenatedFormatter';
+export { useFormatPeriod, PeriodFormatter, } from './PeriodFormatter/PeriodFormatter';
+export { PriceFormatter, getFormatPrice, } from './PriceFormatter/PriceFormatter';
 export * from './DistanceToNowFormatter';
 export type { UncertaintyRange } from './UncertaintyFormatter/types';
+export { TagsFormatter } from './TagsFormatter';

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

@@ -1,7 +1,8 @@
 import { styled } from "@mui/material";
 const FormProviderRoot = styled("form")(({ theme }) => ({
   ...theme.components?.M4LRHFormProvider?.styleOverrides || {},
-  width: "100%"
+  width: "100%",
+  overflow: "hidden"
 }));
 export {
   FormProviderRoot as F

package/contexts/ModalContext/index.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { createContext, useState } from "react";
+import { createContext, useState, useCallback } from "react";
 import { M as ModalDialog } from "../../components/ModalDialog/ModalDialog.js";
 const ModalContext = createContext(null);
 function ModalProvider({ children }) {
@@ -7,7 +7,7 @@ function ModalProvider({ children }) {
     open: false,
     fullScreen: false
   });
-  const openModal = (modalOpenProps) => {
+  const openModal = useCallback((modalOpenProps) => {
     setModalOptions({
       open: true,
       initialWidth: 300,
@@ -15,10 +15,10 @@ function ModalProvider({ children }) {
       ...modalOpenProps,
       isCloseable: modalOpenProps.isCloseable
     });
-  };
-  const closeModal = () => {
+  }, []);
+  const closeModal = useCallback(() => {
     setModalOptions((last) => ({ ...last, open: false }));
-  };
+  }, []);
   return /* @__PURE__ */ jsxs(
     ModalContext.Provider,
     {

package/index.js

@@ -58,6 +58,8 @@ import { C as C13 } from "./components/DataGrid/formatters/ColumnUncertaintyForm
 import { u as u11 } from "./components/DataGrid/formatters/ColumnUncertaintyFormatter/useColumnUncertainty.js";
 import { C as C14 } from "./components/DataGrid/formatters/ColumnChipStatusFormatter/formatter.js";
 import { u as u12 } from "./components/DataGrid/formatters/ColumnChipStatusFormatter/useColumnChipStatus.js";
+import { C as C15 } from "./components/DataGrid/formatters/ColumnTagsFormatter/formatter.js";
+import { u as u13 } from "./components/DataGrid/formatters/ColumnTagsFormatter/useColumnTags.js";
 import { D as D3 } from "./components/DragResizeWindowRND/DragResizeWindowRND.js";
 import { d as d2 } from "./components/DragResizeWindowRND/classes/index.js";
 import { W } from "./components/DragResizeWindowRND/constants.js";
@@ -79,7 +81,7 @@ import { R as R3 } from "./components/extended/React-Json-Viewer/ReactJsonViewer
 import { A as A14 } from "./components/mui_extended/Avatar/Avatar.js";
 import { B as B2 } from "./components/mui_extended/BoxIcon/index.js";
 import { B as B3 } from "./components/mui_extended/Breadcrumbs/index.js";
-import { C as C15 } from "./components/mui_extended/CircularProgress/CircularProgress.js";
+import { C as C16 } from "./components/mui_extended/CircularProgress/CircularProgress.js";
 import { B as B4 } from "./components/mui_extended/Badge/Badge.js";
 import { L as L3 } from "./components/mui_extended/LinearProgress/index.js";
 import { L as L4 } from "./components/mui_extended/LinkWithRoute/index.js";
@@ -89,7 +91,7 @@ import { A as A15 } from "./components/mui_extended/Accordion/Accordion.js";
 import { T as T3 } from "./components/mui_extended/Tooltip/Tooltip.js";
 import { I as I2 } from "./components/mui_extended/IconButton/IconButton.js";
 import { B as B5 } from "./components/mui_extended/Button/Button.js";
-import { C as C16 } from "./components/mui_extended/CheckBox/CheckBox.js";
+import { C as C17 } from "./components/mui_extended/CheckBox/CheckBox.js";
 import { I as I3 } from "./components/mui_extended/ImageButton/ImageButton.js";
 import { P as P2 } from "./components/mui_extended/Popover/Popover.js";
 import { S as S4 } from "./components/mui_extended/Select/Select.js";
@@ -117,13 +119,14 @@ import { B as B6 } from "./components/formatters/BooleanFormatter/BooleanFormatt
 import { D as D8, g as g12 } from "./components/formatters/DateFormatter/DateFormatter.js";
 import { U, g as g13 } from "./components/formatters/UncertaintyFormatter/UncertaintyFormatter.js";
 import { P as P3, g as g14 } from "./components/formatters/PointsFormatter/PointsFormatter.js";
-import { C as C17, g as g15 } from "./components/formatters/ConcatenatedFormatter/ConcatenatedFormatter.js";
-import { P as P4, u as u13 } from "./components/formatters/PeriodFormatter/PeriodFormatter.js";
+import { C as C18, g as g15 } from "./components/formatters/ConcatenatedFormatter/ConcatenatedFormatter.js";
+import { P as P4, u as u14 } from "./components/formatters/PeriodFormatter/PeriodFormatter.js";
 import { P as P5, g as g16 } from "./components/formatters/PriceFormatter/PriceFormatter.js";
-import { C as C18 } from "./components/formatters/ChipStatusFormatter/ChipStatusFormatter.js";
+import { T as T17 } from "./components/formatters/TagsFormatter/TagsFormatter.js";
+import { C as C19 } from "./components/formatters/ChipStatusFormatter/ChipStatusFormatter.js";
 import { g as g17 } from "./components/formatters/DistanceToNowFormatter/dictionary.js";
 import { D as D9 } from "./components/formatters/DistanceToNowFormatter/DistanceToNowFormatter.js";
-import { u as u14 } from "./components/formatters/DistanceToNowFormatter/hooks/useDistanceToNowFormatter.js";
+import { u as u15 } from "./components/formatters/DistanceToNowFormatter/hooks/useDistanceToNowFormatter.js";
 import { g as g18 } from "./components/formatters/dictionary.js";
 import { F as F2 } from "./components/FormContainer/FormContainer.js";
 import { G } from "./components/GridLayout/GridLayout.js";
@@ -177,18 +180,18 @@ import { g as g27 } from "./components/ObjectLogs/dictionary.js";
 import { O } from "./components/ObjectLogs/ObjectLogs.js";
 import { P as P7 } from "./components/PaperForm/PaperForm.js";
 import { P as P8 } from "./components/PDFViewer/PDFViewer.js";
-import { u as u15 } from "./components/popups/components/PopupsProvider/hooks/usePopupsStore.js";
+import { u as u16 } from "./components/popups/components/PopupsProvider/hooks/usePopupsStore.js";
 import { a as a10, P as P9 } from "./components/popups/components/PopupsProvider/contexts/PopupsContext/PopupsContext.js";
 import { P as P10 } from "./components/popups/components/PopupsViewer/PopupsViewer.js";
 import { P as P11 } from "./components/PrintingSystem/PrintingSystem.js";
 import { P as P12 } from "./components/PropertyValue/PropertyValue.js";
 import { S as S8 } from "./components/ScrollBar/ScrollBar.js";
 import { S as S9 } from "./components/SideBar/SideBar.js";
-import { T as T17 } from "./components/ToastContainer/ToastContainer.js";
-import { T as T18 } from "./components/ToastContainer/subcomponents/ToastMessage/ToastMessage.js";
+import { T as T18 } from "./components/ToastContainer/ToastContainer.js";
+import { T as T19 } from "./components/ToastContainer/subcomponents/ToastMessage/ToastMessage.js";
 import { W as W2 } from "./components/WindowBase/WindowBase.js";
-import { u as u16 } from "./components/WindowBase/hooks/useWindowToolsMF/index.js";
-import { u as u17, a as a11 } from "./components/WindowBase/hooks/useDynamicMFParameters/index.js";
+import { u as u17 } from "./components/WindowBase/hooks/useWindowToolsMF/index.js";
+import { u as u18, a as a11 } from "./components/WindowBase/hooks/useDynamicMFParameters/index.js";
 import { M as M6, W as W3, a as a12 } from "./components/WindowBase/contexts/WindowToolsMFContext/WindowToolsMFContext.js";
 import { c as c3 } from "./components/WindowBase/contexts/DynamicMFParmsContext/store.js";
 import { D as D10, a as a13, M as M7 } from "./components/WindowBase/contexts/DynamicMFParmsContext/DynamicMFParmsContext.js";
@@ -197,7 +200,7 @@ import { a as a14, g as g28 } from "./components/ModalDialog/dictionary.js";
 import { M as M8 } from "./components/ModalDialog/ModalDialog.js";
 import { S as S10 } from "./components/SettingsLayout/SettingsLayout.js";
 import { P as P13 } from "./components/Pager/Pager.js";
-import { u as u18 } from "./components/Stepper/hooks/useStepper/index.js";
+import { u as u19 } from "./components/Stepper/hooks/useStepper/index.js";
 import { S as S11 } from "./components/Stepper/Stepper.js";
 import { S as S12 } from "./components/Stepper/subcomponents/StepperContent/index.js";
 import { S as S13 } from "./components/Stepper/subcomponents/StepperContent/subcomponents/Step/index.js";
@@ -210,27 +213,27 @@ import { S as S19 } from "./components/Stepper/subcomponents/StepperButtons/Step
 import { S as S20 } from "./components/Stepper/subcomponents/StepperButtons/StepperSubmitButton/index.js";
 import { e as e2 } from "./components/Stepper/helpers/evaluateVisibilityStepCondition/index.js";
 import { g as g29 } from "./components/Stepper/dictionary.js";
-import { F as F3, R as R23, u as u19 } from "./components/hook-form/RHFormContext/index.js";
+import { F as F3, R as R23, u as u20 } from "./components/hook-form/RHFormContext/index.js";
 import { g as g30 } from "./components/hook-form/RHFormContext/dictionary.js";
-import { u as u20 } from "./contexts/AppearanceComponentContext/useAppearanceComponentStore.js";
+import { u as u21 } from "./contexts/AppearanceComponentContext/useAppearanceComponentStore.js";
 import { A as A16 } from "./contexts/AppearanceComponentContext/AppearanceComponentContext.js";
 import { a as a15, M as M9 } from "./contexts/ModalContext/index.js";
-import { u as u21 } from "./hooks/useFormAddEdit/index.js";
-import { u as u22 } from "./hooks/useModal/index.js";
-import { u as u23 } from "./hooks/useTab/index.js";
+import { u as u22 } from "./hooks/useFormAddEdit/index.js";
+import { u as u23 } from "./hooks/useModal/index.js";
+import { u as u24 } from "./hooks/useTab/index.js";
 import { g as g31 } from "./hooks/useFormAddEdit/dictionary.js";
-import { u as u24 } from "./hooks/useFormFocus/index.js";
-import { u as u25 } from "./hooks/useInterval/index.js";
-import { u as u26 } from "./hooks/useComponentSize/useComponentSize.js";
-import { u as u27 } from "./hooks/useFormReadyForUpdate/index.js";
-import { u as u28 } from "./hooks/useStateRef/index.js";
+import { u as u25 } from "./hooks/useFormFocus/index.js";
+import { u as u26 } from "./hooks/useInterval/index.js";
+import { u as u27 } from "./hooks/useComponentSize/useComponentSize.js";
+import { u as u28 } from "./hooks/useFormReadyForUpdate/index.js";
+import { u as u29 } from "./hooks/useStateRef/index.js";
 import { S as S21 } from "./hooks/useSvgColor/constants.js";
-import { u as u29 } from "./hooks/useSvgColor/useSvgColor.js";
-import { u as u30 } from "./hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js";
-import { u as u31 } from "./hooks/useDataGridPersistence/useDataGridPersistence.js";
-import { u as u32 } from "./hooks/usePopoverContainer/usePopoverContainer.js";
-import { u as u33 } from "./hooks/useIsVisible/useIsVisible.js";
-import { u as u34 } from "./hooks/useSizeContainer/index.js";
+import { u as u30 } from "./hooks/useSvgColor/useSvgColor.js";
+import { u as u31 } from "./hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js";
+import { u as u32 } from "./hooks/useDataGridPersistence/useDataGridPersistence.js";
+import { u as u33 } from "./hooks/usePopoverContainer/usePopoverContainer.js";
+import { u as u34 } from "./hooks/useIsVisible/useIsVisible.js";
+import { u as u35 } from "./hooks/useSizeContainer/index.js";
 import { c as c4 } from "./utils/capitalizeFirstLetter.js";
 import { i as i2 } from "./utils/isValidDate.js";
 import { g as g32 } from "./utils/getComponentUtilityClass.js";
@@ -271,10 +274,10 @@ export {
   B3 as Breadcrumbs,
   B5 as Button,
   C as Card,
-  C16 as CheckBox,
+  C17 as CheckBox,
   C2 as Chip,
-  C18 as ChipStatusFormatter,
-  C15 as CircularProgress,
+  C19 as ChipStatusFormatter,
+  C16 as CircularProgress,
   C4 as ColumnBooleanFormatter,
   C14 as ColumnChipStatusFormatter,
   C5 as ColumnConcatenatedValueFormatter,
@@ -285,8 +288,9 @@ export {
   C10 as ColumnPointsFormatter,
   C11 as ColumnPriceFormatter,
   C12 as ColumnSetCheckFormatter,
+  C15 as ColumnTagsFormatter,
   C13 as ColumnUncertaintyFormatter,
-  C17 as ConcatenatedFormatter,
+  C18 as ConcatenatedFormatter,
   C3 as ContainerFlow,
   b3 as DATAGRID_ROW_HEADER_HEIGHTS,
   a4 as DATAGRID_ROW_HEIGHTS,
@@ -409,9 +413,10 @@ export {
   T7 as TabContext,
   a7 as TabProvider,
   T5 as Tabs,
+  T17 as TagsFormatter,
   T2 as TextEditor,
-  T17 as ToastContainer,
-  T18 as ToastMessage,
+  T18 as ToastContainer,
+  T19 as ToastMessage,
   T9 as ToggleButton,
   T12 as ToggleButtonRootStyled,
   T11 as ToggleButtonSlots,
@@ -492,7 +497,7 @@ export {
   r as rhfPeriodStyles,
   t as toggleButtonStyles,
   t2 as toggleIconButtonStyles,
-  u20 as useAppearanceComponentStore,
+  u21 as useAppearanceComponentStore,
   u as useAreasStore,
   u2 as useColumnBoolean,
   u12 as useColumnChipStatus,
@@ -504,29 +509,30 @@ export {
   u8 as useColumnPoints,
   u9 as useColumnPrice,
   u10 as useColumnSetCheck,
+  u13 as useColumnTags,
   u11 as useColumnUncertanity,
-  u26 as useComponentSize,
-  u19 as useCustomForm,
-  u31 as useDataGridPersistence,
-  u14 as useDistanceToNowFormatter,
-  u30 as useDynamicFilterAndSort,
-  u17 as useDynamicMFParameters,
+  u27 as useComponentSize,
+  u20 as useCustomForm,
+  u32 as useDataGridPersistence,
+  u15 as useDistanceToNowFormatter,
+  u31 as useDynamicFilterAndSort,
+  u18 as useDynamicMFParameters,
   a11 as useDynamicMFParametersStore,
-  u21 as useFormAddEdit,
-  u24 as useFormFocus,
-  u27 as useFormReadyForUpdate,
-  u13 as useFormatPeriod,
-  u25 as useInterval,
-  u33 as useIsVisible,
-  u22 as useModal,
-  u32 as usePopoverContainer,
-  u15 as usePopupsStore,
-  u34 as useSizeContainer,
-  u28 as useStateRef,
-  u18 as useStepper,
-  u29 as useSvgColor,
-  u23 as useTab,
-  u16 as useWindowToolsMF,
+  u22 as useFormAddEdit,
+  u25 as useFormFocus,
+  u28 as useFormReadyForUpdate,
+  u14 as useFormatPeriod,
+  u26 as useInterval,
+  u34 as useIsVisible,
+  u23 as useModal,
+  u33 as usePopoverContainer,
+  u16 as usePopupsStore,
+  u35 as useSizeContainer,
+  u29 as useStateRef,
+  u19 as useStepper,
+  u30 as useSvgColor,
+  u24 as useTab,
+  u17 as useWindowToolsMF,
   v2 as varBounce,
   v3 as varContainer,
   v as varFade,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.3.25-beta.0",
+  "version": "9.3.26",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {

package/components/DataGrid/formatters/ColumnIconFormatter/constants.js

@@ -1,4 +0,0 @@
-const COLUMN_ICON_KEY_COMPONENT = "M4LColumnIconFormatter";
-export {
-  COLUMN_ICON_KEY_COMPONENT as C
-};

package/components/DataGrid/formatters/ColumnIconFormatter/helpers/renderIcon.js

@@ -1,58 +0,0 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import React from "react";
-import { C as COLUMN_ICON_KEY_COMPONENT } from "../constants.js";
-import { g as getPropDataTestId } from "../../../../../test/getNameDataTestId.js";
-import { I as IconClickeableStyled, a as IconStyled } from "../../../../ObjectLogs/slots/ObjectLogsSlots.js";
-function renderIcon(iconConfig, key) {
-  const {
-    iconUrl,
-    onClick,
-    tooltip,
-    dataTestId,
-    Component,
-    componentProps,
-    color,
-    visible,
-    size
-  } = iconConfig;
-  if (visible === false) {
-    return /* @__PURE__ */ jsx(Fragment, { children: "-" });
-  }
-  const IconComponent = onClick ? IconClickeableStyled : IconStyled;
-  if (Component && Component !== React.Fragment) {
-    return /* @__PURE__ */ jsx(
-      Component,
-      {
-        ...componentProps,
-        ...getPropDataTestId(COLUMN_ICON_KEY_COMPONENT, "container", dataTestId),
-        children: /* @__PURE__ */ jsx(
-          IconComponent,
-          {
-            src: iconUrl,
-            ...onClick && { onClick },
-            tooltipContent: tooltip,
-            instaceDataTestId: dataTestId,
-            color,
-            size
-          }
-        )
-      },
-      key
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    IconComponent,
-    {
-      src: iconUrl,
-      ...onClick && { onClick },
-      tooltipContent: tooltip,
-      instaceDataTestId: dataTestId,
-      color,
-      size
-    },
-    key
-  );
-}
-export {
-  renderIcon as r
-};

package/components/DataGrid/formatters/ColumnIconFormatter/helpers/renderMultipleIcons.d.ts

@@ -1,7 +0,0 @@
-import { ColumnIconResponse } from '../types';
-/**
- * Helper que renderiza múltiples iconos
- * @param iconsConfig - Array de configuraciones de iconos
- * @returns Componente contenedor con múltiples iconos
- */
-export declare function renderMultipleIcons(iconsConfig: ColumnIconResponse[]): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/formatters/ColumnIconFormatter/helpers/renderMultipleIcons.js

@@ -1,19 +0,0 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import { a as ColumnIconFormatterStyled } from "../../../slots/DataGridSlot.js";
-import { r as renderIcon } from "./renderIcon.js";
-function renderMultipleIcons(iconsConfig) {
-  if (!iconsConfig || iconsConfig.length === 0) {
-    return /* @__PURE__ */ jsx(Fragment, { children: "-" });
-  }
-  const visibleIcons = iconsConfig.filter((icon) => icon.visible !== false);
-  if (visibleIcons.length === 0) {
-    return /* @__PURE__ */ jsx(Fragment, { children: "-" });
-  }
-  if (visibleIcons.length === 1) {
-    return renderIcon(visibleIcons[0]);
-  }
-  return /* @__PURE__ */ jsx(ColumnIconFormatterStyled, { children: visibleIcons.map((iconConfig, index) => renderIcon(iconConfig, index)) });
-}
-export {
-  renderMultipleIcons as r
-};