@ducor/form/dist/tree-select.js

form package

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Controller, useFormContext } from "react-hook-form";
import { twMerge } from "tailwind-merge";
import Label from "./components/label";
import { uuidv4 } from "./utils";
import Errors from "./components/errors";
import HelperText from "./components/helperText";
export const TreeSelect = (_a) => {
    var { label, withAsterisk, direction = "vertical", name, helperText, id, treeData } = _a, rest = __rest(_a, ["label", "withAsterisk", "direction", "name", "helperText", "id", "treeData"]);
    const { control, formState: { errors }, } = useFormContext();
    const controlId = id || uuidv4();
    return (_jsxs("div", { className: twMerge("flex w-full", rest.className, direction === "horizontal"
            ? "flex-row items-center gap-4"
            : "flex-col gap-2"), children: [label && (_jsx(Label, { id: controlId, label: label, withAsterisk: withAsterisk })), _jsxs("div", { className: 'relative', children: [_jsx(Controller, { name: name, control: control, defaultValue: '', rules: {
                            required: withAsterisk ? "This field is required" : false,
                        }, render: ({ field }) => (_jsxs("select", Object.assign({}, field, { id: controlId, className: twMerge("w-full p-2 border border-gray-300 rounded-lg  outline-none text-gray-700 dark:text-gray-200"), children: [_jsx("option", { value: '', disabled: true, children: "Select an option" }), treeData.map((group) => {
                                    var _a;
                                    return (_jsx("optgroup", { label: group.label, children: (_a = group.children) === null || _a === void 0 ? void 0 : _a.map((item) => (_jsx("option", { value: item.value, children: item.label }, item.value))) }, group.label));
                                })] }))) }), helperText && _jsx(HelperText, { helperText: helperText })] }), errors[name] && _jsx(Errors, { value: errors[name] })] }));
};