@edifice.io/react 2.5.4 → 2.5.5-develop-b2school.20251218111717

package/dist/modules/editor/components/Editor/EditorPreviewSkeleton.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import TextSkeleton from "../../../../components/Skeleton/TextSkeleton.js";
+import Image from "../../../../components/Image/Image.js";
+const EditorPreview = ({
+  variant = "outline"
+}) => {
+  const borderClass = clsx(variant === "outline" && "border rounded-3"), contentClass = clsx("mt-16", variant === "outline" && "my-12 mx-16");
+  return /* @__PURE__ */ jsx("div", { className: borderClass, "data-testid": "editor-preview", children: /* @__PURE__ */ jsxs("div", { className: contentClass, children: [
+    /* @__PURE__ */ jsx(TextSkeleton, { className: "col-12" }),
+    /* @__PURE__ */ jsx(TextSkeleton, { className: "col-12" }),
+    /* @__PURE__ */ jsxs("div", { className: "d-flex justify-content-center gap-24 px-32 pt-16", children: [
+      /* @__PURE__ */ jsx("div", { style: {
+        maxWidth: "150px"
+      }, className: "col-12 col-md-4", children: /* @__PURE__ */ jsx(Image, { alt: "", objectFit: "cover", ratio: "16", className: "rounded placeholder", src: "", sizes: "" }) }),
+      /* @__PURE__ */ jsx("div", { style: {
+        maxWidth: "150px"
+      }, className: "col-12 col-md-4", children: /* @__PURE__ */ jsx(Image, { alt: "", objectFit: "cover", ratio: "16", className: "rounded placeholder", src: "", sizes: "" }) })
+    ] })
+  ] }) });
+};
+export {
+  EditorPreview as default
+};

package/dist/modules/editor/components/Editor/index.d.ts

@@ -1,3 +1,5 @@
 export * from './Editor';
 export { default as Editor } from './Editor';
+export { default as EditorPreview } from './EditorPreview';
+export { default as EditorPreviewSkeleton } from './EditorPreviewSkeleton';
 export { default as EditorSkeleton } from './EditorSkeleton';

package/dist/modules/editor/components/Renderer/MediaRenderer.js

@@ -18,7 +18,7 @@ const MediaRenderer = (props) => {
     startVerticalResize,
     stopVerticalResize,
     isVerticalResizeActive
-  } = useResizeMedia(props, resizableMedia), width = node.attrs.width || 560, height = node.attrs.height || Math.round(width * 9 / 16), alignContent = (textalign) => {
+  } = useResizeMedia(props, resizableMedia), alignContent = (textalign) => {
     switch (textalign) {
       case "center":
       case "justify":
@@ -66,7 +66,7 @@ const MediaRenderer = (props) => {
         case "iframe":
           return /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("div", { className: "iframe-node-view" }),
-            /* @__PURE__ */ jsx("iframe", { ref: resizableMedia, src: node.attrs.src, width, height, allowFullScreen: node.attrs.allowfullscreen ?? !0 })
+            /* @__PURE__ */ jsx("iframe", { ref: resizableMedia, src: node.attrs.src, width: node.attrs.width, height: node.attrs.height, allowFullScreen: node.attrs.allowfullscreen ?? !0 })
           ] });
         default:
           return null;

package/dist/modules/editor/hooks/useResizeMedia.js

@@ -1,6 +1,6 @@
 import { useRef, useEffect } from "react";
-const MIN_WIDTH = 80, useResizeMedia = (props, refResizable, forcedAspectRatio) => {
-  const aspectRatio = useRef(0), lastCursorX = useRef(-1), isVerticalResizeActive = useRef(!1), proseMirrorContainerWidth = useRef(0), limitWidth = (width) => width < MIN_WIDTH, readCurrentPixelWidth = () => {
+const useResizeMedia = (props, refResizable, forcedAspectRatio) => {
+  const aspectRatio = useRef(0), lastCursorX = useRef(-1), isVerticalResizeActive = useRef(!1), proseMirrorContainerWidth = useRef(0), readCurrentPixelWidth = () => {
     const el = refResizable.current;
     if (!el) return 0;
     const rect = el.getBoundingClientRect();
@@ -22,7 +22,7 @@ const MIN_WIDTH = 80, useResizeMedia = (props, refResizable, forcedAspectRatio)
   }, []);
   const clampWidth = (w) => {
     let width = w;
-    return proseMirrorContainerWidth.current > 0 && width > proseMirrorContainerWidth.current && (width = proseMirrorContainerWidth.current), limitWidth(width) && (width = MIN_WIDTH), Math.round(width);
+    return proseMirrorContainerWidth.current > 0 && width > proseMirrorContainerWidth.current && (width = proseMirrorContainerWidth.current), Math.round(width);
   }, onVerticalResize = (direction, diff) => {
     const currWidth = readCurrentPixelWidth();
     if (!currWidth) return;

package/dist/modules/icons/components/IconClockAlert.d.ts

@@ -0,0 +1,7 @@
+import { SVGProps } from 'react';
+interface SVGRProps {
+    title?: string;
+    titleId?: string;
+}
+declare const SvgIconClockAlert: ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => import("react/jsx-runtime").JSX.Element;
+export default SvgIconClockAlert;

package/dist/modules/icons/components/IconClockAlert.js

@@ -0,0 +1,17 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+const SvgIconClockAlert = ({
+  title,
+  titleId,
+  ...props
+}) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24", "aria-hidden": "true", "aria-labelledby": titleId, ...props, children: [
+  title ? /* @__PURE__ */ jsx("title", { id: titleId, children: title }) : null,
+  /* @__PURE__ */ jsxs("g", { fill: "currentColor", clipPath: "url(#icon-clock-alert_svg__a)", children: [
+    /* @__PURE__ */ jsx("path", { d: "M0 10.075C0 4.51 4.51 0 10.075 0c4.573 0 8.431 3.046 9.663 7.217a1 1 0 0 1-1.918.566A8.075 8.075 0 1 0 7.783 17.82a1 1 0 0 1-.566 1.918C3.046 18.506 0 14.648 0 10.075" }),
+    /* @__PURE__ */ jsx("path", { d: "M10.075 4.108a1 1 0 0 1 1 1v5.43a1 1 0 0 1-.357.767L7.83 13.728a1 1 0 1 1-1.286-1.532l2.53-2.123V5.108a1 1 0 0 1 1-1M17 13.3a1 1 0 0 1 1 1v2.2a1 1 0 1 1-2 0v-2.2a1 1 0 0 1 1-1M17 18.4a1 1 0 1 0 0 2h.006a1 1 0 1 0 0-2z" }),
+    /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M17 10a7 7 0 1 0 0 14 7 7 0 0 0 0-14m-5 7a5 5 0 1 1 10 0 5 5 0 0 1-10 0", clipRule: "evenodd" })
+  ] }),
+  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "icon-clock-alert_svg__a", children: /* @__PURE__ */ jsx("path", { fill: "#fff", d: "M0 0h24v24H0z" }) }) })
+] });
+export {
+  SvgIconClockAlert as default
+};

package/dist/modules/icons/components/IconThumbDown.d.ts

@@ -0,0 +1,7 @@
+import { SVGProps } from 'react';
+interface SVGRProps {
+    title?: string;
+    titleId?: string;
+}
+declare const SvgIconThumbDown: ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => import("react/jsx-runtime").JSX.Element;
+export default SvgIconThumbDown;

package/dist/modules/icons/components/IconThumbDown.js

@@ -0,0 +1,12 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+const SvgIconThumbDown = ({
+  title,
+  titleId,
+  ...props
+}) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24", "aria-hidden": "true", "aria-labelledby": titleId, ...props, children: [
+  title ? /* @__PURE__ */ jsx("title", { id: titleId, children: title }) : null,
+  /* @__PURE__ */ jsx("path", { fill: "currentColor", fillRule: "evenodd", d: "M8.069 15a1.67 1.67 0 0 0 1.16 1.588l3.007-6.765V1.667H3.66a.834.834 0 0 0-.834.708v.002l-1.15 7.498-.009.09a.835.835 0 0 0 .843.869h4.726c.46 0 .833.373.833.833zm8.333-12.5a.833.833 0 0 0-.833-.833h-1.667v7.5h1.667a.833.833 0 0 0 .833-.833zm-10 10H2.52a2.5 2.5 0 0 1-2.49-2.875l1.15-7.5A2.5 2.5 0 0 1 3.668 0h11.9a2.5 2.5 0 0 1 2.5 2.5v5.833a2.5 2.5 0 0 1-2.5 2.5H13.61l-3.114 7.005-.057.108a.83.83 0 0 1-.704.387 3.333 3.333 0 0 1-3.334-3.333z", clipRule: "evenodd" })
+] });
+export {
+  SvgIconThumbDown as default
+};

package/dist/modules/icons/components/IconThumbUp.d.ts

@@ -0,0 +1,7 @@
+import { SVGProps } from 'react';
+interface SVGRProps {
+    title?: string;
+    titleId?: string;
+}
+declare const SvgIconThumbUp: ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => import("react/jsx-runtime").JSX.Element;
+export default SvgIconThumbUp;

package/dist/modules/icons/components/IconThumbUp.js

@@ -0,0 +1,12 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+const SvgIconThumbUp = ({
+  title,
+  titleId,
+  ...props
+}) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24", "aria-hidden": "true", "aria-labelledby": titleId, ...props, children: [
+  title ? /* @__PURE__ */ jsx("title", { id: titleId, children: title }) : null,
+  /* @__PURE__ */ jsx("path", { fill: "currentColor", fillRule: "evenodd", d: "M10 3.333a1.67 1.67 0 0 0-1.16-1.587L5.833 8.511v8.156h8.576a.834.834 0 0 0 .833-.708l.001-.002 1.15-7.498.008-.09a.834.834 0 0 0-.842-.869h-4.726A.833.833 0 0 1 10 6.667zm-8.333 12.5a.833.833 0 0 0 .833.834h1.667v-7.5H2.5a.833.833 0 0 0-.833.833zm10-10h3.883a2.5 2.5 0 0 1 2.49 2.876l-1.15 7.5a2.5 2.5 0 0 1-2.49 2.124H2.5a2.5 2.5 0 0 1-2.5-2.5V10a2.5 2.5 0 0 1 2.5-2.5h1.958L7.572.495l.057-.108A.83.83 0 0 1 8.333 0a3.333 3.333 0 0 1 3.334 3.333z", clipRule: "evenodd" })
+] });
+export {
+  SvgIconThumbUp as default
+};

package/dist/modules/icons/components/index.d.ts

@@ -24,6 +24,7 @@ export { default as IconCantoo } from './IconCantoo';
 export { default as IconCenter } from './IconCenter';
 export { default as IconCheck } from './IconCheck';
 export { default as IconChecklist } from './IconChecklist';
+export { default as IconClockAlert } from './IconClockAlert';
 export { default as IconClock } from './IconClock';
 export { default as IconCloseFullScreen } from './IconCloseFullScreen';
 export { default as IconClose } from './IconClose';
@@ -150,6 +151,8 @@ export { default as IconTextToSpeech } from './IconTextToSpeech';
 export { default as IconTextTypo } from './IconTextTypo';
 export { default as IconTextUnderline } from './IconTextUnderline';
 export { default as IconTextVanilla } from './IconTextVanilla';
+export { default as IconThumbDown } from './IconThumbDown';
+export { default as IconThumbUp } from './IconThumbUp';
 export { default as IconToolCenter } from './IconToolCenter';
 export { default as IconTool } from './IconTool';
 export { default as IconTrendingUp } from './IconTrendingUp';

package/dist/modules/modals/ShareModal/ShareBookmark.d.ts

@@ -4,5 +4,5 @@ export declare const ShareBookmark: ({ bookmark, refBookmark, onBookmarkChange,
     bookmark: BookmarkProps;
     refBookmark: Ref<HTMLInputElement>;
     onBookmarkChange: () => void;
-    onSave: () => void;
+    onSave: () => Promise<void>;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/modules/modals/ShareModal/ShareBookmark.js

@@ -1,4 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import SvgIconSave from "../../icons/components/IconSave.js";
 import FormControl from "../../../components/Form/FormControl.js";
@@ -11,10 +12,12 @@ const ShareBookmark = ({
 }) => {
   const {
     t
-  } = useTranslation();
+  } = useTranslation(), [isSaving, setIsSaving] = useState(!1), handleSaveClick = async () => {
+    setIsSaving(!0), await onSave(), setIsSaving(!1);
+  };
   return /* @__PURE__ */ jsx("div", { className: "mt-16", children: /* @__PURE__ */ jsxs(FormControl, { id: "bookmarkName", className: "d-flex flex-wrap align-items-center gap-16", children: [
     /* @__PURE__ */ jsx("div", { className: "flex-fill", children: /* @__PURE__ */ jsx(FormControl.Input, { ref: refBookmark, onChange: onBookmarkChange, placeholder: t("explorer.modal.share.sharebookmark.placeholder"), size: "sm", type: "text" }, bookmark.id) }),
-    /* @__PURE__ */ jsx(Button, { type: "button", color: "primary", variant: "ghost", disabled: bookmark.name.length === 0, leftIcon: /* @__PURE__ */ jsx(SvgIconSave, {}), onClick: onSave, className: "text-nowrap", children: t("explorer.modal.share.sharebookmark.save") })
+    /* @__PURE__ */ jsx(Button, { type: "button", color: "primary", variant: "ghost", disabled: bookmark.name.length === 0 || isSaving, leftIcon: /* @__PURE__ */ jsx(SvgIconSave, {}), onClick: handleSaveClick, className: "text-nowrap", isLoading: isSaving, children: t("explorer.modal.share.sharebookmark.save") })
   ] }) });
 };
 export {

package/dist/modules/modals/ShareModal/ShareModal.d.ts

@@ -1,15 +1,5 @@
 import { ReactNode } from 'react';
-import { ID, PutShareResponse, RightStringified, ShareRight } from '@edifice.io/client';
-import { UseMutationResult } from '../../../node_modules/@tanstack/react-query';
-export type ShareOptions = {
-    resourceId: ID;
-    resourceRights: RightStringified[];
-    resourceCreatorId: string;
-};
-export type ShareResourceMutation = UseMutationResult<PutShareResponse, unknown, {
-    resourceId: string;
-    rights: ShareRight[];
-}, unknown>;
+import { ShareOptions, ShareResourceMutation } from './ShareResources';
 interface ShareResourceModalProps {
     /** Handle open/close state */
     isOpen: boolean;

package/dist/modules/modals/ShareModal/ShareModal.js

@@ -1,25 +1,11 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useTranslation } from "react-i18next";
-import SvgIconBookmark from "../../icons/components/IconBookmark.js";
-import SvgIconInfoCircle from "../../icons/components/IconInfoCircle.js";
-import SvgIconRafterDown from "../../icons/components/IconRafterDown.js";
-import { ShareBookmark } from "./ShareBookmark.js";
-import { ShareBookmarkLine } from "./ShareBookmarkLine.js";
-import { useSearch } from "./hooks/useSearch.js";
-import useShare from "./hooks/useShare.js";
-import { useShareBookmark } from "./hooks/useShareBookmark.js";
+import ShareResources from "./ShareResources.js";
 import Modal from "../../../components/Modal/Modal.js";
 import Alert from "../../../components/Alert/Alert.js";
-import Heading from "../../../components/Heading/Heading.js";
-import LoadingScreen from "../../../components/LoadingScreen/LoadingScreen.js";
-import VisuallyHidden from "../../../components/VisuallyHidden/VisuallyHidden.js";
-import Avatar from "../../../components/Avatar/Avatar.js";
-import Checkbox from "../../../components/Checkbox/Checkbox.js";
 import Button from "../../../components/Button/Button.js";
-import Tooltip from "../../../components/Tooltip/Tooltip.js";
-import Combobox from "../../../components/Combobox/Combobox.js";
 function ShareResourceModal({
   isOpen,
   shareOptions,
@@ -28,104 +14,26 @@ function ShareResourceModal({
   onSuccess,
   onCancel
 }) {
-  const {
-    resourceId,
-    resourceCreatorId,
-    resourceRights
-  } = shareOptions, [isLoading, setIsLoading] = useState(!0), {
-    state: {
-      isSharing,
-      shareRights,
-      shareRightActions
-    },
-    dispatch: shareDispatch,
-    myAvatar,
-    currentIsAuthor,
-    handleShare,
-    toggleRight,
-    handleDeleteRow
-  } = useShare({
-    resourceId,
-    resourceCreatorId,
-    resourceRights,
-    shareResource,
-    setIsLoading,
-    onSuccess
-  }), {
-    state: {
-      searchResults,
-      searchInputValue
-    },
-    showSearchAdmlHint,
-    showSearchLoading,
-    showSearchNoResults,
-    getSearchMinLength,
-    handleSearchInputChange,
-    handleSearchResultsChange
-  } = useSearch({
-    resourceId,
-    resourceCreatorId,
-    shareRights,
-    shareDispatch
-  }), {
-    refBookmark,
-    showBookmark,
-    handleBookmarkChange,
-    toggleBookmark,
-    bookmark,
-    handleOnSave,
-    showBookmarkInput,
-    toggleBookmarkInput
-  } = useShareBookmark({
-    shareRights,
-    shareDispatch
-  }), {
+  const refShareResources = useRef(null), handleShare = () => {
+    var _a;
+    (_a = refShareResources.current) == null || _a.handleShare();
+  }, [isSaving, setIsSaving] = useState(!1), {
     t
-  } = useTranslation(), searchPlaceholder = showSearchAdmlHint() ? t("explorer.search.adml.hint") : t("explorer.modal.share.search.placeholder");
+  } = useTranslation(), onSaving = (isSaving2) => {
+    setIsSaving(isSaving2);
+  };
   return /* @__PURE__ */ createPortal(/* @__PURE__ */ jsxs(Modal, { id: "share_modal", size: "lg", isOpen, onModalClose: onCancel, children: [
     /* @__PURE__ */ jsx(Modal.Header, { onModalClose: onCancel, children: t("share.title") }),
     /* @__PURE__ */ jsxs(Modal.Body, { children: [
       /* @__PURE__ */ jsx(Alert, { type: "info", className: "mb-16", children: t("explorer.modal.share.alert.community") }),
-      /* @__PURE__ */ jsx(Heading, { headingStyle: "h4", level: "h3", className: "mb-16", children: t("explorer.modal.share.usersWithAccess") }),
-      /* @__PURE__ */ jsx("div", { className: "table-responsive", children: isLoading ? /* @__PURE__ */ jsx(LoadingScreen, {}) : /* @__PURE__ */ jsxs("table", { className: "table border align-middle mb-0", children: [
-        /* @__PURE__ */ jsx("thead", { className: "bg-secondary", children: /* @__PURE__ */ jsxs("tr", { children: [
-          /* @__PURE__ */ jsx("th", { scope: "col", className: "w-32", children: /* @__PURE__ */ jsx(VisuallyHidden, { children: t("explorer.modal.share.avatar.shared.alt") }) }),
-          /* @__PURE__ */ jsx("th", { scope: "col", children: /* @__PURE__ */ jsx(VisuallyHidden, { children: t("explorer.modal.share.search.placeholder") }) }),
-          shareRightActions.map((shareRightAction) => /* @__PURE__ */ jsx("th", { scope: "col", className: "text-center text-white", children: t(shareRightAction.displayName) }, shareRightAction.displayName)),
-          /* @__PURE__ */ jsx("th", { scope: "col", children: /* @__PURE__ */ jsx(VisuallyHidden, { children: t("close") }) })
-        ] }) }),
-        /* @__PURE__ */ jsxs("tbody", { children: [
-          currentIsAuthor() && /* @__PURE__ */ jsxs("tr", { children: [
-            /* @__PURE__ */ jsx("th", { scope: "row", children: /* @__PURE__ */ jsx(Avatar, { alt: t("explorer.modal.share.avatar.me.alt"), size: "xs", src: myAvatar, variant: "circle" }) }),
-            /* @__PURE__ */ jsx("td", { children: t("share.me") }),
-            shareRightActions.map((shareRightAction) => /* @__PURE__ */ jsx("td", { style: {
-              width: "80px"
-            }, className: "text-center text-white", children: /* @__PURE__ */ jsx(Checkbox, { checked: !0, disabled: !0 }) }, shareRightAction.displayName)),
-            /* @__PURE__ */ jsx("td", {})
-          ] }),
-          /* @__PURE__ */ jsx(ShareBookmarkLine, { showBookmark, shareRightActions, shareRights, onDeleteRow: handleDeleteRow, toggleRight, toggleBookmark })
-        ] })
-      ] }) }),
-      /* @__PURE__ */ jsxs("div", { className: "mt-16", children: [
-        /* @__PURE__ */ jsx(Button, { color: "tertiary", leftIcon: /* @__PURE__ */ jsx(SvgIconBookmark, {}), rightIcon: /* @__PURE__ */ jsx(SvgIconRafterDown, { title: t("show"), className: "w-16 min-w-0", style: {
-          transition: "rotate 0.2s ease-out",
-          rotate: showBookmarkInput ? "-180deg" : "0deg"
-        } }), type: "button", variant: "ghost", className: "fw-normal", onClick: () => toggleBookmarkInput(!showBookmarkInput), children: t("share.save.sharebookmark") }),
-        showBookmarkInput && /* @__PURE__ */ jsx(ShareBookmark, { refBookmark, bookmark, onBookmarkChange: handleBookmarkChange, onSave: handleOnSave })
-      ] }),
-      /* @__PURE__ */ jsx("hr", {}),
-      /* @__PURE__ */ jsxs(Heading, { headingStyle: "h4", level: "h3", className: "mb-16 d-flex align-items-center", children: [
-        /* @__PURE__ */ jsx("div", { className: "me-8", children: t("explorer.modal.share.search") }),
-        /* @__PURE__ */ jsx(Tooltip, { message: "Vos favoris de partage s’affichent en priorité dans votre liste lorsque vous recherchez un groupe ou une personne, vous pouvez les retrouver dans l’annuaire.", placement: "top", children: /* @__PURE__ */ jsx(SvgIconInfoCircle, { className: "c-pointer", height: "18" }) })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "row", children: /* @__PURE__ */ jsx("div", { className: "col-10", children: /* @__PURE__ */ jsx(Combobox, { value: searchInputValue, placeholder: searchPlaceholder, isLoading: showSearchLoading(), noResult: showSearchNoResults(), options: searchResults, searchMinLength: getSearchMinLength(), onSearchInputChange: handleSearchInputChange, onSearchResultsChange: handleSearchResultsChange }) }) }),
+      /* @__PURE__ */ jsx(ShareResources, { shareOptions, shareResource, ref: refShareResources, onSuccess, onSubmit: onSaving, classNameSearchInput: "flex-fill" }),
       children
     ] }),
     /* @__PURE__ */ jsxs(Modal.Footer, { children: [
-      /* @__PURE__ */ jsx(Button, { type: "button", color: "tertiary", variant: "ghost", onClick: onCancel, children: t("explorer.cancel") }),
-      /* @__PURE__ */ jsx(Button, { type: "button", color: "primary", variant: "filled", isLoading: isSharing, onClick: handleShare, disabled: isSharing, children: t("share") })
+      /* @__PURE__ */ jsx(Button, { type: "button", color: "tertiary", variant: "ghost", onClick: onCancel, disabled: isSaving, children: t("explorer.cancel") }),
+      /* @__PURE__ */ jsx(Button, { type: "button", color: "primary", variant: "filled", isLoading: isSaving, onClick: handleShare, disabled: isSaving, children: t("share") })
     ] })
-  ] }), document.getElementById("portal"));
+  ] }), document.getElementById("portal") || document.body);
 }
 export {
   ShareResourceModal as default

package/dist/modules/modals/ShareModal/ShareResources.d.ts

@@ -0,0 +1,174 @@
+import { ID, PutShareResponse, RightStringified, ShareRight, ShareRightActionDisplayName, ShareUrls } from '@edifice.io/client';
+import { UseMutationResult } from '../../../node_modules/@tanstack/react-query';
+/**
+ * Configuration options for sharing a resource
+ *
+ * @typedef {Object} ShareOptions
+ * @property {ID} resourceId - Unique identifier of the resource to share
+ * @property {RightStringified[]} resourceRights - Current rights assigned to the resource
+ * @property {string} resourceCreatorId - User ID of the resource creator
+ * @property {ShareRightActionDisplayName[]} [filteredActions] - Optional list of allowed actions to display
+ * @property {ShareUrls} [shareUrls] - Optional custom URLs for API endpoints related to sharing operations default endpoints are used if not provided
+ * default: {
+ *   getResourceRights: `/${app}/share/json/${resourceId}?search=`,
+ *   saveResourceRights: `/${app}/share/resource/${resourceId}`,
+ *   getShareMapping: `/${app}/rights/sharing`
+ * }
+ *
+ * @example Example related to sharing thread resources:
+ * ```ts
+ * const shareOptions: ShareOptions = {
+ *   resourceId: '12345',
+ *   resourceRights: [],
+ *   resourceCreatorId: 'user-67890',
+ *   filteredActions: ['read', 'contrib'],
+ *   shareUrls: {
+ *     getResourceRights: '/api/V1/thread/shares', (get endpoint)
+ *     saveResourceRights: '/api/V1/thread/shares', (put endpoint)
+ *     getShareMapping: '/api/V1/rights/sharing'
+ *   }
+ * };
+ * ```
+ *
+ * @example Example related to sharing info resources:
+ * ```ts
+ * const shareOptions: ShareOptions = {
+ *   resourceId: '12345',
+ *   resourceRights: [],
+ *   resourceCreatorId: 'user-67890',
+ *   filteredActions: ['read', 'contrib'],
+ *   shareUrls: {
+ *     getResourceRights: '/api/V1/info/shares', (get endpoint)
+ *     saveResourceRights: '/api/V1/info/shares', (put endpoint)
+ *     getShareMapping: '/api/V1/rights/sharing'
+ *   }
+ * };
+ * ```
+ */
+export type ShareOptions = {
+    resourceId: ID;
+    resourceRights: RightStringified[];
+    resourceCreatorId: string;
+    filteredActions?: ShareRightActionDisplayName[];
+    shareUrls?: ShareUrls;
+};
+/**
+ * React Query mutation result for share operations
+ *
+ * @typedef {UseMutationResult<PutShareResponse, unknown, {resourceId: string; rights: ShareRight[]}, unknown>} ShareResourceMutation
+ */
+export type ShareResourceMutation = UseMutationResult<PutShareResponse, unknown, {
+    resourceId: string;
+    rights: ShareRight[];
+}, unknown>;
+/**
+ * Props for the ShareResources component
+ *
+ * @interface ShareResourceProps
+ * @property {ShareOptions} shareOptions - Configuration for the resource being shared
+ * @property {ShareResourceMutation} [shareResource] - Optional React Query mutation for optimistic UI updates
+ * @property {() => void} [onSuccess] - Callback fired after successful share operation
+ * @property {(shareRights: ShareRight[], isDirty: boolean) => void} [onChange] - Callback fired when share rights change
+ * @property {(isSubmitting: boolean) => void} [onSubmit] - Callback fired when share operation is submitting
+ * @property {string} [classNameSearchInput] - Optional CSS class for the search input wrapper (default: 'col-6')
+ */
+interface ShareResourceProps {
+    /**
+     * Expect resourceId,
+     * new rights array (replace shared array),
+     * creatorId
+     * of a resource */
+    shareOptions: ShareOptions;
+    /**
+     * Use the `shareResource` props when you need to do Optimistic UI
+     * otherwise ShareModal handles everything
+     * Must use React Query */
+    shareResource?: ShareResourceMutation;
+    /**
+     * onSuccess callback when a resource is successfully shared
+     */
+    onSuccess?: () => void;
+    /**
+     * Callback when share rights change
+     */
+    onChange?: (shareRights: ShareRight[], isDirty: boolean) => void;
+    /**
+     * Callback when ShareResources component is submitting share rights or bookmark changes
+     */
+    onSubmit?: (isSubmitting: boolean) => void;
+    /**
+     * Optional className for the search input wrapper (default: 'col-6')
+     */
+    classNameSearchInput?: string;
+}
+/**
+ * Ref interface exposed by ShareResources component
+ *
+ * @interface ShareResourcesRef
+ * @property {() => void} handleShare - Method to trigger the share operation
+ *
+ * @example
+ * ```tsx
+ * const ref = useRef<ShareResourcesRef>(null);
+ *
+ * // Trigger share programmatically
+ * ref.current?.handleShare();
+ *
+ * // Check sharing status
+ * const sharing = ref.current?.isSharing();
+ * ```
+ */
+export interface ShareResourcesRef {
+    handleShare: (notify?: boolean) => void;
+}
+/**
+ * ShareResources Component
+ *
+ * A component for managing resource sharing permissions with users and groups.
+ * Provides search functionality, bookmark management, and granular rights control.
+ *
+ * @example
+ * ```tsx
+ * import { useRef } from 'react';
+ * import ShareResources, { ShareResourcesRef, ShareOptions } from './ShareResources';
+ *
+ * function MyComponent() {
+ *   const shareRef = useRef<ShareResourcesRef>(null);
+ *
+ *   const shareOptions: ShareOptions = {
+ *     resourceId: '123',
+ *     resourceRights: [],
+ *     resourceCreatorId: 'user-456',
+ *     filteredActions: ['read', 'contrib'],
+ *     urls: {
+ *       getResourceRights: '/api/share/rights',
+ *       putResourceRights: '/api/share/update'
+ *     }
+ *   };
+ *
+ *   const handleSave = () => {
+ *     if (shareRef.current) {
+ *       shareRef.current.handleShare();
+ *     }
+ *   };
+ *
+ *   return (
+ *     <>
+ *       <ShareResources
+ *         ref={shareRef}
+ *         shareOptions={shareOptions}
+ *         onSuccess={() => console.log('Shared successfully')}
+ *         onChange={(rights, isDirty) => console.log('Rights changed:', isDirty)}
+ *         onSubmit={(isSubmitting) => console.log('Submitting share...', isSubmitting)}
+ *       />
+ *       <button onClick={handleSave}>Save Changes</button>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @component
+ * @forwardRef
+ */
+declare const ShareResources: import('react').ForwardRefExoticComponent<ShareResourceProps & import('react').RefAttributes<ShareResourcesRef>>;
+export default ShareResources;