@chayns-components/core 5.0.0-beta.415 → 5.0.0-beta.416

package/lib/components/search-box/SearchBox.d.ts

@@ -29,6 +29,10 @@ export type SearchBoxProps = {
      * Whether the full list of items should be displayed if the input is empty.
      */
     shouldShowContentOnEmptyInput?: boolean;
+    /**
+     * If true, the images of the items are displayed in a round shape.
+     */
+    shouldShowRoundImage?: boolean;
 };
 declare const SearchBox: FC<SearchBoxProps>;
 export default SearchBox;

package/lib/components/search-box/SearchBox.js

@@ -22,6 +22,7 @@ const SearchBox = _ref => {
     onBlur,
     onSelect,
     selectedId,
+    shouldShowRoundImage,
     shouldShowContentOnEmptyInput = true
   } = _ref;
   const [matchingItems, setMatchingItems] = (0, _react.useState)([]);
@@ -147,17 +148,20 @@ const SearchBox = _ref => {
     matchingItems.forEach(_ref4 => {
       let {
         id,
-        text
+        text,
+        imageUrl
       } = _ref4;
       items.push( /*#__PURE__*/_react.default.createElement(_SearchBoxItem.default, {
         key: id,
         text: text,
+        imageUrl: imageUrl,
         id: id,
+        shouldShowRoundImage: shouldShowRoundImage,
         onSelect: handleSelect
       }));
     });
     return items;
-  }, [handleSelect, matchingItems]);
+  }, [shouldShowRoundImage, handleSelect, matchingItems]);
   (0, _react.useEffect)(() => {
     const handleKeyDown = e => {
       if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {

package/lib/components/search-box/SearchBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBox.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_calculate","_Input","_interopRequireDefault","_SearchBoxItem","_SearchBox","_searchBox","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","SearchBox","_ref","placeholder","list","onChange","onBlur","onSelect","selectedId","shouldShowContentOnEmptyInput","matchingItems","setMatchingItems","useState","value","setValue","isAnimating","setIsAnimating","height","setHeight","width","setWidth","focusedIndex","setFocusedIndex","boxRef","useRef","contentRef","inputRef","handleOutsideClick","useCallback","event","current","contains","target","useEffect","document","addEventListener","removeEventListener","textArray","map","_ref2","text","calculateContentHeight","input","getElementById","offsetWidth","selectedItem","find","_ref3","id","handleFocus","searchList","items","searchString","handleChange","searchedItems","length","handleBlur","handleSelect","item","content","useMemo","sort","b","localeCompare","forEach","_ref4","push","createElement","key","handleKeyDown","preventDefault","children","newIndex","prevElement","tabIndex","newElement","focus","element","textContent","replace","handleKeyPress","keyCode","StyledSearchBox","ref","onFocus","AnimatePresence","initial","StyledMotionSearchBoxBody","opacity","animate","transition","duration","type","displayName","_default","exports"],"sources":["../../../src/components/search-box/SearchBox.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    FocusEvent,\n    FocusEventHandler,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { calculateContentHeight } from '../../utils/calculate';\nimport Input from '../input/Input';\nimport SearchBoxItem from './search-box-item/SearchBoxItem';\nimport { StyledMotionSearchBoxBody, StyledSearchBox } from './SearchBox.styles';\nimport type { ISearchBoxItem } from '../../types/searchBox';\nimport { searchList } from '../../utils/searchBox';\n\nexport type SearchBoxProps = {\n    /**\n     * A list of items that can be searched.\n     */\n    list: ISearchBoxItem[];\n    /**\n     * The placeholder that should be displayed.\n     */\n    placeholder?: string;\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 to be executed when an item is selected.\n     */\n    onSelect?: (item: ISearchBoxItem) => void;\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     * Whether the full list of items should be displayed if the input is empty.\n     */\n    shouldShowContentOnEmptyInput?: boolean;\n};\n\nconst SearchBox: FC<SearchBoxProps> = ({\n    placeholder,\n    list,\n    onChange,\n    onBlur,\n    onSelect,\n    selectedId,\n    shouldShowContentOnEmptyInput = true,\n}) => {\n    const [matchingItems, setMatchingItems] = useState<ISearchBoxItem[]>([]);\n    const [value, setValue] = useState('');\n    const [isAnimating, setIsAnimating] = useState(false);\n    const [height, setHeight] = useState<number>(0);\n    const [width, setWidth] = useState(0);\n    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n\n    const boxRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    /**\n     * This function closes the list of items\n     */\n    const handleOutsideClick = useCallback(\n        (event: MouseEvent) => {\n            if (boxRef.current && !boxRef.current.contains(event.target as Node)) {\n                setIsAnimating(false);\n            }\n        },\n        [boxRef],\n    );\n\n    /**\n     * This hook listens for clicks\n     */\n    useEffect(() => {\n        document.addEventListener('click', handleOutsideClick);\n\n        return () => {\n            document.removeEventListener('click', handleOutsideClick);\n        };\n    }, [handleOutsideClick, boxRef]);\n\n    /**\n     * This hook calculates the height\n     */\n    useEffect(() => {\n        const textArray = list.map(({ text }) => text);\n\n        setHeight(calculateContentHeight(textArray));\n    }, [list, placeholder]);\n\n    /**\n     * This hook calculates the width\n     */\n    useEffect(() => {\n        const input = document.getElementById('search_box_input');\n\n        if (input) {\n            setWidth(input.offsetWidth);\n        }\n    }, []);\n\n    useEffect(() => {\n        if (selectedId) {\n            const selectedItem = list.find(({ id }) => id === selectedId);\n\n            if (selectedItem) {\n                setValue(selectedItem.text);\n            }\n        }\n    }, [list, selectedId]);\n\n    /**\n     * This function sets the items on focus if shouldShowContentOnEmptyInput\n     */\n    const handleFocus = useCallback(() => {\n        if (shouldShowContentOnEmptyInput) {\n            setMatchingItems(searchList({ items: list, searchString: value }));\n            setIsAnimating(true);\n        }\n    }, [list, shouldShowContentOnEmptyInput, value]);\n\n    /**\n     * This function handles changes of the input\n     */\n    const handleChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const searchedItems = searchList({ items: list, searchString: event.target.value });\n\n            if (!shouldShowContentOnEmptyInput && !event.target.value) {\n                setMatchingItems([]);\n            } else {\n                setMatchingItems(searchedItems);\n                setIsAnimating(searchedItems.length !== 0);\n            }\n\n            setValue(event.target.value);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [list, onChange, shouldShowContentOnEmptyInput],\n    );\n\n    /**\n     * This function handles the blur event of the input\n     */\n    const handleBlur = useCallback(\n        (event: FocusEvent<HTMLInputElement>) => {\n            if (typeof onBlur === 'function') {\n                onBlur(event);\n            }\n        },\n        [onBlur],\n    );\n\n    /**\n     * This function handles the item selection\n     */\n    const handleSelect = useCallback(\n        (item: ISearchBoxItem) => {\n            setValue(item.text);\n            setIsAnimating(false);\n\n            if (typeof onSelect === 'function') {\n                onSelect(item);\n            }\n        },\n        [onSelect],\n    );\n\n    const content = useMemo(() => {\n        const items: ReactElement[] = [];\n\n        matchingItems.sort((a, b) => a.text.localeCompare(b.text));\n\n        matchingItems.forEach(({ id, text }) => {\n            items.push(<SearchBoxItem key={id} text={text} id={id} onSelect={handleSelect} />);\n        });\n\n        return items;\n    }, [handleSelect, matchingItems]);\n\n    useEffect(() => {\n        const handleKeyDown = (e: KeyboardEvent) => {\n            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                e.preventDefault();\n                const children = contentRef.current?.children;\n                if (children && children.length > 0) {\n                    const newIndex =\n                        focusedIndex !== null\n                            ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) %\n                              children.length\n                            : 0;\n\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n                    newElement.focus();\n                }\n            } else if (e.key === 'Enter' && focusedIndex !== null) {\n                const element = contentRef.current?.children[focusedIndex];\n\n                if (!element) {\n                    return;\n                }\n\n                const { id, textContent } = element;\n\n                handleSelect({ id: id.replace('search-box-item__', ''), text: textContent ?? '' });\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [focusedIndex, handleSelect]);\n\n    const handleKeyPress = useCallback((event: KeyboardEvent) => {\n        if (event.keyCode === 27) {\n            setMatchingItems([]);\n        }\n    }, []);\n\n    useEffect(() => {\n        document.addEventListener('keydown', handleKeyPress);\n\n        return () => {\n            document.addEventListener('keydown', handleKeyPress);\n        };\n    }, [handleKeyPress]);\n\n    return useMemo(\n        () => (\n            <StyledSearchBox ref={boxRef}>\n                <div id=\"search_box_input\">\n                    <Input\n                        ref={inputRef}\n                        onChange={handleChange}\n                        onBlur={handleBlur}\n                        onFocus={handleFocus}\n                        placeholder={placeholder}\n                        value={value}\n                    />\n                </div>\n                <AnimatePresence initial={false}>\n                    <StyledMotionSearchBoxBody\n                        key=\"content\"\n                        height={height}\n                        width={width}\n                        initial={{ height: 0, opacity: 0 }}\n                        animate={\n                            isAnimating\n                                ? { height: 'fit-content', opacity: 1 }\n                                : { height: 0, opacity: 0 }\n                        }\n                        transition={{\n                            duration: 0.2,\n                            type: 'tween',\n                        }}\n                    >\n                        <div ref={contentRef}>{content}</div>\n                    </StyledMotionSearchBoxBody>\n                </AnimatePresence>\n            </StyledSearchBox>\n        ),\n        [\n            content,\n            handleBlur,\n            handleChange,\n            handleFocus,\n            height,\n            isAnimating,\n            placeholder,\n            value,\n            width,\n        ],\n    );\n};\n\nSearchBox.displayName = 'SearchBox';\n\nexport default SearchBox;\n"],"mappings":"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"}
+{"version":3,"file":"SearchBox.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_calculate","_Input","_interopRequireDefault","_SearchBoxItem","_SearchBox","_searchBox","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","SearchBox","_ref","placeholder","list","onChange","onBlur","onSelect","selectedId","shouldShowRoundImage","shouldShowContentOnEmptyInput","matchingItems","setMatchingItems","useState","value","setValue","isAnimating","setIsAnimating","height","setHeight","width","setWidth","focusedIndex","setFocusedIndex","boxRef","useRef","contentRef","inputRef","handleOutsideClick","useCallback","event","current","contains","target","useEffect","document","addEventListener","removeEventListener","textArray","map","_ref2","text","calculateContentHeight","input","getElementById","offsetWidth","selectedItem","find","_ref3","id","handleFocus","searchList","items","searchString","handleChange","searchedItems","length","handleBlur","handleSelect","item","content","useMemo","sort","b","localeCompare","forEach","_ref4","imageUrl","push","createElement","key","handleKeyDown","preventDefault","children","newIndex","prevElement","tabIndex","newElement","focus","element","textContent","replace","handleKeyPress","keyCode","StyledSearchBox","ref","onFocus","AnimatePresence","initial","StyledMotionSearchBoxBody","opacity","animate","transition","duration","type","displayName","_default","exports"],"sources":["../../../src/components/search-box/SearchBox.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    FocusEvent,\n    FocusEventHandler,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { calculateContentHeight } from '../../utils/calculate';\nimport Input from '../input/Input';\nimport SearchBoxItem from './search-box-item/SearchBoxItem';\nimport { StyledMotionSearchBoxBody, StyledSearchBox } from './SearchBox.styles';\nimport type { ISearchBoxItem } from '../../types/searchBox';\nimport { searchList } from '../../utils/searchBox';\n\nexport type SearchBoxProps = {\n    /**\n     * A list of items that can be searched.\n     */\n    list: ISearchBoxItem[];\n    /**\n     * The placeholder that should be displayed.\n     */\n    placeholder?: string;\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 to be executed when an item is selected.\n     */\n    onSelect?: (item: ISearchBoxItem) => void;\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     * Whether the full list of items should be displayed if the input is empty.\n     */\n    shouldShowContentOnEmptyInput?: boolean;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n};\n\nconst SearchBox: FC<SearchBoxProps> = ({\n    placeholder,\n    list,\n    onChange,\n    onBlur,\n    onSelect,\n    selectedId,\n    shouldShowRoundImage,\n    shouldShowContentOnEmptyInput = true,\n}) => {\n    const [matchingItems, setMatchingItems] = useState<ISearchBoxItem[]>([]);\n    const [value, setValue] = useState('');\n    const [isAnimating, setIsAnimating] = useState(false);\n    const [height, setHeight] = useState<number>(0);\n    const [width, setWidth] = useState(0);\n    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n\n    const boxRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    /**\n     * This function closes the list of items\n     */\n    const handleOutsideClick = useCallback(\n        (event: MouseEvent) => {\n            if (boxRef.current && !boxRef.current.contains(event.target as Node)) {\n                setIsAnimating(false);\n            }\n        },\n        [boxRef],\n    );\n\n    /**\n     * This hook listens for clicks\n     */\n    useEffect(() => {\n        document.addEventListener('click', handleOutsideClick);\n\n        return () => {\n            document.removeEventListener('click', handleOutsideClick);\n        };\n    }, [handleOutsideClick, boxRef]);\n\n    /**\n     * This hook calculates the height\n     */\n    useEffect(() => {\n        const textArray = list.map(({ text }) => text);\n\n        setHeight(calculateContentHeight(textArray));\n    }, [list, placeholder]);\n\n    /**\n     * This hook calculates the width\n     */\n    useEffect(() => {\n        const input = document.getElementById('search_box_input');\n\n        if (input) {\n            setWidth(input.offsetWidth);\n        }\n    }, []);\n\n    useEffect(() => {\n        if (selectedId) {\n            const selectedItem = list.find(({ id }) => id === selectedId);\n\n            if (selectedItem) {\n                setValue(selectedItem.text);\n            }\n        }\n    }, [list, selectedId]);\n\n    /**\n     * This function sets the items on focus if shouldShowContentOnEmptyInput\n     */\n    const handleFocus = useCallback(() => {\n        if (shouldShowContentOnEmptyInput) {\n            setMatchingItems(searchList({ items: list, searchString: value }));\n            setIsAnimating(true);\n        }\n    }, [list, shouldShowContentOnEmptyInput, value]);\n\n    /**\n     * This function handles changes of the input\n     */\n    const handleChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const searchedItems = searchList({ items: list, searchString: event.target.value });\n\n            if (!shouldShowContentOnEmptyInput && !event.target.value) {\n                setMatchingItems([]);\n            } else {\n                setMatchingItems(searchedItems);\n                setIsAnimating(searchedItems.length !== 0);\n            }\n\n            setValue(event.target.value);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [list, onChange, shouldShowContentOnEmptyInput],\n    );\n\n    /**\n     * This function handles the blur event of the input\n     */\n    const handleBlur = useCallback(\n        (event: FocusEvent<HTMLInputElement>) => {\n            if (typeof onBlur === 'function') {\n                onBlur(event);\n            }\n        },\n        [onBlur],\n    );\n\n    /**\n     * This function handles the item selection\n     */\n    const handleSelect = useCallback(\n        (item: ISearchBoxItem) => {\n            setValue(item.text);\n            setIsAnimating(false);\n\n            if (typeof onSelect === 'function') {\n                onSelect(item);\n            }\n        },\n        [onSelect],\n    );\n\n    const content = useMemo(() => {\n        const items: ReactElement[] = [];\n\n        matchingItems.sort((a, b) => a.text.localeCompare(b.text));\n\n        matchingItems.forEach(({ id, text, imageUrl }) => {\n            items.push(\n                <SearchBoxItem\n                    key={id}\n                    text={text}\n                    imageUrl={imageUrl}\n                    id={id}\n                    shouldShowRoundImage={shouldShowRoundImage}\n                    onSelect={handleSelect}\n                />,\n            );\n        });\n\n        return items;\n    }, [shouldShowRoundImage, handleSelect, matchingItems]);\n\n    useEffect(() => {\n        const handleKeyDown = (e: KeyboardEvent) => {\n            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                e.preventDefault();\n                const children = contentRef.current?.children;\n                if (children && children.length > 0) {\n                    const newIndex =\n                        focusedIndex !== null\n                            ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) %\n                              children.length\n                            : 0;\n\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n                    newElement.focus();\n                }\n            } else if (e.key === 'Enter' && focusedIndex !== null) {\n                const element = contentRef.current?.children[focusedIndex];\n\n                if (!element) {\n                    return;\n                }\n\n                const { id, textContent } = element;\n\n                handleSelect({ id: id.replace('search-box-item__', ''), text: textContent ?? '' });\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [focusedIndex, handleSelect]);\n\n    const handleKeyPress = useCallback((event: KeyboardEvent) => {\n        if (event.keyCode === 27) {\n            setMatchingItems([]);\n        }\n    }, []);\n\n    useEffect(() => {\n        document.addEventListener('keydown', handleKeyPress);\n\n        return () => {\n            document.addEventListener('keydown', handleKeyPress);\n        };\n    }, [handleKeyPress]);\n\n    return useMemo(\n        () => (\n            <StyledSearchBox ref={boxRef}>\n                <div id=\"search_box_input\">\n                    <Input\n                        ref={inputRef}\n                        onChange={handleChange}\n                        onBlur={handleBlur}\n                        onFocus={handleFocus}\n                        placeholder={placeholder}\n                        value={value}\n                    />\n                </div>\n                <AnimatePresence initial={false}>\n                    <StyledMotionSearchBoxBody\n                        key=\"content\"\n                        height={height}\n                        width={width}\n                        initial={{ height: 0, opacity: 0 }}\n                        animate={\n                            isAnimating\n                                ? { height: 'fit-content', opacity: 1 }\n                                : { height: 0, opacity: 0 }\n                        }\n                        transition={{\n                            duration: 0.2,\n                            type: 'tween',\n                        }}\n                    >\n                        <div ref={contentRef}>{content}</div>\n                    </StyledMotionSearchBoxBody>\n                </AnimatePresence>\n            </StyledSearchBox>\n        ),\n        [\n            content,\n            handleBlur,\n            handleChange,\n            handleFocus,\n            height,\n            isAnimating,\n            placeholder,\n            value,\n            width,\n        ],\n    );\n};\n\nSearchBox.displayName = 'SearchBox';\n\nexport default SearchBox;\n"],"mappings":"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"}

package/lib/components/search-box/search-box-item/SearchBoxItem.d.ts

@@ -4,6 +4,8 @@ export type SearchBoxItemProps = {
     onSelect: (item: ISearchBoxItem) => void;
     id: ISearchBoxItem['id'];
     text: ISearchBoxItem['text'];
+    imageUrl?: ISearchBoxItem['imageUrl'];
+    shouldShowRoundImage?: boolean;
 };
 declare const SearchBoxItem: FC<SearchBoxItemProps>;
 export default SearchBoxItem;

package/lib/components/search-box/search-box-item/SearchBoxItem.js

@@ -12,6 +12,8 @@ const SearchBoxItem = _ref => {
   let {
     id,
     text,
+    imageUrl,
+    shouldShowRoundImage,
     onSelect
   } = _ref;
   const handleClick = (0, _react.useCallback)(() => {
@@ -23,7 +25,10 @@ const SearchBoxItem = _ref => {
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_SearchBoxItem.StyledSearchBoxItem, {
     id: `search-box-item__${id}`,
     onClick: handleClick
-  }, /*#__PURE__*/_react.default.createElement(_SearchBoxItem.StyledSearchBoxItemText, null, text)), [handleClick, id, text]);
+  }, imageUrl && /*#__PURE__*/_react.default.createElement(_SearchBoxItem.StyledSearchBoxItemImage, {
+    src: imageUrl,
+    shouldShowRoundImage: shouldShowRoundImage
+  }), /*#__PURE__*/_react.default.createElement(_SearchBoxItem.StyledSearchBoxItemText, null, text)), [handleClick, id, imageUrl, shouldShowRoundImage, text]);
 };
 SearchBoxItem.displayName = 'SearchBoxItem';
 var _default = exports.default = SearchBoxItem;

package/lib/components/search-box/search-box-item/SearchBoxItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBoxItem.js","names":["_react","_interopRequireWildcard","require","_SearchBoxItem","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","SearchBoxItem","_ref","id","text","onSelect","handleClick","useCallback","useMemo","createElement","StyledSearchBoxItem","onClick","StyledSearchBoxItemText","displayName","_default","exports"],"sources":["../../../../src/components/search-box/search-box-item/SearchBoxItem.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from 'react';\nimport type { ISearchBoxItem } from '../../../types/searchBox';\nimport { StyledSearchBoxItem, StyledSearchBoxItemText } from './SearchBoxItem.styles';\n\nexport type SearchBoxItemProps = {\n    onSelect: (item: ISearchBoxItem) => void;\n    id: ISearchBoxItem['id'];\n    text: ISearchBoxItem['text'];\n};\n\nconst SearchBoxItem: FC<SearchBoxItemProps> = ({ id, text, onSelect }) => {\n    const handleClick = useCallback(() => {\n        onSelect({ id, text });\n    }, [id, onSelect, text]);\n\n    return useMemo(\n        () => (\n            <StyledSearchBoxItem id={`search-box-item__${id}`} onClick={handleClick}>\n                <StyledSearchBoxItemText>{text}</StyledSearchBoxItemText>\n            </StyledSearchBoxItem>\n        ),\n        [handleClick, id, text],\n    );\n};\n\nSearchBoxItem.displayName = 'SearchBoxItem';\n\nexport default SearchBoxItem;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,cAAA,GAAAD,OAAA;AAAsF,SAAAE,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAJ,wBAAAI,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAQtF,MAAMY,aAAqC,GAAGC,IAAA,IAA4B;EAAA,IAA3B;IAAEC,EAAE;IAAEC,IAAI;IAAEC;EAAS,CAAC,GAAAH,IAAA;EACjE,MAAMI,WAAW,GAAG,IAAAC,kBAAW,EAAC,MAAM;IAClCF,QAAQ,CAAC;MAAEF,EAAE;MAAEC;IAAK,CAAC,CAAC;EAC1B,CAAC,EAAE,CAACD,EAAE,EAAEE,QAAQ,EAAED,IAAI,CAAC,CAAC;EAExB,OAAO,IAAAI,cAAO,EACV,mBACIhC,MAAA,CAAAU,OAAA,CAAAuB,aAAA,CAAC9B,cAAA,CAAA+B,mBAAmB;IAACP,EAAE,EAAG,oBAAmBA,EAAG,EAAE;IAACQ,OAAO,EAAEL;EAAY,gBACpE9B,MAAA,CAAAU,OAAA,CAAAuB,aAAA,CAAC9B,cAAA,CAAAiC,uBAAuB,QAAER,IAA8B,CACvC,CACxB,EACD,CAACE,WAAW,EAAEH,EAAE,EAAEC,IAAI,CAC1B,CAAC;AACL,CAAC;AAEDH,aAAa,CAACY,WAAW,GAAG,eAAe;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA7B,OAAA,GAE7Be,aAAa"}
+{"version":3,"file":"SearchBoxItem.js","names":["_react","_interopRequireWildcard","require","_SearchBoxItem","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","SearchBoxItem","_ref","id","text","imageUrl","shouldShowRoundImage","onSelect","handleClick","useCallback","useMemo","createElement","StyledSearchBoxItem","onClick","StyledSearchBoxItemImage","src","StyledSearchBoxItemText","displayName","_default","exports"],"sources":["../../../../src/components/search-box/search-box-item/SearchBoxItem.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from 'react';\nimport type { ISearchBoxItem } from '../../../types/searchBox';\nimport {\n    StyledSearchBoxItem,\n    StyledSearchBoxItemImage,\n    StyledSearchBoxItemText,\n} from './SearchBoxItem.styles';\n\nexport type SearchBoxItemProps = {\n    onSelect: (item: ISearchBoxItem) => void;\n    id: ISearchBoxItem['id'];\n    text: ISearchBoxItem['text'];\n    imageUrl?: ISearchBoxItem['imageUrl'];\n    shouldShowRoundImage?: boolean;\n};\n\nconst SearchBoxItem: FC<SearchBoxItemProps> = ({\n    id,\n    text,\n    imageUrl,\n    shouldShowRoundImage,\n    onSelect,\n}) => {\n    const handleClick = useCallback(() => {\n        onSelect({ id, text });\n    }, [id, onSelect, text]);\n\n    return useMemo(\n        () => (\n            <StyledSearchBoxItem id={`search-box-item__${id}`} onClick={handleClick}>\n                {imageUrl && (\n                    <StyledSearchBoxItemImage\n                        src={imageUrl}\n                        shouldShowRoundImage={shouldShowRoundImage}\n                    />\n                )}\n                <StyledSearchBoxItemText>{text}</StyledSearchBoxItemText>\n            </StyledSearchBoxItem>\n        ),\n        [handleClick, id, imageUrl, shouldShowRoundImage, text],\n    );\n};\n\nSearchBoxItem.displayName = 'SearchBoxItem';\n\nexport default SearchBoxItem;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,cAAA,GAAAD,OAAA;AAIgC,SAAAE,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAJ,wBAAAI,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAUhC,MAAMY,aAAqC,GAAGC,IAAA,IAMxC;EAAA,IANyC;IAC3CC,EAAE;IACFC,IAAI;IACJC,QAAQ;IACRC,oBAAoB;IACpBC;EACJ,CAAC,GAAAL,IAAA;EACG,MAAMM,WAAW,GAAG,IAAAC,kBAAW,EAAC,MAAM;IAClCF,QAAQ,CAAC;MAAEJ,EAAE;MAAEC;IAAK,CAAC,CAAC;EAC1B,CAAC,EAAE,CAACD,EAAE,EAAEI,QAAQ,EAAEH,IAAI,CAAC,CAAC;EAExB,OAAO,IAAAM,cAAO,EACV,mBACIlC,MAAA,CAAAU,OAAA,CAAAyB,aAAA,CAAChC,cAAA,CAAAiC,mBAAmB;IAACT,EAAE,EAAG,oBAAmBA,EAAG,EAAE;IAACU,OAAO,EAAEL;EAAY,GACnEH,QAAQ,iBACL7B,MAAA,CAAAU,OAAA,CAAAyB,aAAA,CAAChC,cAAA,CAAAmC,wBAAwB;IACrBC,GAAG,EAAEV,QAAS;IACdC,oBAAoB,EAAEA;EAAqB,CAC9C,CACJ,eACD9B,MAAA,CAAAU,OAAA,CAAAyB,aAAA,CAAChC,cAAA,CAAAqC,uBAAuB,QAAEZ,IAA8B,CACvC,CACxB,EACD,CAACI,WAAW,EAAEL,EAAE,EAAEE,QAAQ,EAAEC,oBAAoB,EAAEF,IAAI,CAC1D,CAAC;AACL,CAAC;AAEDH,aAAa,CAACgB,WAAW,GAAG,eAAe;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAjC,OAAA,GAE7Be,aAAa"}

package/lib/components/search-box/search-box-item/SearchBoxItem.styles.d.ts

@@ -1,7 +1,13 @@
 /// <reference types="react" />
+import type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';
 export declare const StyledSearchBoxItem: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
 }>>;
+type StyledSearchBoxItemImageProps = WithTheme<{
+    shouldShowRoundImage?: boolean;
+}>;
+export declare const StyledSearchBoxItemImage: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, StyledSearchBoxItemImageProps>>;
 export declare const StyledSearchBoxItemText: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {
     theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
 }>>;
+export {};

package/lib/components/search-box/search-box-item/SearchBoxItem.styles.js

@@ -3,10 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledSearchBoxItemText = exports.StyledSearchBoxItem = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+exports.StyledSearchBoxItemText = exports.StyledSearchBoxItemImage = exports.StyledSearchBoxItem = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const StyledSearchBoxItem = exports.StyledSearchBoxItem = _styledComponents.default.div`
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px;
+
     &:hover {
         background: ${_ref => {
   let {
@@ -25,11 +31,31 @@ const StyledSearchBoxItem = exports.StyledSearchBoxItem = _styledComponents.defa
 }};
     }
 `;
-const StyledSearchBoxItemText = exports.StyledSearchBoxItemText = _styledComponents.default.p`
-    color: ${_ref3 => {
+const StyledSearchBoxItemImage = exports.StyledSearchBoxItemImage = _styledComponents.default.img`
+    box-shadow: 0 0 0 1px
+        rgba(${_ref3 => {
   let {
     theme
   } = _ref3;
+  return theme['009-rgb'];
+}}, 0.15);
+    height: 22px;
+    width: 22px;
+
+    ${_ref4 => {
+  let {
+    shouldShowRoundImage
+  } = _ref4;
+  return shouldShowRoundImage && (0, _styledComponents.css)`
+            border-radius: 50%;
+        `;
+}}
+`;
+const StyledSearchBoxItemText = exports.StyledSearchBoxItemText = _styledComponents.default.p`
+    color: ${_ref5 => {
+  let {
+    theme
+  } = _ref5;
   return theme.text;
 }};
     margin: 5px;

package/lib/components/search-box/search-box-item/SearchBoxItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBoxItem.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledSearchBoxItem","exports","styled","div","_ref","theme","_ref2","StyledSearchBoxItemText","p","_ref3","text"],"sources":["../../../../src/components/search-box/search-box-item/SearchBoxItem.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledSearchBoxItemProps = WithTheme<unknown>;\nexport const StyledSearchBoxItem = styled.div<StyledSearchBoxItemProps>`\n    &:hover {\n        background: ${({ theme }: StyledSearchBoxItemProps) => theme['secondary-103']};\n    }\n\n    &:focus {\n        background: ${({ theme }: StyledSearchBoxItemProps) => theme['secondary-103']};\n    }\n`;\n\ntype StyledSearchBoxItemTextProps = WithTheme<unknown>;\n\nexport const StyledSearchBoxItemText = styled.p<StyledSearchBoxItemTextProps>`\n    color: ${({ theme }: StyledSearchBoxItemTextProps) => theme.text};\n    margin: 5px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAIhC,MAAMG,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAGE,yBAAM,CAACC,GAA8B;AACxE;AACA,sBAAsBC,IAAA;EAAA,IAAC;IAAEC;EAAgC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,eAAe,CAAC;AAAA,CAAC;AACtF;AACA;AACA;AACA,sBAAsBC,KAAA;EAAA,IAAC;IAAED;EAAgC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,eAAe,CAAC;AAAA,CAAC;AACtF;AACA,CAAC;AAIM,MAAME,uBAAuB,GAAAN,OAAA,CAAAM,uBAAA,GAAGL,yBAAM,CAACM,CAAgC;AAC9E,aAAaC,KAAA;EAAA,IAAC;IAAEJ;EAAoC,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAACK,IAAI;AAAA,CAAC;AACrE;AACA,CAAC"}
+{"version":3,"file":"SearchBoxItem.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledSearchBoxItem","exports","styled","div","_ref","theme","_ref2","StyledSearchBoxItemImage","img","_ref3","_ref4","shouldShowRoundImage","css","StyledSearchBoxItemText","p","_ref5","text"],"sources":["../../../../src/components/search-box/search-box-item/SearchBoxItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledSearchBoxItemProps = WithTheme<unknown>;\nexport const StyledSearchBoxItem = styled.div<StyledSearchBoxItemProps>`\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 10px;\n\n    &:hover {\n        background: ${({ theme }: StyledSearchBoxItemProps) => theme['secondary-103']};\n    }\n\n    &:focus {\n        background: ${({ theme }: StyledSearchBoxItemProps) => theme['secondary-103']};\n    }\n`;\n\ntype StyledSearchBoxItemImageProps = WithTheme<{ shouldShowRoundImage?: boolean }>;\n\nexport const StyledSearchBoxItemImage = styled.img<StyledSearchBoxItemImageProps>`\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledSearchBoxItemImageProps) => theme['009-rgb']}, 0.15);\n    height: 22px;\n    width: 22px;\n\n    ${({ shouldShowRoundImage }) =>\n        shouldShowRoundImage &&\n        css`\n            border-radius: 50%;\n        `}\n`;\n\ntype StyledSearchBoxItemTextProps = WithTheme<unknown>;\n\nexport const StyledSearchBoxItemText = styled.p<StyledSearchBoxItemTextProps>`\n    color: ${({ theme }: StyledSearchBoxItemTextProps) => theme.text};\n    margin: 5px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAIzC,MAAMY,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAGE,yBAAM,CAACC,GAA8B;AACxE;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBC,IAAA;EAAA,IAAC;IAAEC;EAAgC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,eAAe,CAAC;AAAA,CAAC;AACtF;AACA;AACA;AACA,sBAAsBC,KAAA;EAAA,IAAC;IAAED;EAAgC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,eAAe,CAAC;AAAA,CAAC;AACtF;AACA,CAAC;AAIM,MAAME,wBAAwB,GAAAN,OAAA,CAAAM,wBAAA,GAAGL,yBAAM,CAACM,GAAmC;AAClF;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEJ;EAAqC,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC9E;AACA;AACA;AACA,MAAMK,KAAA;EAAA,IAAC;IAAEC;EAAqB,CAAC,GAAAD,KAAA;EAAA,OACvBC,oBAAoB,IACpB,IAAAC,qBAAG,CAAC;AACZ;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAIM,MAAMC,uBAAuB,GAAAZ,OAAA,CAAAY,uBAAA,GAAGX,yBAAM,CAACY,CAAgC;AAC9E,aAAaC,KAAA;EAAA,IAAC;IAAEV;EAAoC,CAAC,GAAAU,KAAA;EAAA,OAAKV,KAAK,CAACW,IAAI;AAAA,CAAC;AACrE;AACA,CAAC"}

package/lib/types/searchBox.d.ts

@@ -1,4 +1,5 @@
 export interface ISearchBoxItem {
     text: string;
     id: string;
+    imageUrl?: string;
 }

package/lib/types/searchBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"searchBox.js","names":[],"sources":["../../src/types/searchBox.ts"],"sourcesContent":["export interface ISearchBoxItem {\n    text: string;\n    id: string;\n}\n"],"mappings":""}
+{"version":3,"file":"searchBox.js","names":[],"sources":["../../src/types/searchBox.ts"],"sourcesContent":["export interface ISearchBoxItem {\n    text: string;\n    id: string;\n    imageUrl?: string;\n}\n"],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.415",
+    "version": "5.0.0-beta.416",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "keywords": [
         "chayns",
@@ -75,5 +75,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "586ed1b29d0656fb46e71144c7086dbe877222c2"
+    "gitHead": "e8e78bda3689893725643dabf1fa497c963dd361"
 }