@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.
66 lines (64 loc) • 2.48 kB
JavaScript
'use client';
import * as React from 'react';
import PropTypes from 'prop-types';
import { useComponentRenderer } from '../../utils/useComponentRenderer.js';
import { usePreviewCardRootContext } from '../root/PreviewCardContext.js';
import { useForkRef } from '../../utils/useForkRef.js';
import { triggerOpenStateMapping } from '../../utils/popupStateMapping.js';
/**
* A link that opens the preview card.
* Renders an `<a>` element.
*
* Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)
*/
const PreviewCardTrigger = /*#__PURE__*/React.forwardRef(function PreviewCardTrigger(props, forwardedRef) {
const {
render,
className,
...otherProps
} = props;
const {
open,
getRootTriggerProps,
setTriggerElement
} = usePreviewCardRootContext();
const state = React.useMemo(() => ({
open
}), [open]);
const mergedRef = useForkRef(setTriggerElement, forwardedRef);
const {
renderElement
} = useComponentRenderer({
propGetter: getRootTriggerProps,
render: render ?? 'a',
className,
state,
ref: mergedRef,
extraProps: otherProps,
customStyleHookMapping: triggerOpenStateMapping
});
return renderElement();
});
process.env.NODE_ENV !== "production" ? PreviewCardTrigger.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* @ignore
*/
children: PropTypes.node,
/**
* CSS class applied to the element, or a function that
* returns a class based on the component’s state.
*/
className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
/**
* Allows you to replace the component’s HTML element
* with a different tag, or compose it with another component.
*
* Accepts a `ReactElement` or a function that returns the element to render.
*/
render: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
} : void 0;
export { PreviewCardTrigger };