@edifice.io/react 2.0.0-develop-rc.8 → 2.0.0-develop-rc.14

package/dist/ui/src/multimedia/ImageEditor/hooks/useImageEffects.js

@@ -0,0 +1,52 @@
+import { start as start$1, stop as stop$1 } from "../effects/blur.js";
+import { start, save, stop } from "../effects/crop.js";
+import { save as save$1, stop as stop$2, start as start$2 } from "../effects/resize.js";
+import { rotate } from "../effects/rotate.js";
+function useImageEffects({
+  application,
+  spriteName,
+  onSave
+}) {
+  return {
+    rotate: async () => {
+      application && await rotate(application, spriteName);
+    },
+    startCrop: () => {
+      application && start(application, {
+        spriteName
+      });
+    },
+    stopCrop: (save$12) => {
+      if (application) {
+        if (save$12) {
+          const result = save(application);
+          result && onSave(result);
+        }
+        stop(application);
+      }
+    },
+    startBlur: () => {
+      application && start$1(application, {
+        spriteName
+      });
+    },
+    stopBlur: () => {
+      application && stop$1(application);
+    },
+    startResize: () => {
+      application && start$2(application, spriteName);
+    },
+    stopResize: (save2) => {
+      if (application) {
+        if (save2) {
+          const result = save$1(application);
+          result && onSave(result);
+        }
+        stop$2(application);
+      }
+    }
+  };
+}
+export {
+  useImageEffects as default
+};

package/dist/ui/src/multimedia/ImageEditor/utils/aggregate.js

@@ -0,0 +1,13 @@
+function aggregate(delay, map, callback) {
+  let timerId;
+  const pending = [];
+  return function(arg) {
+    pending.push(map(arg)), !timerId && (timerId = setTimeout(() => {
+      const copy = [...pending];
+      pending.splice(0, pending.length), callback(copy), timerId = void 0;
+    }, delay));
+  };
+}
+export {
+  aggregate
+};

package/dist/ui/src/multimedia/ImagePickerWorkspace/ImagePickerWorkspace.js

@@ -0,0 +1,39 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Edit as SvgEdit$1, Delete as SvgDelete$1 } from "../../../../icons/dist/index.js";
+import clsx from "clsx";
+import IconButton from "../../components/Button/IconButton.js";
+import Avatar from "../../components/Avatar/Avatar.js";
+import { AppIcon } from "../../components/AppIcon/AppIcon.js";
+const ImagePickerWorkspace = ({
+  addButtonLabel = "Add image",
+  deleteButtonLabel = "Delete image",
+  src,
+  className,
+  mediaLibraryRef,
+  libraryMedia,
+  app,
+  onUploadImage,
+  onDeleteImage
+}) => {
+  const [preview, setPreview] = useState(src || "");
+  useEffect(() => {
+    libraryMedia && (setPreview(libraryMedia), onUploadImage(libraryMedia));
+  }, [libraryMedia]);
+  const handleClick = () => {
+    var _a;
+    (_a = mediaLibraryRef.current) == null || _a.show("image");
+  }, handleClean = () => {
+    setPreview(""), onDeleteImage();
+  }, classes = clsx("image-input", className);
+  return /* @__PURE__ */ jsxs("div", { id: "image-input", className: classes, children: [
+    /* @__PURE__ */ jsxs("div", { className: "image-input-actions gap-8", children: [
+      /* @__PURE__ */ jsx(IconButton, { "aria-label": addButtonLabel, color: "tertiary", icon: /* @__PURE__ */ jsx(SvgEdit$1, {}), onClick: handleClick, type: "button", variant: "ghost" }),
+      /* @__PURE__ */ jsx(IconButton, { "aria-label": deleteButtonLabel, color: "danger", disabled: !preview, icon: /* @__PURE__ */ jsx(SvgDelete$1, { width: "20", height: "20" }), onClick: handleClean, type: "button", variant: "ghost" })
+    ] }),
+    preview ? /* @__PURE__ */ jsx(Avatar, { alt: "", src: preview, size: "xl" }) : /* @__PURE__ */ jsx(AppIcon, { app, iconFit: "ratio", size: "160", variant: "rounded" })
+  ] });
+};
+export {
+  ImagePickerWorkspace as default
+};

package/dist/ui/src/multimedia/Linker/ExternalLinker.js

@@ -0,0 +1,45 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { StringUtils } from "../../utils/StringUtils.js";
+import useToggle from "../../hooks/useToggle/useToggle.js";
+import FormControl from "../../components/Form/FormControl.js";
+import Label from "../../components/Label/Label.js";
+import Input from "../../components/Input/Input.js";
+import Checkbox from "../../components/Checkbox/Checkbox.js";
+const ExternalLinker = ({
+  link,
+  onChange,
+  multiNodeSelected = !1
+}) => {
+  const {
+    t
+  } = useTranslation(), [linkText, setLinkText] = useState((link == null ? void 0 : link.text) || ""), [linkURL, setLinkURL] = useState((link == null ? void 0 : link.url) || ""), [isBlankTarget, toggleBlankTarget] = useToggle(link ? link.target === "_blank" : !0);
+  return useEffect(() => {
+    multiNodeSelected && (link != null && link.text) && setLinkText(link.text.slice(0, 20) + "...");
+  }, [multiNodeSelected, link]), useEffect(() => {
+    if (!linkURL.length) {
+      onChange == null || onChange();
+      return;
+    }
+    const newLink = {
+      url: linkURL,
+      text: multiNodeSelected ? link == null ? void 0 : link.text : linkText || linkURL,
+      target: isBlankTarget ? "_blank" : void 0
+    };
+    !StringUtils.isLocalURL(linkURL) && !StringUtils.startWithHttp(linkURL) && (newLink.url = "http://" + linkURL), onChange == null || onChange(newLink);
+  }, [linkText, linkURL, isBlankTarget]), /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "d-flex flex-column flex-fill gap-24", children: [
+    /* @__PURE__ */ jsxs(FormControl, { id: "linkText", isOptional: !0, children: [
+      /* @__PURE__ */ jsx(Label, { children: t("bbm.linker.ext.text") }),
+      /* @__PURE__ */ jsx(Input, { type: "text", placeholder: t("bbm.linker.ext.text.placeholder"), size: "md", disabled: multiNodeSelected, value: linkText, onChange: (e) => setLinkText(e.target.value) })
+    ] }),
+    /* @__PURE__ */ jsxs(FormControl, { id: "linkUrl", isRequired: !0, children: [
+      /* @__PURE__ */ jsx(Label, { children: t("bbm.linker.ext.url") }),
+      /* @__PURE__ */ jsx(Input, { type: "text", placeholder: t("bbm.linker.ext.url.placeholder"), size: "md", value: linkURL, onChange: (e) => setLinkURL(e.target.value) })
+    ] }),
+    /* @__PURE__ */ jsx(Checkbox, { label: t("bbm.linker.open.tab"), onChange: () => toggleBlankTarget(), checked: isBlankTarget })
+  ] }) });
+}, ExternalLinker$1 = ExternalLinker;
+export {
+  ExternalLinker$1 as default
+};

package/dist/ui/src/multimedia/Linker/InternalLinker.js

@@ -0,0 +1,114 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useEffect } from "react";
+import { odeServices } from "edifice-ts-client";
+import { Applications as SvgApplications$1 } from "../../../../icons/dist/index.js";
+import { useTranslation } from "react-i18next";
+import LinkerCard from "../LinkerCard/LinkerCard.js";
+import { useResourceSearch } from "../../core/useResourceSearch/useResourceSearch.js";
+import useDebounce from "../../hooks/useDebounce/useDebounce.js";
+import Dropdown from "../../components/Dropdown/Dropdown.js";
+import SearchBar from "../../components/SearchBar/SearchBar.js";
+import EmptyScreen from "../../components/EmptyScreen/EmptyScreen.js";
+import usePaths from "../../core/usePaths/usePaths.js";
+import { useOdeTheme } from "../../core/ThemeProvider/ThemeProvider.js";
+import { AppIcon } from "../../components/AppIcon/AppIcon.js";
+const InternalLinker = ({
+  appCode,
+  defaultAppCode,
+  defaultResourceId,
+  onChange,
+  onSelect,
+  multiple = !0
+}) => {
+  const {
+    t
+  } = useTranslation(), {
+    theme
+  } = useOdeTheme(), [imagePath] = usePaths(), {
+    resourceApplications,
+    loadResources
+  } = useResourceSearch(appCode), [options, setOptions] = useState(), [selectedApplication, setSelectedApplication] = useState(), [searchTerms, setSearchTerms] = useState(), debounceSearch = useDebounce(searchTerms || "", 500), [resources, setResources] = useState([]), loadAndDisplayResources = useCallback((search) => {
+    async function load() {
+      if (selectedApplication)
+        try {
+          const searchLower = search == null ? void 0 : search.toLowerCase(), resources2 = (await loadResources({
+            application: selectedApplication.application,
+            search,
+            types: [selectedApplication.application],
+            filters: {},
+            pagination: {
+              startIdx: 0,
+              pageSize: 300
+            }
+            // ignored at the moment
+          })).filter((resource) => {
+            var _a, _b, _c;
+            return !searchLower || searchLower.length === 0 ? !0 : ((_a = resource.name) == null ? void 0 : _a.toLowerCase().includes(searchLower)) || ((_b = resource.creatorName) == null ? void 0 : _b.toLowerCase().includes(searchLower)) || ((_c = resource.description) == null ? void 0 : _c.toLowerCase().includes(searchLower)) || !1;
+          }).sort((a, b) => a.modifiedAt < b.modifiedAt ? 1 : -1);
+          setResources(resources2);
+          return;
+        } catch {
+        }
+      setResources([]);
+    }
+    load();
+  }, [loadResources, selectedApplication]), [selectedDocuments, setSelectedDocuments] = useState([]), handleOptionClick = (option) => {
+    onChange == null || onChange(option), setSelectedApplication(option);
+  }, handleSearchChange = (event) => {
+    const newText = event.target.value;
+    setSearchTerms(newText.toString());
+  }, handleSubmit = useCallback((event) => {
+    loadAndDisplayResources(searchTerms), event.stopPropagation(), event.preventDefault();
+  }, [loadAndDisplayResources, searchTerms]), getSelectedResourceIndex = useCallback((resourceId) => selectedDocuments.findIndex((selectedDocument) => selectedDocument.assetId === resourceId), [selectedDocuments]), selectResource = useCallback((resource) => {
+    setSelectedDocuments(multiple ? (previousState) => [...previousState, resource] : [resource]);
+  }, [setSelectedDocuments, multiple]), toggleResourceSelection = useCallback((resource) => {
+    const index = getSelectedResourceIndex(resource.assetId);
+    index < 0 ? selectResource(resource) : setSelectedDocuments(selectedDocuments.filter((_value, i) => i !== index));
+  }, [getSelectedResourceIndex, selectResource, selectedDocuments]);
+  return useEffect(() => {
+    (async () => {
+      const appPromises = resourceApplications.map((application) => odeServices.session().getWebApp(application)), webApps = await Promise.all(appPromises);
+      setOptions(resourceApplications.map((application, index) => {
+        var _a;
+        return {
+          application,
+          displayName: t(((_a = webApps[index]) == null ? void 0 : _a.displayName) ?? application),
+          icon: /* @__PURE__ */ jsx(AppIcon, { app: webApps[index] })
+        };
+      }).sort((app1, app2) => app1.displayName.localeCompare(app2.displayName)));
+    })();
+  }, [resourceApplications, t]), useEffect(() => {
+    loadAndDisplayResources(debounceSearch);
+  }, [loadAndDisplayResources, debounceSearch]), useEffect(() => {
+    onSelect == null || onSelect(selectedDocuments);
+  }, [selectedDocuments]), useEffect(() => {
+    if (defaultAppCode) {
+      const option = options == null ? void 0 : options.find((option2) => defaultAppCode === option2.application);
+      setSelectedApplication(option), loadAndDisplayResources("");
+    }
+  }, [options]), useEffect(() => {
+    if (defaultResourceId && getSelectedResourceIndex(defaultResourceId) < 0) {
+      const resource = resources == null ? void 0 : resources.find((resource2) => defaultResourceId === resource2.assetId);
+      resource && selectResource(resource);
+    }
+  }, [resources]), /* @__PURE__ */ jsxs("div", { className: "d-flex flex-column flex-fill overflow-hidden", children: [
+    /* @__PURE__ */ jsxs("div", { className: "search d-flex bg-light rounded-top border border-bottom-0", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-shrink-1 px-8 py-12 border-end", children: /* @__PURE__ */ jsxs(Dropdown, { overflow: !0, children: [
+        /* @__PURE__ */ jsx(Dropdown.Trigger, { icon: /* @__PURE__ */ jsx("div", { className: "pe-8", children: (selectedApplication == null ? void 0 : selectedApplication.icon) || /* @__PURE__ */ jsx(SvgApplications$1, {}) }), label: t((selectedApplication == null ? void 0 : selectedApplication.displayName) || "bbm.linker.int.choose"), variant: "ghost", size: "md" }),
+        /* @__PURE__ */ jsx(Dropdown.Menu, { children: options == null ? void 0 : options.map((option) => /* @__PURE__ */ jsx(Dropdown.Item, { icon: option.icon, onClick: () => handleOptionClick(option), children: option.displayName }, option.application)) })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex-grow-1 align-self-center", children: /* @__PURE__ */ jsx("form", { className: "gap-16 d-flex w-100 align-items-center px-16 py-8", onSubmit: handleSubmit, children: /* @__PURE__ */ jsx(SearchBar, { isVariant: !0, placeholder: t("search"), size: "lg", className: "w-100", disabled: !selectedApplication, onChange: handleSearchChange }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "internal-linker flex-grow-1 w-100 rounded-bottom border gap-0 overflow-auto", children: [
+      selectedApplication && resources && resources.length > 0 && /* @__PURE__ */ jsx("div", { children: resources.map((resource) => {
+        const isSelected = selectedDocuments.findIndex((doc) => doc.assetId === resource.assetId) >= 0;
+        return /* @__PURE__ */ jsx(LinkerCard, { doc: resource, isSelected, onClick: () => toggleResourceSelection(resource) }, resource.path);
+      }) }),
+      selectedApplication && resources && resources.length <= 0 && /* @__PURE__ */ jsx("div", { className: "d-flex justify-content-center mt-16", children: /* @__PURE__ */ jsx(EmptyScreen, { imageSrc: `${imagePath}/${theme == null ? void 0 : theme.bootstrapVersion}/illu-empty-search-${selectedApplication.application}.svg`, text: t("bbm.linker.int.notfound"), className: "mt-16" }) }),
+      !selectedApplication && /* @__PURE__ */ jsx("div", { className: "d-flex justify-content-center mt-32", children: /* @__PURE__ */ jsx(EmptyScreen, { imageSrc: `${imagePath}/${theme == null ? void 0 : theme.bootstrapVersion}/illu-empty-search.svg`, text: t("bbm.linker.int.empty"), className: "mt-32" }) })
+    ] })
+  ] });
+}, InternalLinker$1 = InternalLinker;
+export {
+  InternalLinker$1 as default
+};

package/dist/ui/src/multimedia/LinkerCard/LinkerCard.js

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import clsx from "clsx";
+import { Users as SvgUsers$1 } from "../../../../icons/dist/index.js";
+import useDate from "../../core/useDate/useDate.js";
+import Card from "../../components/Card/Card.js";
+import Image from "../../components/Image/Image.js";
+import { AppIcon } from "../../components/AppIcon/AppIcon.js";
+const LinkerCard = ({
+  doc,
+  isClickable = !0,
+  isSelectable = !1,
+  isSelected = !1,
+  onClick,
+  className
+}) => {
+  const {
+    fromNow
+  } = useDate(), {
+    fromDate
+  } = useMemo(() => ({
+    fromDate: fromNow(doc.modifiedAt)
+  }), [fromNow, doc]);
+  return /* @__PURE__ */ jsx(Card, { className: clsx("card-linker shadow-none", className), isClickable, isSelectable, isSelected, onClick, children: /* @__PURE__ */ jsxs(Card.Body, { space: "8", children: [
+    /* @__PURE__ */ jsx("div", { className: "card-image ps-8 pe-4", children: doc.thumbnail && doc.thumbnail.length > 0 ? /* @__PURE__ */ jsx(Image, { alt: "", height: 48, width: 48, src: doc.thumbnail, objectFit: "cover", className: "rounded h-full", style: {
+      aspectRatio: 1 / 1
+    } }) : /* @__PURE__ */ jsx(AppIcon, { app: doc.application, iconFit: "ratio", size: "48", variant: "rounded" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "w-75", children: [
+      /* @__PURE__ */ jsx(Card.Text, { children: doc.name }),
+      /* @__PURE__ */ jsx(Card.Text, { className: "text-black-50", children: doc == null ? void 0 : doc.creatorName })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "d-none d-md-block text-black-50 ps-4 pe-8", children: /* @__PURE__ */ jsx(Card.Text, { children: fromDate }) }),
+    doc.shared && /* @__PURE__ */ jsx("div", { className: "ps-4 pe-8", children: /* @__PURE__ */ jsx(SvgUsers$1, { width: "20", height: "20" }) })
+  ] }) });
+}, LinkerCard$1 = LinkerCard;
+export {
+  LinkerCard$1 as default
+};

package/dist/ui/src/multimedia/MediaLibrary/MediaLibrary.js

@@ -0,0 +1,211 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef, useRef, useImperativeHandle, useState, useMemo, useEffect, useCallback } from "react";
+import { odeServices } from "edifice-ts-client";
+import { useTranslation } from "react-i18next";
+import { Folder as SvgFolder$1, Smartphone as SvgSmartphone$1, RecordVideo as SvgRecordVideo$1, Mic as SvgMic$1, Globe as SvgGlobe$1, Applications as SvgApplications$1, Code as SvgCode$1 } from "../../../../icons/dist/index.js";
+import Modal from "../../components/Modal/Modal.js";
+import { MediaLibraryContext } from "./MediaLibraryContext.js";
+import { InnerTabs } from "./innertabs/index.js";
+import { useHttpErrorToast } from "../../core/useHttpErrorToast/useHttpErrorToast.js";
+import useHasWorkflow from "../../core/useHasWorkflow/useHasWorkflow.js";
+import Tabs from "../../components/Tabs/Tabs.js";
+import Button from "../../components/Button/Button.js";
+const orderedTabs = [
+  "audio-capture",
+  "video-capture",
+  "internal-link",
+  // Link to a shared resource (previously known as "internal linker")
+  "external-link",
+  // Link to an external website (previously known as "external linker")
+  "iframe",
+  // Framed website
+  "upload",
+  // Filesystem browser + drag'n'drop of files
+  "workspace",
+  // Media browser
+  "video-embedder"
+  // Link to a hosted video
+], mediaLibraryTypes = {
+  none: null,
+  audio: {
+    title: "bbm.audio.modal.title",
+    defaultTab: "audio-capture"
+  },
+  video: {
+    title: "bbm.video.modal.title",
+    defaultTab: "video-capture"
+  },
+  image: {
+    title: "bbm.image.modal.title",
+    defaultTab: "workspace"
+  },
+  attachment: {
+    title: "bbm.attachment.modal.title",
+    defaultTab: "workspace"
+  },
+  hyperlink: {
+    title: "bbm.link.modal.title",
+    defaultTab: "linker"
+  },
+  embedder: {
+    title: "bbm.embed.modal.title",
+    defaultTab: "iframe"
+  }
+}, MediaLibrary = /* @__PURE__ */ forwardRef(({
+  appCode,
+  visibility,
+  multiple,
+  onSuccess,
+  onCancel,
+  onTabChange
+}, ref) => {
+  var _a;
+  const linkTabProps = useRef(), refModal = useRef(null);
+  useImperativeHandle(ref, () => ({
+    show,
+    hide,
+    showLink,
+    type,
+    ...refModal.current
+  })), useHttpErrorToast({
+    isDismissible: !0,
+    duration: 1 / 0
+  });
+  const {
+    t
+  } = useTranslation(), workspaceCreateWorkflow = useHasWorkflow("org.entcore.workspace.controllers.WorkspaceController|addDocument"), videoCaptureWorkflow = useHasWorkflow("com.opendigitaleducation.video.controllers.VideoController|capture"), [type, setType] = useState(null), availableTabs = {
+    workspace: {
+      id: "workspace",
+      icon: /* @__PURE__ */ jsx(SvgFolder$1, {}),
+      label: t("bbm.workspace"),
+      content: /* @__PURE__ */ jsx(InnerTabs.Workspace, {}),
+      availableFor: ["audio", "video", "image", "attachment"],
+      isEnable: null
+    },
+    upload: {
+      id: "upload",
+      icon: /* @__PURE__ */ jsx(SvgSmartphone$1, {}),
+      label: t("bbm.device"),
+      content: /* @__PURE__ */ jsx(InnerTabs.Upload, {}),
+      availableFor: ["audio", "video", "image", "attachment"],
+      isEnable: () => !!workspaceCreateWorkflow
+    },
+    "video-capture": {
+      id: "video-capture",
+      icon: /* @__PURE__ */ jsx(SvgRecordVideo$1, {}),
+      label: t("bbm.video"),
+      content: /* @__PURE__ */ jsx(InnerTabs.Video, {}),
+      availableFor: ["video"],
+      isEnable: () => !!videoCaptureWorkflow
+    },
+    "audio-capture": {
+      id: "audio-capture",
+      icon: /* @__PURE__ */ jsx(SvgMic$1, {}),
+      label: t("bbm.audio"),
+      content: /* @__PURE__ */ jsx(InnerTabs.Audio, {}),
+      availableFor: ["audio"],
+      isEnable: () => !!workspaceCreateWorkflow
+    },
+    "external-link": {
+      id: "external-link",
+      icon: /* @__PURE__ */ jsx(SvgGlobe$1, {}),
+      label: t("bbm.linker.ext"),
+      content: /* @__PURE__ */ jsx(InnerTabs.ExternalLink, { ...linkTabProps.current }),
+      availableFor: ["hyperlink"],
+      isEnable: null
+    },
+    "internal-link": {
+      id: "internal-link",
+      icon: /* @__PURE__ */ jsx(SvgApplications$1, {}),
+      label: t("bbm.linker.int"),
+      content: /* @__PURE__ */ jsx(InnerTabs.InternalLink, { ...linkTabProps.current }),
+      availableFor: ["hyperlink"],
+      isEnable: null
+    },
+    iframe: {
+      id: "iframe",
+      icon: /* @__PURE__ */ jsx(SvgCode$1, {}),
+      label: t("bbm.embed"),
+      content: /* @__PURE__ */ jsx(InnerTabs.Iframe, {}),
+      availableFor: ["embedder"],
+      isEnable: null
+    },
+    "video-embedder": {
+      id: "iframe",
+      icon: /* @__PURE__ */ jsx(SvgCode$1, {}),
+      label: t("bbm.embed"),
+      content: /* @__PURE__ */ jsx(InnerTabs.VideoEmbedder, {}),
+      availableFor: ["video"],
+      isEnable: null
+    }
+  }, tabs = useMemo(
+    () => orderedTabs.map((key) => availableTabs[key]).filter((tab) => {
+      var _a2;
+      return ((_a2 = tab.isEnable) == null ? void 0 : _a2.call(tab)) !== !1 && (tab.availableFor.length === 0 || tab.availableFor.includes(type));
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [type]
+  ), [defaultTabId, setDefaultTabId] = useState(), defaultTabIdx = useMemo(() => {
+    const index = tabs.findIndex((t2) => t2.id === defaultTabId);
+    return 0 > index || index >= tabs.length ? 0 : index;
+  }, [tabs, defaultTabId]), [resultCounter, setResultCounter] = useState(), [result, setResult] = useState(), [deletionsOnCancel, setDeletionsOnCancel] = useState([]), [onSuccessAction, setPreSuccess] = useState();
+  function setVisibleTab(tab) {
+    throw tabs.findIndex((t2) => t2.id === tab) < 0 ? "tab.not.visible" : "not.implemented.yet";
+  }
+  function switchType(type2) {
+    linkTabProps.current = void 0, setDefaultTabId(void 0), setType(type2);
+  }
+  const show = (type2) => {
+    setType(type2);
+  }, hide = () => {
+    setType(null);
+  }, showLink = (props) => {
+    linkTabProps.current = props, !("resourceId" in props || "appPrefix" in props) && setDefaultTabId("external-link"), setType("hyperlink");
+  };
+  useEffect(() => {
+    var _a2, _b;
+    const typeKey = type || "none";
+    !defaultTabId && typeof ((_a2 = mediaLibraryTypes[typeKey]) == null ? void 0 : _a2.defaultTab) == "string" && setDefaultTabId((_b = mediaLibraryTypes[typeKey]) == null ? void 0 : _b.defaultTab);
+  }, [defaultTabId, type]);
+  const modalHeader = t(((_a = mediaLibraryTypes[type ?? "none"]) == null ? void 0 : _a.title) ?? "bbm"), resetState = () => {
+    linkTabProps.current = void 0, setResult(void 0), setResultCounter(void 0), setDefaultTabId(void 0), setPreSuccess(void 0), setDeletionsOnCancel([]);
+  }, handleTabChange = (tab) => {
+    onTabChange == null || onTabChange(tab, deletionsOnCancel), resetState();
+  }, handleOnSuccess = useCallback(() => {
+    const triggerSuccess = async (result2) => {
+      result2 instanceof Array && ["protected", "public"].findIndex((v) => v === visibility) >= 0 && (result2 = await odeServices.workspace().transferDocuments(result2, appCode ?? "media-library", visibility)), onSuccess(result2);
+    };
+    onSuccessAction ? onSuccessAction().then((result2) => {
+      triggerSuccess(result2);
+    }) : result && triggerSuccess(result), resetState();
+  }, [onSuccessAction, result, onSuccess, visibility]), handleOnCancel = () => {
+    onCancel(deletionsOnCancel), resetState();
+  };
+  return type && /* @__PURE__ */ jsx(MediaLibraryContext.Provider, { value: {
+    appCode,
+    visibility,
+    multiple,
+    type,
+    setResultCounter,
+    setResult,
+    setCancellable: (uploads) => setDeletionsOnCancel([...uploads]),
+    setVisibleTab,
+    switchType,
+    setPreSuccess
+  }, children: /* @__PURE__ */ jsxs(Modal, { id: "media-library", isOpen: type !== null, onModalClose: handleOnCancel, size: "lg", viewport: !0, scrollable: !0, children: [
+    /* @__PURE__ */ jsx(Modal.Header, { onModalClose: handleOnCancel, children: modalHeader }),
+    /* @__PURE__ */ jsx(Tabs, { items: tabs, defaultId: tabs[defaultTabIdx].id, onChange: handleTabChange, children: (currentItem) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      tabs.length > 1 && /* @__PURE__ */ jsx(Tabs.List, { className: "mt-16" }),
+      /* @__PURE__ */ jsx(Modal.Body, { className: "d-flex", children: /* @__PURE__ */ jsx(Tabs.Panel, { currentItem, children: currentItem == null ? void 0 : currentItem.content }) })
+    ] }) }),
+    /* @__PURE__ */ jsxs(Modal.Footer, { children: [
+      /* @__PURE__ */ jsx(Button, { type: "button", color: "tertiary", variant: "ghost", onClick: handleOnCancel, children: t("cancel") }),
+      /* @__PURE__ */ jsx(Button, { type: "button", color: "primary", variant: "filled", disabled: typeof result > "u", onClick: handleOnSuccess, children: resultCounter && resultCounter > 1 ? t("addMultiple", {
+        number: resultCounter
+      }) : t("add") })
+    ] })
+  ] }) });
+});
+export {
+  MediaLibrary as default
+};

package/dist/ui/src/multimedia/MediaLibrary/MediaLibraryContext.js

@@ -0,0 +1,12 @@
+import { createContext, useContext } from "react";
+const MediaLibraryContext = /* @__PURE__ */ createContext(null);
+function useMediaLibraryContext() {
+  const context = useContext(MediaLibraryContext);
+  if (!context)
+    throw new Error("Innertabs compound components cannot be rendered outside the MediaLibrary component");
+  return context;
+}
+export {
+  MediaLibraryContext,
+  useMediaLibraryContext
+};

package/dist/ui/src/multimedia/MediaLibrary/innertabs/Audio.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useMediaLibraryContext } from "../MediaLibraryContext.js";
+import AudioRecorder from "../../AudioRecorder/AudioRecorder.js";
+const Audio = () => {
+  const {
+    setResult,
+    setPreSuccess,
+    visibility
+  } = useMediaLibraryContext(), ref = useRef(null);
+  return /* @__PURE__ */ jsx(AudioRecorder, { ref, onRecordUpdated: (recordURL) => {
+    recordURL ? (setResult(recordURL), setPreSuccess(() => ref.current.save)) : setResult();
+  }, onSaveSuccess: (audioRessource) => {
+    audioRessource && setResult(audioRessource);
+  }, hideSaveAction: !0, visibility });
+};
+export {
+  Audio
+};

package/dist/ui/src/multimedia/MediaLibrary/innertabs/ExternalLink.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import ExternalLinker from "../../Linker/ExternalLinker.js";
+import { useMediaLibraryContext } from "../MediaLibraryContext.js";
+const ExternalLink = ({
+  link,
+  multiNodeSelected = !1
+}) => {
+  const {
+    setResult
+  } = useMediaLibraryContext();
+  return /* @__PURE__ */ jsx(ExternalLinker, { link, onChange: (link2) => {
+    setResult(link2);
+  }, multiNodeSelected });
+};
+export {
+  ExternalLink
+};

package/dist/ui/src/multimedia/MediaLibrary/innertabs/Iframe.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { useMediaLibraryContext } from "../MediaLibraryContext.js";
+import Embed from "../../Embed/Embed.js";
+const Iframe = () => {
+  const {
+    setResult
+  } = useMediaLibraryContext();
+  return /* @__PURE__ */ jsx(Embed, { onSuccess: (ressource) => {
+    ressource = ressource == null ? void 0 : ressource.replace(/<p /g, "<div ").replace(/\/p>/g, "/div>"), setResult(ressource);
+  } });
+};
+export {
+  Iframe
+};

package/dist/ui/src/multimedia/MediaLibrary/innertabs/InternalLink.js

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import InternalLinker from "../../Linker/InternalLinker.js";
+import { useMediaLibraryContext } from "../MediaLibraryContext.js";
+import useToggle from "../../../hooks/useToggle/useToggle.js";
+import Checkbox from "../../../components/Checkbox/Checkbox.js";
+const InternalLink = ({
+  target,
+  resourceId,
+  appPrefix
+}) => {
+  const {
+    t
+  } = useTranslation(), {
+    setResult,
+    setResultCounter,
+    appCode,
+    multiple
+  } = useMediaLibraryContext(), [isChecked, toggleChecked] = useToggle(target === "_blank"), [resources, setRessources] = useState([]), handleSelect = (resources2) => {
+    setRessources(resources2);
+  };
+  return useEffect(() => {
+    setResult({
+      target: isChecked ? "_blank" : void 0,
+      resources
+    }), resources && resources.length ? setResultCounter(resources.length) : setResultCounter(void 0);
+  }, [isChecked, resources]), /* @__PURE__ */ jsxs("div", { className: "d-flex flex-column flex-fill gap-16 overflow-hidden", children: [
+    /* @__PURE__ */ jsx(InternalLinker, { appCode, defaultAppCode: appPrefix, defaultResourceId: resourceId, onSelect: handleSelect, multiple }),
+    /* @__PURE__ */ jsx(Checkbox, { className: "align-items-center", checked: isChecked, label: t("bbm.linker.open.tab"), onChange: toggleChecked })
+  ] });
+};
+export {
+  InternalLink
+};

package/dist/ui/src/multimedia/MediaLibrary/innertabs/Upload.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { useMediaLibraryContext } from "../MediaLibraryContext.js";
+import Dropzone from "../../../components/Dropzone/Dropzone.js";
+import UploadFiles from "../../UploadFiles/UploadFiles.js";
+const acceptedTypes = (type) => {
+  const acceptedTypes2 = [];
+  switch (type) {
+    case "audio":
+      acceptedTypes2.push("audio/*");
+      break;
+    case "video":
+      acceptedTypes2.push("video/*");
+      break;
+    case "image":
+      acceptedTypes2.push("image/png"), acceptedTypes2.push("image/jpeg"), acceptedTypes2.push("image/webp"), acceptedTypes2.push("image/gif"), acceptedTypes2.push("image/avif");
+      break;
+  }
+  return acceptedTypes2;
+}, Upload = () => {
+  const {
+    type,
+    visibility,
+    multiple,
+    setResult,
+    setResultCounter,
+    setCancellable
+  } = useMediaLibraryContext(), handleOnFilesChange = (uploadedFiles) => {
+    uploadedFiles.length ? (setCancellable(uploadedFiles), setResultCounter(uploadedFiles.length), setResult(uploadedFiles)) : (setCancellable([]), setResultCounter(void 0), setResult(void 0));
+  };
+  return /* @__PURE__ */ jsx("div", { className: "py-8 flex-grow-1", children: /* @__PURE__ */ jsx(Dropzone, { multiple, accept: acceptedTypes(type ?? "embedder"), children: /* @__PURE__ */ jsx(UploadFiles, { onFilesChange: handleOnFilesChange, visibility }) }) });
+};
+export {
+  Upload
+};