@khanacademy/wonder-blocks-floating 0.0.0-PR2828-20251023210924 → 0.0.0-PR2828-20251024012051

package/CHANGELOG.md

@@ -1,14 +1,8 @@
 # @khanacademy/wonder-blocks-floating
 
-## 0.0.0-PR2828-20251023210924
+## 0.0.0-PR2828-20251024012051
 
 ### Minor Changes
 
 - 440bcca: Add Floating package (experiment)
 - 7557bf9: Switch to @floating-ui/react-dom
-
-### Patch Changes
-
-- Updated dependencies [7557bf9]
-- Updated dependencies [8059bb7]
-    - @khanacademy/wonder-blocks-modal@0.0.0-PR2828-20251023210924

package/dist/es/index.js

@@ -1,50 +1,14 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import { useFloating, autoUpdate, hide, offset, flip, shift, arrow } from '@floating-ui/react-dom';
 import { StyleSheet, css } from 'aphrodite';
 import { semanticColor, border, boxShadow } from '@khanacademy/wonder-blocks-tokens';
 
-function checkDCE() {
-  /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
-  if (
-    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined' ||
-    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE !== 'function'
-  ) {
-    return;
-  }
-  if (process.env.NODE_ENV !== 'production') {
-    // This branch is unreachable because this function is only called
-    // in production, but the condition is true only in development.
-    // Therefore if the branch is still here, dead code elimination wasn't
-    // properly applied.
-    // Don't change the message. React DevTools relies on it. Also make sure
-    // this message doesn't occur elsewhere in this function, or it will cause
-    // a false positive.
-    throw new Error('^_^');
-  }
-  try {
-    // Verify that the code above has been dead code eliminated (DCE'd).
-    __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(checkDCE);
-  } catch (err) {
-    // DevTools shouldn't crash React, no matter what.
-    // We should still report in case we break this code.
-    console.error(err);
-  }
-}
-
-if (process.env.NODE_ENV === 'production') {
-  // DCE check should happen before ReactDOM bundle executes so that
-  // DevTools can report bad minification during injection.
-  checkDCE();
-  module.exports = require('./cjs/react-dom.production.min.js');
-} else {
-  module.exports = require('./cjs/react-dom.development.js');
-}
-
 const ModalLauncherPortalAttributeName="data-modal-launcher-portal";
 
 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 Floating({arrow:arrowElement,content,children,portal=true,placement="top",defaultOpen=false,showArrow=true,useFocusManager=true}){const[isOpen,setIsOpen]=React.useState(defaultOpen);const arrowRef=React.useRef(null);React.useEffect(()=>{setIsOpen(defaultOpen);},[defaultOpen]);const{refs,elements,floatingStyles,middlewareData}=useFloating({placement,whileElementsMounted:autoUpdate,middleware:[hide(),offset(20),flip(),shift({padding:12}),...showArrow?[arrow({element:arrowRef})]:[]]});const trigger=React.useMemo(()=>React.cloneElement(children,{ref:refs.setReference,...children.props}),[children,refs.setReference]);const floatingContainer=jsxs("div",{ref:refs.setFloating,style:{...floatingStyles,visibility:middlewareData.hide?.referenceHidden?"hidden":"visible"},className:css(styles.floating),children:[content,showArrow&&jsx("div",{ref:arrowRef,style:{position:"absolute",left:middlewareData.arrow?.x,top:middlewareData.arrow?.y},children:arrowElement})]});let renderedContent=null;if(portal){const root=maybeGetPortalMountedModalHostElement(elements.reference)||document.body;renderedContent=undefined(floatingContainer,root);}else {renderedContent=floatingContainer;}return jsxs(Fragment,{children:[trigger,isOpen&&renderedContent]})}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,maxWidth:288,boxShadow:boxShadow.mid,justifyContent:"center"}});
+function Floating({arrow:arrowElement,content,children,portal=true,placement="top",defaultOpen=false,showArrow=true,useFocusManager=true}){const[isOpen,setIsOpen]=React.useState(defaultOpen);const arrowRef=React.useRef(null);React.useEffect(()=>{setIsOpen(defaultOpen);},[defaultOpen]);const{refs,elements,floatingStyles,middlewareData}=useFloating({placement,whileElementsMounted:autoUpdate,middleware:[hide(),offset(20),flip(),shift({padding:12}),...showArrow?[arrow({element:arrowRef})]:[]]});const trigger=React.useMemo(()=>React.cloneElement(children,{ref:refs.setReference,...children.props}),[children,refs.setReference]);const floatingContainer=jsxs("div",{ref:refs.setFloating,style:{...floatingStyles,visibility:middlewareData.hide?.referenceHidden?"hidden":"visible"},className:css(styles.floating),children:[content,showArrow&&jsx("div",{ref:arrowRef,style:{position:"absolute",left:middlewareData.arrow?.x,top:middlewareData.arrow?.y},children:arrowElement})]});let renderedContent=null;if(portal){const root=maybeGetPortalMountedModalHostElement(elements.reference)||document.body;renderedContent=ReactDOM.createPortal(floatingContainer,root);}else {renderedContent=floatingContainer;}return jsxs(Fragment,{children:[trigger,isOpen&&renderedContent]})}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,maxWidth:288,boxShadow:boxShadow.mid,justifyContent:"center"}});
 
 export { Floating, maybeGetPortalMountedModalHostElement };

package/dist/index.js

@@ -4,72 +4,37 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var ReactDOM = require('react-dom');
 var reactDom = require('@floating-ui/react-dom');
 var aphrodite = require('aphrodite');
 var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
 
 function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
         });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
+    }
+    n["default"] = e;
+    return Object.freeze(n);
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-
-function checkDCE() {
-  /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
-  if (
-    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined' ||
-    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE !== 'function'
-  ) {
-    return;
-  }
-  if (process.env.NODE_ENV !== 'production') {
-    // This branch is unreachable because this function is only called
-    // in production, but the condition is true only in development.
-    // Therefore if the branch is still here, dead code elimination wasn't
-    // properly applied.
-    // Don't change the message. React DevTools relies on it. Also make sure
-    // this message doesn't occur elsewhere in this function, or it will cause
-    // a false positive.
-    throw new Error('^_^');
-  }
-  try {
-    // Verify that the code above has been dead code eliminated (DCE'd).
-    __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(checkDCE);
-  } catch (err) {
-    // DevTools shouldn't crash React, no matter what.
-    // We should still report in case we break this code.
-    console.error(err);
-  }
-}
-
-if (process.env.NODE_ENV === 'production') {
-  // DCE check should happen before ReactDOM bundle executes so that
-  // DevTools can report bad minification during injection.
-  checkDCE();
-  module.exports = require('./cjs/react-dom.production.min.js');
-} else {
-  module.exports = require('./cjs/react-dom.development.js');
-}
+var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 
 const ModalLauncherPortalAttributeName="data-modal-launcher-portal";
 
 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 Floating({arrow:arrowElement,content,children,portal=true,placement="top",defaultOpen=false,showArrow=true,useFocusManager=true}){const[isOpen,setIsOpen]=React__namespace.useState(defaultOpen);const arrowRef=React__namespace.useRef(null);React__namespace.useEffect(()=>{setIsOpen(defaultOpen);},[defaultOpen]);const{refs,elements,floatingStyles,middlewareData}=reactDom.useFloating({placement,whileElementsMounted:reactDom.autoUpdate,middleware:[reactDom.hide(),reactDom.offset(20),reactDom.flip(),reactDom.shift({padding:12}),...showArrow?[reactDom.arrow({element:arrowRef})]:[]]});const trigger=React__namespace.useMemo(()=>React__namespace.cloneElement(children,{ref:refs.setReference,...children.props}),[children,refs.setReference]);const floatingContainer=jsxRuntime.jsxs("div",{ref:refs.setFloating,style:{...floatingStyles,visibility:middlewareData.hide?.referenceHidden?"hidden":"visible"},className:aphrodite.css(styles.floating),children:[content,showArrow&&jsxRuntime.jsx("div",{ref:arrowRef,style:{position:"absolute",left:middlewareData.arrow?.x,top:middlewareData.arrow?.y},children:arrowElement})]});let renderedContent=null;if(portal){const root=maybeGetPortalMountedModalHostElement(elements.reference)||document.body;renderedContent=undefined(floatingContainer,root);}else {renderedContent=floatingContainer;}return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[trigger,isOpen&&renderedContent]})}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,maxWidth:288,boxShadow:wonderBlocksTokens.boxShadow.mid,justifyContent:"center"}});
+function Floating({arrow:arrowElement,content,children,portal=true,placement="top",defaultOpen=false,showArrow=true,useFocusManager=true}){const[isOpen,setIsOpen]=React__namespace.useState(defaultOpen);const arrowRef=React__namespace.useRef(null);React__namespace.useEffect(()=>{setIsOpen(defaultOpen);},[defaultOpen]);const{refs,elements,floatingStyles,middlewareData}=reactDom.useFloating({placement,whileElementsMounted:reactDom.autoUpdate,middleware:[reactDom.hide(),reactDom.offset(20),reactDom.flip(),reactDom.shift({padding:12}),...showArrow?[reactDom.arrow({element:arrowRef})]:[]]});const trigger=React__namespace.useMemo(()=>React__namespace.cloneElement(children,{ref:refs.setReference,...children.props}),[children,refs.setReference]);const floatingContainer=jsxRuntime.jsxs("div",{ref:refs.setFloating,style:{...floatingStyles,visibility:middlewareData.hide?.referenceHidden?"hidden":"visible"},className:aphrodite.css(styles.floating),children:[content,showArrow&&jsxRuntime.jsx("div",{ref:arrowRef,style:{position:"absolute",left:middlewareData.arrow?.x,top:middlewareData.arrow?.y},children:arrowElement})]});let renderedContent=null;if(portal){const root=maybeGetPortalMountedModalHostElement(elements.reference)||document.body;renderedContent=ReactDOM__namespace.createPortal(floatingContainer,root);}else {renderedContent=floatingContainer;}return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[trigger,isOpen&&renderedContent]})}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,maxWidth:288,boxShadow:wonderBlocksTokens.boxShadow.mid,justifyContent:"center"}});
 
 exports.Floating = Floating;
 exports.maybeGetPortalMountedModalHostElement = maybeGetPortalMountedModalHostElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-floating",
-  "version": "0.0.0-PR2828-20251023210924",
+  "version": "0.0.0-PR2828-20251024012051",
   "description": "Floating component for Wonder Blocks using Floating UI.",
   "main": "dist/index.js",
   "module": "dist/es/index.js",
@@ -13,12 +13,12 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "2.1.6",
-    "@khanacademy/wonder-blocks-modal": "0.0.0-PR2828-20251023210924",
     "@khanacademy/wonder-blocks-tokens": "14.0.0"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
-    "react": "18.2.0"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@khanacademy/wb-dev-build-settings": "3.2.0"

package/tsconfig-build.json

@@ -6,7 +6,7 @@
         "rootDir": "src",
     },
     "references": [
-        {"path": "../wonder-blocks-modal/tsconfig-build.json"},
         {"path": "../wonder-blocks-tokens/tsconfig-build.json"},
+        {"path": "../wonder-blocks-modal/tsconfig-build.json"},
     ]
 }