@khanacademy/wonder-blocks-floating 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @khanacademy/wonder-blocks-floating
 
+## 0.2.0
+
+### Minor Changes
+
+- 248e2f5: Add an opt-in `constrainSize` prop (disabled by default) that constrains the floating element to the space available within the boundary, so it isn't cut off on small screens or at high zoom levels. The content is responsible for scrolling when it doesn't fit (e.g. with `ScrollableView` from `@khanacademy/wonder-blocks-layout`).
+
+### Patch Changes
+
+- 7d414bb: Don't hide the floating element (via the `hide` middleware) while a text field inside of it has focus. This fixes the virtual keyboard closing right after focusing a text field inside a popover on mobile devices.
+
 ## 0.1.0
 
 ### Minor Changes

package/dist/components/floating.d.ts

@@ -78,6 +78,11 @@ type FloatingProps = {
      * hidden.
      *
      * Allows to visually hide the floating element when it is out of bounds.
+     *
+     * NOTE: The floating element is not hidden while a text field inside of it
+     * has focus (e.g. the user is typing in it). Hiding it would make the
+     * browser drop focus, which on mobile devices also closes the virtual
+     * keyboard.
      * @default true
      */
     hide?: boolean;
@@ -97,9 +102,32 @@ type FloatingProps = {
      * @default 12
      */
     shiftPadding?: number;
+    /**
+     * Whether to constrain the floating element's size to the space available
+     * within the boundary.
+     *
+     * When enabled, the floating element gets a `max-inline-size` and
+     * `max-block-size` that match the available space between the reference
+     * element and the boundary (minus `shiftPadding`). This keeps the floating
+     * element from being cut off when there isn't enough room for it, e.g. on
+     * small screens or at high zoom levels.
+     *
+     * The floating element is also laid out as a flex column so its content
+     * can shrink. The content is responsible for scrolling when it doesn't fit
+     * (e.g. by wrapping it in a `ScrollableView` from
+     * `@khanacademy/wonder-blocks-layout`).
+     *
+     * NOTE: Use it together with `shift`, so the floating element moves to
+     * stay in view. Without `shift`, it stays centered on the reference
+     * element and shrinks on both sides to fit instead, so it can get very
+     * narrow when the reference element is near the edge of the boundary.
+     * @default false
+     * @see https://floating-ui.com/docs/size
+     */
+    constrainSize?: boolean;
     /**
      * The boundary that the floating element should be kept within by the
-     * `flip` and `shift` middleware.
+     * `flip`, `shift` and `size` middleware.
      *
      * - `"viewport"`: keep the element within the user's viewport.
      * - `"document"`: keep the element within the document body.
@@ -210,5 +238,5 @@ type Props = FloatingProps & FocusManagerProps;
  * </Floating>
  * ```
  */
-export default function Floating({ content, children, placement, open, onOpenChange, portal, strategy, testId, focusManagerEnabled, initialFocusRef, returnFocus, closeOnFocusOut, dismissEnabled, onPlacementChange, hide: hideProp, offset: offsetProp, flip: flipProp, shift: shiftProp, shiftPadding, rootBoundary, showArrow, styles: stylesProp, }: Props): React.JSX.Element;
+export default function Floating({ content, children, placement, open, onOpenChange, portal, strategy, testId, focusManagerEnabled, initialFocusRef, returnFocus, closeOnFocusOut, dismissEnabled, onPlacementChange, hide: hideProp, offset: offsetProp, flip: flipProp, shift: shiftProp, shiftPadding, constrainSize, rootBoundary, showArrow, styles: stylesProp, }: Props): React.JSX.Element;
 export {};

package/dist/es/index.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useMemo } from 'react';
-import { FloatingArrow, FloatingPortal, useFloating, autoUpdate, offset, flip, shift, arrow, hide, useDismiss, useInteractions, useMergeRefs, FloatingFocusManager } from '@floating-ui/react';
+import { FloatingArrow, FloatingPortal, useFloating, autoUpdate, offset, flip, shift, size, arrow, hide, useDismiss, useInteractions, useMergeRefs, FloatingFocusManager } from '@floating-ui/react';
 export { useMergeRefs } from '@floating-ui/react';
 import { StyleSheet, css } from 'aphrodite';
 import { semanticColor, border, boxShadow } from '@khanacademy/wonder-blocks-tokens';
@@ -20,6 +20,6 @@ const rtlMirror=()=>{return {name:"rtlMirror",fn(state){const{placement,elements
 
 function canAcceptRef(element){const type=element.type;if(typeof type==="string"){return true}if(typeof type==="object"&&type!==null){if(type.$$typeof===Symbol.for("react.forward_ref")){return true}if(type.$$typeof===Symbol.for("react.memo")){return canAcceptRef({...element,type:type.type})}}return false}function getElementRef(element){if(parseInt(React.version,10)>=19){return element.props?.ref??undefined}return element.ref??undefined}
 
-const StyledDiv=addStyle("div");const SHIFT_PADDING=12;function Floating({content,children,placement="top",open=false,onOpenChange,portal=true,strategy="absolute",testId,focusManagerEnabled=true,initialFocusRef,returnFocus=true,closeOnFocusOut=false,dismissEnabled=false,onPlacementChange,hide:hideProp=true,offset:offsetProp=20,flip:flipProp=true,shift:shiftProp=true,shiftPadding=SHIFT_PADDING,rootBoundary="viewport",showArrow=true,styles:stylesProp}){const arrowRef=React.useRef(null);const prevOpenRef=React.useRef(open??false);const{elements,refs,floatingStyles,context,middlewareData,placement:resolvedPlacement}=useFloating({open,onOpenChange,placement,strategy,whileElementsMounted:autoUpdate,middleware:[offset({mainAxis:offsetProp}),flipProp?flip({rootBoundary}):undefined,shiftProp?shift({padding:shiftPadding,crossAxis:true,rootBoundary}):undefined,showArrow?arrow({element:arrowRef}):undefined,hideProp?hide():undefined,rtlMirror()]});const dismiss=useDismiss(context,{enabled:dismissEnabled});const{getReferenceProps,getFloatingProps}=useInteractions([dismiss]);React.useEffect(()=>{if(prevOpenRef.current!==open){onOpenChange?.(open);prevOpenRef.current=open;}},[onOpenChange,open]);React.useEffect(()=>{onPlacementChange?.(resolvedPlacement);},[onPlacementChange,resolvedPlacement]);const{setReference}=refs;const referenceId=React.useId();const referenceFromRef=React.useRef(null);const setReferenceFromTrigger=React.useCallback(node=>{const element=node instanceof Element?node:null;referenceFromRef.current=element;setReference(element);},[setReference]);const triggerRef=useMergeRefs([setReferenceFromTrigger,getElementRef(children)]);const trigger=React.useMemo(()=>{return React.cloneElement(children,{[FloatingReferenceAttributeName]:referenceId,...canAcceptRef(children)?{ref:triggerRef}:undefined,...getReferenceProps()})},[children,getReferenceProps,referenceId,triggerRef]);React.useLayoutEffect(()=>{if(referenceFromRef.current){return}const node=document.querySelector(`[${FloatingReferenceAttributeName}="${referenceId}"]`);if(node!==elements.reference){setReference(node);}if(process.env.NODE_ENV!=="production"&&open&&!node){console.warn("Floating: could not find the trigger's element in the DOM, "+"so the floating element can't be positioned. Make sure "+"the trigger either attaches the ref it is given or "+"spreads the props it is given onto the element the "+"floating element should be anchored to.");}});return jsxs(Fragment,{children:[trigger,open&&elements.reference&&jsx(Portal,{portal:portal,reference:elements.reference,children:jsx(FloatingFocusManager,{disabled:!focusManagerEnabled,context:context,modal:false,initialFocus:initialFocusRef,returnFocus:returnFocus,closeOnFocusOut:closeOnFocusOut,visuallyHiddenDismiss:dismissEnabled,children:jsxs(StyledDiv,{"data-testid":testId,"data-placement":placement,ref:refs.setFloating,style:[styles.floating,floatingStyles,stylesProp?.root,{visibility:middlewareData.hide?.referenceHidden?"hidden":"visible"}],...getFloatingProps(),children:[content,showArrow&&jsx(Arrow,{ref:arrowRef,context:context,style:stylesProp?.arrow})]})})})]})}const styles=StyleSheet.create({floating:{background:semanticColor.core.background.base.default,border:`solid ${border.width.thin} ${semanticColor.core.border.neutral.subtle}`,borderRadius:border.radius.radius_040,minBlockSize:ARROW_SIZE_INLINE,boxShadow:boxShadow.mid,justifyContent:"center",outline:"none"}});
+const StyledDiv=addStyle("div");const SHIFT_PADDING=12;const NON_TEXT_INPUT_TYPES=new Set(["button","checkbox","color","file","hidden","image","radio","range","reset","submit"]);function opensVirtualKeyboard(element){if(element instanceof HTMLTextAreaElement||element instanceof HTMLInputElement){if(element.readOnly||element.disabled||element.getAttribute("aria-disabled")==="true"){return false}return element instanceof HTMLTextAreaElement||!NON_TEXT_INPUT_TYPES.has(element.type)}return element instanceof HTMLElement&&element.isContentEditable}function Floating({content,children,placement="top",open=false,onOpenChange,portal=true,strategy="absolute",testId,focusManagerEnabled=true,initialFocusRef,returnFocus=true,closeOnFocusOut=false,dismissEnabled=false,onPlacementChange,hide:hideProp=true,offset:offsetProp=20,flip:flipProp=true,shift:shiftProp=true,shiftPadding=SHIFT_PADDING,constrainSize=false,rootBoundary="viewport",showArrow=true,styles:stylesProp}){const arrowRef=React.useRef(null);const prevOpenRef=React.useRef(open??false);const[focusedField,setFocusedField]=React.useState(null);const{elements,refs,floatingStyles,context,middlewareData,placement:resolvedPlacement}=useFloating({open,onOpenChange,placement,strategy,whileElementsMounted:autoUpdate,middleware:[offset({mainAxis:offsetProp}),flipProp?flip({rootBoundary}):undefined,shiftProp?shift({padding:shiftPadding,crossAxis:true,rootBoundary}):undefined,constrainSize?size({padding:shiftPadding,rootBoundary,apply({availableWidth,availableHeight,elements}){Object.assign(elements.floating.style,{maxInlineSize:`${Math.max(0,availableWidth)}px`,maxBlockSize:`${Math.max(0,availableHeight)}px`});}}):undefined,showArrow?arrow({element:arrowRef}):undefined,hideProp?hide():undefined,rtlMirror()]});const dismiss=useDismiss(context,{enabled:dismissEnabled});const{getReferenceProps,getFloatingProps}=useInteractions([dismiss]);React.useEffect(()=>{if(prevOpenRef.current!==open){onOpenChange?.(open);prevOpenRef.current=open;}},[onOpenChange,open]);React.useEffect(()=>{if(!open){setFocusedField(null);}},[open]);const isPressingInsideRef=React.useRef(false);const handleFocus=React.useCallback(event=>{if(event.currentTarget.contains(event.target)&&opensVirtualKeyboard(event.target)){setFocusedField(event.target);}},[]);const handleBlur=React.useCallback(event=>{const{relatedTarget,currentTarget}=event;const movesInside=relatedTarget instanceof Node?currentTarget.contains(relatedTarget):isPressingInsideRef.current;isPressingInsideRef.current=false;if(!movesInside){setFocusedField(null);}},[]);const handlePointerDown=React.useCallback(()=>{isPressingInsideRef.current=true;},[]);const handlePointerUp=React.useCallback(()=>{isPressingInsideRef.current=false;},[]);React.useEffect(()=>{const floating=elements.floating;if(!focusedField||!floating){return}const observer=new MutationObserver(()=>{if(!focusedField.isConnected){setFocusedField(null);}});observer.observe(floating,{childList:true,subtree:true});return ()=>observer.disconnect()},[elements.floating,focusedField]);const isHidden=!!middlewareData.hide?.referenceHidden&&!focusedField;React.useEffect(()=>{onPlacementChange?.(resolvedPlacement);},[onPlacementChange,resolvedPlacement]);const{setReference}=refs;const referenceId=React.useId();const referenceFromRef=React.useRef(null);const setReferenceFromTrigger=React.useCallback(node=>{const element=node instanceof Element?node:null;referenceFromRef.current=element;setReference(element);},[setReference]);const triggerRef=useMergeRefs([setReferenceFromTrigger,getElementRef(children)]);const trigger=React.useMemo(()=>{return React.cloneElement(children,{[FloatingReferenceAttributeName]:referenceId,...canAcceptRef(children)?{ref:triggerRef}:undefined,...getReferenceProps()})},[children,getReferenceProps,referenceId,triggerRef]);React.useLayoutEffect(()=>{if(referenceFromRef.current){return}const node=document.querySelector(`[${FloatingReferenceAttributeName}="${referenceId}"]`);if(node!==elements.reference){setReference(node);}if(process.env.NODE_ENV!=="production"&&open&&!node){console.warn("Floating: could not find the trigger's element in the DOM, "+"so the floating element can't be positioned. Make sure "+"the trigger either attaches the ref it is given or "+"spreads the props it is given onto the element the "+"floating element should be anchored to.");}});return jsxs(Fragment,{children:[trigger,open&&elements.reference&&jsx(Portal,{portal:portal,reference:elements.reference,children:jsx(FloatingFocusManager,{disabled:!focusManagerEnabled,context:context,modal:false,initialFocus:initialFocusRef,returnFocus:returnFocus,closeOnFocusOut:closeOnFocusOut,visuallyHiddenDismiss:dismissEnabled,children:jsxs(StyledDiv,{"data-testid":testId,"data-placement":placement,ref:refs.setFloating,style:[styles.floating,constrainSize&&styles.constrained,floatingStyles,stylesProp?.root,{visibility:isHidden?"hidden":"visible"}],...getFloatingProps({onFocus:handleFocus,onBlur:handleBlur,onPointerDown:handlePointerDown,onPointerUp:handlePointerUp,onPointerCancel:handlePointerUp}),children:[content,showArrow&&jsx(Arrow,{ref:arrowRef,context:context,style:stylesProp?.arrow})]})})})]})}const styles=StyleSheet.create({floating:{background:semanticColor.core.background.base.default,border:`solid ${border.width.thin} ${semanticColor.core.border.neutral.subtle}`,borderRadius:border.radius.radius_040,minBlockSize:ARROW_SIZE_INLINE,boxShadow:boxShadow.mid,justifyContent:"center",outline:"none"},constrained:{display:"flex",flexDirection:"column"}});
 
 export { Floating, FloatingReferenceAttributeName, canAcceptRef, getElementRef };

package/dist/index.js

@@ -42,7 +42,7 @@ const rtlMirror=()=>{return {name:"rtlMirror",fn(state){const{placement,elements
 
 function canAcceptRef(element){const type=element.type;if(typeof type==="string"){return true}if(typeof type==="object"&&type!==null){if(type.$$typeof===Symbol.for("react.forward_ref")){return true}if(type.$$typeof===Symbol.for("react.memo")){return canAcceptRef({...element,type:type.type})}}return false}function getElementRef(element){if(parseInt(React__namespace.version,10)>=19){return element.props?.ref??undefined}return element.ref??undefined}
 
-const StyledDiv=addStyle("div");const SHIFT_PADDING=12;function Floating({content,children,placement="top",open=false,onOpenChange,portal=true,strategy="absolute",testId,focusManagerEnabled=true,initialFocusRef,returnFocus=true,closeOnFocusOut=false,dismissEnabled=false,onPlacementChange,hide:hideProp=true,offset:offsetProp=20,flip:flipProp=true,shift:shiftProp=true,shiftPadding=SHIFT_PADDING,rootBoundary="viewport",showArrow=true,styles:stylesProp}){const arrowRef=React__namespace.useRef(null);const prevOpenRef=React__namespace.useRef(open??false);const{elements,refs,floatingStyles,context,middlewareData,placement:resolvedPlacement}=react.useFloating({open,onOpenChange,placement,strategy,whileElementsMounted:react.autoUpdate,middleware:[react.offset({mainAxis:offsetProp}),flipProp?react.flip({rootBoundary}):undefined,shiftProp?react.shift({padding:shiftPadding,crossAxis:true,rootBoundary}):undefined,showArrow?react.arrow({element:arrowRef}):undefined,hideProp?react.hide():undefined,rtlMirror()]});const dismiss=react.useDismiss(context,{enabled:dismissEnabled});const{getReferenceProps,getFloatingProps}=react.useInteractions([dismiss]);React__namespace.useEffect(()=>{if(prevOpenRef.current!==open){onOpenChange?.(open);prevOpenRef.current=open;}},[onOpenChange,open]);React__namespace.useEffect(()=>{onPlacementChange?.(resolvedPlacement);},[onPlacementChange,resolvedPlacement]);const{setReference}=refs;const referenceId=React__namespace.useId();const referenceFromRef=React__namespace.useRef(null);const setReferenceFromTrigger=React__namespace.useCallback(node=>{const element=node instanceof Element?node:null;referenceFromRef.current=element;setReference(element);},[setReference]);const triggerRef=react.useMergeRefs([setReferenceFromTrigger,getElementRef(children)]);const trigger=React__namespace.useMemo(()=>{return React__namespace.cloneElement(children,{[FloatingReferenceAttributeName]:referenceId,...canAcceptRef(children)?{ref:triggerRef}:undefined,...getReferenceProps()})},[children,getReferenceProps,referenceId,triggerRef]);React__namespace.useLayoutEffect(()=>{if(referenceFromRef.current){return}const node=document.querySelector(`[${FloatingReferenceAttributeName}="${referenceId}"]`);if(node!==elements.reference){setReference(node);}if(process.env.NODE_ENV!=="production"&&open&&!node){console.warn("Floating: could not find the trigger's element in the DOM, "+"so the floating element can't be positioned. Make sure "+"the trigger either attaches the ref it is given or "+"spreads the props it is given onto the element the "+"floating element should be anchored to.");}});return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[trigger,open&&elements.reference&&jsxRuntime.jsx(Portal,{portal:portal,reference:elements.reference,children:jsxRuntime.jsx(react.FloatingFocusManager,{disabled:!focusManagerEnabled,context:context,modal:false,initialFocus:initialFocusRef,returnFocus:returnFocus,closeOnFocusOut:closeOnFocusOut,visuallyHiddenDismiss:dismissEnabled,children:jsxRuntime.jsxs(StyledDiv,{"data-testid":testId,"data-placement":placement,ref:refs.setFloating,style:[styles.floating,floatingStyles,stylesProp?.root,{visibility:middlewareData.hide?.referenceHidden?"hidden":"visible"}],...getFloatingProps(),children:[content,showArrow&&jsxRuntime.jsx(Arrow,{ref:arrowRef,context:context,style:stylesProp?.arrow})]})})})]})}const styles=aphrodite.StyleSheet.create({floating:{background:wonderBlocksTokens.semanticColor.core.background.base.default,border:`solid ${wonderBlocksTokens.border.width.thin} ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`,borderRadius:wonderBlocksTokens.border.radius.radius_040,minBlockSize:ARROW_SIZE_INLINE,boxShadow:wonderBlocksTokens.boxShadow.mid,justifyContent:"center",outline:"none"}});
+const StyledDiv=addStyle("div");const SHIFT_PADDING=12;const NON_TEXT_INPUT_TYPES=new Set(["button","checkbox","color","file","hidden","image","radio","range","reset","submit"]);function opensVirtualKeyboard(element){if(element instanceof HTMLTextAreaElement||element instanceof HTMLInputElement){if(element.readOnly||element.disabled||element.getAttribute("aria-disabled")==="true"){return false}return element instanceof HTMLTextAreaElement||!NON_TEXT_INPUT_TYPES.has(element.type)}return element instanceof HTMLElement&&element.isContentEditable}function Floating({content,children,placement="top",open=false,onOpenChange,portal=true,strategy="absolute",testId,focusManagerEnabled=true,initialFocusRef,returnFocus=true,closeOnFocusOut=false,dismissEnabled=false,onPlacementChange,hide:hideProp=true,offset:offsetProp=20,flip:flipProp=true,shift:shiftProp=true,shiftPadding=SHIFT_PADDING,constrainSize=false,rootBoundary="viewport",showArrow=true,styles:stylesProp}){const arrowRef=React__namespace.useRef(null);const prevOpenRef=React__namespace.useRef(open??false);const[focusedField,setFocusedField]=React__namespace.useState(null);const{elements,refs,floatingStyles,context,middlewareData,placement:resolvedPlacement}=react.useFloating({open,onOpenChange,placement,strategy,whileElementsMounted:react.autoUpdate,middleware:[react.offset({mainAxis:offsetProp}),flipProp?react.flip({rootBoundary}):undefined,shiftProp?react.shift({padding:shiftPadding,crossAxis:true,rootBoundary}):undefined,constrainSize?react.size({padding:shiftPadding,rootBoundary,apply({availableWidth,availableHeight,elements}){Object.assign(elements.floating.style,{maxInlineSize:`${Math.max(0,availableWidth)}px`,maxBlockSize:`${Math.max(0,availableHeight)}px`});}}):undefined,showArrow?react.arrow({element:arrowRef}):undefined,hideProp?react.hide():undefined,rtlMirror()]});const dismiss=react.useDismiss(context,{enabled:dismissEnabled});const{getReferenceProps,getFloatingProps}=react.useInteractions([dismiss]);React__namespace.useEffect(()=>{if(prevOpenRef.current!==open){onOpenChange?.(open);prevOpenRef.current=open;}},[onOpenChange,open]);React__namespace.useEffect(()=>{if(!open){setFocusedField(null);}},[open]);const isPressingInsideRef=React__namespace.useRef(false);const handleFocus=React__namespace.useCallback(event=>{if(event.currentTarget.contains(event.target)&&opensVirtualKeyboard(event.target)){setFocusedField(event.target);}},[]);const handleBlur=React__namespace.useCallback(event=>{const{relatedTarget,currentTarget}=event;const movesInside=relatedTarget instanceof Node?currentTarget.contains(relatedTarget):isPressingInsideRef.current;isPressingInsideRef.current=false;if(!movesInside){setFocusedField(null);}},[]);const handlePointerDown=React__namespace.useCallback(()=>{isPressingInsideRef.current=true;},[]);const handlePointerUp=React__namespace.useCallback(()=>{isPressingInsideRef.current=false;},[]);React__namespace.useEffect(()=>{const floating=elements.floating;if(!focusedField||!floating){return}const observer=new MutationObserver(()=>{if(!focusedField.isConnected){setFocusedField(null);}});observer.observe(floating,{childList:true,subtree:true});return ()=>observer.disconnect()},[elements.floating,focusedField]);const isHidden=!!middlewareData.hide?.referenceHidden&&!focusedField;React__namespace.useEffect(()=>{onPlacementChange?.(resolvedPlacement);},[onPlacementChange,resolvedPlacement]);const{setReference}=refs;const referenceId=React__namespace.useId();const referenceFromRef=React__namespace.useRef(null);const setReferenceFromTrigger=React__namespace.useCallback(node=>{const element=node instanceof Element?node:null;referenceFromRef.current=element;setReference(element);},[setReference]);const triggerRef=react.useMergeRefs([setReferenceFromTrigger,getElementRef(children)]);const trigger=React__namespace.useMemo(()=>{return React__namespace.cloneElement(children,{[FloatingReferenceAttributeName]:referenceId,...canAcceptRef(children)?{ref:triggerRef}:undefined,...getReferenceProps()})},[children,getReferenceProps,referenceId,triggerRef]);React__namespace.useLayoutEffect(()=>{if(referenceFromRef.current){return}const node=document.querySelector(`[${FloatingReferenceAttributeName}="${referenceId}"]`);if(node!==elements.reference){setReference(node);}if(process.env.NODE_ENV!=="production"&&open&&!node){console.warn("Floating: could not find the trigger's element in the DOM, "+"so the floating element can't be positioned. Make sure "+"the trigger either attaches the ref it is given or "+"spreads the props it is given onto the element the "+"floating element should be anchored to.");}});return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[trigger,open&&elements.reference&&jsxRuntime.jsx(Portal,{portal:portal,reference:elements.reference,children:jsxRuntime.jsx(react.FloatingFocusManager,{disabled:!focusManagerEnabled,context:context,modal:false,initialFocus:initialFocusRef,returnFocus:returnFocus,closeOnFocusOut:closeOnFocusOut,visuallyHiddenDismiss:dismissEnabled,children:jsxRuntime.jsxs(StyledDiv,{"data-testid":testId,"data-placement":placement,ref:refs.setFloating,style:[styles.floating,constrainSize&&styles.constrained,floatingStyles,stylesProp?.root,{visibility:isHidden?"hidden":"visible"}],...getFloatingProps({onFocus:handleFocus,onBlur:handleBlur,onPointerDown:handlePointerDown,onPointerUp:handlePointerUp,onPointerCancel:handlePointerUp}),children:[content,showArrow&&jsxRuntime.jsx(Arrow,{ref:arrowRef,context:context,style:stylesProp?.arrow})]})})})]})}const styles=aphrodite.StyleSheet.create({floating:{background:wonderBlocksTokens.semanticColor.core.background.base.default,border:`solid ${wonderBlocksTokens.border.width.thin} ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`,borderRadius:wonderBlocksTokens.border.radius.radius_040,minBlockSize:ARROW_SIZE_INLINE,boxShadow:wonderBlocksTokens.boxShadow.mid,justifyContent:"center",outline:"none"},constrained:{display:"flex",flexDirection:"column"}});
 
 Object.defineProperty(exports, 'useMergeRefs', {
     enumerable: true,

package/package.json

@@ -3,7 +3,7 @@
   "description": "A package that provides support for floating UI components in our UIs, including portal and focus management support.",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "publishConfig": {
     "access": "public"
   },
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@khanacademy/wb-dev-build-settings": "3.3.0",
-    "@khanacademy/wonder-blocks-modal": "8.9.0"
+    "@khanacademy/wonder-blocks-modal": "8.9.1"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"