@micromag/media-gallery 0.4.71 → 0.4.74

package/es/index.js

@@ -1,4 +1,3 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import classNames from 'classnames';
 import isArray from 'lodash/isArray';
 import { useMemo, useCallback } from 'react';
@@ -19,10 +18,7 @@ var defaultColumns = [{
   id: 'name',
   label: /*#__PURE__*/jsx(FormattedMessage, {
     id: "WX83V9",
-    defaultMessage: [{
-      "type": 0,
-      "value": "File name"
-    }]
+    defaultMessage: "File name"
   }),
   component: 'text-description',
   path: 'name',
@@ -30,31 +26,19 @@ var defaultColumns = [{
   descriptionValues: {
     image: /*#__PURE__*/jsx(FormattedMessage, {
       id: "AwDQvD",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Image"
-      }]
+      defaultMessage: "Image"
     }),
     video: /*#__PURE__*/jsx(FormattedMessage, {
       id: "mQiyAm",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Video"
-      }]
+      defaultMessage: "Video"
     }),
     audio: /*#__PURE__*/jsx(FormattedMessage, {
       id: "XnyI69",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Audio"
-      }]
+      defaultMessage: "Audio"
     }),
     document: /*#__PURE__*/jsx(FormattedMessage, {
       id: "1dqmFw",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Document"
-      }]
+      defaultMessage: "Document"
     })
   },
   sortable: true
@@ -62,10 +46,7 @@ var defaultColumns = [{
   id: 'dimensions',
   label: /*#__PURE__*/jsx(FormattedMessage, {
     id: "eCe9ZY",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Dimensions"
-    }]
+    defaultMessage: "Dimensions"
   }),
   component: 'unit',
   format: 'dimensions',
@@ -74,10 +55,7 @@ var defaultColumns = [{
   id: 'size',
   label: /*#__PURE__*/jsx(FormattedMessage, {
     id: "c3hu9o",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Size"
-    }]
+    defaultMessage: "Size"
   }),
   component: 'unit',
   format: 'bytes',
@@ -86,10 +64,7 @@ var defaultColumns = [{
   id: 'duration',
   label: /*#__PURE__*/jsx(FormattedMessage, {
     id: "002oWQ",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Duration"
-    }]
+    defaultMessage: "Duration"
   }),
   component: 'unit',
   format: 'duration',
@@ -107,10 +82,7 @@ var defaultColumns = [{
   id: 'created_at',
   label: /*#__PURE__*/jsx(FormattedMessage, {
     id: "OzYWZz",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Created at"
-    }]
+    defaultMessage: "Created at"
   }),
   component: 'date',
   path: 'created_at',
@@ -120,10 +92,7 @@ var defaultColumns = [{
   id: 'actions',
   label: /*#__PURE__*/jsx(FormattedMessage, {
     id: "rtwfuZ",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Actions"
-    }]
+    defaultMessage: "Actions"
   }),
   actions: ['edit', 'delete']
   // component: ItemActions,
@@ -139,15 +108,12 @@ var defaultColumns = [{
 ];
 
 function fields() {
-  var route = useUrlGenerator();
+  const route = useUrlGenerator();
   return [{
     name: 'name',
     label: /*#__PURE__*/jsx(FormattedMessage, {
       id: "WX83V9",
-      defaultMessage: [{
-        "type": 0,
-        "value": "File name"
-      }]
+      defaultMessage: "File name"
     }),
     type: 'text',
     component: 'text'
@@ -159,10 +125,7 @@ function fields() {
       name: 'description',
       label: /*#__PURE__*/jsx(FormattedMessage, {
         id: "ygNvmz",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Description"
-        }]
+        defaultMessage: "Description"
       }),
       type: 'text',
       component: 'text'
@@ -170,10 +133,7 @@ function fields() {
       name: 'tags',
       label: /*#__PURE__*/jsx(FormattedMessage, {
         id: "IOVper",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Tags"
-        }]
+        defaultMessage: "Tags"
       }),
       createPrefix: 'Create',
       type: 'array',
@@ -193,10 +153,7 @@ function fields() {
     component: 'fields',
     label: /*#__PURE__*/jsx(FormattedMessage, {
       id: "3RT69u",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Informations"
-      }]
+      defaultMessage: "Informations"
     }),
     isList: true,
     hideWithoutValue: true,
@@ -204,10 +161,7 @@ function fields() {
       id: 'user',
       label: /*#__PURE__*/jsx(FormattedMessage, {
         id: "yByaBh",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Added by"
-        }]
+        defaultMessage: "Added by"
       }),
       type: 'display',
       display: 'avatar',
@@ -217,10 +171,7 @@ function fields() {
       id: 'created_at',
       label: /*#__PURE__*/jsx(FormattedMessage, {
         id: "PN+75e",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Created at"
-        }]
+        defaultMessage: "Created at"
       }),
       type: 'display',
       display: 'date',
@@ -233,10 +184,7 @@ function fields() {
     component: 'fields',
     label: /*#__PURE__*/jsx(FormattedMessage, {
       id: "xKUOLG",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Technical details"
-      }]
+      defaultMessage: "Technical details"
     }),
     isList: true,
     hideWithoutValue: true,
@@ -244,10 +192,7 @@ function fields() {
       id: 'format',
       label: /*#__PURE__*/jsx(FormattedMessage, {
         id: "JuxiUN",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Format"
-        }]
+        defaultMessage: "Format"
       }),
       type: 'display',
       display: 'unit',
@@ -258,10 +203,7 @@ function fields() {
       id: 'dimensions',
       label: /*#__PURE__*/jsx(FormattedMessage, {
         id: "rmJBin",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Dimensions"
-        }]
+        defaultMessage: "Dimensions"
       }),
       type: 'display',
       display: 'unit',
@@ -272,10 +214,7 @@ function fields() {
       id: 'size',
       label: /*#__PURE__*/jsx(FormattedMessage, {
         id: "g2CRt5",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Size"
-        }]
+        defaultMessage: "Size"
       }),
       type: 'display',
       display: 'unit',
@@ -286,10 +225,7 @@ function fields() {
       id: 'duration',
       label: /*#__PURE__*/jsx(FormattedMessage, {
         id: "wU++NJ",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Duration"
-        }]
+        defaultMessage: "Duration"
       }),
       type: 'display',
       display: 'unit',
@@ -302,10 +238,7 @@ function fields() {
     component: 'fields',
     label: /*#__PURE__*/jsx(FormattedMessage, {
       id: "pBNrdH",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Conversion"
-      }]
+      defaultMessage: "Conversion"
     }),
     isList: true,
     hideWithoutValue: true,
@@ -313,10 +246,7 @@ function fields() {
       id: 'h264',
       label: /*#__PURE__*/jsx(FormattedMessage, {
         id: "4RV6+9",
-        defaultMessage: [{
-          "type": 0,
-          "value": "H264"
-        }]
+        defaultMessage: "H264"
       }),
       type: 'text',
       component: 'text',
@@ -326,10 +256,7 @@ function fields() {
       id: 'webm',
       label: /*#__PURE__*/jsx(FormattedMessage, {
         id: "3I2Xl7",
-        defaultMessage: [{
-          "type": 0,
-          "value": "WebM"
-        }]
+        defaultMessage: "WebM"
       }),
       type: 'text',
       component: 'text',
@@ -340,7 +267,7 @@ function fields() {
 }
 
 function filters() {
-  var route = useUrlGenerator();
+  const route = useUrlGenerator();
   return [{
     id: 'search',
     component: 'search',
@@ -352,45 +279,30 @@ function filters() {
     name: 'types',
     placeholder: /*#__PURE__*/jsx(FormattedMessage, {
       id: "9/t5wK",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Type"
-      }]
+      defaultMessage: "Type"
     }),
     options: [{
       label: /*#__PURE__*/jsx(FormattedMessage, {
         id: "yHAmDD",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Image"
-        }]
+        defaultMessage: "Image"
       }),
       value: 'image'
     }, {
       label: /*#__PURE__*/jsx(FormattedMessage, {
         id: "xSERPA",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Video"
-        }]
+        defaultMessage: "Video"
       }),
       value: 'video'
     }, {
       label: /*#__PURE__*/jsx(FormattedMessage, {
         id: "yQRtgx",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Audio"
-        }]
+        defaultMessage: "Audio"
       }),
       value: 'audio'
     }, {
       label: /*#__PURE__*/jsx(FormattedMessage, {
         id: "fpQzza",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Font"
-        }]
+        defaultMessage: "Font"
       }),
       value: 'font'
     }],
@@ -401,10 +313,7 @@ function filters() {
     name: 'authors',
     placeholder: /*#__PURE__*/jsx(FormattedMessage, {
       id: "7oXkoj",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Authors"
-      }]
+      defaultMessage: "Authors"
     }),
     requestUrl: route('medias.authors') || '/medias/authors',
     itemLabelPath: 'name',
@@ -417,10 +326,7 @@ function filters() {
     name: 'tags',
     placeholder: /*#__PURE__*/jsx(FormattedMessage, {
       id: "9mXl24",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Tags"
-      }]
+      defaultMessage: "Tags"
     }),
     requestUrl: route('medias.tags') || '/medias/tags',
     itemLabelPath: 'name',
@@ -434,10 +340,7 @@ function filters() {
     options: [{
       label: /*#__PURE__*/jsx(FormattedMessage, {
         id: "bCtuS/",
-        defaultMessage: [{
-          "type": 0,
-          "value": "In this Micromag"
-        }]
+        defaultMessage: "In this Micromag"
       }),
       value: 'document-'
     }]
@@ -446,157 +349,95 @@ function filters() {
 
 var styles = {"container":"micromag-media-gallery-new-media-gallery-container","browser":"micromag-media-gallery-new-media-gallery-browser"};
 
-function MediaGallery(_ref) {
-  var _ref$value = _ref.value,
-    value = _ref$value === void 0 ? null : _ref$value,
-    _ref$types = _ref.types,
-    types = _ref$types === void 0 ? null : _ref$types,
-    _ref$source = _ref.source,
-    source = _ref$source === void 0 ? 'all' : _ref$source,
-    _ref$filters = _ref.filters,
-    filters$1 = _ref$filters === void 0 ? null : _ref$filters,
-    _ref$fields = _ref.fields,
-    providedFields = _ref$fields === void 0 ? null : _ref$fields,
-    _ref$columns = _ref.columns,
-    columns = _ref$columns === void 0 ? defaultColumns : _ref$columns,
-    _ref$isPicker = _ref.isPicker,
-    isPicker = _ref$isPicker === void 0 ? false : _ref$isPicker,
-    _ref$multiple = _ref.multiple,
-    multiple = _ref$multiple === void 0 ? false : _ref$multiple,
-    _ref$medias = _ref.medias,
-    initialMedias = _ref$medias === void 0 ? null : _ref$medias,
-    _ref$onChange = _ref.onChange,
-    onChange = _ref$onChange === void 0 ? null : _ref$onChange,
-    _ref$onMediaFormOpen = _ref.onMediaFormOpen,
-    onMediaFormOpen = _ref$onMediaFormOpen === void 0 ? null : _ref$onMediaFormOpen,
-    _ref$onMediaFormClose = _ref.onMediaFormClose,
-    onMediaFormClose = _ref$onMediaFormClose === void 0 ? null : _ref$onMediaFormClose,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  var api = useApi();
-  var story = useStory();
-  var _ref2 = story || {},
-    _ref2$id = _ref2.id,
-    storyId = _ref2$id === void 0 ? null : _ref2$id;
-  var fields$1 = providedFields === null ? fields() : providedFields;
-  var mediasApi = useMemo(function () {
-    return {
-      get: function get() {
-        var _api$medias;
-        return (_api$medias = api.medias).get.apply(_api$medias, arguments);
-      },
-      getTrashed: function getTrashed() {
-        var _api$medias2;
-        return (_api$medias2 = api.medias).getTrashed.apply(_api$medias2, arguments);
-      },
-      find: function find() {
-        var _api$medias3;
-        return (_api$medias3 = api.medias).find.apply(_api$medias3, arguments);
-      },
-      create: function create() {
-        var _api$medias4;
-        return (_api$medias4 = api.medias).create.apply(_api$medias4, arguments);
-      },
-      update: function update() {
-        var _api$medias5;
-        return (_api$medias5 = api.medias).update.apply(_api$medias5, arguments);
-      },
-      replace: function replace() {
-        var _api$medias6;
-        return (_api$medias6 = api.medias).replace.apply(_api$medias6, arguments);
-      },
-      "delete": function _delete() {
-        var _api$medias7, _api$medias8;
-        return typeof api.medias.forceDelete !== 'undefined' ? (_api$medias7 = api.medias).forceDelete.apply(_api$medias7, arguments) : (_api$medias8 = api.medias)["delete"].apply(_api$medias8, arguments);
-      },
-      // TODO: Temporary compat... see how this works
-      trash: function trash() {
-        var _api$medias9;
-        return (_api$medias9 = api.medias)["delete"].apply(_api$medias9, arguments);
-      },
-      restore: function restore() {
-        var _api$medias0;
-        return (_api$medias0 = api.medias).restore.apply(_api$medias0, arguments);
-      }
-    };
-  }, [api]);
+function MediaGallery({
+  value = null,
+  types = null,
+  source = 'all',
+  filters: filters$1 = null,
+  fields: providedFields = null,
+  columns = defaultColumns,
+  isPicker = false,
+  multiple = false,
+  medias: initialMedias = null,
+  onChange = null,
+  onMediaFormOpen = null,
+  onMediaFormClose = null,
+  className = null
+}) {
+  const api = useApi();
+  const story = useStory();
+  const {
+    id: storyId = null
+  } = story || {};
+  const fields$1 = providedFields === null ? fields() : providedFields;
+  const mediasApi = useMemo(() => ({
+    get: (...args) => api.medias.get(...args),
+    getTrashed: (...args_0) => api.medias.getTrashed(...args_0),
+    find: (...args_1) => api.medias.find(...args_1),
+    create: (...args_2) => api.medias.create(...args_2),
+    update: (...args_3) => api.medias.update(...args_3),
+    replace: (...args_4) => api.medias.replace(...args_4),
+    delete: (...args_5) => typeof api.medias.forceDelete !== 'undefined' ? api.medias.forceDelete(...args_5) : api.medias.delete(...args_5),
+    // TODO: Temporary compat... see how this works
+    trash: (...args_6) => api.medias.delete(...args_6),
+    restore: (...args_7) => api.medias.restore(...args_7)
+  }), [api]);
 
   // Upload
-  var _useMediaCreate = useMediaCreate(),
-    createMedia = _useMediaCreate.create;
-  var onMediaUploaded = useCallback(function (newMedias) {
-    return Promise.all(newMedias.map(createMedia)).then(function (newAddedMedias) {
-      return newAddedMedias;
-    });
-  }, [createMedia]);
-  var fileTypes = useMemo(function () {
-    var finalTypes = [];
+  const {
+    create: createMedia
+  } = useMediaCreate();
+  const onMediaUploaded = useCallback(newMedias => Promise.all(newMedias.map(createMedia)).then(newAddedMedias => newAddedMedias), [createMedia]);
+  const fileTypes = useMemo(() => {
+    let finalTypes = [];
     if (isArray(types)) {
-      finalTypes = types.map(function (t) {
-        return ['image', 'video', 'audio'].indexOf(t) !== -1 ? "".concat(t, "/*") : null;
-      }).filter(function (t) {
-        return t !== null;
-      });
+      finalTypes = types.map(t => ['image', 'video', 'audio'].indexOf(t) !== -1 ? `${t}/*` : null).filter(t_0 => t_0 !== null);
     }
-    finalTypes = ['image', 'video', 'audio'].indexOf(types) !== -1 ? ["".concat(types, "/*")] : null;
+    finalTypes = ['image', 'video', 'audio'].indexOf(types) !== -1 ? [`${types}/*`] : null;
     if (finalTypes !== null && isArray(finalTypes) && finalTypes.indexOf('video/*') !== -1) {
       finalTypes.push('image/gif');
     }
     return finalTypes;
   }, [types]);
-  var uppyConfig = useMemo(function () {
-    return {
-      // set sources ? - uppy sources -
-      allowedFileTypes: fileTypes !== null && fileTypes.length > 0 ? fileTypes : null
-    };
-  }, [fileTypes]);
-  var finalTypes = useMemo(function () {
-    return !isArray(types) && types !== null ? [types] : types;
-  }, [types]);
+  const uppyConfig = useMemo(() => ({
+    // set sources ? - uppy sources -
+    allowedFileTypes: fileTypes !== null && fileTypes.length > 0 ? fileTypes : null
+  }), [fileTypes]);
+  const finalTypes_0 = useMemo(() => !isArray(types) && types !== null ? [types] : types, [types]);
 
   // Filters
-  var partialFilters = filters$1 || filters() || [];
-  var finalFilters = useMemo(function () {
-    return partialFilters.map(function (filter) {
-      var _ref3 = filter || {},
-        _ref3$id = _ref3.id,
-        id = _ref3$id === void 0 ? null : _ref3$id,
-        _ref3$options = _ref3.options,
-        options = _ref3$options === void 0 ? [] : _ref3$options;
-      if (id === 'types' && finalTypes !== null) {
-        return false;
-      }
-      if (id === 'source') {
-        if (storyId === null) {
-          return null;
-        }
-        return _objectSpread(_objectSpread({}, filter), {}, {
-          options: (options || []).map(function () {
-            var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-              _ref4$value = _ref4.value,
-              optionValue = _ref4$value === void 0 ? null : _ref4$value,
-              _ref4$label = _ref4.label,
-              label = _ref4$label === void 0 ? null : _ref4$label;
-            return optionValue === 'document-' ? {
-              value: "document-".concat(storyId),
-              label: label
-            } : {
-              value: optionValue,
-              label: label
-            };
-          })
-        });
+  const partialFilters = filters$1 || filters() || [];
+  const finalFilters = useMemo(() => partialFilters.map(filter => {
+    const {
+      id = null,
+      options = []
+    } = filter || {};
+    if (id === 'types' && finalTypes_0 !== null) {
+      return false;
+    }
+    if (id === 'source') {
+      if (storyId === null) {
+        return null;
       }
-      return filter;
-    }).filter(function (f) {
-      return f !== null;
-    });
-  }, [partialFilters, storyId]);
-  var finalQuery = useMemo(function () {
-    return source !== null ? {
-      source: source
-    } : null;
-  }, [source]);
+      return {
+        ...filter,
+        options: (options || []).map(({
+          value: optionValue = null,
+          label = null
+        } = {}) => optionValue === 'document-' ? {
+          value: `document-${storyId}`,
+          label
+        } : {
+          value: optionValue,
+          label
+        })
+      };
+    }
+    return filter;
+  }).filter(f => f !== null), [partialFilters, storyId]);
+  const finalQuery = useMemo(() => source !== null ? {
+    source
+  } : null, [source]);
   return /*#__PURE__*/jsx("div", {
     className: classNames([styles.container, className]),
     children: isPicker ? /*#__PURE__*/jsx(MediasPickerContainer, {
@@ -604,7 +445,7 @@ function MediaGallery(_ref) {
       api: mediasApi,
       value: value,
       theme: "dark",
-      types: finalTypes,
+      types: finalTypes_0,
       query: finalQuery,
       items: initialMedias,
       filters: finalFilters,
@@ -623,7 +464,7 @@ function MediaGallery(_ref) {
       api: mediasApi,
       value: value,
       theme: "dark",
-      types: finalTypes,
+      types: finalTypes_0,
       query: finalQuery,
       items: initialMedias,
       filters: finalFilters,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/media-gallery",
-    "version": "0.4.71",
+    "version": "0.4.74",
     "private": false,
     "description": "",
     "keywords": [
@@ -32,9 +32,11 @@
     "license": "ISC",
     "type": "module",
     "module": "es/index.js",
+    "style": "./assets/css/styles.css",
     "exports": {
         ".": {
             "types": "./es/index.d.ts",
+            "style": "./assets/css/styles.css",
             "import": "./es/index.js"
         },
         "./assets/css/styles": "./assets/css/styles.css",
@@ -51,27 +53,22 @@
         "build": "../../scripts/prepare-package.sh --types"
     },
     "devDependencies": {
-        "@panneau/data": "^4.0.27",
-        "@panneau/displays": "^4.0.27",
-        "@panneau/fields": "^4.0.28",
-        "@panneau/filters": "^4.0.27",
-        "@panneau/uppy": "^4.0.27",
-        "react": "^18.3.0 || ^19.0.0",
-        "react-dom": "^18.3.0 || ^19.0.0"
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
     },
     "peerDependencies": {
-        "react": "^18.3.0 || ^19.0.0",
-        "react-dom": "^18.3.0 || ^19.0.0"
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
     },
     "dependencies": {
         "@babel/runtime": "^7.28.6",
-        "@folklore/routes": "^0.2.36",
+        "@folklore/routes": "^0.4.4",
         "@fortawesome/fontawesome-svg-core": "^7.2.0",
         "@fortawesome/free-solid-svg-icons": "^7.2.0",
         "@fortawesome/react-fontawesome": "^3.2.0",
-        "@micromag/core": "^0.4.71",
-        "@micromag/data": "^0.4.71",
-        "@panneau/medias": "^4.0.29",
+        "@micromag/core": "^0.4.74",
+        "@micromag/data": "^0.4.74",
+        "@panneau/medias": "^4.0.40-alpha.1",
         "bootstrap": "^5.3.8",
         "classnames": "^2.2.6",
         "lodash": "^4.17.23",
@@ -83,6 +80,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "9101554bc5761e32b4a002a10d26800608c69773",
+    "gitHead": "fe510ee87845280d0760cb292aef9d2eb69e67c1",
     "types": "es/index.d.ts"
 }