@ariakit/react-core/cjs/form/form-error.cjs

Ariakit React core

"use strict";Object.defineProperty(exports, "__esModule", {value: true});

var _5CBRED7Acjs = require('../__chunks/5CBRED7A.cjs');


var _QM74NV6Dcjs = require('../__chunks/QM74NV6D.cjs');


var _RDNUVX4Vcjs = require('../__chunks/RDNUVX4V.cjs');
require('../__chunks/ZYZTL3IQ.cjs');





var _SQLDFLTEcjs = require('../__chunks/SQLDFLTE.cjs');



var _4KGS3DOWcjs = require('../__chunks/4KGS3DOW.cjs');
require('../__chunks/TWX5YNTH.cjs');

// src/form/form-error.tsx
var _misc = require('@ariakit/core/utils/misc');
var _react = require('react');
var TagName = "div";
var useFormError = _SQLDFLTEcjs.createHook.call(void 0, 
  function useFormError2({
    store,
    name: nameProp,
    getItem: getItemProp,
    ...props
  }) {
    const context = _5CBRED7Acjs.useFormContext.call(void 0, );
    store = store || context;
    _misc.invariant.call(void 0, 
      store,
      process.env.NODE_ENV !== "production" && "FormError must be wrapped in a Form component."
    );
    const id = _4KGS3DOWcjs.useId.call(void 0, props.id);
    const ref = _react.useRef.call(void 0, null);
    const name = String(nameProp);
    const getItem = _react.useCallback.call(void 0, 
      (item) => {
        const nextItem = { ...item, id: id || item.id, name, type: "error" };
        if (getItemProp) {
          return getItemProp(nextItem);
        }
        return nextItem;
      },
      [id, name, getItemProp]
    );
    const children = _RDNUVX4Vcjs.useStoreState.call(void 0, store, () => {
      const error = store == null ? void 0 : store.getError(name);
      if (error == null) return;
      if (!(store == null ? void 0 : store.getFieldTouched(name))) return;
      return error;
    });
    props = {
      role: "alert",
      children,
      ...props,
      id,
      ref: _4KGS3DOWcjs.useMergeRefs.call(void 0, ref, props.ref)
    };
    props = _QM74NV6Dcjs.useCollectionItem.call(void 0, { store, ...props, getItem });
    return props;
  }
);
var FormError = _SQLDFLTEcjs.memo.call(void 0, 
  _SQLDFLTEcjs.forwardRef.call(void 0, function FormError2(props) {
    const htmlProps = useFormError(props);
    return _SQLDFLTEcjs.createElement.call(void 0, TagName, htmlProps);
  })
);



exports.FormError = FormError; exports.useFormError = useFormError;