@box/blueprint-web 12.82.0 → 12.83.0

package/dist/lib-esm/index.css

@@ -3048,7 +3048,7 @@
   --blueprint-select-border-error-left-width:none;
 }
 
-.bp_select_module_container--02e36[data-modern=false]{
+.bp_select_module_container--a20b7[data-modern=false]{
   --select-gap:var(--space-2);
   --select-label-color:var(--text-text-on-light);
   --select-trigger-btn-gap:var(--space-2);
@@ -3078,28 +3078,28 @@
   --select-trigger-btn-pencil-height:var(--size-4);
 }
 
-.bp_select_module_container--02e36[data-modern=true]{
+.bp_select_module_container--a20b7[data-modern=true]{
   --select-gap:var(--bp-space-020);
   --select-label-color:var(--bp-text-text-on-light);
   --select-trigger-btn-gap:var(--bp-space-020);
   --select-trigger-btn-height:var(--bp-size-100);
   --select-trigger-btn-color:var(--bp-text-text-on-light);
-  --select-trigger-btn-bg-color:var(--bp-surface-dropdown-surface);
-  --select-trigger-btn-border-top:var(--blueprint-select-border-top-width, var(--bp-border-01)) solid var(--bp-border-dropdown-border);
-  --select-trigger-btn-border-right:var(--blueprint-select-border-right-width, var(--bp-border-01)) solid var(--bp-border-dropdown-border);
-  --select-trigger-btn-border-bottom:var(--blueprint-select-border-bottom-width, var(--bp-border-01)) solid var(--bp-border-dropdown-border);
-  --select-trigger-btn-border-left:var(--blueprint-select-border-left-width, var(--border-1)) solid var(--bp-border-dropdown-border);
+  --select-trigger-btn-bg-color:var(--bp-surface-select-surface);
+  --select-trigger-btn-border-top:var(--blueprint-select-border-top-width, var(--bp-border-01)) solid var(--bp-border-select-border);
+  --select-trigger-btn-border-right:var(--blueprint-select-border-right-width, var(--bp-border-01)) solid var(--bp-border-select-border);
+  --select-trigger-btn-border-bottom:var(--blueprint-select-border-bottom-width, var(--bp-border-01)) solid var(--bp-border-select-border);
+  --select-trigger-btn-border-left:var(--blueprint-select-border-left-width, var(--border-1)) solid var(--bp-border-select-border);
   --select-trigger-btn-radius:var(--blueprint-select-trigger-radius, var(--bp-radius-06));
   --select-trigger-btn-box-shadow:var(--dropshadow-2);
   --select-trigger-btn-padding-inline:var(--bp-space-030);
-  --select-trigger-btn-error-bg-color:var(--bp-surface-dropdown-surface-error);
-  --select-trigger-btn-focus-bg-color:var(--bp-surface-dropdown-surface-error-focus);
-  --select-trigger-btn-error-border-top:var(--blueprint-select-border-error-top-width, var(--bp-border-02)) solid var(--bp-border-dropdown-border-error);
-  --select-trigger-btn-error-border-right:var(--blueprint-select-border-error-right-width, var(--bp-border-02)) solid var(--bp-border-dropdown-border-error);
-  --select-trigger-btn-error-border-bottom:var(--blueprint-select-border-error-bottom-width, var(--bp-border-02)) solid var(--bp-border-dropdown-border-error);
-  --select-trigger-btn-error-border-left:var(--blueprint-select-border-error-left-width, var(--bp-border-02)) solid var(--bp-border-dropdown-border-error);
+  --select-trigger-btn-error-bg-color:var(--bp-surface-select-surface);
+  --select-trigger-btn-focus-bg-color:var(--bp-surface-select-surface);
+  --select-trigger-btn-error-border-top:var(--blueprint-select-border-error-top-width, var(--bp-border-02)) solid var(--bp-border-select-border-error);
+  --select-trigger-btn-error-border-right:var(--blueprint-select-border-error-right-width, var(--bp-border-02)) solid var(--bp-border-select-border-error);
+  --select-trigger-btn-error-border-bottom:var(--blueprint-select-border-error-bottom-width, var(--bp-border-02)) solid var(--bp-border-select-border-error);
+  --select-trigger-btn-error-border-left:var(--blueprint-select-border-error-left-width, var(--bp-border-02)) solid var(--bp-border-select-border-error);
   --select-trigger-btn-focus-border:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
-  --select-trigger-btn-hover-bg-color:var(--bp-surface-dropdown-surface-hover);
+  --select-trigger-btn-hover-bg-color:var(--bp-surface-select-surface);
   --select-trigger-btn-hover-border-color:var(--bp-border-select-border-hover);
   --select-trigger-btn-caret-width:var(--bp-size-030);
   --select-trigger-btn-caret-height:var(--bp-size-030);
@@ -3108,7 +3108,7 @@
   --select-trigger-btn-pencil-height:var(--bp-size-040);
 }
 
-.bp_select_module_container--02e36{
+.bp_select_module_container--a20b7{
   display:flex;
   flex-direction:column;
   font-family:var(--body-default-font-family);
@@ -3121,10 +3121,10 @@
           text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
 }
-.bp_select_module_container--02e36.bp_select_module_disabled--02e36{
+.bp_select_module_container--a20b7.bp_select_module_disabled--a20b7{
   opacity:60%;
 }
-.bp_select_module_container--02e36 .bp_select_module_label--02e36{
+.bp_select_module_container--a20b7 .bp_select_module_label--a20b7{
   color:var(--select-label-color);
   flex:0 0 fit-content;
   font-family:var(--body-default-bold-font-family);
@@ -3137,7 +3137,7 @@
           text-decoration:var(--body-default-bold-text-decoration);
   text-transform:var(--body-default-bold-text-case);
 }
-.bp_select_module_container--02e36 .bp_select_module_triggerBtn--02e36{
+.bp_select_module_container--a20b7 .bp_select_module_triggerBtn--a20b7{
   align-items:center;
   background-color:var(--select-trigger-btn-bg-color);
   border-bottom:var(--select-trigger-btn-border-bottom);
@@ -3166,58 +3166,58 @@
   text-transform:var(--body-default-text-case);
   width:100%;
 }
-.bp_select_module_container--02e36 .bp_select_module_triggerBtn--02e36 span:first-child{
+.bp_select_module_container--a20b7 .bp_select_module_triggerBtn--a20b7 span:first-child{
   overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap;
 }
-.bp_select_module_container--02e36 .bp_select_module_triggerBtn--02e36:disabled{
+.bp_select_module_container--a20b7 .bp_select_module_triggerBtn--a20b7:disabled{
   cursor:default;
 }
-.bp_select_module_container--02e36 .bp_select_module_triggerBtn--02e36.bp_select_module_readonly--02e36:not(:disabled){
+.bp_select_module_container--a20b7 .bp_select_module_triggerBtn--a20b7.bp_select_module_readonly--a20b7:not(:disabled){
   background-color:var(--gray-02);
   box-shadow:none;
   color:var(--text-text-on-light-secondary);
   cursor:default;
 }
-.bp_select_module_container--02e36 .bp_select_module_triggerBtn--02e36:not(.bp_select_module_readonly--02e36):not(:disabled).bp_select_module_error--02e36,.bp_select_module_container--02e36 .bp_select_module_triggerBtn--02e36:not(.bp_select_module_readonly--02e36):not(:disabled)[aria-invalid=true]{
+.bp_select_module_container--a20b7 .bp_select_module_triggerBtn--a20b7:not(.bp_select_module_readonly--a20b7):not(:disabled).bp_select_module_error--a20b7,.bp_select_module_container--a20b7 .bp_select_module_triggerBtn--a20b7:not(.bp_select_module_readonly--a20b7):not(:disabled)[aria-invalid=true]{
   background-color:var(----select-trigger-btn-error-bg-color);
   border-bottom:var(--select-trigger-btn-error-border-bottom);
   border-left:var(--select-trigger-btn-error-border-left);
   border-right:var(--select-trigger-btn-error-border-right);
   border-top:var(--select-trigger-btn-error-border-top);
 }
-.bp_select_module_container--02e36 .bp_select_module_triggerBtn--02e36:not(.bp_select_module_readonly--02e36):focus,.bp_select_module_container--02e36 .bp_select_module_triggerBtn--02e36:not(.bp_select_module_readonly--02e36):not(:disabled).bp_select_module_error--02e36:focus,.bp_select_module_container--02e36 .bp_select_module_triggerBtn--02e36:not(.bp_select_module_readonly--02e36):not(:disabled)[aria-invalid=true]:focus{
+.bp_select_module_container--a20b7 .bp_select_module_triggerBtn--a20b7:not(.bp_select_module_readonly--a20b7):focus,.bp_select_module_container--a20b7 .bp_select_module_triggerBtn--a20b7:not(.bp_select_module_readonly--a20b7):not(:disabled).bp_select_module_error--a20b7:focus,.bp_select_module_container--a20b7 .bp_select_module_triggerBtn--a20b7:not(.bp_select_module_readonly--a20b7):not(:disabled)[aria-invalid=true]:focus{
   background-color:var(--select-trigger-btn-focus-bg-color);
   border:var(--select-trigger-btn-focus-border);
 }
-.bp_select_module_container--02e36 .bp_select_module_triggerBtn--02e36:not(.bp_select_module_readonly--02e36):not(:disabled):not(:focus):not(.bp_select_module_error--02e36):not([aria-invalid]):hover{
+.bp_select_module_container--a20b7 .bp_select_module_triggerBtn--a20b7:not(.bp_select_module_readonly--a20b7):not(:disabled):not(:focus):not(.bp_select_module_error--a20b7):not([aria-invalid]):hover{
   background-color:var(--select-trigger-btn-hover-bg-color);
   border-color:var(--select-trigger-btn-hover-border-color);
 }
-.bp_select_module_container--02e36 .bp_select_module_triggerBtn--02e36 .bp_select_module_iconWrapper--02e36{
+.bp_select_module_container--a20b7 .bp_select_module_triggerBtn--a20b7 .bp_select_module_iconWrapper--a20b7{
   flex-shrink:0;
   -webkit-user-select:none;
           user-select:none;
 }
-.bp_select_module_container--02e36 .bp_select_module_triggerBtn--02e36 .bp_select_module_iconCaret--02e36{
+.bp_select_module_container--a20b7 .bp_select_module_triggerBtn--a20b7 .bp_select_module_iconCaret--a20b7{
   display:block;
   height:var(--select-trigger-btn-caret-height);
   width:var(--select-trigger-btn-caret-width);
 }
-.bp_select_module_container--02e36 .bp_select_module_triggerBtn--02e36 .bp_select_module_iconCaret--02e36 path{
+.bp_select_module_container--a20b7 .bp_select_module_triggerBtn--a20b7 .bp_select_module_iconCaret--a20b7 path{
   fill:var(--select-trigger-btn-caret-color);
 }
-.bp_select_module_container--02e36 .bp_select_module_triggerBtn--02e36 .bp_select_module_iconPencilCrossed--02e36{
+.bp_select_module_container--a20b7 .bp_select_module_triggerBtn--a20b7 .bp_select_module_iconPencilCrossed--a20b7{
   display:block;
   height:var(--select-trigger-btn-pencil-height);
   width:var(--select-trigger-btn-pencil-width);
 }
-.bp_select_module_container--02e36 .bp_select_module_triggerBtn--02e36[data-state=open] .bp_select_module_icon--02e36{
+.bp_select_module_container--a20b7 .bp_select_module_triggerBtn--a20b7[data-state=open] .bp_select_module_icon--a20b7{
   transform:rotate(180deg);
 }
 
-.bp_select_module_content--02e36[data-modern=false]{
+.bp_select_module_content--a20b7[data-modern=false]{
   --select-content-bg-color:var(--surface-menu-surface);
   --select-content-backdrop-filter:none;
   --select-content-border:var(--border-1) solid var(--border-card-border);
@@ -3225,6 +3225,7 @@
   --select-content-viewport-padding-block:var(--space-3);
   --select-content-viewport-padding-inline:var(--space-3);
   --select-content-viewport-option-gap:var(--space-2);
+  --select-content-viewport-option-text-color:var(--bp-text-text-on-light);
   --select-content-viewport-option-border:var(--border-2) solid #0000;
   --select-content-viewport-option-border-radius:var(--space-2);
   --select-content-viewport-option-padding-block:var(--space-2);
@@ -3243,7 +3244,7 @@
   --select-content-viewport-option-separator-margin-block:var(--space-2);
 }
 
-.bp_select_module_content--02e36[data-modern=true]{
+.bp_select_module_content--a20b7[data-modern=true]{
   --select-content-bg-color:var(--bp-surface-menu-surface-dropdown);
   --select-content-backdrop-filter:blur(16px);
   --select-content-border:var(--bp-border-01) solid var(--bp-border-card-border);
@@ -3251,8 +3252,9 @@
   --select-content-viewport-padding-block:var(--bp-space-030);
   --select-content-viewport-padding-inline:var(--bp-space-030);
   --select-content-viewport-option-gap:var(--bp-space-020);
+  --select-content-viewport-option-text-color:var(--bp-text-text-on-light);
   --select-content-viewport-option-border:var(--bp-border-02) solid #0000;
-  --select-content-viewport-option-border-radius:var(--bp-radius-10);
+  --select-content-viewport-option-border-radius:var(--bp-radius-06);
   --select-content-viewport-option-padding-block:var(--bp-space-020);
   --select-content-viewport-option-padding-inline:var(--bp-space-100) var(--bp-space-020);
   --select-content-viewport-option-focus-bg-color:var(--bp-surface-menu-item-surface-hover);
@@ -3269,7 +3271,7 @@
   --select-content-viewport-option-separator-margin-block:var(--bp-space-020);
 }
 
-.bp_select_module_content--02e36{
+.bp_select_module_content--a20b7{
   backdrop-filter:var(--select-content-backdrop-filter);
   background-color:var(--select-content-bg-color);
   border:var(--select-content-border);
@@ -3289,13 +3291,14 @@
   text-transform:var(--body-default-text-case);
   z-index:380;
 }
-.bp_select_module_content--02e36 .bp_select_module_viewport--02e36{
+.bp_select_module_content--a20b7 .bp_select_module_viewport--a20b7{
   padding-block:var(--select-content-viewport-padding-block);
   padding-inline:var(--select-content-viewport-padding-inline);
 }
-.bp_select_module_content--02e36 .bp_select_module_viewport--02e36 .bp_select_module_option--02e36{
+.bp_select_module_content--a20b7 .bp_select_module_viewport--a20b7 .bp_select_module_option--a20b7{
   border:var(--select-content-viewport-option-border);
   border-radius:var(--select-content-viewport-option-border-radius);
+  color:var(--select-content-viewport-option-text-color);
   cursor:pointer;
   display:flex;
   flex-wrap:wrap;
@@ -3308,29 +3311,29 @@
   -webkit-user-select:none;
           user-select:none;
 }
-.bp_select_module_content--02e36 .bp_select_module_viewport--02e36 .bp_select_module_option--02e36[data-disabled]{
+.bp_select_module_content--a20b7 .bp_select_module_viewport--a20b7 .bp_select_module_option--a20b7[data-disabled]{
   opacity:60%;
   pointer-events:none;
 }
-.bp_select_module_content--02e36 .bp_select_module_viewport--02e36 .bp_select_module_option--02e36[data-highlighted]{
+.bp_select_module_content--a20b7 .bp_select_module_viewport--a20b7 .bp_select_module_option--a20b7[data-highlighted]{
   background-color:var(--select-content-viewport-option-focus-bg-color);
   border:var(--select-content-viewport-option-focus-border);
 }
-.bp_select_module_content--02e36 .bp_select_module_viewport--02e36 .bp_select_module_option--02e36:active{
+.bp_select_module_content--a20b7 .bp_select_module_viewport--a20b7 .bp_select_module_option--a20b7:active{
   background-color:var(--select-content-viewport-option-active-bg-color);
   border:var(--select-content-viewport-option-active-border);
 }
-.bp_select_module_content--02e36 .bp_select_module_viewport--02e36 .bp_select_module_option--02e36:hover{
+.bp_select_module_content--a20b7 .bp_select_module_viewport--a20b7 .bp_select_module_option--a20b7:hover{
   background-color:var(--select-content-viewport-option-hover-bg-color);
 }
-.bp_select_module_content--02e36 .bp_select_module_viewport--02e36 .bp_select_module_option--02e36 span:first-child{
+.bp_select_module_content--a20b7 .bp_select_module_viewport--a20b7 .bp_select_module_option--a20b7 span:first-child{
   overflow:hidden;
   overflow-wrap:break-word;
 }
-.bp_select_module_content--02e36 .bp_select_module_viewport--02e36 .bp_select_module_option--02e36 .bp_select_module_secondaryText--02e36{
+.bp_select_module_content--a20b7 .bp_select_module_viewport--a20b7 .bp_select_module_option--a20b7 .bp_select_module_secondaryText--a20b7{
   color:var(--select-content-viewport-option-secondary-text-color);
 }
-.bp_select_module_content--02e36 .bp_select_module_viewport--02e36 .bp_select_module_option--02e36 .bp_select_module_indicator--02e36{
+.bp_select_module_content--a20b7 .bp_select_module_viewport--a20b7 .bp_select_module_option--a20b7 .bp_select_module_indicator--a20b7{
   align-items:center;
   display:flex;
   height:var(--select-content-viewport-option-indicator-height);
@@ -3339,10 +3342,10 @@
   position:absolute;
   top:0;
 }
-.bp_select_module_content--02e36 .bp_select_module_viewport--02e36 .bp_select_module_option--02e36 .bp_select_module_indicator--02e36 path{
+.bp_select_module_content--a20b7 .bp_select_module_viewport--a20b7 .bp_select_module_option--a20b7 .bp_select_module_indicator--a20b7 path{
   fill:var(--select-content-viewport-option-indicator-color);
 }
-.bp_select_module_content--02e36 .bp_select_module_viewport--02e36 .bp_select_module_separator--02e36{
+.bp_select_module_content--a20b7 .bp_select_module_viewport--a20b7 .bp_select_module_separator--a20b7{
   background-color:var(--select-content-viewport-option-separator-bg-color);
   flex-shrink:0;
   height:var(--select-content-viewport-option-separator-height);

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

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { PencilCrossed, Caret, Checkmark } from '@box/blueprint-web-assets/icons/Fill';
-import { CheckmarkCircle } from '@box/blueprint-web-assets/icons/Medium';
-import { Size5 } from '@box/blueprint-web-assets/tokens/px-tokens';
+import { ChevronDown } from '@box/blueprint-web-assets/icons/Medium';
+import { bpIconIconOnLight, bpSize030 } from '@box/blueprint-web-assets/tokens/tokens';
 import * as ScrollArea from '@radix-ui/react-scroll-area';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import clsx from 'clsx';
@@ -39,6 +39,9 @@ const Root = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     ...triggerProps
   } = props;
   const selectId = useUniqueId('select-', !id) || id || 'default-select-id';
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   const hasError = !!error && !disabled;
   // Restrict consumers from opening options menu when Root is disabled
   const isSelectDefaultOpen = defaultOpen && !disabled;
@@ -64,14 +67,24 @@ 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
-  });
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
+  const icon = (() => {
+    if (readonly) {
+      return jsx(PencilCrossed, {
+        className: styles.iconPencilCrossed
+      });
+    }
+    if (enableModernizedComponents) {
+      return jsx(ChevronDown, {
+        className: styles.iconCaret,
+        color: bpIconIconOnLight,
+        height: bpSize030,
+        width: bpSize030
+      });
+    }
+    return jsx(Caret, {
+      className: styles.iconCaret
+    });
+  })();
   return jsxs("div", {
     className: clsx(styles.container, {
       [styles.disabled]: disabled
@@ -155,9 +168,6 @@ const Option = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   } = props;
   const onPointerLeave = useCallback(event => event.preventDefault(), []);
   const onPointerMove = useCallback(event => event.preventDefault(), []);
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   return jsxs(SelectPrimitive.Item, {
     ...itemProps,
     ref: forwardedRef,
@@ -171,10 +181,7 @@ const Option = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       children: secondaryText
     }), !itemProps.disabled && jsx(SelectPrimitive.ItemIndicator, {
       className: styles.indicator,
-      children: enableModernizedComponents ? jsx(CheckmarkCircle, {
-        height: Size5,
-        width: Size5
-      }) : jsx(Checkmark, {})
+      children: jsx(Checkmark, {})
     })]
   });
 });

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.82.0",
+    "version": "12.83.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {