@panneau/medias 4.0.2 → 4.0.3

package/es/index.js

@@ -12,6 +12,7 @@ import FormStatus from '@panneau/element-form-status';
 import UploadField from '@panneau/field-upload';
 import ImageDisplay from '@panneau/display-image';
 import MediaPlayer from '@panneau/element-media-player';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
@@ -54,9 +55,10 @@ function MediasApiProvider(_ref) {
   var api = useMemo(function () {
     return providedApi || previousApi;
   }, [providedApi, previousApi]);
-  return /*#__PURE__*/React.createElement(MediasApiContext.Provider, {
-    value: api
-  }, children);
+  return /*#__PURE__*/jsx(MediasApiContext.Provider, {
+    value: api,
+    children: children
+  });
 }
 MediasApiProvider.propTypes = propTypes$9;
 
@@ -251,25 +253,26 @@ function MediaFrame(_ref) {
   var onClick = useCallback(function () {
     setShowPlayer(!showPlayer);
   }, [showPlayer, setShowPlayer]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.mediaFrame, 'position-relative', 'd-flex', 'flex-grow-1', 'w-100', 'mw-100', _defineProperty({}, className, className != null)])
-  }, showPlayer && type !== 'image' ? /*#__PURE__*/React.createElement(MediaPlayer, {
-    value: value,
-    autoPlay: false,
-    width: "100%"
-  }) : /*#__PURE__*/React.createElement(ImageDisplay, {
-    className: "w-100",
-    value: value,
-    maxWidth: "100%",
-    maxHeight: "100%",
-    onClick: type === 'video' || type === 'audio' ? onClick : null
-  }));
+  return /*#__PURE__*/jsx("div", {
+    className: classNames([styles.mediaFrame, 'position-relative', 'd-flex', 'flex-grow-1', 'w-100', 'mw-100', _defineProperty({}, className, className != null)]),
+    children: showPlayer && type !== 'image' ? /*#__PURE__*/jsx(MediaPlayer, {
+      value: value,
+      autoPlay: false,
+      width: "100%"
+    }) : /*#__PURE__*/jsx(ImageDisplay, {
+      className: "w-100",
+      value: value,
+      maxWidth: "100%",
+      maxHeight: "100%",
+      onClick: type === 'video' || type === 'audio' ? onClick : null
+    })
+  });
 }
 MediaFrame.propTypes = propTypes$8;
 
 var defaultFields = [{
   name: 'name',
-  label: /*#__PURE__*/React.createElement(FormattedMessage, {
+  label: /*#__PURE__*/jsx(FormattedMessage, {
     id: "WX83V9",
     defaultMessage: [{
       "type": 0,
@@ -280,7 +283,7 @@ var defaultFields = [{
   component: 'text'
 }, {
   name: 'description',
-  label: /*#__PURE__*/React.createElement(FormattedMessage, {
+  label: /*#__PURE__*/jsx(FormattedMessage, {
     id: "ygNvmz",
     defaultMessage: [{
       "type": 0,
@@ -307,7 +310,7 @@ var defaultFields = [{
 {
   id: 'info',
   component: 'fields',
-  label: /*#__PURE__*/React.createElement(FormattedMessage, {
+  label: /*#__PURE__*/jsx(FormattedMessage, {
     id: "3RT69u",
     defaultMessage: [{
       "type": 0,
@@ -318,7 +321,7 @@ var defaultFields = [{
   hideWithoutValue: true,
   fields: [{
     id: 'user',
-    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+    label: /*#__PURE__*/jsx(FormattedMessage, {
       id: "yByaBh",
       defaultMessage: [{
         "type": 0,
@@ -331,7 +334,7 @@ var defaultFields = [{
     horizontal: true
   }, {
     id: 'created_at',
-    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+    label: /*#__PURE__*/jsx(FormattedMessage, {
       id: "PN+75e",
       defaultMessage: [{
         "type": 0,
@@ -347,7 +350,7 @@ var defaultFields = [{
 }, {
   id: 'technical',
   component: 'fields',
-  label: /*#__PURE__*/React.createElement(FormattedMessage, {
+  label: /*#__PURE__*/jsx(FormattedMessage, {
     id: "xKUOLG",
     defaultMessage: [{
       "type": 0,
@@ -358,7 +361,7 @@ var defaultFields = [{
   hideWithoutValue: true,
   fields: [{
     id: 'format',
-    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+    label: /*#__PURE__*/jsx(FormattedMessage, {
       id: "JuxiUN",
       defaultMessage: [{
         "type": 0,
@@ -372,7 +375,7 @@ var defaultFields = [{
     horizontal: true
   }, {
     id: 'dimensions',
-    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+    label: /*#__PURE__*/jsx(FormattedMessage, {
       id: "rmJBin",
       defaultMessage: [{
         "type": 0,
@@ -386,7 +389,7 @@ var defaultFields = [{
     horizontal: true
   }, {
     id: 'size',
-    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+    label: /*#__PURE__*/jsx(FormattedMessage, {
       id: "g2CRt5",
       defaultMessage: [{
         "type": 0,
@@ -400,7 +403,7 @@ var defaultFields = [{
     horizontal: true
   }, {
     id: 'duration',
-    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+    label: /*#__PURE__*/jsx(FormattedMessage, {
       id: "wU++NJ",
       defaultMessage: [{
         "type": 0,
@@ -545,107 +548,124 @@ function MediaForm(_ref) {
     onSubmit = _useForm.onSubmit,
     status = _useForm.status,
     generalError = _useForm.generalError;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['text-body', _defineProperty({}, className, className !== null)])
-  }, /*#__PURE__*/React.createElement("nav", {
-    className: "navbar d-flex w-100 align-items-end justify-content-between border-bottom mb-3"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "d-flex align-items-end justify-content-start mb-1",
-    style: {
-      maxWidth: '66%'
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "me-3 mb-0"
-  }, /*#__PURE__*/React.createElement(Button, {
-    theme: "secondary",
-    outline: true,
-    onClick: onClose,
-    icon: "arrow-left"
-  }, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "8NyYTH",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Back"
-    }]
-  }))), /*#__PURE__*/React.createElement("h4", {
-    className: "d-inline text-truncate mb-0"
-  }, name), /*#__PURE__*/React.createElement("span", {
-    className: "mx-2"
-  }, type)), /*#__PURE__*/React.createElement("div", {
-    className: classNames('d-flex', 'justify-content-between', 'align-items-center', 'gap-1')
-  }, withReplace ? /*#__PURE__*/React.createElement(UploadField, {
-    className: "w-auto text-nowrap",
-    withButton: true,
-    withoutMedia: true,
-    types: [type],
-    outline: false,
-    closeAfterFinish: true,
-    disabled: deleting || trashing || updating || replacing,
-    addButtonLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "GxOBVL",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Replace"
-      }]
-    }),
-    onChange: onUploadComplete
-  }) : null, withDelete ? /*#__PURE__*/React.createElement(Button, {
-    className: "me-2 mb-1 mt-1",
-    theme: "danger",
-    icon: withTrash && deletedAt !== null ? 'trash-fill' : 'trash',
-    iconPosition: "right",
-    onClick: onDeleteMedia,
-    disabled: deleting || trashing || updating || replacing
-  }, withTrash && deletedAt === null ? /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "PSlT7H",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Trash"
-    }]
-  }) : /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "Bhu3B2",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Delete"
-    }]
-  })) : null, onSave !== null ? /*#__PURE__*/React.createElement(Button, {
-    className: "mb-1 mt-1",
-    theme: "primary",
-    icon: changed ? 'check' : 'check',
-    iconPosition: "right",
-    onClick: onSubmit,
-    disabled: !changed || updating || deleting || trashing
-  }, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "R1HYj0",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Save"
-    }]
-  })) : null)), /*#__PURE__*/React.createElement("div", {
-    className: "row"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "col-md-6"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "position-relative w-100"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.mediaFrame
-  }, /*#__PURE__*/React.createElement(MediaFrame, {
-    value: value
-  }))), children), /*#__PURE__*/React.createElement("div", {
-    className: "col-md-6"
-  }, /*#__PURE__*/React.createElement(Form, {
-    onChange: onChangeMedia,
-    withoutActions: true
-  }, /*#__PURE__*/React.createElement(FieldsComponent, {
-    fields: fields,
-    value: value,
-    onChange: setValue,
-    disabled: disabled
-  })), generalError !== null && status !== null ? /*#__PURE__*/React.createElement("div", {
-    className: "mt-5"
-  }, /*#__PURE__*/React.createElement(FormStatus, {
-    status: status
-  })) : null)));
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames(['text-body', _defineProperty({}, className, className !== null)]),
+    children: [/*#__PURE__*/jsxs("nav", {
+      className: "navbar d-flex w-100 align-items-end justify-content-between border-bottom mb-3",
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "d-flex align-items-end justify-content-start mb-1",
+        style: {
+          maxWidth: '66%'
+        },
+        children: [/*#__PURE__*/jsx("div", {
+          className: "me-3 mb-0",
+          children: /*#__PURE__*/jsx(Button, {
+            theme: "secondary",
+            outline: true,
+            onClick: onClose,
+            icon: "arrow-left",
+            children: /*#__PURE__*/jsx(FormattedMessage, {
+              id: "8NyYTH",
+              defaultMessage: [{
+                "type": 0,
+                "value": "Back"
+              }]
+            })
+          })
+        }), /*#__PURE__*/jsx("h4", {
+          className: "d-inline text-truncate mb-0",
+          children: name
+        }), /*#__PURE__*/jsx("span", {
+          className: "mx-2",
+          children: type
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        className: classNames('d-flex', 'justify-content-between', 'align-items-center', 'gap-1'),
+        children: [withReplace ? /*#__PURE__*/jsx(UploadField, {
+          className: "w-auto text-nowrap",
+          withButton: true,
+          withoutMedia: true,
+          types: [type],
+          outline: false,
+          closeAfterFinish: true,
+          disabled: deleting || trashing || updating || replacing,
+          addButtonLabel: /*#__PURE__*/jsx(FormattedMessage, {
+            id: "GxOBVL",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Replace"
+            }]
+          }),
+          onChange: onUploadComplete
+        }) : null, withDelete ? /*#__PURE__*/jsx(Button, {
+          className: "me-2 mb-1 mt-1",
+          theme: "danger",
+          icon: withTrash && deletedAt !== null ? 'trash-fill' : 'trash',
+          iconPosition: "right",
+          onClick: onDeleteMedia,
+          disabled: deleting || trashing || updating || replacing,
+          children: withTrash && deletedAt === null ? /*#__PURE__*/jsx(FormattedMessage, {
+            id: "PSlT7H",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Trash"
+            }]
+          }) : /*#__PURE__*/jsx(FormattedMessage, {
+            id: "Bhu3B2",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Delete"
+            }]
+          })
+        }) : null, onSave !== null ? /*#__PURE__*/jsx(Button, {
+          className: "mb-1 mt-1",
+          theme: "primary",
+          icon: changed ? 'check' : 'check',
+          iconPosition: "right",
+          onClick: onSubmit,
+          disabled: !changed || updating || deleting || trashing,
+          children: /*#__PURE__*/jsx(FormattedMessage, {
+            id: "R1HYj0",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Save"
+            }]
+          })
+        }) : null]
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      className: "row",
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "col-md-6",
+        children: [/*#__PURE__*/jsx("div", {
+          className: "position-relative w-100",
+          children: /*#__PURE__*/jsx("div", {
+            className: styles.mediaFrame,
+            children: /*#__PURE__*/jsx(MediaFrame, {
+              value: value
+            })
+          })
+        }), children]
+      }), /*#__PURE__*/jsxs("div", {
+        className: "col-md-6",
+        children: [/*#__PURE__*/jsx(Form, {
+          onChange: onChangeMedia,
+          withoutActions: true,
+          children: /*#__PURE__*/jsx(FieldsComponent, {
+            fields: fields,
+            value: value,
+            onChange: setValue,
+            disabled: disabled
+          })
+        }), generalError !== null && status !== null ? /*#__PURE__*/jsx("div", {
+          className: "mt-5",
+          children: /*#__PURE__*/jsx(FormStatus, {
+            status: status
+          })
+        }) : null]
+      })]
+    })]
+  });
 }
 MediaForm.propTypes = propTypes$7;
 
@@ -673,15 +693,16 @@ function MediaProvider(_ref) {
       setCurrentMedia: setCurrentMedia
     };
   }, [currentMedia, setCurrentMedia]);
-  return /*#__PURE__*/React.createElement(MediaContext.Provider, {
-    value: values
-  }, children);
+  return /*#__PURE__*/jsx(MediaContext.Provider, {
+    value: values,
+    children: children
+  });
 }
 MediaProvider.propTypes = propTypes$6;
 
 var defaultColumns = [{
   id: 'image',
-  label: /*#__PURE__*/React.createElement(FormattedMessage, {
+  label: /*#__PURE__*/jsx(FormattedMessage, {
     id: "UbxbKP",
     defaultMessage: [{
       "type": 0,
@@ -693,7 +714,7 @@ var defaultColumns = [{
   sortable: false
 }, {
   id: 'name',
-  label: /*#__PURE__*/React.createElement(FormattedMessage, {
+  label: /*#__PURE__*/jsx(FormattedMessage, {
     id: "WX83V9",
     defaultMessage: [{
       "type": 0,
@@ -704,28 +725,28 @@ var defaultColumns = [{
   path: 'name',
   descriptionPath: 'type',
   descriptionValues: {
-    image: /*#__PURE__*/React.createElement(FormattedMessage, {
+    image: /*#__PURE__*/jsx(FormattedMessage, {
       id: "AwDQvD",
       defaultMessage: [{
         "type": 0,
         "value": "Image"
       }]
     }),
-    video: /*#__PURE__*/React.createElement(FormattedMessage, {
+    video: /*#__PURE__*/jsx(FormattedMessage, {
       id: "mQiyAm",
       defaultMessage: [{
         "type": 0,
         "value": "Video"
       }]
     }),
-    audio: /*#__PURE__*/React.createElement(FormattedMessage, {
+    audio: /*#__PURE__*/jsx(FormattedMessage, {
       id: "XnyI69",
       defaultMessage: [{
         "type": 0,
         "value": "Audio"
       }]
     }),
-    document: /*#__PURE__*/React.createElement(FormattedMessage, {
+    document: /*#__PURE__*/jsx(FormattedMessage, {
       id: "1dqmFw",
       defaultMessage: [{
         "type": 0,
@@ -736,7 +757,7 @@ var defaultColumns = [{
   sortable: true
 }, {
   id: 'dimensions',
-  label: /*#__PURE__*/React.createElement(FormattedMessage, {
+  label: /*#__PURE__*/jsx(FormattedMessage, {
     id: "eCe9ZY",
     defaultMessage: [{
       "type": 0,
@@ -748,7 +769,7 @@ var defaultColumns = [{
   path: 'metadata'
 }, {
   id: 'size',
-  label: /*#__PURE__*/React.createElement(FormattedMessage, {
+  label: /*#__PURE__*/jsx(FormattedMessage, {
     id: "c3hu9o",
     defaultMessage: [{
       "type": 0,
@@ -760,7 +781,7 @@ var defaultColumns = [{
   path: 'metadata.size'
 }, {
   id: 'duration',
-  label: /*#__PURE__*/React.createElement(FormattedMessage, {
+  label: /*#__PURE__*/jsx(FormattedMessage, {
     id: "002oWQ",
     defaultMessage: [{
       "type": 0,
@@ -781,7 +802,7 @@ var defaultColumns = [{
 // },
 {
   id: 'created_at',
-  label: /*#__PURE__*/React.createElement(FormattedMessage, {
+  label: /*#__PURE__*/jsx(FormattedMessage, {
     id: "OzYWZz",
     defaultMessage: [{
       "type": 0,
@@ -794,7 +815,7 @@ var defaultColumns = [{
   sortable: true
 }, {
   id: 'actions',
-  label: /*#__PURE__*/React.createElement(FormattedMessage, {
+  label: /*#__PURE__*/jsx(FormattedMessage, {
     id: "rtwfuZ",
     defaultMessage: [{
       "type": 0,
@@ -823,7 +844,7 @@ var defaultFilters = [{
   id: 'types',
   component: 'select',
   name: 'types',
-  placeholder: /*#__PURE__*/React.createElement(FormattedMessage, {
+  placeholder: /*#__PURE__*/jsx(FormattedMessage, {
     id: "9/t5wK",
     defaultMessage: [{
       "type": 0,
@@ -831,7 +852,7 @@ var defaultFilters = [{
     }]
   }),
   options: [{
-    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+    label: /*#__PURE__*/jsx(FormattedMessage, {
       id: "yHAmDD",
       defaultMessage: [{
         "type": 0,
@@ -840,7 +861,7 @@ var defaultFilters = [{
     }),
     value: 'image'
   }, {
-    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+    label: /*#__PURE__*/jsx(FormattedMessage, {
       id: "xSERPA",
       defaultMessage: [{
         "type": 0,
@@ -849,7 +870,7 @@ var defaultFilters = [{
     }),
     value: 'video'
   }, {
-    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+    label: /*#__PURE__*/jsx(FormattedMessage, {
       id: "yQRtgx",
       defaultMessage: [{
         "type": 0,
@@ -858,7 +879,7 @@ var defaultFilters = [{
     }),
     value: 'audio'
   }, {
-    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+    label: /*#__PURE__*/jsx(FormattedMessage, {
       id: "8INLfU",
       defaultMessage: [{
         "type": 0,
@@ -893,12 +914,12 @@ var _excluded$5 = ["page", "count"],
   _excluded2 = ["types", "trashed"];
 var DEFAULT_LAYOUTS = [{
   id: 'table',
-  label: /*#__PURE__*/React.createElement(Icon, {
+  label: /*#__PURE__*/jsx(Icon, {
     name: "table"
   })
 }, {
   id: 'grid',
-  label: /*#__PURE__*/React.createElement(Icon, {
+  label: /*#__PURE__*/jsx(Icon, {
     name: "grid"
   })
 }];
@@ -1200,7 +1221,7 @@ function MediasBrowser(_ref) {
       onUploadedMediaChanged(rawMedias);
     }
   }, [onMediaUploaded, setUploadedMedias, setUploadProcessing, onUploadedMediaChanged]);
-  var pagination = /*#__PURE__*/React.createElement(Pagination, {
+  var pagination = /*#__PURE__*/jsx(Pagination, {
     page: page,
     lastPage: lastPage,
     total: total,
@@ -1248,7 +1269,7 @@ function MediasBrowser(_ref) {
       if (columnId === 'created_at') {
         return _objectSpread(_objectSpread({}, column), {}, {
           path: 'deleted_at',
-          label: /*#__PURE__*/React.createElement(FormattedMessage, {
+          label: /*#__PURE__*/jsx(FormattedMessage, {
             id: "uds4wJ",
             defaultMessage: [{
               "type": 0,
@@ -1343,123 +1364,131 @@ function MediasBrowser(_ref) {
   //     [items, finalItems],
   // );
 
-  return /*#__PURE__*/React.createElement("div", {
-    className: className
-  }, currentMedia !== null ? /*#__PURE__*/React.createElement(MediaForm, {
-    value: currentMedia,
-    fields: fields,
-    onChange: setCurrentMedia,
-    onSave: onSaveMedia,
-    onReplace: onReplaceMedia,
-    onClose: onCloseMedia,
-    onDelete: onDeleteMedia,
-    withDelete: withDelete,
-    withTrash: withTrash,
-    withReplace: withReplace
-  }, formChildren) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: classNames(['d-flex', 'justify-content-between'])
-  }, filters !== null ? /*#__PURE__*/React.createElement(Filters, {
-    value: query,
-    clearValue: types !== null ? queryWithoutTypes : null,
-    filters: finalFilters,
-    onChange: onQueryChange,
-    onReset: onQueryReset,
-    theme: theme
-  }) : null, canUpload ? /*#__PURE__*/React.createElement(UploadField, {
-    className: "ms-auto w-auto text-nowrap mt-2 mb-2 ps-2",
-    withButton: true,
-    withoutMedia: true,
-    uppyProps: uppyConfig,
-    types: types,
-    allowMultipleUploads: true,
-    onChange: onUploadComplete,
-    disabled: uploadProcessing,
-    loading: uploadProcessing,
-    outline: false,
-    closeAfterFinish: true
-  }) : null), /*#__PURE__*/React.createElement("div", {
-    className: classNames(['d-flex', 'mt-1', 'mb-3', {
-      'justify-content-between': hasLayouts,
-      'justify-content-end': !hasLayouts
-    }])
-  }, hasLayouts ? /*#__PURE__*/React.createElement(Buttons, {
-    size: "sm",
-    theme: "secondary",
-    outline: true,
-    items: (layouts || []).map(function (lay) {
-      return _objectSpread(_objectSpread({}, lay), {}, {
-        active: layout === lay.id,
-        onClick: function onClick() {
-          return onClickLayout(lay.id);
-        },
-        className: 'px-3 py-2'
-      });
-    })
-  }) : null, !hidePagination ? pagination : /*#__PURE__*/React.createElement("div", null)), layout === 'grid' ? /*#__PURE__*/React.createElement(Grid, {
-    size: "small",
-    theme: theme,
-    component: MediaCard,
-    componentProps: {
-      className: 'd-flex w-100',
-      cardClassName: 'flex-grow-1',
-      vertical: true,
-      onClickDescription: function onClickDescription(it) {
-        onOpenMedia(it);
-      }
-    },
-    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__*/React.createElement(Table, {
-    theme: theme,
-    columns: finalColumns,
-    displayPlaceholder: /*#__PURE__*/React.createElement("span", {
-      className: "text-secondary text-opacity-75"
-    }, "\u2014"),
-    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}
-    ,
-    actionsProps: {
-      getDeletePropsFromItem: function getDeletePropsFromItem() {
-        return {
-          href: null,
-          withConfirmation: true,
-          disabled: trashing || deleting,
-          icon: showTrashed ? 'trash-fill' : 'trash',
-          action: function action(ids) {
-            return onTrashMedia(ids[0]);
-          }
-        };
-      },
-      getEditPropsFromItem: function getEditPropsFromItem(it) {
-        return {
-          href: null,
-          onClick: function onClick() {
+  return /*#__PURE__*/jsx("div", {
+    className: className,
+    children: currentMedia !== null ? /*#__PURE__*/jsx(MediaForm, {
+      value: currentMedia,
+      fields: fields,
+      onChange: setCurrentMedia,
+      onSave: onSaveMedia,
+      onReplace: onReplaceMedia,
+      onClose: onCloseMedia,
+      onDelete: onDeleteMedia,
+      withDelete: withDelete,
+      withTrash: withTrash,
+      withReplace: withReplace,
+      children: formChildren
+    }) : /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsxs("div", {
+        className: classNames(['d-flex', 'justify-content-between']),
+        children: [filters !== null ? /*#__PURE__*/jsx(Filters, {
+          value: query,
+          clearValue: types !== null ? queryWithoutTypes : null,
+          filters: finalFilters,
+          onChange: onQueryChange,
+          onReset: onQueryReset,
+          theme: theme
+        }) : null, canUpload ? /*#__PURE__*/jsx(UploadField, {
+          className: "ms-auto w-auto text-nowrap mt-2 mb-2 ps-2",
+          withButton: true,
+          withoutMedia: true,
+          uppyProps: uppyConfig,
+          types: types,
+          allowMultipleUploads: true,
+          onChange: onUploadComplete,
+          disabled: uploadProcessing,
+          loading: uploadProcessing,
+          outline: false,
+          closeAfterFinish: true
+        }) : null]
+      }), /*#__PURE__*/jsxs("div", {
+        className: classNames(['d-flex', 'mt-1', 'mb-3', {
+          'justify-content-between': hasLayouts,
+          'justify-content-end': !hasLayouts
+        }]),
+        children: [hasLayouts ? /*#__PURE__*/jsx(Buttons, {
+          size: "sm",
+          theme: "secondary",
+          outline: true,
+          items: (layouts || []).map(function (lay) {
+            return _objectSpread(_objectSpread({}, lay), {}, {
+              active: layout === lay.id,
+              onClick: function onClick() {
+                return onClickLayout(lay.id);
+              },
+              className: 'px-3 py-2'
+            });
+          })
+        }) : null, !hidePagination ? pagination : /*#__PURE__*/jsx("div", {})]
+      }), layout === 'grid' ? /*#__PURE__*/jsx(Grid, {
+        size: "small",
+        theme: theme,
+        component: MediaCard,
+        componentProps: {
+          className: 'd-flex w-100',
+          cardClassName: 'flex-grow-1',
+          vertical: true,
+          onClickDescription: function onClickDescription(it) {
             onOpenMedia(it);
           }
-        };
-      }
-    }
-  }) : null, !hidePagination ? /*#__PURE__*/React.createElement("div", {
-    className: classNames(['d-flex', 'mt-3', 'mb-1', 'justify-content-end'])
-  }, pagination) : null));
+        },
+        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, {
+        theme: theme,
+        columns: finalColumns,
+        displayPlaceholder: /*#__PURE__*/jsx("span", {
+          className: "text-secondary text-opacity-75",
+          children: "\u2014"
+        }),
+        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}
+        ,
+        actionsProps: {
+          getDeletePropsFromItem: function getDeletePropsFromItem() {
+            return {
+              href: null,
+              withConfirmation: true,
+              disabled: trashing || deleting,
+              icon: showTrashed ? 'trash-fill' : 'trash',
+              action: function action(ids) {
+                return onTrashMedia(ids[0]);
+              }
+            };
+          },
+          getEditPropsFromItem: function getEditPropsFromItem(it) {
+            return {
+              href: null,
+              onClick: function onClick() {
+                onOpenMedia(it);
+              }
+            };
+          }
+        }
+      }) : null, !hidePagination ? /*#__PURE__*/jsx("div", {
+        className: classNames(['d-flex', 'mt-3', 'mb-1', 'justify-content-end']),
+        children: pagination
+      }) : null]
+    })
+  });
 }
 MediasBrowser.propTypes = propTypes$5;
 
@@ -1508,17 +1537,18 @@ function MediasPicker(_ref) {
       onChange(selectedItems);
     }
   }, [selectedItems, onChange]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: className
-  }, /*#__PURE__*/React.createElement(MediasBrowser, Object.assign({
-    items: initialItems // TODO: fix useItems if actually using this
-    ,
-    selectable: true,
-    selectedItems: selectedItems,
-    onSelectionChange: onSelectionChange,
-    multipleSelection: multiple,
-    extraItems: extraItems
-  }, props)));
+  return /*#__PURE__*/jsx("div", {
+    className: className,
+    children: /*#__PURE__*/jsx(MediasBrowser, _objectSpread({
+      items: initialItems // TODO: fix useItems if actually using this
+      ,
+      selectable: true,
+      selectedItems: selectedItems,
+      onSelectionChange: onSelectionChange,
+      multipleSelection: multiple,
+      extraItems: extraItems
+    }, props))
+  });
 }
 MediasPicker.propTypes = propTypes$4;
 
@@ -1535,11 +1565,13 @@ function MediasBrowserContainer(_ref) {
     _ref$media = _ref.media,
     media = _ref$media === void 0 ? null : _ref$media,
     props = _objectWithoutProperties(_ref, _excluded$3);
-  return /*#__PURE__*/React.createElement(MediasApiProvider, {
-    api: api
-  }, /*#__PURE__*/React.createElement(MediaProvider, {
-    media: media
-  }, /*#__PURE__*/React.createElement(MediasBrowser, props)));
+  return /*#__PURE__*/jsx(MediasApiProvider, {
+    api: api,
+    children: /*#__PURE__*/jsx(MediaProvider, {
+      media: media,
+      children: /*#__PURE__*/jsx(MediasBrowser, _objectSpread({}, props))
+    })
+  });
 }
 MediasBrowserContainer.propTypes = propTypes$3;
 
@@ -1558,13 +1590,15 @@ function MediasPickerContainer(_ref) {
     media = _ref$media === void 0 ? null : _ref$media,
     onChange = _ref.onChange,
     props = _objectWithoutProperties(_ref, _excluded$2);
-  return /*#__PURE__*/React.createElement(MediasApiProvider, {
-    api: api
-  }, /*#__PURE__*/React.createElement(MediaProvider, {
-    media: media
-  }, /*#__PURE__*/React.createElement(MediasPicker, Object.assign({}, props, {
-    onChange: onChange
-  }))));
+  return /*#__PURE__*/jsx(MediasApiProvider, {
+    api: api,
+    children: /*#__PURE__*/jsx(MediaProvider, {
+      media: media,
+      children: /*#__PURE__*/jsx(MediasPicker, _objectSpread(_objectSpread({}, props), {}, {
+        onChange: onChange
+      }))
+    })
+  });
 }
 MediasPickerContainer.propTypes = propTypes$2;
 
@@ -1631,7 +1665,7 @@ function MediasResourceBrowser(_ref) {
       }
     };
   }, [api, resource]);
-  return /*#__PURE__*/React.createElement(MediasBrowserContainer, Object.assign({
+  return /*#__PURE__*/jsx(MediasBrowserContainer, _objectSpread({
     api: mediasApi
   }, props));
 }
@@ -1710,15 +1744,15 @@ function MediasResourcePicker(_ref) {
       }
     };
   }, [api, resource]);
-  return /*#__PURE__*/React.createElement(MediasPickerContainer, Object.assign({
+  return /*#__PURE__*/jsx(MediasPickerContainer, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
     api: mediasApi
   }, filters !== null ? {
     filters: filters
-  } : null, fields !== null ? {
+  } : null), fields !== null ? {
     fields: fields
-  } : null, columns !== null ? {
+  } : null), columns !== null ? {
     columns: columns
-  } : null, props));
+  } : null), props));
 }
 MediasResourcePicker.propTypes = propTypes;
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/medias",
-    "version": "4.0.2",
+    "version": "4.0.3",
     "description": "",
     "keywords": [
         "javascript"
@@ -64,7 +64,7 @@
         "@panneau/element-media-player": "^4.0.2",
         "@panneau/element-pagination": "^4.0.2",
         "@panneau/element-table": "^4.0.2",
-        "@panneau/field-upload": "^4.0.2",
+        "@panneau/field-upload": "^4.0.3",
         "@panneau/filter-filters": "^4.0.2",
         "classnames": "^2.5.1",
         "lodash-es": "^4.17.21",
@@ -74,5 +74,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "53ad0f27e467992c23158732e0f7d39d8615780b"
+    "gitHead": "26b5ab7536b0e8c3197d40d302fc2681e7c7122e"
 }