@base-ui-components/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.
235 lines (230 loc) • 9.91 kB
JavaScript
;
'use client';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useCollapsiblePanel = useCollapsiblePanel;
var React = _interopRequireWildcard(require("react"));
var _hasComputedStyleMapSupport = require("../../utils/hasComputedStyleMapSupport");
var _mergeReactProps = require("../../utils/mergeReactProps");
var _owner = require("../../utils/owner");
var _useAnimationsFinished = require("../../utils/useAnimationsFinished");
var _useEnhancedEffect = require("../../utils/useEnhancedEffect");
var _useEventCallback = require("../../utils/useEventCallback");
var _useForkRef = require("../../utils/useForkRef");
var _useOnMount = require("../../utils/useOnMount");
var _useBaseUiId = require("../../utils/useBaseUiId");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function getAnimationNameFromComputedStyles(element) {
if ((0, _hasComputedStyleMapSupport.hasComputedStyleMapSupport)()) {
const styleMap = element.computedStyleMap();
const animationName = styleMap.get('animation-name');
return animationName?.value ?? undefined;
}
const containerWindow = (0, _owner.ownerWindow)(element);
const computedStyles = containerWindow.getComputedStyle(element);
return computedStyles.animationName;
}
let cachedSupportsHiddenUntilFound;
function supportsHiddenUntilFound(element) {
// detect support for onbeforematch event and content-visibility
if (cachedSupportsHiddenUntilFound === undefined) {
const supportsCssContentVisibility = typeof CSS !== 'undefined' && typeof CSS.supports === 'function' && CSS.supports('content-visibility', 'hidden');
const supportsOnBeforeMatch = 'onbeforematch' in (0, _owner.ownerWindow)(element);
cachedSupportsHiddenUntilFound = process.env.NODE_ENV === 'test' ? supportsOnBeforeMatch : supportsCssContentVisibility && supportsOnBeforeMatch;
}
return cachedSupportsHiddenUntilFound;
}
function useCollapsiblePanel(parameters) {
const {
hiddenUntilFound,
panelId,
keepMounted,
open,
mounted,
ref,
setPanelId,
setMounted: setContextMounted,
setOpen
} = parameters;
const id = (0, _useBaseUiId.useBaseUiId)(panelId);
const panelRef = React.useRef(null);
const [{
height,
width
}, setDimensions] = React.useState({
height: 0,
width: 0
});
const latestAnimationNameRef = React.useRef('none');
const originalTransitionDurationStyleRef = React.useRef(null);
const isTransitioningRef = React.useRef(false);
(0, _useEnhancedEffect.useEnhancedEffect)(() => {
if (!keepMounted && !open) {
setPanelId(undefined);
} else {
setPanelId(id);
}
return () => {
setPanelId(undefined);
};
}, [id, setPanelId, keepMounted, open]);
const handlePanelRef = (0, _useEventCallback.useEventCallback)(element => {
if (!element) {
return;
}
panelRef.current = element;
const computedAnimationName = getAnimationNameFromComputedStyles(element);
latestAnimationNameRef.current = computedAnimationName ?? 'none';
originalTransitionDurationStyleRef.current = element.style.transitionDuration;
});
const mergedRef = (0, _useForkRef.useForkRef)(ref, handlePanelRef);
const runOnceAnimationsFinish = (0, _useAnimationsFinished.useAnimationsFinished)(panelRef);
const isOpen = open || mounted;
const isBeforeMatchRef = React.useRef(false);
const isInitialOpenAnimationRef = React.useRef(isOpen);
const registerCssTransitionListeners = React.useCallback(() => {
const element = panelRef.current;
if (!element) {
return undefined;
}
function handleTransitionRun() {
isTransitioningRef.current = true;
}
function handleTransitionEnd() {
isTransitioningRef.current = false;
}
function handleTransitionCancel() {
isTransitioningRef.current = false;
}
element.addEventListener('transitioncancel', handleTransitionCancel);
element.addEventListener('transitionend', handleTransitionEnd);
element.addEventListener('transitionrun', handleTransitionRun);
return () => {
element.removeEventListener('transitioncancel', handleTransitionCancel);
element.removeEventListener('transitionend', handleTransitionEnd);
element.removeEventListener('transitionrun', handleTransitionRun);
};
}, []);
(0, _useEnhancedEffect.useEnhancedEffect)(() => {
const {
current: element
} = panelRef;
let frame1 = -1;
let frame2 = -1;
if (element) {
const isBeforeMatch = isBeforeMatchRef.current;
const isInitialOpenAnimation = isInitialOpenAnimationRef.current;
const isTransitioning = isTransitioningRef.current;
const originalAnimationName = element.style.animationName === 'none' ? '' : element.style.animationName;
const originalTransitionDuration = originalTransitionDurationStyleRef.current;
// cancel animation/transitions for these specific instances:
// 1. when initially open, on mount/load, it should just appear fully open
// but remain animated per styles afterwards
// 2. when using `hidden='until-found'` and is opened by find-in-page, it
// should open instantly but remain animated // as styled afterwards
const shouldCancelAnimation = isBeforeMatch || isInitialOpenAnimation;
element.style.animationName = 'none';
const isClosed = !open && !mounted;
if (!isTransitioning || isClosed) {
if (!keepMounted) {
// when keepMounted is false the panel does not exist in the DOM so transition
// listeners need to be eagerly registered here before any state change
registerCssTransitionListeners();
}
const rect = isClosed ? {
height: 0,
width: 0
} : element.getBoundingClientRect();
setDimensions({
height: rect.height,
width: rect.width
});
}
element.style.animationName = shouldCancelAnimation ? 'none' : originalAnimationName;
element.style.transitionDuration = shouldCancelAnimation ? '0s' : originalTransitionDuration ?? '';
runOnceAnimationsFinish(() => {
setContextMounted(open);
if (isBeforeMatch) {
isBeforeMatchRef.current = false;
frame1 = requestAnimationFrame(() => {
frame2 = requestAnimationFrame(() => {
element.style.transitionDuration = originalTransitionDurationStyleRef.current ?? '';
});
});
}
});
}
return () => {
cancelAnimationFrame(frame1);
cancelAnimationFrame(frame2);
};
}, [mounted, keepMounted, open, registerCssTransitionListeners, runOnceAnimationsFinish, setContextMounted, setPanelId]);
(0, _useOnMount.useOnMount)(() => {
const element = panelRef.current;
let frame2 = -1;
let frame3 = -1;
const frame = requestAnimationFrame(() => {
isInitialOpenAnimationRef.current = false;
if (element) {
frame2 = requestAnimationFrame(() => {
frame3 = requestAnimationFrame(() => {
// it takes 3 frames to unset `'0s'` from the initial open state correctly
element.style.transitionDuration = originalTransitionDurationStyleRef.current ?? '';
});
});
}
});
return () => {
cancelAnimationFrame(frame);
cancelAnimationFrame(frame2);
cancelAnimationFrame(frame3);
};
});
(0, _useOnMount.useOnMount)(registerCssTransitionListeners);
// if `hidden="until-found"` content is revealed by browser's in-page search
// we need to manually sync the open state
React.useEffect(function registerBeforeMatchListener() {
const {
current: element
} = panelRef;
if (!element || !supportsHiddenUntilFound(element)) {
return undefined;
}
function handleOnBeforeMatch(event) {
event.preventDefault();
isBeforeMatchRef.current = true;
// beforematch only fires if the matching content is initially hidden
setOpen(true);
}
element.addEventListener('beforematch', handleOnBeforeMatch);
return () => {
element.removeEventListener('beforematch', handleOnBeforeMatch);
};
}, [setOpen]);
// There is a bug in react that forces string values for the `hidden` attribute to a boolean
// so we have to force it back to `'until-found'` in the DOM when applicable
// https://github.com/facebook/react/issues/24740
(0, _useEnhancedEffect.useEnhancedEffect)(() => {
const {
current: element
} = panelRef;
if (element && supportsHiddenUntilFound(element) && element?.hidden && !isOpen && hiddenUntilFound === true) {
// @ts-ignore
element.hidden = 'until-found';
}
}, [hiddenUntilFound, isOpen]);
const hidden = hiddenUntilFound ? 'until-found' : 'hidden';
const getRootProps = React.useCallback((externalProps = {}) => (0, _mergeReactProps.mergeReactProps)(externalProps, {
id,
hidden: isOpen ? undefined : hidden,
ref: mergedRef
}), [hidden, id, isOpen, mergedRef]);
return React.useMemo(() => ({
getRootProps,
height,
width,
isOpen
}), [getRootProps, height, width, isOpen]);
}