@helpdice/ui 2.2.7 → 2.3.1

package/dist/tooltip/index.js

@@ -888,6 +888,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 = {
@@ -1086,7 +1188,7 @@ var generateGetAllScaleProps = function generateGetAllScaleProps(props) {
   return getAllScaleProps;
 };
 
-var _excluded$1 = ["children"];
+var _excluded = ["children"];
 var reduceScaleCoefficient = function reduceScaleCoefficient(scale) {
   if (scale === 1) return scale;
   var diff = Math.abs((scale - 1) / 2);
@@ -1096,7 +1198,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$1);
+      props = _objectWithoutProperties(_ref, _excluded);
     var _useTheme = theme.useTheme(),
       layout = _useTheme.layout;
     var paddingLeft = props.paddingLeft,
@@ -1200,6 +1302,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,
@@ -1224,6 +1344,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);
@@ -1234,7 +1357,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();
@@ -1278,7 +1409,6 @@ var useClickAway = function useClickAway(ref, handler) {
   }, [ref]);
 };
 
-var _excluded = ["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,
@@ -1304,8 +1434,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 = React.useRef(undefined);
   var ref = React.useRef(null);
   var _useState = React.useState(initialVisible),
@@ -1368,7 +1497,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() {
@@ -1377,9 +1506,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;}"));
 };

package/dist/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/circular-progress/Path.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 declare function Path({ className, counterClockwise, dashRatio, pathRadius, strokeWidth, style, }: {
     className?: string;
     counterClockwise: boolean;
@@ -6,5 +5,5 @@ declare function Path({ className, counterClockwise, dashRatio, pathRadius, stro
     pathRadius: number;
     strokeWidth: number;
     style?: object;
-}): React.JSX.Element;
+}): import("node_modules/@types/react").JSX.Element;
 export default Path;

package/esm/circular-progress/Path.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+// import * as React from 'react';
 import { VIEWBOX_CENTER_X, VIEWBOX_CENTER_Y } from './constants';
 function Path(_ref) {
   var className = _ref.className,

package/esm/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/esm/notetip/note-tip.js

@@ -1,9 +1,9 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _JSXStyle from "../styled-jsx.es.js";
-import React, { useState, useRef, useEffect } from 'react';
-import { useFloating, offset, flip, shift, arrow } from '@floating-ui/react-dom';
-import { useTheme } from '@helpdice/theme';
+import React, { useState, useRef, useEffect, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
+import { useTheme } from '@helpdice/theme';
+var OFFSET = 8;
 var Notetip = function Notetip(_ref) {
   var children = _ref.children,
     text = _ref.text,
@@ -16,6 +16,8 @@ var Notetip = function Notetip(_ref) {
     _ref$animation = _ref.animation,
     animation = _ref$animation === void 0 ? 'fade' : _ref$animation;
   var theme = useTheme();
+  var referenceRef = useRef(null);
+  var tooltipRef = useRef(null);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -24,74 +26,83 @@ var Notetip = function Notetip(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     show = _useState4[0],
     setShow = _useState4[1];
-  var arrowRef = useRef(null);
-  var _useFloating = useFloating({
-      placement: placement,
-      middleware: [offset(8), flip(), shift({
-        padding: 5
-      }), arrow({
-        element: arrowRef
-      })]
+  var _useState5 = 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];
   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]];
+  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.palette.accents_1, duration, duration, duration]]]) + " " + "tooltip-reference"
-  }, children), show && x != null && y != null && text != null ? /*#__PURE__*/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.palette.accents_1, duration, duration, duration]]])
+  }, children), show && /*#__PURE__*/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.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.palette.accents_1, duration, duration, duration]]]) + " " + "tooltip-box ".concat(animation)
+  }, text), document.body), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "633836393",
     dynamic: [theme.palette.accents_1, duration, duration, duration]
-  }, ".tooltip-box.__jsx-style-dynamic-selector{background:".concat(theme.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.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);}}")));
 };
 export default Notetip;

package/esm/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/esm/placeholder/empty.js

@@ -1,5 +1,7 @@
+import _objectDestructuringEmpty from "@babel/runtime/helpers/esm/objectDestructuringEmpty";
 import React from 'react';
-function Empty() {
+var Empty = function Empty(_ref) {
+  _objectDestructuringEmpty(_ref);
   return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "10em",
@@ -298,5 +300,5 @@ function Empty() {
     opacity: "0.2",
     transform: "translate(-95.23 -55.03)"
   }));
-}
+};
 export default Empty;

package/esm/popover/popover.js

@@ -76,9 +76,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);

package/esm/table/table-body.js

@@ -49,9 +49,7 @@ var TableBody = function TableBody(_ref) {
       newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));
     }
     setSelected(newSelected);
-    if (newSelected.length > 0 && onSelected) {
-      onSelected(newSelected);
-    }
+    onSelected && onSelected(newSelected);
   };
 
   // const handleSelectAllClick = (event: { target: { checked: any } }) => {
@@ -87,7 +85,7 @@ var TableBody = function TableBody(_ref) {
     // ) as unknown as TableDataItem
     // console.log(frow);
     var isRowSelected = selected.indexOf(row) !== -1;
-    var hoverColor = theme.type == 'dark' ? theme.palette.accents_1 : theme.palette.background;
+    var hoverColor = theme.palette.accents_1;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tr", {
       draggable: rowDraggable,
       role: "checkbox",

package/esm/table/table-head.js

@@ -138,19 +138,19 @@ var TableHead = function TableHead(props) {
     className: _JSXStyle.dynamic([["4089411751", [theme.palette.background, stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
   }, /*#__PURE__*/React.createElement("tr", {
     style: {
-      backgroundColor: theme.palette.background
+      backgroundColor: theme.palette.accents_2
     },
     className: _JSXStyle.dynamic([["4089411751", [theme.palette.background, stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
   }, columns.map(function (column, _index) {
     var _String2;
-    var dataName = (_String2 = String(column === null || column === void 0 ? void 0 : column.label)) === null || _String2 === void 0 ? void 0 : _String2.replace(' ', '_').toLowerCase();
+    var dataName = (_String2 = String(column === null || column === void 0 ? void 0 : column.prop)) === null || _String2 === void 0 ? void 0 : _String2.replace(' ', '_').toLowerCase();
     return /*#__PURE__*/React.createElement("th", {
       style: _extends({
         // textAlign: `${column?.align} !important`,
         // paddingLeft: '0.3rem',
         // paddingRight: '0.3rem',
-        backgroundColor: theme.type == 'dark' ? theme.palette.accents_1 : theme.palette.background,
-        color: "".concat(column !== null && column !== void 0 && column.color ? column === null || column === void 0 ? void 0 : column.color : '#333'),
+        backgroundColor: theme.palette.accents_2,
+        color: "".concat(column !== null && column !== void 0 && column.color ? column === null || column === void 0 ? void 0 : column.color : theme.palette.accents_6),
         whiteSpace: column !== null && column !== void 0 && column.noWrap ? 'nowrap' : 'normal'
       }, column === null || column === void 0 ? void 0 : column.style),
       "data-column": dataName,

package/esm/table/table.js

@@ -5,6 +5,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "cursorPagination", "previousCursor", "nextCursor", "hasMore", "onNextPage", "onPreviousPage", "onRow", "onCell", "onChange", "onFilters", "onPageChange", "showFilters", "stickyHeader", "textPlaceholder", "onSelected", "dataLength", "viewLength", "className", "rowClassName"];
 import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
+
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import TableHead from './table-head';
 import TableBody from './table-body';

package/esm/tooltip/helper.d.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject } from 'react';
+import { RefObject } from 'react';
 export interface ReactiveDomReact {
     top: number;
     bottom: number;
@@ -7,4 +7,4 @@ export interface ReactiveDomReact {
     width: number;
     height: number;
 }
-export declare const getRect: (ref: MutableRefObject<HTMLElement | null>) => ReactiveDomReact;
+export declare const getRect: (ref: RefObject<HTMLElement | null>) => ReactiveDomReact;

package/esm/tooltip/helper.js

@@ -18,4 +18,22 @@ export var getRect = function getRect(ref) {
     left: rect.left + document.documentElement.scrollLeft,
     right: rect.right + document.documentElement.scrollLeft
   });
-};
+};
+
+// 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,
+//   }
+// }