@smitch/fluid/lib/select/Select.js

A lightweight, Tailwind-powered React/Next.js UI component library.

"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect, useMemo } from "react";
import { twMerge } from "tailwind-merge";
var sizes = {
    sm: "text-sm",
    md: "text-base",
    lg: "text-lg",
    xl: "text-xl",
};
var Select = function (_a) {
    var _b = _a.className, className = _b === void 0 ? "" : _b, rows = _a.rows, _c = _a.dropdownSize, dropdownSize = _c === void 0 ? "md" : _c, onChange = _a.onChange, placeholder = _a.placeholder, _d = _a.name, name = _d === void 0 ? "select" : _d, disabled = _a.disabled, options = _a.options, children = _a.children, _e = _a.defaultValue, defaultValue = _e === void 0 ? "" : _e, _f = _a.rounded, rounded = _f === void 0 ? "none" : _f, nocaret = _a.nocaret, style = _a.style;
    var _g = useState(), value = _g[0], setValue = _g[1];
    useEffect(function () {
        setValue(defaultValue);
    }, [defaultValue]);
    var handleChange = function (event) {
        var value = event.target.value;
        setValue(value);
        if (onChange)
            onChange(event);
    };
    var sizeClasses = useMemo(function () { return sizes[dropdownSize]; }, [dropdownSize]);
    var renderOptions = function () {
        return (Array.isArray(options) ? options : []).map(function (option) {
            var optionValue = typeof option === "string" || typeof option === "number" ? option : option.value;
            var optionLabel = typeof option === "string" || typeof option === "number" ? option : option.label;
            return (_jsx("option", { value: optionValue, children: optionLabel }, optionValue));
        });
    };
    return (_jsxs("select", { name: name, onChange: handleChange, value: value, size: rows, disabled: disabled, className: twMerge("form-select select-dropdown cursor-pointer border-2 border-slate-300 dark:border-slate-500 dark:bg-dark dark:text-light color-scheme:light font-normal dark:[color-scheme:dark] ".concat(sizeClasses, " rounded-").concat(rounded, "  ").concat(nocaret ? "bg-none pr-3" : "bg-right"), className), style: style, "aria-label": "select", children: ["children ? ", children, " :", placeholder && (_jsx("option", { value: "", disabled: true, children: placeholder })), renderOptions()] }));
};
export default Select;
//# sourceMappingURL=Select.js.map