@box/blueprint-web 18.3.0 → 18.5.0

package/dist/lib-esm/list-item/main.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"tableSortingContainer":"bp_main_module_tableSortingContainer--dcffb","resizableTableContainer":"bp_main_module_resizableTableContainer--dcffb","resizableTable":"bp_main_module_resizableTable--dcffb","tableHeader":"bp_main_module_tableHeader--dcffb","column":"bp_main_module_column--dcffb","columnNameWrapper":"bp_main_module_columnNameWrapper--dcffb","columnName":"bp_main_module_columnName--dcffb","focusVisible":"bp_main_module_focusVisible--dcffb","sorted":"bp_main_module_sorted--dcffb","sortingFlexWrapper":"bp_main_module_sortingFlexWrapper--dcffb","columnResizer":"bp_main_module_columnResizer--dcffb","dropdownHeaderContainer":"bp_main_module_dropdownHeaderContainer--dcffb","droppableColumn":"bp_main_module_droppableColumn--dcffb","actionColumn":"bp_main_module_actionColumn--dcffb","hiddenColumn":"bp_main_module_hiddenColumn--dcffb","tableBody":"bp_main_module_tableBody--dcffb","row":"bp_main_module_row--dcffb","cell":"bp_main_module_cell--dcffb","actionsWrapper":"bp_main_module_actionsWrapper--dcffb","actionChildren":"bp_main_module_actionChildren--dcffb","actions":"bp_main_module_actions--dcffb","alwaysShowSelection":"bp_main_module_alwaysShowSelection--dcffb","isCellHidden":"bp_main_module_isCellHidden--dcffb","droppableTarget":"bp_main_module_droppableTarget--dcffb","rowDraggingHighlighted":"bp_main_module_rowDraggingHighlighted--dcffb"};
+var styles = {"tableSortingContainer":"bp_main_module_tableSortingContainer--fceb8","resizableTableContainer":"bp_main_module_resizableTableContainer--fceb8","resizableTable":"bp_main_module_resizableTable--fceb8","tableHeader":"bp_main_module_tableHeader--fceb8","column":"bp_main_module_column--fceb8","columnNameWrapper":"bp_main_module_columnNameWrapper--fceb8","columnName":"bp_main_module_columnName--fceb8","focusVisible":"bp_main_module_focusVisible--fceb8","sorted":"bp_main_module_sorted--fceb8","sortingFlexWrapper":"bp_main_module_sortingFlexWrapper--fceb8","columnResizer":"bp_main_module_columnResizer--fceb8","dropdownHeaderContainer":"bp_main_module_dropdownHeaderContainer--fceb8","droppableColumn":"bp_main_module_droppableColumn--fceb8","actionColumn":"bp_main_module_actionColumn--fceb8","hiddenColumn":"bp_main_module_hiddenColumn--fceb8","tableBody":"bp_main_module_tableBody--fceb8","row":"bp_main_module_row--fceb8","cell":"bp_main_module_cell--fceb8","actionsWrapper":"bp_main_module_actionsWrapper--fceb8","actionChildren":"bp_main_module_actionChildren--fceb8","actions":"bp_main_module_actions--fceb8","alwaysShowSelection":"bp_main_module_alwaysShowSelection--fceb8","isCellHidden":"bp_main_module_isCellHidden--fceb8","highlighted":"bp_main_module_highlighted--fceb8","droppableTarget":"bp_main_module_droppableTarget--fceb8","rowDraggingHighlighted":"bp_main_module_rowDraggingHighlighted--fceb8"};
 
 export { styles as default };

package/dist/lib-esm/list-item/row.d.ts

@@ -5,6 +5,11 @@ export type RowProps<T> = PrimitiveRowProps<T> & {
      * Set to `false` to style this item as an invalid drop target.
      */
     isDroppableTarget?: boolean;
+    /**
+     * Flashes a green tint that fades to the row's normal background, e.g. for a newly added item.
+     * The fade runs once each time this becomes `true`.
+     */
+    isHighlighted?: boolean;
 };
 /**
  * Based on React Aria Components `Row`

package/dist/lib-esm/list-item/row.js

@@ -15,6 +15,7 @@ const RowInner = (props, ref) => {
     children,
     className,
     isDroppableTarget = true,
+    isHighlighted = false,
     ...rest
   } = props;
   let newChildren = children;
@@ -33,7 +34,8 @@ const RowInner = (props, ref) => {
     ...rest,
     ref: ref,
     className: clsx(styles.row, {
-      [styles.droppableTarget]: isDroppableTarget
+      [styles.droppableTarget]: isDroppableTarget,
+      [styles.highlighted]: isHighlighted
     }, className),
     id: id,
     children: childrenWithOrdinals

package/dist/lib-esm/primitives/tabs/tab-list.js

@@ -1,8 +1,13 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { TabList as TabList$1 } from '@ariakit/react';
 import clsx from 'clsx';
-import { forwardRef } from 'react';
+import { forwardRef, useRef } 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 { useForkRef } from '../../utils/useForkRef.js';
 import styles from './tabs.module.js';
+import { useTabIndicatorStyle } from './use-tab-indicator.js';
 import { useTabs } from './use-tabs.js';
 
 const TabList = /*#__PURE__*/forwardRef(function TabList(props, ref) {
@@ -10,19 +15,40 @@ const TabList = /*#__PURE__*/forwardRef(function TabList(props, ref) {
     className,
     variant = 'default',
     containerClassname,
+    children,
     ...rest
   } = props;
   const tab = useTabs();
+  const listRef = useRef(null);
+  const {
+    componentsWithAnimationEnabled
+  } = useBlueprintConfiguration();
+  const isAnimationEnabled = componentsWithAnimationEnabled.includes('Tabs');
+  const selectedTabElement = tab?.useState(state => state.items.find(item => item.id === state.selectedId)?.element ?? null);
+  const indicatorStyle = useTabIndicatorStyle({
+    enabled: isAnimationEnabled,
+    listRef,
+    selectedTabElement
+  });
+  const listRefs = useForkRef(ref, listRef);
   if (!tab) {
     throw new Error('TabList must be wrapped in a Tabs component');
   }
   return jsx("div", {
     className: clsx(styles.tabsListContainer, containerClassname),
-    children: jsx(TabList$1, {
+    children: jsxs(TabList$1, {
       ...rest,
-      ref: ref,
+      ref: listRefs,
       className: clsx(variant === 'contentSwitcher' ? styles.contentSwitchTabList : styles.tabList, className),
-      store: tab
+      "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
+      store: tab,
+      children: [isAnimationEnabled && indicatorStyle ? jsx("div", {
+        "aria-hidden": "true",
+        className: styles.tabIndicator,
+        "data-bp-tab-indicator": "",
+        role: "presentation",
+        style: indicatorStyle
+      }) : null, children]
     })
   });
 });

package/dist/lib-esm/primitives/tabs/tabs.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"hiddenWidthSetter":"bp_tabs_module_hiddenWidthSetter--22ec8","contentSwitchTabList":"bp_tabs_module_contentSwitchTabList--22ec8","contentSwitchTab":"bp_tabs_module_contentSwitchTab--22ec8","tabsListContainer":"bp_tabs_module_tabsListContainer--22ec8","tabList":"bp_tabs_module_tabList--22ec8","tabSeparator":"bp_tabs_module_tabSeparator--22ec8","tab":"bp_tabs_module_tab--22ec8"};
+var styles = {"hiddenWidthSetter":"bp_tabs_module_hiddenWidthSetter--13d72","contentSwitchTabList":"bp_tabs_module_contentSwitchTabList--13d72","contentSwitchTab":"bp_tabs_module_contentSwitchTab--13d72","tabIndicator":"bp_tabs_module_tabIndicator--13d72","tabsListContainer":"bp_tabs_module_tabsListContainer--13d72","tabList":"bp_tabs_module_tabList--13d72","tabSeparator":"bp_tabs_module_tabSeparator--13d72","tab":"bp_tabs_module_tab--13d72"};
 
 export { styles as default };

package/dist/lib-esm/primitives/tabs/use-tab-indicator.d.ts

@@ -0,0 +1,17 @@
+import { type CSSProperties, type RefObject } from 'react';
+export type TabIndicatorStyle = Pick<CSSProperties, 'transform' | 'width'>;
+/**
+ * Measures the selected tab and returns the sliding-indicator `transform` +
+ * `width`. `useContentSizeObserver` is a threshold/`data-large` helper, so
+ * ResizeObserver lives here: the list for container resize, the selected tab
+ * for label/size changes that do not change the list box.
+ *
+ * The indicator must be a child of the scrolling tab list (or subtract
+ * `scrollLeft`). `offsetLeft` is relative to that list and does not include
+ * scroll, so horizontal scroll stays correct without extra math.
+ */
+export declare const useTabIndicatorStyle: ({ enabled, listRef, selectedTabElement, }: {
+    enabled: boolean;
+    listRef: RefObject<HTMLElement | null>;
+    selectedTabElement: HTMLElement | null | undefined;
+}) => TabIndicatorStyle | undefined;

package/dist/lib-esm/primitives/tabs/use-tab-indicator.js

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import { useEnhancedEffect } from '../../utils/useEnhancedEffect.js';
+
+/**
+ * Measures the selected tab and returns the sliding-indicator `transform` +
+ * `width`. `useContentSizeObserver` is a threshold/`data-large` helper, so
+ * ResizeObserver lives here: the list for container resize, the selected tab
+ * for label/size changes that do not change the list box.
+ *
+ * The indicator must be a child of the scrolling tab list (or subtract
+ * `scrollLeft`). `offsetLeft` is relative to that list and does not include
+ * scroll, so horizontal scroll stays correct without extra math.
+ */
+const useTabIndicatorStyle = ({
+  enabled,
+  listRef,
+  selectedTabElement
+}) => {
+  const [style, setStyle] = useState(undefined);
+  useEnhancedEffect(() => {
+    if (!enabled) {
+      setStyle(undefined);
+      return undefined;
+    }
+    const list = listRef.current;
+    const selectedTab = selectedTabElement ?? null;
+    const measure = () => {
+      if (!selectedTab) {
+        setStyle(undefined);
+        return;
+      }
+      const transform = `translateX(${selectedTab.offsetLeft}px)`;
+      const width = selectedTab.offsetWidth;
+      setStyle(previous => {
+        if (previous?.transform === transform && previous.width === width) {
+          return previous;
+        }
+        return {
+          transform,
+          width
+        };
+      });
+    };
+    measure();
+    if (typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+    const observer = new ResizeObserver(measure);
+    if (list) {
+      observer.observe(list);
+    }
+    if (selectedTab) {
+      observer.observe(selectedTab);
+    }
+    return () => {
+      observer.disconnect();
+    };
+  }, [enabled, listRef, selectedTabElement]);
+  return style;
+};
+
+export { useTabIndicatorStyle };

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

@@ -26,6 +26,7 @@ const BaseGridListItem = /*#__PURE__*/forwardRef(function BaseGridListItem(props
     children,
     className,
     isDroppableTarget = true,
+    isHighlighted = false,
     loading = false,
     pinned = false,
     pinAriaLabel,
@@ -134,6 +135,8 @@ const BaseGridListItem = /*#__PURE__*/forwardRef(function BaseGridListItem(props
       [styles.noActions]: isV2Layout && !hasActions
     }, {
       [styles.droppableTarget]: isDroppableTarget
+    }, {
+      [styles.highlighted]: isHighlighted
     }, className),
     textValue: textValue,
     children: jsxs(BaseGridListItemContext.Provider, {

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

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"smallList":"bp_base_grid_list_item_module_smallList--a9a55","smallListItem":"bp_base_grid_list_item_module_smallListItem--a9a55","loading":"bp_base_grid_list_item_module_loading--a9a55","thumbnail":"bp_base_grid_list_item_module_thumbnail--a9a55","thumbnailContent":"bp_base_grid_list_item_module_thumbnailContent--a9a55","header":"bp_base_grid_list_item_module_header--a9a55","subtitle":"bp_base_grid_list_item_module_subtitle--a9a55","actions":"bp_base_grid_list_item_module_actions--a9a55","selection":"bp_base_grid_list_item_module_selection--a9a55","inner":"bp_base_grid_list_item_module_inner--a9a55","actionsCheckboxWrapper":"bp_base_grid_list_item_module_actionsCheckboxWrapper--a9a55","largeList":"bp_base_grid_list_item_module_largeList--a9a55","largeListItem":"bp_base_grid_list_item_module_largeListItem--a9a55","fade":"bp_base_grid_list_item_module_fade--a9a55","description":"bp_base_grid_list_item_module_description--a9a55","snippet":"bp_base_grid_list_item_module_snippet--a9a55","snippetContent":"bp_base_grid_list_item_module_snippetContent--a9a55","gridList":"bp_base_grid_list_item_module_gridList--a9a55","gridListItem":"bp_base_grid_list_item_module_gridListItem--a9a55","statusPin":"bp_base_grid_list_item_module_statusPin--a9a55","isItemInteracted":"bp_base_grid_list_item_module_isItemInteracted--a9a55","tooltipContent":"bp_base_grid_list_item_module_tooltipContent--a9a55","tooltipArrow":"bp_base_grid_list_item_module_tooltipArrow--a9a55","gridListV2":"bp_base_grid_list_item_module_gridListV2--a9a55","gridListV2Item":"bp_base_grid_list_item_module_gridListV2Item--a9a55","droppableTarget":"bp_base_grid_list_item_module_droppableTarget--a9a55","noActions":"bp_base_grid_list_item_module_noActions--a9a55","thumbnailBadges":"bp_base_grid_list_item_module_thumbnailBadges--a9a55","statusBadge":"bp_base_grid_list_item_module_statusBadge--a9a55","fileTypePill":"bp_base_grid_list_item_module_fileTypePill--a9a55","alwaysShowSelection":"bp_base_grid_list_item_module_alwaysShowSelection--a9a55","textCentered":"bp_base_grid_list_item_module_textCentered--a9a55","innerCentered":"bp_base_grid_list_item_module_innerCentered--a9a55","gridListV2Small":"bp_base_grid_list_item_module_gridListV2Small--a9a55","gridListV2XSmall":"bp_base_grid_list_item_module_gridListV2XSmall--a9a55","gridListV2XSmallBordered":"bp_base_grid_list_item_module_gridListV2XSmallBordered--a9a55","gridV2ClickShield":"bp_base_grid_list_item_module_gridV2ClickShield--a9a55","listV2ClickShield":"bp_base_grid_list_item_module_listV2ClickShield--a9a55","listV2":"bp_base_grid_list_item_module_listV2--a9a55","listV2Item":"bp_base_grid_list_item_module_listV2Item--a9a55","listV2Divider":"bp_base_grid_list_item_module_listV2Divider--a9a55","content":"bp_base_grid_list_item_module_content--a9a55","staticList":"bp_base_grid_list_item_module_staticList--a9a55","staticListItem":"bp_base_grid_list_item_module_staticListItem--a9a55"};
+var styles = {"smallList":"bp_base_grid_list_item_module_smallList--c86e5","smallListItem":"bp_base_grid_list_item_module_smallListItem--c86e5","loading":"bp_base_grid_list_item_module_loading--c86e5","thumbnail":"bp_base_grid_list_item_module_thumbnail--c86e5","thumbnailContent":"bp_base_grid_list_item_module_thumbnailContent--c86e5","header":"bp_base_grid_list_item_module_header--c86e5","subtitle":"bp_base_grid_list_item_module_subtitle--c86e5","actions":"bp_base_grid_list_item_module_actions--c86e5","selection":"bp_base_grid_list_item_module_selection--c86e5","inner":"bp_base_grid_list_item_module_inner--c86e5","actionsCheckboxWrapper":"bp_base_grid_list_item_module_actionsCheckboxWrapper--c86e5","largeList":"bp_base_grid_list_item_module_largeList--c86e5","largeListItem":"bp_base_grid_list_item_module_largeListItem--c86e5","fade":"bp_base_grid_list_item_module_fade--c86e5","description":"bp_base_grid_list_item_module_description--c86e5","snippet":"bp_base_grid_list_item_module_snippet--c86e5","snippetContent":"bp_base_grid_list_item_module_snippetContent--c86e5","gridList":"bp_base_grid_list_item_module_gridList--c86e5","gridListItem":"bp_base_grid_list_item_module_gridListItem--c86e5","statusPin":"bp_base_grid_list_item_module_statusPin--c86e5","isItemInteracted":"bp_base_grid_list_item_module_isItemInteracted--c86e5","tooltipContent":"bp_base_grid_list_item_module_tooltipContent--c86e5","tooltipArrow":"bp_base_grid_list_item_module_tooltipArrow--c86e5","gridListV2":"bp_base_grid_list_item_module_gridListV2--c86e5","gridListV2Item":"bp_base_grid_list_item_module_gridListV2Item--c86e5","droppableTarget":"bp_base_grid_list_item_module_droppableTarget--c86e5","noActions":"bp_base_grid_list_item_module_noActions--c86e5","thumbnailBadges":"bp_base_grid_list_item_module_thumbnailBadges--c86e5","statusBadge":"bp_base_grid_list_item_module_statusBadge--c86e5","fileTypePill":"bp_base_grid_list_item_module_fileTypePill--c86e5","alwaysShowSelection":"bp_base_grid_list_item_module_alwaysShowSelection--c86e5","textCentered":"bp_base_grid_list_item_module_textCentered--c86e5","innerCentered":"bp_base_grid_list_item_module_innerCentered--c86e5","highlighted":"bp_base_grid_list_item_module_highlighted--c86e5","gridListV2Small":"bp_base_grid_list_item_module_gridListV2Small--c86e5","gridListV2XSmall":"bp_base_grid_list_item_module_gridListV2XSmall--c86e5","gridListV2XSmallBordered":"bp_base_grid_list_item_module_gridListV2XSmallBordered--c86e5","gridV2ClickShield":"bp_base_grid_list_item_module_gridV2ClickShield--c86e5","listV2ClickShield":"bp_base_grid_list_item_module_listV2ClickShield--c86e5","listV2":"bp_base_grid_list_item_module_listV2--c86e5","listV2Item":"bp_base_grid_list_item_module_listV2Item--c86e5","listV2Divider":"bp_base_grid_list_item_module_listV2Divider--c86e5","content":"bp_base_grid_list_item_module_content--c86e5","staticList":"bp_base_grid_list_item_module_staticList--c86e5","staticListItem":"bp_base_grid_list_item_module_staticListItem--c86e5"};
 
 export { styles as default };

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

@@ -152,5 +152,10 @@ export interface BaseGridListItemProps extends GridListItemProps, Omit<BaseGridL
      * Set to `false` to style this item as an invalid drop target.
      */
     isDroppableTarget?: boolean;
+    /**
+     * Flashes a green tint that fades to the item's normal background, e.g. for a newly added item.
+     * The fade runs once each time this becomes `true`. Supported in `grid-v2` and `list-v2` layouts.
+     */
+    isHighlighted?: boolean;
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "18.3.0",
+    "version": "18.5.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -55,7 +55,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.21",
         "@ariakit/react-core": "0.4.21",
-        "@box/blueprint-web-assets": "^5.12.2",
+        "@box/blueprint-web-assets": "^5.12.4",
         "@internationalized/date": "^3.12.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -86,7 +86,7 @@
     "devDependencies": {
         "@box/box-test-client": "^3.2.7",
         "@box/playwright-utils": "^2.8.5",
-        "@box/storybook-utils": "^1.4.14",
+        "@box/storybook-utils": "^1.4.16",
         "@figma/code-connect": "1.4.4",
         "@playwright/test": "1.46.1",
         "@types/js-yaml": "^4.0.9",