glints-aries 4.0.194 → 4.0.196

package/lib/@next/Tooltip/Tooltip.js

@@ -0,0 +1,140 @@
+"use strict";
+
+exports.__esModule = true;
+exports.Tooltip = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Portal = require("../Portal/Portal");
+var _Typography = require("../Typography");
+var _positionResolver = require("./positionResolver");
+var _positionResolverHelper = require("./positionResolverHelper");
+var _TooltipStyle = require("./TooltipStyle");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var topPositions = ['top-center', 'top-left', 'top-right'];
+var bottomPositions = ['bottom-center', 'bottom-left', 'bottom-right'];
+var rightPositions = ['right-middle', 'right-top', 'right-bottom'];
+var leftPositions = ['left-middle', 'left-top', 'left-bottom'];
+var allPositions = [].concat(topPositions, bottomPositions, rightPositions, leftPositions);
+var tooltipPositionResolvers = {
+  'top-center': function topCenter(tooltipRect, elementRect) {
+    return (0, _positionResolver.topPositionResolver)(tooltipRect, elementRect, [_positionResolverHelper.canAlignCenter, _positionResolverHelper.canAlignLeft, _positionResolverHelper.canAlignRight]);
+  },
+  'top-left': function topLeft(tooltipRect, elementRect) {
+    return (0, _positionResolver.topPositionResolver)(tooltipRect, elementRect, [_positionResolverHelper.canAlignLeft, _positionResolverHelper.canAlignCenter, _positionResolverHelper.canAlignRight]);
+  },
+  'top-right': function topRight(tooltipRect, elementRect) {
+    return (0, _positionResolver.topPositionResolver)(tooltipRect, elementRect, [_positionResolverHelper.canAlignRight, _positionResolverHelper.canAlignCenter, _positionResolverHelper.canAlignLeft]);
+  },
+  'bottom-center': function bottomCenter(tooltipRect, elementRect) {
+    return (0, _positionResolver.bottomPositionResolver)(tooltipRect, elementRect, [_positionResolverHelper.canAlignCenter, _positionResolverHelper.canAlignLeft, _positionResolverHelper.canAlignRight]);
+  },
+  'bottom-left': function bottomLeft(tooltipRect, elementRect) {
+    return (0, _positionResolver.bottomPositionResolver)(tooltipRect, elementRect, [_positionResolverHelper.canAlignLeft, _positionResolverHelper.canAlignCenter, _positionResolverHelper.canAlignRight]);
+  },
+  'bottom-right': function bottomRight(tooltipRect, elementRect) {
+    return (0, _positionResolver.bottomPositionResolver)(tooltipRect, elementRect, [_positionResolverHelper.canAlignRight, _positionResolverHelper.canAlignCenter, _positionResolverHelper.canAlignLeft]);
+  },
+  'right-middle': function rightMiddle(tooltipRect, elementRect) {
+    return (0, _positionResolver.rightPositionResolver)(tooltipRect, elementRect, [_positionResolverHelper.canAlignMiddle, _positionResolverHelper.canAlignTop, _positionResolverHelper.canAlignBottom]);
+  },
+  'right-top': function rightTop(tooltipRect, elementRect) {
+    return (0, _positionResolver.rightPositionResolver)(tooltipRect, elementRect, [_positionResolverHelper.canAlignTop, _positionResolverHelper.canAlignMiddle, _positionResolverHelper.canAlignBottom]);
+  },
+  'right-bottom': function rightBottom(tooltipRect, elementRect) {
+    return (0, _positionResolver.rightPositionResolver)(tooltipRect, elementRect, [_positionResolverHelper.canAlignBottom, _positionResolverHelper.canAlignMiddle, _positionResolverHelper.canAlignTop]);
+  },
+  'left-middle': function leftMiddle(tooltipRect, elementRect) {
+    return (0, _positionResolver.leftPositionResolver)(tooltipRect, elementRect, [_positionResolverHelper.canAlignMiddle, _positionResolverHelper.canAlignTop, _positionResolverHelper.canAlignBottom]);
+  },
+  'left-top': function leftTop(tooltipRect, elementRect) {
+    return (0, _positionResolver.leftPositionResolver)(tooltipRect, elementRect, [_positionResolverHelper.canAlignTop, _positionResolverHelper.canAlignMiddle, _positionResolverHelper.canAlignBottom]);
+  },
+  'left-bottom': function leftBottom(tooltipRect, elementRect) {
+    return (0, _positionResolver.leftPositionResolver)(tooltipRect, elementRect, [_positionResolverHelper.canAlignBottom, _positionResolverHelper.canAlignMiddle, _positionResolverHelper.canAlignTop]);
+  }
+};
+var defaultPosition = 'top-center';
+var Tooltip = function Tooltip(_ref) {
+  var children = _ref.children,
+    content = _ref.content,
+    _ref$preferredPositio = _ref.preferredPosition,
+    preferredPosition = _ref$preferredPositio === void 0 ? defaultPosition : _ref$preferredPositio;
+  var tooltipRef = (0, _react.useRef)(null);
+  var elRef = (0, _react.useRef)(null);
+  var tooltipPositionsHandlerRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(null),
+    toolTipCoord = _useState[0],
+    setToolTipCoord = _useState[1];
+  var _useState2 = (0, _react.useState)(false),
+    isActive = _useState2[0],
+    setIsActive = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    overridePosition = _useState3[0],
+    setOverridePosition = _useState3[1];
+  if (!allPositions.includes(preferredPosition)) {
+    preferredPosition = defaultPosition;
+    console.warn("\"" + preferredPosition + "\" is not a valid tooltip positon, \"" + defaultPosition + "\" will be used instead");
+  }
+  var position = overridePosition || preferredPosition;
+  var handleTooltipPositions = function handleTooltipPositions(tooltipRect, elRect, currentPosition) {
+    var resolver = tooltipPositionResolvers[position] || tooltipPositionResolvers[defaultPosition];
+    var newLeft = 0;
+    var newTop = 0;
+    if (position.startsWith('top')) {
+      newTop = elRect.top - tooltipRect.height - _positionResolverHelper.verticalBuffer;
+      newLeft = elRect.left + elRect.width / 2;
+    }
+    if (position.startsWith('bottom')) {
+      newTop = elRect.top + elRect.height + _positionResolverHelper.verticalBuffer;
+      newLeft = elRect.left + elRect.width / 2;
+    }
+    if (position.startsWith('left')) {
+      newTop = elRect.top + elRect.height / 2;
+      newLeft = elRect.left - tooltipRect.width - _positionResolverHelper.horizontalBuffer;
+    }
+    if (position.startsWith('right')) {
+      newTop = elRect.top + elRect.height / 2;
+      newLeft = elRect.left + elRect.width + _positionResolverHelper.horizontalBuffer;
+    }
+    setToolTipCoord({
+      top: newTop,
+      left: newLeft
+    });
+    var tooltipRectNew = new DOMRect(newLeft, newTop, tooltipRect.width, tooltipRect.height);
+    var resolvedPosition = resolver(tooltipRectNew, elRect);
+    if (!overridePosition && resolvedPosition !== currentPosition) {
+      setOverridePosition(resolvedPosition);
+    }
+  };
+  tooltipPositionsHandlerRef.current = handleTooltipPositions;
+  (0, _react.useEffect)(function () {
+    if (isActive) {
+      var _tooltipRef$current, _elRef$current;
+      tooltipPositionsHandlerRef.current(tooltipRef == null ? void 0 : (_tooltipRef$current = tooltipRef.current) == null ? void 0 : _tooltipRef$current.getClientRects()[0], elRef == null ? void 0 : (_elRef$current = elRef.current) == null ? void 0 : _elRef$current.getClientRects()[0], position);
+    }
+  }, [isActive, position]);
+  var contentMarkup = typeof content === 'string' ? /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    as: "div",
+    variant: "body1"
+  }, content) : content;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_TooltipStyle.StyledTooltipContainer, {
+    ref: elRef,
+    onMouseEnter: function onMouseEnter() {
+      return setIsActive(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsActive(false);
+    }
+  }, children), isActive && /*#__PURE__*/_react["default"].createElement(_Portal.Portal, null, /*#__PURE__*/_react["default"].createElement(_TooltipStyle.StyledTooltip, {
+    "data-position": position,
+    ref: tooltipRef,
+    style: {
+      top: (toolTipCoord == null ? void 0 : toolTipCoord.top) + 'px',
+      left: (toolTipCoord == null ? void 0 : toolTipCoord.left) + 'px',
+      visibility: toolTipCoord ? 'visible' : 'hidden'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_TooltipStyle.StyledTooltipArrow, {
+    className: "arrow"
+  }), contentMarkup)));
+};
+exports.Tooltip = Tooltip;

package/lib/@next/Tooltip/Tooltip.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Interactive: any;

package/lib/@next/Tooltip/TooltipAdaptiveBottom.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const AdaptiveBottomCenter: any;
+export declare const AdaptiveBottomLeft: any;
+export declare const AdaptiveBottomRight: any;

package/lib/@next/Tooltip/TooltipAdaptiveLeft.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const AdaptiveLeftMiddle: any;
+export declare const AdaptiveLeftTop: any;
+export declare const AdaptiveLeftBottom: any;

package/lib/@next/Tooltip/TooltipAdaptiveRight.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const AdaptiveRightMiddle: any;
+export declare const AdaptiveRightTop: any;
+export declare const AdaptiveRightBottom: any;

package/lib/@next/Tooltip/TooltipAdaptiveTop.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const AdaptiveTopCenter: any;
+export declare const AdaptiveTopLeft: any;
+export declare const AdaptiveTopRight: any;

package/lib/@next/Tooltip/TooltipStyle.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledTooltipContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTooltip: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTooltipArrow: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/@next/Tooltip/TooltipStyle.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.StyledTooltipContainer = exports.StyledTooltipArrow = exports.StyledTooltip = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var Breakpoints = _interopRequireWildcard(require("../utilities/breakpoints"));
+var _borderRadius = require("../utilities/borderRadius");
+var _colors = require("../utilities/colors");
+var _spacing = require("../utilities/spacing");
+var _positionResolverHelper = require("./positionResolverHelper");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var verticalMargin = _positionResolverHelper.verticalBuffer + "px";
+var arrowSize = '6px';
+var nonCentralArrowMargin = _positionResolverHelper.nonCenterArrowSpace + "px";
+var background = _colors.Neutral.B18;
+var StyledTooltipContainer = _styledComponents["default"].div.withConfig({
+  displayName: "TooltipStyle__StyledTooltipContainer",
+  componentId: "sc-37e5z7-0"
+})(["display:inline-block;position:relative;*{display:block;}"]);
+exports.StyledTooltipContainer = StyledTooltipContainer;
+var StyledTooltip = _styledComponents["default"].div.withConfig({
+  displayName: "TooltipStyle__StyledTooltip",
+  componentId: "sc-37e5z7-1"
+})(["position:absolute;text-align:left;height:fit-content;width:fit-content;max-width:320px;border-radius:", ";gap:10px;left:50%;transform:translateX(-50%);padding:", " ", ";color:", ";background:", ";z-index:100;overflow-wrap:break-word;line-height:1;&[data-position='top-left'],&[data-position='bottom-left']{transform:translateX( calc(100% * -1 + ", " + ", ") );}&[data-position='top-right'],&[data-position='bottom-right']{transform:translateX(calc((", " + ", ") * -1));}&[data-position='right-middle']{transform:translateX(0) translateY(-50%);}&[data-position='left-bottom'],&[data-position='right-bottom']{transform:translateY(calc((", " + ", ") * -1));}&[data-position='left-top'],&[data-position='right-top']{transform:translateY( calc(100% * -1 + (", " + ", ")) );}&[data-position='bottom-center'],&[data-position='bottom-left'],&[data-position='bottom-right']{top:calc((100% + ", "));}&[data-position='left-middle']{transform:translateX(0) translateY(-50%);}&[data-position='top-center'] .arrow,&[data-position='top-left'] .arrow,&[data-position='top-right'] .arrow{top:100%;border-top-color:", ";}&[data-position='top-left'] .arrow,&[data-position='bottom-left'] .arrow{left:calc(100% - ", " - ", ");}&[data-position='top-right'] .arrow,&[data-position='bottom-right'] .arrow{left:calc(", " + ", ");}&[data-position='right-middle'] .arrow,&[data-position='right-top'] .arrow,&[data-position='right-bottom'] .arrow{top:50%;left:calc(", " * -1);border-right-color:", ";}&[data-position='right-middle'] .arrow{transform:translateX(0) translateY(-50%);}&[data-position='left-bottom'] .arrow,&[data-position='right-bottom'] .arrow{top:", ";}&[data-position='bottom-center'] .arrow,&[data-position='bottom-left'] .arrow,&[data-position='bottom-right'] .arrow{bottom:100%;border-bottom-color:", ";}&[data-position='left-middle'] .arrow,&[data-position='left-top'] .arrow,&[data-position='left-bottom'] .arrow{left:auto;right:calc(", " * -2);border-left-color:", ";}&[data-position='left-middle'] .arrow{top:50%;transform:translateX(0) translateY(-50%);}&[data-position='left-top'] .arrow,&[data-position='right-top'] .arrow{top:unset;bottom:", ";}@media (max-width:", "){min-width:69px;}"], _borderRadius.borderRadius2, _spacing.space8, _spacing.space12, _colors.Neutral.B100, background, arrowSize, nonCentralArrowMargin, arrowSize, nonCentralArrowMargin, nonCentralArrowMargin, arrowSize, nonCentralArrowMargin, arrowSize, verticalMargin, background, arrowSize, nonCentralArrowMargin, arrowSize, nonCentralArrowMargin, arrowSize, background, nonCentralArrowMargin, background, arrowSize, background, nonCentralArrowMargin, Breakpoints.large);
+exports.StyledTooltip = StyledTooltip;
+var StyledTooltipArrow = _styledComponents["default"].div.withConfig({
+  displayName: "TooltipStyle__StyledTooltipArrow",
+  componentId: "sc-37e5z7-2"
+})(["content:' ';left:50%;border:solid transparent;height:0;width:0;position:absolute;pointer-events:none;border-width:", ";margin-left:calc(", " * -1);"], arrowSize, arrowSize);
+exports.StyledTooltipArrow = StyledTooltipArrow;

package/lib/@next/Tooltip/index.d.ts

@@ -0,0 +1 @@
+export * from './Tooltip';

package/lib/@next/Tooltip/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+exports.__esModule = true;
+var _Tooltip = require("./Tooltip");
+Object.keys(_Tooltip).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Tooltip[key]) return;
+  exports[key] = _Tooltip[key];
+});

package/lib/@next/Tooltip/positionResolver.d.ts

@@ -0,0 +1,6 @@
+import { PreferredHorizontalAligmentFuncsType, PreferredVerticalAligmentFuncsType } from './positionResolverHelper';
+import { TooltipPosition } from './Tooltip';
+export declare const topPositionResolver: (tooltipRect: DOMRect, elRect: DOMRect, preferredAligmentFuncs: PreferredHorizontalAligmentFuncsType[]) => TooltipPosition;
+export declare const bottomPositionResolver: (tooltipRect: DOMRect, elRect: DOMRect, preferredAligmentFuncs: PreferredHorizontalAligmentFuncsType[]) => TooltipPosition;
+export declare const leftPositionResolver: (tooltipRect: DOMRect, elRect: DOMRect, preferredAligmentFuncs: PreferredVerticalAligmentFuncsType[]) => TooltipPosition;
+export declare const rightPositionResolver: (tooltipRect: DOMRect, elRect: DOMRect, preferredAligmentFuncs: PreferredVerticalAligmentFuncsType[]) => TooltipPosition;

package/lib/@next/Tooltip/positionResolver.js

@@ -0,0 +1,189 @@
+"use strict";
+
+exports.__esModule = true;
+exports.topPositionResolver = exports.rightPositionResolver = exports.leftPositionResolver = exports.bottomPositionResolver = void 0;
+var _positionResolverHelper = require("./positionResolverHelper");
+var topPositionResolver = function topPositionResolver(tooltipRect, elRect, preferredAligmentFuncs) {
+  var horizontalPreferredAligmentFuncs = preferredAligmentFuncs;
+  var verticalPreferredAligmentFuncs = [_positionResolverHelper.canAlignMiddle, _positionResolverHelper.canAlignTop, _positionResolverHelper.canAlignBottom];
+  if ((0, _positionResolverHelper.canStayOnTop)(tooltipRect)) {
+    var alignResult = (0, _positionResolverHelper.tryCalculateAligment)({
+      preferredAlignmentFuncs: horizontalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (alignResult) {
+      return "top-" + alignResult;
+    }
+  }
+  if ((0, _positionResolverHelper.canFitOnTheLeft)(tooltipRect, elRect, _positionResolverHelper.horizontalBuffer)) {
+    var _alignResult = (0, _positionResolverHelper.tryCalculateAligment)({
+      preferredAlignmentFuncs: verticalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (_alignResult) {
+      return "left-" + _alignResult;
+    }
+  }
+  if ((0, _positionResolverHelper.canFitOnTheRight)(tooltipRect, elRect, _positionResolverHelper.horizontalBuffer)) {
+    var _alignResult2 = (0, _positionResolverHelper.tryCalculateAligment)({
+      preferredAlignmentFuncs: verticalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (_alignResult2) {
+      return "right-" + _alignResult2;
+    }
+  }
+  if ((0, _positionResolverHelper.canFitBelow)(tooltipRect, elRect, _positionResolverHelper.verticalBuffer)) {
+    var _alignResult3 = (0, _positionResolverHelper.tryCalculateAligment)({
+      preferredAlignmentFuncs: horizontalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (_alignResult3) {
+      return "bottom-" + _alignResult3;
+    }
+  }
+  return 'top-center';
+};
+exports.topPositionResolver = topPositionResolver;
+var bottomPositionResolver = function bottomPositionResolver(tooltipRect, elRect, preferredAligmentFuncs) {
+  var horizontalPreferredAligmentFuncs = preferredAligmentFuncs;
+  var verticalPreferredAligmentFuncs = [_positionResolverHelper.canAlignMiddle, _positionResolverHelper.canAlignTop, _positionResolverHelper.canAlignBottom];
+  if ((0, _positionResolverHelper.canStayOnBottom)(tooltipRect)) {
+    var alignResult = (0, _positionResolverHelper.tryCalculateAligment)({
+      preferredAlignmentFuncs: horizontalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (alignResult) {
+      return "bottom-" + alignResult;
+    }
+  }
+  if ((0, _positionResolverHelper.canFitOnTheLeft)(tooltipRect, elRect, _positionResolverHelper.horizontalBuffer)) {
+    var _alignResult4 = (0, _positionResolverHelper.tryCalculateAligment)({
+      preferredAlignmentFuncs: verticalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (_alignResult4) {
+      return "left-" + _alignResult4;
+    }
+  }
+  if ((0, _positionResolverHelper.canFitOnTheRight)(tooltipRect, elRect, _positionResolverHelper.horizontalBuffer)) {
+    var _alignResult5 = (0, _positionResolverHelper.tryCalculateAligment)({
+      preferredAlignmentFuncs: verticalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (_alignResult5) {
+      return "right-" + _alignResult5;
+    }
+  }
+  if ((0, _positionResolverHelper.canFitOnTheTop)(tooltipRect, elRect, _positionResolverHelper.verticalBuffer)) {
+    var _alignResult6 = (0, _positionResolverHelper.tryCalculateAligment)({
+      preferredAlignmentFuncs: horizontalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (_alignResult6) {
+      return "top-" + _alignResult6;
+    }
+  }
+  return 'bottom-center';
+};
+exports.bottomPositionResolver = bottomPositionResolver;
+var leftPositionResolver = function leftPositionResolver(tooltipRect, elRect, preferredAligmentFuncs) {
+  var horizontalPreferredAligmentFuncs = [_positionResolverHelper.canAlignCenter, _positionResolverHelper.canAlignLeft, _positionResolverHelper.canAlignRight];
+  var verticalPreferredAligmentFuncs = preferredAligmentFuncs;
+  if ((0, _positionResolverHelper.canStayOnLeft)(tooltipRect)) {
+    var alignResult = (0, _positionResolverHelper.tryCalculateAligment)({
+      preferredAlignmentFuncs: verticalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (alignResult) {
+      return "left-" + alignResult;
+    }
+  }
+  if ((0, _positionResolverHelper.canFitOnTheTop)(tooltipRect, elRect, _positionResolverHelper.horizontalBuffer)) {
+    var _alignResult7 = (0, _positionResolverHelper.tryCalculateAligment)({
+      preferredAlignmentFuncs: horizontalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (_alignResult7) {
+      return "top-" + _alignResult7;
+    }
+  }
+  if ((0, _positionResolverHelper.canFitOnTheRight)(tooltipRect, elRect, _positionResolverHelper.horizontalBuffer)) {
+    var _alignResult8 = (0, _positionResolverHelper.tryCalculateAligment)({
+      preferredAlignmentFuncs: verticalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (_alignResult8) {
+      return "right-" + _alignResult8;
+    }
+  }
+  if ((0, _positionResolverHelper.canFitBelow)(tooltipRect, elRect, _positionResolverHelper.verticalBuffer)) {
+    var _alignResult9 = (0, _positionResolverHelper.tryCalculateAligment)({
+      preferredAlignmentFuncs: horizontalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (_alignResult9) {
+      return "bottom-" + _alignResult9;
+    }
+  }
+  return 'left-middle';
+};
+exports.leftPositionResolver = leftPositionResolver;
+var rightPositionResolver = function rightPositionResolver(tooltipRect, elRect, preferredAligmentFuncs) {
+  var horizontalPreferredAligmentFuncs = [_positionResolverHelper.canAlignCenter, _positionResolverHelper.canAlignLeft, _positionResolverHelper.canAlignRight];
+  var verticalPreferredAligmentFuncs = preferredAligmentFuncs;
+  if ((0, _positionResolverHelper.canStayOnRight)(tooltipRect)) {
+    var alignResult = (0, _positionResolverHelper.tryCalculateAligment)({
+      preferredAlignmentFuncs: verticalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (alignResult) {
+      return "right-" + alignResult;
+    }
+  }
+  if ((0, _positionResolverHelper.canFitOnTheTop)(tooltipRect, elRect, _positionResolverHelper.horizontalBuffer)) {
+    var _alignResult10 = (0, _positionResolverHelper.tryCalculateAligment)({
+      preferredAlignmentFuncs: horizontalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (_alignResult10) {
+      return "top-" + _alignResult10;
+    }
+  }
+  if ((0, _positionResolverHelper.canFitOnTheLeft)(tooltipRect, elRect, _positionResolverHelper.horizontalBuffer)) {
+    var _alignResult11 = (0, _positionResolverHelper.tryCalculateAligment)({
+      preferredAlignmentFuncs: verticalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (_alignResult11) {
+      return "left-" + _alignResult11;
+    }
+  }
+  if ((0, _positionResolverHelper.canFitBelow)(tooltipRect, elRect, _positionResolverHelper.verticalBuffer)) {
+    var _alignResult12 = (0, _positionResolverHelper.tryCalculateAligment)({
+      preferredAlignmentFuncs: horizontalPreferredAligmentFuncs,
+      tooltipRect: tooltipRect,
+      elRect: elRect
+    });
+    if (_alignResult12) {
+      return "bottom-" + _alignResult12;
+    }
+  }
+  return 'right-middle';
+};
+exports.rightPositionResolver = rightPositionResolver;

package/lib/@next/Tooltip/positionResolverHelper.d.ts

@@ -0,0 +1,37 @@
+export declare const verticalBuffer = 8;
+export declare const horizontalBuffer = 8;
+export declare const nonCenterArrowSpace = 12;
+export declare type HorizontalAlignmentType = 'center' | 'left' | 'right';
+export declare type VerticalAlignmentType = 'middle' | 'top' | 'bottom';
+export declare type HorizontalAlignmentCalculatorResult = {
+    type: HorizontalAlignmentType;
+    result: boolean;
+};
+export declare type VerticalAlignmentCalculatorResult = {
+    type: VerticalAlignmentType;
+    result: boolean;
+};
+export declare type PreferredHorizontalAligmentFuncsType = (tooltipRect: DOMRect, elRect: DOMRect) => HorizontalAlignmentCalculatorResult;
+export declare type PreferredVerticalAligmentFuncsType = (tooltipRect: DOMRect, elRect: DOMRect) => VerticalAlignmentCalculatorResult;
+export declare type TryCalculateAlignmentArgs<T extends HorizontalAlignmentType | VerticalAlignmentType> = {
+    preferredAlignmentFuncs: T extends HorizontalAlignmentType ? PreferredHorizontalAligmentFuncsType[] : PreferredVerticalAligmentFuncsType[];
+    tooltipRect: DOMRect;
+    elRect: DOMRect;
+};
+export declare const getElementCenterPosition: (elRect: DOMRect) => number;
+export declare const getElementMiddlePosition: (elRect: DOMRect) => number;
+export declare const canFitOnTheTop: (tooltipRect: DOMRect, elRect: DOMRect, verticalMargin: number) => boolean;
+export declare const canFitBelow: (tooltipRect: DOMRect, elRect: DOMRect, verticalMargin: number) => boolean;
+export declare const canFitOnTheLeft: (tooltipRect: DOMRect, elRect: DOMRect, horizontalMargin: number) => boolean;
+export declare const canFitOnTheRight: (tooltipRect: DOMRect, elRect: DOMRect, horizontalMargin: number) => boolean;
+export declare const canAlignLeft: (tooltipRect: DOMRect, elRect: DOMRect) => HorizontalAlignmentCalculatorResult;
+export declare const canAlignRight: (tooltipRect: DOMRect, elRect: DOMRect) => HorizontalAlignmentCalculatorResult;
+export declare const canAlignCenter: (tooltipRect: DOMRect, elRect: DOMRect) => HorizontalAlignmentCalculatorResult;
+export declare const canAlignTop: (tooltipRect: DOMRect, elRect: DOMRect) => VerticalAlignmentCalculatorResult;
+export declare const canAlignBottom: (tooltipRect: DOMRect, elRect: DOMRect) => VerticalAlignmentCalculatorResult;
+export declare const canAlignMiddle: (tooltipRect: DOMRect, elRect: DOMRect) => VerticalAlignmentCalculatorResult;
+export declare const canStayOnTop: (tooltipRect: DOMRect) => boolean;
+export declare const canStayOnBottom: (tooltipRect: DOMRect) => boolean;
+export declare const canStayOnLeft: (tooltipRect: DOMRect) => boolean;
+export declare const canStayOnRight: (tooltipRect: DOMRect) => boolean;
+export declare const tryCalculateAligment: <T extends HorizontalAlignmentType | VerticalAlignmentType>(args: TryCalculateAlignmentArgs<T>) => HorizontalAlignmentType | VerticalAlignmentType;

package/lib/@next/Tooltip/positionResolverHelper.js

@@ -0,0 +1,130 @@
+"use strict";
+
+exports.__esModule = true;
+exports.verticalBuffer = exports.tryCalculateAligment = exports.nonCenterArrowSpace = exports.horizontalBuffer = exports.getElementMiddlePosition = exports.getElementCenterPosition = exports.canStayOnTop = exports.canStayOnRight = exports.canStayOnLeft = exports.canStayOnBottom = exports.canFitOnTheTop = exports.canFitOnTheRight = exports.canFitOnTheLeft = exports.canFitBelow = exports.canAlignTop = exports.canAlignRight = exports.canAlignMiddle = exports.canAlignLeft = exports.canAlignCenter = exports.canAlignBottom = void 0;
+var _viewPort = require("../../helpers/viewPort");
+function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+var verticalBuffer = 8;
+exports.verticalBuffer = verticalBuffer;
+var horizontalBuffer = 8;
+exports.horizontalBuffer = horizontalBuffer;
+var nonCenterArrowSpace = 12;
+// for non center position the position of the arrow is 12px from the most left or right, setting it to 14 to make sure it's nicely visible
+exports.nonCenterArrowSpace = nonCenterArrowSpace;
+var marginBuffer = nonCenterArrowSpace + 2;
+var getElementCenterPosition = function getElementCenterPosition(elRect) {
+  return elRect.left + elRect.width / 2;
+};
+exports.getElementCenterPosition = getElementCenterPosition;
+var getElementMiddlePosition = function getElementMiddlePosition(elRect) {
+  return elRect.bottom + elRect.height / 2;
+};
+exports.getElementMiddlePosition = getElementMiddlePosition;
+var canFitOnTheTop = function canFitOnTheTop(tooltipRect, elRect, verticalMargin) {
+  return elRect.top - (verticalMargin + tooltipRect.height) > 0;
+};
+exports.canFitOnTheTop = canFitOnTheTop;
+var canFitBelow = function canFitBelow(tooltipRect, elRect, verticalMargin) {
+  return elRect.bottom + verticalMargin + tooltipRect.height < (0, _viewPort.getViewportDimensions)().height;
+};
+exports.canFitBelow = canFitBelow;
+var canFitOnTheLeft = function canFitOnTheLeft(tooltipRect, elRect, horizontalMargin) {
+  return elRect.left - (horizontalMargin + tooltipRect.width) > 0;
+};
+exports.canFitOnTheLeft = canFitOnTheLeft;
+var canFitOnTheRight = function canFitOnTheRight(tooltipRect, elRect, horizontalMargin) {
+  return elRect.right + horizontalMargin + tooltipRect.width < (0, _viewPort.getViewportDimensions)().width;
+};
+exports.canFitOnTheRight = canFitOnTheRight;
+var canAlignLeft = function canAlignLeft(tooltipRect, elRect) {
+  var centerPosition = getElementCenterPosition(elRect);
+  var hasSpaceOnTheLeftSideOfArrow = centerPosition - (tooltipRect.width - marginBuffer) > 0;
+  var hasSpaceOnTheRightSideOfArrow = centerPosition + marginBuffer < (0, _viewPort.getViewportDimensions)().width;
+  return {
+    type: 'left',
+    result: hasSpaceOnTheLeftSideOfArrow && hasSpaceOnTheRightSideOfArrow
+  };
+};
+exports.canAlignLeft = canAlignLeft;
+var canAlignRight = function canAlignRight(tooltipRect, elRect) {
+  var centerPosition = getElementCenterPosition(elRect);
+  var hasSpaceOnTheRightSideOfArrow = centerPosition + (tooltipRect.width - marginBuffer) < (0, _viewPort.getViewportDimensions)().width;
+  var hasSpaceOnTheLeftSideOfArrow = centerPosition - marginBuffer > 0;
+  return {
+    type: 'right',
+    result: hasSpaceOnTheLeftSideOfArrow && hasSpaceOnTheRightSideOfArrow
+  };
+};
+exports.canAlignRight = canAlignRight;
+var canAlignCenter = function canAlignCenter(tooltipRect, elRect) {
+  var centerPosition = elRect.left + elRect.width / 2;
+  return {
+    type: 'center',
+    result: centerPosition - tooltipRect.width / 2 > 0 && centerPosition + tooltipRect.width / 2 < (0, _viewPort.getViewportDimensions)().width
+  };
+};
+exports.canAlignCenter = canAlignCenter;
+var canAlignTop = function canAlignTop(tooltipRect, elRect) {
+  var middlePosition = getElementMiddlePosition(elRect);
+  var hasSpaceOnTheTopOfArrow = middlePosition - (tooltipRect.height - marginBuffer) > 0;
+  var hasSpaceBelowTheArrow = middlePosition + marginBuffer < (0, _viewPort.getViewportDimensions)().width;
+  return {
+    type: 'top',
+    result: hasSpaceOnTheTopOfArrow && hasSpaceBelowTheArrow
+  };
+};
+exports.canAlignTop = canAlignTop;
+var canAlignBottom = function canAlignBottom(tooltipRect, elRect) {
+  var middlePosition = getElementMiddlePosition(elRect);
+  var hasSpaceOnTopOfArrow = middlePosition + (tooltipRect.height - marginBuffer) < (0, _viewPort.getViewportDimensions)().height;
+  var hasSpaceBelowTheArrow = middlePosition - marginBuffer > 0;
+  return {
+    type: 'bottom',
+    result: hasSpaceBelowTheArrow && hasSpaceOnTopOfArrow
+  };
+};
+exports.canAlignBottom = canAlignBottom;
+var canAlignMiddle = function canAlignMiddle(tooltipRect, elRect) {
+  var middlePosition = elRect.top + elRect.height / 2;
+  return {
+    type: 'middle',
+    result: middlePosition - tooltipRect.height / 2 > 0 && middlePosition + tooltipRect.height / 2 < (0, _viewPort.getViewportDimensions)().height
+  };
+};
+exports.canAlignMiddle = canAlignMiddle;
+var canStayOnTop = function canStayOnTop(tooltipRect) {
+  return tooltipRect.top > 0;
+};
+exports.canStayOnTop = canStayOnTop;
+var canStayOnBottom = function canStayOnBottom(tooltipRect) {
+  console.log('tooltipRect:', tooltipRect);
+  console.log('getViewportDimensions().height: ', (0, _viewPort.getViewportDimensions)().height);
+  return tooltipRect.bottom < (0, _viewPort.getViewportDimensions)().height;
+};
+exports.canStayOnBottom = canStayOnBottom;
+var canStayOnLeft = function canStayOnLeft(tooltipRect) {
+  return tooltipRect.left > 0;
+};
+exports.canStayOnLeft = canStayOnLeft;
+var canStayOnRight = function canStayOnRight(tooltipRect) {
+  return tooltipRect.right < (0, _viewPort.getViewportDimensions)().width;
+};
+exports.canStayOnRight = canStayOnRight;
+var tryCalculateAligment = function tryCalculateAligment(args) {
+  var preferredAlignmentFuncs = args.preferredAlignmentFuncs,
+    tooltipRect = args.tooltipRect,
+    elRect = args.elRect;
+  for (var _iterator = _createForOfIteratorHelperLoose(preferredAlignmentFuncs), _step; !(_step = _iterator()).done;) {
+    var alignmentFunc = _step.value;
+    var _alignmentFunc = alignmentFunc(tooltipRect, elRect),
+      result = _alignmentFunc.result,
+      type = _alignmentFunc.type;
+    if (result) {
+      return type;
+    }
+  }
+  return null;
+};
+exports.tryCalculateAligment = tryCalculateAligment;

package/lib/@next/index.d.ts

@@ -25,5 +25,6 @@ export { Spinner, SpinnerProps } from './Spinner';
 export { Tab, TabModel, TabProps, Tabs, TabsProps } from './Tabs';
 export { Tag, TagProps } from './Tag';
 export { TextInput, TextInputProps } from './TextInput';
+export { Tooltip, TooltipPosition, TooltipProps } from './Tooltip';
 export { Typography, TypographyProps } from './Typography';
 export { Breakpoints, BorderRadius, Colors, DropShadow, Fonts, Spacing };

package/lib/@next/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.useModal = exports.useIndexResourceState = exports.useAlert = exports.TypographyProps = exports.Typography = exports.TextInputProps = exports.TextInput = exports.TagProps = exports.Tag = exports.TabsProps = exports.Tabs = exports.TabProps = exports.TabModel = exports.Tab = exports.SpinnerProps = exports.Spinner = exports.Spacing = exports.SimplePagination = exports.RadioButtonProps = exports.RadioButton = exports.PrimaryButton = exports.PopoverProps = exports.Popover = exports.PaginationProps = exports.Pagination = exports.OutlineMonochromeButton = exports.OutlineButton = exports.NumberInputProps = exports.NumberInput = exports.ModalProvider = exports.ModalProps = exports.ModalContext = exports.Modal = exports.IndexTableProps = exports.IndexTable = exports.IconProps = exports.Icon = exports.Fonts = exports.EmptyState = exports.DropShadow = exports.Divider = exports.DestructiveButton = exports.CurrencyInputProps = exports.CurrencyInput = exports.Colors = exports.CheckboxProps = exports.Checkbox = exports.ButtonProps = exports.ButtonGroupProps = exports.ButtonGroup = exports.Button = exports.Breakpoints = exports.BorderRadius = exports.BannerProps = exports.Banner = exports.BadgeProps = exports.Badge = exports.AvatarProps = exports.Avatar = exports.AlertWithProvider = exports.AlertProvider = exports.AlertProps = exports.AlertContextProps = exports.AlertContext = exports.Alert = void 0;
+exports.useModal = exports.useIndexResourceState = exports.useAlert = exports.TypographyProps = exports.Typography = exports.TooltipProps = exports.TooltipPosition = exports.Tooltip = exports.TextInputProps = exports.TextInput = exports.TagProps = exports.Tag = exports.TabsProps = exports.Tabs = exports.TabProps = exports.TabModel = exports.Tab = exports.SpinnerProps = exports.Spinner = exports.Spacing = exports.SimplePagination = exports.RadioButtonProps = exports.RadioButton = exports.PrimaryButton = exports.PopoverProps = exports.Popover = exports.PaginationProps = exports.Pagination = exports.OutlineMonochromeButton = exports.OutlineButton = exports.NumberInputProps = exports.NumberInput = exports.ModalProvider = exports.ModalProps = exports.ModalContext = exports.Modal = exports.IndexTableProps = exports.IndexTable = exports.IconProps = exports.Icon = exports.Fonts = exports.EmptyState = exports.DropShadow = exports.Divider = exports.DestructiveButton = exports.CurrencyInputProps = exports.CurrencyInput = exports.Colors = exports.CheckboxProps = exports.Checkbox = exports.ButtonProps = exports.ButtonGroupProps = exports.ButtonGroup = exports.Button = exports.Breakpoints = exports.BorderRadius = exports.BannerProps = exports.Banner = exports.BadgeProps = exports.Badge = exports.AvatarProps = exports.Avatar = exports.AlertWithProvider = exports.AlertProvider = exports.AlertProps = exports.AlertContextProps = exports.AlertContext = exports.Alert = void 0;
 var BorderRadius = _interopRequireWildcard(require("./utilities/borderRadius"));
 exports.BorderRadius = BorderRadius;
 var Breakpoints = _interopRequireWildcard(require("./utilities/breakpoints"));
@@ -92,6 +92,10 @@ exports.TagProps = _Tag.TagProps;
 var _TextInput = require("./TextInput");
 exports.TextInput = _TextInput.TextInput;
 exports.TextInputProps = _TextInput.TextInputProps;
+var _Tooltip = require("./Tooltip");
+exports.Tooltip = _Tooltip.Tooltip;
+exports.TooltipPosition = _Tooltip.TooltipPosition;
+exports.TooltipProps = _Tooltip.TooltipProps;
 var _Typography = require("./Typography");
 exports.Typography = _Typography.Typography;
 exports.TypographyProps = _Typography.TypographyProps;

package/lib/helpers/viewPort.d.ts

@@ -0,0 +1,4 @@
+export declare const getViewportDimensions: () => {
+    width: number;
+    height: number;
+};