@box/blueprint-web 7.0.2 → 7.2.0

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

@@ -11,6 +11,7 @@ export declare const TextInput: import("react").ForwardRefExoticComponent<(Omit<
     label: string;
     type?: "text" | undefined;
     hideLabel?: boolean | undefined;
+    invalid?: boolean | undefined;
     disabled?: boolean | undefined;
     required?: boolean | undefined;
     error?: import("react").ReactNode;
@@ -20,6 +21,7 @@ export declare const TextInput: import("react").ForwardRefExoticComponent<(Omit<
     label: string;
     type?: "text" | undefined;
     hideLabel?: boolean | undefined;
+    invalid?: boolean | undefined;
     disabled?: boolean | undefined;
     required?: boolean | undefined;
     error?: import("react").ReactNode;

package/lib-esm/text-input/text-input.js

@@ -20,6 +20,7 @@ const TextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     label,
     type = 'text',
     disabled,
+    invalid = false,
     hideLabel,
     error,
     loading = false,
@@ -29,16 +30,18 @@ const TextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   } = props;
   const inputRef = useRef(null);
   const inputId = useUniqueId('input-');
+  const inlineErrorId = useUniqueId('inline-error-');
   const focusInput = useCallback(() => {
     inputRef.current?.focus();
   }, []);
   const hasError = !!error && !disabled;
+  const shouldMarkError = (!!error || invalid) && !disabled;
   const isLoading = !disabled && loading && loadingAriaLabel;
   return jsxs(Fragment, {
     children: [jsxs("div", {
       className: clsx([styles.textInputContainer], {
         [styles.disabled]: disabled,
-        [styles.error]: hasError
+        [styles.error]: shouldMarkError
       }, className),
       children: [jsx("label", {
         className: clsx([styles.label], {
@@ -50,11 +53,14 @@ const TextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
         }) : label
       }), jsx("input", {
         ...rest,
+        ...(hasError && {
+          'aria-describedby': inlineErrorId
+        }),
         ref: useForkRef(inputRef, forwardedRef),
-        "aria-invalid": hasError,
+        "aria-invalid": shouldMarkError,
         "aria-required": required,
         className: clsx([styles.textInput], {
-          [styles.error]: hasError,
+          [styles.error]: shouldMarkError,
           [styles.loading]: isLoading
         }),
         disabled: disabled,
@@ -68,6 +74,7 @@ const TextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       })]
     }), jsx(InlineError, {
       className: styles.inlineError,
+      id: inlineErrorId,
       children: error
     })]
   });

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

@@ -13,6 +13,12 @@ export type TextInputProps = React.ComponentPropsWithRef<'input'> & {
     type?: 'text';
     /** When true label text is hidden */
     hideLabel?: boolean;
+    /**
+     * When true it enforces the error state, without error message.
+     * Developer is responsible for connecting the error message with TextInput using aria-describedby.
+     * This prop should not be used in conjunction with error prop.
+     * */
+    invalid?: boolean;
     /** When true prevents user interaction with input */
     disabled?: boolean;
     /** When true it indicates input field must be filled out */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "7.0.2",
+    "version": "7.2.0",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
         "access": "public",
@@ -58,7 +58,7 @@
         "@box/storybook-utils": "^0.1.0",
         "react-stately": "^3.31.1"
     },
-    "gitHead": "837a2ca592b22bd440c03b6040aa9bd2009d0bdd",
+    "gitHead": "0958a7b410ffc0894fb5e04ccb513fdb571a544b",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {