@box/blueprint-web 16.18.3 → 16.19.0

package/dist/lib-esm/navigation-menu/navigation-menu-item.js

@@ -1,5 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import React__default, { forwardRef, useRef, useCallback } from 'react';
+import { useBlueprintConfiguration } from '../blueprint-configuration-context/useBlueprintConfiguration.js';
 import { DropdownMenu } from '../primitives/dropdown-menu/index.js';
 import { NavigationMenuLink } from './navigation-menu-link.js';
 
@@ -17,6 +18,10 @@ const NavigationMenuItem = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     children,
     ...rest
   } = props;
+  const {
+    componentsWithAnimationEnabled
+  } = useBlueprintConfiguration();
+  const isAnimationEnabled = componentsWithAnimationEnabled.includes('NavigationMenuItem');
   const linkRef = useRef();
   const openLinkOnSelect = useCallback(event => {
     event.preventDefault();
@@ -25,6 +30,7 @@ const NavigationMenuItem = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   return jsx(DropdownMenu.Item, {
     ...rest,
     ref: forwardedRef,
+    "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
     onSelect: openLinkOnSelect,
     children: React__default.Children.map(children, (child, index) => {
       if (index > 0) {

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

@@ -3,6 +3,9 @@ import { Size4, bpIconIconOnLightSecondary, IconIconOnLightSecondary } from '@bo
 import * as ContextMenuPrimitve from '@radix-ui/react-context-menu';
 import clsx from 'clsx';
 import { forwardRef, useCallback, createElement } from 'react';
+import '../../blueprint-configuration-context/blueprint-configuration-context.js';
+import '../../blueprint-configuration-context/consts.js';
+import { useBlueprintConfiguration } from '../../blueprint-configuration-context/useBlueprintConfiguration.js';
 import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import { MenuItemSideContent, MenuItemMainContent } from '../../util-components/menu-item-sections/menu-item-sections.js';
 import styles from './context-menu.module.js';
@@ -13,10 +16,15 @@ const MenuItemRoot = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     className,
     ...rest
   } = props;
+  const {
+    componentsWithAnimationEnabled
+  } = useBlueprintConfiguration();
+  const isAnimationEnabled = componentsWithAnimationEnabled.includes('ContextMenuItem');
   const preventDefault = useCallback(event => event.preventDefault(), []);
   return jsx(ContextMenuPrimitve.Item, {
     ...rest,
     ref: forwardedRef,
+    "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
     className: clsx(styles.menuItem, className),
     // 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.

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

@@ -1,6 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { SubTrigger } from '@radix-ui/react-context-menu';
 import { forwardRef, useCallback } from 'react';
+import '../../blueprint-configuration-context/blueprint-configuration-context.js';
+import '../../blueprint-configuration-context/consts.js';
+import { useBlueprintConfiguration } from '../../blueprint-configuration-context/useBlueprintConfiguration.js';
 import { MenuItemMainContent, MenuItemSideContent } from '../../util-components/menu-item-sections/menu-item-sections.js';
 import { composeEventHandlers } from '../../utils/composeEventHandlers.js';
 import { useFullScreenContextMenu } from '../menu-utils/responsiveness/FullScreenContextMenuContext.js';
@@ -11,6 +14,10 @@ const ContextMenuSubTriggerRoot = /*#__PURE__*/forwardRef((props, forwardedRef)
     children,
     ...rest
   } = props;
+  const {
+    componentsWithAnimationEnabled
+  } = useBlueprintConfiguration();
+  const isAnimationEnabled = componentsWithAnimationEnabled.includes('ContextMenuItem');
   const {
     isMenuFullScreenEnabled
   } = useFullScreenContextMenu();
@@ -22,6 +29,7 @@ const ContextMenuSubTriggerRoot = /*#__PURE__*/forwardRef((props, forwardedRef)
   return jsx(SubTrigger, {
     ...rest,
     ref: forwardedRef,
+    "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
     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--002da","menuHeader":"bp_context_menu_module_menuHeader--002da","fullScreenContent":"bp_context_menu_module_fullScreenContent--002da","menuItemsSeparator":"bp_context_menu_module_menuItemsSeparator--002da","menuItem":"bp_context_menu_module_menuItem--002da","startElement":"bp_context_menu_module_startElement--002da","endElement":"bp_context_menu_module_endElement--002da","headerTextContent":"bp_context_menu_module_headerTextContent--002da","submenuCloseButton":"bp_context_menu_module_submenuCloseButton--002da","menuCloseButton":"bp_context_menu_module_menuCloseButton--002da","ellipsis":"bp_context_menu_module_ellipsis--002da"};
+var styles = {"menuBlock":"bp_context_menu_module_menuBlock--76640","menuHeader":"bp_context_menu_module_menuHeader--76640","fullScreenContent":"bp_context_menu_module_fullScreenContent--76640","menuItemsSeparator":"bp_context_menu_module_menuItemsSeparator--76640","menuItem":"bp_context_menu_module_menuItem--76640","startElement":"bp_context_menu_module_startElement--76640","endElement":"bp_context_menu_module_endElement--76640","headerTextContent":"bp_context_menu_module_headerTextContent--76640","submenuCloseButton":"bp_context_menu_module_submenuCloseButton--76640","menuCloseButton":"bp_context_menu_module_menuCloseButton--76640","ellipsis":"bp_context_menu_module_ellipsis--76640"};
 
 export { styles as default };

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

@@ -5,6 +5,9 @@ import { Size5, Size4, bpIconIconOnLight, Gray100 } from '@box/blueprint-web-ass
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import clsx from 'clsx';
 import { forwardRef, useCallback } from 'react';
+import '../../blueprint-configuration-context/blueprint-configuration-context.js';
+import '../../blueprint-configuration-context/consts.js';
+import { useBlueprintConfiguration } from '../../blueprint-configuration-context/useBlueprintConfiguration.js';
 import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import { composeEventHandlers } from '../../utils/composeEventHandlers.js';
 import styles from './dropdown-menu.module.js';
@@ -27,6 +30,10 @@ const DropdownMenuCheckboxItem = /*#__PURE__*/forwardRef((props, forwardedRef) =
     enableModernizedComponents
   } = useBlueprintModernization();
   const preventDefault = useCallback(event => event.preventDefault(), []);
+  const {
+    componentsWithAnimationEnabled
+  } = useBlueprintConfiguration();
+  const isAnimationEnabled = componentsWithAnimationEnabled.includes('DropdownMenuItem');
   const isSizeSmall = internalSize === 'small';
   const checkmarkSize = enableModernizedComponents ? Size5 : Size4;
   const Checkmark$2 = enableModernizedComponents ? Checkmark : Checkmark$1;
@@ -34,6 +41,7 @@ const DropdownMenuCheckboxItem = /*#__PURE__*/forwardRef((props, forwardedRef) =
   return jsxs(DropdownMenuPrimitive.CheckboxItem, {
     ...rest,
     ref: forwardedRef,
+    "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
     className: clsx(styles.item, styles.checkboxItem, className),
     // 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.

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

@@ -3,6 +3,9 @@ import { Size8, Size4, bpTextTextDestructiveOnLight, TextTextDestructiveOnLight,
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import clsx from 'clsx';
 import { forwardRef, useCallback, useContext, createElement, createContext } from 'react';
+import '../../blueprint-configuration-context/blueprint-configuration-context.js';
+import '../../blueprint-configuration-context/consts.js';
+import { useBlueprintConfiguration } from '../../blueprint-configuration-context/useBlueprintConfiguration.js';
 import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import { Text } from '../../text/text.js';
 import { composeEventHandlers } from '../../utils/composeEventHandlers.js';
@@ -18,11 +21,17 @@ const DropdownMenuItemBase = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     children,
     className,
     variant,
+    // We need to access the data-bp-animated attribute from the props to handle animation of navigation menu item, but this is an internal API and should not be public.
+    'data-bp-animated': animatedDataAttribute,
     ...rest
   } = props;
   const {
     internalSize
   } = useMenuItemVariant();
+  const {
+    componentsWithAnimationEnabled
+  } = useBlueprintConfiguration();
+  const isAnimationEnabled = componentsWithAnimationEnabled.includes('DropdownMenuItem');
   const sizeStyles = internalSize === 'small' ? styles.itemOverflow : styles.mediumItemLayout;
   const preventDefault = useCallback(event => event.preventDefault(), []);
   return jsx(ItemVariantContext.Provider, {
@@ -30,6 +39,7 @@ const DropdownMenuItemBase = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     children: jsx(DropdownMenuPrimitive.Item, {
       ...rest,
       ref: forwardedRef,
+      "data-bp-animated": animatedDataAttribute ?? (isAnimationEnabled ? 'true' : 'false'),
       className: clsx(styles.item, sizeStyles, {
         [styles.destructive]: variant === 'destructive'
       }, className),

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

@@ -5,6 +5,9 @@ import { Size5, Size4, bpIconIconOnLight, Gray100 } from '@box/blueprint-web-ass
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import clsx from 'clsx';
 import { forwardRef, useCallback } from 'react';
+import '../../blueprint-configuration-context/blueprint-configuration-context.js';
+import '../../blueprint-configuration-context/consts.js';
+import { useBlueprintConfiguration } from '../../blueprint-configuration-context/useBlueprintConfiguration.js';
 import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import { composeEventHandlers } from '../../utils/composeEventHandlers.js';
 import styles from './dropdown-menu.module.js';
@@ -27,6 +30,10 @@ const DropdownMenuRadioSelectItem = /*#__PURE__*/forwardRef((props, forwardedRef
     enableModernizedComponents
   } = useBlueprintModernization();
   const preventDefault = useCallback(event => event.preventDefault(), []);
+  const {
+    componentsWithAnimationEnabled
+  } = useBlueprintConfiguration();
+  const isAnimationEnabled = componentsWithAnimationEnabled.includes('DropdownMenuItem');
   const isSizeSmall = internalSize === 'small';
   const checkmarkSize = enableModernizedComponents ? Size5 : Size4;
   const Checkmark$2 = enableModernizedComponents ? Checkmark : Checkmark$1;
@@ -34,6 +41,7 @@ const DropdownMenuRadioSelectItem = /*#__PURE__*/forwardRef((props, forwardedRef
   return jsxs(DropdownMenuPrimitive.RadioItem, {
     ...rest,
     ref: forwardedRef,
+    "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
     className: clsx(styles.item, styles.radioItem),
     value: value,
     // If click starts at trigger button, and ends on the item, it should not trigger the item.

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

@@ -1,6 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { forwardRef, useCallback } from 'react';
+import '../../blueprint-configuration-context/blueprint-configuration-context.js';
+import '../../blueprint-configuration-context/consts.js';
+import { useBlueprintConfiguration } from '../../blueprint-configuration-context/useBlueprintConfiguration.js';
 import { MenuItemMainContent, MenuItemSideContent } from '../../util-components/menu-item-sections/menu-item-sections.js';
 import { composeEventHandlers } from '../../utils/composeEventHandlers.js';
 import { useFullScreenDropdownMenu } from '../menu-utils/responsiveness/FullScreenDropdownMenuContext.js';
@@ -11,6 +14,10 @@ const DropdownMenuSubMenuTriggerRoot = /*#__PURE__*/forwardRef((props, forwarded
     children,
     ...rest
   } = props;
+  const {
+    componentsWithAnimationEnabled
+  } = useBlueprintConfiguration();
+  const isAnimationEnabled = componentsWithAnimationEnabled.includes('DropdownMenuItem');
   const {
     isMenuFullScreenEnabled
   } = useFullScreenDropdownMenu();
@@ -22,6 +29,7 @@ const DropdownMenuSubMenuTriggerRoot = /*#__PURE__*/forwardRef((props, forwarded
   return jsx(DropdownMenuPrimitive.SubTrigger, {
     ...rest,
     ref: forwardedRef,
+    "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
     className: styles.item,
     onPointerMove: composeEventHandlers(props.onPointerMove, handleOnPointerMove),
     children: children

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

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"content":"bp_dropdown_menu_module_content--c6414","fullScreenContent":"bp_dropdown_menu_module_fullScreenContent--c6414","subheader":"bp_dropdown_menu_module_subheader--c6414","uppercased":"bp_dropdown_menu_module_uppercased--c6414","dropdownMenuItemSeparator":"bp_dropdown_menu_module_dropdownMenuItemSeparator--c6414","ellipsis":"bp_dropdown_menu_module_ellipsis--c6414","itemBody":"bp_dropdown_menu_module_itemBody--c6414","itemOverflow":"bp_dropdown_menu_module_itemOverflow--c6414","menuItemCaption":"bp_dropdown_menu_module_menuItemCaption--c6414","captionClamped":"bp_dropdown_menu_module_captionClamped--c6414","checkmark":"bp_dropdown_menu_module_checkmark--c6414","mediumSpacing":"bp_dropdown_menu_module_mediumSpacing--c6414","item":"bp_dropdown_menu_module_item--c6414","radioItem":"bp_dropdown_menu_module_radioItem--c6414","radioItemMediumSpacing":"bp_dropdown_menu_module_radioItemMediumSpacing--c6414","menuItemMainContent":"bp_dropdown_menu_module_menuItemMainContent--c6414","checkboxItem":"bp_dropdown_menu_module_checkboxItem--c6414","checkboxItemMediumSpacing":"bp_dropdown_menu_module_checkboxItemMediumSpacing--c6414","mediumItemLayout":"bp_dropdown_menu_module_mediumItemLayout--c6414","startElement":"bp_dropdown_menu_module_startElement--c6414","menuItemMainContent_directChild":"bp_dropdown_menu_module_menuItemMainContent_directChild--c6414","endElement":"bp_dropdown_menu_module_endElement--c6414","destructive":"bp_dropdown_menu_module_destructive--c6414","menuHeader":"bp_dropdown_menu_module_menuHeader--c6414","headerTextContent":"bp_dropdown_menu_module_headerTextContent--c6414","submenuCloseButton":"bp_dropdown_menu_module_submenuCloseButton--c6414","menuCloseButton":"bp_dropdown_menu_module_menuCloseButton--c6414"};
+var styles = {"content":"bp_dropdown_menu_module_content--7a922","fullScreenContent":"bp_dropdown_menu_module_fullScreenContent--7a922","subheader":"bp_dropdown_menu_module_subheader--7a922","uppercased":"bp_dropdown_menu_module_uppercased--7a922","dropdownMenuItemSeparator":"bp_dropdown_menu_module_dropdownMenuItemSeparator--7a922","ellipsis":"bp_dropdown_menu_module_ellipsis--7a922","itemBody":"bp_dropdown_menu_module_itemBody--7a922","itemOverflow":"bp_dropdown_menu_module_itemOverflow--7a922","menuItemCaption":"bp_dropdown_menu_module_menuItemCaption--7a922","captionClamped":"bp_dropdown_menu_module_captionClamped--7a922","checkmark":"bp_dropdown_menu_module_checkmark--7a922","mediumSpacing":"bp_dropdown_menu_module_mediumSpacing--7a922","item":"bp_dropdown_menu_module_item--7a922","radioItem":"bp_dropdown_menu_module_radioItem--7a922","radioItemMediumSpacing":"bp_dropdown_menu_module_radioItemMediumSpacing--7a922","menuItemMainContent":"bp_dropdown_menu_module_menuItemMainContent--7a922","checkboxItem":"bp_dropdown_menu_module_checkboxItem--7a922","checkboxItemMediumSpacing":"bp_dropdown_menu_module_checkboxItemMediumSpacing--7a922","mediumItemLayout":"bp_dropdown_menu_module_mediumItemLayout--7a922","startElement":"bp_dropdown_menu_module_startElement--7a922","menuItemMainContent_directChild":"bp_dropdown_menu_module_menuItemMainContent_directChild--7a922","endElement":"bp_dropdown_menu_module_endElement--7a922","destructive":"bp_dropdown_menu_module_destructive--7a922","menuHeader":"bp_dropdown_menu_module_menuHeader--7a922","headerTextContent":"bp_dropdown_menu_module_headerTextContent--7a922","submenuCloseButton":"bp_dropdown_menu_module_submenuCloseButton--7a922","menuCloseButton":"bp_dropdown_menu_module_menuCloseButton--7a922"};
 
 export { styles as default };

package/dist/lib-esm/text-area/text-area-autosize/text-area-autosize.js

@@ -59,6 +59,7 @@ const TextAreaAutosize = /*#__PURE__*/forwardRef(function TextAreaAutosize(props
     readOnly,
     onFocus,
     onBlur,
+    'data-bp-animated': animatedDataAttribute,
     ...rest
   } = props;
   const {
@@ -270,6 +271,7 @@ const TextAreaAutosize = /*#__PURE__*/forwardRef(function TextAreaAutosize(props
   }), [endIcon]);
   return jsxs("div", {
     className: clsx(styles.border, hasError && styles.hasError, readOnly && styles.readOnly, rest.disabled && styles.disabled),
+    "data-bp-animated": animatedDataAttribute,
     "data-modern": enableModernizedComponents ? 'true' : 'false',
     style: {
       '--end-icon-width': endIconWidth ? `${endIconWidth}px` : '0px'

package/dist/lib-esm/text-area/text-area-autosize/text-area-autosize.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"textArea":"bp_text_area_autosize_module_textArea--b4c4e","loading":"bp_text_area_autosize_module_loading--b4c4e","readOnly":"bp_text_area_autosize_module_readOnly--b4c4e","withEndIcon":"bp_text_area_autosize_module_withEndIcon--b4c4e","error":"bp_text_area_autosize_module_error--b4c4e","loadingIndicator":"bp_text_area_autosize_module_loadingIndicator--b4c4e","loadingIndicatorReset":"bp_text_area_autosize_module_loadingIndicatorReset--b4c4e","border":"bp_text_area_autosize_module_border--b4c4e","hasError":"bp_text_area_autosize_module_hasError--b4c4e","disabled":"bp_text_area_autosize_module_disabled--b4c4e","endIconWrap":"bp_text_area_autosize_module_endIconWrap--b4c4e","endIcon":"bp_text_area_autosize_module_endIcon--b4c4e"};
+var styles = {"textArea":"bp_text_area_autosize_module_textArea--70f2b","loading":"bp_text_area_autosize_module_loading--70f2b","readOnly":"bp_text_area_autosize_module_readOnly--70f2b","withEndIcon":"bp_text_area_autosize_module_withEndIcon--70f2b","error":"bp_text_area_autosize_module_error--70f2b","loadingIndicator":"bp_text_area_autosize_module_loadingIndicator--70f2b","loadingIndicatorReset":"bp_text_area_autosize_module_loadingIndicatorReset--70f2b","border":"bp_text_area_autosize_module_border--70f2b","hasError":"bp_text_area_autosize_module_hasError--70f2b","disabled":"bp_text_area_autosize_module_disabled--70f2b","endIconWrap":"bp_text_area_autosize_module_endIconWrap--70f2b","endIcon":"bp_text_area_autosize_module_endIcon--70f2b"};
 
 export { styles as default };

package/dist/lib-esm/text-area/text-area.js

@@ -1,6 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
+import '../blueprint-configuration-context/blueprint-configuration-context.js';
+import '../blueprint-configuration-context/consts.js';
+import { useBlueprintConfiguration } from '../blueprint-configuration-context/useBlueprintConfiguration.js';
 import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { InlineError } from '../primitives/inline-error/inline-error.js';
 import { useLabelable } from '../util-components/labelable/useLabelable.js';
@@ -24,6 +27,10 @@ const TextArea = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     enableModernizedComponents
   } = useBlueprintModernization();
+  const {
+    componentsWithAnimationEnabled
+  } = useBlueprintConfiguration();
+  const isAnimationEnabled = componentsWithAnimationEnabled.includes('TextArea');
   const textAreaId = useUniqueId('text-area-');
   const inlineErrorId = useUniqueId('inline-error-');
   const hasError = !!error && !disabled;
@@ -46,6 +53,7 @@ const TextArea = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       ...rest,
       ref: forwardedRef,
       "aria-describedby": ariaDescribedBy,
+      "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
       "aria-invalid": hasError,
       "aria-required": required,
       disabled: disabled,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "16.18.3",
+    "version": "16.19.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -50,7 +50,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.21",
         "@ariakit/react-core": "0.4.21",
-        "@box/blueprint-web-assets": "^5.7.2",
+        "@box/blueprint-web-assets": "^5.7.4",
         "@internationalized/date": "^3.12.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -79,7 +79,7 @@
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^1.2.11",
+        "@box/storybook-utils": "^1.2.13",
         "@figma/code-connect": "1.4.4",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",