@m4l/components 9.3.6 → 9.3.7

package/hooks/useIsVisible/useIsVisible.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Custom hook para verificar si el contenedor debería ser visible en la pantalla.
+ * Cada vez que el contenedor cambia de tamaño, el hook revisa si su altura es al menos de 55 píxeles o mayor (o el valor que se le pasa como argumento).
+ * Si es lo suficientemente alta, dice "sí, está visible" (true), si no, dice "no, está demasiado pequeña" (false).
+ * El hook useIsVisible es esencial ya que tanto las consultas de contenedor (container queries) como las consultas de medios (media queries) en css
+ * solo responden a cambios en el eje X del contenedor. No obstante, en este escenario de desarrollo, necesitamos evaluar también el eje Y.
+ * @param containerRef - Referencia al contenedor del componente.
+ * @param minHeightThreshold - Umbral mínimo de altura en píxeles para considerar el contenedor como visible (por defecto: 55).
+ * @returns true si el contenedor debería ser visible, false en caso contrario.
+ * @example
+ * ```tsx
+ * const MyComponent = () => {
+ *   const containerRef = useRef<HTMLDivElement>(null);
+ *   const isVisible = useIsVisible(containerRef, 100); // Visible solo si altura >= 100px
+ *
+ *   return (
+ *     <div ref={containerRef}>
+ *       {isVisible ? (
+ *         <img src="large-image.jpg" alt="Imagen grande" />
+ *       ) : (
+ *         <div>Contenedor demasiado pequeño para mostrar imagen</div>
+ *       )}
+ *     </div>
+ *   );
+ * };
+ * ```
+ */
+export declare const useIsVisible: (containerRef: React.RefObject<HTMLDivElement>, minHeightThreshold?: number) => boolean;

package/hooks/useIsVisible/useIsVisible.js

@@ -0,0 +1,25 @@
+import { useState, useEffect } from "react";
+import { D as DEFAULT_MIN_HEIGHT_THRESHOLD } from "./constants.js";
+const useIsVisible = (containerRef, minHeightThreshold = DEFAULT_MIN_HEIGHT_THRESHOLD) => {
+  const [isVisible, setIsVisible] = useState(true);
+  useEffect(() => {
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const shouldBeVisible = entry.contentRect.height >= minHeightThreshold;
+        setIsVisible(shouldBeVisible);
+      }
+    });
+    if (containerRef.current) {
+      observer.observe(containerRef.current);
+      const rect = containerRef.current.getBoundingClientRect();
+      setIsVisible(rect.height >= minHeightThreshold);
+    }
+    return () => {
+      observer.disconnect();
+    };
+  }, [containerRef]);
+  return isVisible;
+};
+export {
+  useIsVisible as u
+};

package/index.js

@@ -58,6 +58,7 @@ import { C as C13 } from "./components/DataGrid/formatters/ColumnChipStatusForma
 import { u as u11 } from "./components/DataGrid/formatters/ColumnChipStatusFormatter/useColumnChipStatus.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";
 import { g as g7 } from "./components/DynamicFilter/dictionary.js";
 import { a as a5, g as g8 } from "./components/DynamicFilter/helpers/frontEndHelpers.js";
 import { g as g9 } from "./components/DynamicFilter/helpers/getRawFiltersForNetwork.js";
@@ -163,9 +164,12 @@ import { a as a9, M as M3 } from "./components/MenuActions/MenuActions.js";
 import { M as M4 } from "./components/MFIsolationApp/MFIsolationApp.js";
 import { M as M5 } from "./components/MFLoader/MFLoader.js";
 import { g as g24 } from "./components/MFLoader/dictionary.js";
+import { I as I6 } from "./components/ImageText/ImageText.js";
 import { N as N4 } from "./components/NoItemSelected/NoItemSelected.js";
 import { g as g25 } from "./components/NoItemSelected/dictionary.js";
-import { g as g26 } from "./components/ObjectLogs/dictionary.js";
+import { N as N5 } from "./components/NoItemPrivileges/NoItemPrivileges.js";
+import { g as g26 } from "./components/NoItemPrivileges/dictionary.js";
+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";
@@ -178,26 +182,26 @@ 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 { W } from "./components/WindowBase/WindowBase.js";
+import { W as W2 } from "./components/WindowBase/WindowBase.js";
 import { u as u14 } from "./components/WindowBase/hooks/useWindowToolsMF/index.js";
 import { u as u15, a as a11 } from "./components/WindowBase/hooks/useDynamicMFParameters/index.js";
-import { M as M6, W as W2, a as a12 } from "./components/WindowBase/contexts/WindowToolsMFContext/WindowToolsMFContext.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";
-import { W as W3 } from "./components/WindowConfirm/WindowConfirm.js";
-import { a as a14, g as g27 } from "./components/ModalDialog/dictionary.js";
+import { W as W4 } from "./components/WindowConfirm/WindowConfirm.js";
+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 { F as F2, R as R23, u as u16 } from "./components/hook-form/RHFormContext/index.js";
-import { g as g28 } from "./components/hook-form/RHFormContext/dictionary.js";
+import { g as g29 } from "./components/hook-form/RHFormContext/dictionary.js";
 import { u as u17 } 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 u18 } from "./hooks/useFormAddEdit/index.js";
 import { u as u19 } from "./hooks/useModal/index.js";
 import { u as u20 } from "./hooks/useTab/index.js";
-import { g as g29 } from "./hooks/useFormAddEdit/dictionary.js";
+import { g as g30 } from "./hooks/useFormAddEdit/dictionary.js";
 import { u as u21 } from "./hooks/useFormFocus/index.js";
 import { u as u22 } from "./hooks/useInterval/index.js";
 import { u as u23 } from "./hooks/useComponentSize/useComponentSize.js";
@@ -208,18 +212,19 @@ import { u as u26 } from "./hooks/useSvgColor/useSvgColor.js";
 import { u as u27 } from "./hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js";
 import { u as u28 } from "./hooks/useDataGridPersistence/useDataGridPersistence.js";
 import { u as u29 } from "./hooks/usePopoverContainer/usePopoverContainer.js";
+import { u as u30 } from "./hooks/useIsVisible/useIsVisible.js";
 import { c as c4 } from "./utils/capitalizeFirstLetter.js";
 import { i as i2 } from "./utils/isValidDate.js";
-import { g as g30 } from "./utils/getComponentUtilityClass.js";
-import { g as g31 } from "./utils/getPaletteColor.js";
-import { g as g32 } from "./utils/getTypographyStyles.js";
-import { g as g33 } from "./utils/getIconColor.js";
-import { a as a16, g as g34 } from "./utils/getSizeStyles/getSizeStyles.js";
+import { g as g31 } from "./utils/getComponentUtilityClass.js";
+import { g as g32 } from "./utils/getPaletteColor.js";
+import { g as g33 } from "./utils/getTypographyStyles.js";
+import { g as g34 } from "./utils/getIconColor.js";
+import { a as a16, g as g35 } from "./utils/getSizeStyles/getSizeStyles.js";
 import { O as O2 } from "./utils/ObjectQueue.js";
-import { g as g35, a as a17 } from "./utils/getComponentSlotRoot.js";
+import { g as g36, a as a17 } from "./utils/getComponentSlotRoot.js";
 import { f } from "./utils/formatDistanceToNow/formatDistanteToNow.js";
-import { g as g36 } from "./utils/getValidDate.js";
-import { g as g37 } from "./utils/getNullGuard.js";
+import { g as g37 } from "./utils/getValidDate.js";
+import { g as g38 } from "./utils/getNullGuard.js";
 export {
   A7 as AREAS_DICCTIONARY,
   a3 as AREAS_DICTIONARY_ID,
@@ -287,6 +292,7 @@ export {
   I as IconButtonAnimate,
   I5 as Image,
   I3 as ImageButton,
+  I6 as ImageText,
   L2 as LABEL_FILTER_BUTTON,
   L6 as Label,
   L7 as LanguagePopover,
@@ -309,6 +315,7 @@ export {
   M as MotionContainer,
   M2 as MotionLazyContainer,
   N2 as NavLink,
+  N5 as NoItemPrivileges,
   N4 as NoItemSelected,
   N as NumberEditor,
   N3 as NumberInputStyled,
@@ -384,9 +391,10 @@ export {
   T8 as Typography,
   U as UncertaintyFormatter,
   V as VariableSizeList,
-  W as WindowBase,
-  W3 as WindowConfirm,
-  W2 as WindowToolsMFContext,
+  W as WINDOW_SIZES,
+  W2 as WindowBase,
+  W4 as WindowConfirm,
+  W3 as WindowToolsMFContext,
   a12 as WindowToolsMFProvider,
   c2 as addLayoutItemToBreakPointIfNoExists,
   e2 as addLayoutItemToBreakPoints,
@@ -402,44 +410,45 @@ export {
   b2 as getAreasComponentsDictionary,
   g3 as getAreasDictionary,
   g4 as getCommonActionsDictionary,
-  g35 as getComponentClasses,
+  g36 as getComponentClasses,
   a17 as getComponentSlotRoot,
-  g30 as getComponentUtilityClass,
+  g31 as getComponentUtilityClass,
   g5 as getDataGridComponentsDictionary,
   g6 as getDataGridRowsFromSet,
   g17 as getDistanceToNowFormatterComponentsDictionary,
   g7 as getDynamicFilterComponentsDictionary,
   a6 as getDynamicSortComponentsDictionary,
   a5 as getFilterGroupFieldsByName,
-  g28 as getFormComponentsDictionary,
+  g29 as getFormComponentsDictionary,
   g15 as getFormatConcatenated,
   g12 as getFormatDate,
   g14 as getFormatPoints,
   g16 as getFormatPrice,
   g18 as getFormattersComponentsDictionary,
   a16 as getHeightSizeStyles,
-  g33 as getIconColor,
+  g34 as getIconColor,
   g8 as getIsIfInDynamicFilter,
   g22 as getLoadingErrorComponentsDictionary,
   g24 as getMFLoaderComponentsDictionary,
   g23 as getMenuActionsComponentsDictionary,
   a14 as getModalDialogComponentsDictionary,
-  g27 as getModalDictionary,
+  g28 as getModalDictionary,
+  g26 as getNoItemPrivilegesComponentsDictionary,
   g25 as getNoItemSelectedComponentsDictionary,
-  g37 as getNullGuard,
-  g26 as getObjectLogsComponentsDictionary,
+  g38 as getNullGuard,
+  g27 as getObjectLogsComponentsDictionary,
   g11 as getPagerComponentsDictionary,
-  g31 as getPaletteColor,
+  g32 as getPaletteColor,
   g21 as getPeriodComponetsDictionary,
   g20 as getRHFAutocompleteAsyncComponentsDictionary,
   g19 as getRHFAutocompleteComponentsDictionary,
   g9 as getRawFiltersForNetwork,
   g10 as getRawSortsForNetwork,
-  g34 as getSizeStyles,
-  g32 as getTypographyStyles,
+  g35 as getSizeStyles,
+  g33 as getTypographyStyles,
   g13 as getUncertaintyFormat,
-  g36 as getValidDate,
-  g29 as getformAddEditDictionary,
+  g37 as getValidDate,
+  g30 as getformAddEditDictionary,
   i as isEqualLayout,
   k as isEqualLayouts,
   i2 as isValidDate,
@@ -469,6 +478,7 @@ export {
   u24 as useFormReadyForUpdate,
   u12 as useFormatPeriod,
   u22 as useInterval,
+  u30 as useIsVisible,
   u19 as useModal,
   u29 as usePopoverContainer,
   u13 as usePopupsStore,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.3.6",
+  "version": "9.3.7",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {

package/storybook/components/NoItemPrivileges/NoItemPrivileges.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { NoItemPrivileges } from '../../../src/components/NoItemPrivileges';
+declare const meta: Meta<typeof NoItemPrivileges>;
+export default meta;
+type Story = StoryObj<typeof NoItemPrivileges>;
+/** Base component  */
+export declare const NoItemPrivilegesComponent: Story;
+/**
+ * Version skeleton del componente
+ */
+export declare const Skeleton: Story;
+export declare const WithSplitLayout: Story;

package/storybook/components/NoItemSelect/NoItemSelect.stories.d.ts

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

package/storybook/components/extended/mui/TextField/TextFieldText.stories.d.ts

@@ -21,5 +21,12 @@ export declare const MultipleLines: Story;
  * disabled
  */
 export declare const WhitAdorment: Story;
+/**
+ * Se aplica cuando el input tiene un limite de caracteres.
+ */
+export declare const WithMaxLength: Story;
+/**
+ * Se aplica cuando el input tiene un skeleton.
+ */
 export declare const WithSkeleton: Story;
 export default meta;

package/storybook/hook-form/RHFTextField/RHFTextField.stories.d.ts

@@ -16,6 +16,10 @@ export declare const RHFTextFieldReadOnly: Story;
  * endAdornment
  */
 export declare const RHFTextFieldAdornment: Story;
+/**
+ * Input con límite de caracteres.
+ */
+export declare const RHFTextFieldMaxLength: Story;
 export declare const RHFTextFieldError: Story;
 export declare const SkeletonBase: Story;
 export default meta;

package/storybook/hook-form/RHFTextFieldPassword/RHFTextFieldPassword.stories.d.ts

@@ -2,7 +2,26 @@ import { Meta, StoryObj } from '@storybook/react';
 import { RHFTextFieldPassword } from '../../../src/components/hook-form/RHFTextFieldPassword';
 declare const meta: Meta<typeof RHFTextFieldPassword>;
 type Story = StoryObj<typeof RHFTextFieldPassword>;
+/**
+ * Input con valor por defecto.
+ */
 export declare const RHFTextFieldPasswordDefault: Story;
+/**
+ * Input con límite de caracteres.
+ *
+ * maxLength
+ */
+export declare const RHFTextFieldPasswordMaxLength: Story;
+/**
+ * Input con error.
+ *
+ * error
+ */
 export declare const RHFTextFieldPasswordError: Story;
+/**
+ * Input con skeleton.
+ *
+ * skeleton
+ */
 export declare const SkeletonBase: Story;
 export default meta;

package/utils/getLimitCharacters/getLimitCharacters.d.ts

@@ -0,0 +1,7 @@
+import { GetLimitCharactersProps } from './types';
+/**
+ * Obtiene el valor limitado de caracteres del campo de texto.
+ * @param props - Propiedades del campo de texto.
+ * @returns El valor limitado de caracteres del campo de texto.
+ */
+export declare const getLimitCharacters: (props: GetLimitCharactersProps) => unknown;

package/utils/getLimitCharacters/getLimitCharacters.js

@@ -0,0 +1,11 @@
+const getLimitCharacters = (props) => {
+  const { limitCharacters, value } = props;
+  let finalValue = value;
+  if (limitCharacters && value) {
+    finalValue = value.toString().slice(0, limitCharacters);
+  }
+  return finalValue;
+};
+export {
+  getLimitCharacters as g
+};

package/utils/getLimitCharacters/index.d.ts

@@ -0,0 +1 @@
+export { getLimitCharacters } from './getLimitCharacters';

package/utils/getLimitCharacters/index.js

@@ -0,0 +1 @@
+

package/utils/getLimitCharacters/test/getLimitCharacters.test.d.ts

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

package/utils/getLimitCharacters/types.d.ts

@@ -0,0 +1,11 @@
+import { TextFieldProps } from '../../components/mui_extended/TextField/types';
+export interface GetLimitCharactersProps {
+    /**
+     * Límite de caracteres.
+     */
+    limitCharacters?: number;
+    /**
+     * Valor a limitar.
+     */
+    value?: TextFieldProps['value'];
+}