@box/blueprint-web 14.31.0 → 14.32.1

package/dist/lib-esm/accordion/accordion-item-header.d.ts

@@ -1,13 +1,21 @@
 import { type ReactNode } from 'react';
+import { type AccordionIconComponent, type StartElementBackgroundVariant } from './types';
+export type { StartElementBackgroundVariant };
 export interface AccordionItemHeaderProps {
     title: string;
     status?: number;
     iconVariant?: 'alert-error' | 'status-pending' | 'status-modified';
     iconAriaLabel?: string;
     error?: string;
+    /** @deprecated Prefer `startIcon`. */
     startElement?: ReactNode;
+    startIcon?: AccordionIconComponent;
+    startElementBackgroundColor?: StartElementBackgroundVariant;
+    subtitle?: string;
+    subtitleIcon?: ReactNode;
+    endText?: string;
 }
-export declare const AccordionItemHeader: ({ title, status, iconVariant, iconAriaLabel, error, startElement, }: AccordionItemHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AccordionItemHeader: ({ title, status, iconVariant, iconAriaLabel, error, startElement, startIcon, startElementBackgroundColor, subtitle, subtitleIcon, endText, }: AccordionItemHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export interface AccordionActionSlotProps {
     action?: ReactNode;
 }

package/dist/lib-esm/accordion/accordion-item-header.js

@@ -2,9 +2,10 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { ClockBadge, Alert } from '@box/blueprint-web-assets/icons/Fill';
 import { bpSurfaceBadgeSurfaceModified, Orange100, GrayWhite, SurfaceBadgeErrorSurface, SurfaceStatusSurfaceRed, SurfaceStatusSurfaceLightBlue } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
-import { createElement } from 'react';
+import { useRef, createElement } from 'react';
 import { Status } from '../status/status.js';
 import { isDefined } from '../utils/isDefined.js';
+import { useFullTextTooltip } from '../utils/useFullTextTooltip.js';
 import styles from './accordion.module.js';
 
 const accordionIconVariantToIconProps = {
@@ -26,13 +27,34 @@ const statusColors = {
   error: SurfaceStatusSurfaceRed,
   default: SurfaceStatusSurfaceLightBlue
 };
+const startElementVariantClassNames = {
+  default: styles.accordionStartElementFramedDefault,
+  box: styles.accordionStartElementFramedBox,
+  forms: styles.accordionStartElementFramedForms,
+  docgen: styles.accordionStartElementFramedDocgen,
+  sign: styles.accordionStartElementFramedSign
+};
+const START_ICON_SIZE = '1.25rem';
+const FRAMED_START_ICON_COLOR_MAP = {
+  default: 'var(--bp-gray-100)',
+  box: 'var(--bp-box-blue-100)',
+  forms: 'var(--bp-green-light-110)',
+  docgen: 'var(--bp-grimace-120)',
+  sign: 'var(--bp-dark-blue-100)'
+};
+const DEFAULT_START_ICON_COLOR = 'var(--bp-icon-icon-on-light-secondary)';
 const AccordionItemHeader = ({
   title,
   status,
   iconVariant,
   iconAriaLabel,
   error,
-  startElement
+  startElement,
+  startIcon,
+  startElementBackgroundColor,
+  subtitle,
+  subtitleIcon,
+  endText
 }) => {
   const iconProps = iconVariant ? accordionIconVariantToIconProps[iconVariant] : undefined;
   const {
@@ -40,15 +62,62 @@ const AccordionItemHeader = ({
     iconColor,
     icon
   } = iconProps ?? {};
+  const hasSubtitle = isDefined(subtitle) && subtitle !== '';
+  const framedStartElementClassName = startElementBackgroundColor ? startElementVariantClassNames[startElementBackgroundColor] : undefined;
+  const startIconColor = startElementBackgroundColor ? FRAMED_START_ICON_COLOR_MAP[startElementBackgroundColor] : DEFAULT_START_ICON_COLOR;
+  const renderedStartElement = startIcon ? /*#__PURE__*/createElement(startIcon, {
+    width: START_ICON_SIZE,
+    height: START_ICON_SIZE,
+    color: startIconColor,
+    'aria-hidden': true
+  }) : startElement;
+  // Single-line ellipsis with full-title tooltip on overflow. Tooltip-only
+  // (no nested `Focusable`) because the title sits inside the Radix
+  // Accordion `<button>` trigger — adding a tabbable wrapper here would
+  // create nested interactives. The trigger already owns hover/focus, so
+  // pointing/keyboarding the row surfaces the tooltip when the text is cut.
+  const titleRef = useRef(null);
+  const {
+    Wrapper: TitleTooltip,
+    wrapperProps: titleTooltipProps
+  } = useFullTextTooltip({
+    ref: titleRef,
+    textValue: title
+  });
   return jsxs("h4", {
     className: styles.accordionHeader,
     children: [jsxs("span", {
       className: styles.accordionTitleGroup,
-      children: [startElement && jsx("span", {
-        className: styles.accordionStartElement,
-        children: startElement
-      }), jsx("span", {
-        children: title
+      children: [renderedStartElement && jsx("span", {
+        className: clsx(styles.accordionStartElement, framedStartElementClassName, {
+          [styles.accordionStartElementFramed]: framedStartElementClassName
+        }),
+        style: framedStartElementClassName ? {
+          color: startIconColor
+        } : undefined,
+        children: renderedStartElement
+      }), jsxs("span", {
+        className: styles.accordionTitleContent,
+        children: [jsx(TitleTooltip, {
+          content: title,
+          ...titleTooltipProps,
+          children: jsx("span", {
+            ref: titleRef,
+            className: styles.accordionTitleText,
+            "data-testid": "accordion-item-title",
+            children: title
+          })
+        }), hasSubtitle && jsxs("span", {
+          className: styles.accordionSubtitle,
+          children: [subtitleIcon && jsx("span", {
+            "aria-hidden": "true",
+            className: styles.accordionSubtitleIcon,
+            children: subtitleIcon
+          }), jsx("span", {
+            className: styles.accordionSubtitleText,
+            children: subtitle
+          })]
+        })]
       })]
     }), isDefined(status) && jsx("span", {
       className: styles.accordionHeaderInfoSlot,
@@ -78,6 +147,12 @@ const AccordionItemHeader = ({
           width: '0.75rem'
         })
       })
+    }), isDefined(endText) && endText !== '' && jsx("span", {
+      className: styles.accordionHeaderInfoSlot,
+      children: jsx("span", {
+        className: styles.accordionEndText,
+        children: endText
+      })
     })]
   });
 };

package/dist/lib-esm/accordion/accordion.js

@@ -77,6 +77,11 @@ const Item = props => {
     iconAriaLabel,
     title,
     startElement,
+    startIcon,
+    startElementBackgroundColor,
+    subtitle,
+    subtitleIcon,
+    endText,
     disabled,
     error,
     errorIconAriaLabel,
@@ -113,12 +118,17 @@ const Item = props => {
           }),
           disabled: disabled,
           children: jsx(AccordionItemHeader, {
+            endText: endText,
             error: error,
             iconAriaLabel: iconAriaLabel,
             iconVariant: iconVariant,
+            startElement: startElement,
+            startElementBackgroundColor: startElementBackgroundColor,
+            startIcon: startIcon,
             status: status,
-            title: title,
-            startElement: startElement
+            subtitle: subtitle,
+            subtitleIcon: subtitleIcon,
+            title: title
           })
         }), jsx(AccordionActionSlot, {
           action: action

package/dist/lib-esm/accordion/accordion.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"accordionItem":"bp_accordion_module_accordionItem--4551e","accordionContent":"bp_accordion_module_accordionContent--4551e","accordionContentLayout":"bp_accordion_module_accordionContentLayout--4551e","accordion":"bp_accordion_module_accordion--4551e","accordionContentWrapper":"bp_accordion_module_accordionContentWrapper--4551e","accordionInlineErrorWrapper":"bp_accordion_module_accordionInlineErrorWrapper--4551e","highlighted":"bp_accordion_module_highlighted--4551e","accordionFixedContent":"bp_accordion_module_accordionFixedContent--4551e","accordionHeader":"bp_accordion_module_accordionHeader--4551e","accordionTitleGroup":"bp_accordion_module_accordionTitleGroup--4551e","accordionStartElement":"bp_accordion_module_accordionStartElement--4551e","accordionHeaderInfoSlot":"bp_accordion_module_accordionHeaderInfoSlot--4551e","accordionSlot":"bp_accordion_module_accordionSlot--4551e","accordionChevronWrapper":"bp_accordion_module_accordionChevronWrapper--4551e","accordionTriggerIcon":"bp_accordion_module_accordionTriggerIcon--4551e","accordionIconWrapper":"bp_accordion_module_accordionIconWrapper--4551e","bgOnly":"bp_accordion_module_bgOnly--4551e","withIcon":"bp_accordion_module_withIcon--4551e","accordionTrigger":"bp_accordion_module_accordionTrigger--4551e","disabled":"bp_accordion_module_disabled--4551e","accordionHeaderContainer":"bp_accordion_module_accordionHeaderContainer--4551e"};
+var styles = {"accordionItem":"bp_accordion_module_accordionItem--c8f78","accordionContent":"bp_accordion_module_accordionContent--c8f78","accordionContentLayout":"bp_accordion_module_accordionContentLayout--c8f78","accordion":"bp_accordion_module_accordion--c8f78","accordionContentWrapper":"bp_accordion_module_accordionContentWrapper--c8f78","accordionInlineErrorWrapper":"bp_accordion_module_accordionInlineErrorWrapper--c8f78","highlighted":"bp_accordion_module_highlighted--c8f78","accordionFixedContent":"bp_accordion_module_accordionFixedContent--c8f78","accordionHeader":"bp_accordion_module_accordionHeader--c8f78","accordionTitleGroup":"bp_accordion_module_accordionTitleGroup--c8f78","accordionStartElement":"bp_accordion_module_accordionStartElement--c8f78","accordionStartElementFramed":"bp_accordion_module_accordionStartElementFramed--c8f78","accordionStartElementFramedDefault":"bp_accordion_module_accordionStartElementFramedDefault--c8f78","accordionStartElementFramedBox":"bp_accordion_module_accordionStartElementFramedBox--c8f78","accordionStartElementFramedForms":"bp_accordion_module_accordionStartElementFramedForms--c8f78","accordionStartElementFramedDocgen":"bp_accordion_module_accordionStartElementFramedDocgen--c8f78","accordionStartElementFramedSign":"bp_accordion_module_accordionStartElementFramedSign--c8f78","accordionTitleContent":"bp_accordion_module_accordionTitleContent--c8f78","accordionTitleText":"bp_accordion_module_accordionTitleText--c8f78","accordionSubtitle":"bp_accordion_module_accordionSubtitle--c8f78","accordionSubtitleIcon":"bp_accordion_module_accordionSubtitleIcon--c8f78","accordionSubtitleText":"bp_accordion_module_accordionSubtitleText--c8f78","accordionEndText":"bp_accordion_module_accordionEndText--c8f78","accordionHeaderInfoSlot":"bp_accordion_module_accordionHeaderInfoSlot--c8f78","accordionSlot":"bp_accordion_module_accordionSlot--c8f78","accordionChevronWrapper":"bp_accordion_module_accordionChevronWrapper--c8f78","accordionTriggerIcon":"bp_accordion_module_accordionTriggerIcon--c8f78","accordionIconWrapper":"bp_accordion_module_accordionIconWrapper--c8f78","bgOnly":"bp_accordion_module_bgOnly--c8f78","withIcon":"bp_accordion_module_withIcon--c8f78","accordionTrigger":"bp_accordion_module_accordionTrigger--c8f78","disabled":"bp_accordion_module_disabled--c8f78","accordionHeaderContainer":"bp_accordion_module_accordionHeaderContainer--c8f78"};
 
 export { styles as default };

package/dist/lib-esm/accordion/index.d.ts

@@ -1,2 +1,2 @@
 export { Accordion } from './accordion';
-export type { AccordionFixedItem, AccordionItem, AccordionProps, AccordionSectionItem } from './types';
+export type { AccordionFixedItem, AccordionItem, AccordionProps, AccordionSectionItem, StartElementBackgroundVariant, } from './types';

package/dist/lib-esm/accordion/types.d.ts

@@ -1,5 +1,37 @@
 import { type AccordionMultipleProps, type AccordionSingleProps, type AccordionItemProps as RadixAccordionItemProps } from '@radix-ui/react-accordion';
+import { type FunctionComponent, type PropsWithChildren, type SVGProps } from 'react';
 import { type RequireAllOrNone } from 'type-fest';
+export type AccordionIconComponent = FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
+/** Tint for the optional framed start-of-row icon (modernized items only). */
+export type StartElementBackgroundVariant = 'default' | 'box' | 'forms' | 'docgen' | 'sign';
+/**
+ * Mutually-exclusive start-of-row slot. Use either `startIcon` (preferred,
+ * icon-component pattern) or `startElement` (legacy `ReactNode`).
+ */
+type StartSlotProps = {
+    /**
+     * @deprecated Prefer `startIcon`, which renders the icon with
+     * consistent size, color, and aria attributes. Still supported for
+     * backward compatibility — pass any `ReactNode` to render to the
+     * left of the title.
+     */
+    startElement?: React.ReactNode;
+    startIcon?: never;
+} | {
+    startElement?: never;
+    /**
+     * Icon **component** (e.g. `Search`, `Folder` from
+     * `@box/blueprint-web-assets/icons/Medium`) rendered to the left of
+     * the title. The Accordion handles sizing (20x20 per the Figma
+     * "L. Element=Icon" spec), `currentColor` inheritance, and
+     * `aria-hidden`, matching the icon-component pattern used by
+     * `BaseButton`, `IconButton`, and `BaseInlineNotice`.
+     *
+     * When combined with `startElementBackgroundColor`, the icon is
+     * placed inside the matching 32x32 framed container.
+     */
+    startIcon?: AccordionIconComponent;
+};
 interface Loading {
     /** Loading state of the section. Loading sections are displaying a placeholder. When this is true `loadingAriaLabel` must also be provided. */
     loading: boolean;
@@ -27,21 +59,30 @@ interface IconProps {
     iconAriaLabel: string;
 }
 /**
- * Only one header slot is allowed at a time: `status`, `iconVariant`, or `action`.
+ * Only one header slot is allowed at a time: `status`, `iconVariant`, `action`, or `endText`.
  */
 type HeaderSlotProps = {
     status?: number;
     iconVariant?: never;
     iconAriaLabel?: never;
     action?: never;
+    endText?: never;
 } | ({
     status?: never;
     action?: never;
+    endText?: never;
 } & RequireAllOrNone<IconProps, keyof IconProps>) | {
     status?: never;
     iconVariant?: never;
     iconAriaLabel?: never;
     action?: React.ReactNode;
+    endText?: never;
+} | {
+    status?: never;
+    iconVariant?: never;
+    iconAriaLabel?: never;
+    action?: never;
+    endText?: string;
 };
 export type AccordionBaseItem = {
     /**
@@ -65,9 +106,32 @@ export type AccordionSectionItem = AccordionBaseItem & Omit<RadixAccordionItemPr
      */
     disabled?: boolean;
     /**
-     * Element displayed to the left of the title.
+     * When provided, frames the start-of-row icon in a 32x32 container
+     * tinted with the matching Box brand surface color. Each variant
+     * pairs a "brand-{variant}-tertiary" tinted background with the
+     * corresponding brand foreground glyph:
+     *
+     * - `default` – `surface-surface-tertiary` (#F5F5F5) background, `gray-100` (#909090) icon
+     * - `box`   – `brand-box-tertiary` (#E5EFFA) background, `box-blue-100` (#0061D5) icon
+     * - `forms`  – `brand-forms-tertiary` (#E9F8F2) background, `green-light-110` (#22AF74) icon
+     * - `docgen` – `brand-docgen-tertiary` (#ECE9F8) background, `brand-docgen-primary` (purple) icon
+     * - `sign`   – `brand-sign-tertiary` (#E5EBF2) background, `dark-blue-100` (#003C84) icon
+     *
+     * Has no effect unless `startIcon` (or the legacy `startElement`) is
+     * also provided. Only applies to modernized accordion items.
      */
-    startElement?: React.ReactNode;
+    startElementBackgroundColor?: StartElementBackgroundVariant;
+    /**
+     * Optional supplemental text displayed below the title in the header.
+     * Only applies to modernized accordion items.
+     */
+    subtitle?: string;
+    /**
+     * Optional decorative icon displayed before the subtitle text.
+     * Has no effect unless `subtitle` is also provided.
+     * Only applies to modernized accordion items.
+     */
+    subtitleIcon?: React.ReactNode;
     /**
      * When true, the item renders a colored border and tinted background when
      * expanded to visually indicate it is the active/selected item. The border
@@ -76,7 +140,7 @@ export type AccordionSectionItem = AccordionBaseItem & Omit<RadixAccordionItemPr
      * Only applies to modernized accordion items.
      */
     highlighted?: boolean;
-} & HeaderSlotProps;
+} & HeaderSlotProps & StartSlotProps;
 export type AccordionItem = AccordionSectionItem | AccordionFixedItem;
 export type AccordionItemProps = AccordionItem & React.ComponentPropsWithRef<'div'>;
 export type AccordionProps = (AccordionSingleProps | AccordionMultipleProps) & React.ComponentPropsWithRef<'div'>;

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

@@ -0,0 +1 @@
+export {};