@veracity/vui 1.2.1 → 1.2.2

package/dist/cjs/popover/usePopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePopover.d.ts","sourceRoot":"","sources":["../../../src/popover/usePopover.ts"],"names":[],"mappings":";AACA,OAAc,EAAE,QAAQ,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,UAAU,CAAA;AAI/D,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAEpD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,GAAE,eAAoB;;;;;;;;;EA2G7D;AAED,oBAAY,cAAc,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAA"}
+{"version":3,"file":"usePopover.d.ts","sourceRoot":"","sources":["../../../src/popover/usePopover.ts"],"names":[],"mappings":";AACA,OAAc,EAAE,QAAQ,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,UAAU,CAAA;AAI/D,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAEpD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,GAAE,eAAoB;;;;;;;;;EA+G7D;AAED,oBAAY,cAAc,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAA"}

package/dist/cjs/popover/usePopover.js

@@ -24,9 +24,7 @@ const consts_1 = require("./consts");
  * Exposes functions used for ref callbacks on consuming components, programatic open/close methods and properties.
  */
 function usePopover(props = {}) {
-    const { closeOnBlur = true, closeOnEsc = true, defaultIsOpen = false, 
-    // disablePortal,
-    isOpen: isOpenProp, matchWidth, offset, onClose: onCloseProp, onOpen: onOpenProp, options, placement = 'bottom-start', trigger = 'click' } = props;
+    const { closeOnBlur = true, closeOnEsc = true, defaultIsOpen = false, flip = true, isOpen: isOpenProp, matchWidth, offset, onClose: onCloseProp, onOpen: onOpenProp, options, placement = 'bottom-start', trigger = 'click' } = props;
     const [isOpen, setIsOpen] = (0, react_1.useState)(isOpenProp !== null && isOpenProp !== void 0 ? isOpenProp : defaultIsOpen);
     const [instance, setInstance] = (0, react_1.useState)(null);
     const [reference, setReference] = (0, react_1.useState)(null);
@@ -49,7 +47,14 @@ function usePopover(props = {}) {
                 setIsOpen(true);
                 onOpen(instance);
                 onShow === null || onShow === void 0 ? void 0 : onShow(instance);
-            }, placement, plugins: [...(!isControlled && closeOnEsc ? [consts_1.closeOnEscPlugin] : []), ...plugins], popperOptions: Object.assign(Object.assign({}, popperOptions), { modifiers: [Object.assign(Object.assign({}, consts_1.matchWidthModifier), { enabled: !!matchWidth }), ...((_b = popperOptions.modifiers) !== null && _b !== void 0 ? _b : [])] }), showOnCreate: isOpenProp !== null && isOpenProp !== void 0 ? isOpenProp : defaultIsOpen, trigger: !isControlled ? trigger : 'manual' }, otherOptions);
+            }, placement, plugins: [...(!isControlled && closeOnEsc ? [consts_1.closeOnEscPlugin] : []), ...plugins], popperOptions: Object.assign(Object.assign({}, popperOptions), { modifiers: [
+                    {
+                        name: 'flip',
+                        enabled: flip
+                    },
+                    Object.assign(Object.assign({}, consts_1.matchWidthModifier), { enabled: !!matchWidth }),
+                    ...((_b = popperOptions.modifiers) !== null && _b !== void 0 ? _b : [])
+                ] }), showOnCreate: isOpenProp !== null && isOpenProp !== void 0 ? isOpenProp : defaultIsOpen, trigger: !isControlled ? trigger : 'manual' }, otherOptions);
     }, [closeOnBlur, closeOnEsc, offset, options, placement, trigger]);
     // Create a new Tippy instance
     (0, react_1.useEffect)(() => {
@@ -63,12 +68,10 @@ function usePopover(props = {}) {
     // Handle showing/hiding popup in controlled mode
     (0, react_1.useEffect)(() => {
         if (isControlled) {
-            if (isOpenProp) {
+            if (isOpenProp)
                 instance === null || instance === void 0 ? void 0 : instance.show();
-            }
-            else {
+            else
                 instance === null || instance === void 0 ? void 0 : instance.hide();
-            }
         }
     }, [isOpenProp]);
     return {

package/dist/cjs/popover/usePopover.types.d.ts

@@ -8,6 +8,8 @@ export declare type UsePopoverProps = {
     closeOnEsc?: boolean;
     /** Content is opened on first render. Uncontrolled mode. */
     defaultIsOpen?: boolean;
+    /** Content placement could be changed to the opposite depending on available space. */
+    flip?: boolean;
     /** Content is opened/closed by the consumer. Controlled mode. */
     isOpen?: boolean;
     /** Sets the content element width to be the same as trigger element. */

package/dist/cjs/popover/usePopover.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePopover.types.d.ts","sourceRoot":"","sources":["../../../src/popover/usePopover.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,UAAU,CAAA;AAEnE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEpC,oBAAY,cAAc,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,YAAY,CAAA;AAEpF,oBAAY,eAAe,GAAG;IAC5B,kFAAkF;IAClF,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,2DAA2D;IAC3D,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,4DAA4D;IAC5D,aAAa,CAAC,EAAE,OAAO,CAAA;IAEvB,iEAAiE;IACjE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,wEAAwE;IACxE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,oDAAoD;IACpD,MAAM,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAA;IAC7B,4CAA4C;IAC5C,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,UAAU,CAAC,KAAK,IAAI,CAAA;IAClD,2CAA2C;IAC3C,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,UAAU,CAAC,KAAK,IAAI,CAAA;IACjD,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAA;IAC7B,gFAAgF;IAChF,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,cAAc,GAAG,SAAS,CAAA;CACrC,CAAA"}
+{"version":3,"file":"usePopover.types.d.ts","sourceRoot":"","sources":["../../../src/popover/usePopover.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,UAAU,CAAA;AAEnE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEpC,oBAAY,cAAc,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,YAAY,CAAA;AAEpF,oBAAY,eAAe,GAAG;IAC5B,kFAAkF;IAClF,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,2DAA2D;IAC3D,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,4DAA4D;IAC5D,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,uFAAuF;IACvF,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,iEAAiE;IACjE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,wEAAwE;IACxE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,oDAAoD;IACpD,MAAM,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAA;IAC7B,4CAA4C;IAC5C,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,UAAU,CAAC,KAAK,IAAI,CAAA;IAClD,2CAA2C;IAC3C,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,UAAU,CAAC,KAAK,IAAI,CAAA;IACjD,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAA;IAC7B,gFAAgF;IAChF,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,cAAc,GAAG,SAAS,CAAA;CACrC,CAAA"}

package/dist/cjs/tooltip/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/tooltip/tooltip.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C;;;;;KAKK;AACL,eAAO,MAAM,OAAO,UAAW,YAAY,gBA8C1C,CAAA;AAED,eAAe,OAAO,CAAA"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/tooltip/tooltip.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAG9C;;;;;KAKK;AACL,eAAO,MAAM,OAAO,UAAW,YAAY,gBA0D1C,CAAA;AAED,eAAe,OAAO,CAAA"}

package/dist/cjs/tooltip/tooltip.js

@@ -4,12 +4,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importDefault(require("@tippyjs/react"));
+const react_2 = __importDefault(require("react"));
 const box_1 = __importDefault(require("../box"));
 const core_1 = require("../core");
 const link_1 = require("../link");
-const popover_1 = __importDefault(require("../popover"));
 const tooltip_setup_1 = require("./tooltip.setup");
+const tooltipContent_1 = require("./tooltipContent");
 /**
  * A simple text popup hint.
  *
@@ -19,15 +20,20 @@ const tooltip_setup_1 = require("./tooltip.setup");
 const Tooltip = (props) => {
     const { children, fontSize = '16px', linkText, linkProps, maxWidth = '400px', text = 'demo', placement = 'top' } = props;
     const isDesktop = (0, core_1.useUp)('md');
-    return (react_1.default.createElement(popover_1.default, { placement: placement, trigger: "mouseenter" },
-        react_1.default.createElement(popover_1.default.Trigger, { as: box_1.default, display: "inline-flex" }, children),
-        react_1.default.createElement(popover_1.default.Content, { bg: tooltip_setup_1.color, color: "white", fontSize: fontSize, m: 1, maxW: maxWidth, p: 1, pl: 2, pr: 2 },
-            isDesktop && (react_1.default.createElement(box_1.default, { bg: tooltip_setup_1.color, bottom: tooltip_setup_1.pointerPlacement[placement].bottom, h: `${tooltip_setup_1.pointerSize}px`, left: tooltip_setup_1.pointerPlacement[placement].left, position: "absolute", right: tooltip_setup_1.pointerPlacement[placement].right, top: tooltip_setup_1.pointerPlacement[placement].top, transform: `translate(${tooltip_setup_1.pointerPlacement[placement].translate}) rotate(45deg)`, w: `${tooltip_setup_1.pointerSize}px` })),
-            react_1.default.createElement(core_1.v.div, null,
+    return (react_2.default.createElement(react_1.default, { content: react_2.default.createElement(tooltipContent_1.TooltipContent, { fontSize: fontSize, maxWidth: maxWidth },
+            isDesktop && (react_2.default.createElement(box_1.default, { bg: tooltip_setup_1.color, bottom: tooltip_setup_1.pointerPlacement[placement].bottom, h: `${tooltip_setup_1.pointerSize}px`, left: tooltip_setup_1.pointerPlacement[placement].left, position: "absolute", right: tooltip_setup_1.pointerPlacement[placement].right, top: tooltip_setup_1.pointerPlacement[placement].top, transform: `translate(${tooltip_setup_1.pointerPlacement[placement].translate}) rotate(45deg)`, w: `${tooltip_setup_1.pointerSize}px` })),
+            react_2.default.createElement(core_1.v.div, null,
                 text,
-                !!linkText && (react_1.default.createElement(react_1.default.Fragment, null,
+                !!linkText && (react_2.default.createElement(react_2.default.Fragment, null,
                     "\u00A0",
-                    react_1.default.createElement(link_1.Link, Object.assign({ variant: "light" }, linkProps), linkText)))))));
+                    react_2.default.createElement(link_1.Link, Object.assign({ variant: "light" }, linkProps), linkText))))), interactive: true, offset: [0, 2], placement: placement, popperOptions: {
+            modifiers: [
+                {
+                    name: 'flip',
+                    enabled: false
+                }
+            ]
+        } }, children));
 };
 exports.Tooltip = Tooltip;
 exports.default = exports.Tooltip;

package/dist/cjs/tooltip/tooltipContent.d.ts

@@ -0,0 +1,3 @@
+import { TooltipProps } from './tooltip.types';
+export declare const TooltipContent: (props: TooltipProps) => JSX.Element;
+//# sourceMappingURL=tooltipContent.d.ts.map

package/dist/cjs/tooltip/tooltipContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltipContent.d.ts","sourceRoot":"","sources":["../../../src/tooltip/tooltipContent.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C,eAAO,MAAM,cAAc,UAAW,YAAY,gBAoBjD,CAAA"}

package/dist/cjs/tooltip/tooltipContent.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipContent = void 0;
+const react_1 = __importDefault(require("react"));
+const box_1 = __importDefault(require("../box"));
+const tooltip_setup_1 = require("./tooltip.setup");
+const TooltipContent = (props) => {
+    const { children, fontSize = '16px', maxWidth = '400px' } = props;
+    return (react_1.default.createElement(box_1.default, { bg: tooltip_setup_1.color, borderRadius: "md", boxShadow: "2", className: "vui-tooltip-content", color: "white", fontSize: fontSize, m: 1, maxW: maxWidth, overflowY: "auto", p: 1, pl: 2, pr: 2 }, children));
+};
+exports.TooltipContent = TooltipContent;

package/dist/esm/popover/usePopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePopover.d.ts","sourceRoot":"","sources":["../../../src/popover/usePopover.ts"],"names":[],"mappings":";AACA,OAAc,EAAE,QAAQ,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,UAAU,CAAA;AAI/D,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAEpD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,GAAE,eAAoB;;;;;;;;;EA2G7D;AAED,oBAAY,cAAc,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAA"}
+{"version":3,"file":"usePopover.d.ts","sourceRoot":"","sources":["../../../src/popover/usePopover.ts"],"names":[],"mappings":";AACA,OAAc,EAAE,QAAQ,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,UAAU,CAAA;AAI/D,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAEpD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,GAAE,eAAoB;;;;;;;;;EA+G7D;AAED,oBAAY,cAAc,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAA"}

package/dist/esm/popover/usePopover.js

@@ -8,9 +8,7 @@ import { closeOnEscPlugin, matchWidthModifier } from './consts';
  * Exposes functions used for ref callbacks on consuming components, programatic open/close methods and properties.
  */
 export default function usePopover(props = {}) {
-    const { closeOnBlur = true, closeOnEsc = true, defaultIsOpen = false, 
-    // disablePortal,
-    isOpen: isOpenProp, matchWidth, offset, onClose: onCloseProp, onOpen: onOpenProp, options, placement = 'bottom-start', trigger = 'click' } = props;
+    const { closeOnBlur = true, closeOnEsc = true, defaultIsOpen = false, flip = true, isOpen: isOpenProp, matchWidth, offset, onClose: onCloseProp, onOpen: onOpenProp, options, placement = 'bottom-start', trigger = 'click' } = props;
     const [isOpen, setIsOpen] = useState(isOpenProp ?? defaultIsOpen);
     const [instance, setInstance] = useState(null);
     const [reference, setReference] = useState(null);
@@ -46,7 +44,14 @@ export default function usePopover(props = {}) {
             plugins: [...(!isControlled && closeOnEsc ? [closeOnEscPlugin] : []), ...plugins],
             popperOptions: {
                 ...popperOptions,
-                modifiers: [{ ...matchWidthModifier, enabled: !!matchWidth }, ...(popperOptions.modifiers ?? [])]
+                modifiers: [
+                    {
+                        name: 'flip',
+                        enabled: flip
+                    },
+                    { ...matchWidthModifier, enabled: !!matchWidth },
+                    ...(popperOptions.modifiers ?? [])
+                ]
             },
             showOnCreate: isOpenProp ?? defaultIsOpen,
             trigger: !isControlled ? trigger : 'manual',
@@ -68,12 +73,10 @@ export default function usePopover(props = {}) {
     // Handle showing/hiding popup in controlled mode
     useEffect(() => {
         if (isControlled) {
-            if (isOpenProp) {
+            if (isOpenProp)
                 instance?.show();
-            }
-            else {
+            else
                 instance?.hide();
-            }
         }
     }, [isOpenProp]);
     return {

package/dist/esm/popover/usePopover.types.d.ts

@@ -8,6 +8,8 @@ export declare type UsePopoverProps = {
     closeOnEsc?: boolean;
     /** Content is opened on first render. Uncontrolled mode. */
     defaultIsOpen?: boolean;
+    /** Content placement could be changed to the opposite depending on available space. */
+    flip?: boolean;
     /** Content is opened/closed by the consumer. Controlled mode. */
     isOpen?: boolean;
     /** Sets the content element width to be the same as trigger element. */

package/dist/esm/popover/usePopover.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePopover.types.d.ts","sourceRoot":"","sources":["../../../src/popover/usePopover.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,UAAU,CAAA;AAEnE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEpC,oBAAY,cAAc,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,YAAY,CAAA;AAEpF,oBAAY,eAAe,GAAG;IAC5B,kFAAkF;IAClF,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,2DAA2D;IAC3D,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,4DAA4D;IAC5D,aAAa,CAAC,EAAE,OAAO,CAAA;IAEvB,iEAAiE;IACjE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,wEAAwE;IACxE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,oDAAoD;IACpD,MAAM,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAA;IAC7B,4CAA4C;IAC5C,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,UAAU,CAAC,KAAK,IAAI,CAAA;IAClD,2CAA2C;IAC3C,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,UAAU,CAAC,KAAK,IAAI,CAAA;IACjD,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAA;IAC7B,gFAAgF;IAChF,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,cAAc,GAAG,SAAS,CAAA;CACrC,CAAA"}
+{"version":3,"file":"usePopover.types.d.ts","sourceRoot":"","sources":["../../../src/popover/usePopover.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,UAAU,CAAA;AAEnE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEpC,oBAAY,cAAc,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,YAAY,CAAA;AAEpF,oBAAY,eAAe,GAAG;IAC5B,kFAAkF;IAClF,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,2DAA2D;IAC3D,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,4DAA4D;IAC5D,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,uFAAuF;IACvF,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,iEAAiE;IACjE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,wEAAwE;IACxE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,oDAAoD;IACpD,MAAM,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAA;IAC7B,4CAA4C;IAC5C,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,UAAU,CAAC,KAAK,IAAI,CAAA;IAClD,2CAA2C;IAC3C,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,UAAU,CAAC,KAAK,IAAI,CAAA;IACjD,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAA;IAC7B,gFAAgF;IAChF,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,cAAc,GAAG,SAAS,CAAA;CACrC,CAAA"}

package/dist/esm/tooltip/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/tooltip/tooltip.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C;;;;;KAKK;AACL,eAAO,MAAM,OAAO,UAAW,YAAY,gBA8C1C,CAAA;AAED,eAAe,OAAO,CAAA"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/tooltip/tooltip.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAG9C;;;;;KAKK;AACL,eAAO,MAAM,OAAO,UAAW,YAAY,gBA0D1C,CAAA;AAED,eAAe,OAAO,CAAA"}

package/dist/esm/tooltip/tooltip.js

@@ -1,9 +1,10 @@
+import Tippy from '@tippyjs/react';
 import React from 'react';
 import Box from '../box';
 import { useUp, v } from '../core';
 import { Link } from '../link';
-import Popover from '../popover';
 import { color, pointerPlacement, pointerSize } from './tooltip.setup';
+import { TooltipContent } from './tooltipContent';
 /**
  * A simple text popup hint.
  *
@@ -13,14 +14,19 @@ import { color, pointerPlacement, pointerSize } from './tooltip.setup';
 export const Tooltip = (props) => {
     const { children, fontSize = '16px', linkText, linkProps, maxWidth = '400px', text = 'demo', placement = 'top' } = props;
     const isDesktop = useUp('md');
-    return (React.createElement(Popover, { placement: placement, trigger: "mouseenter" },
-        React.createElement(Popover.Trigger, { as: Box, display: "inline-flex" }, children),
-        React.createElement(Popover.Content, { bg: color, color: "white", fontSize: fontSize, m: 1, maxW: maxWidth, p: 1, pl: 2, pr: 2 },
+    return (React.createElement(Tippy, { content: React.createElement(TooltipContent, { fontSize: fontSize, maxWidth: maxWidth },
             isDesktop && (React.createElement(Box, { bg: color, bottom: pointerPlacement[placement].bottom, h: `${pointerSize}px`, left: pointerPlacement[placement].left, position: "absolute", right: pointerPlacement[placement].right, top: pointerPlacement[placement].top, transform: `translate(${pointerPlacement[placement].translate}) rotate(45deg)`, w: `${pointerSize}px` })),
             React.createElement(v.div, null,
                 text,
                 !!linkText && (React.createElement(React.Fragment, null,
                     "\u00A0",
-                    React.createElement(Link, { variant: "light", ...linkProps }, linkText)))))));
+                    React.createElement(Link, { variant: "light", ...linkProps }, linkText))))), interactive: true, offset: [0, 2], placement: placement, popperOptions: {
+            modifiers: [
+                {
+                    name: 'flip',
+                    enabled: false
+                }
+            ]
+        } }, children));
 };
 export default Tooltip;

package/dist/esm/tooltip/tooltipContent.d.ts

@@ -0,0 +1,3 @@
+import { TooltipProps } from './tooltip.types';
+export declare const TooltipContent: (props: TooltipProps) => JSX.Element;
+//# sourceMappingURL=tooltipContent.d.ts.map

package/dist/esm/tooltip/tooltipContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltipContent.d.ts","sourceRoot":"","sources":["../../../src/tooltip/tooltipContent.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C,eAAO,MAAM,cAAc,UAAW,YAAY,gBAoBjD,CAAA"}

package/dist/esm/tooltip/tooltipContent.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import Box from '../box';
+import { color } from './tooltip.setup';
+export const TooltipContent = (props) => {
+    const { children, fontSize = '16px', maxWidth = '400px' } = props;
+    return (React.createElement(Box, { bg: color, borderRadius: "md", boxShadow: "2", className: "vui-tooltip-content", color: "white", fontSize: fontSize, m: 1, maxW: maxWidth, overflowY: "auto", p: 1, pl: 2, pr: 2 }, children));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",
@@ -20,6 +20,7 @@
     "url": "https://dnvgl-one.visualstudio.com/DefaultCollection/Veracity/_git/WEB-VUI"
   },
   "dependencies": {
+    "@tippyjs/react": "4.2.6",
     "@types/styled-components": "5.1.24",
     "@xstyled/core": "2.5.0",
     "@xstyled/styled-components": "2.5.0",

package/src/popover/usePopover.ts

@@ -15,7 +15,7 @@ export default function usePopover(props: UsePopoverProps = {}) {
     closeOnBlur = true,
     closeOnEsc = true,
     defaultIsOpen = false,
-    // disablePortal,
+    flip = true,
     isOpen: isOpenProp,
     matchWidth,
     offset,
@@ -73,7 +73,14 @@ export default function usePopover(props: UsePopoverProps = {}) {
       plugins: [...(!isControlled && closeOnEsc ? [closeOnEscPlugin] : []), ...plugins],
       popperOptions: {
         ...popperOptions,
-        modifiers: [{ ...matchWidthModifier, enabled: !!matchWidth }, ...(popperOptions.modifiers ?? [])]
+        modifiers: [
+          {
+            name: 'flip',
+            enabled: flip
+          },
+          { ...matchWidthModifier, enabled: !!matchWidth },
+          ...(popperOptions.modifiers ?? [])
+        ]
       },
       showOnCreate: isOpenProp ?? defaultIsOpen,
       trigger: !isControlled ? trigger : 'manual',
@@ -99,11 +106,8 @@ export default function usePopover(props: UsePopoverProps = {}) {
   // Handle showing/hiding popup in controlled mode
   useEffect(() => {
     if (isControlled) {
-      if (isOpenProp) {
-        instance?.show()
-      } else {
-        instance?.hide()
-      }
+      if (isOpenProp) instance?.show()
+      else instance?.hide()
     }
   }, [isOpenProp])
 

package/src/popover/usePopover.types.ts

@@ -11,7 +11,8 @@ export type UsePopoverProps = {
   closeOnEsc?: boolean
   /** Content is opened on first render. Uncontrolled mode. */
   defaultIsOpen?: boolean
-  // disablePortal?: boolean
+  /** Content placement could be changed to the opposite depending on available space. */
+  flip?: boolean
   /** Content is opened/closed by the consumer. Controlled mode. */
   isOpen?: boolean
   /** Sets the content element width to be the same as trigger element. */

package/src/tooltip/tooltip.tsx

@@ -1,11 +1,12 @@
-import React from 'react'
+import Tippy from '@tippyjs/react'
+import React, { JSXElementConstructor, ReactElement } from 'react'
 
 import Box from '../box'
 import { useUp, v } from '../core'
 import { Link } from '../link'
-import Popover from '../popover'
 import { color, pointerPlacement, pointerSize } from './tooltip.setup'
 import { TooltipProps } from './tooltip.types'
+import { TooltipContent } from './tooltipContent'
 
 /**
  * A simple text popup hint.
@@ -27,37 +28,49 @@ export const Tooltip = (props: TooltipProps) => {
   const isDesktop = useUp('md')
 
   return (
-    <Popover placement={placement} trigger="mouseenter">
-      <Popover.Trigger as={Box} display="inline-flex">
-        {children}
-      </Popover.Trigger>
-      <Popover.Content bg={color} color="white" fontSize={fontSize} m={1} maxW={maxWidth} p={1} pl={2} pr={2}>
-        {isDesktop && (
-          <Box
-            bg={color}
-            bottom={pointerPlacement[placement].bottom}
-            h={`${pointerSize}px`}
-            left={pointerPlacement[placement].left}
-            position="absolute"
-            right={pointerPlacement[placement].right}
-            top={pointerPlacement[placement].top}
-            transform={`translate(${pointerPlacement[placement].translate}) rotate(45deg)`}
-            w={`${pointerSize}px`}
-          />
-        )}
-        <v.div>
-          {text}
-          {!!linkText && (
-            <>
-              &nbsp;
-              <Link variant="light" {...linkProps}>
-                {linkText}
-              </Link>
-            </>
+    <Tippy
+      content={
+        <TooltipContent fontSize={fontSize} maxWidth={maxWidth}>
+          {isDesktop && (
+            <Box
+              bg={color}
+              bottom={pointerPlacement[placement].bottom}
+              h={`${pointerSize}px`}
+              left={pointerPlacement[placement].left}
+              position="absolute"
+              right={pointerPlacement[placement].right}
+              top={pointerPlacement[placement].top}
+              transform={`translate(${pointerPlacement[placement].translate}) rotate(45deg)`}
+              w={`${pointerSize}px`}
+            />
           )}
-        </v.div>
-      </Popover.Content>
-    </Popover>
+          <v.div>
+            {text}
+            {!!linkText && (
+              <>
+                &nbsp;
+                <Link variant="light" {...linkProps}>
+                  {linkText}
+                </Link>
+              </>
+            )}
+          </v.div>
+        </TooltipContent>
+      }
+      interactive
+      offset={[0, 2]}
+      placement={placement}
+      popperOptions={{
+        modifiers: [
+          {
+            name: 'flip',
+            enabled: false
+          }
+        ]
+      }}
+    >
+      {children as ReactElement<any, string | JSXElementConstructor<any>> | undefined}
+    </Tippy>
   )
 }
 

package/src/tooltip/tooltipContent.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import Box from '../box'
+import { color } from './tooltip.setup'
+import { TooltipProps } from './tooltip.types'
+
+export const TooltipContent = (props: TooltipProps) => {
+  const { children, fontSize = '16px', maxWidth = '400px' } = props
+  return (
+    <Box
+      bg={color}
+      borderRadius="md"
+      boxShadow="2"
+      className="vui-tooltip-content"
+      color="white"
+      fontSize={fontSize}
+      m={1}
+      maxW={maxWidth}
+      overflowY="auto"
+      p={1}
+      pl={2}
+      pr={2}
+    >
+      {children}
+    </Box>
+  )
+}