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

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