UNPKG

@base-ui/react

Version:

Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.

104 lines (101 loc) 4.23 kB
"use strict"; var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default; Object.defineProperty(exports, "__esModule", { value: true }); exports.TooltipStore = void 0; var React = _interopRequireWildcard(require("react")); var ReactDOM = _interopRequireWildcard(require("react-dom")); var _store = require("@base-ui/utils/store"); var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails"); var _reasons = require("../../internals/reasons"); var _popups = require("../../utils/popups"); const selectors = { ..._popups.popupStoreSelectors, disabled: (0, _store.createSelector)(state => state.disabled), instantType: (0, _store.createSelector)(state => state.instantType), isInstantPhase: (0, _store.createSelector)(state => state.isInstantPhase), trackCursorAxis: (0, _store.createSelector)(state => state.trackCursorAxis), disableHoverablePopup: (0, _store.createSelector)(state => state.disableHoverablePopup), lastOpenChangeReason: (0, _store.createSelector)(state => state.openChangeReason), closeOnClick: (0, _store.createSelector)(state => state.closeOnClick), closeDelay: (0, _store.createSelector)(state => state.closeDelay), hasViewport: (0, _store.createSelector)(state => state.hasViewport) }; class TooltipStore extends _store.ReactStore { constructor(initialState, floatingId, nested = false) { const triggerElements = new _popups.PopupTriggerMap(); const state = { ...createInitialState(), ...initialState }; state.floatingRootContext = (0, _popups.createPopupFloatingRootContext)(triggerElements, floatingId, nested); super(state, { popupRef: /*#__PURE__*/React.createRef(), onOpenChange: undefined, onOpenChangeComplete: undefined, triggerElements }, selectors); } setOpen = (nextOpen, eventDetails) => { const reason = eventDetails.reason; const isHover = reason === _reasons.REASONS.triggerHover; const isFocusOpen = nextOpen && reason === _reasons.REASONS.triggerFocus; const isDismissClose = !nextOpen && (reason === _reasons.REASONS.triggerPress || reason === _reasons.REASONS.escapeKey); eventDetails.preventUnmountOnClose = () => { this.set('preventUnmountingOnClose', true); }; this.context.onOpenChange?.(nextOpen, eventDetails); if (eventDetails.isCanceled) { return; } this.state.floatingRootContext.dispatchOpenChange(nextOpen, eventDetails); const changeState = () => { const updatedState = { open: nextOpen, openChangeReason: reason }; if (isFocusOpen) { updatedState.instantType = 'focus'; } else if (isDismissClose) { updatedState.instantType = 'dismiss'; } else if (reason === _reasons.REASONS.triggerHover) { updatedState.instantType = undefined; } (0, _popups.setOpenTriggerState)(updatedState, nextOpen, eventDetails.trigger); this.update(updatedState); }; if (isHover) { // If a hover reason is provided, we need to flush the state synchronously. This ensures // `node.getAnimations()` knows about the new state. ReactDOM.flushSync(changeState); } else { changeState(); } }; // Used by trigger clicks to clear a delayed hover open without reporting a public open-state change. cancelPendingOpen(event) { this.state.floatingRootContext.dispatchOpenChange(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerPress, event)); } static useStore(externalStore, initialState) { /* eslint-disable react-hooks/rules-of-hooks */ const store = (0, _popups.usePopupStore)(externalStore, (floatingId, nested) => new TooltipStore(initialState, floatingId, nested)).store; /* eslint-enable react-hooks/rules-of-hooks */ return store; } } exports.TooltipStore = TooltipStore; function createInitialState() { return { ...(0, _popups.createInitialPopupStoreState)(), disabled: false, instantType: undefined, isInstantPhase: false, trackCursorAxis: 'none', disableHoverablePopup: false, openChangeReason: null, closeOnClick: true, closeDelay: 0, hasViewport: false }; }