@rio-cloud/rio-uikit 0.16.4-beta.3 → 0.16.4-beta.4

package/lib/es/components/radiobutton/RadioButton.js

@@ -19,12 +19,12 @@ const RadioButton = props => {
     const { checked, children, className, custom, defaultChecked, disabled, icon, iconLabelPosition, iconSize, inline, inputRef, label, name, onChange, onClick, right, tabIndex, value } = props, remainingProps = tslib_1.__rest(props, ["checked", "children", "className", "custom", "defaultChecked", "disabled", "icon", "iconLabelPosition", "iconSize", "inline", "inputRef", "label", "name", "onChange", "onClick", "right", "tabIndex", "value"]);
     const labelRef = (0, react_1.useRef)();
     const handleToggleKeyDown = event => {
-        switch (event.keyCode) {
-            case 32:
+        switch (event.key) {
+            case ' ':
                 // toggle on space
                 toggle(event);
                 break;
-            case 13:
+            case 'Enter':
                 // open on enter
                 toggle(event);
                 break;

package/lib/es/components/releaseNotes/ReleaseNotes.d.ts

@@ -1,9 +1,35 @@
+import React from 'react';
+export type NoteContent = (React.ReactNode | JSX.Element) | (React.ReactNode | JSX.Element)[];
+export type NoteProps = {
+    version: string;
+    note: {
+        date: string;
+        content: NoteContent;
+    };
+};
+export type ReleaseNotesProps = {
+    /**
+     * Translated release notes of the following shape:
+     * @example
+     * {
+            "0.1.2": {
+                date: '23.07.2018',
+                content: (
+                    <div className='padding-left-15'>
+                        Map view within the tour history table
+                        • Modern map design as used in the Beta of the fleet monitor
+                        • Works with all event types
+                    </div>
+                ),
+            }
+        }
+     */
+    releaseNotes: {
+        [key: string]: {
+            date: string;
+            content: NoteContent;
+        };
+    };
+};
+declare const ReleaseNotes: (props: ReleaseNotesProps) => import("react/jsx-runtime").JSX.Element;
 export default ReleaseNotes;
-declare function ReleaseNotes(props: any): JSX.Element;
-declare namespace ReleaseNotes {
-    const defaultProps: {};
-    namespace propTypes {
-        const releaseNotes: PropTypes.Requireable<object>;
-    }
-}
-import PropTypes from "prop-types";

package/lib/es/components/releaseNotes/ReleaseNotes.js

@@ -2,28 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
 const isArray_1 = tslib_1.__importDefault(require("lodash/fp/isArray"));
 const map_1 = tslib_1.__importDefault(require("lodash/fp/map"));
 const toPairs_1 = tslib_1.__importDefault(require("lodash/fp/toPairs"));
-const renderList = notes => (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: 'margin-bottom-0 margin-left-5 padding-left-25' }, { children: notes }));
-const renderNode = content => (0, jsx_runtime_1.jsx)("div", { children: content });
-const getNotes = (content, version) => {
-    return (0, map_1.default)(point => {
-        return (0, jsx_runtime_1.jsx)("li", { children: point }, `${version}-note-${Math.random()}`);
-    }, content);
-};
-const renderNotes = (note, version) => {
+const Note = (props) => {
+    const { note, version } = props;
     const { date, content } = note;
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'panel panel-default' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'panel-heading' }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex justify-content-between' }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'text-size-16 text-medium' }, { children: `${version}` })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'text-muted text-thin' }, { children: date }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'panel-body white-space-pre-line' }, { children: (0, isArray_1.default)(content) ? renderList(getNotes(content, version)) : renderNode(content) }))] }), `${version}-note`));
-};
-const getReleases = ({ releaseNotes }) => {
-    return (0, map_1.default)(([key, note]) => renderNotes(note, key), (0, toPairs_1.default)(releaseNotes));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'panel panel-default' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'panel-heading' }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex justify-content-between' }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'text-size-16 text-medium' }, { children: `${version}` })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'text-muted text-thin' }, { children: date }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'panel-body white-space-pre-line' }, { children: (0, isArray_1.default)(content) ? ((0, jsx_runtime_1.jsx)("ul", Object.assign({ className: 'margin-bottom-0 margin-left-5 padding-left-25' }, { children: (0, map_1.default)((item) => ((0, jsx_runtime_1.jsx)("li", { children: item }, `${version}-note-${Math.random()}`)), content) }))) : ((0, jsx_runtime_1.jsx)("div", { children: content })) }))] }), `${version}-note`));
 };
-const ReleaseNotes = props => (0, jsx_runtime_1.jsx)("div", { children: getReleases(props) });
-ReleaseNotes.defaultProps = {};
-ReleaseNotes.propTypes = {
-    releaseNotes: prop_types_1.default.object,
+const ReleaseNotes = (props) => {
+    const { releaseNotes } = props, remainingProps = tslib_1.__rest(props, ["releaseNotes"]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { children: (0, map_1.default)(([key, note]) => ((0, jsx_runtime_1.jsx)(Note, { note: note, version: key }, key)), (0, toPairs_1.default)(releaseNotes)) })));
 };
 exports.default = ReleaseNotes;

package/lib/es/components/resizer/Resizer.d.ts

@@ -1,65 +1,58 @@
+import { type MouseEvent, type TouchEvent, type PropsWithChildren } from 'react';
+declare const HORIZONTAL = "x";
+declare const VERTICAL = "y";
+declare const LEFT = "left";
+declare const RIGHT = "right";
+declare const TOP = "top";
+declare const BOTTOM = "bottom";
+export type ResizerProps = {
+    /**
+     * Defines where the resize handle is positioned relative to the element to resize.
+     *
+     * Possible values are:
+     * `Resizer.LEFT`, `Resizer.RIGHT`, `Resizer.TOP`, `Resizer.BOTTOM` or
+     * `left`, `right`, `top`, `bottom`.
+     */
+    position?: typeof LEFT | typeof RIGHT | typeof TOP | typeof BOTTOM;
+    /**
+     * Defines on which axis to resize.
+     *
+     * Possible values are:
+     * `Resizer.HORIZONTAL`, `Resizer.VERTICAL` or `x`, `y`.
+     */
+    direction?: typeof HORIZONTAL | typeof VERTICAL;
+    /**
+     * Callback when the resize starts, means when the handle is pressed. It returns the respective event.
+     * @param event
+     * @returns
+     */
+    onResizeStart?: (event: MouseEvent | TouchEvent) => void;
+    /**
+     * Callback when the resize handle is moved. The function returns the distant between the last
+     * position and the mouse movement. Means you can either subtract or add this diff to the elements
+     * width you want to change.
+     * @param diff
+     * @returns
+     */
+    onResize?: (diff: number) => void;
+    /**
+     * Callback when the resize ends, means when the handle is released. It returns the respective event.
+     * @param event
+     * @returns
+     */
+    onResizeEnd?: (event: Event) => void;
+    /**
+     * Additional classes to be set on the wrapper element.
+     */
+    className?: string;
+};
+declare const Resizer: {
+    (props: PropsWithChildren<ResizerProps>): import("react/jsx-runtime").JSX.Element;
+    HORIZONTAL: "x";
+    VERTICAL: "y";
+    LEFT: "left";
+    RIGHT: "right";
+    TOP: "top";
+    BOTTOM: "bottom";
+};
 export default Resizer;
-declare class Resizer extends React.Component<any, any, any> {
-    constructor(props: any);
-    state: {
-        isDrag: boolean;
-        startPos: {
-            x: number;
-            y: number;
-        };
-    };
-    handleMove(event: any): void;
-    handleStart(event: any): void;
-    handleEnd(event: any): void;
-    listeners: () => {
-        remove(): void;
-    };
-    componentWillUnmount(): void;
-    isTouch(event: any): boolean;
-    getClientX(event: any): any;
-    getClientY(event: any): any;
-    events: {
-        remove(): void;
-    } | undefined;
-    removeListeners(): void;
-    updateStartPosition(event: any): void;
-    getStartPos(event: any): {
-        x: any;
-        y: any;
-    };
-    render(): JSX.Element;
-}
-declare namespace Resizer {
-    const HORIZONTAL: string;
-    const VERTICAL: string;
-    const LEFT: string;
-    const RIGHT: string;
-    const TOP: string;
-    const BOTTOM: string;
-    namespace defaultProps {
-        export const className: string;
-        import direction = Resizer.HORIZONTAL;
-        export { direction };
-        import position = Resizer.RIGHT;
-        export { position };
-        export function onResizeStart(): void;
-        export function onResize(): void;
-        export function onResizeEnd(): void;
-    }
-    namespace propTypes {
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        const direction_1: PropTypes.Requireable<string>;
-        export { direction_1 as direction };
-        const position_1: PropTypes.Requireable<string>;
-        export { position_1 as position };
-        const onResizeStart_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onResizeStart_1 as onResizeStart };
-        const onResize_1: PropTypes.Validator<(...args: any[]) => any>;
-        export { onResize_1 as onResize };
-        const onResizeEnd_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onResizeEnd_1 as onResizeEnd };
-    }
-}
-import React from "react";
-import PropTypes from "prop-types";

package/lib/es/components/resizer/Resizer.js

@@ -2,130 +2,130 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importStar(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
-const ownerDocument_1 = tslib_1.__importDefault(require("../../utils/ownerDocument"));
-const addEventListener_1 = tslib_1.__importDefault(require("../../utils/addEventListener"));
+const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-class Resizer extends react_1.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            isDrag: false,
-            startPos: {
-                x: 0,
-                y: 0,
-            },
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const HORIZONTAL = 'x';
+const VERTICAL = 'y';
+const LEFT = 'left';
+const RIGHT = 'right';
+const TOP = 'top';
+const BOTTOM = 'bottom';
+const createListeners = (targetNode, onEnd, onMove) => {
+    if (!targetNode) {
+        return;
+    }
+    // The read-only ownerDocument property of the Node interface returns
+    // the top-level document object of the node.
+    const ownerDocument = targetNode.ownerDocument;
+    ownerDocument.addEventListener('mouseup', onEnd);
+    ownerDocument.addEventListener('mousemove', onMove);
+    ownerDocument.addEventListener('touchend', onEnd);
+    ownerDocument.addEventListener('touchmove', onMove);
+    return {
+        remove: () => {
+            ownerDocument.removeEventListener('mouseup', onEnd);
+            ownerDocument.removeEventListener('mousemove', onMove);
+            ownerDocument.removeEventListener('touchend', onEnd);
+            ownerDocument.removeEventListener('touchmove', onMove);
+        },
+    };
+};
+const Resizer = (props) => {
+    const { className = '', direction = HORIZONTAL, position = RIGHT, onResizeStart = noop_1.default, onResize = noop_1.default, onResizeEnd = noop_1.default, children } = props, remainingProps = tslib_1.__rest(props, ["className", "direction", "position", "onResizeStart", "onResize", "onResizeEnd", "children"]);
+    const eventsRef = (0, react_1.useRef)(null);
+    // Use refs here instead of local state as the move event listener fired before the state is set
+    // and then it would work with outdated state at that time.
+    const elementRef = (0, react_1.useRef)(null);
+    const isDragRef = (0, react_1.useRef)(false);
+    const startPositionRef = (0, react_1.useRef)({ x: 0, y: 0 });
+    (0, react_1.useEffect)(() => {
+        return () => {
+            removeListeners();
         };
-        this.handleMove = this.handleMove.bind(this);
-        this.handleStart = this.handleStart.bind(this);
-        this.handleEnd = this.handleEnd.bind(this);
-        this.listeners = () => {
-            const doc = (0, ownerDocument_1.default)(this);
-            const mouseUpListener = (0, addEventListener_1.default)(doc, 'mouseup', this.handleEnd);
-            const mouseMoveListener = (0, addEventListener_1.default)(doc, 'mousemove', this.handleMove);
-            const touchEndListener = (0, addEventListener_1.default)(doc, 'touchend', this.handleEnd);
-            const touchMoveListener = (0, addEventListener_1.default)(doc, 'touchmove', this.handleMove);
-            return {
-                remove() {
-                    mouseUpListener.remove();
-                    mouseMoveListener.remove();
-                    touchEndListener.remove();
-                    touchMoveListener.remove();
-                },
-            };
+    }, []);
+    const getClientX = (event) => {
+        if (event instanceof TouchEvent) {
+            return event.touches[0].clientX;
+        }
+        if (event instanceof MouseEvent) {
+            return event.clientX;
+        }
+        throw new Error('Unsupported event type');
+    };
+    const getClientY = (event) => {
+        if (event instanceof TouchEvent) {
+            return event.touches[0].clientY;
+        }
+        if (event instanceof MouseEvent) {
+            return event.clientY;
+        }
+        throw new Error('Unsupported event type');
+    };
+    const handleMouseStart = (event) => {
+        isDragRef.current = true;
+        // Use the native event to check for the event type. Otherwise the type check
+        // fails and the start position would be { x: 0, y: 0 }.
+        const mouseEvent = event.nativeEvent;
+        const { clientX, clientY } = mouseEvent;
+        startPositionRef.current = {
+            x: clientX,
+            y: clientY,
         };
-    }
-    componentWillUnmount() {
-        this.removeListeners();
-    }
-    isTouch(event) {
-        return event.type === 'touchstart' || event.type === 'touchmove';
-    }
-    getClientX(event) {
-        return this.isTouch(event) ? event.touches[0].clientX : event.clientX;
-    }
-    getClientY(event) {
-        return this.isTouch(event) ? event.touches[0].clientY : event.clientY;
-    }
-    handleMove(event) {
-        event.preventDefault();
-        if (!this.state.isDrag) {
+        onResizeStart(event);
+        eventsRef.current = createListeners(elementRef.current, handleEnd, handleMove);
+    };
+    const handleTouchStart = (event) => {
+        isDragRef.current = true;
+        // Use the native event to check for the event type. Otherwise the type check
+        // fails and the start position would be { x: 0, y: 0 }.
+        const touchEvent = event.nativeEvent;
+        const firstTouch = touchEvent.touches[0];
+        startPositionRef.current = {
+            x: firstTouch.clientX,
+            y: firstTouch.clientY,
+        };
+        onResizeStart(event);
+        eventsRef.current = createListeners(elementRef.current, handleEnd, handleMove);
+    };
+    const handleMove = (event) => {
+        if (!isDragRef.current) {
             return;
         }
-        const { direction, onResize } = this.props;
         if (direction === Resizer.HORIZONTAL) {
-            const diff = this.state.startPos.x - this.getClientX(event);
+            const diff = startPositionRef.current.x - getClientX(event);
             if (diff !== 0) {
                 onResize(diff);
             }
         }
         if (direction === Resizer.VERTICAL) {
-            const diff = this.state.startPos.y - this.getClientY(event);
+            const diff = startPositionRef.current.y - getClientY(event);
             if (diff !== 0) {
                 onResize(diff);
             }
         }
-        this.updateStartPosition(event);
-    }
-    handleStart(event) {
-        event.preventDefault();
-        this.setState({
-            isDrag: true,
-            startPos: this.getStartPos(event),
-        });
-        this.props.onResizeStart(event);
-        this.events = this.listeners();
-    }
-    handleEnd(event) {
-        this.setState({
-            isDrag: false,
-        });
-        this.props.onResizeEnd(event);
-        this.removeListeners();
-    }
-    removeListeners() {
-        if (this.events) {
-            this.events.remove();
-        }
-    }
-    updateStartPosition(event) {
-        this.setState({
-            startPos: this.getStartPos(event),
-        });
-    }
-    getStartPos(event) {
-        return {
-            x: this.getClientX(event),
-            y: this.getClientY(event),
+        startPositionRef.current = {
+            x: getClientX(event),
+            y: getClientY(event),
         };
-    }
-    render() {
-        const { className, direction, position, children } = this.props;
-        const wrapperClasses = (0, classnames_1.default)('Resizer', direction === Resizer.HORIZONTAL && 'resize-horizontal', direction === Resizer.VERTICAL && 'resize-vertical', position === Resizer.LEFT && 'resize-left', position === Resizer.RIGHT && 'resize-right', position === Resizer.TOP && 'resize-top', position === Resizer.BOTTOM && 'resize-bottom', className && className);
-        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: wrapperClasses, onMouseDown: this.handleStart, onMouseMove: this.handleMove, onMouseUp: this.handleEnd, onTouchStart: this.handleStart, onTouchMove: this.handleMove, onTouchEnd: this.handleEnd }, { children: children && children })));
-    }
-}
-Resizer.HORIZONTAL = 'x';
-Resizer.VERTICAL = 'y';
-Resizer.LEFT = 'left';
-Resizer.RIGHT = 'right';
-Resizer.TOP = 'top';
-Resizer.BOTTOM = 'bottom';
-Resizer.defaultProps = {
-    className: '',
-    direction: Resizer.HORIZONTAL,
-    position: Resizer.RIGHT,
-    onResizeStart: () => { },
-    onResize: () => { },
-    onResizeEnd: () => { },
-};
-Resizer.propTypes = {
-    className: prop_types_1.default.string,
-    direction: prop_types_1.default.oneOf([Resizer.HORIZONTAL, Resizer.VERTICAL]),
-    position: prop_types_1.default.oneOf([Resizer.LEFT, Resizer.RIGHT, Resizer.TOP, Resizer.BOTTOM]),
-    onResizeStart: prop_types_1.default.func,
-    onResize: prop_types_1.default.func.isRequired,
-    onResizeEnd: prop_types_1.default.func,
+    };
+    const handleEnd = (event) => {
+        isDragRef.current = false;
+        onResizeEnd(event);
+        removeListeners();
+    };
+    const removeListeners = () => {
+        if (eventsRef.current) {
+            eventsRef.current.remove();
+        }
+    };
+    const wrapperClasses = (0, classnames_1.default)('Resizer', direction === 'x' && 'resize-horizontal', direction === 'y' && 'resize-vertical', position === 'left' && 'resize-left', position === 'right' && 'resize-right', position === 'top' && 'resize-top', position === 'bottom' && 'resize-bottom', className && className);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: elementRef, className: wrapperClasses, onMouseDown: handleMouseStart, onTouchStart: handleTouchStart }, remainingProps, { children: children })));
 };
+Resizer.HORIZONTAL = HORIZONTAL;
+Resizer.VERTICAL = VERTICAL;
+Resizer.LEFT = LEFT;
+Resizer.RIGHT = RIGHT;
+Resizer.TOP = TOP;
+Resizer.BOTTOM = BOTTOM;
 exports.default = Resizer;

package/lib/es/components/rules/RuleConnector.d.ts

@@ -1,5 +1,5 @@
 export default RuleConnector;
-declare function RuleConnector(props: any): JSX.Element;
+declare function RuleConnector(props: any): import("react/jsx-runtime").JSX.Element;
 declare namespace RuleConnector {
     const START: string;
     const CENTER: string;

package/lib/es/components/rules/RuleContainer.d.ts

@@ -1,5 +1,5 @@
 export default RuleContainer;
-declare function RuleContainer(props: any): JSX.Element | null;
+declare function RuleContainer(props: any): import("react/jsx-runtime").JSX.Element | null;
 declare namespace RuleContainer {
     namespace defaultProps {
         const show: boolean;

package/lib/es/components/rules/RulesWrapper.d.ts

@@ -2,7 +2,7 @@ export default RulesWrapper;
 declare function RulesWrapper({ children, ...remainigProps }: {
     [x: string]: any;
     children: any;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 declare namespace RulesWrapper {
     const defaultProps: {};
 }

package/lib/es/components/saveableInput/SaveableInput.d.ts

@@ -1,14 +1,46 @@
 import { type Attributes } from 'react';
 export type SaveableInputProps = {
+    /**
+     * The input placeholder.
+     */
     placeholder?: string;
+    /**
+     * The previous or old value shown above the input value.
+     * This value will *not* be changed for new input values.
+     */
     fixedPreviousValue?: string;
+    /**
+     * The previous or old value shown above the input value.
+     * This value *changes* when a new input value is accepted.
+     */
     previousValue?: string;
+    /**
+     * The actual input value.
+     */
     value?: string;
+    /**
+     * Callback function triggered when the value changes.
+     * @param value
+     * @param previousValue
+     * @returns
+     */
     onValueChanged?: (value: string, previousValue: string) => void;
+    /**
+     * Defines the button style: `default` or `primary`.
+     */
     buttonStyle?: 'primary' | 'default';
+    /**
+     * Additional HTML attributes to be set on the input element.
+     */
+    inputProps?: Attributes;
+    /**
+     * Additional classes to be set on the input itself.
+     */
     inputClassName?: string;
+    /**
+     * Additional classes to be set on the wrapper element.
+     */
     className?: string;
-    inputProps?: Attributes;
 };
-declare const SaveableInput: (props: SaveableInputProps) => JSX.Element;
+declare const SaveableInput: (props: SaveableInputProps) => import("react/jsx-runtime").JSX.Element;
 export default SaveableInput;

package/lib/es/components/selects/BaseDropdownMenu.d.ts

@@ -20,9 +20,9 @@ export class BaseDropdownMenu extends React.Component<any, any, any> {
     }[] | undefined;
     getFocusedOptionNode(): any;
     selectOptionOnEnter(event: any): void;
-    render(): JSX.Element | null;
+    render(): import("react/jsx-runtime").JSX.Element | null;
     refDropdownMenu: HTMLUListElement | null | undefined;
-    renderMenuOption(option: any, index: any): JSX.Element;
+    renderMenuOption(option: any, index: any): import("react/jsx-runtime").JSX.Element;
     getSelectedFocusedItemIndex(): any;
     isAutoDropActive(): boolean;
     openMenu(nextProps: any): void;

package/lib/es/components/selects/DropdownHeader.d.ts

@@ -1,5 +1,5 @@
 export default DropdownHeader;
-declare function DropdownHeader(props: any): JSX.Element;
+declare function DropdownHeader(props: any): import("react/jsx-runtime").JSX.Element;
 declare namespace DropdownHeader {
     namespace defaultProps {
         const center: boolean;

package/lib/es/components/selects/Multiselect.d.ts

@@ -20,18 +20,18 @@ export class Multiselect extends React.Component<any, any, any> {
     UNSAFE_componentWillMount(): void;
     UNSAFE_componentWillReceiveProps(nextProps: any): void;
     updateSelectedItems(options: any, value: any): void;
-    render(): JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
     multiselectWrapper: HTMLDivElement | null | undefined;
-    buildSelectionRepresentation(options: any): JSX.Element | "";
+    buildSelectionRepresentation(options: any): import("react/jsx-runtime").JSX.Element | "";
     renderCounterMessage(selectedItems: any, counterMessage: any, renderCounterMessage: any): any;
     isItemSelected(item: any): boolean;
-    renderSelectionItem(item: any, index: any): JSX.Element;
+    renderSelectionItem(item: any, index: any): import("react/jsx-runtime").JSX.Element;
     renderSelection(): any;
-    renderPlaceholder(placeholder: any): JSX.Element;
-    renderToggle(): JSX.Element;
+    renderPlaceholder(placeholder: any): import("react/jsx-runtime").JSX.Element;
+    renderToggle(): import("react/jsx-runtime").JSX.Element;
     refToggle: HTMLDivElement | null | undefined;
-    renderDropdownMenu(): JSX.Element;
-    renderFilterInput(): JSX.Element;
+    renderDropdownMenu(): import("react/jsx-runtime").JSX.Element;
+    renderFilterInput(): import("react/jsx-runtime").JSX.Element;
     filterOptions(itemDOMValues: any, filterValue: any, options: any): any;
     updateSelection(selectedItemId: any): any;
     removeSelectedItem(event: any, itemId: any): void;

package/lib/es/components/selects/Select.d.ts

@@ -21,15 +21,15 @@ export class Select extends React.Component<any, any, any> {
     onOpenMenu(dropup: any): void;
     UNSAFE_componentWillMount(): void;
     UNSAFE_componentWillReceiveProps(nextProps: any): void;
-    render(): JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
     refSelect: HTMLDivElement | null | undefined;
-    renderUnselectedItemIcons(options: any, selectedItem: any): JSX.Element;
-    getSelectedItemLabel(selectedItem: any, placeholder: any): JSX.Element | " ";
-    renderClearButton(): JSX.Element;
-    renderToggle(): JSX.Element;
+    renderUnselectedItemIcons(options: any, selectedItem: any): import("react/jsx-runtime").JSX.Element;
+    getSelectedItemLabel(selectedItem: any, placeholder: any): import("react/jsx-runtime").JSX.Element | " ";
+    renderClearButton(): import("react/jsx-runtime").JSX.Element;
+    renderToggle(): import("react/jsx-runtime").JSX.Element;
     refToggle: HTMLButtonElement | null | undefined;
-    renderDropdownMenu(): JSX.Element;
-    renderFilterInput(): JSX.Element;
+    renderDropdownMenu(): import("react/jsx-runtime").JSX.Element;
+    renderFilterInput(): import("react/jsx-runtime").JSX.Element;
     filterOptions(itemDOMValues: any[] | undefined, filterValue: any, options: any): any;
     isAutoDropActive(): boolean;
 }

package/lib/es/components/sidebars/Sidebar.d.ts

@@ -24,7 +24,7 @@ declare class Sidebar extends React.Component<any, any, any> {
     getWidthInBoundaries(minWidth: any, maxWidth: any, width: any): any;
     handlePrevContent(): void;
     handleNextContent(): void;
-    render(): JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
     sidebarRef: HTMLDivElement | null | undefined;
 }
 declare namespace Sidebar {

package/lib/es/components/slider/RangeSlider.d.ts

@@ -1,5 +1,5 @@
 export default RangeSlider;
-declare function RangeSlider(props: any): JSX.Element;
+declare function RangeSlider(props: any): import("react/jsx-runtime").JSX.Element;
 declare namespace RangeSlider {
     namespace defaultProps {
         const step: number;

package/lib/es/components/slider/Slider.d.ts

@@ -1,5 +1,5 @@
 export default Slider;
-declare function Slider(props: any): JSX.Element;
+declare function Slider(props: any): import("react/jsx-runtime").JSX.Element;
 declare namespace Slider {
     namespace defaultProps {
         const step: number;