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

package/components/onboarding/OnboardingTip.d.ts

@@ -1,63 +1,146 @@
-declare function OnboardingTip(props: any): any;
-declare namespace OnboardingTip {
-    const AUTO_START: "auto-start";
-    const AUTO: "auto";
-    const AUTO_END: "auto-end";
-    const TOP_START: "top-start";
-    const TOP: "top";
-    const TOP_END: "top-end";
-    const BOTTOM_START: "bottom-start";
-    const BOTTOM: "bottom";
-    const BOTTOM_END: "bottom-end";
-    const RIGHT_START: "right-start";
-    const RIGHT: "right";
-    const RIGHT_END: "right-end";
-    const LEFT_START: "left-start";
-    const LEFT: "left";
-    const LEFT_END: "left-end";
-    const TEXT_ALIGNMENT_LEFT: "left";
-    const TEXT_ALIGNMENT_CENTER: "center";
-    const TEXT_ALIGNMENT_RIGHT: "right";
-    namespace defaultProps {
-        export const show: boolean;
-        export function onHide(): void;
-        export const showCloseIcon: boolean;
-        import textAlignment = OnboardingTip.TEXT_ALIGNMENT_LEFT;
-        export { textAlignment };
-        export const useInDialog: boolean;
-        export const className: string;
-        export const clickflow: boolean;
-        import placement = OnboardingTip.BOTTOM;
-        export { placement };
-        export const width: null;
-        export const preventOverflow: boolean;
-    }
-    namespace propTypes {
-        export const id: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        const show_1: PropTypes.Validator<boolean>;
-        export { show_1 as show };
-        const showCloseIcon_1: PropTypes.Requireable<boolean>;
-        export { showCloseIcon_1 as showCloseIcon };
-        const textAlignment_1: PropTypes.Requireable<"right" | "left" | "center">;
-        export { textAlignment_1 as textAlignment };
-        const onHide_1: PropTypes.Validator<(...args: any[]) => any>;
-        export { onHide_1 as onHide };
-        const useInDialog_1: PropTypes.Requireable<boolean>;
-        export { useInDialog_1 as useInDialog };
-        export const title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        export const content: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        const clickflow_1: PropTypes.Requireable<boolean>;
-        export { clickflow_1 as clickflow };
-        export { OnboardingTipPlacementType as placement };
-        const width_1: PropTypes.Requireable<string | number>;
-        export { width_1 as width };
-        const preventOverflow_1: PropTypes.Requireable<boolean>;
-        export { preventOverflow_1 as preventOverflow };
-        export const popperConfig: PropTypes.Requireable<object>;
-    }
-}
+import React, { type PropsWithChildren, type ReactNode } from 'react';
+import type { OverlayProps } from 'react-bootstrap';
+import { type TooltipWidth } from '../tooltip/Tooltip';
+import { type TextAlignment } from '../../values/TextAlignment';
+import { type Placement } from '../../values/Placement';
+type PopperConfig = OverlayProps['popperConfig'];
+export type OnboardingButton = {
+    text: string | React.ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    iconName?: string;
+};
+export type OnboardingTipProps = {
+    /**
+     * The ID of the DOM element.
+     */
+    id?: string;
+    /**
+     * Indicates whether the onboarding tip is shown.
+     *
+     * @default false
+     */
+    show: boolean;
+    /**
+     * Defines whether to show a close icon.
+     *
+     * @default true
+     */
+    showCloseIcon?: boolean;
+    /**
+     * Define how the text should be aligned.
+     *
+     * Possible values are: `left`, `center` or `right`.
+     *
+     * @default 'left'
+     */
+    textAlignment?: TextAlignment;
+    /**
+     * The tooltip's width.
+     *
+     * Possible values are:
+     * - `auto`
+     * - 100
+     * - 150
+     * - 200
+     * - 250
+     * - 300
+     * - 350
+     * - 400
+     * - 450
+     * - 500
+     */
+    width?: TooltipWidth;
+    /**
+     * Callback function for when the component shall be hidden.
+     *
+     * @default noop
+     */
+    onHide: VoidFunction;
+    /**
+     * Defines whether to have a clickflow journey.
+     *
+     * @default false
+     */
+    clickflow?: boolean;
+    /**
+     * Adds a button to navigate to the previous onboarding tip when using the click flow onboarding.
+     */
+    previousButton?: OnboardingButton;
+    /**
+     * Adds a button to navigate to the next onboarding tip when using the click flow onboarding.
+     */
+    nextButton?: OnboardingButton;
+    /**
+     * Changes the z-index.
+     *
+     * @default false
+     */
+    useInDialog?: boolean;
+    /**
+     * Additional classes to be set on the wrapper element.
+     */
+    className?: string;
+    /**
+     * The title of the onboarding tip.
+     */
+    title?: string | ReactNode;
+    /**
+     * The content of the onboarding tip.
+     */
+    content?: string | ReactNode;
+    /**
+     * Prevents onboarding tips from being cut off horizontally at screen borders.
+     *
+     * @default true
+     */
+    preventOverflow?: boolean;
+    /**
+     * A Popper.js config object passed to the underlying popper instance.
+     */
+    popperConfig?: PopperConfig;
+    /**
+     * Define how the component should be placed.
+     *
+     * Possible values are:
+     * - `auto-start`
+     * - `auto`
+     * - `auto-end`
+     * - `top-start`
+     * - `top`
+     * - `top-end`
+     * - `right-start`
+     * - `right`
+     * - `right-end`
+     * - `bottom-start`
+     * - `bottom`
+     * - `bottom-end`
+     * - `left-start`
+     * - `left`
+     * - `left-end`
+     *
+     * @default 'bottom'
+     */
+    placement?: Placement;
+};
+declare const OnboardingTip: {
+    (props: PropsWithChildren<OnboardingTipProps>): import("react/jsx-runtime").JSX.Element;
+    AUTO_START: "auto-start";
+    AUTO: "auto";
+    AUTO_END: "auto-end";
+    TOP_START: "top-start";
+    TOP: "top";
+    TOP_END: "top-end";
+    BOTTOM_START: "bottom-start";
+    BOTTOM: "bottom";
+    BOTTOM_END: "bottom-end";
+    RIGHT_START: "right-start";
+    RIGHT: "right";
+    RIGHT_END: "right-end";
+    LEFT_START: "left-start";
+    LEFT: "left";
+    LEFT_END: "left-end";
+    TEXT_ALIGNMENT_LEFT: "left";
+    TEXT_ALIGNMENT_CENTER: "center";
+    TEXT_ALIGNMENT_RIGHT: "right";
+};
 export default OnboardingTip;
-export const OnboardingTipPlacementType: PropTypes.Requireable<"auto-start" | "auto" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right" | "right-end" | "bottom-start" | "bottom" | "bottom-end" | "left-start" | "left" | "left-end">;
-import PropTypes from "prop-types";

package/components/onboarding/OnboardingTip.js

@@ -1,99 +1,47 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import PropTypes from 'prop-types';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
 import classNames from 'classnames';
+import noop from 'lodash/noop';
+import Button from '../button/Button';
 import OverlayTrigger from '../overlay/OverlayTrigger';
 import Tooltip from '../tooltip/Tooltip';
 import { TEXT_ALIGNMENT } from '../../values/TextAlignment';
-const DELAY_SHOW = 500;
-const DELAY_HIDE = 300;
-export default function OnboardingTip(props) {
-    const { id, show, placement, title, content, onHide, children, textAlignment, useInDialog, clickflow, 
-    // clickflowBackdrop,
-    showCloseIcon, className, width, preventOverflow, popperConfig, } = props;
-    const tooltipWrapperClasses = classNames(useInDialog && 'z-index-max', className && className, clickflow && 'onboarding-clickflow'
-    // clickflowBackdrop && 'onboarding-clickflow-backdrop'
-    );
-    const overlay = (_jsx(Tooltip, Object.assign({ className: tooltipWrapperClasses, tooltipStyle: Tooltip.STYLE_ONBOARDING, id: id, onClick: onHide, width: width, textAlignment: textAlignment, allowOnTouch: true }, { children: _jsxs("div", Object.assign({ className: 'display-flex' }, { children: [_jsxs("div", Object.assign({ className: 'display-flex flex-column flex-1-1' }, { children: [title && _jsx("div", Object.assign({ className: 'tooltip-title' }, { children: title })), content && _jsx("div", Object.assign({ className: 'tooltip-content' }, { children: content }))] })), showCloseIcon && _jsx("span", { className: 'tooltip-close rioglyph rioglyph-remove' })] })) })));
-    const trigger = (_jsx(OverlayTrigger, 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;
-}
-OnboardingTip.AUTO_START = Tooltip.AUTO_START;
-OnboardingTip.AUTO = Tooltip.AUTO;
-OnboardingTip.AUTO_END = Tooltip.AUTO_END;
-OnboardingTip.TOP_START = Tooltip.TOP_START;
-OnboardingTip.TOP = Tooltip.TOP;
-OnboardingTip.TOP_END = Tooltip.TOP_END;
-OnboardingTip.BOTTOM_START = Tooltip.BOTTOM_START;
-OnboardingTip.BOTTOM = Tooltip.BOTTOM;
-OnboardingTip.BOTTOM_END = Tooltip.BOTTOM_END;
-OnboardingTip.RIGHT_START = Tooltip.RIGHT_START;
-OnboardingTip.RIGHT = Tooltip.RIGHT;
-OnboardingTip.RIGHT_END = Tooltip.RIGHT_END;
-OnboardingTip.LEFT_START = Tooltip.LEFT_START;
-OnboardingTip.LEFT = Tooltip.LEFT;
-OnboardingTip.LEFT_END = Tooltip.LEFT_END;
-export const OnboardingTipPlacementType = PropTypes.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,
-]);
+import { PLACEMENT } from '../../values/Placement';
+const OnboardingTip = (props) => {
+    const { id, show = false, placement = PLACEMENT.BOTTOM, title, content, onHide = noop, children, textAlignment = TEXT_ALIGNMENT.LEFT, useInDialog = false, showCloseIcon = true, clickflow = false, previousButton, nextButton, className = '', width, preventOverflow = true, popperConfig, } = props;
+    const clickFlowWithButtons = (_jsxs("div", Object.assign({ className: 'display-flex flex-column gap-25' }, { children: [_jsx("div", { children: content }), _jsxs("div", Object.assign({ className: `btn-toolbar justify-content-between ${showCloseIcon ? 'margin-right--25' : ''}` }, { children: [previousButton ? (_jsxs("div", Object.assign({ className: 'position-relative' }, { children: [_jsx("div", { className: 'bg-black opacity-10 rounded display-absolute inset-0' }), _jsxs(Button, Object.assign({ bsStyle: Button.SECONDARY, variant: Button.VARIANT_OUTLINE, className: 'border-none text-color-white', onClick: previousButton.onClick }, { children: [previousButton.iconName && (_jsx("span", { className: `rioglyph ${previousButton.iconName} text-color-white` })), _jsx("span", { children: previousButton.text })] }))] }))) : (_jsx("div", {})), nextButton ? (_jsxs(Button, Object.assign({ bsStyle: Button.SECONDARY, variant: Button.VARIANT_OUTLINE, className: 'border-color-white text-color-white', onClick: nextButton.onClick, iconRight: true }, { children: [_jsx("span", { children: nextButton.text }), nextButton.iconName && _jsx("span", { className: `rioglyph ${nextButton.iconName} text-color-white` })] }))) : (_jsx("div", {}))] }))] })));
+    const tooltipWrapperClasses = classNames(useInDialog && 'z-index-max', className && className, clickflow && 'onboarding-clickflow');
+    const overlay = (_jsx(Tooltip, Object.assign({ className: tooltipWrapperClasses, tooltipStyle: Tooltip.STYLE_ONBOARDING, id: id, onClick: onHide, width: width, textAlignment: textAlignment, allowOnTouch: true }, { children: _jsxs("div", Object.assign({ className: 'display-flex' }, { children: [_jsxs("div", Object.assign({ className: 'display-flex flex-column flex-1-1' }, { children: [title && _jsx("div", Object.assign({ className: 'tooltip-title' }, { children: title })), content && _jsx("div", Object.assign({ className: 'tooltip-content' }, { children: clickflow ? clickFlowWithButtons : content }))] })), showCloseIcon && _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 = (_jsx(OverlayTrigger, Object.assign({ placement: placement, trigger: 'click', overlay: overlay, onToggle: onHide, show: show, rootClose: false, popperConfig: actualPopperConfig }, { children: children })));
+    return show ? trigger : _jsx(_Fragment, { children: children });
+};
+OnboardingTip.AUTO_START = PLACEMENT.AUTO_START;
+OnboardingTip.AUTO = PLACEMENT.AUTO;
+OnboardingTip.AUTO_END = PLACEMENT.AUTO_END;
+OnboardingTip.TOP_START = PLACEMENT.TOP_START;
+OnboardingTip.TOP = PLACEMENT.TOP;
+OnboardingTip.TOP_END = PLACEMENT.TOP_END;
+OnboardingTip.BOTTOM_START = PLACEMENT.BOTTOM_START;
+OnboardingTip.BOTTOM = PLACEMENT.BOTTOM;
+OnboardingTip.BOTTOM_END = PLACEMENT.BOTTOM_END;
+OnboardingTip.RIGHT_START = PLACEMENT.RIGHT_START;
+OnboardingTip.RIGHT = PLACEMENT.RIGHT;
+OnboardingTip.RIGHT_END = PLACEMENT.RIGHT_END;
+OnboardingTip.LEFT_START = PLACEMENT.LEFT_START;
+OnboardingTip.LEFT = PLACEMENT.LEFT;
+OnboardingTip.LEFT_END = PLACEMENT.LEFT_END;
 OnboardingTip.TEXT_ALIGNMENT_LEFT = TEXT_ALIGNMENT.LEFT;
 OnboardingTip.TEXT_ALIGNMENT_CENTER = TEXT_ALIGNMENT.CENTER;
 OnboardingTip.TEXT_ALIGNMENT_RIGHT = 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: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    show: PropTypes.bool.isRequired,
-    showCloseIcon: PropTypes.bool,
-    textAlignment: PropTypes.oneOf([
-        OnboardingTip.TEXT_ALIGNMENT_LEFT,
-        OnboardingTip.TEXT_ALIGNMENT_CENTER,
-        OnboardingTip.TEXT_ALIGNMENT_RIGHT,
-    ]),
-    onHide: PropTypes.func.isRequired,
-    useInDialog: PropTypes.bool,
-    title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    className: PropTypes.string,
-    clickflow: PropTypes.bool,
-    // clickflowBackdrop: PropTypes.bool,
-    placement: OnboardingTipPlacementType,
-    width: PropTypes.oneOf(['auto', 100, 150, 200, 250, 300, 350, 400, 450, 500]),
-    preventOverflow: PropTypes.bool,
-    popperConfig: PropTypes.object,
-};
+export default OnboardingTip;

package/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/components/page/Page.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+import classNames from 'classnames';
+const Page = (props) => {
+    const { className, width, orientation = 'portrait', shadow = true, border = false, children } = props;
+    const wrapperClassNames = classNames('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 (_jsx("div", Object.assign({ className: wrapperClassNames, style: style }, { children: children })));
+};
+export default Page;

package/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/components/popover/Popover.js

@@ -1,23 +1,18 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import PropTypes from 'prop-types';
-import { default as _Popover } from 'react-bootstrap/Popover';
-import Tooltip from '../tooltip/Tooltip';
-const Popover = React.forwardRef((props, ref) => {
+import { forwardRef } from 'react';
+import { default as RBPopover } from 'react-bootstrap/Popover';
+import { PLACEMENT } from '../../values/Placement';
+const PLACEMENT_MAP = {
+    AUTO: PLACEMENT.AUTO,
+    TOP: PLACEMENT.TOP,
+    RIGHT: PLACEMENT.RIGHT,
+    BOTTOM: PLACEMENT.BOTTOM,
+    LEFT: PLACEMENT.LEFT,
+};
+const Popover = forwardRef((props, ref) => {
     const { title, titleClassName = '', contentClassName = '', children } = props, remainingProps = __rest(props, ["title", "titleClassName", "contentClassName", "children"]);
-    return (_jsxs(_Popover, Object.assign({ ref: ref }, remainingProps, { children: [title && _jsx(_Popover.Title, Object.assign({ className: `popover-title ${titleClassName}` }, { children: title })), children && (_jsx(_Popover.Content, Object.assign({ className: `popover-content ${contentClassName}` }, { children: children })))] })));
+    return (_jsxs(RBPopover, Object.assign({ ref: ref }, remainingProps, { children: [title && _jsx(RBPopover.Title, Object.assign({ className: `popover-title ${titleClassName}` }, { children: title })), children && (_jsx(RBPopover.Content, Object.assign({ className: `popover-content ${contentClassName}` }, { children: children })))] })));
 });
-Popover.AUTO = Tooltip.AUTO;
-Popover.TOP = Tooltip.TOP;
-Popover.BOTTOM = Tooltip.BOTTOM;
-Popover.RIGHT = Tooltip.RIGHT;
-Popover.LEFT = Tooltip.LEFT;
-Popover.propTypes = {
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-    title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    children: PropTypes.node.isRequired,
-    titleClassName: PropTypes.string,
-    contentClassName: PropTypes.string,
-};
+Object.assign(Popover, PLACEMENT_MAP);
 export default Popover;

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