@helpwave/hightide 0.0.9 → 0.0.12

package/dist/components/user-input/Input.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, forwardRef } from 'react';
+import clsx from 'clsx';
+import useSaveDelay from '../../hooks/useSaveDelay';
+import { noop } from '../../util/noop';
+import { Label } from './Label';
+/**
+ * A Component for inputting text or other information
+ *
+ * Its state is managed must be managed by the parent
+ */
+const ControlledInput = ({ id, type = 'text', value, label, onChange = noop, onChangeEvent = noop, className = '', onEditCompleted, expanded = true, onBlur, containerClassName, ...restProps }) => {
+    const { restartTimer, clearUpdateTimer } = useSaveDelay(() => undefined, 3000);
+    const ref = useRef(null);
+    useEffect(() => {
+        var _a;
+        if (restProps.autoFocus) {
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [restProps.autoFocus]);
+    return (_jsxs("div", { className: clsx({ 'w-full': expanded }, containerClassName), children: [label && _jsx(Label, { ...label, htmlFor: id, className: clsx('mb-1', label.className) }), _jsx("input", { ref: ref, value: value, id: id, type: type, className: clsx('block bg-surface text-on-surface px-3 py-2 rounded-md w-full border-2 border-gray-200 hover:border-primary focus:outline-none focus:border-primary focus:ring-primary', className), onBlur: event => {
+                    if (onBlur) {
+                        onBlur(event);
+                    }
+                    if (onEditCompleted) {
+                        onEditCompleted(event.target.value, event);
+                        clearUpdateTimer();
+                    }
+                }, onChange: e => {
+                    const value = e.target.value;
+                    if (onEditCompleted) {
+                        restartTimer(() => {
+                            onEditCompleted(value, e);
+                            clearUpdateTimer();
+                        });
+                    }
+                    onChange(value, e);
+                    onChangeEvent(e);
+                }, ...restProps })] }));
+};
+/**
+ * A Component for inputting text or other information
+ *
+ * Its state is managed by the component itself
+ */
+const UncontrolledInput = ({ defaultValue = '', onChange = noop, ...props }) => {
+    const [value, setValue] = useState(defaultValue);
+    const handleChange = (text, event) => {
+        setValue(text);
+        onChange(text, event);
+    };
+    return (_jsx(ControlledInput, { ...props, value: value, onChange: handleChange }));
+};
+const FormInput = forwardRef(function FormInput({ id, labelText, errorText, className, labelClassName, errorClassName, containerClassName, required, ...restProps }, ref) {
+    const input = (_jsx("input", { ref: ref, id: id, ...restProps, className: clsx('block bg-surface text-on-surface px-3 py-2 rounded-md w-full border-2 border-gray-200 hover:border-primary focus:outline-none focus:border-primary focus:ring-primary', {
+            'focus:border-primary focus:ring-primary': !errorText,
+            'focus:border-negative focus:ring-negative text-negative': !!errorText,
+        }, className) }));
+    return (_jsxs("div", { className: clsx('flex flex-col gap-y-1', containerClassName), children: [labelText && (_jsxs("label", { htmlFor: id, className: clsx('textstyle-label-md', labelClassName), children: [labelText, required && _jsx("span", { className: "text-primary font-bold", children: "*" })] })), input, errorText && _jsx("label", { htmlFor: id, className: clsx('text-negative', errorClassName), children: errorText })] }));
+});
+export { UncontrolledInput, ControlledInput as Input, FormInput };

package/dist/components/user-input/Label.d.ts

@@ -0,0 +1,12 @@
+import type { LabelHTMLAttributes } from 'react';
+export type LabelType = 'labelSmall' | 'labelMedium' | 'labelBig';
+export type LabelProps = {
+    /** The text for the label */
+    name?: string;
+    /** The styling for the label */
+    labelType?: LabelType;
+} & LabelHTMLAttributes<HTMLLabelElement>;
+/**
+ * A Label component
+ */
+export declare const Label: ({ children, name, labelType, ...props }: LabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/user-input/Label.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const styleMapping = {
+    labelSmall: 'textstyle-label-sm',
+    labelMedium: 'textstyle-label-md',
+    labelBig: 'textstyle-label-lg',
+};
+/**
+ * A Label component
+ */
+export const Label = ({ children, name, labelType = 'labelSmall', ...props }) => {
+    return (_jsx("label", { ...props, children: children ? children : (_jsx("span", { className: styleMapping[labelType], children: name })) }));
+};

package/dist/components/user-input/Menu.d.ts

@@ -0,0 +1,21 @@
+import { type PropsWithChildren, type ReactNode, type RefObject } from 'react';
+type MenuProps<T> = PropsWithChildren<{
+    trigger: (onClick: () => void, ref: RefObject<T>) => ReactNode;
+    /**
+     * @default 'tl'
+     */
+    alignment?: 'tl' | 'tr' | 'bl' | 'br' | '_l' | '_r' | 't_' | 'b_';
+    showOnHover?: boolean;
+    menuClassName?: string;
+}>;
+export type MenuItemProps = {
+    onClick?: () => void;
+    alignment?: 'left' | 'right';
+    className?: string;
+};
+declare const MenuItem: ({ children, onClick, alignment, className }: PropsWithChildren<MenuItemProps>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A Menu Component to allow the user to see different functions
+ */
+declare const Menu: <T extends HTMLElement>({ trigger, children, alignment, showOnHover, menuClassName, }: MenuProps<T>) => import("react/jsx-runtime").JSX.Element;
+export { Menu, MenuItem };

package/dist/components/user-input/Menu.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import clsx from 'clsx';
+import { useOutsideClick } from '../../hooks/useOutsideClick';
+import { useHoverState } from '../../hooks/useHoverState';
+const MenuItem = ({ children, onClick, alignment = 'left', className }) => (_jsx("div", { className: clsx('block px-3 py-1 bg-menu-background text-menu-text hover:brightness-90', {
+        'text-right': alignment === 'right',
+        'text-left': alignment === 'left',
+    }, className), onClick: onClick, children: children }));
+// TODO: it is quite annoying that the type for the ref has to be specified manually, is there some solution around this?
+/**
+ * A Menu Component to allow the user to see different functions
+ */
+const Menu = ({ trigger, children, alignment = 'tl', showOnHover = false, menuClassName = '', }) => {
+    const { isHovered: isOpen, setIsHovered: setIsOpen, handlers } = useHoverState({ isDisabled: !showOnHover });
+    const triggerRef = useRef(null);
+    const menuRef = useRef(null);
+    useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
+    return (_jsxs("div", { className: "relative", ...handlers, children: [trigger(() => setIsOpen(!isOpen), triggerRef), isOpen ? (_jsx("div", { ref: menuRef, onClick: e => e.stopPropagation(), className: clsx('absolute top-full mt-1 py-2 w-60 rounded-lg bg-menu-background text-menu-text ring-1 ring-slate-900/5 text-sm leading-6 font-semibold shadow-md z-[1]', {
+                    '    top-[8px]': alignment[0] === 't',
+                    ' bottom-[8px]': alignment[0] === 'b',
+                    '  left-[-8px]': alignment[1] === 'l',
+                    ' right-[-8px]': alignment[1] === 'r',
+                }, menuClassName), children: children })) : null] }));
+};
+export { Menu, MenuItem };

package/dist/components/user-input/MultiSelect.d.ts

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+import type { PropsForTranslation } from '../../hooks/useTranslation';
+import type { LabelProps } from './Label';
+type MultiSelectTranslation = {
+    select: string;
+    search: string;
+    selected: string;
+};
+export type MultiSelectOption<T> = {
+    label: string;
+    value: T;
+    selected: boolean;
+    disabled?: boolean;
+    className?: string;
+};
+export type SearchProps<T> = {
+    initialSearch?: string;
+    searchMapping: (value: MultiSelectOption<T>) => string[];
+};
+export type MultiSelectProps<T> = {
+    options: MultiSelectOption<T>[];
+    onChange: (options: MultiSelectOption<T>[]) => void;
+    search?: SearchProps<T>;
+    disabled?: boolean;
+    selectedDisplay?: (props: {
+        items: MultiSelectOption<T>[];
+        disabled: boolean;
+    }) => ReactNode;
+    label?: LabelProps;
+    hintText?: string;
+    showDisabledOptions?: boolean;
+    className?: string;
+    triggerClassName?: string;
+};
+/**
+ * A Component for multi selection
+ */
+export declare const MultiSelect: <T>({ overwriteTranslation, options, onChange, search, disabled, selectedDisplay, label, hintText, showDisabledOptions, className, triggerClassName, }: PropsForTranslation<MultiSelectTranslation, MultiSelectProps<T>>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/user-input/MultiSelect.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Search } from 'lucide-react';
+import { useTranslation } from '../../hooks/useTranslation';
+import { MultiSearchWithMapping } from '../../util/simpleSearch';
+import clsx from 'clsx';
+import { Menu, MenuItem } from './Menu';
+import { Input } from './Input';
+import { Checkbox } from './Checkbox';
+import { Label } from './Label';
+const defaultMultiSelectTranslation = {
+    en: {
+        select: 'Select',
+        search: 'Search',
+        selected: 'selected'
+    },
+    de: {
+        select: 'Auswählen',
+        search: 'Suche',
+        selected: 'ausgewählt'
+    }
+};
+/**
+ * A Component for multi selection
+ */
+export const MultiSelect = ({ overwriteTranslation, options, onChange, search, disabled = false, selectedDisplay, label, hintText, showDisabledOptions = true, className = '', triggerClassName = '', }) => {
+    var _a, _b;
+    const translation = useTranslation(defaultMultiSelectTranslation, overwriteTranslation);
+    const [searchText, setSearchText] = useState((_a = search === null || search === void 0 ? void 0 : search.initialSearch) !== null && _a !== void 0 ? _a : '');
+    let filteredOptions = options;
+    const enableSearch = !!search;
+    if (enableSearch && !!searchText) {
+        filteredOptions = MultiSearchWithMapping(searchText, filteredOptions, value => search.searchMapping(value));
+    }
+    if (!showDisabledOptions) {
+        filteredOptions = filteredOptions.filter(value => !value.disabled);
+    }
+    const selectedItems = options.filter(value => value.selected);
+    const menuButtonText = selectedItems.length === 0 ?
+        hintText !== null && hintText !== void 0 ? hintText : translation.select
+        : _jsx("span", { children: `${selectedItems.length} ${translation.selected}` });
+    const borderColor = 'border-menu-border';
+    return (_jsxs("div", { className: clsx(className), children: [label && (_jsx(Label, { ...label, htmlFor: label.name, className: clsx(' mb-1', label.className), labelType: (_b = label.labelType) !== null && _b !== void 0 ? _b : 'labelBig' })), _jsxs(Menu, { alignment: "t_", trigger: (onClick, ref) => (_jsx("div", { ref: ref, onClick: disabled ? undefined : onClick, className: clsx(borderColor, 'bg-menu-background text-menu-text inline-w-full justify-between items-center rounded-lg border-2 px-4 py-2 font-medium', {
+                        'hover:brightness-90 hover:border-primary cursor-pointer': !disabled,
+                        'bg-disabled-background text-disabled cursor-not-allowed': disabled
+                    }, triggerClassName), children: selectedDisplay ? selectedDisplay({ items: options, disabled }) : menuButtonText })), menuClassName: clsx('!rounded-lg !shadow-lg !max-h-[500px] !min-w-[400px] !max-w-[70vh] !overflow-y-auto !border !border-2', borderColor, { '!py-0': !enableSearch, '!pb-0': enableSearch }), children: [enableSearch && (_jsxs("div", { className: "row gap-x-2 items-center px-2 py-2", children: [_jsx(Input, { autoFocus: true, value: searchText, onChange: setSearchText }), _jsx(Search, {})] }, "selectSearch")), filteredOptions.map((option, index) => (_jsx(MenuItem, { className: clsx({
+                            'cursor-not-allowed !bg-disabled-background !text-disabled-text hover:brightness-100': !!option.disabled,
+                            'cursor-pointer': !option.disabled,
+                        }), children: _jsxs("div", { className: clsx('overflow-hidden whitespace-nowrap text-ellipsis row items-center gap-x-2', option.className), onClick: () => {
+                                if (!option.disabled) {
+                                    onChange(options.map(value => value.value === option.value ? ({
+                                        ...option,
+                                        selected: !value.selected
+                                    }) : value));
+                                }
+                            }, children: [_jsx(Checkbox, { checked: option.selected, disabled: option.disabled, size: "small" }), option.label] }) }, `item${index}`)))] })] }));
+};

package/dist/components/user-input/ScrollPicker.d.ts

@@ -0,0 +1,11 @@
+export type ScrollPickerProps<T> = {
+    options: T[];
+    mapping: (value: T) => string;
+    selected?: T;
+    onChange?: (value: T) => void;
+    disabled?: boolean;
+};
+/**
+ * A component for picking an option by scrolling
+ */
+export declare const ScrollPicker: <T>({ options, mapping, selected, onChange, disabled, }: ScrollPickerProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/user-input/ScrollPicker.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import clsx from 'clsx';
+import { noop } from '../../util/noop';
+import { getNeighbours, range } from '../../util/array';
+import { clamp } from '../../util/math';
+const up = 1;
+const down = -1;
+/**
+ * A component for picking an option by scrolling
+ */
+export const ScrollPicker = ({ options, mapping, selected, onChange = noop, disabled = false, }) => {
+    let selectedIndex = 0;
+    if (selected && options.indexOf(selected) !== -1) {
+        selectedIndex = options.indexOf(selected);
+    }
+    const [{ currentIndex, transition, items, lastTimeStamp }, setAnimation] = useState({
+        targetIndex: selectedIndex,
+        currentIndex: disabled ? selectedIndex : 0,
+        velocity: 0,
+        animationVelocity: Math.floor(options.length / 2),
+        transition: 0,
+        items: options,
+    });
+    const itemsShownCount = 5;
+    const shownItems = getNeighbours(range(0, items.length - 1), currentIndex).map(index => ({
+        name: mapping(items[index]), index
+    }));
+    const itemHeight = 40;
+    const distance = 8;
+    const containerHeight = itemHeight * (itemsShownCount - 2) + distance * (itemsShownCount - 2 + 1);
+    const getDirection = useCallback((targetIndex, currentIndex, transition, length) => {
+        if (targetIndex === currentIndex) {
+            return transition > 0 ? up : down;
+        }
+        let distanceForward = targetIndex - currentIndex;
+        if (distanceForward < 0) {
+            distanceForward += length;
+        }
+        return distanceForward >= length / 2 ? down : up;
+    }, []);
+    const animate = useCallback((timestamp, startTime) => {
+        setAnimation((prevState) => {
+            const { targetIndex, currentIndex, transition, animationVelocity, velocity, items, lastScrollTimeStamp } = prevState;
+            if (disabled) {
+                return { ...prevState, currentIndex: targetIndex, velocity: 0, lastTimeStamp: timestamp };
+            }
+            if ((targetIndex === currentIndex && velocity === 0 && transition === 0) || !startTime) {
+                return { ...prevState, lastTimeStamp: timestamp };
+            }
+            const progress = (timestamp - startTime) / 1000; // to seconds
+            const direction = getDirection(targetIndex, currentIndex, transition, items.length);
+            let newVelocity = velocity;
+            let usedVelocity;
+            let newCurrentIndex = currentIndex;
+            const isAutoScrolling = velocity === 0 && (!lastScrollTimeStamp || timestamp - lastScrollTimeStamp > 300);
+            const newLastScrollTimeStamp = velocity !== 0 ? timestamp : lastScrollTimeStamp;
+            // manual scrolling
+            if (isAutoScrolling) {
+                usedVelocity = direction * animationVelocity;
+            }
+            else {
+                usedVelocity = velocity;
+                newVelocity = velocity * 0.5; // drag loss
+                if (Math.abs(newVelocity) <= 0.05) {
+                    newVelocity = 0;
+                }
+            }
+            let newTransition = transition + usedVelocity * progress;
+            const changeThreshold = 0.5;
+            while (newTransition >= changeThreshold) {
+                if (newCurrentIndex === targetIndex && newTransition >= changeThreshold && isAutoScrolling) {
+                    newTransition = 0;
+                    break;
+                }
+                newCurrentIndex = (currentIndex + 1) % items.length;
+                newTransition -= 1;
+            }
+            if (newTransition >= changeThreshold) {
+                newTransition = 0;
+            }
+            while (newTransition <= -changeThreshold) {
+                if (newCurrentIndex === targetIndex && newTransition <= -changeThreshold && isAutoScrolling) {
+                    newTransition = 0;
+                    break;
+                }
+                newCurrentIndex = currentIndex === 0 ? items.length - 1 : currentIndex - 1;
+                newTransition += 1;
+            }
+            let newTargetIndex = targetIndex;
+            if (!isAutoScrolling) {
+                newTargetIndex = newCurrentIndex;
+            }
+            if ((currentIndex !== newTargetIndex || newTargetIndex !== targetIndex) && newTargetIndex === newCurrentIndex) {
+                onChange(items[newCurrentIndex]);
+            }
+            return {
+                targetIndex: newTargetIndex,
+                currentIndex: newCurrentIndex,
+                animationVelocity,
+                transition: newTransition,
+                velocity: newVelocity,
+                items,
+                lastTimeStamp: timestamp,
+                lastScrollTimeStamp: newLastScrollTimeStamp
+            };
+        });
+    }, [disabled, getDirection, onChange]);
+    useEffect(() => {
+        // constant update
+        requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp));
+    });
+    const opacity = (transition, index, itemsCount) => {
+        const max = 100;
+        const min = 0;
+        const distance = max - min;
+        let opacityValue = min;
+        const unitTransition = clamp((transition) / 0.5);
+        if (index === 1 || index === itemsCount - 2) {
+            if (index === 1 && transition > 0) {
+                opacityValue += Math.floor(unitTransition * distance);
+            }
+            if (index === itemsCount - 2 && transition < 0) {
+                opacityValue += Math.floor(unitTransition * distance);
+            }
+        }
+        else {
+            opacityValue = max;
+        }
+        // TODO this is not the right value for the bottom entry
+        return clamp(1 - (opacityValue / max));
+    };
+    return (_jsx("div", { className: "relative overflow-hidden", style: { height: containerHeight }, onWheel: event => {
+            if (event.deltaY !== 0) {
+                // TODO slower increase
+                setAnimation(({ velocity, ...animationData }) => ({ ...animationData, velocity: velocity + event.deltaY }));
+            }
+        }, children: _jsxs("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [_jsx("div", { className: "absolute z-[1] top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2 w-full min-w-[40px] border border-y-2 border-x-0 border-[#00000033]", style: { height: `${itemHeight}px` } }), _jsx("div", { className: "col select-none", style: {
+                        transform: `translateY(${-transition * (distance + itemHeight)}px)`,
+                        columnGap: `${distance}px`,
+                    }, children: shownItems.map(({ name, index }, arrayIndex) => (_jsx("div", { className: clsx(`col items-center justify-center rounded-md`, {
+                            'text-primary font-bold': currentIndex === index,
+                            'text-on-background': currentIndex === index,
+                            'cursor-pointer': !disabled,
+                            'cursor-not-allowed': disabled,
+                        }), style: {
+                            opacity: currentIndex !== index ? opacity(transition, arrayIndex, shownItems.length) : undefined,
+                            height: `${itemHeight}px`,
+                            maxHeight: `${itemHeight}px`,
+                        }, onClick: () => !disabled && setAnimation(prevState => ({ ...prevState, targetIndex: index })), children: name }, index))) })] }) }));
+};

package/dist/components/user-input/SearchableSelect.d.ts

@@ -0,0 +1,8 @@
+import type { SelectOption, SelectProps } from './Select';
+export type SearchableSelectProps<T> = SelectProps<T> & {
+    searchMapping: (value: SelectOption<T>) => string[];
+};
+/**
+ * A Select where items can be searched
+ */
+export declare const SearchableSelect: <T>({ value, options, searchMapping, ...selectProps }: SearchableSelectProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/user-input/SearchableSelect.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Search } from 'lucide-react';
+import { MultiSearchWithMapping } from '../../util/simpleSearch';
+import { Select } from './Select';
+import { Input } from './Input';
+/**
+ * A Select where items can be searched
+ */
+export const SearchableSelect = ({ value, options, searchMapping, ...selectProps }) => {
+    const [search, setSearch] = useState('');
+    const filteredOptions = MultiSearchWithMapping(search, options, searchMapping);
+    return (_jsx(Select, { value: value, options: filteredOptions, additionalItems: [(_jsxs("div", { className: "row gap-x-2 items-center", children: [_jsx(Input, { autoFocus: true, value: search, onChange: setSearch }), _jsx(Search, {})] }, "selectSearch"))], ...selectProps }));
+};

package/dist/components/user-input/Select.d.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+import type { LabelProps } from './Label';
+export type SelectOption<T> = {
+    label: ReactNode;
+    value: T;
+    disabled?: boolean;
+    className?: string;
+};
+export type SelectProps<T> = {
+    value?: T;
+    label?: LabelProps;
+    options: SelectOption<T>[];
+    onChange: (value: T) => void;
+    isHidingCurrentValue?: boolean;
+    hintText?: string;
+    showDisabledOptions?: boolean;
+    className?: string;
+    isDisabled?: boolean;
+    textColor?: string;
+    hoverColor?: string;
+    /**
+     * The items will be at the start of the select and aren't selectable
+     */
+    additionalItems?: ReactNode[];
+    selectedDisplayOverwrite?: ReactNode;
+};
+/**
+ * A Select Component for selecting form a list of options
+ *
+ * The State is managed by the parent
+ */
+export declare const Select: <T>({ value, label, options, onChange, isHidingCurrentValue, hintText, showDisabledOptions, isDisabled, className, textColor, hoverColor, additionalItems, selectedDisplayOverwrite, }: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/user-input/Select.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Menu } from '@headlessui/react';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import clsx from 'clsx';
+import { Label } from './Label';
+/**
+ * A Select Component for selecting form a list of options
+ *
+ * The State is managed by the parent
+ */
+export const Select = ({ value, label, options, onChange, isHidingCurrentValue = true, hintText = '', showDisabledOptions = true, isDisabled, className, textColor = 'text-menu-text', hoverColor = 'hover:brightness-90', additionalItems, selectedDisplayOverwrite, }) => {
+    var _a;
+    // Notice: for more complex types this check here might need an additional compare method
+    let filteredOptions = isHidingCurrentValue ? options.filter(option => option.value !== value) : options;
+    if (!showDisabledOptions) {
+        filteredOptions = filteredOptions.filter(value => !value.disabled);
+    }
+    const selectedOption = options.find(option => option.value === value);
+    if (value !== undefined && selectedOption === undefined && selectedDisplayOverwrite === undefined) {
+        console.warn('The selected value is not found in the options list. This might be an error on your part or' +
+            ' default behavior if it is complex data type on which === does not work. In case of the latter' +
+            ' use selectedDisplayOverwrite to set your selected text or component');
+    }
+    const borderColor = 'border-menu-border';
+    return (_jsxs("div", { className: clsx(className), children: [label && (_jsx(Label, { ...label, labelType: (_a = label.labelType) !== null && _a !== void 0 ? _a : 'labelBig', className: clsx('mb-1', label.className) })), _jsx(Menu, { as: "div", className: "relative text-menu-text", children: ({ open }) => {
+                    var _a;
+                    return (_jsxs(_Fragment, { children: [_jsxs(Menu.Button, { className: clsx('inline-flex w-full justify-between items-center rounded-t-lg border-2 px-4 py-2 font-medium bg-menu-background text-menu-text', textColor, borderColor, {
+                                    'rounded-b-lg': !open,
+                                    [hoverColor]: !isDisabled,
+                                    'bg-disabled-background cursor-not-allowed text-disabled': isDisabled
+                                }), disabled: isDisabled, children: [_jsx("span", { children: (_a = selectedDisplayOverwrite !== null && selectedDisplayOverwrite !== void 0 ? selectedDisplayOverwrite : selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _a !== void 0 ? _a : hintText }), open ? _jsx(ChevronUp, {}) : _jsx(ChevronDown, {})] }), _jsxs(Menu.Items, { className: "absolute w-full z-10 rounded-b-lg bg-menu-background text-menu-text shadow-lg max-h-[500px] overflow-y-auto", children: [(additionalItems !== null && additionalItems !== void 0 ? additionalItems : []).map((item, index) => {
+                                        var _a;
+                                        return (_jsx("div", { className: clsx(borderColor, 'px-4 py-2 overflow-hidden whitespace-nowrap text-ellipsis border-2 border-t-0', {
+                                                'border-b-0 rounded-b-lg': filteredOptions.length === 0 && index === ((_a = additionalItems === null || additionalItems === void 0 ? void 0 : additionalItems.length) !== null && _a !== void 0 ? _a : 1) - 1,
+                                            }), children: item }, `additionalItems${index}`));
+                                    }), filteredOptions.map((option, index) => (_jsx(Menu.Item, { children: _jsx("div", { className: clsx('px-4 py-2 overflow-hidden whitespace-nowrap text-ellipsis border-2 border-t-0 cursor-pointer', option.className, borderColor, {
+                                                'brightness-90': option.value === value,
+                                                'brightness-95': index % 2 === 1,
+                                                'text-disabled bg-disabled-background cursor-not-allowed': !!option.disabled,
+                                                'bg-menu-background text-menu-text hover:brightness-90 cursor-pointer': !option.disabled,
+                                                'rounded-b-lg': index === filteredOptions.length - 1,
+                                            }), onClick: () => {
+                                                if (!option.disabled) {
+                                                    onChange(option.value);
+                                                }
+                                            }, children: option.label }) }, `item${index}`)))] })] }));
+                } })] }));
+};

package/dist/components/user-input/Textarea.d.ts

@@ -0,0 +1,20 @@
+import type { TextareaHTMLAttributes } from 'react';
+import type { LabelProps } from './Label';
+export type TextareaProps = {
+    /** Outside the area */
+    label?: Omit<LabelProps, 'id'>;
+    /** Inside the area */
+    headline?: string;
+    id?: string;
+    resizable?: boolean;
+    onChange?: (text: string) => void;
+    disclaimer?: string;
+    onEditCompleted?: (text: string) => void;
+    defaultStyle?: boolean;
+} & Omit<TextareaHTMLAttributes<Element>, 'id' | 'onChange'>;
+/**
+ * A Textarea component for inputting longer texts
+ *
+ * The State is managed by the parent
+ */
+export declare const Textarea: ({ label, headline, id, resizable, onChange, disclaimer, onBlur, onEditCompleted, defaultStyle, className, ...props }: TextareaProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/user-input/Textarea.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import clsx from 'clsx';
+import useSaveDelay from '../../hooks/useSaveDelay';
+import { noop } from '../../util/noop';
+import { Label } from './Label';
+/**
+ * A Textarea component for inputting longer texts
+ *
+ * The State is managed by the parent
+ */
+export const Textarea = ({ label, headline, id, resizable = false, onChange = noop, disclaimer, onBlur = noop, onEditCompleted = noop, defaultStyle = true, className, ...props }) => {
+    var _a;
+    const [hasFocus, setHasFocus] = useState(false);
+    const { restartTimer, clearUpdateTimer } = useSaveDelay(() => undefined, 3000);
+    const onEditCompletedWrapper = (text) => {
+        onEditCompleted(text);
+        clearUpdateTimer();
+    };
+    return (_jsxs("div", { className: "w-full", children: [label && (_jsx(Label, { ...label, htmlFor: id, className: clsx('mb-1', label.className), labelType: (_a = label.labelType) !== null && _a !== void 0 ? _a : 'labelSmall' })), _jsxs("div", { className: `${clsx(' bg-surface text-on-surface focus-within:border-primary relative', { 'shadow border-2 border-gray-300 hover:border-primary rounded-lg': defaultStyle })}`, children: [headline && (_jsx("span", { className: "mx-3 mt-3 block text-gray-700 font-bold", children: headline })), _jsx("textarea", { id: id, className: clsx('pt-0 px-3 border-transparent focus:border-transparent focus:ring-0 appearance-none border w-full leading-tight focus:outline-none', { 'resize-none': !resizable, 'h-32': defaultStyle, 'mt-3': !headline }, className), onChange: (event) => {
+                            const value = event.target.value;
+                            restartTimer(() => {
+                                onEditCompletedWrapper(value);
+                            });
+                            onChange(value);
+                        }, onFocus: () => {
+                            setHasFocus(true);
+                        }, onBlur: (event) => {
+                            onBlur(event);
+                            onEditCompletedWrapper(event.target.value);
+                            setHasFocus(false);
+                        }, ...props })] }), (hasFocus && disclaimer) && (_jsx("label", { className: "text-negative", children: disclaimer }))] }));
+};

package/dist/components/user-input/ToggleableInput.d.ts

@@ -0,0 +1,32 @@
+import type { HTMLInputTypeAttribute, InputHTMLAttributes } from 'react';
+type InputProps = {
+    /**
+     * used for the label's `for` attribute
+     */
+    id: string;
+    value: string;
+    /**
+     * @default 'text'
+     */
+    type?: HTMLInputTypeAttribute;
+    /**
+     * Callback for when the input's value changes
+     * This is pretty much required but made optional for the rare cases where it actually isn't need such as when used with disabled
+     * That could be enforced through a union type but that seems a bit overkill
+     * @default noop
+     */
+    onChange?: (text: string) => void;
+    labelClassName?: string;
+    initialState?: 'editing' | 'display';
+    size?: number;
+    disclaimer?: string;
+    onEditCompleted?: (text: string) => void;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'value' | 'label' | 'type' | 'onChange' | 'crossOrigin'>;
+/**
+ * A Text input component for inputting text. It changes appearance upon entering the edit mode and switches
+ * back to display mode on loss of focus or on enter
+ *
+ * The State is managed by the parent
+ */
+export declare const ToggleableInput: ({ id, type, value, onChange, labelClassName, initialState, size, disclaimer, onBlur, onEditCompleted, ...restProps }: InputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/user-input/ToggleableInput.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Pencil } from 'lucide-react';
+import clsx from 'clsx';
+import useSaveDelay from '../../hooks/useSaveDelay';
+import { noop } from '../../util/noop';
+/**
+ * A Text input component for inputting text. It changes appearance upon entering the edit mode and switches
+ * back to display mode on loss of focus or on enter
+ *
+ * The State is managed by the parent
+ */
+export const ToggleableInput = ({ id, type = 'text', value, onChange = noop, labelClassName = '', initialState = 'display', size = 20, disclaimer, onBlur, onEditCompleted = noop, ...restProps }) => {
+    const [isEditing, setIsEditing] = useState(initialState !== 'display');
+    const { restartTimer, clearUpdateTimer } = useSaveDelay(() => undefined, 3000);
+    const onEditCompletedWrapper = (text) => {
+        onEditCompleted(text);
+        clearUpdateTimer();
+    };
+    return (_jsxs("div", { children: [_jsxs("div", { className: "row items-center w-full gap-x-2 overflow-hidden", onClick: () => !isEditing ? setIsEditing(!isEditing) : undefined, children: [_jsx("div", { className: clsx('row overflow-hidden', { 'flex-1': isEditing }), children: isEditing ? (_jsx("input", { autoFocus: true, ...restProps, value: value, type: type, id: id, onChange: event => {
+                                const value = event.target.value;
+                                restartTimer(() => {
+                                    onEditCompletedWrapper(value);
+                                });
+                                onChange(value);
+                            }, onBlur: (event) => {
+                                if (onBlur) {
+                                    onBlur(event);
+                                }
+                                onEditCompletedWrapper(value);
+                                setIsEditing(false);
+                            }, onKeyDown: event => {
+                                if (event.key === 'Enter') {
+                                    setIsEditing(false);
+                                    onEditCompletedWrapper(value);
+                                }
+                            }, className: clsx(labelClassName, `w-full border-none rounded-none focus:ring-0 shadow-transparent decoration-primary p-0 underline-offset-4`, {
+                                underline: isEditing
+                            }), onFocus: event => event.target.select() })) : (_jsx("span", { className: clsx(labelClassName, 'max-w-xs break-words overflow-hidden'), children: value })) }), _jsx(Pencil, { className: clsx(`min-w-[${size}px] cursor-pointer`, { 'text-transparent': isEditing }), size: size })] }), (isEditing && disclaimer) && (_jsx("label", { className: "text-negative", children: disclaimer }))] }));
+};