@box/blueprint-web 12.79.0 → 12.81.0

package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-checkbox-item.js

@@ -1,9 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Checkmark } from '@box/blueprint-web-assets/icons/Fill';
-import { Gray100 } from '@box/blueprint-web-assets/tokens/tokens';
+import { bpIconIconOnLight, Gray100 } from '@box/blueprint-web-assets/tokens/tokens';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import clsx from 'clsx';
 import { forwardRef, useCallback } from 'react';
+import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import { composeEventHandlers } from '../../utils/composeEventHandlers.js';
 import styles from './dropdown-menu.module.js';
 import { useMenuItemVariant } from './menu-item-variant-context.js';
@@ -21,8 +22,12 @@ const DropdownMenuCheckboxItem = /*#__PURE__*/forwardRef((props, forwardedRef) =
   const {
     internalSize
   } = useMenuItemVariant();
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   const isSizeSmall = internalSize === 'small';
   const checkmarkSize = isSizeSmall ? '1rem' : '2rem';
+  const checkmarkColor = enableModernizedComponents ? bpIconIconOnLight : Gray100;
   const preventDefault = useCallback(event => event.preventDefault(), []);
   return jsxs(DropdownMenuPrimitive.CheckboxItem, {
     ...rest,
@@ -33,7 +38,7 @@ const DropdownMenuCheckboxItem = /*#__PURE__*/forwardRef((props, forwardedRef) =
     children: [jsx(DropdownMenuPrimitive.ItemIndicator, {
       className: styles.checkmark,
       children: jsx(Checkmark, {
-        color: Gray100,
+        color: checkmarkColor,
         height: checkmarkSize,
         role: "presentation",
         width: checkmarkSize

package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-item.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Size8, Size4 } from '@box/blueprint-web-assets/tokens/tokens';
+import { Size8, Size4, bpIconIconOnLightSecondary } from '@box/blueprint-web-assets/tokens/tokens';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import clsx from 'clsx';
 import { forwardRef, useCallback, createElement } from 'react';
+import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import { Text } from '../../text/text.js';
 import { composeEventHandlers } from '../../utils/composeEventHandlers.js';
 import styles from './dropdown-menu.module.js';
@@ -86,13 +87,18 @@ const MenuItemStartElement = /*#__PURE__*/forwardRef(({
   const {
     internalSize
   } = useMenuItemVariant();
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   const iconSize = internalSize === 'medium' ? Size8 : Size4;
+  const iconColor = enableModernizedComponents ? bpIconIconOnLightSecondary : undefined;
   return jsxs("div", {
     ...rest,
     ref: ref,
     className: clsx(styles.startElement, className),
     children: [icon && /*#__PURE__*/createElement(icon, {
       className: styles.icon,
+      color: iconColor,
       height: iconSize,
       width: iconSize,
       role: 'presentation'

package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-radio-select-item.js

@@ -1,9 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Checkmark } from '@box/blueprint-web-assets/icons/Fill';
-import { Gray100 } from '@box/blueprint-web-assets/tokens/tokens';
+import { bpIconIconOnLight, Gray100 } from '@box/blueprint-web-assets/tokens/tokens';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import clsx from 'clsx';
 import { forwardRef, useCallback } from 'react';
+import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import { composeEventHandlers } from '../../utils/composeEventHandlers.js';
 import styles from './dropdown-menu.module.js';
 import { useMenuItemVariant } from './menu-item-variant-context.js';
@@ -21,8 +22,12 @@ const DropdownMenuRadioSelectItem = /*#__PURE__*/forwardRef((props, forwardedRef
   const {
     internalSize
   } = useMenuItemVariant();
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   const isSizeSmall = internalSize === 'small';
   const checkmarkSize = isSizeSmall ? '1rem' : '2rem';
+  const checkmarkColor = enableModernizedComponents ? bpIconIconOnLight : Gray100;
   const preventDefault = useCallback(event => event.preventDefault(), []);
   return jsxs(DropdownMenuPrimitive.RadioItem, {
     ...rest,
@@ -34,7 +39,7 @@ const DropdownMenuRadioSelectItem = /*#__PURE__*/forwardRef((props, forwardedRef
     children: [jsx(DropdownMenuPrimitive.ItemIndicator, {
       className: styles.checkmark,
       children: jsx(Checkmark, {
-        color: Gray100,
+        color: checkmarkColor,
         height: checkmarkSize,
         role: "presentation",
         width: checkmarkSize

package/dist/lib-esm/util-components/base-grid-list-item/base-grid-list-item-actions.js

@@ -16,7 +16,8 @@ import { RACTooltip } from './utils/rac-tooltip.js';
 
 const BaseListActions = ({
   children,
-  selectionEnabled
+  selectionEnabled,
+  isSelectionCheckboxDisabled
 }) => {
   return jsxs(Fragment, {
     children: [jsx("div", {
@@ -27,18 +28,21 @@ const BaseListActions = ({
         className: styles.inner,
         children: children
       }), selectionEnabled && jsx(ListCheckbox, {
-        className: styles.selection
+        className: styles.selection,
+        isDisabled: isSelectionCheckboxDisabled
       })]
     })]
   });
 };
 const GridListActions = ({
   children,
-  selectionEnabled
+  selectionEnabled,
+  isSelectionCheckboxDisabled
 }) => {
   return jsxs(Fragment, {
     children: [selectionEnabled && jsx(ListCheckbox, {
-      className: styles.selection
+      className: styles.selection,
+      isDisabled: isSelectionCheckboxDisabled
     }), jsx("div", {
       className: styles.inner,
       children: children
@@ -91,6 +95,7 @@ const BaseGridListActions = /*#__PURE__*/forwardRef(function BaseGridListActions
   const {
     children,
     className,
+    isSelectionCheckboxDisabled,
     ...rest
   } = props;
   const {
@@ -113,9 +118,11 @@ const BaseGridListActions = /*#__PURE__*/forwardRef(function BaseGridListActions
       ref: forkRef,
       className: clsx(styles.actions, className),
       children: isList ? jsx(BaseListActions, {
+        isSelectionCheckboxDisabled: isSelectionCheckboxDisabled,
         selectionEnabled: isSelectionEnabled,
         children: isRenderPropUsed ? children(setIsItemInteracted) : children
       }) : jsx(GridListActions, {
+        isSelectionCheckboxDisabled: isSelectionCheckboxDisabled,
         selectionEnabled: isSelectionEnabled,
         children: isRenderPropUsed ? children(setIsItemInteracted) : children
       })

package/dist/lib-esm/util-components/base-grid-list-item/types.d.ts

@@ -30,6 +30,7 @@ export type BaseGridListSubtitleProps = ComponentPropsWithRef<'span'>;
 export type BaseGridListDescriptionProps = ComponentPropsWithRef<'p'>;
 export type BaseGridListActionsProps = Modify<ComponentPropsWithRef<'div'>, {
     children: ReactNode | ((setIsInteracted: (open: boolean) => void) => ReactNode);
+    isSelectionCheckboxDisabled?: boolean;
 }>;
 export type BaseGridListActionIconButtonProps = IconButtonProps;
 export interface BaseGridListProps extends Omit<RAGridListProps<object>, 'layout'>, CustomGridListProps {

package/package.json

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