@ariakit/react-core/esm/form/form-description.js

Ariakit React core

"use client";
import {
  useFormContext
} from "../__chunks/AOHIIJHJ.js";
import {
  useCollectionItem
} from "../__chunks/4WQSNMEM.js";
import "../__chunks/CTVD4XJH.js";
import {
  createElement,
  createHook,
  forwardRef,
  memo
} from "../__chunks/L4OUMOCQ.js";
import {
  useId,
  useMergeRefs
} from "../__chunks/W2TDKEPX.js";
import "../__chunks/AZVQSWGA.js";

// src/form/form-description.tsx
import { invariant } from "@ariakit/core/utils/misc";
import { useCallback, useRef } from "react";
var TagName = "div";
var useFormDescription = createHook(
  function useFormDescription2({
    store,
    name: nameProp,
    getItem: getItemProp,
    ...props
  }) {
    const context = useFormContext();
    store = store || context;
    invariant(
      store,
      process.env.NODE_ENV !== "production" && "FormDescription must be wrapped in a Form component."
    );
    const id = useId(props.id);
    const ref = useRef(null);
    const name = String(nameProp);
    const getItem = useCallback(
      (item) => {
        const nextItem = {
          ...item,
          id: id || item.id,
          name,
          type: "description"
        };
        if (getItemProp) {
          return getItemProp(nextItem);
        }
        return nextItem;
      },
      [id, name, getItemProp]
    );
    props = {
      ...props,
      id,
      ref: useMergeRefs(ref, props.ref)
    };
    props = useCollectionItem({ store, ...props, getItem });
    return props;
  }
);
var FormDescription = memo(
  forwardRef(function FormDescription2(props) {
    const htmlProps = useFormDescription(props);
    return createElement(TagName, htmlProps);
  })
);
export {
  FormDescription,
  useFormDescription
};