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

A Next/React ui-component libray.

'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 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;