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

package/lib/es/components/clearableInput/ClearableInput.js

@@ -3,119 +3,69 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SUPPORTED_TYPES = exports.DEFAULT_TYPE = void 0;
 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"));
+const react_1 = require("react");
 const omit_1 = tslib_1.__importDefault(require("lodash/fp/omit"));
 const isNil_1 = tslib_1.__importDefault(require("lodash/fp/isNil"));
 const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const isFunction_1 = tslib_1.__importDefault(require("lodash/fp/isFunction"));
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const usePrevious_1 = tslib_1.__importDefault(require("../../hooks/usePrevious"));
 exports.DEFAULT_TYPE = 'text';
 exports.SUPPORTED_TYPES = ['text', 'password', 'email'];
-class ClearableInput extends react_1.default.Component {
-    constructor(props) {
-        super(props);
-        const initialValue = props.value || props.defaultValue || '';
-        this.state = {
-            inputValue: initialValue,
-            showClear: this.hasValue(initialValue),
-            // Note: check for null and undefined not for empty string
-            isControlled: !(0, isNil_1.default)(props.value),
-        };
-        this.handleChange = this.handleChange.bind(this);
-        this.handleKeyPress = this.handleKeyPress.bind(this);
-        this.clearInputValue = this.clearInputValue.bind(this);
+const hasValue = (value) => !(0, isEmpty_1.default)(`${value}`);
+const ClearableInput = (0, react_1.forwardRef)((props, ref) => {
+    const { type = exports.DEFAULT_TYPE, defaultValue, value, maxLength, tabIndex = 0, hasError = false, inputRef, autoComplete, onChange = noop_1.default, onBlur = noop_1.default, onFocus = noop_1.default, onClear = noop_1.default, onKeyPress = noop_1.default, inputClassName = '', className = '', children } = props, remainingProps = tslib_1.__rest(props, ["type", "defaultValue", "value", "maxLength", "tabIndex", "hasError", "inputRef", "autoComplete", "onChange", "onBlur", "onFocus", "onClear", "onKeyPress", "inputClassName", "className", "children"]);
+    const initialValue = value || defaultValue || '';
+    const [inputValue, setInputValue] = (0, react_1.useState)(initialValue);
+    const [showClear, setShowClear] = (0, react_1.useState)(hasValue(initialValue));
+    const isControlled = !(0, isNil_1.default)(value);
+    // Handles new input value and saves it in the local state.
+    // The value stored in the state is used for rendering.
+    const changeInternalValue = (newValue = '') => {
+        // this is there to prevent that onChange and UNSAFE_componentWillReceiveProps set state at the same time
+        if (inputValue === newValue) {
+            return;
+        }
+        setInputValue(newValue);
+        setShowClear(hasValue(newValue));
+    };
+    // important for when used as a controlled component and value changes from the outside.
+    const previousValue = (0, usePrevious_1.default)(value);
+    if (previousValue !== value) {
+        changeInternalValue(value);
     }
     // only gets triggered on user interaction.
-    handleChange(event) {
-        const { isControlled } = this.state;
-        const { onChange } = this.props;
-        const value = event.target.value;
+    const handleChange = (event) => {
+        const newValue = event.target.value;
         if (isControlled) {
-            onChange(value, event);
+            onChange(newValue, event);
         }
         else {
-            this.changeInternalValue(value, event);
-            onChange(value, event);
+            changeInternalValue(newValue);
+            onChange(newValue, event);
         }
-    }
+    };
     // Will be triggered on every key press but also when pressing 'Enter' for example
-    handleKeyPress(event) {
-        const { onKeyPress } = this.props;
+    const handleKeyPress = (event) => {
         onKeyPress(event);
-    }
-    // important for when used as a controlled component (value from outside).
-    // eslint-disable-next-line camelcase
-    UNSAFE_componentWillReceiveProps(nextProps) {
-        this.changeInternalValue(nextProps.value);
-    }
-    hasValue(value) {
-        return !(0, isEmpty_1.default)(`${value}`);
-    }
-    // handles new input value and saves it in the state.
-    // the value stored in the state is used for rendering.
-    changeInternalValue(newValue = '') {
-        // this is there to prevent that onChange and UNSAFE_componentWillReceiveProps set state at the same time
-        if (this.state.inputValue === newValue) {
-            return;
-        }
-        this.setState(() => ({
-            inputValue: newValue,
-            showClear: this.hasValue(newValue),
-        }));
-    }
-    clearInputValue(event) {
-        const { onChange, onClear } = this.props;
-        this.changeInternalValue('', event);
+    };
+    const clearInputValue = (event) => {
+        changeInternalValue('');
         onChange('', event);
         if (onClear) {
             onClear(event);
         }
-    }
-    // it is always the value from the state which is used for rendering.
-    // reason: make it possible to use the component as a controlled or uncontrolled component.
-    // https://facebook.github.io/react/docs/uncontrolled-components.html
-    render() {
-        const filteredProps = (0, omit_1.default)(['value', 'defaultValue', 'onClear']);
-        const _a = this.props, { children, className, inputClassName, type, hasError, inputRef, autoComplete } = _a, customProps = tslib_1.__rest(_a, ["children", "className", "inputClassName", "type", "hasError", "inputRef", "autoComplete"]);
-        const { showClear, inputValue } = this.state;
-        const classes = (0, classnames_1.default)('ClearableInput', 'input-group', hasError && 'has-error', className && className);
-        const inputClassNames = (0, classnames_1.default)('form-control', inputClassName, showClear && 'withClearButton');
-        const clearButtonClassNames = (0, classnames_1.default)('clearButton', !showClear && 'hide');
-        const convertedType = type && type.toLowerCase();
-        const inputType = exports.SUPPORTED_TYPES.indexOf(convertedType) !== -1 ? convertedType : exports.DEFAULT_TYPE;
-        const inputProps = Object.assign(Object.assign({}, filteredProps(customProps)), { className: inputClassNames, type: inputType, value: inputValue, onChange: this.handleChange, onKeyPress: this.handleKeyPress, 
-            // ref={this.props.innerRef} is the equivalent of forwardRef
-            ref: inputRef || this.props.innerRef, autoComplete });
-        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes }, { children: [children ? children(inputProps) : (0, jsx_runtime_1.jsx)("input", Object.assign({}, inputProps)), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: clearButtonClassNames, onClick: this.clearInputValue }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) }))] })));
-    }
-}
-ClearableInput.defaultProps = {
-    type: exports.DEFAULT_TYPE,
-    className: '',
-    inputClassName: '',
-    hasError: false,
-    tabIndex: 0,
-    onChange: () => { },
-    onBlur: () => { },
-    onFocus: () => { },
-    onKeyPress: () => { },
-};
-ClearableInput.propTypes = {
-    className: prop_types_1.default.string,
-    inputClassName: prop_types_1.default.string,
-    onChange: prop_types_1.default.func,
-    onBlur: prop_types_1.default.func,
-    onFocus: prop_types_1.default.func,
-    onClear: prop_types_1.default.func,
-    onKeyPress: prop_types_1.default.func,
-    placeholder: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-    type: prop_types_1.default.oneOf(exports.SUPPORTED_TYPES),
-    defaultValue: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-    value: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-    maxLength: prop_types_1.default.number,
-    tabIndex: prop_types_1.default.number,
-    hasError: prop_types_1.default.bool,
-    inputRef: prop_types_1.default.oneOfType([prop_types_1.default.func, prop_types_1.default.object]),
-    autoComplete: prop_types_1.default.string,
-};
+    };
+    const classes = (0, classnames_1.default)('ClearableInput', 'input-group', hasError && 'has-error', className && className);
+    const inputClassNames = (0, classnames_1.default)('form-control', inputClassName, showClear && 'withClearButton');
+    const clearButtonClassNames = (0, classnames_1.default)('clearButton', !showClear && 'hide');
+    const convertedType = type === null || type === void 0 ? void 0 : type.toLowerCase();
+    const inputType = exports.SUPPORTED_TYPES.indexOf(convertedType) !== -1 ? convertedType : exports.DEFAULT_TYPE;
+    const inputProps = Object.assign(Object.assign({}, (0, omit_1.default)(['value', 'defaultValue', 'onClear'])(remainingProps)), { className: inputClassNames, autoComplete, type: inputType, value: inputValue, onChange: handleChange, onKeyPress: handleKeyPress, onBlur,
+        onFocus,
+        maxLength,
+        tabIndex, ref: inputRef || ref });
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes }, { children: [children && (0, isFunction_1.default)(children) ? children(inputProps) : (0, jsx_runtime_1.jsx)("input", Object.assign({}, inputProps)), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: clearButtonClassNames, onClick: clearInputValue }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) }))] })));
+});
 exports.default = ClearableInput;

package/lib/es/components/collapse/Collapse.d.ts

@@ -10,7 +10,7 @@ declare class Collapse extends React.Component<any, any, any> {
     componentDidMount(): void;
     UNSAFE_componentWillReceiveProps(nextProps: any): void;
     getFullHeight(element: any): any;
-    render(): JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
     refTransition: Transition<HTMLElement | undefined> | null | undefined;
 }
 declare namespace Collapse {

package/lib/es/components/contentLoader/ContentLoader.d.ts

@@ -1,33 +1,55 @@
+import { type PropsWithChildren } from 'react';
+declare const RECT = "rect";
+declare const CIRCLE = "circle";
+export type ContentLoaderProps = {
+    /**
+     * Sets the animation speed.
+     * @default 2
+     */
+    speed?: number;
+    /**
+     * Sets the height of the svg element.
+     * @default 14
+     */
+    height?: string | number;
+    /**
+     * Sets the width of the svg element.
+     * @default 100%
+     */
+    width?: string | number;
+    /**
+     * Sets the radius of the svg element. Only relevant for circle elements.
+     * @default 16
+     */
+    radius?: number;
+    /**
+     * Renders either a rectangle or circle.
+     *
+     * Possible values are:
+     * `ContentLoader.RECT`, `ContentLoader.CIRCLE` or `rect`, `circle`
+     */
+    type?: typeof RECT | typeof CIRCLE;
+    /**
+     * Additional class names to ab added to the wrapping svg element.
+     */
+    className?: string;
+    /** Rect object prop. Used internally. */
+    rx?: number;
+    /** Rect object prop. Used internally. */
+    ry?: number;
+};
+type ContentLoaderPropsWithChildren = PropsWithChildren<ContentLoaderProps>;
+/**
+ * This UIKIT component is simple wrapper to make it easier to use with a predefined look and feel. It still
+ * allows for more complex configurations as all additional props are passed down to the third-party
+ * ContentLoader component. For individual customization, it allows passing svg components as rect or circle
+ * directly as children.
+ * @param props
+ * @returns
+ */
+declare const ContentLoader: {
+    (props: ContentLoaderPropsWithChildren): import("react/jsx-runtime").JSX.Element;
+    RECT: "rect";
+    CIRCLE: "circle";
+};
 export default ContentLoader;
-declare function ContentLoader(props: any): JSX.Element;
-declare namespace ContentLoader {
-    const RECT: string;
-    const CIRCLE: string;
-    namespace defaultProps {
-        const speed: number;
-        const height: number;
-        const width: string;
-        const radius: number;
-        const type: string;
-        const className: string;
-        const title: string;
-    }
-    namespace propTypes {
-        const speed_1: PropTypes.Requireable<number>;
-        export { speed_1 as speed };
-        const height_1: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        export { height_1 as height };
-        const width_1: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        export { width_1 as width };
-        const type_1: PropTypes.Requireable<string>;
-        export { type_1 as type };
-        const radius_1: PropTypes.Requireable<number>;
-        export { radius_1 as radius };
-        const title_1: PropTypes.Requireable<string>;
-        export { title_1 as title };
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        export const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    }
-}
-import PropTypes from "prop-types";

package/lib/es/components/contentLoader/ContentLoader.js

@@ -2,48 +2,51 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable no-use-before-define */
-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 react_content_loader_1 = tslib_1.__importDefault(require("react-content-loader"));
 const cond_1 = tslib_1.__importDefault(require("lodash/fp/cond"));
 const isNil_1 = tslib_1.__importDefault(require("lodash/fp/isNil"));
+const RECT = 'rect';
+const CIRCLE = 'circle';
+const DEFAULT_SPEED = 2;
+const DEFAULT_HEIGHT = 14;
+const DEFAULT_WIDTH = '100%';
+const DEFAULT_RADIUS = 16;
+const DEFAULT_TYPE = RECT;
 const hasChildren = ({ children }) => !(0, isNil_1.default)(children);
 const renderChildren = ({ children }) => children;
-const isRect = ({ type }) => type === ContentLoader.RECT;
-const isCircle = ({ type }) => type === ContentLoader.CIRCLE;
-const renderRect = ({ rx = 3, ry = 3 }) => (0, jsx_runtime_1.jsx)("rect", { width: '100%', height: '100%', rx: rx, ry: ry });
+const isRect = ({ type }) => type === RECT;
+const isCircle = ({ type }) => type === CIRCLE;
+const renderRect = ({ rx = 3, ry = 3 }) => ((0, jsx_runtime_1.jsx)("rect", { width: '100%', height: '100%', rx: rx, ry: ry }));
 const renderCircle = ({ radius }) => (0, jsx_runtime_1.jsx)("circle", { cx: radius, cy: radius, r: radius });
-const ContentLoader = props => {
-    const { width, height, radius, className } = props, remainingProps = tslib_1.__rest(props, ["width", "height", "radius", "className"]);
+/**
+ * This UIKIT component is simple wrapper to make it easier to use with a predefined look and feel. It still
+ * allows for more complex configurations as all additional props are passed down to the third-party
+ * ContentLoader component. For individual customization, it allows passing svg components as rect or circle
+ * directly as children.
+ * @param props
+ * @returns
+ */
+const ContentLoader = (props) => {
+    const { speed = DEFAULT_SPEED, width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT, radius = DEFAULT_RADIUS, type = DEFAULT_TYPE, className = '', children } = props, remainingProps = tslib_1.__rest(props, ["speed", "width", "height", "radius", "type", "className", "children"]);
+    // Since we define the default values while destructuring the props, we have to build up a new object
+    // with that defaults to be used in the conditional rendering, otherwise it would use only the props as
+    // passed into the component without the defined defaults.
+    const propsWithDefaults = {
+        type,
+        radius,
+        children,
+    };
     const content = (0, cond_1.default)([
         [hasChildren, renderChildren],
         [isRect, renderRect],
         [isCircle, renderCircle],
-    ])(props);
-    const wrapperHeight = isCircle(props) ? radius * 2 : height;
-    const wrapperWidth = isCircle(props) ? radius * 2 : width;
-    return ((0, jsx_runtime_1.jsx)(react_content_loader_1.default, Object.assign({ className: `ContentLoader ${className}`, height: wrapperHeight, width: wrapperWidth }, remainingProps, { children: content })));
-};
-ContentLoader.RECT = 'rect';
-ContentLoader.CIRCLE = 'circle';
-ContentLoader.defaultProps = {
-    speed: 2,
-    height: 14,
-    width: '100%',
-    radius: 16,
-    type: 'rect',
-    className: '',
-    title: '',
-};
-ContentLoader.propTypes = {
-    speed: prop_types_1.default.number,
-    height: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
-    width: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
-    type: prop_types_1.default.oneOf(['rect', 'circle', ContentLoader.RECT, ContentLoader.CIRCLE]),
-    radius: prop_types_1.default.number,
-    title: prop_types_1.default.string,
-    className: prop_types_1.default.string,
-    children: prop_types_1.default.node,
+    ])(propsWithDefaults);
+    const wrapperHeight = isCircle(propsWithDefaults) ? radius * 2 : height;
+    const wrapperWidth = isCircle(propsWithDefaults) ? wrapperHeight : width;
+    return ((0, jsx_runtime_1.jsx)(react_content_loader_1.default, Object.assign({ speed: speed, height: wrapperHeight, width: wrapperWidth, className: `ContentLoader ${className}` }, remainingProps, { children: content })));
 };
+ContentLoader.RECT = RECT;
+ContentLoader.CIRCLE = CIRCLE;
 exports.default = ContentLoader;

package/lib/es/components/dataTabs/DataTabs.d.ts

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

package/lib/es/components/datepicker/DateRangePicker.d.ts

@@ -13,7 +13,7 @@ declare class DateRangePicker extends React.Component<any, any, any> {
         customRangeEndValue: moment.Moment;
         isStartValid: boolean;
         isEndValid: boolean;
-        dropdownToggleText: JSX.Element;
+        dropdownToggleText: import("react/jsx-runtime").JSX.Element;
         dropup: any;
         pullRight: any;
     };
@@ -99,12 +99,12 @@ declare class DateRangePicker extends React.Component<any, any, any> {
      * @returns {undefined}
      */
     handleSelect(startValue: object, endValue: object): undefined;
-    getDropdownToggle(dropdownToggleText: any): JSX.Element;
+    getDropdownToggle(dropdownToggleText: any): import("react/jsx-runtime").JSX.Element;
     refDropdownToggle: HTMLDivElement | null | undefined;
-    getClearButton(): JSX.Element;
-    getCustomPanelToggle(isCustomVisible: any, textCustom: any): JSX.Element;
-    getCustomPanelButtons(isCustomVisible: any, isStartValid: any, isEndValid: any, textApply: any, textCancel: any): JSX.Element;
-    render(): JSX.Element;
+    getClearButton(): import("react/jsx-runtime").JSX.Element;
+    getCustomPanelToggle(isCustomVisible: any, textCustom: any): import("react/jsx-runtime").JSX.Element;
+    getCustomPanelButtons(isCustomVisible: any, isStartValid: any, isEndValid: any, textApply: any, textCancel: any): import("react/jsx-runtime").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
     refDropdownMenu: HTMLUListElement | null | undefined;
 }
 declare namespace DateRangePicker {

package/lib/es/components/dialog/ConfirmationDialog.d.ts

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

package/lib/es/components/dialog/Dialog.js

@@ -15,6 +15,7 @@ const DialogHeader_1 = tslib_1.__importDefault(require("./DialogHeader"));
 const DialogBody_1 = tslib_1.__importDefault(require("./DialogBody"));
 const DialogFooter_1 = tslib_1.__importDefault(require("./DialogFooter"));
 const baseDialogPropTypes_1 = tslib_1.__importDefault(require("./baseDialogPropTypes"));
+const useFocusTrap_1 = tslib_1.__importDefault(require("../../hooks/useFocusTrap"));
 const MODAL_DIALOG_CLASS = 'modal-dialog';
 const MODAL_OPEN_CLASS = 'modal-open';
 const Dialog = props => {
@@ -22,6 +23,10 @@ const Dialog = props => {
     const [open, setOpen] = (0, react_1.useState)(show);
     const dialogWrapperRef = (0, react_1.useRef)();
     const modalRoot = (0, portalRoot_1.getOrCreatePortalRoot)();
+    // Use a setter function for the focus trap as it would nor re-render
+    // and fails to set the focus listener
+    const [focusTrapRef, setFocusTrapRef] = (0, react_1.useState)();
+    (0, useFocusTrap_1.default)(focusTrapRef);
     const toggleBodyClass = add => {
         // We need to set a body class to fix the -webkit-overflow-scrolling on safari and iOS
         // Remove "modal-open" from body only when there is no other dialog in the DOM
@@ -57,13 +62,19 @@ const Dialog = props => {
         }
     });
     const handleEntered = () => {
+        var _a;
+        const dialogElement = dialogWrapperRef.current;
+        const currentActiveElement = (0, activeElement_1.default)(document);
+        // Set the focus to the dialog if no element inside has focus already. Otherwise, focused
+        // elements like inputs would loos their focus to the dialog.
         // Note that in order to focus the dialog itself, the tabindex has to be set on that element
-        dialogWrapperRef && dialogWrapperRef.current && dialogWrapperRef.current.focus();
+        if (!dialogElement.contains(currentActiveElement)) {
+            (_a = dialogWrapperRef === null || dialogWrapperRef === void 0 ? void 0 : dialogWrapperRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
     };
     const modalClasses = (0, classnames_1.default)('modal', 'show', className);
     const modalDialogClasses = (0, classnames_1.default)(MODAL_DIALOG_CLASS, useOverflow && 'modal-overflow', bsSize === Dialog.SIZE_SM && 'modal-sm', bsSize === Dialog.SIZE_LG && 'modal-lg', bsSize === Dialog.SIZE_XL && 'modal-xl', bsSize === Dialog.SIZE_FULL && 'modal-full-width', bsSize === Dialog.SIZE_FULL_WIDTH && 'modal-full-width', bsSize === Dialog.SIZE_FULL_HEIGHT && 'modal-full-height', bsSize === Dialog.SIZE_FULL_SCREEN && 'modal-fullscreen');
-    const backdropClasses = (0, classnames_1.default)('modal-backdrop');
-    return react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(react_transition_group_1.CSSTransition, Object.assign({ in: open, timeout: 200, classNames: 'modal', unmountOnExit: true, onEntered: handleEntered }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: modalClasses, tabIndex: 1, role: 'dialog', ref: dialogWrapperRef }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: modalDialogClasses, role: 'document' }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'modal-content' }, { children: [title && ((0, jsx_runtime_1.jsx)(DialogHeader_1.default, { title: title, subtitle: subtitle, headerButtons: headerButtons, showCloseButton: showCloseButton, onClose: handleClose })), body && (0, jsx_runtime_1.jsx)(DialogBody_1.default, Object.assign({ className: bodyClassName }, { children: body })), footer && (0, jsx_runtime_1.jsx)(DialogFooter_1.default, Object.assign({ className: footerClassName }, { children: footer }))] })) })), (0, jsx_runtime_1.jsx)("div", { className: backdropClasses })] })) })), modalRoot);
+    return react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(react_transition_group_1.CSSTransition, Object.assign({ in: open, timeout: 200, classNames: 'modal', unmountOnExit: true, onEntered: handleEntered }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: modalClasses, tabIndex: 0, role: 'dialog', ref: dialogWrapperRef }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ ref: setFocusTrapRef, className: modalDialogClasses, role: 'document' }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'modal-content' }, { children: [title && ((0, jsx_runtime_1.jsx)(DialogHeader_1.default, { title: title, subtitle: subtitle, headerButtons: headerButtons, showCloseButton: showCloseButton, onClose: handleClose })), body && (0, jsx_runtime_1.jsx)(DialogBody_1.default, Object.assign({ className: bodyClassName }, { children: body })), footer && (0, jsx_runtime_1.jsx)(DialogFooter_1.default, Object.assign({ className: footerClassName }, { children: footer }))] })) })), (0, jsx_runtime_1.jsx)("div", { className: 'modal-backdrop' })] })) })), modalRoot);
 };
 Dialog.SIZE_SM = 'sm';
 Dialog.SIZE_MD = 'md'; // default

package/lib/es/components/dialog/DialogBody.d.ts

@@ -3,7 +3,7 @@ declare function DialogBody({ className, children, ...remainingProps }: {
     [x: string]: any;
     className: any;
     children: any;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 declare namespace DialogBody {
     namespace defaultProps {
         const className: string;

package/lib/es/components/dialog/DialogFooter.d.ts

@@ -3,7 +3,7 @@ declare function DialogFooter({ className, children, ...remainingProps }: {
     [x: string]: any;
     className: any;
     children: any;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 declare namespace DialogFooter {
     namespace defaultProps {
         const className: string;

package/lib/es/components/dialog/DialogHeader.d.ts

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

package/lib/es/components/dialog/InfoDialog.d.ts

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

package/lib/es/components/dialog/MediaDialog.d.ts

@@ -6,13 +6,13 @@ declare class MediaDialog extends React.Component<any, any, any> {
     };
     handlePrevious(): void;
     handleNext(): void;
-    renderFallback(): JSX.Element;
-    renderImage(mediaData: any): JSX.Element;
-    renderVideo(mediaData: any): JSX.Element;
+    renderFallback(): import("react/jsx-runtime").JSX.Element;
+    renderImage(mediaData: any): import("react/jsx-runtime").JSX.Element;
+    renderVideo(mediaData: any): import("react/jsx-runtime").JSX.Element;
     renderMediaContent(mediaData?: {}): any;
-    renderBody(media: any[] | undefined, currentMediaIndex: any): JSX.Element;
-    renderFooter(props: any): JSX.Element;
-    render(): JSX.Element | null;
+    renderBody(media: any[] | undefined, currentMediaIndex: any): import("react/jsx-runtime").JSX.Element;
+    renderFooter(props: any): import("react/jsx-runtime").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element | null;
 }
 declare namespace MediaDialog {
     const MEDIA_TYPE_IMAGE: string;

package/lib/es/components/dialog/ReleaseNotesDialog.d.ts

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

package/lib/es/components/dialog/SaveDialog.d.ts

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

package/lib/es/components/dialog/SimpleDialog.d.ts

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

package/lib/es/components/dialog/SplitDialog.d.ts

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

package/lib/es/components/driverName/DriverName.d.ts

@@ -5,7 +5,7 @@ export function formatDriverName({ firstName, lastName }: {
 export function DriverName({ driver, ...remainingProps }: {
     [x: string]: any;
     driver: any;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export namespace DriverName {
     namespace propTypes {
         const driver: PropTypes.Requireable<PropTypes.InferProps<{

package/lib/es/components/dropdown/ButtonDropdown.d.ts

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

package/lib/es/components/dropdown/Caret.d.ts

@@ -1,2 +1,2 @@
 export default Caret;
-declare function Caret(): JSX.Element;
+declare function Caret(): import("react/jsx-runtime").JSX.Element;

package/lib/es/components/dropdown/DropdownSubmenu.d.ts

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

package/lib/es/components/dropdown/SimpleButtonDropdown.d.ts

@@ -1,2 +1,2 @@
 export default SimpleButtonDropdown;
-declare function SimpleButtonDropdown(props: any): JSX.Element;
+declare function SimpleButtonDropdown(props: any): import("react/jsx-runtime").JSX.Element;

package/lib/es/components/dropdown/SingleButtonDropdown.d.ts

@@ -1,2 +1,2 @@
 export default SingleButtonDropdown;
-declare function SingleButtonDropdown(props: any): JSX.Element;
+declare function SingleButtonDropdown(props: any): import("react/jsx-runtime").JSX.Element;

package/lib/es/components/dropdown/SplitButtonDropdown.d.ts

@@ -1,2 +1,2 @@
 export default SplitButtonDropdown;
-declare function SplitButtonDropdown(props: any): JSX.Element;
+declare function SplitButtonDropdown(props: any): import("react/jsx-runtime").JSX.Element;