seti-ramesesv1/dist/components/ui/Select/Select.js

Reusable components and context for Next.js apps

import { jsxs, jsx } from 'react/jsx-runtime';
import { useState, useRef, useEffect } from 'react';
import styles from './Select.module.css.js';

const Select = ({ options, placeholder = "Select", onChange, fullWidth = false }) => {
    const [open, setOpen] = useState(false);
    const [selected, setSelected] = useState(null);
    const containerRef = useRef(null);
    const toggleDropdown = () => setOpen((prev) => !prev);
    const handleSelect = (value) => {
        setSelected(value);
        onChange(value);
        setOpen(false);
    };
    // Close dropdown when clicking outside
    useEffect(() => {
        const handleClickOutside = (e) => {
            if (containerRef.current && !containerRef.current.contains(e.target)) {
                setOpen(false);
            }
        };
        document.addEventListener("mousedown", handleClickOutside);
        return () => document.removeEventListener("mousedown", handleClickOutside);
    }, []);
    const selectedLabel = selected ? options.find((opt) => opt.value === selected)?.label : placeholder;
    return (jsxs("div", { ref: containerRef, className: `${styles.container} ${fullWidth ? "w-full" : "w-64"}`, children: [jsxs("div", { className: styles.selectBox, onClick: toggleDropdown, children: [jsx("span", { className: selected ? styles.selected : styles.placeholder, title: selectedLabel, children: selectedLabel }), jsx("svg", { className: `${styles.icon} ${open ? styles.open : ""}`, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", children: jsx("path", { fillRule: "evenodd", d: "M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z", clipRule: "evenodd" }) })] }), open && (jsx("div", { className: styles.dropdown, children: options.map((option) => (jsx("div", { className: styles.option, title: option.label, onClick: () => handleSelect(option.value), children: option.label }, option.value))) }))] }));
};

export { Select as default };
//# sourceMappingURL=Select.js.map