;
+const EMPTY_THEME = Object.freeze({});
+
const ModalDialogComposer = memo(({ children }: Props) => {
const [renderFunctionAndDialogInit, setRenderFunctionAndDialogInit] = useState<
RenderFunctionAndDialogInit | undefined
@@ -30,14 +33,16 @@ const ModalDialogComposer = memo(({ children }: Props) => {
{children}
{renderFunctionAndDialogInit && (
-
- {renderFunctionAndDialogInit[0]()}
-
+
+
+ {renderFunctionAndDialogInit[0]()}
+
+
)}
);
diff --git a/packages/component/src/providers/ModalDialog/private/Context.ts b/packages/component/src/providers/ModalDialog/private/Context.ts
index 7ba3a66a3c..064a6a6527 100644
--- a/packages/component/src/providers/ModalDialog/private/Context.ts
+++ b/packages/component/src/providers/ModalDialog/private/Context.ts
@@ -1,9 +1,12 @@
+import { type CSSModuleTheme } from '@msinternal/botframework-webchat-styles/react';
import { createContext, type ReactNode } from 'react';
type DialogInit = {
'aria-label'?: string;
'aria-labelledby'?: string;
className?: string;
+ /** Class names for the local names of the dialog's parts (e.g. "modal-dialog__box"), so the caller can style them. */
+ cssModuleTheme?: CSSModuleTheme | undefined;
};
type RenderFunction = () => ReactNode;
diff --git a/packages/component/src/providers/ModalDialog/private/Popover.module.css b/packages/component/src/providers/ModalDialog/private/Popover.module.css
new file mode 100644
index 0000000000..14242398d9
--- /dev/null
+++ b/packages/component/src/providers/ModalDialog/private/Popover.module.css
@@ -0,0 +1,104 @@
+/* TODO: Add a dark theme once we defined the link color and stuff for Markdown. */
+:global(.webchat) .modal-dialog {
+ font-family: var(--webchat__font--primary);
+ max-height: calc(100% - 32px);
+ max-width: calc(100% - 32px);
+ width: 100%;
+
+ @media (forced-colors: none) {
+ background-color: transparent;
+ border: 0;
+ }
+
+ /* Assume the content is being prepared, so we hide the whole dialog until content appears in the DOM. */
+ /* Use opacity to still be able to set focus on the first available control (close button). */
+ &:has(.modal-dialog__body:empty) {
+ opacity: 0;
+ }
+
+ .modal-dialog__box {
+ border-radius: 2px;
+ overflow: hidden;
+ margin: auto;
+
+ @media screen and (max-width: 639px) {
+ max-width: unset;
+ }
+
+ @media screen and (min-width: 640px) {
+ max-width: 60%;
+ min-width: calc(640px - 2em - 6px); /* Browser natively do "100% - 2em - 6px". */
+ width: 60%;
+ }
+
+ @media (forced-colors: none) {
+ /* From Power BI: */
+ /* box-shadow: 0 6.4px 14.4px rgb(0 0 0 / 13%), 0 1.2px 3.6px rgb(0 0 0 / 11%); */
+ /* From Fluent (depth-16 for teaching callouts): */
+ /* box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.14), 0px 0px 2px rgba(0, 0, 0, 0.12); */
+ background-color: White;
+ box-shadow:
+ 0px 8px 16px rgba(0, 0, 0, 0.14),
+ 0px 0px 2px rgba(0, 0, 0, 0.12);
+ }
+
+ @media (forced-colors: active) {
+ /* In high-contrast mode, we use "outline" instead of "box-shadow". */
+ outline-color: ButtonBorder;
+ outline-style: solid;
+ outline-width: 4px;
+ }
+ }
+
+ .modal-dialog__close-button-layout {
+ float: right;
+ padding: var(--webchat__padding--regular);
+ }
+
+ .modal-dialog__close-button {
+ height: 30px;
+ width: 30px;
+ padding: 0;
+
+ --webchat__component-icon--size: 16px;
+
+ @media (forced-colors: none) {
+ appearance: none;
+ background-color: transparent;
+ border-color: transparent;
+ border-radius: 4px;
+ border-style: solid;
+ border-width: 2px;
+ color: #999;
+ outline: 0;
+ }
+ }
+
+ .modal-dialog__close-button:focus {
+ @media (forced-colors: none) {
+ border-color: black;
+
+ &:active {
+ background-color: #edebe9; /* neutralLight (gray30) */
+ }
+
+ &:not(:active):hover {
+ background-color: #f3f2f1; /* neutralLighter (gray20) */
+ }
+ }
+ }
+
+ .modal-dialog__close-button-icon {
+ @media (forced-colors: none) {
+ color: #323130; /* neutralPrimary (gray160) */
+ }
+
+ @media (forced-colors: active) {
+ color: currentcolor;
+ }
+ }
+
+ .modal-dialog__body {
+ margin: calc(var(--webchat__padding--regular) * 2);
+ }
+}
diff --git a/packages/component/src/providers/ModalDialog/private/Popover.tsx b/packages/component/src/providers/ModalDialog/private/Popover.tsx
index 16d02e88aa..df46d23684 100644
--- a/packages/component/src/providers/ModalDialog/private/Popover.tsx
+++ b/packages/component/src/providers/ModalDialog/private/Popover.tsx
@@ -1,65 +1,81 @@
+import { reactNode, validateProps, type InferReactProps } from '@msinternal/botframework-webchat-react-valibot';
+import { useStyles, webChatPrefixedClassName } from '@msinternal/botframework-webchat-styles/react';
import { hooks } from 'botframework-webchat-api';
-import classNames from 'classnames';
-import React, { memo, type PropsWithChildren, useCallback, useLayoutEffect, useRef } from 'react';
+import cx from 'classnames';
+import React, { memo, useCallback, useLayoutEffect, useRef } from 'react';
+import { custom, function_, is, object, optional, pipe, readonly, string } from 'valibot';
import { ComponentIcon } from '../../../Icon';
-import useStyleSet from '../../../hooks/useStyleSet';
+
+import styles from './Popover.module.css';
const { useLocalizer } = hooks;
-type Props = Readonly<
- PropsWithChildren<{
- 'aria-label'?: string;
- 'aria-labelledby'?: string;
- className?: string;
- onDismiss?: () => void;
- }>
->;
+const modalDialogPropsSchema = pipe(
+ object({
+ 'aria-label': optional(string()),
+ 'aria-labelledby': optional(string()),
+ children: optional(reactNode()),
+ className: optional(string()),
+ onDismiss: optional(custom<() => void>(value => is(function_(), value)))
+ }),
+ readonly()
+);
+
+type ModalDialogProps = InferReactProps
;
-const ModalDialog = memo(
- ({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, children, className, onDismiss }: Props) => {
- const [{ modalDialog: modalDialogStyleSet }] = useStyleSet();
- const dialogRef = useRef(null);
- const localize = useLocalizer();
+function ModalDialog(props: ModalDialogProps) {
+ const {
+ 'aria-label': ariaLabel,
+ 'aria-labelledby': ariaLabelledBy,
+ children,
+ className,
+ onDismiss
+ } = validateProps(modalDialogPropsSchema, props);
- const closeButtonAlt = localize('CLOSE_BUTTON_ALT');
+ // Keeps the "webchat__modal-dialog" class names.
+ const classNames = useStyles(styles, webChatPrefixedClassName);
+ const dialogRef = useRef(null);
+ const localize = useLocalizer();
- const handleCloseButtonClick = useCallback(() => dialogRef.current?.close(), [dialogRef]);
+ const closeButtonAlt = localize('CLOSE_BUTTON_ALT');
- useLayoutEffect(() => dialogRef.current?.showModal(), [dialogRef]);
+ const handleCloseButtonClick = useCallback(() => dialogRef.current?.close(), [dialogRef]);
- return (
-