@panneau/medias 3.0.139 → 3.0.142

package/es/index.js

@@ -1,11 +1,13 @@
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import React, { useContext, useMemo, useCallback, useState } from 'react';
+import React, { useContext, useMemo, useCallback, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import classNames from 'classnames';
+import { FormattedMessage } from 'react-intl';
 import { PropTypes as PropTypes$1 } from '@panneau/core';
-import { useQuery } from '@panneau/core/hooks';
+import { useForm, useQuery, useItemSelection } from '@panneau/core/hooks';
+import Button from '@panneau/element-button';
 import Buttons from '@panneau/element-buttons';
 import Grid from '@panneau/element-grid';
 import Icon from '@panneau/element-icon';
@@ -13,10 +15,13 @@ import MediaCard from '@panneau/element-media-card';
 import Pagination from '@panneau/element-pagination';
 import Table from '@panneau/element-table';
 import Filters from '@panneau/filter-filters';
-import { FormattedMessage } from 'react-intl';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { useDisplaysComponentsManager, useFieldComponent, usePanneauResource } from '@panneau/core/contexts';
+import Form from '@panneau/element-form';
+import MediaPlayer from '@panneau/element-media-player';
+import MediaPreview from '@panneau/element-media-preview';
+import { get } from 'lodash';
 import { useItems, useData, useApi } from '@panneau/data';
-import Button from '@panneau/element-button';
-import { usePanneauResource } from '@panneau/core/contexts';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 
 /* eslint-disable react/jsx-props-no-spreading */
@@ -31,11 +36,11 @@ var apiPropTypes = PropTypes.shape({
   update: PropTypes.func.isRequired,
   "delete": PropTypes.func.isRequired
 });
-var propTypes$5 = {
+var propTypes$8 = {
   api: apiPropTypes,
   children: PropTypes.node.isRequired
 };
-var defaultProps$5 = {
+var defaultProps$8 = {
   api: null
 };
 function MediasApiProvider(_ref) {
@@ -49,10 +54,10 @@ function MediasApiProvider(_ref) {
     value: api
   }, children);
 }
-MediasApiProvider.propTypes = propTypes$5;
-MediasApiProvider.defaultProps = defaultProps$5;
+MediasApiProvider.propTypes = propTypes$8;
+MediasApiProvider.defaultProps = defaultProps$8;
 
-var _excluded$6 = ["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;
@@ -70,7 +75,7 @@ var useMedias = function useMedias() {
     }, opts)),
     items = _useItems.items,
     pageItems = _useItems.pageItems,
-    request = _objectWithoutProperties(_useItems, _excluded$6);
+    request = _objectWithoutProperties(_useItems, _excluded$7);
   return _objectSpread({
     medias: page !== null ? pageItems : items,
     allMedias: items
@@ -106,7 +111,7 @@ var useMediasRecent = function useMediasRecent(opts) {
 };
 var useMediasRecent$1 = useMediasRecent;
 
-var _excluded$5 = ["data"];
+var _excluded$6 = ["data"];
 var useMedia = function useMedia(id, opts) {
   var api = useMediasApi();
   var loader = useCallback(function () {
@@ -114,7 +119,7 @@ var useMedia = function useMedia(id, opts) {
   }, [api, id]);
   var _useData = useData(loader, opts),
     data = _useData.data,
-    request = _objectWithoutProperties(_useData, _excluded$5);
+    request = _objectWithoutProperties(_useData, _excluded$6);
   return _objectSpread({
     story: data
   }, request);
@@ -161,6 +166,406 @@ var useMediaUpdate = function useMediaUpdate() {
 };
 var useMediaUpdate$1 = useMediaUpdate;
 
+var useMediaDestroy = function useMediaDestroy() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    loading = _useState2[0],
+    setLoading = _useState2[1];
+  var api = useMediasApi();
+  var destroy = useCallback(function (id, data) {
+    setLoading(true);
+    return api["delete"](id, data).then(function (response) {
+      setLoading(false);
+      return response;
+    });
+  }, [api, setLoading]);
+  return {
+    destroy: destroy,
+    loading: loading
+  };
+};
+
+var styles = {"mediaFrame":"panneau-medias-mediaFrame","playButton":"panneau-medias-playButton"};
+
+var propTypes$7 = {
+  value: PropTypes.shape({
+    id: PropTypes.string,
+    type: PropTypes.string
+  }),
+  className: PropTypes.string
+};
+var defaultProps$7 = {
+  value: null,
+  className: null
+};
+function MediaFrame(_ref) {
+  var value = _ref.value,
+    className = _ref.className;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showPlayer = _useState2[0],
+    setShowPlayer = _useState2[1];
+  var _ref2 = value || {},
+    _ref2$type = _ref2.type,
+    type = _ref2$type === void 0 ? null : _ref2$type;
+  var onClick = useCallback(function () {
+    setShowPlayer(!showPlayer);
+  }, [showPlayer, setShowPlayer]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([className, _defineProperty({}, className, className != null)])
+  }, showPlayer ? /*#__PURE__*/React.createElement(MediaPlayer, {
+    value: value
+  }) : /*#__PURE__*/React.createElement(MediaPreview, {
+    value: value,
+    width: "100%"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.playButton
+  }, !showPlayer && (type === 'video' || type === 'embed') ? /*#__PURE__*/React.createElement(Button, {
+    className: "rounded-circle",
+    theme: "secondary",
+    onClick: onClick,
+    icon: "play-fill"
+  }) : null));
+}
+MediaFrame.propTypes = propTypes$7;
+MediaFrame.defaultProps = defaultProps$7;
+
+var defaultMetadata = [{
+  title: /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "3RT69u",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Informations"
+    }]
+  }),
+  items: [{
+    id: 'user',
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "yByaBh",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Added by"
+      }]
+    }),
+    component: 'avatar',
+    path: 'user'
+  }, {
+    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'
+  }]
+}, {
+  title: /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "xKUOLG",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Technical details"
+    }]
+  }),
+  items: [{
+    id: 'format',
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "JuxiUN",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Format"
+      }]
+    }),
+    component: 'unit',
+    format: 'format',
+    path: 'format'
+  }, {
+    id: 'dimensions',
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "rmJBin",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Dimensions"
+      }]
+    }),
+    component: 'unit',
+    format: 'dimensions',
+    path: 'metadata'
+  }, {
+    id: 'size',
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "g2CRt5",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Size"
+      }]
+    }),
+    component: 'unit',
+    format: 'bytes',
+    path: 'metadata.size'
+  }, {
+    id: 'duration',
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "wU++NJ",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Duration"
+      }]
+    }),
+    component: 'unit',
+    format: 'duration',
+    path: 'metadata.duration'
+  }]
+}];
+
+var _excluded$5 = ["label", "path", "component"];
+var propTypes$6 = {
+  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
+  })),
+  className: PropTypes.string
+};
+var defaultProps$6 = {
+  value: null,
+  sections: defaultMetadata,
+  className: null
+};
+function MediaMetadata(_ref) {
+  var sections = _ref.sections,
+    value = _ref.value,
+    className = _ref.className;
+  var displayComponents = useDisplaysComponentsManager();
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(['px-2', _defineProperty({}, className, className !== null)])
+  }, (sections || []).map(function (_ref3, i) {
+    var title = _ref3.title,
+      items = _ref3.items;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "mb-5",
+      key: "section-".concat(i + 1)
+    }, /*#__PURE__*/React.createElement("h6", {
+      className: "px-1"
+    }, title), /*#__PURE__*/React.createElement("ul", {
+      className: "list-group list-group-flush"
+    }, (items || []).map(function (_ref4, index) {
+      var label = _ref4.label,
+        path = _ref4.path,
+        _ref4$component = _ref4.component,
+        component = _ref4$component === void 0 ? null : _ref4$component,
+        props = _objectWithoutProperties(_ref4, _excluded$5);
+      var Component = displayComponents.getComponent(component || 'text');
+      var itemValue = get(value, path, null);
+      return Component !== null && itemValue !== null ? /*#__PURE__*/React.createElement("li", {
+        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
+        }]),
+        key: "item-".concat(index + 1)
+      }, /*#__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$6;
+MediaMetadata.defaultProps = defaultProps$6;
+
+var defaultFields = [
+// { name: 'type', label: 'Type', type: 'string', component: 'text', disabled: true },
+{
+  name: 'name',
+  label: /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "WX83V9",
+    defaultMessage: [{
+      "type": 0,
+      "value": "File name"
+    }]
+  }),
+  type: 'text',
+  component: 'text'
+}, {
+  name: 'description',
+  label: /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "ygNvmz",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Description"
+    }]
+  }),
+  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 propTypes$5 = {
+  value: PropTypes.shape({
+    id: PropTypes.string
+  }),
+  fields: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string
+  })),
+  displays: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string
+  })),
+  onChange: PropTypes.func.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+  onDelete: PropTypes.func,
+  onClose: PropTypes.func,
+  className: PropTypes.string
+};
+var defaultProps$5 = {
+  value: null,
+  fields: defaultFields,
+  displays: null,
+  onClose: null,
+  onDelete: null,
+  className: null
+};
+function MediaForm(_ref) {
+  var initialValue = _ref.value,
+    initialFields = _ref.fields,
+    displays = _ref.displays,
+    onChange = _ref.onChange,
+    onConfirm = _ref.onConfirm;
+    _ref.onDelete;
+    var onClose = _ref.onClose,
+    className = _ref.className;
+  var FieldsComponent = useFieldComponent('fields');
+  var _useMediaUpdate = useMediaUpdate$1(),
+    update = _useMediaUpdate.update,
+    updating = _useMediaUpdate.loading;
+  var _useMediaDestroy = useMediaDestroy(),
+    destroy = _useMediaDestroy.destroy,
+    destroying = _useMediaDestroy.loading;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2);
+    _useState2[0];
+    var setChanged = _useState2[1];
+  var disabled = updating || destroying || initialValue === null;
+  var _ref2 = initialValue || {},
+    _ref2$name = _ref2.name,
+    name = _ref2$name === void 0 ? null : _ref2$name,
+    _ref2$type = _ref2.type,
+    type = _ref2$type === void 0 ? null : _ref2$type;
+  var onChangeMedia = useCallback(function (newValue) {
+    if (onChange !== null) {
+      onChange(newValue);
+    }
+    setChanged(true);
+  }, [onChange, setChanged]);
+  var onMediaSaved = useCallback(function (newValue) {
+    if (onConfirm !== null) {
+      onConfirm(newValue);
+    }
+    setChanged(false);
+  }, [onChange, setChanged]);
+  var onDeleteMedia = useCallback(function () {
+    // Destroy
+    if (onClose !== null) {
+      onClose();
+    }
+    setChanged(false);
+  }, [destroy, setChanged]);
+  var postForm = useCallback(function (action, data) {
+    return initialValue !== null ? update(initialValue.id, data) : new Promise();
+  }, [initialValue, update]);
+  var _useForm = useForm({
+      fields: initialFields,
+      postForm: postForm,
+      onComplete: onMediaSaved,
+      value: initialValue,
+      setValue: onChange
+    }),
+    value = _useForm.value,
+    setValue = _useForm.setValue,
+    fields = _useForm.fields;
+    _useForm.onSubmit;
+    _useForm.status;
+    _useForm.generalError;
+    _useForm.errors;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([className, _defineProperty({}, className, className != null)])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "d-flex w-100 justify-content-between mb-2 pb-2 border-bottom"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", {
+    className: "d-inline"
+  }, name), /*#__PURE__*/React.createElement("span", {
+    className: "mx-2"
+  }, type)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+    className: "me-2",
+    theme: "danger",
+    onClick: onDeleteMedia
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "Bhu3B2",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Delete"
+    }]
+  })), onConfirm !== null ? /*#__PURE__*/React.createElement(Button, {
+    theme: "primary",
+    onClick: onConfirm
+  }, /*#__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",
+    style: {
+      height: 400
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.mediaFrame
+  }, /*#__PURE__*/React.createElement(MediaFrame, {
+    value: value
+  })))), /*#__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
+  })), /*#__PURE__*/React.createElement(MediaMetadata, {
+    className: "mt-5",
+    value: value,
+    displays: displays
+  }))));
+}
+MediaForm.propTypes = propTypes$5;
+MediaForm.defaultProps = defaultProps$5;
+
 var defaultColumns = [{
   id: 'image',
   label: /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -358,8 +763,6 @@ var defaultFilters = [{
   name: 'search'
 }];
 
-var styles = {};
-
 var _excluded$4 = ["page", "count"];
 var propTypes$4 = {
   items: PropTypes$1.medias,
@@ -367,21 +770,25 @@ var propTypes$4 = {
   columns: PropTypes$1.tableColumns,
   query: PropTypes.shape({}),
   baseUrl: PropTypes.string,
-  // fields: PanneauPropTypes.fields,
+  fields: PropTypes$1.fields,
   layout: PropTypes.string,
   layouts: PropTypes.arrayOf(PropTypes.shape({})),
   theme: PropTypes.string,
   tableProps: PropTypes.bool,
+  onSelectItem: PropTypes.func,
+  onItemsChange: PropTypes.func,
+  selectedCount: PropTypes.number,
+  onClearSelected: PropTypes.func,
   className: PropTypes.string
 };
 var defaultProps$4 = {
   items: null,
   filters: defaultFilters,
   columns: defaultColumns,
-  // fields: null,
+  fields: defaultFields,
   query: null,
   baseUrl: null,
-  layout: null,
+  layout: 'table',
   layouts: [{
     id: 'table',
     label: /*#__PURE__*/React.createElement(Icon, {
@@ -395,6 +802,10 @@ var defaultProps$4 = {
   }],
   theme: null,
   tableProps: null,
+  onSelectItem: null,
+  onItemsChange: null,
+  selectedCount: null,
+  onClearSelected: null,
   className: null
 };
 function MediasBrowser(_ref) {
@@ -407,6 +818,10 @@ function MediasBrowser(_ref) {
     layouts = _ref.layouts,
     theme = _ref.theme,
     tableProps = _ref.tableProps,
+    onSelectItem = _ref.onSelectItem,
+    onItemsChange = _ref.onItemsChange,
+    selectedCount = _ref.selectedCount,
+    onClearSelected = _ref.onClearSelected,
     className = _ref.className;
   var baseQuery = useMemo(function () {
     return initialQuery;
@@ -442,6 +857,11 @@ function MediasBrowser(_ref) {
     loading = _useMedias.loading,
     lastPage = _useMedias.lastPage,
     total = _useMedias.total;
+  useEffect(function () {
+    if (onItemsChange !== null) {
+      onItemsChange(items);
+    }
+  }, [items, onItemsChange]);
   var _useState = useState(initialLayout || 'grid'),
     _useState2 = _slicedToArray(_useState, 2),
     layout = _useState2[0],
@@ -452,9 +872,49 @@ function MediasBrowser(_ref) {
   var onClickLayout = useCallback(function (lay) {
     setLayout(lay);
   }, [setLayout]);
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    media = _useState4[0],
+    setMedia = _useState4[1];
+  var onOpenMedia = useCallback(function (currentMedia) {
+    setMedia(currentMedia);
+  }, [setMedia]);
+  var onCloseMedia = useCallback(function () {
+    setMedia(null);
+  }, [setMedia]);
+  var pagination = /*#__PURE__*/React.createElement(Pagination, {
+    page: page,
+    lastPage: lastPage,
+    total: total,
+    url: baseUrl,
+    query: query,
+    onClickPage: onPageChange,
+    theme: theme,
+    loading: loading,
+    selectedCount: selectedCount,
+    onClearSelected: onClearSelected,
+    withPreviousNext: true,
+    alwaysShowButtons: true
+  });
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, className])
-  }, /*#__PURE__*/React.createElement(Filters, {
+  }, media !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "mt-2 mb-4"
+  }, /*#__PURE__*/React.createElement(Button, {
+    theme: "primary",
+    outline: true,
+    onClick: onCloseMedia,
+    icon: "arrow-left"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "ac4218",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Back to files"
+    }]
+  }))), /*#__PURE__*/React.createElement(MediaForm, {
+    value: media,
+    onClose: onCloseMedia
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Filters, {
     value: query,
     filters: filters,
     onChange: onQueryChange,
@@ -478,44 +938,30 @@ function MediasBrowser(_ref) {
         className: 'px-3'
       });
     })
-  }) : null, /*#__PURE__*/React.createElement(Pagination, {
-    page: page,
-    lastPage: lastPage,
-    total: total,
-    url: baseUrl,
-    query: query,
-    onClickPage: onPageChange,
-    theme: theme,
-    loading: loading,
-    withPreviousNext: true,
-    alwaysShowButtons: true
-  })), layout === 'grid' ? /*#__PURE__*/React.createElement(Grid, Object.assign({}, tableProps, {
+  }) : null, pagination), layout === 'grid' ? /*#__PURE__*/React.createElement(Grid, Object.assign({}, tableProps, {
+    size: "xsmall",
     items: items || [],
     component: MediaCard,
     componentProps: {
       className: 'd-flex w-100',
-      cardClassName: 'flex-grow-1'
+      cardClassName: 'flex-grow-1',
+      vertical: true
+    },
+    onSelectItem: onSelectItem !== null ? onSelectItem : function (it) {
+      return onOpenMedia(it);
     }
-  })) : /*#__PURE__*/React.createElement(Table, Object.assign({}, tableProps, {
+  })) : null, layout === 'table' ? /*#__PURE__*/React.createElement(Table, Object.assign({}, tableProps, {
     columns: columns,
     items: items,
     displayPlaceholder: /*#__PURE__*/React.createElement("span", {
       className: "text-secondary text-opacity-75"
-    }, "\u2014")
-  })), /*#__PURE__*/React.createElement("div", {
+    }, "\u2014"),
+    onSelectItem: onSelectItem !== null ? onSelectItem : function (it) {
+      return onOpenMedia(it);
+    }
+  })) : null, /*#__PURE__*/React.createElement("div", {
     className: classNames(['d-flex', 'mt-3', 'mb-1', 'justify-content-end'])
-  }, /*#__PURE__*/React.createElement(Pagination, {
-    page: page,
-    lastPage: lastPage,
-    total: total,
-    url: baseUrl,
-    query: query,
-    onClickPage: onPageChange,
-    theme: theme,
-    loading: loading,
-    withPreviousNext: true,
-    alwaysShowButtons: true
-  })));
+  }, pagination)));
 }
 MediasBrowser.propTypes = propTypes$4;
 MediasBrowser.defaultProps = defaultProps$4;
@@ -537,46 +983,75 @@ function MediasBrowserContainer(_ref) {
 MediasBrowserContainer.propTypes = propTypes$3;
 MediasBrowserContainer.defaultProps = defaultProps$3;
 
-var _excluded$2 = ["value", "onChange", "onConfirm", "onClose", "multiple", "className"];
+var _excluded$2 = ["value", "selectedItems", "onChange", "onConfirm", "onClose", "multiple", "withoutButtons", "className"];
 var propTypes$2 = {
   // eslint-disable-next-line react/forbid-prop-types
-  value: PropTypes.any,
+  value: PropTypes.arrayOf(PropTypes.shape({})),
+  selectedItems: PropTypes.arrayOf(PropTypes.shape({})),
   onChange: PropTypes.func.isRequired,
   onConfirm: PropTypes.func.isRequired,
   onClose: PropTypes.func,
   multiple: PropTypes.bool,
+  withoutButtons: PropTypes.bool,
   className: PropTypes.string
 };
 var defaultProps$2 = {
   value: null,
+  selectedItems: null,
   onClose: null,
   multiple: false,
+  withoutButtons: false,
   className: null
 };
 function MediasPicker(_ref) {
   var value = _ref.value,
+    initialSelectedItems = _ref.selectedItems,
     onChange = _ref.onChange,
     onConfirm = _ref.onConfirm,
     onClose = _ref.onClose,
     multiple = _ref.multiple,
+    withoutButtons = _ref.withoutButtons,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$2);
-  var onSelectionChange = useCallback(function (items) {
-    if (onChange !== null) {
-      onChange(items);
-    }
-  }, [onChange]);
+  var _useState = useState(value),
+    _useState2 = _slicedToArray(_useState, 2),
+    items = _useState2[0],
+    setItems = _useState2[1];
+  var onItemsChange = useCallback(function (pageItems) {
+    setItems(pageItems);
+  }, [setItems]);
   var disabled = value === null || value.length < 1;
+  var _useItemSelection = useItemSelection({
+      items: items,
+      selectedItems: initialSelectedItems,
+      onSelectionChange: onChange,
+      multipleSelection: multiple
+    }),
+    onSelectItem = _useItemSelection.onSelectItem,
+    onSelectPage = _useItemSelection.onSelectPage,
+    onClearSelected = _useItemSelection.onClearSelected,
+    pageSelected = _useItemSelection.pageSelected,
+    selectedCount = _useItemSelection.selectedCount,
+    selectedItems = _useItemSelection.selectedItems;
   return /*#__PURE__*/React.createElement("div", {
     className: className
   }, /*#__PURE__*/React.createElement(MediasBrowser, Object.assign({
     tableProps: {
       selectable: true,
       multipleSelection: multiple,
-      onSelectionChange: onSelectionChange
-    }
-  }, props)), multiple ? /*#__PURE__*/React.createElement("div", {
+      onSelectItem: onSelectItem,
+      onSelectPage: onSelectPage,
+      selectedItems: selectedItems,
+      pageSelected: pageSelected
+    },
+    onSelectItem: onSelectItem,
+    onItemsChange: onItemsChange,
+    selectedCount: selectedCount,
+    onClearSelected: onClearSelected
+  }, props)), multiple && !withoutButtons ? /*#__PURE__*/React.createElement("div", {
     className: "d-flex w-100 align-items-end justify-content-end mt-3"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "btn-group"
   }, onClose !== null ? /*#__PURE__*/React.createElement(Button, {
     type: "button",
     theme: "secondary",
@@ -596,12 +1071,12 @@ function MediasPicker(_ref) {
     outline: disabled,
     className: "d-block"
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "UaVu03",
+    id: "rvOVCV",
     defaultMessage: [{
       "type": 0,
-      "value": "Confirm"
+      "value": "Confirm selection"
     }]
-  }))) : null);
+  })))) : null);
 }
 MediasPicker.propTypes = propTypes$2;
 MediasPicker.defaultProps = defaultProps$2;
@@ -685,4 +1160,4 @@ function MediasResourceBrowser(_ref) {
 MediasResourceBrowser.propTypes = propTypes;
 MediasResourceBrowser.defaultProps = defaultProps;
 
-export { MediasApiProvider, MediasBrowser, MediasPicker, MediasPickerContainer, MediasResourceBrowser, apiPropTypes, MediasBrowserContainer as default, 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, MediasPicker, MediasPickerContainer, MediasResourceBrowser, apiPropTypes, MediasBrowserContainer as default, useMedia$1 as useMedia, useMediaCreate$1 as useMediaCreate, useMediaUpdate$1 as useMediaUpdate, useMedias$1 as useMedias, useMediasApi, useMediasRecent$1 as useMediasRecentSearches };