@box/blueprint-web 6.45.3 → 7.0.1

package/lib-esm/accordion/accordion.d.ts

@@ -5,9 +5,9 @@ import { type AccordionItemProps, type AccordionProps } from './types';
  *
  * @example
  * <Accordion>
- *  <Accordion.Item id="1" value="item-1" title="Item 1"><div>1st item</div></Accordion.Item>
- *  <Accordion.Item id="2" value="item-2" title="Item 2"><div>2nd item</div></Accordion.Item>
- *  <Accordion.Item id="3" value="item-3" title="Item 3"><div>3rd item </div></Accordion.Item>
+ *  <Accordion.Item value="item-1" title="Item 1"><div>1st item</div></Accordion.Item>
+ *  <Accordion.Item value="item-2" title="Item 2"><div>2nd item</div></Accordion.Item>
+ *  <Accordion.Item value="item-3" title="Item 3"><div>3rd item </div></Accordion.Item>
  * </Accordion>
  */
 export declare const Root: (props: AccordionProps) => JSX.Element;

package/lib-esm/accordion/accordion.js

@@ -13,9 +13,9 @@ import styles from './accordion.module.js';
  *
  * @example
  * <Accordion>
- *  <Accordion.Item id="1" value="item-1" title="Item 1"><div>1st item</div></Accordion.Item>
- *  <Accordion.Item id="2" value="item-2" title="Item 2"><div>2nd item</div></Accordion.Item>
- *  <Accordion.Item id="3" value="item-3" title="Item 3"><div>3rd item </div></Accordion.Item>
+ *  <Accordion.Item value="item-1" title="Item 1"><div>1st item</div></Accordion.Item>
+ *  <Accordion.Item value="item-2" title="Item 2"><div>2nd item</div></Accordion.Item>
+ *  <Accordion.Item value="item-3" title="Item 3"><div>3rd item </div></Accordion.Item>
  * </Accordion>
  */
 const Root = props => {
@@ -27,7 +27,6 @@ const Item = props => {
   const {
     loading,
     loadingAriaLabel,
-    id,
     children,
     className,
     ...rest

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

@@ -8,11 +8,6 @@ interface Loading {
     loadingAriaLabel: string;
 }
 export type AccordionBaseItem = {
-    /**
-     * @deprecated
-     * Content of the accordion item that is displayed when the section is expanded
-     */
-    id?: string;
     /**
      * Content of the accordion item that is displayed when the section is expanded
      */

package/lib-esm/combobox/chips-group.js

@@ -72,7 +72,7 @@ const ChipsGroup = props => {
             // it is not the case for the Chips Group as per the a11y pattern. In this case, the error is false positive.
             __checkInteractivity: false,
             "aria-hidden": true,
-            content: childElement.props.label,
+            content: childElement.props.tooltip ?? childElement.props.label,
             children: /*#__PURE__*/React__default.cloneElement(childElement, {
               // Register the InputChip reference
               ref: node => {

package/lib-esm/combobox/combobox.js

@@ -16,6 +16,14 @@ import styles from './combobox.module.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);
+const getDisplayValueFromOptionValue = (optionValue, options, displayValue) => {
+  const option = getOptionFromValue(optionValue, options);
+  return displayValue && option ? displayValue(option) : optionValue;
+};
+const getTooltipValueFromOptionValue = (optionValue, options, displayTooltip) => {
+  const option = getOptionFromValue(optionValue, options);
+  return displayTooltip && option ? displayTooltip(option) : undefined;
+};
 const RootInner = ({
   as = 'input',
   ...props
@@ -43,6 +51,7 @@ const RootInner = ({
     onValueChange,
     displayValue,
     displayAvatar,
+    displayTooltip,
     renderOption,
     options,
     filterFn,
@@ -129,12 +138,6 @@ const RootInner = ({
     }
     return visibleOptions.filter(option => !selectedValue.includes(getOptionValue(option)));
   }, [filterFn, options, hideSelectedOptions, inputValue, selectedValue]);
-  const getDisplayValueFromOptionValue = useCallback(optionValue => {
-    const option = getOptionFromValue(optionValue, options);
-    return displayValue && option ? displayValue(option) : optionValue;
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [displayValue]);
   const getDisplayAvatarFromOptionValue = useCallback(optionValue => {
     const option = getOptionFromValue(optionValue, options);
     return displayAvatar && option ? displayAvatar(option) : undefined;
@@ -161,11 +164,13 @@ const RootInner = ({
     if (Array.isArray(selectedValueMemoized)) {
       setInputValue('');
     } else if (selectedValueMemoized) {
-      setInputValue(getDisplayValueFromOptionValue(selectedValueMemoized));
+      setInputValue(getDisplayValueFromOptionValue(selectedValueMemoized, options, displayValue));
       // Also focus input for single-select variant
       focusInput();
     }
-  }, [selectedValueMemoized, getDisplayValueFromOptionValue, setInputValue, focusInput]);
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [selectedValueMemoized, setInputValue, focusInput]);
   const handleKeyDown = useCallback(event => {
     // Close menu
     if (event.key === 'Enter' || event.key === 'Tab') {
@@ -190,8 +195,10 @@ const RootInner = ({
     if (!clearOnBlur || isOpen) {
       return;
     }
-    setInputValue(Array.isArray(selectedValue) ? '' : getDisplayValueFromOptionValue(selectedValue));
-  }, [clearOnBlur, getDisplayValueFromOptionValue, isOpen, selectedValue, setInputValue]);
+    setInputValue(Array.isArray(selectedValue) ? '' : getDisplayValueFromOptionValue(selectedValue, options, displayValue));
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [clearOnBlur, isOpen, selectedValue, setInputValue]);
   const removeInputChip = id => {
     // For multi-select variant only
     selectStore.setValue(prev => {
@@ -230,8 +237,9 @@ const RootInner = ({
         children: [showChipsGroup && jsx(ChipsGroup, {
           children: selectedValue.map(selected => jsx(InputChip, {
             avatar: getDisplayAvatarFromOptionValue(selected),
-            label: getDisplayValueFromOptionValue(selected),
-            onDelete: () => removeInputChip(selected)
+            label: getDisplayValueFromOptionValue(selected, options, displayValue),
+            onDelete: () => removeInputChip(selected),
+            tooltip: getTooltipValueFromOptionValue(selected, options, displayTooltip)
           }, selected))
         }), jsx("div", {
           className: styles.textInputWrapper,

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

@@ -86,6 +86,10 @@ export interface ComboboxBaseProps<Multiple extends boolean, FreeInput extends b
      * If not provided `displayValue()` is used to render select option item with a checkmark.
      */
     displayAvatar?: (option: T) => React.ReactElement | undefined;
+    /**
+     * Return a string representation of a tooltip displayed on hover of an Input Chip in Combobox.
+     */
+    displayTooltip?: (option: T) => string;
     /**
      * Return a JSX representations of an option displayed in Combobox dropdown
      * If not provided `displayValue()` is used to render select option item with a checkmark.

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

@@ -1,5 +1,3 @@
 /// <reference types="react" />
-import { type DateValue } from 'react-aria-components';
-export declare const DatePicker: import("react").ForwardRefExoticComponent<Omit<import("./types").DatePickerPropsBase, "onChange"> & {
-    onChange: (value: DateValue | null) => void;
-} & import("../primitives/calendar/types").CalendarBase & import("react").RefAttributes<HTMLDivElement>>;
+import { type DatePickerProps } from './types';
+export declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -3,7 +3,7 @@ import { Calendar, XMark } from '@box/blueprint-web-assets/icons/Fill';
 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, useRef, useCallback } from 'react';
+import { forwardRef, useState, useEffect, useRef, useCallback } from 'react';
 import { DatePicker as DatePicker$1, Label, Group, DateInput, DateSegment, Button } from 'react-aria-components';
 import { Calendar as Calendar$1 } from '../primitives/calendar/calendar.js';
 import '@internationalized/date';
@@ -22,6 +22,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     className,
     onChange,
     value,
+    defaultValue,
     label,
     openCalendarDropdownAriaLabel,
     clearDatePickerAriaLabel,
@@ -34,24 +35,32 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     previousMonthAriaLabel,
     ...rest
   } = props;
-  const [selectedDate, setSelectedDate] = useState(value);
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  useEffect(() => {
+    if (value !== undefined) {
+      setInternalValue(value);
+    }
+  }, [value]);
   const [isCalendarOpen, setIsCalendarOpen] = useState(defaultOpen || false);
   const firstDateSegmentRef = useRef(null);
   const calendarButtonRef = useRef(null);
   const shouldFocusStayInInput = useRef(false);
   const onDatePickerValueChanged = useCallback(newValue => {
-    setSelectedDate(newValue);
     onChange?.(newValue);
-  }, [setSelectedDate, onChange]);
+    if (value === undefined) {
+      setInternalValue(newValue);
+    }
+  }, [onChange, value]);
   const onClearInputButtonClicked = useCallback(() => {
-    setSelectedDate(null);
     onChange?.(null);
+    if (value === undefined) {
+      setInternalValue(null);
+    }
     firstDateSegmentRef.current?.focus();
-  }, [onChange]);
-  const onCalendarDateSelect = useCallback(e => {
-    onDatePickerValueChanged(e);
+  }, [onChange, value]);
+  const onCalendarDateSelect = useCallback(() => {
     setIsCalendarOpen(false);
-  }, [onDatePickerValueChanged]);
+  }, []);
   const onSubmitKeyPress = (key, callback) => {
     const submitKeys = [' ', 'Enter'];
     if (submitKeys.includes(key)) {
@@ -86,7 +95,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     shouldFocusStayInInput.current = false;
   }, []);
   const hasError = !!error && !isDisabled;
-  const calendarKey = `${selectedDate?.day}/${selectedDate?.month}/${selectedDate?.year}${selectedDate?.era}`;
+  const calendarKey = `${internalValue?.day}/${internalValue?.month}/${internalValue?.year}${internalValue?.era}`;
   const onOpenAutoFocus = useCallback(e => {
     if (shouldFocusStayInInput.current) {
       e.preventDefault();
@@ -98,6 +107,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       e.preventDefault();
     }
   }, []);
+  const displayValue = value !== undefined ? value : internalValue;
   return jsx(RadixPopover.Root, {
     onOpenChange: setIsCalendarOpen,
     open: isCalendarOpen,
@@ -109,7 +119,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       }, className),
       isDisabled: isDisabled,
       onChange: onDatePickerValueChanged,
-      value: selectedDate,
+      value: displayValue,
       children: [jsx(Label, {
         className: clsx(styles.label, {
           [styles.disabled]: isDisabled
@@ -137,7 +147,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
                 segment: segment
               })
             })
-          }), selectedDate && jsx(IconButton, {
+          }), displayValue && jsx(IconButton, {
             "aria-label": clearDatePickerAriaLabel,
             className: clsx(styles.button, styles.clear),
             disabled: isDisabled,
@@ -187,7 +197,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
             nextMonthAriaLabel: nextMonthAriaLabel,
             onChange: onCalendarDateSelect,
             previousMonthAriaLabel: previousMonthAriaLabel,
-            value: selectedDate
+            value: displayValue
           }, calendarKey)
         })
       }), jsx(InlineError, {

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

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import { type DatePickerProps as RACDatePickerProps, type DateValue } from 'react-aria-components';
 import { type CalendarBase } from '../primitives/calendar/types';
+import { type InputValueProps } from '../types/input-value-props';
 import { type Modify } from '../types/modify';
-export interface DatePickerPropsBase extends Omit<RACDatePickerProps<DateValue>, 'children'> {
+interface DatePickerPropsBase extends Omit<RACDatePickerProps<DateValue>, 'children'> {
     /**
      * Label displayed above date-picker input
      */
@@ -28,9 +29,5 @@ export interface DatePickerPropsBase extends Omit<RACDatePickerProps<DateValue>,
      */
     portalElement?: HTMLElement;
 }
-export type DatePickerProps = Modify<DatePickerPropsBase, {
-    /**
-     * Callback invoked once DatePicker value changes
-     */
-    onChange: (value: DateValue | null) => void;
-}> & CalendarBase;
+export type DatePickerProps = Modify<DatePickerPropsBase, InputValueProps<DateValue>> & CalendarBase;
+export {};

package/lib-esm/index.css

@@ -3581,7 +3581,7 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   border-block-end:var(--border-1) solid var(--gray-10);
 }
 
-.bp_modal_module_overlay--925a9{
+.bp_modal_module_overlay--aef1e{
   background-color:var(--black-opacity-80);
   bottom:0;
   display:grid;
@@ -3592,94 +3592,106 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   top:0;
   z-index:370;
 }
-@media (min-width: 460px){
-  .bp_modal_module_overlay--925a9{
+@media (width > 459px){
+  .bp_modal_module_overlay--aef1e{
     place-items:center;
   }
 }
 
-.bp_modal_module_content--925a9{
-  animation:bp_modal_module_popup_bounce_in--925a9 var(--animation-duration-3);
+.bp_modal_module_content--aef1e{
+  animation:bp_modal_module_popup_bounce_in--aef1e var(--animation-duration-3);
   background-color:var(--gray-white);
   display:flex;
   flex-direction:column;
   height:100vh;
-  max-width:48rem;
   overflow:hidden;
   position:relative;
 }
-@media (min-width: 460px){
-  .bp_modal_module_content--925a9{
+@media (width > 459px){
+  .bp_modal_module_content--aef1e{
     border-radius:var(--radius-4);
     height:auto;
     margin:0 var(--space-8);
     max-height:calc(100vh - var(--space-8)*2);
+    min-width:calc(460px - var(--space-8)*2);
+  }
+  .bp_modal_module_content--aef1e.bp_modal_module_smallSizeModal--aef1e{
+    max-width:460px;
+  }
+  .bp_modal_module_content--aef1e.bp_modal_module_mediumSizeModal--aef1e{
+    max-width:540px;
+  }
+  .bp_modal_module_content--aef1e.bp_modal_module_largeSizeModal--aef1e{
+    max-width:620px;
+  }
+  .bp_modal_module_content--aef1e.bp_modal_module_xlargeSizeModal--aef1e{
+    max-width:768px;
   }
 }
 
-.bp_modal_module_content--925a9 .bp_modal_module_close--925a9{
+.bp_modal_module_content--aef1e .bp_modal_module_close--aef1e{
   color:var(--gray-65);
   position:absolute;
   right:var(--space-4);
   top:var(--space-4);
 }
 
-.bp_modal_module_close--925a9.bp_modal_module_onColor--925a9{
+.bp_modal_module_close--aef1e.bp_modal_module_onColor--aef1e{
   background-color:var(--surface-cta-surface-tertiary);
 }
-.bp_modal_module_close--925a9.bp_modal_module_onColor--925a9:hover{
+.bp_modal_module_close--aef1e.bp_modal_module_onColor--aef1e:hover{
   background-color:var(--surface-cta-surface-icon-hover);
 }
-.bp_modal_module_close--925a9.bp_modal_module_onColor--925a9:active{
+.bp_modal_module_close--aef1e.bp_modal_module_onColor--aef1e:active{
   background-color:var(--surface-cta-surface-icon-pressed);
 }
 
-.bp_modal_module_content--925a9 .bp_modal_module_backButton--925a9{
+.bp_modal_module_content--aef1e .bp_modal_module_backButton--aef1e{
   color:var(--gray-65);
   margin-block-start:var(--space-4);
   margin-inline-start:var(--space-4);
 }
-@media (min-width: 460px){
-  .bp_modal_module_content--925a9 .bp_modal_module_backButton--925a9{
+@media (width > 459px){
+  .bp_modal_module_content--aef1e .bp_modal_module_backButton--aef1e{
     height:var(--size-10);
     width:var(--size-10);
   }
 }
 
-.bp_modal_module_modalHeader--925a9{
+.bp_modal_module_modalHeader--aef1e{
   display:flex;
 }
 
-.bp_modal_module_modalTitle--925a9{
+.bp_modal_module_modalTitle--aef1e{
   display:flex;
   flex-direction:column;
   gap:var(--space-2);
   padding:var(--space-5) var(--space-12) var(--space-5) var(--space-4);
 }
-@media (min-width: 460px){
-  .bp_modal_module_modalTitle--925a9{
+@media (width > 459px){
+  .bp_modal_module_modalTitle--aef1e{
     padding:var(--space-6) var(--space-16) var(--space-6) var(--space-6);
   }
 }
 
-.bp_modal_module_body--925a9{
+.bp_modal_module_body--aef1e{
   padding:var(--space-6) var(--space-4) var(--space-4);
 }
-@media (min-width: 460px){
-  .bp_modal_module_body--925a9{
+@media (width > 459px){
+  .bp_modal_module_body--aef1e{
     padding:var(--space-6) var(--space-6) var(--space-4);
   }
 }
 
-.bp_modal_module_scrollableContainer--925a9{
+.bp_modal_module_scrollableContainer--aef1e{
   flex-grow:1;
   overflow-y:auto;
 }
 
-.bp_modal_module_headerDividerLine--925a9{
+.bp_modal_module_headerDividerLine--aef1e{
   position:relative;
 }
-.bp_modal_module_headerDividerLine--925a9::after{
+.bp_modal_module_headerDividerLine--aef1e::after{
   border-bottom:var(--border-1) solid var(--border-divider-border);
   bottom:0;
   content:"";
@@ -3687,17 +3699,17 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   position:absolute;
   right:var(--space-4);
 }
-@media (min-width: 460px){
-  .bp_modal_module_headerDividerLine--925a9::after{
+@media (width > 459px){
+  .bp_modal_module_headerDividerLine--aef1e::after{
     left:var(--space-6);
     right:var(--space-6);
   }
 }
 
-.bp_modal_module_footerDividerLine--925a9{
+.bp_modal_module_footerDividerLine--aef1e{
   position:relative;
 }
-.bp_modal_module_footerDividerLine--925a9::before{
+.bp_modal_module_footerDividerLine--aef1e::before{
   border-bottom:var(--border-1) solid var(--border-divider-border);
   content:"";
   left:var(--space-4);
@@ -3705,29 +3717,29 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   right:var(--space-4);
   top:0;
 }
-@media (min-width: 460px){
-  .bp_modal_module_footerDividerLine--925a9::before{
+@media (width > 459px){
+  .bp_modal_module_footerDividerLine--aef1e::before{
     left:var(--space-6);
     right:var(--space-6);
   }
 }
 
-.bp_modal_module_footer--925a9{
+.bp_modal_module_footer--aef1e{
   display:flex;
   justify-content:flex-end;
   padding:var(--space-4);
 }
-@media (min-width: 460px){
-  .bp_modal_module_footer--925a9{
+@media (width > 459px){
+  .bp_modal_module_footer--aef1e{
     padding:var(--space-6);
   }
 }
 
-.bp_modal_module_footerButton--925a9 + .bp_modal_module_footerButton--925a9{
+.bp_modal_module_footerButton--aef1e + .bp_modal_module_footerButton--aef1e{
   margin-inline-start:var(--space-3);
 }
 
-@keyframes bp_modal_module_popup_bounce_in--925a9{
+@keyframes bp_modal_module_popup_bounce_in--aef1e{
   0%{
     transform:scale3d(.1, .1, 1);
   }

package/lib-esm/index.js

@@ -56,7 +56,7 @@ export { getSupplementaryFontFacesConfig } from './primitives/supplementary-font
 export { Tabs } from './primitives/tabs/index.js';
 export { Radio } from './radio-group/index.js';
 export { SearchInput } from './search-input/index.js';
-export { Select } from './select/select.js';
+export { SELECT_EMPTY_VALUE, Select } from './select/select.js';
 export { SidePanel } from './side-panel/side-panel.js';
 export { Slider } from './slider/slider.js';
 export { Status } from './status/status.js';

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

@@ -4,6 +4,10 @@ export interface InputChipProps extends HTMLAttributes<HTMLElement> {
      * Text content inside the Chip.
      * */
     label: string;
+    /**
+     * Custom tooltip for the Chip.
+     */
+    tooltip?: string;
     /**
      * The Avatar element to display.
      */

package/lib-esm/modal/modal-close.js

@@ -20,7 +20,7 @@ const ModalClose = /*#__PURE__*/forwardRef(({
 }, forwardedRef) => {
   // Change IconButton size for Mobile (only when IconButton size is large)
   // TODO: change to media query tokens
-  const breakpoint = 460;
+  const breakpoint = 459;
   const isMobile = useMedia(`(max-width: ${breakpoint}px)`);
   let iconButtonSize = size;
   if (size === 'large' && isMobile) {

package/lib-esm/modal/modal-content.d.ts

@@ -3,4 +3,6 @@ import * as RadixDialog from '@radix-ui/react-dialog';
 /**
  * Contains content to be rendered in the open modal.
  */
-export declare const ModalContent: import("react").ForwardRefExoticComponent<RadixDialog.DialogContentProps & Pick<RadixDialog.DialogPortalProps, "container"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ModalContent: import("react").ForwardRefExoticComponent<RadixDialog.DialogContentProps & Pick<RadixDialog.DialogPortalProps, "container"> & {
+    size: "small" | "medium" | "large" | "xlarge";
+} & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -12,6 +12,7 @@ const ModalContent = /*#__PURE__*/forwardRef(({
   children,
   container,
   className,
+  size,
   ...props
 }, forwardedRef) => jsx(RadixDialog.Portal, {
   container: container,
@@ -21,7 +22,7 @@ const ModalContent = /*#__PURE__*/forwardRef(({
       ...props,
       ref: forwardedRef,
       asChild: asChild,
-      className: clsx(styles.content, className),
+      className: clsx(styles.content, styles[`${size}SizeModal`], className),
       children: children
     })
   })

package/lib-esm/modal/modal.d.ts

@@ -10,7 +10,7 @@ import { type ModalProps } from './types';
             <Modal.Trigger>
                 <button type="button">Trigger</button>
             </Modal.Trigger>
-            <Modal.Content>
+            <Modal.Content size="small">
                 <Modal.Header>My Title</Modal.Header>
                 <Modal.ScrollableContainer>
                     <Modal.Body>Content of my modal</Modal.Body>
@@ -26,7 +26,9 @@ import { type ModalProps } from './types';
 export declare const Modal: (({ children, modal, ...props }: ModalProps) => JSX.Element) & {
     Body: import("react").ForwardRefExoticComponent<import("./types").ModalBodyProps & import("react").RefAttributes<HTMLDivElement>>;
     Close: import("react").ForwardRefExoticComponent<import("./types").ModalCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
-    Content: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogContentProps & Pick<import("@radix-ui/react-dialog").DialogPortalProps, "container"> & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogContentProps & Pick<import("@radix-ui/react-dialog").DialogPortalProps, "container"> & {
+        size: "small" | "large" | "medium" | "xlarge";
+    } & import("react").RefAttributes<HTMLDivElement>>;
     Footer: import("react").ForwardRefExoticComponent<import("./types").ModalFooterProps & import("react").RefAttributes<HTMLDivElement>> & {
         PrimaryButton: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/base-button").BaseButtonInterface & Required<Pick<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
             children?: string | string[] | undefined;

package/lib-esm/modal/modal.js

@@ -31,7 +31,7 @@ const Root = ({
             <Modal.Trigger>
                 <button type="button">Trigger</button>
             </Modal.Trigger>
-            <Modal.Content>
+            <Modal.Content size="small">
                 <Modal.Header>My Title</Modal.Header>
                 <Modal.ScrollableContainer>
                     <Modal.Body>Content of my modal</Modal.Body>

package/lib-esm/modal/modal.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"overlay":"bp_modal_module_overlay--925a9","content":"bp_modal_module_content--925a9","popup_bounce_in":"bp_modal_module_popup_bounce_in--925a9","close":"bp_modal_module_close--925a9","onColor":"bp_modal_module_onColor--925a9","backButton":"bp_modal_module_backButton--925a9","modalHeader":"bp_modal_module_modalHeader--925a9","modalTitle":"bp_modal_module_modalTitle--925a9","body":"bp_modal_module_body--925a9","scrollableContainer":"bp_modal_module_scrollableContainer--925a9","headerDividerLine":"bp_modal_module_headerDividerLine--925a9","footerDividerLine":"bp_modal_module_footerDividerLine--925a9","footer":"bp_modal_module_footer--925a9","footerButton":"bp_modal_module_footerButton--925a9"};
+var styles = {"overlay":"bp_modal_module_overlay--aef1e","content":"bp_modal_module_content--aef1e","popup_bounce_in":"bp_modal_module_popup_bounce_in--aef1e","smallSizeModal":"bp_modal_module_smallSizeModal--aef1e","mediumSizeModal":"bp_modal_module_mediumSizeModal--aef1e","largeSizeModal":"bp_modal_module_largeSizeModal--aef1e","xlargeSizeModal":"bp_modal_module_xlargeSizeModal--aef1e","close":"bp_modal_module_close--aef1e","onColor":"bp_modal_module_onColor--aef1e","backButton":"bp_modal_module_backButton--aef1e","modalHeader":"bp_modal_module_modalHeader--aef1e","modalTitle":"bp_modal_module_modalTitle--aef1e","body":"bp_modal_module_body--aef1e","scrollableContainer":"bp_modal_module_scrollableContainer--aef1e","headerDividerLine":"bp_modal_module_headerDividerLine--aef1e","footerDividerLine":"bp_modal_module_footerDividerLine--aef1e","footer":"bp_modal_module_footer--aef1e","footerButton":"bp_modal_module_footerButton--aef1e"};
 
 export { styles as default };

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

@@ -2,7 +2,14 @@ import { type DialogContentProps, type DialogPortalProps, type DialogProps, type
 import { type FunctionComponent, type HTMLAttributes, type PropsWithChildren, type ReactElement, type ReactNode, type SVGProps } from 'react';
 import { type IconButtonProps } from '../primitives/icon-button';
 export type ModalProps = DialogProps;
-export type ModalContentProps = DialogContentProps & Pick<DialogPortalProps, 'container'>;
+export type ModalContentProps = DialogContentProps & Pick<DialogPortalProps, 'container'> & {
+    /** The size of the modal content.
+     * small: max-width: 460px
+     * medium: max-width: 540px
+     * large: max-width: 620px
+     * xlarge: max-width: 768px */
+    size: 'small' | 'medium' | 'large' | 'xlarge';
+};
 export interface ModalCloseProps {
     /** The aria-label for the Close element */
     'aria-label': string;

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

@@ -1,2 +1,2 @@
-export { Select } from './select';
+export { SELECT_EMPTY_VALUE, Select } from './select';
 export { type SelectOptionProps, type SelectProps } from './types';

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

@@ -34,3 +34,10 @@ export declare const Select: import("react").ForwardRefExoticComponent<Omit<Sele
      */
     Separator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<HTMLHRElement>>;
 };
+/**
+ * This can be used as a symbol to set a value for an option that serves as a placeholder.
+ * With additional handling added to onValueChange, it can be used to clear the value.
+ *
+ * See: https://github.com/radix-ui/primitives/issues/2706 for more details.
+ */
+export declare const SELECT_EMPTY_VALUE = "__empty__";

package/lib-esm/select/select.js

@@ -183,5 +183,12 @@ const Select = Object.assign(Root, {
    */
   Separator
 });
+/**
+ * This can be used as a symbol to set a value for an option that serves as a placeholder.
+ * With additional handling added to onValueChange, it can be used to clear the value.
+ *
+ * See: https://github.com/radix-ui/primitives/issues/2706 for more details.
+ */
+const SELECT_EMPTY_VALUE = '__empty__';
 
-export { Select };
+export { SELECT_EMPTY_VALUE, Select };

package/lib-esm/types/input-value-props.d.ts

@@ -0,0 +1,22 @@
+export interface ControlledInputValueProps<ValueType, ChangedValueType = ValueType> {
+    defaultValue?: never;
+    onChange?: (value: ChangedValueType | null) => void;
+    value: ValueType | null;
+}
+export interface UncontrolledInputValueProps<ValueType, ChangedValueType = ValueType> {
+    defaultValue?: ValueType | null;
+    onChange?: (value: ChangedValueType | null) => void;
+    value?: never;
+}
+/**
+ * Represents the props for an input's value.
+ * It is a generic type that should be used for inputs that can be used as either controlled or uncontrolled.
+ *
+ * @template ValueType - The type of the value.
+ * @template ChangedValueType - The type of the changed value. By default, it is the same as ValueType.
+ *
+ * @property {ValueType | null} defaultValue - The default value of the uncontrolled input. Optional. Use `null` to signify no value.
+ * @property {(value: ChangedValueType | null) => void} onChange - The function to be called when the value changes. It is optional.
+ * @property {ValueType | null} value - The current value of the controlled input. Use `null` to signify no value. If both `value` and `defaultValue` are provided, `value` will be used.
+ */
+export type InputValueProps<ValueType, ChangedValueType = ValueType> = UncontrolledInputValueProps<ValueType, ChangedValueType> | ControlledInputValueProps<ValueType, ChangedValueType>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "6.45.3",
+    "version": "7.0.1",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
         "access": "public",
@@ -21,43 +21,44 @@
         "**/*.scss"
     ],
     "dependencies": {
-        "@ariakit/react": "0.4.1",
-        "@ariakit/react-core": "0.4.1",
+        "@ariakit/react": "0.4.5",
+        "@ariakit/react-core": "0.4.5",
         "@box/blueprint-web-assets": "^4.16.0",
-        "@internationalized/date": "^3.5.1",
+        "@internationalized/date": "^3.5.4",
         "@radix-ui/react-accordion": "^1.1.2",
         "@radix-ui/react-checkbox": "^1.0.4",
         "@radix-ui/react-collapsible": "^1.0.3",
-        "@radix-ui/react-context-menu": "2.1.4",
-        "@radix-ui/react-dialog": "1.0.4",
-        "@radix-ui/react-dropdown-menu": "2.0.5",
+        "@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.6",
+        "@radix-ui/react-popover": "^1.0.7",
         "@radix-ui/react-radio-group": "^1.1.3",
-        "@radix-ui/react-scroll-area": "^1.0.4",
-        "@radix-ui/react-select": "1.2.2",
+        "@radix-ui/react-scroll-area": "^1.0.5",
+        "@radix-ui/react-select": "^2.0.0",
         "@radix-ui/react-slider": "^1.1.2",
         "@radix-ui/react-switch": "^1.0.3",
-        "@radix-ui/react-toast": "1.1.4",
+        "@radix-ui/react-toast": "^1.1.5",
         "@radix-ui/react-toggle-group": "^1.0.4",
         "@radix-ui/react-toolbar": "^1.0.4",
-        "@radix-ui/react-tooltip": "1.0.6",
+        "@radix-ui/react-tooltip": "^1.0.7",
         "@radix-ui/react-visually-hidden": "^1.0.3",
-        "@react-aria/i18n": "^3.10.0",
-        "@react-aria/utils": "^3.23.0",
-        "@react-types/shared": "^3.22.0",
+        "@react-aria/i18n": "^3.11.1",
+        "@react-aria/utils": "^3.24.1",
+        "@react-types/shared": "^3.23.1",
         "clsx": "^1.2.1",
         "color": "2.0.1",
         "lodash": "^4.17.15",
-        "react-aria": "^3.31.1",
-        "react-aria-components": "1.0.1",
+        "react-aria": "^3.33.1",
+        "react-aria-components": "^1.2.1",
         "tabbable": "^4.0.0",
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^0.1.0"
+        "@box/storybook-utils": "^0.1.0",
+        "react-stately": "^3.31.1"
     },
-    "gitHead": "81fa895e9b66968d8df23731eec8dd30dca5da53",
+    "gitHead": "5bb69c3c599276bf63d8b23de555782344294ad0",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {

package/lib-esm/utils/useScreenSize.d.ts

@@ -1,8 +0,0 @@
-/**
- * @deprecated This hook is deprecated. Consider using useBreakpoint instead.
- * @todo Remove it in next breaking change.
- */
-export declare const useScreenSize: () => {
-    width: number;
-    height: number;
-};