stream-chat-react 14.11.1 → 15.0.0-rc.1

package/dist/es/mp3-encoder.mjs

@@ -1,4 +1,4 @@
-import { n as toAudioBuffer, t as renderAudio } from "./audioProcessing.766ca76c.mjs";
+import { renderAudio, toAudioBuffer } from "./components/MediaRecorder/transcode/audioProcessing.mjs";
 //#region src/plugins/encoders/mp3.ts
 var ENCODING_BIT_RATE = 128;
 var COUNT_SAMPLES_PER_ENCODED_BLOCK = 1152;

package/dist/es/plugins/ChannelDetail/AvatarWithChannelDetail.mjs

@@ -0,0 +1,40 @@
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { ChannelAvatar } from "../../components/Avatar/ChannelAvatar.mjs";
+import { GlobalModal } from "../../components/Modal/GlobalModal.mjs";
+import { useChannel } from "../../context/useChannel.mjs";
+import { ChannelDetail } from "./ChannelDetail.mjs";
+import { useCallback, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/plugins/ChannelDetail/AvatarWithChannelDetail.tsx
+var avatarWithChannelDetailDialogRootProps = { className: "str-chat__channel-detail-modal" };
+var AvatarWithChannelDetail = ({ Avatar, ChannelDetail: ChannelDetail$1 = ChannelDetail, className, ...avatarProps }) => {
+	const { t } = useTranslationContext();
+	const channel = useChannel();
+	const { Avatar: ContextAvatar, Modal = GlobalModal } = useComponentContext();
+	const [isModalOpen, setIsModalOpen] = useState(false);
+	const openModal = useCallback(() => setIsModalOpen(true), []);
+	const closeModal = useCallback(() => setIsModalOpen(false), []);
+	const AvatarComponent = Avatar ?? (ContextAvatar === AvatarWithChannelDetail ? void 0 : ContextAvatar) ?? ChannelAvatar;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
+		"aria-label": t("channelDetail.avatarChannelDetail.openChannelDetails.ariaLabel", "Open channel details"),
+		className: "str-chat__avatar-with-channel-detail-button",
+		onClick: openModal,
+		type: "button",
+		children: /* @__PURE__ */ jsx(AvatarComponent, {
+			...avatarProps,
+			className: clsx("str-chat__avatar-with-channel-detail-button__avatar", className)
+		})
+	}), /* @__PURE__ */ jsx(Modal, {
+		"aria-label": t("channelDetail.avatarChannelDetail.channelDetails.ariaLabel", "Channel details"),
+		dialogRootProps: avatarWithChannelDetailDialogRootProps,
+		onClose: closeModal,
+		open: isModalOpen,
+		children: /* @__PURE__ */ jsx(ChannelDetail$1, { channel })
+	})] });
+};
+//#endregion
+export { AvatarWithChannelDetail };
+
+//# sourceMappingURL=AvatarWithChannelDetail.mjs.map

package/dist/es/plugins/ChannelDetail/AvatarWithChannelDetail.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarWithChannelDetail.mjs","names":[],"sources":["../../../../src/plugins/ChannelDetail/AvatarWithChannelDetail.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { useCallback, useState } from 'react';\n\nimport { useChannel, useComponentContext, useTranslationContext } from '../../context';\nimport {\n  type ChannelAvatarProps,\n  ChannelAvatar as DefaultChannelAvatar,\n} from '../../components/Avatar/index';\nimport {\n  type ChannelDetailProps,\n  ChannelDetail as DefaultChannelDetail,\n} from './ChannelDetail';\nimport { GlobalModal } from '../../components/Modal';\n\nexport type AvatarWithChannelDetailProps = ChannelAvatarProps & {\n  Avatar?: React.ComponentType<ChannelAvatarProps>;\n  ChannelDetail?: React.ComponentType<ChannelDetailProps>;\n};\n\nconst avatarWithChannelDetailDialogRootProps = {\n  className: 'str-chat__channel-detail-modal',\n};\n\nexport const AvatarWithChannelDetail = ({\n  Avatar,\n  ChannelDetail = DefaultChannelDetail,\n  className,\n  ...avatarProps\n}: AvatarWithChannelDetailProps) => {\n  const { t } = useTranslationContext();\n  const channel = useChannel();\n  const { Avatar: ContextAvatar, Modal = GlobalModal } = useComponentContext();\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const openModal = useCallback(() => setIsModalOpen(true), []);\n  const closeModal = useCallback(() => setIsModalOpen(false), []);\n\n  const AvatarComponent =\n    Avatar ??\n    (ContextAvatar === AvatarWithChannelDetail ? undefined : ContextAvatar) ??\n    DefaultChannelAvatar;\n\n  return (\n    <>\n      <button\n        aria-label={t(\n          'channelDetail.avatarChannelDetail.openChannelDetails.ariaLabel',\n          'Open channel details',\n        )}\n        className='str-chat__avatar-with-channel-detail-button'\n        onClick={openModal}\n        type='button'\n      >\n        <AvatarComponent\n          {...avatarProps}\n          className={clsx(\n            'str-chat__avatar-with-channel-detail-button__avatar',\n            className,\n          )}\n        />\n      </button>\n      <Modal\n        aria-label={t(\n          'channelDetail.avatarChannelDetail.channelDetails.ariaLabel',\n          'Channel details',\n        )}\n        dialogRootProps={avatarWithChannelDetailDialogRootProps}\n        onClose={closeModal}\n        open={isModalOpen}\n      >\n        <ChannelDetail channel={channel} />\n      </Modal>\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;AAmBA,IAAM,yCAAyC,EAC7C,WAAW,iCACb;AAEA,IAAa,2BAA2B,EACtC,QACA,eAAA,kBAAgB,eAChB,WACA,GAAG,kBAC+B;CAClC,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,QAAQ,eAAe,QAAQ,gBAAgB,oBAAoB;CAC3E,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CAEpD,MAAM,YAAY,kBAAkB,eAAe,IAAI,GAAG,CAAC,CAAC;CAC5D,MAAM,aAAa,kBAAkB,eAAe,KAAK,GAAG,CAAC,CAAC;CAE9D,MAAM,kBACJ,WACC,kBAAkB,0BAA0B,KAAA,IAAY,kBACzD;CAEF,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,UAAD;EACE,cAAY,EACV,kEACA,sBACF;EACA,WAAU;EACV,SAAS;EACT,MAAK;YAEL,oBAAC,iBAAD;GACE,GAAI;GACJ,WAAW,KACT,uDACA,SACF;EACD,CAAA;CACK,CAAA,GACR,oBAAC,OAAD;EACE,cAAY,EACV,8DACA,iBACF;EACA,iBAAiB;EACjB,SAAS;EACT,MAAM;YAEN,oBAAC,iBAAD,EAAwB,QAAU,CAAA;CAC7B,CAAA,CACP,EAAA,CAAA;AAEN"}

package/dist/es/plugins/ChannelDetail/ChannelDetail.mjs

@@ -0,0 +1,105 @@
+import { Prompt } from "../../components/Dialog/components/Prompt.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { SECTION_NAVIGATOR_LAYOUT, SectionNavigator } from "./SectionNavigator/SectionNavigator.mjs";
+import { ChannelDetailNavButton } from "./ChannelDetailNavButton.mjs";
+import { ChannelDetailProvider } from "./ChannelDetailContext.mjs";
+import { ChannelFilesView } from "./Views/ChannelFilesView/ChannelFilesView.mjs";
+import { ChannelManagementView } from "./Views/ChannelManagementView/ChannelManagementView.mjs";
+import { ChannelMediaView } from "./Views/ChannelMediaView/ChannelMediaView.mjs";
+import { ChannelMembersView } from "./Views/ChannelMembersView/ChannelMembersView.mjs";
+import { PinnedMessagesView } from "./Views/PinnedMessagesView/PinnedMessagesView.mjs";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/plugins/ChannelDetail/ChannelDetail.tsx
+var ChannelManagementNavButtonIcon = () => {
+	const { IconInfo } = useComponentContextIcons();
+	return /* @__PURE__ */ jsx(IconInfo, { className: "str-chat__channel-detail__action-icon" });
+};
+var ChannelMembersNavButtonIcon = () => {
+	const { IconUser } = useComponentContextIcons();
+	return /* @__PURE__ */ jsx(IconUser, { className: "str-chat__channel-detail__action-icon" });
+};
+var PinnedMessagesNavButtonIcon = () => {
+	const { IconPin } = useComponentContextIcons();
+	return /* @__PURE__ */ jsx(IconPin, { className: "str-chat__channel-detail__action-icon" });
+};
+var ChannelMediaNavButtonIcon = () => {
+	const { IconImage } = useComponentContextIcons();
+	return /* @__PURE__ */ jsx(IconImage, { className: "str-chat__channel-detail__action-icon" });
+};
+var ChannelFilesNavButtonIcon = () => {
+	const { IconFolder } = useComponentContextIcons();
+	return /* @__PURE__ */ jsx(IconFolder, { className: "str-chat__channel-detail__action-icon" });
+};
+var ChannelManagementNavButton = (props) => /* @__PURE__ */ jsx(ChannelDetailNavButton, {
+	...props,
+	LeadingIcon: ChannelManagementNavButtonIcon,
+	title: "Channel info"
+});
+var ChannelMembersNavButton = (props) => /* @__PURE__ */ jsx(ChannelDetailNavButton, {
+	...props,
+	LeadingIcon: ChannelMembersNavButtonIcon,
+	title: "Members"
+});
+var PinnedMessagesNavButton = (props) => /* @__PURE__ */ jsx(ChannelDetailNavButton, {
+	...props,
+	LeadingIcon: PinnedMessagesNavButtonIcon,
+	title: "Pinned messages"
+});
+var ChannelMediaNavButton = (props) => /* @__PURE__ */ jsx(ChannelDetailNavButton, {
+	...props,
+	LeadingIcon: ChannelMediaNavButtonIcon,
+	title: "Photos & videos"
+});
+var ChannelFilesNavButton = (props) => /* @__PURE__ */ jsx(ChannelDetailNavButton, {
+	...props,
+	LeadingIcon: ChannelFilesNavButtonIcon,
+	title: "Files"
+});
+var defaultChannelDetailSections = [
+	{
+		id: "channel-info",
+		NavButton: ChannelManagementNavButton,
+		SectionContent: ChannelManagementView
+	},
+	{
+		id: "channel-members",
+		NavButton: ChannelMembersNavButton,
+		SectionContent: ChannelMembersView
+	},
+	{
+		id: "pinned-messages",
+		NavButton: PinnedMessagesNavButton,
+		SectionContent: PinnedMessagesView
+	},
+	{
+		id: "channel-media",
+		NavButton: ChannelMediaNavButton,
+		SectionContent: ChannelMediaView
+	},
+	{
+		id: "channel-files",
+		NavButton: ChannelFilesNavButton,
+		SectionContent: ChannelFilesView
+	}
+];
+var ChannelDetail = ({ channel, className, defaultLayout = SECTION_NAVIGATOR_LAYOUT.tabs, sections = defaultChannelDetailSections, ...props }) => {
+	const [layout, setLayout] = useState(defaultLayout);
+	return /* @__PURE__ */ jsx(ChannelDetailProvider, {
+		channel,
+		children: /* @__PURE__ */ jsx(Prompt.Root, {
+			className: clsx("str-chat__channel-detail", { "str-chat__channel-detail--inline": layout === SECTION_NAVIGATOR_LAYOUT.inline }, className),
+			children: /* @__PURE__ */ jsx(SectionNavigator, {
+				...props,
+				defaultLayout,
+				onLayoutChange: setLayout,
+				sections
+			})
+		})
+	});
+};
+//#endregion
+export { ChannelDetail, ChannelFilesNavButton, ChannelManagementNavButton, ChannelMediaNavButton, ChannelMembersNavButton, PinnedMessagesNavButton, defaultChannelDetailSections };
+
+//# sourceMappingURL=ChannelDetail.mjs.map

package/dist/es/plugins/ChannelDetail/ChannelDetail.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelDetail.mjs","names":[],"sources":["../../../../src/plugins/ChannelDetail/ChannelDetail.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { useState } from 'react';\nimport type { Channel } from 'stream-chat';\n\nimport {\n  SECTION_NAVIGATOR_LAYOUT,\n  SectionNavigator,\n  type SectionNavigatorLayout,\n  type SectionNavigatorNavButtonProps,\n  type SectionNavigatorProps,\n  type SectionNavigatorSection,\n} from './SectionNavigator';\nimport { ChannelDetailNavButton } from './ChannelDetailNavButton';\nimport { ChannelDetailProvider } from './ChannelDetailContext';\nimport { ChannelFilesView } from './Views/ChannelFilesView';\nimport { ChannelManagementView } from './Views/ChannelManagementView';\nimport { ChannelMediaView } from './Views/ChannelMediaView';\nimport { ChannelMembersView } from './Views/ChannelMembersView';\nimport { PinnedMessagesView } from './Views/PinnedMessagesView';\nimport { Prompt } from '../../components/Dialog';\nimport { useComponentContextIcons } from '../../context';\n\nconst ChannelManagementNavButtonIcon = () => {\n  const { IconInfo } = useComponentContextIcons();\n\n  return <IconInfo className='str-chat__channel-detail__action-icon' />;\n};\n\nconst ChannelMembersNavButtonIcon = () => {\n  const { IconUser } = useComponentContextIcons();\n\n  return <IconUser className='str-chat__channel-detail__action-icon' />;\n};\n\nconst PinnedMessagesNavButtonIcon = () => {\n  const { IconPin } = useComponentContextIcons();\n\n  return <IconPin className='str-chat__channel-detail__action-icon' />;\n};\n\nconst ChannelMediaNavButtonIcon = () => {\n  const { IconImage } = useComponentContextIcons();\n\n  return <IconImage className='str-chat__channel-detail__action-icon' />;\n};\n\nconst ChannelFilesNavButtonIcon = () => {\n  const { IconFolder } = useComponentContextIcons();\n\n  return <IconFolder className='str-chat__channel-detail__action-icon' />;\n};\n\nexport const ChannelManagementNavButton = (props: SectionNavigatorNavButtonProps) => (\n  <ChannelDetailNavButton\n    {...props}\n    LeadingIcon={ChannelManagementNavButtonIcon}\n    title='Channel info'\n  />\n);\n\nexport const ChannelMembersNavButton = (props: SectionNavigatorNavButtonProps) => (\n  <ChannelDetailNavButton\n    {...props}\n    LeadingIcon={ChannelMembersNavButtonIcon}\n    title='Members'\n  />\n);\n\nexport const PinnedMessagesNavButton = (props: SectionNavigatorNavButtonProps) => (\n  <ChannelDetailNavButton\n    {...props}\n    LeadingIcon={PinnedMessagesNavButtonIcon}\n    title='Pinned messages'\n  />\n);\n\nexport const ChannelMediaNavButton = (props: SectionNavigatorNavButtonProps) => (\n  <ChannelDetailNavButton\n    {...props}\n    LeadingIcon={ChannelMediaNavButtonIcon}\n    title='Photos & videos'\n  />\n);\n\nexport const ChannelFilesNavButton = (props: SectionNavigatorNavButtonProps) => (\n  <ChannelDetailNavButton\n    {...props}\n    LeadingIcon={ChannelFilesNavButtonIcon}\n    title='Files'\n  />\n);\n\nexport const defaultChannelDetailSections: SectionNavigatorSection[] = [\n  {\n    id: 'channel-info',\n    NavButton: ChannelManagementNavButton,\n    SectionContent: ChannelManagementView,\n  },\n  {\n    id: 'channel-members',\n    NavButton: ChannelMembersNavButton,\n    SectionContent: ChannelMembersView,\n  },\n  {\n    id: 'pinned-messages',\n    NavButton: PinnedMessagesNavButton,\n    SectionContent: PinnedMessagesView,\n  },\n  {\n    id: 'channel-media',\n    NavButton: ChannelMediaNavButton,\n    SectionContent: ChannelMediaView,\n  },\n  {\n    id: 'channel-files',\n    NavButton: ChannelFilesNavButton,\n    SectionContent: ChannelFilesView,\n  },\n];\n\nexport type ChannelDetailProps = Omit<SectionNavigatorProps, 'sections'> & {\n  channel: Channel;\n  sections?: SectionNavigatorSection[];\n};\n\nexport const ChannelDetail = ({\n  channel,\n  className,\n  defaultLayout = SECTION_NAVIGATOR_LAYOUT.tabs,\n  sections = defaultChannelDetailSections,\n  ...props\n}: ChannelDetailProps) => {\n  const [layout, setLayout] = useState<SectionNavigatorLayout>(defaultLayout);\n\n  return (\n    <ChannelDetailProvider channel={channel}>\n      <Prompt.Root\n        className={clsx(\n          'str-chat__channel-detail',\n          {\n            'str-chat__channel-detail--inline':\n              layout === SECTION_NAVIGATOR_LAYOUT.inline,\n          },\n          className,\n        )}\n      >\n        <SectionNavigator\n          {...props}\n          defaultLayout={defaultLayout}\n          onLayoutChange={setLayout}\n          sections={sections}\n        />\n      </Prompt.Root>\n    </ChannelDetailProvider>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AAsBA,IAAM,uCAAuC;CAC3C,MAAM,EAAE,aAAa,yBAAyB;CAE9C,OAAO,oBAAC,UAAD,EAAU,WAAU,wCAAyC,CAAA;AACtE;AAEA,IAAM,oCAAoC;CACxC,MAAM,EAAE,aAAa,yBAAyB;CAE9C,OAAO,oBAAC,UAAD,EAAU,WAAU,wCAAyC,CAAA;AACtE;AAEA,IAAM,oCAAoC;CACxC,MAAM,EAAE,YAAY,yBAAyB;CAE7C,OAAO,oBAAC,SAAD,EAAS,WAAU,wCAAyC,CAAA;AACrE;AAEA,IAAM,kCAAkC;CACtC,MAAM,EAAE,cAAc,yBAAyB;CAE/C,OAAO,oBAAC,WAAD,EAAW,WAAU,wCAAyC,CAAA;AACvE;AAEA,IAAM,kCAAkC;CACtC,MAAM,EAAE,eAAe,yBAAyB;CAEhD,OAAO,oBAAC,YAAD,EAAY,WAAU,wCAAyC,CAAA;AACxE;AAEA,IAAa,8BAA8B,UACzC,oBAAC,wBAAD;CACE,GAAI;CACJ,aAAa;CACb,OAAM;AACP,CAAA;AAGH,IAAa,2BAA2B,UACtC,oBAAC,wBAAD;CACE,GAAI;CACJ,aAAa;CACb,OAAM;AACP,CAAA;AAGH,IAAa,2BAA2B,UACtC,oBAAC,wBAAD;CACE,GAAI;CACJ,aAAa;CACb,OAAM;AACP,CAAA;AAGH,IAAa,yBAAyB,UACpC,oBAAC,wBAAD;CACE,GAAI;CACJ,aAAa;CACb,OAAM;AACP,CAAA;AAGH,IAAa,yBAAyB,UACpC,oBAAC,wBAAD;CACE,GAAI;CACJ,aAAa;CACb,OAAM;AACP,CAAA;AAGH,IAAa,+BAA0D;CACrE;EACE,IAAI;EACJ,WAAW;EACX,gBAAgB;CAClB;CACA;EACE,IAAI;EACJ,WAAW;EACX,gBAAgB;CAClB;CACA;EACE,IAAI;EACJ,WAAW;EACX,gBAAgB;CAClB;CACA;EACE,IAAI;EACJ,WAAW;EACX,gBAAgB;CAClB;CACA;EACE,IAAI;EACJ,WAAW;EACX,gBAAgB;CAClB;AACF;AAOA,IAAa,iBAAiB,EAC5B,SACA,WACA,gBAAgB,yBAAyB,MACzC,WAAW,8BACX,GAAG,YACqB;CACxB,MAAM,CAAC,QAAQ,aAAa,SAAiC,aAAa;CAE1E,OACE,oBAAC,uBAAD;EAAgC;YAC9B,oBAAC,OAAO,MAAR;GACE,WAAW,KACT,4BACA,EACE,oCACE,WAAW,yBAAyB,OACxC,GACA,SACF;aAEA,oBAAC,kBAAD;IACE,GAAI;IACW;IACf,gBAAgB;IACN;GACX,CAAA;EACU,CAAA;CACQ,CAAA;AAE3B"}

package/dist/es/plugins/ChannelDetail/ChannelDetailContext.mjs

@@ -0,0 +1,20 @@
+import React, { useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/plugins/ChannelDetail/ChannelDetailContext.tsx
+var ChannelDetailContext = React.createContext(void 0);
+var ChannelDetailProvider = ({ channel, children }) => {
+	const value = useMemo(() => ({ channel }), [channel]);
+	return /* @__PURE__ */ jsx(ChannelDetailContext.Provider, {
+		value,
+		children
+	});
+};
+var useChannelDetailContext = () => {
+	const contextValue = useContext(ChannelDetailContext);
+	if (!contextValue) throw new Error("The useChannelDetailContext hook was called outside of ChannelDetailProvider.");
+	return contextValue;
+};
+//#endregion
+export { ChannelDetailProvider, useChannelDetailContext };
+
+//# sourceMappingURL=ChannelDetailContext.mjs.map

package/dist/es/plugins/ChannelDetail/ChannelDetailContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelDetailContext.mjs","names":[],"sources":["../../../../src/plugins/ChannelDetail/ChannelDetailContext.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport React, { useContext, useMemo } from 'react';\nimport type { Channel } from 'stream-chat';\n\nexport type ChannelDetailContextValue = {\n  channel: Channel;\n};\n\nconst ChannelDetailContext = React.createContext<ChannelDetailContextValue | undefined>(\n  undefined,\n);\n\nexport type ChannelDetailProviderProps = PropsWithChildren<{\n  channel: Channel;\n}>;\n\nexport const ChannelDetailProvider = ({\n  channel,\n  children,\n}: ChannelDetailProviderProps) => {\n  const value = useMemo(() => ({ channel }), [channel]);\n\n  return (\n    <ChannelDetailContext.Provider value={value}>\n      {children}\n    </ChannelDetailContext.Provider>\n  );\n};\n\nexport const useChannelDetailContext = () => {\n  const contextValue = useContext(ChannelDetailContext);\n\n  if (!contextValue) {\n    throw new Error(\n      'The useChannelDetailContext hook was called outside of ChannelDetailProvider.',\n    );\n  }\n\n  return contextValue;\n};\n"],"mappings":";;;AAQA,IAAM,uBAAuB,MAAM,cACjC,KAAA,CACF;AAMA,IAAa,yBAAyB,EACpC,SACA,eACgC;CAChC,MAAM,QAAQ,eAAe,EAAE,QAAQ,IAAI,CAAC,OAAO,CAAC;CAEpD,OACE,oBAAC,qBAAqB,UAAtB;EAAsC;EACnC;CAC4B,CAAA;AAEnC;AAEA,IAAa,gCAAgC;CAC3C,MAAM,eAAe,WAAW,oBAAoB;CAEpD,IAAI,CAAC,cACH,MAAM,IAAI,MACR,+EACF;CAGF,OAAO;AACT"}

package/dist/es/plugins/ChannelDetail/ChannelDetailEmptyList.mjs

@@ -0,0 +1,14 @@
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/plugins/ChannelDetail/ChannelDetailEmptyList.tsx
+var ChannelDetailEmptyList = ({ children }) => {
+	const { IconSearch } = useComponentContextIcons();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__channel-detail__channel-members-view__empty-state",
+		children: [/* @__PURE__ */ jsx(IconSearch, {}), /* @__PURE__ */ jsx("div", { children })]
+	});
+};
+//#endregion
+export { ChannelDetailEmptyList };
+
+//# sourceMappingURL=ChannelDetailEmptyList.mjs.map

package/dist/es/plugins/ChannelDetail/ChannelDetailEmptyList.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelDetailEmptyList.mjs","names":[],"sources":["../../../../src/plugins/ChannelDetail/ChannelDetailEmptyList.tsx"],"sourcesContent":["import { useComponentContextIcons } from '../../context';\nimport type { PropsWithChildrenOnly } from '../../types/types';\n\nexport const ChannelDetailEmptyList = ({ children }: PropsWithChildrenOnly) => {\n  const { IconSearch } = useComponentContextIcons();\n\n  return (\n    <div className='str-chat__channel-detail__channel-members-view__empty-state'>\n      <IconSearch />\n      <div>{children}</div>\n    </div>\n  );\n};\n"],"mappings":";;;AAGA,IAAa,0BAA0B,EAAE,eAAsC;CAC7E,MAAM,EAAE,eAAe,yBAAyB;CAEhD,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,YAAD,CAAa,CAAA,GACb,oBAAC,OAAD,EAAM,SAAc,CAAA,CACjB;;AAET"}

package/dist/es/plugins/ChannelDetail/ChannelDetailListLoadingIndicator.mjs

@@ -0,0 +1,20 @@
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { LoadingIndicator } from "../../components/Loading/LoadingIndicator.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/plugins/ChannelDetail/ChannelDetailListLoadingIndicator.tsx
+var searchSourceFooterStateSelector = (state) => ({
+	hasNextPage: state.hasNext,
+	isLoading: state.isLoading
+});
+var ChannelDetailListLoadingIndicator = ({ searchSource }) => {
+	const { hasNextPage, isLoading } = useStateStore(searchSource.state, searchSourceFooterStateSelector);
+	if (!hasNextPage || !isLoading) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "str-chat__loading-indicator-placeholder",
+		children: isLoading && /* @__PURE__ */ jsx(LoadingIndicator, {})
+	});
+};
+//#endregion
+export { ChannelDetailListLoadingIndicator };
+
+//# sourceMappingURL=ChannelDetailListLoadingIndicator.mjs.map

package/dist/es/plugins/ChannelDetail/ChannelDetailListLoadingIndicator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelDetailListLoadingIndicator.mjs","names":[],"sources":["../../../../src/plugins/ChannelDetail/ChannelDetailListLoadingIndicator.tsx"],"sourcesContent":["import type { SearchSource, SearchSourceState } from 'stream-chat';\nimport { useStateStore } from '../../store';\nimport { LoadingIndicator } from '../../components/Loading';\n\nconst searchSourceFooterStateSelector = (state: SearchSourceState) => ({\n  hasNextPage: state.hasNext,\n  isLoading: state.isLoading,\n});\n\nexport type ChannelMembersViewListFooterProps<T> = {\n  searchSource: SearchSource<T>;\n};\n\nexport const ChannelDetailListLoadingIndicator = <T,>({\n  searchSource,\n}: ChannelMembersViewListFooterProps<T>) => {\n  const { hasNextPage, isLoading } = useStateStore(\n    searchSource.state,\n    searchSourceFooterStateSelector,\n  );\n\n  if (!hasNextPage || !isLoading) return null;\n\n  return (\n    <div className='str-chat__loading-indicator-placeholder'>\n      {isLoading && <LoadingIndicator />}\n    </div>\n  );\n};\n"],"mappings":";;;;AAIA,IAAM,mCAAmC,WAA8B;CACrE,aAAa,MAAM;CACnB,WAAW,MAAM;AACnB;AAMA,IAAa,qCAAyC,EACpD,mBAC0C;CAC1C,MAAM,EAAE,aAAa,cAAc,cACjC,aAAa,OACb,+BACF;CAEA,IAAI,CAAC,eAAe,CAAC,WAAW,OAAO;CAEvC,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,aAAa,oBAAC,kBAAD,CAAmB,CAAA;CAC9B,CAAA;AAET"}

package/dist/es/plugins/ChannelDetail/ChannelDetailNavButton.mjs

@@ -0,0 +1,26 @@
+import { ListItemLayout } from "../../components/ListItemLayout/ListItemLayout.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/plugins/ChannelDetail/ChannelDetailNavButton.tsx
+/**
+* Underlying button shared by all ChannelDetail section nav buttons. Renders a
+* `ListItemLayout` as a `<button>` and wires the SectionNavigator selection
+* state into `aria-current` and the click handler.
+*/
+var ChannelDetailNavButton = ({ className, LeadingIcon, sectionId: _sectionId, select, selected, title, ...props }) => /* @__PURE__ */ jsx(ListItemLayout, {
+	LeadingIcon,
+	RootElement: "button",
+	rootProps: {
+		...props,
+		"aria-current": selected ? "page" : void 0,
+		className: clsx("str-chat__channel-detail__nav-button", className),
+		onClick: select
+	},
+	selected,
+	title
+});
+//#endregion
+export { ChannelDetailNavButton };
+
+//# sourceMappingURL=ChannelDetailNavButton.mjs.map

package/dist/es/plugins/ChannelDetail/ChannelDetailNavButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelDetailNavButton.mjs","names":[],"sources":["../../../../src/plugins/ChannelDetail/ChannelDetailNavButton.tsx"],"sourcesContent":["import React, { type ComponentType } from 'react';\n\nimport type { SectionNavigatorNavButtonProps } from './SectionNavigator';\nimport { ListItemLayout } from '../../components/ListItemLayout';\nimport clsx from 'clsx';\n\nexport type ChannelDetailNavButtonProps = SectionNavigatorNavButtonProps & {\n  /** Icon rendered as the leading element of the nav button. */\n  LeadingIcon: ComponentType;\n  /** Label displayed for the section. */\n  title: string;\n};\n\n/**\n * Underlying button shared by all ChannelDetail section nav buttons. Renders a\n * `ListItemLayout` as a `<button>` and wires the SectionNavigator selection\n * state into `aria-current` and the click handler.\n */\nexport const ChannelDetailNavButton = ({\n  className,\n  LeadingIcon,\n  // Dropped so it is not forwarded onto the DOM <button> via `...props`.\n  sectionId: _sectionId, // eslint-disable-line @typescript-eslint/no-unused-vars\n  select,\n  selected,\n  title,\n  ...props\n}: ChannelDetailNavButtonProps) => (\n  <ListItemLayout\n    LeadingIcon={LeadingIcon}\n    RootElement='button'\n    rootProps={{\n      ...props,\n      'aria-current': selected ? ('page' as const) : undefined,\n      className: clsx('str-chat__channel-detail__nav-button', className),\n      onClick: select,\n    }}\n    selected={selected}\n    title={title}\n  />\n);\n"],"mappings":";;;;;;;;;;AAkBA,IAAa,0BAA0B,EACrC,WACA,aAEA,WAAW,YACX,QACA,UACA,OACA,GAAG,YAEH,oBAAC,gBAAD;CACe;CACb,aAAY;CACZ,WAAW;EACT,GAAG;EACH,gBAAgB,WAAY,SAAmB,KAAA;EAC/C,WAAW,KAAK,wCAAwC,SAAS;EACjE,SAAS;CACX;CACU;CACH;AACR,CAAA"}

package/dist/es/plugins/ChannelDetail/ChannelDetailSearchInput.mjs

@@ -0,0 +1,35 @@
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { TextInput } from "../../components/Form/TextInput.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import React, { useCallback, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/plugins/ChannelDetail/ChannelDetailSearchInput.tsx
+var ChannelDetailSearchInput = React.memo(({ autoFocus, onSearchChange, resetKey }) => {
+	const { IconSearch } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	const [searchInput, setSearchInput] = useState("");
+	useEffect(() => {
+		setSearchInput("");
+	}, [resetKey]);
+	const handleSearchChange = useCallback((event) => {
+		const { value } = event.target;
+		setSearchInput(value);
+		onSearchChange(value);
+	}, [onSearchChange]);
+	return /* @__PURE__ */ jsx(TextInput, {
+		"aria-label": t("common.search.ariaLabel", "Search"),
+		autoComplete: "off",
+		autoFocus,
+		className: "str-chat__channel-detail__search-input",
+		leading: /* @__PURE__ */ jsx(IconSearch, {}),
+		onChange: handleSearchChange,
+		placeholder: t("common.search.ariaLabel", "Search"),
+		type: "search",
+		value: searchInput
+	});
+});
+ChannelDetailSearchInput.displayName = "ChannelDetailSearchInput";
+//#endregion
+export { ChannelDetailSearchInput };
+
+//# sourceMappingURL=ChannelDetailSearchInput.mjs.map

package/dist/es/plugins/ChannelDetail/ChannelDetailSearchInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelDetailSearchInput.mjs","names":[],"sources":["../../../../src/plugins/ChannelDetail/ChannelDetailSearchInput.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\n\nimport { useComponentContextIcons, useTranslationContext } from '../../context';\nimport { TextInput } from '../../components/Form';\n\nexport type ChannelDetailSearchInputProps = {\n  autoFocus?: boolean;\n  onSearchChange: (query: string) => void;\n  resetKey?: number;\n};\n\nexport const ChannelDetailSearchInput = React.memo(\n  ({ autoFocus, onSearchChange, resetKey }: ChannelDetailSearchInputProps) => {\n    const { IconSearch } = useComponentContextIcons();\n    const { t } = useTranslationContext();\n    const [searchInput, setSearchInput] = useState('');\n\n    useEffect(() => {\n      setSearchInput('');\n    }, [resetKey]);\n\n    const handleSearchChange = useCallback(\n      (event: React.ChangeEvent<HTMLInputElement>) => {\n        const { value } = event.target;\n        setSearchInput(value);\n        onSearchChange(value);\n      },\n      [onSearchChange],\n    );\n\n    return (\n      <TextInput\n        aria-label={t('common.search.ariaLabel', 'Search')}\n        autoComplete='off'\n        autoFocus={autoFocus}\n        className='str-chat__channel-detail__search-input'\n        leading={<IconSearch />}\n        onChange={handleSearchChange}\n        placeholder={t('common.search.ariaLabel', 'Search')}\n        type='search'\n        value={searchInput}\n      />\n    );\n  },\n);\n\nChannelDetailSearchInput.displayName = 'ChannelDetailSearchInput';\n"],"mappings":";;;;;;AAWA,IAAa,2BAA2B,MAAM,MAC3C,EAAE,WAAW,gBAAgB,eAA8C;CAC1E,MAAM,EAAE,eAAe,yBAAyB;CAChD,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,CAAC,aAAa,kBAAkB,SAAS,EAAE;CAEjD,gBAAgB;EACd,eAAe,EAAE;CACnB,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,qBAAqB,aACxB,UAA+C;EAC9C,MAAM,EAAE,UAAU,MAAM;EACxB,eAAe,KAAK;EACpB,eAAe,KAAK;CACtB,GACA,CAAC,cAAc,CACjB;CAEA,OACE,oBAAC,WAAD;EACE,cAAY,EAAE,2BAA2B,QAAQ;EACjD,cAAa;EACF;EACX,WAAU;EACV,SAAS,oBAAC,YAAD,CAAa,CAAA;EACtB,UAAU;EACV,aAAa,EAAE,2BAA2B,QAAQ;EAClD,MAAK;EACL,OAAO;CACR,CAAA;AAEL,CACF;AAEA,yBAAyB,cAAc"}

package/dist/es/plugins/ChannelDetail/SectionNavigator/SectionNavigator.mjs

@@ -0,0 +1,164 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/plugins/ChannelDetail/SectionNavigator/SectionNavigator.tsx
+var SECTION_NAVIGATOR_LAYOUT = {
+	inline: "inline",
+	tabs: "tabs"
+};
+var DEFAULT_TABS_LAYOUT_MIN_WIDTH = 640;
+var defaultCreateLayoutObserver = ({ element, setLayout, tabsLayoutMinWidth }) => {
+	if (typeof ResizeObserver === "undefined") return;
+	const observedElement = element.parentElement ?? element;
+	const updateLayout = (width) => {
+		if (width <= 0) return;
+		setLayout(width < tabsLayoutMinWidth ? SECTION_NAVIGATOR_LAYOUT.inline : SECTION_NAVIGATOR_LAYOUT.tabs);
+	};
+	const observer = new ResizeObserver(([entry]) => {
+		updateLayout(entry.contentRect.width);
+	});
+	updateLayout(observedElement.getBoundingClientRect().width);
+	observer.observe(observedElement);
+	return () => observer.disconnect();
+};
+var SectionNavigatorContext = createContext({
+	closeNavigation: () => void 0,
+	history: [],
+	historyPop: () => void 0,
+	historyPush: () => void 0,
+	isNavigationOpen: false,
+	layout: SECTION_NAVIGATOR_LAYOUT.tabs,
+	openNavigation: () => void 0
+});
+var useSectionNavigatorContext = () => useContext(SectionNavigatorContext);
+var getCurrentRoute = (history) => history[history.length - 1];
+var SectionNavigator = ({ className, createLayoutObserver = defaultCreateLayoutObserver, defaultLayout = SECTION_NAVIGATOR_LAYOUT.tabs, initialHistory, layout: controlledLayout, onLayoutChange, sections, tabsLayoutMinWidth = DEFAULT_TABS_LAYOUT_MIN_WIDTH, ...props }) => {
+	const rootRef = useRef(null);
+	const [internalLayout, setInternalLayout] = useState(defaultLayout);
+	const [history, setHistory] = useState(() => initialHistory ?? (sections[0] ? [{ id: sections[0].id }] : []));
+	const [isNavigationOpen, setIsNavigationOpen] = useState(false);
+	const layout = controlledLayout ?? internalLayout;
+	const currentRoute = getCurrentRoute(history);
+	const currentSection = sections.find((section) => section.id === currentRoute?.id);
+	const activeSection = currentSection ?? sections[0];
+	const isInlineLayout = layout === SECTION_NAVIGATOR_LAYOUT.inline;
+	const showDockedNavigation = !isInlineLayout || !currentSection;
+	const openNavigation = useCallback(() => setIsNavigationOpen(true), []);
+	const closeNavigation = useCallback(() => setIsNavigationOpen(false), []);
+	const historyPush = useCallback((route) => {
+		setHistory((history) => {
+			if (getCurrentRoute(history)?.id === route.id) return history;
+			if (layout === SECTION_NAVIGATOR_LAYOUT.tabs) return [route];
+			return [...history, route];
+		});
+	}, [layout]);
+	const historyPop = useCallback(() => {
+		setHistory((history) => history.length > 1 ? history.slice(0, -1) : history);
+	}, []);
+	useEffect(() => {
+		if (!isInlineLayout) setIsNavigationOpen(false);
+	}, [isInlineLayout]);
+	useEffect(() => {
+		if (!isNavigationOpen) return;
+		const handleKeyDown = (event) => {
+			if (event.key === "Escape") closeNavigation();
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [closeNavigation, isNavigationOpen]);
+	useEffect(() => {
+		onLayoutChange?.(layout);
+	}, [layout, onLayoutChange]);
+	useEffect(() => {
+		if (controlledLayout) return;
+		if (!rootRef.current) return;
+		return createLayoutObserver({
+			element: rootRef.current,
+			setLayout: setInternalLayout,
+			tabsLayoutMinWidth
+		});
+	}, [
+		controlledLayout,
+		createLayoutObserver,
+		tabsLayoutMinWidth
+	]);
+	useEffect(() => {
+		setHistory((history) => {
+			const currentRoute = getCurrentRoute(history);
+			const currentRouteHasSection = sections.some((section) => section.id === currentRoute?.id);
+			if (!currentRoute) return sections[0] ? [{ id: sections[0].id }] : [];
+			if (currentRouteHasSection) return history;
+			return sections[0] ? [{ id: sections[0].id }] : [];
+		});
+	}, [sections]);
+	const contextValue = useMemo(() => ({
+		closeNavigation,
+		history,
+		historyPop,
+		historyPush,
+		isNavigationOpen,
+		layout,
+		openNavigation
+	}), [
+		closeNavigation,
+		history,
+		historyPop,
+		historyPush,
+		isNavigationOpen,
+		layout,
+		openNavigation
+	]);
+	const Content = activeSection?.SectionContent;
+	const navigation = /* @__PURE__ */ jsx("div", {
+		className: "str-chat__section-navigator__navigation",
+		children: sections.map((section) => {
+			const NavButton = section.NavButton;
+			const selected = activeSection?.id === section.id;
+			return /* @__PURE__ */ jsx("div", {
+				className: "str-chat__section-navigator__navigation-item",
+				children: /* @__PURE__ */ jsx(NavButton, {
+					className: "str-chat__section-navigator__navigation-item__nav-button",
+					sectionId: section.id,
+					select: () => {
+						historyPush({ id: section.id });
+						closeNavigation();
+					},
+					selected
+				})
+			}, section.id);
+		})
+	});
+	return /* @__PURE__ */ jsx(SectionNavigatorContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: clsx("str-chat__section-navigator", className, { "str-chat__section-navigator--inline": isInlineLayout }),
+			"data-layout": layout,
+			ref: rootRef,
+			...props,
+			children: [
+				showDockedNavigation && navigation,
+				Content && /* @__PURE__ */ jsx("div", {
+					className: "str-chat__section-navigator__content",
+					children: /* @__PURE__ */ jsx(Content, { layout })
+				}),
+				isInlineLayout && /* @__PURE__ */ jsxs("div", {
+					className: clsx("str-chat__section-navigator__navigation-overlay", { "str-chat__section-navigator__navigation-overlay--open": isNavigationOpen }),
+					children: [/* @__PURE__ */ jsx("button", {
+						"aria-hidden": true,
+						className: "str-chat__section-navigator__navigation-scrim",
+						onClick: closeNavigation,
+						tabIndex: -1,
+						type: "button"
+					}), /* @__PURE__ */ jsx("div", {
+						className: "str-chat__section-navigator__navigation-drawer",
+						children: navigation
+					})]
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { SECTION_NAVIGATOR_LAYOUT, SectionNavigator, useSectionNavigatorContext };
+
+//# sourceMappingURL=SectionNavigator.mjs.map

package/dist/es/plugins/ChannelDetail/SectionNavigator/SectionNavigator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionNavigator.mjs","names":[],"sources":["../../../../../src/plugins/ChannelDetail/SectionNavigator/SectionNavigator.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, {\n  type ComponentProps,\n  type ComponentType,\n  createContext,\n  type HTMLAttributes,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nexport type SectionNavigatorLayout = string;\n\nexport const SECTION_NAVIGATOR_LAYOUT = {\n  inline: 'inline',\n  tabs: 'tabs',\n} as const;\n\nexport type SectionNavigatorRoute = {\n  id: string;\n};\n\nexport type SectionNavigatorSectionContentProps = {\n  layout: SectionNavigatorLayout;\n};\n\nexport type SectionNavigatorNavButtonProps = ComponentProps<'button'> & {\n  sectionId: string;\n  selected: boolean;\n  select: () => void;\n};\n\nexport type SectionNavigatorSection = {\n  id: string;\n  NavButton: ComponentType<SectionNavigatorNavButtonProps>;\n  SectionContent: ComponentType<SectionNavigatorSectionContentProps>;\n};\n\nexport type SectionNavigatorLayoutObserverFactory = ({\n  element,\n  setLayout,\n  tabsLayoutMinWidth,\n}: {\n  element: HTMLElement;\n  setLayout: (layout: SectionNavigatorLayout) => void;\n  tabsLayoutMinWidth: number;\n}) => (() => void) | void;\n\nexport type SectionNavigatorContextValue = {\n  layout: SectionNavigatorLayout;\n  history: SectionNavigatorRoute[];\n  historyPop: () => void;\n  historyPush: (route: SectionNavigatorRoute) => void;\n  /** Whether the navigation drawer overlay is currently open (inline layout only). */\n  isNavigationOpen: boolean;\n  /** Opens the navigation drawer overlay (inline layout). */\n  openNavigation: () => void;\n  /** Closes the navigation drawer overlay (inline layout). */\n  closeNavigation: () => void;\n};\n\nexport type SectionNavigatorProps = HTMLAttributes<HTMLDivElement> & {\n  sections: SectionNavigatorSection[];\n  createLayoutObserver?: SectionNavigatorLayoutObserverFactory;\n  defaultLayout?: SectionNavigatorLayout;\n  initialHistory?: SectionNavigatorRoute[];\n  layout?: SectionNavigatorLayout;\n  /** Called whenever the resolved layout changes (and once on mount). */\n  onLayoutChange?: (layout: SectionNavigatorLayout) => void;\n  tabsLayoutMinWidth?: number;\n};\n\nconst DEFAULT_TABS_LAYOUT_MIN_WIDTH = 640;\n\nconst defaultCreateLayoutObserver: SectionNavigatorLayoutObserverFactory = ({\n  element,\n  setLayout,\n  tabsLayoutMinWidth,\n}) => {\n  if (typeof ResizeObserver === 'undefined') return;\n\n  const observedElement = element.parentElement ?? element;\n  const updateLayout = (width: number) => {\n    if (width <= 0) return;\n\n    setLayout(\n      width < tabsLayoutMinWidth\n        ? SECTION_NAVIGATOR_LAYOUT.inline\n        : SECTION_NAVIGATOR_LAYOUT.tabs,\n    );\n  };\n  const observer = new ResizeObserver(([entry]) => {\n    updateLayout(entry.contentRect.width);\n  });\n\n  updateLayout(observedElement.getBoundingClientRect().width);\n  observer.observe(observedElement);\n\n  return () => observer.disconnect();\n};\n\nconst defaultSectionNavigatorContextValue: SectionNavigatorContextValue = {\n  closeNavigation: () => undefined,\n  history: [],\n  historyPop: () => undefined,\n  historyPush: () => undefined,\n  isNavigationOpen: false,\n  layout: SECTION_NAVIGATOR_LAYOUT.tabs,\n  openNavigation: () => undefined,\n};\n\nconst SectionNavigatorContext = createContext<SectionNavigatorContextValue>(\n  defaultSectionNavigatorContextValue,\n);\n\nexport const useSectionNavigatorContext = () => useContext(SectionNavigatorContext);\n\nconst getCurrentRoute = (history: SectionNavigatorRoute[]) => history[history.length - 1];\n\nexport const SectionNavigator = ({\n  className,\n  createLayoutObserver = defaultCreateLayoutObserver,\n  defaultLayout = SECTION_NAVIGATOR_LAYOUT.tabs,\n  initialHistory,\n  layout: controlledLayout,\n  onLayoutChange,\n  sections,\n  tabsLayoutMinWidth = DEFAULT_TABS_LAYOUT_MIN_WIDTH,\n  ...props\n}: SectionNavigatorProps) => {\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const [internalLayout, setInternalLayout] =\n    useState<SectionNavigatorLayout>(defaultLayout);\n  const [history, setHistory] = useState<SectionNavigatorRoute[]>(\n    () => initialHistory ?? (sections[0] ? [{ id: sections[0].id }] : []),\n  );\n  const [isNavigationOpen, setIsNavigationOpen] = useState(false);\n  const layout = controlledLayout ?? internalLayout;\n  const currentRoute = getCurrentRoute(history);\n  const currentSection = sections.find((section) => section.id === currentRoute?.id);\n  const activeSection = currentSection ?? sections[0];\n  const isInlineLayout = layout === SECTION_NAVIGATOR_LAYOUT.inline;\n  const showDockedNavigation = !isInlineLayout || !currentSection;\n\n  const openNavigation = useCallback(() => setIsNavigationOpen(true), []);\n  const closeNavigation = useCallback(() => setIsNavigationOpen(false), []);\n\n  const historyPush = useCallback(\n    (route: SectionNavigatorRoute) => {\n      setHistory((history) => {\n        const currentRoute = getCurrentRoute(history);\n\n        if (currentRoute?.id === route.id) return history;\n        if (layout === SECTION_NAVIGATOR_LAYOUT.tabs) return [route];\n\n        return [...history, route];\n      });\n    },\n    [layout],\n  );\n\n  const historyPop = useCallback(() => {\n    setHistory((history) => (history.length > 1 ? history.slice(0, -1) : history));\n  }, []);\n\n  // The drawer overlay only exists in inline layout; close it whenever we leave\n  // inline so it cannot linger after a resize to a wider layout.\n  useEffect(() => {\n    if (!isInlineLayout) setIsNavigationOpen(false);\n  }, [isInlineLayout]);\n\n  useEffect(() => {\n    if (!isNavigationOpen) return;\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') closeNavigation();\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [closeNavigation, isNavigationOpen]);\n\n  useEffect(() => {\n    onLayoutChange?.(layout);\n  }, [layout, onLayoutChange]);\n\n  useEffect(() => {\n    if (controlledLayout) return;\n    if (!rootRef.current) return;\n\n    return createLayoutObserver({\n      element: rootRef.current,\n      setLayout: setInternalLayout,\n      tabsLayoutMinWidth,\n    });\n  }, [controlledLayout, createLayoutObserver, tabsLayoutMinWidth]);\n\n  useEffect(() => {\n    setHistory((history) => {\n      const currentRoute = getCurrentRoute(history);\n      const currentRouteHasSection = sections.some(\n        (section) => section.id === currentRoute?.id,\n      );\n\n      if (!currentRoute) return sections[0] ? [{ id: sections[0].id }] : [];\n\n      if (currentRouteHasSection) return history;\n\n      return sections[0] ? [{ id: sections[0].id }] : [];\n    });\n  }, [sections]);\n\n  const contextValue = useMemo<SectionNavigatorContextValue>(\n    () => ({\n      closeNavigation,\n      history,\n      historyPop,\n      historyPush,\n      isNavigationOpen,\n      layout,\n      openNavigation,\n    }),\n    [\n      closeNavigation,\n      history,\n      historyPop,\n      historyPush,\n      isNavigationOpen,\n      layout,\n      openNavigation,\n    ],\n  );\n\n  const Content = activeSection?.SectionContent;\n\n  const navigation = (\n    <div className='str-chat__section-navigator__navigation'>\n      {sections.map((section) => {\n        const NavButton = section.NavButton;\n        const selected = activeSection?.id === section.id;\n\n        return (\n          <div className='str-chat__section-navigator__navigation-item' key={section.id}>\n            <NavButton\n              className='str-chat__section-navigator__navigation-item__nav-button'\n              sectionId={section.id}\n              select={() => {\n                historyPush({ id: section.id });\n                closeNavigation();\n              }}\n              selected={selected}\n            />\n          </div>\n        );\n      })}\n    </div>\n  );\n\n  return (\n    <SectionNavigatorContext.Provider value={contextValue}>\n      <div\n        className={clsx('str-chat__section-navigator', className, {\n          'str-chat__section-navigator--inline': isInlineLayout,\n        })}\n        data-layout={layout}\n        ref={rootRef}\n        {...props}\n      >\n        {showDockedNavigation && navigation}\n        {Content && (\n          <div className='str-chat__section-navigator__content'>\n            <Content layout={layout} />\n          </div>\n        )}\n        {isInlineLayout && (\n          <div\n            className={clsx('str-chat__section-navigator__navigation-overlay', {\n              'str-chat__section-navigator__navigation-overlay--open': isNavigationOpen,\n            })}\n          >\n            <button\n              aria-hidden\n              className='str-chat__section-navigator__navigation-scrim'\n              onClick={closeNavigation}\n              tabIndex={-1}\n              type='button'\n            />\n            <div className='str-chat__section-navigator__navigation-drawer'>\n              {navigation}\n            </div>\n          </div>\n        )}\n      </div>\n    </SectionNavigatorContext.Provider>\n  );\n};\n"],"mappings":"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"}

package/dist/es/plugins/ChannelDetail/SectionNavigator/SectionNavigatorHeader.mjs

@@ -0,0 +1,49 @@
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { Button } from "../../../components/Button/Button.mjs";
+import { Prompt } from "../../../components/Dialog/components/Prompt.mjs";
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
+import { SECTION_NAVIGATOR_LAYOUT, useSectionNavigatorContext } from "./SectionNavigator.mjs";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/plugins/ChannelDetail/SectionNavigator/SectionNavigatorHeader.tsx
+/**
+* Generic header for content rendered inside a `SectionNavigator`. It renders a
+* `Prompt.Header` and, in the inline layout (where the navigation sidebar is not
+* shown), prepends a hamburger button that opens the navigation drawer. The
+* hamburger is omitted on nested views that already show a back button
+* (`goBack`), where it would compete with the back affordance.
+*/
+var SectionNavigatorHeader = (props) => {
+	const { t } = useTranslationContext();
+	const { layout, openNavigation } = useSectionNavigatorContext();
+	const MenuButton = useMemo(() => {
+		if (layout !== SECTION_NAVIGATOR_LAYOUT.inline) return void 0;
+		if (props.goBack) return void 0;
+		return function SectionNavigatorHeaderMenuButton() {
+			const { IconMenu } = useComponentContextIcons();
+			return /* @__PURE__ */ jsx(Button, {
+				appearance: "ghost",
+				"aria-label": t("channelDetail.sectionNavigatorHeader.openMenu.ariaLabel", "Open menu"),
+				circular: true,
+				className: "str-chat__section-navigator__header-menu-button",
+				onClick: openNavigation,
+				size: "md",
+				variant: "secondary",
+				children: /* @__PURE__ */ jsx(IconMenu, {})
+			});
+		};
+	}, [
+		layout,
+		openNavigation,
+		props.goBack,
+		t
+	]);
+	return /* @__PURE__ */ jsx(Prompt.Header, {
+		...props,
+		LeadingContent: MenuButton
+	});
+};
+//#endregion
+export { SectionNavigatorHeader };
+
+//# sourceMappingURL=SectionNavigatorHeader.mjs.map

package/dist/es/plugins/ChannelDetail/SectionNavigator/SectionNavigatorHeader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionNavigatorHeader.mjs","names":[],"sources":["../../../../../src/plugins/ChannelDetail/SectionNavigator/SectionNavigatorHeader.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { SECTION_NAVIGATOR_LAYOUT, useSectionNavigatorContext } from './SectionNavigator';\nimport { useComponentContextIcons, useTranslationContext } from '../../../context';\nimport { Button } from '../../../components/Button';\nimport { Prompt, type PromptHeaderProps } from '../../../components/Dialog';\n\nexport type SectionNavigatorHeaderProps = Omit<PromptHeaderProps, 'LeadingContent'>;\n\n/**\n * Generic header for content rendered inside a `SectionNavigator`. It renders a\n * `Prompt.Header` and, in the inline layout (where the navigation sidebar is not\n * shown), prepends a hamburger button that opens the navigation drawer. The\n * hamburger is omitted on nested views that already show a back button\n * (`goBack`), where it would compete with the back affordance.\n */\nexport const SectionNavigatorHeader = (props: SectionNavigatorHeaderProps) => {\n  const { t } = useTranslationContext();\n  const { layout, openNavigation } = useSectionNavigatorContext();\n\n  const MenuButton = useMemo(() => {\n    if (layout !== SECTION_NAVIGATOR_LAYOUT.inline) return undefined;\n    if (props.goBack) return undefined;\n\n    return function SectionNavigatorHeaderMenuButton() {\n      const { IconMenu } = useComponentContextIcons();\n      return (\n        <Button\n          appearance='ghost'\n          aria-label={t(\n            'channelDetail.sectionNavigatorHeader.openMenu.ariaLabel',\n            'Open menu',\n          )}\n          circular\n          className='str-chat__section-navigator__header-menu-button'\n          onClick={openNavigation}\n          size='md'\n          variant='secondary'\n        >\n          <IconMenu />\n        </Button>\n      );\n    };\n  }, [layout, openNavigation, props.goBack, t]);\n\n  return <Prompt.Header {...props} LeadingContent={MenuButton} />;\n};\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,IAAa,0BAA0B,UAAuC;CAC5E,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,QAAQ,mBAAmB,2BAA2B;CAE9D,MAAM,aAAa,cAAc;EAC/B,IAAI,WAAW,yBAAyB,QAAQ,OAAO,KAAA;EACvD,IAAI,MAAM,QAAQ,OAAO,KAAA;EAEzB,OAAO,SAAS,mCAAmC;GACjD,MAAM,EAAE,aAAa,yBAAyB;GAC9C,OACE,oBAAC,QAAD;IACE,YAAW;IACX,cAAY,EACV,2DACA,WACF;IACA,UAAA;IACA,WAAU;IACV,SAAS;IACT,MAAK;IACL,SAAQ;cAER,oBAAC,UAAD,CAAW,CAAA;GACL,CAAA;EAEZ;CACF,GAAG;EAAC;EAAQ;EAAgB,MAAM;EAAQ;CAAC,CAAC;CAE5C,OAAO,oBAAC,OAAO,QAAR;EAAe,GAAI;EAAO,gBAAgB;CAAa,CAAA;AAChE"}

package/dist/es/plugins/ChannelDetail/Views/ChannelFilesView/ChannelFilesEmptyList.mjs

@@ -0,0 +1,25 @@
+import { useTranslationContext } from "../../../../context/TranslationContext.mjs";
+import { useComponentContextIcons } from "../../../../context/useComponentContextIcons.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/plugins/ChannelDetail/Views/ChannelFilesView/ChannelFilesEmptyList.tsx
+var ChannelFilesEmptyList = () => {
+	const { IconFolder } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__channel-detail__files-view__empty-state",
+		children: [/* @__PURE__ */ jsx(IconFolder, { className: "str-chat__channel-detail__files-view__empty-state__icon" }), /* @__PURE__ */ jsxs("div", {
+			className: "str-chat__channel-detail__files-view__empty-state__content",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "str-chat__channel-detail__files-view__empty-state__title",
+				children: t("channelDetail.channelFilesEmpty.noFiles.text", "No files")
+			}), /* @__PURE__ */ jsx("p", {
+				className: "str-chat__channel-detail__files-view__empty-state__description",
+				children: t("channelDetail.channelFilesEmpty.shareFileSee.text", "Share a file to see it here")
+			})]
+		})]
+	});
+};
+//#endregion
+export { ChannelFilesEmptyList };
+
+//# sourceMappingURL=ChannelFilesEmptyList.mjs.map

package/dist/es/plugins/ChannelDetail/Views/ChannelFilesView/ChannelFilesEmptyList.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelFilesEmptyList.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/ChannelFilesView/ChannelFilesEmptyList.tsx"],"sourcesContent":["import { useComponentContextIcons, useTranslationContext } from '../../../../context';\n\nexport const ChannelFilesEmptyList = () => {\n  const { IconFolder } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n\n  return (\n    <div className='str-chat__channel-detail__files-view__empty-state'>\n      <IconFolder className='str-chat__channel-detail__files-view__empty-state__icon' />\n      <div className='str-chat__channel-detail__files-view__empty-state__content'>\n        <p className='str-chat__channel-detail__files-view__empty-state__title'>\n          {t('channelDetail.channelFilesEmpty.noFiles.text', 'No files')}\n        </p>\n        <p className='str-chat__channel-detail__files-view__empty-state__description'>\n          {t(\n            'channelDetail.channelFilesEmpty.shareFileSee.text',\n            'Share a file to see it here',\n          )}\n        </p>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;AAEA,IAAa,8BAA8B;CACzC,MAAM,EAAE,eAAe,yBAAyB;CAChD,MAAM,EAAE,MAAM,sBAAsB;CAEpC,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,YAAD,EAAY,WAAU,0DAA2D,CAAA,GACjF,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,KAAD;IAAG,WAAU;cACV,EAAE,gDAAgD,UAAU;GAC5D,CAAA,GACH,oBAAC,KAAD;IAAG,WAAU;cACV,EACC,qDACA,6BACF;GACC,CAAA,CACA;IACF;;AAET"}