@chayns-components/core 5.0.0-beta.396 → 5.0.0-beta.397

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

@@ -25,6 +25,10 @@ export type SearchBoxProps = {
      * Control the selected item. If you use this prop, make sure to update it when the user selects an item.
      */
     selectedId?: string;
+    /**
+     * Whether the full list of items should be displayed if the input is empty.
+     */
+    shouldShowContentOnEmptyInput?: boolean;
 };
 declare const SearchBox: FC<SearchBoxProps>;
 export default SearchBox;

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

@@ -21,13 +21,15 @@ const SearchBox = _ref => {
     onChange,
     onBlur,
     onSelect,
-    selectedId
+    selectedId,
+    shouldShowContentOnEmptyInput = true
   } = _ref;
   const [matchingItems, setMatchingItems] = (0, _react.useState)([]);
   const [value, setValue] = (0, _react.useState)('');
   const [isAnimating, setIsAnimating] = (0, _react.useState)(false);
   const [height, setHeight] = (0, _react.useState)(0);
   const [width, setWidth] = (0, _react.useState)(0);
+  const [focusedIndex, setFocusedIndex] = (0, _react.useState)(null);
   const boxRef = (0, _react.useRef)(null);
   const contentRef = (0, _react.useRef)(null);
   const inputRef = (0, _react.useRef)(null);
@@ -87,6 +89,19 @@ const SearchBox = _ref => {
     }
   }, [list, selectedId]);
 
+  /**
+   * This function sets the items on focus if shouldShowContentOnEmptyInput
+   */
+  const handleFocus = (0, _react.useCallback)(() => {
+    if (shouldShowContentOnEmptyInput) {
+      setMatchingItems((0, _utils.searchList)({
+        items: list,
+        searchString: value
+      }));
+      setIsAnimating(true);
+    }
+  }, [list, shouldShowContentOnEmptyInput, value]);
+
   /**
    * This function handles changes of the input
    */
@@ -95,13 +110,17 @@ const SearchBox = _ref => {
       items: list,
       searchString: event.target.value
     });
-    setMatchingItems(searchedItems);
-    setIsAnimating(searchedItems.length !== 0);
+    if (!shouldShowContentOnEmptyInput && !event.target.value) {
+      setMatchingItems([]);
+    } else {
+      setMatchingItems(searchedItems);
+      setIsAnimating(searchedItems.length !== 0);
+    }
     setValue(event.target.value);
     if (typeof onChange === 'function') {
       onChange(event);
     }
-  }, [list, onChange]);
+  }, [list, onChange, shouldShowContentOnEmptyInput]);
 
   /**
    * This function handles the blur event of the input
@@ -139,6 +158,53 @@ const SearchBox = _ref => {
     });
     return items;
   }, [handleSelect, matchingItems]);
+  (0, _react.useEffect)(() => {
+    const handleKeyDown = e => {
+      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+        e.preventDefault();
+        const children = contentRef.current?.children;
+        if (children && children.length > 0) {
+          const newIndex = focusedIndex !== null ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) % children.length : 0;
+          if (focusedIndex !== null) {
+            const prevElement = children[focusedIndex];
+            prevElement.tabIndex = -1;
+          }
+          setFocusedIndex(newIndex);
+          const newElement = children[newIndex];
+          newElement.tabIndex = 0;
+          newElement.focus();
+        }
+      } else if (e.key === 'Enter' && focusedIndex !== null) {
+        const element = contentRef.current?.children[focusedIndex];
+        if (!element) {
+          return;
+        }
+        const {
+          id,
+          textContent
+        } = element;
+        handleSelect({
+          id: id.replace('search-box-item__', ''),
+          text: textContent ?? ''
+        });
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [focusedIndex, handleSelect]);
+  const handleKeyPress = (0, _react.useCallback)(event => {
+    if (event.keyCode === 27) {
+      setMatchingItems([]);
+    }
+  }, []);
+  (0, _react.useEffect)(() => {
+    document.addEventListener('keydown', handleKeyPress);
+    return () => {
+      document.addEventListener('keydown', handleKeyPress);
+    };
+  }, [handleKeyPress]);
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_SearchBox.StyledSearchBox, {
     ref: boxRef
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -147,6 +213,7 @@ const SearchBox = _ref => {
     ref: inputRef,
     onChange: handleChange,
     onBlur: handleBlur,
+    onFocus: handleFocus,
     placeholder: placeholder,
     value: value
   })), /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
@@ -172,7 +239,7 @@ const SearchBox = _ref => {
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
     ref: contentRef
-  }, content)))), [content, handleBlur, handleChange, height, isAnimating, placeholder, value, width]);
+  }, content)))), [content, handleBlur, handleChange, handleFocus, height, isAnimating, placeholder, value, width]);
 };
 SearchBox.displayName = 'SearchBox';
 var _default = exports.default = SearchBox;

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","_utils","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","matchingItems","setMatchingItems","useState","value","setValue","isAnimating","setIsAnimating","height","setHeight","width","setWidth","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","handleChange","searchedItems","searchList","items","searchString","length","handleBlur","handleSelect","item","content","useMemo","sort","b","localeCompare","forEach","_ref4","push","createElement","key","StyledSearchBox","ref","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';\nimport { searchList } from './utils';\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\nconst SearchBox: FC<SearchBoxProps> = (\n    {\n        placeholder,\n        list,\n        onChange,\n        onBlur,\n        onSelect,\n        selectedId\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\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 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            setMatchingItems(searchedItems);\n            setIsAnimating(searchedItems.length !== 0);\n            setValue(event.target.value);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [list, onChange]\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    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                        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        [content, handleBlur, handleChange, height, isAnimating, placeholder, value, width]\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","_utils","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';\nimport { searchList } from './utils';\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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"}

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

@@ -21,8 +21,9 @@ const SearchBoxItem = _ref => {
     });
   }, [id, onSelect, text]);
   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, text]);
+  }, /*#__PURE__*/_react.default.createElement(_SearchBoxItem.StyledSearchBoxItemText, null, text)), [handleClick, id, 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';\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 onClick={handleClick}>\n                <StyledSearchBoxItemText>{text}</StyledSearchBoxItemText>\n            </StyledSearchBoxItem>\n        ),\n        [handleClick, 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;IAACC,OAAO,EAAEL;EAAY,gBACtC9B,MAAA,CAAAU,OAAA,CAAAuB,aAAA,CAAC9B,cAAA,CAAAiC,uBAAuB,QAAER,IAA8B,CACvC,CACxB,EACD,CAACE,WAAW,EAAEF,IAAI,CACtB,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","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';\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"}

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

@@ -13,14 +13,23 @@ const StyledSearchBoxItem = exports.StyledSearchBoxItem = _styledComponents.defa
     theme
   } = _ref;
   return theme['secondary-103'];
+}};
+    }
+
+    &:focus {
+        background: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme['secondary-103'];
 }};
     }
 `;
 const StyledSearchBoxItemText = exports.StyledSearchBoxItemText = _styledComponents.default.p`
-    color: ${_ref2 => {
+    color: ${_ref3 => {
   let {
     theme
-  } = _ref2;
+  } = _ref3;
   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","StyledSearchBoxItemText","p","_ref2","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\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,CAAC;AAIM,MAAMC,uBAAuB,GAAAL,OAAA,CAAAK,uBAAA,GAAGJ,yBAAM,CAACK,CAAgC;AAC9E,aAAaC,KAAA;EAAA,IAAC;IAAEH;EAAoC,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAACI,IAAI;AAAA,CAAC;AACrE;AACA,CAAC"}
+{"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.396",
+    "version": "5.0.0-beta.397",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "keywords": [
         "chayns",
@@ -70,5 +70,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "b9fb37523d8f6b01348ad0e75ebf2175624d0a75"
+    "gitHead": "e96612871ca1fa076b0057cb2fcd14163f410a7b"
 }