@i-novus/n2o-components 7.28.15 → 7.28.16

package/lib/display/Tooltip/Tooltip.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { TooltipTheme } from './TooltipComponent';
+import { type TooltipFloating } from './useTooltipFloating';
+import { Trigger, type TooltipTrigger } from './useTooltipTrigger';
+export interface Props extends TooltipFloating {
+    hint: ReactNode | string | number;
+    className?: string;
+    trigger?: Trigger;
+    children: TooltipTrigger['children'];
+    closeOnClickOutside: boolean;
+    theme?: TooltipTheme;
+}
+export declare function Tooltip({ hint, className, children, theme, closeOnClickOutside, placement, delay, trigger, container, }: Props): JSX.Element;

package/lib/display/Tooltip/Tooltip.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { TooltipComponent } from './TooltipComponent';
+import { useTooltipFloating, Container } from './useTooltipFloating';
+import { useTooltipTrigger, Trigger } from './useTooltipTrigger';
+export function Tooltip({ hint, className, children, theme, closeOnClickOutside = true, placement = 'top', delay = 0, trigger = Trigger.HOVER, container = Container.TARGET, }) {
+    const { open, handleOpen, handleClose, toggle, refs, floatingRef, floatingStyles, portal, } = useTooltipFloating({
+        delay,
+        placement,
+        container,
+        closeOnClickOutside: closeOnClickOutside && trigger === Trigger.CLICK,
+    });
+    const triggerElement = useTooltipTrigger({
+        children,
+        refs,
+        trigger,
+        handleOpen,
+        handleClose,
+        toggle,
+    });
+    return (React.createElement(React.Fragment, null,
+        triggerElement,
+        React.createElement(TooltipComponent, { floatingRef: floatingRef, style: floatingStyles, className: className, visible: open, portal: portal, theme: theme }, hint)));
+}
+//# sourceMappingURL=Tooltip.js.map

package/lib/display/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/display/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAExC,OAAO,EAAgB,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACnE,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAwB,MAAM,sBAAsB,CAAA;AAC1F,OAAO,EAAE,iBAAiB,EAAE,OAAO,EAAuB,MAAM,qBAAqB,CAAA;AAWrF,MAAM,UAAU,OAAO,CAAC,EACpB,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,KAAK,EACL,mBAAmB,GAAG,IAAI,EAC1B,SAAS,GAAG,KAAK,EACjB,KAAK,GAAG,CAAC,EACT,OAAO,GAAG,OAAO,CAAC,KAAK,EACvB,SAAS,GAAG,SAAS,CAAC,MAAM,GACxB;IACJ,MAAM,EACF,IAAI,EACJ,UAAU,EACV,WAAW,EACX,MAAM,EACN,IAAI,EACJ,WAAW,EACX,cAAc,EACd,MAAM,GACT,GAAG,kBAAkB,CAAC;QACnB,KAAK;QACL,SAAS;QACT,SAAS;QACT,mBAAmB,EAAE,mBAAmB,IAAI,OAAO,KAAK,OAAO,CAAC,KAAK;KACxE,CAAC,CAAA;IAEF,MAAM,cAAc,GAAG,iBAAiB,CAAC;QACrC,QAAQ;QACR,IAAI;QACJ,OAAO;QACP,UAAU;QACV,WAAW;QACX,MAAM;KACT,CAAC,CAAA;IAEF,OAAO,CACH;QACK,cAAc;QACf,oBAAC,gBAAgB,IACb,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,cAAc,EACrB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,IAAI,EACb,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,IAEX,IAAI,CACU,CACpB,CACN,CAAA;AACL,CAAC"}

package/lib/display/Tooltip/TooltipComponent.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties, ReactNode } from 'react';
+export declare enum TooltipTheme {
+    DARK = "DARK",
+    LIGHT = "light"
+}
+export interface TooltipContentProps {
+    floatingRef(node: HTMLElement | null): void;
+    style: CSSProperties;
+    className?: string;
+    children: ReactNode;
+    visible: boolean;
+    portal?: boolean;
+    theme?: TooltipTheme;
+}
+export declare const TooltipComponent: ({ floatingRef, style, className, children, visible, portal, theme, }: TooltipContentProps) => JSX.Element | null;

package/lib/display/Tooltip/TooltipComponent.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+import { FloatingPortal } from '@floating-ui/react';
+import { Text } from '../../Typography/Text';
+export var TooltipTheme;
+(function (TooltipTheme) {
+    TooltipTheme["DARK"] = "DARK";
+    TooltipTheme["LIGHT"] = "light";
+})(TooltipTheme || (TooltipTheme = {}));
+export const TooltipComponent = ({ floatingRef, style, className, children, visible, portal = false, theme = TooltipTheme.DARK, }) => {
+    if (!visible) {
+        return null;
+    }
+    const content = (React.createElement("div", { ref: floatingRef, style: style, className: classNames('tooltip-container', 'tooltip-inner', 'py-1 px-2 rounded text-sm', className, {
+            'bg-dark text-white': theme === TooltipTheme.DARK,
+            'bg-white text-dark border border-gray-200 shadow-sm': theme === TooltipTheme.LIGHT,
+        }) },
+        React.createElement(Text, null, children)));
+    return portal ? React.createElement(FloatingPortal, null, content) : content;
+};
+//# sourceMappingURL=TooltipComponent.js.map

package/lib/display/Tooltip/TooltipComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipComponent.js","sourceRoot":"","sources":["../../../src/display/Tooltip/TooltipComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAA;AACvD,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAEnD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAE5C,MAAM,CAAN,IAAY,YAGX;AAHD,WAAY,YAAY;IACpB,6BAAa,CAAA;IACb,+BAAe,CAAA;AACnB,CAAC,EAHW,YAAY,KAAZ,YAAY,QAGvB;AAYD,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC7B,WAAW,EACX,KAAK,EACL,SAAS,EACT,QAAQ,EACR,OAAO,EACP,MAAM,GAAG,KAAK,EACd,KAAK,GAAG,YAAY,CAAC,IAAI,GACP,EAAE,EAAE;IACtB,IAAI,CAAC,OAAO,EAAE;QAAE,OAAO,IAAI,CAAA;KAAE;IAE7B,MAAM,OAAO,GAAG,CACZ,6BACI,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,UAAU,CACjB,mBAAmB,EACnB,eAAe,EACf,2BAA2B,EAC3B,SAAS,EACT;YACI,oBAAoB,EAAE,KAAK,KAAK,YAAY,CAAC,IAAI;YACjD,qDAAqD,EAAE,KAAK,KAAK,YAAY,CAAC,KAAK;SACtF,CACJ;QAED,oBAAC,IAAI,QAAE,QAAQ,CAAQ,CACrB,CACT,CAAA;IAED,OAAO,MAAM,CAAC,CAAC,CAAC,oBAAC,cAAc,QAAE,OAAO,CAAkB,CAAC,CAAC,CAAC,OAAO,CAAA;AACxE,CAAC,CAAA"}