frosted-ui 0.0.1-canary.82 → 0.0.1-canary.83
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/cjs/components/tooltip/tooltip.js +9 -42
- package/dist/cjs/components/tooltip/tooltip.js.map +1 -1
- package/dist/cjs/components/tooltip/tooltip.props.d.ts +0 -5
- package/dist/cjs/components/tooltip/tooltip.props.js +0 -6
- package/dist/cjs/components/tooltip/tooltip.props.js.map +1 -1
- package/dist/cjs/components/tooltip/tooltip.stories.d.ts +1 -4
- package/dist/cjs/components/tooltip/tooltip.stories.js +2 -23
- package/dist/cjs/components/tooltip/tooltip.stories.js.map +1 -1
- package/dist/esm/components/tooltip/tooltip.js +9 -42
- package/dist/esm/components/tooltip/tooltip.js.map +1 -1
- package/dist/esm/components/tooltip/tooltip.props.d.ts +0 -5
- package/dist/esm/components/tooltip/tooltip.props.js +0 -6
- package/dist/esm/components/tooltip/tooltip.props.js.map +1 -1
- package/dist/esm/components/tooltip/tooltip.stories.d.ts +1 -4
- package/dist/esm/components/tooltip/tooltip.stories.js +2 -23
- package/dist/esm/components/tooltip/tooltip.stories.js.map +1 -1
- package/package.json +1 -1
|
@@ -8,55 +8,22 @@ const radix_ui_1 = require("radix-ui");
|
|
|
8
8
|
const React = tslib_1.__importStar(require("react"));
|
|
9
9
|
const theme_1 = require("../../theme");
|
|
10
10
|
const text_1 = require("../text");
|
|
11
|
-
const tooltip_props_1 = require("./tooltip.props");
|
|
12
11
|
const Tooltip = (props) => {
|
|
13
|
-
const { children, className, open, defaultOpen, onOpenChange, delayDuration, disableHoverableContent, content, container, forceMount,
|
|
14
|
-
const [isOverflowing, setIsOverflowing] = React.useState(false);
|
|
15
|
-
const [triggerElement, setTriggerElement] = React.useState(null);
|
|
16
|
-
React.useLayoutEffect(() => {
|
|
17
|
-
if (type === 'overflow' && triggerElement) {
|
|
18
|
-
const updateTriggerOverflow = () => {
|
|
19
|
-
const isOverflowing = triggerElement.offsetWidth < triggerElement.scrollWidth ||
|
|
20
|
-
triggerElement.offsetHeight < triggerElement.scrollHeight;
|
|
21
|
-
setIsOverflowing(isOverflowing);
|
|
22
|
-
};
|
|
23
|
-
updateTriggerOverflow();
|
|
24
|
-
const resizeObserver = new ResizeObserver(() => {
|
|
25
|
-
updateTriggerOverflow();
|
|
26
|
-
});
|
|
27
|
-
resizeObserver.observe(triggerElement);
|
|
28
|
-
const mutationObserver = new MutationObserver(() => {
|
|
29
|
-
updateTriggerOverflow();
|
|
30
|
-
});
|
|
31
|
-
mutationObserver.observe(triggerElement, {
|
|
32
|
-
attributes: true,
|
|
33
|
-
childList: true,
|
|
34
|
-
subtree: true,
|
|
35
|
-
});
|
|
36
|
-
return () => {
|
|
37
|
-
resizeObserver.disconnect();
|
|
38
|
-
mutationObserver.disconnect();
|
|
39
|
-
};
|
|
40
|
-
}
|
|
41
|
-
else {
|
|
42
|
-
setIsOverflowing(false);
|
|
43
|
-
}
|
|
44
|
-
}, [triggerElement, type]);
|
|
12
|
+
const { children, className, open, defaultOpen, onOpenChange, delayDuration, disableHoverableContent, content, container, forceMount, ...tooltipContentProps } = props;
|
|
45
13
|
const rootProps = {
|
|
46
|
-
open
|
|
47
|
-
defaultOpen
|
|
14
|
+
open,
|
|
15
|
+
defaultOpen,
|
|
48
16
|
onOpenChange,
|
|
49
17
|
delayDuration,
|
|
50
18
|
disableHoverableContent,
|
|
51
19
|
};
|
|
52
20
|
return (React.createElement(radix_ui_1.Tooltip.Root, { ...rootProps },
|
|
53
|
-
React.createElement(radix_ui_1.Tooltip.Trigger, { asChild: true,
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
React.createElement(radix_ui_1.Tooltip.Arrow, { className: "fui-TooltipArrow" })))) : null)));
|
|
21
|
+
React.createElement(radix_ui_1.Tooltip.Trigger, { asChild: true }, children),
|
|
22
|
+
React.createElement(radix_ui_1.Tooltip.Portal, { container: container, forceMount: forceMount },
|
|
23
|
+
React.createElement(theme_1.Theme, { asChild: true },
|
|
24
|
+
React.createElement(radix_ui_1.Tooltip.Content, { sideOffset: 4, collisionPadding: 10, ...tooltipContentProps, className: (0, classnames_1.default)('fui-TooltipContent', className) },
|
|
25
|
+
React.createElement(text_1.Text, { as: "p", className: "fui-TooltipText", size: "1" }, content),
|
|
26
|
+
React.createElement(radix_ui_1.Tooltip.Arrow, { className: "fui-TooltipArrow" }))))));
|
|
60
27
|
};
|
|
61
28
|
exports.Tooltip = Tooltip;
|
|
62
29
|
Tooltip.displayName = 'Tooltip';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;AAEb,oEAAoC;AACpC,uCAAuD;AACvD,qDAA+B;AAC/B,uCAAoC;AACpC,kCAA+B;
|
|
1
|
+
{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;AAEb,oEAAoC;AACpC,uCAAuD;AACvD,qDAA+B;AAC/B,uCAAoC;AACpC,kCAA+B;AAe/B,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAE,EAAE;IACtC,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,aAAa,EACb,uBAAuB,EACvB,OAAO,EACP,SAAS,EACT,UAAU,EACV,GAAG,mBAAmB,EACvB,GAAG,KAAK,CAAC;IACV,MAAM,SAAS,GAAG;QAChB,IAAI;QACJ,WAAW;QACX,YAAY;QACZ,aAAa;QACb,uBAAuB;KACxB,CAAC;IACF,OAAO,CACL,oBAAC,kBAAgB,CAAC,IAAI,OAAK,SAAS;QAClC,oBAAC,kBAAgB,CAAC,OAAO,IAAC,OAAO,UAAE,QAAQ,CAA4B;QACvE,oBAAC,kBAAgB,CAAC,MAAM,IAAC,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU;YACnE,oBAAC,aAAK,IAAC,OAAO;gBACZ,oBAAC,kBAAgB,CAAC,OAAO,IACvB,UAAU,EAAE,CAAC,EACb,gBAAgB,EAAE,EAAE,KAChB,mBAAmB,EACvB,SAAS,EAAE,IAAA,oBAAU,EAAC,oBAAoB,EAAE,SAAS,CAAC;oBAEtD,oBAAC,WAAI,IAAC,EAAE,EAAC,GAAG,EAAC,SAAS,EAAC,iBAAiB,EAAC,IAAI,EAAC,GAAG,IAC9C,OAAO,CACH;oBACP,oBAAC,kBAAgB,CAAC,KAAK,IAAC,SAAS,EAAC,kBAAkB,GAAG,CAC9B,CACrB,CACgB,CACJ,CACzB,CAAC;AACJ,CAAC,CAAC;AAGO,0BAAO;AAFhB,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC"}
|
|
@@ -1,14 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.tooltipPropDefs = void 0;
|
|
4
|
-
const typeValues = ['always', 'overflow'];
|
|
5
4
|
const tooltipPropDefs = {
|
|
6
5
|
content: { type: 'ReactNode', default: undefined, required: true },
|
|
7
|
-
type: {
|
|
8
|
-
type: 'enum',
|
|
9
|
-
values: typeValues,
|
|
10
|
-
default: 'always',
|
|
11
|
-
},
|
|
12
6
|
};
|
|
13
7
|
exports.tooltipPropDefs = tooltipPropDefs;
|
|
14
8
|
//# sourceMappingURL=tooltip.props.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.props.js","sourceRoot":"","sources":["../../../../src/components/tooltip/tooltip.props.ts"],"names":[],"mappings":";;;AAEA,MAAM,
|
|
1
|
+
{"version":3,"file":"tooltip.props.js","sourceRoot":"","sources":["../../../../src/components/tooltip/tooltip.props.ts"],"names":[],"mappings":";;;AAEA,MAAM,eAAe,GAAG;IACtB,OAAO,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE;CAGnE,CAAC;AAEO,0CAAe"}
|
|
@@ -6,9 +6,7 @@ declare const meta: {
|
|
|
6
6
|
(props: import("./tooltip").TooltipProps): React.JSX.Element;
|
|
7
7
|
displayName: string;
|
|
8
8
|
};
|
|
9
|
-
args: {
|
|
10
|
-
type: "always";
|
|
11
|
-
};
|
|
9
|
+
args: {};
|
|
12
10
|
parameters: {
|
|
13
11
|
layout: string;
|
|
14
12
|
};
|
|
@@ -17,4 +15,3 @@ declare const meta: {
|
|
|
17
15
|
export default meta;
|
|
18
16
|
type Story = StoryObj<typeof meta>;
|
|
19
17
|
export declare const Default: Story;
|
|
20
|
-
export declare const ShowOnOverflow: Story;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.
|
|
3
|
+
exports.Default = void 0;
|
|
4
4
|
const tslib_1 = require("tslib");
|
|
5
5
|
const react_1 = tslib_1.__importDefault(require("react"));
|
|
6
6
|
const __1 = require("..");
|
|
@@ -10,9 +10,7 @@ const ExampleIcon = ({ size }) => (react_1.default.createElement("svg", { width:
|
|
|
10
10
|
const meta = {
|
|
11
11
|
title: 'Components/Tooltip',
|
|
12
12
|
component: __1.Tooltip,
|
|
13
|
-
args: {
|
|
14
|
-
type: __1.tooltipPropDefs.type.default,
|
|
15
|
-
},
|
|
13
|
+
args: {},
|
|
16
14
|
parameters: {
|
|
17
15
|
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
|
|
18
16
|
layout: 'centered',
|
|
@@ -30,23 +28,4 @@ exports.Default = {
|
|
|
30
28
|
react_1.default.createElement(__1.IconButton, null,
|
|
31
29
|
react_1.default.createElement(ExampleIcon, { size: 16 })))),
|
|
32
30
|
};
|
|
33
|
-
exports.ShowOnOverflow = {
|
|
34
|
-
name: 'Show on overflow',
|
|
35
|
-
args: {
|
|
36
|
-
content: 'This is a really long text',
|
|
37
|
-
type: 'overflow',
|
|
38
|
-
},
|
|
39
|
-
render: ({ content, type }) => {
|
|
40
|
-
return (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' } },
|
|
41
|
-
react_1.default.createElement(__1.Tooltip, { content: content, type: type, defaultOpen: true },
|
|
42
|
-
react_1.default.createElement(__1.Text, null, content)),
|
|
43
|
-
react_1.default.createElement(__1.Tooltip, { content: content, type: type, defaultOpen: true },
|
|
44
|
-
react_1.default.createElement(__1.Text, { style: {
|
|
45
|
-
width: 100,
|
|
46
|
-
overflow: 'hidden',
|
|
47
|
-
textOverflow: 'ellipsis',
|
|
48
|
-
whiteSpace: 'nowrap',
|
|
49
|
-
} }, content))));
|
|
50
|
-
},
|
|
51
|
-
};
|
|
52
31
|
//# sourceMappingURL=tooltip.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.stories.js","sourceRoot":"","sources":["../../../../src/components/tooltip/tooltip.stories.tsx"],"names":[],"mappings":";;;;AAEA,0DAA0B;AAC1B,
|
|
1
|
+
{"version":3,"file":"tooltip.stories.js","sourceRoot":"","sources":["../../../../src/components/tooltip/tooltip.stories.tsx"],"names":[],"mappings":";;;;AAEA,0DAA0B;AAC1B,0BAAyC;AAEzC,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAoB,EAAE,EAAE,CAAC,CAClD,uCAAK,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;IAChG,wCACE,CAAC,EAAC,oWAAoW,EACtW,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,GACZ,CACJ,CACP,CAAC;AACF,oHAAoH;AACpH,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,WAAO;IAClB,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,kIAAkI;QAClI,MAAM,EAAE,UAAU;KACnB;IACD,gIAAgI;IAChI,IAAI,EAAE,CAAC,UAAU,CAAC;CACY,CAAC;AAEjC,kBAAe,IAAI,CAAC;AAGpB,8FAA8F;AACjF,QAAA,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,OAAO,EAAE,gBAAgB;KAC1B;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAChB,8BAAC,WAAO,OAAK,IAAI;QACf,8BAAC,cAAU;YACT,8BAAC,WAAW,IAAC,IAAI,EAAE,EAAE,GAAI,CACd,CACL,CACX;CACF,CAAC"}
|
|
@@ -4,55 +4,22 @@ import { Tooltip as TooltipPrimitive } from 'radix-ui';
|
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import { Theme } from '../../theme';
|
|
6
6
|
import { Text } from '../text';
|
|
7
|
-
import { tooltipPropDefs } from './tooltip.props';
|
|
8
7
|
const Tooltip = (props) => {
|
|
9
|
-
const { children, className, open, defaultOpen, onOpenChange, delayDuration, disableHoverableContent, content, container, forceMount,
|
|
10
|
-
const [isOverflowing, setIsOverflowing] = React.useState(false);
|
|
11
|
-
const [triggerElement, setTriggerElement] = React.useState(null);
|
|
12
|
-
React.useLayoutEffect(() => {
|
|
13
|
-
if (type === 'overflow' && triggerElement) {
|
|
14
|
-
const updateTriggerOverflow = () => {
|
|
15
|
-
const isOverflowing = triggerElement.offsetWidth < triggerElement.scrollWidth ||
|
|
16
|
-
triggerElement.offsetHeight < triggerElement.scrollHeight;
|
|
17
|
-
setIsOverflowing(isOverflowing);
|
|
18
|
-
};
|
|
19
|
-
updateTriggerOverflow();
|
|
20
|
-
const resizeObserver = new ResizeObserver(() => {
|
|
21
|
-
updateTriggerOverflow();
|
|
22
|
-
});
|
|
23
|
-
resizeObserver.observe(triggerElement);
|
|
24
|
-
const mutationObserver = new MutationObserver(() => {
|
|
25
|
-
updateTriggerOverflow();
|
|
26
|
-
});
|
|
27
|
-
mutationObserver.observe(triggerElement, {
|
|
28
|
-
attributes: true,
|
|
29
|
-
childList: true,
|
|
30
|
-
subtree: true,
|
|
31
|
-
});
|
|
32
|
-
return () => {
|
|
33
|
-
resizeObserver.disconnect();
|
|
34
|
-
mutationObserver.disconnect();
|
|
35
|
-
};
|
|
36
|
-
}
|
|
37
|
-
else {
|
|
38
|
-
setIsOverflowing(false);
|
|
39
|
-
}
|
|
40
|
-
}, [triggerElement, type]);
|
|
8
|
+
const { children, className, open, defaultOpen, onOpenChange, delayDuration, disableHoverableContent, content, container, forceMount, ...tooltipContentProps } = props;
|
|
41
9
|
const rootProps = {
|
|
42
|
-
open
|
|
43
|
-
defaultOpen
|
|
10
|
+
open,
|
|
11
|
+
defaultOpen,
|
|
44
12
|
onOpenChange,
|
|
45
13
|
delayDuration,
|
|
46
14
|
disableHoverableContent,
|
|
47
15
|
};
|
|
48
16
|
return (React.createElement(TooltipPrimitive.Root, { ...rootProps },
|
|
49
|
-
React.createElement(TooltipPrimitive.Trigger, { asChild: true,
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
React.createElement(TooltipPrimitive.Arrow, { className: "fui-TooltipArrow" })))) : null)));
|
|
17
|
+
React.createElement(TooltipPrimitive.Trigger, { asChild: true }, children),
|
|
18
|
+
React.createElement(TooltipPrimitive.Portal, { container: container, forceMount: forceMount },
|
|
19
|
+
React.createElement(Theme, { asChild: true },
|
|
20
|
+
React.createElement(TooltipPrimitive.Content, { sideOffset: 4, collisionPadding: 10, ...tooltipContentProps, className: classNames('fui-TooltipContent', className) },
|
|
21
|
+
React.createElement(Text, { as: "p", className: "fui-TooltipText", size: "1" }, content),
|
|
22
|
+
React.createElement(TooltipPrimitive.Arrow, { className: "fui-TooltipArrow" }))))));
|
|
56
23
|
};
|
|
57
24
|
Tooltip.displayName = 'Tooltip';
|
|
58
25
|
export { Tooltip };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAe/B,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAE,EAAE;IACtC,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,aAAa,EACb,uBAAuB,EACvB,OAAO,EACP,SAAS,EACT,UAAU,EACV,GAAG,mBAAmB,EACvB,GAAG,KAAK,CAAC;IACV,MAAM,SAAS,GAAG;QAChB,IAAI;QACJ,WAAW;QACX,YAAY;QACZ,aAAa;QACb,uBAAuB;KACxB,CAAC;IACF,OAAO,CACL,oBAAC,gBAAgB,CAAC,IAAI,OAAK,SAAS;QAClC,oBAAC,gBAAgB,CAAC,OAAO,IAAC,OAAO,UAAE,QAAQ,CAA4B;QACvE,oBAAC,gBAAgB,CAAC,MAAM,IAAC,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU;YACnE,oBAAC,KAAK,IAAC,OAAO;gBACZ,oBAAC,gBAAgB,CAAC,OAAO,IACvB,UAAU,EAAE,CAAC,EACb,gBAAgB,EAAE,EAAE,KAChB,mBAAmB,EACvB,SAAS,EAAE,UAAU,CAAC,oBAAoB,EAAE,SAAS,CAAC;oBAEtD,oBAAC,IAAI,IAAC,EAAE,EAAC,GAAG,EAAC,SAAS,EAAC,iBAAiB,EAAC,IAAI,EAAC,GAAG,IAC9C,OAAO,CACH;oBACP,oBAAC,gBAAgB,CAAC,KAAK,IAAC,SAAS,EAAC,kBAAkB,GAAG,CAC9B,CACrB,CACgB,CACJ,CACzB,CAAC;AACJ,CAAC,CAAC;AACF,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC;AAEhC,OAAO,EAAE,OAAO,EAAE,CAAC"}
|
|
@@ -1,11 +1,5 @@
|
|
|
1
|
-
const typeValues = ['always', 'overflow'];
|
|
2
1
|
const tooltipPropDefs = {
|
|
3
2
|
content: { type: 'ReactNode', default: undefined, required: true },
|
|
4
|
-
type: {
|
|
5
|
-
type: 'enum',
|
|
6
|
-
values: typeValues,
|
|
7
|
-
default: 'always',
|
|
8
|
-
},
|
|
9
3
|
};
|
|
10
4
|
export { tooltipPropDefs };
|
|
11
5
|
//# sourceMappingURL=tooltip.props.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.props.js","sourceRoot":"","sources":["../../../../src/components/tooltip/tooltip.props.ts"],"names":[],"mappings":"AAEA,MAAM,
|
|
1
|
+
{"version":3,"file":"tooltip.props.js","sourceRoot":"","sources":["../../../../src/components/tooltip/tooltip.props.ts"],"names":[],"mappings":"AAEA,MAAM,eAAe,GAAG;IACtB,OAAO,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE;CAGnE,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,CAAC"}
|
|
@@ -6,9 +6,7 @@ declare const meta: {
|
|
|
6
6
|
(props: import("./tooltip").TooltipProps): React.JSX.Element;
|
|
7
7
|
displayName: string;
|
|
8
8
|
};
|
|
9
|
-
args: {
|
|
10
|
-
type: "always";
|
|
11
|
-
};
|
|
9
|
+
args: {};
|
|
12
10
|
parameters: {
|
|
13
11
|
layout: string;
|
|
14
12
|
};
|
|
@@ -17,4 +15,3 @@ declare const meta: {
|
|
|
17
15
|
export default meta;
|
|
18
16
|
type Story = StoryObj<typeof meta>;
|
|
19
17
|
export declare const Default: Story;
|
|
20
|
-
export declare const ShowOnOverflow: Story;
|
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { IconButton,
|
|
2
|
+
import { IconButton, Tooltip } from '..';
|
|
3
3
|
const ExampleIcon = ({ size }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
4
4
|
React.createElement("path", { d: "M3 2.5C3 2.22386 3.22386 2 3.5 2H11.5C11.7761 2 12 2.22386 12 2.5V13.5C12 13.6818 11.9014 13.8492 11.7424 13.9373C11.5834 14.0254 11.3891 14.0203 11.235 13.924L7.5 11.5896L3.765 13.924C3.61087 14.0203 3.41659 14.0254 3.25762 13.9373C3.09864 13.8492 3 13.6818 3 13.5V2.5ZM4 3V12.5979L6.97 10.7416C7.29427 10.539 7.70573 10.539 8.03 10.7416L11 12.5979V3H4Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" })));
|
|
5
5
|
// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
|
|
6
6
|
const meta = {
|
|
7
7
|
title: 'Components/Tooltip',
|
|
8
8
|
component: Tooltip,
|
|
9
|
-
args: {
|
|
10
|
-
type: tooltipPropDefs.type.default,
|
|
11
|
-
},
|
|
9
|
+
args: {},
|
|
12
10
|
parameters: {
|
|
13
11
|
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
|
|
14
12
|
layout: 'centered',
|
|
@@ -26,23 +24,4 @@ export const Default = {
|
|
|
26
24
|
React.createElement(IconButton, null,
|
|
27
25
|
React.createElement(ExampleIcon, { size: 16 })))),
|
|
28
26
|
};
|
|
29
|
-
export const ShowOnOverflow = {
|
|
30
|
-
name: 'Show on overflow',
|
|
31
|
-
args: {
|
|
32
|
-
content: 'This is a really long text',
|
|
33
|
-
type: 'overflow',
|
|
34
|
-
},
|
|
35
|
-
render: ({ content, type }) => {
|
|
36
|
-
return (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' } },
|
|
37
|
-
React.createElement(Tooltip, { content: content, type: type, defaultOpen: true },
|
|
38
|
-
React.createElement(Text, null, content)),
|
|
39
|
-
React.createElement(Tooltip, { content: content, type: type, defaultOpen: true },
|
|
40
|
-
React.createElement(Text, { style: {
|
|
41
|
-
width: 100,
|
|
42
|
-
overflow: 'hidden',
|
|
43
|
-
textOverflow: 'ellipsis',
|
|
44
|
-
whiteSpace: 'nowrap',
|
|
45
|
-
} }, content))));
|
|
46
|
-
},
|
|
47
|
-
};
|
|
48
27
|
//# sourceMappingURL=tooltip.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.stories.js","sourceRoot":"","sources":["../../../../src/components/tooltip/tooltip.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,
|
|
1
|
+
{"version":3,"file":"tooltip.stories.js","sourceRoot":"","sources":["../../../../src/components/tooltip/tooltip.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC;AAEzC,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAoB,EAAE,EAAE,CAAC,CAClD,6BAAK,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;IAChG,8BACE,CAAC,EAAC,oWAAoW,EACtW,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,GACZ,CACJ,CACP,CAAC;AACF,oHAAoH;AACpH,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,OAAO;IAClB,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,kIAAkI;QAClI,MAAM,EAAE,UAAU;KACnB;IACD,gIAAgI;IAChI,IAAI,EAAE,CAAC,UAAU,CAAC;CACY,CAAC;AAEjC,eAAe,IAAI,CAAC;AAGpB,8FAA8F;AAC9F,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,OAAO,EAAE,gBAAgB;KAC1B;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAChB,oBAAC,OAAO,OAAK,IAAI;QACf,oBAAC,UAAU;YACT,oBAAC,WAAW,IAAC,IAAI,EAAE,EAAE,GAAI,CACd,CACL,CACX;CACF,CAAC"}
|