@chayns-components/core 5.0.0-beta.972 → 5.0.0-beta.974

package/lib/cjs/components/checkbox/Checkbox.js

@@ -18,7 +18,7 @@ const Checkbox = ({
   onChange,
   shouldShowAsSwitch,
   shouldShowCentered = false,
-  shouldChangeOnLabelClick = false
+  shouldChangeOnLabelClick = true
 }) => {
   const [isActive, setIsActive] = (0, _react.useState)(isChecked ?? false);
   const handleChange = (0, _react.useCallback)(event => {

package/lib/cjs/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["_react","_interopRequireWildcard","require","_uuid","_calculate","_Checkbox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Checkbox","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","shouldShowCentered","shouldChangeOnLabelClick","isActive","setIsActive","useState","handleChange","useCallback","event","target","checked","uuid","useUuid","lineHeight","useMemo","undefined","getHeightOfSingleTextLine","createElement","StyledCheckbox","StyledCheckboxInput","disabled","id","type","StyledCheckboxBox","htmlFor","$isChecked","$isDisabled","$shouldShowAsSwitch","$lineHeight","StyledCheckboxLabel","className","$shouldChangeOnLabelClick","displayName","_default","exports"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    ReactElement,\n    useCallback,\n    useMemo,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport {\n    StyledCheckbox,\n    StyledCheckboxBox,\n    StyledCheckboxInput,\n    StyledCheckboxLabel,\n} from './Checkbox.styles';\n\nexport type CheckboxProps = {\n    /**\n     * Text for checkbox or switch\n     */\n    children?: ReactElement | string;\n    /**\n     * Indicates whether the checkbox or switch is selected\n     */\n    isChecked?: boolean;\n    /**\n     * Disables the checkbox or switch so it cannot be toggled\n     */\n    isDisabled?: boolean;\n    /**\n     * Classname for the label\n     */\n    labelClassName?: string;\n    /**\n     * Function to be executed if the checked value changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Whether the label should change the state\n     */\n    shouldChangeOnLabelClick?: boolean;\n    /**\n     * Changes the design to use switch instead of checkbox\n     */\n    shouldShowAsSwitch?: boolean;\n    /**\n     * Whether the Checkbox should be displayed centered to the label or at the top\n     */\n    shouldShowCentered?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n    children,\n    isChecked,\n    isDisabled,\n    labelClassName,\n    onChange,\n    shouldShowAsSwitch,\n    shouldShowCentered = false,\n    shouldChangeOnLabelClick = false,\n}) => {\n    const [isActive, setIsActive] = useState(isChecked ?? false);\n\n    const handleChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setIsActive(event.target.checked);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [onChange],\n    );\n\n    const uuid = useUuid();\n\n    const lineHeight = useMemo(\n        () => (!children || shouldShowCentered ? undefined : getHeightOfSingleTextLine()),\n        [children, shouldShowCentered],\n    );\n\n    return (\n        <StyledCheckbox>\n            <StyledCheckboxInput\n                checked={isChecked}\n                disabled={isDisabled}\n                id={uuid}\n                onChange={handleChange}\n                type=\"checkbox\"\n            />\n            <StyledCheckboxBox\n                htmlFor={uuid}\n                $isChecked={isChecked ?? isActive}\n                $isDisabled={isDisabled}\n                $shouldShowAsSwitch={shouldShowAsSwitch}\n                $lineHeight={lineHeight}\n            />\n            <StyledCheckboxLabel\n                className={labelClassName}\n                $isDisabled={isDisabled}\n                $shouldChangeOnLabelClick={shouldChangeOnLabelClick}\n                htmlFor={shouldChangeOnLabelClick ? uuid : undefined}\n            >\n                {children}\n            </StyledCheckboxLabel>\n        </StyledCheckbox>\n    );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Checkbox.js","names":["_react","_interopRequireWildcard","require","_uuid","_calculate","_Checkbox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Checkbox","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","shouldShowCentered","shouldChangeOnLabelClick","isActive","setIsActive","useState","handleChange","useCallback","event","target","checked","uuid","useUuid","lineHeight","useMemo","undefined","getHeightOfSingleTextLine","createElement","StyledCheckbox","StyledCheckboxInput","disabled","id","type","StyledCheckboxBox","htmlFor","$isChecked","$isDisabled","$shouldShowAsSwitch","$lineHeight","StyledCheckboxLabel","className","$shouldChangeOnLabelClick","displayName","_default","exports"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    ReactElement,\n    useCallback,\n    useMemo,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport {\n    StyledCheckbox,\n    StyledCheckboxBox,\n    StyledCheckboxInput,\n    StyledCheckboxLabel,\n} from './Checkbox.styles';\n\nexport type CheckboxProps = {\n    /**\n     * Text for checkbox or switch\n     */\n    children?: ReactElement | string;\n    /**\n     * Indicates whether the checkbox or switch is selected\n     */\n    isChecked?: boolean;\n    /**\n     * Disables the checkbox or switch so it cannot be toggled\n     */\n    isDisabled?: boolean;\n    /**\n     * Classname for the label\n     */\n    labelClassName?: string;\n    /**\n     * Function to be executed if the checked value changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Whether the label should change the state of the checkbox\n     */\n    shouldChangeOnLabelClick?: boolean;\n    /**\n     * Changes the design to use switch instead of checkbox\n     */\n    shouldShowAsSwitch?: boolean;\n    /**\n     * Whether the Checkbox should be displayed centered to the label or at the top\n     */\n    shouldShowCentered?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n    children,\n    isChecked,\n    isDisabled,\n    labelClassName,\n    onChange,\n    shouldShowAsSwitch,\n    shouldShowCentered = false,\n    shouldChangeOnLabelClick = true,\n}) => {\n    const [isActive, setIsActive] = useState(isChecked ?? false);\n\n    const handleChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setIsActive(event.target.checked);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [onChange],\n    );\n\n    const uuid = useUuid();\n\n    const lineHeight = useMemo(\n        () => (!children || shouldShowCentered ? undefined : getHeightOfSingleTextLine()),\n        [children, shouldShowCentered],\n    );\n\n    return (\n        <StyledCheckbox>\n            <StyledCheckboxInput\n                checked={isChecked}\n                disabled={isDisabled}\n                id={uuid}\n                onChange={handleChange}\n                type=\"checkbox\"\n            />\n            <StyledCheckboxBox\n                htmlFor={uuid}\n                $isChecked={isChecked ?? isActive}\n                $isDisabled={isDisabled}\n                $shouldShowAsSwitch={shouldShowAsSwitch}\n                $lineHeight={lineHeight}\n            />\n            <StyledCheckboxLabel\n                className={labelClassName}\n                $isDisabled={isDisabled}\n                $shouldChangeOnLabelClick={shouldChangeOnLabelClick}\n                htmlFor={shouldChangeOnLabelClick ? uuid : undefined}\n            >\n                {children}\n            </StyledCheckboxLabel>\n        </StyledCheckbox>\n    );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/checkbox/Checkbox.styles.js

@@ -124,5 +124,6 @@ const StyledCheckboxLabel = exports.StyledCheckboxLabel = _styledComponents.defa
   $isDisabled
 }) => $isDisabled ? 0.5 : 1};
     transition: opacity 0.2s ease;
+    user-select: none;
 `;
 //# sourceMappingURL=Checkbox.styles.js.map

package/lib/cjs/components/checkbox/Checkbox.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_checkBox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledCheckbox","exports","styled","div","StyledCheckboxInput","input","StyledCheckboxBox","label","theme","text","$isDisabled","$shouldShowAsSwitch","$isChecked","$lineHeight","css","getCheckBoxPosition","Number","fontSize","green","red","StyledCheckboxLabel","$shouldChangeOnLabelClick"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { getCheckBoxPosition } from '../../utils/checkBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n    align-items: center;\n    display: flex;\n    position: relative;\n    width: 100%;\n    min-height: 20px;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n    display: none;\n`;\n\ntype StyledCheckboxBoxProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $isChecked?: CheckboxProps['isChecked'];\n    $lineHeight?: number;\n}>;\n\nexport const StyledCheckboxBox = styled.label<StyledCheckboxBoxProps>`\n    color: ${({ theme }: StyledCheckboxBoxProps) => theme.text};\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    padding-left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '48px' : '20px')};\n    transition: opacity 0.2s ease;\n    user-select: none;\n\n    &:after {\n        ${({ $isChecked, $shouldShowAsSwitch, $lineHeight, theme }: StyledCheckboxBoxProps) =>\n            $shouldShowAsSwitch\n                ? css`\n                      background-color: white;\n                      border-radius: 50%;\n                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n                      height: 16px;\n                      left: 7px;\n                      top: ${$lineHeight\n                          ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 6}px`\n                          : '50%'};\n                      transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);\n                      transition: transform 0.2s ease;\n                      width: 16px;\n                  `\n                : css`\n                      border-right: 2px solid #fff;\n                      border-bottom: 2px solid #fff;\n                      height: 10px;\n                      left: 2px;\n                      opacity: ${$isChecked ? 1 : 0};\n                      top: ${$lineHeight\n                          ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 5}px`\n                          : 'calc(50% - 2px)'};\n                      transform: rotateZ(37deg) translateY(-50%);\n                      transition: opacity 0.2s ease;\n                      width: 5.5px;\n                  `}\n\n        content: ' ';\n        position: absolute;\n    }\n\n    &:before {\n        background-color: ${({\n            $isChecked,\n            $shouldShowAsSwitch,\n            theme,\n        }: StyledCheckboxBoxProps) => {\n            if ($shouldShowAsSwitch) {\n                return $isChecked ? theme.green : theme.red;\n            }\n\n            return $isChecked ? theme['408'] : theme['403'];\n        }};\n\n        ${({ $shouldShowAsSwitch, theme }) =>\n            !$shouldShowAsSwitch &&\n            css`\n                border: 1px solid rgba(${theme['409-rgb']}, 0.5);\n            `}\n\n        border-radius: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '100px' : 0)};\n        content: ' ';\n        height: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '13px' : '15px')};\n        left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '10px' : 0)};\n        position: absolute;\n        transition: background-color 0.2s ease;\n        width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '28px' : '15px')};\n        ${({ $lineHeight, theme, $shouldShowAsSwitch }: StyledCheckboxBoxProps) =>\n            $lineHeight\n                ? css`\n                      top: ${getCheckBoxPosition(Number(theme.fontSize)) ??\n                      5 + ($shouldShowAsSwitch ? 1 : 0)}px;\n                  `\n                : css`\n                      top: 50%;\n                      transform: translateY(-50%);\n                  `}\n    }\n}\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $shouldChangeOnLabelClick?: CheckboxProps['shouldChangeOnLabelClick'];\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n    color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n    cursor: ${({ $shouldChangeOnLabelClick }) =>\n        !$shouldChangeOnLabelClick ? 'default' : 'pointer'};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    transition: opacity 0.2s ease;\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Checkbox.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_checkBox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledCheckbox","exports","styled","div","StyledCheckboxInput","input","StyledCheckboxBox","label","theme","text","$isDisabled","$shouldShowAsSwitch","$isChecked","$lineHeight","css","getCheckBoxPosition","Number","fontSize","green","red","StyledCheckboxLabel","$shouldChangeOnLabelClick"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { getCheckBoxPosition } from '../../utils/checkBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n    align-items: center;\n    display: flex;\n    position: relative;\n    width: 100%;\n    min-height: 20px;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n    display: none;\n`;\n\ntype StyledCheckboxBoxProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $isChecked?: CheckboxProps['isChecked'];\n    $lineHeight?: number;\n}>;\n\nexport const StyledCheckboxBox = styled.label<StyledCheckboxBoxProps>`\n    color: ${({ theme }: StyledCheckboxBoxProps) => theme.text};\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    padding-left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '48px' : '20px')};\n    transition: opacity 0.2s ease;\n    user-select: none;\n\n    &:after {\n        ${({ $isChecked, $shouldShowAsSwitch, $lineHeight, theme }: StyledCheckboxBoxProps) =>\n            $shouldShowAsSwitch\n                ? css`\n                      background-color: white;\n                      border-radius: 50%;\n                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n                      height: 16px;\n                      left: 7px;\n                      top: ${$lineHeight\n                          ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 6}px`\n                          : '50%'};\n                      transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);\n                      transition: transform 0.2s ease;\n                      width: 16px;\n                  `\n                : css`\n                      border-right: 2px solid #fff;\n                      border-bottom: 2px solid #fff;\n                      height: 10px;\n                      left: 2px;\n                      opacity: ${$isChecked ? 1 : 0};\n                      top: ${$lineHeight\n                          ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 5}px`\n                          : 'calc(50% - 2px)'};\n                      transform: rotateZ(37deg) translateY(-50%);\n                      transition: opacity 0.2s ease;\n                      width: 5.5px;\n                  `}\n\n        content: ' ';\n        position: absolute;\n    }\n\n    &:before {\n        background-color: ${({\n            $isChecked,\n            $shouldShowAsSwitch,\n            theme,\n        }: StyledCheckboxBoxProps) => {\n            if ($shouldShowAsSwitch) {\n                return $isChecked ? theme.green : theme.red;\n            }\n\n            return $isChecked ? theme['408'] : theme['403'];\n        }};\n\n        ${({ $shouldShowAsSwitch, theme }) =>\n            !$shouldShowAsSwitch &&\n            css`\n                border: 1px solid rgba(${theme['409-rgb']}, 0.5);\n            `}\n\n        border-radius: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '100px' : 0)};\n        content: ' ';\n        height: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '13px' : '15px')};\n        left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '10px' : 0)};\n        position: absolute;\n        transition: background-color 0.2s ease;\n        width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '28px' : '15px')};\n        ${({ $lineHeight, theme, $shouldShowAsSwitch }: StyledCheckboxBoxProps) =>\n            $lineHeight\n                ? css`\n                      top: ${getCheckBoxPosition(Number(theme.fontSize)) ??\n                      5 + ($shouldShowAsSwitch ? 1 : 0)}px;\n                  `\n                : css`\n                      top: 50%;\n                      transform: translateY(-50%);\n                  `}\n    }\n}\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $shouldChangeOnLabelClick?: CheckboxProps['shouldChangeOnLabelClick'];\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n    color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n    cursor: ${({ $shouldChangeOnLabelClick }) =>\n        !$shouldChangeOnLabelClick ? 'default' : 'pointer'};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    transition: opacity 0.2s ease;\n    user-select: none;\n`;\n"],"mappings":"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","ignoreList":[]}

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

@@ -303,11 +303,9 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
       setMatchingListsItems(filteredMatchingListItems);
       if (filteredMatchingListItems.length !== 0) {
         handleOpen();
-      } else {
-        handleClose();
       }
     }
-  }, [activeList, handleClose, handleOpen, shouldAddInputToList, shouldShowContentOnEmptyInput, value]);
+  }, [activeList, handleOpen, shouldAddInputToList, shouldShowContentOnEmptyInput, value]);
 
   /**
    * This function filters the lists by input
@@ -403,18 +401,16 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
       setMatchingListsItems([]);
     } else {
       setMatchingListsItems(filteredLists);
-      if (filteredLists.length !== 0) {
-        handleOpen();
-      } else {
-        handleClose();
-      }
+    }
+    if (filteredLists.length !== 0) {
+      handleOpen();
     }
     setValue(event.target.value);
     setInputToListValue(event.target.value);
     if (typeof onChange === 'function') {
       onChange(event);
     }
-  }, [activeList, handleClose, handleOpen, onChange, shouldAddInputToList, shouldShowContentOnEmptyInput]);
+  }, [activeList, handleOpen, onChange, shouldAddInputToList, shouldShowContentOnEmptyInput]);
 
   /**
    * This function handles the blur event of the input
@@ -486,14 +482,9 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
     }
     return items;
   }, [matchingListsItems, shouldAddInputToList, inputToListValue, hasMultipleGroups, shouldShowRoundImage, handleSelect]);
-  (0, _react.useEffect)(() => {
-    if (content.length > 0) {
-      handleOpen();
-    }
-  }, [content.length, handleOpen]);
   (0, _react.useEffect)(() => {
     const handleKeyDown = e => {
-      if (!isAnimating) {
+      if (!isAnimating || matchingListsItems.length === 0) {
         return;
       }
       if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
@@ -553,7 +544,7 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
     return () => {
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [filteredChildrenArray, focusedIndex, handleSelect, isAnimating]);
+  }, [filteredChildrenArray, focusedIndex, handleSelect, isAnimating, matchingListsItems.length]);
   const handleKeyPress = (0, _react.useCallback)(event => {
     if (event.keyCode === 27) {
       setMatchingListsItems([]);
@@ -574,7 +565,7 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
     }
     setPortal(() => /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
       initial: false
-    }, isAnimating && /*#__PURE__*/_react.default.createElement(_SearchBoxBody.default, {
+    }, isAnimating && matchingListsItems.length !== 0 && /*#__PURE__*/_react.default.createElement(_SearchBoxBody.default, {
       filterButtons: filterButtons,
       selectedGroups: groups,
       width: width,
@@ -585,7 +576,7 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
       onGroupSelect: handleFilterButtonsGroupSelect,
       shouldHideFilterButtons: shouldHideFilterButtons
     }, content)), newContainer));
-  }, [browser === null || browser === void 0 ? void 0 : browser.name, newContainer, content, filterButtons, groups, height, internalCoordinates, isAnimating, width, shouldHideFilterButtons]);
+  }, [browser === null || browser === void 0 ? void 0 : browser.name, newContainer, content, filterButtons, groups, height, internalCoordinates, isAnimating, width, shouldHideFilterButtons, matchingListsItems.length]);
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_SearchBox.StyledSearchBox, {
     ref: boxRef
   }, /*#__PURE__*/_react.default.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBox.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_styledComponents","_calculate","_searchBox","_Icon","_interopRequireDefault","_Input","_GroupName","_SearchBoxBody","_SearchBoxItem","_SearchBoxItem2","_SearchBox","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SearchBox","forwardRef","placeholder","leftIcons","lists","onChange","onBlur","onSelect","onKeyDown","selectedId","container","shouldHideFilterButtons","shouldShowRoundImage","shouldShowContentOnEmptyInput","shouldAddInputToList","shouldShowToggleIcon","ref","matchingListsItems","setMatchingListsItems","useState","selectedImage","setSelectedImage","value","setValue","isAnimating","setIsAnimating","height","setHeight","width","setWidth","focusedIndex","setFocusedIndex","hasMultipleGroups","setHasMultipleGroups","length","filteredChildrenArray","setFilteredChildrenArray","inputToListValue","setInputToListValue","groups","setGroups","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","newContainer","setNewContainer","boxRef","useRef","contentRef","inputRef","theme","useTheme","browser","getDevice","useEffect","current","el","element","closest","Element","getBoundingClientRect","filterButtons","useMemo","items","forEach","groupName","push","id","text","activeList","newLists","list","includes","newMatchingItems","newList","searchList","searchString","undefined","filteredMatchingListItems","map","filter","item","handleOpen","useCallback","bodyHeight","handleClose","handleFilterButtonsGroupSelect","keys","handleOutsideClick","event","contains","target","document","addEventListener","window","removeEventListener","textArray","calculateContentHeight","input","getElementById","getInputWidth","offsetWidth","ResizeObserver","observe","selectedItem","find","imageUrl","createElement","StyledSearchBoxItemImage","src","$shouldShowRoundImage","handleFocus","toLowerCase","handleClick","rightElement","StyledSearchBoxIcon","onClick","icons","color","leftElement","StyledSearchBoxLeftWrapper","handleChange","filteredLists","handleBlur","handleSelect","newItem","replace","content","index","key","name","handleKeyDown","_contentRef$current","_childrenArray$find","preventDefault","children","childrenArray","Array","from","newChildren","child","startsWith","filteredChildren","dataset","isgroupname","newIndex","prevElement","tabIndex","newElement","focus","_element$children$","textContent","attributes","_element$children$2","nodeValue","handleKeyPress","keyCode","useImperativeHandle","clear","createPortal","AnimatePresence","initial","selectedGroups","coordinates","onGroupSelect","StyledSearchBox","onFocus","displayName","_default","exports"],"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    KeyboardEventHandler,\n    ReactElement,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useTheme } from 'styled-components';\nimport type { IFilterButtonItem } from '../../types/filterButtons';\nimport type { ISearchBoxItem, ISearchBoxItems } from '../../types/searchBox';\nimport { calculateContentHeight } from '../../utils/calculate';\nimport { searchList } from '../../utils/searchBox';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport Input from '../input/Input';\nimport GroupName from './group-name/GroupName';\nimport SearchBoxBody from './search-box-body/SearchBoxBody';\nimport SearchBoxItem from './search-box-item/SearchBoxItem';\nimport { StyledSearchBoxItemImage } from './search-box-item/SearchBoxItem.styles';\nimport {\n    StyledSearchBox,\n    StyledSearchBoxIcon,\n    StyledSearchBoxLeftWrapper,\n} from './SearchBox.styles';\n\nexport type SearchBoxRef = {\n    clear: VoidFunction;\n};\n\nexport type SearchBoxProps = {\n    /**\n     * The element where the content of the `ComboBox` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * An optional icon that is displayed inside the left side of the input.\n     */\n    leftIcons?: string[];\n    /**\n     * List of groups with items that can be searched. It is possible to give only one list; if multiple lists are provided, the 'group name' parameter becomes mandatory.\n     */\n    lists: ISearchBoxItems[];\n    /**\n     * The 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 that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when an item is selected.\n     */\n    onSelect?: (item: ISearchBoxItem) => void;\n    /**\n     * Control the selected item. If you use this prop, make sure to update it when the user selects an item.\n     */\n    selectedId?: string;\n    /**\n     * If true, the value in the Input is displayed in the list.\n     */\n    shouldAddInputToList: boolean;\n    /**\n     * If true, the filter buttons are hidden.\n     */\n    shouldHideFilterButtons?: boolean;\n    /**\n     * Whether the full list of items should be displayed if the input is empty.\n     */\n    shouldShowContentOnEmptyInput?: boolean;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * Whether the icon to open and close the list should be displayed.\n     */\n    shouldShowToggleIcon?: boolean;\n};\n\nconst SearchBox: FC<SearchBoxProps> = forwardRef<SearchBoxRef, SearchBoxProps>(\n    (\n        {\n            placeholder,\n            leftIcons,\n            lists,\n            onChange,\n            onBlur,\n            onSelect,\n            onKeyDown,\n            selectedId,\n            container,\n            shouldHideFilterButtons = false,\n            shouldShowRoundImage,\n            shouldShowContentOnEmptyInput = true,\n            shouldAddInputToList = true,\n            shouldShowToggleIcon = false,\n        },\n        ref,\n    ) => {\n        const [matchingListsItems, setMatchingListsItems] = useState<ISearchBoxItems[]>(lists);\n        const [selectedImage, setSelectedImage] = useState<ReactElement>();\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        const [hasMultipleGroups, setHasMultipleGroups] = useState<boolean>(lists.length > 1);\n        const [filteredChildrenArray, setFilteredChildrenArray] = useState<Element[]>();\n        const [inputToListValue, setInputToListValue] = useState<string>('');\n        const [groups, setGroups] = useState<string[]>(['all']);\n        const [portal, setPortal] = useState<ReactPortal>();\n        const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n            x: 0,\n            y: 0,\n        });\n        const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n        const boxRef = useRef<HTMLDivElement>(null);\n        const contentRef = useRef<HTMLDivElement>(null);\n        const inputRef = useRef<HTMLInputElement | null>(null);\n\n        const theme = useTheme();\n\n        const { browser } = getDevice();\n\n        useEffect(() => {\n            if (boxRef.current && !container) {\n                const el = boxRef.current as HTMLElement;\n\n                const element = el.closest('.dialog-inner') || el.closest('body');\n\n                setNewContainer(element);\n            }\n        }, [container]);\n\n        useEffect(() => {\n            if (container instanceof Element) {\n                setNewContainer(container);\n            }\n        }, [container]);\n\n        useEffect(() => {\n            if (boxRef.current) {\n                const { x, y } = boxRef.current.getBoundingClientRect();\n\n                setInternalCoordinates({\n                    x,\n                    y,\n                });\n            }\n        }, []);\n\n        /**\n         * Checks if Lists are smaller then 1\n         */\n        useEffect(() => {\n            setHasMultipleGroups(lists.length > 1);\n        }, [lists]);\n\n        const filterButtons = useMemo(() => {\n            const items: IFilterButtonItem[] = [];\n\n            if (lists.length <= 1) {\n                return items;\n            }\n\n            lists.forEach(({ groupName }) => {\n                if (groupName) {\n                    items.push({\n                        id: groupName,\n                        text: groupName,\n                    });\n                }\n            });\n\n            return items;\n        }, [lists]);\n\n        /**\n         * Filters the lists by the FilterButtons\n         */\n        const activeList = useMemo(() => {\n            let newLists: ISearchBoxItems[] = [];\n\n            if (groups[0] === 'all') {\n                newLists = lists;\n            } else {\n                lists.forEach((list) => {\n                    if (list.groupName && groups.includes(list.groupName)) {\n                        newLists.push(list);\n                    }\n                });\n            }\n\n            const newMatchingItems: ISearchBoxItems[] = [];\n\n            newLists.forEach(({ list, groupName }) => {\n                const newList = searchList({ items: list, searchString: value });\n\n                if (newList.length > 0) {\n                    newMatchingItems.push({\n                        groupName,\n                        list: newList,\n                    });\n                }\n            });\n\n            if (newMatchingItems.length === 0 && shouldAddInputToList) {\n                newMatchingItems.push({\n                    groupName: undefined,\n                    list: [],\n                });\n            }\n\n            const filteredMatchingListItems = newMatchingItems.map(({ list, groupName }) => ({\n                groupName,\n                list: list.filter(\n                    (item) => !(newMatchingItems.length === 1 && item.text === value),\n                ),\n            }));\n\n            setMatchingListsItems(filteredMatchingListItems);\n\n            return newLists;\n        }, [groups, lists, shouldAddInputToList, value]);\n\n        const handleOpen = useCallback(() => {\n            if (boxRef.current) {\n                const { x, y, height: bodyHeight } = boxRef.current.getBoundingClientRect();\n\n                setInternalCoordinates({\n                    x,\n                    y: y + bodyHeight,\n                });\n\n                setIsAnimating(true);\n            }\n        }, []);\n\n        const handleClose = useCallback(() => {\n            setIsAnimating(false);\n        }, []);\n\n        const handleFilterButtonsGroupSelect = (keys: string[]) => {\n            setGroups(keys.length === 0 ? ['all'] : keys);\n        };\n\n        /**\n         * This function closes the list of items\n         */\n        const handleOutsideClick = useCallback(\n            (event: MouseEvent) => {\n                if (\n                    boxRef.current &&\n                    !boxRef.current.contains(event.target as Node) &&\n                    contentRef.current &&\n                    !contentRef.current.contains(event.target as Node)\n                ) {\n                    handleClose();\n                }\n            },\n            [handleClose],\n        );\n\n        /**\n         * This hook listens for clicks\n         */\n        useEffect(() => {\n            document.addEventListener('click', handleOutsideClick);\n            window.addEventListener('blur', () => handleClose());\n\n            return () => {\n                document.removeEventListener('click', handleOutsideClick);\n                window.addEventListener('blur', () => handleClose());\n            };\n        }, [handleOutsideClick, boxRef, handleClose]);\n\n        /**\n         * This hook calculates the height\n         */\n        useEffect(() => {\n            const textArray: string[] = [];\n\n            activeList.forEach(({ list, groupName }) => {\n                list.forEach(({ text }) => textArray.push(text));\n                if (!groupName) {\n                    return;\n                }\n                textArray.push(groupName);\n            });\n\n            if (shouldAddInputToList && inputToListValue !== '') {\n                textArray.push(inputToListValue);\n            }\n\n            setHeight(calculateContentHeight(textArray));\n        }, [inputToListValue, activeList, placeholder, shouldAddInputToList]);\n\n        /**\n         * This hook calculates the width\n         */\n        useEffect(() => {\n            const input = document.getElementById('search_box_input');\n\n            const getInputWidth = () => {\n                if (input) {\n                    setWidth(input.offsetWidth);\n                }\n            };\n\n            if (input) {\n                new ResizeObserver(getInputWidth).observe(input);\n            }\n        }, []);\n\n        useEffect(() => {\n            if (selectedId) {\n                activeList.forEach(({ list }) => {\n                    const selectedItem = list.find(({ id }) => id === selectedId);\n                    if (selectedItem) {\n                        setValue(selectedItem.text);\n\n                        if (selectedItem.imageUrl) {\n                            setSelectedImage(\n                                <StyledSearchBoxItemImage\n                                    src={selectedItem.imageUrl}\n                                    $shouldShowRoundImage={shouldShowRoundImage}\n                                />,\n                            );\n                        }\n                    }\n                });\n            }\n        }, [activeList, selectedId, shouldShowRoundImage]);\n\n        /**\n         * This hook resets the value if the selectedId changes to undefined. This is an own useEffect because the value\n         * should not be reset if the list changes and the selectedId is still undefined.\n         */\n        useEffect(() => {\n            if (!selectedId) {\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                const newMatchingItems: ISearchBoxItems[] = [];\n\n                activeList.forEach(({ list, groupName }) => {\n                    const newList = searchList({ items: list, searchString: value });\n\n                    if (newList.length > 0) {\n                        newMatchingItems.push({\n                            groupName,\n                            list: newList,\n                        });\n                    }\n                });\n\n                if (newMatchingItems.length === 0 && shouldAddInputToList) {\n                    newMatchingItems.push({\n                        groupName: undefined,\n                        list: [],\n                    });\n                }\n\n                const filteredMatchingListItems = newMatchingItems.map(({ list, groupName }) => ({\n                    groupName,\n                    list: list.filter(\n                        (item) => !(newMatchingItems.length === 1 && item.text === value),\n                    ),\n                }));\n\n                setMatchingListsItems(filteredMatchingListItems);\n\n                if (filteredMatchingListItems.length !== 0) {\n                    handleOpen();\n                } else {\n                    handleClose();\n                }\n            }\n        }, [\n            activeList,\n            handleClose,\n            handleOpen,\n            shouldAddInputToList,\n            shouldShowContentOnEmptyInput,\n            value,\n        ]);\n\n        /**\n         * This function filters the lists by input\n         */\n\n        useEffect(() => {\n            const newMatchingItems: ISearchBoxItems[] = [];\n\n            activeList.forEach(({ list, groupName }) => {\n                const newList = searchList({ items: list, searchString: value });\n\n                if (newList.length > 0) {\n                    newMatchingItems.push({\n                        groupName,\n                        list: newList,\n                    });\n                }\n            });\n\n            if (newMatchingItems.length === 0 && shouldAddInputToList) {\n                newMatchingItems.push({\n                    groupName: undefined,\n                    list: [],\n                });\n            }\n\n            if (shouldAddInputToList && inputToListValue !== '') {\n                newMatchingItems.forEach(({ list }) => {\n                    list.forEach(({ text }) => {\n                        if (text.toLowerCase() === inputToListValue.toLowerCase()) {\n                            setInputToListValue('');\n                        }\n                    });\n                });\n            }\n        }, [\n            inputToListValue,\n            activeList,\n            shouldAddInputToList,\n            shouldShowContentOnEmptyInput,\n            value,\n        ]);\n\n        const handleClick = useCallback(() => {\n            if (isAnimating) {\n                handleClose();\n            } else {\n                handleOpen();\n            }\n        }, [handleClose, handleOpen, isAnimating]);\n\n        const rightElement = useMemo(() => {\n            if (!shouldShowToggleIcon) {\n                return undefined;\n            }\n\n            return (\n                <StyledSearchBoxIcon onClick={handleClick}>\n                    <Icon icons={['fa fa-chevron-down']} color={theme['006'] as string} />\n                </StyledSearchBoxIcon>\n            );\n        }, [handleClick, shouldShowToggleIcon, theme]);\n\n        const leftElement = useMemo(\n            () => (\n                <StyledSearchBoxLeftWrapper>\n                    {leftIcons && <Icon icons={leftIcons} />}\n                    {selectedImage && selectedImage}\n                </StyledSearchBoxLeftWrapper>\n            ),\n            [leftIcons, selectedImage],\n        );\n\n        /**\n         * This function handles changes of the input\n         */\n        const handleChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                const filteredLists: ISearchBoxItems[] = [];\n\n                activeList.forEach(({ list, groupName }) => {\n                    const newList = searchList({ items: list, searchString: event.target.value });\n\n                    if (newList.length > 0) {\n                        filteredLists.push({\n                            groupName,\n                            list: newList,\n                        });\n                    }\n                });\n\n                if (filteredLists.length === 0 && shouldAddInputToList) {\n                    filteredLists.push({\n                        groupName: undefined,\n                        list: [],\n                    });\n                }\n\n                setSelectedImage(undefined);\n\n                if (!shouldShowContentOnEmptyInput && !event.target.value) {\n                    setMatchingListsItems([]);\n                } else {\n                    setMatchingListsItems(filteredLists);\n\n                    if (filteredLists.length !== 0) {\n                        handleOpen();\n                    } else {\n                        handleClose();\n                    }\n                }\n\n                setValue(event.target.value);\n                setInputToListValue(event.target.value);\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n            },\n            [\n                activeList,\n                handleClose,\n                handleOpen,\n                onChange,\n                shouldAddInputToList,\n                shouldShowContentOnEmptyInput,\n            ],\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                const newItem = {\n                    ...item,\n                    text: item.text.replace('<b>', '').replace('</b>', '').replace('</b', ''),\n                };\n\n                setValue(newItem.text);\n                handleClose();\n\n                setSelectedImage(\n                    newItem.imageUrl ? (\n                        <StyledSearchBoxItemImage\n                            src={newItem.imageUrl}\n                            $shouldShowRoundImage={shouldShowRoundImage}\n                        />\n                    ) : undefined,\n                );\n\n                setMatchingListsItems([]);\n\n                if (typeof onSelect === 'function') {\n                    onSelect(newItem);\n                }\n            },\n            [handleClose, onSelect, shouldShowRoundImage],\n        );\n\n        const content = useMemo(() => {\n            const items: ReactElement[] = [];\n\n            matchingListsItems.forEach(({ groupName, list }, index) => {\n                if (hasMultipleGroups) {\n                    if (list.length <= 0) {\n                        return;\n                    }\n\n                    if (index !== 0) {\n                        items.push(<GroupName key={groupName} name={groupName ?? ''} />);\n                    }\n                }\n\n                list.forEach(({ id, text, imageUrl }) => {\n                    items.push(\n                        <SearchBoxItem\n                            key={`${id}_${groupName ?? ''}`}\n                            id={id}\n                            text={text}\n                            imageUrl={imageUrl}\n                            shouldShowRoundImage={shouldShowRoundImage}\n                            onSelect={handleSelect}\n                            groupName={groupName}\n                        />,\n                    );\n                });\n            });\n\n            if (shouldAddInputToList && inputToListValue !== '') {\n                items.push(\n                    <SearchBoxItem\n                        id=\"input-value\"\n                        onSelect={handleSelect}\n                        text={`<b>${inputToListValue}</b`}\n                    />,\n                );\n            }\n\n            return items;\n        }, [\n            matchingListsItems,\n            shouldAddInputToList,\n            inputToListValue,\n            hasMultipleGroups,\n            shouldShowRoundImage,\n            handleSelect,\n        ]);\n\n        useEffect(() => {\n            if (content.length > 0) {\n                handleOpen();\n            }\n        }, [content.length, handleOpen]);\n\n        useEffect(() => {\n            const handleKeyDown = (e: KeyboardEvent) => {\n                if (!isAnimating) {\n                    return;\n                }\n\n                if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                    e.preventDefault();\n                    const children = contentRef.current?.children;\n\n                    if (!children) {\n                        return;\n                    }\n\n                    const childrenArray = Array.from(children);\n\n                    const newChildren = childrenArray.find((child) =>\n                        child.id.startsWith('searchbox-content__'),\n                    )?.children;\n\n                    if (newChildren && newChildren.length > 0) {\n                        const filteredChildren = Array.from(newChildren).filter(\n                            (child) => (child as HTMLElement).dataset.isgroupname !== 'true',\n                        );\n                        setFilteredChildrenArray(filteredChildren);\n\n                        const newIndex =\n                            focusedIndex !== null\n                                ? (focusedIndex +\n                                      (e.key === 'ArrowUp' ? -1 : 1) +\n                                      filteredChildren.length) %\n                                  filteredChildren.length\n                                : 0;\n\n                        if (focusedIndex !== null) {\n                            const prevElement = filteredChildren[focusedIndex] as HTMLDivElement;\n                            prevElement.tabIndex = -1;\n                        }\n\n                        setFocusedIndex(newIndex);\n\n                        const newElement = filteredChildren[newIndex] as HTMLDivElement;\n                        newElement.tabIndex = 0;\n                        newElement.focus();\n                    }\n                } else if (e.key === 'Enter' && focusedIndex !== null) {\n                    if (filteredChildrenArray) {\n                        const element = filteredChildrenArray[focusedIndex];\n\n                        if (!element) {\n                            return;\n                        }\n\n                        const { id, textContent } = element;\n\n                        let imageUrl: string | undefined;\n\n                        // Just Ignore, it works\n                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                        // @ts-ignore\n                        if (element.children[0]?.attributes.src) {\n                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                            // @ts-ignore\n                            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n                            imageUrl = element.children[0]?.attributes.src.nodeValue as string;\n                        }\n\n                        handleSelect({\n                            id: id.replace('search-box-item__', ''),\n                            text: textContent ?? '',\n                            imageUrl,\n                        });\n                    }\n                }\n            };\n\n            document.addEventListener('keydown', handleKeyDown);\n\n            return () => {\n                document.removeEventListener('keydown', handleKeyDown);\n            };\n        }, [filteredChildrenArray, focusedIndex, handleSelect, isAnimating]);\n\n        const handleKeyPress = useCallback((event: KeyboardEvent) => {\n            if (event.keyCode === 27) {\n                setMatchingListsItems([]);\n            }\n        }, []);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                clear: () => setValue(''),\n            }),\n            [],\n        );\n\n        useEffect(() => {\n            document.addEventListener('keydown', handleKeyPress);\n\n            return () => {\n                document.addEventListener('keydown', handleKeyPress);\n            };\n        }, [handleKeyPress]);\n\n        useEffect(() => {\n            if (!newContainer) {\n                return;\n            }\n\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isAnimating && (\n                            <SearchBoxBody\n                                filterButtons={filterButtons}\n                                selectedGroups={groups}\n                                width={width}\n                                coordinates={internalCoordinates}\n                                browser={browser?.name}\n                                height={height}\n                                ref={contentRef}\n                                onGroupSelect={handleFilterButtonsGroupSelect}\n                                shouldHideFilterButtons={shouldHideFilterButtons}\n                            >\n                                {content}\n                            </SearchBoxBody>\n                        )}\n                    </AnimatePresence>,\n                    newContainer,\n                ),\n            );\n        }, [\n            browser?.name,\n            newContainer,\n            content,\n            filterButtons,\n            groups,\n            height,\n            internalCoordinates,\n            isAnimating,\n            width,\n            shouldHideFilterButtons,\n        ]);\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                            onKeyDown={onKeyDown}\n                            leftElement={leftElement}\n                            rightElement={rightElement}\n                            value={value}\n                        />\n                    </div>\n                    {portal}\n                </StyledSearchBox>\n            ),\n            [\n                handleBlur,\n                handleChange,\n                handleFocus,\n                leftElement,\n                onKeyDown,\n                placeholder,\n                portal,\n                rightElement,\n                value,\n            ],\n        );\n    },\n);\n\nSearchBox.displayName = 'SearchBox';\n\nexport default SearchBox;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAC,uBAAA,CAAAH,OAAA;AAiBA,IAAAI,SAAA,GAAAJ,OAAA;AACA,IAAAK,iBAAA,GAAAL,OAAA;AAGA,IAAAM,UAAA,GAAAN,OAAA;AACA,IAAAO,UAAA,GAAAP,OAAA;AAEA,IAAAQ,KAAA,GAAAC,sBAAA,CAAAT,OAAA;AACA,IAAAU,MAAA,GAAAD,sBAAA,CAAAT,OAAA;AACA,IAAAW,UAAA,GAAAF,sBAAA,CAAAT,OAAA;AACA,IAAAY,cAAA,GAAAH,sBAAA,CAAAT,OAAA;AACA,IAAAa,cAAA,GAAAJ,sBAAA,CAAAT,OAAA;AACA,IAAAc,eAAA,GAAAd,OAAA;AACA,IAAAe,UAAA,GAAAf,OAAA;AAI4B,SAAAS,uBAAAO,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,yBAAAH,CAAA,6BAAAI,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAD,wBAAA,YAAAA,CAAAH,CAAA,WAAAA,CAAA,GAAAM,CAAA,GAAAD,CAAA,KAAAL,CAAA;AAAA,SAAAb,wBAAAa,CAAA,EAAAK,CAAA,SAAAA,CAAA,IAAAL,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAE,OAAA,EAAAF,CAAA,QAAAM,CAAA,GAAAH,wBAAA,CAAAE,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAP,CAAA,UAAAM,CAAA,CAAAE,GAAA,CAAAR,CAAA,OAAAS,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAf,CAAA,oBAAAe,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAe,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAd,CAAA,EAAAe,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAf,CAAA,CAAAe,CAAA,YAAAN,CAAA,CAAAP,OAAA,GAAAF,CAAA,EAAAM,CAAA,IAAAA,CAAA,CAAAa,GAAA,CAAAnB,CAAA,EAAAS,CAAA,GAAAA,CAAA;AAiE5B,MAAMW,SAA6B,gBAAG,IAAAC,iBAAU,EAC5C,CACI;EACIC,WAAW;EACXC,SAAS;EACTC,KAAK;EACLC,QAAQ;EACRC,MAAM;EACNC,QAAQ;EACRC,SAAS;EACTC,UAAU;EACVC,SAAS;EACTC,uBAAuB,GAAG,KAAK;EAC/BC,oBAAoB;EACpBC,6BAA6B,GAAG,IAAI;EACpCC,oBAAoB,GAAG,IAAI;EAC3BC,oBAAoB,GAAG;AAC3B,CAAC,EACDC,GAAG,KACF;EACD,MAAM,CAACC,kBAAkB,EAAEC,qBAAqB,CAAC,GAAG,IAAAC,eAAQ,EAAoBf,KAAK,CAAC;EACtF,MAAM,CAACgB,aAAa,EAAEC,gBAAgB,CAAC,GAAG,IAAAF,eAAQ,EAAe,CAAC;EAClE,MAAM,CAACG,KAAK,EAAEC,QAAQ,CAAC,GAAG,IAAAJ,eAAQ,EAAC,EAAE,CAAC;EACtC,MAAM,CAACK,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAN,eAAQ,EAAC,KAAK,CAAC;EACrD,MAAM,CAACO,MAAM,EAAEC,SAAS,CAAC,GAAG,IAAAR,eAAQ,EAAS,CAAC,CAAC;EAC/C,MAAM,CAACS,KAAK,EAAEC,QAAQ,CAAC,GAAG,IAAAV,eAAQ,EAAC,CAAC,CAAC;EACrC,MAAM,CAACW,YAAY,EAAEC,eAAe,CAAC,GAAG,IAAAZ,eAAQ,EAAgB,IAAI,CAAC;EACrE,MAAM,CAACa,iBAAiB,EAAEC,oBAAoB,CAAC,GAAG,IAAAd,eAAQ,EAAUf,KAAK,CAAC8B,MAAM,GAAG,CAAC,CAAC;EACrF,MAAM,CAACC,qBAAqB,EAAEC,wBAAwB,CAAC,GAAG,IAAAjB,eAAQ,EAAY,CAAC;EAC/E,MAAM,CAACkB,gBAAgB,EAAEC,mBAAmB,CAAC,GAAG,IAAAnB,eAAQ,EAAS,EAAE,CAAC;EACpE,MAAM,CAACoB,MAAM,EAAEC,SAAS,CAAC,GAAG,IAAArB,eAAQ,EAAW,CAAC,KAAK,CAAC,CAAC;EACvD,MAAM,CAACsB,MAAM,EAAEC,SAAS,CAAC,GAAG,IAAAvB,eAAQ,EAAc,CAAC;EACnD,MAAM,CAACwB,mBAAmB,EAAEC,sBAAsB,CAAC,GAAG,IAAAzB,eAAQ,EAAyB;IACnF0B,CAAC,EAAE,CAAC;IACJC,CAAC,EAAE;EACP,CAAC,CAAC;EACF,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAG,IAAA7B,eAAQ,EAAiBT,SAAS,IAAI,IAAI,CAAC;EAEnF,MAAMuC,MAAM,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;EAC3C,MAAMC,UAAU,GAAG,IAAAD,aAAM,EAAiB,IAAI,CAAC;EAC/C,MAAME,QAAQ,GAAG,IAAAF,aAAM,EAA0B,IAAI,CAAC;EAEtD,MAAMG,KAAK,GAAG,IAAAC,0BAAQ,EAAC,CAAC;EAExB,MAAM;IAAEC;EAAQ,CAAC,GAAG,IAAAC,oBAAS,EAAC,CAAC;EAE/B,IAAAC,gBAAS,EAAC,MAAM;IACZ,IAAIR,MAAM,CAACS,OAAO,IAAI,CAAChD,SAAS,EAAE;MAC9B,MAAMiD,EAAE,GAAGV,MAAM,CAACS,OAAsB;MAExC,MAAME,OAAO,GAAGD,EAAE,CAACE,OAAO,CAAC,eAAe,CAAC,IAAIF,EAAE,CAACE,OAAO,CAAC,MAAM,CAAC;MAEjEb,eAAe,CAACY,OAAO,CAAC;IAC5B;EACJ,CAAC,EAAE,CAAClD,SAAS,CAAC,CAAC;EAEf,IAAA+C,gBAAS,EAAC,MAAM;IACZ,IAAI/C,SAAS,YAAYoD,OAAO,EAAE;MAC9Bd,eAAe,CAACtC,SAAS,CAAC;IAC9B;EACJ,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEf,IAAA+C,gBAAS,EAAC,MAAM;IACZ,IAAIR,MAAM,CAACS,OAAO,EAAE;MAChB,MAAM;QAAEb,CAAC;QAAEC;MAAE,CAAC,GAAGG,MAAM,CAACS,OAAO,CAACK,qBAAqB,CAAC,CAAC;MAEvDnB,sBAAsB,CAAC;QACnBC,CAAC;QACDC;MACJ,CAAC,CAAC;IACN;EACJ,CAAC,EAAE,EAAE,CAAC;;EAEN;AACR;AACA;EACQ,IAAAW,gBAAS,EAAC,MAAM;IACZxB,oBAAoB,CAAC7B,KAAK,CAAC8B,MAAM,GAAG,CAAC,CAAC;EAC1C,CAAC,EAAE,CAAC9B,KAAK,CAAC,CAAC;EAEX,MAAM4D,aAAa,GAAG,IAAAC,cAAO,EAAC,MAAM;IAChC,MAAMC,KAA0B,GAAG,EAAE;IAErC,IAAI9D,KAAK,CAAC8B,MAAM,IAAI,CAAC,EAAE;MACnB,OAAOgC,KAAK;IAChB;IAEA9D,KAAK,CAAC+D,OAAO,CAAC,CAAC;MAAEC;IAAU,CAAC,KAAK;MAC7B,IAAIA,SAAS,EAAE;QACXF,KAAK,CAACG,IAAI,CAAC;UACPC,EAAE,EAAEF,SAAS;UACbG,IAAI,EAAEH;QACV,CAAC,CAAC;MACN;IACJ,CAAC,CAAC;IAEF,OAAOF,KAAK;EAChB,CAAC,EAAE,CAAC9D,KAAK,CAAC,CAAC;;EAEX;AACR;AACA;EACQ,MAAMoE,UAAU,GAAG,IAAAP,cAAO,EAAC,MAAM;IAC7B,IAAIQ,QAA2B,GAAG,EAAE;IAEpC,IAAIlC,MAAM,CAAC,CAAC,CAAC,KAAK,KAAK,EAAE;MACrBkC,QAAQ,GAAGrE,KAAK;IACpB,CAAC,MAAM;MACHA,KAAK,CAAC+D,OAAO,CAAEO,IAAI,IAAK;QACpB,IAAIA,IAAI,CAACN,SAAS,IAAI7B,MAAM,CAACoC,QAAQ,CAACD,IAAI,CAACN,SAAS,CAAC,EAAE;UACnDK,QAAQ,CAACJ,IAAI,CAACK,IAAI,CAAC;QACvB;MACJ,CAAC,CAAC;IACN;IAEA,MAAME,gBAAmC,GAAG,EAAE;IAE9CH,QAAQ,CAACN,OAAO,CAAC,CAAC;MAAEO,IAAI;MAAEN;IAAU,CAAC,KAAK;MACtC,MAAMS,OAAO,GAAG,IAAAC,qBAAU,EAAC;QAAEZ,KAAK,EAAEQ,IAAI;QAAEK,YAAY,EAAEzD;MAAM,CAAC,CAAC;MAEhE,IAAIuD,OAAO,CAAC3C,MAAM,GAAG,CAAC,EAAE;QACpB0C,gBAAgB,CAACP,IAAI,CAAC;UAClBD,SAAS;UACTM,IAAI,EAAEG;QACV,CAAC,CAAC;MACN;IACJ,CAAC,CAAC;IAEF,IAAID,gBAAgB,CAAC1C,MAAM,KAAK,CAAC,IAAIpB,oBAAoB,EAAE;MACvD8D,gBAAgB,CAACP,IAAI,CAAC;QAClBD,SAAS,EAAEY,SAAS;QACpBN,IAAI,EAAE;MACV,CAAC,CAAC;IACN;IAEA,MAAMO,yBAAyB,GAAGL,gBAAgB,CAACM,GAAG,CAAC,CAAC;MAAER,IAAI;MAAEN;IAAU,CAAC,MAAM;MAC7EA,SAAS;MACTM,IAAI,EAAEA,IAAI,CAACS,MAAM,CACZC,IAAI,IAAK,EAAER,gBAAgB,CAAC1C,MAAM,KAAK,CAAC,IAAIkD,IAAI,CAACb,IAAI,KAAKjD,KAAK,CACpE;IACJ,CAAC,CAAC,CAAC;IAEHJ,qBAAqB,CAAC+D,yBAAyB,CAAC;IAEhD,OAAOR,QAAQ;EACnB,CAAC,EAAE,CAAClC,MAAM,EAAEnC,KAAK,EAAEU,oBAAoB,EAAEQ,KAAK,CAAC,CAAC;EAEhD,MAAM+D,UAAU,GAAG,IAAAC,kBAAW,EAAC,MAAM;IACjC,IAAIrC,MAAM,CAACS,OAAO,EAAE;MAChB,MAAM;QAAEb,CAAC;QAAEC,CAAC;QAAEpB,MAAM,EAAE6D;MAAW,CAAC,GAAGtC,MAAM,CAACS,OAAO,CAACK,qBAAqB,CAAC,CAAC;MAE3EnB,sBAAsB,CAAC;QACnBC,CAAC;QACDC,CAAC,EAAEA,CAAC,GAAGyC;MACX,CAAC,CAAC;MAEF9D,cAAc,CAAC,IAAI,CAAC;IACxB;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM+D,WAAW,GAAG,IAAAF,kBAAW,EAAC,MAAM;IAClC7D,cAAc,CAAC,KAAK,CAAC;EACzB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMgE,8BAA8B,GAAIC,IAAc,IAAK;IACvDlD,SAAS,CAACkD,IAAI,CAACxD,MAAM,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,GAAGwD,IAAI,CAAC;EACjD,CAAC;;EAED;AACR;AACA;EACQ,MAAMC,kBAAkB,GAAG,IAAAL,kBAAW,EACjCM,KAAiB,IAAK;IACnB,IACI3C,MAAM,CAACS,OAAO,IACd,CAACT,MAAM,CAACS,OAAO,CAACmC,QAAQ,CAACD,KAAK,CAACE,MAAc,CAAC,IAC9C3C,UAAU,CAACO,OAAO,IAClB,CAACP,UAAU,CAACO,OAAO,CAACmC,QAAQ,CAACD,KAAK,CAACE,MAAc,CAAC,EACpD;MACEN,WAAW,CAAC,CAAC;IACjB;EACJ,CAAC,EACD,CAACA,WAAW,CAChB,CAAC;;EAED;AACR;AACA;EACQ,IAAA/B,gBAAS,EAAC,MAAM;IACZsC,QAAQ,CAACC,gBAAgB,CAAC,OAAO,EAAEL,kBAAkB,CAAC;IACtDM,MAAM,CAACD,gBAAgB,CAAC,MAAM,EAAE,MAAMR,WAAW,CAAC,CAAC,CAAC;IAEpD,OAAO,MAAM;MACTO,QAAQ,CAACG,mBAAmB,CAAC,OAAO,EAAEP,kBAAkB,CAAC;MACzDM,MAAM,CAACD,gBAAgB,CAAC,MAAM,EAAE,MAAMR,WAAW,CAAC,CAAC,CAAC;IACxD,CAAC;EACL,CAAC,EAAE,CAACG,kBAAkB,EAAE1C,MAAM,EAAEuC,WAAW,CAAC,CAAC;;EAE7C;AACR;AACA;EACQ,IAAA/B,gBAAS,EAAC,MAAM;IACZ,MAAM0C,SAAmB,GAAG,EAAE;IAE9B3B,UAAU,CAACL,OAAO,CAAC,CAAC;MAAEO,IAAI;MAAEN;IAAU,CAAC,KAAK;MACxCM,IAAI,CAACP,OAAO,CAAC,CAAC;QAAEI;MAAK,CAAC,KAAK4B,SAAS,CAAC9B,IAAI,CAACE,IAAI,CAAC,CAAC;MAChD,IAAI,CAACH,SAAS,EAAE;QACZ;MACJ;MACA+B,SAAS,CAAC9B,IAAI,CAACD,SAAS,CAAC;IAC7B,CAAC,CAAC;IAEF,IAAItD,oBAAoB,IAAIuB,gBAAgB,KAAK,EAAE,EAAE;MACjD8D,SAAS,CAAC9B,IAAI,CAAChC,gBAAgB,CAAC;IACpC;IAEAV,SAAS,CAAC,IAAAyE,iCAAsB,EAACD,SAAS,CAAC,CAAC;EAChD,CAAC,EAAE,CAAC9D,gBAAgB,EAAEmC,UAAU,EAAEtE,WAAW,EAAEY,oBAAoB,CAAC,CAAC;;EAErE;AACR;AACA;EACQ,IAAA2C,gBAAS,EAAC,MAAM;IACZ,MAAM4C,KAAK,GAAGN,QAAQ,CAACO,cAAc,CAAC,kBAAkB,CAAC;IAEzD,MAAMC,aAAa,GAAGA,CAAA,KAAM;MACxB,IAAIF,KAAK,EAAE;QACPxE,QAAQ,CAACwE,KAAK,CAACG,WAAW,CAAC;MAC/B;IACJ,CAAC;IAED,IAAIH,KAAK,EAAE;MACP,IAAII,cAAc,CAACF,aAAa,CAAC,CAACG,OAAO,CAACL,KAAK,CAAC;IACpD;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,IAAA5C,gBAAS,EAAC,MAAM;IACZ,IAAIhD,UAAU,EAAE;MACZ+D,UAAU,CAACL,OAAO,CAAC,CAAC;QAAEO;MAAK,CAAC,KAAK;QAC7B,MAAMiC,YAAY,GAAGjC,IAAI,CAACkC,IAAI,CAAC,CAAC;UAAEtC;QAAG,CAAC,KAAKA,EAAE,KAAK7D,UAAU,CAAC;QAC7D,IAAIkG,YAAY,EAAE;UACdpF,QAAQ,CAACoF,YAAY,CAACpC,IAAI,CAAC;UAE3B,IAAIoC,YAAY,CAACE,QAAQ,EAAE;YACvBxF,gBAAgB,cACZvD,MAAA,CAAAgB,OAAA,CAAAgI,aAAA,CAACpI,eAAA,CAAAqI,wBAAwB;cACrBC,GAAG,EAAEL,YAAY,CAACE,QAAS;cAC3BI,qBAAqB,EAAErG;YAAqB,CAC/C,CACL,CAAC;UACL;QACJ;MACJ,CAAC,CAAC;IACN;EACJ,CAAC,EAAE,CAAC4D,UAAU,EAAE/D,UAAU,EAAEG,oBAAoB,CAAC,CAAC;;EAElD;AACR;AACA;AACA;EACQ,IAAA6C,gBAAS,EAAC,MAAM;IACZ,IAAI,CAAChD,UAAU,EAAE;MACbc,QAAQ,CAAC,EAAE,CAAC;IAChB;EACJ,CAAC,EAAE,CAACd,UAAU,CAAC,CAAC;;EAEhB;AACR;AACA;EACQ,MAAMyG,WAAW,GAAG,IAAA5B,kBAAW,EAAC,MAAM;IAClC,IAAIzE,6BAA6B,EAAE;MAC/B,MAAM+D,gBAAmC,GAAG,EAAE;MAE9CJ,UAAU,CAACL,OAAO,CAAC,CAAC;QAAEO,IAAI;QAAEN;MAAU,CAAC,KAAK;QACxC,MAAMS,OAAO,GAAG,IAAAC,qBAAU,EAAC;UAAEZ,KAAK,EAAEQ,IAAI;UAAEK,YAAY,EAAEzD;QAAM,CAAC,CAAC;QAEhE,IAAIuD,OAAO,CAAC3C,MAAM,GAAG,CAAC,EAAE;UACpB0C,gBAAgB,CAACP,IAAI,CAAC;YAClBD,SAAS;YACTM,IAAI,EAAEG;UACV,CAAC,CAAC;QACN;MACJ,CAAC,CAAC;MAEF,IAAID,gBAAgB,CAAC1C,MAAM,KAAK,CAAC,IAAIpB,oBAAoB,EAAE;QACvD8D,gBAAgB,CAACP,IAAI,CAAC;UAClBD,SAAS,EAAEY,SAAS;UACpBN,IAAI,EAAE;QACV,CAAC,CAAC;MACN;MAEA,MAAMO,yBAAyB,GAAGL,gBAAgB,CAACM,GAAG,CAAC,CAAC;QAAER,IAAI;QAAEN;MAAU,CAAC,MAAM;QAC7EA,SAAS;QACTM,IAAI,EAAEA,IAAI,CAACS,MAAM,CACZC,IAAI,IAAK,EAAER,gBAAgB,CAAC1C,MAAM,KAAK,CAAC,IAAIkD,IAAI,CAACb,IAAI,KAAKjD,KAAK,CACpE;MACJ,CAAC,CAAC,CAAC;MAEHJ,qBAAqB,CAAC+D,yBAAyB,CAAC;MAEhD,IAAIA,yBAAyB,CAAC/C,MAAM,KAAK,CAAC,EAAE;QACxCmD,UAAU,CAAC,CAAC;MAChB,CAAC,MAAM;QACHG,WAAW,CAAC,CAAC;MACjB;IACJ;EACJ,CAAC,EAAE,CACChB,UAAU,EACVgB,WAAW,EACXH,UAAU,EACVvE,oBAAoB,EACpBD,6BAA6B,EAC7BS,KAAK,CACR,CAAC;;EAEF;AACR;AACA;;EAEQ,IAAAmC,gBAAS,EAAC,MAAM;IACZ,MAAMmB,gBAAmC,GAAG,EAAE;IAE9CJ,UAAU,CAACL,OAAO,CAAC,CAAC;MAAEO,IAAI;MAAEN;IAAU,CAAC,KAAK;MACxC,MAAMS,OAAO,GAAG,IAAAC,qBAAU,EAAC;QAAEZ,KAAK,EAAEQ,IAAI;QAAEK,YAAY,EAAEzD;MAAM,CAAC,CAAC;MAEhE,IAAIuD,OAAO,CAAC3C,MAAM,GAAG,CAAC,EAAE;QACpB0C,gBAAgB,CAACP,IAAI,CAAC;UAClBD,SAAS;UACTM,IAAI,EAAEG;QACV,CAAC,CAAC;MACN;IACJ,CAAC,CAAC;IAEF,IAAID,gBAAgB,CAAC1C,MAAM,KAAK,CAAC,IAAIpB,oBAAoB,EAAE;MACvD8D,gBAAgB,CAACP,IAAI,CAAC;QAClBD,SAAS,EAAEY,SAAS;QACpBN,IAAI,EAAE;MACV,CAAC,CAAC;IACN;IAEA,IAAI5D,oBAAoB,IAAIuB,gBAAgB,KAAK,EAAE,EAAE;MACjDuC,gBAAgB,CAACT,OAAO,CAAC,CAAC;QAAEO;MAAK,CAAC,KAAK;QACnCA,IAAI,CAACP,OAAO,CAAC,CAAC;UAAEI;QAAK,CAAC,KAAK;UACvB,IAAIA,IAAI,CAAC4C,WAAW,CAAC,CAAC,KAAK9E,gBAAgB,CAAC8E,WAAW,CAAC,CAAC,EAAE;YACvD7E,mBAAmB,CAAC,EAAE,CAAC;UAC3B;QACJ,CAAC,CAAC;MACN,CAAC,CAAC;IACN;EACJ,CAAC,EAAE,CACCD,gBAAgB,EAChBmC,UAAU,EACV1D,oBAAoB,EACpBD,6BAA6B,EAC7BS,KAAK,CACR,CAAC;EAEF,MAAM8F,WAAW,GAAG,IAAA9B,kBAAW,EAAC,MAAM;IAClC,IAAI9D,WAAW,EAAE;MACbgE,WAAW,CAAC,CAAC;IACjB,CAAC,MAAM;MACHH,UAAU,CAAC,CAAC;IAChB;EACJ,CAAC,EAAE,CAACG,WAAW,EAAEH,UAAU,EAAE7D,WAAW,CAAC,CAAC;EAE1C,MAAM6F,YAAY,GAAG,IAAApD,cAAO,EAAC,MAAM;IAC/B,IAAI,CAAClD,oBAAoB,EAAE;MACvB,OAAOiE,SAAS;IACpB;IAEA,oBACIlH,MAAA,CAAAgB,OAAA,CAAAgI,aAAA,CAACnI,UAAA,CAAA2I,mBAAmB;MAACC,OAAO,EAAEH;IAAY,gBACtCtJ,MAAA,CAAAgB,OAAA,CAAAgI,aAAA,CAAC1I,KAAA,CAAAU,OAAI;MAAC0I,KAAK,EAAE,CAAC,oBAAoB,CAAE;MAACC,KAAK,EAAEpE,KAAK,CAAC,KAAK;IAAY,CAAE,CACpD,CAAC;EAE9B,CAAC,EAAE,CAAC+D,WAAW,EAAErG,oBAAoB,EAAEsC,KAAK,CAAC,CAAC;EAE9C,MAAMqE,WAAW,GAAG,IAAAzD,cAAO,EACvB,mBACInG,MAAA,CAAAgB,OAAA,CAAAgI,aAAA,CAACnI,UAAA,CAAAgJ,0BAA0B,QACtBxH,SAAS,iBAAIrC,MAAA,CAAAgB,OAAA,CAAAgI,aAAA,CAAC1I,KAAA,CAAAU,OAAI;IAAC0I,KAAK,EAAErH;EAAU,CAAE,CAAC,EACvCiB,aAAa,IAAIA,aACM,CAC/B,EACD,CAACjB,SAAS,EAAEiB,aAAa,CAC7B,CAAC;;EAED;AACR;AACA;EACQ,MAAMwG,YAAY,GAAG,IAAAtC,kBAAW,EAC3BM,KAAoC,IAAK;IACtC,MAAMiC,aAAgC,GAAG,EAAE;IAE3CrD,UAAU,CAACL,OAAO,CAAC,CAAC;MAAEO,IAAI;MAAEN;IAAU,CAAC,KAAK;MACxC,MAAMS,OAAO,GAAG,IAAAC,qBAAU,EAAC;QAAEZ,KAAK,EAAEQ,IAAI;QAAEK,YAAY,EAAEa,KAAK,CAACE,MAAM,CAACxE;MAAM,CAAC,CAAC;MAE7E,IAAIuD,OAAO,CAAC3C,MAAM,GAAG,CAAC,EAAE;QACpB2F,aAAa,CAACxD,IAAI,CAAC;UACfD,SAAS;UACTM,IAAI,EAAEG;QACV,CAAC,CAAC;MACN;IACJ,CAAC,CAAC;IAEF,IAAIgD,aAAa,CAAC3F,MAAM,KAAK,CAAC,IAAIpB,oBAAoB,EAAE;MACpD+G,aAAa,CAACxD,IAAI,CAAC;QACfD,SAAS,EAAEY,SAAS;QACpBN,IAAI,EAAE;MACV,CAAC,CAAC;IACN;IAEArD,gBAAgB,CAAC2D,SAAS,CAAC;IAE3B,IAAI,CAACnE,6BAA6B,IAAI,CAAC+E,KAAK,CAACE,MAAM,CAACxE,KAAK,EAAE;MACvDJ,qBAAqB,CAAC,EAAE,CAAC;IAC7B,CAAC,MAAM;MACHA,qBAAqB,CAAC2G,aAAa,CAAC;MAEpC,IAAIA,aAAa,CAAC3F,MAAM,KAAK,CAAC,EAAE;QAC5BmD,UAAU,CAAC,CAAC;MAChB,CAAC,MAAM;QACHG,WAAW,CAAC,CAAC;MACjB;IACJ;IAEAjE,QAAQ,CAACqE,KAAK,CAACE,MAAM,CAACxE,KAAK,CAAC;IAC5BgB,mBAAmB,CAACsD,KAAK,CAACE,MAAM,CAACxE,KAAK,CAAC;IAEvC,IAAI,OAAOjB,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACuF,KAAK,CAAC;IACnB;EACJ,CAAC,EACD,CACIpB,UAAU,EACVgB,WAAW,EACXH,UAAU,EACVhF,QAAQ,EACRS,oBAAoB,EACpBD,6BAA6B,CAErC,CAAC;;EAED;AACR;AACA;EACQ,MAAMiH,UAAU,GAAG,IAAAxC,kBAAW,EACzBM,KAAmC,IAAK;IACrC,IAAI,OAAOtF,MAAM,KAAK,UAAU,EAAE;MAC9BA,MAAM,CAACsF,KAAK,CAAC;IACjB;EACJ,CAAC,EACD,CAACtF,MAAM,CACX,CAAC;;EAED;AACR;AACA;EACQ,MAAMyH,YAAY,GAAG,IAAAzC,kBAAW,EAC3BF,IAAoB,IAAK;IACtB,MAAM4C,OAAO,GAAG;MACZ,GAAG5C,IAAI;MACPb,IAAI,EAAEa,IAAI,CAACb,IAAI,CAAC0D,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAACA,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAACA,OAAO,CAAC,KAAK,EAAE,EAAE;IAC5E,CAAC;IAED1G,QAAQ,CAACyG,OAAO,CAACzD,IAAI,CAAC;IACtBiB,WAAW,CAAC,CAAC;IAEbnE,gBAAgB,CACZ2G,OAAO,CAACnB,QAAQ,gBACZ/I,MAAA,CAAAgB,OAAA,CAAAgI,aAAA,CAACpI,eAAA,CAAAqI,wBAAwB;MACrBC,GAAG,EAAEgB,OAAO,CAACnB,QAAS;MACtBI,qBAAqB,EAAErG;IAAqB,CAC/C,CAAC,GACFoE,SACR,CAAC;IAED9D,qBAAqB,CAAC,EAAE,CAAC;IAEzB,IAAI,OAAOX,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACyH,OAAO,CAAC;IACrB;EACJ,CAAC,EACD,CAACxC,WAAW,EAAEjF,QAAQ,EAAEK,oBAAoB,CAChD,CAAC;EAED,MAAMsH,OAAO,GAAG,IAAAjE,cAAO,EAAC,MAAM;IAC1B,MAAMC,KAAqB,GAAG,EAAE;IAEhCjD,kBAAkB,CAACkD,OAAO,CAAC,CAAC;MAAEC,SAAS;MAAEM;IAAK,CAAC,EAAEyD,KAAK,KAAK;MACvD,IAAInG,iBAAiB,EAAE;QACnB,IAAI0C,IAAI,CAACxC,MAAM,IAAI,CAAC,EAAE;UAClB;QACJ;QAEA,IAAIiG,KAAK,KAAK,CAAC,EAAE;UACbjE,KAAK,CAACG,IAAI,cAACvG,MAAA,CAAAgB,OAAA,CAAAgI,aAAA,CAACvI,UAAA,CAAAO,OAAS;YAACsJ,GAAG,EAAEhE,SAAU;YAACiE,IAAI,EAAEjE,SAAS,IAAI;UAAG,CAAE,CAAC,CAAC;QACpE;MACJ;MAEAM,IAAI,CAACP,OAAO,CAAC,CAAC;QAAEG,EAAE;QAAEC,IAAI;QAAEsC;MAAS,CAAC,KAAK;QACrC3C,KAAK,CAACG,IAAI,cACNvG,MAAA,CAAAgB,OAAA,CAAAgI,aAAA,CAACrI,cAAA,CAAAK,OAAa;UACVsJ,GAAG,EAAE,GAAG9D,EAAE,IAAIF,SAAS,IAAI,EAAE,EAAG;UAChCE,EAAE,EAAEA,EAAG;UACPC,IAAI,EAAEA,IAAK;UACXsC,QAAQ,EAAEA,QAAS;UACnBjG,oBAAoB,EAAEA,oBAAqB;UAC3CL,QAAQ,EAAEwH,YAAa;UACvB3D,SAAS,EAAEA;QAAU,CACxB,CACL,CAAC;MACL,CAAC,CAAC;IACN,CAAC,CAAC;IAEF,IAAItD,oBAAoB,IAAIuB,gBAAgB,KAAK,EAAE,EAAE;MACjD6B,KAAK,CAACG,IAAI,cACNvG,MAAA,CAAAgB,OAAA,CAAAgI,aAAA,CAACrI,cAAA,CAAAK,OAAa;QACVwF,EAAE,EAAC,aAAa;QAChB/D,QAAQ,EAAEwH,YAAa;QACvBxD,IAAI,EAAE,MAAMlC,gBAAgB;MAAM,CACrC,CACL,CAAC;IACL;IAEA,OAAO6B,KAAK;EAChB,CAAC,EAAE,CACCjD,kBAAkB,EAClBH,oBAAoB,EACpBuB,gBAAgB,EAChBL,iBAAiB,EACjBpB,oBAAoB,EACpBmH,YAAY,CACf,CAAC;EAEF,IAAAtE,gBAAS,EAAC,MAAM;IACZ,IAAIyE,OAAO,CAAChG,MAAM,GAAG,CAAC,EAAE;MACpBmD,UAAU,CAAC,CAAC;IAChB;EACJ,CAAC,EAAE,CAAC6C,OAAO,CAAChG,MAAM,EAAEmD,UAAU,CAAC,CAAC;EAEhC,IAAA5B,gBAAS,EAAC,MAAM;IACZ,MAAM6E,aAAa,GAAI1J,CAAgB,IAAK;MACxC,IAAI,CAAC4C,WAAW,EAAE;QACd;MACJ;MAEA,IAAI5C,CAAC,CAACwJ,GAAG,KAAK,SAAS,IAAIxJ,CAAC,CAACwJ,GAAG,KAAK,WAAW,EAAE;QAAA,IAAAG,mBAAA,EAAAC,mBAAA;QAC9C5J,CAAC,CAAC6J,cAAc,CAAC,CAAC;QAClB,MAAMC,QAAQ,IAAAH,mBAAA,GAAGpF,UAAU,CAACO,OAAO,cAAA6E,mBAAA,uBAAlBA,mBAAA,CAAoBG,QAAQ;QAE7C,IAAI,CAACA,QAAQ,EAAE;UACX;QACJ;QAEA,MAAMC,aAAa,GAAGC,KAAK,CAACC,IAAI,CAACH,QAAQ,CAAC;QAE1C,MAAMI,WAAW,IAAAN,mBAAA,GAAGG,aAAa,CAAC/B,IAAI,CAAEmC,KAAK,IACzCA,KAAK,CAACzE,EAAE,CAAC0E,UAAU,CAAC,qBAAqB,CAC7C,CAAC,cAAAR,mBAAA,uBAFmBA,mBAAA,CAEjBE,QAAQ;QAEX,IAAII,WAAW,IAAIA,WAAW,CAAC5G,MAAM,GAAG,CAAC,EAAE;UACvC,MAAM+G,gBAAgB,GAAGL,KAAK,CAACC,IAAI,CAACC,WAAW,CAAC,CAAC3D,MAAM,CAClD4D,KAAK,IAAMA,KAAK,CAAiBG,OAAO,CAACC,WAAW,KAAK,MAC9D,CAAC;UACD/G,wBAAwB,CAAC6G,gBAAgB,CAAC;UAE1C,MAAMG,QAAQ,GACVtH,YAAY,KAAK,IAAI,GACf,CAACA,YAAY,IACRlD,CAAC,CAACwJ,GAAG,KAAK,SAAS,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAC9Ba,gBAAgB,CAAC/G,MAAM,IAC3B+G,gBAAgB,CAAC/G,MAAM,GACvB,CAAC;UAEX,IAAIJ,YAAY,KAAK,IAAI,EAAE;YACvB,MAAMuH,WAAW,GAAGJ,gBAAgB,CAACnH,YAAY,CAAmB;YACpEuH,WAAW,CAACC,QAAQ,GAAG,CAAC,CAAC;UAC7B;UAEAvH,eAAe,CAACqH,QAAQ,CAAC;UAEzB,MAAMG,UAAU,GAAGN,gBAAgB,CAACG,QAAQ,CAAmB;UAC/DG,UAAU,CAACD,QAAQ,GAAG,CAAC;UACvBC,UAAU,CAACC,KAAK,CAAC,CAAC;QACtB;MACJ,CAAC,MAAM,IAAI5K,CAAC,CAACwJ,GAAG,KAAK,OAAO,IAAItG,YAAY,KAAK,IAAI,EAAE;QACnD,IAAIK,qBAAqB,EAAE;UAAA,IAAAsH,kBAAA;UACvB,MAAM7F,OAAO,GAAGzB,qBAAqB,CAACL,YAAY,CAAC;UAEnD,IAAI,CAAC8B,OAAO,EAAE;YACV;UACJ;UAEA,MAAM;YAAEU,EAAE;YAAEoF;UAAY,CAAC,GAAG9F,OAAO;UAEnC,IAAIiD,QAA4B;;UAEhC;UACA;UACA;UACA,KAAA4C,kBAAA,GAAI7F,OAAO,CAAC8E,QAAQ,CAAC,CAAC,CAAC,cAAAe,kBAAA,eAAnBA,kBAAA,CAAqBE,UAAU,CAAC3C,GAAG,EAAE;YAAA,IAAA4C,mBAAA;YACrC;YACA;YACA;YACA/C,QAAQ,IAAA+C,mBAAA,GAAGhG,OAAO,CAAC8E,QAAQ,CAAC,CAAC,CAAC,cAAAkB,mBAAA,uBAAnBA,mBAAA,CAAqBD,UAAU,CAAC3C,GAAG,CAAC6C,SAAmB;UACtE;UAEA9B,YAAY,CAAC;YACTzD,EAAE,EAAEA,EAAE,CAAC2D,OAAO,CAAC,mBAAmB,EAAE,EAAE,CAAC;YACvC1D,IAAI,EAAEmF,WAAW,IAAI,EAAE;YACvB7C;UACJ,CAAC,CAAC;QACN;MACJ;IACJ,CAAC;IAEDd,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEsC,aAAa,CAAC;IAEnD,OAAO,MAAM;MACTvC,QAAQ,CAACG,mBAAmB,CAAC,SAAS,EAAEoC,aAAa,CAAC;IAC1D,CAAC;EACL,CAAC,EAAE,CAACnG,qBAAqB,EAAEL,YAAY,EAAEiG,YAAY,EAAEvG,WAAW,CAAC,CAAC;EAEpE,MAAMsI,cAAc,GAAG,IAAAxE,kBAAW,EAAEM,KAAoB,IAAK;IACzD,IAAIA,KAAK,CAACmE,OAAO,KAAK,EAAE,EAAE;MACtB7I,qBAAqB,CAAC,EAAE,CAAC;IAC7B;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,IAAA8I,0BAAmB,EACfhJ,GAAG,EACH,OAAO;IACHiJ,KAAK,EAAEA,CAAA,KAAM1I,QAAQ,CAAC,EAAE;EAC5B,CAAC,CAAC,EACF,EACJ,CAAC;EAED,IAAAkC,gBAAS,EAAC,MAAM;IACZsC,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAE8D,cAAc,CAAC;IAEpD,OAAO,MAAM;MACT/D,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAE8D,cAAc,CAAC;IACxD,CAAC;EACL,CAAC,EAAE,CAACA,cAAc,CAAC,CAAC;EAEpB,IAAArG,gBAAS,EAAC,MAAM;IACZ,IAAI,CAACV,YAAY,EAAE;MACf;IACJ;IAEAL,SAAS,CAAC,mBACN,IAAAwH,sBAAY,eACRpM,MAAA,CAAAgB,OAAA,CAAAgI,aAAA,CAACjJ,aAAA,CAAAsM,eAAe;MAACC,OAAO,EAAE;IAAM,GAC3B5I,WAAW,iBACR1D,MAAA,CAAAgB,OAAA,CAAAgI,aAAA,CAACtI,cAAA,CAAAM,OAAa;MACVkF,aAAa,EAAEA,aAAc;MAC7BqG,cAAc,EAAE9H,MAAO;MACvBX,KAAK,EAAEA,KAAM;MACb0I,WAAW,EAAE3H,mBAAoB;MACjCY,OAAO,EAAEA,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAE8E,IAAK;MACvB3G,MAAM,EAAEA,MAAO;MACfV,GAAG,EAAEmC,UAAW;MAChBoH,aAAa,EAAE9E,8BAA+B;MAC9C9E,uBAAuB,EAAEA;IAAwB,GAEhDuH,OACU,CAEN,CAAC,EAClBnF,YACJ,CACJ,CAAC;EACL,CAAC,EAAE,CACCQ,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAE8E,IAAI,EACbtF,YAAY,EACZmF,OAAO,EACPlE,aAAa,EACbzB,MAAM,EACNb,MAAM,EACNiB,mBAAmB,EACnBnB,WAAW,EACXI,KAAK,EACLjB,uBAAuB,CAC1B,CAAC;EAEF,OAAO,IAAAsD,cAAO,EACV,mBACInG,MAAA,CAAAgB,OAAA,CAAAgI,aAAA,CAACnI,UAAA,CAAA6L,eAAe;IAACxJ,GAAG,EAAEiC;EAAO,gBACzBnF,MAAA,CAAAgB,OAAA,CAAAgI,aAAA;IAAKxC,EAAE,EAAC;EAAkB,gBACtBxG,MAAA,CAAAgB,OAAA,CAAAgI,aAAA,CAACxI,MAAA,CAAAQ,OAAK;IACFkC,GAAG,EAAEoC,QAAS;IACd/C,QAAQ,EAAEuH,YAAa;IACvBtH,MAAM,EAAEwH,UAAW;IACnB2C,OAAO,EAAEvD,WAAY;IACrBhH,WAAW,EAAEA,WAAY;IACzBM,SAAS,EAAEA,SAAU;IACrBkH,WAAW,EAAEA,WAAY;IACzBL,YAAY,EAAEA,YAAa;IAC3B/F,KAAK,EAAEA;EAAM,CAChB,CACA,CAAC,EACLmB,MACY,CACpB,EACD,CACIqF,UAAU,EACVF,YAAY,EACZV,WAAW,EACXQ,WAAW,EACXlH,SAAS,EACTN,WAAW,EACXuC,MAAM,EACN4E,YAAY,EACZ/F,KAAK,CAEb,CAAC;AACL,CACJ,CAAC;AAEDtB,SAAS,CAAC0K,WAAW,GAAG,WAAW;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA9L,OAAA,GAErBkB,SAAS","ignoreList":[]}
+{"version":3,"file":"SearchBox.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_styledComponents","_calculate","_searchBox","_Icon","_interopRequireDefault","_Input","_GroupName","_SearchBoxBody","_SearchBoxItem","_SearchBoxItem2","_SearchBox","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SearchBox","forwardRef","placeholder","leftIcons","lists","onChange","onBlur","onSelect","onKeyDown","selectedId","container","shouldHideFilterButtons","shouldShowRoundImage","shouldShowContentOnEmptyInput","shouldAddInputToList","shouldShowToggleIcon","ref","matchingListsItems","setMatchingListsItems","useState","selectedImage","setSelectedImage","value","setValue","isAnimating","setIsAnimating","height","setHeight","width","setWidth","focusedIndex","setFocusedIndex","hasMultipleGroups","setHasMultipleGroups","length","filteredChildrenArray","setFilteredChildrenArray","inputToListValue","setInputToListValue","groups","setGroups","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","newContainer","setNewContainer","boxRef","useRef","contentRef","inputRef","theme","useTheme","browser","getDevice","useEffect","current","el","element","closest","Element","getBoundingClientRect","filterButtons","useMemo","items","forEach","groupName","push","id","text","activeList","newLists","list","includes","newMatchingItems","newList","searchList","searchString","undefined","filteredMatchingListItems","map","filter","item","handleOpen","useCallback","bodyHeight","handleClose","handleFilterButtonsGroupSelect","keys","handleOutsideClick","event","contains","target","document","addEventListener","window","removeEventListener","textArray","calculateContentHeight","input","getElementById","getInputWidth","offsetWidth","ResizeObserver","observe","selectedItem","find","imageUrl","createElement","StyledSearchBoxItemImage","src","$shouldShowRoundImage","handleFocus","toLowerCase","handleClick","rightElement","StyledSearchBoxIcon","onClick","icons","color","leftElement","StyledSearchBoxLeftWrapper","handleChange","filteredLists","handleBlur","handleSelect","newItem","replace","content","index","key","name","handleKeyDown","_contentRef$current","_childrenArray$find","preventDefault","children","childrenArray","Array","from","newChildren","child","startsWith","filteredChildren","dataset","isgroupname","newIndex","prevElement","tabIndex","newElement","focus","_element$children$","textContent","attributes","_element$children$2","nodeValue","handleKeyPress","keyCode","useImperativeHandle","clear","createPortal","AnimatePresence","initial","selectedGroups","coordinates","onGroupSelect","StyledSearchBox","onFocus","displayName","_default","exports"],"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    KeyboardEventHandler,\n    ReactElement,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useTheme } from 'styled-components';\nimport type { IFilterButtonItem } from '../../types/filterButtons';\nimport type { ISearchBoxItem, ISearchBoxItems } from '../../types/searchBox';\nimport { calculateContentHeight } from '../../utils/calculate';\nimport { searchList } from '../../utils/searchBox';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport Input from '../input/Input';\nimport GroupName from './group-name/GroupName';\nimport SearchBoxBody from './search-box-body/SearchBoxBody';\nimport SearchBoxItem from './search-box-item/SearchBoxItem';\nimport { StyledSearchBoxItemImage } from './search-box-item/SearchBoxItem.styles';\nimport {\n    StyledSearchBox,\n    StyledSearchBoxIcon,\n    StyledSearchBoxLeftWrapper,\n} from './SearchBox.styles';\n\nexport type SearchBoxRef = {\n    clear: VoidFunction;\n};\n\nexport type SearchBoxProps = {\n    /**\n     * The element where the content of the `ComboBox` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * An optional icon that is displayed inside the left side of the input.\n     */\n    leftIcons?: string[];\n    /**\n     * List of groups with items that can be searched. It is possible to give only one list; if multiple lists are provided, the 'group name' parameter becomes mandatory.\n     */\n    lists: ISearchBoxItems[];\n    /**\n     * The 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 that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when an item is selected.\n     */\n    onSelect?: (item: ISearchBoxItem) => void;\n    /**\n     * Control the selected item. If you use this prop, make sure to update it when the user selects an item.\n     */\n    selectedId?: string;\n    /**\n     * If true, the value in the Input is displayed in the list.\n     */\n    shouldAddInputToList: boolean;\n    /**\n     * If true, the filter buttons are hidden.\n     */\n    shouldHideFilterButtons?: boolean;\n    /**\n     * Whether the full list of items should be displayed if the input is empty.\n     */\n    shouldShowContentOnEmptyInput?: boolean;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * Whether the icon to open and close the list should be displayed.\n     */\n    shouldShowToggleIcon?: boolean;\n};\n\nconst SearchBox: FC<SearchBoxProps> = forwardRef<SearchBoxRef, SearchBoxProps>(\n    (\n        {\n            placeholder,\n            leftIcons,\n            lists,\n            onChange,\n            onBlur,\n            onSelect,\n            onKeyDown,\n            selectedId,\n            container,\n            shouldHideFilterButtons = false,\n            shouldShowRoundImage,\n            shouldShowContentOnEmptyInput = true,\n            shouldAddInputToList = true,\n            shouldShowToggleIcon = false,\n        },\n        ref,\n    ) => {\n        const [matchingListsItems, setMatchingListsItems] = useState<ISearchBoxItems[]>(lists);\n        const [selectedImage, setSelectedImage] = useState<ReactElement>();\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        const [hasMultipleGroups, setHasMultipleGroups] = useState<boolean>(lists.length > 1);\n        const [filteredChildrenArray, setFilteredChildrenArray] = useState<Element[]>();\n        const [inputToListValue, setInputToListValue] = useState<string>('');\n        const [groups, setGroups] = useState<string[]>(['all']);\n        const [portal, setPortal] = useState<ReactPortal>();\n        const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n            x: 0,\n            y: 0,\n        });\n        const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n        const boxRef = useRef<HTMLDivElement>(null);\n        const contentRef = useRef<HTMLDivElement>(null);\n        const inputRef = useRef<HTMLInputElement | null>(null);\n\n        const theme = useTheme();\n\n        const { browser } = getDevice();\n\n        useEffect(() => {\n            if (boxRef.current && !container) {\n                const el = boxRef.current as HTMLElement;\n\n                const element = el.closest('.dialog-inner') || el.closest('body');\n\n                setNewContainer(element);\n            }\n        }, [container]);\n\n        useEffect(() => {\n            if (container instanceof Element) {\n                setNewContainer(container);\n            }\n        }, [container]);\n\n        useEffect(() => {\n            if (boxRef.current) {\n                const { x, y } = boxRef.current.getBoundingClientRect();\n\n                setInternalCoordinates({\n                    x,\n                    y,\n                });\n            }\n        }, []);\n\n        /**\n         * Checks if Lists are smaller then 1\n         */\n        useEffect(() => {\n            setHasMultipleGroups(lists.length > 1);\n        }, [lists]);\n\n        const filterButtons = useMemo(() => {\n            const items: IFilterButtonItem[] = [];\n\n            if (lists.length <= 1) {\n                return items;\n            }\n\n            lists.forEach(({ groupName }) => {\n                if (groupName) {\n                    items.push({\n                        id: groupName,\n                        text: groupName,\n                    });\n                }\n            });\n\n            return items;\n        }, [lists]);\n\n        /**\n         * Filters the lists by the FilterButtons\n         */\n        const activeList = useMemo(() => {\n            let newLists: ISearchBoxItems[] = [];\n\n            if (groups[0] === 'all') {\n                newLists = lists;\n            } else {\n                lists.forEach((list) => {\n                    if (list.groupName && groups.includes(list.groupName)) {\n                        newLists.push(list);\n                    }\n                });\n            }\n\n            const newMatchingItems: ISearchBoxItems[] = [];\n\n            newLists.forEach(({ list, groupName }) => {\n                const newList = searchList({ items: list, searchString: value });\n\n                if (newList.length > 0) {\n                    newMatchingItems.push({\n                        groupName,\n                        list: newList,\n                    });\n                }\n            });\n\n            if (newMatchingItems.length === 0 && shouldAddInputToList) {\n                newMatchingItems.push({\n                    groupName: undefined,\n                    list: [],\n                });\n            }\n\n            const filteredMatchingListItems = newMatchingItems.map(({ list, groupName }) => ({\n                groupName,\n                list: list.filter(\n                    (item) => !(newMatchingItems.length === 1 && item.text === value),\n                ),\n            }));\n\n            setMatchingListsItems(filteredMatchingListItems);\n\n            return newLists;\n        }, [groups, lists, shouldAddInputToList, value]);\n\n        const handleOpen = useCallback(() => {\n            if (boxRef.current) {\n                const { x, y, height: bodyHeight } = boxRef.current.getBoundingClientRect();\n\n                setInternalCoordinates({\n                    x,\n                    y: y + bodyHeight,\n                });\n\n                setIsAnimating(true);\n            }\n        }, []);\n\n        const handleClose = useCallback(() => {\n            setIsAnimating(false);\n        }, []);\n\n        const handleFilterButtonsGroupSelect = (keys: string[]) => {\n            setGroups(keys.length === 0 ? ['all'] : keys);\n        };\n\n        /**\n         * This function closes the list of items\n         */\n        const handleOutsideClick = useCallback(\n            (event: MouseEvent) => {\n                if (\n                    boxRef.current &&\n                    !boxRef.current.contains(event.target as Node) &&\n                    contentRef.current &&\n                    !contentRef.current.contains(event.target as Node)\n                ) {\n                    handleClose();\n                }\n            },\n            [handleClose],\n        );\n\n        /**\n         * This hook listens for clicks\n         */\n        useEffect(() => {\n            document.addEventListener('click', handleOutsideClick);\n            window.addEventListener('blur', () => handleClose());\n\n            return () => {\n                document.removeEventListener('click', handleOutsideClick);\n                window.addEventListener('blur', () => handleClose());\n            };\n        }, [handleOutsideClick, boxRef, handleClose]);\n\n        /**\n         * This hook calculates the height\n         */\n        useEffect(() => {\n            const textArray: string[] = [];\n\n            activeList.forEach(({ list, groupName }) => {\n                list.forEach(({ text }) => textArray.push(text));\n                if (!groupName) {\n                    return;\n                }\n                textArray.push(groupName);\n            });\n\n            if (shouldAddInputToList && inputToListValue !== '') {\n                textArray.push(inputToListValue);\n            }\n\n            setHeight(calculateContentHeight(textArray));\n        }, [inputToListValue, activeList, placeholder, shouldAddInputToList]);\n\n        /**\n         * This hook calculates the width\n         */\n        useEffect(() => {\n            const input = document.getElementById('search_box_input');\n\n            const getInputWidth = () => {\n                if (input) {\n                    setWidth(input.offsetWidth);\n                }\n            };\n\n            if (input) {\n                new ResizeObserver(getInputWidth).observe(input);\n            }\n        }, []);\n\n        useEffect(() => {\n            if (selectedId) {\n                activeList.forEach(({ list }) => {\n                    const selectedItem = list.find(({ id }) => id === selectedId);\n                    if (selectedItem) {\n                        setValue(selectedItem.text);\n\n                        if (selectedItem.imageUrl) {\n                            setSelectedImage(\n                                <StyledSearchBoxItemImage\n                                    src={selectedItem.imageUrl}\n                                    $shouldShowRoundImage={shouldShowRoundImage}\n                                />,\n                            );\n                        }\n                    }\n                });\n            }\n        }, [activeList, selectedId, shouldShowRoundImage]);\n\n        /**\n         * This hook resets the value if the selectedId changes to undefined. This is an own useEffect because the value\n         * should not be reset if the list changes and the selectedId is still undefined.\n         */\n        useEffect(() => {\n            if (!selectedId) {\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                const newMatchingItems: ISearchBoxItems[] = [];\n\n                activeList.forEach(({ list, groupName }) => {\n                    const newList = searchList({ items: list, searchString: value });\n\n                    if (newList.length > 0) {\n                        newMatchingItems.push({\n                            groupName,\n                            list: newList,\n                        });\n                    }\n                });\n\n                if (newMatchingItems.length === 0 && shouldAddInputToList) {\n                    newMatchingItems.push({\n                        groupName: undefined,\n                        list: [],\n                    });\n                }\n\n                const filteredMatchingListItems = newMatchingItems.map(({ list, groupName }) => ({\n                    groupName,\n                    list: list.filter(\n                        (item) => !(newMatchingItems.length === 1 && item.text === value),\n                    ),\n                }));\n\n                setMatchingListsItems(filteredMatchingListItems);\n\n                if (filteredMatchingListItems.length !== 0) {\n                    handleOpen();\n                }\n            }\n        }, [activeList, handleOpen, shouldAddInputToList, shouldShowContentOnEmptyInput, value]);\n\n        /**\n         * This function filters the lists by input\n         */\n\n        useEffect(() => {\n            const newMatchingItems: ISearchBoxItems[] = [];\n\n            activeList.forEach(({ list, groupName }) => {\n                const newList = searchList({ items: list, searchString: value });\n\n                if (newList.length > 0) {\n                    newMatchingItems.push({\n                        groupName,\n                        list: newList,\n                    });\n                }\n            });\n\n            if (newMatchingItems.length === 0 && shouldAddInputToList) {\n                newMatchingItems.push({\n                    groupName: undefined,\n                    list: [],\n                });\n            }\n\n            if (shouldAddInputToList && inputToListValue !== '') {\n                newMatchingItems.forEach(({ list }) => {\n                    list.forEach(({ text }) => {\n                        if (text.toLowerCase() === inputToListValue.toLowerCase()) {\n                            setInputToListValue('');\n                        }\n                    });\n                });\n            }\n        }, [\n            inputToListValue,\n            activeList,\n            shouldAddInputToList,\n            shouldShowContentOnEmptyInput,\n            value,\n        ]);\n\n        const handleClick = useCallback(() => {\n            if (isAnimating) {\n                handleClose();\n            } else {\n                handleOpen();\n            }\n        }, [handleClose, handleOpen, isAnimating]);\n\n        const rightElement = useMemo(() => {\n            if (!shouldShowToggleIcon) {\n                return undefined;\n            }\n\n            return (\n                <StyledSearchBoxIcon onClick={handleClick}>\n                    <Icon icons={['fa fa-chevron-down']} color={theme['006'] as string} />\n                </StyledSearchBoxIcon>\n            );\n        }, [handleClick, shouldShowToggleIcon, theme]);\n\n        const leftElement = useMemo(\n            () => (\n                <StyledSearchBoxLeftWrapper>\n                    {leftIcons && <Icon icons={leftIcons} />}\n                    {selectedImage && selectedImage}\n                </StyledSearchBoxLeftWrapper>\n            ),\n            [leftIcons, selectedImage],\n        );\n\n        /**\n         * This function handles changes of the input\n         */\n        const handleChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                const filteredLists: ISearchBoxItems[] = [];\n\n                activeList.forEach(({ list, groupName }) => {\n                    const newList = searchList({ items: list, searchString: event.target.value });\n\n                    if (newList.length > 0) {\n                        filteredLists.push({\n                            groupName,\n                            list: newList,\n                        });\n                    }\n                });\n\n                if (filteredLists.length === 0 && shouldAddInputToList) {\n                    filteredLists.push({\n                        groupName: undefined,\n                        list: [],\n                    });\n                }\n\n                setSelectedImage(undefined);\n\n                if (!shouldShowContentOnEmptyInput && !event.target.value) {\n                    setMatchingListsItems([]);\n                } else {\n                    setMatchingListsItems(filteredLists);\n                }\n\n                if (filteredLists.length !== 0) {\n                    handleOpen();\n                }\n\n                setValue(event.target.value);\n                setInputToListValue(event.target.value);\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n            },\n            [activeList, handleOpen, onChange, shouldAddInputToList, 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                const newItem = {\n                    ...item,\n                    text: item.text.replace('<b>', '').replace('</b>', '').replace('</b', ''),\n                };\n\n                setValue(newItem.text);\n                handleClose();\n\n                setSelectedImage(\n                    newItem.imageUrl ? (\n                        <StyledSearchBoxItemImage\n                            src={newItem.imageUrl}\n                            $shouldShowRoundImage={shouldShowRoundImage}\n                        />\n                    ) : undefined,\n                );\n\n                setMatchingListsItems([]);\n\n                if (typeof onSelect === 'function') {\n                    onSelect(newItem);\n                }\n            },\n            [handleClose, onSelect, shouldShowRoundImage],\n        );\n\n        const content = useMemo(() => {\n            const items: ReactElement[] = [];\n\n            matchingListsItems.forEach(({ groupName, list }, index) => {\n                if (hasMultipleGroups) {\n                    if (list.length <= 0) {\n                        return;\n                    }\n\n                    if (index !== 0) {\n                        items.push(<GroupName key={groupName} name={groupName ?? ''} />);\n                    }\n                }\n\n                list.forEach(({ id, text, imageUrl }) => {\n                    items.push(\n                        <SearchBoxItem\n                            key={`${id}_${groupName ?? ''}`}\n                            id={id}\n                            text={text}\n                            imageUrl={imageUrl}\n                            shouldShowRoundImage={shouldShowRoundImage}\n                            onSelect={handleSelect}\n                            groupName={groupName}\n                        />,\n                    );\n                });\n            });\n\n            if (shouldAddInputToList && inputToListValue !== '') {\n                items.push(\n                    <SearchBoxItem\n                        id=\"input-value\"\n                        onSelect={handleSelect}\n                        text={`<b>${inputToListValue}</b`}\n                    />,\n                );\n            }\n\n            return items;\n        }, [\n            matchingListsItems,\n            shouldAddInputToList,\n            inputToListValue,\n            hasMultipleGroups,\n            shouldShowRoundImage,\n            handleSelect,\n        ]);\n\n        useEffect(() => {\n            const handleKeyDown = (e: KeyboardEvent) => {\n                if (!isAnimating || matchingListsItems.length === 0) {\n                    return;\n                }\n\n                if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                    e.preventDefault();\n                    const children = contentRef.current?.children;\n\n                    if (!children) {\n                        return;\n                    }\n\n                    const childrenArray = Array.from(children);\n\n                    const newChildren = childrenArray.find((child) =>\n                        child.id.startsWith('searchbox-content__'),\n                    )?.children;\n\n                    if (newChildren && newChildren.length > 0) {\n                        const filteredChildren = Array.from(newChildren).filter(\n                            (child) => (child as HTMLElement).dataset.isgroupname !== 'true',\n                        );\n                        setFilteredChildrenArray(filteredChildren);\n\n                        const newIndex =\n                            focusedIndex !== null\n                                ? (focusedIndex +\n                                      (e.key === 'ArrowUp' ? -1 : 1) +\n                                      filteredChildren.length) %\n                                  filteredChildren.length\n                                : 0;\n\n                        if (focusedIndex !== null) {\n                            const prevElement = filteredChildren[focusedIndex] as HTMLDivElement;\n                            prevElement.tabIndex = -1;\n                        }\n\n                        setFocusedIndex(newIndex);\n\n                        const newElement = filteredChildren[newIndex] as HTMLDivElement;\n                        newElement.tabIndex = 0;\n                        newElement.focus();\n                    }\n                } else if (e.key === 'Enter' && focusedIndex !== null) {\n                    if (filteredChildrenArray) {\n                        const element = filteredChildrenArray[focusedIndex];\n\n                        if (!element) {\n                            return;\n                        }\n\n                        const { id, textContent } = element;\n\n                        let imageUrl: string | undefined;\n\n                        // Just Ignore, it works\n                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                        // @ts-ignore\n                        if (element.children[0]?.attributes.src) {\n                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                            // @ts-ignore\n                            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n                            imageUrl = element.children[0]?.attributes.src.nodeValue as string;\n                        }\n\n                        handleSelect({\n                            id: id.replace('search-box-item__', ''),\n                            text: textContent ?? '',\n                            imageUrl,\n                        });\n                    }\n                }\n            };\n\n            document.addEventListener('keydown', handleKeyDown);\n\n            return () => {\n                document.removeEventListener('keydown', handleKeyDown);\n            };\n        }, [\n            filteredChildrenArray,\n            focusedIndex,\n            handleSelect,\n            isAnimating,\n            matchingListsItems.length,\n        ]);\n\n        const handleKeyPress = useCallback((event: KeyboardEvent) => {\n            if (event.keyCode === 27) {\n                setMatchingListsItems([]);\n            }\n        }, []);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                clear: () => setValue(''),\n            }),\n            [],\n        );\n\n        useEffect(() => {\n            document.addEventListener('keydown', handleKeyPress);\n\n            return () => {\n                document.addEventListener('keydown', handleKeyPress);\n            };\n        }, [handleKeyPress]);\n\n        useEffect(() => {\n            if (!newContainer) {\n                return;\n            }\n\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isAnimating && matchingListsItems.length !== 0 && (\n                            <SearchBoxBody\n                                filterButtons={filterButtons}\n                                selectedGroups={groups}\n                                width={width}\n                                coordinates={internalCoordinates}\n                                browser={browser?.name}\n                                height={height}\n                                ref={contentRef}\n                                onGroupSelect={handleFilterButtonsGroupSelect}\n                                shouldHideFilterButtons={shouldHideFilterButtons}\n                            >\n                                {content}\n                            </SearchBoxBody>\n                        )}\n                    </AnimatePresence>,\n                    newContainer,\n                ),\n            );\n        }, [\n            browser?.name,\n            newContainer,\n            content,\n            filterButtons,\n            groups,\n            height,\n            internalCoordinates,\n            isAnimating,\n            width,\n            shouldHideFilterButtons,\n            matchingListsItems.length,\n        ]);\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                            onKeyDown={onKeyDown}\n                            leftElement={leftElement}\n                            rightElement={rightElement}\n                            value={value}\n                        />\n                    </div>\n                    {portal}\n                </StyledSearchBox>\n            ),\n            [\n                handleBlur,\n                handleChange,\n                handleFocus,\n                leftElement,\n                onKeyDown,\n                placeholder,\n                portal,\n                rightElement,\n                value,\n            ],\n        );\n    },\n);\n\nSearchBox.displayName = 'SearchBox';\n\nexport default SearchBox;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/hooks/uuid.js

@@ -7,7 +7,7 @@ exports.useUuid = void 0;
 var _react = require("react");
 var _uuid = require("uuid");
 const useUuid = () => {
-  const [uuid] = (0, _react.useState)((0, _uuid.v4)());
+  const [uuid] = (0, _react.useState)(_uuid.v4);
   return uuid;
 };
 exports.useUuid = useUuid;

package/lib/cjs/hooks/uuid.js.map

@@ -1 +1 @@
-{"version":3,"file":"uuid.js","names":["_react","require","_uuid","useUuid","uuid","useState","uuidV4","exports"],"sources":["../../../src/hooks/uuid.ts"],"sourcesContent":["import { useState } from 'react';\nimport { v4 as uuidV4 } from 'uuid';\n\nexport const useUuid = () => {\n    const [uuid] = useState(uuidV4());\n\n    return uuid;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAEO,MAAME,OAAO,GAAGA,CAAA,KAAM;EACzB,MAAM,CAACC,IAAI,CAAC,GAAG,IAAAC,eAAQ,EAAC,IAAAC,QAAM,EAAC,CAAC,CAAC;EAEjC,OAAOF,IAAI;AACf,CAAC;AAACG,OAAA,CAAAJ,OAAA,GAAAA,OAAA","ignoreList":[]}
+{"version":3,"file":"uuid.js","names":["_react","require","_uuid","useUuid","uuid","useState","uuidV4","exports"],"sources":["../../../src/hooks/uuid.ts"],"sourcesContent":["import { useState } from 'react';\nimport { v4 as uuidV4 } from 'uuid';\n\nexport const useUuid = () => {\n    const [uuid] = useState(uuidV4);\n\n    return uuid;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAEO,MAAME,OAAO,GAAGA,CAAA,KAAM;EACzB,MAAM,CAACC,IAAI,CAAC,GAAG,IAAAC,eAAQ,EAACC,QAAM,CAAC;EAE/B,OAAOF,IAAI;AACf,CAAC;AAACG,OAAA,CAAAJ,OAAA,GAAAA,OAAA","ignoreList":[]}

package/lib/esm/components/checkbox/Checkbox.js

@@ -11,7 +11,7 @@ const Checkbox = _ref => {
     onChange,
     shouldShowAsSwitch,
     shouldShowCentered = false,
-    shouldChangeOnLabelClick = false
+    shouldChangeOnLabelClick = true
   } = _ref;
   const [isActive, setIsActive] = useState(isChecked ?? false);
   const handleChange = useCallback(event => {

package/lib/esm/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["React","useCallback","useMemo","useState","useUuid","getHeightOfSingleTextLine","StyledCheckbox","StyledCheckboxBox","StyledCheckboxInput","StyledCheckboxLabel","Checkbox","_ref","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","shouldShowCentered","shouldChangeOnLabelClick","isActive","setIsActive","handleChange","event","target","checked","uuid","lineHeight","undefined","createElement","disabled","id","type","htmlFor","$isChecked","$isDisabled","$shouldShowAsSwitch","$lineHeight","className","$shouldChangeOnLabelClick","displayName"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    ReactElement,\n    useCallback,\n    useMemo,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport {\n    StyledCheckbox,\n    StyledCheckboxBox,\n    StyledCheckboxInput,\n    StyledCheckboxLabel,\n} from './Checkbox.styles';\n\nexport type CheckboxProps = {\n    /**\n     * Text for checkbox or switch\n     */\n    children?: ReactElement | string;\n    /**\n     * Indicates whether the checkbox or switch is selected\n     */\n    isChecked?: boolean;\n    /**\n     * Disables the checkbox or switch so it cannot be toggled\n     */\n    isDisabled?: boolean;\n    /**\n     * Classname for the label\n     */\n    labelClassName?: string;\n    /**\n     * Function to be executed if the checked value changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Whether the label should change the state\n     */\n    shouldChangeOnLabelClick?: boolean;\n    /**\n     * Changes the design to use switch instead of checkbox\n     */\n    shouldShowAsSwitch?: boolean;\n    /**\n     * Whether the Checkbox should be displayed centered to the label or at the top\n     */\n    shouldShowCentered?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n    children,\n    isChecked,\n    isDisabled,\n    labelClassName,\n    onChange,\n    shouldShowAsSwitch,\n    shouldShowCentered = false,\n    shouldChangeOnLabelClick = false,\n}) => {\n    const [isActive, setIsActive] = useState(isChecked ?? false);\n\n    const handleChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setIsActive(event.target.checked);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [onChange],\n    );\n\n    const uuid = useUuid();\n\n    const lineHeight = useMemo(\n        () => (!children || shouldShowCentered ? undefined : getHeightOfSingleTextLine()),\n        [children, shouldShowCentered],\n    );\n\n    return (\n        <StyledCheckbox>\n            <StyledCheckboxInput\n                checked={isChecked}\n                disabled={isDisabled}\n                id={uuid}\n                onChange={handleChange}\n                type=\"checkbox\"\n            />\n            <StyledCheckboxBox\n                htmlFor={uuid}\n                $isChecked={isChecked ?? isActive}\n                $isDisabled={isDisabled}\n                $shouldShowAsSwitch={shouldShowAsSwitch}\n                $lineHeight={lineHeight}\n            />\n            <StyledCheckboxLabel\n                className={labelClassName}\n                $isDisabled={isDisabled}\n                $shouldChangeOnLabelClick={shouldChangeOnLabelClick}\n                htmlFor={shouldChangeOnLabelClick ? uuid : undefined}\n            >\n                {children}\n            </StyledCheckboxLabel>\n        </StyledCheckbox>\n    );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"AAAA,OAAOA,KAAK,IAKRC,WAAW,EACXC,OAAO,EACPC,QAAQ,QACL,OAAO;AACd,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SAASC,yBAAyB,QAAQ,uBAAuB;AACjE,SACIC,cAAc,EACdC,iBAAiB,EACjBC,mBAAmB,EACnBC,mBAAmB,QAChB,mBAAmB;AAqC1B,MAAMC,QAA2B,GAAGC,IAAA,IAS9B;EAAA,IAT+B;IACjCC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,cAAc;IACdC,QAAQ;IACRC,kBAAkB;IAClBC,kBAAkB,GAAG,KAAK;IAC1BC,wBAAwB,GAAG;EAC/B,CAAC,GAAAR,IAAA;EACG,MAAM,CAACS,QAAQ,EAAEC,WAAW,CAAC,GAAGlB,QAAQ,CAACU,SAAS,IAAI,KAAK,CAAC;EAE5D,MAAMS,YAAY,GAAGrB,WAAW,CAC3BsB,KAAoC,IAAK;IACtCF,WAAW,CAACE,KAAK,CAACC,MAAM,CAACC,OAAO,CAAC;IAEjC,IAAI,OAAOT,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACO,KAAK,CAAC;IACnB;EACJ,CAAC,EACD,CAACP,QAAQ,CACb,CAAC;EAED,MAAMU,IAAI,GAAGtB,OAAO,CAAC,CAAC;EAEtB,MAAMuB,UAAU,GAAGzB,OAAO,CACtB,MAAO,CAACU,QAAQ,IAAIM,kBAAkB,GAAGU,SAAS,GAAGvB,yBAAyB,CAAC,CAAE,EACjF,CAACO,QAAQ,EAAEM,kBAAkB,CACjC,CAAC;EAED,oBACIlB,KAAA,CAAA6B,aAAA,CAACvB,cAAc,qBACXN,KAAA,CAAA6B,aAAA,CAACrB,mBAAmB;IAChBiB,OAAO,EAAEZ,SAAU;IACnBiB,QAAQ,EAAEhB,UAAW;IACrBiB,EAAE,EAAEL,IAAK;IACTV,QAAQ,EAAEM,YAAa;IACvBU,IAAI,EAAC;EAAU,CAClB,CAAC,eACFhC,KAAA,CAAA6B,aAAA,CAACtB,iBAAiB;IACd0B,OAAO,EAAEP,IAAK;IACdQ,UAAU,EAAErB,SAAS,IAAIO,QAAS;IAClCe,WAAW,EAAErB,UAAW;IACxBsB,mBAAmB,EAAEnB,kBAAmB;IACxCoB,WAAW,EAAEV;EAAW,CAC3B,CAAC,eACF3B,KAAA,CAAA6B,aAAA,CAACpB,mBAAmB;IAChB6B,SAAS,EAAEvB,cAAe;IAC1BoB,WAAW,EAAErB,UAAW;IACxByB,yBAAyB,EAAEpB,wBAAyB;IACpDc,OAAO,EAAEd,wBAAwB,GAAGO,IAAI,GAAGE;EAAU,GAEpDhB,QACgB,CACT,CAAC;AAEzB,CAAC;AAEDF,QAAQ,CAAC8B,WAAW,GAAG,UAAU;AAEjC,eAAe9B,QAAQ","ignoreList":[]}
+{"version":3,"file":"Checkbox.js","names":["React","useCallback","useMemo","useState","useUuid","getHeightOfSingleTextLine","StyledCheckbox","StyledCheckboxBox","StyledCheckboxInput","StyledCheckboxLabel","Checkbox","_ref","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","shouldShowCentered","shouldChangeOnLabelClick","isActive","setIsActive","handleChange","event","target","checked","uuid","lineHeight","undefined","createElement","disabled","id","type","htmlFor","$isChecked","$isDisabled","$shouldShowAsSwitch","$lineHeight","className","$shouldChangeOnLabelClick","displayName"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    ReactElement,\n    useCallback,\n    useMemo,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport {\n    StyledCheckbox,\n    StyledCheckboxBox,\n    StyledCheckboxInput,\n    StyledCheckboxLabel,\n} from './Checkbox.styles';\n\nexport type CheckboxProps = {\n    /**\n     * Text for checkbox or switch\n     */\n    children?: ReactElement | string;\n    /**\n     * Indicates whether the checkbox or switch is selected\n     */\n    isChecked?: boolean;\n    /**\n     * Disables the checkbox or switch so it cannot be toggled\n     */\n    isDisabled?: boolean;\n    /**\n     * Classname for the label\n     */\n    labelClassName?: string;\n    /**\n     * Function to be executed if the checked value changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Whether the label should change the state of the checkbox\n     */\n    shouldChangeOnLabelClick?: boolean;\n    /**\n     * Changes the design to use switch instead of checkbox\n     */\n    shouldShowAsSwitch?: boolean;\n    /**\n     * Whether the Checkbox should be displayed centered to the label or at the top\n     */\n    shouldShowCentered?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n    children,\n    isChecked,\n    isDisabled,\n    labelClassName,\n    onChange,\n    shouldShowAsSwitch,\n    shouldShowCentered = false,\n    shouldChangeOnLabelClick = true,\n}) => {\n    const [isActive, setIsActive] = useState(isChecked ?? false);\n\n    const handleChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setIsActive(event.target.checked);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [onChange],\n    );\n\n    const uuid = useUuid();\n\n    const lineHeight = useMemo(\n        () => (!children || shouldShowCentered ? undefined : getHeightOfSingleTextLine()),\n        [children, shouldShowCentered],\n    );\n\n    return (\n        <StyledCheckbox>\n            <StyledCheckboxInput\n                checked={isChecked}\n                disabled={isDisabled}\n                id={uuid}\n                onChange={handleChange}\n                type=\"checkbox\"\n            />\n            <StyledCheckboxBox\n                htmlFor={uuid}\n                $isChecked={isChecked ?? isActive}\n                $isDisabled={isDisabled}\n                $shouldShowAsSwitch={shouldShowAsSwitch}\n                $lineHeight={lineHeight}\n            />\n            <StyledCheckboxLabel\n                className={labelClassName}\n                $isDisabled={isDisabled}\n                $shouldChangeOnLabelClick={shouldChangeOnLabelClick}\n                htmlFor={shouldChangeOnLabelClick ? uuid : undefined}\n            >\n                {children}\n            </StyledCheckboxLabel>\n        </StyledCheckbox>\n    );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"AAAA,OAAOA,KAAK,IAKRC,WAAW,EACXC,OAAO,EACPC,QAAQ,QACL,OAAO;AACd,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SAASC,yBAAyB,QAAQ,uBAAuB;AACjE,SACIC,cAAc,EACdC,iBAAiB,EACjBC,mBAAmB,EACnBC,mBAAmB,QAChB,mBAAmB;AAqC1B,MAAMC,QAA2B,GAAGC,IAAA,IAS9B;EAAA,IAT+B;IACjCC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,cAAc;IACdC,QAAQ;IACRC,kBAAkB;IAClBC,kBAAkB,GAAG,KAAK;IAC1BC,wBAAwB,GAAG;EAC/B,CAAC,GAAAR,IAAA;EACG,MAAM,CAACS,QAAQ,EAAEC,WAAW,CAAC,GAAGlB,QAAQ,CAACU,SAAS,IAAI,KAAK,CAAC;EAE5D,MAAMS,YAAY,GAAGrB,WAAW,CAC3BsB,KAAoC,IAAK;IACtCF,WAAW,CAACE,KAAK,CAACC,MAAM,CAACC,OAAO,CAAC;IAEjC,IAAI,OAAOT,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACO,KAAK,CAAC;IACnB;EACJ,CAAC,EACD,CAACP,QAAQ,CACb,CAAC;EAED,MAAMU,IAAI,GAAGtB,OAAO,CAAC,CAAC;EAEtB,MAAMuB,UAAU,GAAGzB,OAAO,CACtB,MAAO,CAACU,QAAQ,IAAIM,kBAAkB,GAAGU,SAAS,GAAGvB,yBAAyB,CAAC,CAAE,EACjF,CAACO,QAAQ,EAAEM,kBAAkB,CACjC,CAAC;EAED,oBACIlB,KAAA,CAAA6B,aAAA,CAACvB,cAAc,qBACXN,KAAA,CAAA6B,aAAA,CAACrB,mBAAmB;IAChBiB,OAAO,EAAEZ,SAAU;IACnBiB,QAAQ,EAAEhB,UAAW;IACrBiB,EAAE,EAAEL,IAAK;IACTV,QAAQ,EAAEM,YAAa;IACvBU,IAAI,EAAC;EAAU,CAClB,CAAC,eACFhC,KAAA,CAAA6B,aAAA,CAACtB,iBAAiB;IACd0B,OAAO,EAAEP,IAAK;IACdQ,UAAU,EAAErB,SAAS,IAAIO,QAAS;IAClCe,WAAW,EAAErB,UAAW;IACxBsB,mBAAmB,EAAEnB,kBAAmB;IACxCoB,WAAW,EAAEV;EAAW,CAC3B,CAAC,eACF3B,KAAA,CAAA6B,aAAA,CAACpB,mBAAmB;IAChB6B,SAAS,EAAEvB,cAAe;IAC1BoB,WAAW,EAAErB,UAAW;IACxByB,yBAAyB,EAAEpB,wBAAyB;IACpDc,OAAO,EAAEd,wBAAwB,GAAGO,IAAI,GAAGE;EAAU,GAEpDhB,QACgB,CACT,CAAC;AAEzB,CAAC;AAEDF,QAAQ,CAAC8B,WAAW,GAAG,UAAU;AAEjC,eAAe9B,QAAQ","ignoreList":[]}

package/lib/esm/components/checkbox/Checkbox.styles.js

@@ -159,5 +159,6 @@ export const StyledCheckboxLabel = styled.label`
   return $isDisabled ? 0.5 : 1;
 }};
     transition: opacity 0.2s ease;
+    user-select: none;
 `;
 //# sourceMappingURL=Checkbox.styles.js.map

package/lib/esm/components/checkbox/Checkbox.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.styles.js","names":["styled","css","getCheckBoxPosition","StyledCheckbox","div","StyledCheckboxInput","input","StyledCheckboxBox","label","_ref","theme","text","_ref2","$isDisabled","_ref3","_ref4","$shouldShowAsSwitch","_ref5","$isChecked","$lineHeight","Number","fontSize","_ref6","green","red","_ref7","_ref8","_ref9","_ref10","_ref11","_ref12","StyledCheckboxLabel","_ref13","_ref14","$shouldChangeOnLabelClick","_ref15"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { getCheckBoxPosition } from '../../utils/checkBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n    align-items: center;\n    display: flex;\n    position: relative;\n    width: 100%;\n    min-height: 20px;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n    display: none;\n`;\n\ntype StyledCheckboxBoxProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $isChecked?: CheckboxProps['isChecked'];\n    $lineHeight?: number;\n}>;\n\nexport const StyledCheckboxBox = styled.label<StyledCheckboxBoxProps>`\n    color: ${({ theme }: StyledCheckboxBoxProps) => theme.text};\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    padding-left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '48px' : '20px')};\n    transition: opacity 0.2s ease;\n    user-select: none;\n\n    &:after {\n        ${({ $isChecked, $shouldShowAsSwitch, $lineHeight, theme }: StyledCheckboxBoxProps) =>\n            $shouldShowAsSwitch\n                ? css`\n                      background-color: white;\n                      border-radius: 50%;\n                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n                      height: 16px;\n                      left: 7px;\n                      top: ${$lineHeight\n                          ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 6}px`\n                          : '50%'};\n                      transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);\n                      transition: transform 0.2s ease;\n                      width: 16px;\n                  `\n                : css`\n                      border-right: 2px solid #fff;\n                      border-bottom: 2px solid #fff;\n                      height: 10px;\n                      left: 2px;\n                      opacity: ${$isChecked ? 1 : 0};\n                      top: ${$lineHeight\n                          ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 5}px`\n                          : 'calc(50% - 2px)'};\n                      transform: rotateZ(37deg) translateY(-50%);\n                      transition: opacity 0.2s ease;\n                      width: 5.5px;\n                  `}\n\n        content: ' ';\n        position: absolute;\n    }\n\n    &:before {\n        background-color: ${({\n            $isChecked,\n            $shouldShowAsSwitch,\n            theme,\n        }: StyledCheckboxBoxProps) => {\n            if ($shouldShowAsSwitch) {\n                return $isChecked ? theme.green : theme.red;\n            }\n\n            return $isChecked ? theme['408'] : theme['403'];\n        }};\n\n        ${({ $shouldShowAsSwitch, theme }) =>\n            !$shouldShowAsSwitch &&\n            css`\n                border: 1px solid rgba(${theme['409-rgb']}, 0.5);\n            `}\n\n        border-radius: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '100px' : 0)};\n        content: ' ';\n        height: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '13px' : '15px')};\n        left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '10px' : 0)};\n        position: absolute;\n        transition: background-color 0.2s ease;\n        width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '28px' : '15px')};\n        ${({ $lineHeight, theme, $shouldShowAsSwitch }: StyledCheckboxBoxProps) =>\n            $lineHeight\n                ? css`\n                      top: ${getCheckBoxPosition(Number(theme.fontSize)) ??\n                      5 + ($shouldShowAsSwitch ? 1 : 0)}px;\n                  `\n                : css`\n                      top: 50%;\n                      transform: translateY(-50%);\n                  `}\n    }\n}\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $shouldChangeOnLabelClick?: CheckboxProps['shouldChangeOnLabelClick'];\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n    color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n    cursor: ${({ $shouldChangeOnLabelClick }) =>\n        !$shouldChangeOnLabelClick ? 'default' : 'pointer'};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    transition: opacity 0.2s ease;\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Checkbox.styles.js","names":["styled","css","getCheckBoxPosition","StyledCheckbox","div","StyledCheckboxInput","input","StyledCheckboxBox","label","_ref","theme","text","_ref2","$isDisabled","_ref3","_ref4","$shouldShowAsSwitch","_ref5","$isChecked","$lineHeight","Number","fontSize","_ref6","green","red","_ref7","_ref8","_ref9","_ref10","_ref11","_ref12","StyledCheckboxLabel","_ref13","_ref14","$shouldChangeOnLabelClick","_ref15"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { getCheckBoxPosition } from '../../utils/checkBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n    align-items: center;\n    display: flex;\n    position: relative;\n    width: 100%;\n    min-height: 20px;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n    display: none;\n`;\n\ntype StyledCheckboxBoxProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $isChecked?: CheckboxProps['isChecked'];\n    $lineHeight?: number;\n}>;\n\nexport const StyledCheckboxBox = styled.label<StyledCheckboxBoxProps>`\n    color: ${({ theme }: StyledCheckboxBoxProps) => theme.text};\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    padding-left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '48px' : '20px')};\n    transition: opacity 0.2s ease;\n    user-select: none;\n\n    &:after {\n        ${({ $isChecked, $shouldShowAsSwitch, $lineHeight, theme }: StyledCheckboxBoxProps) =>\n            $shouldShowAsSwitch\n                ? css`\n                      background-color: white;\n                      border-radius: 50%;\n                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n                      height: 16px;\n                      left: 7px;\n                      top: ${$lineHeight\n                          ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 6}px`\n                          : '50%'};\n                      transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);\n                      transition: transform 0.2s ease;\n                      width: 16px;\n                  `\n                : css`\n                      border-right: 2px solid #fff;\n                      border-bottom: 2px solid #fff;\n                      height: 10px;\n                      left: 2px;\n                      opacity: ${$isChecked ? 1 : 0};\n                      top: ${$lineHeight\n                          ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 5}px`\n                          : 'calc(50% - 2px)'};\n                      transform: rotateZ(37deg) translateY(-50%);\n                      transition: opacity 0.2s ease;\n                      width: 5.5px;\n                  `}\n\n        content: ' ';\n        position: absolute;\n    }\n\n    &:before {\n        background-color: ${({\n            $isChecked,\n            $shouldShowAsSwitch,\n            theme,\n        }: StyledCheckboxBoxProps) => {\n            if ($shouldShowAsSwitch) {\n                return $isChecked ? theme.green : theme.red;\n            }\n\n            return $isChecked ? theme['408'] : theme['403'];\n        }};\n\n        ${({ $shouldShowAsSwitch, theme }) =>\n            !$shouldShowAsSwitch &&\n            css`\n                border: 1px solid rgba(${theme['409-rgb']}, 0.5);\n            `}\n\n        border-radius: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '100px' : 0)};\n        content: ' ';\n        height: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '13px' : '15px')};\n        left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '10px' : 0)};\n        position: absolute;\n        transition: background-color 0.2s ease;\n        width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '28px' : '15px')};\n        ${({ $lineHeight, theme, $shouldShowAsSwitch }: StyledCheckboxBoxProps) =>\n            $lineHeight\n                ? css`\n                      top: ${getCheckBoxPosition(Number(theme.fontSize)) ??\n                      5 + ($shouldShowAsSwitch ? 1 : 0)}px;\n                  `\n                : css`\n                      top: 50%;\n                      transform: translateY(-50%);\n                  `}\n    }\n}\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $shouldChangeOnLabelClick?: CheckboxProps['shouldChangeOnLabelClick'];\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n    color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n    cursor: ${({ $shouldChangeOnLabelClick }) =>\n        !$shouldChangeOnLabelClick ? 'default' : 'pointer'};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    transition: opacity 0.2s ease;\n    user-select: none;\n`;\n"],"mappings":"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","ignoreList":[]}

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

@@ -312,11 +312,9 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
       setMatchingListsItems(filteredMatchingListItems);
       if (filteredMatchingListItems.length !== 0) {
         handleOpen();
-      } else {
-        handleClose();
       }
     }
-  }, [activeList, handleClose, handleOpen, shouldAddInputToList, shouldShowContentOnEmptyInput, value]);
+  }, [activeList, handleOpen, shouldAddInputToList, shouldShowContentOnEmptyInput, value]);
 
   /**
    * This function filters the lists by input
@@ -416,18 +414,16 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
       setMatchingListsItems([]);
     } else {
       setMatchingListsItems(filteredLists);
-      if (filteredLists.length !== 0) {
-        handleOpen();
-      } else {
-        handleClose();
-      }
+    }
+    if (filteredLists.length !== 0) {
+      handleOpen();
     }
     setValue(event.target.value);
     setInputToListValue(event.target.value);
     if (typeof onChange === 'function') {
       onChange(event);
     }
-  }, [activeList, handleClose, handleOpen, onChange, shouldAddInputToList, shouldShowContentOnEmptyInput]);
+  }, [activeList, handleOpen, onChange, shouldAddInputToList, shouldShowContentOnEmptyInput]);
 
   /**
    * This function handles the blur event of the input
@@ -501,14 +497,9 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
     }
     return items;
   }, [matchingListsItems, shouldAddInputToList, inputToListValue, hasMultipleGroups, shouldShowRoundImage, handleSelect]);
-  useEffect(() => {
-    if (content.length > 0) {
-      handleOpen();
-    }
-  }, [content.length, handleOpen]);
   useEffect(() => {
     const handleKeyDown = e => {
-      if (!isAnimating) {
+      if (!isAnimating || matchingListsItems.length === 0) {
         return;
       }
       if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
@@ -565,7 +556,7 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
     return () => {
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [filteredChildrenArray, focusedIndex, handleSelect, isAnimating]);
+  }, [filteredChildrenArray, focusedIndex, handleSelect, isAnimating, matchingListsItems.length]);
   const handleKeyPress = useCallback(event => {
     if (event.keyCode === 27) {
       setMatchingListsItems([]);
@@ -586,7 +577,7 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
     }
     setPortal(() => /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(AnimatePresence, {
       initial: false
-    }, isAnimating && /*#__PURE__*/React.createElement(SearchBoxBody, {
+    }, isAnimating && matchingListsItems.length !== 0 && /*#__PURE__*/React.createElement(SearchBoxBody, {
       filterButtons: filterButtons,
       selectedGroups: groups,
       width: width,
@@ -597,7 +588,7 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
       onGroupSelect: handleFilterButtonsGroupSelect,
       shouldHideFilterButtons: shouldHideFilterButtons
     }, content)), newContainer));
-  }, [browser?.name, newContainer, content, filterButtons, groups, height, internalCoordinates, isAnimating, width, shouldHideFilterButtons]);
+  }, [browser?.name, newContainer, content, filterButtons, groups, height, internalCoordinates, isAnimating, width, shouldHideFilterButtons, matchingListsItems.length]);
   return useMemo(() => /*#__PURE__*/React.createElement(StyledSearchBox, {
     ref: boxRef
   }, /*#__PURE__*/React.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBox.js","names":["getDevice","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","createPortal","useTheme","calculateContentHeight","searchList","Icon","Input","GroupName","SearchBoxBody","SearchBoxItem","StyledSearchBoxItemImage","StyledSearchBox","StyledSearchBoxIcon","StyledSearchBoxLeftWrapper","SearchBox","_ref","ref","placeholder","leftIcons","lists","onChange","onBlur","onSelect","onKeyDown","selectedId","container","shouldHideFilterButtons","shouldShowRoundImage","shouldShowContentOnEmptyInput","shouldAddInputToList","shouldShowToggleIcon","matchingListsItems","setMatchingListsItems","selectedImage","setSelectedImage","value","setValue","isAnimating","setIsAnimating","height","setHeight","width","setWidth","focusedIndex","setFocusedIndex","hasMultipleGroups","setHasMultipleGroups","length","filteredChildrenArray","setFilteredChildrenArray","inputToListValue","setInputToListValue","groups","setGroups","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","newContainer","setNewContainer","boxRef","contentRef","inputRef","theme","browser","current","el","element","closest","Element","getBoundingClientRect","filterButtons","items","forEach","_ref2","groupName","push","id","text","activeList","newLists","list","includes","newMatchingItems","_ref3","newList","searchString","undefined","filteredMatchingListItems","map","_ref4","filter","item","handleOpen","bodyHeight","handleClose","handleFilterButtonsGroupSelect","keys","handleOutsideClick","event","contains","target","document","addEventListener","window","removeEventListener","textArray","_ref5","_ref6","input","getElementById","getInputWidth","offsetWidth","ResizeObserver","observe","_ref7","selectedItem","find","_ref8","imageUrl","createElement","src","$shouldShowRoundImage","handleFocus","_ref9","_ref10","_ref11","_ref12","_ref13","toLowerCase","handleClick","rightElement","onClick","icons","color","leftElement","handleChange","filteredLists","_ref14","handleBlur","handleSelect","newItem","replace","content","_ref15","index","key","name","_ref16","handleKeyDown","e","preventDefault","children","childrenArray","Array","from","newChildren","child","startsWith","filteredChildren","dataset","isgroupname","newIndex","prevElement","tabIndex","newElement","focus","textContent","attributes","nodeValue","handleKeyPress","keyCode","clear","initial","selectedGroups","coordinates","onGroupSelect","onFocus","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    KeyboardEventHandler,\n    ReactElement,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useTheme } from 'styled-components';\nimport type { IFilterButtonItem } from '../../types/filterButtons';\nimport type { ISearchBoxItem, ISearchBoxItems } from '../../types/searchBox';\nimport { calculateContentHeight } from '../../utils/calculate';\nimport { searchList } from '../../utils/searchBox';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport Input from '../input/Input';\nimport GroupName from './group-name/GroupName';\nimport SearchBoxBody from './search-box-body/SearchBoxBody';\nimport SearchBoxItem from './search-box-item/SearchBoxItem';\nimport { StyledSearchBoxItemImage } from './search-box-item/SearchBoxItem.styles';\nimport {\n    StyledSearchBox,\n    StyledSearchBoxIcon,\n    StyledSearchBoxLeftWrapper,\n} from './SearchBox.styles';\n\nexport type SearchBoxRef = {\n    clear: VoidFunction;\n};\n\nexport type SearchBoxProps = {\n    /**\n     * The element where the content of the `ComboBox` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * An optional icon that is displayed inside the left side of the input.\n     */\n    leftIcons?: string[];\n    /**\n     * List of groups with items that can be searched. It is possible to give only one list; if multiple lists are provided, the 'group name' parameter becomes mandatory.\n     */\n    lists: ISearchBoxItems[];\n    /**\n     * The 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 that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when an item is selected.\n     */\n    onSelect?: (item: ISearchBoxItem) => void;\n    /**\n     * Control the selected item. If you use this prop, make sure to update it when the user selects an item.\n     */\n    selectedId?: string;\n    /**\n     * If true, the value in the Input is displayed in the list.\n     */\n    shouldAddInputToList: boolean;\n    /**\n     * If true, the filter buttons are hidden.\n     */\n    shouldHideFilterButtons?: boolean;\n    /**\n     * Whether the full list of items should be displayed if the input is empty.\n     */\n    shouldShowContentOnEmptyInput?: boolean;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * Whether the icon to open and close the list should be displayed.\n     */\n    shouldShowToggleIcon?: boolean;\n};\n\nconst SearchBox: FC<SearchBoxProps> = forwardRef<SearchBoxRef, SearchBoxProps>(\n    (\n        {\n            placeholder,\n            leftIcons,\n            lists,\n            onChange,\n            onBlur,\n            onSelect,\n            onKeyDown,\n            selectedId,\n            container,\n            shouldHideFilterButtons = false,\n            shouldShowRoundImage,\n            shouldShowContentOnEmptyInput = true,\n            shouldAddInputToList = true,\n            shouldShowToggleIcon = false,\n        },\n        ref,\n    ) => {\n        const [matchingListsItems, setMatchingListsItems] = useState<ISearchBoxItems[]>(lists);\n        const [selectedImage, setSelectedImage] = useState<ReactElement>();\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        const [hasMultipleGroups, setHasMultipleGroups] = useState<boolean>(lists.length > 1);\n        const [filteredChildrenArray, setFilteredChildrenArray] = useState<Element[]>();\n        const [inputToListValue, setInputToListValue] = useState<string>('');\n        const [groups, setGroups] = useState<string[]>(['all']);\n        const [portal, setPortal] = useState<ReactPortal>();\n        const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n            x: 0,\n            y: 0,\n        });\n        const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n        const boxRef = useRef<HTMLDivElement>(null);\n        const contentRef = useRef<HTMLDivElement>(null);\n        const inputRef = useRef<HTMLInputElement | null>(null);\n\n        const theme = useTheme();\n\n        const { browser } = getDevice();\n\n        useEffect(() => {\n            if (boxRef.current && !container) {\n                const el = boxRef.current as HTMLElement;\n\n                const element = el.closest('.dialog-inner') || el.closest('body');\n\n                setNewContainer(element);\n            }\n        }, [container]);\n\n        useEffect(() => {\n            if (container instanceof Element) {\n                setNewContainer(container);\n            }\n        }, [container]);\n\n        useEffect(() => {\n            if (boxRef.current) {\n                const { x, y } = boxRef.current.getBoundingClientRect();\n\n                setInternalCoordinates({\n                    x,\n                    y,\n                });\n            }\n        }, []);\n\n        /**\n         * Checks if Lists are smaller then 1\n         */\n        useEffect(() => {\n            setHasMultipleGroups(lists.length > 1);\n        }, [lists]);\n\n        const filterButtons = useMemo(() => {\n            const items: IFilterButtonItem[] = [];\n\n            if (lists.length <= 1) {\n                return items;\n            }\n\n            lists.forEach(({ groupName }) => {\n                if (groupName) {\n                    items.push({\n                        id: groupName,\n                        text: groupName,\n                    });\n                }\n            });\n\n            return items;\n        }, [lists]);\n\n        /**\n         * Filters the lists by the FilterButtons\n         */\n        const activeList = useMemo(() => {\n            let newLists: ISearchBoxItems[] = [];\n\n            if (groups[0] === 'all') {\n                newLists = lists;\n            } else {\n                lists.forEach((list) => {\n                    if (list.groupName && groups.includes(list.groupName)) {\n                        newLists.push(list);\n                    }\n                });\n            }\n\n            const newMatchingItems: ISearchBoxItems[] = [];\n\n            newLists.forEach(({ list, groupName }) => {\n                const newList = searchList({ items: list, searchString: value });\n\n                if (newList.length > 0) {\n                    newMatchingItems.push({\n                        groupName,\n                        list: newList,\n                    });\n                }\n            });\n\n            if (newMatchingItems.length === 0 && shouldAddInputToList) {\n                newMatchingItems.push({\n                    groupName: undefined,\n                    list: [],\n                });\n            }\n\n            const filteredMatchingListItems = newMatchingItems.map(({ list, groupName }) => ({\n                groupName,\n                list: list.filter(\n                    (item) => !(newMatchingItems.length === 1 && item.text === value),\n                ),\n            }));\n\n            setMatchingListsItems(filteredMatchingListItems);\n\n            return newLists;\n        }, [groups, lists, shouldAddInputToList, value]);\n\n        const handleOpen = useCallback(() => {\n            if (boxRef.current) {\n                const { x, y, height: bodyHeight } = boxRef.current.getBoundingClientRect();\n\n                setInternalCoordinates({\n                    x,\n                    y: y + bodyHeight,\n                });\n\n                setIsAnimating(true);\n            }\n        }, []);\n\n        const handleClose = useCallback(() => {\n            setIsAnimating(false);\n        }, []);\n\n        const handleFilterButtonsGroupSelect = (keys: string[]) => {\n            setGroups(keys.length === 0 ? ['all'] : keys);\n        };\n\n        /**\n         * This function closes the list of items\n         */\n        const handleOutsideClick = useCallback(\n            (event: MouseEvent) => {\n                if (\n                    boxRef.current &&\n                    !boxRef.current.contains(event.target as Node) &&\n                    contentRef.current &&\n                    !contentRef.current.contains(event.target as Node)\n                ) {\n                    handleClose();\n                }\n            },\n            [handleClose],\n        );\n\n        /**\n         * This hook listens for clicks\n         */\n        useEffect(() => {\n            document.addEventListener('click', handleOutsideClick);\n            window.addEventListener('blur', () => handleClose());\n\n            return () => {\n                document.removeEventListener('click', handleOutsideClick);\n                window.addEventListener('blur', () => handleClose());\n            };\n        }, [handleOutsideClick, boxRef, handleClose]);\n\n        /**\n         * This hook calculates the height\n         */\n        useEffect(() => {\n            const textArray: string[] = [];\n\n            activeList.forEach(({ list, groupName }) => {\n                list.forEach(({ text }) => textArray.push(text));\n                if (!groupName) {\n                    return;\n                }\n                textArray.push(groupName);\n            });\n\n            if (shouldAddInputToList && inputToListValue !== '') {\n                textArray.push(inputToListValue);\n            }\n\n            setHeight(calculateContentHeight(textArray));\n        }, [inputToListValue, activeList, placeholder, shouldAddInputToList]);\n\n        /**\n         * This hook calculates the width\n         */\n        useEffect(() => {\n            const input = document.getElementById('search_box_input');\n\n            const getInputWidth = () => {\n                if (input) {\n                    setWidth(input.offsetWidth);\n                }\n            };\n\n            if (input) {\n                new ResizeObserver(getInputWidth).observe(input);\n            }\n        }, []);\n\n        useEffect(() => {\n            if (selectedId) {\n                activeList.forEach(({ list }) => {\n                    const selectedItem = list.find(({ id }) => id === selectedId);\n                    if (selectedItem) {\n                        setValue(selectedItem.text);\n\n                        if (selectedItem.imageUrl) {\n                            setSelectedImage(\n                                <StyledSearchBoxItemImage\n                                    src={selectedItem.imageUrl}\n                                    $shouldShowRoundImage={shouldShowRoundImage}\n                                />,\n                            );\n                        }\n                    }\n                });\n            }\n        }, [activeList, selectedId, shouldShowRoundImage]);\n\n        /**\n         * This hook resets the value if the selectedId changes to undefined. This is an own useEffect because the value\n         * should not be reset if the list changes and the selectedId is still undefined.\n         */\n        useEffect(() => {\n            if (!selectedId) {\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                const newMatchingItems: ISearchBoxItems[] = [];\n\n                activeList.forEach(({ list, groupName }) => {\n                    const newList = searchList({ items: list, searchString: value });\n\n                    if (newList.length > 0) {\n                        newMatchingItems.push({\n                            groupName,\n                            list: newList,\n                        });\n                    }\n                });\n\n                if (newMatchingItems.length === 0 && shouldAddInputToList) {\n                    newMatchingItems.push({\n                        groupName: undefined,\n                        list: [],\n                    });\n                }\n\n                const filteredMatchingListItems = newMatchingItems.map(({ list, groupName }) => ({\n                    groupName,\n                    list: list.filter(\n                        (item) => !(newMatchingItems.length === 1 && item.text === value),\n                    ),\n                }));\n\n                setMatchingListsItems(filteredMatchingListItems);\n\n                if (filteredMatchingListItems.length !== 0) {\n                    handleOpen();\n                } else {\n                    handleClose();\n                }\n            }\n        }, [\n            activeList,\n            handleClose,\n            handleOpen,\n            shouldAddInputToList,\n            shouldShowContentOnEmptyInput,\n            value,\n        ]);\n\n        /**\n         * This function filters the lists by input\n         */\n\n        useEffect(() => {\n            const newMatchingItems: ISearchBoxItems[] = [];\n\n            activeList.forEach(({ list, groupName }) => {\n                const newList = searchList({ items: list, searchString: value });\n\n                if (newList.length > 0) {\n                    newMatchingItems.push({\n                        groupName,\n                        list: newList,\n                    });\n                }\n            });\n\n            if (newMatchingItems.length === 0 && shouldAddInputToList) {\n                newMatchingItems.push({\n                    groupName: undefined,\n                    list: [],\n                });\n            }\n\n            if (shouldAddInputToList && inputToListValue !== '') {\n                newMatchingItems.forEach(({ list }) => {\n                    list.forEach(({ text }) => {\n                        if (text.toLowerCase() === inputToListValue.toLowerCase()) {\n                            setInputToListValue('');\n                        }\n                    });\n                });\n            }\n        }, [\n            inputToListValue,\n            activeList,\n            shouldAddInputToList,\n            shouldShowContentOnEmptyInput,\n            value,\n        ]);\n\n        const handleClick = useCallback(() => {\n            if (isAnimating) {\n                handleClose();\n            } else {\n                handleOpen();\n            }\n        }, [handleClose, handleOpen, isAnimating]);\n\n        const rightElement = useMemo(() => {\n            if (!shouldShowToggleIcon) {\n                return undefined;\n            }\n\n            return (\n                <StyledSearchBoxIcon onClick={handleClick}>\n                    <Icon icons={['fa fa-chevron-down']} color={theme['006'] as string} />\n                </StyledSearchBoxIcon>\n            );\n        }, [handleClick, shouldShowToggleIcon, theme]);\n\n        const leftElement = useMemo(\n            () => (\n                <StyledSearchBoxLeftWrapper>\n                    {leftIcons && <Icon icons={leftIcons} />}\n                    {selectedImage && selectedImage}\n                </StyledSearchBoxLeftWrapper>\n            ),\n            [leftIcons, selectedImage],\n        );\n\n        /**\n         * This function handles changes of the input\n         */\n        const handleChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                const filteredLists: ISearchBoxItems[] = [];\n\n                activeList.forEach(({ list, groupName }) => {\n                    const newList = searchList({ items: list, searchString: event.target.value });\n\n                    if (newList.length > 0) {\n                        filteredLists.push({\n                            groupName,\n                            list: newList,\n                        });\n                    }\n                });\n\n                if (filteredLists.length === 0 && shouldAddInputToList) {\n                    filteredLists.push({\n                        groupName: undefined,\n                        list: [],\n                    });\n                }\n\n                setSelectedImage(undefined);\n\n                if (!shouldShowContentOnEmptyInput && !event.target.value) {\n                    setMatchingListsItems([]);\n                } else {\n                    setMatchingListsItems(filteredLists);\n\n                    if (filteredLists.length !== 0) {\n                        handleOpen();\n                    } else {\n                        handleClose();\n                    }\n                }\n\n                setValue(event.target.value);\n                setInputToListValue(event.target.value);\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n            },\n            [\n                activeList,\n                handleClose,\n                handleOpen,\n                onChange,\n                shouldAddInputToList,\n                shouldShowContentOnEmptyInput,\n            ],\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                const newItem = {\n                    ...item,\n                    text: item.text.replace('<b>', '').replace('</b>', '').replace('</b', ''),\n                };\n\n                setValue(newItem.text);\n                handleClose();\n\n                setSelectedImage(\n                    newItem.imageUrl ? (\n                        <StyledSearchBoxItemImage\n                            src={newItem.imageUrl}\n                            $shouldShowRoundImage={shouldShowRoundImage}\n                        />\n                    ) : undefined,\n                );\n\n                setMatchingListsItems([]);\n\n                if (typeof onSelect === 'function') {\n                    onSelect(newItem);\n                }\n            },\n            [handleClose, onSelect, shouldShowRoundImage],\n        );\n\n        const content = useMemo(() => {\n            const items: ReactElement[] = [];\n\n            matchingListsItems.forEach(({ groupName, list }, index) => {\n                if (hasMultipleGroups) {\n                    if (list.length <= 0) {\n                        return;\n                    }\n\n                    if (index !== 0) {\n                        items.push(<GroupName key={groupName} name={groupName ?? ''} />);\n                    }\n                }\n\n                list.forEach(({ id, text, imageUrl }) => {\n                    items.push(\n                        <SearchBoxItem\n                            key={`${id}_${groupName ?? ''}`}\n                            id={id}\n                            text={text}\n                            imageUrl={imageUrl}\n                            shouldShowRoundImage={shouldShowRoundImage}\n                            onSelect={handleSelect}\n                            groupName={groupName}\n                        />,\n                    );\n                });\n            });\n\n            if (shouldAddInputToList && inputToListValue !== '') {\n                items.push(\n                    <SearchBoxItem\n                        id=\"input-value\"\n                        onSelect={handleSelect}\n                        text={`<b>${inputToListValue}</b`}\n                    />,\n                );\n            }\n\n            return items;\n        }, [\n            matchingListsItems,\n            shouldAddInputToList,\n            inputToListValue,\n            hasMultipleGroups,\n            shouldShowRoundImage,\n            handleSelect,\n        ]);\n\n        useEffect(() => {\n            if (content.length > 0) {\n                handleOpen();\n            }\n        }, [content.length, handleOpen]);\n\n        useEffect(() => {\n            const handleKeyDown = (e: KeyboardEvent) => {\n                if (!isAnimating) {\n                    return;\n                }\n\n                if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                    e.preventDefault();\n                    const children = contentRef.current?.children;\n\n                    if (!children) {\n                        return;\n                    }\n\n                    const childrenArray = Array.from(children);\n\n                    const newChildren = childrenArray.find((child) =>\n                        child.id.startsWith('searchbox-content__'),\n                    )?.children;\n\n                    if (newChildren && newChildren.length > 0) {\n                        const filteredChildren = Array.from(newChildren).filter(\n                            (child) => (child as HTMLElement).dataset.isgroupname !== 'true',\n                        );\n                        setFilteredChildrenArray(filteredChildren);\n\n                        const newIndex =\n                            focusedIndex !== null\n                                ? (focusedIndex +\n                                      (e.key === 'ArrowUp' ? -1 : 1) +\n                                      filteredChildren.length) %\n                                  filteredChildren.length\n                                : 0;\n\n                        if (focusedIndex !== null) {\n                            const prevElement = filteredChildren[focusedIndex] as HTMLDivElement;\n                            prevElement.tabIndex = -1;\n                        }\n\n                        setFocusedIndex(newIndex);\n\n                        const newElement = filteredChildren[newIndex] as HTMLDivElement;\n                        newElement.tabIndex = 0;\n                        newElement.focus();\n                    }\n                } else if (e.key === 'Enter' && focusedIndex !== null) {\n                    if (filteredChildrenArray) {\n                        const element = filteredChildrenArray[focusedIndex];\n\n                        if (!element) {\n                            return;\n                        }\n\n                        const { id, textContent } = element;\n\n                        let imageUrl: string | undefined;\n\n                        // Just Ignore, it works\n                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                        // @ts-ignore\n                        if (element.children[0]?.attributes.src) {\n                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                            // @ts-ignore\n                            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n                            imageUrl = element.children[0]?.attributes.src.nodeValue as string;\n                        }\n\n                        handleSelect({\n                            id: id.replace('search-box-item__', ''),\n                            text: textContent ?? '',\n                            imageUrl,\n                        });\n                    }\n                }\n            };\n\n            document.addEventListener('keydown', handleKeyDown);\n\n            return () => {\n                document.removeEventListener('keydown', handleKeyDown);\n            };\n        }, [filteredChildrenArray, focusedIndex, handleSelect, isAnimating]);\n\n        const handleKeyPress = useCallback((event: KeyboardEvent) => {\n            if (event.keyCode === 27) {\n                setMatchingListsItems([]);\n            }\n        }, []);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                clear: () => setValue(''),\n            }),\n            [],\n        );\n\n        useEffect(() => {\n            document.addEventListener('keydown', handleKeyPress);\n\n            return () => {\n                document.addEventListener('keydown', handleKeyPress);\n            };\n        }, [handleKeyPress]);\n\n        useEffect(() => {\n            if (!newContainer) {\n                return;\n            }\n\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isAnimating && (\n                            <SearchBoxBody\n                                filterButtons={filterButtons}\n                                selectedGroups={groups}\n                                width={width}\n                                coordinates={internalCoordinates}\n                                browser={browser?.name}\n                                height={height}\n                                ref={contentRef}\n                                onGroupSelect={handleFilterButtonsGroupSelect}\n                                shouldHideFilterButtons={shouldHideFilterButtons}\n                            >\n                                {content}\n                            </SearchBoxBody>\n                        )}\n                    </AnimatePresence>,\n                    newContainer,\n                ),\n            );\n        }, [\n            browser?.name,\n            newContainer,\n            content,\n            filterButtons,\n            groups,\n            height,\n            internalCoordinates,\n            isAnimating,\n            width,\n            shouldHideFilterButtons,\n        ]);\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                            onKeyDown={onKeyDown}\n                            leftElement={leftElement}\n                            rightElement={rightElement}\n                            value={value}\n                        />\n                    </div>\n                    {portal}\n                </StyledSearchBox>\n            ),\n            [\n                handleBlur,\n                handleChange,\n                handleFocus,\n                leftElement,\n                onKeyDown,\n                placeholder,\n                portal,\n                rightElement,\n                value,\n            ],\n        );\n    },\n);\n\nSearchBox.displayName = 'SearchBox';\n\nexport default SearchBox;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SearchBox.js","names":["getDevice","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","createPortal","useTheme","calculateContentHeight","searchList","Icon","Input","GroupName","SearchBoxBody","SearchBoxItem","StyledSearchBoxItemImage","StyledSearchBox","StyledSearchBoxIcon","StyledSearchBoxLeftWrapper","SearchBox","_ref","ref","placeholder","leftIcons","lists","onChange","onBlur","onSelect","onKeyDown","selectedId","container","shouldHideFilterButtons","shouldShowRoundImage","shouldShowContentOnEmptyInput","shouldAddInputToList","shouldShowToggleIcon","matchingListsItems","setMatchingListsItems","selectedImage","setSelectedImage","value","setValue","isAnimating","setIsAnimating","height","setHeight","width","setWidth","focusedIndex","setFocusedIndex","hasMultipleGroups","setHasMultipleGroups","length","filteredChildrenArray","setFilteredChildrenArray","inputToListValue","setInputToListValue","groups","setGroups","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","newContainer","setNewContainer","boxRef","contentRef","inputRef","theme","browser","current","el","element","closest","Element","getBoundingClientRect","filterButtons","items","forEach","_ref2","groupName","push","id","text","activeList","newLists","list","includes","newMatchingItems","_ref3","newList","searchString","undefined","filteredMatchingListItems","map","_ref4","filter","item","handleOpen","bodyHeight","handleClose","handleFilterButtonsGroupSelect","keys","handleOutsideClick","event","contains","target","document","addEventListener","window","removeEventListener","textArray","_ref5","_ref6","input","getElementById","getInputWidth","offsetWidth","ResizeObserver","observe","_ref7","selectedItem","find","_ref8","imageUrl","createElement","src","$shouldShowRoundImage","handleFocus","_ref9","_ref10","_ref11","_ref12","_ref13","toLowerCase","handleClick","rightElement","onClick","icons","color","leftElement","handleChange","filteredLists","_ref14","handleBlur","handleSelect","newItem","replace","content","_ref15","index","key","name","_ref16","handleKeyDown","e","preventDefault","children","childrenArray","Array","from","newChildren","child","startsWith","filteredChildren","dataset","isgroupname","newIndex","prevElement","tabIndex","newElement","focus","textContent","attributes","nodeValue","handleKeyPress","keyCode","clear","initial","selectedGroups","coordinates","onGroupSelect","onFocus","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    KeyboardEventHandler,\n    ReactElement,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useTheme } from 'styled-components';\nimport type { IFilterButtonItem } from '../../types/filterButtons';\nimport type { ISearchBoxItem, ISearchBoxItems } from '../../types/searchBox';\nimport { calculateContentHeight } from '../../utils/calculate';\nimport { searchList } from '../../utils/searchBox';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport Input from '../input/Input';\nimport GroupName from './group-name/GroupName';\nimport SearchBoxBody from './search-box-body/SearchBoxBody';\nimport SearchBoxItem from './search-box-item/SearchBoxItem';\nimport { StyledSearchBoxItemImage } from './search-box-item/SearchBoxItem.styles';\nimport {\n    StyledSearchBox,\n    StyledSearchBoxIcon,\n    StyledSearchBoxLeftWrapper,\n} from './SearchBox.styles';\n\nexport type SearchBoxRef = {\n    clear: VoidFunction;\n};\n\nexport type SearchBoxProps = {\n    /**\n     * The element where the content of the `ComboBox` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * An optional icon that is displayed inside the left side of the input.\n     */\n    leftIcons?: string[];\n    /**\n     * List of groups with items that can be searched. It is possible to give only one list; if multiple lists are provided, the 'group name' parameter becomes mandatory.\n     */\n    lists: ISearchBoxItems[];\n    /**\n     * The 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 that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when an item is selected.\n     */\n    onSelect?: (item: ISearchBoxItem) => void;\n    /**\n     * Control the selected item. If you use this prop, make sure to update it when the user selects an item.\n     */\n    selectedId?: string;\n    /**\n     * If true, the value in the Input is displayed in the list.\n     */\n    shouldAddInputToList: boolean;\n    /**\n     * If true, the filter buttons are hidden.\n     */\n    shouldHideFilterButtons?: boolean;\n    /**\n     * Whether the full list of items should be displayed if the input is empty.\n     */\n    shouldShowContentOnEmptyInput?: boolean;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * Whether the icon to open and close the list should be displayed.\n     */\n    shouldShowToggleIcon?: boolean;\n};\n\nconst SearchBox: FC<SearchBoxProps> = forwardRef<SearchBoxRef, SearchBoxProps>(\n    (\n        {\n            placeholder,\n            leftIcons,\n            lists,\n            onChange,\n            onBlur,\n            onSelect,\n            onKeyDown,\n            selectedId,\n            container,\n            shouldHideFilterButtons = false,\n            shouldShowRoundImage,\n            shouldShowContentOnEmptyInput = true,\n            shouldAddInputToList = true,\n            shouldShowToggleIcon = false,\n        },\n        ref,\n    ) => {\n        const [matchingListsItems, setMatchingListsItems] = useState<ISearchBoxItems[]>(lists);\n        const [selectedImage, setSelectedImage] = useState<ReactElement>();\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        const [hasMultipleGroups, setHasMultipleGroups] = useState<boolean>(lists.length > 1);\n        const [filteredChildrenArray, setFilteredChildrenArray] = useState<Element[]>();\n        const [inputToListValue, setInputToListValue] = useState<string>('');\n        const [groups, setGroups] = useState<string[]>(['all']);\n        const [portal, setPortal] = useState<ReactPortal>();\n        const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n            x: 0,\n            y: 0,\n        });\n        const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n        const boxRef = useRef<HTMLDivElement>(null);\n        const contentRef = useRef<HTMLDivElement>(null);\n        const inputRef = useRef<HTMLInputElement | null>(null);\n\n        const theme = useTheme();\n\n        const { browser } = getDevice();\n\n        useEffect(() => {\n            if (boxRef.current && !container) {\n                const el = boxRef.current as HTMLElement;\n\n                const element = el.closest('.dialog-inner') || el.closest('body');\n\n                setNewContainer(element);\n            }\n        }, [container]);\n\n        useEffect(() => {\n            if (container instanceof Element) {\n                setNewContainer(container);\n            }\n        }, [container]);\n\n        useEffect(() => {\n            if (boxRef.current) {\n                const { x, y } = boxRef.current.getBoundingClientRect();\n\n                setInternalCoordinates({\n                    x,\n                    y,\n                });\n            }\n        }, []);\n\n        /**\n         * Checks if Lists are smaller then 1\n         */\n        useEffect(() => {\n            setHasMultipleGroups(lists.length > 1);\n        }, [lists]);\n\n        const filterButtons = useMemo(() => {\n            const items: IFilterButtonItem[] = [];\n\n            if (lists.length <= 1) {\n                return items;\n            }\n\n            lists.forEach(({ groupName }) => {\n                if (groupName) {\n                    items.push({\n                        id: groupName,\n                        text: groupName,\n                    });\n                }\n            });\n\n            return items;\n        }, [lists]);\n\n        /**\n         * Filters the lists by the FilterButtons\n         */\n        const activeList = useMemo(() => {\n            let newLists: ISearchBoxItems[] = [];\n\n            if (groups[0] === 'all') {\n                newLists = lists;\n            } else {\n                lists.forEach((list) => {\n                    if (list.groupName && groups.includes(list.groupName)) {\n                        newLists.push(list);\n                    }\n                });\n            }\n\n            const newMatchingItems: ISearchBoxItems[] = [];\n\n            newLists.forEach(({ list, groupName }) => {\n                const newList = searchList({ items: list, searchString: value });\n\n                if (newList.length > 0) {\n                    newMatchingItems.push({\n                        groupName,\n                        list: newList,\n                    });\n                }\n            });\n\n            if (newMatchingItems.length === 0 && shouldAddInputToList) {\n                newMatchingItems.push({\n                    groupName: undefined,\n                    list: [],\n                });\n            }\n\n            const filteredMatchingListItems = newMatchingItems.map(({ list, groupName }) => ({\n                groupName,\n                list: list.filter(\n                    (item) => !(newMatchingItems.length === 1 && item.text === value),\n                ),\n            }));\n\n            setMatchingListsItems(filteredMatchingListItems);\n\n            return newLists;\n        }, [groups, lists, shouldAddInputToList, value]);\n\n        const handleOpen = useCallback(() => {\n            if (boxRef.current) {\n                const { x, y, height: bodyHeight } = boxRef.current.getBoundingClientRect();\n\n                setInternalCoordinates({\n                    x,\n                    y: y + bodyHeight,\n                });\n\n                setIsAnimating(true);\n            }\n        }, []);\n\n        const handleClose = useCallback(() => {\n            setIsAnimating(false);\n        }, []);\n\n        const handleFilterButtonsGroupSelect = (keys: string[]) => {\n            setGroups(keys.length === 0 ? ['all'] : keys);\n        };\n\n        /**\n         * This function closes the list of items\n         */\n        const handleOutsideClick = useCallback(\n            (event: MouseEvent) => {\n                if (\n                    boxRef.current &&\n                    !boxRef.current.contains(event.target as Node) &&\n                    contentRef.current &&\n                    !contentRef.current.contains(event.target as Node)\n                ) {\n                    handleClose();\n                }\n            },\n            [handleClose],\n        );\n\n        /**\n         * This hook listens for clicks\n         */\n        useEffect(() => {\n            document.addEventListener('click', handleOutsideClick);\n            window.addEventListener('blur', () => handleClose());\n\n            return () => {\n                document.removeEventListener('click', handleOutsideClick);\n                window.addEventListener('blur', () => handleClose());\n            };\n        }, [handleOutsideClick, boxRef, handleClose]);\n\n        /**\n         * This hook calculates the height\n         */\n        useEffect(() => {\n            const textArray: string[] = [];\n\n            activeList.forEach(({ list, groupName }) => {\n                list.forEach(({ text }) => textArray.push(text));\n                if (!groupName) {\n                    return;\n                }\n                textArray.push(groupName);\n            });\n\n            if (shouldAddInputToList && inputToListValue !== '') {\n                textArray.push(inputToListValue);\n            }\n\n            setHeight(calculateContentHeight(textArray));\n        }, [inputToListValue, activeList, placeholder, shouldAddInputToList]);\n\n        /**\n         * This hook calculates the width\n         */\n        useEffect(() => {\n            const input = document.getElementById('search_box_input');\n\n            const getInputWidth = () => {\n                if (input) {\n                    setWidth(input.offsetWidth);\n                }\n            };\n\n            if (input) {\n                new ResizeObserver(getInputWidth).observe(input);\n            }\n        }, []);\n\n        useEffect(() => {\n            if (selectedId) {\n                activeList.forEach(({ list }) => {\n                    const selectedItem = list.find(({ id }) => id === selectedId);\n                    if (selectedItem) {\n                        setValue(selectedItem.text);\n\n                        if (selectedItem.imageUrl) {\n                            setSelectedImage(\n                                <StyledSearchBoxItemImage\n                                    src={selectedItem.imageUrl}\n                                    $shouldShowRoundImage={shouldShowRoundImage}\n                                />,\n                            );\n                        }\n                    }\n                });\n            }\n        }, [activeList, selectedId, shouldShowRoundImage]);\n\n        /**\n         * This hook resets the value if the selectedId changes to undefined. This is an own useEffect because the value\n         * should not be reset if the list changes and the selectedId is still undefined.\n         */\n        useEffect(() => {\n            if (!selectedId) {\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                const newMatchingItems: ISearchBoxItems[] = [];\n\n                activeList.forEach(({ list, groupName }) => {\n                    const newList = searchList({ items: list, searchString: value });\n\n                    if (newList.length > 0) {\n                        newMatchingItems.push({\n                            groupName,\n                            list: newList,\n                        });\n                    }\n                });\n\n                if (newMatchingItems.length === 0 && shouldAddInputToList) {\n                    newMatchingItems.push({\n                        groupName: undefined,\n                        list: [],\n                    });\n                }\n\n                const filteredMatchingListItems = newMatchingItems.map(({ list, groupName }) => ({\n                    groupName,\n                    list: list.filter(\n                        (item) => !(newMatchingItems.length === 1 && item.text === value),\n                    ),\n                }));\n\n                setMatchingListsItems(filteredMatchingListItems);\n\n                if (filteredMatchingListItems.length !== 0) {\n                    handleOpen();\n                }\n            }\n        }, [activeList, handleOpen, shouldAddInputToList, shouldShowContentOnEmptyInput, value]);\n\n        /**\n         * This function filters the lists by input\n         */\n\n        useEffect(() => {\n            const newMatchingItems: ISearchBoxItems[] = [];\n\n            activeList.forEach(({ list, groupName }) => {\n                const newList = searchList({ items: list, searchString: value });\n\n                if (newList.length > 0) {\n                    newMatchingItems.push({\n                        groupName,\n                        list: newList,\n                    });\n                }\n            });\n\n            if (newMatchingItems.length === 0 && shouldAddInputToList) {\n                newMatchingItems.push({\n                    groupName: undefined,\n                    list: [],\n                });\n            }\n\n            if (shouldAddInputToList && inputToListValue !== '') {\n                newMatchingItems.forEach(({ list }) => {\n                    list.forEach(({ text }) => {\n                        if (text.toLowerCase() === inputToListValue.toLowerCase()) {\n                            setInputToListValue('');\n                        }\n                    });\n                });\n            }\n        }, [\n            inputToListValue,\n            activeList,\n            shouldAddInputToList,\n            shouldShowContentOnEmptyInput,\n            value,\n        ]);\n\n        const handleClick = useCallback(() => {\n            if (isAnimating) {\n                handleClose();\n            } else {\n                handleOpen();\n            }\n        }, [handleClose, handleOpen, isAnimating]);\n\n        const rightElement = useMemo(() => {\n            if (!shouldShowToggleIcon) {\n                return undefined;\n            }\n\n            return (\n                <StyledSearchBoxIcon onClick={handleClick}>\n                    <Icon icons={['fa fa-chevron-down']} color={theme['006'] as string} />\n                </StyledSearchBoxIcon>\n            );\n        }, [handleClick, shouldShowToggleIcon, theme]);\n\n        const leftElement = useMemo(\n            () => (\n                <StyledSearchBoxLeftWrapper>\n                    {leftIcons && <Icon icons={leftIcons} />}\n                    {selectedImage && selectedImage}\n                </StyledSearchBoxLeftWrapper>\n            ),\n            [leftIcons, selectedImage],\n        );\n\n        /**\n         * This function handles changes of the input\n         */\n        const handleChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                const filteredLists: ISearchBoxItems[] = [];\n\n                activeList.forEach(({ list, groupName }) => {\n                    const newList = searchList({ items: list, searchString: event.target.value });\n\n                    if (newList.length > 0) {\n                        filteredLists.push({\n                            groupName,\n                            list: newList,\n                        });\n                    }\n                });\n\n                if (filteredLists.length === 0 && shouldAddInputToList) {\n                    filteredLists.push({\n                        groupName: undefined,\n                        list: [],\n                    });\n                }\n\n                setSelectedImage(undefined);\n\n                if (!shouldShowContentOnEmptyInput && !event.target.value) {\n                    setMatchingListsItems([]);\n                } else {\n                    setMatchingListsItems(filteredLists);\n                }\n\n                if (filteredLists.length !== 0) {\n                    handleOpen();\n                }\n\n                setValue(event.target.value);\n                setInputToListValue(event.target.value);\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n            },\n            [activeList, handleOpen, onChange, shouldAddInputToList, 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                const newItem = {\n                    ...item,\n                    text: item.text.replace('<b>', '').replace('</b>', '').replace('</b', ''),\n                };\n\n                setValue(newItem.text);\n                handleClose();\n\n                setSelectedImage(\n                    newItem.imageUrl ? (\n                        <StyledSearchBoxItemImage\n                            src={newItem.imageUrl}\n                            $shouldShowRoundImage={shouldShowRoundImage}\n                        />\n                    ) : undefined,\n                );\n\n                setMatchingListsItems([]);\n\n                if (typeof onSelect === 'function') {\n                    onSelect(newItem);\n                }\n            },\n            [handleClose, onSelect, shouldShowRoundImage],\n        );\n\n        const content = useMemo(() => {\n            const items: ReactElement[] = [];\n\n            matchingListsItems.forEach(({ groupName, list }, index) => {\n                if (hasMultipleGroups) {\n                    if (list.length <= 0) {\n                        return;\n                    }\n\n                    if (index !== 0) {\n                        items.push(<GroupName key={groupName} name={groupName ?? ''} />);\n                    }\n                }\n\n                list.forEach(({ id, text, imageUrl }) => {\n                    items.push(\n                        <SearchBoxItem\n                            key={`${id}_${groupName ?? ''}`}\n                            id={id}\n                            text={text}\n                            imageUrl={imageUrl}\n                            shouldShowRoundImage={shouldShowRoundImage}\n                            onSelect={handleSelect}\n                            groupName={groupName}\n                        />,\n                    );\n                });\n            });\n\n            if (shouldAddInputToList && inputToListValue !== '') {\n                items.push(\n                    <SearchBoxItem\n                        id=\"input-value\"\n                        onSelect={handleSelect}\n                        text={`<b>${inputToListValue}</b`}\n                    />,\n                );\n            }\n\n            return items;\n        }, [\n            matchingListsItems,\n            shouldAddInputToList,\n            inputToListValue,\n            hasMultipleGroups,\n            shouldShowRoundImage,\n            handleSelect,\n        ]);\n\n        useEffect(() => {\n            const handleKeyDown = (e: KeyboardEvent) => {\n                if (!isAnimating || matchingListsItems.length === 0) {\n                    return;\n                }\n\n                if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                    e.preventDefault();\n                    const children = contentRef.current?.children;\n\n                    if (!children) {\n                        return;\n                    }\n\n                    const childrenArray = Array.from(children);\n\n                    const newChildren = childrenArray.find((child) =>\n                        child.id.startsWith('searchbox-content__'),\n                    )?.children;\n\n                    if (newChildren && newChildren.length > 0) {\n                        const filteredChildren = Array.from(newChildren).filter(\n                            (child) => (child as HTMLElement).dataset.isgroupname !== 'true',\n                        );\n                        setFilteredChildrenArray(filteredChildren);\n\n                        const newIndex =\n                            focusedIndex !== null\n                                ? (focusedIndex +\n                                      (e.key === 'ArrowUp' ? -1 : 1) +\n                                      filteredChildren.length) %\n                                  filteredChildren.length\n                                : 0;\n\n                        if (focusedIndex !== null) {\n                            const prevElement = filteredChildren[focusedIndex] as HTMLDivElement;\n                            prevElement.tabIndex = -1;\n                        }\n\n                        setFocusedIndex(newIndex);\n\n                        const newElement = filteredChildren[newIndex] as HTMLDivElement;\n                        newElement.tabIndex = 0;\n                        newElement.focus();\n                    }\n                } else if (e.key === 'Enter' && focusedIndex !== null) {\n                    if (filteredChildrenArray) {\n                        const element = filteredChildrenArray[focusedIndex];\n\n                        if (!element) {\n                            return;\n                        }\n\n                        const { id, textContent } = element;\n\n                        let imageUrl: string | undefined;\n\n                        // Just Ignore, it works\n                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                        // @ts-ignore\n                        if (element.children[0]?.attributes.src) {\n                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                            // @ts-ignore\n                            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n                            imageUrl = element.children[0]?.attributes.src.nodeValue as string;\n                        }\n\n                        handleSelect({\n                            id: id.replace('search-box-item__', ''),\n                            text: textContent ?? '',\n                            imageUrl,\n                        });\n                    }\n                }\n            };\n\n            document.addEventListener('keydown', handleKeyDown);\n\n            return () => {\n                document.removeEventListener('keydown', handleKeyDown);\n            };\n        }, [\n            filteredChildrenArray,\n            focusedIndex,\n            handleSelect,\n            isAnimating,\n            matchingListsItems.length,\n        ]);\n\n        const handleKeyPress = useCallback((event: KeyboardEvent) => {\n            if (event.keyCode === 27) {\n                setMatchingListsItems([]);\n            }\n        }, []);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                clear: () => setValue(''),\n            }),\n            [],\n        );\n\n        useEffect(() => {\n            document.addEventListener('keydown', handleKeyPress);\n\n            return () => {\n                document.addEventListener('keydown', handleKeyPress);\n            };\n        }, [handleKeyPress]);\n\n        useEffect(() => {\n            if (!newContainer) {\n                return;\n            }\n\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isAnimating && matchingListsItems.length !== 0 && (\n                            <SearchBoxBody\n                                filterButtons={filterButtons}\n                                selectedGroups={groups}\n                                width={width}\n                                coordinates={internalCoordinates}\n                                browser={browser?.name}\n                                height={height}\n                                ref={contentRef}\n                                onGroupSelect={handleFilterButtonsGroupSelect}\n                                shouldHideFilterButtons={shouldHideFilterButtons}\n                            >\n                                {content}\n                            </SearchBoxBody>\n                        )}\n                    </AnimatePresence>,\n                    newContainer,\n                ),\n            );\n        }, [\n            browser?.name,\n            newContainer,\n            content,\n            filterButtons,\n            groups,\n            height,\n            internalCoordinates,\n            isAnimating,\n            width,\n            shouldHideFilterButtons,\n            matchingListsItems.length,\n        ]);\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                            onKeyDown={onKeyDown}\n                            leftElement={leftElement}\n                            rightElement={rightElement}\n                            value={value}\n                        />\n                    </div>\n                    {portal}\n                </StyledSearchBox>\n            ),\n            [\n                handleBlur,\n                handleChange,\n                handleFocus,\n                leftElement,\n                onKeyDown,\n                placeholder,\n                portal,\n                rightElement,\n                value,\n            ],\n        );\n    },\n);\n\nSearchBox.displayName = 'SearchBox';\n\nexport default SearchBox;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/hooks/uuid.js

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { v4 as uuidV4 } from 'uuid';
 export const useUuid = () => {
-  const [uuid] = useState(uuidV4());
+  const [uuid] = useState(uuidV4);
   return uuid;
 };
 //# sourceMappingURL=uuid.js.map

package/lib/esm/hooks/uuid.js.map

@@ -1 +1 @@
-{"version":3,"file":"uuid.js","names":["useState","v4","uuidV4","useUuid","uuid"],"sources":["../../../src/hooks/uuid.ts"],"sourcesContent":["import { useState } from 'react';\nimport { v4 as uuidV4 } from 'uuid';\n\nexport const useUuid = () => {\n    const [uuid] = useState(uuidV4());\n\n    return uuid;\n};\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,OAAO;AAChC,SAASC,EAAE,IAAIC,MAAM,QAAQ,MAAM;AAEnC,OAAO,MAAMC,OAAO,GAAGA,CAAA,KAAM;EACzB,MAAM,CAACC,IAAI,CAAC,GAAGJ,QAAQ,CAACE,MAAM,CAAC,CAAC,CAAC;EAEjC,OAAOE,IAAI;AACf,CAAC","ignoreList":[]}
+{"version":3,"file":"uuid.js","names":["useState","v4","uuidV4","useUuid","uuid"],"sources":["../../../src/hooks/uuid.ts"],"sourcesContent":["import { useState } from 'react';\nimport { v4 as uuidV4 } from 'uuid';\n\nexport const useUuid = () => {\n    const [uuid] = useState(uuidV4);\n\n    return uuid;\n};\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,OAAO;AAChC,SAASC,EAAE,IAAIC,MAAM,QAAQ,MAAM;AAEnC,OAAO,MAAMC,OAAO,GAAGA,CAAA,KAAM;EACzB,MAAM,CAACC,IAAI,CAAC,GAAGJ,QAAQ,CAACE,MAAM,CAAC;EAE/B,OAAOE,IAAI;AACf,CAAC","ignoreList":[]}

package/lib/types/components/checkbox/Checkbox.d.ts

@@ -21,7 +21,7 @@ export type CheckboxProps = {
      */
     onChange?: ChangeEventHandler<HTMLInputElement>;
     /**
-     * Whether the label should change the state
+     * Whether the label should change the state of the checkbox
      */
     shouldChangeOnLabelClick?: boolean;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.972",
+    "version": "5.0.0-beta.974",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -87,5 +87,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "5abe106c0c747ac66568fe087ae10e28185a0e98"
+    "gitHead": "f8a2f8596719f3f20a8615deccc73aef0128471e"
 }