venice-ui 2.1.16 → 2.1.17

package/dist/cjs/Theme/Theme.js

@@ -17,6 +17,7 @@ exports.Theme = {
         accent_light: (0, polished_1.lighten)(0.2, exports.pallete.accent),
         black: "#000000",
         text: '#333333',
+        darkGray: ' #222222',
         gray_1: '#979797',
         gray_2: "#b7b7b7",
         gray_3: "#e3e3e3",

package/dist/cjs/components/Icons/Icon.js

@@ -1,24 +1,64 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Icon = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const Theme_1 = require("../../Theme/Theme");
 const Icon_styles_1 = require("./Icon.styles");
 const IconsPath_1 = require("./IconsPath");
+const Tooltip_1 = require("../Tooltip/Tooltip");
 const Icon = ({ size = 24, name = 'person', right = false, left = false, isActive = false, onClick = undefined, isDisabled = false, noPadding = false, iconColor = isDisabled ? Theme_1.mainTheme.iconDisabledColor : Theme_1.mainTheme.iconColor, iconHoverColor = Theme_1.mainTheme.iconHoverColor, iconBgColor = Theme_1.mainTheme.iconBgColor, iconBgHoverColor = isDisabled
     ? Theme_1.mainTheme.iconBgColor
-    : Theme_1.mainTheme.iconBgHoverColor, }) => {
+    : Theme_1.mainTheme.iconBgHoverColor, tooltip, }) => {
     const haveAction = Boolean(onClick);
+    const iconRef = (0, react_1.useRef)(null);
+    const [showTooltip, setShowTooltip] = (0, react_1.useState)(false);
+    const [tooltipPos, setTooltipPos] = (0, react_1.useState)({ top: 0, left: 0 });
+    const [showBelow, setShowBelow] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (showTooltip && iconRef.current) {
+            const rect = iconRef.current.getBoundingClientRect();
+            const tooltipHeight = 28;
+            const spaceAbove = rect.top;
+            const spaceBelow = window.innerHeight - rect.bottom;
+            setShowBelow(spaceBelow < tooltipHeight && spaceAbove > tooltipHeight);
+            setTooltipPos({
+                top: showBelow ? rect.bottom : rect.top,
+                left: rect.left + rect.width / 2 - 16,
+            });
+        }
+    }, [showTooltip, showBelow]);
     const handleClick = () => {
         if (!isDisabled && !!onClick) {
             onClick();
         }
     };
-    return (react_1.default.createElement(Icon_styles_1.IconElement, { onClick: handleClick, haveAction: haveAction, right: right, left: left, isDisabled: isDisabled, iconColor: iconColor, iconHoverColor: iconHoverColor, iconBgColor: iconBgColor, iconBgHoverColor: iconBgHoverColor, isActive: isActive, noPadding: noPadding },
-        react_1.default.createElement("svg", { width: size, height: size, viewBox: '0 0 24 24', preserveAspectRatio: "xMidYMid meet", x: "0", y: "0", name: name },
-            react_1.default.createElement("path", { d: IconsPath_1.iconsPath[name], fill: isActive ? iconHoverColor : iconColor }))));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Icon_styles_1.IconElement, { ref: iconRef, onClick: handleClick, haveAction: haveAction, right: right, left: left, isDisabled: isDisabled, iconColor: iconColor, iconHoverColor: iconHoverColor, iconBgColor: iconBgColor, iconBgHoverColor: iconBgHoverColor, isActive: isActive, noPadding: noPadding, onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false) },
+            react_1.default.createElement("svg", { width: size, height: size, viewBox: '0 0 24 24', preserveAspectRatio: "xMidYMid meet", x: "0", y: "0", name: name },
+                react_1.default.createElement("path", { d: IconsPath_1.iconsPath[name], fill: isActive ? iconHoverColor : iconColor }))),
+        tooltip && showTooltip && (react_1.default.createElement(Tooltip_1.Tooltip, { text: tooltip, position: tooltipPos, showBelow: showBelow }))));
 };
 exports.Icon = Icon;

package/dist/cjs/components/Icons/Icon.styles.js

@@ -9,6 +9,7 @@ const Theme_1 = require("../../Theme/Theme");
 exports.IconElement = styled_components_1.default.div `
   transition: 300ms;
   box-sizing: border-box;
+  position: relative;
   width: auto;
   display: inline-flex;
   border-radius: ${Theme_1.Theme.borderRadius.m};

package/dist/cjs/components/Tooltip/Tooltip.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = void 0;
+const react_1 = __importDefault(require("react"));
+const react_dom_1 = require("react-dom");
+const Tooltip_styles_1 = require("./Tooltip.styles");
+const Tooltip = ({ text, position, showBelow }) => {
+    return (0, react_dom_1.createPortal)(react_1.default.createElement(Tooltip_styles_1.TooltipWrapper, { position: position, showBelow: showBelow },
+        text,
+        react_1.default.createElement(Tooltip_styles_1.TooltipPivot, { showBelow: showBelow })), document.body);
+};
+exports.Tooltip = Tooltip;

package/dist/cjs/components/Tooltip/Tooltip.styles.js

@@ -0,0 +1,63 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipPivot = exports.TooltipWrapper = void 0;
+const styled_components_1 = __importStar(require("styled-components"));
+const Theme_1 = require("../../Theme/Theme");
+exports.TooltipWrapper = styled_components_1.default.div `
+  position: absolute;
+  top: ${(p) => (p.showBelow ? p.position.top + 8 : p.position.top - 36)}px;
+  left: ${(p) => p.position.left}px;
+  background: ${Theme_1.Theme.colors.darkGray};
+  color: ${Theme_1.Theme.colors.white};
+  padding: ${Theme_1.Theme.padding.s} ${Theme_1.Theme.padding.m};
+  border-radius: ${Theme_1.Theme.borderRadius.m};
+  font-size: ${Theme_1.Theme.fontSize.s};
+  z-index: 9999;
+  white-space: nowrap;
+  box-shadow: 0 2px 8px ${Theme_1.Theme.colors.overlayer};
+  pointer-events: none;
+`;
+exports.TooltipPivot = styled_components_1.default.span `
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+
+  ${({ showBelow }) => showBelow
+    ? (0, styled_components_1.css) `
+          top: -7px;
+          border-bottom: 7px solid #222;
+          border-top: none;
+        `
+    : (0, styled_components_1.css) `
+          bottom: -7px;
+          border-top: 7px solid #222;
+          border-bottom: none;
+        `}
+`;

package/dist/cjs/components/Tooltip/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Tooltip"), exports);

package/dist/cjs/index.js

@@ -40,4 +40,5 @@ __exportStar(require("./components/Sort"), exports);
 __exportStar(require("./components/Table"), exports);
 __exportStar(require("./components/Tile"), exports);
 __exportStar(require("./components/Toogle"), exports);
+__exportStar(require("./components/Tooltip"), exports);
 __exportStar(require("./components/Typography"), exports);

package/dist/esm/Theme/Theme.js

@@ -14,6 +14,7 @@ export const Theme = {
         accent_light: lighten(0.2, pallete.accent),
         black: "#000000",
         text: '#333333',
+        darkGray: ' #222222',
         gray_1: '#979797',
         gray_2: "#b7b7b7",
         gray_3: "#e3e3e3",

package/dist/esm/components/Icons/Icon.js

@@ -1,17 +1,37 @@
-import React from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { mainTheme } from '../../Theme/Theme';
 import { IconElement } from './Icon.styles';
 import { iconsPath } from './IconsPath';
+import { Tooltip } from '../Tooltip/Tooltip';
 export const Icon = ({ size = 24, name = 'person', right = false, left = false, isActive = false, onClick = undefined, isDisabled = false, noPadding = false, iconColor = isDisabled ? mainTheme.iconDisabledColor : mainTheme.iconColor, iconHoverColor = mainTheme.iconHoverColor, iconBgColor = mainTheme.iconBgColor, iconBgHoverColor = isDisabled
     ? mainTheme.iconBgColor
-    : mainTheme.iconBgHoverColor, }) => {
+    : mainTheme.iconBgHoverColor, tooltip, }) => {
     const haveAction = Boolean(onClick);
+    const iconRef = useRef(null);
+    const [showTooltip, setShowTooltip] = useState(false);
+    const [tooltipPos, setTooltipPos] = useState({ top: 0, left: 0 });
+    const [showBelow, setShowBelow] = useState(false);
+    useEffect(() => {
+        if (showTooltip && iconRef.current) {
+            const rect = iconRef.current.getBoundingClientRect();
+            const tooltipHeight = 28;
+            const spaceAbove = rect.top;
+            const spaceBelow = window.innerHeight - rect.bottom;
+            setShowBelow(spaceBelow < tooltipHeight && spaceAbove > tooltipHeight);
+            setTooltipPos({
+                top: showBelow ? rect.bottom : rect.top,
+                left: rect.left + rect.width / 2 - 16,
+            });
+        }
+    }, [showTooltip, showBelow]);
     const handleClick = () => {
         if (!isDisabled && !!onClick) {
             onClick();
         }
     };
-    return (React.createElement(IconElement, { onClick: handleClick, haveAction: haveAction, right: right, left: left, isDisabled: isDisabled, iconColor: iconColor, iconHoverColor: iconHoverColor, iconBgColor: iconBgColor, iconBgHoverColor: iconBgHoverColor, isActive: isActive, noPadding: noPadding },
-        React.createElement("svg", { width: size, height: size, viewBox: '0 0 24 24', preserveAspectRatio: "xMidYMid meet", x: "0", y: "0", name: name },
-            React.createElement("path", { d: iconsPath[name], fill: isActive ? iconHoverColor : iconColor }))));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(IconElement, { ref: iconRef, onClick: handleClick, haveAction: haveAction, right: right, left: left, isDisabled: isDisabled, iconColor: iconColor, iconHoverColor: iconHoverColor, iconBgColor: iconBgColor, iconBgHoverColor: iconBgHoverColor, isActive: isActive, noPadding: noPadding, onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false) },
+            React.createElement("svg", { width: size, height: size, viewBox: '0 0 24 24', preserveAspectRatio: "xMidYMid meet", x: "0", y: "0", name: name },
+                React.createElement("path", { d: iconsPath[name], fill: isActive ? iconHoverColor : iconColor }))),
+        tooltip && showTooltip && (React.createElement(Tooltip, { text: tooltip, position: tooltipPos, showBelow: showBelow }))));
 };

package/dist/esm/components/Icons/Icon.styles.js

@@ -3,6 +3,7 @@ import { Theme } from '../../Theme/Theme';
 export const IconElement = styled.div `
   transition: 300ms;
   box-sizing: border-box;
+  position: relative;
   width: auto;
   display: inline-flex;
   border-radius: ${Theme.borderRadius.m};

package/dist/esm/components/Tooltip/Tooltip.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { TooltipPivot, TooltipWrapper } from './Tooltip.styles';
+export const Tooltip = ({ text, position, showBelow }) => {
+    return createPortal(React.createElement(TooltipWrapper, { position: position, showBelow: showBelow },
+        text,
+        React.createElement(TooltipPivot, { showBelow: showBelow })), document.body);
+};

package/dist/esm/components/Tooltip/Tooltip.styles.js

@@ -0,0 +1,37 @@
+import styled, { css } from 'styled-components';
+import { Theme } from '../../Theme/Theme';
+export const TooltipWrapper = styled.div `
+  position: absolute;
+  top: ${(p) => (p.showBelow ? p.position.top + 8 : p.position.top - 36)}px;
+  left: ${(p) => p.position.left}px;
+  background: ${Theme.colors.darkGray};
+  color: ${Theme.colors.white};
+  padding: ${Theme.padding.s} ${Theme.padding.m};
+  border-radius: ${Theme.borderRadius.m};
+  font-size: ${Theme.fontSize.s};
+  z-index: 9999;
+  white-space: nowrap;
+  box-shadow: 0 2px 8px ${Theme.colors.overlayer};
+  pointer-events: none;
+`;
+export const TooltipPivot = styled.span `
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+
+  ${({ showBelow }) => showBelow
+    ? css `
+          top: -7px;
+          border-bottom: 7px solid #222;
+          border-top: none;
+        `
+    : css `
+          bottom: -7px;
+          border-top: 7px solid #222;
+          border-bottom: none;
+        `}
+`;

package/dist/esm/components/Tooltip/index.js

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

package/dist/esm/index.js

@@ -24,4 +24,5 @@ export * from './components/Sort';
 export * from './components/Table';
 export * from './components/Tile';
 export * from './components/Toogle';
+export * from './components/Tooltip';
 export * from './components/Typography';

package/dist/types/Theme/Theme.d.ts

@@ -13,6 +13,7 @@ export declare const Theme: {
         accent_light: string;
         black: string;
         text: string;
+        darkGray: string;
         gray_1: string;
         gray_2: string;
         gray_3: string;

package/dist/types/components/Icons/Icon.d.ts

@@ -12,5 +12,6 @@ export interface IIconActionProps {
     isDisabled?: boolean;
     isActive?: boolean;
     noPadding?: boolean;
+    tooltip?: string;
 }
 export declare const Icon: FC<IIconActionProps>;

package/dist/types/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+interface ITooltipProps {
+    text: string;
+    position: {
+        top: number;
+        left: number;
+    };
+    showBelow: boolean;
+}
+export declare const Tooltip: FC<ITooltipProps>;
+export {};

package/dist/types/components/Tooltip/Tooltip.styles.d.ts

@@ -0,0 +1,13 @@
+interface ITooltipWrapperProps {
+    position: {
+        top: number;
+        left: number;
+    };
+    showBelow: boolean;
+}
+export declare const TooltipWrapper: import("styled-components").StyledComponent<"div", any, ITooltipWrapperProps, never>;
+interface ITooltipPivotProps {
+    showBelow: boolean;
+}
+export declare const TooltipPivot: import("styled-components").StyledComponent<"span", any, ITooltipPivotProps, never>;
+export {};

package/dist/types/components/Tooltip/index.d.ts

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

package/dist/types/index.d.ts

@@ -24,4 +24,5 @@ export * from './components/Sort';
 export * from './components/Table';
 export * from './components/Tile';
 export * from './components/Toogle';
+export * from './components/Tooltip';
 export * from './components/Typography';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "venice-ui",
-  "version": "2.1.16",
+  "version": "2.1.17",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",