\n \n \n );\n },\n);\n","import { LuiCheckboxInput, LuiIcon } from '@linzjs/lui';\nimport { ColDef } from 'ag-grid-community';\nimport { isEmpty } from 'lodash-es';\nimport { ReactElement, useCallback, useContext, useEffect, useMemo, useState } from 'react';\n\nimport { GridContext } from '../../contexts/GridContext';\nimport { Menu, MenuDivider, MenuItem } from '../../react-menu3';\nimport { ClickEvent } from '../../react-menu3/types';\nimport { GridFilterHeaderIconButton } from './GridFilterHeaderIconButton';\n\nexport interface GridFilterColumnsToggleProps {\n saveState?: boolean;\n}\n\nexport const GridFilterColumnsToggle = ({ saveState = true }: GridFilterColumnsToggleProps): ReactElement => {\n const [loaded, setLoaded] = useState(false);\n const { getColumns, getColumnIds, invisibleColumnIds, setInvisibleColumnIds } = useContext(GridContext);\n\n const columnStorageKey = useMemo(\n () =>\n isEmpty(getColumnIds())\n ? null // Grid hasn't been initialised yet\n : 'stepAgGrid_invisibleColumnIds_' + getColumnIds().join('_'),\n [getColumnIds],\n );\n\n // infer the invisible ids from colDefs\n const resetColumns = useCallback(\n () => setInvisibleColumnIds(getColumnIds('initialHide')),\n [getColumnIds, setInvisibleColumnIds],\n );\n\n // Load state on start\n useEffect(() => {\n if (!columnStorageKey || loaded) return;\n if (saveState) {\n try {\n const stored = window.localStorage.getItem(columnStorageKey);\n if (!stored) {\n resetColumns();\n } else {\n const invisibleIds = JSON.parse(stored ?? '[]');\n if (!Array.isArray(invisibleIds)) {\n console.error(`stored invisible ids not an array: ${stored}`);\n } else if (!invisibleIds.every((id) => typeof id === 'string')) {\n console.error(`stored invisible ids not strings: ${stored}`);\n } else {\n invisibleIds && setInvisibleColumnIds(invisibleIds);\n }\n }\n } catch (ex) {\n console.error(ex);\n }\n setLoaded(true);\n }\n }, [columnStorageKey, getColumns, loaded, resetColumns, saveState, setInvisibleColumnIds]);\n\n // Save state on column visibility change\n useEffect(() => {\n loaded &&\n columnStorageKey &&\n saveState &&\n window.localStorage.setItem(columnStorageKey, JSON.stringify(invisibleColumnIds));\n }, [columnStorageKey, invisibleColumnIds, loaded, saveState]);\n\n const toggleColumn = useCallback(\n (colId?: string) => {\n if (!colId || !invisibleColumnIds) return;\n setInvisibleColumnIds(\n invisibleColumnIds.includes(colId)\n ? invisibleColumnIds.filter((id) => id !== colId)\n : [...invisibleColumnIds, colId],\n );\n },\n [invisibleColumnIds, setInvisibleColumnIds],\n );\n\n const numericRegExp = /^\\d+$/;\n const isNonManageableColumn = (col: ColDef) => col.lockVisible || col.colId == null || numericRegExp.test(col.colId);\n\n return (\n }\n menuClassName={'step-ag-grid-react-menu'}\n portal={true}\n unmountOnClose={true}\n >\n \n {getColumns('headerName').map((col) => (\n {\n // Global react-menu MenuItem handler handles tabs\n if (e.key !== 'Tab') {\n e.keepOpen = true;\n if (e.key !== 'Enter') {\n toggleColumn(col.colId);\n }\n }\n }}\n >\n {\n // Click is handled by MenuItem onClick so keyboard events work\n e.preventDefault();\n e.stopPropagation();\n },\n }}\n onChange={() => {\n /*Do nothing, change handled by menuItem*/\n }}\n />\n \n ))}\n
\n \n {\n // Global react-menu MenuItem handler handles tabs\n if (e.key !== 'Tab') {\n e.keepOpen = e.key !== 'Enter';\n resetColumns();\n }\n }}\n >\n \n Reset columns\n \n \n );\n};\n","import { useCallback, useEffect, useRef } from 'react';\n\n/**\n * Cancels timeouts on scope being destroyed.\n *\n * This could almost be a debounce, but debounce tracks by function reference, this tracks by hook reference.\n * This could have been implemented using debounce if the callers function was wrapped in useCallback,\n * but there's no way to enforce that, so it would lead to bugs.\n */\nexport const useTimeoutHook = () => {\n const timeout = useRef>();\n\n /**\n * Clear any pending timeouts.\n */\n const clearTimeouts = () => {\n if (timeout.current) {\n const tc = timeout.current;\n timeout.current = undefined;\n clearTimeout(tc);\n }\n };\n\n /**\n * Call this when your action has completed.\n */\n const invoke = useCallback((fn: () => void, waitTimeMs: number) => {\n clearTimeouts();\n timeout.current = setTimeout(fn, waitTimeMs);\n }, []);\n\n /**\n * Clear timeout on loss of scope.\n */\n useEffect(() => {\n return () => clearTimeouts();\n }, []);\n\n return invoke;\n};\n\ninterface IntervalHookProps {\n timeoutMs: number;\n callback: () => void;\n}\n\nexport const useIntervalHook = ({ callback, timeoutMs }: IntervalHookProps) => {\n const callbackRef = useRef(callback);\n callbackRef.current = callback;\n\n useEffect(() => {\n const interval = setInterval(() => {\n callbackRef.current && callbackRef.current();\n }, timeoutMs);\n return () => {\n clearInterval(interval);\n };\n }, [timeoutMs]);\n};\n","import { useCallback, useRef, useState } from 'react';\n\nimport { useTimeoutHook } from './timeoutHook';\n\n/**\n * Defers state change up to a minimum time since last state change.\n */\nexport const useStateDeferred = (initialValue: T): [T, (v: T) => void, (v: T, w: number) => void] => {\n const startTime = useRef(0);\n const timeoutHook = useTimeoutHook();\n\n const [value, _setValue] = useState(initialValue);\n\n const setValue = useCallback((newValue: T) => {\n startTime.current = Date.now();\n _setValue(newValue);\n }, []);\n\n const setValueDeferred = useCallback(\n (newValue: T, minimumWaitTimeMs: number) => {\n const waitTimeMs = Math.max(minimumWaitTimeMs - (Date.now() - startTime.current), 0);\n timeoutHook(() => _setValue(newValue), waitTimeMs);\n },\n [timeoutHook],\n );\n\n return [value, setValue, setValueDeferred];\n};\n","import { LuiMiniSpinner } from '@linzjs/lui';\nimport { CsvExportParams } from 'ag-grid-community';\nimport { delay } from 'lodash-es';\nimport { useContext } from 'react';\n\nimport { GridContext } from '../../contexts/GridContext';\nimport { useStateDeferred } from '../../lui/stateDeferredHook';\nimport { GridFilterHeaderIconButton } from './GridFilterHeaderIconButton';\n\nexport const GridFilterDownloadCsvButton = (csvExportParams: CsvExportParams) => {\n const { downloadCsv } = useContext(GridContext);\n\n const [downloading, setDownloading, setDownloadingDeferred] = useStateDeferred(false);\n\n const handleDownloadClick = () => {\n setDownloading(true);\n // Defer the download such that the component disabled state can update\n delay(() => {\n downloadCsv(csvExportParams);\n // Defer re-enablement as the browser takes time to process the download\n setDownloadingDeferred(false, 4000);\n }, 100);\n };\n\n return downloading ? (\n \n ) : (\n \n );\n};\n","import { LuiIcon } from '@linzjs/lui';\nimport { useContext, useEffect, useState } from 'react';\n\nimport { GridContext } from '../../contexts/GridContext';\n\nexport interface GridFilterQuickProps {\n quickFilterPlaceholder?: string;\n defaultValue?: string;\n}\n\nexport const GridFilterQuick = ({ quickFilterPlaceholder, defaultValue }: GridFilterQuickProps) => {\n const { setQuickFilter } = useContext(GridContext);\n const [quickFilterValue, setQuickFilterValue] = useState(defaultValue ?? '');\n\n useEffect(() => {\n setQuickFilter(quickFilterValue);\n }, [quickFilterValue, setQuickFilter]);\n\n return (\n \n
\n \n
\n
{\n setQuickFilterValue(event.target.value);\n }}\n />\n {children}
\n);\n","'use strict';\n\n/* global setTimeout, clearTimeout */\n\nmodule.exports = function debounce(fn) {\n var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;\n var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n\n var lastCallAt = void 0;\n var deferred = void 0;\n var timer = void 0;\n var pendingArgs = [];\n return function debounced() {\n var currentWait = getWait(wait);\n var currentTime = new Date().getTime();\n\n var isCold = !lastCallAt || currentTime - lastCallAt > currentWait;\n\n lastCallAt = currentTime;\n\n for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n if (isCold && options.leading) {\n return options.accumulate ? Promise.resolve(fn.call(this, [args])).then(function (result) {\n return result[0];\n }) : Promise.resolve(fn.call.apply(fn, [this].concat(args)));\n }\n\n if (deferred) {\n clearTimeout(timer);\n } else {\n deferred = defer();\n }\n\n pendingArgs.push(args);\n timer = setTimeout(flush.bind(this), currentWait);\n\n if (options.accumulate) {\n var argsIndex = pendingArgs.length - 1;\n return deferred.promise.then(function (results) {\n return results[argsIndex];\n });\n }\n\n return deferred.promise;\n };\n\n function flush() {\n var thisDeferred = deferred;\n clearTimeout(timer);\n\n Promise.resolve(options.accumulate ? fn.call(this, pendingArgs) : fn.apply(this, pendingArgs[pendingArgs.length - 1])).then(thisDeferred.resolve, thisDeferred.reject);\n\n pendingArgs = [];\n deferred = null;\n }\n};\n\nfunction getWait(wait) {\n return typeof wait === 'function' ? wait() : wait;\n}\n\nfunction defer() {\n var deferred = {};\n deferred.promise = new Promise(function (resolve, reject) {\n deferred.resolve = resolve;\n deferred.reject = reject;\n });\n return deferred;\n}\n//# sourceMappingURL=index.js.map","import { createContext } from 'react';\n\nexport interface GridSubComponentContextType {\n value: any;\n data: any;\n setValue: (value: string) => void;\n setValid: (valid: boolean) => void;\n triggerSave: () => Promise;\n context: any;\n}\n\nexport const GridSubComponentContext = createContext({\n value: 'GridSubComponentContext value no context',\n data: {},\n setValue: () => {\n console.error('GridSubComponentContext setValue no context');\n },\n setValid: () => {\n console.error('GridSubComponentContext setValid no context');\n },\n // eslint-disable-next-line @typescript-eslint/require-await\n triggerSave: async () => {\n console.error('GridSubComponentContext triggerSave no context');\n },\n context: null,\n});\n","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import './FormError.scss';\n\nimport { LuiIcon } from '@linzjs/lui';\nimport { ReactElement } from 'react';\n\nexport interface FormErrorProps {\n helpText?: string;\n error?: ReactElement | string | boolean | null;\n}\n\nexport const FormError = (props: FormErrorProps) => {\n return (\n <>\n {props.error && (\n \n \n {props.error}\n
\n )}\n\n {props.helpText && !props.error && {props.helpText}}\n \n );\n};\n","export default function escapeStringRegexp(string) {\n\tif (typeof string !== 'string') {\n\t\tthrow new TypeError('Expected a string');\n\t}\n\n\t// Escape characters with special meaning either inside or outside character sets.\n\t// Use a simple backslash escape when it’s always valid, and a `\\xnn` escape when the simpler form would be disallowed by Unicode patterns’ stricter grammar.\n\treturn string\n\t\t.replace(/[|\\\\{}()[\\]^$+*?.]/g, '\\\\$&')\n\t\t.replace(/-/g, '\\\\x2d');\n}\n","import escapeStringRegexp from 'escape-string-regexp';\n\nconst regexpCache = new Map();\n\nconst sanitizeArray = (input, inputName) => {\n\tif (!Array.isArray(input)) {\n\t\tswitch (typeof input) {\n\t\t\tcase 'string':\n\t\t\t\tinput = [input];\n\t\t\t\tbreak;\n\t\t\tcase 'undefined':\n\t\t\t\tinput = [];\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tthrow new TypeError(`Expected '${inputName}' to be a string or an array, but got a type of '${typeof input}'`);\n\t\t}\n\t}\n\n\treturn input.filter(string => {\n\t\tif (typeof string !== 'string') {\n\t\t\tif (typeof string === 'undefined') {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\tthrow new TypeError(`Expected '${inputName}' to be an array of strings, but found a type of '${typeof string}' in the array`);\n\t\t}\n\n\t\treturn true;\n\t});\n};\n\nconst makeRegexp = (pattern, options) => {\n\toptions = {\n\t\tcaseSensitive: false,\n\t\t...options,\n\t};\n\n\tconst cacheKey = pattern + JSON.stringify(options);\n\n\tif (regexpCache.has(cacheKey)) {\n\t\treturn regexpCache.get(cacheKey);\n\t}\n\n\tconst negated = pattern[0] === '!';\n\n\tif (negated) {\n\t\tpattern = pattern.slice(1);\n\t}\n\n\tpattern = escapeStringRegexp(pattern).replace(/\\\\\\*/g, '[\\\\s\\\\S]*');\n\n\tconst regexp = new RegExp(`^${pattern}$`, options.caseSensitive ? '' : 'i');\n\tregexp.negated = negated;\n\tregexpCache.set(cacheKey, regexp);\n\n\treturn regexp;\n};\n\nconst baseMatcher = (inputs, patterns, options, firstMatchOnly) => {\n\tinputs = sanitizeArray(inputs, 'inputs');\n\tpatterns = sanitizeArray(patterns, 'patterns');\n\n\tif (patterns.length === 0) {\n\t\treturn [];\n\t}\n\n\tpatterns = patterns.map(pattern => makeRegexp(pattern, options));\n\n\tconst {allPatterns} = options || {};\n\tconst result = [];\n\n\tfor (const input of inputs) {\n\t\t// String is included only if it matches at least one non-negated pattern supplied.\n\t\t// Note: the `allPatterns` option requires every non-negated pattern to be matched once.\n\t\t// Matching a negated pattern excludes the string.\n\t\tlet matches;\n\t\tconst didFit = [...patterns].fill(false);\n\n\t\tfor (const [index, pattern] of patterns.entries()) {\n\t\t\tif (pattern.test(input)) {\n\t\t\t\tdidFit[index] = true;\n\t\t\t\tmatches = !pattern.negated;\n\n\t\t\t\tif (!matches) {\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tif (\n\t\t\t!(\n\t\t\t\tmatches === false\n\t\t\t\t|| (matches === undefined && patterns.some(pattern => !pattern.negated))\n\t\t\t\t|| (allPatterns && didFit.some((yes, index) => !yes && !patterns[index].negated))\n\t\t\t)\n\t\t) {\n\t\t\tresult.push(input);\n\n\t\t\tif (firstMatchOnly) {\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\treturn result;\n};\n\nexport function matcher(inputs, patterns, options) {\n\treturn baseMatcher(inputs, patterns, options, false);\n}\n\nexport function isMatch(inputs, patterns, options) {\n\treturn baseMatcher(inputs, patterns, options, true).length > 0;\n}\n","import { isEmpty, partition } from 'lodash-es';\nimport { isMatch } from 'matcher';\n\n/**\n * Text matching with wildcards and multiple matchers.\n *\n * \"L\" => L*\n * \"=L\" => L\n * \"*L*\" => *L*\n * \"*L\" => *L\n * \"A B\" => A* and B*\n * \"A B, C\" => (A* and B*) or C*\n * \"!A\" => all values must not match A\n * Returns true if there's a text match.\n */\nexport const textMatch = (text: string | undefined | null, filter: string): boolean => {\n if (text == null) return true;\n\n const superFilters = filter\n .split(',')\n .map((sf) => sf.trim())\n .filter((sf) => sf)\n .map((r) =>\n r\n .split(/\\s+/)\n .map((f) => (f.startsWith('=') ? f.slice(1) : f + '*'))\n .join(' '),\n );\n const [negativeFilters, positiveFilters] = partition(superFilters, (superFilters) => superFilters.startsWith('!'));\n\n const values = text.replaceAll(',', ' ').trim().split(/\\s+/);\n return (\n (isEmpty(positiveFilters) || // Not filtered\n positiveFilters.some((superFilter) => {\n const subFilters = superFilter.split(/\\s+/).map((s) => s.replaceAll(/([!?])/g, '\\\\$1'));\n return subFilters.every((subFilter) => values.some((value) => isMatch(value, subFilter)));\n })) &&\n (isEmpty(negativeFilters) ||\n negativeFilters.every((superFilter) => values.every((value) => isMatch(value, superFilter))))\n );\n};\n","import { ReactElement, useCallback, useContext, useEffect, useRef, useState } from 'react';\n\nimport { GridContext } from '../contexts/GridContext';\nimport { useGridPopoverContext } from '../contexts/GridPopoverContext';\nimport { ControlledMenu } from '../react-menu3';\nimport { MenuCloseEvent } from '../react-menu3/types';\nimport { CloseReason } from '../react-menu3/utils';\nimport { GridBaseRow } from './Grid';\n\nexport interface GridPopoverHookProps {\n className: string | undefined;\n invalid?: () =>\n | Promise\n | ReactElement\n | boolean\n | string\n | null\n | undefined;\n save?: (selectedRows: TData[]) => Promise;\n dontSaveOnExternalClick?: boolean;\n}\n\nexport const useGridPopoverHook = (props: GridPopoverHookProps) => {\n const { stopEditing, cancelEdit } = useContext(GridContext);\n const { anchorRef, saving, updateValue } = useGridPopoverContext();\n const saveButtonRef = useRef(null);\n const [isOpen, setOpen] = useState(false);\n\n useEffect(() => {\n setOpen(true);\n }, []);\n\n const triggerSave = useCallback(\n async (reason?: string) => {\n if (reason == CloseReason.CANCEL) {\n cancelEdit();\n return;\n }\n if (props.invalid && props.invalid()) {\n return;\n }\n\n if (!props.save) {\n cancelEdit();\n } else if (props.save) {\n // forms that don't provide an invalid fn must wait until they have saved to close\n if (props.invalid) stopEditing();\n if (\n await updateValue(\n props.save,\n reason === CloseReason.TAB_FORWARD ? 1 : reason === CloseReason.TAB_BACKWARD ? -1 : 0,\n )\n ) {\n if (!props.invalid) stopEditing();\n }\n }\n },\n [cancelEdit, props, stopEditing, updateValue],\n );\n\n const popoverWrapper = useCallback(\n (children: ReactElement) => {\n return (\n <>\n {anchorRef.current && (\n {\n // Prevent menu from closing when modals are invoked\n if (event.reason === CloseReason.BLUR) return;\n void triggerSave(event.reason);\n }}\n viewScroll={'auto'}\n dontShrinkIfDirectionIsTop={true}\n className={props.className}\n >\n {saving && ( // This is the overlay that prevents editing when the editor is saving\n \n )}\n {children}\n {\n let reason = e.currentTarget.getAttribute('data-reason') ?? undefined;\n if (props.dontSaveOnExternalClick && reason === CloseReason.BLUR) {\n reason = CloseReason.CANCEL;\n }\n void triggerSave(reason);\n }}\n style={{ display: 'none' }}\n />\n \n )}\n \n );\n },\n [anchorRef, isOpen, props.className, props.dontSaveOnExternalClick, saving, triggerSave],\n );\n\n return {\n popoverWrapper,\n triggerSave,\n };\n};\n","import debounce from 'debounce-promise';\nimport { isEmpty } from 'lodash-es';\nimport { Fragment, ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useGridPopoverContext } from '../../contexts/GridPopoverContext';\nimport { GridSubComponentContext } from '../../contexts/GridSubComponentContext';\nimport { FormError } from '../../lui/FormError';\nimport { FocusableItem, MenuDivider, MenuHeader, MenuItem } from '../../react-menu3';\nimport { ClickEvent } from '../../react-menu3/types';\nimport { textMatch } from '../../utils/textMatcher';\nimport { isNotEmpty } from '../../utils/util';\nimport { ComponentLoadingWrapper } from '../ComponentLoadingWrapper';\nimport { GridBaseRow } from '../Grid';\nimport { CellEditorCommon } from '../GridCell';\nimport { useGridPopoverHook } from '../GridPopoverHook';\n\nexport interface GridPopoutEditDropDownSelectedItem {\n // Note the row that was clicked on will be first\n selectedRows: TData[];\n selectedRowIds: TData['id'][];\n value: TOption;\n subComponentValue?: any;\n}\n\ninterface FinalSelectOption {\n value: TOptionValue;\n label?: ReactElement | string;\n disabled?: boolean | string;\n subComponent?: (props: any, ref: any) => any;\n}\n\nexport const primitiveToSelectOption = (value: T): SelectOption => {\n return {\n value: value,\n label: value ? String(value) : '',\n };\n};\n\nexport const MenuSeparatorString = '_____MENU_SEPARATOR_____';\nexport const MenuSeparator = Object.freeze({ value: MenuSeparatorString });\n\nexport const MenuHeaderString = '_____MENU_HEADER_____';\nexport const MenuHeaderItem = (title: string) => {\n return { label: title, value: MenuHeaderString };\n};\n\nexport type SelectOption = FinalSelectOption;\n\nexport type MaybePromise = T | Promise;\n\nexport interface GridFormDropDownProps extends CellEditorCommon {\n // This overrides CellEditorCommon to provide some common class options\n className?: // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\n | 'GridPopoverEditDropDown-containerSmall'\n // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\n | 'GridPopoverEditDropDown-containerMedium'\n // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\n | 'GridPopoverEditDropDown-containerLarge'\n // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\n | 'GridPopoverEditDropDown-containerUnlimited'\n // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\n | 'GridPopoverEditDropDown-containerAutoWidth'\n | string\n | undefined;\n // local means the use the local filter, otherwise it's expected options will be passed a function that takes a filter\n filtered?: 'local' | 'reload';\n filterDefaultValue?: string;\n filterPlaceholder?: string;\n filterHelpText?: string;\n noOptionsMessage?: string;\n onSelectedItem?: (props: GridPopoutEditDropDownSelectedItem) => Promise | void;\n onSelectFilter?: (props: GridPopoutEditDropDownSelectedItem) => Promise | void;\n options:\n | FinalSelectOption[]\n | ((selectedRows: TData[], filter?: string) => MaybePromise[] | undefined>)\n | undefined;\n}\n\nconst fieldToString = (field: any) => {\n return typeof field === 'symbol' ? field.toString() : `${field}`;\n};\n\nexport const GridFormDropDown = (\n props: GridFormDropDownProps,\n) => {\n const { selectedRows, field, data } = useGridPopoverContext();\n\n // Save triggers during async action processing which triggers another selectItem(), this ref blocks that\n const [filter, setFilter] = useState(props.filterDefaultValue ?? '');\n const [filteredValues, setFilteredValues] = useState();\n const [options, setOptions] = useState[] | null>(null);\n const subComponentIsValid = useRef(false);\n const subComponentInitialValue = useRef(null);\n const [subSelectedValue, setSubSelectedValue] = useState(null);\n // Note: null is assumed to be the filter\n const [selectedItem, setSelectedItem] = useState