@public-ui/react-hook-form-adapter/dist/index.mjs

React Hook Form adapter for KoliBri - The accessible HTML-Standard.

import { KolInputText, KolInputPassword, KolInputEmail, KolInputNumber, KolInputRange, KolInputDate, KolInputColor, KolInputFile, KolTextarea, KolCombobox, KolSelect, KolSingleSelect, KolInputRadio, KolInputCheckbox } from '@public-ui/react-v19';
import React from 'react';
import { Controller } from 'react-hook-form';

function withController(Component, valueProp) {
  const ControllerWrapper = React.forwardRef((props, ref) => {
    const { name, control, rules, defaultValue, shouldUnregister, disabled, ...componentProps } = props;
    return /* @__PURE__ */ React.createElement(
      Controller,
      {
        name,
        control,
        rules,
        defaultValue,
        shouldUnregister,
        disabled,
        render: ({ field, fieldState }) => {
          const userHandlers = componentProps._on;
          const mergedProps = {
            ...componentProps,
            ref: (element) => {
              if (ref) {
                if (typeof ref === "function") ref(element);
                else ref.current = element;
              }
              if (element) field.ref(element);
            },
            _name: name,
            _touched: fieldState.isTouched,
            _disabled: componentProps._disabled || disabled || field.disabled,
            _msg: fieldState.error ? {
              _type: "error",
              _description: fieldState.error.message || String(fieldState.error)
            } : void 0,
            _on: {
              ...userHandlers || {},
              onInput: (event, value) => {
                field.onChange(value);
                userHandlers?.onInput?.(event, value);
              },
              onChange: (event, value) => {
                field.onChange(value);
                userHandlers?.onChange?.(event, value);
              },
              onBlur: (event) => {
                field.onBlur();
                userHandlers?.onBlur?.(event);
              }
            }
          };
          if (valueProp) {
            mergedProps[valueProp] = field.value;
          }
          return /* @__PURE__ */ React.createElement(Component, { ...mergedProps });
        }
      }
    );
  });
  ControllerWrapper.displayName = `withController(${Component.displayName || Component.name || "Component"})`;
  return ControllerWrapper;
}
const KolInputTextController = withController(KolInputText, "_value");
const KolInputPasswordController = withController(KolInputPassword, "_value");
const KolInputEmailController = withController(KolInputEmail, "_value");
const KolInputNumberController = withController(KolInputNumber, "_value");
const KolInputRangeController = withController(KolInputRange, "_value");
const KolInputDateController = withController(KolInputDate, "_value");
const KolInputColorController = withController(KolInputColor, "_value");
const KolInputFileController = withController(KolInputFile);
const KolTextareaController = withController(KolTextarea, "_value");
const KolComboboxController = withController(KolCombobox, "_value");
const KolSelectController = withController(KolSelect, "_value");
const KolSingleSelectController = withController(KolSingleSelect, "_value");
const KolInputRadioController = withController(KolInputRadio, "_value");
const KolInputCheckboxController = withController(KolInputCheckbox, "_checked");

export { KolComboboxController, KolInputCheckboxController, KolInputColorController, KolInputDateController, KolInputEmailController, KolInputFileController, KolInputNumberController, KolInputPasswordController, KolInputRadioController, KolInputRangeController, KolInputTextController, KolSelectController, KolSingleSelectController, KolTextareaController, withController };