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

package/lib/es/components/pager/Pager.d.ts

@@ -1,25 +1,53 @@
+import React from 'react';
+import type { ObjectValues } from '../../utils/ObjectValues';
+export declare const PagerVariant: {
+    readonly VARIANT_FULL: "full";
+    readonly VARIANT_COMPACT: "compact";
+};
+export type PagerProps = {
+    /**
+     * The title or name of the section next/previous section.
+     */
+    title: string | React.ReactNode;
+    /**
+     * The optional label for the full variant.
+     */
+    label?: string | React.ReactNode;
+    /**
+     * Set right alignment for "previous" pager content to be aligned
+     * to the right side of the pager and the arrow on the left side.
+     * @default false
+     */
+    alignRight?: boolean;
+    /**
+     * Define how large the component should be rendered.
+     *
+     * Possible values are:
+     * `Pager.VARIANT_FULL`, `Pager.VARIANT_COMPACT` or
+     * `full`, `compact`.
+     *
+     * @default `full`
+     */
+    variant?: ObjectValues<typeof PagerVariant>;
+    /**
+     * Sets the pager disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback function for when the component is clicked.
+     * @param event
+     * @returns
+     */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Additional classes for the wrapper element.
+     */
+    className?: string;
+};
+declare const Pager: {
+    (props: PagerProps): import("react/jsx-runtime").JSX.Element;
+    VARIANT_FULL: "full";
+    VARIANT_COMPACT: "compact";
+};
 export default Pager;
-declare function Pager(props: any): JSX.Element;
-declare namespace Pager {
-    const VARIANT_FULL: string;
-    const VARIANT_COMPACT: string;
-    namespace defaultProps {
-        import variant = Pager.VARIANT_FULL;
-        export { variant };
-        export const alignRight: boolean;
-        export const disabled: boolean;
-    }
-    namespace propTypes {
-        export const title: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
-        export const label: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        const alignRight_1: PropTypes.Requireable<boolean>;
-        export { alignRight_1 as alignRight };
-        const variant_1: PropTypes.Requireable<string>;
-        export { variant_1 as variant };
-        const disabled_1: PropTypes.Requireable<boolean>;
-        export { disabled_1 as disabled };
-        export const onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        export const className: PropTypes.Requireable<string>;
-    }
-}
-import PropTypes from "prop-types";

package/lib/es/components/pager/Pager.js

@@ -1,12 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.PagerVariant = void 0;
 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 react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const Pager = props => {
-    const { title, label, alignRight, variant, disabled, onClick, className } = props, remainingProps = tslib_1.__rest(props, ["title", "label", "alignRight", "variant", "disabled", "onClick", "className"]);
+exports.PagerVariant = {
+    VARIANT_FULL: 'full',
+    VARIANT_COMPACT: 'compact',
+};
+const Pager = (props) => {
+    const { title, label, alignRight = false, variant = exports.PagerVariant.VARIANT_FULL, disabled = false, onClick, className } = props, remainingProps = tslib_1.__rest(props, ["title", "label", "alignRight", "variant", "disabled", "onClick", "className"]);
     const [isHover, setIsHover] = (0, react_1.useState)(false);
     const handleEnter = () => !disabled && setIsHover(true);
     const handleLeave = () => setIsHover(false);
@@ -26,20 +30,6 @@ const Pager = props => {
     const titleClassesFull = (0, classnames_1.default)(titleClassesBase, alignRight && 'text-right', 'text-size-16 text-medium');
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: wrapperClassesFull, onMouseEnter: handleEnter, onMouseLeave: handleLeave, onClick: onClick }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `display-flex flex-1-1 flex-column ${alignRight ? 'align-items-end' : ''}` }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'text-color-gray line-height-16' }, { children: label })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: titleClassesFull }, { children: title }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'text-size-12' }, { children: (0, jsx_runtime_1.jsx)("span", { className: iconClassesFull }) }))] })));
 };
-Pager.VARIANT_FULL = 'full';
-Pager.VARIANT_COMPACT = 'compact';
-Pager.defaultProps = {
-    variant: Pager.VARIANT_FULL,
-    alignRight: false,
-    disabled: false,
-};
-Pager.propTypes = {
-    title: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]).isRequired,
-    label: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-    alignRight: prop_types_1.default.bool,
-    variant: prop_types_1.default.oneOf([Pager.VARIANT_FULL, Pager.VARIANT_COMPACT, 'full', 'compact']),
-    disabled: prop_types_1.default.bool,
-    onClick: prop_types_1.default.func,
-    className: prop_types_1.default.string,
-};
+Pager.VARIANT_FULL = exports.PagerVariant.VARIANT_FULL;
+Pager.VARIANT_COMPACT = exports.PagerVariant.VARIANT_COMPACT;
 exports.default = Pager;

package/lib/es/components/position/Position.d.ts

@@ -1,5 +1,5 @@
 export default Position;
-declare function Position(props: any): JSX.Element;
+declare function Position(props: any): import("react/jsx-runtime").JSX.Element;
 declare namespace Position {
     namespace propTypes {
         const latitude: PropTypes.Validator<number>;

package/lib/es/components/radiobutton/RadioButton.d.ts

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

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: {};
 }