npm - @helpwave/hightide - Versions diffs - 0.0.16 → 0.0.17 - Mend

@helpwave/hightide 0.0.16 → 0.0.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (111) hide show

package/dist/components/user-input/MultiSelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/user-input/MultiSelect.tsx","../../../src/hooks/useLanguage.tsx","../../../src/hooks/useLocalStorage.tsx","../../../src/hooks/useTranslation.ts","../../../src/util/simpleSearch.ts","../../../src/components/user-input/Menu.tsx","../../../src/hooks/useOutsideClick.ts","../../../src/hooks/useHoverState.ts","../../../src/components/user-input/Input.tsx","../../../src/hooks/useSaveDelay.ts","../../../src/util/noop.ts","../../../src/components/user-input/Label.tsx","../../../src/components/user-input/Checkbox.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { useState } from 'react'\nimport { Search } from 'lucide-react'\nimport { useTranslation } from '../../hooks/useTranslation'\nimport type { PropsForTranslation } from '../../hooks/useTranslation'\nimport type { Languages } from '../../hooks/useLanguage'\nimport { MultiSearchWithMapping } from '../../util/simpleSearch'\nimport clsx from 'clsx'\nimport { Menu, MenuItem } from './Menu'\nimport { Input } from './Input'\nimport { Checkbox } from './Checkbox'\nimport type { LabelProps } from './Label'\nimport { Label } from './Label'\n\ntype MultiSelectTranslation = {\n select: string,\n search: string,\n selected: string,\n}\n\nconst defaultMultiSelectTranslation: Record<Languages, MultiSelectTranslation> = {\n en: {\n select: 'Select',\n search: 'Search',\n selected: 'selected'\n },\n de: {\n select: 'Auswählen',\n search: 'Suche',\n selected: 'ausgewählt'\n }\n}\n\n// TODO maybe add custom item builder here\nexport type MultiSelectOption<T> = {\n label: string,\n value: T,\n selected: boolean,\n disabled?: boolean,\n className?: string,\n}\n\nexport type SearchProps<T> = {\n initialSearch?: string,\n searchMapping: (value: MultiSelectOption<T>) => string[],\n}\n\nexport type MultiSelectProps<T> = {\n options: MultiSelectOption<T>[],\n onChange: (options: MultiSelectOption<T>[]) => void,\n search?: SearchProps<T>,\n disabled?: boolean,\n selectedDisplay?: (props: {\n items: MultiSelectOption<T>[],\n disabled: boolean,\n }) => ReactNode,\n label?: LabelProps,\n hintText?: string,\n showDisabledOptions?: boolean,\n className?: string,\n triggerClassName?: string,\n}\n\n/*\n A Component for multi selection\n /\nexport const MultiSelect = <T, >({\n overwriteTranslation,\n options,\n onChange,\n search,\n disabled = false,\n selectedDisplay,\n label,\n hintText,\n showDisabledOptions = true,\n className = '',\n triggerClassName = '',\n }: PropsForTranslation<MultiSelectTranslation, MultiSelectProps<T>>) => {\n const translation = useTranslation(defaultMultiSelectTranslation, overwriteTranslation)\n const [searchText, setSearchText] = useState<string>(search?.initialSearch ?? '')\n let filteredOptions: MultiSelectOption<T>[] = options\n const enableSearch = !!search\n if (enableSearch && !!searchText) {\n filteredOptions = MultiSearchWithMapping<MultiSelectOption<T>>(\n searchText,\n filteredOptions,\n value => search.searchMapping(value)\n )\n }\n if (!showDisabledOptions) {\n filteredOptions = filteredOptions.filter(value => !value.disabled)\n }\n\n const selectedItems = options.filter(value => value.selected)\n const menuButtonText = selectedItems.length === 0 ?\n hintText ?? translation.select\n : <span>{`${selectedItems.length} ${translation.selected}`}</span>\n\n const borderColor = 'border-menu-border'\n\n return (\n <div className={clsx(className)}>\n {label && (\n <Label {...label} htmlFor={label.name} className={clsx(' mb-1', label.className)}\n labelType={label.labelType ?? 'labelBig'}/>\n )}\n <Menu<HTMLDivElement>\n alignment=\"t_\"\n trigger={(onClick, ref) => (\n <div ref={ref} onClick={disabled ? undefined : onClick}\n 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',\n {\n 'hover:brightness-90 hover:border-primary cursor-pointer': !disabled,\n 'bg-disabled-background text-disabled cursor-not-allowed': disabled\n },\n triggerClassName)}\n >\n {selectedDisplay ? selectedDisplay({ items: options, disabled }) : menuButtonText}\n </div>\n )}\n menuClassName={clsx(\n '!rounded-lg !shadow-lg !max-h-[500px] !min-w-[400px] !max-w-[70vh] !overflow-y-auto !border !border-2', borderColor,\n { '!py-0': !enableSearch, '!pb-0': enableSearch }\n )}\n >\n {enableSearch && (\n <div key=\"selectSearch\" className=\"row gap-x-2 items-center px-2 py-2\">\n <Input autoFocus={true} value={searchText} onChange={setSearchText}/>\n <Search/>\n </div>\n )}\n {filteredOptions.map((option, index) => (\n <MenuItem key={`item${index}`} className={clsx({\n 'cursor-not-allowed !bg-disabled-background !text-disabled-text hover:brightness-100': !!option.disabled,\n 'cursor-pointer': !option.disabled,\n })}\n >\n <div\n className={clsx('overflow-hidden whitespace-nowrap text-ellipsis row items-center gap-x-2', option.className)}\n onClick={() => {\n if (!option.disabled) {\n onChange(options.map(value => value.value === option.value ? ({\n ...option,\n selected: !value.selected\n }) : value))\n }\n }}\n >\n <Checkbox checked={option.selected} disabled={option.disabled} size=\"small\"/>\n {option.label}\n </div>\n </MenuItem>\n ))}\n </Menu>\n </div>\n )\n}\n","import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport useLocalStorage from './useLocalStorage'\n\nexport const languages = ['en', 'de'] as const\nexport type Languages = typeof languages[number]\nexport const languagesLocalNames: Record<Languages, string> = {\n en: 'English',\n de: 'Deutsch',\n}\n\nexport const DEFAULT_LANGUAGE = 'en'\n\nexport type LanguageContextValue = {\n language: Languages,\n setLanguage: Dispatch<SetStateAction<Languages>>,\n}\n\nexport const LanguageContext = createContext<LanguageContextValue>({ language: DEFAULT_LANGUAGE, setLanguage: (v) => v })\n\nexport const useLanguage = () => useContext(LanguageContext)\n\nexport const useLocale = (overWriteLanguage?: Languages) => {\n const { language } = useLanguage()\n const mapping: Record<Languages, string> = {\n en: 'en-US',\n de: 'de-DE'\n }\n return mapping[overWriteLanguage ?? language]\n}\n\ntype ProvideLanguageProps = {\n initialLanguage?: Languages,\n}\n\nexport const ProvideLanguage = ({ initialLanguage, children }: PropsWithChildren<ProvideLanguageProps>) => {\n const [language, setLanguage] = useState<Languages>(initialLanguage ?? DEFAULT_LANGUAGE)\n const [storedLanguage, setStoredLanguage] = useLocalStorage<Languages>('language', initialLanguage ?? DEFAULT_LANGUAGE)\n\n useEffect(() => {\n if(language !== initialLanguage && initialLanguage){\n console.warn('LanguageProvider initial state changed: Prefer using useLanguages\\'s setLanguage instead')\n setLanguage(initialLanguage)\n }\n }, [initialLanguage]) // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n // TODO set locale of html tag here as well\n setStoredLanguage(language)\n }, [language, setStoredLanguage])\n\n useEffect(() => {\n if (storedLanguage !== null) {\n setLanguage(storedLanguage)\n return\n }\n\n const languagesToTestAgainst = Object.values(languages)\n\n const matchingBrowserLanguages = window.navigator.languages\n .map(language => languagesToTestAgainst.find((test) => language === test \|\| language.split('-')[0] === test))\n .filter(entry => entry !== undefined)\n\n if (matchingBrowserLanguages.length === 0) return\n\n const firstMatch = matchingBrowserLanguages[0] as Languages\n setLanguage(firstMatch)\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n <LanguageContext.Provider value={{\n language,\n setLanguage\n }}>\n {children}\n </LanguageContext.Provider>\n )\n}\n","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nconst useLocalStorage = <T, >(key: string, initValue: T): [T, SetValue<T>] => {\n const get = useCallback((): T => {\n if (typeof window === 'undefined') {\n return initValue\n }\n const storageService = new LocalStorageService()\n const value = storageService.get<T>(key)\n return value \|\| initValue\n }, [initValue, key])\n\n const [storedValue, setStoredValue] = useState<T>(get)\n\n const setValue: SetValue<T> = useCallback(value => {\n const newValue = value instanceof Function ? value(storedValue) : value\n const storageService = new LocalStorageService()\n storageService.set(key, value)\n\n setStoredValue(newValue)\n }, [storedValue, setStoredValue, key])\n\n useEffect(() => {\n setStoredValue(get())\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return [storedValue, setValue]\n}\n\nexport default useLocalStorage\n","import type { Languages } from './useLanguage'\nimport { useLanguage } from './useLanguage'\n\nexport type Translation<T> = Record<Languages, T>\n\ntype OverwriteTranslationType<Translation extends Record<string, unknown>> = {\n language?: Languages,\n translation?: Partial<Record<Languages, Partial<Translation>>>,\n}\n\n/\n Adds the `language` prop to the component props.\n \n @param Translation the type of the translation object\n \n @param Props the type of the component props, defaults to `Record<string, never>`,\n * if you don't expect any other props other than `language` and get an\n * error when using your component (because it uses `forwardRef` etc.)\n * you can try out `Record<string, unknown>`, this might resolve your\n * problem as `SomeType & never` is still `never` but `SomeType & unknown`\n * is `SomeType` which means that adding back props (like `ref` etc.)\n * works properly\n /\nexport type PropsForTranslation<\n Translation extends Record<string, unknown>,\n Props = Record<string, never>\n> = Props & {\n overwriteTranslation?: OverwriteTranslationType<Translation>,\n};\n\nexport const useTranslation = <Translation extends Record<string, unknown>>(\n defaults: Record<Languages, Translation>,\n translationOverwrite: OverwriteTranslationType<Translation> = {}\n) : Translation => {\n const { language: languageProp, translation: overwrite } = translationOverwrite\n const { language: inferredLanguage } = useLanguage()\n const usedLanguage = languageProp ?? inferredLanguage\n let defaultValues: Translation = defaults[usedLanguage]\n if (overwrite && overwrite[usedLanguage]) {\n defaultValues = { ...defaultValues, ...overwrite[usedLanguage] }\n }\n return defaultValues\n}\n","/\n Finds all values matching the search values by first mapping the values to a string array and then checking each entry for matches.\n * Returns the list of all matches.\n \n @param search The list of search strings e.g. `[name, type]`\n \n @param objects The list of objects to be searched in\n \n @param mapping The mapping of objects to the string properties they fulfil\n \n @return The list of objects that match all search strings\n /\nexport const MultiSubjectSearchWithMapping = <T>(search: string[], objects: T[], mapping: (value:T) => (string\| undefined)[]) => {\n return objects.filter(object => {\n const mappedSearchKeywords = mapping(object).map(value => value ? value.toLowerCase().trim() : undefined)\n return search.every(searchValue => !!mappedSearchKeywords.find(value => !!value && value.includes(searchValue.toLowerCase().trim())))\n })\n}\n\n/\n Finds all values matching the search value by first mapping the values to a string array and then checking each entry for matches.\n * Returns the list of all matches.\n \n @param search The search string e.g `name`\n \n @param objects The list of objects to be searched in\n \n @param mapping The mapping of objects to the string properties they fulfil\n \n @return The list of objects that match the search string\n /\nexport const MultiSearchWithMapping = <T>(search: string, objects: T[], mapping: (value:T) => string[]) => {\n return objects.filter(object => {\n const mappedSearchKeywords = mapping(object).map(value => value.toLowerCase().trim())\n return !!mappedSearchKeywords.find(value => value.includes(search.toLowerCase().trim()))\n })\n}\n\n/\n Finds all values matching the search value by first mapping the values to a string and returns the list of all matches.\n \n @param search The search string e.g `name`\n \n @param objects The list of objects to be searched in\n \n @param mapping The mapping of objects to a string that is compared to the search\n \n @return The list of objects that match the search string\n /\nexport const SimpleSearchWithMapping = <T>(search: string, objects: T[], mapping: (value:T) => string) => {\n return MultiSearchWithMapping(search, objects, value => [mapping(value)])\n}\n\n/\n Finds all values matching the search value and returns the list of all matches.\n \n @param search The search string e.g `name`\n \n @param objects The list of objects to be searched in\n \n @return The list of objects that match the search string\n /\nexport const SimpleSearch = (search: string, objects: string[]) => {\n return SimpleSearchWithMapping(search, objects, value => value)\n}\n","import { useRef, type PropsWithChildren, type ReactNode, type RefObject } from 'react'\nimport clsx from 'clsx'\nimport { useOutsideClick } from '../../hooks/useOutsideClick'\nimport { useHoverState } from '../../hooks/useHoverState'\n\ntype MenuProps<T> = PropsWithChildren<{\n trigger: (onClick: () => void, ref: RefObject<T>) => ReactNode,\n /\n @default 'tl'\n /\n alignment?: 'tl' \| 'tr' \| 'bl' \| 'br' \| '_l' \| '_r' \| 't_' \| 'b_',\n showOnHover?: boolean,\n menuClassName?: string,\n}>\n\nexport type MenuItemProps = {\n onClick?: () => void,\n alignment?: 'left' \| 'right',\n className?: string,\n}\nconst MenuItem = ({\n children,\n onClick,\n alignment = 'left',\n className\n}: PropsWithChildren<MenuItemProps>) => (\n <div\n className={clsx('block px-3 py-1 bg-menu-background text-menu-text hover:brightness-90', {\n 'text-right': alignment === 'right',\n 'text-left': alignment === 'left',\n }, className)}\n onClick={onClick}\n >\n {children}\n </div>\n)\n\n// TODO: it is quite annoying that the type for the ref has to be specified manually, is there some solution around this?\n/\n A Menu Component to allow the user to see different functions\n /\nconst Menu = <T extends HTMLElement>({\n trigger,\n children,\n alignment = 'tl',\n showOnHover = false,\n menuClassName = '',\n}: MenuProps<T>) => {\n const { isHovered: isOpen, setIsHovered: setIsOpen, handlers } = useHoverState({ isDisabled: !showOnHover })\n const triggerRef = useRef<T>(null)\n const menuRef = useRef<HTMLDivElement>(null)\n useOutsideClick([triggerRef, menuRef], () => setIsOpen(false))\n\n return (\n <div\n className=\"relative\"\n {...handlers}\n >\n {trigger(() => setIsOpen(!isOpen), triggerRef)}\n {isOpen ? (\n <div ref={menuRef} onClick={e => e.stopPropagation()}\n 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]', {\n ' top-[8px]': alignment[0] === 't',\n ' bottom-[8px]': alignment[0] === 'b',\n ' left-[-8px]': alignment[1] === 'l',\n ' right-[-8px]': alignment[1] === 'r',\n }, menuClassName)}>\n {children}\n </div>\n ) : null}\n </div>\n )\n}\n\nexport { Menu, MenuItem }\n","import { useEffect } from 'react'\nimport type { RefObject } from 'react'\n\nexport const useOutsideClick = <Ts extends RefObject<HTMLElement>[]>(refs: Ts, handler: () => void) => {\n useEffect(() => {\n const listener = (event: MouseEvent \| TouchEvent) => {\n // returning means not \"not clicking outside\"\n\n // if no target exists, return\n if (event.target === null) return\n // if the target is a ref's element or descendent thereof, return\n if (refs.some((ref) => !ref.current \|\| ref.current.contains(event.target as Node))) {\n return\n }\n\n handler()\n }\n document.addEventListener('mousedown', listener)\n document.addEventListener('touchstart', listener)\n return () => {\n document.removeEventListener('mousedown', listener)\n document.removeEventListener('touchstart', listener)\n }\n }, [refs, handler])\n}\n","import type { Dispatch, SetStateAction } from 'react'\nimport { useEffect, useState } from 'react'\n\ntype UseHoverStateProps = {\n /\n The delay after which the menu is closed in milliseconds\n \n default: 200ms\n /\n closingDelay: number,\n /\n Whether the hover state management should be disabled\n \n default: false\n /\n isDisabled: boolean,\n}\n\ntype UseHoverStateReturnType = {\n /\n Whether the element is hovered\n /\n isHovered: boolean,\n /\n Function to change the current hover status\n /\n setIsHovered: Dispatch<SetStateAction<boolean>>,\n /\n Handlers to pass on to the component that should be hovered\n /\n handlers: {\n onMouseEnter: () => void,\n onMouseLeave: () => void,\n },\n}\n\nconst defaultUseHoverStateProps: UseHoverStateProps = {\n closingDelay: 200,\n isDisabled: false,\n}\n\n/\n @param props See UseHoverStateProps\n \n A react hook for managing the hover state of a component. The handlers provided should be\n * forwarded to the component which should be hovered over\n /\nexport const useHoverState = (props: Partial<UseHoverStateProps> \| undefined = undefined): UseHoverStateReturnType => {\n const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props }\n\n const [isHovered, setIsHovered] = useState(false)\n const [timer, setTimer] = useState<NodeJS.Timeout>()\n\n const onMouseEnter = () => {\n if (isDisabled) {\n return\n }\n clearTimeout(timer)\n setIsHovered(true)\n }\n\n const onMouseLeave = () => {\n if (isDisabled) {\n return\n }\n setTimer(setTimeout(() => {\n setIsHovered(false)\n }, closingDelay))\n }\n\n useEffect(() => {\n if (timer) {\n return () => {\n clearTimeout(timer)\n }\n }\n })\n\n useEffect(() => {\n if (timer) {\n clearTimeout(timer)\n }\n }, [isDisabled]) // eslint-disable-line react-hooks/exhaustive-deps\n\n return {\n isHovered, setIsHovered, handlers: { onMouseEnter, onMouseLeave }\n }\n}\n","import React, {\n useEffect,\n useRef,\n useState,\n type ChangeEvent,\n type HTMLInputTypeAttribute,\n type InputHTMLAttributes, forwardRef\n} from 'react'\nimport clsx from 'clsx'\nimport useSaveDelay from '../../hooks/useSaveDelay'\nimport { noop } from '../../util/noop'\nimport type { LabelProps } from './Label'\nimport { Label } from './Label'\n\nexport type InputProps = {\n /\n used for the label's `for` attribute\n /\n id?: string,\n value: string,\n label?: Omit<LabelProps, 'id'>,\n /\n @default 'text'\n /\n type?: HTMLInputTypeAttribute,\n /\n Callback for when the input's value changes\n * This is pretty much required but made optional for the rare cases where it actually isn't need such as when used with disabled\n * That could be enforced through a union type but that seems a bit overkill\n * @default noop\n /\n onChange?: (text: string, event: ChangeEvent<HTMLInputElement>) => void,\n onChangeEvent?: (event: ChangeEvent<HTMLInputElement>) => void,\n className?: string,\n onEditCompleted?: (text: string, event: ChangeEvent<HTMLInputElement>) => void,\n expanded?: boolean,\n containerClassName?: string,\n} & Omit<InputHTMLAttributes<HTMLInputElement>, 'id' \| 'value' \| 'label' \| 'type' \| 'onChange' \| 'crossOrigin'>\n\n/\n A Component for inputting text or other information\n \n Its state is managed must be managed by the parent\n /\nconst ControlledInput = ({\n id,\n type = 'text',\n value,\n label,\n onChange = noop,\n onChangeEvent = noop,\n className = '',\n onEditCompleted,\n expanded = true,\n onBlur,\n containerClassName,\n ...restProps\n }: InputProps) => {\n const {\n restartTimer,\n clearUpdateTimer\n } = useSaveDelay(() => undefined, 3000)\n const ref = useRef<HTMLInputElement>(null)\n\n useEffect(() => {\n if (restProps.autoFocus) {\n ref.current?.focus()\n }\n }, [restProps.autoFocus])\n return (\n <div className={clsx({ 'w-full': expanded }, containerClassName)}>\n {label && <Label {...label} htmlFor={id} className={clsx('mb-1', label.className)}/>}\n <input\n ref={ref}\n value={value}\n id={id}\n type={type}\n 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)}\n onBlur={event => {\n if (onBlur) {\n onBlur(event)\n }\n if (onEditCompleted) {\n onEditCompleted(event.target.value, event)\n clearUpdateTimer()\n }\n }}\n onChange={e => {\n const value = e.target.value\n if (onEditCompleted) {\n restartTimer(() => {\n onEditCompleted(value, e)\n clearUpdateTimer()\n })\n }\n onChange(value, e)\n onChangeEvent(e)\n }}\n {...restProps}\n />\n </div>\n )\n}\n\ntype UncontrolledInputProps = Omit<InputProps, 'value'> & {\n /\n @default ''\n /\n defaultValue?: string,\n}\n\n/\n A Component for inputting text or other information\n \n Its state is managed by the component itself\n /\nconst UncontrolledInput = ({\n defaultValue = '',\n onChange = noop,\n ...props\n }: UncontrolledInputProps) => {\n const [value, setValue] = useState(defaultValue)\n\n const handleChange = (text: string, event: ChangeEvent<HTMLInputElement>) => {\n setValue(text)\n onChange(text, event)\n }\n\n return (\n <ControlledInput\n {...props}\n value={value}\n onChange={handleChange}\n />\n )\n}\n\nexport type FormInputProps = InputHTMLAttributes<HTMLInputElement> & {\n id: string,\n labelText?: string,\n errorText?: string,\n labelClassName?: string,\n errorClassName?: string,\n containerClassName?: string,\n}\n\nconst FormInput = forwardRef<HTMLInputElement, FormInputProps>(function FormInput({\n id,\n labelText,\n errorText,\n className,\n labelClassName,\n errorClassName,\n containerClassName,\n required,\n ...restProps\n }, ref) {\n const input = (\n <input\n ref={ref}\n id={id}\n {...restProps}\n className={clsx(\n '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',\n {\n 'focus:border-primary focus:ring-primary': !errorText,\n 'focus:border-negative focus:ring-negative text-negative': !!errorText,\n },\n className\n )}\n />\n )\n\n return (\n <div className={clsx('flex flex-col gap-y-1', containerClassName)}>\n {labelText && (\n <label htmlFor={id} className={clsx('textstyle-label-md', labelClassName)}>\n {labelText}\n {required && <span className=\"text-primary font-bold\"></span>}\n </label>\n )}\n {input}\n {errorText && <label htmlFor={id} className={clsx('text-negative', errorClassName)}>{errorText}</label>}\n </div>\n )\n})\n\nexport {\n UncontrolledInput,\n ControlledInput as Input,\n FormInput\n}\n","import { useEffect, useState } from 'react'\n\nfunction useSaveDelay(setNotificationStatus: (isShowing: boolean) => void, delay: number) {\n const [updateTimer, setUpdateTimer] = useState<NodeJS.Timeout \| undefined>(undefined)\n const [notificationTimer, setNotificationTimer] = useState<NodeJS.Timeout \| undefined>(undefined)\n\n const restartTimer = (onSave: () => void) => {\n clearTimeout(updateTimer)\n setUpdateTimer(setTimeout(() => {\n onSave()\n setNotificationStatus(true)\n // Show Saved Notification for fade animation duration\n clearTimeout(notificationTimer)\n setNotificationTimer(setTimeout(() => {\n setNotificationStatus(false)\n clearTimeout(notificationTimer)\n }, delay))\n clearTimeout(updateTimer)\n }, delay))\n }\n\n const clearUpdateTimer = (hasSaved = true) => {\n clearTimeout(updateTimer)\n if (hasSaved) {\n setNotificationStatus(true)\n clearTimeout(notificationTimer)\n setNotificationTimer(setTimeout(() => {\n setNotificationStatus(false)\n clearTimeout(notificationTimer)\n }, delay))\n } else {\n setNotificationStatus(false)\n }\n }\n\n useEffect(() => {\n return () => {\n clearTimeout(updateTimer)\n clearTimeout(notificationTimer)\n }\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return { restartTimer, clearUpdateTimer }\n}\n\nexport default useSaveDelay\n","export const noop = () => undefined\n","import type { LabelHTMLAttributes } from 'react'\n\nexport type LabelType = 'labelSmall' \| 'labelMedium' \| 'labelBig'\nconst styleMapping: Record<LabelType, string> = {\n labelSmall: 'textstyle-label-sm',\n labelMedium: 'textstyle-label-md',\n labelBig: 'textstyle-label-lg',\n}\n\n\nexport type LabelProps = {\n /** The text for the label /\n name?: string,\n /* The styling for the label /\n labelType?: LabelType,\n} & LabelHTMLAttributes<HTMLLabelElement>\n\n/\n A Label component\n /\nexport const Label = ({\n children,\n name,\n labelType = 'labelSmall',\n ...props\n}: LabelProps) => {\n return (\n <label {...props}>\n {children ? children : (<span className={styleMapping[labelType]}>{name}</span>)}\n </label>\n )\n}\n","import { useState } from 'react'\nimport as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport type { CheckedState } from '@radix-ui/react-checkbox'\nimport { Check, Minus } from 'lucide-react'\nimport clsx from 'clsx'\nimport type { LabelProps } from './Label'\nimport { Label } from './Label'\n\ntype CheckBoxSize = 'small' \| 'medium' \| 'large'\n\nconst checkboxSizeMapping: Record<CheckBoxSize, string> = {\n small: 'size-4',\n medium: 'size-6',\n large: 'size-8',\n}\n\nconst checkboxIconSizeMapping: Record<CheckBoxSize, string> = {\n small: 'size-3',\n medium: 'size-5',\n large: 'size-7',\n}\n\ntype CheckboxProps = {\n /** used for the label's `for` attribute /\n id?: string,\n label?: Omit<LabelProps, 'id'>,\n /\n @default false\n /\n checked: CheckedState,\n disabled?: boolean,\n onChange?: (checked: boolean) => void,\n onChangeTristate?: (checked: CheckedState) => void,\n size?: CheckBoxSize,\n className?: string,\n containerClassName?: string,\n}\n\n/\n A Tristate checkbox\n \n The state is managed by the parent\n /\nconst ControlledCheckbox = ({\n id,\n label,\n checked,\n disabled,\n onChange,\n onChangeTristate,\n size = 'medium',\n className = '',\n containerClassName\n }: CheckboxProps) => {\n const usedSizeClass = checkboxSizeMapping[size]\n const innerIconSize = checkboxIconSizeMapping[size]\n\n const propagateChange = (checked: CheckedState) => {\n if (onChangeTristate) {\n onChangeTristate(checked)\n }\n if (onChange) {\n onChange(checked === 'indeterminate' ? false : checked)\n }\n }\n\n const changeValue = () => {\n const newValue = checked === 'indeterminate' ? false : !checked\n propagateChange(newValue)\n }\n\n return (\n <div className={clsx('row justify-center items-center', containerClassName)}>\n <CheckboxPrimitive.Root\n onCheckedChange={propagateChange}\n checked={checked}\n disabled={disabled}\n id={id}\n className={clsx(usedSizeClass, `items-center border-2 rounded outline-none focus:border-primary`, {\n 'text-disabled-text border-disabled-text': disabled,\n 'border-on-background': !disabled,\n 'bg-primary/30 border-primary text-primary': checked === true \|\| checked === 'indeterminate',\n 'hover:border-gray-400 focus:hover:border-primary': !checked\n }, className)}\n >\n <CheckboxPrimitive.Indicator>\n {checked === true && <Check className={innerIconSize}/>}\n {checked === 'indeterminate' && <Minus className={innerIconSize}/>}\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n {label &&\n <Label {...label} className={clsx('cursor-pointer', label.className)} htmlFor={id} onClick={changeValue}/>}\n </div>\n )\n}\n\ntype UncontrolledCheckboxProps = Omit<CheckboxProps, 'value' \| 'checked'> & {\n /\n @default false\n /\n defaultValue?: CheckedState,\n}\n\n/\n A Tristate checkbox\n \n The state is managed by this component\n */\nconst UncontrolledCheckbox = ({\n onChange,\n onChangeTristate,\n defaultValue = false,\n ...props\n }: UncontrolledCheckboxProps) => {\n const [checked, setChecked] = useState(defaultValue)\n\n const handleChange = (checked: CheckedState) => {\n if (onChangeTristate) {\n onChangeTristate(checked)\n }\n if (onChange) {\n onChange(checked === 'indeterminate' ? false : checked)\n }\n setChecked(checked)\n }\n\n return (\n <ControlledCheckbox\n {...props}\n checked={checked}\n onChangeTristate={handleChange}\n />\n )\n}\n\nexport {\n UncontrolledCheckbox,\n ControlledCheckbox as Checkbox\n}\n"],"mappings":"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","names":["import_react","import_lucide_react","import_react","import_clsx","import_react","import_react","import_react","import_jsx_runtime","clsx","import_react","import_clsx","import_react","import_jsx_runtime","import_jsx_runtime","clsx","value","FormInput","clsx","import_react","import_clsx","import_jsx_runtime","checked","clsx","import_jsx_runtime","clsx"]}
1	+ {"version":3,"sources":["../../../src/components/user-input/MultiSelect.tsx","../../../src/hooks/useLanguage.tsx","../../../src/hooks/useLocalStorage.tsx","../../../src/hooks/useTranslation.ts","../../../src/util/simpleSearch.ts","../../../src/components/user-input/Menu.tsx","../../../src/hooks/useOutsideClick.ts","../../../src/hooks/useHoverState.ts","../../../src/components/user-input/Input.tsx","../../../src/hooks/useSaveDelay.ts","../../../src/util/noop.ts","../../../src/components/user-input/Label.tsx","../../../src/components/user-input/Checkbox.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { useState } from 'react'\nimport { Search } from 'lucide-react'\nimport { useTranslation } from '../../hooks/useTranslation'\nimport type { PropsForTranslation } from '../../hooks/useTranslation'\nimport type { Languages } from '../../hooks/useLanguage'\nimport { MultiSearchWithMapping } from '../../util/simpleSearch'\nimport clsx from 'clsx'\nimport { Menu, MenuItem } from './Menu'\nimport { Input } from './Input'\nimport { Checkbox } from './Checkbox'\nimport type { LabelProps } from './Label'\nimport { Label } from './Label'\n\ntype MultiSelectTranslation = {\n select: string,\n search: string,\n selected: string,\n}\n\nconst defaultMultiSelectTranslation: Record<Languages, MultiSelectTranslation> = {\n en: {\n select: 'Select',\n search: 'Search',\n selected: 'selected'\n },\n de: {\n select: 'Auswählen',\n search: 'Suche',\n selected: 'ausgewählt'\n }\n}\n\n// TODO maybe add custom item builder here\nexport type MultiSelectOption<T> = {\n label: string,\n value: T,\n selected: boolean,\n disabled?: boolean,\n className?: string,\n}\n\nexport type SearchProps<T> = {\n initialSearch?: string,\n searchMapping: (value: MultiSelectOption<T>) => string[],\n}\n\nexport type MultiSelectProps<T> = {\n options: MultiSelectOption<T>[],\n onChange: (options: MultiSelectOption<T>[]) => void,\n search?: SearchProps<T>,\n disabled?: boolean,\n selectedDisplay?: (props: {\n items: MultiSelectOption<T>[],\n disabled: boolean,\n }) => ReactNode,\n label?: LabelProps,\n hintText?: string,\n showDisabledOptions?: boolean,\n className?: string,\n triggerClassName?: string,\n}\n\n/*\n A Component for multi selection\n /\nexport const MultiSelect = <T, >({\n overwriteTranslation,\n options,\n onChange,\n search,\n disabled = false,\n selectedDisplay,\n label,\n hintText,\n showDisabledOptions = true,\n className = '',\n triggerClassName = '',\n }: PropsForTranslation<MultiSelectTranslation, MultiSelectProps<T>>) => {\n const translation = useTranslation(defaultMultiSelectTranslation, overwriteTranslation)\n const [searchText, setSearchText] = useState<string>(search?.initialSearch ?? '')\n let filteredOptions: MultiSelectOption<T>[] = options\n const enableSearch = !!search\n if (enableSearch && !!searchText) {\n filteredOptions = MultiSearchWithMapping<MultiSelectOption<T>>(\n searchText,\n filteredOptions,\n value => search.searchMapping(value)\n )\n }\n if (!showDisabledOptions) {\n filteredOptions = filteredOptions.filter(value => !value.disabled)\n }\n\n const selectedItems = options.filter(value => value.selected)\n const menuButtonText = selectedItems.length === 0 ?\n hintText ?? translation.select\n : <span>{`${selectedItems.length} ${translation.selected}`}</span>\n\n const borderColor = 'border-menu-border'\n\n return (\n <div className={clsx(className)}>\n {label && (\n <Label {...label} htmlFor={label.name} className={clsx(' mb-1', label.className)}\n labelType={label.labelType ?? 'labelBig'}/>\n )}\n <Menu<HTMLDivElement>\n alignment=\"t_\"\n trigger={(onClick, ref) => (\n <div ref={ref} onClick={disabled ? undefined : onClick}\n 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',\n {\n 'hover:brightness-90 hover:border-primary cursor-pointer': !disabled,\n 'bg-disabled-background text-disabled cursor-not-allowed': disabled\n },\n triggerClassName)}\n >\n {selectedDisplay ? selectedDisplay({ items: options, disabled }) : menuButtonText}\n </div>\n )}\n menuClassName={clsx(\n '!rounded-lg !shadow-lg !max-h-[500px] !min-w-[400px] !max-w-[70vh] !overflow-y-auto !border !border-2', borderColor,\n { '!py-0': !enableSearch, '!pb-0': enableSearch }\n )}\n >\n {enableSearch && (\n <div key=\"selectSearch\" className=\"row gap-x-2 items-center px-2 py-2\">\n <Input autoFocus={true} value={searchText} onChange={setSearchText}/>\n <Search/>\n </div>\n )}\n {filteredOptions.map((option, index) => (\n <MenuItem key={`item${index}`} className={clsx({\n 'cursor-not-allowed !bg-disabled-background !text-disabled-text hover:brightness-100': !!option.disabled,\n 'cursor-pointer': !option.disabled,\n })}\n >\n <div\n className={clsx('overflow-hidden whitespace-nowrap text-ellipsis row items-center gap-x-2', option.className)}\n onClick={() => {\n if (!option.disabled) {\n onChange(options.map(value => value.value === option.value ? ({\n ...option,\n selected: !value.selected\n }) : value))\n }\n }}\n >\n <Checkbox checked={option.selected} disabled={option.disabled} size=\"small\"/>\n {option.label}\n </div>\n </MenuItem>\n ))}\n </Menu>\n </div>\n )\n}\n","import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport { useLocalStorage } from './useLocalStorage'\n\nexport const languages = ['en', 'de'] as const\nexport type Languages = typeof languages[number]\nexport const languagesLocalNames: Record<Languages, string> = {\n en: 'English',\n de: 'Deutsch',\n}\n\nexport const DEFAULT_LANGUAGE = 'en'\n\nexport type LanguageContextValue = {\n language: Languages,\n setLanguage: Dispatch<SetStateAction<Languages>>,\n}\n\nexport const LanguageContext = createContext<LanguageContextValue>({ language: DEFAULT_LANGUAGE, setLanguage: (v) => v })\n\nexport const useLanguage = () => useContext(LanguageContext)\n\nexport const useLocale = (overWriteLanguage?: Languages) => {\n const { language } = useLanguage()\n const mapping: Record<Languages, string> = {\n en: 'en-US',\n de: 'de-DE'\n }\n return mapping[overWriteLanguage ?? language]\n}\n\ntype ProvideLanguageProps = {\n initialLanguage?: Languages,\n}\n\nexport const ProvideLanguage = ({ initialLanguage, children }: PropsWithChildren<ProvideLanguageProps>) => {\n const [language, setLanguage] = useState<Languages>(initialLanguage ?? DEFAULT_LANGUAGE)\n const [storedLanguage, setStoredLanguage] = useLocalStorage<Languages>('language', initialLanguage ?? DEFAULT_LANGUAGE)\n\n useEffect(() => {\n if(language !== initialLanguage && initialLanguage){\n console.warn('LanguageProvider initial state changed: Prefer using useLanguages\\'s setLanguage instead')\n setLanguage(initialLanguage)\n }\n }, [initialLanguage]) // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n // TODO set locale of html tag here as well\n setStoredLanguage(language)\n }, [language, setStoredLanguage])\n\n useEffect(() => {\n if (storedLanguage !== null) {\n setLanguage(storedLanguage)\n return\n }\n\n const languagesToTestAgainst = Object.values(languages)\n\n const matchingBrowserLanguages = window.navigator.languages\n .map(language => languagesToTestAgainst.find((test) => language === test \|\| language.split('-')[0] === test))\n .filter(entry => entry !== undefined)\n\n if (matchingBrowserLanguages.length === 0) return\n\n const firstMatch = matchingBrowserLanguages[0] as Languages\n setLanguage(firstMatch)\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n <LanguageContext.Provider value={{\n language,\n setLanguage\n }}>\n {children}\n </LanguageContext.Provider>\n )\n}\n","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T, >(key: string, initValue: T): [T, SetValue<T>] => {\n const get = useCallback((): T => {\n if (typeof window === 'undefined') {\n return initValue\n }\n const storageService = new LocalStorageService()\n const value = storageService.get<T>(key)\n return value \|\| initValue\n }, [initValue, key])\n\n const [storedValue, setStoredValue] = useState<T>(get)\n\n const setValue: SetValue<T> = useCallback(value => {\n const newValue = value instanceof Function ? value(storedValue) : value\n const storageService = new LocalStorageService()\n storageService.set(key, value)\n\n setStoredValue(newValue)\n }, [storedValue, setStoredValue, key])\n\n useEffect(() => {\n setStoredValue(get())\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return [storedValue, setValue]\n}","import type { Languages } from './useLanguage'\nimport { useLanguage } from './useLanguage'\n\nexport type Translation<T> = Record<Languages, T>\n\ntype OverwriteTranslationType<Translation extends Record<string, unknown>> = {\n language?: Languages,\n translation?: Partial<Record<Languages, Partial<Translation>>>,\n}\n\n/\n Adds the `language` prop to the component props.\n \n @param Translation the type of the translation object\n \n @param Props the type of the component props, defaults to `Record<string, never>`,\n * if you don't expect any other props other than `language` and get an\n * error when using your component (because it uses `forwardRef` etc.)\n * you can try out `Record<string, unknown>`, this might resolve your\n * problem as `SomeType & never` is still `never` but `SomeType & unknown`\n * is `SomeType` which means that adding back props (like `ref` etc.)\n * works properly\n /\nexport type PropsForTranslation<\n Translation extends Record<string, unknown>,\n Props = Record<string, never>\n> = Props & {\n overwriteTranslation?: OverwriteTranslationType<Translation>,\n};\n\nexport const useTranslation = <Translation extends Record<string, unknown>>(\n defaults: Record<Languages, Translation>,\n translationOverwrite: OverwriteTranslationType<Translation> = {}\n) : Translation => {\n const { language: languageProp, translation: overwrite } = translationOverwrite\n const { language: inferredLanguage } = useLanguage()\n const usedLanguage = languageProp ?? inferredLanguage\n let defaultValues: Translation = defaults[usedLanguage]\n if (overwrite && overwrite[usedLanguage]) {\n defaultValues = { ...defaultValues, ...overwrite[usedLanguage] }\n }\n return defaultValues\n}\n","/\n Finds all values matching the search values by first mapping the values to a string array and then checking each entry for matches.\n * Returns the list of all matches.\n \n @param search The list of search strings e.g. `[name, type]`\n \n @param objects The list of objects to be searched in\n \n @param mapping The mapping of objects to the string properties they fulfil\n \n @return The list of objects that match all search strings\n /\nexport const MultiSubjectSearchWithMapping = <T>(search: string[], objects: T[], mapping: (value:T) => (string\| undefined)[]) => {\n return objects.filter(object => {\n const mappedSearchKeywords = mapping(object).map(value => value ? value.toLowerCase().trim() : undefined)\n return search.every(searchValue => !!mappedSearchKeywords.find(value => !!value && value.includes(searchValue.toLowerCase().trim())))\n })\n}\n\n/\n Finds all values matching the search value by first mapping the values to a string array and then checking each entry for matches.\n * Returns the list of all matches.\n \n @param search The search string e.g `name`\n \n @param objects The list of objects to be searched in\n \n @param mapping The mapping of objects to the string properties they fulfil\n \n @return The list of objects that match the search string\n /\nexport const MultiSearchWithMapping = <T>(search: string, objects: T[], mapping: (value:T) => string[]) => {\n return objects.filter(object => {\n const mappedSearchKeywords = mapping(object).map(value => value.toLowerCase().trim())\n return !!mappedSearchKeywords.find(value => value.includes(search.toLowerCase().trim()))\n })\n}\n\n/\n Finds all values matching the search value by first mapping the values to a string and returns the list of all matches.\n \n @param search The search string e.g `name`\n \n @param objects The list of objects to be searched in\n \n @param mapping The mapping of objects to a string that is compared to the search\n \n @return The list of objects that match the search string\n /\nexport const SimpleSearchWithMapping = <T>(search: string, objects: T[], mapping: (value:T) => string) => {\n return MultiSearchWithMapping(search, objects, value => [mapping(value)])\n}\n\n/\n Finds all values matching the search value and returns the list of all matches.\n \n @param search The search string e.g `name`\n \n @param objects The list of objects to be searched in\n \n @return The list of objects that match the search string\n /\nexport const SimpleSearch = (search: string, objects: string[]) => {\n return SimpleSearchWithMapping(search, objects, value => value)\n}\n","import { useRef, type PropsWithChildren, type ReactNode, type RefObject } from 'react'\nimport clsx from 'clsx'\nimport { useOutsideClick } from '../../hooks/useOutsideClick'\nimport { useHoverState } from '../../hooks/useHoverState'\n\ntype MenuProps<T> = PropsWithChildren<{\n trigger: (onClick: () => void, ref: RefObject<T>) => ReactNode,\n /\n @default 'tl'\n /\n alignment?: 'tl' \| 'tr' \| 'bl' \| 'br' \| '_l' \| '_r' \| 't_' \| 'b_',\n showOnHover?: boolean,\n menuClassName?: string,\n}>\n\nexport type MenuItemProps = {\n onClick?: () => void,\n alignment?: 'left' \| 'right',\n className?: string,\n}\nconst MenuItem = ({\n children,\n onClick,\n alignment = 'left',\n className\n}: PropsWithChildren<MenuItemProps>) => (\n <div\n className={clsx('block px-3 py-1 bg-menu-background text-menu-text hover:brightness-90', {\n 'text-right': alignment === 'right',\n 'text-left': alignment === 'left',\n }, className)}\n onClick={onClick}\n >\n {children}\n </div>\n)\n\n// TODO: it is quite annoying that the type for the ref has to be specified manually, is there some solution around this?\n/\n A Menu Component to allow the user to see different functions\n /\nconst Menu = <T extends HTMLElement>({\n trigger,\n children,\n alignment = 'tl',\n showOnHover = false,\n menuClassName = '',\n}: MenuProps<T>) => {\n const { isHovered: isOpen, setIsHovered: setIsOpen, handlers } = useHoverState({ isDisabled: !showOnHover })\n const triggerRef = useRef<T>(null)\n const menuRef = useRef<HTMLDivElement>(null)\n useOutsideClick([triggerRef, menuRef], () => setIsOpen(false))\n\n return (\n <div\n className=\"relative\"\n {...handlers}\n >\n {trigger(() => setIsOpen(!isOpen), triggerRef)}\n {isOpen ? (\n <div ref={menuRef} onClick={e => e.stopPropagation()}\n 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]', {\n ' top-[8px]': alignment[0] === 't',\n ' bottom-[8px]': alignment[0] === 'b',\n ' left-[-8px]': alignment[1] === 'l',\n ' right-[-8px]': alignment[1] === 'r',\n }, menuClassName)}>\n {children}\n </div>\n ) : null}\n </div>\n )\n}\n\nexport { Menu, MenuItem }\n","import { useEffect } from 'react'\nimport type { RefObject } from 'react'\n\nexport const useOutsideClick = <Ts extends RefObject<HTMLElement>[]>(refs: Ts, handler: () => void) => {\n useEffect(() => {\n const listener = (event: MouseEvent \| TouchEvent) => {\n // returning means not \"not clicking outside\"\n\n // if no target exists, return\n if (event.target === null) return\n // if the target is a ref's element or descendent thereof, return\n if (refs.some((ref) => !ref.current \|\| ref.current.contains(event.target as Node))) {\n return\n }\n\n handler()\n }\n document.addEventListener('mousedown', listener)\n document.addEventListener('touchstart', listener)\n return () => {\n document.removeEventListener('mousedown', listener)\n document.removeEventListener('touchstart', listener)\n }\n }, [refs, handler])\n}\n","import type { Dispatch, SetStateAction } from 'react'\nimport { useEffect, useState } from 'react'\n\ntype UseHoverStateProps = {\n /\n The delay after which the menu is closed in milliseconds\n \n default: 200ms\n /\n closingDelay: number,\n /\n Whether the hover state management should be disabled\n \n default: false\n /\n isDisabled: boolean,\n}\n\ntype UseHoverStateReturnType = {\n /\n Whether the element is hovered\n /\n isHovered: boolean,\n /\n Function to change the current hover status\n /\n setIsHovered: Dispatch<SetStateAction<boolean>>,\n /\n Handlers to pass on to the component that should be hovered\n /\n handlers: {\n onMouseEnter: () => void,\n onMouseLeave: () => void,\n },\n}\n\nconst defaultUseHoverStateProps: UseHoverStateProps = {\n closingDelay: 200,\n isDisabled: false,\n}\n\n/\n @param props See UseHoverStateProps\n \n A react hook for managing the hover state of a component. The handlers provided should be\n * forwarded to the component which should be hovered over\n /\nexport const useHoverState = (props: Partial<UseHoverStateProps> \| undefined = undefined): UseHoverStateReturnType => {\n const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props }\n\n const [isHovered, setIsHovered] = useState(false)\n const [timer, setTimer] = useState<NodeJS.Timeout>()\n\n const onMouseEnter = () => {\n if (isDisabled) {\n return\n }\n clearTimeout(timer)\n setIsHovered(true)\n }\n\n const onMouseLeave = () => {\n if (isDisabled) {\n return\n }\n setTimer(setTimeout(() => {\n setIsHovered(false)\n }, closingDelay))\n }\n\n useEffect(() => {\n if (timer) {\n return () => {\n clearTimeout(timer)\n }\n }\n })\n\n useEffect(() => {\n if (timer) {\n clearTimeout(timer)\n }\n }, [isDisabled]) // eslint-disable-line react-hooks/exhaustive-deps\n\n return {\n isHovered, setIsHovered, handlers: { onMouseEnter, onMouseLeave }\n }\n}\n","import React, {\n useEffect,\n useRef,\n useState,\n type ChangeEvent,\n type HTMLInputTypeAttribute,\n type InputHTMLAttributes, forwardRef\n} from 'react'\nimport clsx from 'clsx'\nimport { useSaveDelay } from '../../hooks/useSaveDelay'\nimport { noop } from '../../util/noop'\nimport type { LabelProps } from './Label'\nimport { Label } from './Label'\n\nexport type InputProps = {\n /\n used for the label's `for` attribute\n /\n id?: string,\n value: string,\n label?: Omit<LabelProps, 'id'>,\n /\n @default 'text'\n /\n type?: HTMLInputTypeAttribute,\n /\n Callback for when the input's value changes\n * This is pretty much required but made optional for the rare cases where it actually isn't need such as when used with disabled\n * That could be enforced through a union type but that seems a bit overkill\n * @default noop\n /\n onChange?: (text: string, event: ChangeEvent<HTMLInputElement>) => void,\n onChangeEvent?: (event: ChangeEvent<HTMLInputElement>) => void,\n className?: string,\n onEditCompleted?: (text: string, event: ChangeEvent<HTMLInputElement>) => void,\n expanded?: boolean,\n containerClassName?: string,\n} & Omit<InputHTMLAttributes<HTMLInputElement>, 'id' \| 'value' \| 'label' \| 'type' \| 'onChange' \| 'crossOrigin'>\n\n/\n A Component for inputting text or other information\n \n Its state is managed must be managed by the parent\n /\nconst ControlledInput = ({\n id,\n type = 'text',\n value,\n label,\n onChange = noop,\n onChangeEvent = noop,\n className = '',\n onEditCompleted,\n expanded = true,\n onBlur,\n containerClassName,\n ...restProps\n }: InputProps) => {\n const {\n restartTimer,\n clearUpdateTimer\n } = useSaveDelay(() => undefined, 3000)\n const ref = useRef<HTMLInputElement>(null)\n\n useEffect(() => {\n if (restProps.autoFocus) {\n ref.current?.focus()\n }\n }, [restProps.autoFocus])\n return (\n <div className={clsx({ 'w-full': expanded }, containerClassName)}>\n {label && <Label {...label} htmlFor={id} className={clsx('mb-1', label.className)}/>}\n <input\n ref={ref}\n value={value}\n id={id}\n type={type}\n 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)}\n onBlur={event => {\n if (onBlur) {\n onBlur(event)\n }\n if (onEditCompleted) {\n onEditCompleted(event.target.value, event)\n clearUpdateTimer()\n }\n }}\n onChange={e => {\n const value = e.target.value\n if (onEditCompleted) {\n restartTimer(() => {\n onEditCompleted(value, e)\n clearUpdateTimer()\n })\n }\n onChange(value, e)\n onChangeEvent(e)\n }}\n {...restProps}\n />\n </div>\n )\n}\n\ntype UncontrolledInputProps = Omit<InputProps, 'value'> & {\n /\n @default ''\n /\n defaultValue?: string,\n}\n\n/\n A Component for inputting text or other information\n \n Its state is managed by the component itself\n /\nconst UncontrolledInput = ({\n defaultValue = '',\n onChange = noop,\n ...props\n }: UncontrolledInputProps) => {\n const [value, setValue] = useState(defaultValue)\n\n const handleChange = (text: string, event: ChangeEvent<HTMLInputElement>) => {\n setValue(text)\n onChange(text, event)\n }\n\n return (\n <ControlledInput\n {...props}\n value={value}\n onChange={handleChange}\n />\n )\n}\n\nexport type FormInputProps = InputHTMLAttributes<HTMLInputElement> & {\n id: string,\n labelText?: string,\n errorText?: string,\n labelClassName?: string,\n errorClassName?: string,\n containerClassName?: string,\n}\n\nconst FormInput = forwardRef<HTMLInputElement, FormInputProps>(function FormInput({\n id,\n labelText,\n errorText,\n className,\n labelClassName,\n errorClassName,\n containerClassName,\n required,\n ...restProps\n }, ref) {\n const input = (\n <input\n ref={ref}\n id={id}\n {...restProps}\n className={clsx(\n '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',\n {\n 'focus:border-primary focus:ring-primary': !errorText,\n 'focus:border-negative focus:ring-negative text-negative': !!errorText,\n },\n className\n )}\n />\n )\n\n return (\n <div className={clsx('flex flex-col gap-y-1', containerClassName)}>\n {labelText && (\n <label htmlFor={id} className={clsx('textstyle-label-md', labelClassName)}>\n {labelText}\n {required && <span className=\"text-primary font-bold\"></span>}\n </label>\n )}\n {input}\n {errorText && <label htmlFor={id} className={clsx('text-negative', errorClassName)}>{errorText}</label>}\n </div>\n )\n})\n\nexport {\n UncontrolledInput,\n ControlledInput as Input,\n FormInput\n}\n","import { useEffect, useState } from 'react'\n\nexport function useSaveDelay(setNotificationStatus: (isShowing: boolean) => void, delay: number) {\n const [updateTimer, setUpdateTimer] = useState<NodeJS.Timeout \| undefined>(undefined)\n const [notificationTimer, setNotificationTimer] = useState<NodeJS.Timeout \| undefined>(undefined)\n\n const restartTimer = (onSave: () => void) => {\n clearTimeout(updateTimer)\n setUpdateTimer(setTimeout(() => {\n onSave()\n setNotificationStatus(true)\n // Show Saved Notification for fade animation duration\n clearTimeout(notificationTimer)\n setNotificationTimer(setTimeout(() => {\n setNotificationStatus(false)\n clearTimeout(notificationTimer)\n }, delay))\n clearTimeout(updateTimer)\n }, delay))\n }\n\n const clearUpdateTimer = (hasSaved = true) => {\n clearTimeout(updateTimer)\n if (hasSaved) {\n setNotificationStatus(true)\n clearTimeout(notificationTimer)\n setNotificationTimer(setTimeout(() => {\n setNotificationStatus(false)\n clearTimeout(notificationTimer)\n }, delay))\n } else {\n setNotificationStatus(false)\n }\n }\n\n useEffect(() => {\n return () => {\n clearTimeout(updateTimer)\n clearTimeout(notificationTimer)\n }\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return { restartTimer, clearUpdateTimer }\n}","export const noop = () => undefined\n","import type { LabelHTMLAttributes } from 'react'\n\nexport type LabelType = 'labelSmall' \| 'labelMedium' \| 'labelBig'\nconst styleMapping: Record<LabelType, string> = {\n labelSmall: 'textstyle-label-sm',\n labelMedium: 'textstyle-label-md',\n labelBig: 'textstyle-label-lg',\n}\n\n\nexport type LabelProps = {\n /** The text for the label /\n name?: string,\n /* The styling for the label /\n labelType?: LabelType,\n} & LabelHTMLAttributes<HTMLLabelElement>\n\n/\n A Label component\n /\nexport const Label = ({\n children,\n name,\n labelType = 'labelSmall',\n ...props\n}: LabelProps) => {\n return (\n <label {...props}>\n {children ? children : (<span className={styleMapping[labelType]}>{name}</span>)}\n </label>\n )\n}\n","import { useState } from 'react'\nimport as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport type { CheckedState } from '@radix-ui/react-checkbox'\nimport { Check, Minus } from 'lucide-react'\nimport clsx from 'clsx'\nimport type { LabelProps } from './Label'\nimport { Label } from './Label'\n\ntype CheckBoxSize = 'small' \| 'medium' \| 'large'\n\nconst checkboxSizeMapping: Record<CheckBoxSize, string> = {\n small: 'size-4',\n medium: 'size-6',\n large: 'size-8',\n}\n\nconst checkboxIconSizeMapping: Record<CheckBoxSize, string> = {\n small: 'size-3',\n medium: 'size-5',\n large: 'size-7',\n}\n\ntype CheckboxProps = {\n /** used for the label's `for` attribute /\n id?: string,\n label?: Omit<LabelProps, 'id'>,\n /\n @default false\n /\n checked: CheckedState,\n disabled?: boolean,\n onChange?: (checked: boolean) => void,\n onChangeTristate?: (checked: CheckedState) => void,\n size?: CheckBoxSize,\n className?: string,\n containerClassName?: string,\n}\n\n/\n A Tristate checkbox\n \n The state is managed by the parent\n /\nconst ControlledCheckbox = ({\n id,\n label,\n checked,\n disabled,\n onChange,\n onChangeTristate,\n size = 'medium',\n className = '',\n containerClassName\n }: CheckboxProps) => {\n const usedSizeClass = checkboxSizeMapping[size]\n const innerIconSize = checkboxIconSizeMapping[size]\n\n const propagateChange = (checked: CheckedState) => {\n if (onChangeTristate) {\n onChangeTristate(checked)\n }\n if (onChange) {\n onChange(checked === 'indeterminate' ? false : checked)\n }\n }\n\n const changeValue = () => {\n const newValue = checked === 'indeterminate' ? false : !checked\n propagateChange(newValue)\n }\n\n return (\n <div className={clsx('row justify-center items-center', containerClassName)}>\n <CheckboxPrimitive.Root\n onCheckedChange={propagateChange}\n checked={checked}\n disabled={disabled}\n id={id}\n className={clsx(usedSizeClass, `items-center border-2 rounded outline-none focus:border-primary`, {\n 'text-disabled-text border-disabled-text': disabled,\n 'border-on-background': !disabled,\n 'bg-primary/30 border-primary text-primary': checked === true \|\| checked === 'indeterminate',\n 'hover:border-gray-400 focus:hover:border-primary': !checked\n }, className)}\n >\n <CheckboxPrimitive.Indicator>\n {checked === true && <Check className={innerIconSize}/>}\n {checked === 'indeterminate' && <Minus className={innerIconSize}/>}\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n {label &&\n <Label {...label} className={clsx('cursor-pointer', label.className)} htmlFor={id} onClick={changeValue}/>}\n </div>\n )\n}\n\ntype UncontrolledCheckboxProps = Omit<CheckboxProps, 'value' \| 'checked'> & {\n /\n @default false\n /\n defaultValue?: CheckedState,\n}\n\n/\n A Tristate checkbox\n \n The state is managed by this component\n */\nconst UncontrolledCheckbox = ({\n onChange,\n onChangeTristate,\n defaultValue = false,\n ...props\n }: UncontrolledCheckboxProps) => {\n const [checked, setChecked] = useState(defaultValue)\n\n const handleChange = (checked: CheckedState) => {\n if (onChangeTristate) {\n onChangeTristate(checked)\n }\n if (onChange) {\n onChange(checked === 'indeterminate' ? false : checked)\n }\n setChecked(checked)\n }\n\n return (\n <ControlledCheckbox\n {...props}\n checked={checked}\n onChangeTristate={handleChange}\n />\n )\n}\n\nexport {\n UncontrolledCheckbox,\n ControlledCheckbox as Checkbox\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,IAAAA,gBAAyB;AACzB,IAAAC,uBAAuB;;;ACDvB,IAAAC,gBAA+D;;;ACA/D,mBAAiD;;;ADqE7C;AA3DG,IAAM,mBAAmB;AAOzB,IAAM,sBAAkB,6BAAoC,EAAE,UAAU,kBAAkB,aAAa,CAAC,MAAM,EAAE,CAAC;AAEjH,IAAM,cAAc,UAAM,0BAAW,eAAe;;;AEUpD,IAAM,iBAAiB,CAC5B,UACA,uBAA8D,CAAC,MAC9C;AACjB,QAAM,EAAE,UAAU,cAAc,aAAa,UAAU,IAAI;AAC3D,QAAM,EAAE,UAAU,iBAAiB,IAAI,YAAY;AACnD,QAAM,eAAe,gBAAgB;AACrC,MAAI,gBAA6B,SAAS,YAAY;AACtD,MAAI,aAAa,UAAU,YAAY,GAAG;AACxC,oBAAgB,EAAE,GAAG,eAAe,GAAG,UAAU,YAAY,EAAE;AAAA,EACjE;AACA,SAAO;AACT;;;ACXO,IAAM,yBAAyB,CAAI,QAAgB,SAAc,YAAmC;AACzG,SAAO,QAAQ,OAAO,YAAU;AAC9B,UAAM,uBAAuB,QAAQ,MAAM,EAAE,IAAI,WAAS,MAAM,YAAY,EAAE,KAAK,CAAC;AACpF,WAAO,CAAC,CAAC,qBAAqB,KAAK,WAAS,MAAM,SAAS,OAAO,YAAY,EAAE,KAAK,CAAC,CAAC;AAAA,EACzF,CAAC;AACH;;;AJ7BA,IAAAC,eAAiB;;;AKPjB,IAAAC,gBAA+E;AAC/E,kBAAiB;;;ACDjB,IAAAC,gBAA0B;AAGnB,IAAM,kBAAkB,CAAsC,MAAU,YAAwB;AACrG,+BAAU,MAAM;AACd,UAAM,WAAW,CAAC,UAAmC;AAInD,UAAI,MAAM,WAAW,KAAM;AAE3B,UAAI,KAAK,KAAK,CAAC,QAAQ,CAAC,IAAI,WAAW,IAAI,QAAQ,SAAS,MAAM,MAAc,CAAC,GAAG;AAClF;AAAA,MACF;AAEA,cAAQ;AAAA,IACV;AACA,aAAS,iBAAiB,aAAa,QAAQ;AAC/C,aAAS,iBAAiB,cAAc,QAAQ;AAChD,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,QAAQ;AAClD,eAAS,oBAAoB,cAAc,QAAQ;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,MAAM,OAAO,CAAC;AACpB;;;ACvBA,IAAAC,gBAAoC;AAmCpC,IAAM,4BAAgD;AAAA,EACpD,cAAc;AAAA,EACd,YAAY;AACd;AAQO,IAAM,gBAAgB,CAAC,QAAiD,WAAuC;AACpH,QAAM,EAAE,cAAc,WAAW,IAAI,EAAE,GAAG,2BAA2B,GAAG,MAAM;AAE9E,QAAM,CAAC,WAAW,YAAY,QAAI,wBAAS,KAAK;AAChD,QAAM,CAAC,OAAO,QAAQ,QAAI,wBAAyB;AAEnD,QAAM,eAAe,MAAM;AACzB,QAAI,YAAY;AACd;AAAA,IACF;AACA,iBAAa,KAAK;AAClB,iBAAa,IAAI;AAAA,EACnB;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,YAAY;AACd;AAAA,IACF;AACA,aAAS,WAAW,MAAM;AACxB,mBAAa,KAAK;AAAA,IACpB,GAAG,YAAY,CAAC;AAAA,EAClB;AAEA,+BAAU,MAAM;AACd,QAAI,OAAO;AACT,aAAO,MAAM;AACX,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF;AAAA,EACF,CAAC;AAED,+BAAU,MAAM;AACd,QAAI,OAAO;AACT,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,SAAO;AAAA,IACL;AAAA,IAAW;AAAA,IAAc,UAAU,EAAE,cAAc,aAAa;AAAA,EAClE;AACF;;;AF7DE,IAAAC,sBAAA;AANF,IAAM,WAAW,CAAC;AAAA,EAChB;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IACC,eAAW,YAAAC,SAAK,yEAAyE;AAAA,MACvF,cAAc,cAAc;AAAA,MAC5B,aAAa,cAAc;AAAA,IAC7B,GAAG,SAAS;AAAA,IACZ;AAAA,IAEC;AAAA;AACH;AAOF,IAAM,OAAO,CAAwB;AAAA,EACnC;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,gBAAgB;AAClB,MAAoB;AAClB,QAAM,EAAE,WAAW,QAAQ,cAAc,WAAW,SAAS,IAAI,cAAc,EAAE,YAAY,CAAC,YAAY,CAAC;AAC3G,QAAM,iBAAa,sBAAU,IAAI;AACjC,QAAM,cAAU,sBAAuB,IAAI;AAC3C,kBAAgB,CAAC,YAAY,OAAO,GAAG,MAAM,UAAU,KAAK,CAAC;AAE7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACT,GAAG;AAAA,MAEH;AAAA,gBAAQ,MAAM,UAAU,CAAC,MAAM,GAAG,UAAU;AAAA,QAC5C,SACC;AAAA,UAAC;AAAA;AAAA,YAAI,KAAK;AAAA,YAAS,SAAS,OAAK,EAAE,gBAAgB;AAAA,YAC9C,eAAW,YAAAA,SAAK,yJAAyJ;AAAA,cACvK,iBAAiB,UAAU,CAAC,MAAM;AAAA,cAClC,iBAAiB,UAAU,CAAC,MAAM;AAAA,cAClC,iBAAiB,UAAU,CAAC,MAAM;AAAA,cAClC,iBAAiB,UAAU,CAAC,MAAM;AAAA,YACpC,GAAG,aAAa;AAAA,YAClB;AAAA;AAAA,QACH,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;;;AGxEA,IAAAC,gBAOO;AACP,IAAAC,eAAiB;;;ACRjB,IAAAC,gBAAoC;AAE7B,SAAS,aAAa,uBAAqD,OAAe;AAC/F,QAAM,CAAC,aAAa,cAAc,QAAI,wBAAqC,MAAS;AACpF,QAAM,CAAC,mBAAmB,oBAAoB,QAAI,wBAAqC,MAAS;AAEhG,QAAM,eAAe,CAAC,WAAuB;AAC3C,iBAAa,WAAW;AACxB,mBAAe,WAAW,MAAM;AAC9B,aAAO;AACP,4BAAsB,IAAI;AAE1B,mBAAa,iBAAiB;AAC9B,2BAAqB,WAAW,MAAM;AACpC,8BAAsB,KAAK;AAC3B,qBAAa,iBAAiB;AAAA,MAChC,GAAG,KAAK,CAAC;AACT,mBAAa,WAAW;AAAA,IAC1B,GAAG,KAAK,CAAC;AAAA,EACX;AAEA,QAAM,mBAAmB,CAAC,WAAW,SAAS;AAC5C,iBAAa,WAAW;AACxB,QAAI,UAAU;AACZ,4BAAsB,IAAI;AAC1B,mBAAa,iBAAiB;AAC9B,2BAAqB,WAAW,MAAM;AACpC,8BAAsB,KAAK;AAC3B,qBAAa,iBAAiB;AAAA,MAChC,GAAG,KAAK,CAAC;AAAA,IACX,OAAO;AACL,4BAAsB,KAAK;AAAA,IAC7B;AAAA,EACF;AAEA,+BAAU,MAAM;AACd,WAAO,MAAM;AACX,mBAAa,WAAW;AACxB,mBAAa,iBAAiB;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO,EAAE,cAAc,iBAAiB;AAC1C;;;AC3CO,IAAM,OAAO,MAAM;;;AC4BI,IAAAC,sBAAA;AAzB9B,IAAM,eAA0C;AAAA,EAC9C,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,UAAU;AACZ;AAaO,IAAM,QAAQ,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,MAAkB;AAChB,SACE,6CAAC,WAAO,GAAG,OACR,qBAAW,WAAY,6CAAC,UAAK,WAAW,aAAa,SAAS,GAAI,gBAAK,GAC1E;AAEJ;;;AHuCI,IAAAC,sBAAA;AA1BJ,IAAM,kBAAkB,CAAC;AAAA,EACE;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAkB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI,aAAa,MAAM,QAAW,GAAI;AACtC,QAAM,UAAM,sBAAyB,IAAI;AAEzC,+BAAU,MAAM;AACd,QAAI,UAAU,WAAW;AACvB,UAAI,SAAS,MAAM;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,UAAU,SAAS,CAAC;AACxB,SACE,8CAAC,SAAI,eAAW,aAAAC,SAAK,EAAE,UAAU,SAAS,GAAG,kBAAkB,GAC5D;AAAA,aAAS,6CAAC,SAAO,GAAG,OAAO,SAAS,IAAI,eAAW,aAAAA,SAAK,QAAQ,MAAM,SAAS,GAAE;AAAA,IAClF;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAW,aAAAA,SAAK,yKAAyK,SAAS;AAAA,QAClM,QAAQ,WAAS;AACf,cAAI,QAAQ;AACV,mBAAO,KAAK;AAAA,UACd;AACA,cAAI,iBAAiB;AACnB,4BAAgB,MAAM,OAAO,OAAO,KAAK;AACzC,6BAAiB;AAAA,UACnB;AAAA,QACF;AAAA,QACA,UAAU,OAAK;AACb,gBAAMC,SAAQ,EAAE,OAAO;AACvB,cAAI,iBAAiB;AACnB,yBAAa,MAAM;AACjB,8BAAgBA,QAAO,CAAC;AACxB,+BAAiB;AAAA,YACnB,CAAC;AAAA,UACH;AACA,mBAASA,QAAO,CAAC;AACjB,wBAAc,CAAC;AAAA,QACjB;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,KACF;AAEJ;AA4CA,IAAM,gBAAY,0BAA6C,SAASC,WAAU;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,KAAK;AACxF,QAAM,QACJ;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACJ,eAAW,aAAAC;AAAA,QACT;AAAA,QACA;AAAA,UACE,2CAA2C,CAAC;AAAA,UAC5C,2DAA2D,CAAC,CAAC;AAAA,QAC/D;AAAA,QACA;AAAA,MACA;AAAA;AAAA,EACJ;AAGF,SACE,8CAAC,SAAI,eAAW,aAAAA,SAAK,yBAAyB,kBAAkB,GAC7D;AAAA,iBACC,8CAAC,WAAM,SAAS,IAAI,eAAW,aAAAA,SAAK,sBAAsB,cAAc,GACrE;AAAA;AAAA,MACA,YAAY,6CAAC,UAAK,WAAU,0BAAyB,eAAC;AAAA,OACzD;AAAA,IAED;AAAA,IACA,aAAa,6CAAC,WAAM,SAAS,IAAI,eAAW,aAAAA,SAAK,iBAAiB,cAAc,GAAI,qBAAU;AAAA,KACjG;AAEJ,CAAC;;;AIzLD,IAAAC,gBAAyB;AACzB,wBAAmC;AAEnC,0BAA6B;AAC7B,IAAAC,eAAiB;AAiFT,IAAAC,sBAAA;AA3ER,IAAM,sBAAoD;AAAA,EACxD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAEA,IAAM,0BAAwD;AAAA,EAC5D,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAuBA,IAAM,qBAAqB,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AACF,MAAqB;AAC/C,QAAM,gBAAgB,oBAAoB,IAAI;AAC9C,QAAM,gBAAgB,wBAAwB,IAAI;AAElD,QAAM,kBAAkB,CAACC,aAA0B;AACjD,QAAI,kBAAkB;AACpB,uBAAiBA,QAAO;AAAA,IAC1B;AACA,QAAI,UAAU;AACZ,eAASA,aAAY,kBAAkB,QAAQA,QAAO;AAAA,IACxD;AAAA,EACF;AAEA,QAAM,cAAc,MAAM;AACxB,UAAM,WAAW,YAAY,kBAAkB,QAAQ,CAAC;AACxD,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,SACE,8CAAC,SAAI,eAAW,aAAAC,SAAK,mCAAmC,kBAAkB,GACxE;AAAA;AAAA,MAAmB;AAAA,MAAlB;AAAA,QACC,iBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAW,aAAAA,SAAK,eAAe,mEAAmE;AAAA,UAChG,2CAA2C;AAAA,UAC3C,wBAAwB,CAAC;AAAA,UACzB,6CAA6C,YAAY,QAAQ,YAAY;AAAA,UAC7E,oDAAoD,CAAC;AAAA,QACvD,GAAG,SAAS;AAAA,QAEZ,wDAAmB,6BAAlB,EACE;AAAA,sBAAY,QAAQ,6CAAC,6BAAM,WAAW,eAAc;AAAA,UACpD,YAAY,mBAAmB,6CAAC,6BAAM,WAAW,eAAc;AAAA,WAClE;AAAA;AAAA,IACF;AAAA,IACC,SACC,6CAAC,SAAO,GAAG,OAAO,eAAW,aAAAA,SAAK,kBAAkB,MAAM,SAAS,GAAG,SAAS,IAAI,SAAS,aAAY;AAAA,KAC5G;AAEJ;;;AZGM,IAAAC,sBAAA;AA7EN,IAAM,gCAA2E;AAAA,EAC/E,IAAI;AAAA,IACF,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,IAAI;AAAA,IACF,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AACF;AAmCO,IAAM,cAAc,CAAM;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,sBAAsB;AAAA,EACtB,YAAY;AAAA,EACZ,mBAAmB;AACrB,MAAwE;AACvG,QAAM,cAAc,eAAe,+BAA+B,oBAAoB;AACtF,QAAM,CAAC,YAAY,aAAa,QAAI,wBAAiB,QAAQ,iBAAiB,EAAE;AAChF,MAAI,kBAA0C;AAC9C,QAAM,eAAe,CAAC,CAAC;AACvB,MAAI,gBAAgB,CAAC,CAAC,YAAY;AAChC,sBAAkB;AAAA,MAChB;AAAA,MACA;AAAA,MACA,WAAS,OAAO,cAAc,KAAK;AAAA,IACrC;AAAA,EACF;AACA,MAAI,CAAC,qBAAqB;AACxB,sBAAkB,gBAAgB,OAAO,WAAS,CAAC,MAAM,QAAQ;AAAA,EACnE;AAEA,QAAM,gBAAgB,QAAQ,OAAO,WAAS,MAAM,QAAQ;AAC5D,QAAM,iBAAiB,cAAc,WAAW,IAC9C,YAAY,YAAY,SACtB,6CAAC,UAAM,aAAG,cAAc,MAAM,IAAI,YAAY,QAAQ,IAAG;AAE7D,QAAM,cAAc;AAEpB,SACE,8CAAC,SAAI,eAAW,aAAAC,SAAK,SAAS,GAC3B;AAAA,aACC;AAAA,MAAC;AAAA;AAAA,QAAO,GAAG;AAAA,QAAO,SAAS,MAAM;AAAA,QAAM,eAAW,aAAAA,SAAK,SAAS,MAAM,SAAS;AAAA,QACxE,WAAW,MAAM,aAAa;AAAA;AAAA,IAAW;AAAA,IAElD;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,SAAS,CAAC,SAAS,QACjB;AAAA,UAAC;AAAA;AAAA,YAAI;AAAA,YAAU,SAAS,WAAW,SAAY;AAAA,YAC1C,eAAW,aAAAA;AAAA,cAAK;AAAA,cAAa;AAAA,cAC3B;AAAA,gBACE,2DAA2D,CAAC;AAAA,gBAC5D,2DAA2D;AAAA,cAC7D;AAAA,cACA;AAAA,YAAgB;AAAA,YAEpB,4BAAkB,gBAAgB,EAAE,OAAO,SAAS,SAAS,CAAC,IAAI;AAAA;AAAA,QACrE;AAAA,QAEF,mBAAe,aAAAA;AAAA,UACb;AAAA,UAAyG;AAAA,UACzG,EAAE,SAAS,CAAC,cAAc,SAAS,aAAa;AAAA,QAClD;AAAA,QAEC;AAAA,0BACC,8CAAC,SAAuB,WAAU,sCAChC;AAAA,yDAAC,mBAAM,WAAW,MAAM,OAAO,YAAY,UAAU,eAAc;AAAA,YACnE,6CAAC,+BAAM;AAAA,eAFA,cAGT;AAAA,UAED,gBAAgB,IAAI,CAAC,QAAQ,UAC5B;AAAA,YAAC;AAAA;AAAA,cAA8B,eAAW,aAAAA,SAAK;AAAA,gBAC7C,uFAAuF,CAAC,CAAC,OAAO;AAAA,gBAChG,kBAAkB,CAAC,OAAO;AAAA,cAC5B,CAAC;AAAA,cAEC;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAW,aAAAA,SAAK,4EAA4E,OAAO,SAAS;AAAA,kBAC5G,SAAS,MAAM;AACb,wBAAI,CAAC,OAAO,UAAU;AACpB,+BAAS,QAAQ,IAAI,WAAS,MAAM,UAAU,OAAO,QAAS;AAAA,wBAC5D,GAAG;AAAA,wBACH,UAAU,CAAC,MAAM;AAAA,sBACnB,IAAK,KAAK,CAAC;AAAA,oBACb;AAAA,kBACF;AAAA,kBAEA;AAAA,iEAAC,sBAAS,SAAS,OAAO,UAAU,UAAU,OAAO,UAAU,MAAK,SAAO;AAAA,oBAC1E,OAAO;AAAA;AAAA;AAAA,cACV;AAAA;AAAA,YAlBa,OAAO,KAAK;AAAA,UAmB3B,CACD;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;","names":["import_react","import_lucide_react","import_react","import_clsx","import_react","import_react","import_react","import_jsx_runtime","clsx","import_react","import_clsx","import_react","import_jsx_runtime","import_jsx_runtime","clsx","value","FormInput","clsx","import_react","import_clsx","import_jsx_runtime","checked","clsx","import_jsx_runtime","clsx"]}

package/dist/components/user-input/MultiSelect.mjs CHANGED Viewed

@@ -208,7 +208,6 @@ function useSaveDelay(setNotificationStatus, delay) {
   }, []);
   return { restartTimer, clearUpdateTimer };
 }
-var useSaveDelay_default = useSaveDelay;
 // src/util/noop.ts
 var noop = () => void 0;
@@ -248,7 +247,7 @@ var ControlledInput = ({
   const {
     restartTimer,
     clearUpdateTimer
-  } = useSaveDelay_default(() => void 0, 3e3);
+  } = useSaveDelay(() => void 0, 3e3);
   const ref = useRef2(null);
   useEffect6(() => {
     if (restProps.autoFocus) {

package/dist/components/user-input/MultiSelect.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/user-input/MultiSelect.tsx","../../../src/hooks/useLanguage.tsx","../../../src/hooks/useLocalStorage.tsx","../../../src/hooks/useTranslation.ts","../../../src/util/simpleSearch.ts","../../../src/components/user-input/Menu.tsx","../../../src/hooks/useOutsideClick.ts","../../../src/hooks/useHoverState.ts","../../../src/components/user-input/Input.tsx","../../../src/hooks/useSaveDelay.ts","../../../src/util/noop.ts","../../../src/components/user-input/Label.tsx","../../../src/components/user-input/Checkbox.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { useState } from 'react'\nimport { Search } from 'lucide-react'\nimport { useTranslation } from '../../hooks/useTranslation'\nimport type { PropsForTranslation } from '../../hooks/useTranslation'\nimport type { Languages } from '../../hooks/useLanguage'\nimport { MultiSearchWithMapping } from '../../util/simpleSearch'\nimport clsx from 'clsx'\nimport { Menu, MenuItem } from './Menu'\nimport { Input } from './Input'\nimport { Checkbox } from './Checkbox'\nimport type { LabelProps } from './Label'\nimport { Label } from './Label'\n\ntype MultiSelectTranslation = {\n select: string,\n search: string,\n selected: string,\n}\n\nconst defaultMultiSelectTranslation: Record<Languages, MultiSelectTranslation> = {\n en: {\n select: 'Select',\n search: 'Search',\n selected: 'selected'\n },\n de: {\n select: 'Auswählen',\n search: 'Suche',\n selected: 'ausgewählt'\n }\n}\n\n// TODO maybe add custom item builder here\nexport type MultiSelectOption<T> = {\n label: string,\n value: T,\n selected: boolean,\n disabled?: boolean,\n className?: string,\n}\n\nexport type SearchProps<T> = {\n initialSearch?: string,\n searchMapping: (value: MultiSelectOption<T>) => string[],\n}\n\nexport type MultiSelectProps<T> = {\n options: MultiSelectOption<T>[],\n onChange: (options: MultiSelectOption<T>[]) => void,\n search?: SearchProps<T>,\n disabled?: boolean,\n selectedDisplay?: (props: {\n items: MultiSelectOption<T>[],\n disabled: boolean,\n }) => ReactNode,\n label?: LabelProps,\n hintText?: string,\n showDisabledOptions?: boolean,\n className?: string,\n triggerClassName?: string,\n}\n\n/*\n A Component for multi selection\n /\nexport const MultiSelect = <T, >({\n overwriteTranslation,\n options,\n onChange,\n search,\n disabled = false,\n selectedDisplay,\n label,\n hintText,\n showDisabledOptions = true,\n className = '',\n triggerClassName = '',\n }: PropsForTranslation<MultiSelectTranslation, MultiSelectProps<T>>) => {\n const translation = useTranslation(defaultMultiSelectTranslation, overwriteTranslation)\n const [searchText, setSearchText] = useState<string>(search?.initialSearch ?? '')\n let filteredOptions: MultiSelectOption<T>[] = options\n const enableSearch = !!search\n if (enableSearch && !!searchText) {\n filteredOptions = MultiSearchWithMapping<MultiSelectOption<T>>(\n searchText,\n filteredOptions,\n value => search.searchMapping(value)\n )\n }\n if (!showDisabledOptions) {\n filteredOptions = filteredOptions.filter(value => !value.disabled)\n }\n\n const selectedItems = options.filter(value => value.selected)\n const menuButtonText = selectedItems.length === 0 ?\n hintText ?? translation.select\n : <span>{`${selectedItems.length} ${translation.selected}`}</span>\n\n const borderColor = 'border-menu-border'\n\n return (\n <div className={clsx(className)}>\n {label && (\n <Label {...label} htmlFor={label.name} className={clsx(' mb-1', label.className)}\n labelType={label.labelType ?? 'labelBig'}/>\n )}\n <Menu<HTMLDivElement>\n alignment=\"t_\"\n trigger={(onClick, ref) => (\n <div ref={ref} onClick={disabled ? undefined : onClick}\n 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',\n {\n 'hover:brightness-90 hover:border-primary cursor-pointer': !disabled,\n 'bg-disabled-background text-disabled cursor-not-allowed': disabled\n },\n triggerClassName)}\n >\n {selectedDisplay ? selectedDisplay({ items: options, disabled }) : menuButtonText}\n </div>\n )}\n menuClassName={clsx(\n '!rounded-lg !shadow-lg !max-h-[500px] !min-w-[400px] !max-w-[70vh] !overflow-y-auto !border !border-2', borderColor,\n { '!py-0': !enableSearch, '!pb-0': enableSearch }\n )}\n >\n {enableSearch && (\n <div key=\"selectSearch\" className=\"row gap-x-2 items-center px-2 py-2\">\n <Input autoFocus={true} value={searchText} onChange={setSearchText}/>\n <Search/>\n </div>\n )}\n {filteredOptions.map((option, index) => (\n <MenuItem key={`item${index}`} className={clsx({\n 'cursor-not-allowed !bg-disabled-background !text-disabled-text hover:brightness-100': !!option.disabled,\n 'cursor-pointer': !option.disabled,\n })}\n >\n <div\n className={clsx('overflow-hidden whitespace-nowrap text-ellipsis row items-center gap-x-2', option.className)}\n onClick={() => {\n if (!option.disabled) {\n onChange(options.map(value => value.value === option.value ? ({\n ...option,\n selected: !value.selected\n }) : value))\n }\n }}\n >\n <Checkbox checked={option.selected} disabled={option.disabled} size=\"small\"/>\n {option.label}\n </div>\n </MenuItem>\n ))}\n </Menu>\n </div>\n )\n}\n","import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport useLocalStorage from './useLocalStorage'\n\nexport const languages = ['en', 'de'] as const\nexport type Languages = typeof languages[number]\nexport const languagesLocalNames: Record<Languages, string> = {\n en: 'English',\n de: 'Deutsch',\n}\n\nexport const DEFAULT_LANGUAGE = 'en'\n\nexport type LanguageContextValue = {\n language: Languages,\n setLanguage: Dispatch<SetStateAction<Languages>>,\n}\n\nexport const LanguageContext = createContext<LanguageContextValue>({ language: DEFAULT_LANGUAGE, setLanguage: (v) => v })\n\nexport const useLanguage = () => useContext(LanguageContext)\n\nexport const useLocale = (overWriteLanguage?: Languages) => {\n const { language } = useLanguage()\n const mapping: Record<Languages, string> = {\n en: 'en-US',\n de: 'de-DE'\n }\n return mapping[overWriteLanguage ?? language]\n}\n\ntype ProvideLanguageProps = {\n initialLanguage?: Languages,\n}\n\nexport const ProvideLanguage = ({ initialLanguage, children }: PropsWithChildren<ProvideLanguageProps>) => {\n const [language, setLanguage] = useState<Languages>(initialLanguage ?? DEFAULT_LANGUAGE)\n const [storedLanguage, setStoredLanguage] = useLocalStorage<Languages>('language', initialLanguage ?? DEFAULT_LANGUAGE)\n\n useEffect(() => {\n if(language !== initialLanguage && initialLanguage){\n console.warn('LanguageProvider initial state changed: Prefer using useLanguages\\'s setLanguage instead')\n setLanguage(initialLanguage)\n }\n }, [initialLanguage]) // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n // TODO set locale of html tag here as well\n setStoredLanguage(language)\n }, [language, setStoredLanguage])\n\n useEffect(() => {\n if (storedLanguage !== null) {\n setLanguage(storedLanguage)\n return\n }\n\n const languagesToTestAgainst = Object.values(languages)\n\n const matchingBrowserLanguages = window.navigator.languages\n .map(language => languagesToTestAgainst.find((test) => language === test \|\| language.split('-')[0] === test))\n .filter(entry => entry !== undefined)\n\n if (matchingBrowserLanguages.length === 0) return\n\n const firstMatch = matchingBrowserLanguages[0] as Languages\n setLanguage(firstMatch)\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n <LanguageContext.Provider value={{\n language,\n setLanguage\n }}>\n {children}\n </LanguageContext.Provider>\n )\n}\n","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nconst useLocalStorage = <T, >(key: string, initValue: T): [T, SetValue<T>] => {\n const get = useCallback((): T => {\n if (typeof window === 'undefined') {\n return initValue\n }\n const storageService = new LocalStorageService()\n const value = storageService.get<T>(key)\n return value \|\| initValue\n }, [initValue, key])\n\n const [storedValue, setStoredValue] = useState<T>(get)\n\n const setValue: SetValue<T> = useCallback(value => {\n const newValue = value instanceof Function ? value(storedValue) : value\n const storageService = new LocalStorageService()\n storageService.set(key, value)\n\n setStoredValue(newValue)\n }, [storedValue, setStoredValue, key])\n\n useEffect(() => {\n setStoredValue(get())\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return [storedValue, setValue]\n}\n\nexport default useLocalStorage\n","import type { Languages } from './useLanguage'\nimport { useLanguage } from './useLanguage'\n\nexport type Translation<T> = Record<Languages, T>\n\ntype OverwriteTranslationType<Translation extends Record<string, unknown>> = {\n language?: Languages,\n translation?: Partial<Record<Languages, Partial<Translation>>>,\n}\n\n/\n Adds the `language` prop to the component props.\n \n @param Translation the type of the translation object\n \n @param Props the type of the component props, defaults to `Record<string, never>`,\n * if you don't expect any other props other than `language` and get an\n * error when using your component (because it uses `forwardRef` etc.)\n * you can try out `Record<string, unknown>`, this might resolve your\n * problem as `SomeType & never` is still `never` but `SomeType & unknown`\n * is `SomeType` which means that adding back props (like `ref` etc.)\n * works properly\n /\nexport type PropsForTranslation<\n Translation extends Record<string, unknown>,\n Props = Record<string, never>\n> = Props & {\n overwriteTranslation?: OverwriteTranslationType<Translation>,\n};\n\nexport const useTranslation = <Translation extends Record<string, unknown>>(\n defaults: Record<Languages, Translation>,\n translationOverwrite: OverwriteTranslationType<Translation> = {}\n) : Translation => {\n const { language: languageProp, translation: overwrite } = translationOverwrite\n const { language: inferredLanguage } = useLanguage()\n const usedLanguage = languageProp ?? inferredLanguage\n let defaultValues: Translation = defaults[usedLanguage]\n if (overwrite && overwrite[usedLanguage]) {\n defaultValues = { ...defaultValues, ...overwrite[usedLanguage] }\n }\n return defaultValues\n}\n","/\n Finds all values matching the search values by first mapping the values to a string array and then checking each entry for matches.\n * Returns the list of all matches.\n \n @param search The list of search strings e.g. `[name, type]`\n \n @param objects The list of objects to be searched in\n \n @param mapping The mapping of objects to the string properties they fulfil\n \n @return The list of objects that match all search strings\n /\nexport const MultiSubjectSearchWithMapping = <T>(search: string[], objects: T[], mapping: (value:T) => (string\| undefined)[]) => {\n return objects.filter(object => {\n const mappedSearchKeywords = mapping(object).map(value => value ? value.toLowerCase().trim() : undefined)\n return search.every(searchValue => !!mappedSearchKeywords.find(value => !!value && value.includes(searchValue.toLowerCase().trim())))\n })\n}\n\n/\n Finds all values matching the search value by first mapping the values to a string array and then checking each entry for matches.\n * Returns the list of all matches.\n \n @param search The search string e.g `name`\n \n @param objects The list of objects to be searched in\n \n @param mapping The mapping of objects to the string properties they fulfil\n \n @return The list of objects that match the search string\n /\nexport const MultiSearchWithMapping = <T>(search: string, objects: T[], mapping: (value:T) => string[]) => {\n return objects.filter(object => {\n const mappedSearchKeywords = mapping(object).map(value => value.toLowerCase().trim())\n return !!mappedSearchKeywords.find(value => value.includes(search.toLowerCase().trim()))\n })\n}\n\n/\n Finds all values matching the search value by first mapping the values to a string and returns the list of all matches.\n \n @param search The search string e.g `name`\n \n @param objects The list of objects to be searched in\n \n @param mapping The mapping of objects to a string that is compared to the search\n \n @return The list of objects that match the search string\n /\nexport const SimpleSearchWithMapping = <T>(search: string, objects: T[], mapping: (value:T) => string) => {\n return MultiSearchWithMapping(search, objects, value => [mapping(value)])\n}\n\n/\n Finds all values matching the search value and returns the list of all matches.\n \n @param search The search string e.g `name`\n \n @param objects The list of objects to be searched in\n \n @return The list of objects that match the search string\n /\nexport const SimpleSearch = (search: string, objects: string[]) => {\n return SimpleSearchWithMapping(search, objects, value => value)\n}\n","import { useRef, type PropsWithChildren, type ReactNode, type RefObject } from 'react'\nimport clsx from 'clsx'\nimport { useOutsideClick } from '../../hooks/useOutsideClick'\nimport { useHoverState } from '../../hooks/useHoverState'\n\ntype MenuProps<T> = PropsWithChildren<{\n trigger: (onClick: () => void, ref: RefObject<T>) => ReactNode,\n /\n @default 'tl'\n /\n alignment?: 'tl' \| 'tr' \| 'bl' \| 'br' \| '_l' \| '_r' \| 't_' \| 'b_',\n showOnHover?: boolean,\n menuClassName?: string,\n}>\n\nexport type MenuItemProps = {\n onClick?: () => void,\n alignment?: 'left' \| 'right',\n className?: string,\n}\nconst MenuItem = ({\n children,\n onClick,\n alignment = 'left',\n className\n}: PropsWithChildren<MenuItemProps>) => (\n <div\n className={clsx('block px-3 py-1 bg-menu-background text-menu-text hover:brightness-90', {\n 'text-right': alignment === 'right',\n 'text-left': alignment === 'left',\n }, className)}\n onClick={onClick}\n >\n {children}\n </div>\n)\n\n// TODO: it is quite annoying that the type for the ref has to be specified manually, is there some solution around this?\n/\n A Menu Component to allow the user to see different functions\n /\nconst Menu = <T extends HTMLElement>({\n trigger,\n children,\n alignment = 'tl',\n showOnHover = false,\n menuClassName = '',\n}: MenuProps<T>) => {\n const { isHovered: isOpen, setIsHovered: setIsOpen, handlers } = useHoverState({ isDisabled: !showOnHover })\n const triggerRef = useRef<T>(null)\n const menuRef = useRef<HTMLDivElement>(null)\n useOutsideClick([triggerRef, menuRef], () => setIsOpen(false))\n\n return (\n <div\n className=\"relative\"\n {...handlers}\n >\n {trigger(() => setIsOpen(!isOpen), triggerRef)}\n {isOpen ? (\n <div ref={menuRef} onClick={e => e.stopPropagation()}\n 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]', {\n ' top-[8px]': alignment[0] === 't',\n ' bottom-[8px]': alignment[0] === 'b',\n ' left-[-8px]': alignment[1] === 'l',\n ' right-[-8px]': alignment[1] === 'r',\n }, menuClassName)}>\n {children}\n </div>\n ) : null}\n </div>\n )\n}\n\nexport { Menu, MenuItem }\n","import { useEffect } from 'react'\nimport type { RefObject } from 'react'\n\nexport const useOutsideClick = <Ts extends RefObject<HTMLElement>[]>(refs: Ts, handler: () => void) => {\n useEffect(() => {\n const listener = (event: MouseEvent \| TouchEvent) => {\n // returning means not \"not clicking outside\"\n\n // if no target exists, return\n if (event.target === null) return\n // if the target is a ref's element or descendent thereof, return\n if (refs.some((ref) => !ref.current \|\| ref.current.contains(event.target as Node))) {\n return\n }\n\n handler()\n }\n document.addEventListener('mousedown', listener)\n document.addEventListener('touchstart', listener)\n return () => {\n document.removeEventListener('mousedown', listener)\n document.removeEventListener('touchstart', listener)\n }\n }, [refs, handler])\n}\n","import type { Dispatch, SetStateAction } from 'react'\nimport { useEffect, useState } from 'react'\n\ntype UseHoverStateProps = {\n /\n The delay after which the menu is closed in milliseconds\n \n default: 200ms\n /\n closingDelay: number,\n /\n Whether the hover state management should be disabled\n \n default: false\n /\n isDisabled: boolean,\n}\n\ntype UseHoverStateReturnType = {\n /\n Whether the element is hovered\n /\n isHovered: boolean,\n /\n Function to change the current hover status\n /\n setIsHovered: Dispatch<SetStateAction<boolean>>,\n /\n Handlers to pass on to the component that should be hovered\n /\n handlers: {\n onMouseEnter: () => void,\n onMouseLeave: () => void,\n },\n}\n\nconst defaultUseHoverStateProps: UseHoverStateProps = {\n closingDelay: 200,\n isDisabled: false,\n}\n\n/\n @param props See UseHoverStateProps\n \n A react hook for managing the hover state of a component. The handlers provided should be\n * forwarded to the component which should be hovered over\n /\nexport const useHoverState = (props: Partial<UseHoverStateProps> \| undefined = undefined): UseHoverStateReturnType => {\n const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props }\n\n const [isHovered, setIsHovered] = useState(false)\n const [timer, setTimer] = useState<NodeJS.Timeout>()\n\n const onMouseEnter = () => {\n if (isDisabled) {\n return\n }\n clearTimeout(timer)\n setIsHovered(true)\n }\n\n const onMouseLeave = () => {\n if (isDisabled) {\n return\n }\n setTimer(setTimeout(() => {\n setIsHovered(false)\n }, closingDelay))\n }\n\n useEffect(() => {\n if (timer) {\n return () => {\n clearTimeout(timer)\n }\n }\n })\n\n useEffect(() => {\n if (timer) {\n clearTimeout(timer)\n }\n }, [isDisabled]) // eslint-disable-line react-hooks/exhaustive-deps\n\n return {\n isHovered, setIsHovered, handlers: { onMouseEnter, onMouseLeave }\n }\n}\n","import React, {\n useEffect,\n useRef,\n useState,\n type ChangeEvent,\n type HTMLInputTypeAttribute,\n type InputHTMLAttributes, forwardRef\n} from 'react'\nimport clsx from 'clsx'\nimport useSaveDelay from '../../hooks/useSaveDelay'\nimport { noop } from '../../util/noop'\nimport type { LabelProps } from './Label'\nimport { Label } from './Label'\n\nexport type InputProps = {\n /\n used for the label's `for` attribute\n /\n id?: string,\n value: string,\n label?: Omit<LabelProps, 'id'>,\n /\n @default 'text'\n /\n type?: HTMLInputTypeAttribute,\n /\n Callback for when the input's value changes\n * This is pretty much required but made optional for the rare cases where it actually isn't need such as when used with disabled\n * That could be enforced through a union type but that seems a bit overkill\n * @default noop\n /\n onChange?: (text: string, event: ChangeEvent<HTMLInputElement>) => void,\n onChangeEvent?: (event: ChangeEvent<HTMLInputElement>) => void,\n className?: string,\n onEditCompleted?: (text: string, event: ChangeEvent<HTMLInputElement>) => void,\n expanded?: boolean,\n containerClassName?: string,\n} & Omit<InputHTMLAttributes<HTMLInputElement>, 'id' \| 'value' \| 'label' \| 'type' \| 'onChange' \| 'crossOrigin'>\n\n/\n A Component for inputting text or other information\n \n Its state is managed must be managed by the parent\n /\nconst ControlledInput = ({\n id,\n type = 'text',\n value,\n label,\n onChange = noop,\n onChangeEvent = noop,\n className = '',\n onEditCompleted,\n expanded = true,\n onBlur,\n containerClassName,\n ...restProps\n }: InputProps) => {\n const {\n restartTimer,\n clearUpdateTimer\n } = useSaveDelay(() => undefined, 3000)\n const ref = useRef<HTMLInputElement>(null)\n\n useEffect(() => {\n if (restProps.autoFocus) {\n ref.current?.focus()\n }\n }, [restProps.autoFocus])\n return (\n <div className={clsx({ 'w-full': expanded }, containerClassName)}>\n {label && <Label {...label} htmlFor={id} className={clsx('mb-1', label.className)}/>}\n <input\n ref={ref}\n value={value}\n id={id}\n type={type}\n 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)}\n onBlur={event => {\n if (onBlur) {\n onBlur(event)\n }\n if (onEditCompleted) {\n onEditCompleted(event.target.value, event)\n clearUpdateTimer()\n }\n }}\n onChange={e => {\n const value = e.target.value\n if (onEditCompleted) {\n restartTimer(() => {\n onEditCompleted(value, e)\n clearUpdateTimer()\n })\n }\n onChange(value, e)\n onChangeEvent(e)\n }}\n {...restProps}\n />\n </div>\n )\n}\n\ntype UncontrolledInputProps = Omit<InputProps, 'value'> & {\n /\n @default ''\n /\n defaultValue?: string,\n}\n\n/\n A Component for inputting text or other information\n \n Its state is managed by the component itself\n /\nconst UncontrolledInput = ({\n defaultValue = '',\n onChange = noop,\n ...props\n }: UncontrolledInputProps) => {\n const [value, setValue] = useState(defaultValue)\n\n const handleChange = (text: string, event: ChangeEvent<HTMLInputElement>) => {\n setValue(text)\n onChange(text, event)\n }\n\n return (\n <ControlledInput\n {...props}\n value={value}\n onChange={handleChange}\n />\n )\n}\n\nexport type FormInputProps = InputHTMLAttributes<HTMLInputElement> & {\n id: string,\n labelText?: string,\n errorText?: string,\n labelClassName?: string,\n errorClassName?: string,\n containerClassName?: string,\n}\n\nconst FormInput = forwardRef<HTMLInputElement, FormInputProps>(function FormInput({\n id,\n labelText,\n errorText,\n className,\n labelClassName,\n errorClassName,\n containerClassName,\n required,\n ...restProps\n }, ref) {\n const input = (\n <input\n ref={ref}\n id={id}\n {...restProps}\n className={clsx(\n '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',\n {\n 'focus:border-primary focus:ring-primary': !errorText,\n 'focus:border-negative focus:ring-negative text-negative': !!errorText,\n },\n className\n )}\n />\n )\n\n return (\n <div className={clsx('flex flex-col gap-y-1', containerClassName)}>\n {labelText && (\n <label htmlFor={id} className={clsx('textstyle-label-md', labelClassName)}>\n {labelText}\n {required && <span className=\"text-primary font-bold\"></span>}\n </label>\n )}\n {input}\n {errorText && <label htmlFor={id} className={clsx('text-negative', errorClassName)}>{errorText}</label>}\n </div>\n )\n})\n\nexport {\n UncontrolledInput,\n ControlledInput as Input,\n FormInput\n}\n","import { useEffect, useState } from 'react'\n\nfunction useSaveDelay(setNotificationStatus: (isShowing: boolean) => void, delay: number) {\n const [updateTimer, setUpdateTimer] = useState<NodeJS.Timeout \| undefined>(undefined)\n const [notificationTimer, setNotificationTimer] = useState<NodeJS.Timeout \| undefined>(undefined)\n\n const restartTimer = (onSave: () => void) => {\n clearTimeout(updateTimer)\n setUpdateTimer(setTimeout(() => {\n onSave()\n setNotificationStatus(true)\n // Show Saved Notification for fade animation duration\n clearTimeout(notificationTimer)\n setNotificationTimer(setTimeout(() => {\n setNotificationStatus(false)\n clearTimeout(notificationTimer)\n }, delay))\n clearTimeout(updateTimer)\n }, delay))\n }\n\n const clearUpdateTimer = (hasSaved = true) => {\n clearTimeout(updateTimer)\n if (hasSaved) {\n setNotificationStatus(true)\n clearTimeout(notificationTimer)\n setNotificationTimer(setTimeout(() => {\n setNotificationStatus(false)\n clearTimeout(notificationTimer)\n }, delay))\n } else {\n setNotificationStatus(false)\n }\n }\n\n useEffect(() => {\n return () => {\n clearTimeout(updateTimer)\n clearTimeout(notificationTimer)\n }\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return { restartTimer, clearUpdateTimer }\n}\n\nexport default useSaveDelay\n","export const noop = () => undefined\n","import type { LabelHTMLAttributes } from 'react'\n\nexport type LabelType = 'labelSmall' \| 'labelMedium' \| 'labelBig'\nconst styleMapping: Record<LabelType, string> = {\n labelSmall: 'textstyle-label-sm',\n labelMedium: 'textstyle-label-md',\n labelBig: 'textstyle-label-lg',\n}\n\n\nexport type LabelProps = {\n /** The text for the label /\n name?: string,\n /* The styling for the label /\n labelType?: LabelType,\n} & LabelHTMLAttributes<HTMLLabelElement>\n\n/\n A Label component\n /\nexport const Label = ({\n children,\n name,\n labelType = 'labelSmall',\n ...props\n}: LabelProps) => {\n return (\n <label {...props}>\n {children ? children : (<span className={styleMapping[labelType]}>{name}</span>)}\n </label>\n )\n}\n","import { useState } from 'react'\nimport as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport type { CheckedState } from '@radix-ui/react-checkbox'\nimport { Check, Minus } from 'lucide-react'\nimport clsx from 'clsx'\nimport type { LabelProps } from './Label'\nimport { Label } from './Label'\n\ntype CheckBoxSize = 'small' \| 'medium' \| 'large'\n\nconst checkboxSizeMapping: Record<CheckBoxSize, string> = {\n small: 'size-4',\n medium: 'size-6',\n large: 'size-8',\n}\n\nconst checkboxIconSizeMapping: Record<CheckBoxSize, string> = {\n small: 'size-3',\n medium: 'size-5',\n large: 'size-7',\n}\n\ntype CheckboxProps = {\n /** used for the label's `for` attribute /\n id?: string,\n label?: Omit<LabelProps, 'id'>,\n /\n @default false\n /\n checked: CheckedState,\n disabled?: boolean,\n onChange?: (checked: boolean) => void,\n onChangeTristate?: (checked: CheckedState) => void,\n size?: CheckBoxSize,\n className?: string,\n containerClassName?: string,\n}\n\n/\n A Tristate checkbox\n \n The state is managed by the parent\n /\nconst ControlledCheckbox = ({\n id,\n label,\n checked,\n disabled,\n onChange,\n onChangeTristate,\n size = 'medium',\n className = '',\n containerClassName\n }: CheckboxProps) => {\n const usedSizeClass = checkboxSizeMapping[size]\n const innerIconSize = checkboxIconSizeMapping[size]\n\n const propagateChange = (checked: CheckedState) => {\n if (onChangeTristate) {\n onChangeTristate(checked)\n }\n if (onChange) {\n onChange(checked === 'indeterminate' ? false : checked)\n }\n }\n\n const changeValue = () => {\n const newValue = checked === 'indeterminate' ? false : !checked\n propagateChange(newValue)\n }\n\n return (\n <div className={clsx('row justify-center items-center', containerClassName)}>\n <CheckboxPrimitive.Root\n onCheckedChange={propagateChange}\n checked={checked}\n disabled={disabled}\n id={id}\n className={clsx(usedSizeClass, `items-center border-2 rounded outline-none focus:border-primary`, {\n 'text-disabled-text border-disabled-text': disabled,\n 'border-on-background': !disabled,\n 'bg-primary/30 border-primary text-primary': checked === true \|\| checked === 'indeterminate',\n 'hover:border-gray-400 focus:hover:border-primary': !checked\n }, className)}\n >\n <CheckboxPrimitive.Indicator>\n {checked === true && <Check className={innerIconSize}/>}\n {checked === 'indeterminate' && <Minus className={innerIconSize}/>}\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n {label &&\n <Label {...label} className={clsx('cursor-pointer', label.className)} htmlFor={id} onClick={changeValue}/>}\n </div>\n )\n}\n\ntype UncontrolledCheckboxProps = Omit<CheckboxProps, 'value' \| 'checked'> & {\n /\n @default false\n /\n defaultValue?: CheckedState,\n}\n\n/\n A Tristate checkbox\n \n The state is managed by this component\n */\nconst UncontrolledCheckbox = ({\n onChange,\n onChangeTristate,\n defaultValue = false,\n ...props\n }: UncontrolledCheckboxProps) => {\n const [checked, setChecked] = useState(defaultValue)\n\n const handleChange = (checked: CheckedState) => {\n if (onChangeTristate) {\n onChangeTristate(checked)\n }\n if (onChange) {\n onChange(checked === 'indeterminate' ? false : checked)\n }\n setChecked(checked)\n }\n\n return (\n <ControlledCheckbox\n {...props}\n checked={checked}\n onChangeTristate={handleChange}\n />\n )\n}\n\nexport {\n UncontrolledCheckbox,\n ControlledCheckbox as Checkbox\n}\n"],"mappings":"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","names":["useState","useEffect","useState","clsx","useEffect","useEffect","useState","jsx","useEffect","useRef","useState","clsx","useEffect","useState","jsx","jsx","jsxs","useRef","useEffect","clsx","value","FormInput","jsx","clsx","jsxs","useState","clsx","jsx","jsxs","checked","clsx","jsx","jsxs","useState","clsx"]}
1	+ {"version":3,"sources":["../../../src/components/user-input/MultiSelect.tsx","../../../src/hooks/useLanguage.tsx","../../../src/hooks/useLocalStorage.tsx","../../../src/hooks/useTranslation.ts","../../../src/util/simpleSearch.ts","../../../src/components/user-input/Menu.tsx","../../../src/hooks/useOutsideClick.ts","../../../src/hooks/useHoverState.ts","../../../src/components/user-input/Input.tsx","../../../src/hooks/useSaveDelay.ts","../../../src/util/noop.ts","../../../src/components/user-input/Label.tsx","../../../src/components/user-input/Checkbox.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { useState } from 'react'\nimport { Search } from 'lucide-react'\nimport { useTranslation } from '../../hooks/useTranslation'\nimport type { PropsForTranslation } from '../../hooks/useTranslation'\nimport type { Languages } from '../../hooks/useLanguage'\nimport { MultiSearchWithMapping } from '../../util/simpleSearch'\nimport clsx from 'clsx'\nimport { Menu, MenuItem } from './Menu'\nimport { Input } from './Input'\nimport { Checkbox } from './Checkbox'\nimport type { LabelProps } from './Label'\nimport { Label } from './Label'\n\ntype MultiSelectTranslation = {\n select: string,\n search: string,\n selected: string,\n}\n\nconst defaultMultiSelectTranslation: Record<Languages, MultiSelectTranslation> = {\n en: {\n select: 'Select',\n search: 'Search',\n selected: 'selected'\n },\n de: {\n select: 'Auswählen',\n search: 'Suche',\n selected: 'ausgewählt'\n }\n}\n\n// TODO maybe add custom item builder here\nexport type MultiSelectOption<T> = {\n label: string,\n value: T,\n selected: boolean,\n disabled?: boolean,\n className?: string,\n}\n\nexport type SearchProps<T> = {\n initialSearch?: string,\n searchMapping: (value: MultiSelectOption<T>) => string[],\n}\n\nexport type MultiSelectProps<T> = {\n options: MultiSelectOption<T>[],\n onChange: (options: MultiSelectOption<T>[]) => void,\n search?: SearchProps<T>,\n disabled?: boolean,\n selectedDisplay?: (props: {\n items: MultiSelectOption<T>[],\n disabled: boolean,\n }) => ReactNode,\n label?: LabelProps,\n hintText?: string,\n showDisabledOptions?: boolean,\n className?: string,\n triggerClassName?: string,\n}\n\n/*\n A Component for multi selection\n /\nexport const MultiSelect = <T, >({\n overwriteTranslation,\n options,\n onChange,\n search,\n disabled = false,\n selectedDisplay,\n label,\n hintText,\n showDisabledOptions = true,\n className = '',\n triggerClassName = '',\n }: PropsForTranslation<MultiSelectTranslation, MultiSelectProps<T>>) => {\n const translation = useTranslation(defaultMultiSelectTranslation, overwriteTranslation)\n const [searchText, setSearchText] = useState<string>(search?.initialSearch ?? '')\n let filteredOptions: MultiSelectOption<T>[] = options\n const enableSearch = !!search\n if (enableSearch && !!searchText) {\n filteredOptions = MultiSearchWithMapping<MultiSelectOption<T>>(\n searchText,\n filteredOptions,\n value => search.searchMapping(value)\n )\n }\n if (!showDisabledOptions) {\n filteredOptions = filteredOptions.filter(value => !value.disabled)\n }\n\n const selectedItems = options.filter(value => value.selected)\n const menuButtonText = selectedItems.length === 0 ?\n hintText ?? translation.select\n : <span>{`${selectedItems.length} ${translation.selected}`}</span>\n\n const borderColor = 'border-menu-border'\n\n return (\n <div className={clsx(className)}>\n {label && (\n <Label {...label} htmlFor={label.name} className={clsx(' mb-1', label.className)}\n labelType={label.labelType ?? 'labelBig'}/>\n )}\n <Menu<HTMLDivElement>\n alignment=\"t_\"\n trigger={(onClick, ref) => (\n <div ref={ref} onClick={disabled ? undefined : onClick}\n 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',\n {\n 'hover:brightness-90 hover:border-primary cursor-pointer': !disabled,\n 'bg-disabled-background text-disabled cursor-not-allowed': disabled\n },\n triggerClassName)}\n >\n {selectedDisplay ? selectedDisplay({ items: options, disabled }) : menuButtonText}\n </div>\n )}\n menuClassName={clsx(\n '!rounded-lg !shadow-lg !max-h-[500px] !min-w-[400px] !max-w-[70vh] !overflow-y-auto !border !border-2', borderColor,\n { '!py-0': !enableSearch, '!pb-0': enableSearch }\n )}\n >\n {enableSearch && (\n <div key=\"selectSearch\" className=\"row gap-x-2 items-center px-2 py-2\">\n <Input autoFocus={true} value={searchText} onChange={setSearchText}/>\n <Search/>\n </div>\n )}\n {filteredOptions.map((option, index) => (\n <MenuItem key={`item${index}`} className={clsx({\n 'cursor-not-allowed !bg-disabled-background !text-disabled-text hover:brightness-100': !!option.disabled,\n 'cursor-pointer': !option.disabled,\n })}\n >\n <div\n className={clsx('overflow-hidden whitespace-nowrap text-ellipsis row items-center gap-x-2', option.className)}\n onClick={() => {\n if (!option.disabled) {\n onChange(options.map(value => value.value === option.value ? ({\n ...option,\n selected: !value.selected\n }) : value))\n }\n }}\n >\n <Checkbox checked={option.selected} disabled={option.disabled} size=\"small\"/>\n {option.label}\n </div>\n </MenuItem>\n ))}\n </Menu>\n </div>\n )\n}\n","import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport { useLocalStorage } from './useLocalStorage'\n\nexport const languages = ['en', 'de'] as const\nexport type Languages = typeof languages[number]\nexport const languagesLocalNames: Record<Languages, string> = {\n en: 'English',\n de: 'Deutsch',\n}\n\nexport const DEFAULT_LANGUAGE = 'en'\n\nexport type LanguageContextValue = {\n language: Languages,\n setLanguage: Dispatch<SetStateAction<Languages>>,\n}\n\nexport const LanguageContext = createContext<LanguageContextValue>({ language: DEFAULT_LANGUAGE, setLanguage: (v) => v })\n\nexport const useLanguage = () => useContext(LanguageContext)\n\nexport const useLocale = (overWriteLanguage?: Languages) => {\n const { language } = useLanguage()\n const mapping: Record<Languages, string> = {\n en: 'en-US',\n de: 'de-DE'\n }\n return mapping[overWriteLanguage ?? language]\n}\n\ntype ProvideLanguageProps = {\n initialLanguage?: Languages,\n}\n\nexport const ProvideLanguage = ({ initialLanguage, children }: PropsWithChildren<ProvideLanguageProps>) => {\n const [language, setLanguage] = useState<Languages>(initialLanguage ?? DEFAULT_LANGUAGE)\n const [storedLanguage, setStoredLanguage] = useLocalStorage<Languages>('language', initialLanguage ?? DEFAULT_LANGUAGE)\n\n useEffect(() => {\n if(language !== initialLanguage && initialLanguage){\n console.warn('LanguageProvider initial state changed: Prefer using useLanguages\\'s setLanguage instead')\n setLanguage(initialLanguage)\n }\n }, [initialLanguage]) // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n // TODO set locale of html tag here as well\n setStoredLanguage(language)\n }, [language, setStoredLanguage])\n\n useEffect(() => {\n if (storedLanguage !== null) {\n setLanguage(storedLanguage)\n return\n }\n\n const languagesToTestAgainst = Object.values(languages)\n\n const matchingBrowserLanguages = window.navigator.languages\n .map(language => languagesToTestAgainst.find((test) => language === test \|\| language.split('-')[0] === test))\n .filter(entry => entry !== undefined)\n\n if (matchingBrowserLanguages.length === 0) return\n\n const firstMatch = matchingBrowserLanguages[0] as Languages\n setLanguage(firstMatch)\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n <LanguageContext.Provider value={{\n language,\n setLanguage\n }}>\n {children}\n </LanguageContext.Provider>\n )\n}\n","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T, >(key: string, initValue: T): [T, SetValue<T>] => {\n const get = useCallback((): T => {\n if (typeof window === 'undefined') {\n return initValue\n }\n const storageService = new LocalStorageService()\n const value = storageService.get<T>(key)\n return value \|\| initValue\n }, [initValue, key])\n\n const [storedValue, setStoredValue] = useState<T>(get)\n\n const setValue: SetValue<T> = useCallback(value => {\n const newValue = value instanceof Function ? value(storedValue) : value\n const storageService = new LocalStorageService()\n storageService.set(key, value)\n\n setStoredValue(newValue)\n }, [storedValue, setStoredValue, key])\n\n useEffect(() => {\n setStoredValue(get())\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return [storedValue, setValue]\n}","import type { Languages } from './useLanguage'\nimport { useLanguage } from './useLanguage'\n\nexport type Translation<T> = Record<Languages, T>\n\ntype OverwriteTranslationType<Translation extends Record<string, unknown>> = {\n language?: Languages,\n translation?: Partial<Record<Languages, Partial<Translation>>>,\n}\n\n/\n Adds the `language` prop to the component props.\n \n @param Translation the type of the translation object\n \n @param Props the type of the component props, defaults to `Record<string, never>`,\n * if you don't expect any other props other than `language` and get an\n * error when using your component (because it uses `forwardRef` etc.)\n * you can try out `Record<string, unknown>`, this might resolve your\n * problem as `SomeType & never` is still `never` but `SomeType & unknown`\n * is `SomeType` which means that adding back props (like `ref` etc.)\n * works properly\n /\nexport type PropsForTranslation<\n Translation extends Record<string, unknown>,\n Props = Record<string, never>\n> = Props & {\n overwriteTranslation?: OverwriteTranslationType<Translation>,\n};\n\nexport const useTranslation = <Translation extends Record<string, unknown>>(\n defaults: Record<Languages, Translation>,\n translationOverwrite: OverwriteTranslationType<Translation> = {}\n) : Translation => {\n const { language: languageProp, translation: overwrite } = translationOverwrite\n const { language: inferredLanguage } = useLanguage()\n const usedLanguage = languageProp ?? inferredLanguage\n let defaultValues: Translation = defaults[usedLanguage]\n if (overwrite && overwrite[usedLanguage]) {\n defaultValues = { ...defaultValues, ...overwrite[usedLanguage] }\n }\n return defaultValues\n}\n","/\n Finds all values matching the search values by first mapping the values to a string array and then checking each entry for matches.\n * Returns the list of all matches.\n \n @param search The list of search strings e.g. `[name, type]`\n \n @param objects The list of objects to be searched in\n \n @param mapping The mapping of objects to the string properties they fulfil\n \n @return The list of objects that match all search strings\n /\nexport const MultiSubjectSearchWithMapping = <T>(search: string[], objects: T[], mapping: (value:T) => (string\| undefined)[]) => {\n return objects.filter(object => {\n const mappedSearchKeywords = mapping(object).map(value => value ? value.toLowerCase().trim() : undefined)\n return search.every(searchValue => !!mappedSearchKeywords.find(value => !!value && value.includes(searchValue.toLowerCase().trim())))\n })\n}\n\n/\n Finds all values matching the search value by first mapping the values to a string array and then checking each entry for matches.\n * Returns the list of all matches.\n \n @param search The search string e.g `name`\n \n @param objects The list of objects to be searched in\n \n @param mapping The mapping of objects to the string properties they fulfil\n \n @return The list of objects that match the search string\n /\nexport const MultiSearchWithMapping = <T>(search: string, objects: T[], mapping: (value:T) => string[]) => {\n return objects.filter(object => {\n const mappedSearchKeywords = mapping(object).map(value => value.toLowerCase().trim())\n return !!mappedSearchKeywords.find(value => value.includes(search.toLowerCase().trim()))\n })\n}\n\n/\n Finds all values matching the search value by first mapping the values to a string and returns the list of all matches.\n \n @param search The search string e.g `name`\n \n @param objects The list of objects to be searched in\n \n @param mapping The mapping of objects to a string that is compared to the search\n \n @return The list of objects that match the search string\n /\nexport const SimpleSearchWithMapping = <T>(search: string, objects: T[], mapping: (value:T) => string) => {\n return MultiSearchWithMapping(search, objects, value => [mapping(value)])\n}\n\n/\n Finds all values matching the search value and returns the list of all matches.\n \n @param search The search string e.g `name`\n \n @param objects The list of objects to be searched in\n \n @return The list of objects that match the search string\n /\nexport const SimpleSearch = (search: string, objects: string[]) => {\n return SimpleSearchWithMapping(search, objects, value => value)\n}\n","import { useRef, type PropsWithChildren, type ReactNode, type RefObject } from 'react'\nimport clsx from 'clsx'\nimport { useOutsideClick } from '../../hooks/useOutsideClick'\nimport { useHoverState } from '../../hooks/useHoverState'\n\ntype MenuProps<T> = PropsWithChildren<{\n trigger: (onClick: () => void, ref: RefObject<T>) => ReactNode,\n /\n @default 'tl'\n /\n alignment?: 'tl' \| 'tr' \| 'bl' \| 'br' \| '_l' \| '_r' \| 't_' \| 'b_',\n showOnHover?: boolean,\n menuClassName?: string,\n}>\n\nexport type MenuItemProps = {\n onClick?: () => void,\n alignment?: 'left' \| 'right',\n className?: string,\n}\nconst MenuItem = ({\n children,\n onClick,\n alignment = 'left',\n className\n}: PropsWithChildren<MenuItemProps>) => (\n <div\n className={clsx('block px-3 py-1 bg-menu-background text-menu-text hover:brightness-90', {\n 'text-right': alignment === 'right',\n 'text-left': alignment === 'left',\n }, className)}\n onClick={onClick}\n >\n {children}\n </div>\n)\n\n// TODO: it is quite annoying that the type for the ref has to be specified manually, is there some solution around this?\n/\n A Menu Component to allow the user to see different functions\n /\nconst Menu = <T extends HTMLElement>({\n trigger,\n children,\n alignment = 'tl',\n showOnHover = false,\n menuClassName = '',\n}: MenuProps<T>) => {\n const { isHovered: isOpen, setIsHovered: setIsOpen, handlers } = useHoverState({ isDisabled: !showOnHover })\n const triggerRef = useRef<T>(null)\n const menuRef = useRef<HTMLDivElement>(null)\n useOutsideClick([triggerRef, menuRef], () => setIsOpen(false))\n\n return (\n <div\n className=\"relative\"\n {...handlers}\n >\n {trigger(() => setIsOpen(!isOpen), triggerRef)}\n {isOpen ? (\n <div ref={menuRef} onClick={e => e.stopPropagation()}\n 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]', {\n ' top-[8px]': alignment[0] === 't',\n ' bottom-[8px]': alignment[0] === 'b',\n ' left-[-8px]': alignment[1] === 'l',\n ' right-[-8px]': alignment[1] === 'r',\n }, menuClassName)}>\n {children}\n </div>\n ) : null}\n </div>\n )\n}\n\nexport { Menu, MenuItem }\n","import { useEffect } from 'react'\nimport type { RefObject } from 'react'\n\nexport const useOutsideClick = <Ts extends RefObject<HTMLElement>[]>(refs: Ts, handler: () => void) => {\n useEffect(() => {\n const listener = (event: MouseEvent \| TouchEvent) => {\n // returning means not \"not clicking outside\"\n\n // if no target exists, return\n if (event.target === null) return\n // if the target is a ref's element or descendent thereof, return\n if (refs.some((ref) => !ref.current \|\| ref.current.contains(event.target as Node))) {\n return\n }\n\n handler()\n }\n document.addEventListener('mousedown', listener)\n document.addEventListener('touchstart', listener)\n return () => {\n document.removeEventListener('mousedown', listener)\n document.removeEventListener('touchstart', listener)\n }\n }, [refs, handler])\n}\n","import type { Dispatch, SetStateAction } from 'react'\nimport { useEffect, useState } from 'react'\n\ntype UseHoverStateProps = {\n /\n The delay after which the menu is closed in milliseconds\n \n default: 200ms\n /\n closingDelay: number,\n /\n Whether the hover state management should be disabled\n \n default: false\n /\n isDisabled: boolean,\n}\n\ntype UseHoverStateReturnType = {\n /\n Whether the element is hovered\n /\n isHovered: boolean,\n /\n Function to change the current hover status\n /\n setIsHovered: Dispatch<SetStateAction<boolean>>,\n /\n Handlers to pass on to the component that should be hovered\n /\n handlers: {\n onMouseEnter: () => void,\n onMouseLeave: () => void,\n },\n}\n\nconst defaultUseHoverStateProps: UseHoverStateProps = {\n closingDelay: 200,\n isDisabled: false,\n}\n\n/\n @param props See UseHoverStateProps\n \n A react hook for managing the hover state of a component. The handlers provided should be\n * forwarded to the component which should be hovered over\n /\nexport const useHoverState = (props: Partial<UseHoverStateProps> \| undefined = undefined): UseHoverStateReturnType => {\n const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props }\n\n const [isHovered, setIsHovered] = useState(false)\n const [timer, setTimer] = useState<NodeJS.Timeout>()\n\n const onMouseEnter = () => {\n if (isDisabled) {\n return\n }\n clearTimeout(timer)\n setIsHovered(true)\n }\n\n const onMouseLeave = () => {\n if (isDisabled) {\n return\n }\n setTimer(setTimeout(() => {\n setIsHovered(false)\n }, closingDelay))\n }\n\n useEffect(() => {\n if (timer) {\n return () => {\n clearTimeout(timer)\n }\n }\n })\n\n useEffect(() => {\n if (timer) {\n clearTimeout(timer)\n }\n }, [isDisabled]) // eslint-disable-line react-hooks/exhaustive-deps\n\n return {\n isHovered, setIsHovered, handlers: { onMouseEnter, onMouseLeave }\n }\n}\n","import React, {\n useEffect,\n useRef,\n useState,\n type ChangeEvent,\n type HTMLInputTypeAttribute,\n type InputHTMLAttributes, forwardRef\n} from 'react'\nimport clsx from 'clsx'\nimport { useSaveDelay } from '../../hooks/useSaveDelay'\nimport { noop } from '../../util/noop'\nimport type { LabelProps } from './Label'\nimport { Label } from './Label'\n\nexport type InputProps = {\n /\n used for the label's `for` attribute\n /\n id?: string,\n value: string,\n label?: Omit<LabelProps, 'id'>,\n /\n @default 'text'\n /\n type?: HTMLInputTypeAttribute,\n /\n Callback for when the input's value changes\n * This is pretty much required but made optional for the rare cases where it actually isn't need such as when used with disabled\n * That could be enforced through a union type but that seems a bit overkill\n * @default noop\n /\n onChange?: (text: string, event: ChangeEvent<HTMLInputElement>) => void,\n onChangeEvent?: (event: ChangeEvent<HTMLInputElement>) => void,\n className?: string,\n onEditCompleted?: (text: string, event: ChangeEvent<HTMLInputElement>) => void,\n expanded?: boolean,\n containerClassName?: string,\n} & Omit<InputHTMLAttributes<HTMLInputElement>, 'id' \| 'value' \| 'label' \| 'type' \| 'onChange' \| 'crossOrigin'>\n\n/\n A Component for inputting text or other information\n \n Its state is managed must be managed by the parent\n /\nconst ControlledInput = ({\n id,\n type = 'text',\n value,\n label,\n onChange = noop,\n onChangeEvent = noop,\n className = '',\n onEditCompleted,\n expanded = true,\n onBlur,\n containerClassName,\n ...restProps\n }: InputProps) => {\n const {\n restartTimer,\n clearUpdateTimer\n } = useSaveDelay(() => undefined, 3000)\n const ref = useRef<HTMLInputElement>(null)\n\n useEffect(() => {\n if (restProps.autoFocus) {\n ref.current?.focus()\n }\n }, [restProps.autoFocus])\n return (\n <div className={clsx({ 'w-full': expanded }, containerClassName)}>\n {label && <Label {...label} htmlFor={id} className={clsx('mb-1', label.className)}/>}\n <input\n ref={ref}\n value={value}\n id={id}\n type={type}\n 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)}\n onBlur={event => {\n if (onBlur) {\n onBlur(event)\n }\n if (onEditCompleted) {\n onEditCompleted(event.target.value, event)\n clearUpdateTimer()\n }\n }}\n onChange={e => {\n const value = e.target.value\n if (onEditCompleted) {\n restartTimer(() => {\n onEditCompleted(value, e)\n clearUpdateTimer()\n })\n }\n onChange(value, e)\n onChangeEvent(e)\n }}\n {...restProps}\n />\n </div>\n )\n}\n\ntype UncontrolledInputProps = Omit<InputProps, 'value'> & {\n /\n @default ''\n /\n defaultValue?: string,\n}\n\n/\n A Component for inputting text or other information\n \n Its state is managed by the component itself\n /\nconst UncontrolledInput = ({\n defaultValue = '',\n onChange = noop,\n ...props\n }: UncontrolledInputProps) => {\n const [value, setValue] = useState(defaultValue)\n\n const handleChange = (text: string, event: ChangeEvent<HTMLInputElement>) => {\n setValue(text)\n onChange(text, event)\n }\n\n return (\n <ControlledInput\n {...props}\n value={value}\n onChange={handleChange}\n />\n )\n}\n\nexport type FormInputProps = InputHTMLAttributes<HTMLInputElement> & {\n id: string,\n labelText?: string,\n errorText?: string,\n labelClassName?: string,\n errorClassName?: string,\n containerClassName?: string,\n}\n\nconst FormInput = forwardRef<HTMLInputElement, FormInputProps>(function FormInput({\n id,\n labelText,\n errorText,\n className,\n labelClassName,\n errorClassName,\n containerClassName,\n required,\n ...restProps\n }, ref) {\n const input = (\n <input\n ref={ref}\n id={id}\n {...restProps}\n className={clsx(\n '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',\n {\n 'focus:border-primary focus:ring-primary': !errorText,\n 'focus:border-negative focus:ring-negative text-negative': !!errorText,\n },\n className\n )}\n />\n )\n\n return (\n <div className={clsx('flex flex-col gap-y-1', containerClassName)}>\n {labelText && (\n <label htmlFor={id} className={clsx('textstyle-label-md', labelClassName)}>\n {labelText}\n {required && <span className=\"text-primary font-bold\"></span>}\n </label>\n )}\n {input}\n {errorText && <label htmlFor={id} className={clsx('text-negative', errorClassName)}>{errorText}</label>}\n </div>\n )\n})\n\nexport {\n UncontrolledInput,\n ControlledInput as Input,\n FormInput\n}\n","import { useEffect, useState } from 'react'\n\nexport function useSaveDelay(setNotificationStatus: (isShowing: boolean) => void, delay: number) {\n const [updateTimer, setUpdateTimer] = useState<NodeJS.Timeout \| undefined>(undefined)\n const [notificationTimer, setNotificationTimer] = useState<NodeJS.Timeout \| undefined>(undefined)\n\n const restartTimer = (onSave: () => void) => {\n clearTimeout(updateTimer)\n setUpdateTimer(setTimeout(() => {\n onSave()\n setNotificationStatus(true)\n // Show Saved Notification for fade animation duration\n clearTimeout(notificationTimer)\n setNotificationTimer(setTimeout(() => {\n setNotificationStatus(false)\n clearTimeout(notificationTimer)\n }, delay))\n clearTimeout(updateTimer)\n }, delay))\n }\n\n const clearUpdateTimer = (hasSaved = true) => {\n clearTimeout(updateTimer)\n if (hasSaved) {\n setNotificationStatus(true)\n clearTimeout(notificationTimer)\n setNotificationTimer(setTimeout(() => {\n setNotificationStatus(false)\n clearTimeout(notificationTimer)\n }, delay))\n } else {\n setNotificationStatus(false)\n }\n }\n\n useEffect(() => {\n return () => {\n clearTimeout(updateTimer)\n clearTimeout(notificationTimer)\n }\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return { restartTimer, clearUpdateTimer }\n}","export const noop = () => undefined\n","import type { LabelHTMLAttributes } from 'react'\n\nexport type LabelType = 'labelSmall' \| 'labelMedium' \| 'labelBig'\nconst styleMapping: Record<LabelType, string> = {\n labelSmall: 'textstyle-label-sm',\n labelMedium: 'textstyle-label-md',\n labelBig: 'textstyle-label-lg',\n}\n\n\nexport type LabelProps = {\n /** The text for the label /\n name?: string,\n /* The styling for the label /\n labelType?: LabelType,\n} & LabelHTMLAttributes<HTMLLabelElement>\n\n/\n A Label component\n /\nexport const Label = ({\n children,\n name,\n labelType = 'labelSmall',\n ...props\n}: LabelProps) => {\n return (\n <label {...props}>\n {children ? children : (<span className={styleMapping[labelType]}>{name}</span>)}\n </label>\n )\n}\n","import { useState } from 'react'\nimport as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport type { CheckedState } from '@radix-ui/react-checkbox'\nimport { Check, Minus } from 'lucide-react'\nimport clsx from 'clsx'\nimport type { LabelProps } from './Label'\nimport { Label } from './Label'\n\ntype CheckBoxSize = 'small' \| 'medium' \| 'large'\n\nconst checkboxSizeMapping: Record<CheckBoxSize, string> = {\n small: 'size-4',\n medium: 'size-6',\n large: 'size-8',\n}\n\nconst checkboxIconSizeMapping: Record<CheckBoxSize, string> = {\n small: 'size-3',\n medium: 'size-5',\n large: 'size-7',\n}\n\ntype CheckboxProps = {\n /** used for the label's `for` attribute /\n id?: string,\n label?: Omit<LabelProps, 'id'>,\n /\n @default false\n /\n checked: CheckedState,\n disabled?: boolean,\n onChange?: (checked: boolean) => void,\n onChangeTristate?: (checked: CheckedState) => void,\n size?: CheckBoxSize,\n className?: string,\n containerClassName?: string,\n}\n\n/\n A Tristate checkbox\n \n The state is managed by the parent\n /\nconst ControlledCheckbox = ({\n id,\n label,\n checked,\n disabled,\n onChange,\n onChangeTristate,\n size = 'medium',\n className = '',\n containerClassName\n }: CheckboxProps) => {\n const usedSizeClass = checkboxSizeMapping[size]\n const innerIconSize = checkboxIconSizeMapping[size]\n\n const propagateChange = (checked: CheckedState) => {\n if (onChangeTristate) {\n onChangeTristate(checked)\n }\n if (onChange) {\n onChange(checked === 'indeterminate' ? false : checked)\n }\n }\n\n const changeValue = () => {\n const newValue = checked === 'indeterminate' ? false : !checked\n propagateChange(newValue)\n }\n\n return (\n <div className={clsx('row justify-center items-center', containerClassName)}>\n <CheckboxPrimitive.Root\n onCheckedChange={propagateChange}\n checked={checked}\n disabled={disabled}\n id={id}\n className={clsx(usedSizeClass, `items-center border-2 rounded outline-none focus:border-primary`, {\n 'text-disabled-text border-disabled-text': disabled,\n 'border-on-background': !disabled,\n 'bg-primary/30 border-primary text-primary': checked === true \|\| checked === 'indeterminate',\n 'hover:border-gray-400 focus:hover:border-primary': !checked\n }, className)}\n >\n <CheckboxPrimitive.Indicator>\n {checked === true && <Check className={innerIconSize}/>}\n {checked === 'indeterminate' && <Minus className={innerIconSize}/>}\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n {label &&\n <Label {...label} className={clsx('cursor-pointer', label.className)} htmlFor={id} onClick={changeValue}/>}\n </div>\n )\n}\n\ntype UncontrolledCheckboxProps = Omit<CheckboxProps, 'value' \| 'checked'> & {\n /\n @default false\n /\n defaultValue?: CheckedState,\n}\n\n/\n A Tristate checkbox\n \n The state is managed by this component\n */\nconst UncontrolledCheckbox = ({\n onChange,\n onChangeTristate,\n defaultValue = false,\n ...props\n }: UncontrolledCheckboxProps) => {\n const [checked, setChecked] = useState(defaultValue)\n\n const handleChange = (checked: CheckedState) => {\n if (onChangeTristate) {\n onChangeTristate(checked)\n }\n if (onChange) {\n onChange(checked === 'indeterminate' ? false : checked)\n }\n setChecked(checked)\n }\n\n return (\n <ControlledCheckbox\n {...props}\n checked={checked}\n onChangeTristate={handleChange}\n />\n )\n}\n\nexport {\n UncontrolledCheckbox,\n ControlledCheckbox as Checkbox\n}\n"],"mappings":"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","names":["useState","useEffect","useState","clsx","useEffect","useEffect","useState","jsx","useEffect","useRef","useState","clsx","useEffect","useState","jsx","jsx","jsxs","useRef","useEffect","clsx","value","FormInput","jsx","clsx","jsxs","useState","clsx","jsx","jsxs","checked","clsx","jsx","jsxs","useState","clsx"]}

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

@@ -202,7 +202,6 @@ function useSaveDelay(setNotificationStatus, delay) {
   }, []);
   return { restartTimer, clearUpdateTimer };
 }
-var useSaveDelay_default = useSaveDelay;
 // src/util/noop.ts
 var noop = () => void 0;
@@ -226,7 +225,7 @@ var ControlledInput = ({
   const {
     restartTimer,
     clearUpdateTimer
-  } = useSaveDelay_default(() => void 0, 3e3);
+  } = useSaveDelay(() => void 0, 3e3);
   const ref = (0, import_react3.useRef)(null);
   (0, import_react3.useEffect)(() => {
     if (restProps.autoFocus) {

package/dist/components/user-input/SearchableSelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/user-input/SearchableSelect.tsx","../../../src/util/simpleSearch.ts","../../../src/components/user-input/Select.tsx","../../../src/components/user-input/Label.tsx","../../../src/components/user-input/Input.tsx","../../../src/hooks/useSaveDelay.ts","../../../src/util/noop.ts"],"sourcesContent":["import { useState } from 'react'\nimport { Search } from 'lucide-react'\nimport { MultiSearchWithMapping } from '../../util/simpleSearch'\nimport type { SelectOption, SelectProps } from './Select'\nimport { Select } from './Select'\nimport { Input } from './Input'\n\nexport type SearchableSelectProps<T> = SelectProps<T> & {\n searchMapping: (value: SelectOption<T>) => string[],\n}\n\n/*\n A Select where items can be searched\n /\nexport const SearchableSelect = <T, >({\n value,\n options,\n searchMapping,\n ...selectProps\n}: SearchableSelectProps<T>) => {\n const [search, setSearch] = useState<string>('')\n const filteredOptions = MultiSearchWithMapping(search, options, searchMapping)\n return (\n <Select\n value={value}\n options={filteredOptions}\n additionalItems={[(\n <div key=\"selectSearch\" className=\"row gap-x-2 items-center\">\n <Input autoFocus={true} value={search} onChange={setSearch} />\n <Search/>\n </div>\n )]}\n {...selectProps}\n />\n )\n}\n","/\n Finds all values matching the search values by first mapping the values to a string array and then checking each entry for matches.\n * Returns the list of all matches.\n \n @param search The list of search strings e.g. `[name, type]`\n \n @param objects The list of objects to be searched in\n \n @param mapping The mapping of objects to the string properties they fulfil\n \n @return The list of objects that match all search strings\n /\nexport const MultiSubjectSearchWithMapping = <T>(search: string[], objects: T[], mapping: (value:T) => (string\| undefined)[]) => {\n return objects.filter(object => {\n const mappedSearchKeywords = mapping(object).map(value => value ? value.toLowerCase().trim() : undefined)\n return search.every(searchValue => !!mappedSearchKeywords.find(value => !!value && value.includes(searchValue.toLowerCase().trim())))\n })\n}\n\n/\n Finds all values matching the search value by first mapping the values to a string array and then checking each entry for matches.\n * Returns the list of all matches.\n \n @param search The search string e.g `name`\n \n @param objects The list of objects to be searched in\n \n @param mapping The mapping of objects to the string properties they fulfil\n \n @return The list of objects that match the search string\n /\nexport const MultiSearchWithMapping = <T>(search: string, objects: T[], mapping: (value:T) => string[]) => {\n return objects.filter(object => {\n const mappedSearchKeywords = mapping(object).map(value => value.toLowerCase().trim())\n return !!mappedSearchKeywords.find(value => value.includes(search.toLowerCase().trim()))\n })\n}\n\n/\n Finds all values matching the search value by first mapping the values to a string and returns the list of all matches.\n \n @param search The search string e.g `name`\n \n @param objects The list of objects to be searched in\n \n @param mapping The mapping of objects to a string that is compared to the search\n \n @return The list of objects that match the search string\n /\nexport const SimpleSearchWithMapping = <T>(search: string, objects: T[], mapping: (value:T) => string) => {\n return MultiSearchWithMapping(search, objects, value => [mapping(value)])\n}\n\n/\n Finds all values matching the search value and returns the list of all matches.\n \n @param search The search string e.g `name`\n \n @param objects The list of objects to be searched in\n \n @return The list of objects that match the search string\n /\nexport const SimpleSearch = (search: string, objects: string[]) => {\n return SimpleSearchWithMapping(search, objects, value => value)\n}\n","import { Menu } from '@headlessui/react'\nimport { ChevronDown, ChevronUp } from 'lucide-react'\nimport type { ReactNode } from 'react'\nimport clsx from 'clsx'\nimport type { LabelProps } from './Label'\nimport { Label } from './Label'\n\nexport type SelectOption<T> = {\n label: ReactNode,\n value: T,\n disabled?: boolean,\n className?: string,\n}\n\nexport type SelectProps<T> = {\n value?: T,\n label?: LabelProps,\n options: SelectOption<T>[],\n onChange: (value: T) => void,\n isHidingCurrentValue?: boolean,\n hintText?: string,\n showDisabledOptions?: boolean,\n className?: string,\n isDisabled?: boolean,\n textColor?: string,\n hoverColor?: string,\n /\n The items will be at the start of the select and aren't selectable\n /\n additionalItems?: ReactNode[],\n selectedDisplayOverwrite?: ReactNode,\n};\n\n/\n A Select Component for selecting form a list of options\n \n The State is managed by the parent\n /\nexport const Select = <T, >({\n value,\n label,\n options,\n onChange,\n isHidingCurrentValue = true,\n hintText = '',\n showDisabledOptions = true,\n isDisabled,\n className,\n textColor = 'text-menu-text',\n hoverColor = 'hover:brightness-90',\n additionalItems,\n selectedDisplayOverwrite,\n }: SelectProps<T>) => {\n // Notice: for more complex types this check here might need an additional compare method\n let filteredOptions = isHidingCurrentValue ? options.filter(option => option.value !== value) : options\n if (!showDisabledOptions) {\n filteredOptions = filteredOptions.filter(value => !value.disabled)\n }\n const selectedOption = options.find(option => option.value === value)\n if (value !== undefined && selectedOption === undefined && selectedDisplayOverwrite === undefined) {\n console.warn('The selected value is not found in the options list. This might be an error on your part or' +\n ' default behavior if it is complex data type on which === does not work. In case of the latter' +\n ' use selectedDisplayOverwrite to set your selected text or component')\n }\n\n const borderColor = 'border-menu-border'\n\n return (\n <div className={clsx(className)}>\n {label && (\n <Label {...label} labelType={label.labelType ?? 'labelBig'} className={clsx('mb-1', label.className)}/>\n )}\n <Menu as=\"div\" className=\"relative text-menu-text\">\n {({ open }) => (\n <>\n <Menu.Button\n className={clsx(\n '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',\n textColor, borderColor,\n {\n 'rounded-b-lg': !open,\n [hoverColor]: !isDisabled,\n 'bg-disabled-background cursor-not-allowed text-disabled': isDisabled\n }\n )}\n disabled={isDisabled}\n >\n <span>{selectedDisplayOverwrite ?? selectedOption?.label ?? hintText}</span>\n {open ? <ChevronUp/> : <ChevronDown/>}\n </Menu.Button>\n <Menu.Items\n className=\"absolute w-full z-10 rounded-b-lg bg-menu-background text-menu-text shadow-lg max-h-[500px] overflow-y-auto\"\n >\n {(additionalItems ?? []).map((item, index) => (\n <div key={`additionalItems${index}`}\n className={clsx(borderColor, 'px-4 py-2 overflow-hidden whitespace-nowrap text-ellipsis border-2 border-t-0', {\n 'border-b-0 rounded-b-lg': filteredOptions.length === 0 && index === (additionalItems?.length ?? 1) - 1,\n })}\n >\n {item}\n </div>\n ))}\n {filteredOptions.map((option, index) => (\n <Menu.Item key={`item${index}`}>\n {\n <div\n className={clsx('px-4 py-2 overflow-hidden whitespace-nowrap text-ellipsis border-2 border-t-0 cursor-pointer',\n option.className, borderColor, {\n 'brightness-90': option.value === value,\n 'brightness-95': index % 2 === 1,\n 'text-disabled bg-disabled-background cursor-not-allowed': !!option.disabled,\n 'bg-menu-background text-menu-text hover:brightness-90 cursor-pointer': !option.disabled,\n 'rounded-b-lg': index === filteredOptions.length - 1,\n })}\n onClick={() => {\n if (!option.disabled) {\n onChange(option.value)\n }\n }}\n >\n {option.label}\n </div>\n }\n </Menu.Item>\n ))}\n </Menu.Items>\n </>\n )}\n </Menu>\n </div>\n )\n}\n","import type { LabelHTMLAttributes } from 'react'\n\nexport type LabelType = 'labelSmall' \| 'labelMedium' \| 'labelBig'\nconst styleMapping: Record<LabelType, string> = {\n labelSmall: 'textstyle-label-sm',\n labelMedium: 'textstyle-label-md',\n labelBig: 'textstyle-label-lg',\n}\n\n\nexport type LabelProps = {\n /* The text for the label /\n name?: string,\n /* The styling for the label /\n labelType?: LabelType,\n} & LabelHTMLAttributes<HTMLLabelElement>\n\n/\n A Label component\n /\nexport const Label = ({\n children,\n name,\n labelType = 'labelSmall',\n ...props\n}: LabelProps) => {\n return (\n <label {...props}>\n {children ? children : (<span className={styleMapping[labelType]}>{name}</span>)}\n </label>\n )\n}\n","import React, {\n useEffect,\n useRef,\n useState,\n type ChangeEvent,\n type HTMLInputTypeAttribute,\n type InputHTMLAttributes, forwardRef\n} from 'react'\nimport clsx from 'clsx'\nimport useSaveDelay from '../../hooks/useSaveDelay'\nimport { noop } from '../../util/noop'\nimport type { LabelProps } from './Label'\nimport { Label } from './Label'\n\nexport type InputProps = {\n /\n used for the label's `for` attribute\n /\n id?: string,\n value: string,\n label?: Omit<LabelProps, 'id'>,\n /\n @default 'text'\n /\n type?: HTMLInputTypeAttribute,\n /\n Callback for when the input's value changes\n * This is pretty much required but made optional for the rare cases where it actually isn't need such as when used with disabled\n * That could be enforced through a union type but that seems a bit overkill\n * @default noop\n /\n onChange?: (text: string, event: ChangeEvent<HTMLInputElement>) => void,\n onChangeEvent?: (event: ChangeEvent<HTMLInputElement>) => void,\n className?: string,\n onEditCompleted?: (text: string, event: ChangeEvent<HTMLInputElement>) => void,\n expanded?: boolean,\n containerClassName?: string,\n} & Omit<InputHTMLAttributes<HTMLInputElement>, 'id' \| 'value' \| 'label' \| 'type' \| 'onChange' \| 'crossOrigin'>\n\n/\n A Component for inputting text or other information\n \n Its state is managed must be managed by the parent\n /\nconst ControlledInput = ({\n id,\n type = 'text',\n value,\n label,\n onChange = noop,\n onChangeEvent = noop,\n className = '',\n onEditCompleted,\n expanded = true,\n onBlur,\n containerClassName,\n ...restProps\n }: InputProps) => {\n const {\n restartTimer,\n clearUpdateTimer\n } = useSaveDelay(() => undefined, 3000)\n const ref = useRef<HTMLInputElement>(null)\n\n useEffect(() => {\n if (restProps.autoFocus) {\n ref.current?.focus()\n }\n }, [restProps.autoFocus])\n return (\n <div className={clsx({ 'w-full': expanded }, containerClassName)}>\n {label && <Label {...label} htmlFor={id} className={clsx('mb-1', label.className)}/>}\n <input\n ref={ref}\n value={value}\n id={id}\n type={type}\n 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)}\n onBlur={event => {\n if (onBlur) {\n onBlur(event)\n }\n if (onEditCompleted) {\n onEditCompleted(event.target.value, event)\n clearUpdateTimer()\n }\n }}\n onChange={e => {\n const value = e.target.value\n if (onEditCompleted) {\n restartTimer(() => {\n onEditCompleted(value, e)\n clearUpdateTimer()\n })\n }\n onChange(value, e)\n onChangeEvent(e)\n }}\n {...restProps}\n />\n </div>\n )\n}\n\ntype UncontrolledInputProps = Omit<InputProps, 'value'> & {\n /\n @default ''\n /\n defaultValue?: string,\n}\n\n/\n A Component for inputting text or other information\n \n Its state is managed by the component itself\n /\nconst UncontrolledInput = ({\n defaultValue = '',\n onChange = noop,\n ...props\n }: UncontrolledInputProps) => {\n const [value, setValue] = useState(defaultValue)\n\n const handleChange = (text: string, event: ChangeEvent<HTMLInputElement>) => {\n setValue(text)\n onChange(text, event)\n }\n\n return (\n <ControlledInput\n {...props}\n value={value}\n onChange={handleChange}\n />\n )\n}\n\nexport type FormInputProps = InputHTMLAttributes<HTMLInputElement> & {\n id: string,\n labelText?: string,\n errorText?: string,\n labelClassName?: string,\n errorClassName?: string,\n containerClassName?: string,\n}\n\nconst FormInput = forwardRef<HTMLInputElement, FormInputProps>(function FormInput({\n id,\n labelText,\n errorText,\n className,\n labelClassName,\n errorClassName,\n containerClassName,\n required,\n ...restProps\n }, ref) {\n const input = (\n <input\n ref={ref}\n id={id}\n {...restProps}\n className={clsx(\n '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',\n {\n 'focus:border-primary focus:ring-primary': !errorText,\n 'focus:border-negative focus:ring-negative text-negative': !!errorText,\n },\n className\n )}\n />\n )\n\n return (\n <div className={clsx('flex flex-col gap-y-1', containerClassName)}>\n {labelText && (\n <label htmlFor={id} className={clsx('textstyle-label-md', labelClassName)}>\n {labelText}\n {required && <span className=\"text-primary font-bold\"></span>}\n </label>\n )}\n {input}\n {errorText && <label htmlFor={id} className={clsx('text-negative', errorClassName)}>{errorText}</label>}\n </div>\n )\n})\n\nexport {\n UncontrolledInput,\n ControlledInput as Input,\n FormInput\n}\n","import { useEffect, useState } from 'react'\n\nfunction useSaveDelay(setNotificationStatus: (isShowing: boolean) => void, delay: number) {\n const [updateTimer, setUpdateTimer] = useState<NodeJS.Timeout \| undefined>(undefined)\n const [notificationTimer, setNotificationTimer] = useState<NodeJS.Timeout \| undefined>(undefined)\n\n const restartTimer = (onSave: () => void) => {\n clearTimeout(updateTimer)\n setUpdateTimer(setTimeout(() => {\n onSave()\n setNotificationStatus(true)\n // Show Saved Notification for fade animation duration\n clearTimeout(notificationTimer)\n setNotificationTimer(setTimeout(() => {\n setNotificationStatus(false)\n clearTimeout(notificationTimer)\n }, delay))\n clearTimeout(updateTimer)\n }, delay))\n }\n\n const clearUpdateTimer = (hasSaved = true) => {\n clearTimeout(updateTimer)\n if (hasSaved) {\n setNotificationStatus(true)\n clearTimeout(notificationTimer)\n setNotificationTimer(setTimeout(() => {\n setNotificationStatus(false)\n clearTimeout(notificationTimer)\n }, delay))\n } else {\n setNotificationStatus(false)\n }\n }\n\n useEffect(() => {\n return () => {\n clearTimeout(updateTimer)\n clearTimeout(notificationTimer)\n }\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return { restartTimer, clearUpdateTimer }\n}\n\nexport default useSaveDelay\n","export const noop = () => undefined\n"],"mappings":"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","names":["import_react","import_lucide_react","import_jsx_runtime","value","clsx","import_react","import_clsx","import_react","import_jsx_runtime","clsx","value","FormInput","clsx","import_jsx_runtime"]}
1	+ {"version":3,"sources":["../../../src/components/user-input/SearchableSelect.tsx","../../../src/util/simpleSearch.ts","../../../src/components/user-input/Select.tsx","../../../src/components/user-input/Label.tsx","../../../src/components/user-input/Input.tsx","../../../src/hooks/useSaveDelay.ts","../../../src/util/noop.ts"],"sourcesContent":["import { useState } from 'react'\nimport { Search } from 'lucide-react'\nimport { MultiSearchWithMapping } from '../../util/simpleSearch'\nimport type { SelectOption, SelectProps } from './Select'\nimport { Select } from './Select'\nimport { Input } from './Input'\n\nexport type SearchableSelectProps<T> = SelectProps<T> & {\n searchMapping: (value: SelectOption<T>) => string[],\n}\n\n/*\n A Select where items can be searched\n /\nexport const SearchableSelect = <T, >({\n value,\n options,\n searchMapping,\n ...selectProps\n}: SearchableSelectProps<T>) => {\n const [search, setSearch] = useState<string>('')\n const filteredOptions = MultiSearchWithMapping(search, options, searchMapping)\n return (\n <Select\n value={value}\n options={filteredOptions}\n additionalItems={[(\n <div key=\"selectSearch\" className=\"row gap-x-2 items-center\">\n <Input autoFocus={true} value={search} onChange={setSearch} />\n <Search/>\n </div>\n )]}\n {...selectProps}\n />\n )\n}\n","/\n Finds all values matching the search values by first mapping the values to a string array and then checking each entry for matches.\n * Returns the list of all matches.\n \n @param search The list of search strings e.g. `[name, type]`\n \n @param objects The list of objects to be searched in\n \n @param mapping The mapping of objects to the string properties they fulfil\n \n @return The list of objects that match all search strings\n /\nexport const MultiSubjectSearchWithMapping = <T>(search: string[], objects: T[], mapping: (value:T) => (string\| undefined)[]) => {\n return objects.filter(object => {\n const mappedSearchKeywords = mapping(object).map(value => value ? value.toLowerCase().trim() : undefined)\n return search.every(searchValue => !!mappedSearchKeywords.find(value => !!value && value.includes(searchValue.toLowerCase().trim())))\n })\n}\n\n/\n Finds all values matching the search value by first mapping the values to a string array and then checking each entry for matches.\n * Returns the list of all matches.\n \n @param search The search string e.g `name`\n \n @param objects The list of objects to be searched in\n \n @param mapping The mapping of objects to the string properties they fulfil\n \n @return The list of objects that match the search string\n /\nexport const MultiSearchWithMapping = <T>(search: string, objects: T[], mapping: (value:T) => string[]) => {\n return objects.filter(object => {\n const mappedSearchKeywords = mapping(object).map(value => value.toLowerCase().trim())\n return !!mappedSearchKeywords.find(value => value.includes(search.toLowerCase().trim()))\n })\n}\n\n/\n Finds all values matching the search value by first mapping the values to a string and returns the list of all matches.\n \n @param search The search string e.g `name`\n \n @param objects The list of objects to be searched in\n \n @param mapping The mapping of objects to a string that is compared to the search\n \n @return The list of objects that match the search string\n /\nexport const SimpleSearchWithMapping = <T>(search: string, objects: T[], mapping: (value:T) => string) => {\n return MultiSearchWithMapping(search, objects, value => [mapping(value)])\n}\n\n/\n Finds all values matching the search value and returns the list of all matches.\n \n @param search The search string e.g `name`\n \n @param objects The list of objects to be searched in\n \n @return The list of objects that match the search string\n /\nexport const SimpleSearch = (search: string, objects: string[]) => {\n return SimpleSearchWithMapping(search, objects, value => value)\n}\n","import { Menu } from '@headlessui/react'\nimport { ChevronDown, ChevronUp } from 'lucide-react'\nimport type { ReactNode } from 'react'\nimport clsx from 'clsx'\nimport type { LabelProps } from './Label'\nimport { Label } from './Label'\n\nexport type SelectOption<T> = {\n label: ReactNode,\n value: T,\n disabled?: boolean,\n className?: string,\n}\n\nexport type SelectProps<T> = {\n value?: T,\n label?: LabelProps,\n options: SelectOption<T>[],\n onChange: (value: T) => void,\n isHidingCurrentValue?: boolean,\n hintText?: string,\n showDisabledOptions?: boolean,\n className?: string,\n isDisabled?: boolean,\n textColor?: string,\n hoverColor?: string,\n /\n The items will be at the start of the select and aren't selectable\n /\n additionalItems?: ReactNode[],\n selectedDisplayOverwrite?: ReactNode,\n};\n\n/\n A Select Component for selecting form a list of options\n \n The State is managed by the parent\n /\nexport const Select = <T, >({\n value,\n label,\n options,\n onChange,\n isHidingCurrentValue = true,\n hintText = '',\n showDisabledOptions = true,\n isDisabled,\n className,\n textColor = 'text-menu-text',\n hoverColor = 'hover:brightness-90',\n additionalItems,\n selectedDisplayOverwrite,\n }: SelectProps<T>) => {\n // Notice: for more complex types this check here might need an additional compare method\n let filteredOptions = isHidingCurrentValue ? options.filter(option => option.value !== value) : options\n if (!showDisabledOptions) {\n filteredOptions = filteredOptions.filter(value => !value.disabled)\n }\n const selectedOption = options.find(option => option.value === value)\n if (value !== undefined && selectedOption === undefined && selectedDisplayOverwrite === undefined) {\n console.warn('The selected value is not found in the options list. This might be an error on your part or' +\n ' default behavior if it is complex data type on which === does not work. In case of the latter' +\n ' use selectedDisplayOverwrite to set your selected text or component')\n }\n\n const borderColor = 'border-menu-border'\n\n return (\n <div className={clsx(className)}>\n {label && (\n <Label {...label} labelType={label.labelType ?? 'labelBig'} className={clsx('mb-1', label.className)}/>\n )}\n <Menu as=\"div\" className=\"relative text-menu-text\">\n {({ open }) => (\n <>\n <Menu.Button\n className={clsx(\n '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',\n textColor, borderColor,\n {\n 'rounded-b-lg': !open,\n [hoverColor]: !isDisabled,\n 'bg-disabled-background cursor-not-allowed text-disabled': isDisabled\n }\n )}\n disabled={isDisabled}\n >\n <span>{selectedDisplayOverwrite ?? selectedOption?.label ?? hintText}</span>\n {open ? <ChevronUp/> : <ChevronDown/>}\n </Menu.Button>\n <Menu.Items\n className=\"absolute w-full z-10 rounded-b-lg bg-menu-background text-menu-text shadow-lg max-h-[500px] overflow-y-auto\"\n >\n {(additionalItems ?? []).map((item, index) => (\n <div key={`additionalItems${index}`}\n className={clsx(borderColor, 'px-4 py-2 overflow-hidden whitespace-nowrap text-ellipsis border-2 border-t-0', {\n 'border-b-0 rounded-b-lg': filteredOptions.length === 0 && index === (additionalItems?.length ?? 1) - 1,\n })}\n >\n {item}\n </div>\n ))}\n {filteredOptions.map((option, index) => (\n <Menu.Item key={`item${index}`}>\n {\n <div\n className={clsx('px-4 py-2 overflow-hidden whitespace-nowrap text-ellipsis border-2 border-t-0 cursor-pointer',\n option.className, borderColor, {\n 'brightness-90': option.value === value,\n 'brightness-95': index % 2 === 1,\n 'text-disabled bg-disabled-background cursor-not-allowed': !!option.disabled,\n 'bg-menu-background text-menu-text hover:brightness-90 cursor-pointer': !option.disabled,\n 'rounded-b-lg': index === filteredOptions.length - 1,\n })}\n onClick={() => {\n if (!option.disabled) {\n onChange(option.value)\n }\n }}\n >\n {option.label}\n </div>\n }\n </Menu.Item>\n ))}\n </Menu.Items>\n </>\n )}\n </Menu>\n </div>\n )\n}\n","import type { LabelHTMLAttributes } from 'react'\n\nexport type LabelType = 'labelSmall' \| 'labelMedium' \| 'labelBig'\nconst styleMapping: Record<LabelType, string> = {\n labelSmall: 'textstyle-label-sm',\n labelMedium: 'textstyle-label-md',\n labelBig: 'textstyle-label-lg',\n}\n\n\nexport type LabelProps = {\n /* The text for the label /\n name?: string,\n /* The styling for the label /\n labelType?: LabelType,\n} & LabelHTMLAttributes<HTMLLabelElement>\n\n/\n A Label component\n /\nexport const Label = ({\n children,\n name,\n labelType = 'labelSmall',\n ...props\n}: LabelProps) => {\n return (\n <label {...props}>\n {children ? children : (<span className={styleMapping[labelType]}>{name}</span>)}\n </label>\n )\n}\n","import React, {\n useEffect,\n useRef,\n useState,\n type ChangeEvent,\n type HTMLInputTypeAttribute,\n type InputHTMLAttributes, forwardRef\n} from 'react'\nimport clsx from 'clsx'\nimport { useSaveDelay } from '../../hooks/useSaveDelay'\nimport { noop } from '../../util/noop'\nimport type { LabelProps } from './Label'\nimport { Label } from './Label'\n\nexport type InputProps = {\n /\n used for the label's `for` attribute\n /\n id?: string,\n value: string,\n label?: Omit<LabelProps, 'id'>,\n /\n @default 'text'\n /\n type?: HTMLInputTypeAttribute,\n /\n Callback for when the input's value changes\n * This is pretty much required but made optional for the rare cases where it actually isn't need such as when used with disabled\n * That could be enforced through a union type but that seems a bit overkill\n * @default noop\n /\n onChange?: (text: string, event: ChangeEvent<HTMLInputElement>) => void,\n onChangeEvent?: (event: ChangeEvent<HTMLInputElement>) => void,\n className?: string,\n onEditCompleted?: (text: string, event: ChangeEvent<HTMLInputElement>) => void,\n expanded?: boolean,\n containerClassName?: string,\n} & Omit<InputHTMLAttributes<HTMLInputElement>, 'id' \| 'value' \| 'label' \| 'type' \| 'onChange' \| 'crossOrigin'>\n\n/\n A Component for inputting text or other information\n \n Its state is managed must be managed by the parent\n /\nconst ControlledInput = ({\n id,\n type = 'text',\n value,\n label,\n onChange = noop,\n onChangeEvent = noop,\n className = '',\n onEditCompleted,\n expanded = true,\n onBlur,\n containerClassName,\n ...restProps\n }: InputProps) => {\n const {\n restartTimer,\n clearUpdateTimer\n } = useSaveDelay(() => undefined, 3000)\n const ref = useRef<HTMLInputElement>(null)\n\n useEffect(() => {\n if (restProps.autoFocus) {\n ref.current?.focus()\n }\n }, [restProps.autoFocus])\n return (\n <div className={clsx({ 'w-full': expanded }, containerClassName)}>\n {label && <Label {...label} htmlFor={id} className={clsx('mb-1', label.className)}/>}\n <input\n ref={ref}\n value={value}\n id={id}\n type={type}\n 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)}\n onBlur={event => {\n if (onBlur) {\n onBlur(event)\n }\n if (onEditCompleted) {\n onEditCompleted(event.target.value, event)\n clearUpdateTimer()\n }\n }}\n onChange={e => {\n const value = e.target.value\n if (onEditCompleted) {\n restartTimer(() => {\n onEditCompleted(value, e)\n clearUpdateTimer()\n })\n }\n onChange(value, e)\n onChangeEvent(e)\n }}\n {...restProps}\n />\n </div>\n )\n}\n\ntype UncontrolledInputProps = Omit<InputProps, 'value'> & {\n /\n @default ''\n /\n defaultValue?: string,\n}\n\n/\n A Component for inputting text or other information\n \n Its state is managed by the component itself\n /\nconst UncontrolledInput = ({\n defaultValue = '',\n onChange = noop,\n ...props\n }: UncontrolledInputProps) => {\n const [value, setValue] = useState(defaultValue)\n\n const handleChange = (text: string, event: ChangeEvent<HTMLInputElement>) => {\n setValue(text)\n onChange(text, event)\n }\n\n return (\n <ControlledInput\n {...props}\n value={value}\n onChange={handleChange}\n />\n )\n}\n\nexport type FormInputProps = InputHTMLAttributes<HTMLInputElement> & {\n id: string,\n labelText?: string,\n errorText?: string,\n labelClassName?: string,\n errorClassName?: string,\n containerClassName?: string,\n}\n\nconst FormInput = forwardRef<HTMLInputElement, FormInputProps>(function FormInput({\n id,\n labelText,\n errorText,\n className,\n labelClassName,\n errorClassName,\n containerClassName,\n required,\n ...restProps\n }, ref) {\n const input = (\n <input\n ref={ref}\n id={id}\n {...restProps}\n className={clsx(\n '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',\n {\n 'focus:border-primary focus:ring-primary': !errorText,\n 'focus:border-negative focus:ring-negative text-negative': !!errorText,\n },\n className\n )}\n />\n )\n\n return (\n <div className={clsx('flex flex-col gap-y-1', containerClassName)}>\n {labelText && (\n <label htmlFor={id} className={clsx('textstyle-label-md', labelClassName)}>\n {labelText}\n {required && <span className=\"text-primary font-bold\"></span>}\n </label>\n )}\n {input}\n {errorText && <label htmlFor={id} className={clsx('text-negative', errorClassName)}>{errorText}</label>}\n </div>\n )\n})\n\nexport {\n UncontrolledInput,\n ControlledInput as Input,\n FormInput\n}\n","import { useEffect, useState } from 'react'\n\nexport function useSaveDelay(setNotificationStatus: (isShowing: boolean) => void, delay: number) {\n const [updateTimer, setUpdateTimer] = useState<NodeJS.Timeout \| undefined>(undefined)\n const [notificationTimer, setNotificationTimer] = useState<NodeJS.Timeout \| undefined>(undefined)\n\n const restartTimer = (onSave: () => void) => {\n clearTimeout(updateTimer)\n setUpdateTimer(setTimeout(() => {\n onSave()\n setNotificationStatus(true)\n // Show Saved Notification for fade animation duration\n clearTimeout(notificationTimer)\n setNotificationTimer(setTimeout(() => {\n setNotificationStatus(false)\n clearTimeout(notificationTimer)\n }, delay))\n clearTimeout(updateTimer)\n }, delay))\n }\n\n const clearUpdateTimer = (hasSaved = true) => {\n clearTimeout(updateTimer)\n if (hasSaved) {\n setNotificationStatus(true)\n clearTimeout(notificationTimer)\n setNotificationTimer(setTimeout(() => {\n setNotificationStatus(false)\n clearTimeout(notificationTimer)\n }, delay))\n } else {\n setNotificationStatus(false)\n }\n }\n\n useEffect(() => {\n return () => {\n clearTimeout(updateTimer)\n clearTimeout(notificationTimer)\n }\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return { restartTimer, clearUpdateTimer }\n}","export const noop = () => undefined\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAAA,gBAAyB;AACzB,IAAAC,uBAAuB;;;AC8BhB,IAAM,yBAAyB,CAAI,QAAgB,SAAc,YAAmC;AACzG,SAAO,QAAQ,OAAO,YAAU;AAC9B,UAAM,uBAAuB,QAAQ,MAAM,EAAE,IAAI,WAAS,MAAM,YAAY,EAAE,KAAK,CAAC;AACpF,WAAO,CAAC,CAAC,qBAAqB,KAAK,WAAS,MAAM,SAAS,OAAO,YAAY,EAAE,KAAK,CAAC,CAAC;AAAA,EACzF,CAAC;AACH;;;ACpCA,mBAAqB;AACrB,0BAAuC;AAEvC,kBAAiB;;;ACyBa;AAzB9B,IAAM,eAA0C;AAAA,EAC9C,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,UAAU;AACZ;AAaO,IAAM,QAAQ,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,MAAkB;AAChB,SACE,4CAAC,WAAO,GAAG,OACR,qBAAW,WAAY,4CAAC,UAAK,WAAW,aAAa,SAAS,GAAI,gBAAK,GAC1E;AAEJ;;;ADuCQ,IAAAC,sBAAA;AAhCD,IAAM,SAAS,CAAM;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,uBAAuB;AAAA,EACvB,WAAW;AAAA,EACX,sBAAsB;AAAA,EACtB;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,aAAa;AAAA,EACb;AAAA,EACA;AACF,MAAsB;AAEhD,MAAI,kBAAkB,uBAAuB,QAAQ,OAAO,YAAU,OAAO,UAAU,KAAK,IAAI;AAChG,MAAI,CAAC,qBAAqB;AACxB,sBAAkB,gBAAgB,OAAO,CAAAC,WAAS,CAACA,OAAM,QAAQ;AAAA,EACnE;AACA,QAAM,iBAAiB,QAAQ,KAAK,YAAU,OAAO,UAAU,KAAK;AACpE,MAAI,UAAU,UAAa,mBAAmB,UAAa,6BAA6B,QAAW;AACjG,YAAQ,KAAK,+PAE2D;AAAA,EAC1E;AAEA,QAAM,cAAc;AAEpB,SACE,8CAAC,SAAI,eAAW,YAAAC,SAAK,SAAS,GAC3B;AAAA,aACC,6CAAC,SAAO,GAAG,OAAO,WAAW,MAAM,aAAa,YAAY,eAAW,YAAAA,SAAK,QAAQ,MAAM,SAAS,GAAE;AAAA,IAEvG,6CAAC,qBAAK,IAAG,OAAM,WAAU,2BACtB,WAAC,EAAE,KAAK,MACP,8EACE;AAAA;AAAA,QAAC,kBAAK;AAAA,QAAL;AAAA,UACC,eAAW,YAAAA;AAAA,YACT;AAAA,YACA;AAAA,YAAW;AAAA,YACX;AAAA,cACE,gBAAgB,CAAC;AAAA,cACjB,CAAC,UAAU,GAAG,CAAC;AAAA,cACf,2DAA2D;AAAA,YAC7D;AAAA,UACF;AAAA,UACA,UAAU;AAAA,UAEV;AAAA,yDAAC,UAAM,sCAA4B,gBAAgB,SAAS,UAAS;AAAA,YACpE,OAAO,6CAAC,iCAAS,IAAK,6CAAC,mCAAW;AAAA;AAAA;AAAA,MACrC;AAAA,MACA;AAAA,QAAC,kBAAK;AAAA,QAAL;AAAA,UACC,WAAU;AAAA,UAER;AAAA,gCAAmB,CAAC,GAAG,IAAI,CAAC,MAAM,UAClC;AAAA,cAAC;AAAA;AAAA,gBACI,eAAW,YAAAA,SAAK,aAAa,iFAAiF;AAAA,kBAC5G,2BAA2B,gBAAgB,WAAW,KAAK,WAAW,iBAAiB,UAAU,KAAK;AAAA,gBACxG,CAAC;AAAA,gBAEH;AAAA;AAAA,cALO,kBAAkB,KAAK;AAAA,YAMjC,CACD;AAAA,YACA,gBAAgB,IAAI,CAAC,QAAQ,UAC5B,6CAAC,kBAAK,MAAL,EAEG;AAAA,cAAC;AAAA;AAAA,gBACC,eAAW,YAAAA;AAAA,kBAAK;AAAA,kBACd,OAAO;AAAA,kBAAW;AAAA,kBAAa;AAAA,oBAC7B,iBAAiB,OAAO,UAAU;AAAA,oBAClC,iBAAiB,QAAQ,MAAM;AAAA,oBAC/B,2DAA2D,CAAC,CAAC,OAAO;AAAA,oBACpE,wEAAwE,CAAC,OAAO;AAAA,oBAChF,gBAAgB,UAAU,gBAAgB,SAAS;AAAA,kBACrD;AAAA,gBAAC;AAAA,gBACH,SAAS,MAAM;AACb,sBAAI,CAAC,OAAO,UAAU;AACpB,6BAAS,OAAO,KAAK;AAAA,kBACvB;AAAA,gBACF;AAAA,gBAEC,iBAAO;AAAA;AAAA,YACV,KAlBY,OAAO,KAAK,EAoB5B,CACD;AAAA;AAAA;AAAA,MACH;AAAA,OACF,GAEJ;AAAA,KACF;AAEJ;;;AEnIA,IAAAC,gBAOO;AACP,IAAAC,eAAiB;;;ACRjB,IAAAC,gBAAoC;AAE7B,SAAS,aAAa,uBAAqD,OAAe;AAC/F,QAAM,CAAC,aAAa,cAAc,QAAI,wBAAqC,MAAS;AACpF,QAAM,CAAC,mBAAmB,oBAAoB,QAAI,wBAAqC,MAAS;AAEhG,QAAM,eAAe,CAAC,WAAuB;AAC3C,iBAAa,WAAW;AACxB,mBAAe,WAAW,MAAM;AAC9B,aAAO;AACP,4BAAsB,IAAI;AAE1B,mBAAa,iBAAiB;AAC9B,2BAAqB,WAAW,MAAM;AACpC,8BAAsB,KAAK;AAC3B,qBAAa,iBAAiB;AAAA,MAChC,GAAG,KAAK,CAAC;AACT,mBAAa,WAAW;AAAA,IAC1B,GAAG,KAAK,CAAC;AAAA,EACX;AAEA,QAAM,mBAAmB,CAAC,WAAW,SAAS;AAC5C,iBAAa,WAAW;AACxB,QAAI,UAAU;AACZ,4BAAsB,IAAI;AAC1B,mBAAa,iBAAiB;AAC9B,2BAAqB,WAAW,MAAM;AACpC,8BAAsB,KAAK;AAC3B,qBAAa,iBAAiB;AAAA,MAChC,GAAG,KAAK,CAAC;AAAA,IACX,OAAO;AACL,4BAAsB,KAAK;AAAA,IAC7B;AAAA,EACF;AAEA,+BAAU,MAAM;AACd,WAAO,MAAM;AACX,mBAAa,WAAW;AACxB,mBAAa,iBAAiB;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO,EAAE,cAAc,iBAAiB;AAC1C;;;AC3CO,IAAM,OAAO,MAAM;;;AFsEtB,IAAAC,sBAAA;AA1BJ,IAAM,kBAAkB,CAAC;AAAA,EACE;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAkB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI,aAAa,MAAM,QAAW,GAAI;AACtC,QAAM,UAAM,sBAAyB,IAAI;AAEzC,+BAAU,MAAM;AACd,QAAI,UAAU,WAAW;AACvB,UAAI,SAAS,MAAM;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,UAAU,SAAS,CAAC;AACxB,SACE,8CAAC,SAAI,eAAW,aAAAC,SAAK,EAAE,UAAU,SAAS,GAAG,kBAAkB,GAC5D;AAAA,aAAS,6CAAC,SAAO,GAAG,OAAO,SAAS,IAAI,eAAW,aAAAA,SAAK,QAAQ,MAAM,SAAS,GAAE;AAAA,IAClF;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAW,aAAAA,SAAK,yKAAyK,SAAS;AAAA,QAClM,QAAQ,WAAS;AACf,cAAI,QAAQ;AACV,mBAAO,KAAK;AAAA,UACd;AACA,cAAI,iBAAiB;AACnB,4BAAgB,MAAM,OAAO,OAAO,KAAK;AACzC,6BAAiB;AAAA,UACnB;AAAA,QACF;AAAA,QACA,UAAU,OAAK;AACb,gBAAMC,SAAQ,EAAE,OAAO;AACvB,cAAI,iBAAiB;AACnB,yBAAa,MAAM;AACjB,8BAAgBA,QAAO,CAAC;AACxB,+BAAiB;AAAA,YACnB,CAAC;AAAA,UACH;AACA,mBAASA,QAAO,CAAC;AACjB,wBAAc,CAAC;AAAA,QACjB;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,KACF;AAEJ;AA4CA,IAAM,gBAAY,0BAA6C,SAASC,WAAU;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,KAAK;AACxF,QAAM,QACJ;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACJ,eAAW,aAAAC;AAAA,QACT;AAAA,QACA;AAAA,UACE,2CAA2C,CAAC;AAAA,UAC5C,2DAA2D,CAAC,CAAC;AAAA,QAC/D;AAAA,QACA;AAAA,MACA;AAAA;AAAA,EACJ;AAGF,SACE,8CAAC,SAAI,eAAW,aAAAA,SAAK,yBAAyB,kBAAkB,GAC7D;AAAA,iBACC,8CAAC,WAAM,SAAS,IAAI,eAAW,aAAAA,SAAK,sBAAsB,cAAc,GACrE;AAAA;AAAA,MACA,YAAY,6CAAC,UAAK,WAAU,0BAAyB,eAAC;AAAA,OACzD;AAAA,IAED;AAAA,IACA,aAAa,6CAAC,WAAM,SAAS,IAAI,eAAW,aAAAA,SAAK,iBAAiB,cAAc,GAAI,qBAAU;AAAA,KACjG;AAEJ,CAAC;;;AJ9JO,IAAAC,sBAAA;AAbD,IAAM,mBAAmB,CAAM;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAgC;AAC9B,QAAM,CAAC,QAAQ,SAAS,QAAI,wBAAiB,EAAE;AAC/C,QAAM,kBAAkB,uBAAuB,QAAQ,SAAS,aAAa;AAC7E,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,MACT,iBAAiB,CACf,8CAAC,SAAuB,WAAU,4BAChC;AAAA,qDAAC,mBAAM,WAAW,MAAM,OAAO,QAAQ,UAAU,WAAW;AAAA,QAC5D,6CAAC,+BAAM;AAAA,WAFA,cAGT,CACD;AAAA,MACA,GAAG;AAAA;AAAA,EACN;AAEJ;","names":["import_react","import_lucide_react","import_jsx_runtime","value","clsx","import_react","import_clsx","import_react","import_jsx_runtime","clsx","value","FormInput","clsx","import_jsx_runtime"]}