@khanacademy/wonder-blocks-popover 7.0.2 → 7.1.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @khanacademy/wonder-blocks-popover
 
+## 7.1.0
+
+### Minor Changes
+
+- 8e11e83: Popover's close button now reads its default `aria-label` ("Close Popover") from `WonderBlocksConfigProvider`. The `closeButtonLabel` prop on PopoverContent and PopoverContentCore overrides the built-in translation.
+
+### Patch Changes
+
+- Updated dependencies [6bd5d0c]
+- Updated dependencies [8e11e83]
+    - @khanacademy/wonder-blocks-config@0.5.0
+    - @khanacademy/wonder-blocks-floating@0.2.1
+
+## 7.0.3
+
+### Patch Changes
+
+- Updated dependencies [cbdc909]
+    - @khanacademy/wonder-blocks-tokens@18.1.0
+    - @khanacademy/wonder-blocks-floating@0.2.1
+    - @khanacademy/wonder-blocks-icon-button@12.0.2
+    - @khanacademy/wonder-blocks-layout@3.2.1
+    - @khanacademy/wonder-blocks-styles@0.4.1
+    - @khanacademy/wonder-blocks-typography@5.0.6
+
 ## 7.0.2
 
 ### Patch Changes

package/dist/components/popover-content-core.d.ts

@@ -51,7 +51,8 @@ declare const PopoverContentCore: React.ForwardRefExoticComponent<Readonly<impor
      */
     closeButtonLight?: boolean;
     /**
-     * Close button label for use in screen readers
+     * Close button label for use in screen readers. This overrides the default
+     * label provided by `WonderBlocksConfigProvider`.
      */
     closeButtonLabel?: string;
     /**

package/dist/components/popover-content.d.ts

@@ -44,7 +44,8 @@ declare const PopoverContent: React.ForwardRefExoticComponent<Readonly<import("@
         close: () => unknown;
     }) => React.ReactElement);
     /**
-     * Close button label for use in screen readers
+     * Close button label for use in screen readers. This overrides the default
+     * label provided by `WonderBlocksConfigProvider`.
      */
     closeButtonLabel?: string;
     /**

package/dist/es/index.js

@@ -9,6 +9,7 @@ import { ScrollableView } from '@khanacademy/wonder-blocks-layout';
 import { actionStyles } from '@khanacademy/wonder-blocks-styles';
 import xIcon from '@phosphor-icons/core/regular/x.svg';
 import IconButton from '@khanacademy/wonder-blocks-icon-button';
+import { useWonderBlocksI18n } from '@khanacademy/wonder-blocks-config';
 
 const defaultContext={close:undefined,placement:"top"};const PopoverContext=React.createContext(defaultContext);PopoverContext.displayName="PopoverContext";
 
@@ -18,7 +19,7 @@ const PopoverDialog=React.forwardRef(function PopoverDialog(props,ref){const{chi
 
 function Popover(props){const{children,content,placement:placementProp="top",dismissEnabled,id,closedFocusId,initialFocusId,opened:openedProp,onClose,showTail=true,portal=true,rootBoundary="viewport",viewportPadding,testId,"aria-label":ariaLabel,"aria-describedby":ariaDescribedBy}=props;const isControlled=typeof openedProp==="boolean";const[internalOpened,setInternalOpened]=React.useState(!!openedProp);const opened=isControlled?openedProp:internalOpened;const[placement,setPlacement]=React.useState(placementProp);const initialFocusRef=React.useRef(null);const returnFocusRef=React.useRef(null);const closeFiredRef=React.useRef(false);const generatedUniqueId=React.useId();const uniqueId=id??generatedUniqueId;React.useEffect(()=>{if(opened&&closedFocusId){returnFocusRef.current=document.getElementById(closedFocusId);}},[opened,closedFocusId]);const handleOpenChange=React.useCallback(nextOpened=>{if(!isControlled){setInternalOpened(nextOpened);}if(nextOpened){closeFiredRef.current=false;}else if(!closeFiredRef.current){closeFiredRef.current=true;onClose?.();}},[isControlled,onClose]);const handleClose=React.useCallback(()=>{handleOpenChange(false);},[handleOpenChange]);const handleAnchorClick=React.useCallback(()=>{if(!opened){handleOpenChange(true);}else if(dismissEnabled){handleOpenChange(false);}},[opened,dismissEnabled,handleOpenChange]);const handlePlacementChange=React.useCallback(nextPlacement=>{setPlacement(nextPlacement.split("-")[0]);},[]);const handleDialogRef=React.useCallback(node=>{if(node&&initialFocusId){initialFocusRef.current=node.querySelector(`#${initialFocusId}`);}},[initialFocusId]);const renderContent=()=>{const popoverContents=typeof content==="function"?content({close:handleClose}):content;return React.cloneElement(popoverContents,{uniqueId})};const describedBy=ariaDescribedBy||`${uniqueId}-content`;const ariaLabelledBy=ariaLabel?undefined:`${uniqueId}-title`;const dialog=jsx(PopoverDialog,{ref:handleDialogRef,id:uniqueId,placement:placement,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,"aria-describedby":describedBy,children:renderContent()});return jsx(PopoverContext.Provider,{value:{close:handleClose,placement:placement,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy},children:jsx(Floating,{open:opened,strategy:"fixed",onOpenChange:handleOpenChange,placement:placementProp,onPlacementChange:handlePlacementChange,content:dialog,constrainSize:true,dismissEnabled:!!dismissEnabled,closeOnFocusOut:!!dismissEnabled,showArrow:showTail,portal:portal,rootBoundary:rootBoundary,shiftPadding:viewportPadding,initialFocusRef:initialFocusId?initialFocusRef:undefined,returnFocus:closedFocusId?returnFocusRef:true,testId:testId,children:jsx(PopoverAnchor,{id:`${uniqueId}-anchor`,"aria-controls":uniqueId,"aria-expanded":opened?"true":"false",onClick:handleAnchorClick,children:children})})})}
 
-const CloseButton=props=>{const{"aria-label":ariaLabel="Close Popover",style,testId}=props;const{close}=React.useContext(PopoverContext);return jsx(IconButton,{icon:xIcon,"aria-label":ariaLabel,onClick:close,kind:"tertiary",actionType:"neutral",style:style,testId:testId})};
+const CloseButton=props=>{const{strings}=useWonderBlocksI18n();const{"aria-label":ariaLabel,style,testId}=props;const{close}=React.useContext(PopoverContext);return jsx(IconButton,{icon:xIcon,"aria-label":ariaLabel||strings.iconAltClosePopover,onClick:close,kind:"tertiary",actionType:"neutral",style:style,testId:testId})};
 
 const PopoverContentCore=React.forwardRef(function PopoverContentCore({"aria-label":ariaLabel,children,closeButtonLight=false,closeButtonLabel,closeButtonVisible=false,style,testId},ref){const popoverContext=React.useContext(PopoverContext);const labelProps=ariaLabel?{"aria-label":ariaLabel}:{"aria-label":popoverContext["aria-label"],"aria-labelledby":popoverContext["aria-labelledby"]};return jsx(ScrollableView,{...labelProps,style:styles$1.scrollableView,children:jsxs(View,{testId:testId,style:[styles$1.content,style],ref:ref,children:[closeButtonVisible&&jsx(CloseButton,{"aria-label":closeButtonLabel,style:[styles$1.closeButton,closeButtonLight&&actionStyles.inverse],testId:`${testId||"popover"}-close-btn`}),children]})})});PopoverContentCore.displayName="PopoverContentCore";const styles$1=StyleSheet.create({scrollableView:{borderRadius:`calc(${border.radius.radius_040} - ${border.width.thin})`},content:{margin:0,maxInlineSize:`calc(${sizing.size_160} * 18)`,padding:sizing.size_240,overflow:"hidden",justifyContent:"center",flexShrink:0},closeButton:{margin:0,position:"absolute",insetInlineEnd:sizing.size_040,insetBlockStart:sizing.size_040,zIndex:1}});
 

package/dist/index.js

@@ -13,6 +13,7 @@ var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
 var wonderBlocksStyles = require('@khanacademy/wonder-blocks-styles');
 var xIcon = require('@phosphor-icons/core/regular/x.svg');
 var IconButton = require('@khanacademy/wonder-blocks-icon-button');
+var wonderBlocksConfig = require('@khanacademy/wonder-blocks-config');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -46,7 +47,7 @@ const PopoverDialog=React__namespace.forwardRef(function PopoverDialog(props,ref
 
 function Popover(props){const{children,content,placement:placementProp="top",dismissEnabled,id,closedFocusId,initialFocusId,opened:openedProp,onClose,showTail=true,portal=true,rootBoundary="viewport",viewportPadding,testId,"aria-label":ariaLabel,"aria-describedby":ariaDescribedBy}=props;const isControlled=typeof openedProp==="boolean";const[internalOpened,setInternalOpened]=React__namespace.useState(!!openedProp);const opened=isControlled?openedProp:internalOpened;const[placement,setPlacement]=React__namespace.useState(placementProp);const initialFocusRef=React__namespace.useRef(null);const returnFocusRef=React__namespace.useRef(null);const closeFiredRef=React__namespace.useRef(false);const generatedUniqueId=React__namespace.useId();const uniqueId=id??generatedUniqueId;React__namespace.useEffect(()=>{if(opened&&closedFocusId){returnFocusRef.current=document.getElementById(closedFocusId);}},[opened,closedFocusId]);const handleOpenChange=React__namespace.useCallback(nextOpened=>{if(!isControlled){setInternalOpened(nextOpened);}if(nextOpened){closeFiredRef.current=false;}else if(!closeFiredRef.current){closeFiredRef.current=true;onClose?.();}},[isControlled,onClose]);const handleClose=React__namespace.useCallback(()=>{handleOpenChange(false);},[handleOpenChange]);const handleAnchorClick=React__namespace.useCallback(()=>{if(!opened){handleOpenChange(true);}else if(dismissEnabled){handleOpenChange(false);}},[opened,dismissEnabled,handleOpenChange]);const handlePlacementChange=React__namespace.useCallback(nextPlacement=>{setPlacement(nextPlacement.split("-")[0]);},[]);const handleDialogRef=React__namespace.useCallback(node=>{if(node&&initialFocusId){initialFocusRef.current=node.querySelector(`#${initialFocusId}`);}},[initialFocusId]);const renderContent=()=>{const popoverContents=typeof content==="function"?content({close:handleClose}):content;return React__namespace.cloneElement(popoverContents,{uniqueId})};const describedBy=ariaDescribedBy||`${uniqueId}-content`;const ariaLabelledBy=ariaLabel?undefined:`${uniqueId}-title`;const dialog=jsxRuntime.jsx(PopoverDialog,{ref:handleDialogRef,id:uniqueId,placement:placement,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,"aria-describedby":describedBy,children:renderContent()});return jsxRuntime.jsx(PopoverContext.Provider,{value:{close:handleClose,placement:placement,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy},children:jsxRuntime.jsx(wonderBlocksFloating.Floating,{open:opened,strategy:"fixed",onOpenChange:handleOpenChange,placement:placementProp,onPlacementChange:handlePlacementChange,content:dialog,constrainSize:true,dismissEnabled:!!dismissEnabled,closeOnFocusOut:!!dismissEnabled,showArrow:showTail,portal:portal,rootBoundary:rootBoundary,shiftPadding:viewportPadding,initialFocusRef:initialFocusId?initialFocusRef:undefined,returnFocus:closedFocusId?returnFocusRef:true,testId:testId,children:jsxRuntime.jsx(PopoverAnchor,{id:`${uniqueId}-anchor`,"aria-controls":uniqueId,"aria-expanded":opened?"true":"false",onClick:handleAnchorClick,children:children})})})}
 
-const CloseButton=props=>{const{"aria-label":ariaLabel="Close Popover",style,testId}=props;const{close}=React__namespace.useContext(PopoverContext);return jsxRuntime.jsx(IconButton__default["default"],{icon:xIcon__default["default"],"aria-label":ariaLabel,onClick:close,kind:"tertiary",actionType:"neutral",style:style,testId:testId})};
+const CloseButton=props=>{const{strings}=wonderBlocksConfig.useWonderBlocksI18n();const{"aria-label":ariaLabel,style,testId}=props;const{close}=React__namespace.useContext(PopoverContext);return jsxRuntime.jsx(IconButton__default["default"],{icon:xIcon__default["default"],"aria-label":ariaLabel||strings.iconAltClosePopover,onClick:close,kind:"tertiary",actionType:"neutral",style:style,testId:testId})};
 
 const PopoverContentCore=React__namespace.forwardRef(function PopoverContentCore({"aria-label":ariaLabel,children,closeButtonLight=false,closeButtonLabel,closeButtonVisible=false,style,testId},ref){const popoverContext=React__namespace.useContext(PopoverContext);const labelProps=ariaLabel?{"aria-label":ariaLabel}:{"aria-label":popoverContext["aria-label"],"aria-labelledby":popoverContext["aria-labelledby"]};return jsxRuntime.jsx(wonderBlocksLayout.ScrollableView,{...labelProps,style:styles$1.scrollableView,children:jsxRuntime.jsxs(wonderBlocksCore.View,{testId:testId,style:[styles$1.content,style],ref:ref,children:[closeButtonVisible&&jsxRuntime.jsx(CloseButton,{"aria-label":closeButtonLabel,style:[styles$1.closeButton,closeButtonLight&&wonderBlocksStyles.actionStyles.inverse],testId:`${testId||"popover"}-close-btn`}),children]})})});PopoverContentCore.displayName="PopoverContentCore";const styles$1=aphrodite.StyleSheet.create({scrollableView:{borderRadius:`calc(${wonderBlocksTokens.border.radius.radius_040} - ${wonderBlocksTokens.border.width.thin})`},content:{margin:0,maxInlineSize:`calc(${wonderBlocksTokens.sizing.size_160} * 18)`,padding:wonderBlocksTokens.sizing.size_240,overflow:"hidden",justifyContent:"center",flexShrink:0},closeButton:{margin:0,position:"absolute",insetInlineEnd:wonderBlocksTokens.sizing.size_040,insetBlockStart:wonderBlocksTokens.sizing.size_040,zIndex:1}});
 

package/package.json

@@ -3,7 +3,7 @@
   "description": "",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "7.0.2",
+  "version": "7.1.0",
   "publishConfig": {
     "access": "public"
   },
@@ -20,13 +20,14 @@
   "module": "dist/es/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
+    "@khanacademy/wonder-blocks-config": "0.5.0",
     "@khanacademy/wonder-blocks-core": "12.5.0",
-    "@khanacademy/wonder-blocks-floating": "0.2.0",
-    "@khanacademy/wonder-blocks-layout": "3.2.0",
-    "@khanacademy/wonder-blocks-styles": "0.4.0",
-    "@khanacademy/wonder-blocks-icon-button": "12.0.1",
-    "@khanacademy/wonder-blocks-tokens": "18.0.0",
-    "@khanacademy/wonder-blocks-typography": "5.0.5"
+    "@khanacademy/wonder-blocks-floating": "0.2.1",
+    "@khanacademy/wonder-blocks-icon-button": "12.0.2",
+    "@khanacademy/wonder-blocks-layout": "3.2.1",
+    "@khanacademy/wonder-blocks-styles": "0.4.1",
+    "@khanacademy/wonder-blocks-tokens": "18.1.0",
+    "@khanacademy/wonder-blocks-typography": "5.0.6"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",