@box/blueprint-web 12.122.2 → 12.124.0

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

@@ -1,4 +1,4 @@
-import { type ComboboxPopoverProps } from '@ariakit/react';
+import { type ComboboxProps as AriakitComboboxProps, type ComboboxPopoverProps } from '@ariakit/react';
 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';
@@ -247,6 +247,18 @@ export interface ComboboxBaseProps<Multiple extends boolean, FreeInput extends b
      * @default none
      */
     autoComplete?: string;
+    /**
+     * If `true`, the combobox popover will open when the user changes the input value.
+     *
+     * @default true
+     */
+    showOnChange?: AriakitComboboxProps['showOnChange'];
+    /**
+     * If `true`, the combobox popover will open when the user clicks the input element.
+     *
+     * @default true
+     */
+    showOnClick?: AriakitComboboxProps['showOnClick'];
 }
 export type ComboboxTextArea = Pick<TextAreaProps, 'maxRows' | 'minRows' | 'maxLength' | 'aria-describedby'> & {
     as: 'textarea';

package/dist/lib-esm/inline-notice-list-item/inline-notice-list-item.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { BaseInlineNotice } from '../primitives/base-inline-notice/index.js';
-import { Text } from '../text/text.js';
+import { EllipsizableText } from '../ellipsizable-text/ellipsizable-text.js';
 import styles from './inline-notice-list-item.module.js';
 
 const InlineNoticeListItem = /*#__PURE__*/forwardRef(function InlineNoticeListItem(props, forwardedRef) {
@@ -21,23 +21,22 @@ const InlineNoticeListItem = /*#__PURE__*/forwardRef(function InlineNoticeListIt
       className: styles.contentContainer,
       children: [icon && iconAriaLabel && jsx(BaseInlineNotice.Icon, {
         icon: icon,
-        iconAriaLabel: iconAriaLabel
+        iconAriaLabel: iconAriaLabel,
+        iconColor: "IconIconOnLightSecondary"
       }), jsxs(BaseInlineNotice.Content, {
-        children: [jsxs("div", {
-          children: [jsx(Text, {
-            as: "span",
-            color: "textOnLightDefault",
-            variant: "bodyDefaultBold",
+        children: [jsxs(EllipsizableText, {
+          as: "div",
+          color: "textOnLightDefault",
+          lineClamp: 3,
+          variant: "bodyDefault",
+          children: [jsx("strong", {
             children: title
-          }), subtitle && jsx(Text, {
-            as: "span",
-            color: "textOnLightDefault",
-            children: subtitle
-          })]
+          }), subtitle]
         }), text && jsx(BaseInlineNotice.Content.Body, {
-          children: jsx(Text, {
+          children: jsx(EllipsizableText, {
             as: "span",
             color: "textOnLightSecondary",
+            lineClamp: 3,
             children: text
           })
         })]

package/dist/lib-esm/primitives/base-inline-notice/base-inline-notice-icon.js

@@ -1,13 +1,22 @@
 import { jsx } from 'react/jsx-runtime';
-import { bpSize050, Size5, bpIconIconOnLight, IconIconOnLight } from '@box/blueprint-web-assets/tokens/tokens';
+import { bpSize050, Size5, bpIconIconOnLightSecondary, bpIconIconOnLight, IconIconOnLightSecondary, IconIconOnLight } from '@box/blueprint-web-assets/tokens/tokens';
 import { forwardRef, createElement } from 'react';
 import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './base-inline-notice.module.js';
 
+const IconColorMap = {
+  IconIconOnLight,
+  IconIconOnLightSecondary
+};
+const IconColorModernizedMap = {
+  IconIconOnLight: bpIconIconOnLight,
+  IconIconOnLightSecondary: bpIconIconOnLightSecondary
+};
 const BaseInlineNoticeIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     icon,
     iconAriaLabel,
+    iconColor = 'IconIconOnLight',
     ...rest
   } = props;
   const {
@@ -16,8 +25,9 @@ const BaseInlineNoticeIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   if (!icon) {
     return null;
   }
+  const color = enableModernizedComponents ? IconColorModernizedMap[iconColor] : IconColorMap[iconColor];
   const iconElement = /*#__PURE__*/createElement(icon, {
-    color: enableModernizedComponents ? bpIconIconOnLight : IconIconOnLight,
+    color,
     width: enableModernizedComponents ? bpSize050 : Size5,
     height: enableModernizedComponents ? bpSize050 : Size5,
     'aria-label': iconAriaLabel

package/dist/lib-esm/primitives/base-inline-notice/types.d.ts

@@ -1,5 +1,6 @@
 import { type ComponentPropsWithRef, type FunctionComponent, type HTMLAttributes, type PropsWithChildren, type ReactNode, type SVGProps } from 'react';
 import { type BaseButtonProps } from '../base-button';
+export type IconColor = 'IconIconOnLight' | 'IconIconOnLightSecondary';
 export interface BaseInlineNoticeActionsProps {
     /** Child button components for inline notice actions */
     children: ReactNode;
@@ -21,6 +22,8 @@ export type BaseInlineNoticeIconProps = ComponentPropsWithRef<'span'> & {
     icon: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>> | null;
     /** Icon aria label for accessibility */
     iconAriaLabel: string;
+    /** Icon color - defaults to IconIconOnLight */
+    iconColor?: IconColor;
 };
 export interface BaseInlineNoticeContentContainerProps {
     /** Optional class name */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.122.2",
+    "version": "12.124.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -47,7 +47,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.15",
         "@ariakit/react-core": "0.4.15",
-        "@box/blueprint-web-assets": "^4.96.0",
+        "@box/blueprint-web-assets": "^4.96.2",
         "@internationalized/date": "^3.7.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.16.11",
+        "@box/storybook-utils": "^0.16.13",
         "@figma/code-connect": "1.3.12",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",