@chayns-components/core 5.0.0-beta.13 → 5.0.0-beta.1301

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

@@ -0,0 +1,69 @@
+import styled, { css } from 'styled-components';
+export const StyledScrollView = styled.div`
+    ${({
+  $maxHeight
+}) => $maxHeight && css`
+            max-height: ${typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};
+        `}
+    ${({
+  $height
+}) => $height && css`
+            height: ${typeof $height === 'number' ? `${$height}px` : $height};
+        `} 
+    ${({
+  $maxWidth
+}) => $maxWidth && css`
+            max-width: ${typeof $maxWidth === 'number' ? `${$maxWidth}px` : $maxWidth};
+        `} 
+    ${({
+  $width
+}) => $width && css`
+            width: ${typeof $width === 'number' ? `${$width}px` : $width};
+        `} 
+    ${({
+  $overflowX
+}) => css`
+        overflow-x: ${$overflowX};
+    `}
+    ${({
+  $overflowY
+}) => css`
+        overflow-y: ${$overflowY};
+    `}
+
+    // Styles for custom scrollbar
+    ${({
+  $browser,
+  theme
+}) => $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","$maxHeight","$height","$maxWidth","$width","$overflowX","$overflowY","$browser","theme"],"sources":["../../../../src/components/scroll-view/ScrollView.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { BrowserName } from '../../types/chayns';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledScrollViewProps = WithTheme<{\n    $maxHeight?: CSSProperties['height'] | null;\n    $height?: CSSProperties['height'];\n    $maxWidth?: CSSProperties['width'];\n    $width?: CSSProperties['width'];\n    $overflowX: 'scroll' | 'auto';\n    $overflowY: 'scroll' | 'auto';\n    $browser: BrowserName;\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`\n        overflow-x: ${$overflowX};\n    `}\n    ${({ $overflowY }) => css`\n        overflow-y: ${$overflowY};\n    `}\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":"AACA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAc/C,OAAO,MAAMC,gBAAgB,GAAGF,MAAM,CAACG,GAA0B;AACjE,MAAM,CAAC;EAAEC;AAAW,CAAC,KACbA,UAAU,IACVH,GAAG;AACX,0BAA0B,OAAOG,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AACzF,SAAS;AACT,MAAM,CAAC;EAAEC;AAAQ,CAAC,KACVA,OAAO,IACPJ,GAAG;AACX,sBAAsB,OAAOI,OAAO,KAAK,QAAQ,GAAG,GAAGA,OAAO,IAAI,GAAGA,OAAO;AAC5E,SAAS;AACT,MAAM,CAAC;EAAEC;AAAU,CAAC,KACZA,SAAS,IACTL,GAAG;AACX,yBAAyB,OAAOK,SAAS,KAAK,QAAQ,GAAG,GAAGA,SAAS,IAAI,GAAGA,SAAS;AACrF,SAAS;AACT,MAAM,CAAC;EAAEC;AAAO,CAAC,KACTA,MAAM,IACNN,GAAG;AACX,qBAAqB,OAAOM,MAAM,KAAK,QAAQ,GAAG,GAAGA,MAAM,IAAI,GAAGA,MAAM;AACxE,SAAS;AACT,MAAM,CAAC;EAAEC;AAAW,CAAC,KAAKP,GAAG;AAC7B,sBAAsBO,UAAU;AAChC,KAAK;AACL,MAAM,CAAC;EAAEC;AAAW,CAAC,KAAKR,GAAG;AAC7B,sBAAsBQ,UAAU;AAChC,KAAK;AACL;AACA;AACA,MAAM,CAAC;EAAEC,QAAQ;EAAEC;AAA6B,CAAC,KACzCD,QAAQ,KAAK,SAAS,GAChBT,GAAG;AACjB,0CAA0CU,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDV,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CU,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe;AACf,CAAC","ignoreList":[]}

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

@@ -0,0 +1,567 @@
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+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, StyledSearchBoxLeftWrapper } from './SearchBox.styles';
+import { useUuid } from '../../hooks/uuid';
+import DropdownBodyWrapper from '../dropdown-body-wrapper/DropdownBodyWrapper';
+import TagInput from '../tag-input/TagInput';
+const SearchBox = /*#__PURE__*/forwardRef(({
+  isInvalid = false,
+  placeholder,
+  leftIcons,
+  lists,
+  onChange,
+  onBlur,
+  onSelect,
+  onKeyDown,
+  selectedId,
+  container,
+  shouldHideFilterButtons = false,
+  shouldShowRoundImage,
+  shouldShowContentOnEmptyInput = true,
+  shouldAddInputToList = true,
+  shouldShowToggleIcon = false,
+  customFilter,
+  presetValue,
+  tagInputSettings
+}, ref) => {
+  const [matchingListsItems, setMatchingListsItems] = useState(lists);
+  const [selectedImage, setSelectedImage] = useState();
+  const [value, setValue] = useState(typeof presetValue === 'string' && presetValue !== '' ? presetValue : '');
+  const [height, setHeight] = 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 [shouldShowBody, setShouldShowBody] = useState(false);
+  const uuid = useUuid();
+  const boxRef = useRef(null);
+  const contentRef = useRef(null);
+  const inputRef = useRef(null);
+  const tagInputRef = useRef(null);
+  const hasFocusRef = useRef(false);
+  const isAnimatingRef = useRef(false);
+  const shouldShowPresetValue = useRef(typeof presetValue === 'string' && presetValue !== '');
+  const theme = useTheme();
+
+  /**
+   * 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(({
+      groupName
+    }) => {
+      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(({
+      list,
+      groupName
+    }) => {
+      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(({
+      list,
+      groupName
+    }) => ({
+      groupName,
+      list: list.filter(item => {
+        if (typeof customFilter === 'function') {
+          return customFilter(item);
+        }
+        return !(newMatchingItems.length === 1 && item.text === value);
+      })
+    }));
+    setMatchingListsItems(filteredMatchingListItems);
+    return newLists;
+  }, [groups, lists, customFilter, shouldAddInputToList, value]);
+  const handleOpen = useCallback(() => {
+    setShouldShowBody(true);
+  }, []);
+  const handleClose = useCallback(() => {
+    setShouldShowBody(false);
+  }, []);
+  const handleFilterButtonsGroupSelect = keys => {
+    setGroups(keys.length === 0 ? ['all'] : keys);
+  };
+
+  /**
+   * This hook calculates the height
+   */
+  useEffect(() => {
+    const textArray = [];
+    activeList.forEach(({
+      list,
+      groupName
+    }) => {
+      list.forEach(({
+        text
+      }) => textArray.push(text));
+      if (!groupName) {
+        return;
+      }
+      textArray.push(groupName);
+    });
+    if (shouldAddInputToList && inputToListValue !== '') {
+      textArray.push(inputToListValue);
+    }
+    setHeight(calculateContentHeight(textArray));
+  }, [inputToListValue, activeList, placeholder, shouldAddInputToList]);
+  useEffect(() => {
+    if (selectedId) {
+      activeList.forEach(({
+        list
+      }) => {
+        const selectedItem = list.find(({
+          id
+        }) => 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 && !shouldShowPresetValue.current) {
+      setValue('');
+    }
+  }, [selectedId]);
+  useEffect(() => {
+    isAnimatingRef.current = shouldShowBody;
+  }, [shouldShowBody]);
+  useEffect(() => {
+    if (matchingListsItems.length !== 0 && !isAnimatingRef.current && hasFocusRef.current) {
+      handleOpen();
+    }
+  }, [handleOpen, matchingListsItems.length]);
+
+  /**
+   * This function sets the items on focus if shouldShowContentOnEmptyInput
+   */
+  const handleFocus = useCallback(() => {
+    hasFocusRef.current = true;
+    if (shouldShowContentOnEmptyInput) {
+      const newMatchingItems = [];
+      activeList.forEach(({
+        list,
+        groupName
+      }) => {
+        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(({
+        list,
+        groupName
+      }) => ({
+        groupName,
+        list: list.filter(item => {
+          if (typeof customFilter === 'function') {
+            return customFilter(item);
+          }
+          return !(newMatchingItems.length === 1 && item.text === value);
+        })
+      }));
+      setMatchingListsItems(filteredMatchingListItems);
+      if (filteredMatchingListItems.length !== 0) {
+        handleOpen();
+      }
+    }
+  }, [activeList, handleOpen, customFilter, shouldAddInputToList, shouldShowContentOnEmptyInput, value]);
+
+  /**
+   * This function filters the lists by input
+   */
+
+  useEffect(() => {
+    const newMatchingItems = [];
+    activeList.forEach(({
+      list,
+      groupName
+    }) => {
+      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(({
+        list
+      }) => {
+        list.forEach(({
+          text
+        }) => {
+          if (text.toLowerCase() === inputToListValue.toLowerCase()) {
+            setInputToListValue('');
+          }
+        });
+      });
+    }
+  }, [inputToListValue, activeList, shouldAddInputToList, shouldShowContentOnEmptyInput, value]);
+  const handleClick = useCallback(() => {
+    if (shouldShowBody) {
+      handleClose();
+    } else {
+      handleOpen();
+    }
+  }, [handleClose, handleOpen, shouldShowBody]);
+  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]);
+  const leftElement = useMemo(() => (leftIcons || selectedImage) && /*#__PURE__*/React.createElement(StyledSearchBoxLeftWrapper, null, leftIcons && /*#__PURE__*/React.createElement(Icon, {
+    icons: leftIcons
+  }), selectedImage && selectedImage), [leftIcons, selectedImage]);
+
+  /**
+   * This function handles changes of the input
+   */
+  const handleChange = useCallback(event => {
+    const filteredLists = [];
+    shouldShowPresetValue.current = false;
+    activeList.forEach(({
+      list,
+      groupName
+    }) => {
+      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();
+    }
+    setValue(event.target.value);
+    setInputToListValue(event.target.value);
+    if (typeof onChange === 'function') {
+      onChange(event);
+    }
+  }, [activeList, handleOpen, onChange, shouldAddInputToList, shouldShowContentOnEmptyInput]);
+
+  /**
+   * This function handles the blur event of the input
+   */
+  const handleBlur = useCallback(event => {
+    hasFocusRef.current = false;
+    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', '')
+    };
+    if (tagInputSettings) {
+      setValue('');
+      setInputToListValue('');
+      tagInputRef.current?.resetValue();
+    } else {
+      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, tagInputSettings]);
+  const content = useMemo(() => {
+    const items = [];
+    matchingListsItems.forEach(({
+      groupName,
+      list
+    }, index) => {
+      if (hasMultipleGroups) {
+        if (list.length <= 0) {
+          return;
+        }
+        if (index !== 0) {
+          items.push(/*#__PURE__*/React.createElement(GroupName, {
+            key: groupName,
+            name: groupName ?? ''
+          }));
+        }
+      }
+      list.forEach(({
+        id,
+        text,
+        imageUrl
+      }, listIndex) => {
+        items.push(/*#__PURE__*/React.createElement(SearchBoxItem, {
+          key: `${id}_${groupName ?? ''}`,
+          id: id,
+          text: text,
+          imageUrl: imageUrl,
+          shouldShowRoundImage: shouldShowRoundImage,
+          onSelect: handleSelect,
+          groupName: groupName,
+          tabIndex: index === 0 && listIndex === 0 ? 0 : -1
+        }));
+      });
+    });
+    if (shouldAddInputToList && inputToListValue !== '') {
+      items.push(/*#__PURE__*/React.createElement(SearchBoxItem, {
+        id: "input-value",
+        onSelect: handleSelect,
+        text: `<b>${inputToListValue}</b`,
+        tabIndex: items.length === 0 ? 0 : -1
+      }));
+    }
+    return items;
+  }, [matchingListsItems, shouldAddInputToList, inputToListValue, hasMultipleGroups, shouldShowRoundImage, handleSelect]);
+  useEffect(() => {
+    const handleKeyDown = e => {
+      if (!shouldShowBody || matchingListsItems.length === 0) {
+        return;
+      }
+      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)) {
+        return;
+      }
+      const filteredChildren = Array.from(newChildren).filter(child => child.dataset.isgroupname !== 'true');
+      setFilteredChildrenArray(filteredChildren);
+      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+        e.preventDefault();
+        if (newChildren && newChildren.length > 0) {
+          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;
+        }
+      } else if (e.key === 'Enter') {
+        e.preventDefault();
+        e.stopPropagation();
+        if (filteredChildren) {
+          const element = filteredChildren[focusedIndex ?? 0];
+          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;
+          }
+          const newId = id.replace('search-box-item__', '');
+          handleSelect({
+            id: newId === 'input-value' ? textContent : newId,
+            text: textContent ?? '',
+            imageUrl
+          });
+        }
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [filteredChildrenArray, focusedIndex, handleSelect, matchingListsItems.length, shouldShowBody]);
+  const handleKeyPress = useCallback(event => {
+    if (event.keyCode === 27) {
+      setMatchingListsItems([]);
+    }
+  }, []);
+  useImperativeHandle(ref, () => ({
+    clear: () => setValue('')
+  }), []);
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyPress);
+    return () => {
+      document.addEventListener('keydown', handleKeyPress);
+    };
+  }, [handleKeyPress]);
+
+  /**
+   * Update the value if preset value changes
+   */
+  useEffect(() => {
+    if (presetValue) {
+      setValue(presetValue);
+    }
+  }, [presetValue]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledSearchBox, {
+    ref: boxRef,
+    key: `search-box-${uuid}`
+  }, /*#__PURE__*/React.createElement("div", {
+    id: `search_box_input${uuid}`
+  }, tagInputSettings ? /*#__PURE__*/React.createElement(TagInput, {
+    tags: tagInputSettings.tags,
+    onChange: handleChange,
+    onAdd: tagInputSettings.onAdd,
+    onRemove: tagInputSettings.onRemove,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    placeholder: placeholder,
+    leftElement: leftElement,
+    shouldAllowMultiple: tagInputSettings.shouldAllowMultiple,
+    shouldPreventEnter: true,
+    ref: tagInputRef
+  }) : /*#__PURE__*/React.createElement(Input, {
+    isInvalid: isInvalid,
+    ref: inputRef,
+    onChange: handleChange,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    placeholder: placeholder,
+    onKeyDown: onKeyDown,
+    leftElement: leftElement,
+    rightElement: rightElement,
+    value: value
+  })), boxRef.current && /*#__PURE__*/React.createElement(DropdownBodyWrapper, {
+    shouldShowDropdown: shouldShowBody && matchingListsItems.length !== 0 && (value.trim() !== '' || shouldShowContentOnEmptyInput),
+    onClose: handleClose,
+    anchorElement: boxRef.current,
+    maxHeight: 300,
+    container: container
+  }, /*#__PURE__*/React.createElement(SearchBoxBody, {
+    key: `search-box-body-${uuid}`,
+    filterButtons: filterButtons,
+    selectedGroups: groups,
+    height: height,
+    ref: contentRef,
+    onGroupSelect: handleFilterButtonsGroupSelect,
+    shouldHideFilterButtons: shouldHideFilterButtons
+  }, content))), [container, content, filterButtons, groups, handleBlur, handleChange, handleClose, handleFocus, height, isInvalid, leftElement, matchingListsItems.length, onKeyDown, placeholder, rightElement, shouldHideFilterButtons, shouldShowBody, shouldShowContentOnEmptyInput, tagInputSettings, uuid, value]);
+});
+SearchBox.displayName = 'SearchBox';
+export default SearchBox;
+//# sourceMappingURL=SearchBox.js.map