@deenruv/react-ui-devkit 1.0.16 → 1.0.17-dev.5

package/dist/components/templates/DetailList/DetailList.js

@@ -1,4 +1,3 @@
-import { __assign, __awaiter, __generator, __spreadArray } from "tslib";
 import { useDetailListHook } from "./useDetailListHook";
 import { getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table";
 import { useEffect, useMemo, useState } from "react";
@@ -21,141 +20,123 @@ import { ColumnView } from "./useDetailListHook/ColumnView.js";
 import { DetailListStoreProvider } from "./useDetailList.js";
 import { toast } from "sonner";
 import { PageBlock } from "../../../universal_components/PageBlock.js";
-export var isAssetObject = function (value) {
+export const isAssetObject = (value) => {
     return Boolean("preview" in value ||
         "source" in value ||
         ("__typename" in value && value.__typename === "Asset"));
 };
-var CHARACTERS_LIMIT = 100;
-export function DetailList(_a) {
-    var _this = this;
-    var _b;
-    var fetch = _a.fetch, route = _a.route, remove = _a.onRemove, tableId = _a.tableId, entityName = _a.entityName, searchFields = _a.searchFields, searchTranslations = _a.searchTranslations, hideColumns = _a.hideColumns, _c = _a.additionalColumns, additionalColumns = _c === void 0 ? [] : _c, detailLinkColumn = _a.detailLinkColumn, filterFields = _a.filterFields, noPaddings = _a.noPaddings, noCreateButton = _a.noCreateButton, createPermissions = _a.createPermissions, deletePermissions = _a.deletePermissions, additionalButtons = _a.additionalButtons, getSubRows = _a.getSubRows, additionalRowActions = _a.additionalRowActions, additionalBulkActions = _a.additionalBulkActions, stopRefetchOnChannelChange = _a.stopRefetchOnChannelChange, suggestedOrderColumns = _a.suggestedOrderColumns, refetchTimeout = _a.refetchTimeout;
-    var t = useTranslation("table").t;
-    var userPermissions = useServer(function (_a) {
-        var userPermissions = _a.userPermissions;
-        return userPermissions;
-    });
-    var isPermittedToCreate = useMemo(function () {
+const CHARACTERS_LIMIT = 100;
+export function DetailList({ fetch, route, onRemove: remove, tableId, entityName, searchFields, searchTranslations, hideColumns, additionalColumns = [], detailLinkColumn, filterFields, noPaddings, noCreateButton, createPermissions, deletePermissions, additionalButtons, getSubRows, additionalRowActions, additionalBulkActions, stopRefetchOnChannelChange, suggestedOrderColumns, refetchTimeout, }) {
+    const { t } = useTranslation("table");
+    const userPermissions = useServer(({ userPermissions }) => userPermissions);
+    const isPermittedToCreate = useMemo(() => {
         if (!createPermissions)
             return true;
-        return createPermissions.some(function (permission) {
-            return userPermissions.includes(permission);
-        });
+        return createPermissions.some((permission) => userPermissions.includes(permission));
     }, [userPermissions]);
-    var navigate = useNavigate();
-    var getTableExtensions = usePluginStore().getTableExtensions;
-    var tableExtensions = useMemo(function () { return getTableExtensions(tableId); }, [tableId]);
-    var mergedSelectors = useMemo(function () {
-        return tableExtensions === null || tableExtensions === void 0 ? void 0 : tableExtensions.reduce(function (acc, table) { return deepMerge(acc, table.externalSelector || {}); }, {});
-    }, [tableExtensions]);
-    var rowActions = useMemo(function () { return __spreadArray(__spreadArray([], ((tableExtensions === null || tableExtensions === void 0 ? void 0 : tableExtensions.flatMap(function (table) { return table.rowActions || []; })) || []), true), (additionalRowActions || []), true); }, [tableExtensions, additionalRowActions]);
-    var bulkActions = useMemo(function () { return __spreadArray(__spreadArray([], ((tableExtensions === null || tableExtensions === void 0 ? void 0 : tableExtensions.flatMap(function (table) { return table.bulkActions || []; })) || []), true), (additionalBulkActions || []), true); }, [tableExtensions, additionalBulkActions]);
-    var customColumns = useMemo(function () {
-        return ((tableExtensions === null || tableExtensions === void 0 ? void 0 : tableExtensions.flatMap(function (table) { return table.columns; })) || []);
-    }, [tableExtensions]);
-    var customHideColumns = useMemo(function () { return tableExtensions === null || tableExtensions === void 0 ? void 0 : tableExtensions.flatMap(function (table) { return table.hideColumns || []; }); }, [tableExtensions]);
-    var entityCustomFields = (_b = useServer(function (p) {
-        var _a, _b;
-        return (_b = (_a = p.serverConfig) === null || _a === void 0 ? void 0 : _a.entityCustomFields) === null || _b === void 0 ? void 0 : _b.find(function (el) { return el.entityName === entityName; });
-    })) === null || _b === void 0 ? void 0 : _b.customFields;
-    var _d = useState([]), itemsToDelete = _d[0], setItemsToDelete = _d[1];
-    var _e = useState([]), columnFilters = _e[0], setColumnFilters = _e[1];
-    var _f = useState({}), rowSelection = _f[0], setRowSelection = _f[1];
-    var _g = useState(false), deleteDialogOpened = _g[0], setDeleteDialogOpened = _g[1];
-    var _h = useLocalStorage("".concat(tableId, "-table-visibility"), {
+    const navigate = useNavigate();
+    const { getTableExtensions } = usePluginStore();
+    const tableExtensions = useMemo(() => getTableExtensions(tableId), [tableId]);
+    const mergedSelectors = useMemo(() => tableExtensions?.reduce((acc, table) => deepMerge(acc, table.externalSelector || {}), {}), [tableExtensions]);
+    const rowActions = useMemo(() => [
+        ...(tableExtensions?.flatMap((table) => table.rowActions || []) || []),
+        ...(additionalRowActions || []), //TODO: fix types
+    ], [tableExtensions, additionalRowActions]);
+    const bulkActions = useMemo(() => [
+        ...(tableExtensions?.flatMap((table) => table.bulkActions || []) || []),
+        ...(additionalBulkActions || []), //TODO: fix types
+    ], [tableExtensions, additionalBulkActions]);
+    const customColumns = useMemo(() => (tableExtensions?.flatMap((table) => table.columns) || []), [tableExtensions]);
+    const customHideColumns = useMemo(() => tableExtensions?.flatMap((table) => table.hideColumns || []), [tableExtensions]);
+    const entityCustomFields = useServer((p) => p.serverConfig?.entityCustomFields?.find((el) => el.entityName === entityName))?.customFields;
+    const [itemsToDelete, setItemsToDelete] = useState([]);
+    const [columnFilters, setColumnFilters] = useState([]);
+    const [rowSelection, setRowSelection] = useState({});
+    const [deleteDialogOpened, setDeleteDialogOpened] = useState(false);
+    const [columnsVisibilityState, setColumnsVisibilityState] = useLocalStorage(`${tableId}-table-visibility`, {
         id: true,
         createdAt: true,
         updatedAt: true,
-    }), columnsVisibilityState = _h[0], setColumnsVisibilityState = _h[1];
-    var getTableDefaultOrder = function (additional, suggestedOrder) {
-        var columns = table.getAllColumns().map(function (col) { return col.id; });
-        var hasCode = columns.includes("code");
-        var hasFeaturedAsset = columns.includes("featuredAsset");
-        var prefix = ["id"];
+    });
+    const getTableDefaultOrder = (additional, suggestedOrder) => {
+        const columns = table.getAllColumns().map((col) => col.id);
+        const hasCode = columns.includes("code");
+        const hasFeaturedAsset = columns.includes("featuredAsset");
+        const prefix = ["id"];
         if (hasCode)
             prefix.push("code");
         if (hasFeaturedAsset)
             prefix.push("featuredAsset");
-        var additionalColumns = (additional === null || additional === void 0 ? void 0 : additional.filter(Boolean)) || [];
-        var getOrder = function (id) {
-            return suggestedOrder && id in suggestedOrder
-                ? suggestedOrder[id]
-                : undefined;
-        };
-        var remaining = columns
-            .filter(function (id) { return !prefix.includes(id); })
-            .filter(function (id) { return !additionalColumns.includes(id); })
-            .sort(function (a, b) {
-            var orderA = getOrder(a);
-            var orderB = getOrder(b);
+        const additionalColumns = additional?.filter(Boolean) || [];
+        const getOrder = (id) => suggestedOrder && id in suggestedOrder
+            ? suggestedOrder[id]
+            : undefined;
+        const remaining = columns
+            .filter((id) => !prefix.includes(id))
+            .filter((id) => !additionalColumns.includes(id))
+            .sort((a, b) => {
+            const orderA = getOrder(a);
+            const orderB = getOrder(b);
             if (orderA !== undefined && orderB !== undefined)
                 return orderA - orderB;
             if (orderA !== undefined)
                 return -1;
             if (orderB !== undefined)
                 return 1;
-            var isCustomFieldA = a.startsWith("customFields.");
-            var isCustomFieldB = b.startsWith("customFields.");
+            const isCustomFieldA = a.startsWith("customFields.");
+            const isCustomFieldB = b.startsWith("customFields.");
             if (isCustomFieldA && !isCustomFieldB)
                 return 1;
             if (!isCustomFieldA && isCustomFieldB)
                 return -1;
             return a.localeCompare(b);
         });
-        return __spreadArray(__spreadArray(__spreadArray([], prefix, true), remaining, true), additionalColumns, true).sort(function (a, b) {
-            return ((suggestedOrder === null || suggestedOrder === void 0 ? void 0 : suggestedOrder[a]) ||
-                DEFAULT_COLUMN_PRIORITIES[a]) -
-                ((suggestedOrder === null || suggestedOrder === void 0 ? void 0 : suggestedOrder[b]) ||
-                    DEFAULT_COLUMN_PRIORITIES[b]);
-        });
+        return [...prefix, ...remaining, ...additionalColumns].sort((a, b) => (suggestedOrder?.[a] ||
+            DEFAULT_COLUMN_PRIORITIES[a]) -
+            (suggestedOrder?.[b] ||
+                DEFAULT_COLUMN_PRIORITIES[b]));
     };
-    var getTableDefaultVisibility = function () {
+    const getTableDefaultVisibility = () => {
         return table
             .getAllColumns()
-            .reduce(function (acc, column) {
+            .reduce((acc, column) => {
             acc[column.id] = column.id.startsWith("customFields.") ? false : true;
             return acc;
         }, {});
     };
-    var _j = useState({}), expanded = _j[0], setExpanded = _j[1];
-    var _k = useLocalStorage("".concat(tableId, "-table-order"), []), columnsOrderState = _k[0], setColumnsOrderState = _k[1];
-    var columnsTranslations = t("columns", { returnObjects: true });
-    var handleError = useErrorHandler().handleError;
-    var hiddenColumns = useMemo(function () {
-        return __spreadArray(__spreadArray([], (hideColumns !== null && hideColumns !== void 0 ? hideColumns : []), true), ["customFields"], false).concat(customHideColumns !== null && customHideColumns !== void 0 ? customHideColumns : []);
-    }, [hideColumns, customHideColumns]);
-    var language = useSettings().language;
-    var _l = useDetailListHook({
-        fetch: function (params, customFieldsSelector) {
-            return fetch(params, customFieldsSelector, mergedSelectors);
-        },
-        searchFields: searchFields,
-        searchTranslations: searchTranslations,
-        refetchTimeout: refetchTimeout,
-    }), objects = _l.objects, _m = _l.searchParamValues, page = _m.page, perPage = _m.perPage, filter = _m.filter, refetch = _l.refetch, SortButton = _l.SortButton, Paginate = _l.Paginate, Search = _l.Search, searchParamFilter = _l.filter, setFilterField = _l.setFilterField, removeFilterField = _l.removeFilterField, resetFilterFields = _l.resetFilterFields, changeFilterField = _l.changeFilterField, loading = _l.loading;
-    var columns = useMemo(function () {
-        var entry = objects === null || objects === void 0 ? void 0 : objects[0];
-        var keys = entry
-            ? Array.from(new Set(__spreadArray(__spreadArray([], DEFAULT_COLUMNS, true), Object.keys(entry), true)))
+    const [expanded, setExpanded] = useState({});
+    const [columnsOrderState, setColumnsOrderState] = useLocalStorage(`${tableId}-table-order`, []);
+    const columnsTranslations = t("columns", { returnObjects: true });
+    const { handleError } = useErrorHandler();
+    const hiddenColumns = useMemo(() => [...(hideColumns ?? []), "customFields"].concat(customHideColumns ?? []), [hideColumns, customHideColumns]);
+    const { language } = useSettings();
+    const { objects, searchParamValues: { page, perPage, filter }, refetch, SortButton, Paginate, Search, filter: searchParamFilter, setFilterField, removeFilterField, resetFilterFields, changeFilterField, loading, } = useDetailListHook({
+        fetch: (params, customFieldsSelector) => fetch(params, customFieldsSelector, mergedSelectors),
+        searchFields,
+        searchTranslations,
+        refetchTimeout,
+    });
+    const columns = useMemo(() => {
+        const entry = objects?.[0];
+        const keys = entry
+            ? Array.from(new Set([...DEFAULT_COLUMNS, ...Object.keys(entry)]))
             : DEFAULT_COLUMNS;
         if (keys.includes("customFields")) {
-            var customFields = "customFields" in entry ? entry.customFields : {};
-            var customFieldsKeys = Object.keys(customFields).map(function (key) { return "customFields.".concat(key); });
-            keys.push.apply(keys, customFieldsKeys);
+            const customFields = "customFields" in entry ? entry.customFields : {};
+            const customFieldsKeys = Object.keys(customFields).map((key) => `customFields.${key}`);
+            keys.push(...customFieldsKeys);
         }
-        var columns = [];
-        var _loop_1 = function (key) {
+        const columns = [];
+        for (const key of keys) {
             if (key.startsWith("customFields.")) {
                 columns.push({
                     enableHiding: true,
                     accessorKey: key,
-                    header: function () {
-                        var _a, _b, _c, _d;
-                        var field = entityCustomFields === null || entityCustomFields === void 0 ? void 0 : entityCustomFields.find(function (el) { return el.name === key.split(".")[1]; });
-                        var fieldTranslation = ((_b = (_a = field === null || field === void 0 ? void 0 : field.label) === null || _a === void 0 ? void 0 : _a.find(function (el) { return el.languageCode === language; })) === null || _b === void 0 ? void 0 : _b.value) ||
-                            ((_d = (_c = field === null || field === void 0 ? void 0 : field.label) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.value);
-                        var label = key;
+                    header: () => {
+                        const field = entityCustomFields?.find((el) => el.name === key.split(".")[1]);
+                        const fieldTranslation = field?.label?.find((el) => el.languageCode === language)?.value ||
+                            field?.label?.[0]?.value;
+                        let label = key;
                         if (fieldTranslation) {
                             label = fieldTranslation;
                         }
@@ -168,9 +149,8 @@ export function DetailList(_a) {
                         }
                         return React.createElement(TableLabel, null, label);
                     },
-                    cell: function (_a) {
-                        var row = _a.row;
-                        var value = row.original.customFields[key.split(".")[1]];
+                    cell: ({ row }) => {
+                        const value = row.original.customFields[key.split(".")[1]];
                         if (typeof value === "number") {
                             return value;
                         }
@@ -183,7 +163,7 @@ export function DetailList(_a) {
                         return value;
                     },
                 });
-                return "continue";
+                continue;
             }
             if (key === "id") {
                 columns.push(SelectIDColumn());
@@ -191,7 +171,7 @@ export function DetailList(_a) {
             }
             columns.push({
                 accessorKey: key,
-                header: function () {
+                header: () => {
                     if (DEFAULT_COLUMNS.includes(key) || key === "name") {
                         return SortButton(key, columnsTranslations[key] ||
                             key);
@@ -201,9 +181,8 @@ export function DetailList(_a) {
                             key));
                     }
                 },
-                cell: function (_a) {
-                    var row = _a.row;
-                    var value = row.original[key];
+                cell: ({ row }) => {
+                    const value = row.original[key];
                     if (!value && (key.includes("asset") || key.includes("Asset"))) {
                         return (React.createElement("div", { className: "flex size-16 flex-col items-center justify-center gap-2 bg-gray-200 p-3" },
                             React.createElement(ImageOff, { size: 24, className: "text-gray-500" })));
@@ -220,7 +199,7 @@ export function DetailList(_a) {
                     if (!value)
                         return JSON.stringify(value);
                     if (typeof value === "object") {
-                        var isAsset = isAssetObject(value);
+                        const isAsset = isAssetObject(value);
                         if (isAsset) {
                             return (React.createElement(ImageWithPreview, { src: value.preview, alt: row.original.name, imageClassName: "size-16 object-cover", previewClassName: "p-2" }));
                         }
@@ -241,7 +220,7 @@ export function DetailList(_a) {
                                 t("znaków"))));
                     }
                     if (key === detailLinkColumn && route) {
-                        return (React.createElement(Button, { variant: "outline", className: "h-6 border border-gray-500 p-0 px-3 text-gray-800 hover:border-gray-600 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-800 focus:ring-opacity-50", onClick: function () {
+                        return (React.createElement(Button, { variant: "outline", className: "h-7 border-border/80 px-3 text-xs text-foreground hover:border-primary/30 hover:text-primary focus:outline-none focus:ring-2 focus:ring-ring/30", onClick: () => {
                                 if ("edit" in route) {
                                     route.edit(row.original.id, row, refetch);
                                 }
@@ -257,36 +236,34 @@ export function DetailList(_a) {
                     return row.original[key];
                 },
             });
-        };
-        for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
-            var key = keys_1[_i];
-            _loop_1(key);
         }
-        var getAccessorKey = function (column) { return ("accessorKey" in column ? column.accessorKey : column.id); };
-        var mergedAndReplacedColumns = __spreadArray(__spreadArray(__spreadArray([], columns, true), customColumns, true), additionalColumns, true).reduce(function (acc, column) {
-            var columnKey = getAccessorKey(column);
-            var existingIndex = acc.findIndex(function (c) { return getAccessorKey(c) === columnKey; });
+        const getAccessorKey = (column) => ("accessorKey" in column ? column.accessorKey : column.id);
+        const mergedAndReplacedColumns = [
+            ...columns,
+            ...customColumns,
+            ...additionalColumns,
+        ].reduce((acc, column) => {
+            const columnKey = getAccessorKey(column);
+            const existingIndex = acc.findIndex((c) => getAccessorKey(c) === columnKey);
             if (existingIndex > -1)
                 acc[existingIndex] = column;
             else
                 acc.push(column);
             return acc;
         }, []);
-        var resultColumns = mergedAndReplacedColumns.filter(function (column) { return !(hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.includes(getAccessorKey(column))); });
+        const resultColumns = mergedAndReplacedColumns.filter((column) => !hiddenColumns?.includes(getAccessorKey(column)));
         return resultColumns;
     }, [objects, navigate]);
-    useEffect(function () {
-        setColumnsVisibilityState(function (prev) {
-            var keys = (objects === null || objects === void 0 ? void 0 : objects[0]) ? Object.keys(objects[0]) : [];
-            var newVisibility = __assign({}, prev);
-            for (var _i = 0, keys_2 = keys; _i < keys_2.length; _i++) {
-                var key = keys_2[_i];
+    useEffect(() => {
+        setColumnsVisibilityState((prev) => {
+            const keys = objects?.[0] ? Object.keys(objects[0]) : [];
+            const newVisibility = { ...prev };
+            for (const key of keys) {
                 if (key === "customFields") {
-                    var customFields = "customFields" in objects[0] ? objects[0].customFields : {};
-                    var customFieldsKeys = Object.keys(customFields).map(function (key) { return "customFields.".concat(key); });
-                    for (var _a = 0, customFieldsKeys_1 = customFieldsKeys; _a < customFieldsKeys_1.length; _a++) {
-                        var customKey = customFieldsKeys_1[_a];
-                        if (hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.includes(customKey)) {
+                    const customFields = "customFields" in objects[0] ? objects[0].customFields : {};
+                    const customFieldsKeys = Object.keys(customFields).map((key) => `customFields.${key}`);
+                    for (const customKey of customFieldsKeys) {
+                        if (hiddenColumns?.includes(customKey)) {
                             newVisibility[customKey] = false;
                         }
                         else if (prev[customKey] === undefined) {
@@ -295,7 +272,7 @@ export function DetailList(_a) {
                         }
                     }
                 }
-                if (hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.includes(key)) {
+                if (hiddenColumns?.includes(key)) {
                     newVisibility[key] = false;
                 }
                 else if (prev[key] === undefined) {
@@ -305,15 +282,15 @@ export function DetailList(_a) {
             return newVisibility;
         });
     }, [objects]);
-    var onRemove = function (items) {
+    const onRemove = (items) => {
         setItemsToDelete(items);
         setDeleteDialogOpened(true);
     };
-    var table = useReactTable({
+    const table = useReactTable({
         data: objects || [],
         manualPagination: true,
         columns: columns,
-        getRowId: function (row) { return row.id; },
+        getRowId: (row) => row.id,
         getCoreRowModel: getCoreRowModel(),
         getPaginationRowModel: getPaginationRowModel(),
         getSortedRowModel: getSortedRowModel(),
@@ -327,34 +304,42 @@ export function DetailList(_a) {
         getSubRows: getSubRows,
         meta: {
             hideColumns: hiddenColumns,
-            bulkActions: bulkActions,
-            rowActions: rowActions,
-            route: route,
-            refetch: refetch,
+            bulkActions,
+            rowActions,
+            route,
+            refetch,
             onRemove: remove ? onRemove : undefined,
-            deletePermissions: deletePermissions,
+            deletePermissions,
+        },
+        state: {
+            ...((columnsOrderState || []).filter(Boolean).length > 0 && {
+                columnOrder: ["select-id", ...columnsOrderState, "actions"],
+            }),
+            expanded,
+            columnPinning: { right: ["actions"], left: ["select-id"] },
+            columnVisibility: columnsVisibilityState,
+            pagination: { pageIndex: page, pageSize: perPage },
+            rowSelection,
+            columnFilters,
         },
-        state: __assign(__assign({}, ((columnsOrderState || []).filter(Boolean).length > 0 && {
-            columnOrder: __spreadArray(__spreadArray(["select-id"], columnsOrderState, true), ["actions"], false),
-        })), { expanded: expanded, columnPinning: { right: ["actions"], left: ["select-id"] }, columnVisibility: columnsVisibilityState, pagination: { pageIndex: page, pageSize: perPage }, rowSelection: rowSelection, columnFilters: columnFilters }),
     });
-    useEffect(function () {
-        if (!(objects === null || objects === void 0 ? void 0 : objects.length))
+    useEffect(() => {
+        if (!objects?.length)
             return;
         if (!columnsOrderState.length)
-            setColumnsOrderState(getTableDefaultOrder((additionalColumns === null || additionalColumns === void 0 ? void 0 : additionalColumns.map(function (col) { return col.id; })) || [], suggestedOrderColumns));
+            setColumnsOrderState(getTableDefaultOrder(additionalColumns?.map((col) => col.id) || [], suggestedOrderColumns));
         if (!columnsVisibilityState ||
             !Object.keys(columnsVisibilityState).length) {
             setColumnsVisibilityState(getTableDefaultVisibility());
         }
     }, [objects, table]);
-    var isFiltered = useMemo(function () {
-        var isFiltered = false;
+    const isFiltered = useMemo(() => {
+        let isFiltered = false;
         if (filter) {
-            Object.keys(filter).forEach(function (fieldKey) {
-                var property = filter[fieldKey];
+            Object.keys(filter).forEach((fieldKey) => {
+                const property = filter[fieldKey];
                 if (property) {
-                    Object.keys(property).forEach(function (filterTypeKey) {
+                    Object.keys(property).forEach((filterTypeKey) => {
                         if (property[filterTypeKey]) {
                             isFiltered = true;
                         }
@@ -364,100 +349,85 @@ export function DetailList(_a) {
         }
         return isFiltered;
     }, [filter]);
-    var onConfirmDelete = function () { return __awaiter(_this, void 0, void 0, function () {
-        var result, _a;
-        var _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
-                case 0:
-                    _c.trys.push([0, 2, , 3]);
-                    return [4 /*yield*/, (remove === null || remove === void 0 ? void 0 : remove(itemsToDelete))];
-                case 1:
-                    result = _c.sent();
-                    if ((_b = result === null || result === void 0 ? void 0 : result.response) === null || _b === void 0 ? void 0 : _b.errors) {
-                        handleError(result.response.errors);
-                        return [2 /*return*/];
-                    }
-                    refetch();
-                    table.setRowSelection({});
-                    setItemsToDelete([]);
-                    setDeleteDialogOpened(false);
-                    return [3 /*break*/, 3];
-                case 2:
-                    _a = _c.sent();
-                    console.error("Error deleting items");
-                    return [3 /*break*/, 3];
-                case 3: return [2 /*return*/];
+    const onConfirmDelete = async () => {
+        try {
+            const result = await remove?.(itemsToDelete);
+            if (result?.response?.errors) {
+                handleError(result.response.errors);
+                return;
             }
-        });
-    }); };
-    var defaultFilterFields = DEFAULT_COLUMNS.map(function (key) {
+            refetch();
+            table.setRowSelection({});
+            setItemsToDelete([]);
+            setDeleteDialogOpened(false);
+        }
+        catch {
+            console.error("Error deleting items");
+        }
+    };
+    const defaultFilterFields = DEFAULT_COLUMNS.map((key) => {
         if (key === "id") {
             return { key: "id", operator: "IDOperators", component: undefined };
         }
         else if (key === "createdAt" || key === "updatedAt") {
-            return { key: key, operator: "DateOperators", component: undefined };
+            return { key, operator: "DateOperators", component: undefined };
         }
-        return { key: key, operator: "StringOperators", component: undefined };
+        return { key, operator: "StringOperators", component: undefined };
     });
-    var filterProperties = {
-        filterLabels: __spreadArray(__spreadArray([], defaultFilterFields, true), (filterFields || []), true).map(function (values) { return ({
+    const filterProperties = {
+        filterLabels: [...defaultFilterFields, ...(filterFields || [])].map((values) => ({
             name: values.key,
             type: "operator" in values ? values.operator : undefined,
             component: "component" in values ? values.component : undefined,
             translation: "translation" in values ? values.translation : undefined,
-        }); }) || [],
+        })) || [],
         filter: searchParamFilter,
-        setFilterField: setFilterField,
-        removeFilterField: removeFilterField,
-        resetFilterFields: resetFilterFields,
-        changeFilterField: changeFilterField,
+        setFilterField,
+        removeFilterField,
+        resetFilterFields,
+        changeFilterField,
     };
-    var selectedAmount = useMemo(function () {
-        return Object.entries(table.getState().rowSelection).filter(function (_a) {
-            var value = _a[1];
-            return value;
-        })
-            .length;
-    }, [table.getState().rowSelection]);
+    const selectedAmount = useMemo(() => Object.entries(table.getState().rowSelection).filter(([, value]) => value)
+        .length, [table.getState().rowSelection]);
     return (React.createElement(PageBlock, { withoutPadding: noPaddings },
         React.createElement(DetailListStoreProvider, { refetch: refetch, sortButton: SortButton, table: table }, loading ? (React.createElement(LoadingMask, null)) : (React.createElement("div", { className: cn("w-full") },
-            React.createElement(DeleteDialog, { itemsToDelete: itemsToDelete, deleteDialogOpened: deleteDialogOpened, setDeleteDialogOpened: setDeleteDialogOpened, onConfirmDelete: onConfirmDelete }),
+            React.createElement(DeleteDialog, { itemsToDelete,
+                deleteDialogOpened,
+                setDeleteDialogOpened,
+                onConfirmDelete }),
             React.createElement("div", { className: "page-content-h flex w-full flex-col gap-2" },
                 React.createElement("div", { className: "mb-1 flex w-full flex-col items-start gap-4" },
-                    React.createElement("div", { className: "flex w-full items-end justify-between gap-4" },
-                        React.createElement("div", { className: "flex items-center gap-2" },
-                            (bulkActions.length || remove) && selectedAmount > 0 && (React.createElement(DropdownMenu, null,
-                                React.createElement(DropdownMenuTrigger, { asChild: true },
-                                    React.createElement(Button, { variant: "outline", size: "sm", className: "h-8 gap-2 py-0", "aria-label": "Open filters" },
-                                        React.createElement(Group, { className: "size-4", "aria-hidden": "true" }),
-                                        t("Zaznaczone"),
-                                        " (",
-                                        selectedAmount,
-                                        ")")),
-                                React.createElement(DropdownMenuContent, { className: "mr-6 w-56", align: "start" },
-                                    React.createElement(DropdownMenuLabel, { className: "select-none" }, t("Operacje masowe")),
-                                    React.createElement(DropdownMenuSeparator, null),
-                                    React.createElement(DropdownMenuGroup, null, bulkActions.map(function (action) {
-                                        var canShow = (action === null || action === void 0 ? void 0 : action.canShow)
-                                            ? action.canShow()
-                                            : true;
-                                        if (!canShow)
-                                            return null;
-                                        var onClick = function () { return __awaiter(_this, void 0, void 0, function () {
-                                            var response, error, info, success, error_1, message;
-                                            return __generator(this, function (_a) {
-                                                switch (_a.label) {
-                                                    case 0:
-                                                        _a.trys.push([0, 2, , 3]);
-                                                        return [4 /*yield*/, action.onClick({
-                                                                table: table,
-                                                                data: objects,
-                                                                refetch: refetch,
-                                                            })];
-                                                    case 1:
-                                                        response = _a.sent();
-                                                        error = response.error, info = response.info, success = response.success;
+                    React.createElement("div", { className: "flex w-full flex-col gap-2 border border-border/80 bg-card/95 p-2.5 lg:p-3" },
+                        React.createElement("div", { className: "flex w-full flex-col gap-2 xl:flex-row xl:items-center xl:justify-between" },
+                            React.createElement("div", { className: "flex min-w-0 flex-1 flex-col gap-2 md:flex-row md:items-center" },
+                                React.createElement("div", { className: "min-w-0 flex-1" }, Search),
+                                React.createElement("div", { className: "flex flex-wrap items-center gap-2 md:justify-end" },
+                                    (bulkActions.length || remove) &&
+                                        selectedAmount > 0 && (React.createElement(DropdownMenu, null,
+                                        React.createElement(DropdownMenuTrigger, { asChild: true },
+                                            React.createElement(Button, { variant: "outline", size: "sm", className: "h-8 gap-2 border-primary/25 bg-primary/10 px-3 py-0 text-primary hover:border-primary/40 hover:bg-primary/20 hover:text-primary", "aria-label": t("Zaznaczone") },
+                                                React.createElement(Group, { className: "size-4", "aria-hidden": "true" }),
+                                                t("Zaznaczone"),
+                                                " (",
+                                                selectedAmount,
+                                                ")")),
+                                        React.createElement(DropdownMenuContent, { className: "mr-6 w-56", align: "start" },
+                                            React.createElement(DropdownMenuLabel, { className: "select-none" }, t("Operacje masowe")),
+                                            React.createElement(DropdownMenuSeparator, null),
+                                            React.createElement(DropdownMenuGroup, null, bulkActions.map((action) => {
+                                                const canShow = action?.canShow
+                                                    ? action.canShow()
+                                                    : true;
+                                                if (!canShow)
+                                                    return null;
+                                                const onClick = async () => {
+                                                    try {
+                                                        const response = await action.onClick({
+                                                            table,
+                                                            data: objects,
+                                                            refetch,
+                                                        });
+                                                        const { error, info, success } = response;
                                                         if (error) {
                                                             throw new Error(error);
                                                         }
@@ -470,57 +440,51 @@ export function DetailList(_a) {
                                                             refetch();
                                                             table.toggleAllRowsSelected(false);
                                                         }
-                                                        return [3 /*break*/, 3];
-                                                    case 2:
-                                                        error_1 = _a.sent();
-                                                        message = error_1 instanceof Error
-                                                            ? error_1.message
+                                                    }
+                                                    catch (error) {
+                                                        const message = error instanceof Error
+                                                            ? error.message
                                                             : "Unknown error";
                                                         toast.error(message);
-                                                        return [3 /*break*/, 3];
-                                                    case 3: return [2 /*return*/];
-                                                }
-                                            });
-                                        }); };
-                                        return (React.createElement(DropdownMenuItem, { key: action.label, onClick: onClick, className: "flex items-center gap-2 cursor-pointer" },
-                                            action.icon,
-                                            action.label));
-                                    })),
-                                    remove && (React.createElement(React.Fragment, null,
-                                        React.createElement(DropdownMenuSeparator, null),
-                                        React.createElement(DropdownMenuGroup, null,
-                                            React.createElement(DropdownMenuItem, { className: "text-red-600 cursor-pointer", disabled: !selectedAmount, onClick: function () {
-                                                    var selected = Object.entries(table.getState().rowSelection)
-                                                        .filter(function (_a) {
-                                                        var value = _a[1];
-                                                        return value;
-                                                    })
-                                                        .map(function (_a) {
-                                                        var key = _a[0];
-                                                        return key;
-                                                    });
-                                                    onRemove(selected.map(function (id) { return ({ id: id }); }));
-                                                } },
-                                                React.createElement(Trash2Icon, { className: "mr-2 size-4" }),
-                                                t("Usuń zacznaczone")))))))),
-                            React.createElement(ColumnView, { table: table, entityName: entityName }),
-                            Search,
-                            React.createElement(FiltersDialog, __assign({}, filterProperties))),
-                        React.createElement("div", { className: "flex items-center gap-2" },
-                            React.createElement("div", { className: "flex gap-2" },
-                                route && !noCreateButton && isPermittedToCreate && (React.createElement(Button, { className: "flex items-center gap-2", onClick: function () {
-                                        if ("create" in route)
-                                            route.create(refetch);
-                                        else
-                                            navigate(route.new, {
-                                                viewTransition: true,
-                                            });
-                                    } },
-                                    React.createElement(PlusCircleIcon, { size: 16 }),
-                                    "createTranslation" in route
-                                        ? route.createTranslation
-                                        : t("create"))),
-                                additionalButtons)))),
-                React.createElement(ListTable, { columns: columns, isFiltered: isFiltered, table: table, Paginate: Paginate, tableId: tableId })))))));
+                                                    }
+                                                };
+                                                return (React.createElement(DropdownMenuItem, { key: action.label, onClick: onClick, className: "flex cursor-pointer items-center gap-2" },
+                                                    action.icon,
+                                                    action.label));
+                                            })),
+                                            remove && (React.createElement(React.Fragment, null,
+                                                React.createElement(DropdownMenuSeparator, null),
+                                                React.createElement(DropdownMenuGroup, null,
+                                                    React.createElement(DropdownMenuItem, { className: "cursor-pointer text-red-600", disabled: !selectedAmount, onClick: () => {
+                                                            const selected = Object.entries(table.getState().rowSelection)
+                                                                .filter(([, value]) => value)
+                                                                .map(([key]) => key);
+                                                            onRemove(selected.map((id) => ({ id })));
+                                                        } },
+                                                        React.createElement(Trash2Icon, { className: "mr-2 size-4" }),
+                                                        t("Usuń zacznaczone")))))))),
+                                    React.createElement("div", { className: "flex items-center gap-1 border border-border/60 bg-muted/30 p-1" },
+                                        React.createElement(ColumnView, { table: table, entityName: entityName }),
+                                        React.createElement(FiltersDialog, { ...filterProperties })))),
+                            React.createElement("div", { className: "flex w-full shrink-0 items-center justify-end gap-2 xl:w-auto xl:pl-2" },
+                                React.createElement("div", { className: "flex flex-wrap justify-end gap-2" },
+                                    route && !noCreateButton && isPermittedToCreate && (React.createElement(Button, { className: "flex items-center gap-2", onClick: () => {
+                                            if ("create" in route)
+                                                route.create(refetch);
+                                            else
+                                                navigate(route.new, {
+                                                    viewTransition: true,
+                                                });
+                                        } },
+                                        React.createElement(PlusCircleIcon, { size: 16 }),
+                                        "createTranslation" in route
+                                            ? route.createTranslation
+                                            : t("create"))),
+                                    additionalButtons))))),
+                React.createElement(ListTable, { columns,
+                    isFiltered,
+                    table,
+                    Paginate,
+                    tableId: tableId })))))));
 }
 //# sourceMappingURL=DetailList.js.map