fastapi-rtk 0.1.23 → 0.1.25

package/dist/core/esm/Tables/NextGenDataGrid/hooks/useColumns/ColumnHeaderFilterInput/ColumnHeaderFilterInput.mjs

@@ -1,14 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import classes from "./headerinput.module.css.mjs";
-import { DEBOUNCE_DELAY } from "fastapi-rtk/constants";
+import { useSyncValues } from "fastapi-rtk/hooks";
 import { getValueOrDefault, parseFromValuesOrFunc } from "fastapi-rtk/utils";
 import { Tooltip, Indicator, CloseButton } from "@mantine/core";
 import { useField } from "@mantine/form";
-import { useElementSize, useMergedRef, useDebouncedCallback, useMounted } from "@mantine/hooks";
+import { useElementSize, useMergedRef, useDidUpdate } from "@mantine/hooks";
 import { clsx } from "../../../../../../../.external/esm/clsx@2.1.1/clsx/dist/clsx.mjs";
-import { forwardRef, cloneElement, useMemo, useRef, useCallback, useEffect } from "react";
+import { forwardRef, cloneElement, useMemo, useRef } from "react";
 import { useApi } from "../../../../../hooks/api/useApi.mjs";
-import { useAuth } from "../../../../../hooks/auth/useAuth.mjs";
 import { getProps } from "../../../utils.mjs";
 import { getBasicInput } from "../utils.mjs";
 import { HeaderInput } from "./HeaderInput.mjs";
@@ -34,83 +33,111 @@ function ColumnHeaderFilterInput({
   children,
   opr,
   enableFilterModes,
+  filters,
   filterProps,
   filterState,
-  onFilterClear,
-  onFilterMount,
-  filters,
+  filterSync,
+  updateQueryParams,
   actionIconProps,
   functionProps,
   mrtProps
 }) {
+  var _a, _b;
   const { column } = mrtProps;
-  const { info, queryParams } = useApi();
-  const api = useApi();
-  const auth = useAuth();
+  const { info, queryParams, setQueryParams } = useApi();
   const schema = useMemo(() => {
-    var _a, _b;
-    return (_b = (_a = info == null ? void 0 : info.filters) == null ? void 0 : _a[column.id]) == null ? void 0 : _b.schema;
+    var _a2, _b2;
+    return (_b2 = (_a2 = info == null ? void 0 : info.filters) == null ? void 0 : _a2[column.id]) == null ? void 0 : _b2.schema;
   }, [column.id, info == null ? void 0 : info.filters]);
-  const debouncedOnValueChange = useDebouncedCallback((value) => {
-    filterState == null ? void 0 : filterState.onChange(value);
-    column.setFilterValue(value);
-  }, (filterState == null ? void 0 : filterState.delay) ?? DEBOUNCE_DELAY);
-  const field = useField({ onValueChange: debouncedOnValueChange });
-  const lastOpr = useRef(opr);
-  if (lastOpr.current !== opr) {
-    lastOpr.current = opr;
-    console.log("resetting field");
-    field.reset();
-  }
-  const handleClear = useCallback(() => {
-    console.log("resetting field");
-    field.reset();
-    column.setFilterValue(void 0);
-    onFilterClear == null ? void 0 : onFilterClear();
-  }, []);
-  useEffect(() => {
-    if (!filterState) {
-      return;
-    }
-    field.setValue(filterState == null ? void 0 : filterState.value);
-  }, [filterState == null ? void 0 : filterState.value]);
-  const isMounted = useMounted();
-  useEffect(() => {
-    if (!isMounted || filterState) {
-      return;
-    }
-    const tableFilterValue = column.getFilterValue();
-    if (tableFilterValue === field.value) {
-      return;
-    }
-    if (tableFilterValue === void 0) {
-      handleClear();
-    } else {
-      field.getInputProps().onChange(tableFilterValue);
-    }
-  }, [column.getFilterValue()]);
-  const currentHeaderFilter = useMemo(
-    () => queryParams == null ? void 0 : queryParams.filters.find((filter) => filter.col === column.id && filter.opr === opr),
-    [column.id, opr, queryParams == null ? void 0 : queryParams.filters]
+  const field = useField({ mode: "controlled" });
+  useSyncValues(
+    [
+      {
+        value: field.getValue(),
+        onChange: field.getInputProps().onChange,
+        log: (value) => console.log(`Field value changed to: ${value}`)
+      },
+      ...filterState ? [
+        {
+          ...filterState,
+          log: (value) => console.log(`filterState value changed to: ${value}`)
+        }
+      ] : [],
+      {
+        value: column.getFilterValue(),
+        onChange: column.setFilterValue,
+        log: (value) => console.log(`Column filter value changed to: ${value}`)
+      },
+      ...updateQueryParams ? [
+        {
+          value: (_b = (_a = queryParams == null ? void 0 : queryParams.filters) == null ? void 0 : _a.find((qpFilter) => qpFilter.id === column.id)) == null ? void 0 : _b.value,
+          onChange: (value) => {
+            setQueryParams((prev) => {
+              const newFilters = (prev == null ? void 0 : prev.filters) || [];
+              const newFilter = {
+                id: column.id,
+                col: column.id,
+                opr,
+                value
+              };
+              if (value === void 0) {
+                return { ...prev, filters: newFilters.filter((qpFilter) => qpFilter.id !== newFilter.id) };
+              }
+              const existingFilterIndex = newFilters.findIndex((qpFilter) => qpFilter.id === newFilter.id);
+              if (existingFilterIndex > -1) {
+                newFilters[existingFilterIndex] = newFilter;
+              } else {
+                newFilters.push(newFilter);
+              }
+              return { ...prev, filters: newFilters };
+            });
+          },
+          log: (value) => console.log(`Query Params filter value changed to: ${value}`)
+        }
+      ] : []
+    ],
+    filterSync
   );
-  useEffect(() => {
-    if (!isMounted || filterState) {
-      return;
-    }
-    if (!currentHeaderFilter) {
-      handleClear();
+  const lastOpr = useRef(opr);
+  useDidUpdate(() => {
+    var _a2;
+    if (opr !== lastOpr.current) {
+      lastOpr.current = opr;
+      if (filterState) {
+        (_a2 = filterState.onOprChange) == null ? void 0 : _a2.call(filterState, { value: filterState.value, opr });
+        if (updateQueryParams) {
+          setQueryParams((prev) => {
+            var _a3;
+            return {
+              ...prev,
+              filters: (_a3 = prev == null ? void 0 : prev.filters) == null ? void 0 : _a3.map((qpFilter) => {
+                if (qpFilter.id === column.id) {
+                  return {
+                    ...qpFilter,
+                    opr,
+                    // Update the operator
+                    value: field.getValue()
+                    // Ensure the value is updated from the field
+                  };
+                }
+                return qpFilter;
+              })
+            };
+          });
+        }
+      } else {
+        field.reset();
+      }
     }
-  }, [currentHeaderFilter]);
-  useEffect(() => {
-    onFilterMount == null ? void 0 : onFilterMount({ api: api.getState(), auth: auth.getState(), mrtProps });
-  }, [onFilterMount]);
+  }, [opr]);
   const component = useMemo(
     () => getValueOrDefault(enableFilterModes ? children == null ? void 0 : children[opr] : children, getBasicInput(opr, schema)),
     [children, enableFilterModes, opr, schema]
   );
   const clearIconProps = useMemo(
-    () => ({ ...actionIconProps, variant: "transparent", c: void 0, size: "sm", onClick: handleClear }),
-    [actionIconProps, handleClear]
+    () => ({ ...actionIconProps, variant: "transparent", c: void 0, size: "sm", onClick: field.reset }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [actionIconProps]
   );
   const configuration = parseFromValuesOrFunc(
     enableFilterModes ? getProps(filterProps, opr) : filterProps,
@@ -118,17 +145,17 @@ function ColumnHeaderFilterInput({
   );
   const headerInputProps = useMemo(
     () => {
-      var _a, _b;
+      var _a2, _b2;
       return {
         w: "100%",
         variant: "unstyled",
         disabled: !(filters == null ? void 0 : filters.length),
         title: !filters.length ? "No filters" : void 0,
-        placeholder: (_a = mrtProps.table.options.localization.filterByColumn) == null ? void 0 : _a.replace(
+        placeholder: (_a2 = mrtProps.table.options.localization.filterByColumn) == null ? void 0 : _a2.replace(
           "{column}",
           String(mrtProps.column.columnDef.header)
         ),
-        "aria-label": (_b = mrtProps.table.options.localization.filterByColumn) == null ? void 0 : _b.replace(
+        "aria-label": (_b2 = mrtProps.table.options.localization.filterByColumn) == null ? void 0 : _b2.replace(
           "{column}",
           String(mrtProps.column.columnDef.header)
         ),

package/dist/core/esm/Tables/NextGenDataGrid/hooks/useColumns/ColumnHeaderFilterInput/HeaderInputs/HeaderSelectInput.mjs

@@ -1,7 +1,18 @@
 import { jsx } from "react/jsx-runtime";
 import { Select } from "@mantine/core";
 import { forwardRef } from "react";
-const HeaderSelectInput = forwardRef(({ data, clearIcon, mrtprops: { selectprops }, ...props }, ref) => /* @__PURE__ */ jsx(Select, { ref, data, searchable: true, ...selectprops, ...props, value: props.value ?? null }));
+const HeaderSelectInput = forwardRef(({ data, clearIcon, mrtprops: { selectprops }, ...props }, ref) => /* @__PURE__ */ jsx(
+  Select,
+  {
+    ref,
+    data,
+    searchable: true,
+    ...selectprops,
+    ...props,
+    value: props.value ?? null,
+    onChange: (value) => props.onChange(value ?? void 0)
+  }
+));
 HeaderSelectInput.displayName = "HeaderSelectInput";
 export {
   HeaderSelectInput

package/dist/core/esm/Tables/NextGenDataGrid/hooks/useColumns/ColumnHeaderFilterInput/HeaderInputs/HeaderTextInput.mjs

@@ -1,7 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import { TextInput } from "@mantine/core";
 import { forwardRef } from "react";
-const HeaderTextInput = forwardRef(({ clearIcon, mrtprops: { textinputprops }, ...props }, ref) => /* @__PURE__ */ jsx(TextInput, { ref, rightSection: clearIcon, ...textinputprops, ...props, value: props.value || "" }));
+const HeaderTextInput = forwardRef(({ clearIcon, mrtprops: { textinputprops }, ...props }, ref) => /* @__PURE__ */ jsx(
+  TextInput,
+  {
+    ref,
+    rightSection: clearIcon,
+    ...textinputprops,
+    ...props,
+    value: props.value || "",
+    onChange: (e) => props.onChange(e.target.value || void 0)
+  }
+));
 HeaderTextInput.displayName = "HeaderTextInput";
 export {
   HeaderTextInput

package/dist/core/esm/Tables/NextGenDataGrid/hooks/useColumns/useColumns.mjs

@@ -28,11 +28,11 @@ function useColumns(columnProps, header, body, textFilterSeparator) {
         enableAdvancedFilters,
         filterComponent,
         filterProps,
-        filterModeDescription,
-        filterMenu,
         filterState,
-        onFilterClear,
-        onFilterMount,
+        filterSync,
+        filterMenu,
+        filterModeDescription,
+        updateQueryParams = true,
         defaultOpr = ((_d = (_c = (_b = (_a = info == null ? void 0 : info.filters) == null ? void 0 : _a[col]) == null ? void 0 : _b.filters) == null ? void 0 : _c[0]) == null ? void 0 : _d.operator) || ""
       } = getProps(header, specialKey.all, col);
       const filterFn = fromFilterToFilterFn(col, defaultOpr);
@@ -51,14 +51,14 @@ function useColumns(columnProps, header, body, textFilterSeparator) {
           {
             enableFilterModes,
             enableAdvancedFilters,
-            filterProps,
-            filterModeDescription,
-            filterMenu,
-            filterState,
-            onFilterClear,
-            onFilterMount,
             filters,
             filterFn,
+            filterProps,
+            filterState,
+            filterSync,
+            filterMenu,
+            filterModeDescription,
+            updateQueryParams,
             mrtProps: props,
             children: filterComponent
           }

package/dist/core/esm/Tables/NextGenDataGrid/hooks/useToolbar/basicToolbars.mjs

@@ -3,7 +3,6 @@ import { MRT_ToggleFullScreenButton, MRT_ToggleDensePaddingButton, MRT_ShowHideC
 import { Add } from "../../../../ActionIcons/Add/Add.mjs";
 import { Download } from "../../../../ActionIcons/Download/Download.mjs";
 import { Refresh } from "../../../../ActionIcons/Refresh/Refresh.mjs";
-import { Upload } from "../../../../ActionIcons/Upload/Upload.mjs";
 function getBasicToolbars(table, rules) {
   return {
     toggleGlobalFilter: /* @__PURE__ */ jsx(MRT_ToggleGlobalFilterButton, { table, disabled: false }, "basic-toggleGlobalFilter"),
@@ -11,7 +10,7 @@ function getBasicToolbars(table, rules) {
     refresh: /* @__PURE__ */ jsx(Refresh, { tooltipProps: { label: table.options.localization.refresh } }, "basic-refresh"),
     add: (rules == null ? void 0 : rules.add) && /* @__PURE__ */ jsx(Add, { tooltipProps: { label: table.options.localization.add } }, "basic-add"),
     download: (rules == null ? void 0 : rules.download) && /* @__PURE__ */ jsx(Download, { tooltipProps: { label: table.options.localization.download } }, "basic-download"),
-    upload: (rules == null ? void 0 : rules.upload) && /* @__PURE__ */ jsx(Upload, { tooltipProps: { label: table.options.localization.upload } }, "basic-upload"),
+    // upload: rules?.upload && <Upload key="basic-upload" tooltipProps={{ label: table.options.localization.upload }} />, //! Disabled until further notice
     showHideColumns: /* @__PURE__ */ jsx(MRT_ShowHideColumnsButton, { table }, "basic-showHideColumns"),
     toggleDensePadding: /* @__PURE__ */ jsx(MRT_ToggleDensePaddingButton, { table }, "basic-toggleDensePadding"),
     toggleFullScreen: /* @__PURE__ */ jsx(MRT_ToggleFullScreenButton, { table }, "basic-toggleFullScreen")

package/dist/core/esm/Wrappers/ApiProvider/hooks/useProvideApi.mjs

@@ -1,7 +1,7 @@
 import { useState, useRef, useEffect, useMemo, useCallback } from "react";
 import { getItemId, urlJoin } from "fastapi-rtk/utils";
 import { useDidUpdate, useSetState } from "@mantine/hooks";
-import { useQuery } from "../../../../../.external/esm/@tanstack_react-query@5.76.2_react@18.3.1/@tanstack/react-query/build/modern/useQuery.mjs";
+import { useQuery } from "../../../../../.external/esm/@tanstack_react-query@5.77.2_react@18.3.1/@tanstack/react-query/build/modern/useQuery.mjs";
 import { createItem } from "../utils/api/createItem.mjs";
 import { deleteItem } from "../utils/api/deleteItem.mjs";
 import { downloadItems } from "../utils/api/downloadItems.mjs";
@@ -13,7 +13,7 @@ import { uploadItems } from "../utils/api/uploadItems.mjs";
 import { convertId } from "../utils/convertId.mjs";
 import { convertInfo } from "../utils/convertInfo.mjs";
 import { createQueryParams } from "../utils/createQueryParams.mjs";
-import { keepPreviousData } from "../../../../../.external/esm/@tanstack_query-core@5.76.2/@tanstack/query-core/build/modern/utils.mjs";
+import { keepPreviousData } from "../../../../../.external/esm/@tanstack_query-core@5.77.2/@tanstack/query-core/build/modern/utils.mjs";
 function useProvideApi({
   path,
   initialQueryParams,
@@ -266,11 +266,12 @@ function useProvideApi({
     });
   }, [data, setQueryParamsCallback, setStreaming, streamingMode]);
   const specialKey = useMemo(() => {
+    var _a;
     const specialKey2 = {
       all: "all",
       actions: "actions"
     };
-    data == null ? void 0 : data.list_columns.forEach((key) => {
+    (_a = data == null ? void 0 : data.list_columns) == null ? void 0 : _a.forEach((key) => {
       if (specialKey2[key]) {
         specialKey2[key] = `_${key}`;
       }

package/dist/core/esm/Wrappers/ApiProvider/hooks/useProvideForm.mjs

@@ -1,6 +1,6 @@
 import { initialState, VIEW_MODE } from "fastapi-rtk/constants";
 import { useState } from "react";
-import { create } from "../../../../../.external/esm/zustand@5.0.5_@types_react@18.3.22_react@18.3.1/zustand/esm/react.mjs";
+import { create } from "../../../../../.external/esm/zustand@5.0.5_@types_react@18.3.23_react@18.3.1/zustand/esm/react.mjs";
 const useProvideForm = () => {
   const [storeAdd] = useState(
     () => create((set, get) => ({

package/dist/core/esm/Wrappers/Provider/Provider.mjs

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useProxy } from "fastapi-rtk/zustand";
-import { QueryClient } from "../../../../.external/esm/@tanstack_query-core@5.76.2/@tanstack/query-core/build/modern/queryClient.mjs";
-import { QueryClientProvider } from "../../../../.external/esm/@tanstack_react-query@5.76.2_react@18.3.1/@tanstack/react-query/build/modern/QueryClientProvider.mjs";
+import { QueryClient } from "../../../../.external/esm/@tanstack_query-core@5.77.2/@tanstack/query-core/build/modern/queryClient.mjs";
+import { QueryClientProvider } from "../../../../.external/esm/@tanstack_react-query@5.77.2_react@18.3.1/@tanstack/react-query/build/modern/QueryClientProvider.mjs";
 import { useState } from "react";
 import { useFabProvideAuth } from "../../fab-react-toolkit-patch/auth/hooks/useProvideAuth.mjs";
 import { useFabProvideInfo } from "../../fab-react-toolkit-patch/auth/hooks/useProvideInfo.mjs";

package/dist/core/esm/Wrappers/Provider/hooks/useProvideAuth.mjs

@@ -1,5 +1,5 @@
-import { useQuery } from "../../../../../.external/esm/@tanstack_react-query@5.76.2_react@18.3.1/@tanstack/react-query/build/modern/useQuery.mjs";
-import { useQueryClient } from "../../../../../.external/esm/@tanstack_react-query@5.76.2_react@18.3.1/@tanstack/react-query/build/modern/QueryClientProvider.mjs";
+import { useQuery } from "../../../../../.external/esm/@tanstack_react-query@5.77.2_react@18.3.1/@tanstack/react-query/build/modern/useQuery.mjs";
+import { useQueryClient } from "../../../../../.external/esm/@tanstack_react-query@5.77.2_react@18.3.1/@tanstack/react-query/build/modern/QueryClientProvider.mjs";
 import { useState, useCallback } from "react";
 import { authSignin, authSignout, authResetPassword, authOAuthSignin } from "../utils/authFetch.mjs";
 import { getUser, updateUser } from "../utils/userCRUD.mjs";

package/dist/core/esm/Wrappers/Provider/hooks/useProvideInfo.mjs

@@ -1,4 +1,4 @@
-import { useQuery } from "../../../../../.external/esm/@tanstack_react-query@5.76.2_react@18.3.1/@tanstack/react-query/build/modern/useQuery.mjs";
+import { useQuery } from "../../../../../.external/esm/@tanstack_react-query@5.77.2_react@18.3.1/@tanstack/react-query/build/modern/useQuery.mjs";
 import { useEffect } from "react";
 import { authInfo } from "../utils/authFetch.mjs";
 function useProvideInfo(baseUrl, auth) {

package/dist/core/esm/fab-react-toolkit-patch/api/hooks/useProvideApi.mjs

@@ -1,8 +1,8 @@
 import { useState, useRef, useEffect, useMemo, useCallback } from "react";
 import { getItemId, urlJoin } from "fastapi-rtk/utils";
 import { useDidUpdate, useSetState } from "@mantine/hooks";
-import { keepPreviousData } from "../../../../../.external/esm/@tanstack_query-core@5.76.2/@tanstack/query-core/build/modern/utils.mjs";
-import { useQuery } from "../../../../../.external/esm/@tanstack_react-query@5.76.2_react@18.3.1/@tanstack/react-query/build/modern/useQuery.mjs";
+import { keepPreviousData } from "../../../../../.external/esm/@tanstack_query-core@5.77.2/@tanstack/query-core/build/modern/utils.mjs";
+import { useQuery } from "../../../../../.external/esm/@tanstack_react-query@5.77.2_react@18.3.1/@tanstack/react-query/build/modern/useQuery.mjs";
 import { createItem } from "../utils/api/createItem.mjs";
 import { deleteItem } from "../utils/api/deleteItem.mjs";
 import { downloadItems } from "../utils/api/downloadItems.mjs";
@@ -266,11 +266,12 @@ function useFabProvideApi({
     });
   }, [data, setQueryParamsCallback, setStreaming, streamingMode]);
   const specialKey = useMemo(() => {
+    var _a;
     const specialKey2 = {
       all: "all",
       actions: "actions"
     };
-    data == null ? void 0 : data.list_columns.forEach((key) => {
+    (_a = data == null ? void 0 : data.list_columns) == null ? void 0 : _a.forEach((key) => {
       if (specialKey2[key]) {
         specialKey2[key] = `_${key}`;
       }

package/dist/core/esm/fab-react-toolkit-patch/auth/hooks/useProvideAuth.mjs

@@ -1,5 +1,5 @@
-import { useQuery } from "../../../../../.external/esm/@tanstack_react-query@5.76.2_react@18.3.1/@tanstack/react-query/build/modern/useQuery.mjs";
-import { useQueryClient } from "../../../../../.external/esm/@tanstack_react-query@5.76.2_react@18.3.1/@tanstack/react-query/build/modern/QueryClientProvider.mjs";
+import { useQuery } from "../../../../../.external/esm/@tanstack_react-query@5.77.2_react@18.3.1/@tanstack/react-query/build/modern/useQuery.mjs";
+import { useQueryClient } from "../../../../../.external/esm/@tanstack_react-query@5.77.2_react@18.3.1/@tanstack/react-query/build/modern/QueryClientProvider.mjs";
 import { useState, useCallback } from "react";
 import { authSignin, authSignout, authResetPassword, authOAuthSignin } from "../utils/authFetch.mjs";
 import { getUser, updateUser } from "../utils/userCRUD.mjs";

package/dist/core/esm/fab-react-toolkit-patch/auth/hooks/useProvideInfo.mjs

@@ -1,4 +1,4 @@
-import { useQuery } from "../../../../../.external/esm/@tanstack_react-query@5.76.2_react@18.3.1/@tanstack/react-query/build/modern/useQuery.mjs";
+import { useQuery } from "../../../../../.external/esm/@tanstack_react-query@5.77.2_react@18.3.1/@tanstack/react-query/build/modern/useQuery.mjs";
 import { useEffect } from "react";
 import { authInfo } from "../utils/authFetch.mjs";
 function useFabProvideInfo(baseUrl, auth) {

package/dist/core/lib/Tables/NextGenDataGrid/NextGenDataGrid.d.ts

@@ -14,11 +14,21 @@ export type NextGenDataGridFilterStateProps = {
      */
     value: any;
     /**
-     * - Filter value change callback
+     * - Callback when the filter value changes
      */
     onChange: (value: any) => void;
     /**
-     * - Delay for the filter value change callback. It is recommended to use default value to avoid too many re-renders
+     * - Callback when the operator changes.
+     */
+    onOprChange?: ({ value: any, opr: string }: any) => void;
+};
+export type NextGenDataGridFilterSyncProps = {
+    /**
+     * - Function to compare values for synchronization. Defaults to strict equality (`===`).
+     */
+    equals?: (a: any, b: any) => boolean;
+    /**
+     * - Debounce delay in milliseconds for synchronization. Defaults to `DEBOUNCE_DELAY`.
      */
     delay?: number;
 };
@@ -43,34 +53,32 @@ export type NextGenDataGridHeaderProps = {
      * - Props for the filter component. When `enableFilterModes` is enabled, this will be a key-value pair object where the key is the filter operator and the value is the filter component props
      */
     filterProps?: Record<string, any> | (({ api, auth, mrtProps }: any) => Record<string, any> | Record<string, Record<string, any> | (({ api, auth, mrtProps }: any) => Record<string, any>)>);
-    /**
-     * - Customize the description below the filter when `enableFilterModes` is enabled. Defaults to `Filter Mode: {Filter name}`
-     */
-    filterModeDescription?: JSX.Element | (({ api, auth, mrtProps, componentProps: { value: string } }: any) => JSX.Element);
-    /**
-     * - Customize the filter menu action icon beside the filter. Defaults to `Filter Menu` with icon `IconFilterCog`
-     */
-    filterMenu?: JSX.Element | (({ api, auth, mrtProps, componentProps: { label: string, disabled: boolean, indicator: number, actionIconProps: Object, onClick: Function } }: any) => JSX.Element);
     /**
      * - Manage filter state externally
      */
     filterState?: NextGenDataGridFilterStateProps;
     /**
-     * - A callback function to be called when the filter is cleared
+     * - Options for synchronizing filter state with other components. Defaults to:
+     * - `equals`: A function to compare values, defaults to strict equality (`===`).
+     * - `delay`: A debounce delay in milliseconds, defaults to `DEBOUNCE_DELAY`. It is recommended to use the default value for `delay` to avoid performance issues.
      */
-    onFilterClear?: () => void;
+    filterSync?: NextGenDataGridFilterSyncProps;
     /**
-     * - A callback function to be called when the filter is mounted
+     * - Customize the filter menu action icon beside the filter. Defaults to `Filter Menu` with icon `IconFilterCog`
      */
-    onFilterMount?: ({ api, auth, mrtProps }: any) => void;
+    filterMenu?: JSX.Element | (({ api, auth, mrtProps, componentProps: { label: string, disabled: boolean, indicator: number, actionIconProps: Object, onClick: Function } }: any) => JSX.Element);
     /**
-     * - Sets the default operator for the filter. The filter componenet may change based on the operator
+     * - Customize the description below the filter when `enableFilterModes` is enabled. Defaults to `Filter Mode: {Filter name}`
      */
-    defaultOpr?: string;
+    filterModeDescription?: JSX.Element | (({ api, auth, mrtProps, componentProps: { value: string } }: any) => JSX.Element);
     /**
      * - Whether to update the query params when the filter is applied. Default is true
      */
     updateQueryParams?: boolean;
+    /**
+     * - Sets the default operator for the filter. The filter componenet may change based on the operator
+     */
+    defaultOpr?: string;
 };
 export type NextGenDataGridBodyProps = {
     /**

package/dist/core/lib/Tables/NextGenDataGrid/hooks/useColumns/ColumnHeaderFilter.d.ts

@@ -1,14 +1,14 @@
-export function ColumnHeaderFilter({ children, enableFilterModes, enableAdvancedFilters, filterProps, filterModeDescription, filterMenu, filterState, onFilterClear, onFilterMount, filters, filterFn, mrtProps, }: {
+export function ColumnHeaderFilter({ children, enableFilterModes, enableAdvancedFilters, filters, filterFn, filterProps, filterState, filterSync, filterMenu, filterModeDescription, updateQueryParams, mrtProps, }: {
     children: any;
     enableFilterModes: any;
     enableAdvancedFilters: any;
-    filterProps: any;
-    filterModeDescription: any;
-    filterMenu: any;
-    filterState: any;
-    onFilterClear: any;
-    onFilterMount: any;
     filters: any;
     filterFn: any;
+    filterProps: any;
+    filterState: any;
+    filterSync: any;
+    filterMenu: any;
+    filterModeDescription: any;
+    updateQueryParams: any;
     mrtProps: any;
 }): import("react").JSX.Element;

package/dist/core/lib/Tables/NextGenDataGrid/hooks/useColumns/ColumnHeaderFilterInput/ColumnHeaderFilterInput.d.ts

@@ -1,12 +1,12 @@
-export function ColumnHeaderFilterInput({ children, opr, enableFilterModes, filterProps, filterState, onFilterClear, onFilterMount, filters, actionIconProps, functionProps, mrtProps, }: {
+export function ColumnHeaderFilterInput({ children, opr, enableFilterModes, filters, filterProps, filterState, filterSync, updateQueryParams, actionIconProps, functionProps, mrtProps, }: {
     children: any;
     opr: any;
     enableFilterModes: any;
+    filters: any;
     filterProps: any;
     filterState: any;
-    onFilterClear: any;
-    onFilterMount: any;
-    filters: any;
+    filterSync: any;
+    updateQueryParams: any;
     actionIconProps: any;
     functionProps: any;
     mrtProps: any;

package/dist/core/lib/Tables/NextGenDataGrid/hooks/useToolbar/basicToolbars.d.ts

@@ -10,7 +10,6 @@ export function getBasicToolbars(table: any, rules?: Record<string, boolean>): {
     refresh: import("react").JSX.Element;
     add: import("react").JSX.Element;
     download: import("react").JSX.Element;
-    upload: import("react").JSX.Element;
     showHideColumns: import("react").JSX.Element;
     toggleDensePadding: import("react").JSX.Element;
     toggleFullScreen: import("react").JSX.Element;

package/dist/hooks/cjs/index.cjs

@@ -2,7 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const useActionIcon = require("./useActionIcon/useActionIcon.cjs");
 const useCustomFetch = require("./useCustomFetch/useCustomFetch.cjs");
+const useSyncValues = require("./useSyncValues/useSyncValues.cjs");
 const useTrueOnce = require("./useTrueOnce/useTrueOnce.cjs");
 exports.useActionIcon = useActionIcon.useActionIcon;
 exports.useCustomFetch = useCustomFetch.useCustomFetch;
+exports.useSyncValues = useSyncValues.useSyncValues;
 exports.useTrueOnce = useTrueOnce.useTrueOnce;

package/dist/hooks/cjs/useSyncValues/useSyncValues.cjs

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const constants = require("fastapi-rtk/constants");
+const react = require("react");
+const useSyncValues = (states, { equals = (a, b) => a === b, delay = constants.DEBOUNCE_DELAY } = {}) => {
+  const lastValueRef = react.useRef(states[0].value);
+  const timeoutRef = react.useRef(null);
+  react.useEffect(
+    () => {
+      const changed = states.find((state) => !equals(state.value, lastValueRef.current));
+      if (!changed) {
+        return;
+      }
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => {
+        lastValueRef.current = changed.value;
+        states.forEach((state) => {
+          if (!equals(state.value, lastValueRef.current)) {
+            state.onChange(lastValueRef.current);
+          }
+        });
+      }, delay);
+      return () => clearTimeout(timeoutRef.current);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    states.map((state) => state.value)
+  );
+  return null;
+};
+exports.useSyncValues = useSyncValues;

package/dist/hooks/esm/index.mjs

@@ -1,8 +1,10 @@
 import { useActionIcon } from "./useActionIcon/useActionIcon.mjs";
 import { useCustomFetch } from "./useCustomFetch/useCustomFetch.mjs";
+import { useSyncValues } from "./useSyncValues/useSyncValues.mjs";
 import { useTrueOnce } from "./useTrueOnce/useTrueOnce.mjs";
 export {
   useActionIcon,
   useCustomFetch,
+  useSyncValues,
   useTrueOnce
 };

package/dist/hooks/esm/useSyncValues/useSyncValues.mjs

@@ -0,0 +1,30 @@
+import { DEBOUNCE_DELAY } from "fastapi-rtk/constants";
+import { useRef, useEffect } from "react";
+const useSyncValues = (states, { equals = (a, b) => a === b, delay = DEBOUNCE_DELAY } = {}) => {
+  const lastValueRef = useRef(states[0].value);
+  const timeoutRef = useRef(null);
+  useEffect(
+    () => {
+      const changed = states.find((state) => !equals(state.value, lastValueRef.current));
+      if (!changed) {
+        return;
+      }
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => {
+        lastValueRef.current = changed.value;
+        states.forEach((state) => {
+          if (!equals(state.value, lastValueRef.current)) {
+            state.onChange(lastValueRef.current);
+          }
+        });
+      }, delay);
+      return () => clearTimeout(timeoutRef.current);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    states.map((state) => state.value)
+  );
+  return null;
+};
+export {
+  useSyncValues
+};

package/dist/hooks/lib/index.d.ts

@@ -1,3 +1,4 @@
 export * from './useActionIcon/index';
 export * from './useCustomFetch/index';
+export * from './useSyncValues/index';
 export * from './useTrueOnce/index';