@box/blueprint-web 12.116.2 → 12.118.0

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

@@ -83,6 +83,7 @@ const RootInner = ({
     endComboboxIcon,
     idForLabel,
     displaySingleSelectionAsChip = multiselect,
+    autoComplete,
     ...comboboxProps
   } = rest;
   const isInput = useMemo(() => as === 'input', [as]);
@@ -339,6 +340,14 @@ const RootInner = ({
   const ariaDescribedBy = clsx(rest['aria-describedby'], {
     [inlineErrorId]: hasError
   });
+  // Ariakit sets autoComplete="off" by default on the input element.
+  // We need to force update it if the user provided a custom value.
+  useEffect(() => {
+    const element = inputRef.current;
+    if (element && autoComplete) {
+      element.setAttribute('autocomplete', autoComplete);
+    }
+  }, [autoComplete]);
   const inputComponent = isInput ? jsxs(Fragment, {
     children: [jsx(Label, {
       className: clsx(styles.label, {

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

@@ -241,6 +241,12 @@ export interface ComboboxBaseProps<Multiple extends boolean, FreeInput extends b
      * @default false
      */
     selectOnEnterOrTab?: boolean;
+    /**
+     * If `off`, the combobox disables autofill suggestions from the browser.
+     *
+     * @default none
+     */
+    autoComplete?: string;
 }
 export type ComboboxTextArea = Pick<TextAreaProps, 'maxRows' | 'minRows' | 'maxLength' | 'aria-describedby'> & {
     as: 'textarea';

package/dist/lib-esm/index.css

@@ -7528,6 +7528,12 @@
   height:var(--icon-toogle-button-xsmall-size);
   width:var(--icon-toogle-button-xsmall-size);
 }
+.bp_inline_notice_list_item_module_inlineNoticeListItem--0833c{
+  width:100%;
+}
+.bp_inline_notice_list_item_module_inlineNoticeListItem--0833c .bp_inline_notice_list_item_module_contentContainer--0833c{
+  align-items:center;
+}
 table.bp_inline_table_module_inlineTable--fc100[data-modern=false]{
   --table-background:var(--gray-white);
   --table-border:var(--border-1) solid var(--gray-10);

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

@@ -29,6 +29,7 @@ export * from './grid-list-v2';
 export * from './guided-tooltip';
 export * from './icon-dual-state-button';
 export * from './icon-toggle-button';
+export * from './inline-notice-list-item';
 export * from './inline-notice/inline-notice';
 export * from './inline-table/inline-table';
 export * from './input-chip';

package/dist/lib-esm/index.js

@@ -37,6 +37,7 @@ export { GuidedTooltip } from './guided-tooltip/guided-tooltip.js';
 export { GuidedTooltipContext } from './guided-tooltip/utils/guided-tooltip-context.js';
 export { IconDualStateButton } from './icon-dual-state-button/icon-dual-state-button.js';
 export { IconToggleButton } from './icon-toggle-button/icon-toggle-button.js';
+export { InlineNoticeListItem } from './inline-notice-list-item/index.js';
 export { InlineNotice } from './inline-notice/inline-notice.js';
 export { InlineTable } from './inline-table/inline-table.js';
 export { InputChip } from './input-chip/input-chip.js';

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

@@ -0,0 +1,9 @@
+import { TertiaryAction, PrimaryAction } from '../primitives/base-inline-notice/base-inline-notice-actions.js';
+import { InlineNoticeListItem as InlineNoticeListItem$1 } from './inline-notice-list-item.js';
+
+const InlineNoticeListItem = Object.assign(InlineNoticeListItem$1, {
+  PrimaryAction,
+  TertiaryAction
+});
+
+export { InlineNoticeListItem };

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

@@ -0,0 +1,51 @@
+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 styles from './inline-notice-list-item.module.js';
+
+const InlineNoticeListItem = /*#__PURE__*/forwardRef(function InlineNoticeListItem(props, forwardedRef) {
+  const {
+    children,
+    icon,
+    iconAriaLabel,
+    subtitle,
+    text,
+    title
+  } = props;
+  return jsxs(BaseInlineNotice, {
+    ref: forwardedRef,
+    backgroundColor: "backgroundWhite",
+    className: styles.inlineNoticeListItem,
+    children: [jsxs(BaseInlineNotice.ContentContainer, {
+      className: styles.contentContainer,
+      children: [icon && iconAriaLabel && jsx(BaseInlineNotice.Icon, {
+        icon: icon,
+        iconAriaLabel: iconAriaLabel
+      }), jsxs(BaseInlineNotice.Content, {
+        children: [jsxs("div", {
+          children: [jsx(Text, {
+            as: "span",
+            color: "textOnLightDefault",
+            variant: "bodyDefaultBold",
+            children: title
+          }), subtitle && jsx(Text, {
+            as: "span",
+            color: "textOnLightDefault",
+            children: subtitle
+          })]
+        }), text && jsx(BaseInlineNotice.Content.Body, {
+          children: jsx(Text, {
+            as: "span",
+            color: "textOnLightSecondary",
+            children: text
+          })
+        })]
+      })]
+    }), !!children && jsx(BaseInlineNotice.Actions, {
+      children: children
+    })]
+  });
+});
+
+export { InlineNoticeListItem };

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

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"inlineNoticeListItem":"bp_inline_notice_list_item_module_inlineNoticeListItem--0833c","contentContainer":"bp_inline_notice_list_item_module_contentContainer--0833c"};
+
+export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.116.2",
+    "version": "12.118.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.93.3",
+        "@box/blueprint-web-assets": "^4.93.5",
         "@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.1",
+        "@box/storybook-utils": "^0.16.3",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
         "react": "^18.3.0",