@vtaits/react-hook-form-schema/dist/chunk-6AOK34FW.js

Integration of react-hook-form and @vtaits/form-schema

import {
  wrapOnChange
} from "./chunk-7ZPD7GZF.js";
import {
  renderError
} from "./chunk-XUSORK34.js";

// src/fields/asyncSelect/asyncMultiSelect.tsx
import {
  asyncMultiSelect as asyncMultiSelectBase,
  DEFAULT_LABEL_KEY,
  DEFAULT_VALUE_KEY
} from "@vtaits/form-schema/fields/asyncSelect";
import { useUI } from "@vtaits/react-form-schema-base-ui";
import { useMemo } from "react";
import {
  Controller,
  get
} from "react-hook-form";

// src/fields/asyncSelect/useCachingLoadOptions.ts
import { useCallback, useRef } from "react";
function useCachingLoadOptions(loadOptions, getOptionValue) {
  const optionsCacheRef = useRef({});
  const loadOptionsProxy = useCallback(
    async (...args) => {
      const result = await loadOptions(...args);
      const { options } = result;
      for (const option of options) {
        optionsCacheRef.current[getOptionValue(option)] = option;
      }
      return result;
    },
    [loadOptions, getOptionValue]
  );
  return [optionsCacheRef, loadOptionsProxy];
}

// src/fields/asyncSelect/asyncMultiSelect.tsx
import { jsx } from "react/jsx-runtime";
function AsyncMultiSelectComponent({
  renderParams: {
    fieldPath,
    fieldSchema: {
      disabled,
      hint,
      autoFocus,
      label,
      getOptionLabel: getOptionLabelParam,
      getOptionValue: getOptionValueParam,
      onChange = void 0,
      additional,
      initialAdditional,
      loadOptions,
      labelKey = DEFAULT_LABEL_KEY,
      placeholder,
      renderOption,
      valueKey = DEFAULT_VALUE_KEY,
      required
    }
  },
  formResult,
  formResult: {
    control,
    formState: { errors }
  }
}) {
  const { renderAsyncMultiSelect, renderWrapper } = useUI();
  const error = renderError(get(errors, fieldPath));
  const wrapperParams = {
    error,
    hint,
    label,
    name: fieldPath,
    required
  };
  const getOptionLabel = useMemo(() => {
    if (getOptionLabelParam) {
      return getOptionLabelParam;
    }
    return (option) => option[labelKey];
  }, [getOptionLabelParam, labelKey]);
  const getOptionValue = useMemo(() => {
    if (getOptionValueParam) {
      return getOptionValueParam;
    }
    return (option) => option[valueKey];
  }, [getOptionValueParam, valueKey]);
  const [optionsCacheRef, loadOptionsProxy] = useCachingLoadOptions(
    loadOptions,
    getOptionValue
  );
  return renderWrapper({
    ...wrapperParams,
    children: /* @__PURE__ */ jsx(
      Controller,
      {
        control,
        name: fieldPath,
        render: ({ field }) => {
          const wrappedOnChange = wrapOnChange(
            field.onChange,
            onChange,
            formResult,
            field.value
          );
          return renderAsyncMultiSelect({
            disabled,
            value: field.value,
            name: fieldPath,
            getOptionLabel,
            getOptionValue,
            handleClear: () => {
              wrappedOnChange([]);
            },
            autoFocus,
            onChange: wrappedOnChange,
            additional,
            initialAdditional,
            optionsCacheRef,
            loadOptions: loadOptionsProxy,
            placeholder,
            renderOption,
            wrapper: wrapperParams
          });
        }
      }
    )
  });
}
var asyncMultiSelect = {
  ...asyncMultiSelectBase,
  render: (renderParams, formResult) => /* @__PURE__ */ jsx(
    AsyncMultiSelectComponent,
    {
      renderParams,
      formResult
    }
  )
};

// src/fields/asyncSelect/asyncSelect.tsx
import {
  asyncSelect as asyncSelectBase,
  DEFAULT_LABEL_KEY as DEFAULT_LABEL_KEY2,
  DEFAULT_VALUE_KEY as DEFAULT_VALUE_KEY2
} from "@vtaits/form-schema/fields/asyncSelect";
import { useUI as useUI2 } from "@vtaits/react-form-schema-base-ui";
import { useMemo as useMemo2 } from "react";
import {
  Controller as Controller2,
  get as get2
} from "react-hook-form";
import { jsx as jsx2 } from "react/jsx-runtime";
function SelectComponent({
  renderParams: {
    fieldPath,
    fieldSchema: {
      disabled,
      label,
      hint,
      autoFocus,
      required,
      getOptionLabel: getOptionLabelParam,
      getOptionValue: getOptionValueParam,
      onChange = void 0,
      additional,
      initialAdditional,
      loadOptions,
      labelKey = DEFAULT_LABEL_KEY2,
      placeholder,
      renderOption,
      valueKey = DEFAULT_VALUE_KEY2
    }
  },
  formResult,
  formResult: {
    control,
    formState: { errors }
  }
}) {
  const { renderAsyncSelect, renderWrapper } = useUI2();
  const error = renderError(get2(errors, fieldPath));
  const wrapperParams = {
    error,
    hint,
    label,
    name: fieldPath,
    required
  };
  const getOptionLabel = useMemo2(() => {
    if (getOptionLabelParam) {
      return getOptionLabelParam;
    }
    return (option) => option[labelKey];
  }, [getOptionLabelParam, labelKey]);
  const getOptionValue = useMemo2(() => {
    if (getOptionValueParam) {
      return getOptionValueParam;
    }
    return (option) => option[valueKey];
  }, [getOptionValueParam, valueKey]);
  const [optionsCacheRef, loadOptionsProxy] = useCachingLoadOptions(
    loadOptions,
    getOptionValue
  );
  return renderWrapper({
    ...wrapperParams,
    children: /* @__PURE__ */ jsx2(
      Controller2,
      {
        control,
        name: fieldPath,
        render: ({ field }) => {
          const wrappedOnChange = wrapOnChange(
            field.onChange,
            onChange,
            formResult,
            field.value
          );
          return renderAsyncSelect({
            clearable: !required,
            disabled,
            value: field.value,
            name: fieldPath,
            getOptionLabel,
            getOptionValue,
            handleClear: () => {
              wrappedOnChange(null);
            },
            autoFocus,
            onChange: wrappedOnChange,
            additional,
            initialAdditional,
            optionsCacheRef,
            loadOptions: loadOptionsProxy,
            placeholder,
            renderOption,
            wrapper: wrapperParams
          });
        }
      }
    )
  });
}
var asyncSelect = {
  ...asyncSelectBase,
  render: (renderParams, formResult) => /* @__PURE__ */ jsx2(SelectComponent, { renderParams, formResult })
};

export {
  asyncMultiSelect,
  asyncSelect
};
//# sourceMappingURL=chunk-6AOK34FW.js.map