@box/blueprint-web 14.8.3 → 14.9.0

package/dist/lib-esm/badge/icon-badge.d.ts

@@ -5,12 +5,33 @@ export interface TooltipConfig {
     tooltipAriaLabel?: string;
 }
 export interface IconBadgeProps extends BadgeProps {
-    /** The variant of the icon badge. */
-    variant: 'file-audio' | 'file-bookmark' | 'file-box-app' | 'file-code' | 'file-default' | 'file-drawing' | 'file-excel' | 'file-hub' | 'file-illustrator' | 'file-indesign' | 'file-numbers' | 'file-photoshop' | 'file-powerpoint' | 'file-presentation' | 'file-slides' | 'file-spreadsheet' | 'file-text' | 'file-three-d' | 'file-vector' | 'file-word' | 'file-zip' | 'file-pdf' | 'file-docs' | 'file-sheets' | 'file-image' | 'file-canvas' | 'file-pages' | 'file-keynote' | 'file-boxnote' | 'file-video' | 'folder-external' | 'folder-shared' | 'action-relay' | 'action-mention' | 'action-task' | 'action-taskapproval' | 'action-annotation' | 'action-performed-completed' | 'action-performed-rejected' | 'collaborator-external' | 'collaborator-admin' | 'collaborator-coadmin' | 'content-pin' | 'content-collection' | 'content-offline' | 'content-progress' | 'content-syncing' | 'alert-error' | 'status-pending' | 'status-in-progress' | 'status-forwarded' | 'status-alert';
+    /**
+     * The variant of the icon badge.
+     *
+     * When `undefined`, no badge element is rendered but the wrapper stays in
+     * the DOM. This lets callers toggle the badge on/off without changing the
+     * children's parent element, which would otherwise cause React to unmount
+     * and remount the children.
+     *
+     * Useful when the wrapped child is stateful or expensive to re-initialize
+     * (e.g. an `<Avatar>` with a `src` that would be re-fetched, a `<video>`
+     * that would lose playback state, or an element that should keep focus).
+     *
+     * @example
+     * ```tsx
+     * <IconBadge
+     *     size="large"
+     *     variant={isAdmin ? 'collaborator-admin' : undefined}
+     * >
+     *     <Avatar src={avatarUrl} ... />
+     * </IconBadge>
+     * ```
+     */
+    variant?: 'file-audio' | 'file-bookmark' | 'file-box-app' | 'file-code' | 'file-default' | 'file-drawing' | 'file-excel' | 'file-hub' | 'file-illustrator' | 'file-indesign' | 'file-numbers' | 'file-photoshop' | 'file-powerpoint' | 'file-presentation' | 'file-slides' | 'file-spreadsheet' | 'file-text' | 'file-three-d' | 'file-vector' | 'file-word' | 'file-zip' | 'file-pdf' | 'file-docs' | 'file-sheets' | 'file-image' | 'file-canvas' | 'file-pages' | 'file-keynote' | 'file-boxnote' | 'file-video' | 'folder-external' | 'folder-shared' | 'action-relay' | 'action-mention' | 'action-task' | 'action-taskapproval' | 'action-annotation' | 'action-performed-completed' | 'action-performed-rejected' | 'collaborator-external' | 'collaborator-admin' | 'collaborator-coadmin' | 'content-pin' | 'content-collection' | 'content-offline' | 'content-progress' | 'content-syncing' | 'alert-error' | 'status-pending' | 'status-in-progress' | 'status-forwarded' | 'status-alert';
     /** Whether to show the tooltip when hovering over the badge. */
     showTooltipOnBadge?: boolean;
     /** The configuration for the tooltip, required if showTooltipOnBadge is true. */
     tooltipConfig?: TooltipConfig;
 }
-export declare const IconBadgeVariants: Array<IconBadgeProps["variant"]>;
+export declare const IconBadgeVariants: Array<NonNullable<IconBadgeProps["variant"]>>;
 export declare const IconBadge: (props: IconBadgeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib-esm/badge/icon-badge.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { Alert, ArrowRight, Ellipsis, ClockBadge, Loader, CheckmarkUnderline, Arrow, Pin, Star, GlobeBadge, XMark, Checkmark, Annotation, ApprovalTask, Task, EllipsisBubble, Relay, FolderShared, FolderExternal, FileZip, FileWord, FileVideo, FileVector, FileThreeD, FileText, FileSpreadsheet, FileSlides, FileSheets, FilePresentation, FilePowerpoint, FilePhotoshop, FilePdf, FilePages, FileNumbers, FileKeynote, FileIndesign, FileImage, FileIllustrator, Hubs, FileExcel, FileDrawing, FileDocs, FileDefault, Code, FileCanvas, FileBoxNote, BoxApps, FileBookmark, FileAudio } from '@box/blueprint-web-assets/icons/Fill';
 import { GrayWhite, SurfaceBadgeAlertSurface, SurfaceBadgeForwardSurface, SurfaceBadgeInprogressSurface, Orange100, SurfaceBadgeErrorSurface, SurfaceBadgeDefaultSurface, SurfaceBadgeProgressSurface, SurfaceBadgeOfflineSurface, Gray80, SurfaceBadgeCollectionSurface, SurfaceBadgePinSurface, SurfaceBadgeCoadminSurface, SurfaceBadgeAdminSurface, SurfaceBadgeExternalSurface, SurfaceBadgeRejectedSurface, SurfaceBadgeCompletedSurface, SurfaceBadgeAnnotationSurface, SurfaceBadgeTaskapprovalSurface, SurfaceBadgeTaskSurface, SurfaceBadgeMentionSurface, SurfaceBadgeRelaySurface, SurfaceBadgeFoldersharedSurface, SurfaceBadgeFolderexternalSurface, SurfaceBadgeZipSurface, SurfaceBadgeWordSurface, SurfaceBadgeVideoSurface, SurfaceBadgeVectorSurface, SurfaceBadgeThreeDSurface, SurfaceBadgeTextSurface, SurfaceBadgeSpreadsheetSurface, GrayBlack, SurfaceBadgeSlidesSurface, SurfaceBadgeSheetsSurface, SurfaceBadgePresentationSurface, SurfaceBadgePowerpointSurface, IconIconPhotoshop, SurfaceBadgePhotoshopSurface, SurfaceBadgePdfSurface, SurfaceBadgePagesSurface, SurfaceBadgeNumbersSurface, SurfaceBadgeKeynoteSurface, IconIconIndesign, SurfaceBadgeIndesignSurface, SurfaceBadgeImageSurface, IconIconIllustrator, SurfaceBadgeIllustratorSurface, SurfaceBadgeHubsSurface, SurfaceBadgeExcelSurface, SurfaceBadgeDrawingSurface, SurfaceBadgeDocsSurface, SurfaceBadgeCodeSurface, SurfaceBadgeCanvasSurface, Gray100, SurfaceBadgeBoxnoteSurface, SurfaceBadgeBoxappsSurface, SurfaceBadgeBookmarkSurface, SurfaceBadgeAudioSurface } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
@@ -281,15 +281,7 @@ const badgeSizeToIconSize = {
   xlarge: '14px',
   xxlarge: '18px'
 };
-const IconBadge = props => {
-  const {
-    size,
-    variant,
-    children,
-    offset,
-    showTooltipOnBadge,
-    tooltipConfig
-  } = props;
+const renderBadgeElement = (variant, size, offset, showTooltipOnBadge) => {
   const {
     backgroundColor,
     icon,
@@ -297,12 +289,7 @@ const IconBadge = props => {
     iconStyle
   } = badgeVariantToIconProps[variant];
   const iconSize = badgeSizeToIconSize[size];
-  useSingleChildCheck(children);
-  const offsetStyle = mapValues(offset, value => {
-    const num = Number(value);
-    return Number.isInteger(num) ? `${num - 1}px` : '0';
-  });
-  const badge = jsx(BaseBadge, {
+  return jsx(BaseBadge, {
     backgroundColor: backgroundColor,
     className: styles.iconBadge,
     offset: showTooltipOnBadge ? undefined : offset,
@@ -315,7 +302,27 @@ const IconBadge = props => {
       style: iconStyle || {}
     })
   });
-  if (showTooltipOnBadge && tooltipConfig) {
+};
+const IconBadge = props => {
+  const {
+    size,
+    variant,
+    children,
+    offset,
+    showTooltipOnBadge,
+    tooltipConfig
+  } = props;
+  useSingleChildCheck(children);
+  const offsetStyle = mapValues(offset, value => {
+    const num = Number(value);
+    return Number.isInteger(num) ? `${num - 1}px` : '0';
+  });
+  // When `variant` is omitted, render the wrapper but no badge element.
+  // Keeping the wrapper stable lets callers toggle the badge on/off without
+  // remounting `children` (which would otherwise re-fetch images, reset
+  // videos, restart animations, lose focus, etc.).
+  const badge = variant ? renderBadgeElement(variant, size, offset, showTooltipOnBadge) : null;
+  if (badge && showTooltipOnBadge && tooltipConfig) {
     return jsxs("div", {
       className: styles.badgeContainer,
       children: [children, jsx(TooltipWrapper, {

package/dist/lib-esm/card-tooltip/card-tooltip.js

@@ -2,6 +2,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import * as Ariakit from '@ariakit/react';
 import clsx from 'clsx';
 import { forwardRef, useRef, useLayoutEffect, useCallback } from 'react';
+import '../blueprint-configuration-context/blueprint-configuration-context.js';
+import { useBlueprintConfiguration } from '../blueprint-configuration-context/useBlueprintConfiguration.js';
 import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { Card } from '../card/card.js';
 import { composeEventHandlers } from '../utils/composeEventHandlers.js';
@@ -50,6 +52,10 @@ const CardTooltip = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     enableModernizedComponents
   } = useBlueprintModernization();
+  const {
+    componentsWithAnimationEnabled
+  } = useBlueprintConfiguration();
+  const isAnimationEnabled = componentsWithAnimationEnabled.includes('CardTooltip');
   useLayoutEffect(() => {
     if (mounted && !isOpen) {
       // Make sure that tooltip disappears instantly after it is closed.
@@ -104,6 +110,7 @@ const CardTooltip = /*#__PURE__*/forwardRef((props, ref) => {
       }),
       ref: ref,
       className: clsx(styles.content, className),
+      "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
       "data-modern": enableModernizedComponents ? 'true' : 'false',
       "data-side": side,
       fitViewport: true,

package/dist/lib-esm/card-tooltip/card-tooltip.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"content":"bp_card_tooltip_module_content--02910"};
+var styles = {"content":"bp_card_tooltip_module_content--0f06d"};
 
 export { styles as default };

package/dist/lib-esm/index.css

@@ -3240,7 +3240,7 @@
 .bp_card_module_card--65268.bp_card_module_dropshadow-3--65268{
   box-shadow:var(--card-dropshadow-3);
 }
-.bp_card_tooltip_module_content--02910[data-modern=false]{
+.bp_card_tooltip_module_content--0f06d[data-modern=false]{
   --content-padding:var(--space-2) var(--space-3);
   --content-border-radius:var(--radius-1);
   font-family:var(--body-default-font-family);
@@ -3252,7 +3252,7 @@
   text-transform:var(--body-default-text-case);
 }
 
-.bp_card_tooltip_module_content--02910[data-modern=true]{
+.bp_card_tooltip_module_content--0f06d[data-modern=true]{
   --content-padding:var(--bp-space-020) var(--bp-space-030);
   --content-border-radius:var(--bp-radius-02);
   font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
@@ -3263,7 +3263,7 @@
   line-height:var(--bp-font-line-height-04);
 }
 
-.bp_card_tooltip_module_content--02910{
+.bp_card_tooltip_module_content--0f06d{
   border-radius:var(--content-border-radius);
   max-height:var(--popover-available-height);
   max-width:336px;
@@ -3273,25 +3273,61 @@
   position:relative;
   z-index:2147483647;
 }
-.bp_card_tooltip_module_content--02910[data-open]{
+
+.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]{
   animation-duration:var(--animation-duration-4);
   animation-timing-function:var(--animation-easing-ease-base);
   will-change:transform, opacity;
 }
-.bp_card_tooltip_module_content--02910[data-open][data-side=top]{
-  animation-name:bp_card_tooltip_module_slideDownAndFade--02910;
+.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]{
+  animation-name:bp_card_tooltip_module_slideDownAndFade--0f06d;
+}
+.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]{
+  animation-name:bp_card_tooltip_module_slideLeftAndFade--0f06d;
+}
+.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]{
+  animation-name:bp_card_tooltip_module_slideUpAndFade--0f06d;
+}
+.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]{
+  animation-name:bp_card_tooltip_module_slideRightAndFade--0f06d;
+}
+
+.bp_card_tooltip_module_content--0f06d[data-modern=true][data-bp-animated=true][data-open]{
+  animation-duration:var(--bp-duration-medium);
+  animation-fill-mode:both;
+  animation-timing-function:var(--bp-curve-large-on);
+}
+.bp_card_tooltip_module_content--0f06d[data-modern=true][data-bp-animated=true][data-open][data-side=top]{
+  animation-name:bp_card_tooltip_module_bpCardTooltipTopSlideEnter--0f06d;
+}
+.bp_card_tooltip_module_content--0f06d[data-modern=true][data-bp-animated=true][data-open][data-side=right]{
+  animation-name:bp_card_tooltip_module_bpCardTooltipRightSlideEnter--0f06d;
 }
-.bp_card_tooltip_module_content--02910[data-open][data-side=right]{
-  animation-name:bp_card_tooltip_module_slideLeftAndFade--02910;
+.bp_card_tooltip_module_content--0f06d[data-modern=true][data-bp-animated=true][data-open][data-side=bottom]{
+  animation-name:bp_card_tooltip_module_bpCardTooltipBottomSlideEnter--0f06d;
 }
-.bp_card_tooltip_module_content--02910[data-open][data-side=bottom]{
-  animation-name:bp_card_tooltip_module_slideUpAndFade--02910;
+.bp_card_tooltip_module_content--0f06d[data-modern=true][data-bp-animated=true][data-open][data-side=left]{
+  animation-name:bp_card_tooltip_module_bpCardTooltipLeftSlideEnter--0f06d;
 }
-.bp_card_tooltip_module_content--02910[data-open][data-side=left]{
-  animation-name:bp_card_tooltip_module_slideRightAndFade--02910;
+.bp_card_tooltip_module_content--0f06d[data-modern=true][data-bp-animated=true][data-leave]{
+  animation-duration:var(--bp-duration-short);
+  animation-fill-mode:both;
+  animation-timing-function:var(--bp-curve-large-off);
+}
+.bp_card_tooltip_module_content--0f06d[data-modern=true][data-bp-animated=true][data-leave][data-side=top]{
+  animation-name:bp_card_tooltip_module_bpCardTooltipTopSlideExit--0f06d;
+}
+.bp_card_tooltip_module_content--0f06d[data-modern=true][data-bp-animated=true][data-leave][data-side=right]{
+  animation-name:bp_card_tooltip_module_bpCardTooltipRightSlideExit--0f06d;
+}
+.bp_card_tooltip_module_content--0f06d[data-modern=true][data-bp-animated=true][data-leave][data-side=bottom]{
+  animation-name:bp_card_tooltip_module_bpCardTooltipBottomSlideExit--0f06d;
+}
+.bp_card_tooltip_module_content--0f06d[data-modern=true][data-bp-animated=true][data-leave][data-side=left]{
+  animation-name:bp_card_tooltip_module_bpCardTooltipLeftSlideExit--0f06d;
 }
 
-@keyframes bp_card_tooltip_module_slideUpAndFade--02910{
+@keyframes bp_card_tooltip_module_slideUpAndFade--0f06d{
   from{
     opacity:0;
     transform:translateY(2px);
@@ -3301,7 +3337,7 @@
     transform:translateY(0);
   }
 }
-@keyframes bp_card_tooltip_module_slideRightAndFade--02910{
+@keyframes bp_card_tooltip_module_slideRightAndFade--0f06d{
   from{
     opacity:0;
     transform:translateX(-2px);
@@ -3311,7 +3347,7 @@
     transform:translateX(0);
   }
 }
-@keyframes bp_card_tooltip_module_slideDownAndFade--02910{
+@keyframes bp_card_tooltip_module_slideDownAndFade--0f06d{
   from{
     opacity:0;
     transform:translateY(-2px);
@@ -3321,7 +3357,7 @@
     transform:translateY(0);
   }
 }
-@keyframes bp_card_tooltip_module_slideLeftAndFade--02910{
+@keyframes bp_card_tooltip_module_slideLeftAndFade--0f06d{
   from{
     opacity:0;
     transform:translateX(2px);
@@ -3331,6 +3367,86 @@
     transform:translateX(0);
   }
 }
+@keyframes bp_card_tooltip_module_bpCardTooltipTopSlideEnter--0f06d{
+  from{
+    opacity:var(--bp-opacity-hidden);
+    transform:translateY(var(--bp-space-040)) var(--bp-scale-small);
+  }
+  to{
+    opacity:var(--bp-opacity-visible);
+    transform:translateY(0) var(--bp-scale-default);
+  }
+}
+@keyframes bp_card_tooltip_module_bpCardTooltipTopSlideExit--0f06d{
+  from{
+    opacity:var(--bp-opacity-visible);
+    transform:translateY(0) var(--bp-scale-default);
+  }
+  to{
+    opacity:var(--bp-opacity-hidden);
+    transform:translateY(var(--bp-space-040)) var(--bp-scale-small);
+  }
+}
+@keyframes bp_card_tooltip_module_bpCardTooltipBottomSlideEnter--0f06d{
+  from{
+    opacity:var(--bp-opacity-hidden);
+    transform:translateY(calc(var(--bp-space-040)*-1)) var(--bp-scale-small);
+  }
+  to{
+    opacity:var(--bp-opacity-visible);
+    transform:translateY(0) var(--bp-scale-default);
+  }
+}
+@keyframes bp_card_tooltip_module_bpCardTooltipBottomSlideExit--0f06d{
+  from{
+    opacity:var(--bp-opacity-visible);
+    transform:translateY(0) var(--bp-scale-default);
+  }
+  to{
+    opacity:var(--bp-opacity-hidden);
+    transform:translateY(calc(var(--bp-space-040)*-1)) var(--bp-scale-small);
+  }
+}
+@keyframes bp_card_tooltip_module_bpCardTooltipLeftSlideEnter--0f06d{
+  from{
+    opacity:var(--bp-opacity-hidden);
+    transform:translateX(var(--bp-space-040)) var(--bp-scale-small);
+  }
+  to{
+    opacity:var(--bp-opacity-visible);
+    transform:translateX(0) var(--bp-scale-default);
+  }
+}
+@keyframes bp_card_tooltip_module_bpCardTooltipLeftSlideExit--0f06d{
+  from{
+    opacity:var(--bp-opacity-visible);
+    transform:translateX(0) var(--bp-scale-default);
+  }
+  to{
+    opacity:var(--bp-opacity-hidden);
+    transform:translateX(var(--bp-space-020)) var(--bp-scale-small);
+  }
+}
+@keyframes bp_card_tooltip_module_bpCardTooltipRightSlideEnter--0f06d{
+  from{
+    opacity:var(--bp-opacity-hidden);
+    transform:translateX(calc(var(--bp-space-040)*-1)) var(--bp-scale-small);
+  }
+  to{
+    opacity:var(--bp-opacity-visible);
+    transform:translateX(0) var(--bp-scale-default);
+  }
+}
+@keyframes bp_card_tooltip_module_bpCardTooltipRightSlideExit--0f06d{
+  from{
+    opacity:var(--bp-opacity-visible);
+    transform:translateX(0) var(--bp-scale-default);
+  }
+  to{
+    opacity:var(--bp-opacity-hidden);
+    transform:translateX(calc(var(--bp-space-040)*-1)) var(--bp-scale-small);
+  }
+}
 .bp_interactive_icon_module_interactiveIcon--d2a16:focus-visible{
   box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
   outline:none;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "14.8.3",
+    "version": "14.9.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -47,7 +47,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.21",
         "@ariakit/react-core": "0.4.21",
-        "@box/blueprint-web-assets": "^4.112.8",
+        "@box/blueprint-web-assets": "^4.112.10",
         "@internationalized/date": "^3.12.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -77,7 +77,7 @@
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^0.17.35",
+        "@box/storybook-utils": "^0.17.37",
         "@figma/code-connect": "1.3.12",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",