@box/blueprint-web 7.24.0 → 7.24.1

package/lib-esm/combobox/combobox.js

@@ -11,9 +11,9 @@ import { InlineError } from '../primitives/inline-error/inline-error.js';
 import { TextArea } from '../text-area/text-area.js';
 import { useForkRef } from '../utils/useForkRef.js';
 import { useUniqueId } from '../utils/useUniqueId.js';
-import { VisuallyHidden } from '../visually-hidden/visually-hidden.js';
 import { ChipsGroup } from './chips-group.js';
 import styles from './combobox.module.js';
+import { useLabelable } from '../util-components/labelable/useLabelable.js';
 
 const getOptionValue = option => typeof option === 'string' ? option : option.value;
 const getOptionFromValue = (value, options) => options.find(option => typeof option === 'string' ? option === value : option.value === value);
@@ -236,15 +236,13 @@ const RootInner = ({
   const reference = useForkRef(inputRef, ref);
   const showChipsGroup = Array.isArray(selectedValue) && selectedValue.length > 0;
   const showComboboxCancelButton = clearButtonAriaLabel && (inputValue.length > 0 || (Array.isArray(selectedValue) ? selectedValue.length > 0 : !!selectedValue));
+  const Label = useLabelable(label, comboboxId);
   const inputComponent = isInput ? jsxs(Fragment, {
-    children: [jsx("label", {
+    children: [jsx(Label, {
       className: clsx(styles.label, {
         [styles.hiddenLabel]: hideLabel
       }),
-      htmlFor: comboboxId,
-      children: hideLabel ? jsx(VisuallyHidden, {
-        children: label
-      }) : label
+      hideLabel: hideLabel
     }), jsx(PopoverAnchor, {
       store: comboboxStore,
       children: jsxs("div", {

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

@@ -2,6 +2,7 @@
 import { type SelectItemProps } from '@ariakit/react-core/select/select-item';
 import { type SelectRendererProps } from '@ariakit/react-core/select/select-renderer';
 import { type TextAreaProps } from '../text-area/types';
+import { type Labelable } from '../util-components/labelable/types';
 export type OptionValue = {
     value: string;
     disabled?: boolean;
@@ -9,11 +10,7 @@ export type OptionValue = {
 export type SingleSelectComboboxValue<FreeInput, T> = FreeInput extends true ? string : T;
 export type MultiSelectComboboxValue<FreeInput, T> = FreeInput extends true ? string[] : T[];
 export type ComboboxValue<Multiple, FreeInput, T> = Multiple extends true ? MultiSelectComboboxValue<FreeInput, T> : SingleSelectComboboxValue<FreeInput, T>;
-export interface ComboboxBaseProps<Multiple extends boolean, FreeInput extends boolean, T extends OptionValue> {
-    /**
-     * The label for the combobox.
-     */
-    label: string;
+export interface ComboboxBaseProps<Multiple extends boolean, FreeInput extends boolean, T extends OptionValue> extends Labelable {
     /**
      * The list of values for the combobox items.
      */

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

@@ -4,12 +4,13 @@ import { Gray65, Size4 } from '@box/blueprint-web-assets/tokens/tokens';
 import * as RadixPopover from '@radix-ui/react-popover';
 import clsx from 'clsx';
 import { forwardRef, useState, useEffect, useRef, useCallback } from 'react';
-import { DatePicker as DatePicker$1, Label, Group, DateInput, DateSegment, Button } from 'react-aria-components';
+import { DatePicker as DatePicker$1, Group, DateInput, DateSegment, Button } from 'react-aria-components';
 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 styles from './date-picker.module.js';
+import { useLabelable } from '../util-components/labelable/useLabelable.js';
 
 const XMarkIcon = label => () => jsx(XMark, {
   "aria-label": label,
@@ -23,6 +24,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     onChange,
     value,
     defaultValue,
+    hideLabel = false,
     label,
     openCalendarDropdownAriaLabel,
     clearDatePickerAriaLabel,
@@ -108,6 +110,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     }
   }, []);
   const displayValue = value !== undefined ? value : internalValue;
+  const Label = useLabelable(label, '');
   return jsx(RadixPopover.Root, {
     onOpenChange: setIsCalendarOpen,
     open: isCalendarOpen,
@@ -124,7 +127,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
         className: clsx(styles.label, {
           [styles.disabled]: isDisabled
         }),
-        children: label
+        hideLabel: hideLabel
       }), jsx(RadixPopover.Anchor, {
         asChild: true,
         children: jsxs(Group, {

package/lib-esm/date-picker/types.d.ts

@@ -3,11 +3,14 @@ import { type DatePickerProps as RACDatePickerProps, type DateValue } from 'reac
 import { type CalendarBase } from '../primitives/calendar/types';
 import { type InputValueProps } from '../types/input-value-props';
 import { type Modify } from '../types/modify';
-interface DatePickerPropsBase extends Omit<RACDatePickerProps<DateValue>, 'children'> {
+import { type Labelable } from '../util-components/labelable/types';
+interface DatePickerPropsBase extends Omit<RACDatePickerProps<DateValue>, 'children'>, Labelable {
     /**
-     * Label displayed above date-picker input
+     * When `true`, label text is hidden.
+     *
+     * @default false
      */
-    label: string;
+    hideLabel?: boolean;
     /**
      * Aria label for button opening calendar in DatePicker
      */

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

@@ -2,9 +2,9 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { forwardRef, useMemo, cloneElement } from 'react';
 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';
+import { useLabelable } from '../../util-components/labelable/useLabelable.js';
 
 /**
  * This extends a default HTML &lt;input/&gt; and accepts the same props as well as some custom ones listed below.<br/>
@@ -34,20 +34,18 @@ const BaseTextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const IconComponent = useMemo(() => icon && /*#__PURE__*/cloneElement(icon, {
     className: clsx(icon.props?.className, styles.iconShared)
   }), [icon]);
+  const Label = useLabelable(label, inputId);
   return jsxs(Fragment, {
     children: [jsxs("div", {
       className: clsx([styles.textInputContainer], {
         [styles.disabled]: disabled,
         [styles.error]: shouldMarkError
       }, className),
-      children: [jsx("label", {
+      children: [jsx(Label, {
         className: clsx([styles.label], {
           [styles.hidden]: hideLabel
         }),
-        htmlFor: inputId,
-        children: hideLabel ? jsx(VisuallyHidden, {
-          children: label
-        }) : label
+        hideLabel: hideLabel
       }), jsx("input", {
         ...rest,
         ...(hasError && {

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-export type BaseTextInputProps = React.ComponentPropsWithRef<'input'> & {
-    /** The label for text input */
-    label: string;
+import { type Labelable } from '../../util-components/labelable/types';
+export type BaseTextInputProps = React.ComponentPropsWithRef<'input'> & Labelable & {
     /** Input type, defaults to 'text' */
     type?: 'text' | 'password';
     /** When true label text is hidden */

package/lib-esm/select/select.js

@@ -1,6 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Caret, Checkmark } from '@box/blueprint-web-assets/icons/Fill';
-import { Label } from '@radix-ui/react-label';
 import * as ScrollArea from '@radix-ui/react-scroll-area';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import clsx from 'clsx';
@@ -8,6 +7,7 @@ import { forwardRef, useCallback } from 'react';
 import { InlineError } from '../primitives/inline-error/inline-error.js';
 import { useUniqueId } from '../utils/useUniqueId.js';
 import styles from './select.module.js';
+import { useLabelable } from '../util-components/labelable/useLabelable.js';
 
 const Root = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
@@ -50,21 +50,19 @@ const Root = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     onValueChange,
     onOpenChange: handleOnChange
   };
+  const Label = useLabelable(label, selectId);
   return jsxs("div", {
     className: clsx(styles.container, {
       [styles.disabled]: disabled
     }, className),
     children: [jsx(Label, {
       className: styles.label,
-      hidden: hideLabel,
-      htmlFor: selectId,
-      children: label
+      hideLabel: hideLabel
     }), jsxs(SelectPrimitive.Root, {
       ...selectProps,
       children: [jsxs(SelectPrimitive.Trigger, {
         ...triggerProps,
         ref: forwardedRef,
-        "aria-label": label,
         ...(hasError && {
           'aria-invalid': 'true'
         }),

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

@@ -1,11 +1,8 @@
 import { type SelectItemProps as RadixItemProps, type SelectContentProps as RadixSelectContentProps, type SelectProps as RadixSelectProps, type SelectTriggerProps as RadixSelectTriggerProps } from '@radix-ui/react-select';
 import { type ReactElement } from 'react';
 import { type Modify } from '../types/modify';
-export interface ExtraProps {
-    /**
-     * The label for the select.
-     */
-    label: string;
+import { type Labelable } from '../util-components/labelable/types';
+export interface ExtraProps extends Labelable {
     /**
      * The placeholder value displayed within the select trigger button when no values has been selected yet.
      */

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

@@ -1,8 +1,8 @@
-import { type HTMLAttributes } from 'react';
+import { type HTMLAttributes, type LabelHTMLAttributes } from 'react';
 import { type StyledText } from '../utils/commonTypes';
 type TypographyVariant = 'titleMondo' | 'titleXLarge' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'subtitle' | 'bodyLargeBold' | 'bodyLarge' | 'bodyDefaultBold' | 'bodyDefaultSemibold' | 'bodyDefault' | 'caption' | 'labelBold' | 'label';
 type TypographyColors = 'textOnLightDefault' | 'textOnLightSecondary' | 'textOnLightLink' | 'textOnDarkDefault';
-type Element = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'legend';
+type Element = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'legend' | 'label';
 interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
     as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
@@ -15,8 +15,11 @@ interface SpanProps extends HTMLAttributes<HTMLSpanElement> {
 interface LegendProps extends HTMLAttributes<HTMLLegendElement> {
     as: 'legend';
 }
+interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    as: 'label';
+}
 /** Supported HTML elements for text */
-export type ElementTypes = HeadingProps | ParagraphProps | LegendProps | SpanProps;
+export type ElementTypes = HeadingProps | ParagraphProps | LegendProps | SpanProps | LabelProps;
 export type TextProps = {
     /** The HTML element type which will render */
     as: Element;

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

@@ -1,12 +1,10 @@
 /// <reference types="react" />
-export declare const TextArea: import("react").ForwardRefExoticComponent<(Omit<Omit<import("./text-area-autosize/types").TextareaAutosizeProps, "hasError"> & {
-    label: string;
+export declare const TextArea: import("react").ForwardRefExoticComponent<(Omit<import("../util-components/labelable/types").Labelable & Omit<import("./text-area-autosize/types").TextareaAutosizeProps, "hasError"> & {
     hideLabel?: boolean | undefined;
     disabled?: boolean | undefined;
     required?: boolean | undefined;
     error?: import("react").ReactNode;
-} & Required<Pick<import("./types").Loading, keyof import("./types").Loading>> & Omit<import("./types").Loading, keyof import("./types").Loading>, "ref"> | Omit<Omit<import("./text-area-autosize/types").TextareaAutosizeProps, "hasError"> & {
-    label: string;
+} & Required<Pick<import("./types").Loading, keyof import("./types").Loading>> & Omit<import("./types").Loading, keyof import("./types").Loading>, "ref"> | Omit<import("../util-components/labelable/types").Labelable & Omit<import("./text-area-autosize/types").TextareaAutosizeProps, "hasError"> & {
     hideLabel?: boolean | undefined;
     disabled?: boolean | undefined;
     required?: boolean | undefined;

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

@@ -3,9 +3,9 @@ import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { InlineError } from '../primitives/inline-error/inline-error.js';
 import { useUniqueId } from '../utils/useUniqueId.js';
-import { VisuallyHidden } from '../visually-hidden/visually-hidden.js';
 import { TextAreaAutosize } from './text-area-autosize/text-area-autosize.js';
 import styles from './text-area.module.js';
+import { useLabelable } from '../util-components/labelable/useLabelable.js';
 
 const TextArea = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
@@ -22,19 +22,17 @@ const TextArea = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   } = props;
   const textAreaId = useUniqueId('text-area-');
   const hasError = !!error && !disabled;
+  const Label = useLabelable(label, textAreaId);
   return jsxs("div", {
     className: clsx([styles.textAreaContainer], {
       [styles.disabled]: disabled,
       [styles.error]: hasError
     }, className),
-    children: [jsx("label", {
+    children: [jsx(Label, {
       className: clsx([styles.label], {
         [styles.hidden]: hideLabel
       }),
-      htmlFor: textAreaId,
-      children: hideLabel ? jsx(VisuallyHidden, {
-        children: label
-      }) : label
+      hideLabel: hideLabel
     }), jsx(TextAreaAutosize, {
       ...rest,
       ref: forwardedRef,

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

@@ -1,15 +1,14 @@
 /// <reference types="react" />
 import { type RequireAllOrNone } from 'type-fest';
 import { type TextareaAutosizeProps } from './text-area-autosize/types';
+import { type Labelable } from '../util-components/labelable/types';
 export interface Loading {
     /** When `true` TextArea is rendered with loading indicator. When this is true `loadingAriaLabel` must also be provided. */
     loading?: boolean;
     /** The aria-label for the loading indicator. */
     loadingAriaLabel?: string;
 }
-export type TextAreaProps = Omit<TextareaAutosizeProps, 'hasError'> & {
-    /** The label for text area */
-    label: string;
+export type TextAreaProps = Labelable & Omit<TextareaAutosizeProps, 'hasError'> & {
     /** When true label text is hidden */
     hideLabel?: boolean;
     /** When true prevents user interaction with text area */

package/lib-esm/util-components/labelable/index.d.ts

@@ -0,0 +1 @@
+export * from './useLabelable';

package/lib-esm/util-components/labelable/types.d.ts

@@ -0,0 +1,15 @@
+import type React from 'react';
+export type RenderProp<P = React.HTMLAttributes<never> & {
+    ref?: React.Ref<never>;
+}> = (props: P) => React.ReactElement;
+type HtmlForable = Pick<React.LabelHTMLAttributes<HTMLLabelElement>, 'htmlFor'>;
+export interface Labelable {
+    label: string | React.ReactElement<HtmlForable> | RenderProp<HtmlForable>;
+}
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    htmlFor: string;
+    hideLabel?: boolean;
+    ref: React.ForwardedRef<HTMLLabelElement>;
+    elementType?: 'span' | 'label';
+}
+export {};

package/lib-esm/util-components/labelable/useLabelable.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type Labelable, type LabelProps } from './types';
+export declare const useLabelable: (label: Labelable['label'], inputId: string) => import("react").ForwardRefExoticComponent<Omit<Omit<LabelProps, "htmlFor">, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;

package/lib-esm/util-components/labelable/useLabelable.js

@@ -0,0 +1,69 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo, forwardRef } from 'react';
+import { Role } from '@ariakit/react';
+import { useContextProps, LabelContext } from 'react-aria-components';
+import { VisuallyHidden } from '../../visually-hidden/visually-hidden.js';
+
+const useLabelable = (label, inputId) => {
+  return useMemo(() => {
+    const Label = /*#__PURE__*/forwardRef((props, ref) => {
+      // If this component is rendered within LabelContext from RAC, we can have props like htmlFor, id, elementType.
+      [props, ref] = useContextProps(props, ref, LabelContext);
+      const {
+        hideLabel,
+        elementType = 'label',
+        ...rest
+      } = props;
+      const labelProps = {
+        ...rest,
+        htmlFor: inputId,
+        ref
+      };
+      if (!label) {
+        return null;
+      }
+      if (typeof label === 'string') {
+        if (elementType === 'label') {
+          return hideLabel ? jsx(VisuallyHidden, {
+            render: jsx(Role.label, {
+              ...labelProps,
+              children: label
+            })
+          }) : jsx(Role.label, {
+            ...labelProps,
+            children: label
+          });
+        }
+        return hideLabel ? jsx(VisuallyHidden, {
+          render: jsx(Role.span, {
+            ...rest,
+            ref: ref,
+            children: label
+          })
+        }) : jsx(Role.span, {
+          ...rest,
+          ref: ref,
+          children: label
+        });
+      }
+      return elementType === 'label' ? jsx(Role.label, {
+        ...labelProps,
+        // @ts-expect-error: Otherwise we have a conflict of HTMLAttributes and our Blueprint components props.
+        render: hideLabel ? jsx(VisuallyHidden, {
+          render: label
+        }) : label
+      }) : jsx(Role.span, {
+        ...rest,
+        ref: ref,
+        // @ts-expect-error: Otherwise we have a conflict of HTMLAttributes and our Blueprint components props.
+        render: hideLabel ? jsx(VisuallyHidden, {
+          render: label
+        }) : label
+      });
+    });
+    Label.displayName = 'Label';
+    return Label;
+  }, [label, inputId]);
+};
+
+export { useLabelable };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "7.24.0",
+    "version": "7.24.1",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -24,7 +24,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.5",
         "@ariakit/react-core": "0.4.5",
-        "@box/blueprint-web-assets": "^4.21.4",
+        "@box/blueprint-web-assets": "^4.21.5",
         "@internationalized/date": "^3.5.4",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -32,7 +32,6 @@
         "@radix-ui/react-context-menu": "2.1.5",
         "@radix-ui/react-dialog": "1.0.5",
         "@radix-ui/react-dropdown-menu": "2.0.6",
-        "@radix-ui/react-label": "2.0.2",
         "@radix-ui/react-popover": "1.0.7",
         "@radix-ui/react-radio-group": "1.1.3",
         "@radix-ui/react-scroll-area": "1.0.5",
@@ -55,7 +54,7 @@
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^0.6.0",
+        "@box/storybook-utils": "^0.6.1",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
         "react": "^18.3.0",
@@ -63,7 +62,7 @@
         "react-stately": "^3.31.1",
         "tsx": "^4.16.5"
     },
-    "gitHead": "c45d13964d3b60b860c3606a0eb55fb86bc2e057",
+    "gitHead": "bb2a831c3e3b11c1af207a693263069f26f7076a",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {