@chayns-components/core 5.0.0-beta.89 → 5.0.0-beta.890

package/lib/esm/components/scroll-view/ScrollView.styles.js

@@ -0,0 +1,86 @@
+import styled, { css } from 'styled-components';
+export const StyledScrollView = styled.div`
+    ${_ref => {
+  let {
+    $maxHeight
+  } = _ref;
+  return $maxHeight && css`
+            max-height: ${typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};
+        `;
+}}
+    ${_ref2 => {
+  let {
+    $height
+  } = _ref2;
+  return $height && css`
+            height: ${typeof $height === 'number' ? `${$height}px` : $height};
+        `;
+}} 
+    ${_ref3 => {
+  let {
+    $maxWidth
+  } = _ref3;
+  return $maxWidth && css`
+            max-width: ${typeof $maxWidth === 'number' ? `${$maxWidth}px` : $maxWidth};
+        `;
+}} 
+    ${_ref4 => {
+  let {
+    $width
+  } = _ref4;
+  return $width && css`
+            width: ${typeof $width === 'number' ? `${$width}px` : $width};
+        `;
+}} 
+    ${_ref5 => {
+  let {
+    $overflowX
+  } = _ref5;
+  return css`overflow-x: ${$overflowX};`;
+}}
+    ${_ref6 => {
+  let {
+    $overflowY
+  } = _ref6;
+  return css`overflow-y: ${$overflowY};`;
+}}
+
+    // Styles for custom scrollbar
+    ${_ref7 => {
+  let {
+    $browser,
+    theme
+  } = _ref7;
+  return $browser === 'firefox' ? css`
+                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
+                  scrollbar-width: thin;
+              ` : css`
+                  &::-webkit-scrollbar {
+                      width: 10px;
+                      height: 10px
+                  }
+
+                  &::-webkit-scrollbar-track {
+                      background-color: transparent;
+                  }
+
+                  &::-webkit-scrollbar-button {
+                      background-color: transparent;
+                      height: 5px;
+                      width: 5px;
+                  }
+
+                  &::-webkit-scrollbar-thumb {
+                      background-color: rgba(${theme['text-rgb']}, 0.15);
+                      border-radius: 20px;
+                      background-clip: padding-box;
+                      border: solid 3px transparent;
+                  }
+            
+                  &::-webkit-scrollbar-corner {
+                      background-color: transparent;
+                  }
+              `;
+}}
+`;
+//# sourceMappingURL=ScrollView.styles.js.map

package/lib/esm/components/scroll-view/ScrollView.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollView.styles.js","names":["styled","css","StyledScrollView","div","_ref","$maxHeight","_ref2","$height","_ref3","$maxWidth","_ref4","$width","_ref5","$overflowX","_ref6","$overflowY","_ref7","$browser","theme"],"sources":["../../../../src/components/scroll-view/ScrollView.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledScrollViewProps = WithTheme<{\n    $maxHeight?: CSSProperties['height'];\n    $height?: CSSProperties['height'];\n    $maxWidth?: CSSProperties['width'];\n    $width?: CSSProperties['width'];\n    $overflowX: 'scroll' | 'auto';\n    $overflowY: 'scroll' | 'auto';\n    $browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledScrollView = styled.div<StyledScrollViewProps>`\n    ${({ $maxHeight }) =>\n        $maxHeight &&\n        css`\n            max-height: ${typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};\n        `}\n    ${({ $height }) =>\n        $height &&\n        css`\n            height: ${typeof $height === 'number' ? `${$height}px` : $height};\n        `} \n    ${({ $maxWidth }) =>\n        $maxWidth &&\n        css`\n            max-width: ${typeof $maxWidth === 'number' ? `${$maxWidth}px` : $maxWidth};\n        `} \n    ${({ $width }) =>\n        $width &&\n        css`\n            width: ${typeof $width === 'number' ? `${$width}px` : $width};\n        `} \n    ${({ $overflowX }) => css`overflow-x: ${$overflowX};`}\n    ${({ $overflowY }) => css`overflow-y: ${$overflowY};`}\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledScrollViewProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 10px;\n                      height: 10px\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                      background-clip: padding-box;\n                      border: solid 3px transparent;\n                  }\n            \n                  &::-webkit-scrollbar-corner {\n                      background-color: transparent;\n                  }\n              `}\n`;\n"],"mappings":"AAEA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAa/C,OAAO,MAAMC,gBAAgB,GAAGF,MAAM,CAACG,GAA0B;AACjE,MAAMC,IAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,IAAA;EAAA,OACbC,UAAU,IACVJ,GAAG;AACX,0BAA0B,OAAOI,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AACzF,SAAS;AAAA;AACT,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,KAAA;EAAA,OACVC,OAAO,IACPN,GAAG;AACX,sBAAsB,OAAOM,OAAO,KAAK,QAAQ,GAAG,GAAGA,OAAO,IAAI,GAAGA,OAAO;AAC5E,SAAS;AAAA;AACT,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OACZC,SAAS,IACTR,GAAG;AACX,yBAAyB,OAAOQ,SAAS,KAAK,QAAQ,GAAG,GAAGA,SAAS,IAAI,GAAGA,SAAS;AACrF,SAAS;AAAA;AACT,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OACTC,MAAM,IACNV,GAAG;AACX,qBAAqB,OAAOU,MAAM,KAAK,QAAQ,GAAG,GAAGA,MAAM,IAAI,GAAGA,MAAM;AACxE,SAAS;AAAA;AACT,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OAAKX,GAAG,eAAeY,UAAU,GAAG;AAAA;AACzD,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OAAKb,GAAG,eAAec,UAAU,GAAG;AAAA;AACzD;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC;EAA6B,CAAC,GAAAF,KAAA;EAAA,OACzCC,QAAQ,KAAK,SAAS,GAChBhB,GAAG;AACjB,0CAA0CiB,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDjB,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CiB,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe;AAAA;AACf,CAAC","ignoreList":[]}

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

@@ -0,0 +1,592 @@
+import { getDevice } from 'chayns-api';
+import { AnimatePresence } from 'framer-motion';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useTheme } from 'styled-components';
+import { calculateContentHeight } from '../../utils/calculate';
+import { searchList } from '../../utils/searchBox';
+import Icon from '../icon/Icon';
+import Input from '../input/Input';
+import GroupName from './group-name/GroupName';
+import SearchBoxBody from './search-box-body/SearchBoxBody';
+import SearchBoxItem from './search-box-item/SearchBoxItem';
+import { StyledSearchBoxItemImage } from './search-box-item/SearchBoxItem.styles';
+import { StyledSearchBox, StyledSearchBoxIcon } from './SearchBox.styles';
+const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    placeholder,
+    lists,
+    onChange,
+    onBlur,
+    onSelect,
+    onKeyDown,
+    selectedId,
+    container = document.body,
+    shouldShowRoundImage,
+    shouldShowContentOnEmptyInput = true,
+    shouldAddInputToList = true,
+    shouldShowToggleIcon = false
+  } = _ref;
+  const [matchingListsItems, setMatchingListsItems] = useState(lists);
+  const [selectedImage, setSelectedImage] = useState();
+  const [value, setValue] = useState('');
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [height, setHeight] = useState(0);
+  const [width, setWidth] = useState(0);
+  const [focusedIndex, setFocusedIndex] = useState(null);
+  const [hasMultipleGroups, setHasMultipleGroups] = useState(lists.length > 1);
+  const [filteredChildrenArray, setFilteredChildrenArray] = useState();
+  const [inputToListValue, setInputToListValue] = useState('');
+  const [groups, setGroups] = useState(['all']);
+  const [portal, setPortal] = useState();
+  const [internalCoordinates, setInternalCoordinates] = useState({
+    x: 0,
+    y: 0
+  });
+  const boxRef = useRef(null);
+  const contentRef = useRef(null);
+  const inputRef = useRef(null);
+  const theme = useTheme();
+  const {
+    browser
+  } = getDevice();
+  useEffect(() => {
+    if (boxRef.current) {
+      const {
+        x,
+        y
+      } = boxRef.current.getBoundingClientRect();
+      setInternalCoordinates({
+        x,
+        y
+      });
+    }
+  }, []);
+
+  /**
+   * Checks if Lists are smaller then 1
+   */
+  useEffect(() => {
+    setHasMultipleGroups(lists.length > 1);
+  }, [lists]);
+  const filterbuttons = useMemo(() => {
+    const items = [];
+    if (lists.length <= 1) {
+      return items;
+    }
+    lists.forEach(_ref2 => {
+      let {
+        groupName
+      } = _ref2;
+      if (groupName) {
+        items.push({
+          id: groupName,
+          text: groupName
+        });
+      }
+    });
+    return items;
+  }, [lists]);
+
+  /**
+   * Filters the lists by the FilterButtons
+   */
+  const activeList = useMemo(() => {
+    let newLists = [];
+    if (groups[0] === 'all') {
+      newLists = lists;
+    } else {
+      lists.forEach(list => {
+        if (list.groupName && groups.includes(list.groupName)) {
+          newLists.push(list);
+        }
+      });
+    }
+    const newMatchingItems = [];
+    newLists.forEach(_ref3 => {
+      let {
+        list,
+        groupName
+      } = _ref3;
+      const newList = searchList({
+        items: list,
+        searchString: value
+      });
+      if (newList.length > 0) {
+        newMatchingItems.push({
+          groupName,
+          list: newList
+        });
+      }
+    });
+    if (newMatchingItems.length === 0 && shouldAddInputToList) {
+      newMatchingItems.push({
+        groupName: undefined,
+        list: []
+      });
+    }
+    const filteredMatchingListItems = newMatchingItems.map(_ref4 => {
+      let {
+        list,
+        groupName
+      } = _ref4;
+      return {
+        groupName,
+        list: list.filter(item => !(newMatchingItems.length === 1 && item.text === value))
+      };
+    });
+    setMatchingListsItems(filteredMatchingListItems);
+    return newLists;
+  }, [groups, lists, shouldAddInputToList, value]);
+  const handleOpen = useCallback(() => {
+    if (boxRef.current) {
+      const {
+        x,
+        y,
+        height: bodyHeight
+      } = boxRef.current.getBoundingClientRect();
+      setInternalCoordinates({
+        x,
+        y: y + bodyHeight
+      });
+      setIsAnimating(true);
+    }
+  }, []);
+  const handleClose = useCallback(() => {
+    setIsAnimating(false);
+  }, []);
+  const handleFilterButtonsGroupSelect = keys => {
+    setGroups(keys.length === 0 ? ['all'] : keys);
+  };
+
+  /**
+   * This function closes the list of items
+   */
+  const handleOutsideClick = useCallback(event => {
+    if (boxRef.current && !boxRef.current.contains(event.target) && contentRef.current && !contentRef.current.contains(event.target)) {
+      handleClose();
+    }
+  }, [handleClose]);
+
+  /**
+   * This hook listens for clicks
+   */
+  useEffect(() => {
+    document.addEventListener('click', handleOutsideClick);
+    window.addEventListener('blur', () => handleClose());
+    return () => {
+      document.removeEventListener('click', handleOutsideClick);
+      window.addEventListener('blur', () => handleClose());
+    };
+  }, [handleOutsideClick, boxRef, handleClose]);
+
+  /**
+   * This hook calculates the height
+   */
+  useEffect(() => {
+    const textArray = [];
+    activeList.forEach(_ref5 => {
+      let {
+        list,
+        groupName
+      } = _ref5;
+      list.forEach(_ref6 => {
+        let {
+          text
+        } = _ref6;
+        return textArray.push(text);
+      });
+      if (!groupName) {
+        return;
+      }
+      textArray.push(groupName);
+    });
+    if (shouldAddInputToList && inputToListValue !== '') {
+      textArray.push(inputToListValue);
+    }
+    setHeight(calculateContentHeight(textArray));
+  }, [inputToListValue, activeList, placeholder, shouldAddInputToList]);
+
+  /**
+   * This hook calculates the width
+   */
+  useEffect(() => {
+    const input = document.getElementById('search_box_input');
+    const getInputWidth = () => {
+      if (input) {
+        setWidth(input.offsetWidth);
+      }
+    };
+    if (input) {
+      new ResizeObserver(getInputWidth).observe(input);
+    }
+  }, []);
+  useEffect(() => {
+    if (selectedId) {
+      activeList.forEach(_ref7 => {
+        let {
+          list
+        } = _ref7;
+        const selectedItem = list.find(_ref8 => {
+          let {
+            id
+          } = _ref8;
+          return id === selectedId;
+        });
+        if (selectedItem) {
+          setValue(selectedItem.text);
+          if (selectedItem.imageUrl) {
+            setSelectedImage(/*#__PURE__*/React.createElement(StyledSearchBoxItemImage, {
+              src: selectedItem.imageUrl,
+              $shouldShowRoundImage: shouldShowRoundImage
+            }));
+          }
+        }
+      });
+    }
+  }, [activeList, selectedId, shouldShowRoundImage]);
+
+  /**
+   * This hook resets the value if the selectedId changes to undefined. This is an own useEffect because the value
+   * should not be reset if the list changes and the selectedId is still undefined.
+   */
+  useEffect(() => {
+    if (!selectedId) {
+      setValue('');
+    }
+  }, [selectedId]);
+
+  /**
+   * This function sets the items on focus if shouldShowContentOnEmptyInput
+   */
+  const handleFocus = useCallback(() => {
+    if (shouldShowContentOnEmptyInput) {
+      const newMatchingItems = [];
+      activeList.forEach(_ref9 => {
+        let {
+          list,
+          groupName
+        } = _ref9;
+        const newList = searchList({
+          items: list,
+          searchString: value
+        });
+        if (newList.length > 0) {
+          newMatchingItems.push({
+            groupName,
+            list: newList
+          });
+        }
+      });
+      if (newMatchingItems.length === 0 && shouldAddInputToList) {
+        newMatchingItems.push({
+          groupName: undefined,
+          list: []
+        });
+      }
+      const filteredMatchingListItems = newMatchingItems.map(_ref10 => {
+        let {
+          list,
+          groupName
+        } = _ref10;
+        return {
+          groupName,
+          list: list.filter(item => !(newMatchingItems.length === 1 && item.text === value))
+        };
+      });
+      setMatchingListsItems(filteredMatchingListItems);
+      if (filteredMatchingListItems.length !== 0) {
+        handleOpen();
+      } else {
+        handleClose();
+      }
+    }
+  }, [activeList, handleClose, handleOpen, shouldAddInputToList, shouldShowContentOnEmptyInput, value]);
+
+  /**
+   * This function filters the lists by input
+   */
+
+  useEffect(() => {
+    const newMatchingItems = [];
+    activeList.forEach(_ref11 => {
+      let {
+        list,
+        groupName
+      } = _ref11;
+      const newList = searchList({
+        items: list,
+        searchString: value
+      });
+      if (newList.length > 0) {
+        newMatchingItems.push({
+          groupName,
+          list: newList
+        });
+      }
+    });
+    if (newMatchingItems.length === 0 && shouldAddInputToList) {
+      newMatchingItems.push({
+        groupName: undefined,
+        list: []
+      });
+    }
+    if (shouldAddInputToList && inputToListValue !== '') {
+      newMatchingItems.forEach(_ref12 => {
+        let {
+          list
+        } = _ref12;
+        list.forEach(_ref13 => {
+          let {
+            text
+          } = _ref13;
+          if (text.toLowerCase() === inputToListValue.toLowerCase()) {
+            setInputToListValue('');
+          }
+        });
+      });
+    }
+  }, [inputToListValue, activeList, shouldAddInputToList, shouldShowContentOnEmptyInput, value]);
+  const handleClick = useCallback(() => {
+    if (isAnimating) {
+      handleClose();
+    } else {
+      handleOpen();
+    }
+  }, [handleClose, handleOpen, isAnimating]);
+  const rightElement = useMemo(() => {
+    if (!shouldShowToggleIcon) {
+      return undefined;
+    }
+    return /*#__PURE__*/React.createElement(StyledSearchBoxIcon, {
+      onClick: handleClick
+    }, /*#__PURE__*/React.createElement(Icon, {
+      icons: ['fa fa-chevron-down'],
+      color: theme['006']
+    }));
+  }, [handleClick, shouldShowToggleIcon, theme]);
+
+  /**
+   * This function handles changes of the input
+   */
+  const handleChange = useCallback(event => {
+    const filteredLists = [];
+    activeList.forEach(_ref14 => {
+      let {
+        list,
+        groupName
+      } = _ref14;
+      const newList = searchList({
+        items: list,
+        searchString: event.target.value
+      });
+      if (newList.length > 0) {
+        filteredLists.push({
+          groupName,
+          list: newList
+        });
+      }
+    });
+    if (filteredLists.length === 0 && shouldAddInputToList) {
+      filteredLists.push({
+        groupName: undefined,
+        list: []
+      });
+    }
+    setSelectedImage(undefined);
+    if (!shouldShowContentOnEmptyInput && !event.target.value) {
+      setMatchingListsItems([]);
+    } else {
+      setMatchingListsItems(filteredLists);
+      if (filteredLists.length !== 0) {
+        handleOpen();
+      } else {
+        handleClose();
+      }
+    }
+    setValue(event.target.value);
+    setInputToListValue(event.target.value);
+    if (typeof onChange === 'function') {
+      onChange(event);
+    }
+  }, [activeList, handleClose, handleOpen, onChange, shouldAddInputToList, shouldShowContentOnEmptyInput]);
+
+  /**
+   * This function handles the blur event of the input
+   */
+  const handleBlur = useCallback(event => {
+    if (typeof onBlur === 'function') {
+      onBlur(event);
+    }
+  }, [onBlur]);
+
+  /**
+   * This function handles the item selection
+   */
+  const handleSelect = useCallback(item => {
+    const newItem = {
+      ...item,
+      text: item.text.replace('<b>', '').replace('</b>', '').replace('</b', '')
+    };
+    setValue(newItem.text);
+    handleClose();
+    setSelectedImage(newItem.imageUrl ? /*#__PURE__*/React.createElement(StyledSearchBoxItemImage, {
+      src: newItem.imageUrl,
+      $shouldShowRoundImage: shouldShowRoundImage
+    }) : undefined);
+    setMatchingListsItems([]);
+    if (typeof onSelect === 'function') {
+      onSelect(newItem);
+    }
+  }, [handleClose, onSelect, shouldShowRoundImage]);
+  const content = useMemo(() => {
+    const items = [];
+    matchingListsItems.forEach((_ref15, index) => {
+      let {
+        groupName,
+        list
+      } = _ref15;
+      if (hasMultipleGroups) {
+        if (list.length <= 0) {
+          return;
+        }
+        if (index !== 0) {
+          items.push(/*#__PURE__*/React.createElement(GroupName, {
+            key: groupName,
+            name: groupName ?? ''
+          }));
+        }
+      }
+      list.forEach(_ref16 => {
+        let {
+          id,
+          text,
+          imageUrl
+        } = _ref16;
+        items.push(/*#__PURE__*/React.createElement(SearchBoxItem, {
+          key: `${id}_${groupName ?? ''}`,
+          id: id,
+          text: text,
+          imageUrl: imageUrl,
+          shouldShowRoundImage: shouldShowRoundImage,
+          onSelect: handleSelect,
+          groupName: groupName
+        }));
+      });
+    });
+    if (shouldAddInputToList && inputToListValue !== '') {
+      items.push(/*#__PURE__*/React.createElement(SearchBoxItem, {
+        id: "input-value",
+        onSelect: handleSelect,
+        text: `<b>${inputToListValue}</b`
+      }));
+    }
+    return items;
+  }, [matchingListsItems, shouldAddInputToList, inputToListValue, hasMultipleGroups, shouldShowRoundImage, handleSelect]);
+  useEffect(() => {
+    const handleKeyDown = e => {
+      if (!isAnimating) {
+        return;
+      }
+      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+        e.preventDefault();
+        const children = contentRef.current?.children;
+        if (!children) {
+          return;
+        }
+        const childrenArray = Array.from(children);
+        const newChildren = childrenArray.find(child => child.id.startsWith('searchbox-content__'))?.children;
+        if (newChildren && newChildren.length > 0) {
+          const filteredChildren = Array.from(newChildren).filter(child => child.dataset.isgroupname !== 'true');
+          setFilteredChildrenArray(filteredChildren);
+          const newIndex = focusedIndex !== null ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + filteredChildren.length) % filteredChildren.length : 0;
+          if (focusedIndex !== null) {
+            const prevElement = filteredChildren[focusedIndex];
+            prevElement.tabIndex = -1;
+          }
+          setFocusedIndex(newIndex);
+          const newElement = filteredChildren[newIndex];
+          newElement.tabIndex = 0;
+          newElement.focus();
+        }
+      } else if (e.key === 'Enter' && focusedIndex !== null) {
+        if (filteredChildrenArray) {
+          const element = filteredChildrenArray[focusedIndex];
+          if (!element) {
+            return;
+          }
+          const {
+            id,
+            textContent
+          } = element;
+          let imageUrl;
+
+          // Just Ignore, it works
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          if (element.children[0]?.attributes.src) {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+            imageUrl = element.children[0]?.attributes.src.nodeValue;
+          }
+          handleSelect({
+            id: id.replace('search-box-item__', ''),
+            text: textContent ?? '',
+            imageUrl
+          });
+        }
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [filteredChildrenArray, focusedIndex, handleSelect, isAnimating]);
+  const handleKeyPress = useCallback(event => {
+    if (event.keyCode === 27) {
+      setMatchingListsItems([]);
+    }
+  }, []);
+  useImperativeHandle(ref, () => ({
+    clear: () => setValue('')
+  }), []);
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyPress);
+    return () => {
+      document.addEventListener('keydown', handleKeyPress);
+    };
+  }, [handleKeyPress]);
+  useEffect(() => {
+    setPortal(() => /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(AnimatePresence, {
+      initial: false
+    }, isAnimating && /*#__PURE__*/React.createElement(SearchBoxBody, {
+      filterbuttons: filterbuttons,
+      selectedGroups: groups,
+      width: width,
+      coordinates: internalCoordinates,
+      browser: browser?.name,
+      height: height,
+      ref: contentRef,
+      onGroupSelect: handleFilterButtonsGroupSelect
+    }, content)), container));
+  }, [browser?.name, container, content, filterbuttons, groups, height, internalCoordinates, isAnimating, width]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledSearchBox, {
+    ref: boxRef
+  }, /*#__PURE__*/React.createElement("div", {
+    id: "search_box_input"
+  }, /*#__PURE__*/React.createElement(Input, {
+    ref: inputRef,
+    onChange: handleChange,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    placeholder: placeholder,
+    onKeyDown: onKeyDown,
+    leftElement: selectedImage,
+    rightElement: rightElement,
+    value: value
+  })), portal), [handleBlur, handleChange, handleFocus, onKeyDown, placeholder, portal, rightElement, selectedImage, value]);
+});
+SearchBox.displayName = 'SearchBox';
+export default SearchBox;
+//# sourceMappingURL=SearchBox.js.map