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

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.487",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -73,5 +73,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "ee8abbc897d88e1836782b27cef9aafdad19adac"
+    "gitHead": "23f9beee740014f841f790c74273d36a907c701b"
 }