@festo-ui/react 10.0.1-dev.847 → 10.0.1-dev.849

package/dist/components/popovers/popover/Popover.d.ts

@@ -1,19 +0,0 @@
-import './Popover.scss';
-import { type Placement } from '@floating-ui/react';
-import { type MouseEvent, type ReactNode } from 'react';
-export interface PopoverProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'content' | 'onChange'> {
-    readonly 'data-testid'?: string;
-    readonly containerClassName?: string;
-    readonly content: ReactNode;
-    readonly position?: Placement;
-    readonly fallbackPositions?: Placement[];
-    readonly isOpen?: boolean;
-    readonly openOnHover?: boolean;
-    readonly openByDefault?: boolean;
-    readonly onChange?: (isOpen: boolean) => void;
-    readonly flip?: boolean;
-    readonly showArrow?: boolean;
-    readonly onTriggerClick?: (event: MouseEvent) => void;
-    readonly stopPropagation?: boolean;
-}
-export declare const Popover: (props: PopoverProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/popovers/popover/Popover.js

@@ -1,96 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import "./Popover.css";
-import { FloatingArrow, FloatingPortal, arrow, autoUpdate, flip, offset, shift, useClick, useDismiss, useFloating, useHover, useInteractions } from "@floating-ui/react";
-import classnames from "classnames";
-import { forwardRef, useRef } from "react";
-import { useControlled } from "../../../utils/useControlled.js";
-import { useForkRef } from "../../../utils/useForkRef.js";
-const Popover = /*#__PURE__*/ forwardRef(({ children, className, style, containerClassName, content, position, fallbackPositions, isOpen, openOnHover = false, openByDefault = false, onChange, flip: enableFlip = true, showArrow = true, onTriggerClick, stopPropagation = false, ...props }, ref)=>{
-    const [showPopover, setShowPopover] = useControlled({
-        controlled: isOpen,
-        default: openByDefault
-    });
-    const arrowRef = useRef(null);
-    const triggerRef = useRef(null);
-    const handleRef = useForkRef(ref, triggerRef);
-    const { refs, floatingStyles, context } = useFloating({
-        placement: position,
-        open: showPopover,
-        onOpenChange: (isOpen)=>{
-            setShowPopover(isOpen);
-            onChange?.(isOpen);
-        },
-        middleware: [
-            offset(12),
-            enableFlip && flip({
-                fallbackPlacements: fallbackPositions || void 0,
-                fallbackAxisSideDirection: 'end'
-            }),
-            shift({
-                padding: 8
-            }),
-            showArrow && arrow({
-                element: arrowRef,
-                padding: 8
-            })
-        ].filter(Boolean),
-        whileElementsMounted: autoUpdate
-    });
-    const dismiss = useDismiss(context);
-    const click = useClick(context, {
-        enabled: !openOnHover,
-        event: 'click',
-        stickIfOpen: true
-    });
-    const hover = useHover(context, {
-        enabled: openOnHover
-    });
-    const { getReferenceProps, getFloatingProps } = useInteractions([
-        dismiss,
-        click,
-        hover
-    ]);
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ jsx("div", {
-                className: className,
-                style: style,
-                ref: (node)=>{
-                    refs.setReference(node);
-                    if ('function' == typeof handleRef) handleRef(node);
-                },
-                ...getReferenceProps({
-                    ...props,
-                    onClick: (event)=>{
-                        if (stopPropagation) event.stopPropagation();
-                        onTriggerClick?.(event);
-                    }
-                }),
-                children: children
-            }),
-            showPopover && /*#__PURE__*/ jsx(FloatingPortal, {
-                children: /*#__PURE__*/ jsxs("div", {
-                    className: "fwe-popover-container",
-                    ref: refs.setFloating,
-                    style: floatingStyles,
-                    ...getFloatingProps(),
-                    children: [
-                        showArrow && /*#__PURE__*/ jsx(FloatingArrow, {
-                            ref: arrowRef,
-                            context: context,
-                            fill: "white",
-                            width: 16,
-                            height: 8
-                        }),
-                        /*#__PURE__*/ jsx("div", {
-                            className: classnames('fwe-popover', containerClassName),
-                            children: content
-                        })
-                    ]
-                })
-            })
-        ]
-    });
-});
-Popover.displayName = 'Popover';
-export { Popover };

package/dist/components/popovers/popover-menu/PopoverMenu.d.ts

@@ -1,9 +0,0 @@
-import { type ReactNode } from 'react';
-import { type PopoverProps } from '../popover/Popover';
-import { type PopoverMenuItemProps } from './popover-menu-item/PopoverMenuItem';
-export interface PopoverMenuProps extends Omit<PopoverProps, 'content' | 'isOpen' | 'onStateChange'> {
-    readonly items: PopoverMenuItemProps[] | ReactNode;
-}
-export declare const PopoverMenu: (props: PopoverMenuProps & {
-    children?: ReactNode | undefined;
-} & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/popovers/popover-menu/PopoverMenu.js

@@ -1,33 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
-import { forwardRef, useMemo, useState } from "react";
-import { Popover } from "../popover/Popover.js";
-import { PopoverMenuContext } from "./PopoverMenuContext.js";
-import { PopoverMenuItem } from "./popover-menu-item/PopoverMenuItem.js";
-const PopoverMenu = /*#__PURE__*/ forwardRef(({ items, className, containerClassName, children, ...props }, ref)=>{
-    const [showPopoverMenu, setShowPopoverMenu] = useState(false);
-    const isPopoverMenuItemPropsArray = (items)=>Array.isArray(items) && items.length > 0 && 'text' in items[0];
-    let content = null;
-    content = isPopoverMenuItemPropsArray(items) ? items.map((item)=>/*#__PURE__*/ jsx(PopoverMenuItem, {
-            ...item
-        }, item.text)) : items;
-    const popoverMenuContextValue = useMemo(()=>({
-            setShowPopoverMenu: setShowPopoverMenu
-        }), []);
-    return /*#__PURE__*/ jsx(PopoverMenuContext.Provider, {
-        value: popoverMenuContextValue,
-        children: /*#__PURE__*/ jsx(Popover, {
-            className: classnames('fwe-popover-menu-trigger', className),
-            containerClassName: classnames('fwe-popover--menu', containerClassName),
-            content: content,
-            position: "right",
-            isOpen: showPopoverMenu,
-            onChange: setShowPopoverMenu,
-            ref: ref,
-            ...props,
-            children: children
-        })
-    });
-});
-PopoverMenu.displayName = 'PopoverMenu';
-export { PopoverMenu };

package/dist/components/popovers/popover-menu/PopoverMenuContext.d.ts

@@ -1,4 +0,0 @@
-import { type Dispatch, type SetStateAction } from 'react';
-export declare const PopoverMenuContext: import("react").Context<{
-    setShowPopoverMenu: Dispatch<SetStateAction<boolean>>;
-}>;

package/dist/components/popovers/popover-menu/PopoverMenuContext.js

@@ -1,5 +0,0 @@
-import { createContext } from "react";
-const PopoverMenuContext = createContext({
-    setShowPopoverMenu: ()=>{}
-});
-export { PopoverMenuContext };

package/dist/components/popovers/popover-menu/popover-menu-item/PopoverMenuItem.d.ts

@@ -1,9 +0,0 @@
-import { type ComponentPropsWithoutRef } from 'react';
-export interface PopoverMenuItemProps extends Omit<ComponentPropsWithoutRef<'button'>, 'onClick'> {
-    readonly 'data-testid'?: string;
-    readonly text: string;
-    readonly icon: React.ReactNode;
-    readonly onClick?: (data: unknown) => void;
-    readonly data?: unknown;
-}
-export declare const PopoverMenuItem: (props: PopoverMenuItemProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;

package/dist/components/popovers/popover-menu/popover-menu-item/PopoverMenuItem.js

@@ -1,31 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useContext } from "react";
-import { IconWrapper } from "../../../icon-wrapper/IconWrapper.js";
-import { PopoverMenuContext } from "../PopoverMenuContext.js";
-const PopoverMenuItem = /*#__PURE__*/ forwardRef(({ text, icon, onClick, data, className, ...props }, ref)=>{
-    const { setShowPopoverMenu } = useContext(PopoverMenuContext);
-    function handleClick(e) {
-        e?.preventDefault();
-        e?.stopPropagation();
-        if (setShowPopoverMenu) setShowPopoverMenu(false);
-        if (onClick) onClick(data);
-    }
-    return /*#__PURE__*/ jsxs("button", {
-        type: "button",
-        className: className,
-        onClick: handleClick,
-        ref: ref,
-        ...props,
-        children: [
-            /*#__PURE__*/ jsx(IconWrapper, {
-                icon: icon
-            }),
-            /*#__PURE__*/ jsx("span", {
-                className: "fwe-mr-xxs",
-                children: text
-            })
-        ]
-    });
-});
-PopoverMenuItem.displayName = 'PopoverMenuItem';
-export { PopoverMenuItem };

package/dist/components/popovers/tooltip/Tooltip.d.ts

@@ -1,6 +0,0 @@
-import type { PopoverProps } from '../popover/Popover';
-export interface TooltipProps extends Omit<PopoverProps, 'openOnHover'> {
-}
-export declare const Tooltip: (props: TooltipProps & {
-    children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/popovers/tooltip/Tooltip.js

@@ -1,13 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { Popover } from "../popover/Popover.js";
-const Tooltip = /*#__PURE__*/ forwardRef(({ content, children, ...props }, ref)=>/*#__PURE__*/ jsx(Popover, {
-        position: "bottom",
-        openOnHover: true,
-        content: content,
-        ref: ref,
-        ...props,
-        children: children
-    }));
-Tooltip.displayName = 'Tooltip';
-export { Tooltip };

package/dist/components/progress/Progress.d.ts

@@ -1,6 +0,0 @@
-export interface ProgressProps extends React.ComponentPropsWithoutRef<'div'> {
-    readonly progress: number;
-    readonly background?: 'white' | 'black' | 'background';
-    readonly error?: boolean;
-}
-export declare const Progress: (props: ProgressProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/progress/Progress.js

@@ -1,30 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
-import { forwardRef } from "react";
-const Progress = /*#__PURE__*/ forwardRef(({ background = 'white', error = false, progress, className, ...props }, ref)=>{
-    const classes = classnames('fwe-progress-bar', {
-        'fwe-bg-red': error
-    }, {
-        'fwe-progress-bar-black': 'black' === background
-    }, {
-        'fwe-progress-bar-background': 'background' === background
-    });
-    return /*#__PURE__*/ jsx("div", {
-        className: classnames('fwe-progress', className),
-        ref: ref,
-        ...props,
-        children: /*#__PURE__*/ jsx("div", {
-            className: classes,
-            role: "progressbar",
-            style: {
-                width: `${progress}%`
-            },
-            "aria-valuenow": progress,
-            "aria-valuemin": 0,
-            "aria-valuemax": 100,
-            "aria-label": "progressbar"
-        })
-    });
-});
-Progress.displayName = 'Progress';
-export { Progress };

package/dist/components/search-input/ClearButton.d.ts

@@ -1 +0,0 @@
-export declare const ClearButton: (props: Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;

package/dist/components/search-input/ClearButton.js

@@ -1,11 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-const ClearButton = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx("button", {
-        type: "button",
-        className: "fwe-clear-icon fr-search-input-clear-button",
-        "aria-label": "Clear",
-        ref: ref,
-        ...props
-    }));
-ClearButton.displayName = 'ClearButton';
-export { ClearButton };

package/dist/components/search-input/SearchInput.css

@@ -1,13 +0,0 @@
-.fwe-search-suggestion {
-  height: 40px;
-}
-
-.fr-search-input-clear-button {
-  background: none;
-  border: none;
-  justify-content: center;
-  align-items: center;
-  padding: 0;
-  display: flex;
-}
-

package/dist/components/search-input/SearchInput.d.ts

@@ -1,13 +0,0 @@
-import './SearchInput.scss';
-import { type ComponentPropsWithoutRef } from 'react';
-import type { SearchSuggestion } from './SearchSuggestion';
-export interface SearchInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'onChange' | 'value' | 'defaultValue'> {
-    readonly label?: string;
-    readonly defaultValue?: string;
-    readonly value?: string;
-    readonly suggestions?: SearchSuggestion[];
-    readonly onChange?: (value: string) => void;
-    readonly onKeyboardNavigate?: (value: string) => void;
-    readonly onSearch?: (value: string) => void;
-}
-export declare const SearchInput: (props: SearchInputProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/search-input/SearchInput.js

@@ -1,65 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import "./SearchInput.css";
-import classnames from "classnames";
-import { forwardRef, useRef } from "react";
-import { useForkRef } from "../../utils/useForkRef.js";
-import { useOnClickOutside } from "../../utils/useOnClickOutside.js";
-import { ClearButton } from "./ClearButton.js";
-import { useSearchInput } from "./useSearchInput.js";
-const SearchInput = /*#__PURE__*/ forwardRef(({ defaultValue, disabled, label, value, suggestions, onChange, onSearch, onKeyboardNavigate, className, ...props }, ref)=>{
-    const inputRef = useRef(null);
-    const containerRef = useRef(null);
-    const handleRef = useForkRef(ref, containerRef);
-    const cappedSuggestions = suggestions?.slice(0, 10) ?? [];
-    const { handleFocus, handleInput, handleClearQuery, handleSuggestionClick, handleOutsideClick, handleKeyDown, hideSuggestionList, selectedSuggestionIndex, innerValue } = useSearchInput(inputRef, cappedSuggestions, value, defaultValue, onChange, onSearch, onKeyboardNavigate);
-    useOnClickOutside(containerRef, handleOutsideClick);
-    return /*#__PURE__*/ jsxs("div", {
-        className: classnames('fwe-search-input', className),
-        ref: handleRef,
-        children: [
-            /*#__PURE__*/ jsx("input", {
-                ref: inputRef,
-                disabled: disabled,
-                placeholder: label,
-                onFocus: handleFocus,
-                type: "search",
-                "aria-label": "Search",
-                onInput: handleInput,
-                onKeyDown: handleKeyDown,
-                value: innerValue,
-                ...props
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: "fwe-search-icon"
-            }),
-            /*#__PURE__*/ jsx(ClearButton, {
-                onClick: handleClearQuery
-            }),
-            Boolean(suggestions?.length) && !hideSuggestionList && /*#__PURE__*/ jsxs("div", {
-                className: "fwe-search-suggestions",
-                role: "listbox",
-                children: [
-                    cappedSuggestions.map((suggestion, i)=>/*#__PURE__*/ jsx("div", {
-                            role: "option",
-                            tabIndex: -1,
-                            "aria-label": suggestion.value,
-                            "aria-selected": selectedSuggestionIndex === i,
-                            onClick: ()=>handleSuggestionClick(suggestion),
-                            className: `fwe-search-suggestion ${selectedSuggestionIndex === i ? 'fwe-selected' : ''}`,
-                            children: /*#__PURE__*/ jsx("div", {
-                                dangerouslySetInnerHTML: {
-                                    __html: suggestion.template
-                                }
-                            })
-                        }, suggestion.value)),
-                    suggestions && suggestions.length > 10 && /*#__PURE__*/ jsx("div", {
-                        className: "fwe-ml-xxs",
-                        children: "..."
-                    })
-                ]
-            })
-        ]
-    });
-});
-SearchInput.displayName = 'SearchInput';
-export { SearchInput };

package/dist/components/search-input/SearchSuggestion.d.ts

@@ -1,17 +0,0 @@
-export declare class SearchSuggestion {
-    /**
-     * a html-string. e.g.: '<b> hello </b>'
-     */
-    template: string;
-    /**
-     * This Value will be used as new query when the user selects the suggestion.
-     */
-    value: string;
-    /**
-     * Creates a basic Suggestion from a string. The first query match is highlighted by bold tags.
-     * @param suggestionString The suggested string (should contain the whole query)
-     * @param query The current query. This string will be highlighted.
-     * @returns a html-string.
-     */
-    static basicSuggestion(suggestionString: string, query: string): SearchSuggestion;
-}

package/dist/components/search-input/SearchSuggestion.js

@@ -1,21 +0,0 @@
-class SearchSuggestion {
-    template;
-    value;
-    static basicSuggestion(suggestionString, query) {
-        const i = suggestionString.toLocaleLowerCase().indexOf(query.toLocaleLowerCase());
-        let template = suggestionString;
-        if (-1 !== i) {
-            const boldStart = i;
-            const boldEnd = i + query.length;
-            const part1 = suggestionString.substring(0, boldStart);
-            const part2 = suggestionString.substring(boldStart, boldEnd);
-            const part3 = suggestionString.substring(boldEnd, suggestionString.length);
-            template = `${part1}<strong>${part2}</strong>${part3}`;
-        }
-        return {
-            value: suggestionString,
-            template
-        };
-    }
-}
-export { SearchSuggestion };

package/dist/components/search-input/useSearchInput.d.ts

@@ -1,13 +0,0 @@
-import type React from 'react';
-import type { SearchSuggestion } from './SearchSuggestion';
-export declare function useSearchInput(inputRef: React.MutableRefObject<HTMLInputElement | null>, cappedSuggestions: SearchSuggestion[], value?: string, defaultValue?: string, onChange?: (value: string) => void, onSearch?: (value: string) => void, onKeyboardNavigate?: (value: string) => void): {
-    innerValue: string | undefined;
-    hideSuggestionList: boolean;
-    selectedSuggestionIndex: number;
-    handleClearQuery: () => void;
-    handleFocus: () => void;
-    handleInput: (event: any) => void;
-    handleSuggestionClick: (suggestion: SearchSuggestion) => void;
-    handleOutsideClick: () => void;
-    handleKeyDown: (event: React.KeyboardEvent) => void;
-};

package/dist/components/search-input/useSearchInput.js

@@ -1,85 +0,0 @@
-import { useState } from "react";
-import { useControlled } from "../../utils/useControlled.js";
-function useSearchInput(inputRef, cappedSuggestions, value, defaultValue = '', onChange, onSearch, onKeyboardNavigate) {
-    const [innerValue, setValue] = useControlled({
-        controlled: value,
-        default: defaultValue
-    });
-    const [hideSuggestionList, setHideSuggestionList] = useState(false);
-    const [selectedSuggestionIndex, setSelectedSuggestionIndex] = useState(-1);
-    function blurInput() {
-        if (inputRef.current) inputRef.current.blur();
-    }
-    function reset() {
-        setSelectedSuggestionIndex(-1);
-        setHideSuggestionList(true);
-        blurInput();
-    }
-    function handleSearch() {
-        reset();
-        if (void 0 !== innerValue) onSearch?.(innerValue);
-    }
-    function updateValue(newValue) {
-        setValue(newValue);
-        onChange?.(newValue);
-        onSearch?.(newValue);
-    }
-    function handleClearQuery() {
-        reset();
-        updateValue('');
-    }
-    function handleArrowKey(newSuggestionIndex) {
-        if (!cappedSuggestions || !cappedSuggestions.length) return;
-        const selectedSuggestion = cappedSuggestions[newSuggestionIndex];
-        setSelectedSuggestionIndex(newSuggestionIndex);
-        setValue(selectedSuggestion.value);
-        onKeyboardNavigate?.(selectedSuggestion.value);
-    }
-    function handleUpArrowKey() {
-        handleArrowKey(selectedSuggestionIndex > 0 ? selectedSuggestionIndex - 1 : cappedSuggestions.length - 1);
-    }
-    function handleDownArrowKey() {
-        handleArrowKey(selectedSuggestionIndex >= cappedSuggestions.length - 1 ? 0 : selectedSuggestionIndex + 1);
-    }
-    function handleKeyDown(event) {
-        switch(event.key){
-            case 'Enter':
-                handleSearch();
-                break;
-            case 'Escape':
-                handleClearQuery();
-                break;
-            case 'ArrowUp':
-                handleUpArrowKey();
-                break;
-            case 'ArrowDown':
-                handleDownArrowKey();
-                break;
-            default:
-                break;
-        }
-    }
-    const handleFocus = ()=>setHideSuggestionList(false);
-    const handleOutsideClick = ()=>setHideSuggestionList(true);
-    function handleSuggestionClick(suggestion) {
-        reset();
-        updateValue(suggestion.value);
-    }
-    function handleInput(event) {
-        setSelectedSuggestionIndex(-1);
-        setValue(event.target.value);
-        onChange?.(event.target.value);
-    }
-    return {
-        innerValue,
-        hideSuggestionList,
-        selectedSuggestionIndex,
-        handleClearQuery,
-        handleFocus,
-        handleInput,
-        handleSuggestionClick,
-        handleOutsideClick,
-        handleKeyDown
-    };
-}
-export { useSearchInput };

package/dist/components/snackbar/Snackbar.css

@@ -1,55 +0,0 @@
-.fr-snackbar-wrapper {
-  opacity: 0;
-  opacity: 1;
-  margin-bottom: 24px;
-}
-
-.fr-snackbar-wrapper-enter-done {
-  opacity: 1;
-  transition: opacity .6s ease-out;
-}
-
-.fr-snackbar-wrapper-exit {
-  opacity: 1;
-  height: 48px;
-}
-
-.fr-snackbar-wrapper-exit-active {
-  opacity: 0;
-  height: 0;
-  margin-bottom: 0;
-  transition: height .3s ease-out .3s, opacity .3s ease-out, margin-bottom .3s ease-out .3s;
-}
-
-.fr-snackbar-wrapper--first {
-  opacity: 1;
-  margin-bottom: 24px;
-  transform: translateY(100px);
-}
-
-.fr-snackbar-wrapper--first-enter-done {
-  opacity: 1;
-  transition: opacity .6s ease-out;
-}
-
-.fr-snackbar-wrapper--first-exit {
-  opacity: 1;
-  height: 48px;
-}
-
-.fr-snackbar-wrapper--first-exit-active {
-  opacity: 0;
-  height: 0;
-  margin-bottom: 0;
-  transition: height .3s ease-out .3s, opacity .3s ease-out, margin-bottom .3s ease-out .3s;
-}
-
-.fr-snackbar-wrapper--first-enter-done {
-  transition: transform .6s ease-out;
-  transform: translateY(0);
-}
-
-.fr-snackbar-wrapper--first-exit-active {
-  transform: translateY(0);
-}
-

package/dist/components/snackbar/Snackbar.d.ts

@@ -1,21 +0,0 @@
-import './Snackbar.scss';
-export interface SnackbarConfig {
-    type?: 'info' | 'warning' | 'error';
-    variant?: 'a' | 'b' | 'c';
-    darkBackground?: boolean;
-    showClose?: boolean;
-    action?: string;
-    disappearAfter?: number | null;
-    key?: string | number;
-    'data-testid'?: string;
-}
-export interface SnackbarData extends SnackbarConfig {
-    text: string;
-}
-export interface SnackbarProps extends React.ComponentPropsWithoutRef<'div'> {
-    readonly data?: SnackbarData;
-    readonly onAction?: () => void;
-    readonly onClose?: () => void;
-    readonly first?: boolean;
-}
-export declare const Snackbar: (props: SnackbarProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;