@apify/ui-library 1.92.1-featimprovetooltip-7e1224.84 → 1.93.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/src/components/floating/index.d.ts +0 -2
- package/dist/src/components/floating/index.d.ts.map +1 -1
- package/dist/src/components/floating/index.js +0 -2
- package/dist/src/components/floating/index.js.map +1 -1
- package/dist/src/components/index.d.ts +0 -1
- package/dist/src/components/index.d.ts.map +1 -1
- package/dist/src/components/index.js +0 -1
- package/dist/src/components/index.js.map +1 -1
- package/dist/src/components/simple_markdown/simple_markdown.d.ts.map +1 -1
- package/dist/src/components/simple_markdown/simple_markdown.js +8 -0
- package/dist/src/components/simple_markdown/simple_markdown.js.map +1 -1
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/components/floating/index.ts +0 -2
- package/src/components/index.ts +0 -1
- package/src/components/simple_markdown/simple_markdown.tsx +25 -0
- package/dist/src/components/floating/floating_component_base.d.ts +0 -40
- package/dist/src/components/floating/floating_component_base.d.ts.map +0 -1
- package/dist/src/components/floating/floating_component_base.js +0 -109
- package/dist/src/components/floating/floating_component_base.js.map +0 -1
- package/dist/src/components/floating/tooltip.d.ts +0 -41
- package/dist/src/components/floating/tooltip.d.ts.map +0 -1
- package/dist/src/components/floating/tooltip.js +0 -66
- package/dist/src/components/floating/tooltip.js.map +0 -1
- package/dist/src/components/floating/tooltip_content.d.ts +0 -5
- package/dist/src/components/floating/tooltip_content.d.ts.map +0 -1
- package/dist/src/components/floating/tooltip_content.js +0 -65
- package/dist/src/components/floating/tooltip_content.js.map +0 -1
- package/dist/src/components/shortcut.d.ts +0 -9
- package/dist/src/components/shortcut.d.ts.map +0 -1
- package/dist/src/components/shortcut.js +0 -28
- package/dist/src/components/shortcut.js.map +0 -1
- package/src/components/floating/floating_component_base.tsx +0 -199
- package/src/components/floating/tooltip.stories.jsx +0 -130
- package/src/components/floating/tooltip.tsx +0 -146
- package/src/components/floating/tooltip_content.tsx +0 -103
- package/src/components/shortcut.stories.jsx +0 -58
- package/src/components/shortcut.tsx +0 -54
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@apify/ui-library",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.93.0",
|
|
4
4
|
"description": "React UI library used by apify.com",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"type": "module",
|
|
@@ -66,5 +66,5 @@
|
|
|
66
66
|
"src",
|
|
67
67
|
"style"
|
|
68
68
|
],
|
|
69
|
-
"gitHead": "
|
|
69
|
+
"gitHead": "8732fbd118d52b16a45c1adfb4673b9a833f1cd1"
|
|
70
70
|
}
|
package/src/components/index.ts
CHANGED
|
@@ -14,6 +14,7 @@ import { visit } from 'unist-util-visit';
|
|
|
14
14
|
import { theme } from '../../design_system/theme.js';
|
|
15
15
|
import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
|
|
16
16
|
import { Box } from '../box.js';
|
|
17
|
+
import { Image } from '../image.js';
|
|
17
18
|
import { isUrlExternal } from '../link.js';
|
|
18
19
|
import { cleanMarkdown } from '../readme_renderer/utils.js';
|
|
19
20
|
import { Heading, HeadingContent, Text, TextContent } from '../text/index.js';
|
|
@@ -106,6 +107,28 @@ const getUnsupportedRehypeTagsSanitationPlugIn = (
|
|
|
106
107
|
});
|
|
107
108
|
};
|
|
108
109
|
|
|
110
|
+
const MarkdownImage = ({
|
|
111
|
+
src,
|
|
112
|
+
alt,
|
|
113
|
+
height,
|
|
114
|
+
width,
|
|
115
|
+
}: {
|
|
116
|
+
src?: string | null;
|
|
117
|
+
alt?: string;
|
|
118
|
+
height?: number | string;
|
|
119
|
+
width?: number | string;
|
|
120
|
+
}) => {
|
|
121
|
+
if (!src) return null; // If no src, do not render the image
|
|
122
|
+
return (
|
|
123
|
+
<Image
|
|
124
|
+
src={src || ''}
|
|
125
|
+
alt={alt}
|
|
126
|
+
height={height ? Number.parseInt(height.toString(), 10) : undefined}
|
|
127
|
+
width={width ? Number.parseInt(width.toString(), 10) : undefined}
|
|
128
|
+
/>
|
|
129
|
+
);
|
|
130
|
+
};
|
|
131
|
+
|
|
109
132
|
export const defaultRehypePlugins = [rehypeRaw];
|
|
110
133
|
export const defaultRemarkPlugins = [remarkGfm];
|
|
111
134
|
|
|
@@ -128,6 +151,7 @@ const regularMarkdownSizeComponents: Components = {
|
|
|
128
151
|
li: ({ children }) => <TextContent as='li' mt='space4'>{children}</TextContent>,
|
|
129
152
|
a: ({ children, href }) => <MarkdownLink to={href}>{children}</MarkdownLink>,
|
|
130
153
|
code: ({ children, inline }) => <MarkdownCode inline={inline} size='regular'>{children}</MarkdownCode>,
|
|
154
|
+
img: ({ src, alt, height, width }) => <MarkdownImage src={src} alt={alt} height={height} width={width} />,
|
|
131
155
|
};
|
|
132
156
|
|
|
133
157
|
const smallMarkdownSizeComponents: Components = {
|
|
@@ -148,6 +172,7 @@ const smallMarkdownSizeComponents: Components = {
|
|
|
148
172
|
li: ({ children }) => <Text as='li' mt='space4'>{children}</Text>,
|
|
149
173
|
a: ({ children, href }) => <MarkdownLink to={href}>{children}</MarkdownLink>,
|
|
150
174
|
code: ({ children, inline }) => <MarkdownCode inline={inline} size='small'>{children}</MarkdownCode>,
|
|
175
|
+
img: ({ src, alt, height, width }) => <MarkdownImage src={src} alt={alt} height={height} width={width} />,
|
|
151
176
|
};
|
|
152
177
|
|
|
153
178
|
type MarkdownSize = 'regular' | 'small';
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { type Strategy } from '@floating-ui/react';
|
|
2
|
-
import { type ComponentType, type ReactNode, type RefObject } from 'react';
|
|
3
|
-
export declare const classNames: {
|
|
4
|
-
CHILDREN: string;
|
|
5
|
-
};
|
|
6
|
-
export declare const FLOATING_PLACEMENT: {
|
|
7
|
-
readonly TOP: "top";
|
|
8
|
-
readonly TOP_START: "top-start";
|
|
9
|
-
readonly TOP_END: "top-end";
|
|
10
|
-
readonly RIGHT: "right";
|
|
11
|
-
readonly RIGHT_START: "right-start";
|
|
12
|
-
readonly RIGHT_END: "right-end";
|
|
13
|
-
readonly BOTTOM: "bottom";
|
|
14
|
-
readonly BOTTOM_START: "bottom-start";
|
|
15
|
-
readonly BOTTOM_END: "bottom-end";
|
|
16
|
-
readonly LEFT: "left";
|
|
17
|
-
readonly LEFT_START: "left-start";
|
|
18
|
-
readonly LEFT_END: "left-end";
|
|
19
|
-
};
|
|
20
|
-
export type FloatingPlacement = typeof FLOATING_PLACEMENT[keyof typeof FLOATING_PLACEMENT];
|
|
21
|
-
export interface FloatingComponentBaseProps {
|
|
22
|
-
placement?: FloatingPlacement;
|
|
23
|
-
autoPlacements?: FloatingPlacement[];
|
|
24
|
-
strategy?: Strategy;
|
|
25
|
-
content?: ReactNode | string;
|
|
26
|
-
children?: ReactNode;
|
|
27
|
-
isOpen?: boolean;
|
|
28
|
-
triggerRef?: RefObject<HTMLDivElement>;
|
|
29
|
-
className?: string;
|
|
30
|
-
offsetPx?: number;
|
|
31
|
-
contentWrapClassName?: string;
|
|
32
|
-
CloseButtonComponent?: ComponentType;
|
|
33
|
-
showInPortal?: boolean;
|
|
34
|
-
}
|
|
35
|
-
/**
|
|
36
|
-
* This is just the base component for Tooltips and Popovers.
|
|
37
|
-
* Don't use this - use Tooltip/HelpPopover instead.
|
|
38
|
-
*/
|
|
39
|
-
export declare const FloatingComponentBase: ({ placement, autoPlacements, strategy, content, children, isOpen, triggerRef, className, offsetPx, contentWrapClassName, CloseButtonComponent, showInPortal, }: FloatingComponentBaseProps) => import("react/jsx-runtime").JSX.Element;
|
|
40
|
-
//# sourceMappingURL=floating_component_base.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"floating_component_base.d.ts","sourceRoot":"","sources":["../../../../src/components/floating/floating_component_base.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQH,KAAK,QAAQ,EAGhB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,KAAK,aAAa,EAAmD,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAK5H,eAAO,MAAM,UAAU;;CAEtB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;CAarB,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,OAAO,kBAAkB,CAAC,MAAM,OAAO,kBAAkB,CAAC,CAAC;AAU3F,MAAM,WAAW,0BAA0B;IACvC,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,cAAc,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACrC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,oBAAoB,CAAC,EAAE,aAAa,CAAC;IACrC,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B;AA4CD;;;GAGG;AACH,eAAO,MAAM,qBAAqB,mKAa/B,0BAA0B,4CA6E5B,CAAC"}
|
|
@@ -1,109 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { autoPlacement, autoUpdate, flip, FloatingPortal, hide, offset, shift, useFloating, useTransitionStyles, } from '@floating-ui/react';
|
|
3
|
-
import clsx from 'clsx';
|
|
4
|
-
import { forwardRef } from 'react';
|
|
5
|
-
import styled from 'styled-components';
|
|
6
|
-
import { theme } from '../../design_system/theme.js';
|
|
7
|
-
export const classNames = {
|
|
8
|
-
CHILDREN: 'FloatingComponent-children',
|
|
9
|
-
};
|
|
10
|
-
export const FLOATING_PLACEMENT = {
|
|
11
|
-
TOP: 'top',
|
|
12
|
-
TOP_START: 'top-start',
|
|
13
|
-
TOP_END: 'top-end',
|
|
14
|
-
RIGHT: 'right',
|
|
15
|
-
RIGHT_START: 'right-start',
|
|
16
|
-
RIGHT_END: 'right-end',
|
|
17
|
-
BOTTOM: 'bottom',
|
|
18
|
-
BOTTOM_START: 'bottom-start',
|
|
19
|
-
BOTTOM_END: 'bottom-end',
|
|
20
|
-
LEFT: 'left',
|
|
21
|
-
LEFT_START: 'left-start',
|
|
22
|
-
LEFT_END: 'left-end',
|
|
23
|
-
};
|
|
24
|
-
const FloatingComponentWrapStyled = styled.span `
|
|
25
|
-
padding: ${theme.space.space16};
|
|
26
|
-
${theme.typography.shared.mobile.bodyM};
|
|
27
|
-
border-radius: 0.8rem;
|
|
28
|
-
z-index: 999;
|
|
29
|
-
white-space: normal;
|
|
30
|
-
word-break: break-word;
|
|
31
|
-
cursor: default;
|
|
32
|
-
|
|
33
|
-
@media ${theme.device.tablet} {
|
|
34
|
-
${theme.typography.shared.tablet.bodyM};
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
@media ${theme.device.desktop} {
|
|
38
|
-
${theme.typography.shared.desktop.bodyM};
|
|
39
|
-
}
|
|
40
|
-
`;
|
|
41
|
-
const ChildrenWrap = styled.div `
|
|
42
|
-
width: fit-content;
|
|
43
|
-
`;
|
|
44
|
-
const StyledPopoverBox = styled.div `
|
|
45
|
-
display: flex;
|
|
46
|
-
align-items: center;
|
|
47
|
-
gap: ${theme.space.space4};
|
|
48
|
-
button {
|
|
49
|
-
color: inherit;
|
|
50
|
-
}
|
|
51
|
-
`;
|
|
52
|
-
const FloatingComponentWrap = forwardRef((props, ref) => {
|
|
53
|
-
const { showInPortal, ...rest } = props;
|
|
54
|
-
const component = _jsx(FloatingComponentWrapStyled, { ...rest, ref: ref });
|
|
55
|
-
if (showInPortal) {
|
|
56
|
-
return _jsx(FloatingPortal, { children: component });
|
|
57
|
-
}
|
|
58
|
-
return component;
|
|
59
|
-
});
|
|
60
|
-
FloatingComponentWrap.displayName = 'FloatingComponentWrap';
|
|
61
|
-
/**
|
|
62
|
-
* This is just the base component for Tooltips and Popovers.
|
|
63
|
-
* Don't use this - use Tooltip/HelpPopover instead.
|
|
64
|
-
*/
|
|
65
|
-
export const FloatingComponentBase = ({ placement = FLOATING_PLACEMENT.TOP, autoPlacements, strategy = 'fixed', content, children, isOpen = false, triggerRef, className, offsetPx = 10, contentWrapClassName, CloseButtonComponent, showInPortal = false, }) => {
|
|
66
|
-
const { x, y, refs: { setReference, setFloating }, strategy: effectiveStrategy, middlewareData: { hide: refHidden, }, context, } = useFloating({
|
|
67
|
-
open: isOpen,
|
|
68
|
-
placement,
|
|
69
|
-
strategy,
|
|
70
|
-
whileElementsMounted: autoUpdate,
|
|
71
|
-
middleware: [
|
|
72
|
-
offset(offsetPx),
|
|
73
|
-
autoPlacements?.length ? autoPlacement({ allowedPlacements: autoPlacements }) : flip(),
|
|
74
|
-
shift({ padding: 5 }),
|
|
75
|
-
hide({
|
|
76
|
-
strategy: 'referenceHidden',
|
|
77
|
-
}),
|
|
78
|
-
],
|
|
79
|
-
});
|
|
80
|
-
const { isMounted, styles } = useTransitionStyles(context, {
|
|
81
|
-
initial: ({ side }) => {
|
|
82
|
-
switch (side) {
|
|
83
|
-
case 'top':
|
|
84
|
-
return { opacity: 0, scale: '0.9', transform: 'translateY(10px)' };
|
|
85
|
-
case 'bottom':
|
|
86
|
-
return { opacity: 0, scale: '0.9', transform: 'translateY(-10px)' };
|
|
87
|
-
case 'left':
|
|
88
|
-
return { opacity: 0, scale: '0.9', transform: 'translateX(10px)' };
|
|
89
|
-
case 'right':
|
|
90
|
-
return { opacity: 0, scale: '0.9', transform: 'translateX(-10px)' };
|
|
91
|
-
default:
|
|
92
|
-
return {};
|
|
93
|
-
}
|
|
94
|
-
},
|
|
95
|
-
});
|
|
96
|
-
if (!content)
|
|
97
|
-
return _jsx("span", { children: children });
|
|
98
|
-
return (_jsxs(_Fragment, { children: [_jsx(ChildrenWrap, { className: clsx(classNames.CHILDREN, contentWrapClassName), ref: setReference, children: children }), isMounted && (_jsx(FloatingComponentWrap, { className: className, ref: setFloating, style: {
|
|
99
|
-
position: effectiveStrategy,
|
|
100
|
-
top: y ?? 0,
|
|
101
|
-
left: x ?? 0,
|
|
102
|
-
width: 'max-content',
|
|
103
|
-
visibility: refHidden?.referenceHidden ? 'hidden' : 'visible',
|
|
104
|
-
...styles,
|
|
105
|
-
}, onClick: (e) => e.stopPropagation(), showInPortal: showInPortal, children: _jsx("div", { ref: triggerRef, children: CloseButtonComponent
|
|
106
|
-
? _jsxs(StyledPopoverBox, { children: [content, _jsx(CloseButtonComponent, {})] })
|
|
107
|
-
: content }) }))] }));
|
|
108
|
-
};
|
|
109
|
-
//# sourceMappingURL=floating_component_base.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"floating_component_base.js","sourceRoot":"","sources":["../../../../src/components/floating/floating_component_base.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import { type ComponentType } from 'react';
|
|
2
|
-
import { type FloatingComponentBaseProps } from './floating_component_base.js';
|
|
3
|
-
export declare const TOOLTIP_TEXT_ALIGNS: {
|
|
4
|
-
readonly LEFT: "left";
|
|
5
|
-
readonly CENTER: "center";
|
|
6
|
-
};
|
|
7
|
-
export type TooltipTextAlign = typeof TOOLTIP_TEXT_ALIGNS[keyof typeof TOOLTIP_TEXT_ALIGNS];
|
|
8
|
-
export declare const TOOLTIP_SIZES: {
|
|
9
|
-
readonly XSMALL: "xsmall";
|
|
10
|
-
readonly SMALL: "small";
|
|
11
|
-
readonly MEDIUM: "medium";
|
|
12
|
-
readonly LARGE: "large";
|
|
13
|
-
readonly XLARGE: "xlarge";
|
|
14
|
-
};
|
|
15
|
-
export type TooltipSize = typeof TOOLTIP_SIZES[keyof typeof TOOLTIP_SIZES];
|
|
16
|
-
interface PersistentTooltipProps {
|
|
17
|
-
isOpenOverride?: boolean;
|
|
18
|
-
CloseButtonComponent?: ComponentType;
|
|
19
|
-
}
|
|
20
|
-
export interface TooltipProps extends Omit<FloatingComponentBaseProps, 'isOpen' | 'size'> {
|
|
21
|
-
as?: keyof JSX.IntrinsicElements | ComponentType<unknown>;
|
|
22
|
-
className?: string;
|
|
23
|
-
persistent?: PersistentTooltipProps;
|
|
24
|
-
delayShow?: number;
|
|
25
|
-
delayHide?: number;
|
|
26
|
-
shortcuts?: string[];
|
|
27
|
-
imageUrl?: string;
|
|
28
|
-
subtleText?: string;
|
|
29
|
-
size?: TooltipSize;
|
|
30
|
-
textAlign?: TooltipTextAlign;
|
|
31
|
-
}
|
|
32
|
-
interface WithTooltipProps {
|
|
33
|
-
tooltipProps?: TooltipProps;
|
|
34
|
-
}
|
|
35
|
-
/**
|
|
36
|
-
* Tooltip appears on hover, for onclick use Popover
|
|
37
|
-
*/
|
|
38
|
-
export declare const Tooltip: ({ as, className, persistent, delayShow, delayHide, shortcuts, imageUrl, subtleText, size, textAlign, ...rest }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
|
|
39
|
-
export declare function withTooltip<TProps extends Record<string, unknown> = Record<string, unknown>>(Component: ComponentType<TProps>): import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<TProps & WithTooltipProps> & import("react").RefAttributes<HTMLElement>>;
|
|
40
|
-
export {};
|
|
41
|
-
//# sourceMappingURL=tooltip.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/floating/tooltip.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,aAAa,EAAwB,MAAM,OAAO,CAAC;AAKjE,OAAO,EAAyB,KAAK,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAGtG,eAAO,MAAM,mBAAmB;;;CAGtB,CAAC;AAEX,MAAM,MAAM,gBAAgB,GAAG,OAAO,mBAAmB,CAAC,MAAM,OAAO,mBAAmB,CAAC,CAAC;AAE5F,eAAO,MAAM,aAAa;;;;;;CAMhB,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,OAAO,aAAa,CAAC,MAAM,OAAO,aAAa,CAAC,CAAC;AAE3E,UAAU,sBAAsB;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oBAAoB,CAAC,EAAE,aAAa,CAAC;CACxC;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,0BAA0B,EAAE,QAAQ,GAAG,MAAM,CAAC;IACrF,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,sBAAsB,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAChC;AAED,UAAU,gBAAgB;IACtB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC/B;AAgBD;;GAEG;AACH,eAAO,MAAM,OAAO,mHAYjB,YAAY,4CAmDd,CAAC;AAEF,wBAAgB,WAAW,CAAC,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,SAAS,EAAE,aAAa,CAAC,MAAM,CAAC,sJAW7H"}
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useFloating, useHover, useInteractions, } from '@floating-ui/react';
|
|
3
|
-
import { forwardRef, useState } from 'react';
|
|
4
|
-
import styled, { css } from 'styled-components';
|
|
5
|
-
import { theme } from '../../design_system/theme.js';
|
|
6
|
-
import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
|
|
7
|
-
import { FloatingComponentBase } from './floating_component_base.js';
|
|
8
|
-
import { TooltipContent } from './tooltip_content.js';
|
|
9
|
-
export const TOOLTIP_TEXT_ALIGNS = {
|
|
10
|
-
LEFT: 'left',
|
|
11
|
-
CENTER: 'center',
|
|
12
|
-
};
|
|
13
|
-
export const TOOLTIP_SIZES = {
|
|
14
|
-
XSMALL: 'xsmall',
|
|
15
|
-
SMALL: 'small',
|
|
16
|
-
MEDIUM: 'medium',
|
|
17
|
-
LARGE: 'large', /* Previously WIDE */
|
|
18
|
-
XLARGE: 'xlarge', /* Previously WIDER */
|
|
19
|
-
};
|
|
20
|
-
// Using a styled component to get access to the `as` prop
|
|
21
|
-
const TooltipFocusArea = styled.span ``;
|
|
22
|
-
const StyledFloatingComponentBase = styled(FloatingComponentBase) `
|
|
23
|
-
color: ${theme.colorPalette.dark.neutral0};
|
|
24
|
-
background-color: ${theme.colorPalette.dark.neutral900};
|
|
25
|
-
padding: ${theme.space.space8};
|
|
26
|
-
|
|
27
|
-
${({ $isDarkTheme }) => $isDarkTheme && css `
|
|
28
|
-
box-shadow: ${theme.shadow.shadow2};
|
|
29
|
-
border: 1px solid ${theme.color.neutral.smallTooltipBorder};
|
|
30
|
-
`}
|
|
31
|
-
`;
|
|
32
|
-
/**
|
|
33
|
-
* Tooltip appears on hover, for onclick use Popover
|
|
34
|
-
*/
|
|
35
|
-
export const Tooltip = ({ as, className, persistent, delayShow = 500, delayHide = 50, shortcuts = [], imageUrl, subtleText, size = TOOLTIP_SIZES.SMALL, textAlign = TOOLTIP_TEXT_ALIGNS.LEFT, ...rest }) => {
|
|
36
|
-
const { uiTheme } = useSharedUiDependencies();
|
|
37
|
-
const { isOpenOverride, CloseButtonComponent } = persistent || {};
|
|
38
|
-
const [open, setOpen] = useState(false);
|
|
39
|
-
const { refs, context } = useFloating({
|
|
40
|
-
open,
|
|
41
|
-
onOpenChange: setOpen,
|
|
42
|
-
});
|
|
43
|
-
const hover = useHover(context, {
|
|
44
|
-
delay: {
|
|
45
|
-
open: delayShow,
|
|
46
|
-
close: delayHide,
|
|
47
|
-
},
|
|
48
|
-
});
|
|
49
|
-
const { getReferenceProps, getFloatingProps } = useInteractions([hover]);
|
|
50
|
-
const tooltipProps = {
|
|
51
|
-
...rest,
|
|
52
|
-
isOpen: isOpenOverride !== undefined ? isOpenOverride : open,
|
|
53
|
-
content: _jsx(TooltipContent, { content: rest.content, shortcuts: shortcuts, imageUrl: imageUrl, subtleText: subtleText, size: size, textAlign: textAlign }),
|
|
54
|
-
};
|
|
55
|
-
return (_jsx(TooltipFocusArea, { as: as, className: className, ref: refs.setReference, ...getReferenceProps(), children: _jsx("div", { ref: refs.setFloating, ...getFloatingProps(), children: _jsx(StyledFloatingComponentBase, { ...tooltipProps, CloseButtonComponent: CloseButtonComponent, "$isDarkTheme": uiTheme === 'DARK' }) }) }));
|
|
56
|
-
};
|
|
57
|
-
export function withTooltip(Component) {
|
|
58
|
-
const Enhanced = forwardRef(({ tooltipProps, ...rest }, ref) => {
|
|
59
|
-
if (!tooltipProps)
|
|
60
|
-
return _jsx(Component, { ...rest, ref: ref });
|
|
61
|
-
return _jsx(Tooltip, { ...tooltipProps, children: _jsx(Component, { ...rest, ref: ref }) });
|
|
62
|
-
});
|
|
63
|
-
Enhanced.displayName = `WithTooltip:${Component.displayName || Component.name}`;
|
|
64
|
-
return Enhanced;
|
|
65
|
-
}
|
|
66
|
-
//# sourceMappingURL=tooltip.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../../src/components/floating/tooltip.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import type { TooltipProps } from './tooltip.js';
|
|
2
|
-
type ContentProps = Pick<TooltipProps, 'content' | 'shortcuts' | 'imageUrl' | 'subtleText' | 'size' | 'textAlign'>;
|
|
3
|
-
export declare const TooltipContent: ({ content, shortcuts, imageUrl, subtleText, size, textAlign, }: ContentProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
-
export {};
|
|
5
|
-
//# sourceMappingURL=tooltip_content.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip_content.d.ts","sourceRoot":"","sources":["../../../../src/components/floating/tooltip_content.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAiC,MAAM,cAAc,CAAC;AAGhF,KAAK,YAAY,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,GAAG,WAAW,CAAC,CAAC;AA6DnH,eAAO,MAAM,cAAc,mEAOxB,YAAY,4CA2Bd,CAAC"}
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import styled, { css } from 'styled-components';
|
|
3
|
-
import { theme } from '../../design_system/theme.js';
|
|
4
|
-
import { Shortcut } from '../shortcut.js';
|
|
5
|
-
import { TOOLTIP_SIZES, TOOLTIP_TEXT_ALIGNS } from './tooltip.js';
|
|
6
|
-
const TOOLTIP_SIZES_VALUES = {
|
|
7
|
-
xsmall: '24rem',
|
|
8
|
-
small: '32rem',
|
|
9
|
-
medium: '40rem',
|
|
10
|
-
large: '48rem',
|
|
11
|
-
xlarge: '64rem',
|
|
12
|
-
};
|
|
13
|
-
const TOOLTIP_CLASSNAMES = {
|
|
14
|
-
IMAGE: 'Tooltip-image',
|
|
15
|
-
TEXT_CONTENT: 'Tooltip-textContent',
|
|
16
|
-
SUBTLE_TEXT: 'Tooltip-subtleText',
|
|
17
|
-
SHORTCUT_CONTAINER: 'Tooltip-shortcutContainer',
|
|
18
|
-
};
|
|
19
|
-
const StyledContent = styled.div `
|
|
20
|
-
display: flex;
|
|
21
|
-
flex-direction: column;
|
|
22
|
-
gap: ${theme.space.space8};
|
|
23
|
-
/* Size - (tooltip padding + border) * 2 */
|
|
24
|
-
max-width: ${({ $size }) => css `calc(${TOOLTIP_SIZES_VALUES[$size]} - (${theme.space.space8} + 1px) * 2)`};
|
|
25
|
-
text-align: ${({ $textAlign }) => $textAlign || 'left'};
|
|
26
|
-
align-items: ${({ $textAlign }) => ($textAlign === 'center' ? 'center' : 'flex-start')};
|
|
27
|
-
|
|
28
|
-
.${TOOLTIP_CLASSNAMES.IMAGE} {
|
|
29
|
-
max-width: 100%;
|
|
30
|
-
max-height: 150px;
|
|
31
|
-
border-radius: 4px;
|
|
32
|
-
object-fit: contain;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.${TOOLTIP_CLASSNAMES.TEXT_CONTENT} {
|
|
36
|
-
display: flex;
|
|
37
|
-
flex-direction: column;
|
|
38
|
-
gap: ${theme.space.space8};
|
|
39
|
-
align-items: ${({ $textAlign }) => ($textAlign === 'center' ? 'center' : 'flex-start')};
|
|
40
|
-
|
|
41
|
-
/* When there is no child with subtleText class */
|
|
42
|
-
&:not(:has(.${TOOLTIP_CLASSNAMES.SUBTLE_TEXT})){
|
|
43
|
-
flex-direction: row;
|
|
44
|
-
flex-wrap: wrap;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
/* When there is a child with subtleText class */
|
|
48
|
-
&:has(.${TOOLTIP_CLASSNAMES.SUBTLE_TEXT}){
|
|
49
|
-
text-align: left;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
.${TOOLTIP_CLASSNAMES.SUBTLE_TEXT} {
|
|
53
|
-
color: ${theme.colorPalette.dark.neutral500};
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.${TOOLTIP_CLASSNAMES.SHORTCUT_CONTAINER} {
|
|
57
|
-
display: flex;
|
|
58
|
-
gap: ${theme.space.space4};
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
`;
|
|
62
|
-
export const TooltipContent = ({ content, shortcuts = [], imageUrl, subtleText, size = TOOLTIP_SIZES.SMALL, textAlign = TOOLTIP_TEXT_ALIGNS.LEFT, }) => {
|
|
63
|
-
return (_jsxs(StyledContent, { "$size": size, "$textAlign": textAlign, children: [imageUrl && (_jsx("img", { src: imageUrl, alt: "", className: TOOLTIP_CLASSNAMES.IMAGE })), _jsxs("div", { className: TOOLTIP_CLASSNAMES.TEXT_CONTENT, children: [content, subtleText && (_jsx("div", { className: TOOLTIP_CLASSNAMES.SUBTLE_TEXT, children: subtleText })), shortcuts.length > 0 && (_jsx("div", { className: TOOLTIP_CLASSNAMES.SHORTCUT_CONTAINER, children: shortcuts.map((shortcut, index) => (_jsx(Shortcut, { dark: true, children: shortcut }, `${shortcut}-${index}`))) }))] })] }));
|
|
64
|
-
};
|
|
65
|
-
//# sourceMappingURL=tooltip_content.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip_content.js","sourceRoot":"","sources":["../../../../src/components/floating/tooltip_content.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAIlE,MAAM,oBAAoB,GAAgC;IACtD,MAAM,EAAE,OAAO;IACf,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,OAAO;IACf,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,OAAO;CAClB,CAAC;AAEF,MAAM,kBAAkB,GAAG;IACvB,KAAK,EAAE,eAAe;IACtB,YAAY,EAAE,qBAAqB;IACnC,WAAW,EAAE,oBAAoB;IACjC,kBAAkB,EAAE,2BAA2B;CACzC,CAAC;AAEX,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAsD;;;WAG3E,KAAK,CAAC,KAAK,CAAC,MAAM;;iBAEZ,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA,QAAQ,oBAAoB,CAAC,KAAK,CAAC,OAAO,KAAK,CAAC,KAAK,CAAC,MAAM,cAAc;kBAC3F,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,UAAU,IAAI,MAAM;mBACvC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAAC,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC;;OAEnF,kBAAkB,CAAC,KAAK;;;;;;;OAOxB,kBAAkB,CAAC,YAAY;;;eAGvB,KAAK,CAAC,KAAK,CAAC,MAAM;uBACV,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAAC,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC;;;sBAGxE,kBAAkB,CAAC,WAAW;;;;;;iBAMnC,kBAAkB,CAAC,WAAW;;;;WAIpC,kBAAkB,CAAC,WAAW;qBACpB,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU;;;WAG5C,kBAAkB,CAAC,kBAAkB;;mBAE7B,KAAK,CAAC,KAAK,CAAC,MAAM;;;CAGpC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC3B,OAAO,EACP,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,UAAU,EACV,IAAI,GAAG,aAAa,CAAC,KAAK,EAC1B,SAAS,GAAG,mBAAmB,CAAC,IAAI,GACzB,EAAE,EAAE;IACf,OAAO,CACH,MAAC,aAAa,aAAQ,IAAI,gBAAc,SAAS,aAC5C,QAAQ,IAAI,CACT,cACI,GAAG,EAAE,QAAQ,EACb,GAAG,EAAC,EAAE,EACN,SAAS,EAAE,kBAAkB,CAAC,KAAK,GACrC,CACL,EACD,eAAK,SAAS,EAAE,kBAAkB,CAAC,YAAY,aAC1C,OAAO,EACP,UAAU,IAAI,CACX,cAAK,SAAS,EAAE,kBAAkB,CAAC,WAAW,YACzC,UAAU,GACT,CACT,EACA,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,CACrB,cAAK,SAAS,EAAE,kBAAkB,CAAC,kBAAkB,YAChD,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,CAAC,CAChC,KAAC,QAAQ,IAA8B,IAAI,kBAAE,QAAQ,IAAtC,GAAG,QAAQ,IAAI,KAAK,EAAE,CAA4B,CACpE,CAAC,GACA,CACT,IACC,IACM,CACnB,CAAC;AACN,CAAC,CAAC"}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
interface ShortcutProps {
|
|
2
|
-
as?: keyof JSX.IntrinsicElements;
|
|
3
|
-
className?: string;
|
|
4
|
-
children: React.ReactNode;
|
|
5
|
-
dark?: boolean;
|
|
6
|
-
}
|
|
7
|
-
export declare const Shortcut: ({ as, className, children, dark, }: ShortcutProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
-
export {};
|
|
9
|
-
//# sourceMappingURL=shortcut.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"shortcut.d.ts","sourceRoot":"","sources":["../../../src/components/shortcut.tsx"],"names":[],"mappings":"AAKA,UAAU,aAAa;IACnB,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,IAAI,CAAC,EAAE,OAAO,CAAC;CAClB;AAyBD,eAAO,MAAM,QAAQ,uCAKlB,aAAa,4CAYf,CAAC"}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import styled, { css } from 'styled-components';
|
|
3
|
-
import { theme } from '../design_system/theme.js';
|
|
4
|
-
import { Text } from './text/index.js';
|
|
5
|
-
const adaptiveColors = css `
|
|
6
|
-
background-color: ${theme.color.neutral.backgroundSubtle};
|
|
7
|
-
border: 1px solid ${theme.color.neutral.border};
|
|
8
|
-
color: ${theme.color.neutral.textSubtle};
|
|
9
|
-
`;
|
|
10
|
-
const darkColors = css `
|
|
11
|
-
background-color: ${theme.colorPalette.dark.neutral800};
|
|
12
|
-
border: 1px solid ${theme.colorPalette.dark.neutral700};
|
|
13
|
-
color: ${theme.colorPalette.dark.neutral400};
|
|
14
|
-
`;
|
|
15
|
-
const StyledShortcut = styled(Text) `
|
|
16
|
-
min-width: 10px; /* 20 - paddings - borders */
|
|
17
|
-
height: 14px; /* 20 - paddings - borders */
|
|
18
|
-
display: inline-flex;
|
|
19
|
-
align-items: center;
|
|
20
|
-
justify-content: center;
|
|
21
|
-
border-radius: ${theme.radius.radius4};
|
|
22
|
-
padding: ${theme.space.space2} ${theme.space.space4};
|
|
23
|
-
${({ $dark }) => ($dark ? darkColors : adaptiveColors)}
|
|
24
|
-
`;
|
|
25
|
-
export const Shortcut = ({ as, className, children, dark = false, }) => {
|
|
26
|
-
return (_jsx(StyledShortcut, { forwardedAs: as, className: className, "$dark": dark, type: 'code', size: 'small', weight: 'medium', children: children }));
|
|
27
|
-
};
|
|
28
|
-
//# sourceMappingURL=shortcut.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"shortcut.js","sourceRoot":"","sources":["../../../src/components/shortcut.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAUvC,MAAM,cAAc,GAAG,GAAG,CAAA;wBACF,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB;wBACpC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM;aACrC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU;CAC1C,CAAC;AAEF,MAAM,UAAU,GAAG,GAAG,CAAA;wBACE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU;wBAClC,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU;aAC7C,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU;CAC9C,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CAAqB;;;;;;qBAMnC,KAAK,CAAC,MAAM,CAAC,OAAO;eAC1B,KAAK,CAAC,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM;MACjD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC;CACzD,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACrB,EAAE,EACF,SAAS,EACT,QAAQ,EACR,IAAI,GAAG,KAAK,GACA,EAAE,EAAE;IAChB,OAAO,CACH,KAAC,cAAc,IACX,WAAW,EAAE,EAAE,EACf,SAAS,EAAE,SAAS,WACb,IAAI,EACX,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,OAAO,EACZ,MAAM,EAAC,QAAQ,YACd,QAAQ,GACI,CACpB,CAAC;AACN,CAAC,CAAC"}
|