@rio-cloud/rio-uikit 1.13.1 → 2.0.0-beta.1

package/components/charts/AreaChart.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import { AreaChart as RechartsAreaChart, type XAxisProps, type YAxisProps } from 'recharts';
 import { type AreaGradientProps } from './AreaGradient';
 import { type ChartTooltipProps } from './ChartTooltip';

package/components/charts/AreaChart.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import { AreaChart as RechartsAreaChart, Area as RechartsArea, Legend as RechartsLegend, Brush, CartesianGrid, ResponsiveContainer, XAxis as RechartsXAxis, YAxis as RechartsYAxis, } 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 { getLegendDefaultProps } from './Legend';
-import { renderAxis } from './XAxis';
-import { getAreaDefaultProps } from './Area';
-import { renderReferenceLine } from './ReferenceLine';
+import { isObject } from 'es-toolkit/compat';
+import { getColor, mapGridOptions } from "./chartHelper.js";
+import AreaGradient, { DEFAULT_ARIA_GRADIENT_ID } from "./AreaGradient.js";
+import ChartTooltip from "./ChartTooltip.js";
+import { getLegendDefaultProps } from "./Legend.js";
+import { renderAxis } from "./XAxis.js";
+import { getAreaDefaultProps } from "./Area.js";
+import { renderReferenceLine } from "./ReferenceLine.js";
 const AreaChart = (props) => {
     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, ...remainingProps } = props;
     const areasWithGradient = areas.map(area => {
@@ -23,6 +23,6 @@ const AreaChart = (props) => {
     });
     const tooltipProps = isObject(tooltip) ? tooltip.props : {};
     const legendProps = isObject(legend) ? { ...getLegendDefaultProps(), ...legend.props } : {};
-    return (_jsx(ResponsiveContainer, { ...containerOptions, children: _jsxs(RechartsAreaChart, { 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, { strokeDasharray: '3 3', ...mapGridOptions(gridOptions) }), _jsx(RechartsXAxis, { hide: !showXAxis, dataKey: dataKey, ...xAxisOptions }), _jsx(RechartsYAxis, { hide: !showYAxis, unit: dataUnit, ...yAxisOptions }), additionalAxes.map(renderAxis), tooltip && _jsx(ChartTooltip, { ...tooltipProps }), legend && legendProps && (_jsx(_Fragment, { children: _jsx(RechartsLegend, { wrapperStyle: legendProps.verticalAlign === 'bottom' ? { bottom: 0 } : legendProps.wrapperStyle, ...legendProps }) })), areasWithGradient.map(areaWithGradient => areaWithGradient.area), referenceLines.map(renderReferenceLine), brush && _jsx(Brush, { stroke: getColor('gray') })] }) }));
+    return (_jsx(ResponsiveContainer, { minHeight: 100, minWidth: 100, initialDimension: { width: 100, height: 100 }, ...containerOptions, children: _jsxs(RechartsAreaChart, { 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, { strokeDasharray: '3 3', ...mapGridOptions(gridOptions) }), _jsx(RechartsXAxis, { hide: !showXAxis, dataKey: dataKey, ...xAxisOptions }), _jsx(RechartsYAxis, { hide: !showYAxis, unit: dataUnit, ...yAxisOptions }), additionalAxes.map(renderAxis), tooltip && _jsx(ChartTooltip, { ...tooltipProps }), legend && legendProps && (_jsx(_Fragment, { children: _jsx(RechartsLegend, { wrapperStyle: legendProps.verticalAlign === 'bottom' ? { bottom: 0 } : legendProps.wrapperStyle, ...legendProps }) })), areasWithGradient.map(areaWithGradient => areaWithGradient.area), referenceLines.map(renderReferenceLine), brush && _jsx(Brush, { stroke: getColor('gray') })] }) }));
 };
 export default AreaChart;

package/components/charts/AreaGradient.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getColor } from './chartHelper';
+import { getColor } from "./chartHelper.js";
 export const DEFAULT_ARIA_GRADIENT_ID = 'areaGradient';
 const AreaGradient = (props) => {
     const { id = DEFAULT_ARIA_GRADIENT_ID, color = 'color-coldplay-fountain' } = props;

package/components/charts/Bar.d.ts

@@ -1,9 +1,11 @@
 import type { BarProps as RechartsBarProps } from 'recharts';
+import type { RenderableText as RechartsRenderableText } from 'recharts/types/component/Text';
+export type RenderableText = RechartsRenderableText;
 export type BarProps = Omit<RechartsBarProps, 'ref'> & {};
 export declare const getBarDefaultProps: () => {
     dataKey: string;
     color: string;
     isAnimationActive: boolean;
 };
-declare const Bar: (props: BarProps) => null;
+declare const Bar: (_props: BarProps) => null;
 export default Bar;

package/components/charts/Bar.js

@@ -3,5 +3,5 @@ export const getBarDefaultProps = () => ({
     color: 'color-coldplay-fountain',
     isAnimationActive: true,
 });
-const Bar = (props) => null;
+const Bar = (_props) => null;
 export default Bar;

package/components/charts/BarChart.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import { BarChart as RechartsBarChart, type XAxisProps, type YAxisProps } from 'recharts';
 import { type DataType } from './chartHelper';
 import { type ChartTooltipProps } from './ChartTooltip';

package/components/charts/BarChart.js

@@ -1,35 +1,44 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BarChart as RechartsBarChart, Bar as RechartsBar, Legend as RechartsLegend, Brush, Cell, CartesianGrid, ResponsiveContainer, XAxis as RechartsXAxis, YAxis as RechartsYAxis, } 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 { getLegendDefaultProps } from './Legend';
-import { renderAxis } from './XAxis';
-import { getBarDefaultProps } from './Bar';
+import { isObject } from 'es-toolkit/compat';
+import { getFromDefaultColors, getColor, mapGridOptions, CURSOR_BACKGROUND_COLOR } from "./chartHelper.js";
+import ChartTooltip from "./ChartTooltip.js";
+import { getLegendDefaultProps } from "./Legend.js";
+import { renderAxis } from "./XAxis.js";
+import { getBarDefaultProps } from "./Bar.js";
 const BarChart = (props) => {
     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, ...remainingProps } = props;
     const tooltipProps = isObject(tooltip) ? tooltip.props : {};
-    const legendProps = isObject(legend) ? { ...getLegendDefaultProps(), ...legend.props } : {};
-    let legendPayload;
-    if (useDataColors) {
-        legendPayload = data.map((entry, index) => {
-            const legendColor = getColor(entry.color) || getFromDefaultColors(index);
-            return {
-                ...entry,
-                value: isFunction(dataKey) ? dataKey(entry) : entry[dataKey],
-                color: legendColor,
-            };
-        });
-    }
-    return (_jsx(ResponsiveContainer, { ...containerOptions, children: _jsxs(RechartsBarChart, { layout: layout, width: width, height: height, data: data, ...remainingProps, children: [showGrid && _jsx(CartesianGrid, { strokeDasharray: '3 3', ...mapGridOptions(gridOptions) }), _jsx(RechartsXAxis, { hide: !showXAxis, dataKey: dataKey, ...xAxisOptions }), _jsx(RechartsYAxis, { hide: !showYAxis, unit: dataUnit, ...yAxisOptions }), additionalAxes.map(renderAxis), tooltip && _jsx(ChartTooltip, { cursor: { fill: CURSOR_BACKGROUND_COLOR }, ...tooltipProps }), legend && _jsx(RechartsLegend, { payload: useDataColors ? legendPayload : undefined, ...legendProps }), bars.map(bar => {
+    const legendBaseProps = isObject(legend) ? { ...getLegendDefaultProps(), ...legend.props } : {};
+    // In case you want to use the color from the data and enable the "useDataColors" flag,
+    // you need to provide a custom content function so you can render the individual legend items
+    // based on your data.
+    const legendProps = legendBaseProps;
+    const isCustomLegend = legendProps?.content;
+    const placementProps = {
+        layout: legendProps?.layout,
+        align: legendProps?.align,
+        verticalAlign: legendProps?.verticalAlign,
+        width: legendProps?.width,
+        height: legendProps?.height,
+    };
+    return (_jsx(ResponsiveContainer, { minHeight: 100, minWidth: 100, initialDimension: { width: 100, height: 100 }, ...containerOptions, children: _jsxs(RechartsBarChart, { layout: layout, data: data, ...remainingProps, children: [showGrid && _jsx(CartesianGrid, { strokeDasharray: '3 3', ...mapGridOptions(gridOptions) }), _jsx(RechartsXAxis, { hide: !showXAxis, dataKey: dataKey, ...xAxisOptions }), _jsx(RechartsYAxis, { hide: !showYAxis, unit: dataUnit, ...yAxisOptions }), additionalAxes.map(renderAxis), tooltip && _jsx(ChartTooltip, { cursor: { fill: CURSOR_BACKGROUND_COLOR }, ...tooltipProps }), legend && isCustomLegend && (_jsx(RechartsLegend, { ...placementProps, content: () => {
+                        const args = {
+                            items: legendProps.items,
+                            iconSize: legendProps?.iconSize ?? 12,
+                            resolveColor: (entry, index) => getColor(entry?.color) || getFromDefaultColors(index),
+                            ...placementProps,
+                        };
+                        return legendProps.content(args);
+                    } })), legend && !isCustomLegend && (
+                // series-based: just forward the formatter to Recharts
+                _jsx(RechartsLegend, { ...legendBaseProps })), bars.map(bar => {
                     const barPropsWithDefault = { ...getBarDefaultProps(), ...bar.props };
                     const { color, ...remainingBarProps } = barPropsWithDefault;
                     const cellColor = color && getColor(color);
                     return (_jsx(RechartsBar, { unit: dataUnit, ...remainingBarProps, fill: cellColor, children: useDataColors &&
                             data.map((entry, index) => {
                                 const entryCellColor = getColor(entry.color) || getFromDefaultColors(index);
-                                // biome-ignore lint/suspicious/noArrayIndexKey: unknown key
                                 return _jsx(Cell, { fill: entryCellColor }, `cell-${index}`);
                             }) }, bar.key));
                 }), brush && _jsx(Brush, { stroke: getColor('gray') })] }) }));

package/components/charts/ChartTooltip.d.ts

@@ -1,5 +1,7 @@
 import { Tooltip as RechartsTooltip } from 'recharts';
-export type ChartTooltipProps = typeof RechartsTooltip;
+export type ChartTooltipProps = typeof RechartsTooltip & {
+    activeIndex: number;
+};
 declare const ChartTooltip: typeof RechartsTooltip;
 export declare const defaultFormatter: (dataUnit: string) => (value: any) => string;
 export default ChartTooltip;

package/components/charts/ChartTooltip.js

@@ -1,5 +1,5 @@
 import { Tooltip as RechartsTooltip } from 'recharts';
 const ChartTooltip = RechartsTooltip;
-// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+// biome-ignore lint/suspicious/noExplicitAny: unknown value
 export const defaultFormatter = (dataUnit) => (value) => `${value} ${dataUnit}`;
 export default ChartTooltip;

package/components/charts/ComposedChart.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import { ComposedChart as RechartsComposedChart, type XAxisProps, type YAxisProps } from 'recharts';
 import { type ChartTooltipProps } from './ChartTooltip';
 import { type LegendProps } from './Legend';

package/components/charts/ComposedChart.js

@@ -1,20 +1,20 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ComposedChart as RechartsComposedChart, Line as RechartsLine, Bar as RechartsBar, Area as RechartsArea, Legend as RechartsLegend, Brush, CartesianGrid, ResponsiveContainer, XAxis as RechartsXAxis, YAxis as RechartsYAxis, } from 'recharts';
-import isObject from 'lodash/fp/isObject';
-import { getColor, mapGridOptions } from './chartHelper';
-import ChartTooltip from './ChartTooltip';
-import { getLegendDefaultProps } from './Legend';
-import { renderAxis } from './XAxis';
-import { getBarDefaultProps } from './Bar';
-import { renderReferenceLine } from './ReferenceLine';
-import { getLineDefaultProps } from './Line';
-import { getAreaDefaultProps } from './Area';
+import { isObject } from 'es-toolkit/compat';
+import { getColor, mapGridOptions } from "./chartHelper.js";
+import ChartTooltip from "./ChartTooltip.js";
+import { getLegendDefaultProps } from "./Legend.js";
+import { renderAxis } from "./XAxis.js";
+import { getBarDefaultProps } from "./Bar.js";
+import { renderReferenceLine } from "./ReferenceLine.js";
+import { getLineDefaultProps } from "./Line.js";
+import { getAreaDefaultProps } from "./Area.js";
 const ComposedChart = (props) => {
     const { width, height, data = [], dataUnit = '', dataKey = 'value', lines = [], bars = [], areas = [], referenceLines = [], xAxisOptions, yAxisOptions, additionalAxes = [], gridOptions, containerOptions, showXAxis = true, showYAxis = false, showGrid = false, legend, brush = false, tooltip = true, ...remainingProps } = props;
     const tooltipProps = isObject(tooltip) ? tooltip.props : {};
     const legendProps = isObject(legend) ? { ...getLegendDefaultProps(), ...legend.props } : {};
-    return (_jsx(ResponsiveContainer, { ...containerOptions, children: _jsxs(RechartsComposedChart, { width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 }, ...remainingProps, children: [showGrid && _jsx(CartesianGrid, { strokeDasharray: '3 3', ...mapGridOptions(gridOptions) }), _jsx(RechartsXAxis, { hide: !showXAxis, dataKey: dataKey, ...xAxisOptions }), _jsx(RechartsYAxis, { hide: !showYAxis, unit: dataUnit, ...yAxisOptions }), additionalAxes.map(renderAxis), tooltip && _jsx(ChartTooltip, { ...tooltipProps }), legend && _jsx(RechartsLegend, { ...legendProps }), areas.map(area => {
+    return (_jsx(ResponsiveContainer, { minHeight: 100, minWidth: 100, initialDimension: { width: 100, height: 100 }, ...containerOptions, children: _jsxs(RechartsComposedChart, { width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 }, ...remainingProps, children: [showGrid && _jsx(CartesianGrid, { strokeDasharray: '3 3', ...mapGridOptions(gridOptions) }), _jsx(RechartsXAxis, { hide: !showXAxis, dataKey: dataKey, ...xAxisOptions }), _jsx(RechartsYAxis, { hide: !showYAxis, unit: dataUnit, ...yAxisOptions }), additionalAxes.map(renderAxis), tooltip && _jsx(ChartTooltip, { ...tooltipProps }), legend && _jsx(RechartsLegend, { ...legendProps }), areas.map(area => {
                     const areaPropsWithDefault = { ...getAreaDefaultProps(), ...area.props };
                     const { strokeColor, fill, ...remainingAreaProps } = areaPropsWithDefault;
                     return (_createElement(RechartsArea, { ...remainingAreaProps, key: area.key, stroke: getColor(strokeColor), fill: getColor(fill) }));

package/components/charts/Legend.d.ts

@@ -1,10 +1,22 @@
 import type { LegendProps as RechartsLegendProps } from 'recharts';
-import type { Formatter, Payload } from 'recharts/types/component/DefaultLegendContent';
+import type { Formatter, LegendPayload as RechartsLegendPayload } 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;
+export type LegendPayload = RechartsLegendPayload;
+export type LegendPlacement = Partial<Pick<RechartsLegendProps, 'layout' | 'align' | 'verticalAlign' | 'width' | 'height'>>;
+export type LegendContentArgs<T> = {
+    items?: T[];
+    iconSize: number;
+    resolveColor: (entry: T, index: number) => string;
+    placement?: LegendPlacement;
+};
+export type LegendPropsSeries = LegendPlacement & Omit<RechartsLegendProps, 'ref' | 'formatter' | 'content'> & {
+    formatter?: (value: string | number, entry: LegendPayload, index: number) => React.ReactNode;
+};
+export type LegendPropsCustom<T = unknown> = LegendPlacement & Omit<RechartsLegendProps, 'ref' | 'formatter' | 'content'> & {
+    items: T[];
+    content: (args: LegendContentArgs<T>) => React.ReactNode;
 };
+export type LegendProps<T = unknown> = LegendPropsSeries | LegendPropsCustom<T>;
 export declare const getLegendDefaultProps: () => {
     iconType: string;
     iconSize: number;
@@ -12,5 +24,5 @@ export declare const getLegendDefaultProps: () => {
     align: string;
     verticalAlign: string;
 };
-declare const Legend: (props: LegendProps) => null;
+declare const Legend: <T>(_props: LegendProps<T>) => null;
 export default Legend;

package/components/charts/Legend.js

@@ -5,5 +5,6 @@ export const getLegendDefaultProps = () => ({
     align: 'right',
     verticalAlign: 'top',
 });
-const Legend = (props) => null;
+// Marker only - rendering happens in the chart component
+const Legend = (_props) => null;
 export default Legend;

package/components/charts/LineChart.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import { LineChart as RechartsLineChart, type XAxisProps, type YAxisProps, type BrushProps } from 'recharts';
 import { type ChartTooltipProps } from './ChartTooltip';
 import { type LegendProps } from './Legend';

package/components/charts/LineChart.js

@@ -1,18 +1,18 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { LineChart as RechartsLineChart, Line as RechartsLine, Legend as RechartsLegend, Brush, CartesianGrid, ResponsiveContainer, XAxis as RechartsXAxis, YAxis as RechartsYAxis, } from 'recharts';
-import isObject from 'lodash/fp/isObject';
-import { getColor, mapGridOptions } from './chartHelper';
-import ChartTooltip from './ChartTooltip';
-import { getLegendDefaultProps } from './Legend';
-import { renderAxis } from './XAxis';
-import { getLineDefaultProps } from './Line';
-import { renderReferenceLine } from './ReferenceLine';
+import { isObject } from 'es-toolkit/compat';
+import { getColor, mapGridOptions } from "./chartHelper.js";
+import ChartTooltip from "./ChartTooltip.js";
+import { getLegendDefaultProps } from "./Legend.js";
+import { renderAxis } from "./XAxis.js";
+import { getLineDefaultProps } from "./Line.js";
+import { renderReferenceLine } from "./ReferenceLine.js";
 const LineChart = (props) => {
     const { width, height, data = [], dataUnit = '', dataKey = 'value', lines = [], referenceLines = [], xAxisOptions, yAxisOptions, gridOptions, containerOptions, showXAxis = true, showYAxis = false, additionalAxes = [], showGrid = false, legend, brush = false, tooltip = true, brushOptions = {}, ...remainingProps } = props;
     const tooltipProps = isObject(tooltip) ? tooltip.props : {};
     const legendProps = isObject(legend) ? { ...getLegendDefaultProps(), ...legend.props } : {};
-    return (_jsx(ResponsiveContainer, { ...containerOptions, children: _jsxs(RechartsLineChart, { width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 }, ...remainingProps, children: [showGrid && _jsx(CartesianGrid, { strokeDasharray: '3 3', ...mapGridOptions(gridOptions) }), _jsx(RechartsXAxis, { hide: !showXAxis, dataKey: dataKey, ...xAxisOptions }), _jsx(RechartsYAxis, { hide: !showYAxis, unit: dataUnit, ...yAxisOptions }), additionalAxes.map(renderAxis), tooltip && _jsx(ChartTooltip, { ...tooltipProps }), legend && _jsx(RechartsLegend, { ...legendProps }), lines.map(line => {
+    return (_jsx(ResponsiveContainer, { minHeight: 100, minWidth: 100, initialDimension: { width: 100, height: 100 }, ...containerOptions, children: _jsxs(RechartsLineChart, { width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 }, ...remainingProps, children: [showGrid && _jsx(CartesianGrid, { strokeDasharray: '3 3', ...mapGridOptions(gridOptions) }), _jsx(RechartsXAxis, { hide: !showXAxis, dataKey: dataKey, ...xAxisOptions }), _jsx(RechartsYAxis, { hide: !showYAxis, unit: dataUnit, ...yAxisOptions }), additionalAxes.map(renderAxis), tooltip && _jsx(ChartTooltip, { ...tooltipProps }), legend && _jsx(RechartsLegend, { ...legendProps }), lines.map(line => {
                     const linePropsWithDefault = { ...getLineDefaultProps(), ...line.props };
                     const { strokeColor, ...remainingLineProps } = linePropsWithDefault;
                     return (_createElement(RechartsLine, { ...remainingLineProps, key: line.key, stroke: getColor(strokeColor) }));

package/components/charts/PieChart.d.ts

@@ -1,9 +1,10 @@
-import React from 'react';
-import { PieChart as RechartsPieChart, type PieProps as RechartPieProps } from 'recharts';
+import type React from 'react';
+import { PieChart as RechartsPieChart, type PieProps as RechartPieProps, type PieSectorDataItem as RechartsPieSectorDataItem } from 'recharts';
 import { type DataType } from './chartHelper';
 import { type LegendProps } from './Legend';
 import { type ChartTooltipProps } from './ChartTooltip';
 import type { ResponsiveContainerProps } from './ResponsiveContainer';
+export type PieSectorDataItem = RechartsPieSectorDataItem;
 export type PieChartDataType = DataType;
 export type PieProps = Omit<Partial<RechartPieProps>, 'ref'> & {};
 type RechartsPieChartProps = React.ComponentProps<typeof RechartsPieChart>;

package/components/charts/PieChart.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PieChart as RechartsPieChart, Legend as RechartsLegend, Pie, Cell, ResponsiveContainer, } from 'recharts';
-import isFunction from 'lodash/fp/isFunction';
-import isObject from 'lodash/fp/isObject';
-import { getFromDefaultColors, getColor } from './chartHelper';
-import { getLegendDefaultProps } from './Legend';
-import ChartTooltip, { defaultFormatter } from './ChartTooltip';
+import { isFunction } from 'es-toolkit/predicate';
+import { isObject } from 'es-toolkit/compat';
+import { getFromDefaultColors, getColor } from "./chartHelper.js";
+import { getLegendDefaultProps } from "./Legend.js";
+import ChartTooltip, { defaultFormatter } from "./ChartTooltip.js";
 const RADIAN = Math.PI / 180;
-const renderCustomInnerLabel = (dataUnit) => ({ cx, cy, midAngle, innerRadius, outerRadius, value }) => {
+const renderCustomInnerLabel = (dataUnit) => ({ cx = 0, cy = 0, midAngle = 0, innerRadius = 0, outerRadius = 0, value = 0 }) => {
     const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
     const x = cx + radius * Math.cos(-midAngle * RADIAN);
     const y = cy + radius * Math.sin(-midAngle * RADIAN);
@@ -19,7 +19,7 @@ const PieChart = (props) => {
     const pieLabel = labels && (innerLabels ? renderCustomInnerLabel(dataUnit) : renderLabels);
     const tooltipProps = isObject(tooltip) ? tooltip.props : {};
     const legendProps = isObject(legend) ? { ...getLegendDefaultProps(), ...legend.props } : {};
-    return (_jsx(ResponsiveContainer, { ...containerOptions, children: _jsxs(RechartsPieChart, { width: width, height: height, ...remainingProps, children: [legend && (_jsx(RechartsLegend, { formatter: (value, entry) => (_jsx("span", { className: 'text-color-darker', children: value })), ...legendProps })), _jsx(Pie, { data: data, isAnimationActive: true, nameKey: nameKey, dataKey: dataKey, label: pieLabel, 
+    return (_jsx(ResponsiveContainer, { minHeight: 100, minWidth: 100, initialDimension: { width: 100, height: 100 }, ...containerOptions, children: _jsxs(RechartsPieChart, { width: width, height: height, ...remainingProps, children: [legend && (_jsx(RechartsLegend, { formatter: (value, _entry) => (_jsx("span", { className: 'text-color-darker', children: value })), ...legendProps })), _jsx(Pie, { data: data, isAnimationActive: true, nameKey: nameKey, dataKey: dataKey, label: pieLabel, 
                     // cx={Math.max(outerRadius, width / 3)}
                     // cy={height / 2}
                     innerRadius: filled ? 0 : innerRadius, outerRadius: outerRadius, paddingAngle: filled ? 0 : paddingAngle, labelLine: !innerLabels, ...pieOptions, children: data.map((entry, index) => {

package/components/charts/RadialBarChart.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { RadialBarChart as RechartsRadialBarChart, RadialBar as RechartsRadialBar, Legend as RechartsLegend, PolarAngleAxis, Cell, ResponsiveContainer, } from 'recharts';
-import isFunction from 'lodash/fp/isFunction';
-import isObject from 'lodash/fp/isObject';
-import { getColor, getFromDefaultColors, CURSOR_BACKGROUND_COLOR } from './chartHelper';
-import { getLegendDefaultProps } from './Legend';
-import ChartTooltip from './ChartTooltip';
+import React from 'react';
+import { RadialBarChart as RechartsRadialBarChart, RadialBar as RechartsRadialBar, Legend as RechartsLegend, DefaultLegendContent, PolarAngleAxis, Cell, ResponsiveContainer, } from 'recharts';
+import { isFunction, isObject } from 'es-toolkit/compat';
+import { getColor, getFromDefaultColors, CURSOR_BACKGROUND_COLOR } from "./chartHelper.js";
+import { getLegendDefaultProps } from "./Legend.js";
+import ChartTooltip from "./ChartTooltip.js";
 const RadialBarChart = (props) => {
     const { width, height, data = [], dataKey = 'value', startAngle = 180, endAngle = 0, innerRadius = '30%', outerRadius = '100%', legend = _jsx(RechartsLegend, {}), textOptions, radialBarOptions, containerOptions, showBarLabel = false, cornerRadius = 30, background = true, range, tooltip = false, ...remainingProps } = props;
     const { text, size = '500%', weight = 'normal', color = 'gray-darkest', ...remainingTextOptions } = textOptions || {};
@@ -14,10 +14,36 @@ const RadialBarChart = (props) => {
         fill: color && getColor(color),
     };
     const tooltipProps = isObject(tooltip) ? tooltip.props : {};
-    const legendProps = isObject(legend) ? { ...getLegendDefaultProps(), ...legend.props } : {};
-    return (_jsx(ResponsiveContainer, { ...containerOptions, children: _jsxs(RechartsRadialBarChart, { width: width, height: height, data: data, innerRadius: innerRadius, outerRadius: outerRadius, startAngle: startAngle, endAngle: endAngle, ...remainingProps, children: [_jsx(RechartsRadialBar, { label: showBarLabel && { fill: '#666', position: 'insideStart' }, background: background, dataKey: dataKey, cornerRadius: cornerRadius, ...radialBarOptions, children: data.map((entry, index) => {
+    // Start from defaults, then merge any custom legend props passed in.
+    const legendBaseProps = isObject(legend) ? { ...getLegendDefaultProps(), ...legend.props } : {};
+    const { content: userLegendContent, iconType: legendIconType, ...legendProps } = legendBaseProps;
+    // Recharts v3 removed the Legend "payload" prop; build it here and feed it via content.
+    const legendPayload = data.map((entry, index) => {
+        const entryValue = isFunction(dataKey) ? dataKey(entry) : entry[dataKey];
+        const resolvedColor = getColor(entry.color) ?? entry.color ?? getFromDefaultColors(index);
+        return {
+            value: entry.name ?? `${index + 1}`,
+            color: resolvedColor,
+            type: legendIconType ?? 'circle',
+            payload: { value: entryValue },
+        };
+    });
+    return (_jsx(ResponsiveContainer, { minHeight: 100, minWidth: 100, initialDimension: { width: 100, height: 100 }, ...containerOptions, children: _jsxs(RechartsRadialBarChart, { width: width, height: height, data: data, innerRadius: innerRadius, outerRadius: outerRadius, startAngle: startAngle, endAngle: endAngle, ...remainingProps, children: [_jsx(RechartsRadialBar, { label: showBarLabel && { fill: '#666', position: 'insideStart' }, background: background, dataKey: dataKey, cornerRadius: cornerRadius, ...radialBarOptions, children: data.map((entry, index) => {
                         const cellColor = getColor(entry.color) || getFromDefaultColors(index);
                         return (_jsx(Cell, { fill: isFunction(color) ? color(entry, index) : cellColor }, `cell-${index}`));
-                    }) }), range && _jsx(PolarAngleAxis, { type: 'number', domain: range, angleAxisId: 0, tick: false }), textOptions && (_jsx("text", { x: width ? width / 2 : '50%', y: height ? height / 2 : '50%', textAnchor: 'middle', dominantBaseline: 'middle', className: 'radialbarchart-text', style: textStyle, ...remainingTextOptions, children: text })), legend && (_jsx(RechartsLegend, { formatter: (value, entry) => (_jsx("span", { className: 'text-color-darker', children: value })), ...legendProps })), tooltip && _jsx(ChartTooltip, { cursor: { fill: CURSOR_BACKGROUND_COLOR }, ...tooltipProps })] }) }));
+                    }) }), range && _jsx(PolarAngleAxis, { type: 'number', domain: range, angleAxisId: 0, tick: false }), textOptions && (_jsx("text", { x: width ? width / 2 : '50%', y: height ? height / 2 : '50%', textAnchor: 'middle', dominantBaseline: 'middle', className: 'radialbarchart-text', style: textStyle, ...remainingTextOptions, children: text })), legend && (_jsx(RechartsLegend, { formatter: (value) => _jsx("span", { className: 'text-color-darker', children: value }), iconType: legendIconType, content: contentProps => {
+                        // Supply our payload to either user-provided legend content or the default renderer.
+                        const propsWithPayload = { ...contentProps, payload: legendPayload };
+                        if (userLegendContent) {
+                            if (isFunction(userLegendContent)) {
+                                return userLegendContent(propsWithPayload);
+                            }
+                            if (React.isValidElement(userLegendContent)) {
+                                return React.cloneElement(userLegendContent, propsWithPayload);
+                            }
+                            return userLegendContent;
+                        }
+                        return _jsx(DefaultLegendContent, { ...propsWithPayload });
+                    }, ...legendProps })), tooltip && _jsx(ChartTooltip, { cursor: { fill: CURSOR_BACKGROUND_COLOR }, ...tooltipProps })] }) }));
 };
 export default RadialBarChart;

package/components/charts/ReferenceLine.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import { type ReferenceLineProps as RechartsReferenceLineProps } from 'recharts';
 export type ReferenceLineProps = Omit<RechartsReferenceLineProps, 'ref'> & {
     stroke?: string;

package/components/charts/ReferenceLine.js

@@ -1,6 +1,6 @@
 import { createElement as _createElement } from "react";
 import { ReferenceLine as RechartsReferenceLine, } from 'recharts';
-import { getColor } from './chartHelper';
+import { getColor } from "./chartHelper.js";
 export const getReferenceLineDefaultProps = () => ({
     stroke: 'color-coldplay-fountain',
 });

package/components/charts/XAxis.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { XAxis as RechartsXAxis, YAxis as RechartsYAxis } from 'recharts';
-import YAxis from './YAxis';
+import YAxis from "./YAxis.js";
 export const renderAxis = (axis, index) => {
     const key = `additional-axis-${index}`;
     if (React.isValidElement(axis)) {

package/components/checkbox/Checkbox.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useEffect } from 'react';
 import classNames from 'classnames';
-import noop from 'lodash/fp/noop';
-import { CheckboxIcon } from './CheckboxIcon';
+import { noop } from 'es-toolkit/function';
+import { CheckboxIcon } from "./CheckboxIcon.js";
 const DEFAULT_ICON_SIZE = 16;
 const ICON_LABEL_VERTICAL = 'vertical';
 const ICON_LABEL_HORIZONTAL = 'horizontal';

package/components/clearableInput/ClearableInput.d.ts

@@ -175,14 +175,6 @@ export type ClearableInputProps = {
      * when used with an input mask.
      */
     max?: string | number | undefined | Date;
-    /**
-     * Whether mask prefix and placeholder should be displayed when input is empty and
-     * has no focus.
-     *
-     * @default false
-     * @deprecated please use maskVisibility='always' instead
-     */
-    alwaysShowMask?: boolean;
     /**
      * Disabled the input component.
      *

package/components/clearableInput/ClearableInput.js

@@ -1,20 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** biome-ignore-all lint/complexity/noBannedTypes: <explanation> */
 import { useState, forwardRef, useRef } from 'react';
-import omit from 'lodash/fp/omit';
-import isNil from 'lodash/fp/isNil';
-import isEmpty from 'lodash/fp/isEmpty';
 import classNames from 'classnames';
-import isFunction from 'lodash/fp/isFunction';
-import noop from 'lodash/fp/noop';
+import { isEmpty, omit } from 'es-toolkit/compat';
+import { isFunction, isNil } from 'es-toolkit/predicate';
+import { noop } from 'es-toolkit/function';
 import { IMaskInput } from 'react-imask';
-import usePrevious from '../../hooks/usePrevious';
-import useMergeRefs from '../../hooks/useMergeRefs';
+import usePrevious from "../../hooks/usePrevious.js";
+import useMergeRefs from "../../hooks/useMergeRefs.js";
 export const DEFAULT_TYPE = 'text';
 export const SUPPORTED_TYPES = ['text', 'password', 'email'];
 const hasValue = (value) => !isEmpty(`${value}`);
 const ClearableInput = forwardRef((props, ref) => {
-    const { type = DEFAULT_TYPE, defaultValue, value, maxLength, tabIndex = 0, hasError = false, inputRef, autoComplete, onChange = noop, onBlur = noop, onFocus = noop, onClear = noop, onKeyPress = noop, onClick = noop, mask, maskPlaceholder = '_', maskVisibility = 'always', maskOverwrite = true, maskDefinitions, maskDispatch, alwaysShowMask = false, inputClassName = '', disabled = false, className = '', children, ...remainingProps } = props;
+    const { type = DEFAULT_TYPE, defaultValue, value, maxLength, tabIndex = 0, hasError = false, inputRef, autoComplete, onChange = noop, onBlur = noop, onFocus = noop, onClear = noop, onKeyPress = noop, onClick = noop, mask, maskPlaceholder = '_', maskVisibility = 'always', maskOverwrite = true, maskDefinitions, maskDispatch, inputClassName = '', disabled = false, className = '', children, ...remainingProps } = props;
     const initialValue = value || defaultValue || '';
     const [inputValue, setInputValue] = useState(initialValue);
     const [showClear, setShowClear] = useState(hasValue(initialValue));
@@ -25,10 +23,6 @@ const ClearableInput = forwardRef((props, ref) => {
     const hasMask = !!mask;
     // Calculate if mask should be visible (lazy=false means visible, lazy=true means hidden)
     const shouldShowMask = () => {
-        // For backward compatibility
-        if (alwaysShowMask) {
-            return true;
-        }
         switch (maskVisibility) {
             case 'always':
                 return true;
@@ -122,7 +116,7 @@ const ClearableInput = forwardRef((props, ref) => {
     const convertedType = type?.toLowerCase();
     const inputType = SUPPORTED_TYPES.indexOf(convertedType) !== -1 ? convertedType : DEFAULT_TYPE;
     const inputProps = {
-        ...omit(['value', 'defaultValue', 'onClear'])(remainingProps),
+        ...omit(remainingProps, ['value', 'defaultValue', 'onClear']),
         className: inputClassNames,
         autoComplete,
         type: inputType,

package/components/collapse/Collapse.d.ts

@@ -5,8 +5,6 @@ type CollapseProps = {
      * @default false
      */
     open: boolean | undefined;
-    /** Deprecated, please use `open` instead. @deprecated */
-    in?: boolean;
     /**
      * Unmount the component (remove it from the DOM) when it is collapsed.
      */

package/components/collapse/Collapse.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { motion, AnimatePresence } from 'framer-motion';
-import noop from 'lodash/fp/noop';
+import { motion, AnimatePresence } from 'motion/react';
+import { noop } from 'es-toolkit/function';
 const DEFAULT_ANIMATION_TIME_IN_MS = 200;
 const Collapse = (props) => {
     const { open = false, unmountOnExit = false, appear = false, timeout = DEFAULT_ANIMATION_TIME_IN_MS, onEntered = noop, onExited = noop, onAnimationStart = noop, children, } = props;
@@ -18,7 +18,7 @@ const Collapse = (props) => {
         open: { opacity: 1, height: 'auto' },
         collapsed: { opacity: 0, height: 0 },
     };
-    return (_jsx(_Fragment, { children: _jsx(AnimatePresence, { initial: appear, exitBeforeEnter: true, children: (open || shouldKeepContentInDom) && (_jsx(motion.div, { initial: 'collapsed', animate: open ? 'open' : 'collapsed', exit: 'collapsed', className: 'collapse display-block width-100pct', variants: variants, transition: { duration: timeout / 1000, ease: 'easeIn' }, onAnimationComplete: handleAnimationComplete, onAnimationStart: handleAnimationStart, children: children }, 'content')) }) }));
+    return (_jsx(_Fragment, { children: _jsx(AnimatePresence, { initial: appear, mode: 'wait', children: (open || shouldKeepContentInDom) && (_jsx(motion.div, { initial: 'collapsed', animate: open ? 'open' : 'collapsed', exit: 'collapsed', className: 'collapse display-block width-100pct', variants: variants, transition: { duration: timeout / 1000, ease: 'easeIn' }, onAnimationComplete: handleAnimationComplete, onAnimationStart: handleAnimationStart, children: children }, 'content')) }) }));
 };
 //
 export default Collapse;

package/components/contentLoader/ContentLoader.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 declare const RECT = "rect";
 declare const CIRCLE = "circle";
 export type ContentLoaderProps = {

package/components/contentLoader/ContentLoader.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { default as _ContentLoader } from 'react-content-loader';
-import cond from 'lodash/fp/cond';
-import isNil from 'lodash/fp/isNil';
-import useDarkMode from '../../hooks/useDarkMode';
+import { isNil } from 'es-toolkit/predicate';
+import { cond } from 'es-toolkit/compat';
+import useDarkMode from "../../hooks/useDarkMode.js";
 const RECT = 'rect';
 const CIRCLE = 'circle';
 const DEFAULT_SPEED = 2;

package/components/dataTabs/DataTab.d.ts

@@ -1,4 +1,5 @@
-import React, { type PropsWithChildren } from 'react';
+import type React from 'react';
+import type { PropsWithChildren } from 'react';
 export type DataTabProps = {
     /**
      * Whether this tab is the one currently active.
@@ -20,6 +21,14 @@ export type DataTabProps = {
      * The content for the tab.
      */
     title: React.ReactNode;
+    /**
+     * Callback for when the animation starts.
+     */
+    onAnimationStart?: VoidFunction;
+    /**
+     * Callback for when the animation ends.
+     */
+    onAnimationEnd?: VoidFunction;
     /**
      * Additional classes to be set on the element.
      */

package/components/dataTabs/DataTab.js

@@ -1,20 +1,15 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 const DataTab = (props) => {
     const { active = false, title, // exclude from remainingProps to avoid being set to the div element
-    tabKey, disableTransition = false, className = '', children, ...remainingProps } = props;
+    tabKey, disableTransition = false, className = '', onAnimationStart = () => { }, onAnimationEnd = () => { }, children, ...remainingProps } = props;
     if (disableTransition) {
         return _jsx("div", { children: active && children });
     }
     if (!active) {
         return null;
     }
-    return (
-    // @ts-ignore
-    _createElement(motion.div, { ...remainingProps, key: tabKey, initial: { x: 0, y: 0, opacity: 0 }, animate: { x: 0, y: 0, opacity: 1 }, exit: { x: 0, y: 0, opacity: 0 }, transition: { duration: 0.1 }, 
-        // TODO: added "fade in" for backwards compatibility for service tests
-        // To be removed for next major version
-        className: 'fade in' }, children));
+    return (_createElement(motion.div, { ...remainingProps, key: tabKey, initial: { x: 0, y: 0, opacity: 0 }, animate: { x: 0, y: 0, opacity: 1 }, exit: { x: 0, y: 0, opacity: 0 }, transition: { duration: 0.1 }, onAnimationStart: onAnimationStart, onAnimationEnd: onAnimationEnd }, children));
 };
 export default DataTab;

package/components/dataTabs/DataTabHeader.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export type DataTabHeaderProps = {
     isActive?: boolean;
     tabKey: string;