@khanacademy/wonder-blocks-floating 0.0.0-PR2842-20251029173610 → 0.0.0-PR2842-20251030173407

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @khanacademy/wonder-blocks-floating
 
-## 0.0.0-PR2842-20251029173610
+## 0.0.0-PR2842-20251030173407
 
 ### Minor Changes
 

package/dist/components/floating.d.ts

@@ -10,11 +10,6 @@ type FloatingProps = {
      * The content to display in the floating element.
      */
     content: React.ReactNode;
-    /**
-     * The padding to apply between the floating element and its boundary.
-     * @default 8
-     */
-    boundaryPadding?: number;
     /**
      * The placement of the floating element relative to the reference element.
      * @default "top"
@@ -41,12 +36,19 @@ type FloatingProps = {
      */
     testId?: string;
     /**
-     * The flip strategy to use.
+     * Whether to flip the floating element to the opposite side if there's not
+     * enough space.
+     *
+     * This middleware hanges the placement of the floating element to keep it
+     * in view.
      * @default true
      */
     flip?: boolean;
     /**
-     * Whether to hide the floating element when the reference element is hidden.
+     * Whether to hide the floating element when the reference element is
+     * hidden.
+     *
+     * Allows to visually hide the floating element when it is out of bounds.
      * @default true
      */
     hide?: boolean;
@@ -56,7 +58,7 @@ type FloatingProps = {
      */
     offset?: number;
     /**
-     * The shift strategy to use.
+     * Whether to shift the floating element along the axis to keep it in view.
      * @default true
      */
     shift?: boolean;
@@ -68,8 +70,20 @@ type FloatingProps = {
 };
 /**
  * A component that uses the Floating UI library to position a floating element
- * relative to a reference element. The floating element appears on hover or
- * focus.
+ * relative to a reference element.
+ *
+ * Please take a look at the
+ * [Accessibility](?path=/docs/packages-floating-floating-accessibility--docs)
+ * section for more information.
+ *
+ * ## Usage
+ * ```tsx
+ * import {Floating} from "@khanacademy/wonder-blocks-floating";
+ *
+ * <Floating content="Floating content" open={true}>
+ *     <Button>Trigger</Button>
+ * </Floating>
+ * ```
  */
-export default function Floating({ content, children, boundaryPadding, 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, strategy, testId, hide: hideProp, offset: offsetProp, flip: flipProp, shift: shiftProp, showArrow, }: FloatingProps): React.JSX.Element;
 export {};

package/dist/es/index.js

@@ -11,6 +11,6 @@ const ARROW_SIZE_INLINE=20;const ARROW_SIZE_BLOCK=10;
 
 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");function Floating({content,children,boundaryPadding=8,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:boundaryPadding,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"}});
+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"}});
 
 export { Floating };

package/dist/index.js

@@ -34,6 +34,6 @@ const ARROW_SIZE_INLINE=20;const ARROW_SIZE_BLOCK=10;
 
 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");function Floating({content,children,boundaryPadding=8,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:boundaryPadding,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"}});
+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"}});
 
 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-PR2842-20251029173610",
+  "version": "0.0.0-PR2842-20251030173407",
   "publishConfig": {
     "access": "public"
   },