@box/blueprint-web 14.40.0 → 14.41.1

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"avatar":"bp_avatar_module_avatar--7018b","xsmall":"bp_avatar_module_xsmall--7018b","length-1":"bp_avatar_module_length-1--7018b","text":"bp_avatar_module_text--7018b","length-2":"bp_avatar_module_length-2--7018b","small":"bp_avatar_module_small--7018b","medium":"bp_avatar_module_medium--7018b","large":"bp_avatar_module_large--7018b","length-3":"bp_avatar_module_length-3--7018b","length-4":"bp_avatar_module_length-4--7018b","xlarge":"bp_avatar_module_xlarge--7018b","xxlarge":"bp_avatar_module_xxlarge--7018b","badge":"bp_avatar_module_badge--7018b","image":"bp_avatar_module_image--7018b","loading":"bp_avatar_module_loading--7018b","anonymousAvatar":"bp_avatar_module_anonymousAvatar--7018b","iconContainer":"bp_avatar_module_iconContainer--7018b"};
+var styles = {"avatar":"bp_avatar_module_avatar--da0f5","xsmall":"bp_avatar_module_xsmall--da0f5","length-1":"bp_avatar_module_length-1--da0f5","text":"bp_avatar_module_text--da0f5","length-2":"bp_avatar_module_length-2--da0f5","small":"bp_avatar_module_small--da0f5","medium":"bp_avatar_module_medium--da0f5","large":"bp_avatar_module_large--da0f5","length-3":"bp_avatar_module_length-3--da0f5","length-4":"bp_avatar_module_length-4--da0f5","xlarge":"bp_avatar_module_xlarge--da0f5","xxlarge":"bp_avatar_module_xxlarge--da0f5","badge":"bp_avatar_module_badge--da0f5","image":"bp_avatar_module_image--da0f5","loading":"bp_avatar_module_loading--da0f5","anonymousAvatar":"bp_avatar_module_anonymousAvatar--da0f5","iconContainer":"bp_avatar_module_iconContainer--da0f5"};
 
 export { styles as default };

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

@@ -1,18 +1,21 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { SelectItemCheck, SelectItem, ComboboxItem, useComboboxStore, useSelectStore, PopoverAnchor, Combobox as Combobox$1, ComboboxCancel, SelectList, ComboboxPopover } from '@ariakit/react';
 import { SelectRenderer } from '@ariakit/react-core/select/select-renderer';
-import { Checkmark, XMark as XMark$1 } from '@box/blueprint-web-assets/icons/Fill';
-import { XMark } from '@box/blueprint-web-assets/icons/Medium';
-import { bpIconIconOnLight, IconIconOnLight } from '@box/blueprint-web-assets/tokens/tokens';
+import { Checkmark, AlertBadge, XMark as XMark$1 } from '@box/blueprint-web-assets/icons/Fill';
+import { AlertCircle, XMark } from '@box/blueprint-web-assets/icons/Medium';
+import { bpIconIconOnLight, IconIconOnLight, IconIconErrorOnLight } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
 import React__default, { forwardRef, useMemo, useRef, useCallback, useEffect } from 'react';
 import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
+import { Focusable } from '../focusable/focusable.js';
 import { InputChip } from '../input-chip/input-chip.js';
 import { LoadingIndicator } from '../loading-indicator/loading-indicator.js';
 import { IconButton } from '../primitives/icon-button/icon-button.js';
 import { InlineError } from '../primitives/inline-error/inline-error.js';
 import { TextArea } from '../text-area/text-area.js';
+import { Tooltip } from '../tooltip/tooltip.js';
 import { useLabelable } from '../util-components/labelable/useLabelable.js';
+import { VisuallyHidden } from '../visually-hidden/visually-hidden.js';
 import { composeEventHandlers } from '../utils/composeEventHandlers.js';
 import { useForkRef } from '../utils/useForkRef.js';
 import { useUniqueId } from '../utils/useUniqueId.js';
@@ -46,6 +49,7 @@ const RootInner = ({
     className,
     popoverClassName,
     error,
+    errorVariant = 'default',
     hideLabel = false,
     label,
     defaultOpen = false,
@@ -335,6 +339,8 @@ const RootInner = ({
   const showChipsGroup = Array.isArray(selectedValue) && selectedValue.length > 0;
   const showComboboxCancelButton = clearButtonAriaLabel && (inputValue.length > 0 || (Array.isArray(selectedValue) ? selectedValue.length > 0 : !!selectedValue));
   const showSingleSelectChip = displaySingleSelectionAsChip && !Array.isArray(selectedValue) && !!selectedValue;
+  const showInlineError = errorVariant === 'inline' && hasError;
+  const InlineErrorIcon = enableModernizedComponents ? AlertCircle : AlertBadge;
   const Label = useLabelable(label, comboboxId, required);
   const inlineErrorId = useUniqueId('inline-error-');
   const ariaDescribedBy = clsx(rest['aria-describedby'], {
@@ -361,7 +367,8 @@ const RootInner = ({
         className: clsx(styles.comboboxContainer, {
           [styles.error]: hasError,
           [styles.withChips]: showChipsGroup || showSingleSelectChip,
-          [styles.withComboboxButtons]: showComboboxCancelButton || Boolean(endComboboxIcon)
+          [styles.withComboboxButtons]: showComboboxCancelButton || Boolean(endComboboxIcon) || showInlineError,
+          [styles.withInlineErrorAndEndButton]: showInlineError && (showComboboxCancelButton || Boolean(endComboboxIcon))
         }),
         onClick: handleFocusInputOnEvent,
         "data-testid": "combobox-container",
@@ -402,9 +409,26 @@ const RootInner = ({
               onKeyDown: handleKeyDown,
               required: required,
               store: comboboxStore
-            }), jsx("div", {
+            }), jsxs("div", {
               className: styles.comboboxButtons,
-              children: showComboboxCancelButton ? jsx(ComboboxCancel, {
+              children: [showInlineError && jsxs(Fragment, {
+                children: [jsx(Tooltip, {
+                  content: error,
+                  side: "top",
+                  variant: "error",
+                  children: jsx(Focusable, {
+                    "aria-labelledby": inlineErrorId,
+                    children: jsx(InlineErrorIcon, {
+                      className: styles.inlineErrorIcon,
+                      color: IconIconErrorOnLight,
+                      "data-testid": enableModernizedComponents ? 'combobox-inline-error-icon-modern' : 'combobox-inline-error-icon-legacy'
+                    })
+                  })
+                }), jsx(VisuallyHidden, {
+                  id: inlineErrorId,
+                  children: error
+                })]
+              }), showComboboxCancelButton ? jsx(ComboboxCancel, {
                 onClick: resetSelectedValue,
                 // eslint-disable-next-line react/jsx-no-bind
                 render: cancelProps => jsx(IconButton, {
@@ -414,12 +438,12 @@ const RootInner = ({
                   size: "x-small"
                 }),
                 store: comboboxStore
-              }) : endComboboxIcon
+              }) : endComboboxIcon]
             })]
           })]
         })
       })
-    }), jsx(InlineError, {
+    }), errorVariant === 'default' && jsx(InlineError, {
       className: styles.inlineError,
       id: inlineErrorId,
       children: error

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"container":"bp_combobox_module_container--c4fe7","label":"bp_combobox_module_label--c4fe7","textInput":"bp_combobox_module_textInput--c4fe7","popover":"bp_combobox_module_popover--c4fe7","disabled":"bp_combobox_module_disabled--c4fe7","hiddenLabel":"bp_combobox_module_hiddenLabel--c4fe7","comboboxContainer":"bp_combobox_module_comboboxContainer--c4fe7","comboboxContainerInner":"bp_combobox_module_comboboxContainerInner--c4fe7","withChips":"bp_combobox_module_withChips--c4fe7","error":"bp_combobox_module_error--c4fe7","withComboboxButtons":"bp_combobox_module_withComboboxButtons--c4fe7","textInputWrapper":"bp_combobox_module_textInputWrapper--c4fe7","comboboxButtons":"bp_combobox_module_comboboxButtons--c4fe7","inlineError":"bp_combobox_module_inlineError--c4fe7","popoverInner":"bp_combobox_module_popoverInner--c4fe7","option":"bp_combobox_module_option--c4fe7","indicator":"bp_combobox_module_indicator--c4fe7","indicatorIcon":"bp_combobox_module_indicatorIcon--c4fe7","optionWithIndicator":"bp_combobox_module_optionWithIndicator--c4fe7","loadingIndicator":"bp_combobox_module_loadingIndicator--c4fe7"};
+var styles = {"container":"bp_combobox_module_container--61e5e","label":"bp_combobox_module_label--61e5e","textInput":"bp_combobox_module_textInput--61e5e","popover":"bp_combobox_module_popover--61e5e","disabled":"bp_combobox_module_disabled--61e5e","hiddenLabel":"bp_combobox_module_hiddenLabel--61e5e","comboboxContainer":"bp_combobox_module_comboboxContainer--61e5e","comboboxContainerInner":"bp_combobox_module_comboboxContainerInner--61e5e","withChips":"bp_combobox_module_withChips--61e5e","error":"bp_combobox_module_error--61e5e","withComboboxButtons":"bp_combobox_module_withComboboxButtons--61e5e","withInlineErrorAndEndButton":"bp_combobox_module_withInlineErrorAndEndButton--61e5e","textInputWrapper":"bp_combobox_module_textInputWrapper--61e5e","comboboxButtons":"bp_combobox_module_comboboxButtons--61e5e","inlineErrorIcon":"bp_combobox_module_inlineErrorIcon--61e5e","inlineError":"bp_combobox_module_inlineError--61e5e","popoverInner":"bp_combobox_module_popoverInner--61e5e","option":"bp_combobox_module_option--61e5e","indicator":"bp_combobox_module_indicator--61e5e","indicatorIcon":"bp_combobox_module_indicatorIcon--61e5e","optionWithIndicator":"bp_combobox_module_optionWithIndicator--61e5e","loadingIndicator":"bp_combobox_module_loadingIndicator--61e5e"};
 
 export { styles as default };

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

@@ -2,6 +2,7 @@ import { type ComboboxProps as AriakitComboboxProps, type ComboboxPopoverProps }
 import { type SelectItemProps } from '@ariakit/react-core/select/select-item';
 import { type SelectRendererProps } from '@ariakit/react-core/select/select-renderer';
 import { type InputChipProps } from '../input-chip/types';
+import { type ErrorVariant } from '../primitives/base-text-input/types';
 import { type TextAreaProps } from '../text-area/types';
 import { type Labelable } from '../util-components/labelable/types';
 export type OptionValue = {
@@ -178,6 +179,14 @@ export interface ComboboxBaseProps<Multiple extends boolean, FreeInput extends b
      * The content of the error message
      */
     error?: React.ReactNode;
+    /**
+     * How the error message is displayed.
+     *  - `default`: renders an inline error message below the combobox.
+     *  - `inline`: renders an always-visible error icon inside the combobox; the error message shows in a tooltip on hover/focus of the icon.
+     *
+     * @default 'default'
+     */
+    errorVariant?: ErrorVariant;
     /**
      * The DOM element where the Combobox should be portal-ed into. If not provided, the Combobox will be appended to the document body.
      */