@rio-cloud/rio-uikit 1.4.0 → 1.5.0

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

@@ -10,23 +10,28 @@ 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 ReferenceLine_1 = require("./ReferenceLine");
+const Line_1 = require("./Line");
+const Area_1 = require("./Area");
 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 = tslib_1.__rest(props, ["width", "height", "data", "dataUnit", "dataKey", "lines", "bars", "areas", "referenceLines", "xAxisOptions", "yAxisOptions", "gridOptions", "containerOptions", "showXAxis", "showYAxis", "showGrid", "legend", "brush", "tooltip"]);
+    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 } = props, remainingProps = tslib_1.__rest(props, ["width", "height", "data", "dataUnit", "dataKey", "lines", "bars", "areas", "referenceLines", "xAxisOptions", "yAxisOptions", "additionalAxes", "gridOptions", "containerOptions", "showXAxis", "showYAxis", "showGrid", "legend", "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) : {};
-    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, Object.assign({}, containerOptions, { children: (0, jsx_runtime_1.jsxs)(recharts_1.ComposedChart, Object.assign({ width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 } }, 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({}, tooltipProps)), legend && (0, jsx_runtime_1.jsx)(recharts_1.Legend, Object.assign({}, legendProps)), areas.map(area => {
-                    const _a = area.props, { strokeColor, fill } = _a, remainingAreaProps = tslib_1.__rest(_a, ["strokeColor", "fill"]);
+    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, Object.assign({}, containerOptions, { children: (0, jsx_runtime_1.jsxs)(recharts_1.ComposedChart, Object.assign({ width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 } }, 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({}, tooltipProps)), legend && (0, jsx_runtime_1.jsx)(recharts_1.Legend, Object.assign({}, legendProps)), areas.map(area => {
+                    const areaPropsWithDefault = Object.assign(Object.assign({}, (0, Area_1.getAreaDefaultProps)()), area.props);
+                    const { strokeColor, fill } = areaPropsWithDefault, remainingAreaProps = tslib_1.__rest(areaPropsWithDefault, ["strokeColor", "fill"]);
                     return ((0, react_1.createElement)(recharts_1.Area, Object.assign({}, remainingAreaProps, { key: area.key, stroke: (0, chartHelper_1.getColor)(strokeColor), fill: (0, chartHelper_1.getColor)(fill) })));
                 }), bars.map(bar => {
-                    const _a = bar.props, { color } = _a, remainingBarProps = tslib_1.__rest(_a, ["color"]);
+                    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 }), bar.key);
                 }), lines.map(line => {
-                    const _a = line.props, { strokeColor } = _a, remainingLineProps = tslib_1.__rest(_a, ["strokeColor"]);
-                    return (0, react_1.createElement)(recharts_1.Line, Object.assign({}, remainingLineProps, { key: line.key, stroke: (0, chartHelper_1.getColor)(strokeColor) }));
-                }), 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') })] })) })));
+                    const linePropsWithDefault = Object.assign(Object.assign({}, (0, Line_1.getLineDefaultProps)()), line.props);
+                    const { strokeColor } = linePropsWithDefault, remainingLineProps = tslib_1.__rest(linePropsWithDefault, ["strokeColor"]);
+                    return ((0, react_1.createElement)(recharts_1.Line, Object.assign({}, remainingLineProps, { key: line.key, stroke: (0, chartHelper_1.getColor)(strokeColor) })));
+                }), referenceLines.map(ReferenceLine_1.renderReferenceLine), brush && (0, jsx_runtime_1.jsx)(recharts_1.Brush, { stroke: (0, chartHelper_1.getColor)('gray') })] })) })));
 };
 exports.default = ComposedChart;

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getLegendDefaultProps = void 0;
-// @ts-ignore-next-line importsNotUsedAsValues
+// @ts-ignore importsNotUsedAsValues
 require("react");
 const getLegendDefaultProps = () => ({
     iconType: 'circle',

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

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

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

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

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import { LineChart as RechartsLineChart, type XAxisProps, type YAxisProps } from 'recharts';
-import { ChartTooltipProps } from './ChartTooltip';
+import { LineChart as RechartsLineChart, type XAxisProps, type YAxisProps, type BrushProps } from 'recharts';
+import { type ChartTooltipProps } from './ChartTooltip';
 import { type LegendProps } from './Legend';
-import type { LineProps } from './Line';
-import type { ReferenceLineProps } from './ReferenceLine';
+import { type LineProps } from './Line';
+import { type ReferenceLineProps } from './ReferenceLine';
 import type { GridProps } from './ChartGrid';
 import type { ResponsiveContainerProps } from './ResponsiveContainer';
 type RechartsLineChartProps = React.ComponentProps<typeof RechartsLineChart>;
@@ -17,6 +17,7 @@ export type LineChartProps<T extends object> = Omit<RechartsLineChartProps, 'dat
     referenceLines?: React.ReactElement<ReferenceLineProps>[];
     xAxisOptions?: XAxisProps;
     yAxisOptions?: YAxisProps;
+    additionalAxes?: React.ReactElement<XAxisProps | YAxisProps>[];
     gridOptions?: GridProps;
     containerOptions?: ResponsiveContainerProps;
     showXAxis?: boolean;
@@ -25,6 +26,7 @@ export type LineChartProps<T extends object> = Omit<RechartsLineChartProps, 'dat
     legend?: React.ReactElement<LegendProps> | boolean;
     tooltip?: React.ReactElement<ChartTooltipProps> | boolean;
     brush?: boolean;
+    brushOptions?: BrushProps;
 };
 declare const LineChart: <T extends object>(props: LineChartProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default LineChart;

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

@@ -10,16 +10,17 @@ 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 Line_1 = require("./Line");
+const ReferenceLine_1 = require("./ReferenceLine");
 const LineChart = (props) => {
-    const { width, height, data = [], dataUnit = '', dataKey = 'value', lines = [], 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", "lines", "referenceLines", "xAxisOptions", "yAxisOptions", "gridOptions", "containerOptions", "showXAxis", "showYAxis", "showGrid", "legend", "brush", "tooltip"]);
+    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 = {} } = props, remainingProps = tslib_1.__rest(props, ["width", "height", "data", "dataUnit", "dataKey", "lines", "referenceLines", "xAxisOptions", "yAxisOptions", "gridOptions", "containerOptions", "showXAxis", "showYAxis", "additionalAxes", "showGrid", "legend", "brush", "tooltip", "brushOptions"]);
     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.LineChart, Object.assign({ width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 } }, 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({}, tooltipProps)), legend && (0, jsx_runtime_1.jsx)(recharts_1.Legend, Object.assign({}, legendProps)), lines.map(line => {
-                    const _a = line.props, { strokeColor } = _a, remainingLineProps = tslib_1.__rest(_a, ["strokeColor"]);
-                    return (0, react_1.createElement)(recharts_1.Line, Object.assign({}, remainingLineProps, { key: line.key, stroke: (0, chartHelper_1.getColor)(strokeColor) }));
-                }), 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.LineChart, Object.assign({ width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 } }, 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({}, tooltipProps)), legend && (0, jsx_runtime_1.jsx)(recharts_1.Legend, Object.assign({}, legendProps)), lines.map(line => {
+                    const linePropsWithDefault = Object.assign(Object.assign({}, (0, Line_1.getLineDefaultProps)()), line.props);
+                    const { strokeColor } = linePropsWithDefault, remainingLineProps = tslib_1.__rest(linePropsWithDefault, ["strokeColor"]);
+                    return ((0, react_1.createElement)(recharts_1.Line, Object.assign({}, remainingLineProps, { key: line.key, stroke: (0, chartHelper_1.getColor)(strokeColor) })));
+                }), referenceLines.map(ReferenceLine_1.renderReferenceLine), brush && (0, jsx_runtime_1.jsx)(recharts_1.Brush, Object.assign({}, brushOptions, { stroke: (0, chartHelper_1.getColor)('gray') }))] })) })));
 };
 exports.default = LineChart;

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

@@ -1,7 +1,11 @@
-/// <reference types="react" />
-import type { ReferenceLineProps as RechartsReferenceLineProps } from 'recharts';
+import React from 'react';
+import { type ReferenceLineProps as RechartsReferenceLineProps } from 'recharts';
 export type ReferenceLineProps = Omit<RechartsReferenceLineProps, 'ref'> & {
     stroke?: string;
 };
-declare const Line: React.FC<ReferenceLineProps>;
-export default Line;
+export declare const getReferenceLineDefaultProps: () => {
+    stroke: string;
+};
+export declare const renderReferenceLine: (element: React.ReactElement<ReferenceLineProps>) => import("react/jsx-runtime").JSX.Element;
+declare const ReferenceLine: (props: ReferenceLineProps) => null;
+export default ReferenceLine;

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

@@ -1,4 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const Line = ({ stroke = 'color-coldplay-fountain' }) => null;
-exports.default = Line;
+exports.renderReferenceLine = exports.getReferenceLineDefaultProps = void 0;
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
+const recharts_1 = require("recharts");
+const chartHelper_1 = require("./chartHelper");
+const getReferenceLineDefaultProps = () => ({
+    stroke: 'color-coldplay-fountain',
+});
+exports.getReferenceLineDefaultProps = getReferenceLineDefaultProps;
+const renderReferenceLine = (element) => {
+    const referenceLinePropsWithDefault = Object.assign(Object.assign({}, (0, exports.getReferenceLineDefaultProps)()), element.props);
+    const { stroke } = referenceLinePropsWithDefault, remainingReferenceLineProps = tslib_1.__rest(referenceLinePropsWithDefault, ["stroke"]);
+    return (0, react_1.createElement)(recharts_1.ReferenceLine, Object.assign({}, remainingReferenceLineProps, { key: element.key, stroke: (0, chartHelper_1.getColor)(stroke) }));
+};
+exports.renderReferenceLine = renderReferenceLine;
+// This is only used for passing this as prop to the UIKIT charts wrapper.
+// Recharts component need to be direct children of the chart itself and cannot be wrapped again
+const ReferenceLine = (props) => null;
+exports.default = ReferenceLine;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type XAxisProps as XAxisPropsProps } from 'recharts';
+import { type YAxisProps } from './YAxis';
+export type XAxisProps = Partial<XAxisPropsProps> & {};
+export declare const renderAxis: (axis: React.ReactElement<XAxisProps | YAxisProps>, index: number) => import("react/jsx-runtime").JSX.Element | null;
+declare const XAxis: React.FC<XAxisProps>;
+export default XAxis;

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderAxis = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const recharts_1 = require("recharts");
+const YAxis_1 = tslib_1.__importDefault(require("./YAxis"));
+const renderAxis = (axis, index) => {
+    const key = `additional-axis-${index}`;
+    if (react_1.default.isValidElement(axis)) {
+        if (axis.type === XAxis) {
+            return (0, jsx_runtime_1.jsx)(recharts_1.XAxis, Object.assign({}, axis.props), key);
+        }
+        if (axis.type === YAxis_1.default) {
+            return (0, jsx_runtime_1.jsx)(recharts_1.YAxis, Object.assign({}, axis.props), key);
+        }
+    }
+    return null;
+};
+exports.renderAxis = renderAxis;
+const XAxis = props => null;
+exports.default = XAxis;

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

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

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const YAxis = props => null;
+exports.default = YAxis;

package/lib/es/components/collapse/Collapse.js

@@ -6,7 +6,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 require("react");
 const framer_motion_1 = require("framer-motion");
 const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
-const DEFAULT_ANIMATION_TIME_IN_MS = 270;
+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_1.default, onExited = noop_1.default, onAnimationStart = noop_1.default, children, } = props;
     const shouldKeepContentInDom = !unmountOnExit;
@@ -23,6 +23,7 @@ const Collapse = (props) => {
         open: { opacity: 1, height: 'auto' },
         collapsed: { opacity: 0, height: 0 },
     };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, Object.assign({ initial: appear, exitBeforeEnter: true }, { children: (open || shouldKeepContentInDom) && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ initial: 'collapsed', animate: open ? 'open' : 'collapsed', exit: 'collapsed', className: 'collapse display-block width-100pct', variants: variants, transition: { duration: timeout / 1000, ease: [0.04, 0.62, 0.23, 0.98] }, onAnimationComplete: handleAnimationComplete, onAnimationStart: handleAnimationStart }, { children: children }), 'content')) })) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, Object.assign({ initial: appear, exitBeforeEnter: true }, { children: (open || shouldKeepContentInDom) && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ 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')) })) }));
 };
+//
 exports.default = Collapse;

package/lib/es/components/dropdown/ButtonDropdown.d.ts

@@ -117,5 +117,7 @@ export type ButtonDropdownProps = {
      */
     className?: string;
 };
-declare const ButtonDropdown: (props: ButtonDropdownProps) => import("react/jsx-runtime").JSX.Element;
+declare const ButtonDropdown: React.ForwardRefExoticComponent<ButtonDropdownProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>;
 export default ButtonDropdown;

package/lib/es/components/dropdown/ButtonDropdown.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+// biome-ignore lint/style/useImportType: <explanation>
 const react_1 = require("react");
 const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
 const react_popper_1 = require("react-popper");
@@ -27,8 +28,8 @@ const getPlacement = (pullRight, dropup) => {
     }
     return 'bottom-start';
 };
-const ButtonDropdown = (props) => {
-    const { id = Math.random().toString(36).substr(2, 16), items = [], bsSize = 'md', bsStyle = 'default', variant, disabled = false, iconOnly = false, title, splitButton = false, customDropdown, open, dropup = false, pullRight = false, noCaret = false, onOpen = noop_1.default, onClose = noop_1.default, onLabelButtonClick = noop_1.default, usePortal = false, popperConfig, toggleClassName = '', dropdownClassName, className = '' } = props, remainingProps = tslib_1.__rest(props, ["id", "items", "bsSize", "bsStyle", "variant", "disabled", "iconOnly", "title", "splitButton", "customDropdown", "open", "dropup", "pullRight", "noCaret", "onOpen", "onClose", "onLabelButtonClick", "usePortal", "popperConfig", "toggleClassName", "dropdownClassName", "className"]);
+const ButtonDropdown = (0, react_1.forwardRef)((props, ref) => {
+    const { id = Math.random().toString(36).slice(2, 16), items = [], bsSize = 'md', bsStyle = 'default', variant, disabled = false, iconOnly = false, title, splitButton = false, customDropdown, open, dropup = false, pullRight = false, noCaret = false, onOpen = noop_1.default, onClose = noop_1.default, onLabelButtonClick = noop_1.default, usePortal = false, popperConfig, toggleClassName = '', dropdownClassName, className = '' } = props, remainingProps = tslib_1.__rest(props, ["id", "items", "bsSize", "bsStyle", "variant", "disabled", "iconOnly", "title", "splitButton", "customDropdown", "open", "dropup", "pullRight", "noCaret", "onOpen", "onClose", "onLabelButtonClick", "usePortal", "popperConfig", "toggleClassName", "dropdownClassName", "className"]);
     const [internalOpen, setInternalOpen] = (0, react_1.useState)(open);
     const [refDropdownToggle, setRefDropdownToggle] = (0, react_1.useState)(null);
     const [refDropdownMenu, setRefDropdownMenu] = (0, react_1.useState)(null);
@@ -91,6 +92,6 @@ const ButtonDropdown = (props) => {
     const wrapperClasses = (0, classnames_1.default)('dropdown', 'btn-group', isOpen && 'open', className);
     const dropdownClasses = (0, classnames_1.default)(usePortal && 'dropdown-portal', splitButton && pullRight && 'pull-right', dropdownClassName);
     const dropdownMenu = ((0, jsx_runtime_1.jsx)(MenuItemList_1.default, Object.assign({ className: dropdownClasses, ref: setRefDropdownMenu, style: styles.popper }, attributes.popper, { children: customDropdown ? customDropdown : (0, jsx_runtime_1.jsx)(MenuItems_1.default, { items: items, closeMenu: toggleOpen }) })));
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: wrapperClasses, ref: wrapperRef }, { children: [(0, jsx_runtime_1.jsx)(DropdownToggleButton_1.default, Object.assign({ id: id, splitButton: splitButton, bsStyle: bsStyle, bsSize: bsSize, variant: variant, iconOnly: iconOnly, disabled: disabled, ref: setRefDropdownToggle, onClick: handleDropdownButtonClick, className: toggleClassName }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title, shouldShowCaret && (0, jsx_runtime_1.jsx)(Caret_1.default, {})] }) })), splitButton && ((0, jsx_runtime_1.jsx)(SplitCaretButton_1.default, { id: id, bsStyle: bsStyle, bsSize: bsSize, disabled: disabled, className: toggleClassName, onClick: toggleOpen, ref: setRefSplitButtonToggle })), isOpen && usePortal && react_dom_1.default.createPortal(dropdownMenu, dropdownRoot), isOpen && !usePortal && dropdownMenu] })));
-};
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: wrapperClasses, ref: wrapperRef }, { children: [(0, jsx_runtime_1.jsx)(DropdownToggleButton_1.default, Object.assign({ id: id, splitButton: splitButton, bsStyle: bsStyle, bsSize: bsSize, variant: variant, iconOnly: iconOnly, disabled: disabled, ref: setRefDropdownToggle, onClick: handleDropdownButtonClick, outerRef: ref, className: toggleClassName }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title, shouldShowCaret && (0, jsx_runtime_1.jsx)(Caret_1.default, {})] }) })), splitButton && ((0, jsx_runtime_1.jsx)(SplitCaretButton_1.default, { id: id, bsStyle: bsStyle, bsSize: bsSize, disabled: disabled, className: toggleClassName, onClick: toggleOpen, ref: setRefSplitButtonToggle })), isOpen && usePortal && react_dom_1.default.createPortal(dropdownMenu, dropdownRoot), isOpen && !usePortal && dropdownMenu] })));
+});
 exports.default = ButtonDropdown;

package/lib/es/components/dropdown/DropdownToggleButton.d.ts

@@ -9,6 +9,7 @@ export type DropdownToggleButtonProps = HTMLProps<HTMLButtonElement> & {
     bsSize: BUTTON_SIZE;
     bsStyle: BUTTON_STYLE;
     variant?: BUTTON_VARIANT;
+    outerRef?: React.Ref<HTMLButtonElement>;
     className?: string;
 };
 declare const DropdownToggleButton: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<DropdownToggleButtonProps>, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/lib/es/components/dropdown/DropdownToggleButton.js

@@ -5,9 +5,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const Button_1 = tslib_1.__importDefault(require("../button/Button"));
+const useMergeRefs_1 = tslib_1.__importDefault(require("../../hooks/useMergeRefs"));
 const DropdownToggleButton = (0, react_1.forwardRef)((props, ref) => {
-    const { id, disabled, bsSize, bsStyle, variant, splitButton = false, onClick, className = '', children } = props, remainingProps = tslib_1.__rest(props, ["id", "disabled", "bsSize", "bsStyle", "variant", "splitButton", "onClick", "className", "children"]);
+    const { id, disabled, bsSize, bsStyle, variant, splitButton = false, onClick, className = '', children, outerRef } = props, remainingProps = tslib_1.__rest(props, ["id", "disabled", "bsSize", "bsStyle", "variant", "splitButton", "onClick", "className", "children", "outerRef"]);
+    const toggleRef = (0, useMergeRefs_1.default)(outerRef, ref);
     const labelButtonClasses = (0, classnames_1.default)(!splitButton && 'dropdown-toggle', !splitButton && className);
-    return ((0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({}, remainingProps, { id: splitButton ? `button-${id}` : id, type: 'button', ref: ref, disabled: disabled, bsStyle: bsStyle, bsSize: bsSize, variant: variant, onClick: onClick, className: labelButtonClasses }, { children: children })));
+    return ((0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({}, remainingProps, { id: splitButton ? `button-${id}` : id, type: 'button', ref: toggleRef, disabled: disabled, bsStyle: bsStyle, bsSize: bsSize, variant: variant, onClick: onClick, className: labelButtonClasses }, { children: children })));
 });
 exports.default = DropdownToggleButton;

package/lib/es/components/fade/FadeExpander.d.ts

@@ -0,0 +1,27 @@
+import { type PropsWithChildren } from 'react';
+type FadeExpanderProps = {
+    /**
+     * Defines if the content is shown or not.
+     *
+     * @default false
+     */
+    show: boolean;
+    /**
+     * Allows customization of animation duration.
+     *
+     * @default 0.2
+     */
+    duration?: number;
+    /**
+     * Delay in seconds before starting the animation.
+     *
+     * @default 0
+     */
+    delay?: number;
+    /**
+     * Additional classes set to the wrapper element.
+     */
+    className?: string;
+};
+declare const FadeExpander: (props: PropsWithChildren<FadeExpanderProps>) => import("react/jsx-runtime").JSX.Element;
+export default FadeExpander;

package/lib/es/components/fade/FadeExpander.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const framer_motion_1 = require("framer-motion");
+const THRESHOLD_TIMEOUT_MS = 200;
+const FadeExpander = (props) => {
+    const { children, show = false, duration = 0.2, delay = 0, className = '' } = props;
+    const [isVisible, setIsVisible] = (0, react_1.useState)(show);
+    const [overflow, setOverflow] = (0, react_1.useState)('hidden'); // Start with hidden overflow
+    const durationRef = (0, react_1.useRef)(duration);
+    // Effect to manage visibility based on show prop
+    (0, react_1.useEffect)(() => {
+        if (show) {
+            // Set to visible when show is true
+            setIsVisible(true);
+        }
+        else {
+            // Set overflow to hidden immediately when show is false
+            setOverflow('hidden');
+            // Delay setting isVisible to false so the overflow can change before
+            setTimeout(() => {
+                setIsVisible(false);
+            }, 0);
+        }
+    }, [show]);
+    const handleAnimationComplete = () => {
+        if (show) {
+            // Set overflow to visible after animation is done
+            setTimeout(() => setOverflow('visible'), durationRef.current * 1000 + THRESHOLD_TIMEOUT_MS);
+        }
+    };
+    return (
+    // @ts-ignore
+    (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, Object.assign({ onExitComplete: () => setOverflow('hidden') }, { children: isVisible && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ initial: { height: 0, opacity: 0 }, animate: { height: 'auto', opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: {
+                height: { duration, delay },
+                opacity: { duration, delay },
+                ease: 'easeIn',
+            }, 
+            // To ensures smooth height transition, the overflow should be "hidden" during the animation
+            style: { overflow }, onAnimationComplete: handleAnimationComplete, className: className }, { children: children }))) })));
+};
+exports.default = FadeExpander;

package/lib/es/components/fade/FadeUp.d.ts

@@ -0,0 +1,27 @@
+import { type ComponentProps, type PropsWithChildren } from 'react';
+type FadeUpProps = Omit<ComponentProps<'div'>, 'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'> & {
+    /**
+     * Defines the time the animation should wait until it starts.
+     *
+     * @default 0
+     */
+    delay?: number;
+    /**
+     * Defines the duration in seconds of the fade up animation.
+     *
+     * @default 0.4
+     */
+    duration?: number;
+    /**
+     * Defines the y offset from the bottom where the element starts to fade in.
+     *
+     * @default 15
+     */
+    offset?: number;
+    /**
+     * Additional classes names added to the motion div wrapper.
+     */
+    className?: string;
+};
+declare const FadeUp: (props: PropsWithChildren<FadeUpProps>) => import("react/jsx-runtime").JSX.Element;
+export default FadeUp;

package/lib/es/components/fade/FadeUp.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const framer_motion_1 = require("framer-motion");
+const useOnScreen_1 = tslib_1.__importDefault(require("../../hooks/useOnScreen"));
+const FadeUp = (props) => {
+    const { delay = 0, duration = 0.4, className = '', offset = 15, children } = props, remainingProps = tslib_1.__rest(props, ["delay", "duration", "className", "offset", "children"]);
+    const ref = (0, react_1.useRef)(null);
+    const isInView = (0, useOnScreen_1.default)(ref);
+    const [isVisible, setIsVisible] = (0, react_1.useState)(false);
+    const variants = {
+        hidden: {
+            opacity: 0,
+            y: offset,
+        },
+        visible: {
+            opacity: 1,
+            y: 0,
+        },
+    };
+    (0, react_1.useEffect)(() => {
+        if (isInView && !isVisible) {
+            setIsVisible(true);
+        }
+    }, [isInView, isVisible]);
+    return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ ref: ref, variants: variants, initial: 'hidden', animate: isVisible ? 'visible' : 'hidden', transition: { delay, type: 'spring', duration } }, remainingProps, { className: className }, { children: children })));
+};
+exports.default = FadeUp;

package/lib/es/components/listMenu/ListMenu.d.ts

@@ -27,6 +27,13 @@ export type ListMenuProps<T extends ListMenuNavItem> = {
      * The placeholder text for the filter input.
      */
     filterPlaceholder?: string;
+    /**
+     * Gets called when the filter input changes.
+     *
+     * @param value
+     * @returns
+     */
+    onFilterChange?: (value: string) => void;
     /**
      * A localized message to be shown when the filter result is empty.
      */

package/lib/es/components/listMenu/ListMenu.js

@@ -18,7 +18,7 @@ const MOBILE_MAX_WIDTH = 580;
 const filterMenuItems = (items, value, filterKey) => items.map(item => (Object.assign(Object.assign({}, item), { navItems: item.navItems.filter(navItem => navItem[filterKey].toLowerCase().includes(value.toLowerCase())) })));
 const hasMenuItems = (items) => items.find(({ navItems }) => !(0, isEmpty_1.default)(navItems));
 const ListMenu = (props) => {
-    const { menuItems, focusFilter = false, enableFilter = false, filterPlaceholder, notFoundMessage, className = '', groupClassName = '', responsive = true, autoClose = true, filterKey = 'key', trailingInputAddon } = props, remainingProps = tslib_1.__rest(props, ["menuItems", "focusFilter", "enableFilter", "filterPlaceholder", "notFoundMessage", "className", "groupClassName", "responsive", "autoClose", "filterKey", "trailingInputAddon"]);
+    const { menuItems, focusFilter = false, enableFilter = false, filterPlaceholder, onFilterChange = () => { }, notFoundMessage, className = '', groupClassName = '', responsive = true, autoClose = true, filterKey = 'key', trailingInputAddon } = props, remainingProps = tslib_1.__rest(props, ["menuItems", "focusFilter", "enableFilter", "filterPlaceholder", "onFilterChange", "notFoundMessage", "className", "groupClassName", "responsive", "autoClose", "filterKey", "trailingInputAddon"]);
     const [filterValue, setFilterValue] = (0, react_1.useState)('');
     const [isMobileMode, setIsMobileMode] = (0, react_1.useState)(false);
     const [isExpanderOpen, setIsExpanderOpen] = (0, react_1.useState)(false);
@@ -59,7 +59,10 @@ const ListMenu = (props) => {
     });
     (0, react_1.useLayoutEffect)(() => buildMobileHeader, [menuItems]);
     const handleClear = () => focusFilter && focusInput();
-    const handleFilterChange = (value) => setFilterValue(value);
+    const handleFilterChange = (value) => {
+        setFilterValue(value);
+        onFilterChange(value);
+    };
     const filteredMenuItems = filterMenuItems(menuItems, filterValue, filterKey);
     const handleExpanderBodyClick = (event) => {
         var _a;
@@ -68,7 +71,7 @@ const ListMenu = (props) => {
             setIsExpanderOpen(false);
         }
     };
-    const formClassNames = (0, classnames_1.default)('form-group', 'margin-top-5', 'margin-bottom-5', 'padding-left-15', 'padding-right-15', 'padding-bottom-15', 'position-sticky', 'top-0');
+    const formClassNames = (0, classnames_1.default)('form-group', 'margin-bottom-5', 'padding-left-15', 'padding-right-15', 'padding-bottom-15', 'position-sticky', 'top-0');
     const listMenu = ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: `ListMenu ${className}`, ref: listRef }, { children: [enableFilter && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: formClassNames }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'input-group width-100pct' }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'input-group-addon' }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-search', "aria-hidden": 'true' }) })), (0, jsx_runtime_1.jsx)(ClearableInput_1.default, { value: filterValue, inputRef: inputRef, placeholder: filterPlaceholder, onChange: handleFilterChange, onClear: handleClear }), trailingInputAddon && trailingInputAddon] })) }))), !hasMenuItems(filteredMenuItems) && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'padding-top-25 text-center text-color-gray' }, { children: notFoundMessage }))), filteredMenuItems.map(menuGroup => ((0, jsx_runtime_1.jsx)(ListMenuGroup_1.default, { className: groupClassName, menuGroup: menuGroup }, crypto.randomUUID())))] })));
     if (responsive && isMobileMode) {
         return ((0, jsx_runtime_1.jsx)(ExpanderPanel_1.default, Object.assign({ title: mobileHeader, bsStyle: 'default', open: isExpanderOpen, onToggle: () => setIsExpanderOpen(!isExpanderOpen), unmountOnExit: false, className: 'shadow-default' }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ onClick: handleExpanderBodyClick }, { children: listMenu })) })));

package/lib/es/components/map/components/features/Route.d.ts

@@ -1,10 +1,20 @@
 /// <reference types="react" />
+import { type ArrowStyle } from './basics/Polyline';
 import type { Position } from '../../utils/mapTypes';
 import type { EventListenerMap } from '../../utils/eventHandling';
 export declare const MISSING_POSITIONS_EXCEPTION_MSG = "Route requires a minimum of 1 positions";
 export declare const TO_LESS_LINE_WIDTH_EXCEPTION_MSG = "If isBorderIncludedInWidth is set to true than width has to be greater than twice of borderWidth";
+export declare const DEFAULT_LINE_STROKE_COLOR = "rgba(48, 194, 255, 1)";
+export declare const DEFAULT_LINE_STROKE_COLOR_REDUCED = "rgba(48, 194, 255, 0.5)";
+export declare const DEFAULT_LINE_STROKE_COLOR_ALTERNATIVE = "rgb(200, 243, 247)";
+export declare const DEFAULT_BORDER_STROKE_COLOR = "rgba(22, 100, 141, 1)";
+export declare const DEFAULT_BORDER_STROKE_COLOR_REDUCED = "rgba(255, 255, 255, 0)";
+export declare const ROUTE_COLOR_DANGER = "#e22837";
+export declare const ROUTE_COLOR_WARNING = "#ff8e3c";
+export declare const ROUTE_COLOR_SUCCESS = "#5cb85c";
+export declare const ROUTE_COLOR_WHITE = "rgba(255, 255, 255, 1)";
 export type RouteStyle = {
-    width: number;
+    width?: number;
     color?: string;
     borderWidth?: number;
     borderColor?: string;
@@ -12,7 +22,7 @@ export type RouteStyle = {
     lineDash?: number[];
 };
 export type RouteProps = {
-    arrowStyle?: object;
+    arrowStyle?: ArrowStyle;
     hasArrows?: boolean;
     positions: Position[];
     style?: RouteStyle;
@@ -23,6 +33,7 @@ export type RouteProps = {
     middleIcon?: JSX.Element;
     endIcon?: JSX.Element;
     markers?: JSX.Element[];
+    customData?: object;
 };
 declare const Route: (props: RouteProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Route;