@box/blueprint-web 12.37.0 → 12.38.0

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

@@ -18,18 +18,15 @@ 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) => {
+// Generic helper to apply a callback to an option looked up by value, with a fallback when callback is absent.
+const applyOptionCallback = (optionValue, options, callback, fallback) => {
   const option = getOptionFromValue(optionValue, options);
-  return displayValue && option ? displayValue(option) : optionValue;
-};
-const getDisplayAvatarFromOptionValue = (optionValue, options, displayAvatar) => {
-  const option = getOptionFromValue(optionValue, options);
-  return displayAvatar && option ? displayAvatar(option) : undefined;
-};
-const getTooltipValueFromOptionValue = (optionValue, options, displayTooltip) => {
-  const option = getOptionFromValue(optionValue, options);
-  return displayTooltip && option ? displayTooltip(option) : undefined;
+  return callback && option ? callback(option) : fallback;
 };
+const getDisplayValueFromOptionValue = (optionValue, options, displayValue) => applyOptionCallback(optionValue, options, displayValue, optionValue);
+const getDisplayAvatarFromOptionValue = (optionValue, options, displayAvatar) => applyOptionCallback(optionValue, options, displayAvatar, undefined);
+const getTooltipValueFromOptionValue = (optionValue, options, displayTooltip) => applyOptionCallback(optionValue, options, displayTooltip, undefined);
+const getDisplayChipVariantFromOptionValue = (optionValue, options, displayChipVariant) => applyOptionCallback(optionValue, options, displayChipVariant, 'default');
 const RootInner = ({
   as = 'input',
   ...props
@@ -60,6 +57,7 @@ const RootInner = ({
     displayValue,
     displayAvatar,
     displayTooltip,
+    displayChipVariant,
     hideOnEscape,
     renderOption,
     options,
@@ -333,12 +331,14 @@ const RootInner = ({
             avatar: getDisplayAvatarFromOptionValue(selected, options, displayAvatar),
             label: getDisplayValueFromOptionValue(selected, options, displayValue),
             onDelete: () => removeMultiSelectInputChip(selected),
-            tooltip: getTooltipValueFromOptionValue(selected, options, displayTooltip)
+            tooltip: getTooltipValueFromOptionValue(selected, options, displayTooltip),
+            variant: getDisplayChipVariantFromOptionValue(selected, options, displayChipVariant)
           }, selected))
         }), showSingleSelectChip && jsx(InputChip, {
           label: getDisplayValueFromOptionValue(selectedValue, options, displayValue),
           onDelete: showComboboxCancelButton ? undefined : removeSingleSelectInputChip,
-          tooltip: getTooltipValueFromOptionValue(selectedValue, options, displayTooltip)
+          tooltip: getTooltipValueFromOptionValue(selectedValue, options, displayTooltip),
+          variant: getDisplayChipVariantFromOptionValue(selectedValue, options, displayChipVariant)
         }), jsxs("div", {
           className: styles.textInputWrapper,
           children: [jsx(Combobox$1, {

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

@@ -1,6 +1,7 @@
 import { type ComboboxPopoverProps } from '@ariakit/react';
 import { type SelectItemProps } from '@ariakit/react-core/select/select-item';
 import { type SelectRendererProps } from '@ariakit/react-core/select/select-renderer';
+import { type InputChipProps } from '../input-chip/types';
 import { type TextAreaProps } from '../text-area/types';
 import { type Labelable } from '../util-components/labelable/types';
 export type OptionValue = {
@@ -88,6 +89,11 @@ export interface ComboboxBaseProps<Multiple extends boolean, FreeInput extends b
      * Return a string representation of a tooltip displayed on hover of an Input Chip in Combobox.
      */
     displayTooltip?: (option: T) => string;
+    /**
+     * Return the variant of the InputChip to display for a given option.
+     * Falls back to 'default' when not provided.
+     */
+    displayChipVariant?: (option: T) => InputChipProps['variant'];
     /**
      * 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/dist/lib-esm/index.css

@@ -1845,7 +1845,10 @@
 .bp_chips_group_module_chipsGroup--61ede > [role=row]{
   max-width:100%;
 }
-.bp_input_chip_module_container--9f437{
+.bp_input_chip_module_container--7e728{
+  --surface-inputchip-surface-variable:var(--purple-rain-20);
+  --text-inputchip-text-variable:var(--purple-rain-120);
+  --icon-inputchip-deleteicon-variable:var(--purple-rain-120);
   align-items:center;
   background-color:var(--surface-inputchip-surface);
   border:none;
@@ -1869,33 +1872,24 @@
   -webkit-user-select:none;
           user-select:none;
 }
-.bp_input_chip_module_container--9f437.bp_input_chip_module_avatarContainer--9f437{
+.bp_input_chip_module_container--7e728.bp_input_chip_module_avatarContainer--7e728{
   padding-inline:var(--space-05);
 }
-.bp_input_chip_module_container--9f437:not(.bp_input_chip_module_avatarContainer--9f437).bp_input_chip_module_deleteButton--9f437{
+.bp_input_chip_module_container--7e728:not(.bp_input_chip_module_avatarContainer--7e728).bp_input_chip_module_deleteButton--7e728{
   padding-inline:var(--space-1) var(--space-05);
 }
-.bp_input_chip_module_container--9f437:not(.bp_input_chip_module_error--9f437):focus{
+.bp_input_chip_module_container--7e728:not(.bp_input_chip_module_error--7e728):focus{
   background-color:var(--surface-inputchip-surface-hover);
   box-shadow:0 0 0 var(--border-1) var(--outline-focus-on-dark), 0 0 0 calc(var(--border-2) + var(--border-1)) var(--outline-focus-on-light);
 }
-.bp_input_chip_module_container--9f437.bp_input_chip_module_error--9f437{
+.bp_input_chip_module_container--7e728.bp_input_chip_module_error--7e728{
   background-color:var(--surface-inputchip-surface-error);
   outline:var(--border-1) solid var(--border-inputchip-border-error);
 }
-.bp_input_chip_module_container--9f437.bp_input_chip_module_error--9f437:focus{
+.bp_input_chip_module_container--7e728.bp_input_chip_module_error--7e728:focus{
   box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-dark), 0 0 0 calc(var(--border-2) + var(--border-2)) var(--outline-focus-on-light);
 }
-.bp_input_chip_module_container--9f437 .bp_input_chip_module_avatar--9f437{
-  flex-shrink:0;
-}
-.bp_input_chip_module_container--9f437 .bp_input_chip_module_label--9f437{
-  overflow:hidden;
-  padding-inline:var(--space-2);
-  text-overflow:ellipsis;
-  white-space:nowrap;
-}
-.bp_input_chip_module_container--9f437 .bp_input_chip_module_deleteIcon--9f437{
+.bp_input_chip_module_container--7e728 .bp_input_chip_module_deleteIcon--7e728{
   align-items:center;
   background:var(--surface-cta-surface-icon);
   border-radius:var(--radius-half);
@@ -1905,21 +1899,57 @@
   padding-block:var(--space-1);
   padding-inline:var(--space-1);
 }
-.bp_input_chip_module_container--9f437 .bp_input_chip_module_deleteIcon--9f437 *{
+.bp_input_chip_module_container--7e728 .bp_input_chip_module_deleteIcon--7e728 *{
   fill:var(--icon-cta-icon);
 }
-.bp_input_chip_module_container--9f437 .bp_input_chip_module_deleteIcon--9f437:hover{
+.bp_input_chip_module_container--7e728 .bp_input_chip_module_deleteIcon--7e728:hover{
   background:var(--surface-cta-surface-icon-hover);
 }
-.bp_input_chip_module_container--9f437 .bp_input_chip_module_deleteIcon--9f437:hover *{
+.bp_input_chip_module_container--7e728 .bp_input_chip_module_deleteIcon--7e728:hover *{
   fill:var(--icon-cta-icon-hover);
 }
-.bp_input_chip_module_container--9f437 .bp_input_chip_module_deleteIcon--9f437:active{
+.bp_input_chip_module_container--7e728 .bp_input_chip_module_deleteIcon--7e728:active{
   background:var(--surface-cta-surface-icon-pressed);
 }
-.bp_input_chip_module_container--9f437 .bp_input_chip_module_deleteIcon--9f437:active *{
+.bp_input_chip_module_container--7e728 .bp_input_chip_module_deleteIcon--7e728:active *{
   fill:var(--icon-cta-icon-pressed);
 }
+.bp_input_chip_module_container--7e728 .bp_input_chip_module_label--7e728{
+  overflow:hidden;
+  padding-inline:var(--space-2);
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+.bp_input_chip_module_container--7e728.bp_input_chip_module_variable--7e728{
+  background-color:var(--surface-inputchip-surface-variable);
+}
+.bp_input_chip_module_container--7e728.bp_input_chip_module_variable--7e728 .bp_input_chip_module_label--7e728{
+  color:var(--text-inputchip-text-variable);
+}
+.bp_input_chip_module_container--7e728.bp_input_chip_module_variable--7e728:focus{
+  background-color:var(--surface-inputchip-surface-variable);
+}
+.bp_input_chip_module_container--7e728.bp_input_chip_module_variable--7e728 .bp_input_chip_module_deleteIcon--7e728{
+  background:var(--surface-cta-surface-icon);
+}
+.bp_input_chip_module_container--7e728.bp_input_chip_module_variable--7e728 .bp_input_chip_module_deleteIcon--7e728 *{
+  fill:var(--icon-inputchip-deleteicon-variable);
+}
+.bp_input_chip_module_container--7e728.bp_input_chip_module_variable--7e728 .bp_input_chip_module_deleteIcon--7e728:hover{
+  background:var(--surface-cta-surface-icon-hover);
+}
+.bp_input_chip_module_container--7e728.bp_input_chip_module_variable--7e728 .bp_input_chip_module_deleteIcon--7e728:hover *{
+  fill:var(--icon-inputchip-deleteicon-variable);
+}
+.bp_input_chip_module_container--7e728.bp_input_chip_module_variable--7e728 .bp_input_chip_module_deleteIcon--7e728:active{
+  background:var(--surface-cta-surface-icon-pressed);
+}
+.bp_input_chip_module_container--7e728.bp_input_chip_module_variable--7e728 .bp_input_chip_module_deleteIcon--7e728:active *{
+  fill:var(--icon-inputchip-deleteicon-variable);
+}
+.bp_input_chip_module_container--7e728 .bp_input_chip_module_avatar--7e728{
+  flex-shrink:0;
+}
 .bp_inline_error_module_inlineError--9a67c{
   align-items:center;
   color:var(--text-text-error-on-light);
@@ -7267,7 +7297,45 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   min-width:var(--split-button-dropdown-min-width);
 }
 
-.bp_switch_module_option--06ec9{
+.bp_switch_module_option--d724c[data-modern=false]{
+  --switch-width:var(--size-10);
+  --switch-height:var(--size-5);
+  --switch-margin-left:var(--space-10);
+  --switch-margin-right:var(--space-3);
+  --description-margin:calc(var(--switch-margin-right) + var(--switch-width));
+  --thumb-width:var(--size-5);
+  --thumb-height:var(--size-5);
+  --thumb-bg:var(--surface-switch-surface);
+  --thumb-border:var(--border-1) solid var(--border-switch-border);
+  --thumb-radius:var(--size-10);
+  --thumb-shadow:var(--dropshadow-3);
+  --switch-bg-off:var(--surface-switch-surface-off);
+  --switch-bg-on:var(--surface-switch-surface-on);
+  --switch-radius:var(--size-10);
+  --switch-outline:var(--outline-focus-on-light);
+  --switch-disabled-opacity:.5;
+}
+
+.bp_switch_module_option--d724c[data-modern=true]{
+  --switch-width:var(--bp-size-110);
+  --switch-height:var(--bp-size-060);
+  --switch-margin-left:var(--bp-space-100);
+  --switch-margin-right:var(--bp-space-030);
+  --description-margin:calc(var(--switch-margin-right) + var(--switch-width));
+  --thumb-width:var(--bp-size-060);
+  --thumb-height:var(--bp-size-060);
+  --thumb-bg:var(--bp-surface-switch-surface);
+  --thumb-border:var(--bp-border-01) solid var(--bp-border-switch-border);
+  --thumb-radius:var(--bp-size-100);
+  --thumb-shadow:var(--dropshadow-3);
+  --switch-bg-off:var(--bp-surface-switch-surface-off);
+  --switch-bg-on:var(--bp-surface-switch-surface-on);
+  --switch-radius:var(--bp-size-100);
+  --switch-outline:var(--bp-outline-focus-on-light);
+  --switch-disabled-opacity:.6;
+}
+
+.bp_switch_module_option--d724c{
   display:flex;
   flex-direction:column;
   font-family:var(--body-default-font-family);
@@ -7279,69 +7347,69 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
           text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
 }
-.bp_switch_module_option--06ec9 .bp_switch_module_label--06ec9{
+.bp_switch_module_option--d724c .bp_switch_module_label--d724c{
   cursor:pointer;
   display:inline-flex;
   flex-direction:row;
   width:-moz-fit-content;
   width:fit-content;
 }
-.bp_switch_module_option--06ec9 .bp_switch_module_label--06ec9.bp_switch_module_rightAlign--06ec9{
+.bp_switch_module_option--d724c .bp_switch_module_label--d724c.bp_switch_module_rightAlign--d724c{
   flex-direction:row-reverse;
   justify-content:space-between;
   width:unset;
 }
-.bp_switch_module_option--06ec9 .bp_switch_module_description--06ec9{
-  margin-left:calc(var(--space-3) + var(--size-10));
+.bp_switch_module_option--d724c .bp_switch_module_description--d724c{
+  margin-left:var(--description-margin);
 }
-.bp_switch_module_option--06ec9 .bp_switch_module_description--06ec9.bp_switch_module_rightAlign--06ec9{
+.bp_switch_module_option--d724c .bp_switch_module_description--d724c.bp_switch_module_rightAlign--d724c{
   margin-left:unset;
-  margin-right:calc(var(--space-3) + var(--size-10));
+  margin-right:var(--description-margin);
 }
-.bp_switch_module_option--06ec9 .bp_switch_module_thumb--06ec9{
-  background-color:var(--surface-switch-surface);
-  border:var(--border-1) solid var(--border-switch-border);
-  border-radius:var(--size-10);
-  box-shadow:var(--dropshadow-3);
+.bp_switch_module_option--d724c .bp_switch_module_thumb--d724c{
+  background-color:var(--thumb-bg);
+  border:var(--thumb-border);
+  border-radius:var(--thumb-radius);
+  box-shadow:var(--thumb-shadow);
   box-sizing:border-box;
   display:block;
-  height:var(--size-5);
+  height:var(--thumb-height);
   transition:transform .4s;
-  width:var(--size-5);
+  width:var(--thumb-width);
   will-change:transform;
 }
-.bp_switch_module_option--06ec9 .bp_switch_module_switch--06ec9{
+.bp_switch_module_option--d724c .bp_switch_module_switch--d724c{
   all:unset;
   align-items:center;
-  background-color:var(--surface-switch-surface-off);
-  border-radius:var(--size-10);
+  background-color:var(--switch-bg-off);
+  border-radius:var(--switch-radius);
   display:flex;
   flex-shrink:0;
-  height:var(--size-5);
-  margin-right:var(--space-3);
+  height:var(--switch-height);
+  margin-right:var(--switch-margin-right);
   position:relative;
   transition:background-color .4s;
-  width:var(--size-10);
+  width:var(--switch-width);
   will-change:transition;
 }
-.bp_switch_module_option--06ec9 .bp_switch_module_switch--06ec9.bp_switch_module_rightAlign--06ec9{
-  margin-left:var(--space-10);
+.bp_switch_module_option--d724c .bp_switch_module_switch--d724c.bp_switch_module_rightAlign--d724c{
+  margin-left:var(--switch-margin-left);
   margin-right:unset;
 }
-.bp_switch_module_option--06ec9 .bp_switch_module_switch--06ec9:focus-visible{
-  box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--outline-focus-on-light);
+.bp_switch_module_option--d724c .bp_switch_module_switch--d724c:focus-visible{
+  box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--switch-outline);
 }
-.bp_switch_module_option--06ec9 .bp_switch_module_switch--06ec9[aria-checked=true]{
-  background-color:var(--surface-switch-surface-on);
+.bp_switch_module_option--d724c .bp_switch_module_switch--d724c[aria-checked=true]{
+  background-color:var(--switch-bg-on);
 }
-.bp_switch_module_option--06ec9 .bp_switch_module_switch--06ec9[aria-checked=true] .bp_switch_module_thumb--06ec9{
-  transform:translateX(calc(var(--size-10)/2));
+.bp_switch_module_option--d724c .bp_switch_module_switch--d724c[aria-checked=true] .bp_switch_module_thumb--d724c{
+  transform:translateX(calc(var(--switch-width)/2));
 }
-.bp_switch_module_option--06ec9.bp_switch_module_disabled--06ec9 .bp_switch_module_label--06ec9{
+.bp_switch_module_option--d724c.bp_switch_module_disabled--d724c .bp_switch_module_label--d724c{
   cursor:default;
 }
-.bp_switch_module_option--06ec9.bp_switch_module_disabled--06ec9 .bp_switch_module_switch--06ec9{
-  opacity:60%;
+.bp_switch_module_option--d724c.bp_switch_module_disabled--d724c .bp_switch_module_switch--d724c{
+  opacity:var(--switch-disabled-opacity);
 }
 
 .bp_text_button_module_textButton--84555[data-modern=false]{

package/dist/lib-esm/input-chip/input-chip.js

@@ -6,6 +6,15 @@ import React__default, { forwardRef } from 'react';
 import { Text } from '../text/text.js';
 import styles from './input-chip.module.js';
 
+const getVariantClass = variant => {
+  if (variant === 'error') {
+    return styles.error;
+  }
+  if (variant === 'variable') {
+    return styles.variable;
+  }
+  return undefined;
+};
 const DELETE_TRIGGER_KEYS = ['Backspace', 'Delete'];
 const InputChip = /*#__PURE__*/forwardRef((props, ref) => {
   const {
@@ -44,11 +53,13 @@ const InputChip = /*#__PURE__*/forwardRef((props, ref) => {
     buttonProps.onKeyDown?.(event);
   };
   const hasError = variant === 'error';
+  const variantClass = getVariantClass(variant);
+  const containerClassName = clsx(styles.container, variantClass, avatar && styles.avatarContainer, onDelete && styles.deleteButton, className);
   return /* eslint-disable-next-line jsx-a11y/role-supports-aria-props */jsxs("button", {
     ...buttonProps,
     ref: ref,
     "aria-invalid": hasError,
-    className: clsx(styles.container, hasError && styles.error, avatar && styles.avatarContainer, onDelete && styles.deleteButton, className),
+    className: containerClassName,
     onKeyDown: handleKeyDown,
     type: "button",
     children: [avatar, jsx(Text, {

package/dist/lib-esm/input-chip/input-chip.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"container":"bp_input_chip_module_container--9f437","avatarContainer":"bp_input_chip_module_avatarContainer--9f437","deleteButton":"bp_input_chip_module_deleteButton--9f437","error":"bp_input_chip_module_error--9f437","avatar":"bp_input_chip_module_avatar--9f437","label":"bp_input_chip_module_label--9f437","deleteIcon":"bp_input_chip_module_deleteIcon--9f437"};
+var styles = {"container":"bp_input_chip_module_container--7e728","avatarContainer":"bp_input_chip_module_avatarContainer--7e728","deleteButton":"bp_input_chip_module_deleteButton--7e728","error":"bp_input_chip_module_error--7e728","deleteIcon":"bp_input_chip_module_deleteIcon--7e728","label":"bp_input_chip_module_label--7e728","variable":"bp_input_chip_module_variable--7e728","avatar":"bp_input_chip_module_avatar--7e728"};
 
 export { styles as default };

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

@@ -17,7 +17,7 @@ export interface InputChipProps extends HTMLAttributes<HTMLElement> {
      *
      * @default "default"
      */
-    variant?: 'default' | 'error';
+    variant?: 'default' | 'error' | 'variable';
     /**
      * Callback fired when chip is deleted with X button click or keyboard interaction.
      */

package/dist/lib-esm/switch/switch-item.js

@@ -2,6 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import * as RadixSwitch from '@radix-ui/react-switch';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { TextWithInfoBadge } from '../util-components/text-with-info-badge/text-with-info-badge.js';
 import { useUniqueId } from '../utils/useUniqueId.js';
 import styles from './switch.module.js';
@@ -24,10 +25,14 @@ const Switch = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   const descriptionId = useUniqueId('description-', !!description);
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   return jsxs("div", {
     className: clsx([styles.option], {
       [styles.disabled]: disabled
     }, className),
+    "data-modern": enableModernizedComponents,
     children: [jsxs("label", {
       className: clsx(styles.label, {
         [styles.rightAlign]: isRightAligned

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"option":"bp_switch_module_option--06ec9","label":"bp_switch_module_label--06ec9","rightAlign":"bp_switch_module_rightAlign--06ec9","description":"bp_switch_module_description--06ec9","thumb":"bp_switch_module_thumb--06ec9","switch":"bp_switch_module_switch--06ec9","disabled":"bp_switch_module_disabled--06ec9"};
+var styles = {"option":"bp_switch_module_option--d724c","label":"bp_switch_module_label--d724c","rightAlign":"bp_switch_module_rightAlign--d724c","description":"bp_switch_module_description--d724c","thumb":"bp_switch_module_thumb--d724c","switch":"bp_switch_module_switch--d724c","disabled":"bp_switch_module_disabled--d724c"};
 
 export { styles as default };

package/package.json

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