@box/blueprint-web 14.8.4 → 14.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.
|
@@ -2,6 +2,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import * as Ariakit from '@ariakit/react';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { forwardRef, useRef, useLayoutEffect, useCallback } from 'react';
|
|
5
|
+
import '../blueprint-configuration-context/blueprint-configuration-context.js';
|
|
6
|
+
import { useBlueprintConfiguration } from '../blueprint-configuration-context/useBlueprintConfiguration.js';
|
|
5
7
|
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
6
8
|
import { Card } from '../card/card.js';
|
|
7
9
|
import { composeEventHandlers } from '../utils/composeEventHandlers.js';
|
|
@@ -50,6 +52,10 @@ const CardTooltip = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
50
52
|
const {
|
|
51
53
|
enableModernizedComponents
|
|
52
54
|
} = useBlueprintModernization();
|
|
55
|
+
const {
|
|
56
|
+
componentsWithAnimationEnabled
|
|
57
|
+
} = useBlueprintConfiguration();
|
|
58
|
+
const isAnimationEnabled = componentsWithAnimationEnabled.includes('CardTooltip');
|
|
53
59
|
useLayoutEffect(() => {
|
|
54
60
|
if (mounted && !isOpen) {
|
|
55
61
|
// Make sure that tooltip disappears instantly after it is closed.
|
|
@@ -104,6 +110,7 @@ const CardTooltip = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
104
110
|
}),
|
|
105
111
|
ref: ref,
|
|
106
112
|
className: clsx(styles.content, className),
|
|
113
|
+
"data-bp-animated": isAnimationEnabled ? 'true' : 'false',
|
|
107
114
|
"data-modern": enableModernizedComponents ? 'true' : 'false',
|
|
108
115
|
"data-side": side,
|
|
109
116
|
fitViewport: true,
|
package/dist/lib-esm/index.css
CHANGED
|
@@ -3240,7 +3240,7 @@
|
|
|
3240
3240
|
.bp_card_module_card--65268.bp_card_module_dropshadow-3--65268{
|
|
3241
3241
|
box-shadow:var(--card-dropshadow-3);
|
|
3242
3242
|
}
|
|
3243
|
-
.bp_card_tooltip_module_content--
|
|
3243
|
+
.bp_card_tooltip_module_content--0f06d[data-modern=false]{
|
|
3244
3244
|
--content-padding:var(--space-2) var(--space-3);
|
|
3245
3245
|
--content-border-radius:var(--radius-1);
|
|
3246
3246
|
font-family:var(--body-default-font-family);
|
|
@@ -3252,7 +3252,7 @@
|
|
|
3252
3252
|
text-transform:var(--body-default-text-case);
|
|
3253
3253
|
}
|
|
3254
3254
|
|
|
3255
|
-
.bp_card_tooltip_module_content--
|
|
3255
|
+
.bp_card_tooltip_module_content--0f06d[data-modern=true]{
|
|
3256
3256
|
--content-padding:var(--bp-space-020) var(--bp-space-030);
|
|
3257
3257
|
--content-border-radius:var(--bp-radius-02);
|
|
3258
3258
|
font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
@@ -3263,7 +3263,7 @@
|
|
|
3263
3263
|
line-height:var(--bp-font-line-height-04);
|
|
3264
3264
|
}
|
|
3265
3265
|
|
|
3266
|
-
.bp_card_tooltip_module_content--
|
|
3266
|
+
.bp_card_tooltip_module_content--0f06d{
|
|
3267
3267
|
border-radius:var(--content-border-radius);
|
|
3268
3268
|
max-height:var(--popover-available-height);
|
|
3269
3269
|
max-width:336px;
|
|
@@ -3273,25 +3273,61 @@
|
|
|
3273
3273
|
position:relative;
|
|
3274
3274
|
z-index:2147483647;
|
|
3275
3275
|
}
|
|
3276
|
-
|
|
3276
|
+
|
|
3277
|
+
.bp_card_tooltip_module_content--0f06d[data-modern=false][data-open],.bp_card_tooltip_module_content--0f06d[data-modern=true][data-bp-animated=false][data-open]{
|
|
3277
3278
|
animation-duration:var(--animation-duration-4);
|
|
3278
3279
|
animation-timing-function:var(--animation-easing-ease-base);
|
|
3279
3280
|
will-change:transform, opacity;
|
|
3280
3281
|
}
|
|
3281
|
-
.bp_card_tooltip_module_content--
|
|
3282
|
-
animation-name:bp_card_tooltip_module_slideDownAndFade--
|
|
3282
|
+
.bp_card_tooltip_module_content--0f06d[data-modern=false][data-open][data-side=top],.bp_card_tooltip_module_content--0f06d[data-modern=true][data-bp-animated=false][data-open][data-side=top]{
|
|
3283
|
+
animation-name:bp_card_tooltip_module_slideDownAndFade--0f06d;
|
|
3284
|
+
}
|
|
3285
|
+
.bp_card_tooltip_module_content--0f06d[data-modern=false][data-open][data-side=right],.bp_card_tooltip_module_content--0f06d[data-modern=true][data-bp-animated=false][data-open][data-side=right]{
|
|
3286
|
+
animation-name:bp_card_tooltip_module_slideLeftAndFade--0f06d;
|
|
3287
|
+
}
|
|
3288
|
+
.bp_card_tooltip_module_content--0f06d[data-modern=false][data-open][data-side=bottom],.bp_card_tooltip_module_content--0f06d[data-modern=true][data-bp-animated=false][data-open][data-side=bottom]{
|
|
3289
|
+
animation-name:bp_card_tooltip_module_slideUpAndFade--0f06d;
|
|
3290
|
+
}
|
|
3291
|
+
.bp_card_tooltip_module_content--0f06d[data-modern=false][data-open][data-side=left],.bp_card_tooltip_module_content--0f06d[data-modern=true][data-bp-animated=false][data-open][data-side=left]{
|
|
3292
|
+
animation-name:bp_card_tooltip_module_slideRightAndFade--0f06d;
|
|
3293
|
+
}
|
|
3294
|
+
|
|
3295
|
+
.bp_card_tooltip_module_content--0f06d[data-modern=true][data-bp-animated=true][data-open]{
|
|
3296
|
+
animation-duration:var(--bp-duration-medium);
|
|
3297
|
+
animation-fill-mode:both;
|
|
3298
|
+
animation-timing-function:var(--bp-curve-large-on);
|
|
3299
|
+
}
|
|
3300
|
+
.bp_card_tooltip_module_content--0f06d[data-modern=true][data-bp-animated=true][data-open][data-side=top]{
|
|
3301
|
+
animation-name:bp_card_tooltip_module_bpCardTooltipTopSlideEnter--0f06d;
|
|
3302
|
+
}
|
|
3303
|
+
.bp_card_tooltip_module_content--0f06d[data-modern=true][data-bp-animated=true][data-open][data-side=right]{
|
|
3304
|
+
animation-name:bp_card_tooltip_module_bpCardTooltipRightSlideEnter--0f06d;
|
|
3283
3305
|
}
|
|
3284
|
-
.bp_card_tooltip_module_content--
|
|
3285
|
-
animation-name:
|
|
3306
|
+
.bp_card_tooltip_module_content--0f06d[data-modern=true][data-bp-animated=true][data-open][data-side=bottom]{
|
|
3307
|
+
animation-name:bp_card_tooltip_module_bpCardTooltipBottomSlideEnter--0f06d;
|
|
3286
3308
|
}
|
|
3287
|
-
.bp_card_tooltip_module_content--
|
|
3288
|
-
animation-name:
|
|
3309
|
+
.bp_card_tooltip_module_content--0f06d[data-modern=true][data-bp-animated=true][data-open][data-side=left]{
|
|
3310
|
+
animation-name:bp_card_tooltip_module_bpCardTooltipLeftSlideEnter--0f06d;
|
|
3289
3311
|
}
|
|
3290
|
-
.bp_card_tooltip_module_content--
|
|
3291
|
-
animation-
|
|
3312
|
+
.bp_card_tooltip_module_content--0f06d[data-modern=true][data-bp-animated=true][data-leave]{
|
|
3313
|
+
animation-duration:var(--bp-duration-short);
|
|
3314
|
+
animation-fill-mode:both;
|
|
3315
|
+
animation-timing-function:var(--bp-curve-large-off);
|
|
3316
|
+
}
|
|
3317
|
+
.bp_card_tooltip_module_content--0f06d[data-modern=true][data-bp-animated=true][data-leave][data-side=top]{
|
|
3318
|
+
animation-name:bp_card_tooltip_module_bpCardTooltipTopSlideExit--0f06d;
|
|
3319
|
+
}
|
|
3320
|
+
.bp_card_tooltip_module_content--0f06d[data-modern=true][data-bp-animated=true][data-leave][data-side=right]{
|
|
3321
|
+
animation-name:bp_card_tooltip_module_bpCardTooltipRightSlideExit--0f06d;
|
|
3322
|
+
}
|
|
3323
|
+
.bp_card_tooltip_module_content--0f06d[data-modern=true][data-bp-animated=true][data-leave][data-side=bottom]{
|
|
3324
|
+
animation-name:bp_card_tooltip_module_bpCardTooltipBottomSlideExit--0f06d;
|
|
3325
|
+
}
|
|
3326
|
+
.bp_card_tooltip_module_content--0f06d[data-modern=true][data-bp-animated=true][data-leave][data-side=left]{
|
|
3327
|
+
animation-name:bp_card_tooltip_module_bpCardTooltipLeftSlideExit--0f06d;
|
|
3292
3328
|
}
|
|
3293
3329
|
|
|
3294
|
-
@keyframes bp_card_tooltip_module_slideUpAndFade--
|
|
3330
|
+
@keyframes bp_card_tooltip_module_slideUpAndFade--0f06d{
|
|
3295
3331
|
from{
|
|
3296
3332
|
opacity:0;
|
|
3297
3333
|
transform:translateY(2px);
|
|
@@ -3301,7 +3337,7 @@
|
|
|
3301
3337
|
transform:translateY(0);
|
|
3302
3338
|
}
|
|
3303
3339
|
}
|
|
3304
|
-
@keyframes bp_card_tooltip_module_slideRightAndFade--
|
|
3340
|
+
@keyframes bp_card_tooltip_module_slideRightAndFade--0f06d{
|
|
3305
3341
|
from{
|
|
3306
3342
|
opacity:0;
|
|
3307
3343
|
transform:translateX(-2px);
|
|
@@ -3311,7 +3347,7 @@
|
|
|
3311
3347
|
transform:translateX(0);
|
|
3312
3348
|
}
|
|
3313
3349
|
}
|
|
3314
|
-
@keyframes bp_card_tooltip_module_slideDownAndFade--
|
|
3350
|
+
@keyframes bp_card_tooltip_module_slideDownAndFade--0f06d{
|
|
3315
3351
|
from{
|
|
3316
3352
|
opacity:0;
|
|
3317
3353
|
transform:translateY(-2px);
|
|
@@ -3321,7 +3357,7 @@
|
|
|
3321
3357
|
transform:translateY(0);
|
|
3322
3358
|
}
|
|
3323
3359
|
}
|
|
3324
|
-
@keyframes bp_card_tooltip_module_slideLeftAndFade--
|
|
3360
|
+
@keyframes bp_card_tooltip_module_slideLeftAndFade--0f06d{
|
|
3325
3361
|
from{
|
|
3326
3362
|
opacity:0;
|
|
3327
3363
|
transform:translateX(2px);
|
|
@@ -3331,6 +3367,86 @@
|
|
|
3331
3367
|
transform:translateX(0);
|
|
3332
3368
|
}
|
|
3333
3369
|
}
|
|
3370
|
+
@keyframes bp_card_tooltip_module_bpCardTooltipTopSlideEnter--0f06d{
|
|
3371
|
+
from{
|
|
3372
|
+
opacity:var(--bp-opacity-hidden);
|
|
3373
|
+
transform:translateY(var(--bp-space-040)) var(--bp-scale-small);
|
|
3374
|
+
}
|
|
3375
|
+
to{
|
|
3376
|
+
opacity:var(--bp-opacity-visible);
|
|
3377
|
+
transform:translateY(0) var(--bp-scale-default);
|
|
3378
|
+
}
|
|
3379
|
+
}
|
|
3380
|
+
@keyframes bp_card_tooltip_module_bpCardTooltipTopSlideExit--0f06d{
|
|
3381
|
+
from{
|
|
3382
|
+
opacity:var(--bp-opacity-visible);
|
|
3383
|
+
transform:translateY(0) var(--bp-scale-default);
|
|
3384
|
+
}
|
|
3385
|
+
to{
|
|
3386
|
+
opacity:var(--bp-opacity-hidden);
|
|
3387
|
+
transform:translateY(var(--bp-space-040)) var(--bp-scale-small);
|
|
3388
|
+
}
|
|
3389
|
+
}
|
|
3390
|
+
@keyframes bp_card_tooltip_module_bpCardTooltipBottomSlideEnter--0f06d{
|
|
3391
|
+
from{
|
|
3392
|
+
opacity:var(--bp-opacity-hidden);
|
|
3393
|
+
transform:translateY(calc(var(--bp-space-040)*-1)) var(--bp-scale-small);
|
|
3394
|
+
}
|
|
3395
|
+
to{
|
|
3396
|
+
opacity:var(--bp-opacity-visible);
|
|
3397
|
+
transform:translateY(0) var(--bp-scale-default);
|
|
3398
|
+
}
|
|
3399
|
+
}
|
|
3400
|
+
@keyframes bp_card_tooltip_module_bpCardTooltipBottomSlideExit--0f06d{
|
|
3401
|
+
from{
|
|
3402
|
+
opacity:var(--bp-opacity-visible);
|
|
3403
|
+
transform:translateY(0) var(--bp-scale-default);
|
|
3404
|
+
}
|
|
3405
|
+
to{
|
|
3406
|
+
opacity:var(--bp-opacity-hidden);
|
|
3407
|
+
transform:translateY(calc(var(--bp-space-040)*-1)) var(--bp-scale-small);
|
|
3408
|
+
}
|
|
3409
|
+
}
|
|
3410
|
+
@keyframes bp_card_tooltip_module_bpCardTooltipLeftSlideEnter--0f06d{
|
|
3411
|
+
from{
|
|
3412
|
+
opacity:var(--bp-opacity-hidden);
|
|
3413
|
+
transform:translateX(var(--bp-space-040)) var(--bp-scale-small);
|
|
3414
|
+
}
|
|
3415
|
+
to{
|
|
3416
|
+
opacity:var(--bp-opacity-visible);
|
|
3417
|
+
transform:translateX(0) var(--bp-scale-default);
|
|
3418
|
+
}
|
|
3419
|
+
}
|
|
3420
|
+
@keyframes bp_card_tooltip_module_bpCardTooltipLeftSlideExit--0f06d{
|
|
3421
|
+
from{
|
|
3422
|
+
opacity:var(--bp-opacity-visible);
|
|
3423
|
+
transform:translateX(0) var(--bp-scale-default);
|
|
3424
|
+
}
|
|
3425
|
+
to{
|
|
3426
|
+
opacity:var(--bp-opacity-hidden);
|
|
3427
|
+
transform:translateX(var(--bp-space-020)) var(--bp-scale-small);
|
|
3428
|
+
}
|
|
3429
|
+
}
|
|
3430
|
+
@keyframes bp_card_tooltip_module_bpCardTooltipRightSlideEnter--0f06d{
|
|
3431
|
+
from{
|
|
3432
|
+
opacity:var(--bp-opacity-hidden);
|
|
3433
|
+
transform:translateX(calc(var(--bp-space-040)*-1)) var(--bp-scale-small);
|
|
3434
|
+
}
|
|
3435
|
+
to{
|
|
3436
|
+
opacity:var(--bp-opacity-visible);
|
|
3437
|
+
transform:translateX(0) var(--bp-scale-default);
|
|
3438
|
+
}
|
|
3439
|
+
}
|
|
3440
|
+
@keyframes bp_card_tooltip_module_bpCardTooltipRightSlideExit--0f06d{
|
|
3441
|
+
from{
|
|
3442
|
+
opacity:var(--bp-opacity-visible);
|
|
3443
|
+
transform:translateX(0) var(--bp-scale-default);
|
|
3444
|
+
}
|
|
3445
|
+
to{
|
|
3446
|
+
opacity:var(--bp-opacity-hidden);
|
|
3447
|
+
transform:translateX(calc(var(--bp-space-040)*-1)) var(--bp-scale-small);
|
|
3448
|
+
}
|
|
3449
|
+
}
|
|
3334
3450
|
.bp_interactive_icon_module_interactiveIcon--d2a16:focus-visible{
|
|
3335
3451
|
box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
|
|
3336
3452
|
outline:none;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@box/blueprint-web",
|
|
3
|
-
"version": "14.
|
|
3
|
+
"version": "14.9.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"publishConfig": {
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"dependencies": {
|
|
48
48
|
"@ariakit/react": "0.4.21",
|
|
49
49
|
"@ariakit/react-core": "0.4.21",
|
|
50
|
-
"@box/blueprint-web-assets": "^4.112.
|
|
50
|
+
"@box/blueprint-web-assets": "^4.112.10",
|
|
51
51
|
"@internationalized/date": "^3.12.0",
|
|
52
52
|
"@radix-ui/react-accordion": "1.1.2",
|
|
53
53
|
"@radix-ui/react-checkbox": "1.0.4",
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
"type-fest": "^3.2.0"
|
|
78
78
|
},
|
|
79
79
|
"devDependencies": {
|
|
80
|
-
"@box/storybook-utils": "^0.17.
|
|
80
|
+
"@box/storybook-utils": "^0.17.37",
|
|
81
81
|
"@figma/code-connect": "1.3.12",
|
|
82
82
|
"@types/react": "^18.0.0",
|
|
83
83
|
"@types/react-dom": "^18.0.0",
|