@box/blueprint-web 17.22.4 → 18.1.0

package/dist/lib-esm/toolbar/toolbar-scrollable-container.js

@@ -13,7 +13,8 @@ const ScrollButton = ({
   ariaLabel,
   onClick,
   icon: Icon,
-  separatorPosition
+  separatorPosition,
+  variant
 }) => jsxs("div", {
   className: clsx(styles.scrollButtonWrapper, {
     [styles.hidden]: hidden
@@ -21,14 +22,16 @@ const ScrollButton = ({
   children: [separatorPosition === 'before' && jsx(ToolbarSeparator, {}), jsx(IconButton, {
     "aria-label": ariaLabel,
     icon: Icon,
-    onClick: onClick
+    onClick: onClick,
+    variant: variant
   }), separatorPosition === 'after' && jsx(ToolbarSeparator, {})]
 });
 const ToolbarScrollableContainer = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     children,
     ariaLabelPrevButton,
-    ariaLabelNextButton
+    ariaLabelNextButton,
+    colorScheme = 'light'
   } = props;
   const {
     scrollPosition,
@@ -36,6 +39,7 @@ const ToolbarScrollableContainer = /*#__PURE__*/forwardRef((props, forwardedRef)
     scrollRight,
     onAttach
   } = useScrollContext();
+  const scrollButtonVariant = colorScheme === 'dark' ? 'on-dark' : 'default';
   const onMountRef = useRefWithEffectMemoized(forwardedRef, node => {
     onAttach(node);
   });
@@ -45,7 +49,8 @@ const ToolbarScrollableContainer = /*#__PURE__*/forwardRef((props, forwardedRef)
       hidden: scrollPosition === 'start' || scrollPosition === 'none',
       icon: PointerChevronLeft,
       onClick: scrollLeft,
-      separatorPosition: "after"
+      separatorPosition: "after",
+      variant: scrollButtonVariant
     }), jsx("div", {
       ref: onMountRef,
       className: clsx(styles.scrollableChildrenWrapper),
@@ -56,7 +61,8 @@ const ToolbarScrollableContainer = /*#__PURE__*/forwardRef((props, forwardedRef)
       hidden: scrollPosition === 'end' || scrollPosition === 'none',
       icon: PointerChevronRight,
       onClick: scrollRight,
-      separatorPosition: "before"
+      separatorPosition: "before",
+      variant: scrollButtonVariant
     })]
   });
 });

package/dist/lib-esm/toolbar/toolbar-toggle-item.js

@@ -1,15 +1,16 @@
 import { jsxs } from 'react/jsx-runtime';
-import { IconIconOnLight, Size5 } from '@box/blueprint-web-assets/tokens/tokens';
+import { Size5 } from '@box/blueprint-web-assets/tokens/tokens';
 import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
 import clsx from 'clsx';
 import { forwardRef, createElement } from 'react';
 import styles from './toolbar.module.js';
 
 const ToolbarToggleItem = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  // Inherit from Toolbar item text color so light/dark schemes both work without a hardcoded fill.
   const {
     children,
     icon,
-    color = IconIconOnLight,
+    color = 'currentColor',
     ...rest
   } = props;
   return jsxs(ToolbarPrimitive.ToggleItem, {

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"dropdownIndicator":"bp_toolbar_module_dropdownIndicator--eb4ca","invertCaret":"bp_toolbar_module_invertCaret--eb4ca","toolbarRoot":"bp_toolbar_module_toolbarRoot--eb4ca","ScrollableToolbarWithReducedPadding":"bp_toolbar_module_ScrollableToolbarWithReducedPadding--eb4ca","toolbarItem":"bp_toolbar_module_toolbarItem--eb4ca","toolbarButton":"bp_toolbar_module_toolbarButton--eb4ca","toolbarTextToggleItem":"bp_toolbar_module_toolbarTextToggleItem--eb4ca","toolbarLink":"bp_toolbar_module_toolbarLink--eb4ca","scrollButtonWrapper":"bp_toolbar_module_scrollButtonWrapper--eb4ca","hidden":"bp_toolbar_module_hidden--eb4ca","scrollableChildrenWrapper":"bp_toolbar_module_scrollableChildrenWrapper--eb4ca","separator":"bp_toolbar_module_separator--eb4ca","toggleGroup":"bp_toolbar_module_toggleGroup--eb4ca","toolbarToggle":"bp_toolbar_module_toolbarToggle--eb4ca","triggerButtonSelectedWithColor":"bp_toolbar_module_triggerButtonSelectedWithColor--eb4ca","toolbarIcon":"bp_toolbar_module_toolbarIcon--eb4ca","toolbarLinkText":"bp_toolbar_module_toolbarLinkText--eb4ca","toolbarInputContainer":"bp_toolbar_module_toolbarInputContainer--eb4ca","toolbarInput":"bp_toolbar_module_toolbarInput--eb4ca","toolbarInputErrorIcon":"bp_toolbar_module_toolbarInputErrorIcon--eb4ca","toolbarInputError":"bp_toolbar_module_toolbarInputError--eb4ca","toolbarInputErrorIconHidden":"bp_toolbar_module_toolbarInputErrorIconHidden--eb4ca"};
+var styles = {"dropdownIndicator":"bp_toolbar_module_dropdownIndicator--36b15","invertCaret":"bp_toolbar_module_invertCaret--36b15","toolbarRoot":"bp_toolbar_module_toolbarRoot--36b15","ScrollableToolbarWithReducedPadding":"bp_toolbar_module_ScrollableToolbarWithReducedPadding--36b15","toolbarItem":"bp_toolbar_module_toolbarItem--36b15","toolbarButton":"bp_toolbar_module_toolbarButton--36b15","toolbarTextToggleItem":"bp_toolbar_module_toolbarTextToggleItem--36b15","toolbarLink":"bp_toolbar_module_toolbarLink--36b15","scrollButtonWrapper":"bp_toolbar_module_scrollButtonWrapper--36b15","hidden":"bp_toolbar_module_hidden--36b15","scrollableChildrenWrapper":"bp_toolbar_module_scrollableChildrenWrapper--36b15","separator":"bp_toolbar_module_separator--36b15","toggleGroup":"bp_toolbar_module_toggleGroup--36b15","toolbarToggle":"bp_toolbar_module_toolbarToggle--36b15","triggerButtonSelectedWithColor":"bp_toolbar_module_triggerButtonSelectedWithColor--36b15","toolbarIcon":"bp_toolbar_module_toolbarIcon--36b15","toolbarLinkText":"bp_toolbar_module_toolbarLinkText--36b15","toolbarInputContainer":"bp_toolbar_module_toolbarInputContainer--36b15","toolbarInput":"bp_toolbar_module_toolbarInput--36b15","toolbarInputErrorIcon":"bp_toolbar_module_toolbarInputErrorIcon--36b15","toolbarInputError":"bp_toolbar_module_toolbarInputError--36b15","toolbarInputErrorIconHidden":"bp_toolbar_module_toolbarInputErrorIconHidden--36b15"};
 
 export { styles as default };

package/dist/lib-esm/toolbar/types.d.ts

@@ -1,5 +1,16 @@
 import { type ToolbarButtonProps as ToolbarPrimitiveButtonProps, type ToolbarLinkProps as ToolbarPrimitiveLinkProps, type ToolbarProps as ToolbarPrimitiveProps, type ToolbarSeparatorProps as ToolbarPrimitiveSeparatorProps, type ToolbarToggleItemProps as ToolbarPrimitiveToggleItemProps, type ToggleGroupProps as ToolbarToggleGroupPrimitiveProps } from '@radix-ui/react-toolbar';
 import { type CSSProperties, type FunctionComponent, type HTMLAttributes, type PropsWithChildren, type SVGProps } from 'react';
+/** Toolbar-only stopgap; not exported from the package root. */
+export type ToolbarColorScheme = 'light' | 'dark';
+interface ColorSchemeProps {
+    /**
+     * Color scheme of the toolbar. Independent of the page theme; the consumer chooses.
+     * Light remains the default so existing consumers are unchanged.
+     *
+     * @default 'light'
+     */
+    colorScheme?: ToolbarColorScheme;
+}
 interface ToolbarWithoutScrollProps {
     scrollable?: false;
 }
@@ -20,9 +31,9 @@ interface ToolbarWithScrollProps extends ToolbarScrollOptions {
     scrollable: true;
 }
 type ScrollProps = ToolbarWithoutScrollProps | ToolbarWithScrollProps;
-export type ToolbarProps = ToolbarPrimitiveProps & ScrollProps;
+export type ToolbarProps = ToolbarPrimitiveProps & ColorSchemeProps & ScrollProps;
 /** Scroll options can still be present at runtime when `scrollable` is falsy, e.g. `scrollable={isNarrow}`. */
-export type ToolbarRootRuntimeProps = ToolbarPrimitiveProps & ((ToolbarWithoutScrollProps & Partial<ToolbarScrollOptions>) | ToolbarWithScrollProps);
+export type ToolbarRootRuntimeProps = ToolbarPrimitiveProps & ColorSchemeProps & ((ToolbarWithoutScrollProps & Partial<ToolbarScrollOptions>) | ToolbarWithScrollProps);
 export type ToolbarSeparatorProps = ToolbarPrimitiveSeparatorProps;
 export type ToolbarToggleGroupProps = ToolbarToggleGroupPrimitiveProps;
 interface ToolbarButtonCSS extends CSSProperties {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "17.22.4",
+    "version": "18.1.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.11.13",
+        "@box/blueprint-web-assets": "^5.11.15",
         "@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.8",
+        "@box/storybook-utils": "^1.4.10",
         "@figma/code-connect": "1.4.4",
         "@playwright/test": "1.46.1",
         "@types/js-yaml": "^4.0.9",

package/dist/lib-esm/blueprint-modernization-context/blueprint-modernization-context.d.ts

@@ -1,28 +0,0 @@
-import { type ReactNode } from 'react';
-/**
- * @deprecated Modernized Blueprint UI is always on. Blueprint components no longer read this context.
- * The API remains for consumer compatibility and will be removed in Q3FY27.
- */
-export interface BlueprintModernizationContextValue {
-    /**
-     * @deprecated Ignored by Blueprint components — modern UI is always on. Will be removed in Q3FY27.
-     */
-    enableModernizedComponents: boolean;
-}
-/**
- * @deprecated Modernized Blueprint UI is always on. Blueprint components no longer read this context.
- * The API remains for consumer compatibility and will be removed in Q3FY27.
- */
-export declare const BlueprintModernizationContext: import("react").Context<BlueprintModernizationContextValue>;
-/**
- * @deprecated Modernized Blueprint UI is always on. Blueprint components ignore `enableModernizedComponents`.
- * Will be removed in Q3FY27.
- */
-export declare const BlueprintModernizationProvider: ({ children, enableModernizedComponents, }: {
-    children: ReactNode;
-    /**
-     * @deprecated Ignored by Blueprint components — modern UI is always on. Optional for TypeScript
-     * compatibility; will be removed in Q3FY27.
-     */
-    enableModernizedComponents?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;

package/dist/lib-esm/blueprint-modernization-context/blueprint-modernization-context.js

@@ -1,28 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { createContext, useMemo } from 'react';
-
-/**
- * @deprecated Modernized Blueprint UI is always on. Blueprint components no longer read this context.
- * The API remains for consumer compatibility and will be removed in Q3FY27.
- */
-const BlueprintModernizationContext = /*#__PURE__*/createContext({
-  enableModernizedComponents: true
-});
-/**
- * @deprecated Modernized Blueprint UI is always on. Blueprint components ignore `enableModernizedComponents`.
- * Will be removed in Q3FY27.
- */
-const BlueprintModernizationProvider = ({
-  children,
-  enableModernizedComponents = true
-}) => {
-  const value = useMemo(() => ({
-    enableModernizedComponents
-  }), [enableModernizedComponents]);
-  return jsx(BlueprintModernizationContext.Provider, {
-    value: value,
-    children: children
-  });
-};
-
-export { BlueprintModernizationContext, BlueprintModernizationProvider };

package/dist/lib-esm/blueprint-modernization-context/consts.d.ts

@@ -1 +0,0 @@
-export declare const BLUEPRINT_UPLIFT_FEATURE_FLAG = "launchpad_blueprint_ui_uplift";

package/dist/lib-esm/blueprint-modernization-context/consts.js

@@ -1,3 +0,0 @@
-const BLUEPRINT_UPLIFT_FEATURE_FLAG = 'launchpad_blueprint_ui_uplift';
-
-export { BLUEPRINT_UPLIFT_FEATURE_FLAG };

package/dist/lib-esm/blueprint-modernization-context/index.d.ts

@@ -1,7 +0,0 @@
-/**
- * @deprecated Modernized Blueprint UI is always on. This module remains for consumer compatibility
- * and will be removed in Q3FY27. See LEGACY_REMOVAL_PLAN.md.
- */
-export { BlueprintModernizationContext, BlueprintModernizationProvider, type BlueprintModernizationContextValue, } from './blueprint-modernization-context';
-export { BLUEPRINT_UPLIFT_FEATURE_FLAG } from './consts';
-export { useBlueprintModernization } from './useBlueprintModernization';

package/dist/lib-esm/blueprint-modernization-context/useBlueprintModernization.d.ts

@@ -1,5 +0,0 @@
-/**
- * @deprecated Modernized Blueprint UI is always on. Blueprint components no longer use this hook.
- * The API remains for consumer compatibility and will be removed in Q3FY27.
- */
-export declare const useBlueprintModernization: () => import("./blueprint-modernization-context").BlueprintModernizationContextValue;

package/dist/lib-esm/blueprint-modernization-context/useBlueprintModernization.js

@@ -1,16 +0,0 @@
-import { useContext } from 'react';
-import { BlueprintModernizationContext } from './blueprint-modernization-context.js';
-
-/**
- * @deprecated Modernized Blueprint UI is always on. Blueprint components no longer use this hook.
- * The API remains for consumer compatibility and will be removed in Q3FY27.
- */
-const useBlueprintModernization = () => {
-  const context = useContext(BlueprintModernizationContext);
-  if (context === undefined) {
-    throw new Error('useBlueprintModernization must be used within a BlueprintModernizationProvider');
-  }
-  return context;
-};
-
-export { useBlueprintModernization };