@rio-cloud/rio-uikit 0.16.4-beta.2 → 0.16.4-beta.20

package/components/expander/ExpanderList.js

@@ -1,97 +1,57 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import isEqual from 'lodash/fp/isEqual';
-import Collapse from '../collapse/Collapse';
-import classNames from 'classnames';
-const getRandomString = () => (Math.random() + 1).toString(36).toUpperCase().substring(2);
-export default class ExpanderList extends Component {
-    constructor(...args) {
-        super(...args);
-        this.state = {
-            items: this.parseItems(this.props.items),
-        };
-    }
-    parseItems(items) {
-        return items.map((item, index) => {
-            // Generate a unique id (if not present) instead of using the index for the key as it will create
-            // side effects when removing items from the list and re-render the ExpanderList.
-            if (!item.id) {
-                item.id = getRandomString();
-            }
-            return item;
-        });
-    }
-    // eslint-disable-next-line camelcase
-    UNSAFE_componentWillReceiveProps(nextProps) {
-        // Map the internal open state to the new props in order to preserve opened items
-        const mappedNextProps = nextProps.items.map(item => {
-            if (item.open === undefined || item.open === null) {
-                const matchingItem = this.state.items.find(oldItem => oldItem.id === item.id);
-                if (matchingItem) {
-                    item.open = matchingItem.open;
-                }
-            }
-            return item;
-        });
-        // Only update the list when the amount of items is different or items inside have changed.
-        // Note: When using the generated internal "id" the check is always true, as the id is regenerated for new
-        // items, means it will always update the state and hence re-render.
-        if (!isEqual(mappedNextProps, this.state.items)) {
-            this.setState({
-                items: this.parseItems(mappedNextProps),
-            });
-        }
-    }
-    handleExpand(itemToExpand) {
-        // Toggle the open state for the selected item based on the provided or generated id
-        const result = this.state.items.find(item => item.id === itemToExpand.id);
-        result.open = !result.open;
-        this.setState({
-            items: this.state.items,
-        });
-    }
-    getHeaderElement(item) {
-        const headerClassNames = classNames('expander-list-header', item.headerClassName && item.headerClassName);
-        const iconClassNames = item.body && classNames('expander-icon', 'rioglyph', 'rioglyph-chevron-down');
-        return (_jsxs("div", Object.assign({ className: headerClassNames, onClick: () => {
-                if (item.body) {
-                    this.handleExpand(item);
-                }
-            } }, { children: [_jsx("span", Object.assign({ className: 'expander-list-header-content' }, { children: item.header })), _jsx("span", { className: iconClassNames })] })));
-    }
-    getBodyElement(item, isOpen, mountOnEnter, unmountOnExit) {
-        if (!item.body) {
-            return;
-        }
-        const bodyClassNames = classNames('expander-list-body', item.bodyClassName && item.bodyClassName);
-        return (_jsx(Collapse, Object.assign({ in: isOpen, mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit }, { children: _jsx("div", Object.assign({ className: 'expander-list-body-wrapper' }, { children: _jsx("div", Object.assign({ className: bodyClassNames }, { children: item.body })) })) })));
-    }
-    render() {
-        const listClassNames = classNames('expander-list list-group', this.props.className);
-        return (_jsx("ul", Object.assign({ className: listClassNames }, { children: this.state.items.map(item => {
-                const isOpen = item.open;
-                const itemClassNames = classNames('list-group-item', item.className && `${item.className}`, item.body && 'expandable', isOpen && 'open');
-                return (_jsxs("li", Object.assign({ className: itemClassNames }, { children: [this.getHeaderElement(item), this.getBodyElement(item, isOpen, this.props.mountOnEnter, this.props.unmountOnExit)] }), item.id));
-            }) })));
-    }
-}
-ExpanderList.defaultProps = {
-    items: [],
-    mountOnEnter: true,
-    unmountOnExit: true,
-};
-ExpanderList.propTypes = {
-    className: PropTypes.string,
-    items: PropTypes.arrayOf(PropTypes.shape({
-        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        header: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
-        body: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-        open: PropTypes.bool,
-        className: PropTypes.string,
-        headerClassName: PropTypes.string,
-        bodyClassName: PropTypes.string,
-    })).isRequired,
-    mountOnEnter: PropTypes.bool,
-    unmountOnExit: PropTypes.bool,
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import isEqual from 'lodash/fp/isEqual';
+import classNames from 'classnames';
+import Collapse from '../collapse/Collapse';
+const getRandomString = () => (Math.random() + 1).toString(36).toUpperCase().substring(2);
+// Generate a unique id (if not present) instead of using the index for the key as it will create
+// side effects when removing items from the list and re-render the ExpanderList.
+const parseItems = (items) => {
+    return items.map(item => {
+        if (!item.id) {
+            item.id = getRandomString();
+        }
+        return item;
+    });
+};
+const ExpanderList = (props) => {
+    const { items = [], mountOnEnter = true, unmountOnExit = true, rounded = true, bordered = true, className = '', } = props;
+    const [listItems, setListItems] = useState(parseItems(items));
+    // Update internal state from external prop change
+    const [previousItems, setPreviousItems] = useState(items);
+    if (!isEqual(previousItems, items)) {
+        setListItems(parseItems(items));
+        setPreviousItems(items);
+    }
+    const handleToggleItem = (itemToExpand) => {
+        if (!itemToExpand.body) {
+            return;
+        }
+        // Toggle the open state for the selected item based on the provided or generated id
+        const updatedListItems = [...listItems].map(item => {
+            if (item.id === itemToExpand.id) {
+                item.onOpen && !item.open && item.onOpen();
+                item.onClose && item.open && item.onClose();
+                item.open = !item.open;
+            }
+            return item;
+        });
+        setListItems(updatedListItems);
+    };
+    const listClassNames = classNames('expander-list list-group', rounded && 'rounded', bordered && 'border', className);
+    return (_jsx("ul", Object.assign({ className: listClassNames }, { children: listItems.map(item => {
+            const isOpen = item.open;
+            const itemClassNames = classNames('list-group-item', item.className && item.className, item.body && 'expandable', isOpen && 'open');
+            return (_jsxs("li", Object.assign({ className: itemClassNames }, { children: [_jsx(ExpanderListItemHeader, { item: item, onToggle: handleToggleItem }), item.body && (_jsx(Collapse, Object.assign({ in: isOpen, mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit }, { children: _jsx("div", Object.assign({ className: 'expander-list-body-wrapper' }, { children: _jsx(ExpanderListItemBody, Object.assign({ className: item.bodyClassName }, { children: item.body })) })) })))] }), item.id));
+        }) })));
+};
+const ExpanderListItemHeader = ({ item, onToggle }) => {
+    const headerClassNames = classNames('expander-list-header', item.headerClassName);
+    const iconClassNames = classNames('expander-icon', 'rioglyph', 'rioglyph-chevron-down');
+    return (_jsxs("div", Object.assign({ className: headerClassNames, onClick: () => onToggle(item), "aria-label": 'expander item header' }, { children: [_jsx("span", Object.assign({ className: 'expander-list-header-content' }, { children: item.header })), item.body && _jsx("span", { className: iconClassNames })] })));
+};
+const ExpanderListItemBody = ({ className, children }) => {
+    const bodyClassNames = classNames('expander-list-body', className);
+    return (_jsx("div", Object.assign({ className: bodyClassNames, "aria-label": 'expander item body' }, { children: children })));
+};
+export default ExpanderList;

package/components/expander/ExpanderPanel.d.ts

@@ -1,51 +1,93 @@
-export default ExpanderPanel;
-declare function ExpanderPanel(props: any): JSX.Element;
-declare namespace ExpanderPanel {
-    namespace defaultProps {
-        const mountOnEnter: boolean;
-        const unmountOnExit: boolean;
-        const bsStyle: string;
-        const iconLeft: boolean;
-        const open: boolean;
-        function onToggle(): void;
-        function onEnter(): void;
-        function onEntering(): void;
-        function onEntered(): void;
-        function onExit(): void;
-        function onExiting(): void;
-        function onExited(): void;
-    }
-    namespace propTypes {
-        export const className: PropTypes.Requireable<string>;
-        export const headerClassName: PropTypes.Requireable<string>;
-        export const titleClassName: PropTypes.Requireable<string>;
-        export const bodyClassName: PropTypes.Requireable<string>;
-        export const title: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
-        const bsStyle_1: PropTypes.Requireable<string>;
-        export { bsStyle_1 as bsStyle };
-        const iconLeft_1: PropTypes.Requireable<boolean>;
-        export { iconLeft_1 as iconLeft };
-        const open_1: PropTypes.Requireable<boolean>;
-        export { open_1 as open };
-        const mountOnEnter_1: PropTypes.Requireable<boolean>;
-        export { mountOnEnter_1 as mountOnEnter };
-        const unmountOnExit_1: PropTypes.Requireable<boolean>;
-        export { unmountOnExit_1 as unmountOnExit };
-        const onToggle_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onToggle_1 as onToggle };
-        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 };
-        export const children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
-    }
-}
-import PropTypes from "prop-types";
+import React, { type PropsWithChildren } from 'react';
+type ChildrenType = React.ReactNode | ((isOpen: boolean) => React.ReactNode);
+export type ExpanderPanelProps = {
+    /**
+     * The title to be shown in the expander header.
+     */
+    title: string | React.ReactNode;
+    /**
+     * Component visual or contextual style variants.
+     */
+    bsStyle?: 'blank' | 'default' | 'separator' | 'primary' | 'secondary' | 'info' | 'warning' | 'danger' | 'success';
+    /**
+     * Defines if the icon will be align left, otherwise it is aligned right.
+     * @default false
+     */
+    iconLeft?: boolean;
+    /**
+     * Defines if the panel will be opened or closed by default.
+     * The open/closed state will be handled internally.
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * It waits for the first "enter" transition to mount the body component
+     * (add it to the DOM). Set it to false if you want to have the body already mounted.
+     * @default true
+     */
+    mountOnEnter?: boolean;
+    /**
+     * It unmounts the body component (remove it from the DOM) when it is collapsed.
+     * Set it to false to avoid the unmount.
+     * @default true
+     */
+    unmountOnExit?: boolean;
+    /**
+     * Callback function for when the header is clicked and the expander toggles.
+     * @param isOpen
+     * @returns
+     */
+    onToggle?: (isOpen: boolean) => void;
+    /**
+     * Callback fired before the component expands.
+     */
+    onEnter?: VoidFunction;
+    /**
+     * Callback fired after the component starts to expand.
+     */
+    onEntering?: VoidFunction;
+    /**
+     * Callback fired after the component has expanded.
+     */
+    onEntered?: VoidFunction;
+    /**
+     * Callback fired before the component collapses.
+     */
+    onExit?: VoidFunction;
+    /**
+     * Callback fired after the component starts to collapse.
+     */
+    onExiting?: VoidFunction;
+    /**
+     * Callback fired after the component has collapsed.
+     */
+    onExited?: VoidFunction;
+    /**
+     * Additional classes to be set on the panel header.
+     */
+    headerClassName?: string;
+    /**
+     * Additional classes to be set on the header title.
+     */
+    titleClassName?: string;
+    /**
+     * Additional classes to be set on the panel body.
+     */
+    bodyClassName?: string;
+    /**
+     * Additional classes added to the chevron icon
+     */
+    iconClassName?: string;
+    /**
+     * Additional classes to be set on the wrapper element.
+     */
+    className?: string;
+    /**
+     * Any element to be rendered inside the panel body.
+     * Providing a function enables the render prop approach. The function gets the
+     * `isOpen` state passed and is responsible for rendering the custom content.
+     */
+    children?: ChildrenType;
+};
+declare const ExpanderPanel: (props: PropsWithChildren<ExpanderPanelProps>) => import("react/jsx-runtime").JSX.Element;
+export default ExpanderPanel;

package/components/expander/ExpanderPanel.js

@@ -1,71 +1,29 @@
-import { __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import Collapse from '../collapse/Collapse';
-import classNames from 'classnames';
-const ExpanderPanel = props => {
-    const { bsStyle, className, iconLeft, title, headerClassName, titleClassName, bodyClassName, mountOnEnter, unmountOnExit, onEnter, onEntering, onEntered, onExit, onExiting, onExited, children, onToggle, open } = props, remainingProps = __rest(props, ["bsStyle", "className", "iconLeft", "title", "headerClassName", "titleClassName", "bodyClassName", "mountOnEnter", "unmountOnExit", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "children", "onToggle", "open"]);
-    const [isOpen, setIsOpen] = useState(open);
-    // Update internal state from external prop change
-    useEffect(() => {
-        setIsOpen(open);
-    }, [open]);
-    const handleToggle = () => {
-        const newState = !isOpen;
-        setIsOpen(newState);
-        onToggle(newState);
-    };
-    const wrapperClassNames = classNames('expander-panel panel', `panel-${bsStyle}`, className);
-    const iconClassNames = classNames('expander-icon', 'rioglyph', 'rioglyph-chevron-down');
-    const headerClassNames = classNames('panel-heading', isOpen && 'open', iconLeft && 'icon-left', headerClassName && headerClassName);
-    const titleClassNames = classNames('title', titleClassName && titleClassName);
-    const bodyClassNames = classNames('panel-body', bodyClassName && bodyClassName);
-    const isRenderCallback = children && typeof children === 'function';
-    return (_jsxs("div", Object.assign({}, remainingProps, { className: wrapperClassNames }, { children: [_jsxs("div", Object.assign({ className: headerClassNames, onClick: handleToggle }, { children: [_jsx("span", Object.assign({ className: titleClassNames }, { children: title })), _jsx("span", { className: iconClassNames }), bsStyle === 'separator' && (_jsx("div", Object.assign({ className: 'separator' }, { children: _jsx("hr", {}) })))] })), _jsx(Collapse, Object.assign({ in: isOpen, mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit, onEnter: onEnter, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited }, { children: _jsx("div", { children: _jsx("div", Object.assign({ className: bodyClassNames }, { children: isRenderCallback ? children(isOpen) : children })) }) }))] })));
-};
-ExpanderPanel.defaultProps = {
-    mountOnEnter: true,
-    unmountOnExit: true,
-    bsStyle: 'blank',
-    iconLeft: false,
-    open: false,
-    onToggle: () => { },
-    onEnter: () => { },
-    onEntering: () => { },
-    onEntered: () => { },
-    onExit: () => { },
-    onExiting: () => { },
-    onExited: () => { },
-};
-ExpanderPanel.propTypes = {
-    className: PropTypes.string,
-    headerClassName: PropTypes.string,
-    titleClassName: PropTypes.string,
-    bodyClassName: PropTypes.string,
-    title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
-    bsStyle: PropTypes.oneOf([
-        'blank',
-        'default',
-        'separator',
-        'primary',
-        'secondary',
-        'info',
-        'warning',
-        'danger',
-        'success',
-    ]),
-    iconLeft: PropTypes.bool,
-    open: PropTypes.bool,
-    mountOnEnter: PropTypes.bool,
-    unmountOnExit: PropTypes.bool,
-    onToggle: PropTypes.func,
-    onEnter: PropTypes.func,
-    onEntering: PropTypes.func,
-    onEntered: PropTypes.func,
-    onExit: PropTypes.func,
-    onExiting: PropTypes.func,
-    onExited: PropTypes.func,
-    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-};
-export default ExpanderPanel;
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import noop from 'lodash/fp/noop';
+import classNames from 'classnames';
+import Collapse from '../collapse/Collapse';
+const ExpanderPanel = (props) => {
+    const { open = false, iconLeft = false, bsStyle = 'blank', title, headerClassName, titleClassName, bodyClassName, iconClassName, mountOnEnter = true, unmountOnExit = true, onEnter = noop, onEntering = noop, onEntered = noop, onExit = noop, onExiting = noop, onExited = noop, onToggle = noop, className, children } = props, remainingProps = __rest(props, ["open", "iconLeft", "bsStyle", "title", "headerClassName", "titleClassName", "bodyClassName", "iconClassName", "mountOnEnter", "unmountOnExit", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "onToggle", "className", "children"]);
+    const [isOpen, setIsOpen] = useState(open);
+    // Update internal state from external prop change
+    const [previousOpen, setPreviousOpen] = useState(open);
+    if (previousOpen !== open) {
+        setIsOpen(open);
+        setPreviousOpen(open);
+    }
+    const handleToggle = () => {
+        const newState = !isOpen;
+        setIsOpen(newState);
+        onToggle(newState);
+    };
+    const wrapperClassNames = classNames('expander-panel panel', `panel-${bsStyle}`, className);
+    const iconClassNames = classNames('expander-icon', iconClassName, 'rioglyph', 'rioglyph-chevron-down');
+    const headerClassNames = classNames('panel-heading', isOpen && 'open', iconLeft && 'icon-left', headerClassName && headerClassName);
+    const titleClassNames = classNames('title', titleClassName && titleClassName);
+    const bodyClassNames = classNames('panel-body', bodyClassName && bodyClassName);
+    const isRenderCallback = children && typeof children === 'function';
+    return (_jsxs("div", Object.assign({}, remainingProps, { className: wrapperClassNames, "aria-label": 'expander panel' }, { children: [_jsxs("div", Object.assign({ className: headerClassNames, onClick: handleToggle, "aria-label": 'panel heading' }, { children: [_jsx("span", Object.assign({ className: titleClassNames }, { children: title })), _jsx("span", { className: iconClassNames }), bsStyle === 'separator' && (_jsx("div", Object.assign({ className: 'separator' }, { children: _jsx("hr", {}) })))] })), _jsx(Collapse, Object.assign({ in: isOpen, mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit, onEnter: onEnter, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited }, { children: _jsx("div", { children: _jsx("div", Object.assign({ className: bodyClassNames }, { children: isRenderCallback ? children(isOpen) : children })) }) }))] })));
+};
+export default ExpanderPanel;

package/components/fade/Fade.d.ts

@@ -1,46 +1,76 @@
-export default Fade;
-declare function Fade(props: any): JSX.Element;
-declare namespace Fade {
-    const FADE: string;
-    const FROM_LEFT: string;
-    const FROM_RIGHT: string;
-    const FROM_TOP: string;
-    const FROM_BOTTOM: string;
-    const TABS: string;
-    const PAGE: string;
-    const PAGE_BACK: string;
-    namespace defaultProps {
-        const show: boolean;
-        const duration: number;
-        const initial: boolean;
-        const exitBeforeEnter: boolean;
-        const animationStyle: string;
-    }
-    namespace propTypes {
-        const _in: PropTypes.Requireable<boolean>;
-        export { _in as in };
-        const show_1: PropTypes.Requireable<boolean>;
-        export { show_1 as show };
-        export const appear: PropTypes.Requireable<boolean>;
-        const initial_1: PropTypes.Requireable<boolean>;
-        export { initial_1 as initial };
-        const exitBeforeEnter_1: PropTypes.Requireable<boolean>;
-        export { exitBeforeEnter_1 as exitBeforeEnter };
-        export const timeout: PropTypes.Requireable<number>;
-        const duration_1: PropTypes.Requireable<number>;
-        export { duration_1 as duration };
-        export const onEnter: PropTypes.Requireable<(...args: any[]) => any>;
-        export const onEntering: PropTypes.Requireable<(...args: any[]) => any>;
-        export const onEntered: PropTypes.Requireable<(...args: any[]) => any>;
-        export const onExit: PropTypes.Requireable<(...args: any[]) => any>;
-        export const onExiting: PropTypes.Requireable<(...args: any[]) => any>;
-        export const onExited: PropTypes.Requireable<(...args: any[]) => any>;
-        export const onExitComplete: PropTypes.Requireable<(...args: any[]) => any>;
-        const animationStyle_1: PropTypes.Requireable<string>;
-        export { animationStyle_1 as animationStyle };
-        export const animatePresenceProps: PropTypes.Requireable<object>;
-        export const motionProps: PropTypes.Requireable<object>;
-        export const children: PropTypes.Requireable<any>;
-    }
-}
-import PropTypes from "prop-types";
+import { type PropsWithChildren } from 'react';
+export type FadeAnimationStyle = 'fade' | 'tabs' | 'page' | 'pageBack' | 'fromLeft' | 'fromRight' | 'fromTop' | 'fromBottom';
+export type FadeProps = {
+    /**
+     * Defines whether to show the content.
+     *
+     * @default true
+     */
+    show?: boolean;
+    /**
+     * Duration of the fade animation in seconds.
+     *
+     * @default 0.2
+     */
+    duration?: number;
+    /**
+     * Defines whether the animation is triggered initially when showing the content.
+     *
+     * @default false
+     */
+    initial?: boolean;
+    /**
+     * Defines the desired animation style.
+     *
+     * Possible values are:
+     * - `fade`
+     * - `tabs`
+     * - `page`
+     * - `pageBack`
+     * - `fromLeft`
+     * - `fromRight`
+     * - `fromTop`
+     * - `fromBottom`
+     *
+     * @default 'fade'
+     */
+    animationStyle?: FadeAnimationStyle;
+    /**
+     * If set to true, only one component will be rendered at a time.
+     *
+     * The exiting component will finish its exit animation before the entering component is rendered.
+     *
+     * @default false
+     */
+    exitBeforeEnter?: boolean;
+    /**
+     * Fires when all exiting nodes have completed animating out.
+     *
+     * @default noop
+     */
+    onExitComplete?: VoidFunction;
+    /**
+     * Additional custom props for the underlying Framer motion AnimatePresence component.
+     *
+     * Use this for additional customizations.
+     */
+    animatePresenceProps?: object;
+    /**
+     * Additional custom props for the underlying Framer motion &lt;motion.div&gt; component.
+     *
+     * Use this for additional customizations.
+     */
+    motionProps?: object;
+};
+declare const Fade: {
+    (props: PropsWithChildren<FadeProps>): import("react/jsx-runtime").JSX.Element;
+    FADE: "fade";
+    FROM_LEFT: "fromLeft";
+    FROM_RIGHT: "fromRight";
+    FROM_TOP: "fromTop";
+    FROM_BOTTOM: "fromBottom";
+    TABS: "tabs";
+    PAGE: "page";
+    PAGE_BACK: "pageBack";
+};
+export default Fade;