@m4l/components 9.2.17 → 9.2.19

package/hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js

@@ -1,20 +1,34 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useEnvironment } from "@m4l/core";
-import { T as ToggleIconButton } from "../../components/mui_extended/ToggleIconButton/ToggleIconButton.js";
-import { I as ICON_PATH_FILTER, a as ICON_PATH_SORT, A as ASSETS } from "./icons.js";
 import { useState, useRef, useMemo, useCallback } from "react";
 import { D as DynamicFilter } from "../../components/DynamicFilter/DynamicFilter.js";
 import { D as DynamicSort } from "../../components/DynamicSort/DynamicSort.js";
-import { S as StackLeftActionsStyled, a as StackRightActionsStyled, b as StackCustomHeaderStyled } from "./slots/DynamicFilterAndSortSlots.js";
 import { B as Badge } from "../../components/mui_extended/Badge/Badge.js";
+import { I as IconButton } from "../../components/mui_extended/IconButton/IconButton.js";
+import { T as ToggleIconButton } from "../../components/mui_extended/ToggleIconButton/ToggleIconButton.js";
 import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
 import { C as COOKIE_APPLIED_FILTERS, a as COOKIE_APPLIED_SORTS, M as M4LDYNAMIC_KEY_FILTER_AND_SORT } from "./constants.js";
+import { I as ICON_PATH_FILTER, a as ICON_PATH_SORT, A as ASSETS } from "./icons.js";
 import { D as DynamicFilterAndSortSlots } from "./slots/DynamicFilterAndSortEnum.js";
-import { I as IconButton } from "../../components/mui_extended/IconButton/IconButton.js";
+import { S as StackLeftActionsStyled, a as StackRightActionsStyled, b as StackCustomHeaderStyled } from "./slots/DynamicFilterAndSortSlots.js";
 import { deepEqual } from "fast-equals";
 import { g as getPurgedCookie } from "./helpers.js";
 const useDynamicFilterAndSort = (props) => {
-  const { fields, sorts, onChangeFilterSort, dataTestId, withAllField, rightActions, initialFilterToggleed = true, initialSortToggleed = true, prefixCookie, setCookie, getCookie } = props;
+  const {
+    fields,
+    sorts,
+    onChangeFilterSort,
+    dataTestId,
+    withAllField,
+    rightActions,
+    initialFilterToggleed = true,
+    initialSortToggleed = true,
+    prefixCookie,
+    setCookie,
+    getCookie,
+    filterSortAutomatic = true,
+    visibleRefresh
+  } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
   const [togglesLeftActions, setTogglesLeftActions] = useState(() => ({ filter: initialFilterToggleed, sort: initialSortToggleed }));
   const [initialAppliedFilters] = useState(() => {
@@ -24,6 +38,8 @@ const useDynamicFilterAndSort = (props) => {
     return getPurgedCookie(getCookie?.(prefixCookie ? `${prefixCookie}_${COOKIE_APPLIED_SORTS}` : COOKIE_APPLIED_SORTS));
   });
   const refOnChangeFilterSort = useRef(0);
+  const fireOnChangeFilterRef = useRef(null);
+  const fireOnChangeSortRef = useRef(null);
   const [invisibleBadge, setInvisibleBadge] = useState(() => ({
     filter: initialAppliedFilters?.length === 0,
     sort: initialAppliedSorts?.length === 0
@@ -66,8 +82,14 @@ const useDynamicFilterAndSort = (props) => {
     onChangeFilterSort(eventRefs.current);
   }, [onChangeFilterSort, prefixCookie, setCookie, setInvisibleBadge]);
   const onRefresh = useCallback(() => {
+    if (fireOnChangeFilterRef.current) {
+      fireOnChangeFilterRef.current.fireOnChangeFilter();
+    }
+    if (fireOnChangeSortRef.current) {
+      fireOnChangeSortRef.current.fireOnChangeSort();
+    }
     onChangeFilterSort(eventRefs.current);
-  }, [onChangeFilterSort]);
+  }, [onChangeFilterSort, fireOnChangeFilterRef]);
   const leftActions = useMemo(() => /* @__PURE__ */ jsxs(StackLeftActionsStyled, { direction: "row", ownerState: {}, ...getPropDataTestId(M4LDYNAMIC_KEY_FILTER_AND_SORT, DynamicFilterAndSortSlots.stackLeftActions, dataTestId), children: [
     /* @__PURE__ */ jsx(Badge, { badgeContent: "", size: "small", color: "primary", invisible: invisibleBadge.filter, children: /* @__PURE__ */ jsx(ToggleIconButton, { icon: `${host_static_assets}/${environment_assets}/${ICON_PATH_FILTER}`, isToggled: togglesLeftActions.filter, onToggle: () => handleToggles("filter") }) }),
     /* @__PURE__ */ jsx(Badge, { badgeContent: "", size: "small", color: "primary", invisible: invisibleBadge.sort, children: /* @__PURE__ */ jsx(ToggleIconButton, { icon: `${host_static_assets}/${environment_assets}/${ICON_PATH_SORT}`, isToggled: togglesLeftActions.sort, onToggle: () => handleToggles("sort") }) })
@@ -92,9 +114,9 @@ const useDynamicFilterAndSort = (props) => {
     }
   ), [dataTestId, rightActions, sortIconUrl, onRefresh]);
   const dynamicsFiltersSorts = useMemo(() => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(DynamicFilter, { fields, initialAppliedFilters, onChangeFilters: handleChangeFilters, withAllField }),
-    sorts ? /* @__PURE__ */ jsx(DynamicSort, { fields: sorts, initialAppliedSorts, onChangeSorts: handleChangeSorts }) : null
-  ] }), [fields, sorts, initialAppliedFilters, initialAppliedSorts, handleChangeFilters, handleChangeSorts, withAllField]);
+    /* @__PURE__ */ jsx(DynamicFilter, { ref: fireOnChangeFilterRef, visibleRefresh, automatic: filterSortAutomatic, fields, initialAppliedFilters, onChangeFilters: handleChangeFilters, withAllField }),
+    sorts ? /* @__PURE__ */ jsx(DynamicSort, { ref: fireOnChangeSortRef, visibleRefresh, automatic: filterSortAutomatic, fields: sorts, initialAppliedSorts, onChangeSorts: handleChangeSorts }) : null
+  ] }), [fields, sorts, initialAppliedFilters, initialAppliedSorts, handleChangeFilters, handleChangeSorts, withAllField, filterSortAutomatic, visibleRefresh]);
   const customHeaderComponent = useMemo(() => /* @__PURE__ */ jsx(StackCustomHeaderStyled, { direction: "row", ownerState: { showDynamicFilter: togglesLeftActions.filter, showDynamicSort: togglesLeftActions.sort }, ...getPropDataTestId(M4LDYNAMIC_KEY_FILTER_AND_SORT, DynamicFilterAndSortSlots.stackCustomHeader, dataTestId), children: dynamicsFiltersSorts }), [togglesLeftActions]);
   return {
     leftActions,

package/index.js

@@ -58,9 +58,9 @@ import { u as u12 } from "./components/DataGrid/formatters/ColumnChipStatusForma
 import { D as D3 } from "./components/DragResizeWindowRND/DragResizeWindowRND.js";
 import { d as d2 } from "./components/DragResizeWindowRND/classes/index.js";
 import { a as a4 } from "./components/DynamicFilter/dictionary.js";
-import { a as a5, g as g7 } from "./components/DynamicFilter/helpers/frontEndHelpers.js";
+import { g as g7, a as a5 } from "./components/DynamicFilter/helpers/frontEndHelpers.js";
 import { D as D4 } from "./components/DynamicFilter/DynamicFilter.js";
-import { b as b3 } from "./components/DynamicSort/dictionary.js";
+import { a as a6 } from "./components/DynamicSort/dictionary.js";
 import { S as S2 } from "./components/DynamicSort/helpers/frontEndHelpers.js";
 import { D as D5 } from "./components/DynamicSort/DynamicSort.js";
 import { R } from "./components/extended/React-Resizable/Resizable/Resizable.js";
@@ -91,7 +91,7 @@ import { S as S5 } from "./components/mui_extended/Stack/Stack.js";
 import { T as T4 } from "./components/mui_extended/Tab/Tab.js";
 import { T as T5 } from "./components/mui_extended/Tabs/Tabs.js";
 import { T as T6 } from "./components/mui_extended/TabContent/TabContent.js";
-import { T as T7, a as a6 } from "./components/mui_extended/TabContext/index.js";
+import { T as T7, a as a7 } from "./components/mui_extended/TabContext/index.js";
 import { T as T8 } from "./components/mui_extended/Typography/Typography.js";
 import { t } from "./components/mui_extended/ToggleButton/ToggleButton.styles.js";
 import { T as T9 } from "./components/mui_extended/ToggleButton/ToggleButton.js";
@@ -153,8 +153,8 @@ import { L as L8 } from "./components/LinearProgressIndeterminate/LinearProgress
 import { L as L9 } from "./components/Loadable/index.js";
 import { L as L10 } from "./components/LoadingError/LoadingError.js";
 import { g as g19 } from "./components/LoadingError/dictionary.js";
-import { a as a7 } from "./components/MenuActions/dictionary.js";
-import { a as a8, M as M3 } from "./components/MenuActions/MenuActions.js";
+import { a as a8 } from "./components/MenuActions/dictionary.js";
+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 g20 } from "./components/MFLoader/dictionary.js";
@@ -165,7 +165,7 @@ import { d as d4, g as g22 } from "./components/ObjectLogs/dictionary.js";
 import { P as P8 } from "./components/PaperForm/PaperForm.js";
 import { P as P9 } from "./components/PDFViewer/PDFViewer.js";
 import { u as u14 } from "./components/popups/components/PopupsProvider/hooks/usePopupsStore.js";
-import { a as a9, P as P10 } from "./components/popups/components/PopupsProvider/contexts/PopupsContext/PopupsContext.js";
+import { a as a10, P as P10 } from "./components/popups/components/PopupsProvider/contexts/PopupsContext/PopupsContext.js";
 import { P as P11 } from "./components/popups/components/PopupsViewer/PopupsViewer.js";
 import { P as P12 } from "./components/PrintingSystem/PrintingSystem.js";
 import { P as P13 } from "./components/PropertyValue/PropertyValue.js";
@@ -175,18 +175,18 @@ import { T as T18 } from "./components/ToastContainer/ToastContainer.js";
 import { T as T19 } from "./components/ToastContainer/subcomponents/ToastMessage/ToastMessage.js";
 import { W } from "./components/WindowBase/WindowBase.js";
 import { u as u15 } from "./components/WindowBase/hooks/useWindowToolsMF/index.js";
-import { a as a10, u as u16 } from "./components/WindowBase/hooks/useDynamicMFParameters/index.js";
-import { M as M6, W as W2, a as a11 } from "./components/WindowBase/contexts/WindowToolsMFContext/WindowToolsMFContext.js";
+import { a as a11, u as u16 } 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 { c as c3 } from "./components/WindowBase/contexts/DynamicMFParmsContext/store.js";
-import { D as D9, a as a12, M as M7 } from "./components/WindowBase/contexts/DynamicMFParmsContext/DynamicMFParmsContext.js";
+import { D as D9, 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 a13, g as g23 } from "./components/ModalDialog/dictionary.js";
+import { a as a14, g as g23 } from "./components/ModalDialog/dictionary.js";
 import { M as M8 } from "./components/ModalDialog/ModalDialog.js";
 import { F as F2, R as R22, u as u17 } from "./components/hook-form/RHFormContext/index.js";
 import { g as g24 } from "./components/hook-form/RHFormContext/dictionary.js";
 import { u as u18 } from "./contexts/AppearanceComponentContext/useAppearanceComponentStore.js";
 import { A as A16 } from "./contexts/AppearanceComponentContext/AppearanceComponentContext.js";
-import { a as a14, M as M9 } from "./contexts/ModalContext/index.js";
+import { a as a15, M as M9 } from "./contexts/ModalContext/index.js";
 import { u as u19 } from "./hooks/useFormAddEdit/index.js";
 import { u as u20 } from "./hooks/useModal/index.js";
 import { u as u21 } from "./hooks/useTab/index.js";
@@ -196,7 +196,7 @@ import { u as u23 } from "./hooks/useInterval/index.js";
 import { u as u24 } from "./hooks/useComponentSize/useComponentSize.js";
 import { u as u25 } from "./hooks/useFormReadyForUpdate/index.js";
 import { u as u26 } from "./hooks/useStateRef/index.js";
-import { a as a15 } from "./hooks/useSvgColor/constants.js";
+import { a as a16 } from "./hooks/useSvgColor/constants.js";
 import { u as u27 } from "./hooks/useSvgColor/useSvgColor.js";
 import { u as u28 } from "./hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js";
 import { u as u29 } from "./hooks/useDataGridPersistence/useDataGridPersistence.js";
@@ -206,9 +206,9 @@ import { g as g26 } from "./utils/getComponentUtilityClass.js";
 import { g as g27 } from "./utils/getPaletteColor.js";
 import { g as g28 } from "./utils/getTypographyStyles.js";
 import { g as g29 } from "./utils/getIconColor.js";
-import { a as a16 } from "./utils/getSizeStyles/getSizeStyles.js";
+import { a as a17 } from "./utils/getSizeStyles/getSizeStyles.js";
 import { O as O2 } from "./utils/ObjectQueue.js";
-import { g as g30, a as a17 } from "./utils/getComponentSlotRoot.js";
+import { g as g30, a as a18 } from "./utils/getComponentSlotRoot.js";
 import { f } from "./utils/formatDistanceToNow/formatDistanteToNow.js";
 import { g as g31 } from "./utils/getValidDate.js";
 import { g as g32 } from "./utils/getNullGuard.js";
@@ -261,7 +261,7 @@ export {
   D3 as DragResizeWindowRND,
   D4 as DynamicFilter,
   D9 as DynamicMFParmsContext,
-  a12 as DynamicMFParmsProvider,
+  a13 as DynamicMFParmsProvider,
   D5 as DynamicSort,
   F as FixedSizeList,
   F2 as FormProviderCustom,
@@ -287,10 +287,10 @@ export {
   M4 as MFIsolationApp,
   M5 as MFLoader,
   M7 as MemonizedDynamicMFParmsProvider,
-  a8 as MemonizedMenuActions,
+  a9 as MemonizedMenuActions,
   M6 as MemonizedWindowToolsMFContext,
   M3 as MenuActions,
-  a14 as ModalContext,
+  a15 as ModalContext,
   M8 as ModalDialog,
   M9 as ModalProvider,
   M as MotionContainer,
@@ -307,7 +307,7 @@ export {
   P7 as PeriodRootStyled,
   P4 as PointsFormatter,
   P3 as Popover,
-  a9 as PopupsContext,
+  a10 as PopupsContext,
   P10 as PopupsProvider,
   P11 as PopupsViewer,
   P6 as PriceFormatter,
@@ -336,7 +336,7 @@ export {
   R as Resizable,
   R2 as ResizableBox,
   R3 as Responsive,
-  a15 as SKELETON_SVG_ICON,
+  a16 as SKELETON_SVG_ICON,
   S7 as ScrollBar,
   S as SectionCommercial,
   S6 as SelectStyled,
@@ -350,7 +350,7 @@ export {
   T4 as Tab,
   T6 as TabContent,
   T7 as TabContext,
-  a6 as TabProvider,
+  a7 as TabProvider,
   T5 as Tabs,
   T2 as TextEditor,
   T17 as TextFieldStyled,
@@ -370,7 +370,7 @@ export {
   W as WindowBase,
   W3 as WindowConfirm,
   W2 as WindowToolsMFContext,
-  a11 as WindowToolsMFProvider,
+  a12 as WindowToolsMFProvider,
   c2 as addLayoutItemToBreakPointIfNoExists,
   d3 as addLayoutItemToBreakPoints,
   c4 as capitalizeFirstLetter,
@@ -387,27 +387,27 @@ export {
   g3 as getAreasDictionary,
   g4 as getCommonActionsDictionary,
   g30 as getComponentClasses,
-  a17 as getComponentSlotRoot,
+  a18 as getComponentSlotRoot,
   g26 as getComponentUtilityClass,
   g5 as getDataGridComponentsDictionary,
   g6 as getDataGridRowsFromSet,
   g14 as getDistanceToNowFormatterComponentsDictionary,
   a4 as getDynamicFilterComponentsDictionary,
-  b3 as getDynamicSortComponentsDictionary,
-  a5 as getFilterGroupFieldsByName,
+  a6 as getDynamicSortComponentsDictionary,
+  g7 as getFilterGroupFieldsByName,
   g24 as getFormComponentsDictionary,
   g12 as getFormatConcatenated,
   g9 as getFormatDate,
   g11 as getFormatPoints,
   g13 as getFormatPrice,
   g15 as getFormattersComponentsDictionary,
-  a16 as getHeightSizeStyles,
+  a17 as getHeightSizeStyles,
   g29 as getIconColor,
-  g7 as getIsIfInDynamicFilter,
+  a5 as getIsIfInDynamicFilter,
   g19 as getLoadingErrorComponentsDictionary,
   g20 as getMFLoaderComponentsDictionary,
-  a7 as getMenuActionsComponentsDictionary,
-  a13 as getModalDialogComponentsDictionary,
+  a8 as getMenuActionsComponentsDictionary,
+  a14 as getModalDialogComponentsDictionary,
   g23 as getModalDictionary,
   g21 as getNoItemSelectedComponentsDictionary,
   g32 as getNullGuard,
@@ -443,7 +443,7 @@ export {
   u17 as useCustomForm,
   u29 as useDataGridPersistence,
   u28 as useDynamicFilterAndSort,
-  a10 as useDynamicMFParameters,
+  a11 as useDynamicMFParameters,
   u16 as useDynamicMFParametersStore,
   u19 as useFormAddEdit,
   u22 as useFormFocus,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.17",
+  "version": "9.2.19",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0  --no-warn-ignored"
@@ -67,7 +67,7 @@
     "react-dom": "^18.0.0",
     "storybook": "^8.3.4",
     "attr-accept": "2.2.2",
-    "@vitejs/plugin-react": "^4.0.0"
+    "@vitejs/plugin-react": "4.3.4"
   },
   "overrides": {
     "glob": "^10.4.5",

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

@@ -24,7 +24,14 @@ export declare const DatagridWithFormatters: Story;
  */
 export declare const NoPager: Story;
 /**
- * DataGrid con leftActions y rightActions
+ * DataGrid con leftActions, rightActions y
+ * Filter y Sort en busqueda automatica
  */
-export declare const CustomHeader: Story;
+export declare const CustomHeaderFilterSortAutomatic: Story;
+/**
+ * DataGrid con leftActions, rightActions y
+ * Filter y Sort en busqueda manual
+ */
+export declare const CustomHeaderFilterSortManual: Story;
+export declare const DynamicColumns: Story;
 export default meta;

package/storybook/components/DataGrid/subcomponents/DataGridRender.d.ts

@@ -5,6 +5,9 @@ interface DataGridRenderProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> {
     seedProps: SeedProps;
     rowsSelecteds?: boolean;
     withCustomHeader?: boolean;
+    dynamicColumns?: boolean;
+    filterSortAutomatic?: boolean;
+    visibleRefreshFilterSort?: boolean;
 }
 /**
  * Componente que renderiza el DataGrid para el storybook

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

@@ -11,6 +11,10 @@ export declare const Base: Story;
  * DynamicFilter With props `automatic=true`
  */
 export declare const WithAutomatic: Story;
+/**
+ * DynamicFilter With props `visibleRefresh=true`
+ */
+export declare const WithAutomaticVisibleRefreshFalse: Story;
 /**
  * DynamicFilter With props `withAllField=true`
  */

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

@@ -4,7 +4,7 @@ declare const meta: Meta<typeof DynamicSort>;
 export default meta;
 type Story = StoryObj<typeof DynamicSort>;
 /**
- * Base DynamicSort component
+ * Base DynamicSort component is automatic in false
  */
 export declare const Base: Story;
 /**
@@ -23,3 +23,7 @@ export declare const WithFixedField: Story;
  * DynamicFilter With props `automatic=true`
  */
 export declare const WithAutomatic: Story;
+/**
+ * DynamicFilter With props `visibleRefresh=true`
+ */
+export declare const WithAutomaticVisibleRefreshFalse: Story;