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

package/components/editableContent/EditableContent.js

@@ -23,10 +23,10 @@ const POPOVER_OFFSET_TOP = -13;
 const POPOVER_OFFSET_LEFT = -18;
 const DEFAULT_TEXTAREA_ROWS = 1;
 const EditableContent = (props) => {
-    const { show = false, onSave = noop, onCancel = noop, onFocus = noop, onBlur = noop, onEditMode = noop, onSaveValidation = () => true, errorMessage, allowResize = false, inputRows = DEFAULT_TEXTAREA_ROWS, editorOffsetTop = 0, editorOffsetLeft = 0, customEditor, size = 'md', className = '', inputClassName = '', editorClassName = '', children } = props, remainingProps = __rest(props, ["show", "onSave", "onCancel", "onFocus", "onBlur", "onEditMode", "onSaveValidation", "errorMessage", "allowResize", "inputRows", "editorOffsetTop", "editorOffsetLeft", "customEditor", "size", "className", "inputClassName", "editorClassName", "children"]);
+    const { show = undefined, onSave = noop, onCancel = noop, onFocus = noop, onBlur = noop, onEditMode = noop, onSaveValidation = () => true, isValid = true, errorMessage, allowResize = false, inputRows = DEFAULT_TEXTAREA_ROWS, editorOffsetTop = 0, editorOffsetLeft = 0, customEditor, size = 'md', className = '', inputClassName = '', editorClassName = '', children } = props, remainingProps = __rest(props, ["show", "onSave", "onCancel", "onFocus", "onBlur", "onEditMode", "onSaveValidation", "isValid", "errorMessage", "allowResize", "inputRows", "editorOffsetTop", "editorOffsetLeft", "customEditor", "size", "className", "inputClassName", "editorClassName", "children"]);
     const [isEditMode, setIsEditMode] = useState(show);
     const [inputValue, setInputValue] = useState('');
-    const [hasError, setHasError] = useState(false);
+    const [hasError, setHasError] = useState(!isValid);
     const [referenceElement, setReferenceElement] = useState(null);
     const [popperElement, setPopperElement] = useState(null);
     const hasCustomControl = !!customEditor;
@@ -60,11 +60,19 @@ const EditableContent = (props) => {
     };
     const { styles, attributes } = usePopper(referenceElement, popperElement, popperConfig);
     const handleEditMode = () => {
-        var _a;
-        setIsEditMode(true);
-        setInputValue((_a = referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.textContent) !== null && _a !== void 0 ? _a : '');
+        // In a controlled usage, the "show" property is set from the outside
+        // and the edit mode is handled there
+        if (show === undefined) {
+            enterEditMode();
+        }
         onEditMode();
     };
+    const enterEditMode = () => {
+        var _a, _b;
+        setIsEditMode(true);
+        setInputValue((_b = (_a = referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.textContent) === null || _a === void 0 ? void 0 : _a.trimEnd()) !== null && _b !== void 0 ? _b : '');
+        setHasError(false);
+    };
     const handleInputChange = (event) => {
         setInputValue(event.target.value);
     };
@@ -72,6 +80,8 @@ const EditableContent = (props) => {
         // Prevent line breaks when textarea is a single line
         if (event.key === 'Enter' && inputRows === DEFAULT_TEXTAREA_ROWS) {
             event.preventDefault();
+            // Save on "enter" when textarea has a single line
+            handleSaveChanges();
         }
     };
     const handleCloseEditMode = () => {
@@ -83,27 +93,37 @@ const EditableContent = (props) => {
         setHasError(!isInputValid);
         if (isInputValid) {
             setIsEditMode(false);
-            onSave(inputValue);
+            onSave(inputValue.trimEnd());
         }
     };
     // Control edit mode from outside for instance if text element got focus
-    // and user used "Enter" key to enter edit mode
+    // and user used "Enter" key to enter edit mode.
     const [previousShow, setPreviousShow] = useState(show);
     if (show !== previousShow) {
         if (show) {
-            handleEditMode();
+            enterEditMode();
+        }
+        if (!show) {
+            setIsEditMode(false);
         }
         setPreviousShow(show);
     }
+    // Control error message visibility from outside. This is useful when using a custom input
+    // where the validation happens outside of this component.
+    const [previousIsValid, setPreviousIsValid] = useState(isValid);
+    if (isValid !== previousIsValid) {
+        setHasError(!isValid);
+        setPreviousIsValid(isValid);
+    }
     const textWrapperClasses = classNames(className, isEditMode && 'opacity-0');
     const overlayWrapperClasses = classNames('EditableContentEditor', 'display-flex gap-5', 'padding-5', 'rounded', 'shadow-accent', 'z-index-max', 'bg-white', editorClassName);
-    const inputWrapperClasses = classNames('display-flex flex-column gap-5', 'margin-0', !hasCustomControl && 'form-group has-feedback', hasError && 'has-error');
+    const inputWrapperClasses = classNames('display-flex flex-column gap-5', 'margin-0', 'form-group', hasError && 'has-feedback has-error');
     const inputClasses = classNames('form-control', size === 'lg' && 'input-lg', inputClassName);
     const inputStyle = {
         minWidth: '100px',
         resize: allowResize ? 'vertical' : 'none',
     };
     return (_jsxs(_Fragment, { children: [_jsx("span", Object.assign({ ref: setReferenceElement, onClick: handleEditMode, className: textWrapperClasses }, { children: children })), isEditMode &&
-                createPortal(_jsxs("div", Object.assign({ className: overlayWrapperClasses, onClick: event => event.stopPropagation(), ref: setPopperElement, style: styles.popper }, attributes.popper, remainingProps, { children: [_jsxs("div", Object.assign({ className: inputWrapperClasses }, { children: [hasCustomControl && customEditor, !hasCustomControl && (_jsx("textarea", { ref: inputRef, className: inputClasses, value: inputValue, onChange: handleInputChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: handleKeyDown, style: inputStyle, rows: inputRows })), hasError && _jsx("div", Object.assign({ className: 'help-block position-relative' }, { children: errorMessage }))] })), _jsxs("div", Object.assign({ className: 'display-flex gap-5' }, { children: [_jsx("button", Object.assign({ type: 'button', onClick: handleCloseEditMode, className: `EditableContentCancel btn btn-default btn-icon-only btn-${size}` }, { children: _jsx("span", { className: 'rioglyph rioglyph-remove' }) })), _jsx("button", Object.assign({ type: 'button', onClick: handleSaveChanges, className: `EditableContentSave btn btn-primary btn-icon-only btn-${size}` }, { children: _jsx("span", { className: 'rioglyph rioglyph-ok' }) }))] }))] })), getOrCreatePortalRoot())] }));
+                createPortal(_jsxs("div", Object.assign({ className: overlayWrapperClasses, onClick: event => event.stopPropagation(), ref: setPopperElement, style: styles.popper }, attributes.popper, remainingProps, { children: [_jsxs("div", Object.assign({ className: inputWrapperClasses }, { children: [hasCustomControl && customEditor, !hasCustomControl && (_jsx("textarea", { ref: inputRef, className: inputClasses, value: inputValue, onChange: handleInputChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: handleKeyDown, style: inputStyle, rows: inputRows })), hasError && _jsx("div", Object.assign({ className: 'help-block position-relative' }, { children: errorMessage }))] })), _jsxs("div", Object.assign({ className: 'display-flex gap-5' }, { children: [_jsx("button", Object.assign({ type: 'button', onClick: handleCloseEditMode, className: `EditableContentCancel btn btn-default btn-icon-only btn-${size}`, "aria-label": 'EditableContent cancel button', "data-testid": 'EditableContentCancel' }, { children: _jsx("span", { className: 'rioglyph rioglyph-remove' }) })), _jsx("button", Object.assign({ type: 'button', onClick: handleSaveChanges, className: `EditableContentSave btn btn-primary btn-icon-only btn-${size}`, "aria-label": 'EditableContent save button', "data-testid": 'EditableContentSave' }, { children: _jsx("span", { className: 'rioglyph rioglyph-ok' }) }))] }))] })), getOrCreatePortalRoot())] }));
 };
 export default EditableContent;

package/components/expander/ExpanderList.d.ts

@@ -1,39 +1,69 @@
-declare class ExpanderList extends React.Component<any, any, any> {
-    constructor(...args: any[]);
-    state: {
-        items: any;
-    };
-    parseItems(items: any): any;
-    UNSAFE_componentWillReceiveProps(nextProps: any): void;
-    handleExpand(itemToExpand: any): void;
-    getHeaderElement(item: any): import("react/jsx-runtime").JSX.Element;
-    getBodyElement(item: any, isOpen: any, mountOnEnter: any, unmountOnExit: any): import("react/jsx-runtime").JSX.Element | undefined;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
-declare namespace ExpanderList {
-    namespace defaultProps {
-        const items: never[];
-        const mountOnEnter: boolean;
-        const unmountOnExit: boolean;
-    }
-    namespace propTypes {
-        export const className: PropTypes.Requireable<string>;
-        const items_1: PropTypes.Validator<(PropTypes.InferProps<{
-            id: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-            header: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
-            body: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-            open: PropTypes.Requireable<boolean>;
-            className: PropTypes.Requireable<string>;
-            headerClassName: PropTypes.Requireable<string>;
-            bodyClassName: PropTypes.Requireable<string>;
-        }> | null | undefined)[]>;
-        export { items_1 as items };
-        const mountOnEnter_1: PropTypes.Requireable<boolean>;
-        export { mountOnEnter_1 as mountOnEnter };
-        const unmountOnExit_1: PropTypes.Requireable<boolean>;
-        export { unmountOnExit_1 as unmountOnExit };
-    }
-}
+import React from 'react';
+export type ExpanderListItem = {
+    /**
+     * The "id" property is used to know which item is expanded. It will also be used to control
+     * the component from the outside. It can be a number or a string. If there is no "id" provided,
+     * a unique id is internally generated  which will be used internally for the uncontrolled case.'
+     */
+    id?: string | number;
+    /**
+     * The header content.
+     */
+    header: string | React.ReactNode;
+    /**
+     * The body content. If there is no "body" provided, the list item is not expandable.
+     */
+    body?: string | React.ReactNode;
+    /**
+     * Defines if the item will be expanded or closed by default.
+     */
+    open?: boolean;
+    /**
+     * Callback fired when item toggles to open after a click.
+     */
+    onOpen?: VoidFunction;
+    /**
+     * Callback fired when item toggles to close after a click.
+     */
+    onClose?: VoidFunction;
+    /**
+     * Additional classes to be set on "expander-list-header" node.
+     */
+    headerClassName?: string;
+    /**
+     * Additional classes to be set on "expander-list-body" node.
+     */
+    bodyClassName?: string;
+    /**
+     * Additional classes to be set on list item node.
+     */
+    className?: string;
+};
+export type ExpanderListProps = {
+    /**
+     * List of items to be rendered. The expanded state can be defined via the items `open` prop.
+     */
+    items: ExpanderListItem[];
+    /**
+     * Defines whether the "expander-list-body" is rounded or not.
+     * @default true
+     */
+    rounded?: boolean;
+    /**
+     * Defines whether the "expander-list-body" has a border or not.
+     * @default true
+     */
+    bordered?: 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;
+    /**
+     * Additional classes to be set on the unordered list itself.
+     */
+    className?: string;
+};
+declare const ExpanderList: (props: ExpanderListProps) => import("react/jsx-runtime").JSX.Element;
 export default ExpanderList;
-import React from "react";
-import PropTypes from "prop-types";

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 { useState } from 'react';
 import isEqual from 'lodash/fp/isEqual';
-import Collapse from '../collapse/Collapse';
 import classNames from 'classnames';
+import Collapse from '../collapse/Collapse';
 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),
-            });
+// 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 = [], 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);
     }
-    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) {
+    const handleToggleItem = (itemToExpand) => {
+        if (!itemToExpand.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,
+        // 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({ open: isOpen, 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 })] })));
 };
-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,
+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,75 @@
+import React, { type PropsWithChildren } from 'react';
+type ChildrenType = React.ReactNode | ((isOpen: boolean) => string | React.ReactNode | JSX.Element);
+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 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 after the component has expanded.
+     */
+    onEntered?: VoidFunction;
+    /**
+     * Callback fired after the component has collapsed.
+     */
+    onExited?: VoidFunction;
+    /**
+     * Callback fired when the animation starts for either expand or collapse.
+     */
+    onAnimationStart?: 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;
-declare function ExpanderPanel(props: any): import("react/jsx-runtime").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";

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 { useState } from 'react';
+import noop from 'lodash/fp/noop';
 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"]);
+import Collapse from '../collapse/Collapse';
+const ExpanderPanel = (props) => {
+    const { open = false, iconLeft = false, bsStyle = 'blank', title, headerClassName, titleClassName, bodyClassName, iconClassName, unmountOnExit = true, onEntered = noop, onExited = noop, onAnimationStart = noop, onToggle = noop, className, children } = props, remainingProps = __rest(props, ["open", "iconLeft", "bsStyle", "title", "headerClassName", "titleClassName", "bodyClassName", "iconClassName", "unmountOnExit", "onEntered", "onExited", "onAnimationStart", "onToggle", "className", "children"]);
     const [isOpen, setIsOpen] = useState(open);
     // Update internal state from external prop change
-    useEffect(() => {
+    const [previousOpen, setPreviousOpen] = useState(open);
+    if (previousOpen !== open) {
         setIsOpen(open);
-    }, [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', 'rioglyph', 'rioglyph-chevron-down');
+    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 }, { 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]),
+    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({ open: isOpen, unmountOnExit: unmountOnExit, onEntered: onEntered, onExited: onExited, onAnimationStart: () => onAnimationStart() }, { children: _jsx("div", { children: _jsx("div", Object.assign({ className: bodyClassNames }, { children: isRenderCallback ? children(isOpen) : children })) }) }))] })));
 };
 export default ExpanderPanel;