@box/blueprint-web 11.0.2 → 11.0.3
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.
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import { forwardRef, useCallback, useEffect } from 'react';
|
|
4
|
+
import '@box/blueprint-web-assets/tokens/px-tokens';
|
|
4
5
|
import '@radix-ui/react-tooltip';
|
|
5
6
|
import 'tabbable';
|
|
6
7
|
import { Combobox } from '../combobox/combobox.js';
|
|
@@ -1,15 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type TooltipProps, type TooltipProviderProps, type TooltipTriggerProps } from './types';
|
|
3
|
-
/**
|
|
4
|
-
* A component used to wrap any other component, giving it a Tooltip on hover.
|
|
5
|
-
*
|
|
6
|
-
* * [Radix-UI link](https://www.radix-ui.com/docs/primitives/components/tooltip)
|
|
7
|
-
*
|
|
8
|
-
* **IMPORTANT (1)**: Must be placed inside a single <b>TooltipProvider</b> component provided by the app, see [issue on github](https://github.com/radix-ui/primitives/issues/1712) and [radix docs](https://www.radix-ui.com/docs/primitives/components/tooltip#provider).
|
|
9
|
-
*
|
|
10
|
-
* **IMPORTANT (2)**: Must wrap interactive component/element (such as: HTMLInputElement, HTMLAnchorElement, HTMLTextAreaElement, etc. [list of focusable elements](https://allyjs.io/data-tables/focusable.html))
|
|
11
|
-
*
|
|
12
|
-
*/
|
|
13
3
|
export declare const Tooltip: (props: TooltipProps) => import("react/jsx-runtime").JSX.Element;
|
|
14
4
|
export declare const ContainerContext: React.Context<HTMLElement | null | undefined>;
|
|
15
5
|
export declare const TooltipProvider: (props: TooltipProviderProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Space4 } from '@box/blueprint-web-assets/tokens/px-tokens';
|
|
2
3
|
import * as RadixTooltip from '@radix-ui/react-tooltip';
|
|
3
4
|
import clsx from 'clsx';
|
|
4
5
|
import React__default, { useContext } from 'react';
|
|
@@ -16,6 +17,7 @@ import styles from './tooltip.module.js';
|
|
|
16
17
|
* **IMPORTANT (2)**: Must wrap interactive component/element (such as: HTMLInputElement, HTMLAnchorElement, HTMLTextAreaElement, etc. [list of focusable elements](https://allyjs.io/data-tables/focusable.html))
|
|
17
18
|
*
|
|
18
19
|
*/
|
|
20
|
+
const defaultCollisionPadding = parseInt(Space4, 10);
|
|
19
21
|
const Tooltip = props => {
|
|
20
22
|
const {
|
|
21
23
|
children,
|
|
@@ -110,6 +112,7 @@ const Arrow = /*#__PURE__*/React__default.forwardRef(function Arrow({
|
|
|
110
112
|
const Content = /*#__PURE__*/React__default.forwardRef(function Content(props, ref) {
|
|
111
113
|
const {
|
|
112
114
|
children,
|
|
115
|
+
collisionPadding = defaultCollisionPadding,
|
|
113
116
|
variant = 'standard',
|
|
114
117
|
className,
|
|
115
118
|
...rest
|
|
@@ -118,6 +121,7 @@ const Content = /*#__PURE__*/React__default.forwardRef(function Content(props, r
|
|
|
118
121
|
...rest,
|
|
119
122
|
ref: ref,
|
|
120
123
|
className: clsx(styles.content, styles[variant], className),
|
|
124
|
+
collisionPadding: collisionPadding,
|
|
121
125
|
sideOffset: 3,
|
|
122
126
|
children: [children, jsx(RadixTooltip.Arrow, {
|
|
123
127
|
asChild: true,
|