@chayns-components/core 5.0.0-beta.49 → 5.0.0-beta.492

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

@@ -0,0 +1,271 @@
+import { getDevice } from 'chayns-api';
+import { AnimatePresence } from 'framer-motion';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { calculateContentHeight } from '../../utils/calculate';
+import { searchList } from '../../utils/searchBox';
+import Input from '../input/Input';
+import SearchBoxItem from './search-box-item/SearchBoxItem';
+import { StyledMotionSearchBoxBody, StyledSearchBox } from './SearchBox.styles';
+const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    placeholder,
+    list,
+    onChange,
+    onBlur,
+    onSelect,
+    selectedId,
+    shouldShowRoundImage,
+    shouldShowContentOnEmptyInput = true
+  } = _ref;
+  const [matchingItems, setMatchingItems] = 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 boxRef = useRef(null);
+  const contentRef = useRef(null);
+  const inputRef = useRef(null);
+  const {
+    browser
+  } = getDevice();
+
+  /**
+   * This function closes the list of items
+   */
+  const handleOutsideClick = useCallback(event => {
+    if (boxRef.current && !boxRef.current.contains(event.target)) {
+      setIsAnimating(false);
+    }
+  }, [boxRef]);
+
+  /**
+   * This hook listens for clicks
+   */
+  useEffect(() => {
+    document.addEventListener('click', handleOutsideClick);
+    return () => {
+      document.removeEventListener('click', handleOutsideClick);
+    };
+  }, [handleOutsideClick, boxRef]);
+
+  /**
+   * This hook calculates the height
+   */
+  useEffect(() => {
+    const textArray = list.map(_ref2 => {
+      let {
+        text
+      } = _ref2;
+      return text;
+    });
+    setHeight(calculateContentHeight(textArray));
+  }, [list, placeholder]);
+
+  /**
+   * This hook calculates the width
+   */
+  useEffect(() => {
+    const input = document.getElementById('search_box_input');
+    if (input) {
+      setWidth(input.offsetWidth);
+    }
+  }, []);
+  useEffect(() => {
+    if (selectedId) {
+      const selectedItem = list.find(_ref3 => {
+        let {
+          id
+        } = _ref3;
+        return id === selectedId;
+      });
+      if (selectedItem) {
+        setValue(selectedItem.text);
+      }
+    }
+  }, [list, selectedId]);
+
+  /**
+   * 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) {
+      setMatchingItems(searchList({
+        items: list,
+        searchString: value
+      }));
+      setIsAnimating(true);
+    }
+  }, [list, shouldShowContentOnEmptyInput, value]);
+  useEffect(() => {
+    if (list) {
+      const newMatchingItems = searchList({
+        items: list,
+        searchString: value
+      });
+      if (shouldShowContentOnEmptyInput || value !== '') {
+        setMatchingItems(newMatchingItems);
+        setIsAnimating(newMatchingItems.length !== 0);
+      }
+    }
+  }, [list, shouldShowContentOnEmptyInput, value]);
+
+  /**
+   * This function handles changes of the input
+   */
+  const handleChange = useCallback(event => {
+    const searchedItems = searchList({
+      items: list,
+      searchString: event.target.value
+    });
+    if (!shouldShowContentOnEmptyInput && !event.target.value) {
+      setMatchingItems([]);
+    } else {
+      setMatchingItems(searchedItems);
+      setIsAnimating(searchedItems.length !== 0);
+    }
+    setValue(event.target.value);
+    if (typeof onChange === 'function') {
+      onChange(event);
+    }
+  }, [list, onChange, 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 => {
+    setValue(item.text);
+    setIsAnimating(false);
+    if (typeof onSelect === 'function') {
+      onSelect(item);
+    }
+  }, [onSelect]);
+  const content = useMemo(() => {
+    const items = [];
+    matchingItems.sort((a, b) => a.text.localeCompare(b.text));
+    matchingItems.forEach(_ref4 => {
+      let {
+        id,
+        text,
+        imageUrl
+      } = _ref4;
+      items.push( /*#__PURE__*/React.createElement(SearchBoxItem, {
+        key: id,
+        text: text,
+        imageUrl: imageUrl,
+        id: id,
+        shouldShowRoundImage: shouldShowRoundImage,
+        onSelect: handleSelect
+      }));
+    });
+    return items;
+  }, [shouldShowRoundImage, handleSelect, matchingItems]);
+  useEffect(() => {
+    const handleKeyDown = e => {
+      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+        e.preventDefault();
+        const children = contentRef.current?.children;
+        if (children && children.length > 0) {
+          const newIndex = focusedIndex !== null ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) % children.length : 0;
+          if (focusedIndex !== null) {
+            const prevElement = children[focusedIndex];
+            prevElement.tabIndex = -1;
+          }
+          setFocusedIndex(newIndex);
+          const newElement = children[newIndex];
+          newElement.tabIndex = 0;
+          newElement.focus();
+        }
+      } else if (e.key === 'Enter' && focusedIndex !== null) {
+        const element = contentRef.current?.children[focusedIndex];
+        if (!element) {
+          return;
+        }
+        const {
+          id,
+          textContent
+        } = element;
+        handleSelect({
+          id: id.replace('search-box-item__', ''),
+          text: textContent ?? ''
+        });
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [focusedIndex, handleSelect]);
+  const handleKeyPress = useCallback(event => {
+    if (event.keyCode === 27) {
+      setMatchingItems([]);
+    }
+  }, []);
+  useImperativeHandle(ref, () => ({
+    clear: () => setValue('')
+  }), []);
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyPress);
+    return () => {
+      document.addEventListener('keydown', handleKeyPress);
+    };
+  }, [handleKeyPress]);
+  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,
+    value: value
+  })), /*#__PURE__*/React.createElement(AnimatePresence, {
+    initial: false
+  }, /*#__PURE__*/React.createElement(StyledMotionSearchBoxBody, {
+    $browser: browser?.name,
+    key: "content",
+    $height: height,
+    $width: width,
+    initial: {
+      height: 0,
+      opacity: 0
+    },
+    animate: isAnimating ? {
+      height: 'fit-content',
+      opacity: 1
+    } : {
+      height: 0,
+      opacity: 0
+    },
+    transition: {
+      duration: 0.2,
+      type: 'tween'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: contentRef
+  }, content)))), [browser?.name, content, handleBlur, handleChange, handleFocus, height, isAnimating, placeholder, value, width]);
+});
+SearchBox.displayName = 'SearchBox';
+export default SearchBox;
+//# sourceMappingURL=SearchBox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBox.js","names":["getDevice","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","calculateContentHeight","searchList","Input","SearchBoxItem","StyledMotionSearchBoxBody","StyledSearchBox","SearchBox","_ref","ref","placeholder","list","onChange","onBlur","onSelect","selectedId","shouldShowRoundImage","shouldShowContentOnEmptyInput","matchingItems","setMatchingItems","value","setValue","isAnimating","setIsAnimating","height","setHeight","width","setWidth","focusedIndex","setFocusedIndex","boxRef","contentRef","inputRef","browser","handleOutsideClick","event","current","contains","target","document","addEventListener","removeEventListener","textArray","map","_ref2","text","input","getElementById","offsetWidth","selectedItem","find","_ref3","id","handleFocus","items","searchString","newMatchingItems","length","handleChange","searchedItems","handleBlur","handleSelect","item","content","sort","a","b","localeCompare","forEach","_ref4","imageUrl","push","createElement","key","handleKeyDown","e","preventDefault","children","newIndex","prevElement","tabIndex","newElement","focus","element","textContent","replace","handleKeyPress","keyCode","clear","onFocus","initial","$browser","name","$height","$width","opacity","animate","transition","duration","type","displayName"],"sources":["../../../src/components/search-box/SearchBox.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    FocusEvent,\n    FocusEventHandler,\n    forwardRef,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport type { ISearchBoxItem } from '../../types/searchBox';\nimport { calculateContentHeight } from '../../utils/calculate';\nimport { searchList } from '../../utils/searchBox';\nimport Input from '../input/Input';\nimport SearchBoxItem from './search-box-item/SearchBoxItem';\nimport { StyledMotionSearchBoxBody, StyledSearchBox } from './SearchBox.styles';\n\nexport type SearchBoxRef = {\n    clear: VoidFunction;\n};\n\nexport type SearchBoxProps = {\n    /**\n     * A list of items that can be searched.\n     */\n    list: ISearchBoxItem[];\n    /**\n     * The placeholder that should be displayed.\n     */\n    placeholder?: string;\n    /**\n     * Function to be executed when the input lost focus.\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the input is changed.\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when an item is selected.\n     */\n    onSelect?: (item: ISearchBoxItem) => void;\n    /**\n     * Control the selected item. If you use this prop, make sure to update it when the user selects an item.\n     */\n    selectedId?: string;\n    /**\n     * Whether the full list of items should be displayed if the input is empty.\n     */\n    shouldShowContentOnEmptyInput?: boolean;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n};\n\nconst SearchBox: FC<SearchBoxProps> = forwardRef<SearchBoxRef, SearchBoxProps>(\n    (\n        {\n            placeholder,\n            list,\n            onChange,\n            onBlur,\n            onSelect,\n            selectedId,\n            shouldShowRoundImage,\n            shouldShowContentOnEmptyInput = true,\n        },\n        ref,\n    ) => {\n        const [matchingItems, setMatchingItems] = useState<ISearchBoxItem[]>([]);\n        const [value, setValue] = useState('');\n        const [isAnimating, setIsAnimating] = useState(false);\n        const [height, setHeight] = useState<number>(0);\n        const [width, setWidth] = useState(0);\n        const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n\n        const boxRef = useRef<HTMLDivElement>(null);\n        const contentRef = useRef<HTMLDivElement | null>(null);\n        const inputRef = useRef<HTMLInputElement | null>(null);\n\n        const { browser } = getDevice();\n\n        /**\n         * This function closes the list of items\n         */\n        const handleOutsideClick = useCallback(\n            (event: MouseEvent) => {\n                if (boxRef.current && !boxRef.current.contains(event.target as Node)) {\n                    setIsAnimating(false);\n                }\n            },\n            [boxRef],\n        );\n\n        /**\n         * This hook listens for clicks\n         */\n        useEffect(() => {\n            document.addEventListener('click', handleOutsideClick);\n\n            return () => {\n                document.removeEventListener('click', handleOutsideClick);\n            };\n        }, [handleOutsideClick, boxRef]);\n\n        /**\n         * This hook calculates the height\n         */\n        useEffect(() => {\n            const textArray = list.map(({ text }) => text);\n\n            setHeight(calculateContentHeight(textArray));\n        }, [list, placeholder]);\n\n        /**\n         * This hook calculates the width\n         */\n        useEffect(() => {\n            const input = document.getElementById('search_box_input');\n\n            if (input) {\n                setWidth(input.offsetWidth);\n            }\n        }, []);\n\n        useEffect(() => {\n            if (selectedId) {\n                const selectedItem = list.find(({ id }) => id === selectedId);\n\n                if (selectedItem) {\n                    setValue(selectedItem.text);\n                }\n            }\n        }, [list, selectedId]);\n\n        /**\n         * This hook resets the value if the selectedId changes to undefined. This is an own useEffect because the value\n         * should not be reset if the list changes and the selectedId is still undefined.\n         */\n        useEffect(() => {\n            if (!selectedId) {\n                setValue('');\n            }\n        }, [selectedId]);\n\n        /**\n         * This function sets the items on focus if shouldShowContentOnEmptyInput\n         */\n        const handleFocus = useCallback(() => {\n            if (shouldShowContentOnEmptyInput) {\n                setMatchingItems(searchList({ items: list, searchString: value }));\n                setIsAnimating(true);\n            }\n        }, [list, shouldShowContentOnEmptyInput, value]);\n\n        useEffect(() => {\n            if (list) {\n                const newMatchingItems = searchList({ items: list, searchString: value });\n\n                if (shouldShowContentOnEmptyInput || value !== '') {\n                    setMatchingItems(newMatchingItems);\n                    setIsAnimating(newMatchingItems.length !== 0);\n                }\n            }\n        }, [list, shouldShowContentOnEmptyInput, value]);\n\n        /**\n         * This function handles changes of the input\n         */\n        const handleChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                const searchedItems = searchList({ items: list, searchString: event.target.value });\n\n                if (!shouldShowContentOnEmptyInput && !event.target.value) {\n                    setMatchingItems([]);\n                } else {\n                    setMatchingItems(searchedItems);\n                    setIsAnimating(searchedItems.length !== 0);\n                }\n\n                setValue(event.target.value);\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n            },\n            [list, onChange, shouldShowContentOnEmptyInput],\n        );\n\n        /**\n         * This function handles the blur event of the input\n         */\n        const handleBlur = useCallback(\n            (event: FocusEvent<HTMLInputElement>) => {\n                if (typeof onBlur === 'function') {\n                    onBlur(event);\n                }\n            },\n            [onBlur],\n        );\n\n        /**\n         * This function handles the item selection\n         */\n        const handleSelect = useCallback(\n            (item: ISearchBoxItem) => {\n                setValue(item.text);\n                setIsAnimating(false);\n\n                if (typeof onSelect === 'function') {\n                    onSelect(item);\n                }\n            },\n            [onSelect],\n        );\n\n        const content = useMemo(() => {\n            const items: ReactElement[] = [];\n\n            matchingItems.sort((a, b) => a.text.localeCompare(b.text));\n\n            matchingItems.forEach(({ id, text, imageUrl }) => {\n                items.push(\n                    <SearchBoxItem\n                        key={id}\n                        text={text}\n                        imageUrl={imageUrl}\n                        id={id}\n                        shouldShowRoundImage={shouldShowRoundImage}\n                        onSelect={handleSelect}\n                    />,\n                );\n            });\n\n            return items;\n        }, [shouldShowRoundImage, handleSelect, matchingItems]);\n\n        useEffect(() => {\n            const handleKeyDown = (e: KeyboardEvent) => {\n                if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                    e.preventDefault();\n                    const children = contentRef.current?.children;\n                    if (children && children.length > 0) {\n                        const newIndex =\n                            focusedIndex !== null\n                                ? (focusedIndex +\n                                      (e.key === 'ArrowUp' ? -1 : 1) +\n                                      children.length) %\n                                  children.length\n                                : 0;\n\n                        if (focusedIndex !== null) {\n                            const prevElement = children[focusedIndex] as HTMLDivElement;\n                            prevElement.tabIndex = -1;\n                        }\n\n                        setFocusedIndex(newIndex);\n\n                        const newElement = children[newIndex] as HTMLDivElement;\n                        newElement.tabIndex = 0;\n                        newElement.focus();\n                    }\n                } else if (e.key === 'Enter' && focusedIndex !== null) {\n                    const element = contentRef.current?.children[focusedIndex];\n\n                    if (!element) {\n                        return;\n                    }\n\n                    const { id, textContent } = element;\n\n                    handleSelect({\n                        id: id.replace('search-box-item__', ''),\n                        text: textContent ?? '',\n                    });\n                }\n            };\n\n            document.addEventListener('keydown', handleKeyDown);\n\n            return () => {\n                document.removeEventListener('keydown', handleKeyDown);\n            };\n        }, [focusedIndex, handleSelect]);\n\n        const handleKeyPress = useCallback((event: KeyboardEvent) => {\n            if (event.keyCode === 27) {\n                setMatchingItems([]);\n            }\n        }, []);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                clear: () => setValue(''),\n            }),\n            [],\n        );\n\n        useEffect(() => {\n            document.addEventListener('keydown', handleKeyPress);\n\n            return () => {\n                document.addEventListener('keydown', handleKeyPress);\n            };\n        }, [handleKeyPress]);\n\n        return useMemo(\n            () => (\n                <StyledSearchBox ref={boxRef}>\n                    <div id=\"search_box_input\">\n                        <Input\n                            ref={inputRef}\n                            onChange={handleChange}\n                            onBlur={handleBlur}\n                            onFocus={handleFocus}\n                            placeholder={placeholder}\n                            value={value}\n                        />\n                    </div>\n                    <AnimatePresence initial={false}>\n                        <StyledMotionSearchBoxBody\n                            $browser={browser?.name}\n                            key=\"content\"\n                            $height={height}\n                            $width={width}\n                            initial={{ height: 0, opacity: 0 }}\n                            animate={\n                                isAnimating\n                                    ? { height: 'fit-content', opacity: 1 }\n                                    : { height: 0, opacity: 0 }\n                            }\n                            transition={{\n                                duration: 0.2,\n                                type: 'tween',\n                            }}\n                        >\n                            <div ref={contentRef}>{content}</div>\n                        </StyledMotionSearchBoxBody>\n                    </AnimatePresence>\n                </StyledSearchBox>\n            ),\n            [\n                browser?.name,\n                content,\n                handleBlur,\n                handleChange,\n                handleFocus,\n                height,\n                isAnimating,\n                placeholder,\n                value,\n                width,\n            ],\n        );\n    },\n);\n\nSearchBox.displayName = 'SearchBox';\n\nexport default SearchBox;\n"],"mappings":"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"}

package/lib/components/search-box/SearchBox.styles.d.ts

@@ -0,0 +1,274 @@
+/// <reference types="react" />
+/// <reference types="react" />
+import type { Browser } from 'detect-browser';
+import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
+export declare const StyledSearchBox: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+type StyledMotionSearchBoxBodyProps = WithTheme<{
+    $height: number;
+    $width: number;
+    $browser: Browser | 'bot' | null | undefined;
+}>;
+export declare const StyledMotionSearchBoxBody: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<{
+    slot?: string | undefined;
+    title?: string | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoFocus?: boolean | undefined;
+    className?: string | undefined;
+    contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    tabIndex?: number | undefined;
+    translate?: "yes" | "no" | undefined;
+    radioGroup?: string | undefined;
+    role?: import("react").AriaRole | undefined;
+    about?: string | undefined;
+    content?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCapitalize?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    color?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    is?: string | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "list" | "none" | "both" | "inline" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined;
+    onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onReset?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onResetCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onSubmit?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInvalid?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onResize?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onResizeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnterCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+    onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+} & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement>, StyledMotionSearchBoxBodyProps>> & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export {};