@rio-cloud/rio-uikit 0.16.4-beta.8 → 1.1.0

package/components/dialog/MediaDialog.js

@@ -1,107 +1,64 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { useState } from 'react';
 import classNames from 'classnames';
+import noop from 'lodash/fp/noop';
 import Dialog from './Dialog';
 import ResponsiveVideo from '../video/ResponsiveVideo';
 import ImagePreloader from '../preloader/ImagePreloader';
 import Spinner from '../spinner/Spinner';
-import baseDialogPropTypes from './baseDialogPropTypes';
-// TODO: add keyboard support left/right
-class MediaDialog extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            currentMediaIndex: 0,
-        };
-        this.handlePrevious = this.handlePrevious.bind(this);
-        this.handleNext = this.handleNext.bind(this);
-    }
-    handlePrevious() {
-        const oldIndex = this.state.currentMediaIndex;
-        const newIndex = oldIndex === 0 ? this.props.media.length - 1 : oldIndex - 1;
-        this.setState(() => ({
-            currentMediaIndex: newIndex,
-        }));
-        this.props.previousButtonCallback(newIndex);
-    }
-    handleNext() {
-        const oldIndex = this.state.currentMediaIndex;
-        const newIndex = oldIndex === this.props.media.length - 1 ? 0 : oldIndex + 1;
-        this.setState(() => ({
-            currentMediaIndex: newIndex,
-        }));
-        this.props.nextButtonCallback(newIndex);
-    }
-    renderFallback() {
+const MediaDialog = (props) => {
+    const { show = false, onClose = noop, disableEsc = false, useOverflow = false, bsSize = 'lg', media = [], previousButtonText = 'Prev', previousButtonCallback = noop, nextButtonText = 'Next', nextButtonCallback = noop, className } = props, remainingProps = __rest(props, ["show", "onClose", "disableEsc", "useOverflow", "bsSize", "media", "previousButtonText", "previousButtonCallback", "nextButtonText", "nextButtonCallback", "className"]);
+    const [currentMediaIndex, setCurrentMediaIndex] = useState(0);
+    const handlePrevious = () => {
+        const oldIndex = currentMediaIndex;
+        const newIndex = oldIndex === 0 ? props.media.length - 1 : oldIndex - 1;
+        setCurrentMediaIndex(newIndex);
+        previousButtonCallback(newIndex);
+    };
+    const handleNext = () => {
+        const oldIndex = currentMediaIndex;
+        const newIndex = oldIndex === props.media.length - 1 ? 0 : oldIndex + 1;
+        setCurrentMediaIndex(newIndex);
+        nextButtonCallback(newIndex);
+    };
+    const renderFallback = () => {
         return (_jsx("div", Object.assign({ className: 'text-center text-size-h3' }, { children: _jsx("span", { className: 'rioglyph rioglyph-missing text-size-200pct text-color-gray' }) })));
-    }
-    renderImage(mediaData) {
+    };
+    const renderImage = (mediaData) => {
         const imageClassNames = classNames('img-responsive', mediaData.className && mediaData.className);
-        return (_jsx(ImagePreloader, Object.assign({ src: mediaData.src, className: imageClassNames }, { children: ({ status, image }) => {
+        return (
+        // @ts-ignore
+        _jsx(ImagePreloader, Object.assign({ src: mediaData.src, className: imageClassNames }, { children: ({ status, image }) => {
                 if (status === ImagePreloader.STATUS_LOADED) {
                     // When image has been loaded, render the image tag
                     return _jsx("img", { className: 'ani-fade-in', src: image.src }, image.src);
                 }
                 if (status === ImagePreloader.STATUS_FAILED) {
-                    return this.renderFallback();
+                    return renderFallback();
                 }
                 return _jsx(Spinner, { isInverse: false });
             } })));
-    }
-    renderVideo(mediaData) {
+    };
+    const renderVideo = (mediaData) => {
+        var _a;
         const videoClassNames = classNames(mediaData.className && mediaData.className);
-        return (_jsx("div", Object.assign({ className: 'flex-1-0' }, { children: _jsx(ResponsiveVideo, Object.assign({}, mediaData, { className: videoClassNames })) })));
-    }
-    renderMediaContent(mediaData = {}) {
+        return (_jsx("div", Object.assign({ className: 'flex-1-0' }, { children: _jsx(ResponsiveVideo, { src: mediaData.src, aspectRatio: (_a = mediaData.aspectRatio) !== null && _a !== void 0 ? _a : '16by9', className: videoClassNames }) })));
+    };
+    const renderMediaContent = (mediaData = {}) => {
         if (mediaData.type === MediaDialog.MEDIA_TYPE_VIDEO) {
-            return this.renderVideo(mediaData);
+            return renderVideo(mediaData);
         }
         // image media is default
-        return mediaData.src && this.renderImage(mediaData);
-    }
-    renderBody(media = [], currentMediaIndex) {
-        const mediaData = media[currentMediaIndex];
-        const mediaContentClassNames = classNames('media-content', 'content-center');
-        return _jsx("div", Object.assign({ className: mediaContentClassNames }, { children: this.renderMediaContent(mediaData) }));
-    }
-    renderFooter(props) {
-        return (_jsxs("div", Object.assign({ className: 'position-relative clearfix' }, { children: [_jsxs("button", Object.assign({ type: 'button', className: 'btn btn-primary btn-link pull-left', onClick: this.handlePrevious }, { children: [_jsx("span", { className: 'rioglyph rioglyph-chevron-left' }), props.previousButtonText] })), _jsx("div", Object.assign({ className: 'position-absolute top-50pct left-50pct transform translate-centered' }, { children: `${this.state.currentMediaIndex + 1} / ${props.media.length}` })), _jsxs("button", Object.assign({ type: 'button', className: 'btn btn-primary btn-link btn-icon-right pull-right', onClick: this.handleNext }, { children: [_jsx("span", { className: 'rioglyph rioglyph-chevron-right' }), props.nextButtonText] }))] })));
-    }
-    render() {
-        const _a = this.props, { show, onClose, className, media = [], previousButtonText, nextButtonText, previousButtonCallback, nextButtonCallback } = _a, remainingProps = __rest(_a, ["show", "onClose", "className", "media", "previousButtonText", "nextButtonText", "previousButtonCallback", "nextButtonCallback"]);
-        const { currentMediaIndex } = this.state;
-        if (!show) {
-            return null;
-        }
-        const dialogClassName = classNames('media-dialog', className && className);
-        const bodyClassNames = classNames('padding-0');
-        const mediaTitle = media[currentMediaIndex].title;
-        const mediaSubtitle = media[currentMediaIndex].subtitle || null;
-        return (_jsx(Dialog, Object.assign({}, remainingProps, { show: show, title: mediaTitle, subtitle: mediaSubtitle, body: this.renderBody(media, currentMediaIndex), footer: media && media.length > 1 ? this.renderFooter(this.props) : '', onHide: onClose, className: dialogClassName, bodyClassName: bodyClassNames })));
-    }
-}
+        return mediaData.src && renderImage(mediaData);
+    };
+    const dialogClassName = classNames('media-dialog', className && className);
+    const bodyClassNames = classNames('padding-0');
+    const mediaContentClassNames = classNames('media-content', 'content-center');
+    const mediaTitle = media[currentMediaIndex].title;
+    const mediaSubtitle = media[currentMediaIndex].subtitle || null;
+    return (_jsx(Dialog, Object.assign({}, remainingProps, { show: show, title: mediaTitle, subtitle: mediaSubtitle, body: _jsx("div", Object.assign({ className: mediaContentClassNames }, { children: renderMediaContent(media[currentMediaIndex]) })), footer: (media === null || media === void 0 ? void 0 : media.length) > 1 && (_jsxs("div", Object.assign({ className: 'position-relative clearfix' }, { children: [_jsxs("button", Object.assign({ type: 'button', className: 'btn btn-primary btn-link pull-left', onClick: handlePrevious }, { children: [_jsx("span", { className: 'rioglyph rioglyph-chevron-left' }), previousButtonText] })), _jsx("div", Object.assign({ className: 'position-absolute top-50pct left-50pct transform translate-centered' }, { children: `${currentMediaIndex + 1} / ${props.media.length}` })), _jsxs("button", Object.assign({ type: 'button', className: 'btn btn-primary btn-link btn-icon-right pull-right', onClick: handleNext }, { children: [_jsx("span", { className: 'rioglyph rioglyph-chevron-right' }), nextButtonText] }))] }))), onClose: onClose, className: dialogClassName, bodyClassName: bodyClassNames, disableEsc: disableEsc, useOverflow: useOverflow, bsSize: bsSize })));
+};
 MediaDialog.MEDIA_TYPE_IMAGE = 'image';
 MediaDialog.MEDIA_TYPE_VIDEO = 'video';
-MediaDialog.defaultProps = {
-    show: false,
-    onClose: () => { },
-    disableEsc: false,
-    useOverflow: false,
-    bsSize: Dialog.SIZE_LG,
-    media: [],
-    previousButtonText: 'Prev',
-    previousButtonCallback: () => { },
-    nextButtonText: 'Next',
-    nextButtonCallback: () => { },
-};
-MediaDialog.propTypes = Object.assign(Object.assign({}, baseDialogPropTypes), { media: PropTypes.arrayOf(PropTypes.shape({
-        type: PropTypes.oneOf([MediaDialog.MEDIA_TYPE_IMAGE, MediaDialog.MEDIA_TYPE_VIDEO]).isRequired,
-        src: PropTypes.string.isRequired,
-        title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
-        subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-        aspectRatio: PropTypes.string,
-        className: PropTypes.string,
-    })).isRequired, previousButtonText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired, previousButtonCallback: PropTypes.func, nextButtonText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired, nextButtonCallback: PropTypes.func });
 export default MediaDialog;

package/components/dialog/ReleaseNotesDialog.d.ts

@@ -1,20 +1,61 @@
+import { type ReleaseNotesData } from '../releaseNotes/ReleaseNotes';
+export type ReleaseNotesDialogProps = {
+    /**
+     * Decides if the dialog is opened.
+     */
+    showReleaseNotes: boolean;
+    /**
+     * Callback set showReleaseNotes state
+     * @param show
+     * @returns
+     */
+    setShowReleaseNotes: (show: boolean) => void;
+    /**
+     * Translated text for "What`s new?"
+     */
+    whatsNewTitle?: string;
+    /**
+     * The translated modulename.
+     */
+    moduleName?: string;
+    /**
+     * Translated text for the close button.
+     */
+    closeButtonText?: string;
+    /**
+     * Translated release notes.
+     *
+     * @example
+     *
+     * ```tsx
+     * {
+     *     "0.1.2": {
+     *         date: '20.10.2023',
+     *         content: (
+     *             <div className='padding-left-15'>
+     *                 Summary
+     *                 • Feature 1
+     *                 • Feature 2
+     *             </div>
+     *         ),
+     *     }
+     * }
+     * ```
+     */
+    translatedReleaseNotes: ReleaseNotesData;
+    /**
+     * Specifies the current module version.
+     */
+    currentVersion: string;
+    /**
+     * Specifies the item in the localStorage that is used to save the last read module version.
+     */
+    RELEASE_NOTES_ITEM: string;
+    /**
+     * Enables the content of the dialog to scroll when it overflows.
+     * This means the dialog body scrolls instead of the entire dialog.
+     */
+    useOverflow?: boolean;
+};
+declare const ReleaseNotesDialog: (props: ReleaseNotesDialogProps) => import("react/jsx-runtime").JSX.Element;
 export default ReleaseNotesDialog;
-declare function ReleaseNotesDialog(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace ReleaseNotesDialog {
-    namespace defaultProps {
-        const useOverflow: boolean;
-    }
-    namespace propTypes {
-        export const showReleaseNotes: PropTypes.Validator<boolean>;
-        export const setShowReleaseNotes: PropTypes.Validator<(...args: any[]) => any>;
-        export const whatsNewTitle: PropTypes.Requireable<string>;
-        export const moduleName: PropTypes.Requireable<string>;
-        export const closeButtonText: PropTypes.Requireable<string>;
-        export const translatedReleaseNotes: PropTypes.Requireable<object>;
-        export const currentVersion: PropTypes.Validator<string>;
-        export const RELEASE_NOTES_ITEM: PropTypes.Validator<string>;
-        const useOverflow_1: PropTypes.Requireable<boolean>;
-        export { useOverflow_1 as useOverflow };
-    }
-}
-import PropTypes from "prop-types";

package/components/dialog/ReleaseNotesDialog.js

@@ -1,37 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import PropTypes from 'prop-types';
-import Dialog from './Dialog';
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
 import ReleaseNotes from '../releaseNotes/ReleaseNotes';
-const setReleaseNotesItem = props => {
+import Button from '../button/Button';
+import Dialog from './Dialog';
+const setReleaseNotesItem = (props) => {
     window.localStorage.setItem(props.RELEASE_NOTES_ITEM, props.currentVersion);
     props.setShowReleaseNotes(false);
 };
-const getModuleName = (moduleName, whatsNew) => _jsx("span", { children: moduleName ? moduleName : whatsNew });
-const getBody = props => {
-    const { translatedReleaseNotes } = props;
-    return _jsx(ReleaseNotes, { releaseNotes: translatedReleaseNotes });
-};
-const getFooter = props => {
-    const { closeButtonText } = props;
-    return (_jsx("button", Object.assign({ "data-component": 'CloseButton', type: 'button', className: 'btn btn-default', onClick: () => setReleaseNotesItem(props) }, { children: closeButtonText || 'Close' })));
-};
-const ReleaseNotesDialog = props => {
-    const { moduleName, whatsNewTitle } = props;
-    return (_jsx(Dialog, { show: props.showReleaseNotes, useOverflow: props.useOverflow, title: getModuleName(moduleName, whatsNewTitle), subtitle: moduleName && whatsNewTitle, body: getBody(props), footer: getFooter(props), onHide: () => setReleaseNotesItem(props) }));
-};
-ReleaseNotesDialog.defaultProps = {
-    useOverflow: true,
-};
-ReleaseNotesDialog.propTypes = {
-    showReleaseNotes: PropTypes.bool.isRequired,
-    setShowReleaseNotes: PropTypes.func.isRequired,
-    whatsNewTitle: PropTypes.string,
-    moduleName: PropTypes.string,
-    closeButtonText: PropTypes.string,
-    translatedReleaseNotes: PropTypes.object,
-    currentVersion: PropTypes.string.isRequired,
-    RELEASE_NOTES_ITEM: PropTypes.string.isRequired,
-    useOverflow: PropTypes.bool,
+const getModuleName = (moduleName, whatsNew) => (_jsx("span", { children: moduleName ? moduleName : whatsNew }));
+const ReleaseNotesDialog = (props) => {
+    const { moduleName, whatsNewTitle, closeButtonText, translatedReleaseNotes, useOverflow = true } = props;
+    return (_jsx(Dialog, { show: props.showReleaseNotes, useOverflow: useOverflow, title: getModuleName(moduleName, whatsNewTitle), subtitle: moduleName && whatsNewTitle, body: _jsx(ReleaseNotes, { releaseNotes: translatedReleaseNotes }), footer: _jsx(Button, Object.assign({ onClick: () => setReleaseNotesItem(props) }, { children: closeButtonText || 'Close' })), onClose: () => setReleaseNotesItem(props) }));
 };
 export default ReleaseNotesDialog;

package/components/dialog/SaveDialog.d.ts

@@ -1,31 +1,35 @@
+import React from 'react';
+import { type BaseDialogProps } from './Dialog';
+export type SaveDialogProps = BaseDialogProps & {
+    /**
+     * The content of the dialog body itself.
+     */
+    content: string | React.ReactNode;
+    /**
+     * A callback fired when the cancel button is clicked or the dialog is closed.
+     */
+    onClickCancel: VoidFunction;
+    /**
+     * A callback fired when the discard button is clicked.
+     */
+    onClickDiscard: VoidFunction;
+    /**
+     * A callback fired when the confirmation button is clicked.
+     */
+    onClickConfirm: VoidFunction;
+    /**
+     * The content of the discard button. (Usually a text, can also be a FormattedMessage component).
+     */
+    discardButtonText: string | React.ReactNode;
+    /**
+     * The content of the cancel button. (Usually a text, can also be a FormattedMessage component).
+     */
+    cancelButtonText: string | React.ReactNode;
+    /**
+     * The content of the confirmation button. Since it is a node, it can be a simple text
+     * or any JSX node like a div element with an icon and a text.
+     */
+    confirmButtonText: string | React.ReactNode;
+};
+declare const SaveDialog: (props: SaveDialogProps) => import("react/jsx-runtime").JSX.Element;
 export default SaveDialog;
-declare function SaveDialog(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace SaveDialog {
-    namespace defaultProps {
-        const show: boolean;
-        const showCloseButton: boolean;
-        function onClickCancel(): void;
-        function onClickConfirm(): void;
-        function onClickDiscard(): void;
-    }
-    const propTypes: {
-        content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        onClickCancel: PropTypes.Validator<(...args: any[]) => any>;
-        onClickDiscard: PropTypes.Validator<(...args: any[]) => any>;
-        onClickConfirm: PropTypes.Validator<(...args: any[]) => any>;
-        discardButtonText: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-        cancelButtonText: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-        confirmButtonText: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-        show: PropTypes.Validator<boolean>;
-        title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        subtitle: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        iconNavigation: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        showCloseButton: PropTypes.Requireable<boolean>;
-        onClose: PropTypes.Requireable<(...args: any[]) => any>;
-        bsSize: PropTypes.Requireable<string>;
-        disableEsc: PropTypes.Requireable<boolean>;
-        useOverflow: PropTypes.Requireable<boolean>;
-        className: PropTypes.Requireable<string>;
-    };
-}
-import PropTypes from "prop-types";

package/components/dialog/SaveDialog.js

@@ -1,23 +1,13 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import PropTypes from 'prop-types';
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+import noop from 'lodash/fp/noop';
+import Button from '../button/Button';
 import Dialog from './Dialog';
-import baseDialogPropTypes from './baseDialogPropTypes';
-/*
- * Save dialog component to save, discard or cancel an action
- */
-const SaveDialog = props => {
-    const { content, onClickDiscard, discardButtonText, onClickCancel, cancelButtonText, onClickConfirm, confirmButtonText } = props, remainingProps = __rest(props, ["content", "onClickDiscard", "discardButtonText", "onClickCancel", "cancelButtonText", "onClickConfirm", "confirmButtonText"]);
-    const footer = (_jsxs("div", Object.assign({ className: 'display-flex justify-content-end btn-toolbar' }, { children: [_jsx("button", Object.assign({ type: 'button', className: 'DiscardButton btn btn-default', onClick: onClickDiscard }, { children: discardButtonText })), _jsx("button", Object.assign({ type: 'button', className: 'CancelButton btn btn-default', onClick: onClickCancel }, { children: cancelButtonText })), _jsx("button", Object.assign({ type: 'button', className: 'ConfirmationButton btn btn-primary', onClick: onClickConfirm }, { children: confirmButtonText }))] })));
-    return (_jsx(Dialog, Object.assign({}, remainingProps, { body: content, footer: footer, onHide: onClickCancel, className: 'save-dialog', disableEsc: true })));
+const SaveDialog = (props) => {
+    const { showCloseButton = true, content, discardButtonText, cancelButtonText, confirmButtonText, onClickDiscard = noop, onClickCancel = noop, onClickConfirm = noop } = props, remainingProps = __rest(props, ["showCloseButton", "content", "discardButtonText", "cancelButtonText", "confirmButtonText", "onClickDiscard", "onClickCancel", "onClickConfirm"]);
+    const footer = (_jsxs("div", Object.assign({ className: 'display-flex justify-content-end btn-toolbar' }, { children: [_jsx(Button, Object.assign({ className: 'DiscardButton', onClick: onClickDiscard }, { children: discardButtonText })), _jsx(Button, Object.assign({ className: 'CancelButton', onClick: onClickCancel }, { children: cancelButtonText })), _jsx(Button, Object.assign({ className: 'ConfirmationButton', bsStyle: 'primary', onClick: onClickConfirm }, { children: confirmButtonText }))] })));
+    return (_jsx(Dialog, Object.assign({}, remainingProps, { showCloseButton: showCloseButton, body: content, footer: footer, onClose: onClickCancel, className: 'save-dialog', disableEsc: true })));
 };
-SaveDialog.defaultProps = {
-    show: false,
-    showCloseButton: true,
-    onClickCancel: () => { },
-    onClickConfirm: () => { },
-    onClickDiscard: () => { },
-};
-SaveDialog.propTypes = Object.assign(Object.assign({}, baseDialogPropTypes), { content: PropTypes.node, onClickCancel: PropTypes.func.isRequired, onClickDiscard: PropTypes.func.isRequired, onClickConfirm: PropTypes.func.isRequired, discardButtonText: PropTypes.node.isRequired, cancelButtonText: PropTypes.node.isRequired, confirmButtonText: PropTypes.node.isRequired });
 export default SaveDialog;

package/components/dialog/SimpleDialog.d.ts

@@ -1,21 +1,10 @@
+import React from 'react';
+import { type BaseDialogProps } from './Dialog';
+export type SimpleDialogProps = BaseDialogProps & {
+    /**
+     * The content of the dialog body itself.
+     */
+    content: string | React.ReactNode;
+};
+declare const SimpleDialog: (props: SimpleDialogProps) => import("react/jsx-runtime").JSX.Element;
 export default SimpleDialog;
-declare function SimpleDialog(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace SimpleDialog {
-    namespace defaultProps {
-        const showCloseButton: boolean;
-    }
-    const propTypes: {
-        content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        show: PropTypes.Validator<boolean>;
-        title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        subtitle: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        iconNavigation: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        showCloseButton: PropTypes.Requireable<boolean>;
-        onClose: PropTypes.Requireable<(...args: any[]) => any>;
-        bsSize: PropTypes.Requireable<string>;
-        disableEsc: PropTypes.Requireable<boolean>;
-        useOverflow: PropTypes.Requireable<boolean>;
-        className: PropTypes.Requireable<string>;
-    };
-}
-import PropTypes from "prop-types";

package/components/dialog/SimpleDialog.js

@@ -1,18 +1,14 @@
+import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import PropTypes from 'prop-types';
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
 import Dialog from './Dialog';
-import baseDialogPropTypes from './baseDialogPropTypes';
 /*
  * Component to show a modal popup containing a title, a content and a close handler.
  */
-const SimpleDialog = props => {
-    const { content, onClose, className } = props;
+const SimpleDialog = (props) => {
+    const { content, showCloseButton = true, className } = props, remainingProps = __rest(props, ["content", "showCloseButton", "className"]);
     const dialogClassName = `${className ? className : ''} simple-dialog`;
-    return _jsx(Dialog, Object.assign({}, props, { body: content, onHide: onClose, className: dialogClassName }));
+    return _jsx(Dialog, Object.assign({}, remainingProps, { showCloseButton: showCloseButton, body: content, className: dialogClassName }));
 };
-SimpleDialog.defaultProps = {
-    showCloseButton: true,
-};
-SimpleDialog.propTypes = Object.assign(Object.assign({}, baseDialogPropTypes), { content: PropTypes.node });
 export default SimpleDialog;

package/components/dialog/SplitDialog.d.ts

@@ -1,32 +1,30 @@
+import React from 'react';
+import { type BaseDialogProps } from './Dialog';
+export type SplitDialogProps = BaseDialogProps & {
+    /**
+     * The content to be shown on the left side.
+     */
+    leftContent?: string | React.ReactNode;
+    /**
+     * Additional classes for the left content element.
+     */
+    leftContentClassName?: string;
+    /**
+     * The content to be shown on the right side.
+     */
+    rightContent?: string | React.ReactNode;
+    /**
+     * Additional classes for the right content element.
+     */
+    rightContentClassName?: string;
+    /**
+     * The dialog body content.
+     */
+    footer?: React.ReactNode;
+    /**
+     * Additional classes for the modal-footer element.
+     */
+    footerClassName?: string;
+};
+declare const SplitDialog: (props: SplitDialogProps) => import("react/jsx-runtime").JSX.Element;
 export default SplitDialog;
-declare function SplitDialog(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace SplitDialog {
-    namespace defaultProps {
-        const className: string;
-        const footer: string;
-        const useOverflow: boolean;
-        const showCloseButton: boolean;
-        const leftContentClassName: string;
-        const rightContentClassName: string;
-    }
-    const propTypes: {
-        leftContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        leftContentClassName: PropTypes.Requireable<string>;
-        rightContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        rightContentClassName: PropTypes.Requireable<string>;
-        bodyClassName: PropTypes.Requireable<string>;
-        footerClassName: PropTypes.Requireable<string>;
-        footer: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        show: PropTypes.Validator<boolean>;
-        title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        subtitle: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        iconNavigation: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        showCloseButton: PropTypes.Requireable<boolean>;
-        onClose: PropTypes.Requireable<(...args: any[]) => any>;
-        bsSize: PropTypes.Requireable<string>;
-        disableEsc: PropTypes.Requireable<boolean>;
-        useOverflow: PropTypes.Requireable<boolean>;
-        className: PropTypes.Requireable<string>;
-    };
-}
-import PropTypes from "prop-types";

package/components/dialog/SplitDialog.js

@@ -1,24 +1,14 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import PropTypes from 'prop-types';
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
 import classNames from 'classnames';
 import Dialog from './Dialog';
-import baseDialogPropTypes from './baseDialogPropTypes';
-const SplitDialog = props => {
-    const { leftContent, rightContent, onClose, leftContentClassName, rightContentClassName, className } = props, remainingProps = __rest(props, ["leftContent", "rightContent", "onClose", "leftContentClassName", "rightContentClassName", "className"]);
+const SplitDialog = (props) => {
+    const { leftContent, rightContent, leftContentClassName = '', rightContentClassName = '', className = '', useOverflow = true } = props, remainingProps = __rest(props, ["leftContent", "rightContent", "leftContentClassName", "rightContentClassName", "className", "useOverflow"]);
     const dialogClassName = `split-dialog ${className}`;
     const dividerClasses = classNames('split-divider', 'bg-lighter');
     const body = (_jsxs("div", Object.assign({ className: 'split-wrapper' }, { children: [_jsxs("div", Object.assign({ className: `split-left ${leftContentClassName}` }, { children: [leftContent, _jsx("div", { className: dividerClasses })] })), _jsx("div", Object.assign({ className: `split-right ${rightContentClassName}` }, { children: rightContent }))] })));
-    return _jsx(Dialog, Object.assign({}, remainingProps, { body: body, onHide: onClose, className: dialogClassName }));
+    return _jsx(Dialog, Object.assign({}, remainingProps, { body: body, className: dialogClassName, useOverflow: useOverflow }));
 };
-SplitDialog.defaultProps = {
-    className: '',
-    footer: '',
-    useOverflow: true,
-    showCloseButton: true,
-    leftContentClassName: '',
-    rightContentClassName: '',
-};
-SplitDialog.propTypes = Object.assign(Object.assign({}, baseDialogPropTypes), { leftContent: PropTypes.node, leftContentClassName: PropTypes.string, rightContent: PropTypes.node, rightContentClassName: PropTypes.string, bodyClassName: PropTypes.string, footerClassName: PropTypes.string, footer: PropTypes.node });
 export default SplitDialog;

package/components/dialog/dialogContext.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export type DialogContext = {
+    onClose: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    isSmallestDialog: boolean;
+    showXsDialogBorders: boolean;
+    showCloseButton: boolean;
+};
+export declare const dialogContext: React.Context<DialogContext>;
+export declare const DialogContextProvider: React.Provider<DialogContext>;
+export declare const useDialogContext: () => DialogContext;

package/components/dialog/dialogContext.js

@@ -0,0 +1,17 @@
+import { createContext, useContext } from 'react';
+import noop from 'lodash/fp/noop';
+const initialContext = {
+    onClose: noop,
+    isSmallestDialog: false,
+    showXsDialogBorders: false,
+    showCloseButton: true,
+};
+export const dialogContext = createContext(initialContext);
+export const DialogContextProvider = dialogContext.Provider;
+export const useDialogContext = () => {
+    const context = useContext(dialogContext);
+    if (!context) {
+        throw new Error('Dialog compound components cannot be rendered outside the Dialog component');
+    }
+    return context;
+};

package/components/divider/Divider.d.ts

@@ -0,0 +1,46 @@
+import { type PropsWithChildren } from 'react';
+export type DividerProps = {
+    /**
+     * The amount of space to either side
+     *
+     * @default 15
+     */
+    spacing?: number;
+    /**
+     * Defines the width of the divider line
+     *
+     * @default 1
+     */
+    dividerWidth?: 1 | 2 | 3;
+    /**
+     * Defines the color of the divider line
+     *
+     * @default 'light'
+     */
+    dividerColor?: 'darkest' | 'darker' | 'dark' | 'gray' | 'light' | 'lighter' | 'lightest';
+    /**
+     * Use the component as a spacer element without the divider line
+     *
+     * @default false
+     */
+    asSpacer?: boolean;
+    /**
+     * Set the orientation for the divider line to vertical.
+     * This may be useful for button toolbars or elements on a single row.
+     *
+     * @default false
+     */
+    vertical?: boolean;
+    /**
+     * Defines where the children are aligned on the divider line
+     *
+     * @default 'center'
+     */
+    titleAlignment?: 'left' | 'center' | 'right';
+    /**
+     * Additional classes added to the wrapping element.
+     */
+    className?: string;
+};
+declare const Divider: (props: PropsWithChildren<DividerProps>) => import("react/jsx-runtime").JSX.Element;
+export default Divider;

package/components/divider/Divider.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+import classNames from 'classnames';
+const Divider = (props) => {
+    const { spacing = 15, dividerWidth = 1, dividerColor = 'light', asSpacer = false, vertical = false, titleAlignment = 'center', className = '', children, } = props;
+    const classes = classNames('Divider', 'position-relative', !vertical && 'width-100pct', className);
+    const spacingValue = `${spacing}px`;
+    const wrapperStyle = {};
+    if (vertical) {
+        wrapperStyle.paddingLeft = spacingValue;
+        wrapperStyle.paddingRight = spacingValue;
+    }
+    if (!vertical) {
+        wrapperStyle.paddingTop = spacingValue;
+        wrapperStyle.paddingBottom = spacingValue;
+    }
+    const dividerLineClasses = classNames('divider-line', `bg-${dividerColor}`);
+    const isStringTitle = typeof children === 'string';
+    const line = (_jsx("div", { className: dividerLineClasses, style: {
+            width: vertical ? `${dividerWidth}px` : '100%',
+            height: vertical ? '100%' : `${dividerWidth}px`,
+        } }));
+    const titleLine = _jsx("div", Object.assign({ className: 'flex-1-0' }, { children: line }));
+    const title = _jsx("div", Object.assign({ className: isStringTitle ? 'padding-x-10' : '' }, { children: children }));
+    const dividerTitleClasses = classNames('divider-title', 'display-flex', 'align-items-center');
+    return (_jsxs("div", Object.assign({ className: classes, style: wrapperStyle }, { children: [!asSpacer && !children && line, children && (_jsxs("div", Object.assign({ className: dividerTitleClasses }, { children: [titleAlignment === 'left' && (_jsxs(_Fragment, { children: [title, titleLine] })), titleAlignment === 'center' && (_jsxs(_Fragment, { children: [titleLine, title, titleLine] })), titleAlignment === 'right' && (_jsxs(_Fragment, { children: [titleLine, title] }))] })))] })));
+};
+export default Divider;