@khanacademy/wonder-blocks-modal 8.5.5 → 8.5.6
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.
- package/.turbo/turbo-build$colon$css.log +1 -1
- package/CHANGELOG.md +6 -0
- package/dist/es/index.js +2 -2
- package/dist/index.js +1 -1
- package/package.json +5 -5
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @khanacademy/wonder-blocks-modal@8.5.
|
|
2
|
+
> @khanacademy/wonder-blocks-modal@8.5.6 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
package/dist/es/index.js
CHANGED
|
@@ -5,7 +5,7 @@ import { StyleSheet } from 'aphrodite';
|
|
|
5
5
|
import { border, sizing, mapValuesToCssVars, semanticColor, breakpoint } from '@khanacademy/wonder-blocks-tokens';
|
|
6
6
|
import { Heading, BodyText } from '@khanacademy/wonder-blocks-typography';
|
|
7
7
|
import * as ReactDOM from 'react-dom';
|
|
8
|
-
import { withActionScheduler } from '@khanacademy/wonder-blocks-timing';
|
|
8
|
+
import { withActionScheduler, SchedulePolicy, ClearPolicy } from '@khanacademy/wonder-blocks-timing';
|
|
9
9
|
import { focusStyles } from '@khanacademy/wonder-blocks-styles';
|
|
10
10
|
import xIcon from '@phosphor-icons/core/bold/x-bold.svg';
|
|
11
11
|
import IconButton from '@khanacademy/wonder-blocks-icon-button';
|
|
@@ -32,7 +32,7 @@ const needsHackyMobileSafariScrollDisabler=(()=>{if(typeof window==="undefined")
|
|
|
32
32
|
|
|
33
33
|
const defaultContext={closeModal:undefined};const ModalContext=React.createContext(defaultContext);ModalContext.displayName="ModalContext";
|
|
34
34
|
|
|
35
|
-
const ModalLauncher=props=>{const{backdropDismissEnabled=true,children,closedFocusId,initialFocusId,modal,onClose,opened:controlledOpened,schedule,testId}=props;const lastElementFocusedOutsideModalRef=React.useRef(null);const[opened,setOpened]=React.useState(false);const isOpened=typeof controlledOpened==="boolean"?controlledOpened:opened;React.useEffect(()=>{if(typeof controlledOpened==="boolean"&&children){console.warn("'children' and 'opened' can't be used together");}if(typeof controlledOpened==="boolean"&&!onClose){console.warn("'onClose' should be used with 'opened'");}if(typeof controlledOpened!=="boolean"&&!children){console.warn("either 'children' or 'opened' must be set");}},[controlledOpened,children,onClose]);const saveLastElementFocused=React.useCallback(()=>{lastElementFocusedOutsideModalRef.current=document.activeElement;},[]);React.useEffect(()=>{if(!opened&&controlledOpened){saveLastElementFocused();}},[controlledOpened,opened,saveLastElementFocused]);const openModal=React.useCallback(()=>{saveLastElementFocused();setOpened(true);},[saveLastElementFocused]);const returnFocus=React.useCallback(()=>{if(closedFocusId){const focusElement=ReactDOM.findDOMNode(document.getElementById(closedFocusId));if(focusElement){schedule.animationFrame(()=>
|
|
35
|
+
const ModalLauncher=props=>{const{backdropDismissEnabled=true,children,closedFocusId,initialFocusId,modal,onClose,opened:controlledOpened,schedule,testId}=props;const lastElementFocusedOutsideModalRef=React.useRef(null);const[opened,setOpened]=React.useState(false);const isOpened=typeof controlledOpened==="boolean"?controlledOpened:opened;React.useEffect(()=>{if(typeof controlledOpened==="boolean"&&children){console.warn("'children' and 'opened' can't be used together");}if(typeof controlledOpened==="boolean"&&!onClose){console.warn("'onClose' should be used with 'opened'");}if(typeof controlledOpened!=="boolean"&&!children){console.warn("either 'children' or 'opened' must be set");}},[controlledOpened,children,onClose]);const saveLastElementFocused=React.useCallback(()=>{lastElementFocusedOutsideModalRef.current=document.activeElement;},[]);React.useEffect(()=>{if(!opened&&controlledOpened){saveLastElementFocused();}},[controlledOpened,opened,saveLastElementFocused]);const openModal=React.useCallback(()=>{saveLastElementFocused();setOpened(true);},[saveLastElementFocused]);const returnFocus=React.useCallback(()=>{if(closedFocusId){const focusElement=ReactDOM.findDOMNode(document.getElementById(closedFocusId));if(focusElement){schedule.animationFrame(()=>focusElement.focus(),{schedulePolicy:SchedulePolicy.Immediately,clearPolicy:ClearPolicy.Resolve});return}}const lastElement=lastElementFocusedOutsideModalRef.current;if(lastElement!=null){schedule.animationFrame(()=>{lastElement.focus();});}},[closedFocusId,schedule]);const handleCloseModal=React.useCallback(()=>{setOpened(false);onClose?.();returnFocus();},[onClose,returnFocus]);const renderModal=React.useCallback(()=>{if(typeof modal==="function"){return modal({closeModal:handleCloseModal})}else {return modal}},[modal,handleCloseModal]);const renderedChildren=children?children({openModal}):null;const{body}=document;if(!body){return null}return jsxs(ModalContext.Provider,{value:{closeModal:handleCloseModal},children:[renderedChildren,isOpened&&ReactDOM.createPortal(jsx(FocusTrap,{style:styles$4.container,children:jsx(ModalBackdrop,{initialFocusId:initialFocusId,testId:testId,onCloseModal:backdropDismissEnabled?handleCloseModal:()=>{},children:renderModal()})}),body),isOpened&&jsx(ModalLauncherKeypressListener,{onClose:handleCloseModal}),isOpened&&jsx(ScrollDisabler,{})]})};const ModalLauncherKeypressListener=({onClose})=>{const handleKeyup=React.useCallback(e=>{if(e.key==="Escape"){e.preventDefault();e.stopPropagation();onClose();}},[onClose]);React.useEffect(()=>{window.addEventListener("keyup",handleKeyup);return ()=>{window.removeEventListener("keyup",handleKeyup);}},[handleKeyup]);return null};const styles$4=StyleSheet.create({container:{zIndex:1080}});var modalLauncher = withActionScheduler(ModalLauncher);
|
|
36
36
|
|
|
37
37
|
function ModalContent(props){const{scrollOverflow,style,children}=props;return jsx(View,{style:[styles$3.wrapper,scrollOverflow&&styles$3.scrollOverflow],children:jsx(View,{style:[styles$3.content,style],children:children})})}ModalContent.__IS_MODAL_CONTENT__=true;ModalContent.isComponentOf=instance=>{return instance&&instance.type&&instance.type.__IS_MODAL_CONTENT__};const styles$3=StyleSheet.create({wrapper:{flex:1,display:"block",[modalMediaQuery.smMinOrSmallerHeight]:{flex:"unset",minHeight:"unset",overflow:"unset"}},scrollOverflow:{overflow:"auto"},content:{flex:1,minHeight:"100%",padding:theme.panel.layout.gap.default,boxSizing:"border-box",[modalMediaQuery.midOrSmaller]:{paddingInline:theme.panel.layout.gap.small},[modalMediaQuery.smMinOrSmallerHeight]:{flex:"unset",minHeight:"unset",overflow:"unset"}}});ModalContent.defaultProps={scrollOverflow:true};
|
|
38
38
|
|
package/dist/index.js
CHANGED
|
@@ -61,7 +61,7 @@ const needsHackyMobileSafariScrollDisabler=(()=>{if(typeof window==="undefined")
|
|
|
61
61
|
|
|
62
62
|
const defaultContext={closeModal:undefined};const ModalContext=React__namespace.createContext(defaultContext);ModalContext.displayName="ModalContext";
|
|
63
63
|
|
|
64
|
-
const ModalLauncher=props=>{const{backdropDismissEnabled=true,children,closedFocusId,initialFocusId,modal,onClose,opened:controlledOpened,schedule,testId}=props;const lastElementFocusedOutsideModalRef=React__namespace.useRef(null);const[opened,setOpened]=React__namespace.useState(false);const isOpened=typeof controlledOpened==="boolean"?controlledOpened:opened;React__namespace.useEffect(()=>{if(typeof controlledOpened==="boolean"&&children){console.warn("'children' and 'opened' can't be used together");}if(typeof controlledOpened==="boolean"&&!onClose){console.warn("'onClose' should be used with 'opened'");}if(typeof controlledOpened!=="boolean"&&!children){console.warn("either 'children' or 'opened' must be set");}},[controlledOpened,children,onClose]);const saveLastElementFocused=React__namespace.useCallback(()=>{lastElementFocusedOutsideModalRef.current=document.activeElement;},[]);React__namespace.useEffect(()=>{if(!opened&&controlledOpened){saveLastElementFocused();}},[controlledOpened,opened,saveLastElementFocused]);const openModal=React__namespace.useCallback(()=>{saveLastElementFocused();setOpened(true);},[saveLastElementFocused]);const returnFocus=React__namespace.useCallback(()=>{if(closedFocusId){const focusElement=ReactDOM__namespace.findDOMNode(document.getElementById(closedFocusId));if(focusElement){schedule.animationFrame(()=>
|
|
64
|
+
const ModalLauncher=props=>{const{backdropDismissEnabled=true,children,closedFocusId,initialFocusId,modal,onClose,opened:controlledOpened,schedule,testId}=props;const lastElementFocusedOutsideModalRef=React__namespace.useRef(null);const[opened,setOpened]=React__namespace.useState(false);const isOpened=typeof controlledOpened==="boolean"?controlledOpened:opened;React__namespace.useEffect(()=>{if(typeof controlledOpened==="boolean"&&children){console.warn("'children' and 'opened' can't be used together");}if(typeof controlledOpened==="boolean"&&!onClose){console.warn("'onClose' should be used with 'opened'");}if(typeof controlledOpened!=="boolean"&&!children){console.warn("either 'children' or 'opened' must be set");}},[controlledOpened,children,onClose]);const saveLastElementFocused=React__namespace.useCallback(()=>{lastElementFocusedOutsideModalRef.current=document.activeElement;},[]);React__namespace.useEffect(()=>{if(!opened&&controlledOpened){saveLastElementFocused();}},[controlledOpened,opened,saveLastElementFocused]);const openModal=React__namespace.useCallback(()=>{saveLastElementFocused();setOpened(true);},[saveLastElementFocused]);const returnFocus=React__namespace.useCallback(()=>{if(closedFocusId){const focusElement=ReactDOM__namespace.findDOMNode(document.getElementById(closedFocusId));if(focusElement){schedule.animationFrame(()=>focusElement.focus(),{schedulePolicy:wonderBlocksTiming.SchedulePolicy.Immediately,clearPolicy:wonderBlocksTiming.ClearPolicy.Resolve});return}}const lastElement=lastElementFocusedOutsideModalRef.current;if(lastElement!=null){schedule.animationFrame(()=>{lastElement.focus();});}},[closedFocusId,schedule]);const handleCloseModal=React__namespace.useCallback(()=>{setOpened(false);onClose?.();returnFocus();},[onClose,returnFocus]);const renderModal=React__namespace.useCallback(()=>{if(typeof modal==="function"){return modal({closeModal:handleCloseModal})}else {return modal}},[modal,handleCloseModal]);const renderedChildren=children?children({openModal}):null;const{body}=document;if(!body){return null}return jsxRuntime.jsxs(ModalContext.Provider,{value:{closeModal:handleCloseModal},children:[renderedChildren,isOpened&&ReactDOM__namespace.createPortal(jsxRuntime.jsx(FocusTrap,{style:styles$4.container,children:jsxRuntime.jsx(ModalBackdrop,{initialFocusId:initialFocusId,testId:testId,onCloseModal:backdropDismissEnabled?handleCloseModal:()=>{},children:renderModal()})}),body),isOpened&&jsxRuntime.jsx(ModalLauncherKeypressListener,{onClose:handleCloseModal}),isOpened&&jsxRuntime.jsx(ScrollDisabler,{})]})};const ModalLauncherKeypressListener=({onClose})=>{const handleKeyup=React__namespace.useCallback(e=>{if(e.key==="Escape"){e.preventDefault();e.stopPropagation();onClose();}},[onClose]);React__namespace.useEffect(()=>{window.addEventListener("keyup",handleKeyup);return ()=>{window.removeEventListener("keyup",handleKeyup);}},[handleKeyup]);return null};const styles$4=aphrodite.StyleSheet.create({container:{zIndex:1080}});var modalLauncher = wonderBlocksTiming.withActionScheduler(ModalLauncher);
|
|
65
65
|
|
|
66
66
|
function ModalContent(props){const{scrollOverflow,style,children}=props;return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$3.wrapper,scrollOverflow&&styles$3.scrollOverflow],children:jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$3.content,style],children:children})})}ModalContent.__IS_MODAL_CONTENT__=true;ModalContent.isComponentOf=instance=>{return instance&&instance.type&&instance.type.__IS_MODAL_CONTENT__};const styles$3=aphrodite.StyleSheet.create({wrapper:{flex:1,display:"block",[modalMediaQuery.smMinOrSmallerHeight]:{flex:"unset",minHeight:"unset",overflow:"unset"}},scrollOverflow:{overflow:"auto"},content:{flex:1,minHeight:"100%",padding:theme.panel.layout.gap.default,boxSizing:"border-box",[modalMediaQuery.midOrSmaller]:{paddingInline:theme.panel.layout.gap.small},[modalMediaQuery.smMinOrSmallerHeight]:{flex:"unset",minHeight:"unset",overflow:"unset"}}});ModalContent.defaultProps={scrollOverflow:true};
|
|
67
67
|
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "",
|
|
4
4
|
"author": "Khan Academy",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"version": "8.5.
|
|
6
|
+
"version": "8.5.6",
|
|
7
7
|
"publishConfig": {
|
|
8
8
|
"access": "public"
|
|
9
9
|
},
|
|
@@ -29,13 +29,13 @@
|
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@khanacademy/wonder-blocks-breadcrumbs": "3.2.8",
|
|
32
|
-
"@khanacademy/wonder-blocks-layout": "3.1.41",
|
|
33
|
-
"@khanacademy/wonder-blocks-icon-button": "10.5.7",
|
|
34
32
|
"@khanacademy/wonder-blocks-core": "12.4.2",
|
|
33
|
+
"@khanacademy/wonder-blocks-icon-button": "10.5.7",
|
|
34
|
+
"@khanacademy/wonder-blocks-layout": "3.1.41",
|
|
35
|
+
"@khanacademy/wonder-blocks-styles": "0.2.36",
|
|
35
36
|
"@khanacademy/wonder-blocks-timing": "7.0.4",
|
|
36
37
|
"@khanacademy/wonder-blocks-tokens": "14.1.2",
|
|
37
|
-
"@khanacademy/wonder-blocks-typography": "4.2.26"
|
|
38
|
-
"@khanacademy/wonder-blocks-styles": "0.2.36"
|
|
38
|
+
"@khanacademy/wonder-blocks-typography": "4.2.26"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
41
|
"@phosphor-icons/core": "^2.0.2",
|