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

package/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/components/datepicker/DatePicker.js

@@ -1,48 +1,37 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useState, forwardRef } from 'react';
-import PropTypes from 'prop-types';
+import { useState, forwardRef } from 'react';
 import classNames from 'classnames';
-// This workaround fixes the react minified #130 error for using external commonjs libs
-// see https://github.com/vitejs/vite/issues/2139
-import RDT from 'react-datetime';
-const Datetime = RDT.default ? RDT.default : RDT;
-const isValidDate = date => typeof date === 'object';
+import Datetime from 'react-datetime';
+import noop from 'lodash/fp/noop';
+const DEFAULT_LOCALE = 'en-GB';
+const DEFAULT_MIN_WIDTH = 0;
 const DatePicker = forwardRef((props, ref) => {
-    const { dropup, alignRight, onChange, className, mandatory, dateValidation } = props, remainingProp = __rest(props, ["dropup", "alignRight", "onChange", "className", "mandatory", "dateValidation"]);
+    const { id, dropup = false, alignRight = false, locale = DEFAULT_LOCALE, minWidth = DEFAULT_MIN_WIDTH, onChange = noop, mandatory = true, dateValidation, clearableInput = false, closeOnSelect = true, inputProps, className } = props, remainingProp = __rest(props, ["id", "dropup", "alignRight", "locale", "minWidth", "onChange", "mandatory", "dateValidation", "clearableInput", "closeOnSelect", "inputProps", "className"]);
     const [hasError, setHasError] = 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 = classNames('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 (_jsx(Datetime
     // TODO: add support for setting ref to the input. Maybe add a "inputRef" prop to react-datetime
-    return _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: PropTypes.string,
-    closeOnSelect: PropTypes.bool,
-    clearableInput: PropTypes.bool,
-    initialValue: PropTypes.object,
-    locale: PropTypes.string,
-    onChange: PropTypes.func,
-    dropup: PropTypes.bool,
-    minWidth: PropTypes.number,
-    alignRight: PropTypes.bool,
-    mandatory: PropTypes.bool,
-    dateValidation: PropTypes.func,
-};
 export default DatePicker;

package/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/components/datepicker/DateRangePicker.js

@@ -1,22 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @fileOverview: Wrapper component for React-Datetime.
- */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
-import DatePicker from './DatePicker';
 import onClickOutside from 'react-onclickoutside';
 import moment from 'moment';
 import classNames from 'classnames';
 import isNil from 'lodash/fp/isNil';
 import isNull from 'lodash/fp/isNull';
 import isEqual from 'lodash/fp/isEqual';
+import DatePicker from './DatePicker';
 import getDropDirection from '../../utils/getDropDirection';
 const Placeholder = ({ text }) => _jsx("span", Object.assign({ className: 'placeholder' }, { children: text }));
-/**
- * The DateRangePicker
- */
 const propTypes = {
     startValue: PropTypes.object,
     endValue: PropTypes.object,
@@ -101,6 +95,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 Component {
     constructor(props) {
         super(props);
@@ -225,8 +224,8 @@ class DateRangePicker extends Component {
             isEndValid: true,
             startValueText: null,
             endValueText: null,
-            pullRight: pullRight,
-            dropup: dropup,
+            pullRight,
+            dropup,
         });
         onClear();
     }
@@ -428,5 +427,10 @@ class DateRangePicker extends Component {
 }
 DateRangePicker.propTypes = propTypes;
 DateRangePicker.defaultProps = defaultProps;
+/**
+ * Wrapper component for React-Datetime.
+ *
+ * @deprecated This will be removed from the UIKIT at some time.
+ */
 export default onClickOutside(DateRangePicker);
 export { DateRangePicker as DateRangePickerPure };

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,42 +1,106 @@
+import React, { type PropsWithChildren } from 'react';
+export type DialogSize = '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?: () => void;
+    /**
+     * 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?: DialogSize;
+    /**
+     * 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: PropsWithChildren<DialogProps>): React.ReactPortal;
+    Title: (props: import("./DialogHeader").DialogHeaderProps) => import("react/jsx-runtime").JSX.Element;
+    Body: ({ className, children, ...remainingProps }: React.PropsWithChildren<import("./DialogBody").DialogBodyProps>) => import("react/jsx-runtime").JSX.Element;
+    Footer: (props: React.PropsWithChildren<import("./DialogFooter").DialogFooterProps>) => import("react/jsx-runtime").JSX.Element;
+    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): import("react-dom/node_modules/@types/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 PropTypes from "prop-types";