@panneau/app 2.0.68 → 2.0.70

package/lib/index.js

@@ -26,10 +26,8 @@ var isObject = require('lodash/isObject');
 var queryString = require('query-string');
 var reactIntl = require('react-intl');
 var hooks = require('@panneau/core/hooks');
-var utils = require('@panneau/core/utils');
+var ResourceForm = require('@panneau/form-resource');
 var classNames = require('classnames');
-var Button = require('@panneau/element-button');
-var Form = require('@panneau/element-form');
 var elementModal = require('@panneau/element-modal');
 var isArray = require('lodash/isArray');
 var Menu = require('@panneau/element-menu');
@@ -37,12 +35,11 @@ var Navbar = require('@panneau/element-navbar');
 var Label = require('@panneau/element-label');
 var isString = require('lodash/isString');
 var Alert = require('@panneau/element-alert');
+var Button = require('@panneau/element-button');
 var Dropdown = require('@panneau/element-dropdown');
-var Pagination = require('@panneau/element-pagination');
-var _toPropertyKey = require('@babel/runtime/helpers/toPropertyKey');
-var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
-var reactFontawesome = require('@fortawesome/react-fontawesome');
-var FormGroup = require('@panneau/element-form-group');
+var ResourceList = require('@panneau/list-resource-items');
+var utils = require('@panneau/core/utils');
+var Filters = require('@panneau/filter-filters');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -61,293 +58,33 @@ var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_obje
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
 var queryString__default = /*#__PURE__*/_interopDefaultLegacy(queryString);
+var ResourceForm__default = /*#__PURE__*/_interopDefaultLegacy(ResourceForm);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
-var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
-var Form__default = /*#__PURE__*/_interopDefaultLegacy(Form);
 var isArray__default = /*#__PURE__*/_interopDefaultLegacy(isArray);
 var Menu__default = /*#__PURE__*/_interopDefaultLegacy(Menu);
 var Navbar__default = /*#__PURE__*/_interopDefaultLegacy(Navbar);
 var Label__default = /*#__PURE__*/_interopDefaultLegacy(Label);
 var isString__default = /*#__PURE__*/_interopDefaultLegacy(isString);
 var Alert__default = /*#__PURE__*/_interopDefaultLegacy(Alert);
+var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var Dropdown__default = /*#__PURE__*/_interopDefaultLegacy(Dropdown);
-var Pagination__default = /*#__PURE__*/_interopDefaultLegacy(Pagination);
-var _toPropertyKey__default = /*#__PURE__*/_interopDefaultLegacy(_toPropertyKey);
-var FormGroup__default = /*#__PURE__*/_interopDefaultLegacy(FormGroup);
-
-var _excluded$6 = ["resource", "action", "previous", "status", "value", "onSubmit", "errors", "generalError", "className"];
-var propTypes$m = {
-  resource: core.PropTypes.resource.isRequired,
-  action: PropTypes__default["default"].string,
-  previous: PropTypes__default["default"].string,
-  fields: core.PropTypes.fields.isRequired,
-  value: PropTypes__default["default"].object,
-  // eslint-disable-line react/forbid-prop-types
-  onChange: PropTypes__default["default"].func.isRequired,
-  onSubmit: PropTypes__default["default"].func,
-  status: core.PropTypes.formStatus,
-  generalError: PropTypes__default["default"].string,
-  errors: PropTypes__default["default"].objectOf(PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)),
-  className: PropTypes__default["default"].string
-};
-var defaultProps$m = {
-  action: null,
-  previous: null,
-  status: null,
-  value: null,
-  onSubmit: null,
-  generalError: null,
-  errors: null,
-  className: null
-};
-var DeleteForm = function DeleteForm(_ref) {
-  var resource = _ref.resource,
-    action = _ref.action,
-    previous = _ref.previous;
-    _ref.status;
-    var value = _ref.value,
-    onSubmit = _ref.onSubmit;
-    _ref.errors;
-    var generalError = _ref.generalError,
-    className = _ref.className,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$6);
-  var _ref2 = value || {},
-    _ref2$id = _ref2.id,
-    id = _ref2$id === void 0 ? null : _ref2$id;
-  var resourceValues = intl.useResourceValues(resource, {
-    id: id
-  });
-  // const { text, background } = usePanneauColorScheme();
-
-  return /*#__PURE__*/React__default["default"].createElement(Form__default["default"], Object.assign({
-    className: classNames__default["default"](['form', _defineProperty__default["default"]({
-      'invalid-feedback': generalError !== null
-    }, className, className !== null)]),
-    action: action,
-    onSubmit: onSubmit,
-    withoutActions: true,
-    withoutErrors: true
-  }, props), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['card', _defineProperty__default["default"]({}, className, className !== null)])
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "card-body"
-  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
-    values: resourceValues,
-    id: "yzfiXJ",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Are you sure you want to delete "
-    }, {
-      "type": 1,
-      "value": "the_singular"
-    }, {
-      "type": 0,
-      "value": " #"
-    }, {
-      "type": 1,
-      "value": "id"
-    }, {
-      "type": 0,
-      "value": "?"
-    }]
-  }), generalError ? /*#__PURE__*/React__default["default"].createElement("p", {
-    className: "text-danger"
-  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
-    id: "y9zauY",
-    defaultMessage: [{
-      "type": 0,
-      "value": "An error occured and we could not delete this item successfully."
-    }]
-  })) : null), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "card-body d-flex"
-  }, previous !== null ? /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
-    href: previous,
-    className: "me-2",
-    theme: "secondary",
-    outline: true
-  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
-    id: "PyxZY2",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Cancel"
-    }]
-  })) : null, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
-    type: "submit",
-    className: "ms-auto",
-    theme: "danger"
-  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
-    id: "Bhu3B2",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Delete"
-    }]
-  })))));
-};
-DeleteForm.propTypes = propTypes$m;
-DeleteForm.defaultProps = defaultProps$m;
-
-var _excluded$5 = ["component", "resource", "onSuccess", "item", "type", "isDelete"];
-var propTypes$l = {
-  component: PropTypes__default["default"].string,
-  resource: core.PropTypes.resource.isRequired,
-  item: PropTypes__default["default"].object,
-  // eslint-disable-line react/forbid-prop-types
-  type: PropTypes__default["default"].string,
-  onSuccess: PropTypes__default["default"].func,
-  isDelete: PropTypes__default["default"].bool
-};
-var defaultProps$l = {
-  component: null,
-  item: null,
-  type: null,
-  onSuccess: null,
-  isDelete: false
-};
-var ResourceForm = function ResourceForm(_ref) {
-  var component = _ref.component,
-    resource = _ref.resource,
-    onSuccess = _ref.onSuccess,
-    item = _ref.item,
-    type = _ref.type,
-    isDelete = _ref.isDelete,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$5);
-  var locales = contexts.useLocales();
-  var FormComponents = contexts.useFormsComponents();
-  var _resource$fields = resource.fields,
-    resourceFields = _resource$fields === void 0 ? [] : _resource$fields,
-    _resource$types = resource.types,
-    resourceTypes = _resource$types === void 0 ? [] : _resource$types,
-    forms = resource.forms;
-  var resourceType = type !== null ? resourceTypes.find(function (it) {
-    return it.id === type;
-  }) || null : null;
-  var _ref2 = resourceType || {},
-    _ref2$fields = _ref2.fields,
-    resourceTypeFields = _ref2$fields === void 0 ? null : _ref2$fields;
-  var isCreate = item === null || !item.id;
-
-  // Pick fields from resource root or form
-  var _ref3 = forms || {},
-    _ref3$default = _ref3["default"],
-    defaultForm = _ref3$default === void 0 ? null : _ref3$default,
-    _ref3$create = _ref3.create,
-    createForm = _ref3$create === void 0 ? null : _ref3$create,
-    _ref3$edit = _ref3.edit,
-    editForm = _ref3$edit === void 0 ? null : _ref3$edit,
-    _ref3$delete = _ref3["delete"],
-    deleteForm = _ref3$delete === void 0 ? null : _ref3$delete;
-  var _ref4 = defaultForm || {},
-    _ref4$fields = _ref4.fields,
-    defaultFields = _ref4$fields === void 0 ? null : _ref4$fields,
-    defaultComponent = _ref4.component;
-  var createOrEditSource = isCreate ? createForm || {} : editForm || {};
-  var _ref5 = isDelete ? deleteForm || {} : createOrEditSource || {},
-    _ref5$fields = _ref5.fields,
-    formFields = _ref5$fields === void 0 ? null : _ref5$fields,
-    _ref5$component = _ref5.component,
-    formComponent = _ref5$component === void 0 ? null : _ref5$component;
-  var finalFields = React.useMemo(function () {
-    return (formFields || defaultFields || resourceTypeFields || resourceFields).filter(function (_ref6) {
-      var _ref6$settings = _ref6.settings,
-        _ref6$settings2 = _ref6$settings === void 0 ? {} : _ref6$settings,
-        _ref6$settings2$hidde = _ref6$settings2.hiddenInForm,
-        hiddenInForm = _ref6$settings2$hidde === void 0 ? false : _ref6$settings2$hidde;
-      return !hiddenInForm;
-    });
-  }, [formFields, defaultFields, resourceTypeFields, resourceFields]);
-
-  // Form routes
-  var resourceRoute = hooks.useResourceUrlGenerator(resource);
-  var _useResourceStore = data.useResourceStore(resource),
-    store = _useResourceStore.store;
-  var _useResourceUpdate = data.useResourceUpdate(resource, item != null ? item.id : null),
-    update = _useResourceUpdate.update;
-  var _useResourceDestroy = data.useResourceDestroy(resource, item != null ? item.id : null),
-    destroy = _useResourceDestroy.destroy;
-
-  // Post actions
-  var postAction = isCreate ? store : update;
-  var postForm = React.useCallback(function (action, data) {
-    return isDelete ? destroy() : postAction(data);
-  }, [postAction, isDelete, destroy, store, update]);
-
-  // Form state
-  var getInitialValue = React.useCallback(function () {
-    return item !== null ? item : finalFields.reduce(function (defaultValues, _ref7) {
-      var name = _ref7.name,
-        _ref7$defaultValue = _ref7.defaultValue,
-        defaultValue = _ref7$defaultValue === void 0 ? null : _ref7$defaultValue;
-      return defaultValue !== null ? _objectSpread__default["default"](_objectSpread__default["default"]({}, defaultValues), {}, _defineProperty__default["default"]({}, name, defaultValue)) : defaultValues;
-    }, type !== null ? {
-      type: type
-    } : null);
-  }, [item, type, finalFields]);
-  var _useState = React.useState(getInitialValue()),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
-    value = _useState2[0],
-    setValueState = _useState2[1];
-  var setValue = React.useCallback(function (newValue) {
-    // console.log('new value in resource form', newValue); // eslint-disable-line
-    setValueState(newValue);
-  }, [setValueState]);
-  var _useForm = hooks.useForm({
-      fields: finalFields,
-      value: value,
-      postForm: postForm,
-      setValue: setValue,
-      onComplete: onSuccess,
-      locales: locales
-    }),
-    fields = _useForm.fields,
-    onSubmit = _useForm.onSubmit,
-    status = _useForm.status,
-    generalError = _useForm.generalError,
-    errors = _useForm.errors;
-
-  // Form action
-  var modifyAction = isCreate ? resourceRoute('store') : resourceRoute('update', {
-    id: item.id
-  });
-  var action = isDelete ? resourceRoute('destroy', {
-    id: item.id
-  }) : modifyAction;
-  var defaultFormName = isDelete ? component || formComponent || null : component || formComponent || defaultComponent || 'normal';
+var ResourceList__default = /*#__PURE__*/_interopDefaultLegacy(ResourceList);
+var Filters__default = /*#__PURE__*/_interopDefaultLegacy(Filters);
 
-  // Form component
-  var FormComponent = utils.getComponentFromName(defaultFormName, FormComponents, isDelete ? DeleteForm : component);
+/* eslint-disable react/jsx-props-no-spreading */
 
-  // Lisen to item value change - this is important
-  React.useEffect(function () {
-    // console.log('get initial value from the top'); // eslint-disable-line
-    setValue(getInitialValue());
-  }, [getInitialValue, setValue]);
-  return /*#__PURE__*/React__default["default"].createElement(contexts.FormProvider, {
-    value: value,
-    setValue: setValue
-  }, /*#__PURE__*/React__default["default"].createElement(FormComponent, Object.assign({}, props, {
-    status: status,
-    resource: resource,
-    item: item,
-    fields: fields,
-    generalError: generalError,
-    errors: errors,
-    action: action,
-    onSubmit: onSubmit,
-    isCreate: isCreate,
-    value: value,
-    onChange: setValue
-  })));
+// Kept for backward compatibility with exports
+var ResourceFormWrapper = function ResourceFormWrapper(props) {
+  return /*#__PURE__*/React__default["default"].createElement(ResourceForm__default["default"], props);
 };
-ResourceForm.propTypes = propTypes$l;
-ResourceForm.defaultProps = defaultProps$l;
 
-var propTypes$k = {
+var propTypes$j = {
   withAccountForm: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string,
   itemClassName: PropTypes__default["default"].string,
   linkClassName: PropTypes__default["default"].string
 };
-var defaultProps$k = {
+var defaultProps$i = {
   withAccountForm: false,
   className: null,
   itemClassName: null,
@@ -415,15 +152,15 @@ var AccountMenu = function AccountMenu(_ref) {
     dropdownAlign: "end"
   }) : null;
 };
-AccountMenu.propTypes = propTypes$k;
-AccountMenu.defaultProps = defaultProps$k;
+AccountMenu.propTypes = propTypes$j;
+AccountMenu.defaultProps = defaultProps$i;
 
-var propTypes$j = {
+var propTypes$i = {
   className: PropTypes__default["default"].string,
   itemClassName: PropTypes__default["default"].string,
   linkClassName: PropTypes__default["default"].string
 };
-var defaultProps$j = {
+var defaultProps$h = {
   className: null,
   itemClassName: null,
   linkClassName: null
@@ -460,11 +197,11 @@ var ResourcesMenu = function ResourcesMenu(_ref) {
     linkClassName: linkClassName
   });
 };
-ResourcesMenu.propTypes = propTypes$j;
-ResourcesMenu.defaultProps = defaultProps$j;
+ResourcesMenu.propTypes = propTypes$i;
+ResourcesMenu.defaultProps = defaultProps$h;
 
-var propTypes$i = {};
-var defaultProps$i = {};
+var propTypes$h = {};
+var defaultProps$g = {};
 var MainNavbar = function MainNavbar(props) {
   var _usePanneau = contexts.usePanneau(),
     name = _usePanneau.name,
@@ -527,16 +264,16 @@ var MainNavbar = function MainNavbar(props) {
     className: "navbar-brand"
   }, name) : null, items);
 };
-MainNavbar.propTypes = propTypes$i;
-MainNavbar.defaultProps = defaultProps$i;
+MainNavbar.propTypes = propTypes$h;
+MainNavbar.defaultProps = defaultProps$g;
 
 var styles$1 = {};
 
-var propTypes$h = {
+var propTypes$g = {
   children: PropTypes__default["default"].node.isRequired,
   fullscreen: PropTypes__default["default"].bool
 };
-var defaultProps$h = {
+var defaultProps$f = {
   fullscreen: false
 };
 var MainLayout = function MainLayout(_ref) {
@@ -561,17 +298,17 @@ var MainLayout = function MainLayout(_ref) {
     }, _defineProperty__default["default"](_ref2, "bg-".concat(background), background !== null), _defineProperty__default["default"](_ref2, "text-".concat(text), text !== null), _ref2)])
   }, children), /*#__PURE__*/React__default["default"].createElement(elementModal.Modals, null));
 };
-MainLayout.propTypes = propTypes$h;
-MainLayout.defaultProps = defaultProps$h;
+MainLayout.propTypes = propTypes$g;
+MainLayout.defaultProps = defaultProps$f;
 
-var propTypes$g = {
+var propTypes$f = {
   title: core.PropTypes.label,
   actions: PropTypes__default["default"].node,
   small: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string,
   children: PropTypes__default["default"].node
 };
-var defaultProps$g = {
+var defaultProps$e = {
   title: null,
   actions: null,
   small: false,
@@ -608,13 +345,13 @@ var PageHeader = function PageHeader(_ref) {
     className: "col-12 col-md-8 col-lg-7"
   }, inner)) : inner), children);
 };
-PageHeader.propTypes = propTypes$g;
-PageHeader.defaultProps = defaultProps$g;
+PageHeader.propTypes = propTypes$f;
+PageHeader.defaultProps = defaultProps$e;
 
-var propTypes$f = {
+var propTypes$e = {
   resource: core.PropTypes.resource.isRequired
 };
-var defaultProps$f = {};
+var defaultProps$d = {};
 var ResourceCreatePage = function ResourceCreatePage(_ref) {
   var resource = _ref.resource;
   var navigate = reactRouter.useNavigate();
@@ -651,20 +388,20 @@ var ResourceCreatePage = function ResourceCreatePage(_ref) {
     className: "row justify-content-center"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "col-12 col-md-8 col-lg-7"
-  }, /*#__PURE__*/React__default["default"].createElement(ResourceForm, {
+  }, /*#__PURE__*/React__default["default"].createElement(ResourceFormWrapper, {
     resource: resource,
     type: type,
     onSuccess: onSuccess
   }))))));
 };
-ResourceCreatePage.propTypes = propTypes$f;
-ResourceCreatePage.defaultProps = defaultProps$f;
+ResourceCreatePage.propTypes = propTypes$e;
+ResourceCreatePage.defaultProps = defaultProps$d;
 
 // import PropTypes from 'prop-types';
-var propTypes$e = {
+var propTypes$d = {
   resource: core.PropTypes.resource.isRequired
 };
-var defaultProps$e = {};
+var defaultProps$c = {};
 var ResourceDeletePage = function ResourceDeletePage(_ref) {
   var resource = _ref.resource;
   var _useParams = reactRouter.useParams(),
@@ -698,20 +435,20 @@ var ResourceDeletePage = function ResourceDeletePage(_ref) {
     className: "row justify-content-center"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "col-12 col-md-8 col-lg-7"
-  }, item !== null ? /*#__PURE__*/React__default["default"].createElement(ResourceForm, {
+  }, item !== null ? /*#__PURE__*/React__default["default"].createElement(ResourceFormWrapper, {
     resource: resource,
     item: item,
     onSuccess: onSuccess,
     isDelete: true
   }) : null)))));
 };
-ResourceDeletePage.propTypes = propTypes$e;
-ResourceDeletePage.defaultProps = defaultProps$e;
+ResourceDeletePage.propTypes = propTypes$d;
+ResourceDeletePage.defaultProps = defaultProps$c;
 
-var propTypes$d = {
+var propTypes$c = {
   resource: core.PropTypes.resource.isRequired
 };
-var defaultProps$d = {};
+var defaultProps$b = {};
 var ResourceEditPage = function ResourceEditPage(_ref) {
   var resource = _ref.resource;
   var _useParams = reactRouter.useParams(),
@@ -753,21 +490,21 @@ var ResourceEditPage = function ResourceEditPage(_ref) {
     className: "row justify-content-center"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "col-12 col-md-8 col-lg-7"
-  }, editItem !== null ? /*#__PURE__*/React__default["default"].createElement(ResourceForm, {
+  }, editItem !== null ? /*#__PURE__*/React__default["default"].createElement(ResourceFormWrapper, {
     resource: resource,
     item: editItem,
     type: type,
     onSuccess: onSuccess
   }) : null)))));
 };
-ResourceEditPage.propTypes = propTypes$d;
-ResourceEditPage.defaultProps = defaultProps$d;
+ResourceEditPage.propTypes = propTypes$c;
+ResourceEditPage.defaultProps = defaultProps$b;
 
-var propTypes$c = {
+var propTypes$b = {
   resource: core.PropTypes.resource.isRequired,
   className: PropTypes__default["default"].string
 };
-var defaultProps$c = {
+var defaultProps$a = {
   className: null
 };
 var ResourceCreateButtom = function ResourceCreateButtom(_ref) {
@@ -836,227 +573,30 @@ var ResourceCreateButtom = function ResourceCreateButtom(_ref) {
     onClickOutside: onDropdownClickOutside
   })) : button;
 };
-ResourceCreateButtom.propTypes = propTypes$c;
-ResourceCreateButtom.defaultProps = defaultProps$c;
+ResourceCreateButtom.propTypes = propTypes$b;
+ResourceCreateButtom.defaultProps = defaultProps$a;
 
-var _excluded$4 = ["component", "name", "groupLabel"];
-var propTypes$b = {
-  filters: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
-    id: PropTypes__default["default"].string,
-    component: PropTypes__default["default"].string.isRequired
-  })),
-  value: PropTypes__default["default"].object,
-  // eslint-disable-line react/forbid-prop-types
-  onChange: PropTypes__default["default"].func,
-  onReset: PropTypes__default["default"].func,
-  withContainer: PropTypes__default["default"].bool,
-  withReset: PropTypes__default["default"].bool,
-  defaultValue: PropTypes__default["default"].objectOf(PropTypes__default["default"].object),
-  // eslint-disable-line react/forbid-prop-types
-  className: PropTypes__default["default"].string
-};
-var defaultProps$b = {
-  filters: [],
-  value: null,
-  onChange: null,
-  onReset: null,
-  withContainer: false,
-  withReset: true,
-  defaultValue: {
-    page: null
-  },
-  className: null
-};
-var ResourceFilters = function ResourceFilters(_ref) {
-  var filters = _ref.filters,
-    value = _ref.value,
-    onChange = _ref.onChange,
-    onReset = _ref.onReset,
-    withContainer = _ref.withContainer,
-    withReset = _ref.withReset,
-    defaultValue = _ref.defaultValue,
-    className = _ref.className;
-  var FilterComponents = contexts.useFiltersComponents();
-  var _usePanneauColorSchem = contexts.usePanneauColorScheme(),
-    background = _usePanneauColorSchem.background;
-  var currentFilters = filters || [];
-  var onFiltersReset = React.useCallback(function () {
-    if (onReset !== null) {
-      onReset(null);
-    }
-  }, [onReset]);
-  var hasActiveFilter = (currentFilters || []).reduce(function (isActive, item) {
-    if (value !== null && value[item.name]) {
-      return true;
-    }
-    return isActive;
-  }, false);
-  var onFilterChange = React.useCallback(function (name, newFilterValue) {
-    if (name !== null && onChange !== null) {
-      onChange(_objectSpread__default["default"](_objectSpread__default["default"]({}, value), {}, _defineProperty__default["default"]({}, name, newFilterValue), defaultValue));
-    }
-  }, [onChange, value, defaultValue]);
-  var onFilterClear = React.useCallback(function (name) {
-    if (name !== null && onChange !== null) {
-      var _ref2 = value || {};
-        _ref2[name];
-        var newValue = _objectWithoutProperties__default["default"](_ref2, [name].map(_toPropertyKey__default["default"]));
-      onChange(_objectSpread__default["default"](_objectSpread__default["default"]({}, newValue), defaultValue));
-    }
-  }, [onChange, value, defaultValue]);
-  return /*#__PURE__*/React__default["default"].createElement(Navbar__default["default"], {
-    className: classNames__default["default"]([_defineProperty__default["default"]({
-      'navbar-expand-md': withContainer
-    }, className, className !== null), 'justify-content-start', 'align-items-start', 'flex-column', 'flex-md-row']),
-    theme: background,
-    withoutCollapse: true
-  }, currentFilters.map(function (_ref4, index) {
-    var component = _ref4.component,
-      name = _ref4.name,
-      groupLabel = _ref4.groupLabel,
-      filterProps = _objectWithoutProperties__default["default"](_ref4, _excluded$4);
-    var FilterComponent = utils.getComponentFromName(component, FilterComponents, null);
-    var filterValue = value !== null && value[name] ? value[name] : null;
-    return FilterComponent !== null ? /*#__PURE__*/React__default["default"].createElement(FormGroup__default["default"], {
-      key: "filter-".concat(name, "-").concat(index + 1),
-      label: groupLabel,
-      className: "mb-3 me-3"
-    }, /*#__PURE__*/React__default["default"].createElement(FilterComponent, Object.assign({}, filterProps, {
-      value: filterValue,
-      onChange: function onChange(newValue) {
-        return onFilterChange(name, newValue);
-      },
-      onClear: function onClear() {
-        return onFilterClear(name);
-      }
-    }))) : null;
-  }), withReset && hasActiveFilter && currentFilters.length > 0 ? /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
-    theme: "primary",
-    onClick: onFiltersReset
-  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: freeSolidSvgIcons.faUndo
-  })) : null);
-};
-ResourceFilters.propTypes = propTypes$b;
-ResourceFilters.defaultProps = defaultProps$b;
-
-var _excluded$3 = ["component", "showPagination", "filters", "actions"],
-  _excluded2$1 = ["page"];
+var _excluded$3 = ["resource"];
 var propTypes$a = {
-  resource: core.PropTypes.resource.isRequired,
-  query: PropTypes__default["default"].object,
-  // eslint-disable-line react/forbid-prop-types
-  paginated: PropTypes__default["default"].bool,
-  baseUrl: PropTypes__default["default"].string,
-  component: PropTypes__default["default"].oneOfType([PropTypes__default["default"].elementType, PropTypes__default["default"].string]),
-  componentProps: PropTypes__default["default"].object,
-  // eslint-disable-line react/forbid-prop-types
-  onQueryChange: PropTypes__default["default"].func,
-  onQueryReset: PropTypes__default["default"].func,
-  onClickPage: PropTypes__default["default"].func,
-  showFilters: PropTypes__default["default"].bool,
-  listProps: PropTypes__default["default"].shape({})
-};
-var defaultProps$a = {
-  query: null,
-  paginated: true,
-  component: null,
-  baseUrl: null,
-  componentProps: null,
-  onQueryChange: null,
-  onQueryReset: null,
-  onClickPage: null,
-  showFilters: true,
-  listProps: null
+  resource: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].shape({
+    id: PropTypes__default["default"].string
+  })]).isRequired
 };
+
+// Kept for backward compatibility with exports
 var ResourceItemsList = function ResourceItemsList(_ref) {
   var resource = _ref.resource,
-    query = _ref.query,
-    baseUrl = _ref.baseUrl,
-    onQueryChange = _ref.onQueryChange,
-    onQueryReset = _ref.onQueryReset,
-    onClickPage = _ref.onClickPage,
-    paginated = _ref.paginated,
-    showFilters = _ref.showFilters,
-    customListProps = _ref.listProps;
-  var _resource$index = resource.index,
-    _resource$index2 = _resource$index === void 0 ? {} : _resource$index,
-    _resource$index2$comp = _resource$index2.component,
-    listComponent = _resource$index2$comp === void 0 ? null : _resource$index2$comp,
-    _resource$index2$show = _resource$index2.showPagination,
-    showPagination = _resource$index2$show === void 0 ? true : _resource$index2$show,
-    _resource$index2$filt = _resource$index2.filters,
-    filters = _resource$index2$filt === void 0 ? null : _resource$index2$filt;
-    _resource$index2.actions;
-    var listProps = _objectWithoutProperties__default["default"](_resource$index2, _excluded$3);
-  var _usePanneauColorSchem = contexts.usePanneauColorScheme(),
-    _usePanneauColorSchem2 = _usePanneauColorSchem.background,
-    theme = _usePanneauColorSchem2 === void 0 ? null : _usePanneauColorSchem2;
-  var ListComponents = contexts.useListsComponents();
-  var _useMemo = React.useMemo(function () {
-      var _ref2 = query || {},
-        _ref2$page = _ref2.page,
-        currentPage = _ref2$page === void 0 ? 1 : _ref2$page,
-        rest = _objectWithoutProperties__default["default"](_ref2, _excluded2$1);
-      return [currentPage, rest];
-    }, [query]),
-    _useMemo2 = _slicedToArray__default["default"](_useMemo, 2),
-    page = _useMemo2[0],
-    queryWithoutPage = _useMemo2[1];
-  var itemsProps = data.useResourceItems(resource, queryWithoutPage, paginated ? parseInt(page, 10) : null);
-  var _ref3 = itemsProps || {},
-    _ref3$loaded = _ref3.loaded,
-    loaded = _ref3$loaded === void 0 ? false : _ref3$loaded,
-    _ref3$loading = _ref3.loading,
-    loading = _ref3$loading === void 0 ? false : _ref3$loading,
-    _ref3$lastPage = _ref3.lastPage,
-    lastPage = _ref3$lastPage === void 0 ? 0 : _ref3$lastPage,
-    _ref3$total = _ref3.total,
-    total = _ref3$total === void 0 ? 0 : _ref3$total;
-  var finalEmpty = loaded && !loading && total === 0;
-  var ListComponent = utils.getComponentFromName(listComponent || 'table', ListComponents);
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, showFilters && filters !== null ? /*#__PURE__*/React__default["default"].createElement(ResourceFilters, {
-    filters: filters,
-    value: query,
-    onChange: onQueryChange,
-    onReset: onQueryReset
-  }) : null, paginated && showPagination ? /*#__PURE__*/React__default["default"].createElement(Pagination__default["default"], {
-    page: page,
-    lastPage: lastPage,
-    total: total,
-    url: baseUrl,
-    query: query,
-    onClickPage: onClickPage,
-    className: "mt-1 mb-1"
-  }) : null, ListComponent !== null ? /*#__PURE__*/React__default["default"].createElement(ListComponent, Object.assign({}, itemsProps, listProps, {
-    resource: resource,
-    baseUrl: baseUrl,
-    query: query,
-    onQueryChange: onQueryChange,
-    onQueryReset: onQueryReset,
-    theme: theme,
-    showEmptyLabel: finalEmpty,
-    emptyLabel: /*#__PURE__*/React__default["default"].createElement("p", {
-      className: "my-2"
-    }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
-      id: "WgIC2T",
-      defaultMessage: [{
-        "type": 0,
-        "value": "No results found"
-      }]
-    }))
-  }, customListProps)) : null, paginated && showPagination ? /*#__PURE__*/React__default["default"].createElement(Pagination__default["default"], {
-    page: page,
-    lastPage: lastPage,
-    total: total,
-    url: baseUrl,
-    query: query,
-    onClickPage: onClickPage,
-    className: "mt-4 mb-1"
-  }) : null);
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$3);
+  var _ref2 = isObject__default["default"](resource) ? resource : {
+      id: resource
+    },
+    _ref2$id = _ref2.id,
+    finalResource = _ref2$id === void 0 ? null : _ref2$id;
+  return /*#__PURE__*/React__default["default"].createElement(ResourceList__default["default"], Object.assign({
+    resource: finalResource
+  }, props));
 };
 ResourceItemsList.propTypes = propTypes$a;
-ResourceItemsList.defaultProps = defaultProps$a;
 
 var _excluded$2 = ["id", "component"];
 var propTypes$9 = {
@@ -1218,7 +758,7 @@ var ResourceShowPage = function ResourceShowPage(_ref) {
     className: "row justify-content-center"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "col-12 col-md-8 col-lg-7"
-  }, /*#__PURE__*/React__default["default"].createElement(ResourceForm, {
+  }, /*#__PURE__*/React__default["default"].createElement(ResourceFormWrapper, {
     resource: resource,
     item: item,
     type: type,
@@ -1847,10 +1387,17 @@ var Container = function Container(_ref) {
 Container.propTypes = propTypes;
 Container.defaultProps = defaultProps;
 
+/* eslint-disable react/jsx-props-no-spreading */
+
+// Kept for backward compatibility with exports
+var ResourceFilters = function ResourceFilters(props) {
+  return /*#__PURE__*/React__default["default"].createElement(Filters__default["default"], props);
+};
+
 exports.GuestLayout = GuestLayout;
 exports.MainLayout = MainLayout;
 exports.PageHeader = PageHeader;
 exports.ResourceFilters = ResourceFilters;
-exports.ResourceForm = ResourceForm;
+exports.ResourceForm = ResourceFormWrapper;
 exports.ResourceItemsList = ResourceItemsList;
 exports["default"] = Container;