@khanacademy/wonder-blocks-modal 8.1.9 → 8.2.1

package/.turbo/turbo-build$colon$css.log

@@ -1,5 +1,5 @@
 
-> @khanacademy/wonder-blocks-modal@8.1.9 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-modal
+> @khanacademy/wonder-blocks-modal@8.2.1 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-modal
 > pnpm exec wonder-blocks-tokens .
 
 CSS variables generated successfully in: /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-modal/dist/css

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @khanacademy/wonder-blocks-modal
 
+## 8.2.1
+
+### Patch Changes
+
+- Updated dependencies [1334e74]
+    - @khanacademy/wonder-blocks-core@12.4.0
+    - @khanacademy/wonder-blocks-breadcrumbs@3.1.32
+    - @khanacademy/wonder-blocks-icon-button@10.3.16
+    - @khanacademy/wonder-blocks-layout@3.1.32
+    - @khanacademy/wonder-blocks-typography@4.2.17
+
+## 8.2.0
+
+### Minor Changes
+
+- 72e9eed: Add new FlexibleModal variant for more flexible implementations
+
 ## 8.1.9
 
 ### Patch Changes

package/dist/components/flexible-dialog.d.ts

@@ -0,0 +1,99 @@
+import * as React from "react";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+type AccessibleDialogProps = {
+    title: React.ReactElement | string;
+    "aria-label"?: never;
+    "aria-labelledby"?: string;
+} | {
+    title?: never;
+    "aria-label": string;
+    "aria-labelledby"?: never;
+} | {
+    title?: never;
+    "aria-label"?: never;
+    "aria-labelledby": string;
+};
+type Props = AccessibleDialogProps & {
+    /**
+     * An optional id parameter for the main heading. If one is not provided,
+     * an ID will be generated.
+     */
+    titleId?: string;
+    /**
+     * The content of the modal. Supports a render prop for placing the title in a slot.
+     */
+    content: React.ReactElement | ((slots: RenderProps) => React.ReactElement);
+    /**
+     * Called when the close button is clicked.
+     *
+     * If you're using `ModalLauncher`, you probably shouldn't use this prop!
+     * Instead, to listen for when the modal closes, add an `onClose` handler
+     * to the `ModalLauncher`.  Doing so will result in a console.warn().
+     */
+    onClose?: () => unknown;
+    /**
+     * When true, the close button is shown; otherwise, the close button is not shown.
+     */
+    closeButtonVisible?: boolean;
+    /**
+     * When set, overrides the default role value. Default role is "dialog"
+     * Roles other than dialog and alertdialog aren't appropriate for this
+     * component
+     */
+    role?: "dialog" | "alertdialog";
+    /**
+     * Optional custom styles.
+     */
+    styles?: {
+        root?: StyleType;
+        panel?: StyleType;
+        closeButton?: StyleType;
+    };
+    /**
+     * Test ID used for e2e testing. This ID will be passed down to the Dialog.
+     */
+    testId?: string;
+    /**
+     * The ID of the content describing this dialog, if applicable.
+     */
+    "aria-describedby"?: string;
+};
+type RenderProps = {
+    title: React.ReactNode | string;
+};
+/**
+ * A more flexible modal variant with fewer layout constraints. It can receive
+ * a custom background (image or color), a title for the main heading, and that
+ * title can optionally render in the content area through a render prop.
+ *
+ * One of the following is required for labeling the dialog:
+ * - title content (React element or string)
+ * - aria-label (string)
+ * - aria-labelledby (string ID reference)
+ *
+ * ### Usage
+ *
+ * ```jsx
+ * import {FlexibleDialog} from "@khanacademy/wonder-blocks-modal";
+ * import {BodyText} from "@khanacademy/wonder-blocks-typography";
+ *
+ * <FlexibleDialog
+ *     title={<Heading size="xxlarge" id="main-heading">Select mission</Heading>}
+ *     content={
+ *         <BodyText>
+ *             {`Lorem ipsum dolor sit amet, consectetur adipiscing
+ *             elit, sed do eiusmod tempor incididunt ut labore et
+ *             dolore magna aliqua. Ut enim ad minim veniam,
+ *             quis nostrud exercitation ullamco laboris nisi ut
+ *             aliquip ex ea commodo consequat. Duis aute irure
+ *             dolor in reprehenderit in voluptate velit esse
+ *             cillum dolore eu fugiat nulla pariatur. Excepteur
+ *             sint occaecat cupidatat non proident, sunt in culpa
+ *             qui officia deserunt mollit anim id est.`}
+ *         </BodyText>
+ *     }
+ * />
+ * ```
+ */
+declare const FlexibleDialog: ({ onClose, title, content, styles, closeButtonVisible, testId, titleId, role, ...accessibilityProps }: Props) => React.ReactElement;
+export default FlexibleDialog;

package/dist/components/flexible-panel.d.ts

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { PropsFor } from "@khanacademy/wonder-blocks-core";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+import ModalContent from "./modal-content";
+type RenderProps = {
+    title: React.ReactNode | string;
+};
+type Props = {
+    /**
+     * The main heading of the FlexiblePanel. Used to label the dialog.
+     */
+    title?: React.ReactNode | string;
+    /**
+     * The main contents of the FlexiblePanel. All other parts of the panel
+     * are positioned around it.
+     */
+    content: React.ReactElement<PropsFor<typeof ModalContent>> | ((slots: RenderProps) => React.ReactElement) | React.ReactElement;
+    /**
+     * When true, the close button is shown; otherwise, the close button is not shown.
+     */
+    closeButtonVisible: boolean;
+    /**
+     * Any optional styling to apply to the root (panel background) and close button.
+     */
+    styles?: {
+        root?: StyleType;
+        closeButton?: StyleType;
+    };
+    /**
+     * Called when the close button is clicked.
+     *
+     * If you're using `ModalLauncher`, you should not use this prop!
+     * Instead, to listen for when the modal closes, add an `onClose` handler
+     * to the `ModalLauncher`.  Doing so will throw an error.
+     */
+    onClose?: () => unknown;
+    /**
+     * Test ID used for e2e testing.
+     *
+     * In this case, this `testId` comes from the `testId` prop defined in the
+     * Dialog variant (e.g. FlexibleDialog).
+     */
+    testId?: string;
+};
+/**
+ * FlexiblePanel is the content container.
+ *
+ * **Implementation notes:**
+ *
+ * If you are creating a custom Dialog, make sure to follow these guidelines:
+ * - Make sure to add this component inside the [FlexibleDialog](/#flexibledialog).
+ * - If you need to create e2e tests, make sure to pass a `testId` prop. This
+ *   will be passed down to this component using a sufix: e.g.
+ *   `some-random-id-FlexiblePanel`. This scope will be propagated to the
+ *   CloseButton element as well: e.g. `some-random-id-CloseButton`.
+ *
+ * ```js
+ * <FlexibleDialog>
+ *      <FlexiblePanel content={"custom content goes here"} />
+ * </FlexibleDialog>
+ * ```
+ */
+declare function FlexiblePanel({ closeButtonVisible, content, title, onClose, styles, testId, }: Props): React.JSX.Element;
+declare namespace FlexiblePanel {
+    var defaultProps: {
+        closeButtonVisible: boolean;
+        scrollOverflow: boolean;
+    };
+}
+export default FlexiblePanel;

package/dist/components/modal-dialog.d.ts

@@ -31,6 +31,11 @@ type Props = {
      * Test ID used for e2e testing.
      */
     testId?: string;
+    /**
+     * The accessible name of dialog.
+     * See WCAG 2.1: 4.1.2 Name, Role, Value
+     */
+    "aria-label"?: string;
     /**
      * The ID of the title labelling this dialog. Required.
      * See WCAG 2.1: 4.1.2 Name, Role, Value

package/dist/es/index.js

@@ -1,8 +1,8 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { View, Id } from '@khanacademy/wonder-blocks-core';
 import { StyleSheet } from 'aphrodite';
-import { border, sizing, mapValuesToCssVars, semanticColor } from '@khanacademy/wonder-blocks-tokens';
+import { border, sizing, mapValuesToCssVars, semanticColor, breakpoint } from '@khanacademy/wonder-blocks-tokens';
 import { Heading, BodyText } from '@khanacademy/wonder-blocks-typography';
 import * as ReactDOM from 'react-dom';
 import { withActionScheduler } from '@khanacademy/wonder-blocks-timing';
@@ -15,7 +15,7 @@ const theme$1={root:{border:{radius:border.radius.radius_040}},dialog:{layout:{p
 
 var theme = mapValuesToCssVars(theme$1,"--wb-c-modal-");
 
-const ModalDialog=React.forwardRef(function ModalDialog(props,ref){const{above,below,role="dialog",style,children,testId,"aria-labelledby":ariaLabelledBy,"aria-describedby":ariaDescribedBy}=props;return jsxs(View,{style:[styles$6.wrapper,style],children:[below&&jsx(View,{style:styles$6.below,children:below}),jsx(View,{role:role,"aria-modal":"true","aria-labelledby":ariaLabelledBy,"aria-describedby":ariaDescribedBy,ref:ref,style:styles$6.dialog,testId:testId,children:children}),above&&jsx(View,{style:styles$6.above,children:above})]})});const small$2="@media (max-width: 767px)";const styles$6=StyleSheet.create({wrapper:{color:semanticColor.core.foreground.neutral.strong,flexDirection:"row",alignItems:"stretch",width:"100%",height:"100%",position:"relative",boxShadow:theme.dialog.shadow.default,borderRadius:theme.root.border.radius,[small$2]:{padding:theme.dialog.layout.padding,flexDirection:"column"}},dialog:{width:"100%",height:"100%",borderRadius:theme.root.border.radius,overflow:"hidden"},above:{pointerEvents:"none",position:"absolute",top:0,left:0,bottom:0,right:0,zIndex:1},below:{pointerEvents:"none",position:"absolute",top:0,left:0,bottom:0,right:0,zIndex:-1}});ModalDialog.displayName="ModalDialog";
+const ModalDialog=React.forwardRef(function ModalDialog(props,ref){const{above,below,role="dialog",style,children,testId,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,"aria-describedby":ariaDescribedBy}=props;return jsxs(View,{style:[styles$6.wrapper,style],children:[below&&jsx(View,{style:styles$6.below,children:below}),jsx(View,{role:role,"aria-modal":"true","aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,"aria-describedby":ariaDescribedBy,ref:ref,style:styles$6.dialog,testId:testId,children:children}),above&&jsx(View,{style:styles$6.above,children:above})]})});const small$2="@media (max-width: 767px)";const styles$6=StyleSheet.create({wrapper:{color:semanticColor.core.foreground.neutral.strong,flexDirection:"row",alignItems:"stretch",width:"100%",height:"100%",position:"relative",boxShadow:theme.dialog.shadow.default,borderRadius:theme.root.border.radius,[small$2]:{padding:theme.dialog.layout.padding,flexDirection:"column"}},dialog:{width:"100%",height:"100%",borderRadius:theme.root.border.radius,overflow:"hidden"},above:{pointerEvents:"none",position:"absolute",top:0,left:0,bottom:0,right:0,zIndex:1},below:{pointerEvents:"none",position:"absolute",top:0,left:0,bottom:0,right:0,zIndex:-1}});ModalDialog.displayName="ModalDialog";
 
 function ModalFooter({children}){return jsx(View,{style:styles$5.footer,children:children})}ModalFooter.__IS_MODAL_FOOTER__=true;ModalFooter.isComponentOf=instance=>{return instance&&instance.type&&instance.type.__IS_MODAL_FOOTER__};const styles$5=StyleSheet.create({footer:{flex:"0 0 auto",boxSizing:"border-box",minHeight:sizing.size_640,paddingInline:theme.footer.layout.padding.inline,paddingBlock:theme.footer.layout.padding.block,display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"flex-end",boxShadow:`0px -1px 0px ${semanticColor.core.border.neutral.subtle}`}});
 
@@ -43,6 +43,10 @@ function ModalPanel({closeButtonVisible=true,scrollOverflow=true,content,footer,
 
 class OnePaneDialog extends React.Component{renderHeader(uniqueId){const{title,breadcrumbs=undefined,subtitle=undefined,testId}=this.props;if(breadcrumbs){return jsx(ModalHeader,{title:title,breadcrumbs:breadcrumbs,titleId:uniqueId,testId:testId&&`${testId}-header`})}else if(subtitle){return jsx(ModalHeader,{title:title,subtitle:subtitle,titleId:uniqueId,testId:testId&&`${testId}-header`})}else {return jsx(ModalHeader,{title:title,titleId:uniqueId,testId:testId&&`${testId}-header`})}}render(){const{onClose,footer,content,above,below,style,closeButtonVisible,testId,titleId,role,"aria-describedby":ariaDescribedBy}=this.props;return jsx(MediaLayout,{styleSheets:styleSheets,children:({styles})=>jsx(Id,{id:titleId,children:uniqueId=>jsx(ModalDialog,{style:[styles.dialog,style],above:above,below:below,testId:testId,"aria-labelledby":uniqueId,"aria-describedby":ariaDescribedBy,role:role,children:jsx(ModalPanel,{onClose:onClose,header:this.renderHeader(uniqueId),content:content,footer:footer,closeButtonVisible:closeButtonVisible,testId:testId})})})})}}OnePaneDialog.defaultProps={closeButtonVisible:true};const styleSheets={small:StyleSheet.create({dialog:{width:"100%",height:"100%",overflow:"hidden"}}),mdOrLarger:StyleSheet.create({dialog:{width:"93.75%",maxWidth:576,height:"81.25%",maxHeight:624}})};
 
+function FlexiblePanel({closeButtonVisible=true,content,title,onClose,styles,testId}){const renderMainContent=React.useCallback(()=>{const contentNode=typeof content==="function"?content({title}):jsxs(Fragment,{children:[title,content]});const mainContent=ModalContent.isComponentOf(contentNode)?contentNode:jsx(ModalContent,{children:contentNode});if(!mainContent){return mainContent}return React.cloneElement(mainContent,{style:[mainContent.props.style]})},[title,content]);const mainContent=renderMainContent();const defaultBackgroundStyle={backgroundColor:semanticColor.surface.primary};const combinedBackgroundStyles={...defaultBackgroundStyle,...styles?.root};return jsxs(View,{style:[componentStyles$1.wrapper,combinedBackgroundStyles],testId:testId&&`${testId}-panel`,children:[closeButtonVisible&&jsx(CloseButton,{onClick:onClose,style:[componentStyles$1.closeButton,styles?.closeButton],testId:testId&&`${testId}-close`}),mainContent]})}FlexiblePanel.defaultProps={closeButtonVisible:true,scrollOverflow:true};const componentStyles$1=StyleSheet.create({wrapper:{flex:"1 1 auto",flexDirection:"column",boxSizing:"border-box",overflow:"hidden",height:"100%",width:"100%"},closeButton:{position:"absolute",right:theme.closeButton.layout.gapRight,top:theme.closeButton.layout.gapTop,zIndex:1,":focus":focusStyles.focus[":focus-visible"]}});
+
+const FlexibleDialog=({onClose,title,content,styles,closeButtonVisible=true,testId,titleId,role,...accessibilityProps})=>{const uniqueId=React.useId();const headingId=titleId??uniqueId;const renderedTitle=title==null?null:typeof title==="string"?jsx(Heading,{id:headingId,children:title}):React.cloneElement(title,{id:headingId,testId:"title-heading-wrapper"});return jsx(ModalDialog,{style:[componentStyles.dialog,styles?.root],testId:testId,"aria-label":accessibilityProps["aria-label"],"aria-labelledby":headingId,"aria-describedby":accessibilityProps["aria-describedby"],role:role,children:jsx(FlexiblePanel,{styles:{root:styles?.panel},onClose:onClose,title:renderedTitle,content:content,closeButtonVisible:closeButtonVisible,testId:testId})})};const componentStyles=StyleSheet.create({dialog:{width:"93.75%",maxWidth:576,height:"auto",maxHeight:"100vh",position:"relative",overflow:"auto",[breakpoint.mediaQuery.sm]:{width:"100%",height:"100vh",maxHeight:"100vh"}}});
+
 function maybeGetNextAncestorModalLauncherPortal(element){let candidateElement=element&&element.parentElement;while(candidateElement&&!candidateElement.hasAttribute(ModalLauncherPortalAttributeName)){candidateElement=candidateElement.parentElement;}return candidateElement}function maybeGetPortalMountedModalHostElement(element){return maybeGetNextAncestorModalLauncherPortal(element)}
 
-export { ModalDialog, ModalFooter, ModalHeader, modalLauncher as ModalLauncher, ModalPanel, OnePaneDialog, maybeGetPortalMountedModalHostElement };
+export { FlexibleDialog, ModalDialog, ModalFooter, ModalHeader, modalLauncher as ModalLauncher, ModalPanel, OnePaneDialog, maybeGetPortalMountedModalHostElement };

package/dist/index.d.ts

@@ -4,5 +4,6 @@ import ModalHeader from "./components/modal-header";
 import ModalLauncher from "./components/modal-launcher";
 import ModalPanel from "./components/modal-panel";
 import OnePaneDialog from "./components/one-pane-dialog";
+import FlexibleDialog from "./components/flexible-dialog";
 import maybeGetPortalMountedModalHostElement from "./util/maybe-get-portal-mounted-modal-host-element";
-export { ModalHeader, ModalFooter, ModalDialog, ModalPanel, ModalLauncher, OnePaneDialog, maybeGetPortalMountedModalHostElement, };
+export { ModalHeader, ModalFooter, ModalDialog, ModalPanel, ModalLauncher, OnePaneDialog, FlexibleDialog, maybeGetPortalMountedModalHostElement, };

package/dist/index.js

@@ -44,7 +44,7 @@ const theme$1={root:{border:{radius:wonderBlocksTokens.border.radius.radius_040}
 
 var theme = wonderBlocksTokens.mapValuesToCssVars(theme$1,"--wb-c-modal-");
 
-const ModalDialog=React__namespace.forwardRef(function ModalDialog(props,ref){const{above,below,role="dialog",style,children,testId,"aria-labelledby":ariaLabelledBy,"aria-describedby":ariaDescribedBy}=props;return jsxRuntime.jsxs(wonderBlocksCore.View,{style:[styles$6.wrapper,style],children:[below&&jsxRuntime.jsx(wonderBlocksCore.View,{style:styles$6.below,children:below}),jsxRuntime.jsx(wonderBlocksCore.View,{role:role,"aria-modal":"true","aria-labelledby":ariaLabelledBy,"aria-describedby":ariaDescribedBy,ref:ref,style:styles$6.dialog,testId:testId,children:children}),above&&jsxRuntime.jsx(wonderBlocksCore.View,{style:styles$6.above,children:above})]})});const small$2="@media (max-width: 767px)";const styles$6=aphrodite.StyleSheet.create({wrapper:{color:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong,flexDirection:"row",alignItems:"stretch",width:"100%",height:"100%",position:"relative",boxShadow:theme.dialog.shadow.default,borderRadius:theme.root.border.radius,[small$2]:{padding:theme.dialog.layout.padding,flexDirection:"column"}},dialog:{width:"100%",height:"100%",borderRadius:theme.root.border.radius,overflow:"hidden"},above:{pointerEvents:"none",position:"absolute",top:0,left:0,bottom:0,right:0,zIndex:1},below:{pointerEvents:"none",position:"absolute",top:0,left:0,bottom:0,right:0,zIndex:-1}});ModalDialog.displayName="ModalDialog";
+const ModalDialog=React__namespace.forwardRef(function ModalDialog(props,ref){const{above,below,role="dialog",style,children,testId,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,"aria-describedby":ariaDescribedBy}=props;return jsxRuntime.jsxs(wonderBlocksCore.View,{style:[styles$6.wrapper,style],children:[below&&jsxRuntime.jsx(wonderBlocksCore.View,{style:styles$6.below,children:below}),jsxRuntime.jsx(wonderBlocksCore.View,{role:role,"aria-modal":"true","aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,"aria-describedby":ariaDescribedBy,ref:ref,style:styles$6.dialog,testId:testId,children:children}),above&&jsxRuntime.jsx(wonderBlocksCore.View,{style:styles$6.above,children:above})]})});const small$2="@media (max-width: 767px)";const styles$6=aphrodite.StyleSheet.create({wrapper:{color:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong,flexDirection:"row",alignItems:"stretch",width:"100%",height:"100%",position:"relative",boxShadow:theme.dialog.shadow.default,borderRadius:theme.root.border.radius,[small$2]:{padding:theme.dialog.layout.padding,flexDirection:"column"}},dialog:{width:"100%",height:"100%",borderRadius:theme.root.border.radius,overflow:"hidden"},above:{pointerEvents:"none",position:"absolute",top:0,left:0,bottom:0,right:0,zIndex:1},below:{pointerEvents:"none",position:"absolute",top:0,left:0,bottom:0,right:0,zIndex:-1}});ModalDialog.displayName="ModalDialog";
 
 function ModalFooter({children}){return jsxRuntime.jsx(wonderBlocksCore.View,{style:styles$5.footer,children:children})}ModalFooter.__IS_MODAL_FOOTER__=true;ModalFooter.isComponentOf=instance=>{return instance&&instance.type&&instance.type.__IS_MODAL_FOOTER__};const styles$5=aphrodite.StyleSheet.create({footer:{flex:"0 0 auto",boxSizing:"border-box",minHeight:wonderBlocksTokens.sizing.size_640,paddingInline:theme.footer.layout.padding.inline,paddingBlock:theme.footer.layout.padding.block,display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"flex-end",boxShadow:`0px -1px 0px ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`}});
 
@@ -72,8 +72,13 @@ function ModalPanel({closeButtonVisible=true,scrollOverflow=true,content,footer,
 
 class OnePaneDialog extends React__namespace.Component{renderHeader(uniqueId){const{title,breadcrumbs=undefined,subtitle=undefined,testId}=this.props;if(breadcrumbs){return jsxRuntime.jsx(ModalHeader,{title:title,breadcrumbs:breadcrumbs,titleId:uniqueId,testId:testId&&`${testId}-header`})}else if(subtitle){return jsxRuntime.jsx(ModalHeader,{title:title,subtitle:subtitle,titleId:uniqueId,testId:testId&&`${testId}-header`})}else {return jsxRuntime.jsx(ModalHeader,{title:title,titleId:uniqueId,testId:testId&&`${testId}-header`})}}render(){const{onClose,footer,content,above,below,style,closeButtonVisible,testId,titleId,role,"aria-describedby":ariaDescribedBy}=this.props;return jsxRuntime.jsx(wonderBlocksLayout.MediaLayout,{styleSheets:styleSheets,children:({styles})=>jsxRuntime.jsx(wonderBlocksCore.Id,{id:titleId,children:uniqueId=>jsxRuntime.jsx(ModalDialog,{style:[styles.dialog,style],above:above,below:below,testId:testId,"aria-labelledby":uniqueId,"aria-describedby":ariaDescribedBy,role:role,children:jsxRuntime.jsx(ModalPanel,{onClose:onClose,header:this.renderHeader(uniqueId),content:content,footer:footer,closeButtonVisible:closeButtonVisible,testId:testId})})})})}}OnePaneDialog.defaultProps={closeButtonVisible:true};const styleSheets={small:aphrodite.StyleSheet.create({dialog:{width:"100%",height:"100%",overflow:"hidden"}}),mdOrLarger:aphrodite.StyleSheet.create({dialog:{width:"93.75%",maxWidth:576,height:"81.25%",maxHeight:624}})};
 
+function FlexiblePanel({closeButtonVisible=true,content,title,onClose,styles,testId}){const renderMainContent=React__namespace.useCallback(()=>{const contentNode=typeof content==="function"?content({title}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[title,content]});const mainContent=ModalContent.isComponentOf(contentNode)?contentNode:jsxRuntime.jsx(ModalContent,{children:contentNode});if(!mainContent){return mainContent}return React__namespace.cloneElement(mainContent,{style:[mainContent.props.style]})},[title,content]);const mainContent=renderMainContent();const defaultBackgroundStyle={backgroundColor:wonderBlocksTokens.semanticColor.surface.primary};const combinedBackgroundStyles={...defaultBackgroundStyle,...styles?.root};return jsxRuntime.jsxs(wonderBlocksCore.View,{style:[componentStyles$1.wrapper,combinedBackgroundStyles],testId:testId&&`${testId}-panel`,children:[closeButtonVisible&&jsxRuntime.jsx(CloseButton,{onClick:onClose,style:[componentStyles$1.closeButton,styles?.closeButton],testId:testId&&`${testId}-close`}),mainContent]})}FlexiblePanel.defaultProps={closeButtonVisible:true,scrollOverflow:true};const componentStyles$1=aphrodite.StyleSheet.create({wrapper:{flex:"1 1 auto",flexDirection:"column",boxSizing:"border-box",overflow:"hidden",height:"100%",width:"100%"},closeButton:{position:"absolute",right:theme.closeButton.layout.gapRight,top:theme.closeButton.layout.gapTop,zIndex:1,":focus":wonderBlocksStyles.focusStyles.focus[":focus-visible"]}});
+
+const FlexibleDialog=({onClose,title,content,styles,closeButtonVisible=true,testId,titleId,role,...accessibilityProps})=>{const uniqueId=React__namespace.useId();const headingId=titleId??uniqueId;const renderedTitle=title==null?null:typeof title==="string"?jsxRuntime.jsx(wonderBlocksTypography.Heading,{id:headingId,children:title}):React__namespace.cloneElement(title,{id:headingId,testId:"title-heading-wrapper"});return jsxRuntime.jsx(ModalDialog,{style:[componentStyles.dialog,styles?.root],testId:testId,"aria-label":accessibilityProps["aria-label"],"aria-labelledby":headingId,"aria-describedby":accessibilityProps["aria-describedby"],role:role,children:jsxRuntime.jsx(FlexiblePanel,{styles:{root:styles?.panel},onClose:onClose,title:renderedTitle,content:content,closeButtonVisible:closeButtonVisible,testId:testId})})};const componentStyles=aphrodite.StyleSheet.create({dialog:{width:"93.75%",maxWidth:576,height:"auto",maxHeight:"100vh",position:"relative",overflow:"auto",[wonderBlocksTokens.breakpoint.mediaQuery.sm]:{width:"100%",height:"100vh",maxHeight:"100vh"}}});
+
 function maybeGetNextAncestorModalLauncherPortal(element){let candidateElement=element&&element.parentElement;while(candidateElement&&!candidateElement.hasAttribute(ModalLauncherPortalAttributeName)){candidateElement=candidateElement.parentElement;}return candidateElement}function maybeGetPortalMountedModalHostElement(element){return maybeGetNextAncestorModalLauncherPortal(element)}
 
+exports.FlexibleDialog = FlexibleDialog;
 exports.ModalDialog = ModalDialog;
 exports.ModalFooter = ModalFooter;
 exports.ModalHeader = ModalHeader;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-modal",
-  "version": "8.1.9",
+  "version": "8.2.1",
   "design": "v2",
   "publishConfig": {
     "access": "public"
@@ -20,14 +20,14 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@khanacademy/wonder-blocks-breadcrumbs": "3.1.31",
-    "@khanacademy/wonder-blocks-core": "12.3.0",
-    "@khanacademy/wonder-blocks-icon-button": "10.3.15",
-    "@khanacademy/wonder-blocks-layout": "3.1.31",
+    "@khanacademy/wonder-blocks-breadcrumbs": "3.1.32",
+    "@khanacademy/wonder-blocks-core": "12.4.0",
+    "@khanacademy/wonder-blocks-icon-button": "10.3.16",
+    "@khanacademy/wonder-blocks-layout": "3.1.32",
     "@khanacademy/wonder-blocks-styles": "0.2.27",
     "@khanacademy/wonder-blocks-timing": "7.0.2",
     "@khanacademy/wonder-blocks-tokens": "12.0.2",
-    "@khanacademy/wonder-blocks-typography": "4.2.16"
+    "@khanacademy/wonder-blocks-typography": "4.2.17"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",