@khanacademy/wonder-blocks-floating 0.0.0-PR2846-20251117162554 → 0.0.0-PR2846-20251118170823

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @khanacademy/wonder-blocks-floating
 
-## 0.0.0-PR2846-20251117162554
+## 0.0.0-PR2846-20251118170823
 
 ### Minor Changes
 

package/dist/components/floating.d.ts

@@ -79,22 +79,43 @@ type FloatingProps = {
      */
     portal?: boolean;
     /**
-     * Whether to use the FocusManager component to manage the focus of the
-     * floating element.
+     * When enabled, user can hide the floating element by pressing the `esc`
+     * key or clicking/tapping outside of it.
      * @default false
      */
-    useFocusManager?: boolean;
+    dismissEnabled?: boolean;
+};
+type FocusManagerProps = {
     /**
-     * The element that will receive focus when the floating element is opened.
+     * Whether to enable the FocusManager component to manage the focus of the
+     * floating element.
+     *
+     * When enabled, the focus will continue flowing from the reference element
+     * to the floating element and back to the reference element when the
+     * floating element is closed.
+     *
+     * This should be enabled in most cases, but it can be disabled if you want
+     * to handle the focus manually or use it in a non-interactive context (e.g.
+     * tooltips).
+     *
+     * @default true
      */
-    initialFocusRef?: React.RefObject<HTMLElement>;
+    focusManagerEnabled?: true;
     /**
-     * When enabled, user can hide the floating element by pressing the `esc`
-     * key or clicking/tapping outside of it.
-     * @default false
+     * The element that will receive focus when the floating element is opened.
+     *
+     * This is useful when you want to set the initial focus to an element
+     * inside the floating element when it is opened.
+     *
+     * If not provided, the first focusable element inside the floating element
+     * will receive focus when it is opened.
      */
-    dismissEnabled?: boolean;
+    initialFocusRef?: React.RefObject<HTMLElement>;
+} | {
+    focusManagerEnabled: false | undefined;
+    initialFocusRef?: never;
 };
+type Props = FloatingProps & FocusManagerProps;
 /**
  * A component that uses the Floating UI library to position a floating element
  * relative to a reference element.
@@ -112,5 +133,5 @@ type FloatingProps = {
  * </Floating>
  * ```
  */
-export default function Floating({ content, children, placement, open, onOpenChange, portal, strategy, testId, useFocusManager, initialFocusRef, dismissEnabled, hide: hideProp, offset: offsetProp, flip: flipProp, shift: shiftProp, showArrow, }: FloatingProps): React.JSX.Element;
+export default function Floating({ content, children, placement, open, onOpenChange, portal, strategy, testId, focusManagerEnabled, initialFocusRef, dismissEnabled, hide: hideProp, offset: offsetProp, flip: flipProp, shift: shiftProp, showArrow, }: Props): React.JSX.Element;
 export {};

package/dist/components/focus-manager.d.ts

@@ -3,10 +3,10 @@ import { FloatingRootContext } from "@floating-ui/react";
 /**
  * Renders the floating element with the focus manager if enabled.
  */
-export declare function FocusManager({ context, dismissEnabled, useFocusManager, initialFocusRef, children, }: {
+export declare function FocusManager({ context, dismissEnabled, focusManagerEnabled, initialFocusRef, children, }: {
     context: FloatingRootContext;
     dismissEnabled: boolean;
-    useFocusManager: boolean;
+    focusManagerEnabled: boolean;
     initialFocusRef: React.RefObject<HTMLElement> | undefined;
     children: React.JSX.Element;
 }): React.JSX.Element;

package/dist/es/index.js

@@ -15,8 +15,8 @@ function maybeGetNextAncestorModalLauncherPortal(element){let candidateElement=e
 
 function Portal({portal,children,reference}){if(portal){const modalHost=maybeGetPortalMountedModalHostElement(reference)||document.body;return jsx(FloatingPortal,{root:modalHost,children:children})}return children}
 
-function FocusManager({context,dismissEnabled,useFocusManager,initialFocusRef,children}){if(!useFocusManager){return children}return jsx(FloatingFocusManager,{context:context,modal:false,initialFocus:initialFocusRef,closeOnFocusOut:false,visuallyHiddenDismiss:dismissEnabled,children:children})}
+function FocusManager({context,dismissEnabled,focusManagerEnabled,initialFocusRef,children}){return jsx(FloatingFocusManager,{disabled:!focusManagerEnabled,context:context,modal:false,initialFocus:initialFocusRef,closeOnFocusOut:false,visuallyHiddenDismiss:dismissEnabled,children:children})}
 
-const StyledDiv=addStyle("div");const SHIFT_PADDING=12;function Floating({content,children,placement="top",open=false,onOpenChange,portal=true,strategy="absolute",testId,useFocusManager=false,initialFocusRef,dismissEnabled=false,hide:hideProp=true,offset:offsetProp=20,flip:flipProp=true,shift:shiftProp=true,showArrow=true}){const arrowRef=React.useRef(null);const prevOpenRef=React.useRef(open??false);const{elements,refs,floatingStyles,context,middlewareData}=useFloating({open,onOpenChange,placement,strategy,whileElementsMounted:autoUpdate,middleware:[offset({mainAxis:offsetProp}),flipProp?flip():undefined,shiftProp?shift({padding:SHIFT_PADDING,crossAxis:true}):undefined,showArrow?arrow({element:arrowRef}):undefined,hideProp?hide():undefined]});const dismiss=useDismiss(context,{enabled:dismissEnabled});const{getReferenceProps,getFloatingProps}=useInteractions([dismiss]);React.useEffect(()=>{if(prevOpenRef.current!==open){onOpenChange?.(open);prevOpenRef.current=open;}},[onOpenChange,open]);const trigger=React.useMemo(()=>{return React.cloneElement(children,{ref:refs.setReference,...getReferenceProps()})},[children,refs.setReference,getReferenceProps]);return jsxs(Fragment,{children:[trigger,open&&elements.reference&&jsx(Portal,{portal:portal,reference:elements.reference,children:jsx(FocusManager,{useFocusManager:useFocusManager,context:context,dismissEnabled:dismissEnabled,initialFocusRef:initialFocusRef,children:jsxs(StyledDiv,{"data-testid":testId,"data-placement":placement,ref:refs.setFloating,style:[styles.floating,floatingStyles,{visibility:middlewareData.hide?.referenceHidden?"hidden":"visible"}],...getFloatingProps(),children:[content,showArrow&&jsx(Arrow,{ref:arrowRef,context:context})]})})})]})}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,maxInlineSize:472,minBlockSize:ARROW_SIZE_INLINE,boxShadow:boxShadow.mid,justifyContent:"center"}});
+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,dismissEnabled=false,hide:hideProp=true,offset:offsetProp=20,flip:flipProp=true,shift:shiftProp=true,showArrow=true}){const arrowRef=React.useRef(null);const prevOpenRef=React.useRef(open??false);const{elements,refs,floatingStyles,context,middlewareData}=useFloating({open,onOpenChange,placement,strategy,whileElementsMounted:autoUpdate,middleware:[offset({mainAxis:offsetProp}),flipProp?flip():undefined,shiftProp?shift({padding:SHIFT_PADDING,crossAxis:true}):undefined,showArrow?arrow({element:arrowRef}):undefined,hideProp?hide():undefined]});const dismiss=useDismiss(context,{enabled:dismissEnabled});const{getReferenceProps,getFloatingProps}=useInteractions([dismiss]);React.useEffect(()=>{if(prevOpenRef.current!==open){onOpenChange?.(open);prevOpenRef.current=open;}},[onOpenChange,open]);const trigger=React.useMemo(()=>{return React.cloneElement(children,{ref:refs.setReference,...getReferenceProps()})},[children,refs.setReference,getReferenceProps]);return jsxs(Fragment,{children:[trigger,open&&elements.reference&&jsx(Portal,{portal:portal,reference:elements.reference,children:jsx(FocusManager,{focusManagerEnabled:focusManagerEnabled,context:context,dismissEnabled:dismissEnabled,initialFocusRef:initialFocusRef,children:jsxs(StyledDiv,{"data-testid":testId,"data-placement":placement,ref:refs.setFloating,style:[styles.floating,floatingStyles,{visibility:middlewareData.hide?.referenceHidden?"hidden":"visible"}],...getFloatingProps(),children:[content,showArrow&&jsx(Arrow,{ref:arrowRef,context:context})]})})})]})}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,maxInlineSize:472,minBlockSize:ARROW_SIZE_INLINE,boxShadow:boxShadow.mid,justifyContent:"center",outline:"none"}});
 
 export { Floating };

package/dist/index.js

@@ -38,8 +38,8 @@ function maybeGetNextAncestorModalLauncherPortal(element){let candidateElement=e
 
 function Portal({portal,children,reference}){if(portal){const modalHost=maybeGetPortalMountedModalHostElement(reference)||document.body;return jsxRuntime.jsx(react.FloatingPortal,{root:modalHost,children:children})}return children}
 
-function FocusManager({context,dismissEnabled,useFocusManager,initialFocusRef,children}){if(!useFocusManager){return children}return jsxRuntime.jsx(react.FloatingFocusManager,{context:context,modal:false,initialFocus:initialFocusRef,closeOnFocusOut:false,visuallyHiddenDismiss:dismissEnabled,children:children})}
+function FocusManager({context,dismissEnabled,focusManagerEnabled,initialFocusRef,children}){return jsxRuntime.jsx(react.FloatingFocusManager,{disabled:!focusManagerEnabled,context:context,modal:false,initialFocus:initialFocusRef,closeOnFocusOut:false,visuallyHiddenDismiss:dismissEnabled,children:children})}
 
-const StyledDiv=addStyle("div");const SHIFT_PADDING=12;function Floating({content,children,placement="top",open=false,onOpenChange,portal=true,strategy="absolute",testId,useFocusManager=false,initialFocusRef,dismissEnabled=false,hide:hideProp=true,offset:offsetProp=20,flip:flipProp=true,shift:shiftProp=true,showArrow=true}){const arrowRef=React__namespace.useRef(null);const prevOpenRef=React__namespace.useRef(open??false);const{elements,refs,floatingStyles,context,middlewareData}=react.useFloating({open,onOpenChange,placement,strategy,whileElementsMounted:react.autoUpdate,middleware:[react.offset({mainAxis:offsetProp}),flipProp?react.flip():undefined,shiftProp?react.shift({padding:SHIFT_PADDING,crossAxis:true}):undefined,showArrow?react.arrow({element:arrowRef}):undefined,hideProp?react.hide():undefined]});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]);const trigger=React__namespace.useMemo(()=>{return React__namespace.cloneElement(children,{ref:refs.setReference,...getReferenceProps()})},[children,refs.setReference,getReferenceProps]);return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[trigger,open&&elements.reference&&jsxRuntime.jsx(Portal,{portal:portal,reference:elements.reference,children:jsxRuntime.jsx(FocusManager,{useFocusManager:useFocusManager,context:context,dismissEnabled:dismissEnabled,initialFocusRef:initialFocusRef,children:jsxRuntime.jsxs(StyledDiv,{"data-testid":testId,"data-placement":placement,ref:refs.setFloating,style:[styles.floating,floatingStyles,{visibility:middlewareData.hide?.referenceHidden?"hidden":"visible"}],...getFloatingProps(),children:[content,showArrow&&jsxRuntime.jsx(Arrow,{ref:arrowRef,context:context})]})})})]})}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,maxInlineSize:472,minBlockSize:ARROW_SIZE_INLINE,boxShadow:wonderBlocksTokens.boxShadow.mid,justifyContent:"center"}});
+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,dismissEnabled=false,hide:hideProp=true,offset:offsetProp=20,flip:flipProp=true,shift:shiftProp=true,showArrow=true}){const arrowRef=React__namespace.useRef(null);const prevOpenRef=React__namespace.useRef(open??false);const{elements,refs,floatingStyles,context,middlewareData}=react.useFloating({open,onOpenChange,placement,strategy,whileElementsMounted:react.autoUpdate,middleware:[react.offset({mainAxis:offsetProp}),flipProp?react.flip():undefined,shiftProp?react.shift({padding:SHIFT_PADDING,crossAxis:true}):undefined,showArrow?react.arrow({element:arrowRef}):undefined,hideProp?react.hide():undefined]});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]);const trigger=React__namespace.useMemo(()=>{return React__namespace.cloneElement(children,{ref:refs.setReference,...getReferenceProps()})},[children,refs.setReference,getReferenceProps]);return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[trigger,open&&elements.reference&&jsxRuntime.jsx(Portal,{portal:portal,reference:elements.reference,children:jsxRuntime.jsx(FocusManager,{focusManagerEnabled:focusManagerEnabled,context:context,dismissEnabled:dismissEnabled,initialFocusRef:initialFocusRef,children:jsxRuntime.jsxs(StyledDiv,{"data-testid":testId,"data-placement":placement,ref:refs.setFloating,style:[styles.floating,floatingStyles,{visibility:middlewareData.hide?.referenceHidden?"hidden":"visible"}],...getFloatingProps(),children:[content,showArrow&&jsxRuntime.jsx(Arrow,{ref:arrowRef,context:context})]})})})]})}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,maxInlineSize:472,minBlockSize:ARROW_SIZE_INLINE,boxShadow:wonderBlocksTokens.boxShadow.mid,justifyContent:"center",outline:"none"}});
 
 exports.Floating = Floating;

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.0.0-PR2846-20251117162554",
+  "version": "0.0.0-PR2846-20251118170823",
   "publishConfig": {
     "access": "public"
   },
@@ -27,8 +27,8 @@
     "react": "18.2.0"
   },
   "devDependencies": {
-    "@khanacademy/wonder-blocks-modal": "8.5.5",
-    "@khanacademy/wb-dev-build-settings": "3.2.0"
+    "@khanacademy/wb-dev-build-settings": "3.2.0",
+    "@khanacademy/wonder-blocks-modal": "8.5.5"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"