@panneau/medias 3.0.159 → 3.0.162

package/es/index.js

@@ -4,16 +4,15 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useContext, useMemo, useCallback, useState, useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { useDisplaysComponentsManager, useFieldComponent, usePanneauResource } from '@panneau/core/contexts';
+import { useFieldComponent, usePanneauResource } from '@panneau/core/contexts';
 import { useForm, useQuery, useItemSelection } from '@panneau/core/hooks';
 import Button from '@panneau/element-button';
 import Form from '@panneau/element-form';
 import FormStatus from '@panneau/element-form-status';
 import MediaPlayer from '@panneau/element-media-player';
 import MediaPreview from '@panneau/element-media-preview';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { get } from 'lodash';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { PropTypes as PropTypes$1 } from '@panneau/core';
 import Buttons from '@panneau/element-buttons';
 import Grid from '@panneau/element-grid';
@@ -59,7 +58,7 @@ function MediasApiProvider(_ref) {
 MediasApiProvider.propTypes = propTypes$9;
 MediasApiProvider.defaultProps = defaultProps$9;
 
-var _excluded$8 = ["items", "pageItems"];
+var _excluded$7 = ["items", "pageItems"];
 var useMedias = function useMedias() {
   var query = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   var page = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
@@ -77,7 +76,7 @@ var useMedias = function useMedias() {
     }, opts)),
     items = _useItems.items,
     pageItems = _useItems.pageItems,
-    request = _objectWithoutProperties(_useItems, _excluded$8);
+    request = _objectWithoutProperties(_useItems, _excluded$7);
   return _objectSpread({
     medias: page !== null ? pageItems : items,
     allMedias: items
@@ -113,7 +112,7 @@ var useMediasRecent = function useMediasRecent(opts) {
 };
 var useMediasRecent$1 = useMediasRecent;
 
-var _excluded$7 = ["data"];
+var _excluded$6 = ["data"];
 var useMedia = function useMedia(id, opts) {
   var api = useMediasApi();
   var loader = useCallback(function () {
@@ -121,7 +120,7 @@ var useMedia = function useMedia(id, opts) {
   }, [api, id]);
   var _useData = useData(loader, opts),
     data = _useData.data,
-    request = _objectWithoutProperties(_useData, _excluded$7);
+    request = _objectWithoutProperties(_useData, _excluded$6);
   return _objectSpread({
     story: data
   }, request);
@@ -234,120 +233,7 @@ function MediaFrame(_ref) {
 MediaFrame.propTypes = propTypes$8;
 MediaFrame.defaultProps = defaultProps$8;
 
-var _excluded$6 = ["path"],
-  _excluded2$1 = ["label", "value", "component"];
-var propTypes$7 = {
-  value: PropTypes.shape({
-    metadata: PropTypes.shape({}),
-    user: PropTypes.shape({}),
-    createdAt: PropTypes.string
-  }),
-  sections: PropTypes.arrayOf(PropTypes.shape({
-    title: PropTypes.node,
-    items: PropTypes.arrayOf(PropTypes.shape({})) // displays
-  })),
-  displays: PropTypes.arrayOf(PropTypes.shape({
-    section: PropTypes.string
-  })),
-  className: PropTypes.string
-};
-var defaultProps$7 = {
-  value: null,
-  sections: null,
-  displays: null,
-  className: null
-};
-function MediaMetadata(_ref) {
-  var sections = _ref.sections,
-    displays = _ref.displays,
-    filtersValue = _ref.value,
-    className = _ref.className;
-  var displayComponents = useDisplaysComponentsManager();
-  var finalSections = useMemo(function () {
-    var displaysWithValue = (displays || []).map(function (_ref2) {
-      var _ref2$path = _ref2.path,
-        path = _ref2$path === void 0 ? null : _ref2$path,
-        props = _objectWithoutProperties(_ref2, _excluded$6);
-      return _objectSpread({
-        value: get(filtersValue, path, null)
-      }, props);
-    }).filter(function (_ref3) {
-      var _ref3$value = _ref3.value,
-        value = _ref3$value === void 0 ? null : _ref3$value;
-      return value !== null;
-    });
-    var displaysWithoutSection = (displaysWithValue || []).filter(function (_ref4) {
-      var _ref4$section = _ref4.section,
-        section = _ref4$section === void 0 ? null : _ref4$section;
-      return section === null;
-    });
-    return (sections || []).map(function (_ref5) {
-      var _ref5$id = _ref5.id,
-        id = _ref5$id === void 0 ? null : _ref5$id,
-        _ref5$title = _ref5.title,
-        title = _ref5$title === void 0 ? null : _ref5$title;
-      return {
-        id: id,
-        title: title,
-        items: (displaysWithValue || []).filter(function (_ref6) {
-          var _ref6$section = _ref6.section,
-            section = _ref6$section === void 0 ? null : _ref6$section;
-          return section === id;
-        })
-      };
-    }).concat({
-      id: 'others',
-      title: null,
-      items: displaysWithoutSection
-    }).filter(function (_ref7) {
-      var _ref7$items = _ref7.items,
-        items = _ref7$items === void 0 ? null : _ref7$items;
-      return items !== null && items.length > 0;
-    });
-  }, [sections, displays, filtersValue]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['px-2', _defineProperty({}, className, className !== null)])
-  }, (finalSections || []).map(function (_ref9, idx) {
-    var _ref9$title = _ref9.title,
-      title = _ref9$title === void 0 ? null : _ref9$title,
-      _ref9$items = _ref9.items,
-      items = _ref9$items === void 0 ? [] : _ref9$items;
-    return /*#__PURE__*/React.createElement("div", {
-      className: idx < finalSections.length - 1 ? 'mb-5' : null,
-      key: "section-".concat(idx + 1)
-    }, title !== null ? /*#__PURE__*/React.createElement("h6", {
-      className: "px-1"
-    }, title) : null, /*#__PURE__*/React.createElement("ul", {
-      className: "list-group list-group-flush"
-    }, (items || []).map(function (_ref10, index) {
-      var label = _ref10.label,
-        value = _ref10.value,
-        _ref10$component = _ref10.component,
-        component = _ref10$component === void 0 ? null : _ref10$component,
-        props = _objectWithoutProperties(_ref10, _excluded2$1);
-      var Component = displayComponents.getComponent(component || 'text');
-      var itemValue = value || null;
-      return Component !== null && itemValue !== null ? /*#__PURE__*/React.createElement("li", {
-        key: "item-".concat(index + 1),
-        className: classNames(['row', 'd-flex', 'align-items-center', 'justify-content-between', 'p-1', 'border-secondary-1', 'border-1', 'border-bottom', 'text-small', {
-          'border-top': index === 0
-        }])
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "col-auto"
-      }, label), /*#__PURE__*/React.createElement("div", {
-        className: "col-auto align-right"
-      }, /*#__PURE__*/React.createElement(Component, Object.assign({}, props, {
-        value: itemValue
-      })))) : null;
-    })));
-  }));
-}
-MediaMetadata.propTypes = propTypes$7;
-MediaMetadata.defaultProps = defaultProps$7;
-
-var defaultFields = [
-// { name: 'type', label: 'Type', type: 'string', component: 'text', disabled: true },
-{
+var defaultFields = [{
   name: 'name',
   label: /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "WX83V9",
@@ -369,159 +255,121 @@ var defaultFields = [
   }),
   type: 'text',
   component: 'text'
-}
-// {
-//     name: 'url',
-//     label: <FormattedMessage defaultMessage="URL" description="Field name" />,
-//     type: 'text',
-//     component: 'url',
-// },
-// {
-//     name: 'thumbnail_url',
-//     label: <FormattedMessage defaultMessage="Thumbnail URL" description="Field name" />,
-//     type: 'text',
-//     component: 'url',
-// },
-];
-
-var defaultDisplays = [{
-  id: 'user',
-  label: /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "yByaBh",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Added by"
-    }]
-  }),
-  component: 'avatar',
-  path: 'user',
-  section: 'info'
 }, {
-  id: 'created_at',
-  label: /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "PN+75e",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Created at"
-    }]
-  }),
-  component: 'date',
-  path: 'created_at',
-  format: 'yyyy-MM-dd hh:ss',
-  section: 'info'
-}, {
-  id: 'format',
-  label: /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "JuxiUN",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Format"
-    }]
-  }),
-  component: 'unit',
-  format: 'format',
-  path: 'format',
-  section: 'technical'
-}, {
-  id: 'dimensions',
-  label: /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "rmJBin",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Dimensions"
-    }]
-  }),
-  component: 'unit',
-  format: 'dimensions',
-  path: 'metadata',
-  section: 'technical'
-}, {
-  id: 'size',
-  label: /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "g2CRt5",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Size"
-    }]
-  }),
-  component: 'unit',
-  format: 'bytes',
-  path: 'metadata.size',
-  section: 'technical'
-}, {
-  id: 'duration',
-  label: /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "wU++NJ",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Duration"
-    }]
-  }),
-  component: 'unit',
-  format: 'duration',
-  path: 'metadata.duration',
-  section: 'technical'
-}];
-
-var defaultSections = [{
   id: 'info',
+  component: 'fields',
   title: /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "3RT69u",
     defaultMessage: [{
       "type": 0,
       "value": "Informations"
     }]
-  })
-}, {
-  id: 'technical',
-  title: /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "xKUOLG",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Technical details"
-    }]
-  })
-}];
+  }),
+  fields: [{
+    id: 'user',
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "yByaBh",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Added by"
+      }]
+    }),
+    component: 'display',
+    type: 'avatar',
+    path: 'user',
+    section: 'info'
+  }, {
+    id: 'created_at',
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "PN+75e",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Created at"
+      }]
+    }),
+    component: 'display',
+    type: 'date',
+    path: 'created_at',
+    format: 'yyyy-MM-dd hh:ss',
+    section: 'info'
+  }]
+}
+// {
+//     id: 'technical',
+//     component: 'fields',
+//     title: <FormattedMessage defaultMessage="Technical details" description="Field title" />,
+//     fields: [
+//         {
+//             id: 'format',
+//             label: <FormattedMessage defaultMessage="Format" description="Field label" />,
+//             type: 'display',
+//             component: 'unit',
+//             format: 'format',
+//             path: 'format',
+//             section: 'technical',
+//         },
+//         {
+//             id: 'dimensions',
+//             label: <FormattedMessage defaultMessage="Dimensions" description="Field label" />,
+//             type: 'display',
+//             component: 'unit',
+//             format: 'dimensions',
+//             path: 'metadata',
+//             section: 'technical',
+//         },
+//         {
+//             id: 'size',
+//             label: <FormattedMessage defaultMessage="Size" description="Field label" />,
+//             type: 'display',
+//             component: 'unit',
+//             format: 'bytes',
+//             path: 'metadata.size',
+//             section: 'technical',
+//         },
+//         {
+//             id: 'duration',
+//             label: <FormattedMessage defaultMessage="Duration" description="Field label" />,
+//             type: 'display',
+//             component: 'unit',
+//             format: 'duration',
+//             path: 'metadata.duration',
+//             section: 'technical',
+//         },
+//     ],
+// },
+];
 
-var propTypes$6 = {
+var propTypes$7 = {
   value: PropTypes.shape({
     id: PropTypes.string
   }),
   fields: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string
   })),
-  sections: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    title: PropTypes.string
-  })),
-  displays: PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string
-  })),
   onChange: PropTypes.func.isRequired,
   onSave: PropTypes.func.isRequired,
   onDelete: PropTypes.func,
   onClose: PropTypes.func,
-  className: PropTypes.string
+  className: PropTypes.string,
+  children: PropTypes.node
 };
-var defaultProps$6 = {
+var defaultProps$7 = {
   value: null,
   fields: defaultFields,
-  sections: defaultSections,
-  displays: defaultDisplays,
   onClose: null,
   onDelete: null,
-  className: null
+  className: null,
+  children: null
 };
 function MediaForm(_ref) {
   var initialValue = _ref.value,
     initialFields = _ref.fields,
-    sections = _ref.sections,
-    displays = _ref.displays,
     onChange = _ref.onChange,
     onSave = _ref.onSave,
     onDelete = _ref.onDelete,
     onClose = _ref.onClose,
-    className = _ref.className;
+    className = _ref.className,
+    children = _ref.children;
   var FieldsComponent = useFieldComponent('fields');
   var _useMediaUpdate = useMediaUpdate$1(),
     update = _useMediaUpdate.update,
@@ -588,9 +436,9 @@ function MediaForm(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "d-flex w-100 align-items-start justify-content-between mb-3 pb-2 border-bottom"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "d-flex align-items-end mb-0"
+    className: "d-flex align-items-end justify-content-end mb-0"
   }, /*#__PURE__*/React.createElement("h4", {
-    className: "d-inline text-break mb-1"
+    className: "d-inline text-break mb-0"
   }, name), /*#__PURE__*/React.createElement("span", {
     className: "mx-2"
   }, type)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
@@ -625,7 +473,7 @@ function MediaForm(_ref) {
     className: styles.mediaFrame
   }, /*#__PURE__*/React.createElement(MediaFrame, {
     value: value
-  })))), /*#__PURE__*/React.createElement("div", {
+  }))), children), /*#__PURE__*/React.createElement("div", {
     className: "col-md-6"
   }, /*#__PURE__*/React.createElement(Form, {
     onChange: onChangeMedia,
@@ -635,19 +483,47 @@ function MediaForm(_ref) {
     value: value,
     onChange: setValue,
     disabled: disabled
-  })), /*#__PURE__*/React.createElement(MediaMetadata, {
-    className: "mt-5",
-    value: value,
-    sections: sections,
-    displays: displays
-  }), generalError !== null && status !== null ? /*#__PURE__*/React.createElement("div", {
+  })), generalError !== null && status !== null ? /*#__PURE__*/React.createElement("div", {
     className: "mt-5"
   }, /*#__PURE__*/React.createElement(FormStatus, {
     status: status
   })) : null)));
 }
-MediaForm.propTypes = propTypes$6;
-MediaForm.defaultProps = defaultProps$6;
+MediaForm.propTypes = propTypes$7;
+MediaForm.defaultProps = defaultProps$7;
+
+var MediasFormContext = /*#__PURE__*/React.createContext(null);
+var useMediasForm = function useMediasForm() {
+  return useContext(MediasFormContext);
+};
+var propTypes$6 = {
+  media: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  }),
+  children: PropTypes.node.isRequired
+};
+var defaultProps$6 = {
+  media: null
+};
+function MediasFormProvider(_ref) {
+  var providedMedia = _ref.media,
+    children = _ref.children;
+  var _useState = useState(providedMedia),
+    _useState2 = _slicedToArray(_useState, 2),
+    media = _useState2[0],
+    setMedia = _useState2[1];
+  var values = useMemo(function () {
+    return {
+      media: media,
+      setMedia: setMedia
+    };
+  }, [media, setMedia]);
+  return /*#__PURE__*/React.createElement(MediasFormContext.Provider, {
+    value: values
+  }, children);
+}
+MediasFormProvider.propTypes = propTypes$6;
+MediasFormProvider.defaultProps = defaultProps$6;
 
 var defaultColumns = [{
   id: 'image',
@@ -704,19 +580,6 @@ var defaultColumns = [{
     })
   },
   sortable: true
-}, {
-  id: 'created_at',
-  label: /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "OzYWZz",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Created at"
-    }]
-  }),
-  component: 'date',
-  path: 'created_at',
-  format: 'yyyy-MM-dd hh:ss',
-  sortable: true
 }, {
   id: 'dimensions',
   label: /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -753,19 +616,28 @@ var defaultColumns = [{
   component: 'unit',
   format: 'duration',
   path: 'metadata.duration'
-}, {
-  id: 'author',
+},
+// {
+//     id: 'author',
+//     label: <FormattedMessage defaultMessage="Added by" description="Field name" />,
+//     component: 'avatar',
+//     path: 'metadata.author',
+//     namePath: 'name',
+//     withoutName: true,
+// },
+{
+  id: 'created_at',
   label: /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "KNeQ6y",
+    id: "OzYWZz",
     defaultMessage: [{
       "type": 0,
-      "value": "Added by"
+      "value": "Created at"
     }]
   }),
-  component: 'avatar',
-  path: 'metadata.author',
-  namePath: 'name',
-  withoutName: true
+  component: 'date',
+  path: 'created_at',
+  format: 'yyyy-MM-dd hh:ss',
+  sortable: true
 }, {
   id: 'actions',
   label: /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -837,35 +709,26 @@ var defaultFilters = [{
     value: 'document'
   }],
   multiple: true
-}, {
-  id: 'author',
-  component: 'select',
-  name: 'author',
-  placeholder: /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "skmuWU",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Author"
-    }]
-  }),
-  requestUrl: '/persons',
-  itemLabelPath: 'name',
-  multiple: true
-}, {
-  id: 'tag',
-  component: 'select',
-  name: 'tag',
-  placeholder: /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "hnLSrX",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Tag"
-    }]
-  }),
-  requestUrl: '/tags',
-  itemLabelPath: 'label',
-  multiple: true
-}, {
+},
+// {
+//     id: 'author',
+//     component: 'select',
+//     name: 'author',
+//     placeholder: <FormattedMessage defaultMessage="Author" description="Filter label" />,
+//     requestUrl: '/persons',
+//     itemLabelPath: 'name',
+//     multiple: true,
+// },
+// {
+//     id: 'tag',
+//     component: 'select',
+//     name: 'tag',
+//     placeholder: <FormattedMessage defaultMessage="Tag" description="Filter label" />,
+//     requestUrl: '/tags',
+//     itemLabelPath: 'label',
+//     multiple: true,
+// },
+{
   id: 'search',
   component: 'search',
   name: 'search'
@@ -885,14 +748,6 @@ var propTypes$5 = {
   query: PropTypes.shape({}),
   baseUrl: PropTypes.string,
   fields: PropTypes$1.fields,
-  metadatas: PropTypes.shape({
-    sections: PropTypes.arrayOf(PropTypes.shape({
-      id: PropTypes.string
-    })),
-    displays: PropTypes.arrayOf(PropTypes.shape({
-      id: PropTypes.string
-    }))
-  }),
   layout: PropTypes.string,
   layouts: PropTypes.arrayOf(PropTypes.shape({})),
   theme: PropTypes.string,
@@ -913,10 +768,6 @@ var defaultProps$5 = {
   filters: defaultFilters,
   columns: defaultColumns,
   fields: defaultFields,
-  metadatas: {
-    sections: defaultSections,
-    displays: defaultDisplays
-  },
   query: null,
   baseUrl: null,
   layout: 'table',
@@ -950,7 +801,6 @@ function MediasBrowser(_ref) {
     filters = _ref.filters,
     columns = _ref.columns,
     fields = _ref.fields,
-    metadatas = _ref.metadatas,
     initialQuery = _ref.query,
     initialLayout = _ref.layout,
     layouts = _ref.layouts,
@@ -963,14 +813,13 @@ function MediasBrowser(_ref) {
     selectedCount = _ref.selectedCount,
     onClearSelected = _ref.onClearSelected,
     className = _ref.className;
-  var _ref2 = metadatas || {},
-    sections = _ref2.sections,
-    displays = _ref2.displays;
   var _useState = useState(initialItems || null),
     _useState2 = _slicedToArray(_useState, 1),
     baseItems = _useState2[0];
   var baseQuery = useMemo(function () {
-    return _objectSpread(_objectSpread({}, initialQuery), {}, {
+    return _objectSpread(_objectSpread({
+      count: 12
+    }, initialQuery), {}, {
       types: types
     });
   }, [initialQuery, types]);
@@ -980,12 +829,12 @@ function MediasBrowser(_ref) {
     onQueryChange = _useQuery.onQueryChange,
     onQueryReset = _useQuery.onQueryReset;
   var _useMemo = useMemo(function () {
-      var _ref3 = fullQuery || {},
-        _ref3$page = _ref3.page,
-        fullQueryPage = _ref3$page === void 0 ? null : _ref3$page,
-        _ref3$count = _ref3.count,
-        fullQueryCount = _ref3$count === void 0 ? null : _ref3$count,
-        params = _objectWithoutProperties(_ref3, _excluded$5);
+      var _ref2 = fullQuery || {},
+        _ref2$page = _ref2.page,
+        fullQueryPage = _ref2$page === void 0 ? null : _ref2$page,
+        _ref2$count = _ref2.count,
+        fullQueryCount = _ref2$count === void 0 ? null : _ref2$count,
+        params = _objectWithoutProperties(_ref2, _excluded$5);
       return {
         page: fullQueryPage,
         count: fullQueryCount,
@@ -1000,9 +849,9 @@ function MediasBrowser(_ref) {
     query = _useMemo$query === void 0 ? null : _useMemo$query;
 
   // eslint-disable-next-line no-unused-vars
-  var _ref4 = query || {};
-    _ref4.types;
-    var queryWithoutTypes = _objectWithoutProperties(_ref4, _excluded2);
+  var _ref3 = query || {};
+    _ref3.types;
+    var queryWithoutTypes = _objectWithoutProperties(_ref3, _excluded2);
   var _useMedias = useMedias$1(query, page, count, {
       items: baseItems
     }),
@@ -1030,10 +879,11 @@ function MediasBrowser(_ref) {
       onLayoutChange(newLayout);
     }
   }, [setLayout]);
-  var _useState5 = useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    currentMedia = _useState6[0],
-    setCurrentMedia = _useState6[1];
+
+  // const [currentMedia, setCurrentMedia] = useState(null);
+  var _useMediasForm = useMediasForm(),
+    currentMedia = _useMediasForm.media,
+    setCurrentMedia = _useMediasForm.setMedia;
   var onOpenMedia = useCallback(function (media) {
     setCurrentMedia(media);
   }, [setCurrentMedia]);
@@ -1042,7 +892,6 @@ function MediasBrowser(_ref) {
   }, [setCurrentMedia]);
   var onChangeMedia = useCallback(function () {
     var media = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    console.log('media', media);
     onSelectItems(media);
     onQueryReset();
   }, [setCurrentMedia, onQueryReset, onSelectItems]);
@@ -1063,9 +912,9 @@ function MediasBrowser(_ref) {
   var finalFilters = useMemo(function () {
     if (types !== null && filters !== null) {
       return (filters || []).map(function (filter) {
-        var _ref5 = filter || {},
-          _ref5$id = _ref5.id,
-          id = _ref5$id === void 0 ? null : _ref5$id;
+        var _ref4 = filter || {},
+          _ref4$id = _ref4.id,
+          id = _ref4$id === void 0 ? null : _ref4$id;
         return id === 'types' ? _objectSpread(_objectSpread({}, filter), {}, {
           disabled: true
         }) : filter;
@@ -1091,25 +940,30 @@ function MediasBrowser(_ref) {
   }))), /*#__PURE__*/React.createElement(MediaForm, {
     value: currentMedia,
     fields: fields,
-    sections: sections,
-    displays: displays,
     onClose: onCloseMedia
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null, uploadButton !== null ? /*#__PURE__*/React.createElement("div", {
-    className: "mt-2 mb-4"
-  }, /*#__PURE__*/React.createElement(UploadField, Object.assign({
-    onChange: onChangeMedia,
-    withButton: true
-  }, uploadButton))) : null, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
     items: buttons,
     className: "mb-2"
   }) : null, filters !== null ? /*#__PURE__*/React.createElement(Filters, {
+    className: "mt-0 pt-0",
     value: query,
     clearValue: types !== null ? queryWithoutTypes : null,
     filters: finalFilters,
     onChange: onQueryChange,
     onReset: onQueryReset,
     theme: theme
-  }) : null, /*#__PURE__*/React.createElement("div", {
+  }, uploadButton !== null ? /*#__PURE__*/React.createElement(UploadField, Object.assign({
+    className: "w-auto mb-2",
+    onChange: onChangeMedia,
+    withButton: true,
+    withoutMedia: true
+  }, uploadButton)) : null) : null, filters === null && uploadButton !== null ? /*#__PURE__*/React.createElement("div", {
+    className: "mt-2 mb-2"
+  }, /*#__PURE__*/React.createElement(UploadField, Object.assign({
+    onChange: onChangeMedia,
+    withButton: true,
+    withoutMedia: true
+  }, uploadButton))) : null, /*#__PURE__*/React.createElement("div", {
     className: classNames(['d-flex', 'mt-1', 'mb-3', {
       'justify-content-between': hasLayouts,
       'justify-content-end': !hasLayouts
@@ -1128,7 +982,7 @@ function MediasBrowser(_ref) {
       });
     })
   }) : null, pagination), layout === 'grid' ? /*#__PURE__*/React.createElement(Grid, Object.assign({
-    size: "xsmall",
+    size: "small",
     theme: theme,
     component: MediaCard,
     componentProps: {
@@ -1151,6 +1005,16 @@ function MediasBrowser(_ref) {
     items: items,
     onSelectItem: onSelectItem !== null ? onSelectItem : function (it) {
       return onOpenMedia(it);
+    },
+    actionsProps: {
+      getEditPropsFromItem: function getEditPropsFromItem(it) {
+        return {
+          href: null,
+          onClick: function onClick() {
+            onOpenMedia(it);
+          }
+        };
+      }
     }
   })) : null, /*#__PURE__*/React.createElement("div", {
     className: classNames(['d-flex', 'mt-3', 'mb-1', 'justify-content-end'])
@@ -1208,6 +1072,8 @@ function MediasPicker(_ref) {
     setItems(pageItems);
   }, [setItems]);
   var disabled = initialItems === null || initialItems.length < 1;
+  var _useMediasForm = useMediasForm(),
+    currentMedia = _useMediasForm.media;
   var _useItemSelection = useItemSelection({
       items: items,
       selectedItems: initialSelectedItems,
@@ -1221,6 +1087,11 @@ function MediasPicker(_ref) {
     pageSelected = _useItemSelection.pageSelected,
     selectedCount = _useItemSelection.selectedCount,
     selectedItems = _useItemSelection.selectedItems;
+  var onConfirmSelection = useCallback(function () {
+    if (onConfirm !== null) {
+      onConfirm(selectedItems);
+    }
+  }, [selectedItems, onConfirm]);
   var finalUploadButton = useMemo(function () {
     return _objectSpread(_objectSpread(_objectSpread({}, uploadButton || null), types !== null ? {
       types: types
@@ -1249,7 +1120,7 @@ function MediasPicker(_ref) {
     onClearSelected: onClearSelected,
     uploadButton: finalUploadButton,
     types: types
-  }, props)), multiple && !withoutButtons ? /*#__PURE__*/React.createElement("div", {
+  }, props)), multiple && !withoutButtons && currentMedia === null ? /*#__PURE__*/React.createElement("div", {
     className: "d-flex w-100 align-items-end justify-content-end mt-3"
   }, /*#__PURE__*/React.createElement("div", {
     className: "btn-group"
@@ -1267,7 +1138,7 @@ function MediasPicker(_ref) {
   })) : null, /*#__PURE__*/React.createElement(Button, {
     type: "button",
     theme: "primary",
-    onClick: onConfirm,
+    onClick: onConfirmSelection,
     disabled: disabled,
     outline: disabled,
     className: "d-block"
@@ -1282,40 +1153,54 @@ function MediasPicker(_ref) {
 MediasPicker.propTypes = propTypes$4;
 MediasPicker.defaultProps = defaultProps$4;
 
-var _excluded$3 = ["api"];
+var _excluded$3 = ["api", "media"];
 var propTypes$3 = {
-  api: apiPropTypes
+  api: apiPropTypes,
+  media: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  })
 };
 var defaultProps$3 = {
-  api: null
+  api: null,
+  media: null
 };
 function MediasBrowserContainer(_ref) {
   var api = _ref.api,
+    media = _ref.media,
     props = _objectWithoutProperties(_ref, _excluded$3);
   return /*#__PURE__*/React.createElement(MediasApiProvider, {
     api: api
-  }, /*#__PURE__*/React.createElement(MediasBrowser, props));
+  }, /*#__PURE__*/React.createElement(MediasFormProvider, {
+    media: media
+  }, /*#__PURE__*/React.createElement(MediasBrowser, props)));
 }
 MediasBrowserContainer.propTypes = propTypes$3;
 MediasBrowserContainer.defaultProps = defaultProps$3;
 
-var _excluded$2 = ["api", "onChange"];
+var _excluded$2 = ["api", "media", "onChange"];
 var propTypes$2 = {
   api: apiPropTypes,
+  media: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  }),
   onChange: PropTypes.func.isRequired
 };
 var defaultProps$2 = {
-  api: null
+  api: null,
+  media: null
 };
 function MediasPickerContainer(_ref) {
   var api = _ref.api,
+    media = _ref.media,
     onChange = _ref.onChange,
     props = _objectWithoutProperties(_ref, _excluded$2);
   return /*#__PURE__*/React.createElement(MediasApiProvider, {
     api: api
+  }, /*#__PURE__*/React.createElement(MediasFormProvider, {
+    media: media
   }, /*#__PURE__*/React.createElement(MediasPicker, Object.assign({}, props, {
     onChange: onChange
-  })));
+  }))));
 }
 MediasPickerContainer.propTypes = propTypes$2;
 MediasPickerContainer.defaultProps = defaultProps$2;
@@ -1389,6 +1274,7 @@ function MediasResourcePicker(_ref) {
   var resourceId = _ref.resource,
     props = _objectWithoutProperties(_ref, _excluded);
   var resource = usePanneauResource(resourceId);
+  // console.log('resource', resource);
   var api = useApi();
   var mediasApi = useMemo(function () {
     return {
@@ -1436,4 +1322,4 @@ function MediasResourcePicker(_ref) {
 MediasResourcePicker.propTypes = propTypes;
 MediasResourcePicker.defaultProps = defaultProps;
 
-export { MediaForm, MediasApiProvider, MediasBrowser, MediasBrowserContainer, MediasPicker, MediasPickerContainer, MediasResourceBrowser, MediasResourcePicker, apiPropTypes, defaultColumns as columns, defaultFields as fields, defaultFilters as filters, defaultDisplays as metadataDisplays, defaultSections as metadataSections, useMedia$1 as useMedia, useMediaCreate$1 as useMediaCreate, useMediaUpdate$1 as useMediaUpdate, useMedias$1 as useMedias, useMediasApi, useMediasRecent$1 as useMediasRecentSearches };
+export { MediaForm, MediasApiProvider, MediasBrowser, MediasBrowserContainer, MediasPicker, MediasPickerContainer, MediasResourceBrowser, MediasResourcePicker, apiPropTypes, defaultColumns as columns, defaultFields as fields, defaultFilters as filters, useMedia$1 as useMedia, useMediaCreate$1 as useMediaCreate, useMediaUpdate$1 as useMediaUpdate, useMedias$1 as useMedias, useMediasApi, useMediasRecent$1 as useMediasRecentSearches };