@addsign/moje-agenda-shared-lib 0.0.53 → 0.0.57

package/dist/components/datatable/DataTableServer.js

@@ -2,11 +2,14 @@ import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import '../../assets/tailwind.css';/* empty css                      */
 import Button from "../Button.js";
-import { M as MdOutlineFilterAlt, a as MdOutlineFilterAltOff, b as MdSearch, c as MdClose, d as MdArrowBack, e as MdArrowForward, f as MdArrowUpward, g as MdArrowDownward } from "../../index-ZA1ctELQ.js";
+import { c as MdOutlineFilterAlt, d as MdOutlineFilterAltOff, e as MdSearch, b as MdClose, f as MdArrowBack, g as MdArrowForward, h as MdArrowUpward, i as MdArrowDownward } from "../../index-BDqNIr_C.js";
 import FormField from "../form/FormField.js";
+import Spinner from "../Spinner.js";
 import "../../contexts/FederationContext.js";
 import { useFederationContext } from "../../contexts/useFederationContext.js";
 import { handleErrors } from "../../utils/handleErrors.js";
+import SelectField from "../form/SelectField.js";
+import InputField from "../form/InputField.js";
 function DataTableServer({
   url,
   columns,
@@ -79,18 +82,8 @@ function DataTableServer({
           }
         }
       }
-      console.log(
-        "%clibcomponentsdatatableDataTable.tsx:142 newFilterOptions",
-        "color: #007acc;",
-        newFilterOptions
-      );
       setFilterOptions(newFilterOptions);
     };
-    console.log(
-      "%clibcomponentsDataTable.tsx:162 items, columns",
-      "color: #007acc;",
-      columns
-    );
     updateFilterOptions();
   }, [columns]);
   const requestSort = (sortParam) => {
@@ -138,194 +131,213 @@ function DataTableServer({
   };
   const paginationDisplay = `Strana ${currentPage + 1} z ${data == null ? void 0 : data.totalPages}`;
   const filterHandler = (filterParam, value) => {
-    console.log(
-      "%clibcomponentsdatatableDataTable.tsx:223 object filterParam,      value,      columnFilters ",
-      "color: #007acc;",
-      filterParam,
-      value,
-      columnFilters
-    );
     setColumnFilters((prev) => ({ ...prev, [filterParam]: value }));
     setCurrentPage(0);
   };
   const handleToggleShowColFilters = () => {
-    setShowColFilters(!showColFilters);
-    if (!showColFilters) {
+    if (showColFilters) {
       setColumnFilters({});
     }
+    setShowColFilters(!showColFilters);
   };
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "container  shadow-lg border border-gray-200 rounded-xl overflow-hidden ", children: [
-    (title || subtitle || allowSearch) && /* @__PURE__ */ jsxs("div", { className: "p-5 leading-9 flex ", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex-grow", children: [
-        title && /* @__PURE__ */ jsx("h1", { className: "font-semibold text-xl leading-[42px] ", children: title }),
-        subtitle && /* @__PURE__ */ jsx("p", { className: "font-normal text-gray-600", children: subtitle })
-      ] }),
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "flex items-center text-xl h-full p-3  cursor-pointer text-gray-500 ",
-          onClick: handleToggleShowColFilters,
-          children: [
-            !showColFilters && /* @__PURE__ */ jsx(MdOutlineFilterAlt, {}),
-            showColFilters && /* @__PURE__ */ jsx(MdOutlineFilterAltOff, {})
-          ]
-        }
-      ),
-      allowSearch && /* @__PURE__ */ jsx("div", { className: "ml-5", children: /* @__PURE__ */ jsxs(
-        FormField,
-        {
-          placeholder: "Vyhledávání",
-          name: "search",
-          onInputChange: handleSearchChanged,
-          type: "text",
-          value: fulltextSearch,
-          children: [
-            " ",
-            /* @__PURE__ */ jsxs("div", { className: " text-gray-500 leading-5 flex items-center h-full", children: [
-              !fulltextSearch && /* @__PURE__ */ jsx(MdSearch, {}),
-              fulltextSearch && /* @__PURE__ */ jsx(MdClose, { onClick: () => setFulltextSearch("") })
-            ] })
-          ]
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full leading-normal", children: [
-      /* @__PURE__ */ jsxs("thead", { children: [
-        showColFilters && columns.findIndex((it) => it.filterType) > -1 && /* @__PURE__ */ jsx("tr", { children: columns.map(({ key, header, filterType, filterParam }) => /* @__PURE__ */ jsx(
-          "th",
-          {
-            id: String(key) + "_filter",
-            className: ` font-medium cursor-pointer leading-9 text-xs text-left p-0 pb-5 text-gray-600  ${!title && !subtitle ? "border-t-0" : ""}`,
-            children: filterType && /* @__PURE__ */ jsx("div", { className: "ml-5", children: /* @__PURE__ */ jsx(
-              FormField,
-              {
-                label: header,
-                name: String(key) + "_filter",
-                onInputChange: (e) => filterHandler(
-                  filterParam,
-                  e.target.value
-                ),
-                type: filterType,
-                options: filterOptions[String(filterParam)] || [],
-                value: columnFilters[String(filterParam)],
-                clearable: true,
-                className: "max-w-[300px] min-w-[100px]"
-              }
-            ) })
-          },
-          String(key) + "_filter"
-        )) }),
-        /* @__PURE__ */ jsx("tr", { children: columns.map(({ key, header, actions, sortParam }) => /* @__PURE__ */ jsx(
-          "th",
-          {
-            className: `group font-medium leading-9 text-xs text-left px-5 text-gray-600 bg bg-gray-50 border-t border-b border-gray-200 ${!title && !subtitle ? "border-t-0" : ""} ${sortParam ? " cursor-pointer " : ""}`,
-            onClick: () => sortParam ? requestSort(sortParam) : () => {
-            },
-            children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
-              header,
-              " ",
-              !actions && sortParam ? getSortIcon(sortParam) : ""
-            ] })
-          },
-          String(key)
-        )) })
-      ] }),
-      !isLoading && /* @__PURE__ */ jsxs("tbody", { children: [
-        data && data.content && data.content.map((item, rowIndex) => /* @__PURE__ */ jsx(
-          "tr",
-          {
-            className: `${item._isHighlighted ? " bg-gray-200  " : " "} hover:bg-gray-50  border-gray-200 border-b text-sm `,
-            children: columns.map(({ render, actions, classes }, colIndex) => /* @__PURE__ */ jsxs(
-              "td",
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "shadow-lg border border-gray-200 rounded-xl  overflow-x-auto",
+      style: { overflowY: "visible" },
+      children: [
+        (title || subtitle || allowSearch) && /* @__PURE__ */ jsxs("div", { className: "p-5 leading-9 flex ", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex-grow", children: [
+            title && /* @__PURE__ */ jsx("h1", { className: "font-semibold text-xl leading-[42px] ", children: title }),
+            subtitle && /* @__PURE__ */ jsx("p", { className: "font-normal text-gray-600", children: subtitle })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex items-center text-xl h-full p-3  cursor-pointer text-gray-500 ",
+              onClick: handleToggleShowColFilters,
+              children: [
+                !showColFilters && /* @__PURE__ */ jsx(MdOutlineFilterAlt, {}),
+                showColFilters && /* @__PURE__ */ jsx(MdOutlineFilterAltOff, {})
+              ]
+            }
+          ),
+          allowSearch && /* @__PURE__ */ jsx("div", { className: "ml-5", children: /* @__PURE__ */ jsxs(
+            FormField,
+            {
+              placeholder: "Vyhledávání",
+              name: "search",
+              onInputChange: handleSearchChanged,
+              type: "text",
+              value: fulltextSearch,
+              children: [
+                " ",
+                /* @__PURE__ */ jsxs("div", { className: " text-gray-500 leading-5 flex items-center h-full", children: [
+                  !fulltextSearch && /* @__PURE__ */ jsx(MdSearch, {}),
+                  fulltextSearch && /* @__PURE__ */ jsx(MdClose, { onClick: () => setFulltextSearch("") })
+                ] })
+              ]
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "", children: /* @__PURE__ */ jsxs("table", { className: "w-full leading-normal ", children: [
+          /* @__PURE__ */ jsxs("thead", { children: [
+            showColFilters && columns.findIndex((it) => it.filterType) > -1 && /* @__PURE__ */ jsx("tr", { children: columns.map(({ key, header, filterType, filterParam }) => /* @__PURE__ */ jsxs(
+              "th",
               {
-                className: `px-5 py-2
-                   ${colIndex == 0 ? " font-medium text-gray-900" : " text-gray-700"} ${classes || ""}`,
+                id: String(key) + "_filter",
+                className: ` font-medium leading-9 text-xs text-left p-0 pb-5 text-gray-600 overflow-ellipsis 
+                          whitespace-nowrap ${!title && !subtitle ? "border-t-0" : ""}`,
                 children: [
-                  render ? render(item) : "",
-                  actions && actions.filter((it) => {
-                    if (it.visible) {
-                      return it.visible(item);
+                  filterType && filterType === "select" && /* @__PURE__ */ jsx(
+                    SelectField,
+                    {
+                      label: header,
+                      name: String(key) + "_filter",
+                      onInputChange: (e) => filterHandler(
+                        filterParam,
+                        e.target.value
+                      ),
+                      type: filterType,
+                      options: filterOptions[String(filterParam)] || [],
+                      value: columnFilters[String(filterParam)],
+                      clearable: true,
+                      className: "pl-5"
                     }
-                  }).map((action, actionIndex) => /* @__PURE__ */ jsxs(
-                    "div",
+                  ),
+                  filterType && filterType !== "select" && /* @__PURE__ */ jsx(
+                    InputField,
                     {
-                      className: "flex inline-flex align-middle",
-                      children: [
-                        action.icon && /* @__PURE__ */ jsxs(
-                          Button,
-                          {
-                            variant: "icon",
-                            onClick: () => action.onClick(item),
-                            children: [
-                              " ",
-                              action.icon
-                            ]
-                          }
-                        ),
-                        !action.icon && /* @__PURE__ */ jsxs(
-                          Button,
-                          {
-                            variant: "transparent",
-                            onClick: () => action.onClick(item),
-                            children: [
-                              " ",
-                              action.label
-                            ]
-                          }
-                        )
-                      ]
-                    },
-                    `${rowIndex}-${colIndex}-${actionIndex}`
-                  ))
+                      label: header,
+                      name: String(key) + "_filter",
+                      onInputChange: (e) => filterHandler(
+                        filterParam,
+                        e.target.value
+                      ),
+                      type: filterType,
+                      value: columnFilters[String(filterParam)],
+                      clearable: true,
+                      className: "max-w-[300px] min-w-[100px] pl-5"
+                    }
+                  )
                 ]
               },
-              `${rowIndex}-${colIndex}`
-            ))
-          },
-          rowIndex
-        )),
-        ((_a = data == null ? void 0 : data.content) == null ? void 0 : _a.length) == 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
-          "td",
-          {
-            className: "px-5 py-3 border-b border-gray-200 bg-white text-sm items-center justify-center align-middle",
-            colSpan: columns.length,
-            children: "Žádná data"
-          },
-          "td-nodata"
-        ) }, "tr-nodata   ")
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: "w-full p-5 grid grid-cols-3", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-left items-start justify-start", children: data && !data.first && /* @__PURE__ */ jsxs(
-        Button,
-        {
-          variant: "secondary",
-          onClick: prevPage,
-          className: "flex items-center float-left",
-          children: [
-            /* @__PURE__ */ jsx(MdArrowBack, { className: "mr-1.5" }),
-            " Předchozí"
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsxs("div", { className: " text-center text-xs text-gray-800", children: [
-        paginationDisplay,
-        " "
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "text-right items-end justify-end", children: data && !data.last && /* @__PURE__ */ jsxs(
-        Button,
-        {
-          variant: "secondary",
-          onClick: nextPage,
-          className: "flex items-center float-right",
-          children: [
-            "Následující ",
-            /* @__PURE__ */ jsx(MdArrowForward, { className: "ml-2", size: 20 })
-          ]
-        }
-      ) })
-    ] })
-  ] }) });
+              String(key) + "_filter"
+            )) }),
+            /* @__PURE__ */ jsx("tr", { children: columns.map(({ key, header, actions, sortParam }) => /* @__PURE__ */ jsx(
+              "th",
+              {
+                className: `group font-medium leading-9 text-xs text-left px-5 text-gray-600 bg bg-gray-50 border-t border-b border-gray-200 ${!title && !subtitle ? "border-t-0" : ""} ${sortParam ? " cursor-pointer " : ""}`,
+                onClick: () => sortParam ? requestSort(sortParam) : () => {
+                },
+                children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
+                  header,
+                  " ",
+                  !actions && sortParam ? getSortIcon(sortParam) : ""
+                ] })
+              },
+              String(key)
+            )) })
+          ] }),
+          data && (data == null ? void 0 : data.content) && (data == null ? void 0 : data.content.length) > 0 && /* @__PURE__ */ jsxs("tbody", { className: "relative", children: [
+            isLoading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gray-300 opacity-50 z-50", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsx(Spinner, {}) }) }),
+            data.content.map((item, rowIndex) => /* @__PURE__ */ jsx(
+              "tr",
+              {
+                className: `${item._isHighlighted ? " bg-gray-200  " : " "} hover:bg-gray-50  border-gray-200 border-b text-sm `,
+                children: columns.map(({ render, actions, classes }, colIndex) => /* @__PURE__ */ jsxs(
+                  "td",
+                  {
+                    className: `px-5 py-2
+                   ${colIndex == 0 ? " font-medium text-gray-900" : " text-gray-700"} ${classes || ""}`,
+                    children: [
+                      render ? render(item) : "",
+                      actions && actions.filter((it) => {
+                        if (it.visible) {
+                          return it.visible(item);
+                        }
+                      }).map((action, actionIndex) => /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          className: "flex inline-flex align-middle",
+                          children: [
+                            action.icon && /* @__PURE__ */ jsxs(
+                              Button,
+                              {
+                                variant: "icon",
+                                onClick: () => action.onClick(item),
+                                children: [
+                                  " ",
+                                  action.icon
+                                ]
+                              }
+                            ),
+                            !action.icon && /* @__PURE__ */ jsxs(
+                              Button,
+                              {
+                                variant: "transparent",
+                                onClick: () => action.onClick(item),
+                                children: [
+                                  " ",
+                                  action.label
+                                ]
+                              }
+                            )
+                          ]
+                        },
+                        `${rowIndex}-${colIndex}-${actionIndex}`
+                      ))
+                    ]
+                  },
+                  `${rowIndex}-${colIndex}`
+                ))
+              },
+              rowIndex
+            )),
+            ((_a = data == null ? void 0 : data.content) == null ? void 0 : _a.length) == 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+              "td",
+              {
+                className: "px-5 py-3 border-b border-gray-200 bg-white text-sm items-center justify-center align-middle",
+                colSpan: columns.length,
+                children: "Žádná data"
+              },
+              "td-nodata"
+            ) }, "tr-nodata   ")
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "w-full p-5 grid grid-cols-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-left items-start justify-start", children: data && !data.first && /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "secondary",
+              onClick: prevPage,
+              className: "flex items-center float-left",
+              children: [
+                /* @__PURE__ */ jsx(MdArrowBack, { className: "mr-1.5" }),
+                " Předchozí"
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: " text-center text-xs text-gray-800", children: [
+            paginationDisplay,
+            " "
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "text-right items-end justify-end", children: data && !data.last && /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "secondary",
+              onClick: nextPage,
+              className: "flex items-center float-right",
+              children: [
+                "Následující ",
+                /* @__PURE__ */ jsx(MdArrowForward, { className: "ml-2", size: 20 })
+              ]
+            }
+          ) })
+        ] })
+      ]
+    }
+  ) });
 }
 export {
   DataTableServer as default

package/dist/components/datatable/DataTableServer.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableServer.js","sources":["../../../lib/components/datatable/DataTableServer.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\r\n\r\nimport {\r\n  Button,\r\n  DataTableColumn,\r\n  FormField,\r\n  IPageable,\r\n  handleErrors,\r\n  useFederationContext,\r\n} from \"../../main\";\r\nimport {\r\n  MdArrowBack,\r\n  MdArrowDownward,\r\n  MdArrowForward,\r\n  MdArrowUpward,\r\n  MdClose,\r\n  MdOutlineFilterAlt,\r\n  MdOutlineFilterAltOff,\r\n  MdSearch,\r\n} from \"react-icons/md\";\r\n\r\ninterface DataTableServerProps<T> {\r\n  url: string;\r\n  columns: DataTableColumn<T | \"actions\">[];\r\n  itemsPerPage?: number;\r\n  title?: string;\r\n  subtitle?: string;\r\n  allowSearch?: boolean;\r\n}\r\n\r\ntype DataTableInternalItems = {\r\n  _isHighlighted?: boolean;\r\n};\r\n\r\nfunction DataTableServer<T extends DataTableInternalItems>({\r\n  url,\r\n  columns,\r\n  itemsPerPage = 10,\r\n  title,\r\n  subtitle,\r\n  allowSearch = true,\r\n}: DataTableServerProps<T>) {\r\n  const federationContext = useFederationContext();\r\n  const [data, setData] = useState<IPageable<T>>();\r\n  const [isLoading, setIsLoading] = useState(false);\r\n\r\n  const [currentPage, setCurrentPage] = useState(0);\r\n  const [fulltextSearch, setFulltextSearch] = useState(\"\");\r\n  const [filterOptions, setFilterOptions] = useState<Record<string, any[]>>({});\r\n  const [columnFilters, setColumnFilters] = useState<Record<string, string>>(\r\n    {}\r\n  );\r\n\r\n  const [showColFilters, setShowColFilters] = useState(false);\r\n\r\n  const [sortConfig, setSortConfig] = useState<{\r\n    sortParam: string;\r\n    direction: \"ascending\" | \"descending\" | null;\r\n  } | null>(null);\r\n  useEffect(() => {\r\n    setIsLoading(true);\r\n\r\n    federationContext.apiClient\r\n      .get(url, {\r\n        params: {\r\n          ...columnFilters,\r\n          pageSize: itemsPerPage,\r\n          page: currentPage,\r\n          sortBy: sortConfig?.sortParam,\r\n          sortDirection: sortConfig?.direction,\r\n        },\r\n      })\r\n      .then((response) => {\r\n        setData(response.data);\r\n        setIsLoading(false);\r\n      })\r\n      .catch((error) => {\r\n        console.error(\"Error fetching data:\", error);\r\n        handleErrors(error, federationContext.emitter);\r\n        setIsLoading(false);\r\n      });\r\n  }, [url, columnFilters, itemsPerPage, currentPage, sortConfig]);\r\n\r\n  useEffect(() => {\r\n    const fetchFilterOptions = async (column: DataTableColumn<T>) => {\r\n      if (!column.filterSource) {\r\n      } else {\r\n        try {\r\n          const response = await federationContext.apiClient.get(\r\n            column.filterSource\r\n          );\r\n\r\n          const options = response.data.map((item: any) => ({\r\n            value: item[column.filterValueKey as keyof typeof item],\r\n            label: item[column.filterLabelKey as keyof typeof item],\r\n          }));\r\n          return options;\r\n        } catch (error) {\r\n          console.error(\"Error fetching filter options:\", error);\r\n          return [];\r\n        }\r\n      }\r\n    };\r\n\r\n    const updateFilterOptions = async () => {\r\n      const newFilterOptions: Record<string, any[]> = {};\r\n\r\n      for (const column of columns) {\r\n        if (\r\n          column.filterType &&\r\n          column.filterSource &&\r\n          column.filterValueKey &&\r\n          column.filterLabelKey &&\r\n          column.filterParam\r\n        ) {\r\n          const options = await fetchFilterOptions(column);\r\n\r\n          if (options) {\r\n            newFilterOptions[column.filterParam as string] = [\r\n              { value: \"\", label: \"\" },\r\n              ...options,\r\n            ];\r\n          }\r\n        }\r\n      }\r\n      console.log(\r\n        \"%clibcomponentsdatatableDataTable.tsx:142 newFilterOptions\",\r\n        \"color: #007acc;\",\r\n        newFilterOptions\r\n      );\r\n      setFilterOptions(newFilterOptions);\r\n    };\r\n    console.log(\r\n      \"%clibcomponentsDataTable.tsx:162 items, columns\",\r\n      \"color: #007acc;\",\r\n      columns\r\n    );\r\n    updateFilterOptions();\r\n  }, [columns]);\r\n\r\n  const requestSort = (sortParam: string) => {\r\n    setSortConfig((prevSortConfig) => {\r\n      if (\r\n        prevSortConfig?.sortParam === sortParam &&\r\n        prevSortConfig.direction !== null\r\n      ) {\r\n        return prevSortConfig.direction === \"ascending\"\r\n          ? { sortParam, direction: \"descending\" }\r\n          : null;\r\n      } else {\r\n        return { sortParam, direction: \"ascending\" };\r\n      }\r\n    });\r\n  };\r\n\r\n  const getSortIcon = (sortParam: string) => {\r\n    if (sortConfig?.sortParam === sortParam) {\r\n      return sortConfig.direction === \"ascending\" ? (\r\n        <MdArrowUpward fontSize=\"small\" />\r\n      ) : sortConfig.direction === \"descending\" ? (\r\n        <MdArrowDownward fontSize=\"small\" />\r\n      ) : (\r\n        <MdArrowUpward\r\n          fontSize=\"small\"\r\n          className=\"text-gray-300 invisible group-hover:visible \"\r\n        />\r\n      );\r\n    }\r\n    return (\r\n      <MdArrowUpward\r\n        fontSize=\"small\"\r\n        className=\"text-gray-300 invisible group-hover:visible \"\r\n      />\r\n    );\r\n  };\r\n\r\n  const nextPage = () => {\r\n    setCurrentPage(currentPage + 1);\r\n  };\r\n\r\n  const prevPage = () => {\r\n    setCurrentPage(currentPage - 1);\r\n  };\r\n  const handleSearchChanged = (\r\n    e: React.ChangeEvent<\r\n      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\r\n    >\r\n  ) => {\r\n    console.log(\r\n      \"%clibcomponentsdatatableDataTable.tsx:238 e\",\r\n      \"color: #007acc;\",\r\n      e\r\n    );\r\n    setFulltextSearch(e.target?.value);\r\n    setCurrentPage(0);\r\n  };\r\n\r\n  // Pagination display logic\r\n  const paginationDisplay = `Strana ${currentPage + 1} z ${data?.totalPages}`;\r\n\r\n  const filterHandler = (filterParam: keyof T, value: string) => {\r\n    console.log(\r\n      \"%clibcomponentsdatatableDataTable.tsx:223 object filterParam,      value,      columnFilters \",\r\n      \"color: #007acc;\",\r\n      filterParam,\r\n      value,\r\n      columnFilters\r\n    );\r\n    setColumnFilters((prev) => ({ ...prev, [filterParam]: value }));\r\n    setCurrentPage(0);\r\n  };\r\n  const handleToggleShowColFilters = () => {\r\n    setShowColFilters(!showColFilters);\r\n    if (!showColFilters) {\r\n      setColumnFilters({});\r\n    }\r\n  };\r\n\r\n  //if (isLoading) return <Spinner />;\r\n  return (\r\n    <>\r\n      <div className=\"container  shadow-lg border border-gray-200 rounded-xl overflow-hidden \">\r\n        {(title || subtitle || allowSearch) && (\r\n          <div className=\"p-5 leading-9 flex \">\r\n            <div className=\"flex-grow\">\r\n              {title && (\r\n                <h1 className=\"font-semibold text-xl leading-[42px] \">\r\n                  {title}\r\n                </h1>\r\n              )}\r\n              {subtitle && (\r\n                <p className=\"font-normal text-gray-600\">{subtitle}</p>\r\n              )}\r\n            </div>\r\n\r\n            <div\r\n              className=\"flex items-center text-xl h-full p-3  cursor-pointer text-gray-500 \"\r\n              onClick={handleToggleShowColFilters}\r\n            >\r\n              {!showColFilters && <MdOutlineFilterAlt />}\r\n              {showColFilters && <MdOutlineFilterAltOff />}\r\n            </div>\r\n            {allowSearch && (\r\n              <div className=\"ml-5\">\r\n                <FormField\r\n                  placeholder=\"Vyhledávání\"\r\n                  name=\"search\"\r\n                  onInputChange={handleSearchChanged}\r\n                  type=\"text\"\r\n                  value={fulltextSearch}\r\n                >\r\n                  {\" \"}\r\n                  <div className=\" text-gray-500 leading-5 flex items-center h-full\">\r\n                    {!fulltextSearch && <MdSearch></MdSearch>}\r\n                    {fulltextSearch && (\r\n                      <MdClose onClick={() => setFulltextSearch(\"\")}></MdClose>\r\n                    )}\r\n                  </div>\r\n                </FormField>\r\n              </div>\r\n            )}\r\n          </div>\r\n        )}\r\n        <div className=\"overflow-x-auto\">\r\n          <table className=\"w-full leading-normal\">\r\n            <thead>\r\n              {showColFilters &&\r\n                columns.findIndex((it) => it.filterType) > -1 && (\r\n                  <tr>\r\n                    {columns.map(({ key, header, filterType, filterParam }) => (\r\n                      <th\r\n                        key={String(key) + \"_filter\"}\r\n                        id={String(key) + \"_filter\"}\r\n                        //  className=\"cursor-pointer px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-sm font-medium text-gray-600 uppercase tracking-wider\"\r\n                        className={` font-medium cursor-pointer leading-9 text-xs text-left p-0 pb-5 text-gray-600  ${\r\n                          !title && !subtitle ? \"border-t-0\" : \"\"\r\n                        }`}\r\n                      >\r\n                        {filterType && (\r\n                          <div className=\"ml-5\">\r\n                            <FormField\r\n                              label={header}\r\n                              name={String(key) + \"_filter\"}\r\n                              onInputChange={(e) =>\r\n                                filterHandler(\r\n                                  filterParam as keyof T,\r\n                                  e.target.value\r\n                                )\r\n                              }\r\n                              type={filterType}\r\n                              options={filterOptions[String(filterParam)] || []}\r\n                              value={columnFilters[String(filterParam)]}\r\n                              clearable\r\n                              className=\"max-w-[300px] min-w-[100px]\"\r\n                            ></FormField>\r\n                          </div>\r\n                        )}\r\n                      </th>\r\n                    ))}\r\n                  </tr>\r\n                )}\r\n              <tr>\r\n                {columns.map(({ key, header, actions, sortParam }) => (\r\n                  <th\r\n                    key={String(key)}\r\n                    //  className=\"cursor-pointer px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-sm font-medium text-gray-600 uppercase tracking-wider\"\r\n                    className={`group font-medium leading-9 text-xs text-left px-5 text-gray-600 bg bg-gray-50 border-t border-b border-gray-200 ${\r\n                      !title && !subtitle ? \"border-t-0\" : \"\"\r\n                    } ${sortParam ? \" cursor-pointer \" : \"\"}`}\r\n                    onClick={() =>\r\n                      sortParam ? requestSort(sortParam) : () => {}\r\n                    }\r\n                  >\r\n                    <span className=\"inline-flex items-center gap-2\">\r\n                      {header}{\" \"}\r\n                      {!actions && sortParam ? getSortIcon(sortParam) : \"\"}\r\n                    </span>\r\n                  </th>\r\n                ))}\r\n              </tr>\r\n            </thead>\r\n\r\n            {!isLoading && (\r\n              <tbody>\r\n                {data &&\r\n                  data.content &&\r\n                  data.content.map((item, rowIndex) => (\r\n                    <tr\r\n                      key={rowIndex}\r\n                      className={`${\r\n                        item._isHighlighted ? \" bg-gray-200  \" : \" \"\r\n                      } hover:bg-gray-50  border-gray-200 border-b text-sm `}\r\n                    >\r\n                      {columns.map(({ render, actions, classes }, colIndex) => (\r\n                        <td\r\n                          key={`${rowIndex}-${colIndex}`}\r\n                          className={`px-5 py-2\r\n                   ${\r\n                     colIndex == 0\r\n                       ? \" font-medium text-gray-900\"\r\n                       : \" text-gray-700\"\r\n                   } ${classes || \"\"}`}\r\n                        >\r\n                          {render ? render(item) : \"\"}\r\n                          {actions &&\r\n                            actions\r\n                              .filter((it) => {\r\n                                if (it.visible) {\r\n                                  return it.visible(item);\r\n                                } else true;\r\n                              })\r\n                              .map((action, actionIndex) => (\r\n                                <div\r\n                                  key={`${rowIndex}-${colIndex}-${actionIndex}`}\r\n                                  className=\"flex inline-flex align-middle\"\r\n                                >\r\n                                  {action.icon && (\r\n                                    <Button\r\n                                      variant=\"icon\"\r\n                                      onClick={() => action.onClick(item)}\r\n                                    >\r\n                                      {\" \"}\r\n                                      {action.icon}\r\n                                    </Button>\r\n                                  )}\r\n                                  {!action.icon && (\r\n                                    <Button\r\n                                      variant=\"transparent\"\r\n                                      onClick={() => action.onClick(item)}\r\n                                    >\r\n                                      {\" \"}\r\n                                      {action.label}\r\n                                    </Button>\r\n                                  )}\r\n                                </div>\r\n                              ))}\r\n                        </td>\r\n                      ))}\r\n                    </tr>\r\n                  ))}\r\n                {data?.content?.length == 0 && (\r\n                  <tr key=\"tr-nodata   \">\r\n                    <td\r\n                      key=\"td-nodata\"\r\n                      className=\"px-5 py-3 border-b border-gray-200 bg-white text-sm items-center justify-center align-middle\"\r\n                      colSpan={columns.length}\r\n                    >\r\n                      Žádná data\r\n                    </td>\r\n                  </tr>\r\n                )}\r\n              </tbody>\r\n            )}\r\n          </table>\r\n        </div>\r\n        <div className=\"w-full p-5 grid grid-cols-3\">\r\n          <div className=\"text-left items-start justify-start\">\r\n            {data && !data.first && (\r\n              <Button\r\n                variant=\"secondary\"\r\n                onClick={prevPage}\r\n                className=\"flex items-center float-left\"\r\n              >\r\n                <MdArrowBack className=\"mr-1.5\" /> Předchozí\r\n              </Button>\r\n            )}\r\n          </div>\r\n          <div className=\" text-center text-xs text-gray-800\">\r\n            {paginationDisplay} {/* Updated to use dynamic page numbers */}\r\n          </div>\r\n          <div className=\"text-right items-end justify-end\">\r\n            {data && !data.last && (\r\n              <Button\r\n                variant=\"secondary\"\r\n                onClick={nextPage}\r\n                className=\"flex items-center float-right\"\r\n              >\r\n                Následující <MdArrowForward className=\"ml-2\" size={20} />\r\n              </Button>\r\n            )}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </>\r\n  );\r\n}\r\n\r\nexport default DataTableServer;\r\n"],"names":["_a"],"mappings":"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"}
+{"version":3,"file":"DataTableServer.js","sources":["../../../lib/components/datatable/DataTableServer.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\r\n\r\nimport {\r\n  Button,\r\n  DataTableColumn,\r\n  FormField,\r\n  IPageable,\r\n  Spinner,\r\n  handleErrors,\r\n  useFederationContext,\r\n} from \"../../main\";\r\nimport {\r\n  MdArrowBack,\r\n  MdArrowDownward,\r\n  MdArrowForward,\r\n  MdArrowUpward,\r\n  MdClose,\r\n  MdOutlineFilterAlt,\r\n  MdOutlineFilterAltOff,\r\n  MdSearch,\r\n} from \"react-icons/md\";\r\nimport SelectField from \"../form/SelectField\";\r\nimport InputField from \"../form/InputField\";\r\n\r\ninterface DataTableServerProps<T> {\r\n  url: string;\r\n  columns: DataTableColumn<T | \"actions\">[];\r\n  itemsPerPage?: number;\r\n  title?: string;\r\n  subtitle?: string;\r\n  allowSearch?: boolean;\r\n}\r\n\r\ntype DataTableInternalItems = {\r\n  _isHighlighted?: boolean;\r\n};\r\n\r\nfunction DataTableServer<T extends DataTableInternalItems>({\r\n  url,\r\n  columns,\r\n  itemsPerPage = 10,\r\n  title,\r\n  subtitle,\r\n  allowSearch = true,\r\n}: DataTableServerProps<T>) {\r\n  const federationContext = useFederationContext();\r\n  const [data, setData] = useState<IPageable<T>>();\r\n  const [isLoading, setIsLoading] = useState(false);\r\n\r\n  const [currentPage, setCurrentPage] = useState(0);\r\n  const [fulltextSearch, setFulltextSearch] = useState(\"\");\r\n  const [filterOptions, setFilterOptions] = useState<Record<string, any[]>>({});\r\n  const [columnFilters, setColumnFilters] = useState<Record<string, string>>(\r\n    {}\r\n  );\r\n\r\n  const [showColFilters, setShowColFilters] = useState(false);\r\n\r\n  const [sortConfig, setSortConfig] = useState<{\r\n    sortParam: string;\r\n    direction: \"ascending\" | \"descending\" | null;\r\n  } | null>(null);\r\n  useEffect(() => {\r\n    setIsLoading(true);\r\n    federationContext.apiClient\r\n      .get(url, {\r\n        params: {\r\n          ...columnFilters,\r\n          pageSize: itemsPerPage,\r\n          page: currentPage,\r\n          sortBy: sortConfig?.sortParam,\r\n          sortDirection: sortConfig?.direction,\r\n        },\r\n      })\r\n      .then((response) => {\r\n        setData(response.data);\r\n        setIsLoading(false);\r\n      })\r\n      .catch((error) => {\r\n        console.error(\"Error fetching data:\", error);\r\n        handleErrors(error, federationContext.emitter);\r\n        setIsLoading(false);\r\n      });\r\n  }, [url, columnFilters, itemsPerPage, currentPage, sortConfig]);\r\n\r\n  useEffect(() => {\r\n    const fetchFilterOptions = async (column: DataTableColumn<T>) => {\r\n      if (!column.filterSource) {\r\n      } else {\r\n        try {\r\n          const response = await federationContext.apiClient.get(\r\n            column.filterSource\r\n          );\r\n\r\n          const options = response.data.map((item: any) => ({\r\n            value: item[column.filterValueKey as keyof typeof item],\r\n            label: item[column.filterLabelKey as keyof typeof item],\r\n          }));\r\n          return options;\r\n        } catch (error) {\r\n          console.error(\"Error fetching filter options:\", error);\r\n          return [];\r\n        }\r\n      }\r\n    };\r\n\r\n    const updateFilterOptions = async () => {\r\n      const newFilterOptions: Record<string, any[]> = {};\r\n\r\n      for (const column of columns) {\r\n        if (\r\n          column.filterType &&\r\n          column.filterSource &&\r\n          column.filterValueKey &&\r\n          column.filterLabelKey &&\r\n          column.filterParam\r\n        ) {\r\n          const options = await fetchFilterOptions(column);\r\n\r\n          if (options) {\r\n            newFilterOptions[column.filterParam as string] = [\r\n              { value: \"\", label: \"\" },\r\n              ...options,\r\n            ];\r\n          }\r\n        }\r\n      }\r\n\r\n      setFilterOptions(newFilterOptions);\r\n    };\r\n\r\n    updateFilterOptions();\r\n  }, [columns]);\r\n\r\n  const requestSort = (sortParam: string) => {\r\n    setSortConfig((prevSortConfig) => {\r\n      if (\r\n        prevSortConfig?.sortParam === sortParam &&\r\n        prevSortConfig.direction !== null\r\n      ) {\r\n        return prevSortConfig.direction === \"ascending\"\r\n          ? { sortParam, direction: \"descending\" }\r\n          : null;\r\n      } else {\r\n        return { sortParam, direction: \"ascending\" };\r\n      }\r\n    });\r\n  };\r\n\r\n  const getSortIcon = (sortParam: string) => {\r\n    if (sortConfig?.sortParam === sortParam) {\r\n      return sortConfig.direction === \"ascending\" ? (\r\n        <MdArrowUpward fontSize=\"small\" />\r\n      ) : sortConfig.direction === \"descending\" ? (\r\n        <MdArrowDownward fontSize=\"small\" />\r\n      ) : (\r\n        <MdArrowUpward\r\n          fontSize=\"small\"\r\n          className=\"text-gray-300 invisible group-hover:visible \"\r\n        />\r\n      );\r\n    }\r\n    return (\r\n      <MdArrowUpward\r\n        fontSize=\"small\"\r\n        className=\"text-gray-300 invisible group-hover:visible \"\r\n      />\r\n    );\r\n  };\r\n\r\n  const nextPage = () => {\r\n    setCurrentPage(currentPage + 1);\r\n  };\r\n\r\n  const prevPage = () => {\r\n    setCurrentPage(currentPage - 1);\r\n  };\r\n  const handleSearchChanged = (\r\n    e: React.ChangeEvent<\r\n      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\r\n    >\r\n  ) => {\r\n    console.log(\r\n      \"%clibcomponentsdatatableDataTable.tsx:238 e\",\r\n      \"color: #007acc;\",\r\n      e\r\n    );\r\n    setFulltextSearch(e.target?.value);\r\n    setCurrentPage(0);\r\n  };\r\n\r\n  // Pagination display logic\r\n  const paginationDisplay = `Strana ${currentPage + 1} z ${data?.totalPages}`;\r\n\r\n  const filterHandler = (filterParam: keyof T, value: string) => {\r\n    setColumnFilters((prev) => ({ ...prev, [filterParam]: value }));\r\n    setCurrentPage(0);\r\n  };\r\n  const handleToggleShowColFilters = () => {\r\n    if (showColFilters) {\r\n      setColumnFilters({});\r\n    }\r\n    setShowColFilters(!showColFilters);\r\n  };\r\n\r\n  //if (isLoading) return <Spinner />;\r\n  return (\r\n    <>\r\n      <div\r\n        className=\"shadow-lg border border-gray-200 rounded-xl  overflow-x-auto\"\r\n        style={{ overflowY: \"visible\" }}\r\n      >\r\n        {(title || subtitle || allowSearch) && (\r\n          <div className=\"p-5 leading-9 flex \">\r\n            <div className=\"flex-grow\">\r\n              {title && (\r\n                <h1 className=\"font-semibold text-xl leading-[42px] \">\r\n                  {title}\r\n                </h1>\r\n              )}\r\n              {subtitle && (\r\n                <p className=\"font-normal text-gray-600\">{subtitle}</p>\r\n              )}\r\n            </div>\r\n\r\n            <div\r\n              className=\"flex items-center text-xl h-full p-3  cursor-pointer text-gray-500 \"\r\n              onClick={handleToggleShowColFilters}\r\n            >\r\n              {!showColFilters && <MdOutlineFilterAlt />}\r\n              {showColFilters && <MdOutlineFilterAltOff />}\r\n            </div>\r\n            {allowSearch && (\r\n              <div className=\"ml-5\">\r\n                <FormField\r\n                  placeholder=\"Vyhledávání\"\r\n                  name=\"search\"\r\n                  onInputChange={handleSearchChanged}\r\n                  type=\"text\"\r\n                  value={fulltextSearch}\r\n                >\r\n                  {\" \"}\r\n                  <div className=\" text-gray-500 leading-5 flex items-center h-full\">\r\n                    {!fulltextSearch && <MdSearch></MdSearch>}\r\n                    {fulltextSearch && (\r\n                      <MdClose onClick={() => setFulltextSearch(\"\")}></MdClose>\r\n                    )}\r\n                  </div>\r\n                </FormField>\r\n              </div>\r\n            )}\r\n          </div>\r\n        )}\r\n        <div className=\"\">\r\n          <table className=\"w-full leading-normal \">\r\n            <thead>\r\n              {showColFilters &&\r\n                columns.findIndex((it) => it.filterType) > -1 && (\r\n                  <tr>\r\n                    {columns.map(({ key, header, filterType, filterParam }) => (\r\n                      <th\r\n                        key={String(key) + \"_filter\"}\r\n                        id={String(key) + \"_filter\"}\r\n                        //  className=\"cursor-pointer px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-sm font-medium text-gray-600 uppercase tracking-wider\"\r\n                        className={` font-medium leading-9 text-xs text-left p-0 pb-5 text-gray-600 overflow-ellipsis \r\n                          whitespace-nowrap ${\r\n                            !title && !subtitle ? \"border-t-0\" : \"\"\r\n                          }`}\r\n                      >\r\n                        {filterType && filterType === \"select\" && (\r\n                          <SelectField\r\n                            label={header}\r\n                            name={String(key) + \"_filter\"}\r\n                            onInputChange={(e) =>\r\n                              filterHandler(\r\n                                filterParam as keyof T,\r\n                                e.target.value\r\n                              )\r\n                            }\r\n                            type={filterType}\r\n                            options={filterOptions[String(filterParam)] || []}\r\n                            value={columnFilters[String(filterParam)]}\r\n                            clearable\r\n                            className=\"pl-5\"\r\n                          ></SelectField>\r\n                        )}\r\n                        {filterType && filterType !== \"select\" && (\r\n                          <InputField\r\n                            label={header}\r\n                            name={String(key) + \"_filter\"}\r\n                            onInputChange={(e) =>\r\n                              filterHandler(\r\n                                filterParam as keyof T,\r\n                                e.target.value\r\n                              )\r\n                            }\r\n                            type={filterType}\r\n                            value={columnFilters[String(filterParam)]}\r\n                            clearable\r\n                            className=\"max-w-[300px] min-w-[100px] pl-5\"\r\n                          ></InputField>\r\n                        )}\r\n                      </th>\r\n                    ))}\r\n                  </tr>\r\n                )}\r\n              <tr>\r\n                {columns.map(({ key, header, actions, sortParam }) => (\r\n                  <th\r\n                    key={String(key)}\r\n                    //  className=\"cursor-pointer px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-sm font-medium text-gray-600 uppercase tracking-wider\"\r\n                    className={`group font-medium leading-9 text-xs text-left px-5 text-gray-600 bg bg-gray-50 border-t border-b border-gray-200 ${\r\n                      !title && !subtitle ? \"border-t-0\" : \"\"\r\n                    } ${sortParam ? \" cursor-pointer \" : \"\"}`}\r\n                    onClick={() =>\r\n                      sortParam ? requestSort(sortParam) : () => {}\r\n                    }\r\n                  >\r\n                    <span className=\"inline-flex items-center gap-2\">\r\n                      {header}{\" \"}\r\n                      {!actions && sortParam ? getSortIcon(sortParam) : \"\"}\r\n                    </span>\r\n                  </th>\r\n                ))}\r\n              </tr>\r\n            </thead>\r\n            {data && data?.content && data?.content.length > 0 && (\r\n              <tbody className=\"relative\">\r\n                {isLoading && (\r\n                  <div className=\"absolute inset-0 bg-gray-300 opacity-50 z-50\">\r\n                    <div className=\"flex items-center justify-center h-full\">\r\n                      <Spinner />\r\n                    </div>\r\n                  </div>\r\n                )}\r\n                {data.content.map((item, rowIndex) => (\r\n                  <tr\r\n                    key={rowIndex}\r\n                    className={`${\r\n                      item._isHighlighted ? \" bg-gray-200  \" : \" \"\r\n                    } hover:bg-gray-50  border-gray-200 border-b text-sm `}\r\n                  >\r\n                    {columns.map(({ render, actions, classes }, colIndex) => (\r\n                      <td\r\n                        key={`${rowIndex}-${colIndex}`}\r\n                        className={`px-5 py-2\r\n                   ${\r\n                     colIndex == 0\r\n                       ? \" font-medium text-gray-900\"\r\n                       : \" text-gray-700\"\r\n                   } ${classes || \"\"}`}\r\n                      >\r\n                        {render ? render(item) : \"\"}\r\n                        {actions &&\r\n                          actions\r\n                            .filter((it) => {\r\n                              if (it.visible) {\r\n                                return it.visible(item);\r\n                              } else true;\r\n                            })\r\n                            .map((action, actionIndex) => (\r\n                              <div\r\n                                key={`${rowIndex}-${colIndex}-${actionIndex}`}\r\n                                className=\"flex inline-flex align-middle\"\r\n                              >\r\n                                {action.icon && (\r\n                                  <Button\r\n                                    variant=\"icon\"\r\n                                    onClick={() => action.onClick(item)}\r\n                                  >\r\n                                    {\" \"}\r\n                                    {action.icon}\r\n                                  </Button>\r\n                                )}\r\n                                {!action.icon && (\r\n                                  <Button\r\n                                    variant=\"transparent\"\r\n                                    onClick={() => action.onClick(item)}\r\n                                  >\r\n                                    {\" \"}\r\n                                    {action.label}\r\n                                  </Button>\r\n                                )}\r\n                              </div>\r\n                            ))}\r\n                      </td>\r\n                    ))}\r\n                  </tr>\r\n                ))}\r\n                {data?.content?.length == 0 && (\r\n                  <tr key=\"tr-nodata   \">\r\n                    <td\r\n                      key=\"td-nodata\"\r\n                      className=\"px-5 py-3 border-b border-gray-200 bg-white text-sm items-center justify-center align-middle\"\r\n                      colSpan={columns.length}\r\n                    >\r\n                      Žádná data\r\n                    </td>\r\n                  </tr>\r\n                )}\r\n              </tbody>\r\n            )}\r\n          </table>\r\n        </div>\r\n        <div className=\"w-full p-5 grid grid-cols-3\">\r\n          <div className=\"text-left items-start justify-start\">\r\n            {data && !data.first && (\r\n              <Button\r\n                variant=\"secondary\"\r\n                onClick={prevPage}\r\n                className=\"flex items-center float-left\"\r\n              >\r\n                <MdArrowBack className=\"mr-1.5\" /> Předchozí\r\n              </Button>\r\n            )}\r\n          </div>\r\n          <div className=\" text-center text-xs text-gray-800\">\r\n            {paginationDisplay} {/* Updated to use dynamic page numbers */}\r\n          </div>\r\n          <div className=\"text-right items-end justify-end\">\r\n            {data && !data.last && (\r\n              <Button\r\n                variant=\"secondary\"\r\n                onClick={nextPage}\r\n                className=\"flex items-center float-right\"\r\n              >\r\n                Následující <MdArrowForward className=\"ml-2\" size={20} />\r\n              </Button>\r\n            )}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </>\r\n  );\r\n}\r\n\r\nexport default DataTableServer;\r\n"],"names":["_a"],"mappings":"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"}

package/dist/components/form/AutocompleteSearchBar.js

@@ -1,53 +1,10 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useRef, useEffect, useState } from "react";
+import { useState, useRef, useEffect } from "react";
 import '../../assets/tailwind.css';/* empty css                      */
-import { i as MdExpandLess, j as MdExpandMore, c as MdClose } from "../../index-ZA1ctELQ.js";
+import { M as MdExpandLess, a as MdExpandMore, b as MdClose } from "../../index-BDqNIr_C.js";
 import "../../contexts/FederationContext.js";
 import { useFederationContext } from "../../contexts/useFederationContext.js";
-function on(obj) {
-  var args = [];
-  for (var _i = 1; _i < arguments.length; _i++) {
-    args[_i - 1] = arguments[_i];
-  }
-  if (obj && obj.addEventListener) {
-    obj.addEventListener.apply(obj, args);
-  }
-}
-function off(obj) {
-  var args = [];
-  for (var _i = 1; _i < arguments.length; _i++) {
-    args[_i - 1] = arguments[_i];
-  }
-  if (obj && obj.removeEventListener) {
-    obj.removeEventListener.apply(obj, args);
-  }
-}
-var defaultEvents = ["mousedown", "touchstart"];
-var useClickAway = function(ref, onClickAway, events) {
-  if (events === void 0) {
-    events = defaultEvents;
-  }
-  var savedCallback = useRef(onClickAway);
-  useEffect(function() {
-    savedCallback.current = onClickAway;
-  }, [onClickAway]);
-  useEffect(function() {
-    var handler = function(event) {
-      var el = ref.current;
-      el && !el.contains(event.target) && savedCallback.current(event);
-    };
-    for (var _i = 0, events_1 = events; _i < events_1.length; _i++) {
-      var eventName = events_1[_i];
-      on(document, eventName, handler);
-    }
-    return function() {
-      for (var _i2 = 0, events_2 = events; _i2 < events_2.length; _i2++) {
-        var eventName2 = events_2[_i2];
-        off(document, eventName2, handler);
-      }
-    };
-  }, [events, ref]);
-};
+import { u as useClickAway } from "../../useClickAway-CH9ykBsx.js";
 const AutocompleteSearchBar = ({
   label,
   name,
@@ -331,7 +288,7 @@ const SearchInput = ({
       "input",
       {
         type: "text",
-        className: `pl-1 py-1 border-gray-800 w-full ${isLoading ? "pr-10" : "pr-20"}`,
+        className: `pl-1 py-1 border-gray-800 w-full ${isLoading ? "pr-10 " : "pr-20"}`,
         value,
         onChange,
         onKeyDown,
@@ -388,7 +345,7 @@ const SearchInput = ({
     value && !isLoading && /* @__PURE__ */ jsx(
       MdClose,
       {
-        className: "material-icons absolute right-10 cursor-pointer text-gray-500",
+        className: "material-icons absolute right-6 cursor-pointer text-gray-500",
         onClick: handleClearQuery
       }
     )