fastapi-rtk 0.1.13 → 0.1.14

package/dist/core/esm/Tables/DataGrid/FormField/Inputs/FormRelatedListSelect.mjs

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import { MultiSelect } from "@mantine/core";
+import { convertId } from "../../../../Wrappers/ApiProvider/utils/convertId.mjs";
+function FormRelatedListSelect({ form, name, items, ...props }) {
+  const data = items.map((item) => ({ value: String(convertId(item.id)), label: item.value }));
+  const currentItems = Array.isArray(form.getInputProps(name).value) ? form.getInputProps(name).value.map((value) => typeof value === "object" ? String(convertId(value.id)) : String(value)) : [];
+  return /* @__PURE__ */ jsx(MultiSelect, { data, searchable: true, ...form.getInputProps(name), value: currentItems || [], ...props });
+}
+export {
+  FormRelatedListSelect
+};

package/dist/core/esm/Tables/DataGrid/FormField/Inputs/FormRelatedSelect.mjs

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { Select } from "@mantine/core";
+import { convertId } from "../../../../Wrappers/ApiProvider/utils/convertId.mjs";
+function FormRelatedSelect({ form, name, items, filter, ...props }) {
+  var _a;
+  const data = items.map((item) => ({
+    value: String(convertId(item.id)),
+    label: item.value
+  }));
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      data,
+      searchable: true,
+      ...form.getInputProps(name),
+      onChange: (value) => {
+        if (filter) {
+          form.setFieldValue(name, value);
+          return;
+        }
+        const newItem = items.find((item) => String(convertId(item.id)) === value) || null;
+        form.setFieldValue(name, newItem);
+      },
+      value: filter ? form.getInputProps(name).value : String(convertId((_a = form.getInputProps(name).value) == null ? void 0 : _a.id)) || "",
+      ...props
+    }
+  );
+}
+export {
+  FormRelatedSelect
+};

package/dist/core/esm/Tables/DataGrid/FormField/Inputs/FormSelect.mjs

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

package/dist/core/esm/Tables/DataGrid/FormField/Inputs/FormTextField.mjs

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { PasswordInput, TextInput } from "@mantine/core";
+import { useMemo } from "react";
+function FormTextField({ form, name, ...props }) {
+  const formValue = form.getInputProps(name).value;
+  const value = useMemo(
+    () => formValue && typeof formValue === "object" ? JSON.stringify(formValue) : formValue || "",
+    [formValue]
+  );
+  return name === "password" ? /* @__PURE__ */ jsx(PasswordInput, { ...form.getInputProps(name), value, ...props }) : /* @__PURE__ */ jsx(TextInput, { ...form.getInputProps(name), value, ...props });
+}
+export {
+  FormTextField
+};

package/dist/core/esm/Tables/DataGrid/Main/Body/Body.mjs

@@ -0,0 +1,95 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { getValue } from "fastapi-rtk/utils";
+import { Table, Checkbox, Text } from "@mantine/core";
+import { useMemo } from "react";
+import { Actions } from "../../../../ActionIcons/Actions.mjs";
+import { convertId } from "../../../../Wrappers/ApiProvider/utils/convertId.mjs";
+import { Field } from "./Field/Field.mjs";
+import { Row } from "./Row/Row.mjs";
+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__ */ jsx(Actions, { id });
+}
+function Body({
+  data,
+  loading,
+  hideActions,
+  hideCheckbox,
+  selection,
+  toggleRow,
+  onClickEntry,
+  bodyCustomizer,
+  bodySeparator
+}) {
+  const actionColumn = data.list_columns.includes("actions") ? "_actions" : "actions";
+  const bodySeparatorAllKey = useMemo(
+    () => (data == null ? void 0 : data.list_columns.includes("all")) ? "_all" : "all",
+    [data == null ? void 0 : data.list_columns]
+  );
+  return /* @__PURE__ */ jsx(Table.Tbody, { children: data.result.length ? data.result.map((entry, index) => {
+    const id = data.ids[index];
+    return /* @__PURE__ */ jsxs(Row, { entry: { ...entry, id }, children: [
+      !hideCheckbox ? /* @__PURE__ */ jsx(Field, { loading, children: /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          pl: 2,
+          checked: selection.includes(id),
+          onChange: () => {
+            toggleRow(id);
+          }
+        }
+      ) }, index) : null,
+      !hideActions ? /* @__PURE__ */ jsx(Field, { loading, children: /* @__PURE__ */ jsx(
+        ActionCustomElement,
+        {
+          bodyCustomizer,
+          actionColumn,
+          id: convertId(id),
+          entry
+        }
+      ) }) : null,
+      data.list_columns.map((column, columnIndex) => {
+        let customElement = bodyCustomizer == null ? void 0 : bodyCustomizer[column];
+        if (typeof customElement === "function") {
+          customElement = customElement({ id, ...entry });
+        }
+        let value = getValue(entry, column);
+        if (typeof value === "number") {
+          value = value.toLocaleString();
+        } else if (value === null || value === void 0) {
+          value = "";
+        }
+        const colBodySeparator = (bodySeparator == null ? void 0 : bodySeparator[column]) || (bodySeparator == null ? void 0 : bodySeparator[bodySeparatorAllKey]);
+        if (colBodySeparator) {
+          value = value.split(colBodySeparator);
+        }
+        return customElement === null ? null : /* @__PURE__ */ jsx(
+          Field,
+          {
+            id,
+            entry,
+            loading,
+            onClickEntry,
+            customElement,
+            sanitize: true,
+            children: value
+          },
+          columnIndex
+        );
+      })
+    ] }, convertId(id));
+  }) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+    "td",
+    {
+      style: { padding: "8px" },
+      colSpan: hideActions ? data.list_columns.length : data.list_columns.length + 1,
+      children: /* @__PURE__ */ jsx(Text, { style: { fontStyle: "italic" }, size: "sm", c: "dimmed", children: "No data available" })
+    }
+  ) }) });
+}
+export {
+  Body
+};

package/dist/core/esm/Tables/DataGrid/Main/Body/Field/Field.mjs

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import { useProps, useStyles, Table, Box, Skeleton, Text } from "@mantine/core";
+import purify from "../../../../../../../external/esm/dompurify@3.2.5/node_modules/dompurify/dist/purify.es.mjs";
+import React__default, { isValidElement } from "react";
+import { FallbackWrapper } from "../../../../NextGenDataGrid/FallbackWrapper.mjs";
+import classes from "./Field.module.css.mjs";
+const Field = React__default.memo(
+  ({ id, entry, loading, rightBorder, children, onClickEntry, customElement, sanitize, ...props }) => {
+    const defaultProps = {
+      text: { style: { whiteSpace: "nowrap", overflow: "ellipsis" } }
+    };
+    const { text } = useProps("Field", defaultProps, props);
+    const functionStyle = {};
+    Object.entries(text).forEach(([key, value]) => {
+      if (typeof value === "function") {
+        functionStyle[key] = value(entry);
+      }
+    });
+    const getStyles = useStyles({
+      name: "Field",
+      props,
+      classes
+    });
+    return /* @__PURE__ */ jsx(Table.Td, { ...getStyles("field"), onClick: onClickEntry ? () => onClickEntry(id, entry) : null, ...props, children: /* @__PURE__ */ jsx(Box, { w: "100%", children: /* @__PURE__ */ jsx(Skeleton, { visible: loading, children: /* @__PURE__ */ jsx(
+      FallbackWrapper,
+      {
+        fallback: Array.isArray(children) ? children.map((child, index) => /* @__PURE__ */ jsx(Text, { ...text, ...functionStyle, children: sanitize ? purify.sanitize(child) : child }, index)) : isValidElement(children) ? children : /* @__PURE__ */ jsx(Text, { ...text, ...functionStyle, children: sanitize ? purify.sanitize(children) : children }),
+        functionProps: entry,
+        children: customElement
+      }
+    ) }) }) });
+  }
+);
+Field.displayName = "Field";
+export {
+  Field
+};

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

@@ -0,0 +1,14 @@
+const field = "_field_zdaf7_1";
+const rtl = "_rtl_zdaf7_7";
+const borderRight = "_borderRight_zdaf7_12";
+const classes = {
+  field,
+  rtl,
+  borderRight
+};
+export {
+  borderRight,
+  classes as default,
+  field,
+  rtl
+};

package/dist/core/esm/Tables/DataGrid/Main/Body/Row/Row.mjs

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { useStyles, useProps, Table } from "@mantine/core";
+import classes from "./Row.module.css.mjs";
+function Row({ entry, selected, children }) {
+  const getStyles = useStyles({
+    name: "Row",
+    classes
+  });
+  const row = useProps("Row", {}, {});
+  Object.entries(row).forEach(([key, value]) => {
+    if (typeof value === "function") {
+      row[key] = value(entry);
+    }
+  });
+  var { className, style } = getStyles("row");
+  className = `${className} ${selected ? classes.selected : ""}`;
+  return /* @__PURE__ */ jsx(Table.Tr, { className, style: { ...style }, ...row, children });
+}
+export {
+  Row
+};

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

@@ -0,0 +1,11 @@
+const row = "_row_138r2_1";
+const selected = "_selected_138r2_5";
+const classes = {
+  row,
+  selected
+};
+export {
+  classes as default,
+  row,
+  selected
+};

package/dist/core/esm/Tables/DataGrid/Main/Header/FieldTitle/FieldTitle.mjs

@@ -0,0 +1,74 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import classes from "./FieldTitle.module.css.mjs";
+import { useStyles, useProps, Table, Box, Checkbox, Tooltip, Indicator } from "@mantine/core";
+import { useHover } from "@mantine/hooks";
+import { useApi } from "../../../../../hooks/api/useApi.mjs";
+import IconChevronDown from "../../../../../../../external/esm/@tabler_icons-react@3.18.0_react@18.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.mjs";
+import IconChevronUp from "../../../../../../../external/esm/@tabler_icons-react@3.18.0_react@18.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronUp.mjs";
+function FieldTitle({
+  column,
+  label,
+  orderColumn,
+  related,
+  toggleAll,
+  allChecked,
+  classNames,
+  styles,
+  customElement,
+  ...props
+}) {
+  const { queryParams, setQueryParams, loading } = useApi();
+  const defaultProps = {
+    fw: 700,
+    size: "sm",
+    color: "gray.8",
+    hoverColor: "gray.6",
+    selectedColor: "blue"
+  };
+  const getStyles = useStyles({
+    name: "FieldTitle",
+    classes,
+    classNames,
+    styles,
+    props
+  });
+  const title = useProps("FieldTitle", defaultProps, props);
+  const { hovered, ref } = useHover();
+  const selectedColumn = orderColumn && queryParams.order_column === orderColumn;
+  const wrapperProps = getStyles("wrapper");
+  wrapperProps.style.cursor = orderColumn ? wrapperProps.style.cursor : "auto";
+  return /* @__PURE__ */ jsx(
+    Table.Th,
+    {
+      className: classes.fieldTitleRoot,
+      ...getStyles("root"),
+      onClick: orderColumn && !loading ? () => setQueryParams({
+        order_column: orderColumn,
+        order_direction: queryParams.order_direction === "asc" ? "desc" : "asc"
+      }) : null,
+      children: /* @__PURE__ */ jsx(Box, { ref, ...wrapperProps, children: column === "Checkbox" ? /* @__PURE__ */ jsx(Checkbox, { pb: 5, pl: 2, onChange: toggleAll, checked: allChecked }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            w: "100%",
+            fw: title.fw,
+            size: "xl",
+            c: hovered && orderColumn ? title.hoverColor : selectedColumn ? title.selectedColor : title.color,
+            children: customElement || label || column
+          }
+        ),
+        related ? /* @__PURE__ */ jsx(Tooltip, { label: "Related Field", children: /* @__PURE__ */ jsx(
+          Indicator,
+          {
+            label: "rel",
+            style: { indicator: { top: `-1px !important`, right: `-2px !important`, padding: "4px" } },
+            children: /* @__PURE__ */ jsx(Box, { ...getStyles("icon"), children: selectedColumn ? queryParams.order_direction === "asc" ? /* @__PURE__ */ jsx(IconChevronDown, { size: 14, strokeWidth: 1.5 }) : /* @__PURE__ */ jsx(IconChevronUp, { size: 14, strokeWidth: 1.5 }) : null })
+          }
+        ) }) : /* @__PURE__ */ jsx(Box, { ...getStyles("icon"), children: selectedColumn ? queryParams.order_direction === "asc" ? /* @__PURE__ */ jsx(IconChevronDown, { size: 14, strokeWidth: 1.5 }) : /* @__PURE__ */ jsx(IconChevronUp, { size: 14, strokeWidth: 1.5 }) : null })
+      ] }) })
+    }
+  );
+}
+export {
+  FieldTitle
+};

package/dist/core/esm/Tables/DataGrid/Main/Header/FieldTitle/FieldTitle.module.css.mjs

@@ -0,0 +1,14 @@
+const root = "_root_1kmay_1";
+const wrapper = "_wrapper_1kmay_7";
+const icon = "_icon_1kmay_18";
+const classes = {
+  root,
+  wrapper,
+  icon
+};
+export {
+  classes as default,
+  icon,
+  root,
+  wrapper
+};

package/dist/core/esm/Tables/DataGrid/Main/Header/Header.mjs

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Table } from "@mantine/core";
+import { memo } from "react";
+import { FieldTitle } from "./FieldTitle/FieldTitle.mjs";
+const Header = memo(({ data, info, hideActions, hideCheckbox, allChecked, toggleAll, headerCustomizer }) => {
+  const actionColumn = data.list_columns.includes("actions") ? "_actions" : "actions";
+  let ActionCustomElement = headerCustomizer == null ? void 0 : headerCustomizer[actionColumn];
+  if (typeof ActionCustomElement === "function") {
+    ActionCustomElement = ActionCustomElement();
+  }
+  return /* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
+    !hideCheckbox ? /* @__PURE__ */ jsx(FieldTitle, { data, column: "Checkbox", allChecked, toggleAll }) : null,
+    !hideActions ? /* @__PURE__ */ jsx(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]);
+      }
+      return customElement === null ? null : /* @__PURE__ */ jsx(
+        FieldTitle,
+        {
+          column,
+          label: data.label_columns[column],
+          orderColumn: data.order_columns.find((orderColumn) => orderColumn === column) || data.order_columns.find((orderColumn) => orderColumn.startsWith(`${column}.`)),
+          related: ((_a = info.filters[column]) == null ? void 0 : _a.schema.type) === "Nested",
+          customElement
+        },
+        column
+      );
+    })
+  ] }) });
+});
+Header.displayName = "Header";
+export {
+  Header
+};

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

@@ -0,0 +1,88 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMantineTheme, Table, useProps, ScrollArea } from "@mantine/core";
+import { useState, useEffect } from "react";
+import { useApi } from "../../../hooks/api/useApi.mjs";
+import { Body } from "./Body/Body.mjs";
+import { Header } from "./Header/Header.mjs";
+import classes from "./Main.module.css.mjs";
+function Main({
+  bulkActions,
+  hideActions,
+  loading,
+  onSelectCheckbox,
+  onClickEntry,
+  hideCheckbox,
+  hideDownload,
+  headerCustomizer,
+  bodyCustomizer,
+  bodySeparator,
+  ...props
+}) {
+  const theme = useMantineTheme();
+  const defaultProps = Table.extend({
+    highlightOnHover: true,
+    striped: true,
+    horizontalSpacing: "md",
+    verticalSpacing: "sm"
+  });
+  const table = useProps("DatagridTable", defaultProps, props);
+  const { data, info } = useApi();
+  const [selection, setSelection] = useState([]);
+  const [allChecked, setAllChecked] = useState(false);
+  const toggleRow = (id) => {
+    setSelection((current) => current.includes(id) ? current.filter((item) => item !== id) : [...current, id]);
+  };
+  const toggleAll = () => {
+    setSelection((current) => current.length === data.ids.length ? [] : data.ids.map((item, index) => item));
+  };
+  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]);
+  useEffect(() => {
+    setSelection([]);
+    onSelectCheckbox ? onSelectCheckbox([]) : null;
+  }, [data]);
+  return /* @__PURE__ */ jsx(
+    ScrollArea,
+    {
+      options: { className: theme.colorScheme === "dark" ? "os-theme-light" : void 0 },
+      style: { flex: 1, flexDirection: "column" },
+      classNames: classes,
+      children: /* @__PURE__ */ jsxs(Table, { stickyHeader: true, ...table, children: [
+        /* @__PURE__ */ jsx(
+          Header,
+          {
+            data,
+            info,
+            hideActions,
+            hideCheckbox,
+            allChecked,
+            setSelection,
+            toggleAll,
+            headerCustomizer
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Body,
+          {
+            data,
+            loading,
+            hideActions,
+            hideCheckbox,
+            selection,
+            setSelection,
+            toggleRow,
+            onClickEntry,
+            bodyCustomizer,
+            bodySeparator
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  Main
+};

package/dist/core/esm/Tables/DataGrid/Main/Main.module.css.mjs

@@ -0,0 +1,8 @@
+const scrollbar = "_scrollbar_isyo2_1";
+const classes = {
+  scrollbar
+};
+export {
+  classes as default,
+  scrollbar
+};

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

@@ -0,0 +1,104 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useMantineTheme, Divider, Box, Text, Select, Pagination as Pagination$1 } from "@mantine/core";
+import { memo, useState, useEffect } from "react";
+import { useApi } from "../../../hooks/api/useApi.mjs";
+const Pagination = memo(({ counter, ...props }) => {
+  const { data, queryParams, setQueryParams } = useApi();
+  const theme = useMantineTheme();
+  const pageSizes = [
+    { value: "10", label: "10" },
+    { value: "25", label: "25" },
+    { value: "50", label: "50" }
+  ];
+  const rowsPerPage = String(queryParams.page_size);
+  const [cachedPage, setCachedPage] = useState(queryParams.page);
+  useEffect(() => {
+    setCachedPage(queryParams.page);
+  }, [queryParams.page]);
+  const handlePageChange = (newPage) => {
+    setCachedPage(newPage - 1);
+    setQueryParams({ page: newPage - 1 });
+  };
+  const handleRowsPerPageChange = (value) => {
+    setQueryParams({ page_size: parseInt(value, 10), page: 0 });
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        style: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          height: 54,
+          border: "none",
+          borderTopWidth: "1px",
+          padding: "var(--mantine-spacing-md)"
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "var(--mantine-spacing-sm)"
+              },
+              children: [
+                /* @__PURE__ */ jsx(Text, { children: "Rows per page:" }),
+                /* @__PURE__ */ jsx(
+                  Select,
+                  {
+                    value: rowsPerPage,
+                    defaultValue: rowsPerPage,
+                    onChange: (value) => handleRowsPerPageChange(value),
+                    data: pageSizes,
+                    allowDeselect: false,
+                    w: 80,
+                    size: "xs",
+                    styles: () => ({
+                      input: {
+                        fontSize: "14px",
+                        fontWeight: "250",
+                        lineHeight: "52px",
+                        border: "1px solid #E6E8ED"
+                      },
+                      item: {
+                        "&[data-selected]": {
+                          "&, &:hover": {
+                            // backgroundColor: '#E6E8ED',
+                            // border: '1px solid #E6E8ED',
+                            outline: "none !important"
+                          }
+                        }
+                      }
+                    })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Pagination$1,
+            {
+              size: "sm",
+              total: Math.ceil(data.count / rowsPerPage),
+              value: cachedPage + 1,
+              onChange: handlePageChange,
+              ...props
+            }
+          ),
+          counter && data ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Text, { c: theme.primaryColor, size: "xs", fw: 400, pl: 20, children: "Total Records" }),
+            /* @__PURE__ */ jsx(Text, { c: theme.primaryColor, size: "md", fw: 700, pl: 10, children: data.count })
+          ] }) : null
+        ]
+      }
+    )
+  ] });
+});
+Pagination.displayName = "Pagination";
+export {
+  Pagination
+};

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

@@ -0,0 +1,33 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useProps, Popover, Tooltip, Indicator, ActionIcon, Box, CloseButton } from "@mantine/core";
+import { useState } from "react";
+import { useApi } from "../../../../hooks/api/useApi.mjs";
+import { FilterMenu } from "./FilterMenu.mjs";
+import IconFilter from "../../../../../../external/esm/@tabler_icons-react@3.18.0_react@18.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFilter.mjs";
+function Filter(...props) {
+  const { queryParams } = useApi();
+  const defaultProps = {
+    bg: "transparent",
+    size: "sm",
+    c: "gray"
+  };
+  const icon = useProps("ActionIcon", defaultProps, props);
+  const [opened, setOpened] = useState(false);
+  return /* @__PURE__ */ jsxs(Popover, { opened, position: "bottom-end", onClose: () => setOpened(false), closeOnClickOutside: false, children: [
+    /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(Tooltip, { opened: opened ? false : null, label: "Filter", children: (queryParams == null ? void 0 : queryParams.filters.filter((f) => !f.id).length) != 0 ? /* @__PURE__ */ jsx(Indicator, { zIndex: 20, size: 16, label: queryParams == null ? void 0 : queryParams.filters.length, children: /* @__PURE__ */ jsx(ActionIcon, { bg: icon.bg, size: icon.size, c: icon.c, onClick: () => setOpened(true), children: /* @__PURE__ */ jsx(IconFilter, {}) }) }) : /* @__PURE__ */ jsx(ActionIcon, { bg: icon.bg, size: icon.size, c: icon.c, onClick: () => setOpened(true), children: /* @__PURE__ */ jsx(IconFilter, {}) }) }) }),
+    /* @__PURE__ */ jsxs(Popover.Dropdown, { px: "xs", children: [
+      /* @__PURE__ */ jsx(Box, { style: { position: "absolute", top: 4, right: 4 }, children: /* @__PURE__ */ jsx(CloseButton, { title: "Filters", onClick: () => setOpened(false) }) }),
+      /* @__PURE__ */ jsx(
+        FilterMenu,
+        {
+          onClose: () => {
+            setOpened(false);
+          }
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  Filter
+};