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

package/dist/modules/multimedia/Linker/InternalLinker/InternalLinker.js

@@ -0,0 +1,129 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useEffect } from "react";
+import { odeServices } from "@edifice.io/ts-client";
+import { useTranslation } from "react-i18next";
+import { useDebounce } from "@uidotdev/usehooks";
+import { useEdificeTheme } from "../../../../providers/EdificeThemeProvider/EdificeThemeProvider.hook.js";
+import SvgIconApplications from "../../../icons/components/IconApplications.js";
+import LinkerCard from "../../LinkerCard/LinkerCard.js";
+import { useResourceSearch } from "../../../../hooks/useResourceSearch/useResourceSearch.js";
+import AppIcon from "../../../../components/AppIcon/AppIcon.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 "../../../../hooks/usePaths/usePaths.js";
+const InternalLinker = ({
+  appCode,
+  defaultAppCode,
+  defaultResourceId,
+  onChange,
+  onSelect,
+  multiple = !0,
+  resourceList,
+  applicationList,
+  showApplicationSelector = !0
+}) => {
+  const {
+    t
+  } = useTranslation(), {
+    theme
+  } = useEdificeTheme(), [imagePath] = usePaths(), {
+    resourceApplications,
+    loadResources
+  } = useResourceSearch(appCode), [options, setOptions] = useState(), [selectedApplication, setSelectedApplication] = useState(), [searchTerms, setSearchTerms] = useState(), debounceSearch = useDebounce(searchTerms || "", 500), [resources, setResources] = useState([]), filterResources = useCallback((resource, search) => {
+    var _a, _b, _c;
+    if (!search) return !0;
+    const searchParam = (search == null ? void 0 : search.toLowerCase()) || "";
+    return ((_a = resource.name) == null ? void 0 : _a.toLowerCase().includes(searchParam)) || ((_b = resource.creatorName) == null ? void 0 : _b.toLowerCase().includes(searchParam)) || ((_c = resource.description) == null ? void 0 : _c.toLowerCase().includes(searchParam));
+  }, []), sortResources = useCallback((resources2) => resources2.sort((a, b) => a.modifiedAt < b.modifiedAt ? 1 : -1), []), loadAndDisplayResources = useCallback((search) => {
+    async function load() {
+      if (resourceList) {
+        const filteredResources = resourceList.filter((resource) => filterResources(resource, search));
+        setResources(sortResources(filteredResources));
+        return;
+      } else if (selectedApplication)
+        try {
+          const resources2 = (await loadResources({
+            application: selectedApplication.application,
+            search,
+            types: [selectedApplication.application],
+            filters: {},
+            pagination: {
+              startIdx: 0,
+              pageSize: 300
+            }
+            // ignored at the moment
+          })).filter((resource) => filterResources(resource, search));
+          setResources(sortResources(resources2));
+          return;
+        } catch {
+        }
+      setResources([]);
+    }
+    load();
+  }, [loadResources, selectedApplication, filterResources, sortResources, resourceList]), [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 () => {
+      if (applicationList) {
+        setOptions(applicationList.sort((app1, app2) => app1.displayName.localeCompare(app2.displayName)));
+        return;
+      }
+      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], size: "24" })
+        };
+      }).sort((app1, app2) => app1.displayName.localeCompare(app2.displayName)));
+    })();
+  }, [resourceApplications, t, applicationList]), useEffect(() => {
+    loadAndDisplayResources(debounceSearch);
+  }, [loadAndDisplayResources, debounceSearch]), useEffect(() => {
+    onSelect == null || onSelect(selectedDocuments);
+  }, [selectedDocuments]), useEffect(() => {
+    var _a;
+    const safeDefaultAppCode = defaultAppCode ?? ((applicationList == null ? void 0 : applicationList.length) === 1 && ((_a = applicationList == null ? void 0 : applicationList[0]) == null ? void 0 : _a.application));
+    if (safeDefaultAppCode) {
+      const option = options == null ? void 0 : options.find((option2) => safeDefaultAppCode === option2.application);
+      setSelectedApplication(option), loadAndDisplayResources("");
+    }
+  }, [options, defaultAppCode]), 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: [
+      showApplicationSelector && /* @__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(SvgIconApplications, {}) }), 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" }) })
+    ] })
+  ] });
+};
+export {
+  InternalLinker as default
+};

package/dist/modules/multimedia/Linker/index.d.ts

@@ -0,0 +1,4 @@
+export * from './InternalLinker/InternalLinker';
+export { default as InternalLinker } from './InternalLinker/InternalLinker';
+export * from './ExternalLinker/ExternalLinker';
+export { default as ExternalLinker } from './ExternalLinker/ExternalLinker';

package/dist/modules/multimedia/LinkerCard/LinkerCard._.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as LinkerCard } from './LinkerCard';
+declare const meta: Meta<typeof LinkerCard>;
+export default meta;
+type Story = StoryObj<typeof LinkerCard>;
+export declare const Base: Story;
+export declare const TimelineGenerator: Story;
+export declare const Blog: Story;

package/dist/modules/multimedia/LinkerCard/LinkerCard.d.ts

@@ -0,0 +1,13 @@
+import { IResource } from '@edifice.io/ts-client';
+import { CardProps } from '../../../components';
+export interface LinkerCardProps extends CardProps {
+    /**
+     * Resource to render as a card
+     * */
+    doc: IResource;
+}
+declare const LinkerCard: {
+    ({ doc, isClickable, isSelectable, isSelected, onClick, className, }: LinkerCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default LinkerCard;

package/dist/modules/multimedia/LinkerCard/LinkerCard.js

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import clsx from "clsx";
+import SvgIconUsers from "../../icons/components/IconUsers.js";
+import useDate from "../../../hooks/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(SvgIconUsers, { width: "20", height: "20" }) })
+  ] }) });
+};
+export {
+  LinkerCard as default
+};

package/dist/modules/multimedia/MediaLibrary/MediaLibrary.d.ts

@@ -0,0 +1,84 @@
+import { WorkspaceElement, WorkspaceVisibility } from '@edifice.io/ts-client';
+import { TabsItemProps } from '../../../components';
+import { ExternalLinkTabProps } from './innertabs/ExternalLink';
+import { InternalLinkTabProps, InternalLinkTabResult } from './innertabs/InternalLink';
+/** Ordered list of tabs. */
+declare const orderedTabs: string[];
+/**
+ * Available features exposed by tabs :
+ * "workspace" | "upload" | "audio-capture" | ...
+ */
+export type AvailableTab = (typeof orderedTabs)[number];
+/** Additional properties of tabs. */
+export type MediaLibraryTabProps = {
+    /**
+     * Media Library types where this tab should be displayed.
+     * "*" for all types.
+     */
+    availableFor: Array<MediaLibraryType | "*" | null>;
+    /** Required checks before using this feature. */
+    isEnable: null | (() => boolean);
+};
+/**
+ * Pre-configured types of media libraries.
+ * Choosing a type will filter out unwanted tabs.
+ */
+export type MediaLibraryType = 
+/** Audio files */
+"audio"
+/** Video files / streams / links */
+ | "video"
+/** Image files */
+ | "image"
+/** Attached files */
+ | "attachment"
+/** Embedded websites */
+ | "embedder"
+/** Hyperlinks */
+ | "hyperlink";
+export interface MediaLibraryRef {
+    /** Open the Media Library on given type. */
+    show: (type: MediaLibraryType) => void;
+    /** Close the Media Library. */
+    hide: () => void;
+    /**
+     * Open the MediaLibrary on a internal/external link Tab,
+     * and prefill the tab with data.
+     */
+    showLink: (data: InternalLinkTabProps | ExternalLinkTabProps) => void;
+    /** Get the Media Libray type currently displayed, or null if hidden. */
+    type: MediaLibraryType | null;
+}
+/**
+ * The resulting type depends on the actual selected Tab when modal is closed.
+ */
+export type MediaLibraryResult = WorkspaceElement[] | WorkspaceElement | InternalLinkTabResult | string | /*TODO type des autres résultats ?*/ any;
+/**
+ * MediaLibrary component properties
+ */
+export interface MediaLibraryProps {
+    /** Application Code (example: "blog"). */
+    appCode: string;
+    /** Visibility of the uploaded files "protected" | "public" | "external". */
+    visibility: WorkspaceVisibility;
+    /** Allow selecting / uploading multiple files at once ? */
+    multiple?: boolean;
+    /**
+     * Called when the user validates the modal (Add button).
+     * @param result depends on which InnerTab is visible
+     */
+    onSuccess: (result: MediaLibraryResult) => void;
+    /**
+     * Called when the user closes the modal.
+     * @param uploads uploaded workspace elements to cancel.
+     */
+    onCancel: (uploads?: WorkspaceElement[]) => void;
+    /**
+     * Called when the user swith between tabs, without closing the modal.
+     * @param tab Props of the newly displayed tab.
+     * @param uploads uploaded workspace elements to cancel.
+     */
+    onTabChange?: (tab: TabsItemProps, uploads?: WorkspaceElement[]) => void;
+}
+declare const MediaLibrary: import('react').ForwardRefExoticComponent<MediaLibraryProps & import('react').RefAttributes<MediaLibraryRef>>;
+export default MediaLibrary;

package/dist/modules/multimedia/MediaLibrary/MediaLibrary.js

@@ -0,0 +1,217 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef, useRef, useImperativeHandle, useState, useMemo, useEffect, useCallback } from "react";
+import { odeServices } from "@edifice.io/ts-client";
+import { useTranslation } from "react-i18next";
+import SvgIconApplications from "../../icons/components/IconApplications.js";
+import SvgIconCode from "../../icons/components/IconCode.js";
+import SvgIconFolder from "../../icons/components/IconFolder.js";
+import SvgIconGlobe from "../../icons/components/IconGlobe.js";
+import SvgIconMic from "../../icons/components/IconMic.js";
+import SvgIconRecordVideo from "../../icons/components/IconRecordVideo.js";
+import SvgIconSmartphone from "../../icons/components/IconSmartphone.js";
+import { InnerTabs } from "./innertabs/index.js";
+import { MediaLibraryContext } from "./MediaLibraryContext.js";
+import useHttpErrorToast from "../../../hooks/useHttpErrorToast/useHttpErrorToast.js";
+import useHasWorkflow from "../../../hooks/useHasWorkflow/useHasWorkflow.js";
+import Modal from "../../../components/Modal/Modal.js";
+import Button from "../../../components/Button/Button.js";
+import { Tabs } from "../../../components/Tabs/components/Tabs.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(SvgIconFolder, {}),
+      label: t("bbm.workspace"),
+      content: /* @__PURE__ */ jsx(InnerTabs.Workspace, {}),
+      availableFor: ["audio", "video", "image", "attachment"],
+      isEnable: null
+    },
+    upload: {
+      id: "upload",
+      icon: /* @__PURE__ */ jsx(SvgIconSmartphone, {}),
+      label: t("bbm.device"),
+      content: /* @__PURE__ */ jsx(InnerTabs.Upload, {}),
+      availableFor: ["audio", "video", "image", "attachment"],
+      isEnable: () => !!workspaceCreateWorkflow
+    },
+    "video-capture": {
+      id: "video-capture",
+      icon: /* @__PURE__ */ jsx(SvgIconRecordVideo, {}),
+      label: t("bbm.video"),
+      content: /* @__PURE__ */ jsx(InnerTabs.Video, {}),
+      availableFor: ["video"],
+      isEnable: () => !!videoCaptureWorkflow
+    },
+    "audio-capture": {
+      id: "audio-capture",
+      icon: /* @__PURE__ */ jsx(SvgIconMic, {}),
+      label: t("bbm.audio"),
+      content: /* @__PURE__ */ jsx(InnerTabs.Audio, {}),
+      availableFor: ["audio"],
+      isEnable: () => !!workspaceCreateWorkflow
+    },
+    "external-link": {
+      id: "external-link",
+      icon: /* @__PURE__ */ jsx(SvgIconGlobe, {}),
+      label: t("bbm.linker.ext"),
+      content: /* @__PURE__ */ jsx(InnerTabs.ExternalLink, { ...linkTabProps.current }),
+      availableFor: ["hyperlink"],
+      isEnable: null
+    },
+    "internal-link": {
+      id: "internal-link",
+      icon: /* @__PURE__ */ jsx(SvgIconApplications, {}),
+      label: t("bbm.linker.int"),
+      content: /* @__PURE__ */ jsx(InnerTabs.InternalLink, { ...linkTabProps.current }),
+      availableFor: ["hyperlink"],
+      isEnable: null
+    },
+    iframe: {
+      id: "iframe",
+      icon: /* @__PURE__ */ jsx(SvgIconCode, {}),
+      label: t("bbm.embed"),
+      content: /* @__PURE__ */ jsx(InnerTabs.Iframe, {}),
+      availableFor: ["embedder"],
+      isEnable: null
+    },
+    "video-embedder": {
+      id: "iframe",
+      icon: /* @__PURE__ */ jsx(SvgIconCode, {}),
+      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, appCode]), 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/modules/multimedia/MediaLibrary/MediaLibraryContext.d.ts

@@ -0,0 +1,60 @@
+import { WorkspaceElement, WorkspaceVisibility } from '@edifice.io/ts-client';
+import { AvailableTab, MediaLibraryResult, MediaLibraryType } from './MediaLibrary';
+export declare const MediaLibraryContext: import('react').Context<{
+    /** Application code (example: "blog") */
+    appCode: string;
+    /** Visibility of the uploaded files. */
+    visibility?: WorkspaceVisibility;
+    /** Allow selecting / uploading multiple files at once ? */
+    multiple?: boolean;
+    /** Type of resource to search for. */
+    type: MediaLibraryType | null;
+    /** Set the counter in the success button label. */
+    setResultCounter: (count?: number) => void;
+    /**
+     * Set a innertab-specific callback which gets the result when success button is clicked.
+     */
+    setResult: (result?: MediaLibraryResult) => void;
+    /** Memoize uploaded elements to be deleted on cancellation. */
+    setCancellable: (uploads: WorkspaceElement[]) => void;
+    /**
+     * Allow an innertab to switch display to another innertab.
+     * This function will throw an error if switching failed.
+     */
+    setVisibleTab: (tab: AvailableTab) => void;
+    /** Allow an innertab to switch type of the media library. */
+    switchType: (type: MediaLibraryType) => void;
+    /**
+     * Allow an innertab to set action to execute before triggering onSuccess.
+     */
+    setPreSuccess: (onSuccessAction?: () => () => Promise<MediaLibraryResult>) => void;
+}>;
+export declare function useMediaLibraryContext(): {
+    /** Application code (example: "blog") */
+    appCode: string;
+    /** Visibility of the uploaded files. */
+    visibility?: WorkspaceVisibility;
+    /** Allow selecting / uploading multiple files at once ? */
+    multiple?: boolean;
+    /** Type of resource to search for. */
+    type: MediaLibraryType | null;
+    /** Set the counter in the success button label. */
+    setResultCounter: (count?: number) => void;
+    /**
+     * Set a innertab-specific callback which gets the result when success button is clicked.
+     */
+    setResult: (result?: MediaLibraryResult) => void;
+    /** Memoize uploaded elements to be deleted on cancellation. */
+    setCancellable: (uploads: WorkspaceElement[]) => void;
+    /**
+     * Allow an innertab to switch display to another innertab.
+     * This function will throw an error if switching failed.
+     */
+    setVisibleTab: (tab: AvailableTab) => void;
+    /** Allow an innertab to switch type of the media library. */
+    switchType: (type: MediaLibraryType) => void;
+    /**
+     * Allow an innertab to set action to execute before triggering onSuccess.
+     */
+    setPreSuccess: (onSuccessAction?: () => () => Promise<MediaLibraryResult>) => void;
+};

package/dist/modules/multimedia/MediaLibrary/innertabs/ExternalLink.d.ts

@@ -0,0 +1,6 @@
+import { IExternalLink } from '../../Linker/ExternalLinker/ExternalLinker';
+export type ExternalLinkTabProps = {
+    multiNodeSelected?: boolean;
+    link?: Partial<IExternalLink>;
+};
+export declare const ExternalLink: ({ link, multiNodeSelected, }: ExternalLinkTabProps) => import("react/jsx-runtime").JSX.Element;

package/dist/modules/multimedia/MediaLibrary/innertabs/ExternalLink.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import ExternalLinker from "../../Linker/ExternalLinker/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/modules/multimedia/MediaLibrary/innertabs/InternalLink.d.ts

@@ -0,0 +1,11 @@
+import { ILinkedResource } from '@edifice.io/ts-client';
+export type InternalLinkTabProps = {
+    target?: "_blank" | null;
+    appPrefix?: string | null;
+    resourceId?: string | null;
+};
+export type InternalLinkTabResult = {
+    target?: "_blank";
+    resources?: ILinkedResource[];
+};
+export declare const InternalLink: ({ target, resourceId, appPrefix, }: InternalLinkTabProps) => import("react/jsx-runtime").JSX.Element;

package/dist/modules/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/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
+};