@box/blueprint-web 11.9.0 → 11.10.0

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

@@ -67,12 +67,16 @@ const Item = props => {
   // TODO: [DSYS-549] Refactor - spread props in a single place
   const {
     status,
+    statusIcon,
+    statusIconAriaLabel,
     title,
     disabled,
     error,
     errorIconAriaLabel,
     ...itemRest
   } = props;
+  const hasStatusLabel = isDefined(status) && !isDefined(statusIcon);
+  const hasStatusIcon = !isDefined(status) && isDefined(statusIcon);
   return jsxs(RadixAccordion.Item, {
     ...itemRest,
     className: accordionItemClasses,
@@ -87,10 +91,17 @@ const Item = props => {
             children: title
           }), jsxs("div", {
             className: styles.accordionHeaderTrigger,
-            children: [isDefined(status) && jsx(Status, {
+            children: [hasStatusLabel && jsx(Status, {
               className: styles.accordionStatus,
               color: error ? statusColors.error : statusColors.default,
               text: `${status}`
+            }), hasStatusIcon && jsx(Status, {
+              "aria-label": statusIconAriaLabel,
+              className: styles.accordionIconStatus,
+              color: error ? statusColors.error : statusColors.default,
+              hideText: true,
+              icon: statusIcon,
+              text: statusIconAriaLabel ?? ''
             }), jsx(PointerChevron, {
               "aria-hidden": "true",
               className: styles.accordionTriggerIcon

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"accordionContent":"bp_accordion_module_accordionContent--81227","slideDown":"bp_accordion_module_slideDown--81227","slideUp":"bp_accordion_module_slideUp--81227","accordionContentWrapper":"bp_accordion_module_accordionContentWrapper--81227","accordionInlineErrorWrapper":"bp_accordion_module_accordionInlineErrorWrapper--81227","accordionItem":"bp_accordion_module_accordionItem--81227","accordionFixedContent":"bp_accordion_module_accordionFixedContent--81227","accordionHeader":"bp_accordion_module_accordionHeader--81227","accordionHeaderTrigger":"bp_accordion_module_accordionHeaderTrigger--81227","accordionStatus":"bp_accordion_module_accordionStatus--81227","accordionTrigger":"bp_accordion_module_accordionTrigger--81227","accordionTriggerIcon":"bp_accordion_module_accordionTriggerIcon--81227"};
+var styles = {"accordionContent":"bp_accordion_module_accordionContent--a6dfe","slideDown":"bp_accordion_module_slideDown--a6dfe","slideUp":"bp_accordion_module_slideUp--a6dfe","accordionContentWrapper":"bp_accordion_module_accordionContentWrapper--a6dfe","accordionInlineErrorWrapper":"bp_accordion_module_accordionInlineErrorWrapper--a6dfe","accordionItem":"bp_accordion_module_accordionItem--a6dfe","accordionFixedContent":"bp_accordion_module_accordionFixedContent--a6dfe","accordionHeader":"bp_accordion_module_accordionHeader--a6dfe","accordionHeaderTrigger":"bp_accordion_module_accordionHeaderTrigger--a6dfe","accordionStatus":"bp_accordion_module_accordionStatus--a6dfe","accordionIconStatus":"bp_accordion_module_accordionIconStatus--a6dfe","accordionTrigger":"bp_accordion_module_accordionTrigger--a6dfe","accordionTriggerIcon":"bp_accordion_module_accordionTriggerIcon--a6dfe"};
 
 export { styles as default };

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

@@ -1,4 +1,5 @@
 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';
 interface Loading {
     /** Loading state of the section. Loading sections are displaying a placeholder. When this is true `loadingAriaLabel` must also be provided. */
@@ -16,6 +17,23 @@ interface Errorable {
      */
     errorIconAriaLabel?: string;
 }
+interface StatusIconProps {
+    /**
+     * Icon displayed in a status pill next to the title
+     * */
+    statusIcon: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
+    /**
+     * Description of icon displayed in a status pill next to the title
+     * */
+    statusIconAriaLabel: string;
+}
+type StatusProps = {
+    status: number;
+    statusIcon?: never;
+    statusIconAriaLabel?: never;
+} | ({
+    status?: never;
+} & RequireAllOrNone<StatusIconProps, keyof StatusIconProps>);
 export type AccordionBaseItem = {
     /**
      * Content of the accordion item that is displayed when the section is expanded
@@ -33,15 +51,11 @@ export type AccordionSectionItem = AccordionBaseItem & Omit<RadixAccordionItemPr
      * Header text displayed
      */
     title: string;
-    /**
-     * Number displayed in a status pill next to the title
-     * */
-    status?: number;
     /**
      * Disabled state of the section.
      */
     disabled?: boolean;
-};
+} & StatusProps;
 export type AccordionItem = AccordionSectionItem | AccordionFixedItem;
 export type AccordionItemProps = AccordionItem & React.ComponentPropsWithRef<'div'>;
 export type AccordionProps = (AccordionSingleProps | AccordionMultipleProps) & React.ComponentPropsWithRef<'div'>;

package/dist/lib-esm/guided-tooltip/guided-tooltip-footer.js

@@ -6,11 +6,15 @@ import { getUniqueId } from '../utils/useUniqueId.js';
 import styles from './guided-tooltip.module.js';
 import { useGuidedTooltipContext } from './utils/guided-tooltip-context.js';
 
-const PrimaryAction = /*#__PURE__*/forwardRef((props, forwardedRef) => jsx(Button, {
-  ...props,
+const PrimaryAction = /*#__PURE__*/forwardRef(({
+  autoFocus = true,
+  className,
+  ...rest
+}, forwardedRef) => jsx(Button, {
+  ...rest,
   ref: forwardedRef,
-  autoFocus: true,
-  className: clsx(styles.primaryAction, props.className)
+  autoFocus: autoFocus,
+  className: clsx(styles.primaryAction, className)
 }));
 const SecondaryAction = /*#__PURE__*/forwardRef((props, forwardedRef) => jsx(Button, {
   ...props,

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

@@ -5,6 +5,7 @@ import * as RadixPopover from '@radix-ui/react-popover';
 import clsx from 'clsx';
 import { forwardRef, useCallback, useState, useMemo } from 'react';
 import { IconButton } from '../primitives/icon-button/icon-button.js';
+import { focusRadioGroupFirstIfExists } from '../primitives/popover/popover-focus-utils.js';
 import { GuidedTooltipBody, GuidedTooltipText } from './guided-tooltip-body.js';
 import { GuidedTooltipFooter } from './guided-tooltip-footer.js';
 import { GuidedTooltipIcon } from './guided-tooltip-icon.js';
@@ -21,6 +22,7 @@ const GuidedTooltipContent = /*#__PURE__*/forwardRef(({
   closeLabel,
   content,
   closeDataResinTarget = 'dismiss',
+  onOpenAutoFocus,
   side = 'bottom',
   sideOffset = OFFSET_FROM_ANCHOR_IN_PX,
   ...rest
@@ -46,6 +48,14 @@ const GuidedTooltipContent = /*#__PURE__*/forwardRef(({
    * It also needs to consist of an id of the "steps indicator" element if it's present
    */
   const ariaLabelledbyAttr = clsx(titleId || bodyId, stepsIndicatorId);
+  // Workaround for: https://github.com/radix-ui/primitives/issues/1910
+  const handleOpenAutoFocus = useCallback(e => {
+    onOpenAutoFocus?.(e);
+    if (e.defaultPrevented) {
+      return;
+    }
+    focusRadioGroupFirstIfExists(e);
+  }, [onOpenAutoFocus]);
   return jsx(GuidedTooltipContext.Provider, {
     value: contextProviderValue,
     children: jsxs(RadixPopover.Content, {
@@ -56,6 +66,7 @@ const GuidedTooltipContent = /*#__PURE__*/forwardRef(({
       arrowPadding: ARROW_PADDING_IN_PX,
       className: clsx(styles.content, className),
       onInteractOutside: onInteractOutside,
+      onOpenAutoFocus: handleOpenAutoFocus,
       side: side,
       sideOffset: sideOffset,
       children: [content, jsx(RadixPopover.Close, {

package/dist/lib-esm/guided-tooltip/types.d.ts

@@ -15,6 +15,10 @@ export interface GuidedTooltipContentProps extends Omit<React.HTMLAttributes<HTM
      * "data-resin-target" to be passed to Close button.
      */
     closeDataResinTarget?: string;
+    /**
+     * Optional callback triggered when the GuidedTooltip is about to receive focus after opening
+     */
+    onOpenAutoFocus?: RadixPopover.PopoverContentProps['onOpenAutoFocus'];
     /** The preferred side of the anchor to render against. Will be reversed when collisions occur.
      * "top" | "right" | "bottom" | "left"
      * Default value: "bottom". */

package/dist/lib-esm/index.css

@@ -522,19 +522,19 @@
   background-color:#92e0c0;
 }
 
-.bp_accordion_module_accordionContent--81227[data-state=open]{
-  animation:bp_accordion_module_slideDown--81227 .15s ease-out;
+.bp_accordion_module_accordionContent--a6dfe[data-state=open]{
+  animation:bp_accordion_module_slideDown--a6dfe .15s ease-out;
 }
 
-.bp_accordion_module_accordionContent--81227[data-state=closed]{
-  animation:bp_accordion_module_slideUp--81227 .15s ease-out;
+.bp_accordion_module_accordionContent--a6dfe[data-state=closed]{
+  animation:bp_accordion_module_slideUp--a6dfe .15s ease-out;
 }
 
-.bp_accordion_module_accordionContent--81227{
+.bp_accordion_module_accordionContent--a6dfe{
   overflow:hidden;
 }
 
-@keyframes bp_accordion_module_slideDown--81227{
+@keyframes bp_accordion_module_slideDown--a6dfe{
   from{
     height:0;
   }
@@ -542,7 +542,7 @@
     height:var(--radix-accordion-content-height);
   }
 }
-@keyframes bp_accordion_module_slideUp--81227{
+@keyframes bp_accordion_module_slideUp--a6dfe{
   from{
     height:var(--radix-accordion-content-height);
   }
@@ -550,7 +550,7 @@
     height:0;
   }
 }
-.bp_accordion_module_accordionContentWrapper--81227{
+.bp_accordion_module_accordionContentWrapper--a6dfe{
   display:flex;
   flex-direction:column;
   gap:var(--space-4);
@@ -559,20 +559,20 @@
   padding-inline:var(--space-4);
 }
 
-.bp_accordion_module_accordionInlineErrorWrapper--81227{
+.bp_accordion_module_accordionInlineErrorWrapper--a6dfe{
   padding-block-start:var(--space-4);
   padding-inline:var(--space-4);
 }
 
-.bp_accordion_module_accordionItem--81227{
+.bp_accordion_module_accordionItem--a6dfe{
   border-bottom:var(--border-1) solid var(--border-divider-border);
   min-width:320px;
 }
-.bp_accordion_module_accordionItem--81227,.bp_accordion_module_accordionItem--81227 > [data-state=open]{
+.bp_accordion_module_accordionItem--a6dfe,.bp_accordion_module_accordionItem--a6dfe > [data-state=open]{
   background-color:var(--surface-accordion-surface);
 }
 
-.bp_accordion_module_accordionFixedContent--81227{
+.bp_accordion_module_accordionFixedContent--a6dfe{
   background-color:var(--surface-surface);
   display:flex;
   flex-direction:column;
@@ -581,7 +581,7 @@
   padding-inline:var(--space-4);
 }
 
-.bp_accordion_module_accordionHeader--81227{
+.bp_accordion_module_accordionHeader--a6dfe{
   color:var(--text-text-on-light);
   display:flex;
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
@@ -597,16 +597,19 @@
   width:100%;
 }
 
-.bp_accordion_module_accordionHeaderTrigger--81227{
+.bp_accordion_module_accordionHeaderTrigger--a6dfe{
   align-items:center;
   display:flex;
 }
 
-.bp_accordion_module_accordionStatus--81227{
+.bp_accordion_module_accordionIconStatus--a6dfe,.bp_accordion_module_accordionStatus--a6dfe{
   margin-inline-start:var(--space-2);
 }
+.bp_accordion_module_accordionIconStatus--a6dfe > span{
+  padding:0 var(--space-1);
+}
 
-.bp_accordion_module_accordionTrigger--81227{
+.bp_accordion_module_accordionTrigger--a6dfe{
   align-items:center;
   background-color:var(--surface-surface);
   border:none;
@@ -617,31 +620,31 @@
   text-transform:capitalize;
   width:100%;
 }
-.bp_accordion_module_accordionTrigger--81227:active{
+.bp_accordion_module_accordionTrigger--a6dfe:active{
   background-color:var(--surface-surface);
 }
-.bp_accordion_module_accordionTrigger--81227:hover{
+.bp_accordion_module_accordionTrigger--a6dfe:hover{
   background-color:var(--surface-accordion-surface-hover);
   cursor:pointer;
 }
-.bp_accordion_module_accordionTrigger--81227:focus-visible{
+.bp_accordion_module_accordionTrigger--a6dfe:focus-visible{
   background-color:var(--surface-surface-hover);
   box-shadow:inset 0 0 0 var(--border-2) var(--outline-focus-on-light);
   outline:none;
 }
-.bp_accordion_module_accordionTrigger--81227:disabled{
+.bp_accordion_module_accordionTrigger--a6dfe:disabled{
   cursor:default;
   opacity:.3;
 }
-.bp_accordion_module_accordionTrigger--81227:disabled:hover{
+.bp_accordion_module_accordionTrigger--a6dfe:disabled:hover{
   background-color:var(--gray-white);
 }
-.bp_accordion_module_accordionTrigger--81227 .bp_accordion_module_accordionTriggerIcon--81227{
+.bp_accordion_module_accordionTrigger--a6dfe .bp_accordion_module_accordionTriggerIcon--a6dfe{
   color:var(--gray-50);
   flex-shrink:0;
   margin-inline-start:var(--space-3);
 }
-.bp_accordion_module_accordionTrigger--81227[data-state=open] .bp_accordion_module_accordionTriggerIcon--81227{
+.bp_accordion_module_accordionTrigger--a6dfe[data-state=open] .bp_accordion_module_accordionTriggerIcon--a6dfe{
   transform:rotate(180deg);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "11.9.0",
+    "version": "11.10.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {