fastapi-rtk 0.1.13 → 0.1.14

package/dist/core/esm/Tables/DataGrid/Toolbar/Filter/FilterMenu.mjs

@@ -0,0 +1,138 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useProps, Box, Flex, ActionIcon, Divider, Text, ScrollArea, Button, Group } from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { randomId } from "@mantine/hooks";
+import { yupResolver } from "../../../../../../external/esm/mantine-form-yup-resolver@2.0.0_@mantine_form@7.17.7_yup@1.6.1/node_modules/mantine-form-yup-resolver/dist/esm/index.mjs";
+import { useEffect } from "react";
+import { object as create$3, array as create$2, mixed as create$8, string as create$6 } from "../../../../../../external/esm/yup@1.6.1/node_modules/yup/index.esm.mjs";
+import { useApi } from "../../../../hooks/api/useApi.mjs";
+import { FormField } from "../../FormField/FormField.mjs";
+import FormFilterField from "./FormFilterField.mjs";
+import { FormFilterIn } from "./FormFilterIn.mjs";
+import FormFilterField$1 from "./FormOperatorField.mjs";
+import IconTrash from "../../../../../../external/esm/@tabler_icons-react@3.18.0_react@18.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconTrash.mjs";
+import IconPlus from "../../../../../../external/esm/@tabler_icons-react@3.18.0_react@18.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlus.mjs";
+function FilterMenu({ onClose, ...props }) {
+  const { info, queryParams, setQueryParams, path } = useApi();
+  const form = useForm({
+    initialValues: {
+      filters: []
+    },
+    validate: yupResolver(
+      create$3({
+        filters: create$2().of(
+          create$3({
+            col: create$6().transform((v) => !v ? void 0 : v).required("Field is required"),
+            opr: create$6().transform((v) => !v ? void 0 : v).required(`${"col"} is required`),
+            value: create$8().when("col", {
+              is: (col) => {
+                return col && info.filters[col].schema.required;
+              },
+              then: () => {
+                return create$8().required("Value is required");
+              }
+            })
+          })
+        )
+      })
+    )
+  });
+  const defaultProps = {
+    bg: "transparent",
+    size: "sm",
+    c: "gray"
+  };
+  const icon = useProps("ActionIcon", defaultProps, props);
+  useEffect(() => {
+    form.setValues({ filters: [] });
+    form.reset();
+  }, [path]);
+  useEffect(() => {
+    if (queryParams.filters && queryParams.filters.length) {
+      const filtersWithKey = queryParams.filters.filter((filter) => !filter.id).map((filter) => ({
+        ...filter,
+        key: randomId()
+      }));
+      form.setFieldValue(`filters`, filtersWithKey);
+    }
+  }, [queryParams.filters]);
+  const handleSubmit = (data) => {
+    const filtersWithoutKey = data.filters.map(({ key, ...rest }) => rest);
+    const filters = JSON.parse(JSON.stringify(filtersWithoutKey));
+    setQueryParams({ filters, page: 0 });
+    onClose();
+  };
+  const fields = form.values.filters.map((item, index) => /* @__PURE__ */ jsxs(Box, { px: "sm", children: [
+    /* @__PURE__ */ jsxs(Flex, { my: "md", gap: "md", style: { whiteSpace: "nowrap" }, children: [
+      /* @__PURE__ */ jsx(Box, { style: { width: "192px" }, children: info && info.filters && /* @__PURE__ */ jsx(
+        FormFilterField,
+        {
+          form,
+          name: `filters.${index}.col`,
+          items: Object.entries(info.filters).map(([property, value]) => ({
+            label: value.label,
+            value: String(property)
+          })),
+          onChange: (newValue) => {
+            form.setFieldValue(`filters.${index}`, { col: newValue, opr: "", value: "", key: randomId() });
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Box, { style: { width: "192px" }, children: item.col ? /* @__PURE__ */ jsx(
+        FormFilterField$1,
+        {
+          form,
+          name: `filters.${index}.opr`,
+          items: info.filters[item.col].filters.filter((value) => !value.id).map((value) => ({
+            label: value.name,
+            value: value.operator
+          })),
+          onChange: (newValue) => {
+            form.setFieldValue(`filters.${index}`, {
+              col: form.values.filters[index].col,
+              opr: newValue,
+              value: "",
+              key: randomId()
+            });
+          }
+        }
+      ) : null }),
+      /* @__PURE__ */ jsx(Box, { style: { width: "192px" }, children: item.col ? item.opr === "in" ? /* @__PURE__ */ jsx(FormFilterIn, { form, name: `filters.${index}.value` }) : /* @__PURE__ */ jsx(FormField, { form, name: `filters.${index}.value`, schema: info.filters[item.col].schema, filter: true }) : null }),
+      /* @__PURE__ */ jsx(
+        ActionIcon,
+        {
+          bg: icon.bg,
+          size: icon.size,
+          c: icon.c,
+          onClick: () => {
+            form.removeListItem("filters", index);
+          },
+          children: /* @__PURE__ */ jsx(IconTrash, {})
+        }
+      )
+    ] }),
+    form.values.filters.length > 1 && index < form.values.filters.length - 1 ? /* @__PURE__ */ jsx(Divider, { my: "md", labelPosition: "center", label: "AND" }) : null
+  ] }, item.key));
+  return /* @__PURE__ */ jsxs(Box, { component: "form", onSubmit: form.onSubmit(handleSubmit), children: [
+    fields.length === 0 && /* @__PURE__ */ jsx(Box, { style: { width: "642px" }, children: /* @__PURE__ */ jsx(Text, { style: { fontStyle: "italic", padding: "7px" }, size: "sm", c: "dimmed", children: "No filters selected..." }) }),
+    /* @__PURE__ */ jsx(ScrollArea.Autosize, { mah: "40vh", mt: 20, children: fields }),
+    /* @__PURE__ */ jsx(Divider, { my: "sm" }),
+    /* @__PURE__ */ jsxs(Box, { style: { display: "flex", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "subtle",
+          leftSection: /* @__PURE__ */ jsx(IconPlus, {}),
+          onClick: () => {
+            form.insertListItem("filters", { col: "", opr: "", value: "", key: randomId() });
+          },
+          children: "Add Filter"
+        }
+      ),
+      /* @__PURE__ */ jsx(Group, { spacing: "md", children: /* @__PURE__ */ jsx(Button, { type: "submit", children: "Apply" }) })
+    ] })
+  ] });
+}
+export {
+  FilterMenu
+};

package/dist/core/esm/Tables/DataGrid/Toolbar/Filter/FormFilterField.mjs

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { Select } from "@mantine/core";
+function FormFilterField({ form, name, items, onChange, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      data: items,
+      searchable: true,
+      ...form.getInputProps(name),
+      onChange,
+      ...props
+    }
+  );
+}
+export {
+  FormFilterField as default
+};

package/dist/core/esm/Tables/DataGrid/Toolbar/Filter/FormFilterIn.mjs

@@ -0,0 +1,63 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useCombobox, Pill, InputWrapper, Combobox, PillsInput } from "@mantine/core";
+function FormFilterIn({ form, name, label, comboboxProps, ...props }) {
+  const combobox = useCombobox({
+    onDropdownClose: () => combobox.resetSelectedOption(),
+    onDropdownOpen: () => combobox.updateSelectedOptionIndex("active")
+  });
+  const [value, setValue] = useState([]);
+  const [search, setSearch] = useState("");
+  const handleValueSelect = (val) => {
+    if (search !== "") {
+      if (!value.includes(search)) setValue((current) => [...current, search]);
+      setSearch("");
+    }
+  };
+  const handleValueRemove = (val) => setValue((current) => current.filter((v) => v !== val));
+  const values = value.map((item) => /* @__PURE__ */ jsx(Pill, { withRemoveButton: true, onRemove: () => handleValueRemove(item), children: item }, item));
+  useEffect(() => {
+    const formValue = form.getInputProps(name).value;
+    if (formValue) {
+      try {
+        setValue([...formValue]);
+      } catch (error) {
+        console.error("Error parsing JSON:", error);
+      }
+    }
+  }, []);
+  useEffect(() => {
+    form.getInputProps(name).onChange(value);
+  }, [value]);
+  return /* @__PURE__ */ jsx(InputWrapper, { label, children: /* @__PURE__ */ jsxs(Combobox, { store: combobox, onOptionSubmit: handleValueSelect, ...comboboxProps, children: [
+    /* @__PURE__ */ jsx(Combobox.DropdownTarget, { children: /* @__PURE__ */ jsx(PillsInput, { onClick: () => combobox.openDropdown(), children: /* @__PURE__ */ jsxs(Pill.Group, { children: [
+      values,
+      /* @__PURE__ */ jsx(Combobox.EventsTarget, { children: /* @__PURE__ */ jsx(
+        PillsInput.Field,
+        {
+          onFocus: () => combobox.openDropdown(),
+          onBlur: () => combobox.closeDropdown(),
+          value: search,
+          placeholder: "Search values",
+          onChange: (event) => {
+            combobox.updateSelectedOptionIndex();
+            setSearch(event.currentTarget.value);
+          },
+          onKeyDown: (event) => {
+            if (event.key === "Backspace" && search.length === 0) {
+              event.preventDefault();
+              handleValueRemove(value[value.length - 1]);
+            }
+          }
+        }
+      ) })
+    ] }) }) }),
+    /* @__PURE__ */ jsx(Combobox.Dropdown, { children: /* @__PURE__ */ jsx(Combobox.Options, { children: /* @__PURE__ */ jsxs(Combobox.Option, { value: "$create", children: [
+      "+ Create ",
+      search
+    ] }) }) })
+  ] }) });
+}
+export {
+  FormFilterIn
+};

package/dist/core/esm/Tables/DataGrid/Toolbar/Filter/FormOperatorField.mjs

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { Select } from "@mantine/core";
+function FormFilterField({ form, name, items, onChange, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      data: items,
+      searchable: true,
+      ...form.getInputProps(name),
+      onChange,
+      ...props
+    }
+  );
+}
+export {
+  FormFilterField as default
+};

package/dist/core/esm/Tables/DataGrid/Toolbar/Toolbar.mjs

@@ -0,0 +1,30 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Flex } from "@mantine/core";
+import { memo, useMemo } from "react";
+import { Add } from "../../../ActionIcons/Add/Add.mjs";
+import { Download } from "../../../ActionIcons/Download/Download.mjs";
+import { useApi } from "../../../hooks/api/useApi.mjs";
+import { Filter } from "./Filter/Filter.mjs";
+const Toolbar = memo(({ hideAdd, hideFilter, hideDownload, toolbarCustomizer }) => {
+  const { info } = useApi();
+  const customizedToolbar = useMemo(() => {
+    const toolbar = {};
+    Object.entries(toolbarCustomizer).forEach(([key, value]) => {
+      toolbar[key] = value;
+      if (typeof toolbar[key] === "function") {
+        toolbar[key] = toolbar[key]();
+      }
+    });
+    return toolbar;
+  }, [toolbarCustomizer]);
+  const canPost = info.permissions.includes("can_post");
+  return /* @__PURE__ */ jsxs(Flex, { justify: "flex-end", p: "md", gap: "sm", children: [
+    !hideDownload && (customizedToolbar.download || /* @__PURE__ */ jsx(Download, { size: "sm" })),
+    canPost && !hideAdd ? customizedToolbar.add || /* @__PURE__ */ jsx(Add, { size: "sm" }) : null,
+    !hideFilter ? customizedToolbar.filter || /* @__PURE__ */ jsx(Filter, {}) : null
+  ] });
+});
+Toolbar.displayName = "Toolbar";
+export {
+  Toolbar
+};

package/dist/core/esm/Tables/NextGenDataGrid/FallbackWrapper.mjs

@@ -0,0 +1,14 @@
+import { parseFromValuesOrFunc } from "fastapi-rtk/utils";
+import { forwardRef, cloneElement, isValidElement } from "react";
+const FallbackWrapper = forwardRef(({ fallback, functionProps, children }, ref) => {
+  children = parseFromValuesOrFunc(children, functionProps);
+  if (children === null) {
+    return null;
+  }
+  const result = children || fallback;
+  return isValidElement(result) ? cloneElement(result, { ref }) : result;
+});
+FallbackWrapper.displayName = "FallbackWrapper";
+export {
+  FallbackWrapper
+};

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

@@ -0,0 +1,216 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+/* empty css                                                                                                                                                                                             */
+/* empty css           */
+import { deepMerge } from "fastapi-rtk/utils";
+import { useProps, Box } from "@mantine/core";
+import { useMantineReactTable, MantineReactTable } 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/node_modules/mantine-react-table/dist/index.esm.mjs";
+import { forwardRef, useMemo, useEffect } from "react";
+import { AddDialog } from "../../ActionIcons/Add/AddDialog.mjs";
+import { EditDialog } from "../../ActionIcons/Edit/EditDialog.mjs";
+import { LazyLoadWrapper } from "../../Wrappers/LazyLoadWrapper/LazyLoadWrapper.mjs";
+import { useApi } from "../../hooks/api/useApi.mjs";
+import { useForms } from "../../hooks/api/useForms.mjs";
+import { ErrorDialog } from "../DataGrid/ErrorDialog.mjs";
+import { useActions } from "./hooks/useActions.mjs";
+import { useCheckbox } from "./hooks/useCheckbox.mjs";
+import { useColumns } from "./hooks/useColumns/useColumns.mjs";
+import { useData } from "./hooks/useData.mjs";
+import { useEvent } from "./hooks/useEvent.mjs";
+import { useFilters } from "./hooks/useFilters.mjs";
+import { useGlobalFilter } from "./hooks/useGlobalFilter.mjs";
+import { usePagination } from "./hooks/usePagination.mjs";
+import { useQueryParams } from "./hooks/useQueryParams.mjs";
+import { useSize } from "./hooks/useSize.mjs";
+import { useSorting } from "./hooks/useSorting.mjs";
+import { useToolbar } from "./hooks/useToolbar/useToolbar.mjs";
+import { useToolbarAlertBanner } from "./hooks/useToolbarAlertBanner/useToolbarAlertBanner.mjs";
+import { getProps } from "./utils.mjs";
+const baseProps = { enableStickyHeader: true, enableColumnPinning: true };
+const NextGenDataGrid = forwardRef((props, ref) => {
+  var _a, _b, _c;
+  const { info, data, queryParams, refetch, specialKey } = useApi();
+  const propsFromMantineTheme = useProps("NextGenDataGrid", {}, {});
+  const {
+    children,
+    // DataGrid props
+    fetchOnMount = true,
+    hideToolbar,
+    hideActions,
+    hidePagination,
+    hideError,
+    onSelectCheckbox,
+    onClickEntry,
+    bulkActions,
+    // NextGenDataGrid props
+    table,
+    quickFilters,
+    withBorder,
+    columnProps,
+    header,
+    body,
+    form,
+    toolbar = {},
+    //! Temporary add {} until we remove deprecated props
+    textFilterSeparator = ";",
+    // Deprecated props
+    bodySeparator,
+    bodyTruncate,
+    headerCustomizer,
+    bodyCustomizer,
+    toolbarCustomizer,
+    hideAdd,
+    hideDownload,
+    hideFilter,
+    ...rest
+  } = useMemo(() => deepMerge(propsFromMantineTheme, props), [props, propsFromMantineTheme]);
+  if (bodySeparator) {
+    Object.keys(body).forEach((col) => {
+      body[col] = body[col] || {};
+      body[col].separator = body[col].separator || bodySeparator;
+    });
+  }
+  if (bodyTruncate) {
+    Object.keys(body).forEach((col) => {
+      body[col] = body[col] || {};
+      body[col].truncate = body[col].truncate || bodyTruncate;
+    });
+  }
+  if (headerCustomizer) {
+    Object.keys(headerCustomizer).forEach((col) => {
+      header[col] = header[col] || {};
+      header[col].component = headerCustomizer[col].component || headerCustomizer[col];
+    });
+  }
+  if (bodyCustomizer) {
+    Object.keys(bodyCustomizer).forEach((col) => {
+      body[col] = body[col] || {};
+      body[col].component = bodyCustomizer[col].component || bodyCustomizer[col];
+    });
+  }
+  if (toolbarCustomizer) {
+    toolbar.custom = toolbar.custom || toolbarCustomizer;
+  }
+  if (hideAdd) {
+    toolbar.customizer = toolbar.customizer || {};
+    toolbar.customizer.add = toolbar.customizer.add || null;
+  }
+  if (hideDownload) {
+    toolbar.customizer = toolbar.customizer || {};
+    toolbar.customizer.download = toolbar.customizer.download || null;
+  }
+  if (hideFilter) {
+    toolbar.customizer = toolbar.customizer || {};
+    toolbar.customizer.filter = toolbar.customizer.filter || null;
+  }
+  useEffect(() => {
+    if (process.env.NODE_ENV !== "development") {
+      return;
+    }
+    if (bodySeparator) {
+      console.warn("bodySeparator is deprecated, please use body.[col].separator instead");
+    }
+    if (bodyTruncate) {
+      console.warn("bodyTruncate is deprecated, please use body.[col].truncate instead");
+    }
+    if (headerCustomizer) {
+      console.warn("headerCustomizer is deprecated, please use header.[col].component instead");
+    }
+    if (bodyCustomizer) {
+      console.warn("bodyCustomizer is deprecated, please use body.[col].component instead");
+    }
+    if (toolbarCustomizer) {
+      console.warn("toolbarCustomizer is deprecated, please use toolbar.custom instead");
+    }
+    if (hideAdd) {
+      console.warn("hideAdd is deprecated, please use toolbar.customizer.add instead");
+    }
+    if (hideDownload) {
+      console.warn("hideDownload is deprecated, please use toolbar.customizer.download instead");
+    }
+    if (hideFilter) {
+      console.warn("hideFilter is deprecated, please use toolbar.customizer.filter instead");
+    }
+  }, []);
+  const dataProps = useData();
+  const sortingProps = useSorting();
+  const paginationProps = usePagination(hidePagination);
+  const columnsProps = useColumns(columnProps, header, body, textFilterSeparator);
+  const sizeProps = useSize(withBorder);
+  const actionsProps = useActions(hideActions, (_a = getProps(body, specialKey.actions)) == null ? void 0 : _a.component);
+  const globalFilterProps = useGlobalFilter();
+  const toolbarProps = useToolbar(toolbar, quickFilters, hideToolbar);
+  const eventProps = useEvent(onClickEntry);
+  const checkboxProps = useCheckbox(onSelectCheckbox, bulkActions);
+  const filterProps = useFilters();
+  const toolbarAlertBannerProps = useToolbarAlertBanner(toolbar);
+  const mrtProps = useMemo(
+    () => deepMerge(
+      baseProps,
+      { mantinePaperProps: { ref }, getRowId: (originalRow) => originalRow.id },
+      columnsProps,
+      dataProps,
+      sortingProps,
+      paginationProps,
+      sizeProps,
+      actionsProps,
+      globalFilterProps,
+      toolbarProps,
+      eventProps,
+      checkboxProps,
+      filterProps,
+      toolbarAlertBannerProps,
+      table
+    ),
+    [
+      ref,
+      columnsProps,
+      dataProps,
+      sortingProps,
+      paginationProps,
+      sizeProps,
+      actionsProps,
+      globalFilterProps,
+      toolbarProps,
+      eventProps,
+      checkboxProps,
+      filterProps,
+      toolbarAlertBannerProps,
+      table
+    ]
+  );
+  const mrtTable = useMantineReactTable(mrtProps);
+  useQueryParams(mrtTable, header);
+  useEffect(() => {
+    if (!queryParams && fetchOnMount) {
+      refetch();
+    }
+  }, []);
+  useEffect(() => {
+    onSelectCheckbox == null ? void 0 : onSelectCheckbox(Object.keys(mrtTable.getState().rowSelection));
+    bulkActions == null ? void 0 : bulkActions.setSelectedIds(Object.keys(mrtTable.getState().rowSelection));
+  }, [bulkActions, data == null ? void 0 : data.ids, mrtTable.getState().rowSelection, onSelectCheckbox]);
+  const { setView: setViewAdd } = useForms("add");
+  const { setView: setViewEdit } = useForms("edit");
+  useEffect(() => {
+    var _a2, _b2;
+    if ((_a2 = form == null ? void 0 : form.add) == null ? void 0 : _a2.initialView) {
+      setViewAdd(form.add.initialView);
+    }
+    if ((_b2 = form == null ? void 0 : form.edit) == null ? void 0 : _b2.initialView) {
+      setViewEdit(form.edit.initialView);
+    }
+  }, []);
+  return /* @__PURE__ */ jsxs(Box, { h: "100%", w: "100%", pos: "relative", style: { flexGrow: 1 }, children: [
+    /* @__PURE__ */ jsxs(LazyLoadWrapper, { cond: !!info, children: [
+      /* @__PURE__ */ jsx(AddDialog, { jsonForms: form == null ? void 0 : form.add, ...(_b = form == null ? void 0 : form.add) == null ? void 0 : _b.dialogProps }),
+      /* @__PURE__ */ jsx(EditDialog, { jsonForms: form == null ? void 0 : form.edit, ...(_c = form == null ? void 0 : form.edit) == null ? void 0 : _c.dialogProps })
+    ] }),
+    /* @__PURE__ */ jsx(MantineReactTable, { table: mrtTable, ...rest }),
+    children == null ? void 0 : children(mrtTable),
+    !hideError ? /* @__PURE__ */ jsx(ErrorDialog, {}) : null
+  ] });
+});
+NextGenDataGrid.displayName = "NextGenDataGrid";
+export {
+  NextGenDataGrid
+};

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

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { Actions } from "../../../ActionIcons/Actions.mjs";
+import { useApi } from "../../../hooks/api/useApi.mjs";
+import { useAuth } from "../../../hooks/auth/useAuth.mjs";
+import { FallbackWrapper } from "../FallbackWrapper.mjs";
+function useActions(hideActions, component) {
+  const api = useApi();
+  const auth = useAuth();
+  const renderRowActions = useCallback(
+    ({ row, ...rest }) => /* @__PURE__ */ jsx(
+      FallbackWrapper,
+      {
+        fallback: /* @__PURE__ */ jsx(Actions, { id: row.original.id }),
+        functionProps: {
+          api,
+          auth,
+          data: row.original,
+          mrtProps: { row, ...rest }
+        },
+        children: component
+      }
+    ),
+    [api, auth, component]
+  );
+  return { enableEditing: !hideActions, editDisplayMode: "modal", renderRowActions };
+}
+export {
+  useActions
+};

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

@@ -0,0 +1,6 @@
+function useCheckbox(onSelectCheckbox, bulkActions) {
+  return { enableRowSelection: !!onSelectCheckbox || !!bulkActions };
+}
+export {
+  useCheckbox
+};

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

@@ -0,0 +1,80 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { DEBOUNCE_DELAY } from "fastapi-rtk/constants";
+import { Grid, Center, CloseButton, Divider, Text, Stack } from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { useDebouncedValue, useDidUpdate } from "@mantine/hooks";
+import { useMemo, Fragment } from "react";
+import { useApi } from "../../../../hooks/api/useApi.mjs";
+import { FormField } from "../../../DataGrid/FormField/FormField.mjs";
+import { FormFilterIn } from "../../../DataGrid/Toolbar/Filter/FormFilterIn.mjs";
+import { AdvancedFiltersMenu } from "./AdvancedFiltersMenu.mjs";
+function AdvancedFilters({ col }) {
+  const { info, queryParams, setQueryParams } = useApi();
+  const form = useForm({
+    initialValues: {
+      filters: (queryParams == null ? void 0 : queryParams.filters) || []
+    }
+  });
+  const colFilter = useMemo(() => (info == null ? void 0 : info.filters[col]) || {}, [col, info == null ? void 0 : info.filters]);
+  const filterNameMap = useMemo(
+    () => {
+      var _a;
+      return ((_a = colFilter == null ? void 0 : colFilter.filters) == null ? void 0 : _a.reduce((acc, filter) => ({ ...acc, [filter.operator]: filter.name }), {})) || {};
+    },
+    [colFilter == null ? void 0 : colFilter.filters]
+  );
+  const [debounced] = useDebouncedValue(form.getValues(), DEBOUNCE_DELAY);
+  useDidUpdate(() => {
+    const debouncedFilters = debounced.filters.filter((filter) => filter.value);
+    setQueryParams({ filters: debouncedFilters });
+  }, [debounced]);
+  const formFilters = form.getValues().filters;
+  const fields = formFilters.map(
+    (filter, index) => filter.col === col && !filter.id ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Grid.Col, { span: 1.5, py: 0, children: /* @__PURE__ */ jsx(Center, { h: "100%", w: "100%", children: /* @__PURE__ */ jsx(
+        CloseButton,
+        {
+          onClick: () => form.removeListItem("filters", index),
+          size: "md",
+          title: "Remove filter",
+          variant: "outline"
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx(Grid.Col, { span: 10.5, py: 0, children: filter.opr === "in" ? /* @__PURE__ */ jsx(
+        FormFilterIn,
+        {
+          form,
+          name: `filters.${index}.value`,
+          label: filterNameMap[filter.opr],
+          comboboxProps: { withinPortal: false }
+        }
+      ) : /* @__PURE__ */ jsx(
+        FormField,
+        {
+          form,
+          name: `filters.${index}.value`,
+          label: filterNameMap[filter.opr],
+          schema: colFilter.schema,
+          withinPortal: false,
+          filter: true
+        }
+      ) }),
+      index >= 0 && index + 1 < formFilters.length && /* @__PURE__ */ jsx(Grid.Col, { span: 12, py: 0, children: /* @__PURE__ */ jsx(Divider, { my: "sm", label: "AND", align: "center" }) })
+    ] }, `${filter.col}-${index}`) : null
+  ).filter(Boolean);
+  return /* @__PURE__ */ jsxs(Grid, { w: fields.length ? "25rem" : "100%", gap: "md", gutter: "xs", children: [
+    fields.length ? fields : /* @__PURE__ */ jsx(Grid.Col, { span: 12, children: /* @__PURE__ */ jsx(Text, { align: "center", c: "gray", style: { fontStyle: "italic" }, children: "No filters" }) }),
+    /* @__PURE__ */ jsx(Grid.Col, { span: 12, children: /* @__PURE__ */ jsx(Stack, { children: /* @__PURE__ */ jsx(
+      AdvancedFiltersMenu,
+      {
+        col,
+        colFilter: colFilter || { filters: [] },
+        onClick: (filter) => form.insertListItem("filters", filter),
+        withinPortal: false
+      }
+    ) }) })
+  ] });
+}
+export {
+  AdvancedFilters
+};

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

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Menu, Button } from "@mantine/core";
+function AdvancedFiltersMenu({ col, colFilter, onClick, ...props }) {
+  return /* @__PURE__ */ jsxs(Menu, { shadow: "md", width: "target", ...props, children: [
+    /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(Button, { children: "Add filter" }) }),
+    /* @__PURE__ */ jsx(Menu.Dropdown, { children: colFilter.filters.filter((filter) => !filter.id).map((filter) => /* @__PURE__ */ jsx(
+      Menu.Item,
+      {
+        onClick: () => onClick({ col, opr: filter.operator, value: "" }),
+        children: filter.name
+      },
+      `${colFilter.label}-${filter.name}`
+    )) })
+  ] });
+}
+export {
+  AdvancedFiltersMenu
+};

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

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { useMantineTheme, Menu, Text } from "@mantine/core";
+import { fromFilterToFilterFn } from "../../utils.mjs";
+function BasicFilters({ filters, col, opr, table }) {
+  const theme = useMantineTheme();
+  return filters.map((filter) => {
+    const checked = filter.operator === opr;
+    return /* @__PURE__ */ jsx(
+      Menu.Item,
+      {
+        color: checked ? theme.primaryColor : void 0,
+        leftSection: /* @__PURE__ */ jsx(Text, { size: "xl", ta: "center", w: "2ch", style: { transform: "translateY(-0.1em)" }, children: filter.name[0] }),
+        onClick: () => table.setColumnFilterFns((prev) => ({ ...prev, [col]: fromFilterToFilterFn(col, filter.operator) })),
+        value: filter.opr,
+        children: filter.name
+      },
+      filter.operator
+    );
+  });
+}
+export {
+  BasicFilters
+};