@helpdice/ui 2.2.7 → 2.3.2

package/esm/tooltip/placement.js

@@ -68,6 +68,108 @@ export var getPosition = function getPosition(placement, rect, offset) {
   };
   return positions[placement] || positions.top;
 };
+
+// export const getPosition = (
+//   placement: Placement,
+//   rect: ParentDomRect,
+//   offset: number,
+// ): TooltipPosition => {
+//   // console.log(rect);
+//   if (
+//     !rect ||
+//     rect.width <= 0 ||
+//     rect.height <= 0 ||
+//     Number.isNaN(rect.top) ||
+//     Number.isNaN(rect.left)
+//   ) {
+//     return {
+//       top: '0px',
+//       left: '0px',
+//       // move tooltip out of viewport safely until rect is valid
+//       transform: 'translate(-9999px, -9999px)',
+//     }
+//   }
+
+//   const viewportWidth = window.innerWidth
+//   const viewportHeight = window.innerHeight
+
+//   const clamp = (value: number, min: number, max: number) =>
+//     Math.min(Math.max(value, min), max)
+
+//   const centerX = rect.left + rect.width / 2
+//   const centerY = rect.top + rect.height / 2
+
+//   const safeTop = clamp(rect.top, 8, viewportHeight - 8)
+//   const safeBottom = clamp(rect.bottom, 8, viewportHeight - 8)
+//   const safeLeft = clamp(rect.left, 8, viewportWidth - 8)
+//   const safeRight = clamp(rect.right, 8, viewportWidth - 8)
+
+//   const positions: Record<Placement, TooltipPosition> = {
+//     top: {
+//       top: `${clamp(rect.top - offset, 8, viewportHeight - 8)}px`,
+//       left: `${clamp(centerX, 8, viewportWidth - 8)}px`,
+//       transform: 'translate(-50%, -100%)',
+//     },
+//     topStart: {
+//       top: `${clamp(rect.top - offset, 8, viewportHeight - 8)}px`,
+//       left: `${safeLeft}px`,
+//       transform: 'translate(0, -100%)',
+//     },
+//     topEnd: {
+//       top: `${clamp(rect.top - offset, 8, viewportHeight - 8)}px`,
+//       left: `${safeRight}px`,
+//       transform: 'translate(-100%, -100%)',
+//     },
+//     bottom: {
+//       top: `${clamp(rect.bottom + offset, 8, viewportHeight - 8)}px`,
+//       left: `${clamp(centerX, 8, viewportWidth - 8)}px`,
+//       transform: 'translate(-50%, 0)',
+//     },
+//     bottomStart: {
+//       top: `${clamp(rect.bottom + offset, 8, viewportHeight - 8)}px`,
+//       left: `${safeLeft}px`,
+//       transform: 'translate(0, 0)',
+//     },
+//     bottomEnd: {
+//       top: `${clamp(rect.bottom + offset, 8, viewportHeight - 8)}px`,
+//       left: `${safeRight}px`,
+//       transform: 'translate(-100%, 0)',
+//     },
+//     left: {
+//       top: `${clamp(centerY, 8, viewportHeight - 8)}px`,
+//       left: `${clamp(rect.left - offset, 8, viewportWidth - 8)}px`,
+//       transform: 'translate(-100%, -50%)',
+//     },
+//     leftStart: {
+//       top: `${safeTop}px`,
+//       left: `${clamp(rect.left - offset, 8, viewportWidth - 8)}px`,
+//       transform: 'translate(-100%, 0)',
+//     },
+//     leftEnd: {
+//       top: `${safeBottom}px`,
+//       left: `${clamp(rect.left - offset, 8, viewportWidth - 8)}px`,
+//       transform: 'translate(-100%, -100%)',
+//     },
+//     right: {
+//       top: `${clamp(centerY, 8, viewportHeight - 8)}px`,
+//       left: `${clamp(rect.right + offset, 8, viewportWidth - 8)}px`,
+//       transform: 'translate(0, -50%)',
+//     },
+//     rightStart: {
+//       top: `${safeTop}px`,
+//       left: `${clamp(rect.right + offset, 8, viewportWidth - 8)}px`,
+//       transform: 'translate(0, 0)',
+//     },
+//     rightEnd: {
+//       top: `${safeBottom}px`,
+//       left: `${clamp(rect.right + offset, 8, viewportWidth - 8)}px`,
+//       transform: 'translate(0, -100%)',
+//     },
+//   }
+
+//   return positions[placement] || positions.top
+// }
+
 export var getIconPosition = function getIconPosition(placement, offsetX, offsetY) {
   var offsetAbsolute = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '3px';
   var positions = {

package/esm/tooltip/tooltip-content.d.ts

@@ -1,7 +1,7 @@
-import React, { MutableRefObject } from 'react';
+import React, { RefObject } from 'react';
 import { Placement, SnippetTypes } from '../utils/prop-types';
 interface Props {
-    parent?: MutableRefObject<HTMLElement | null> | undefined;
+    parent?: RefObject<HTMLElement | null> | undefined;
     placement: Placement;
     type: SnippetTypes;
     visible: boolean;

package/esm/tooltip/tooltip-content.js

@@ -37,6 +37,9 @@ var TooltipContent = function TooltipContent(_ref) {
   }, [type, theme.palette]);
   var hasShadow = type === 'default';
   var classes = useClasses('tooltip-content', className);
+
+  // console.log('Having Parent', parent);
+
   if (!parent) return null;
   var updateRect = function updateRect() {
     var position = getPosition(placement, getRect(parent), offset);
@@ -47,7 +50,15 @@ var TooltipContent = function TooltipContent(_ref) {
     return updateRect();
   });
   useEffect(function () {
-    updateRect();
+    window.addEventListener('scroll', updateRect, true);
+    return function () {
+      return window.removeEventListener('scroll', updateRect, true);
+    };
+  }, []);
+  useEffect(function () {
+    if (visible && parent !== null && parent !== void 0 && parent.current) {
+      updateRect();
+    }
   }, [visible]);
   var preventHandler = function preventHandler(event) {
     event.stopPropagation();

package/esm/tooltip/tooltip.js

@@ -1,7 +1,4 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "initialVisible", "text", "offset", "placement", "portalClassName", "enterDelay", "leaveDelay", "trigger", "type", "className", "onVisibleChange", "hideArrow", "visible"];
 import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
 
@@ -36,8 +33,7 @@ var TooltipComponent = function TooltipComponent(_ref) {
     onVisibleChange = _ref$onVisibleChange === void 0 ? function () {} : _ref$onVisibleChange,
     _ref$hideArrow = _ref.hideArrow,
     hideArrow = _ref$hideArrow === void 0 ? false : _ref$hideArrow,
-    customVisible = _ref.visible,
-    props = _objectWithoutProperties(_ref, _excluded);
+    customVisible = _ref.visible;
   var timer = useRef(undefined);
   var ref = useRef(null);
   var _useState = useState(initialVisible),
@@ -100,7 +96,7 @@ var TooltipComponent = function TooltipComponent(_ref) {
     if (customVisible === undefined) return;
     changeVisible(customVisible);
   }, [customVisible]);
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/React.createElement("div", {
     ref: ref,
     onClick: clickEventHandler,
     onMouseEnter: function onMouseEnter() {
@@ -109,9 +105,10 @@ var TooltipComponent = function TooltipComponent(_ref) {
     onMouseLeave: function onMouseLeave() {
       return mouseEventHandler(false);
     }
-  }, props, {
-    className: "jsx-418573366" + " " + (props && props.className != null && props.className || useClasses('tooltip', className) || "")
-  }), children, /*#__PURE__*/React.createElement(TooltipContent, contentProps, text), /*#__PURE__*/React.createElement(_JSXStyle, {
+    // {...props}
+    ,
+    className: "jsx-418573366" + " " + (useClasses('tooltip', className) || "")
+  }, children, /*#__PURE__*/React.createElement(TooltipContent, contentProps, text), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "418573366"
   }, ".tooltip.jsx-418573366{width:-webkit-max-content;width:-moz-max-content;width:max-content;display:inline-block;}"));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helpdice/ui",
-  "version": "2.2.7",
+  "version": "2.3.2",
   "main": "dist/index.js",
   "types": "esm/index.d.ts",
   "unpkg": "dist/index.min.js",
@@ -25,7 +25,7 @@
     "build:after": "node scripts/move-built-in.js && node scripts/generate-exports.js",
     "build:types": "tsc -p ./scripts & tsc -p ./scripts --outDir ./esm",
     "build:package": "yarn build:rollup && yarn build:babel && yarn build:types && yarn build:after",
-    "release": "yarn publish --access public --non-interactive",
+    "release": "npm publish --registry=https://registry.npmjs.org/ --access public --non-interactive",
     "release:github": "npm publish --registry=https://npm.pkg.github.com"
   },
   "license": "MIT",
@@ -63,15 +63,15 @@
     "@babel/preset-typescript": "^7.14.5",
     "@babel/standalone": "^7.28.3",
     "@helpdice/icons": "^1.2.5",
-    "@helpdice/sdk": "^0.3.3",
+    "@helpdice/sdk": "^0.4.3",
     "@helpdice/utils": "^0.1.4",
-    "@helpdice/pro": "2.0.1",
+    "@helpdice/pro": "2.0.5",
     "@mapbox/rehype-prism": "^0.9.0",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
     "@monaco-editor/react": "^4.7.0",
-    "@next/bundle-analyzer": "^15.5.4",
-    "@next/mdx": "^15.5.4",
+    "@next/bundle-analyzer": "^16.1.1",
+    "@next/mdx": "^16.1.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "28.0.2",
     "@rollup/plugin-json": "^6.1.0",
@@ -96,11 +96,11 @@
     "fs-extra": "^11.3.0",
     "get-user-locale": "^3.0.0",
     "just-debounce-it": "^3.2.0",
-    "next": "^15.5.4",
+    "next": "^16.1.1",
     "prettier": "^3.4.2",
-    "react": "19.2.0",
+    "react": "19.2.3",
     "react-color": "^2.19.3",
-    "react-dom": "^19.2.0",
+    "react-dom": "^19.2.3",
     "react-live": "^4.1.8",
     "remark-gfm": "^4.0.1",
     "rollup": "^4.50.1",
@@ -140,9 +140,9 @@
     "tslib": "^2.8.1"
   },
   "peerDependencies": {
-    "@helpdice/theme": "^1.0.9",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "@helpdice/theme": "^1.1.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3"
   },
   "jest": {
     "globals": {