@khanacademy/wonder-blocks-modal 8.1.5 → 8.1.7

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 (5) hide show
  1. package/.turbo/turbo-build$colon$css.log +1 -1
  2. package/CHANGELOG.md +30 -0
  3. package/dist/es/index.js +1 -1
  4. package/dist/index.js +1 -1
  5. package/package.json +7 -7
package/.turbo/turbo-build$colon$css.log CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- > @khanacademy/wonder-blocks-modal@8.1.5 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-modal
2
+ > @khanacademy/wonder-blocks-modal@8.1.7 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,35 @@
1
1
  # @khanacademy/wonder-blocks-modal
2
2
 
3
+ ## 8.1.7
4
+
5
+ ### Patch Changes
6
+
7
+ - fc6e4b7: Do not try to focus hidden elements in FocusTrap
8
+ - Updated dependencies [eafcfa3]
9
+ - Updated dependencies [956f8bd]
10
+ - Updated dependencies [956f8bd]
11
+ - Updated dependencies [eafcfa3]
12
+ - Updated dependencies [b42b694]
13
+ - Updated dependencies [956f8bd]
14
+ - @khanacademy/wonder-blocks-tokens@12.0.0
15
+ - @khanacademy/wonder-blocks-styles@0.2.25
16
+ - @khanacademy/wonder-blocks-breadcrumbs@3.1.29
17
+ - @khanacademy/wonder-blocks-icon-button@10.3.13
18
+ - @khanacademy/wonder-blocks-layout@3.1.29
19
+ - @khanacademy/wonder-blocks-typography@4.2.14
20
+
21
+ ## 8.1.6
22
+
23
+ ### Patch Changes
24
+
25
+ - Updated dependencies [03415d1]
26
+ - @khanacademy/wonder-blocks-tokens@11.4.1
27
+ - @khanacademy/wonder-blocks-breadcrumbs@3.1.28
28
+ - @khanacademy/wonder-blocks-icon-button@10.3.12
29
+ - @khanacademy/wonder-blocks-layout@3.1.28
30
+ - @khanacademy/wonder-blocks-styles@0.2.24
31
+ - @khanacademy/wonder-blocks-typography@4.2.13
32
+
3
33
  ## 8.1.5
4
34
 
5
35
  ### Patch Changes
package/dist/es/index.js CHANGED
@@ -21,7 +21,7 @@ function ModalFooter({children}){return jsx(View,{style:styles$5.footer,children
21
21
 
22
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
- 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);};}}
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)).filter(element=>{const style=window.getComputedStyle(element);return style.display!=="none"&&style.visibility!=="hidden"});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
 
26
26
  const ModalLauncherPortalAttributeName="data-modal-launcher-portal";
27
27
 
package/dist/index.js CHANGED
@@ -50,7 +50,7 @@ function ModalFooter({children}){return jsxRuntime.jsx(wonderBlocksCore.View,{st
50
50
 
51
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
- 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);};}}
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)).filter(element=>{const style=window.getComputedStyle(element);return style.display!=="none"&&style.visibility!=="hidden"});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
 
55
55
  const ModalLauncherPortalAttributeName="data-modal-launcher-portal";
56
56
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-modal",
3
- "version": "8.1.5",
3
+ "version": "8.1.7",
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.27",
23
+ "@khanacademy/wonder-blocks-breadcrumbs": "3.1.29",
24
24
  "@khanacademy/wonder-blocks-core": "12.3.0",
25
- "@khanacademy/wonder-blocks-icon-button": "10.3.11",
26
- "@khanacademy/wonder-blocks-layout": "3.1.27",
27
- "@khanacademy/wonder-blocks-styles": "0.2.23",
25
+ "@khanacademy/wonder-blocks-icon-button": "10.3.13",
26
+ "@khanacademy/wonder-blocks-layout": "3.1.29",
27
+ "@khanacademy/wonder-blocks-styles": "0.2.25",
28
28
  "@khanacademy/wonder-blocks-timing": "7.0.2",
29
- "@khanacademy/wonder-blocks-tokens": "11.4.0",
30
- "@khanacademy/wonder-blocks-typography": "4.2.12"
29
+ "@khanacademy/wonder-blocks-tokens": "12.0.0",
30
+ "@khanacademy/wonder-blocks-typography": "4.2.14"
31
31
  },
32
32
  "peerDependencies": {
33
33
  "@phosphor-icons/core": "^2.0.2",