@apify/ui-library 1.92.1-featimprovetooltip-7e1224.86 → 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.
Files changed (38) hide show
  1. package/dist/src/components/floating/index.d.ts +0 -2
  2. package/dist/src/components/floating/index.d.ts.map +1 -1
  3. package/dist/src/components/floating/index.js +0 -2
  4. package/dist/src/components/floating/index.js.map +1 -1
  5. package/dist/src/components/index.d.ts +0 -1
  6. package/dist/src/components/index.d.ts.map +1 -1
  7. package/dist/src/components/index.js +0 -1
  8. package/dist/src/components/index.js.map +1 -1
  9. package/dist/src/components/simple_markdown/simple_markdown.d.ts.map +1 -1
  10. package/dist/src/components/simple_markdown/simple_markdown.js +8 -0
  11. package/dist/src/components/simple_markdown/simple_markdown.js.map +1 -1
  12. package/dist/tsconfig.build.tsbuildinfo +1 -1
  13. package/package.json +2 -2
  14. package/src/components/floating/index.ts +0 -2
  15. package/src/components/index.ts +0 -1
  16. package/src/components/simple_markdown/simple_markdown.tsx +25 -0
  17. package/dist/src/components/floating/floating_component_base.d.ts +0 -40
  18. package/dist/src/components/floating/floating_component_base.d.ts.map +0 -1
  19. package/dist/src/components/floating/floating_component_base.js +0 -109
  20. package/dist/src/components/floating/floating_component_base.js.map +0 -1
  21. package/dist/src/components/floating/tooltip.d.ts +0 -41
  22. package/dist/src/components/floating/tooltip.d.ts.map +0 -1
  23. package/dist/src/components/floating/tooltip.js +0 -66
  24. package/dist/src/components/floating/tooltip.js.map +0 -1
  25. package/dist/src/components/floating/tooltip_content.d.ts +0 -5
  26. package/dist/src/components/floating/tooltip_content.d.ts.map +0 -1
  27. package/dist/src/components/floating/tooltip_content.js +0 -65
  28. package/dist/src/components/floating/tooltip_content.js.map +0 -1
  29. package/dist/src/components/shortcut.d.ts +0 -9
  30. package/dist/src/components/shortcut.d.ts.map +0 -1
  31. package/dist/src/components/shortcut.js +0 -29
  32. package/dist/src/components/shortcut.js.map +0 -1
  33. package/src/components/floating/floating_component_base.tsx +0 -199
  34. package/src/components/floating/tooltip.stories.jsx +0 -130
  35. package/src/components/floating/tooltip.tsx +0 -146
  36. package/src/components/floating/tooltip_content.tsx +0 -103
  37. package/src/components/shortcut.stories.jsx +0 -58
  38. package/src/components/shortcut.tsx +0 -55
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@apify/ui-library",
3
- "version": "1.92.1-featimprovetooltip-7e1224.86+42ab7a23a31",
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": "42ab7a23a314c6d9052bbeee53f667f127fa017f"
69
+ "gitHead": "8732fbd118d52b16a45c1adfb4673b9a833f1cd1"
70
70
  }
@@ -1,5 +1,3 @@
1
1
  export * from './menu.js';
2
2
  export * from './menu_components.js';
3
3
  export * from './menu_common.js';
4
- export * from './tooltip.js';
5
- export { FLOATING_PLACEMENT, type FloatingPlacement } from './floating_component_base.js';
@@ -20,4 +20,3 @@ export * from './rating.js';
20
20
  export * from './badge.js';
21
21
  export * from './tag.js';
22
22
  export * from './tabs/index.js';
23
- export * from './shortcut.js';
@@ -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;AA0BD,eAAO,MAAM,QAAQ,uCAKlB,aAAa,4CAYf,CAAC"}
@@ -1,29 +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
- /* Tooltips with shortcuts use dark mode styles */
11
- const darkColors = css `
12
- background-color: ${theme.colorPalette.dark.neutral800};
13
- border: 1px solid ${theme.colorPalette.dark.neutral700};
14
- color: ${theme.colorPalette.dark.neutral400};
15
- `;
16
- const StyledShortcut = styled(Text) `
17
- min-width: 10px; /* 20 - paddings - borders */
18
- height: 14px; /* 20 - paddings - borders */
19
- display: inline-flex;
20
- align-items: center;
21
- justify-content: center;
22
- border-radius: ${theme.radius.radius4};
23
- padding: ${theme.space.space2} ${theme.space.space4};
24
- ${({ $dark }) => ($dark ? darkColors : adaptiveColors)}
25
- `;
26
- export const Shortcut = ({ as, className, children, dark = false, }) => {
27
- return (_jsx(StyledShortcut, { forwardedAs: as, className: className, "$dark": dark, type: 'code', size: 'small', weight: 'medium', children: children }));
28
- };
29
- //# 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,kDAAkD;AAClD,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"}