@m4l/components 9.1.45 → 9.1.46

package/components/formatters/BooleanFormatter/BooleanFormatter.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { BooleanFormatterProps } from './types';
 /**
  * BooleanFormatter
@@ -10,10 +11,12 @@ import { BooleanFormatterProps } from './types';
  * - `'check'`: Displays an icon representing `true` or `false`.
  * [value=false]
  * The boolean value to be formatted.
- * [Component=WrapperComponent]
+ * [Component=BooleanFormatterRootStyled]
  * A custom wrapper component for the formatted output.
  * [dataTestId]
  * A unique identifier for testing purposes, used as a `data-testid` attribute.
+ * [className]
+ * A custom class name to apply to the component.
  * @example
  * <BooleanFormatter presentationType="string_yes_no" value={true} />
  * // Renders "Yes"
@@ -26,4 +29,4 @@ import { BooleanFormatterProps } from './types';
  * @updatedAt 2024-12-10 14:11:20 - automatic
  * @updatedUser cesar - automatic
  */
-export declare function BooleanFormatter(props: BooleanFormatterProps): import("react/jsx-runtime").JSX.Element;
+export declare function BooleanFormatter<T extends React.ElementType>(props: BooleanFormatterProps<T>): string | import("react/jsx-runtime").JSX.Element;

package/components/formatters/BooleanFormatter/BooleanFormatter.js

@@ -1,47 +1,50 @@
 import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
-import { W as WrapperComponent } from "../../WrapperComponent/index.js";
 import { L as LABEL_BOOLEAN_YES, a as LABEL_BOOLEAN_NO, b as LABEL_BOOLEAN_TRUE, c as LABEL_BOOLEAN_FALSE } from "./dictionary.js";
 import clsx from "clsx";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
 import { B as BOOLEAN_FORMATTER_KEY_COMPONENT } from "./constants.js";
 import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
-import { T as TextStyled, F as FormatterRootStyled, B as BooleanFormatterIconStyled } from "./slots/BooleanFormatterSlots.js";
+import { B as BooleanFormatterIconStyled, a as BooleanFormatterRootStyled } from "./slots/BooleanFormatterSlots.js";
 import { B as BooleanFormatterSlots } from "./slots/BooleanFormatterEnum.js";
 function BooleanFormatter(props) {
-  const { presentationType, value, Component = WrapperComponent, dataTestId } = props;
+  const { presentationType, value, Component = BooleanFormatterRootStyled, dataTestId, className, componentProps } = props;
   const { getLabel } = useModuleDictionary();
   const { host_static_assets, environment_assets } = useEnvironment();
   const final_value = value ?? false;
   const srcCheckTrue = `${host_static_assets}/${environment_assets}/frontend/components/data_grid/components/boolean_formatter/assets/icons/check_true.svg`;
   const srcCheckFalse = `${host_static_assets}/${environment_assets}/frontend/components/data_grid/components/boolean_formatter/assets/icons/check_false.svg`;
-  const ownerState = { isTrue: final_value };
+  const ownerState = { value: final_value };
   const memoComponent = useMemo(() => {
     if (presentationType === "string_yes_no") {
-      return /* @__PURE__ */ jsx(Component, { children: /* @__PURE__ */ jsx(TextStyled, { ownerState, children: final_value ? getLabel(LABEL_BOOLEAN_YES) : getLabel(LABEL_BOOLEAN_NO) }) });
+      return final_value ? getLabel(LABEL_BOOLEAN_YES) : getLabel(LABEL_BOOLEAN_NO);
     }
     if (presentationType === "string_true_false") {
-      return /* @__PURE__ */ jsx(Component, { children: /* @__PURE__ */ jsx(TextStyled, { ownerState, children: final_value ? getLabel(LABEL_BOOLEAN_TRUE) : getLabel(LABEL_BOOLEAN_FALSE) }) });
+      return final_value ? getLabel(LABEL_BOOLEAN_TRUE) : getLabel(LABEL_BOOLEAN_FALSE);
     }
     return /* @__PURE__ */ jsx(
-      FormatterRootStyled,
+      BooleanFormatterIconStyled,
       {
-        className: clsx(getComponentSlotRoot(BOOLEAN_FORMATTER_KEY_COMPONENT)),
-        ...getPropDataTestId(BOOLEAN_FORMATTER_KEY_COMPONENT, BooleanFormatterSlots.booleanFormatterRoot, dataTestId),
-        role: "booleanStyled-role",
         ownerState,
-        children: /* @__PURE__ */ jsx(Component, { children: /* @__PURE__ */ jsx(
-          BooleanFormatterIconStyled,
-          {
-            ownerState,
-            src: final_value ? srcCheckTrue : srcCheckFalse
-          }
-        ) })
+        src: final_value ? srcCheckTrue : srcCheckFalse
       }
     );
   }, [final_value, getLabel, presentationType, srcCheckTrue, srcCheckFalse]);
-  return memoComponent;
+  if (Component === React.Fragment) {
+    return memoComponent;
+  }
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: clsx(getComponentSlotRoot(BOOLEAN_FORMATTER_KEY_COMPONENT), className),
+      ...getPropDataTestId(BOOLEAN_FORMATTER_KEY_COMPONENT, BooleanFormatterSlots.root, dataTestId),
+      role: "booleanStyled-role",
+      ownerState,
+      ...componentProps,
+      children: memoComponent
+    }
+  );
 }
 export {
   BooleanFormatter as B

package/components/formatters/BooleanFormatter/BooleanFormatter.styles.js

@@ -6,15 +6,20 @@ const booleanFormatterStyles = {
    * @updatedAt 2024-12-30 14:36:10 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
-  text: ({ theme }) => ({
+  root: ({ theme }) => ({
     "& .MuiSkeleton-text": {
       width: `${theme.vars.size.baseSpacings.sp7} !important`,
       borderRadius: theme.vars.size.borderRadius.r1
     }
   }),
-  booleanFormatterRoot: {},
-  booleanFormatterSkeleton: {},
-  booleanFormatterIcon: {}
+  /**
+   * Styled del icono
+   */
+  icon: ({ theme }) => ({
+    "& .M4LIcon-icon": {
+      backgroundColor: theme.vars.palette.text.primary
+    }
+  })
 };
 export {
   booleanFormatterStyles as b

package/components/formatters/BooleanFormatter/dictionary.d.ts

@@ -3,5 +3,5 @@ export declare const LABEL_BOOLEAN_YES = "boolean_formatter.boolean_yes";
 export declare const LABEL_BOOLEAN_NO = "boolean_formatter.boolean_no";
 export declare const LABEL_BOOLEAN_TRUE = "boolean_formatter.boolean_true";
 export declare const LABEL_BOOLEAN_FALSE = "boolean_formatter.boolean_false";
-export declare function getFormattersComponentsDictionary(): string[];
+export declare function getBooleanFormatterComponentsDictionary(): string[];
 export declare const BOOLEAN_FORMATTER_DICTIONARY_LABELS: string[];

package/components/formatters/BooleanFormatter/slots/BooleanFormatterEnum.d.ts

@@ -1,6 +1,4 @@
 export declare enum BooleanFormatterSlots {
-    booleanFormatterRoot = "booleanFormatterRoot",
-    booleanFormatterSkeleton = "booleanFormatterSkeleton",
-    booleanFormatterIcon = "booleanFormatterIcon",
-    text = "text"
+    icon = "icon",
+    root = "root"
 }

package/components/formatters/BooleanFormatter/slots/BooleanFormatterEnum.js

@@ -1,8 +1,6 @@
 var BooleanFormatterSlots = /* @__PURE__ */ ((BooleanFormatterSlots2) => {
-  BooleanFormatterSlots2["booleanFormatterRoot"] = "booleanFormatterRoot";
-  BooleanFormatterSlots2["booleanFormatterSkeleton"] = "booleanFormatterSkeleton";
-  BooleanFormatterSlots2["booleanFormatterIcon"] = "booleanFormatterIcon";
-  BooleanFormatterSlots2["text"] = "text";
+  BooleanFormatterSlots2["icon"] = "icon";
+  BooleanFormatterSlots2["root"] = "root";
   return BooleanFormatterSlots2;
 })(BooleanFormatterSlots || {});
 export {

package/components/formatters/BooleanFormatter/slots/BooleanFormatterSlots.d.ts

@@ -1,12 +1,6 @@
-export declare const FormatterRootStyled: import('@emotion/styled').StyledComponent<Pick<import('../../FormatterRoot/types').FormatterRootProps, "children"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown>;
-}, {}, {}>;
 export declare const BooleanFormatterIconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Icon/types').IconProps, keyof import('../../../Icon/types').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown> & {
     ownerState: Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown>;
 }, {}, {}>;
-export declare const BooleanFormatterSkeletonStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../mui_extended/Skeleton/types').SkeletonProps, keyof import('../../../mui_extended/Skeleton/types').SkeletonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown>;
-}, {}, {}>;
-export declare const TextStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../mui_extended/Typography/types').TypographyProps, keyof import('../../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown> & {
+export declare const BooleanFormatterRootStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../mui_extended/Typography/types').TypographyProps, keyof import('../../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown> & {
     ownerState: Partial<import('..').BooleanFormatterOwnerState> & Record<string, unknown>;
 }, {}, {}>;

package/components/formatters/BooleanFormatter/slots/BooleanFormatterSlots.js

@@ -2,28 +2,17 @@ import { styled } from "@mui/material/styles";
 import { B as BOOLEAN_FORMATTER_KEY_COMPONENT } from "../constants.js";
 import { B as BooleanFormatterSlots } from "./BooleanFormatterEnum.js";
 import { b as booleanFormatterStyles } from "../BooleanFormatter.styles.js";
-import { F as FormatterRoot } from "../../FormatterRoot/index.js";
 import { T as Typography } from "../../../mui_extended/Typography/Typography.js";
-import { S as Skeleton } from "../../../mui_extended/Skeleton/Skeleton.js";
 import { I as Icon } from "../../../Icon/Icon.js";
-const FormatterRootStyled = styled(FormatterRoot, {
-  name: BOOLEAN_FORMATTER_KEY_COMPONENT,
-  slot: BooleanFormatterSlots.booleanFormatterRoot
-})(booleanFormatterStyles?.booleanFormatterRoot);
 const BooleanFormatterIconStyled = styled(Icon, {
   name: BOOLEAN_FORMATTER_KEY_COMPONENT,
-  slot: BooleanFormatterSlots.booleanFormatterIcon
-})(booleanFormatterStyles?.booleanFormatterIcon);
-styled(Skeleton, {
-  name: BOOLEAN_FORMATTER_KEY_COMPONENT,
-  slot: BooleanFormatterSlots.booleanFormatterSkeleton
-})(booleanFormatterStyles?.booleanFormatterSkeleton);
-const TextStyled = styled(Typography, {
+  slot: BooleanFormatterSlots.icon
+})(booleanFormatterStyles?.icon);
+const BooleanFormatterRootStyled = styled(Typography, {
   name: BOOLEAN_FORMATTER_KEY_COMPONENT,
-  slot: BooleanFormatterSlots.text
-})(booleanFormatterStyles?.text);
+  slot: BooleanFormatterSlots.root
+})(booleanFormatterStyles?.root);
 export {
   BooleanFormatterIconStyled as B,
-  FormatterRootStyled as F,
-  TextStyled as T
+  BooleanFormatterRootStyled as a
 };

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

@@ -1,5 +1,5 @@
 import { OverridesStyleRules } from '@mui/material/styles/overrides';
-import { BooleanFormatterSlots } from './slots';
+import { BooleanFormatterRootStyled, BooleanFormatterSlots } from './slots';
 import { BOOLEAN_FORMATTER_KEY_COMPONENT } from './constants';
 import { Theme } from '@mui/material';
 /**
@@ -16,17 +16,22 @@ export type BooleanFormatter = keyof typeof BooleanFormatterSlots;
 /**
  * Properties for the `BooleanFormatter` component.
  */
-export interface BooleanFormatterProps {
-    Component?: React.ElementType;
+export interface BooleanFormatterProps<T extends React.ElementType = typeof BooleanFormatterRootStyled> {
+    Component?: T;
     presentationType: PresentationType;
     value?: boolean;
     dataTestId?: string;
+    className?: string;
+    /**
+     * Props para el componente personalizado.
+     */
+    componentProps?: React.ComponentPropsWithoutRef<T>;
 }
 /**
  * State properties for the `BooleanFormatter` component.
  */
 export interface BooleanFormatterOwnerState {
-    isTrue?: boolean;
+    value?: boolean;
     [key: string]: unknown;
 }
 /**

package/components/mui_extended/Typography/types.d.ts

@@ -34,7 +34,7 @@ export interface TypographyProps extends Omit<MUITypographyProps, 'color' | 'var
     /**
      * Contenido del componente.
      */
-    children?: string;
+    children?: React.ReactNode;
     /**
      * Nombre identificador del componente, es útil para realizar pruebas del componente.
      */

package/package.json

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

package/components/formatters/FormatterRoot/index.js

@@ -1,10 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { f as formatterClasses } from "../classes/index.js";
-import { F as FormatterRootContainer } from "./styles.js";
-const FormatterRoot = (props) => {
-  const { children } = props;
-  return /* @__PURE__ */ jsx(FormatterRootContainer, { className: formatterClasses.root, children });
-};
-export {
-  FormatterRoot as F
-};

package/components/formatters/FormatterRoot/styles.js

@@ -1,7 +0,0 @@
-import { styled } from "@mui/material";
-const FormatterRootContainer = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LFormatter?.styleOverrides || {}
-}));
-export {
-  FormatterRootContainer as F
-};

package/components/formatters/classes/index.js

@@ -1,13 +0,0 @@
-import { generateUtilityClasses } from "@mui/material";
-import "@mui/base";
-import { C as COMPONENT_CLASS_NAME } from "../constants.js";
-const formatterClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
-  /* elements */
-  "root",
-  "booleanFormatterIcon",
-  "booleanFormatterCheck"
-  /* states or variants of elements */
-]);
-export {
-  formatterClasses as f
-};

package/components/formatters/constants.js

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