@jobber/components 7.15.3-progress-b-cc1652c.1 → 7.15.4

package/dist/unstyledPrimitives/index.cjs

@@ -4,13 +4,14 @@ var DrawerRoot = require('../DrawerRoot-cjs.js');
 var MenuSubmenuTrigger = require('../MenuSubmenuTrigger-cjs.js');
 var React = require('react');
 var useRenderElement = require('../useRenderElement-cjs.js');
-var NumberFieldInput = require('../NumberFieldInput-cjs.js');
+var useBaseUiId = require('../useBaseUiId-cjs.js');
 var useValueChanged = require('../useValueChanged-cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 var floatingUi_utils_dom = require('../floating-ui.utils.dom-cjs.js');
 var ReactDOM = require('react-dom');
 var index_esm = require('../index.esm-cjs.js');
 var Separator = require('../Separator-cjs.js');
+var NumberFieldInput = require('../NumberFieldInput-cjs.js');
 require('../floating-ui.react-dom-cjs.js');
 
 function _interopNamespaceDefault(e) {
@@ -49,7 +50,7 @@ const DialogDescription = /*#__PURE__*/React__namespace.forwardRef(function Dial
   const {
     store
   } = DrawerRoot.useDialogRootContext();
-  const id = NumberFieldInput.useBaseUiId(idProp);
+  const id = useBaseUiId.useBaseUiId(idProp);
   store.useSyncedValueWithCleanup('descriptionElementId', id);
   return useRenderElement.useRenderElement('p', componentProps, {
     ref: forwardedRef,
@@ -1491,7 +1492,7 @@ const DrawerSwipeArea = /*#__PURE__*/React__namespace.forwardRef(function Drawer
   const closedOffsetRef = React__namespace.useRef(null);
   const appliedSwipeStylesRef = React__namespace.useRef(false);
   const popupTransitionRef = React__namespace.useRef(null);
-  const swipeAreaId = NumberFieldInput.useBaseUiId(componentProps.id);
+  const swipeAreaId = useBaseUiId.useBaseUiId(componentProps.id);
   const registerTrigger = DrawerRoot.useTriggerRegistration(swipeAreaId, store);
   const open = store.useState('open');
   const resolvedSwipeDirection = swipeDirectionProp ?? oppositeSwipeDirection[swipeDirection];
@@ -2882,7 +2883,7 @@ const MenuCheckboxItem = /*#__PURE__*/React__namespace.forwardRef(function MenuC
     label
   });
   const menuPositionerContext = MenuSubmenuTrigger.useMenuPositionerContext(true);
-  const id = NumberFieldInput.useBaseUiId(idProp);
+  const id = useBaseUiId.useBaseUiId(idProp);
   const {
     store
   } = MenuSubmenuTrigger.useMenuRootContext();
@@ -5069,7 +5070,7 @@ const ComboboxTrigger = /*#__PURE__*/React__namespace.forwardRef(function Combob
   const {
     buttonRef,
     getButtonProps
-  } = NumberFieldInput.useButton({
+  } = useBaseUiId.useButton({
     native: nativeButton,
     disabled
   });
@@ -5202,7 +5203,7 @@ const ComboboxInternalDismissButton = /*#__PURE__*/React__namespace.forwardRef(f
   const {
     buttonRef,
     getButtonProps
-  } = NumberFieldInput.useButton({
+  } = useBaseUiId.useButton({
     native: false
   });
   const mergedRef = useRenderElement.useMergedRefs(forwardedRef, buttonRef);
@@ -5274,7 +5275,7 @@ const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function Combobox
   const listEmpty = filteredItems.length === 0;
   const isInsidePopup = hasPositionerParent || inline;
   const focusManagerModal = !isInsidePopup || modal;
-  const id = NumberFieldInput.useBaseUiId(idProp ?? (!isInsidePopup ? rootId : undefined));
+  const id = useBaseUiId.useBaseUiId(idProp ?? (!isInsidePopup ? rootId : undefined));
   const ariaLabelledBy = resolveAriaLabelledBy(fieldLabelId, undefined);
   const fieldStateForInput = hasPositionerParent ? NumberFieldInput.DEFAULT_FIELD_STATE_ATTRIBUTES : fieldState;
   const [composingValue, setComposingValue] = React__namespace.useState(null);
@@ -5708,7 +5709,7 @@ const ComboboxClear = /*#__PURE__*/React__namespace.forwardRef(function Combobox
   const {
     buttonRef,
     getButtonProps
-  } = NumberFieldInput.useButton({
+  } = useBaseUiId.useButton({
     native: nativeButton,
     disabled
   });
@@ -6292,7 +6293,7 @@ const ComboboxGroupLabel = /*#__PURE__*/React__namespace.forwardRef(function Com
   const {
     setLabelId
   } = useComboboxGroupContext();
-  const id = NumberFieldInput.useBaseUiId(idProp);
+  const id = useBaseUiId.useBaseUiId(idProp);
   useValueChanged.useIsoLayoutEffect(() => {
     setLabelId(id);
     return () => {
@@ -6419,7 +6420,7 @@ const ComboboxItem = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__name
   const {
     getButtonProps,
     buttonRef
-  } = NumberFieldInput.useButton({
+  } = useBaseUiId.useButton({
     disabled,
     focusableWhenDisabled: true,
     native: nativeButton,
@@ -6556,7 +6557,7 @@ function ComboboxRoot(props) {
 }
 
 function useRegisteredLabelId(idProp, setLabelId) {
-  const id = NumberFieldInput.useBaseUiId(idProp);
+  const id = useBaseUiId.useBaseUiId(idProp);
   useValueChanged.useIsoLayoutEffect(() => {
     setLabelId(id);
     return () => {
@@ -6664,7 +6665,7 @@ const ComboboxLabel = /*#__PURE__*/React__namespace.forwardRef(function Combobox
       }
       const ownerStackMessage = useValueChanged.SafeReact.captureOwnerStack?.() || '';
       const message = '<Combobox.Label> labels <Combobox.Trigger> only. ' + 'When <Combobox.Input> is the form control, use a native <label> or <Field.Label> instead.';
-      NumberFieldInput.error(`${message}${ownerStackMessage}`);
+      useBaseUiId.error(`${message}${ownerStackMessage}`);
     }, [inputElement, inputInsidePopup]);
   }
   const labelProps = useLabel({
@@ -6949,7 +6950,7 @@ const ComboboxChipRemove = /*#__PURE__*/React__namespace.forwardRef(function Com
   const {
     buttonRef,
     getButtonProps
-  } = NumberFieldInput.useButton({
+  } = useBaseUiId.useButton({
     native: nativeButton,
     disabled: disabled || readOnly,
     focusableWhenDisabled: true

package/dist/unstyledPrimitives/index.mjs

@@ -1,14 +1,15 @@
 import { u as useDialogRootContext, am as useDrawerProviderContext, an as DrawerBackdropCssVars, ao as DrawerPopupCssVars, ap as DrawerProviderContext, aq as CommonPopupDataAttributes, N as popupStateMapping, ar as useDialogPortalContext, as as DialogStore, l as contains, g as getTarget, at as useDrawerRootContext, al as useTriggerRegistration, au as DrawerPopupDataAttributes, av as useDrawerSnapPoints, aw as DrawerViewportContext, ax as BASE_UI_SWIPE_IGNORE_SELECTOR, ay as DRAWER_CONTENT_ATTRIBUTE, a as DrawerBackdrop, c as DrawerContent, b as DrawerPopup, D as DrawerPortal, d as DrawerRoot, V as inertValue, Z as createSelector, az as useStore, a4 as useOpenInteractionType, a9 as useDismiss, J as useInteractions, a2 as useOnFirstRender, aA as Store, ai as pressableTriggerOpenStateMapping, L as triggerOpenStateMapping, R as FloatingPortal, a7 as useScrollLock, U as InternalBackdrop, X as DROPDOWN_COLLISION_AVOIDANCE, Q as FloatingFocusManager } from '../DrawerRoot-es.js';
 import { b as DrawerClose, a as DrawerTitle, D as DrawerTrigger, u as useMenuRootContext, p as useMenuPositionerContext, q as useContextMenuRootContext, r as useCompositeListItem, s as useMenuItem, R as REGULAR_ITEM, t as itemMapping, v as useDirection, w as MenuStore, m as MenuGroup, o as MenuGroupLabel, d as MenuItem, c as MenuLinkItem, k as MenuPopup, i as MenuPortal, j as MenuPositioner, l as MenuRadioGroup, e as MenuRadioItem, f as MenuRadioItemIndicator, h as MenuRoot, n as MenuSubmenuRoot, g as MenuSubmenuTrigger, M as MenuTrigger, x as useFloatingRootContext, y as useClick, z as useListNavigation, A as useTypeahead, B as getPseudoElementBounds, C as CompositeList, E as useAnchorPositioning, F as getDisabledMountTransitionStyles, I as IndexGuessBehavior } from '../MenuSubmenuTrigger-es.js';
 import * as React from 'react';
-import { u as useRenderElement, m as mergeProps, f as formatErrorMessage, N as NOOP, E as EMPTY_OBJECT, d as EMPTY_ARRAY, a as useRefWithInit, c as useMergedRefs } from '../useRenderElement-es.js';
-import { u as useBaseUiId, b as useFormContext, c as useFieldRootContext, l as useLabelableId, m as useField, f as fieldValidityMapping, a as useLabelableContext, j as useButton, n as DEFAULT_FIELD_STATE_ATTRIBUTES, o as error, p as useNumberFieldRootContext, q as DEFAULT_STEP, s as stateAttributesMapping$9, i as NumberFieldDecrement, d as NumberFieldGroup, h as NumberFieldIncrement, e as NumberFieldInput, N as NumberFieldRoot } from '../NumberFieldInput-es.js';
-import { c as useIsoLayoutEffect, u as useStableCallback, t as transitionStatusMapping, k as createChangeEventDetails, V as imperativeAction, s as ownerDocument, g as clamp, a as useTimeout, a3 as swipe, D as useAnimationFrame, X as TransitionStatusDataAttributes, K as triggerHover, h as useControlled, P as itemPress, b as useTransitionStatus, d as useOpenChangeComplete, R as useAnimationsFinished, i as useValueAsRef, r as createGenericEventDetails, o as inputClear, m as inputChange, M as focusOut, Q as outsidePress, y as useValueChanged, n as none, a4 as inputPress, v as visuallyHiddenInput, l as visuallyHidden, z as stopEvent, L as listNavigation, B as closePress, a1 as isAndroid, a5 as isFirefox, J as escapeKey, a6 as clearPress, S as SafeReact, a7 as chipRemovePress, a8 as scrub, _ as isWebKit } from '../useValueChanged-es.js';
+import { u as useRenderElement, m as mergeProps, f as formatErrorMessage, N as NOOP, E as EMPTY_OBJECT, d as EMPTY_ARRAY, b as useRefWithInit, c as useMergedRefs } from '../useRenderElement-es.js';
+import { u as useBaseUiId, a as useButton, e as error } from '../useBaseUiId-es.js';
+import { u as useIsoLayoutEffect, a as useStableCallback, t as transitionStatusMapping, k as createChangeEventDetails, V as imperativeAction, s as ownerDocument, g as clamp, c as useTimeout, a3 as swipe, D as useAnimationFrame, X as TransitionStatusDataAttributes, K as triggerHover, h as useControlled, P as itemPress, d as useTransitionStatus, e as useOpenChangeComplete, R as useAnimationsFinished, i as useValueAsRef, r as createGenericEventDetails, o as inputClear, m as inputChange, M as focusOut, Q as outsidePress, y as useValueChanged, n as none, a4 as inputPress, v as visuallyHiddenInput, l as visuallyHidden, z as stopEvent, L as listNavigation, B as closePress, a1 as isAndroid, a5 as isFirefox, J as escapeKey, a6 as clearPress, S as SafeReact, a7 as chipRemovePress, a8 as scrub, _ as isWebKit } from '../useValueChanged-es.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { a as isHTMLElement, f as getComputedStyle, b as isElement, k as getWindow } from '../floating-ui.utils.dom-es.js';
 import * as ReactDOM from 'react-dom';
 import { y as round } from '../index.esm-es.js';
 import { S as Separator } from '../Separator-es.js';
+import { a as useFormContext, b as useFieldRootContext, i as useLabelableId, j as useField, f as fieldValidityMapping, u as useLabelableContext, k as DEFAULT_FIELD_STATE_ATTRIBUTES, l as useNumberFieldRootContext, m as DEFAULT_STEP, s as stateAttributesMapping$9, h as NumberFieldDecrement, c as NumberFieldGroup, e as NumberFieldIncrement, d as NumberFieldInput, N as NumberFieldRoot } from '../NumberFieldInput-es.js';
 import '../floating-ui.react-dom-es.js';
 
 /**

package/dist/useBaseUiId-cjs.js

@@ -0,0 +1,275 @@
+'use strict';
+
+var React = require('react');
+var floatingUi_utils_dom = require('./floating-ui.utils.dom-cjs.js');
+var useValueChanged = require('./useValueChanged-cjs.js');
+var useRenderElement = require('./useRenderElement-cjs.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+let set;
+if (process.env.NODE_ENV !== 'production') {
+  set = new Set();
+}
+function error(...messages) {
+  if (process.env.NODE_ENV !== 'production') {
+    const messageKey = messages.join(' ');
+    if (!set.has(messageKey)) {
+      set.add(messageKey);
+      console.error(`Base UI: ${messageKey}`);
+    }
+  }
+}
+
+const CompositeRootContext = /*#__PURE__*/React__namespace.createContext(undefined);
+if (process.env.NODE_ENV !== "production") CompositeRootContext.displayName = "CompositeRootContext";
+function useCompositeRootContext(optional = false) {
+  const context = React__namespace.useContext(CompositeRootContext);
+  if (context === undefined && !optional) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: CompositeRootContext is missing. Composite parts must be placed within <Composite.Root>.' : useRenderElement.formatErrorMessage(16));
+  }
+  return context;
+}
+
+function useFocusableWhenDisabled(parameters) {
+  const {
+    focusableWhenDisabled,
+    disabled,
+    composite = false,
+    tabIndex: tabIndexProp = 0,
+    isNativeButton
+  } = parameters;
+  const isFocusableComposite = composite && focusableWhenDisabled !== false;
+  const isNonFocusableComposite = composite && focusableWhenDisabled === false;
+
+  // we can't explicitly assign `undefined` to any of these props because it
+  // would otherwise prevent subsequently merged props from setting them
+  const props = React__namespace.useMemo(() => {
+    const additionalProps = {
+      // allow Tabbing away from focusableWhenDisabled elements
+      onKeyDown(event) {
+        if (disabled && focusableWhenDisabled && event.key !== 'Tab') {
+          event.preventDefault();
+        }
+      }
+    };
+    if (!composite) {
+      additionalProps.tabIndex = tabIndexProp;
+      if (!isNativeButton && disabled) {
+        additionalProps.tabIndex = focusableWhenDisabled ? tabIndexProp : -1;
+      }
+    }
+    if (isNativeButton && (focusableWhenDisabled || isFocusableComposite) || !isNativeButton && disabled) {
+      additionalProps['aria-disabled'] = disabled;
+    }
+    if (isNativeButton && (!focusableWhenDisabled || isNonFocusableComposite)) {
+      additionalProps.disabled = disabled;
+    }
+    return additionalProps;
+  }, [composite, disabled, focusableWhenDisabled, isFocusableComposite, isNonFocusableComposite, isNativeButton, tabIndexProp]);
+  return {
+    props
+  };
+}
+
+function useButton(parameters = {}) {
+  const {
+    disabled = false,
+    focusableWhenDisabled,
+    tabIndex = 0,
+    native: isNativeButton = true,
+    composite: compositeProp
+  } = parameters;
+  const elementRef = React__namespace.useRef(null);
+  const compositeRootContext = useCompositeRootContext(true);
+  const isCompositeItem = compositeProp ?? compositeRootContext !== undefined;
+  const {
+    props: focusableWhenDisabledProps
+  } = useFocusableWhenDisabled({
+    focusableWhenDisabled,
+    disabled,
+    composite: isCompositeItem,
+    tabIndex,
+    isNativeButton
+  });
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React__namespace.useEffect(() => {
+      if (!elementRef.current) {
+        return;
+      }
+      const isButtonTag = isButtonElement(elementRef.current);
+      if (isNativeButton) {
+        if (!isButtonTag) {
+          const ownerStackMessage = useValueChanged.SafeReact.captureOwnerStack?.() || '';
+          const message = 'A component that acts as a button expected a native <button> because the ' + '`nativeButton` prop is true. Rendering a non-<button> removes native button ' + 'semantics, which can impact forms and accessibility. Use a real <button> in the ' + '`render` prop, or set `nativeButton` to `false`.';
+          error(`${message}${ownerStackMessage}`);
+        }
+      } else if (isButtonTag) {
+        const ownerStackMessage = useValueChanged.SafeReact.captureOwnerStack?.() || '';
+        const message = 'A component that acts as a button expected a non-<button> because the `nativeButton` ' + 'prop is false. Rendering a <button> keeps native behavior while Base UI applies ' + 'non-native attributes and handlers, which can add unintended extra attributes (such ' + 'as `role` or `aria-disabled`). Use a non-<button> in the `render` prop, or set ' + '`nativeButton` to `true`.';
+        error(`${message}${ownerStackMessage}`);
+      }
+    }, [isNativeButton]);
+  }
+
+  // handles a disabled composite button rendering another button, e.g.
+  // <Toolbar.Button disabled render={<Menu.Trigger />} />
+  // the `disabled` prop needs to pass through 2 `useButton`s then finally
+  // delete the `disabled` attribute from DOM
+  const updateDisabled = React__namespace.useCallback(() => {
+    const element = elementRef.current;
+    if (!isButtonElement(element)) {
+      return;
+    }
+    if (isCompositeItem && disabled && focusableWhenDisabledProps.disabled === undefined && element.disabled) {
+      element.disabled = false;
+    }
+  }, [disabled, focusableWhenDisabledProps.disabled, isCompositeItem]);
+  useValueChanged.useIsoLayoutEffect(updateDisabled, [updateDisabled]);
+  const getButtonProps = React__namespace.useCallback((externalProps = {}) => {
+    const {
+      onClick: externalOnClick,
+      onMouseDown: externalOnMouseDown,
+      onKeyUp: externalOnKeyUp,
+      onKeyDown: externalOnKeyDown,
+      onPointerDown: externalOnPointerDown,
+      ...otherExternalProps
+    } = externalProps;
+    const type = isNativeButton ? 'button' : undefined;
+    return useRenderElement.mergeProps({
+      type,
+      onClick(event) {
+        if (disabled) {
+          event.preventDefault();
+          return;
+        }
+        externalOnClick?.(event);
+      },
+      onMouseDown(event) {
+        if (!disabled) {
+          externalOnMouseDown?.(event);
+        }
+      },
+      onKeyDown(event) {
+        if (disabled) {
+          return;
+        }
+        useRenderElement.makeEventPreventable(event);
+        externalOnKeyDown?.(event);
+        if (event.baseUIHandlerPrevented) {
+          return;
+        }
+        const isCurrentTarget = event.target === event.currentTarget;
+        const currentTarget = event.currentTarget;
+        const isButton = isButtonElement(currentTarget);
+        const isLink = !isNativeButton && isValidLinkElement(currentTarget);
+        const shouldClick = isCurrentTarget && (isNativeButton ? isButton : !isLink);
+        const isEnterKey = event.key === 'Enter';
+        const isSpaceKey = event.key === ' ';
+        const role = currentTarget.getAttribute('role');
+        const isTextNavigationRole = role?.startsWith('menuitem') || role === 'option' || role === 'gridcell';
+        if (isCurrentTarget && isCompositeItem && isSpaceKey) {
+          if (event.defaultPrevented && isTextNavigationRole) {
+            return;
+          }
+          event.preventDefault();
+          if (isLink || isNativeButton && isButton) {
+            currentTarget.click();
+            event.preventBaseUIHandler();
+          } else if (shouldClick) {
+            externalOnClick?.(event);
+            event.preventBaseUIHandler();
+          }
+          return;
+        }
+
+        // Keyboard accessibility for native and non-native elements.
+        if (shouldClick) {
+          if (!isNativeButton && (isSpaceKey || isEnterKey)) {
+            event.preventDefault();
+          }
+          if (!isNativeButton && isEnterKey) {
+            externalOnClick?.(event);
+          }
+        }
+      },
+      onKeyUp(event) {
+        if (disabled) {
+          return;
+        }
+
+        // calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
+        // https://codesandbox.io/p/sandbox/button-keyup-preventdefault-dn7f0
+        useRenderElement.makeEventPreventable(event);
+        externalOnKeyUp?.(event);
+        if (event.target === event.currentTarget && isNativeButton && isCompositeItem && isButtonElement(event.currentTarget) && event.key === ' ') {
+          event.preventDefault();
+          return;
+        }
+        if (event.baseUIHandlerPrevented) {
+          return;
+        }
+
+        // Keyboard accessibility for non interactive elements
+        if (event.target === event.currentTarget && !isNativeButton && !isCompositeItem && event.key === ' ') {
+          externalOnClick?.(event);
+        }
+      },
+      onPointerDown(event) {
+        if (disabled) {
+          event.preventDefault();
+          return;
+        }
+        externalOnPointerDown?.(event);
+      }
+    }, !isNativeButton ? {
+      role: 'button'
+    } : undefined, focusableWhenDisabledProps, otherExternalProps);
+  }, [disabled, focusableWhenDisabledProps, isCompositeItem, isNativeButton]);
+  const buttonRef = useValueChanged.useStableCallback(element => {
+    elementRef.current = element;
+    updateDisabled();
+  });
+  return {
+    getButtonProps,
+    buttonRef
+  };
+}
+function isButtonElement(elem) {
+  return floatingUi_utils_dom.isHTMLElement(elem) && elem.tagName === 'BUTTON';
+}
+function isValidLinkElement(elem) {
+  return Boolean(elem?.tagName === 'A' && elem?.href);
+}
+
+/**
+ * Wraps `useId` and prefixes generated `id`s with `base-ui-`
+ * @param {string | undefined} idOverride overrides the generated id when provided
+ * @returns {string | undefined}
+ */
+function useBaseUiId(idOverride) {
+  return useValueChanged.useId(idOverride, 'base-ui');
+}
+
+exports.error = error;
+exports.useBaseUiId = useBaseUiId;
+exports.useButton = useButton;
+exports.useCompositeRootContext = useCompositeRootContext;

package/dist/useBaseUiId-es.js

@@ -0,0 +1,251 @@
+import * as React from 'react';
+import { a as isHTMLElement } from './floating-ui.utils.dom-es.js';
+import { S as SafeReact, u as useIsoLayoutEffect, a as useStableCallback, b as useId } from './useValueChanged-es.js';
+import { f as formatErrorMessage, m as mergeProps, a as makeEventPreventable } from './useRenderElement-es.js';
+
+let set;
+if (process.env.NODE_ENV !== 'production') {
+  set = new Set();
+}
+function error(...messages) {
+  if (process.env.NODE_ENV !== 'production') {
+    const messageKey = messages.join(' ');
+    if (!set.has(messageKey)) {
+      set.add(messageKey);
+      console.error(`Base UI: ${messageKey}`);
+    }
+  }
+}
+
+const CompositeRootContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") CompositeRootContext.displayName = "CompositeRootContext";
+function useCompositeRootContext(optional = false) {
+  const context = React.useContext(CompositeRootContext);
+  if (context === undefined && !optional) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: CompositeRootContext is missing. Composite parts must be placed within <Composite.Root>.' : formatErrorMessage(16));
+  }
+  return context;
+}
+
+function useFocusableWhenDisabled(parameters) {
+  const {
+    focusableWhenDisabled,
+    disabled,
+    composite = false,
+    tabIndex: tabIndexProp = 0,
+    isNativeButton
+  } = parameters;
+  const isFocusableComposite = composite && focusableWhenDisabled !== false;
+  const isNonFocusableComposite = composite && focusableWhenDisabled === false;
+
+  // we can't explicitly assign `undefined` to any of these props because it
+  // would otherwise prevent subsequently merged props from setting them
+  const props = React.useMemo(() => {
+    const additionalProps = {
+      // allow Tabbing away from focusableWhenDisabled elements
+      onKeyDown(event) {
+        if (disabled && focusableWhenDisabled && event.key !== 'Tab') {
+          event.preventDefault();
+        }
+      }
+    };
+    if (!composite) {
+      additionalProps.tabIndex = tabIndexProp;
+      if (!isNativeButton && disabled) {
+        additionalProps.tabIndex = focusableWhenDisabled ? tabIndexProp : -1;
+      }
+    }
+    if (isNativeButton && (focusableWhenDisabled || isFocusableComposite) || !isNativeButton && disabled) {
+      additionalProps['aria-disabled'] = disabled;
+    }
+    if (isNativeButton && (!focusableWhenDisabled || isNonFocusableComposite)) {
+      additionalProps.disabled = disabled;
+    }
+    return additionalProps;
+  }, [composite, disabled, focusableWhenDisabled, isFocusableComposite, isNonFocusableComposite, isNativeButton, tabIndexProp]);
+  return {
+    props
+  };
+}
+
+function useButton(parameters = {}) {
+  const {
+    disabled = false,
+    focusableWhenDisabled,
+    tabIndex = 0,
+    native: isNativeButton = true,
+    composite: compositeProp
+  } = parameters;
+  const elementRef = React.useRef(null);
+  const compositeRootContext = useCompositeRootContext(true);
+  const isCompositeItem = compositeProp ?? compositeRootContext !== undefined;
+  const {
+    props: focusableWhenDisabledProps
+  } = useFocusableWhenDisabled({
+    focusableWhenDisabled,
+    disabled,
+    composite: isCompositeItem,
+    tabIndex,
+    isNativeButton
+  });
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+      if (!elementRef.current) {
+        return;
+      }
+      const isButtonTag = isButtonElement(elementRef.current);
+      if (isNativeButton) {
+        if (!isButtonTag) {
+          const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
+          const message = 'A component that acts as a button expected a native <button> because the ' + '`nativeButton` prop is true. Rendering a non-<button> removes native button ' + 'semantics, which can impact forms and accessibility. Use a real <button> in the ' + '`render` prop, or set `nativeButton` to `false`.';
+          error(`${message}${ownerStackMessage}`);
+        }
+      } else if (isButtonTag) {
+        const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
+        const message = 'A component that acts as a button expected a non-<button> because the `nativeButton` ' + 'prop is false. Rendering a <button> keeps native behavior while Base UI applies ' + 'non-native attributes and handlers, which can add unintended extra attributes (such ' + 'as `role` or `aria-disabled`). Use a non-<button> in the `render` prop, or set ' + '`nativeButton` to `true`.';
+        error(`${message}${ownerStackMessage}`);
+      }
+    }, [isNativeButton]);
+  }
+
+  // handles a disabled composite button rendering another button, e.g.
+  // <Toolbar.Button disabled render={<Menu.Trigger />} />
+  // the `disabled` prop needs to pass through 2 `useButton`s then finally
+  // delete the `disabled` attribute from DOM
+  const updateDisabled = React.useCallback(() => {
+    const element = elementRef.current;
+    if (!isButtonElement(element)) {
+      return;
+    }
+    if (isCompositeItem && disabled && focusableWhenDisabledProps.disabled === undefined && element.disabled) {
+      element.disabled = false;
+    }
+  }, [disabled, focusableWhenDisabledProps.disabled, isCompositeItem]);
+  useIsoLayoutEffect(updateDisabled, [updateDisabled]);
+  const getButtonProps = React.useCallback((externalProps = {}) => {
+    const {
+      onClick: externalOnClick,
+      onMouseDown: externalOnMouseDown,
+      onKeyUp: externalOnKeyUp,
+      onKeyDown: externalOnKeyDown,
+      onPointerDown: externalOnPointerDown,
+      ...otherExternalProps
+    } = externalProps;
+    const type = isNativeButton ? 'button' : undefined;
+    return mergeProps({
+      type,
+      onClick(event) {
+        if (disabled) {
+          event.preventDefault();
+          return;
+        }
+        externalOnClick?.(event);
+      },
+      onMouseDown(event) {
+        if (!disabled) {
+          externalOnMouseDown?.(event);
+        }
+      },
+      onKeyDown(event) {
+        if (disabled) {
+          return;
+        }
+        makeEventPreventable(event);
+        externalOnKeyDown?.(event);
+        if (event.baseUIHandlerPrevented) {
+          return;
+        }
+        const isCurrentTarget = event.target === event.currentTarget;
+        const currentTarget = event.currentTarget;
+        const isButton = isButtonElement(currentTarget);
+        const isLink = !isNativeButton && isValidLinkElement(currentTarget);
+        const shouldClick = isCurrentTarget && (isNativeButton ? isButton : !isLink);
+        const isEnterKey = event.key === 'Enter';
+        const isSpaceKey = event.key === ' ';
+        const role = currentTarget.getAttribute('role');
+        const isTextNavigationRole = role?.startsWith('menuitem') || role === 'option' || role === 'gridcell';
+        if (isCurrentTarget && isCompositeItem && isSpaceKey) {
+          if (event.defaultPrevented && isTextNavigationRole) {
+            return;
+          }
+          event.preventDefault();
+          if (isLink || isNativeButton && isButton) {
+            currentTarget.click();
+            event.preventBaseUIHandler();
+          } else if (shouldClick) {
+            externalOnClick?.(event);
+            event.preventBaseUIHandler();
+          }
+          return;
+        }
+
+        // Keyboard accessibility for native and non-native elements.
+        if (shouldClick) {
+          if (!isNativeButton && (isSpaceKey || isEnterKey)) {
+            event.preventDefault();
+          }
+          if (!isNativeButton && isEnterKey) {
+            externalOnClick?.(event);
+          }
+        }
+      },
+      onKeyUp(event) {
+        if (disabled) {
+          return;
+        }
+
+        // calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
+        // https://codesandbox.io/p/sandbox/button-keyup-preventdefault-dn7f0
+        makeEventPreventable(event);
+        externalOnKeyUp?.(event);
+        if (event.target === event.currentTarget && isNativeButton && isCompositeItem && isButtonElement(event.currentTarget) && event.key === ' ') {
+          event.preventDefault();
+          return;
+        }
+        if (event.baseUIHandlerPrevented) {
+          return;
+        }
+
+        // Keyboard accessibility for non interactive elements
+        if (event.target === event.currentTarget && !isNativeButton && !isCompositeItem && event.key === ' ') {
+          externalOnClick?.(event);
+        }
+      },
+      onPointerDown(event) {
+        if (disabled) {
+          event.preventDefault();
+          return;
+        }
+        externalOnPointerDown?.(event);
+      }
+    }, !isNativeButton ? {
+      role: 'button'
+    } : undefined, focusableWhenDisabledProps, otherExternalProps);
+  }, [disabled, focusableWhenDisabledProps, isCompositeItem, isNativeButton]);
+  const buttonRef = useStableCallback(element => {
+    elementRef.current = element;
+    updateDisabled();
+  });
+  return {
+    getButtonProps,
+    buttonRef
+  };
+}
+function isButtonElement(elem) {
+  return isHTMLElement(elem) && elem.tagName === 'BUTTON';
+}
+function isValidLinkElement(elem) {
+  return Boolean(elem?.tagName === 'A' && elem?.href);
+}
+
+/**
+ * Wraps `useId` and prefixes generated `id`s with `base-ui-`
+ * @param {string | undefined} idOverride overrides the generated id when provided
+ * @returns {string | undefined}
+ */
+function useBaseUiId(idOverride) {
+  return useId(idOverride, 'base-ui');
+}
+
+export { useButton as a, useCompositeRootContext as b, error as e, useBaseUiId as u };

package/dist/useRenderElement-es.js

@@ -566,4 +566,4 @@ function renderTag(Tag, props) {
   return /*#__PURE__*/React.createElement(Tag, props);
 }
 
-export { EMPTY_OBJECT as E, NOOP as N, useRefWithInit as a, makeEventPreventable as b, useMergedRefs as c, EMPTY_ARRAY as d, formatErrorMessage as f, isReactVersionAtLeast as i, mergeProps as m, useRenderElement as u };
+export { EMPTY_OBJECT as E, NOOP as N, makeEventPreventable as a, useRefWithInit as b, useMergedRefs as c, EMPTY_ARRAY as d, formatErrorMessage as f, isReactVersionAtLeast as i, mergeProps as m, useRenderElement as u };