@panneau/medias 3.0.261 → 3.0.263

package/es/index.js

@@ -0,0 +1,1757 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React, { useContext, useMemo, useCallback, useState, useEffect } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useFieldComponent, usePanneauResource } from '@panneau/core/contexts';
+import { useForm, useQuery } from '@panneau/core/hooks';
+import Button from '@panneau/element-button';
+import Form from '@panneau/element-form';
+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 _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import isArray from 'lodash/isArray';
+import uniqBy from 'lodash/uniqBy';
+import { PropTypes as PropTypes$1 } from '@panneau/core';
+import Buttons from '@panneau/element-buttons';
+import Grid from '@panneau/element-grid';
+import Icon from '@panneau/element-icon';
+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 { useItemsStore, useData, useApi } from '@panneau/data';
+
+/* eslint-disable react/jsx-props-no-spreading */
+var MediasApiContext = /*#__PURE__*/React.createContext(null);
+var useMediasApi = function useMediasApi() {
+  return useContext(MediasApiContext);
+};
+var apiPropTypes = PropTypes.shape({
+  get: PropTypes.func.isRequired,
+  getTrashed: PropTypes.func.isRequired,
+  create: PropTypes.func.isRequired,
+  find: PropTypes.func.isRequired,
+  update: PropTypes.func.isRequired,
+  trash: PropTypes.func.isRequired,
+  restore: PropTypes.func.isRequired,
+  "delete": PropTypes.func.isRequired
+});
+var propTypes$9 = {
+  api: apiPropTypes,
+  children: PropTypes.node.isRequired
+};
+var defaultProps$9 = {
+  api: null
+};
+function MediasApiProvider(_ref) {
+  var providedApi = _ref.api,
+    children = _ref.children;
+  var previousApi = useMediasApi();
+  var api = useMemo(function () {
+    return providedApi || previousApi;
+  }, [providedApi, previousApi]);
+  return /*#__PURE__*/React.createElement(MediasApiContext.Provider, {
+    value: api
+  }, children);
+}
+MediasApiProvider.propTypes = propTypes$9;
+MediasApiProvider.defaultProps = defaultProps$9;
+
+var _excluded$7 = ["items"];
+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;
+  var count = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+  var opts = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  var api = useMediasApi();
+  var trashed = useMemo(function () {
+    var _ref = opts || {},
+      _ref$trashed = _ref.trashed,
+      trashedOpt = _ref$trashed === void 0 ? false : _ref$trashed;
+    return trashedOpt;
+  }, [opts]);
+  var finalQuery = useMemo(function () {
+    return _objectSpread(_objectSpread({}, query), {}, {
+      trashed: trashed
+    });
+  }, [query, trashed]);
+  var getItems = useCallback(function () {
+    var requestedPage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    return trashed ? api.getTrashed(query, requestedPage, count) : api.get(query, requestedPage, count);
+  }, [api, query, count, trashed]);
+  var _useItemsStore = useItemsStore('medias', _objectSpread({
+      getPage: page !== null ? getItems : null,
+      getItems: page === null ? getItems : null,
+      page: page,
+      count: count,
+      query: finalQuery
+    }, opts)),
+    items = _useItemsStore.items,
+    props = _objectWithoutProperties(_useItemsStore, _excluded$7);
+  return _objectSpread({
+    items: items
+  }, props);
+};
+var useMedias$1 = useMedias;
+
+var _excluded$6 = ["data"];
+var useMedia = function useMedia(id, opts) {
+  var api = useMediasApi();
+  var loader = useCallback(function () {
+    return api.find(id);
+  }, [api, id]);
+  var _useData = useData(loader, opts),
+    data = _useData.data,
+    request = _objectWithoutProperties(_useData, _excluded$6);
+  return _objectSpread({
+    story: data
+  }, request);
+};
+var useMedia$1 = useMedia;
+
+var useMediaCreate = function useMediaCreate() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    creating = _useState2[0],
+    setCreating = _useState2[1];
+  var api = useMediasApi();
+  var create = useCallback(function (data) {
+    setCreating(true);
+    return api.create(data).then(function (response) {
+      setCreating(false);
+      return response;
+    });
+  }, [api, setCreating]);
+  return {
+    create: create,
+    creating: creating
+  };
+};
+var useMediaCreate$1 = useMediaCreate;
+
+var useMediaUpdate = function useMediaUpdate() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    updating = _useState2[0],
+    setUpdating = _useState2[1];
+  var api = useMediasApi();
+  var update = useCallback(function (id, data) {
+    setUpdating(true);
+    return api.update(id, data).then(function (response) {
+      setUpdating(false);
+      return response;
+    });
+  }, [api, setUpdating]);
+  return {
+    update: update,
+    updating: updating
+  };
+};
+var useMediaUpdate$1 = useMediaUpdate;
+
+var useMediaDelete = function useMediaDelete() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    deleting = _useState2[0],
+    setDeleting = _useState2[1];
+  var api = useMediasApi();
+  var mediaDelete = useCallback(function (id, data) {
+    setDeleting(true);
+    return api["delete"](id, data).then(function (response) {
+      setDeleting(false);
+      return response;
+    });
+  }, [api, setDeleting]);
+  return {
+    mediaDelete: mediaDelete,
+    deleting: deleting
+  };
+};
+var useMediaDelete$1 = useMediaDelete;
+
+var useMediaTrash = function useMediaTrash() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    trashing = _useState2[0],
+    setTrashing = _useState2[1];
+  var api = useMediasApi();
+  var mediaTrash = useCallback(function (id, data) {
+    setTrashing(true);
+    return api.trash(id, data).then(function (response) {
+      setTrashing(false);
+      return response;
+    });
+  }, [api, setTrashing]);
+  return {
+    mediaTrash: mediaTrash,
+    trashing: trashing
+  };
+};
+var useMediaTrash$1 = useMediaTrash;
+
+var useMediaRestore = function useMediaRestore() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    restoring = _useState2[0],
+    setRestoring = _useState2[1];
+  var api = useMediasApi();
+  var mediaRestore = useCallback(function (id, data) {
+    setRestoring(true);
+    return api.restore(id, data).then(function (response) {
+      setRestoring(false);
+      return response;
+    });
+  }, [api, setRestoring]);
+  return {
+    mediaRestore: mediaRestore,
+    restoring: restoring
+  };
+};
+var useMediaRestore$1 = useMediaRestore;
+
+var useMediaReplace = function useMediaReplace() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    replacing = _useState2[0],
+    setReplacing = _useState2[1];
+  var api = useMediasApi();
+  var mediaReplace = useCallback(function (id, data) {
+    setReplacing(true);
+    return api.replace(id, data).then(function (response) {
+      setReplacing(false);
+      return response;
+    });
+  }, [api, setReplacing]);
+  return {
+    mediaReplace: mediaReplace,
+    replacing: replacing
+  };
+};
+var useMediaReplace$1 = useMediaReplace;
+
+var styles = {"mediaFrame":"panneau-medias-mediaFrame","playButton":"panneau-medias-playButton"};
+
+var propTypes$8 = {
+  value: PropTypes.shape({
+    id: PropTypes.string,
+    type: PropTypes.string
+  }),
+  showPlayer: PropTypes.bool,
+  className: PropTypes.string
+};
+var defaultProps$8 = {
+  value: null,
+  showPlayer: true,
+  className: null
+};
+function MediaFrame(_ref) {
+  var value = _ref.value,
+    initialShowPlayer = _ref.showPlayer,
+    className = _ref.className;
+  var _useState = useState(initialShowPlayer),
+    _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([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
+  }));
+}
+MediaFrame.propTypes = propTypes$8;
+MediaFrame.defaultProps = defaultProps$8;
+
+var defaultFields = [{
+  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'
+},
+// Creatable example
+// {
+//     name: 'tags',
+//     label: <FormattedMessage defaultMessage="Tags" description="Field name" />,
+//     type: 'array',
+//     component: 'select',
+//     requestUrl: '/api/tags',
+//     optionLabelPath: 'label',
+//     optionValuePath: 'id', // Uses taggable so change the logic here
+//     valueIsOption: true,
+//     multiple: true,
+//     paginated: false,
+//     creatable: true, // TODO
+// },
+{
+  id: 'info',
+  component: 'fields',
+  label: /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "3RT69u",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Informations"
+    }]
+  }),
+  isList: true,
+  hideWithoutValue: true,
+  fields: [{
+    id: 'user',
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "yByaBh",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Added by"
+      }]
+    }),
+    type: 'display',
+    display: 'avatar',
+    name: 'user',
+    horizontal: true
+  }, {
+    id: 'created_at',
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "PN+75e",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Created at"
+      }]
+    }),
+    type: 'display',
+    display: 'date',
+    name: 'created_at',
+    format: 'yyyy-MM-dd hh:ss',
+    horizontal: true
+  }]
+}, {
+  id: 'technical',
+  component: 'fields',
+  label: /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "xKUOLG",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Technical details"
+    }]
+  }),
+  isList: true,
+  hideWithoutValue: true,
+  fields: [{
+    id: 'format',
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "JuxiUN",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Format"
+      }]
+    }),
+    type: 'display',
+    display: 'unit',
+    format: 'format',
+    name: 'format',
+    horizontal: true
+  }, {
+    id: 'dimensions',
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "rmJBin",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Dimensions"
+      }]
+    }),
+    type: 'display',
+    display: 'unit',
+    format: 'dimensions',
+    name: 'metadata',
+    horizontal: true
+  }, {
+    id: 'size',
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "g2CRt5",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Size"
+      }]
+    }),
+    type: 'display',
+    display: 'unit',
+    format: 'bytes',
+    name: 'metadata.size',
+    horizontal: true
+  }, {
+    id: 'duration',
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "wU++NJ",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Duration"
+      }]
+    }),
+    type: 'display',
+    display: 'unit',
+    format: 'duration',
+    name: 'metadata.duration',
+    horizontal: true
+  }]
+}];
+
+var propTypes$7 = {
+  value: PropTypes.shape({
+    id: PropTypes.string
+  }),
+  fields: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string
+  })),
+  onChange: PropTypes.func,
+  onSave: PropTypes.func,
+  onReplace: PropTypes.func,
+  onDelete: PropTypes.func,
+  onClose: PropTypes.func,
+  withDelete: PropTypes.bool,
+  withTrash: PropTypes.bool,
+  withReplace: PropTypes.bool,
+  className: PropTypes.string,
+  children: PropTypes.node
+};
+var defaultProps$7 = {
+  value: null,
+  fields: defaultFields,
+  onChange: null,
+  onSave: null,
+  onReplace: null,
+  onDelete: null,
+  onClose: null,
+  withDelete: false,
+  withTrash: false,
+  withReplace: false,
+  className: null,
+  children: null
+};
+function MediaForm(_ref) {
+  var initialValue = _ref.value,
+    initialFields = _ref.fields,
+    onChange = _ref.onChange,
+    onSave = _ref.onSave,
+    onReplace = _ref.onReplace,
+    onDelete = _ref.onDelete,
+    onClose = _ref.onClose,
+    withDelete = _ref.withDelete,
+    withTrash = _ref.withTrash,
+    withReplace = _ref.withReplace,
+    className = _ref.className,
+    children = _ref.children;
+  var FieldsComponent = useFieldComponent('fields');
+  var _useMediaUpdate = useMediaUpdate$1(),
+    update = _useMediaUpdate.update,
+    updating = _useMediaUpdate.updating;
+  var _useMediaTrash = useMediaTrash$1(),
+    mediaTrash = _useMediaTrash.mediaTrash,
+    trashing = _useMediaTrash.trashing;
+  var _useMediaDelete = useMediaDelete$1(),
+    mediaDelete = _useMediaDelete.mediaDelete,
+    deleting = _useMediaDelete.deleting;
+  var _useMediaReplace = useMediaReplace$1(),
+    mediaReplace = _useMediaReplace.mediaReplace,
+    replacing = _useMediaReplace.replacing;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    changed = _useState2[0],
+    setChanged = _useState2[1];
+  var disabled = updating || deleting || trashing || 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,
+    _ref2$deletedAt = _ref2.deletedAt,
+    deletedAt = _ref2$deletedAt === void 0 ? null : _ref2$deletedAt;
+  var onChangeMedia = useCallback(function (newValue) {
+    if (onChange !== null) {
+      onChange(newValue);
+    }
+    setChanged(true);
+  }, [onChange, setChanged]);
+  var onMediaSaved = useCallback(function (newValue) {
+    if (onSave !== null) {
+      onSave(newValue);
+    }
+    setChanged(false);
+  }, [onChange, setChanged]);
+  var onDeleteMedia = useCallback(function () {
+    var _ref3 = initialValue || {},
+      _ref3$id = _ref3.id,
+      id = _ref3$id === void 0 ? null : _ref3$id;
+    if (withTrash && deletedAt !== null) {
+      mediaTrash(id, initialValue).then(function () {
+        if (onDelete !== null) {
+          onDelete();
+        }
+        setChanged(false);
+        if (onClose !== null) {
+          onClose();
+        }
+      });
+    } else {
+      // Destroy
+      mediaDelete(id, initialValue).then(function () {
+        if (onDelete !== null) {
+          onDelete();
+        }
+        setChanged(false);
+        if (onClose !== null) {
+          onClose();
+        }
+      });
+    }
+  }, [initialValue, mediaDelete, mediaTrash, deletedAt, setChanged, onDelete, withTrash]);
+  var onUploadComplete = useCallback(function (data) {
+    var _ref4 = initialValue || {},
+      _ref4$id = _ref4.id,
+      id = _ref4$id === void 0 ? null : _ref4$id;
+    mediaReplace(id, data).then(onReplace);
+  }, [initialValue, onReplace]);
+  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: onChangeMedia,
+      disabled: updating
+    }),
+    value = _useForm.value,
+    setValue = _useForm.setValue,
+    fields = _useForm.fields,
+    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,
+    addButtonLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "GxOBVL",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Replace"
+      }]
+    }),
+    onUploadComplete: 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)));
+}
+MediaForm.propTypes = propTypes$7;
+MediaForm.defaultProps = defaultProps$7;
+
+var MediaContext = /*#__PURE__*/React.createContext(null);
+var useCurrentMedia = function useCurrentMedia() {
+  return useContext(MediaContext);
+};
+var propTypes$6 = {
+  media: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  }),
+  children: PropTypes.node.isRequired
+};
+var defaultProps$6 = {
+  media: null
+};
+function MediaProvider(_ref) {
+  var providedMedia = _ref.media,
+    children = _ref.children;
+  var _useState = useState(providedMedia),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentMedia = _useState2[0],
+    setCurrentMedia = _useState2[1];
+  var values = useMemo(function () {
+    return {
+      currentMedia: currentMedia,
+      setCurrentMedia: setCurrentMedia
+    };
+  }, [currentMedia, setCurrentMedia]);
+  return /*#__PURE__*/React.createElement(MediaContext.Provider, {
+    value: values
+  }, children);
+}
+MediaProvider.propTypes = propTypes$6;
+MediaProvider.defaultProps = defaultProps$6;
+
+var defaultColumns = [{
+  id: 'image',
+  label: /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "UbxbKP",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Preview"
+    }]
+  }),
+  component: 'image',
+  path: 'thumbnail_url',
+  sortable: false
+}, {
+  id: 'name',
+  label: /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "WX83V9",
+    defaultMessage: [{
+      "type": 0,
+      "value": "File name"
+    }]
+  }),
+  component: 'text-description',
+  path: 'name',
+  descriptionPath: 'type',
+  descriptionValues: {
+    image: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "AwDQvD",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Image"
+      }]
+    }),
+    video: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "mQiyAm",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Video"
+      }]
+    }),
+    audio: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "XnyI69",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Audio"
+      }]
+    }),
+    document: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "1dqmFw",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Document"
+      }]
+    })
+  },
+  sortable: true
+}, {
+  id: 'dimensions',
+  label: /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "eCe9ZY",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Dimensions"
+    }]
+  }),
+  component: 'unit',
+  format: 'dimensions',
+  path: 'metadata'
+}, {
+  id: 'size',
+  label: /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "c3hu9o",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Size"
+    }]
+  }),
+  component: 'unit',
+  format: 'bytes',
+  path: 'metadata.size'
+}, {
+  id: 'duration',
+  label: /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "002oWQ",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Duration"
+    }]
+  }),
+  component: 'unit',
+  format: 'duration',
+  path: 'metadata.duration'
+},
+// {
+//     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: "OzYWZz",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Created at"
+    }]
+  }),
+  component: 'date',
+  path: 'created_at',
+  format: 'yyyy-MM-dd hh:ss',
+  sortable: true
+}, {
+  id: 'actions',
+  label: /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "rtwfuZ",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Actions"
+    }]
+  }),
+  actions: ['edit', 'delete']
+  // component: ItemActions,
+  // label: 'Edit',
+  // url: '/edit/1',
+}
+// {
+//     id: 'status',
+//     label: <FormattedMessage defaultMessage="Status" description="Field name" />,
+//     component: 'text',
+//     path: 'metadata.status',
+// },
+];
+
+var defaultFilters = [{
+  id: 'search',
+  component: 'search',
+  name: 'search',
+  width: 220
+}, {
+  id: 'types',
+  component: 'select',
+  name: 'types',
+  placeholder: /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "9/t5wK",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Type"
+    }]
+  }),
+  options: [{
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "yHAmDD",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Image"
+      }]
+    }),
+    value: 'image'
+  }, {
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "xSERPA",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Video"
+      }]
+    }),
+    value: 'video'
+  }, {
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "yQRtgx",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Audio"
+      }]
+    }),
+    value: 'audio'
+  }, {
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "8INLfU",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Document"
+      }]
+    }),
+    value: 'document'
+  }],
+  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,
+// },
+];
+
+var _excluded$5 = ["page", "count"],
+  _excluded2 = ["types", "trashed"];
+var propTypes$5 = {
+  items: PropTypes$1.medias,
+  extraItems: PropTypes$1.medias,
+  types: PropTypes.arrayOf(PropTypes.string),
+  permissions: PropTypes.shape({
+    create: PropTypes.bool,
+    edit: PropTypes.bool,
+    "delete": PropTypes.bool
+  }),
+  filters: PropTypes$1.filters,
+  columns: PropTypes$1.tableColumns,
+  query: PropTypes.shape({}),
+  baseUrl: PropTypes.string,
+  fields: PropTypes$1.fields,
+  layout: PropTypes.string,
+  layouts: PropTypes.arrayOf(PropTypes.shape({})),
+  theme: PropTypes.string,
+  onMediaUploaded: PropTypes.func,
+  onItemsChange: PropTypes.func,
+  onLayoutChange: PropTypes.func,
+  onMediaFormOpen: PropTypes.func,
+  onMediaFormClose: PropTypes.func,
+  selectable: PropTypes.bool,
+  selectedItems: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.arrayOf(PropTypes.shape({}))]),
+  onSelectionChange: PropTypes.func,
+  multipleSelection: PropTypes.bool,
+  uppyConfig: PropTypes.shape({}),
+  withDelete: PropTypes.bool,
+  withTrash: PropTypes.bool,
+  withReplace: PropTypes.bool,
+  withStickySelection: PropTypes.bool,
+  withoutUpload: PropTypes.bool,
+  className: PropTypes.string,
+  formChildren: PropTypes.node
+};
+var defaultProps$5 = {
+  items: null,
+  extraItems: null,
+  types: null,
+  permissions: null,
+  filters: defaultFilters,
+  columns: defaultColumns,
+  fields: defaultFields,
+  query: null,
+  baseUrl: null,
+  layout: 'table',
+  layouts: [{
+    id: 'table',
+    label: /*#__PURE__*/React.createElement(Icon, {
+      name: "table"
+    })
+  }, {
+    id: 'grid',
+    label: /*#__PURE__*/React.createElement(Icon, {
+      name: "grid"
+    })
+  }],
+  theme: null,
+  onMediaUploaded: null,
+  onItemsChange: null,
+  onLayoutChange: null,
+  onMediaFormOpen: null,
+  onMediaFormClose: null,
+  selectable: false,
+  selectedItems: null,
+  onSelectionChange: null,
+  multipleSelection: false,
+  uppyConfig: null,
+  withDelete: false,
+  withTrash: false,
+  withReplace: false,
+  withStickySelection: false,
+  withoutUpload: false,
+  className: null,
+  formChildren: null
+};
+function MediasBrowser(_ref) {
+  var initialItems = _ref.items,
+    extraItems = _ref.extraItems,
+    types = _ref.types,
+    permissions = _ref.permissions,
+    baseUrl = _ref.baseUrl,
+    filters = _ref.filters,
+    columns = _ref.columns,
+    fields = _ref.fields,
+    initialQuery = _ref.query,
+    initialLayout = _ref.layout,
+    layouts = _ref.layouts,
+    theme = _ref.theme,
+    onMediaUploaded = _ref.onMediaUploaded,
+    onItemsChange = _ref.onItemsChange,
+    onLayoutChange = _ref.onLayoutChange,
+    onMediaFormOpen = _ref.onMediaFormOpen,
+    onMediaFormClose = _ref.onMediaFormClose,
+    selectable = _ref.selectable,
+    selectedItems = _ref.selectedItems,
+    onSelectionChange = _ref.onSelectionChange,
+    multipleSelection = _ref.multipleSelection,
+    uppyConfig = _ref.uppyConfig,
+    withDelete = _ref.withDelete,
+    withTrash = _ref.withTrash,
+    withReplace = _ref.withReplace,
+    withStickySelection = _ref.withStickySelection,
+    withoutUpload = _ref.withoutUpload,
+    className = _ref.className,
+    formChildren = _ref.formChildren;
+  var _useState = useState(initialItems || null),
+    _useState2 = _slicedToArray(_useState, 1),
+    baseItems = _useState2[0];
+  var baseQuery = useMemo(function () {
+    return _objectSpread(_objectSpread({
+      count: 12
+    }, initialQuery), types !== null ? {
+      types: types
+    } : null);
+  }, [initialQuery, types]);
+  var _useQuery = useQuery(baseQuery),
+    fullQuery = _useQuery.query,
+    onPageChange = _useQuery.onPageChange,
+    onQueryChange = _useQuery.onQueryChange,
+    onQueryReset = _useQuery.onQueryReset;
+  var _useMemo = useMemo(function () {
+      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,
+        query: params
+      };
+    }, [fullQuery]),
+    _useMemo$page = _useMemo.page,
+    page = _useMemo$page === void 0 ? null : _useMemo$page,
+    _useMemo$count = _useMemo.count,
+    count = _useMemo$count === void 0 ? null : _useMemo$count,
+    _useMemo$query = _useMemo.query,
+    query = _useMemo$query === void 0 ? null : _useMemo$query;
+  var _ref3 = permissions || {},
+    _ref3$create = _ref3.create,
+    canCreate = _ref3$create === void 0 ? true : _ref3$create,
+    _ref3$edit = _ref3.edit,
+    canEdit = _ref3$edit === void 0 ? true : _ref3$edit,
+    _ref3$delete = _ref3["delete"],
+    canDelete = _ref3$delete === void 0 ? true : _ref3$delete;
+  var canUpload = canCreate && !withoutUpload;
+
+  // eslint-disable-next-line no-unused-vars
+  var _ref4 = query || {};
+    _ref4.types;
+    var _ref4$trashed = _ref4.trashed,
+    trashed = _ref4$trashed === void 0 ? null : _ref4$trashed,
+    queryWithoutTypes = _objectWithoutProperties(_ref4, _excluded2);
+  var _useMediaTrash = useMediaTrash$1(),
+    mediaTrash = _useMediaTrash.mediaTrash,
+    trashing = _useMediaTrash.trashing;
+  var _useMediaDelete = useMediaDelete$1(),
+    mediaDelete = _useMediaDelete.mediaDelete,
+    deleting = _useMediaDelete.deleting;
+  var _useMediaRestore = useMediaRestore$1(),
+    mediaRestore = _useMediaRestore.mediaRestore;
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showTrashed = _useState4[0],
+    setShowTrashed = _useState4[1];
+  var _useMedias = useMedias$1(query, page, count, {
+      items: baseItems,
+      trashed: showTrashed
+    }),
+    items = _useMedias.items,
+    allItems = _useMedias.allItems,
+    _useMedias$loading = _useMedias.loading,
+    loading = _useMedias$loading === void 0 ? false : _useMedias$loading,
+    _useMedias$loaded = _useMedias.loaded,
+    loaded = _useMedias$loaded === void 0 ? false : _useMedias$loaded,
+    _useMedias$updateItem = _useMedias.updateItem,
+    updateItem = _useMedias$updateItem === void 0 ? null : _useMedias$updateItem,
+    _useMedias$pagination = _useMedias.pagination,
+    _useMedias$pagination2 = _useMedias$pagination === void 0 ? {} : _useMedias$pagination,
+    lastPage = _useMedias$pagination2.lastPage,
+    total = _useMedias$pagination2.total,
+    _useMedias$pages = _useMedias.pages,
+    pages = _useMedias$pages === void 0 ? null : _useMedias$pages,
+    reload = _useMedias.reload;
+  var onClickTrash = useCallback(function () {
+    setShowTrashed(!showTrashed);
+  }, [showTrashed, setShowTrashed]);
+
+  // dirty fix to bypass global query caching
+  useEffect(function () {
+    reload();
+  }, [showTrashed]);
+  useEffect(function () {
+    if (onItemsChange !== null) {
+      onItemsChange(items);
+    }
+  }, [items, onItemsChange]);
+  var _useState5 = useState(initialLayout || 'table'),
+    _useState6 = _slicedToArray(_useState5, 2),
+    layout = _useState6[0],
+    setLayout = _useState6[1];
+  var hasLayouts = useMemo(function () {
+    return layouts !== null && layouts.length > 1;
+  }, [layouts]);
+  var onClickLayout = useCallback(function (newLayout) {
+    setLayout(newLayout);
+    if (onLayoutChange !== null) {
+      onLayoutChange(newLayout);
+    }
+  }, [setLayout]);
+  var _useCurrentMedia = useCurrentMedia(),
+    currentMedia = _useCurrentMedia.currentMedia,
+    setCurrentMedia = _useCurrentMedia.setCurrentMedia;
+  useEffect(function () {
+    if (currentMedia !== null && onMediaFormOpen !== null) {
+      onMediaFormOpen();
+    }
+    if (currentMedia === null && onMediaFormClose !== null) {
+      onMediaFormClose();
+    }
+  }, [currentMedia]);
+  var onOpenMedia = useCallback(function (media) {
+    setCurrentMedia(media);
+  }, [setCurrentMedia]);
+  var onCloseMedia = useCallback(function () {
+    setCurrentMedia(null);
+  }, [setCurrentMedia]);
+  var onSaveMedia = useCallback(function (item) {
+    setCurrentMedia(null);
+    updateItem(item);
+  }, [setCurrentMedia, updateItem]);
+  var onDeleteMedia = useCallback(function () {
+    if (reload !== null) {
+      reload();
+    }
+  }, [reload]);
+  var onTrashMedia = useCallback(function (id) {
+    return !showTrashed && withTrash ? mediaTrash(id).then(function () {
+      if (!multipleSelection) {
+        var _ref5 = selectedItems || {},
+          _ref5$id = _ref5.id,
+          selectedId = _ref5$id === void 0 ? null : _ref5$id;
+        if (selectedId !== null && selectedId === id) {
+          onSelectionChange(null);
+        }
+      }
+      // Todo remove from mult selection
+    }).then(reload) : mediaDelete(id).then(function () {
+      if (!multipleSelection) {
+        var _ref6 = selectedItems || {},
+          _ref6$id = _ref6.id,
+          selectedId = _ref6$id === void 0 ? null : _ref6$id;
+        if (selectedId !== null && selectedId === id) {
+          onSelectionChange(null);
+        }
+      }
+      // Todo remove from selection
+    }).then(reload);
+  }, [showTrashed, withTrash, mediaTrash, mediaDelete, reload, selectedItems, multipleSelection, onSelectionChange]);
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    uploadedMedias = _useState8[0],
+    setUploadedMedias = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    uploadProcessing = _useState10[0],
+    setUploadProcessing = _useState10[1];
+  var onUploadedMediaChanged = useCallback(function (newMedias) {
+    var uploadedNewMedias = (isArray(newMedias) ? [].concat(_toConsumableArray(newMedias), _toConsumableArray(uploadedMedias || [])) : [newMedias].concat(_toConsumableArray(uploadedMedias || []))).filter(function (it) {
+      return it !== null;
+    });
+    setUploadedMedias(uploadedNewMedias);
+    if (onSelectionChange !== null) {
+      var _ref7 = newMedias || [],
+        _ref8 = _slicedToArray(_ref7, 1),
+        _ref8$ = _ref8[0],
+        firstMedia = _ref8$ === void 0 ? null : _ref8$;
+      onSelectionChange(multipleSelection && isArray(newMedias) ? newMedias : firstMedia);
+      onQueryReset();
+      reload().then(function () {
+        setUploadedMedias(null);
+      });
+    }
+  }, [onSelectionChange, setUploadedMedias, uploadedMedias, onQueryReset, reload, multipleSelection]);
+  var onUploadComplete = useCallback(function () {
+    var medias = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    if (showTrashed) {
+      setShowTrashed(false);
+    }
+    if (medias === null) return;
+    var rawMedias = (isArray(medias) ? medias : [medias]).filter(function (it) {
+      return it !== null;
+    });
+    if (onMediaUploaded !== null) {
+      setUploadProcessing(true);
+      onMediaUploaded(rawMedias).then(function (newMedias) {
+        onUploadedMediaChanged(newMedias);
+        setUploadProcessing(false);
+      })["catch"](function () {
+        setUploadProcessing(false);
+      });
+    } else {
+      onUploadedMediaChanged(rawMedias);
+    }
+  }, [onMediaUploaded, setUploadedMedias, setUploadProcessing, onUploadedMediaChanged]);
+  var pagination = /*#__PURE__*/React.createElement(Pagination, {
+    page: page,
+    lastPage: lastPage,
+    total: total,
+    url: baseUrl,
+    query: query,
+    onClickPage: onPageChange,
+    theme: theme,
+    loading: loading && pages !== null,
+    selectable: selectable,
+    selectedItems: selectedItems,
+    onSelectionChange: onSelectionChange,
+    multipleSelection: multipleSelection,
+    withPreviousNext: true,
+    alwaysShowButtons: true
+  });
+  var hidePagination = loaded && !loading && (items || []).length === 0;
+  var finalFilters = useMemo(function () {
+    var partialFilters = withTrash ? (filters || []).concat([{
+      name: 'trashed',
+      component: 'button',
+      theme: showTrashed ? 'danger' : 'secondary',
+      outline: !showTrashed,
+      activeTheme: 'danger',
+      icon: showTrashed ? 'trash-fill' : 'trash',
+      disabled: uploadProcessing,
+      onClick: onClickTrash
+    }]) : filters;
+    if (types !== null && partialFilters !== null) {
+      return (partialFilters || []).map(function (filter) {
+        var _ref9 = filter || {},
+          _ref9$id = _ref9.id,
+          id = _ref9$id === void 0 ? null : _ref9$id;
+        return id === 'types' ? _objectSpread(_objectSpread({}, filter), {}, {
+          disabled: true
+        }) : filter;
+      });
+    }
+    return partialFilters;
+  }, [filters, types, withTrash, showTrashed, uploadProcessing, onClickTrash]);
+  var partialColumns = useMemo(function () {
+    return withTrash && showTrashed ? (columns || []).map(function (column) {
+      var _ref10 = column || {},
+        _ref10$id = _ref10.id,
+        columnId = _ref10$id === void 0 ? null : _ref10$id;
+      if (columnId === 'created_at') {
+        return _objectSpread(_objectSpread({}, column), {}, {
+          path: 'deleted_at',
+          label: /*#__PURE__*/React.createElement(FormattedMessage, {
+            id: "uds4wJ",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Deleted at"
+            }]
+          })
+        });
+      }
+      if (columnId === 'actions') {
+        var _ref11 = column || {},
+          _ref11$actions = _ref11.actions,
+          actions = _ref11$actions === void 0 ? [] : _ref11$actions;
+        return _objectSpread(_objectSpread({}, column), {}, {
+          actions: (actions || []).reduce(function (acc, action) {
+            if (action === 'delete') {
+              acc.push({
+                id: 'restore',
+                component: 'restore',
+                withConfirmation: true,
+                action: function action(ids) {
+                  return mediaRestore(ids[0]).then(reload);
+                }
+              });
+            }
+            acc.push(action);
+            return acc;
+          }, []).filter(function (it) {
+            return it !== 'edit';
+          })
+        });
+      }
+      return column;
+    }) : columns;
+  }, [columns, withTrash, showTrashed]);
+  var finalColumns = useMemo(function () {
+    return (partialColumns || []).map(function (column) {
+      var _ref12 = column || {},
+        _ref12$id = _ref12.id,
+        columnId = _ref12$id === void 0 ? null : _ref12$id;
+      if (columnId === 'actions') {
+        var _ref13 = column || {},
+          _ref13$actions = _ref13.actions,
+          actions = _ref13$actions === void 0 ? [] : _ref13$actions;
+        var availableActions = actions.filter(function (act) {
+          return act !== 'delete' || canDelete;
+        }).filter(function (act) {
+          return act !== 'edit' || canEdit;
+        });
+        if (availableActions.length === 0) {
+          return null;
+        }
+        return _objectSpread(_objectSpread({}, column), {}, {
+          actions: availableActions
+        });
+      }
+      return column;
+    }).filter(function (act) {
+      return act !== null;
+    });
+  }, [partialColumns, canEdit, canDelete]);
+  var hasQueryItem = useMemo(function () {
+    var showOnTopQuery = types === null ? query : queryWithoutTypes;
+    return showOnTopQuery !== null && !trashed ? Object.keys(showOnTopQuery).length > 0 : false;
+  }, [types, query, queryWithoutTypes, trashed]);
+  var finalItems = useMemo(function () {
+    if (withStickySelection && (extraItems !== null || uploadedMedias !== null || uploadProcessing === true)) {
+      return uniqBy([].concat(_toConsumableArray(uploadProcessing ? [{
+        id: '-',
+        loading: true,
+        actionsDisabled: true,
+        selectionDisabled: true
+      }] : []), _toConsumableArray(page === 1 && !hasQueryItem ? uploadedMedias || [] : []), _toConsumableArray(page === 1 && !hasQueryItem && !showTrashed ? (extraItems || []).map(function (item) {
+        var _item$id = item.id,
+          itemId = _item$id === void 0 ? null : _item$id;
+        return (allItems || []).find(function () {
+          var _ref14 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+            _ref14$id = _ref14.id,
+            otherId = _ref14$id === void 0 ? null : _ref14$id;
+          return otherId === itemId;
+        }) || item || null;
+      }).filter(function (it) {
+        return it !== null;
+      }) || [] : []), _toConsumableArray(items || [])), function (it) {
+        return it === null || it === void 0 ? void 0 : it.id;
+      });
+    }
+    return items;
+  }, [items, page, allItems, withStickySelection, extraItems, uploadProcessing, hasQueryItem, showTrashed]);
+
+  // const emptyWithSticky = useMemo(
+  //     () => (items || []).length === 0 && (finalItems || []).length > 0,
+  //     [items, finalItems],
+  // );
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: className
+  }, currentMedia !== null ? /*#__PURE__*/React.createElement(MediaForm, {
+    value: currentMedia,
+    fields: fields,
+    onChange: setCurrentMedia,
+    onSave: onSaveMedia,
+    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() {
+            onOpenMedia(it);
+          }
+        };
+      }
+    }
+  }) : null, !hidePagination ? /*#__PURE__*/React.createElement("div", {
+    className: classNames(['d-flex', 'mt-3', 'mb-1', 'justify-content-end'])
+  }, pagination) : null));
+}
+MediasBrowser.propTypes = propTypes$5;
+MediasBrowser.defaultProps = defaultProps$5;
+
+var _excluded$4 = ["items", "value", "onChange", "multiple", "className"];
+var propTypes$4 = {
+  items: PropTypes.arrayOf(PropTypes.shape({})),
+  value: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.arrayOf(PropTypes.shape({}))]),
+  multiple: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
+  className: PropTypes.string
+};
+var defaultProps$4 = {
+  items: null,
+  value: null,
+  multiple: false,
+  className: null
+};
+function MediasPicker(_ref) {
+  var initialItems = _ref.items,
+    initialSelectedItems = _ref.value,
+    onChange = _ref.onChange,
+    multiple = _ref.multiple,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded$4);
+  // Keep the previous selection on top of first page
+  var extraItems = useMemo(function () {
+    if (initialSelectedItems === null) {
+      return null;
+    }
+    return isArray(initialSelectedItems) ? initialSelectedItems : [initialSelectedItems];
+  }, []);
+
+  // Mostly for testing
+  var _useState = useState(initialSelectedItems || null),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedItems = _useState2[0],
+    setSelectedItems = _useState2[1];
+  var onSelectionChange = useCallback(function (newSelection) {
+    setSelectedItems(newSelection);
+  }, [setSelectedItems]);
+
+  // Sync from the top
+  useEffect(function () {
+    setSelectedItems(initialSelectedItems);
+  }, [initialSelectedItems, setSelectedItems]);
+  useEffect(function () {
+    if (onChange !== null) {
+      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)));
+}
+MediasPicker.propTypes = propTypes$4;
+MediasPicker.defaultProps = defaultProps$4;
+
+var _excluded$3 = ["api", "media"];
+var propTypes$3 = {
+  api: apiPropTypes,
+  media: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  })
+};
+var defaultProps$3 = {
+  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(MediaProvider, {
+    media: media
+  }, /*#__PURE__*/React.createElement(MediasBrowser, props)));
+}
+MediasBrowserContainer.propTypes = propTypes$3;
+MediasBrowserContainer.defaultProps = defaultProps$3;
+
+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,
+  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(MediaProvider, {
+    media: media
+  }, /*#__PURE__*/React.createElement(MediasPicker, Object.assign({}, props, {
+    onChange: onChange
+  }))));
+}
+MediasPickerContainer.propTypes = propTypes$2;
+MediasPickerContainer.defaultProps = defaultProps$2;
+
+var _excluded$1 = ["resource"];
+var propTypes$1 = {
+  resource: PropTypes.string
+};
+var defaultProps$1 = {
+  resource: 'medias'
+};
+function MediasResourceBrowser(_ref) {
+  var resourceId = _ref.resource,
+    props = _objectWithoutProperties(_ref, _excluded$1);
+  var resource = usePanneauResource(resourceId);
+  var api = useApi();
+  var mediasApi = useMemo(function () {
+    return {
+      get: function get() {
+        var _api$resources;
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        return (_api$resources = api.resources).get.apply(_api$resources, [resource].concat(args));
+      },
+      getTrashed: function getTrashed() {
+        var _api$resources2;
+        for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+          args[_key2] = arguments[_key2];
+        }
+        return (_api$resources2 = api.resources).getTrashed.apply(_api$resources2, [resource].concat(args));
+      },
+      find: function find() {
+        var _api$resources3;
+        for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+          args[_key3] = arguments[_key3];
+        }
+        return (_api$resources3 = api.resources).find.apply(_api$resources3, [resource].concat(args));
+      },
+      create: function create() {
+        var _api$resources4;
+        for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+          args[_key4] = arguments[_key4];
+        }
+        return (_api$resources4 = api.resources).create.apply(_api$resources4, [resource].concat(args));
+      },
+      update: function update() {
+        var _api$resources5;
+        for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+          args[_key5] = arguments[_key5];
+        }
+        return (_api$resources5 = api.resources).update.apply(_api$resources5, [resource].concat(args));
+      },
+      trash: function trash() {
+        var _api$resources6;
+        for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
+          args[_key6] = arguments[_key6];
+        }
+        return (_api$resources6 = api.resources).trash.apply(_api$resources6, [resource].concat(args));
+      },
+      "delete": function _delete() {
+        var _api$resources7;
+        for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
+          args[_key7] = arguments[_key7];
+        }
+        return (_api$resources7 = api.resources)["delete"].apply(_api$resources7, [resource].concat(args));
+      }
+    };
+  }, [api, resource]);
+  return /*#__PURE__*/React.createElement(MediasBrowserContainer, Object.assign({
+    api: mediasApi
+  }, props));
+}
+MediasResourceBrowser.propTypes = propTypes$1;
+MediasResourceBrowser.defaultProps = defaultProps$1;
+
+var _excluded = ["resource"];
+var propTypes = {
+  resource: PropTypes.string
+};
+var defaultProps = {
+  resource: 'medias'
+};
+function MediasResourcePicker(_ref) {
+  var resourceId = _ref.resource,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var resource = usePanneauResource(resourceId);
+  var _ref2 = resource || {},
+    _ref2$index = _ref2.index,
+    index = _ref2$index === void 0 ? null : _ref2$index,
+    _ref2$fields = _ref2.fields,
+    fields = _ref2$fields === void 0 ? null : _ref2$fields;
+  var _ref3 = index || {},
+    _ref3$filters = _ref3.filters,
+    filters = _ref3$filters === void 0 ? null : _ref3$filters,
+    _ref3$columns = _ref3.columns,
+    columns = _ref3$columns === void 0 ? null : _ref3$columns;
+  var api = useApi();
+  var mediasApi = useMemo(function () {
+    return {
+      get: function get() {
+        var _api$resources;
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        return (_api$resources = api.resources).get.apply(_api$resources, [resource].concat(args));
+      },
+      getTrashed: function getTrashed() {
+        var _api$resources2;
+        for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+          args[_key2] = arguments[_key2];
+        }
+        return (_api$resources2 = api.resources).getTrashed.apply(_api$resources2, [resource].concat(args));
+      },
+      find: function find() {
+        var _api$resources3;
+        for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+          args[_key3] = arguments[_key3];
+        }
+        return (_api$resources3 = api.resources).find.apply(_api$resources3, [resource].concat(args));
+      },
+      create: function create() {
+        var _api$resources4;
+        for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+          args[_key4] = arguments[_key4];
+        }
+        return (_api$resources4 = api.resources).create.apply(_api$resources4, [resource].concat(args));
+      },
+      update: function update() {
+        var _api$resources5;
+        for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+          args[_key5] = arguments[_key5];
+        }
+        return (_api$resources5 = api.resources).update.apply(_api$resources5, [resource].concat(args));
+      },
+      trash: function trash() {
+        var _api$resources6;
+        for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
+          args[_key6] = arguments[_key6];
+        }
+        return (_api$resources6 = api.resources).trash.apply(_api$resources6, [resource].concat(args));
+      },
+      "delete": function _delete() {
+        var _api$resources7;
+        for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
+          args[_key7] = arguments[_key7];
+        }
+        return (_api$resources7 = api.resources)["delete"].apply(_api$resources7, [resource].concat(args));
+      }
+    };
+  }, [api, resource]);
+  return /*#__PURE__*/React.createElement(MediasPickerContainer, Object.assign({
+    api: mediasApi
+  }, filters !== null ? {
+    filters: filters
+  } : null, fields !== null ? {
+    fields: fields
+  } : null, columns !== null ? {
+    columns: columns
+  } : null, props));
+}
+MediasResourcePicker.propTypes = propTypes;
+MediasResourcePicker.defaultProps = defaultProps;
+
+export { MediaForm, MediaProvider, MediasApiProvider, MediasBrowser, MediasBrowserContainer, MediasPicker, MediasPickerContainer, MediasResourceBrowser, MediasResourcePicker, apiPropTypes, defaultColumns as columns, defaultFields as fields, defaultFilters as filters, useCurrentMedia, useMedia$1 as useMedia, useMediaCreate$1 as useMediaCreate, useMediaDelete$1 as useMediaDelete, useMediaReplace$1 as useMediaReplace, useMediaRestore$1 as useMediaRestore, useMediaTrash$1 as useMediaTrash, useMediaUpdate$1 as useMediaUpdate, useMedias$1 as useMedias, useMediasApi };