@edifice.io/react 2.1.0-develop-enabling.0 → 2.1.0-develop-wl.20250204154502

package/dist/index.js

@@ -1,179 +1,177 @@
 import { default as default2 } from "./components/ActionBar/ActionBar.js";
-import { default as default3 } from "./components/AppHeader/AppHeader.js";
-import { default as default4 } from "./components/AppIcon/AppIcon.js";
-import { default as default5 } from "./components/Attachment/Attachment.js";
-import { default as default6 } from "./components/Badge/Badge.js";
-import { default as default7 } from "./components/Breadcrumb/Breadcrumb.js";
-import { default as default8 } from "./components/Button/IconButton.js";
-import { default as default9 } from "./components/Button/SearchButton.js";
-import { default as default10 } from "./components/Card/Card.js";
-import { default as default11 } from "./components/ColorPicker/ColorPicker.js";
-import { default as default12 } from "./components/ColorPicker/ColorPickerItem.js";
-import { default as default13 } from "./components/Dropdown/Dropdown.js";
-import { default as default14 } from "./components/Dropzone/Dropzone.js";
-import { default as default15 } from "./components/EmptyScreen/EmptyScreen.js";
-import { default as default16 } from "./components/Form/FormText.js";
-import { default as default17 } from "./components/Image/Image.js";
-import { default as default18 } from "./components/Loading/Loading.js";
-import { default as default19 } from "./components/Logo/Logo.js";
-import { default as default20 } from "./components/SearchBar/SearchBar.js";
-import { default as default21 } from "./components/Select/Select.js";
-import { default as default22 } from "./components/Table/components/Table.js";
+import { default as default3 } from "./components/Alert/Alert.js";
+import { default as default4 } from "./components/AppHeader/AppHeader.js";
+import { default as default5 } from "./components/AppIcon/AppIcon.js";
+import { default as default6 } from "./components/Attachment/Attachment.js";
+import { default as default7 } from "./components/Badge/Badge.js";
+import { default as default8 } from "./components/Breadcrumb/Breadcrumb.js";
+import { default as default9 } from "./components/Button/IconButton.js";
+import { default as default10 } from "./components/Button/SearchButton.js";
+import { default as default11 } from "./components/Card/Card.js";
+import { default as default12 } from "./components/ColorPicker/ColorPicker.js";
+import { default as default13 } from "./components/ColorPicker/ColorPickerItem.js";
+import { default as default14 } from "./components/Dropdown/Dropdown.js";
+import { default as default15 } from "./components/Dropzone/Dropzone.js";
+import { default as default16 } from "./components/EmptyScreen/EmptyScreen.js";
+import { default as default17 } from "./components/Form/FormText.js";
+import { default as default18 } from "./components/Image/Image.js";
+import { default as default19 } from "./components/Loading/Loading.js";
+import { default as default20 } from "./components/Logo/Logo.js";
+import { default as default21 } from "./components/SearchBar/SearchBar.js";
+import { default as default22 } from "./components/Select/Select.js";
+import { default as default23 } from "./components/Table/components/Table.js";
 import { DndTree } from "./components/Tree/components/DndTree.js";
-import { default as default23 } from "./components/Tree/components/SortableTree.js";
-import { default as default24 } from "./components/Tree/components/Tree.js";
-import { default as default25 } from "./components/TreeView/TreeView.js";
-import { default as default26 } from "./hooks/useAvatar/useAvatar.js";
+import { default as default24 } from "./components/Tree/components/SortableTree.js";
+import { default as default25 } from "./components/Tree/components/Tree.js";
+import { default as default26 } from "./components/TreeView/TreeView.js";
 import { default as default27 } from "./hooks/useBookmark/useBookmark.js";
 import { default as default28 } from "./hooks/useBreakpoint/useBreakpoint.js";
 import { default as default29 } from "./hooks/useBrowserInfo/useBrowserInfo.js";
 import { default as default30 } from "./hooks/useCantoo/useCantoo.js";
 import { default as default31 } from "./hooks/useClickOutside/useClickOutside.js";
-import { default as default32 } from "./hooks/useConf/useConf.js";
-import { default as default33 } from "./hooks/useConversation/useConversation.js";
-import { default as default34 } from "./hooks/useDate/useDate.js";
-import { default as default35 } from "./hooks/useDebounce/useDebounce.js";
-import { default as default36 } from "./hooks/useDirectory/useDirectory.js";
-import { default as default37 } from "./hooks/useDropdown/useDropdown.js";
-import { default as default38 } from "./hooks/useDropzone/useDropzone.js";
-import { default as default39 } from "./hooks/useEdificeIcons/useEdificeIcons.js";
-import { default as default40 } from "./hooks/useHeader/useHeader.js";
+import { default as default32 } from "./hooks/useConversation/useConversation.js";
+import { default as default33 } from "./hooks/useDate/useDate.js";
+import { default as default34 } from "./hooks/useDebounce/useDebounce.js";
+import { default as default35 } from "./hooks/useDirectory/useDirectory.js";
+import { default as default36 } from "./hooks/useDropdown/useDropdown.js";
+import { default as default37 } from "./hooks/useDropzone/useDropzone.js";
+import { default as default38 } from "./hooks/useEdificeIcons/useEdificeIcons.js";
+import { default as default39 } from "./hooks/useHover/useHover.js";
+import { default as default40 } from "./hooks/useHttpErrorToast/useHttpErrorToast.js";
 import { default as default41 } from "./hooks/useImage/useImage.js";
 import { default as default42 } from "./hooks/useIsAdml/useIsAdml.js";
 import { default as default43 } from "./hooks/useKeyPress/useKeyPress.js";
 import { default as default44 } from "./hooks/useLibraryUrl/useLibraryUrl.js";
 import { default as default45 } from "./hooks/useScrollToTop/useScrollToTop.js";
-import { default as default46 } from "./hooks/useSession/useSession.js";
-import { default as default47 } from "./hooks/useTitle/useTitle.js";
-import { default as default48 } from "./hooks/useToggle/useToggle.js";
-import { default as default49 } from "./hooks/useTrapFocus/useTrapFocus.js";
-import { default as default50 } from "./hooks/useTrashedResource/useTrashedResource.js";
-import { default as default51 } from "./hooks/useUpload/useUpload.js";
-import { default as default52 } from "./hooks/useUploadFiles/useUploadFiles.js";
-import { default as default53 } from "./hooks/useWorkspaceFile/useWorkspaceFile.js";
-import { default as default54 } from "./hooks/useWorkspaceSearch/useWorkspaceSearch.js";
-import { default as default55 } from "./hooks/useXitiTrackPageLoad/useXitiTrackPageLoad.js";
-import { default as default56 } from "./hooks/useZendeskGuide/useZendeskGuide.js";
-import { default as default57 } from "./components/Alert/Alert.js";
-import { default as default58 } from "./components/Avatar/Avatar.js";
-import { default as default59 } from "./components/Button/Button.js";
-import { default as default60 } from "./components/Checkbox/Checkbox.js";
+import { default as default46 } from "./hooks/useTitle/useTitle.js";
+import { default as default47 } from "./hooks/useToggle/useToggle.js";
+import { default as default48 } from "./hooks/useTrapFocus/useTrapFocus.js";
+import { default as default49 } from "./hooks/useTrashedResource/useTrashedResource.js";
+import { default as default50 } from "./hooks/useUpload/useUpload.js";
+import { default as default51 } from "./hooks/useUploadFiles/useUploadFiles.js";
+import { default as default52 } from "./hooks/useWorkspaceFile/useWorkspaceFile.js";
+import { default as default53 } from "./hooks/useWorkspaceSearch/useWorkspaceSearch.js";
+import { default as default54 } from "./hooks/useXitiTrackPageLoad/useXitiTrackPageLoad.js";
+import { default as default55 } from "./hooks/useZendeskGuide/useZendeskGuide.js";
+import { default as default56 } from "./components/Avatar/Avatar.js";
+import { default as default57 } from "./components/Button/Button.js";
+import { default as default58 } from "./components/Checkbox/Checkbox.js";
 import { AccessiblePalette, DefaultPalette } from "./components/ColorPicker/ColorPalette.js";
-import { default as default61 } from "./components/Combobox/Combobox.js";
+import { default as default59 } from "./components/Combobox/Combobox.js";
 import { DropzoneContext, useDropzoneContext } from "./components/Dropzone/DropzoneContext.js";
-import { default as default62 } from "./components/Form/FormControl.js";
+import { default as default60 } from "./components/Form/FormControl.js";
 import { Column, Grid } from "./components/Grid/Grid.js";
-import { default as default63 } from "./components/Heading/Heading.js";
-import { default as default64 } from "./components/Input/Input.js";
-import { default as default65 } from "./components/Label/Label.js";
+import { default as default61 } from "./components/Heading/Heading.js";
+import { default as default62 } from "./components/Input/Input.js";
+import { default as default63 } from "./components/Label/Label.js";
 import { Layout } from "./components/Layout/Layout.js";
 import { List } from "./components/List/List.js";
-import { default as default66 } from "./components/LoadingScreen/LoadingScreen.js";
+import { default as default64 } from "./components/LoadingScreen/LoadingScreen.js";
 import { Menu } from "./components/Menu/components/Menu.js";
-import { default as default67 } from "./components/Modal/Modal.js";
+import { default as default65 } from "./components/Modal/Modal.js";
 import { Popover, PopoverBody, PopoverFooter, PopoverHeader } from "./components/Popover/Popover.js";
-import { default as default68 } from "./components/Radio/Radio.js";
+import { default as default66 } from "./components/Radio/Radio.js";
 import { Tabs } from "./components/Tabs/components/Tabs.js";
-import { default as default69 } from "./components/TextArea/TextArea.js";
+import { default as default67 } from "./components/TextArea/TextArea.js";
 import { Toolbar } from "./components/Toolbar/Toolbar.js";
-import { default as default70 } from "./components/Tooltip/Tooltip.js";
+import { default as default68 } from "./components/Tooltip/Tooltip.js";
 import { useTreeSortable } from "./components/Tree/hooks/useTreeSortable.js";
 import { buildTree, determineNewParentId, findItemIndexInTree, flattenNodes, flattenTree, generateUpdateData, getActiveAndOverNodes, getDragDepth, getIndicesToUpdate, getProjection, updateParentIds } from "./components/Tree/utilities/tree-sortable.js";
 import { useTreeView } from "./components/TreeView/hooks/useTreeView.js";
 import { TreeNode } from "./components/TreeView/TreeNode.js";
 import { TreeNodeFolderWrapper, addNode, arrayUnique, deleteNode, findNodeById, findParentNode, findPathById, findTreeNode, getAncestors, hasChildren, modifyNode, moveNode, updateNode, wrapTreeNode } from "./components/TreeView/utilities/treeview.js";
-import { default as default71 } from "./components/VisuallyHidden/VisuallyHidden.js";
+import { default as default69 } from "./components/VisuallyHidden/VisuallyHidden.js";
 import { useCheckable } from "./hooks/useCheckable/useCheckable.js";
-import { default as default72 } from "./hooks/useHasWorkflow/useHasWorkflow.js";
-import { default as default73 } from "./hooks/useHover/useHover.js";
-import { default as default74 } from "./hooks/useMediaLibrary/useMediaLibrary.js";
-import { useResourceSearch } from "./hooks/useResourceSearch/useResourceSearch.js";
-import { default as default75 } from "./hooks/useToast/useToast.js";
-import { default as default76 } from "./hooks/useUser/useUser.js";
-import { default as default77 } from "./modules/modals/OnboardingModal/OnboardingModal.js";
-import { default as default78 } from "./modules/modals/PublishModal/PublishModal.js";
-import { default as default79 } from "./modules/modals/ResourceModal/apps/BlogPublic.js";
-import { default as default80 } from "./modules/modals/ResourceModal/hooks/useUpdateMutation.js";
+import { default as default70 } from "./hooks/useHasWorkflow/useHasWorkflow.js";
+import { default as default71 } from "./hooks/useMediaLibrary/useMediaLibrary.js";
+import { default as default72 } from "./hooks/useToast/useToast.js";
+import { default as default73 } from "./hooks/useUser/useUser.js";
+import { default as default74 } from "./modules/modals/OnboardingModal/OnboardingModal.js";
+import { default as default75 } from "./modules/modals/PublishModal/PublishModal.js";
+import { default as default76 } from "./modules/modals/ResourceModal/apps/BlogPublic.js";
+import { default as default77 } from "./modules/modals/ResourceModal/hooks/useUpdateMutation.js";
 import { ResourceModal } from "./modules/modals/ResourceModal/ResourceModal.js";
-import { default as default81 } from "./modules/modals/ShareModal/ShareModal.js";
-import { default as default82 } from "./modules/modals/ShareModal/apps/ShareBlog.js";
-import { default as default83 } from "./modules/modals/ShareModal/hooks/useShareMutation.js";
+import { default as default78 } from "./modules/modals/ShareModal/ShareModal.js";
+import { default as default79 } from "./modules/modals/ShareModal/apps/ShareBlog.js";
+import { default as default80 } from "./modules/modals/ShareModal/hooks/useShareMutation.js";
 import { EdificeClientProvider } from "./providers/EdificeClientProvider/EdificeClientProvider.js";
 import { EdificeClientContext } from "./providers/EdificeClientProvider/EdificeClientProvider.context.js";
 import { useEdificeClient } from "./providers/EdificeClientProvider/EdificeClientProvider.hook.js";
 import { EdificeThemeProvider } from "./providers/EdificeThemeProvider/EdificeThemeProvider.js";
 import { EdificeThemeContext } from "./providers/EdificeThemeProvider/EdificeThemeProvider.context.js";
 import { useEdificeTheme } from "./providers/EdificeThemeProvider/EdificeThemeProvider.hook.js";
+import { MockedProvider } from "./providers/MockedProvider/MockedProvider.js";
 import { checkUserRight } from "./utilities/check-user-rights/check-user-rights.js";
 import { emptyScreenMapping } from "./utilities/emptyscreen-mapping/emptyscreen-mapping.js";
 import { mergeRefs, setRef } from "./utilities/refs/ref.js";
 export {
   AccessiblePalette,
   default2 as ActionBar,
-  default57 as Alert,
-  default3 as AppHeader,
-  default4 as AppIcon,
-  default5 as Attachment,
-  default58 as Avatar,
-  default6 as Badge,
-  default79 as BlogPublic,
-  default7 as Breadcrumb,
-  default59 as Button,
-  default10 as Card,
-  default60 as Checkbox,
-  default11 as ColorPicker,
-  default12 as ColorPickerItem,
+  default3 as Alert,
+  default4 as AppHeader,
+  default5 as AppIcon,
+  default6 as Attachment,
+  default56 as Avatar,
+  default7 as Badge,
+  default76 as BlogPublic,
+  default8 as Breadcrumb,
+  default57 as Button,
+  default11 as Card,
+  default58 as Checkbox,
+  default12 as ColorPicker,
+  default13 as ColorPickerItem,
   Column,
-  default61 as Combobox,
+  default59 as Combobox,
   DefaultPalette,
   DndTree,
-  default13 as Dropdown,
-  default14 as Dropzone,
+  default14 as Dropdown,
+  default15 as Dropzone,
   DropzoneContext,
   EdificeClientContext,
   EdificeClientProvider,
   EdificeThemeContext,
   EdificeThemeProvider,
-  default15 as EmptyScreen,
-  default62 as FormControl,
-  default16 as FormText,
+  default16 as EmptyScreen,
+  default60 as FormControl,
+  default17 as FormText,
   Grid,
-  default63 as Heading,
-  default8 as IconButton,
-  default17 as Image,
-  default64 as Input,
-  default65 as Label,
+  default61 as Heading,
+  default9 as IconButton,
+  default18 as Image,
+  default62 as Input,
+  default63 as Label,
   Layout,
   List,
-  default18 as Loading,
-  default66 as LoadingScreen,
-  default19 as Logo,
+  default19 as Loading,
+  default64 as LoadingScreen,
+  default20 as Logo,
   Menu,
-  default67 as Modal,
-  default77 as OnboardingModal,
+  MockedProvider,
+  default65 as Modal,
+  default74 as OnboardingModal,
   Popover,
   PopoverBody,
   PopoverFooter,
   PopoverHeader,
-  default78 as PublishModal,
-  default68 as Radio,
+  default75 as PublishModal,
+  default66 as Radio,
   ResourceModal,
-  default20 as SearchBar,
-  default9 as SearchButton,
-  default21 as Select,
-  default82 as ShareBlog,
-  default81 as ShareModal,
-  default23 as SortableTree,
-  default22 as Table,
+  default21 as SearchBar,
+  default10 as SearchButton,
+  default22 as Select,
+  default79 as ShareBlog,
+  default78 as ShareModal,
+  default24 as SortableTree,
+  default23 as Table,
   Tabs,
-  default69 as TextArea,
+  default67 as TextArea,
   Toolbar,
-  default70 as Tooltip,
-  default24 as Tree,
+  default68 as Tooltip,
+  default25 as Tree,
   TreeNode,
   TreeNodeFolderWrapper,
-  default25 as TreeView,
-  default71 as VisuallyHidden,
+  default26 as TreeView,
+  default69 as VisuallyHidden,
   addNode,
   arrayUnique,
   buildTree,
@@ -201,50 +199,46 @@ export {
   setRef,
   updateNode,
   updateParentIds,
-  default26 as useAvatar,
   default27 as useBookmark,
   default28 as useBreakpoint,
   default29 as useBrowserInfo,
   default30 as useCantoo,
   useCheckable,
   default31 as useClickOutside,
-  default32 as useConf,
-  default33 as useConversation,
-  default34 as useDate,
-  default35 as useDebounce,
-  default36 as useDirectory,
-  default37 as useDropdown,
-  default38 as useDropzone,
+  default32 as useConversation,
+  default33 as useDate,
+  default34 as useDebounce,
+  default35 as useDirectory,
+  default36 as useDropdown,
+  default37 as useDropzone,
   useDropzoneContext,
   useEdificeClient,
-  default39 as useEdificeIcons,
+  default38 as useEdificeIcons,
   useEdificeTheme,
-  default72 as useHasWorkflow,
-  default40 as useHeader,
-  default73 as useHover,
+  default70 as useHasWorkflow,
+  default39 as useHover,
+  default40 as useHttpErrorToast,
   default41 as useImage,
   default42 as useIsAdml,
   default43 as useKeyPress,
   default44 as useLibraryUrl,
-  default74 as useMediaLibrary,
-  useResourceSearch,
+  default71 as useMediaLibrary,
   default45 as useScrollToTop,
-  default46 as useSession,
-  default83 as useShareMutation,
-  default47 as useTitle,
-  default75 as useToast,
-  default48 as useToggle,
-  default49 as useTrapFocus,
-  default50 as useTrashedResource,
+  default80 as useShareMutation,
+  default46 as useTitle,
+  default72 as useToast,
+  default47 as useToggle,
+  default48 as useTrapFocus,
+  default49 as useTrashedResource,
   useTreeSortable,
   useTreeView,
-  default80 as useUpdateMutation,
-  default51 as useUpload,
-  default52 as useUploadFiles,
-  default76 as useUser,
-  default53 as useWorkspaceFile,
-  default54 as useWorkspaceSearch,
-  default55 as useXitiTrackPageLoad,
-  default56 as useZendeskGuide,
+  default77 as useUpdateMutation,
+  default50 as useUpload,
+  default51 as useUploadFiles,
+  default73 as useUser,
+  default52 as useWorkspaceFile,
+  default53 as useWorkspaceSearch,
+  default54 as useXitiTrackPageLoad,
+  default55 as useZendeskGuide,
   wrapTreeNode
 };

package/dist/modules/audience/ReactionChoice.d.ts

@@ -1,7 +1,20 @@
 import { ReactionSummaryData, ReactionType } from '@edifice.io/client';
+/**
+ * Props for the ReactionChoice component.
+ */
 export interface ReactionChoiceProps {
+    /**
+     * An array of available reactions that can be chosen.
+     */
     availableReactions: ReactionType[];
+    /**
+     * Optional summary data of the reactions.
+     */
     summary?: ReactionSummaryData;
+    /**
+     * Optional callback function that is called when a reaction is chosen.
+     * @param chosenReaction - The reaction that was chosen.
+     */
     onChange?: (chosenReaction?: ReactionType) => void;
 }
 declare const ReactionChoice: {

package/dist/modules/audience/ReactionModal.Card.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 import useReactionIcons from "./hooks/useReactionIcons.js";
-import useAvatar from "../../hooks/useAvatar/useAvatar.js";
+import useDirectory from "../../hooks/useDirectory/useDirectory.js";
 import Avatar from "../../components/Avatar/Avatar.js";
 function ReactionModalCard({
   reaction
@@ -9,14 +9,14 @@ function ReactionModalCard({
   const {
     t
   } = useTranslation(), {
-    avatarURL
-  } = useAvatar(reaction.userId, reaction.profile), {
+    getAvatarURL
+  } = useDirectory(), {
     getReactionIcon,
     getReactionLabel
   } = useReactionIcons();
   return /* @__PURE__ */ jsxs("div", { className: "reaction-modal-card w-100 d-flex gap-8", children: [
     /* @__PURE__ */ jsxs("div", { className: "position-relative p-8", children: [
-      /* @__PURE__ */ jsx(Avatar, { variant: "circle", size: "md", src: avatarURL, alt: reaction.displayName }),
+      /* @__PURE__ */ jsx(Avatar, { variant: "circle", size: "md", src: getAvatarURL(reaction.userId, "user"), alt: reaction.displayName }),
       /* @__PURE__ */ jsx("div", { className: "position-absolute end-0 bottom-0", children: getReactionIcon(reaction.reactionType, !0) })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "d-flex flex-column w-100 pt-8", children: [

package/dist/modules/audience/ReactionModal.d.ts

@@ -1,19 +1,37 @@
 import { ReactionDetailsData } from '@edifice.io/client';
 import { ReactionModalCard } from './ReactionModal.Card';
+/**
+ * Props for the ReactionModal component.
+ */
 export interface ReactionModalProps {
-    /** Id of resource. */
+    /**
+     * The unique identifier for the resource.
+     */
     resourceId: string;
-    /** Number of results per page, defaults to 30. */
+    /**
+     * The number of items to display per page. Optional.
+     */
     pageSize?: number;
-    /** Display modal ? */
+    /**
+     * Indicates whether the modal is open.
+     */
     isOpen: boolean;
-    /** Close button handler. */
+    /**
+     * Callback function to handle the modal close event.
+     */
     onModalClose(): void;
-    /** Function for loading reactions to the resource. */
+    /**
+     * Function to load reaction details for a given resource.
+     *
+     * @param resourceId - The unique identifier for the resource.
+     * @param page - The current page number.
+     * @param size - The number of items to display per page.
+     * @returns A promise that resolves to the reaction details data or undefined.
+     */
     reactionDetailsLoader: (resourceId: string, page: number, size: number) => Promise<ReactionDetailsData | undefined>;
 }
 declare const ReactionModal: {
-    ({ resourceId, pageSize, reactionDetailsLoader: loadReactionDetails, onModalClose, ...restProps }: ReactionModalProps): import('react').ReactPortal;
+    ({ resourceId, pageSize, reactionDetailsLoader: loadReactionDetails, onModalClose, ...restProps }: ReactionModalProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
     Card: typeof ReactionModalCard;
 };

package/dist/modules/audience/ReactionModal.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { ReactionTypes } from "@edifice.io/client";
 import { StringUtils } from "@edifice.io/utilities";
 import { useState, useId, useCallback, useMemo, useEffect } from "react";
@@ -57,14 +57,17 @@ const ALL_TAB_ID = "all", ReactionModal = ({
   const handleTabChange = (tab) => {
     setCurrentTabId(tab.id);
   }, hasMore = reactions.length < counters.allReactionsCounter;
-  return /* @__PURE__ */ createPortal(/* @__PURE__ */ jsxs(Modal, { id, ...restProps, onModalClose, size: "md", scrollable: !0, children: [
-    /* @__PURE__ */ jsx(Modal.Header, { onModalClose, children: t("audience.reaction.modal.header") }),
-    /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsx(Tabs, { items: tabs, defaultId: ALL_TAB_ID, onChange: handleTabChange }) }),
-    /* @__PURE__ */ jsxs(Modal.Footer, { children: [
-      hasMore && /* @__PURE__ */ jsx(Button, { color: "tertiary", onClick: loadNextPage, children: t("audience.reaction.modal.more") }),
-      /* @__PURE__ */ jsx(Button, { color: "primary", onClick: onModalClose, type: "button", variant: "filled", children: t("close") })
-    ] })
-  ] }), document.getElementById("portal"));
+  return (
+    // Using a fragment to ensure Storybook correctly interprets JSDoc comments: https://github.com/storybookjs/storybook/issues/27169
+    /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ createPortal(/* @__PURE__ */ jsxs(Modal, { id, ...restProps, onModalClose, size: "md", scrollable: !0, children: [
+      /* @__PURE__ */ jsx(Modal.Header, { onModalClose, children: t("audience.reaction.modal.header") }),
+      /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsx(Tabs, { items: tabs, defaultId: ALL_TAB_ID, onChange: handleTabChange }) }),
+      /* @__PURE__ */ jsxs(Modal.Footer, { children: [
+        hasMore && /* @__PURE__ */ jsx(Button, { color: "tertiary", onClick: loadNextPage, children: t("audience.reaction.modal.more") }),
+        /* @__PURE__ */ jsx(Button, { color: "primary", onClick: onModalClose, type: "button", variant: "filled", children: t("close") })
+      ] })
+    ] }), document.getElementById("portal")) })
+  );
 };
 ReactionModal.Card = ReactionModalCard;
 export {

package/dist/modules/audience/ReactionSummary.d.ts

@@ -1,6 +1,15 @@
 import { ReactionSummaryData } from '@edifice.io/client';
+/**
+ * Props for the ReactionSummary component.
+ */
 export interface ReactionSummaryProps {
+    /**
+     * An optional summary of reaction data.
+     */
     summary?: ReactionSummaryData;
+    /**
+     * An optional click handler function.
+     */
     onClick?: () => void;
 }
 declare const ReactionSummary: {

package/dist/modules/audience/ViewsCounter.d.ts

@@ -1,6 +1,16 @@
 export interface ViewsCounterProps {
+    /**
+     * The number of views to display.
+     *
+     */
     viewsCounter: number;
+    /**
+     * Optional click handler for the counter button.
+     */
     onClick?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Optional CSS class name to apply to the counter component.
+     */
     className?: string;
 }
 declare const ViewsCounter: {

package/dist/modules/audience/ViewsModal.d.ts

@@ -1,11 +1,23 @@
 import { ViewsDetails } from '@edifice.io/client';
+/**
+ * Props for the ViewsModal component.
+ */
 export interface ViewsModalProps {
+    /**
+     * Details of the views to be displayed in the modal.
+     */
     viewsDetails: ViewsDetails;
+    /**
+     * Boolean flag indicating whether the modal is open.
+     */
     isOpen: boolean;
+    /**
+     * Callback function to be called when the modal is closed.
+     */
     onModalClose: () => void;
 }
 declare const ViewsModal: {
-    ({ viewsDetails, isOpen, onModalClose, }: ViewsModalProps): import('react').ReactPortal;
+    ({ viewsDetails, isOpen, onModalClose, }: ViewsModalProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default ViewsModal;

package/dist/modules/audience/ViewsModal.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { StringUtils } from "@edifice.io/utilities";
 import { createPortal } from "react-dom";
 import { useTranslation } from "react-i18next";
@@ -16,25 +16,28 @@ const ViewsModal = ({
   const {
     t
   } = useTranslation(), hasUniqueViews = viewsDetails.uniqueViewsCounter !== void 0;
-  return /* @__PURE__ */ createPortal(/* @__PURE__ */ jsxs(Modal, { id: "ViewsModal", isOpen, onModalClose, children: [
-    /* @__PURE__ */ jsx(Modal.Header, { onModalClose, children: t("audience.views.title") }),
-    /* @__PURE__ */ jsxs(Modal.Body, { children: [
-      /* @__PURE__ */ jsxs("div", { className: "views-detail-line p-8 mb-12", children: [
-        /* @__PURE__ */ jsx("div", { className: "views-detail-icon rounded p-8", children: /* @__PURE__ */ jsx(SvgIconSee, {}) }),
-        /* @__PURE__ */ jsx("div", { className: "h3", children: StringUtils.toCounter(viewsDetails.viewsCounter) }),
-        /* @__PURE__ */ jsx("div", { children: t("audience.views.detail.viewsCounter") })
+  return (
+    // Using a fragment to ensure Storybook correctly interprets JSDoc comments: https://github.com/storybookjs/storybook/issues/27169
+    /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ createPortal(/* @__PURE__ */ jsxs(Modal, { id: "ViewsModal", isOpen, onModalClose, children: [
+      /* @__PURE__ */ jsx(Modal.Header, { onModalClose, children: t("audience.views.title") }),
+      /* @__PURE__ */ jsxs(Modal.Body, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "views-detail-line p-8 mb-12", children: [
+          /* @__PURE__ */ jsx("div", { className: "views-detail-icon rounded p-8", children: /* @__PURE__ */ jsx(SvgIconSee, {}) }),
+          /* @__PURE__ */ jsx("div", { className: "h3", children: StringUtils.toCounter(viewsDetails.viewsCounter) }),
+          /* @__PURE__ */ jsx("div", { children: t("audience.views.detail.viewsCounter") })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "views-detail-line p-8 mb-12", children: [
+          /* @__PURE__ */ jsx("div", { className: "views-detail-icon rounded p-8", children: /* @__PURE__ */ jsx(SvgIconUsers, {}) }),
+          hasUniqueViews ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "h3", children: StringUtils.toCounter(viewsDetails.uniqueViewsCounter) }),
+            /* @__PURE__ */ jsx("div", { children: t("audience.views.detail.uniqueViewsCounter") })
+          ] }) : /* @__PURE__ */ jsx("div", { children: t("audience.views.detail.noUniqueViews") })
+        ] }),
+        hasUniqueViews ? (_a = viewsDetails.uniqueViewsPerProfile) == null ? void 0 : _a.map((viewsByProfile) => /* @__PURE__ */ jsx(ViewsByProfileCard, { viewsByProfile }, viewsByProfile.profile)) : null
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "views-detail-line p-8 mb-12", children: [
-        /* @__PURE__ */ jsx("div", { className: "views-detail-icon rounded p-8", children: /* @__PURE__ */ jsx(SvgIconUsers, {}) }),
-        hasUniqueViews ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", { className: "h3", children: StringUtils.toCounter(viewsDetails.uniqueViewsCounter) }),
-          /* @__PURE__ */ jsx("div", { children: t("audience.views.detail.uniqueViewsCounter") })
-        ] }) : /* @__PURE__ */ jsx("div", { children: t("audience.views.detail.noUniqueViews") })
-      ] }),
-      hasUniqueViews ? (_a = viewsDetails.uniqueViewsPerProfile) == null ? void 0 : _a.map((viewsByProfile) => /* @__PURE__ */ jsx(ViewsByProfileCard, { viewsByProfile }, viewsByProfile.profile)) : null
-    ] }),
-    /* @__PURE__ */ jsx(Modal.Footer, { children: /* @__PURE__ */ jsx(Button, { color: "primary", onClick: onModalClose, type: "button", variant: "filled", children: t("audience.views.cancel") }) })
-  ] }), document.getElementById("portal"));
+      /* @__PURE__ */ jsx(Modal.Footer, { children: /* @__PURE__ */ jsx(Button, { color: "primary", onClick: onModalClose, type: "button", variant: "filled", children: t("audience.views.cancel") }) })
+    ] }), document.getElementById("portal")) })
+  );
 };
 export {
   ViewsModal as default