@tale-ui/react 0.0.3

package/navigation-menu/trigger/NavigationMenuTrigger.js

@@ -0,0 +1,296 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NavigationMenuTrigger = void 0;
+var React = _interopRequireWildcard(require("react"));
+var ReactDOM = _interopRequireWildcard(require("react-dom"));
+var _tabbable = require("tabbable");
+var _useIsoLayoutEffect = require("@tale-ui/utils/useIsoLayoutEffect");
+var _useTimeout = require("@tale-ui/utils/useTimeout");
+var _useAnimationFrame = require("@tale-ui/utils/useAnimationFrame");
+var _floatingUiReact = require("../../floating-ui-react");
+var _utils = require("../../floating-ui-react/utils");
+var _NavigationMenuItemContext = require("../item/NavigationMenuItemContext");
+var _NavigationMenuRootContext = require("../root/NavigationMenuRootContext");
+var _createTaleUIEventDetails = require("../../utils/createTaleUIEventDetails");
+var _reasons = require("../../utils/reasons");
+var _constants = require("../../utils/constants");
+var _FocusGuard = require("../../utils/FocusGuard");
+var _popupStateMapping = require("../../utils/popupStateMapping");
+var _isOutsideMenuEvent = require("../utils/isOutsideMenuEvent");
+var _CompositeItem = require("../../composite/item/CompositeItem");
+var _useButton = require("../../use-button");
+var _constants2 = require("../utils/constants");
+var _NavigationMenuDismissContext = require("../list/NavigationMenuDismissContext");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Opens the navigation menu popup when hovered or clicked, revealing the
+ * associated content.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Tale UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
+ */
+const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function NavigationMenuTrigger(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    nativeButton = true,
+    disabled,
+    ...elementProps
+  } = componentProps;
+  const {
+    value,
+    setValue,
+    mounted,
+    open,
+    positionerElement,
+    setActivationDirection,
+    setFloatingRootContext,
+    popupElement,
+    viewportElement,
+    rootRef,
+    beforeOutsideRef,
+    afterOutsideRef,
+    afterInsideRef,
+    beforeInsideRef,
+    prevTriggerElementRef,
+    delay,
+    closeDelay,
+    orientation,
+    setViewportInert,
+    nested
+  } = (0, _NavigationMenuRootContext.useNavigationMenuRootContext)();
+  const {
+    value: itemValue
+  } = (0, _NavigationMenuItemContext.useNavigationMenuItemContext)();
+  const nodeId = (0, _NavigationMenuRootContext.useNavigationMenuTreeContext)();
+  const tree = (0, _floatingUiReact.useFloatingTree)();
+  const dismissProps = (0, _NavigationMenuDismissContext.useNavigationMenuDismissContext)();
+  const stickIfOpenTimeout = (0, _useTimeout.useTimeout)();
+  const focusFrame = (0, _useAnimationFrame.useAnimationFrame)();
+  const [triggerElement, setTriggerElement] = React.useState(null);
+  const [stickIfOpen, setStickIfOpen] = React.useState(true);
+  const [pointerType, setPointerType] = React.useState('');
+  const allowFocusRef = React.useRef(false);
+  const isActiveItem = open && value === itemValue;
+  const interactionsEnabled = positionerElement ? true : !value;
+  React.useEffect(() => {
+    if (!open) {
+      stickIfOpenTimeout.clear();
+    }
+  }, [stickIfOpenTimeout, open]);
+  React.useEffect(() => {
+    if (isActiveItem && open && popupElement && allowFocusRef.current) {
+      allowFocusRef.current = false;
+      focusFrame.request(() => {
+        beforeOutsideRef.current?.focus();
+      });
+    }
+    return () => {
+      focusFrame.cancel();
+    };
+  }, [beforeOutsideRef, focusFrame, isActiveItem, open, popupElement]);
+  function handleOpenChange(nextOpen, eventDetails) {
+    const isHover = eventDetails.reason === _reasons.REASONS.triggerHover;
+    if (!interactionsEnabled) {
+      return;
+    }
+    if (pointerType === 'touch' && isHover) {
+      return;
+    }
+    if (!nextOpen && value !== itemValue) {
+      return;
+    }
+    function changeState() {
+      if (isHover) {
+        // Only allow "patient" clicks to close the popup if it's open.
+        // If they clicked within 500ms of the popup opening, keep it open.
+        setStickIfOpen(true);
+        stickIfOpenTimeout.clear();
+        stickIfOpenTimeout.start(_constants.PATIENT_CLICK_THRESHOLD, () => {
+          setStickIfOpen(false);
+        });
+      }
+      if (nextOpen) {
+        setValue(itemValue, eventDetails);
+      } else {
+        setValue(null, eventDetails);
+        setPointerType('');
+      }
+    }
+    if (isHover) {
+      ReactDOM.flushSync(changeState);
+    } else {
+      changeState();
+    }
+  }
+  const context = (0, _floatingUiReact.useFloatingRootContext)({
+    open,
+    onOpenChange: handleOpenChange,
+    elements: {
+      reference: triggerElement,
+      floating: positionerElement || viewportElement
+    }
+  });
+  const hover = (0, _floatingUiReact.useHover)(context, {
+    move: false,
+    handleClose: (0, _floatingUiReact.safePolygon)({
+      blockPointerEvents: pointerType !== 'touch'
+    }),
+    restMs: mounted && positionerElement ? 0 : delay,
+    delay: {
+      close: closeDelay
+    }
+  });
+  const click = (0, _floatingUiReact.useClick)(context, {
+    enabled: interactionsEnabled,
+    stickIfOpen,
+    toggle: isActiveItem
+  });
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    if (isActiveItem) {
+      setFloatingRootContext(context);
+      prevTriggerElementRef.current = triggerElement;
+    }
+  }, [isActiveItem, context, setFloatingRootContext, prevTriggerElementRef, triggerElement]);
+  const {
+    getReferenceProps
+  } = (0, _floatingUiReact.useInteractions)([hover, click]);
+  function handleActivation(event) {
+    ReactDOM.flushSync(() => {
+      const prevTriggerRect = prevTriggerElementRef.current?.getBoundingClientRect();
+      if (mounted && prevTriggerRect && triggerElement) {
+        const nextTriggerRect = triggerElement.getBoundingClientRect();
+        const isMovingRight = nextTriggerRect.left > prevTriggerRect.left;
+        const isMovingDown = nextTriggerRect.top > prevTriggerRect.top;
+        if (orientation === 'horizontal' && nextTriggerRect.left !== prevTriggerRect.left) {
+          setActivationDirection(isMovingRight ? 'right' : 'left');
+        } else if (orientation === 'vertical' && nextTriggerRect.top !== prevTriggerRect.top) {
+          setActivationDirection(isMovingDown ? 'down' : 'up');
+        }
+      }
+
+      // Reset the `openEvent` to `undefined` when the active item changes so that a
+      // `click` -> `hover` on new trigger -> `hover` back to old trigger doesn't unexpectedly
+      // cause the popup to remain stuck open when leaving the old trigger.
+      if (event.type !== 'click') {
+        context.context.dataRef.current.openEvent = undefined;
+      }
+      if (pointerType === 'touch' && event.type !== 'click') {
+        return;
+      }
+      if (value != null) {
+        setValue(itemValue, (0, _createTaleUIEventDetails.createChangeEventDetails)(event.type === 'mouseenter' ? _reasons.REASONS.triggerHover : _reasons.REASONS.triggerPress, event.nativeEvent));
+      }
+    });
+  }
+  const state = {
+    open: isActiveItem
+  };
+  function handleSetPointerType(event) {
+    setPointerType(event.pointerType);
+  }
+  const defaultProps = {
+    tabIndex: 0,
+    onMouseEnter: handleActivation,
+    onClick: handleActivation,
+    onPointerEnter: handleSetPointerType,
+    onPointerDown: handleSetPointerType,
+    'aria-expanded': isActiveItem,
+    'aria-controls': isActiveItem ? popupElement?.id : undefined,
+    [_constants2.NAVIGATION_MENU_TRIGGER_IDENTIFIER]: '',
+    onFocus() {
+      if (!isActiveItem) {
+        return;
+      }
+      setViewportInert(false);
+    },
+    onMouseMove() {
+      allowFocusRef.current = false;
+    },
+    onKeyDown(event) {
+      allowFocusRef.current = true;
+
+      // For nested (submenu) triggers, don't intercept arrow keys that are used for
+      // navigation in the parent content. The arrow keys should be handled by the
+      // parent's CompositeRoot for navigating between items.
+      if (nested) {
+        return;
+      }
+      const openHorizontal = orientation === 'horizontal' && event.key === 'ArrowDown';
+      const openVertical = orientation === 'vertical' && event.key === 'ArrowRight';
+      if (openHorizontal || openVertical) {
+        setValue(itemValue, (0, _createTaleUIEventDetails.createChangeEventDetails)(_reasons.REASONS.listNavigation, event.nativeEvent));
+        handleActivation(event);
+        (0, _utils.stopEvent)(event);
+      }
+    },
+    onBlur(event) {
+      if (positionerElement && popupElement && (0, _isOutsideMenuEvent.isOutsideMenuEvent)({
+        currentTarget: event.currentTarget,
+        relatedTarget: event.relatedTarget
+      }, {
+        popupElement,
+        rootRef,
+        tree,
+        nodeId
+      })) {
+        setValue(null, (0, _createTaleUIEventDetails.createChangeEventDetails)(_reasons.REASONS.focusOut, event.nativeEvent));
+      }
+    }
+  };
+  const {
+    getButtonProps,
+    buttonRef
+  } = (0, _useButton.useButton)({
+    disabled,
+    focusableWhenDisabled: true,
+    native: nativeButton
+  });
+  const referenceElement = positionerElement || viewportElement;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeItem.CompositeItem, {
+      tag: "button",
+      render: render,
+      className: className,
+      state: state,
+      stateAttributesMapping: _popupStateMapping.pressableTriggerOpenStateMapping,
+      refs: [forwardedRef, setTriggerElement, buttonRef],
+      props: [getReferenceProps, dismissProps?.reference || _constants.EMPTY_ARRAY, defaultProps, elementProps, getButtonProps]
+    }), isActiveItem && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusGuard.FocusGuard, {
+        ref: beforeOutsideRef,
+        onFocus: event => {
+          if (referenceElement && (0, _utils.isOutsideEvent)(event, referenceElement)) {
+            beforeInsideRef.current?.focus();
+          } else {
+            const prevTabbable = (0, _utils.getPreviousTabbable)(triggerElement);
+            prevTabbable?.focus();
+          }
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        "aria-owns": viewportElement?.id,
+        style: _constants.ownerVisuallyHidden
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusGuard.FocusGuard, {
+        ref: afterOutsideRef,
+        onFocus: event => {
+          if (referenceElement && (0, _utils.isOutsideEvent)(event, referenceElement)) {
+            const elementToFocus = afterInsideRef.current && (0, _tabbable.isTabbable)(afterInsideRef.current) ? afterInsideRef.current : triggerElement;
+            elementToFocus?.focus();
+          } else {
+            const nextTabbable = (0, _utils.getNextTabbable)(triggerElement);
+            nextTabbable?.focus();
+            if (!(0, _utils.contains)(rootRef.current, nextTabbable)) {
+              setValue(null, (0, _createTaleUIEventDetails.createChangeEventDetails)(_reasons.REASONS.focusOut, event.nativeEvent));
+            }
+          }
+        }
+      })]
+    })]
+  });
+});
+if (process.env.NODE_ENV !== "production") NavigationMenuTrigger.displayName = "NavigationMenuTrigger";

package/navigation-menu/trigger/NavigationMenuTriggerDataAttributes.d.ts

@@ -0,0 +1,10 @@
+export declare enum NavigationMenuTriggerDataAttributes {
+  /**
+   * Present when the corresponding navigation menu is open.
+   */
+  popupOpen = "data-popup-open",
+  /**
+   * Present when the trigger is pressed.
+   */
+  pressed = "data-pressed",
+}

package/navigation-menu/trigger/NavigationMenuTriggerDataAttributes.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NavigationMenuTriggerDataAttributes = void 0;
+var _popupStateMapping = require("../../utils/popupStateMapping");
+let NavigationMenuTriggerDataAttributes = exports.NavigationMenuTriggerDataAttributes = function (NavigationMenuTriggerDataAttributes) {
+  /**
+   * Present when the corresponding navigation menu is open.
+   */
+  NavigationMenuTriggerDataAttributes[NavigationMenuTriggerDataAttributes["popupOpen"] = _popupStateMapping.CommonTriggerDataAttributes.popupOpen] = "popupOpen";
+  /**
+   * Present when the trigger is pressed.
+   */
+  NavigationMenuTriggerDataAttributes[NavigationMenuTriggerDataAttributes["pressed"] = _popupStateMapping.CommonTriggerDataAttributes.pressed] = "pressed";
+  return NavigationMenuTriggerDataAttributes;
+}({});

package/navigation-menu/utils/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const OPEN_DELAY = 50;
+export declare const CLOSE_DELAY = 50;
+export declare const NAVIGATION_MENU_TRIGGER_IDENTIFIER = "data-tale-ui-navigation-menu-trigger";

package/navigation-menu/utils/constants.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OPEN_DELAY = exports.NAVIGATION_MENU_TRIGGER_IDENTIFIER = exports.CLOSE_DELAY = void 0;
+const OPEN_DELAY = exports.OPEN_DELAY = 50;
+const CLOSE_DELAY = exports.CLOSE_DELAY = 50;
+const NAVIGATION_MENU_TRIGGER_IDENTIFIER = exports.NAVIGATION_MENU_TRIGGER_IDENTIFIER = 'data-tale-ui-navigation-menu-trigger';

package/navigation-menu/utils/isOutsideMenuEvent.d.ts

@@ -0,0 +1,17 @@
+import { FloatingTreeType } from "../../floating-ui-react/index.js";
+interface Targets {
+  currentTarget: HTMLElement | null;
+  relatedTarget: HTMLElement | null;
+}
+interface Params {
+  popupElement: HTMLElement | null;
+  viewportElement?: HTMLElement | null | undefined;
+  rootRef: React.RefObject<HTMLDivElement | null>;
+  tree: FloatingTreeType | null;
+  nodeId: string | undefined;
+}
+export declare function isOutsideMenuEvent({
+  currentTarget,
+  relatedTarget
+}: Targets, params: Params): boolean;
+export {};

package/navigation-menu/utils/isOutsideMenuEvent.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isOutsideMenuEvent = isOutsideMenuEvent;
+var _utils = require("../../floating-ui-react/utils");
+function isOutsideMenuEvent({
+  currentTarget,
+  relatedTarget
+}, params) {
+  const {
+    popupElement,
+    viewportElement,
+    rootRef,
+    tree,
+    nodeId
+  } = params;
+  const nodeChildrenContains = tree ? (0, _utils.getNodeChildren)(tree.nodesRef.current, nodeId).some(node => (0, _utils.contains)(node.context?.elements.floating, relatedTarget)) : [];
+
+  // For nested scenarios without popupElement, we need to be more lenient
+  // and only close if we're definitely outside the root
+  if (!popupElement) {
+    return !(0, _utils.contains)(rootRef.current, relatedTarget) && !nodeChildrenContains;
+  }
+
+  // Use popupElement as the primary floating element, but fall back to viewportElement if needed
+  const floatingElement = popupElement || viewportElement;
+  return !(0, _utils.contains)(floatingElement, currentTarget) && !(0, _utils.contains)(floatingElement, relatedTarget) && !(0, _utils.contains)(rootRef.current, relatedTarget) && !nodeChildrenContains && !((0, _utils.contains)(floatingElement, relatedTarget) && relatedTarget?.hasAttribute('data-tale-ui-focus-guard'));
+}

package/navigation-menu/utils/setFixedSize.d.ts

@@ -0,0 +1 @@
+export declare function setFixedSize(element: HTMLElement, type: 'popup' | 'positioner'): void;

package/navigation-menu/utils/setFixedSize.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setFixedSize = setFixedSize;
+var _getCssDimensions = require("../../utils/getCssDimensions");
+var _NavigationMenuPopupCssVars = require("../popup/NavigationMenuPopupCssVars");
+var _NavigationMenuPositionerCssVars = require("../positioner/NavigationMenuPositionerCssVars");
+function setFixedSize(element, type) {
+  const {
+    width,
+    height
+  } = (0, _getCssDimensions.getCssDimensions)(element);
+  element.style.setProperty(type === 'popup' ? _NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupWidth : _NavigationMenuPositionerCssVars.NavigationMenuPositionerCssVars.positionerWidth, `${width}px`);
+  element.style.setProperty(type === 'popup' ? _NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupHeight : _NavigationMenuPositionerCssVars.NavigationMenuPositionerCssVars.positionerHeight, `${height}px`);
+}

package/navigation-menu/viewport/NavigationMenuViewport.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { TaleUIComponentProps } from "../../utils/types.js";
+/**
+ * The clipping viewport of the navigation menu's current content.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Tale UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
+ */
+export declare const NavigationMenuViewport: React.ForwardRefExoticComponent<Omit<NavigationMenuViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface NavigationMenuViewportState {}
+export interface NavigationMenuViewportProps extends TaleUIComponentProps<'div', NavigationMenuViewport.State> {}
+export declare namespace NavigationMenuViewport {
+  type State = NavigationMenuViewportState;
+  type Props = NavigationMenuViewportProps;
+}

package/navigation-menu/viewport/NavigationMenuViewport.js

@@ -0,0 +1,141 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NavigationMenuViewport = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _useIsoLayoutEffect = require("@tale-ui/utils/useIsoLayoutEffect");
+var _useId = require("@tale-ui/utils/useId");
+var _inertValue = require("@tale-ui/utils/inertValue");
+var _useStableCallback = require("@tale-ui/utils/useStableCallback");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _NavigationMenuRootContext = require("../root/NavigationMenuRootContext");
+var _FocusGuard = require("../../utils/FocusGuard");
+var _usePopupAutoResize = require("../../utils/usePopupAutoResize");
+var _utils = require("../../floating-ui-react/utils");
+var _getEmptyRootContext = require("../../floating-ui-react/utils/getEmptyRootContext");
+var _NavigationMenuPositionerContext = require("../positioner/NavigationMenuPositionerContext");
+var _DirectionContext = require("../../direction-provider/DirectionContext");
+var _jsxRuntime = require("react/jsx-runtime");
+const EMPTY_ROOT_CONTEXT = (0, _getEmptyRootContext.getEmptyRootContext)();
+function Guards({
+  children
+}) {
+  const {
+    beforeInsideRef,
+    beforeOutsideRef,
+    afterInsideRef,
+    afterOutsideRef,
+    positionerElement,
+    viewportElement,
+    floatingRootContext
+  } = (0, _NavigationMenuRootContext.useNavigationMenuRootContext)();
+  const hasPositioner = Boolean((0, _NavigationMenuPositionerContext.useNavigationMenuPositionerContext)(true));
+  const referenceElement = positionerElement || viewportElement;
+  if (!floatingRootContext && !hasPositioner) {
+    return children;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusGuard.FocusGuard, {
+      ref: beforeInsideRef,
+      onFocus: event => {
+        if (referenceElement && (0, _utils.isOutsideEvent)(event, referenceElement)) {
+          (0, _utils.getNextTabbable)(referenceElement)?.focus();
+        } else {
+          beforeOutsideRef.current?.focus();
+        }
+      }
+    }), children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusGuard.FocusGuard, {
+      ref: afterInsideRef,
+      onFocus: event => {
+        if (referenceElement && (0, _utils.isOutsideEvent)(event, referenceElement)) {
+          (0, _utils.getPreviousTabbable)(referenceElement)?.focus();
+        } else {
+          afterOutsideRef.current?.focus();
+        }
+      }
+    })]
+  });
+}
+
+/**
+ * The clipping viewport of the navigation menu's current content.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Tale UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
+ */
+
+const NavigationMenuViewport = exports.NavigationMenuViewport = /*#__PURE__*/React.forwardRef(function NavigationMenuViewport(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    children,
+    id: idProp,
+    ...elementProps
+  } = componentProps;
+  const id = (0, _useId.useId)(idProp);
+  const {
+    open,
+    mounted,
+    value,
+    popupElement,
+    positionerElement,
+    setViewportElement,
+    setViewportTargetElement,
+    floatingRootContext,
+    prevTriggerElementRef,
+    viewportInert,
+    setViewportInert
+  } = (0, _NavigationMenuRootContext.useNavigationMenuRootContext)();
+  const positioning = (0, _NavigationMenuPositionerContext.useNavigationMenuPositionerContext)(true);
+  const hasPositioner = Boolean(positioning);
+  const direction = (0, _DirectionContext.useDirection)();
+  const enableAutoResize = (0, _useStableCallback.useStableCallback)(() => open);
+  (0, _usePopupAutoResize.usePopupAutoResize)({
+    popupElement,
+    positionerElement,
+    mounted,
+    content: value,
+    enabled: enableAutoResize,
+    side: positioning?.side ?? 'bottom',
+    direction
+  });
+  const domReference = (floatingRootContext || EMPTY_ROOT_CONTEXT).useState('domReferenceElement');
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    if (domReference) {
+      prevTriggerElementRef.current = domReference;
+    }
+  }, [domReference, prevTriggerElementRef]);
+  const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    ref: [forwardedRef, setViewportElement],
+    props: [{
+      id,
+      onBlur(event) {
+        const relatedTarget = event.relatedTarget;
+        const currentTarget = event.currentTarget;
+
+        // If focus is leaving the viewport and not going to the trigger, make it inert
+        // to prevent a focus loop.
+        if (relatedTarget && !(0, _utils.contains)(currentTarget, relatedTarget) && relatedTarget !== domReference) {
+          setViewportInert(true);
+        }
+      },
+      ...(!hasPositioner && viewportInert && {
+        inert: (0, _inertValue.inertValue)(true)
+      }),
+      children: hasPositioner ? children : /*#__PURE__*/(0, _jsxRuntime.jsx)(Guards, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          ref: setViewportTargetElement,
+          children: children
+        })
+      })
+    }, elementProps]
+  });
+  return hasPositioner ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Guards, {
+    children: element
+  }) : element;
+});
+if (process.env.NODE_ENV !== "production") NavigationMenuViewport.displayName = "NavigationMenuViewport";

package/number-field/decrement/NumberFieldDecrement.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { TaleUIComponentProps, NativeButtonProps } from "../../utils/types.js";
+import type { NumberFieldRoot } from "../root/NumberFieldRoot.js";
+/**
+ * A stepper button that decreases the field value when clicked.
+ * Renders an `<button>` element.
+ *
+ * Documentation: [Tale UI Number Field](https://base-ui.com/react/components/number-field)
+ */
+export declare const NumberFieldDecrement: React.ForwardRefExoticComponent<Omit<NumberFieldDecrementProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export interface NumberFieldDecrementState extends NumberFieldRoot.State {}
+export interface NumberFieldDecrementProps extends NativeButtonProps, TaleUIComponentProps<'button', NumberFieldDecrement.State> {}
+export declare namespace NumberFieldDecrement {
+  type State = NumberFieldDecrementState;
+  type Props = NumberFieldDecrementProps;
+}