@rio-cloud/rio-uikit 0.16.4-beta.7 → 1.0.0

package/components/charts/RadialBarChart.d.ts

@@ -1,20 +1,38 @@
+import React from 'react';
+import { RadialBarChart as RechartsRadialBarChart, type RadialBarProps as RechartsRadialBarProps } from 'recharts';
+import { type DataType } from './chartHelper';
+import { type LegendProps } from './Legend';
+import { type ChartTooltipProps } from './ChartTooltip';
+import type { ResponsiveContainerProps } from './ResponsiveContainer';
+export type RadialBarChartDataType = DataType;
+export type RadialBarProps = Omit<RechartsRadialBarProps, 'ref'> & {};
+export type TextOptions = Record<string, unknown> & {
+    text?: string;
+    size?: string;
+    weight?: string;
+    color?: string;
+};
+type RechartsRadialBarChartProps = React.ComponentProps<typeof RechartsRadialBarChart>;
+export type RadialBarChartProps<T extends DataType> = Omit<RechartsRadialBarChartProps, 'data'> & {
+    width?: number;
+    height?: number;
+    data: T[];
+    dataKey?: string | number | ((obj: T) => any);
+    startAngle?: number;
+    endAngle?: number;
+    outerRadius?: number | string;
+    innerRadius?: number | string;
+    cx?: number | string;
+    cy?: number | string;
+    textOptions?: TextOptions;
+    radialBarOptions?: RadialBarProps;
+    containerOptions?: ResponsiveContainerProps;
+    showBarLabel?: boolean;
+    cornerRadius?: number;
+    background?: boolean;
+    range?: number[];
+    legend?: React.ReactElement<LegendProps> | boolean;
+    tooltip?: React.ReactElement<ChartTooltipProps> | boolean;
+};
+declare const RadialBarChart: <T extends DataType>(props: RadialBarChartProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default RadialBarChart;
-declare function RadialBarChart(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace RadialBarChart {
-    namespace defaultProps {
-        const width: number;
-        const height: number;
-        const data: never[];
-        const dataKey: string;
-        const startAngle: number;
-        const endAngle: number;
-        const innerRadius: string;
-        const outerRadius: string;
-        const clockWise: boolean;
-        const legend: import("react/jsx-runtime").JSX.Element;
-        const showBarLabel: boolean;
-        const cornerRadius: number;
-        const background: boolean;
-        const tooltip: boolean;
-    }
-}

package/components/charts/RadialBarChart.js

@@ -1,40 +1,26 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { RadialBarChart as RechartsRadialBarChart, RadialBar as RechartsRadialBar, Legend as RechartsLegend, PolarAngleAxis, Cell, Tooltip as RechartsTooltip, ResponsiveContainer, } from 'recharts';
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+import { RadialBarChart as RechartsRadialBarChart, RadialBar as RechartsRadialBar, 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 Legend from './Legend';
-const RadialBarChart = props => {
-    const { width, height, data, dataKey, startAngle, endAngle, innerRadius, outerRadius, clockWise, legend, textOptions, radialBarOptions, showBarLabel, cornerRadius, background, range, tooltip } = props, remainingProps = __rest(props, ["width", "height", "data", "dataKey", "startAngle", "endAngle", "innerRadius", "outerRadius", "clockWise", "legend", "textOptions", "radialBarOptions", "showBarLabel", "cornerRadius", "background", "range", "tooltip"]);
+import ChartTooltip from './ChartTooltip';
+const RadialBarChart = (props) => {
+    const { width, height, data = [], dataKey = 'value', startAngle = 180, endAngle = 0, innerRadius = '30%', outerRadius = '100%', legend = _jsx(Legend, {}), textOptions, radialBarOptions, containerOptions, showBarLabel = false, cornerRadius = 30, background = true, range, tooltip = false } = props, remainingProps = __rest(props, ["width", "height", "data", "dataKey", "startAngle", "endAngle", "innerRadius", "outerRadius", "legend", "textOptions", "radialBarOptions", "containerOptions", "showBarLabel", "cornerRadius", "background", "range", "tooltip"]);
     const _a = textOptions || {}, { text, size = '500%', weight = 'normal', color = 'gray-darkest' } = _a, remainingTextOptions = __rest(_a, ["text", "size", "weight", "color"]);
     const textStyle = {
         fontSize: size,
         fontWeight: weight,
         fill: color && getColor(color),
     };
-    return (_jsx(ResponsiveContainer, Object.assign({ width: '100%', height: '100%' }, { children: _jsxs(RechartsRadialBarChart, Object.assign({ width: width, height: height, data: data, innerRadius: innerRadius, outerRadius: outerRadius, startAngle: startAngle, endAngle: endAngle }, remainingProps, { children: [_jsx(RechartsRadialBar, Object.assign({ label: showBarLabel && { fill: '#666', position: 'insideStart' }, background: background, clockWise: clockWise, dataKey: dataKey, cornerRadius: cornerRadius }, radialBarOptions, { children: data.map((entry, index) => {
+    const tooltipProps = isObject(tooltip) ? tooltip.props : {};
+    const legendProps = isObject(legend) ? legend.props : {};
+    return (_jsx(ResponsiveContainer, Object.assign({}, containerOptions, { children: _jsxs(RechartsRadialBarChart, Object.assign({ width: width, height: height, data: data, innerRadius: innerRadius, outerRadius: outerRadius, startAngle: startAngle, endAngle: endAngle }, remainingProps, { children: [_jsx(RechartsRadialBar, Object.assign({ 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", Object.assign({ x: width / 2, y: height / 2, textAnchor: 'middle', dominantBaseline: 'middle', className: 'radialbarchart-text', style: textStyle }, remainingTextOptions, { children: text }))), legend && (_jsx(RechartsLegend, Object.assign({ formatter: (value, _) => _jsx("span", Object.assign({ className: 'text-color-darker' }, { children: value })) }, legend.props))), tooltip && _jsx(RechartsTooltip, Object.assign({ cursor: { fill: CURSOR_BACKGROUND_COLOR } }, tooltip.props))] })) })));
-};
-RadialBarChart.defaultProps = {
-    width: 400,
-    height: 200,
-    data: [],
-    dataKey: 'value',
-    startAngle: 180,
-    endAngle: 0,
-    innerRadius: '30%',
-    outerRadius: '100%',
-    clockWise: true,
-    legend: _jsx(Legend, {}),
-    // textOptions,
-    // radialBarOptions,
-    showBarLabel: false,
-    cornerRadius: 30,
-    background: true,
-    // range,
-    tooltip: false,
+                    }) })), range && _jsx(PolarAngleAxis, { type: 'number', domain: range, angleAxisId: 0, tick: false }), textOptions && (_jsx("text", Object.assign({ x: width ? width / 2 : '50%', y: height ? height / 2 : '50%', textAnchor: 'middle', dominantBaseline: 'middle', className: 'radialbarchart-text', style: textStyle }, remainingTextOptions, { children: text }))), legend && (_jsx(Legend, Object.assign({ formatter: (value, entry) => (_jsx("span", Object.assign({ className: 'text-color-darker' }, { children: value }))) }, legendProps))), tooltip && _jsx(ChartTooltip, Object.assign({ cursor: { fill: CURSOR_BACKGROUND_COLOR } }, tooltipProps))] })) })));
 };
 export default RadialBarChart;

package/components/charts/ResponsiveContainer.d.ts

@@ -0,0 +1,2 @@
+import type { ResponsiveContainerProps as RechartResponsiveContainerProps } from 'recharts';
+export type ResponsiveContainerProps = Omit<Partial<RechartResponsiveContainerProps>, 'ref'> & {};

package/components/charts/ResponsiveContainer.js

@@ -0,0 +1 @@
+import 'react';

package/components/charts/chartHelper.d.ts

@@ -1,5 +1,10 @@
-export const defaultChartColors: any[];
-export function getFromDefaultColors(index: any): any;
-export function getColor(colorKey: any): any;
-export const CURSOR_BACKGROUND_COLOR: "#a7afbb24";
-export function mapGridOptions(gridOptions: any): any;
+export type DataType = Record<string, unknown> & {
+    color?: string;
+};
+export declare const CURSOR_BACKGROUND_COLOR = "#a7afbb24";
+export declare const defaultChartColors: string[];
+export declare const getFromDefaultColors: (index: number) => string;
+export declare const getColor: (colorKey?: string) => string | undefined;
+export declare const mapGridOptions: <T extends {
+    stroke?: string | undefined;
+}>(gridOptions?: T | undefined) => T | undefined;

package/components/charts/chartHelper.js

@@ -1,13 +1,14 @@
-import colors from '../../styles/variables/colors.json';
+import colorsJson from '../../styles/variables/colors/colors.json';
+const colors = colorsJson;
+export const CURSOR_BACKGROUND_COLOR = '#a7afbb24';
 const brightColors = ['color-warmup-corn', 'color-coldplay-khaki'];
 export const defaultChartColors = Object.keys(colors)
     .reverse()
     .filter(key => !brightColors.includes(key))
     .map(key => colors[key]);
-export const getFromDefaultColors = index => defaultChartColors[index];
-export const getColor = colorKey => colors[colorKey];
-export const CURSOR_BACKGROUND_COLOR = '#a7afbb24';
-export const mapGridOptions = gridOptions => {
+export const getFromDefaultColors = (index) => defaultChartColors[index];
+export const getColor = (colorKey) => (colorKey ? colors[colorKey] : undefined);
+export const mapGridOptions = (gridOptions) => {
     if (!gridOptions) {
         return;
     }

package/components/checkbox/Checkbox.d.ts

@@ -60,18 +60,23 @@ export type CheckboxProps = {
      * Note, when using the `custom` option, make sure to wrap the children with the class name
      * `checkbox-text-wrapper`. For using the checkbox tick, use an element with class name
      * `checkbox-text`.
+     *
      * @example
+     *
+     * ```tsx
      * <div className='checkbox-text-wrapper display-flex justify-content-between'>
-            <div className='margin-right-15'>
-                <div className='text-medium text-size-16 text-color-darker'>Option 1</div>
-                <div className='text-color-dark'>This option is a first option</div>
-            </div>
-            <div className='checkbox-text' />
-        </div>
+     *     <div className='margin-right-15'>
+     *         <div className='text-medium text-size-16 text-color-darker'>Option 1</div>
+     *         <div className='text-color-dark'>This option is a first option</div>
+     *     </div>
+     *     <div className='checkbox-text' />
+     * </div>
+     * ```
      */
     custom?: boolean;
     /**
      * Defines whether the checkbox is required or not.
+     *
      * @default false
      */
     required?: boolean;
@@ -85,16 +90,19 @@ export type CheckboxProps = {
     /**
      * Defines whether the checkbox is applying an inline style. Use this in combination
      * with other checkboxes.
+     *
      * @default false
      */
     inline?: boolean;
     /**
      * Defines whether the checkbox is on the right side.
+     *
      * @default false
      */
     right?: boolean;
     /**
      * Use "error" to change color of the checkbox.
+     *
      * @default false
      */
     error?: boolean;
@@ -111,6 +119,7 @@ export type CheckboxProps = {
     inputRef?: React.RefObject<HTMLInputElement>;
     /**
      * Number of the index used for keyboard support.
+     *
      * @default 0
      */
     tabIndex?: number;

package/components/clearableInput/ClearableInput.d.ts

@@ -2,6 +2,14 @@ import React from 'react';
 export declare const DEFAULT_TYPE = "text";
 export declare const SUPPORTED_TYPES: string[];
 export type ClearableInputProps = {
+    /**
+     * Gives the input element the id.
+     */
+    id?: string;
+    /**
+     * Gives the input element a name.
+     */
+    name?: string;
     /**
      * The translated text that shall be shown when the input is empty.
      */
@@ -74,6 +82,58 @@ export type ClearableInputProps = {
      * @returns
      */
     onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * Callback triggered when clicked into the input to react on it like when using an auto suggest dropdown
+     * @param event
+     * @returns
+     */
+    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
+    /**
+     * The mask prop will allow to use the component with an input mask.
+     * It defines the pattern that should be followed.
+     *
+     * For more details on masking, checkout the third party documentation for the
+     * input mask here: {@link https://github.com/sanniassin/react-input-mask}
+     *
+     * Simple masks can be defined as strings.
+     *
+     * The following characters will define mask format:
+     *
+     * Character: "9" 	= allowed input: "0-9"
+     *
+     * Character: "a" 	= allowed input: "a-z, A-Z"
+     *
+     * Character: "*" 	= allowed input: 0-9, a-z, A-Z
+     *
+     * Any format character can be escaped with a backslash.
+     *
+     * @example
+     * '-- *** *** ***' or '+4\\9 99 999 99'
+     *
+     * @example
+     * ['0', '0', /[0-9]/, ' ', /[a-zA-Z]/]
+     *
+     */
+    mask?: string | (string | RegExp)[];
+    /**
+     * Placeholder to cover unfilled parts of the mask.
+     *
+     * @default '_'
+     */
+    maskPlaceholder?: string | null;
+    /**
+     * Disabled the input component.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether mask prefix and placeholder should be displayed when input is empty and
+     * has no focus.
+     *
+     * @default false
+     */
+    alwaysShowMask?: boolean;
     /**
      * Additional classes to be set on the input element.
      */

package/components/clearableInput/ClearableInput.js

@@ -7,16 +7,18 @@ import isEmpty from 'lodash/fp/isEmpty';
 import classNames from 'classnames';
 import isFunction from 'lodash/fp/isFunction';
 import noop from 'lodash/fp/noop';
+import InputMask from 'react-input-mask';
 import usePrevious from '../../hooks/usePrevious';
 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, inputClassName = '', className = '', children } = props, remainingProps = __rest(props, ["type", "defaultValue", "value", "maxLength", "tabIndex", "hasError", "inputRef", "autoComplete", "onChange", "onBlur", "onFocus", "onClear", "onKeyPress", "inputClassName", "className", "children"]);
+    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 = '_', alwaysShowMask = false, inputClassName = '', disabled = false, className = '', children } = props, remainingProps = __rest(props, ["type", "defaultValue", "value", "maxLength", "tabIndex", "hasError", "inputRef", "autoComplete", "onChange", "onBlur", "onFocus", "onClear", "onKeyPress", "onClick", "mask", "maskPlaceholder", "alwaysShowMask", "inputClassName", "disabled", "className", "children"]);
     const initialValue = value || defaultValue || '';
     const [inputValue, setInputValue] = useState(initialValue);
     const [showClear, setShowClear] = useState(hasValue(initialValue));
     const isControlled = !isNil(value);
+    const hasMask = !!mask;
     // Handles new input value and saves it in the local state.
     // The value stored in the state is used for rendering.
     const changeInternalValue = (newValue = '') => {
@@ -54,15 +56,16 @@ const ClearableInput = forwardRef((props, ref) => {
             onClear(event);
         }
     };
-    const classes = classNames('ClearableInput', 'input-group', hasError && 'has-error', className && className);
-    const inputClassNames = classNames('form-control', inputClassName, showClear && 'withClearButton');
+    const classes = classNames('ClearableInput', 'input-group', hasError && 'has-error', disabled && 'pointer-events-none', className && className);
+    const inputClassNames = classNames('form-control', inputClassName, showClear && 'withClearButton', hasMask && 'withInputMask', disabled && 'disabled');
     const clearButtonClassNames = classNames('clearButton', !showClear && 'hide');
     const convertedType = type === null || type === void 0 ? void 0 : type.toLowerCase();
     const inputType = SUPPORTED_TYPES.indexOf(convertedType) !== -1 ? convertedType : DEFAULT_TYPE;
     const inputProps = Object.assign(Object.assign({}, omit(['value', 'defaultValue', 'onClear'])(remainingProps)), { className: inputClassNames, autoComplete, type: inputType, value: inputValue, onChange: handleChange, onKeyPress: handleKeyPress, onBlur,
         onFocus,
-        maxLength,
-        tabIndex, ref: inputRef || ref });
-    return (_jsxs("div", Object.assign({ className: classes }, { children: [children && isFunction(children) ? children(inputProps) : _jsx("input", Object.assign({}, inputProps)), _jsx("span", Object.assign({ className: clearButtonClassNames, onClick: clearInputValue }, { children: _jsx("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) }))] })));
+        onClick,
+        disabled, maxLength: hasMask ? undefined : maxLength, tabIndex, ref: inputRef || ref });
+    const input = hasMask ? (_jsx(InputMask, Object.assign({}, inputProps, { disabled: disabled, mask: mask, maskPlaceholder: maskPlaceholder, alwaysShowMask: alwaysShowMask }))) : (_jsx("input", Object.assign({}, inputProps)));
+    return (_jsxs("div", Object.assign({ className: classes }, { children: [children && isFunction(children) ? children(inputProps) : input, _jsx("span", Object.assign({ className: clearButtonClassNames, onClick: clearInputValue }, { children: _jsx("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) }))] })));
 });
 export default ClearableInput;

package/components/collapse/Collapse.d.ts

@@ -1,59 +1,40 @@
-declare class Collapse extends React.Component<any, any, any> {
-    constructor(props: any);
-    state: {};
-    handleEnter(): void;
-    handleEntering(element: any): void;
-    handleEntered(): void;
-    handleExit(element: any): void;
-    handleExiting(): void;
-    handleExited(): void;
-    componentDidMount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: any): void;
-    getFullHeight(element: any): any;
-    render(): import("react/jsx-runtime").JSX.Element;
-    refTransition: Transition<HTMLElement | undefined> | null | undefined;
-}
-declare namespace Collapse {
-    namespace defaultProps {
-        const _in: boolean;
-        export { _in as in };
-        export const timeout: number;
-        export const mountOnEnter: boolean;
-        export const unmountOnExit: boolean;
-        export const appear: boolean;
-        export function onEnter(): void;
-        export function onEntering(): void;
-        export function onEntered(): void;
-        export function onExit(): void;
-        export function onExiting(): void;
-        export function onExited(): void;
-    }
-    namespace propTypes {
-        const _in_1: PropTypes.Validator<boolean>;
-        export { _in_1 as in };
-        const mountOnEnter_1: PropTypes.Requireable<boolean>;
-        export { mountOnEnter_1 as mountOnEnter };
-        const unmountOnExit_1: PropTypes.Requireable<boolean>;
-        export { unmountOnExit_1 as unmountOnExit };
-        const appear_1: PropTypes.Requireable<boolean>;
-        export { appear_1 as appear };
-        const timeout_1: PropTypes.Requireable<number>;
-        export { timeout_1 as timeout };
-        const onEnter_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onEnter_1 as onEnter };
-        const onEntering_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onEntering_1 as onEntering };
-        const onEntered_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onEntered_1 as onEntered };
-        const onExit_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onExit_1 as onExit };
-        const onExiting_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onExiting_1 as onExiting };
-        const onExited_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onExited_1 as onExited };
-    }
-}
+import { type PropsWithChildren } from 'react';
+type CollapseProps = {
+    /**
+     * Show the component and triggers the expand or collapse animation.
+     * @default false
+     */
+    open: boolean | undefined;
+    /** Deprecated, please use `show` instead. @deprecated */
+    in?: boolean;
+    /**
+     * Unmount the component (remove it from the DOM) when it is collapsed.
+     */
+    unmountOnExit?: boolean;
+    /**
+     * Run the expand animation when the component mounts, if it is initially shown.
+     * @default false
+     */
+    appear?: boolean;
+    /**
+     * Duration of the collapse animation in milliseconds.
+     * @default 270
+     */
+    timeout?: number;
+    /**
+     * Callback fired after the component has expanded.
+     * @returns
+     */
+    onEntered?: () => void;
+    /**
+     * Callback fired after the component has collapsed.
+     * @returns
+     */
+    onExited?: () => void;
+    /**
+     * Callback fired when the animation starts for either expand or collapse.
+     */
+    onAnimationStart?: () => void;
+};
+declare const Collapse: (props: PropsWithChildren<CollapseProps>) => import("react/jsx-runtime").JSX.Element;
 export default Collapse;
-import React from "react";
-import Transition from "react-transition-group/Transition";
-import PropTypes from "prop-types";

package/components/collapse/Collapse.js

@@ -1,148 +1,25 @@
-import { __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import css from 'dom-helpers/css';
-import classNames from 'classnames';
-import Transition, { ENTERED, ENTERING, EXITED, EXITING } from 'react-transition-group/Transition';
-const collapseStyles = {
-    [EXITED]: 'collapse',
-    [EXITING]: 'collapsing',
-    [ENTERING]: 'collapsing',
-    [ENTERED]: 'collapse in',
-};
-const MARGINS = {
-    height: ['marginTop', 'marginBottom'],
-};
-const INITIAL_HEIGHT = '0';
-export default class Collapse extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {};
-        this.handleEnter = this.handleEnter.bind(this);
-        this.handleEntering = this.handleEntering.bind(this);
-        this.handleEntered = this.handleEntered.bind(this);
-        this.handleExit = this.handleExit.bind(this);
-        this.handleExiting = this.handleExiting.bind(this);
-        this.handleExited = this.handleExited.bind(this);
-    }
-    componentDidMount() {
-        if (!this.props.in) {
-            // When the component is collapsed on mount, set initial height to 0
-            this.setState(() => ({
-                transitionState: EXITED,
-                height: INITIAL_HEIGHT,
-            }));
-        }
-        else {
-            // When the component is expanded on mount, set initial height to 'auto'
-            this.setState(() => ({
-                transitionState: ENTERED,
-                height: 'auto',
-            }));
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import noop from 'lodash/fp/noop';
+const DEFAULT_ANIMATION_TIME_IN_MS = 270;
+const Collapse = (props) => {
+    const { open = false, unmountOnExit = false, appear = false, timeout = DEFAULT_ANIMATION_TIME_IN_MS, onEntered = noop, onExited = noop, onAnimationStart = noop, children, } = props;
+    const shouldKeepContentInDom = !unmountOnExit;
+    const handleAnimationStart = () => onAnimationStart();
+    const handleAnimationComplete = (definition) => {
+        if (definition === 'open') {
+            onEntered();
         }
-    }
-    // eslint-disable-next-line camelcase
-    UNSAFE_componentWillReceiveProps(nextProps) {
-        // As the height is set to "auto" in the final opening step, we need to
-        // set the height before we start the closing animation as "height: auto" cannot be animated
-        if (this.props.in && !nextProps.in) {
-            this.setState({
-                height: this.getFullHeight(ReactDOM.findDOMNode(this)),
-            });
+        if (definition === 'collapsed') {
+            onExited();
         }
-    }
-    getFullHeight(element) {
-        const value = element.offsetHeight;
-        const margins = MARGINS['height'];
-        if (!value) {
-            return INITIAL_HEIGHT;
-        }
-        const fullHeight = value + parseInt(css(element, margins[0]), 10) + parseInt(css(element, margins[1]), 10);
-        return fullHeight;
-    }
-    /* -- Expanding -- */
-    handleEnter() {
-        this.setState(() => ({
-            transitionState: ENTERED,
-            height: INITIAL_HEIGHT,
-        }), this.props.onEnter());
-    }
-    handleEntering(element) {
-        this.setState(() => ({
-            transitionState: ENTERING,
-            height: element.scrollHeight,
-        }), this.props.onEntering());
-    }
-    handleEntered() {
-        this.setState(() => ({
-            transitionState: ENTERED,
-            height: 'auto',
-        }), this.props.onEntered());
-    }
-    /* -- Collapsing -- */
-    handleExit(element) {
-        this.setState(() => ({
-            transitionState: EXITING,
-            height: this.getFullHeight(element),
-        }), this.props.onExit());
-    }
-    handleExiting() {
-        this.setState(() => ({
-            transitionState: EXITING,
-            height: INITIAL_HEIGHT,
-        }), this.props.onExiting());
-    }
-    handleExited() {
-        this.setState(() => ({
-            transitionState: EXITED,
-            height: INITIAL_HEIGHT,
-        }), this.props.onExited());
-    }
-    render() {
-        const _a = this.props, { children } = _a, props = __rest(_a, ["children"]);
-        return (_jsx(Transition, Object.assign({ ref: node => (this.refTransition = node) }, props, { onEnter: this.handleEnter, onEntering: this.handleEntering, onEntered: this.handleEntered, onExit: this.handleExit, onExiting: this.handleExiting, onExited: this.handleExited }, { children: React.cloneElement(children, {
-                style: { height: this.state.height },
-                className: classNames(children.props.className, collapseStyles[this.state.transitionState]),
-            }) })));
-    }
-}
-Collapse.defaultProps = {
-    in: false,
-    timeout: 300,
-    mountOnEnter: false,
-    unmountOnExit: false,
-    appear: false,
-    onEnter: () => { },
-    onEntering: () => { },
-    onEntered: () => { },
-    onExit: () => { },
-    onExiting: () => { },
-    onExited: () => { },
-};
-Collapse.propTypes = {
-    // Show the component; triggers the expand or collapse animation
-    in: PropTypes.bool.isRequired,
-    // Wait until the first "enter" transition to mount the component (add it to the DOM)
-    mountOnEnter: PropTypes.bool,
-    // Unmount the component (remove it from the DOM) when it is collapsed
-    unmountOnExit: PropTypes.bool,
-    // Run the expand animation when the component mounts, if it is initially shown
-    appear: PropTypes.bool,
-    // Duration of the collapse animation in milliseconds, to ensure that finishing callbacks
-    // are fired even if the original browser transition end events are canceled
-    timeout: PropTypes.number,
-    // Callback fired before the component expands
-    onEnter: PropTypes.func,
-    // Callback fired after the component starts to expand
-    onEntering: PropTypes.func,
-    // Callback fired after the component has expanded
-    onEntered: PropTypes.func,
-    // Callback fired before the component collapses
-    onExit: PropTypes.func,
-    // Callback fired after the component starts to collapse
-    onExiting: PropTypes.func,
-    // Callback fired after the component has collapsed
-    onExited: PropTypes.func,
+    };
+    const variants = {
+        open: { opacity: 1, height: 'auto' },
+        collapsed: { opacity: 0, height: 0 },
+    };
+    return (_jsx(_Fragment, { children: _jsx(AnimatePresence, Object.assign({ initial: appear, exitBeforeEnter: true }, { children: (open || shouldKeepContentInDom) && (_jsx(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')) })) }));
 };
+export default Collapse;

package/components/contentLoader/ContentLoader.js

@@ -5,6 +5,7 @@ import 'react';
 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';
 const RECT = 'rect';
 const CIRCLE = 'circle';
 const DEFAULT_SPEED = 2;
@@ -28,6 +29,7 @@ const renderCircle = ({ radius }) => _jsx("circle", { cx: radius, cy: radius, r:
  */
 const ContentLoader = (props) => {
     const { speed = DEFAULT_SPEED, width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT, radius = DEFAULT_RADIUS, type = DEFAULT_TYPE, className = '', children } = props, remainingProps = __rest(props, ["speed", "width", "height", "radius", "type", "className", "children"]);
+    const isDarkMode = useDarkMode();
     // Since we define the default values while destructuring the props, we have to build up a new object
     // with that defaults to be used in the conditional rendering, otherwise it would use only the props as
     // passed into the component without the defined defaults.
@@ -43,7 +45,7 @@ const ContentLoader = (props) => {
     ])(propsWithDefaults);
     const wrapperHeight = isCircle(propsWithDefaults) ? radius * 2 : height;
     const wrapperWidth = isCircle(propsWithDefaults) ? wrapperHeight : width;
-    return (_jsx(_ContentLoader, Object.assign({ speed: speed, height: wrapperHeight, width: wrapperWidth, className: `ContentLoader ${className}` }, remainingProps, { children: content })));
+    return (_jsx(_ContentLoader, Object.assign({ backgroundColor: '#f5f6f7', foregroundColor: isDarkMode ? '#aaaaaa' : '#eeeeee', speed: speed, height: wrapperHeight, width: wrapperWidth, className: `ContentLoader ${className} ${isDarkMode ? 'use-mix-blend-mode' : ''}` }, remainingProps, { children: content })));
 };
 ContentLoader.RECT = RECT;
 ContentLoader.CIRCLE = CIRCLE;