@rio-cloud/rio-uikit 1.2.2 → 1.4.0

package/ChartLabel.d.ts

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

package/ChartLabel.js

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

package/ComposedChart.d.ts

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

package/ComposedChart.js

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

package/DateRangePicker.d.ts

@@ -1,12 +1,12 @@
-import type { Component, JSX, PropsWithChildren, ReactNode } from 'react';
+import type { JSX, PropsWithChildren, ReactNode } from 'react';
 import type { Moment } from 'moment/moment';
-export interface DateRangePickerCustomPresets {
+export type DateRangePickerCustomPresets = {
     startValue: Moment;
     endValue: Moment;
     text: string | JSX.Element;
     onSelect?: Function;
-}
-export interface DateRangePickerProps {
+};
+export type DateRangePickerProps = {
     startValue?: Moment;
     endValue?: Moment;
     defaultStartValue?: Moment;
@@ -34,11 +34,10 @@ export interface DateRangePickerProps {
     dropup?: boolean;
     pullRight?: boolean;
     autoDropDirection?: boolean;
-}
+};
 /**
  * Wrapper component for React-Datetime.
  *
  * @deprecated This will be removed from the UIKIT at some time.
  */
-declare const DateRangePicker: Component<PropsWithChildren<DateRangePickerProps>, {}, any>;
-export { DateRangePicker };
+export declare const DateRangePicker: (props: PropsWithChildren<DateRangePickerProps>) => import("react/jsx-runtime").JSX.Element;

package/DateRangePicker.js

@@ -1,8 +1,12 @@
-import { default as _DateRangePicker } from './components/datepicker/DateRangePicker';
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import DeprecatedDateRangePicker from './components/datepicker/DateRangePicker';
 /**
  * Wrapper component for React-Datetime.
  *
  * @deprecated This will be removed from the UIKIT at some time.
  */
-const DateRangePicker = _DateRangePicker;
-export { DateRangePicker };
+export const DateRangePicker = (props) => {
+    const { children } = props, remainingProps = __rest(props, ["children"]);
+    return _jsx(DeprecatedDateRangePicker, Object.assign({}, remainingProps, { children: children }));
+};

package/GroupedItemList.d.ts

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

package/GroupedItemList.js

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

package/LicensePlate.d.ts

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

package/LicensePlate.js

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

package/README.md

@@ -19,9 +19,9 @@ When releasing a new version:
 
 Create a new development beta version:
 
-1. Update the `package.json`. Example `0.16.4-beta.1`
-2. Update the `src/version.json`. Example `0.16.4-beta.1`
-3. run `npm i` or update `package-lock.json`. Example `0.16.4-beta.1`
+1. Update the `package.json`. Example `1.2.4-beta.1`
+2. Update the `src/version.json`. Example `1.2.4-beta.1`
+3. run `npm i` or update `package-lock.json`. Example `1.2.4-beta.1`
 
 ## Development
 

package/ReferenceLine.d.ts

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

package/ReferenceLine.js

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

package/components/actionBarItem/ActionBarItem.js

@@ -97,7 +97,7 @@ const ActionBarItemBase = (props) => {
         return (_jsxs("div", Object.assign({}, remainingProps, { className: classes, ref: clickOutsideRef }, { children: [React.cloneElement(itemIcon, { onClick: onToggle }), _jsx("div", Object.assign({ onClick: () => setIsShown(false) }, { children: _jsx(Dialog, { show: isShown, onClose: () => setIsShown(false), body: itemPopover, bodyClassName: mobileDialogBodyClassName, title: title }) })), childrenWithoutPopoverAndIcon] })));
     }
     const overlay = (_jsx(ActionBarOverlay, Object.assign({ id: id, title: title, width: popoverWidth, preRender: useOffscreen, show: isShown }, { children: itemPopover }), 'child'));
-    return (_jsxs("div", Object.assign({}, remainingProps, { className: classes, ref: clickOutsideRef }, { children: [_jsx(OverlayTrigger, Object.assign({ onToggle: onToggle, show: isShown || useOffscreen, placement: OverlayTrigger.BOTTOM_END, overlay: overlay, trigger: 'click', rootClose: false, popperConfig: {
+    return (_jsxs("div", Object.assign({}, remainingProps, { className: classes, ref: clickOutsideRef }, { children: [_jsx(OverlayTrigger, Object.assign({ onToggle: onToggle, show: isShown || useOffscreen, placement: OverlayTrigger.BOTTOM_END, overlay: overlay, rootClose: false, trigger: 'click', popperConfig: {
                     modifiers: [
                         {
                             name: 'offset',
@@ -105,6 +105,10 @@ const ActionBarItemBase = (props) => {
                                 offset: [0, 5],
                             },
                         },
+                        {
+                            name: 'arrow',
+                            options: {},
+                        },
                     ],
                 } }, { children: itemIcon })), childrenWithoutPopoverAndIcon] })));
 };

package/components/actionBarItem/ActionBarItemIcon.d.ts

@@ -1,9 +1,7 @@
-import { type HTMLAttributes, type PropsWithChildren } from 'react';
-type ActionBarItemIconProps = HTMLAttributes<HTMLDivElement> & {
-    className?: string;
-};
-declare const ActionBarItemIcon: {
-    (props: PropsWithChildren<ActionBarItemIconProps>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+import React from 'react';
+declare const ActionBarItemIcon: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    className?: string | undefined;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
 export default ActionBarItemIcon;

package/components/actionBarItem/ActionBarItemIcon.js

@@ -1,13 +1,13 @@
 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 ActionBarItemIcon = (props) => {
+const ActionBarItemIcon = forwardRef((props, ref) => {
     const { className, children } = props, remainingProps = __rest(props, ["className", "children"]);
     const classes = classNames('ActionBarItemIcon', className);
-    return (_jsx("div", Object.assign({}, remainingProps, { className: classes }, { children: children })));
-};
+    return (_jsx("div", Object.assign({}, remainingProps, { className: classes, ref: ref }, { children: children })));
+});
 // The displayName is used in ActionBarItem for checking the component "isActionBarItemIcon"
 ActionBarItemIcon.displayName = 'ActionBarItemIcon';
 export default ActionBarItemIcon;

package/components/actionBarItem/ActionBarOverlay.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import { type Placement } from '../../values/Placement';
+import { PLACEMENT_MAP } from '../popover/Popover';
+import type { ObjectValues } from '../../utils/ObjectValues';
 export type ActionBarOverlayWidth = 100 | 150 | 200 | 250 | 300 | 350 | 400 | 450 | 500;
 export type ActionBarOverlayProps = {
     id: string;
@@ -9,7 +10,7 @@ export type ActionBarOverlayProps = {
     width?: ActionBarOverlayWidth;
     onClick?: () => void;
     style?: object;
-    placement?: Placement;
+    placement?: ObjectValues<typeof PLACEMENT_MAP>;
     className?: string;
 };
 declare const ActionBarOverlay: React.ForwardRefExoticComponent<ActionBarOverlayProps & {

package/components/actionBarItem/ActionBarOverlay.js

@@ -1,18 +1,18 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
 import { forwardRef } from 'react';
 import classNames from 'classnames';
-import Popover from 'react-bootstrap/Popover';
 import noop from 'lodash/fp/noop';
-import { PLACEMENT } from '../../values/Placement';
-const DEFAULT_PLACEMENT = PLACEMENT.BOTTOM;
+import Popover, { PLACEMENT_MAP } from '../popover/Popover';
+const DEFAULT_PLACEMENT = PLACEMENT_MAP.BOTTOM;
 const DEFAULT_WIDTH = 250;
 const ActionBarOverlay = forwardRef((props, ref) => {
-    const { children, show, preRender, id, title, onClick = noop, width = DEFAULT_WIDTH, style = {}, className, placement = DEFAULT_PLACEMENT } = props, rest = __rest(props, ["children", "show", "preRender", "id", "title", "onClick", "width", "style", "className", "placement"]);
+    const { children, show, preRender, id, title, onClick = noop, width = DEFAULT_WIDTH, style = {}, className, placement = DEFAULT_PLACEMENT } = props, remainingProps = __rest(props, ["children", "show", "preRender", "id", "title", "onClick", "width", "style", "className", "placement"]);
     const adjustedStyles = Object.assign(Object.assign({}, style), { width });
     const adjustedClassName = preRender && !show ? classNames(className, 'position-offscreen') : className;
-    const popoverTitleClasses = classNames('ActionBarItemPopover popover-title text-color-dark', className);
-    const popoverContentClasses = classNames('ActionBarItemPopover popover-content', className);
-    return (_jsxs(Popover, Object.assign({ ref: ref, id: id, onClick: onClick, placement: placement }, rest, { style: adjustedStyles, className: adjustedClassName }, { children: [title && _jsx(Popover.Title, Object.assign({ className: popoverTitleClasses }, { children: title })), _jsx(Popover.Content, Object.assign({ className: popoverContentClasses }, { children: children }))] })));
+    const popoverTitleClasses = classNames('ActionBarItemPopover text-color-dark', className);
+    const popoverContentClasses = classNames('ActionBarItemPopover', className);
+    return (_jsxs(Popover, Object.assign({ ref: ref, id: id, onClick: onClick, placement: placement }, remainingProps, { style: adjustedStyles, className: adjustedClassName }, { children: [title && _jsx(Popover.Title, Object.assign({ className: popoverTitleClasses }, { children: title })), _jsx(Popover.Content, Object.assign({ className: popoverContentClasses }, { children: children }))] })));
 });
 export default ActionBarOverlay;

package/components/applicationLayout/ApplicationLayout.js

@@ -7,6 +7,7 @@ import ApplicationLayoutHeader from './ApplicationLayoutHeader';
 import ApplicationLayoutSidebar from './ApplicationLayoutSidebar';
 import ApplicationLayoutBody from './ApplicationLayoutBody';
 import { initDocumentBootstrapping } from '../../utils/init/initDocumentBootstrapping';
+import '../../utils/init/initConfig';
 // initializes document bootstrapping - keep the import to avoid being tree-shaken
 // noinspection JSIgnoredPromiseFromCall
 initDocumentBootstrapping();

package/components/applicationLayout/ApplicationLayoutHeader.js

@@ -1,14 +1,10 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 const ApplicationLayoutHeader = forwardRef((props, ref) => {
     const { className, children } = props, remainingProps = __rest(props, ["className", "children"]);
     const classes = classNames('ApplicationLayoutHeader', className);
     return (_jsx("div", Object.assign({ ref: ref }, remainingProps, { className: classes, id: 'ApplicationLayoutHeader' }, { children: children })));
 });
-ApplicationLayoutHeader.propTypes = {
-    className: PropTypes.string,
-};
 export default ApplicationLayoutHeader;

package/components/assetTree/TreeOptions.js

@@ -12,18 +12,22 @@ const TreeOptions = (props) => {
     }
     const dropdownClasses = classNames('display-flex flex-column gap-10', 'width-250', 'padding-15', className);
     const customDropdown = _jsx("div", Object.assign({ className: dropdownClasses }, { children: treeOptions }));
-    const dropdown = (_jsx(ButtonDropdown, { title: _jsx("span", { className: 'rioglyph rioglyph-option-vertical', "aria-hidden": 'true' }), bsStyle: 'default', bsSize: 'sm', customDropdown: customDropdown, toggleClassName: 'hover-bg-white border-none text-color-gray hover-text-color-dark', className: 'TreeHeaderOptions', pullRight: true, iconOnly: true }));
+    const dropdown = (_jsx(ButtonDropdown, { title: _jsx("span", { className: 'rioglyph rioglyph-option-vertical', "aria-hidden": 'true' }), bsStyle: 'default', bsSize: 'sm', customDropdown: customDropdown, toggleClassName: 'hover-bg-white border-none text-color-gray hover-text-color-dark', className: 'TreeHeaderOptions height-20', pullRight: true, iconOnly: true }));
     if (treeOptionsTooltip) {
-        return (_jsx(SimpleTooltip, Object.assign({ content: treeOptionsTooltip, placement: 'bottom', delay: { show: 1000, hide: 0 }, popperConfig: {
+        return (_jsx(SimpleTooltip, Object.assign({ content: treeOptionsTooltip, placement: 'bottom-end', delay: { show: 1000, hide: 0 }, popperConfig: {
                 modifiers: [
                     {
                         name: 'offset',
                         options: {
-                            offset: [-20, 10],
+                            offset: [10, 5],
                         },
                     },
+                    {
+                        name: 'arrow',
+                        options: {},
+                    },
                 ],
-            } }, { children: dropdown })));
+            } }, { children: _jsx("div", { children: dropdown }) })));
     }
     return dropdown;
 };

package/components/assetTree/treeUtils.js

@@ -27,7 +27,7 @@ const orderByName = orderBy([
         var _a;
         return isNameObject(item)
             ? item.name.lastName.toLowerCase()
-            : (_a = item.name.toLowerCase()) !== null && _a !== void 0 ? _a : '';
+            : ((_a = item.name.toLowerCase()) !== null && _a !== void 0 ? _a : '');
     },
 ], ['asc']);
 // TODO: extend to use provided external search function instead?

package/components/calendarStripe/CalendarStripe.d.ts

@@ -62,6 +62,14 @@ export type CalendarStripeProps = {
      * Additional classes set to the calendar element.
      */
     className?: string;
+    /**
+     * Additional classes set to the days wrapper element.
+     */
+    daysWrapperClassName?: string;
+    /**
+     * Additional classes set to the days wrapper element.
+     */
+    dayWrapperClassName?: string;
 };
 declare const CalendarStripe: React.ForwardRefExoticComponent<CalendarStripeProps & React.RefAttributes<HTMLDivElement>>;
 export default CalendarStripe;

package/components/calendarStripe/CalendarStripe.js

@@ -6,6 +6,7 @@ import noop from 'lodash/noop';
 import useAfterMount from '../../hooks/useAfterMount';
 import useElementSize from '../../hooks/useElementSize';
 import usePrevious from '../../hooks/usePrevious';
+import { hasAlignItemsClass, hasAlignSelfClass, hasBgClass, hasBorderClass, hasCursorClass, hasDisplayClass, hasFlexClass, hasHoverScaleClass, hasHoverTextColorClass, hasOverflowClass, hasPaddingClass, hasRoundedClass, hasSpaceClass, hasTextColorClass, hasTextSizeClass, hasUserSelectClass, } from '../../utils/hasUtilityClass';
 const DEFAULT_MIN_WITH = 200;
 const DEFAULT_MIN_DAYS = 1;
 const DEFAULT_MAX_DAYS = 7;
@@ -28,7 +29,7 @@ const getFirstColumnItem = (node) => {
     return getFirstColumnItem(node.children[0]);
 };
 const CalendarStripe = forwardRef((props, ref) => {
-    const { minDayWith = DEFAULT_MIN_WITH, minDays = DEFAULT_MIN_DAYS, maxDays = DEFAULT_MAX_DAYS, render, renderDay, skipWeekends = false, startDate = new Date(), onNextClick = noop, onPreviousClick = noop, buttonClassName = '', className = '', } = props;
+    const { minDayWith = DEFAULT_MIN_WITH, minDays = DEFAULT_MIN_DAYS, maxDays = DEFAULT_MAX_DAYS, render, renderDay, skipWeekends = false, startDate = new Date(), onNextClick = noop, onPreviousClick = noop, buttonClassName = '', className = '', daysWrapperClassName = '', dayWrapperClassName = '', } = props;
     if (render) {
         console.warn('CalendarStripe has set the "render" prop deprecated. This will be removed in the upcoming releases,' +
             ' Please use the "renderDay" prop instead.');
@@ -114,8 +115,10 @@ const CalendarStripe = forwardRef((props, ref) => {
             addDays = false;
         }
     }
-    const wrapperClassName = classNames('CalenderStripe', 'display-flex', 'align-items-center', 'overflow-hidden', 'bg-white', 'border', 'rounded', className);
-    const baseButtonClassName = classNames('align-items-center', 'align-self-stretch', 'display-flex', 'hover-scale-105', 'hover-text-color-darkest', 'padding-10', 'cursor-pointer', 'text-color-darker', 'text-size-12', buttonClassName);
-    return (_jsxs("div", Object.assign({ ref: ref, className: wrapperClassName }, { children: [_jsx("div", Object.assign({ className: baseButtonClassName, onClick: handlePrev }, { children: _jsx("span", { className: 'rioglyph rioglyph-chevron-left' }) })), _jsx("div", Object.assign({ className: 'flex-1-1 overflow-hidden', ref: columnWrapperRef }, { children: _jsx(AnimatePresence, Object.assign({ exitBeforeEnter: true, custom: animationDirection }, { children: _jsx(motion.div, Object.assign({ variants: variants, initial: enableInitialAnimation ? 'pageEnter' : false, animate: 'pageCenter', custom: animationDirection, transition: { duration: ANIMATION_DURATION } }, { children: _jsx("div", Object.assign({ className: 'ColumnWrapper display-flex space-x--1 user-select-none' }, { children: dates.map(date => (_jsxs("div", Object.assign({ className: `${ITEM_NAME} flex-1-1` }, { children: [renderDay ? renderDay(date) : null, render && React.cloneElement(_jsx(_Fragment, { children: render }), { date })] }), `${getDateString(date)}`))) })) }), getDateString(firstDate)) })) })), _jsx("div", Object.assign({ className: baseButtonClassName, onClick: handleNext }, { children: _jsx("span", { className: 'rioglyph rioglyph-chevron-right' }) }))] })));
+    const wrapperClassNames = classNames('CalenderStripe', !hasDisplayClass(className) && 'display-flex', !hasAlignItemsClass(className) && 'align-items-center', !hasOverflowClass(className) && 'overflow-hidden', !hasBgClass(className) && 'bg-white', !hasBorderClass(className) && 'border', !hasRoundedClass(className) && 'rounded', className);
+    const baseButtonClassNames = classNames(!hasAlignItemsClass(buttonClassName) && 'align-items-center', !hasDisplayClass(buttonClassName) && 'display-flex', !hasHoverScaleClass(buttonClassName) && 'hover-scale-105', !hasHoverTextColorClass(buttonClassName) && 'hover-text-color-darkest', !hasPaddingClass(buttonClassName) && 'padding-10', !hasCursorClass(buttonClassName) && 'cursor-pointer', !hasTextColorClass(buttonClassName) && 'text-color-darker', !hasTextSizeClass(buttonClassName) && 'text-size-12', !hasAlignSelfClass(buttonClassName) && 'align-self-stretch', buttonClassName);
+    const daysWrapperClassNames = classNames(!hasDisplayClass(daysWrapperClassName) && 'display-flex', !hasSpaceClass(daysWrapperClassName) && 'space-x--1', !hasUserSelectClass(daysWrapperClassName) && 'user-select-none', daysWrapperClassName);
+    const dayWrapperClassNames = classNames(ITEM_NAME, !hasFlexClass(dayWrapperClassName) && 'flex-1-1-0', !hasSpaceClass(dayWrapperClassName) && 'space-x--1', !hasUserSelectClass(dayWrapperClassName) && 'user-select-none', dayWrapperClassName);
+    return (_jsxs("div", Object.assign({ ref: ref, className: wrapperClassNames }, { children: [_jsx("div", Object.assign({ className: baseButtonClassNames, onClick: handlePrev }, { children: _jsx("span", { className: 'rioglyph rioglyph-chevron-left' }) })), _jsx("div", Object.assign({ className: 'flex-1-1 overflow-hidden', ref: columnWrapperRef }, { children: _jsx(AnimatePresence, Object.assign({ exitBeforeEnter: true, custom: animationDirection }, { children: _jsx(motion.div, Object.assign({ variants: variants, initial: enableInitialAnimation ? 'pageEnter' : false, animate: 'pageCenter', custom: animationDirection, transition: { duration: ANIMATION_DURATION } }, { children: _jsx("div", Object.assign({ className: daysWrapperClassNames }, { children: dates.map(date => (_jsxs("div", Object.assign({ className: dayWrapperClassNames }, { children: [renderDay ? renderDay(date) : null, render && React.cloneElement(_jsx(_Fragment, { children: render }), { date })] }), `${getDateString(date)}`))) })) }), getDateString(firstDate)) })) })), _jsx("div", Object.assign({ className: baseButtonClassNames, onClick: handleNext }, { children: _jsx("span", { className: 'rioglyph rioglyph-chevron-right' }) }))] })));
 });
 export default CalendarStripe;

package/components/charts/Area.d.ts

@@ -2,6 +2,11 @@
 import type { AreaProps as RechartsAreaProps } from 'recharts';
 export type AreaProps = Omit<RechartsAreaProps, 'ref'> & {
     strokeColor?: string;
+    dataKey?: string;
+    unit?: string;
+    legendType?: string;
+    type?: string;
+    isAnimationActive?: boolean;
 };
 declare const Area: React.FC<AreaProps>;
 export default Area;

package/components/charts/Area.js

@@ -1,10 +1,2 @@
-const Area = () => null;
-Area.defaultProps = {
-    dataKey: 'value',
-    unit: '',
-    strokeColor: 'color-coldplay-fountain',
-    legendType: 'square',
-    type: 'monotone',
-    isAnimationActive: true,
-};
+const Area = ({ dataKey = 'value', unit = '', strokeColor = 'color-coldplay-fountain', legendType = 'square', type = 'monotone', isAnimationActive = true, }) => null;
 export default Area;

package/components/charts/AreaChart.d.ts

@@ -6,6 +6,7 @@ import { type LegendProps } from './Legend';
 import type { AreaProps } from './Area';
 import type { GridProps } from './ChartGrid';
 import type { ResponsiveContainerProps } from './ResponsiveContainer';
+import type { ReferenceLineProps } from './ReferenceLine';
 type RechartsAreaChartProps = React.ComponentProps<typeof RechartsAreaChart>;
 export type AreaChartProps<T extends object> = Omit<RechartsAreaChartProps, 'data'> & {
     width?: number;
@@ -15,6 +16,7 @@ export type AreaChartProps<T extends object> = Omit<RechartsAreaChartProps, 'dat
     dataKey?: string | number | ((obj: T) => any);
     gradients?: React.ReactElement<AreaGradientProps>[];
     areas: React.ReactElement<AreaProps>[];
+    referenceLines?: React.ReactElement<ReferenceLineProps>[];
     xAxisOptions?: XAxisProps;
     yAxisOptions?: YAxisProps;
     gridOptions?: GridProps;

package/components/charts/AreaChart.js

@@ -1,16 +1,16 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 // @ts-ignore-next-line importsNotUsedAsValues
 import 'react';
-import { AreaChart as RechartsAreaChart, Area as RechartsArea, XAxis, YAxis, Brush, CartesianGrid, ResponsiveContainer, } from 'recharts';
+import { AreaChart as RechartsAreaChart, Area as RechartsArea, ReferenceLine as RechartsReferenceLine, Legend as RechartsLegend, XAxis, YAxis, Brush, CartesianGrid, ResponsiveContainer, } from 'recharts';
 import isObject from 'lodash/fp/isObject';
 import { getColor, mapGridOptions } from './chartHelper';
 import AreaGradient, { DEFAULT_ARIA_GRADIENT_ID } from './AreaGradient';
 import ChartTooltip from './ChartTooltip';
-import Legend from './Legend';
+import { getLegendDefaultProps } from './Legend';
 const AreaChart = (props) => {
-    const { width, height, data = [], dataUnit = '', dataKey = 'value', gradients = [], areas = [], xAxisOptions, yAxisOptions, gridOptions, containerOptions, showXAxis = true, showYAxis = false, showGrid = false, legend, brush = false, tooltip = true } = props, remainingProps = __rest(props, ["width", "height", "data", "dataUnit", "dataKey", "gradients", "areas", "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, showGrid = false, legend, brush = false, tooltip = true } = props, remainingProps = __rest(props, ["width", "height", "data", "dataUnit", "dataKey", "gradients", "areas", "referenceLines", "xAxisOptions", "yAxisOptions", "gridOptions", "containerOptions", "showXAxis", "showYAxis", "showGrid", "legend", "brush", "tooltip"]);
     const areasWithGradient = areas.map(area => {
         const _a = area.props, { strokeColor } = _a, remainingAreaProps = __rest(_a, ["strokeColor"]);
         const gradientId = area.key;
@@ -21,7 +21,10 @@ const AreaChart = (props) => {
         };
     });
     const tooltipProps = isObject(tooltip) ? tooltip.props : {};
-    const legendProps = isObject(legend) ? legend.props : {};
-    return (_jsx(ResponsiveContainer, Object.assign({}, containerOptions, { children: _jsxs(RechartsAreaChart, Object.assign({ width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 } }, remainingProps, { children: [_jsxs("defs", { children: [gradients, areasWithGradient.map(areaWithGradient => areaWithGradient.gradient)] }), showGrid && _jsx(CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, mapGridOptions(gridOptions))), _jsx(XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), _jsx(YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), tooltip && _jsx(ChartTooltip, Object.assign({}, tooltipProps)), legend && _jsx(Legend, Object.assign({}, legendProps)), areasWithGradient.map(areaWithGradient => areaWithGradient.area), brush && _jsx(Brush, { stroke: getColor('gray') })] })) })));
+    const legendProps = isObject(legend) ? Object.assign(Object.assign({}, getLegendDefaultProps()), legend.props) : {};
+    return (_jsx(ResponsiveContainer, Object.assign({}, containerOptions, { children: _jsxs(RechartsAreaChart, Object.assign({ width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 } }, remainingProps, { children: [_jsxs("defs", { children: [gradients, areasWithGradient.map(areaWithGradient => areaWithGradient.gradient)] }), showGrid && _jsx(CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, mapGridOptions(gridOptions))), _jsx(XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), _jsx(YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), tooltip && _jsx(ChartTooltip, Object.assign({}, tooltipProps)), legend && legendProps && (_jsx(_Fragment, { children: _jsx(RechartsLegend, 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 = __rest(_a, ["stroke"]);
+                    return (_createElement(RechartsReferenceLine, Object.assign({}, remainingReferenceLineProps, { key: referenceLine.key, stroke: getColor(stroke) })));
+                }), brush && _jsx(Brush, { stroke: getColor('gray') })] })) })));
 };
 export default AreaChart;

package/components/charts/BarChart.js

@@ -2,16 +2,16 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-ignore-next-line importsNotUsedAsValues
 import 'react';
-import { BarChart as RechartsBarChart, Bar as RechartsBar, XAxis, YAxis, Brush, Cell, CartesianGrid, ResponsiveContainer, } from 'recharts';
+import { BarChart as RechartsBarChart, Bar as RechartsBar, Legend as RechartsLegend, XAxis, YAxis, Brush, Cell, CartesianGrid, ResponsiveContainer, } from 'recharts';
 import isFunction from 'lodash/fp/isFunction';
 import isObject from 'lodash/fp/isObject';
 import { getFromDefaultColors, getColor, mapGridOptions, CURSOR_BACKGROUND_COLOR } from './chartHelper';
 import ChartTooltip from './ChartTooltip';
-import Legend from './Legend';
+import { getLegendDefaultProps } from './Legend';
 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 = __rest(props, ["width", "height", "data", "dataUnit", "dataKey", "layout", "legend", "bars", "xAxisOptions", "yAxisOptions", "gridOptions", "containerOptions", "showGrid", "showXAxis", "showYAxis", "useDataColors", "brush", "tooltip"]);
     const tooltipProps = isObject(tooltip) ? tooltip.props : {};
-    const legendProps = isObject(legend) ? legend.props : {};
+    const legendProps = isObject(legend) ? Object.assign(Object.assign({}, getLegendDefaultProps()), legend.props) : {};
     let legendPayload;
     if (useDataColors) {
         legendPayload = data.map((entry, index) => {
@@ -19,7 +19,7 @@ const BarChart = (props) => {
             return Object.assign(Object.assign({}, entry), { value: isFunction(dataKey) ? dataKey(entry) : entry[dataKey], color: legendColor });
         });
     }
-    return (_jsx(ResponsiveContainer, Object.assign({}, containerOptions, { children: _jsxs(RechartsBarChart, Object.assign({ layout: layout, width: width, height: height, data: data }, remainingProps, { children: [showGrid && _jsx(CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, mapGridOptions(gridOptions))), _jsx(XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), _jsx(YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), legend && _jsx(Legend, Object.assign({}, legendProps, { payload: legendPayload })), tooltip && _jsx(ChartTooltip, Object.assign({ cursor: { fill: CURSOR_BACKGROUND_COLOR } }, tooltipProps)), bars.map(bar => {
+    return (_jsx(ResponsiveContainer, Object.assign({}, containerOptions, { children: _jsxs(RechartsBarChart, Object.assign({ layout: layout, width: width, height: height, data: data }, remainingProps, { children: [showGrid && _jsx(CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, mapGridOptions(gridOptions))), _jsx(XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), _jsx(YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), tooltip && _jsx(ChartTooltip, Object.assign({ cursor: { fill: CURSOR_BACKGROUND_COLOR } }, tooltipProps)), legend && _jsx(RechartsLegend, Object.assign({ payload: useDataColors ? legendPayload : undefined }, legendProps)), bars.map(bar => {
                     const _a = bar.props, { color } = _a, remainingBarProps = __rest(_a, ["color"]);
                     const cellColor = color && getColor(color);
                     return (_jsx(RechartsBar, Object.assign({ unit: dataUnit }, remainingBarProps, { fill: cellColor }, { children: useDataColors &&

package/components/charts/ChartLabel.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { LabelProps as RechartsLabelProps } from 'recharts';
+export type LabelProps = Omit<RechartsLabelProps, 'ref'> & {};
+declare const ChartLabel: React.FC<LabelProps>;
+export default ChartLabel;

package/components/charts/ChartLabel.js

@@ -0,0 +1,2 @@
+const ChartLabel = props => null;
+export default ChartLabel;

package/components/charts/ComposedChart.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ComposedChart as RechartsComposedChart, type XAxisProps, type YAxisProps } from 'recharts';
+import { 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 { 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;
+    height?: number;
+    data: T[];
+    dataUnit?: string;
+    dataKey?: string | number | ((obj: T) => any);
+    lines?: React.ReactElement<LineProps>[];
+    bars?: React.ReactElement<BarProps>[];
+    areas?: React.ReactElement<AreaProps>[];
+    referenceLines?: React.ReactElement<ReferenceLineProps>[];
+    xAxisOptions?: XAxisProps;
+    yAxisOptions?: YAxisProps;
+    gridOptions?: GridProps;
+    containerOptions?: ResponsiveContainerProps;
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    showGrid?: boolean;
+    legend?: React.ReactElement<LegendProps> | boolean;
+    tooltip?: React.ReactElement<ChartTooltipProps> | boolean;
+    brush?: boolean;
+};
+declare const ComposedChart: <T extends object>(props: ComposedChartProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default ComposedChart;

package/components/charts/ComposedChart.js

@@ -0,0 +1,30 @@
+import { __rest } from "tslib";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+import { ComposedChart as RechartsComposedChart, Line as RechartsLine, Bar as RechartsBar, Area as RechartsArea, ReferenceLine as RechartsReferenceLine, Legend as RechartsLegend, XAxis, YAxis, Brush, CartesianGrid, ResponsiveContainer, } from 'recharts';
+import isObject from 'lodash/fp/isObject';
+import { getColor, mapGridOptions } from './chartHelper';
+import ChartTooltip from './ChartTooltip';
+import { getLegendDefaultProps } from './Legend';
+const ComposedChart = (props) => {
+    const { width, height, data = [], dataUnit = '', dataKey = 'value', lines = [], bars = [], areas = [], referenceLines = [], xAxisOptions, yAxisOptions, gridOptions, containerOptions, showXAxis = true, showYAxis = false, showGrid = false, legend, brush = false, tooltip = true } = props, remainingProps = __rest(props, ["width", "height", "data", "dataUnit", "dataKey", "lines", "bars", "areas", "referenceLines", "xAxisOptions", "yAxisOptions", "gridOptions", "containerOptions", "showXAxis", "showYAxis", "showGrid", "legend", "brush", "tooltip"]);
+    const tooltipProps = isObject(tooltip) ? tooltip.props : {};
+    const legendProps = isObject(legend) ? Object.assign(Object.assign({}, getLegendDefaultProps()), legend.props) : {};
+    return (_jsx(ResponsiveContainer, Object.assign({}, containerOptions, { children: _jsxs(RechartsComposedChart, Object.assign({ width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 } }, remainingProps, { children: [showGrid && _jsx(CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, mapGridOptions(gridOptions))), _jsx(XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), _jsx(YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), tooltip && _jsx(ChartTooltip, Object.assign({}, tooltipProps)), legend && _jsx(RechartsLegend, Object.assign({}, legendProps)), areas.map(area => {
+                    const _a = area.props, { strokeColor, fill } = _a, remainingAreaProps = __rest(_a, ["strokeColor", "fill"]);
+                    return (_createElement(RechartsArea, Object.assign({}, remainingAreaProps, { key: area.key, stroke: getColor(strokeColor), fill: getColor(fill) })));
+                }), bars.map(bar => {
+                    const _a = bar.props, { color } = _a, remainingBarProps = __rest(_a, ["color"]);
+                    const cellColor = color && getColor(color);
+                    return _jsx(RechartsBar, Object.assign({ unit: dataUnit }, remainingBarProps, { fill: cellColor }), bar.key);
+                }), lines.map(line => {
+                    const _a = line.props, { strokeColor } = _a, remainingLineProps = __rest(_a, ["strokeColor"]);
+                    return _createElement(RechartsLine, Object.assign({}, remainingLineProps, { key: line.key, stroke: getColor(strokeColor) }));
+                }), referenceLines.map(referenceLine => {
+                    const _a = referenceLine.props, { stroke } = _a, remainingReferenceLineProps = __rest(_a, ["stroke"]);
+                    return (_createElement(RechartsReferenceLine, Object.assign({}, remainingReferenceLineProps, { key: referenceLine.key, stroke: getColor(stroke) })));
+                }), brush && _jsx(Brush, { stroke: getColor('gray') })] })) })));
+};
+export default ComposedChart;

package/components/charts/Legend.d.ts

@@ -1,18 +1,16 @@
-import { type LegendProps as RechartsLegendProps } from 'recharts';
+import type { LegendProps as RechartsLegendProps } from 'recharts';
 import type { Formatter, Payload } from 'recharts/types/component/DefaultLegendContent';
 export type LegendFormatter = Formatter;
 export type LegendPayload = Payload;
 export type LegendProps = Omit<RechartsLegendProps, 'ref' | 'formatter'> & {
     formatter?: (value: any, entry: any, index: number) => void;
 };
-declare const Legend: {
-    (props: LegendProps): import("react/jsx-runtime").JSX.Element;
-    defaultProps: {
-        iconType: string;
-        iconSize: number;
-        layout: string;
-        align: string;
-        verticalAlign: string;
-    };
+export declare const getLegendDefaultProps: () => {
+    iconType: string;
+    iconSize: number;
+    layout: string;
+    align: string;
+    verticalAlign: string;
 };
+declare const Legend: (props: LegendProps) => null;
 export default Legend;

package/components/charts/Legend.js

@@ -1,20 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 // @ts-ignore-next-line importsNotUsedAsValues
 import 'react';
-import { Legend as RechartsLegend } from 'recharts';
-const Legend = (props) => {
-    const { verticalAlign, wrapperStyle } = props;
-    return (_jsx(RechartsLegend
-    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-    , Object.assign({ 
-        // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-        formatter: props.formatter, wrapperStyle: verticalAlign === 'bottom' ? { bottom: 0 } : wrapperStyle }, props)));
-};
-Legend.defaultProps = {
+export const getLegendDefaultProps = () => ({
     iconType: 'circle',
     iconSize: 12,
     layout: 'vertical',
     align: 'right',
     verticalAlign: 'top',
-};
+});
+const Legend = (props) => null;
 export default Legend;

package/components/charts/Line.d.ts

@@ -2,6 +2,11 @@
 import type { LineProps as RechartsLineProps } from 'recharts';
 export type LineProps = Omit<RechartsLineProps, 'ref'> & {
     strokeColor?: string;
+    dataKey?: string;
+    unit?: string;
+    legendType?: string;
+    type?: string;
+    isAnimationActive?: boolean;
 };
 declare const Line: React.FC<LineProps>;
 export default Line;

package/components/charts/Line.js

@@ -1,10 +1,2 @@
-const Line = () => null;
-Line.defaultProps = {
-    dataKey: 'value',
-    unit: '',
-    strokeColor: 'color-coldplay-fountain',
-    legendType: 'square',
-    type: 'monotone',
-    isAnimationActive: true,
-};
+const Line = ({ dataKey = 'value', unit = '', strokeColor = 'color-coldplay-fountain', legendType = 'square', type = 'monotone', isAnimationActive = true, }) => null;
 export default Line;