@base-ui-components/react/esm/field/description/useFieldDescription.js

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.

'use client';

import * as React from 'react';
import { mergeReactProps } from '../../utils/mergeReactProps.js';
import { useBaseUiId } from '../../utils/useBaseUiId.js';
import { useEnhancedEffect } from '../../utils/useEnhancedEffect.js';
import { useFieldRootContext } from '../root/FieldRootContext.js';
export function useFieldDescription(params) {
  const {
    id: idProp
  } = params;
  const {
    setMessageIds
  } = useFieldRootContext();
  const id = useBaseUiId(idProp);
  useEnhancedEffect(() => {
    if (!id) {
      return undefined;
    }
    setMessageIds(v => v.concat(id));
    return () => {
      setMessageIds(v => v.filter(item => item !== id));
    };
  }, [id, setMessageIds]);
  const getDescriptionProps = React.useCallback((externalProps = {}) => mergeReactProps(externalProps, {
    id
  }), [id]);
  return React.useMemo(() => ({
    getDescriptionProps
  }), [getDescriptionProps]);
}