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

package/components/position/Position.js

@@ -1,27 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import PropTypes from 'prop-types';
-function formatDegrees(degrees, positivePrefix, negativePrefix) {
+import 'react';
+const format = (degrees, positivePrefix, negativePrefix) => {
     const prefix = degrees >= 0 ? positivePrefix : negativePrefix;
     const absDegrees = Math.abs(degrees);
     const flooredDegrees = Math.floor(absDegrees);
     const minutes = (absDegrees - flooredDegrees) * 60;
     return `${prefix}${flooredDegrees}\u00b0 ${minutes.toFixed(3)}\u2032`;
-}
-const Position = props => {
-    const { latitude, longitude, address } = props;
-    let formattedAddress;
-    if (!address) {
-        formattedAddress = `${formatDegrees(latitude, 'N', 'S')} ${formatDegrees(longitude, 'E', 'W')}`;
-    }
-    else {
-        formattedAddress = address;
-    }
-    return _jsx("span", Object.assign({ className: 'vehiclePositionInfo' }, { children: formattedAddress }));
 };
-Position.propTypes = {
-    latitude: PropTypes.number.isRequired,
-    longitude: PropTypes.number.isRequired,
-    address: PropTypes.string,
+const Position = (props) => {
+    const { latitude, longitude, address } = props;
+    return (_jsx("span", Object.assign({ className: 'vehiclePositionInfo' }, { children: address || `${format(latitude, 'N', 'S')} ${format(longitude, 'E', 'W')}` })));
 };
 export default Position;

package/components/preloader/ImagePreloader.d.ts

@@ -1,22 +1,47 @@
+import { type JSX } from 'react';
+type ImagePreloaderStatus = 'PENDING' | 'FAILED' | 'LOADED';
+export type ImagePreloaderChild = (props: {
+    status: ImagePreloaderStatus;
+    image: HTMLImageElement;
+}) => JSX.Element | null;
+export type ImagePreloaderProps = {
+    /**
+     * The URL of the image to load.
+     */
+    src: string;
+    /**
+     * Invoked when the image is loaded.
+     *
+     * @param image The native Image object.
+     */
+    onLoaded?: (image: HTMLImageElement) => void;
+    /**
+     * Invoked when the image failed to load.
+     *
+     * @param image The native Image object.
+     */
+    onFailed?: (image: HTMLImageElement) => void;
+    /**
+     * Whether to set the "crossOrigin" to "anonymous".
+     *
+     * @default false
+     */
+    isAnonymous?: boolean;
+    /**
+     * A render function can be used to access both the current state and the image element.
+     *
+     * Using this, you can decide how to render the different states and/or the loaded image.
+     *
+     * The function will receive props containing the `status` and `image` properties.
+     *
+     * `status` will be one of 'PENDING', 'FAILED' or 'LOADED'. `image` is the Image element.
+     */
+    children?: ImagePreloaderChild;
+};
+declare const ImagePreloader: {
+    (props: ImagePreloaderProps): JSX.Element | null;
+    STATUS_PENDING: string;
+    STATUS_LOADED: string;
+    STATUS_FAILED: string;
+};
 export default ImagePreloader;
-declare function ImagePreloader(props: any): any;
-declare namespace ImagePreloader {
-    const STATUS_PENDING: string;
-    const STATUS_LOADED: string;
-    const STATUS_FAILED: string;
-    namespace defaultProps {
-        function onLoaded(): void;
-        function onFailed(): void;
-        const isAnonymous: boolean;
-    }
-    namespace propTypes {
-        export const src: PropTypes.Validator<string>;
-        const onLoaded_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onLoaded_1 as onLoaded };
-        const onFailed_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onFailed_1 as onFailed };
-        const isAnonymous_1: PropTypes.Requireable<boolean>;
-        export { isAnonymous_1 as isAnonymous };
-    }
-}
-import PropTypes from "prop-types";

package/components/preloader/ImagePreloader.js

@@ -1,33 +1,34 @@
-import React, { useState, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
+import { useEffect, useRef, useState } from 'react';
+import noop from 'lodash/noop';
 const loadImage = (onLoad, onError) => (src, isAnonymous) => {
-    const imageToLoad = new Image();
+    const image = new Image();
     if (isAnonymous) {
-        imageToLoad.crossOrigin = 'Anonymous';
+        image.crossOrigin = 'anonymous';
     }
-    // pre-load the actual image
-    imageToLoad.src = src;
-    imageToLoad.onload = onLoad;
-    imageToLoad.onerror = onError;
-    return imageToLoad;
+    // attach listeners
+    image.onload = onLoad;
+    image.onerror = onError;
+    // preload the actual image
+    image.src = src;
+    return image;
 };
-const ImagePreloader = props => {
-    const { src, isAnonymous, onLoaded, onFailed, children } = props;
-    const [status, setStatus] = useState(ImagePreloader.STATUS_PENDING);
+const ImagePreloader = (props) => {
+    const { src, isAnonymous = false, onLoaded = noop, onFailed = noop, children } = props;
+    const [status, setStatus] = useState('PENDING');
     const [image, setImage] = useState();
-    const willUnmount = useRef();
+    const willUnmount = useRef(false);
     const handleImageLoaded = () => {
         if (willUnmount.current) {
             return;
         }
-        setStatus(ImagePreloader.STATUS_LOADED);
+        setStatus('LOADED');
         onLoaded(image);
     };
     const handleImageFailed = () => {
         if (willUnmount.current) {
             return;
         }
-        setStatus(ImagePreloader.STATUS_FAILED);
+        setStatus('FAILED');
         onFailed(image);
     };
     const loadImageWithCallbacks = loadImage(handleImageLoaded, handleImageFailed);
@@ -38,23 +39,12 @@ const ImagePreloader = props => {
         };
     }, []);
     useEffect(() => {
-        setStatus(ImagePreloader.STATUS_PENDING);
+        setStatus('PENDING');
         setImage(loadImageWithCallbacks(src, isAnonymous));
     }, [src]);
-    return children({ status, image });
+    return children ? children({ status, image: image }) : null;
 };
 ImagePreloader.STATUS_PENDING = 'PENDING';
 ImagePreloader.STATUS_LOADED = 'LOADED';
 ImagePreloader.STATUS_FAILED = 'FAILED';
-ImagePreloader.defaultProps = {
-    onLoaded: () => { },
-    onFailed: () => { },
-    isAnonymous: false,
-};
-ImagePreloader.propTypes = {
-    src: PropTypes.string.isRequired,
-    onLoaded: PropTypes.func,
-    onFailed: PropTypes.func,
-    isAnonymous: PropTypes.bool,
-};
 export default ImagePreloader;

package/components/radiobutton/RadioButton.d.ts

@@ -1,45 +1,111 @@
+import { type ChangeEventHandler, type MouseEventHandler, type PropsWithChildren, type ReactNode, type Ref, HTMLProps } from 'react';
+export type RadioButtonProps = Omit<HTMLProps<HTMLLabelElement>, 'label' | 'onClick'> & {
+    /**
+     * Define any rioglyph icon like "rioglyph-truck".
+     */
+    icon?: string;
+    /**
+     * The label position.
+     *
+     * Possible values are: "horizontal" or "vertical".
+     *
+     * @default 'vertical'
+     */
+    iconLabelPosition?: 'vertical' | 'horizontal';
+    /**
+     * The icon Size in px.
+     *
+     * @default 16
+     */
+    iconSize?: number;
+    /**
+     * Defines the label text.
+     */
+    label?: string | ReactNode;
+    /**
+     * Callback function that is invoked when the radio button is clicked.
+     *
+     * @default noop
+     */
+    onClick?: MouseEventHandler<{
+        value: string | string[] | number;
+    }>;
+    /**
+     * Callback function that is invoked when the radio button is toggled and the state should change (for controlled
+     * usage).
+     *
+     * @default noop
+     */
+    onChange?: ChangeEventHandler;
+    /**
+     * Defines whether the radio is checked (for controlled usage).
+     */
+    checked?: boolean;
+    /**
+     * Defines whether the radio is initially checked (state can be changed on click).
+     */
+    defaultChecked?: boolean;
+    /**
+     * Defines whether the checkbox is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional classes to be set on the input element.
+     */
+    className?: string;
+    /**
+     * Defines whether the radio button is applying an inline style.
+     *
+     * Use this in combination with other radio buttons.
+     *
+     * @default false
+     */
+    inline?: boolean;
+    /**
+     * Displays the icon on the right side of the text.
+     *
+     * @default false
+     */
+    right?: boolean;
+    /**
+     * Allows for rendering a completely different layout with or without a radio tick.
+     *
+     * @default false
+     */
+    custom?: boolean;
+    /**
+     * Name to be given to the input element.
+     */
+    name?: string;
+    /**
+     * The value attribute is a string containing the radio button's value but __it is never shown to the user__.
+     * It serves a special purpose for inputs of type radio: when a form is submitted, only radio buttons which are
+     * currently checked are submitted, and the reported value is the value of the value attribute.
+     * If the value is not otherwise specified, it is the string on by default.
+     *
+     * This is useful when using native `FormData` when submitting a form to get the selected radio button value.
+     */
+    value?: string;
+    /**
+     * Number of the index used for keyboard support.
+     *
+     * An index of 0 means that the element should be focusable in sequential keyboard navigation, but its order is
+     * defined by the document's source order. To disable the focus set the value to -1. A positive value means the
+     * element should be focusable in sequential keyboard navigation, with its order defined by the value of the number.
+     *
+     * @default 0
+     */
+    tabIndex?: number;
+    /**
+     * Ref which is added to the input element.
+     */
+    inputRef?: Ref<HTMLInputElement>;
+};
+declare const RadioButton: {
+    (props: PropsWithChildren<RadioButtonProps>): import("react/jsx-runtime").JSX.Element;
+    ICON_LABEL_VERTICAL: string;
+    ICON_LABEL_HORIZONTAL: string;
+};
 export default RadioButton;
-declare function RadioButton(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace RadioButton {
-    const ICON_LABEL_VERTICAL: string;
-    const ICON_LABEL_HORIZONTAL: string;
-    namespace defaultProps {
-        export const inline: boolean;
-        export const disabled: boolean;
-        export const right: boolean;
-        export const custom: boolean;
-        export const tabIndex: number;
-        export const icon: string;
-        export const iconSize: number;
-        import iconLabelPosition = RadioButton.ICON_LABEL_VERTICAL;
-        export { iconLabelPosition };
-        export function onClick(): void;
-    }
-    namespace propTypes {
-        export const label: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        const icon_1: PropTypes.Requireable<string>;
-        export { icon_1 as icon };
-        const iconSize_1: PropTypes.Requireable<number>;
-        export { iconSize_1 as iconSize };
-        const iconLabelPosition_1: PropTypes.Requireable<string>;
-        export { iconLabelPosition_1 as iconLabelPosition };
-        const onClick_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onClick_1 as onClick };
-        export const onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        export const defaultChecked: PropTypes.Requireable<boolean>;
-        export const checked: PropTypes.Requireable<boolean>;
-        const disabled_1: PropTypes.Requireable<boolean>;
-        export { disabled_1 as disabled };
-        export const className: PropTypes.Requireable<string>;
-        const inline_1: PropTypes.Requireable<boolean>;
-        export { inline_1 as inline };
-        const right_1: PropTypes.Requireable<boolean>;
-        export { right_1 as right };
-        const custom_1: PropTypes.Requireable<boolean>;
-        export { custom_1 as custom };
-        export const inputRef: PropTypes.Requireable<(...args: any[]) => any>;
-        const tabIndex_1: PropTypes.Requireable<number>;
-        export { tabIndex_1 as tabIndex };
-    }
-}
-import PropTypes from "prop-types";

package/components/radiobutton/RadioButton.js

@@ -1,9 +1,9 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useRef } from 'react';
-import PropTypes from 'prop-types';
+import { useRef, } from 'react';
 import classNames from 'classnames';
-const RadioButtonIcon = props => {
+import noop from 'lodash/noop';
+const RadioButtonIcon = (props) => {
     const { icon, iconSize, iconLabelPosition, text } = props;
     const iconStyles = {
         width: `${iconSize}px`,
@@ -13,35 +13,35 @@ const RadioButtonIcon = props => {
     };
     return (_jsxs("span", Object.assign({ className: `radio-icon label-${iconLabelPosition}` }, { children: [_jsx("span", { className: `rioglyph ${icon}`, style: iconStyles }), _jsx("span", Object.assign({ className: 'radio-label' }, { children: text }))] })));
 };
-const RadioButton = props => {
-    const { checked, children, className, custom, defaultChecked, disabled, icon, iconLabelPosition, iconSize, inline, inputRef, label, name, onChange, onClick, right, tabIndex, value } = props, remainingProps = __rest(props, ["checked", "children", "className", "custom", "defaultChecked", "disabled", "icon", "iconLabelPosition", "iconSize", "inline", "inputRef", "label", "name", "onChange", "onClick", "right", "tabIndex", "value"]);
-    const labelRef = useRef();
-    const handleToggleKeyDown = event => {
+const RadioButton = (props) => {
+    const { icon = '', iconLabelPosition = 'vertical', iconSize = 16, label, onClick = noop, onChange = noop, checked, defaultChecked, disabled = false, className, inline = false, right = false, custom = false, name, value, tabIndex = 0, inputRef, children } = props, remainingProps = __rest(props, ["icon", "iconLabelPosition", "iconSize", "label", "onClick", "onChange", "checked", "defaultChecked", "disabled", "className", "inline", "right", "custom", "name", "value", "tabIndex", "inputRef", "children"]);
+    const isControlled = checked !== null && checked !== undefined;
+    const labelRef = useRef(null);
+    const handleToggleKeyDown = (event) => {
         switch (event.key) {
-            case ' ':
-                // toggle on space
-                toggle(event);
-                break;
-            case 'Enter':
-                // open on enter
+            case ' ': // toggle on space
+            case 'Enter': // open on enter
                 toggle(event);
                 break;
             default:
                 break;
         }
     };
-    const toggle = event => {
+    const toggle = (event) => {
         event.preventDefault();
         if (disabled) {
             return;
         }
         // Controlled case - uses "onChange()" instead of "onClick()" callback
-        if (checked !== null && checked !== undefined) {
+        if (isControlled) {
             onChange(event);
             return;
         }
         // Uncontrolled case - set the input checked or unchecked
-        labelRef.current.firstChild.checked = !labelRef.current.firstChild.checked;
+        if (labelRef.current) {
+            const checkbox = labelRef.current.firstChild;
+            checkbox.checked = !checkbox.checked;
+        }
         onClick(event);
     };
     const text = label || children;
@@ -54,32 +54,4 @@ const RadioButton = props => {
 };
 RadioButton.ICON_LABEL_VERTICAL = 'vertical';
 RadioButton.ICON_LABEL_HORIZONTAL = 'horizontal';
-RadioButton.defaultProps = {
-    inline: false,
-    disabled: false,
-    right: false,
-    custom: false,
-    tabIndex: 0,
-    icon: '',
-    iconSize: 16,
-    iconLabelPosition: RadioButton.ICON_LABEL_VERTICAL,
-    onClick: () => { },
-};
-RadioButton.propTypes = {
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    icon: PropTypes.string,
-    iconSize: PropTypes.number,
-    iconLabelPosition: PropTypes.oneOf([RadioButton.ICON_LABEL_VERTICAL, RadioButton.ICON_LABEL_HORIZONTAL]),
-    onClick: PropTypes.func,
-    onChange: PropTypes.func,
-    defaultChecked: PropTypes.bool,
-    checked: PropTypes.bool,
-    disabled: PropTypes.bool,
-    className: PropTypes.string,
-    inline: PropTypes.bool,
-    right: PropTypes.bool,
-    custom: PropTypes.bool,
-    inputRef: PropTypes.func,
-    tabIndex: PropTypes.number,
-};
 export default RadioButton;

package/components/releaseNotes/ReleaseNotes.d.ts

@@ -7,29 +7,34 @@ export type NoteProps = {
         content: NoteContent;
     };
 };
+export type ReleaseNotesData = {
+    [key: string]: {
+        date: string;
+        content: NoteContent;
+    };
+};
 export type ReleaseNotesProps = {
     /**
      * Translated release notes of the following shape:
+     *
      * @example
+     *
+     * ```tsx
      * {
-            "0.1.2": {
-                date: '23.07.2018',
-                content: (
-                    <div className='padding-left-15'>
-                        Map view within the tour history table
-                        • Modern map design as used in the Beta of the fleet monitor
-                        • Works with all event types
-                    </div>
-                ),
-            }
-        }
+     *     "0.1.2": {
+     *         date: '23.07.2018',
+     *         content: (
+     *             <div className='padding-left-15'>
+     *                 Map view within the tour history table
+     *                 • Modern map design as used in the Beta of the fleet monitor
+     *                 • Works with all event types
+     *             </div>
+     *         ),
+     *     }
+     * }
+     * ```
      */
-    releaseNotes: {
-        [key: string]: {
-            date: string;
-            content: NoteContent;
-        };
-    };
+    releaseNotes: ReleaseNotesData;
 };
 declare const ReleaseNotes: (props: ReleaseNotesProps) => import("react/jsx-runtime").JSX.Element;
 export default ReleaseNotes;

package/components/releaseNotes/ReleaseNotes.js

@@ -8,7 +8,7 @@ import toPairs from 'lodash/fp/toPairs';
 const Note = (props) => {
     const { note, version } = props;
     const { date, content } = note;
-    return (_jsxs("div", Object.assign({ className: 'panel panel-default' }, { children: [_jsx("div", Object.assign({ className: 'panel-heading' }, { children: _jsxs("div", Object.assign({ className: 'display-flex justify-content-between' }, { children: [_jsx("span", Object.assign({ className: 'text-size-16 text-medium' }, { children: `${version}` })), _jsx("span", Object.assign({ className: 'text-muted text-thin' }, { children: date }))] })) })), _jsx("div", Object.assign({ className: 'panel-body white-space-pre-line' }, { children: isArray(content) ? (_jsx("ul", Object.assign({ className: 'margin-bottom-0 margin-left-5 padding-left-25' }, { children: map((item) => (_jsx("li", { children: item }, `${version}-note-${Math.random()}`)), content) }))) : (_jsx("div", { children: content })) }))] }), `${version}-note`));
+    return (_jsxs("div", Object.assign({ className: 'panel panel-default' }, { children: [_jsx("div", Object.assign({ className: 'panel-heading' }, { children: _jsxs("div", Object.assign({ className: 'display-flex justify-content-between' }, { children: [_jsx("span", Object.assign({ className: 'text-size-16 text-medium' }, { children: `${version}` })), _jsx("span", Object.assign({ className: 'text-thin' }, { children: date }))] })) })), _jsx("div", Object.assign({ className: 'panel-body white-space-pre-line' }, { children: isArray(content) ? (_jsx("ul", Object.assign({ className: 'margin-bottom-0 margin-left-5 padding-left-25' }, { children: map((item) => (_jsx("li", { children: item }, `${version}-note-${Math.random()}`)), content) }))) : (_jsx("div", { children: content })) }))] }), `${version}-note`));
 };
 const ReleaseNotes = (props) => {
     const { releaseNotes } = props, remainingProps = __rest(props, ["releaseNotes"]);

package/components/resizer/Resizer.js

@@ -43,7 +43,8 @@ const Resizer = (props) => {
         };
     }, []);
     const getClientX = (event) => {
-        if (event instanceof TouchEvent) {
+        // Note: some browsers don't provide the global "TouchEvent" constructor!
+        if (!!window.TouchEvent && event instanceof window.TouchEvent) {
             return event.touches[0].clientX;
         }
         if (event instanceof MouseEvent) {
@@ -52,7 +53,8 @@ const Resizer = (props) => {
         throw new Error('Unsupported event type');
     };
     const getClientY = (event) => {
-        if (event instanceof TouchEvent) {
+        // Note: some browsers don't provide the global "TouchEvent" constructor!
+        if (!!window.TouchEvent && event instanceof window.TouchEvent) {
             return event.touches[0].clientY;
         }
         if (event instanceof MouseEvent) {

package/components/responsiveColumnStripe/ResponsiveColumnStripe.d.ts

@@ -1,3 +1,81 @@
+import React, { type ReactHTML } from 'react';
+export type ResponsiveColumnStripeProps = {
+    /**
+     * The minimum width in pixel of a single column.
+     *
+     * This value determines how many columns are shown per page depending on the parent width.
+     *
+     * @default 300
+     */
+    minColumnWith?: number;
+    /**
+     * The minimum amount of columns that should be shown per page.
+     *
+     * @default 1
+     */
+    minColumns?: number;
+    /**
+     * The maximum amount of columns that should be shown per page.
+     *
+     * @default 5
+     */
+    maxColumns?: number;
+    /**
+     * Defines whether the items on the last page are stretched out to fill the space.
+     *
+     * @default false
+     */
+    stretchLastItems?: boolean;
+    /**
+     * The page that shall be shown.
+     *
+     * This can be used to control the pages from outside.
+     *
+     * @default 0
+     */
+    activePage?: number;
+    /**
+     * The DOM element type of the wrapping column element.
+     *
+     * If you need a list, this might be set to "ul".
+     *
+     * @default 'div'
+     */
+    asType?: keyof ReactHTML;
+    /**
+     * Set to true to skip animating pages.
+     *
+     * @default false
+     */
+    disableAnimation?: boolean;
+    /**
+     * Callback function for when the previous page is clicked.
+     *
+     * @param pageNumber
+     * @param columnsPerPage
+     */
+    onPreviousClick?: (pageNumber: number, columnsPerPage: number) => void;
+    /**
+     * Callback function for when the next page is clicked.
+     *
+     * @param pageNumber
+     * @param columnsPerPage
+     */
+    onNextClick?: (pageNumber: number, columnsPerPage: number) => void;
+    /**
+     * Additional classes set to the navigation buttons.
+     */
+    buttonClassName?: string;
+    /**
+     * Additional classes set to the component wrapper element.
+     */
+    columnsWrapperClassName?: string;
+    /**
+     * Additional classes set to the column wrapper element.
+     */
+    className?: string;
+};
+declare const ResponsiveColumnStripe: React.ForwardRefExoticComponent<ResponsiveColumnStripeProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
 export default ResponsiveColumnStripe;
-declare const ResponsiveColumnStripe: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from "react";