@helpdice/ui 2.2.7 → 2.3.2

package/dist/notetip/index.js

@@ -3,9 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var reactDom = require('@floating-ui/react-dom');
+var reactDom = require('react-dom');
 var theme = require('@helpdice/theme');
-var reactDom$1 = require('react-dom');
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
@@ -596,6 +595,7 @@ function requireStyle () {
 var styleExports = requireStyle();
 var _JSXStyle = /*@__PURE__*/getDefaultExportFromCjs(styleExports);
 
+var OFFSET = 8;
 var Notetip = function Notetip(_ref) {
   var children = _ref.children,
     text = _ref.text,
@@ -608,6 +608,8 @@ var Notetip = function Notetip(_ref) {
     _ref$animation = _ref.animation,
     animation = _ref$animation === void 0 ? 'fade' : _ref$animation;
   var theme$1 = theme.useTheme();
+  var referenceRef = React.useRef(null);
+  var tooltipRef = React.useRef(null);
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -616,75 +618,84 @@ var Notetip = function Notetip(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     show = _useState4[0],
     setShow = _useState4[1];
-  var arrowRef = React.useRef(null);
-  var _useFloating = reactDom.useFloating({
-      placement: placement,
-      middleware: [reactDom.offset(8), reactDom.flip(), reactDom.shift({
-        padding: 5
-      }), reactDom.arrow({
-        element: arrowRef
-      })]
+  var _useState5 = React.useState({
+      top: 0,
+      left: 0
     }),
-    x = _useFloating.x,
-    y = _useFloating.y,
-    refs = _useFloating.refs,
-    strategy = _useFloating.strategy;
+    _useState6 = _slicedToArray(_useState5, 2),
+    coords = _useState6[0],
+    setCoords = _useState6[1];
   React.useEffect(function () {
     var timer;
-    if (open) {
-      timer = setTimeout(function () {
-        return setShow(true);
-      }, delay);
-    } else {
-      setShow(false);
-    }
+    if (open) timer = setTimeout(function () {
+      return setShow(true);
+    }, delay);else setShow(false);
     return function () {
       return clearTimeout(timer);
     };
   }, [open, delay]);
-  var handleMouseEnter = function handleMouseEnter() {
-    return setOpen(true);
-  };
-  var handleMouseLeave = function handleMouseLeave() {
-    return setOpen(false);
-  };
-  var handleTouchStart = function handleTouchStart() {
-    setOpen(true);
-    setTimeout(function () {
-      return setOpen(false);
-    }, 2000); // auto-hide
-  };
-
-  // const staticSide = {
-  //   top: 'bottom',
-  //   right: 'left',
-  //   bottom: 'top',
-  //   left: 'right',
-  // }[finalPlacement.split('-')[0]];
+  React.useLayoutEffect(function () {
+    if (!show || !referenceRef.current || !tooltipRef.current) return;
+    var refRect = referenceRef.current.getBoundingClientRect();
+    var tipRect = tooltipRef.current.getBoundingClientRect();
+    var top = 0;
+    var left = 0;
+    switch (placement) {
+      case 'top':
+        top = refRect.top - tipRect.height - OFFSET;
+        left = refRect.left + refRect.width / 2 - tipRect.width / 2;
+        break;
+      case 'bottom':
+        top = refRect.bottom + OFFSET;
+        left = refRect.left + refRect.width / 2 - tipRect.width / 2;
+        break;
+      case 'left':
+        top = refRect.top + refRect.height / 2 - tipRect.height / 2;
+        left = refRect.left - tipRect.width - OFFSET;
+        break;
+      case 'right':
+        top = refRect.top + refRect.height / 2 - tipRect.height / 2;
+        left = refRect.right + OFFSET;
+        break;
+    }
 
+    // Viewport collision handling
+    var padding = 5;
+    top = Math.max(padding, Math.min(top, window.innerHeight - tipRect.height - padding));
+    left = Math.max(padding, Math.min(left, window.innerWidth - tipRect.width - padding));
+    setCoords({
+      top: top,
+      left: left
+    });
+  }, [show, placement]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    ref: refs.setReference,
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    onTouchStart: handleTouchStart,
-    className: _JSXStyle.dynamic([["4210526695", [theme$1.palette.accents_1, duration, duration, duration]]]) + " " + "tooltip-reference"
-  }, children), show && x != null && y != null && text != null ? /*#__PURE__*/reactDom$1.createPortal(/*#__PURE__*/React.createElement("div", {
-    ref: refs.setFloating,
+    ref: referenceRef,
+    onMouseEnter: function onMouseEnter() {
+      return setOpen(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setOpen(false);
+    },
+    onTouchStart: function onTouchStart() {
+      setOpen(true);
+      setTimeout(function () {
+        return setOpen(false);
+      }, 2000);
+    },
+    className: _JSXStyle.dynamic([["633836393", [theme$1.palette.accents_1, duration, duration, duration]]])
+  }, children), show && /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/React.createElement("div", {
+    ref: tooltipRef,
     style: {
-      position: strategy,
-      top: y !== null && y !== void 0 ? y : 0,
-      left: x !== null && x !== void 0 ? x : 0,
-      zIndex: 9999,
-      // opacity: show ? 1 : 0,
-      // visibility: x == null || y == null ? 'hidden' : 'visible',
-      transitionProperty: 'opacity, transform',
+      position: 'fixed',
+      top: coords.top,
+      left: coords.left,
       transitionDuration: "".concat(duration, "ms")
     },
-    className: _JSXStyle.dynamic([["4210526695", [theme$1.palette.accents_1, duration, duration, duration]]]) + " " + "tooltip-box ".concat(animation)
-  }, text), document.body) : null, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "4210526695",
+    className: _JSXStyle.dynamic([["633836393", [theme$1.palette.accents_1, duration, duration, duration]]]) + " " + "tooltip-box ".concat(animation)
+  }, text), document.body), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "633836393",
     dynamic: [theme$1.palette.accents_1, duration, duration, duration]
-  }, ".tooltip-box.__jsx-style-dynamic-selector{background:".concat(theme$1.palette.accents_1, ";padding:4px 10px;border-radius:4px;font-size:12px;white-space:nowrap;z-index:9999;opacity:0;}.fade.__jsx-style-dynamic-selector{-webkit-animation:fadeIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;animation:fadeIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;}@-webkit-keyframes fadeIn-__jsx-style-dynamic-selector{from{opacity:0;}to{opacity:1;}}@keyframes fadeIn-__jsx-style-dynamic-selector{from{opacity:0;}to{opacity:1;}}.scale.__jsx-style-dynamic-selector{-webkit-animation:scaleIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;animation:scaleIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;}@-webkit-keyframes scaleIn-__jsx-style-dynamic-selector{from{opacity:0;-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}to{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}@keyframes scaleIn-__jsx-style-dynamic-selector{from{opacity:0;-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}to{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}.slide.__jsx-style-dynamic-selector{-webkit-animation:slideIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;animation:slideIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;}@-webkit-keyframes slideIn-__jsx-style-dynamic-selector{from{opacity:0;-webkit-transform:translateY(5px);-ms-transform:translateY(5px);transform:translateY(5px);}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}}@keyframes slideIn-__jsx-style-dynamic-selector{from{opacity:0;-webkit-transform:translateY(5px);-ms-transform:translateY(5px);transform:translateY(5px);}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}}")));
+  }, ".tooltip-box.__jsx-style-dynamic-selector{background:".concat(theme$1.palette.accents_1, ";padding:4px 10px;border-radius:4px;font-size:12px;white-space:nowrap;z-index:9999;opacity:0;}.fade.__jsx-style-dynamic-selector{-webkit-animation:fadeIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;animation:fadeIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;}.scale.__jsx-style-dynamic-selector{-webkit-animation:scaleIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;animation:scaleIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;}.slide.__jsx-style-dynamic-selector{-webkit-animation:slideIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;animation:slideIn-__jsx-style-dynamic-selector ").concat(duration, "ms ease forwards;}@-webkit-keyframes fadeIn-__jsx-style-dynamic-selector{to{opacity:1;}}@keyframes fadeIn-__jsx-style-dynamic-selector{to{opacity:1;}}@-webkit-keyframes scaleIn-__jsx-style-dynamic-selector{from{opacity:0;-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}to{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}@keyframes scaleIn-__jsx-style-dynamic-selector{from{opacity:0;-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}to{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}@-webkit-keyframes slideIn-__jsx-style-dynamic-selector{from{opacity:0;-webkit-transform:translateY(5px);-ms-transform:translateY(5px);transform:translateY(5px);}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}}@keyframes slideIn-__jsx-style-dynamic-selector{from{opacity:0;-webkit-transform:translateY(5px);-ms-transform:translateY(5px);transform:translateY(5px);}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}}")));
 };
 
 exports.default = Notetip;

package/dist/notetip/note-tip.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Placement } from '@floating-ui/react-dom';
+type Placement = 'top' | 'bottom' | 'left' | 'right';
 type AnimationVariant = 'fade' | 'scale' | 'slide';
 export type NotetipProps = {
     children: React.ReactNode;

package/dist/placeholder/empty.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-declare function Empty(): React.JSX.Element;
+declare const Empty: React.FC;
 export default Empty;

package/dist/placeholder/index.js

@@ -108,6 +108,9 @@ function _iterableToArrayLimit(r, l) {
 function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _objectDestructuringEmpty(t) {
+  if (null == t) throw new TypeError("Cannot destructure " + t);
+}
 function ownKeys(e, r) {
   var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
@@ -174,7 +177,8 @@ function _unsupportedIterableToArray(r, a) {
   }
 }
 
-function Empty() {
+var Empty = function Empty(_ref) {
+  _objectDestructuringEmpty(_ref);
   return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "10em",
@@ -473,7 +477,7 @@ function Empty() {
     opacity: "0.2",
     transform: "translate(-95.23 -55.03)"
   }));
-}
+};
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;

package/dist/popover/index.js

@@ -893,6 +893,108 @@ 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
+// }
+
 var getIconPosition = function getIconPosition(placement, offsetX, offsetY) {
   var offsetAbsolute = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '3px';
   var positions = {
@@ -1091,7 +1193,7 @@ var generateGetAllScaleProps = function generateGetAllScaleProps(props) {
   return getAllScaleProps;
 };
 
-var _excluded$3 = ["children"];
+var _excluded$2 = ["children"];
 var reduceScaleCoefficient = function reduceScaleCoefficient(scale) {
   if (scale === 1) return scale;
   var diff = Math.abs((scale - 1) / 2);
@@ -1101,7 +1203,7 @@ var withScale = function withScale(Render) {
   var ScaleFC = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref0, _ref1, _ref10, _ref11, _ref12, _ref13, _ref14, _ref15, _ref16, _ref17, _ref18, _ref19, _ref20, _ref21, _ref22, _ref23, _ref24, _ref25, _ref26, _ref27, _ref28, _ref29, _ref30, _ref31;
     var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$3);
+      props = _objectWithoutProperties(_ref, _excluded$2);
     var _useTheme = theme.useTheme(),
       layout = _useTheme.layout;
     var paddingLeft = props.paddingLeft,
@@ -1205,6 +1307,24 @@ var getRect = function getRect(ref) {
   });
 };
 
+// export const getRect = (
+//   ref: RefObject<HTMLElement | null>
+// ): ReactiveDomReact => {
+//   console.log('Parent Current', ref?.current);
+//   if (!ref?.current) return defaultRect
+
+//   const rect = ref.current.getBoundingClientRect()
+
+//   return {
+//     top: rect.top,
+//     left: rect.left,
+//     right: rect.right,
+//     bottom: rect.bottom,
+//     width: rect.width,
+//     height: rect.height,
+//   }
+// }
+
 var TooltipContent = function TooltipContent(_ref) {
   var children = _ref.children,
     parent = _ref.parent,
@@ -1229,6 +1349,9 @@ var TooltipContent = function TooltipContent(_ref) {
   }, [type, theme$1.palette]);
   var hasShadow = type === 'default';
   var classes = theme.useClasses('tooltip-content', className);
+
+  // console.log('Having Parent', parent);
+
   if (!parent) return null;
   var updateRect = function updateRect() {
     var position = getPosition(placement, getRect(parent), offset);
@@ -1239,7 +1362,15 @@ var TooltipContent = function TooltipContent(_ref) {
     return updateRect();
   });
   React.useEffect(function () {
-    updateRect();
+    window.addEventListener('scroll', updateRect, true);
+    return function () {
+      return window.removeEventListener('scroll', updateRect, true);
+    };
+  }, []);
+  React.useEffect(function () {
+    if (visible && parent !== null && parent !== void 0 && parent.current) {
+      updateRect();
+    }
   }, [visible]);
   var preventHandler = function preventHandler(event) {
     event.stopPropagation();
@@ -1283,7 +1414,6 @@ var useClickAway = function useClickAway(ref, handler) {
   }, [ref]);
 };
 
-var _excluded$2 = ["children", "initialVisible", "text", "offset", "placement", "portalClassName", "enterDelay", "leaveDelay", "trigger", "type", "className", "onVisibleChange", "hideArrow", "visible"];
 var TooltipComponent = function TooltipComponent(_ref) {
   var children = _ref.children,
     _ref$initialVisible = _ref.initialVisible,
@@ -1309,8 +1439,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$2);
+    customVisible = _ref.visible;
   var timer = React.useRef(undefined);
   var ref = React.useRef(null);
   var _useState = React.useState(initialVisible),
@@ -1373,7 +1502,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() {
@@ -1382,9 +1511,10 @@ var TooltipComponent = function TooltipComponent(_ref) {
     onMouseLeave: function onMouseLeave() {
       return mouseEventHandler(false);
     }
-  }, props, {
-    className: "jsx-418573366" + " " + (props && props.className != null && props.className || theme.useClasses('tooltip', className) || "")
-  }), children, /*#__PURE__*/React.createElement(TooltipContent, contentProps, text), /*#__PURE__*/React.createElement(_JSXStyle, {
+    // {...props}
+    ,
+    className: "jsx-418573366" + " " + (theme.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;}"));
 };
@@ -1469,9 +1599,9 @@ var PopoverComponent = function PopoverComponent(_ref) {
     visible: visible,
     onVisibleChange: onPopoverVisibleChange
   }, props), children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "622655983",
-    dynamic: [SCALES.pt(0.9), SCALES.pr(0), SCALES.pb(0.9), SCALES.pl(0)]
-  }, ".tooltip-content.popover > .inner{padding:".concat(SCALES.pt(0.9), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0.9), " ").concat(SCALES.pl(0), ";}"))));
+    id: "3577605772",
+    dynamic: [SCALES.pt(0.5), SCALES.pr(0), SCALES.pb(0.5), SCALES.pl(0)]
+  }, ".tooltip-content.popover > .inner{padding:".concat(SCALES.pt(0.5), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0.5), " ").concat(SCALES.pl(0), ";}"))));
 };
 PopoverComponent.displayName = 'Popover';
 var Popover = withScale(PopoverComponent);