@micromag/media-gallery 0.4.100 → 0.4.102

package/es/index.d.ts

@@ -1,21 +1,13 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Media } from '@micromag/core';
+import * as react from 'react';
 import { ForwardedRef } from 'react';
+import { Media, MediaType } from '@panneau/core';
+import { MediasBrowserContainerProps, MediasPickerContainerProps } from '@panneau/medias';
 import { DialogModalProps } from '@panneau/modal-dialog';
 
-interface MediaGalleryProps {
+interface MediaGalleryProps extends Omit<Partial<MediasBrowserContainerProps>, 'value' | 'onChange' | 'types'>, Omit<Partial<MediasPickerContainerProps>, 'value' | 'onChange' | 'types'> {
     value?: Media | Media[] | null;
-    types?: string | string[] | null;
+    types?: MediaType | MediaType[] | null;
     source?: string;
-    filters?: {
-        id?: string;
-    }[] | null;
-    fields?: {
-        id?: string;
-    }[] | null;
-    columns?: {
-        id?: string;
-    }[];
     isPicker?: boolean;
     multiple?: boolean;
     medias?: Media[] | null;
@@ -25,7 +17,7 @@ interface MediaGalleryProps {
     onMediaFormClose?: ((...args: unknown[]) => void) | null;
     className?: string | null;
 }
-declare function MediaGallery({ value, types, source, filters: providedFilters, fields: providedFields, columns, isPicker, multiple, medias: initialMedias, query, onChange, onMediaFormOpen, onMediaFormClose, className, }: MediaGalleryProps): react_jsx_runtime.JSX.Element;
+declare function MediaGallery({ value, types, source, filters: providedFilters, fields: providedFields, columns, isPicker, multiple, medias: initialMedias, query, onChange, onMediaFormOpen, onMediaFormClose, className, ...props }: MediaGalleryProps): react.JSX.Element;
 
 interface MediaGalleryModalProps extends Omit<DialogModalProps, 'id'>, MediaGalleryProps {
     id?: string | null;
@@ -33,6 +25,6 @@ interface MediaGalleryModalProps extends Omit<DialogModalProps, 'id'>, MediaGall
     withoutCloseOnComplete?: boolean;
     formRef?: ForwardedRef<HTMLFormElement> | null;
 }
-declare function MediaGalleryModal({ id, title, size, visible, autoClose, multiple, requestClose: customRequestClose, onClosed, className, value: initialValue, onChange, ...props }: MediaGalleryModalProps): react_jsx_runtime.JSX.Element;
+declare function MediaGalleryModal({ id, title, size, visible, autoClose, multiple, requestClose: customRequestClose, onClosed, className, value: initialValue, onChange, ...props }: MediaGalleryModalProps): react.JSX.Element;
 
 export { MediaGallery, MediaGalleryModal, MediaGallery as default };

package/es/index.js

@@ -3,9 +3,9 @@ import classNames from 'classnames';
 import isArray from 'lodash-es/isArray';
 import isObject from 'lodash-es/isObject';
 import isString from 'lodash-es/isString';
-import { MediasPickerContainer, MediasBrowserContainer } from '@panneau/medias';
+import { useMediasApi, MediasPickerContainer, MediasBrowserContainer } from '@panneau/medias';
 import { useStory } from '@micromag/core/contexts';
-import { useApi, useMediaCreate } from '@micromag/data';
+import { useMediaCreate } from '@micromag/data';
 import { FormattedMessage } from 'react-intl';
 import { jsx } from 'react/jsx-runtime';
 import { useUrlGenerator } from '@folklore/routes';
@@ -552,23 +552,73 @@ function useDefaultFields() {
 var styles = {"container":"micromag-media-gallery-new-media-gallery-container","browser":"micromag-media-gallery-new-media-gallery-browser"};
 
 function MediaGallery(t0) {
-  const $ = c(49);
-  const {
-    value: t1,
-    types: t2,
-    source: t3,
-    filters: t4,
-    fields: t5,
-    columns: t6,
-    isPicker: t7,
-    multiple: t8,
-    medias: t9,
-    query: t10,
-    onChange: t11,
-    onMediaFormOpen: t12,
-    onMediaFormClose: t13,
-    className: t14
-  } = t0;
+  const $ = c(64);
+  let props;
+  let t1;
+  let t10;
+  let t11;
+  let t12;
+  let t13;
+  let t14;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  let t8;
+  let t9;
+  if ($[0] !== t0) {
+    ({
+      value: t1,
+      types: t2,
+      source: t3,
+      filters: t4,
+      fields: t5,
+      columns: t6,
+      isPicker: t7,
+      multiple: t8,
+      medias: t9,
+      query: t10,
+      onChange: t11,
+      onMediaFormOpen: t12,
+      onMediaFormClose: t13,
+      className: t14,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = props;
+    $[2] = t1;
+    $[3] = t10;
+    $[4] = t11;
+    $[5] = t12;
+    $[6] = t13;
+    $[7] = t14;
+    $[8] = t2;
+    $[9] = t3;
+    $[10] = t4;
+    $[11] = t5;
+    $[12] = t6;
+    $[13] = t7;
+    $[14] = t8;
+    $[15] = t9;
+  } else {
+    props = $[1];
+    t1 = $[2];
+    t10 = $[3];
+    t11 = $[4];
+    t12 = $[5];
+    t13 = $[6];
+    t14 = $[7];
+    t2 = $[8];
+    t3 = $[9];
+    t4 = $[10];
+    t5 = $[11];
+    t6 = $[12];
+    t7 = $[13];
+    t8 = $[14];
+    t9 = $[15];
+  }
   const value = t1 === undefined ? null : t1;
   const types = t2 === undefined ? null : t2;
   const source = t3 === undefined ? null : t3;
@@ -583,15 +633,14 @@ function MediaGallery(t0) {
   const onMediaFormOpen = t12 === undefined ? null : t12;
   const onMediaFormClose = t13 === undefined ? null : t13;
   const className = t14 === undefined ? null : t14;
-  const api = useApi();
   const story = useStory();
   let t15;
-  if ($[0] !== story) {
+  if ($[16] !== story) {
     t15 = story || {};
-    $[0] = story;
-    $[1] = t15;
+    $[16] = story;
+    $[17] = t15;
   } else {
-    t15 = $[1];
+    t15 = $[17];
   }
   const {
     id: t16
@@ -599,15 +648,15 @@ function MediaGallery(t0) {
   const storyId = t16 === undefined ? null : t16;
   let finalTypes;
   let t17;
-  if ($[2] !== types) {
+  if ($[18] !== types) {
     finalTypes = isString(types) ? [types] : types;
     t17 = [...(finalTypes || []).map(_temp), (finalTypes || []).indexOf("video") !== -1 ? "image/gif" : null].filter(_temp2);
-    $[2] = types;
-    $[3] = finalTypes;
-    $[4] = t17;
+    $[18] = types;
+    $[19] = finalTypes;
+    $[20] = t17;
   } else {
-    finalTypes = $[3];
-    t17 = $[4];
+    finalTypes = $[19];
+    t17 = $[20];
   }
   const fileTypes = t17;
   const defaultFields = useDefaultFields();
@@ -615,9 +664,9 @@ function MediaGallery(t0) {
   const fields = providedFields ?? defaultFields;
   const t18 = providedFilters ?? defaultFilters;
   let t19;
-  if ($[5] !== finalTypes || $[6] !== storyId || $[7] !== t18) {
+  if ($[21] !== finalTypes || $[22] !== storyId || $[23] !== t18) {
     let t20;
-    if ($[9] !== finalTypes || $[10] !== storyId) {
+    if ($[25] !== finalTypes || $[26] !== storyId) {
       t20 = filter => {
         const {
           id: t21,
@@ -626,7 +675,7 @@ function MediaGallery(t0) {
         const id = t21 === undefined ? null : t21;
         const options = t22 === undefined ? [] : t22;
         if (id === "types" && finalTypes !== null) {
-          return false;
+          return null;
         }
         if (id === "source") {
           if (storyId === null) {
@@ -653,146 +702,105 @@ function MediaGallery(t0) {
         }
         return filter;
       };
-      $[9] = finalTypes;
-      $[10] = storyId;
-      $[11] = t20;
+      $[25] = finalTypes;
+      $[26] = storyId;
+      $[27] = t20;
     } else {
-      t20 = $[11];
+      t20 = $[27];
     }
     t19 = t18.map(t20).filter(_temp3);
-    $[5] = finalTypes;
-    $[6] = storyId;
-    $[7] = t18;
-    $[8] = t19;
+    $[21] = finalTypes;
+    $[22] = storyId;
+    $[23] = t18;
+    $[24] = t19;
   } else {
-    t19 = $[8];
+    t19 = $[24];
   }
   const filters = t19;
-  let t20;
-  if ($[12] !== api) {
-    t20 = {
-      get: (...t21) => {
-        const args = t21;
-        return api.medias.get(...args);
-      },
-      getTrashed: (...t22) => {
-        const args_0 = t22;
-        return api.medias.getTrashed(...args_0);
-      },
-      find: (...t23) => {
-        const args_1 = t23;
-        return api.medias.find(...args_1);
-      },
-      create: (...t24) => {
-        const args_2 = t24;
-        return api.medias.create(...args_2);
-      },
-      update: (...t25) => {
-        const args_3 = t25;
-        return api.medias.update(...args_3);
-      },
-      delete: (...t26) => {
-        const args_4 = t26;
-        return typeof api.medias.forceDelete !== "undefined" ? api.medias.forceDelete(...args_4) : api.medias.delete(...args_4);
-      },
-      trash: (...t27) => {
-        const args_5 = t27;
-        return api.medias.delete(...args_5);
-      },
-      restore: (...t28) => {
-        const args_6 = t28;
-        return api.medias.restore(...args_6);
-      }
-    };
-    $[12] = api;
-    $[13] = t20;
-  } else {
-    t20 = $[13];
-  }
-  const mediasApi = t20;
   const {
     create: createMedia
   } = useMediaCreate();
-  let t21;
-  if ($[14] !== createMedia) {
-    t21 = newMedias => Promise.all(newMedias.map(createMedia)).then(_temp4);
-    $[14] = createMedia;
-    $[15] = t21;
+  const mediasApi = useMediasApi();
+  let t20;
+  if ($[28] !== createMedia || $[29] !== mediasApi?.create) {
+    t20 = newMedias => Promise.all(newMedias.map(mediasApi?.create ?? createMedia)).then(_temp4);
+    $[28] = createMedia;
+    $[29] = mediasApi?.create;
+    $[30] = t20;
   } else {
-    t21 = $[15];
+    t20 = $[30];
   }
-  const onMediaUploaded = t21;
-  const t22 = fileTypes !== null && fileTypes.length > 0 ? fileTypes : null;
-  let t23;
-  if ($[16] !== t22) {
-    t23 = {
-      allowedFileTypes: t22
+  const onMediaUploaded = t20;
+  const t21 = fileTypes !== null && fileTypes.length > 0 ? fileTypes : null;
+  let t22;
+  if ($[31] !== t21) {
+    t22 = {
+      allowedFileTypes: t21
     };
-    $[16] = t22;
-    $[17] = t23;
+    $[31] = t21;
+    $[32] = t22;
   } else {
-    t23 = $[17];
+    t22 = $[32];
   }
-  const uppyConfig = t23;
-  let t24;
-  if ($[18] !== source) {
-    t24 = source !== null ? {
+  const uppyConfig = t22;
+  let t23;
+  if ($[33] !== source) {
+    t23 = source !== null ? {
       source
     } : null;
-    $[18] = source;
-    $[19] = t24;
+    $[33] = source;
+    $[34] = t23;
   } else {
-    t24 = $[19];
+    t23 = $[34];
   }
-  let t25;
-  if ($[20] !== query || $[21] !== t24) {
-    t25 = {
+  let t24;
+  if ($[35] !== query || $[36] !== t23) {
+    t24 = {
       ...query,
-      ...t24
+      ...t23
     };
-    $[20] = query;
-    $[21] = t24;
-    $[22] = t25;
+    $[35] = query;
+    $[36] = t23;
+    $[37] = t24;
   } else {
-    t25 = $[22];
+    t24 = $[37];
   }
-  const finalQuery = t25;
-  let t26;
-  if ($[23] !== value) {
-    t26 = isObject(value) ? [value] : value;
-    $[23] = value;
-    $[24] = t26;
+  const finalQuery = t24;
+  let t25;
+  if ($[38] !== value) {
+    t25 = isObject(value) && !isArray(value) ? [value] : value;
+    $[38] = value;
+    $[39] = t25;
   } else {
-    t26 = $[24];
+    t25 = $[39];
   }
-  const pickerValue = t26;
-  let t27;
-  if ($[25] !== multiple || $[26] !== onChange) {
-    t27 = newValue => {
+  const pickerValue = t25;
+  let t26;
+  if ($[40] !== multiple || $[41] !== onChange) {
+    t26 = newValue => {
       if (onChange !== null) {
         onChange(!multiple && isArray(newValue) ? newValue?.[0] ?? null : newValue);
       }
     };
-    $[25] = multiple;
-    $[26] = onChange;
-    $[27] = t27;
+    $[40] = multiple;
+    $[41] = onChange;
+    $[42] = t26;
   } else {
-    t27 = $[27];
+    t26 = $[42];
   }
-  const onPickerChange = t27;
-  let t28;
-  if ($[28] !== className) {
-    t28 = classNames([styles.container, className]);
-    $[28] = className;
-    $[29] = t28;
+  const onPickerChange = t26;
+  let t27;
+  if ($[43] !== className) {
+    t27 = classNames([styles.container, className]);
+    $[43] = className;
+    $[44] = t27;
   } else {
-    t28 = $[29];
+    t27 = $[44];
   }
-  let t29;
-  if ($[30] !== columns || $[31] !== fields || $[32] !== filters || $[33] !== finalQuery || $[34] !== finalTypes || $[35] !== initialMedias || $[36] !== isPicker || $[37] !== mediasApi || $[38] !== multiple || $[39] !== onMediaFormClose || $[40] !== onMediaFormOpen || $[41] !== onMediaUploaded || $[42] !== onPickerChange || $[43] !== pickerValue || $[44] !== uppyConfig) {
-    t29 = isPicker ? /*#__PURE__*/jsx(MediasPickerContainer, {
+  let t28;
+  if ($[45] !== columns || $[46] !== fields || $[47] !== filters || $[48] !== finalQuery || $[49] !== finalTypes || $[50] !== initialMedias || $[51] !== isPicker || $[52] !== multiple || $[53] !== onMediaFormClose || $[54] !== onMediaFormOpen || $[55] !== onMediaUploaded || $[56] !== onPickerChange || $[57] !== pickerValue || $[58] !== props || $[59] !== uppyConfig) {
+    t28 = isPicker ? /*#__PURE__*/jsx(MediasPickerContainer, {
       className: styles.browser,
-      api: mediasApi,
       value: pickerValue,
       types: finalTypes,
       query: finalQuery,
@@ -807,10 +815,10 @@ function MediaGallery(t0) {
       onMediaFormOpen: onMediaFormOpen,
       onMediaFormClose: onMediaFormClose,
       withStickySelection: true,
-      withTrash: true
+      withTrash: true,
+      ...props
     }) : /*#__PURE__*/jsx(MediasBrowserContainer, {
       className: styles.browser,
-      api: mediasApi,
       types: finalTypes,
       query: finalQuery,
       items: initialMedias,
@@ -822,40 +830,41 @@ function MediaGallery(t0) {
       multipleSelection: true,
       withStickySelection: true,
       withTrash: true,
-      withReplace: true
+      withReplace: true,
+      ...props
     });
-    $[30] = columns;
-    $[31] = fields;
-    $[32] = filters;
-    $[33] = finalQuery;
-    $[34] = finalTypes;
-    $[35] = initialMedias;
-    $[36] = isPicker;
-    $[37] = mediasApi;
-    $[38] = multiple;
-    $[39] = onMediaFormClose;
-    $[40] = onMediaFormOpen;
-    $[41] = onMediaUploaded;
-    $[42] = onPickerChange;
-    $[43] = pickerValue;
-    $[44] = uppyConfig;
-    $[45] = t29;
+    $[45] = columns;
+    $[46] = fields;
+    $[47] = filters;
+    $[48] = finalQuery;
+    $[49] = finalTypes;
+    $[50] = initialMedias;
+    $[51] = isPicker;
+    $[52] = multiple;
+    $[53] = onMediaFormClose;
+    $[54] = onMediaFormOpen;
+    $[55] = onMediaUploaded;
+    $[56] = onPickerChange;
+    $[57] = pickerValue;
+    $[58] = props;
+    $[59] = uppyConfig;
+    $[60] = t28;
   } else {
-    t29 = $[45];
+    t28 = $[60];
   }
-  let t30;
-  if ($[46] !== t28 || $[47] !== t29) {
-    t30 = /*#__PURE__*/jsx("div", {
-      className: t28,
-      children: t29
+  let t29;
+  if ($[61] !== t27 || $[62] !== t28) {
+    t29 = /*#__PURE__*/jsx("div", {
+      className: t27,
+      children: t28
     });
-    $[46] = t28;
-    $[47] = t29;
-    $[48] = t30;
+    $[61] = t27;
+    $[62] = t28;
+    $[63] = t29;
   } else {
-    t30 = $[48];
+    t29 = $[63];
   }
-  return t30;
+  return t29;
 }
 function _temp4(newAddedMedias) {
   return newAddedMedias;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/media-gallery",
-    "version": "0.4.100",
+    "version": "0.4.102",
     "private": false,
     "description": "",
     "keywords": [
@@ -63,8 +63,9 @@
         "@fortawesome/free-solid-svg-icons": "^7.2.0",
         "@fortawesome/react-fontawesome": "^3.2.0",
         "@micromag/core": "^0.4.100",
-        "@micromag/data": "^0.4.100",
-        "@panneau/medias": "^4.0.55",
+        "@micromag/data": "^0.4.101",
+        "@panneau/core": "^4.0.58",
+        "@panneau/medias": "^4.0.60",
         "bootstrap": "^5.3.8",
         "classnames": "^2.2.6",
         "lodash-es": "^4.17.23",
@@ -84,5 +85,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "724328f428f29f4950850cf34adb68ef5f46669a"
+    "gitHead": "aeb2771dba059008d2a9228798118c798d532b93"
 }