fastapi-rtk 0.1.21 → 0.1.23

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

@@ -0,0 +1,180 @@
+import { jsx } from "react/jsx-runtime";
+import classes from "./headerinput.module.css.mjs";
+import { DEBOUNCE_DELAY } from "fastapi-rtk/constants";
+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 { clsx } from "../../../../../../../.external/esm/clsx@2.1.1/clsx/dist/clsx.mjs";
+import { forwardRef, cloneElement, useMemo, useRef, useCallback, useEffect } 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";
+const FilterIconWrapper = forwardRef(({ label, disabled, children, ...props }, ref) => {
+  if (disabled) {
+    return cloneElement(children, { ref });
+  }
+  return /* @__PURE__ */ jsx(Tooltip, { label, ...props, children: cloneElement(children, { ref }) });
+});
+FilterIconWrapper.displayName = "FilterIconWrapper";
+const FilterIndicatorWrapper = forwardRef(({ indicator, children, ...props }, ref) => {
+  const { height, ref: elementRef } = useElementSize();
+  const combinedRefs = useMergedRef(ref, elementRef);
+  if (!indicator) {
+    return cloneElement(children, { ref: combinedRefs });
+  }
+  const heightOffset = 2;
+  //! This is the height offset between the button from ActionIcon and the icon itself
+  return /* @__PURE__ */ jsx(Indicator, { zIndex: 20, size: 16, label: indicator, styles: { root: { height: height + heightOffset } }, ...props, children: cloneElement(children, { ref: combinedRefs }) });
+});
+FilterIndicatorWrapper.displayName = "FilterIndicatorWrapper";
+function ColumnHeaderFilterInput({
+  children,
+  opr,
+  enableFilterModes,
+  filterProps,
+  filterState,
+  onFilterClear,
+  onFilterMount,
+  filters,
+  actionIconProps,
+  functionProps,
+  mrtProps
+}) {
+  const { column } = mrtProps;
+  const { info, queryParams } = useApi();
+  const api = useApi();
+  const auth = useAuth();
+  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;
+  }, [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]
+  );
+  useEffect(() => {
+    if (!isMounted || filterState) {
+      return;
+    }
+    if (!currentHeaderFilter) {
+      handleClear();
+    }
+  }, [currentHeaderFilter]);
+  useEffect(() => {
+    onFilterMount == null ? void 0 : onFilterMount({ api: api.getState(), auth: auth.getState(), mrtProps });
+  }, [onFilterMount]);
+  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]
+  );
+  const configuration = parseFromValuesOrFunc(
+    enableFilterModes ? getProps(filterProps, opr) : filterProps,
+    functionProps
+  );
+  const headerInputProps = useMemo(
+    () => {
+      var _a, _b;
+      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(
+          "{column}",
+          String(mrtProps.column.columnDef.header)
+        ),
+        "aria-label": (_b = mrtProps.table.options.localization.filterByColumn) == null ? void 0 : _b.replace(
+          "{column}",
+          String(mrtProps.column.columnDef.header)
+        ),
+        style: { fontWeight: "normal" },
+        mrtprops: {
+          ...mrtProps,
+          textinputprops: {
+            className: clsx("mrt-filter-text-input", classes.root),
+            ...parseFromValuesOrFunc(mrtProps.table.mantineFilterTextInputProps, mrtProps),
+            ...parseFromValuesOrFunc(mrtProps.column.columnDef.mantineFilterTextInputProps, mrtProps)
+          },
+          selectprops: {
+            className: clsx("mrt-filter-text-input", classes.root),
+            ...parseFromValuesOrFunc(mrtProps.table.mantineFilterSelectProps || { clearable: true }, mrtProps),
+            ...parseFromValuesOrFunc(mrtProps.column.columnDef.mantineFilterSelectProps, mrtProps)
+          },
+          multiselectprops: {
+            className: clsx("mrt-filter-text-input", classes.root),
+            ...parseFromValuesOrFunc(mrtProps.table.mantineFilterMultiSelectProps || { clearable: true }, mrtProps),
+            ...parseFromValuesOrFunc(mrtProps.column.columnDef.mantineFilterMultiSelectProps, mrtProps)
+          },
+          dateinputprops: {
+            className: clsx("mrt-filter-text-input", classes.root, classes["date-filter"]),
+            ...parseFromValuesOrFunc(mrtProps.table.mantineFilterDateInputProps, mrtProps),
+            ...parseFromValuesOrFunc(mrtProps.column.columnDef.mantineFilterDateInputProps, mrtProps)
+          },
+          autocompleteprops: {
+            className: clsx("mrt-filter-text-input", classes.root),
+            ...parseFromValuesOrFunc(mrtProps.table.mantineFilterAutocompleteProps, mrtProps),
+            ...parseFromValuesOrFunc(mrtProps.column.columnDef.mantineFilterAutocompleteProps, mrtProps)
+          }
+        },
+        ref: (node) => {
+          if (node) {
+            mrtProps.table.refs.filterInputRefs.current[`${mrtProps.column.id}-0`] = node;
+          }
+        },
+        clearIcon: field.isDirty() && /* @__PURE__ */ jsx(CloseButton, { ...clearIconProps }),
+        ...configuration,
+        cleariconprops: clearIconProps
+      };
+    },
+    [clearIconProps, configuration, field, filters.length, mrtProps]
+  );
+  return /* @__PURE__ */ jsx(HeaderInput, { component, field, ...field.getInputProps(), ...headerInputProps });
+}
+export {
+  ColumnHeaderFilterInput
+};

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

@@ -0,0 +1,87 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip, Indicator, Menu, ActionIcon } from "@mantine/core";
+import { useElementSize, useMergedRef, useDisclosure } from "@mantine/hooks";
+import { forwardRef, cloneElement, useState, useMemo } from "react";
+import { useApi } from "../../../../hooks/api/useApi.mjs";
+import { FallbackWrapper } from "../../FallbackWrapper.mjs";
+import { FilterMenu } from "./FilterMenu.mjs";
+import IconFilterCog from "../../../../../../.external/esm/@tabler_icons-react@3.18.0_react@18.3.1/@tabler/icons-react/dist/esm/icons/IconFilterCog.mjs";
+const FilterMenuButton = ({
+  table,
+  column,
+  opr,
+  filters,
+  enableAdvancedFilters,
+  filterMenu,
+  actionIconProps,
+  functionProps
+}) => {
+  const { queryParams } = useApi();
+  const [opened, { toggle }] = useDisclosure();
+  const [mode, setMode] = useState("Basic");
+  const existingFilters = useMemo(
+    () => (queryParams == null ? void 0 : queryParams.filters.filter((filter) => filter.id !== column.id && filter.col === column.id).map((filter) => ({ ...filter }))) || [],
+    [queryParams, column.id]
+  );
+  return /* @__PURE__ */ jsxs(Menu, { opened, closeOnClickOutside: true, onChange: toggle, children: [
+    /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(
+      FallbackWrapper,
+      {
+        fallback: filters.length ? /* @__PURE__ */ jsx(
+          FilterIconWrapper,
+          {
+            label: table.options.localization.changeFilterMode,
+            position: "bottom-start",
+            withArrow: true,
+            arrowPosition: "side",
+            children: /* @__PURE__ */ jsx(FilterIndicatorWrapper, { indicator: existingFilters.length, children: /* @__PURE__ */ jsx(ActionIcon, { ...actionIconProps, onClick: toggle, children: /* @__PURE__ */ jsx(IconFilterCog, {}) }) })
+          }
+        ) : null,
+        functionProps: {
+          ...functionProps,
+          componentProps: {
+            label: table.options.localization.changeFilterMode,
+            disabled: !(filters == null ? void 0 : filters.length),
+            indicator: existingFilters.length,
+            actionIconProps,
+            onClick: toggle
+          }
+        },
+        children: filterMenu
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Menu.Dropdown, { children: /* @__PURE__ */ jsx(
+      FilterMenu,
+      {
+        enableAdvancedFilters,
+        mode,
+        setMode,
+        col: column.id,
+        opr,
+        filters,
+        table
+      }
+    ) })
+  ] });
+};
+const FilterIconWrapper = forwardRef(({ label, disabled, children, ...props }, ref) => {
+  if (disabled) {
+    return cloneElement(children, { ref });
+  }
+  return /* @__PURE__ */ jsx(Tooltip, { label, ...props, children: cloneElement(children, { ref }) });
+});
+FilterIconWrapper.displayName = "FilterIconWrapper";
+const FilterIndicatorWrapper = forwardRef(({ indicator, children, ...props }, ref) => {
+  const { height, ref: elementRef } = useElementSize();
+  const combinedRefs = useMergedRef(ref, elementRef);
+  if (!indicator) {
+    return cloneElement(children, { ref: combinedRefs });
+  }
+  const heightOffset = 2;
+  //! This is the height offset between the button from ActionIcon and the icon itself
+  return /* @__PURE__ */ jsx(Indicator, { zIndex: 20, size: 16, label: indicator, styles: { root: { height: height + heightOffset } }, ...props, children: cloneElement(children, { ref: combinedRefs }) });
+});
+FilterIndicatorWrapper.displayName = "FilterIndicatorWrapper";
+export {
+  FilterMenuButton
+};

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

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { Input } from "@mantine/core";
+import { localizedFilterOption } from "../../../../../../.external/esm/mantine-react-table@2.0.0-beta.9_@mantine_core@7.17.7_@mantine_dates@7.17.7_@mantine_hooks@7._dm3meh6s7t7wwl37at3cedg6gm/mantine-react-table/dist/index.esm.mjs";
+import { useMemo } from "react";
+import { FallbackWrapper } from "../../FallbackWrapper.mjs";
+import { getProps } from "../../utils.mjs";
+const FilterModeDescription = ({ table, column, opr, filters, filterModeDescription, functionProps }) => {
+  const filterName = useMemo(() => {
+    var _a;
+    return (_a = filters == null ? void 0 : filters.find((f) => f.operator === opr)) == null ? void 0 : _a.name;
+  }, [filters, opr]);
+  return /* @__PURE__ */ jsx(
+    FallbackWrapper,
+    {
+      fallback: filters.length ? /* @__PURE__ */ jsx(Input.Description, { size: "xs", children: table.options.localization.filterMode.replace(
+        "{filterType}",
+        localizedFilterOption(getProps(table.options.localization, column.id), filterName) || localizedFilterOption(table.options.localization, filterName) || filterName
+      ) }) : null,
+      functionProps: { ...functionProps, componentProps: { value: filterName } },
+      children: filterModeDescription
+    }
+  );
+};
+export {
+  FilterModeDescription
+};

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

@@ -4,10 +4,9 @@ import { useMap, useSetState } from "@mantine/hooks";
 import { useEffect, useMemo } from "react";
 import { useApi } from "../../../../hooks/api/useApi.mjs";
 import { useAuth } from "../../../../hooks/auth/useAuth.mjs";
-import { FallbackWrapper } from "../../FallbackWrapper.mjs";
 import { getProps, fromFilterToFilterFn } from "../../utils.mjs";
-import { ColumnHeaderFilter } from "./ColumnHeaderFilter/ColumnHeaderFilter.mjs";
-import { MultiLineHighlight } from "./MultiLineHighlight.mjs";
+import { Body } from "./Body.mjs";
+import { ColumnHeaderFilter } from "./ColumnHeaderFilter.mjs";
 function useColumns(columnProps, header, body, textFilterSeparator) {
   const { path, info, data, specialKey } = useApi();
   const api = useApi();
@@ -31,7 +30,9 @@ function useColumns(columnProps, header, body, textFilterSeparator) {
         filterProps,
         filterModeDescription,
         filterMenu,
+        filterState,
         onFilterClear,
+        onFilterMount,
         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);
@@ -53,7 +54,9 @@ function useColumns(columnProps, header, body, textFilterSeparator) {
             filterProps,
             filterModeDescription,
             filterMenu,
+            filterState,
             onFilterClear,
+            onFilterMount,
             filters,
             filterFn,
             mrtProps: props,
@@ -63,57 +66,7 @@ function useColumns(columnProps, header, body, textFilterSeparator) {
         enableSorting: data == null ? void 0 : data.order_columns.includes(col),
         filterFn: filters.length ? filterFn : void 0,
         columnFilterModeOptions: filters.map((f) => fromFilterToFilterFn(col, f.operator)),
-        Cell: ({ cell, table, column, ...restCellProps }) => {
-          const globalFilter = table.getState().globalFilter;
-          const columnTextFilter = column.getFilterValue() || "";
-          const { component: component2, separator, truncate } = getProps(body, specialKey.all, col);
-          let highlight = [];
-          if (globalFilter) {
-            highlight.push(...globalFilter.split(textFilterSeparator).map((f) => f.trim()));
-          }
-          if (columnTextFilter && typeof columnTextFilter === "string") {
-            highlight.push(...columnTextFilter.split(textFilterSeparator).map((f) => f.trim()));
-          }
-          let value = cell.getValue();
-          if (typeof value === "number") {
-            value = value.toLocaleString();
-          } else if (value === null || value === void 0) {
-            value = "";
-          }
-          if (separator) {
-            value = value.split(separator);
-          }
-          let truncateObj = {};
-          if (truncate) {
-            if (Array.isArray(value)) {
-              truncateObj = value.map((v) => ({
-                original: v,
-                truncated: v.length > truncate ? `${v.slice(0, truncate)}...` : null
-              }));
-            } else {
-              truncateObj = {
-                original: value,
-                truncated: value.length > truncate ? `${value.slice(0, truncate)}...` : null
-              };
-            }
-          }
-          const functionProps = {
-            api,
-            auth,
-            data: cell.row.original,
-            highlight,
-            componentProps: { value },
-            mrtProps: { cell, table, column, ...restCellProps }
-          };
-          return /* @__PURE__ */ jsx(
-            FallbackWrapper,
-            {
-              fallback: /* @__PURE__ */ jsx(MultiLineHighlight, { highlight, truncate: truncateObj, children: value }),
-              functionProps,
-              children: component2
-            }
-          );
-        },
+        Cell: (props) => /* @__PURE__ */ jsx(Body, { body, col, textFilterSeparator, mrtProps: props }),
         ...additionalProps,
         ...getProps(columnProps, specialKey.all, col)
       };

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

@@ -1,15 +1,15 @@
 import { jsx } from "react/jsx-runtime";
 import { getItemId } from "fastapi-rtk/utils";
 import { convertId } from "../../../../Wrappers/ApiProvider/utils/convertId.mjs";
-import { HeaderBetweenInput } from "./ColumnHeaderFilter/HeaderInputs/HeaderBetweenInput.mjs";
-import { HeaderBooleanInput } from "./ColumnHeaderFilter/HeaderInputs/HeaderBooleanInput.mjs";
-import { HeaderDateInput } from "./ColumnHeaderFilter/HeaderInputs/HeaderDateInput.mjs";
-import { HeaderMultiSelectInput } from "./ColumnHeaderFilter/HeaderInputs/HeaderMultiSelectInput.mjs";
-import { HeaderNumberInput } from "./ColumnHeaderFilter/HeaderInputs/HeaderNumberInput.mjs";
-import { HeaderSelectInput } from "./ColumnHeaderFilter/HeaderInputs/HeaderSelectInput.mjs";
-import { HeaderTagsInput } from "./ColumnHeaderFilter/HeaderInputs/HeaderTagsInput.mjs";
-import { HeaderTagsNumberInput } from "./ColumnHeaderFilter/HeaderInputs/HeaderTagsNumberInput.mjs";
-import { HeaderTextInput } from "./ColumnHeaderFilter/HeaderInputs/HeaderTextInput.mjs";
+import { HeaderBetweenInput } from "./ColumnHeaderFilterInput/HeaderInputs/HeaderBetweenInput.mjs";
+import { HeaderBooleanInput } from "./ColumnHeaderFilterInput/HeaderInputs/HeaderBooleanInput.mjs";
+import { HeaderDateInput } from "./ColumnHeaderFilterInput/HeaderInputs/HeaderDateInput.mjs";
+import { HeaderMultiSelectInput } from "./ColumnHeaderFilterInput/HeaderInputs/HeaderMultiSelectInput.mjs";
+import { HeaderNumberInput } from "./ColumnHeaderFilterInput/HeaderInputs/HeaderNumberInput.mjs";
+import { HeaderSelectInput } from "./ColumnHeaderFilterInput/HeaderInputs/HeaderSelectInput.mjs";
+import { HeaderTagsInput } from "./ColumnHeaderFilterInput/HeaderInputs/HeaderTagsInput.mjs";
+import { HeaderTagsNumberInput } from "./ColumnHeaderFilterInput/HeaderInputs/HeaderTagsNumberInput.mjs";
+import { HeaderTextInput } from "./ColumnHeaderFilterInput/HeaderInputs/HeaderTextInput.mjs";
 const getBasicInput = (opr, schema) => {
   if (!opr || !schema) {
     return void 0;

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.1_react@18.3.1/@tanstack/react-query/build/modern/useQuery.mjs";
+import { useQuery } from "../../../../../.external/esm/@tanstack_react-query@5.76.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.0/@tanstack/query-core/build/modern/utils.mjs";
+import { keepPreviousData } from "../../../../../.external/esm/@tanstack_query-core@5.76.2/@tanstack/query-core/build/modern/utils.mjs";
 function useProvideApi({
   path,
   initialQueryParams,

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.4_@types_react@18.3.21_react@18.3.1/zustand/esm/react.mjs";
+import { create } from "../../../../../.external/esm/zustand@5.0.5_@types_react@18.3.22_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.0/@tanstack/query-core/build/modern/queryClient.mjs";
-import { QueryClientProvider } from "../../../../.external/esm/@tanstack_react-query@5.76.1_react@18.3.1/@tanstack/react-query/build/modern/QueryClientProvider.mjs";
+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 { 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.1_react@18.3.1/@tanstack/react-query/build/modern/useQuery.mjs";
-import { useQueryClient } from "../../../../../.external/esm/@tanstack_react-query@5.76.1_react@18.3.1/@tanstack/react-query/build/modern/QueryClientProvider.mjs";
+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 { 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.1_react@18.3.1/@tanstack/react-query/build/modern/useQuery.mjs";
+import { useQuery } from "../../../../../.external/esm/@tanstack_react-query@5.76.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.0/@tanstack/query-core/build/modern/utils.mjs";
-import { useQuery } from "../../../../../.external/esm/@tanstack_react-query@5.76.1_react@18.3.1/@tanstack/react-query/build/modern/useQuery.mjs";
+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 { createItem } from "../utils/api/createItem.mjs";
 import { deleteItem } from "../utils/api/deleteItem.mjs";
 import { downloadItems } from "../utils/api/downloadItems.mjs";

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.1_react@18.3.1/@tanstack/react-query/build/modern/useQuery.mjs";
-import { useQueryClient } from "../../../../../.external/esm/@tanstack_react-query@5.76.1_react@18.3.1/@tanstack/react-query/build/modern/QueryClientProvider.mjs";
+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 { 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.1_react@18.3.1/@tanstack/react-query/build/modern/useQuery.mjs";
+import { useQuery } from "../../../../../.external/esm/@tanstack_react-query@5.76.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/esm/index.mjs

@@ -12,8 +12,8 @@ import { useForms } from "./hooks/api/useForms.mjs";
 import { useAuth } from "./hooks/auth/useAuth.mjs";
 import { useInfo } from "./hooks/auth/useInfo.mjs";
 import { UserMenu } from "./Menu/UserMenu/UserMenu.mjs";
-import { DataGrid } from "./Tables/DataGrid/DataGrid.mjs";
-import { NextGenDataGrid } from "./Tables/NextGenDataGrid/NextGenDataGrid.mjs";
+import { DataGrid, DataGrid as DataGrid2 } from "./Tables/DataGrid/DataGrid.mjs";
+import { NextGenDataGrid, NextGenDataGrid as NextGenDataGrid2, NextGenDataGrid as NextGenDataGrid3, NextGenDataGrid as NextGenDataGrid4 } from "./Tables/NextGenDataGrid/NextGenDataGrid.mjs";
 import { ApiProvider } from "./Wrappers/ApiProvider/ApiProvider.mjs";
 import { InfiniteScroll } from "./Wrappers/InfiniteScroll/InfiniteScroll.mjs";
 import { LazyLoadWrapper } from "./Wrappers/LazyLoadWrapper/LazyLoadWrapper.mjs";
@@ -29,6 +29,7 @@ export {
   Add,
   ApiProvider,
   DataGrid,
+  DataGrid2 as Datagrid,
   Delete,
   Download,
   Edit,
@@ -36,6 +37,9 @@ export {
   InfiniteScroll,
   LazyLoadWrapper,
   NextGenDataGrid,
+  NextGenDataGrid2 as NextGenDatagrid,
+  NextGenDataGrid3 as NextGendatagrid,
+  NextGenDataGrid4 as Nextgendatagrid,
   Provider,
   Refresh,
   Upload,

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

@@ -8,6 +8,84 @@ export type NextGenDataGridChildrenProps = {
      */
     table: Record<string, any>;
 };
+export type NextGenDataGridFilterStateProps = {
+    /**
+     * - Filter value
+     */
+    value: any;
+    /**
+     * - Filter value change callback
+     */
+    onChange: (value: any) => void;
+    /**
+     * - Delay for the filter value change callback. It is recommended to use default value to avoid too many re-renders
+     */
+    delay?: number;
+};
+export type NextGenDataGridHeaderProps = {
+    /**
+     * - Customize the header that is shown above the filter
+     */
+    component?: JSX.Element | (({ api, auth, mrtProps }: any) => JSX.Element);
+    /**
+     * - Enables the filter menu that can change the filter mode. Located on the right side of the filter
+     */
+    enableFilterModes?: boolean;
+    /**
+     * - Enables the advanced filter by showing a segmented control to switch between `Basic` and `Advanced` filters in the filter menu
+     */
+    enableAdvancedFilters?: boolean;
+    /**
+     * - Customize 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
+     */
+    filterComponent?: JSX.Element | (({ api, auth, mrtProps }: any) => JSX.Element | Record<string, JSX.Element | (({ api, auth, mrtProps }: any) => JSX.Element)>);
+    /**
+     * - 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
+     */
+    onFilterClear?: () => void;
+    /**
+     * - A callback function to be called when the filter is mounted
+     */
+    onFilterMount?: ({ api, auth, mrtProps }: any) => void;
+    /**
+     * - Sets the default operator for the filter. The filter componenet may change based on the operator
+     */
+    defaultOpr?: string;
+    /**
+     * - Whether to update the query params when the filter is applied. Default is true
+     */
+    updateQueryParams?: boolean;
+};
+export type NextGenDataGridBodyProps = {
+    /**
+     * - Customize the component within the body
+     */
+    component?: JSX.Element | (({ api, auth, mrtProps }: any) => JSX.Element);
+    /**
+     * - Separate the value of a column into multiple rows
+     */
+    separator?: string;
+    /**
+     * - Truncate the value of a column to a certain length. Will be shown as `...` when it exceeds the length with a tooltip containing the full value
+     */
+    truncate?: number;
+};
 export type NextGenDataGridProps = {
     /**
      * - Children to render inside the DataGrid
@@ -73,11 +151,11 @@ export type NextGenDataGridProps = {
     /**
      * - Header props for the table
      */
-    header?: Record<string, Record<string, any>>;
+    header?: Record<string, NextGenDataGridHeaderProps>;
     /**
      * - Body props for the table
      */
-    body?: Record<string, Record<string, any>>;
+    body?: Record<string, NextGenDataGridBodyProps>;
     /**
      * - Form props for the table
      */

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

@@ -0,0 +1,6 @@
+export function Body({ body, col, textFilterSeparator, mrtProps }: {
+    body: any;
+    col: any;
+    textFilterSeparator: any;
+    mrtProps: any;
+}): import("react").JSX.Element;