@vertesia/ui 0.55.0 → 0.57.0

package/src/core/components/MessageBox.tsx

@@ -0,0 +1,96 @@
+import { CircleX, CircleCheck, AlertTriangle, Info } from 'lucide-react';
+import React from 'react';
+
+interface MessageBoxProps {
+    status: 'error' | 'info' | 'warning' | 'success' | 'default' | 'done'
+    icon?: React.ReactNode
+    title?: string
+    children: React.ReactNode | React.ReactNode[]
+    className?: string
+}
+export function MessageBox({ icon, status, title, children, className }: MessageBoxProps) {
+
+    let defaultIcon, titleColor, textColor, bgColor;
+    switch (status) {
+        case 'error': {
+            defaultIcon = <CircleX className="size-5 text-destructive" aria-hidden="true" />
+            titleColor = "";
+            textColor = "text-foreground";
+            bgColor = "bg-destructive border border-destructive";
+            break;
+        }
+        case 'warning': {
+            defaultIcon = <AlertTriangle className="size-5 text-attention" aria-hidden="true" />
+            titleColor = "";
+            textColor = "text-foreground";
+            bgColor = "bg-attention border border-attention";
+            break;
+        }
+        case 'success': {
+            defaultIcon = <CircleCheck className="size-5 text-success" aria-hidden="true" />
+            titleColor = "";
+            textColor = "text-foreground";
+            bgColor = "bg-success border border-success";
+            break;
+        }
+        case 'info': {
+            defaultIcon = <Info className="size-5 text-info" aria-hidden="true" />
+            titleColor = "";
+            textColor = "text-foreground";
+            bgColor = "bg-info border border-info";
+            break;
+        }
+        case 'default': {
+            defaultIcon = <Info className="size-5 text-muted" aria-hidden="true" />
+            titleColor = "";
+            textColor = "text-foreground";
+            bgColor = "bg-muted border border-muted";
+            break;
+        }
+        case 'done': {
+            defaultIcon = <Info className="size-5 text-done" aria-hidden="true" />
+            titleColor = "";
+            textColor = "text-foreground";
+            bgColor = "bg-done border border-done";
+            break;
+        }
+    }
+
+    return (
+        <div className={`rounded-md p-4 ${bgColor} ${className}`}>
+            <div className="flex">
+                <div className="shrink-0">
+                    {icon ?? defaultIcon}
+                </div>
+                <div className="w-full ml-2 px-1">
+                    {title && <h3 className={`text-sm font-medium mb-2 ${titleColor}`}>{title}</h3>}
+                    <div className={`text-sm ${textColor} break-words`}>
+                        {children}
+                    </div>
+                </div>
+            </div>
+        </div >
+    )
+}
+
+export function ErrorBox({ title, className, children }: { title: string, className?:string, children: React.ReactNode }) {
+    return <MessageBox status="error" title={title} className={className}><pre>{children}</pre></MessageBox>
+}
+
+export function InfoBox({ title, className, children }: { title: string, className?:string, children: React.ReactNode }) {
+    return <MessageBox status="info" title={title} className={className}>{children}</MessageBox>
+}
+
+export function WarningBox({ title, className, children }: { title: string, className?:string, children: React.ReactNode }) {
+    return <MessageBox status="warning" title={title} className={className}>{children}</MessageBox>
+}
+
+export function SuccessBox({ title, className, children }: { title: string, className?:string, children: React.ReactNode }) {
+    return <MessageBox status="success" title={title} className={className}>{children}</MessageBox>
+}
+
+export function DefaultBox({ title, className, children }: { title: string, className?:string, children: React.ReactNode }) {
+    return <MessageBox status="default" title={title} className={className}>{children}</MessageBox>
+}
+
+

package/src/core/components/Modal.tsx

@@ -0,0 +1,144 @@
+import clsx from "clsx";
+import { Fragment } from "react";
+
+import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from "@headlessui/react";
+import { X } from "lucide-react";
+
+interface ModalProps {
+    children: React.ReactNode | React.ReactNode[];
+    isOpen: boolean;
+    onClose: () => void;
+    noCloseButton?: boolean;
+    className?: string;
+    allowOverflow?: boolean;
+    disableCloseOnClickOutside?: boolean;
+}
+export function Modal({
+    className,
+    children,
+    isOpen,
+    onClose,
+    noCloseButton = false,
+    allowOverflow = false,
+    disableCloseOnClickOutside = false,
+}: ModalProps) {
+    const setOpen = (open: boolean) => {
+        if (!open) {
+            onClose();
+        }
+    };
+
+    return (
+        <Transition show={isOpen} as={Fragment}>
+            <Dialog
+                style={{ zIndex: 50 }}
+                as="div"
+                className="relative"
+                onClose={disableCloseOnClickOutside ? () => { } : setOpen}
+            >
+                <TransitionChild
+                    as={Fragment}
+                    enter="ease-out duration-300"
+                    enterFrom="opacity-0"
+                    enterTo="opacity-100"
+                    leave="ease-in duration-200"
+                    leaveFrom="opacity-100"
+                    leaveTo="opacity-0"
+                    unmount
+                >
+                    <div className="fixed inset-0 bg-gray-500  dark:bg-slate-800 dark:opacity-75 opacity-75 transition-opacity" />
+                </TransitionChild>
+
+                <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
+                    <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+                        <TransitionChild
+                            as={Fragment}
+                            enter="ease-out duration-300"
+                            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                            enterTo="opacity-100 translate-y-0 sm:scale-100"
+                            leave="ease-in duration-200"
+                            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+                            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                        >
+                            <DialogPanel
+                                className={clsx(
+                                    "p-0! relative transform rounded-lg bg-white dark:bg-slate-900 text-left dark:text-slate-100 shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-md sm:p-6",
+                                    allowOverflow ? "overflow-visible" : "overflow-hidden",
+                                    className,
+                                )}
+                            >
+                                {!noCloseButton && <ModalCloseButton onClose={onClose} />}
+                                {children}
+                            </DialogPanel>
+                        </TransitionChild>
+                    </div>
+                </div>
+            </Dialog>
+        </Transition>
+    );
+}
+
+interface ModalCloseButtonProps {
+    onClose: () => void;
+}
+function ModalCloseButton({ onClose }: ModalCloseButtonProps) {
+    return (
+        <div className="absolute right-0 top-0 hidden pr-4 pt-4 sm:block">
+            <button
+                tabIndex={-1}
+                type="button"
+                className="rounded-md bg-white text-gray-400 dark:text-slate-200 dark:bg-slate-800 hover:brightness-95 focus:outline-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 hover:cursor-pointer"
+                onClick={onClose}
+            >
+                <span className="sr-only">Close</span>
+                <X className="size-6" aria-hidden="true" />
+            </button>
+        </div>
+    );
+}
+
+interface ModalTitleProps {
+    children: React.ReactNode | React.ReactNode[];
+    showDivider?: boolean;
+}
+export function ModalTitle({ children, showDivider = false }: ModalTitleProps) {
+    return (
+        <div className={showDivider ? "border-b-solid border-b border-b-1" : ""}>
+            <DialogTitle
+                as="h3"
+                className="py-4 pl-4 pr-8 text-base font-semibold leading-6 text-gray-900 dark:text-slate-50"
+            >
+                {children}
+            </DialogTitle>
+        </div>
+    );
+}
+
+interface ModalFooterProps {
+    showDivider?: boolean;
+    fill?: boolean;
+    justify?: "start" | "end" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch";
+    className?: string;
+    children: React.ReactNode | React.ReactNode[];
+}
+export function ModalFooter({ children, className = "justify-end", fill = false }: ModalFooterProps) {
+    return (
+        <div
+            className={clsx(
+                "w-full flex space-x-2 p-4 border-t-solid border-t-gray-100 dark:border-t-gray-800 border-t",
+                className || "justify-end",
+                fill ? "bg-gray-100 dark:bg-slate-800" : "",
+            )}
+        >
+            {children}
+        </div>
+    );
+}
+
+interface ModalBodyProps {
+    children: React.ReactNode | React.ReactNode[];
+    className?: string;
+}
+export function ModalBody({ children, className = "" }: ModalBodyProps) {
+    return <div className={clsx("p-4", className)}>{children}</div>;
+}

package/src/core/components/NumberInput.tsx

@@ -0,0 +1,64 @@
+import clsx from "clsx";
+import React, { ChangeEvent, useEffect } from "react";
+import { Styles } from "./styles.js";
+
+function numberToString(value: number | undefined) {
+    if (value == null || isNaN(value)) {
+        return '';
+    } else {
+        return value.toString();
+    }
+}
+
+interface NumberInputProps extends Omit<React.HTMLProps<HTMLInputElement>, 'ref' | 'onChange' | 'value'> {
+    value?: number;
+    onChange?: (value: undefined | number, text: string) => void
+    noScroll?: boolean;
+    noSpinners?: boolean
+}
+
+/**
+ * The value of this input is always a number. It can be undefined or NaN. If NaN the input value will not be updated with the NaN one.
+ * If undefined the input will be updated to be empty.
+ * The onChange callback is called whenever the value changes. If the input cannot be parsed as a number
+ * it will be returned as NaN.
+ */
+const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(({ value, onChange, className, noScroll = false, noSpinners = false, ...others }: NumberInputProps, ref) => {
+    // we need to store the state here in string
+    const [textValue, setTextValue] = React.useState<string>(numberToString(value))
+    const _onChange = (ev: ChangeEvent<HTMLInputElement>) => {
+        const value = ev.target.value;
+        setTextValue(value)
+        if (value === '') {
+            onChange && onChange(undefined, value)
+        } else {
+            const num = parseFloat(value);
+            onChange && onChange(num, value)
+        }
+    }
+
+    useEffect(() => {
+        // we do not update if not empty and NaN
+        if (value == null || !isNaN(value)) {
+            const text = numberToString(value);
+            setTextValue(text);
+        }
+    }, [value])
+
+    return (
+        <input
+            onWheel={noScroll ? event => { (event.target as any).blur(); } : others.onWheel} /* avoid input change on wheel scroll */
+            type='number'
+            value={textValue}
+            onChange={_onChange}
+            className={clsx(className, Styles.INPUT, { "no-spinners": noSpinners },
+                noSpinners && "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+            )}
+            ref={ref}
+            {...others}
+        />
+
+    )
+})
+
+export { NumberInput };

package/src/core/components/Portal.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+const PORTAL_ID = '--tailwind-portal';
+
+interface PortalProps {
+    children: React.ReactNode | React.ReactNode[];
+}
+export function Portal({ children }: PortalProps) {
+    const tempNode = useRef<HTMLSpanElement>(null);
+    const [portalEl, setPortalEl] = useState<HTMLDivElement | null>(null);
+
+    // hack to have the Portal not generating hydration errors (content mismatch) on SSR / CSR
+    useEffect(() => {
+        if (tempNode.current) { // we are on the browser -> we an use the portal
+            const doc = tempNode.current.ownerDocument;
+            let portalEl = doc.getElementById(PORTAL_ID) as HTMLDivElement;
+            if (!portalEl) {
+                portalEl = doc.createElement('DIV') as HTMLDivElement;
+                portalEl.id = PORTAL_ID;
+                doc.body.appendChild(portalEl);
+            }
+            setPortalEl(portalEl);
+        }
+    }, [tempNode.current]);
+
+    if (portalEl) {
+        return createPortal(children, portalEl);
+    } else {
+        return <span ref={tempNode} />
+    }
+
+}

package/src/core/components/RadioGroup.tsx

@@ -0,0 +1,100 @@
+import clsx from "clsx";
+import { ReactNode, useState } from "react";
+
+export abstract class RadioOptionAdapter<T> {
+    abstract labelOf(item: T): string;
+    abstract idOf(item: T): string;
+    renderOption(item: T): ReactNode {
+        return this.labelOf(item);
+    }
+    findById(items: T[], id: string) {
+        return items.find(item => this.idOf(item) === id);
+    }
+}
+
+interface RadioGroupProps<OptionT> {
+    checkIcon?: React.ComponentType<CheckIconProps>;
+    options: OptionT[];
+    cols?: `grid-cols-${number}`;
+    gap?: `gap-${number}`;
+    value?: OptionT;
+    onChange: (value: OptionT) => void;
+    adapter: RadioOptionAdapter<OptionT>;
+    checkColor?: string;
+}
+export function RadioGroup<OptionT>({ checkColor, cols = "grid-cols-1", gap = "gap-2", value, onChange, options, checkIcon: CheckIcon = DefaultCheckIcon, adapter }: RadioGroupProps<OptionT>) {
+    const [selected, setSelected] = useState(value);
+    const onSelect = (option: OptionT) => {
+        setSelected(option);
+        onChange(option);
+    }
+    const selectedId = selected ? adapter.idOf(selected) : undefined;
+    return (
+        <div className={clsx("grid", cols, gap)}>
+            {
+                options.map(option => {
+                    const key = adapter.idOf(option);
+                    return (
+                        <RadioOption
+                            checkColor={checkColor}
+                            isSelected={key === selectedId}
+                            option={option} adapter={adapter}
+                            onSelect={onSelect}
+                            CheckIcon={CheckIcon} key={key}
+                        />
+                    );
+                })
+            }
+        </div>
+    )
+}
+
+interface RadioOptionProps<OptionT> {
+    CheckIcon: React.ComponentType<CheckIconProps>;
+    isSelected: boolean;
+    option: OptionT;
+    adapter: RadioOptionAdapter<OptionT>;
+    onSelect: (option: OptionT) => void;
+    checkColor?: string;
+}
+function RadioOption<OptionT>({ checkColor, CheckIcon, adapter, isSelected, option, onSelect }: RadioOptionProps<OptionT>) {
+    const [isHighlighted, setIsHighlighted] = useState(false);
+    return (
+        <div className="flex gap-1 cursor-pointer items-center" onClick={() => onSelect(option)}
+            onMouseEnter={() => setIsHighlighted(true)} onMouseLeave={() => setIsHighlighted(false)} >
+            <div className="">
+                <CheckIcon size={24} isChecked={isSelected} isHighlighted={isHighlighted} color={checkColor} />
+            </div>
+            <div>{adapter.renderOption(option)}</div>
+        </div>
+    )
+}
+
+export interface CheckIconProps {
+    size: number;
+    isChecked: boolean;
+    isHighlighted?: boolean;
+    color?: string;
+}
+function DefaultCheckIcon({ size, isChecked, isHighlighted, color = "currentColor" }: CheckIconProps) {
+    //https://www.svgrepo.com/svg/309414/checkbox-checked
+    //https://www.svgrepo.com/svg/309415/checkbox-unchecked
+    const opacity = isHighlighted ? 1 : 0.6;
+    return isChecked ? (
+        <svg width={`${size}px`} height={`${size}px`} viewBox="0 0 24 24" version="1.1">
+            <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+                <g id="ic_fluent_checkbox_checked_24_regular" fill={color} fillRule="nonzero" opacity={opacity}>
+                    <path d="M18.25,3 C19.7687831,3 21,4.23121694 21,5.75 L21,18.25 C21,19.7687831 19.7687831,21 18.25,21 L5.75,21 C4.23121694,21 3,19.7687831 3,18.25 L3,5.75 C3,4.23121694 4.23121694,3 5.75,3 L18.25,3 Z M18.25,4.5 L5.75,4.5 C5.05964406,4.5 4.5,5.05964406 4.5,5.75 L4.5,18.25 C4.5,18.9403559 5.05964406,19.5 5.75,19.5 L18.25,19.5 C18.9403559,19.5 19.5,18.9403559 19.5,18.25 L19.5,5.75 C19.5,5.05964406 18.9403559,4.5 18.25,4.5 Z M10,14.4393398 L16.4696699,7.96966991 C16.7625631,7.6767767 17.2374369,7.6767767 17.5303301,7.96966991 C17.7965966,8.23593648 17.8208027,8.65260016 17.6029482,8.94621165 L17.5303301,9.03033009 L10.5303301,16.0303301 C10.2640635,16.2965966 9.84739984,16.3208027 9.55378835,16.1029482 L9.46966991,16.0303301 L6.46966991,13.0303301 C6.1767767,12.7374369 6.1767767,12.2625631 6.46966991,11.9696699 C6.73593648,11.7034034 7.15260016,11.6791973 7.44621165,11.8970518 L7.53033009,11.9696699 L10,14.4393398 L16.4696699,7.96966991 L10,14.4393398 Z" />
+                </g>
+            </g>
+        </svg>
+    ) : (
+        <svg width={`${size}px`} height={`${size}px`} viewBox="0 0 24 24" version="1.1">
+            <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+                <g id="ic_fluent_checkbox_unchecked_24_regular" fill={color} fillRule="nonzero" opacity={opacity}>
+                    <path d="M5.75,3 L18.25,3 C19.7687831,3 21,4.23121694 21,5.75 L21,18.25 C21,19.7687831 19.7687831,21 18.25,21 L5.75,21 C4.23121694,21 3,19.7687831 3,18.25 L3,5.75 C3,4.23121694 4.23121694,3 5.75,3 Z M5.75,4.5 C5.05964406,4.5 4.5,5.05964406 4.5,5.75 L4.5,18.25 C4.5,18.9403559 5.05964406,19.5 5.75,19.5 L18.25,19.5 C18.9403559,19.5 19.5,18.9403559 19.5,18.25 L19.5,5.75 C19.5,5.05964406 18.9403559,4.5 18.25,4.5 L5.75,4.5 Z" />
+                </g>
+            </g>
+        </svg>
+    )
+}

package/src/core/components/SelectBox.tsx

@@ -0,0 +1,189 @@
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from "@headlessui/react";
+import { X } from "lucide-react";
+import { Check, ChevronsUpDownIcon } from "lucide-react";
+import clsx from "clsx";
+import { ComponentType, KeyboardEvent, ReactNode, SyntheticEvent, useState, useEffect, useRef } from "react";
+import { Button } from "./Button";
+import { Center } from "./Center";
+
+type OnChangeClearableSelectFn<T> = (option: T | undefined) => void;
+type OnChangeNonClearableSelectFn<T> = (option: T) => void;
+
+interface SelectBoxBaseProps<T> {
+    options: T[] | undefined
+    optionLabel?: (option: T) => ReactNode
+    value?: T
+    onChange: OnChangeNonClearableSelectFn<T>
+    className?: string
+    // compare for equality by field or comparison function
+    by?: (keyof T & string) | ((a: T, z: T) => boolean)
+    placeholder?: ReactNode
+    addNew?: () => void
+    addNewLabel?: string
+    disabled?: boolean
+    isClearable?: false
+    showFilter?: boolean | string
+    filterBy?: string | ((o: T) => string)
+    ClearIcon?: ComponentType<any>
+    clearTitle?: string | undefined
+    label?: string | undefined
+}
+interface ClearableSelectBoxProps<T> extends Omit<SelectBoxBaseProps<T>, 'isClearable' | 'onChange'> {
+    onChange: OnChangeClearableSelectFn<T>
+    isClearable: true
+}
+// interface NonClearableSelectBoxProps<T> extends Omit<SelectBoxBaseProps<T>, 'onChange'> {
+//     onChange: OnChangeNonClearableSelectFn<T>
+// }
+
+type SelectBoxProps<T> = ClearableSelectBoxProps<T> | SelectBoxBaseProps<T>
+
+function getFilterByFn<T>(filterBy?: string | ((o: T) => string)) {
+    if (!filterBy) {
+        return (o: T) => String(o).toLowerCase();
+    } else if (typeof filterBy === 'string') {
+        return (o: any) => String(o[filterBy]).toLowerCase();
+    } else {
+        return filterBy;
+    }
+}
+
+export function SelectBox<T>({ clearTitle, ClearIcon = X, showFilter, filterBy, isClearable, disabled, by, options, value, onChange, className, addNew, addNewLabel, placeholder, optionLabel = (option) => String(option), label }: SelectBoxProps<T>) {
+    const [filter, setFilter] = useState<string>();
+    const buttonRef = useRef<HTMLButtonElement>(null);
+    const [buttonWidth, setButtonWidth] = useState<number>();
+
+    useEffect(() => {
+        if (buttonRef.current) {
+            const resizeObserver = new ResizeObserver((entries) => {
+                setButtonWidth(entries[0].contentRect.width);
+            });
+            resizeObserver.observe(buttonRef.current);
+            return () => resizeObserver.disconnect();
+        }
+    }, []);
+
+    const onClear = (e: SyntheticEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (isClearable) {
+            (onChange as any)(undefined);
+        }
+    }
+    const onFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setFilter(e.target.value);
+    }
+    let filteredOptions = options || [];
+    if (showFilter === undefined) {
+        showFilter = filteredOptions?.length >= 10;
+    }
+    if (showFilter && filter) {
+        const filterLc = filter.toLowerCase();
+        const filterFn = getFilterByFn(filterBy);
+        filteredOptions = filteredOptions.filter(o => filterFn(o).includes(filterLc))
+    }
+    const onFilterKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+        if (e.key !== "Escape"
+            && e.key !== "Enter"
+            && e.key !== "ArrowDown"
+            && e.key !== "ArrowUp") {
+            e.stopPropagation()
+        }
+    }
+    return (
+        <Listbox value={value || null} onChange={onChange} by={by} disabled={disabled}>
+            {() => (
+                <div className={'overflow-y-visible ' + className}>
+                    <div className="relative">
+                        <ListboxButton
+                            ref={buttonRef}
+                            className="relative w-full cursor-default rounded-md bg-white py-1.5 text-left text-gray-900 shadow-2xs ring-1 ring-inset ring-gray-300 focus:outline-hidden focus:ring-2 focus:ring-indigo-600 dark:ring-slate-600 dark:text-slate-50 dark:bg-slate-800 sm:text-sm sm:leading-6 hover:cursor-pointer"
+                        >
+                            {label && <div className='w-full text-gray-500 text-left px-2'>{label}</div>}
+                            <span className="block truncate pl-3 pr-14">{value ? optionLabel(value) : placeholder}</span>
+                            {
+                                isClearable && value != null && <span className="absolute inset-y-0 right-0 mr-5 flex items-center pr-2" onClick={onClear}>
+                                    <ClearIcon title={clearTitle} className="size-5 text-gray-400 hover:text-red-500 cursor-pointer" aria-hidden="true" />
+                                </span>
+                            }
+                            {
+                                !disabled &&
+                                <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                                    <ChevronsUpDownIcon className="size-5 text-gray-400" aria-hidden="true" />
+                                </span>
+                            }
+                        </ListboxButton>
+                        {/*
+                        <Transition
+                            show={open}
+                            as={Fragment}
+                            leave="transition ease-in duration-100"
+                            leaveFrom="opacity-100"
+                            leaveTo="opacity-0"
+                        >
+                            */}
+                        <ListboxOptions
+                            anchor="bottom"
+                            style={{ width: buttonWidth, zIndex: 100000000 }}
+                            className="absolute z-10 mt-1 overflow-auto rounded-md bg-white dark:ring-slate-600 dark:text-slate-50 dark:bg-slate-800 py-1 text-base shadow-lg ring-1 ring-gray-300 ring-opacity-5 focus:outline-hidden sm:text-sm"
+                        >
+                            {showFilter &&
+                                <div className="p-1">
+                                    <input type="text" value={filter || ''} onKeyDown={onFilterKeyDown} onChange={onFilterChange} className="w-full p-1 border border-gray-300 rounded-md dark:bg-slate-700 dark:text-slate-50" placeholder="Filter..." />
+                                </div>
+                            }
+                            <div className="overflow-y-auto max-h-60">
+                                {filteredOptions.map((option, i) =>
+                                    <ListOption key={i} option={option} optionLabel={optionLabel} className="hover:cursor-pointer"></ListOption>
+                                )}
+                            </div>
+                            {addNew &&
+                                <Center className="font-semibold py-2 border-t">
+                                    <Button variant='secondary' onClick={addNew}>{addNewLabel}</Button>
+                                </Center>
+                            }
+                        </ListboxOptions>
+
+                        {/*</Transition>*/}
+                    </div>
+                </div>
+            )
+            }
+        </Listbox >
+    )
+}
+
+
+export function ListOption<T>({ option, optionLabel, onClick, className }: { option: T, optionLabel: (option: T) => ReactNode, onClick?: () => void, value?: T, className?: string }) {
+    return (
+        <ListboxOption
+            className={({ active }) =>
+                clsx(
+                    active ? 'bg-indigo-600 text-white dark:bg-indigo-800 dark:text-white' : 'text-gray-900 dark:text-slate-50',
+                    'relative cursor-default select-none py-2 pl-3 pr-9',
+                    className
+                )
+            }
+            value={option}
+            onClick={onClick}
+        >
+            {({ selected, active }) => (
+                <>
+                    <div className={clsx(selected ? 'font-semibold' : 'font-inherit', 'block truncate')}>
+                        {optionLabel(option)}
+                    </div>
+
+                    {selected ? (
+                        <div
+                            className={clsx(
+                                active ? 'text-white' : 'text-indigo-600',
+                                'absolute inset-y-0 right-0 flex items-center pr-4'
+                            )}
+                        >
+                            <Check className="size-5" aria-hidden="true" />
+                        </div>
+                    ) : null}
+                </>
+            )}
+        </ListboxOption>)
+}