@veeqo/ui 15.8.0 → 15.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.cjs +1 -1
- package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.js +1 -1
- package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.cjs +1 -1
- package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.js +1 -1
- package/dist/components/DataGrid/components/GridContainer/GridContainer.cjs +1 -1
- package/dist/components/DataGrid/components/GridContainer/GridContainer.js +1 -1
- package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.cjs +1 -1
- package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.js +1 -1
- package/dist/components/Tooltip/Tooltip.cjs +14 -6
- package/dist/components/Tooltip/Tooltip.cjs.map +1 -1
- package/dist/components/Tooltip/Tooltip.d.ts +2 -2
- package/dist/components/Tooltip/Tooltip.js +14 -6
- package/dist/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/components/Tooltip/Tooltip.module.scss.cjs +2 -2
- package/dist/components/Tooltip/Tooltip.module.scss.cjs.map +1 -1
- package/dist/components/Tooltip/Tooltip.module.scss.js +2 -2
- package/dist/components/Tooltip/Tooltip.module.scss.js.map +1 -1
- package/dist/components/Tooltip/components/TooltipPopover.cjs +5 -5
- package/dist/components/Tooltip/components/TooltipPopover.cjs.map +1 -1
- package/dist/components/Tooltip/components/TooltipPopover.js +5 -5
- package/dist/components/Tooltip/components/TooltipPopover.js.map +1 -1
- package/dist/components/Tooltip/types.cjs.map +1 -1
- package/dist/components/Tooltip/types.d.ts +1 -6
- package/dist/components/Tooltip/types.js.map +1 -1
- package/package.json +1 -1
|
@@ -12,9 +12,9 @@ require('../../../../../theme/modules/shadows.cjs');
|
|
|
12
12
|
require('../../../../../theme/modules/sizes.cjs');
|
|
13
13
|
require('../../../../../theme/modules/text.cjs');
|
|
14
14
|
require('framer-motion');
|
|
15
|
-
require('../../../../Tooltip/components/TooltipPopover.cjs');
|
|
16
15
|
require('../../../../Portal/Portal.cjs');
|
|
17
16
|
require('../../../../Portal/PortalContext.cjs');
|
|
17
|
+
require('../../../../Tooltip/components/TooltipPopover.cjs');
|
|
18
18
|
require('../../../../Text/Text.cjs');
|
|
19
19
|
require('../../../../Flex/FlexRow/FlexRow.cjs');
|
|
20
20
|
require('../../../../Radio/Radio.cjs');
|
|
@@ -10,9 +10,9 @@ import '../../../../../theme/modules/shadows.js';
|
|
|
10
10
|
import '../../../../../theme/modules/sizes.js';
|
|
11
11
|
import '../../../../../theme/modules/text.js';
|
|
12
12
|
import 'framer-motion';
|
|
13
|
-
import '../../../../Tooltip/components/TooltipPopover.js';
|
|
14
13
|
import '../../../../Portal/Portal.js';
|
|
15
14
|
import '../../../../Portal/PortalContext.js';
|
|
15
|
+
import '../../../../Tooltip/components/TooltipPopover.js';
|
|
16
16
|
import '../../../../Text/Text.js';
|
|
17
17
|
import '../../../../Flex/FlexRow/FlexRow.js';
|
|
18
18
|
import '../../../../Radio/Radio.js';
|
|
@@ -9,9 +9,9 @@ require('@tanstack/react-table');
|
|
|
9
9
|
require('../../../../Stack/Stack.cjs');
|
|
10
10
|
var index = require('../../../../../theme/index.cjs');
|
|
11
11
|
require('framer-motion');
|
|
12
|
-
require('../../../../Tooltip/components/TooltipPopover.cjs');
|
|
13
12
|
require('../../../../Portal/Portal.cjs');
|
|
14
13
|
require('../../../../Portal/PortalContext.cjs');
|
|
14
|
+
require('../../../../Tooltip/components/TooltipPopover.cjs');
|
|
15
15
|
require('../../../../Text/Text.cjs');
|
|
16
16
|
require('../../../../Flex/FlexRow/FlexRow.cjs');
|
|
17
17
|
require('../../../../Radio/Radio.cjs');
|
|
@@ -7,9 +7,9 @@ import '@tanstack/react-table';
|
|
|
7
7
|
import '../../../../Stack/Stack.js';
|
|
8
8
|
import { theme } from '../../../../../theme/index.js';
|
|
9
9
|
import 'framer-motion';
|
|
10
|
-
import '../../../../Tooltip/components/TooltipPopover.js';
|
|
11
10
|
import '../../../../Portal/Portal.js';
|
|
12
11
|
import '../../../../Portal/PortalContext.js';
|
|
12
|
+
import '../../../../Tooltip/components/TooltipPopover.js';
|
|
13
13
|
import '../../../../Text/Text.js';
|
|
14
14
|
import '../../../../Flex/FlexRow/FlexRow.js';
|
|
15
15
|
import '../../../../Radio/Radio.js';
|
|
@@ -13,9 +13,9 @@ var usePinnedColumnLayout = require('../../hooks/usePinnedColumnLayout.cjs');
|
|
|
13
13
|
require('@tanstack/react-table');
|
|
14
14
|
require('../../../Stack/Stack.cjs');
|
|
15
15
|
require('framer-motion');
|
|
16
|
-
require('../../../Tooltip/components/TooltipPopover.cjs');
|
|
17
16
|
require('../../../Portal/Portal.cjs');
|
|
18
17
|
require('../../../Portal/PortalContext.cjs');
|
|
18
|
+
require('../../../Tooltip/components/TooltipPopover.cjs');
|
|
19
19
|
require('../../../Text/Text.cjs');
|
|
20
20
|
require('../../../Flex/FlexRow/FlexRow.cjs');
|
|
21
21
|
require('../../../Radio/Radio.cjs');
|
|
@@ -11,9 +11,9 @@ import { usePinnedColumnLayout } from '../../hooks/usePinnedColumnLayout.js';
|
|
|
11
11
|
import '@tanstack/react-table';
|
|
12
12
|
import '../../../Stack/Stack.js';
|
|
13
13
|
import 'framer-motion';
|
|
14
|
-
import '../../../Tooltip/components/TooltipPopover.js';
|
|
15
14
|
import '../../../Portal/Portal.js';
|
|
16
15
|
import '../../../Portal/PortalContext.js';
|
|
16
|
+
import '../../../Tooltip/components/TooltipPopover.js';
|
|
17
17
|
import '../../../Text/Text.js';
|
|
18
18
|
import '../../../Flex/FlexRow/FlexRow.js';
|
|
19
19
|
import '../../../Radio/Radio.js';
|
|
@@ -11,9 +11,9 @@ require('../../../../../theme/modules/shadows.cjs');
|
|
|
11
11
|
require('../../../../../theme/modules/sizes.cjs');
|
|
12
12
|
require('../../../../../theme/modules/text.cjs');
|
|
13
13
|
require('framer-motion');
|
|
14
|
-
require('../../../../Tooltip/components/TooltipPopover.cjs');
|
|
15
14
|
require('../../../../Portal/Portal.cjs');
|
|
16
15
|
require('../../../../Portal/PortalContext.cjs');
|
|
16
|
+
require('../../../../Tooltip/components/TooltipPopover.cjs');
|
|
17
17
|
require('../../../../Text/Text.cjs');
|
|
18
18
|
require('../../../../Flex/FlexRow/FlexRow.cjs');
|
|
19
19
|
require('../../../../Radio/Radio.cjs');
|
|
@@ -9,9 +9,9 @@ import '../../../../../theme/modules/shadows.js';
|
|
|
9
9
|
import '../../../../../theme/modules/sizes.js';
|
|
10
10
|
import '../../../../../theme/modules/text.js';
|
|
11
11
|
import 'framer-motion';
|
|
12
|
-
import '../../../../Tooltip/components/TooltipPopover.js';
|
|
13
12
|
import '../../../../Portal/Portal.js';
|
|
14
13
|
import '../../../../Portal/PortalContext.js';
|
|
14
|
+
import '../../../../Tooltip/components/TooltipPopover.js';
|
|
15
15
|
import '../../../../Text/Text.js';
|
|
16
16
|
import '../../../../Flex/FlexRow/FlexRow.js';
|
|
17
17
|
import '../../../../Radio/Radio.js';
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var React = require('react');
|
|
4
3
|
var framerMotion = require('framer-motion');
|
|
5
|
-
var
|
|
6
|
-
var Portal = require('../Portal/Portal.cjs');
|
|
7
|
-
require('../Portal/PortalContext.cjs');
|
|
4
|
+
var React = require('react');
|
|
8
5
|
var buildClassnames = require('../../utils/buildClassnames.cjs');
|
|
9
6
|
require('uid/secure');
|
|
7
|
+
var Portal = require('../Portal/Portal.cjs');
|
|
8
|
+
require('../Portal/PortalContext.cjs');
|
|
9
|
+
var TooltipPopover = require('./components/TooltipPopover.cjs');
|
|
10
10
|
var Tooltip_module = require('./Tooltip.module.scss.cjs');
|
|
11
11
|
|
|
12
12
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
@@ -34,10 +34,18 @@ const Tooltip = ({ children, text, content, config, reversed = false, className,
|
|
|
34
34
|
return children;
|
|
35
35
|
const show = () => setShouldShow(true);
|
|
36
36
|
const hide = () => setShouldShow(false);
|
|
37
|
-
return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([
|
|
37
|
+
return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([
|
|
38
|
+
Tooltip_module.container,
|
|
39
|
+
className,
|
|
40
|
+
className && `${className}-container`,
|
|
41
|
+
]) },
|
|
38
42
|
React__default.default.createElement(framerMotion.AnimatePresence, null, shouldShow && (React__default.default.createElement(WithOptionalPortal, { usePortal: useReactPortal },
|
|
39
43
|
React__default.default.createElement(TooltipPopover.TooltipPopover, { key: "tooltip-popover", hoverableElement: hoverableElement, config: config, reversed: reversed, withTriangle: withTriangle, text: text, content: content, legacyClassNames: legacyClassNames })))),
|
|
40
|
-
React__default.default.createElement("div", { ref: setHoverableElement, className: buildClassnames.buildClassnames([
|
|
44
|
+
React__default.default.createElement("div", { ref: setHoverableElement, className: buildClassnames.buildClassnames([
|
|
45
|
+
Tooltip_module.hoverable,
|
|
46
|
+
hoverableClassName,
|
|
47
|
+
className && `${className}-hoverable`,
|
|
48
|
+
]), onMouseEnter: show, onMouseLeave: hide, onFocus: show, onBlur: hide }, children)));
|
|
41
49
|
};
|
|
42
50
|
|
|
43
51
|
exports.Tooltip = Tooltip;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.cjs","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, {
|
|
1
|
+
{"version":3,"file":"Tooltip.cjs","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, { ReactNode, useState } from 'react';\nimport { buildClassnames } from '../../utils';\nimport { Portal } from '../Portal';\nimport { TooltipPopover } from './components/TooltipPopover';\nimport { LegacyClassNames } from './components/types';\nimport tooltipStyles from './Tooltip.module.scss';\nimport { TooltipProps } from './types';\n\nconst WithOptionalPortal: React.FC<{ usePortal: boolean; children: ReactNode }> = ({\n usePortal = false,\n children,\n // eslint-disable-next-line react/jsx-no-useless-fragment\n}) => (usePortal ? <Portal>{children}</Portal> : <>{children}</>);\n\nexport const Tooltip = ({\n children,\n text,\n content,\n config,\n reversed = false,\n className,\n hoverableClassName,\n withTriangle,\n initialShouldShow = false,\n useReactPortal = true,\n}: TooltipProps): ReactNode => {\n const [shouldShow, setShouldShow] = useState(initialShouldShow);\n const [hoverableElement, setHoverableElement] = useState<HTMLDivElement | null>(null);\n\n const hasText = text ? text.trim().length > 0 : false;\n const hasContent = !!(content || hasText);\n\n // Backward-compatible suffix classes for monolith consumers that\n // target sub-elements via the className prefix convention.\n const legacyClassNames: LegacyClassNames | undefined = className\n ? {\n tip: `${className}-tip`,\n wrap: `${className}-wrap`,\n triangle: `${className}-triangle`,\n }\n : undefined;\n\n if (!hasContent) return children;\n\n const show = () => setShouldShow(true);\n const hide = () => setShouldShow(false);\n\n return (\n <div\n className={buildClassnames([\n tooltipStyles.container,\n className,\n className && `${className}-container`,\n ])}\n >\n <AnimatePresence>\n {shouldShow && (\n <WithOptionalPortal usePortal={useReactPortal}>\n <TooltipPopover\n key=\"tooltip-popover\"\n hoverableElement={hoverableElement}\n config={config}\n reversed={reversed}\n withTriangle={withTriangle}\n text={text}\n content={content}\n legacyClassNames={legacyClassNames}\n />\n </WithOptionalPortal>\n )}\n </AnimatePresence>\n\n <div\n ref={setHoverableElement}\n className={buildClassnames([\n tooltipStyles.hoverable,\n hoverableClassName,\n className && `${className}-hoverable`,\n ])}\n onMouseEnter={show}\n onMouseLeave={hide}\n onFocus={show}\n onBlur={hide}\n >\n {children}\n </div>\n </div>\n );\n};\n"],"names":["React","Portal","useState","buildClassnames","tooltipStyles","AnimatePresence","TooltipPopover"],"mappings":";;;;;;;;;;;;;;;AASA,MAAM,kBAAkB,GAA0D,CAAC,EACjF,SAAS,GAAG,KAAK,EACjB,QAAQ;AACR;AACD,EAAA,MAAM,SAAS,GAAGA,sBAAA,CAAA,aAAA,CAACC,aAAM,QAAE,QAAQ,CAAU,GAAGD,4EAAG,QAAQ,CAAI,CAAC;AAE1D,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,kBAAkB,EAClB,YAAY,EACZ,iBAAiB,GAAG,KAAK,EACzB,cAAc,GAAG,IAAI,GACR,KAAe;IAC5B,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGE,cAAQ,CAAC,iBAAiB,CAAC;IAC/D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAGA,cAAQ,CAAwB,IAAI,CAAC;AAErF,IAAA,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK;IACrD,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,IAAI,OAAO,CAAC;;;IAIzC,MAAM,gBAAgB,GAAiC;AACrD,UAAE;YACE,GAAG,EAAE,CAAA,EAAG,SAAS,CAAA,IAAA,CAAM;YACvB,IAAI,EAAE,CAAA,EAAG,SAAS,CAAA,KAAA,CAAO;YACzB,QAAQ,EAAE,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW;AAClC;UACD,SAAS;AAEb,IAAA,IAAI,CAAC,UAAU;AAAE,QAAA,OAAO,QAAQ;IAEhC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,IAAI,CAAC;IACtC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,KAAK,CAAC;AAEvC,IAAA,QACEF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEG,+BAAe,CAAC;AACzB,YAAAC,cAAa,CAAC,SAAS;YACvB,SAAS;YACT,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY;SACtC,CAAC,EAAA;QAEFJ,sBAAA,CAAA,aAAA,CAACK,4BAAe,EAAA,IAAA,EACb,UAAU,KACTL,qCAAC,kBAAkB,EAAA,EAAC,SAAS,EAAE,cAAc,EAAA;AAC3C,YAAAA,sBAAA,CAAA,aAAA,CAACM,6BAAc,EAAA,EACb,GAAG,EAAC,iBAAiB,EACrB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAAA,CAClC,CACiB,CACtB,CACe;AAElB,QAAAN,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,mBAAmB,EACxB,SAAS,EAAEG,+BAAe,CAAC;AACzB,gBAAAC,cAAa,CAAC,SAAS;gBACvB,kBAAkB;gBAClB,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY;aACtC,CAAC,EACF,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,IAAI,EAClB,OAAO,EAAE,IAAI,EACb,MAAM,EAAE,IAAI,IAEX,QAAQ,CACL,CACF;AAEV;;;;"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
2
|
import { TooltipProps } from './types';
|
|
3
|
-
export declare const Tooltip: ({ children, text, content, config, reversed, className, hoverableClassName, withTriangle, initialShouldShow, useReactPortal, }: TooltipProps) =>
|
|
3
|
+
export declare const Tooltip: ({ children, text, content, config, reversed, className, hoverableClassName, withTriangle, initialShouldShow, useReactPortal, }: TooltipProps) => ReactNode;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import React__default, { useState } from 'react';
|
|
2
1
|
import { AnimatePresence } from 'framer-motion';
|
|
3
|
-
import {
|
|
4
|
-
import { Portal } from '../Portal/Portal.js';
|
|
5
|
-
import '../Portal/PortalContext.js';
|
|
2
|
+
import React__default, { useState } from 'react';
|
|
6
3
|
import { buildClassnames } from '../../utils/buildClassnames.js';
|
|
7
4
|
import 'uid/secure';
|
|
5
|
+
import { Portal } from '../Portal/Portal.js';
|
|
6
|
+
import '../Portal/PortalContext.js';
|
|
7
|
+
import { TooltipPopover } from './components/TooltipPopover.js';
|
|
8
8
|
import tooltipStyles from './Tooltip.module.scss.js';
|
|
9
9
|
|
|
10
10
|
const WithOptionalPortal = ({ usePortal = false, children,
|
|
@@ -28,10 +28,18 @@ const Tooltip = ({ children, text, content, config, reversed = false, className,
|
|
|
28
28
|
return children;
|
|
29
29
|
const show = () => setShouldShow(true);
|
|
30
30
|
const hide = () => setShouldShow(false);
|
|
31
|
-
return (React__default.createElement("div", { className: buildClassnames([
|
|
31
|
+
return (React__default.createElement("div", { className: buildClassnames([
|
|
32
|
+
tooltipStyles.container,
|
|
33
|
+
className,
|
|
34
|
+
className && `${className}-container`,
|
|
35
|
+
]) },
|
|
32
36
|
React__default.createElement(AnimatePresence, null, shouldShow && (React__default.createElement(WithOptionalPortal, { usePortal: useReactPortal },
|
|
33
37
|
React__default.createElement(TooltipPopover, { key: "tooltip-popover", hoverableElement: hoverableElement, config: config, reversed: reversed, withTriangle: withTriangle, text: text, content: content, legacyClassNames: legacyClassNames })))),
|
|
34
|
-
React__default.createElement("div", { ref: setHoverableElement, className: buildClassnames([
|
|
38
|
+
React__default.createElement("div", { ref: setHoverableElement, className: buildClassnames([
|
|
39
|
+
tooltipStyles.hoverable,
|
|
40
|
+
hoverableClassName,
|
|
41
|
+
className && `${className}-hoverable`,
|
|
42
|
+
]), onMouseEnter: show, onMouseLeave: hide, onFocus: show, onBlur: hide }, children)));
|
|
35
43
|
};
|
|
36
44
|
|
|
37
45
|
export { Tooltip };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, {
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, { ReactNode, useState } from 'react';\nimport { buildClassnames } from '../../utils';\nimport { Portal } from '../Portal';\nimport { TooltipPopover } from './components/TooltipPopover';\nimport { LegacyClassNames } from './components/types';\nimport tooltipStyles from './Tooltip.module.scss';\nimport { TooltipProps } from './types';\n\nconst WithOptionalPortal: React.FC<{ usePortal: boolean; children: ReactNode }> = ({\n usePortal = false,\n children,\n // eslint-disable-next-line react/jsx-no-useless-fragment\n}) => (usePortal ? <Portal>{children}</Portal> : <>{children}</>);\n\nexport const Tooltip = ({\n children,\n text,\n content,\n config,\n reversed = false,\n className,\n hoverableClassName,\n withTriangle,\n initialShouldShow = false,\n useReactPortal = true,\n}: TooltipProps): ReactNode => {\n const [shouldShow, setShouldShow] = useState(initialShouldShow);\n const [hoverableElement, setHoverableElement] = useState<HTMLDivElement | null>(null);\n\n const hasText = text ? text.trim().length > 0 : false;\n const hasContent = !!(content || hasText);\n\n // Backward-compatible suffix classes for monolith consumers that\n // target sub-elements via the className prefix convention.\n const legacyClassNames: LegacyClassNames | undefined = className\n ? {\n tip: `${className}-tip`,\n wrap: `${className}-wrap`,\n triangle: `${className}-triangle`,\n }\n : undefined;\n\n if (!hasContent) return children;\n\n const show = () => setShouldShow(true);\n const hide = () => setShouldShow(false);\n\n return (\n <div\n className={buildClassnames([\n tooltipStyles.container,\n className,\n className && `${className}-container`,\n ])}\n >\n <AnimatePresence>\n {shouldShow && (\n <WithOptionalPortal usePortal={useReactPortal}>\n <TooltipPopover\n key=\"tooltip-popover\"\n hoverableElement={hoverableElement}\n config={config}\n reversed={reversed}\n withTriangle={withTriangle}\n text={text}\n content={content}\n legacyClassNames={legacyClassNames}\n />\n </WithOptionalPortal>\n )}\n </AnimatePresence>\n\n <div\n ref={setHoverableElement}\n className={buildClassnames([\n tooltipStyles.hoverable,\n hoverableClassName,\n className && `${className}-hoverable`,\n ])}\n onMouseEnter={show}\n onMouseLeave={hide}\n onFocus={show}\n onBlur={hide}\n >\n {children}\n </div>\n </div>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;AASA,MAAM,kBAAkB,GAA0D,CAAC,EACjF,SAAS,GAAG,KAAK,EACjB,QAAQ;AACR;AACD,EAAA,MAAM,SAAS,GAAGA,cAAA,CAAA,aAAA,CAAC,MAAM,QAAE,QAAQ,CAAU,GAAGA,4DAAG,QAAQ,CAAI,CAAC;AAE1D,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,kBAAkB,EAClB,YAAY,EACZ,iBAAiB,GAAG,KAAK,EACzB,cAAc,GAAG,IAAI,GACR,KAAe;IAC5B,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,iBAAiB,CAAC;IAC/D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC;AAErF,IAAA,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK;IACrD,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,IAAI,OAAO,CAAC;;;IAIzC,MAAM,gBAAgB,GAAiC;AACrD,UAAE;YACE,GAAG,EAAE,CAAA,EAAG,SAAS,CAAA,IAAA,CAAM;YACvB,IAAI,EAAE,CAAA,EAAG,SAAS,CAAA,KAAA,CAAO;YACzB,QAAQ,EAAE,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW;AAClC;UACD,SAAS;AAEb,IAAA,IAAI,CAAC,UAAU;AAAE,QAAA,OAAO,QAAQ;IAEhC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,IAAI,CAAC;IACtC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,KAAK,CAAC;AAEvC,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC;AACzB,YAAA,aAAa,CAAC,SAAS;YACvB,SAAS;YACT,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY;SACtC,CAAC,EAAA;QAEFA,cAAA,CAAA,aAAA,CAAC,eAAe,EAAA,IAAA,EACb,UAAU,KACTA,6BAAC,kBAAkB,EAAA,EAAC,SAAS,EAAE,cAAc,EAAA;AAC3C,YAAAA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACb,GAAG,EAAC,iBAAiB,EACrB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAAA,CAClC,CACiB,CACtB,CACe;AAElB,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,mBAAmB,EACxB,SAAS,EAAE,eAAe,CAAC;AACzB,gBAAA,aAAa,CAAC,SAAS;gBACvB,kBAAkB;gBAClB,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY;aACtC,CAAC,EACF,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,IAAI,EAClB,OAAO,EAAE,IAAI,EACb,MAAM,EAAE,IAAI,IAEX,QAAQ,CACL,CACF;AAEV;;;;"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
|
|
4
4
|
|
|
5
|
-
___$insertStyle(".
|
|
6
|
-
var tooltipStyles = {"container":"
|
|
5
|
+
___$insertStyle("._container_1ko1n_1 {\n display: inline-block;\n}\n\n._hoverable_1ko1n_5 {\n display: inline-block;\n}\n\n._tip_1ko1n_9 {\n width: max-content;\n pointer-events: none;\n will-change: opacity, transform;\n z-index: var(--layers-tooltip);\n}\n._tip_1ko1n_9[data-placement^=top-start] > ._triangle_1ko1n_15 {\n left: var(--sizes-sm);\n bottom: 0;\n}\n._tip_1ko1n_9[data-placement^=top-end] > ._triangle_1ko1n_15 {\n right: var(--sizes-sm);\n bottom: 0;\n}\n._tip_1ko1n_9[data-placement^=bottom-start] > ._triangle_1ko1n_15 {\n left: var(--sizes-sm);\n top: calc(var(--sizes-xs) * -1);\n}\n._tip_1ko1n_9[data-placement^=bottom-end] > ._triangle_1ko1n_15 {\n right: var(--sizes-sm);\n top: calc(var(--sizes-xs) * -1);\n}\n\n._wrap_1ko1n_32 {\n display: inline-block;\n padding: var(--sizes-base) var(--sizes-5);\n overflow: hidden;\n z-index: var(--layers-tooltip);\n min-width: var(--tip-min-width);\n max-width: var(--tip-max-width);\n color: #fff;\n border-radius: var(--radius-md);\n box-shadow: var(--shadows-base);\n background: var(--colors-neutral-ink-dark);\n}\n\n._triangle_1ko1n_15 {\n background-color: var(--colors-neutral-ink-dark);\n height: var(--sizes-base);\n width: var(--sizes-base);\n position: absolute;\n transform: rotate(45deg);\n z-index: var(--layers-tooltip);\n}");
|
|
6
|
+
var tooltipStyles = {"container":"_container_1ko1n_1","hoverable":"_hoverable_1ko1n_5","tip":"_tip_1ko1n_9","triangle":"_triangle_1ko1n_15","wrap":"_wrap_1ko1n_32"};
|
|
7
7
|
|
|
8
8
|
module.exports = tooltipStyles;
|
|
9
9
|
//# sourceMappingURL=Tooltip.module.scss.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.module.scss.cjs","sources":["../../../src/components/Tooltip/Tooltip.module.scss"],"sourcesContent":[".container {\n display: inline-block;\n}\n\n.hoverable {\n display: inline-block;\n}\n\n.tip {\n width: max-content;\n pointer-events: none;\n will-change: opacity, transform;\n z-index: var(--layers-tooltip);\n\n &[data-placement^='top-start'] > .triangle {\n left:
|
|
1
|
+
{"version":3,"file":"Tooltip.module.scss.cjs","sources":["../../../src/components/Tooltip/Tooltip.module.scss"],"sourcesContent":[".container {\n display: inline-block;\n}\n\n.hoverable {\n display: inline-block;\n}\n\n.tip {\n width: max-content;\n pointer-events: none;\n will-change: opacity, transform;\n z-index: var(--layers-tooltip);\n\n &[data-placement^='top-start'] > .triangle {\n left: var(--sizes-sm);\n bottom: 0;\n }\n\n &[data-placement^='top-end'] > .triangle {\n right: var(--sizes-sm);\n bottom: 0;\n }\n\n &[data-placement^='bottom-start'] > .triangle {\n left: var(--sizes-sm);\n top: calc(var(--sizes-xs) * -1);\n }\n\n &[data-placement^='bottom-end'] > .triangle {\n right: var(--sizes-sm);\n top: calc(var(--sizes-xs) * -1);\n }\n}\n\n.wrap {\n display: inline-block;\n padding: var(--sizes-base) var(--sizes-5);\n overflow: hidden;\n z-index: var(--layers-tooltip);\n min-width: var(--tip-min-width);\n max-width: var(--tip-max-width);\n color: #fff;\n border-radius: var(--radius-md);\n box-shadow: var(--shadows-base);\n background: var(--colors-neutral-ink-dark);\n}\n\n.triangle {\n background-color: var(--colors-neutral-ink-dark);\n height: var(--sizes-base);\n width: var(--sizes-base);\n position: absolute;\n transform: rotate(45deg);\n z-index: var(--layers-tooltip);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,qyCAAA;;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
2
|
|
|
3
|
-
insertStyle(".
|
|
4
|
-
var tooltipStyles = {"container":"
|
|
3
|
+
insertStyle("._container_1ko1n_1 {\n display: inline-block;\n}\n\n._hoverable_1ko1n_5 {\n display: inline-block;\n}\n\n._tip_1ko1n_9 {\n width: max-content;\n pointer-events: none;\n will-change: opacity, transform;\n z-index: var(--layers-tooltip);\n}\n._tip_1ko1n_9[data-placement^=top-start] > ._triangle_1ko1n_15 {\n left: var(--sizes-sm);\n bottom: 0;\n}\n._tip_1ko1n_9[data-placement^=top-end] > ._triangle_1ko1n_15 {\n right: var(--sizes-sm);\n bottom: 0;\n}\n._tip_1ko1n_9[data-placement^=bottom-start] > ._triangle_1ko1n_15 {\n left: var(--sizes-sm);\n top: calc(var(--sizes-xs) * -1);\n}\n._tip_1ko1n_9[data-placement^=bottom-end] > ._triangle_1ko1n_15 {\n right: var(--sizes-sm);\n top: calc(var(--sizes-xs) * -1);\n}\n\n._wrap_1ko1n_32 {\n display: inline-block;\n padding: var(--sizes-base) var(--sizes-5);\n overflow: hidden;\n z-index: var(--layers-tooltip);\n min-width: var(--tip-min-width);\n max-width: var(--tip-max-width);\n color: #fff;\n border-radius: var(--radius-md);\n box-shadow: var(--shadows-base);\n background: var(--colors-neutral-ink-dark);\n}\n\n._triangle_1ko1n_15 {\n background-color: var(--colors-neutral-ink-dark);\n height: var(--sizes-base);\n width: var(--sizes-base);\n position: absolute;\n transform: rotate(45deg);\n z-index: var(--layers-tooltip);\n}");
|
|
4
|
+
var tooltipStyles = {"container":"_container_1ko1n_1","hoverable":"_hoverable_1ko1n_5","tip":"_tip_1ko1n_9","triangle":"_triangle_1ko1n_15","wrap":"_wrap_1ko1n_32"};
|
|
5
5
|
|
|
6
6
|
export { tooltipStyles as default };
|
|
7
7
|
//# sourceMappingURL=Tooltip.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.module.scss.js","sources":["../../../src/components/Tooltip/Tooltip.module.scss"],"sourcesContent":[".container {\n display: inline-block;\n}\n\n.hoverable {\n display: inline-block;\n}\n\n.tip {\n width: max-content;\n pointer-events: none;\n will-change: opacity, transform;\n z-index: var(--layers-tooltip);\n\n &[data-placement^='top-start'] > .triangle {\n left:
|
|
1
|
+
{"version":3,"file":"Tooltip.module.scss.js","sources":["../../../src/components/Tooltip/Tooltip.module.scss"],"sourcesContent":[".container {\n display: inline-block;\n}\n\n.hoverable {\n display: inline-block;\n}\n\n.tip {\n width: max-content;\n pointer-events: none;\n will-change: opacity, transform;\n z-index: var(--layers-tooltip);\n\n &[data-placement^='top-start'] > .triangle {\n left: var(--sizes-sm);\n bottom: 0;\n }\n\n &[data-placement^='top-end'] > .triangle {\n right: var(--sizes-sm);\n bottom: 0;\n }\n\n &[data-placement^='bottom-start'] > .triangle {\n left: var(--sizes-sm);\n top: calc(var(--sizes-xs) * -1);\n }\n\n &[data-placement^='bottom-end'] > .triangle {\n right: var(--sizes-sm);\n top: calc(var(--sizes-xs) * -1);\n }\n}\n\n.wrap {\n display: inline-block;\n padding: var(--sizes-base) var(--sizes-5);\n overflow: hidden;\n z-index: var(--layers-tooltip);\n min-width: var(--tip-min-width);\n max-width: var(--tip-max-width);\n color: #fff;\n border-radius: var(--radius-md);\n box-shadow: var(--shadows-base);\n background: var(--colors-neutral-ink-dark);\n}\n\n.triangle {\n background-color: var(--colors-neutral-ink-dark);\n height: var(--sizes-base);\n width: var(--sizes-base);\n position: absolute;\n transform: rotate(45deg);\n z-index: var(--layers-tooltip);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,qyCAAA;;;;;"}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var React = require('react');
|
|
4
|
-
var framerMotion = require('framer-motion');
|
|
5
3
|
var react = require('@floating-ui/react');
|
|
6
|
-
var
|
|
7
|
-
var
|
|
4
|
+
var framerMotion = require('framer-motion');
|
|
5
|
+
var React = require('react');
|
|
8
6
|
var buildClassnames = require('../../../utils/buildClassnames.cjs');
|
|
9
7
|
require('uid/secure');
|
|
10
8
|
var assignCssVars = require('../../../utils/assignCssVars.cjs');
|
|
9
|
+
var Text = require('../../Text/Text.cjs');
|
|
11
10
|
var Tooltip_module = require('../Tooltip.module.scss.cjs');
|
|
11
|
+
var types = require('../types.cjs');
|
|
12
12
|
|
|
13
13
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
14
14
|
|
|
@@ -30,7 +30,7 @@ const TooltipPopover = ({ content, text, hoverableElement, config, reversed, wit
|
|
|
30
30
|
});
|
|
31
31
|
return (React__default.default.createElement(framerMotion.motion.div, { key: "tooltip-tip", className: buildClassnames.buildClassnames([Tooltip_module.tip, legacyClassNames === null || legacyClassNames === void 0 ? void 0 : legacyClassNames.tip]), ref: refs.setFloating, style: floatingStyles, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, "data-placement": placement, role: "tooltip" },
|
|
32
32
|
React__default.default.createElement("div", { className: buildClassnames.buildClassnames([Tooltip_module.wrap, legacyClassNames === null || legacyClassNames === void 0 ? void 0 : legacyClassNames.wrap]), style: assignCssVars.assignCssVars({ tipMinWidth: `${tipMinWidth}px`, tipMaxWidth: `${tipMaxWidth}px` }) }, content !== null && content !== void 0 ? content : (React__default.default.createElement(Text.Text, { variant: "bodySmall", style: { color: 'white' } }, text))),
|
|
33
|
-
withTriangle && React__default.default.createElement("div", {
|
|
33
|
+
withTriangle && (React__default.default.createElement("div", { "data-testid": "tooltip-triangle", className: buildClassnames.buildClassnames([Tooltip_module.triangle, legacyClassNames === null || legacyClassNames === void 0 ? void 0 : legacyClassNames.triangle]) }))));
|
|
34
34
|
};
|
|
35
35
|
|
|
36
36
|
exports.TooltipPopover = TooltipPopover;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TooltipPopover.cjs","sources":["../../../../src/components/Tooltip/components/TooltipPopover.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"TooltipPopover.cjs","sources":["../../../../src/components/Tooltip/components/TooltipPopover.tsx"],"sourcesContent":["import {\n autoUpdate,\n flip,\n limitShift,\n offset,\n Placement,\n shift,\n useFloating,\n} from '@floating-ui/react';\nimport { motion } from 'framer-motion';\nimport React from 'react';\nimport { assignCssVars, buildClassnames } from '../../../utils';\nimport { Text } from '../../Text';\nimport tooltipStyles from '../Tooltip.module.scss';\nimport { IConfig, Sides } from '../types';\nimport { TooltipPopoverProps } from './types';\n\nconst defaultConfig: IConfig = {\n side: Sides.TOP,\n tipMinWidth: 60,\n tipMaxWidth: 340,\n};\n\nexport const TooltipPopover = ({\n content,\n text,\n hoverableElement,\n config,\n reversed,\n withTriangle,\n legacyClassNames,\n}: TooltipPopoverProps) => {\n const usedConfig = { ...defaultConfig, ...config };\n const { side, tipMinWidth, tipMaxWidth } = usedConfig;\n\n const { refs, floatingStyles, placement } = useFloating({\n elements: { reference: hoverableElement },\n placement: `${side}-${reversed ? 'end' : 'start'}` as Placement,\n middleware: [offset(8), flip(), shift({ limiter: limitShift() })],\n whileElementsMounted: autoUpdate,\n });\n\n return (\n <motion.div\n key=\"tooltip-tip\"\n className={buildClassnames([tooltipStyles.tip, legacyClassNames?.tip])}\n ref={refs.setFloating}\n style={floatingStyles}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.15 }}\n data-placement={placement}\n role=\"tooltip\"\n >\n <div\n className={buildClassnames([tooltipStyles.wrap, legacyClassNames?.wrap])}\n style={assignCssVars({ tipMinWidth: `${tipMinWidth}px`, tipMaxWidth: `${tipMaxWidth}px` })}\n >\n {content ?? (\n <Text variant=\"bodySmall\" style={{ color: 'white' }}>\n {text}\n </Text>\n )}\n </div>\n {withTriangle && (\n <div\n data-testid=\"tooltip-triangle\"\n className={buildClassnames([tooltipStyles.triangle, legacyClassNames?.triangle])}\n />\n )}\n </motion.div>\n );\n};\n"],"names":["Sides","useFloating","offset","flip","shift","limitShift","autoUpdate","React","motion","buildClassnames","tooltipStyles","assignCssVars","Text"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAM,aAAa,GAAY;IAC7B,IAAI,EAAEA,WAAK,CAAC,GAAG;AACf,IAAA,WAAW,EAAE,EAAE;AACf,IAAA,WAAW,EAAE,GAAG;CACjB;MAEY,cAAc,GAAG,CAAC,EAC7B,OAAO,EACP,IAAI,EACJ,gBAAgB,EAChB,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,gBAAgB,GACI,KAAI;IACxB,MAAM,UAAU,GAAG,EAAE,GAAG,aAAa,EAAE,GAAG,MAAM,EAAE;IAClD,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,UAAU;IAErD,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,SAAS,EAAE,GAAGC,iBAAW,CAAC;AACtD,QAAA,QAAQ,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE;AACzC,QAAA,SAAS,EAAE,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAA,CAAe;AAC/D,QAAA,UAAU,EAAE,CAACC,YAAM,CAAC,CAAC,CAAC,EAAEC,UAAI,EAAE,EAAEC,WAAK,CAAC,EAAE,OAAO,EAAEC,gBAAU,EAAE,EAAE,CAAC,CAAC;AACjE,QAAA,oBAAoB,EAAEC,gBAAU;AACjC,KAAA,CAAC;AAEF,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,mBAAM,CAAC,GAAG,EAAA,EACT,GAAG,EAAC,aAAa,EACjB,SAAS,EAAEC,+BAAe,CAAC,CAACC,cAAa,CAAC,GAAG,EAAE,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,MAAA,GAAA,MAAA,GAAhB,gBAAgB,CAAE,GAAG,CAAC,CAAC,EACtE,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,KAAK,EAAE,cAAc,EACrB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EACvB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EACvB,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EACpB,UAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAA,gBAAA,EACd,SAAS,EACzB,IAAI,EAAC,SAAS,EAAA;AAEd,QAAAH,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEE,+BAAe,CAAC,CAACC,cAAa,CAAC,IAAI,EAAE,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,MAAA,GAAA,MAAA,GAAhB,gBAAgB,CAAE,IAAI,CAAC,CAAC,EACxE,KAAK,EAAEC,2BAAa,CAAC,EAAE,WAAW,EAAE,CAAA,EAAG,WAAW,IAAI,EAAE,WAAW,EAAE,CAAA,EAAG,WAAW,CAAA,EAAA,CAAI,EAAE,CAAC,EAAA,EAEzF,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAP,OAAO,IACNJ,qCAACK,SAAI,EAAA,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAA,EAChD,IAAI,CACA,CACR,CACG;QACL,YAAY,KACXL,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,kBAAkB,EAC9B,SAAS,EAAEE,+BAAe,CAAC,CAACC,cAAa,CAAC,QAAQ,EAAE,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,MAAA,GAAA,MAAA,GAAhB,gBAAgB,CAAE,QAAQ,CAAC,CAAC,EAAA,CAChF,CACH,CACU;AAEjB;;;;"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import React__default from 'react';
|
|
2
|
-
import { motion } from 'framer-motion';
|
|
3
1
|
import { useFloating, autoUpdate, offset, flip, shift, limitShift } from '@floating-ui/react';
|
|
4
|
-
import {
|
|
5
|
-
import
|
|
2
|
+
import { motion } from 'framer-motion';
|
|
3
|
+
import React__default from 'react';
|
|
6
4
|
import { buildClassnames } from '../../../utils/buildClassnames.js';
|
|
7
5
|
import 'uid/secure';
|
|
8
6
|
import { assignCssVars } from '../../../utils/assignCssVars.js';
|
|
7
|
+
import { Text } from '../../Text/Text.js';
|
|
9
8
|
import tooltipStyles from '../Tooltip.module.scss.js';
|
|
9
|
+
import { Sides } from '../types.js';
|
|
10
10
|
|
|
11
11
|
const defaultConfig = {
|
|
12
12
|
side: Sides.TOP,
|
|
@@ -24,7 +24,7 @@ const TooltipPopover = ({ content, text, hoverableElement, config, reversed, wit
|
|
|
24
24
|
});
|
|
25
25
|
return (React__default.createElement(motion.div, { key: "tooltip-tip", className: buildClassnames([tooltipStyles.tip, legacyClassNames === null || legacyClassNames === void 0 ? void 0 : legacyClassNames.tip]), ref: refs.setFloating, style: floatingStyles, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, "data-placement": placement, role: "tooltip" },
|
|
26
26
|
React__default.createElement("div", { className: buildClassnames([tooltipStyles.wrap, legacyClassNames === null || legacyClassNames === void 0 ? void 0 : legacyClassNames.wrap]), style: assignCssVars({ tipMinWidth: `${tipMinWidth}px`, tipMaxWidth: `${tipMaxWidth}px` }) }, content !== null && content !== void 0 ? content : (React__default.createElement(Text, { variant: "bodySmall", style: { color: 'white' } }, text))),
|
|
27
|
-
withTriangle && React__default.createElement("div", {
|
|
27
|
+
withTriangle && (React__default.createElement("div", { "data-testid": "tooltip-triangle", className: buildClassnames([tooltipStyles.triangle, legacyClassNames === null || legacyClassNames === void 0 ? void 0 : legacyClassNames.triangle]) }))));
|
|
28
28
|
};
|
|
29
29
|
|
|
30
30
|
export { TooltipPopover };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TooltipPopover.js","sources":["../../../../src/components/Tooltip/components/TooltipPopover.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"TooltipPopover.js","sources":["../../../../src/components/Tooltip/components/TooltipPopover.tsx"],"sourcesContent":["import {\n autoUpdate,\n flip,\n limitShift,\n offset,\n Placement,\n shift,\n useFloating,\n} from '@floating-ui/react';\nimport { motion } from 'framer-motion';\nimport React from 'react';\nimport { assignCssVars, buildClassnames } from '../../../utils';\nimport { Text } from '../../Text';\nimport tooltipStyles from '../Tooltip.module.scss';\nimport { IConfig, Sides } from '../types';\nimport { TooltipPopoverProps } from './types';\n\nconst defaultConfig: IConfig = {\n side: Sides.TOP,\n tipMinWidth: 60,\n tipMaxWidth: 340,\n};\n\nexport const TooltipPopover = ({\n content,\n text,\n hoverableElement,\n config,\n reversed,\n withTriangle,\n legacyClassNames,\n}: TooltipPopoverProps) => {\n const usedConfig = { ...defaultConfig, ...config };\n const { side, tipMinWidth, tipMaxWidth } = usedConfig;\n\n const { refs, floatingStyles, placement } = useFloating({\n elements: { reference: hoverableElement },\n placement: `${side}-${reversed ? 'end' : 'start'}` as Placement,\n middleware: [offset(8), flip(), shift({ limiter: limitShift() })],\n whileElementsMounted: autoUpdate,\n });\n\n return (\n <motion.div\n key=\"tooltip-tip\"\n className={buildClassnames([tooltipStyles.tip, legacyClassNames?.tip])}\n ref={refs.setFloating}\n style={floatingStyles}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.15 }}\n data-placement={placement}\n role=\"tooltip\"\n >\n <div\n className={buildClassnames([tooltipStyles.wrap, legacyClassNames?.wrap])}\n style={assignCssVars({ tipMinWidth: `${tipMinWidth}px`, tipMaxWidth: `${tipMaxWidth}px` })}\n >\n {content ?? (\n <Text variant=\"bodySmall\" style={{ color: 'white' }}>\n {text}\n </Text>\n )}\n </div>\n {withTriangle && (\n <div\n data-testid=\"tooltip-triangle\"\n className={buildClassnames([tooltipStyles.triangle, legacyClassNames?.triangle])}\n />\n )}\n </motion.div>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;AAiBA,MAAM,aAAa,GAAY;IAC7B,IAAI,EAAE,KAAK,CAAC,GAAG;AACf,IAAA,WAAW,EAAE,EAAE;AACf,IAAA,WAAW,EAAE,GAAG;CACjB;MAEY,cAAc,GAAG,CAAC,EAC7B,OAAO,EACP,IAAI,EACJ,gBAAgB,EAChB,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,gBAAgB,GACI,KAAI;IACxB,MAAM,UAAU,GAAG,EAAE,GAAG,aAAa,EAAE,GAAG,MAAM,EAAE;IAClD,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,UAAU;IAErD,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,WAAW,CAAC;AACtD,QAAA,QAAQ,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE;AACzC,QAAA,SAAS,EAAE,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAA,CAAe;AAC/D,QAAA,UAAU,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC;AACjE,QAAA,oBAAoB,EAAE,UAAU;AACjC,KAAA,CAAC;AAEF,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,CAAC,GAAG,EAAA,EACT,GAAG,EAAC,aAAa,EACjB,SAAS,EAAE,eAAe,CAAC,CAAC,aAAa,CAAC,GAAG,EAAE,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,MAAA,GAAA,MAAA,GAAhB,gBAAgB,CAAE,GAAG,CAAC,CAAC,EACtE,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,KAAK,EAAE,cAAc,EACrB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EACvB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EACvB,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EACpB,UAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAA,gBAAA,EACd,SAAS,EACzB,IAAI,EAAC,SAAS,EAAA;AAEd,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC,CAAC,aAAa,CAAC,IAAI,EAAE,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,MAAA,GAAA,MAAA,GAAhB,gBAAgB,CAAE,IAAI,CAAC,CAAC,EACxE,KAAK,EAAE,aAAa,CAAC,EAAE,WAAW,EAAE,CAAA,EAAG,WAAW,IAAI,EAAE,WAAW,EAAE,CAAA,EAAG,WAAW,CAAA,EAAA,CAAI,EAAE,CAAC,EAAA,EAEzF,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAP,OAAO,IACNA,6BAAC,IAAI,EAAA,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAA,EAChD,IAAI,CACA,CACR,CACG;QACL,YAAY,KACXA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,kBAAkB,EAC9B,SAAS,EAAE,eAAe,CAAC,CAAC,aAAa,CAAC,QAAQ,EAAE,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,MAAA,GAAA,MAAA,GAAhB,gBAAgB,CAAE,QAAQ,CAAC,CAAC,EAAA,CAChF,CACH,CACU;AAEjB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.cjs","sources":["../../../src/components/Tooltip/types.ts"],"sourcesContent":["import { ReactNode } from 'react';\n\nexport enum Sides {\n BOTTOM = 'bottom',\n TOP = 'top',\n}\n\nexport interface IConfig {\n side: Sides.TOP | Sides.BOTTOM;\n
|
|
1
|
+
{"version":3,"file":"types.cjs","sources":["../../../src/components/Tooltip/types.ts"],"sourcesContent":["import { ReactNode } from 'react';\n\nexport enum Sides {\n BOTTOM = 'bottom',\n TOP = 'top',\n}\n\nexport interface IConfig {\n side: Sides.TOP | Sides.BOTTOM;\n tipMinWidth: number;\n tipMaxWidth: number;\n}\n\nexport interface TooltipProps {\n children?: ReactNode;\n text?: string;\n content?: ReactNode;\n config?: IConfig;\n reversed?: boolean;\n className?: string;\n hoverableClassName?: string;\n withTriangle?: boolean;\n initialShouldShow?: boolean;\n useReactPortal?: boolean;\n}\n"],"names":["Sides"],"mappings":";;AAEYA;AAAZ,CAAA,UAAY,KAAK,EAAA;AACf,IAAA,KAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjB,IAAA,KAAA,CAAA,KAAA,CAAA,GAAA,KAAW;AACb,CAAC,EAHWA,aAAK,KAALA,aAAK,GAAA,EAAA,CAAA,CAAA;;"}
|
|
@@ -5,23 +5,18 @@ export declare enum Sides {
|
|
|
5
5
|
}
|
|
6
6
|
export interface IConfig {
|
|
7
7
|
side: Sides.TOP | Sides.BOTTOM;
|
|
8
|
-
/** @deprecated No longer used. Triangle positioning is handled by CSS Module classes. */
|
|
9
|
-
triangleOffset?: number;
|
|
10
8
|
tipMinWidth: number;
|
|
11
9
|
tipMaxWidth: number;
|
|
12
|
-
tipOffset?: number;
|
|
13
10
|
}
|
|
14
11
|
export interface TooltipProps {
|
|
15
|
-
children?:
|
|
12
|
+
children?: ReactNode;
|
|
16
13
|
text?: string;
|
|
17
14
|
content?: ReactNode;
|
|
18
15
|
config?: IConfig;
|
|
19
16
|
reversed?: boolean;
|
|
20
|
-
additionalOffset?: number;
|
|
21
17
|
className?: string;
|
|
22
18
|
hoverableClassName?: string;
|
|
23
19
|
withTriangle?: boolean;
|
|
24
|
-
unmountOnExit?: boolean;
|
|
25
20
|
initialShouldShow?: boolean;
|
|
26
21
|
useReactPortal?: boolean;
|
|
27
22
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sources":["../../../src/components/Tooltip/types.ts"],"sourcesContent":["import { ReactNode } from 'react';\n\nexport enum Sides {\n BOTTOM = 'bottom',\n TOP = 'top',\n}\n\nexport interface IConfig {\n side: Sides.TOP | Sides.BOTTOM;\n
|
|
1
|
+
{"version":3,"file":"types.js","sources":["../../../src/components/Tooltip/types.ts"],"sourcesContent":["import { ReactNode } from 'react';\n\nexport enum Sides {\n BOTTOM = 'bottom',\n TOP = 'top',\n}\n\nexport interface IConfig {\n side: Sides.TOP | Sides.BOTTOM;\n tipMinWidth: number;\n tipMaxWidth: number;\n}\n\nexport interface TooltipProps {\n children?: ReactNode;\n text?: string;\n content?: ReactNode;\n config?: IConfig;\n reversed?: boolean;\n className?: string;\n hoverableClassName?: string;\n withTriangle?: boolean;\n initialShouldShow?: boolean;\n useReactPortal?: boolean;\n}\n"],"names":[],"mappings":"IAEY;AAAZ,CAAA,UAAY,KAAK,EAAA;AACf,IAAA,KAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjB,IAAA,KAAA,CAAA,KAAA,CAAA,GAAA,KAAW;AACb,CAAC,EAHW,KAAK,KAAL,KAAK,GAAA,EAAA,CAAA,CAAA;;;;"}
|