@panneau/medias 3.0.179 → 3.0.182

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';
@@ -22,6 +22,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';
 
@@ -228,7 +229,6 @@ function MediaFrame(_ref) {
     value: value,
     maxWidth: "100%",
     maxHeight: "100%",
-    withoutZoom: true,
     onClick: type === 'video' || type === 'audio' ? onClick : null
   }));
 }
@@ -487,9 +487,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, {
@@ -514,7 +517,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
@@ -781,7 +784,6 @@ var defaultFilters = [{
   }],
   multiple: true
 }
-
 // {
 //     id: 'author',
 //     component: 'select',
@@ -808,7 +810,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({}),
@@ -817,15 +818,17 @@ var propTypes$5 = {
   layout: PropTypes.string,
   layouts: PropTypes.arrayOf(PropTypes.shape({})),
   theme: PropTypes.string,
-  tableProps: PropTypes.bool,
   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 = {
@@ -851,15 +854,17 @@ var defaultProps$5 = {
     })
   }],
   theme: null,
-  tableProps: 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 +872,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 +879,17 @@ function MediasBrowser(_ref) {
     initialLayout = _ref.layout,
     layouts = _ref.layouts,
     theme = _ref.theme,
-    tableProps = _ref.tableProps,
     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),
@@ -998,8 +1004,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 +1075,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 +1093,28 @@ 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
+  }) : 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 +1125,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 +1137,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 +1178,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 +1231,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

@@ -24,6 +24,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');
 
@@ -230,7 +231,6 @@ function MediaFrame(_ref) {
     value: value,
     maxWidth: "100%",
     maxHeight: "100%",
-    withoutZoom: true,
     onClick: type === 'video' || type === 'audio' ? onClick : null
   }));
 }
@@ -489,9 +489,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, {
@@ -516,7 +519,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
@@ -783,7 +786,6 @@ var defaultFilters = [{
   }],
   multiple: true
 }
-
 // {
 //     id: 'author',
 //     component: 'select',
@@ -810,7 +812,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({}),
@@ -819,15 +820,17 @@ var propTypes$5 = {
   layout: PropTypes.string,
   layouts: PropTypes.arrayOf(PropTypes.shape({})),
   theme: PropTypes.string,
-  tableProps: PropTypes.bool,
   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 = {
@@ -853,15 +856,17 @@ var defaultProps$5 = {
     })
   }],
   theme: null,
-  tableProps: 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) {
@@ -869,7 +874,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,
@@ -877,15 +881,17 @@ function MediasBrowser(_ref) {
     initialLayout = _ref.layout,
     layouts = _ref.layouts,
     theme = _ref.theme,
-    tableProps = _ref.tableProps,
     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),
@@ -1000,8 +1006,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
   });
@@ -1069,7 +1077,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,
@@ -1087,29 +1095,28 @@ 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
+  }) : 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), {}, {
@@ -1120,7 +1127,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,
@@ -1132,22 +1139,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: {
@@ -1173,49 +1180,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(),
@@ -1230,42 +1233,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.179",
+    "version": "3.0.182",
     "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.177",
-        "@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": "b30a47b8b078044365622de3c85911898037c1f3"
+    "gitHead": "27626681ce1bcf3e4779ecabeb5d69c58df4d351"
 }