@box/blueprint-web 12.130.2 → 12.130.4

package/dist/lib-esm/index.css

@@ -9158,7 +9158,7 @@ table.bp_inline_table_module_inlineTable--fc100[data-modern=true] td:last-child,
     padding:var(--chips-group-small-screen-padding);
   }
 }
-.bp_context_menu_module_menuBlock--71906[data-modern=false]{
+.bp_context_menu_module_menuBlock--99ecc[data-modern=false]{
   --context-menu-block-font-color:unset;
   --context-menu-block-min-width:var(--blueprint-web-context-menu-min-width, 160px);
   --context-menu-block-max-width:var(--blueprint-web-context-menu-max-width);
@@ -9181,10 +9181,11 @@ table.bp_inline_table_module_inlineTable--fc100[data-modern=true] td:last-child,
   --context-menu-item-background-color-pressed:var(--surface-menu-surface-focus);
   --context-menu-item-focus-border:var(--border-2) solid var(--outline-focus-on-light);
   --context-menu-item-padding:var(--space-2);
+  --context-menu-item-border-hover:var(--border-2) solid #0000;
   --context-menu-items-separator-margin:var(--space-2);
 }
 
-.bp_context_menu_module_menuBlock--71906[data-modern=true]{
+.bp_context_menu_module_menuBlock--99ecc[data-modern=true]{
   --context-menu-block-font-color:var(--bp-text-text-on-light);
   --context-menu-block-min-width:var(--blueprint-web-context-menu-min-width, 160px);
   --context-menu-block-max-width:var(--blueprint-web-context-menu-max-width);
@@ -9203,6 +9204,7 @@ table.bp_inline_table_module_inlineTable--fc100[data-modern=true] td:last-child,
   --context-menu-fullscreen-content-padding:var(--bp-space-030);
   --context-menu-item-radius:var(--bp-radius-06);
   --context-menu-item-border:var(--bp-border-02) solid #0000;
+  --context-menu-item-border-hover:var(--border-020) solid #0000;
   --context-menu-item-background-color-hover:var(--bp-surface-menu-item-surface-hover);
   --context-menu-item-background-color-pressed:var(--bp-surface-menu-item-surface-pressed);
   --context-menu-item-focus-border:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
@@ -9210,19 +9212,19 @@ table.bp_inline_table_module_inlineTable--fc100[data-modern=true] td:last-child,
   --context-menu-items-separator-margin:var(--bp-space-020);
 }
 
-.bp_context_menu_module_menuHeader--71906[data-modern=false]{
+.bp_context_menu_module_menuHeader--99ecc[data-modern=false]{
   --context-menu-header-padding:var(--space-3);
   --context-menu-header-gap:var(--space-2);
   --context-menu-header-shadow:var(--dropshadow-1);
 }
 
-.bp_context_menu_module_menuHeader--71906[data-modern=true]{
+.bp_context_menu_module_menuHeader--99ecc[data-modern=true]{
   --context-menu-header-padding:var(--bp-space-030) var(--bp-space-040);
   --context-menu-header-gap:var(--bp-space-030);
   --context-menu-header-shadow:var(--dropshadow-1);
 }
 
-.bp_context_menu_module_menuBlock--71906{
+.bp_context_menu_module_menuBlock--99ecc{
   backdrop-filter:var(--context-menu-block-backdrop-filter);
   background-color:var(--context-menu-block-background-color);
   border:var(--context-menu-block-border);
@@ -9235,7 +9237,7 @@ table.bp_inline_table_module_inlineTable--fc100[data-modern=true] td:last-child,
   min-width:var(--context-menu-block-min-width);
   padding:var(--context-menu-block-padding);
 }
-.bp_context_menu_module_menuBlock--71906[data-menu-fullscreen=true]{
+.bp_context_menu_module_menuBlock--99ecc[data-menu-fullscreen=true]{
   border:unset;
   border-radius:unset;
   display:flex;
@@ -9248,14 +9250,14 @@ table.bp_inline_table_module_inlineTable--fc100[data-modern=true] td:last-child,
   position:relative;
   width:100vw;
 }
-.bp_context_menu_module_menuBlock--71906[data-menu-fullscreen=true] .bp_context_menu_module_fullScreenContent--71906{
+.bp_context_menu_module_menuBlock--99ecc[data-menu-fullscreen=true] .bp_context_menu_module_fullScreenContent--99ecc{
   overflow-y:auto;
   padding:var(--context-menu-fullscreen-content-padding);
 }
-.bp_context_menu_module_menuBlock--71906 .bp_context_menu_module_menuItemsSeparator--71906{
+.bp_context_menu_module_menuBlock--99ecc .bp_context_menu_module_menuItemsSeparator--99ecc{
   margin:var(--context-menu-items-separator-margin);
 }
-.bp_context_menu_module_menuBlock--71906 .bp_context_menu_module_menuItem--71906{
+.bp_context_menu_module_menuBlock--99ecc .bp_context_menu_module_menuItem--99ecc{
   align-items:center;
   background-color:var(--context-menu-background-color);
   border:var(--context-menu-item-border);
@@ -9268,20 +9270,24 @@ table.bp_inline_table_module_inlineTable--fc100[data-modern=true] td:last-child,
   padding-inline:var(--context-menu-item-padding);
   position:relative;
 }
-.bp_context_menu_module_menuBlock--71906 .bp_context_menu_module_menuItem--71906[data-disabled]{
+.bp_context_menu_module_menuBlock--99ecc .bp_context_menu_module_menuItem--99ecc[data-disabled]{
   opacity:60%;
   pointer-events:none;
 }
-.bp_context_menu_module_menuBlock--71906 .bp_context_menu_module_menuItem--71906[data-highlighted]:not(:hover){
+.bp_context_menu_module_menuBlock--99ecc .bp_context_menu_module_menuItem--99ecc[data-highlighted]:not(:hover){
   background-color:var(--context-menu-item-background-color-hover);
   border:var(--context-menu-item-focus-border);
 }
-.bp_context_menu_module_menuBlock--71906 .bp_context_menu_module_menuItem--71906:active{
+.bp_context_menu_module_menuBlock--99ecc .bp_context_menu_module_menuItem--99ecc[data-state=open][data-highlighted]:not(:hover){
+  border:var(--context-menu-item-border);
+}
+.bp_context_menu_module_menuBlock--99ecc .bp_context_menu_module_menuItem--99ecc:active{
   background-color:var(--context-menu-item-background-color-pressed);
   border:var(--context-menu-item-border);
 }
-.bp_context_menu_module_menuBlock--71906 .bp_context_menu_module_menuItem--71906:hover{
+.bp_context_menu_module_menuBlock--99ecc .bp_context_menu_module_menuItem--99ecc:hover{
   background-color:var(--context-menu-item-background-color-hover);
+  border:var(--context-menu-item-border-hover);
 }
 div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):has([data-menu-fullscreen=true]){
   height:100%;
@@ -9289,7 +9295,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   width:100%;
 }
 
-.bp_context_menu_module_menuHeader--71906{
+.bp_context_menu_module_menuHeader--99ecc{
   align-items:center;
   box-shadow:var(--context-menu-header-shadow);
   display:grid;
@@ -9299,19 +9305,19 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   padding:var(--context-menu-header-padding);
 }
 
-.bp_context_menu_module_headerTextContent--71906{
+.bp_context_menu_module_headerTextContent--99ecc{
   display:grid;
 }
 
-.bp_context_menu_module_submenuCloseButton--71906{
+.bp_context_menu_module_submenuCloseButton--99ecc{
   grid-area:submenu-close;
 }
 
-.bp_context_menu_module_menuCloseButton--71906{
+.bp_context_menu_module_menuCloseButton--99ecc{
   grid-area:close;
 }
 
-.bp_context_menu_module_ellipsis--71906{
+.bp_context_menu_module_ellipsis--99ecc{
   overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap;

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

@@ -3,7 +3,6 @@ import * as ContextMenuPrimitve from '@radix-ui/react-context-menu';
 import clsx from 'clsx';
 import { forwardRef, useCallback } from 'react';
 import { MenuItemMainContent, MenuItemSideContent } from '../../util-components/menu-item-sections/menu-item-sections.js';
-import { composeEventHandlers } from '../../utils/composeEventHandlers.js';
 import styles from './context-menu.module.js';
 
 const MenuItemRoot = /*#__PURE__*/forwardRef((props, forwardedRef) => {
@@ -17,8 +16,6 @@ const MenuItemRoot = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     ...rest,
     ref: forwardedRef,
     className: clsx(styles.menuItem, className),
-    onPointerLeave: composeEventHandlers(props.onPointerLeave, preventDefault),
-    onPointerMove: composeEventHandlers(props.onPointerMove, preventDefault),
     // If click starts at trigger button, and ends on the item, it should not trigger the item.
     // Note: this also has a side effect of not allowing to start click and end on a different time.
     // TODO: see if possible to make https://github.com/radix-ui/primitives/blob/b32a93318cdfce383c2eec095710d35ffbd33a1c/packages/react/menu/src/Menu.tsx#L646

package/dist/lib-esm/primitives/context-menu/context-menu-sub-menu-root.js

@@ -1,17 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { Sub } from '@radix-ui/react-context-menu';
-import noop from 'lodash/noop';
-import { useContext, createContext, useCallback } from 'react';
+import 'lodash/noop';
+import { useCallback } from 'react';
 import { useControllableState } from '../../utils/useControllableState.js';
 import { SubMenuMenuProvider } from '../menu-utils/responsiveness/SubMenuContext.js';
 
-const ResponsiveSubmenuContext = /*#__PURE__*/createContext({
-  open: false,
-  setOpen: noop
-});
-const useResponsiveSubmenuContext = () => {
-  return useContext(ResponsiveSubmenuContext);
-};
 /**
  * Container for all the parts of a sub menu.
  * Based on Radix-UI [SubMenu component](https://www.radix-ui.com/docs/primitives/components/context-menu#sub).
@@ -45,4 +38,4 @@ const ContextMenuSubMenuRoot = props => {
 };
 ContextMenuSubMenuRoot.displayName = 'ContextMenuSubMenuRoot';
 
-export { ContextMenuSubMenuRoot, useResponsiveSubmenuContext };
+export { ContextMenuSubMenuRoot };

package/dist/lib-esm/primitives/context-menu/context-menu-sub-menu-trigger.js

@@ -1,12 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { SubTrigger } from '@radix-ui/react-context-menu';
-import { forwardRef, useEffect, useCallback } from 'react';
+import { forwardRef, useCallback } from 'react';
 import { MenuItemMainContent, MenuItemSideContent } from '../../util-components/menu-item-sections/menu-item-sections.js';
 import { composeEventHandlers } from '../../utils/composeEventHandlers.js';
-import { useForkRef } from '../../utils/useForkRef.js';
-import { useSubMenuFocus } from '../../utils/useSubMenuFocus.hook.js';
 import { useFullScreenContextMenu } from '../menu-utils/responsiveness/FullScreenContextMenuContext.js';
-import { useResponsiveSubmenuContext } from './context-menu-sub-menu-root.js';
 import styles from './context-menu.module.js';
 
 const ContextMenuSubTriggerRoot = /*#__PURE__*/forwardRef((props, forwardedRef) => {
@@ -14,28 +11,17 @@ const ContextMenuSubTriggerRoot = /*#__PURE__*/forwardRef((props, forwardedRef)
     children,
     ...rest
   } = props;
-  const [localRef, setRefFocusNoop] = useSubMenuFocus();
-  const {
-    open
-  } = useResponsiveSubmenuContext();
   const {
     isMenuFullScreenEnabled
   } = useFullScreenContextMenu();
-  useEffect(() => {
-    if (!open) {
-      localRef.current?.focus();
-    }
-  }, [localRef, open]);
   const handleOnPointerMove = useCallback(e => {
-    setRefFocusNoop();
-    //  we should call prevent default so hover doesn't trigger submenu, which is confusing on full screen.
     if (isMenuFullScreenEnabled) {
       e.preventDefault();
     }
-  }, [isMenuFullScreenEnabled, setRefFocusNoop]);
+  }, [isMenuFullScreenEnabled]);
   return jsx(SubTrigger, {
     ...rest,
-    ref: useForkRef(localRef, forwardedRef),
+    ref: forwardedRef,
     className: styles.menuItem,
     onPointerMove: composeEventHandlers(props.onPointerMove, handleOnPointerMove),
     children: children

package/dist/lib-esm/primitives/context-menu/context-menu.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"menuBlock":"bp_context_menu_module_menuBlock--71906","menuHeader":"bp_context_menu_module_menuHeader--71906","fullScreenContent":"bp_context_menu_module_fullScreenContent--71906","menuItemsSeparator":"bp_context_menu_module_menuItemsSeparator--71906","menuItem":"bp_context_menu_module_menuItem--71906","headerTextContent":"bp_context_menu_module_headerTextContent--71906","submenuCloseButton":"bp_context_menu_module_submenuCloseButton--71906","menuCloseButton":"bp_context_menu_module_menuCloseButton--71906","ellipsis":"bp_context_menu_module_ellipsis--71906"};
+var styles = {"menuBlock":"bp_context_menu_module_menuBlock--99ecc","menuHeader":"bp_context_menu_module_menuHeader--99ecc","fullScreenContent":"bp_context_menu_module_fullScreenContent--99ecc","menuItemsSeparator":"bp_context_menu_module_menuItemsSeparator--99ecc","menuItem":"bp_context_menu_module_menuItem--99ecc","headerTextContent":"bp_context_menu_module_headerTextContent--99ecc","submenuCloseButton":"bp_context_menu_module_submenuCloseButton--99ecc","menuCloseButton":"bp_context_menu_module_menuCloseButton--99ecc","ellipsis":"bp_context_menu_module_ellipsis--99ecc"};
 
 export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.130.2",
+    "version": "12.130.4",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -47,7 +47,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.15",
         "@ariakit/react-core": "0.4.15",
-        "@box/blueprint-web-assets": "^4.99.0",
+        "@box/blueprint-web-assets": "^4.99.2",
         "@internationalized/date": "^3.7.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -77,7 +77,7 @@
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^0.16.26",
+        "@box/storybook-utils": "^0.16.28",
         "@figma/code-connect": "1.3.12",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",

package/dist/lib-esm/utils/useSubMenuFocus.hook.js

@@ -1,39 +0,0 @@
-import noop from 'lodash/noop';
-import { useRef, useEffect } from 'react';
-
-const useSubMenuFocus = () => {
-  const localRef = useRef(null);
-  const originalFocus = useRef(noop);
-  const storeAndMakeCurrentFocusMethodNoop = () => {
-    if (!localRef.current) {
-      return;
-    }
-    originalFocus.current = localRef.current.focus;
-    localRef.current.focus = noop;
-  };
-  const restoreInitialFocusMethod = () => {
-    if (!localRef.current) {
-      return;
-    }
-    localRef.current.focus = originalFocus.current;
-  };
-  const setRefFocusMethodNoop = () => {
-    if (!localRef.current) {
-      return;
-    }
-    localRef.current.focus = noop;
-  };
-  useEffect(() => {
-    const keydownListener = function onKeydownHandler() {
-      restoreInitialFocusMethod();
-    };
-    document.addEventListener('keydown', keydownListener);
-    storeAndMakeCurrentFocusMethodNoop();
-    return () => {
-      document.removeEventListener('keydown', keydownListener);
-    };
-  }, []);
-  return [localRef, setRefFocusMethodNoop, storeAndMakeCurrentFocusMethodNoop];
-};
-
-export { useSubMenuFocus };