@jobber/components 8.21.1 → 8.23.0

package/dist/InputNumberExperimental-cjs.js

@@ -8,9 +8,10 @@ var Button = require('./Button-cjs.js');
 var Icon = require('./Icon-cjs.js');
 var useRenderElement = require('./useRenderElement-cjs.js');
 var useButton = require('./useButton-cjs.js');
-var useLabel = require('./useLabel-cjs.js');
+var useLabelableId = require('./useLabelableId-cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 var NumberFieldInput = require('./NumberFieldInput-cjs.js');
+var useLabel = require('./useLabel-cjs.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -54,7 +55,7 @@ const LabelableProvider = function LabelableProvider(props) {
   const registrationsRef = useRenderElement.useRefWithInit(() => new Map());
   const {
     messageIds: parentMessageIds
-  } = useLabel.useLabelableContext();
+  } = useLabelableId.useLabelableContext();
   const registerControlId = useButton.useStableCallback((source, nextId) => {
     const registrations = registrationsRef.current;
     if (nextId === undefined) {
@@ -96,14 +97,14 @@ const LabelableProvider = function LabelableProvider(props) {
     setMessageIds,
     getDescriptionProps
   }), [controlId, registerControlId, labelId, setLabelId, messageIds, setMessageIds, getDescriptionProps]);
-  return /*#__PURE__*/jsxRuntime.jsx(useLabel.LabelableContext.Provider, {
+  return /*#__PURE__*/jsxRuntime.jsx(useLabelableId.LabelableContext.Provider, {
     value: contextValue,
     children: props.children
   });
 };
 if (process.env.NODE_ENV !== "production") LabelableProvider.displayName = "LabelableProvider";
 
-const validityKeys = Object.keys(useLabel.DEFAULT_VALIDITY_STATE);
+const validityKeys = Object.keys(useLabelableId.DEFAULT_VALIDITY_STATE);
 function isOnlyValueMissing(state) {
   if (!state || state.valid || !state.valueMissing) {
     return false;
@@ -126,7 +127,7 @@ function useFieldValidation(params) {
   const {
     formRef,
     clearErrors
-  } = useLabel.useFormContext();
+  } = useLabelableId.useFormContext();
   const {
     setValidityData,
     validate,
@@ -141,7 +142,7 @@ function useFieldValidation(params) {
   const {
     controlId,
     getDescriptionProps
-  } = useLabel.useLabelableContext();
+  } = useLabelableId.useLabelableContext();
   const timeout = useButton.useTimeout();
   const inputRef = React__namespace.useRef(null);
   const commit = useButton.useStableCallback(async (value, revalidate = false) => {
@@ -161,7 +162,7 @@ function useFieldValidation(params) {
         const nextValidityData = {
           value,
           state: {
-            ...useLabel.DEFAULT_VALIDITY_STATE,
+            ...useLabelableId.DEFAULT_VALIDITY_STATE,
             valid: true
           },
           error: '',
@@ -174,7 +175,7 @@ function useFieldValidation(params) {
           if (currentFieldData) {
             formRef.current.fields.set(controlId, {
               ...currentFieldData,
-              ...useLabel.getCombinedFieldValidityData(nextValidityData, false) // invalid = false
+              ...useLabelableId.getCombinedFieldValidityData(nextValidityData, false) // invalid = false
             });
           }
         }
@@ -286,7 +287,7 @@ function useFieldValidation(params) {
         formRef.current.fields.set(controlId, {
           ...currentFieldData,
           // Keep Form-level errors part of overall field validity for submit blocking/focus logic.
-          ...useLabel.getCombinedFieldValidityData(nextValidityData, invalid)
+          ...useLabelableId.getCombinedFieldValidityData(nextValidityData, invalid)
         });
       }
     }
@@ -338,7 +339,7 @@ const FieldRootInner = /*#__PURE__*/React__namespace.forwardRef(function FieldRo
     errors,
     validationMode: formValidationMode,
     submitAttemptedRef
-  } = useLabel.useFormContext();
+  } = useLabelableId.useFormContext();
   const {
     render,
     className,
@@ -384,7 +385,7 @@ const FieldRootInner = /*#__PURE__*/React__namespace.forwardRef(function FieldRo
   const hasFormError = !!name && Object.hasOwn(errors, name) && errors[name] !== undefined;
   const invalid = invalidProp === true || hasFormError;
   const [validityData, setValidityData] = React__namespace.useState({
-    state: useLabel.DEFAULT_VALIDITY_STATE,
+    state: useLabelableId.DEFAULT_VALIDITY_STATE,
     error: '',
     errors: [],
     value: null,
@@ -443,9 +444,9 @@ const FieldRootInner = /*#__PURE__*/React__namespace.forwardRef(function FieldRo
     ref: forwardedRef,
     state,
     props: elementProps,
-    stateAttributesMapping: useLabel.fieldValidityMapping
+    stateAttributesMapping: useLabelableId.fieldValidityMapping
   });
-  return /*#__PURE__*/jsxRuntime.jsx(useLabel.FieldRootContext.Provider, {
+  return /*#__PURE__*/jsxRuntime.jsx(useLabelableId.FieldRootContext.Provider, {
     value: contextValue,
     children: element
   });
@@ -482,10 +483,10 @@ const FieldLabel = /*#__PURE__*/React__namespace.forwardRef(function FieldLabel(
     nativeLabel = true,
     ...elementProps
   } = componentProps;
-  const fieldRootContext = useLabel.useFieldRootContext(false);
+  const fieldRootContext = useLabelableId.useFieldRootContext(false);
   const {
     labelId
-  } = useLabel.useLabelableContext();
+  } = useLabelableId.useLabelableContext();
   const labelRef = React__namespace.useRef(null);
   const labelProps = useLabel.useLabel({
     id: labelId ?? idProp,
@@ -515,14 +516,14 @@ const FieldLabel = /*#__PURE__*/React__namespace.forwardRef(function FieldLabel(
     ref: [forwardedRef, labelRef],
     state: fieldRootContext.state,
     props: [labelProps, elementProps],
-    stateAttributesMapping: useLabel.fieldValidityMapping
+    stateAttributesMapping: useLabelableId.fieldValidityMapping
   });
   return element;
 });
 if (process.env.NODE_ENV !== "production") FieldLabel.displayName = "FieldLabel";
 
 const stateAttributesMapping = {
-  ...useLabel.fieldValidityMapping,
+  ...useLabelableId.fieldValidityMapping,
   ...useButton.transitionStatusMapping
 };
 
@@ -545,13 +546,13 @@ const FieldError = /*#__PURE__*/React__namespace.forwardRef(function FieldError(
     validityData,
     state: fieldState,
     name
-  } = useLabel.useFieldRootContext(false);
+  } = useLabelableId.useFieldRootContext(false);
   const {
     setMessageIds
-  } = useLabel.useLabelableContext();
+  } = useLabelableId.useLabelableContext();
   const {
     errors
-  } = useLabel.useFormContext();
+  } = useLabelableId.useFormContext();
   const formError = name ? errors[name] : null;
   let rendered = false;
   if (formError || match === true) {
@@ -637,10 +638,10 @@ const FieldDescription = /*#__PURE__*/React__namespace.forwardRef(function Field
     ...elementProps
   } = componentProps;
   const id = useButton.useBaseUiId(idProp);
-  const fieldRootContext = useLabel.useFieldRootContext(false);
+  const fieldRootContext = useLabelableId.useFieldRootContext(false);
   const {
     setMessageIds
-  } = useLabel.useLabelableContext();
+  } = useLabelableId.useLabelableContext();
   useButton.useIsoLayoutEffect(() => {
     if (!id) {
       return undefined;
@@ -656,7 +657,7 @@ const FieldDescription = /*#__PURE__*/React__namespace.forwardRef(function Field
     props: [{
       id
     }, elementProps],
-    stateAttributesMapping: useLabel.fieldValidityMapping
+    stateAttributesMapping: useLabelableId.fieldValidityMapping
   });
   return element;
 });

package/dist/InputNumberExperimental-es.js

@@ -6,10 +6,11 @@ import { A as ActivityIndicator } from './ActivityIndicator-es.js';
 import { B as Button } from './Button-es.js';
 import { I as Icon } from './Icon-es.js';
 import { f as formatErrorMessage, a as useRefWithInit, m as mergeProps, E as EMPTY_OBJECT, u as useRenderElement } from './useRenderElement-es.js';
-import { u as useBaseUiId, a as useStableCallback, b as useTimeout, S as SafeReact, e as error, t as transitionStatusMapping, c as useTransitionStatus, d as useIsoLayoutEffect, f as useOpenChangeComplete } from './useButton-es.js';
-import { u as useLabelableContext, L as LabelableContext, a as useFormContext, D as DEFAULT_VALIDITY_STATE, g as getCombinedFieldValidityData, f as fieldValidityMapping, F as FieldRootContext, b as useFieldRootContext, c as useLabel } from './useLabel-es.js';
+import { u as useBaseUiId, b as useStableCallback, h as useTimeout, S as SafeReact, j as error, t as transitionStatusMapping, k as useTransitionStatus, a as useIsoLayoutEffect, f as useOpenChangeComplete } from './useButton-es.js';
+import { u as useLabelableContext, L as LabelableContext, a as useFormContext, D as DEFAULT_VALIDITY_STATE, g as getCombinedFieldValidityData, f as fieldValidityMapping, F as FieldRootContext, b as useFieldRootContext } from './useLabelableId-es.js';
 import { jsx } from 'react/jsx-runtime';
 import { N as NumberFieldRoot, a as NumberFieldGroup, b as NumberFieldInput, c as NumberFieldIncrement, d as NumberFieldDecrement } from './NumberFieldInput-es.js';
+import { u as useLabel } from './useLabel-es.js';
 
 const FieldsetRootContext = /*#__PURE__*/React.createContext({
   legendId: undefined,

package/dist/InternalBackdrop-es.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import React__default from 'react';
 import { f as floor, t as tabbable, i as isTabbable, a as focusable } from './index.esm-es.js';
-import { f as getComputedStyle, i as isShadowRoot, g as getNodeName, c as isNode, a as isHTMLElement, k as getWindow, j as isWebKit$1, b as isElement, d as isLastTraversableNode, e as getParentNode, o as isOverflowElement } from './floating-ui.utils.dom-es.js';
+import { f as getComputedStyle, i as isShadowRoot, g as getNodeName, c as isNode, a as isHTMLElement, o as getWindow, j as isWebKit$1, b as isElement, d as isLastTraversableNode, e as getParentNode, m as isOverflowElement } from './floating-ui.utils.dom-es.js';
 import { f as formatErrorMessage, a as useRefWithInit, i as isReactVersionAtLeast, N as NOOP, u as useRenderElement, E as EMPTY_OBJECT, b as useMergedRefs } from './useRenderElement-es.js';
-import { d as useIsoLayoutEffect, a as useStableCallback, y as ARROW_UP, A as ARROW_DOWN, s as stopEvent, q as ARROW_LEFT, r as ARROW_RIGHT, o as ownerDocument, m as contains, l as activeElement, a0 as isSafari, F as visuallyHidden, n as createChangeEventDetails, v as focusOut, h as useId, k as isTypeableCombobox, j as useValueAsRef, b as useTimeout, ac as useAnimationFrame, i as getFloatingFocusElement, ad as resolveRef, a4 as triggerHover, a7 as outsidePress, w as isVirtualClick, x as isVirtualPointerEvent, V as isWebKit, X as isTypeableElement, g as getTarget, W as isMouseLikePointerType, ae as isClickLikeEvent, a1 as triggerPress, af as isReactEvent, a2 as escapeKey, T as Timeout, ag as isEventTargetWithin, ah as isRootElement, ai as FOCUSABLE_ATTRIBUTE, aj as ACTIVE_KEY, ak as SELECTED_KEY, C as isIOS, O as useValueChanged, al as TransitionStatusDataAttributes, am as AnimationFrame } from './useButton-es.js';
+import { a as useIsoLayoutEffect, b as useStableCallback, C as ARROW_UP, A as ARROW_DOWN, s as stopEvent, w as ARROW_LEFT, x as ARROW_RIGHT, o as ownerDocument, r as contains, q as activeElement, a6 as isSafari, I as visuallyHidden, d as createChangeEventDetails, y as focusOut, l as useId, p as isTypeableCombobox, n as useValueAsRef, h as useTimeout, W as useAnimationFrame, m as getFloatingFocusElement, ai as resolveRef, aa as triggerHover, U as outsidePress, z as isVirtualClick, B as isVirtualPointerEvent, X as isWebKit, a1 as isTypeableElement, g as getTarget, a0 as isMouseLikePointerType, aj as isClickLikeEvent, a7 as triggerPress, ak as isReactEvent, a8 as escapeKey, T as Timeout, al as isEventTargetWithin, am as isRootElement, an as FOCUSABLE_ATTRIBUTE, ao as ACTIVE_KEY, ap as SELECTED_KEY, F as isIOS, Q as useValueChanged, aq as TransitionStatusDataAttributes, ar as AnimationFrame } from './useButton-es.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as ReactDOM from 'react-dom';
 
@@ -4201,4 +4201,4 @@ const InternalBackdrop = /*#__PURE__*/React.forwardRef(function InternalBackdrop
 });
 if (process.env.NODE_ENV !== "production") InternalBackdrop.displayName = "InternalBackdrop";
 
-export { BASE_UI_SWIPE_IGNORE_SELECTOR as $, triggerOpenStateMapping as A, createAttribute as B, CommonPopupDataAttributes as C, DISABLED_TRANSITIONS_STYLE as D, getNodeChildren as E, FloatingRootStore as F, POPUP_COLLISION_AVOIDANCE as G, FloatingNode as H, InternalBackdrop as I, DROPDOWN_COLLISION_AVOIDANCE as J, FloatingTreeStore as K, fastComponent as L, useFloatingNodeId as M, FloatingTree as N, fastComponentRef as O, PopupTriggerMap as P, getTabbableBeforeElement as Q, ReactStore as R, isOutsideEvent as S, TYPEAHEAD_RESET_MS as T, getTabbableAfterElement as U, getNextTabbable as V, pressableTriggerOpenStateMapping as W, FocusGuard as X, PATIENT_CLICK_THRESHOLD as Y, useStore as Z, Store as _, useFloatingTree as a, getMaxListIndex as b, createGridCellMap as c, isListIndexDisabled as d, getGridNavigatedIndex as e, getGridCellIndices as f, getMinListIndex as g, getGridCellIndexOfCorner as h, isIndexOutOfListBounds as i, findNonDisabledListIndex as j, enqueueFocus as k, isElementVisible as l, useDirection as m, createSelector as n, FloatingFocusManager as o, popupStateMapping as p, FloatingPortal as q, inertValue as r, useOpenInteractionType as s, useDismiss as t, useFloatingParentNodeId as u, useScrollLock as v, useInteractions as w, useOnFirstRender as x, useClick as y, CLICK_TRIGGER_IDENTIFIER as z };
+export { BASE_UI_SWIPE_IGNORE_SELECTOR as $, inertValue as A, DROPDOWN_COLLISION_AVOIDANCE as B, CommonPopupDataAttributes as C, DISABLED_TRANSITIONS_STYLE as D, CLICK_TRIGGER_IDENTIFIER as E, FloatingFocusManager as F, triggerOpenStateMapping as G, createAttribute as H, InternalBackdrop as I, getNodeChildren as J, POPUP_COLLISION_AVOIDANCE as K, FloatingNode as L, FloatingTreeStore as M, fastComponent as N, useFloatingNodeId as O, PopupTriggerMap as P, FloatingTree as Q, ReactStore as R, Store as S, TYPEAHEAD_RESET_MS as T, fastComponentRef as U, getTabbableBeforeElement as V, isOutsideEvent as W, getTabbableAfterElement as X, getNextTabbable as Y, FocusGuard as Z, PATIENT_CLICK_THRESHOLD as _, FloatingRootStore as a, useFloatingTree as b, getMaxListIndex as c, createGridCellMap as d, isListIndexDisabled as e, getGridNavigatedIndex as f, getMinListIndex as g, getGridCellIndices as h, isIndexOutOfListBounds as i, getGridCellIndexOfCorner as j, findNonDisabledListIndex as k, enqueueFocus as l, isElementVisible as m, useDirection as n, createSelector as o, popupStateMapping as p, useOpenInteractionType as q, useStore as r, useClick as s, useDismiss as t, useFloatingParentNodeId as u, useInteractions as v, useOnFirstRender as w, pressableTriggerOpenStateMapping as x, FloatingPortal as y, useScrollLock as z };

package/dist/Menu/index.cjs

@@ -25,11 +25,14 @@ require('../BottomSheet-cjs.js');
 require('../ScrollAreaViewport-cjs.js');
 require('../InternalBackdrop-cjs.js');
 require('../useButton-cjs.js');
+require('../CSPContext-cjs.js');
 require('../clamp-cjs.js');
 require('../OverlaySeparator-cjs.js');
 require('../Separator-cjs.js');
+require('../DrawerTitle-cjs.js');
 require('../MenuSubmenuTrigger-cjs.js');
 require('../useCompositeListItem-cjs.js');
+require('../ToolbarRootContext-cjs.js');
 
 
 

package/dist/Menu/index.mjs

@@ -23,8 +23,11 @@ import '../BottomSheet-es.js';
 import '../ScrollAreaViewport-es.js';
 import '../InternalBackdrop-es.js';
 import '../useButton-es.js';
+import '../CSPContext-es.js';
 import '../clamp-es.js';
 import '../OverlaySeparator-es.js';
 import '../Separator-es.js';
+import '../DrawerTitle-es.js';
 import '../MenuSubmenuTrigger-es.js';
 import '../useCompositeListItem-es.js';
+import '../ToolbarRootContext-es.js';

package/dist/Menu-cjs.js

@@ -14,8 +14,9 @@ var floatingUi_reactDom = require('./floating-ui.react-dom-cjs.js');
 var useRenderElement = require('./useRenderElement-cjs.js');
 var buttonRenderAdapter = require('./buttonRenderAdapter-cjs.js');
 var BottomSheet = require('./BottomSheet-cjs.js');
-var OverlaySeparator = require('./OverlaySeparator-cjs.js');
 var ScrollAreaViewport = require('./ScrollAreaViewport-cjs.js');
+var OverlaySeparator = require('./OverlaySeparator-cjs.js');
+var DrawerTitle = require('./DrawerTitle-cjs.js');
 var MenuSubmenuTrigger$1 = require('./MenuSubmenuTrigger-cjs.js');
 
 var styles$2 = {"wrapper":"h-nk89U2n6Q-","floatingContainer":"krpkWzoaVcc-","menu":"_7sU7mp1w0jM-","legacySection":"_4x-vvEmn4gM-","separator":"i0QNcs4S-wk-","triggerWrapper":"_7CsejipGrzM-","ariaMenu":"bO7lGVQC42c-","ariaItem":"u6fDgbWmPck-","ariaSection":"-TSNrZBKZJI-","ariaSectionHeader":"zs7dS2pKjEw-","sectionHeader":"MZJgunQcmdQ-","legacyAction":"_-1GOlrzd098-","action":"NYXV5w4pd0c-","destructive":"baYK2zQ6-GA-","overlay":"A7T14ALVEKg-","fullWidth":"Lgbn9IRPI5Y-","screenReaderOnly":"o-ps580KdWI-","spinning":"f1oTdSTeUOM-"};
@@ -201,7 +202,7 @@ function MenuPortal({ children }) {
 
 var styles$1 = {"submenuHeader":"Vw9MFreevMU-","submenuTitle":"wpNMcBuNwwY-","spinning":"nOEBQCC4Cos-"};
 
-var styles = {"wrapper":"fpi0W91w2ag-","floatingContainer":"ba-Kj6mvQUw-","menu":"-DayvgvIcVo-","legacySection":"VsRRunpS6Yo-","separator":"jnggqK3YTIU-","triggerWrapper":"oRQQVVq-yxA-","composableMenu":"atokGnmWVls-","composableDropdownPopup":"Uk14qmg-Fqc-","composableDropdownScroller":"CJKnGqldjF0-","bottomSheetMenuContent":"J3CW8IU48RM-","composableItem":"zSMkwrZodBk-","composableItemNoLeadingSlot":"qbDWOwkPouM-","composableSection":"_353OIWGazfE-","composableGroup":"Q0ssxff-Qo4-","composableRadioGroup":"_2VyPM45lQBE-","composableSectionHeader":"efA-ozx9w0w-","composableGroupHeader":"BklkzNPbJ5Q-","composableGroupLabel":"_5-p9DbyRav4-","sectionHeader":"Bq7pLWj3jm4-","legacyAction":"P4Sdaq0-lZs-","action":"M1BgN-oCmKw-","destructive":"U9ihZZavz9w-","overlay":"_7we5hh6kYs8-","bottomSheetSubmenuPopup":"nf47GCAYI-c-","menuHidden":"cuw8ct7rX6s-","bottomSheetSubmenuBody":"a6uZEXgX8sg-","fullWidth":"_5OJ7B6mFcwk-","screenReaderOnly":"Bzvkz60bwWE-","spinning":"_0-VzuzHdi8o-"};
+var styles = {"wrapper":"fpi0W91w2ag-","floatingContainer":"ba-Kj6mvQUw-","composableBackdrop":"wqvf3hcDMM0-","menu":"-DayvgvIcVo-","legacySection":"VsRRunpS6Yo-","separator":"jnggqK3YTIU-","triggerWrapper":"oRQQVVq-yxA-","composableMenu":"atokGnmWVls-","composableDropdownPopup":"Uk14qmg-Fqc-","composableDropdownScroller":"CJKnGqldjF0-","bottomSheetMenuContent":"J3CW8IU48RM-","composableItem":"zSMkwrZodBk-","composableItemNoLeadingSlot":"qbDWOwkPouM-","composableSection":"_353OIWGazfE-","composableGroup":"Q0ssxff-Qo4-","composableRadioGroup":"_2VyPM45lQBE-","composableSectionHeader":"efA-ozx9w0w-","composableGroupHeader":"BklkzNPbJ5Q-","composableGroupLabel":"_5-p9DbyRav4-","sectionHeader":"Bq7pLWj3jm4-","legacyAction":"P4Sdaq0-lZs-","action":"M1BgN-oCmKw-","destructive":"U9ihZZavz9w-","overlay":"_7we5hh6kYs8-","bottomSheetSubmenuPopup":"nf47GCAYI-c-","menuHidden":"cuw8ct7rX6s-","bottomSheetSubmenuBody":"a6uZEXgX8sg-","fullWidth":"_5OJ7B6mFcwk-","screenReaderOnly":"Bzvkz60bwWE-","spinning":"_0-VzuzHdi8o-"};
 
 function mergeUnsafeProps(props) {
     return useRenderElement.mergeProps({
@@ -652,9 +653,9 @@ function BottomSheetSubmenuContent({ children, className, style, UNSAFE_style, U
     const bottomSheetStyle = getBottomSheetContentStyle(resolvedBaseProps.style);
     return (React.createElement(BottomSheet.BottomSheet.Popup, { initialFocus: getInitialBottomSheetFocus(menuRef, focusModalityRef), className: classnames(styles.menu, styles.bottomSheetSubmenuPopup) },
         React.createElement(BottomSheet.BottomSheet.Content, { style: bottomSheetStyle },
-            title ? (React.createElement(MenuSubmenuTrigger$1.DrawerTitle, { className: styles.screenReaderOnly }, title)) : null,
+            title ? (React.createElement(DrawerTitle.DrawerTitle, { className: styles.screenReaderOnly }, title)) : null,
             React.createElement("div", { className: styles$1.submenuHeader },
-                React.createElement(MenuSubmenuTrigger$1.DrawerClose, { "aria-label": title ? `Back to ${title}` : "Back", render: React.createElement(Button.Button, { ariaLabel: title ? `Back to ${title}` : "Back", icon: "arrowLeft", type: "tertiary", variation: "subtle" }) }),
+                React.createElement(DrawerTitle.DrawerClose, { "aria-label": title ? `Back to ${title}` : "Back", render: React.createElement(Button.Button, { ariaLabel: title ? `Back to ${title}` : "Back", icon: "arrowLeft", type: "tertiary", variation: "subtle" }) }),
                 title ? (React.createElement("div", { className: styles$1.submenuTitle },
                     React.createElement(Typography.Typography, { element: "span", size: "base", fontWeight: "semiBold", textColor: "text" }, title))) : null),
             React.createElement(BottomSheetMenuSurface, { menuRef: menuRef, className: classnames(styles.bottomSheetSubmenuBody, styles.composableSection, resolvedBaseProps.className) }, children))));
@@ -743,6 +744,7 @@ function MenuDropdownContent({ children, style, className, preferredPlacement, U
     const floatingLayerStyle = getFloatingLayerStyle(resolvedBaseProps.style);
     const popupStyle = getMenuPopupStyle(resolvedBaseProps.style);
     return (React.createElement(MenuSubmenuTrigger$1.MenuPortal, null,
+        React.createElement(MenuSubmenuTrigger$1.MenuBackdrop, { className: styles.composableBackdrop }),
         React.createElement(MenuSubmenuTrigger$1.MenuPositioner, { className: styles.floatingContainer, style: floatingLayerStyle, align: align, side: side, sideOffset: MENU_OFFSET },
             React.createElement(MenuSubmenuTrigger$1.MenuPopup, { className: classnames(styles.menu, styles.composableDropdownPopup, resolvedBaseProps.className), style: popupStyle },
                 React.createElement("div", { className: classnames(styles.composableMenu, styles.composableDropdownScroller) }, children)))));

package/dist/Menu-es.js

@@ -11,10 +11,11 @@ import { c as calculateMaxHeight } from './maxHeight-es.js';
 import { o as offset, f as flip, d as size, b as autoUpdate } from './floating-ui.react-dom-es.js';
 import { m as mergeProps } from './useRenderElement-es.js';
 import { n as normalizeBaseUiButtonProps, i as isAtlantisButtonRenderTarget, s as stripNativeTypeFromButtonRenderTarget, r as renderAtlantisButtonTarget } from './buttonRenderAdapter-es.js';
-import { B as BottomSheet } from './BottomSheet-es.js';
-import { O as OverlaySeparator } from './OverlaySeparator-es.js';
+import { a as BottomSheet } from './BottomSheet-es.js';
 import { D as DrawerTrigger } from './ScrollAreaViewport-es.js';
-import { D as DrawerTitle, a as DrawerClose, M as MenuTrigger$1, b as MenuLinkItem, c as MenuItem$1, d as MenuRadioItem$1, e as MenuRadioItemIndicator, f as MenuSubmenuTrigger$1, g as MenuRoot, h as MenuPortal$1, i as MenuPositioner, j as MenuPopup, k as MenuRadioGroup$1, l as MenuGroup$1, m as MenuSubmenuRoot, n as MenuGroupLabel$1 } from './MenuSubmenuTrigger-es.js';
+import { O as OverlaySeparator } from './OverlaySeparator-es.js';
+import { D as DrawerTitle, a as DrawerClose } from './DrawerTitle-es.js';
+import { M as MenuTrigger$1, a as MenuLinkItem, b as MenuItem$1, c as MenuRadioItem$1, d as MenuRadioItemIndicator, e as MenuSubmenuTrigger$1, f as MenuRoot, g as MenuPortal$1, h as MenuBackdrop, i as MenuPositioner, j as MenuPopup, k as MenuRadioGroup$1, l as MenuGroup$1, m as MenuSubmenuRoot, n as MenuGroupLabel$1 } from './MenuSubmenuTrigger-es.js';
 
 var styles$2 = {"wrapper":"h-nk89U2n6Q-","floatingContainer":"krpkWzoaVcc-","menu":"_7sU7mp1w0jM-","legacySection":"_4x-vvEmn4gM-","separator":"i0QNcs4S-wk-","triggerWrapper":"_7CsejipGrzM-","ariaMenu":"bO7lGVQC42c-","ariaItem":"u6fDgbWmPck-","ariaSection":"-TSNrZBKZJI-","ariaSectionHeader":"zs7dS2pKjEw-","sectionHeader":"MZJgunQcmdQ-","legacyAction":"_-1GOlrzd098-","action":"NYXV5w4pd0c-","destructive":"baYK2zQ6-GA-","overlay":"A7T14ALVEKg-","fullWidth":"Lgbn9IRPI5Y-","screenReaderOnly":"o-ps580KdWI-","spinning":"f1oTdSTeUOM-"};
 
@@ -199,7 +200,7 @@ function MenuPortal({ children }) {
 
 var styles$1 = {"submenuHeader":"Vw9MFreevMU-","submenuTitle":"wpNMcBuNwwY-","spinning":"nOEBQCC4Cos-"};
 
-var styles = {"wrapper":"fpi0W91w2ag-","floatingContainer":"ba-Kj6mvQUw-","menu":"-DayvgvIcVo-","legacySection":"VsRRunpS6Yo-","separator":"jnggqK3YTIU-","triggerWrapper":"oRQQVVq-yxA-","composableMenu":"atokGnmWVls-","composableDropdownPopup":"Uk14qmg-Fqc-","composableDropdownScroller":"CJKnGqldjF0-","bottomSheetMenuContent":"J3CW8IU48RM-","composableItem":"zSMkwrZodBk-","composableItemNoLeadingSlot":"qbDWOwkPouM-","composableSection":"_353OIWGazfE-","composableGroup":"Q0ssxff-Qo4-","composableRadioGroup":"_2VyPM45lQBE-","composableSectionHeader":"efA-ozx9w0w-","composableGroupHeader":"BklkzNPbJ5Q-","composableGroupLabel":"_5-p9DbyRav4-","sectionHeader":"Bq7pLWj3jm4-","legacyAction":"P4Sdaq0-lZs-","action":"M1BgN-oCmKw-","destructive":"U9ihZZavz9w-","overlay":"_7we5hh6kYs8-","bottomSheetSubmenuPopup":"nf47GCAYI-c-","menuHidden":"cuw8ct7rX6s-","bottomSheetSubmenuBody":"a6uZEXgX8sg-","fullWidth":"_5OJ7B6mFcwk-","screenReaderOnly":"Bzvkz60bwWE-","spinning":"_0-VzuzHdi8o-"};
+var styles = {"wrapper":"fpi0W91w2ag-","floatingContainer":"ba-Kj6mvQUw-","composableBackdrop":"wqvf3hcDMM0-","menu":"-DayvgvIcVo-","legacySection":"VsRRunpS6Yo-","separator":"jnggqK3YTIU-","triggerWrapper":"oRQQVVq-yxA-","composableMenu":"atokGnmWVls-","composableDropdownPopup":"Uk14qmg-Fqc-","composableDropdownScroller":"CJKnGqldjF0-","bottomSheetMenuContent":"J3CW8IU48RM-","composableItem":"zSMkwrZodBk-","composableItemNoLeadingSlot":"qbDWOwkPouM-","composableSection":"_353OIWGazfE-","composableGroup":"Q0ssxff-Qo4-","composableRadioGroup":"_2VyPM45lQBE-","composableSectionHeader":"efA-ozx9w0w-","composableGroupHeader":"BklkzNPbJ5Q-","composableGroupLabel":"_5-p9DbyRav4-","sectionHeader":"Bq7pLWj3jm4-","legacyAction":"P4Sdaq0-lZs-","action":"M1BgN-oCmKw-","destructive":"U9ihZZavz9w-","overlay":"_7we5hh6kYs8-","bottomSheetSubmenuPopup":"nf47GCAYI-c-","menuHidden":"cuw8ct7rX6s-","bottomSheetSubmenuBody":"a6uZEXgX8sg-","fullWidth":"_5OJ7B6mFcwk-","screenReaderOnly":"Bzvkz60bwWE-","spinning":"_0-VzuzHdi8o-"};
 
 function mergeUnsafeProps(props) {
     return mergeProps({
@@ -741,6 +742,7 @@ function MenuDropdownContent({ children, style, className, preferredPlacement, U
     const floatingLayerStyle = getFloatingLayerStyle(resolvedBaseProps.style);
     const popupStyle = getMenuPopupStyle(resolvedBaseProps.style);
     return (React__default.createElement(MenuPortal$1, null,
+        React__default.createElement(MenuBackdrop, { className: styles.composableBackdrop }),
         React__default.createElement(MenuPositioner, { className: styles.floatingContainer, style: floatingLayerStyle, align: align, side: side, sideOffset: MENU_OFFSET },
             React__default.createElement(MenuPopup, { className: classnames(styles.menu, styles.composableDropdownPopup, resolvedBaseProps.className), style: popupStyle },
                 React__default.createElement("div", { className: classnames(styles.composableMenu, styles.composableDropdownScroller) }, children)))));

package/dist/MenuSubmenuTrigger-cjs.js

@@ -1,13 +1,15 @@
 'use strict';
 
 var React = require('react');
-var ScrollAreaViewport = require('./ScrollAreaViewport-cjs.js');
 var useRenderElement = require('./useRenderElement-cjs.js');
+var InternalBackdrop = require('./InternalBackdrop-cjs.js');
 var useButton = require('./useButton-cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 var useCompositeListItem = require('./useCompositeListItem-cjs.js');
-var InternalBackdrop = require('./InternalBackdrop-cjs.js');
+var ToolbarRootContext = require('./ToolbarRootContext-cjs.js');
+var CSPContext = require('./CSPContext-cjs.js');
 var floatingUi_utils_dom = require('./floating-ui.utils.dom-cjs.js');
+var ScrollAreaViewport = require('./ScrollAreaViewport-cjs.js');
 var ReactDOM = require('react-dom');
 
 function _interopNamespaceDefault(e) {
@@ -934,92 +936,6 @@ function safePolygon(options = {}) {
   return fn;
 }
 
-/**
- * A button that closes the dialog.
- * Renders a `<button>` element.
- *
- * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
- */
-const DialogClose = /*#__PURE__*/React__namespace.forwardRef(function DialogClose(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    disabled = false,
-    nativeButton = true,
-    ...elementProps
-  } = componentProps;
-  const {
-    store
-  } = ScrollAreaViewport.useDialogRootContext();
-  const open = store.useState('open');
-  function handleClick(event) {
-    if (open) {
-      store.setOpen(false, useButton.createChangeEventDetails(useButton.closePress, event.nativeEvent));
-    }
-  }
-  const {
-    getButtonProps,
-    buttonRef
-  } = useButton.useButton({
-    disabled,
-    native: nativeButton
-  });
-  const state = {
-    disabled
-  };
-  return useRenderElement.useRenderElement('button', componentProps, {
-    state,
-    ref: [forwardedRef, buttonRef],
-    props: [{
-      onClick: handleClick
-    }, elementProps, getButtonProps]
-  });
-});
-if (process.env.NODE_ENV !== "production") DialogClose.displayName = "DialogClose";
-
-/**
- * A button that closes the drawer.
- * Renders a `<button>` element.
- *
- * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
- */
-const DrawerClose = DialogClose;
-
-/**
- * A heading that labels the dialog.
- * Renders an `<h2>` element.
- *
- * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
- */
-const DialogTitle = /*#__PURE__*/React__namespace.forwardRef(function DialogTitle(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    id: idProp,
-    ...elementProps
-  } = componentProps;
-  const {
-    store
-  } = ScrollAreaViewport.useDialogRootContext();
-  const id = useButton.useBaseUiId(idProp);
-  store.useSyncedValueWithCleanup('titleElementId', id);
-  return useRenderElement.useRenderElement('h2', componentProps, {
-    ref: forwardedRef,
-    props: [{
-      id
-    }, elementProps]
-  });
-});
-if (process.env.NODE_ENV !== "production") DialogTitle.displayName = "DialogTitle";
-
-/**
- * A heading that labels the drawer.
- * Renders an `<h2>` element.
- *
- * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
- */
-const DrawerTitle = DialogTitle;
-
 const MenuPositionerContext = /*#__PURE__*/React__namespace.createContext(undefined);
 if (process.env.NODE_ENV !== "production") MenuPositionerContext.displayName = "MenuPositionerContext";
 function useMenuPositionerContext(optional) {
@@ -1050,6 +966,52 @@ function useContextMenuRootContext(optional = true) {
   return context;
 }
 
+const stateAttributesMapping$1 = {
+  ...InternalBackdrop.popupStateMapping,
+  ...useButton.transitionStatusMapping
+};
+
+/**
+ * An overlay displayed beneath the menu popup.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
+ */
+const MenuBackdrop = /*#__PURE__*/React__namespace.forwardRef(function MenuBackdrop(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = useMenuRootContext();
+  const open = store.useState('open');
+  const mounted = store.useState('mounted');
+  const transitionStatus = store.useState('transitionStatus');
+  const lastOpenChangeReason = store.useState('lastOpenChangeReason');
+  const contextMenuContext = useContextMenuRootContext();
+  const state = {
+    open,
+    transitionStatus
+  };
+  return useRenderElement.useRenderElement('div', componentProps, {
+    ref: contextMenuContext?.backdropRef ? [forwardedRef, contextMenuContext.backdropRef] : forwardedRef,
+    state,
+    stateAttributesMapping: stateAttributesMapping$1,
+    props: [{
+      role: 'presentation',
+      hidden: !mounted,
+      style: {
+        pointerEvents: lastOpenChangeReason === useButton.triggerHover ? 'none' : undefined,
+        userSelect: 'none',
+        WebkitUserSelect: 'none'
+      }
+    }, elementProps]
+  });
+});
+if (process.env.NODE_ENV !== "production") MenuBackdrop.displayName = "MenuBackdrop";
+
 /**
  * Returns common props shared by all menu item types.
  * This hook extracts the shared logic for id, role, tabIndex, onKeyDown,
@@ -1390,16 +1352,6 @@ const MenuLinkItem = /*#__PURE__*/React__namespace.forwardRef(function MenuLinkI
 });
 if (process.env.NODE_ENV !== "production") MenuLinkItem.displayName = "MenuLinkItem";
 
-const ToolbarRootContext = /*#__PURE__*/React__namespace.createContext(undefined);
-if (process.env.NODE_ENV !== "production") ToolbarRootContext.displayName = "ToolbarRootContext";
-function useToolbarRootContext(optional) {
-  const context = React__namespace.useContext(ToolbarRootContext);
-  if (context === undefined && !optional) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: ToolbarRootContext is missing. Toolbar parts must be placed within <Toolbar.Root>.' : useRenderElement.formatErrorMessage(69));
-  }
-  return context;
-}
-
 const stateAttributesMapping = {
   ...InternalBackdrop.popupStateMapping,
   ...useButton.transitionStatusMapping
@@ -1425,7 +1377,7 @@ const MenuPopup = /*#__PURE__*/React__namespace.forwardRef(function MenuPopup(co
     side,
     align
   } = useMenuPositionerContext();
-  const insideToolbar = useToolbarRootContext(true) != null;
+  const insideToolbar = ToolbarRootContext.useToolbarRootContext(true) != null;
   const open = store.useState('open');
   const transitionStatus = store.useState('transitionStatus');
   const popupProps = store.useState('popupProps');
@@ -1481,7 +1433,7 @@ const MenuPopup = /*#__PURE__*/React__namespace.forwardRef(function MenuPopup(co
     stateAttributesMapping,
     props: [popupProps, {
       onKeyDown(event) {
-        if (insideToolbar && ScrollAreaViewport.COMPOSITE_KEYS.has(event.key)) {
+        if (insideToolbar && CSPContext.COMPOSITE_KEYS.has(event.key)) {
           event.stopPropagation();
         }
       }
@@ -3067,8 +3019,7 @@ const MenuSubmenuTrigger = /*#__PURE__*/React__namespace.forwardRef(function Sub
 });
 if (process.env.NODE_ENV !== "production") MenuSubmenuTrigger.displayName = "MenuSubmenuTrigger";
 
-exports.DrawerClose = DrawerClose;
-exports.DrawerTitle = DrawerTitle;
+exports.MenuBackdrop = MenuBackdrop;
 exports.MenuGroup = MenuGroup;
 exports.MenuGroupLabel = MenuGroupLabel;
 exports.MenuItem = MenuItem;
@@ -3086,7 +3037,6 @@ exports.MenuSubmenuTrigger = MenuSubmenuTrigger;
 exports.MenuTrigger = MenuTrigger;
 exports.REGULAR_ITEM = REGULAR_ITEM;
 exports.itemMapping = itemMapping;
-exports.useContextMenuRootContext = useContextMenuRootContext;
 exports.useMenuItem = useMenuItem;
 exports.useMenuPositionerContext = useMenuPositionerContext;
 exports.useMenuRootContext = useMenuRootContext;