@edifice.io/react 2.0.0-develop-rc.4 → 2.0.0-develop-rc.10

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

@@ -1,114 +1,115 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useCallback, useEffect } from "react";
-import { odeServices } from "edifice-ts-client";
-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 { 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";
-import { Dropdown } from "../../../components/Dropdown/Dropdown.js";
-import { Icon } from "../../../components/Icon/Icon.js";
-const InternalLinker = ({
-  appCode,
-  defaultAppCode,
-  defaultResourceId,
-  onChange,
-  onSelect,
-  multiple = !0
+import { jsx as s, jsxs as b } from "react/jsx-runtime";
+import { useState as f, useCallback as u, useEffect as h } from "react";
+import { odeServices as G } from "@edifice.io/ts-client";
+import { useTranslation as H } from "react-i18next";
+import { LinkerCard as J } from "../LinkerCard/LinkerCard.js";
+import { useResourceSearch as K } from "../../../core/useResourceSearch/useResourceSearch.js";
+import Q from "../../../hooks/useDebounce/useDebounce.js";
+import { SearchBar as U } from "../../../components/SearchBar/SearchBar.js";
+import { EmptyScreen as V } from "../../../components/EmptyScreen/EmptyScreen.js";
+import X from "../../../core/usePaths/usePaths.js";
+import { useOdeTheme as Y } from "../../../core/ThemeProvider/ThemeProvider.js";
+import { AppIcon as Z } from "../../../components/AppIcon/AppIcon.js";
+import { Dropdown as x } from "../../../components/Dropdown/Dropdown.js";
+import { Icon as ee } from "../../../components/Icon/Icon.js";
+const he = ({
+  appCode: E,
+  defaultAppCode: C,
+  defaultResourceId: y,
+  onChange: N,
+  onSelect: v,
+  multiple: L = !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)
+    t: d
+  } = H(), {
+    theme: m
+  } = Y(), [D] = X(), {
+    resourceApplications: w,
+    loadResources: T
+  } = K(E), [c, B] = f(), [o, P] = f(), [S, M] = f(), R = Q(S || "", 500), [i, $] = f([]), p = u((e) => {
+    async function t() {
+      if (o)
         try {
-          const searchLower = search == null ? void 0 : search.toLowerCase(), resources2 = (await loadResources({
-            application: selectedApplication.application,
-            search,
-            types: [selectedApplication.application],
+          const r = e == null ? void 0 : e.toLowerCase(), a = (await T({
+            application: o.application,
+            search: e,
+            types: [o.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);
+          })).filter((n) => {
+            var A, z, O;
+            return !r || r.length === 0 ? !0 : ((A = n.name) == null ? void 0 : A.toLowerCase().includes(r)) || ((z = n.creatorName) == null ? void 0 : z.toLowerCase().includes(r)) || ((O = n.description) == null ? void 0 : O.toLowerCase().includes(r)) || !1;
+          }).sort((n, j) => n.modifiedAt < j.modifiedAt ? 1 : -1);
+          $(a);
           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(() => {
+    t();
+  }, [T, o]), [l, g] = f([]), W = (e) => {
+    N == null || N(e), P(e);
+  }, _ = (e) => {
+    const t = e.target.value;
+    M(t.toString());
+  }, q = u((e) => {
+    p(S), e.stopPropagation(), e.preventDefault();
+  }, [p, S]), k = u((e) => l.findIndex((t) => t.assetId === e), [l]), I = u((e) => {
+    g(L ? (t) => [...t, e] : [e]);
+  }, [g, L]), F = u((e) => {
+    const t = k(e.assetId);
+    t < 0 ? I(e) : g(l.filter((r, a) => a !== t));
+  }, [k, I, l]);
+  return h(() => {
     (async () => {
-      const appPromises = resourceApplications.map((application) => odeServices.session().getWebApp(application)), webApps = await Promise.all(appPromises);
-      setOptions(resourceApplications.map((application, index) => {
-        var _a;
+      const e = w.map((r) => G.session().getWebApp(r)), t = await Promise.all(e);
+      B(w.map((r, a) => {
+        var n;
         return {
-          application,
-          displayName: t(((_a = webApps[index]) == null ? void 0 : _a.displayName) ?? application),
-          icon: /* @__PURE__ */ jsx(AppIcon, { app: webApps[index] })
+          application: r,
+          displayName: d(((n = t[a]) == null ? void 0 : n.displayName) ?? r),
+          icon: /* @__PURE__ */ s(Z, { app: t[a] })
         };
-      }).sort((app1, app2) => app1.displayName.localeCompare(app2.displayName)));
+      }).sort((r, a) => r.displayName.localeCompare(a.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("");
+  }, [w, d]), h(() => {
+    p(R);
+  }, [p, R]), h(() => {
+    v == null || v(l);
+  }, [l]), h(() => {
+    if (C) {
+      const e = c == null ? void 0 : c.find((t) => C === t.application);
+      P(e), p("");
     }
-  }, [options]), useEffect(() => {
-    if (defaultResourceId && getSelectedResourceIndex(defaultResourceId) < 0) {
-      const resource = resources == null ? void 0 : resources.find((resource2) => defaultResourceId === resource2.assetId);
-      resource && selectResource(resource);
+  }, [c]), h(() => {
+    if (y && k(y) < 0) {
+      const e = i == null ? void 0 : i.find((t) => y === t.assetId);
+      e && I(e);
     }
-  }, [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(Icon, { name: "applications" }) }), 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)) })
+  }, [i]), /* @__PURE__ */ b("div", { className: "d-flex flex-column flex-fill overflow-hidden", children: [
+    /* @__PURE__ */ b("div", { className: "search d-flex bg-light rounded-top border border-bottom-0", children: [
+      /* @__PURE__ */ s("div", { className: "flex-shrink-1 px-8 py-12 border-end", children: /* @__PURE__ */ b(x, { overflow: !0, children: [
+        /* @__PURE__ */ s(x.Trigger, { icon: /* @__PURE__ */ s("div", { className: "pe-8", children: (o == null ? void 0 : o.icon) || /* @__PURE__ */ s(ee, { name: "applications" }) }), label: d((o == null ? void 0 : o.displayName) || "bbm.linker.int.choose"), variant: "ghost", size: "md" }),
+        /* @__PURE__ */ s(x.Menu, { children: c == null ? void 0 : c.map((e) => /* @__PURE__ */ s(x.Item, { icon: e.icon, onClick: () => W(e), children: e.displayName }, e.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__ */ s("div", { className: "flex-grow-1 align-self-center", children: /* @__PURE__ */ s("form", { className: "gap-16 d-flex w-100 align-items-center px-16 py-8", onSubmit: q, children: /* @__PURE__ */ s(U, { isVariant: !0, placeholder: d("search"), size: "lg", className: "w-100", disabled: !o, onChange: _ }) }) })
     ] }),
-    /* @__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);
+    /* @__PURE__ */ b("div", { className: "internal-linker flex-grow-1 w-100 rounded-bottom border gap-0 overflow-auto", children: [
+      o && i && i.length > 0 && /* @__PURE__ */ s("div", { children: i.map((e) => {
+        const t = l.findIndex((r) => r.assetId === e.assetId) >= 0;
+        return /* @__PURE__ */ s(J, { doc: e, isSelected: t, onClick: () => F(e) }, e.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" }) })
+      o && i && i.length <= 0 && /* @__PURE__ */ s("div", { className: "d-flex justify-content-center mt-16", children: /* @__PURE__ */ s(V, { imageSrc: `${D}/${m == null ? void 0 : m.bootstrapVersion}/illu-empty-search-${o.application}.svg`, text: d("bbm.linker.int.notfound"), className: "mt-16" }) }),
+      !o && /* @__PURE__ */ s("div", { className: "d-flex justify-content-center mt-32", children: /* @__PURE__ */ s(V, { imageSrc: `${D}/${m == null ? void 0 : m.bootstrapVersion}/illu-empty-search.svg`, text: d("bbm.linker.int.empty"), className: "mt-32" }) })
     ] })
   ] });
-}, InternalLinker$1 = InternalLinker;
+};
 export {
-  InternalLinker$1 as default
+  he as default
 };
+//# sourceMappingURL=InternalLinker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InternalLinker.js","sources":["../../../../src/modules/multimedia/Linker/InternalLinker.tsx"],"sourcesContent":["import { FormEvent, useCallback, useEffect, useState } from 'react';\n\nimport { App, odeServices } from '@edifice.io/ts-client';\n/*\n * Augmented definition of a resource, until behaviours are dropped.\n * The path would otherwise be found by using `IWebResourceService.getViewUrl(resource)`\n */\nimport { ILinkedResource } from '@edifice.io/ts-client';\nimport { useTranslation } from 'react-i18next';\n\nimport { AppIcon, Dropdown, EmptyScreen, Icon } from '../../../components';\nimport { SearchBar } from '../../../components/SearchBar';\nimport { useOdeTheme, usePaths, useResourceSearch } from '../../../core';\nimport { useDebounce } from '../../../hooks';\nimport LinkerCard from '../LinkerCard/LinkerCard';\n\n/**\n * Definition of an internal link.\n */\ntype ApplicationOption = {\n  icon?: JSX.Element;\n  application: string;\n  displayName: string;\n};\n\n/**\n * Properties for the InternalLinker react component.\n */\nexport interface InternalLinkerProps {\n  /** Currently running application */\n  appCode: App;\n  /** When defined, preloads and displays this type of resources. */\n  defaultAppCode?: App | null;\n  /** When defined, selects this resource (defaultApp must be specified) */\n  defaultResourceId?: string | null;\n  /** Notify when the user selects an application in the dropdown */\n  onChange?: (application?: ApplicationOption) => void;\n  /** Notify when resources selection changes */\n  onSelect?: (resources: ILinkedResource[]) => void;\n  multiple: boolean | undefined;\n}\n\n/** The InternalLinker component */\nconst InternalLinker = ({\n  appCode,\n  defaultAppCode,\n  defaultResourceId,\n  onChange,\n  onSelect,\n  multiple = true,\n}: InternalLinkerProps) => {\n  const { t } = useTranslation();\n  const { theme } = useOdeTheme();\n  const [imagePath] = usePaths();\n\n  // Get available applications, and a function to load their resources.\n  const { resourceApplications, loadResources } = useResourceSearch(appCode);\n\n  // List of options (applications with name and icon) to display, for the user to choose.\n  const [options, setOptions] = useState<Array<ApplicationOption>>();\n  // User selected application\n  const [selectedApplication, setSelectedApplication] = useState<\n    ApplicationOption | undefined\n  >();\n  // User search terms (typed in an input) and its debounced equivalent.\n  const [searchTerms, setSearchTerms] = useState<string | undefined>();\n  const debounceSearch = useDebounce<string>(searchTerms || '', 500);\n\n  // List of resources to display.\n  const [resources, setResources] = useState<ILinkedResource[] | undefined>([]);\n  // Function to load and display resources of the currently selected application.\n  const loadAndDisplayResources = useCallback(\n    (search?: string) => {\n      async function load() {\n        if (selectedApplication) {\n          try {\n            const searchLower = search?.toLowerCase();\n            const resources = (\n              await loadResources({\n                application: selectedApplication.application,\n                search,\n                types: [selectedApplication.application],\n                filters: {},\n                pagination: { startIdx: 0, pageSize: 300 }, // ignored at the moment\n              })\n            )\n              .filter((resource) => {\n                // Filter in lowercase only\n                if (!searchLower || searchLower.length === 0) return true;\n                const found =\n                  resource.name?.toLowerCase().includes(searchLower) ||\n                  resource.creatorName?.toLowerCase().includes(searchLower) ||\n                  resource.description?.toLowerCase().includes(searchLower) ||\n                  false;\n                return found;\n              })\n              .sort((a, b) => (a.modifiedAt < b.modifiedAt ? 1 : -1));\n\n            setResources(resources);\n            return; // end here\n          } catch {\n            // continue on error\n          }\n        }\n        setResources([]);\n      }\n      load();\n    },\n    [loadResources, selectedApplication],\n  );\n\n  // List of selected documents\n  const [selectedDocuments, setSelectedDocuments] = useState<ILinkedResource[]>(\n    [],\n  );\n\n  // Notify parent when an application is selected.\n  const handleOptionClick = (option: ApplicationOption) => {\n    onChange?.(option);\n    setSelectedApplication(option);\n  };\n\n  // Handle search input events (and debounce)\n  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const newText = event.target.value;\n    setSearchTerms(newText.toString());\n  };\n  const handleSubmit = useCallback(\n    (event: FormEvent) => {\n      loadAndDisplayResources(searchTerms);\n      event.stopPropagation();\n      event.preventDefault();\n    },\n    [loadAndDisplayResources, searchTerms],\n  );\n\n  /**\n   * Check if a resource is selected.\n   * @returns its index in selectedDocuments, or -1 if not selected.\n   */\n  const getSelectedResourceIndex = useCallback(\n    (resourceId: string) => {\n      return selectedDocuments.findIndex(\n        (selectedDocument) => selectedDocument.assetId === resourceId,\n      );\n    },\n    [selectedDocuments],\n  );\n\n  // Select a resource.\n  const selectResource = useCallback(\n    (resource: ILinkedResource) => {\n      if (multiple) {\n        // Add this resource to the previous selected ones.\n        setSelectedDocuments((previousState) => [...previousState, resource]);\n      } else {\n        // Replace previous selection by this resource.\n        setSelectedDocuments([resource]);\n      }\n    },\n    [setSelectedDocuments, multiple],\n  );\n\n  // Handle [de-]selection of a resource by the user.\n  const toggleResourceSelection = useCallback(\n    (resource: ILinkedResource) => {\n      const index = getSelectedResourceIndex(resource.assetId);\n      if (index < 0) {\n        selectResource(resource);\n      } else {\n        // De-select resource (clicked twice)\n        setSelectedDocuments(\n          selectedDocuments.filter((_value, i) => i !== index),\n        );\n      }\n    },\n    [getSelectedResourceIndex, selectResource, selectedDocuments],\n  );\n\n  // Update dropdown when available applications list is updated.\n  useEffect(() => {\n    (async () => {\n      const appPromises = resourceApplications.map((application) =>\n        odeServices.session().getWebApp(application),\n      );\n      const webApps = await Promise.all(appPromises);\n      setOptions(\n        resourceApplications\n          .map((application, index) => {\n            return {\n              application,\n              displayName: t(webApps[index]?.displayName ?? application),\n              icon: <AppIcon app={webApps[index]}></AppIcon>,\n            } as ApplicationOption;\n          })\n          .sort((app1, app2) =>\n            app1.displayName.localeCompare(app2.displayName),\n          ),\n      );\n    })();\n  }, [resourceApplications, t]);\n\n  // Load and display search results when debounce is over\n  useEffect(() => {\n    loadAndDisplayResources(debounceSearch);\n  }, [loadAndDisplayResources, debounceSearch]);\n\n  // Notify parent when resources selection changes.\n  useEffect(() => {\n    onSelect?.(selectedDocuments);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [selectedDocuments]);\n\n  // Preselect default option and load associated resources, if specified.\n  useEffect(() => {\n    if (defaultAppCode) {\n      const option = options?.find(\n        (option) => defaultAppCode === option.application,\n      );\n      setSelectedApplication(option);\n      loadAndDisplayResources('');\n    }\n    /* Note : when options changes, `defaultAppCode` and `loadAndDisplayResources` are\n     * already set at a correct value. So we remove them from the dependency array,\n     * otherwise they will provoke side effects forbiding user from changing the selected app.\n     */\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [options]);\n\n  // Preselect default resource, if specified.\n  useEffect(() => {\n    if (defaultResourceId && getSelectedResourceIndex(defaultResourceId) < 0) {\n      const resource = resources?.find(\n        (resource) => defaultResourceId === resource.assetId,\n      );\n      resource && selectResource(resource);\n    }\n    /* Note : when resources changes, `defaultResourceId`, `getSelectedResourceIndex`\n     * and `selectResource` are already set at a correct value.\n     * So we remove them from the dependency array, otherwise they will provoke side effects\n     * forbiding user from changing the selected resources.\n     */\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [resources]);\n\n  return (\n    <div className=\"d-flex flex-column flex-fill overflow-hidden\">\n      <div className=\"search d-flex bg-light rounded-top border border-bottom-0\">\n        <div className=\"flex-shrink-1 px-8 py-12 border-end\">\n          <Dropdown overflow>\n            <Dropdown.Trigger\n              icon={\n                <div className=\"pe-8\">\n                  {selectedApplication?.icon || <Icon name=\"applications\" />}\n                </div>\n              }\n              label={t(\n                selectedApplication?.displayName || 'bbm.linker.int.choose',\n              )}\n              variant=\"ghost\"\n              size=\"md\"\n            />\n            <Dropdown.Menu>\n              {options?.map((option) => (\n                <Dropdown.Item\n                  key={option.application}\n                  icon={option.icon}\n                  onClick={() => handleOptionClick(option)}\n                >\n                  {option.displayName}\n                </Dropdown.Item>\n              ))}\n            </Dropdown.Menu>\n          </Dropdown>\n        </div>\n        <div className=\"flex-grow-1 align-self-center\">\n          <form\n            className=\"gap-16 d-flex w-100 align-items-center px-16 py-8\"\n            onSubmit={handleSubmit}\n          >\n            <SearchBar\n              isVariant\n              placeholder={t('search')}\n              size=\"lg\"\n              className=\"w-100\"\n              disabled={selectedApplication ? false : true}\n              onChange={handleSearchChange}\n            />\n          </form>\n        </div>\n      </div>\n\n      <div className=\"internal-linker flex-grow-1 w-100 rounded-bottom border gap-0 overflow-auto\">\n        {selectedApplication && resources && resources.length > 0 && (\n          <div>\n            {resources.map((resource) => {\n              const isSelected =\n                selectedDocuments.findIndex(\n                  (doc) => doc.assetId === resource.assetId,\n                ) >= 0;\n              return (\n                <LinkerCard\n                  key={resource.path}\n                  doc={resource}\n                  isSelected={isSelected}\n                  onClick={() => toggleResourceSelection(resource)}\n                />\n              );\n            })}\n          </div>\n        )}\n\n        {selectedApplication && resources && resources.length <= 0 && (\n          <div className=\"d-flex justify-content-center mt-16\">\n            <EmptyScreen\n              imageSrc={`${imagePath}/${theme?.bootstrapVersion}/illu-empty-search-${selectedApplication.application}.svg`}\n              text={t('bbm.linker.int.notfound')}\n              className=\"mt-16\"\n            />\n          </div>\n        )}\n\n        {!selectedApplication && (\n          <div className=\"d-flex justify-content-center mt-32\">\n            <EmptyScreen\n              imageSrc={`${imagePath}/${theme?.bootstrapVersion}/illu-empty-search.svg`}\n              text={t('bbm.linker.int.empty')}\n              className=\"mt-32\"\n            />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default InternalLinker;\n"],"names":["InternalLinker","appCode","defaultAppCode","defaultResourceId","onChange","onSelect","multiple","t","useTranslation","theme","useOdeTheme","imagePath","usePaths","resourceApplications","loadResources","useResourceSearch","options","setOptions","useState","selectedApplication","setSelectedApplication","searchTerms","setSearchTerms","debounceSearch","useDebounce","resources","setResources","loadAndDisplayResources","useCallback","search","load","searchLower","toLowerCase","application","types","filters","pagination","startIdx","pageSize","filter","resource","length","name","includes","creatorName","description","sort","a","b","modifiedAt","selectedDocuments","setSelectedDocuments","handleOptionClick","option","handleSearchChange","event","newText","target","value","toString","handleSubmit","stopPropagation","preventDefault","getSelectedResourceIndex","resourceId","findIndex","selectedDocument","assetId","selectResource","previousState","toggleResourceSelection","index","_value","i","useEffect","appPromises","map","odeServices","session","getWebApp","webApps","Promise","all","displayName","icon","jsx","AppIcon","app1","app2","localeCompare","find","jsxs","Dropdown","Icon","SearchBar","isSelected","doc","LinkerCard","path","EmptyScreen","bootstrapVersion"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { IResource } from 'edifice-ts-client';
+import { IResource } from '@edifice.io/ts-client';
 import { CardProps } from '../../../components';
 export interface LinkerCardProps extends CardProps {
     /**

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

@@ -1,39 +1,40 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
-import clsx from "clsx";
-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";
-import { Icon } from "../../../components/Icon/Icon.js";
-const LinkerCard = ({
-  doc,
-  isClickable = !0,
-  isSelectable = !1,
-  isSelected = !1,
-  onClick,
-  className
+import { jsx as a, jsxs as i } from "react/jsx-runtime";
+import { useMemo as p } from "react";
+import d from "clsx";
+import h from "../../../core/useDate/useDate.js";
+import { Card as r } from "../../../components/Card/Card.js";
+import { Image as f } from "../../../components/Image/Image.js";
+import { AppIcon as u } from "../../../components/AppIcon/AppIcon.js";
+import { Icon as x } from "../../../components/Icon/Icon.js";
+const I = ({
+  doc: e,
+  isClickable: s = !0,
+  isSelectable: m = !1,
+  isSelected: l = !1,
+  onClick: n,
+  className: o
 }) => {
   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: {
+    fromNow: t
+  } = h(), {
+    fromDate: c
+  } = p(() => ({
+    fromDate: t(e.modifiedAt)
+  }), [t, e]);
+  return /* @__PURE__ */ a(r, { className: d("card-linker shadow-none", o), isClickable: s, isSelectable: m, isSelected: l, onClick: n, children: /* @__PURE__ */ i(r.Body, { space: "8", children: [
+    /* @__PURE__ */ a("div", { className: "card-image ps-8 pe-4", children: e.thumbnail && e.thumbnail.length > 0 ? /* @__PURE__ */ a(f, { alt: "", height: 48, width: 48, src: e.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__ */ a(u, { app: e.application, iconFit: "ratio", size: "48", variant: "rounded" }) }),
+    /* @__PURE__ */ i("div", { className: "w-75", children: [
+      /* @__PURE__ */ a(r.Text, { children: e.name }),
+      /* @__PURE__ */ a(r.Text, { className: "text-black-50", children: e == null ? void 0 : e.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(Icon, { name: "users", size: "20" }) })
+    /* @__PURE__ */ a("div", { className: "d-none d-md-block text-black-50 ps-4 pe-8", children: /* @__PURE__ */ a(r.Text, { children: c }) }),
+    e.shared && /* @__PURE__ */ a("div", { className: "ps-4 pe-8", children: /* @__PURE__ */ a(x, { name: "users", size: "20" }) })
   ] }) });
 };
 export {
-  LinkerCard,
-  LinkerCard as default
+  I as LinkerCard,
+  I as default
 };
+//# sourceMappingURL=LinkerCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LinkerCard.js","sources":["../../../../src/modules/multimedia/LinkerCard/LinkerCard.tsx"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { IResource } from '@edifice.io/ts-client';\nimport clsx from 'clsx';\n\nimport { AppIcon, Card, CardProps, Icon, Image } from '../../../components';\nimport { useDate } from '../../../core/useDate';\n\nexport interface LinkerCardProps extends CardProps {\n  /**\n   * Resource to render as a card\n   * */\n  doc: IResource;\n}\n\nexport const LinkerCard = ({\n  doc,\n  isClickable = true,\n  isSelectable = false,\n  isSelected = false,\n  onClick,\n  className,\n}: LinkerCardProps) => {\n  const { fromNow } = useDate();\n\n  const { fromDate } = useMemo(\n    () => ({\n      fromDate: fromNow(doc.modifiedAt),\n    }),\n    [fromNow, doc],\n  );\n\n  return (\n    <Card\n      className={clsx('card-linker shadow-none', className)}\n      isClickable={isClickable}\n      isSelectable={isSelectable}\n      isSelected={isSelected}\n      onClick={onClick}\n    >\n      <Card.Body space=\"8\">\n        <div className=\"card-image ps-8 pe-4\">\n          {doc.thumbnail && doc.thumbnail.length > 0 ? (\n            <Image\n              alt=\"\"\n              height={48}\n              width={48}\n              src={doc.thumbnail}\n              objectFit=\"cover\"\n              className=\"rounded h-full\"\n              style={{ aspectRatio: 1 / 1 }}\n            />\n          ) : (\n            <AppIcon\n              app={doc.application}\n              iconFit=\"ratio\"\n              size=\"48\"\n              variant=\"rounded\"\n            />\n          )}\n        </div>\n\n        <div className=\"w-75\">\n          <Card.Text>{doc.name}</Card.Text>\n          <Card.Text className=\"text-black-50\">{doc?.creatorName}</Card.Text>\n        </div>\n\n        <div className=\"d-none d-md-block text-black-50 ps-4 pe-8\">\n          <Card.Text>{fromDate}</Card.Text>\n        </div>\n\n        {doc.shared && (\n          <div className=\"ps-4 pe-8\">\n            <Icon name=\"users\" size=\"20\" />\n          </div>\n        )}\n      </Card.Body>\n    </Card>\n  );\n};\n\nLinkerCard.displayName = 'LinkerCard';\n\nexport default LinkerCard;\n"],"names":["LinkerCard","doc","isClickable","isSelectable","isSelected","onClick","className","fromNow","useDate","fromDate","useMemo","modifiedAt","Card","clsx","jsxs","jsx","thumbnail","length","Image","aspectRatio","AppIcon","application","name","creatorName","shared","Icon"],"mappings":";;;;;;;;AAeO,MAAMA,IAAaA,CAAC;AAAA,EACzBC,KAAAA;AAAAA,EACAC,aAAAA,IAAc;AAAA,EACdC,cAAAA,IAAe;AAAA,EACfC,YAAAA,IAAa;AAAA,EACbC,SAAAA;AAAAA,EACAC,WAAAA;AACe,MAAM;AACf,QAAA;AAAA,IAAEC,SAAAA;AAAAA,MAAYC,EAAQ,GAEtB;AAAA,IAAEC,UAAAA;AAAAA,EAAS,IAAIC,EACnB,OAAO;AAAA,IACLD,UAAUF,EAAQN,EAAIU,UAAU;AAAA,EAElC,IAAA,CAACJ,GAASN,CAAG,CACf;AAEA,2BACGW,GACC,EAAA,WAAWC,EAAK,2BAA2BP,CAAS,GACpD,aAAAJ,GACA,cAAAC,GACA,YAAAC,GACA,SAAAC,GAEA,UAAC,gBAAAS,EAAAF,EAAK,MAAL,EAAU,OAAM,KACf,UAAA;AAAA,IAAC,gBAAAG,EAAA,OAAA,EAAI,WAAU,wBACZd,UAAIe,EAAAA,aAAaf,EAAIe,UAAUC,SAAS,IACvC,gBAAAF,EAACG,GACC,EAAA,KAAI,IACJ,QAAQ,IACR,OAAO,IACP,KAAKjB,EAAIe,WACT,WAAU,SACV,WAAU,kBACV,OAAO;AAAA,MAAEG,aAAa,IAAI;AAAA,IAAA,EAC1B,CAAA,IAED,gBAAAJ,EAAAK,GAAA,EACC,KAAKnB,EAAIoB,aACT,SAAQ,SACR,MAAK,MACL,SAAQ,WAEX,EACH,CAAA;AAAA,IAEA,gBAAAP,EAAC,OAAI,EAAA,WAAU,QACb,UAAA;AAAA,MAAA,gBAAAC,EAACH,EAAK,MAAL,EAAWX,UAAAA,EAAIqB,MAAK;AAAA,wBACpBV,EAAK,MAAL,EAAU,WAAU,iBAAiBX,iCAAKsB,aAAY;AAAA,IAAA,GACzD;AAAA,IAEA,gBAAAR,EAAC,SAAI,WAAU,6CACb,4BAACH,EAAK,MAAL,EAAWH,UAAAA,EAAAA,CAAS,EACvB,CAAA;AAAA,IAECR,EAAIuB,UACF,gBAAAT,EAAA,OAAA,EAAI,WAAU,aACb,UAAC,gBAAAA,EAAAU,GAAA,EAAK,MAAK,SAAQ,MAAK,KAAI,CAAA,GAC9B;AAAA,EAAA,EAEJ,CAAA,EACF,CAAA;AAEJ;"}

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

@@ -1,4 +1,4 @@
-import { WorkspaceElement, WorkspaceVisibility } from 'edifice-ts-client';
+import { WorkspaceElement, WorkspaceVisibility } from '@edifice.io/ts-client';
 import { TabsItemProps } from '../../../components/Tabs/TabsItem';
 import { ExternalLinkTabProps } from './innertabs/ExternalLink';
 import { InternalLinkTabProps, InternalLinkTabResult } from './innertabs/InternalLink';