@box/blueprint-web 7.31.3 → 7.32.0

package/lib-esm/combobox/combobox.js

@@ -242,6 +242,10 @@ const RootInner = ({
   const showComboboxCancelButton = clearButtonAriaLabel && (inputValue.length > 0 || (Array.isArray(selectedValue) ? selectedValue.length > 0 : !!selectedValue));
   const showSingleSelectChip = showComboboxCancelButton && !Array.isArray(selectedValue) && !!selectedValue;
   const Label = useLabelable(label, comboboxId);
+  const inlineErrorId = useUniqueId('inline-error-');
+  const ariaDescribedBy = clsx(rest['aria-describedby'], {
+    [inlineErrorId]: hasError
+  });
   const inputComponent = isInput ? jsxs(Fragment, {
     children: [jsx(Label, {
       className: clsx(styles.label, {
@@ -272,6 +276,7 @@ const RootInner = ({
           children: [jsx(Combobox$1, {
             ...comboboxProps,
             ref: reference,
+            "aria-describedby": ariaDescribedBy,
             "aria-invalid": hasError,
             "aria-required": required,
             autoSelect: false,
@@ -301,6 +306,7 @@ const RootInner = ({
       })
     }), jsx(InlineError, {
       className: styles.inlineError,
+      id: inlineErrorId,
       children: error
     })]
   }) : jsx(Combobox$1, {

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

@@ -191,15 +191,16 @@ export interface ComboboxBaseProps<Multiple extends boolean, FreeInput extends b
     clearButtonAriaLabel?: string;
     /**
      * Instance of an icon to be rendered at the end of the combobox input. When used in combination with `clearButtonAriaLabel`,
-     * it dissapears when the input is not empty
+     * it disappears when the input is not empty
      */
     endComboboxIcon?: React.ReactNode;
 }
-export type ComboboxTextArea = Pick<TextAreaProps, 'maxRows' | 'minRows' | 'maxLength'> & {
+export type ComboboxTextArea = Pick<TextAreaProps, 'maxRows' | 'minRows' | 'maxLength' | 'aria-describedby'> & {
     as: 'textarea';
 };
 export type ConditionalComboboxProps = ComboboxTextArea | {
     as: 'input';
+    'aria-describedby'?: string;
 };
 export type ComboboxProps<Multiple extends boolean, FreeInput extends boolean, T extends OptionValue> = ComboboxBaseProps<Multiple, FreeInput, T> & ConditionalComboboxProps;
 export interface ComboboxOptionProps extends Pick<SelectItemProps, 'hideOnClick' | 'onClick'> {

package/lib-esm/content-field/content-field.js

@@ -7,6 +7,7 @@ import clsx from 'clsx';
 import { forwardRef, createRef } from 'react';
 import { InlineError } from '../primitives/inline-error/inline-error.js';
 import { useFullTextTooltip } from '../utils/useFullTextTooltip.js';
+import { useUniqueId } from '../utils/useUniqueId.js';
 import styles from './content-field.module.js';
 import { messages } from './messages.js';
 
@@ -65,6 +66,7 @@ const ContentField = /*#__PURE__*/forwardRef(({
     ref: labelRef,
     textValue: title ?? hintText
   });
+  const inlineErrorId = useUniqueId('inline-error-');
   return jsxs("div", {
     className: styles.contentFieldWrapper,
     children: [jsxs("div", {
@@ -73,6 +75,7 @@ const ContentField = /*#__PURE__*/forwardRef(({
         ...wrapperProps,
         children: jsxs(Button, {
           ref: forwardedRef,
+          "aria-describedby": inlineErrorId,
           className: clsx(styles.contentButton, {
             [styles.hasSelection]: title,
             [styles.error]: !!error
@@ -111,6 +114,7 @@ const ContentField = /*#__PURE__*/forwardRef(({
       })]
     }), jsx(InlineError, {
       className: styles.inlineError,
+      id: inlineErrorId,
       children: error
     })]
   });

package/lib-esm/date-picker/date-picker.js

@@ -9,6 +9,7 @@ import { Calendar as Calendar$1 } from '../primitives/calendar/calendar.js';
 import '@internationalized/date';
 import { IconButton } from '../primitives/icon-button/icon-button.js';
 import { InlineError } from '../primitives/inline-error/inline-error.js';
+import { useUniqueId } from '../utils/useUniqueId.js';
 import { useLabelable } from '../util-components/labelable/useLabelable.js';
 import styles from './date-picker.module.js';
 
@@ -18,6 +19,12 @@ const XMarkIcon = label => () => jsx(XMark, {
   height: Size4,
   width: Size4
 });
+const handleSubmitKeyPress = (key, callback) => {
+  const submitKeys = [' ', 'Enter'];
+  if (submitKeys.includes(key)) {
+    callback();
+  }
+};
 const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     className,
@@ -29,7 +36,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     openCalendarDropdownAriaLabel,
     clearDatePickerAriaLabel,
     error,
-    defaultOpen,
+    defaultOpen = false,
     isDisabled,
     calendarAriaLabel,
     nextMonthAriaLabel,
@@ -43,7 +50,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       setInternalValue(value);
     }
   }, [value]);
-  const [isCalendarOpen, setIsCalendarOpen] = useState(defaultOpen || false);
+  const [isCalendarOpen, setIsCalendarOpen] = useState(defaultOpen);
   const firstDateSegmentRef = useRef(null);
   const calendarButtonRef = useRef(null);
   const shouldFocusStayInInput = useRef(false);
@@ -63,12 +70,6 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const onCalendarDateSelect = useCallback(() => {
     setIsCalendarOpen(false);
   }, []);
-  const onSubmitKeyPress = (key, callback) => {
-    const submitKeys = [' ', 'Enter'];
-    if (submitKeys.includes(key)) {
-      callback();
-    }
-  };
   const onInputWhiteSpaceClick = useCallback(() => {
     setIsCalendarOpen(true);
     shouldFocusStayInInput.current = true;
@@ -80,7 +81,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const onKeyUp = useCallback(({
     key
   }) => {
-    onSubmitKeyPress(key, () => {
+    handleSubmitKeyPress(key, () => {
       onClearInputButtonClicked();
       firstDateSegmentRef.current?.focus();
     });
@@ -88,7 +89,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const onKeyUpButton = useCallback(({
     key
   }) => {
-    onSubmitKeyPress(key, () => {
+    handleSubmitKeyPress(key, () => {
       setIsCalendarOpen(!isCalendarOpen);
       shouldFocusStayInInput.current = false;
     });
@@ -111,16 +112,22 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   }, []);
   const displayValue = value !== undefined ? value : internalValue;
   const Label = useLabelable(label, '');
+  const inlineErrorId = useUniqueId('inline-error-');
+  const ariaDescribedBy = clsx(rest['aria-describedby'], {
+    [inlineErrorId]: hasError
+  });
   return jsx(RadixPopover.Root, {
     onOpenChange: setIsCalendarOpen,
     open: isCalendarOpen,
     children: jsxs(DatePicker$1, {
       ...rest,
       ref: forwardedRef,
+      "aria-describedby": ariaDescribedBy,
       className: clsx(styles.datePicker, {
         [styles.disabled]: isDisabled
       }, className),
       isDisabled: isDisabled,
+      isInvalid: hasError,
       onChange: onDatePickerValueChanged,
       value: displayValue,
       children: [jsx(Label, {
@@ -205,6 +212,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
         })
       }), jsx(InlineError, {
         className: styles.inlineError,
+        id: inlineErrorId,
         children: error
       })]
     })

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

@@ -31,6 +31,9 @@ const BaseTextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const inlineErrorId = useUniqueId('inline-error-');
   const hasError = !!error && !disabled;
   const shouldMarkError = (!!error || invalid) && !disabled;
+  const ariaDescribedBy = clsx(rest['aria-describedby'], {
+    [inlineErrorId]: hasError
+  });
   const IconComponent = useMemo(() => icon && /*#__PURE__*/cloneElement(icon, {
     className: clsx(icon.props?.className, styles.iconShared)
   }), [icon]);
@@ -48,10 +51,8 @@ const BaseTextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
         hideLabel: hideLabel
       }), jsx("input", {
         ...rest,
-        ...(hasError && {
-          'aria-describedby': inlineErrorId
-        }),
         ref: forwardedRef,
+        "aria-describedby": ariaDescribedBy,
         "aria-invalid": shouldMarkError,
         "aria-required": required,
         className: clsx([styles.textInput], {

package/lib-esm/select/select.js

@@ -51,6 +51,10 @@ const Root = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     onOpenChange: handleOnChange
   };
   const Label = useLabelable(label, selectId);
+  const inlineErrorId = useUniqueId('inline-error-');
+  const ariaDescribedBy = clsx(triggerProps['aria-describedby'], {
+    [inlineErrorId]: hasError
+  });
   return jsxs("div", {
     className: clsx(styles.container, {
       [styles.disabled]: disabled
@@ -63,6 +67,7 @@ const Root = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       children: [jsxs(SelectPrimitive.Trigger, {
         ...triggerProps,
         ref: forwardedRef,
+        "aria-describedby": ariaDescribedBy,
         ...(hasError && {
           'aria-invalid': 'true'
         }),
@@ -81,6 +86,7 @@ const Root = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       }), children]
     }), jsx(InlineError, {
       className: styles.inlineError,
+      id: inlineErrorId,
       children: error
     })]
   });

package/lib-esm/text-area/text-area-autosize/types.d.ts

@@ -1,5 +1,5 @@
-import { type Ref, type TextareaHTMLAttributes } from 'react';
-export type TextareaAutosizeProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'children' | 'rows'> & {
+import { type Ref } from 'react';
+export type TextareaAutosizeProps = Omit<React.ComponentPropsWithRef<'textarea'>, 'children' | 'rows'> & {
     ref?: Ref<HTMLTextAreaElement>;
     /**
      * Maximum number of rows to display.

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

@@ -21,7 +21,11 @@ const TextArea = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   const textAreaId = useUniqueId('text-area-');
+  const inlineErrorId = useUniqueId('inline-error-');
   const hasError = !!error && !disabled;
+  const ariaDescribedBy = clsx(rest['aria-describedby'], {
+    [inlineErrorId]: hasError
+  });
   const Label = useLabelable(label, textAreaId);
   return jsxs("div", {
     className: clsx([styles.textAreaContainer], {
@@ -36,6 +40,7 @@ const TextArea = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     }), jsx(TextAreaAutosize, {
       ...rest,
       ref: forwardedRef,
+      "aria-describedby": ariaDescribedBy,
       "aria-invalid": hasError,
       "aria-required": required,
       disabled: disabled,
@@ -47,6 +52,7 @@ const TextArea = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       required: required
     }), jsx(InlineError, {
       className: styles.inlineError,
+      id: inlineErrorId,
       children: error
     })]
   });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "7.31.3",
+    "version": "7.32.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -63,7 +63,7 @@
         "react-stately": "^3.31.1",
         "tsx": "^4.16.5"
     },
-    "gitHead": "17003345864c877b3029e00f63664c66ca1fd3f1",
+    "gitHead": "a917668414b5d0e1dc46512bd579e9cc958b51ea",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {