npm - @chayns-components/core - Versions diffs - 5.4.13 → 5.4.14-alpha.0 - Mend

@chayns-components/core 5.4.13 → 5.4.14-alpha.0

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

Files changed (462) hide show

package/lib/esm/components/search-box/SearchBox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchBox.js","names":["useDevice","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","useTheme","calculateContentHeight","searchList","sortSearchBoxItems","Icon","Input","GroupName","SearchBoxBody","SearchBoxItem","StyledSearchBoxItemImage","StyledSearchBox","StyledSearchBoxHintText","StyledSearchBoxIcon","StyledSearchBoxLeftWrapper","useUuid","DropdownBodyWrapper","TagInput","filterSearchBoxItems","customFilter","items","searchString","shouldUseCustomFilterOnly","filteredItems","filter","getDropdownSearchString","selectedId","shouldKeepSelectedItemPosition","value","SearchBox","container","dropdownDirection","isInvalid","leftIcons","lists","maxHeight","onBlur","onChange","onKeyDown","onSelect","placeholder","presetValue","hintText","shouldAddInputToList","shouldHideFilterButtons","shouldShowContentOnEmptyInput","shouldShowSmallItems","shouldShowRoundImage","shouldShowToggleIcon","tagInputSettings","ref","matchingListsItems","setMatchingListsItems","selectedImage","setSelectedImage","setValue","height","setHeight","focusedIndex","setFocusedIndex","hasMultipleGroups","setHasMultipleGroups","length","filteredChildrenArray","setFilteredChildrenArray","inputToListValue","setInputToListValue","groups","setGroups","shouldShowBody","setShouldShowBody","uuid","boxRef","contentRef","inputRef","tagInputRef","hasFocusRef","isAnimatingRef","shouldShowPresetValue","theme","dropdownSearchString","isTouch","filterButtons","forEach","groupName","push","id","text","activeList","newLists","list","includes","newMatchingItems","newList","undefined","filteredMatchingListItems","map","item","handleOpen","handleClose","handleFilterButtonsGroupSelect","keys","textArray","selectedItem","find","imageUrl","createElement","src","$shouldShowRoundImage","current","handleFocus","toLowerCase","handleClick","rightElement","onClick","icons","color","leftElement","handleChange","event","filteredLists","target","handleBlur","handleDropdownOutsideClick","blur","handleSelect","newItem","replace","resetValue","content","index","key","name","listIndex","tabIndex","handleKeyDown","e","children","childrenArray","Array","from","newChildren","child","startsWith","filteredChildren","dataset","isgroupname","preventDefault","newIndex","prevElement","newElement","stopPropagation","element","textContent","attributes","nodeValue","newId","document","addEventListener","removeEventListener","handleKeyPress","keyCode","clear","shouldShowDropdown","trim","onAdd","onFocus","onRemove","shouldAllowMultiple","shouldPreventEnter","tags","anchorElement","direction","onClose","onOutsideClick","shouldShow","onGroupSelect","selectedGroups","displayName"],"sources":["../../../../src/components/search-box/SearchBox.tsx"],"sourcesContent":["import { useDevice } from 'chayns-api';\nimport React, {\n ChangeEvent,\n ChangeEventHandler,\n FC,\n FocusEvent,\n FocusEventHandler,\n forwardRef,\n KeyboardEventHandler,\n ReactElement,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport type { IFilterButtonItem } from '../../types/filterButtons';\nimport type { ISearchBoxItem, ISearchBoxItems } from '../../types/searchBox';\nimport { calculateContentHeight } from '../../utils/calculate';\nimport { searchList, sortSearchBoxItems } from '../../utils/searchBox';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport Input from '../input/Input';\nimport GroupName from './group-name/GroupName';\nimport SearchBoxBody from './search-box-body/SearchBoxBody';\nimport SearchBoxItem from './search-box-item/SearchBoxItem';\nimport { StyledSearchBoxItemImage } from './search-box-item/SearchBoxItem.styles';\nimport {\n StyledSearchBox,\n StyledSearchBoxHintText,\n StyledSearchBoxIcon,\n StyledSearchBoxLeftWrapper,\n} from './SearchBox.styles';\nimport { useUuid } from '../../hooks/uuid';\nimport DropdownBodyWrapper from '../dropdown-body-wrapper/DropdownBodyWrapper';\nimport TagInput, { TagInputProps, TagInputRef } from '../tag-input/TagInput';\nimport type { DropdownDirection } from '../../types/dropdown';\n\nexport interface SearchBoxRef {\n clear: VoidFunction;\n}\n\nexport interface TagInputSettings {\n onAdd?: TagInputProps['onAdd'];\n onRemove?: TagInputProps['onRemove'];\n shouldAllowMultiple?: TagInputProps['shouldAllowMultiple'];\n tags?: TagInputProps['tags'];\n}\n\nconst filterSearchBoxItems = ({\n customFilter,\n items,\n searchString,\n shouldUseCustomFilterOnly,\n}: {\n customFilter?: (item: ISearchBoxItem) => boolean;\n items: ISearchBoxItem[];\n searchString: string;\n shouldUseCustomFilterOnly?: boolean;\n}) => {\n if (typeof customFilter !== 'function') {\n return searchList({ items, searchString });\n }\n\n if (shouldUseCustomFilterOnly) {\n const filteredItems = items.filter(customFilter);\n\n return sortSearchBoxItems({ items: filteredItems, searchString });\n }\n\n return searchList({ items, searchString }).filter(customFilter);\n};\n\nconst getDropdownSearchString = ({\n selectedId,\n shouldKeepSelectedItemPosition,\n value,\n}: {\n selectedId?: string;\n shouldKeepSelectedItemPosition?: boolean;\n value: string;\n}) => (shouldKeepSelectedItemPosition && selectedId ? '' : value);\n\nexport type SearchBoxProps = {\n /*\n The element where the content of the `ComboBox` should be rendered via React Portal.\n /\n container?: Element;\n /\n An optional callback function to filter the elements to be displayed\n /\n customFilter?: (item: ISearchBoxItem) => boolean;\n /\n If true, the custom filter replaces the built-in text search instead of narrowing its results.\n /\n shouldUseCustomFilterOnly?: boolean;\n /\n The direction in which the dropdown should be displayed. By default, it is displayed below the input.\n /\n dropdownDirection?: DropdownDirection;\n /\n If true, the input field is marked as invalid\n /\n isInvalid?: boolean;\n /\n An optional icon that is displayed inside the left side of the input.\n /\n leftIcons?: string[];\n /\n List of groups with items that can be searched. It is possible to give only one list; if multiple lists are provided, the 'group name' parameter becomes mandatory.\n /\n lists: ISearchBoxItems[];\n /\n The maximum height of the dropdown body in pixels.\n /\n maxHeight?: number;\n /\n Function to be executed when the input lost focus.\n /\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /\n Function to be executed when the input is changed.\n /\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Function that is executed when a letter is pressed\n /\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /\n Function to be executed when an item is selected.\n /\n onSelect?: (item: ISearchBoxItem) => void;\n /\n The placeholder that should be displayed.\n /\n placeholder?: string;\n /\n Set an input for the search box - it is not an item of a list, just a string.\n /\n presetValue?: string;\n /\n Control the selected item. If you use this prop, make sure to update it when the user selects an item.\n /\n selectedId?: string;\n /\n If true, the selected item keeps its original position in the dropdown list.\n /\n shouldKeepSelectedItemPosition?: boolean;\n /\n If true, the value in the Input is displayed in the list.\n /\n shouldAddInputToList: boolean;\n /\n If true, the filter buttons are hidden.\n /\n shouldHideFilterButtons?: boolean;\n /\n Whether the full list of items should be displayed if the input is empty.\n /\n shouldShowContentOnEmptyInput?: boolean;\n /\n If true, the dropdown items are displayed more compactly.\n /\n shouldShowSmallItems?: boolean;\n /\n If true, the images of the items are displayed in a round shape.\n /\n shouldShowRoundImage?: boolean;\n /\n Whether the icon to open and close the list should be displayed.\n /\n shouldShowToggleIcon?: boolean;\n /\n Settings for the TagInput.\n /\n tagInputSettings?: TagInputSettings;\n /\n A text that should be displayed if no results are found.\n /\n hintText?: string;\n};\n\nconst SearchBox: FC<SearchBoxProps> = forwardRef<SearchBoxRef, SearchBoxProps>(\n (\n {\n container,\n customFilter,\n dropdownDirection,\n isInvalid = false,\n leftIcons,\n lists,\n maxHeight = 300,\n onBlur,\n onChange,\n onKeyDown,\n onSelect,\n placeholder,\n presetValue,\n hintText,\n selectedId,\n shouldAddInputToList = true,\n shouldKeepSelectedItemPosition = false,\n shouldUseCustomFilterOnly = false,\n shouldHideFilterButtons = false,\n shouldShowContentOnEmptyInput = true,\n shouldShowSmallItems = false,\n shouldShowRoundImage,\n shouldShowToggleIcon = false,\n tagInputSettings,\n },\n ref,\n ) => {\n const [matchingListsItems, setMatchingListsItems] = useState<ISearchBoxItems[]>(lists);\n const [selectedImage, setSelectedImage] = useState<ReactElement>();\n const [value, setValue] = useState(\n typeof presetValue === 'string' && presetValue !== '' ? presetValue : '',\n );\n const [height, setHeight] = useState<number>(0);\n const [focusedIndex, setFocusedIndex] = useState<number \| null>(null);\n const [hasMultipleGroups, setHasMultipleGroups] = useState<boolean>(lists.length > 1);\n const [filteredChildrenArray, setFilteredChildrenArray] = useState<Element[]>();\n const [inputToListValue, setInputToListValue] = useState<string>('');\n const [groups, setGroups] = useState<string[]>(['all']);\n const [shouldShowBody, setShouldShowBody] = useState(false);\n\n const uuid = useUuid();\n\n const boxRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement \| null>(null);\n const tagInputRef = useRef<TagInputRef>(null);\n\n const hasFocusRef = useRef<boolean>(false);\n const isAnimatingRef = useRef<boolean>(false);\n const shouldShowPresetValue = useRef<boolean>(\n typeof presetValue === 'string' && presetValue !== '',\n );\n\n const theme = useTheme() as Theme;\n const dropdownSearchString = getDropdownSearchString({\n selectedId,\n shouldKeepSelectedItemPosition,\n value,\n });\n\n const { isTouch } = useDevice();\n\n /\n Checks if there are multiple groups in the lists\n /\n useEffect(() => {\n setHasMultipleGroups(lists.length > 1);\n }, [lists]);\n\n const filterButtons = useMemo(() => {\n const items: IFilterButtonItem[] = [];\n\n if (lists.length <= 1) {\n return items;\n }\n\n lists.forEach(({ groupName }) => {\n if (groupName) {\n items.push({\n id: groupName,\n text: groupName,\n });\n }\n });\n\n return items;\n }, [lists]);\n\n /\n Filters the lists by the FilterButtons\n /\n const activeList = useMemo(() => {\n let newLists: ISearchBoxItems[] = [];\n\n if (groups[0] === 'all') {\n newLists = lists;\n } else {\n lists.forEach((list) => {\n if (list.groupName && groups.includes(list.groupName)) {\n newLists.push(list);\n }\n });\n }\n\n const newMatchingItems: ISearchBoxItems[] = [];\n\n newLists.forEach(({ list, groupName }) => {\n const newList = filterSearchBoxItems({\n customFilter,\n items: list,\n searchString: dropdownSearchString,\n shouldUseCustomFilterOnly,\n });\n\n if (newList.length > 0) {\n newMatchingItems.push({\n groupName,\n list: newList,\n });\n }\n });\n\n if (newMatchingItems.length === 0 && shouldAddInputToList) {\n newMatchingItems.push({\n groupName: undefined,\n list: [],\n });\n }\n\n const filteredMatchingListItems = newMatchingItems.map(({ list, groupName }) => ({\n groupName,\n list: list.filter((item) => {\n if (typeof customFilter === 'function' && shouldUseCustomFilterOnly) {\n return true;\n }\n\n return !(newMatchingItems.length === 1 && item.text === dropdownSearchString);\n }),\n }));\n\n setMatchingListsItems(filteredMatchingListItems);\n\n return newLists;\n }, [\n groups,\n lists,\n customFilter,\n dropdownSearchString,\n shouldAddInputToList,\n shouldUseCustomFilterOnly,\n ]);\n\n const handleOpen = useCallback(() => {\n setShouldShowBody(true);\n }, []);\n\n const handleClose = useCallback(() => {\n setShouldShowBody(false);\n }, []);\n\n const handleFilterButtonsGroupSelect = (keys: string[]) => {\n setGroups(keys.length === 0 ? ['all'] : keys);\n };\n\n /\n This hook calculates the height\n /\n useEffect(() => {\n const textArray: string[] = [];\n\n activeList.forEach(({ list, groupName }) => {\n list.forEach(({ text }) => textArray.push(text));\n if (!groupName) {\n return;\n }\n textArray.push(groupName);\n });\n\n if (shouldAddInputToList && inputToListValue !== '') {\n textArray.push(inputToListValue);\n }\n\n setHeight(calculateContentHeight(textArray));\n }, [inputToListValue, activeList, placeholder, shouldAddInputToList]);\n\n useEffect(() => {\n if (selectedId) {\n activeList.forEach(({ list }) => {\n const selectedItem = list.find(({ id }) => id === selectedId);\n if (selectedItem) {\n setValue(selectedItem.text);\n\n if (selectedItem.imageUrl) {\n setSelectedImage(\n <StyledSearchBoxItemImage\n src={selectedItem.imageUrl}\n $shouldShowRoundImage={shouldShowRoundImage}\n />,\n );\n }\n }\n });\n }\n }, [activeList, selectedId, shouldShowRoundImage]);\n\n /\n This hook resets the value if the selectedId changes to undefined. This is an own useEffect because the value\n * should not be reset if the list changes and the selectedId is still undefined.\n /\n useEffect(() => {\n if (!selectedId && !shouldShowPresetValue.current) {\n setValue('');\n }\n }, [selectedId]);\n\n useEffect(() => {\n isAnimatingRef.current = shouldShowBody;\n }, [shouldShowBody]);\n\n useEffect(() => {\n if (\n (matchingListsItems.length !== 0 \|\| hintText) &&\n !isAnimatingRef.current &&\n hasFocusRef.current\n ) {\n handleOpen();\n }\n }, [handleOpen, hintText, matchingListsItems.length]);\n\n /\n This function handles the focus event of the input and opens the dropdown if the input\n * should show content on an empty input\n /\n const handleFocus = useCallback(() => {\n hasFocusRef.current = true;\n\n if (shouldShowContentOnEmptyInput) {\n const newMatchingItems: ISearchBoxItems[] = [];\n\n activeList.forEach(({ list, groupName }) => {\n const newList = filterSearchBoxItems({\n customFilter,\n items: list,\n searchString: dropdownSearchString,\n shouldUseCustomFilterOnly,\n });\n\n if (newList.length > 0) {\n newMatchingItems.push({\n groupName,\n list: newList,\n });\n }\n });\n\n if (newMatchingItems.length === 0 && shouldAddInputToList) {\n newMatchingItems.push({\n groupName: undefined,\n list: [],\n });\n }\n\n const filteredMatchingListItems = newMatchingItems.map(({ list, groupName }) => ({\n groupName,\n list: list.filter((item) => {\n if (typeof customFilter === 'function' && shouldUseCustomFilterOnly) {\n return true;\n }\n\n return !(\n newMatchingItems.length === 1 && item.text === dropdownSearchString\n );\n }),\n }));\n\n setMatchingListsItems(filteredMatchingListItems);\n\n if (filteredMatchingListItems.length !== 0 \|\| hintText) {\n handleOpen();\n }\n }\n }, [\n shouldShowContentOnEmptyInput,\n activeList,\n shouldAddInputToList,\n hintText,\n dropdownSearchString,\n customFilter,\n shouldUseCustomFilterOnly,\n handleOpen,\n ]);\n\n /\n This function filters the lists by input\n /\n\n useEffect(() => {\n const newMatchingItems: ISearchBoxItems[] = [];\n\n activeList.forEach(({ list, groupName }) => {\n const newList = filterSearchBoxItems({\n customFilter,\n items: list,\n searchString: dropdownSearchString,\n shouldUseCustomFilterOnly,\n });\n\n if (newList.length > 0) {\n newMatchingItems.push({\n groupName,\n list: newList,\n });\n }\n });\n\n if (newMatchingItems.length === 0 && shouldAddInputToList) {\n newMatchingItems.push({\n groupName: undefined,\n list: [],\n });\n }\n\n if (shouldAddInputToList && inputToListValue !== '') {\n newMatchingItems.forEach(({ list }) => {\n list.forEach(({ text }) => {\n if (text.toLowerCase() === inputToListValue.toLowerCase()) {\n setInputToListValue('');\n }\n });\n });\n }\n }, [\n inputToListValue,\n activeList,\n shouldAddInputToList,\n shouldShowContentOnEmptyInput,\n dropdownSearchString,\n customFilter,\n shouldUseCustomFilterOnly,\n ]);\n\n const handleClick = useCallback(() => {\n if (shouldShowBody) {\n handleClose();\n } else {\n handleOpen();\n }\n }, [handleClose, handleOpen, shouldShowBody]);\n\n const rightElement = useMemo(() => {\n if (!shouldShowToggleIcon) {\n return undefined;\n }\n\n return (\n <StyledSearchBoxIcon onClick={handleClick}>\n <Icon icons={['fa fa-chevron-down']} color={theme['006'] as string} />\n </StyledSearchBoxIcon>\n );\n }, [handleClick, shouldShowToggleIcon, theme]);\n\n const leftElement = useMemo(\n () =>\n (leftIcons \|\| selectedImage) && (\n <StyledSearchBoxLeftWrapper>\n {leftIcons && <Icon icons={leftIcons} />}\n {selectedImage && selectedImage}\n </StyledSearchBoxLeftWrapper>\n ),\n [leftIcons, selectedImage],\n );\n\n /\n This function handles changes of the input\n /\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const filteredLists: ISearchBoxItems[] = [];\n shouldShowPresetValue.current = false;\n\n activeList.forEach(({ list, groupName }) => {\n const newList = filterSearchBoxItems({\n customFilter,\n items: list,\n searchString: event.target.value,\n shouldUseCustomFilterOnly,\n });\n\n if (newList.length > 0) {\n filteredLists.push({\n groupName,\n list: newList,\n });\n }\n });\n\n if (filteredLists.length === 0 && shouldAddInputToList) {\n filteredLists.push({\n groupName: undefined,\n list: [],\n });\n }\n\n setSelectedImage(undefined);\n\n if (!shouldShowContentOnEmptyInput && !event.target.value) {\n setMatchingListsItems([]);\n } else {\n setMatchingListsItems(filteredLists);\n }\n\n if (filteredLists.length !== 0) {\n handleOpen();\n }\n\n setValue(event.target.value);\n setInputToListValue(event.target.value);\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [\n activeList,\n customFilter,\n handleOpen,\n onChange,\n shouldAddInputToList,\n shouldShowContentOnEmptyInput,\n shouldUseCustomFilterOnly,\n ],\n );\n\n /\n This function handles the blur event of the input\n /\n const handleBlur = useCallback(\n (event: FocusEvent<HTMLInputElement>) => {\n hasFocusRef.current = false;\n\n if (typeof onBlur === 'function') {\n onBlur(event);\n }\n },\n [onBlur],\n );\n\n const handleDropdownOutsideClick = useCallback(() => {\n tagInputRef.current?.blur();\n\n return hasFocusRef.current && isTouch;\n }, [isTouch]);\n\n /\n This function handles the item selection\n /\n const handleSelect = useCallback(\n (item: ISearchBoxItem) => {\n const newItem = {\n ...item,\n text: item.text.replace('<b>', '').replace('</b>', '').replace('</b', ''),\n };\n\n if (tagInputSettings) {\n setValue('');\n setInputToListValue('');\n tagInputRef.current?.resetValue();\n } else {\n setValue(newItem.text);\n }\n\n handleClose();\n\n setSelectedImage(\n newItem.imageUrl ? (\n <StyledSearchBoxItemImage\n src={newItem.imageUrl}\n $shouldShowRoundImage={shouldShowRoundImage}\n />\n ) : undefined,\n );\n\n setMatchingListsItems([]);\n\n if (typeof onSelect === 'function') {\n onSelect(newItem);\n }\n },\n [handleClose, onSelect, shouldShowRoundImage, tagInputSettings],\n );\n\n const content = useMemo(() => {\n if (hintText && matchingListsItems.length === 0) {\n return (\n <StyledSearchBoxHintText>\n {hintText.replace('##value##', value)}\n </StyledSearchBoxHintText>\n );\n }\n\n const items: ReactElement[] = [];\n\n matchingListsItems.forEach(({ groupName, list }, index) => {\n if (hasMultipleGroups) {\n if (list.length <= 0) {\n return;\n }\n\n if (index !== 0) {\n items.push(<GroupName key={groupName} name={groupName ?? ''} />);\n }\n }\n\n list.forEach(({ id, text, imageUrl }, listIndex) => {\n items.push(\n <SearchBoxItem\n key={`${id}_${groupName ?? ''}`}\n id={id}\n text={text}\n imageUrl={imageUrl}\n shouldShowSmallItems={shouldShowSmallItems}\n shouldShowRoundImage={shouldShowRoundImage}\n onSelect={handleSelect}\n groupName={groupName}\n tabIndex={index === 0 && listIndex === 0 ? 0 : -1}\n />,\n );\n });\n });\n\n if (shouldAddInputToList && inputToListValue !== '') {\n items.push(\n <SearchBoxItem\n id=\"input-value\"\n onSelect={handleSelect}\n shouldShowSmallItems={shouldShowSmallItems}\n text={`<b>${inputToListValue}</b`}\n tabIndex={items.length === 0 ? 0 : -1}\n />,\n );\n }\n\n return items;\n }, [\n hintText,\n matchingListsItems,\n shouldAddInputToList,\n inputToListValue,\n value,\n hasMultipleGroups,\n shouldShowSmallItems,\n shouldShowRoundImage,\n handleSelect,\n ]);\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (!shouldShowBody \|\| matchingListsItems.length === 0) {\n return;\n }\n\n const children = contentRef.current?.children;\n\n if (!children) {\n return;\n }\n\n const childrenArray = Array.from(children);\n\n const newChildren = childrenArray.find((child) =>\n child.id.startsWith('searchBoxContent__'),\n )?.children;\n\n if (!(newChildren && newChildren.length > 0)) {\n return;\n }\n\n const filteredChildren = Array.from(newChildren).filter(\n (child) => (child as HTMLElement).dataset.isgroupname !== 'true',\n );\n\n setFilteredChildrenArray(filteredChildren);\n\n if (e.key === 'ArrowUp' \|\| e.key === 'ArrowDown') {\n e.preventDefault();\n\n if (newChildren && newChildren.length > 0) {\n const newIndex =\n focusedIndex !== null\n ? (focusedIndex +\n (e.key === 'ArrowUp' ? -1 : 1) +\n filteredChildren.length) %\n filteredChildren.length\n : 0;\n\n if (focusedIndex !== null) {\n const prevElement = filteredChildren[focusedIndex] as HTMLDivElement;\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const newElement = filteredChildren[newIndex] as HTMLDivElement;\n\n newElement.tabIndex = 0;\n }\n } else if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n\n if (filteredChildren) {\n const element = filteredChildren[focusedIndex ?? 0];\n\n if (!element) {\n return;\n }\n\n const { id, textContent } = element;\n\n let imageUrl: string \| undefined;\n\n // Just Ignore, it works\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n if (element.children[0]?.attributes.src) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n imageUrl = element.children[0]?.attributes.src.nodeValue as string;\n }\n\n const newId = id.replace('search-box-item__', '');\n\n handleSelect({\n id: newId === 'input-value' ? textContent : newId,\n text: textContent ?? '',\n imageUrl,\n });\n }\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [\n filteredChildrenArray,\n focusedIndex,\n handleSelect,\n matchingListsItems.length,\n shouldShowBody,\n ]);\n\n const handleKeyPress = useCallback((event: KeyboardEvent) => {\n if (event.keyCode === 27) {\n setMatchingListsItems([]);\n }\n }, []);\n\n useImperativeHandle(\n ref,\n () => ({\n clear: () => setValue(''),\n }),\n [],\n );\n\n useEffect(() => {\n document.addEventListener('keydown', handleKeyPress);\n\n return () => {\n document.addEventListener('keydown', handleKeyPress);\n };\n }, [handleKeyPress]);\n\n /\n Update the value if preset value changes\n */\n useEffect(() => {\n if (presetValue) {\n setValue(presetValue);\n }\n }, [presetValue]);\n\n const shouldShowDropdown =\n shouldShowBody &&\n (matchingListsItems.length !== 0 \|\| !!hintText) &&\n (value.trim() !== '' \|\| shouldShowContentOnEmptyInput);\n\n return useMemo(\n () => (\n <StyledSearchBox ref={boxRef} key={`search-box-${uuid}`}>\n <div id={`search_box_input${uuid}`}>\n {tagInputSettings ? (\n <TagInput\n leftElement={leftElement}\n onAdd={tagInputSettings.onAdd}\n onBlur={handleBlur}\n onChange={handleChange}\n onFocus={handleFocus}\n onRemove={tagInputSettings.onRemove}\n placeholder={placeholder}\n ref={tagInputRef}\n shouldAllowMultiple={tagInputSettings.shouldAllowMultiple}\n shouldPreventEnter\n tags={tagInputSettings.tags}\n />\n ) : (\n <Input\n isInvalid={isInvalid}\n leftElement={leftElement}\n onBlur={handleBlur}\n onChange={handleChange}\n onFocus={handleFocus}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n ref={inputRef}\n rightElement={rightElement}\n value={value}\n />\n )}\n </div>\n {boxRef.current && (\n <DropdownBodyWrapper\n anchorElement={boxRef.current}\n container={container}\n direction={dropdownDirection}\n onClose={handleClose}\n onOutsideClick={handleDropdownOutsideClick}\n shouldShowDropdown={shouldShowDropdown}\n >\n <SearchBoxBody\n filterButtons={filterButtons}\n height={height}\n maxHeight={maxHeight}\n shouldShow={shouldShowDropdown}\n key={`search-box-body-${uuid}`}\n onGroupSelect={handleFilterButtonsGroupSelect}\n ref={contentRef}\n selectedGroups={groups}\n shouldHideFilterButtons={shouldHideFilterButtons}\n >\n {content}\n </SearchBoxBody>\n </DropdownBodyWrapper>\n )}\n </StyledSearchBox>\n ),\n [\n container,\n content,\n dropdownDirection,\n filterButtons,\n groups,\n handleBlur,\n handleChange,\n handleClose,\n handleDropdownOutsideClick,\n handleFocus,\n height,\n isInvalid,\n leftElement,\n maxHeight,\n onKeyDown,\n placeholder,\n rightElement,\n shouldHideFilterButtons,\n shouldShowDropdown,\n tagInputSettings,\n uuid,\n value,\n ],\n );\n },\n);\n\nSearchBox.displayName = 'SearchBox';\n\nexport default SearchBox;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,YAAY;AACtC,OAAOC,KAAK,IAMRC,UAAU,EAGVC,WAAW,EACXC,SAAS,EACTC,mBAAmB,EACnBC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,SAASC,QAAQ,QAAQ,mBAAmB;AAG5C,SAASC,sBAAsB,QAAQ,uBAAuB;AAC9D,SAASC,UAAU,EAAEC,kBAAkB,QAAQ,uBAAuB;AAEtE,OAAOC,IAAI,MAAM,cAAc;AAC/B,OAAOC,KAAK,MAAM,gBAAgB;AAClC,OAAOC,SAAS,MAAM,wBAAwB;AAC9C,OAAOC,aAAa,MAAM,iCAAiC;AAC3D,OAAOC,aAAa,MAAM,iCAAiC;AAC3D,SAASC,wBAAwB,QAAQ,wCAAwC;AACjF,SACIC,eAAe,EACfC,uBAAuB,EACvBC,mBAAmB,EACnBC,0BAA0B,QACvB,oBAAoB;AAC3B,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,OAAOC,mBAAmB,MAAM,8CAA8C;AAC9E,OAAOC,QAAQ,MAAsC,uBAAuB;AAc5E,MAAMC,oBAAoB,GAAGA,CAAC;EAC1BC,YAAY;EACZC,KAAK;EACLC,YAAY;EACZC;AAMJ,CAAC,KAAK;EACF,IAAI,OAAOH,YAAY,KAAK,UAAU,EAAE;IACpC,OAAOhB,UAAU,CAAC;MAAEiB,KAAK;MAAEC;IAAa,CAAC,CAAC;EAC9C;EAEA,IAAIC,yBAAyB,EAAE;IAC3B,MAAMC,aAAa,GAAGH,KAAK,CAACI,MAAM,CAACL,YAAY,CAAC;IAEhD,OAAOf,kBAAkB,CAAC;MAAEgB,KAAK,EAAEG,aAAa;MAAEF;IAAa,CAAC,CAAC;EACrE;EAEA,OAAOlB,UAAU,CAAC;IAAEiB,KAAK;IAAEC;EAAa,CAAC,CAAC,CAACG,MAAM,CAACL,YAAY,CAAC;AACnE,CAAC;AAED,MAAMM,uBAAuB,GAAGA,CAAC;EAC7BC,UAAU;EACVC,8BAA8B;EAC9BC;AAKJ,CAAC,KAAMD,8BAA8B,IAAID,UAAU,GAAG,EAAE,GAAGE,KAAM;AAqGjE,MAAMC,SAA6B,gBAAGnC,UAAU,CAC5C,CACI;EACIoC,SAAS;EACTX,YAAY;EACZY,iBAAiB;EACjBC,SAAS,GAAG,KAAK;EACjBC,SAAS;EACTC,KAAK;EACLC,SAAS,GAAG,GAAG;EACfC,MAAM;EACNC,QAAQ;EACRC,SAAS;EACTC,QAAQ;EACRC,WAAW;EACXC,WAAW;EACXC,QAAQ;EACRhB,UAAU;EACViB,oBAAoB,GAAG,IAAI;EAC3BhB,8BAA8B,GAAG,KAAK;EACtCL,yBAAyB,GAAG,KAAK;EACjCsB,uBAAuB,GAAG,KAAK;EAC/BC,6BAA6B,GAAG,IAAI;EACpCC,oBAAoB,GAAG,KAAK;EAC5BC,oBAAoB;EACpBC,oBAAoB,GAAG,KAAK;EAC5BC;AACJ,CAAC,EACDC,GAAG,KACF;EACD,MAAM,CAACC,kBAAkB,EAAEC,qBAAqB,CAAC,GAAGpD,QAAQ,CAAoBkC,KAAK,CAAC;EACtF,MAAM,CAACmB,aAAa,EAAEC,gBAAgB,CAAC,GAAGtD,QAAQ,CAAe,CAAC;EAClE,MAAM,CAAC4B,KAAK,EAAE2B,QAAQ,CAAC,GAAGvD,QAAQ,CAC9B,OAAOyC,WAAW,KAAK,QAAQ,IAAIA,WAAW,KAAK,EAAE,GAAGA,WAAW,GAAG,EAC1E,CAAC;EACD,MAAM,CAACe,MAAM,EAAEC,SAAS,CAAC,GAAGzD,QAAQ,CAAS,CAAC,CAAC;EAC/C,MAAM,CAAC0D,YAAY,EAAEC,eAAe,CAAC,GAAG3D,QAAQ,CAAgB,IAAI,CAAC;EACrE,MAAM,CAAC4D,iBAAiB,EAAEC,oBAAoB,CAAC,GAAG7D,QAAQ,CAAUkC,KAAK,CAAC4B,MAAM,GAAG,CAAC,CAAC;EACrF,MAAM,CAACC,qBAAqB,EAAEC,wBAAwB,CAAC,GAAGhE,QAAQ,CAAY,CAAC;EAC/E,MAAM,CAACiE,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGlE,QAAQ,CAAS,EAAE,CAAC;EACpE,MAAM,CAACmE,MAAM,EAAEC,SAAS,CAAC,GAAGpE,QAAQ,CAAW,CAAC,KAAK,CAAC,CAAC;EACvD,MAAM,CAACqE,cAAc,EAAEC,iBAAiB,CAAC,GAAGtE,QAAQ,CAAC,KAAK,CAAC;EAE3D,MAAMuE,IAAI,GAAGxD,OAAO,CAAC,CAAC;EAEtB,MAAMyD,MAAM,GAAGzE,MAAM,CAAiB,IAAI,CAAC;EAC3C,MAAM0E,UAAU,GAAG1E,MAAM,CAAiB,IAAI,CAAC;EAC/C,MAAM2E,QAAQ,GAAG3E,MAAM,CAA0B,IAAI,CAAC;EACtD,MAAM4E,WAAW,GAAG5E,MAAM,CAAc,IAAI,CAAC;EAE7C,MAAM6E,WAAW,GAAG7E,MAAM,CAAU,KAAK,CAAC;EAC1C,MAAM8E,cAAc,GAAG9E,MAAM,CAAU,KAAK,CAAC;EAC7C,MAAM+E,qBAAqB,GAAG/E,MAAM,CAChC,OAAO0C,WAAW,KAAK,QAAQ,IAAIA,WAAW,KAAK,EACvD,CAAC;EAED,MAAMsC,KAAK,GAAG9E,QAAQ,CAAC,CAAU;EACjC,MAAM+E,oBAAoB,GAAGvD,uBAAuB,CAAC;IACjDC,UAAU;IACVC,8BAA8B;IAC9BC;EACJ,CAAC,CAAC;EAEF,MAAM;IAAEqD;EAAQ,CAAC,GAAGzF,SAAS,CAAC,CAAC;;EAE/B;AACR;AACA;EACQI,SAAS,CAAC,MAAM;IACZiE,oBAAoB,CAAC3B,KAAK,CAAC4B,MAAM,GAAG,CAAC,CAAC;EAC1C,CAAC,EAAE,CAAC5B,KAAK,CAAC,CAAC;EAEX,MAAMgD,aAAa,GAAGpF,OAAO,CAAC,MAAM;IAChC,MAAMsB,KAA0B,GAAG,EAAE;IAErC,IAAIc,KAAK,CAAC4B,MAAM,IAAI,CAAC,EAAE;MACnB,OAAO1C,KAAK;IAChB;IAEAc,KAAK,CAACiD,OAAO,CAAC,CAAC;MAAEC;IAAU,CAAC,KAAK;MAC7B,IAAIA,SAAS,EAAE;QACXhE,KAAK,CAACiE,IAAI,CAAC;UACPC,EAAE,EAAEF,SAAS;UACbG,IAAI,EAAEH;QACV,CAAC,CAAC;MACN;IACJ,CAAC,CAAC;IAEF,OAAOhE,KAAK;EAChB,CAAC,EAAE,CAACc,KAAK,CAAC,CAAC;;EAEX;AACR;AACA;EACQ,MAAMsD,UAAU,GAAG1F,OAAO,CAAC,MAAM;IAC7B,IAAI2F,QAA2B,GAAG,EAAE;IAEpC,IAAItB,MAAM,CAAC,CAAC,CAAC,KAAK,KAAK,EAAE;MACrBsB,QAAQ,GAAGvD,KAAK;IACpB,CAAC,MAAM;MACHA,KAAK,CAACiD,OAAO,CAAEO,IAAI,IAAK;QACpB,IAAIA,IAAI,CAACN,SAAS,IAAIjB,MAAM,CAACwB,QAAQ,CAACD,IAAI,CAACN,SAAS,CAAC,EAAE;UACnDK,QAAQ,CAACJ,IAAI,CAACK,IAAI,CAAC;QACvB;MACJ,CAAC,CAAC;IACN;IAEA,MAAME,gBAAmC,GAAG,EAAE;IAE9CH,QAAQ,CAACN,OAAO,CAAC,CAAC;MAAEO,IAAI;MAAEN;IAAU,CAAC,KAAK;MACtC,MAAMS,OAAO,GAAG3E,oBAAoB,CAAC;QACjCC,YAAY;QACZC,KAAK,EAAEsE,IAAI;QACXrE,YAAY,EAAE2D,oBAAoB;QAClC1D;MACJ,CAAC,CAAC;MAEF,IAAIuE,OAAO,CAAC/B,MAAM,GAAG,CAAC,EAAE;QACpB8B,gBAAgB,CAACP,IAAI,CAAC;UAClBD,SAAS;UACTM,IAAI,EAAEG;QACV,CAAC,CAAC;MACN;IACJ,CAAC,CAAC;IAEF,IAAID,gBAAgB,CAAC9B,MAAM,KAAK,CAAC,IAAInB,oBAAoB,EAAE;MACvDiD,gBAAgB,CAACP,IAAI,CAAC;QAClBD,SAAS,EAAEU,SAAS;QACpBJ,IAAI,EAAE;MACV,CAAC,CAAC;IACN;IAEA,MAAMK,yBAAyB,GAAGH,gBAAgB,CAACI,GAAG,CAAC,CAAC;MAAEN,IAAI;MAAEN;IAAU,CAAC,MAAM;MAC7EA,SAAS;MACTM,IAAI,EAAEA,IAAI,CAAClE,MAAM,CAAEyE,IAAI,IAAK;QACxB,IAAI,OAAO9E,YAAY,KAAK,UAAU,IAAIG,yBAAyB,EAAE;UACjE,OAAO,IAAI;QACf;QAEA,OAAO,EAAEsE,gBAAgB,CAAC9B,MAAM,KAAK,CAAC,IAAImC,IAAI,CAACV,IAAI,KAAKP,oBAAoB,CAAC;MACjF,CAAC;IACL,CAAC,CAAC,CAAC;IAEH5B,qBAAqB,CAAC2C,yBAAyB,CAAC;IAEhD,OAAON,QAAQ;EACnB,CAAC,EAAE,CACCtB,MAAM,EACNjC,KAAK,EACLf,YAAY,EACZ6D,oBAAoB,EACpBrC,oBAAoB,EACpBrB,yBAAyB,CAC5B,CAAC;EAEF,MAAM4E,UAAU,GAAGvG,WAAW,CAAC,MAAM;IACjC2E,iBAAiB,CAAC,IAAI,CAAC;EAC3B,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM6B,WAAW,GAAGxG,WAAW,CAAC,MAAM;IAClC2E,iBAAiB,CAAC,KAAK,CAAC;EAC5B,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM8B,8BAA8B,GAAIC,IAAc,IAAK;IACvDjC,SAAS,CAACiC,IAAI,CAACvC,MAAM,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,GAAGuC,IAAI,CAAC;EACjD,CAAC;;EAED;AACR;AACA;EACQzG,SAAS,CAAC,MAAM;IACZ,MAAM0G,SAAmB,GAAG,EAAE;IAE9Bd,UAAU,CAACL,OAAO,CAAC,CAAC;MAAEO,IAAI;MAAEN;IAAU,CAAC,KAAK;MACxCM,IAAI,CAACP,OAAO,CAAC,CAAC;QAAEI;MAAK,CAAC,KAAKe,SAAS,CAACjB,IAAI,CAACE,IAAI,CAAC,CAAC;MAChD,IAAI,CAACH,SAAS,EAAE;QACZ;MACJ;MACAkB,SAAS,CAACjB,IAAI,CAACD,SAAS,CAAC;IAC7B,CAAC,CAAC;IAEF,IAAIzC,oBAAoB,IAAIsB,gBAAgB,KAAK,EAAE,EAAE;MACjDqC,SAAS,CAACjB,IAAI,CAACpB,gBAAgB,CAAC;IACpC;IAEAR,SAAS,CAACvD,sBAAsB,CAACoG,SAAS,CAAC,CAAC;EAChD,CAAC,EAAE,CAACrC,gBAAgB,EAAEuB,UAAU,EAAEhD,WAAW,EAAEG,oBAAoB,CAAC,CAAC;EAErE/C,SAAS,CAAC,MAAM;IACZ,IAAI8B,UAAU,EAAE;MACZ8D,UAAU,CAACL,OAAO,CAAC,CAAC;QAAEO;MAAK,CAAC,KAAK;QAC7B,MAAMa,YAAY,GAAGb,IAAI,CAACc,IAAI,CAAC,CAAC;UAAElB;QAAG,CAAC,KAAKA,EAAE,KAAK5D,UAAU,CAAC;QAC7D,IAAI6E,YAAY,EAAE;UACdhD,QAAQ,CAACgD,YAAY,CAAChB,IAAI,CAAC;UAE3B,IAAIgB,YAAY,CAACE,QAAQ,EAAE;YACvBnD,gBAAgB,cACZ7D,KAAA,CAAAiH,aAAA,CAAChG,wBAAwB;cACrBiG,GAAG,EAAEJ,YAAY,CAACE,QAAS;cAC3BG,qBAAqB,EAAE7D;YAAqB,CAC/C,CACL,CAAC;UACL;QACJ;MACJ,CAAC,CAAC;IACN;EACJ,CAAC,EAAE,CAACyC,UAAU,EAAE9D,UAAU,EAAEqB,oBAAoB,CAAC,CAAC;;EAElD;AACR;AACA;AACA;EACQnD,SAAS,CAAC,MAAM;IACZ,IAAI,CAAC8B,UAAU,IAAI,CAACoD,qBAAqB,CAAC+B,OAAO,EAAE;MAC/CtD,QAAQ,CAAC,EAAE,CAAC;IAChB;EACJ,CAAC,EAAE,CAAC7B,UAAU,CAAC,CAAC;EAEhB9B,SAAS,CAAC,MAAM;IACZiF,cAAc,CAACgC,OAAO,GAAGxC,cAAc;EAC3C,CAAC,EAAE,CAACA,cAAc,CAAC,CAAC;EAEpBzE,SAAS,CAAC,MAAM;IACZ,IACI,CAACuD,kBAAkB,CAACW,MAAM,KAAK,CAAC,IAAIpB,QAAQ,KAC5C,CAACmC,cAAc,CAACgC,OAAO,IACvBjC,WAAW,CAACiC,OAAO,EACrB;MACEX,UAAU,CAAC,CAAC;IAChB;EACJ,CAAC,EAAE,CAACA,UAAU,EAAExD,QAAQ,EAAES,kBAAkB,CAACW,MAAM,CAAC,CAAC;;EAErD;AACR;AACA;AACA;EACQ,MAAMgD,WAAW,GAAGnH,WAAW,CAAC,MAAM;IAClCiF,WAAW,CAACiC,OAAO,GAAG,IAAI;IAE1B,IAAIhE,6BAA6B,EAAE;MAC/B,MAAM+C,gBAAmC,GAAG,EAAE;MAE9CJ,UAAU,CAACL,OAAO,CAAC,CAAC;QAAEO,IAAI;QAAEN;MAAU,CAAC,KAAK;QACxC,MAAMS,OAAO,GAAG3E,oBAAoB,CAAC;UACjCC,YAAY;UACZC,KAAK,EAAEsE,IAAI;UACXrE,YAAY,EAAE2D,oBAAoB;UAClC1D;QACJ,CAAC,CAAC;QAEF,IAAIuE,OAAO,CAAC/B,MAAM,GAAG,CAAC,EAAE;UACpB8B,gBAAgB,CAACP,IAAI,CAAC;YAClBD,SAAS;YACTM,IAAI,EAAEG;UACV,CAAC,CAAC;QACN;MACJ,CAAC,CAAC;MAEF,IAAID,gBAAgB,CAAC9B,MAAM,KAAK,CAAC,IAAInB,oBAAoB,EAAE;QACvDiD,gBAAgB,CAACP,IAAI,CAAC;UAClBD,SAAS,EAAEU,SAAS;UACpBJ,IAAI,EAAE;QACV,CAAC,CAAC;MACN;MAEA,MAAMK,yBAAyB,GAAGH,gBAAgB,CAACI,GAAG,CAAC,CAAC;QAAEN,IAAI;QAAEN;MAAU,CAAC,MAAM;QAC7EA,SAAS;QACTM,IAAI,EAAEA,IAAI,CAAClE,MAAM,CAAEyE,IAAI,IAAK;UACxB,IAAI,OAAO9E,YAAY,KAAK,UAAU,IAAIG,yBAAyB,EAAE;YACjE,OAAO,IAAI;UACf;UAEA,OAAO,EACHsE,gBAAgB,CAAC9B,MAAM,KAAK,CAAC,IAAImC,IAAI,CAACV,IAAI,KAAKP,oBAAoB,CACtE;QACL,CAAC;MACL,CAAC,CAAC,CAAC;MAEH5B,qBAAqB,CAAC2C,yBAAyB,CAAC;MAEhD,IAAIA,yBAAyB,CAACjC,MAAM,KAAK,CAAC,IAAIpB,QAAQ,EAAE;QACpDwD,UAAU,CAAC,CAAC;MAChB;IACJ;EACJ,CAAC,EAAE,CACCrD,6BAA6B,EAC7B2C,UAAU,EACV7C,oBAAoB,EACpBD,QAAQ,EACRsC,oBAAoB,EACpB7D,YAAY,EACZG,yBAAyB,EACzB4E,UAAU,CACb,CAAC;;EAEF;AACR;AACA;;EAEQtG,SAAS,CAAC,MAAM;IACZ,MAAMgG,gBAAmC,GAAG,EAAE;IAE9CJ,UAAU,CAACL,OAAO,CAAC,CAAC;MAAEO,IAAI;MAAEN;IAAU,CAAC,KAAK;MACxC,MAAMS,OAAO,GAAG3E,oBAAoB,CAAC;QACjCC,YAAY;QACZC,KAAK,EAAEsE,IAAI;QACXrE,YAAY,EAAE2D,oBAAoB;QAClC1D;MACJ,CAAC,CAAC;MAEF,IAAIuE,OAAO,CAAC/B,MAAM,GAAG,CAAC,EAAE;QACpB8B,gBAAgB,CAACP,IAAI,CAAC;UAClBD,SAAS;UACTM,IAAI,EAAEG;QACV,CAAC,CAAC;MACN;IACJ,CAAC,CAAC;IAEF,IAAID,gBAAgB,CAAC9B,MAAM,KAAK,CAAC,IAAInB,oBAAoB,EAAE;MACvDiD,gBAAgB,CAACP,IAAI,CAAC;QAClBD,SAAS,EAAEU,SAAS;QACpBJ,IAAI,EAAE;MACV,CAAC,CAAC;IACN;IAEA,IAAI/C,oBAAoB,IAAIsB,gBAAgB,KAAK,EAAE,EAAE;MACjD2B,gBAAgB,CAACT,OAAO,CAAC,CAAC;QAAEO;MAAK,CAAC,KAAK;QACnCA,IAAI,CAACP,OAAO,CAAC,CAAC;UAAEI;QAAK,CAAC,KAAK;UACvB,IAAIA,IAAI,CAACwB,WAAW,CAAC,CAAC,KAAK9C,gBAAgB,CAAC8C,WAAW,CAAC,CAAC,EAAE;YACvD7C,mBAAmB,CAAC,EAAE,CAAC;UAC3B;QACJ,CAAC,CAAC;MACN,CAAC,CAAC;IACN;EACJ,CAAC,EAAE,CACCD,gBAAgB,EAChBuB,UAAU,EACV7C,oBAAoB,EACpBE,6BAA6B,EAC7BmC,oBAAoB,EACpB7D,YAAY,EACZG,yBAAyB,CAC5B,CAAC;EAEF,MAAM0F,WAAW,GAAGrH,WAAW,CAAC,MAAM;IAClC,IAAI0E,cAAc,EAAE;MAChB8B,WAAW,CAAC,CAAC;IACjB,CAAC,MAAM;MACHD,UAAU,CAAC,CAAC;IAChB;EACJ,CAAC,EAAE,CAACC,WAAW,EAAED,UAAU,EAAE7B,cAAc,CAAC,CAAC;EAE7C,MAAM4C,YAAY,GAAGnH,OAAO,CAAC,MAAM;IAC/B,IAAI,CAACkD,oBAAoB,EAAE;MACvB,OAAO8C,SAAS;IACpB;IAEA,oBACIrG,KAAA,CAAAiH,aAAA,CAAC7F,mBAAmB;MAACqG,OAAO,EAAEF;IAAY,gBACtCvH,KAAA,CAAAiH,aAAA,CAACrG,IAAI;MAAC8G,KAAK,EAAE,CAAC,oBAAoB,CAAE;MAACC,KAAK,EAAErC,KAAK,CAAC,KAAK;IAAY,CAAE,CACpD,CAAC;EAE9B,CAAC,EAAE,CAACiC,WAAW,EAAEhE,oBAAoB,EAAE+B,KAAK,CAAC,CAAC;EAE9C,MAAMsC,WAAW,GAAGvH,OAAO,CACvB,MACI,CAACmC,SAAS,IAAIoB,aAAa,kBACvB5D,KAAA,CAAAiH,aAAA,CAAC5F,0BAA0B,QACtBmB,SAAS,iBAAIxC,KAAA,CAAAiH,aAAA,CAACrG,IAAI;IAAC8G,KAAK,EAAElF;EAAU,CAAE,CAAC,EACvCoB,aAAa,IAAIA,aACM,CAC/B,EACL,CAACpB,SAAS,EAAEoB,aAAa,CAC7B,CAAC;;EAED;AACR;AACA;EACQ,MAAMiE,YAAY,GAAG3H,WAAW,CAC3B4H,KAAoC,IAAK;IACtC,MAAMC,aAAgC,GAAG,EAAE;IAC3C1C,qBAAqB,CAAC+B,OAAO,GAAG,KAAK;IAErCrB,UAAU,CAACL,OAAO,CAAC,CAAC;MAAEO,IAAI;MAAEN;IAAU,CAAC,KAAK;MACxC,MAAMS,OAAO,GAAG3E,oBAAoB,CAAC;QACjCC,YAAY;QACZC,KAAK,EAAEsE,IAAI;QACXrE,YAAY,EAAEkG,KAAK,CAACE,MAAM,CAAC7F,KAAK;QAChCN;MACJ,CAAC,CAAC;MAEF,IAAIuE,OAAO,CAAC/B,MAAM,GAAG,CAAC,EAAE;QACpB0D,aAAa,CAACnC,IAAI,CAAC;UACfD,SAAS;UACTM,IAAI,EAAEG;QACV,CAAC,CAAC;MACN;IACJ,CAAC,CAAC;IAEF,IAAI2B,aAAa,CAAC1D,MAAM,KAAK,CAAC,IAAInB,oBAAoB,EAAE;MACpD6E,aAAa,CAACnC,IAAI,CAAC;QACfD,SAAS,EAAEU,SAAS;QACpBJ,IAAI,EAAE;MACV,CAAC,CAAC;IACN;IAEApC,gBAAgB,CAACwC,SAAS,CAAC;IAE3B,IAAI,CAACjD,6BAA6B,IAAI,CAAC0E,KAAK,CAACE,MAAM,CAAC7F,KAAK,EAAE;MACvDwB,qBAAqB,CAAC,EAAE,CAAC;IAC7B,CAAC,MAAM;MACHA,qBAAqB,CAACoE,aAAa,CAAC;IACxC;IAEA,IAAIA,aAAa,CAAC1D,MAAM,KAAK,CAAC,EAAE;MAC5BoC,UAAU,CAAC,CAAC;IAChB;IAEA3C,QAAQ,CAACgE,KAAK,CAACE,MAAM,CAAC7F,KAAK,CAAC;IAC5BsC,mBAAmB,CAACqD,KAAK,CAACE,MAAM,CAAC7F,KAAK,CAAC;IAEvC,IAAI,OAAOS,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACkF,KAAK,CAAC;IACnB;EACJ,CAAC,EACD,CACI/B,UAAU,EACVrE,YAAY,EACZ+E,UAAU,EACV7D,QAAQ,EACRM,oBAAoB,EACpBE,6BAA6B,EAC7BvB,yBAAyB,CAEjC,CAAC;;EAED;AACR;AACA;EACQ,MAAMoG,UAAU,GAAG/H,WAAW,CACzB4H,KAAmC,IAAK;IACrC3C,WAAW,CAACiC,OAAO,GAAG,KAAK;IAE3B,IAAI,OAAOzE,MAAM,KAAK,UAAU,EAAE;MAC9BA,MAAM,CAACmF,KAAK,CAAC;IACjB;EACJ,CAAC,EACD,CAACnF,MAAM,CACX,CAAC;EAED,MAAMuF,0BAA0B,GAAGhI,WAAW,CAAC,MAAM;IACjDgF,WAAW,CAACkC,OAAO,EAAEe,IAAI,CAAC,CAAC;IAE3B,OAAOhD,WAAW,CAACiC,OAAO,IAAI5B,OAAO;EACzC,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;;EAEb;AACR;AACA;EACQ,MAAM4C,YAAY,GAAGlI,WAAW,CAC3BsG,IAAoB,IAAK;IACtB,MAAM6B,OAAO,GAAG;MACZ,GAAG7B,IAAI;MACPV,IAAI,EAAEU,IAAI,CAACV,IAAI,CAACwC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAACA,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAACA,OAAO,CAAC,KAAK,EAAE,EAAE;IAC5E,CAAC;IAED,IAAI9E,gBAAgB,EAAE;MAClBM,QAAQ,CAAC,EAAE,CAAC;MACZW,mBAAmB,CAAC,EAAE,CAAC;MACvBS,WAAW,CAACkC,OAAO,EAAEmB,UAAU,CAAC,CAAC;IACrC,CAAC,MAAM;MACHzE,QAAQ,CAACuE,OAAO,CAACvC,IAAI,CAAC;IAC1B;IAEAY,WAAW,CAAC,CAAC;IAEb7C,gBAAgB,CACZwE,OAAO,CAACrB,QAAQ,gBACZhH,KAAA,CAAAiH,aAAA,CAAChG,wBAAwB;MACrBiG,GAAG,EAAEmB,OAAO,CAACrB,QAAS;MACtBG,qBAAqB,EAAE7D;IAAqB,CAC/C,CAAC,GACF+C,SACR,CAAC;IAED1C,qBAAqB,CAAC,EAAE,CAAC;IAEzB,IAAI,OAAOb,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACuF,OAAO,CAAC;IACrB;EACJ,CAAC,EACD,CAAC3B,WAAW,EAAE5D,QAAQ,EAAEQ,oBAAoB,EAAEE,gBAAgB,CAClE,CAAC;EAED,MAAMgF,OAAO,GAAGnI,OAAO,CAAC,MAAM;IAC1B,IAAI4C,QAAQ,IAAIS,kBAAkB,CAACW,MAAM,KAAK,CAAC,EAAE;MAC7C,oBACIrE,KAAA,CAAAiH,aAAA,CAAC9F,uBAAuB,QACnB8B,QAAQ,CAACqF,OAAO,CAAC,WAAW,EAAEnG,KAAK,CACf,CAAC;IAElC;IAEA,MAAMR,KAAqB,GAAG,EAAE;IAEhC+B,kBAAkB,CAACgC,OAAO,CAAC,CAAC;MAAEC,SAAS;MAAEM;IAAK,CAAC,EAAEwC,KAAK,KAAK;MACvD,IAAItE,iBAAiB,EAAE;QACnB,IAAI8B,IAAI,CAAC5B,MAAM,IAAI,CAAC,EAAE;UAClB;QACJ;QAEA,IAAIoE,KAAK,KAAK,CAAC,EAAE;UACb9G,KAAK,CAACiE,IAAI,cAAC5F,KAAA,CAAAiH,aAAA,CAACnG,SAAS;YAAC4H,GAAG,EAAE/C,SAAU;YAACgD,IAAI,EAAEhD,SAAS,IAAI;UAAG,CAAE,CAAC,CAAC;QACpE;MACJ;MAEAM,IAAI,CAACP,OAAO,CAAC,CAAC;QAAEG,EAAE;QAAEC,IAAI;QAAEkB;MAAS,CAAC,EAAE4B,SAAS,KAAK;QAChDjH,KAAK,CAACiE,IAAI,cACN5F,KAAA,CAAAiH,aAAA,CAACjG,aAAa;UACV0H,GAAG,EAAE,GAAG7C,EAAE,IAAIF,SAAS,IAAI,EAAE,EAAG;UAChCE,EAAE,EAAEA,EAAG;UACPC,IAAI,EAAEA,IAAK;UACXkB,QAAQ,EAAEA,QAAS;UACnB3D,oBAAoB,EAAEA,oBAAqB;UAC3CC,oBAAoB,EAAEA,oBAAqB;UAC3CR,QAAQ,EAAEsF,YAAa;UACvBzC,SAAS,EAAEA,SAAU;UACrBkD,QAAQ,EAAEJ,KAAK,KAAK,CAAC,IAAIG,SAAS,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC;QAAE,CACrD,CACL,CAAC;MACL,CAAC,CAAC;IACN,CAAC,CAAC;IAEF,IAAI1F,oBAAoB,IAAIsB,gBAAgB,KAAK,EAAE,EAAE;MACjD7C,KAAK,CAACiE,IAAI,cACN5F,KAAA,CAAAiH,aAAA,CAACjG,aAAa;QACV6E,EAAE,EAAC,aAAa;QAChB/C,QAAQ,EAAEsF,YAAa;QACvB/E,oBAAoB,EAAEA,oBAAqB;QAC3CyC,IAAI,EAAE,MAAMtB,gBAAgB,KAAM;QAClCqE,QAAQ,EAAElH,KAAK,CAAC0C,MAAM,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC;MAAE,CACzC,CACL,CAAC;IACL;IAEA,OAAO1C,KAAK;EAChB,CAAC,EAAE,CACCsB,QAAQ,EACRS,kBAAkB,EAClBR,oBAAoB,EACpBsB,gBAAgB,EAChBrC,KAAK,EACLgC,iBAAiB,EACjBd,oBAAoB,EACpBC,oBAAoB,EACpB8E,YAAY,CACf,CAAC;EAEFjI,SAAS,CAAC,MAAM;IACZ,MAAM2I,aAAa,GAAIC,CAAgB,IAAK;MACxC,IAAI,CAACnE,cAAc,IAAIlB,kBAAkB,CAACW,MAAM,KAAK,CAAC,EAAE;QACpD;MACJ;MAEA,MAAM2E,QAAQ,GAAGhE,UAAU,CAACoC,OAAO,EAAE4B,QAAQ;MAE7C,IAAI,CAACA,QAAQ,EAAE;QACX;MACJ;MAEA,MAAMC,aAAa,GAAGC,KAAK,CAACC,IAAI,CAACH,QAAQ,CAAC;MAE1C,MAAMI,WAAW,GAAGH,aAAa,CAAClC,IAAI,CAAEsC,KAAK,IACzCA,KAAK,CAACxD,EAAE,CAACyD,UAAU,CAAC,oBAAoB,CAC5C,CAAC,EAAEN,QAAQ;MAEX,IAAI,EAAEI,WAAW,IAAIA,WAAW,CAAC/E,MAAM,GAAG,CAAC,CAAC,EAAE;QAC1C;MACJ;MAEA,MAAMkF,gBAAgB,GAAGL,KAAK,CAACC,IAAI,CAACC,WAAW,CAAC,CAACrH,MAAM,CAClDsH,KAAK,IAAMA,KAAK,CAAiBG,OAAO,CAACC,WAAW,KAAK,MAC9D,CAAC;MAEDlF,wBAAwB,CAACgF,gBAAgB,CAAC;MAE1C,IAAIR,CAAC,CAACL,GAAG,KAAK,SAAS,IAAIK,CAAC,CAACL,GAAG,KAAK,WAAW,EAAE;QAC9CK,CAAC,CAACW,cAAc,CAAC,CAAC;QAElB,IAAIN,WAAW,IAAIA,WAAW,CAAC/E,MAAM,GAAG,CAAC,EAAE;UACvC,MAAMsF,QAAQ,GACV1F,YAAY,KAAK,IAAI,GACf,CAACA,YAAY,IACR8E,CAAC,CAACL,GAAG,KAAK,SAAS,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAC9Ba,gBAAgB,CAAClF,MAAM,IAC3BkF,gBAAgB,CAAClF,MAAM,GACvB,CAAC;UAEX,IAAIJ,YAAY,KAAK,IAAI,EAAE;YACvB,MAAM2F,WAAW,GAAGL,gBAAgB,CAACtF,YAAY,CAAmB;YACpE2F,WAAW,CAACf,QAAQ,GAAG,CAAC,CAAC;UAC7B;UAEA3E,eAAe,CAACyF,QAAQ,CAAC;UAEzB,MAAME,UAAU,GAAGN,gBAAgB,CAACI,QAAQ,CAAmB;UAE/DE,UAAU,CAAChB,QAAQ,GAAG,CAAC;QAC3B;MACJ,CAAC,MAAM,IAAIE,CAAC,CAACL,GAAG,KAAK,OAAO,EAAE;QAC1BK,CAAC,CAACW,cAAc,CAAC,CAAC;QAClBX,CAAC,CAACe,eAAe,CAAC,CAAC;QAEnB,IAAIP,gBAAgB,EAAE;UAClB,MAAMQ,OAAO,GAAGR,gBAAgB,CAACtF,YAAY,IAAI,CAAC,CAAC;UAEnD,IAAI,CAAC8F,OAAO,EAAE;YACV;UACJ;UAEA,MAAM;YAAElE,EAAE;YAAEmE;UAAY,CAAC,GAAGD,OAAO;UAEnC,IAAI/C,QAA4B;;UAEhC;UACA;UACA;UACA,IAAI+C,OAAO,CAACf,QAAQ,CAAC,CAAC,CAAC,EAAEiB,UAAU,CAAC/C,GAAG,EAAE;YACrC;YACA;YACA;YACAF,QAAQ,GAAG+C,OAAO,CAACf,QAAQ,CAAC,CAAC,CAAC,EAAEiB,UAAU,CAAC/C,GAAG,CAACgD,SAAmB;UACtE;UAEA,MAAMC,KAAK,GAAGtE,EAAE,CAACyC,OAAO,CAAC,mBAAmB,EAAE,EAAE,CAAC;UAEjDF,YAAY,CAAC;YACTvC,EAAE,EAAEsE,KAAK,KAAK,aAAa,GAAGH,WAAW,GAAGG,KAAK;YACjDrE,IAAI,EAAEkE,WAAW,IAAI,EAAE;YACvBhD;UACJ,CAAC,CAAC;QACN;MACJ;IACJ,CAAC;IAEDoD,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEvB,aAAa,CAAC;IAEnD,OAAO,MAAM;MACTsB,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAExB,aAAa,CAAC;IAC1D,CAAC;EACL,CAAC,EAAE,CACCxE,qBAAqB,EACrBL,YAAY,EACZmE,YAAY,EACZ1E,kBAAkB,CAACW,MAAM,EACzBO,cAAc,CACjB,CAAC;EAEF,MAAM2F,cAAc,GAAGrK,WAAW,CAAE4H,KAAoB,IAAK;IACzD,IAAIA,KAAK,CAAC0C,OAAO,KAAK,EAAE,EAAE;MACtB7G,qBAAqB,CAAC,EAAE,CAAC;IAC7B;EACJ,CAAC,EAAE,EAAE,CAAC;EAENvD,mBAAmB,CACfqD,GAAG,EACH,OAAO;IACHgH,KAAK,EAAEA,CAAA,KAAM3G,QAAQ,CAAC,EAAE;EAC5B,CAAC,CAAC,EACF,EACJ,CAAC;EAED3D,SAAS,CAAC,MAAM;IACZiK,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEE,cAAc,CAAC;IAEpD,OAAO,MAAM;MACTH,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEE,cAAc,CAAC;IACxD,CAAC;EACL,CAAC,EAAE,CAACA,cAAc,CAAC,CAAC;;EAEpB;AACR;AACA;EACQpK,SAAS,CAAC,MAAM;IACZ,IAAI6C,WAAW,EAAE;MACbc,QAAQ,CAACd,WAAW,CAAC;IACzB;EACJ,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAEjB,MAAM0H,kBAAkB,GACpB9F,cAAc,KACblB,kBAAkB,CAACW,MAAM,KAAK,CAAC,IAAI,CAAC,CAACpB,QAAQ,CAAC,KAC9Cd,KAAK,CAACwI,IAAI,CAAC,CAAC,KAAK,EAAE,IAAIvH,6BAA6B,CAAC;EAE1D,OAAO/C,OAAO,CACV,mBACIL,KAAA,CAAAiH,aAAA,CAAC/F,eAAe;IAACuC,GAAG,EAAEsB,MAAO;IAAC2D,GAAG,EAAE,cAAc5D,IAAI;EAAG,gBACpD9E,KAAA,CAAAiH,aAAA;IAAKpB,EAAE,EAAE,mBAAmBf,IAAI;EAAG,GAC9BtB,gBAAgB,gBACbxD,KAAA,CAAAiH,aAAA,CAACzF,QAAQ;IACLoG,WAAW,EAAEA,WAAY;IACzBgD,KAAK,EAAEpH,gBAAgB,CAACoH,KAAM;IAC9BjI,MAAM,EAAEsF,UAAW;IACnBrF,QAAQ,EAAEiF,YAAa;IACvBgD,OAAO,EAAExD,WAAY;IACrByD,QAAQ,EAAEtH,gBAAgB,CAACsH,QAAS;IACpC/H,WAAW,EAAEA,WAAY;IACzBU,GAAG,EAAEyB,WAAY;IACjB6F,mBAAmB,EAAEvH,gBAAgB,CAACuH,mBAAoB;IAC1DC,kBAAkB;IAClBC,IAAI,EAAEzH,gBAAgB,CAACyH;EAAK,CAC/B,CAAC,gBAEFjL,KAAA,CAAAiH,aAAA,CAACpG,KAAK;IACF0B,SAAS,EAAEA,SAAU;IACrBqF,WAAW,EAAEA,WAAY;IACzBjF,MAAM,EAAEsF,UAAW;IACnBrF,QAAQ,EAAEiF,YAAa;IACvBgD,OAAO,EAAExD,WAAY;IACrBxE,SAAS,EAAEA,SAAU;IACrBE,WAAW,EAAEA,WAAY;IACzBU,GAAG,EAAEwB,QAAS;IACduC,YAAY,EAAEA,YAAa;IAC3BrF,KAAK,EAAEA;EAAM,CAChB,CAEJ,CAAC,EACL4C,MAAM,CAACqC,OAAO,iBACXpH,KAAA,CAAAiH,aAAA,CAAC1F,mBAAmB;IAChB2J,aAAa,EAAEnG,MAAM,CAACqC,OAAQ;IAC9B/E,SAAS,EAAEA,SAAU;IACrB8I,SAAS,EAAE7I,iBAAkB;IAC7B8I,OAAO,EAAE1E,WAAY;IACrB2E,cAAc,EAAEnD,0BAA2B;IAC3CwC,kBAAkB,EAAEA;EAAmB,gBAEvC1K,KAAA,CAAAiH,aAAA,CAAClG,aAAa;IACV0E,aAAa,EAAEA,aAAc;IAC7B1B,MAAM,EAAEA,MAAO;IACfrB,SAAS,EAAEA,SAAU;IACrB4I,UAAU,EAAEZ,kBAAmB;IAC/BhC,GAAG,EAAE,mBAAmB5D,IAAI,EAAG;IAC/ByG,aAAa,EAAE5E,8BAA+B;IAC9ClD,GAAG,EAAEuB,UAAW;IAChBwG,cAAc,EAAE9G,MAAO;IACvBvB,uBAAuB,EAAEA;EAAwB,GAEhDqF,OACU,CACE,CAEZ,CACpB,EACD,CACInG,SAAS,EACTmG,OAAO,EACPlG,iBAAiB,EACjBmD,aAAa,EACbf,MAAM,EACNuD,UAAU,EACVJ,YAAY,EACZnB,WAAW,EACXwB,0BAA0B,EAC1Bb,WAAW,EACXtD,MAAM,EACNxB,SAAS,EACTqF,WAAW,EACXlF,SAAS,EACTG,SAAS,EACTE,WAAW,EACXyE,YAAY,EACZrE,uBAAuB,EACvBuH,kBAAkB,EAClBlH,gBAAgB,EAChBsB,IAAI,EACJ3C,KAAK,CAEb,CAAC;AACL,CACJ,CAAC;AAEDC,SAAS,CAACqJ,WAAW,GAAG,WAAW;AAEnC,eAAerJ,SAAS","ignoreList":[]}
1	+ {"version":3,"file":"SearchBox.js","names":["useDevice","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","useTheme","calculateContentHeight","searchList","sortSearchBoxItems","Icon","Input","GroupName","SearchBoxBody","SearchBoxItem","StyledSearchBoxItemImage","StyledSearchBox","StyledSearchBoxHintText","StyledSearchBoxIcon","StyledSearchBoxLeftWrapper","useUuid","DropdownBodyWrapper","TagInput","filterSearchBoxItems","customFilter","items","searchString","shouldUseCustomFilterOnly","filteredItems","filter","getDropdownSearchString","selectedId","shouldKeepSelectedItemPosition","value","SearchBox","container","dropdownDirection","isInvalid","leftIcons","lists","maxHeight","onBlur","onChange","onKeyDown","onSelect","placeholder","presetValue","hintText","shouldAddInputToList","shouldHideFilterButtons","shouldShowContentOnEmptyInput","shouldShowSmallItems","shouldShowRoundImage","shouldShowToggleIcon","tagInputSettings","shouldEnableKeyboardHighlighting","ref","matchingListsItems","setMatchingListsItems","selectedImage","setSelectedImage","setValue","height","setHeight","focusedIndex","setFocusedIndex","hasMultipleGroups","setHasMultipleGroups","length","filteredChildrenArray","setFilteredChildrenArray","inputToListValue","setInputToListValue","groups","setGroups","shouldShowBody","setShouldShowBody","uuid","boxRef","contentRef","inputRef","tagInputRef","hasFocusRef","isAnimatingRef","shouldShowPresetValue","theme","dropdownSearchString","isTouch","filterButtons","forEach","groupName","push","id","text","activeList","newLists","list","includes","newMatchingItems","newList","undefined","filteredMatchingListItems","map","item","handleOpen","handleClose","handleFilterButtonsGroupSelect","keys","textArray","selectedItem","find","imageUrl","createElement","src","$shouldShowRoundImage","current","handleFocus","toLowerCase","handleClick","rightElement","onClick","icons","color","leftElement","handleChange","event","filteredLists","target","handleBlur","handleDropdownOutsideClick","blur","handleContainerBlur","nextFocusedElement","relatedTarget","currentContainer","currentTarget","contains","handleSelect","newItem","replace","resetValue","content","index","key","name","listIndex","tabIndex","handleKeyDown","e","children","childrenArray","Array","from","newChildren","child","startsWith","filteredChildren","dataset","isgroupname","preventDefault","newIndex","prevElement","newElement","stopPropagation","element","textContent","attributes","nodeValue","newId","document","addEventListener","removeEventListener","handleKeyPress","keyCode","clear","shouldShowDropdown","trim","onAdd","onFocus","onRemove","shouldAllowMultiple","shouldPreventEnter","tags","anchorElement","direction","onClose","onOutsideClick","shouldShow","onGroupSelect","selectedGroups","displayName"],"sources":["../../../../src/components/search-box/SearchBox.tsx"],"sourcesContent":["import { useDevice } from 'chayns-api';\nimport React, {\n ChangeEvent,\n ChangeEventHandler,\n FC,\n FocusEvent,\n FocusEventHandler,\n forwardRef,\n KeyboardEventHandler,\n ReactElement,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport type { IFilterButtonItem } from '../../types/filterButtons';\nimport type { ISearchBoxItem, ISearchBoxItems } from '../../types/searchBox';\nimport { calculateContentHeight } from '../../utils/calculate';\nimport { searchList, sortSearchBoxItems } from '../../utils/searchBox';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport Input from '../input/Input';\nimport GroupName from './group-name/GroupName';\nimport SearchBoxBody from './search-box-body/SearchBoxBody';\nimport SearchBoxItem from './search-box-item/SearchBoxItem';\nimport { StyledSearchBoxItemImage } from './search-box-item/SearchBoxItem.styles';\nimport {\n StyledSearchBox,\n StyledSearchBoxHintText,\n StyledSearchBoxIcon,\n StyledSearchBoxLeftWrapper,\n} from './SearchBox.styles';\nimport { useUuid } from '../../hooks/uuid';\nimport DropdownBodyWrapper from '../dropdown-body-wrapper/DropdownBodyWrapper';\nimport TagInput, { TagInputProps, TagInputRef } from '../tag-input/TagInput';\nimport type { DropdownDirection } from '../../types/dropdown';\n\nexport interface SearchBoxRef {\n clear: VoidFunction;\n}\n\nexport interface TagInputSettings {\n onAdd?: TagInputProps['onAdd'];\n onRemove?: TagInputProps['onRemove'];\n shouldAllowMultiple?: TagInputProps['shouldAllowMultiple'];\n tags?: TagInputProps['tags'];\n}\n\nconst filterSearchBoxItems = ({\n customFilter,\n items,\n searchString,\n shouldUseCustomFilterOnly,\n}: {\n customFilter?: (item: ISearchBoxItem) => boolean;\n items: ISearchBoxItem[];\n searchString: string;\n shouldUseCustomFilterOnly?: boolean;\n}) => {\n if (typeof customFilter !== 'function') {\n return searchList({ items, searchString });\n }\n\n if (shouldUseCustomFilterOnly) {\n const filteredItems = items.filter(customFilter);\n\n return sortSearchBoxItems({ items: filteredItems, searchString });\n }\n\n return searchList({ items, searchString }).filter(customFilter);\n};\n\nconst getDropdownSearchString = ({\n selectedId,\n shouldKeepSelectedItemPosition,\n value,\n}: {\n selectedId?: string;\n shouldKeepSelectedItemPosition?: boolean;\n value: string;\n}) => (shouldKeepSelectedItemPosition && selectedId ? '' : value);\n\nexport type SearchBoxProps = {\n /*\n The element where the content of the `ComboBox` should be rendered via React Portal.\n /\n container?: Element;\n /\n An optional callback function to filter the elements to be displayed\n /\n customFilter?: (item: ISearchBoxItem) => boolean;\n /\n If true, the custom filter replaces the built-in text search instead of narrowing its results.\n /\n shouldUseCustomFilterOnly?: boolean;\n /\n The direction in which the dropdown should be displayed. By default, it is displayed below the input.\n /\n dropdownDirection?: DropdownDirection;\n /\n If true, the input field is marked as invalid\n /\n isInvalid?: boolean;\n /\n An optional icon that is displayed inside the left side of the input.\n /\n leftIcons?: string[];\n /\n List of groups with items that can be searched. It is possible to give only one list; if multiple lists are provided, the 'group name' parameter becomes mandatory.\n /\n lists: ISearchBoxItems[];\n /\n The maximum height of the dropdown body in pixels.\n /\n maxHeight?: number;\n /\n Function to be executed when the input lost focus.\n /\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /\n Function to be executed when the input is changed.\n /\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Function that is executed when a letter is pressed\n /\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /\n Function to be executed when an item is selected.\n /\n onSelect?: (item: ISearchBoxItem) => void;\n /\n The placeholder that should be displayed.\n /\n placeholder?: string;\n /\n Set an input for the search box - it is not an item of a list, just a string.\n /\n presetValue?: string;\n /\n Control the selected item. If you use this prop, make sure to update it when the user selects an item.\n /\n selectedId?: string;\n /\n If true, the selected item keeps its original position in the dropdown list.\n /\n shouldKeepSelectedItemPosition?: boolean;\n /\n If true, the value in the Input is displayed in the list.\n /\n shouldAddInputToList: boolean;\n /\n If true, the filter buttons are hidden.\n /\n shouldHideFilterButtons?: boolean;\n /\n Whether the full list of items should be displayed if the input is empty.\n /\n shouldShowContentOnEmptyInput?: boolean;\n /\n If true, the dropdown items are displayed more compactly.\n /\n shouldShowSmallItems?: boolean;\n /\n If true, the images of the items are displayed in a round shape.\n /\n shouldShowRoundImage?: boolean;\n /\n Whether the icon to open and close the list should be displayed.\n /\n shouldShowToggleIcon?: boolean;\n /\n Settings for the TagInput.\n /\n tagInputSettings?: TagInputSettings;\n /\n Enables keyboard-only focus highlighting.\n /\n shouldEnableKeyboardHighlighting?: boolean;\n /\n A text that should be displayed if no results are found.\n /\n hintText?: string;\n};\n\nconst SearchBox: FC<SearchBoxProps> = forwardRef<SearchBoxRef, SearchBoxProps>(\n (\n {\n container,\n customFilter,\n dropdownDirection,\n isInvalid = false,\n leftIcons,\n lists,\n maxHeight = 300,\n onBlur,\n onChange,\n onKeyDown,\n onSelect,\n placeholder,\n presetValue,\n hintText,\n selectedId,\n shouldAddInputToList = true,\n shouldKeepSelectedItemPosition = false,\n shouldUseCustomFilterOnly = false,\n shouldHideFilterButtons = false,\n shouldShowContentOnEmptyInput = true,\n shouldShowSmallItems = false,\n shouldShowRoundImage,\n shouldShowToggleIcon = false,\n tagInputSettings,\n shouldEnableKeyboardHighlighting,\n },\n ref,\n ) => {\n const [matchingListsItems, setMatchingListsItems] = useState<ISearchBoxItems[]>(lists);\n const [selectedImage, setSelectedImage] = useState<ReactElement>();\n const [value, setValue] = useState(\n typeof presetValue === 'string' && presetValue !== '' ? presetValue : '',\n );\n const [height, setHeight] = useState<number>(0);\n const [focusedIndex, setFocusedIndex] = useState<number \| null>(null);\n const [hasMultipleGroups, setHasMultipleGroups] = useState<boolean>(lists.length > 1);\n const [filteredChildrenArray, setFilteredChildrenArray] = useState<Element[]>();\n const [inputToListValue, setInputToListValue] = useState<string>('');\n const [groups, setGroups] = useState<string[]>(['all']);\n const [shouldShowBody, setShouldShowBody] = useState(false);\n\n const uuid = useUuid();\n\n const boxRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement \| null>(null);\n const tagInputRef = useRef<TagInputRef>(null);\n\n const hasFocusRef = useRef<boolean>(false);\n const isAnimatingRef = useRef<boolean>(false);\n const shouldShowPresetValue = useRef<boolean>(\n typeof presetValue === 'string' && presetValue !== '',\n );\n\n const theme = useTheme() as Theme;\n const dropdownSearchString = getDropdownSearchString({\n selectedId,\n shouldKeepSelectedItemPosition,\n value,\n });\n\n const { isTouch } = useDevice();\n\n /\n Checks if there are multiple groups in the lists\n /\n useEffect(() => {\n setHasMultipleGroups(lists.length > 1);\n }, [lists]);\n\n const filterButtons = useMemo(() => {\n const items: IFilterButtonItem[] = [];\n\n if (lists.length <= 1) {\n return items;\n }\n\n lists.forEach(({ groupName }) => {\n if (groupName) {\n items.push({\n id: groupName,\n text: groupName,\n });\n }\n });\n\n return items;\n }, [lists]);\n\n /\n Filters the lists by the FilterButtons\n /\n const activeList = useMemo(() => {\n let newLists: ISearchBoxItems[] = [];\n\n if (groups[0] === 'all') {\n newLists = lists;\n } else {\n lists.forEach((list) => {\n if (list.groupName && groups.includes(list.groupName)) {\n newLists.push(list);\n }\n });\n }\n\n const newMatchingItems: ISearchBoxItems[] = [];\n\n newLists.forEach(({ list, groupName }) => {\n const newList = filterSearchBoxItems({\n customFilter,\n items: list,\n searchString: dropdownSearchString,\n shouldUseCustomFilterOnly,\n });\n\n if (newList.length > 0) {\n newMatchingItems.push({\n groupName,\n list: newList,\n });\n }\n });\n\n if (newMatchingItems.length === 0 && shouldAddInputToList) {\n newMatchingItems.push({\n groupName: undefined,\n list: [],\n });\n }\n\n const filteredMatchingListItems = newMatchingItems.map(({ list, groupName }) => ({\n groupName,\n list: list.filter((item) => {\n if (typeof customFilter === 'function' && shouldUseCustomFilterOnly) {\n return true;\n }\n\n return !(newMatchingItems.length === 1 && item.text === dropdownSearchString);\n }),\n }));\n\n setMatchingListsItems(filteredMatchingListItems);\n\n return newLists;\n }, [\n groups,\n lists,\n customFilter,\n dropdownSearchString,\n shouldAddInputToList,\n shouldUseCustomFilterOnly,\n ]);\n\n const handleOpen = useCallback(() => {\n setShouldShowBody(true);\n }, []);\n\n const handleClose = useCallback(() => {\n setShouldShowBody(false);\n }, []);\n\n const handleFilterButtonsGroupSelect = (keys: string[]) => {\n setGroups(keys.length === 0 ? ['all'] : keys);\n };\n\n /\n This hook calculates the height\n /\n useEffect(() => {\n const textArray: string[] = [];\n\n activeList.forEach(({ list, groupName }) => {\n list.forEach(({ text }) => textArray.push(text));\n if (!groupName) {\n return;\n }\n textArray.push(groupName);\n });\n\n if (shouldAddInputToList && inputToListValue !== '') {\n textArray.push(inputToListValue);\n }\n\n setHeight(calculateContentHeight(textArray));\n }, [inputToListValue, activeList, placeholder, shouldAddInputToList]);\n\n useEffect(() => {\n if (selectedId) {\n activeList.forEach(({ list }) => {\n const selectedItem = list.find(({ id }) => id === selectedId);\n if (selectedItem) {\n setValue(selectedItem.text);\n\n if (selectedItem.imageUrl) {\n setSelectedImage(\n <StyledSearchBoxItemImage\n src={selectedItem.imageUrl}\n $shouldShowRoundImage={shouldShowRoundImage}\n />,\n );\n }\n }\n });\n }\n }, [activeList, selectedId, shouldShowRoundImage]);\n\n /\n This hook resets the value if the selectedId changes to undefined. This is an own useEffect because the value\n * should not be reset if the list changes and the selectedId is still undefined.\n /\n useEffect(() => {\n if (!selectedId && !shouldShowPresetValue.current) {\n setValue('');\n }\n }, [selectedId]);\n\n useEffect(() => {\n isAnimatingRef.current = shouldShowBody;\n }, [shouldShowBody]);\n\n useEffect(() => {\n if (\n (matchingListsItems.length !== 0 \|\| hintText) &&\n !isAnimatingRef.current &&\n hasFocusRef.current\n ) {\n handleOpen();\n }\n }, [handleOpen, hintText, matchingListsItems.length]);\n\n /\n This function handles the focus event of the input and opens the dropdown if the input\n * should show content on an empty input\n /\n const handleFocus = useCallback(() => {\n hasFocusRef.current = true;\n\n if (shouldShowContentOnEmptyInput) {\n const newMatchingItems: ISearchBoxItems[] = [];\n\n activeList.forEach(({ list, groupName }) => {\n const newList = filterSearchBoxItems({\n customFilter,\n items: list,\n searchString: dropdownSearchString,\n shouldUseCustomFilterOnly,\n });\n\n if (newList.length > 0) {\n newMatchingItems.push({\n groupName,\n list: newList,\n });\n }\n });\n\n if (newMatchingItems.length === 0 && shouldAddInputToList) {\n newMatchingItems.push({\n groupName: undefined,\n list: [],\n });\n }\n\n const filteredMatchingListItems = newMatchingItems.map(({ list, groupName }) => ({\n groupName,\n list: list.filter((item) => {\n if (typeof customFilter === 'function' && shouldUseCustomFilterOnly) {\n return true;\n }\n\n return !(\n newMatchingItems.length === 1 && item.text === dropdownSearchString\n );\n }),\n }));\n\n setMatchingListsItems(filteredMatchingListItems);\n\n if (filteredMatchingListItems.length !== 0 \|\| hintText) {\n handleOpen();\n }\n }\n }, [\n shouldShowContentOnEmptyInput,\n activeList,\n shouldAddInputToList,\n hintText,\n dropdownSearchString,\n customFilter,\n shouldUseCustomFilterOnly,\n handleOpen,\n ]);\n\n /\n This function filters the lists by input\n /\n\n useEffect(() => {\n const newMatchingItems: ISearchBoxItems[] = [];\n\n activeList.forEach(({ list, groupName }) => {\n const newList = filterSearchBoxItems({\n customFilter,\n items: list,\n searchString: dropdownSearchString,\n shouldUseCustomFilterOnly,\n });\n\n if (newList.length > 0) {\n newMatchingItems.push({\n groupName,\n list: newList,\n });\n }\n });\n\n if (newMatchingItems.length === 0 && shouldAddInputToList) {\n newMatchingItems.push({\n groupName: undefined,\n list: [],\n });\n }\n\n if (shouldAddInputToList && inputToListValue !== '') {\n newMatchingItems.forEach(({ list }) => {\n list.forEach(({ text }) => {\n if (text.toLowerCase() === inputToListValue.toLowerCase()) {\n setInputToListValue('');\n }\n });\n });\n }\n }, [\n inputToListValue,\n activeList,\n shouldAddInputToList,\n shouldShowContentOnEmptyInput,\n dropdownSearchString,\n customFilter,\n shouldUseCustomFilterOnly,\n ]);\n\n const handleClick = useCallback(() => {\n if (shouldShowBody) {\n handleClose();\n } else {\n handleOpen();\n }\n }, [handleClose, handleOpen, shouldShowBody]);\n\n const rightElement = useMemo(() => {\n if (!shouldShowToggleIcon) {\n return undefined;\n }\n\n return (\n <StyledSearchBoxIcon onClick={handleClick}>\n <Icon icons={['fa fa-chevron-down']} color={theme['006'] as string} />\n </StyledSearchBoxIcon>\n );\n }, [handleClick, shouldShowToggleIcon, theme]);\n\n const leftElement = useMemo(\n () =>\n (leftIcons \|\| selectedImage) && (\n <StyledSearchBoxLeftWrapper>\n {leftIcons && <Icon icons={leftIcons} />}\n {selectedImage && selectedImage}\n </StyledSearchBoxLeftWrapper>\n ),\n [leftIcons, selectedImage],\n );\n\n /\n This function handles changes of the input\n /\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const filteredLists: ISearchBoxItems[] = [];\n shouldShowPresetValue.current = false;\n\n activeList.forEach(({ list, groupName }) => {\n const newList = filterSearchBoxItems({\n customFilter,\n items: list,\n searchString: event.target.value,\n shouldUseCustomFilterOnly,\n });\n\n if (newList.length > 0) {\n filteredLists.push({\n groupName,\n list: newList,\n });\n }\n });\n\n if (filteredLists.length === 0 && shouldAddInputToList) {\n filteredLists.push({\n groupName: undefined,\n list: [],\n });\n }\n\n setSelectedImage(undefined);\n\n if (!shouldShowContentOnEmptyInput && !event.target.value) {\n setMatchingListsItems([]);\n } else {\n setMatchingListsItems(filteredLists);\n }\n\n if (filteredLists.length !== 0) {\n handleOpen();\n }\n\n setValue(event.target.value);\n setInputToListValue(event.target.value);\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [\n activeList,\n customFilter,\n handleOpen,\n onChange,\n shouldAddInputToList,\n shouldShowContentOnEmptyInput,\n shouldUseCustomFilterOnly,\n ],\n );\n\n /\n This function handles the blur event of the input\n /\n const handleBlur = useCallback(\n (event: FocusEvent<HTMLInputElement>) => {\n hasFocusRef.current = false;\n\n if (typeof onBlur === 'function') {\n onBlur(event);\n }\n },\n [onBlur],\n );\n\n const handleDropdownOutsideClick = useCallback(() => {\n tagInputRef.current?.blur();\n\n return hasFocusRef.current && isTouch;\n }, [isTouch]);\n\n const handleContainerBlur = useCallback(\n (event: React.FocusEvent<HTMLDivElement>) => {\n const nextFocusedElement = event.relatedTarget as Node \| null;\n const currentContainer = event.currentTarget as HTMLElement;\n\n // Check if focus is moving outside the SearchBox container\n // Also check the dropdown content (contentRef) since it's rendered in a portal\n if (\n !nextFocusedElement \|\|\n (!currentContainer.contains(nextFocusedElement) &&\n !contentRef.current?.contains(nextFocusedElement))\n ) {\n handleClose();\n }\n },\n [handleClose],\n );\n\n /\n This function handles the item selection\n /\n const handleSelect = useCallback(\n (item: ISearchBoxItem) => {\n const newItem = {\n ...item,\n text: item.text.replace('<b>', '').replace('</b>', '').replace('</b', ''),\n };\n\n if (tagInputSettings) {\n setValue('');\n setInputToListValue('');\n tagInputRef.current?.resetValue();\n } else {\n setValue(newItem.text);\n }\n\n handleClose();\n\n setSelectedImage(\n newItem.imageUrl ? (\n <StyledSearchBoxItemImage\n src={newItem.imageUrl}\n $shouldShowRoundImage={shouldShowRoundImage}\n />\n ) : undefined,\n );\n\n setMatchingListsItems([]);\n\n if (typeof onSelect === 'function') {\n onSelect(newItem);\n }\n },\n [handleClose, onSelect, shouldShowRoundImage, tagInputSettings],\n );\n\n const content = useMemo(() => {\n if (hintText && matchingListsItems.length === 0) {\n return (\n <StyledSearchBoxHintText>\n {hintText.replace('##value##', value)}\n </StyledSearchBoxHintText>\n );\n }\n\n const items: ReactElement[] = [];\n\n matchingListsItems.forEach(({ groupName, list }, index) => {\n if (hasMultipleGroups) {\n if (list.length <= 0) {\n return;\n }\n\n if (index !== 0) {\n items.push(<GroupName key={groupName} name={groupName ?? ''} />);\n }\n }\n\n list.forEach(({ id, text, imageUrl }, listIndex) => {\n items.push(\n <SearchBoxItem\n key={`${id}_${groupName ?? ''}`}\n id={id}\n text={text}\n imageUrl={imageUrl}\n shouldShowSmallItems={shouldShowSmallItems}\n shouldShowRoundImage={shouldShowRoundImage}\n onSelect={handleSelect}\n groupName={groupName}\n tabIndex={index === 0 && listIndex === 0 ? 0 : -1}\n />,\n );\n });\n });\n\n if (shouldAddInputToList && inputToListValue !== '') {\n items.push(\n <SearchBoxItem\n id=\"input-value\"\n onSelect={handleSelect}\n shouldShowSmallItems={shouldShowSmallItems}\n text={`<b>${inputToListValue}</b`}\n tabIndex={items.length === 0 ? 0 : -1}\n />,\n );\n }\n\n return items;\n }, [\n hintText,\n matchingListsItems,\n shouldAddInputToList,\n inputToListValue,\n value,\n hasMultipleGroups,\n shouldShowSmallItems,\n shouldShowRoundImage,\n handleSelect,\n ]);\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (!shouldShowBody \|\| matchingListsItems.length === 0) {\n return;\n }\n\n const children = contentRef.current?.children;\n\n if (!children) {\n return;\n }\n\n const childrenArray = Array.from(children);\n\n const newChildren = childrenArray.find((child) =>\n child.id.startsWith('searchBoxContent__'),\n )?.children;\n\n if (!(newChildren && newChildren.length > 0)) {\n return;\n }\n\n const filteredChildren = Array.from(newChildren).filter(\n (child) => (child as HTMLElement).dataset.isgroupname !== 'true',\n );\n\n setFilteredChildrenArray(filteredChildren);\n\n if (e.key === 'ArrowUp' \|\| e.key === 'ArrowDown') {\n e.preventDefault();\n\n if (newChildren && newChildren.length > 0) {\n const newIndex =\n focusedIndex !== null\n ? (focusedIndex +\n (e.key === 'ArrowUp' ? -1 : 1) +\n filteredChildren.length) %\n filteredChildren.length\n : 0;\n\n if (focusedIndex !== null) {\n const prevElement = filteredChildren[focusedIndex] as HTMLDivElement;\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const newElement = filteredChildren[newIndex] as HTMLDivElement;\n\n newElement.tabIndex = 0;\n }\n } else if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n e.stopPropagation();\n\n if (filteredChildren) {\n const element = filteredChildren[focusedIndex ?? 0];\n\n if (!element) {\n return;\n }\n\n const { id, textContent } = element;\n\n let imageUrl: string \| undefined;\n\n // Just Ignore, it works\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n if (element.children[0]?.attributes.src) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n imageUrl = element.children[0]?.attributes.src.nodeValue as string;\n }\n\n const newId = id.replace('search-box-item__', '');\n\n handleSelect({\n id: newId === 'input-value' ? textContent : newId,\n text: textContent ?? '',\n imageUrl,\n });\n }\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [\n filteredChildrenArray,\n focusedIndex,\n handleSelect,\n matchingListsItems.length,\n shouldShowBody,\n ]);\n\n const handleKeyPress = useCallback((event: KeyboardEvent) => {\n if (event.keyCode === 27) {\n setMatchingListsItems([]);\n }\n }, []);\n\n useImperativeHandle(\n ref,\n () => ({\n clear: () => setValue(''),\n }),\n [],\n );\n\n useEffect(() => {\n document.addEventListener('keydown', handleKeyPress);\n\n return () => {\n document.addEventListener('keydown', handleKeyPress);\n };\n }, [handleKeyPress]);\n\n /\n Update the value if preset value changes\n */\n useEffect(() => {\n if (presetValue) {\n setValue(presetValue);\n }\n }, [presetValue]);\n\n const shouldShowDropdown =\n shouldShowBody &&\n (matchingListsItems.length !== 0 \|\| !!hintText) &&\n (value.trim() !== '' \|\| shouldShowContentOnEmptyInput);\n\n return useMemo(\n () => (\n <StyledSearchBox\n ref={boxRef}\n key={`search-box-${uuid}`}\n onBlur={handleContainerBlur}\n >\n <div id={`search_box_input${uuid}`}>\n {tagInputSettings ? (\n <TagInput\n leftElement={leftElement}\n onAdd={tagInputSettings.onAdd}\n onBlur={handleBlur}\n onChange={handleChange}\n onFocus={handleFocus}\n onRemove={tagInputSettings.onRemove}\n placeholder={placeholder}\n ref={tagInputRef}\n shouldAllowMultiple={tagInputSettings.shouldAllowMultiple}\n shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n shouldPreventEnter\n tags={tagInputSettings.tags}\n />\n ) : (\n <Input\n isInvalid={isInvalid}\n leftElement={leftElement}\n onBlur={handleBlur}\n onChange={handleChange}\n onFocus={handleFocus}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n ref={inputRef}\n rightElement={rightElement}\n shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n value={value}\n />\n )}\n </div>\n {boxRef.current && (\n <DropdownBodyWrapper\n anchorElement={boxRef.current}\n container={container}\n direction={dropdownDirection}\n onClose={handleClose}\n onOutsideClick={handleDropdownOutsideClick}\n shouldShowDropdown={shouldShowDropdown}\n >\n <SearchBoxBody\n filterButtons={filterButtons}\n height={height}\n maxHeight={maxHeight}\n shouldShow={shouldShowDropdown}\n key={`search-box-body-${uuid}`}\n onGroupSelect={handleFilterButtonsGroupSelect}\n ref={contentRef}\n selectedGroups={groups}\n shouldHideFilterButtons={shouldHideFilterButtons}\n >\n {content}\n </SearchBoxBody>\n </DropdownBodyWrapper>\n )}\n </StyledSearchBox>\n ),\n [\n container,\n content,\n dropdownDirection,\n filterButtons,\n groups,\n handleBlur,\n handleChange,\n handleClose,\n handleDropdownOutsideClick,\n handleFocus,\n height,\n isInvalid,\n leftElement,\n maxHeight,\n onKeyDown,\n placeholder,\n rightElement,\n shouldHideFilterButtons,\n shouldShowDropdown,\n shouldEnableKeyboardHighlighting,\n tagInputSettings,\n uuid,\n value,\n ],\n );\n },\n);\n\nSearchBox.displayName = 'SearchBox';\n\nexport default SearchBox;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/search-input/SearchInput.js CHANGED Viewed

@@ -2,9 +2,10 @@ import { AnimatePresence } from 'motion/react';
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import Icon from '../icon/Icon';
 import Input, { InputSize } from '../input/Input';
-import { StyledMotionSearchInputContentWrapper, StyledMotionSearchInputIconWrapper, StyledMotionSearchInputIconWrapperContent, StyledSearchInput, StyledSearchInputPseudoElement } from './SearchInput.styles';
+import { StyledMotionSearchInputContentWrapper, StyledMotionSearchInputIconWrapper, StyledMotionSearchInputIconWrapperContent, StyledSearchInput, StyledSearchInputIconTrigger, StyledSearchInputPseudoElement } from './SearchInput.styles';
 import { useTheme } from 'styled-components';
 import { useElementSize } from '../../hooks/element';
+import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 const SearchInput = /*#__PURE__*/forwardRef(({
   iconColor,
   isActive,
@@ -15,15 +16,41 @@ const SearchInput = /*#__PURE__*/forwardRef(({
   shouldUseAbsolutePositioning = false,
   size = InputSize.Medium,
   value,
+  shouldEnableKeyboardHighlighting,
   width: widthValue
 }, ref) => {
   const [isSearchInputActive, setIsSearchInputActive] = useState(isActive ?? (typeof value === 'string' && value.trim() !== ''));
   const inputRef = useRef(null);
   const pseudoRef = useRef(null);
+  const iconTriggerRef = useRef(null);
   const parentWidth = useElementSize(pseudoRef);
   const theme = useTheme();
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting);
   const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);
   const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);
+  const handleIconTriggerClick = useCallback(() => {
+    if (isSearchInputActive) {
+      handleBackIconClick();
+      return;
+    }
+    handleSearchIconClick();
+  }, [handleBackIconClick, handleSearchIconClick, isSearchInputActive]);
+  const handleIconTriggerKeyDown = useCallback(event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleIconTriggerClick();
+    }
+  }, [handleIconTriggerClick]);
+  const handleInputKeyDown = useCallback(event => {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      setIsSearchInputActive(false);
+      iconTriggerRef.current?.focus();
+    }
+    if (typeof onKeyDown === 'function') {
+      onKeyDown(event);
+    }
+  }, [onActiveChange, onKeyDown]);
   useEffect(() => {
     if (typeof onActiveChange === 'function') {
       onActiveChange(isSearchInputActive);
@@ -47,20 +74,12 @@ const SearchInput = /*#__PURE__*/forwardRef(({
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledSearchInput, {
     className: "beta-chayns-search-input",
     $size: size,
-    $shouldUseAbsolutePositioning: shouldUseAbsolutePositioning,
-    onClick: () => {
-      if (shouldUseAbsolutePositioning) {
-        if (isSearchInputActive) {
-          handleBackIconClick();
-        } else {
-          handleSearchIconClick();
-        }
-      }
-    }
+    $shouldUseAbsolutePositioning: shouldUseAbsolutePositioning
   }, shouldUseAbsolutePositioning ? /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
   }, isSearchInputActive && /*#__PURE__*/React.createElement(StyledMotionSearchInputContentWrapper, {
     $shouldUseAbsolutePositioning: shouldUseAbsolutePositioning,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     animate: {
       opacity: 1,
       width
@@ -80,13 +99,21 @@ const SearchInput = /*#__PURE__*/forwardRef(({
     }
   }, /*#__PURE__*/React.createElement(Input, {
     onChange: onChange,
-    onKeyDown: onKeyDown,
+    onKeyDown: handleInputKeyDown,
     placeholder: placeholder,
     ref: inputRef,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting,
     shouldShowClearIcon: true,
     size: size,
     value: value
-  })), /*#__PURE__*/React.createElement(StyledMotionSearchInputIconWrapperContent, {
+  })), /*#__PURE__*/React.createElement(StyledSearchInputIconTrigger, {
+    ref: iconTriggerRef,
+    id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon',
+    tabIndex: 0,
+    onClick: handleIconTriggerClick,
+    onKeyDown: handleIconTriggerKeyDown,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
+  }, /*#__PURE__*/React.createElement(StyledMotionSearchInputIconWrapperContent, {
     animate: {
       opacity: 1
     },
@@ -101,26 +128,21 @@ const SearchInput = /*#__PURE__*/forwardRef(({
     transition: {
       duration: 0.3
     },
-    id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon',
-    tabIndex: 0,
-    onKeyDown: e => {
-      if (e.key === 'Enter') {
-        e.preventDefault();
-        if (isSearchInputActive) {
-          handleBackIconClick();
-        } else {
-          handleSearchIconClick();
-        }
-      }
-    }
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
   }, /*#__PURE__*/React.createElement(Icon, {
     key: "icon",
     color: iconColor,
     tabIndex: -1,
-    icons: isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search'],
-    onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick
-  }))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledMotionSearchInputIconWrapper, null, /*#__PURE__*/React.createElement(AnimatePresence, {
+    icons: isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search']
+  })))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledMotionSearchInputIconWrapper, null, /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
+  }, /*#__PURE__*/React.createElement(StyledSearchInputIconTrigger, {
+    ref: iconTriggerRef,
+    id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon',
+    tabIndex: 0,
+    onClick: handleIconTriggerClick,
+    onKeyDown: handleIconTriggerKeyDown,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
   }, /*#__PURE__*/React.createElement(StyledMotionSearchInputIconWrapperContent, {
     animate: {
       opacity: 1
@@ -136,28 +158,17 @@ const SearchInput = /*#__PURE__*/forwardRef(({
     transition: {
       duration: 0.3
     },
-    id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon',
-    tabIndex: 0,
-    onKeyDown: e => {
-      if (e.key === 'Enter') {
-        e.preventDefault();
-        if (isSearchInputActive) {
-          handleBackIconClick();
-        } else {
-          handleSearchIconClick();
-        }
-      }
-    }
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
   }, /*#__PURE__*/React.createElement(Icon, {
     key: "icon",
     color: iconColor,
     tabIndex: -1,
-    icons: isSearchInputActive ? ['fa fa-arrow-left'] : ['fa fa-search'],
-    onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick
-  })))), /*#__PURE__*/React.createElement(AnimatePresence, {
+    icons: isSearchInputActive ? ['fa fa-arrow-left'] : ['fa fa-search']
+  }))))), /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
   }, isSearchInputActive && /*#__PURE__*/React.createElement(StyledMotionSearchInputContentWrapper, {
     $shouldUseAbsolutePositioning: shouldUseAbsolutePositioning,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     animate: {
       opacity: 1,
       width: '100%'
@@ -181,9 +192,10 @@ const SearchInput = /*#__PURE__*/forwardRef(({
       icons: ['far fa-search']
     }),
     onChange: onChange,
-    onKeyDown: onKeyDown,
+    onKeyDown: handleInputKeyDown,
     placeholder: placeholder,
     ref: inputRef,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting,
     shouldShowClearIcon: true,
     size: size,
     value: value

package/lib/esm/components/search-input/SearchInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInput.js","names":["AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","Icon","Input","InputSize","StyledMotionSearchInputContentWrapper","StyledMotionSearchInputIconWrapper","StyledMotionSearchInputIconWrapperContent","StyledSearchInput","StyledSearchInputPseudoElement","useTheme","useElementSize","SearchInput","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","shouldUseAbsolutePositioning","size","Medium","value","width","widthValue","ref","isSearchInputActive","setIsSearchInputActive","trim","inputRef","pseudoRef","parentWidth","theme","handleBackIconClick","handleSearchIconClick","current","focus","blur","createElement","Fragment","className","$size","$shouldUseAbsolutePositioning","onClick","initial","animate","opacity","exit","key","transition","duration","type","shouldShowClearIcon","position","id","tabIndex","e","preventDefault","color","icons","leftElement","text","displayName"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n ChangeEventHandler,\n CSSProperties,\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n StyledMotionSearchInputContentWrapper,\n StyledMotionSearchInputIconWrapper,\n StyledMotionSearchInputIconWrapperContent,\n StyledSearchInput,\n StyledSearchInputPseudoElement,\n} from './SearchInput.styles';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useElementSize } from '../../hooks/element';\n\nexport type SearchInputProps = {\n /*\n Color of the icon\n /\n iconColor?: CSSProperties['color'];\n /\n Force the active state of the input and override the internal state\n /\n isActive?: boolean;\n /\n Function that is executed when the active state of the input changes\n /\n onActiveChange?: (isActive: boolean) => void;\n /\n Function that is executed when the text of the input changes\n /\n onChange: ChangeEventHandler<HTMLInputElement>;\n /\n Function that is executed when a key is pressed\n /\n onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n /\n Placeholder for the input field\n /\n placeholder?: string;\n /\n Whether the SearchInput should be positioned absolute.\n /\n shouldUseAbsolutePositioning?: boolean;\n /\n The size of the input field\n /\n size?: InputSize;\n /\n Value if the input field should be controlled\n /\n value?: string;\n /\n The width of the parent.\n */\n width?: number;\n};\n\nconst SearchInput = forwardRef<InputRef, SearchInputProps>(\n (\n {\n iconColor,\n isActive,\n onActiveChange,\n onChange,\n onKeyDown,\n placeholder,\n shouldUseAbsolutePositioning = false,\n size = InputSize.Medium,\n value,\n width: widthValue,\n },\n ref,\n ) => {\n const [isSearchInputActive, setIsSearchInputActive] = useState(\n isActive ?? (typeof value === 'string' && value.trim() !== ''),\n );\n\n const inputRef = useRef<InputRef>(null);\n const pseudoRef = useRef<HTMLDivElement>(null);\n\n const parentWidth = useElementSize(pseudoRef);\n\n const theme = useTheme() as Theme;\n\n const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);\n\n const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);\n\n useEffect(() => {\n if (typeof onActiveChange === 'function') {\n onActiveChange(isSearchInputActive);\n }\n }, [isSearchInputActive, onActiveChange]);\n\n useEffect(() => {\n if (isSearchInputActive) {\n inputRef.current?.focus();\n }\n }, [isSearchInputActive]);\n\n useEffect(() => {\n if (typeof isActive === 'boolean') {\n setIsSearchInputActive(isActive);\n }\n }, [isActive]);\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => inputRef.current?.focus(),\n blur: () => inputRef.current?.blur(),\n }),\n [],\n );\n\n const width = useMemo(\n () => widthValue ?? parentWidth?.width,\n [parentWidth?.width, widthValue],\n );\n\n return (\n <>\n <StyledSearchInput\n className=\"beta-chayns-search-input\"\n $size={size}\n $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n onClick={() => {\n if (shouldUseAbsolutePositioning) {\n if (isSearchInputActive) {\n handleBackIconClick();\n } else {\n handleSearchIconClick();\n }\n }\n }}\n >\n {shouldUseAbsolutePositioning ? (\n <AnimatePresence initial={false}>\n {isSearchInputActive && (\n <StyledMotionSearchInputContentWrapper\n $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n animate={{ opacity: 1, width }}\n exit={{ opacity: 0, width: 0 }}\n initial={{ opacity: 0, width: 0 }}\n key=\"searchInputContentWrapper\"\n transition={{ duration: 0.25, type: 'tween' }}\n >\n <Input\n onChange={onChange}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n ref={inputRef}\n shouldShowClearIcon\n size={size}\n value={value}\n />\n </StyledMotionSearchInputContentWrapper>\n )}\n <StyledMotionSearchInputIconWrapperContent\n animate={{ opacity: 1 }}\n exit={{ opacity: 0, position: 'absolute' }}\n initial={{ opacity: 0 }}\n key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n transition={{ duration: 0.3 }}\n id={\n isSearchInputActive\n ? 'search-input-backIcon'\n : 'search-input-searchIcon'\n }\n tabIndex={0}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n if (isSearchInputActive) {\n handleBackIconClick();\n } else {\n handleSearchIconClick();\n }\n }\n }}\n >\n <Icon\n key=\"icon\"\n color={iconColor}\n tabIndex={-1}\n icons={isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search']}\n onClick={\n isSearchInputActive\n ? handleBackIconClick\n : handleSearchIconClick\n }\n />\n </StyledMotionSearchInputIconWrapperContent>\n </AnimatePresence>\n ) : (\n <>\n <StyledMotionSearchInputIconWrapper>\n <AnimatePresence initial={false}>\n <StyledMotionSearchInputIconWrapperContent\n animate={{ opacity: 1 }}\n exit={{ opacity: 0, position: 'absolute' }}\n initial={{ opacity: 0 }}\n key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n transition={{ duration: 0.3 }}\n id={\n isSearchInputActive\n ? 'search-input-backIcon'\n : 'search-input-searchIcon'\n }\n tabIndex={0}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n if (isSearchInputActive) {\n handleBackIconClick();\n } else {\n handleSearchIconClick();\n }\n }\n }}\n >\n <Icon\n key=\"icon\"\n color={iconColor}\n tabIndex={-1}\n icons={\n isSearchInputActive\n ? ['fa fa-arrow-left']\n : ['fa fa-search']\n }\n onClick={\n isSearchInputActive\n ? handleBackIconClick\n : handleSearchIconClick\n }\n />\n </StyledMotionSearchInputIconWrapperContent>\n </AnimatePresence>\n </StyledMotionSearchInputIconWrapper>\n <AnimatePresence initial={false}>\n {isSearchInputActive && (\n <StyledMotionSearchInputContentWrapper\n $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n animate={{ opacity: 1, width: '100%' }}\n exit={{ opacity: 0, width: 0 }}\n initial={{ opacity: 0, width: 0 }}\n key=\"searchInputContentWrapper\"\n transition={{ duration: 0.3 }}\n >\n <Input\n key=\"input\"\n leftElement={\n <Icon\n color={theme.text}\n icons={['far fa-search']}\n />\n }\n onChange={onChange}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n ref={inputRef}\n shouldShowClearIcon\n size={size}\n value={value}\n />\n </StyledMotionSearchInputContentWrapper>\n )}\n </AnimatePresence>\n </>\n )}\n </StyledSearchInput>\n <StyledSearchInputPseudoElement ref={pseudoRef} />\n </>\n );\n },\n);\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"SearchInput.js","names":["AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","Icon","Input","InputSize","StyledMotionSearchInputContentWrapper","StyledMotionSearchInputIconWrapper","StyledMotionSearchInputIconWrapperContent","StyledSearchInput","StyledSearchInputIconTrigger","StyledSearchInputPseudoElement","useTheme","useElementSize","useKeyboardFocusHighlighting","SearchInput","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","shouldUseAbsolutePositioning","size","Medium","value","shouldEnableKeyboardHighlighting","width","widthValue","ref","isSearchInputActive","setIsSearchInputActive","trim","inputRef","pseudoRef","iconTriggerRef","parentWidth","theme","shouldShowKeyboardHighlighting","handleBackIconClick","handleSearchIconClick","handleIconTriggerClick","handleIconTriggerKeyDown","event","key","preventDefault","handleInputKeyDown","current","focus","blur","createElement","Fragment","className","$size","$shouldUseAbsolutePositioning","initial","$shouldShowKeyboardHighlighting","animate","opacity","exit","transition","duration","type","shouldShowClearIcon","id","tabIndex","onClick","position","color","icons","leftElement","text","displayName"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n ChangeEventHandler,\n CSSProperties,\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n StyledMotionSearchInputContentWrapper,\n StyledMotionSearchInputIconWrapper,\n StyledMotionSearchInputIconWrapperContent,\n StyledSearchInput,\n StyledSearchInputIconTrigger,\n StyledSearchInputPseudoElement,\n} from './SearchInput.styles';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useElementSize } from '../../hooks/element';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\nexport type SearchInputProps = {\n /*\n Color of the icon\n /\n iconColor?: CSSProperties['color'];\n /\n Force the active state of the input and override the internal state\n /\n isActive?: boolean;\n /\n Function that is executed when the active state of the input changes\n /\n onActiveChange?: (isActive: boolean) => void;\n /\n Function that is executed when the text of the input changes\n /\n onChange: ChangeEventHandler<HTMLInputElement>;\n /\n Function that is executed when a key is pressed\n /\n onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n /\n Placeholder for the input field\n /\n placeholder?: string;\n /\n Whether the SearchInput should be positioned absolute.\n /\n shouldUseAbsolutePositioning?: boolean;\n /\n The size of the input field\n /\n size?: InputSize;\n /\n Value if the input field should be controlled\n /\n value?: string;\n /\n Enables keyboard-only focus highlighting.\n /\n shouldEnableKeyboardHighlighting?: boolean;\n /\n The width of the parent.\n */\n width?: number;\n};\n\nconst SearchInput = forwardRef<InputRef, SearchInputProps>(\n (\n {\n iconColor,\n isActive,\n onActiveChange,\n onChange,\n onKeyDown,\n placeholder,\n shouldUseAbsolutePositioning = false,\n size = InputSize.Medium,\n value,\n shouldEnableKeyboardHighlighting,\n width: widthValue,\n },\n ref,\n ) => {\n const [isSearchInputActive, setIsSearchInputActive] = useState(\n isActive ?? (typeof value === 'string' && value.trim() !== ''),\n );\n\n const inputRef = useRef<InputRef>(null);\n const pseudoRef = useRef<HTMLDivElement>(null);\n const iconTriggerRef = useRef<HTMLDivElement>(null);\n\n const parentWidth = useElementSize(pseudoRef);\n\n const theme = useTheme() as Theme;\n\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting,\n );\n\n const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);\n\n const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);\n\n const handleIconTriggerClick = useCallback(() => {\n if (isSearchInputActive) {\n handleBackIconClick();\n return;\n }\n\n handleSearchIconClick();\n }, [handleBackIconClick, handleSearchIconClick, isSearchInputActive]);\n\n const handleIconTriggerKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n handleIconTriggerClick();\n }\n },\n [handleIconTriggerClick],\n );\n\n const handleInputKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Escape') {\n event.preventDefault();\n setIsSearchInputActive(false);\n iconTriggerRef.current?.focus();\n }\n\n if (typeof onKeyDown === 'function') {\n onKeyDown(event);\n }\n },\n [onActiveChange, onKeyDown],\n );\n\n useEffect(() => {\n if (typeof onActiveChange === 'function') {\n onActiveChange(isSearchInputActive);\n }\n }, [isSearchInputActive, onActiveChange]);\n\n useEffect(() => {\n if (isSearchInputActive) {\n inputRef.current?.focus();\n }\n }, [isSearchInputActive]);\n\n useEffect(() => {\n if (typeof isActive === 'boolean') {\n setIsSearchInputActive(isActive);\n }\n }, [isActive]);\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => inputRef.current?.focus(),\n blur: () => inputRef.current?.blur(),\n }),\n [],\n );\n\n const width = useMemo(\n () => widthValue ?? parentWidth?.width,\n [parentWidth?.width, widthValue],\n );\n\n return (\n <>\n <StyledSearchInput\n className=\"beta-chayns-search-input\"\n $size={size}\n $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n >\n {shouldUseAbsolutePositioning ? (\n <AnimatePresence initial={false}>\n {isSearchInputActive && (\n <StyledMotionSearchInputContentWrapper\n $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n animate={{ opacity: 1, width }}\n exit={{ opacity: 0, width: 0 }}\n initial={{ opacity: 0, width: 0 }}\n key=\"searchInputContentWrapper\"\n transition={{ duration: 0.25, type: 'tween' }}\n >\n <Input\n onChange={onChange}\n onKeyDown={handleInputKeyDown}\n placeholder={placeholder}\n ref={inputRef}\n shouldEnableKeyboardHighlighting={\n shouldEnableKeyboardHighlighting\n }\n shouldShowClearIcon\n size={size}\n value={value}\n />\n </StyledMotionSearchInputContentWrapper>\n )}\n <StyledSearchInputIconTrigger\n ref={iconTriggerRef}\n id={\n isSearchInputActive\n ? 'search-input-backIcon'\n : 'search-input-searchIcon'\n }\n tabIndex={0}\n onClick={handleIconTriggerClick}\n onKeyDown={handleIconTriggerKeyDown}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n >\n <StyledMotionSearchInputIconWrapperContent\n animate={{ opacity: 1 }}\n exit={{ opacity: 0, position: 'absolute' }}\n initial={{ opacity: 0 }}\n key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n transition={{ duration: 0.3 }}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n >\n <Icon\n key=\"icon\"\n color={iconColor}\n tabIndex={-1}\n icons={\n isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search']\n }\n />\n </StyledMotionSearchInputIconWrapperContent>\n </StyledSearchInputIconTrigger>\n </AnimatePresence>\n ) : (\n <>\n <StyledMotionSearchInputIconWrapper>\n <AnimatePresence initial={false}>\n <StyledSearchInputIconTrigger\n ref={iconTriggerRef}\n id={\n isSearchInputActive\n ? 'search-input-backIcon'\n : 'search-input-searchIcon'\n }\n tabIndex={0}\n onClick={handleIconTriggerClick}\n onKeyDown={handleIconTriggerKeyDown}\n $shouldShowKeyboardHighlighting={\n shouldShowKeyboardHighlighting\n }\n >\n <StyledMotionSearchInputIconWrapperContent\n animate={{ opacity: 1 }}\n exit={{ opacity: 0, position: 'absolute' }}\n initial={{ opacity: 0 }}\n key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n transition={{ duration: 0.3 }}\n $shouldShowKeyboardHighlighting={\n shouldShowKeyboardHighlighting\n }\n >\n <Icon\n key=\"icon\"\n color={iconColor}\n tabIndex={-1}\n icons={\n isSearchInputActive\n ? ['fa fa-arrow-left']\n : ['fa fa-search']\n }\n />\n </StyledMotionSearchInputIconWrapperContent>\n </StyledSearchInputIconTrigger>\n </AnimatePresence>\n </StyledMotionSearchInputIconWrapper>\n <AnimatePresence initial={false}>\n {isSearchInputActive && (\n <StyledMotionSearchInputContentWrapper\n $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n $shouldShowKeyboardHighlighting={\n shouldShowKeyboardHighlighting\n }\n animate={{ opacity: 1, width: '100%' }}\n exit={{ opacity: 0, width: 0 }}\n initial={{ opacity: 0, width: 0 }}\n key=\"searchInputContentWrapper\"\n transition={{ duration: 0.3 }}\n >\n <Input\n key=\"input\"\n leftElement={\n <Icon\n color={theme.text}\n icons={['far fa-search']}\n />\n }\n onChange={onChange}\n onKeyDown={handleInputKeyDown}\n placeholder={placeholder}\n ref={inputRef}\n shouldEnableKeyboardHighlighting={\n shouldEnableKeyboardHighlighting\n }\n shouldShowClearIcon\n size={size}\n value={value}\n />\n </StyledMotionSearchInputContentWrapper>\n )}\n </AnimatePresence>\n </>\n )}\n </StyledSearchInput>\n <StyledSearchInputPseudoElement ref={pseudoRef} />\n </>\n );\n },\n);\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/search-input/SearchInput.styles.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { motion } from 'motion/react';
 import styled, { css } from 'styled-components';
+import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledSearchInput = styled.div`
     display: flex;
     align-items: center;
@@ -43,12 +44,35 @@ export const StyledMotionSearchInputContentWrapper = styled(motion.div)`
             right: 0;
         `}
-    overflow: hidden;
+    overflow: ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting ? 'visible' : 'hidden'};
 `;
 export const StyledMotionSearchInputIconWrapperContent = styled(motion.div)`
     display: flex;
     cursor: pointer;
 `;
+export const StyledSearchInputIconTrigger = styled.div`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    cursor: pointer;
+    ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting && css`
+            &:focus-visible {
+                transition: none;
+                ${keyboardFocusHighlightingRingCss}
+                border-radius: 50%;
+                box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.35);
+                outline-offset: 2px;
+            }
+        `}
+`;
 export const StyledMotionSearchInputIconWrapper = styled.div`
     width: 18px;
 `;