@panneau/medias 4.0.50 → 4.0.55

package/dist/index.js

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { use, createContext, useState, useCallback, useMemo, useEffect } from 'react';
+import { use, createContext, useState, useCallback, useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useFieldComponent, usePanneauResource } from '@panneau/core/contexts';
 import { useForm, useQuery } from '@panneau/core/hooks';
@@ -600,7 +600,6 @@ var defaultFields = [{
   }]
 }];
 
-/* eslint-disable react/jsx-props-no-spreading */
 function MediaForm({
   value: initialValue = null,
   fields: initialFields = defaultFields,
@@ -987,7 +986,6 @@ var defaultFilters = [{
 // },
 ];
 
-/* eslint-disable react/jsx-props-no-spreading, react/no-array-index-key */
 const DEFAULT_LAYOUTS = [{
   id: 'table',
   label: /*#__PURE__*/jsx(Icon, {
@@ -1000,75 +998,169 @@ const DEFAULT_LAYOUTS = [{
   })
 }];
 const DEFAULT_UPPY_CONFIG = {};
-function MediasBrowser({
-  items: initialItems = null,
-  extraItems = null,
-  types = null,
-  permissions = null,
-  baseUrl = null,
-  filters = defaultFilters,
-  columns = defaultColumns,
-  fields = defaultFields,
-  query: initialQuery = null,
-  layout: initialLayout = 'table',
-  layouts = DEFAULT_LAYOUTS,
-  theme = null,
-  onMediaUploaded = null,
-  onItemsChange = null,
-  onLayoutChange = null,
-  onMediaFormOpen = null,
-  onMediaFormClose = null,
-  selectable = false,
-  selectedItems = null,
-  onSelectionChange = null,
-  multipleSelection = false,
-  uppyConfig = DEFAULT_UPPY_CONFIG,
-  withDelete = false,
-  withTrash = false,
-  withReplace = false,
-  withStickySelection = false,
-  withoutUpload = false,
-  className = null,
-  formChildren = null
-}) {
+function MediasBrowser(t0) {
+  const $ = c(162);
+  const {
+    items: t1,
+    extraItems: t2,
+    types: t3,
+    permissions: t4,
+    baseUrl: t5,
+    filters: t6,
+    columns: t7,
+    fields: t8,
+    query: t9,
+    layout: t10,
+    layouts: t11,
+    theme: t12,
+    onMediaUploaded: t13,
+    onItemsChange: t14,
+    onLayoutChange: t15,
+    onMediaFormOpen: t16,
+    onMediaFormClose: t17,
+    selectable: t18,
+    selectedItems: t19,
+    onSelectionChange: t20,
+    multipleSelection: t21,
+    uppyConfig: t22,
+    withDelete: t23,
+    withTrash: t24,
+    withReplace: t25,
+    withStickySelection: t26,
+    withoutUpload: t27,
+    className: t28,
+    filtersClassName: t29,
+    formChildren: t30
+  } = t0;
+  const initialItems = t1 === undefined ? null : t1;
+  const extraItems = t2 === undefined ? null : t2;
+  const types = t3 === undefined ? null : t3;
+  const permissions = t4 === undefined ? null : t4;
+  const baseUrl = t5 === undefined ? null : t5;
+  const filters = t6 === undefined ? defaultFilters : t6;
+  const columns = t7 === undefined ? defaultColumns : t7;
+  const fields = t8 === undefined ? defaultFields : t8;
+  const initialQuery = t9 === undefined ? null : t9;
+  const initialLayout = t10 === undefined ? "table" : t10;
+  const layouts = t11 === undefined ? DEFAULT_LAYOUTS : t11;
+  const theme = t12 === undefined ? null : t12;
+  const onMediaUploaded = t13 === undefined ? null : t13;
+  const onItemsChange = t14 === undefined ? null : t14;
+  const onLayoutChange = t15 === undefined ? null : t15;
+  const onMediaFormOpen = t16 === undefined ? null : t16;
+  const onMediaFormClose = t17 === undefined ? null : t17;
+  const selectable = t18 === undefined ? false : t18;
+  const selectedItems = t19 === undefined ? null : t19;
+  const onSelectionChange = t20 === undefined ? null : t20;
+  const multipleSelection = t21 === undefined ? false : t21;
+  const uppyConfig = t22 === undefined ? DEFAULT_UPPY_CONFIG : t22;
+  const withDelete = t23 === undefined ? false : t23;
+  const withTrash = t24 === undefined ? false : t24;
+  const withReplace = t25 === undefined ? false : t25;
+  const withStickySelection = t26 === undefined ? false : t26;
+  const withoutUpload = t27 === undefined ? false : t27;
+  const className = t28 === undefined ? null : t28;
+  const filtersClassName = t29 === undefined ? null : t29;
+  const formChildren = t30 === undefined ? null : t30;
   const [baseItems] = useState(initialItems || null);
-  const baseQuery = useMemo(() => ({
-    count: 12,
-    ...initialQuery,
-    ...(types !== null ? {
+  let t31;
+  if ($[0] !== types) {
+    t31 = types !== null ? {
       types
-    } : null)
-  }), [initialQuery, types]);
+    } : null;
+    $[0] = types;
+    $[1] = t31;
+  } else {
+    t31 = $[1];
+  }
+  let t32;
+  if ($[2] !== initialQuery || $[3] !== t31) {
+    t32 = {
+      count: 12,
+      ...initialQuery,
+      ...t31
+    };
+    $[2] = initialQuery;
+    $[3] = t31;
+    $[4] = t32;
+  } else {
+    t32 = $[4];
+  }
+  const baseQuery = t32;
   const {
     query: fullQuery,
     onPageChange,
     onQueryChange,
     onQueryReset
   } = useQuery(baseQuery);
-  const page = useMemo(() => (fullQuery || {}).page ?? null, [fullQuery]);
-  const count = useMemo(() => (fullQuery || {}).count ?? null, [fullQuery]);
-
-  // Stabilize the filter query reference: only create a new object when filter values actually change.
-  // We use JSON.stringify as a stable primitive key so that useMemo only recomputes when values differ.
-  const queryJSON = useMemo(() => {
-    const {
-      page: _p,
-      count: _c,
-      ...params
-    } = fullQuery || {};
-    return Object.keys(params).length > 0 ? JSON.stringify(params) : null;
-  }, [fullQuery]);
-  const query = useMemo(() => queryJSON !== null ? JSON.parse(queryJSON) : null, [queryJSON]);
+  let t33;
+  if ($[5] !== fullQuery) {
+    t33 = fullQuery || {};
+    $[5] = fullQuery;
+    $[6] = t33;
+  } else {
+    t33 = $[6];
+  }
+  let query;
+  let t34;
+  let t35;
+  if ($[7] !== t33) {
+    ({
+      page: t34,
+      count: t35,
+      ...query
+    } = t33);
+    $[7] = t33;
+    $[8] = query;
+    $[9] = t34;
+    $[10] = t35;
+  } else {
+    query = $[8];
+    t34 = $[9];
+    t35 = $[10];
+  }
+  const page = t34 === undefined ? null : t34;
+  const count = t35 === undefined ? null : t35;
+  let t36;
+  if ($[11] !== permissions) {
+    t36 = permissions || {};
+    $[11] = permissions;
+    $[12] = t36;
+  } else {
+    t36 = $[12];
+  }
   const {
-    create: canCreate = true,
-    edit: canEdit = true,
-    delete: canDelete = true
-  } = permissions || {};
+    create: t37,
+    edit: t38,
+    delete: t39
+  } = t36;
+  const canCreate = t37 === undefined ? true : t37;
+  const canEdit = t38 === undefined ? true : t38;
+  const canDelete = t39 === undefined ? true : t39;
   const canUpload = canCreate && !withoutUpload;
-  const {
-    trashed = null,
-    ...queryWithoutTypes
-  } = query || {};
+  let t40;
+  if ($[13] !== query) {
+    t40 = query || {};
+    $[13] = query;
+    $[14] = t40;
+  } else {
+    t40 = $[14];
+  }
+  let queryWithoutTypes;
+  let t41;
+  if ($[15] !== t40) {
+    ({
+      trashed: t41,
+      ...queryWithoutTypes
+    } = t40);
+    $[15] = t40;
+    $[16] = queryWithoutTypes;
+    $[17] = t41;
+  } else {
+    queryWithoutTypes = $[16];
+    t41 = $[17];
+  }
+  const trashed = t41 === undefined ? null : t41;
   const {
     mediaTrash,
     trashing
@@ -1081,251 +1173,489 @@ function MediasBrowser({
     mediaRestore
   } = useMediaRestore();
   const [showTrashed, setShowTrashed] = useState(false);
+  let t42;
+  if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+    t42 = {
+      staleTime: 0
+    };
+    $[18] = t42;
+  } else {
+    t42 = $[18];
+  }
+  let t43;
+  if ($[19] !== baseItems || $[20] !== showTrashed) {
+    t43 = {
+      items: baseItems,
+      trashed: showTrashed,
+      queryConfig: t42
+    };
+    $[19] = baseItems;
+    $[20] = showTrashed;
+    $[21] = t43;
+  } else {
+    t43 = $[21];
+  }
   const {
     items,
     allItems,
-    loading = false,
-    loaded = false,
-    updateItem = null,
-    pagination: {
-      lastPage = null,
-      total = null
-    } = {},
-    pages = null,
+    loading: t44,
+    loaded: t45,
+    updateItem: t46,
+    pagination: t47,
+    pages: t48,
     reload
-  } = useMedias(query, page, count, {
-    items: baseItems,
-    trashed: showTrashed,
-    queryConfig: {
-      staleTime: 0
-    }
-  });
-  const onClickTrash = useCallback(() => {
-    setShowTrashed(!showTrashed);
-  }, [showTrashed, setShowTrashed]);
-  useEffect(() => {
-    if (onItemsChange !== null) {
-      onItemsChange(items);
-    }
-  }, [items, onItemsChange]);
-  const [layout, setLayout] = useState(initialLayout || 'table');
-  const hasLayouts = useMemo(() => layouts !== null && layouts.length > 1, [layouts]);
-  const onClickLayout = useCallback(newLayout => {
-    setLayout(newLayout);
-    if (onLayoutChange !== null) {
-      onLayoutChange(newLayout);
-    }
-  }, [setLayout]);
+  } = useMedias(query, page, count, t43);
+  const loading = t44 === undefined ? false : t44;
+  const loaded = t45 === undefined ? false : t45;
+  const updateItem = t46 === undefined ? null : t46;
+  let t49;
+  if ($[22] !== t47) {
+    t49 = t47 === undefined ? {} : t47;
+    $[22] = t47;
+    $[23] = t49;
+  } else {
+    t49 = $[23];
+  }
+  const {
+    lastPage: t50,
+    total: t51
+  } = t49;
+  const lastPage = t50 === undefined ? null : t50;
+  const total = t51 === undefined ? null : t51;
+  const pages = t48 === undefined ? null : t48;
+  let t52;
+  if ($[24] !== showTrashed) {
+    t52 = () => {
+      setShowTrashed(!showTrashed);
+    };
+    $[24] = showTrashed;
+    $[25] = t52;
+  } else {
+    t52 = $[25];
+  }
+  const onClickTrash = t52;
+  let t53;
+  let t54;
+  if ($[26] !== items || $[27] !== onItemsChange) {
+    t53 = () => {
+      if (onItemsChange !== null) {
+        onItemsChange(items);
+      }
+    };
+    t54 = [items, onItemsChange];
+    $[26] = items;
+    $[27] = onItemsChange;
+    $[28] = t53;
+    $[29] = t54;
+  } else {
+    t53 = $[28];
+    t54 = $[29];
+  }
+  useEffect(t53, t54);
+  const [layout, setLayout] = useState(initialLayout || "table");
+  const hasLayouts = layouts !== null && layouts.length > 1;
+  let t55;
+  if ($[30] !== onLayoutChange) {
+    t55 = newLayout => {
+      setLayout(newLayout);
+      if (onLayoutChange !== null) {
+        onLayoutChange(newLayout);
+      }
+    };
+    $[30] = onLayoutChange;
+    $[31] = t55;
+  } else {
+    t55 = $[31];
+  }
+  const onClickLayout = t55;
   const {
     currentMedia,
     setCurrentMedia
   } = useCurrentMedia();
-  useEffect(() => {
-    if (currentMedia !== null && onMediaFormOpen !== null) {
-      onMediaFormOpen();
-    }
-    if (currentMedia === null && onMediaFormClose !== null) {
-      onMediaFormClose();
-    }
-  }, [currentMedia]);
-  const onOpenMedia = useCallback(media => {
-    setCurrentMedia(media);
-  }, [setCurrentMedia]);
-  const onCloseMedia = useCallback(() => {
-    setCurrentMedia(null);
-  }, [setCurrentMedia]);
-  const onSaveMedia = useCallback(item => {
-    setCurrentMedia(null);
-    updateItem(item);
-  }, [setCurrentMedia, updateItem]);
-  const onReplaceMedia = useCallback(item_0 => {
-    setCurrentMedia(item_0);
-    reload();
-  }, [setCurrentMedia]);
-  const onDeleteMedia = useCallback(() => {
-    if (reload !== null) {
+  let t56;
+  let t57;
+  if ($[32] !== currentMedia || $[33] !== onMediaFormClose || $[34] !== onMediaFormOpen) {
+    t56 = () => {
+      if (currentMedia !== null && onMediaFormOpen !== null) {
+        onMediaFormOpen();
+      }
+      if (currentMedia === null && onMediaFormClose !== null) {
+        onMediaFormClose();
+      }
+    };
+    t57 = [currentMedia, onMediaFormOpen, onMediaFormClose];
+    $[32] = currentMedia;
+    $[33] = onMediaFormClose;
+    $[34] = onMediaFormOpen;
+    $[35] = t56;
+    $[36] = t57;
+  } else {
+    t56 = $[35];
+    t57 = $[36];
+  }
+  useEffect(t56, t57);
+  let t58;
+  if ($[37] !== setCurrentMedia) {
+    t58 = media => {
+      setCurrentMedia(media);
+    };
+    $[37] = setCurrentMedia;
+    $[38] = t58;
+  } else {
+    t58 = $[38];
+  }
+  const onOpenMedia = t58;
+  let t59;
+  if ($[39] !== setCurrentMedia) {
+    t59 = () => {
+      setCurrentMedia(null);
+    };
+    $[39] = setCurrentMedia;
+    $[40] = t59;
+  } else {
+    t59 = $[40];
+  }
+  const onCloseMedia = t59;
+  let t60;
+  if ($[41] !== setCurrentMedia || $[42] !== updateItem) {
+    t60 = item => {
+      setCurrentMedia(null);
+      updateItem(item);
+    };
+    $[41] = setCurrentMedia;
+    $[42] = updateItem;
+    $[43] = t60;
+  } else {
+    t60 = $[43];
+  }
+  const onSaveMedia = t60;
+  let t61;
+  if ($[44] !== reload || $[45] !== setCurrentMedia) {
+    t61 = item_0 => {
+      setCurrentMedia(item_0);
       reload();
-    }
-  }, [reload]);
-  const onTrashMedia = useCallback(id => !showTrashed && withTrash ? mediaTrash(id).then(() => {
-    if (!multipleSelection) {
-      const selectedId = selectedItems?.[0]?.id || null;
-      if (selectedId !== null && selectedId === id && onSelectionChange !== null) {
-        onSelectionChange(null);
+    };
+    $[44] = reload;
+    $[45] = setCurrentMedia;
+    $[46] = t61;
+  } else {
+    t61 = $[46];
+  }
+  const onReplaceMedia = t61;
+  let t62;
+  if ($[47] !== reload) {
+    t62 = () => {
+      if (reload !== null) {
+        reload();
       }
-    }
-    // Todo remove from mult selection
-  }).then(() => reload()) : mediaDelete(id).then(() => {
-    if (!multipleSelection) {
-      const selectedId_0 = selectedItems?.[0]?.id || null;
-      if (selectedId_0 !== null && selectedId_0 === id && onSelectionChange !== null) {
-        onSelectionChange(null);
+    };
+    $[47] = reload;
+    $[48] = t62;
+  } else {
+    t62 = $[48];
+  }
+  const onDeleteMedia = t62;
+  let t63;
+  if ($[49] !== mediaDelete || $[50] !== mediaTrash || $[51] !== onSelectionChange || $[52] !== reload || $[53] !== selectedItems || $[54] !== showTrashed || $[55] !== withTrash) {
+    t63 = id => (!showTrashed && withTrash ? mediaTrash(id) : mediaDelete(id)).then(() => {
+      const newSelectedItems = (selectedItems || []).filter(t64 => {
+        const {
+          id: t65
+        } = t64;
+        const itemId = t65 === undefined ? null : t65;
+        return itemId !== id;
+      });
+      if (onSelectionChange !== null) {
+        onSelectionChange(newSelectedItems.length > 0 ? newSelectedItems : null);
       }
-    }
-    // Todo remove from selection
-  }).then(() => reload()), [showTrashed, withTrash, mediaTrash, mediaDelete, reload, selectedItems, multipleSelection, onSelectionChange]);
+    }).then(() => reload());
+    $[49] = mediaDelete;
+    $[50] = mediaTrash;
+    $[51] = onSelectionChange;
+    $[52] = reload;
+    $[53] = selectedItems;
+    $[54] = showTrashed;
+    $[55] = withTrash;
+    $[56] = t63;
+  } else {
+    t63 = $[56];
+  }
+  const onTrashMedia = t63;
   const [uploadedMedias, setUploadedMedias] = useState(null);
   const [uploadProcessing, setUploadProcessing] = useState(false);
-  const onUploadedMediaChanged = useCallback(newMedias => {
-    const uploadedNewMedias = (Array.isArray(newMedias) ? [...newMedias, ...(uploadedMedias || [])] : [newMedias, ...(uploadedMedias || [])]).filter(it => it !== null);
-    setUploadedMedias(uploadedNewMedias);
-    if (onSelectionChange !== null) {
-      const firstMedia = Array.isArray(newMedias) ? newMedias[0] ?? null : newMedias ?? null;
-      onSelectionChange(multipleSelection && Array.isArray(newMedias) ? newMedias : [firstMedia]);
-      onQueryReset();
-      reload().then(() => {
+  let t64;
+  if ($[57] !== multipleSelection || $[58] !== onQueryReset || $[59] !== onSelectionChange || $[60] !== reload || $[61] !== uploadedMedias) {
+    t64 = newMedias => {
+      const uploadedNewMedias = (Array.isArray(newMedias) ? [...newMedias, ...(uploadedMedias || [])] : [newMedias, ...(uploadedMedias || [])]).filter(_temp);
+      setUploadedMedias(uploadedNewMedias);
+      if (onSelectionChange !== null) {
+        const firstMedia = Array.isArray(newMedias) ? newMedias[0] ?? null : newMedias ?? null;
+        onSelectionChange(multipleSelection && Array.isArray(newMedias) ? newMedias : [firstMedia]);
+        onQueryReset();
+        reload();
         setUploadedMedias(null);
-      });
-    }
-  }, [onSelectionChange, setUploadedMedias, uploadedMedias, onQueryReset, reload, multipleSelection]);
-  const onUploadComplete = useCallback((medias = null) => {
-    if (showTrashed) {
-      setShowTrashed(false);
-    }
-    if (medias === null) return;
-    const rawMedias = (Array.isArray(medias) ? medias : [medias]).filter(it_0 => it_0 !== null);
-    if (onMediaUploaded !== null) {
-      setUploadProcessing(true);
-      Promise.resolve(onMediaUploaded(rawMedias)).then(newMedias_0 => {
-        onUploadedMediaChanged(newMedias_0 || null);
-        setUploadProcessing(false);
-      }).catch(() => {
-        setUploadProcessing(false);
-      });
-    } else {
-      onUploadedMediaChanged(rawMedias);
-    }
-  }, [onMediaUploaded, setUploadedMedias, setUploadProcessing, onUploadedMediaChanged]);
-  const onClickPage = useCallback((e, pageNumber = null) => {
-    e.preventDefault();
-    e.stopPropagation();
-    onPageChange(pageNumber);
-  }, [onPageChange]);
-  const pagination = /*#__PURE__*/jsx(Pagination, {
-    page: page,
-    lastPage: lastPage,
-    total: total,
-    url: baseUrl,
-    query: query,
-    onClickPage: onClickPage,
-    loading: loading && pages !== null,
-    selectable: selectable,
-    selectedItems: selectedItems,
-    onSelectionChange: onSelectionChange,
-    multipleSelection: multipleSelection,
-    withPreviousNext: true,
-    alwaysShowButtons: true
-  });
+      }
+    };
+    $[57] = multipleSelection;
+    $[58] = onQueryReset;
+    $[59] = onSelectionChange;
+    $[60] = reload;
+    $[61] = uploadedMedias;
+    $[62] = t64;
+  } else {
+    t64 = $[62];
+  }
+  const onUploadedMediaChanged = t64;
+  let t65;
+  if ($[63] !== onMediaUploaded || $[64] !== onUploadedMediaChanged || $[65] !== showTrashed) {
+    t65 = t66 => {
+      const medias = t66 === undefined ? null : t66;
+      if (showTrashed) {
+        setShowTrashed(false);
+      }
+      if (medias === null) {
+        return;
+      }
+      const rawMedias = (Array.isArray(medias) ? medias : [medias]).filter(_temp2);
+      if (onMediaUploaded !== null) {
+        setUploadProcessing(true);
+        Promise.resolve(onMediaUploaded(rawMedias)).then(newMedias_0 => {
+          onUploadedMediaChanged(newMedias_0 || null);
+          setUploadProcessing(false);
+        }).catch(() => {
+          setUploadProcessing(false);
+        });
+      } else {
+        onUploadedMediaChanged(rawMedias);
+      }
+    };
+    $[63] = onMediaUploaded;
+    $[64] = onUploadedMediaChanged;
+    $[65] = showTrashed;
+    $[66] = t65;
+  } else {
+    t65 = $[66];
+  }
+  const onUploadComplete = t65;
+  let t66;
+  if ($[67] !== onPageChange) {
+    t66 = (e, t67) => {
+      const pageNumber = t67 === undefined ? null : t67;
+      e.preventDefault();
+      e.stopPropagation();
+      onPageChange(pageNumber);
+    };
+    $[67] = onPageChange;
+    $[68] = t66;
+  } else {
+    t66 = $[68];
+  }
+  const onClickPage = t66;
+  const t67 = loading && pages !== null;
+  let t68;
+  if ($[69] !== baseUrl || $[70] !== lastPage || $[71] !== multipleSelection || $[72] !== onClickPage || $[73] !== onSelectionChange || $[74] !== page || $[75] !== query || $[76] !== selectable || $[77] !== selectedItems || $[78] !== t67 || $[79] !== total) {
+    t68 = /*#__PURE__*/jsx(Pagination, {
+      page: page,
+      lastPage: lastPage,
+      total: total,
+      url: baseUrl,
+      query: query,
+      onClickPage: onClickPage,
+      loading: t67,
+      selectable: selectable,
+      selectedItems: selectedItems,
+      onSelectionChange: onSelectionChange,
+      multipleSelection: multipleSelection,
+      withPreviousNext: true,
+      alwaysShowButtons: true
+    });
+    $[69] = baseUrl;
+    $[70] = lastPage;
+    $[71] = multipleSelection;
+    $[72] = onClickPage;
+    $[73] = onSelectionChange;
+    $[74] = page;
+    $[75] = query;
+    $[76] = selectable;
+    $[77] = selectedItems;
+    $[78] = t67;
+    $[79] = total;
+    $[80] = t68;
+  } else {
+    t68 = $[80];
+  }
+  const pagination = t68;
   const hidePagination = loaded && !loading && total === 0;
-  const finalFilters = useMemo(() => {
-    const partialFilters = withTrash ? (filters || []).concat([{
-      name: 'trashed',
-      component: 'button',
-      theme: showTrashed ? 'danger' : 'secondary',
+  let t69;
+  if ($[81] !== filters || $[82] !== onClickTrash || $[83] !== showTrashed || $[84] !== uploadProcessing || $[85] !== withTrash) {
+    t69 = withTrash ? (filters || []).concat([{
+      name: "trashed",
+      component: "button",
+      theme: showTrashed ? "danger" : "secondary",
       outline: !showTrashed,
-      activeTheme: 'danger',
-      icon: showTrashed ? 'trash-fill' : 'trash',
+      activeTheme: "danger",
+      icon: showTrashed ? "trash-fill" : "trash",
       disabled: uploadProcessing,
       onClick: onClickTrash
     }]) : filters;
-    if (types !== null && partialFilters !== null) {
-      return (partialFilters || []).map(filter => {
-        const {
-          id: id_0 = null
-        } = filter || {};
-        return id_0 === 'types' ? {
-          ...filter,
-          disabled: true
-        } : filter;
-      });
+    $[81] = filters;
+    $[82] = onClickTrash;
+    $[83] = showTrashed;
+    $[84] = uploadProcessing;
+    $[85] = withTrash;
+    $[86] = t69;
+  } else {
+    t69 = $[86];
+  }
+  let finalFilters = t69;
+  if (types !== null && finalFilters !== null) {
+    let t70;
+    if ($[87] !== finalFilters) {
+      t70 = finalFilters || [];
+      $[87] = finalFilters;
+      $[88] = t70;
+    } else {
+      t70 = $[88];
     }
-    return partialFilters;
-  }, [filters, types, withTrash, showTrashed, uploadProcessing, onClickTrash]);
-  const partialColumns = useMemo(() => withTrash && showTrashed ? (columns || []).map(column => {
-    const {
-      id: columnId = null
-    } = column || {};
-    if (columnId === 'created_at') {
-      return {
-        ...column,
-        path: 'deleted_at',
-        label: /*#__PURE__*/jsx(FormattedMessage, {
-          id: "uds4wJ"
-        })
-      };
+    let t71;
+    if ($[89] !== t70) {
+      t71 = t70.map(_temp3);
+      $[89] = t70;
+      $[90] = t71;
+    } else {
+      t71 = $[90];
     }
-    if (columnId === 'actions') {
+    finalFilters = t71;
+  }
+  let t70;
+  if ($[91] !== canDelete || $[92] !== canEdit || $[93] !== columns || $[94] !== mediaRestore || $[95] !== reload || $[96] !== showTrashed || $[97] !== withTrash) {
+    const partialColumns = withTrash && showTrashed ? (columns || []).map(column => {
       const {
-        actions = []
+        id: t71
       } = column || {};
-      return {
-        ...column,
-        actions: (actions || []).reduce((acc, action) => {
-          if (action === 'delete') {
-            acc.push({
-              id: 'restore',
-              component: 'restore',
-              withConfirmation: true,
-              action: ids => mediaRestore(ids[0]).then(reload)
-            });
+      const columnId = t71 === undefined ? null : t71;
+      if (columnId === "created_at") {
+        return {
+          ...column,
+          path: "deleted_at",
+          label: /*#__PURE__*/jsx(FormattedMessage, {
+            id: "uds4wJ"
+          })
+        };
+      }
+      if (columnId === "actions") {
+        const {
+          actions: t72
+        } = column || {};
+        const actions = t72 === undefined ? [] : t72;
+        return {
+          ...column,
+          actions: (actions || []).reduce((acc, action) => {
+            if (action === "delete") {
+              acc.push({
+                id: "restore",
+                component: "restore",
+                withConfirmation: true,
+                action: ids => mediaRestore(ids[0]).then(reload)
+              });
+            }
+            acc.push(action);
+            return acc;
+          }, []).filter(_temp4)
+        };
+      }
+      return column;
+    }) : columns;
+    let t73;
+    if ($[99] !== canDelete || $[100] !== canEdit) {
+      t73 = column_0 => {
+        const {
+          id: t74
+        } = column_0 || {};
+        const columnId_0 = t74 === undefined ? null : t74;
+        if (columnId_0 === "actions") {
+          const {
+            actions: t75
+          } = column_0 || {};
+          const actions_0 = t75 === undefined ? [] : t75;
+          const availableActions = actions_0.filter(act => act !== "delete" || canDelete).filter(act_0 => act_0 !== "edit" || canEdit);
+          if (availableActions.length === 0) {
+            return null;
           }
-          acc.push(action);
-          return acc;
-        }, []).filter(it_1 => it_1 !== 'edit')
+          return {
+            ...column_0,
+            actions: availableActions
+          };
+        }
+        return column_0;
       };
+      $[99] = canDelete;
+      $[100] = canEdit;
+      $[101] = t73;
+    } else {
+      t73 = $[101];
     }
-    return column;
-  }) : columns, [columns, withTrash, showTrashed]);
-  const finalColumns = useMemo(() => (partialColumns || []).map(column_0 => {
-    const {
-      id: columnId_0 = null
-    } = column_0 || {};
-    if (columnId_0 === 'actions') {
+    t70 = (partialColumns || []).map(t73).filter(_temp5);
+    $[91] = canDelete;
+    $[92] = canEdit;
+    $[93] = columns;
+    $[94] = mediaRestore;
+    $[95] = reload;
+    $[96] = showTrashed;
+    $[97] = withTrash;
+    $[98] = t70;
+  } else {
+    t70 = $[98];
+  }
+  const finalColumns = t70;
+  const showOnTopQuery = types === null ? query : queryWithoutTypes;
+  let t71;
+  if ($[102] !== showOnTopQuery || $[103] !== trashed) {
+    t71 = showOnTopQuery !== null && !trashed ? Object.keys(showOnTopQuery).length > 0 : false;
+    $[102] = showOnTopQuery;
+    $[103] = trashed;
+    $[104] = t71;
+  } else {
+    t71 = $[104];
+  }
+  const hasQueryItem = t71;
+  let t72;
+  if ($[105] !== allItems || $[106] !== extraItems || $[107] !== hasQueryItem || $[108] !== items || $[109] !== page || $[110] !== showTrashed || $[111] !== uploadProcessing || $[112] !== uploadedMedias || $[113] !== withStickySelection) {
+    t72 = withStickySelection && (extraItems !== null || uploadedMedias !== null || uploadProcessing === true) ? uniqBy([...(uploadProcessing ? [{
+      id: "-",
+      loading: true,
+      actionsDisabled: true,
+      selectionDisabled: true
+    }] : []), ...(page === 1 && !hasQueryItem ? uploadedMedias || [] : []), ...(page === 1 && !hasQueryItem && !showTrashed ? (extraItems || []).map(item_1 => {
       const {
-        actions: actions_0 = []
-      } = column_0 || {};
-      const availableActions = actions_0.filter(act => act !== 'delete' || canDelete).filter(act_0 => act_0 !== 'edit' || canEdit);
-      if (availableActions.length === 0) {
-        return null;
-      }
-      return {
-        ...column_0,
-        actions: availableActions
-      };
-    }
-    return column_0;
-  }).filter(act_1 => act_1 !== null), [partialColumns, canEdit, canDelete]);
-  const hasQueryItem = useMemo(() => {
-    const showOnTopQuery = types === null ? query : queryWithoutTypes;
-    return showOnTopQuery !== null && !trashed ? Object.keys(showOnTopQuery).length > 0 : false;
-  }, [types, query, queryWithoutTypes, trashed]);
-  const finalItems = useMemo(() => {
-    if (withStickySelection && (extraItems !== null || uploadedMedias !== null || uploadProcessing === true)) {
-      return uniqBy([...(uploadProcessing ? [{
-        id: '-',
-        loading: true,
-        actionsDisabled: true,
-        selectionDisabled: true
-      }] : []), ...(page === 1 && !hasQueryItem ? uploadedMedias || [] : []), ...(page === 1 && !hasQueryItem && !showTrashed ? (extraItems || []).map(item_1 => {
+        id: t73
+      } = item_1;
+      const itemId_0 = t73 === undefined ? null : t73;
+      return (allItems || []).find(t74 => {
         const {
-          id: itemId = null
-        } = item_1;
-        return (allItems || []).find(({
-          id: otherId = null
-        } = {}) => otherId === itemId) || item_1 || null;
-      }).filter(it_2 => it_2 !== null) || [] : []), ...(items || [])], it_3 => it_3?.id);
-    }
-    return items;
-  }, [items, page, allItems, withStickySelection, extraItems, uploadProcessing, hasQueryItem, showTrashed]);
-
-  // const emptyWithSticky = useMemo(
-  //     () => (items || []).length === 0 && (finalItems || []).length > 0,
-  //     [items, finalItems],
-  // );
-
-  return /*#__PURE__*/jsx("div", {
-    className: className,
-    children: currentMedia !== null ? /*#__PURE__*/jsx(MediaForm, {
+          id: t75
+        } = t74;
+        const otherId = t75 === undefined ? null : t75;
+        return otherId === itemId_0;
+      }) || item_1 || null;
+    }).filter(_temp6) || [] : []), ...(items || [])], _temp7) : items;
+    $[105] = allItems;
+    $[106] = extraItems;
+    $[107] = hasQueryItem;
+    $[108] = items;
+    $[109] = page;
+    $[110] = showTrashed;
+    $[111] = uploadProcessing;
+    $[112] = uploadedMedias;
+    $[113] = withStickySelection;
+    $[114] = t72;
+  } else {
+    t72 = $[114];
+  }
+  const finalItems = t72;
+  let t73;
+  if ($[115] !== canUpload || $[116] !== currentMedia || $[117] !== deleting || $[118] !== fields || $[119] !== filters || $[120] !== filtersClassName || $[121] !== finalColumns || $[122] !== finalFilters || $[123] !== finalItems || $[124] !== formChildren || $[125] !== hasLayouts || $[126] !== hidePagination || $[127] !== layout || $[128] !== layouts || $[129] !== loaded || $[130] !== loading || $[131] !== multipleSelection || $[132] !== onClickLayout || $[133] !== onCloseMedia || $[134] !== onDeleteMedia || $[135] !== onOpenMedia || $[136] !== onQueryChange || $[137] !== onQueryReset || $[138] !== onReplaceMedia || $[139] !== onSaveMedia || $[140] !== onSelectionChange || $[141] !== onTrashMedia || $[142] !== onUploadComplete || $[143] !== pagination || $[144] !== query || $[145] !== queryWithoutTypes || $[146] !== selectable || $[147] !== selectedItems || $[148] !== setCurrentMedia || $[149] !== showTrashed || $[150] !== theme || $[151] !== trashing || $[152] !== types || $[153] !== uploadProcessing || $[154] !== uppyConfig || $[155] !== withDelete || $[156] !== withReplace || $[157] !== withTrash) {
+    t73 = currentMedia !== null ? /*#__PURE__*/jsx(MediaForm, {
       value: currentMedia,
       fields: fields,
       onChange: setCurrentMedia,
@@ -1338,75 +1668,62 @@ function MediasBrowser({
       withReplace: withReplace,
       children: formChildren
     }) : /*#__PURE__*/jsxs(Fragment, {
-      children: [/*#__PURE__*/jsxs("div", {
-        className: "card card-body py-2 mb-3",
-        children: [/*#__PURE__*/jsxs("div", {
-          className: "row g-2 align-items-center",
-          children: [/*#__PURE__*/jsx("div", {
-            className: "col-12 col-lg",
-            children: filters !== null ? /*#__PURE__*/jsx(Filters, {
-              value: query,
-              clearValue: types !== null ? queryWithoutTypes : null,
-              filters: finalFilters,
-              onChange: onQueryChange,
-              onClear: onQueryReset
-            }) : null
-          }), /*#__PURE__*/jsx("div", {
-            className: "col-12 col-lg-auto",
-            children: /*#__PURE__*/jsxs("div", {
-              className: "d-flex flex-wrap gap-2 justify-content-lg-end",
-              children: [hasLayouts ? /*#__PURE__*/jsx(Buttons, {
-                size: "sm",
-                theme: "secondary",
-                outline: true,
-                items: (layouts || []).map(lay => ({
-                  ...lay,
-                  active: layout === lay.id,
-                  onClick: () => onClickLayout(lay.id),
-                  className: 'px-3 py-2'
-                }))
-              }) : null, canUpload ? /*#__PURE__*/jsx(UploadField, {
-                className: "w-auto text-nowrap",
-                withButton: true,
-                withoutMedia: true,
-                uppyProps: uppyConfig,
-                types: types,
-                allowMultipleUploads: true,
-                onChange: onUploadComplete,
-                disabled: uploadProcessing,
-                loading: uploadProcessing,
-                outline: false,
-                closeAfterFinish: true
-              }) : null]
-            })
-          })]
-        }), !hidePagination ? /*#__PURE__*/jsx("div", {
-          className: "d-none d-md-flex mt-2 justify-content-end",
-          children: pagination
-        }) : null]
-      }), layout === 'grid' ? /*#__PURE__*/jsx(Grid, {
+      children: [/*#__PURE__*/jsx("div", {
+        className: classNames(["mb-3", filtersClassName]),
+        children: /*#__PURE__*/jsxs("div", {
+          className: "d-flex flex-wrap gap-2 flex-row-reverse justify-content-end",
+          children: [canUpload ? /*#__PURE__*/jsx(UploadField, {
+            withButton: true,
+            withoutMedia: true,
+            className: "w-auto ms-auto",
+            uppyProps: uppyConfig,
+            types: types,
+            allowMultipleUploads: true,
+            onChange: onUploadComplete,
+            disabled: uploadProcessing,
+            loading: uploadProcessing,
+            outline: false,
+            closeAfterFinish: true
+          }) : null, filters !== null ? /*#__PURE__*/jsx(Filters, {
+            value: query,
+            clearValue: types !== null ? queryWithoutTypes : null,
+            filters: finalFilters,
+            onChange: onQueryChange,
+            onClear: onQueryReset,
+            className: "p-0"
+          }) : null]
+        })
+      }), !hidePagination ? /*#__PURE__*/jsxs("div", {
+        className: "d-flex mb-3 justify-content-end",
+        children: [hasLayouts ? /*#__PURE__*/jsx(Buttons, {
+          size: "sm",
+          theme: "secondary",
+          outline: true,
+          className: "me-auto",
+          items: (layouts || []).map(lay => ({
+            ...lay,
+            active: layout === lay.id,
+            onClick: () => onClickLayout(lay.id),
+            className: "px-3"
+          }))
+        }) : null, pagination]
+      }) : null, layout === "grid" ? /*#__PURE__*/jsx(Grid, {
         size: "small",
         component: MediaCard,
         componentProps: {
-          className: 'd-flex w-100',
-          cardClassName: 'flex-grow-1',
+          className: "d-flex w-100",
+          cardClassName: "flex-grow-1",
           vertical: true,
-          onClickDescription: it_4 => {
-            onOpenMedia(it_4);
-          }
+          onClickDescription: it_4 => onOpenMedia(it_4)
         },
         selectable: selectable && !showTrashed,
         selectedItems: selectedItems,
         onSelectionChange: uploadProcessing ? null : onSelectionChange,
         multipleSelection: multipleSelection,
-        query: query // For sort
-        ,
-        onQueryChange: onQueryChange,
         items: finalItems || [],
         loading: loading,
         loaded: loaded
-        // empty={emptyWithSticky}
-      }) : null, layout === 'table' ? /*#__PURE__*/jsx(Table, {
+      }) : null, layout === "table" ? /*#__PURE__*/jsx(Table, {
         theme: theme,
         columns: finalColumns,
         displayPlaceholder: /*#__PURE__*/jsx("span", {
@@ -1417,20 +1734,17 @@ function MediasBrowser({
         selectedItems: selectedItems,
         onSelectionChange: uploadProcessing ? null : onSelectionChange,
         multipleSelection: multipleSelection,
-        query: query // For sort
-        ,
+        query: query,
         onQueryChange: onQueryChange,
         items: finalItems,
         loading: loading,
-        loaded: loaded
-        // empty={emptyWithSticky}
-        ,
+        loaded: loaded,
         actionsProps: {
           getDeletePropsFromValue: () => ({
             href: null,
             withConfirmation: true,
             disabled: trashing || deleting,
-            icon: showTrashed ? 'trash-fill' : 'trash',
+            icon: showTrashed ? "trash-fill" : "trash",
             action: ids_0 => onTrashMedia(ids_0[0])
           }),
           getEditPropsFromValue: it_5 => ({
@@ -1441,28 +1755,113 @@ function MediasBrowser({
           })
         }
       }) : null, !hidePagination ? /*#__PURE__*/jsx("div", {
-        className: classNames(['d-flex', 'd-md-none', 'mt-3', 'mb-1', 'justify-content-end']),
+        className: classNames(["d-flex", "mt-3", "mb-1", "justify-content-end"]),
         children: pagination
       }) : null]
-    })
-  });
+    });
+    $[115] = canUpload;
+    $[116] = currentMedia;
+    $[117] = deleting;
+    $[118] = fields;
+    $[119] = filters;
+    $[120] = filtersClassName;
+    $[121] = finalColumns;
+    $[122] = finalFilters;
+    $[123] = finalItems;
+    $[124] = formChildren;
+    $[125] = hasLayouts;
+    $[126] = hidePagination;
+    $[127] = layout;
+    $[128] = layouts;
+    $[129] = loaded;
+    $[130] = loading;
+    $[131] = multipleSelection;
+    $[132] = onClickLayout;
+    $[133] = onCloseMedia;
+    $[134] = onDeleteMedia;
+    $[135] = onOpenMedia;
+    $[136] = onQueryChange;
+    $[137] = onQueryReset;
+    $[138] = onReplaceMedia;
+    $[139] = onSaveMedia;
+    $[140] = onSelectionChange;
+    $[141] = onTrashMedia;
+    $[142] = onUploadComplete;
+    $[143] = pagination;
+    $[144] = query;
+    $[145] = queryWithoutTypes;
+    $[146] = selectable;
+    $[147] = selectedItems;
+    $[148] = setCurrentMedia;
+    $[149] = showTrashed;
+    $[150] = theme;
+    $[151] = trashing;
+    $[152] = types;
+    $[153] = uploadProcessing;
+    $[154] = uppyConfig;
+    $[155] = withDelete;
+    $[156] = withReplace;
+    $[157] = withTrash;
+    $[158] = t73;
+  } else {
+    t73 = $[158];
+  }
+  let t74;
+  if ($[159] !== className || $[160] !== t73) {
+    t74 = /*#__PURE__*/jsx("div", {
+      className: className,
+      children: t73
+    });
+    $[159] = className;
+    $[160] = t73;
+    $[161] = t74;
+  } else {
+    t74 = $[161];
+  }
+  return t74;
+}
+function _temp7(it_3) {
+  return it_3?.id;
+}
+function _temp6(it_2) {
+  return it_2 !== null;
+}
+function _temp5(act_1) {
+  return act_1 !== null;
+}
+function _temp4(it_1) {
+  return it_1 !== "edit";
+}
+function _temp3(filter) {
+  const {
+    id: t0
+  } = filter || {};
+  const id_0 = t0 === undefined ? null : t0;
+  return id_0 === "types" ? {
+    ...filter,
+    disabled: true
+  } : filter;
+}
+function _temp2(it_0) {
+  return it_0 !== null;
+}
+function _temp(it) {
+  return it !== null;
 }
 
 function MediasPicker(t0) {
-  const $ = c(16);
+  const $ = c(12);
   let onChange;
   let props;
   let t1;
   let t2;
   let t3;
-  let t4;
   if ($[0] !== t0) {
     ({
       items: t1,
       value: t2,
       onChange,
       multiple: t3,
-      className: t4,
       ...props
     } = t0);
     $[0] = t0;
@@ -1471,22 +1870,19 @@ function MediasPicker(t0) {
     $[3] = t1;
     $[4] = t2;
     $[5] = t3;
-    $[6] = t4;
   } else {
     onChange = $[1];
     props = $[2];
     t1 = $[3];
     t2 = $[4];
     t3 = $[5];
-    t4 = $[6];
   }
   const initialItems = t1 === undefined ? null : t1;
   const initialSelectedItems = t2 === undefined ? null : t2;
   const multiple = t3 === undefined ? false : t3;
-  const className = t4 === undefined ? null : t4;
-  let t5;
-  if ($[7] !== initialItems || $[8] !== initialSelectedItems || $[9] !== multiple || $[10] !== onChange || $[11] !== props) {
-    t5 = /*#__PURE__*/jsx(MediasBrowser, {
+  let t4;
+  if ($[6] !== initialItems || $[7] !== initialSelectedItems || $[8] !== multiple || $[9] !== onChange || $[10] !== props) {
+    t4 = /*#__PURE__*/jsx(MediasBrowser, {
       items: initialItems,
       selectable: true,
       selectedItems: initialSelectedItems,
@@ -1495,28 +1891,16 @@ function MediasPicker(t0) {
       extraItems: initialSelectedItems,
       ...props
     });
-    $[7] = initialItems;
-    $[8] = initialSelectedItems;
-    $[9] = multiple;
-    $[10] = onChange;
-    $[11] = props;
-    $[12] = t5;
-  } else {
-    t5 = $[12];
-  }
-  let t6;
-  if ($[13] !== className || $[14] !== t5) {
-    t6 = /*#__PURE__*/jsx("div", {
-      className: className,
-      children: t5
-    });
-    $[13] = className;
-    $[14] = t5;
-    $[15] = t6;
+    $[6] = initialItems;
+    $[7] = initialSelectedItems;
+    $[8] = multiple;
+    $[9] = onChange;
+    $[10] = props;
+    $[11] = t4;
   } else {
-    t6 = $[15];
+    t4 = $[11];
   }
-  return t6;
+  return t4;
 }
 
 function MediasBrowserContainer(t0) {
@@ -1579,73 +1963,66 @@ function MediasBrowserContainer(t0) {
 }
 
 function MediasPickerContainer(t0) {
-  const $ = c(14);
+  const $ = c(12);
   let props;
   let t1;
   let t2;
-  let t3;
   if ($[0] !== t0) {
     ({
       api: t1,
       media: t2,
-      onChange: t3,
       ...props
     } = t0);
     $[0] = t0;
     $[1] = props;
     $[2] = t1;
     $[3] = t2;
-    $[4] = t3;
   } else {
     props = $[1];
     t1 = $[2];
     t2 = $[3];
-    t3 = $[4];
   }
   const api = t1 === undefined ? null : t1;
   const media = t2 === undefined ? null : t2;
-  const onChange = t3 === undefined ? null : t3;
-  let t4;
-  if ($[5] !== onChange || $[6] !== props) {
-    t4 = /*#__PURE__*/jsx(MediasPicker, {
-      ...props,
-      onChange: onChange
+  let t3;
+  if ($[4] !== props) {
+    t3 = /*#__PURE__*/jsx(MediasPicker, {
+      ...props
     });
-    $[5] = onChange;
-    $[6] = props;
-    $[7] = t4;
+    $[4] = props;
+    $[5] = t3;
   } else {
-    t4 = $[7];
+    t3 = $[5];
   }
-  let t5;
-  if ($[8] !== media || $[9] !== t4) {
-    t5 = /*#__PURE__*/jsx(MediaProvider, {
+  let t4;
+  if ($[6] !== media || $[7] !== t3) {
+    t4 = /*#__PURE__*/jsx(MediaProvider, {
       media: media,
-      children: t4
+      children: t3
     });
-    $[8] = media;
-    $[9] = t4;
-    $[10] = t5;
+    $[6] = media;
+    $[7] = t3;
+    $[8] = t4;
   } else {
-    t5 = $[10];
+    t4 = $[8];
   }
-  let t6;
-  if ($[11] !== api || $[12] !== t5) {
-    t6 = /*#__PURE__*/jsx(MediasApiProvider, {
+  let t5;
+  if ($[9] !== api || $[10] !== t4) {
+    t5 = /*#__PURE__*/jsx(MediasApiProvider, {
       api: api,
-      children: t5
+      children: t4
     });
-    $[11] = api;
-    $[12] = t5;
-    $[13] = t6;
+    $[9] = api;
+    $[10] = t4;
+    $[11] = t5;
   } else {
-    t6 = $[13];
+    t5 = $[11];
   }
-  return t6;
+  return t5;
 }
 
 function MediasResourceBrowser(t0) {
-  const $ = c(9);
+  const $ = c(22);
   let props;
   let t1;
   if ($[0] !== t0) {
@@ -1662,59 +2039,123 @@ function MediasResourceBrowser(t0) {
   }
   const resourceId = t1 === undefined ? "medias" : t1;
   const resource = usePanneauResource(resourceId);
-  const api = useApi();
   let t2;
-  if ($[3] !== api || $[4] !== resource) {
-    t2 = {
-      get: (...t3) => {
-        const args = t3;
+  if ($[3] !== resource) {
+    t2 = resource || {};
+    $[3] = resource;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const {
+    index: t3,
+    fields: t4
+  } = t2;
+  const index = t3 === undefined ? null : t3;
+  const fields = t4 === undefined ? null : t4;
+  let t5;
+  if ($[5] !== index) {
+    t5 = index || {};
+    $[5] = index;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  const {
+    filters: t6,
+    columns: t7
+  } = t5;
+  const filters = t6 === undefined ? null : t6;
+  const columns = t7 === undefined ? null : t7;
+  const api = useApi();
+  let t8;
+  if ($[7] !== api || $[8] !== resource) {
+    t8 = {
+      get: (...t9) => {
+        const args = t9;
         return api.resources.get(resource, ...args);
       },
-      getTrashed: (...t4) => {
-        const args_0 = t4;
+      getTrashed: (...t10) => {
+        const args_0 = t10;
         return api.resources.getTrashed(resource, ...args_0);
       },
-      find: (...t5) => {
-        const args_1 = t5;
+      find: (...t11) => {
+        const args_1 = t11;
         return api.resources.find(resource, ...args_1);
       },
-      create: (...t6) => {
-        const args_2 = t6;
+      create: (...t12) => {
+        const args_2 = t12;
         return api.resources.store(resource, ...args_2);
       },
-      update: (...t7) => {
-        const args_3 = t7;
+      update: (...t13) => {
+        const args_3 = t13;
         return api.resources.update(resource, ...args_3);
       },
-      trash: (...t8) => {
-        const args_4 = t8;
+      trash: (...t14) => {
+        const args_4 = t14;
         return api.resources.trash(resource, ...args_4);
       },
-      delete: (...t9) => {
-        const args_5 = t9;
+      delete: (...t15) => {
+        const args_5 = t15;
         return api.resources.destroy(resource, ...args_5);
       }
     };
-    $[3] = api;
-    $[4] = resource;
-    $[5] = t2;
+    $[7] = api;
+    $[8] = resource;
+    $[9] = t8;
   } else {
-    t2 = $[5];
+    t8 = $[9];
   }
-  const mediasApi = t2;
-  let t3;
-  if ($[6] !== mediasApi || $[7] !== props) {
-    t3 = /*#__PURE__*/jsx(MediasBrowserContainer, {
+  const mediasApi = t8;
+  let t9;
+  if ($[10] !== filters) {
+    t9 = filters !== null ? {
+      filters
+    } : null;
+    $[10] = filters;
+    $[11] = t9;
+  } else {
+    t9 = $[11];
+  }
+  let t10;
+  if ($[12] !== fields) {
+    t10 = fields !== null ? {
+      fields
+    } : null;
+    $[12] = fields;
+    $[13] = t10;
+  } else {
+    t10 = $[13];
+  }
+  let t11;
+  if ($[14] !== columns) {
+    t11 = columns !== null ? {
+      columns
+    } : null;
+    $[14] = columns;
+    $[15] = t11;
+  } else {
+    t11 = $[15];
+  }
+  let t12;
+  if ($[16] !== mediasApi || $[17] !== props || $[18] !== t10 || $[19] !== t11 || $[20] !== t9) {
+    t12 = /*#__PURE__*/jsx(MediasBrowserContainer, {
       api: mediasApi,
+      ...t9,
+      ...t10,
+      ...t11,
       ...props
     });
-    $[6] = mediasApi;
-    $[7] = props;
-    $[8] = t3;
+    $[16] = mediasApi;
+    $[17] = props;
+    $[18] = t10;
+    $[19] = t11;
+    $[20] = t9;
+    $[21] = t12;
   } else {
-    t3 = $[8];
+    t12 = $[21];
   }
-  return t3;
+  return t12;
 }
 
 function MediasResourcePicker(t0) {