fastapi-rtk 0.1.21 → 0.1.23

package/dist/core/cjs/ActionIcons/Download/Download.cjs

@@ -9,49 +9,11 @@ const React = require("react");
 const useApi = require("../../hooks/api/useApi.cjs");
 const IconSeparatorVertical = require("../../../../.external/cjs/@tabler_icons-react@3.18.0_react@18.3.1/@tabler/icons-react/dist/esm/icons/IconSeparatorVertical.cjs");
 const IconQuote = require("../../../../.external/cjs/@tabler_icons-react@3.18.0_react@18.3.1/@tabler/icons-react/dist/esm/icons/IconQuote.cjs");
-const IconInfoCircle = require("../../../../.external/cjs/@tabler_icons-react@3.18.0_react@18.3.1/@tabler/icons-react/dist/esm/icons/IconInfoCircle.cjs");
 const IconDownload = require("../../../../.external/cjs/@tabler_icons-react@3.18.0_react@18.3.1/@tabler/icons-react/dist/esm/icons/IconDownload.cjs");
-const elements = [
-  { name: "John Doe", age: 25, friend: "Jane Doe", "friend.name": "Jane Doe", "friend.age": 30 },
-  { name: "Jane Doe", age: 30, friend: "John Doe", "friend.name": "John Doe", "friend.age": 25 }
-];
-const simplifiedHeaders = [
-  { label: "Name", key: "name" },
-  { label: "Age", key: "age" },
-  { label: "Friend", key: "friend" }
-];
-const detailedHeaders = [
-  { label: "Name", key: "name" },
-  { label: "Age", key: "age" },
-  { label: "Friend Name", key: "friend.name" },
-  { label: "Friend Age", key: "friend.age" }
-];
-const simplifiedRows = elements.map((element) => /* @__PURE__ */ jsxRuntime.jsxs(core.Table.Tr, { children: [
-  /* @__PURE__ */ jsxRuntime.jsx(core.Table.Td, { p: 4, children: element.name }),
-  /* @__PURE__ */ jsxRuntime.jsx(core.Table.Td, { p: 4, children: element.age }),
-  /* @__PURE__ */ jsxRuntime.jsx(core.Table.Td, { p: 4, children: element.friend })
-] }, element.name));
-const detailedRows = elements.map((element) => /* @__PURE__ */ jsxRuntime.jsxs(core.Table.Tr, { children: [
-  /* @__PURE__ */ jsxRuntime.jsx(core.Table.Td, { p: 4, children: element.name }),
-  /* @__PURE__ */ jsxRuntime.jsx(core.Table.Td, { p: 4, children: element.age }),
-  /* @__PURE__ */ jsxRuntime.jsx(core.Table.Td, { p: 4, children: element["friend.name"] }),
-  /* @__PURE__ */ jsxRuntime.jsx(core.Table.Td, { p: 4, children: element["friend.age"] })
-] }, element.name));
-const messages = {
-  simplified: {
-    title: "Simplified version of the data",
-    description: "This is a simplified version of the data. It shows only the properties of the elements and their relationships"
-  },
-  detailed: {
-    title: "Detailed version of the data",
-    description: "This is a detailed version of the data. It shows all the properties of the elements including all the properties of their relationships"
-  }
-};
 const Download = React.memo(({ tooltipProps, ...props }) => {
   const { download } = useApi.useApi();
   const [opened, { toggle, close }] = hooks.useDisclosure();
   const [loading, setLoading] = hooks.useDebouncedState(false, constants.DEBOUNCE_LOADING_DELAY);
-  const [exportMode, setExportMode] = React.useState("simplified");
   const [delimiter, setDelimiter] = React.useState(constants.DEFAULT_DELIMITER);
   const [quotechar, setQuotechar] = React.useState(constants.DEFAULT_QUOTECHAR);
   const actionIconProps = hooks$1.useActionIcon({
@@ -60,62 +22,39 @@ const Download = React.memo(({ tooltipProps, ...props }) => {
   });
   const onDownload = () => {
     setLoading(true);
-    download(void 0, { export_mode: exportMode, delimiter, quotechar }).catch(() => {
+    download(void 0, { delimiter, quotechar }).catch(() => {
     }).finally(() => {
       setLoading(false);
       close();
     });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(core.Modal, { title: "Download data", centered: true, size: "xl", opened, onClose: close, children: /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(core.Group, { grow: true, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          core.Select,
-          {
-            label: "Delimiter",
-            description: "Select the delimiter used in the CSV file",
-            value: delimiter,
-            onChange: setDelimiter,
-            data: constants.DELIMITER_DATA,
-            placeholder: "Select delimiter",
-            allowDeselect: false,
-            leftSection: /* @__PURE__ */ jsxRuntime.jsx(IconSeparatorVertical, {})
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          core.Select,
-          {
-            label: "Quote character",
-            description: "Select the quote character used in the CSV file",
-            value: quotechar,
-            onChange: setQuotechar,
-            data: constants.QUOTECHAR_DATA,
-            placeholder: "Select quote character",
-            leftSection: /* @__PURE__ */ jsxRuntime.jsx(IconQuote, {})
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(core.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
-        core.SegmentedControl,
+    /* @__PURE__ */ jsxRuntime.jsx(core.Modal, { title: "Download data", centered: true, opened, onClose: close, children: /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        core.Select,
         {
-          value: exportMode,
-          onChange: setExportMode,
-          data: [
-            { label: "Simplified", value: "simplified" },
-            { label: "Detailed", value: "detailed" }
-          ]
+          label: "Delimiter",
+          description: "Select the delimiter used in the CSV file",
+          value: delimiter,
+          onChange: setDelimiter,
+          data: constants.DELIMITER_DATA,
+          placeholder: "Select delimiter",
+          allowDeselect: false,
+          leftSection: /* @__PURE__ */ jsxRuntime.jsx(IconSeparatorVertical, {})
         }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(core.Card, { shadow: "md", withBorder: true, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(core.Group, { justify: "space-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(core.Text, { children: messages[exportMode].title }),
-          /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, { label: messages[exportMode].description, children: /* @__PURE__ */ jsxRuntime.jsx(core.ThemeIcon, { variant: "transparent", size: "sm", style: { cursor: "pointer" }, children: /* @__PURE__ */ jsxRuntime.jsx(IconInfoCircle, {}) }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(core.Table, { withColumnBorders: true, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(core.Table.Thead, { children: /* @__PURE__ */ jsxRuntime.jsx(core.Table.Tr, { children: exportMode === "simplified" ? simplifiedHeaders.map((header) => /* @__PURE__ */ jsxRuntime.jsx(core.Table.Th, { p: 4, children: header.label }, header.key)) : detailedHeaders.map((header) => /* @__PURE__ */ jsxRuntime.jsx(core.Table.Th, { p: 4, children: header.label }, header.key)) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(core.Table.Tbody, { children: exportMode === "simplified" ? simplifiedRows : detailedRows })
-        ] })
-      ] }),
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        core.Select,
+        {
+          label: "Quote character",
+          description: "Select the quote character used in the CSV file",
+          value: quotechar,
+          onChange: setQuotechar,
+          data: constants.QUOTECHAR_DATA,
+          placeholder: "Select quote character",
+          leftSection: /* @__PURE__ */ jsxRuntime.jsx(IconQuote, {})
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(core.Group, { justify: "end", children: /* @__PURE__ */ jsxRuntime.jsx(core.Button, { mt: "md", onClick: onDownload, loading, children: "Download" }) })
     ] }) }),
     loading ? /* @__PURE__ */ jsxRuntime.jsx(core.ThemeIcon, { variant: "transparent", size: actionIconProps.size, c: actionIconProps.c, children: /* @__PURE__ */ jsxRuntime.jsx(core.Loader, { size: "100%", color: actionIconProps.c }) }) : /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, { ...tooltipProps, label: (tooltipProps == null ? void 0 : tooltipProps.label) ?? "Download", children: /* @__PURE__ */ jsxRuntime.jsx(core.ActionIcon, { ...actionIconProps, children: /* @__PURE__ */ jsxRuntime.jsx(IconDownload, {}) }) })

package/dist/core/cjs/Tables/DataGrid/Main/Body/Field/Field.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const core = require("@mantine/core");
-const purify_es = require("../../../../../../../.external/cjs/dompurify@3.2.5/dompurify/dist/purify.es.cjs");
+const purify_es = require("../../../../../../../.external/cjs/dompurify@3.2.6/dompurify/dist/purify.es.cjs");
 const React = require("react");
 const FallbackWrapper = require("../../../../NextGenDataGrid/FallbackWrapper.cjs");
 const Field_module = require("./Field.module.css.cjs");

package/dist/core/cjs/Tables/NextGenDataGrid/hooks/useColumns/Body.cjs

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const useApi = require("../../../../hooks/api/useApi.cjs");
+const useAuth = require("../../../../hooks/auth/useAuth.cjs");
+const FallbackWrapper = require("../../FallbackWrapper.cjs");
+const utils = require("../../utils.cjs");
+const MultiLineHighlight = require("./MultiLineHighlight.cjs");
+const Body = ({ body, col, textFilterSeparator, mrtProps }) => {
+  const { table, column, cell } = mrtProps;
+  const api = useApi.useApi();
+  const auth = useAuth.useAuth();
+  const { specialKey } = useApi.useApi();
+  const { component, separator, truncate } = utils.getProps(body, specialKey.all, col);
+  const highlights = React.useMemo(() => {
+    const globalFilter = table.getState().globalFilter;
+    const columnTextFilter = column.getFilterValue();
+    const highlights2 = [];
+    if (globalFilter) {
+      highlights2.push(...globalFilter.split(textFilterSeparator).map((f) => f.trim()));
+    }
+    if (columnTextFilter && typeof columnTextFilter === "string") {
+      highlights2.push(...columnTextFilter.split(textFilterSeparator).map((f) => f.trim()));
+    }
+    return highlights2;
+  }, [column.getFilterValue(), table.getState().globalFilter, textFilterSeparator]);
+  const cellObj = React.useMemo(() => {
+    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 truncate2 = {};
+    const highlight2 = [];
+    if (truncate2) {
+      highlight2.push(...highlight2.map((h) => `${h.slice(0, truncate2)}...`));
+      if (Array.isArray(value)) {
+        truncate2 = value.map((v) => ({
+          original: v,
+          truncated: v.length > truncate2 ? `${v.slice(0, truncate2)}...` : null
+        }));
+      } else {
+        truncate2 = {
+          original: value,
+          truncated: value.length > truncate2 ? `${value.slice(0, truncate2)}...` : null
+        };
+      }
+    }
+    return { value, truncate: truncate2, highlight: highlight2 };
+  }, [cell.getValue(), separator, truncate]);
+  const highlight = React.useMemo(() => [...highlights, ...cellObj.highlight], [highlights, cellObj.highlight]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FallbackWrapper.FallbackWrapper,
+    {
+      fallback: /* @__PURE__ */ jsxRuntime.jsx(MultiLineHighlight.MultiLineHighlight, { highlight, truncate: cellObj.truncate, children: cellObj.value }),
+      functionProps: {
+        api,
+        auth,
+        data: cell.row.original,
+        highlight,
+        componentProps: { value: cellObj.value },
+        mrtProps
+      },
+      children: component
+    }
+  );
+};
+exports.Body = Body;

package/dist/core/cjs/Tables/NextGenDataGrid/hooks/useColumns/ColumnHeaderFilter.cjs

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const core = require("@mantine/core");
+const React = require("react");
+const useApi = require("../../../../hooks/api/useApi.cjs");
+const useAuth = require("../../../../hooks/auth/useAuth.cjs");
+const utils = require("../../utils.cjs");
+const ColumnHeaderFilterInput = require("./ColumnHeaderFilterInput/ColumnHeaderFilterInput.cjs");
+const FilterMenuButton = require("./FilterMenuButton.cjs");
+const FilterModeDescription = require("./FilterModeDescription.cjs");
+const ColumnHeaderFilter = ({
+  children,
+  enableFilterModes,
+  enableAdvancedFilters,
+  filterProps,
+  filterModeDescription,
+  filterMenu,
+  filterState,
+  onFilterClear,
+  onFilterMount,
+  filters,
+  filterFn,
+  mrtProps
+}) => {
+  var _a;
+  const { table, column } = mrtProps;
+  const api = useApi.useApi();
+  const auth = useAuth.useAuth();
+  const functionProps = React.useMemo(() => ({ api, auth, mrtProps }), [api, auth, mrtProps]);
+  const _filterFn = ((_a = table.getState().columnFilterFns) == null ? void 0 : _a[column.id]) || filterFn;
+  const opr = React.useMemo(() => utils.fromFilterFnToFilter(_filterFn).operator, [_filterFn]);
+  const actionIconProps = React.useMemo(() => {
+    const props = { variant: "subtle" };
+    const disabled = !(filters == null ? void 0 : filters.length);
+    if (disabled) {
+      props.disabled = true;
+      props.c = "gray";
+    }
+    return props;
+  }, [filters == null ? void 0 : filters.length]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { w: "100%", gap: "0.25rem", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { align: "flex-end", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ColumnHeaderFilterInput.ColumnHeaderFilterInput,
+        {
+          opr,
+          enableFilterModes,
+          filterProps,
+          filterState,
+          onFilterClear,
+          onFilterMount,
+          filters,
+          actionIconProps,
+          functionProps,
+          mrtProps,
+          children
+        }
+      ),
+      enableFilterModes && /* @__PURE__ */ jsxRuntime.jsx(
+        FilterMenuButton.FilterMenuButton,
+        {
+          table,
+          column,
+          opr,
+          filters,
+          enableAdvancedFilters,
+          filterMenu,
+          actionIconProps,
+          functionProps
+        }
+      )
+    ] }),
+    enableFilterModes && /* @__PURE__ */ jsxRuntime.jsx(
+      FilterModeDescription.FilterModeDescription,
+      {
+        table,
+        column,
+        opr,
+        filters,
+        filterModeDescription,
+        functionProps
+      }
+    )
+  ] });
+};
+exports.ColumnHeaderFilter = ColumnHeaderFilter;

package/dist/core/cjs/Tables/NextGenDataGrid/hooks/useColumns/ColumnHeaderFilterInput/ColumnHeaderFilterInput.cjs

@@ -0,0 +1,180 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const headerinput_module = require("./headerinput.module.css.cjs");
+const constants = require("fastapi-rtk/constants");
+const utils = require("fastapi-rtk/utils");
+const core = require("@mantine/core");
+const form = require("@mantine/form");
+const hooks = require("@mantine/hooks");
+const clsx = require("../../../../../../../.external/cjs/clsx@2.1.1/clsx/dist/clsx.cjs");
+const React = require("react");
+const useApi = require("../../../../../hooks/api/useApi.cjs");
+const useAuth = require("../../../../../hooks/auth/useAuth.cjs");
+const utils$2 = require("../../../utils.cjs");
+const utils$1 = require("../utils.cjs");
+const HeaderInput = require("./HeaderInput.cjs");
+const FilterIconWrapper = React.forwardRef(({ label, disabled, children, ...props }, ref) => {
+  if (disabled) {
+    return React.cloneElement(children, { ref });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, { label, ...props, children: React.cloneElement(children, { ref }) });
+});
+FilterIconWrapper.displayName = "FilterIconWrapper";
+const FilterIndicatorWrapper = React.forwardRef(({ indicator, children, ...props }, ref) => {
+  const { height, ref: elementRef } = hooks.useElementSize();
+  const combinedRefs = hooks.useMergedRef(ref, elementRef);
+  if (!indicator) {
+    return React.cloneElement(children, { ref: combinedRefs });
+  }
+  const heightOffset = 2;
+  //! This is the height offset between the button from ActionIcon and the icon itself
+  return /* @__PURE__ */ jsxRuntime.jsx(core.Indicator, { zIndex: 20, size: 16, label: indicator, styles: { root: { height: height + heightOffset } }, ...props, children: React.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.useApi();
+  const api = useApi.useApi();
+  const auth = useAuth.useAuth();
+  const schema = React.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 = hooks.useDebouncedCallback((value) => {
+    filterState == null ? void 0 : filterState.onChange(value);
+    column.setFilterValue(value);
+  }, (filterState == null ? void 0 : filterState.delay) ?? constants.DEBOUNCE_DELAY);
+  const field = form.useField({ onValueChange: debouncedOnValueChange });
+  const lastOpr = React.useRef(opr);
+  if (lastOpr.current !== opr) {
+    lastOpr.current = opr;
+    console.log("resetting field");
+    field.reset();
+  }
+  const handleClear = React.useCallback(() => {
+    console.log("resetting field");
+    field.reset();
+    column.setFilterValue(void 0);
+    onFilterClear == null ? void 0 : onFilterClear();
+  }, []);
+  React.useEffect(() => {
+    if (!filterState) {
+      return;
+    }
+    field.setValue(filterState == null ? void 0 : filterState.value);
+  }, [filterState == null ? void 0 : filterState.value]);
+  const isMounted = hooks.useMounted();
+  React.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 = React.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]
+  );
+  React.useEffect(() => {
+    if (!isMounted || filterState) {
+      return;
+    }
+    if (!currentHeaderFilter) {
+      handleClear();
+    }
+  }, [currentHeaderFilter]);
+  React.useEffect(() => {
+    onFilterMount == null ? void 0 : onFilterMount({ api: api.getState(), auth: auth.getState(), mrtProps });
+  }, [onFilterMount]);
+  const component = React.useMemo(
+    () => utils.getValueOrDefault(enableFilterModes ? children == null ? void 0 : children[opr] : children, utils$1.getBasicInput(opr, schema)),
+    [children, enableFilterModes, opr, schema]
+  );
+  const clearIconProps = React.useMemo(
+    () => ({ ...actionIconProps, variant: "transparent", c: void 0, size: "sm", onClick: handleClear }),
+    [actionIconProps, handleClear]
+  );
+  const configuration = utils.parseFromValuesOrFunc(
+    enableFilterModes ? utils$2.getProps(filterProps, opr) : filterProps,
+    functionProps
+  );
+  const headerInputProps = React.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.clsx("mrt-filter-text-input", headerinput_module.default.root),
+            ...utils.parseFromValuesOrFunc(mrtProps.table.mantineFilterTextInputProps, mrtProps),
+            ...utils.parseFromValuesOrFunc(mrtProps.column.columnDef.mantineFilterTextInputProps, mrtProps)
+          },
+          selectprops: {
+            className: clsx.clsx("mrt-filter-text-input", headerinput_module.default.root),
+            ...utils.parseFromValuesOrFunc(mrtProps.table.mantineFilterSelectProps || { clearable: true }, mrtProps),
+            ...utils.parseFromValuesOrFunc(mrtProps.column.columnDef.mantineFilterSelectProps, mrtProps)
+          },
+          multiselectprops: {
+            className: clsx.clsx("mrt-filter-text-input", headerinput_module.default.root),
+            ...utils.parseFromValuesOrFunc(mrtProps.table.mantineFilterMultiSelectProps || { clearable: true }, mrtProps),
+            ...utils.parseFromValuesOrFunc(mrtProps.column.columnDef.mantineFilterMultiSelectProps, mrtProps)
+          },
+          dateinputprops: {
+            className: clsx.clsx("mrt-filter-text-input", headerinput_module.default.root, headerinput_module.default["date-filter"]),
+            ...utils.parseFromValuesOrFunc(mrtProps.table.mantineFilterDateInputProps, mrtProps),
+            ...utils.parseFromValuesOrFunc(mrtProps.column.columnDef.mantineFilterDateInputProps, mrtProps)
+          },
+          autocompleteprops: {
+            className: clsx.clsx("mrt-filter-text-input", headerinput_module.default.root),
+            ...utils.parseFromValuesOrFunc(mrtProps.table.mantineFilterAutocompleteProps, mrtProps),
+            ...utils.parseFromValuesOrFunc(mrtProps.column.columnDef.mantineFilterAutocompleteProps, mrtProps)
+          }
+        },
+        ref: (node) => {
+          if (node) {
+            mrtProps.table.refs.filterInputRefs.current[`${mrtProps.column.id}-0`] = node;
+          }
+        },
+        clearIcon: field.isDirty() && /* @__PURE__ */ jsxRuntime.jsx(core.CloseButton, { ...clearIconProps }),
+        ...configuration,
+        cleariconprops: clearIconProps
+      };
+    },
+    [clearIconProps, configuration, field, filters.length, mrtProps]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(HeaderInput.HeaderInput, { component, field, ...field.getInputProps(), ...headerInputProps });
+}
+exports.ColumnHeaderFilterInput = ColumnHeaderFilterInput;

package/dist/core/cjs/Tables/NextGenDataGrid/hooks/useColumns/FilterMenuButton.cjs

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

package/dist/core/cjs/Tables/NextGenDataGrid/hooks/useColumns/FilterModeDescription.cjs

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const core = require("@mantine/core");
+const index_esm = require("../../../../../../.external/cjs/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.cjs");
+const React = require("react");
+const FallbackWrapper = require("../../FallbackWrapper.cjs");
+const utils = require("../../utils.cjs");
+const FilterModeDescription = ({ table, column, opr, filters, filterModeDescription, functionProps }) => {
+  const filterName = React.useMemo(() => {
+    var _a;
+    return (_a = filters == null ? void 0 : filters.find((f) => f.operator === opr)) == null ? void 0 : _a.name;
+  }, [filters, opr]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FallbackWrapper.FallbackWrapper,
+    {
+      fallback: filters.length ? /* @__PURE__ */ jsxRuntime.jsx(core.Input.Description, { size: "xs", children: table.options.localization.filterMode.replace(
+        "{filterType}",
+        index_esm.localizedFilterOption(utils.getProps(table.options.localization, column.id), filterName) || index_esm.localizedFilterOption(table.options.localization, filterName) || filterName
+      ) }) : null,
+      functionProps: { ...functionProps, componentProps: { value: filterName } },
+      children: filterModeDescription
+    }
+  );
+};
+exports.FilterModeDescription = FilterModeDescription;