@addsign/moje-agenda-shared-lib 0.0.74 → 0.0.77

package/dist/components/datatable/DataTableServer.d.ts

@@ -15,10 +15,11 @@ interface DataTableServerProps<T> {
     allowSearch?: boolean;
     rowAction?: (item: T) => void;
     bulkActions?: BulkAction<T>[];
+    filters?: object;
 }
 type DataTableInternalItems = {
     _isHighlighted?: boolean;
     id: string;
 };
-declare function DataTableServer<T extends DataTableInternalItems>({ id, url, columns, itemsPerPage, title, subtitle, allowSearch, rowAction, bulkActions, }: DataTableServerProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function DataTableServer<T extends DataTableInternalItems>({ id, url, columns, itemsPerPage, title, subtitle, allowSearch, rowAction, bulkActions, filters, }: DataTableServerProps<T>): import("react/jsx-runtime").JSX.Element;
 export default DataTableServer;

package/dist/components/datatable/DataTableServer.js

@@ -21,7 +21,8 @@ function DataTableServer({
   subtitle,
   allowSearch = true,
   rowAction,
-  bulkActions
+  bulkActions,
+  filters
 }) {
   var _a;
   const federationContext = useFederationContext();
@@ -38,7 +39,8 @@ function DataTableServer({
     setIsLoading(true);
     federationContext.apiClient.get(url, {
       params: {
-        ...columnFilters,
+        ...filters,
+        ...showColFilters ? columnFilters : {},
         pageSize: itemsPerPage,
         page: currentPage,
         sortBy: sortConfig == null ? void 0 : sortConfig.sortParam,
@@ -54,12 +56,14 @@ function DataTableServer({
     });
   }, [
     url,
+    showColFilters,
     columnFilters,
     itemsPerPage,
     currentPage,
     sortConfig,
     federationContext.apiClient,
-    federationContext.emitter
+    federationContext.emitter,
+    filters
   ]);
   useEffect(() => {
     const fetchFilterOptions = async (column) => {
@@ -152,11 +156,6 @@ function DataTableServer({
   };
   const handleSearchChanged = (e) => {
     var _a2;
-    console.log(
-      "%clibcomponentsdatatableDataTable.tsx:238 e",
-      "color: #007acc;",
-      e
-    );
     setFulltextSearch((_a2 = e.target) == null ? void 0 : _a2.value);
     setCurrentPage(0);
   };
@@ -177,11 +176,6 @@ function DataTableServer({
       const storedStorageObject = localStorage.getItem(storageKey);
       if (storedStorageObject) {
         const storageObject = JSON.parse(storedStorageObject);
-        console.log(
-          "%clibcomponentsdatatableDataTableServer.tsx:255 loading storageObject",
-          "color: #007acc;",
-          storageObject
-        );
         setColumnFilters(storageObject.columnFilters);
         setShowColFilters(storageObject.showColFilters);
       }
@@ -189,12 +183,6 @@ function DataTableServer({
   }, [id]);
   useEffect(() => {
     if (id && columnFilters !== void 0 && showColFilters !== void 0) {
-      console.log(
-        "%clibcomponentsdatatableDataTableServer.tsx:266 sotring columnFilters,",
-        "color: #007acc;",
-        showColFilters,
-        columnFilters
-      );
       const storageKey = `datatable:${id}`;
       const storageObject = localStorage.getItem(storageKey) ? JSON.parse(localStorage.getItem(storageKey)) : {};
       storageObject.columnFilters = columnFilters;
@@ -316,7 +304,7 @@ function DataTableServer({
                   type: "checkbox",
                   className: "w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-indigo-200 focus:ring-4",
                   onChange: handleSelectAll,
-                  checked: data && selectedItems.length === data.content.length
+                  checked: data && selectedItems.length === data.content.length && data.content.length > 0
                 }
               ) }) }),
               columns.map(({ key, header, actions, sortParam, width }) => /* @__PURE__ */ jsx(
@@ -421,7 +409,7 @@ function DataTableServer({
               className: "flex items-center",
               children: [
                 /* @__PURE__ */ jsx(MdArrowBack, { className: "mr-1.5" }),
-                " Previous"
+                " Předchozí"
               ]
             }
           ),
@@ -432,7 +420,7 @@ function DataTableServer({
               onClick: nextPage,
               className: "flex items-center",
               children: [
-                "Next ",
+                "Následující ",
                 /* @__PURE__ */ jsx(MdArrowForward, { className: "ml-2", size: 20 })
               ]
             }

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  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 BulkAction<T> {\r\n  name: string;\r\n  action: (items: T[]) => void;\r\n  icon?: any;\r\n}\r\n\r\ninterface DataTableServerProps<T> {\r\n  id?: string;\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  rowAction?: (item: T) => void;\r\n  bulkActions?: BulkAction<T>[];\r\n}\r\n\r\ntype DataTableInternalItems = {\r\n  _isHighlighted?: boolean;\r\n  id: string; // Assuming items have an `id` field for identification\r\n};\r\n\r\nfunction DataTableServer<T extends DataTableInternalItems>({\r\n  id,\r\n  url,\r\n  columns,\r\n  itemsPerPage = 10,\r\n  title,\r\n  subtitle,\r\n  allowSearch = true,\r\n  rowAction,\r\n  bulkActions,\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 [selectedItems, setSelectedItems] = useState<T[]>([]);\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  const [showColFilters, setShowColFilters] = useState<boolean>();\r\n  const [sortConfig, setSortConfig] = useState<{\r\n    sortParam: string;\r\n    direction: \"asc\" | \"desc\" | null;\r\n  } | null>(null);\r\n\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  }, [\r\n    url,\r\n    columnFilters,\r\n    itemsPerPage,\r\n    currentPage,\r\n    sortConfig,\r\n    federationContext.apiClient,\r\n    federationContext.emitter,\r\n  ]);\r\n\r\n  useEffect(() => {\r\n    const fetchFilterOptions = async (column: DataTableColumn<T>) => {\r\n      if (column.filterSource) {\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    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, federationContext.apiClient]);\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 === \"asc\"\r\n          ? { sortParam, direction: \"desc\" }\r\n          : null;\r\n      } else {\r\n        return { sortParam, direction: \"asc\" };\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 === \"asc\" ? (\r\n        <MdArrowUpward fontSize=\"small\" />\r\n      ) : sortConfig.direction === \"desc\" ? (\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 handleSelectItem = (item: T) => {\r\n    setSelectedItems((prevSelectedItems) => {\r\n      if (\r\n        prevSelectedItems.find((selectedItem) => selectedItem.id === item.id)\r\n      ) {\r\n        return prevSelectedItems.filter(\r\n          (selectedItem) => selectedItem.id !== item.id\r\n        );\r\n      } else {\r\n        return [...prevSelectedItems, item];\r\n      }\r\n    });\r\n  };\r\n\r\n  const handleSelectAll = () => {\r\n    if (data && selectedItems.length === data.content.length) {\r\n      setSelectedItems([]);\r\n    } else if (data) {\r\n      setSelectedItems(data.content);\r\n    }\r\n  };\r\n\r\n  const isSelected = (item: T) => {\r\n    return selectedItems.some((selectedItem) => selectedItem.id === item.id);\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\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 && columnFilters !== undefined) {\r\n      setColumnFilters(columnFilters);\r\n    }\r\n\r\n    setShowColFilters(!showColFilters);\r\n  };\r\n\r\n  //load from localstorage\r\n  useEffect(() => {\r\n    if (id) {\r\n      const storageKey = `datatable:${id}`;\r\n      const storedStorageObject = localStorage.getItem(storageKey);\r\n      if (storedStorageObject) {\r\n        const storageObject = JSON.parse(storedStorageObject);\r\n        console.log(\r\n          \"%clibcomponentsdatatableDataTableServer.tsx:255 loading storageObject\",\r\n          \"color: #007acc;\",\r\n          storageObject\r\n        );\r\n        setColumnFilters(storageObject.columnFilters);\r\n        setShowColFilters(storageObject.showColFilters);\r\n      }\r\n    }\r\n  }, [id]);\r\n  //store filters in localstorage\r\n  useEffect(() => {\r\n    if (id && columnFilters !== undefined && showColFilters !== undefined) {\r\n      console.log(\r\n        \"%clibcomponentsdatatableDataTableServer.tsx:266 sotring columnFilters,\",\r\n        \"color: #007acc;\",\r\n        showColFilters,\r\n        columnFilters\r\n      );\r\n      const storageKey = `datatable:${id}`;\r\n      const storageObject = localStorage.getItem(storageKey)\r\n        ? JSON.parse(localStorage.getItem(storageKey)!)\r\n        : {};\r\n\r\n      storageObject.columnFilters = columnFilters;\r\n      storageObject.showColFilters = showColFilters;\r\n      localStorage.setItem(storageKey, JSON.stringify(storageObject));\r\n    }\r\n  }, [columnFilters, showColFilters, id]);\r\n\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            {bulkActions && selectedItems.length > 0 && (\r\n              <div className=\"flex items-center justify-end  text-gray-800\">\r\n                Hromadná akce ({selectedItems.length}{\" \"}\r\n                {selectedItems.length == 1\r\n                  ? \"položka\"\r\n                  : selectedItems.length < 5\r\n                    ? \"položky\"\r\n                    : \"položek\"}\r\n                ) :\r\n                {bulkActions.map((bulkAction) => (\r\n                  <Button\r\n                    key={bulkAction.name}\r\n                    variant=\"primary\"\r\n                    className=\"ml-2\"\r\n                    onClick={() => bulkAction.action(selectedItems)}\r\n                  >\r\n                    {bulkAction.name}\r\n                  </Button>\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(\"\")} />\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                    {data && bulkActions && <td> </td>}\r\n                    {columns.map(\r\n                      ({ key, header, filterType, filterParam, width }) => (\r\n                        <th\r\n                          key={String(key) + \"_filter\"}\r\n                          id={String(key) + \"_filter\"}\r\n                          className={`font-medium leading-9 text-xs text-left p-0 pb-5 text-gray-600 overflow-ellipsis whitespace-nowrap ${\r\n                            !title && !subtitle ? \"border-t-0\" : \"\"\r\n                          }`}\r\n                          style={{ width: width }}\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-3\"\r\n                            />\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-3\"\r\n                            />\r\n                          )}\r\n                        </th>\r\n                      )\r\n                    )}\r\n                  </tr>\r\n                )}\r\n              <tr>\r\n                {data && bulkActions && (\r\n                  <th className=\"w-[20px] h-10 hover:bg-gray-200 bg-gray-50  font-medium text-xs text-center text-gray-600 cursor-pointer border-t border-b border-gray-200\">\r\n                    <label className=\"w-full h-full flex items-center justify-center cursor-pointer px-2\">\r\n                      <input\r\n                        id=\"selectAll\"\r\n                        type=\"checkbox\"\r\n                        className=\"w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-indigo-200 focus:ring-4\"\r\n                        onChange={handleSelectAll}\r\n                        checked={\r\n                          data && selectedItems.length === data.content.length\r\n                        }\r\n                      />\r\n                    </label>\r\n                  </th>\r\n                )}\r\n                {columns.map(({ key, header, actions, sortParam, width }) => (\r\n                  <th\r\n                    key={String(key)}\r\n                    className={`group font-medium leading-9 text-xs text-left px-3 text-gray-600 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) : undefined\r\n                    }\r\n                    style={{ width: width }}\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                  <tr>\r\n                    <td>\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                    </td>\r\n                  </tr>\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-100 border-gray-200 border-b text-sm`}\r\n                  >\r\n                    {bulkActions && (\r\n                      <td className=\"w-[20px] h-[72px] hover:bg-gray-200 font-medium text-xs text-center text-gray-600 cursor-pointer\">\r\n                        <label className=\"w-full h-full flex items-center justify-center cursor-pointer px-2\">\r\n                          <input\r\n                            type=\"checkbox\"\r\n                            className=\"w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-indigo-200 focus:ring-4\"\r\n                            checked={isSelected(item) || false}\r\n                            onChange={() => handleSelectItem(item)}\r\n                          />\r\n                        </label>\r\n                      </td>\r\n                    )}\r\n                    {columns.map(\r\n                      ({ render, actions, classes, width }, colIndex) => (\r\n                        <td\r\n                          key={`${rowIndex}-${colIndex}`}\r\n                          onClick={\r\n                            rowAction ? () => rowAction(item) : undefined\r\n                          }\r\n                          style={{ width: width }}\r\n                          className={`px-3 py-2 cursor-pointer ${\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.rowAction) return false;\r\n                                if (it.visible) {\r\n                                  return it.visible(item);\r\n                                } else return 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                                      {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                                      {action.label}\r\n                                    </Button>\r\n                                  )}\r\n                                </div>\r\n                              ))}\r\n                        </td>\r\n                      )\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                      No 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 flex gap-5 justify-between\">\r\n          <div className=\"flex gap-5\">\r\n            {data && !data.first && (\r\n              <Button\r\n                variant=\"secondary\"\r\n                onClick={prevPage}\r\n                className=\"flex items-center\"\r\n              >\r\n                <MdArrowBack className=\"mr-1.5\" /> Previous\r\n              </Button>\r\n            )}\r\n            {data && !data.last && (\r\n              <Button\r\n                variant=\"secondary\"\r\n                onClick={nextPage}\r\n                className=\"flex items-center\"\r\n              >\r\n                Next <MdArrowForward className=\"ml-2\" size={20} />\r\n              </Button>\r\n            )}\r\n            <div className=\"flex items-center justify-end text-xs text-gray-800\">\r\n              {paginationDisplay}\r\n            </div>\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 BulkAction<T> {\r\n  name: string;\r\n  action: (items: T[]) => void;\r\n  icon?: any;\r\n}\r\n\r\ninterface DataTableServerProps<T> {\r\n  id?: string;\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  rowAction?: (item: T) => void;\r\n  bulkActions?: BulkAction<T>[];\r\n  filters?: object;\r\n}\r\n\r\ntype DataTableInternalItems = {\r\n  _isHighlighted?: boolean;\r\n  id: string; // Assuming items have an `id` field for identification\r\n};\r\n\r\nfunction DataTableServer<T extends DataTableInternalItems>({\r\n  id,\r\n  url,\r\n  columns,\r\n  itemsPerPage = 10,\r\n  title,\r\n  subtitle,\r\n  allowSearch = true,\r\n  rowAction,\r\n  bulkActions,\r\n  filters,\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 [selectedItems, setSelectedItems] = useState<T[]>([]);\r\n  const [fulltextSearch, setFulltextSearch] = useState(\"\");\r\n  const [filterOptions, setFilterOptions] = useState<Record<string, any[]>>({});\r\n  const [columnFilters, setColumnFilters] = useState<{ [key: string]: any }>();\r\n  const [showColFilters, setShowColFilters] = useState<boolean>();\r\n  const [sortConfig, setSortConfig] = useState<{\r\n    sortParam: string;\r\n    direction: \"asc\" | \"desc\" | null;\r\n  } | null>(null);\r\n\r\n  useEffect(() => {\r\n    setIsLoading(true);\r\n    federationContext.apiClient\r\n      .get(url, {\r\n        params: {\r\n          ...filters,\r\n          ...(showColFilters ? 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  }, [\r\n    url,\r\n    showColFilters,\r\n\r\n    columnFilters,\r\n    itemsPerPage,\r\n    currentPage,\r\n    sortConfig,\r\n    federationContext.apiClient,\r\n    federationContext.emitter,\r\n    filters,\r\n  ]);\r\n\r\n  useEffect(() => {\r\n    const fetchFilterOptions = async (column: DataTableColumn<T>) => {\r\n      if (column.filterSource) {\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    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, federationContext.apiClient]);\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 === \"asc\"\r\n          ? { sortParam, direction: \"desc\" }\r\n          : null;\r\n      } else {\r\n        return { sortParam, direction: \"asc\" };\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 === \"asc\" ? (\r\n        <MdArrowUpward fontSize=\"small\" />\r\n      ) : sortConfig.direction === \"desc\" ? (\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 handleSelectItem = (item: T) => {\r\n    setSelectedItems((prevSelectedItems) => {\r\n      if (\r\n        prevSelectedItems.find((selectedItem) => selectedItem.id === item.id)\r\n      ) {\r\n        return prevSelectedItems.filter(\r\n          (selectedItem) => selectedItem.id !== item.id\r\n        );\r\n      } else {\r\n        return [...prevSelectedItems, item];\r\n      }\r\n    });\r\n  };\r\n\r\n  const handleSelectAll = () => {\r\n    if (data && selectedItems.length === data.content.length) {\r\n      setSelectedItems([]);\r\n    } else if (data) {\r\n      setSelectedItems(data.content);\r\n    }\r\n  };\r\n\r\n  const isSelected = (item: T) => {\r\n    return selectedItems.some((selectedItem) => selectedItem.id === item.id);\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\r\n  const handleSearchChanged = (\r\n    e: React.ChangeEvent<\r\n      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\r\n    >\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 && columnFilters !== undefined) {\r\n      setColumnFilters(columnFilters);\r\n    }\r\n\r\n    setShowColFilters(!showColFilters);\r\n  };\r\n\r\n  //load from localstorage\r\n  useEffect(() => {\r\n    if (id) {\r\n      const storageKey = `datatable:${id}`;\r\n      const storedStorageObject = localStorage.getItem(storageKey);\r\n      if (storedStorageObject) {\r\n        const storageObject = JSON.parse(storedStorageObject);\r\n\r\n        setColumnFilters(storageObject.columnFilters);\r\n        setShowColFilters(storageObject.showColFilters);\r\n      }\r\n    }\r\n  }, [id]);\r\n  //store filters in localstorage\r\n  useEffect(() => {\r\n    if (id && columnFilters !== undefined && showColFilters !== undefined) {\r\n      const storageKey = `datatable:${id}`;\r\n      const storageObject = localStorage.getItem(storageKey)\r\n        ? JSON.parse(localStorage.getItem(storageKey)!)\r\n        : {};\r\n\r\n      storageObject.columnFilters = columnFilters;\r\n      storageObject.showColFilters = showColFilters;\r\n      localStorage.setItem(storageKey, JSON.stringify(storageObject));\r\n    }\r\n  }, [columnFilters, showColFilters, id]);\r\n\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            {bulkActions && selectedItems.length > 0 && (\r\n              <div className=\"flex items-center justify-end  text-gray-800\">\r\n                Hromadná akce ({selectedItems.length}{\" \"}\r\n                {selectedItems.length == 1\r\n                  ? \"položka\"\r\n                  : selectedItems.length < 5\r\n                    ? \"položky\"\r\n                    : \"položek\"}\r\n                ) :\r\n                {bulkActions.map((bulkAction) => (\r\n                  <Button\r\n                    key={bulkAction.name}\r\n                    variant=\"primary\"\r\n                    className=\"ml-2\"\r\n                    onClick={() => bulkAction.action(selectedItems)}\r\n                  >\r\n                    {bulkAction.name}\r\n                  </Button>\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(\"\")} />\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                    {data && bulkActions && <td> </td>}\r\n                    {columns.map(\r\n                      ({ key, header, filterType, filterParam, width }) => (\r\n                        <th\r\n                          key={String(key) + \"_filter\"}\r\n                          id={String(key) + \"_filter\"}\r\n                          className={`font-medium leading-9 text-xs text-left p-0 pb-5 text-gray-600 overflow-ellipsis whitespace-nowrap ${\r\n                            !title && !subtitle ? \"border-t-0\" : \"\"\r\n                          }`}\r\n                          style={{ width: width }}\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-3\"\r\n                            />\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-3\"\r\n                            />\r\n                          )}\r\n                        </th>\r\n                      )\r\n                    )}\r\n                  </tr>\r\n                )}\r\n              <tr>\r\n                {data && bulkActions && (\r\n                  <th className=\"w-[20px] h-10 hover:bg-gray-200 bg-gray-50  font-medium text-xs text-center text-gray-600 cursor-pointer border-t border-b border-gray-200\">\r\n                    <label className=\"w-full h-full flex items-center justify-center cursor-pointer px-2\">\r\n                      <input\r\n                        id=\"selectAll\"\r\n                        type=\"checkbox\"\r\n                        className=\"w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-indigo-200 focus:ring-4\"\r\n                        onChange={handleSelectAll}\r\n                        checked={\r\n                          data &&\r\n                          selectedItems.length === data.content.length &&\r\n                          data.content.length > 0\r\n                        }\r\n                      />\r\n                    </label>\r\n                  </th>\r\n                )}\r\n                {columns.map(({ key, header, actions, sortParam, width }) => (\r\n                  <th\r\n                    key={String(key)}\r\n                    className={`group font-medium leading-9 text-xs text-left px-3 text-gray-600 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) : undefined\r\n                    }\r\n                    style={{ width: width }}\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                  <tr>\r\n                    <td>\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                    </td>\r\n                  </tr>\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-100 border-gray-200 border-b text-sm`}\r\n                  >\r\n                    {bulkActions && (\r\n                      <td className=\"w-[20px] h-[72px] hover:bg-gray-200 font-medium text-xs text-center text-gray-600 cursor-pointer\">\r\n                        <label className=\"w-full h-full flex items-center justify-center cursor-pointer px-2\">\r\n                          <input\r\n                            type=\"checkbox\"\r\n                            className=\"w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-indigo-200 focus:ring-4\"\r\n                            checked={isSelected(item) || false}\r\n                            onChange={() => handleSelectItem(item)}\r\n                          />\r\n                        </label>\r\n                      </td>\r\n                    )}\r\n                    {columns.map(\r\n                      ({ render, actions, classes, width }, colIndex) => (\r\n                        <td\r\n                          key={`${rowIndex}-${colIndex}`}\r\n                          onClick={\r\n                            rowAction ? () => rowAction(item) : undefined\r\n                          }\r\n                          style={{ width: width }}\r\n                          className={`px-3 py-2 cursor-pointer ${\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.rowAction) return false;\r\n                                if (it.visible) {\r\n                                  return it.visible(item);\r\n                                } else return 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                                      {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                                      {action.label}\r\n                                    </Button>\r\n                                  )}\r\n                                </div>\r\n                              ))}\r\n                        </td>\r\n                      )\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                      No 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 flex gap-5 justify-between\">\r\n          <div className=\"flex gap-5\">\r\n            {data && !data.first && (\r\n              <Button\r\n                variant=\"secondary\"\r\n                onClick={prevPage}\r\n                className=\"flex items-center\"\r\n              >\r\n                <MdArrowBack className=\"mr-1.5\" /> Předchozí\r\n              </Button>\r\n            )}\r\n            {data && !data.last && (\r\n              <Button\r\n                variant=\"secondary\"\r\n                onClick={nextPage}\r\n                className=\"flex items-center\"\r\n              >\r\n                Následující <MdArrowForward className=\"ml-2\" size={20} />\r\n              </Button>\r\n            )}\r\n            <div className=\"flex items-center justify-end text-xs text-gray-800\">\r\n              {paginationDisplay}\r\n            </div>\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

@@ -196,7 +196,7 @@ const AutocompleteSearchBar = ({
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: `self-stretch px-3 py-1.5 rounded-lg justify-start items-center gap-2 inline-flex outline-none border 
+              className: `self-stretch px-3 py-1.5 rounded-lg justify-start items-center gap-2 inline-flex outline-none border  bg-white
             ${isFocused ? "outline-4 outline-indigo-200 outline-offset-0 border-indigo-300" : ""} 
             ${isFocused && ((_a = errors[name]) == null ? void 0 : _a.message) ? "outline-4 outline-red-200 outline-offset-0 border-none" : ""}  
             ${!isFocused && ((_b = errors[name]) == null ? void 0 : _b.message) ? "border-red-200" : ""}   
@@ -287,12 +287,12 @@ const SearchInput = ({
   const handleClearQuery = () => {
     clearQuery();
   };
-  return /* @__PURE__ */ jsxs("div", { className: "relative flex items-center w-full sharedResource text-sm", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex items-center w-full sharedResource text-sm bg-white", children: [
     /* @__PURE__ */ jsx(
       "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  bg-white  w-full ${isLoading ? "pr-10 " : "pr-20"}`,
         value,
         onChange,
         onKeyDown,

package/dist/components/form/AutocompleteSearchBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteSearchBar.js","sources":["../../../lib/components/form/AutocompleteSearchBar.tsx"],"sourcesContent":["import { useState, useEffect, useRef } from \"react\";\r\nimport { useClickAway } from \"react-use\";\r\nimport { IOptionItem, useFederationContext } from \"../../main\";\r\nimport { MdClose, MdExpandLess, MdExpandMore } from \"react-icons/md\";\r\n\r\ninterface OptionListProps {\r\n  options: IOptionItem[];\r\n  selectedOptionIndex: number;\r\n  handleOptionClick: (option: IOptionItem) => void;\r\n  label?: string;\r\n}\r\n\r\ninterface SearchInputProps {\r\n  value: string;\r\n  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\r\n  onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\r\n  onFocus: () => void;\r\n  clearQuery: () => void;\r\n  inputRef: React.RefObject<HTMLInputElement>;\r\n  placeholder?: string;\r\n  isFocused?: boolean;\r\n  onBlur: () => void;\r\n  isLoading?: boolean;\r\n}\r\n\r\nconst AutocompleteSearchBar: React.FC<{\r\n  label: string;\r\n  name: string;\r\n  required?: boolean;\r\n  disabled?: boolean;\r\n  description?: string;\r\n  fetchUrl?: string;\r\n  valueKey: string;\r\n  labelKey: string;\r\n  onChange: (value: any) => void;\r\n  onFocus: () => void;\r\n  onBlur: () => void;\r\n  placeholder?: string;\r\n  serverSearch?: boolean;\r\n  value?: string;\r\n  initOptions?: IOptionItem[];\r\n  showId?: boolean;\r\n}> = ({\r\n  label,\r\n  name,\r\n  required,\r\n  disabled,\r\n  description,\r\n  fetchUrl,\r\n  valueKey,\r\n  labelKey,\r\n  onChange,\r\n  onFocus,\r\n  onBlur,\r\n  placeholder,\r\n  serverSearch = false,\r\n  value,\r\n  initOptions,\r\n  showId,\r\n}) => {\r\n  const [query, setQuery] = useState(\"\");\r\n  const [loading, setLoading] = useState(false);\r\n  const [options, setOptions] = useState<IOptionItem[]>([]);\r\n  const [selectedOptionIndex, setSelectedOptionIndex] = useState(-1);\r\n  const [selectedOption, setSelectedOption] = useState<IOptionItem | null>(\r\n    null\r\n  );\r\n  const [searchResults, setSearchResults] = useState<IOptionItem[]>([]);\r\n  const inputRef = useRef<HTMLInputElement>(null);\r\n  const ref = useRef(null);\r\n  const federationContext = useFederationContext();\r\n\r\n  const [isFocused, setIsFocused] = useState(false);\r\n\r\n  const [errors] = useState<any>({});\r\n\r\n  useEffect(() => {\r\n    const fetchOptions = async () => {\r\n      setLoading(true);\r\n      console.log(\r\n        \"%csrcsharedAutocompleteSearchBar.tsx:77 fetchUrl, value\",\r\n        \"color: #007acc;\",\r\n        fetchUrl\r\n      );\r\n      const { data } = await federationContext.apiClient.get(fetchUrl || \"\");\r\n      // osetreni obou variant navratu  z BE\r\n      const tmpData = data.content || data;\r\n\r\n      setOptions(\r\n        tmpData.map((item: any) => ({\r\n          value: item[valueKey],\r\n          label: item[labelKey] + (showId ? \" (\" + item[valueKey] + \")\" : \"\"),\r\n        }))\r\n      ); // Adjust map according to actual API response\r\n      setLoading(false);\r\n    };\r\n\r\n    if (fetchUrl) fetchOptions();\r\n  }, [fetchUrl, labelKey, showId, valueKey, federationContext.apiClient]);\r\n\r\n  useEffect(() => {\r\n    if (initOptions) setOptions(initOptions);\r\n  }, [initOptions]);\r\n\r\n  useEffect(() => {\r\n    if (value && options) {\r\n      const initOption = options.find((it) => it.value == value);\r\n\r\n      if (initOption) {\r\n        setQuery(initOption.label);\r\n        setSelectedOption(initOption);\r\n      }\r\n    }\r\n  }, [value, options]);\r\n\r\n  useEffect(() => {\r\n    const fetchOptions = async () => {\r\n      setLoading(true);\r\n      const { data } = await federationContext.apiClient.get(fetchUrl + query);\r\n      setOptions(\r\n        data.map((item: any) => ({\r\n          value: item[valueKey],\r\n          label: item[labelKey] + (showId ? \" (\" + item[valueKey] + \")\" : \"\"),\r\n        }))\r\n      ); // Adjust map according to actual API response\r\n      setSearchResults(\r\n        data.map((item: any) => ({\r\n          value: item[valueKey],\r\n          label: item[labelKey] + (showId ? \" (\" + item[valueKey] + \")\" : \"\"),\r\n        }))\r\n      ); // Adjust map according to actual API response\r\n\r\n      setLoading(false);\r\n    };\r\n\r\n    if (serverSearch) fetchOptions();\r\n  }, [\r\n    query,\r\n    serverSearch,\r\n    valueKey,\r\n    labelKey,\r\n    fetchUrl,\r\n    federationContext.apiClient,\r\n    showId,\r\n  ]);\r\n\r\n  useClickAway(ref, () => {\r\n    setSearchResults([]);\r\n    if (!selectedOption) {\r\n      setQuery(\"\");\r\n      onChange(null);\r\n    }\r\n\r\n    handleBlur();\r\n  });\r\n\r\n  const handleQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n    setQuery(event.target.value);\r\n    setSelectedOption(null);\r\n    setSelectedOptionIndex(-1);\r\n    setSearchResults(\r\n      options.filter((option) =>\r\n        option?.label\r\n          ?.toLowerCase()\r\n          .includes(event.target?.value?.toLowerCase())\r\n      )\r\n    );\r\n  };\r\n  const handleFocus = () => {\r\n    console.log(\"handleFocus query\", query);\r\n    setIsFocused(true);\r\n    onFocus();\r\n    setSearchResults(\r\n      options /*.filter((option) =>\r\n        option.label.toLowerCase().includes(query.toLowerCase()),\r\n      ),*/\r\n    );\r\n  };\r\n\r\n  const handleClearQuery = () => {\r\n    console.log(\r\n      \"%csrcsharedAutocompleteSearchBar.tsx:95 handleClearQuery\",\r\n      \"color: #007acc;\"\r\n    );\r\n    setQuery(\"\");\r\n    onChange(null);\r\n    setSelectedOption(null);\r\n    setTimeout(() => {\r\n      setSelectedOptionIndex(-1);\r\n      setSearchResults(options);\r\n    }, 1000);\r\n  };\r\n\r\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n    if (event.key === \"ArrowUp\" && searchResults.length > 0) {\r\n      setSelectedOptionIndex((prevIndex) =>\r\n        prevIndex > 0 ? prevIndex - 1 : searchResults.length - 1\r\n      );\r\n    } else if (event.key === \"ArrowDown\" && searchResults.length > 0) {\r\n      setSelectedOptionIndex((prevIndex) =>\r\n        prevIndex < searchResults.length - 1 ? prevIndex + 1 : 0\r\n      );\r\n    } else if (event.key === \"Enter\" && selectedOptionIndex !== -1) {\r\n      handleOptionClick(searchResults[selectedOptionIndex]);\r\n    } else if (event.key === \"Escape\" && selectedOptionIndex !== -1) {\r\n      handleBlur();\r\n    }\r\n  };\r\n\r\n  const handleOptionClick = (option: IOptionItem) => {\r\n    setQuery(option.label);\r\n    setSelectedOption(option);\r\n    setSelectedOptionIndex(-1);\r\n\r\n    onChange(option.value);\r\n\r\n    handleBlur();\r\n  };\r\n  const handleBlur = () => {\r\n    setSearchResults([]);\r\n    onBlur();\r\n    setIsFocused(false);\r\n  };\r\n\r\n  return (\r\n    <div className=\"w-full  flex-col justify-start items-start gap-1.5 inline-flex\">\r\n      <div\r\n        className=\"self-stretch min-h-14 flex-col justify-start items-start gap-1.5 flex relative\"\r\n        ref={ref}\r\n      >\r\n        {label && (\r\n          <label\r\n            className=\"text-slate-700 text-sm leading-tight font-medium\"\r\n            htmlFor={name}\r\n          >\r\n            {label} {required ? \"*\" : \"\"}\r\n          </label>\r\n        )}\r\n        <div\r\n          className={`self-stretch px-3 py-1.5 rounded-lg justify-start items-center gap-2 inline-flex outline-none border \r\n            ${\r\n              isFocused\r\n                ? \"outline-4 outline-indigo-200 outline-offset-0 border-indigo-300\"\r\n                : \"\"\r\n            } \r\n            ${\r\n              isFocused && errors[name]?.message\r\n                ? \"outline-4 outline-red-200 outline-offset-0 border-none\"\r\n                : \"\"\r\n            }  \r\n            ${!isFocused && errors[name]?.message ? \"border-red-200\" : \"\"}   \r\n            ${disabled ? \"bg-gray-100\" : \"bg-transparent\"}`}\r\n        >\r\n          <div className=\"Content grow shrink basis-0 min-h-5 xl:min-h-7 justify-start items-start gap-2 flex relative  flex-col w-full  mx-auto\">\r\n            <SearchInput\r\n              value={query}\r\n              onChange={handleQueryChange}\r\n              onKeyDown={handleKeyDown}\r\n              onFocus={handleFocus} // Pass the onFocus handler\r\n              clearQuery={handleClearQuery} // Pass the onFocus handler\r\n              inputRef={inputRef}\r\n              placeholder={placeholder}\r\n              isFocused={isFocused}\r\n              onBlur={handleBlur}\r\n              isLoading={loading}\r\n            />\r\n          </div>\r\n        </div>\r\n        {searchResults.length > 0 && (\r\n          <OptionList\r\n            options={searchResults}\r\n            selectedOptionIndex={selectedOptionIndex}\r\n            handleOptionClick={handleOptionClick}\r\n            label={label}\r\n          />\r\n        )}\r\n      </div>\r\n      {description && (\r\n        <div className=\"HintText self-stretch text-slate-600 text-sm font-normal leading-tight\">\r\n          {description}\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nconst OptionList: React.FC<OptionListProps> = ({\r\n  options,\r\n  selectedOptionIndex,\r\n  handleOptionClick,\r\n  label,\r\n}) => {\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n\r\n  useEffect(() => {\r\n    // Ensure the selected option is scrolled into view\r\n    if (selectedOptionIndex >= 0 && selectedOptionIndex < options.length) {\r\n      const selectedElement = containerRef.current?.children[\r\n        selectedOptionIndex\r\n      ] as HTMLDivElement;\r\n      selectedElement?.scrollIntoView({\r\n        behavior: \"instant\",\r\n        block: \"nearest\",\r\n      });\r\n    }\r\n  }, [selectedOptionIndex, options.length]);\r\n\r\n  return (\r\n    <div\r\n      ref={containerRef}\r\n      className={`overflow-y-auto resultOptionContainer w-full max-h-96 outline-indigo-200 absolute outline-4 bg-white border border-gray-200 drop-shadow-xl rounded-xl z-50 ${label ? \"top-[68px]\" : \"top-[40px]\"}`}\r\n    >\r\n      {options?.map((option, index) => (\r\n        <div\r\n          key={option.value as string}\r\n          className={`py-2 px-4 flex items-center justify-between gap-8 hover:bg-gray-200 cursor-pointer text-sm ${\r\n            selectedOptionIndex === index ? \"bg-gray-200\" : \"\"\r\n          }`}\r\n          onClick={() => handleOptionClick(option)}\r\n        >\r\n          <p className=\"font-normal\">{option.label}</p>\r\n        </div>\r\n      ))}\r\n    </div>\r\n  );\r\n};\r\n\r\nconst SearchInput: React.FC<SearchInputProps> = ({\r\n  value,\r\n  onChange,\r\n  onKeyDown,\r\n  onFocus,\r\n  onBlur,\r\n  inputRef,\r\n  placeholder,\r\n  clearQuery,\r\n  isFocused,\r\n  isLoading,\r\n}) => {\r\n  const handleExpandMoreClick = () => {\r\n    inputRef.current?.focus();\r\n    onFocus();\r\n  };\r\n\r\n  const handleClearQuery = () => {\r\n    clearQuery();\r\n  };\r\n\r\n  return (\r\n    <div className=\"relative flex items-center w-full sharedResource text-sm\">\r\n      <input\r\n        type=\"text\"\r\n        className={`pl-1 py-1 border-gray-800 w-full ${\r\n          isLoading ? \"pr-10 \" : \"pr-20\"\r\n        }`}\r\n        value={value}\r\n        onChange={onChange}\r\n        onKeyDown={onKeyDown}\r\n        onFocus={onFocus}\r\n        ref={inputRef}\r\n        placeholder={placeholder}\r\n        disabled={isLoading}\r\n      />\r\n      {isLoading && (\r\n        <div className=\"loader absolute right-0 text-gray-500\">\r\n          {/* You can replace this div with an SVG or another icon of your choice */}\r\n          <svg\r\n            className=\"animate-spin h-5 w-5\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            fill=\"none\"\r\n            viewBox=\"0 0 24 24\"\r\n          >\r\n            <circle\r\n              className=\"opacity-25\"\r\n              cx=\"12\"\r\n              cy=\"12\"\r\n              r=\"10\"\r\n              stroke=\"currentColor\"\r\n              strokeWidth=\"4\"\r\n            />\r\n            <path\r\n              className=\"opacity-75\"\r\n              fill=\"currentColor\"\r\n              d=\"M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z\"\r\n            />\r\n          </svg>\r\n        </div>\r\n      )}\r\n      {isFocused && !isLoading && (\r\n        <MdExpandLess\r\n          className=\"material-icons absolute right-0 cursor-pointer text-gray-500\"\r\n          onClick={onBlur}\r\n        />\r\n      )}\r\n      {!isFocused && !isLoading && (\r\n        <MdExpandMore\r\n          className=\"material-icons absolute right-0 cursor-pointer text-gray-500\"\r\n          onClick={handleExpandMoreClick}\r\n        />\r\n      )}\r\n      {value && !isLoading && (\r\n        <MdClose\r\n          className=\"material-icons absolute right-6 cursor-pointer text-gray-500\"\r\n          onClick={handleClearQuery}\r\n        />\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default AutocompleteSearchBar;\r\n"],"names":["_b","_a"],"mappings":"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"}
+{"version":3,"file":"AutocompleteSearchBar.js","sources":["../../../lib/components/form/AutocompleteSearchBar.tsx"],"sourcesContent":["import { useState, useEffect, useRef } from \"react\";\r\nimport { useClickAway } from \"react-use\";\r\nimport { IOptionItem, useFederationContext } from \"../../main\";\r\nimport { MdClose, MdExpandLess, MdExpandMore } from \"react-icons/md\";\r\n\r\ninterface OptionListProps {\r\n  options: IOptionItem[];\r\n  selectedOptionIndex: number;\r\n  handleOptionClick: (option: IOptionItem) => void;\r\n  label?: string;\r\n}\r\n\r\ninterface SearchInputProps {\r\n  value: string;\r\n  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\r\n  onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\r\n  onFocus: () => void;\r\n  clearQuery: () => void;\r\n  inputRef: React.RefObject<HTMLInputElement>;\r\n  placeholder?: string;\r\n  isFocused?: boolean;\r\n  onBlur: () => void;\r\n  isLoading?: boolean;\r\n}\r\n\r\nconst AutocompleteSearchBar: React.FC<{\r\n  label: string;\r\n  name: string;\r\n  required?: boolean;\r\n  disabled?: boolean;\r\n  description?: string;\r\n  fetchUrl?: string;\r\n  valueKey: string;\r\n  labelKey: string;\r\n  onChange: (value: any) => void;\r\n  onFocus: () => void;\r\n  onBlur: () => void;\r\n  placeholder?: string;\r\n  serverSearch?: boolean;\r\n  value?: string;\r\n  initOptions?: IOptionItem[];\r\n  showId?: boolean;\r\n}> = ({\r\n  label,\r\n  name,\r\n  required,\r\n  disabled,\r\n  description,\r\n  fetchUrl,\r\n  valueKey,\r\n  labelKey,\r\n  onChange,\r\n  onFocus,\r\n  onBlur,\r\n  placeholder,\r\n  serverSearch = false,\r\n  value,\r\n  initOptions,\r\n  showId,\r\n}) => {\r\n  const [query, setQuery] = useState(\"\");\r\n  const [loading, setLoading] = useState(false);\r\n  const [options, setOptions] = useState<IOptionItem[]>([]);\r\n  const [selectedOptionIndex, setSelectedOptionIndex] = useState(-1);\r\n  const [selectedOption, setSelectedOption] = useState<IOptionItem | null>(\r\n    null\r\n  );\r\n  const [searchResults, setSearchResults] = useState<IOptionItem[]>([]);\r\n  const inputRef = useRef<HTMLInputElement>(null);\r\n  const ref = useRef(null);\r\n  const federationContext = useFederationContext();\r\n\r\n  const [isFocused, setIsFocused] = useState(false);\r\n\r\n  const [errors] = useState<any>({});\r\n\r\n  useEffect(() => {\r\n    const fetchOptions = async () => {\r\n      setLoading(true);\r\n      console.log(\r\n        \"%csrcsharedAutocompleteSearchBar.tsx:77 fetchUrl, value\",\r\n        \"color: #007acc;\",\r\n        fetchUrl\r\n      );\r\n      const { data } = await federationContext.apiClient.get(fetchUrl || \"\");\r\n      // osetreni obou variant navratu  z BE\r\n      const tmpData = data.content || data;\r\n\r\n      setOptions(\r\n        tmpData.map((item: any) => ({\r\n          value: item[valueKey],\r\n          label: item[labelKey] + (showId ? \" (\" + item[valueKey] + \")\" : \"\"),\r\n        }))\r\n      ); // Adjust map according to actual API response\r\n      setLoading(false);\r\n    };\r\n\r\n    if (fetchUrl) fetchOptions();\r\n  }, [fetchUrl, labelKey, showId, valueKey, federationContext.apiClient]);\r\n\r\n  useEffect(() => {\r\n    if (initOptions) setOptions(initOptions);\r\n  }, [initOptions]);\r\n\r\n  useEffect(() => {\r\n    if (value && options) {\r\n      const initOption = options.find((it) => it.value == value);\r\n\r\n      if (initOption) {\r\n        setQuery(initOption.label);\r\n        setSelectedOption(initOption);\r\n      }\r\n    }\r\n  }, [value, options]);\r\n\r\n  useEffect(() => {\r\n    const fetchOptions = async () => {\r\n      setLoading(true);\r\n      const { data } = await federationContext.apiClient.get(fetchUrl + query);\r\n      setOptions(\r\n        data.map((item: any) => ({\r\n          value: item[valueKey],\r\n          label: item[labelKey] + (showId ? \" (\" + item[valueKey] + \")\" : \"\"),\r\n        }))\r\n      ); // Adjust map according to actual API response\r\n      setSearchResults(\r\n        data.map((item: any) => ({\r\n          value: item[valueKey],\r\n          label: item[labelKey] + (showId ? \" (\" + item[valueKey] + \")\" : \"\"),\r\n        }))\r\n      ); // Adjust map according to actual API response\r\n\r\n      setLoading(false);\r\n    };\r\n\r\n    if (serverSearch) fetchOptions();\r\n  }, [\r\n    query,\r\n    serverSearch,\r\n    valueKey,\r\n    labelKey,\r\n    fetchUrl,\r\n    federationContext.apiClient,\r\n    showId,\r\n  ]);\r\n\r\n  useClickAway(ref, () => {\r\n    setSearchResults([]);\r\n    if (!selectedOption) {\r\n      setQuery(\"\");\r\n      onChange(null);\r\n    }\r\n\r\n    handleBlur();\r\n  });\r\n\r\n  const handleQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n    setQuery(event.target.value);\r\n    setSelectedOption(null);\r\n    setSelectedOptionIndex(-1);\r\n    setSearchResults(\r\n      options.filter((option) =>\r\n        option?.label\r\n          ?.toLowerCase()\r\n          .includes(event.target?.value?.toLowerCase())\r\n      )\r\n    );\r\n  };\r\n  const handleFocus = () => {\r\n    console.log(\"handleFocus query\", query);\r\n    setIsFocused(true);\r\n    onFocus();\r\n    setSearchResults(\r\n      options /*.filter((option) =>\r\n        option.label.toLowerCase().includes(query.toLowerCase()),\r\n      ),*/\r\n    );\r\n  };\r\n\r\n  const handleClearQuery = () => {\r\n    console.log(\r\n      \"%csrcsharedAutocompleteSearchBar.tsx:95 handleClearQuery\",\r\n      \"color: #007acc;\"\r\n    );\r\n    setQuery(\"\");\r\n    onChange(null);\r\n    setSelectedOption(null);\r\n    setTimeout(() => {\r\n      setSelectedOptionIndex(-1);\r\n      setSearchResults(options);\r\n    }, 1000);\r\n  };\r\n\r\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n    if (event.key === \"ArrowUp\" && searchResults.length > 0) {\r\n      setSelectedOptionIndex((prevIndex) =>\r\n        prevIndex > 0 ? prevIndex - 1 : searchResults.length - 1\r\n      );\r\n    } else if (event.key === \"ArrowDown\" && searchResults.length > 0) {\r\n      setSelectedOptionIndex((prevIndex) =>\r\n        prevIndex < searchResults.length - 1 ? prevIndex + 1 : 0\r\n      );\r\n    } else if (event.key === \"Enter\" && selectedOptionIndex !== -1) {\r\n      handleOptionClick(searchResults[selectedOptionIndex]);\r\n    } else if (event.key === \"Escape\" && selectedOptionIndex !== -1) {\r\n      handleBlur();\r\n    }\r\n  };\r\n\r\n  const handleOptionClick = (option: IOptionItem) => {\r\n    setQuery(option.label);\r\n    setSelectedOption(option);\r\n    setSelectedOptionIndex(-1);\r\n\r\n    onChange(option.value);\r\n\r\n    handleBlur();\r\n  };\r\n  const handleBlur = () => {\r\n    setSearchResults([]);\r\n    onBlur();\r\n    setIsFocused(false);\r\n  };\r\n\r\n  return (\r\n    <div className=\"w-full  flex-col justify-start items-start gap-1.5 inline-flex\">\r\n      <div\r\n        className=\"self-stretch min-h-14 flex-col justify-start items-start gap-1.5 flex relative\"\r\n        ref={ref}\r\n      >\r\n        {label && (\r\n          <label\r\n            className=\"text-slate-700 text-sm leading-tight font-medium\"\r\n            htmlFor={name}\r\n          >\r\n            {label} {required ? \"*\" : \"\"}\r\n          </label>\r\n        )}\r\n        <div\r\n          className={`self-stretch px-3 py-1.5 rounded-lg justify-start items-center gap-2 inline-flex outline-none border  bg-white\r\n            ${\r\n              isFocused\r\n                ? \"outline-4 outline-indigo-200 outline-offset-0 border-indigo-300\"\r\n                : \"\"\r\n            } \r\n            ${\r\n              isFocused && errors[name]?.message\r\n                ? \"outline-4 outline-red-200 outline-offset-0 border-none\"\r\n                : \"\"\r\n            }  \r\n            ${!isFocused && errors[name]?.message ? \"border-red-200\" : \"\"}   \r\n            ${disabled ? \"bg-gray-100\" : \"bg-transparent\"}`}\r\n        >\r\n          <div className=\"Content grow shrink basis-0 min-h-5 xl:min-h-7 justify-start items-start gap-2 flex relative  flex-col w-full  mx-auto\">\r\n            <SearchInput\r\n              value={query}\r\n              onChange={handleQueryChange}\r\n              onKeyDown={handleKeyDown}\r\n              onFocus={handleFocus} // Pass the onFocus handler\r\n              clearQuery={handleClearQuery} // Pass the onFocus handler\r\n              inputRef={inputRef}\r\n              placeholder={placeholder}\r\n              isFocused={isFocused}\r\n              onBlur={handleBlur}\r\n              isLoading={loading}\r\n            />\r\n          </div>\r\n        </div>\r\n        {searchResults.length > 0 && (\r\n          <OptionList\r\n            options={searchResults}\r\n            selectedOptionIndex={selectedOptionIndex}\r\n            handleOptionClick={handleOptionClick}\r\n            label={label}\r\n          />\r\n        )}\r\n      </div>\r\n      {description && (\r\n        <div className=\"HintText self-stretch text-slate-600 text-sm font-normal leading-tight\">\r\n          {description}\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nconst OptionList: React.FC<OptionListProps> = ({\r\n  options,\r\n  selectedOptionIndex,\r\n  handleOptionClick,\r\n  label,\r\n}) => {\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n\r\n  useEffect(() => {\r\n    // Ensure the selected option is scrolled into view\r\n    if (selectedOptionIndex >= 0 && selectedOptionIndex < options.length) {\r\n      const selectedElement = containerRef.current?.children[\r\n        selectedOptionIndex\r\n      ] as HTMLDivElement;\r\n      selectedElement?.scrollIntoView({\r\n        behavior: \"instant\",\r\n        block: \"nearest\",\r\n      });\r\n    }\r\n  }, [selectedOptionIndex, options.length]);\r\n\r\n  return (\r\n    <div\r\n      ref={containerRef}\r\n      className={`overflow-y-auto resultOptionContainer w-full max-h-96 outline-indigo-200 absolute outline-4 bg-white border border-gray-200 drop-shadow-xl rounded-xl z-50 ${label ? \"top-[68px]\" : \"top-[40px]\"}`}\r\n    >\r\n      {options?.map((option, index) => (\r\n        <div\r\n          key={option.value as string}\r\n          className={`py-2 px-4 flex items-center justify-between gap-8 hover:bg-gray-200 cursor-pointer text-sm ${\r\n            selectedOptionIndex === index ? \"bg-gray-200\" : \"\"\r\n          }`}\r\n          onClick={() => handleOptionClick(option)}\r\n        >\r\n          <p className=\"font-normal\">{option.label}</p>\r\n        </div>\r\n      ))}\r\n    </div>\r\n  );\r\n};\r\n\r\nconst SearchInput: React.FC<SearchInputProps> = ({\r\n  value,\r\n  onChange,\r\n  onKeyDown,\r\n  onFocus,\r\n  onBlur,\r\n  inputRef,\r\n  placeholder,\r\n  clearQuery,\r\n  isFocused,\r\n  isLoading,\r\n}) => {\r\n  const handleExpandMoreClick = () => {\r\n    inputRef.current?.focus();\r\n    onFocus();\r\n  };\r\n\r\n  const handleClearQuery = () => {\r\n    clearQuery();\r\n  };\r\n\r\n  return (\r\n    <div className=\"relative flex items-center w-full sharedResource text-sm bg-white\">\r\n      <input\r\n        type=\"text\"\r\n        className={`pl-1 py-1 border-gray-800  bg-white  w-full ${\r\n          isLoading ? \"pr-10 \" : \"pr-20\"\r\n        }`}\r\n        value={value}\r\n        onChange={onChange}\r\n        onKeyDown={onKeyDown}\r\n        onFocus={onFocus}\r\n        ref={inputRef}\r\n        placeholder={placeholder}\r\n        disabled={isLoading}\r\n      />\r\n      {isLoading && (\r\n        <div className=\"loader absolute right-0 text-gray-500\">\r\n          {/* You can replace this div with an SVG or another icon of your choice */}\r\n          <svg\r\n            className=\"animate-spin h-5 w-5\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            fill=\"none\"\r\n            viewBox=\"0 0 24 24\"\r\n          >\r\n            <circle\r\n              className=\"opacity-25\"\r\n              cx=\"12\"\r\n              cy=\"12\"\r\n              r=\"10\"\r\n              stroke=\"currentColor\"\r\n              strokeWidth=\"4\"\r\n            />\r\n            <path\r\n              className=\"opacity-75\"\r\n              fill=\"currentColor\"\r\n              d=\"M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z\"\r\n            />\r\n          </svg>\r\n        </div>\r\n      )}\r\n      {isFocused && !isLoading && (\r\n        <MdExpandLess\r\n          className=\"material-icons absolute right-0 cursor-pointer text-gray-500\"\r\n          onClick={onBlur}\r\n        />\r\n      )}\r\n      {!isFocused && !isLoading && (\r\n        <MdExpandMore\r\n          className=\"material-icons absolute right-0 cursor-pointer text-gray-500\"\r\n          onClick={handleExpandMoreClick}\r\n        />\r\n      )}\r\n      {value && !isLoading && (\r\n        <MdClose\r\n          className=\"material-icons absolute right-6 cursor-pointer text-gray-500\"\r\n          onClick={handleClearQuery}\r\n        />\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default AutocompleteSearchBar;\r\n"],"names":["_b","_a"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@addsign/moje-agenda-shared-lib",
   "private": false,
-  "version": "0.0.74",
+  "version": "0.0.77",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",