@m4l/components 9.3.1 → 9.3.2-B04082025-beta.3

package/components/ImageText/components/NoItemPrivileges/types.d.ts

@@ -0,0 +1,36 @@
+import { Sizes } from '@m4l/styles';
+import { M4LOverridesStyleRules } from '../../../../@types/augmentations';
+import { NoItemPrivilegesSlots } from './slots/NoItemPrivilegesEnum';
+import { NO_ITEM_PRIVILEGES_KEY_COMPONENT } from './constants';
+import { Theme } from '@mui/material';
+export type NoItemPrivilegesProps = {
+    /**
+     * Imagen que se muestra en el componente.
+     */
+    image?: string;
+    /**
+     * Título que se muestra en el componente.
+     */
+    title?: string;
+    /**
+     * Mensaje que se muestra en el componente.
+     */
+    message?: string;
+    /**
+     * Clase que se aplica al componente.
+     */
+    className?: string;
+    /**
+     * ID de prueba que se aplica al componente.
+     */
+    dataTestId?: string;
+    /**
+     * Tamaño del componente.
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+};
+export type NoItemPrivilegesOwnerState = {
+    isVisible: boolean;
+};
+export type NoItemPrivilegesSlotsType = keyof typeof NoItemPrivilegesSlots;
+export type NoItemPrivilegesStyles = M4LOverridesStyleRules<NoItemPrivilegesSlotsType, typeof NO_ITEM_PRIVILEGES_KEY_COMPONENT, Theme>;

package/components/ImageText/components/NoItemSelected/NoItemSelected.js

@@ -0,0 +1,62 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { useMemo, useRef } from "react";
+import { N as NoItemSelectedContainer, I as ImgStyled, W as WrapperTpography, T as TypographyStyledTitle, a as TypographyStyledDetail, L as LabelDetail } from "./slots/NoItemSelectedSlots.js";
+import { clsx } from "clsx";
+import { c as classNoItemSelected, N as NO_ITEM_SELECT_KEY_COMPONENT } from "./constant.js";
+import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
+import { N as NoItemSelectedSlots } from "./slots/NoItemSelectedEnum.js";
+import { D as DICTIONARY } from "./dictionary.js";
+import { u as useIsVisible } from "../../hooks/useIsVisible/index.js";
+import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
+import { I as ImageTextContainer } from "../ImageTextContainer/ImageTextContainer.js";
+function NoItemSelected(props) {
+  const { image, message, size = "medium", className, dataTestId } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { currentSize } = useComponentSize(size);
+  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
+  const { getLabel } = useModuleDictionary();
+  const defaultImage = useMemo(() => {
+    return `${host_static_assets}/${environment_assets}/frontend/components/no_item_selected/assets/icons/no_selected.svg`;
+  }, []);
+  const ownerState = {
+    size
+  };
+  const containerRef = useRef(null);
+  const isVisible = useIsVisible(containerRef);
+  return /* @__PURE__ */ jsxs(ImageTextContainer, { dataTestId, children: [
+    /* @__PURE__ */ jsx(NoItemSelectedContainer, { ref: containerRef, ownerState: { isVisible }, children: /* @__PURE__ */ jsx(
+      ImgStyled,
+      {
+        className: clsx(classNoItemSelected.img, "noItemSelectedImg", className),
+        src: image || defaultImage,
+        alt: "No item selected"
+      }
+    ) }),
+    !message ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(WrapperTpography, { size: adjustedSize, children: [
+      /* @__PURE__ */ jsx(
+        TypographyStyledTitle,
+        {
+          ownerState: { ...ownerState },
+          skeletonWidth: 100,
+          size: adjustedSize,
+          "data-testid": getPropDataTestId(NO_ITEM_SELECT_KEY_COMPONENT, NoItemSelectedSlots.typographyStyledTitle, dataTestId),
+          children: getLabel(DICTIONARY.LABEL_TITLE)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TypographyStyledDetail,
+        {
+          ownerState: { ...ownerState },
+          skeletonWidth: 200,
+          size: adjustedSize,
+          "data-testid": getPropDataTestId(NO_ITEM_SELECT_KEY_COMPONENT, NoItemSelectedSlots.typographyStyledDetail, dataTestId),
+          children: getLabel(DICTIONARY.LABEL_DETAIL)
+        }
+      )
+    ] }) }) : /* @__PURE__ */ jsx(LabelDetail, { children: message })
+  ] });
+}
+export {
+  NoItemSelected as N
+};

package/components/{NoItemSelected → ImageText/components/NoItemSelected}/NoItemSelected.styles.js

@@ -1,21 +1,5 @@
-import { g as getTypographyStyles } from "../../utils/getTypographyStyles.js";
+import { g as getTypographyStyles } from "../../../../utils/getTypographyStyles.js";
 const noItemSelectedStyles = {
-  /**
-   * 📦 Estilos para el contenedor principal del componente NoItemSelected 📦.
-   */
-  root: ({ theme }) => ({
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    height: "80%",
-    width: "100%",
-    maxWidth: "600px",
-    minWidth: "200px",
-    padding: "10px",
-    gap: theme.vars.size.baseSpacings.sp2,
-    minHeight: "60px"
-  }),
   /**
    * 📸 Estilos para la imagen del componente NoItemSelected 📸.
    */
@@ -77,15 +61,15 @@ const noItemSelectedStyles = {
   /**
    * 🎁 Estilos para el wrapper de la imagen de  NoItemSelect. 🎁
    */
-  noItemSelectedContainer: () => ({
-    justifyContent: "center",
+  noItemSelectedContainer: ({ ownerState }) => ({
+    visibility: ownerState?.isVisible ? "visible" : "hidden",
     display: "flex",
+    justifyContent: "center",
     height: "100%",
     width: "100%",
     maxWidth: "150px",
     maxHeight: "106px",
     minWidth: "70px",
-    minHeight: "50px",
     '& [class*="M4LImage-imgSkeleton"]': {
       opacity: 0
     },

package/components/{NoItemSelected → ImageText/components/NoItemSelected}/constant.js

@@ -1,4 +1,4 @@
-import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
+import { g as getComponentClasses } from "../../../../utils/getComponentSlotRoot.js";
 import { N as NoItemSelectedSlots } from "./slots/NoItemSelectedEnum.js";
 const NO_ITEM_SELECT_KEY_COMPONENT = "M4LNoItemSelected";
 const classNoItemSelected = getComponentClasses(NO_ITEM_SELECT_KEY_COMPONENT, NoItemSelectedSlots);

package/components/ImageText/components/NoItemSelected/index.js

@@ -0,0 +1 @@
+

package/components/{NoItemSelected → ImageText/components/NoItemSelected}/slots/NoItemSelectedEnum.d.ts

@@ -1,5 +1,4 @@
 export declare enum NoItemSelectedSlots {
-    root = "root",
     img = "img",
     typographyStyledTitle = "typographyStyledTitle",
     typographyStyledDetail = "typographyStyledDetail",

package/components/{NoItemSelected → ImageText/components/NoItemSelected}/slots/NoItemSelectedEnum.js

@@ -1,5 +1,4 @@
 var NoItemSelectedSlots = /* @__PURE__ */ ((NoItemSelectedSlots2) => {
-  NoItemSelectedSlots2["root"] = "root";
   NoItemSelectedSlots2["img"] = "img";
   NoItemSelectedSlots2["typographyStyledTitle"] = "typographyStyledTitle";
   NoItemSelectedSlots2["typographyStyledDetail"] = "typographyStyledDetail";

package/components/{NoItemSelected → ImageText/components/NoItemSelected}/slots/NoItemSelectedSlots.d.ts

@@ -1,16 +1,13 @@
-export declare const WrapperNoItemSelectedStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
-    ownerState?: (Partial<import('../types').NoItemSelectedOwnerState> & Record<string, unknown>) | undefined;
-}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const ImgStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Image').ImageProps, keyof import('../../Image').ImageProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+export declare const ImgStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../../Image').ImageProps, keyof import('../../../../Image').ImageProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').NoItemSelectedOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
-export declare const TypographyStyledTitle: 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> & Record<string, unknown> & {
+export declare const TypographyStyledTitle: 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> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').NoItemSelectedOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
-export declare const TypographyStyledDetail: 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> & Record<string, unknown> & {
+export declare const TypographyStyledDetail: 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> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').NoItemSelectedOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
-export declare const LabelDetail: import('@emotion/styled').StyledComponent<Pick<import('../../Label').LabelProps, keyof import('../../Label').LabelProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+export declare const LabelDetail: import('@emotion/styled').StyledComponent<Pick<import('../../../../Label').LabelProps, keyof import('../../../../Label').LabelProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').NoItemSelectedOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
 export declare const NoItemSelectedContainer: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {

package/components/{NoItemSelected → ImageText/components/NoItemSelected}/slots/NoItemSelectedSlots.js

@@ -2,13 +2,9 @@ import { styled } from "@mui/material/styles";
 import { N as NoItemSelectedSlots } from "./NoItemSelectedEnum.js";
 import { N as NO_ITEM_SELECT_KEY_COMPONENT } from "../constant.js";
 import { n as noItemSelectedStyles } from "../NoItemSelected.styles.js";
-import { T as Typography } from "../../mui_extended/Typography/Typography.js";
-import { L as Label } from "../../Label/Label.js";
-import { I as Image } from "../../Image/Image.js";
-const WrapperNoItemSelectedStyled = styled("div", {
-  name: NO_ITEM_SELECT_KEY_COMPONENT,
-  slot: NoItemSelectedSlots.root
-})(noItemSelectedStyles?.root);
+import { T as Typography } from "../../../../mui_extended/Typography/Typography.js";
+import { L as Label } from "../../../../Label/Label.js";
+import { I as Image } from "../../../../Image/Image.js";
 const ImgStyled = styled(Image, {
   name: NO_ITEM_SELECT_KEY_COMPONENT,
   slot: NoItemSelectedSlots.img
@@ -38,7 +34,6 @@ export {
   LabelDetail as L,
   NoItemSelectedContainer as N,
   TypographyStyledTitle as T,
-  WrapperNoItemSelectedStyled as W,
-  WrapperTpography as a,
-  TypographyStyledDetail as b
+  WrapperTpography as W,
+  TypographyStyledDetail as a
 };

package/components/{NoItemSelected → ImageText/components/NoItemSelected}/types.d.ts

@@ -1,9 +1,9 @@
 import { Theme, PaletteColor } from '@mui/material';
-import { M4LOverridesStyleRules } from '../../@types/augmentations';
+import { M4LOverridesStyleRules } from '../../../../@types/augmentations';
 import { NO_ITEM_SELECT_KEY_COMPONENT } from './constant';
 import { Sizes } from '@m4l/styles';
 import { NoItemSelectedSlots } from './slots/NoItemSelectedEnum';
-import { LabelProps } from '../Label';
+import { LabelProps } from '../../../Label';
 export interface NoItemSelectedProps extends Pick<LabelProps, 'label'> {
     image?: string;
     message?: string;

package/components/ImageText/hooks/useIsVisible/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Hook para verificar si el componente es visible en la pantalla.
+ * @param containerRef - Referencia al contenedor del componente.
+ * @returns true si el componente es visible, false en caso contrario.
+ */
+export declare const useIsVisible: (containerRef: React.RefObject<HTMLDivElement>) => boolean;

package/components/ImageText/hooks/useIsVisible/index.js

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

package/components/ImageText/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components/NoItemPrivileges';
+export * from './components/NoItemSelected';
+export * from './components/ImageTextContainer';

package/components/ImageText/index.js

@@ -0,0 +1 @@
+

package/components/ObjectLogs/helpers/Fields/filterFields.d.ts

@@ -0,0 +1,5 @@
+import { FilterField } from '@m4l/components';
+/**
+ * Opciones del filtro
+ */
+export declare const filterFieldsGenerator: (urlAssetsPrefix: string, otherApp?: boolean | undefined) => FilterField[];

package/components/ObjectLogs/helpers/Fields/filterFields.js

@@ -0,0 +1,81 @@
+import { endOfDay, startOfDay, startOfMonth } from "date-fns";
+import { D as DICTIONARY } from "../../dictionary.js";
+const filterFieldsGenerator = (urlAssetsPrefix, otherApp) => {
+  if (otherApp) {
+    return [
+      {
+        name: "createdAt",
+        dictionaryId: DICTIONARY.LABEL_CREATED_AT,
+        type: "datetime",
+        multiple: false,
+        presence: "initialized",
+        urlIcon: `${urlAssetsPrefix}/frontend/components/object_logs/assets/icons/email.svg`,
+        defaultOperand1: startOfDay(/* @__PURE__ */ new Date()),
+        defaultOperand2: endOfDay(/* @__PURE__ */ new Date())
+      },
+      {
+        name: "userId",
+        dictionaryId: DICTIONARY.LABEL_USER,
+        type: "string",
+        multiple: true,
+        presence: "optional",
+        urlIcon: `${urlAssetsPrefix}/frontend/components/object_logs/assets/icons/email.svg`
+      },
+      {
+        name: "logPreview",
+        dictionaryId: DICTIONARY.LABEL_LOG_PREVIEW,
+        type: "string",
+        multiple: true,
+        presence: "optional",
+        urlIcon: `${urlAssetsPrefix}/frontend/components/object_logs/assets/icons/log_preview.svg`
+      },
+      {
+        name: "logDetail",
+        dictionaryId: DICTIONARY.LABEL_LOG_DETAIL,
+        type: "string",
+        multiple: true,
+        presence: "optional",
+        urlIcon: `${urlAssetsPrefix}/frontend/components/object_logs/assets/icons/log_detail.svg`
+      }
+    ];
+  }
+  return [
+    {
+      name: "user_logs.created_at",
+      dictionaryId: DICTIONARY.LABEL_CREATED_AT,
+      type: "datetime",
+      multiple: false,
+      presence: "fixed",
+      urlIcon: `${urlAssetsPrefix}/frontend/components/object_logs/assets/icons/email.svg`,
+      defaultOperand1: startOfMonth(/* @__PURE__ */ new Date()),
+      defaultOperand2: endOfDay(/* @__PURE__ */ new Date())
+    },
+    {
+      name: "users.email",
+      dictionaryId: DICTIONARY.LABEL_USER,
+      type: "string",
+      multiple: true,
+      presence: "optional",
+      urlIcon: `${urlAssetsPrefix}/frontend/components/object_logs/assets/icons/email.svg`
+    },
+    {
+      name: "user_logs.log_preview",
+      dictionaryId: DICTIONARY.LABEL_LOG_PREVIEW,
+      type: "string",
+      multiple: true,
+      presence: "optional",
+      urlIcon: `${urlAssetsPrefix}/frontend/components/object_logs/assets/icons/log_preview.svg`
+    },
+    {
+      name: "user_logs.log_detail",
+      dictionaryId: DICTIONARY.LABEL_LOG_DETAIL,
+      type: "string",
+      multiple: true,
+      presence: "optional",
+      urlIcon: `${urlAssetsPrefix}/frontend/components/object_logs/assets/icons/log_detail.svg`
+    }
+  ];
+};
+export {
+  filterFieldsGenerator as f
+};

package/components/ObjectLogs/hooks/useDetailFormatter.js

@@ -14,7 +14,7 @@ const useDetailFormatter = (type) => {
     (rowProps) => {
       let logId;
       if (type === "m4l") {
-        logId = rowProps.row.id;
+        logId = rowProps.id;
       } else {
         logId = rowProps.row.uuid;
       }

package/components/ObjectLogs/hooks/useFilterAndSort.d.ts

@@ -0,0 +1,15 @@
+import { ObjectLogsByOtherProps } from '../subcomponents/ObjectLogsByOthers/ObjectLogsByOthers';
+interface UseFilterAndSortProps extends Partial<ObjectLogsByOtherProps> {
+    setBackendQueryParams: React.Dispatch<React.SetStateAction<Record<string, any>>>;
+    Refresh: () => void;
+    otherApp?: boolean;
+}
+/**
+ * Hook para obtener DynamicFilter and Sort
+ */
+export declare function useFilterAndSort(props: UseFilterAndSortProps): {
+    leftActions: import("react/jsx-runtime").JSX.Element;
+    visibleCustomHeader: boolean;
+    customHeaderComponent: import("react/jsx-runtime").JSX.Element;
+};
+export {};

package/components/ObjectLogs/hooks/useFilterAndSort.js

@@ -0,0 +1,51 @@
+import { useCallback } from "react";
+import { getRawFiltersForNetwork, useDynamicFilterAndSort } from "@m4l/components";
+import { useEnvironment } from "@m4l/core";
+import { f as filterFieldsGenerator } from "../helpers/Fields/filterFields.js";
+function useFilterAndSort(props) {
+  const { setBackendQueryParams, Refresh, otherApp = false, resourceTypeId, resourceSerialId } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const onChangeFilterSort = useCallback((params) => {
+    const fixedFields = [
+      {
+        n: "resourceTypeId",
+        o: "c",
+        o1: resourceTypeId,
+        ft: "string"
+      },
+      {
+        n: "resourceSerialId",
+        o: "c",
+        o1: resourceSerialId,
+        ft: "string"
+      }
+    ];
+    const allFields = [...fixedFields, ...params.eventFilters?.rawFilters || []];
+    if (otherApp) {
+      setBackendQueryParams({
+        f: getRawFiltersForNetwork(allFields, "snakeCase")
+      });
+    } else {
+      setBackendQueryParams((prevParams) => ({
+        ...prevParams,
+        f: getRawFiltersForNetwork(prevParams.eventFilters?.rawFilters || [], "snakeCase")
+      }));
+    }
+    Refresh();
+  }, [Refresh, setBackendQueryParams, otherApp, resourceTypeId, resourceSerialId]);
+  const { leftActions, visibleCustomHeader, customHeaderComponent } = useDynamicFilterAndSort({
+    onChangeFilterSort,
+    fields: filterFieldsGenerator(`${host_static_assets}/${environment_assets}`, otherApp),
+    withAllField: true,
+    visibleRefresh: true,
+    filterSortAutomatic: false
+  });
+  return {
+    leftActions,
+    visibleCustomHeader,
+    customHeaderComponent
+  };
+}
+export {
+  useFilterAndSort as u
+};

package/components/ObjectLogs/slots/ObjectLogsSlots.js

@@ -13,7 +13,7 @@ const ContainerWrapperStyled = styled("div", {
   name: OBJECT_LOGS_KEY_COMPONENT,
   slot: ObjectLogsSlots.root
 })(objectLogsStyles?.root);
-const ActionsWrapperStyled = styled("div", {
+styled("div", {
   name: OBJECT_LOGS_KEY_COMPONENT,
   slot: ObjectLogsSlots.actionsWrapperStyled
 })(objectLogsStyles?.actionsWrapperStyled);
@@ -54,7 +54,6 @@ styled(ReactJson, {
   slot: ObjectLogsSlots.reactJsonSlot
 })(objectLogsStyles?.reactJsonSlot);
 export {
-  ActionsWrapperStyled as A,
   ContainerWrapperStyled as C,
   DetailDialogComponent as D,
   GridWrapperStyled as G,

package/components/ObjectLogs/subcomponents/ObjectLogsByM4L/ObjectLogsByM4L.js

@@ -1,20 +1,16 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { D as DataGrid } from "../../../DataGrid/DataGrid.js";
-import { useEnvironment } from "@m4l/core";
-import { D as DynamicFilter } from "../../../DynamicFilter/DynamicFilter.js";
 import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.js";
-import { C as ContainerWrapperStyled, A as ActionsWrapperStyled, G as GridWrapperStyled } from "../../slots/ObjectLogsSlots.js";
-import { D as DICTIONARY } from "../../dictionary.js";
+import { C as ContainerWrapperStyled, G as GridWrapperStyled } from "../../slots/ObjectLogsSlots.js";
 import { usePaginate } from "@m4l/graphics";
 import { u as useObjectLogsColumns } from "../../hooks/useObjectLogsColumns.js";
 import { a as OBJECT_LOGS_M4L_END_POINT, O as OBJECT_LOGS_KEY_COMPONENT } from "../../constants.js";
 import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
-import { endOfDay, startOfMonth } from "date-fns";
+import { u as useFilterAndSort } from "../../hooks/useFilterAndSort.js";
 import { O as ObjectLogsSlots } from "../../slots/ObjectLogsEnum.js";
 function ObjectLogsByM4L(props) {
   const { resourceId, objectId, dataTestId = "" } = props;
-  const { host_static_assets, environment_assets } = useEnvironment();
   const [backendQueryParams, setBackendQueryParams] = useState(() => {
     return { resource_id: resourceId, object_id: objectId };
   });
@@ -31,92 +27,47 @@ function ObjectLogsByM4L(props) {
     clearRows();
     setBackendQueryParams({ resource_id: resourceId, object_id: objectId });
   }, [resourceId, objectId]);
-  const onChangeFilter = (_initFilters, rawFilters) => {
-    setBackendQueryParams((oldParms) => ({ ...oldParms, f: rawFilters }));
-    Refresh();
-  };
-  return /* @__PURE__ */ jsxs(
+  const { leftActions, visibleCustomHeader, customHeaderComponent } = useFilterAndSort({ setBackendQueryParams, Refresh, otherApp: false });
+  return /* @__PURE__ */ jsx(
     ContainerWrapperStyled,
     {
       ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: `m4ldatagrid-${dataTestId}` } : {},
       ...getPropDataTestId(OBJECT_LOGS_KEY_COMPONENT, ObjectLogsSlots.root, dataTestId),
-      children: [
-        /* @__PURE__ */ jsx(ActionsWrapperStyled, { children: /* @__PURE__ */ jsx(
-          DynamicFilter,
-          {
-            withAllField: true,
-            onChangeFilters: onChangeFilter,
-            automatic: false,
-            fields: [
-              {
-                name: "user_logs.created_at",
-                dictionaryId: DICTIONARY.LABEL_CREATED_AT,
-                type: "datetime",
-                multiple: false,
-                presence: "fixed",
-                urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/email.svg`,
-                defaultOperand1: startOfMonth(/* @__PURE__ */ new Date()),
-                defaultOperand2: endOfDay(/* @__PURE__ */ new Date())
-              },
-              {
-                name: "users.email",
-                dictionaryId: DICTIONARY.LABEL_USER,
-                type: "string",
-                multiple: true,
-                presence: "optional",
-                urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/email.svg`
-              },
-              {
-                name: "user_logs.log_preview",
-                dictionaryId: DICTIONARY.LABEL_LOG_PREVIEW,
-                type: "string",
-                multiple: true,
-                presence: "optional",
-                urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/log_preview.svg`
-              },
-              {
-                name: "user_logs.log_detail",
-                dictionaryId: DICTIONARY.LABEL_LOG_DETAIL,
-                type: "string",
-                multiple: true,
-                presence: "optional",
-                urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/log_detail.svg`
-              }
-            ],
-            initialAppliedFilters: []
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          GridWrapperStyled,
-          {
-            children: /* @__PURE__ */ jsx(
-              DataGrid,
-              {
-                id: "users_logs_list",
-                dataTestId,
-                columns,
-                rows,
-                rowKeyGetter: (row) => row.id,
-                withActions: true,
-                actionsProps: {
-                  withPager: true,
-                  withLocalFilters: true,
-                  pagerOptions: {
-                    records: rows.length,
-                    totalRecords: pagerState.totalRecords,
-                    rowsPerPageOptions: [1, 2, 3, 4, 5, 10, 25],
-                    page: pagerState.page,
-                    rowsPerPage: pagerState.rowsPerPage,
-                    onPageChange,
-                    onRowsPerPageChange
-                  }
+      role: "grid",
+      "aria-label": "object-logs",
+      children: /* @__PURE__ */ jsx(
+        GridWrapperStyled,
+        {
+          children: /* @__PURE__ */ jsx(
+            DataGrid,
+            {
+              id: "users_logs_list",
+              dataTestId,
+              columns,
+              rows,
+              rowKeyGetter: (row) => row.id,
+              visibleCustomHeader,
+              customHeader: customHeaderComponent,
+              withActions: true,
+              actionsProps: {
+                leftActions,
+                withPager: true,
+                withLocalFilters: true,
+                pagerOptions: {
+                  records: rows.length,
+                  totalRecords: pagerState.totalRecords,
+                  rowsPerPageOptions: [1, 2, 3, 4, 5, 10, 25],
+                  page: pagerState.page,
+                  rowsPerPage: pagerState.rowsPerPage,
+                  onPageChange,
+                  onRowsPerPageChange
                 }
-              },
-              "users_list_logs"
-            )
-          }
-        )
-      ]
+              }
+            },
+            "users_list_logs"
+          )
+        }
+      )
     }
   );
 }