@box/blueprint-web 9.11.0 → 9.12.1

package/lib-esm/combobox/combobox.js

@@ -189,6 +189,9 @@ const RootInner = ({
   const handleKeyDown = useCallback(event => {
     // Close menu
     if (event.key === 'Enter' || event.key === 'Tab') {
+      if (event.nativeEvent.isComposing) {
+        return;
+      }
       setOpen(false);
       return;
     }

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

@@ -7,7 +7,7 @@ export interface ComboboxGroupProps {
     label: string;
     hideLabel?: boolean;
 }
-export interface ComboboxGroupSelectProps extends SelectProps {
+export interface ComboboxGroupSelectProps extends Omit<SelectProps, 'disabled'> {
     disabled?: never;
     error?: boolean;
     label: never;

package/lib-esm/index.css

@@ -1809,7 +1809,7 @@
   --blueprint-select-border-error-left-width:none;
 }
 
-.bp_select_module_container--45f65{
+.bp_select_module_container--b9515{
   display:flex;
   flex-direction:column;
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
@@ -1821,15 +1821,15 @@
   text-decoration:none;
   text-transform:none;
 }
-.bp_select_module_container--45f65.bp_select_module_disabled--45f65{
+.bp_select_module_container--b9515.bp_select_module_disabled--b9515{
   opacity:60%;
 }
-.bp_select_module_container--45f65 .bp_select_module_label--45f65{
+.bp_select_module_container--b9515 .bp_select_module_label--b9515{
   flex:0 0 fit-content;
   font-weight:700;
   overflow-wrap:break-word;
 }
-.bp_select_module_container--45f65 .bp_select_module_label--45f65,.bp_select_module_container--45f65 .bp_select_module_triggerBtn--45f65{
+.bp_select_module_container--b9515 .bp_select_module_label--b9515,.bp_select_module_container--b9515 .bp_select_module_triggerBtn--b9515{
   color:var(--text-text-on-light);
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.875rem;
@@ -1838,7 +1838,7 @@
   text-decoration:none;
   text-transform:none;
 }
-.bp_select_module_container--45f65 .bp_select_module_triggerBtn--45f65{
+.bp_select_module_container--b9515 .bp_select_module_triggerBtn--b9515{
   align-items:center;
   background-color:var(--surface-dropdown-surface);
   border-bottom:var(--blueprint-select-border-bottom-width, var(--border-1)) solid var(--border-dropdown-border);
@@ -1859,47 +1859,58 @@
   text-align:start;
   width:100%;
 }
-.bp_select_module_container--45f65 .bp_select_module_triggerBtn--45f65 span:first-child{
+.bp_select_module_container--b9515 .bp_select_module_triggerBtn--b9515 span:first-child{
   overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap;
 }
-.bp_select_module_container--45f65 .bp_select_module_triggerBtn--45f65:disabled{
+.bp_select_module_container--b9515 .bp_select_module_triggerBtn--b9515:disabled{
   cursor:default;
 }
-.bp_select_module_container--45f65 .bp_select_module_triggerBtn--45f65:not(:disabled).bp_select_module_error--45f65,.bp_select_module_container--45f65 .bp_select_module_triggerBtn--45f65:not(:disabled)[aria-invalid=true]{
+.bp_select_module_container--b9515 .bp_select_module_triggerBtn--b9515.bp_select_module_readonly--b9515:not(:disabled){
+  background-color:var(--gray-02);
+  box-shadow:none;
+  color:var(--text-text-on-light-secondary);
+  cursor:default;
+}
+.bp_select_module_container--b9515 .bp_select_module_triggerBtn--b9515:not(.bp_select_module_readonly--b9515):not(:disabled).bp_select_module_error--b9515,.bp_select_module_container--b9515 .bp_select_module_triggerBtn--b9515:not(.bp_select_module_readonly--b9515):not(:disabled)[aria-invalid=true]{
   background-color:var(--surface-dropdown-surface-error);
   border-bottom:var(--blueprint-select-border-error-bottom-width, var(--border-2)) solid var(--border-dropdown-border-error);
   border-left:var(--blueprint-select-border-error-left-width, var(--border-2)) solid var(--border-dropdown-border-error);
   border-right:var(--blueprint-select-border-error-right-width, var(--border-2)) solid var(--border-dropdown-border-error);
   border-top:var(--blueprint-select-border-error-top-width, var(--border-2)) solid var(--border-dropdown-border-error);
 }
-.bp_select_module_container--45f65 .bp_select_module_triggerBtn--45f65:focus,.bp_select_module_container--45f65 .bp_select_module_triggerBtn--45f65:not(:disabled).bp_select_module_error--45f65:focus,.bp_select_module_container--45f65 .bp_select_module_triggerBtn--45f65:not(:disabled)[aria-invalid=true]:focus{
+.bp_select_module_container--b9515 .bp_select_module_triggerBtn--b9515:not(.bp_select_module_readonly--b9515):focus,.bp_select_module_container--b9515 .bp_select_module_triggerBtn--b9515:not(.bp_select_module_readonly--b9515):not(:disabled).bp_select_module_error--b9515:focus,.bp_select_module_container--b9515 .bp_select_module_triggerBtn--b9515:not(.bp_select_module_readonly--b9515):not(:disabled)[aria-invalid=true]:focus{
   background-color:var(--surface-dropdown-surface-focus);
   border:var(--border-2), solid, var(--outline-focus-on-light);
 }
-.bp_select_module_container--45f65 .bp_select_module_triggerBtn--45f65:not(:disabled):not(:focus):not(.bp_select_module_error--45f65):not([aria-invalid]):hover{
+.bp_select_module_container--b9515 .bp_select_module_triggerBtn--b9515:not(.bp_select_module_readonly--b9515):not(:disabled):not(:focus):not(.bp_select_module_error--b9515):not([aria-invalid]):hover{
   background-color:var(--surface-dropdown-surface-hover);
   border-color:var(--border-dropdown-border-hover);
 }
-.bp_select_module_container--45f65 .bp_select_module_triggerBtn--45f65 .bp_select_module_iconWrapper--45f65{
+.bp_select_module_container--b9515 .bp_select_module_triggerBtn--b9515 .bp_select_module_iconWrapper--b9515{
   flex-shrink:0;
   -webkit-user-select:none;
           user-select:none;
 }
-.bp_select_module_container--45f65 .bp_select_module_triggerBtn--45f65 .bp_select_module_icon--45f65{
+.bp_select_module_container--b9515 .bp_select_module_triggerBtn--b9515 .bp_select_module_iconCaret--b9515{
   display:block;
   height:var(--size-2);
   width:var(--size-2);
 }
-.bp_select_module_container--45f65 .bp_select_module_triggerBtn--45f65 .bp_select_module_icon--45f65 path{
+.bp_select_module_container--b9515 .bp_select_module_triggerBtn--b9515 .bp_select_module_iconCaret--b9515 path{
   fill:var(--icon-icon-on-light);
 }
-.bp_select_module_container--45f65 .bp_select_module_triggerBtn--45f65[data-state=open] .bp_select_module_icon--45f65{
+.bp_select_module_container--b9515 .bp_select_module_triggerBtn--b9515 .bp_select_module_iconPencilCrossed--b9515{
+  display:block;
+  height:var(--size-4);
+  width:var(--size-4);
+}
+.bp_select_module_container--b9515 .bp_select_module_triggerBtn--b9515[data-state=open] .bp_select_module_icon--b9515{
   transform:rotate(180deg);
 }
 
-.bp_select_module_content--45f65{
+.bp_select_module_content--b9515{
   background-color:var(--surface-menu-surface);
   border:var(--border-1) solid var(--border-card-border);
   border-radius:var(--radius-3);
@@ -1917,11 +1928,11 @@
   text-transform:none;
   z-index:380;
 }
-.bp_select_module_content--45f65 .bp_select_module_viewport--45f65{
+.bp_select_module_content--b9515 .bp_select_module_viewport--b9515{
   padding-block:var(--space-3);
   padding-inline:var(--space-3);
 }
-.bp_select_module_content--45f65 .bp_select_module_viewport--45f65 .bp_select_module_option--45f65{
+.bp_select_module_content--b9515 .bp_select_module_viewport--b9515 .bp_select_module_option--b9515{
   border:var(--border-2) solid #0000;
   border-radius:var(--radius-3);
   cursor:pointer;
@@ -1936,25 +1947,25 @@
   -webkit-user-select:none;
           user-select:none;
 }
-.bp_select_module_content--45f65 .bp_select_module_viewport--45f65 .bp_select_module_option--45f65[data-disabled]{
+.bp_select_module_content--b9515 .bp_select_module_viewport--b9515 .bp_select_module_option--b9515[data-disabled]{
   opacity:60%;
   pointer-events:none;
 }
-.bp_select_module_content--45f65 .bp_select_module_viewport--45f65 .bp_select_module_option--45f65[data-highlighted]{
+.bp_select_module_content--b9515 .bp_select_module_viewport--b9515 .bp_select_module_option--b9515[data-highlighted]{
   background-color:var(--surface-menu-surface-focus);
   border:var(--border-2) solid var(--outline-focus-on-light);
 }
-.bp_select_module_content--45f65 .bp_select_module_viewport--45f65 .bp_select_module_option--45f65:hover{
+.bp_select_module_content--b9515 .bp_select_module_viewport--b9515 .bp_select_module_option--b9515:hover{
   background-color:var(--surface-menu-surface-hover);
 }
-.bp_select_module_content--45f65 .bp_select_module_viewport--45f65 .bp_select_module_option--45f65 span:first-child{
+.bp_select_module_content--b9515 .bp_select_module_viewport--b9515 .bp_select_module_option--b9515 span:first-child{
   overflow:hidden;
   overflow-wrap:break-word;
 }
-.bp_select_module_content--45f65 .bp_select_module_viewport--45f65 .bp_select_module_option--45f65 .bp_select_module_secondaryText--45f65{
+.bp_select_module_content--b9515 .bp_select_module_viewport--b9515 .bp_select_module_option--b9515 .bp_select_module_secondaryText--b9515{
   color:var(--text-text-on-light-secondary);
 }
-.bp_select_module_content--45f65 .bp_select_module_viewport--45f65 .bp_select_module_option--45f65 .bp_select_module_indicator--45f65{
+.bp_select_module_content--b9515 .bp_select_module_viewport--b9515 .bp_select_module_option--b9515 .bp_select_module_indicator--b9515{
   align-items:center;
   display:flex;
   height:var(--size-9);
@@ -1963,10 +1974,10 @@
   position:absolute;
   top:0;
 }
-.bp_select_module_content--45f65 .bp_select_module_viewport--45f65 .bp_select_module_option--45f65 .bp_select_module_indicator--45f65 path{
+.bp_select_module_content--b9515 .bp_select_module_viewport--b9515 .bp_select_module_option--b9515 .bp_select_module_indicator--b9515 path{
   fill:var(--icon-icon-on-light);
 }
-.bp_select_module_content--45f65 .bp_select_module_viewport--45f65 .bp_select_module_separator--45f65{
+.bp_select_module_content--b9515 .bp_select_module_viewport--b9515 .bp_select_module_separator--b9515{
   background-color:var(--border-divider-border);
   flex-shrink:0;
   height:var(--border-1);

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

@@ -1,5 +1,4 @@
-import * as SelectPrimitive from '@radix-ui/react-select';
-import { type SelectContentProps, type SelectOptionProps } from './types';
+import { type SelectContentProps, type SelectOptionProps, type SelectProps } from './types';
 /**
  * The root component that contains all the parts of a select.
  *
@@ -19,7 +18,7 @@ import { type SelectContentProps, type SelectOptionProps } from './types';
  *     <Select.Option text="Option 4" value="option-4" />
  * </Select>
  */
-export declare const Select: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps, keyof import("./types").ExtraProps> & import("./types").ExtraProps & import("react").RefAttributes<HTMLButtonElement>> & {
+export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLButtonElement>> & {
     /**
      * The component that pops out when the select is open.
      */

package/lib-esm/select/select.js

@@ -1,10 +1,11 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Caret, Checkmark } from '@box/blueprint-web-assets/icons/Fill';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { PencilCrossed, Caret, Checkmark } from '@box/blueprint-web-assets/icons/Fill';
 import * as ScrollArea from '@radix-ui/react-scroll-area';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import clsx from 'clsx';
 import { forwardRef, useCallback } from 'react';
 import { InlineError } from '../primitives/inline-error/inline-error.js';
+import { Text } from '../text/text.js';
 import { useLabelable } from '../util-components/labelable/useLabelable.js';
 import { useUniqueId } from '../utils/useUniqueId.js';
 import styles from './select.module.js';
@@ -27,6 +28,8 @@ const Root = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     onOpenChange,
     name,
     disabled,
+    readonly,
+    subText,
     required,
     id,
     // RadixSelectTrigger props
@@ -38,7 +41,9 @@ const Root = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const isSelectDefaultOpen = defaultOpen && !disabled;
   const isSelectOpen = open && !disabled;
   const handleOnChange = isOpen => {
-    onOpenChange?.(isOpen);
+    if (!readonly) {
+      onOpenChange?.(isOpen);
+    }
   };
   const selectProps = {
     name,
@@ -46,8 +51,8 @@ const Root = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     required,
     value,
     defaultValue,
-    defaultOpen: isSelectDefaultOpen,
-    open: isSelectOpen,
+    defaultOpen: !readonly && isSelectDefaultOpen,
+    open: !readonly && isSelectOpen,
     onValueChange,
     onOpenChange: handleOnChange
   };
@@ -56,6 +61,11 @@ const Root = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const ariaDescribedBy = clsx(triggerProps['aria-describedby'], {
     [inlineErrorId]: hasError
   });
+  const icon = readonly ? jsx(PencilCrossed, {
+    className: styles.iconPencilCrossed
+  }) : jsx(Caret, {
+    className: styles.iconCaret
+  });
   return jsxs("div", {
     className: clsx(styles.container, {
       [styles.disabled]: disabled
@@ -72,23 +82,27 @@ const Root = /*#__PURE__*/forwardRef((props, forwardedRef) => {
         ...(hasError && {
           'aria-invalid': 'true'
         }),
+        "aria-readonly": readonly ? 'true' : undefined,
         className: clsx(styles.triggerBtn, {
-          [styles.error]: hasError
+          [styles.error]: hasError,
+          [styles.readonly]: readonly
         }),
         id: selectId,
         children: [jsx(SelectPrimitive.Value, {
           placeholder: placeholder
         }), jsx(SelectPrimitive.Icon, {
           className: styles.iconWrapper,
-          children: jsx(Caret, {
-            className: styles.icon
-          })
+          children: icon
         })]
       }), children]
     }), jsx(InlineError, {
       className: styles.inlineError,
       id: inlineErrorId,
       children: error
+    }), readonly && subText && jsx(Text, {
+      as: "p",
+      color: "textOnLightSecondary",
+      children: subText
     })]
   });
 });

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"container":"bp_select_module_container--45f65","disabled":"bp_select_module_disabled--45f65","label":"bp_select_module_label--45f65","triggerBtn":"bp_select_module_triggerBtn--45f65","error":"bp_select_module_error--45f65","iconWrapper":"bp_select_module_iconWrapper--45f65","icon":"bp_select_module_icon--45f65","content":"bp_select_module_content--45f65","viewport":"bp_select_module_viewport--45f65","option":"bp_select_module_option--45f65","secondaryText":"bp_select_module_secondaryText--45f65","indicator":"bp_select_module_indicator--45f65","separator":"bp_select_module_separator--45f65"};
+var styles = {"container":"bp_select_module_container--b9515","disabled":"bp_select_module_disabled--b9515","label":"bp_select_module_label--b9515","triggerBtn":"bp_select_module_triggerBtn--b9515","readonly":"bp_select_module_readonly--b9515","error":"bp_select_module_error--b9515","iconWrapper":"bp_select_module_iconWrapper--b9515","iconCaret":"bp_select_module_iconCaret--b9515","iconPencilCrossed":"bp_select_module_iconPencilCrossed--b9515","icon":"bp_select_module_icon--b9515","content":"bp_select_module_content--b9515","viewport":"bp_select_module_viewport--b9515","option":"bp_select_module_option--b9515","secondaryText":"bp_select_module_secondaryText--b9515","indicator":"bp_select_module_indicator--b9515","separator":"bp_select_module_separator--b9515"};
 
 export { styles as default };

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

@@ -43,6 +43,14 @@ export interface ExtraProps extends Labelable {
      * When `true`, prevents the user from interacting with select.
      */
     disabled?: RadixSelectProps['disabled'];
+    /**
+     * When `true`, prevents the user from interacting with select but can be read by the user.
+     */
+    readonly?: boolean;
+    /**
+     * Readonly subText to inform the user about the Select field.
+     */
+    subText?: string;
     /**
      * When `true`, indicates that the user must select a value before the owning form can be submitted.
      */
@@ -62,7 +70,25 @@ export interface ExtraProps extends Labelable {
      */
     error?: React.ReactNode;
 }
-export type SelectProps = Modify<RadixSelectTriggerProps, ExtraProps>;
+type SelectState = {
+    disabled?: boolean;
+} | {
+    readonly?: boolean;
+} | {
+    disabled: false;
+    readonly: true;
+} | {
+    disabled: true;
+    readonly: false;
+} | {
+    disabled: false;
+    readonly: false;
+} | {
+    disabled?: false;
+    readonly: true;
+    subText?: string;
+};
+export type SelectProps = Modify<RadixSelectTriggerProps, ExtraProps & SelectState>;
 export interface SelectContentProps extends React.ComponentPropsWithRef<'div'> {
     /**
      * Pass the select options and separators using `<Select.Option />` and `<Select.Separator />`.
@@ -104,3 +130,4 @@ export interface SelectOptionProps extends React.ComponentPropsWithRef<'div'> {
      */
     secondaryText?: string;
 }
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "9.11.0",
+    "version": "9.12.1",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -63,7 +63,7 @@
         "react-stately": "^3.31.1",
         "tsx": "^4.16.5"
     },
-    "gitHead": "12ff2908da5de325ae2b5e8124befa5f9cb04a84",
+    "gitHead": "cde15b83e37a0f08119cd81fab817af5e8556166",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {