\n \n {!hideIcon && iconElement && (\n
\n {iconElement}\n
\n )}\n
\n {title && (\n \n {title}\n \n )}\n {renderMessage({ message, tag: 'p', classes: 'text-text-default' })}\n
\n
\n {cloneElement(action, { variant: ButtonVariants.QUIET })}\n
\n )}\n {dismissable && (\n \n
\n )}\n \n )}\n\n {isVertical && (!!action || dismissable) && (\n \n {!!action && cloneElement(action, { className: 'w-full', variant: ButtonVariants.QUIET })}\n {action && dismissable && \n {dismissText}\n \n )}\n
\n )}\n \n )\n}\n","export * from './InlineNotification'\n","'use client'\nimport { InfoNoIcon, InfoSuccessIcon } from '@lib/components/icons'\nimport React from 'react'\nimport { Spinner } from '../../../atoms'\nimport { ToastVariant } from '@lib/types'\n\nexport const getToastIcon = (variant?: ToastVariant): JSX.Element | null => {\n switch (variant) {\n case ToastVariant.LOADING:\n return \n {message && (\n \n \n {variant && !!getToastIcon(variant) && (\n {getToastIcon(variant)} \n )}\n {message} \n
\n\n {actionText && onAction && (\n onAction()}>\n {actionText}\n \n )}\n\n {!loading && onRemove && (\n \n onRemove(id)}\n icon={
\n )}\n \n )}\n \n )\n}\n","export * from './Toast'\n","export * from './FixedNotification'\nexport * from './InlineNotification'\nexport * from './Toast'\n","'use client'\nimport React from 'react'\n\nexport enum ChoiceListTypes {\n DEFAULT = 'default',\n INLINE = 'inline',\n}\n\nexport interface ChoiceListProps extends React.HTMLAttributes {\n /** Vertical or horizontal layout */\n type?: ChoiceListTypes\n}\n\n/** UI component for grouping radio buttons */\nexport const ChoiceList = ({ type = ChoiceListTypes.DEFAULT, children, ...props }: ChoiceListProps) => {\n const getTypeClasses = () => {\n switch (type) {\n case ChoiceListTypes.INLINE:\n return 'inline-flex flex-wrap items-center gap-x-3 gap-y-2'\n default:\n return 'flex flex-col'\n }\n }\n\n return {children}
\n}\n","import { Text } from '@lib/components/atoms'\nimport { TextTypes } from '@lib/types'\nimport React from 'react'\n\nexport interface FieldsetProps extends React.HTMLAttributes {\n title: string\n}\n\nexport const Fieldset = ({ title, children, ...props }: FieldsetProps): JSX.Element => {\n return (\n \n \n {title}\n \n {children}
\n \n )\n}\n","'use client'\nimport React, { useEffect, useRef, useState, useImperativeHandle, ReactNode } from 'react'\n\nimport { ChangeHandler } from 'react-hook-form'\n\nexport interface FormCheckboxProps extends Omit, 'onChange'> {\n label?: string | ReactNode\n id?: string\n form?: string\n name?: string\n value?: string | number\n checked?: boolean\n disabled?: boolean\n readOnly?: boolean\n indeterminate?: boolean\n onChange?: ChangeHandler | ((value: unknown, checked: boolean) => void)\n /** Adds a box around the checkbox */\n boxed?: boolean\n}\n\nexport const FormCheckbox = React.forwardRef(\n (\n { label, id, form, name, value, checked, disabled, readOnly, indeterminate = false, onChange, boxed, ...rest },\n ref,\n ) => {\n const [checkedValue, setCheckedValue] = useState(checked)\n const checkboxRef = useRef(null)\n useImperativeHandle(ref, () => checkboxRef.current!, [ref])\n\n const onChangeHandler = () => {\n if (!readOnly && !disabled) {\n setCheckedValue(!checkedValue)\n }\n }\n\n useEffect(() => {\n if (checkboxRef?.current) {\n checkboxRef.current.indeterminate = !!indeterminate\n }\n }, [indeterminate])\n\n const labelClasses = `\n ${boxed ? 'checkbox--boxed' : ''}\n ${disabled ? 'checkbox--disabled' : ''}\n ${readOnly ? 'checkbox--readonly' : ''}\n `\n\n return (\n \n {\n onChange && onChange(e, !checkedValue)\n onChangeHandler()\n }}\n onKeyDown={(e) => {\n if (e.key === 'Space') {\n onChange && onChange(e, !checkedValue)\n onChangeHandler()\n }\n }}\n checked={checkedValue}\n data-cy=\"input-checkbox\"\n />\n {label && {label} }\n \n )\n },\n)\n","'use client'\nimport { Text } from '@lib/components/atoms'\nimport { TextTypes } from '@lib/types'\nimport React from 'react'\n\nexport interface FormHelpTextProps {\n children: React.ReactNode\n}\n\nexport const FormHelpText = ({ children }: FormHelpTextProps) => {children} \n","'use client'\n\nimport React from 'react'\nimport { Dictionary, DictionaryModel, ReplacerObject } from '@stopen-helpers/stopen-helpers'\nimport { createContext, ReactNode } from 'react'\n\ninterface ComponentTranslationProviderValue {\n getLabel: ([key, defaultValue]: string[], replacer?: ReplacerObject | undefined) => string\n}\n\nexport const ComponentTranslationContext = createContext({\n getLabel: ([key, defaultValue]: string[], replacer?: ReplacerObject | undefined) => defaultValue ?? key,\n})\n\ninterface ComponentTranslationProviderProps {\n children: ReactNode\n dictionary: DictionaryModel // translations fetched from CMS\n}\n\nexport const ComponentTranslationProvider = ({\n children,\n dictionary = {},\n}: ComponentTranslationProviderProps): JSX.Element => {\n const getLabel = ([key, defaultValue]: string[], replacer?: ReplacerObject | undefined): string => {\n const value = Dictionary.getText(dictionary, key, replacer)\n if (value === key && defaultValue) return defaultValue\n return value ?? key\n }\n const providerValue: ComponentTranslationProviderValue = { getLabel }\n\n return {children} \n}\n","/** This file should NOT be included in the build */\n\nexport const MESSAGE_KEYS = {\n TO: ['STO.COMPONENTS.COMMON.TO', 'tot'],\n SHOW_MORE: ['STO.COMPONENTS.COMMON.SHOW_MORE', 'Toon meer'],\n SHOW_LESS: ['STO.COMPONENTS.COMMON.SHOW_LESS', 'Toon minder'],\n OPTIONAL: ['STO.COMPONENTS.COMMON.FORM.OPTIONAL', 'Optioneel'],\n ACTION_ADD: ['STO.COMPONENTS.COMMON.FORM.ADD', 'Toevoegen'],\n FILTERS_HIDE: ['STO.COMPONENTS.COMMON.FILTERS.HIDE', 'Filters verbergen'],\n FILTERS_SHOW: ['STO.COMPONENTS.COMMON.FILTERS.SHOW', 'Filters tonen'],\n FILTERS_RESET: ['STO.COMPONENTS.COMMON.FILTERS.RESET', 'Filters resetten'],\n TABLE_ACTIONS: ['STO.COMPONENTS.COMMON.TABLE.ACTIONS', 'Acties'],\n SYSTEM: ['STO.COMPONENTS.COMMON.SYSTEM', 'Systeem'],\n ALL: ['STO.COMPONENTS.COMMON.ALL', 'Alle'],\n FILTERS: ['STO.COMPONENTS.COMMON.FILTERS', 'Filters'],\n X_MORE: ['STO.COMPONENTS.COMMON.X_MORE', 'meer'],\n}\n","'use client'\nimport React, { HTMLAttributes, useContext } from 'react'\nimport { ComponentTranslationContext } from '../../../providers/component-translation-provider'\nimport { MESSAGE_KEYS } from '@lib/constants/messageKeys'\n\nexport interface FormInputLabelProps extends HTMLAttributes {\n name: string\n optional?: boolean\n disabled?: boolean\n children: React.ReactNode\n}\n\nexport const FormInputLabel = ({ children, name, optional, disabled = false, ...props }: FormInputLabelProps) => {\n const { getLabel } = useContext(ComponentTranslationContext)\n\n return (\n \n {children}\n {optional && {` (${getLabel(MESSAGE_KEYS.OPTIONAL)})`} }\n \n )\n}\n","'use client'\n\nimport { IconSizes, InfoErrorIcon } from '@lib/components/icons'\nimport React from 'react'\n\nexport interface FormInputValidationText {\n children: React.ReactNode\n}\n\nexport const FormInputValidationText = ({ children }: FormInputValidationText) => (\n \n {children}\n \n)\n","'use client'\n\nimport React, { ReactNode } from 'react'\nimport { FieldError, Message } from 'react-hook-form'\nimport { FormHelpText } from '../FormHelpText/FormHelpText'\nimport { FormInputLabel } from '../FormInputLabel/FormInputLabel'\nimport { FormInputValidationText } from '../FormInputValidationText/FormInputValidationText'\nimport { Tooltip } from '@lib/components/atoms'\n\nconst ROOT_CLASS = 'form-field'\n\nexport interface FormFieldProps extends React.HTMLAttributes {\n label?: ReactNode\n disabled?: boolean\n readOnly?: boolean\n error?: string | Message | FieldError | ReactNode\n showError?: boolean\n name: string\n /**\n * Only use helpText on inputs that don't share the same row as other FormFields. Doing that will cause the Inputs to be misaligned.\n */\n helpText?: ReactNode\n optional?: boolean\n isQuiet?: boolean\n /** Hides the label visually without hiding it for screen readers */\n screenReaderOnly?: boolean\n tooltip?: ReactNode\n children: ReactNode\n}\n\nexport const FormField = ({\n disabled = false,\n readOnly = false,\n error,\n showError = true,\n name,\n label,\n helpText,\n optional = false,\n isQuiet = false,\n screenReaderOnly = false,\n tooltip,\n children,\n ...props\n}: FormFieldProps) => {\n const getClasses = (): string => {\n let classes: string[] = [ROOT_CLASS]\n\n if (props.className) classes.push(props.className)\n if (error) classes.push('error')\n if (disabled) classes.push('disabled')\n if (readOnly) classes.push('readonly')\n if (isQuiet) classes.push('quiet')\n if (screenReaderOnly) classes.push('screenreader-only')\n\n return classes.join(' ')\n }\n\n const getTestId = (): string => {\n let testId = 'form-field'\n if (error) testId += '--has-error'\n return testId\n }\n\n return (\n \n {label && (\n
\n
\n \n {label}\n \n
\n {tooltip &&
}\n
\n )}\n {helpText && !error && (\n
\n {helpText} \n
\n )}\n
\n {children}\n \n \n <>{error}\n \n
\n )}\n \n )\n}\n","import { useEffect, useState } from 'react'\n\ninterface useInputWrapperProps {\n onFocusHandler: () => void\n onBlurHandler: () => void\n classes: string\n}\n\nconst useInputWrapper = (\n initialFocusState: boolean,\n disabled: boolean = false,\n error: boolean = false\n): useInputWrapperProps => {\n const defaultClass = 'input-wrapper'\n const [focused, setFocused] = useState(initialFocusState)\n const [classes, setClasses] = useState(defaultClass)\n\n const onFocusHandler = (): void => setFocused(!disabled)\n const onBlurHandler = (): void => setFocused(false)\n\n const getClasses = (): string => {\n let classes: string[] = [defaultClass]\n if (focused) classes.push('focused')\n if (error) classes.push('error')\n if (disabled) classes.push('disabled')\n return classes.join(' ')\n }\n\n useEffect(() => {\n if (disabled) setFocused(false)\n }, [disabled])\n\n useEffect(() => {\n setClasses(getClasses())\n }, [focused, error, disabled])\n\n return { onFocusHandler, onBlurHandler, classes }\n}\n\nexport default useInputWrapper\n","'use client'\n\nimport { toDateOnStartDay } from '@stopen-helpers/stopen-helpers'\nimport { ClearIcon, ScheduleIcon } from '@lib/components/icons'\nimport { enUS } from 'date-fns/locale/en-US'\nimport { nl } from 'date-fns/locale/nl'\nimport React from 'react'\nimport DatePicker, { registerLocale } from 'react-datepicker'\nimport 'react-datepicker/dist/react-datepicker.css'\nimport useInputWrapper from '../../../hooks/useInputWrapper'\n\nregisterLocale('nl', nl)\nregisterLocale('en', enUS)\n\nconst dateFormatSeparators = ['/', '-', ' ', '.']\n\nexport interface FormDatePickerProps {\n isClearable?: boolean\n onChange: (option: Date | null) => void\n disabled?: boolean\n defaultDate?: Date | null\n placeholderText?: string\n /** @default 'off' */\n autoComplete?: string | undefined\n error?: boolean\n readOnly?: boolean\n minDate?: Date | null\n maxDate?: Date | null\n locale?: number\n id: string | undefined\n autoFocus?: boolean\n name?: string\n isMonthPicker?: boolean\n /**\n * The date format for this input using slashes\n * @default 'dd/MM/yyyy'\n */\n dateFormat?: string\n}\n\nexport const FormDatePicker = ({\n onChange,\n isClearable = true,\n disabled = false,\n defaultDate = null,\n placeholderText = '',\n autoComplete = 'off',\n error,\n readOnly,\n minDate,\n maxDate,\n locale,\n id,\n autoFocus = false,\n name,\n isMonthPicker = false,\n dateFormat = 'dd/MM/yyyy',\n ...props\n}: FormDatePickerProps) => {\n const { onFocusHandler, onBlurHandler, classes } = useInputWrapper(false, disabled)\n\n const getRegisteredLocale = (): string => {\n switch (locale) {\n case 0:\n return 'nl'\n case 1:\n return 'en'\n default:\n return 'nl'\n }\n }\n\n const changeHandler = (date: Date | null): void => {\n onChange(date ? toDateOnStartDay(date) : null)\n onBlurHandler()\n }\n\n /**\n * Creates a date format (based on the dateFormat prop) for each of the separators defined in dateFormatSeparators.\n * @returns array of date formats\n */\n const dateFormats = (): string[] => dateFormatSeparators.map((format) => dateFormat.replaceAll('/', format))\n\n return (\n \n
onFocusHandler()}\n onBlur={() => onBlurHandler()}\n onChange={changeHandler}\n minDate={minDate}\n maxDate={maxDate}\n dateFormatCalendar=\"MMM\"\n showYearDropdown\n scrollableYearDropdown\n dateFormat={dateFormats()}\n locale={getRegisteredLocale()}\n yearDropdownItemNumber={30}\n autoFocus={autoFocus}\n autoComplete={autoComplete}\n name={name}\n showMonthYearPicker={isMonthPicker}\n popperProps={{ strategy: 'fixed' }}\n />\n\n {isClearable && !readOnly && defaultDate !== null && (\n \n changeHandler(null)} />\n
\n )}\n\n {!readOnly && (\n \n
\n )}\n , HTMLInputElement>, 'onChange'> {\n disabled?: boolean\n form?: string\n readOnly?: boolean\n loading?: boolean\n error?: boolean\n id?: string\n name?: string\n placeholder?: string\n type?: string\n prefix?: string\n suffix?: ReactNode\n onChange?: (value: string) => void\n onBlur?: ChangeHandler\n onClickSuffix?: () => void\n value?: string\n autoFocus?: boolean\n}\n\nexport const FormInput = ({\n disabled,\n error,\n prefix,\n suffix,\n form,\n onChange,\n onBlur,\n onClickSuffix,\n readOnly = false,\n type = 'text',\n value,\n autoFocus = false,\n loading = false,\n ...rest\n}: FormInputProps) => {\n const { onFocusHandler, onBlurHandler, classes } = useInputWrapper(false, disabled, error)\n\n return (\n \n {prefix && {prefix} }\n\n {\n onBlur && onBlur(event)\n onBlurHandler()\n }}\n onChange={(event) => onChange && onChange(event.target.value?.replace(EMOJIS, ''))}\n value={value}\n type={type}\n autoFocus={autoFocus}\n aria-invalid={error}\n />\n {suffix && !onClickSuffix && {suffix} }\n\n {suffix && onClickSuffix && (\n \n {suffix}\n \n )}\n {loading &&
\n )\n}\n","'use client'\n\nimport { AddIcon, RemoveIcon } from '@lib/components/icons'\nimport React, { ChangeEvent, HTMLAttributes, ReactNode } from 'react'\nimport { ChangeHandler } from 'react-hook-form'\nimport useInputWrapper from '../../../hooks/useInputWrapper'\nimport { Button, ButtonVariants } from '../../atoms'\n\nexport enum ControlsPosition {\n LEFT = 'left',\n SPLIT = 'split',\n RIGHT = 'right',\n}\n\nexport interface FormNumberInputProps extends Omit, 'onChange'> {\n disabled?: boolean\n form?: string\n readOnly?: boolean\n error?: boolean\n id?: string\n name?: string\n prefix?: string\n suffix?: string | ReactNode\n showControls?: boolean\n controlsPosition?: ControlsPosition\n min?: number\n max?: number\n step?: number\n onChange?: (value: number | string) => void\n onBlur?: ChangeHandler\n onClickSuffix?: () => void\n value?: number | string\n autoFocus?: boolean\n required?: boolean\n}\n\nexport const FormNumberInput = ({\n disabled,\n error,\n prefix,\n form,\n suffix,\n showControls,\n controlsPosition = ControlsPosition.RIGHT,\n min = 0,\n max,\n step = 1,\n onChange,\n onBlur,\n onClickSuffix,\n readOnly = false,\n value,\n autoFocus = false,\n ...rest\n}: FormNumberInputProps) => {\n const { onFocusHandler, onBlurHandler, classes } = useInputWrapper(false, disabled, error)\n\n const controlsAreOnLeft: boolean = controlsPosition === ControlsPosition.LEFT\n const controlsAreSplit: boolean = controlsPosition === ControlsPosition.SPLIT\n\n const increment = () => {\n if (typeof value !== 'number') {\n onChange?.(step)\n return\n }\n\n const newValue: number = (value ?? min) + step\n onChange?.(typeof max === 'number' ? Math.min(newValue, max) : newValue)\n }\n\n const decrement = () => {\n if (typeof value !== 'number') {\n onChange?.(min)\n return\n }\n\n const newValue: number = (value ?? min) - step\n onChange?.(Math.max(newValue, min))\n }\n\n const changeHandler = (event: ChangeEvent): void => {\n const inputValue: string = event.target.value\n const hasEmptyInput: boolean = inputValue === ''\n const value: string | number = hasEmptyInput ? inputValue : parseFloat(inputValue)\n onChange?.(value)\n }\n\n const getInputClasses = (): string => {\n let inputClasses = 'w-full px-3 py-2 density-lg:py-3 flex-1 outline-0 bg-transparent placeholder:italic'\n if (controlsAreOnLeft) inputClasses += 'text-right'\n if (controlsAreSplit) inputClasses += ' text-center'\n return inputClasses\n }\n\n return (\n \n {prefix &&
{prefix} }\n\n
{\n onBlur && onBlur(event)\n onBlurHandler()\n }}\n onChange={changeHandler}\n value={value}\n min={min}\n max={max}\n step={step}\n type=\"number\"\n autoFocus={autoFocus}\n formNoValidate\n aria-invalid={error}\n />\n\n {suffix && !onClickSuffix && {suffix} }\n\n {suffix && onClickSuffix && (\n \n {suffix}\n \n )}\n\n {showControls && (\n <>\n decrement()}\n icon={ increment()}\n icon={ {\n label?: string\n id?: string\n name?: string\n value?: string | number\n checked?: boolean\n disabled?: boolean\n readOnly?: boolean\n onChange?: ChangeHandler | ((value?: unknown) => void)\n onBlur?: ChangeHandler\n boxed?: boolean\n}\n\nexport const FormRadioField = React.forwardRef(\n ({ label, id, name, value, checked, disabled, readOnly, onChange, onBlur, boxed, ...rest }, ref) => {\n const [checkedValue, setCheckedValue] = useState(checked)\n\n const onChangeHandler = () => {\n if (!readOnly && !disabled) {\n setCheckedValue(!checkedValue)\n }\n }\n\n const labelClasses = `\n ${boxed ? 'radio--boxed' : ''}\n ${disabled ? 'radio--disabled' : ''}\n ${readOnly ? 'radio--readonly' : ''}\n `\n\n return (\n \n {\n onChange && onChange(e)\n onChangeHandler()\n }}\n onKeyDown={(e) => {\n if (e.key === 'Space') {\n onChange && onChange(e)\n onChangeHandler()\n }\n }}\n onBlur={(e) => {\n onBlur && onBlur(e)\n }}\n defaultChecked={checkedValue}\n />\n {label && {label} }\n \n )\n },\n)\n","'use client'\n\nimport React, { useEffect, useRef, useState } from 'react'\nimport useInputWrapper from '../../../hooks/useInputWrapper'\nimport { ChangeHandler } from 'react-hook-form'\nimport {\n hasFourNumberCharacters,\n isCharacterNumberOrColon,\n isNumberOrLetterKey,\n} from '@lib/components/FormElements/FormTimeInput/helpers/TimeInputHelpers'\n\nexport interface FormTimeInputProps extends Omit, 'onChange'> {\n disabled?: boolean\n readOnly?: boolean\n error?: boolean\n onChange: (value: string) => void\n onBlur?: ChangeHandler\n value?: string\n autoFocus?: boolean\n}\n\nexport const FormTimeInput = ({\n disabled = false,\n error = false,\n readOnly = false,\n value = '',\n onChange,\n onBlur,\n autoFocus = false,\n ...rest\n}: FormTimeInputProps) => {\n const { onFocusHandler, onBlurHandler, classes } = useInputWrapper(false, disabled, error)\n const [time, setTime] = useState('')\n const inputRef = useRef(null)\n\n const changeHandler = (value = '') => {\n setTime(formatInputToValidTime(value))\n onChange(formatInputToValidTime(value))\n }\n\n /**\n * Prevents entering of unwanted characters in the time input\n */\n const handleKeyPress = (event: React.KeyboardEvent) => {\n const keyValue = event.key\n\n if (isNumberOrLetterKey(keyValue) && (!isCharacterNumberOrColon(keyValue) || hasFourNumberCharacters(time))) {\n event.preventDefault()\n }\n }\n\n /**\n * Ensures that upon focusing in the time input field the current input is selected\n */\n const handleFocus = () => {\n if (inputRef.current) {\n inputRef.current.select()\n }\n onFocusHandler()\n }\n\n const formatInputToValidTime = (input: string): string => {\n // Extract the valid parts for hours and minutes\n let hours = Math.min(parseInt(input.substring(0, 2), 10), 23)\n let minutes = isNaN(Number(input[2]))\n ? Math.min(parseInt(input.substring(3, 5), 10), 59)\n : Math.min(parseInt(input.substring(2, 4), 10), 59)\n\n if (isNaN(hours)) hours = 0\n if (isNaN(minutes)) minutes = 0\n\n // Ensure hours and minutes are within valid ranges\n const validHours: string = hours.toString().padStart(2, '0')\n const validMinutes: string = minutes.toString().padStart(2, '0')\n\n // Return the formatted valid time\n return `${validHours}:${validMinutes}`\n }\n\n useEffect(() => {\n if (value !== time) setTime(value ?? '')\n }, [value])\n\n return (\n \n {\n changeHandler(event.target?.value)\n onBlurHandler()\n }}\n onChange={(event) => setTime(event.target.value)}\n onKeyDown={handleKeyPress}\n placeholder=\"hh:mm\"\n autoFocus={autoFocus}\n aria-invalid={error}\n />\n
\n )\n}\n","'use client'\nimport React from 'react'\n\nexport interface FormSectionProps extends React.HTMLAttributes {\n children: React.ReactNode\n}\n\nexport const FormSection = ({ children, ...props }: FormSectionProps) => {\n return (\n \n {children}\n
\n )\n}\n","'use client'\nimport React from 'react'\nimport {\n Filter,\n UpdateFilterValueModel,\n FilterId,\n FilterOperator,\n FilterProviderModel,\n FilterValue,\n} from '@lib/types/Filters'\nimport { createContext, ReactNode, useContext, useEffect, useState } from 'react'\n\nexport interface FilterProviderProps {\n initialFilters?: Filter[]\n onFiltersUpdate?: (currentActiveFilters: Filter[]) => void\n children: ReactNode\n}\n\nexport const FilterContext = createContext({\n isInitialized: false,\n filters: [],\n hasFiltersWithValue: false,\n hasClearableFilters: false,\n updateFilterValue: () => undefined,\n isExpanded: false,\n getFilterId: () => '',\n getFilterValue: () => undefined,\n hasFilterForKey: () => false,\n toggleFilters: () => undefined,\n clearFilters: () => undefined,\n registerFilter: () => undefined,\n getFilterById: () => undefined,\n})\n\n/** @deprecated use useContext(FilterContext) */\nexport const useFilterContext = (): FilterProviderModel => {\n return useContext(FilterContext)\n}\n\nexport const FilterProvider = ({ onFiltersUpdate, children, initialFilters }: FilterProviderProps) => {\n const [filters, setFilters] = useState(initialFilters || [])\n const [hasClearableFilters, setHasClearableFilters] = useState(false)\n const [hasFiltersWithValue, setHasFiltersWithValue] = useState(false)\n const [isExpanded, setIsExpanded] = useState(false)\n\n const updateFilterValue: UpdateFilterValueModel = ({ filter, newValue }): void => {\n const matchingFilter = filters.find((stateFilter) => stateFilter.id === filter.id)\n if (!matchingFilter) return\n if (matchingFilter.value === newValue) return\n\n setFilters((stateFilters) => {\n return [\n ...stateFilters.filter((stateFilter) => stateFilter.id !== matchingFilter.id),\n { ...matchingFilter, value: newValue },\n ]\n })\n }\n\n const toggleFilters = (): void => {\n setIsExpanded((expanded) => !expanded)\n }\n\n const clearFilters = (): void => {\n setFilters((stateFilters) => [\n ...stateFilters.map((filter) => (filter.nonClearable ? filter : { ...filter, value: undefined })),\n ])\n }\n\n const getFilterId = (key: string, operator: FilterOperator): string => {\n return `${key}__${operator}`\n }\n\n const getFilterById = (id: FilterId): Filter | undefined => {\n return filters.find((filter) => filter.id === id)\n }\n\n const getFilterValue = (id: FilterId): FilterValue | undefined => {\n return filters.find((filter) => filter.id === id)?.value\n }\n\n const hasFilterForKey = (key: string): boolean => {\n return filters.some((filter) => filter.key === key && !!filter.value)\n }\n\n const registerFilter = (filter: Filter) => {\n setFilters((stateFilters) => {\n if (stateFilters.find((stateFilter) => stateFilter.id === filter.id)) {\n return stateFilters\n }\n return [...stateFilters, filter]\n })\n }\n\n useEffect(() => {\n setHasClearableFilters(filters.filter((filter) => !filter.nonClearable && !!filter.value).length > 0)\n setHasFiltersWithValue(filters.filter((filter) => !!filter.value).length > 0)\n if (onFiltersUpdate) {\n onFiltersUpdate(filters.filter((filter) => !!filter.value))\n }\n }, [filters])\n\n const FilterProviderData: FilterProviderModel = {\n isInitialized: true,\n filters,\n hasFiltersWithValue,\n hasClearableFilters,\n updateFilterValue,\n isExpanded,\n getFilterId,\n getFilterValue,\n hasFilterForKey,\n toggleFilters,\n clearFilters,\n registerFilter,\n getFilterById,\n }\n\n return {children} \n}\n","'use client'\nimport {\n LayoutBottomPaneState,\n LayoutSidebarState,\n LayoutState,\n LayoutTopPaneState,\n} from '@lib/components/organisms/Layout/Types/layoutTypes'\nimport React, { Dispatch, ReactNode, SetStateAction, useContext, useState } from 'react'\nimport { ReactElement, createContext } from 'react'\n\nexport interface LayoutContextProps {\n topPaneState: LayoutTopPaneState\n sidebarState: LayoutSidebarState\n bottomPaneState: LayoutBottomPaneState\n layoutState: LayoutState\n setTopPaneState: (topPaneState: LayoutTopPaneState) => void\n setSidebarState: (sidebarState: LayoutSidebarState) => void\n setBottomPaneState: (bottomPaneState: LayoutBottomPaneState) => void\n setLayoutState: Dispatch>\n cleanUpContext: (layoutChildren?: ReactElement[]) => void\n}\n\nexport const LayoutContext = createContext({} as LayoutContextProps)\n\nexport const useLayoutContext = () => useContext(LayoutContext)\n\ninterface LayoutProviderProps {\n children: ReactNode\n}\n\n/**\n * @deprecated Prefer not to use the Layout provider. It is not compatible with RSC components.\n * @description\n * The LayoutDelegator provides children through the layoutPanes property in the layoutState.\n * The Layout listens to this context and combines it with it's own state, giving priority to the LayoutProvider.context\n *\n * The LayoutProvider also stores the state of the panes. For example:\n * 1. The LayoutSidebarPane is closed from the LayoutTopPane\n * 2. The LayoutSidebarPane listening to the provider context then closes\n * 3. The LayoutContentPane listening to the provider context, adjusts it's padding and spacing if necessary\n *\n * @TODO make Layout independent of LayoutProvider so it can be used without it when no LayoutDelegator is used.\n * @TODO Make sure that the LayoutPanes don't use the LayoutProvider. The best way is using a StaticStateOfLayoutPanes object.\n * @see {@link https://jira.hosted-tools.com/browse/STOPEN-5761}\n * */\nexport const LayoutProvider = ({ children }: LayoutProviderProps): JSX.Element => {\n const [topPaneState, setTopPaneState] = useState({})\n const [sidebarState, setSidebarState] = useState({})\n const [bottomPaneState, setBottomPaneState] = useState({})\n const [layoutState, setLayoutState] = useState({})\n\n /**\n * Checks whether the layout should have its different types of panes, and if not empties them.\n *\n * @param layoutChildren\n */\n const cleanUpContext = (layoutChildren?: ReactElement[]) => {\n let [hasSidebar, hasTopPane, hasBottomPane] = [false, false, false]\n\n if (!layoutChildren) {\n setLayoutState({})\n }\n\n layoutChildren?.forEach((child) => {\n if (child.props.paneType?.toLowerCase().includes('top-pane')) hasTopPane = true\n if (child.props.paneType?.toLowerCase().includes('sidebar')) hasSidebar = true\n if (child.props.paneType?.toLowerCase().includes('bottom-pane')) hasBottomPane = true\n })\n\n if (!hasTopPane) setTopPaneState({})\n if (!hasSidebar) setSidebarState({})\n if (!hasBottomPane) setBottomPaneState({})\n }\n\n const value: LayoutContextProps = {\n topPaneState,\n sidebarState,\n bottomPaneState,\n layoutState,\n setTopPaneState,\n setSidebarState,\n setBottomPaneState,\n setLayoutState,\n cleanUpContext,\n }\n\n return {children} \n}\n","'use client'\n\nimport React, { createContext, ReactNode, useContext, useMemo, useState } from 'react'\nimport { generateRandomKey } from '@stopen-helpers/stopen-helpers'\nimport { NotificationModel, NotificationsNotifyOptions, NotificationVariant } from '@lib/types'\n\nexport type NotificationProviderValue = {\n remove: (id: string) => void\n success: (options: NotificationsNotifyOptions) => void\n warning: (options: NotificationsNotifyOptions) => void\n error: (options: NotificationsNotifyOptions) => void\n info: (options: NotificationsNotifyOptions) => void\n notifications: NotificationModel[]\n}\n\nexport const NotificationContext = createContext({\n remove: () => null,\n success: () => null,\n warning: () => null,\n error: () => null,\n info: () => null,\n notifications: [],\n})\n\n/** @deprecated use useContext(NotificationContext) */\nexport const useNotification = (): NotificationProviderValue => {\n return useContext(NotificationContext)\n}\n\ninterface NotificationProviderProps {\n children: ReactNode\n}\n\n/**\n * This provider is responsible for receiving and showing fixed notifications.\n */\nexport const NotificationProvider = ({ children }: NotificationProviderProps) => {\n const [notifications, setNotifications] = useState([])\n\n const notify = (options: NotificationsNotifyOptions) => {\n const id = generateRandomKey()\n const newNotifications = [\n ...notifications,\n {\n id,\n ...options,\n variant: options.variant ?? NotificationVariant.INFO,\n },\n ]\n setNotifications(newNotifications)\n }\n\n const success = (options: NotificationsNotifyOptions) => {\n notify({ ...options, variant: NotificationVariant.SUCCESS })\n }\n\n const warning = (options: NotificationsNotifyOptions) => {\n notify({ ...options, variant: NotificationVariant.WARNING })\n }\n\n const error = (options: NotificationsNotifyOptions) => {\n notify({ ...options, variant: NotificationVariant.ERROR })\n }\n\n const info = (options: NotificationsNotifyOptions) => {\n notify({ ...options, variant: NotificationVariant.INFO })\n }\n\n const remove = (id: string) => {\n const newNotifications = notifications.filter((notification) => notification.id !== id)\n setNotifications(newNotifications)\n }\n\n const providerValue = useMemo(\n () => ({\n remove,\n success,\n warning,\n error,\n info,\n notifications,\n }),\n [notifications],\n )\n\n return {children} \n}\n","'use client'\n\nimport { getColumnWidths, getTableElement } from '@lib/providers/table/helpers/resize-helpers'\nimport { Column, TableHeaderVariants, TableVariants, TableSizes, ColumnInformation } from '@lib/types'\nimport React, { createContext, useContext, useEffect, useId, useState } from 'react'\n\nexport interface TableProviderModel {\n columns: Column[]\n variant: TableVariants\n size: TableSizes\n tableId?: string\n columnWidths?: ColumnInformation[]\n isCollapsible: boolean\n isEditable: boolean\n isInitialized: boolean\n headerVariant?: TableHeaderVariants\n isInline?: boolean\n isStretched?: boolean\n isScrollable: boolean\n isNested?: boolean\n sortHandler?: ((sortBy: string) => void) | undefined\n hideHeader?: boolean\n hasBorder?: boolean\n hasBackground?: boolean\n isLoading?: boolean\n}\n\nexport const TableContext = createContext({\n columns: [],\n variant: TableVariants.STRETCHED,\n headerVariant: TableHeaderVariants.REGULAR,\n size: TableSizes.MEDIUM,\n isCollapsible: false,\n isEditable: false,\n isInitialized: false,\n isScrollable: false,\n hideHeader: false,\n})\n\n/** @deprecated use useContext(TableContext) */\nexport const useTableContext = () => {\n return useContext(TableContext)\n}\n\ninterface TableProviderProps\n extends Pick<\n TableProviderModel,\n | 'columns'\n | 'variant'\n | 'isCollapsible'\n | 'isEditable'\n | 'sortHandler'\n | 'hideHeader'\n | 'hasBorder'\n | 'hasBackground'\n | 'headerVariant'\n | 'isLoading'\n > {\n size: TableSizes | undefined\n children: React.ReactNode\n}\n\nexport const TableProvider = ({\n columns = [],\n variant,\n size,\n isCollapsible = false,\n isEditable = false,\n sortHandler,\n hideHeader,\n hasBorder,\n hasBackground,\n headerVariant,\n isLoading,\n children,\n}: TableProviderProps) => {\n const tableId = useId()\n const escapedId = CSS.escape(tableId)\n const parentProvider = useContext(TableContext)\n const [columnWidths, setColumnWidths] = useState()\n const hasStickyColumns = () => columns.some((col) => col.sticky)\n const resizeObserver = hasStickyColumns()\n ? new ResizeObserver(() => setColumnWidths(getColumnWidths(escapedId)))\n : null\n\n const getAllColumns = (): Column[] => {\n const allColumns = columns\n if (isCollapsible && !allColumns.find((column) => column.isCollapseColumn)) {\n allColumns.push({\n title: '',\n hasNoPadding: true,\n isActionColumn: true,\n isCollapseColumn: true,\n sticky: allColumns.at(-1)?.sticky === 'right' ? 'right' : undefined,\n })\n }\n return allColumns.map((column, index) => ({ id: index, ...column }))\n }\n\n /**\n * Set up resize observer for every table header cell\n * Their width can change individually from getting fresh data, and we want to recalculate all their positions based on those widths.\n */\n const setUpEventListeners = () => {\n const table = getTableElement(escapedId)\n if (!table) return\n\n table\n .querySelectorAll('.table-header-cell--sticky-right')\n .forEach((headerCellElement) => resizeObserver?.observe(headerCellElement))\n }\n\n useEffect(() => {\n if (hasStickyColumns()) setUpEventListeners()\n return () => resizeObserver?.disconnect()\n }, [])\n\n const isNested: boolean = parentProvider?.isInitialized\n const isStretched: boolean = variant === TableVariants.STRETCHED && !isNested\n const defaultSize: TableSizes = isStretched ? TableSizes.LARGE : TableSizes.MEDIUM\n\n const providerValue: TableProviderModel = {\n columns: getAllColumns(),\n variant,\n size: size ?? defaultSize,\n isCollapsible,\n isEditable,\n isInline: variant === TableVariants.INLINE,\n isStretched,\n isNested,\n hideHeader,\n hasBorder,\n hasBackground,\n isScrollable: isStretched,\n isInitialized: true,\n headerVariant,\n ...(sortHandler ? { sortHandler } : {}),\n isLoading,\n columnWidths,\n tableId: escapedId,\n }\n\n return {children} \n}\n","'use client'\nimport { ToastOption, ToastVariant } from '@lib/types'\nimport React, { createContext, ReactNode, useContext, useEffect, useId, useState } from 'react'\n\nexport interface ToastProviderValue {\n items: ToastItem[]\n register: (id: string) => void\n open: (options: ToastOption) => void\n success: (id: string, message?: string) => void\n fail: (id: string, message?: string) => void\n hide: (id: string) => void\n}\nexport const AUTO_DISMISS_TIME = 8000\n\nexport interface ToastItem {\n show: boolean\n content?: ToastOption\n}\n\nexport const ToastContext = createContext({\n items: [],\n register: () => {},\n hide: () => {},\n success: () => {},\n fail: () => {},\n open: () => {},\n})\n\nexport function useToast(id?: string): ToastProviderValue {\n const toast = useContext(ToastContext)\n const randomId = useId()\n const idToUse = id ?? randomId\n\n if (idToUse) {\n useEffect(() => {\n toast.register(idToUse) // register toast if id is supplied\n }, [])\n }\n\n return toast\n}\n\n/** This provider contains all the registered toasts, either active or inactive */\nexport const ToastProvider = ({\n children,\n autoDismissTime = AUTO_DISMISS_TIME,\n}: {\n children: ReactNode\n autoDismissTime?: number\n}) => {\n const [toasts, setToasts] = useState([])\n\n const getActiveToast = (items?: ToastItem[]): ToastOption | null =>\n (items || toasts)?.find((toast) => toast.show)?.content ?? null\n const isRegistered = (id: string, items?: ToastItem[]): boolean =>\n !!(items || toasts)?.find((toast) => toast.content?.id === id)\n const shouldAutoDismiss = (toast: ToastOption): boolean => !toast.actionText && !toast.onAction\n const delay = async (timeout: number): Promise => new Promise((res) => setTimeout(res, timeout))\n\n /** Adds the toast to the list of toasts */\n const register = (id: string): void => {\n if (isRegistered(id)) return\n const newItem: ToastItem = { content: { id, message: '' }, show: false }\n\n setToasts((current: ToastItem[]) => {\n return isRegistered(id, current) ? current : [...current, newItem]\n })\n }\n\n /** Activates the selected toast */\n const open = (options: ToastOption): void => {\n const openToast = (): void => {\n setToasts((current: ToastItem[]) => {\n if (!current || current.length === 0) return []\n\n const selectedItem = current.find((toast) => toast.content?.id === options.id)\n if (!selectedItem || selectedItem.show) return current\n selectedItem.content = options\n selectedItem.show = true\n\n const newCurrent = current.filter((item) => item.content?.id !== options.id)\n return [...newCurrent, selectedItem]\n })\n }\n\n const activeToastContent: ToastOption | null = getActiveToast(toasts)\n const toastIsAlreadyOpen: boolean = activeToastContent?.id === options.id\n if (toastIsAlreadyOpen) return\n\n if (activeToastContent) {\n hide(activeToastContent.id)\n setTimeout(() => {\n openToast()\n }, 250)\n } else {\n openToast()\n }\n\n if (shouldAutoDismiss(options) && options.variant !== ToastVariant.LOADING)\n delay(autoDismissTime).then(() => hide(options.id))\n }\n\n const success = (id: string, message?: string): void => updateToast(id, ToastVariant.SUCCESS, message)\n const fail = (id: string, message?: string): void => updateToast(id, ToastVariant.ERROR, message)\n\n /** Updates to toast to success or error variant, and if indicated its message */\n const updateToast = (id: string, variant: ToastVariant, message?: string): void => {\n setToasts((current: ToastItem[]) => {\n const activeToastContent: ToastOption | null = getActiveToast(current)\n const hasSameId: boolean = activeToastContent?.id === id\n if (!activeToastContent || !hasSameId) return current\n\n const content: ToastOption = {\n ...activeToastContent,\n variant,\n ...(message && { message }),\n }\n\n let newList = [...current]\n let toast = newList.find((toast) => toast.show)\n if (toast) toast.content = content\n\n if (shouldAutoDismiss(activeToastContent) && variant !== ToastVariant.LOADING)\n delay(autoDismissTime).then(() => hide(id))\n return newList\n })\n }\n\n /** Deactivates the active toast (but keeps it in the toasts array) */\n const hide = (id: string): void => {\n setToasts((current: ToastItem[]) => {\n if (getActiveToast(current)?.id !== id) return current\n const newArray = [...current]\n newArray.forEach((toast) => (toast.show = false))\n return newArray\n })\n }\n\n const providerValue: ToastProviderValue = {\n items: toasts,\n register,\n open,\n success,\n fail,\n hide,\n }\n\n return {children} \n}\n","//Copied from SignalRNotification.cs\n//When you add a value be aware to also include this in: getDefaultMailBoxesValue\nexport enum SignalRNotificationKey {\n None = 0,\n TerminateContractsByTemplate = 1,\n TerminateContractsByTemplateError = 2,\n FileUploaded = 3,\n ResendActivationFailed = 4,\n ResendActivationSuccess = 5,\n FileDeleted = 6,\n /** Gets triggered on (pre)cutoff */\n ManualCutOffSuccess = 7,\n /** Gets triggered on (pre)cutoff */\n ManualCutOffFailed = 8,\n CutOffStarted = 9,\n CutOffCompleted = 10,\n CreateOrderSucceeded = 11,\n CreateOrderFailed = 12,\n ServicePointDeactivationErrorOpenOrders = 13,\n AssignContractToCompanyFailed = 14,\n PricingAgreementsAddedFromFile = 15,\n ImportStatement = 16,\n ResolvingAfasErrorsFinished = 17,\n ReimbursementsGenerated = 18,\n ImportStatementError = 19,\n EpacAdvancesImported = 20,\n StatementInvoiceCreated = 21,\n}\n","import { SignalRNotificationKey } from '@lib/providers/signal-r-provider/SignalRNotificationKey'\nimport { SignalRMessageProps } from '@lib/providers/signal-r-provider/signal-r-provider'\n\nexport const getDefaultMailBoxesValue = (): Record => {\n return {\n [SignalRNotificationKey.None]: [],\n [SignalRNotificationKey.TerminateContractsByTemplate]: [],\n [SignalRNotificationKey.TerminateContractsByTemplateError]: [],\n [SignalRNotificationKey.FileUploaded]: [],\n [SignalRNotificationKey.ResendActivationSuccess]: [],\n [SignalRNotificationKey.ResendActivationFailed]: [],\n [SignalRNotificationKey.FileDeleted]: [],\n [SignalRNotificationKey.ManualCutOffSuccess]: [],\n [SignalRNotificationKey.ManualCutOffFailed]: [],\n [SignalRNotificationKey.CutOffStarted]: [],\n [SignalRNotificationKey.CutOffCompleted]: [],\n [SignalRNotificationKey.CreateOrderSucceeded]: [],\n [SignalRNotificationKey.CreateOrderFailed]: [],\n [SignalRNotificationKey.ServicePointDeactivationErrorOpenOrders]: [],\n [SignalRNotificationKey.AssignContractToCompanyFailed]: [],\n [SignalRNotificationKey.PricingAgreementsAddedFromFile]: [],\n [SignalRNotificationKey.ImportStatement]: [],\n [SignalRNotificationKey.ResolvingAfasErrorsFinished]: [],\n [SignalRNotificationKey.ReimbursementsGenerated]: [],\n [SignalRNotificationKey.ImportStatementError]: [],\n [SignalRNotificationKey.EpacAdvancesImported]: [],\n [SignalRNotificationKey.StatementInvoiceCreated]: [],\n }\n}\n","export enum SignalRNotificationTypes {\n INFO = 0,\n SUCCESS = 1,\n WARNING = 2,\n ERROR = 3,\n}\n\nexport enum SignalRTypes {\n RESPONSE = 0,\n MESSAGECENTER = 1,\n STATIC = 2,\n}\n","'use client'\n\nimport React, { createContext, ReactNode, useContext, useEffect, useMemo, useState } from 'react'\nimport { HttpTransportType, HubConnection, HubConnectionBuilder, HubConnectionState } from '@microsoft/signalr'\nimport { DictionaryContext, NotificationContext } from '@lib/providers'\nimport { SignalRNotificationKey } from '@lib/providers/signal-r-provider/SignalRNotificationKey'\nimport { SignalRNotificationTypes, SignalRTypes } from '@lib/providers/signal-r-provider/signalRConstants'\n\nconst MESSAGE_KEYS = { SIGNAL_R: 'STO.ERROR.SIGNAL_R' }\n\nexport type SignalRMessageProps = {\n variant: SignalRNotificationTypes\n keyType: SignalRNotificationKey\n message: string\n title: string\n objectIdentifier?: string\n}\n\ninterface SignalRResponseModel {\n data: SignalRData\n}\n\ninterface SignalRData {\n /** This is the \"variant\" of the notification, i.e. success or warning */\n infoType: SignalRNotificationTypes\n keyType: SignalRNotificationKey\n message: string\n title: string\n objectIdentifier?: string\n type: SignalRTypes\n}\n\n/**\n * @property signalRNotifications - All current notifications\n * @property removeNotifications - Function to remove a number of notifications\n */\nexport type SignalRProviderValue = {\n signalRNotifications: SignalRMessageProps[]\n removeNotifications: (amount: number) => void\n}\n\nexport const SignalRContext = createContext({\n signalRNotifications: [],\n removeNotifications: (amount: number) => {},\n})\n\n/**\n * This provider is responsible for listening to Signal R notifications via websocket and storing the notifications.\n * Is not ready to be used in Reporting or any applications that use the same Next version or above.\n */\nexport const SignalRProvider = ({\n children,\n signalRClientURL,\n onConnect,\n onMessageReceived,\n onError,\n}: {\n children: ReactNode\n signalRClientURL: string | undefined\n onConnect?: () => void\n onMessageReceived?: (parsedMessage: SignalRResponseModel) => void\n onError?: (error: any) => void\n}): JSX.Element => {\n const notifications = useContext(NotificationContext)\n const [signalRNotifications, setSignalRNotifications] = useState([])\n const [connection, setConnection] = useState(null)\n const { getText } = useContext(DictionaryContext)\n\n useEffect(() => {\n if (signalRClientURL) {\n const signalRClientConnection = new HubConnectionBuilder()\n .withUrl(signalRClientURL, {\n withCredentials: true,\n skipNegotiation: false,\n transport: HttpTransportType.WebSockets,\n })\n .withAutomaticReconnect()\n .build()\n setConnection(signalRClientConnection)\n }\n }, [signalRClientURL])\n\n useEffect(() => {\n if (!!connection && ![HubConnectionState.Connected, HubConnectionState.Connecting].includes(connection.state)) {\n connection\n .start()\n .then(() => {\n if (onConnect) onConnect()\n connection.on('SendAsync', (_, message: string) => {\n if (!!!message) return\n const parsedMessage = JSON.parse(message) as SignalRResponseModel\n if (onMessageReceived) onMessageReceived(parsedMessage)\n\n const { data } = parsedMessage\n if (!!data) {\n setSignalRNotifications((currentNotifications) => [\n ...currentNotifications,\n { ...data, variant: data.infoType },\n ])\n setNotification(data)\n }\n })\n })\n .catch((error) => {\n if (onError) onError(error)\n if (!signalRNotifications.some((notification) => notification.title === 'SignalR Error'))\n setSignalRNotifications([\n ...signalRNotifications,\n {\n variant: SignalRNotificationTypes.ERROR,\n keyType: SignalRNotificationKey.None,\n title: 'SignalR Error',\n message: getText(MESSAGE_KEYS.SIGNAL_R),\n },\n ])\n })\n }\n }, [connection])\n\n const removeNotifications = (amount: number) => {\n if (signalRNotifications.length >= amount) {\n let newList = [...signalRNotifications]\n newList.splice(0, amount)\n setSignalRNotifications(newList)\n } else {\n setSignalRNotifications([])\n }\n }\n\n const setNotification = (signalRData: SignalRData) => {\n // When the signalRData is a response, we don't want to show a notification\n if (signalRData.type === SignalRTypes.RESPONSE) return\n\n switch (signalRData.infoType) {\n case SignalRNotificationTypes.SUCCESS:\n notifications.success({ title: signalRData.title, message: signalRData.message })\n break\n case SignalRNotificationTypes.WARNING:\n notifications.warning({ title: signalRData.title, message: signalRData.message })\n break\n case SignalRNotificationTypes.ERROR:\n notifications.error({ title: signalRData.title, message: signalRData.message })\n break\n case SignalRNotificationTypes.INFO:\n default:\n notifications.info({ title: signalRData.title, message: signalRData.message })\n }\n }\n\n const providerValue = useMemo(\n () => ({\n signalRNotifications,\n removeNotifications,\n }),\n [signalRNotifications],\n )\n\n return {children} \n}\n","'use client'\n\nimport { getDefaultMailBoxesValue } from '@lib/providers/mail-box-provider/helpers/getDefaultValue'\nimport { SignalRNotificationKey } from '@lib/providers/signal-r-provider/SignalRNotificationKey'\nimport { SignalRContext, SignalRMessageProps } from '@lib/providers/signal-r-provider/signal-r-provider'\nimport React, { createContext, ReactNode, useContext, useEffect, useMemo, useState } from 'react'\n\n/**\n * @property mailBoxes - Notifications organised by SignalRNotificationKey\n * @property removeItem - Function to remove a notification from a specific mail box\n */\nexport type MailBoxProviderValue = {\n mailBoxes: Record\n removeItem: (index: number, mailKey: SignalRNotificationKey) => void\n clearMailbox: (mailKey: SignalRNotificationKey) => void\n}\n\nexport const MailBoxContext = createContext({\n mailBoxes: getDefaultMailBoxesValue(),\n removeItem: (index: number, mailKey: SignalRNotificationKey) => {},\n clearMailbox: (mailKey: SignalRNotificationKey) => {},\n})\n\n/**\n * This provider is responsible for\n * * listening the notifications in signal-r-provider\n * * sorting the notifications into mail boxes\n * * emptying the mailbox on each new animation frame\n */\nexport const MailBoxProvider = ({ children }: { children: ReactNode }) => {\n const { signalRNotifications, removeNotifications } = useContext(SignalRContext)\n const [mailBoxes, setMailBoxes] = useState>(\n getDefaultMailBoxesValue(),\n )\n\n useEffect(() => {\n if (!!signalRNotifications.length) {\n sortNewNotifications(signalRNotifications)\n removeNotifications(signalRNotifications.length)\n }\n }, [signalRNotifications])\n\n const sortNewNotifications = (signalRNotifications: SignalRMessageProps[]) => {\n const newMailBox = getDefaultMailBoxesValue()\n\n signalRNotifications.forEach((mailItem) => {\n if (mailItem.keyType in newMailBox) {\n newMailBox[mailItem.keyType].push(mailItem)\n } else {\n newMailBox[SignalRNotificationKey.None] = [mailItem]\n }\n })\n\n /**\n * old comment: Empty the mail boxes on every new animation frame.\n * old version of code:\n * requestAnimationFrame(() => setMailBoxes(getDefaultMailBoxesValue()))\n * @todo\n * TODO: remove this code block, when the hypothetical in the comment below has proven to be rare.\n */\n\n /**\n * Wait an animation frame so callback functions inside useEffects can act on the new\n * messages. Then on the following animation frame, clear all mail boxes\n *\n * hypothetically, if messages are received within the ~16 miliseconds of the first animation frame,\n * they wil be deleted without triggering an action. This would be rare.\n *\n * The same would happen if we don't wait this extra animation frame and that has proven to be more\n * common. In this case, the callback function of the requestAnimationFrame, would compete\n * with the callback function of useEffects hooks\n * */\n requestAnimationFrame(() => {\n requestAnimationFrame(() => setMailBoxes(getDefaultMailBoxesValue()))\n })\n\n setMailBoxes(newMailBox)\n }\n\n /**\n * Remove mail from the post office.\n *\n * @param index The index to remove from the mailbox.\n * @param mailKey The mailbox to remove the index from.\n */\n const removeItem = (index: number, mailKey: SignalRNotificationKey) => {\n if (!(mailKey in mailBoxes)) return\n\n const mailBox = [...mailBoxes[mailKey]]\n\n if (mailBox.length >= index) {\n mailBox.splice(index)\n\n setMailBoxes({ ...mailBoxes, [mailKey]: mailBox })\n }\n }\n\n /**\n * Clear mailbox by mailbox key\n *\n * @param mailKey The mailbox to clear\n */\n const clearMailbox = (mailKey: SignalRNotificationKey) => {\n if (!(mailKey in mailBoxes)) return\n\n setMailBoxes({ ...mailBoxes, [mailKey]: [] })\n }\n\n const providerValue = useMemo(\n () => ({\n mailBoxes,\n removeItem,\n clearMailbox,\n }),\n [mailBoxes, signalRNotifications],\n )\n\n return {children} \n}\n","'use client'\n\nimport { MailBoxContext } from '@lib/providers/mail-box-provider/mail-box-provider'\nimport { SignalRNotificationKey } from '@lib/providers/signal-r-provider/SignalRNotificationKey'\nimport { SignalRMessageProps } from '@lib/providers/signal-r-provider/signal-r-provider'\nimport { useContext, useEffect } from 'react'\n\n/**\n * @description - This hook can be used to listen to one mail box in the mail provider.\n *\n * @param mailBoxKey - The mailboxe you wish to collect mail for\n * @param callback - The function that gets called with each new notification\n */\nexport const useMailListener = (\n mailBoxKey: SignalRNotificationKey,\n callback: (notification: SignalRMessageProps) => void,\n) => {\n const { mailBoxes } = useContext(MailBoxContext)\n\n useEffect(() => {\n if (mailBoxKey in mailBoxes && !!mailBoxes[mailBoxKey]?.length) {\n mailBoxes[mailBoxKey].forEach(callback)\n }\n }, [mailBoxes[mailBoxKey]])\n}\n","'use client'\n\nimport { MailBoxContext } from '@lib/providers/mail-box-provider/mail-box-provider'\nimport { SignalRNotificationKey } from '@lib/providers/signal-r-provider/SignalRNotificationKey'\nimport { SignalRMessageProps } from '@lib/providers/signal-r-provider/signal-r-provider'\nimport { useContext, useEffect } from 'react'\n\n/**\n * @description - This hook can be used to listen to multiple mail boxes in the mail provider.\n *\n * @param mailBoxKeys - The mailboxes you wish to collect mail for\n * @param callback - The function that gets called with each new notification\n */\nexport const useMailListenerMultiple = (\n mailBoxKeys: SignalRNotificationKey[],\n callback: (notification: SignalRMessageProps) => void,\n) => {\n const { mailBoxes } = useContext(MailBoxContext)\n\n useEffect(() => {\n let relevantMail = new Array()\n mailBoxKeys.forEach((key) => {\n if (key in mailBoxes) relevantMail = [...relevantMail, ...mailBoxes[key]]\n })\n\n relevantMail.forEach(callback)\n }, [mailBoxes])\n}\n","export * from './mail-box-provider'\nexport * from './hooks/useMailListener'\nexport * from './hooks/useMailListenerMultiple'\n","export enum SortingDirection {\n NONE = 'none',\n ASCENDING = 'asc',\n DESCENDING = 'desc',\n}\n","export * from './sortingConstants'\n","import { SortingDirection } from '@lib/constants'\nimport { Sorting, UseSortingModel } from '@lib/types/Sorting'\nimport { useState } from 'react'\n\nexport type UseSortingProps = {\n initialSorting: Sorting\n}\n\nexport const useSorting = ({ initialSorting }: UseSortingProps): UseSortingModel => {\n const [sorting, setSorting] = useState(initialSorting)\n\n const sortHandler = (sortBy: string): void => {\n setSorting((current) => {\n if (current?.sortBy === sortBy) {\n return {\n sortBy,\n direction:\n current.direction === SortingDirection.ASCENDING\n ? SortingDirection.DESCENDING\n : SortingDirection.ASCENDING,\n }\n }\n return { sortBy, direction: SortingDirection.ASCENDING }\n })\n }\n\n return {\n sorting,\n sortHandler,\n }\n}\n","'use client'\n\nimport { useSorting, UseSortingProps } from '@lib/hooks/UseSorting'\nimport { UseSortingModel } from '@lib/types/Sorting'\nimport React, { useMemo, createContext } from 'react'\n\nexport interface SortingProviderProps extends UseSortingProps, React.HTMLAttributes {}\nexport interface SortingProviderModel extends UseSortingModel {}\n\nexport const SortingContext = createContext({} as SortingProviderModel)\n\nexport const SortingProvider = ({ initialSorting, children }: SortingProviderProps) => {\n const { sorting, sortHandler } = useSorting({ initialSorting })\n\n const SortingProviderData: SortingProviderModel = useMemo(\n () => ({\n sorting,\n sortHandler,\n }),\n [sorting],\n )\n\n return {children} \n}\n","'use client'\n\nimport { PaginationProviderProps } from '@lib/types/Pagination'\nimport React, { useMemo, createContext, useContext, useState, useEffect } from 'react'\nimport { FilterContext } from './filter-provider'\nimport { SortingContext } from './SortingProvider'\nimport { PaginationParams, PaginationProviderModel } from '@lib/components'\n\nexport const PaginationContext = createContext({} as PaginationProviderModel)\n\nexport const PaginationProvider = ({\n children,\n offset = 0,\n limit = 25,\n total = 0,\n initialPage = 1,\n}: PaginationProviderProps) => {\n const filterContext = useContext(FilterContext)\n const sortingContext = useContext(SortingContext)\n\n const [params, setParams] = useState({ offset, limit })\n const [totalResults, setTotalResults] = useState(total)\n const [currentPage, setCurrentPage] = useState(initialPage)\n\n const paginateHandler = (offset: number, limit: number): void => {\n const sameConfig: boolean = params.offset === offset && params.limit === limit\n if (sameConfig) return\n setParams({ offset, limit })\n }\n\n const resetPagination = () => {\n paginateHandler(0, limit)\n setCurrentPage(1)\n }\n\n useEffect(() => {\n if (filterContext) resetPagination()\n }, [filterContext?.filters])\n\n useEffect(() => {\n if (sortingContext) resetPagination()\n }, [sortingContext?.sorting])\n\n const PaginationProviderData: PaginationProviderModel = useMemo(\n () => ({\n params,\n totalResults,\n setTotalResults,\n paginateHandler,\n initialPage,\n resetPagination,\n currentPage,\n setCurrentPage,\n }),\n [params, totalResults, initialPage, currentPage],\n )\n\n return {children} \n}\n","export * from './SignalRNotificationKey'\nexport * from './signal-r-provider'\nexport * from './signalRConstants'\n","export * from './component-translation-provider'\nexport * from './dictionary-provider'\nexport * from './filter-provider'\nexport * from './layout-provider'\nexport * from './notification-provider'\nexport * from './table/table-provider'\nexport * from './toast-provider'\nexport * from './mail-box-provider'\nexport * from './PaginationProvider'\nexport * from './signal-r-provider'\nexport * from './SortingProvider'\n","'use client'\n\nimport { Button, ButtonVariants } from '@lib/components/atoms/Button'\nimport { MESSAGE_KEYS } from '@lib/constants/messageKeys'\nimport { ComponentTranslationContext } from '@lib/providers'\nimport { DeleteIcon, EditIcon } from '@lib/components/icons'\nimport React, { ReactNode, useContext, useRef } from 'react'\n\ninterface FileInputProps extends Omit, 'onChange'> {\n onChange: (value: File | null) => void\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n value: any\n name?: string\n disabled?: boolean\n /** Comma separated list of extensions that are accepted by the file input.\n * E.g.: \".jpg, .jpeg, .png,\"\n */\n acceptedExtensions?: string\n additionalButtons?: ReactNode\n}\n\nexport const FileInput = ({\n onChange,\n value,\n name,\n additionalButtons,\n disabled = false,\n acceptedExtensions = '.jpg, .jpeg, .png, .webp',\n ...props\n}: FileInputProps): JSX.Element => {\n const inputRef = useRef(null)\n const { getLabel } = useContext(ComponentTranslationContext)\n\n const handleFileSelect = () => {\n if (disabled) return\n inputRef.current?.click()\n }\n\n const clearFile = () => {\n if (disabled) return\n onChange(null)\n }\n\n return (\n \n {!value && (\n
handleFileSelect()}\n data-testid=\"add-button\"\n className=\"w-full\"\n key=\"add-button\"\n disabled={disabled}\n >\n {getLabel(MESSAGE_KEYS.ACTION_ADD)}\n \n )}\n {value && (\n \n \n {value?.name}\n \n {!disabled && (\n <>\n
\n )}\n onChange(e.target.files?.[0] ?? null)}\n ref={inputRef}\n name={name}\n accept={acceptedExtensions}\n />\n >,\n) => {\n const {\n children,\n innerProps: { ref, ...restInnerProps },\n } = props\n return (\n \n ) => {\n return (\n \n ): JSX.Element => (\n \n {props.data.label}\n \n)\n","'use client'\n\nimport React from 'react'\nimport { SingleValueProps } from 'react-select'\nimport { Tag } from '@lib/components/atoms'\nimport { SelectOption } from '@lib/types/SelectInput'\n\nexport const SingleValueTagComponent = ({ data }: SingleValueProps) => {\n return (\n \n {data.label}
\n \n )\n}\n\nexport const SingleValueMultiLineComponent = ({ data }: SingleValueProps) => {\n return (\n \n {data.label}\n
\n )\n}\n","'use client'\nimport { CheckmarkSmallIcon } from '@lib/components/icons'\nimport React from 'react'\nimport { FormatOptionLabelMeta } from 'react-select/dist/declarations/src/Select'\nimport { TextTypes } from '../../../../types'\nimport { Text } from '../../../atoms/Text'\nimport { SelectOption } from '@lib/types/SelectInput'\n\nexport const MultiLineOption = (option: SelectOption, meta: FormatOptionLabelMeta): JSX.Element => {\n const hasFooter: boolean = option.footer !== undefined && option.footer !== null\n\n return (\n \n \n {option.label} \n {hasFooter && (\n \n {option.footer}\n \n )}\n
\n {meta.selectValue.map((selectedOption: SelectOption) => selectedOption.value).includes(option.value) && (\n ): JSX.Element => {\n const { value, label } = props.data\n\n return (\n //@ts-ignore\n \n \n {label} \n\n {props.isSelected && \n )\n}\n","'use client'\nimport debounce from 'debounce-promise'\nimport React, { ReactNode, SyntheticEvent, useEffect, useState } from 'react'\nimport Select, { StylesConfig } from 'react-select'\nimport AsyncSelect from 'react-select/async'\nimport { SelectComponents } from 'react-select/dist/declarations/src/components'\nimport { FilterOptionOption } from 'react-select/dist/declarations/src/filters'\nimport { StateManagerProps } from 'react-select/dist/declarations/src/useStateManager'\nimport useInputWrapper from '@lib/hooks/useInputWrapper'\nimport { TextTypes } from '@lib/types'\nimport { Spinner, Text } from '@lib/components/atoms'\nimport {\n ClearIndicatorReplacement,\n DropdownIndicatorReplacement,\n MultiLineOption,\n MultiValueComponent,\n SingleValueMultiLineComponent,\n SingleValueTagComponent,\n} from './Components'\nimport { OptionReplacement } from './Components/OptionReplacement'\n\nimport { useId } from 'react'\nimport { SelectInputProps, SelectOption, GroupedSelectOption } from '@lib/types/SelectInput'\n\n/**\n * @deprecated\n */\nexport const SelectInput = ({\n options = [],\n asyncQuery,\n asyncOptions,\n isMulti = false,\n disabled = false,\n readOnly = false,\n isSearchable = false,\n showAsTag = false,\n showMultiLine = false,\n isAsync = false,\n isLoading,\n id,\n onChange,\n onBlur,\n value,\n defaultValue,\n defaultInputValue = undefined,\n noOptionsMessage = 'No results',\n isInline = false,\n className = '',\n placeholder,\n autoFocus = false,\n asyncMinimumCharacters = 3,\n isClearable = false,\n ...props\n}: SelectInputProps) => {\n const { onFocusHandler, onBlurHandler, classes } = useInputWrapper(false, disabled)\n const selectId = id ?? useId()\n\n const [showAsyncResults, setShowAsyncResults] = useState(false)\n\n const components: Partial> = {\n MultiValue: MultiValueComponent,\n DropdownIndicator: DropdownIndicatorReplacement,\n ClearIndicator: ClearIndicatorReplacement,\n ...(!showMultiLine && !showAsTag && { Option: OptionReplacement }),\n }\n\n if (showAsTag) components.SingleValue = SingleValueTagComponent\n if (showMultiLine) components.SingleValue = SingleValueMultiLineComponent\n\n const customStyles: StylesConfig = {\n valueContainer: (provided, _) => ({\n ...provided,\n ...(showMultiLine && { display: 'flex', flexWrap: 'nowrap' }),\n cursor: 'pointer',\n }),\n placeholder: (provided, state) => ({\n ...provided,\n ...(state.isFocused && isSearchable && { display: 'none' }),\n }),\n menu: (provided) => ({\n ...provided,\n marginTop: '4px',\n marginBottom: '4px',\n zIndex: '100',\n borderRadius: 0,\n }),\n }\n\n const selectClassNames = `select-input ${isMulti ? 'select-input--multi' : 'select-input--single'} ${\n isInline ? 'select-input--inline' : 'select-input--block'\n } ${isSearchable ? 'select-input--searchable' : 'select-input--not-searchable'} ${\n readOnly ? 'select-input--readonly' : ''\n } ${showAsTag && !isMulti ? 'select-input--show-as-tag' : ''}`\n\n /** Loads options for searchable async options */\n const loadAsyncQueryOptions = (inputValue: string): Promise => {\n const isValidSearch: boolean = inputValue?.length >= asyncMinimumCharacters\n const emptyResults = new Promise((resolve) => resolve([]))\n\n if (!asyncQuery) return emptyResults\n if (!isSearchable) return asyncQuery('') // gets all results if not searchable\n\n return isValidSearch ? asyncQuery(inputValue) : emptyResults\n }\n\n const debouncedLoadOptions: (inputValue: string) => Promise = debounce(\n loadAsyncQueryOptions,\n 250,\n )\n\n const loadAsyncOptions = (): Promise => {\n const emptyResults = new Promise((resolve) => resolve([]))\n return asyncOptions ? asyncOptions() : emptyResults\n }\n\n const LoadingSpinner = (): ReactNode => (\n \n
\n )\n\n const formatGroupLabel = (group: GroupedSelectOption): ReactNode => (\n \n \n {group.label}\n \n
\n )\n\n const handleAsyncInput = (input: string): void => setShowAsyncResults(input.length >= asyncMinimumCharacters)\n\n const getFilterOption = (option: FilterOptionOption, input: string): boolean => {\n if (showMultiLine) {\n return input ? `${option.label} ${option.data.footer}`.toLowerCase().includes(input.toLowerCase()) : true\n }\n\n return input ? option.label?.toLowerCase().includes(input.toLowerCase()) : true\n }\n\n const selectProps: StateManagerProps = {\n instanceId: selectId,\n id: selectId,\n inputId: selectId,\n className: selectClassNames,\n classNamePrefix: 'select-input',\n isDisabled: disabled,\n isMulti,\n closeMenuOnSelect: !isMulti,\n hideSelectedOptions: false,\n isSearchable: !readOnly ? isSearchable : false,\n onBlur: (event: SyntheticEvent) => {\n if (onBlur) onBlur(event)\n onBlurHandler()\n },\n menuPlacement: 'auto',\n components,\n styles: customStyles,\n noOptionsMessage: () => {noOptionsMessage} ,\n loadingMessage: LoadingSpinner,\n ...(showMultiLine && { formatOptionLabel: MultiLineOption }),\n ...(!isAsync && { filterOption: getFilterOption }),\n ...(readOnly && { menuIsOpen: false }),\n ...(placeholder ? { placeholder } : { placeholder: '' }),\n autoFocus,\n onFocus: onFocusHandler,\n isOptionDisabled: (option: SelectOption) => 'disabled' in option && !!option.disabled,\n }\n\n return (\n \n {isAsync ? (\n onChange && onChange(option as SelectOption & SelectOption[])}\n {...(!isSearchable && { defaultOptions: true })}\n {...(isSearchable && {\n menuIsOpen: showAsyncResults,\n openMenuOnClick: false,\n })}\n defaultInputValue={defaultInputValue}\n value={\n isMulti\n ? options.filter((option) =>\n Array.isArray(value) ? value?.includes(option.value) : value === option.value,\n )\n : selectProps.value\n }\n />\n ) : (\n \n isMulti && Array.isArray(value) ? value?.includes(option.value) : value === option.value,\n )}\n onChange={(option) => onChange && onChange(option as SelectOption & SelectOption[])}\n openMenuOnClick={!readOnly}\n />\n )}\n \n )\n}\n","'use client'\n\nimport React, { SyntheticEvent } from 'react'\nimport Select from 'react-select'\nimport { SelectComponents } from 'react-select/dist/declarations/src/components'\nimport { StateManagerProps } from 'react-select/dist/declarations/src/useStateManager'\nimport useInputWrapper from '@lib/hooks/useInputWrapper'\nimport {\n ClearIndicatorReplacement,\n DropdownIndicatorReplacement,\n MultiLineOption,\n SingleValueMultiLineComponent,\n SingleValueTagComponent,\n} from './Components'\nimport { OptionReplacement } from './Components/OptionReplacement'\nimport { useId } from 'react'\nimport { SelectOption, GroupedSelectOption, SingleSelectInputProps } from '@lib/types/SelectInput'\nimport {\n getSelectInputClassNames,\n getSelectContainerClassNames,\n getCustomSelectInputStyles,\n getFilterOption,\n} from '@lib/components/FormElements/Select/Helpers/select-helpers'\nimport { Text } from '@lib/components/atoms'\n\nconst getSelectProps = ({\n disabled = false,\n readOnly = false,\n isSearchable = false,\n showAsTag = false,\n showMultiLine = false,\n id,\n onBlur,\n isInline = false,\n placeholder,\n noOptionsMessage = 'No results',\n autoFocus = false,\n}: SingleSelectInputProps) => {\n const { onFocusHandler, onBlurHandler, classes } = useInputWrapper(false, disabled)\n const randomId = useId()\n const selectId = id ?? randomId\n\n const components: Partial> = {\n DropdownIndicator: DropdownIndicatorReplacement,\n ClearIndicator: ClearIndicatorReplacement,\n ...(!showMultiLine && !showAsTag && { Option: OptionReplacement }),\n }\n\n if (showAsTag) components.SingleValue = SingleValueTagComponent\n if (showMultiLine) components.SingleValue = SingleValueMultiLineComponent\n\n const selectProps: StateManagerProps = {\n instanceId: selectId,\n id: selectId,\n inputId: selectId,\n className: getSelectInputClassNames({ isInline, isMulti: false, isSearchable, showAsTag, readOnly }),\n classNamePrefix: 'select-input',\n isDisabled: disabled,\n closeMenuOnSelect: true,\n hideSelectedOptions: false,\n isSearchable: !readOnly ? isSearchable : false,\n onBlur: (event: SyntheticEvent) => {\n if (onBlur) onBlur(event)\n onBlurHandler()\n },\n menuPlacement: 'auto',\n noOptionsMessage: () => {noOptionsMessage} ,\n components,\n styles: getCustomSelectInputStyles(showMultiLine, isSearchable),\n filterOption: (option, input) => getFilterOption(option, input, showMultiLine),\n ...(showMultiLine && { formatOptionLabel: MultiLineOption }),\n ...(readOnly && { menuIsOpen: false }),\n ...(placeholder ? { placeholder } : { placeholder: '' }),\n autoFocus,\n }\n\n return {\n selectProps,\n onFocusHandler,\n classes,\n }\n}\n\n/**\n * This version of SingleSelectInput works in Admin, but not Account.\n */\nexport const SingleSelectInput = ({\n options = [],\n disabled = false,\n readOnly = false,\n isSearchable = false,\n showAsTag = false,\n showMultiLine = false,\n id,\n onChange,\n onBlur,\n value,\n defaultValue,\n isInline = false,\n className = '',\n placeholder,\n noOptionsMessage = 'No results',\n autoFocus = false,\n isClearable = false,\n isLoading,\n menuPosition = 'fixed',\n /** @todo This prop needs to be provided in all use-cases if applicable for accessibility */\n hasError = false,\n ...props\n}: SingleSelectInputProps) => {\n const { classes, selectProps, onFocusHandler } = getSelectProps({\n options,\n disabled,\n readOnly,\n isSearchable,\n showAsTag,\n showMultiLine,\n id,\n onChange,\n onBlur,\n value,\n defaultValue,\n isInline,\n className,\n placeholder,\n noOptionsMessage,\n autoFocus,\n isClearable,\n isLoading,\n menuPosition,\n hasError,\n })\n\n return (\n \n value === option.value)}\n onFocus={onFocusHandler}\n onChange={(option) => onChange && onChange(option as SelectOption & SelectOption[])}\n openMenuOnClick={!readOnly}\n isLoading={isLoading}\n menuPosition={menuPosition}\n aria-invalid={hasError}\n isOptionDisabled={(option) => !!option.disabled}\n />\n \n )\n}\n\n/**\n * @description\n * This version of SingleSelectInput works in Account, but not Admin. This is a 'quick fix' and eventually all projects should be able to use the same component.\n * How this component differs from SingleSelectInput: 'value' no longer gets passed to Select, defaultValue is determined from options, the 'name' property gets passed to Select.\n */\nexport const NewSingleSelectInput = ({\n options = [],\n disabled = false,\n readOnly = false,\n isSearchable = false,\n showAsTag = false,\n showMultiLine = false,\n id,\n onChange,\n onBlur,\n value,\n defaultValue,\n isInline = false,\n className = '',\n placeholder,\n noOptionsMessage = 'No results',\n autoFocus = false,\n isClearable = false,\n isLoading,\n menuPosition = 'fixed',\n /** @todo This prop needs to be provided in all use-cases if applicable for accessibility */\n hasError = false,\n name,\n ...props\n}: SingleSelectInputProps) => {\n const { classes, selectProps, onFocusHandler } = getSelectProps({\n options,\n disabled,\n readOnly,\n isSearchable,\n showAsTag,\n showMultiLine,\n id,\n onChange,\n onBlur,\n value,\n defaultValue,\n isInline,\n className,\n placeholder,\n noOptionsMessage,\n autoFocus,\n isClearable,\n isLoading,\n menuPosition,\n hasError,\n })\n\n return (\n \n defaultValue === option.value)}\n isClearable={!readOnly && isClearable}\n options={options}\n onFocus={onFocusHandler}\n onChange={(option) => onChange && onChange(option as SelectOption & SelectOption[])}\n openMenuOnClick={!readOnly}\n isLoading={isLoading}\n menuPosition={menuPosition}\n aria-invalid={hasError}\n name={name}\n isOptionDisabled={(option) => !!option.disabled}\n />\n \n )\n}\n","'use client'\n\nimport React, { SyntheticEvent } from 'react'\nimport Select from 'react-select'\nimport { SelectComponents } from 'react-select/dist/declarations/src/components'\nimport { StateManagerProps } from 'react-select/dist/declarations/src/useStateManager'\nimport useInputWrapper from '@lib/hooks/useInputWrapper'\nimport {\n ClearIndicatorReplacement,\n DropdownIndicatorReplacement,\n MultiLineOption,\n MultiValueComponent,\n} from './Components'\nimport { OptionReplacement } from './Components/OptionReplacement'\nimport { useId } from 'react'\nimport { SelectOption, GroupedSelectOption, MultiSelectInputProps } from '@lib/types/SelectInput'\nimport {\n getSelectInputClassNames,\n getSelectContainerClassNames,\n getCustomSelectInputStyles,\n getFilterOption,\n} from '@lib/components/FormElements/Select/Helpers/select-helpers'\nimport { Text } from '@lib/components/atoms'\n\nexport const MultiSelectInput = ({\n options = [],\n disabled = false,\n readOnly = false,\n isSearchable = false,\n showAsTag = false,\n showMultiLine = false,\n id,\n onChange,\n onBlur,\n value,\n defaultValue,\n isInline = false,\n className = '',\n placeholder,\n autoFocus = false,\n isClearable = false,\n isLoading = false,\n noOptionsMessage = 'No results',\n menuPosition = 'fixed',\n /** @todo This prop needs to be provided in all use-cases if applicable for accessibility */\n hasError = false,\n ...props\n}: MultiSelectInputProps) => {\n const { onFocusHandler, onBlurHandler, classes } = useInputWrapper(false, disabled)\n const randomId = useId()\n const selectId = id ?? randomId\n\n const components: Partial> = {\n MultiValue: MultiValueComponent,\n DropdownIndicator: DropdownIndicatorReplacement,\n ClearIndicator: ClearIndicatorReplacement,\n ...(!showMultiLine && !showAsTag && { Option: OptionReplacement }),\n }\n\n const selectProps: StateManagerProps = {\n instanceId: selectId,\n id: selectId,\n inputId: selectId,\n className: getSelectInputClassNames({ isInline, isMulti: true, isSearchable, showAsTag, readOnly }),\n classNamePrefix: 'select-input',\n isDisabled: disabled,\n isMulti: true,\n closeMenuOnSelect: false,\n hideSelectedOptions: false,\n isSearchable: !readOnly ? isSearchable : false,\n onBlur: (event: SyntheticEvent) => {\n if (onBlur) onBlur(event)\n onBlurHandler()\n },\n menuPlacement: 'auto',\n noOptionsMessage: () => {noOptionsMessage} ,\n components,\n filterOption: (option, input) => getFilterOption(option, input, showMultiLine),\n styles: getCustomSelectInputStyles(showMultiLine, isSearchable),\n ...(showMultiLine && { formatOptionLabel: MultiLineOption }),\n ...(readOnly && { menuIsOpen: false }),\n ...(placeholder ? { placeholder } : { placeholder: '' }),\n autoFocus,\n }\n\n return (\n \n !!option.disabled}\n defaultValue={defaultValue}\n isClearable={!readOnly && isClearable}\n options={options}\n value={options.filter((option) =>\n Array.isArray(value) ? value?.includes(option.value) : value === option.value,\n )}\n onFocus={onFocusHandler}\n onChange={(option) => onChange && onChange(option as SelectOption & SelectOption[])}\n openMenuOnClick={!readOnly}\n isLoading={isLoading}\n menuPosition={menuPosition}\n aria-invalid={hasError}\n />\n \n )\n}\n","'use client'\nimport React from 'react'\nimport { Spinner, Text } from '@lib/components/atoms'\nimport { GroupedSelectOption, TextTypes } from '@lib/types'\n\nexport const LoadingComponent = () => {\n return (\n \n
\n )\n}\nexport const formatGroupLabel = (group: GroupedSelectOption) => {\n return (\n \n \n {group.label}\n \n
\n )\n}\n","'use client'\n\nimport debounce from 'debounce-promise'\nimport React, { SyntheticEvent, useState } from 'react'\nimport AsyncSelect from 'react-select/async'\nimport { SelectComponents } from 'react-select/dist/declarations/src/components'\nimport { StateManagerProps } from 'react-select/dist/declarations/src/useStateManager'\nimport useInputWrapper from '@lib/hooks/useInputWrapper'\nimport { Text } from '@lib/components/atoms'\nimport {\n ClearIndicatorReplacement,\n DropdownIndicatorReplacement,\n MultiLineOption,\n SingleValueMultiLineComponent,\n SingleValueTagComponent,\n} from './Components'\nimport { OptionReplacement } from './Components/OptionReplacement'\nimport { useId } from 'react'\nimport { SelectOption, GroupedSelectOption, AsyncSingleSelectInputProps } from '@lib/types/SelectInput'\nimport {\n getSelectInputClassNames,\n getSelectContainerClassNames,\n getCustomSelectInputStyles,\n} from '@lib/components/FormElements/Select/Helpers/select-helpers'\nimport { formatGroupLabel, LoadingComponent } from '@lib/components/FormElements/Select/Components/AsyncComponent'\nimport { loadAsyncQueryOptions } from '@lib/components/FormElements/Select/Helpers/async-select-helpers'\n\nexport const AsyncSingleSelectInput = ({\n options = [],\n asyncQuery,\n asyncOptions,\n isClearable = true,\n disabled = false,\n readOnly = false,\n isSearchable = false,\n showAsTag = false,\n showMultiLine = false,\n id,\n onChange,\n onBlur,\n value,\n defaultInputValue = undefined,\n noOptionsMessage = 'No results',\n isInline = false,\n className = '',\n placeholder,\n autoFocus = false,\n asyncMinimumCharacters = 3,\n menuPosition = 'fixed',\n ...props\n}: AsyncSingleSelectInputProps) => {\n const { onBlurHandler, onFocusHandler, classes } = useInputWrapper(false, disabled)\n const selectId = id ?? useId()\n const [initialOptions, setInitialOptions] = useState(options)\n\n const [showAsyncResults, setShowAsyncResults] = useState(false)\n\n const components: Partial> = {\n DropdownIndicator: DropdownIndicatorReplacement,\n ClearIndicator: ClearIndicatorReplacement,\n ...(!showMultiLine && !showAsTag && { Option: OptionReplacement }),\n }\n\n if (showAsTag) components.SingleValue = SingleValueTagComponent\n if (showMultiLine) components.SingleValue = SingleValueMultiLineComponent\n\n const debouncedLoadOptions: (inputValue: string) => Promise = debounce(\n (inputValue: string) =>\n loadAsyncQueryOptions(inputValue, {\n asyncMinimumCharacters,\n asyncQuery,\n isSearchable,\n }),\n 250,\n )\n\n const loadAsyncOptions = (): Promise => {\n const emptyResults = new Promise((resolve) => resolve([]))\n return asyncOptions ? asyncOptions() : emptyResults\n }\n\n const handleAsyncInput = (input: string): void => setShowAsyncResults(input.length >= asyncMinimumCharacters)\n\n const selectProps: StateManagerProps = {\n instanceId: selectId,\n id: selectId,\n inputId: selectId,\n isClearable,\n className: getSelectInputClassNames({ isInline, isMulti: false, isSearchable, showAsTag, readOnly }),\n classNamePrefix: 'select-input',\n isDisabled: disabled,\n closeMenuOnSelect: true,\n hideSelectedOptions: false,\n isSearchable: !readOnly ? isSearchable : false,\n onBlur: (event: SyntheticEvent) => {\n if (onBlur) onBlur(event)\n onBlurHandler()\n },\n menuPlacement: 'auto',\n components,\n styles: getCustomSelectInputStyles(showMultiLine, isSearchable),\n noOptionsMessage: () => {noOptionsMessage} ,\n loadingMessage: LoadingComponent,\n ...(showMultiLine && { formatOptionLabel: MultiLineOption }),\n ...(readOnly && { menuIsOpen: false }),\n ...(placeholder ? { placeholder } : { placeholder: '' }),\n autoFocus,\n }\n\n return (\n \n {\n //Workaround to get Clear working when initial options are passed\n if (!option) setInitialOptions([])\n if (onChange) onChange(option as SelectOption & SelectOption[])\n }}\n {...(!isSearchable && { defaultOptions: true })}\n {...(isSearchable && {\n menuIsOpen: showAsyncResults,\n openMenuOnClick: false,\n })}\n defaultInputValue={defaultInputValue}\n onFocus={() => {\n onFocusHandler()\n }}\n value={\n options.filter((option) =>\n !!option\n ? Array.isArray(value)\n ? value?.includes(option.value)\n : value === option.value\n : null,\n )?.[0]\n }\n menuPosition={menuPosition}\n isOptionDisabled={(option) => !!option.disabled}\n />\n \n )\n}\n","'use client'\n\nimport debounce from 'debounce-promise'\nimport React, { SyntheticEvent, useState } from 'react'\nimport AsyncSelect from 'react-select/async'\nimport { SelectComponents } from 'react-select/dist/declarations/src/components'\nimport { StateManagerProps } from 'react-select/dist/declarations/src/useStateManager'\nimport useInputWrapper from '@lib/hooks/useInputWrapper'\nimport { Text } from '@lib/components/atoms'\nimport {\n ClearIndicatorReplacement,\n DropdownIndicatorReplacement,\n MultiLineOption,\n MultiValueComponent,\n} from './Components'\nimport { OptionReplacement } from './Components/OptionReplacement'\nimport { useId } from 'react'\nimport { SelectOption, GroupedSelectOption, AsyncMultiSelectInputProps } from '@lib/types/SelectInput'\nimport {\n getSelectInputClassNames,\n getSelectContainerClassNames,\n getCustomSelectInputStyles,\n} from '@lib/components/FormElements/Select/Helpers/select-helpers'\nimport { formatGroupLabel, LoadingComponent } from '@lib/components/FormElements/Select/Components/AsyncComponent'\nimport { loadAsyncQueryOptions } from '@lib/components/FormElements/Select/Helpers/async-select-helpers'\n\nexport const AsyncMultiSelectInput = ({\n options = [],\n asyncQuery,\n asyncOptions,\n disabled = false,\n readOnly = false,\n isSearchable = false,\n showAsTag = false,\n showMultiLine = false,\n id,\n onChange,\n onBlur,\n value,\n defaultInputValue = undefined,\n noOptionsMessage = 'No results',\n isInline = false,\n className = '',\n placeholder,\n autoFocus = false,\n asyncMinimumCharacters = 3,\n menuPosition = 'fixed',\n ...props\n}: AsyncMultiSelectInputProps) => {\n const { onBlurHandler, onFocusHandler, classes } = useInputWrapper(false, disabled)\n const selectId = id ?? useId()\n\n const [showAsyncResults, setShowAsyncResults] = useState(false)\n\n const components: Partial> = {\n MultiValue: MultiValueComponent,\n DropdownIndicator: DropdownIndicatorReplacement,\n ClearIndicator: ClearIndicatorReplacement,\n ...(!showMultiLine && !showAsTag && { Option: OptionReplacement }),\n }\n\n const debouncedLoadOptions: (inputValue: string) => Promise = debounce(\n (inputValue: string) =>\n loadAsyncQueryOptions(inputValue, {\n asyncMinimumCharacters,\n asyncQuery,\n isSearchable,\n }),\n 250,\n )\n\n const loadAsyncOptions = (): Promise => {\n const emptyResults = new Promise((resolve) => resolve([]))\n return asyncOptions ? asyncOptions() : emptyResults\n }\n\n const handleAsyncInput = (input: string): void => setShowAsyncResults(input.length >= asyncMinimumCharacters)\n\n const selectProps: StateManagerProps = {\n instanceId: selectId,\n id: selectId,\n inputId: selectId,\n className: getSelectInputClassNames({ isInline, isMulti: true, isSearchable, showAsTag, readOnly }),\n classNamePrefix: 'select-input',\n isDisabled: disabled,\n isMulti: true,\n closeMenuOnSelect: false,\n hideSelectedOptions: false,\n isSearchable: !readOnly ? isSearchable : false,\n onBlur: (event: SyntheticEvent) => {\n if (onBlur) onBlur(event)\n onBlurHandler()\n },\n menuPlacement: 'auto',\n components,\n styles: getCustomSelectInputStyles(showMultiLine, isSearchable),\n noOptionsMessage: () => {noOptionsMessage} ,\n loadingMessage: LoadingComponent,\n ...(showMultiLine && { formatOptionLabel: MultiLineOption }),\n ...(readOnly && { menuIsOpen: false }),\n ...(placeholder ? { placeholder } : { placeholder: '' }),\n autoFocus,\n }\n\n return (\n \n onChange && onChange(option as SelectOption & SelectOption[])}\n {...(!isSearchable && { defaultOptions: true })}\n {...(isSearchable && {\n menuIsOpen: showAsyncResults,\n openMenuOnClick: false,\n })}\n onFocus={onFocusHandler}\n defaultInputValue={defaultInputValue}\n value={options.filter((option) =>\n Array.isArray(value) ? value?.includes(option.value) : value === option.value,\n )}\n menuPosition={menuPosition}\n isOptionDisabled={(option) => !!option.disabled}\n />\n \n )\n}\n","'use client'\n\nimport React, { ReactNode, useState } from 'react'\nimport useInputWrapper from '../../../hooks/useInputWrapper'\nimport { ChangeHandler } from 'react-hook-form'\n\nexport interface TextAreaProps\n extends Pick, 'defaultValue' | 'minLength' | 'maxLength'> {\n id: string\n form?: string\n name: string\n rows?: number\n placeholder?: string\n required?: boolean\n disabled?: boolean\n readOnly?: boolean\n resizable?: boolean\n maxChar?: number\n customCount?: string\n error?: boolean\n onChange?: (value: string) => void\n onBlur?: ChangeHandler\n value?: string\n autoFocus?: boolean\n}\n\nexport const Textarea = ({\n id,\n form,\n name,\n rows = 4,\n placeholder = '',\n required = false,\n disabled = false,\n readOnly = false,\n resizable = true,\n maxChar,\n customCount,\n error,\n onChange,\n onBlur,\n value,\n defaultValue,\n autoFocus = false,\n ...rest\n}: TextAreaProps) => {\n const [count, setCount] = useState(\n value?.length ?? (typeof defaultValue === 'string' ? defaultValue?.length : undefined) ?? 0,\n )\n const { onFocusHandler, onBlurHandler, classes } = useInputWrapper(false, disabled)\n const maxLength = rest.maxLength ?? maxChar\n\n return (\n \n {\n setCount(e.target.value.length)\n onChange?.(e.target.value)\n }}\n onBlur={(e) => {\n onBlur && onBlur(e)\n onBlurHandler()\n }}\n value={value}\n defaultValue={defaultValue}\n autoFocus={autoFocus}\n aria-invalid={error}\n />\n\n {maxLength && !readOnly && !customCount && (\n \n {count}/{maxLength}\n \n )}\n\n {customCount && {customCount} }\n
\n )\n}\n\nconst Counter = ({ children }: { children: ReactNode }): JSX.Element => (\n {children} \n)\n","export default {\n af: 'Afghanistan',\n al: 'Albanië',\n dz: 'Algerije',\n as: 'Amerikaans-Samoa',\n ad: 'Andorra',\n ao: 'Angola',\n ai: 'Anguilla',\n aq: 'Antarctica',\n ag: 'Antigua en Barbuda',\n ar: 'Argentinië',\n am: 'Armenië',\n aw: 'Aruba',\n au: 'Australië',\n at: 'Oostenrijk',\n az: 'Azerbeidzjan',\n bs: \"Bahama's\",\n bh: 'Bahrein',\n bd: 'Bangladesh',\n bb: 'Barbados',\n by: 'Wit-Rusland',\n be: 'België',\n bz: 'Belize',\n bj: 'Benin',\n bm: 'Bermuda',\n bt: 'Bhutan',\n bo: 'Bolivië',\n ba: 'Bosnië-Herzegovina',\n bw: 'Botswana',\n bv: 'Bouvet Eiland',\n br: 'Brazilië',\n io: 'Brits Indische oceaan',\n bn: 'Brunei Darussalam',\n bg: 'Bulgarije',\n bf: 'Burkina Faso',\n bi: 'Burundi',\n kh: 'Cambodja',\n cm: 'Kameroen',\n ca: 'Canada',\n cv: 'Kaapverdië',\n ky: 'Kaaimaneilanden',\n cf: 'Centraal-Afrikaanse Republiek',\n td: 'Tsjaad',\n cl: 'Chili',\n cn: 'China',\n cx: 'Christmaseiland',\n cc: 'Cocoseilanden',\n co: 'Colombia',\n km: 'Comoren',\n cg: 'Congo, Volksrepubliek',\n cd: 'Congo, Democratische Republiek',\n ck: 'Cookeilanden',\n cr: 'Costa Rica',\n ci: 'Ivoorkust',\n hr: 'Kroatië',\n cu: 'Cuba',\n cy: 'Cyprus',\n cz: 'Tsjechië',\n dk: 'Denemarken',\n dj: 'Djibouti',\n dm: 'Dominica',\n do: 'Dominicaanse Republiek',\n ec: 'Ecuador',\n eg: 'Egypte',\n sv: 'El Salvador',\n gq: 'Equatoriaal-Guinea',\n er: 'Eritrea',\n ee: 'Estland',\n et: 'Ethiopië',\n fk: 'Falklandeilanden',\n fo: 'Faeröer',\n fj: 'Fiji',\n fi: 'Finland',\n fr: 'Frankrijk',\n gf: 'Frans-Guyana',\n pf: 'Frans-Polynesië',\n tf: 'Franse Zuidelijke Gebieden',\n ga: 'Gabon',\n gm: 'Gambia',\n ge: 'Georgië',\n de: 'Duitsland',\n gh: 'Ghana',\n gi: 'Gibraltar',\n gr: 'Griekenland',\n gl: 'Groenland',\n gd: 'Grenada',\n gp: 'Guadeloupe',\n gu: 'Guam',\n gt: 'Guatemala',\n gn: 'Guinea',\n gw: 'Guinee-Bissau',\n gy: 'Guyana',\n ht: 'Haïti',\n hm: 'Heard en McDonaldeilanden',\n va: 'Heilige Stoel',\n hn: 'Honduras',\n hk: 'Hong Kong',\n hu: 'Hongarije',\n is: 'IJsland',\n in: 'India',\n id: 'Indonesië',\n ir: 'Iran',\n iq: 'Irak',\n ie: 'Ierland',\n il: 'Israël',\n it: 'Italië',\n jm: 'Jamaica',\n jp: 'Japan',\n jo: 'Jordanië',\n kz: 'Kazachstan',\n ke: 'Kenia',\n ki: 'Kiribati',\n kp: 'Noord-Korea',\n kr: 'Zuid-Korea',\n kw: 'Koeweit',\n kg: 'Kirgizstan',\n la: 'Laos',\n lv: 'Letland',\n lb: 'Libanon',\n ls: 'Lesotho',\n lr: 'Liberia',\n ly: 'Libië',\n li: 'Liechtenstein',\n lt: 'Litouwen',\n lu: 'Luxemburg',\n mo: 'Macao',\n mg: 'Madagaskar',\n mw: 'Malawi',\n my: 'Maleisië',\n mv: 'Maldiven',\n ml: 'Mali',\n mt: 'Malta',\n mh: 'Marshalleilanden',\n mq: 'Martinique',\n mr: 'Mauritanië',\n mu: 'Mauritius',\n yt: 'Mayotte',\n mx: 'Mexico',\n fm: 'Micronesië, Federale Staten',\n md: 'Moldavië',\n mc: 'Monaco',\n mn: 'Mongolië',\n ms: 'Montserrat',\n ma: 'Marokko',\n mz: 'Mozambique',\n mm: 'Myanmar',\n na: 'Namibië',\n nr: 'Nauru',\n np: 'Nepal',\n nl: 'Nederland',\n nc: 'Nieuw-Caledonië',\n nz: 'Nieuw-Zeeland',\n ni: 'Nicaragua',\n ne: 'Niger',\n ng: 'Nigeria',\n nu: 'Niue',\n nf: 'Norfolk',\n mp: 'Noordelijke Marianen',\n mk: 'Noord-Macedonië',\n no: 'Noorwegen',\n om: 'Oman',\n pk: 'Pakistan',\n pw: 'Palau',\n ps: 'Palestina',\n pa: 'Panama',\n pg: 'Papoea-Nieuw-Guinea',\n py: 'Paraguay',\n pe: 'Peru',\n ph: 'Filipijnen',\n pn: 'Pitcairn',\n pl: 'Polen',\n pt: 'Portugal',\n pr: 'Puerto Rico',\n qa: 'Qatar',\n re: 'Réunion',\n ro: 'Roemenië',\n ru: 'Rusland',\n rw: 'Rwanda',\n sh: 'Sint-Helena',\n kn: 'Saint Kitts en Nevis',\n lc: 'Saint Lucia',\n pm: 'Saint-Pierre en Miquelon',\n vc: 'Saint Vincent en de Grenadines',\n ws: 'Samoa',\n sm: 'San Marino',\n st: 'São Tomé en Principe',\n sa: 'Saudi-Arabië',\n sn: 'Senegal',\n sc: 'Seychellen',\n sl: 'Sierra Leone',\n sg: 'Singapore',\n sk: 'Slowakije',\n si: 'Slovenië',\n sb: 'Salomonseilanden',\n so: 'Somalië',\n za: 'Zuid-Afrika',\n gs: 'Zuid-Georgia en de Zuidelijke Sandwicheilanden',\n es: 'Spanje',\n lk: 'Sri Lanka',\n sd: 'Soedan',\n sr: 'Suriname',\n sj: 'Spitsbergen en Jan Mayen',\n sz: 'Ngwane, Koninkrijk Eswatini',\n se: 'Zweden',\n ch: 'Zwitserland',\n sy: 'Syrië',\n tw: 'Taiwan',\n tj: 'Tadzjikistan',\n tz: 'Tanzania',\n th: 'Thailand',\n tl: 'Timor Leste',\n tg: 'Togo',\n tk: 'Tokelau',\n to: 'Tonga',\n tt: 'Trinidad en Tobago',\n tn: 'Tunesië',\n tr: 'Turkije',\n tm: 'Turkmenistan',\n tc: 'Turks- en Caicoseilanden',\n tv: 'Tuvalu',\n ug: 'Oeganda',\n ua: 'Oekraïne',\n ae: 'Verenigde Arabische Emiraten',\n gb: 'Groot-Brittannië',\n us: 'Verenigde Staten',\n um: 'Ver afgelegen eilandjes van de Verenigde Staten',\n uy: 'Uruguay',\n uz: 'Oezbekistan',\n vu: 'Vanuatu',\n ve: 'Venezuela',\n vn: 'Vietnam',\n vg: 'Maagdeneilanden, Britse',\n vi: 'Maagdeneilanden, Amerikaanse',\n wf: 'Wallis en Futuna',\n eh: 'Westelijke Sahara',\n ye: 'Jemen',\n zm: 'Zambia',\n zw: 'Zimbabwe',\n ax: 'Åland',\n bq: 'Bonaire, Sint Eustatius en Saba',\n cw: 'Curaçao',\n gg: 'Guernsey',\n im: 'Man Eiland',\n je: 'Jersey',\n me: 'Montenegro',\n bl: 'Saint Barthélemy',\n mf: 'Sint-Maarten (Frans deel)',\n rs: 'Servië',\n sx: 'Sint Maarten',\n ss: 'Zuid-Soedan',\n xk: 'Kosovo',\n}\n","'use client'\nimport React, { FC, useEffect } from 'react'\nimport PhoneInput, { PhoneInputProps } from 'react-phone-input-2'\nimport 'react-phone-input-2/lib/high-res.css'\nimport useInputWrapper from '../../../hooks/useInputWrapper'\nimport nl from './countries-nl'\n\nexport interface FormPhoneFieldProps extends PhoneInputProps {\n id?: string\n className?: string\n error?: boolean\n autoFocus?: boolean\n readOnly?: boolean\n}\n\nconst SVG_ICONS = {\n SEARCH: `\n \n \n \n `,\n CHECK_MARK: `\n \n \n `,\n}\n\nenum CountryCode {\n NL = '31',\n}\n\nexport const FormPhoneField = ({\n id,\n className = '',\n searchPlaceholder = 'Search...',\n searchNotFound = '',\n country = 'nl',\n preferredCountries = ['nl', 'be', 'de'],\n error = false,\n autoFocus = false,\n readOnly = false,\n ...rest\n}: FormPhoneFieldProps): JSX.Element => {\n const { onFocusHandler, onBlurHandler, classes } = useInputWrapper(false, rest.disabled)\n const htmlLocale = document.documentElement.lang\n\n const containerClass: string = 'form-phone-field'\n\n //Fix from https://github.com/bl00mber/react-phone-input-2/issues/579\n //@ts-ignore\n const ReactPhoneInput: FC = PhoneInput.default ? PhoneInput.default : PhoneInput\n\n useEffect(() => {\n setIcon()\n }, [])\n\n const setIcon = (): void => {\n const flagDropdown: HTMLDivElement | null = document.querySelector(`.${containerClass} .flag-dropdown`)\n if (!flagDropdown) return\n\n flagDropdown.addEventListener('click', (_) => {\n setTimeout(() => {\n replaceSearchIcon()\n }, 5)\n })\n }\n\n const replaceSearchIcon = (): void => {\n const searchEmoji: HTMLSpanElement | null = document.querySelector(`.${containerClass} .search-emoji`)\n if (searchEmoji) searchEmoji.innerHTML = SVG_ICONS.SEARCH\n }\n\n return (\n \n , 'onChange'> {\n label?: ReactNode\n id?: string\n form?: string\n name?: string\n value?: string | number\n labelBeforeSwitch?: boolean\n checked?: boolean\n disabled?: boolean\n readOnly?: boolean\n onChange?: ChangeHandler | ((value: unknown, checked: boolean) => void)\n}\n\nexport const ToggleSwitch = ({\n label,\n labelBeforeSwitch = false,\n id,\n form,\n name,\n value,\n checked,\n disabled,\n readOnly,\n onChange,\n ...rest\n}: ToggleSwitchProps) => {\n const labelClasses = `\n ${disabled ? 'toggle-switch--disabled' : ''}\n ${readOnly ? 'toggle-switch--readonly' : ''}\n ${labelBeforeSwitch ? 'flex flex-row-reverse justify-between gap-2' : ''}\n `\n\n return (\n \n {\n onChange && onChange(e, !checked)\n }}\n onKeyDown={(e) => {\n if (e.key === 'Space') {\n onChange && onChange(e, !checked)\n }\n }}\n checked={checked}\n />\n \n {label && {label} }\n \n )\n}\n","import { DictionaryText, ErrorSummaryError, Text } from '@lib/components'\nimport React, { FC } from 'react'\n\ninterface FormErrorListItemProps {\n error: ErrorSummaryError\n}\n\ninterface FormErrorListItemContentProps {\n error: ErrorSummaryError\n}\n\nconst FormErrorListItemContent: FC = ({ error }) => (\n \n {error.fieldNameTranslationKey ? (\n <>\n \n)\n\n/**\n * Renders out an LI html element. The element will be interactive if the html element specified in the provided error is found.\n */\nexport const FormErrorListItem: FC = ({ error }) => {\n const referencedInputExists = !!document.getElementById(error.formInputId)\n\n return (\n \n {referencedInputExists ? (\n \n \n ) : (\n \n )\n}\n","import { DictionaryText, Text } from '@lib/components/atoms'\nimport { InlineNotification, InlineNotificationProps } from '@lib/components/molecules'\nimport { NotificationVariant } from '@lib/types'\nimport React, { Children, FC } from 'react'\n\nconst MESSAGE_KEYS = { HAS_ERRORS: 'STO.FORM.FORM_ERRORS.HAS_ERRORS' }\n\nexport interface ValidationErrorsProps\n extends Omit,\n Pick, 'className'> {}\n\n/**\n * Component meant to show a list of form validation errors\n *\n * @example\n * \n * {yupErrors.map((error) => (\n * \n */\nexport const FormErrorSummary: FC = ({ children, ...rest }) => {\n /** If no children, don't render anything */\n if (!children || !Children.toArray(children).filter((child) => !!child)?.length) return\n\n return (\n \n \n \n \n \n }\n />\n )\n}\n","export * from './ErrorSummaryTypes'\nexport * from './FormErrorListItem'\nexport * from './FormErrorSummary'\n","export * from './ChoiceList/ChoiceList'\nexport * from './Fieldset/Fieldset'\nexport * from './FormCheckbox/FormCheckbox'\nexport * from './FormField/FormField'\nexport * from './FormHelpText/FormHelpText'\nexport * from './FormDatePicker/FormDatePicker'\nexport * from './FormInput/FormInput'\nexport * from './FormInputLabel/FormInputLabel'\nexport * from './FormInputValidationText/FormInputValidationText'\nexport * from './FormNumberInput/FormNumberInput'\nexport * from './FormRadioField/FormRadioField'\nexport * from './FormTimeInput/FormTimeInput'\nexport * from './FormSection/FormSection'\nexport * from './FileInput/FileInput'\nexport * from './Select/SelectInput'\nexport * from './Select/SingleSelectInput'\nexport * from './Select/MultiSelectInput'\nexport * from './Select/AsyncSingleSelectInput'\nexport * from './Select/AsyncMultiSelectInput'\nexport * from './Textarea/Textarea'\nexport * from './FormPhoneField/FormPhoneField'\nexport * from './ToggleSwitch/ToggleSwitch'\nexport * from './FormErrorSummary'\n","'use client'\n\nimport { ChevronLeftIcon, ChevronRightIcon } from '@lib/components/icons'\nimport React, { FC, ReactNode, useContext, useEffect, useState } from 'react'\nimport { useDebouncedCallback } from 'use-debounce'\nimport { TextTypes } from '../../../types'\nimport { Button, ButtonVariants, DictionaryText, Text } from '../../atoms'\nimport { SelectOption } from '@lib/types/SelectInput'\nimport { SingleSelectInput } from '@lib/components/FormElements'\nimport { PaginationContext } from '@lib/providers'\n\ninterface Props {\n initialPerPage?: number\n perPageOptions: SelectOption[]\n itemsPerPageLabel: ReactNode\n xOfTotalItemsLabelKey: string\n ofTotalPagesLabelKey: string\n /** Placeholder that will be replaced. It always replaces including {{}}, so if \"amount\" is provided it will replace \"{{ amount }}\" */\n labelParamPlaceholder?: string\n}\n\nexport const Pagination: FC = ({\n initialPerPage = 25,\n perPageOptions,\n itemsPerPageLabel,\n xOfTotalItemsLabelKey,\n ofTotalPagesLabelKey,\n labelParamPlaceholder = 'amount',\n}: Props) => {\n const { totalResults, initialPage, paginateHandler, currentPage, setCurrentPage } = useContext(PaginationContext)\n const [totalPages, setTotalPages] = useState(1)\n const [perPage, setPerPage] = useState(initialPerPage)\n const [totalItemsToShowInLabel, setTotalItemsToShowInLabel] = useState(+currentPage * +perPage)\n const [pageNumbers, setPageNumbers] = useState([\n { value: initialPage, label: initialPage.toString() },\n ])\n const RANDOM_ID = String(Math.round(Math.random() * 999999))\n\n useEffect(() => {\n setTotalItemsToShowInLabel(getTotalItemsInView())\n }, [paginateHandler])\n\n useEffect(() => {\n if (+currentPage > totalPages) return\n debouncedFetchData()\n }, [currentPage, perPage])\n\n useEffect(() => {\n setTotalPages(Math.ceil(totalResults / +perPage))\n }, [totalResults, perPage])\n\n useEffect(() => {\n setPageNumbers(getPageNumberOptions())\n setCurrentPage(1)\n }, [totalPages])\n\n const debouncedFetchData = useDebouncedCallback(() => {\n const offset = +currentPage * +perPage - +perPage\n const limit = +perPage\n paginateHandler(offset, limit)\n }, 250)\n\n const getTotalItemsInView = (): number => {\n const isOnePager: boolean = totalResults <= perPage\n return isOnePager ? totalResults : +currentPage * +perPage\n }\n\n const getPageNumberOptions = (): SelectOption[] => {\n return Array.from(Array(totalPages).keys()).map((key) => {\n const page = key + 1\n return {\n value: page,\n label: page.toString(),\n }\n })\n }\n\n const getTotalPageNumber = (): number => (+currentPage - 1) * +perPage + 1\n\n const perPageHandler = (option: SelectOption): void => setPerPage(option.value ? +option.value : initialPerPage)\n const pageNumberHandler = (option: SelectOption): void => setCurrentPage(option.value ? +option.value : initialPage)\n\n const previousPageHandler = (): void => {\n if (+currentPage <= 1) return\n const previousPage: number = +currentPage - 1\n setCurrentPage(previousPage)\n }\n\n const nextPageHandler = (): void => {\n if (+currentPage >= totalPages) return\n const nextPage: number = +currentPage + 1\n setCurrentPage(nextPage)\n }\n\n return (\n <>\n \n
\n {itemsPerPageLabel}: \n \n {getTotalPageNumber()} - {totalItemsToShowInLabel}{' '}\n \n
\n
\n \n \n
\n
(null)\n const previousProgressFactor = useRef(0)\n\n /** set the css custom properties \"--progress-factor\" and \"--duration-factor\" on the dom element when the progression value changes */\n const updateProgression = () => {\n let progressFactor = progression / goal\n progressFactor = progressFactor === Infinity || !progressFactor ? 0 : progressFactor\n\n domEl.current?.style.setProperty('--progress-factor', `${progressFactor}`)\n domEl.current?.style.setProperty(\n '--duration-factor',\n `${Math.abs(progressFactor - previousProgressFactor.current)}`,\n )\n\n previousProgressFactor.current = progression / goal\n }\n\n useEffect(() => {\n updateProgression()\n }, [goal, progression])\n\n const $progress = (\n \n )\n\n return (\n \n
\n {showLabel ? (\n \n {label}\n {$progress}\n \n ) : (\n $progress\n )}\n \n {progression}/{goal}\n \n
\n
\n
{\n /** array of button texts */\n items: SwitcherItem[]\n /** id of initially active item */\n initialItem?: SwitcherId | null\n /** whether switch is disabled */\n disabled?: boolean\n /** callback on switch action */\n onSwitch?: (id: string | number) => void\n isLoading?: boolean\n isStretched?: boolean\n}\n\nexport interface SwitcherItem extends Partial> {\n id: SwitcherId\n label: string\n}\n\nexport const Switcher = ({\n items = [],\n initialItem,\n disabled = false,\n onSwitch,\n isLoading = false,\n isStretched = false,\n ...props\n}: SwitcherProps): JSX.Element => {\n if (isLoading) return
\n if (items?.length === 0) return <>\n const [activePosition, setActivePosition] = useState(initialItem || items[0].id)\n\n const clickHandler = (id: SwitcherId): void => {\n if (isActive(id) || disabled) return // ignore if item is already active or switch is disabled\n setActivePosition(id)\n if (onSwitch) onSwitch(id)\n }\n\n const isActive = (id: SwitcherId): boolean => activePosition === id\n\n const getRootClasses = () => {\n let classes = [\n 'grid grid-flow-col bg-shade-0 outline outline-1 outline-shade-200 p-1 h-8 density-md:h-10 density-lg:h-12',\n ]\n classes.push(isStretched ? 'w-full auto-cols-fr' : 'w-fit')\n props?.className && classes.push(props.className)\n return classes.join(' ')\n }\n\n return (\n \n {items?.length > 0 &&\n items.map((item: SwitcherItem) => (\n clickHandler(item.id)}\n className={`${isActive(item.id) ? 'text-text-primary' : 'text-text-secondary'}`}\n contained\n data-testid={`switcher-item-${item.id}`}\n >\n {item.label || item.children}\n \n ))}\n
\n )\n}\n","export * from './Switcher'\n","'use client'\nimport React from 'react'\n\nexport interface TabsProps {\n children: React.ReactNode\n}\n\nexport const Tabs = ({ children }: TabsProps) => {\n return (\n \n {children}\n
\n )\n}\n","export * from './Tabs'\n","'use client'\n\nimport {\n Button,\n ButtonVariants,\n Retain,\n RetainBehaviorModifier,\n RetainSizeModifier,\n Text,\n Tooltip,\n} from '@lib/components/atoms'\nimport { TextTypes } from '@lib/types'\nimport { ArrowLeftIcon } from '@lib/components/icons'\nimport React from 'react'\n\nexport interface PageHeaderProps extends Omit, 'title'> {\n title: string | React.ReactNode\n description?: string | React.ReactNode\n buttons?: JSX.Element\n contentSwitcher?: JSX.Element\n retainSizeModifier?: RetainSizeModifier\n retainBehaviorModifiers?: RetainBehaviorModifier[]\n tooltipText?: string\n tag?: JSX.Element\n previousHandler?: () => void\n leftButtons?: JSX.Element\n isInEditState?: boolean\n}\n\nexport const PageHeader = ({\n title,\n description,\n buttons,\n contentSwitcher,\n retainSizeModifier = RetainSizeModifier.FULL_WIDTH,\n retainBehaviorModifiers = [RetainBehaviorModifier.NO_PADDING],\n tooltipText,\n tag,\n leftButtons,\n previousHandler,\n isInEditState = false,\n ...props\n}: PageHeaderProps): JSX.Element => {\n return (\n \n
\n
\n \n {(previousHandler || leftButtons) && !isInEditState && (\n
\n {leftButtons ? leftButtons : undefined}\n {previousHandler ? (\n
\n )}\n
\n
\n
\n \n {title}\n \n {tooltipText &&
\n {description &&
{description}
}\n
\n {contentSwitcher && contentSwitcher}\n {buttons &&
{buttons}
}\n
\n
\n
\n
{children} \n}\n","'use client'\nimport React from 'react'\nimport { PageLayoutWidth } from '../PageLayout'\n\ntype SidebarRightLayoutProps = {\n width: PageLayoutWidth\n children: React.ReactNode\n sidebarChildren?: React.ReactNode | React.ReactNode[]\n}\n\nexport const SidebarRightLayout = ({ children, sidebarChildren, width }: SidebarRightLayoutProps) => {\n return (\n <>\n \n
\n \n {children}\n
\n \n
\n
\n {logo &&
{logo}
}\n {navigation &&
{navigation}
}\n {search &&
{search}
}\n {extraItems &&
{extraItems}
}\n
{}\n\nexport const FilterActions = ({ ...props }: FilterActionsProps): JSX.Element => {\n const { getLabel } = useContext(ComponentTranslationContext)\n const { isExpanded, toggleFilters, clearFilters, hasClearableFilters, isInitialized } = useFilterContext()\n\n if (!isInitialized) return <>\n\n return (\n \n
\n )\n}\n","'use client'\nimport { useFilterContext } from '@lib/providers'\nimport React from 'react'\nimport { motion } from 'framer-motion'\n\nexport interface FiltersProps extends React.HTMLAttributes {\n children: React.ReactNode\n}\n\nexport const Filters = ({ children }: FiltersProps): JSX.Element => {\n const { isExpanded, isInitialized } = useFilterContext()\n\n if (!isInitialized) return <>\n\n return (\n \n \n \n )\n}\n","'use client'\nimport React from 'react'\n\nexport interface FilterItemProps {\n width?: 'small' | 'medium' | 'large' | 'unset'\n children: React.ReactNode\n}\n\nexport const FilterItem = ({ width = 'medium', children }: FilterItemProps): JSX.Element => {\n let widthClass = 'w-52'\n switch (width) {\n case 'small':\n widthClass = 'w-40'\n break\n case 'medium':\n widthClass = 'w-52'\n break\n case 'large':\n widthClass = 'w-64'\n break\n case 'unset':\n widthClass = ''\n break\n }\n\n return {children}
\n}\n","'use client'\nimport { useFilterContext } from '@lib/providers/filter-provider'\nimport { FilterOperator, FilterValue } from '@lib/types/Filters'\nimport { useEffect, useState } from 'react'\n\nconst OPERATOR = FilterOperator.EQUALS\n\n/**\n * Hook used by select filters. Registers the filter and handles updates to the filter and its selected value.\n */\nexport const useSelectFilter = (filterName: string, initialValue?: FilterValue) => {\n const { filters, registerFilter, updateFilterValue, getFilterId, getFilterValue, getFilterById } =\n useFilterContext()\n const filterId = getFilterId(filterName, OPERATOR)\n const [selectedValue, setSelectedValue] = useState(getFilterValue(filterId))\n\n useEffect(() => {\n registerFilter({\n id: filterId,\n key: filterName,\n operator: OPERATOR,\n value: getFilterValue(filterId) ?? initialValue,\n })\n }, [])\n\n /**\n * Update the filter value when\n * - the selected value updates and\n * - differs from the filter value\n **/\n const handleSelectedValueUpdate = () => {\n const filter = getFilterById(filterId)\n\n if (filter && filter.value !== selectedValue) {\n updateFilterValue({ filter: filter, newValue: selectedValue })\n }\n }\n\n /**\n * Update the selected value when\n * - filter exists and\n * - selectedValue differs from the filter value\n */\n const handleFilterUpdate = () => {\n const filter = getFilterById(filterId)\n if (filter) {\n const matchingFilter = filters.find((stateFilter) => stateFilter.id === filter.id)\n if (matchingFilter && selectedValue !== matchingFilter?.value) {\n setSelectedValue(matchingFilter.value)\n }\n }\n }\n\n useEffect(() => {\n handleFilterUpdate()\n }, [filters])\n\n useEffect(() => {\n handleSelectedValueUpdate()\n }, [selectedValue])\n\n const fieldName = `select-filter_${filterName}[${OPERATOR}]`\n\n return {\n fieldName,\n selectedValue,\n setSelectedValue,\n }\n}\n","'use client'\nimport { FormField, SelectInput } from '@lib/components/FormElements'\nimport React, { ReactNode } from 'react'\nimport { FilterItem, FilterItemProps } from '../FilterItem'\nimport { SelectInputProps, SelectOptionValue, SelectOption } from '@lib/types/SelectInput'\nimport { useSelectFilter } from '@lib/components/organisms/Filter/hooks/useSelectFilter'\n\nexport interface SelectFilterProps\n extends Omit,\n Pick {\n /** \"name\" of object that should be filtered on. Will be used to create unique ID for \"Filter\" Object. This should be exactly the key that the API needs to filter on */\n name: string\n label?: string | ReactNode\n}\n\nexport const SelectFilter = ({ label, options, name, width, ...props }: SelectFilterProps): JSX.Element => {\n const { fieldName, selectedValue, setSelectedValue } = useSelectFilter(name, props.defaultValue)\n\n return (\n \n \n setSelectedValue(option?.value)}\n name={fieldName}\n isMulti={false}\n />\n \n \n )\n}\n","'use client'\nimport { FormDatePickerProps, FormDatePicker } from '@lib/components/FormElements'\nimport { useFilterContext } from '@lib/providers/filter-provider'\nimport { FilterOperator } from '@lib/types/Filters'\nimport React from 'react'\nimport { useEffect, useState } from 'react'\nimport { FilterItem } from '../FilterItem'\n\nexport interface DateFilterProps extends Omit {\n /** \"name\" of object that should be filtered on. Will be used to create unique ID for \"Filter\" Object. This should be exactly the key that the API needs to filter on */\n name: string\n label: string\n operator: FilterOperator\n fieldName: string\n}\n\nexport const DateFilter = ({\n label,\n name,\n operator = FilterOperator.GREATER_THAN_OR_EQUAL,\n fieldName,\n ...props\n}: DateFilterProps): JSX.Element => {\n const { filters, registerFilter, updateFilterValue, getFilterId, getFilterValue, getFilterById } =\n useFilterContext()\n const filterId = getFilterId(name, operator)\n const defaultValue = getFilterValue(filterId)\n const formattedDefaultValue = (\n defaultValue && typeof defaultValue === 'string' ? new Date(defaultValue) : defaultValue\n ) as Date\n const [selectedValue, setSelectedValue] = useState(formattedDefaultValue)\n\n useEffect(() => {\n registerFilter({\n id: filterId,\n key: name,\n operator: operator,\n value: selectedValue,\n })\n }, [])\n\n useEffect(() => {\n const filter = getFilterById(filterId)\n if (filter) {\n updateFilterValue({ filter: filter, newValue: selectedValue })\n }\n }, [selectedValue])\n\n useEffect(() => {\n const filter = getFilterById(filterId)\n if (filter) {\n const matchingFilter = filters.find((stateFilter) => stateFilter.id === filter.id)\n if (matchingFilter) {\n if (matchingFilter.value === (null || undefined)) {\n //@ts-ignore\n setSelectedValue(matchingFilter.value)\n } else if (\n matchingFilter?.value instanceof Date &&\n selectedValue?.getTime() !== matchingFilter?.value?.getTime()\n ) {\n setSelectedValue(matchingFilter.value)\n }\n }\n }\n }, [filters])\n\n return (\n \n setSelectedValue(date)}\n id={fieldName}\n placeholderText=\"DD/MM/YYYY\"\n />\n \n )\n}\n","'use client'\nimport { FormField, FormDatePickerProps } from '@lib/components/FormElements'\nimport { ComponentTranslationContext } from '@lib/providers'\nimport { FilterOperator } from '@lib/types/Filters'\nimport React, { useContext } from 'react'\nimport { DateFilter } from './DateFilter'\nimport { MESSAGE_KEYS } from '@lib/constants/messageKeys'\n\nexport interface FromToDateFilterProps extends Omit {\n /** \"name\" of object that should be filtered on. Will be used to create unique ID for \"Filter\" Object. This should be exactly the key that the API needs to filter on */\n name: string\n label: string\n}\n\nexport const FromToDateFilter = ({ label, name, ...props }: FromToDateFilterProps): JSX.Element => {\n const { getLabel } = useContext(ComponentTranslationContext)\n const fromFieldName = `date-filter_${name}[${FilterOperator.GREATER_THAN_OR_EQUAL}]`\n const toFieldName = `date-filter_${name}[${FilterOperator.LESSER_THAN_OR_EQUAL}]`\n\n return (\n \n \n
\n \n )\n}\n","'use client'\nimport { Switcher, SwitcherId, SwitcherProps } from '@lib/components/molecules/Switcher'\nimport { useFilterContext } from '@lib/providers'\nimport { FilterOperator, FilterValue } from '@lib/types/Filters'\nimport React, { useEffect, useState } from 'react'\n\nexport interface SwitcherFilterProps extends SwitcherProps {\n /** \"name\" of object that should be filtered on. Will be used to create unique ID for \"Filter\" Object. This should be exactly the key that the API needs to filter on */\n name: string\n isLoading?: boolean\n}\n\nconst OPERATOR = FilterOperator.EQUALS\n\nexport const SwitcherFilter = ({\n name,\n items,\n initialItem,\n onSwitch,\n isLoading = false,\n ...props\n}: SwitcherFilterProps): JSX.Element => {\n const { filters, registerFilter, updateFilterValue, getFilterId, getFilterValue, getFilterById } =\n useFilterContext()\n const filterId = getFilterId(name, OPERATOR)\n\n const [selectedValue, setSelectedValue] = useState(getFilterValue(filterId) ?? items[0]?.id)\n\n useEffect(() => {\n registerFilter({\n id: filterId,\n key: name,\n operator: OPERATOR,\n value: selectedValue,\n nonClearable: true,\n })\n }, [])\n\n useEffect(() => {\n const filter = getFilterById(filterId)\n if (filter && filter.value !== selectedValue) {\n updateFilterValue({ filter: filter, newValue: selectedValue })\n }\n }, [selectedValue])\n\n useEffect(() => {\n const filter = getFilterById(filterId)\n if (filter) {\n const matchingFilter = filters.find((stateFilter) => stateFilter.id === filter.id)\n if (matchingFilter && selectedValue !== matchingFilter?.value) {\n setSelectedValue(matchingFilter.value)\n }\n }\n }, [filters])\n\n const onSwitchHandler = (id: string | number): void => {\n setSelectedValue(id)\n }\n\n return (\n <>\n ([])\n const { getLabel } = useContext(ComponentTranslationContext)\n\n const getOptions = (): SelectOption[] => {\n if (!!options?.length) {\n if (isClearable) {\n let newOptions = options ? [...options] : []\n\n newOptions?.unshift({ label: getLabel(MESSAGE_KEYS.ALL), value: EMPTY_VALUE })\n return newOptions\n }\n return options\n }\n return []\n }\n\n useEffect(() => {\n if (!selectOptions.length && !!options?.length) setSelectOptions(getOptions())\n }, [options])\n\n const select = (value: FilterValue) => {\n setSelectedValue(value)\n }\n\n return (\n <>\n select(option.value)}\n isSelected={option.value === selectedValue}\n >\n {option.label}\n \n )\n })}\n \n )\n}\n","export * from './ContextMenuSelectFilter'\n","'use client'\n\nimport { useFilterContext } from '@lib/providers/filter-provider'\nimport { FilterOperator, FilterValue } from '@lib/types/Filters'\nimport { useEffect, useState } from 'react'\n\n/**\n * Hook that can be used by default filters, i.e. filters on a string. Registers the filter and handles updates to the filter and its value.\n * @param filterName Name of the filter, used in creating a unique ID for the filter\n * @param operator The operator used to match the filter with the set of data\n * @param initialValue Initial value of the filter\n */\nexport const useDefaultFilter = (filterName: string, operator: FilterOperator, initialValue?: FilterValue) => {\n const { filters, registerFilter, updateFilterValue, getFilterId, getFilterValue, getFilterById } =\n useFilterContext()\n const filterId = getFilterId(filterName, operator)\n const [value, setValue] = useState(getFilterValue(filterId))\n\n useEffect(() => {\n registerFilter({\n id: filterId,\n key: filterName,\n operator: operator,\n value: getFilterValue(filterId) ?? initialValue,\n })\n }, [])\n\n /**\n * Update the filter value when\n * - the value updates and\n * - differs from the filter value\n **/\n const handleValueUpdate = () => {\n const filter = getFilterById(filterId)\n\n if (filter && filter.value !== value) {\n updateFilterValue({ filter: filter, newValue: value })\n }\n }\n\n /**\n * Update the selected value when\n * - filter exists and\n * - selectedValue differs from the filter value\n */\n const handleFilterUpdate = () => {\n const filter = getFilterById(filterId)\n if (filter) {\n const matchingFilter = filters.find((stateFilter) => stateFilter.id === filter.id)\n if (matchingFilter && value !== matchingFilter?.value) {\n setValue(matchingFilter.value)\n }\n }\n }\n\n useEffect(() => {\n handleFilterUpdate()\n }, [filters])\n\n useEffect(() => {\n handleValueUpdate()\n }, [value])\n\n const fieldName = `default-filter_${filterName}[${operator}]`\n\n return {\n fieldName,\n value,\n setValue,\n }\n}\n","'use client'\nimport { FormField, FormInput } from '@lib/components/FormElements'\nimport React, { ReactNode } from 'react'\nimport { FilterItem, FilterItemProps } from '../FilterItem'\nimport { useDefaultFilter } from '../hooks/useDefaultFilter'\nimport { FilterOperator } from '@lib/types'\n\nexport interface TextFilterProps extends Pick {\n /** \"name\" of object that should be filtered on. Will be used to create unique ID for \"Filter\" Object. This should be exactly the key that the API needs to filter on */\n name: string\n label?: string | ReactNode\n operator?: FilterOperator\n}\n\nexport const TextFilter = ({\n label,\n operator = FilterOperator.EQUALS,\n name,\n width,\n ...props\n}: TextFilterProps): JSX.Element => {\n const { fieldName, value, setValue } = useDefaultFilter(name, operator)\n\n return (\n \n \n setValue(value)}\n name={fieldName}\n />\n \n \n )\n}\n","export * from './SelectFilter'\nexport * from './FromToDateFilter'\nexport * from './SwitcherFilter'\nexport * from './DateFilter'\nexport * from './ContextMenuSelectFilter'\nexport * from './TextFilter'\n","export * from './FilterActions'\nexport * from './Filters'\nexport * from './variants'\n","'use client'\n\nimport React from 'react'\n\nexport interface MainNavigationProps {\n children: React.ReactNode\n}\n\nexport const MainNavigation = ({ children }: MainNavigationProps) => {\n return {children}
\n}\n","'use client'\nimport React, { createRef, LegacyRef, useState } from 'react'\nimport useOnClickOutside from '../../../../hooks/useOutsideClick'\n\nexport interface MainNavigationItemWrapperProps {\n children: React.ReactNode\n}\n\nexport const MainNavigationItemWrapper = ({ children }: MainNavigationItemWrapperProps) => {\n const [isShowingSubItems, setIsShowingSubItems] = useState(false)\n const ref: LegacyRef | null = createRef()\n\n const handleOutsideClick = () => {\n if (isShowingSubItems) {\n setIsShowingSubItems(false)\n }\n }\n\n useOnClickOutside(ref, handleOutsideClick)\n\n return (\n setIsShowingSubItems(true)}\n onMouseEnter={() => setIsShowingSubItems(true)}\n onMouseLeave={() => setIsShowingSubItems(false)}\n >\n {children}\n \n )\n}\n","export * from './MainNavigationItemWrapper'","'use client'\n\nimport React, { ReactNode } from 'react'\n\nexport interface MainNavigationItemProps {\n isActive?: boolean\n title: ReactNode\n hasSubNavigation?: boolean\n}\n\nexport const MainNavigationItem = ({ isActive, title, hasSubNavigation = false }: MainNavigationItemProps) => {\n const defaultClasses = 'bg-transparent border-transparent'\n const hoverClasses = !isActive && 'hover:bg-accent-opacity-100 hover:border-accent-50 hover:text-text-interactive'\n const activeClasses =\n !isActive && 'active:bg-accent-opacity-100 hover:border-accent-100 active:text-text-interactive'\n const focusClasses = !isActive && 'focus:bg-accent-opacity-100 focus:border-accent-600 focus:text-text-interactive'\n const selectedClasses = isActive ? 'text-text-interactive' : 'text-text-secondary'\n const cursorClasses = hasSubNavigation && 'cursor-default'\n\n const classes = `${defaultClasses} ${hoverClasses} ${activeClasses} ${focusClasses} ${selectedClasses} ${cursorClasses}`\n\n return (\n \n \n {title}\n \n
\n )\n}\n","export * from './MainNavigationItem'","'use client'\n\nimport React from 'react'\n\nexport interface SubNavigationItemProps {\n children: React.ReactNode\n}\n\nexport const SubNavigationItem = ({ children }: SubNavigationItemProps) => {\n return (\n \n {children}\n \n )\n}\n","export * from './SubNavigationItem'","import { Text } from '@lib/components/atoms'\nimport { TextTypes } from '@lib/types'\nimport React from 'react'\n\ninterface Props {\n children: React.ReactNode\n}\n\nexport const SubNavigationSubHeading = ({ children }: Props) => {\n return (\n \n {children} \n
\n )\n}\n","export * from './SubNavigationSubHeading'\n","'use client'\nimport React from 'react'\n\nexport interface SubNavigationWrapperProps {\n children: React.ReactNode\n}\n\nexport const SubNavigationWrapper = ({ children }: SubNavigationWrapperProps) => {\n return (\n \n )\n}\n","export * from './SubNavigationWrapper'","export * from './MainNavigation'\nexport * from './MainNavigationItemWrapper'\nexport * from './MainNavigationItem'\nexport * from './SubNavigationItem'\nexport * from './SubNavigationSubHeading'\nexport * from './SubNavigationWrapper'\n","import { useEffect, useRef } from 'react'\n\n/** Indicates if it is the first render of a component */\nexport const useIsFirstRender = (): boolean => {\n const isFirstRender = useRef(true)\n useEffect(() => {\n isFirstRender.current = false\n }, [])\n return isFirstRender.current\n}\n","export enum ModalSizes {\n XS = 'max-w-xs',\n SM = 'max-w-sm',\n MD = 'max-w-md',\n LG = 'max-w-lg',\n XL = 'max-w-xl',\n XXL = 'max-w-2xl',\n XXXL = 'max-w-3xl',\n XXXXL = 'max-w-4xl',\n XXXXXL = 'max-w-5xl',\n}\n","'use client'\n\nimport { CloseIcon } from '@lib/components/icons'\nimport React, { createRef, RefObject, useEffect, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { useIsFirstRender } from '../../../hooks/useIsFirstRender'\nimport useOnClickOutside from '../../../hooks/useOutsideClick'\nimport { TextTypes } from '../../../types'\nimport { Backdrop, Button, ButtonVariants, Text } from '../../atoms'\nimport { ModalSizes } from './types/modalTypes'\n\nexport interface ModalProps {\n title?: string | React.ReactNode\n size?: ModalSizes\n children?: React.ReactNode\n footer?: React.ReactNode\n /** Place component next to modal title, i.e. a language switch */\n headerComponent?: React.ReactNode\n canBeClosed?: boolean\n isModalVisible: boolean\n setModalVisibility: React.Dispatch>\n hasBackdrop?: boolean\n stackedButtons?: boolean\n fullContentWidth?: boolean\n onHide?: () => void\n onShow?: () => void\n}\n\nconst DEFAULT_MODAL_SIZE = ModalSizes.MD\nconst MODAL_SCALE_INITIAL_CLASS = 'scale-75'\nconst MODAL_OPACITY_INITIAL_CLASS = 'opacity-0'\n\nexport const Modal = ({\n children,\n title,\n size = DEFAULT_MODAL_SIZE,\n stackedButtons,\n footer,\n headerComponent,\n canBeClosed = true,\n isModalVisible = false,\n setModalVisibility,\n hasBackdrop = true,\n fullContentWidth = false,\n onShow,\n onHide,\n ...props\n}: ModalProps) => {\n const [modalDialogRef, setModalDialogRef] = useState | null>(null)\n const [modalRoot, setModalRoot] = useState(null)\n const isFirstRender = useIsFirstRender()\n const backdropElement = createRef