@rio-cloud/rio-uikit 1.4.0 → 1.5.0

package/components/smoothScrollbars/SmoothScrollbars.js

@@ -1,17 +1,42 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 // @ts-ignore-next-line importsNotUsedAsValues
-import { forwardRef } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useRef, } from 'react';
 import { Scrollbars } from 'react-custom-scrollbars-2';
 import classNames from 'classnames';
 import noop from 'lodash/fp/noop';
+import debounce from 'lodash/fp/debounce';
+const RESIZE_THROTTLING = 100;
 const SmoothScrollbars = forwardRef((componentProps, ref) => {
     const { slideIn = false, largeTrack = false, trackOffset = false, className = '', onScroll = noop, tagName = 'div', autoHeight = false, autoHeightMin = 0, autoHeightMax = 200, children, } = componentProps;
+    const scrollbarsRef = useRef(null);
+    const contentRef = useRef(null);
+    useImperativeHandle(ref, () => scrollbarsRef.current);
+    useEffect(() => {
+        if (!contentRef.current || !scrollbarsRef.current) {
+            return;
+        }
+        const updateScrollbars = debounce(RESIZE_THROTTLING)(() => {
+            if (scrollbarsRef.current) {
+                // Trigger a update for the scrollbars.
+                // This is needed since the lib does not automatically update on content height changes
+                // See: https://github.com/RobPethick/react-custom-scrollbars-2/issues/12
+                // Use type assertion to tell TypeScript that 'update' exists
+                scrollbarsRef.current.update();
+            }
+        });
+        const resizeObserver = new ResizeObserver(updateScrollbars);
+        resizeObserver.observe(contentRef.current);
+        return () => {
+            resizeObserver.disconnect();
+            updateScrollbars.cancel();
+        };
+    }, []);
     const wrapperClassNames = classNames(className, slideIn && 'scrollbar-fly-in', 'smooth-scrollbar-wrapper');
     const renderTrackVerticalNames = classNames('scrollbar-track-vertical', largeTrack && 'scrollbar-track-size-large', trackOffset && 'scrollbar-track-offset');
     const renderThumbVerticalNames = classNames('scrollbar-thumb-vertical', largeTrack && 'scrollbar-thumb-size-large');
     const renderTrackHorizontalNames = classNames('scrollbar-track-horizontal', largeTrack && 'scrollbar-track-size-large', trackOffset && 'scrollbar-track-offset');
     const renderThumbHorizontalNames = classNames('scrollbar-thumb-horizontal', largeTrack && 'scrollbar-thumb-size-large');
-    return (_jsx(Scrollbars, Object.assign({ ref: ref, tagName: tagName, onScroll: onScroll, className: wrapperClassNames, hideTracksWhenNotNeeded: true, autoHeight: autoHeight, autoHeightMin: autoHeightMin, autoHeightMax: autoHeightMax, renderView: props => {
+    return (_jsx(Scrollbars, Object.assign({ ref: scrollbarsRef, tagName: tagName, onScroll: onScroll, className: wrapperClassNames, hideTracksWhenNotNeeded: true, autoHeight: autoHeight, autoHeightMin: autoHeightMin, autoHeightMax: autoHeightMax, renderView: props => {
             return _jsx("div", Object.assign({}, props, { className: 'scrollbar-view' }));
         }, renderTrackVertical: props => {
             return _jsx("div", Object.assign({}, props, { className: renderTrackVerticalNames }));
@@ -21,6 +46,6 @@ const SmoothScrollbars = forwardRef((componentProps, ref) => {
             return _jsx("div", Object.assign({}, props, { className: renderTrackHorizontalNames }));
         }, renderThumbHorizontal: props => {
             return _jsx("div", Object.assign({}, props, { className: renderThumbHorizontalNames }));
-        } }, { children: children })));
+        } }, { children: _jsx("div", Object.assign({ className: 'scrollbar-content-wrapper', ref: contentRef }, { children: children })) })));
 });
 export default SmoothScrollbars;

package/components/switch/Switch.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import React from 'react';
 import { type CurrentColor } from '../../utils/currentColors';
 export type SwitchProps = {
     /**
@@ -46,9 +46,10 @@ export type SwitchProps = {
      */
     labelPosition?: 'left' | 'right';
 };
-declare const Switch: {
-    (props: PropsWithChildren<SwitchProps>): import("react/jsx-runtime").JSX.Element;
-    LABEL_POSITION_LEFT: "left";
-    LABEL_POSITION_RIGHT: "right";
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>> & {
+    LABEL_POSITION_LEFT: 'left';
+    LABEL_POSITION_RIGHT: 'right';
 };
 export default Switch;

package/components/switch/Switch.js

@@ -1,12 +1,12 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
+import { forwardRef } from 'react';
 import classNames from 'classnames';
 import noop from 'lodash/fp/noop';
 import { getCurrentBackgroundColor } from '../../utils/currentColors';
-const Switch = (props) => {
-    const { keyName, checked = false, enabledText, minWidth = 40, disabled = false, color = 'primary', disabledText, children, labelPosition = !!children ? 'right' : undefined, onChange = noop } = props, remainingProps = __rest(props, ["keyName", "checked", "enabledText", "minWidth", "disabled", "color", "disabledText", "children", "labelPosition", "onChange"]);
+const Switch = forwardRef((props, ref) => {
+    const { keyName, checked = false, enabledText, minWidth = 40, disabled = false, color = 'primary', disabledText, children, labelPosition = children ? 'right' : undefined, onChange = noop } = props, remainingProps = __rest(props, ["keyName", "checked", "enabledText", "minWidth", "disabled", "color", "disabledText", "children", "labelPosition", "onChange"]);
     const handleChange = (event) => {
         onChange(event.target.checked);
     };
@@ -17,8 +17,8 @@ const Switch = (props) => {
     // !hasMultipleText && !hasSingleText && 'width-40'
     );
     const switchBackgroundColor = getCurrentBackgroundColor(color);
-    return (_jsx("div", Object.assign({}, remainingProps, { className: 'uikit-switch' }, { children: _jsxs("label", Object.assign({ className: switchLabelClasses }, { children: [_jsx("input", { onChange: handleChange, checked: checked, type: 'checkbox', id: keyName, className: 'switch-input', disabled: disabled }, keyName), _jsxs("div", Object.assign({ className: switchContentClasses, style: { color: switchBackgroundColor, minWidth } }, { children: [hasMultipleText ? (_jsx("div", { className: 'switch-text', "data-on": enabledText, "data-off": disabledText })) : (hasSingleText && _jsx("div", { className: 'switch-text', "data-on": enabledText, "data-off": enabledText })), _jsx("div", { className: 'switch-handle' })] })), children && children] })) })));
-};
+    return (_jsx("div", Object.assign({ ref: ref }, remainingProps, { className: 'uikit-switch' }, { children: _jsxs("label", Object.assign({ className: switchLabelClasses }, { children: [_jsx("input", { onChange: handleChange, checked: checked, type: 'checkbox', id: keyName, className: 'switch-input', disabled: disabled }, keyName), _jsxs("div", Object.assign({ className: switchContentClasses, style: { color: switchBackgroundColor, minWidth } }, { children: [hasMultipleText ? (_jsx("div", { className: 'switch-text', "data-on": enabledText, "data-off": disabledText })) : (hasSingleText && _jsx("div", { className: 'switch-text', "data-on": enabledText, "data-off": enabledText })), _jsx("div", { className: 'switch-handle' })] })), children && children] })) })));
+});
 Switch.LABEL_POSITION_LEFT = 'left';
 Switch.LABEL_POSITION_RIGHT = 'right';
 export default Switch;

package/components/tag/Tag.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import React from 'react';
 export type TagProps = {
     /**
      * Defines if the tag is active.
@@ -65,5 +65,5 @@ export type TagProps = {
      */
     className?: string;
 };
-declare const Tag: (props: PropsWithChildren<TagProps>) => import("react/jsx-runtime").JSX.Element;
+declare const Tag: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<TagProps>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Tag;

package/components/tag/Tag.js

@@ -1,12 +1,11 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 // @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
+import { forwardRef } from 'react';
 import classNames from 'classnames';
-const Tag = (props) => {
+const Tag = forwardRef((props, ref) => {
     const { children, icon, active = false, disabled = false, clickable = false, selectable = false, deletable = false, revertable = false, multiline = false, muted = false, round = true, size, className } = props, remainingProps = __rest(props, ["children", "icon", "active", "disabled", "clickable", "selectable", "deletable", "revertable", "multiline", "muted", "round", "size", "className"]);
-    const tagClasses = classNames('tag', size === 'small' && 'tag-small', icon && `rioglyph ${icon}`, active && 'active clickable rioglyph rioglyph-ok', disabled && 'disabled', clickable && 'clickable', selectable && 'selectable clickable rioglyph rioglyph-checkbox', deletable && 'deletable clickable rioglyph rioglyph-remove', revertable && 'revertable clickable rioglyph rioglyph-revert', multiline && 'multiline', muted && 'tag-muted', !round && 'rounded', // sounds wrong, but is right
-    props.className);
-    return (_jsx("div", Object.assign({}, remainingProps, { className: tagClasses }, { children: _jsx("div", Object.assign({ className: 'tag-inner' }, { children: children })) })));
-};
+    const tagClasses = classNames('tag', size === 'small' && 'tag-small', icon && `rioglyph ${icon}`, active && 'active clickable rioglyph rioglyph-ok', disabled && 'disabled', clickable && 'clickable', selectable && 'selectable clickable rioglyph rioglyph-checkbox', deletable && 'deletable clickable rioglyph rioglyph-remove', revertable && 'revertable clickable rioglyph rioglyph-revert', multiline && 'multiline', muted && 'tag-muted', !round && 'rounded', className);
+    return (_jsx("div", Object.assign({ ref: ref }, remainingProps, { className: tagClasses }, { children: _jsx("div", Object.assign({ className: 'tag-inner' }, { children: children })) })));
+});
 export default Tag;

package/hooks/useDOMNodeCount.d.ts

@@ -0,0 +1,2 @@
+declare const useDOMNodeCount: () => number;
+export default useDOMNodeCount;

package/hooks/useDOMNodeCount.js

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+const useDOMNodeCount = () => {
+    const [nodeCount, setNodeCount] = useState(0);
+    useEffect(() => {
+        const countNodes = () => {
+            const body = document.body;
+            if (body) {
+                setNodeCount(body.getElementsByTagName('*').length);
+            }
+        };
+        // Initial count
+        countNodes();
+        // Create a MutationObserver to watch for changes in the DOM
+        const observer = new MutationObserver(() => {
+            countNodes();
+        });
+        // Observe the body element for changes in the child list or subtree
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+        // Cleanup on unmount
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
+    return nodeCount;
+};
+export default useDOMNodeCount;

package/hooks/useEventListenerCount.d.ts

@@ -0,0 +1,5 @@
+declare const useEventListenerCount: () => {
+    counts: Record<string, number>;
+    total: number;
+};
+export default useEventListenerCount;

package/hooks/useEventListenerCount.js

@@ -0,0 +1,42 @@
+import { useState, useEffect } from 'react';
+import throttle from 'lodash/fp/throttle';
+const useEventListenerCount = () => {
+    const [listenerCounts, setListenerCounts] = useState({});
+    const [totalCount, setTotalCount] = useState(0);
+    useEffect(() => {
+        console.log('init useEventListener interceptor');
+        const eventListeners = new Set();
+        const originalAddEventListener = EventTarget.prototype.addEventListener;
+        const originalRemoveEventListener = EventTarget.prototype.removeEventListener;
+        const updateListeners = throttle(1000)(() => {
+            const counts = Array.from(eventListeners).reduce((acc, { type }) => {
+                acc[type] = (acc[type] || 0) + 1;
+                return acc;
+            }, {});
+            setListenerCounts(counts);
+            setTotalCount(eventListeners.size);
+        });
+        EventTarget.prototype.addEventListener = function (type, listener, options) {
+            if (listener) {
+                eventListeners.add({ type, listener });
+                updateListeners();
+            }
+            originalAddEventListener.call(this, type, listener, options);
+        };
+        EventTarget.prototype.removeEventListener = function (type, listener, options) {
+            eventListeners.forEach(item => {
+                if (item.type === type && item.listener === listener) {
+                    eventListeners.delete(item);
+                }
+            });
+            updateListeners();
+            originalRemoveEventListener.call(this, type, listener, options);
+        };
+        return () => {
+            EventTarget.prototype.addEventListener = originalAddEventListener;
+            EventTarget.prototype.removeEventListener = originalRemoveEventListener;
+        };
+    }, []);
+    return { counts: listenerCounts, total: totalCount };
+};
+export default useEventListenerCount;

package/hooks/useSorting.d.ts

@@ -0,0 +1,29 @@
+import { type SortDirectionType } from '../utils/SortUtils';
+type SortKey<T> = keyof T | [keyof T, keyof T];
+type UseSortingResult<T> = {
+    /**
+     * The sorted data
+     */
+    sortedItems: T[];
+    /**
+     * The key(s) to sort the data for
+     */
+    sortKey: SortKey<T>;
+    /**
+     * The current direction that the data is sorted
+     */
+    sortDirection: SortDirectionType;
+    /**
+     * Function to change the sorting key(s) afterwards
+     * @param newKey the new sorting key(s)
+     * @returns
+     */
+    setSortKey: (newKey: SortKey<T>) => void;
+    /**
+     * Function to toggle the sorting between ascending and descending order
+     * @returns
+     */
+    toggleDirection: () => void;
+};
+declare const useSorting: <T>(items: T[], initialKey: SortKey<T>, initialDirection?: SortDirectionType, enableNaturalSort?: boolean, isCaseSensitive?: boolean) => UseSortingResult<T>;
+export default useSorting;

package/hooks/useSorting.js

@@ -0,0 +1,41 @@
+import { useState, useMemo } from 'react';
+import { naturalSortByProperty, SortDirection } from '../utils/SortUtils';
+const useSorting = (items, initialKey, initialDirection = SortDirection.ASCENDING, enableNaturalSort = true, isCaseSensitive = false) => {
+    const [sortKey, setSortKey] = useState(initialKey);
+    const [sortDirection, setSortDirection] = useState(initialDirection);
+    const sortedItems = useMemo(() => {
+        const sortByKey = (arr, key) => {
+            return enableNaturalSort
+                ? naturalSortByProperty(arr, key, sortDirection, isCaseSensitive)
+                : arr.sort((a, b) => {
+                    const aVal = a[key];
+                    const bVal = b[key];
+                    if (aVal < bVal)
+                        return sortDirection === SortDirection.ASCENDING ? -1 : 1;
+                    if (aVal > bVal)
+                        return sortDirection === SortDirection.ASCENDING ? 1 : -1;
+                    return 0;
+                });
+        };
+        if (Array.isArray(sortKey)) {
+            const [primaryKey, secondaryKey] = sortKey;
+            const primarySorted = sortByKey(items, primaryKey);
+            // Group items with the same primary key value
+            const groups = primarySorted.reduce((acc, item) => {
+                const key = String(item[primaryKey]);
+                if (!acc[key])
+                    acc[key] = [];
+                acc[key].push(item);
+                return acc;
+            }, {});
+            // Sort each group by the secondary key and flatten the result
+            return Object.values(groups).flatMap(group => sortByKey(group, secondaryKey));
+        }
+        return sortByKey(items, sortKey);
+    }, [items, sortKey, sortDirection, enableNaturalSort, isCaseSensitive]);
+    const toggleDirection = () => {
+        setSortDirection(prev => prev === SortDirection.ASCENDING ? SortDirection.DESCENDING : SortDirection.ASCENDING);
+    };
+    return { sortedItems, sortKey, sortDirection, setSortKey, toggleDirection };
+};
+export default useSorting;

package/lib/es/FadeExpander.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/fade/FadeExpander';
+export * from './components/fade/FadeExpander';

package/lib/es/FadeExpander.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var FadeExpander_1 = require("./components/fade/FadeExpander");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(FadeExpander_1).default; } });
+tslib_1.__exportStar(require("./components/fade/FadeExpander"), exports);

package/lib/es/FadeUp.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/fade/FadeUp';
+export * from './components/fade/FadeUp';

package/lib/es/FadeUp.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var FadeUp_1 = require("./components/fade/FadeUp");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(FadeUp_1).default; } });
+tslib_1.__exportStar(require("./components/fade/FadeUp"), exports);

package/lib/es/XAxis.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/charts/XAxis';
+export * from './components/charts/XAxis';

package/lib/es/XAxis.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var XAxis_1 = require("./components/charts/XAxis");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(XAxis_1).default; } });
+tslib_1.__exportStar(require("./components/charts/XAxis"), exports);

package/lib/es/YAxis.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/charts/YAxis';
+export * from './components/charts/YAxis';

package/lib/es/YAxis.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var YAxis_1 = require("./components/charts/YAxis");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(YAxis_1).default; } });
+tslib_1.__exportStar(require("./components/charts/YAxis"), exports);

package/lib/es/components/applicationLayout/ApplicationLayoutBody.d.ts

@@ -12,6 +12,11 @@ export type ApplicationLayoutBodyProps = {
      * @default true
      */
     forceScrollbar?: boolean;
+    /**
+     * Prop to trigger scroll reset from outside. This comes in handy when changing the body content
+     * and to reset the scrolling like when the pathname changes from an body internal menu.
+     */
+    scrollResetTrigger?: any;
     /**
      * The ApplicationLayoutBodyBanner component.
      */

package/lib/es/components/applicationLayout/ApplicationLayoutBody.js

@@ -9,11 +9,20 @@ const SmoothScrollbars_1 = tslib_1.__importDefault(require("../smoothScrollbars/
 const RESIZE_THROTTLING = 200;
 const DEFAULT_BOTTOM_BAR_HEIGHT = 54;
 const ApplicationLayoutBody = (0, react_1.forwardRef)((props, ref) => {
-    const { className, innerClassName, forceScrollbar = true, enableScrollToTop = true, banner, navigation, bottomBar, bottomBarHeight = DEFAULT_BOTTOM_BAR_HEIGHT, children } = props, remainingProps = tslib_1.__rest(props, ["className", "innerClassName", "forceScrollbar", "enableScrollToTop", "banner", "navigation", "bottomBar", "bottomBarHeight", "children"]);
+    const { className, innerClassName, forceScrollbar = true, enableScrollToTop = true, banner, navigation, bottomBar, bottomBarHeight = DEFAULT_BOTTOM_BAR_HEIGHT, scrollResetTrigger, children } = props, remainingProps = tslib_1.__rest(props, ["className", "innerClassName", "forceScrollbar", "enableScrollToTop", "banner", "navigation", "bottomBar", "bottomBarHeight", "scrollResetTrigger", "children"]);
     const [offset, setOffset] = (0, react_1.useState)(0);
     const moduleContentRef = (0, react_1.useRef)(null);
     const layoutBodyRef = (0, react_1.useRef)(null);
     (0, react_1.useImperativeHandle)(ref, () => layoutBodyRef, []);
+    // Reset scroll position when children are different. This fixes the issue of
+    // changing body content (like in another route) and still having the same scroll position
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+    (0, react_1.useEffect)(() => {
+        if (moduleContentRef.current) {
+            moduleContentRef.current.scrollTop(0);
+            setOffset(0);
+        }
+    }, [scrollResetTrigger]);
     (0, react_1.useEffect)(() => {
         var _a;
         if (((_a = layoutBodyRef.current) === null || _a === void 0 ? void 0 : _a.parentNode) instanceof HTMLElement) {

package/lib/es/components/charts/Area.d.ts

@@ -1,12 +1,20 @@
-/// <reference types="react" />
 import type { AreaProps as RechartsAreaProps } from 'recharts';
+import type { CurveType } from 'recharts/types/shape/Curve';
 export type AreaProps = Omit<RechartsAreaProps, 'ref'> & {
     strokeColor?: string;
     dataKey?: string;
     unit?: string;
     legendType?: string;
-    type?: string;
+    type?: CurveType;
     isAnimationActive?: boolean;
 };
-declare const Area: React.FC<AreaProps>;
+export declare const getAreaDefaultProps: () => {
+    dataKey: string;
+    unit: string;
+    strokeColor: string;
+    legendType: string;
+    type: string;
+    isAnimationActive: boolean;
+};
+declare const Area: (props: AreaProps) => null;
 export default Area;

package/lib/es/components/charts/Area.js

@@ -1,4 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const Area = ({ dataKey = 'value', unit = '', strokeColor = 'color-coldplay-fountain', legendType = 'square', type = 'monotone', isAnimationActive = true, }) => null;
+exports.getAreaDefaultProps = void 0;
+const getAreaDefaultProps = () => ({
+    dataKey: 'value',
+    unit: '',
+    strokeColor: 'color-coldplay-fountain',
+    legendType: 'square',
+    type: 'monotone',
+    isAnimationActive: true,
+});
+exports.getAreaDefaultProps = getAreaDefaultProps;
+const Area = (props) => null;
 exports.default = Area;

package/lib/es/components/charts/AreaChart.d.ts

@@ -3,10 +3,10 @@ import { AreaChart as RechartsAreaChart, type XAxisProps, type YAxisProps } from
 import { type AreaGradientProps } from './AreaGradient';
 import { type ChartTooltipProps } from './ChartTooltip';
 import { type LegendProps } from './Legend';
-import type { AreaProps } from './Area';
+import { type AreaProps } from './Area';
 import type { GridProps } from './ChartGrid';
 import type { ResponsiveContainerProps } from './ResponsiveContainer';
-import type { ReferenceLineProps } from './ReferenceLine';
+import { type ReferenceLineProps } from './ReferenceLine';
 type RechartsAreaChartProps = React.ComponentProps<typeof RechartsAreaChart>;
 export type AreaChartProps<T extends object> = Omit<RechartsAreaChartProps, 'data'> & {
     width?: number;
@@ -19,11 +19,12 @@ export type AreaChartProps<T extends object> = Omit<RechartsAreaChartProps, 'dat
     referenceLines?: React.ReactElement<ReferenceLineProps>[];
     xAxisOptions?: XAxisProps;
     yAxisOptions?: YAxisProps;
+    additionalAxes?: React.ReactElement<XAxisProps | YAxisProps>[];
     gridOptions?: GridProps;
+    showGrid?: boolean;
     containerOptions?: ResponsiveContainerProps;
     showXAxis?: boolean;
     showYAxis?: boolean;
-    showGrid?: boolean;
     legend?: React.ReactElement<LegendProps> | boolean;
     tooltip?: React.ReactElement<ChartTooltipProps> | boolean;
     brush?: boolean;

package/lib/es/components/charts/AreaChart.js

@@ -11,22 +11,23 @@ const chartHelper_1 = require("./chartHelper");
 const AreaGradient_1 = tslib_1.__importStar(require("./AreaGradient"));
 const ChartTooltip_1 = tslib_1.__importDefault(require("./ChartTooltip"));
 const Legend_1 = require("./Legend");
+const XAxis_1 = require("./XAxis");
+const Area_1 = require("./Area");
+const ReferenceLine_1 = require("./ReferenceLine");
 const AreaChart = (props) => {
-    const { width, height, data = [], dataUnit = '', dataKey = 'value', gradients = [], areas = [], referenceLines = [], xAxisOptions, yAxisOptions, gridOptions, containerOptions, showXAxis = true, showYAxis = false, showGrid = false, legend, brush = false, tooltip = true } = props, remainingProps = tslib_1.__rest(props, ["width", "height", "data", "dataUnit", "dataKey", "gradients", "areas", "referenceLines", "xAxisOptions", "yAxisOptions", "gridOptions", "containerOptions", "showXAxis", "showYAxis", "showGrid", "legend", "brush", "tooltip"]);
+    const { width, height, data = [], dataUnit = '', dataKey = 'value', gradients = [], areas = [], referenceLines = [], xAxisOptions, yAxisOptions, gridOptions, containerOptions, showXAxis = true, showYAxis = false, additionalAxes = [], showGrid = false, legend, brush = false, tooltip = true } = props, remainingProps = tslib_1.__rest(props, ["width", "height", "data", "dataUnit", "dataKey", "gradients", "areas", "referenceLines", "xAxisOptions", "yAxisOptions", "gridOptions", "containerOptions", "showXAxis", "showYAxis", "additionalAxes", "showGrid", "legend", "brush", "tooltip"]);
     const areasWithGradient = areas.map(area => {
-        const _a = area.props, { strokeColor } = _a, remainingAreaProps = tslib_1.__rest(_a, ["strokeColor"]);
+        const areaPropsWithDefault = Object.assign(Object.assign({}, (0, Area_1.getAreaDefaultProps)()), area.props);
+        const { strokeColor } = areaPropsWithDefault, remainingAreaProps = tslib_1.__rest(areaPropsWithDefault, ["strokeColor"]);
         const gradientId = area.key;
         const stroke = (0, chartHelper_1.getColor)(strokeColor);
         return {
-            area: (0, react_1.createElement)(recharts_1.Area, Object.assign({}, remainingAreaProps, { key: area.key, stroke: stroke, fill: `url(#${gradientId})` })),
+            area: ((0, react_1.createElement)(recharts_1.Area, Object.assign({}, remainingAreaProps, { key: area.key, stroke: stroke, fill: `url(#${gradientId})` }))),
             gradient: (0, jsx_runtime_1.jsx)(AreaGradient_1.default, { id: gradientId || AreaGradient_1.DEFAULT_ARIA_GRADIENT_ID, color: strokeColor }, area.key),
         };
     });
     const tooltipProps = (0, isObject_1.default)(tooltip) ? tooltip.props : {};
     const legendProps = (0, isObject_1.default)(legend) ? Object.assign(Object.assign({}, (0, Legend_1.getLegendDefaultProps)()), legend.props) : {};
-    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, Object.assign({}, containerOptions, { children: (0, jsx_runtime_1.jsxs)(recharts_1.AreaChart, Object.assign({ width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 } }, remainingProps, { children: [(0, jsx_runtime_1.jsxs)("defs", { children: [gradients, areasWithGradient.map(areaWithGradient => areaWithGradient.gradient)] }), showGrid && (0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, (0, chartHelper_1.mapGridOptions)(gridOptions))), (0, jsx_runtime_1.jsx)(recharts_1.XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), tooltip && (0, jsx_runtime_1.jsx)(ChartTooltip_1.default, Object.assign({}, tooltipProps)), legend && legendProps && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(recharts_1.Legend, Object.assign({ wrapperStyle: legendProps.verticalAlign === 'bottom' ? { bottom: 0 } : legendProps.wrapperStyle }, legendProps)) })), areasWithGradient.map(areaWithGradient => areaWithGradient.area), referenceLines.map(referenceLine => {
-                    const _a = referenceLine.props, { stroke } = _a, remainingReferenceLineProps = tslib_1.__rest(_a, ["stroke"]);
-                    return ((0, react_1.createElement)(recharts_1.ReferenceLine, Object.assign({}, remainingReferenceLineProps, { key: referenceLine.key, stroke: (0, chartHelper_1.getColor)(stroke) })));
-                }), brush && (0, jsx_runtime_1.jsx)(recharts_1.Brush, { stroke: (0, chartHelper_1.getColor)('gray') })] })) })));
+    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, Object.assign({}, containerOptions, { children: (0, jsx_runtime_1.jsxs)(recharts_1.AreaChart, Object.assign({ width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 } }, remainingProps, { children: [(0, jsx_runtime_1.jsxs)("defs", { children: [gradients, areasWithGradient.map(areaWithGradient => areaWithGradient.gradient)] }), showGrid && (0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, (0, chartHelper_1.mapGridOptions)(gridOptions))), (0, jsx_runtime_1.jsx)(recharts_1.XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), additionalAxes.map(XAxis_1.renderAxis), tooltip && (0, jsx_runtime_1.jsx)(ChartTooltip_1.default, Object.assign({}, tooltipProps)), legend && legendProps && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(recharts_1.Legend, Object.assign({ wrapperStyle: legendProps.verticalAlign === 'bottom' ? { bottom: 0 } : legendProps.wrapperStyle }, legendProps)) })), areasWithGradient.map(areaWithGradient => areaWithGradient.area), referenceLines.map(ReferenceLine_1.renderReferenceLine), brush && (0, jsx_runtime_1.jsx)(recharts_1.Brush, { stroke: (0, chartHelper_1.getColor)('gray') })] })) })));
 };
 exports.default = AreaChart;

package/lib/es/components/charts/Bar.d.ts

@@ -1,5 +1,9 @@
-/// <reference types="react" />
 import type { BarProps as RechartsBarProps } from 'recharts';
 export type BarProps = Omit<RechartsBarProps, 'ref'> & {};
-declare const Bar: React.FC<BarProps>;
+export declare const getBarDefaultProps: () => {
+    dataKey: string;
+    color: string;
+    isAnimationActive: boolean;
+};
+declare const Bar: (props: BarProps) => null;
 export default Bar;

package/lib/es/components/charts/Bar.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const Bar = () => null;
-Bar.defaultProps = {
+exports.getBarDefaultProps = void 0;
+const getBarDefaultProps = () => ({
     dataKey: 'value',
-    unit: '',
     color: 'color-coldplay-fountain',
     isAnimationActive: true,
-};
+});
+exports.getBarDefaultProps = getBarDefaultProps;
+const Bar = (props) => null;
 exports.default = Bar;

package/lib/es/components/charts/BarChart.d.ts

@@ -3,7 +3,7 @@ import { BarChart as RechartsBarChart, type XAxisProps, type YAxisProps } from '
 import { type DataType } from './chartHelper';
 import { type ChartTooltipProps } from './ChartTooltip';
 import { type LegendProps } from './Legend';
-import type { BarProps } from './Bar';
+import { type BarProps } from './Bar';
 import type { GridProps } from './ChartGrid';
 import type { ResponsiveContainerProps } from './ResponsiveContainer';
 export type BarChartDataType = DataType;
@@ -22,6 +22,7 @@ export type BarChartProps<T extends DataType> = Omit<RechartsBarChartProps, with
     useDataColors?: boolean;
     xAxisOptions?: XAxisProps;
     yAxisOptions?: YAxisProps;
+    additionalAxes?: React.ReactElement<XAxisProps | YAxisProps>[];
     gridOptions?: GridProps;
     containerOptions?: ResponsiveContainerProps;
     legend?: React.ReactElement<LegendProps> | boolean;

package/lib/es/components/charts/BarChart.js

@@ -10,8 +10,10 @@ const isObject_1 = tslib_1.__importDefault(require("lodash/fp/isObject"));
 const chartHelper_1 = require("./chartHelper");
 const ChartTooltip_1 = tslib_1.__importDefault(require("./ChartTooltip"));
 const Legend_1 = require("./Legend");
+const XAxis_1 = require("./XAxis");
+const Bar_1 = require("./Bar");
 const BarChart = (props) => {
-    const { width, height, data = [], dataUnit, dataKey = 'value', layout = 'horizontal', legend = false, bars = [], xAxisOptions, yAxisOptions, gridOptions, containerOptions, showGrid = false, showXAxis = true, showYAxis = true, useDataColors = false, brush = false, tooltip = true } = props, remainingProps = tslib_1.__rest(props, ["width", "height", "data", "dataUnit", "dataKey", "layout", "legend", "bars", "xAxisOptions", "yAxisOptions", "gridOptions", "containerOptions", "showGrid", "showXAxis", "showYAxis", "useDataColors", "brush", "tooltip"]);
+    const { width, height, data = [], dataUnit, dataKey = 'value', layout = 'horizontal', legend = false, bars = [], xAxisOptions, yAxisOptions, additionalAxes = [], gridOptions, containerOptions, showGrid = false, showXAxis = true, showYAxis = true, useDataColors = false, brush = false, tooltip = true } = props, remainingProps = tslib_1.__rest(props, ["width", "height", "data", "dataUnit", "dataKey", "layout", "legend", "bars", "xAxisOptions", "yAxisOptions", "additionalAxes", "gridOptions", "containerOptions", "showGrid", "showXAxis", "showYAxis", "useDataColors", "brush", "tooltip"]);
     const tooltipProps = (0, isObject_1.default)(tooltip) ? tooltip.props : {};
     const legendProps = (0, isObject_1.default)(legend) ? Object.assign(Object.assign({}, (0, Legend_1.getLegendDefaultProps)()), legend.props) : {};
     let legendPayload;
@@ -21,12 +23,14 @@ const BarChart = (props) => {
             return Object.assign(Object.assign({}, entry), { value: (0, isFunction_1.default)(dataKey) ? dataKey(entry) : entry[dataKey], color: legendColor });
         });
     }
-    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, Object.assign({}, containerOptions, { children: (0, jsx_runtime_1.jsxs)(recharts_1.BarChart, Object.assign({ layout: layout, width: width, height: height, data: data }, remainingProps, { children: [showGrid && (0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, (0, chartHelper_1.mapGridOptions)(gridOptions))), (0, jsx_runtime_1.jsx)(recharts_1.XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), tooltip && (0, jsx_runtime_1.jsx)(ChartTooltip_1.default, Object.assign({ cursor: { fill: chartHelper_1.CURSOR_BACKGROUND_COLOR } }, tooltipProps)), legend && (0, jsx_runtime_1.jsx)(recharts_1.Legend, Object.assign({ payload: useDataColors ? legendPayload : undefined }, legendProps)), bars.map(bar => {
-                    const _a = bar.props, { color } = _a, remainingBarProps = tslib_1.__rest(_a, ["color"]);
+    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, Object.assign({}, containerOptions, { children: (0, jsx_runtime_1.jsxs)(recharts_1.BarChart, Object.assign({ layout: layout, width: width, height: height, data: data }, remainingProps, { children: [showGrid && (0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, (0, chartHelper_1.mapGridOptions)(gridOptions))), (0, jsx_runtime_1.jsx)(recharts_1.XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), additionalAxes.map(XAxis_1.renderAxis), tooltip && (0, jsx_runtime_1.jsx)(ChartTooltip_1.default, Object.assign({ cursor: { fill: chartHelper_1.CURSOR_BACKGROUND_COLOR } }, tooltipProps)), legend && (0, jsx_runtime_1.jsx)(recharts_1.Legend, Object.assign({ payload: useDataColors ? legendPayload : undefined }, legendProps)), bars.map(bar => {
+                    const barPropsWithDefault = Object.assign(Object.assign({}, (0, Bar_1.getBarDefaultProps)()), bar.props);
+                    const { color } = barPropsWithDefault, remainingBarProps = tslib_1.__rest(barPropsWithDefault, ["color"]);
                     const cellColor = color && (0, chartHelper_1.getColor)(color);
                     return ((0, jsx_runtime_1.jsx)(recharts_1.Bar, Object.assign({ unit: dataUnit }, remainingBarProps, { fill: cellColor }, { children: useDataColors &&
                             data.map((entry, index) => {
                                 const entryCellColor = (0, chartHelper_1.getColor)(entry.color) || (0, chartHelper_1.getFromDefaultColors)(index);
+                                // biome-ignore lint/suspicious/noArrayIndexKey: unknown key
                                 return (0, jsx_runtime_1.jsx)(recharts_1.Cell, { fill: entryCellColor }, `cell-${index}`);
                             }) }), bar.key));
                 }), brush && (0, jsx_runtime_1.jsx)(recharts_1.Brush, { stroke: (0, chartHelper_1.getColor)('gray') })] })) })));

package/lib/es/components/charts/ComposedChart.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { ComposedChart as RechartsComposedChart, type XAxisProps, type YAxisProps } from 'recharts';
-import { ChartTooltipProps } from './ChartTooltip';
+import { type ChartTooltipProps } from './ChartTooltip';
 import { type LegendProps } from './Legend';
-import type { LineProps } from './Line';
-import type { BarProps } from './Bar';
-import type { ReferenceLineProps } from './ReferenceLine';
+import { type BarProps } from './Bar';
+import { type ReferenceLineProps } from './ReferenceLine';
+import { type LineProps } from './Line';
+import { type AreaProps } from './Area';
 import type { GridProps } from './ChartGrid';
 import type { ResponsiveContainerProps } from './ResponsiveContainer';
-import type { AreaProps } from './Area';
 type RechartsComposedChartProps = React.ComponentProps<typeof RechartsComposedChart>;
 export type ComposedChartProps<T extends object> = Omit<RechartsComposedChartProps, 'data'> & {
     width?: number;
@@ -21,6 +21,7 @@ export type ComposedChartProps<T extends object> = Omit<RechartsComposedChartPro
     referenceLines?: React.ReactElement<ReferenceLineProps>[];
     xAxisOptions?: XAxisProps;
     yAxisOptions?: YAxisProps;
+    additionalAxes?: React.ReactElement<XAxisProps | YAxisProps>[];
     gridOptions?: GridProps;
     containerOptions?: ResponsiveContainerProps;
     showXAxis?: boolean;