@micromag/media-gallery 0.4.88 → 0.4.90-alpha.1

package/es/index.d.ts

@@ -1,9 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Media } from '@micromag/core';
+import { ForwardedRef } from 'react';
+import { DialogModalProps } from '@panneau/modal-dialog';
 
 interface MediaGalleryProps {
     value?: Media | Media[] | null;
-    types?: string | unknown[] | null;
+    types?: string | string[] | null;
     source?: string;
     filters?: {
         id?: string;
@@ -17,11 +19,20 @@ interface MediaGalleryProps {
     isPicker?: boolean;
     multiple?: boolean;
     medias?: Media[] | null;
-    onChange?: ((...args: unknown[]) => void) | null;
+    query?: Record<string, unknown> | null;
+    onChange?: ((media: Media | Media[] | null) => void) | null;
     onMediaFormOpen?: ((...args: unknown[]) => void) | null;
     onMediaFormClose?: ((...args: unknown[]) => void) | null;
     className?: string | null;
 }
-declare function MediaGallery({ value, types, source, filters, fields: providedFields, columns, isPicker, multiple, medias: initialMedias, 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, }: MediaGalleryProps): react_jsx_runtime.JSX.Element;
 
-export { MediaGallery as default };
+interface MediaGalleryModalProps extends Omit<DialogModalProps, 'id'>, MediaGalleryProps {
+    id?: string | null;
+    autoClose?: boolean;
+    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;
+
+export { MediaGallery, MediaGalleryModal, MediaGallery as default };

package/es/index.js

@@ -1,13 +1,16 @@
+import _isArray from 'lodash/isArray';
+import { c } from 'react/compiler-runtime';
 import classNames from 'classnames';
-import isArray from 'lodash/isArray';
 import isObject from 'lodash/isObject';
-import { useMemo, useCallback } from 'react';
+import isString from 'lodash/isString';
 import { MediasPickerContainer, MediasBrowserContainer } from '@panneau/medias';
 import { useStory } from '@micromag/core/contexts';
 import { useApi, useMediaCreate } from '@micromag/data';
 import { FormattedMessage } from 'react-intl';
 import { jsx } from 'react/jsx-runtime';
 import { useUrlGenerator } from '@folklore/routes';
+import { useState } from 'react';
+import Dialog from '@panneau/modal-dialog';
 
 var defaultColumns = [{
   id: 'image',
@@ -108,352 +111,697 @@ var defaultColumns = [{
 // },
 ];
 
-function fields() {
+function useDefaultFilters() {
+  const $ = c(16);
   const route = useUrlGenerator();
-  return [{
-    name: 'name',
-    label: /*#__PURE__*/jsx(FormattedMessage, {
-      id: "WX83V9",
-      defaultMessage: "File name"
-    }),
-    type: 'text',
-    component: 'text'
-  }, {
-    id: 'metadata',
-    component: 'fields',
-    name: 'metadata',
-    fields: [{
-      name: 'description',
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {
+      id: "search",
+      component: "search",
+      name: "search",
+      width: 152
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = {
+      id: "types",
+      component: "select",
+      name: "types",
+      placeholder: /*#__PURE__*/jsx(FormattedMessage, {
+        id: "9/t5wK",
+        defaultMessage: "Type"
+      }),
+      options: [{
+        label: /*#__PURE__*/jsx(FormattedMessage, {
+          id: "yHAmDD",
+          defaultMessage: "Image"
+        }),
+        value: "image"
+      }, {
+        label: /*#__PURE__*/jsx(FormattedMessage, {
+          id: "xSERPA",
+          defaultMessage: "Video"
+        }),
+        value: "video"
+      }, {
+        label: /*#__PURE__*/jsx(FormattedMessage, {
+          id: "yQRtgx",
+          defaultMessage: "Audio"
+        }),
+        value: "audio"
+      }, {
+        label: /*#__PURE__*/jsx(FormattedMessage, {
+          id: "fpQzza",
+          defaultMessage: "Font"
+        }),
+        value: "font"
+      }],
+      multiple: true
+    };
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = /*#__PURE__*/jsx(FormattedMessage, {
+      id: "7oXkoj",
+      defaultMessage: "Authors"
+    });
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[3] !== route) {
+    t3 = route("medias.authors") || "/medias/authors";
+    $[3] = route;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  let t4;
+  if ($[5] !== t3) {
+    t4 = {
+      id: "authors",
+      component: "select",
+      name: "authors",
+      placeholder: t2,
+      requestUrl: t3,
+      itemLabelPath: "name",
+      itemValuePath: "id",
+      multiple: true,
+      paginated: false
+    };
+    $[5] = t3;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  let t5;
+  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = /*#__PURE__*/jsx(FormattedMessage, {
+      id: "9mXl24",
+      defaultMessage: "Tags"
+    });
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  let t6;
+  if ($[8] !== route) {
+    t6 = route("medias.tags") || "/medias/tags";
+    $[8] = route;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  let t7;
+  if ($[10] !== t6) {
+    t7 = {
+      id: "tags",
+      component: "select",
+      name: "tags",
+      placeholder: t5,
+      requestUrl: t6,
+      itemLabelPath: "name",
+      itemValuePath: "name",
+      multiple: true,
+      paginated: false
+    };
+    $[10] = t6;
+    $[11] = t7;
+  } else {
+    t7 = $[11];
+  }
+  let t8;
+  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+    t8 = {
+      id: "source",
+      component: "radios",
+      name: "source",
+      options: [{
+        label: /*#__PURE__*/jsx(FormattedMessage, {
+          id: "bCtuS/",
+          defaultMessage: "In this Micromag"
+        }),
+        value: "document-"
+      }]
+    };
+    $[12] = t8;
+  } else {
+    t8 = $[12];
+  }
+  let t9;
+  if ($[13] !== t4 || $[14] !== t7) {
+    t9 = [t0, t1, t4, t7, t8];
+    $[13] = t4;
+    $[14] = t7;
+    $[15] = t9;
+  } else {
+    t9 = $[15];
+  }
+  return t9;
+}
+function useDefaultFields() {
+  const $ = c(20);
+  const route = useUrlGenerator();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {
+      name: "name",
       label: /*#__PURE__*/jsx(FormattedMessage, {
-        id: "ygNvmz",
-        defaultMessage: "Description"
+        id: "WX83V9",
+        defaultMessage: "File name"
       }),
-      type: 'text',
-      component: 'text'
-    }, {
-      name: 'tags',
+      type: "text",
+      component: "text"
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = {
+      name: "description",
       label: /*#__PURE__*/jsx(FormattedMessage, {
-        id: "IOVper",
-        defaultMessage: "Tags"
+        id: "ygNvmz",
+        defaultMessage: "Description"
       }),
-      createPrefix: 'Create',
-      type: 'array',
-      component: 'item',
-      requestUrl: route('medias.tags') || '/medias/tags',
-      itemLabelPath: 'name',
-      itemDescriptionPath: null,
-      itemValuePath: 'id',
-      // Uses taggable so change the logic here
-      valueIsOption: true,
-      multiple: true,
-      paginated: false,
-      creatable: true
-    }]
-  }, {
-    id: 'info',
-    component: 'fields',
-    label: /*#__PURE__*/jsx(FormattedMessage, {
+      type: "text",
+      component: "text"
+    };
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = /*#__PURE__*/jsx(FormattedMessage, {
+      id: "IOVper",
+      defaultMessage: "Tags"
+    });
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[3] !== route) {
+    t3 = route("medias.tags") || "/medias/tags";
+    $[3] = route;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  let t4;
+  if ($[5] !== t3) {
+    t4 = {
+      id: "metadata",
+      component: "fields",
+      name: "metadata",
+      fields: [t1, {
+        name: "tags",
+        label: t2,
+        createPrefix: "Create",
+        type: "array",
+        component: "item",
+        requestUrl: t3,
+        itemLabelPath: "name",
+        itemDescriptionPath: null,
+        itemValuePath: "id",
+        valueIsOption: true,
+        multiple: true,
+        paginated: false,
+        creatable: true
+      }]
+    };
+    $[5] = t3;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  let t5;
+  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = /*#__PURE__*/jsx(FormattedMessage, {
       id: "3RT69u",
       defaultMessage: "Informations"
-    }),
-    isList: true,
-    hideWithoutValue: true,
-    fields: [{
-      id: 'user',
+    });
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  let t6;
+  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = {
+      id: "user",
       label: /*#__PURE__*/jsx(FormattedMessage, {
         id: "yByaBh",
         defaultMessage: "Added by"
       }),
-      type: 'display',
-      display: 'avatar',
-      name: 'user',
-      horizontal: true
-    }, {
-      id: 'created_at',
-      label: /*#__PURE__*/jsx(FormattedMessage, {
-        id: "PN+75e",
-        defaultMessage: "Created at"
-      }),
-      type: 'display',
-      display: 'date',
-      name: 'created_at',
-      format: 'yyyy-MM-dd hh:ss',
+      type: "display",
+      display: "avatar",
+      name: "user",
       horizontal: true
-    }]
-  }, {
-    id: 'technical',
-    component: 'fields',
-    label: /*#__PURE__*/jsx(FormattedMessage, {
+    };
+    $[8] = t6;
+  } else {
+    t6 = $[8];
+  }
+  let t7;
+  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = {
+      id: "info",
+      component: "fields",
+      label: t5,
+      isList: true,
+      hideWithoutValue: true,
+      fields: [t6, {
+        id: "created_at",
+        label: /*#__PURE__*/jsx(FormattedMessage, {
+          id: "PN+75e",
+          defaultMessage: "Created at"
+        }),
+        type: "display",
+        display: "date",
+        name: "created_at",
+        format: "yyyy-MM-dd hh:ss",
+        horizontal: true
+      }]
+    };
+    $[9] = t7;
+  } else {
+    t7 = $[9];
+  }
+  let t8;
+  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+    t8 = /*#__PURE__*/jsx(FormattedMessage, {
       id: "xKUOLG",
       defaultMessage: "Technical details"
-    }),
-    isList: true,
-    hideWithoutValue: true,
-    fields: [{
-      id: 'format',
+    });
+    $[10] = t8;
+  } else {
+    t8 = $[10];
+  }
+  let t9;
+  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = {
+      id: "format",
       label: /*#__PURE__*/jsx(FormattedMessage, {
         id: "JuxiUN",
         defaultMessage: "Format"
       }),
-      type: 'display',
-      display: 'unit',
-      format: 'format',
-      name: 'format',
+      type: "display",
+      display: "unit",
+      format: "format",
+      name: "format",
       horizontal: true
-    }, {
-      id: 'dimensions',
+    };
+    $[11] = t9;
+  } else {
+    t9 = $[11];
+  }
+  let t10;
+  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = {
+      id: "dimensions",
       label: /*#__PURE__*/jsx(FormattedMessage, {
         id: "rmJBin",
         defaultMessage: "Dimensions"
       }),
-      type: 'display',
-      display: 'unit',
-      format: 'dimensions',
-      name: 'metadata',
+      type: "display",
+      display: "unit",
+      format: "dimensions",
+      name: "metadata",
       horizontal: true
-    }, {
-      id: 'size',
+    };
+    $[12] = t10;
+  } else {
+    t10 = $[12];
+  }
+  let t11;
+  if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+    t11 = {
+      id: "size",
       label: /*#__PURE__*/jsx(FormattedMessage, {
         id: "g2CRt5",
         defaultMessage: "Size"
       }),
-      type: 'display',
-      display: 'unit',
-      format: 'bytes',
-      name: 'metadata.size',
+      type: "display",
+      display: "unit",
+      format: "bytes",
+      name: "metadata.size",
       horizontal: true
-    }, {
-      id: 'duration',
-      label: /*#__PURE__*/jsx(FormattedMessage, {
-        id: "wU++NJ",
-        defaultMessage: "Duration"
-      }),
-      type: 'display',
-      display: 'unit',
-      format: 'duration',
-      name: 'metadata.duration',
-      horizontal: true
-    }]
-  }, {
-    id: 'conversion',
-    component: 'fields',
-    label: /*#__PURE__*/jsx(FormattedMessage, {
+    };
+    $[13] = t11;
+  } else {
+    t11 = $[13];
+  }
+  let t12;
+  if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+    t12 = {
+      id: "technical",
+      component: "fields",
+      label: t8,
+      isList: true,
+      hideWithoutValue: true,
+      fields: [t9, t10, t11, {
+        id: "duration",
+        label: /*#__PURE__*/jsx(FormattedMessage, {
+          id: "wU++NJ",
+          defaultMessage: "Duration"
+        }),
+        type: "display",
+        display: "unit",
+        format: "duration",
+        name: "metadata.duration",
+        horizontal: true
+      }]
+    };
+    $[14] = t12;
+  } else {
+    t12 = $[14];
+  }
+  let t13;
+  if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+    t13 = /*#__PURE__*/jsx(FormattedMessage, {
       id: "pBNrdH",
       defaultMessage: "Conversion"
-    }),
-    isList: true,
-    hideWithoutValue: true,
-    fields: [{
-      id: 'h264',
+    });
+    $[15] = t13;
+  } else {
+    t13 = $[15];
+  }
+  let t14;
+  if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+    t14 = {
+      id: "h264",
       label: /*#__PURE__*/jsx(FormattedMessage, {
         id: "4RV6+9",
         defaultMessage: "H264"
       }),
-      type: 'text',
-      component: 'text',
-      name: 'files.h264.url',
-      horizontal: true
-    }, {
-      id: 'webm',
-      label: /*#__PURE__*/jsx(FormattedMessage, {
-        id: "3I2Xl7",
-        defaultMessage: "WebM"
-      }),
-      type: 'text',
-      component: 'text',
-      name: 'files.webm.url',
+      type: "text",
+      component: "text",
+      name: "files.h264.url",
       horizontal: true
-    }]
-  }];
-}
-
-function filters() {
-  const route = useUrlGenerator();
-  return [{
-    id: 'search',
-    component: 'search',
-    name: 'search',
-    width: 152
-  }, {
-    id: 'types',
-    component: 'select',
-    name: 'types',
-    placeholder: /*#__PURE__*/jsx(FormattedMessage, {
-      id: "9/t5wK",
-      defaultMessage: "Type"
-    }),
-    options: [{
-      label: /*#__PURE__*/jsx(FormattedMessage, {
-        id: "yHAmDD",
-        defaultMessage: "Image"
-      }),
-      value: 'image'
-    }, {
-      label: /*#__PURE__*/jsx(FormattedMessage, {
-        id: "xSERPA",
-        defaultMessage: "Video"
-      }),
-      value: 'video'
-    }, {
-      label: /*#__PURE__*/jsx(FormattedMessage, {
-        id: "yQRtgx",
-        defaultMessage: "Audio"
-      }),
-      value: 'audio'
-    }, {
-      label: /*#__PURE__*/jsx(FormattedMessage, {
-        id: "fpQzza",
-        defaultMessage: "Font"
-      }),
-      value: 'font'
-    }],
-    multiple: true
-  }, {
-    id: 'authors',
-    component: 'select',
-    name: 'authors',
-    placeholder: /*#__PURE__*/jsx(FormattedMessage, {
-      id: "7oXkoj",
-      defaultMessage: "Authors"
-    }),
-    requestUrl: route('medias.authors') || '/medias/authors',
-    itemLabelPath: 'name',
-    itemValuePath: 'id',
-    multiple: true,
-    paginated: false
-  }, {
-    id: 'tags',
-    component: 'select',
-    name: 'tags',
-    placeholder: /*#__PURE__*/jsx(FormattedMessage, {
-      id: "9mXl24",
-      defaultMessage: "Tags"
-    }),
-    requestUrl: route('medias.tags') || '/medias/tags',
-    itemLabelPath: 'name',
-    itemValuePath: 'name',
-    multiple: true,
-    paginated: false
-  }, {
-    id: 'source',
-    component: 'radios',
-    name: 'source',
-    options: [{
-      label: /*#__PURE__*/jsx(FormattedMessage, {
-        id: "bCtuS/",
-        defaultMessage: "In this Micromag"
-      }),
-      value: 'document-'
-    }]
-  }];
+    };
+    $[16] = t14;
+  } else {
+    t14 = $[16];
+  }
+  let t15;
+  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+    t15 = {
+      id: "conversion",
+      component: "fields",
+      label: t13,
+      isList: true,
+      hideWithoutValue: true,
+      fields: [t14, {
+        id: "webm",
+        label: /*#__PURE__*/jsx(FormattedMessage, {
+          id: "3I2Xl7",
+          defaultMessage: "WebM"
+        }),
+        type: "text",
+        component: "text",
+        name: "files.webm.url",
+        horizontal: true
+      }]
+    };
+    $[17] = t15;
+  } else {
+    t15 = $[17];
+  }
+  let t16;
+  if ($[18] !== t4) {
+    t16 = [t0, t4, t7, t12, t15];
+    $[18] = t4;
+    $[19] = t16;
+  } else {
+    t16 = $[19];
+  }
+  return t16;
 }
 
 var styles = {"container":"micromag-media-gallery-new-media-gallery-container","browser":"micromag-media-gallery-new-media-gallery-browser"};
 
-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
-}) {
+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 value = t1 === undefined ? null : t1;
+  const types = t2 === undefined ? null : t2;
+  const source = t3 === undefined ? null : t3;
+  const providedFilters = t4 === undefined ? null : t4;
+  const providedFields = t5 === undefined ? null : t5;
+  const columns = t6 === undefined ? defaultColumns : t6;
+  const isPicker = t7 === undefined ? false : t7;
+  const multiple = t8 === undefined ? false : t8;
+  const initialMedias = t9 === undefined ? null : t9;
+  const query = t10 === undefined ? null : t10;
+  const onChange = t11 === undefined ? null : t11;
+  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) {
+    t15 = story || {};
+    $[0] = story;
+    $[1] = t15;
+  } else {
+    t15 = $[1];
+  }
   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
+    id: t16
+  } = t15;
+  const storyId = t16 === undefined ? null : t16;
+  let finalTypes;
+  let t17;
+  if ($[2] !== 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;
+  } else {
+    finalTypes = $[3];
+    t17 = $[4];
+  }
+  const fileTypes = t17;
+  const defaultFields = useDefaultFields();
+  const defaultFilters = useDefaultFilters();
+  const fields = providedFields ?? defaultFields;
+  const t18 = providedFilters ?? defaultFilters;
+  let t19;
+  if ($[5] !== finalTypes || $[6] !== storyId || $[7] !== t18) {
+    let t20;
+    if ($[9] !== finalTypes || $[10] !== storyId) {
+      t20 = filter => {
+        const {
+          id: t21,
+          options: t22
+        } = filter || {};
+        const id = t21 === undefined ? null : t21;
+        const options = t22 === undefined ? [] : t22;
+        if (id === "types" && finalTypes !== null) {
+          return false;
+        }
+        if (id === "source") {
+          if (storyId === null) {
+            return null;
+          }
+          return {
+            ...filter,
+            options: (options || []).map(t23 => {
+              const {
+                value: t24,
+                label: t25
+              } = t23 === undefined ? {} : t23;
+              const optionValue = t24 === undefined ? null : t24;
+              const label = t25 === undefined ? null : t25;
+              return optionValue === "document-" ? {
+                value: `document-${storyId}`,
+                label
+              } : {
+                value: optionValue,
+                label
+              };
+            })
+          };
+        }
+        return filter;
+      };
+      $[9] = finalTypes;
+      $[10] = storyId;
+      $[11] = t20;
+    } else {
+      t20 = $[11];
+    }
+    t19 = t18.map(t20).filter(_temp3);
+    $[5] = finalTypes;
+    $[6] = storyId;
+    $[7] = t18;
+    $[8] = t19;
+  } else {
+    t19 = $[8];
+  }
+  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();
-  const onMediaUploaded = useCallback(newMedias => Promise.all(newMedias.map(createMedia)).then(newAddedMedias => newAddedMedias), [createMedia]);
-  const fileTypes = useMemo(() => {
-    let finalTypes = [];
-    if (isArray(types)) {
-      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 ? [`${types}/*`] : null;
-    if (finalTypes !== null && isArray(finalTypes) && finalTypes.indexOf('video/*') !== -1) {
-      finalTypes.push('image/gif');
-    }
-    return finalTypes;
-  }, [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
-  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;
+  let t21;
+  if ($[14] !== createMedia) {
+    t21 = newMedias => Promise.all(newMedias.map(createMedia)).then(_temp4);
+    $[14] = createMedia;
+    $[15] = t21;
+  } else {
+    t21 = $[15];
+  }
+  const onMediaUploaded = t21;
+  const t22 = fileTypes !== null && fileTypes.length > 0 ? fileTypes : null;
+  let t23;
+  if ($[16] !== t22) {
+    t23 = {
+      allowedFileTypes: t22
+    };
+    $[16] = t22;
+    $[17] = t23;
+  } else {
+    t23 = $[17];
+  }
+  const uppyConfig = t23;
+  let t24;
+  if ($[18] !== source) {
+    t24 = source !== null ? {
+      source
+    } : null;
+    $[18] = source;
+    $[19] = t24;
+  } else {
+    t24 = $[19];
+  }
+  let t25;
+  if ($[20] !== query || $[21] !== t24) {
+    t25 = {
+      ...query,
+      ...t24
+    };
+    $[20] = query;
+    $[21] = t24;
+    $[22] = t25;
+  } else {
+    t25 = $[22];
+  }
+  const finalQuery = t25;
+  let t26;
+  if ($[23] !== value) {
+    t26 = isObject(value) ? [value] : value;
+    $[23] = value;
+    $[24] = t26;
+  } else {
+    t26 = $[24];
+  }
+  const pickerValue = t26;
+  let t27;
+  if ($[25] !== multiple || $[26] !== onChange) {
+    t27 = newValue => {
+      if (onChange !== null) {
+        onChange(!multiple && _isArray(newValue) ? newValue?.[0] ?? null : newValue);
       }
-      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, {
+    };
+    $[25] = multiple;
+    $[26] = onChange;
+    $[27] = t27;
+  } else {
+    t27 = $[27];
+  }
+  const onPickerChange = t27;
+  let t28;
+  if ($[28] !== className) {
+    t28 = classNames([styles.container, className]);
+    $[28] = className;
+    $[29] = t28;
+  } else {
+    t28 = $[29];
+  }
+  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, {
       className: styles.browser,
       api: mediasApi,
-      value: isObject(value) ? [value] : value,
-      theme: "dark",
-      types: finalTypes_0,
+      value: pickerValue,
+      types: finalTypes,
       query: finalQuery,
       items: initialMedias,
-      filters: finalFilters,
-      fields: fields$1,
+      filters: filters,
+      fields: fields,
       columns: columns,
       multiple: multiple,
-      onChange: onChange,
+      onChange: onPickerChange,
       uppyConfig: uppyConfig,
       onMediaUploaded: onMediaUploaded,
       onMediaFormOpen: onMediaFormOpen,
@@ -463,23 +811,286 @@ function MediaGallery({
     }) : /*#__PURE__*/jsx(MediasBrowserContainer, {
       className: styles.browser,
       api: mediasApi,
-      value: value,
-      theme: "dark",
-      types: finalTypes_0,
+      types: finalTypes,
       query: finalQuery,
       items: initialMedias,
-      filters: finalFilters,
-      fields: fields$1,
+      filters: filters,
+      fields: fields,
       columns: columns,
       uppyConfig: uppyConfig,
       onMediaUploaded: onMediaUploaded,
-      multipleSelection: true // allow multi-uploads in MediasBrowser
-      ,
+      multipleSelection: true,
       withStickySelection: true,
       withTrash: true,
       withReplace: true
-    })
-  });
+    });
+    $[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;
+  } else {
+    t29 = $[45];
+  }
+  let t30;
+  if ($[46] !== t28 || $[47] !== t29) {
+    t30 = /*#__PURE__*/jsx("div", {
+      className: t28,
+      children: t29
+    });
+    $[46] = t28;
+    $[47] = t29;
+    $[48] = t30;
+  } else {
+    t30 = $[48];
+  }
+  return t30;
+}
+function _temp4(newAddedMedias) {
+  return newAddedMedias;
+}
+function _temp3(f) {
+  return f !== null;
+}
+function _temp2(t_0) {
+  return t_0 !== null;
+}
+function _temp(t) {
+  return ["image", "video", "audio"].indexOf(t) !== -1 ? `${t}/*` : null;
+}
+
+function MediaGalleryModal(t0) {
+  const $ = c(47);
+  let initialValue;
+  let props;
+  let t1;
+  let t10;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  let t8;
+  let t9;
+  if ($[0] !== t0) {
+    ({
+      id: t1,
+      title: t2,
+      size: t3,
+      visible: t4,
+      autoClose: t5,
+      multiple: t6,
+      requestClose: t7,
+      onClosed: t8,
+      className: t9,
+      value: initialValue,
+      onChange: t10,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = initialValue;
+    $[2] = props;
+    $[3] = t1;
+    $[4] = t10;
+    $[5] = t2;
+    $[6] = t3;
+    $[7] = t4;
+    $[8] = t5;
+    $[9] = t6;
+    $[10] = t7;
+    $[11] = t8;
+    $[12] = t9;
+  } else {
+    initialValue = $[1];
+    props = $[2];
+    t1 = $[3];
+    t10 = $[4];
+    t2 = $[5];
+    t3 = $[6];
+    t4 = $[7];
+    t5 = $[8];
+    t6 = $[9];
+    t7 = $[10];
+    t8 = $[11];
+    t9 = $[12];
+  }
+  const id = t1 === undefined ? null : t1;
+  const title = t2 === undefined ? null : t2;
+  const size = t3 === undefined ? "xl" : t3;
+  const visible = t4 === undefined ? null : t4;
+  const autoClose = t5 === undefined ? true : t5;
+  const multiple = t6 === undefined ? false : t6;
+  const customRequestClose = t7 === undefined ? null : t7;
+  const onClosed = t8 === undefined ? null : t8;
+  const className = t9 === undefined ? null : t9;
+  const onChange = t10 === undefined ? null : t10;
+  const [opened, setOpened] = useState(true);
+  const [formOpen, setFormOpen] = useState(false);
+  const [value, setValue] = useState(initialValue);
+  let t11;
+  if ($[13] !== customRequestClose) {
+    t11 = customRequestClose ?? (() => {
+      setOpened(false);
+    });
+    $[13] = customRequestClose;
+    $[14] = t11;
+  } else {
+    t11 = $[14];
+  }
+  const requestClose = t11;
+  let t12;
+  if ($[15] !== autoClose || $[16] !== multiple || $[17] !== onChange || $[18] !== requestClose) {
+    t12 = newValue => {
+      if (!autoClose || multiple) {
+        setValue(newValue);
+      } else {
+        if (onChange !== null) {
+          onChange(newValue);
+        }
+      }
+      if (autoClose && !multiple) {
+        requestClose();
+      }
+    };
+    $[15] = autoClose;
+    $[16] = multiple;
+    $[17] = onChange;
+    $[18] = requestClose;
+    $[19] = t12;
+  } else {
+    t12 = $[19];
+  }
+  const onGalleryChange = t12;
+  let t13;
+  if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+    t13 = () => {
+      setFormOpen(true);
+    };
+    $[20] = t13;
+  } else {
+    t13 = $[20];
+  }
+  const onFormOpen = t13;
+  let t14;
+  if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+    t14 = () => {
+      setFormOpen(false);
+    };
+    $[21] = t14;
+  } else {
+    t14 = $[21];
+  }
+  const onFormClose = t14;
+  let t15;
+  if ($[22] !== onChange || $[23] !== value) {
+    t15 = () => {
+      if (onChange !== null) {
+        onChange(value);
+      }
+    };
+    $[22] = onChange;
+    $[23] = value;
+    $[24] = t15;
+  } else {
+    t15 = $[24];
+  }
+  const onClickSubmit = t15;
+  const t16 = id ?? "media-gallery";
+  let t17;
+  if ($[25] !== title) {
+    t17 = title || /*#__PURE__*/jsx(FormattedMessage, {
+      id: "ZpoE9K",
+      defaultMessage: "Select media"
+    });
+    $[25] = title;
+    $[26] = t17;
+  } else {
+    t17 = $[26];
+  }
+  const t18 = visible ?? opened;
+  const t19 = !formOpen;
+  const t20 = !formOpen;
+  let t21;
+  if ($[27] !== className) {
+    t21 = classNames(["modal-fullscreen-lg-down", className]);
+    $[27] = className;
+    $[28] = t21;
+  } else {
+    t21 = $[28];
+  }
+  let t22;
+  if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+    t22 = /*#__PURE__*/jsx(FormattedMessage, {
+      id: "rvOVCV",
+      defaultMessage: "Confirm selection"
+    });
+    $[29] = t22;
+  } else {
+    t22 = $[29];
+  }
+  let t23;
+  if ($[30] !== multiple || $[31] !== onGalleryChange || $[32] !== props || $[33] !== value) {
+    t23 = /*#__PURE__*/jsx(MediaGallery, {
+      isPicker: true,
+      multiple: multiple,
+      value: value,
+      onChange: onGalleryChange,
+      onMediaFormOpen: onFormOpen,
+      onMediaFormClose: onFormClose,
+      ...props
+    });
+    $[30] = multiple;
+    $[31] = onGalleryChange;
+    $[32] = props;
+    $[33] = value;
+    $[34] = t23;
+  } else {
+    t23 = $[34];
+  }
+  let t24;
+  if ($[35] !== onClickSubmit || $[36] !== onClosed || $[37] !== requestClose || $[38] !== size || $[39] !== t16 || $[40] !== t17 || $[41] !== t18 || $[42] !== t19 || $[43] !== t20 || $[44] !== t21 || $[45] !== t23) {
+    t24 = /*#__PURE__*/jsx(Dialog, {
+      id: t16,
+      title: t17,
+      size: size,
+      visible: t18,
+      withCancelButton: t19,
+      withSubmitButton: t20,
+      requestClose: requestClose,
+      onClosed: onClosed,
+      onClickSubmit: onClickSubmit,
+      className: t21,
+      submitButtonLabel: t22,
+      children: t23
+    });
+    $[35] = onClickSubmit;
+    $[36] = onClosed;
+    $[37] = requestClose;
+    $[38] = size;
+    $[39] = t16;
+    $[40] = t17;
+    $[41] = t18;
+    $[42] = t19;
+    $[43] = t20;
+    $[44] = t21;
+    $[45] = t23;
+    $[46] = t24;
+  } else {
+    t24 = $[46];
+  }
+  return t24;
 }
 
-export { MediaGallery as default };
+export { MediaGallery, MediaGalleryModal, MediaGallery as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/media-gallery",
-    "version": "0.4.88",
+    "version": "0.4.90-alpha.1",
     "private": false,
     "description": "",
     "keywords": [
@@ -66,9 +66,9 @@
         "@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.88",
-        "@micromag/data": "^0.4.88",
-        "@panneau/medias": "^4.0.42",
+        "@micromag/core": "^0.4.90-alpha.1",
+        "@micromag/data": "^0.4.90-alpha.1",
+        "@panneau/medias": "^4.0.55",
         "bootstrap": "^5.3.8",
         "classnames": "^2.2.6",
         "lodash": "^4.17.23",
@@ -80,6 +80,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "cf331286bb6037d61e664cd5c961955c136719c6",
+    "gitHead": "a13dd2242ee733dc3b3663354783f0b4395f9926",
     "types": "es/index.d.ts"
 }