@box/blueprint-web 9.3.0 → 9.4.0

package/lib-esm/index.css

@@ -6797,7 +6797,7 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   --z-index-card-tooltip:2147483647;
 }
 
-.bp_toolbar_module_toolbarRoot--eeb80{
+.bp_toolbar_module_toolbarRoot--b6b06{
   background:var(--surface-surface);
   border:var(--border-1) solid var(--border-card-border);
   border-radius:var(--radius-4);
@@ -6805,16 +6805,16 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   padding:calc(var(--space-1) - var(--border-1));
 }
 
-.bp_toolbar_module_scrollButtonWrapper--eeb80,.bp_toolbar_module_toolbarRoot--eeb80{
+.bp_toolbar_module_scrollButtonWrapper--b6b06,.bp_toolbar_module_toolbarRoot--b6b06{
   align-items:center;
   display:flex;
   gap:var(--space-1);
 }
-.bp_toolbar_module_scrollButtonWrapper--eeb80.bp_toolbar_module_hidden--eeb80{
+.bp_toolbar_module_scrollButtonWrapper--b6b06.bp_toolbar_module_hidden--b6b06{
   display:none;
 }
 
-.bp_toolbar_module_scrollableChildrenWrapper--eeb80{
+.bp_toolbar_module_scrollableChildrenWrapper--b6b06{
   -ms-overflow-style:none;
   align-items:center;
   display:flex;
@@ -6827,27 +6827,26 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   scrollbar-width:none;
   white-space:nowrap;
 }
-.bp_toolbar_module_scrollableChildrenWrapper--eeb80::-webkit-scrollbar{
+.bp_toolbar_module_scrollableChildrenWrapper--b6b06::-webkit-scrollbar{
   display:none;
 }
-.bp_toolbar_module_scrollableChildrenWrapper--eeb80 > *{
-  flex-grow:0;
-  flex-shrink:0;
+.bp_toolbar_module_scrollableChildrenWrapper--b6b06 > *{
+  flex:none;
 }
 
-.bp_toolbar_module_separator--eeb80{
+.bp_toolbar_module_separator--b6b06{
   background-color:var(--border-divider-border);
   border-radius:var(--radius-2);
   height:var(--size-6);
   width:1px;
 }
 
-.bp_toolbar_module_toggleGroup--eeb80{
+.bp_toolbar_module_toggleGroup--b6b06{
   display:flex;
   gap:var(--space-1);
 }
 
-.bp_toolbar_module_toolbarItem--eeb80{
+.bp_toolbar_module_toolbarItem--b6b06{
   --toolbar-item-hover-opacity:0.3;
   align-items:center;
   background:var(--toolbar-button-color, var(--surface-toggle-surface));
@@ -6865,45 +6864,45 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   -webkit-user-select:none;
           user-select:none;
 }
-.bp_toolbar_module_toolbarItem--eeb80[data-disabled]{
+.bp_toolbar_module_toolbarItem--b6b06[data-disabled]{
   background:var(--surface-toggle-surface);
   opacity:var(--toolbar-item-hover-opacity);
   pointer-events:none;
 }
-.bp_toolbar_module_toolbarItem--eeb80:not([data-disabled]):focus-visible{
+.bp_toolbar_module_toolbarItem--b6b06:not([data-disabled]):focus-visible{
   box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) #2486fc;
 }
-.bp_toolbar_module_toolbarItem--eeb80:not([data-disabled]):hover{
+.bp_toolbar_module_toolbarItem--b6b06:not([data-disabled]):hover{
   background:var(--toolbar-button-color, var(--surface-toggle-surface-hover));
   border:var(--border-1) solid var(--toolbar-button-color, var(--surface-toggle-surface-hover));
 }
 
-.bp_toolbar_module_toolbarToggle--eeb80[data-state=on]{
+.bp_toolbar_module_toolbarToggle--b6b06[data-state=on]{
   background:var(--surface-toggle-surface-pressed);
 }
-.bp_toolbar_module_toolbarToggle--eeb80[data-state=on] svg *{
+.bp_toolbar_module_toolbarToggle--b6b06[data-state=on] svg *{
   fill:var(--icon-icon-on-dark);
 }
-.bp_toolbar_module_toolbarToggle--eeb80[data-state=on]:not([data-disabled]):hover{
+.bp_toolbar_module_toolbarToggle--b6b06[data-state=on]:not([data-disabled]):hover{
   background:var(--surface-toggle-surface-on-hover);
   border:var(--border-1) solid var(--surface-toggle-surface-on-hover);
 }
 
-.bp_toolbar_module_dropdownIndicator--eeb80.bp_toolbar_module_invertCaret--eeb80{
+.bp_toolbar_module_dropdownIndicator--b6b06.bp_toolbar_module_invertCaret--b6b06{
   transform:rotate(.5turn);
 }
 
-.bp_toolbar_module_triggerButtonSelectedWithColor--eeb80{
+.bp_toolbar_module_triggerButtonSelectedWithColor--b6b06{
   --trigger-button-hover-opacity:0.7;
 }
-.bp_toolbar_module_triggerButtonSelectedWithColor--eeb80[data-state=on] .bp_toolbar_module_dropdownIndicator--eeb80 path{
+.bp_toolbar_module_triggerButtonSelectedWithColor--b6b06[data-state=on] .bp_toolbar_module_dropdownIndicator--b6b06 path{
   fill:var(--icon-icon-on-light);
 }
-.bp_toolbar_module_triggerButtonSelectedWithColor--eeb80[data-state=on]:hover{
+.bp_toolbar_module_triggerButtonSelectedWithColor--b6b06[data-state=on]:hover{
   opacity:var(--trigger-button-hover-opacity);
 }
 
-.bp_toolbar_module_toolbarIcon--eeb80{
+.bp_toolbar_module_toolbarIcon--b6b06{
   align-items:center;
   display:flex;
   height:var(--size-5);
@@ -6911,7 +6910,7 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   width:var(--size-5);
 }
 
-.bp_toolbar_module_toolbarTextToggleItem--eeb80{
+.bp_toolbar_module_toolbarTextToggleItem--b6b06{
   border:var(--border-1) solid var(--border-toggletext-border-off);
   color:var(--text-text-on-light);
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
@@ -6925,24 +6924,24 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   text-transform:none;
   white-space:nowrap;
 }
-.bp_toolbar_module_toolbarTextToggleItem--eeb80:hover{
+.bp_toolbar_module_toolbarTextToggleItem--b6b06:hover{
   background:var(--surface-toggle-surface-off-hover);
   border-color:var(--border-toggletext-border-off-hover);
 }
-.bp_toolbar_module_toolbarTextToggleItem--eeb80:active{
+.bp_toolbar_module_toolbarTextToggleItem--b6b06:active{
   background:var(--surface-toggle-surface-off-pressed);
   border-color:var(--border-toggletext-border-off-pressed);
 }
-.bp_toolbar_module_toolbarTextToggleItem--eeb80[aria-checked=true]{
+.bp_toolbar_module_toolbarTextToggleItem--b6b06[aria-checked=true]{
   background:var(--surface-toggletext-surface-on);
   border:var(--border-1) solid var(--border-toggletext-border-on);
   color:var(--text-toggletext-text);
 }
-.bp_toolbar_module_toolbarTextToggleItem--eeb80[aria-checked=true]:hover{
+.bp_toolbar_module_toolbarTextToggleItem--b6b06[aria-checked=true]:hover{
   background:var(--surface-toggletext-surface-on-hover);
   border-color:var(--border-toggletext-border-on-hover);
 }
-.bp_toolbar_module_toolbarTextToggleItem--eeb80[aria-checked=true]:active{
+.bp_toolbar_module_toolbarTextToggleItem--b6b06[aria-checked=true]:active{
   background:var(--surface-toggletext-surface-on-pressed);
   border-color:var(--border-toggletext-border-on-pressed);
 }

package/lib-esm/radio-tiles/radio-tiles.d.ts

@@ -1,4 +1,4 @@
 import { type RadioTilesProps } from './types';
-export declare const RadioTiles: (<T extends string | null = string>({ children, name, value, variant, columns, disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, onChange, }: RadioTilesProps<T>) => import("react/jsx-runtime").JSX.Element) & {
+export declare const RadioTiles: (<T extends string | null = string>({ children, name, value, variant, columns, disabled, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, onChange, }: RadioTilesProps<T>) => import("react/jsx-runtime").JSX.Element) & {
     Option: <T extends string>({ children, value, label, icon, disabled: disabledProp, className, "aria-label": ariaLabel, }: import("./types").RadioTilesOptionProps<T>) => import("react/jsx-runtime").JSX.Element;
 };

package/lib-esm/radio-tiles/radio-tiles.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
-import { useMemo } from 'react';
 import clsx from 'clsx';
+import { useMemo } from 'react';
 import { RadioTilesOption } from './radio-tiles-option.js';
 import { RadioTilesContext } from './radio-tiles.context.js';
 import styles from './radio-tiles.module.js';
@@ -12,6 +12,7 @@ const RadioTilesRoot = ({
   variant = 'default',
   columns,
   disabled,
+  className,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
   onChange
@@ -22,7 +23,7 @@ const RadioTilesRoot = ({
   const containerClassNames = clsx(styles.radioTiles, {
     [styles.hasColumns]: Number(columns) > 0,
     [variant === 'compact' ? styles.compact : styles.default]: true
-  });
+  }, className);
   const contextValue = useMemo(() => ({
     name,
     selectedValue: value,

package/lib-esm/radio-tiles/types.d.ts

@@ -18,6 +18,7 @@ export type RadioTilesProps<T extends string | null = string | null> = {
     columns?: number;
     variant?: 'default' | 'compact';
     disabled?: boolean;
+    className?: string;
     onChange: (event: ChangeEvent<HTMLInputElement>) => void;
 } & (WithAriaLabel | WithAriaLabelledBy);
 /**

package/lib-esm/toolbar/toolbar.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"toolbarRoot":"bp_toolbar_module_toolbarRoot--eeb80","scrollButtonWrapper":"bp_toolbar_module_scrollButtonWrapper--eeb80","hidden":"bp_toolbar_module_hidden--eeb80","scrollableChildrenWrapper":"bp_toolbar_module_scrollableChildrenWrapper--eeb80","separator":"bp_toolbar_module_separator--eeb80","toggleGroup":"bp_toolbar_module_toggleGroup--eeb80","toolbarItem":"bp_toolbar_module_toolbarItem--eeb80","toolbarToggle":"bp_toolbar_module_toolbarToggle--eeb80","dropdownIndicator":"bp_toolbar_module_dropdownIndicator--eeb80","invertCaret":"bp_toolbar_module_invertCaret--eeb80","triggerButtonSelectedWithColor":"bp_toolbar_module_triggerButtonSelectedWithColor--eeb80","toolbarIcon":"bp_toolbar_module_toolbarIcon--eeb80","toolbarTextToggleItem":"bp_toolbar_module_toolbarTextToggleItem--eeb80"};
+var styles = {"toolbarRoot":"bp_toolbar_module_toolbarRoot--b6b06","scrollButtonWrapper":"bp_toolbar_module_scrollButtonWrapper--b6b06","hidden":"bp_toolbar_module_hidden--b6b06","scrollableChildrenWrapper":"bp_toolbar_module_scrollableChildrenWrapper--b6b06","separator":"bp_toolbar_module_separator--b6b06","toggleGroup":"bp_toolbar_module_toggleGroup--b6b06","toolbarItem":"bp_toolbar_module_toolbarItem--b6b06","toolbarToggle":"bp_toolbar_module_toolbarToggle--b6b06","dropdownIndicator":"bp_toolbar_module_dropdownIndicator--b6b06","invertCaret":"bp_toolbar_module_invertCaret--b6b06","triggerButtonSelectedWithColor":"bp_toolbar_module_triggerButtonSelectedWithColor--b6b06","toolbarIcon":"bp_toolbar_module_toolbarIcon--b6b06","toolbarTextToggleItem":"bp_toolbar_module_toolbarTextToggleItem--b6b06"};
 
 export { styles as default };

package/lib-esm/toolbar/utils/horizontal-scroll-context.js

@@ -1,6 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import noop from 'lodash/noop';
-import { useState, useRef, useCallback, useEffect, useMemo, createContext, useContext } from 'react';
+import { useState, useCallback, useMemo, createContext, useContext } from 'react';
+import { useScrollState } from './use-scroll-state.js';
 
 const HorizontalScrollContext = /*#__PURE__*/createContext({
   scrollPosition: 'none',
@@ -12,79 +13,15 @@ const HorizontalScrollProvider = ({
   children,
   scrollStep = 50
 }) => {
-  const [scrollPosition, setScrollPosition] = useState('none');
   const [scrollableElement, setScrollableElement] = useState(null);
-  const scrollAnimationFrame = useRef(null);
-  const updateScrollState = useCallback(() => {
-    if (scrollableElement) {
-      const {
-        scrollLeft,
-        scrollWidth,
-        clientWidth
-      } = scrollableElement;
-      if (scrollWidth <= clientWidth) {
-        setScrollPosition('none');
-      } else if (scrollLeft === 0) {
-        setScrollPosition('start');
-      } else if (scrollLeft + clientWidth >= scrollWidth) {
-        setScrollPosition('end');
-      } else {
-        setScrollPosition('intermediate');
-      }
-    }
-  }, [scrollableElement]);
-  const handleScroll = useCallback(() => {
-    if (scrollAnimationFrame.current !== null) {
-      cancelAnimationFrame(scrollAnimationFrame.current);
-    }
-    scrollAnimationFrame.current = requestAnimationFrame(updateScrollState);
-  }, [updateScrollState]);
-  const scrollLeft = useCallback(() => {
-    if (scrollableElement) {
-      scrollableElement.scrollBy({
-        left: -scrollStep,
-        behavior: 'smooth'
-      });
-    }
-  }, [scrollStep, scrollableElement]);
-  const scrollRight = useCallback(() => {
-    if (scrollableElement) {
-      scrollableElement.scrollBy({
-        left: scrollStep,
-        behavior: 'smooth'
-      });
-    }
-  }, [scrollStep, scrollableElement]);
+  const {
+    scrollPosition,
+    scrollLeft,
+    scrollRight
+  } = useScrollState(scrollableElement, scrollStep);
   const onAttach = useCallback(node => {
     setScrollableElement(node);
-    if (node) {
-      updateScrollState();
-    }
-  }, [updateScrollState]);
-  useEffect(() => {
-    if (!scrollableElement) {
-      return noop;
-    }
-    const handleFocusIn = event => {
-      const target = event.target;
-      if (scrollableElement.contains(target)) {
-        target.scrollIntoView({
-          behavior: 'smooth',
-          inline: 'nearest'
-        });
-      }
-    };
-    scrollableElement.addEventListener('focusin', handleFocusIn);
-    scrollableElement.addEventListener('scroll', handleScroll);
-    updateScrollState();
-    return () => {
-      scrollableElement.removeEventListener('focusin', handleFocusIn);
-      scrollableElement.removeEventListener('scroll', handleScroll);
-      if (scrollAnimationFrame.current !== null) {
-        cancelAnimationFrame(scrollAnimationFrame.current);
-      }
-    };
-  }, [scrollableElement, handleScroll, updateScrollState]);
+  }, []);
   const contextValue = useMemo(() => ({
     scrollPosition,
     scrollLeft,

package/lib-esm/toolbar/utils/use-scroll-state.d.ts

@@ -0,0 +1,5 @@
+export declare const useScrollState: (scrollableElement: HTMLDivElement | null, scrollStep?: number) => {
+    scrollPosition: "start" | "end" | "intermediate" | "none";
+    scrollLeft: () => void;
+    scrollRight: () => void;
+};

package/lib-esm/toolbar/utils/use-scroll-state.js

@@ -0,0 +1,84 @@
+import noop from 'lodash/noop';
+import { useState, useRef, useCallback, useEffect } from 'react';
+
+// The hook that manages the scroll position logic and provides scroll control functions
+const useScrollState = (scrollableElement, scrollStep = 50) => {
+  const [scrollPosition, setScrollPosition] = useState('none');
+  const scrollAnimationFrame = useRef(null);
+  const updateScrollState = useCallback(() => {
+    if (!scrollableElement) {
+      return;
+    }
+    const {
+      scrollLeft,
+      scrollWidth,
+      clientWidth
+    } = scrollableElement;
+    if (scrollWidth <= clientWidth) {
+      setScrollPosition('none');
+    } else if (scrollLeft === 0) {
+      setScrollPosition('start');
+    } else if (scrollLeft + clientWidth >= scrollWidth) {
+      setScrollPosition('end');
+    } else {
+      setScrollPosition('intermediate');
+    }
+  }, [scrollableElement]);
+  const handleScroll = useCallback(() => {
+    if (scrollAnimationFrame.current !== null) {
+      cancelAnimationFrame(scrollAnimationFrame.current);
+    }
+    scrollAnimationFrame.current = requestAnimationFrame(updateScrollState);
+  }, [updateScrollState]);
+  const scrollLeft = useCallback(() => {
+    if (!scrollableElement) {
+      return;
+    }
+    scrollableElement.scrollBy({
+      left: -scrollStep,
+      behavior: 'smooth'
+    });
+  }, [scrollStep, scrollableElement]);
+  const scrollRight = useCallback(() => {
+    if (!scrollableElement) {
+      return;
+    }
+    scrollableElement.scrollBy({
+      left: scrollStep,
+      behavior: 'smooth'
+    });
+  }, [scrollStep, scrollableElement]);
+  useEffect(() => {
+    if (!scrollableElement) {
+      return noop;
+    }
+    const handleFocusIn = event => {
+      const {
+        target
+      } = event;
+      if (target instanceof HTMLElement && scrollableElement.contains(target)) {
+        target.scrollIntoView({
+          behavior: 'smooth',
+          inline: 'nearest'
+        });
+      }
+    };
+    scrollableElement.addEventListener('focusin', handleFocusIn);
+    scrollableElement.addEventListener('scroll', handleScroll);
+    updateScrollState();
+    return () => {
+      scrollableElement.removeEventListener('focusin', handleFocusIn);
+      scrollableElement.removeEventListener('scroll', handleScroll);
+      if (scrollAnimationFrame.current !== null) {
+        cancelAnimationFrame(scrollAnimationFrame.current);
+      }
+    };
+  }, [scrollableElement, handleScroll, updateScrollState]);
+  return {
+    scrollPosition,
+    scrollLeft,
+    scrollRight
+  };
+};
+
+export { useScrollState };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "9.3.0",
+    "version": "9.4.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -63,7 +63,7 @@
         "react-stately": "^3.31.1",
         "tsx": "^4.16.5"
     },
-    "gitHead": "d9e9463682eab8c3cf54e738849001a2095220e8",
+    "gitHead": "54b7ea2666cfeaedb3792148822d4b50578a565b",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {