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

package/dist/es/components/Dialog/components/Prompt.mjs

@@ -0,0 +1,112 @@
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { Button } from "../../Button/Button.mjs";
+import { useAriaIdentifiers } from "../../../a11y/hooks/useAriaIdentifiers.mjs";
+import { useModalContext } from "../../../context/ModalContext.mjs";
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Dialog/components/Prompt.tsx
+var PromptRoot = ({ children, className, ...props }) => /* @__PURE__ */ jsx("div", {
+	...props,
+	className: clsx("str-chat__prompt", className),
+	children
+});
+var PromptHeader = ({ className, close, description, descriptionId, goBack, LeadingContent, title, titleId, TrailingContent }) => {
+	const { IconArrowLeft, IconXmark } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	const { dialogId } = useModalContext();
+	const { descriptionId: derivedDescriptionId, titleId: derivedTitleId } = useAriaIdentifiers(dialogId);
+	const resolvedTitleId = titleId ?? derivedTitleId;
+	const resolvedDescriptionId = descriptionId ?? derivedDescriptionId;
+	const hasDescription = description != null && description !== "";
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("str-chat__prompt__header", className, {
+			"str-chat__prompt__header--withDescription": hasDescription,
+			"str-chat__prompt__header--withGoBack": goBack
+		}),
+		children: [
+			LeadingContent && /* @__PURE__ */ jsx("div", {
+				className: "str-chat__prompt__header__leading-content",
+				children: /* @__PURE__ */ jsx(LeadingContent, {})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: clsx("str-chat__prompt__header__title-group"),
+				children: [
+					goBack && /* @__PURE__ */ jsx(Button, {
+						appearance: "ghost",
+						"aria-label": t("dialog.prompt.goBack.ariaLabel", "Go back"),
+						circular: true,
+						className: "str-chat__prompt__header__go-back-button",
+						onClick: goBack,
+						size: "md",
+						variant: "secondary",
+						children: /* @__PURE__ */ jsx(IconArrowLeft, {})
+					}),
+					/* @__PURE__ */ jsx("h2", {
+						className: "str-chat__prompt__header__title",
+						id: resolvedTitleId,
+						children: title
+					}),
+					hasDescription && /* @__PURE__ */ jsx("p", {
+						className: "str-chat__prompt__header__description",
+						id: resolvedDescriptionId,
+						children: description
+					})
+				]
+			}),
+			(close || TrailingContent) && /* @__PURE__ */ jsxs("div", {
+				className: "str-chat__prompt__header__trailing-content",
+				children: [TrailingContent && /* @__PURE__ */ jsx(TrailingContent, {}), close && /* @__PURE__ */ jsx(Button, {
+					appearance: "ghost",
+					"aria-label": t("common.close.ariaLabel", "Close"),
+					circular: true,
+					className: "str-chat__prompt__header__close-button",
+					onClick: close,
+					size: "md",
+					variant: "secondary",
+					children: /* @__PURE__ */ jsx(IconXmark, {})
+				})]
+			})
+		]
+	});
+};
+var PromptBody = ({ children, className }) => /* @__PURE__ */ jsx("div", {
+	className: clsx("str-chat__prompt__body", className),
+	children
+});
+var PromptFooter = ({ children, className }) => /* @__PURE__ */ jsx("div", {
+	className: clsx("str-chat__prompt__footer", className),
+	children
+});
+var PromptFooterControls = ({ children, className }) => /* @__PURE__ */ jsx("div", {
+	className: clsx("str-chat__prompt__footer__controls", className),
+	children
+});
+var PromptFooterControlsButtonSecondary = ({ className, ...props }) => /* @__PURE__ */ jsx(Button, {
+	appearance: "ghost",
+	className: clsx("str-chat__prompt__footer__controls-button", className),
+	size: "md",
+	variant: "secondary",
+	...props
+});
+var PromptFooterControlsButtonPrimary = ({ className, ...props }) => /* @__PURE__ */ jsx(Button, {
+	appearance: "solid",
+	className: clsx("str-chat__prompt__footer__controls-button", className),
+	size: "md",
+	variant: "primary",
+	...props
+});
+var Prompt = {
+	Body: PromptBody,
+	Footer: PromptFooter,
+	FooterControls: PromptFooterControls,
+	FooterControlsButtonPrimary: PromptFooterControlsButtonPrimary,
+	FooterControlsButtonSecondary: PromptFooterControlsButtonSecondary,
+	Header: PromptHeader,
+	Root: PromptRoot
+};
+//#endregion
+export { Prompt };
+
+//# sourceMappingURL=Prompt.mjs.map

package/dist/es/components/Dialog/components/Prompt.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Prompt.mjs","names":[],"sources":["../../../../../src/components/Dialog/components/Prompt.tsx"],"sourcesContent":["import React, { type ComponentProps, type PropsWithChildren } from 'react';\nimport clsx from 'clsx';\nimport { Button, type ButtonProps } from '../../Button';\nimport {\n  useComponentContextIcons,\n  useModalContext,\n  useTranslationContext,\n} from '../../../context';\nimport { useAriaIdentifiers } from '../../../a11y/hooks/useAriaIdentifiers';\n\nconst PromptRoot = ({ children, className, ...props }: ComponentProps<'div'>) => (\n  <div {...props} className={clsx('str-chat__prompt', className)}>\n    {children}\n  </div>\n);\n\nexport type PromptHeaderProps = {\n  title: React.ReactNode;\n  className?: string;\n  close?: () => void;\n  description?: string;\n  descriptionId?: string;\n  goBack?: () => void;\n  LeadingContent?: React.ComponentType;\n  titleId?: string;\n  TrailingContent?: React.ComponentType;\n};\n\nconst PromptHeader = ({\n  className,\n  close,\n  description,\n  descriptionId,\n  goBack,\n  LeadingContent,\n  title,\n  titleId,\n  TrailingContent,\n}: PromptHeaderProps) => {\n  const { IconArrowLeft, IconXmark } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  const { dialogId } = useModalContext();\n  const { descriptionId: derivedDescriptionId, titleId: derivedTitleId } =\n    useAriaIdentifiers(dialogId);\n  const resolvedTitleId = titleId ?? derivedTitleId;\n  const resolvedDescriptionId = descriptionId ?? derivedDescriptionId;\n  const hasDescription = description != null && description !== '';\n\n  return (\n    <div\n      className={clsx('str-chat__prompt__header', className, {\n        'str-chat__prompt__header--withDescription': hasDescription,\n        'str-chat__prompt__header--withGoBack': goBack,\n      })}\n    >\n      {LeadingContent && (\n        <div className='str-chat__prompt__header__leading-content'>\n          <LeadingContent />\n        </div>\n      )}\n      <div className={clsx('str-chat__prompt__header__title-group')}>\n        {goBack && (\n          <Button\n            appearance='ghost'\n            aria-label={t('dialog.prompt.goBack.ariaLabel', 'Go back')}\n            circular\n            className='str-chat__prompt__header__go-back-button'\n            onClick={goBack}\n            size='md'\n            variant='secondary'\n          >\n            <IconArrowLeft />\n          </Button>\n        )}\n        <h2 className='str-chat__prompt__header__title' id={resolvedTitleId}>\n          {title}\n        </h2>\n        {hasDescription && (\n          <p className='str-chat__prompt__header__description' id={resolvedDescriptionId}>\n            {description}\n          </p>\n        )}\n      </div>\n      {(close || TrailingContent) && (\n        <div className='str-chat__prompt__header__trailing-content'>\n          {TrailingContent && <TrailingContent />}\n          {close && (\n            <Button\n              appearance='ghost'\n              // Concise \"Close\": the dialog itself is named by its title (aria-labelledby) and\n              // described by its description (aria-describedby on the dialog surface), so the close\n              // button carries neither — repeating them here is redundant noise on focus.\n              aria-label={t('common.close.ariaLabel', 'Close')}\n              circular\n              className='str-chat__prompt__header__close-button'\n              onClick={close}\n              size='md'\n              variant='secondary'\n            >\n              <IconXmark />\n            </Button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport type PromptBodyProps = PropsWithChildren<{\n  className?: string;\n}>;\n\nconst PromptBody = ({ children, className }: PromptBodyProps) => (\n  <div className={clsx('str-chat__prompt__body', className)}>{children}</div>\n);\n\nexport type PromptFooterProps = PropsWithChildren<{\n  className?: string;\n}>;\n\nconst PromptFooter = ({ children, className }: PromptFooterProps) => (\n  <div className={clsx('str-chat__prompt__footer', className)}>{children}</div>\n);\n\ntype PromptFooterControlsProps = PropsWithChildren<{\n  className?: string;\n}>;\n\nconst PromptFooterControls = ({ children, className }: PromptFooterControlsProps) => (\n  <div className={clsx('str-chat__prompt__footer__controls', className)}>{children}</div>\n);\n\nconst PromptFooterControlsButtonSecondary = ({ className, ...props }: ButtonProps) => (\n  <Button\n    appearance='ghost'\n    className={clsx('str-chat__prompt__footer__controls-button', className)}\n    size='md'\n    variant='secondary'\n    {...props}\n  />\n);\n\nconst PromptFooterControlsButtonPrimary = ({ className, ...props }: ButtonProps) => (\n  <Button\n    appearance='solid'\n    className={clsx('str-chat__prompt__footer__controls-button', className)}\n    size='md'\n    variant='primary'\n    {...props}\n  />\n);\n\nexport const Prompt = {\n  Body: PromptBody,\n  Footer: PromptFooter,\n  FooterControls: PromptFooterControls,\n  FooterControlsButtonPrimary: PromptFooterControlsButtonPrimary,\n  FooterControlsButtonSecondary: PromptFooterControlsButtonSecondary,\n  Header: PromptHeader,\n  Root: PromptRoot,\n};\n"],"mappings":";;;;;;;;;AAUA,IAAM,cAAc,EAAE,UAAU,WAAW,GAAG,YAC5C,oBAAC,OAAD;CAAK,GAAI;CAAO,WAAW,KAAK,oBAAoB,SAAS;CAC1D;AACE,CAAA;AAeP,IAAM,gBAAgB,EACpB,WACA,OACA,aACA,eACA,QACA,gBACA,OACA,SACA,sBACuB;CACvB,MAAM,EAAE,eAAe,cAAc,yBAAyB;CAC9D,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,EAAE,eAAe,sBAAsB,SAAS,mBACpD,mBAAmB,QAAQ;CAC7B,MAAM,kBAAkB,WAAW;CACnC,MAAM,wBAAwB,iBAAiB;CAC/C,MAAM,iBAAiB,eAAe,QAAQ,gBAAgB;CAE9D,OACE,qBAAC,OAAD;EACE,WAAW,KAAK,4BAA4B,WAAW;GACrD,6CAA6C;GAC7C,wCAAwC;EAC1C,CAAC;YAJH;GAMG,kBACC,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,gBAAD,CAAiB,CAAA;GACd,CAAA;GAEP,qBAAC,OAAD;IAAK,WAAW,KAAK,uCAAuC;cAA5D;KACG,UACC,oBAAC,QAAD;MACE,YAAW;MACX,cAAY,EAAE,kCAAkC,SAAS;MACzD,UAAA;MACA,WAAU;MACV,SAAS;MACT,MAAK;MACL,SAAQ;gBAER,oBAAC,eAAD,CAAgB,CAAA;KACV,CAAA;KAEV,oBAAC,MAAD;MAAI,WAAU;MAAkC,IAAI;gBACjD;KACC,CAAA;KACH,kBACC,oBAAC,KAAD;MAAG,WAAU;MAAwC,IAAI;gBACtD;KACA,CAAA;IAEF;;IACH,SAAS,oBACT,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,mBAAmB,oBAAC,iBAAD,CAAkB,CAAA,GACrC,SACC,oBAAC,QAAD;KACE,YAAW;KAIX,cAAY,EAAE,0BAA0B,OAAO;KAC/C,UAAA;KACA,WAAU;KACV,SAAS;KACT,MAAK;KACL,SAAQ;eAER,oBAAC,WAAD,CAAY,CAAA;IACN,CAAA,CAEP;;EAEJ;;AAET;AAMA,IAAM,cAAc,EAAE,UAAU,gBAC9B,oBAAC,OAAD;CAAK,WAAW,KAAK,0BAA0B,SAAS;CAAI;AAAc,CAAA;AAO5E,IAAM,gBAAgB,EAAE,UAAU,gBAChC,oBAAC,OAAD;CAAK,WAAW,KAAK,4BAA4B,SAAS;CAAI;AAAc,CAAA;AAO9E,IAAM,wBAAwB,EAAE,UAAU,gBACxC,oBAAC,OAAD;CAAK,WAAW,KAAK,sCAAsC,SAAS;CAAI;AAAc,CAAA;AAGxF,IAAM,uCAAuC,EAAE,WAAW,GAAG,YAC3D,oBAAC,QAAD;CACE,YAAW;CACX,WAAW,KAAK,6CAA6C,SAAS;CACtE,MAAK;CACL,SAAQ;CACR,GAAI;AACL,CAAA;AAGH,IAAM,qCAAqC,EAAE,WAAW,GAAG,YACzD,oBAAC,QAAD;CACE,YAAW;CACX,WAAW,KAAK,6CAA6C,SAAS;CACtE,MAAK;CACL,SAAQ;CACR,GAAI;AACL,CAAA;AAGH,IAAa,SAAS;CACpB,MAAM;CACN,QAAQ;CACR,gBAAgB;CAChB,6BAA6B;CAC7B,+BAA+B;CAC/B,QAAQ;CACR,MAAM;AACR"}

package/dist/es/components/Dialog/components/Viewer.mjs

@@ -0,0 +1,100 @@
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { Button } from "../../Button/Button.mjs";
+import { useAriaIdentifiers } from "../../../a11y/hooks/useAriaIdentifiers.mjs";
+import { useModalContext } from "../../../context/ModalContext.mjs";
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Dialog/components/Viewer.tsx
+var ViewerRoot = ({ children, className, ...props }) => /* @__PURE__ */ jsx("div", {
+	...props,
+	className: clsx("str-chat__viewer", className),
+	children
+});
+var ViewerHeader = ({ className, close, description, descriptionId, goBack, title, titleId }) => {
+	const { IconArrowLeft, IconXmark } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	const { dialogId } = useModalContext();
+	const { descriptionId: derivedDescriptionId, titleId: derivedTitleId } = useAriaIdentifiers(dialogId);
+	const resolvedTitleId = titleId ?? derivedTitleId;
+	const resolvedDescriptionId = descriptionId ?? derivedDescriptionId;
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("str-chat__viewer__header", className),
+		children: [
+			goBack && /* @__PURE__ */ jsx(Button, {
+				appearance: "ghost",
+				"aria-describedby": description != null && description !== "" ? resolvedDescriptionId : void 0,
+				"aria-label": t("common.back.label", "Back"),
+				circular: true,
+				className: "str-chat__viewer__header__go-back-button",
+				onClick: goBack,
+				size: "sm",
+				variant: "secondary",
+				children: /* @__PURE__ */ jsx(IconArrowLeft, {})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "str-chat__viewer__header__title-group",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "str-chat__viewer__header__title",
+					id: resolvedTitleId,
+					children: title
+				}), description != null && description !== "" && /* @__PURE__ */ jsx("p", {
+					className: "str-chat__viewer__header__description",
+					id: resolvedDescriptionId,
+					children: description
+				})]
+			}),
+			close && /* @__PURE__ */ jsx(Button, {
+				appearance: "ghost",
+				"aria-describedby": description != null && description !== "" ? resolvedDescriptionId : void 0,
+				"aria-label": t("dialog.viewer.closeDialog.ariaLabel", "Close dialog"),
+				circular: true,
+				className: "str-chat__viewer__header__close-button",
+				onClick: close,
+				size: "sm",
+				variant: "secondary",
+				children: /* @__PURE__ */ jsx(IconXmark, {})
+			})
+		]
+	});
+};
+var ViewerBody = ({ children, className }) => /* @__PURE__ */ jsx("div", {
+	className: clsx("str-chat__viewer__body", className),
+	children
+});
+var ViewerFooter = ({ children, className }) => /* @__PURE__ */ jsx("div", {
+	className: clsx("str-chat__viewer__footer", className),
+	children
+});
+var ViewerFooterControls = ({ children, className }) => /* @__PURE__ */ jsx("div", {
+	className: clsx("str-chat__viewer__footer__controls", className),
+	children
+});
+var ViewerFooterControlsButtonSecondary = ({ className, ...props }) => /* @__PURE__ */ jsx(Button, {
+	appearance: "ghost",
+	className: clsx("str-chat__viewer__footer__controls-button", className),
+	size: "md",
+	variant: "secondary",
+	...props
+});
+var ViewerFooterControlsButtonPrimary = ({ className, ...props }) => /* @__PURE__ */ jsx(Button, {
+	appearance: "solid",
+	className: clsx("str-chat__viewer__footer__controls-button", className),
+	size: "md",
+	variant: "primary",
+	...props
+});
+var Viewer = {
+	Body: ViewerBody,
+	Footer: ViewerFooter,
+	FooterControls: ViewerFooterControls,
+	FooterControlsButtonPrimary: ViewerFooterControlsButtonPrimary,
+	FooterControlsButtonSecondary: ViewerFooterControlsButtonSecondary,
+	Header: ViewerHeader,
+	Root: ViewerRoot
+};
+//#endregion
+export { Viewer };
+
+//# sourceMappingURL=Viewer.mjs.map

package/dist/es/components/Dialog/components/Viewer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Viewer.mjs","names":[],"sources":["../../../../../src/components/Dialog/components/Viewer.tsx"],"sourcesContent":["import React, { type ComponentProps, type PropsWithChildren } from 'react';\nimport clsx from 'clsx';\nimport { Button, type ButtonProps } from '../../Button';\nimport {\n  useComponentContextIcons,\n  useModalContext,\n  useTranslationContext,\n} from '../../../context';\nimport { useAriaIdentifiers } from '../../../a11y/hooks/useAriaIdentifiers';\n\nconst ViewerRoot = ({ children, className, ...props }: ComponentProps<'div'>) => (\n  <div {...props} className={clsx('str-chat__viewer', className)}>\n    {children}\n  </div>\n);\n\nexport type ViewerHeaderProps = {\n  title: string;\n  description?: string;\n  className?: string;\n  close?: () => void;\n  goBack?: () => void;\n  descriptionId?: string;\n  titleId?: string;\n};\n\nconst ViewerHeader = ({\n  className,\n  close,\n  description,\n  descriptionId,\n  goBack,\n  title,\n  titleId,\n}: ViewerHeaderProps) => {\n  const { IconArrowLeft, IconXmark } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  const { dialogId } = useModalContext();\n  const { descriptionId: derivedDescriptionId, titleId: derivedTitleId } =\n    useAriaIdentifiers(dialogId);\n  const resolvedTitleId = titleId ?? derivedTitleId;\n  const resolvedDescriptionId = descriptionId ?? derivedDescriptionId;\n\n  return (\n    <div className={clsx('str-chat__viewer__header', className)}>\n      {goBack && (\n        <Button\n          appearance='ghost'\n          aria-describedby={\n            description != null && description !== '' ? resolvedDescriptionId : undefined\n          }\n          aria-label={t('common.back.label', 'Back')}\n          circular\n          className='str-chat__viewer__header__go-back-button'\n          onClick={goBack}\n          size='sm'\n          variant='secondary'\n        >\n          <IconArrowLeft />\n        </Button>\n      )}\n      <div className='str-chat__viewer__header__title-group'>\n        <h2 className='str-chat__viewer__header__title' id={resolvedTitleId}>\n          {title}\n        </h2>\n        {description != null && description !== '' && (\n          <p className='str-chat__viewer__header__description' id={resolvedDescriptionId}>\n            {description}\n          </p>\n        )}\n      </div>\n      {close && (\n        <Button\n          appearance='ghost'\n          aria-describedby={\n            description != null && description !== '' ? resolvedDescriptionId : undefined\n          }\n          aria-label={t('dialog.viewer.closeDialog.ariaLabel', 'Close dialog')}\n          circular\n          className='str-chat__viewer__header__close-button'\n          onClick={close}\n          size='sm'\n          variant='secondary'\n        >\n          <IconXmark />\n        </Button>\n      )}\n    </div>\n  );\n};\n\nexport type ViewerBodyProps = PropsWithChildren<{\n  className?: string;\n}>;\n\nconst ViewerBody = ({ children, className }: ViewerBodyProps) => (\n  <div className={clsx('str-chat__viewer__body', className)}>{children}</div>\n);\n\nexport type ViewerFooterProps = PropsWithChildren<{\n  className?: string;\n}>;\n\nconst ViewerFooter = ({ children, className }: ViewerFooterProps) => (\n  <div className={clsx('str-chat__viewer__footer', className)}>{children}</div>\n);\n\ntype ViewerFooterControlsProps = PropsWithChildren<{\n  className?: string;\n}>;\n\nconst ViewerFooterControls = ({ children, className }: ViewerFooterControlsProps) => (\n  <div className={clsx('str-chat__viewer__footer__controls', className)}>{children}</div>\n);\n\nconst ViewerFooterControlsButtonSecondary = ({ className, ...props }: ButtonProps) => (\n  <Button\n    appearance='ghost'\n    className={clsx('str-chat__viewer__footer__controls-button', className)}\n    size='md'\n    variant='secondary'\n    {...props}\n  />\n);\n\nconst ViewerFooterControlsButtonPrimary = ({ className, ...props }: ButtonProps) => (\n  <Button\n    appearance='solid'\n    className={clsx('str-chat__viewer__footer__controls-button', className)}\n    size='md'\n    variant='primary'\n    {...props}\n  />\n);\n\nexport const Viewer = {\n  Body: ViewerBody,\n  Footer: ViewerFooter,\n  FooterControls: ViewerFooterControls,\n  FooterControlsButtonPrimary: ViewerFooterControlsButtonPrimary,\n  FooterControlsButtonSecondary: ViewerFooterControlsButtonSecondary,\n  Header: ViewerHeader,\n  Root: ViewerRoot,\n};\n"],"mappings":";;;;;;;;;AAUA,IAAM,cAAc,EAAE,UAAU,WAAW,GAAG,YAC5C,oBAAC,OAAD;CAAK,GAAI;CAAO,WAAW,KAAK,oBAAoB,SAAS;CAC1D;AACE,CAAA;AAaP,IAAM,gBAAgB,EACpB,WACA,OACA,aACA,eACA,QACA,OACA,cACuB;CACvB,MAAM,EAAE,eAAe,cAAc,yBAAyB;CAC9D,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,EAAE,eAAe,sBAAsB,SAAS,mBACpD,mBAAmB,QAAQ;CAC7B,MAAM,kBAAkB,WAAW;CACnC,MAAM,wBAAwB,iBAAiB;CAE/C,OACE,qBAAC,OAAD;EAAK,WAAW,KAAK,4BAA4B,SAAS;YAA1D;GACG,UACC,oBAAC,QAAD;IACE,YAAW;IACX,oBACE,eAAe,QAAQ,gBAAgB,KAAK,wBAAwB,KAAA;IAEtE,cAAY,EAAE,qBAAqB,MAAM;IACzC,UAAA;IACA,WAAU;IACV,SAAS;IACT,MAAK;IACL,SAAQ;cAER,oBAAC,eAAD,CAAgB,CAAA;GACV,CAAA;GAEV,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,MAAD;KAAI,WAAU;KAAkC,IAAI;eACjD;IACC,CAAA,GACH,eAAe,QAAQ,gBAAgB,MACtC,oBAAC,KAAD;KAAG,WAAU;KAAwC,IAAI;eACtD;IACA,CAAA,CAEF;;GACJ,SACC,oBAAC,QAAD;IACE,YAAW;IACX,oBACE,eAAe,QAAQ,gBAAgB,KAAK,wBAAwB,KAAA;IAEtE,cAAY,EAAE,uCAAuC,cAAc;IACnE,UAAA;IACA,WAAU;IACV,SAAS;IACT,MAAK;IACL,SAAQ;cAER,oBAAC,WAAD,CAAY,CAAA;GACN,CAAA;EAEP;;AAET;AAMA,IAAM,cAAc,EAAE,UAAU,gBAC9B,oBAAC,OAAD;CAAK,WAAW,KAAK,0BAA0B,SAAS;CAAI;AAAc,CAAA;AAO5E,IAAM,gBAAgB,EAAE,UAAU,gBAChC,oBAAC,OAAD;CAAK,WAAW,KAAK,4BAA4B,SAAS;CAAI;AAAc,CAAA;AAO9E,IAAM,wBAAwB,EAAE,UAAU,gBACxC,oBAAC,OAAD;CAAK,WAAW,KAAK,sCAAsC,SAAS;CAAI;AAAc,CAAA;AAGxF,IAAM,uCAAuC,EAAE,WAAW,GAAG,YAC3D,oBAAC,QAAD;CACE,YAAW;CACX,WAAW,KAAK,6CAA6C,SAAS;CACtE,MAAK;CACL,SAAQ;CACR,GAAI;AACL,CAAA;AAGH,IAAM,qCAAqC,EAAE,WAAW,GAAG,YACzD,oBAAC,QAAD;CACE,YAAW;CACX,WAAW,KAAK,6CAA6C,SAAS;CACtE,MAAK;CACL,SAAQ;CACR,GAAI;AACL,CAAA;AAGH,IAAa,SAAS;CACpB,MAAM;CACN,QAAQ;CACR,gBAAgB;CAChB,6BAA6B;CAC7B,+BAA+B;CAC/B,QAAQ;CACR,MAAM;AACR"}

package/dist/es/components/Dialog/hooks/useDialog.mjs

@@ -0,0 +1,53 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { modalDialogManagerId, useDialogManager, useNearestDialogManagerContext } from "../../../context/DialogManagerContext.mjs";
+import { useCallback, useEffect } from "react";
+//#region src/components/Dialog/hooks/useDialog.ts
+var useDialog = ({ closeOnClickOutside, dialogManagerId, id }) => {
+	const { dialogManager } = useDialogManager({ dialogManagerId });
+	useEffect(() => {
+		dialogManager.cancelPendingRemoval(id);
+		return () => {
+			dialogManager.markForRemoval(id);
+		};
+	}, [dialogManager, id]);
+	return dialogManager.getOrCreate({
+		closeOnClickOutside,
+		id
+	});
+};
+var useDialogOnNearestManager = ({ id }) => {
+	const { dialogManager } = useNearestDialogManagerContext() ?? {};
+	return {
+		dialog: useDialog({
+			dialogManagerId: dialogManager?.id,
+			id
+		}),
+		dialogManager
+	};
+};
+var modalDialogId = "modal-dialog";
+var useModalDialog = (id = modalDialogId) => useDialog({
+	dialogManagerId: modalDialogManagerId,
+	id
+});
+var useDialogIsOpen = (id, dialogManagerId) => {
+	const { dialogManager } = useDialogManager({ dialogManagerId });
+	const dialogIsOpenSelector = useCallback(({ dialogsById }) => ({ isOpen: !!dialogsById[id]?.isOpen }), [id]);
+	return useStateStore(dialogManager.state, dialogIsOpenSelector).isOpen;
+};
+var useModalDialogIsOpen = (id = modalDialogId) => useDialogIsOpen(id, modalDialogManagerId);
+var useDialogIsTopmost = (id, dialogManagerId) => {
+	const { dialogManager } = useDialogManager({ dialogManagerId });
+	const dialogIsTopmostSelector = useCallback(({ openedDialogIds }) => ({ isTopmost: openedDialogIds[openedDialogIds.length - 1] === id }), [id]);
+	return useStateStore(dialogManager.state, dialogIsTopmostSelector).isTopmost;
+};
+var useModalDialogIsTopmost = (id = modalDialogId) => useDialogIsTopmost(id, modalDialogManagerId);
+var openedDialogCountSelector = (nextValue) => ({ openedDialogCount: nextValue.openedDialogIds.length });
+var useOpenedDialogCount = ({ dialogManagerId } = {}) => {
+	const { dialogManager } = useDialogManager({ dialogManagerId });
+	return useStateStore(dialogManager.state, openedDialogCountSelector).openedDialogCount;
+};
+//#endregion
+export { modalDialogId, useDialog, useDialogIsOpen, useDialogIsTopmost, useDialogOnNearestManager, useModalDialog, useModalDialogIsOpen, useModalDialogIsTopmost, useOpenedDialogCount };
+
+//# sourceMappingURL=useDialog.mjs.map

package/dist/es/components/Dialog/hooks/useDialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDialog.mjs","names":[],"sources":["../../../../../src/components/Dialog/hooks/useDialog.ts"],"sourcesContent":["import { useCallback, useEffect } from 'react';\nimport {\n  modalDialogManagerId,\n  useDialogManager,\n  useNearestDialogManagerContext,\n} from '../../../context';\nimport { useStateStore } from '../../../store';\n\nimport type {\n  DialogManagerState,\n  GetOrCreateDialogParams,\n} from '../service/DialogManager';\n\nexport type UseDialogParams = GetOrCreateDialogParams & {\n  dialogManagerId?: string;\n};\n\nexport const useDialog = ({\n  closeOnClickOutside,\n  dialogManagerId,\n  id,\n}: UseDialogParams) => {\n  const { dialogManager } = useDialogManager({ dialogManagerId });\n\n  useEffect(() => {\n    dialogManager.cancelPendingRemoval(id);\n\n    return () => {\n      // Since this cleanup can run even if the component is still mounted\n      // and dialog id is unchanged (e.g. in <StrictMode />), it's safer to\n      // mark state as unused and only remove it after a timeout, rather than\n      // to remove it immediately.\n      dialogManager.markForRemoval(id);\n    };\n  }, [dialogManager, id]);\n\n  return dialogManager.getOrCreate({ closeOnClickOutside, id });\n};\n\nexport const useDialogOnNearestManager = ({ id }: Pick<UseDialogParams, 'id'>) => {\n  const { dialogManager } = useNearestDialogManagerContext() ?? {};\n  const dialog = useDialog({ dialogManagerId: dialogManager?.id, id });\n\n  return {\n    dialog,\n    dialogManager,\n  };\n};\n\nexport const modalDialogId = 'modal-dialog' as const;\n\nexport const useModalDialog = (id: string = modalDialogId) =>\n  useDialog({ dialogManagerId: modalDialogManagerId, id });\n\nexport const useDialogIsOpen = (id: string, dialogManagerId?: string) => {\n  const { dialogManager } = useDialogManager({ dialogManagerId });\n  const dialogIsOpenSelector = useCallback(\n    ({ dialogsById }: DialogManagerState) => ({ isOpen: !!dialogsById[id]?.isOpen }),\n    [id],\n  );\n  return useStateStore(dialogManager.state, dialogIsOpenSelector).isOpen;\n};\n\nexport const useModalDialogIsOpen = (id: string = modalDialogId) =>\n  useDialogIsOpen(id, modalDialogManagerId);\n\nexport const useDialogIsTopmost = (id: string, dialogManagerId?: string) => {\n  const { dialogManager } = useDialogManager({ dialogManagerId });\n  const dialogIsTopmostSelector = useCallback(\n    ({ openedDialogIds }: DialogManagerState) => ({\n      isTopmost: openedDialogIds[openedDialogIds.length - 1] === id,\n    }),\n    [id],\n  );\n  return useStateStore(dialogManager.state, dialogIsTopmostSelector).isTopmost;\n};\n\nexport const useModalDialogIsTopmost = (id: string = modalDialogId) =>\n  useDialogIsTopmost(id, modalDialogManagerId);\n\nconst openedDialogCountSelector = (nextValue: DialogManagerState) => ({\n  openedDialogCount: nextValue.openedDialogIds.length,\n});\n\nexport const useOpenedDialogCount = ({\n  dialogManagerId,\n}: { dialogManagerId?: string } = {}) => {\n  const { dialogManager } = useDialogManager({ dialogManagerId });\n  return useStateStore(dialogManager.state, openedDialogCountSelector).openedDialogCount;\n};\n"],"mappings":";;;;AAiBA,IAAa,aAAa,EACxB,qBACA,iBACA,SACqB;CACrB,MAAM,EAAE,kBAAkB,iBAAiB,EAAE,gBAAgB,CAAC;CAE9D,gBAAgB;EACd,cAAc,qBAAqB,EAAE;EAErC,aAAa;GAKX,cAAc,eAAe,EAAE;EACjC;CACF,GAAG,CAAC,eAAe,EAAE,CAAC;CAEtB,OAAO,cAAc,YAAY;EAAE;EAAqB;CAAG,CAAC;AAC9D;AAEA,IAAa,6BAA6B,EAAE,SAAsC;CAChF,MAAM,EAAE,kBAAkB,+BAA+B,KAAK,CAAC;CAG/D,OAAO;EACL,QAHa,UAAU;GAAE,iBAAiB,eAAe;GAAI;EAAG,CAGhE;EACA;CACF;AACF;AAEA,IAAa,gBAAgB;AAE7B,IAAa,kBAAkB,KAAa,kBAC1C,UAAU;CAAE,iBAAiB;CAAsB;AAAG,CAAC;AAEzD,IAAa,mBAAmB,IAAY,oBAA6B;CACvE,MAAM,EAAE,kBAAkB,iBAAiB,EAAE,gBAAgB,CAAC;CAC9D,MAAM,uBAAuB,aAC1B,EAAE,mBAAuC,EAAE,QAAQ,CAAC,CAAC,YAAY,GAAG,EAAE,OAAO,IAC9E,CAAC,EAAE,CACL;CACA,OAAO,cAAc,cAAc,OAAO,oBAAoB,CAAC,CAAC;AAClE;AAEA,IAAa,wBAAwB,KAAa,kBAChD,gBAAgB,IAAI,oBAAoB;AAE1C,IAAa,sBAAsB,IAAY,oBAA6B;CAC1E,MAAM,EAAE,kBAAkB,iBAAiB,EAAE,gBAAgB,CAAC;CAC9D,MAAM,0BAA0B,aAC7B,EAAE,uBAA2C,EAC5C,WAAW,gBAAgB,gBAAgB,SAAS,OAAO,GAC7D,IACA,CAAC,EAAE,CACL;CACA,OAAO,cAAc,cAAc,OAAO,uBAAuB,CAAC,CAAC;AACrE;AAEA,IAAa,2BAA2B,KAAa,kBACnD,mBAAmB,IAAI,oBAAoB;AAE7C,IAAM,6BAA6B,eAAmC,EACpE,mBAAmB,UAAU,gBAAgB,OAC/C;AAEA,IAAa,wBAAwB,EACnC,oBACgC,CAAC,MAAM;CACvC,MAAM,EAAE,kBAAkB,iBAAiB,EAAE,gBAAgB,CAAC;CAC9D,OAAO,cAAc,cAAc,OAAO,yBAAyB,CAAC,CAAC;AACvE"}

package/dist/es/components/Dialog/hooks/usePopoverPosition.mjs

@@ -0,0 +1,57 @@
+import { autoPlacement, autoUpdate, flip, offset, shift, size, useFloating } from "@floating-ui/react";
+//#region src/components/Dialog/hooks/usePopoverPosition.ts
+var hasResizeObserver = typeof window !== "undefined" && "ResizeObserver" in window;
+function autoMiddlewareFor(p) {
+	if (!String(p).startsWith("auto")) return null;
+	return autoPlacement({ alignment: p === "auto-start" ? "start" : p === "auto-end" ? "end" : void 0 });
+}
+function toOffsetMw(opt) {
+	if (opt == null) return null;
+	if (Array.isArray(opt)) {
+		const [crossAxis, mainAxis] = opt;
+		return offset({
+			crossAxis,
+			mainAxis
+		});
+	}
+	if (typeof opt === "number") return offset(opt);
+	return offset(opt);
+}
+function usePopoverPosition({ allowFlip = true, allowShift = true, autoUpdateOptions, fitAvailableSpace = false, freeze = false, offset, placement = "bottom-start", shiftOptions }) {
+	const autoMw = autoMiddlewareFor(placement);
+	const offsetMiddleware = toOffsetMw(offset);
+	const isSidePlacement = placement.startsWith("left") || placement.startsWith("right");
+	const mergedShiftOptions = shiftOptions ? {
+		padding: 8,
+		...shiftOptions
+	} : { padding: 8 };
+	return useFloating({
+		middleware: [
+			...offsetMiddleware ? [offsetMiddleware] : [],
+			...autoMw ? [autoMw] : allowFlip && !isSidePlacement ? [flip()] : [],
+			...allowShift ? [shift(mergedShiftOptions)] : [],
+			...fitAvailableSpace ? [size({
+				apply({ availableHeight, availableWidth, elements }) {
+					Object.assign(elements.floating.style, {
+						maxHeight: `${Math.max(0, availableHeight)}px`,
+						maxWidth: `${Math.max(0, availableWidth)}px`
+					});
+				},
+				padding: 8
+			})] : []
+		],
+		placement: String(placement).startsWith("auto") ? "bottom" : placement,
+		strategy: "fixed",
+		whileElementsMounted: freeze ? void 0 : (reference, floating, update) => autoUpdate(reference, floating, update, {
+			ancestorResize: true,
+			ancestorScroll: true,
+			animationFrame: false,
+			elementResize: hasResizeObserver,
+			...autoUpdateOptions
+		})
+	});
+}
+//#endregion
+export { usePopoverPosition };
+
+//# sourceMappingURL=usePopoverPosition.mjs.map

package/dist/es/components/Dialog/hooks/usePopoverPosition.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePopoverPosition.mjs","names":[],"sources":["../../../../../src/components/Dialog/hooks/usePopoverPosition.ts"],"sourcesContent":["import {\n  autoPlacement,\n  type AutoPlacementOptions,\n  autoUpdate,\n  flip as flipMw,\n  offset as offsetMw,\n  type Placement,\n  shift as shiftMw,\n  size as sizeMw,\n  useFloating,\n} from '@floating-ui/react';\n\nconst hasResizeObserver = typeof window !== 'undefined' && 'ResizeObserver' in window;\n\nexport type PopperLikePlacement = Placement | 'auto' | 'auto-start' | 'auto-end';\n\nfunction autoMiddlewareFor(p: PopperLikePlacement) {\n  if (!String(p).startsWith('auto')) return null;\n  const alignment: AutoPlacementOptions['alignment'] =\n    p === 'auto-start' ? 'start' : p === 'auto-end' ? 'end' : undefined;\n  return autoPlacement({ alignment });\n}\n\nexport type OffsetOpt =\n  | number\n  | { mainAxis?: number; crossAxis?: number; alignmentAxis?: number }\n  | [crossAxis: number, mainAxis: number]; // keep your tuple compat\n\nfunction toOffsetMw(opt?: OffsetOpt) {\n  if (opt == null) return null;\n  if (Array.isArray(opt)) {\n    const [crossAxis, mainAxis] = opt;\n    return offsetMw({ crossAxis, mainAxis });\n  }\n  if (typeof opt === 'number') return offsetMw(opt);\n  return offsetMw(opt);\n}\n\nexport type UsePopoverParams = {\n  placement?: PopperLikePlacement;\n  /** Add flip() when placement is not 'auto*' */\n  allowFlip?: boolean;\n  /** Keep in viewport; default true to match common popper setups */\n  allowShift?: boolean;\n  /** Extra options for Floating UI shift() middleware (merged with default padding: 8) */\n  shiftOptions?: Parameters<typeof shiftMw>[0];\n  /** The floating UI is fitted to the available space (by constraining its max size) instead of letting it overflow; default false */\n  fitAvailableSpace?: boolean;\n  /** Offset (number, object, or [crossAxis, mainAxis] tuple) */\n  offset?: OffsetOpt;\n  /**\n   * Freeze behavior like Popper's eventListeners: { scroll:false, resize:false }.\n   * If true → no autoUpdate (you can call `update()` manually).\n   */\n  freeze?: boolean;\n  /**\n   * Fine-grained control of autoUpdate triggers (only if freeze=false).\n   * Defaults match Popper's \"disabled\" example when all set to false.\n   */\n  autoUpdateOptions?: Partial<Parameters<typeof autoUpdate>[3]>;\n};\n\nexport function usePopoverPosition({\n  allowFlip = true,\n  allowShift = true,\n  autoUpdateOptions,\n  fitAvailableSpace = false,\n  freeze = false,\n  offset,\n  placement = 'bottom-start',\n  shiftOptions,\n}: UsePopoverParams) {\n  const autoMw = autoMiddlewareFor(placement);\n  const offsetMiddleware = toOffsetMw(offset);\n  const isSidePlacement = placement.startsWith('left') || placement.startsWith('right');\n  const mergedShiftOptions = shiftOptions\n    ? { padding: 8, ...shiftOptions }\n    : { padding: 8 };\n\n  const middleware = [\n    // offset first (mirrors common Popper setups)\n    ...(offsetMiddleware ? [offsetMiddleware] : []),\n\n    // choose between autoPlacement (Popper's \"auto*\") OR flip()\n    // only allow flip when not explicitly 'left*' or 'right*'\n    ...(autoMw ? [autoMw] : allowFlip && !isSidePlacement ? [flipMw()] : []),\n\n    // viewport collision adjustments\n    ...(allowShift ? [shiftMw(mergedShiftOptions)] : []),\n\n    // optional size constraining: cap the floating element to the space left in the viewport\n    // (after flip/shift) so a tall popover scrolls inside the viewport instead of overflowing it.\n    ...(fitAvailableSpace\n      ? [\n          sizeMw({\n            apply({ availableHeight, availableWidth, elements }) {\n              Object.assign(elements.floating.style, {\n                maxHeight: `${Math.max(0, availableHeight)}px`,\n                maxWidth: `${Math.max(0, availableWidth)}px`,\n              });\n            },\n            padding: 8,\n          }),\n        ]\n      : []),\n  ];\n\n  // if placement is 'auto*', seed with any static placement; autoPlacement will pick the final one\n  const seedPlacement: Placement = String(placement).startsWith('auto')\n    ? 'bottom'\n    : (placement as Placement);\n\n  return useFloating({\n    middleware,\n    placement: seedPlacement,\n    strategy: 'fixed',\n    whileElementsMounted: freeze\n      ? undefined\n      : (reference, floating, update) =>\n          autoUpdate(reference, floating, update, {\n            ancestorResize: true,\n            ancestorScroll: true,\n            animationFrame: false,\n            elementResize: hasResizeObserver,\n            ...autoUpdateOptions,\n          }),\n  });\n}\n"],"mappings":";;AAYA,IAAM,oBAAoB,OAAO,WAAW,eAAe,oBAAoB;AAI/E,SAAS,kBAAkB,GAAwB;CACjD,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,MAAM,GAAG,OAAO;CAG1C,OAAO,cAAc,EAAE,WADrB,MAAM,eAAe,UAAU,MAAM,aAAa,QAAQ,KAAA,EAC3B,CAAC;AACpC;AAOA,SAAS,WAAW,KAAiB;CACnC,IAAI,OAAO,MAAM,OAAO;CACxB,IAAI,MAAM,QAAQ,GAAG,GAAG;EACtB,MAAM,CAAC,WAAW,YAAY;EAC9B,OAAO,OAAS;GAAE;GAAW;EAAS,CAAC;CACzC;CACA,IAAI,OAAO,QAAQ,UAAU,OAAO,OAAS,GAAG;CAChD,OAAO,OAAS,GAAG;AACrB;AA0BA,SAAgB,mBAAmB,EACjC,YAAY,MACZ,aAAa,MACb,mBACA,oBAAoB,OACpB,SAAS,OACT,QACA,YAAY,gBACZ,gBACmB;CACnB,MAAM,SAAS,kBAAkB,SAAS;CAC1C,MAAM,mBAAmB,WAAW,MAAM;CAC1C,MAAM,kBAAkB,UAAU,WAAW,MAAM,KAAK,UAAU,WAAW,OAAO;CACpF,MAAM,qBAAqB,eACvB;EAAE,SAAS;EAAG,GAAG;CAAa,IAC9B,EAAE,SAAS,EAAE;CAmCjB,OAAO,YAAY;EACjB,YAAA;GAhCA,GAAI,mBAAmB,CAAC,gBAAgB,IAAI,CAAC;GAI7C,GAAI,SAAS,CAAC,MAAM,IAAI,aAAa,CAAC,kBAAkB,CAAC,KAAO,CAAC,IAAI,CAAC;GAGtE,GAAI,aAAa,CAAC,MAAQ,kBAAkB,CAAC,IAAI,CAAC;GAIlD,GAAI,oBACA,CACE,KAAO;IACL,MAAM,EAAE,iBAAiB,gBAAgB,YAAY;KACnD,OAAO,OAAO,SAAS,SAAS,OAAO;MACrC,WAAW,GAAG,KAAK,IAAI,GAAG,eAAe,EAAE;MAC3C,UAAU,GAAG,KAAK,IAAI,GAAG,cAAc,EAAE;KAC3C,CAAC;IACH;IACA,SAAS;GACX,CAAC,CACH,IACA,CAAC;EASL;EACA,WAN+B,OAAO,SAAS,CAAC,CAAC,WAAW,MAAM,IAChE,WACC;EAKH,UAAU;EACV,sBAAsB,SAClB,KAAA,KACC,WAAW,UAAU,WACpB,WAAW,WAAW,UAAU,QAAQ;GACtC,gBAAgB;GAChB,gBAAgB;GAChB,gBAAgB;GAChB,eAAe;GACf,GAAG;EACL,CAAC;CACT,CAAC;AACH"}

package/dist/es/components/Dialog/service/DialogAnchor.mjs

@@ -0,0 +1,175 @@
+import { useDialog, useDialogIsOpen } from "../hooks/useDialog.mjs";
+import { DialogPortalEntry } from "./DialogPortal.mjs";
+import { AriaLiveOutlet } from "../../Accessibility/AriaLiveOutlet.mjs";
+import { usePopoverPosition } from "../hooks/usePopoverPosition.mjs";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { FocusScope } from "@react-aria/focus";
+//#region src/components/Dialog/service/DialogAnchor.tsx
+function useDialogAnchor({ allowFlip, offset, open, placement, referenceElement, updateKey, updatePositionOnContentResize = false }) {
+	const [popperElement, setPopperElement] = useState(null);
+	const [stabilisedChosenPlacement, setStabilisedChosenPlacement] = useState(null);
+	const { placement: chosenPlacement, refs, strategy, update, x, y } = usePopoverPosition({
+		allowFlip,
+		freeze: true,
+		offset,
+		placement: stabilisedChosenPlacement ?? placement
+	});
+	if (!stabilisedChosenPlacement && popperElement && placement !== chosenPlacement) setStabilisedChosenPlacement(chosenPlacement);
+	else if (stabilisedChosenPlacement && !popperElement) setStabilisedChosenPlacement(null);
+	const frozenReferenceRef = useRef(null);
+	if (open && referenceElement && !frozenReferenceRef.current) frozenReferenceRef.current = referenceElement;
+	if (!open) frozenReferenceRef.current = null;
+	const effectiveReference = open ? frozenReferenceRef.current : referenceElement;
+	useEffect(() => {
+		refs.setReference(effectiveReference);
+	}, [effectiveReference, refs]);
+	useEffect(() => {
+		refs.setFloating(popperElement);
+	}, [popperElement, refs]);
+	useEffect(() => {
+		if (open && popperElement && effectiveReference) update?.();
+	}, [
+		open,
+		placement,
+		popperElement,
+		update,
+		updateKey,
+		effectiveReference
+	]);
+	useEffect(() => {
+		if (!popperElement || !updatePositionOnContentResize) return;
+		const resizeObserver = new ResizeObserver(update);
+		resizeObserver.observe(popperElement);
+		return () => {
+			resizeObserver.disconnect();
+		};
+	}, [
+		popperElement,
+		update,
+		updatePositionOnContentResize
+	]);
+	if (popperElement && !open) setPopperElement(null);
+	return {
+		placement: stabilisedChosenPlacement ?? chosenPlacement,
+		setPopperElement,
+		styles: {
+			left: x ?? 0,
+			position: strategy,
+			top: y ?? 0
+		}
+	};
+}
+var DialogAnchor = ({ allowFlip = true, children, className, closeOnClickOutside, closeOnEscape = true, closeTransitionMs = 0, dialogManagerId, focus = true, id, offset, placement = "auto", referenceElement = null, tabIndex, trapFocus, updateKey, updatePositionOnContentResize, ...restDivProps }) => {
+	/**
+	* Rendering lifecycle notes:
+	* - `open=true` renders dialog contents immediately.
+	* - `open=false` can keep contents mounted for `closeTransitionMs` to allow CSS exit
+	*   animations before unmount.
+	*
+	* State exposed to CSS:
+	* - `data-str-chat-dialog-state="open"` while actively open.
+	* - `data-str-chat-dialog-state="closing"` during delayed unmount window.
+	*
+	* Consumers like `ContextMenu` combine:
+	* - `data-str-chat-dialog-state` from this component, and
+	* - `data-str-chat-placement` (e.g. `top-start`, `right-end`)
+	* to select the correct closing keyframe in CSS (horizontal vs vertical roll direction).
+	* In practice, JS only toggles state and timing (`closeTransitionMs`); CSS owns the
+	* visual motion details (transform/easing), so animation behavior stays declarative.
+	*/
+	const dialog = useDialog({
+		closeOnClickOutside,
+		dialogManagerId,
+		id
+	});
+	const open = useDialogIsOpen(id, dialogManagerId);
+	const [shouldRender, setShouldRender] = useState(open);
+	const closeTimeoutRef = useRef(null);
+	const isClosing = !open && shouldRender;
+	useEffect(() => {
+		if (open) {
+			setShouldRender(true);
+			if (closeTimeoutRef.current) {
+				clearTimeout(closeTimeoutRef.current);
+				closeTimeoutRef.current = null;
+			}
+			return;
+		}
+		if (!shouldRender) return;
+		if (!closeTransitionMs) {
+			setShouldRender(false);
+			return;
+		}
+		closeTimeoutRef.current = setTimeout(() => {
+			setShouldRender(false);
+			closeTimeoutRef.current = null;
+		}, closeTransitionMs);
+	}, [
+		closeTransitionMs,
+		open,
+		shouldRender
+	]);
+	useEffect(() => () => {
+		if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);
+	}, []);
+	const { placement: chosenPlacement, setPopperElement, styles } = useDialogAnchor({
+		allowFlip,
+		offset,
+		open: shouldRender,
+		placement,
+		referenceElement,
+		updateKey,
+		updatePositionOnContentResize
+	});
+	useEffect(() => {
+		if (!open || !closeOnEscape) return;
+		const hideOnEscape = (event) => {
+			if (event.key !== "Escape" || event.defaultPrevented) return;
+			dialog?.close();
+		};
+		document.addEventListener("keyup", hideOnEscape);
+		return () => {
+			document.removeEventListener("keyup", hideOnEscape);
+		};
+	}, [
+		closeOnEscape,
+		dialog,
+		open
+	]);
+	if (!shouldRender) return null;
+	const { ["aria-describedby"]: ariaDescribedBy, ["aria-label"]: ariaLabel, ["aria-labelledby"]: ariaLabelledBy, ["aria-modal"]: ariaModal, role, ...anchorDivProps } = restDivProps;
+	const resolvedRole = trapFocus ? role ?? "dialog" : role;
+	const resolvedAriaModal = trapFocus ? true : ariaModal;
+	const resolvedAriaLabel = ariaLabelledBy ? void 0 : ariaLabel;
+	return /* @__PURE__ */ jsx(DialogPortalEntry, {
+		dialogId: id,
+		dialogManagerId,
+		children: /* @__PURE__ */ jsx(FocusScope, {
+			autoFocus: focus,
+			contain: trapFocus,
+			restoreFocus: true,
+			children: /* @__PURE__ */ jsxs("div", {
+				...anchorDivProps,
+				"aria-describedby": ariaDescribedBy,
+				"aria-label": resolvedAriaLabel,
+				"aria-labelledby": ariaLabelledBy,
+				"aria-modal": resolvedAriaModal,
+				className: clsx("str-chat__dialog-contents", className),
+				"data-str-chat-dialog-state": isClosing ? "closing" : "open",
+				"data-str-chat-placement": chosenPlacement,
+				"data-testid": "str-chat__dialog-contents",
+				ref: setPopperElement,
+				role: resolvedRole,
+				style: styles,
+				tabIndex: typeof tabIndex !== "undefined" ? tabIndex : 0,
+				children: [children, resolvedAriaModal && /* @__PURE__ */ jsx(AriaLiveOutlet, { layer: 1 })]
+			})
+		})
+	});
+};
+//#endregion
+export { DialogAnchor, useDialogAnchor };
+
+//# sourceMappingURL=DialogAnchor.mjs.map

package/dist/es/components/Dialog/service/DialogAnchor.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogAnchor.mjs","names":[],"sources":["../../../../../src/components/Dialog/service/DialogAnchor.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { ComponentProps, PropsWithChildren } from 'react';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { FocusScope } from '@react-aria/focus';\nimport { DialogPortalEntry } from './DialogPortal';\nimport { useDialog, useDialogIsOpen } from '../hooks';\nimport { type OffsetOpt, usePopoverPosition } from '../hooks/usePopoverPosition';\nimport type { PopperLikePlacement } from '../hooks';\nimport type { Placement } from '@floating-ui/react';\nimport { AriaLiveOutlet } from '../../Accessibility';\n\nexport interface DialogAnchorOptions {\n  open: boolean;\n  placement: PopperLikePlacement;\n  referenceElement: HTMLElement | null;\n  allowFlip?: boolean;\n  updateKey?: unknown;\n  updatePositionOnContentResize?: boolean;\n  offset?: OffsetOpt;\n}\n\nexport function useDialogAnchor<T extends HTMLElement>({\n  allowFlip,\n  offset,\n  open,\n  placement,\n  referenceElement,\n  updateKey,\n  updatePositionOnContentResize = false,\n}: DialogAnchorOptions) {\n  const [popperElement, setPopperElement] = useState<T | null>(null);\n  // keeps track of the first \"chosen\" placement (after popperElement is set) to avoid popper \"jumping\" to a different placement when it updates and finds a better fit; resets when popperElement is unset (!open)\n  const [stabilisedChosenPlacement, setStabilisedChosenPlacement] =\n    useState<Placement | null>(null);\n\n  const {\n    placement: chosenPlacement,\n    refs,\n    strategy,\n    update,\n    x,\n    y,\n  } = usePopoverPosition({\n    allowFlip,\n    freeze: true,\n    offset,\n    placement: stabilisedChosenPlacement ?? placement,\n  });\n\n  if (!stabilisedChosenPlacement && popperElement && placement !== chosenPlacement) {\n    setStabilisedChosenPlacement(chosenPlacement);\n  } else if (stabilisedChosenPlacement && !popperElement) {\n    setStabilisedChosenPlacement(null);\n  }\n\n  // Freeze reference when dialog opens so submenus (e.g. ContextMenu level 2+) stay aligned to the original anchor\n  const frozenReferenceRef = useRef<HTMLElement | null>(null);\n  if (open && referenceElement && !frozenReferenceRef.current) {\n    frozenReferenceRef.current = referenceElement;\n  }\n  if (!open) {\n    frozenReferenceRef.current = null;\n  }\n  const effectiveReference = open ? frozenReferenceRef.current : referenceElement;\n\n  useEffect(() => {\n    refs.setReference(effectiveReference);\n  }, [effectiveReference, refs]);\n\n  useEffect(() => {\n    refs.setFloating(popperElement);\n  }, [popperElement, refs]);\n\n  useEffect(() => {\n    if (open && popperElement && effectiveReference) {\n      // Re-run when reference becomes available (e.g. after ref is set) or when updateKey changes (e.g. submenu open)\n      // Since the popper's reference element might not be (and usually is not) visible\n      // all the time, it's safer to force popper update before showing it.\n      // update is non-null only if popperElement is non-null\n      update?.();\n    }\n  }, [open, placement, popperElement, update, updateKey, effectiveReference]);\n\n  useEffect(() => {\n    if (!popperElement || !updatePositionOnContentResize) return;\n\n    const resizeObserver = new ResizeObserver(update);\n\n    resizeObserver.observe(popperElement);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [popperElement, update, updatePositionOnContentResize]);\n\n  if (popperElement && !open) {\n    setPopperElement(null);\n  }\n\n  return {\n    placement: stabilisedChosenPlacement ?? chosenPlacement,\n    setPopperElement,\n    styles: {\n      left: x ?? 0,\n      position: strategy,\n      top: y ?? 0,\n    } as React.CSSProperties,\n  };\n}\n\nexport type DialogAnchorProps = PropsWithChildren<Partial<DialogAnchorOptions>> & {\n  /**\n   * Optional per-dialog override for outside-click dismissal.\n   * If undefined, manager-level `DialogManager.closeOnClickOutside` is used.\n   */\n  closeOnClickOutside?: boolean;\n  /**\n   * Whether pressing Escape closes the dialog. Symmetric with `closeOnClickOutside`; set to\n   * `false` for a dialog that should only be dismissed through its own close control (e.g. a\n   * long-lived inspector panel kept open while the user works elsewhere).\n   * @default true\n   */\n  closeOnEscape?: boolean;\n  id: string;\n  /**\n   * Delay (ms) before unmounting after dialog closes.\n   * Use this to keep the dialog in DOM long enough for CSS exit animations.\n   * `0` means immediate unmount (no exit-animation window).\n   */\n  closeTransitionMs?: number;\n  dialogManagerId?: string;\n  focus?: boolean;\n  trapFocus?: boolean;\n} & ComponentProps<'div'>;\n\nexport const DialogAnchor = ({\n  allowFlip = true,\n  children,\n  className,\n  closeOnClickOutside,\n  closeOnEscape = true,\n  closeTransitionMs = 0,\n  dialogManagerId,\n  focus = true,\n  id,\n  offset,\n  placement = 'auto',\n  referenceElement = null,\n  tabIndex,\n  trapFocus,\n  updateKey,\n  updatePositionOnContentResize,\n  ...restDivProps\n}: DialogAnchorProps) => {\n  /**\n   * Rendering lifecycle notes:\n   * - `open=true` renders dialog contents immediately.\n   * - `open=false` can keep contents mounted for `closeTransitionMs` to allow CSS exit\n   *   animations before unmount.\n   *\n   * State exposed to CSS:\n   * - `data-str-chat-dialog-state=\"open\"` while actively open.\n   * - `data-str-chat-dialog-state=\"closing\"` during delayed unmount window.\n   *\n   * Consumers like `ContextMenu` combine:\n   * - `data-str-chat-dialog-state` from this component, and\n   * - `data-str-chat-placement` (e.g. `top-start`, `right-end`)\n   * to select the correct closing keyframe in CSS (horizontal vs vertical roll direction).\n   * In practice, JS only toggles state and timing (`closeTransitionMs`); CSS owns the\n   * visual motion details (transform/easing), so animation behavior stays declarative.\n   */\n  const dialog = useDialog({ closeOnClickOutside, dialogManagerId, id });\n  const open = useDialogIsOpen(id, dialogManagerId);\n  const [shouldRender, setShouldRender] = useState(open);\n  const closeTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n  const isClosing = !open && shouldRender;\n\n  useEffect(() => {\n    if (open) {\n      setShouldRender(true);\n      if (closeTimeoutRef.current) {\n        clearTimeout(closeTimeoutRef.current);\n        closeTimeoutRef.current = null;\n      }\n      return;\n    }\n\n    if (!shouldRender) return;\n    if (!closeTransitionMs) {\n      setShouldRender(false);\n      return;\n    }\n\n    closeTimeoutRef.current = setTimeout(() => {\n      setShouldRender(false);\n      closeTimeoutRef.current = null;\n    }, closeTransitionMs);\n  }, [closeTransitionMs, open, shouldRender]);\n\n  useEffect(\n    () => () => {\n      if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);\n    },\n    [],\n  );\n\n  const {\n    placement: chosenPlacement,\n    setPopperElement,\n    styles,\n  } = useDialogAnchor<HTMLDivElement>({\n    allowFlip,\n    offset,\n    open: shouldRender,\n    placement,\n    referenceElement,\n    updateKey,\n    updatePositionOnContentResize,\n  });\n\n  useEffect(() => {\n    if (!open || !closeOnEscape) return;\n    const hideOnEscape = (event: KeyboardEvent) => {\n      if (event.key !== 'Escape' || event.defaultPrevented) return;\n      dialog?.close();\n    };\n\n    document.addEventListener('keyup', hideOnEscape);\n\n    return () => {\n      document.removeEventListener('keyup', hideOnEscape);\n    };\n  }, [closeOnEscape, dialog, open]);\n\n  // prevent rendering the dialog contents if the dialog should not be open / shown\n  if (!shouldRender) {\n    return null;\n  }\n\n  const {\n    ['aria-describedby']: ariaDescribedBy,\n    ['aria-label']: ariaLabel,\n    ['aria-labelledby']: ariaLabelledBy,\n    ['aria-modal']: ariaModal,\n    role,\n    ...anchorDivProps\n  } = restDivProps;\n  const resolvedRole = trapFocus ? (role ?? 'dialog') : role;\n  const resolvedAriaModal = trapFocus ? true : ariaModal;\n  const resolvedAriaLabel = ariaLabelledBy ? undefined : ariaLabel;\n\n  return (\n    <DialogPortalEntry dialogId={id} dialogManagerId={dialogManagerId}>\n      <FocusScope autoFocus={focus} contain={trapFocus} restoreFocus>\n        <div\n          {...anchorDivProps}\n          aria-describedby={ariaDescribedBy}\n          aria-label={resolvedAriaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-modal={resolvedAriaModal}\n          className={clsx('str-chat__dialog-contents', className)}\n          data-str-chat-dialog-state={isClosing ? 'closing' : 'open'}\n          data-str-chat-placement={chosenPlacement}\n          data-testid='str-chat__dialog-contents'\n          ref={setPopperElement}\n          role={resolvedRole}\n          style={styles}\n          tabIndex={typeof tabIndex !== 'undefined' ? tabIndex : 0}\n        >\n          {children}\n          {/* Render the live-region outlet inside the dialog subtree only when it\n              is an `aria-modal` dialog, so announcements are not suppressed by\n              assistive technologies. Non-modal popovers/menus skip it. */}\n          {resolvedAriaModal && <AriaLiveOutlet layer={1} />}\n        </div>\n      </FocusScope>\n    </DialogPortalEntry>\n  );\n};\n"],"mappings":"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"}