@khanacademy/wonder-blocks-floating 0.0.0-PR2842-20251030173407 → 0.0.0-PR2844-20251110165628

package/CHANGELOG.md

@@ -1,8 +1,9 @@
 # @khanacademy/wonder-blocks-floating
 
-## 0.0.0-PR2842-20251030173407
+## 0.0.0-PR2844-20251110165628
 
 ### Minor Changes
 
 - 7cc5c0d: Adds wonder-blocks-floating package
-- 669e99a: Adds Floating component with basic props (including middlewares)
+- b286374: Adds Floating component with basic props (including middlewares)
+- 19c49ac: Adds `portal` prop to Floating component. Includes `maybeGetPortalMountedModalHostElement` util to portal floating elements inside modals.

package/dist/components/floating-portal.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+type Props = {
+    /**
+     * Whether to render the floating element in a portal.
+     * @default true
+     */
+    portal: boolean;
+    /**
+     * The children to render in the portal.
+     */
+    children: React.JSX.Element;
+    /**
+     * The reference element to use for the portal.
+     */
+    reference?: Element | null | undefined;
+};
+/**
+ * Renders the floating element in a portal if enabled.
+ *
+ * Using a portal is recommended so it can prevent any potential clipping
+ * issues.
+ */
+export declare function Portal({ portal, children, reference }: Props): React.JSX.Element;
+export {};

package/dist/components/floating.d.ts

@@ -67,13 +67,18 @@ type FloatingProps = {
      * @default true
      */
     showArrow?: boolean;
+    /**
+     * Whether to render the floating element in a portal.
+     * @default true
+     */
+    portal?: boolean;
 };
 /**
  * A component that uses the Floating UI library to position a floating element
  * relative to a reference element.
  *
  * Please take a look at the
- * [Accessibility](?path=/docs/packages-floating-floating-accessibility--docs)
+ * [Accessibility](?path=/docs/packages-floating-accessibility--docs)
  * section for more information.
  *
  * ## Usage
@@ -85,5 +90,5 @@ type FloatingProps = {
  * </Floating>
  * ```
  */
-export default function Floating({ content, children, placement, open, onOpenChange, strategy, testId, 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, hide: hideProp, offset: offsetProp, flip: flipProp, shift: shiftProp, showArrow, }: FloatingProps): React.JSX.Element;
 export {};

package/dist/es/index.js

@@ -1,16 +1,20 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useMemo } from 'react';
-import { FloatingArrow, useFloating, autoUpdate, offset, flip, shift, arrow, hide } from '@floating-ui/react';
+import { FloatingArrow, FloatingPortal, useFloating, autoUpdate, offset, flip, shift, arrow, hide } from '@floating-ui/react';
 import { StyleSheet, css } from 'aphrodite';
 import { semanticColor, border, boxShadow } from '@khanacademy/wonder-blocks-tokens';
 
 function flatten(list){const result=[];if(!list){return result}else if(Array.isArray(list)){for(const item of list){result.push(...flatten(item));}}else {result.push(list);}return result}function processStyleList(style){const stylesheetStyles=[];const inlineStyles=[];if(!style){return {style:{},className:""}}const shouldInlineStyles=typeof global!=="undefined"&&global.SNAPSHOT_INLINE_APHRODITE;flatten(style).forEach(child=>{const _definition=child._definition;if(_definition!=null){if(shouldInlineStyles){const def={};for(const[key,value]of Object.entries(_definition)){def[key.replace(/-[a-z]/g,match=>match[1].toUpperCase())]=value;}inlineStyles.push(def);}else {stylesheetStyles.push(child);}}else {inlineStyles.push(child);}});const inlineStylesObject=Object.assign({},...inlineStyles);if(inlineStyles.length>0&&!shouldInlineStyles){const inlineStylesStyleSheet=StyleSheet.create({inlineStyles:inlineStylesObject});stylesheetStyles.push(inlineStylesStyleSheet.inlineStyles);}return {style:shouldInlineStyles?inlineStylesObject:{},className:css(...stylesheetStyles)}}const isHeaderRegex=/^h[1-6]$/;const styles$1=StyleSheet.create({text:{WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale"},header:{marginTop:0,marginBottom:0}});React.forwardRef(function Text({children,style,tag:Tag="span",testId,...otherProps},ref){const isHeader=isHeaderRegex.test(Tag);const styleAttributes=processStyleList([styles$1.text,isHeader&&styles$1.header,style]);const classNames=otherProps.className?[otherProps.className,styleAttributes.className].join(" "):styleAttributes.className;return jsx(Tag,{...otherProps,style:styleAttributes.style,className:classNames,"data-testid":testId,ref:ref,children:children})});function addStyle(Component,defaultStyle){return React.forwardRef((props,ref)=>{const{className,style,...otherProps}=props;const reset=typeof Component==="string"?overrides[Component]:null;const{className:aphroditeClassName,style:inlineStyles}=processStyleList([reset,defaultStyle,style]);return jsx(Component,{...otherProps,ref:ref,className:[aphroditeClassName,className].filter(Boolean).join(" "),style:inlineStyles})})}const overrides=StyleSheet.create({button:{margin:0,"::-moz-focus-inner":{border:0}}});const styles$2=StyleSheet.create({default:{alignItems:"stretch",borderWidth:0,borderStyle:"solid",boxSizing:"border-box",display:"flex",flexDirection:"column",margin:0,padding:0,position:"relative",zIndex:0,minHeight:0,minWidth:0}});React.forwardRef(function View(props,ref){const{testId,tag="div",...restProps}=props;const commonProps={...restProps,"data-testid":testId};const StyledTag=useMemo(()=>addStyle(tag,styles$2.default),[tag]);return jsx(StyledTag,{...commonProps,ref:ref})});(function(RenderState){RenderState["Initial"]="initial";RenderState["Standard"]="standard";return RenderState})({});(function(RenderStateInternal){RenderStateInternal["Root"]="root";RenderStateInternal["Initial"]="initial";RenderStateInternal["Standard"]="standard";return RenderStateInternal})({});const RenderStateContext=React.createContext("root");RenderStateContext.displayName="RenderStateContext";
 
-const ARROW_SIZE_INLINE=20;const ARROW_SIZE_BLOCK=10;
+const ARROW_SIZE_INLINE=20;const ARROW_SIZE_BLOCK=10;const ModalLauncherPortalAttributeName="data-modal-launcher-portal";
 
 const Arrow=React.forwardRef(function Arrow({context},ref){const style=context.placement.endsWith("top")?{filter:`drop-shadow(0 4px 2px ${semanticColor.core.shadow.transparent.mid})`}:undefined;return jsx(FloatingArrow,{ref:ref,context:context,fill:semanticColor.core.background.base.default,stroke:semanticColor.core.border.neutral.subtle,strokeWidth:1,width:ARROW_SIZE_INLINE,height:ARROW_SIZE_BLOCK,style:style})});
 
-const StyledDiv=addStyle("div");const SHIFT_PADDING=12;function Floating({content,children,placement="top",open=false,onOpenChange,strategy="absolute",testId,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{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]});React.useEffect(()=>{if(prevOpenRef.current!==open){onOpenChange?.(open);prevOpenRef.current=open;}},[onOpenChange,open]);const trigger=React.useMemo(()=>{return React.cloneElement(children,{ref:refs.setReference})},[children,refs.setReference]);return jsxs(Fragment,{children:[trigger,open&&jsxs(StyledDiv,{"data-testid":testId,"data-placement":placement,ref:refs.setFloating,style:[styles.floating,floatingStyles,{visibility:middlewareData.hide?.referenceHidden?"hidden":"visible"}],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"}});
+function maybeGetNextAncestorModalLauncherPortal(element){let candidateElement=element&&element.parentElement;while(candidateElement&&!candidateElement.hasAttribute(ModalLauncherPortalAttributeName)){candidateElement=candidateElement.parentElement;}return candidateElement}function maybeGetPortalMountedModalHostElement(element){return maybeGetNextAncestorModalLauncherPortal(element)}
+
+function Portal({portal,children,reference}){if(portal){const modalHost=maybeGetPortalMountedModalHostElement(reference)||document.body;return jsx(FloatingPortal,{root:modalHost,children:children})}return children}
+
+const StyledDiv=addStyle("div");const SHIFT_PADDING=12;function Floating({content,children,placement="top",open=false,onOpenChange,portal=true,strategy="absolute",testId,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]});React.useEffect(()=>{if(prevOpenRef.current!==open){onOpenChange?.(open);prevOpenRef.current=open;}},[onOpenChange,open]);const trigger=React.useMemo(()=>{return React.cloneElement(children,{ref:refs.setReference})},[children,refs.setReference]);return jsxs(Fragment,{children:[trigger,open&&elements.reference&&jsx(Portal,{portal:portal,reference:elements.reference,children:jsxs(StyledDiv,{"data-testid":testId,"data-placement":placement,ref:refs.setFloating,style:[styles.floating,floatingStyles,{visibility:middlewareData.hide?.referenceHidden?"hidden":"visible"}],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"}});
 
 export { Floating };

package/dist/index.js

@@ -30,10 +30,14 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 function flatten(list){const result=[];if(!list){return result}else if(Array.isArray(list)){for(const item of list){result.push(...flatten(item));}}else {result.push(list);}return result}function processStyleList(style){const stylesheetStyles=[];const inlineStyles=[];if(!style){return {style:{},className:""}}const shouldInlineStyles=typeof global!=="undefined"&&global.SNAPSHOT_INLINE_APHRODITE;flatten(style).forEach(child=>{const _definition=child._definition;if(_definition!=null){if(shouldInlineStyles){const def={};for(const[key,value]of Object.entries(_definition)){def[key.replace(/-[a-z]/g,match=>match[1].toUpperCase())]=value;}inlineStyles.push(def);}else {stylesheetStyles.push(child);}}else {inlineStyles.push(child);}});const inlineStylesObject=Object.assign({},...inlineStyles);if(inlineStyles.length>0&&!shouldInlineStyles){const inlineStylesStyleSheet=aphrodite.StyleSheet.create({inlineStyles:inlineStylesObject});stylesheetStyles.push(inlineStylesStyleSheet.inlineStyles);}return {style:shouldInlineStyles?inlineStylesObject:{},className:aphrodite.css(...stylesheetStyles)}}const isHeaderRegex=/^h[1-6]$/;const styles$1=aphrodite.StyleSheet.create({text:{WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale"},header:{marginTop:0,marginBottom:0}});React__namespace.forwardRef(function Text({children,style,tag:Tag="span",testId,...otherProps},ref){const isHeader=isHeaderRegex.test(Tag);const styleAttributes=processStyleList([styles$1.text,isHeader&&styles$1.header,style]);const classNames=otherProps.className?[otherProps.className,styleAttributes.className].join(" "):styleAttributes.className;return jsxRuntime.jsx(Tag,{...otherProps,style:styleAttributes.style,className:classNames,"data-testid":testId,ref:ref,children:children})});function addStyle(Component,defaultStyle){return React__namespace.forwardRef((props,ref)=>{const{className,style,...otherProps}=props;const reset=typeof Component==="string"?overrides[Component]:null;const{className:aphroditeClassName,style:inlineStyles}=processStyleList([reset,defaultStyle,style]);return jsxRuntime.jsx(Component,{...otherProps,ref:ref,className:[aphroditeClassName,className].filter(Boolean).join(" "),style:inlineStyles})})}const overrides=aphrodite.StyleSheet.create({button:{margin:0,"::-moz-focus-inner":{border:0}}});const styles$2=aphrodite.StyleSheet.create({default:{alignItems:"stretch",borderWidth:0,borderStyle:"solid",boxSizing:"border-box",display:"flex",flexDirection:"column",margin:0,padding:0,position:"relative",zIndex:0,minHeight:0,minWidth:0}});React__namespace.forwardRef(function View(props,ref){const{testId,tag="div",...restProps}=props;const commonProps={...restProps,"data-testid":testId};const StyledTag=React.useMemo(()=>addStyle(tag,styles$2.default),[tag]);return jsxRuntime.jsx(StyledTag,{...commonProps,ref:ref})});(function(RenderState){RenderState["Initial"]="initial";RenderState["Standard"]="standard";return RenderState})({});(function(RenderStateInternal){RenderStateInternal["Root"]="root";RenderStateInternal["Initial"]="initial";RenderStateInternal["Standard"]="standard";return RenderStateInternal})({});const RenderStateContext=React__namespace.createContext("root");RenderStateContext.displayName="RenderStateContext";
 
-const ARROW_SIZE_INLINE=20;const ARROW_SIZE_BLOCK=10;
+const ARROW_SIZE_INLINE=20;const ARROW_SIZE_BLOCK=10;const ModalLauncherPortalAttributeName="data-modal-launcher-portal";
 
 const Arrow=React__namespace.forwardRef(function Arrow({context},ref){const style=context.placement.endsWith("top")?{filter:`drop-shadow(0 4px 2px ${wonderBlocksTokens.semanticColor.core.shadow.transparent.mid})`}:undefined;return jsxRuntime.jsx(react.FloatingArrow,{ref:ref,context:context,fill:wonderBlocksTokens.semanticColor.core.background.base.default,stroke:wonderBlocksTokens.semanticColor.core.border.neutral.subtle,strokeWidth:1,width:ARROW_SIZE_INLINE,height:ARROW_SIZE_BLOCK,style:style})});
 
-const StyledDiv=addStyle("div");const SHIFT_PADDING=12;function Floating({content,children,placement="top",open=false,onOpenChange,strategy="absolute",testId,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{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]});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})},[children,refs.setReference]);return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[trigger,open&&jsxRuntime.jsxs(StyledDiv,{"data-testid":testId,"data-placement":placement,ref:refs.setFloating,style:[styles.floating,floatingStyles,{visibility:middlewareData.hide?.referenceHidden?"hidden":"visible"}],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"}});
+function maybeGetNextAncestorModalLauncherPortal(element){let candidateElement=element&&element.parentElement;while(candidateElement&&!candidateElement.hasAttribute(ModalLauncherPortalAttributeName)){candidateElement=candidateElement.parentElement;}return candidateElement}function maybeGetPortalMountedModalHostElement(element){return maybeGetNextAncestorModalLauncherPortal(element)}
+
+function Portal({portal,children,reference}){if(portal){const modalHost=maybeGetPortalMountedModalHostElement(reference)||document.body;return jsxRuntime.jsx(react.FloatingPortal,{root:modalHost,children:children})}return children}
+
+const StyledDiv=addStyle("div");const SHIFT_PADDING=12;function Floating({content,children,placement="top",open=false,onOpenChange,portal=true,strategy="absolute",testId,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]});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})},[children,refs.setReference]);return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[trigger,open&&elements.reference&&jsxRuntime.jsx(Portal,{portal:portal,reference:elements.reference,children:jsxRuntime.jsxs(StyledDiv,{"data-testid":testId,"data-placement":placement,ref:refs.setFloating,style:[styles.floating,floatingStyles,{visibility:middlewareData.hide?.referenceHidden?"hidden":"visible"}],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"}});
 
 exports.Floating = Floating;

package/dist/util/constants.d.ts

@@ -1,2 +1,9 @@
 export declare const ARROW_SIZE_INLINE = 20;
 export declare const ARROW_SIZE_BLOCK = 10;
+/**
+ * The attribute used to identify a modal launcher portal.
+ *
+ * NOTE: This is the same as the ModalLauncherPortalAttributeName in the modal
+ * package. Make sure to update both when making changes.
+ */
+export declare const ModalLauncherPortalAttributeName = "data-modal-launcher-portal";

package/dist/util/maybe-get-portal-mounted-modal-host-element.d.ts

@@ -0,0 +1,9 @@
+/**
+ * From a given element, finds the next modal host that has been mounted in
+ * a modal portal.
+ * @param {?(Element | Text)} element The element whose ancestors are to be
+ * walked.
+ * @returns {?Element} The next portal-mounted modal host element.
+ * TODO(kevinb): look into getting rid of this
+ */
+export default function maybeGetPortalMountedModalHostElement(element?: Element | Text | null): Element | null | undefined;

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