UNPKG

@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.

63 lines (62 loc) 1.86 kB
"use strict"; 'use client'; var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default; Object.defineProperty(exports, "__esModule", { value: true }); exports.ToastTitle = void 0; var React = _interopRequireWildcard(require("react")); var _useIsoLayoutEffect = require("@base-ui-components/utils/useIsoLayoutEffect"); var _useId = require("@base-ui-components/utils/useId"); var _ToastRootContext = require("../root/ToastRootContext"); var _useRenderElement = require("../../utils/useRenderElement"); /** * A title that labels the toast. * Renders an `<h2>` element. * * Documentation: [Base UI Toast](https://base-ui.com/react/components/toast) */ const ToastTitle = exports.ToastTitle = /*#__PURE__*/React.forwardRef(function ToastTitle(componentProps, forwardedRef) { const { render, className, id: idProp, children: childrenProp, ...elementProps } = componentProps; const { toast } = (0, _ToastRootContext.useToastRootContext)(); const children = childrenProp ?? toast.title; const shouldRender = Boolean(children); const id = (0, _useId.useId)(idProp); const { setTitleId } = (0, _ToastRootContext.useToastRootContext)(); (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => { if (!shouldRender) { return undefined; } setTitleId(id); return () => { setTitleId(undefined); }; }, [shouldRender, id, setTitleId]); const state = React.useMemo(() => ({ type: toast.type }), [toast.type]); const element = (0, _useRenderElement.useRenderElement)('h2', componentProps, { ref: forwardedRef, state, props: { ...elementProps, id, children } }); if (!shouldRender) { return null; } return element; }); if (process.env.NODE_ENV !== "production") ToastTitle.displayName = "ToastTitle";