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

package/lib/es/components/onboarding/OnboardingTip.js

@@ -1,104 +1,50 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OnboardingTipPlacementType = void 0;
 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 classnames_1 = tslib_1.__importDefault(require("classnames"));
+const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
+const Button_1 = tslib_1.__importDefault(require("../button/Button"));
 const OverlayTrigger_1 = tslib_1.__importDefault(require("../overlay/OverlayTrigger"));
 const Tooltip_1 = tslib_1.__importDefault(require("../tooltip/Tooltip"));
 const TextAlignment_1 = require("../../values/TextAlignment");
-const DELAY_SHOW = 500;
-const DELAY_HIDE = 300;
-function OnboardingTip(props) {
-    const { id, show, placement, title, content, onHide, children, textAlignment, useInDialog, clickflow, 
-    // clickflowBackdrop,
-    showCloseIcon, className, width, preventOverflow, popperConfig, } = props;
-    const tooltipWrapperClasses = (0, classnames_1.default)(useInDialog && 'z-index-max', className && className, clickflow && 'onboarding-clickflow'
-    // clickflowBackdrop && 'onboarding-clickflow-backdrop'
-    );
-    const overlay = ((0, jsx_runtime_1.jsx)(Tooltip_1.default, Object.assign({ className: tooltipWrapperClasses, tooltipStyle: Tooltip_1.default.STYLE_ONBOARDING, id: id, onClick: onHide, width: width, textAlignment: textAlignment, allowOnTouch: true }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex' }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex flex-column flex-1-1' }, { children: [title && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'tooltip-title' }, { children: title })), content && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'tooltip-content' }, { children: content }))] })), showCloseIcon && (0, jsx_runtime_1.jsx)("span", { className: 'tooltip-close rioglyph rioglyph-remove' })] })) })));
-    const trigger = ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, Object.assign({ placement: placement, trigger: 'click', overlay: overlay, delayShow: DELAY_SHOW, delayHide: DELAY_HIDE, onToggle: onHide, show: show, rootClose: false, popperConfig: popperConfig || {
-            modifiers: [
-                {
-                    name: 'preventOverflow',
-                    options: {
-                        // Popper.js default is: false but we enable it by default
-                        altAxis: preventOverflow,
-                    },
-                },
-            ],
-        } }, { children: children })));
-    return show ? trigger : children;
-}
-exports.default = OnboardingTip;
-OnboardingTip.AUTO_START = Tooltip_1.default.AUTO_START;
-OnboardingTip.AUTO = Tooltip_1.default.AUTO;
-OnboardingTip.AUTO_END = Tooltip_1.default.AUTO_END;
-OnboardingTip.TOP_START = Tooltip_1.default.TOP_START;
-OnboardingTip.TOP = Tooltip_1.default.TOP;
-OnboardingTip.TOP_END = Tooltip_1.default.TOP_END;
-OnboardingTip.BOTTOM_START = Tooltip_1.default.BOTTOM_START;
-OnboardingTip.BOTTOM = Tooltip_1.default.BOTTOM;
-OnboardingTip.BOTTOM_END = Tooltip_1.default.BOTTOM_END;
-OnboardingTip.RIGHT_START = Tooltip_1.default.RIGHT_START;
-OnboardingTip.RIGHT = Tooltip_1.default.RIGHT;
-OnboardingTip.RIGHT_END = Tooltip_1.default.RIGHT_END;
-OnboardingTip.LEFT_START = Tooltip_1.default.LEFT_START;
-OnboardingTip.LEFT = Tooltip_1.default.LEFT;
-OnboardingTip.LEFT_END = Tooltip_1.default.LEFT_END;
-exports.OnboardingTipPlacementType = prop_types_1.default.oneOf([
-    OnboardingTip.AUTO_START,
-    OnboardingTip.AUTO,
-    OnboardingTip.AUTO_END,
-    OnboardingTip.TOP_START,
-    OnboardingTip.TOP,
-    OnboardingTip.TOP_END,
-    OnboardingTip.BOTTOM_START,
-    OnboardingTip.BOTTOM,
-    OnboardingTip.BOTTOM_END,
-    OnboardingTip.RIGHT_START,
-    OnboardingTip.RIGHT,
-    OnboardingTip.RIGHT_END,
-    OnboardingTip.LEFT_START,
-    OnboardingTip.LEFT,
-    OnboardingTip.LEFT_END,
-]);
+const Placement_1 = require("../../values/Placement");
+const OnboardingTip = (props) => {
+    const { id, show = false, placement = Placement_1.PLACEMENT.BOTTOM, title, content, onHide = noop_1.default, children, textAlignment = TextAlignment_1.TEXT_ALIGNMENT.LEFT, useInDialog = false, showCloseIcon = true, clickflow = false, previousButton, nextButton, className = '', width, preventOverflow = true, popperConfig, } = props;
+    const clickFlowWithButtons = ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex flex-column gap-25' }, { children: [(0, jsx_runtime_1.jsx)("div", { children: content }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `btn-toolbar justify-content-between ${showCloseIcon ? 'margin-right--25' : ''}` }, { children: [previousButton ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'position-relative' }, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'bg-black opacity-10 rounded display-absolute inset-0' }), (0, jsx_runtime_1.jsxs)(Button_1.default, Object.assign({ bsStyle: Button_1.default.SECONDARY, variant: Button_1.default.VARIANT_OUTLINE, className: 'border-none text-color-white', onClick: previousButton.onClick }, { children: [previousButton.iconName && ((0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${previousButton.iconName} text-color-white` })), (0, jsx_runtime_1.jsx)("span", { children: previousButton.text })] }))] }))) : ((0, jsx_runtime_1.jsx)("div", {})), nextButton ? ((0, jsx_runtime_1.jsxs)(Button_1.default, Object.assign({ bsStyle: Button_1.default.SECONDARY, variant: Button_1.default.VARIANT_OUTLINE, className: 'border-color-white text-color-white', onClick: nextButton.onClick, iconRight: true }, { children: [(0, jsx_runtime_1.jsx)("span", { children: nextButton.text }), nextButton.iconName && (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${nextButton.iconName} text-color-white` })] }))) : ((0, jsx_runtime_1.jsx)("div", {}))] }))] })));
+    const tooltipWrapperClasses = (0, classnames_1.default)(useInDialog && 'z-index-max', className && className, clickflow && 'onboarding-clickflow');
+    const overlay = ((0, jsx_runtime_1.jsx)(Tooltip_1.default, Object.assign({ className: tooltipWrapperClasses, tooltipStyle: Tooltip_1.default.STYLE_ONBOARDING, id: id, onClick: onHide, width: width, textAlignment: textAlignment, allowOnTouch: true }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex' }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex flex-column flex-1-1' }, { children: [title && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'tooltip-title' }, { children: title })), content && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'tooltip-content' }, { children: clickflow ? clickFlowWithButtons : content }))] })), showCloseIcon && (0, jsx_runtime_1.jsx)("span", { className: 'tooltip-close rioglyph rioglyph-remove' })] })) })));
+    const actualPopperConfig = popperConfig || {
+        strategy: 'fixed',
+        modifiers: [
+            {
+                name: 'preventOverflow',
+                // Popper.js default is false but we enable it by default
+                options: { altAxis: preventOverflow },
+            },
+        ],
+    };
+    const trigger = ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, Object.assign({ placement: placement, trigger: 'click', overlay: overlay, onToggle: onHide, show: show, rootClose: false, popperConfig: actualPopperConfig }, { children: children })));
+    return show ? trigger : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+};
+OnboardingTip.AUTO_START = Placement_1.PLACEMENT.AUTO_START;
+OnboardingTip.AUTO = Placement_1.PLACEMENT.AUTO;
+OnboardingTip.AUTO_END = Placement_1.PLACEMENT.AUTO_END;
+OnboardingTip.TOP_START = Placement_1.PLACEMENT.TOP_START;
+OnboardingTip.TOP = Placement_1.PLACEMENT.TOP;
+OnboardingTip.TOP_END = Placement_1.PLACEMENT.TOP_END;
+OnboardingTip.BOTTOM_START = Placement_1.PLACEMENT.BOTTOM_START;
+OnboardingTip.BOTTOM = Placement_1.PLACEMENT.BOTTOM;
+OnboardingTip.BOTTOM_END = Placement_1.PLACEMENT.BOTTOM_END;
+OnboardingTip.RIGHT_START = Placement_1.PLACEMENT.RIGHT_START;
+OnboardingTip.RIGHT = Placement_1.PLACEMENT.RIGHT;
+OnboardingTip.RIGHT_END = Placement_1.PLACEMENT.RIGHT_END;
+OnboardingTip.LEFT_START = Placement_1.PLACEMENT.LEFT_START;
+OnboardingTip.LEFT = Placement_1.PLACEMENT.LEFT;
+OnboardingTip.LEFT_END = Placement_1.PLACEMENT.LEFT_END;
 OnboardingTip.TEXT_ALIGNMENT_LEFT = TextAlignment_1.TEXT_ALIGNMENT.LEFT;
 OnboardingTip.TEXT_ALIGNMENT_CENTER = TextAlignment_1.TEXT_ALIGNMENT.CENTER;
 OnboardingTip.TEXT_ALIGNMENT_RIGHT = TextAlignment_1.TEXT_ALIGNMENT.RIGHT;
-OnboardingTip.defaultProps = {
-    show: false,
-    onHide: () => { },
-    showCloseIcon: true,
-    textAlignment: OnboardingTip.TEXT_ALIGNMENT_LEFT,
-    useInDialog: false,
-    className: '',
-    clickflow: false,
-    // clickflowBackdrop: false,
-    placement: OnboardingTip.BOTTOM,
-    width: null,
-    preventOverflow: true,
-};
-OnboardingTip.propTypes = {
-    id: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
-    show: prop_types_1.default.bool.isRequired,
-    showCloseIcon: prop_types_1.default.bool,
-    textAlignment: prop_types_1.default.oneOf([
-        OnboardingTip.TEXT_ALIGNMENT_LEFT,
-        OnboardingTip.TEXT_ALIGNMENT_CENTER,
-        OnboardingTip.TEXT_ALIGNMENT_RIGHT,
-    ]),
-    onHide: prop_types_1.default.func.isRequired,
-    useInDialog: prop_types_1.default.bool,
-    title: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-    content: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-    className: prop_types_1.default.string,
-    clickflow: prop_types_1.default.bool,
-    // clickflowBackdrop: PropTypes.bool,
-    placement: exports.OnboardingTipPlacementType,
-    width: prop_types_1.default.oneOf(['auto', 100, 150, 200, 250, 300, 350, 400, 450, 500]),
-    preventOverflow: prop_types_1.default.bool,
-    popperConfig: prop_types_1.default.object,
-};
+exports.default = OnboardingTip;

package/lib/es/components/page/Page.d.ts

@@ -0,0 +1,32 @@
+import { type PropsWithChildren } from 'react';
+export type PageProps = {
+    /**
+     * Defines the width in pixel of the page. In landscape mode, the width is set as height.
+     * The component uses internally the aspect-ratio of a standard DIN A4 page.
+     * Please make sure the element does not get stretched when using flexbox.
+     */
+    width: number;
+    /**
+     * Defines the layout of the page
+     *
+     * @default 'portrait'
+     */
+    orientation?: 'portrait' | 'landscape';
+    /**
+     * Defines to use a pre-defined shadow style. May be disabled on white background.
+     *
+     * @default true
+     */
+    shadow?: boolean;
+    /**
+     * Defines to use a pre-defined border style. This may be used to render
+     * the page on a white background of as part of another element like a panel.
+     */
+    border?: boolean;
+    /**
+     * Additional classes to be set on the wrapper element
+     */
+    className?: string;
+};
+declare const Page: (props: PropsWithChildren<PageProps>) => import("react/jsx-runtime").JSX.Element;
+export default Page;

package/lib/es/components/page/Page.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Page = (props) => {
+    const { className, width, orientation = 'portrait', shadow = true, border = false, children } = props;
+    const wrapperClassNames = (0, classnames_1.default)('Page', orientation, shadow && 'shadow-hard', border && 'border border-width-2', className);
+    const isPortrait = orientation === 'portrait';
+    const style = {};
+    if (width && isPortrait) {
+        style.width = `${width}px`;
+    }
+    if (width && !isPortrait) {
+        style.height = `${width}px`;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: wrapperClassNames, style: style }, { children: children })));
+};
+exports.default = Page;

package/lib/es/components/popover/Popover.d.ts

@@ -1,3 +1,43 @@
+import React, { type ReactNode } from 'react';
+import type { RefComponent } from '../../utils/RefComponent';
+export type PopoverProps = {
+    /**
+     * HTML ID attribute, necessary for accessibility.
+     */
+    id: string;
+    /**
+     * Sets the direction the Popover is positioned towards.
+     *
+     * This is generally provided by the OverlayTrigger component positioning the Popover.
+     *
+     * Possible values are:
+     * - `auto`
+     * - `top`
+     * - `right`
+     * - `bottom`
+     * - `left`
+     */
+    placement?: 'auto' | 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * Any element to be rendered as the title of the Popover.
+     *
+     * It creates a `Popover.Title` inside the `Popover` passing the title directly into it.
+     */
+    title?: string | ReactNode;
+    /**
+     * Additional classes to be set on the `Popover.Title` element.
+     */
+    titleClassName?: string;
+    /**
+     * Additional classes to be set on the `Popover.Content` element.
+     */
+    contentClassName?: string;
+};
+declare const Popover: RefComponent<React.PropsWithChildren<PopoverProps>, HTMLDivElement> & {
+    readonly AUTO: "auto";
+    readonly TOP: "top";
+    readonly RIGHT: "right";
+    readonly BOTTOM: "bottom";
+    readonly LEFT: "left";
+};
 export default Popover;
-declare const Popover: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from "react";

package/lib/es/components/popover/Popover.js

@@ -2,24 +2,19 @@
 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_1 = require("react");
 const Popover_1 = tslib_1.__importDefault(require("react-bootstrap/Popover"));
-const Tooltip_1 = tslib_1.__importDefault(require("../tooltip/Tooltip"));
-const Popover = react_1.default.forwardRef((props, ref) => {
+const Placement_1 = require("../../values/Placement");
+const PLACEMENT_MAP = {
+    AUTO: Placement_1.PLACEMENT.AUTO,
+    TOP: Placement_1.PLACEMENT.TOP,
+    RIGHT: Placement_1.PLACEMENT.RIGHT,
+    BOTTOM: Placement_1.PLACEMENT.BOTTOM,
+    LEFT: Placement_1.PLACEMENT.LEFT,
+};
+const Popover = (0, react_1.forwardRef)((props, ref) => {
     const { title, titleClassName = '', contentClassName = '', children } = props, remainingProps = tslib_1.__rest(props, ["title", "titleClassName", "contentClassName", "children"]);
     return ((0, jsx_runtime_1.jsxs)(Popover_1.default, Object.assign({ ref: ref }, remainingProps, { children: [title && (0, jsx_runtime_1.jsx)(Popover_1.default.Title, Object.assign({ className: `popover-title ${titleClassName}` }, { children: title })), children && ((0, jsx_runtime_1.jsx)(Popover_1.default.Content, Object.assign({ className: `popover-content ${contentClassName}` }, { children: children })))] })));
 });
-Popover.AUTO = Tooltip_1.default.AUTO;
-Popover.TOP = Tooltip_1.default.TOP;
-Popover.BOTTOM = Tooltip_1.default.BOTTOM;
-Popover.RIGHT = Tooltip_1.default.RIGHT;
-Popover.LEFT = Tooltip_1.default.LEFT;
-Popover.propTypes = {
-    id: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]).isRequired,
-    title: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-    children: prop_types_1.default.node.isRequired,
-    titleClassName: prop_types_1.default.string,
-    contentClassName: prop_types_1.default.string,
-};
+Object.assign(Popover, PLACEMENT_MAP);
 exports.default = Popover;

package/lib/es/components/position/Position.d.ts

@@ -1,10 +1,16 @@
+export type PositionProps = {
+    /**
+     * The latitude to display.
+     */
+    latitude: number;
+    /**
+     * The longitude to display.
+     */
+    longitude: number;
+    /**
+     * Can be used to override the default output.
+     */
+    address?: string;
+};
+declare const Position: (props: PositionProps) => import("react/jsx-runtime").JSX.Element;
 export default Position;
-declare function Position(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace Position {
-    namespace propTypes {
-        const latitude: PropTypes.Validator<number>;
-        const longitude: PropTypes.Validator<number>;
-        const address: PropTypes.Requireable<string>;
-    }
-}
-import PropTypes from "prop-types";

package/lib/es/components/position/Position.js

@@ -1,30 +1,16 @@
 "use strict";
 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"));
-function formatDegrees(degrees, positivePrefix, negativePrefix) {
+require("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 (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'vehiclePositionInfo' }, { children: formattedAddress }));
 };
-Position.propTypes = {
-    latitude: prop_types_1.default.number.isRequired,
-    longitude: prop_types_1.default.number.isRequired,
-    address: prop_types_1.default.string,
+const Position = (props) => {
+    const { latitude, longitude, address } = props;
+    return ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'vehiclePositionInfo' }, { children: address || `${format(latitude, 'N', 'S')} ${format(longitude, 'E', 'W')}` })));
 };
 exports.default = Position;

package/lib/es/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/lib/es/components/preloader/ImagePreloader.js

@@ -1,36 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+const react_1 = require("react");
+const noop_1 = tslib_1.__importDefault(require("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] = (0, react_1.useState)(ImagePreloader.STATUS_PENDING);
+const ImagePreloader = (props) => {
+    const { src, isAnonymous = false, onLoaded = noop_1.default, onFailed = noop_1.default, children } = props;
+    const [status, setStatus] = (0, react_1.useState)('PENDING');
     const [image, setImage] = (0, react_1.useState)();
-    const willUnmount = (0, react_1.useRef)();
+    const willUnmount = (0, react_1.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);
@@ -41,23 +42,12 @@ const ImagePreloader = props => {
         };
     }, []);
     (0, react_1.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: prop_types_1.default.string.isRequired,
-    onLoaded: prop_types_1.default.func,
-    onFailed: prop_types_1.default.func,
-    isAnonymous: prop_types_1.default.bool,
-};
 exports.default = ImagePreloader;

package/lib/es/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";