@rio-cloud/rio-uikit 0.16.4-beta.18 → 0.16.4-beta.19

package/Carousel.d.ts

@@ -1,11 +1,2 @@
-declare module '@rio-cloud/rio-uikit/Carousel' {
-    import React from 'react';
-    import { CarouselProps, CarouselItemProps } from './types';
-
-    export default class Carousel extends React.Component<CarouselProps> {
-        static Item: React.ComponentClass<CarouselItemProps>;
-        static Caption: React.ComponentClass<any>;
-        static PREV = 'prev';
-        static NEXT = 'next';
-    }
-}
+export { default } from './components/carousel/Carousel';
+export * from './components/carousel/Carousel';

package/Carousel.js

@@ -1,2 +1,2 @@
-import { default as _Carousel } from './components/carousel/Carousel';
-export { _Carousel as default };
+export { default } from './components/carousel/Carousel';
+export * from './components/carousel/Carousel';

package/Dialog.d.ts

@@ -1,15 +1,2 @@
-declare module '@rio-cloud/rio-uikit/Dialog' {
-    import React from 'react';
-    import { DialogProps } from './types';
-
-    export default class Dialog extends React.Component<DialogProps> {
-        public static SIZE_FULL_SCREEN: 'fullscreen';
-        public static SIZE_FULL: 'full';
-        public static SIZE_FULL_WIDTH: 'fullwidth';
-        public static SIZE_FULL_HEIGHT: 'fullheight';
-        public static SIZE_XL: 'xl';
-        public static SIZE_LG: 'lg';
-        public static SIZE_MD: 'md';
-        public static SIZE_SM: 'sm';
-    }
-}
+export { default } from './components/dialog/Dialog';
+export * from './components/dialog/Dialog';

package/Dialog.js

@@ -1,2 +1,2 @@
-import { default as _Dialog } from './components/dialog/Dialog';
-export { _Dialog as default };
+export { default } from './components/dialog/Dialog';
+export * from './components/dialog/Dialog';

package/Fade.d.ts

@@ -1,14 +1,2 @@
-declare module '@rio-cloud/rio-uikit/Fade' {
-    import React from 'react';
-    import { FadeProps } from './types';
-    export default class Fade extends React.Component<FadeProps> {
-        static FADE = 'fade';
-        static FROM_LEFT = 'fromLeft';
-        static FROM_RIGHT = 'fromRight';
-        static FROM_TOP = 'fromTop';
-        static FROM_BOTTOM = 'fromBottom';
-        static TABS = 'tabs';
-        static PAGE = 'page';
-        static PAGE_BACK = 'pageBack';
-    }
-}
+export { default } from './components/fade/Fade';
+export * from './components/fade/Fade';

package/Fade.js

@@ -1,2 +1,2 @@
-import { default as _Fade } from './components/fade/Fade';
-export { _Fade as default };
+export { default } from './components/fade/Fade';
+export * from './components/fade/Fade';

package/InfoDialog.d.ts

@@ -1,5 +1,2 @@
-declare module '@rio-cloud/rio-uikit/InfoDialog' {
-    import React from 'react';
-    import { InfoDialogProps } from './types';
-    export default class InfoDialog extends React.Component<InfoDialogProps> {}
-}
+export { default } from './components/dialog/InfoDialog';
+export * from './components/dialog/InfoDialog';

package/InfoDialog.js

@@ -1,2 +1,2 @@
-import { default as _InfoDialog } from './components/dialog/InfoDialog';
-export { _InfoDialog as default };
+export { default } from './components/dialog/InfoDialog';
+export * from './components/dialog/InfoDialog';

package/MediaDialog.d.ts

@@ -1,9 +1,2 @@
-import React from 'react';
-import { MediaDialogProps } from './types';
-
-export { MediaDialogMedia } from './types';
-
-export default class MediaDialog extends React.Component<MediaDialogProps> {
-    static MEDIA_TYPE_IMAGE = 'image';
-    static MEDIA_TYPE_VIDEO = 'video';
-}
+export { default } from './components/dialog/MediaDialog';
+export * from './components/dialog/MediaDialog';

package/MediaDialog.js

@@ -1,2 +1,2 @@
-import { default as _MediaDialog } from './components/dialog/MediaDialog';
-export { _MediaDialog as default };
+export { default } from './components/dialog/MediaDialog';
+export * from './components/dialog/MediaDialog';

package/RadioButton.d.ts

@@ -1,5 +1,2 @@
-declare module '@rio-cloud/rio-uikit/RadioButton' {
-    import React from 'react';
-    import { RadioButtonProps } from './types';
-    export default class RadioButton extends React.Component<RadioButtonProps> {}
-}
+export { default } from './components/radiobutton/RadioButton';
+export * from './components/radiobutton/RadioButton';

package/RadioButton.js

@@ -1,2 +1,2 @@
-import { default as _RadioButton } from './components/radiobutton/RadioButton';
-export { _RadioButton as default };
+export { default } from './components/radiobutton/RadioButton';
+export * from './components/radiobutton/RadioButton';

package/ReleaseNotes.d.ts

@@ -1,2 +1,2 @@
-export { _ReleaseNotes as default };
-import { default as _ReleaseNotes } from "./components/releaseNotes/ReleaseNotes";
+export { default } from './components/releaseNotes/ReleaseNotes';
+export * from './components/releaseNotes/ReleaseNotes';

package/ReleaseNotes.js

@@ -1,2 +1,2 @@
-import { default as _ReleaseNotes } from './components/releaseNotes/ReleaseNotes';
-export { _ReleaseNotes as default };
+export { default } from './components/releaseNotes/ReleaseNotes';
+export * from './components/releaseNotes/ReleaseNotes';

package/ReleaseNotesDialog.d.ts

@@ -1,5 +1,2 @@
-declare module '@rio-cloud/rio-uikit/ReleaseNotesDialog' {
-    import React from 'react';
-    import { ReleaseNotesDialogProps } from './types';
-    export default class ReleaseNotesDialog extends React.Component<ReleaseNotesDialogProps> {}
-}
+export { default } from './components/dialog/ReleaseNotesDialog';
+export * from './components/dialog/ReleaseNotesDialog';

package/SaveDialog.d.ts

@@ -1,14 +1,2 @@
-declare module '@rio-cloud/rio-uikit/SaveDialog' {
-    import React from 'react';
-    import { SaveDialogProps } from './types';
-    export default class SaveDialog extends React.Component<SaveDialogProps> {
-        static SIZE_SM = 'sm';
-        static SIZE_MD = 'md';
-        static SIZE_LG = 'lg';
-        static SIZE_XL = 'xl';
-        static SIZE_FULL = 'full';
-        static SIZE_FULL_WIDTH: 'fullwidth';
-        static SIZE_FULL_HEIGHT: 'fullheight';
-        static SIZE_FULL_SCREEN = 'fullscreen';
-    }
-}
+export { default } from './components/dialog/SaveDialog';
+export * from './components/dialog/SaveDialog';

package/SaveDialog.js

@@ -1,2 +1,2 @@
-import { default as _SaveDialog } from './components/dialog/SaveDialog';
-export { _SaveDialog as default };
+export { default } from './components/dialog/SaveDialog';
+export * from './components/dialog/SaveDialog';

package/SimpleDialog.d.ts

@@ -1,14 +1,2 @@
-declare module '@rio-cloud/rio-uikit/SimpleDialog' {
-    import React from 'react';
-    import { SimpleDialogProps } from './types';
-    export default class SimpleDialog extends React.Component<SimpleDialogProps> {
-        static SIZE_SM = 'sm';
-        static SIZE_MD = 'md';
-        static SIZE_LG = 'lg';
-        static SIZE_XL = 'xl';
-        static SIZE_FULL = 'full';
-        static SIZE_FULL_WIDTH: 'fullwidth';
-        static SIZE_FULL_HEIGHT: 'fullheight';
-        static SIZE_FULL_SCREEN = 'fullscreen';
-    }
-}
+export { default } from './components/dialog/SimpleDialog';
+export * from './components/dialog/SimpleDialog';

package/SimpleDialog.js

@@ -1,2 +1,2 @@
-import { default as _SimpleDialog } from './components/dialog/SimpleDialog';
-export { _SimpleDialog as default };
+export { default } from './components/dialog/SimpleDialog';
+export * from './components/dialog/SimpleDialog';

package/SplitDialog.d.ts

@@ -1,14 +1,2 @@
-declare module '@rio-cloud/rio-uikit/SplitDialog' {
-    import React from 'react';
-    import { SplitDialogProps } from './types';
-    export default class SplitDialog extends React.Component<SplitDialogProps> {
-        static SIZE_SM = 'sm';
-        static SIZE_MD = 'md';
-        static SIZE_LG = 'lg';
-        static SIZE_XL = 'xl';
-        static SIZE_FULL = 'full';
-        static SIZE_FULL_WIDTH: 'fullwidth';
-        static SIZE_FULL_HEIGHT: 'fullheight';
-        static SIZE_FULL_SCREEN = 'fullscreen';
-    }
-}
+export { default } from './components/dialog/SplitDialog';
+export * from './components/dialog/SplitDialog';

package/SplitDialog.js

@@ -1,2 +1,2 @@
-import { default as _SplitDialog } from './components/dialog/SplitDialog';
-export { _SplitDialog as default };
+export { default } from './components/dialog/SplitDialog';
+export * from './components/dialog/SplitDialog';

package/components/assetTree/TreeSummary.js

@@ -9,7 +9,7 @@ const DefaultAssetCounts = ({ assetCounts }) => {
 };
 const TreeSummary = React.memo(props => {
     const { className, assetCounts, children } = props;
-    const classes = classNames('TreeSummary', 'display-flex', 'flex-wrap', 'align-items-center', 'column-gap-15', 'row-gap-5', className);
+    const classes = classNames('TreeSummary', 'display-flex', 'flex-wrap', 'align-items-center', 'column-gap-10', 'row-gap-5', className);
     return _jsx("div", Object.assign({ className: classes }, { children: children || _jsx(DefaultAssetCounts, { assetCounts: assetCounts }) }));
 });
 TreeSummary.displayName = 'TreeSummary';

package/components/assetTree/TypeCounter.js

@@ -5,13 +5,13 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 const TypeCounter = forwardRef((props, ref) => {
     const { icon, value, isActive, hasFilter, enableActivity, onClick, type, hideOnZero } = props, remainingProps = __rest(props, ["icon", "value", "isActive", "hasFilter", "enableActivity", "onClick", "type", "hideOnZero"]);
-    const wrapperClassName = classNames('TypeCounter', 'display-flex align-items-center', 'user-select-none', enableActivity ? 'cursor-pointer' : 'pointer-events-none', enableActivity && hasFilter && !isActive && 'opacity-50');
+    const wrapperClassName = classNames('TypeCounter', 'display-flex align-items-center', 'user-select-none', 'margin-right-2', enableActivity ? 'cursor-pointer' : 'pointer-events-none', enableActivity && hasFilter && !isActive && 'opacity-50');
     const counterClassNames = classNames('TreeLabelCount', 'label label-condensed', isActive ? 'label-primary' : 'label-muted label-filled');
     const handleClick = () => onClick(type);
     if (hideOnZero && !value) {
         return null;
     }
-    return (_jsxs("div", Object.assign({ ref: ref }, remainingProps, { className: wrapperClassName, onClick: handleClick }, { children: [_jsx("span", { className: `rioglyph rioglyph-${icon} text-size-16 margin-right-2 margin-left--4` }), _jsx("span", Object.assign({ className: counterClassNames }, { children: value || 0 }))] })));
+    return (_jsxs("div", Object.assign({ ref: ref }, remainingProps, { className: wrapperClassName, onClick: handleClick }, { children: [_jsx("span", { className: `rioglyph rioglyph-${icon} text-size-16 margin-right-2` }), _jsx("span", Object.assign({ className: counterClassNames }, { children: value || 0 }))] })));
 });
 TypeCounter.defaultProps = {
     hideOnZero: false,

package/components/button/Button.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren, type SyntheticEvent } from 'react';
+import { type PropsWithChildren, type SyntheticEvent, type RefAttributes, type ForwardRefExoticComponent } from 'react';
 import type { ObjectValues } from '../../utils/ObjectValues';
 declare const STYLES_MAP: {
     readonly DEFAULT: "default";
@@ -61,6 +61,11 @@ export type ButtonProps = {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Defines the type of the button. This may be used for form submit buttons.
+     * @default 'button'
+     */
+    type?: 'button' | 'submit';
     /**
      * Use when the content of the button is an icon only to adapt the button spacing accordingly.
      * @default false
@@ -105,23 +110,24 @@ export type ButtonProps = {
      */
     className?: string;
 } & (RegularButtonProps | ToggleButtonProps);
-declare const Button: {
-    (props: PropsWithChildren<ButtonProps>): import("react/jsx-runtime").JSX.Element;
-    DEFAULT: "default";
-    PRIMARY: "primary";
-    SECONDARY: "secondary";
-    INFO: "info";
-    WARNING: "warning";
-    DANGER: "danger";
-    SUCCESS: "success";
-    MUTED: "muted";
-    VARIANT_LINK: "link";
-    VARIANT_LINK_INLINE: "link-inline";
-    VARIANT_OUTLINE: "outline";
-    VARIANT_ACTION: "action";
-    XS: "xs";
-    SM: "sm";
-    MD: "md";
-    LG: "lg";
+type Props = PropsWithChildren<ButtonProps>;
+type ButtonType = ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>> & {
+    DEFAULT: 'default';
+    PRIMARY: 'primary';
+    SECONDARY: 'secondary';
+    INFO: 'info';
+    WARNING: 'warning';
+    DANGER: 'danger';
+    SUCCESS: 'success';
+    MUTED: 'muted';
+    VARIANT_LINK: 'link';
+    VARIANT_LINK_INLINE: 'link-inline';
+    VARIANT_OUTLINE: 'outline';
+    VARIANT_ACTION: 'action';
+    XS: 'xs';
+    SM: 'sm';
+    MD: 'md';
+    LG: 'lg';
 };
+declare const Button: ButtonType;
 export default Button;

package/components/button/Button.js

@@ -1,9 +1,10 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from 'react';
+import React, { useRef, useState, } from 'react';
 import classNames from 'classnames';
 import noop from 'lodash/fp/noop';
 import { createButtonRipple } from '../../utils/buttonEffect';
+import useMergeRefs from '../../hooks/useMergeRefs';
 const STYLES_MAP = {
     DEFAULT: 'default',
     PRIMARY: 'primary',
@@ -26,10 +27,11 @@ const SIZES_MAP = {
     MD: 'md',
     LG: 'lg',
 };
-const Button = (props) => {
-    const { active = false, disabled = false, asToggle = false, onClick = noop, bsStyle = 'default', bsSize, variant, iconOnly = false, iconName, multiline = false, block = false, className = '', noRippleEffect = false, children } = props, remainingProps = __rest(props, ["active", "disabled", "asToggle", "onClick", "bsStyle", "bsSize", "variant", "iconOnly", "iconName", "multiline", "block", "className", "noRippleEffect", "children"]);
+const Button = React.forwardRef((props, ref) => {
+    const { active = false, disabled = false, asToggle = false, onClick = noop, bsStyle = 'default', bsSize, variant, iconOnly = false, iconName, multiline = false, block = false, className = '', noRippleEffect = false, type = 'button', children } = props, remainingProps = __rest(props, ["active", "disabled", "asToggle", "onClick", "bsStyle", "bsSize", "variant", "iconOnly", "iconName", "multiline", "block", "className", "noRippleEffect", "type", "children"]);
     const [isToggled, setIsToggled] = useState(active);
     const btnRef = useRef(null);
+    const buttonRef = useMergeRefs(btnRef, ref);
     // Update internal toggle state when used as controlled component and outside toggle state changes
     const [previousActive, setPreviousActive] = useState(active);
     if (active !== previousActive) {
@@ -54,26 +56,10 @@ const Button = (props) => {
             onClick(event);
         }
     };
-    const buttonClassNames = classNames('btn', `btn-${bsStyle}`, variant === Button.VARIANT_LINK && 'btn-link', variant === Button.VARIANT_LINK_INLINE && 'btn-link btn-link-inline', variant === Button.VARIANT_OUTLINE && 'btn-outline', variant === Button.VARIANT_ACTION && 'btn-action', bsSize && `btn-${bsSize}`, asToggle && 'btn-toggle', isToggled && 'active', iconOnly && 'btn-icon-only', disabled && 'disabled', multiline && 'btn-multiline', block && 'btn-block', 'btn-component', className);
-    return (_jsxs("button", Object.assign({ ref: btnRef, type: 'button' }, remainingProps, { className: buttonClassNames, onClick: handleClick }, { children: [iconName && _jsx("span", { className: `rioglyph ${iconName}` }), children] })));
-};
-// Button styles
-Button.DEFAULT = STYLES_MAP.DEFAULT;
-Button.PRIMARY = STYLES_MAP.PRIMARY;
-Button.SECONDARY = STYLES_MAP.SECONDARY;
-Button.INFO = STYLES_MAP.INFO;
-Button.WARNING = STYLES_MAP.WARNING;
-Button.DANGER = STYLES_MAP.DANGER;
-Button.SUCCESS = STYLES_MAP.SUCCESS;
-Button.MUTED = STYLES_MAP.MUTED;
-// Button Type
-Button.VARIANT_LINK = VARIANTS_MAP.VARIANT_LINK;
-Button.VARIANT_LINK_INLINE = VARIANTS_MAP.VARIANT_LINK_INLINE;
-Button.VARIANT_OUTLINE = VARIANTS_MAP.VARIANT_OUTLINE;
-Button.VARIANT_ACTION = VARIANTS_MAP.VARIANT_ACTION;
-// Button Size
-Button.XS = SIZES_MAP.XS;
-Button.SM = SIZES_MAP.SM;
-Button.MD = SIZES_MAP.MD;
-Button.LG = SIZES_MAP.LG;
+    const buttonClassNames = classNames('btn', `btn-${bsStyle}`, variant === VARIANTS_MAP.VARIANT_LINK && 'btn-link', variant === VARIANTS_MAP.VARIANT_LINK_INLINE && 'btn-link btn-link-inline', variant === VARIANTS_MAP.VARIANT_OUTLINE && 'btn-outline', variant === VARIANTS_MAP.VARIANT_ACTION && 'btn-action', bsSize && `btn-${bsSize}`, asToggle && 'btn-toggle', isToggled && 'active', iconOnly && 'btn-icon-only', disabled && 'disabled', multiline && 'btn-multiline', block && 'btn-block', 'btn-component', className);
+    return (_jsxs("button", Object.assign({ ref: buttonRef, type: type }, remainingProps, { className: buttonClassNames, onClick: handleClick }, { children: [iconName && _jsx("span", { className: `rioglyph ${iconName}` }), children] })));
+});
+Object.assign(Button, STYLES_MAP);
+Object.assign(Button, VARIANTS_MAP);
+Object.assign(Button, SIZES_MAP);
 export default Button;

package/components/carousel/Carousel.d.ts

@@ -1,2 +1,8 @@
-export { _Carousel as default };
-import { default as _Carousel } from "react-bootstrap/Carousel";
+declare const Carousel: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", import("react-bootstrap/Carousel").CarouselProps> & {
+    Caption: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", unknown>;
+    Item: import("react-bootstrap/esm/CarouselItem").default;
+} & {
+    PREV: 'prev';
+    NEXT: 'next';
+};
+export default Carousel;

package/components/carousel/Carousel.js

@@ -1,9 +1,5 @@
-import React from 'react';
-// import { default as BSCarousel } from 'react-bootstrap/Carousel';
-// import { default as _Carousel } from 'react-bootstrap/Carousel';
-// const Carousel = props => {
-//     return <_Carousel {...props} />;
-// };
-// export default Carousel;
-import { default as _Carousel } from 'react-bootstrap/Carousel';
-export { _Carousel as default };
+import OriginalCarousel from 'react-bootstrap/Carousel';
+const Carousel = OriginalCarousel;
+Carousel.PREV = 'prev';
+Carousel.NEXT = 'next';
+export default Carousel;

package/components/dialog/ConfirmationDialog.d.ts

@@ -1,25 +1,12 @@
+import React from 'react';
+import { type BaseDialogProps } from './Dialog';
+export type ConfirmationDialogProps = BaseDialogProps & {
+    content?: string | React.ReactNode;
+    onClickConfirm?: VoidFunction;
+    onClickCancel?: VoidFunction;
+    cancelButtonText?: string | React.ReactNode;
+    confirmButtonText?: string | React.ReactNode;
+    disableConfirm?: boolean;
+};
+declare const ConfirmationDialog: (props: ConfirmationDialogProps) => import("react/jsx-runtime").JSX.Element;
 export default ConfirmationDialog;
-declare function ConfirmationDialog(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace ConfirmationDialog {
-    namespace defaultProps {
-        const show: boolean;
-        function onClickCancel(): void;
-        function onClickConfirm(): void;
-    }
-    namespace propTypes {
-        const show_1: PropTypes.Validator<boolean>;
-        export { show_1 as show };
-        export const title: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-        export const subtitle: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        export const content: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-        const onClickCancel_1: PropTypes.Validator<(...args: any[]) => any>;
-        export { onClickCancel_1 as onClickCancel };
-        const onClickConfirm_1: PropTypes.Validator<(...args: any[]) => any>;
-        export { onClickConfirm_1 as onClickConfirm };
-        export const cancelButtonText: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-        export const confirmButtonText: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-        export const disableConfirm: PropTypes.Requireable<boolean>;
-        export const bsSize: PropTypes.Requireable<string>;
-    }
-}
-import PropTypes from "prop-types";

package/components/dialog/ConfirmationDialog.js

@@ -1,31 +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';
-/*
- * Confirmation dialog component to confirm or cancel an action
- */
-const ConfirmationDialog = props => {
-    const { content, onClickCancel, cancelButtonText, onClickConfirm, confirmButtonText, disableConfirm } = props, remainingProps = __rest(props, ["content", "onClickCancel", "cancelButtonText", "onClickConfirm", "confirmButtonText", "disableConfirm"]);
-    const footer = (_jsxs("div", Object.assign({ className: 'display-flex justify-content-end btn-toolbar' }, { children: [_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, disabled: disableConfirm }, { children: confirmButtonText }))] })));
-    return (_jsx(Dialog, Object.assign({}, remainingProps, { body: content, footer: footer, onHide: onClickCancel, showCloseButton: false, className: 'confirmation-dialog', disableEsc: true })));
-};
-ConfirmationDialog.defaultProps = {
-    show: false,
-    onClickCancel: () => { },
-    onClickConfirm: () => { },
-};
-ConfirmationDialog.propTypes = {
-    show: PropTypes.bool.isRequired,
-    title: PropTypes.node.isRequired,
-    subtitle: PropTypes.node,
-    content: PropTypes.node.isRequired,
-    onClickCancel: PropTypes.func.isRequired,
-    onClickConfirm: PropTypes.func.isRequired,
-    cancelButtonText: PropTypes.node.isRequired,
-    confirmButtonText: PropTypes.node.isRequired,
-    disableConfirm: PropTypes.bool,
-    bsSize: PropTypes.string,
+const ConfirmationDialog = (props) => {
+    const { content, onClickCancel = noop, cancelButtonText, onClickConfirm = noop, confirmButtonText, disableConfirm } = props, remainingProps = __rest(props, ["content", "onClickCancel", "cancelButtonText", "onClickConfirm", "confirmButtonText", "disableConfirm"]);
+    const footer = (_jsxs("div", Object.assign({ className: 'display-flex justify-content-end btn-toolbar' }, { children: [_jsx(Button, Object.assign({ className: 'CancelButton', onClick: onClickCancel }, { children: cancelButtonText })), _jsx(Button, Object.assign({ bsStyle: 'primary', className: 'ConfirmationButton', onClick: onClickConfirm, disabled: disableConfirm }, { children: confirmButtonText }))] })));
+    return (_jsx(Dialog, Object.assign({}, remainingProps, { body: content, footer: footer, onClose: onClickCancel, showCloseButton: false, className: 'confirmation-dialog', disableEsc: true })));
 };
 export default ConfirmationDialog;

package/components/dialog/Dialog.d.ts

@@ -1,43 +1,103 @@
+import React from 'react';
+export type bsSizeDialog = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'fullwidth' | 'fullheight' | 'fullscreen';
+export type BaseDialogProps = {
+    /**
+     * Opens the dialog when set to `true`.
+     * @default false
+     */
+    show: boolean;
+    /**
+     * The dialog title (can also be a FormattedMessage component).
+     */
+    title?: React.ReactNode;
+    /**
+     * The dialog header subtitle content.
+     */
+    subtitle?: React.ReactNode;
+    /**
+     * Shows a close button when set to `true`.
+     * @default true
+     */
+    showCloseButton?: boolean;
+    /**
+     * A callback function invoked when the dialog closes.
+     */
+    onClose?: Function;
+    /**
+     * Defined how large the dialog will be rendered.
+     * By default, the dialog has a medium size and thus it can be omitted.
+     *
+     * Possible values are: `xs`, `sm`, `lg` `xl` `fullwidth` `fullheight` `fullscreen`
+     * @default 'md'
+     */
+    bsSize?: bsSizeDialog;
+    /**
+     * Enables or disabled closing the dialog via esc key.
+     * @default false
+     */
+    disableEsc?: boolean;
+    /**
+     * Enables the modal body to overflow and use inline scrolling if needed.
+     * @default false
+     */
+    useOverflow?: boolean;
+    /**
+     * Show Header and Footer Borders for the "xs" dialog
+     * @default false
+     */
+    showXsDialogBorders?: boolean;
+    /**
+     * Additional classes for the modal element.
+     */
+    className?: string;
+};
+export type DialogProps = BaseDialogProps & {
+    /**
+     * The dialog body content.
+     */
+    body: React.ReactNode;
+    /**
+     * The dialog body content.
+     */
+    footer?: React.ReactNode;
+    /**
+     * Additional classes for the modal-body element.
+     */
+    bodyClassName?: string;
+    /**
+     * Additional classes for the modal-footer element.
+     */
+    footerClassName?: string;
+    /**
+     * Allows to add additional buttons to the dialog header.
+     */
+    headerButtons?: React.ReactNode;
+    /**
+     * Deprecate to align with other dialog callbacks.
+     * @deprecated please use `onClose`
+     */
+    onHide?: VoidFunction;
+    /**
+     * A callback fired when esc key is pressed and the dialog is about to close.
+     */
+    onEsc?: VoidFunction;
+    /**
+     * A callback function to be executed before closing the dialog. If the function returns
+     * `false` the dialog will not be closed
+     * @returns
+     */
+    onCloseValidation?: () => boolean;
+};
+declare const Dialog: {
+    (props: DialogProps): React.ReactPortal;
+    SIZE_XS: "xs";
+    SIZE_SM: "sm";
+    SIZE_MD: "md";
+    SIZE_LG: "lg";
+    SIZE_XL: "xl";
+    SIZE_FULL: "full";
+    SIZE_FULL_WIDTH: "fullwidth";
+    SIZE_FULL_HEIGHT: "fullheight";
+    SIZE_FULL_SCREEN: "fullscreen";
+};
 export default Dialog;
-declare function Dialog(props: any): React.ReactPortal;
-declare namespace Dialog {
-    const SIZE_SM: string;
-    const SIZE_MD: string;
-    const SIZE_LG: string;
-    const SIZE_XL: string;
-    const SIZE_FULL: string;
-    const SIZE_FULL_WIDTH: string;
-    const SIZE_FULL_HEIGHT: string;
-    const SIZE_FULL_SCREEN: string;
-    namespace defaultProps {
-        const show: boolean;
-        function onHide(): void;
-        function onEsc(): void;
-        const className: string;
-        const showCloseButton: boolean;
-        const disableEsc: boolean;
-        const useOverflow: boolean;
-        function onCloseValidation(): boolean;
-    }
-    const propTypes: {
-        body: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        footer: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        headerButtons: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        className: PropTypes.Requireable<string>;
-        bodyClassName: PropTypes.Requireable<string>;
-        footerClassName: PropTypes.Requireable<string>;
-        onHide: PropTypes.Requireable<(...args: any[]) => any>;
-        onEsc: PropTypes.Requireable<(...args: any[]) => any>;
-        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>;
-    };
-}
-import React from "react";
-import PropTypes from "prop-types";