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

package/lib/es/components/collapse/Collapse.js

@@ -2,150 +2,27 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
-const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
-const css_1 = tslib_1.__importDefault(require("dom-helpers/css"));
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const Transition_1 = tslib_1.__importStar(require("react-transition-group/Transition"));
-const collapseStyles = {
-    [Transition_1.EXITED]: 'collapse',
-    [Transition_1.EXITING]: 'collapsing',
-    [Transition_1.ENTERING]: 'collapsing',
-    [Transition_1.ENTERED]: 'collapse in',
-};
-const MARGINS = {
-    height: ['marginTop', 'marginBottom'],
-};
-const INITIAL_HEIGHT = '0';
-class Collapse extends react_1.default.Component {
-    constructor(props) {
-        super(props);
-        this.state = {};
-        this.handleEnter = this.handleEnter.bind(this);
-        this.handleEntering = this.handleEntering.bind(this);
-        this.handleEntered = this.handleEntered.bind(this);
-        this.handleExit = this.handleExit.bind(this);
-        this.handleExiting = this.handleExiting.bind(this);
-        this.handleExited = this.handleExited.bind(this);
-    }
-    componentDidMount() {
-        if (!this.props.in) {
-            // When the component is collapsed on mount, set initial height to 0
-            this.setState(() => ({
-                transitionState: Transition_1.EXITED,
-                height: INITIAL_HEIGHT,
-            }));
-        }
-        else {
-            // When the component is expanded on mount, set initial height to 'auto'
-            this.setState(() => ({
-                transitionState: Transition_1.ENTERED,
-                height: 'auto',
-            }));
-        }
-    }
-    // eslint-disable-next-line camelcase
-    UNSAFE_componentWillReceiveProps(nextProps) {
-        // As the height is set to "auto" in the final opening step, we need to
-        // set the height before we start the closing animation as "height: auto" cannot be animated
-        if (this.props.in && !nextProps.in) {
-            this.setState({
-                height: this.getFullHeight(react_dom_1.default.findDOMNode(this)),
-            });
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
+const framer_motion_1 = require("framer-motion");
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const DEFAULT_ANIMATION_TIME_IN_MS = 270;
+const Collapse = (props) => {
+    const { open = false, unmountOnExit = false, appear = false, timeout = DEFAULT_ANIMATION_TIME_IN_MS, onEntered = noop_1.default, onExited = noop_1.default, onAnimationStart = noop_1.default, children, } = props;
+    const shouldKeepContentInDom = !unmountOnExit;
+    const handleAnimationStart = () => onAnimationStart();
+    const handleAnimationComplete = (definition) => {
+        if (definition === 'open') {
+            onEntered();
         }
-    }
-    getFullHeight(element) {
-        const value = element.offsetHeight;
-        const margins = MARGINS['height'];
-        if (!value) {
-            return INITIAL_HEIGHT;
+        if (definition === 'collapsed') {
+            onExited();
         }
-        const fullHeight = value + parseInt((0, css_1.default)(element, margins[0]), 10) + parseInt((0, css_1.default)(element, margins[1]), 10);
-        return fullHeight;
-    }
-    /* -- Expanding -- */
-    handleEnter() {
-        this.setState(() => ({
-            transitionState: Transition_1.ENTERED,
-            height: INITIAL_HEIGHT,
-        }), this.props.onEnter());
-    }
-    handleEntering(element) {
-        this.setState(() => ({
-            transitionState: Transition_1.ENTERING,
-            height: element.scrollHeight,
-        }), this.props.onEntering());
-    }
-    handleEntered() {
-        this.setState(() => ({
-            transitionState: Transition_1.ENTERED,
-            height: 'auto',
-        }), this.props.onEntered());
-    }
-    /* -- Collapsing -- */
-    handleExit(element) {
-        this.setState(() => ({
-            transitionState: Transition_1.EXITING,
-            height: this.getFullHeight(element),
-        }), this.props.onExit());
-    }
-    handleExiting() {
-        this.setState(() => ({
-            transitionState: Transition_1.EXITING,
-            height: INITIAL_HEIGHT,
-        }), this.props.onExiting());
-    }
-    handleExited() {
-        this.setState(() => ({
-            transitionState: Transition_1.EXITED,
-            height: INITIAL_HEIGHT,
-        }), this.props.onExited());
-    }
-    render() {
-        const _a = this.props, { children } = _a, props = tslib_1.__rest(_a, ["children"]);
-        return ((0, jsx_runtime_1.jsx)(Transition_1.default, Object.assign({ ref: node => (this.refTransition = node) }, props, { onEnter: this.handleEnter, onEntering: this.handleEntering, onEntered: this.handleEntered, onExit: this.handleExit, onExiting: this.handleExiting, onExited: this.handleExited }, { children: react_1.default.cloneElement(children, {
-                style: { height: this.state.height },
-                className: (0, classnames_1.default)(children.props.className, collapseStyles[this.state.transitionState]),
-            }) })));
-    }
-}
-exports.default = Collapse;
-Collapse.defaultProps = {
-    in: false,
-    timeout: 300,
-    mountOnEnter: false,
-    unmountOnExit: false,
-    appear: false,
-    onEnter: () => { },
-    onEntering: () => { },
-    onEntered: () => { },
-    onExit: () => { },
-    onExiting: () => { },
-    onExited: () => { },
-};
-Collapse.propTypes = {
-    // Show the component; triggers the expand or collapse animation
-    in: prop_types_1.default.bool.isRequired,
-    // Wait until the first "enter" transition to mount the component (add it to the DOM)
-    mountOnEnter: prop_types_1.default.bool,
-    // Unmount the component (remove it from the DOM) when it is collapsed
-    unmountOnExit: prop_types_1.default.bool,
-    // Run the expand animation when the component mounts, if it is initially shown
-    appear: prop_types_1.default.bool,
-    // Duration of the collapse animation in milliseconds, to ensure that finishing callbacks
-    // are fired even if the original browser transition end events are canceled
-    timeout: prop_types_1.default.number,
-    // Callback fired before the component expands
-    onEnter: prop_types_1.default.func,
-    // Callback fired after the component starts to expand
-    onEntering: prop_types_1.default.func,
-    // Callback fired after the component has expanded
-    onEntered: prop_types_1.default.func,
-    // Callback fired before the component collapses
-    onExit: prop_types_1.default.func,
-    // Callback fired after the component starts to collapse
-    onExiting: prop_types_1.default.func,
-    // Callback fired after the component has collapsed
-    onExited: prop_types_1.default.func,
+    };
+    const variants = {
+        open: { opacity: 1, height: 'auto' },
+        collapsed: { opacity: 0, height: 0 },
+    };
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, Object.assign({ initial: appear, exitBeforeEnter: true }, { children: (open || shouldKeepContentInDom) && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ initial: 'collapsed', animate: open ? 'open' : 'collapsed', exit: 'collapsed', className: 'collapse display-block width-100pct', variants: variants, transition: { duration: timeout / 1000, ease: [0.04, 0.62, 0.23, 0.98] }, onAnimationComplete: handleAnimationComplete, onAnimationStart: handleAnimationStart }, { children: children }), 'content')) })) }));
 };
+exports.default = Collapse;

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

@@ -7,6 +7,7 @@ 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 useDarkMode_1 = tslib_1.__importDefault(require("../../hooks/useDarkMode"));
 const RECT = 'rect';
 const CIRCLE = 'circle';
 const DEFAULT_SPEED = 2;
@@ -30,6 +31,7 @@ const renderCircle = ({ radius }) => (0, jsx_runtime_1.jsx)("circle", { cx: radi
  */
 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"]);
+    const isDarkMode = (0, useDarkMode_1.default)();
     // 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.
@@ -45,7 +47,7 @@ const ContentLoader = (props) => {
     ])(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 })));
+    return ((0, jsx_runtime_1.jsx)(react_content_loader_1.default, Object.assign({ backgroundColor: '#f5f6f7', foregroundColor: isDarkMode ? '#aaaaaa' : '#eeeeee', speed: speed, height: wrapperHeight, width: wrapperWidth, className: `ContentLoader ${className} ${isDarkMode ? 'use-mix-blend-mode' : ''}` }, remainingProps, { children: content })));
 };
 ContentLoader.RECT = RECT;
 ContentLoader.CIRCLE = CIRCLE;

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

@@ -1,3 +1,172 @@
+import React from 'react';
+import type { Moment } from 'moment';
+import Datetime, { type DatetimepickerProps } from 'react-datetime';
+export type DatePickerProps = Omit<DatetimepickerProps, 'onChange' | 'initialValue'> & {
+    /**
+     * An id used for the internal input element.
+     */
+    id?: string;
+    /**
+     * The moment locale to be used for the date picker.
+     * Make sure to import the respective moment locale files.
+     *
+     * @default 'en-GB'
+     * @example import 'moment/dist/locale/de';
+     */
+    locale?: string;
+    /**
+     * Once the day has been selected, the date picker will be closed automatically.
+     *
+     * @default true
+     */
+    closeOnSelect?: boolean;
+    /**
+     * Default value of the DatePicker (date or moment).
+     */
+    initialValue?: Date | Moment;
+    /**
+     * Value of the DatePicker (date or moment). Use this only if you want to use
+     * this component as a controlled component
+     */
+    value?: Date | string | Moment;
+    dateFormat?: boolean | string;
+    timeFormat?: boolean | string;
+    inputProps?: React.HTMLProps<HTMLInputElement>;
+    /**
+     * Defines whether the dropdown opens upwards or not.
+     *
+     * @default false
+     */
+    dropup?: boolean;
+    /**
+     * Opens the picker right aligned.
+     *
+     * @default false
+     */
+    alignRight?: boolean;
+    /**
+     * Defines whether the clearableInput button is shown.
+     *
+     * @default false
+     */
+    clearableInput?: boolean;
+    /**
+     * Optional min-width value (without px). Since the DatePicker has a max-width of 100%
+     * you can also set a high minWidth number to use 100% with of the parent element.
+     * A value of "0" means no extra width is set and it becomes 100% width of the parent.
+     *
+     * @default 0
+     */
+    minWidth?: number;
+    /**
+     * Callback function when the value changes. Receives the new date (moment)
+     * and a boolean (whether date is valid or not) as arguments.
+     *
+     * @param value
+     * @param isValid
+     * @returns
+     */
+    onChange?: (value: Moment | string, isValid: boolean) => void;
+    /**
+     * Defines whether the input shows an error when the date is invalid or cleared.
+     *
+     * @default true
+     */
+    mandatory?: boolean;
+    /**
+     * Overwrites the internal date validation function in case you need to customize it.
+     *
+     * @param date
+     * @returns
+     */
+    dateValidation?: (date: Moment | string) => boolean;
+    /**
+     * Additional classes to be set on the DatePicker element.
+     */
+    className?: string;
+};
+declare const DatePicker: React.ForwardRefExoticComponent<Omit<Datetime.DatetimepickerProps, "onChange" | "initialValue"> & {
+    /**
+     * An id used for the internal input element.
+     */
+    id?: string | undefined;
+    /**
+     * The moment locale to be used for the date picker.
+     * Make sure to import the respective moment locale files.
+     *
+     * @default 'en-GB'
+     * @example import 'moment/dist/locale/de';
+     */
+    locale?: string | undefined;
+    /**
+     * Once the day has been selected, the date picker will be closed automatically.
+     *
+     * @default true
+     */
+    closeOnSelect?: boolean | undefined;
+    /**
+     * Default value of the DatePicker (date or moment).
+     */
+    initialValue?: Date | Moment | undefined;
+    /**
+     * Value of the DatePicker (date or moment). Use this only if you want to use
+     * this component as a controlled component
+     */
+    value?: string | Date | Moment | undefined;
+    dateFormat?: string | boolean | undefined;
+    timeFormat?: string | boolean | undefined;
+    inputProps?: React.HTMLProps<HTMLInputElement> | undefined;
+    /**
+     * Defines whether the dropdown opens upwards or not.
+     *
+     * @default false
+     */
+    dropup?: boolean | undefined;
+    /**
+     * Opens the picker right aligned.
+     *
+     * @default false
+     */
+    alignRight?: boolean | undefined;
+    /**
+     * Defines whether the clearableInput button is shown.
+     *
+     * @default false
+     */
+    clearableInput?: boolean | undefined;
+    /**
+     * Optional min-width value (without px). Since the DatePicker has a max-width of 100%
+     * you can also set a high minWidth number to use 100% with of the parent element.
+     * A value of "0" means no extra width is set and it becomes 100% width of the parent.
+     *
+     * @default 0
+     */
+    minWidth?: number | undefined;
+    /**
+     * Callback function when the value changes. Receives the new date (moment)
+     * and a boolean (whether date is valid or not) as arguments.
+     *
+     * @param value
+     * @param isValid
+     * @returns
+     */
+    onChange?: ((value: Moment | string, isValid: boolean) => void) | undefined;
+    /**
+     * Defines whether the input shows an error when the date is invalid or cleared.
+     *
+     * @default true
+     */
+    mandatory?: boolean | undefined;
+    /**
+     * Overwrites the internal date validation function in case you need to customize it.
+     *
+     * @param date
+     * @returns
+     */
+    dateValidation?: ((date: Moment | string) => boolean) | undefined;
+    /**
+     * Additional classes to be set on the DatePicker element.
+     */
+    className?: string | undefined;
+} & React.RefAttributes<unknown>>;
 export default DatePicker;
-declare const DatePicker: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from "react";

package/lib/es/components/datepicker/DatePicker.js

@@ -2,49 +2,38 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importStar(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-// This workaround fixes the react minified #130 error for using external commonjs libs
-// see https://github.com/vitejs/vite/issues/2139
 const react_datetime_1 = tslib_1.__importDefault(require("react-datetime"));
-const Datetime = react_datetime_1.default.default ? react_datetime_1.default.default : react_datetime_1.default;
-const isValidDate = date => typeof date === 'object';
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const DEFAULT_LOCALE = 'en-GB';
+const DEFAULT_MIN_WIDTH = 0;
 const DatePicker = (0, react_1.forwardRef)((props, ref) => {
-    const { dropup, alignRight, onChange, className, mandatory, dateValidation } = props, remainingProp = tslib_1.__rest(props, ["dropup", "alignRight", "onChange", "className", "mandatory", "dateValidation"]);
+    const { id, dropup = false, alignRight = false, locale = DEFAULT_LOCALE, minWidth = DEFAULT_MIN_WIDTH, onChange = noop_1.default, mandatory = true, dateValidation, clearableInput = false, closeOnSelect = true, inputProps, className } = props, remainingProp = tslib_1.__rest(props, ["id", "dropup", "alignRight", "locale", "minWidth", "onChange", "mandatory", "dateValidation", "clearableInput", "closeOnSelect", "inputProps", "className"]);
     const [hasError, setHasError] = (0, react_1.useState)(false);
-    const validateDate = dateToValidate => {
-        return dateValidation ? dateValidation(dateToValidate) : isValidDate(dateToValidate);
+    const validateDate = (dateToValidate) => {
+        // If the entered date complies with the defined dateFormat, the Datetime component
+        // returns a moment object, otherwise the return value is a string.
+        // Note, using a isValid() function from moment or the Date object itself will result in
+        // different outcome in various browsers.
+        // For instance `new Date('1')` or `moment('1')` are valid dates in Chrome where it defaults
+        // to "01/01/2001" whereas in Firefox it is an invalid date.
+        // The solution is to compare the entered value to the date format which is done by React Datetime.
+        const isDateObject = typeof dateToValidate === 'object';
+        return dateValidation ? dateValidation(dateToValidate) : isDateObject;
     };
-    const handleChange = date => {
+    const handleChange = (date) => {
         const isValid = mandatory ? validateDate(date) : true;
         setHasError(!isValid);
         onChange(date, isValid);
     };
     const classes = (0, classnames_1.default)('DatePicker', 'form-group', hasError && 'has-error', dropup && 'dropup', alignRight && 'align-right', className && className);
+    // This way we can expose the "id" as top level prop and not as part of the inputProps which
+    // makes the use of the id much more convenient
+    const enhancedInputProps = Object.assign({ id }, inputProps);
+    return ((0, jsx_runtime_1.jsx)(react_datetime_1.default
     // TODO: add support for setting ref to the input. Maybe add a "inputRef" prop to react-datetime
-    return (0, jsx_runtime_1.jsx)(Datetime, Object.assign({ ref: ref }, remainingProp, { onChange: handleChange, className: classes }));
+    // ref={ref}
+    , Object.assign({}, remainingProp, { locale: locale, clearableInput: clearableInput, closeOnSelect: closeOnSelect, onChange: handleChange, minWidth: minWidth, inputProps: enhancedInputProps, className: classes })));
 });
-DatePicker.defaultProps = {
-    closeOnSelect: true,
-    dropup: false,
-    locale: 'en-GB',
-    onChange: () => { },
-    clearableInput: false,
-    minWidth: 0,
-    mandatory: true,
-};
-DatePicker.propTypes = {
-    className: prop_types_1.default.string,
-    closeOnSelect: prop_types_1.default.bool,
-    clearableInput: prop_types_1.default.bool,
-    initialValue: prop_types_1.default.object,
-    locale: prop_types_1.default.string,
-    onChange: prop_types_1.default.func,
-    dropup: prop_types_1.default.bool,
-    minWidth: prop_types_1.default.number,
-    alignRight: prop_types_1.default.bool,
-    mandatory: prop_types_1.default.bool,
-    dateValidation: prop_types_1.default.func,
-};
 exports.default = DatePicker;

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

@@ -1,6 +1,11 @@
 declare const _default: any;
 export default _default;
 export { DateRangePicker as DateRangePickerPure };
+/**
+ * Wrapper component for React-Datetime.
+ *
+ * @deprecated This will be removed from the UIKIT at some time.
+ */
 declare class DateRangePicker extends React.Component<any, any, any> {
     constructor(props: any);
     state: {

package/lib/es/components/datepicker/DateRangePicker.js

@@ -3,24 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DateRangePickerPure = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-/**
- * @fileOverview: Wrapper component for React-Datetime.
- */
 const react_1 = tslib_1.__importStar(require("react"));
 const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
 const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
-const DatePicker_1 = tslib_1.__importDefault(require("./DatePicker"));
 const react_onclickoutside_1 = tslib_1.__importDefault(require("react-onclickoutside"));
 const moment_1 = tslib_1.__importDefault(require("moment"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const isNil_1 = tslib_1.__importDefault(require("lodash/fp/isNil"));
 const isNull_1 = tslib_1.__importDefault(require("lodash/fp/isNull"));
 const isEqual_1 = tslib_1.__importDefault(require("lodash/fp/isEqual"));
+const DatePicker_1 = tslib_1.__importDefault(require("./DatePicker"));
 const getDropDirection_1 = tslib_1.__importDefault(require("../../utils/getDropDirection"));
 const Placeholder = ({ text }) => (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'placeholder' }, { children: text }));
-/**
- * The DateRangePicker
- */
 const propTypes = {
     startValue: prop_types_1.default.object,
     endValue: prop_types_1.default.object,
@@ -105,6 +99,11 @@ const defaultProps = {
 const LOCAL_DATE_FORMAT = 'dd L LT';
 const LOCAL_DATE_FORMAT_NO_TIME = 'dd L';
 const DROPDOWN_WIDTH = 600;
+/**
+ * Wrapper component for React-Datetime.
+ *
+ * @deprecated This will be removed from the UIKIT at some time.
+ */
 class DateRangePicker extends react_1.Component {
     constructor(props) {
         super(props);
@@ -229,8 +228,8 @@ class DateRangePicker extends react_1.Component {
             isEndValid: true,
             startValueText: null,
             endValueText: null,
-            pullRight: pullRight,
-            dropup: dropup,
+            pullRight,
+            dropup,
         });
         onClear();
     }
@@ -433,4 +432,9 @@ class DateRangePicker extends react_1.Component {
 exports.DateRangePickerPure = DateRangePicker;
 DateRangePicker.propTypes = propTypes;
 DateRangePicker.defaultProps = defaultProps;
+/**
+ * Wrapper component for React-Datetime.
+ *
+ * @deprecated This will be removed from the UIKIT at some time.
+ */
 exports.default = (0, react_onclickoutside_1.default)(DateRangePicker);

package/lib/es/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/lib/es/components/dialog/ConfirmationDialog.js

@@ -2,32 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const Button_1 = tslib_1.__importDefault(require("../button/Button"));
 const Dialog_1 = tslib_1.__importDefault(require("./Dialog"));
-/*
- * Confirmation dialog component to confirm or cancel an action
- */
-const ConfirmationDialog = props => {
-    const { content, onClickCancel, cancelButtonText, onClickConfirm, confirmButtonText, disableConfirm } = props, remainingProps = tslib_1.__rest(props, ["content", "onClickCancel", "cancelButtonText", "onClickConfirm", "confirmButtonText", "disableConfirm"]);
-    const footer = ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex justify-content-end btn-toolbar' }, { children: [(0, jsx_runtime_1.jsx)("button", Object.assign({ type: 'button', className: 'CancelButton btn btn-default', onClick: onClickCancel }, { children: cancelButtonText })), (0, jsx_runtime_1.jsx)("button", Object.assign({ type: 'button', className: 'ConfirmationButton btn btn-primary', onClick: onClickConfirm, disabled: disableConfirm }, { children: confirmButtonText }))] })));
-    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, 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: prop_types_1.default.bool.isRequired,
-    title: prop_types_1.default.node.isRequired,
-    subtitle: prop_types_1.default.node,
-    content: prop_types_1.default.node.isRequired,
-    onClickCancel: prop_types_1.default.func.isRequired,
-    onClickConfirm: prop_types_1.default.func.isRequired,
-    cancelButtonText: prop_types_1.default.node.isRequired,
-    confirmButtonText: prop_types_1.default.node.isRequired,
-    disableConfirm: prop_types_1.default.bool,
-    bsSize: prop_types_1.default.string,
+const ConfirmationDialog = (props) => {
+    const { content, onClickCancel = noop_1.default, cancelButtonText, onClickConfirm = noop_1.default, confirmButtonText, disableConfirm } = props, remainingProps = tslib_1.__rest(props, ["content", "onClickCancel", "cancelButtonText", "onClickConfirm", "confirmButtonText", "disableConfirm"]);
+    const footer = ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex justify-content-end btn-toolbar' }, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({ className: 'CancelButton', onClick: onClickCancel }, { children: cancelButtonText })), (0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({ bsStyle: 'primary', className: 'ConfirmationButton', onClick: onClickConfirm, disabled: disableConfirm }, { children: confirmButtonText }))] })));
+    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, Object.assign({}, remainingProps, { body: content, footer: footer, onClose: onClickCancel, showCloseButton: false, className: 'confirmation-dialog', disableEsc: true })));
 };
 exports.default = ConfirmationDialog;