@box/blueprint-web 18.4.0 → 18.5.1

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/select/select.js

@@ -1,7 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { PencilCrossed, ChevronDown, Checkmark } from '@box/blueprint-web-assets/icons/Medium';
 import { bpSize030, bpIconIconOnLight } from '@box/blueprint-web-assets/tokens/tokens';
-import * as ScrollArea from '@radix-ui/react-scroll-area';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import clsx from 'clsx';
 import { forwardRef, useEffect, useCallback, useLayoutEffect } from 'react';
@@ -244,19 +243,14 @@ const Content = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       }),
       position: "popper",
       sideOffset: 8,
-      children: jsx(ScrollArea.Root, {
-        type: "auto",
-        children: jsx(SelectPrimitive.Viewport, {
-          asChild: true,
-          className: styles.viewport,
-          children: jsx(ScrollArea.Viewport, {
-            asChild: truncateText,
-            className: clsx({
-              [styles.withTruncatedText]: truncateText
-            }),
-            children: children
-          })
-        })
+      children: jsx(SelectPrimitive.Viewport, {
+        className: clsx(styles.viewport, {
+          [styles.withTruncatedText]: truncateText
+        }),
+        style: {
+          flex: 'none'
+        },
+        children: children
       })
     })
   });

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"ellipsis":"bp_select_module_ellipsis--08722","container":"bp_select_module_container--08722","disabled":"bp_select_module_disabled--08722","label":"bp_select_module_label--08722","triggerBtn":"bp_select_module_triggerBtn--08722","triggerValue":"bp_select_module_triggerValue--08722","triggerLeftElement":"bp_select_module_triggerLeftElement--08722","readonly":"bp_select_module_readonly--08722","error":"bp_select_module_error--08722","iconWrapper":"bp_select_module_iconWrapper--08722","iconCaret":"bp_select_module_iconCaret--08722","iconPencilCrossed":"bp_select_module_iconPencilCrossed--08722","content":"bp_select_module_content--08722","viewport":"bp_select_module_viewport--08722","option":"bp_select_module_option--08722","secondaryText":"bp_select_module_secondaryText--08722","textWrapper":"bp_select_module_textWrapper--08722","leftElement":"bp_select_module_leftElement--08722","hasLeftElement":"bp_select_module_hasLeftElement--08722","indicator":"bp_select_module_indicator--08722","separator":"bp_select_module_separator--08722","withTruncatedText":"bp_select_module_withTruncatedText--08722"};
+var styles = {"ellipsis":"bp_select_module_ellipsis--69358","container":"bp_select_module_container--69358","disabled":"bp_select_module_disabled--69358","label":"bp_select_module_label--69358","triggerBtn":"bp_select_module_triggerBtn--69358","triggerValue":"bp_select_module_triggerValue--69358","triggerLeftElement":"bp_select_module_triggerLeftElement--69358","readonly":"bp_select_module_readonly--69358","error":"bp_select_module_error--69358","iconWrapper":"bp_select_module_iconWrapper--69358","iconCaret":"bp_select_module_iconCaret--69358","iconPencilCrossed":"bp_select_module_iconPencilCrossed--69358","content":"bp_select_module_content--69358","viewport":"bp_select_module_viewport--69358","option":"bp_select_module_option--69358","secondaryText":"bp_select_module_secondaryText--69358","textWrapper":"bp_select_module_textWrapper--69358","leftElement":"bp_select_module_leftElement--69358","hasLeftElement":"bp_select_module_hasLeftElement--69358","indicator":"bp_select_module_indicator--69358","separator":"bp_select_module_separator--69358","withTruncatedText":"bp_select_module_withTruncatedText--69358"};
 
 export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "18.4.0",
+    "version": "18.5.1",
     "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.3",
+        "@box/blueprint-web-assets": "^5.12.5",
         "@internationalized/date": "^3.12.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -66,7 +66,6 @@
         "@radix-ui/react-focus-scope": "1.0.4",
         "@radix-ui/react-popover": "1.0.7",
         "@radix-ui/react-radio-group": "1.1.3",
-        "@radix-ui/react-scroll-area": "1.0.5",
         "@radix-ui/react-select": "2.0.0",
         "@radix-ui/react-slider": "1.1.2",
         "@radix-ui/react-switch": "1.0.3",
@@ -86,7 +85,7 @@
     "devDependencies": {
         "@box/box-test-client": "^3.2.7",
         "@box/playwright-utils": "^2.8.5",
-        "@box/storybook-utils": "^1.4.15",
+        "@box/storybook-utils": "^1.4.17",
         "@figma/code-connect": "1.4.4",
         "@playwright/test": "1.46.1",
         "@types/js-yaml": "^4.0.9",