@box/blueprint-web 14.8.3 → 14.8.4

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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "14.8.3",
+    "version": "14.8.4",
     "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.9",
         "@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.36",
         "@figma/code-connect": "1.3.12",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",