@box/blueprint-web 14.40.0 → 14.41.1

package/dist/lib-esm/primitives/base-button/base-button.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"button":"bp_base_button_module_button--31640","primary":"bp_base_button_module_primary--31640","secondary":"bp_base_button_module_secondary--31640","tertiary":"bp_base_button_module_tertiary--31640","quaternary":"bp_base_button_module_quaternary--31640","tertiary-destructive":"bp_base_button_module_tertiary-destructive--31640","destructive":"bp_base_button_module_destructive--31640","outline":"bp_base_button_module_outline--31640","small":"bp_base_button_module_small--31640","isIconButton":"bp_base_button_module_isIconButton--31640","isTextWithIconEndButton":"bp_base_button_module_isTextWithIconEndButton--31640","isTextWithIconStartButton":"bp_base_button_module_isTextWithIconStartButton--31640","isTextWithStartAndEndIconButton":"bp_base_button_module_isTextWithStartAndEndIconButton--31640","x-small":"bp_base_button_module_x-small--31640","large":"bp_base_button_module_large--31640","icon":"bp_base_button_module_icon--31640","hide":"bp_base_button_module_hide--31640"};
+var styles = {"button":"bp_base_button_module_button--d2a29","primary":"bp_base_button_module_primary--d2a29","secondary":"bp_base_button_module_secondary--d2a29","tertiary":"bp_base_button_module_tertiary--d2a29","quaternary":"bp_base_button_module_quaternary--d2a29","tertiary-destructive":"bp_base_button_module_tertiary-destructive--d2a29","destructive":"bp_base_button_module_destructive--d2a29","outline":"bp_base_button_module_outline--d2a29","small":"bp_base_button_module_small--d2a29","isIconButton":"bp_base_button_module_isIconButton--d2a29","isTextWithIconEndButton":"bp_base_button_module_isTextWithIconEndButton--d2a29","isTextWithIconStartButton":"bp_base_button_module_isTextWithIconStartButton--d2a29","isTextWithStartAndEndIconButton":"bp_base_button_module_isTextWithStartAndEndIconButton--d2a29","x-small":"bp_base_button_module_x-small--d2a29","large":"bp_base_button_module_large--d2a29","icon":"bp_base_button_module_icon--d2a29","hide":"bp_base_button_module_hide--d2a29"};
 
 export { styles as default };

package/dist/lib-esm/primitives/base-text-input/base-text-input.js

@@ -1,10 +1,16 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { AlertBadge } from '@box/blueprint-web-assets/icons/Fill';
+import { AlertCircle } from '@box/blueprint-web-assets/icons/Medium';
+import { IconIconErrorOnLight } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
 import { forwardRef, useState, useMemo, cloneElement } from 'react';
 import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
+import { Focusable } from '../../focusable/focusable.js';
 import { Text } from '../../text/text.js';
+import { Tooltip } from '../../tooltip/tooltip.js';
 import { useLabelable } from '../../util-components/labelable/useLabelable.js';
 import { useUniqueId } from '../../utils/useUniqueId.js';
+import { VisuallyHidden } from '../../visually-hidden/visually-hidden.js';
 import { InlineError } from '../inline-error/inline-error.js';
 import styles from './base-text-input.module.js';
 
@@ -29,6 +35,7 @@ const BaseTextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     hideLabel,
     readOnly,
     error,
+    errorVariant = 'default',
     required = false,
     endIcon,
     startIcon,
@@ -99,8 +106,27 @@ const BaseTextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
         readOnly: readOnly,
         required: required,
         type: type
-      }), EndIconComponent]
-    }), hasError ? jsx(InlineError, {
+      }), errorVariant === 'inline' && hasError ? jsxs(Fragment, {
+        children: [jsx(Tooltip, {
+          content: error,
+          side: "top",
+          variant: "error",
+          children: jsx(Focusable, {
+            ref: setValueUsing(setEndIconWidth),
+            "aria-labelledby": inlineErrorId,
+            className: clsx(styles.endIcon, styles.inlineErrorIcon),
+            children: enableModernizedComponents ? jsx(AlertCircle, {
+              color: IconIconErrorOnLight
+            }) : jsx(AlertBadge, {
+              color: IconIconErrorOnLight
+            })
+          })
+        }), jsx(VisuallyHidden, {
+          id: inlineErrorId,
+          children: error
+        })]
+      }) : EndIconComponent]
+    }), errorVariant === 'default' && hasError ? jsx(InlineError, {
       className: styles.inlineError,
       id: inlineErrorId,
       children: error

package/dist/lib-esm/primitives/base-text-input/base-text-input.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"textInputContainerOuter":"bp_base_text_input_module_textInputContainerOuter--f7693","label":"bp_base_text_input_module_label--f7693","textInputContainer":"bp_base_text_input_module_textInputContainer--f7693","textInput":"bp_base_text_input_module_textInput--f7693","hidden":"bp_base_text_input_module_hidden--f7693","error":"bp_base_text_input_module_error--f7693","readOnly":"bp_base_text_input_module_readOnly--f7693","endIcon":"bp_base_text_input_module_endIcon--f7693","startIcon":"bp_base_text_input_module_startIcon--f7693","disabled":"bp_base_text_input_module_disabled--f7693","inlineError":"bp_base_text_input_module_inlineError--f7693","subtext":"bp_base_text_input_module_subtext--f7693"};
+var styles = {"textInputContainerOuter":"bp_base_text_input_module_textInputContainerOuter--8494e","label":"bp_base_text_input_module_label--8494e","textInputContainer":"bp_base_text_input_module_textInputContainer--8494e","textInput":"bp_base_text_input_module_textInput--8494e","hidden":"bp_base_text_input_module_hidden--8494e","error":"bp_base_text_input_module_error--8494e","readOnly":"bp_base_text_input_module_readOnly--8494e","endIcon":"bp_base_text_input_module_endIcon--8494e","startIcon":"bp_base_text_input_module_startIcon--8494e","inlineErrorIcon":"bp_base_text_input_module_inlineErrorIcon--8494e","disabled":"bp_base_text_input_module_disabled--8494e","inlineError":"bp_base_text_input_module_inlineError--8494e","subtext":"bp_base_text_input_module_subtext--8494e"};
 
 export { styles as default };

package/dist/lib-esm/primitives/base-text-input/types.d.ts

@@ -1,4 +1,5 @@
 import { type Labelable } from '../../util-components/labelable/types';
+export type ErrorVariant = 'default' | 'inline';
 export type BaseTextInputProps = React.ComponentPropsWithRef<'input'> & Labelable & {
     /** Input type, defaults to 'text' */
     type?: 'text' | 'password';
@@ -16,6 +17,13 @@ export type BaseTextInputProps = React.ComponentPropsWithRef<'input'> & Labelabl
     required?: boolean;
     /** Content of error message */
     error?: React.ReactNode;
+    /**
+     * Controls how the error is displayed.
+     * 'default' renders an inline error message below the input.
+     * 'inline' renders an error icon inside the input that shows the error in a tooltip on hover.
+     * @default 'default'
+     */
+    errorVariant?: ErrorVariant;
     /**
      * Custom icon to be rendered after the input
      * When loading is true and input is not disabled prop value will be ignored

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"maxContainer":"bp_status_module_maxContainer--eddf1","status":"bp_status_module_status--eddf1","interactiveStatus":"bp_status_module_interactiveStatus--eddf1","reverse":"bp_status_module_reverse--eddf1","circle":"bp_status_module_circle--eddf1","text":"bp_status_module_text--eddf1","colorSurfaceStatusSurfaceGray":"bp_status_module_colorSurfaceStatusSurfaceGray--eddf1","colorSurfaceStatusSurfaceYellow":"bp_status_module_colorSurfaceStatusSurfaceYellow--eddf1","colorSurfaceStatusSurfaceOrange":"bp_status_module_colorSurfaceStatusSurfaceOrange--eddf1","colorSurfaceStatusSurfaceRed":"bp_status_module_colorSurfaceStatusSurfaceRed--eddf1","colorSurfaceStatusSurfacePurple":"bp_status_module_colorSurfaceStatusSurfacePurple--eddf1","colorSurfaceStatusSurfaceLightBlue":"bp_status_module_colorSurfaceStatusSurfaceLightBlue--eddf1","colorSurfaceStatusSurfaceDarkBlue":"bp_status_module_colorSurfaceStatusSurfaceDarkBlue--eddf1","colorSurfaceStatusSurfaceGreen":"bp_status_module_colorSurfaceStatusSurfaceGreen--eddf1"};
+var styles = {"status":"bp_status_module_status--d29f3","reverse":"bp_status_module_reverse--d29f3","circle":"bp_status_module_circle--d29f3","text":"bp_status_module_text--d29f3","maxContainer":"bp_status_module_maxContainer--d29f3","interactiveStatus":"bp_status_module_interactiveStatus--d29f3","colorSurfaceStatusSurfaceGray":"bp_status_module_colorSurfaceStatusSurfaceGray--d29f3","colorSurfaceStatusSurfaceYellow":"bp_status_module_colorSurfaceStatusSurfaceYellow--d29f3","colorSurfaceStatusSurfaceOrange":"bp_status_module_colorSurfaceStatusSurfaceOrange--d29f3","colorSurfaceStatusSurfaceRed":"bp_status_module_colorSurfaceStatusSurfaceRed--d29f3","colorSurfaceStatusSurfacePurple":"bp_status_module_colorSurfaceStatusSurfacePurple--d29f3","colorSurfaceStatusSurfaceLightBlue":"bp_status_module_colorSurfaceStatusSurfaceLightBlue--d29f3","colorSurfaceStatusSurfaceDarkBlue":"bp_status_module_colorSurfaceStatusSurfaceDarkBlue--d29f3","colorSurfaceStatusSurfaceGreen":"bp_status_module_colorSurfaceStatusSurfaceGreen--d29f3"};
 
 export { styles as default };

package/dist/lib-esm/text-input/text-input.d.ts

@@ -7,6 +7,7 @@ export declare const TextInput: import("react").ForwardRefExoticComponent<(Omit<
     disabled?: boolean;
     required?: boolean;
     error?: React.ReactNode;
+    errorVariant?: import("../primitives/base-text-input/types").ErrorVariant;
     endIcon?: React.ReactElement;
     startIcon?: React.ReactElement;
     subtext?: string;
@@ -19,6 +20,7 @@ export declare const TextInput: import("react").ForwardRefExoticComponent<(Omit<
     disabled?: boolean;
     required?: boolean;
     error?: React.ReactNode;
+    errorVariant?: import("../primitives/base-text-input/types").ErrorVariant;
     endIcon?: React.ReactElement;
     startIcon?: React.ReactElement;
     subtext?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "14.40.0",
+    "version": "14.41.1",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -47,7 +47,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.21",
         "@ariakit/react-core": "0.4.21",
-        "@box/blueprint-web-assets": "^4.120.7",
+        "@box/blueprint-web-assets": "^4.121.1",
         "@internationalized/date": "^3.12.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.19.22",
+        "@box/storybook-utils": "^0.20.1",
         "@figma/code-connect": "1.4.4",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",