@khanacademy/wonder-blocks-popover 6.1.46 → 6.1.47

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-popover
 
+## 6.1.47
+
+### Patch Changes
+
+- 5db127a: Fix issue where Popover focus management was interfering with Tabs focus management
+
 ## 6.1.46
 
 ### Patch Changes

package/dist/es/index.js

@@ -17,7 +17,7 @@ class PopoverAnchor extends React.Component{componentDidMount(){const anchorNode
 
 class PopoverDialog extends React.Component{componentDidUpdate(prevProps){if(prevProps.placement!==this.props.placement){this.props.onUpdate(this.props.placement);}}render(){const{placement,children,id,isReferenceHidden,updateBubbleRef,updateTailRef,tailOffset,style,showTail,"aria-describedby":ariaDescribedby,"aria-labelledby":ariaLabelledBy,"aria-label":ariaLabel}=this.props;const contentProps=children.props;const color=contentProps.color;return jsx(React.Fragment,{children:jsxs(View,{"aria-label":ariaLabel,"aria-describedby":ariaDescribedby,"aria-labelledby":ariaLabelledBy,id:id,role:"dialog",ref:updateBubbleRef,"data-placement":placement,style:[isReferenceHidden&&styles$2.hide,styles$2[`content-${placement}`],style],children:[children,jsx(TooltipTail,{show:showTail,color:color,updateRef:updateTailRef,placement:placement,offset:tailOffset})]})})}}const styles$2=StyleSheet.create({hide:{pointerEvents:"none",opacity:0,backgroundColor:"transparent",color:"transparent"},"content-top":{flexDirection:"column"},"content-right":{flexDirection:"row-reverse"},"content-bottom":{flexDirection:"column-reverse"},"content-left":{flexDirection:"row"}});
 
-const FOCUSABLE_ELEMENTS='button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';function findFocusableNodes(root){return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS))}function isFocusable(element){return element.matches(FOCUSABLE_ELEMENTS)}
+const FOCUSABLE_ELEMENTS='button:not([tabindex="-1"]), [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';function findFocusableNodes(root){return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS))}function isFocusable(element){return element.matches(FOCUSABLE_ELEMENTS)}
 
 class PopoverEventListener extends React.Component{componentDidMount(){window.addEventListener("keyup",this._handleKeyup);window.addEventListener("click",this._handleClick);}componentWillUnmount(){window.removeEventListener("keyup",this._handleKeyup);window.removeEventListener("click",this._handleClick);}render(){return null}constructor(...args){super(...args),this.state={isFirstClick:true},this._handleKeyup=e=>{if(e.key==="Escape"){e.preventDefault();e.stopPropagation();this.props.onClose(true);}},this._handleClick=e=>{if(this.state.isFirstClick){this.setState({isFirstClick:false});return}const node=ReactDOM.findDOMNode(this.props.contentRef?.current);if(node&&!node.contains(e.target)){e.preventDefault();e.stopPropagation();const shouldReturnFocus=!isFocusable(e.target);this.props.onClose(shouldReturnFocus);}};}}
 

package/dist/index.js

@@ -46,7 +46,7 @@ class PopoverAnchor extends React__namespace.Component{componentDidMount(){const
 
 class PopoverDialog extends React__namespace.Component{componentDidUpdate(prevProps){if(prevProps.placement!==this.props.placement){this.props.onUpdate(this.props.placement);}}render(){const{placement,children,id,isReferenceHidden,updateBubbleRef,updateTailRef,tailOffset,style,showTail,"aria-describedby":ariaDescribedby,"aria-labelledby":ariaLabelledBy,"aria-label":ariaLabel}=this.props;const contentProps=children.props;const color=contentProps.color;return jsxRuntime.jsx(React__namespace.Fragment,{children:jsxRuntime.jsxs(wonderBlocksCore.View,{"aria-label":ariaLabel,"aria-describedby":ariaDescribedby,"aria-labelledby":ariaLabelledBy,id:id,role:"dialog",ref:updateBubbleRef,"data-placement":placement,style:[isReferenceHidden&&styles$2.hide,styles$2[`content-${placement}`],style],children:[children,jsxRuntime.jsx(wonderBlocksTooltip.TooltipTail,{show:showTail,color:color,updateRef:updateTailRef,placement:placement,offset:tailOffset})]})})}}const styles$2=aphrodite.StyleSheet.create({hide:{pointerEvents:"none",opacity:0,backgroundColor:"transparent",color:"transparent"},"content-top":{flexDirection:"column"},"content-right":{flexDirection:"row-reverse"},"content-bottom":{flexDirection:"column-reverse"},"content-left":{flexDirection:"row"}});
 
-const FOCUSABLE_ELEMENTS='button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';function findFocusableNodes(root){return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS))}function isFocusable(element){return element.matches(FOCUSABLE_ELEMENTS)}
+const FOCUSABLE_ELEMENTS='button:not([tabindex="-1"]), [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';function findFocusableNodes(root){return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS))}function isFocusable(element){return element.matches(FOCUSABLE_ELEMENTS)}
 
 class PopoverEventListener extends React__namespace.Component{componentDidMount(){window.addEventListener("keyup",this._handleKeyup);window.addEventListener("click",this._handleClick);}componentWillUnmount(){window.removeEventListener("keyup",this._handleKeyup);window.removeEventListener("click",this._handleClick);}render(){return null}constructor(...args){super(...args),this.state={isFirstClick:true},this._handleKeyup=e=>{if(e.key==="Escape"){e.preventDefault();e.stopPropagation();this.props.onClose(true);}},this._handleClick=e=>{if(this.state.isFirstClick){this.setState({isFirstClick:false});return}const node=ReactDOM__namespace.findDOMNode(this.props.contentRef?.current);if(node&&!node.contains(e.target)){e.preventDefault();e.stopPropagation();const shouldReturnFocus=!isFocusable(e.target);this.props.onClose(shouldReturnFocus);}};}}
 

package/package.json

@@ -3,7 +3,7 @@
   "description": "",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "6.1.46",
+  "version": "6.1.47",
   "publishConfig": {
     "access": "public"
   },
@@ -21,9 +21,9 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@khanacademy/wonder-blocks-core": "12.4.2",
-    "@khanacademy/wonder-blocks-icon-button": "11.0.1",
     "@khanacademy/wonder-blocks-modal": "8.5.9",
     "@khanacademy/wonder-blocks-styles": "0.2.37",
+    "@khanacademy/wonder-blocks-icon-button": "11.0.1",
     "@khanacademy/wonder-blocks-tokens": "14.1.3",
     "@khanacademy/wonder-blocks-tooltip": "4.1.60",
     "@khanacademy/wonder-blocks-typography": "4.2.27"