@base-ui/react 1.4.0 → 1.5.0

package/utils/popups/store.d.ts

@@ -1,7 +1,8 @@
 import { FloatingRootContext } from "../../floating-ui-react/index.js";
-import { TransitionStatus } from "../useTransitionStatus.js";
+import { FloatingRootStore } from "../../floating-ui-react/components/FloatingRootStore.js";
+import { TransitionStatus } from "../../internals/useTransitionStatus.js";
 import { PopupTriggerMap } from "./popupTriggerMap.js";
-import { HTMLProps } from "../types.js";
+import { HTMLProps } from "../../internals/types.js";
 /**
  * State common to all popup stores.
  */
@@ -24,9 +25,14 @@ export type PopupStoreState<Payload> = {
    */
   transitionStatus: TransitionStatus;
   floatingRootContext: FloatingRootContext;
+  floatingId: string | undefined;
+  /**
+   * Number of trigger elements currently registered for this popup.
+   */
+  triggerCount: number;
   /**
    * Whether to prevent unmounting the popup when closed.
-   * Useful for interactling with JS animation libraries that control unmounting themselves.
+   * Useful for interacting with JS animation libraries that control unmounting themselves.
    */
   preventUnmountingOnClose: boolean;
   /**
@@ -67,6 +73,7 @@ export type PopupStoreState<Payload> = {
   popupProps: HTMLProps;
 };
 export declare function createInitialPopupStoreState<Payload>(): PopupStoreState<Payload>;
+export declare function createPopupFloatingRootContext(triggerElements: PopupTriggerMap, floatingId?: string | undefined, nested?: boolean): FloatingRootStore;
 export type PopupStoreContext<ChangeEventDetails> = {
   /**
    * Map of registered trigger elements.
@@ -90,11 +97,13 @@ export declare const popupStoreSelectors: {
   open: (state: S) => boolean;
   mounted: (state: S) => boolean;
   transitionStatus: (state: S) => TransitionStatus;
-  floatingRootContext: (state: S) => import("../../floating-ui-react/components/FloatingRootStore.js").FloatingRootStore;
+  floatingRootContext: (state: S) => FloatingRootStore;
+  triggerCount: (state: S) => number;
   preventUnmountingOnClose: (state: S) => boolean;
   payload: (state: S) => unknown;
   activeTriggerId: (state: S) => string | null;
   activeTriggerElement: (state: S) => Element | null;
+  popupId: (state: S) => string | undefined;
   /**
    * Whether the trigger with the given ID was used to open the popup.
    */
@@ -108,6 +117,10 @@ export declare const popupStoreSelectors: {
    */
   isMountedByTrigger: (state: S, triggerId: string | undefined) => boolean;
   triggerProps: (state: S, isActive: boolean) => HTMLProps;
+  /**
+   * Popup id for the trigger that currently owns the open popup.
+   */
+  triggerPopupId: (state: S, triggerId: string | undefined) => string | undefined;
   popupProps: (state: S) => HTMLProps;
   popupElement: (state: S) => HTMLElement | null;
   positionerElement: (state: S) => HTMLElement | null;

package/utils/popups/store.js

@@ -4,10 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createInitialPopupStoreState = createInitialPopupStoreState;
+exports.createPopupFloatingRootContext = createPopupFloatingRootContext;
 exports.popupStoreSelectors = void 0;
 var _store = require("@base-ui/utils/store");
+var _empty = require("@base-ui/utils/empty");
+var _FloatingRootStore = require("../../floating-ui-react/components/FloatingRootStore");
 var _getEmptyRootContext = require("../../floating-ui-react/utils/getEmptyRootContext");
-var _constants = require("../constants");
 /**
  * State common to all popup stores.
  */
@@ -19,6 +21,8 @@ function createInitialPopupStoreState() {
     mounted: false,
     transitionStatus: undefined,
     floatingRootContext: (0, _getEmptyRootContext.getEmptyRootContext)(),
+    floatingId: undefined,
+    triggerCount: 0,
     preventUnmountingOnClose: false,
     payload: undefined,
     activeTriggerId: null,
@@ -26,21 +30,50 @@ function createInitialPopupStoreState() {
     triggerIdProp: undefined,
     popupElement: null,
     positionerElement: null,
-    activeTriggerProps: _constants.EMPTY_OBJECT,
-    inactiveTriggerProps: _constants.EMPTY_OBJECT,
-    popupProps: _constants.EMPTY_OBJECT
+    activeTriggerProps: _empty.EMPTY_OBJECT,
+    inactiveTriggerProps: _empty.EMPTY_OBJECT,
+    popupProps: _empty.EMPTY_OBJECT
   };
 }
+function createPopupFloatingRootContext(triggerElements, floatingId, nested = false) {
+  return new _FloatingRootStore.FloatingRootStore({
+    open: false,
+    transitionStatus: undefined,
+    floatingElement: null,
+    referenceElement: null,
+    triggerElements,
+    floatingId,
+    syncOnly: true,
+    nested,
+    onOpenChange: undefined
+  });
+}
 const activeTriggerIdSelector = (0, _store.createSelector)(state => state.triggerIdProp ?? state.activeTriggerId);
+const openSelector = (0, _store.createSelector)(state => state.openProp ?? state.open);
+const popupIdSelector = (0, _store.createSelector)(state => {
+  const popupId = state.popupElement?.id ?? state.floatingId;
+  return popupId || undefined;
+});
+function triggerOwnsOpenPopup(state, triggerId) {
+  return triggerId !== undefined && openSelector(state) && activeTriggerIdSelector(state) === triggerId;
+}
+function triggerOwnsOpenPopupOrIsOnlyTrigger(state, triggerId) {
+  if (triggerOwnsOpenPopup(state, triggerId)) {
+    return true;
+  }
+  return triggerId !== undefined && openSelector(state) && activeTriggerIdSelector(state) == null && state.triggerCount === 1;
+}
 const popupStoreSelectors = exports.popupStoreSelectors = {
-  open: (0, _store.createSelector)(state => state.openProp ?? state.open),
+  open: openSelector,
   mounted: (0, _store.createSelector)(state => state.mounted),
   transitionStatus: (0, _store.createSelector)(state => state.transitionStatus),
   floatingRootContext: (0, _store.createSelector)(state => state.floatingRootContext),
+  triggerCount: (0, _store.createSelector)(state => state.triggerCount),
   preventUnmountingOnClose: (0, _store.createSelector)(state => state.preventUnmountingOnClose),
   payload: (0, _store.createSelector)(state => state.payload),
   activeTriggerId: activeTriggerIdSelector,
   activeTriggerElement: (0, _store.createSelector)(state => state.mounted ? state.activeTriggerElement : null),
+  popupId: popupIdSelector,
   /**
    * Whether the trigger with the given ID was used to open the popup.
    */
@@ -48,12 +81,16 @@ const popupStoreSelectors = exports.popupStoreSelectors = {
   /**
    * Whether the popup is open and was activated by a trigger with the given ID.
    */
-  isOpenedByTrigger: (0, _store.createSelector)((state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId && state.open),
+  isOpenedByTrigger: (0, _store.createSelector)((state, triggerId) => triggerOwnsOpenPopup(state, triggerId)),
   /**
    * Whether the popup is mounted and was activated by a trigger with the given ID.
    */
   isMountedByTrigger: (0, _store.createSelector)((state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId && state.mounted),
   triggerProps: (0, _store.createSelector)((state, isActive) => isActive ? state.activeTriggerProps : state.inactiveTriggerProps),
+  /**
+   * Popup id for the trigger that currently owns the open popup.
+   */
+  triggerPopupId: (0, _store.createSelector)((state, triggerId) => triggerOwnsOpenPopupOrIsOnlyTrigger(state, triggerId) ? popupIdSelector(state) : undefined),
   popupProps: (0, _store.createSelector)(state => state.popupProps),
   popupElement: (0, _store.createSelector)(state => state.popupElement),
   positionerElement: (0, _store.createSelector)(state => state.positionerElement)

package/utils/popups/useTriggerFocusGuards.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { type BaseUIChangeEventDetails } from "../createBaseUIEventDetails.js";
-import { REASONS } from "../reasons.js";
+import { type BaseUIChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 /**
  * Minimal store interface required by the focus guard hook.
  * Both PopoverStore and MenuStore satisfy this interface.

package/utils/popups/useTriggerFocusGuards.js

@@ -8,10 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTriggerFocusGuards = useTriggerFocusGuards;
 var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
-var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _utils = require("../../floating-ui-react/utils");
-var _createBaseUIEventDetails = require("../createBaseUIEventDetails");
-var _reasons = require("../reasons");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
 /**
  * Minimal store interface required by the focus guard hook.
  * Both PopoverStore and MenuStore satisfy this interface.
@@ -26,14 +25,14 @@ var _reasons = require("../reasons");
  */
 function useTriggerFocusGuards(store, triggerElementRef) {
   const preFocusGuardRef = React.useRef(null);
-  const handlePreFocusGuardFocus = (0, _useStableCallback.useStableCallback)(event => {
+  function handlePreFocusGuardFocus(event) {
     ReactDOM.flushSync(() => {
       store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.focusOut, event.nativeEvent, event.currentTarget));
     });
     const previousTabbable = (0, _utils.getTabbableBeforeElement)(preFocusGuardRef.current);
     previousTabbable?.focus();
-  });
-  const handleFocusTargetFocus = (0, _useStableCallback.useStableCallback)(event => {
+  }
+  function handleFocusTargetFocus(event) {
     const positionerElement = store.select('positionerElement');
     if (positionerElement && (0, _utils.isOutsideEvent)(event, positionerElement)) {
       store.context.beforeContentFocusGuardRef.current?.focus();
@@ -51,7 +50,7 @@ function useTriggerFocusGuards(store, triggerElementRef) {
       }
       nextTabbable?.focus();
     }
-  });
+  }
   return {
     preFocusGuardRef,
     handlePreFocusGuardFocus,

package/utils/scrollEdges.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.SCROLL_EDGE_TOLERANCE_PX = void 0;
 exports.getMaxScrollOffset = getMaxScrollOffset;
 exports.normalizeScrollOffset = normalizeScrollOffset;
-var _clamp = require("./clamp");
+var _clamp = require("../internals/clamp");
 const SCROLL_EDGE_TOLERANCE_PX = exports.SCROLL_EDGE_TOLERANCE_PX = 1;
 function getMaxScrollOffset(scrollSize, clientSize) {
   return Math.max(0, scrollSize - clientSize);

package/utils/useAnchorPositioning.d.ts

@@ -220,6 +220,11 @@ export interface UseAnchorPositioningParameters extends UseAnchorPositioningShar
   shiftCrossAxis?: boolean | undefined;
   lazyFlip?: boolean | undefined;
   externalTree?: FloatingTreeStore | undefined;
+  /**
+   * Optional middleware that can replace the measured reference rect before offsets and collision
+   * middleware run. Used by Preview Card to position against a specific inline line box.
+   */
+  inline?: Middleware | undefined;
 }
 export interface UseAnchorPositioningReturnValue {
   positionerStyles: React.CSSProperties;

package/utils/useAnchorPositioning.js

@@ -13,7 +13,7 @@ var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _floatingUiReact = require("../floating-ui-react");
-var _DirectionContext = require("../direction-provider/DirectionContext");
+var _DirectionContext = require("../internals/direction-context/DirectionContext");
 var _arrow = require("../floating-ui-react/middleware/arrow");
 var _hideMiddleware = require("./hideMiddleware");
 var _adaptiveOriginMiddleware = require("./adaptiveOriginMiddleware");
@@ -65,6 +65,7 @@ function useAnchorPositioning(params) {
     sticky = false,
     arrowPadding = 5,
     disableAnchorTracking = false,
+    inline: inlineMiddleware,
     // Private parameters
     keepMounted = false,
     floatingRootContext,
@@ -139,7 +140,11 @@ function useAnchorPositioning(params) {
   const alignOffsetRef = (0, _useValueAsRef.useValueAsRef)(alignOffset);
   const sideOffsetDep = typeof sideOffset !== 'function' ? sideOffset : 0;
   const alignOffsetDep = typeof alignOffset !== 'function' ? alignOffset : 0;
-  const middleware = [(0, _floatingUiReact.offset)(state => {
+  const middleware = [];
+  if (inlineMiddleware) {
+    middleware.push(inlineMiddleware);
+  }
+  middleware.push((0, _floatingUiReact.offset)(state => {
     const data = getOffsetData(state, sideParam, isRtl);
     const sideAxis = typeof sideOffsetRef.current === 'function' ? sideOffsetRef.current(data) : sideOffsetRef.current;
     const alignAxis = typeof alignOffsetRef.current === 'function' ? alignOffsetRef.current(data) : alignOffsetRef.current;
@@ -148,7 +153,7 @@ function useAnchorPositioning(params) {
       crossAxis: alignAxis,
       alignmentAxis: alignAxis
     };
-  }, [sideOffsetDep, alignOffsetDep, isRtl, sideParam])];
+  }, [sideOffsetDep, alignOffsetDep, isRtl, sideParam]));
   const shiftDisabled = collisionAvoidanceAlign === 'none' && collisionAvoidanceSide !== 'shift';
   const crossAxisShiftEnabled = !shiftDisabled && (sticky || shiftCrossAxis || collisionAvoidanceSide === 'shift');
   const flipMiddleware = collisionAvoidanceSide === 'none' ? null : (0, _floatingUiReact.flip)({
@@ -233,10 +238,10 @@ function useAnchorPositioning(params) {
       floatingStyle.setProperty('--anchor-width', `${anchorWidth}px`);
       floatingStyle.setProperty('--anchor-height', `${anchorHeight}px`);
     }
-  }), (0, _arrow.arrow)(() => ({
+  }), (0, _arrow.arrow)(state => ({
     // `transform-origin` calculations rely on an element existing. If the arrow hasn't been set,
     // we'll create a fake element.
-    element: arrowRef.current || (0, _owner.ownerDocument)(arrowRef.current).createElement('div'),
+    element: arrowRef.current || (0, _owner.ownerDocument)(state.elements.floating).createElement('div'),
     padding: arrowPadding,
     offsetParent: 'floating'
   }), [arrowPadding]), {
@@ -373,11 +378,9 @@ function useAnchorPositioning(params) {
   const renderedAlign = (0, _utils.getAlignment)(renderedPlacement) || 'center';
   const anchorHidden = Boolean(middlewareData.hide?.referenceHidden);
 
-  /**
-   * Locks the flip (makes it "sticky") so it doesn't prefer a given placement
-   * and flips back lazily, not eagerly. Ideal for filtered lists that change
-   * the size of the popup dynamically to avoid unwanted flipping when typing.
-   */
+  // Locks the flip (makes it "sticky") so it doesn't prefer a given placement
+  // and flips back lazily, not eagerly. Ideal for filtered lists that change
+  // the size of the popup dynamically to avoid unwanted flipping when typing.
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (lazyFlip && mounted && isPositioned) {
       setMountSide(renderedSide);

package/utils/useIsHydrating.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useIsHydrating = useIsHydrating;
 var _shim = require("use-sync-external-store/shim");
-var _noop = require("./noop");
+var _noop = require("../internals/noop");
 function subscribe() {
   return _noop.NOOP;
 }

package/utils/useMixedToggleClickHandler.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useMixedToggleClickHandler = useMixedToggleClickHandler;
 var React = _interopRequireWildcard(require("react"));
 var _owner = require("@base-ui/utils/owner");
-var _constants = require("./constants");
+var _empty = require("@base-ui/utils/empty");
 /**
  * Returns `click` and `mousedown` handlers that fix the behavior of triggers of popups that are toggled by different events.
  * For example, a button that opens a popup on mousedown and closes it on click.
@@ -23,7 +23,7 @@ function useMixedToggleClickHandler(params) {
   const ignoreClickRef = React.useRef(false);
   return React.useMemo(() => {
     if (!enabled) {
-      return _constants.EMPTY_OBJECT;
+      return _empty.EMPTY_OBJECT;
     }
     return {
       onMouseDown: event => {

package/utils/useOpenInteractionType.d.ts

@@ -1,5 +1,9 @@
 import * as React from 'react';
 import { InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
+export declare function useOpenMethodTriggerProps(open: boolean | (() => boolean), setOpenMethod: (interactionType: InteractionType | null) => void): {
+  onClick: (event: React.MouseEvent | React.PointerEvent) => void;
+  onPointerDown: (event: React.PointerEvent) => void;
+};
 /**
  * Determines the interaction type (keyboard, mouse, touch, etc.) that opened the component.
  *

package/utils/useOpenInteractionType.js

@@ -6,20 +6,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useOpenInteractionType = useOpenInteractionType;
+exports.useOpenMethodTriggerProps = useOpenMethodTriggerProps;
 var React = _interopRequireWildcard(require("react"));
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useEnhancedClickHandler = require("@base-ui/utils/useEnhancedClickHandler");
 var _detectBrowser = require("@base-ui/utils/detectBrowser");
-var _useValueChanged = require("./useValueChanged");
-/**
- * Determines the interaction type (keyboard, mouse, touch, etc.) that opened the component.
- *
- * @param open The open state of the component.
- */
-function useOpenInteractionType(open) {
-  const [openMethod, setOpenMethod] = React.useState(null);
+var _useValueChanged = require("../internals/useValueChanged");
+function useOpenMethodTriggerProps(open, setOpenMethod) {
   const handleTriggerClick = (0, _useStableCallback.useStableCallback)((_, interactionType) => {
-    if (!open) {
+    const isOpen = typeof open === 'function' ? open() : open;
+    if (!isOpen) {
       setOpenMethod(interactionType || (
       // On iOS Safari, the hitslop around touch targets means tapping outside an element's
       // bounds does not fire `pointerdown` but does fire `mousedown`. The `interactionType`
@@ -27,20 +23,31 @@ function useOpenInteractionType(open) {
       _detectBrowser.isIOS ? 'touch' : ''));
     }
   });
+  const {
+    onClick,
+    onPointerDown
+  } = (0, _useEnhancedClickHandler.useEnhancedClickHandler)(handleTriggerClick);
+  return React.useMemo(() => ({
+    onClick,
+    onPointerDown
+  }), [onClick, onPointerDown]);
+}
+
+/**
+ * Determines the interaction type (keyboard, mouse, touch, etc.) that opened the component.
+ *
+ * @param open The open state of the component.
+ */
+function useOpenInteractionType(open) {
+  const [openMethod, setOpenMethod] = React.useState(null);
+  const triggerProps = useOpenMethodTriggerProps(open, setOpenMethod);
   (0, _useValueChanged.useValueChanged)(open, previousOpen => {
     if (previousOpen && !open) {
       setOpenMethod(null);
     }
   });
-  const {
-    onClick,
-    onPointerDown
-  } = (0, _useEnhancedClickHandler.useEnhancedClickHandler)(handleTriggerClick);
   return React.useMemo(() => ({
     openMethod,
-    triggerProps: {
-      onClick,
-      onPointerDown
-    }
-  }), [openMethod, onClick, onPointerDown]);
+    triggerProps
+  }), [openMethod, triggerProps]);
 }

package/utils/usePopupAutoResize.js

@@ -11,9 +11,8 @@ var _useAnimationFrame = require("@base-ui/utils/useAnimationFrame");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _empty = require("@base-ui/utils/empty");
-var _useAnimationsFinished = require("./useAnimationsFinished");
+var _useAnimationsFinished = require("../internals/useAnimationsFinished");
 var _getCssDimensions = require("./getCssDimensions");
-var _constants = require("./constants");
 const DEFAULT_ENABLED = () => true;
 
 /**
@@ -54,7 +53,7 @@ function usePopupAutoResize(parameters) {
       position: 'absolute',
       [side === 'top' ? 'bottom' : 'top']: '0',
       [isPhysicalLeft ? 'right' : 'left']: '0'
-    } : _constants.EMPTY_OBJECT;
+    } : _empty.EMPTY_OBJECT;
   }, [side, direction]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     // Reset the state when the popup is closed.

package/utils/usePopupViewport.js

@@ -14,7 +14,7 @@ var _usePreviousValue = require("@base-ui/utils/usePreviousValue");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _owner = require("@base-ui/utils/owner");
-var _useAnimationsFinished = require("./useAnimationsFinished");
+var _useAnimationsFinished = require("../internals/useAnimationsFinished");
 var _usePopupAutoResize = require("./usePopupAutoResize");
 var _directionProvider = require("../direction-provider");
 var _jsxRuntime = require("react/jsx-runtime");

package/utils/usePositioner.d.ts

@@ -1,5 +1,5 @@
-import { type UseRenderElementComponentProps } from "./useRenderElement.js";
-import type { TransitionStatus } from "./useTransitionStatus.js";
+import { type UseRenderElementComponentProps } from "../internals/useRenderElement.js";
+import type { TransitionStatus } from "../internals/useTransitionStatus.js";
 interface UsePositionerOptions {
   styles: React.CSSProperties;
   transitionStatus: TransitionStatus;

package/utils/usePositioner.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.usePositioner = usePositioner;
 var _popupStateMapping = require("./popupStateMapping");
-var _useRenderElement = require("./useRenderElement");
+var _useRenderElement = require("../internals/useRenderElement");
 var _getDisabledMountTransitionStyles = require("./getDisabledMountTransitionStyles");
 /**
  * Renders the shared outer Positioner element used by popup components.

package/utils/useRegisteredLabelId.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useRegisteredLabelId = useRegisteredLabelId;
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
-var _useBaseUiId = require("./useBaseUiId");
+var _useBaseUiId = require("../internals/useBaseUiId");
 function useRegisteredLabelId(idProp, setLabelId) {
   const id = (0, _useBaseUiId.useBaseUiId)(idProp);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {

package/utils/useSwipeDismiss.js

@@ -13,7 +13,7 @@ var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _owner = require("@base-ui/utils/owner");
 var _utils = require("../floating-ui-react/utils");
 var _scrollable = require("./scrollable");
-var _clamp = require("./clamp");
+var _clamp = require("../internals/clamp");
 var _getElementAtPoint = require("./getElementAtPoint");
 const DEFAULT_SWIPE_THRESHOLD = 40;
 const REVERSE_CANCEL_THRESHOLD = 10;

package/calendar/day-button/CalendarDayButton.d.ts

@@ -1,47 +0,0 @@
-import * as React from 'react';
-import { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
-/**
- * An individual interactive day button in the calendar.
- * Renders a `<button>` element.
- *
- * Documentation: [Base UI Calendar](https://base-ui.com/react/components/calendar)
- */
-export declare const CalendarDayButton: React.NamedExoticComponent<Omit<CalendarDayButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export interface CalendarDayButtonState {
-  /**
-   * Whether the day is selected.
-   */
-  selected: boolean;
-  /**
-   * Whether the day is disabled.
-   */
-  disabled: boolean;
-  /**
-   * Whether the day is not available.
-   */
-  unavailable: boolean;
-  /**
-   * Whether the day contains the current date.
-   */
-  current: boolean;
-  /**
-   * Whether the day is outside the month rendered by the day grid wrapping it.
-   */
-  outsideMonth: boolean;
-}
-export interface CalendarDayButtonProps extends Omit<BaseUIComponentProps<'button', CalendarDayButtonState>, 'value'>, NativeButtonProps {
-  /**
-   * The format used to display the day.
-   * @default adapter.formats.dayOfMonth
-   */
-  format?: string | undefined;
-  /**
-   * When `true` the item remains focusable when disabled.
-   * @default false
-   */
-  focusableWhenDisabled?: boolean | undefined;
-}
-export declare namespace CalendarDayButton {
-  type State = CalendarDayButtonState;
-  type Props = CalendarDayButtonProps;
-}

package/calendar/day-button/CalendarDayButton.js

@@ -1,130 +0,0 @@
-"use strict";
-'use client';
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CalendarDayButton = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _store = require("@base-ui/utils/store");
-var _useRenderElement = require("../../utils/useRenderElement");
-var _CalendarDayButtonDataAttributes = require("./CalendarDayButtonDataAttributes");
-var _useButton = require("../../use-button");
-var _SharedCalendarRootContext = require("../root/SharedCalendarRootContext");
-var _SharedCalendarDayGridBodyContext = require("../day-grid-body/SharedCalendarDayGridBodyContext");
-var _TemporalAdapterContext = require("../../temporal-adapter-provider/TemporalAdapterContext");
-var _SharedCalendarDayGridCellContext = require("../day-grid-cell/SharedCalendarDayGridCellContext");
-var _CompositeItem = require("../../composite/item/CompositeItem");
-var _store2 = require("../store");
-var _jsxRuntime = require("react/jsx-runtime");
-const stateAttributesMapping = {
-  selected(value) {
-    return value ? {
-      [_CalendarDayButtonDataAttributes.CalendarDayButtonDataAttributes.selected]: ''
-    } : null;
-  },
-  disabled(value) {
-    return value ? {
-      [_CalendarDayButtonDataAttributes.CalendarDayButtonDataAttributes.disabled]: ''
-    } : null;
-  },
-  unavailable(value) {
-    return value ? {
-      [_CalendarDayButtonDataAttributes.CalendarDayButtonDataAttributes.unavailable]: ''
-    } : null;
-  },
-  current(value) {
-    return value ? {
-      [_CalendarDayButtonDataAttributes.CalendarDayButtonDataAttributes.current]: ''
-    } : null;
-  },
-  outsideMonth(value) {
-    return value ? {
-      [_CalendarDayButtonDataAttributes.CalendarDayButtonDataAttributes.outsideMonth]: ''
-    } : null;
-  }
-};
-const InnerCalendarDayButton = /*#__PURE__*/React.forwardRef(function InnerCalendarDayButton(componentProps, forwardedRef) {
-  const adapter = (0, _TemporalAdapterContext.useTemporalAdapter)();
-  const {
-    className,
-    render,
-    nativeButton,
-    format = adapter.formats.dayOfMonth,
-    disabled,
-    focusableWhenDisabled = false,
-    style,
-    ...elementProps
-  } = componentProps;
-  const store = (0, _SharedCalendarRootContext.useSharedCalendarRootContext)();
-  const {
-    month,
-    today
-  } = (0, _SharedCalendarDayGridBodyContext.useSharedCalendarDayGridBodyContext)();
-  const {
-    isDisabled: isCellDisabled,
-    isUnavailable,
-    isOutsideCurrentMonth,
-    value
-  } = (0, _SharedCalendarDayGridCellContext.useCalendarDayGridCellContext)();
-  const isSelected = (0, _store.useStore)(store, _store2.selectors.isDayButtonSelected, value);
-  const isTabbable = (0, _store.useStore)(store, _store2.selectors.isDayButtonTabbable, value, month);
-  const isCurrent = adapter.isSameDay(value, today);
-  const formattedDate = React.useMemo(() => adapter.format(value, 'localizedDateWithFullMonthAndWeekDay'), [adapter, value]);
-  const isDisabled = disabled ?? isCellDisabled;
-  const isInteractionDisabled = isDisabled || isOutsideCurrentMonth;
-  const {
-    getButtonProps,
-    buttonRef
-  } = (0, _useButton.useButton)({
-    disabled: isInteractionDisabled,
-    native: nativeButton,
-    focusableWhenDisabled
-  });
-  const formattedValue = React.useMemo(() => adapter.formatByString(value, format), [adapter, value, format]);
-  const itemMetadata = React.useMemo(() => ({
-    focusable: (focusableWhenDisabled || !isDisabled) && !isOutsideCurrentMonth
-  }), [focusableWhenDisabled, isDisabled, isOutsideCurrentMonth]);
-  const props = {
-    'aria-label': formattedDate,
-    'aria-selected': isSelected ? true : undefined,
-    'aria-current': isCurrent ? 'date' : undefined,
-    'aria-disabled': isDisabled || isOutsideCurrentMonth || isUnavailable ? true : undefined,
-    children: formattedValue,
-    tabIndex: isTabbable ? 0 : -1,
-    onClick(event) {
-      if (isUnavailable || isInteractionDisabled) {
-        return;
-      }
-      store.selectDate(value, event);
-    }
-  };
-  const state = React.useMemo(() => ({
-    selected: isSelected,
-    disabled: isDisabled,
-    unavailable: isUnavailable,
-    current: isCurrent,
-    outsideMonth: isOutsideCurrentMonth
-  }), [isSelected, isDisabled, isUnavailable, isCurrent, isOutsideCurrentMonth]);
-  const element = (0, _useRenderElement.useRenderElement)('button', componentProps, {
-    state,
-    ref: [buttonRef, forwardedRef],
-    props: [props, elementProps, getButtonProps],
-    stateAttributesMapping
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeItem.CompositeItem, {
-    metadata: itemMetadata,
-    render: element
-  });
-});
-
-/**
- * An individual interactive day button in the calendar.
- * Renders a `<button>` element.
- *
- * Documentation: [Base UI Calendar](https://base-ui.com/react/components/calendar)
- */
-if (process.env.NODE_ENV !== "production") InnerCalendarDayButton.displayName = "InnerCalendarDayButton";
-const CalendarDayButton = exports.CalendarDayButton = /*#__PURE__*/React.memo(InnerCalendarDayButton);
-if (process.env.NODE_ENV !== "production") CalendarDayButton.displayName = "CalendarDayButton";