@chayns-components/core 5.0.0-beta.486 → 5.0.0-beta.488

package/lib/components/combobox/ComboBox.js

@@ -82,10 +82,8 @@ const ComboBox = _ref => {
    * This function sets the external selected item
    */
   useEffect(() => {
-    if (selectedItem) {
-      setItem(selectedItem);
-      setIsAnimating(false);
-    }
+    setIsAnimating(false);
+    setItem(selectedItem);
   }, [selectedItem]);
   const placeholderImageUrl = useMemo(() => {
     if (selectedItem) {

package/lib/components/combobox/ComboBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","names":["getDevice","React","useCallback","useEffect","useMemo","useRef","useState","ComboBoxDirection","calculateContentHeight","calculateContentWidth","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledMotionComboBoxBody","ComboBox","_ref","direction","BOTTOM","isDisabled","list","maxHeight","onSelect","placeholder","selectedItem","shouldShowRoundImage","item","setItem","isAnimating","setIsAnimating","minWidth","setMinWidth","height","setHeight","ref","browser","isMobile","chayns","env","handleClick","event","current","contains","target","document","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","isAtLeastOneItemWithImageGiven","some","_ref2","imageUrl","textArray","map","_ref3","text","push","placeholderImageUrl","undefined","placeholderText","handleHeaderClick","prevState","comboBoxBody","items","_ref4","suffixElement","value","createElement","isSelected","key","animate","opacity","style","TOP","transform","$browser","name","$height","initial","$maxHeight","$minWidth","$direction","transition","duration","onClick","$isOpen","$isMobile","$isDisabled","src","icons","displayName"],"sources":["../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, {\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type CSSProperties,\n    type ReactNode,\n} from 'react';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport { calculateContentHeight, calculateContentWidth } from '../../utils/calculate';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItem {\n    imageUrl?: string;\n    suffixElement?: ReactNode;\n    text: string;\n    value: string | number;\n}\n\nexport type ComboBoxProps = {\n    /**\n     * The direction in which the combobox should open.\n     */\n    direction?: ComboBoxDirection;\n    /**\n     * Whether the combobox should be disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * The list of the items that should be displayed.\n     */\n    list: IComboBoxItem[];\n    /**\n     * The maximum height of the combobox content.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * Function that should be executed when an item is selected.\n     */\n    onSelect?: (comboboxItem: IComboBoxItem) => void;\n    /**\n     * A text that should be displayed when no item is selected.\n     */\n    placeholder: string;\n    /**\n     * An item that should be preselected.\n     */\n    selectedItem?: IComboBoxItem;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n    direction = ComboBoxDirection.BOTTOM,\n    isDisabled = false,\n    list,\n    maxHeight = '300px',\n    onSelect,\n    placeholder,\n    selectedItem,\n    shouldShowRoundImage,\n}) => {\n    const [item, setItem] = useState<IComboBoxItem>();\n    const [isAnimating, setIsAnimating] = useState(false);\n    const [minWidth, setMinWidth] = useState(0);\n    const [height, setHeight] = useState(0);\n\n    const ref = useRef<HTMLDivElement>(null);\n\n    const { browser } = getDevice();\n\n    const { isMobile } = chayns.env;\n\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (ref.current && !ref.current.contains(event.target as Node)) {\n                setIsAnimating(false);\n            }\n        },\n        [ref],\n    );\n\n    /**\n     * This function adds an event listener to the document to close the combobox when the user clicks outside of it\n     */\n    useEffect(() => {\n        document.addEventListener('click', handleClick);\n\n        return () => {\n            document.removeEventListener('click', handleClick);\n        };\n    }, [handleClick, ref]);\n\n    /**\n     * This function sets the selected item\n     */\n    const handleSetSelectedItem = useCallback(\n        (itemToSelect: IComboBoxItem) => {\n            setItem(itemToSelect);\n            setIsAnimating(false);\n\n            if (onSelect) {\n                onSelect(itemToSelect);\n            }\n        },\n        [onSelect],\n    );\n\n    /**\n     * This function calculates the greatest width\n     */\n    useEffect(() => {\n        const isAtLeastOneItemWithImageGiven = list.some(({ imageUrl }) => imageUrl);\n\n        const textArray = list.map(({ text }) => text);\n\n        setHeight(calculateContentHeight(textArray));\n\n        textArray.push(placeholder);\n\n        // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left\n        // 32px = image width + flex gap\n        setMinWidth(calculateContentWidth(list) + 45 + (isAtLeastOneItemWithImageGiven ? 32 : 0));\n    }, [list, placeholder]);\n\n    /**\n     * This function sets the external selected item\n     */\n    useEffect(() => {\n        if (selectedItem) {\n            setItem(selectedItem);\n            setIsAnimating(false);\n        }\n    }, [selectedItem]);\n\n    const placeholderImageUrl = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.imageUrl;\n        }\n\n        if (item) {\n            return item.imageUrl;\n        }\n\n        return undefined;\n    }, [item, selectedItem]);\n\n    /**\n     * This function resets the placeholder\n     */\n    const placeholderText = useMemo(() => {\n        let text = placeholder;\n\n        if (selectedItem) {\n            text = selectedItem.text;\n        } else if (item) {\n            text = item.text;\n        }\n\n        return text;\n    }, [item, placeholder, selectedItem]);\n\n    /**\n     * This function opens the content of the combobox\n     */\n    const handleHeaderClick = useCallback(() => {\n        if (!isDisabled) {\n            setIsAnimating((prevState) => !prevState);\n        }\n    }, [isDisabled]);\n\n    const comboBoxBody = useMemo(() => {\n        const items = list.map(({ imageUrl, suffixElement, text, value }) => (\n            <ComboBoxItem\n                imageUrl={imageUrl}\n                isSelected={selectedItem ? value === selectedItem.value : false}\n                key={value}\n                onSelect={handleSetSelectedItem}\n                shouldShowRoundImage={shouldShowRoundImage}\n                suffixElement={suffixElement}\n                text={text}\n                value={value}\n            />\n        ));\n\n        const animate = isAnimating\n            ? { height: 'fit-content', opacity: 1 }\n            : { height: 0, opacity: 0 };\n\n        const style =\n            direction === ComboBoxDirection.TOP ? { transform: 'translateY(-100%)' } : undefined;\n\n        return (\n            <StyledMotionComboBoxBody\n                $browser={browser?.name}\n                animate={animate}\n                $height={height}\n                initial={{ height: 0, opacity: 0 }}\n                $maxHeight={maxHeight}\n                $minWidth={minWidth}\n                style={style}\n                $direction={direction}\n                transition={{ duration: 0.2 }}\n            >\n                {items}\n            </StyledMotionComboBoxBody>\n        );\n    }, [\n        browser?.name,\n        direction,\n        handleSetSelectedItem,\n        height,\n        isAnimating,\n        list,\n        maxHeight,\n        minWidth,\n        selectedItem,\n        shouldShowRoundImage,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledComboBox ref={ref}>\n                {direction === ComboBoxDirection.TOP && comboBoxBody}\n                <StyledComboBoxHeader\n                    $direction={direction}\n                    $minWidth={minWidth}\n                    onClick={handleHeaderClick}\n                    $isOpen={isAnimating}\n                    $isMobile={isMobile}\n                    $isDisabled={isDisabled}\n                >\n                    <StyledComboBoxPlaceholder>\n                        {placeholderImageUrl && (\n                            <StyledComboBoxPlaceholderImage\n                                src={placeholderImageUrl}\n                                shouldShowRoundImage={shouldShowRoundImage}\n                            />\n                        )}\n                        {placeholderText}\n                    </StyledComboBoxPlaceholder>\n                    <StyledComboBoxIconWrapper>\n                        <Icon icons={['fa fa-chevron-down']} />\n                    </StyledComboBoxIconWrapper>\n                </StyledComboBoxHeader>\n                {direction === ComboBoxDirection.BOTTOM && comboBoxBody}\n            </StyledComboBox>\n        ),\n        [\n            comboBoxBody,\n            direction,\n            handleHeaderClick,\n            isAnimating,\n            isDisabled,\n            isMobile,\n            minWidth,\n            placeholderImageUrl,\n            placeholderText,\n            shouldShowRoundImage,\n        ],\n    );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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"}
+{"version":3,"file":"ComboBox.js","names":["getDevice","React","useCallback","useEffect","useMemo","useRef","useState","ComboBoxDirection","calculateContentHeight","calculateContentWidth","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledMotionComboBoxBody","ComboBox","_ref","direction","BOTTOM","isDisabled","list","maxHeight","onSelect","placeholder","selectedItem","shouldShowRoundImage","item","setItem","isAnimating","setIsAnimating","minWidth","setMinWidth","height","setHeight","ref","browser","isMobile","chayns","env","handleClick","event","current","contains","target","document","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","isAtLeastOneItemWithImageGiven","some","_ref2","imageUrl","textArray","map","_ref3","text","push","placeholderImageUrl","undefined","placeholderText","handleHeaderClick","prevState","comboBoxBody","items","_ref4","suffixElement","value","createElement","isSelected","key","animate","opacity","style","TOP","transform","$browser","name","$height","initial","$maxHeight","$minWidth","$direction","transition","duration","onClick","$isOpen","$isMobile","$isDisabled","src","icons","displayName"],"sources":["../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, {\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type CSSProperties,\n    type ReactNode,\n} from 'react';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport { calculateContentHeight, calculateContentWidth } from '../../utils/calculate';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItem {\n    imageUrl?: string;\n    suffixElement?: ReactNode;\n    text: string;\n    value: string | number;\n}\n\nexport type ComboBoxProps = {\n    /**\n     * The direction in which the combobox should open.\n     */\n    direction?: ComboBoxDirection;\n    /**\n     * Whether the combobox should be disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * The list of the items that should be displayed.\n     */\n    list: IComboBoxItem[];\n    /**\n     * The maximum height of the combobox content.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * Function that should be executed when an item is selected.\n     */\n    onSelect?: (comboboxItem: IComboBoxItem) => void;\n    /**\n     * A text that should be displayed when no item is selected.\n     */\n    placeholder: string;\n    /**\n     * An item that should be preselected.\n     */\n    selectedItem?: IComboBoxItem;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n    direction = ComboBoxDirection.BOTTOM,\n    isDisabled = false,\n    list,\n    maxHeight = '300px',\n    onSelect,\n    placeholder,\n    selectedItem,\n    shouldShowRoundImage,\n}) => {\n    const [item, setItem] = useState<IComboBoxItem>();\n    const [isAnimating, setIsAnimating] = useState(false);\n    const [minWidth, setMinWidth] = useState(0);\n    const [height, setHeight] = useState(0);\n\n    const ref = useRef<HTMLDivElement>(null);\n\n    const { browser } = getDevice();\n\n    const { isMobile } = chayns.env;\n\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (ref.current && !ref.current.contains(event.target as Node)) {\n                setIsAnimating(false);\n            }\n        },\n        [ref],\n    );\n\n    /**\n     * This function adds an event listener to the document to close the combobox when the user clicks outside of it\n     */\n    useEffect(() => {\n        document.addEventListener('click', handleClick);\n\n        return () => {\n            document.removeEventListener('click', handleClick);\n        };\n    }, [handleClick, ref]);\n\n    /**\n     * This function sets the selected item\n     */\n    const handleSetSelectedItem = useCallback(\n        (itemToSelect: IComboBoxItem) => {\n            setItem(itemToSelect);\n            setIsAnimating(false);\n\n            if (onSelect) {\n                onSelect(itemToSelect);\n            }\n        },\n        [onSelect],\n    );\n\n    /**\n     * This function calculates the greatest width\n     */\n    useEffect(() => {\n        const isAtLeastOneItemWithImageGiven = list.some(({ imageUrl }) => imageUrl);\n\n        const textArray = list.map(({ text }) => text);\n\n        setHeight(calculateContentHeight(textArray));\n\n        textArray.push(placeholder);\n\n        // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left\n        // 32px = image width + flex gap\n        setMinWidth(calculateContentWidth(list) + 45 + (isAtLeastOneItemWithImageGiven ? 32 : 0));\n    }, [list, placeholder]);\n\n    /**\n     * This function sets the external selected item\n     */\n    useEffect(() => {\n        setIsAnimating(false);\n        setItem(selectedItem);\n    }, [selectedItem]);\n\n    const placeholderImageUrl = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.imageUrl;\n        }\n\n        if (item) {\n            return item.imageUrl;\n        }\n\n        return undefined;\n    }, [item, selectedItem]);\n\n    /**\n     * This function resets the placeholder\n     */\n    const placeholderText = useMemo(() => {\n        let text = placeholder;\n\n        if (selectedItem) {\n            text = selectedItem.text;\n        } else if (item) {\n            text = item.text;\n        }\n\n        return text;\n    }, [item, placeholder, selectedItem]);\n\n    /**\n     * This function opens the content of the combobox\n     */\n    const handleHeaderClick = useCallback(() => {\n        if (!isDisabled) {\n            setIsAnimating((prevState) => !prevState);\n        }\n    }, [isDisabled]);\n\n    const comboBoxBody = useMemo(() => {\n        const items = list.map(({ imageUrl, suffixElement, text, value }) => (\n            <ComboBoxItem\n                imageUrl={imageUrl}\n                isSelected={selectedItem ? value === selectedItem.value : false}\n                key={value}\n                onSelect={handleSetSelectedItem}\n                shouldShowRoundImage={shouldShowRoundImage}\n                suffixElement={suffixElement}\n                text={text}\n                value={value}\n            />\n        ));\n\n        const animate = isAnimating\n            ? { height: 'fit-content', opacity: 1 }\n            : { height: 0, opacity: 0 };\n\n        const style =\n            direction === ComboBoxDirection.TOP ? { transform: 'translateY(-100%)' } : undefined;\n\n        return (\n            <StyledMotionComboBoxBody\n                $browser={browser?.name}\n                animate={animate}\n                $height={height}\n                initial={{ height: 0, opacity: 0 }}\n                $maxHeight={maxHeight}\n                $minWidth={minWidth}\n                style={style}\n                $direction={direction}\n                transition={{ duration: 0.2 }}\n            >\n                {items}\n            </StyledMotionComboBoxBody>\n        );\n    }, [\n        browser?.name,\n        direction,\n        handleSetSelectedItem,\n        height,\n        isAnimating,\n        list,\n        maxHeight,\n        minWidth,\n        selectedItem,\n        shouldShowRoundImage,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledComboBox ref={ref}>\n                {direction === ComboBoxDirection.TOP && comboBoxBody}\n                <StyledComboBoxHeader\n                    $direction={direction}\n                    $minWidth={minWidth}\n                    onClick={handleHeaderClick}\n                    $isOpen={isAnimating}\n                    $isMobile={isMobile}\n                    $isDisabled={isDisabled}\n                >\n                    <StyledComboBoxPlaceholder>\n                        {placeholderImageUrl && (\n                            <StyledComboBoxPlaceholderImage\n                                src={placeholderImageUrl}\n                                shouldShowRoundImage={shouldShowRoundImage}\n                            />\n                        )}\n                        {placeholderText}\n                    </StyledComboBoxPlaceholder>\n                    <StyledComboBoxIconWrapper>\n                        <Icon icons={['fa fa-chevron-down']} />\n                    </StyledComboBoxIconWrapper>\n                </StyledComboBoxHeader>\n                {direction === ComboBoxDirection.BOTTOM && comboBoxBody}\n            </StyledComboBox>\n        ),\n        [\n            comboBoxBody,\n            direction,\n            handleHeaderClick,\n            isAnimating,\n            isDisabled,\n            isMobile,\n            minWidth,\n            placeholderImageUrl,\n            placeholderText,\n            shouldShowRoundImage,\n        ],\n    );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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"}

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

@@ -109,12 +109,16 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
   }, [list, shouldShowContentOnEmptyInput, value]);
   useEffect(() => {
     if (list) {
-      setMatchingItems(searchList({
+      const newMatchingItems = searchList({
         items: list,
         searchString: value
-      }));
+      });
+      if (shouldShowContentOnEmptyInput || value !== '') {
+        setMatchingItems(newMatchingItems);
+        setIsAnimating(newMatchingItems.length !== 0);
+      }
     }
-  }, [list, value]);
+  }, [list, shouldShowContentOnEmptyInput, value]);
 
   /**
    * This function handles changes of the input
@@ -124,11 +128,6 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
       items: list,
       searchString: event.target.value
     });
-    console.debug('SearchBox | handleChange', {
-      searchedItems,
-      list,
-      targetValue: event.target.value
-    });
     if (!shouldShowContentOnEmptyInput && !event.target.value) {
       setMatchingItems([]);
     } else {

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBox.js","names":["getDevice","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","calculateContentHeight","searchList","Input","SearchBoxItem","StyledMotionSearchBoxBody","StyledSearchBox","SearchBox","_ref","ref","placeholder","list","onChange","onBlur","onSelect","selectedId","shouldShowRoundImage","shouldShowContentOnEmptyInput","matchingItems","setMatchingItems","value","setValue","isAnimating","setIsAnimating","height","setHeight","width","setWidth","focusedIndex","setFocusedIndex","boxRef","contentRef","inputRef","browser","handleOutsideClick","event","current","contains","target","document","addEventListener","removeEventListener","textArray","map","_ref2","text","input","getElementById","offsetWidth","selectedItem","find","_ref3","id","handleFocus","items","searchString","handleChange","searchedItems","console","debug","targetValue","length","handleBlur","handleSelect","item","content","sort","a","b","localeCompare","forEach","_ref4","imageUrl","push","createElement","key","handleKeyDown","e","preventDefault","children","newIndex","prevElement","tabIndex","newElement","focus","element","textContent","replace","handleKeyPress","keyCode","clear","onFocus","initial","$browser","name","$height","$width","opacity","animate","transition","duration","type","displayName"],"sources":["../../../src/components/search-box/SearchBox.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    FocusEvent,\n    FocusEventHandler,\n    forwardRef,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport type { ISearchBoxItem } from '../../types/searchBox';\nimport { calculateContentHeight } from '../../utils/calculate';\nimport { searchList } from '../../utils/searchBox';\nimport Input from '../input/Input';\nimport SearchBoxItem from './search-box-item/SearchBoxItem';\nimport { StyledMotionSearchBoxBody, StyledSearchBox } from './SearchBox.styles';\n\nexport type SearchBoxRef = {\n    clear: VoidFunction;\n};\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> = forwardRef<SearchBoxRef, SearchBoxProps>(\n    (\n        {\n            placeholder,\n            list,\n            onChange,\n            onBlur,\n            onSelect,\n            selectedId,\n            shouldShowRoundImage,\n            shouldShowContentOnEmptyInput = true,\n        },\n        ref,\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        const { browser } = getDevice();\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 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) {\n                setValue('');\n            }\n        }, [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        useEffect(() => {\n            if (list) {\n                setMatchingItems(searchList({ items: list, searchString: value }));\n            }\n        }, [list, 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                console.debug('SearchBox | handleChange', {\n                    searchedItems,\n                    list,\n                    targetValue: event.target.value,\n                });\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 +\n                                      (e.key === 'ArrowUp' ? -1 : 1) +\n                                      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({\n                        id: id.replace('search-box-item__', ''),\n                        text: textContent ?? '',\n                    });\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        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        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                            $browser={browser?.name}\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                browser?.name,\n                content,\n                handleBlur,\n                handleChange,\n                handleFocus,\n                height,\n                isAnimating,\n                placeholder,\n                value,\n                width,\n            ],\n        );\n    },\n);\n\nSearchBox.displayName = 'SearchBox';\n\nexport default SearchBox;\n"],"mappings":"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"}
+{"version":3,"file":"SearchBox.js","names":["getDevice","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","calculateContentHeight","searchList","Input","SearchBoxItem","StyledMotionSearchBoxBody","StyledSearchBox","SearchBox","_ref","ref","placeholder","list","onChange","onBlur","onSelect","selectedId","shouldShowRoundImage","shouldShowContentOnEmptyInput","matchingItems","setMatchingItems","value","setValue","isAnimating","setIsAnimating","height","setHeight","width","setWidth","focusedIndex","setFocusedIndex","boxRef","contentRef","inputRef","browser","handleOutsideClick","event","current","contains","target","document","addEventListener","removeEventListener","textArray","map","_ref2","text","input","getElementById","offsetWidth","selectedItem","find","_ref3","id","handleFocus","items","searchString","newMatchingItems","length","handleChange","searchedItems","handleBlur","handleSelect","item","content","sort","a","b","localeCompare","forEach","_ref4","imageUrl","push","createElement","key","handleKeyDown","e","preventDefault","children","newIndex","prevElement","tabIndex","newElement","focus","element","textContent","replace","handleKeyPress","keyCode","clear","onFocus","initial","$browser","name","$height","$width","opacity","animate","transition","duration","type","displayName"],"sources":["../../../src/components/search-box/SearchBox.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    FocusEvent,\n    FocusEventHandler,\n    forwardRef,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport type { ISearchBoxItem } from '../../types/searchBox';\nimport { calculateContentHeight } from '../../utils/calculate';\nimport { searchList } from '../../utils/searchBox';\nimport Input from '../input/Input';\nimport SearchBoxItem from './search-box-item/SearchBoxItem';\nimport { StyledMotionSearchBoxBody, StyledSearchBox } from './SearchBox.styles';\n\nexport type SearchBoxRef = {\n    clear: VoidFunction;\n};\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> = forwardRef<SearchBoxRef, SearchBoxProps>(\n    (\n        {\n            placeholder,\n            list,\n            onChange,\n            onBlur,\n            onSelect,\n            selectedId,\n            shouldShowRoundImage,\n            shouldShowContentOnEmptyInput = true,\n        },\n        ref,\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        const { browser } = getDevice();\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 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) {\n                setValue('');\n            }\n        }, [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        useEffect(() => {\n            if (list) {\n                const newMatchingItems = searchList({ items: list, searchString: value });\n\n                if (shouldShowContentOnEmptyInput || value !== '') {\n                    setMatchingItems(newMatchingItems);\n                    setIsAnimating(newMatchingItems.length !== 0);\n                }\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 +\n                                      (e.key === 'ArrowUp' ? -1 : 1) +\n                                      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({\n                        id: id.replace('search-box-item__', ''),\n                        text: textContent ?? '',\n                    });\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        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        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                            $browser={browser?.name}\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                browser?.name,\n                content,\n                handleBlur,\n                handleChange,\n                handleFocus,\n                height,\n                isAnimating,\n                placeholder,\n                value,\n                width,\n            ],\n        );\n    },\n);\n\nSearchBox.displayName = 'SearchBox';\n\nexport default SearchBox;\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.486",
+    "version": "5.0.0-beta.488",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -45,7 +45,7 @@
         "@babel/preset-env": "^7.23.9",
         "@babel/preset-react": "^7.23.3",
         "@babel/preset-typescript": "^7.23.3",
-        "@types/react": "^18.2.57",
+        "@types/react": "^18.2.60",
         "@types/react-dom": "^18.2.19",
         "@types/styled-components": "^5.1.34",
         "@types/uuid": "^9.0.8",
@@ -73,5 +73,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "ee8abbc897d88e1836782b27cef9aafdad19adac"
+    "gitHead": "6840671c95ab92f3f23b682ef0ec54fd9067a139"
 }