fastapi-rtk 2.1.5 → 2.2.0

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

@@ -5,26 +5,27 @@ const utils = require("fastapi-rtk/utils");
 const core = require("@mantine/core");
 const React = require("react");
 const Actions = require("../../../../ActionIcons/Actions.cjs");
+const resolveCustomizerEntry = require("../resolveCustomizerEntry.cjs");
+const selection = require("../selection.cjs");
 const Field = require("./Field/Field.cjs");
 const Row = require("./Row/Row.cjs");
-function ActionCustomElement({ bodyCustomizer, actionColumn, id, entry }) {
-  let ActionCustomElement2 = bodyCustomizer == null ? void 0 : bodyCustomizer[actionColumn];
-  if (typeof ActionCustomElement2 === "function") {
-    ActionCustomElement2 = ActionCustomElement2({ id, ...entry });
-  }
-  return ActionCustomElement2 === null ? null : ActionCustomElement2 || /* @__PURE__ */ jsxRuntime.jsx(Actions.Actions, { id });
+function ActionCustomElement(props) {
+  const { bodyCustomizer, actionColumn, id, entry } = props;
+  const resolved = resolveCustomizerEntry.resolveCustomizerEntry(bodyCustomizer == null ? void 0 : bodyCustomizer[actionColumn], { id, ...entry });
+  return resolved === null ? null : resolved || /* @__PURE__ */ jsxRuntime.jsx(Actions.Actions, { id });
 }
-function Body({
-  data,
-  loading,
-  hideActions,
-  hideCheckbox,
-  selection,
-  toggleRow,
-  onClickEntry,
-  bodyCustomizer,
-  bodySeparator
-}) {
+function Body(props) {
+  const {
+    data,
+    loading,
+    hideActions,
+    hideCheckbox,
+    selection: selection$1,
+    toggleRow,
+    onClickEntry,
+    bodyCustomizer,
+    bodySeparator
+  } = props;
   const actionColumn = data.list_columns.includes("actions") ? "_actions" : "actions";
   const bodySeparatorAllKey = React.useMemo(
     () => (data == null ? void 0 : data.list_columns.includes("all")) ? "_all" : "all",
@@ -37,7 +38,7 @@ function Body({
         core.Checkbox,
         {
           pl: 2,
-          checked: selection.includes(id),
+          checked: selection.isSelected(selection$1, id),
           onChange: () => {
             toggleRow(id);
           }
@@ -53,10 +54,7 @@ function Body({
         }
       ) }) : null,
       data.list_columns.map((column, columnIndex) => {
-        let customElement = bodyCustomizer == null ? void 0 : bodyCustomizer[column];
-        if (typeof customElement === "function") {
-          customElement = customElement({ id, ...entry });
-        }
+        const customElement = resolveCustomizerEntry.resolveCustomizerEntry(bodyCustomizer == null ? void 0 : bodyCustomizer[column], { id, ...entry });
         let value = utils.getValue(entry, column);
         if (typeof value === "number") {
           value = value.toLocaleString();
@@ -81,7 +79,7 @@ function Body({
           columnIndex
         );
       })
-    ] }, utils.convertId(id));
+    ] }, String(utils.convertId(id)));
   }) : /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
     "td",
     {

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

@@ -6,32 +6,28 @@ const purify_es = require("../../../../../../../.external/cjs/dompurify@3.3.1/do
 const React = require("react");
 const FallbackWrapper = require("../../../../NextGenDataGrid/FallbackWrapper.cjs");
 const Field_module = require("./Field.module.css.cjs");
-const Field = React.memo(
-  ({ id, entry, loading, rightBorder, children, onClickEntry, customElement, sanitize, ...props }) => {
-    const defaultProps = {
-      text: { style: { whiteSpace: "nowrap", overflow: "ellipsis" } }
-    };
-    const { text } = core.useProps("Field", defaultProps, props);
-    const functionStyle = {};
-    Object.entries(text).forEach(([key, value]) => {
-      if (typeof value === "function") {
-        functionStyle[key] = value(entry);
-      }
-    });
-    const getStyles = core.useStyles({
-      name: "Field",
-      props,
-      classes: Field_module.default
-    });
-    return /* @__PURE__ */ jsxRuntime.jsx(core.Table.Td, { ...getStyles("field"), onClick: onClickEntry ? () => onClickEntry(id, entry) : null, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(core.Box, { w: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(core.Skeleton, { visible: loading, children: /* @__PURE__ */ jsxRuntime.jsx(
-      FallbackWrapper.FallbackWrapper,
-      {
-        fallback: Array.isArray(children) ? children.map((child, index) => /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ...text, ...functionStyle, children: sanitize ? purify_es.sanitize(child) : child }, index)) : React.isValidElement(children) ? children : /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ...text, ...functionStyle, children: sanitize ? purify_es.sanitize(children) : children }),
-        functionProps: entry,
-        children: customElement
-      }
-    ) }) }) });
-  }
-);
+const Field = React.memo((props) => {
+  const { id, entry, loading, rightBorder, children, onClickEntry, customElement, sanitize, ...rest } = props;
+  const defaultProps = {
+    text: { style: { whiteSpace: "nowrap", overflow: "ellipsis" } }
+  };
+  const { text } = core.useProps("Field", defaultProps, rest);
+  const functionStyle = Object.fromEntries(
+    Object.entries(text).filter(([, value]) => typeof value === "function").map(([key, value]) => [key, value(entry)])
+  );
+  const getStyles = core.useStyles({
+    name: "Field",
+    props: rest,
+    classes: Field_module.default
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(core.Table.Td, { ...getStyles("field"), onClick: onClickEntry ? () => onClickEntry(id, entry) : void 0, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(core.Box, { w: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(core.Skeleton, { visible: loading, children: /* @__PURE__ */ jsxRuntime.jsx(
+    FallbackWrapper.FallbackWrapper,
+    {
+      fallback: Array.isArray(children) ? children.map((child, index) => /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ...text, ...functionStyle, children: sanitize ? purify_es.sanitize(child) : child }, index)) : React.isValidElement(children) ? children : /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ...text, ...functionStyle, children: sanitize ? purify_es.sanitize(children) : children }),
+      functionProps: entry ?? {},
+      children: customElement
+    }
+  ) }) }) });
+});
 Field.displayName = "Field";
 exports.Field = Field;

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const field = "_field_zdaf7_1";
-const rtl = "_rtl_zdaf7_7";
-const borderRight = "_borderRight_zdaf7_12";
+const field = "_field_9256j_1";
+const rtl = "_rtl_9256j_7";
+const borderRight = "_borderRight_9256j_12";
 const classes = {
   field,
   rtl,

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

@@ -3,10 +3,12 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const core = require("@mantine/core");
 const Row_module = require("./Row.module.css.cjs");
-function Row({ entry, selected, children }) {
+function Row(props) {
+  const { entry, selected, children } = props;
   const getStyles = core.useStyles({
     name: "Row",
-    classes: Row_module.default
+    classes: Row_module.default,
+    props: {}
   });
   const row = core.useProps("Row", {}, {});
   Object.entries(row).forEach(([key, value]) => {
@@ -14,8 +16,8 @@ function Row({ entry, selected, children }) {
       row[key] = value(entry);
     }
   });
-  var { className, style } = getStyles("row");
-  className = `${className} ${selected ? Row_module.default.selected : ""}`;
-  return /* @__PURE__ */ jsxRuntime.jsx(core.Table.Tr, { className, style: { ...style }, ...row, children });
+  const { className, style } = getStyles("row");
+  const rowClassName = `${className} ${selected ? Row_module.default.selected : ""}`;
+  return /* @__PURE__ */ jsxRuntime.jsx(core.Table.Tr, { className: rowClassName, style: { ...style }, ...row, children });
 }
 exports.Row = Row;

package/dist/core/cjs/Tables/DataGrid/Main/Body/Row/Row.module.css.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const row = "_row_138r2_1";
-const selected = "_selected_138r2_5";
+const row = "_row_16s8e_1";
+const selected = "_selected_16s8e_5";
 const classes = {
   row,
   selected

package/dist/core/cjs/Tables/DataGrid/Main/Header/FieldTitle/FieldTitle.cjs

@@ -6,20 +6,10 @@ const core = require("@mantine/core");
 const hooks = require("@mantine/hooks");
 const chevronDown = require("../../../../../_virtual/chevron-down.cjs");
 const chevronUp = require("../../../../../_virtual/chevron-up.cjs");
-const useApi = require("../../../../../hooks/api/useApi.cjs");
-function FieldTitle({
-  column,
-  label,
-  orderColumn,
-  related,
-  toggleAll,
-  allChecked,
-  classNames,
-  styles,
-  customElement,
-  ...props
-}) {
-  const { queryParams, setQueryParams, loading } = useApi.useApi();
+const contexts = require("fastapi-rtk/contexts");
+function FieldTitle(props) {
+  const { column, label, orderColumn, related, toggleAll, allChecked, classNames, styles, customElement, ...rest } = props;
+  const { queryParams, setQueryParams, loading } = contexts.useApi();
   const defaultProps = {
     fw: 700,
     size: "sm",
@@ -32,22 +22,21 @@ function FieldTitle({
     classes: FieldTitle_module.default,
     classNames,
     styles,
-    props
+    props: rest
   });
-  const title = core.useProps("FieldTitle", defaultProps, props);
+  const title = core.useProps("FieldTitle", defaultProps, rest);
   const { hovered, ref } = hooks.useHover();
-  const selectedColumn = orderColumn && queryParams.order_column === orderColumn;
+  const selectedColumn = orderColumn && (queryParams == null ? void 0 : queryParams.order_column) === orderColumn;
   const wrapperProps = getStyles("wrapper");
   wrapperProps.style.cursor = orderColumn ? wrapperProps.style.cursor : "auto";
   return /* @__PURE__ */ jsxRuntime.jsx(
     core.Table.Th,
     {
-      className: FieldTitle_module.default.fieldTitleRoot,
       ...getStyles("root"),
       onClick: orderColumn && !loading ? () => setQueryParams({
         order_column: orderColumn,
-        order_direction: queryParams.order_direction === "asc" ? "desc" : "asc"
-      }) : null,
+        order_direction: (queryParams == null ? void 0 : queryParams.order_direction) === "asc" ? "desc" : "asc"
+      }) : void 0,
       children: /* @__PURE__ */ jsxRuntime.jsx(core.Box, { ref, ...wrapperProps, children: column === "Checkbox" ? /* @__PURE__ */ jsxRuntime.jsx(core.Checkbox, { pb: 5, pl: 2, onChange: toggleAll, checked: allChecked }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           core.Box,
@@ -64,9 +53,9 @@ function FieldTitle({
           {
             label: "rel",
             style: { indicator: { top: `-1px !important`, right: `-2px !important`, padding: "4px" } },
-            children: /* @__PURE__ */ jsxRuntime.jsx(core.Box, { ...getStyles("icon"), children: selectedColumn ? queryParams.order_direction === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(chevronDown, { style: { height: 14, width: 14 } }) : /* @__PURE__ */ jsxRuntime.jsx(chevronUp, { style: { height: 14, width: 14 } }) : null })
+            children: /* @__PURE__ */ jsxRuntime.jsx(core.Box, { ...getStyles("icon"), children: selectedColumn ? (queryParams == null ? void 0 : queryParams.order_direction) === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(chevronDown, { style: { height: 14, width: 14 } }) : /* @__PURE__ */ jsxRuntime.jsx(chevronUp, { style: { height: 14, width: 14 } }) : null })
           }
-        ) }) : /* @__PURE__ */ jsxRuntime.jsx(core.Box, { ...getStyles("icon"), children: selectedColumn ? queryParams.order_direction === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(chevronDown, { style: { height: 14, width: 14 } }) : /* @__PURE__ */ jsxRuntime.jsx(chevronUp, { style: { height: 14, width: 14 } }) : null })
+        ) }) : /* @__PURE__ */ jsxRuntime.jsx(core.Box, { ...getStyles("icon"), children: selectedColumn ? (queryParams == null ? void 0 : queryParams.order_direction) === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(chevronDown, { style: { height: 14, width: 14 } }) : /* @__PURE__ */ jsxRuntime.jsx(chevronUp, { style: { height: 14, width: 14 } }) : null })
       ] }) })
     }
   );

package/dist/core/cjs/Tables/DataGrid/Main/Header/Header.cjs

@@ -3,22 +3,21 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const core = require("@mantine/core");
 const React = require("react");
+const resolveCustomizerEntry = require("../resolveCustomizerEntry.cjs");
 const FieldTitle = require("./FieldTitle/FieldTitle.cjs");
-const Header = React.memo(({ data, info, hideActions, hideCheckbox, allChecked, toggleAll, headerCustomizer }) => {
+const Header = React.memo((props) => {
+  const { data, info, hideActions, hideCheckbox, allChecked, toggleAll, headerCustomizer } = props;
   const actionColumn = data.list_columns.includes("actions") ? "_actions" : "actions";
-  let ActionCustomElement = headerCustomizer == null ? void 0 : headerCustomizer[actionColumn];
-  if (typeof ActionCustomElement === "function") {
-    ActionCustomElement = ActionCustomElement();
-  }
+  const ActionCustomElement = resolveCustomizerEntry.resolveCustomizerEntry(headerCustomizer == null ? void 0 : headerCustomizer[actionColumn], "Actions");
   return /* @__PURE__ */ jsxRuntime.jsx(core.Table.Thead, { children: /* @__PURE__ */ jsxRuntime.jsxs(core.Table.Tr, { children: [
     !hideCheckbox ? /* @__PURE__ */ jsxRuntime.jsx(FieldTitle.FieldTitle, { data, column: "Checkbox", allChecked, toggleAll }) : null,
     !hideActions ? /* @__PURE__ */ jsxRuntime.jsx(FieldTitle.FieldTitle, { column: "Actions", customElement: ActionCustomElement }) : null,
     data.list_columns.map((column) => {
       var _a;
-      let customElement = headerCustomizer == null ? void 0 : headerCustomizer[column];
-      if (typeof customElement === "function") {
-        customElement = customElement(data.label_columns[column]);
-      }
+      const customElement = resolveCustomizerEntry.resolveCustomizerEntry(
+        headerCustomizer == null ? void 0 : headerCustomizer[column],
+        data.label_columns[column] ?? column
+      );
       return customElement === null ? null : /* @__PURE__ */ jsxRuntime.jsx(
         FieldTitle.FieldTitle,
         {

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

@@ -1,88 +1,94 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const utils = require("fastapi-rtk/utils");
 const core = require("@mantine/core");
 const React = require("react");
-const useApi = require("../../../hooks/api/useApi.cjs");
+const contexts = require("fastapi-rtk/contexts");
 const Body = require("./Body/Body.cjs");
 const Header = require("./Header/Header.cjs");
 const Main_module = require("./Main.module.css.cjs");
-function Main({
-  bulkActions,
-  hideActions,
-  loading,
-  onSelectCheckbox,
-  onClickEntry,
-  hideCheckbox,
-  hideDownload,
-  headerCustomizer,
-  bodyCustomizer,
-  bodySeparator,
-  ...props
-}) {
+const selection = require("./selection.cjs");
+function Main(props) {
+  const {
+    bulkActions,
+    hideActions,
+    loading,
+    onSelectCheckbox,
+    onClickEntry,
+    hideCheckbox,
+    hideDownload,
+    headerCustomizer,
+    bodyCustomizer,
+    bodySeparator,
+    ...rest
+  } = props;
   const theme = core.useMantineTheme();
-  const defaultProps = core.Table.extend({
+  const defaultProps = {
+    stickyHeader: true,
     highlightOnHover: true,
     striped: true,
     horizontalSpacing: "md",
     verticalSpacing: "sm"
-  });
-  const table = core.useProps("DatagridTable", defaultProps, props);
-  const { data, info } = useApi.useApi();
-  const [selection, setSelection] = React.useState([]);
+  };
+  const table = core.useProps("DatagridTable", defaultProps, rest);
+  const { data, info } = contexts.useApi();
+  const [selection$1, setSelection] = React.useState([]);
   const [allChecked, setAllChecked] = React.useState(false);
   const toggleRow = (id) => {
-    setSelection((current) => current.includes(id) ? current.filter((item) => item !== id) : [...current, id]);
+    setSelection((current) => selection.toggleSelection(current, id));
   };
   const toggleAll = () => {
-    setSelection((current) => current.length === data.ids.length ? [] : data.ids.map((item, index) => item));
+    setSelection((current) => current.length === data.ids.length ? [] : data.ids.map((item) => item));
   };
   React.useEffect(() => {
-    setAllChecked(selection.length === data.result.length && selection.length > 0);
-    onSelectCheckbox ? onSelectCheckbox(selection) : null;
-    bulkActions == null ? void 0 : bulkActions.setSelectedIds(selection.map((item) => item));
-  }, [selection]);
+    setAllChecked(selection$1.length === data.result.length && selection$1.length > 0);
+    if (onSelectCheckbox) {
+      onSelectCheckbox(selection$1);
+    }
+    bulkActions == null ? void 0 : bulkActions.setSelectedIds(selection$1.map((item) => utils.convertId(item)));
+  }, [selection$1]);
   React.useEffect(() => {
     setSelection([]);
-    onSelectCheckbox ? onSelectCheckbox([]) : null;
-  }, [data]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    core.ScrollArea,
-    {
-      options: { className: theme.colorScheme === "dark" ? "os-theme-light" : void 0 },
-      style: { flex: 1, flexDirection: "column" },
-      classNames: Main_module.default,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(core.Table, { stickyHeader: true, ...table, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Header.Header,
-          {
-            data,
-            info,
-            hideActions,
-            hideCheckbox,
-            allChecked,
-            setSelection,
-            toggleAll,
-            headerCustomizer
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Body.Body,
-          {
-            data,
-            loading,
-            hideActions,
-            hideCheckbox,
-            selection,
-            setSelection,
-            toggleRow,
-            onClickEntry,
-            bodyCustomizer,
-            bodySeparator
-          }
-        )
-      ] })
+    if (onSelectCheckbox) {
+      onSelectCheckbox([]);
     }
-  );
+  }, [data]);
+  const scrollAreaProps = {
+    options: { className: theme.colorScheme === "dark" ? "os-theme-light" : void 0 },
+    // #MUSTASSERT MantineTheme has no `colorScheme` field in v9; legacy v6 access path preserved verbatim
+    style: { flex: 1, flexDirection: "column" },
+    classNames: Main_module.default
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(core.ScrollArea, { ...scrollAreaProps, children: /* @__PURE__ */ jsxRuntime.jsxs(core.Table, { ...table, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Header.Header,
+      {
+        data,
+        info,
+        hideActions,
+        hideCheckbox,
+        allChecked,
+        setSelection,
+        toggleAll,
+        headerCustomizer
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Body.Body,
+      {
+        data,
+        loading,
+        hideActions,
+        hideCheckbox,
+        selection: selection$1,
+        setSelection,
+        toggleRow,
+        onClickEntry,
+        bodyCustomizer,
+        bodySeparator
+      }
+    )
+  ] }) });
 }
 exports.Main = Main;

package/dist/core/cjs/Tables/DataGrid/Main/Main.module.css.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const scrollbar = "_scrollbar_isyo2_1";
+const scrollbar = "_scrollbar_zav5a_1";
 const classes = {
   scrollbar
 };

package/dist/core/cjs/Tables/DataGrid/Main/resolveCustomizerEntry.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const utils = require("fastapi-rtk/utils");
+const resolveCustomizerEntry = (entry, arg) => {
+  const fromFactory = utils.parseFromValuesOrFunc(entry, arg);
+  if (fromFactory !== null && typeof fromFactory === "object" && "component" in fromFactory) {
+    return utils.parseFromValuesOrFunc(fromFactory.component, arg) ?? null;
+  }
+  return fromFactory;
+};
+exports.resolveCustomizerEntry = resolveCustomizerEntry;

package/dist/core/cjs/Tables/DataGrid/Main/selection.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const utils = require("fastapi-rtk/utils");
+function isSelected(selection, id) {
+  const key = utils.convertId(id);
+  return selection.some((item) => utils.convertId(item) === key);
+}
+function toggleSelection(selection, id) {
+  const key = utils.convertId(id);
+  if (selection.some((item) => utils.convertId(item) === key)) {
+    return selection.filter((item) => utils.convertId(item) !== key);
+  }
+  return [...selection, id];
+}
+exports.isSelected = isSelected;
+exports.toggleSelection = toggleSelection;

package/dist/core/cjs/Tables/DataGrid/Pagination/Pagination.cjs

@@ -3,9 +3,10 @@ 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 Pagination = React.memo(({ counter, ...props }) => {
-  const { data, queryParams, setQueryParams } = useApi.useApi();
+const contexts = require("fastapi-rtk/contexts");
+const Pagination = React.memo((props) => {
+  const { counter, ...rest } = props;
+  const { data, queryParams, setQueryParams } = contexts.useApi();
   const theme = core.useMantineTheme();
   const pageSizes = [
     { value: "10", label: "10" },
@@ -85,10 +86,10 @@ const Pagination = React.memo(({ counter, ...props }) => {
             core.Pagination,
             {
               size: "sm",
-              total: Math.ceil(data.count / rowsPerPage),
+              total: Math.ceil(data.count / Number(rowsPerPage)),
               value: cachedPage + 1,
               onChange: handlePageChange,
-              ...props
+              ...rest
             }
           ),
           counter && data ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [

package/dist/core/cjs/Tables/DataGrid/Toolbar/Filter/Filter.cjs

@@ -4,10 +4,11 @@ const jsxRuntime = require("react/jsx-runtime");
 const core = require("@mantine/core");
 const React = require("react");
 const filter = require("../../../../_virtual/filter.cjs");
-const useApi = require("../../../../hooks/api/useApi.cjs");
+const contexts = require("fastapi-rtk/contexts");
 const FilterMenu = require("./FilterMenu.cjs");
 function Filter(...props) {
-  const { queryParams } = useApi.useApi();
+  var _a;
+  const { queryParams } = contexts.useApi();
   const defaultProps = {
     bg: "transparent",
     size: "sm",
@@ -16,7 +17,7 @@ function Filter(...props) {
   const icon = core.useProps("ActionIcon", defaultProps, props);
   const [opened, setOpened] = React.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(core.Popover, { opened, position: "bottom-end", onClose: () => setOpened(false), closeOnClickOutside: false, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(core.Popover.Target, { children: /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, { opened: opened ? false : null, label: "Filter", children: (queryParams == null ? void 0 : queryParams.filters.filter((f) => !f.id).length) != 0 ? /* @__PURE__ */ jsxRuntime.jsx(core.Indicator, { zIndex: 20, size: 16, label: queryParams == null ? void 0 : queryParams.filters.length, children: /* @__PURE__ */ jsxRuntime.jsx(core.ActionIcon, { bg: icon.bg, size: icon.size, c: icon.c, onClick: () => setOpened(true), children: /* @__PURE__ */ jsxRuntime.jsx(filter, {}) }) }) : /* @__PURE__ */ jsxRuntime.jsx(core.ActionIcon, { bg: icon.bg, size: icon.size, c: icon.c, onClick: () => setOpened(true), children: /* @__PURE__ */ jsxRuntime.jsx(filter, {}) }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(core.Popover.Target, { children: /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, { opened: opened ? false : void 0, label: "Filter", children: ((_a = queryParams == null ? void 0 : queryParams.filters) == null ? void 0 : _a.filter((f) => !f.id).length) != 0 ? /* @__PURE__ */ jsxRuntime.jsx(core.Indicator, { zIndex: 20, size: 16, label: queryParams == null ? void 0 : queryParams.filters.length, children: /* @__PURE__ */ jsxRuntime.jsx(core.ActionIcon, { bg: icon.bg, size: icon.size, c: icon.c, onClick: () => setOpened(true), children: /* @__PURE__ */ jsxRuntime.jsx(filter, {}) }) }) : /* @__PURE__ */ jsxRuntime.jsx(core.ActionIcon, { bg: icon.bg, size: icon.size, c: icon.c, onClick: () => setOpened(true), children: /* @__PURE__ */ jsxRuntime.jsx(filter, {}) }) }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(core.Popover.Dropdown, { px: "xs", children: [
       /* @__PURE__ */ jsxRuntime.jsx(core.Box, { style: { position: "absolute", top: 4, right: 4 }, children: /* @__PURE__ */ jsxRuntime.jsx(core.CloseButton, { title: "Filters", onClick: () => setOpened(false) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(

package/dist/core/cjs/Tables/DataGrid/Toolbar/Filter/FilterMenu.cjs

@@ -9,13 +9,14 @@ const React = require("react");
 const index_esm = require("../../../../../../.external/cjs/yup@1.7.1/yup/index.esm.cjs");
 const plus = require("../../../../_virtual/plus.cjs");
 const trash = require("../../../../_virtual/trash.cjs");
-const useApi = require("../../../../hooks/api/useApi.cjs");
+const contexts = require("fastapi-rtk/contexts");
 const FormField = require("../../FormField/FormField.cjs");
 const FormFilterField = require("./FormFilterField.cjs");
 const FormFilterIn = require("./FormFilterIn.cjs");
 const FormOperatorField = require("./FormOperatorField.cjs");
-function FilterMenu({ onClose, ...props }) {
-  const { info, queryParams, setQueryParams, path } = useApi.useApi();
+function FilterMenu(props) {
+  const { onClose, ...rest } = props;
+  const { info, queryParams, setQueryParams, path } = contexts.useApi();
   const form$1 = form.useForm({
     initialValues: {
       filters: []
@@ -38,13 +39,14 @@ function FilterMenu({ onClose, ...props }) {
         )
       })
     )
+    // #MUSTASSERT #MUSTUNKNOWN `yupResolver` returns a validator typed over `Record<string, unknown>`; bridge through `unknown` to the form's `FilterMenuFormValues` shape
   });
   const defaultProps = {
     bg: "transparent",
     size: "sm",
     c: "gray"
   };
-  const icon = core.useProps("ActionIcon", defaultProps, props);
+  const icon = core.useProps("ActionIcon", defaultProps, rest);
   React.useEffect(() => {
     form$1.setValues({ filters: [] });
     form$1.reset();
@@ -59,7 +61,7 @@ function FilterMenu({ onClose, ...props }) {
     }
   }, [queryParams.filters]);
   const handleSubmit = (data) => {
-    const filtersWithoutKey = data.filters.map(({ key, ...rest }) => rest);
+    const filtersWithoutKey = data.filters.map(({ key, ...rest2 }) => rest2);
     const filters = JSON.parse(JSON.stringify(filtersWithoutKey));
     setQueryParams({ filters, page: 0 });
     onClose();
@@ -76,7 +78,7 @@ function FilterMenu({ onClose, ...props }) {
             value: String(property)
           })),
           onChange: (newValue) => {
-            form$1.setFieldValue(`filters.${index2}`, { col: newValue, opr: "", value: "", key: hooks.randomId() });
+            form$1.setFieldValue(`filters.${index2}`, { col: newValue ?? "", opr: "", value: "", key: hooks.randomId() });
           }
         }
       ) }),
@@ -90,9 +92,10 @@ function FilterMenu({ onClose, ...props }) {
             value: value.operator
           })),
           onChange: (newValue) => {
+            var _a;
             form$1.setFieldValue(`filters.${index2}`, {
-              col: form$1.values.filters[index2].col,
-              opr: newValue,
+              col: ((_a = form$1.values.filters[index2]) == null ? void 0 : _a.col) ?? "",
+              opr: newValue ?? "",
               value: "",
               key: hooks.randomId()
             });
@@ -131,7 +134,7 @@ function FilterMenu({ onClose, ...props }) {
           children: "Add Filter"
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(core.Group, { spacing: "md", children: /* @__PURE__ */ jsxRuntime.jsx(core.Button, { type: "submit", children: "Apply" }) })
+      /* @__PURE__ */ jsxRuntime.jsx(core.Group, { gap: "md", children: /* @__PURE__ */ jsxRuntime.jsx(core.Button, { type: "submit", children: "Apply" }) })
     ] })
   ] });
 }

package/dist/core/cjs/Tables/DataGrid/Toolbar/Filter/FormFilterField.cjs

@@ -1,16 +1,8 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
 const core = require("@mantine/core");
-function FormFilterField({ form, name, items, onChange, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    core.Select,
-    {
-      data: items,
-      searchable: true,
-      ...form.getInputProps(name),
-      onChange,
-      ...props
-    }
-  );
+function FormFilterField(props) {
+  const { form, name, items, onChange, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(core.Select, { data: items, searchable: true, ...form.getInputProps(name), onChange, ...rest });
 }
 module.exports = FormFilterField;