@panneau/medias 3.0.181 → 3.0.183

package/es/index.js

@@ -5,7 +5,7 @@ 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, useItemSelection } from '@panneau/core/hooks';
+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';
@@ -14,6 +14,7 @@ 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';
@@ -22,6 +23,7 @@ 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 UploadField from '@panneau/field-upload';
 import Filters from '@panneau/filter-filters';
 import { useItemsStore, useData, useApi } from '@panneau/data';
 
@@ -486,9 +488,12 @@ function MediaForm(_ref) {
   }, /*#__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-end mb-1"
+    className: "d-flex align-items-end justify-content-start mb-1",
+    style: {
+      maxWidth: '66%'
+    }
   }, /*#__PURE__*/React.createElement("h4", {
-    className: "d-inline text-break mb-0"
+    className: "d-inline text-truncate mb-0"
   }, name), /*#__PURE__*/React.createElement("span", {
     className: "mx-2"
   }, type)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
@@ -513,7 +518,7 @@ function MediaForm(_ref) {
   })), onSave !== null ? /*#__PURE__*/React.createElement(Button, {
     className: "mb-1 mt-1",
     theme: "primary",
-    icon: changed ? 'check-all' : 'check',
+    icon: changed ? 'check' : 'check',
     iconPosition: "right",
     onClick: onSubmit,
     disabled: !changed || updating || deleting
@@ -729,7 +734,8 @@ var defaultColumns = [{
 var defaultFilters = [{
   id: 'search',
   component: 'search',
-  name: 'search'
+  name: 'search',
+  width: 220
 }, {
   id: 'types',
   component: 'select',
@@ -806,7 +812,6 @@ var propTypes$5 = {
   items: PropTypes$1.medias,
   extraItems: PropTypes$1.medias,
   types: PropTypes.arrayOf(PropTypes.string),
-  buttons: PropTypes$1.buttons,
   filters: PropTypes$1.filters,
   columns: PropTypes$1.tableColumns,
   query: PropTypes.shape({}),
@@ -815,22 +820,24 @@ var propTypes$5 = {
   layout: PropTypes.string,
   layouts: PropTypes.arrayOf(PropTypes.shape({})),
   theme: PropTypes.string,
-  tableProps: PropTypes.bool,
+  onUpload: PropTypes.func,
   onItemsChange: PropTypes.func,
   onLayoutChange: PropTypes.func,
-  selectedCount: PropTypes.number,
-  onClearSelected: PropTypes.func,
+  selectable: PropTypes.bool,
+  selectedItems: PropTypes.arrayOf(PropTypes.shape({})),
+  onSelectionChange: PropTypes.func,
+  multipleSelection: PropTypes.bool,
+  uppyConfig: PropTypes.shape({}),
   withTrash: PropTypes.bool,
   withStickySelection: PropTypes.bool,
+  withoutUpload: PropTypes.bool,
   className: PropTypes.string,
-  buttonsClassName: PropTypes.string,
   formChildren: PropTypes.node
 };
 var defaultProps$5 = {
   items: null,
   extraItems: null,
   types: null,
-  buttons: null,
   filters: defaultFilters,
   columns: defaultColumns,
   fields: defaultFields,
@@ -849,15 +856,18 @@ var defaultProps$5 = {
     })
   }],
   theme: null,
-  tableProps: null,
+  onUpload: null,
   onItemsChange: null,
   onLayoutChange: null,
-  selectedCount: null,
-  onClearSelected: null,
+  selectable: null,
+  selectedItems: null,
+  onSelectionChange: null,
+  multipleSelection: false,
+  uppyConfig: null,
   withTrash: false,
   withStickySelection: false,
+  withoutUpload: false,
   className: null,
-  buttonsClassName: null,
   formChildren: null
 };
 function MediasBrowser(_ref) {
@@ -865,7 +875,6 @@ function MediasBrowser(_ref) {
     extraItems = _ref.extraItems,
     types = _ref.types,
     baseUrl = _ref.baseUrl,
-    buttons = _ref.buttons,
     filters = _ref.filters,
     columns = _ref.columns,
     fields = _ref.fields,
@@ -873,15 +882,18 @@ function MediasBrowser(_ref) {
     initialLayout = _ref.layout,
     layouts = _ref.layouts,
     theme = _ref.theme,
-    tableProps = _ref.tableProps,
+    onUpload = _ref.onUpload,
     onItemsChange = _ref.onItemsChange,
     onLayoutChange = _ref.onLayoutChange,
-    selectedCount = _ref.selectedCount,
-    onClearSelected = _ref.onClearSelected,
+    selectable = _ref.selectable,
+    selectedItems = _ref.selectedItems,
+    onSelectionChange = _ref.onSelectionChange,
+    multipleSelection = _ref.multipleSelection,
+    uppyConfig = _ref.uppyConfig,
     withTrash = _ref.withTrash,
     withStickySelection = _ref.withStickySelection,
+    withoutUpload = _ref.withoutUpload,
     className = _ref.className,
-    buttonsClassName = _ref.buttonsClassName,
     formChildren = _ref.formChildren;
   var _useState = useState(initialItems || null),
     _useState2 = _slicedToArray(_useState, 1),
@@ -951,7 +963,8 @@ function MediasBrowser(_ref) {
     lastPage = _useMedias$pagination2.lastPage,
     total = _useMedias$pagination2.total,
     _useMedias$pages = _useMedias.pages,
-    pages = _useMedias$pages === void 0 ? null : _useMedias$pages;
+    pages = _useMedias$pages === void 0 ? null : _useMedias$pages,
+    reload = _useMedias.reload;
 
   // For picker
   useEffect(function () {
@@ -987,6 +1000,21 @@ function MediasBrowser(_ref) {
     setCurrentMedia(null);
     updateItem(item);
   }, [setCurrentMedia, updateItem]);
+  var onMediaUploaded = useCallback(function (medias) {
+    var rawMedias = isArray(medias) ? medias : [medias];
+    if (onUpload !== null) {
+      onUpload(rawMedias).then(function (newMedias) {
+        if (onSelectionChange !== null) {
+          onSelectionChange(newMedias);
+          reload();
+        }
+      });
+    }
+    if (onSelectionChange !== null) {
+      onSelectionChange(rawMedias);
+      reload();
+    }
+  }, [onUpload]);
   var pagination = /*#__PURE__*/React.createElement(Pagination, {
     page: page,
     lastPage: lastPage,
@@ -996,8 +1024,10 @@ function MediasBrowser(_ref) {
     onClickPage: onPageChange,
     theme: theme,
     loading: loading && pages !== null,
-    selectedCount: selectedCount,
-    onClearSelected: onClearSelected,
+    selectable: selectable,
+    selectedItems: selectedItems,
+    onSelectionChange: onSelectionChange,
+    multipleSelection: multipleSelection,
     withPreviousNext: true,
     alwaysShowButtons: true
   });
@@ -1065,7 +1095,7 @@ function MediasBrowser(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: className
   }, currentMedia !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "mt-2 mb-4"
+    className: "mt-2 mb-0"
   }, /*#__PURE__*/React.createElement(Button, {
     theme: "primary",
     onClick: onCloseMedia,
@@ -1083,29 +1113,29 @@ function MediasBrowser(_ref) {
     onSave: onSaveMedia,
     onClose: onCloseMedia,
     withTrash: withTrash
-  }, formChildren)) : /*#__PURE__*/React.createElement(React.Fragment, null, filters !== null ? /*#__PURE__*/React.createElement(Filters, {
+  }, 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
-  }, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
-    items: buttons,
-    className: buttonsClassName
-  }) : null) : null, filters === null && buttons !== null ? /*#__PURE__*/React.createElement("div", {
-    className: "mt-2 mb-2"
-  }, /*#__PURE__*/React.createElement(Buttons, {
-    items: buttons,
-    className: buttonsClassName
-  })) : null, /*#__PURE__*/React.createElement("div", {
+  }) : null, !withoutUpload ? /*#__PURE__*/React.createElement(UploadField, {
+    className: "ms-auto w-auto text-nowrap mt-2",
+    withButton: true,
+    withoutMedia: true,
+    uppyConfig: uppyConfig,
+    onChange: onMediaUploaded
+  }) : 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: "primary",
+    theme: "secondary",
     outline: true,
     items: (layouts || []).map(function (lay) {
       return _objectSpread(_objectSpread({}, lay), {}, {
@@ -1116,7 +1146,7 @@ function MediasBrowser(_ref) {
         className: 'px-3'
       });
     })
-  }) : null, pagination), layout === 'grid' ? /*#__PURE__*/React.createElement(Grid, Object.assign({
+  }) : null, pagination), layout === 'grid' ? /*#__PURE__*/React.createElement(Grid, {
     size: "small",
     theme: theme,
     component: MediaCard,
@@ -1128,22 +1158,22 @@ function MediasBrowser(_ref) {
         onOpenMedia(it);
       }
     },
-    onSelectItem: function onSelectItem(it) {
-      return onOpenMedia(it);
-    }
-  }, tableProps, {
+    selectable: selectable,
+    selectedItems: selectedItems,
+    onSelectionChange: onSelectionChange,
+    multipleSelection: multipleSelection,
     items: finalItems || [],
     loading: loading
-  })) : null, layout === 'table' ? /*#__PURE__*/React.createElement(Table, Object.assign({
+  }) : null, layout === 'table' ? /*#__PURE__*/React.createElement(Table, {
     theme: theme,
     columns: finalColumns,
     displayPlaceholder: /*#__PURE__*/React.createElement("span", {
       className: "text-secondary text-opacity-75"
     }, "\u2014"),
-    onSelectItem: function onSelectItem(it) {
-      return onOpenMedia(it);
-    }
-  }, tableProps, {
+    selectable: selectable,
+    selectedItems: selectedItems,
+    onSelectionChange: onSelectionChange,
+    multipleSelection: multipleSelection,
     items: finalItems,
     loading: loading,
     actionsProps: {
@@ -1169,49 +1199,45 @@ function MediasBrowser(_ref) {
         };
       }
     }
-  })) : null, /*#__PURE__*/React.createElement("div", {
+  }) : null, /*#__PURE__*/React.createElement("div", {
     className: classNames(['d-flex', 'mt-3', 'mb-1', 'justify-content-end'])
   }, pagination)));
 }
 MediasBrowser.propTypes = propTypes$5;
 MediasBrowser.defaultProps = defaultProps$5;
 
-var _excluded$4 = ["items", "value", "types", "onChange", "onConfirm", "onClose", "multiple", "withoutButtons", "tableProps", "className"];
+var _excluded$4 = ["items", "value", "onSelectionChange", "multipleSelection", "types", "onChange", "onClose", "withoutButtons", "className"];
 var propTypes$4 = {
   // eslint-disable-next-line react/forbid-prop-types
   items: PropTypes.arrayOf(PropTypes.shape({})),
   value: PropTypes.arrayOf(PropTypes.shape({})),
+  onSelectionChange: PropTypes.func,
+  multipleSelection: PropTypes.bool,
   types: PropTypes.arrayOf(PropTypes.string),
   onChange: PropTypes.func.isRequired,
-  onConfirm: PropTypes.func.isRequired,
   onClose: PropTypes.func,
-  multiple: PropTypes.bool,
   withoutButtons: PropTypes.bool,
-  tableProps: PropTypes.shape({
-    theme: PropTypes.string
-  }),
   className: PropTypes.string
 };
 var defaultProps$4 = {
   items: null,
   value: null,
+  onSelectionChange: null,
+  multipleSelection: false,
   types: null,
   onClose: null,
-  multiple: false,
   withoutButtons: false,
-  tableProps: null,
   className: null
 };
 function MediasPicker(_ref) {
   var initialItems = _ref.items,
     initialSelectedItems = _ref.value,
+    parentOnSelectionChange = _ref.onSelectionChange,
+    multipleSelection = _ref.multipleSelection,
     types = _ref.types,
     onChange = _ref.onChange,
-    onConfirm = _ref.onConfirm,
     onClose = _ref.onClose,
-    multiple = _ref.multiple,
     withoutButtons = _ref.withoutButtons,
-    tableProps = _ref.tableProps,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$4);
   var _useMediasForm = useMediasForm(),
@@ -1226,42 +1252,44 @@ function MediasPicker(_ref) {
   var onItemsChange = useCallback(function (newPageItems) {
     setItems(newPageItems);
   }, [setItems]);
-  var _useItemSelection = useItemSelection({
-      items: pageItems,
-      selectedItems: initialSelectedItems,
-      onSelectionChange: onChange,
-      multipleSelection: multiple
-    }),
-    onSelectItem = _useItemSelection.onSelectItem,
-    onSelectPage = _useItemSelection.onSelectPage,
-    onClearSelected = _useItemSelection.onClearSelected,
-    pageSelected = _useItemSelection.pageSelected,
-    selectedCount = _useItemSelection.selectedCount,
-    selectedItems = _useItemSelection.selectedItems;
+  var _useState3 = useState(initialSelectedItems || null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedItems = _useState4[0],
+    setSelectedItems = _useState4[1];
+  var onSelectionChange = useCallback(function (newSelection) {
+    setSelectedItems(newSelection);
+  }, [setSelectedItems]);
+  // Sync from the top
+  useEffect(function () {
+    setSelectedItems(initialSelectedItems);
+  }, [initialSelectedItems, setSelectedItems]);
+  useEffect(function () {
+    if (parentOnSelectionChange !== null) {
+      parentOnSelectionChange(selectedItems);
+    }
+  }, [selectedItems, parentOnSelectionChange]);
   var onConfirmSelection = useCallback(function () {
-    if (onConfirm !== null) {
-      onConfirm(selectedItems);
+    if (onChange !== null) {
+      onChange(selectedItems);
     }
-  }, [selectedItems, onConfirm]);
+  }, [selectedItems, onChange]);
   return /*#__PURE__*/React.createElement("div", {
     className: className
   }, /*#__PURE__*/React.createElement(MediasBrowser, Object.assign({
-    tableProps: _objectSpread({
-      selectable: true,
-      multipleSelection: multiple,
-      onSelectItem: onSelectItem,
-      onSelectPage: onSelectPage,
-      selectedItems: selectedItems,
-      pageSelected: pageSelected
-    }, tableProps)
-    // items={initialItems} // TODO: fix useItems if actually using this
+    items: initialItems // TODO: fix useItems if actually using this
     ,
+    selectable: true,
+    selectedItems: selectedItems,
+    onSelectionChange: onSelectionChange,
+    multipleSelection: multipleSelection,
     onItemsChange: onItemsChange,
-    selectedCount: selectedCount,
-    onClearSelected: onClearSelected,
-    types: types,
-    extraItems: !multiple && initialSelectedItems !== null ? [initialSelectedItems] : initialSelectedItems
-  }, props)), multiple && !withoutButtons && currentMedia === null ? /*#__PURE__*/React.createElement("div", {
+    types: types
+    // extraItems={
+    //     !multiple && initialSelectedItems !== null
+    //         ? [initialSelectedItems]
+    //         : initialSelectedItems
+    // }
+  }, props)), !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"

package/lib/index.js

@@ -16,6 +16,7 @@ var MediaPlayer = require('@panneau/element-media-player');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var isArray = require('lodash/isArray');
 var uniqBy = require('lodash/uniqBy');
 var core = require('@panneau/core');
 var Buttons = require('@panneau/element-buttons');
@@ -24,6 +25,7 @@ var Icon = require('@panneau/element-icon');
 var MediaCard = require('@panneau/element-media-card');
 var Pagination = require('@panneau/element-pagination');
 var Table = require('@panneau/element-table');
+var UploadField = require('@panneau/field-upload');
 var Filters = require('@panneau/filter-filters');
 var data = require('@panneau/data');
 
@@ -488,9 +490,12 @@ function MediaForm(_ref) {
   }, /*#__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-end mb-1"
+    className: "d-flex align-items-end justify-content-start mb-1",
+    style: {
+      maxWidth: '66%'
+    }
   }, /*#__PURE__*/React.createElement("h4", {
-    className: "d-inline text-break mb-0"
+    className: "d-inline text-truncate mb-0"
   }, name), /*#__PURE__*/React.createElement("span", {
     className: "mx-2"
   }, type)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
@@ -515,7 +520,7 @@ function MediaForm(_ref) {
   })), onSave !== null ? /*#__PURE__*/React.createElement(Button, {
     className: "mb-1 mt-1",
     theme: "primary",
-    icon: changed ? 'check-all' : 'check',
+    icon: changed ? 'check' : 'check',
     iconPosition: "right",
     onClick: onSubmit,
     disabled: !changed || updating || deleting
@@ -731,7 +736,8 @@ var defaultColumns = [{
 var defaultFilters = [{
   id: 'search',
   component: 'search',
-  name: 'search'
+  name: 'search',
+  width: 220
 }, {
   id: 'types',
   component: 'select',
@@ -808,7 +814,6 @@ var propTypes$5 = {
   items: core.PropTypes.medias,
   extraItems: core.PropTypes.medias,
   types: PropTypes.arrayOf(PropTypes.string),
-  buttons: core.PropTypes.buttons,
   filters: core.PropTypes.filters,
   columns: core.PropTypes.tableColumns,
   query: PropTypes.shape({}),
@@ -817,22 +822,24 @@ var propTypes$5 = {
   layout: PropTypes.string,
   layouts: PropTypes.arrayOf(PropTypes.shape({})),
   theme: PropTypes.string,
-  tableProps: PropTypes.bool,
+  onUpload: PropTypes.func,
   onItemsChange: PropTypes.func,
   onLayoutChange: PropTypes.func,
-  selectedCount: PropTypes.number,
-  onClearSelected: PropTypes.func,
+  selectable: PropTypes.bool,
+  selectedItems: PropTypes.arrayOf(PropTypes.shape({})),
+  onSelectionChange: PropTypes.func,
+  multipleSelection: PropTypes.bool,
+  uppyConfig: PropTypes.shape({}),
   withTrash: PropTypes.bool,
   withStickySelection: PropTypes.bool,
+  withoutUpload: PropTypes.bool,
   className: PropTypes.string,
-  buttonsClassName: PropTypes.string,
   formChildren: PropTypes.node
 };
 var defaultProps$5 = {
   items: null,
   extraItems: null,
   types: null,
-  buttons: null,
   filters: defaultFilters,
   columns: defaultColumns,
   fields: defaultFields,
@@ -851,15 +858,18 @@ var defaultProps$5 = {
     })
   }],
   theme: null,
-  tableProps: null,
+  onUpload: null,
   onItemsChange: null,
   onLayoutChange: null,
-  selectedCount: null,
-  onClearSelected: null,
+  selectable: null,
+  selectedItems: null,
+  onSelectionChange: null,
+  multipleSelection: false,
+  uppyConfig: null,
   withTrash: false,
   withStickySelection: false,
+  withoutUpload: false,
   className: null,
-  buttonsClassName: null,
   formChildren: null
 };
 function MediasBrowser(_ref) {
@@ -867,7 +877,6 @@ function MediasBrowser(_ref) {
     extraItems = _ref.extraItems,
     types = _ref.types,
     baseUrl = _ref.baseUrl,
-    buttons = _ref.buttons,
     filters = _ref.filters,
     columns = _ref.columns,
     fields = _ref.fields,
@@ -875,15 +884,18 @@ function MediasBrowser(_ref) {
     initialLayout = _ref.layout,
     layouts = _ref.layouts,
     theme = _ref.theme,
-    tableProps = _ref.tableProps,
+    onUpload = _ref.onUpload,
     onItemsChange = _ref.onItemsChange,
     onLayoutChange = _ref.onLayoutChange,
-    selectedCount = _ref.selectedCount,
-    onClearSelected = _ref.onClearSelected,
+    selectable = _ref.selectable,
+    selectedItems = _ref.selectedItems,
+    onSelectionChange = _ref.onSelectionChange,
+    multipleSelection = _ref.multipleSelection,
+    uppyConfig = _ref.uppyConfig,
     withTrash = _ref.withTrash,
     withStickySelection = _ref.withStickySelection,
+    withoutUpload = _ref.withoutUpload,
     className = _ref.className,
-    buttonsClassName = _ref.buttonsClassName,
     formChildren = _ref.formChildren;
   var _useState = React.useState(initialItems || null),
     _useState2 = _slicedToArray(_useState, 1),
@@ -953,7 +965,8 @@ function MediasBrowser(_ref) {
     lastPage = _useMedias$pagination2.lastPage,
     total = _useMedias$pagination2.total,
     _useMedias$pages = _useMedias.pages,
-    pages = _useMedias$pages === void 0 ? null : _useMedias$pages;
+    pages = _useMedias$pages === void 0 ? null : _useMedias$pages,
+    reload = _useMedias.reload;
 
   // For picker
   React.useEffect(function () {
@@ -989,6 +1002,21 @@ function MediasBrowser(_ref) {
     setCurrentMedia(null);
     updateItem(item);
   }, [setCurrentMedia, updateItem]);
+  var onMediaUploaded = React.useCallback(function (medias) {
+    var rawMedias = isArray(medias) ? medias : [medias];
+    if (onUpload !== null) {
+      onUpload(rawMedias).then(function (newMedias) {
+        if (onSelectionChange !== null) {
+          onSelectionChange(newMedias);
+          reload();
+        }
+      });
+    }
+    if (onSelectionChange !== null) {
+      onSelectionChange(rawMedias);
+      reload();
+    }
+  }, [onUpload]);
   var pagination = /*#__PURE__*/React.createElement(Pagination, {
     page: page,
     lastPage: lastPage,
@@ -998,8 +1026,10 @@ function MediasBrowser(_ref) {
     onClickPage: onPageChange,
     theme: theme,
     loading: loading && pages !== null,
-    selectedCount: selectedCount,
-    onClearSelected: onClearSelected,
+    selectable: selectable,
+    selectedItems: selectedItems,
+    onSelectionChange: onSelectionChange,
+    multipleSelection: multipleSelection,
     withPreviousNext: true,
     alwaysShowButtons: true
   });
@@ -1067,7 +1097,7 @@ function MediasBrowser(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: className
   }, currentMedia !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "mt-2 mb-4"
+    className: "mt-2 mb-0"
   }, /*#__PURE__*/React.createElement(Button, {
     theme: "primary",
     onClick: onCloseMedia,
@@ -1085,29 +1115,29 @@ function MediasBrowser(_ref) {
     onSave: onSaveMedia,
     onClose: onCloseMedia,
     withTrash: withTrash
-  }, formChildren)) : /*#__PURE__*/React.createElement(React.Fragment, null, filters !== null ? /*#__PURE__*/React.createElement(Filters, {
+  }, 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
-  }, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
-    items: buttons,
-    className: buttonsClassName
-  }) : null) : null, filters === null && buttons !== null ? /*#__PURE__*/React.createElement("div", {
-    className: "mt-2 mb-2"
-  }, /*#__PURE__*/React.createElement(Buttons, {
-    items: buttons,
-    className: buttonsClassName
-  })) : null, /*#__PURE__*/React.createElement("div", {
+  }) : null, !withoutUpload ? /*#__PURE__*/React.createElement(UploadField, {
+    className: "ms-auto w-auto text-nowrap mt-2",
+    withButton: true,
+    withoutMedia: true,
+    uppyConfig: uppyConfig,
+    onChange: onMediaUploaded
+  }) : 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: "primary",
+    theme: "secondary",
     outline: true,
     items: (layouts || []).map(function (lay) {
       return _objectSpread(_objectSpread({}, lay), {}, {
@@ -1118,7 +1148,7 @@ function MediasBrowser(_ref) {
         className: 'px-3'
       });
     })
-  }) : null, pagination), layout === 'grid' ? /*#__PURE__*/React.createElement(Grid, Object.assign({
+  }) : null, pagination), layout === 'grid' ? /*#__PURE__*/React.createElement(Grid, {
     size: "small",
     theme: theme,
     component: MediaCard,
@@ -1130,22 +1160,22 @@ function MediasBrowser(_ref) {
         onOpenMedia(it);
       }
     },
-    onSelectItem: function onSelectItem(it) {
-      return onOpenMedia(it);
-    }
-  }, tableProps, {
+    selectable: selectable,
+    selectedItems: selectedItems,
+    onSelectionChange: onSelectionChange,
+    multipleSelection: multipleSelection,
     items: finalItems || [],
     loading: loading
-  })) : null, layout === 'table' ? /*#__PURE__*/React.createElement(Table, Object.assign({
+  }) : null, layout === 'table' ? /*#__PURE__*/React.createElement(Table, {
     theme: theme,
     columns: finalColumns,
     displayPlaceholder: /*#__PURE__*/React.createElement("span", {
       className: "text-secondary text-opacity-75"
     }, "\u2014"),
-    onSelectItem: function onSelectItem(it) {
-      return onOpenMedia(it);
-    }
-  }, tableProps, {
+    selectable: selectable,
+    selectedItems: selectedItems,
+    onSelectionChange: onSelectionChange,
+    multipleSelection: multipleSelection,
     items: finalItems,
     loading: loading,
     actionsProps: {
@@ -1171,49 +1201,45 @@ function MediasBrowser(_ref) {
         };
       }
     }
-  })) : null, /*#__PURE__*/React.createElement("div", {
+  }) : null, /*#__PURE__*/React.createElement("div", {
     className: classNames(['d-flex', 'mt-3', 'mb-1', 'justify-content-end'])
   }, pagination)));
 }
 MediasBrowser.propTypes = propTypes$5;
 MediasBrowser.defaultProps = defaultProps$5;
 
-var _excluded$4 = ["items", "value", "types", "onChange", "onConfirm", "onClose", "multiple", "withoutButtons", "tableProps", "className"];
+var _excluded$4 = ["items", "value", "onSelectionChange", "multipleSelection", "types", "onChange", "onClose", "withoutButtons", "className"];
 var propTypes$4 = {
   // eslint-disable-next-line react/forbid-prop-types
   items: PropTypes.arrayOf(PropTypes.shape({})),
   value: PropTypes.arrayOf(PropTypes.shape({})),
+  onSelectionChange: PropTypes.func,
+  multipleSelection: PropTypes.bool,
   types: PropTypes.arrayOf(PropTypes.string),
   onChange: PropTypes.func.isRequired,
-  onConfirm: PropTypes.func.isRequired,
   onClose: PropTypes.func,
-  multiple: PropTypes.bool,
   withoutButtons: PropTypes.bool,
-  tableProps: PropTypes.shape({
-    theme: PropTypes.string
-  }),
   className: PropTypes.string
 };
 var defaultProps$4 = {
   items: null,
   value: null,
+  onSelectionChange: null,
+  multipleSelection: false,
   types: null,
   onClose: null,
-  multiple: false,
   withoutButtons: false,
-  tableProps: null,
   className: null
 };
 function MediasPicker(_ref) {
   var initialItems = _ref.items,
     initialSelectedItems = _ref.value,
+    parentOnSelectionChange = _ref.onSelectionChange,
+    multipleSelection = _ref.multipleSelection,
     types = _ref.types,
     onChange = _ref.onChange,
-    onConfirm = _ref.onConfirm,
     onClose = _ref.onClose,
-    multiple = _ref.multiple,
     withoutButtons = _ref.withoutButtons,
-    tableProps = _ref.tableProps,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$4);
   var _useMediasForm = useMediasForm(),
@@ -1228,42 +1254,44 @@ function MediasPicker(_ref) {
   var onItemsChange = React.useCallback(function (newPageItems) {
     setItems(newPageItems);
   }, [setItems]);
-  var _useItemSelection = hooks.useItemSelection({
-      items: pageItems,
-      selectedItems: initialSelectedItems,
-      onSelectionChange: onChange,
-      multipleSelection: multiple
-    }),
-    onSelectItem = _useItemSelection.onSelectItem,
-    onSelectPage = _useItemSelection.onSelectPage,
-    onClearSelected = _useItemSelection.onClearSelected,
-    pageSelected = _useItemSelection.pageSelected,
-    selectedCount = _useItemSelection.selectedCount,
-    selectedItems = _useItemSelection.selectedItems;
+  var _useState3 = React.useState(initialSelectedItems || null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedItems = _useState4[0],
+    setSelectedItems = _useState4[1];
+  var onSelectionChange = React.useCallback(function (newSelection) {
+    setSelectedItems(newSelection);
+  }, [setSelectedItems]);
+  // Sync from the top
+  React.useEffect(function () {
+    setSelectedItems(initialSelectedItems);
+  }, [initialSelectedItems, setSelectedItems]);
+  React.useEffect(function () {
+    if (parentOnSelectionChange !== null) {
+      parentOnSelectionChange(selectedItems);
+    }
+  }, [selectedItems, parentOnSelectionChange]);
   var onConfirmSelection = React.useCallback(function () {
-    if (onConfirm !== null) {
-      onConfirm(selectedItems);
+    if (onChange !== null) {
+      onChange(selectedItems);
     }
-  }, [selectedItems, onConfirm]);
+  }, [selectedItems, onChange]);
   return /*#__PURE__*/React.createElement("div", {
     className: className
   }, /*#__PURE__*/React.createElement(MediasBrowser, Object.assign({
-    tableProps: _objectSpread({
-      selectable: true,
-      multipleSelection: multiple,
-      onSelectItem: onSelectItem,
-      onSelectPage: onSelectPage,
-      selectedItems: selectedItems,
-      pageSelected: pageSelected
-    }, tableProps)
-    // items={initialItems} // TODO: fix useItems if actually using this
+    items: initialItems // TODO: fix useItems if actually using this
     ,
+    selectable: true,
+    selectedItems: selectedItems,
+    onSelectionChange: onSelectionChange,
+    multipleSelection: multipleSelection,
     onItemsChange: onItemsChange,
-    selectedCount: selectedCount,
-    onClearSelected: onClearSelected,
-    types: types,
-    extraItems: !multiple && initialSelectedItems !== null ? [initialSelectedItems] : initialSelectedItems
-  }, props)), multiple && !withoutButtons && currentMedia === null ? /*#__PURE__*/React.createElement("div", {
+    types: types
+    // extraItems={
+    //     !multiple && initialSelectedItems !== null
+    //         ? [initialSelectedItems]
+    //         : initialSelectedItems
+    // }
+  }, props)), !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"

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/medias",
-    "version": "3.0.181",
+    "version": "3.0.183",
     "description": "",
     "keywords": [
         "javascript"
@@ -46,20 +46,21 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@panneau/core": "^3.0.176",
-        "@panneau/data": "^3.0.178",
-        "@panneau/display-image": "^3.0.181",
-        "@panneau/element-button": "^3.0.177",
-        "@panneau/element-buttons": "^3.0.177",
-        "@panneau/element-form": "^3.0.177",
-        "@panneau/element-form-status": "^3.0.176",
-        "@panneau/element-grid": "^3.0.176",
-        "@panneau/element-icon": "^3.0.176",
-        "@panneau/element-media-card": "^3.0.177",
-        "@panneau/element-media-player": "^3.0.176",
-        "@panneau/element-pagination": "^3.0.177",
-        "@panneau/element-table": "^3.0.177",
-        "@panneau/filter-filters": "^3.0.177",
+        "@panneau/core": "^3.0.182",
+        "@panneau/data": "^3.0.182",
+        "@panneau/display-image": "^3.0.182",
+        "@panneau/element-button": "^3.0.182",
+        "@panneau/element-buttons": "^3.0.182",
+        "@panneau/element-form": "^3.0.182",
+        "@panneau/element-form-status": "^3.0.182",
+        "@panneau/element-grid": "^3.0.182",
+        "@panneau/element-icon": "^3.0.182",
+        "@panneau/element-media-card": "^3.0.182",
+        "@panneau/element-media-player": "^3.0.182",
+        "@panneau/element-pagination": "^3.0.182",
+        "@panneau/element-table": "^3.0.182",
+        "@panneau/field-upload": "^3.0.182",
+        "@panneau/filter-filters": "^3.0.182",
         "classnames": "^2.5.1",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -68,5 +69,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "d9cec00d148ce400f0fea0e2dd110e9632b189d4"
+    "gitHead": "1a43436f1a5e0db3a0b2951138e9280b21220467"
 }