@helpdice/ui 2.2.7 → 2.3.1

package/dist/table/index.js

@@ -119,6 +119,9 @@ function _nonIterableRest() {
 function _nonIterableSpread() {
   throw new TypeError("Invalid attempt to spread 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) {
@@ -977,7 +980,7 @@ var generateGetAllScaleProps = function generateGetAllScaleProps(props) {
   return getAllScaleProps;
 };
 
-var _excluded$k = ["children"];
+var _excluded$j = ["children"];
 var reduceScaleCoefficient = function reduceScaleCoefficient(scale) {
   if (scale === 1) return scale;
   var diff = Math.abs((scale - 1) / 2);
@@ -987,7 +990,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$k);
+      props = _objectWithoutProperties(_ref, _excluded$j);
     var _useTheme = theme.useTheme(),
       layout = _useTheme.layout;
     var paddingLeft = props.paddingLeft,
@@ -1070,7 +1073,7 @@ var withScale = function withScale(Render) {
   return ScaleFC;
 };
 
-var _excluded$j = ["label", "labelRight", "error", "color", "helperText", "type", "icon", "variant", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled", "fullWidth"];
+var _excluded$i = ["label", "labelRight", "error", "color", "helperText", "type", "icon", "variant", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled", "fullWidth"];
 var simulateChangeEvent = function simulateChangeEvent(el, event) {
   return _objectSpread2(_objectSpread2({}, event), {}, {
     target: el,
@@ -1115,7 +1118,7 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$fullWidth = _ref.fullWidth,
     fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
-    props = _objectWithoutProperties(_ref, _excluded$j);
+    props = _objectWithoutProperties(_ref, _excluded$i);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -1259,7 +1262,7 @@ tuple('hover', 'click');
 tuple('top', 'topStart', 'topEnd', 'left', 'leftStart', 'leftEnd', 'bottom', 'bottomStart', 'bottomEnd', 'right', 'rightStart', 'rightEnd');
 tuple('start', 'center', 'end', 'left', 'right');
 
-var _excluded$i = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "resize"];
+var _excluded$h = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "resize"];
 tuple('none', 'both', 'horizontal', 'vertical', 'initial', 'inherit');
 var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$type = _ref.type,
@@ -1279,7 +1282,7 @@ var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     placeholder = _ref.placeholder,
     _ref$resize = _ref.resize,
     resize = _ref$resize === void 0 ? 'none' : _ref$resize,
-    props = _objectWithoutProperties(_ref, _excluded$i);
+    props = _objectWithoutProperties(_ref, _excluded$h);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -1379,11 +1382,11 @@ var PasswordIcon = function PasswordIcon(_ref) {
 };
 var MemoPasswordIcon = /*#__PURE__*/React.memo(PasswordIcon);
 
-var _excluded$h = ["hideToggle", "children"];
+var _excluded$g = ["hideToggle", "children"];
 var InputPasswordComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var hideToggle = _ref.hideToggle,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$h);
+    props = _objectWithoutProperties(_ref, _excluded$g);
   var _useScale = useScale(),
     getAllScaleProps = _useScale.getAllScaleProps;
   var inputRef = React.useRef(null);
@@ -3219,7 +3222,7 @@ var repositionCursor = function repositionCursor(_ref) {
   };
 };
 
-var _excluded$g = ["allowDecimals", "allowNegativeValue", "id", "name", "className", "customInput", "decimalsLimit", "defaultValue", "disabled", "maxLength", "value", "onValueChange", "fixedDecimalLength", "placeholder", "decimalScale", "prefix", "suffix", "intlConfig", "fullWidth", "step", "min", "max", "disableGroupSeparators", "disableAbbreviations", "decimalSeparator", "groupSeparator", "onChange", "onFocus", "onBlur", "onKeyDown", "onKeyUp", "transformRawValue", "formatValueOnBlur", "children"];
+var _excluded$f = ["allowDecimals", "allowNegativeValue", "id", "name", "className", "customInput", "decimalsLimit", "defaultValue", "disabled", "maxLength", "value", "onValueChange", "fixedDecimalLength", "placeholder", "decimalScale", "prefix", "suffix", "intlConfig", "fullWidth", "step", "min", "max", "disableGroupSeparators", "disableAbbreviations", "decimalSeparator", "groupSeparator", "onChange", "onFocus", "onBlur", "onKeyDown", "onKeyUp", "transformRawValue", "formatValueOnBlur", "children"];
 var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$allowDecimals = _ref.allowDecimals,
     allowDecimals = _ref$allowDecimals === void 0 ? true : _ref$allowDecimals,
@@ -3261,7 +3264,7 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$formatValueOnBlu = _ref.formatValueOnBlur,
     formatValueOnBlur = _ref$formatValueOnBlu === void 0 ? true : _ref$formatValueOnBlu,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$g);
+    props = _objectWithoutProperties(_ref, _excluded$f);
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   var theme$1 = theme.useTheme();
@@ -3582,7 +3585,7 @@ var hasRequiredLodash;
 function requireLodash () {
 	if (hasRequiredLodash) return lodash$1.exports;
 	hasRequiredLodash = 1;
-	(function (module, exports) {
+	(function (module, exports$1) {
 (function() {
 
 		  /** Used as a safe reference for `undefined` in pre-ES5 environments. */
@@ -4013,7 +4016,7 @@ function requireLodash () {
 		  var root = freeGlobal || freeSelf || Function('return this')();
 
 		  /** Detect free variable `exports`. */
-		  var freeExports = exports && !exports.nodeType && exports;
+		  var freeExports = exports$1 && !exports$1.nodeType && exports$1;
 
 		  /** Detect free variable `module`. */
 		  var freeModule = freeExports && 'object' == 'object' && module && !module.nodeType && module;
@@ -20840,7 +20843,7 @@ var SelectDropdown = /*#__PURE__*/React.forwardRef(function (_ref, dropdownRef)
 });
 SelectDropdown.displayName = 'SelectDropdown';
 
-var _excluded$f = ["xs", "sm", "md", "lg", "xl", "justify", "direction", "alignItems", "alignContent", "children", "className"];
+var _excluded$e = ["xs", "sm", "md", "lg", "xl", "justify", "direction", "alignItems", "alignContent", "children", "className"];
 var getItemLayout = function getItemLayout(val) {
   var display = val === 0 ? 'display: none;' : 'display: inherit;';
   if (typeof val === 'number') {
@@ -20878,7 +20881,7 @@ var GridBasicItem = function GridBasicItem(_ref) {
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$f);
+    props = _objectWithoutProperties(_ref, _excluded$e);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -20918,12 +20921,12 @@ var GridBasicItem = function GridBasicItem(_ref) {
 };
 GridBasicItem.displayName = 'GridBasicItem';
 
-var _excluded$e = ["children", "className"];
+var _excluded$d = ["children", "className"];
 var GridComponent = function GridComponent(_ref) {
   var children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$e);
+    props = _objectWithoutProperties(_ref, _excluded$d);
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   var _styles$className = {
@@ -20943,7 +20946,7 @@ var GridComponent = function GridComponent(_ref) {
 GridComponent.displayName = 'Grid';
 var Grid = withScale(GridComponent);
 
-var _excluded$d = ["gap", "wrap", "children", "className"];
+var _excluded$c = ["gap", "wrap", "children", "className"];
 var GridContainerComponent = function GridContainerComponent(_ref) {
   var _ref$gap = _ref.gap,
     gap = _ref$gap === void 0 ? 0 : _ref$gap,
@@ -20952,7 +20955,7 @@ var GridContainerComponent = function GridContainerComponent(_ref) {
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$d);
+    props = _objectWithoutProperties(_ref, _excluded$c);
   var _useScale = useScale(),
     unit = _useScale.unit,
     SCALES = _useScale.SCALES;
@@ -21096,7 +21099,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function (_ref, inputRef) {
 });
 SelectInput.displayName = 'SelectInput';
 
-var _excluded$c = ["children", "label", "type", "disabled", "initialValue", "value", "icon", "onChange", "pure", "multiple", "clearable", "placeholder", "className", "dropdownClassName", "dropdownStyle", "disableMatchWidth", "getPopupContainer", "onDropdownVisibleChange"];
+var _excluded$b = ["children", "label", "type", "disabled", "initialValue", "value", "icon", "onChange", "pure", "multiple", "clearable", "placeholder", "className", "dropdownClassName", "dropdownStyle", "disableMatchWidth", "getPopupContainer", "onDropdownVisibleChange"];
 var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
   var children = _ref.children,
     label = _ref.label,
@@ -21125,7 +21128,7 @@ var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
     getPopupContainer = _ref.getPopupContainer,
     _ref$onDropdownVisibl = _ref.onDropdownVisibleChange,
     onDropdownVisibleChange = _ref$onDropdownVisibl === void 0 ? function () {} : _ref$onDropdownVisibl,
-    props = _objectWithoutProperties(_ref, _excluded$c);
+    props = _objectWithoutProperties(_ref, _excluded$b);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -21311,7 +21314,7 @@ var useWarning = function useWarning(message, component) {
   console.warn(log);
 };
 
-var _excluded$b = ["value", "className", "children", "disabled", "divider", "label", "preventAllEvents"];
+var _excluded$a = ["value", "className", "children", "disabled", "divider", "label", "preventAllEvents"];
 var SelectOptionComponent = function SelectOptionComponent(_ref) {
   var identValue = _ref.value,
     _ref$className = _ref.className,
@@ -21325,7 +21328,7 @@ var SelectOptionComponent = function SelectOptionComponent(_ref) {
     label = _ref$label === void 0 ? false : _ref$label,
     _ref$preventAllEvents = _ref.preventAllEvents,
     preventAllEvents = _ref$preventAllEvents === void 0 ? false : _ref$preventAllEvents,
-    props = _objectWithoutProperties(_ref, _excluded$b);
+    props = _objectWithoutProperties(_ref, _excluded$a);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -21520,19 +21523,19 @@ var TableHead = function TableHead(props) {
     className: _JSXStyle.dynamic([["4089411751", [theme$1.palette.background, stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme$1.palette.accents_5, theme$1.palette.accents_1, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.layout.radius, theme$1.layout.radius, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.layout.radius, theme$1.layout.radius]]])
   }, /*#__PURE__*/React.createElement("tr", {
     style: {
-      backgroundColor: theme$1.palette.background
+      backgroundColor: theme$1.palette.accents_2
     },
     className: _JSXStyle.dynamic([["4089411751", [theme$1.palette.background, stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme$1.palette.accents_5, theme$1.palette.accents_1, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.layout.radius, theme$1.layout.radius, theme$1.palette.border, theme$1.palette.border, theme$1.palette.border, theme$1.layout.radius, theme$1.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: _objectSpread2({
         // textAlign: `${column?.align} !important`,
         // paddingLeft: '0.3rem',
         // paddingRight: '0.3rem',
-        backgroundColor: theme$1.type == 'dark' ? theme$1.palette.accents_1 : theme$1.palette.background,
-        color: "".concat(column !== null && column !== void 0 && column.color ? column === null || column === void 0 ? void 0 : column.color : '#333'),
+        backgroundColor: theme$1.palette.accents_2,
+        color: "".concat(column !== null && column !== void 0 && column.color ? column === null || column === void 0 ? void 0 : column.color : theme$1.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,
@@ -21556,7 +21559,8 @@ var TableHead = function TableHead(props) {
 };
 TableHead.displayName = 'TableHead';
 
-function Empty() {
+var Empty = function Empty(_ref) {
+  _objectDestructuringEmpty(_ref);
   return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "10em",
@@ -21855,9 +21859,9 @@ function Empty() {
     opacity: "0.2",
     transform: "translate(-95.23 -55.03)"
   }));
-}
+};
 
-var _excluded$a = ["children", "tag", "className", "color"];
+var _excluded$9 = ["children", "tag", "className", "color"];
 var getTypeColor = function getTypeColor(type, palette) {
   var colors = {
     "default": 'inherit',
@@ -21875,7 +21879,7 @@ var TextChild = function TextChild(_ref) {
     className = _ref$className === void 0 ? '' : _ref$className,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'default' : _ref$color,
-    props = _objectWithoutProperties(_ref, _excluded$a);
+    props = _objectWithoutProperties(_ref, _excluded$9);
   var Component = tag;
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
@@ -21975,7 +21979,7 @@ var ButtonDrip = function ButtonDrip(_ref) {
 };
 ButtonDrip.displayName = 'ButtonDrip';
 
-var _excluded$9 = ["children", "type", "color", "className", "spaceRatio"];
+var _excluded$8 = ["children", "type", "color", "className", "spaceRatio"];
 var getIconBgColor = function getIconBgColor(type, palette, color) {
   var colors = {
     "default": palette.accents_6,
@@ -21995,7 +21999,7 @@ var LoadingComponent = function LoadingComponent(_ref) {
     className = _ref$className === void 0 ? '' : _ref$className,
     _ref$spaceRatio = _ref.spaceRatio,
     spaceRatio = _ref$spaceRatio === void 0 ? 1 : _ref$spaceRatio,
-    props = _objectWithoutProperties(_ref, _excluded$9);
+    props = _objectWithoutProperties(_ref, _excluded$8);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -22035,7 +22039,7 @@ var ButtonLoading = function ButtonLoading(_ref) {
 };
 ButtonLoading.displayName = 'ButtonLoading';
 
-var _excluded$8 = ["isRight", "isSingle", "children", "className"];
+var _excluded$7 = ["isRight", "isSingle", "children", "className"];
 var ButtonIcon = function ButtonIcon(_ref) {
   var _ref$isRight = _ref.isRight,
     isRight = _ref$isRight === void 0 ? false : _ref$isRight,
@@ -22043,7 +22047,7 @@ var ButtonIcon = function ButtonIcon(_ref) {
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$8);
+    props = _objectWithoutProperties(_ref, _excluded$7);
   var classes = theme.useClasses('icon', {
     right: isRight,
     single: isSingle
@@ -22336,7 +22340,7 @@ var getButtonDripColor = function getButtonDripColor(palette, props) {
   return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_2, 0.65);
 };
 
-var _excluded$7 = ["children", "disabled", "color", "loading", "shadow", "ghost", "effect", "round", "onClick", "auto", "icon", "type", "iconRight", "className", "crossOrigin"];
+var _excluded$6 = ["children", "disabled", "color", "loading", "shadow", "ghost", "effect", "round", "onClick", "auto", "icon", "type", "iconRight", "className", "crossOrigin"];
 var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
@@ -22385,7 +22389,7 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
     _filteredProps$classN = filteredProps.className,
     className = _filteredProps$classN === void 0 ? '' : _filteredProps$classN;
     filteredProps.crossOrigin;
-    var props = _objectWithoutProperties(filteredProps, _excluded$7);
+    var props = _objectWithoutProperties(filteredProps, _excluded$6);
   /* eslint-enable @typescript-eslint/no-unused-vars */
 
   var _useMemo = React.useMemo(function () {
@@ -22500,7 +22504,7 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
 ButtonComponent.displayName = 'Button';
 var Button = withScale(ButtonComponent);
 
-var _excluded$6 = ["h1", "h2", "h3", "h4", "h5", "h6", "p", "b", "small", "i", "span", "del", "em", "blockquote", "noWrap", "collapse", "children", "className"];
+var _excluded$5 = ["h1", "h2", "h3", "h4", "h5", "h6", "p", "b", "small", "i", "span", "del", "em", "blockquote", "noWrap", "collapse", "children", "className"];
 var _getModifierChild = function getModifierChild(tags, children) {
   if (!tags.length) return children;
   var nextTag = tags.slice(1, tags.length);
@@ -22544,7 +22548,7 @@ var TextComponent = function TextComponent(_ref) {
     children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$6);
+    props = _objectWithoutProperties(_ref, _excluded$5);
   var elements = {
     h1: h1,
     h2: h2,
@@ -22796,9 +22800,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 } }) => {
@@ -22834,7 +22836,7 @@ var TableBody = function TableBody(_ref) {
     // ) as unknown as TableDataItem
     // console.log(frow);
     var isRowSelected = selected.indexOf(row) !== -1;
-    var hoverColor = theme$1.type == 'dark' ? theme$1.palette.accents_1 : theme$1.palette.background;
+    var hoverColor = theme$1.palette.accents_1;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tr", {
       draggable: rowDraggable,
       role: "checkbox",
@@ -23028,13 +23030,13 @@ var TableColumn = function TableColumn(columnProps) {
 };
 TableColumn.displayName = 'TableColumn';
 
-var _excluded$5 = ["active", "children", "disabled", "onClick"];
+var _excluded$4 = ["active", "children", "disabled", "onClick"];
 var PaginationItem = function PaginationItem(_ref) {
   var active = _ref.active,
     children = _ref.children,
     disabled = _ref.disabled,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties(_ref, _excluded$5);
+    props = _objectWithoutProperties(_ref, _excluded$4);
   var theme$1 = theme.useTheme();
   var _useMemo = React.useMemo(function () {
       return [addColorAlpha(theme$1.palette.success, 0.1), addColorAlpha(theme$1.palette.success, 0.8)];
@@ -23072,10 +23074,10 @@ var usePaginationContext = function usePaginationContext() {
   return React.useContext(PaginationContext);
 };
 
-var _excluded$4 = ["children"];
+var _excluded$3 = ["children"];
 var PaginationPrevious = function PaginationPrevious(_ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$4);
+    props = _objectWithoutProperties(_ref, _excluded$3);
   var _usePaginationContext = usePaginationContext(),
     update = _usePaginationContext.update,
     isFirst = _usePaginationContext.isFirst;
@@ -23088,10 +23090,10 @@ var PaginationPrevious = function PaginationPrevious(_ref) {
 };
 PaginationPrevious.displayName = 'PaginationPrevious';
 
-var _excluded$3 = ["children"];
+var _excluded$2 = ["children"];
 var PaginationNext = function PaginationNext(_ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$3);
+    props = _objectWithoutProperties(_ref, _excluded$2);
   var _usePaginationContext = usePaginationContext(),
     update = _usePaginationContext.update,
     isLast = _usePaginationContext.isLast;
@@ -23250,7 +23252,7 @@ var PaginationPages = function PaginationPages(_ref) {
 };
 PaginationPages.displayName = 'PaginationPages';
 
-var _excluded$2 = ["page", "initialPage", "count", "limit", "children", "onChange", "className"];
+var _excluded$1 = ["page", "initialPage", "count", "limit", "children", "onChange", "className"];
 var PaginationComponent = function PaginationComponent(_ref) {
   var customPage = _ref.page,
     _ref$initialPage = _ref.initialPage,
@@ -23263,7 +23265,7 @@ var PaginationComponent = function PaginationComponent(_ref) {
     onChange = _ref.onChange,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$2);
+    props = _objectWithoutProperties(_ref, _excluded$1);
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   var _useCurrentState = theme.useCurrentState(initialPage),
@@ -23478,6 +23480,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 = {
@@ -23614,6 +23718,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,
@@ -23638,6 +23760,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);
@@ -23648,7 +23773,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();
@@ -23692,7 +23825,6 @@ var useClickAway = function useClickAway(ref, handler) {
   }, [ref]);
 };
 
-var _excluded$1 = ["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,
@@ -23718,8 +23850,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$1);
+    customVisible = _ref.visible;
   var timer = React.useRef(undefined);
   var ref = React.useRef(null);
   var _useState = React.useState(initialVisible),
@@ -23782,7 +23913,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() {
@@ -23791,9 +23922,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/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;