@khanacademy/wonder-blocks-modal 8.0.0 → 8.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/.turbo/turbo-build$colon$css.log +1 -1
  2. package/CHANGELOG.md +28 -0
  3. package/dist/components/one-pane-dialog.d.ts +3 -3
  4. package/dist/css/vars.css +30 -12
  5. package/dist/es/index.js +9 -9
  6. package/dist/index.js +7 -7
  7. package/dist/theme/default.d.ts +34 -20
  8. package/dist/theme/index.d.ts +34 -20
  9. package/dist/theme/thunderblocks.d.ts +56 -0
  10. package/package.json +8 -8
package/.turbo/turbo-build$colon$css.log CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- > @khanacademy/wonder-blocks-modal@8.0.0 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-modal
2
+ > @khanacademy/wonder-blocks-modal@8.1.0 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-modal
3
3
  > pnpm exec wonder-blocks-tokens .
4
4
 
5
5
  CSS variables generated successfully in: /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-modal/dist/css
package/CHANGELOG.md CHANGED
@@ -1,5 +1,33 @@
1
1
  # @khanacademy/wonder-blocks-modal
2
2
 
3
+ ## 8.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - e457d8c: Adds ThunderBlocks theme to modal package. Updates typography to use BodyText and Heading. Removes Strut uses.
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies [e457d8c]
12
+ - @khanacademy/wonder-blocks-tokens@11.2.0
13
+ - @khanacademy/wonder-blocks-breadcrumbs@3.1.22
14
+ - @khanacademy/wonder-blocks-icon-button@10.3.6
15
+ - @khanacademy/wonder-blocks-layout@3.1.22
16
+ - @khanacademy/wonder-blocks-styles@0.2.18
17
+ - @khanacademy/wonder-blocks-typography@4.2.7
18
+
19
+ ## 8.0.1
20
+
21
+ ### Patch Changes
22
+
23
+ - Updated dependencies [f26858a]
24
+ - @khanacademy/wonder-blocks-tokens@11.1.1
25
+ - @khanacademy/wonder-blocks-breadcrumbs@3.1.21
26
+ - @khanacademy/wonder-blocks-icon-button@10.3.5
27
+ - @khanacademy/wonder-blocks-layout@3.1.21
28
+ - @khanacademy/wonder-blocks-styles@0.2.17
29
+ - @khanacademy/wonder-blocks-typography@4.2.6
30
+
3
31
  ## 8.0.0
4
32
 
5
33
  ### Major Changes
package/dist/components/one-pane-dialog.d.ts CHANGED
@@ -96,12 +96,12 @@ type DefaultProps = {
96
96
  *
97
97
  * ```jsx
98
98
  * import {OnePaneDialog} from "@khanacademy/wonder-blocks-modal";
99
- * import {Body} from "@khanacademy/wonder-blocks-typography";
99
+ * import {BodyText} from "@khanacademy/wonder-blocks-typography";
100
100
  *
101
101
  * <OnePaneDialog
102
102
  * title="Some title"
103
103
  * content={
104
- * <Body>
104
+ * <BodyText>
105
105
  * {`Lorem ipsum dolor sit amet, consectetur adipiscing
106
106
  * elit, sed do eiusmod tempor incididunt ut labore et
107
107
  * dolore magna aliqua. Ut enim ad minim veniam,
@@ -111,7 +111,7 @@ type DefaultProps = {
111
111
  * cillum dolore eu fugiat nulla pariatur. Excepteur
112
112
  * sint occaecat cupidatat non proident, sunt in culpa
113
113
  * qui officia deserunt mollit anim id est.`}
114
- * </Body>
114
+ * </BodyText>
115
115
  * }
116
116
  * />
117
117
  * ```
package/dist/css/vars.css CHANGED
@@ -1,13 +1,31 @@
1
1
  :root {--wb-c-modal-root-border-radius: var(--wb-border-radius-radius_040);
2
- --wb-c-modal-dialog-spacing-padding: var(--wb-sizing-size_160);
3
- --wb-c-modal-footer-color-border: var(--wb-semanticColor-core-border-neutral-subtle);
4
- --wb-c-modal-header-color-border: var(--wb-semanticColor-core-border-neutral-subtle);
5
- --wb-c-modal-header-color-secondary: var(--wb-semanticColor-text-secondary);
6
- --wb-c-modal-header-spacing-paddingBlockMd: var(--wb-sizing-size_240);
7
- --wb-c-modal-header-spacing-paddingInlineMd: var(--wb-sizing-size_320);
8
- --wb-c-modal-header-spacing-paddingInlineSm: var(--wb-sizing-size_160);
9
- --wb-c-modal-header-spacing-gap: var(--wb-sizing-size_080);
10
- --wb-c-modal-header-spacing-titleGapMd: var(--wb-sizing-size_160);
11
- --wb-c-modal-header-spacing-titleGapSm: var(--wb-sizing-size_320);
12
- --wb-c-modal-panel-spacing-gap: var(--wb-sizing-size_320);
13
- --wb-c-modal-closeButton-spacing-gap: var(--wb-sizing-size_080);}
2
+ --wb-c-modal-dialog-layout-padding: var(--wb-sizing-size_160);
3
+ --wb-c-modal-dialog-shadow-default: none;
4
+ --wb-c-modal-header-layout-padding-block: var(--wb-sizing-size_240);
5
+ --wb-c-modal-header-layout-padding-inline-default: var(--wb-sizing-size_320);
6
+ --wb-c-modal-header-layout-padding-inline-small: var(--wb-sizing-size_160);
7
+ --wb-c-modal-header-layout-gap-default: var(--wb-sizing-size_080);
8
+ --wb-c-modal-header-layout-gap-title-default: var(--wb-sizing-size_160);
9
+ --wb-c-modal-header-layout-gap-title-small: var(--wb-sizing-size_320);
10
+ --wb-c-modal-panel-layout-gap-default: var(--wb-sizing-size_320);
11
+ --wb-c-modal-panel-layout-gap-small: var(--wb-sizing-size_160);
12
+ --wb-c-modal-footer-layout-padding-inline: var(--wb-sizing-size_160);
13
+ --wb-c-modal-footer-layout-padding-block: var(--wb-sizing-size_080);
14
+ --wb-c-modal-closeButton-layout-gapRight: var(--wb-sizing-size_080);
15
+ --wb-c-modal-closeButton-layout-gapTop: var(--wb-sizing-size_080);}
16
+
17
+ [data-wb-theme='thunderblocks'] {--wb-c-modal-root-border-radius: var(--wb-border-radius-radius_120);
18
+ --wb-c-modal-dialog-layout-padding: var(--wb-sizing-size_160);
19
+ --wb-c-modal-dialog-shadow-default: 0 var(--wb-sizing-size_080) var(--wb-sizing-size_160) 0 var(--wb-semanticColor-core-shadow-transparent);
20
+ --wb-c-modal-header-layout-padding-block: var(--wb-sizing-size_220);
21
+ --wb-c-modal-header-layout-padding-inline-default: var(--wb-sizing-size_240);
22
+ --wb-c-modal-header-layout-padding-inline-small: var(--wb-sizing-size_160);
23
+ --wb-c-modal-header-layout-gap-default: var(--wb-sizing-size_080);
24
+ --wb-c-modal-header-layout-gap-title-default: var(--wb-sizing-size_160);
25
+ --wb-c-modal-header-layout-gap-title-small: var(--wb-sizing-size_320);
26
+ --wb-c-modal-panel-layout-gap-default: var(--wb-sizing-size_240);
27
+ --wb-c-modal-panel-layout-gap-small: var(--wb-sizing-size_160);
28
+ --wb-c-modal-footer-layout-padding-inline: var(--wb-sizing-size_160);
29
+ --wb-c-modal-footer-layout-padding-block: var(--wb-sizing-size_160);
30
+ --wb-c-modal-closeButton-layout-gapRight: var(--wb-sizing-size_120);
31
+ --wb-c-modal-closeButton-layout-gapTop: var(--wb-sizing-size_160);}
package/dist/es/index.js CHANGED
@@ -2,24 +2,24 @@ import { jsxs, jsx } from 'react/jsx-runtime';
2
2
  import * as React from 'react';
3
3
  import { View, Id } from '@khanacademy/wonder-blocks-core';
4
4
  import { StyleSheet } from 'aphrodite';
5
- import { border, sizing, semanticColor, mapValuesToCssVars } from '@khanacademy/wonder-blocks-tokens';
6
- import { HeadingMedium, LabelSmall } from '@khanacademy/wonder-blocks-typography';
5
+ import { border, sizing, mapValuesToCssVars, semanticColor } from '@khanacademy/wonder-blocks-tokens';
6
+ import { Heading, BodyText } from '@khanacademy/wonder-blocks-typography';
7
7
  import * as ReactDOM from 'react-dom';
8
8
  import { withActionScheduler } from '@khanacademy/wonder-blocks-timing';
9
9
  import { focusStyles } from '@khanacademy/wonder-blocks-styles';
10
- import xIcon from '@phosphor-icons/core/regular/x.svg';
10
+ import xIcon from '@phosphor-icons/core/bold/x-bold.svg';
11
11
  import IconButton from '@khanacademy/wonder-blocks-icon-button';
12
12
  import { MediaLayout } from '@khanacademy/wonder-blocks-layout';
13
13
 
14
- const theme$1={root:{border:{radius:border.radius.radius_040}},dialog:{spacing:{padding:sizing.size_160}},footer:{color:{border:semanticColor.core.border.neutral.subtle}},header:{color:{border:semanticColor.core.border.neutral.subtle,secondary:semanticColor.text.secondary},spacing:{paddingBlockMd:sizing.size_240,paddingInlineMd:sizing.size_320,paddingInlineSm:sizing.size_160,gap:sizing.size_080,titleGapMd:sizing.size_160,titleGapSm:sizing.size_320}},panel:{spacing:{gap:sizing.size_320}},closeButton:{spacing:{gap:sizing.size_080}}};
14
+ const theme$1={root:{border:{radius:border.radius.radius_040}},dialog:{layout:{padding:sizing.size_160},shadow:{default:"none"}},header:{layout:{padding:{block:sizing.size_240,inline:{default:sizing.size_320,small:sizing.size_160}},gap:{default:sizing.size_080,title:{default:sizing.size_160,small:sizing.size_320}}}},panel:{layout:{gap:{default:sizing.size_320,small:sizing.size_160}}},footer:{layout:{padding:{inline:sizing.size_160,block:sizing.size_080}}},closeButton:{layout:{gapRight:sizing.size_080,gapTop:sizing.size_080}}};
15
15
 
16
16
  var theme = mapValuesToCssVars(theme$1,"--wb-c-modal-");
17
17
 
18
- 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:{display:"flex",flexDirection:"row",alignItems:"stretch",width:"100%",height:"100%",position:"relative",[small$2]:{padding:theme.dialog.spacing.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";
18
+ 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";
19
19
 
20
- 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:sizing.size_160,paddingBlock:sizing.size_080,display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"flex-end",boxShadow:`0px -1px 0px ${theme.footer.color.border}`}});
20
+ 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}`}});
21
21
 
22
- function ModalHeader(props){const{breadcrumbs=undefined,subtitle=undefined,testId,title,titleId}=props;if(subtitle&&breadcrumbs){throw new Error("'subtitle' and 'breadcrumbs' can't be used together")}return jsxs(View,{style:[styles$4.header],testId:testId,children:[breadcrumbs&&jsx(View,{style:styles$4.breadcrumbs,children:breadcrumbs}),jsx(HeadingMedium,{tag:"h2",style:styles$4.title,id:titleId,testId:testId&&`${testId}-title`,children:title}),subtitle&&jsx(LabelSmall,{style:styles$4.subtitle,testId:testId&&`${testId}-subtitle`,children:subtitle})]})}const small$1="@media (max-width: 767px)";const styles$4=StyleSheet.create({header:{boxShadow:`0px 1px 0px ${theme.header.color.border}`,display:"flex",flexDirection:"column",minHeight:66,paddingBlock:theme.header.spacing.paddingBlockMd,paddingInline:theme.header.spacing.paddingInlineMd,position:"relative",width:"100%",[small$1]:{paddingInline:theme.header.spacing.paddingInlineSm}},breadcrumbs:{color:theme.header.color.secondary,marginBottom:theme.header.spacing.gap},title:{paddingRight:theme.header.spacing.titleGapMd,[small$1]:{paddingRight:theme.header.spacing.titleGapSm}},subtitle:{color:theme.header.color.secondary,marginTop:theme.header.spacing.gap}});
22
+ function ModalHeader(props){const{breadcrumbs=undefined,subtitle=undefined,testId,title,titleId}=props;if(subtitle&&breadcrumbs){throw new Error("'subtitle' and 'breadcrumbs' can't be used together")}return jsxs(View,{style:[styles$4.header],testId:testId,children:[breadcrumbs&&jsx(View,{style:styles$4.breadcrumbs,children:breadcrumbs}),jsx(Heading,{size:"large",tag:"h2",style:styles$4.title,id:titleId,testId:testId&&`${testId}-title`,children:title}),subtitle&&jsx(BodyText,{size:"small",style:styles$4.subtitle,testId:testId&&`${testId}-subtitle`,children:subtitle})]})}const small$1="@media (max-width: 767px)";const styles$4=StyleSheet.create({header:{boxShadow:`0px 1px 0px ${semanticColor.core.border.neutral.subtle}`,display:"flex",flexDirection:"column",minHeight:66,paddingBlock:theme.header.layout.padding.block,paddingInline:theme.header.layout.padding.inline.default,position:"relative",width:"100%",[small$1]:{paddingInline:theme.header.layout.padding.inline.small}},breadcrumbs:{color:semanticColor.core.foreground.neutral.default,marginBlockEnd:theme.header.layout.gap.default},title:{paddingInlineEnd:theme.header.layout.gap.title.default,[small$1]:{paddingInlineEnd:theme.header.layout.gap.title.small}},subtitle:{color:semanticColor.core.foreground.neutral.default,marginBlockStart:theme.header.layout.gap.default}});
23
23
 
24
24
  const FOCUSABLE_ELEMENTS$1='button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';class FocusTrap extends React.Component{tryToFocus(node){if(node instanceof HTMLElement){try{node.focus();}catch(e){}return document.activeElement===node}}focusElementIn(isLast){const modalRootAsHtmlEl=this.modalRoot;const focusableNodes=Array.from(modalRootAsHtmlEl.querySelectorAll(FOCUSABLE_ELEMENTS$1));const nodeIndex=!isLast?focusableNodes.length-1:0;const focusableNode=focusableNodes[nodeIndex];this.tryToFocus(focusableNode);}render(){const{style}=this.props;return jsxs(React.Fragment,{children:[jsx("div",{tabIndex:0,className:"modal-focus-trap-first",onFocus:this.handleFocusMoveToLast,style:{position:"fixed"}}),jsx(View,{style:style,ref:this.getModalRoot,children:this.props.children}),jsx("div",{tabIndex:0,className:"modal-focus-trap-last",onFocus:this.handleFocusMoveToFirst,style:{position:"fixed"}})]})}constructor(...args){super(...args),this.getModalRoot=node=>{if(!node){return}const modalRoot=ReactDOM.findDOMNode(node);if(!modalRoot){throw new Error("Assertion error: modal root should exist after mount")}this.modalRoot=modalRoot;},this.handleFocusMoveToLast=()=>{this.focusElementIn(false);},this.handleFocusMoveToFirst=()=>{this.focusElementIn(true);};}}
25
25
 
@@ -35,11 +35,11 @@ const defaultContext={closeModal:undefined};const ModalContext=React.createConte
35
35
 
36
36
  class ModalLauncher extends React.Component{static getDerivedStateFromProps(props,state){if(typeof props.opened==="boolean"&&props.children){console.warn("'children' and 'opened' can't be used together");}if(typeof props.opened==="boolean"&&!props.onClose){console.warn("'onClose' should be used with 'opened'");}if(typeof props.opened!=="boolean"&&!props.children){console.warn("either 'children' or 'opened' must be set");}return {opened:typeof props.opened==="boolean"?props.opened:state.opened}}componentDidUpdate(prevProps){if(!prevProps.opened&&this.props.opened){this._saveLastElementFocused();}}_renderModal(){if(typeof this.props.modal==="function"){return this.props.modal({closeModal:this.handleCloseModal})}else {return this.props.modal}}render(){const renderedChildren=this.props.children?this.props.children({openModal:this._openModal}):null;const{body}=document;if(!body){return null}return jsxs(ModalContext.Provider,{value:{closeModal:this.handleCloseModal},children:[renderedChildren,this.state.opened&&ReactDOM.createPortal(jsx(FocusTrap,{style:styles$2.container,children:jsx(ModalBackdrop,{initialFocusId:this.props.initialFocusId,testId:this.props.testId,onCloseModal:this.props.backdropDismissEnabled?this.handleCloseModal:()=>{},children:this._renderModal()})}),body),this.state.opened&&jsx(ModalLauncherKeypressListener,{onClose:this.handleCloseModal}),this.state.opened&&jsx(ScrollDisabler,{})]})}constructor(...args){super(...args),this.state={opened:false},this._saveLastElementFocused=()=>{this.lastElementFocusedOutsideModal=document.activeElement;},this._openModal=()=>{this._saveLastElementFocused();this.setState({opened:true});},this._returnFocus=()=>{const{closedFocusId,schedule}=this.props;const lastElement=this.lastElementFocusedOutsideModal;if(closedFocusId){const focusElement=ReactDOM.findDOMNode(document.getElementById(closedFocusId));if(focusElement){schedule.animationFrame(()=>{focusElement.focus();});return}}if(lastElement!=null){schedule.animationFrame(()=>{lastElement.focus();});}},this.handleCloseModal=()=>{this.setState({opened:false},()=>{const{onClose}=this.props;onClose?.();this._returnFocus();});};}}ModalLauncher.defaultProps={backdropDismissEnabled:true};class ModalLauncherKeypressListener extends React.Component{componentDidMount(){window.addEventListener("keyup",this._handleKeyup);}componentWillUnmount(){window.removeEventListener("keyup",this._handleKeyup);}render(){return null}constructor(...args){super(...args),this._handleKeyup=e=>{if(e.key==="Escape"){e.preventDefault();e.stopPropagation();this.props.onClose();}};}}const styles$2=StyleSheet.create({container:{zIndex:1080}});var modalLauncher = withActionScheduler(ModalLauncher);
37
37
 
38
- function ModalContent(props){const{scrollOverflow,style,children}=props;return jsx(View,{style:[styles$1.wrapper,scrollOverflow&&styles$1.scrollOverflow],children:jsx(View,{style:[styles$1.content,style],children:children})})}ModalContent.__IS_MODAL_CONTENT__=true;ModalContent.isComponentOf=instance=>{return instance&&instance.type&&instance.type.__IS_MODAL_CONTENT__};const small="@media (max-width: 767px)";const styles$1=StyleSheet.create({wrapper:{flex:1,display:"block"},scrollOverflow:{overflow:"auto"},content:{flex:1,minHeight:"100%",padding:sizing.size_320,boxSizing:"border-box",[small]:{paddingInline:sizing.size_160}}});ModalContent.defaultProps={scrollOverflow:true};
38
+ function ModalContent(props){const{scrollOverflow,style,children}=props;return jsx(View,{style:[styles$1.wrapper,scrollOverflow&&styles$1.scrollOverflow],children:jsx(View,{style:[styles$1.content,style],children:children})})}ModalContent.__IS_MODAL_CONTENT__=true;ModalContent.isComponentOf=instance=>{return instance&&instance.type&&instance.type.__IS_MODAL_CONTENT__};const small="@media (max-width: 767px)";const styles$1=StyleSheet.create({wrapper:{flex:1,display:"block"},scrollOverflow:{overflow:"auto"},content:{flex:1,minHeight:"100%",padding:theme.panel.layout.gap.default,boxSizing:"border-box",[small]:{paddingInline:theme.panel.layout.gap.small}}});ModalContent.defaultProps={scrollOverflow:true};
39
39
 
40
40
  class CloseButton extends React.Component{render(){const{onClick,style,testId}=this.props;return jsx(ModalContext.Consumer,{children:({closeModal})=>{if(closeModal&&onClick){throw new Error("You've specified 'onClose' on a modal when using ModalLauncher. Please specify 'onClose' on the ModalLauncher instead")}return jsx(IconButton,{icon:xIcon,"aria-label":"Close modal",onClick:onClick||closeModal,kind:"tertiary",actionType:"neutral",style:style,testId:testId})}})}}
41
41
 
42
- function ModalPanel({closeButtonVisible=true,scrollOverflow=true,content,footer,header,onClose,style,testId}){const renderMainContent=React.useCallback(()=>{const mainContent=ModalContent.isComponentOf(content)?content:jsx(ModalContent,{children:content});if(!mainContent){return mainContent}return React.cloneElement(mainContent,{scrollOverflow,style:[!!footer&&styles.hasFooter,mainContent.props.style]})},[content,footer,scrollOverflow]);const mainContent=renderMainContent();return jsxs(View,{style:[styles.wrapper,style],testId:testId&&`${testId}-panel`,children:[closeButtonVisible&&jsx(CloseButton,{onClick:onClose,style:[styles.closeButton],testId:testId&&`${testId}-close`}),header,mainContent,!footer||ModalFooter.isComponentOf(footer)?footer:jsx(ModalFooter,{children:footer})]})}ModalPanel.defaultProps={closeButtonVisible:true,scrollOverflow:true};const styles=StyleSheet.create({wrapper:{flex:"1 1 auto",position:"relative",display:"flex",flexDirection:"column",background:"white",boxSizing:"border-box",overflow:"hidden",height:"100%",width:"100%"},closeButton:{position:"absolute",right:theme.closeButton.spacing.gap,top:theme.closeButton.spacing.gap,zIndex:1,":focus":focusStyles.focus[":focus-visible"]},hasFooter:{paddingBlockEnd:theme.panel.spacing.gap}});
42
+ function ModalPanel({closeButtonVisible=true,scrollOverflow=true,content,footer,header,onClose,style,testId}){const renderMainContent=React.useCallback(()=>{const mainContent=ModalContent.isComponentOf(content)?content:jsx(ModalContent,{children:content});if(!mainContent){return mainContent}return React.cloneElement(mainContent,{scrollOverflow,style:[!!footer&&styles.hasFooter,mainContent.props.style]})},[content,footer,scrollOverflow]);const mainContent=renderMainContent();return jsxs(View,{style:[styles.wrapper,style],testId:testId&&`${testId}-panel`,children:[closeButtonVisible&&jsx(CloseButton,{onClick:onClose,style:[styles.closeButton],testId:testId&&`${testId}-close`}),header,mainContent,!footer||ModalFooter.isComponentOf(footer)?footer:jsx(ModalFooter,{children:footer})]})}ModalPanel.defaultProps={closeButtonVisible:true,scrollOverflow:true};const styles=StyleSheet.create({wrapper:{flex:"1 1 auto",flexDirection:"column",background:semanticColor.surface.primary,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"]},hasFooter:{paddingBlockEnd:theme.panel.layout.gap.default}});
43
43
 
44
44
  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}})};
45
45
 
package/dist/index.js CHANGED
@@ -11,7 +11,7 @@ var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
11
11
  var ReactDOM = require('react-dom');
12
12
  var wonderBlocksTiming = require('@khanacademy/wonder-blocks-timing');
13
13
  var wonderBlocksStyles = require('@khanacademy/wonder-blocks-styles');
14
- var xIcon = require('@phosphor-icons/core/regular/x.svg');
14
+ var xIcon = require('@phosphor-icons/core/bold/x-bold.svg');
15
15
  var IconButton = require('@khanacademy/wonder-blocks-icon-button');
16
16
  var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
17
17
 
@@ -40,15 +40,15 @@ var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
40
40
  var xIcon__default = /*#__PURE__*/_interopDefaultLegacy(xIcon);
41
41
  var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
42
42
 
43
- const theme$1={root:{border:{radius:wonderBlocksTokens.border.radius.radius_040}},dialog:{spacing:{padding:wonderBlocksTokens.sizing.size_160}},footer:{color:{border:wonderBlocksTokens.semanticColor.core.border.neutral.subtle}},header:{color:{border:wonderBlocksTokens.semanticColor.core.border.neutral.subtle,secondary:wonderBlocksTokens.semanticColor.text.secondary},spacing:{paddingBlockMd:wonderBlocksTokens.sizing.size_240,paddingInlineMd:wonderBlocksTokens.sizing.size_320,paddingInlineSm:wonderBlocksTokens.sizing.size_160,gap:wonderBlocksTokens.sizing.size_080,titleGapMd:wonderBlocksTokens.sizing.size_160,titleGapSm:wonderBlocksTokens.sizing.size_320}},panel:{spacing:{gap:wonderBlocksTokens.sizing.size_320}},closeButton:{spacing:{gap:wonderBlocksTokens.sizing.size_080}}};
43
+ const theme$1={root:{border:{radius:wonderBlocksTokens.border.radius.radius_040}},dialog:{layout:{padding:wonderBlocksTokens.sizing.size_160},shadow:{default:"none"}},header:{layout:{padding:{block:wonderBlocksTokens.sizing.size_240,inline:{default:wonderBlocksTokens.sizing.size_320,small:wonderBlocksTokens.sizing.size_160}},gap:{default:wonderBlocksTokens.sizing.size_080,title:{default:wonderBlocksTokens.sizing.size_160,small:wonderBlocksTokens.sizing.size_320}}}},panel:{layout:{gap:{default:wonderBlocksTokens.sizing.size_320,small:wonderBlocksTokens.sizing.size_160}}},footer:{layout:{padding:{inline:wonderBlocksTokens.sizing.size_160,block:wonderBlocksTokens.sizing.size_080}}},closeButton:{layout:{gapRight:wonderBlocksTokens.sizing.size_080,gapTop:wonderBlocksTokens.sizing.size_080}}};
44
44
 
45
45
  var theme = wonderBlocksTokens.mapValuesToCssVars(theme$1,"--wb-c-modal-");
46
46
 
47
- 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:{display:"flex",flexDirection:"row",alignItems:"stretch",width:"100%",height:"100%",position:"relative",[small$2]:{padding:theme.dialog.spacing.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";
47
+ 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";
48
48
 
49
- 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:wonderBlocksTokens.sizing.size_160,paddingBlock:wonderBlocksTokens.sizing.size_080,display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"flex-end",boxShadow:`0px -1px 0px ${theme.footer.color.border}`}});
49
+ 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}`}});
50
50
 
51
- function ModalHeader(props){const{breadcrumbs=undefined,subtitle=undefined,testId,title,titleId}=props;if(subtitle&&breadcrumbs){throw new Error("'subtitle' and 'breadcrumbs' can't be used together")}return jsxRuntime.jsxs(wonderBlocksCore.View,{style:[styles$4.header],testId:testId,children:[breadcrumbs&&jsxRuntime.jsx(wonderBlocksCore.View,{style:styles$4.breadcrumbs,children:breadcrumbs}),jsxRuntime.jsx(wonderBlocksTypography.HeadingMedium,{tag:"h2",style:styles$4.title,id:titleId,testId:testId&&`${testId}-title`,children:title}),subtitle&&jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{style:styles$4.subtitle,testId:testId&&`${testId}-subtitle`,children:subtitle})]})}const small$1="@media (max-width: 767px)";const styles$4=aphrodite.StyleSheet.create({header:{boxShadow:`0px 1px 0px ${theme.header.color.border}`,display:"flex",flexDirection:"column",minHeight:66,paddingBlock:theme.header.spacing.paddingBlockMd,paddingInline:theme.header.spacing.paddingInlineMd,position:"relative",width:"100%",[small$1]:{paddingInline:theme.header.spacing.paddingInlineSm}},breadcrumbs:{color:theme.header.color.secondary,marginBottom:theme.header.spacing.gap},title:{paddingRight:theme.header.spacing.titleGapMd,[small$1]:{paddingRight:theme.header.spacing.titleGapSm}},subtitle:{color:theme.header.color.secondary,marginTop:theme.header.spacing.gap}});
51
+ function ModalHeader(props){const{breadcrumbs=undefined,subtitle=undefined,testId,title,titleId}=props;if(subtitle&&breadcrumbs){throw new Error("'subtitle' and 'breadcrumbs' can't be used together")}return jsxRuntime.jsxs(wonderBlocksCore.View,{style:[styles$4.header],testId:testId,children:[breadcrumbs&&jsxRuntime.jsx(wonderBlocksCore.View,{style:styles$4.breadcrumbs,children:breadcrumbs}),jsxRuntime.jsx(wonderBlocksTypography.Heading,{size:"large",tag:"h2",style:styles$4.title,id:titleId,testId:testId&&`${testId}-title`,children:title}),subtitle&&jsxRuntime.jsx(wonderBlocksTypography.BodyText,{size:"small",style:styles$4.subtitle,testId:testId&&`${testId}-subtitle`,children:subtitle})]})}const small$1="@media (max-width: 767px)";const styles$4=aphrodite.StyleSheet.create({header:{boxShadow:`0px 1px 0px ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`,display:"flex",flexDirection:"column",minHeight:66,paddingBlock:theme.header.layout.padding.block,paddingInline:theme.header.layout.padding.inline.default,position:"relative",width:"100%",[small$1]:{paddingInline:theme.header.layout.padding.inline.small}},breadcrumbs:{color:wonderBlocksTokens.semanticColor.core.foreground.neutral.default,marginBlockEnd:theme.header.layout.gap.default},title:{paddingInlineEnd:theme.header.layout.gap.title.default,[small$1]:{paddingInlineEnd:theme.header.layout.gap.title.small}},subtitle:{color:wonderBlocksTokens.semanticColor.core.foreground.neutral.default,marginBlockStart:theme.header.layout.gap.default}});
52
52
 
53
53
  const FOCUSABLE_ELEMENTS$1='button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';class FocusTrap extends React__namespace.Component{tryToFocus(node){if(node instanceof HTMLElement){try{node.focus();}catch(e){}return document.activeElement===node}}focusElementIn(isLast){const modalRootAsHtmlEl=this.modalRoot;const focusableNodes=Array.from(modalRootAsHtmlEl.querySelectorAll(FOCUSABLE_ELEMENTS$1));const nodeIndex=!isLast?focusableNodes.length-1:0;const focusableNode=focusableNodes[nodeIndex];this.tryToFocus(focusableNode);}render(){const{style}=this.props;return jsxRuntime.jsxs(React__namespace.Fragment,{children:[jsxRuntime.jsx("div",{tabIndex:0,className:"modal-focus-trap-first",onFocus:this.handleFocusMoveToLast,style:{position:"fixed"}}),jsxRuntime.jsx(wonderBlocksCore.View,{style:style,ref:this.getModalRoot,children:this.props.children}),jsxRuntime.jsx("div",{tabIndex:0,className:"modal-focus-trap-last",onFocus:this.handleFocusMoveToFirst,style:{position:"fixed"}})]})}constructor(...args){super(...args),this.getModalRoot=node=>{if(!node){return}const modalRoot=ReactDOM__namespace.findDOMNode(node);if(!modalRoot){throw new Error("Assertion error: modal root should exist after mount")}this.modalRoot=modalRoot;},this.handleFocusMoveToLast=()=>{this.focusElementIn(false);},this.handleFocusMoveToFirst=()=>{this.focusElementIn(true);};}}
54
54
 
@@ -64,11 +64,11 @@ const defaultContext={closeModal:undefined};const ModalContext=React__namespace.
64
64
 
65
65
  class ModalLauncher extends React__namespace.Component{static getDerivedStateFromProps(props,state){if(typeof props.opened==="boolean"&&props.children){console.warn("'children' and 'opened' can't be used together");}if(typeof props.opened==="boolean"&&!props.onClose){console.warn("'onClose' should be used with 'opened'");}if(typeof props.opened!=="boolean"&&!props.children){console.warn("either 'children' or 'opened' must be set");}return {opened:typeof props.opened==="boolean"?props.opened:state.opened}}componentDidUpdate(prevProps){if(!prevProps.opened&&this.props.opened){this._saveLastElementFocused();}}_renderModal(){if(typeof this.props.modal==="function"){return this.props.modal({closeModal:this.handleCloseModal})}else {return this.props.modal}}render(){const renderedChildren=this.props.children?this.props.children({openModal:this._openModal}):null;const{body}=document;if(!body){return null}return jsxRuntime.jsxs(ModalContext.Provider,{value:{closeModal:this.handleCloseModal},children:[renderedChildren,this.state.opened&&ReactDOM__namespace.createPortal(jsxRuntime.jsx(FocusTrap,{style:styles$2.container,children:jsxRuntime.jsx(ModalBackdrop,{initialFocusId:this.props.initialFocusId,testId:this.props.testId,onCloseModal:this.props.backdropDismissEnabled?this.handleCloseModal:()=>{},children:this._renderModal()})}),body),this.state.opened&&jsxRuntime.jsx(ModalLauncherKeypressListener,{onClose:this.handleCloseModal}),this.state.opened&&jsxRuntime.jsx(ScrollDisabler,{})]})}constructor(...args){super(...args),this.state={opened:false},this._saveLastElementFocused=()=>{this.lastElementFocusedOutsideModal=document.activeElement;},this._openModal=()=>{this._saveLastElementFocused();this.setState({opened:true});},this._returnFocus=()=>{const{closedFocusId,schedule}=this.props;const lastElement=this.lastElementFocusedOutsideModal;if(closedFocusId){const focusElement=ReactDOM__namespace.findDOMNode(document.getElementById(closedFocusId));if(focusElement){schedule.animationFrame(()=>{focusElement.focus();});return}}if(lastElement!=null){schedule.animationFrame(()=>{lastElement.focus();});}},this.handleCloseModal=()=>{this.setState({opened:false},()=>{const{onClose}=this.props;onClose?.();this._returnFocus();});};}}ModalLauncher.defaultProps={backdropDismissEnabled:true};class ModalLauncherKeypressListener extends React__namespace.Component{componentDidMount(){window.addEventListener("keyup",this._handleKeyup);}componentWillUnmount(){window.removeEventListener("keyup",this._handleKeyup);}render(){return null}constructor(...args){super(...args),this._handleKeyup=e=>{if(e.key==="Escape"){e.preventDefault();e.stopPropagation();this.props.onClose();}};}}const styles$2=aphrodite.StyleSheet.create({container:{zIndex:1080}});var modalLauncher = wonderBlocksTiming.withActionScheduler(ModalLauncher);
66
66
 
67
- function ModalContent(props){const{scrollOverflow,style,children}=props;return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.wrapper,scrollOverflow&&styles$1.scrollOverflow],children:jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.content,style],children:children})})}ModalContent.__IS_MODAL_CONTENT__=true;ModalContent.isComponentOf=instance=>{return instance&&instance.type&&instance.type.__IS_MODAL_CONTENT__};const small="@media (max-width: 767px)";const styles$1=aphrodite.StyleSheet.create({wrapper:{flex:1,display:"block"},scrollOverflow:{overflow:"auto"},content:{flex:1,minHeight:"100%",padding:wonderBlocksTokens.sizing.size_320,boxSizing:"border-box",[small]:{paddingInline:wonderBlocksTokens.sizing.size_160}}});ModalContent.defaultProps={scrollOverflow:true};
67
+ function ModalContent(props){const{scrollOverflow,style,children}=props;return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.wrapper,scrollOverflow&&styles$1.scrollOverflow],children:jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.content,style],children:children})})}ModalContent.__IS_MODAL_CONTENT__=true;ModalContent.isComponentOf=instance=>{return instance&&instance.type&&instance.type.__IS_MODAL_CONTENT__};const small="@media (max-width: 767px)";const styles$1=aphrodite.StyleSheet.create({wrapper:{flex:1,display:"block"},scrollOverflow:{overflow:"auto"},content:{flex:1,minHeight:"100%",padding:theme.panel.layout.gap.default,boxSizing:"border-box",[small]:{paddingInline:theme.panel.layout.gap.small}}});ModalContent.defaultProps={scrollOverflow:true};
68
68
 
69
69
  class CloseButton extends React__namespace.Component{render(){const{onClick,style,testId}=this.props;return jsxRuntime.jsx(ModalContext.Consumer,{children:({closeModal})=>{if(closeModal&&onClick){throw new Error("You've specified 'onClose' on a modal when using ModalLauncher. Please specify 'onClose' on the ModalLauncher instead")}return jsxRuntime.jsx(IconButton__default["default"],{icon:xIcon__default["default"],"aria-label":"Close modal",onClick:onClick||closeModal,kind:"tertiary",actionType:"neutral",style:style,testId:testId})}})}}
70
70
 
71
- function ModalPanel({closeButtonVisible=true,scrollOverflow=true,content,footer,header,onClose,style,testId}){const renderMainContent=React__namespace.useCallback(()=>{const mainContent=ModalContent.isComponentOf(content)?content:jsxRuntime.jsx(ModalContent,{children:content});if(!mainContent){return mainContent}return React__namespace.cloneElement(mainContent,{scrollOverflow,style:[!!footer&&styles.hasFooter,mainContent.props.style]})},[content,footer,scrollOverflow]);const mainContent=renderMainContent();return jsxRuntime.jsxs(wonderBlocksCore.View,{style:[styles.wrapper,style],testId:testId&&`${testId}-panel`,children:[closeButtonVisible&&jsxRuntime.jsx(CloseButton,{onClick:onClose,style:[styles.closeButton],testId:testId&&`${testId}-close`}),header,mainContent,!footer||ModalFooter.isComponentOf(footer)?footer:jsxRuntime.jsx(ModalFooter,{children:footer})]})}ModalPanel.defaultProps={closeButtonVisible:true,scrollOverflow:true};const styles=aphrodite.StyleSheet.create({wrapper:{flex:"1 1 auto",position:"relative",display:"flex",flexDirection:"column",background:"white",boxSizing:"border-box",overflow:"hidden",height:"100%",width:"100%"},closeButton:{position:"absolute",right:theme.closeButton.spacing.gap,top:theme.closeButton.spacing.gap,zIndex:1,":focus":wonderBlocksStyles.focusStyles.focus[":focus-visible"]},hasFooter:{paddingBlockEnd:theme.panel.spacing.gap}});
71
+ function ModalPanel({closeButtonVisible=true,scrollOverflow=true,content,footer,header,onClose,style,testId}){const renderMainContent=React__namespace.useCallback(()=>{const mainContent=ModalContent.isComponentOf(content)?content:jsxRuntime.jsx(ModalContent,{children:content});if(!mainContent){return mainContent}return React__namespace.cloneElement(mainContent,{scrollOverflow,style:[!!footer&&styles.hasFooter,mainContent.props.style]})},[content,footer,scrollOverflow]);const mainContent=renderMainContent();return jsxRuntime.jsxs(wonderBlocksCore.View,{style:[styles.wrapper,style],testId:testId&&`${testId}-panel`,children:[closeButtonVisible&&jsxRuntime.jsx(CloseButton,{onClick:onClose,style:[styles.closeButton],testId:testId&&`${testId}-close`}),header,mainContent,!footer||ModalFooter.isComponentOf(footer)?footer:jsxRuntime.jsx(ModalFooter,{children:footer})]})}ModalPanel.defaultProps={closeButtonVisible:true,scrollOverflow:true};const styles=aphrodite.StyleSheet.create({wrapper:{flex:"1 1 auto",flexDirection:"column",background:wonderBlocksTokens.semanticColor.surface.primary,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"]},hasFooter:{paddingBlockEnd:theme.panel.layout.gap.default}});
72
72
 
73
73
  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}})};
74
74
 
package/dist/theme/default.d.ts CHANGED
@@ -11,37 +11,51 @@ declare const theme: {
11
11
  * Building blocks
12
12
  */
13
13
  dialog: {
14
- spacing: {
14
+ layout: {
15
15
  padding: string;
16
16
  };
17
- };
18
- footer: {
19
- color: {
20
- border: string;
17
+ shadow: {
18
+ default: string;
21
19
  };
22
20
  };
23
21
  header: {
24
- color: {
25
- border: string;
26
- secondary: string;
27
- };
28
- spacing: {
29
- paddingBlockMd: string;
30
- paddingInlineMd: string;
31
- paddingInlineSm: string;
32
- gap: string;
33
- titleGapMd: string;
34
- titleGapSm: string;
22
+ layout: {
23
+ padding: {
24
+ block: string;
25
+ inline: {
26
+ default: string;
27
+ small: string;
28
+ };
29
+ };
30
+ gap: {
31
+ default: string;
32
+ title: {
33
+ default: string;
34
+ small: string;
35
+ };
36
+ };
35
37
  };
36
38
  };
37
39
  panel: {
38
- spacing: {
39
- gap: string;
40
+ layout: {
41
+ gap: {
42
+ default: string;
43
+ small: string;
44
+ };
45
+ };
46
+ };
47
+ footer: {
48
+ layout: {
49
+ padding: {
50
+ inline: string;
51
+ block: string;
52
+ };
40
53
  };
41
54
  };
42
55
  closeButton: {
43
- spacing: {
44
- gap: string;
56
+ layout: {
57
+ gapRight: string;
58
+ gapTop: string;
45
59
  };
46
60
  };
47
61
  };
package/dist/theme/index.d.ts CHANGED
@@ -5,37 +5,51 @@ declare const _default: {
5
5
  };
6
6
  };
7
7
  dialog: {
8
- spacing: {
8
+ layout: {
9
9
  padding: string;
10
10
  };
11
- };
12
- footer: {
13
- color: {
14
- border: string;
11
+ shadow: {
12
+ default: string;
15
13
  };
16
14
  };
17
15
  header: {
18
- color: {
19
- border: string;
20
- secondary: string;
21
- };
22
- spacing: {
23
- paddingBlockMd: string;
24
- paddingInlineMd: string;
25
- paddingInlineSm: string;
26
- gap: string;
27
- titleGapMd: string;
28
- titleGapSm: string;
16
+ layout: {
17
+ padding: {
18
+ block: string;
19
+ inline: {
20
+ default: string;
21
+ small: string;
22
+ };
23
+ };
24
+ gap: {
25
+ default: string;
26
+ title: {
27
+ default: string;
28
+ small: string;
29
+ };
30
+ };
29
31
  };
30
32
  };
31
33
  panel: {
32
- spacing: {
33
- gap: string;
34
+ layout: {
35
+ gap: {
36
+ default: string;
37
+ small: string;
38
+ };
39
+ };
40
+ };
41
+ footer: {
42
+ layout: {
43
+ padding: {
44
+ inline: string;
45
+ block: string;
46
+ };
34
47
  };
35
48
  };
36
49
  closeButton: {
37
- spacing: {
38
- gap: string;
50
+ layout: {
51
+ gapRight: string;
52
+ gapTop: string;
39
53
  };
40
54
  };
41
55
  };
package/dist/theme/thunderblocks.d.ts ADDED
@@ -0,0 +1,56 @@
1
+ declare const _default: {
2
+ root: {
3
+ border: {
4
+ radius: string;
5
+ };
6
+ };
7
+ dialog: {
8
+ layout: {
9
+ padding: string;
10
+ };
11
+ shadow: {
12
+ default: string;
13
+ };
14
+ };
15
+ header: {
16
+ layout: {
17
+ padding: {
18
+ block: string;
19
+ inline: {
20
+ default: string;
21
+ small: string;
22
+ };
23
+ };
24
+ gap: {
25
+ default: string;
26
+ title: {
27
+ default: string;
28
+ small: string;
29
+ };
30
+ };
31
+ };
32
+ };
33
+ panel: {
34
+ layout: {
35
+ gap: {
36
+ default: string;
37
+ small: string;
38
+ };
39
+ };
40
+ };
41
+ footer: {
42
+ layout: {
43
+ padding: {
44
+ inline: string;
45
+ block: string;
46
+ };
47
+ };
48
+ };
49
+ closeButton: {
50
+ layout: {
51
+ gapRight: string;
52
+ gapTop: string;
53
+ };
54
+ };
55
+ };
56
+ export default _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-modal",
3
- "version": "8.0.0",
3
+ "version": "8.1.0",
4
4
  "design": "v2",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -20,14 +20,14 @@
20
20
  "author": "",
21
21
  "license": "MIT",
22
22
  "dependencies": {
23
- "@khanacademy/wonder-blocks-breadcrumbs": "3.1.20",
24
- "@khanacademy/wonder-blocks-icon-button": "10.3.4",
25
- "@khanacademy/wonder-blocks-layout": "3.1.20",
26
- "@khanacademy/wonder-blocks-styles": "0.2.16",
27
- "@khanacademy/wonder-blocks-timing": "7.0.2",
23
+ "@khanacademy/wonder-blocks-breadcrumbs": "3.1.22",
28
24
  "@khanacademy/wonder-blocks-core": "12.3.0",
29
- "@khanacademy/wonder-blocks-tokens": "11.1.0",
30
- "@khanacademy/wonder-blocks-typography": "4.2.5"
25
+ "@khanacademy/wonder-blocks-icon-button": "10.3.6",
26
+ "@khanacademy/wonder-blocks-layout": "3.1.22",
27
+ "@khanacademy/wonder-blocks-styles": "0.2.18",
28
+ "@khanacademy/wonder-blocks-timing": "7.0.2",
29
+ "@khanacademy/wonder-blocks-tokens": "11.2.0",
30
+ "@khanacademy/wonder-blocks-typography": "4.2.7"
31
31
  },
32
32
  "peerDependencies": {
33
33
  "@phosphor-icons/core": "^2.0.2",