@box/blueprint-web 18.5.1 → 18.5.3

package/dist/lib-esm/number-field/number-field-control.d.ts

@@ -1,8 +1,6 @@
 import { type ComponentPropsWithoutRef, type ForwardedRef } from 'react';
 import { type NumberFieldProps } from './types';
 type NumberFieldControlProps = {
-    ariaValueMax?: number;
-    ariaValueMin?: number;
     decrementAriaLabel: string;
     hasError: boolean;
     incrementAriaLabel: string;
@@ -23,5 +21,5 @@ type NumberFieldControlProps = {
     showDecrementTooltip: boolean;
     showIncrementTooltip: boolean;
 };
-export declare const NumberFieldControl: ({ ariaValueMax, ariaValueMin, decrementAriaLabel, hasError, incrementAriaLabel, inputMaxLength, inputProps, inputRef, isAnimationEnabled, isDecrementDisabled, isDecrementLoading, isIncrementDisabled, isIncrementLoading, labelId, loadingAriaLabel, maxReachedTooltipContent, minReachedTooltipContent, onBlur, onInputChange, showDecrementTooltip, showIncrementTooltip, }: NumberFieldControlProps) => React.ReactElement;
+export declare const NumberFieldControl: ({ decrementAriaLabel, hasError, incrementAriaLabel, inputMaxLength, inputProps, inputRef, isAnimationEnabled, isDecrementDisabled, isDecrementLoading, isIncrementDisabled, isIncrementLoading, labelId, loadingAriaLabel, maxReachedTooltipContent, minReachedTooltipContent, onBlur, onInputChange, showDecrementTooltip, showIncrementTooltip, }: NumberFieldControlProps) => React.ReactElement;
 export {};

package/dist/lib-esm/number-field/number-field-control.js

@@ -8,8 +8,6 @@ import { StepperButton } from './stepper-button.js';
 import styles from './number-field.module.js';
 
 const NumberFieldControl = ({
-  ariaValueMax,
-  ariaValueMin,
   decrementAriaLabel,
   hasError,
   incrementAriaLabel,
@@ -72,8 +70,6 @@ const NumberFieldControl = ({
       ...inputProps,
       ...racDomProps,
       ref: racInputRef,
-      "aria-valuemax": ariaValueMax,
-      "aria-valuemin": ariaValueMin,
       className: styles.input,
       "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
       invalid: hasError,

package/dist/lib-esm/number-field/number-field.js

@@ -119,8 +119,6 @@ const NumberField = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       hideLabel: hideLabel,
       id: labelId
     }), jsx(NumberFieldControl, {
-      ariaValueMax: max,
-      ariaValueMin: min,
       decrementAriaLabel: decrementAriaLabel,
       hasError: hasError,
       incrementAriaLabel: incrementAriaLabel,

package/dist/lib-esm/page/page-context.d.ts

@@ -21,6 +21,7 @@ export interface PageFastContextValuesType extends PagePortalRefs {
     mainSectionSidebarVisible: boolean;
     sidePanelExpanded: boolean;
     sidePanelExpandedUserControlled: boolean;
+    sidePanelId?: string;
 }
 export declare const PageProvider: ({ children }: {
     children: React.ReactNode;
@@ -37,6 +38,7 @@ export declare const useMainSectionSidebar: () => {
 };
 export declare const useSidePanel: () => {
     sidePanelExpanded: boolean;
+    sidePanelId: string | undefined;
     setSidePanelExpanded: (expanded: boolean) => void;
     toggleSidePanelExpanded: () => void;
 };

package/dist/lib-esm/page/page-context.js

@@ -67,6 +67,7 @@ const useMainSectionSidebar = () => {
 };
 const useSidePanel = () => {
   const [sidePanelExpanded, setPageStore] = usePageStore(store => store.sidePanelExpanded);
+  const [sidePanelId] = usePageStore(store => store.sidePanelId);
   const breakpoint = useBreakpoint();
   const setSidePanelExpanded = expanded => {
     setPageStore({
@@ -86,6 +87,7 @@ const useSidePanel = () => {
   };
   return {
     sidePanelExpanded,
+    sidePanelId,
     setSidePanelExpanded,
     toggleSidePanelExpanded
   };

package/dist/lib-esm/page/page-side-panel.js

@@ -1,9 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { FocusTrapRegion } from '@ariakit/react';
 import clsx from 'clsx';
-import { forwardRef, useEffect } from 'react';
+import { forwardRef, useEffect, useId } from 'react';
 import { useBreakpoint, Breakpoint } from '../utils/useBreakpoint.js';
-import { usePageStore, usePageStoreRef } from './page-context.js';
+import { usePageStore, usePageStoreRef, usePageStoreSetterSafe } from './page-context.js';
 import styles from './page.module.js';
 
 const useSidePanelBreakpointSync = () => {
@@ -36,24 +36,40 @@ const useSidePanelBreakpointSync = () => {
     }
   }, [breakpoint, defaultSidePanelExpanded, setPageStore, sidePanelExpandedUserControlled]);
 };
+const useSidePanelId = idProp => {
+  const generatedId = useId();
+  const id = idProp || `bp-page-side-panel-${generatedId}`;
+  const setPageStore = usePageStoreSetterSafe();
+  useEffect(() => {
+    setPageStore?.({
+      sidePanelId: id
+    });
+    return () => setPageStore?.({
+      sidePanelId: undefined
+    });
+  }, [id, setPageStore]);
+  return id;
+};
 const PageSidePanel = /*#__PURE__*/forwardRef(({
   className,
   children,
+  id: idProp,
   ...rest
 }, forwardedRef) => {
   useSidePanelBreakpointSync();
   const [sidePanelExpanded] = usePageStore(store => store.sidePanelExpanded);
   const setRef = usePageStoreRef('pageSidePanelRef', forwardedRef);
+  const id = useSidePanelId(idProp);
   const breakpoint = useBreakpoint();
   const isFullScreen = breakpoint < Breakpoint.Large && sidePanelExpanded;
   return jsx(FocusTrapRegion, {
     ...rest,
     ref: setRef,
-    "aria-expanded": sidePanelExpanded,
     className: clsx(styles.sidePanel, className, {
       [styles.expanded]: sidePanelExpanded
     }),
     enabled: isFullScreen,
+    id: id,
     children: children
   });
 });

package/dist/lib-esm/primitives/chips/filter-chip/filter-trigger-chip.js

@@ -21,9 +21,16 @@ const FilterTriggerChip = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     type
   } = useContext(FilterChipGroupContext);
   const chipClassName = type === 'multiple' ? styles.multiSelectChip : styles.singleSelectChip;
-  const selectionStateAttrs = {
+  // A host can turn the chip into another widget (e.g. an Ariakit Select trigger passes role="combobox"),
+  // in which case toggle state attributes are not allowed. The keys must be present to override Radix defaults.
+  const isToggleButton = !rest.role || rest.role === 'button';
+  const selectionStateAttrs = isToggleButton ? {
     'data-state': selected ? 'on' : 'off',
     'aria-pressed': Boolean(selected)
+  } : {
+    'data-state': selected ? 'on' : 'off',
+    'aria-pressed': undefined,
+    'aria-checked': undefined
   };
   return jsx(Chip, {
     ...rest,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "18.5.1",
+    "version": "18.5.3",
     "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.5",
+        "@box/blueprint-web-assets": "^5.13.0",
         "@internationalized/date": "^3.12.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -85,7 +85,7 @@
     "devDependencies": {
         "@box/box-test-client": "^3.2.7",
         "@box/playwright-utils": "^2.8.5",
-        "@box/storybook-utils": "^1.4.17",
+        "@box/storybook-utils": "^1.4.19",
         "@figma/code-connect": "1.4.4",
         "@playwright/test": "1.46.1",
         "@types/js-yaml": "^4.0.9",