@rio-cloud/rio-uikit 0.16.3 → 0.16.4-beta.10

package/components/editableContent/EditableContent.d.ts

@@ -0,0 +1,86 @@
+import React, { type PropsWithChildren } from 'react';
+export type EditableContentProps = {
+    /**
+     * Visibility flag used to control edit mode from outside.
+     * @default false
+     */
+    show?: boolean;
+    /**
+     * Callback function triggered when the save button is clicked.
+     * @param value
+     * @returns
+     */
+    onSave?: (value: string) => void;
+    /**
+     * Callback function triggered when the cancel button is clicked.
+     */
+    onCancel?: VoidFunction;
+    /**
+     * Callback function triggered when the input gets focused.
+     */
+    onFocus?: VoidFunction;
+    /**
+     * Callback function triggered when input looses it's focus.
+     */
+    onBlur?: VoidFunction;
+    /**
+     * Callback function triggered when entering the edit mode.
+     */
+    onEditMode?: VoidFunction;
+    /**
+     * Validation function to intercept saving and prevent save on error.
+     */
+    onSaveValidation?: (value: string) => boolean;
+    /**
+     * The error message that shall be shown to the user in case the validation fails.
+     */
+    errorMessage?: React.ReactNode;
+    /**
+     * Use this prop to define a custom editor input component like Select, NumberInput, TimePicker or DatePicker.
+     * Handling input state changes of a custom editor need to be handled outside of this component.
+     * By default the EditableContent uses a built-in textarea to allow resizing for larger text.
+     */
+    customEditor?: React.ReactNode;
+    /**
+     * Offset value to control the vertical position for the editor in case the text element has
+     * borders, spacings different text sizes.
+     * @default 0
+     */
+    editorOffsetTop?: number;
+    /**
+     * Offset value to control the horizontal position for the editor in case the text element has
+     * borders, spacings different text sizes.
+     * @default 0
+     */
+    editorOffsetLeft?: number;
+    /**
+     * Defines the input and button size. Use 'lg' for headlines.
+     * @default 'md'
+     */
+    size?: 'md' | 'lg';
+    /**
+     * Defines if the internal textarea is allowed to resize vertically.
+     * This comes in handy for larger text and when using multiple input rows.
+     * @default false
+     */
+    allowResize?: boolean;
+    /**
+     * Defines the number of rows to use by the internal textarea component.
+     * @default 1
+     */
+    inputRows?: number;
+    /**
+     * Additional classes to be set on the editor input itself.
+     */
+    inputClassName?: string;
+    /**
+     * Additional classes to be set on the editor wrapper element.
+     */
+    editorClassName?: string;
+    /**
+     * Additional classes to be set on the text wrapper element.
+     */
+    className?: string;
+};
+declare const EditableContent: (props: PropsWithChildren<EditableContentProps>) => import("react/jsx-runtime").JSX.Element;
+export default EditableContent;

package/components/editableContent/EditableContent.js

@@ -0,0 +1,109 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useMemo } from 'react';
+import noop from 'lodash/fp/noop';
+import classNames from 'classnames';
+import { usePopper } from 'react-popper';
+import { createPortal } from 'react-dom';
+import { getOrCreatePortalRoot } from '../../utils/portalRoot';
+import useEsc from '../../hooks/useEsc';
+import useFocusTrap from '../../hooks/useFocusTrap';
+// Features
+// [x] Hide children with opacity 0
+// [x] Allow custom editor elements
+// [x] Use textarea for longer text
+// [x] Use focus trap
+// [x] Keyboard support mit esc and tab+enter to accept
+// [-] If space, get the width of the text to make the input larger - no nice solution
+// [x] Control edit mode from outside
+// This offset takes into account the padding of the overlay and the padding/border of the edit component (input).
+// This works best if the text is wrapped within a single <span> tag and has a dotted bottom border only.
+// External offset defined by the using component will be starting from 0 for easier understanding.
+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 [isEditMode, setIsEditMode] = useState(show);
+    const [inputValue, setInputValue] = useState('');
+    const [hasError, setHasError] = useState(false);
+    const [referenceElement, setReferenceElement] = useState(null);
+    const [popperElement, setPopperElement] = useState(null);
+    const hasCustomControl = !!customEditor;
+    // Close edit mode on "esc"
+    useEsc(() => handleCloseEditMode());
+    // Trap focus on the popper element
+    useFocusTrap(popperElement);
+    // Input ref used to focus inside when entering edit mode
+    const inputRef = useRef(null);
+    useEffect(() => {
+        var _a, _b;
+        if (inputRef.current && isEditMode) {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.select();
+        }
+    }, [isEditMode, inputRef.current]);
+    const customModifier = useMemo(() => ({
+        name: 'offset',
+        options: {
+            offset: ({ reference }) => {
+                const leftOffset = POPOVER_OFFSET_LEFT + editorOffsetLeft;
+                const topOffset = -(reference.height - (POPOVER_OFFSET_TOP + editorOffsetTop));
+                return [leftOffset, topOffset];
+            },
+        },
+    }), []);
+    const popperConfig = {
+        placement: 'bottom-start',
+        modifiers: [customModifier],
+        strategy: 'absolute',
+    };
+    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 : '');
+        onEditMode();
+    };
+    const handleInputChange = (event) => {
+        setInputValue(event.target.value);
+    };
+    const handleKeyDown = (event) => {
+        // Prevent line breaks when textarea is a single line
+        if (event.key === 'Enter' && inputRows === DEFAULT_TEXTAREA_ROWS) {
+            event.preventDefault();
+        }
+    };
+    const handleCloseEditMode = () => {
+        setIsEditMode(false);
+        onCancel();
+    };
+    const handleSaveChanges = () => {
+        const isInputValid = onSaveValidation(inputValue);
+        setHasError(!isInputValid);
+        if (isInputValid) {
+            setIsEditMode(false);
+            onSave(inputValue);
+        }
+    };
+    // Control edit mode from outside for instance if text element got focus
+    // and user used "Enter" key to enter edit mode
+    const [previousShow, setPreviousShow] = useState(show);
+    if (show !== previousShow) {
+        if (show) {
+            handleEditMode();
+        }
+        setPreviousShow(show);
+    }
+    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 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())] }));
+};
+export default EditableContent;

package/components/expander/ExpanderList.d.ts

@@ -0,0 +1,39 @@
+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 };
+    }
+}
+export default ExpanderList;
+import React from "react";
+import PropTypes from "prop-types";

package/components/expander/ExpanderList.js

@@ -1,157 +1,97 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import isEqual from 'lodash/fp/isEqual';
-import Collapse from '../collapse/Collapse';
-import classname from 'classnames';
-var getRandomString = function getRandomString() {
-  return (Math.random() + 1).toString(36).toUpperCase().substring(2);
-};
-var ExpanderList = /*#__PURE__*/function (_Component) {
-  _inherits(ExpanderList, _Component);
-  var _super = _createSuper(ExpanderList);
-  function ExpanderList() {
-    var _this;
-    _classCallCheck(this, ExpanderList);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _this.state = {
-      items: _this.parseItems(_this.props.items)
-    };
-    return _this;
-  }
-  _createClass(ExpanderList, [{
-    key: "parseItems",
-    value: function parseItems(items) {
-      return items.map(function (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
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var _this2 = this;
-      // Map the internal open state to the new props in order to preserve opened items
-      var mappedNextProps = nextProps.items.map(function (item) {
-        if (item.open === undefined || item.open === null) {
-          var matchingItem = _this2.state.items.find(function (oldItem) {
-            return 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)
-        });
-      }
-    }
-  }, {
-    key: "handleExpand",
-    value: function handleExpand(itemToExpand) {
-      // Toggle the open state for the selected item based on the provided or generated id
-      var result = this.state.items.find(function (item) {
-        return item.id === itemToExpand.id;
-      });
-      result.open = !result.open;
-      this.setState({
-        items: this.state.items
-      });
-    }
-  }, {
-    key: "getHeaderElement",
-    value: function getHeaderElement(item) {
-      var _this3 = this;
-      var headerClassNames = classname('expander-list-header', item.headerClassName && item.headerClassName);
-      var iconClassNames = item.body && classname('expander-icon', 'rioglyph', 'rioglyph-chevron-down');
-      return /*#__PURE__*/React.createElement("div", {
-        className: headerClassNames,
-        onClick: function onClick() {
-          if (item.body) {
-            _this3.handleExpand(item);
-          }
-        }
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "expander-list-header-content"
-      }, item.header), /*#__PURE__*/React.createElement("span", {
-        className: iconClassNames
-      }));
-    }
-  }, {
-    key: "getBodyElement",
-    value: function getBodyElement(item, isOpen, mountOnEnter, unmountOnExit) {
-      if (!item.body) {
-        return;
-      }
-      var bodyClassNames = classname('expander-list-body', item.bodyClassName && item.bodyClassName);
-      return /*#__PURE__*/React.createElement(Collapse, {
-        "in": isOpen,
-        mountOnEnter: mountOnEnter,
-        unmountOnExit: unmountOnExit
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "expander-list-body-wrapper"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: bodyClassNames
-      }, item.body)));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this4 = this;
-      var listClassNames = classname('expander-list list-group', this.props.className);
-      return /*#__PURE__*/React.createElement("ul", {
-        className: listClassNames
-      }, this.state.items.map(function (item) {
-        var isOpen = item.open;
-        var itemClassNames = classname('list-group-item', item.className && "".concat(item.className), item.body && 'expandable', isOpen && 'open');
-        return /*#__PURE__*/React.createElement("li", {
-          className: itemClassNames,
-          key: item.id
-        }, _this4.getHeaderElement(item), _this4.getBodyElement(item, isOpen, _this4.props.mountOnEnter, _this4.props.unmountOnExit));
-      }));
-    }
-  }]);
-  return ExpanderList;
-}(Component);
-export { ExpanderList as default };
-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 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,
+};

package/components/expander/ExpanderPanel.d.ts

@@ -0,0 +1,51 @@
+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";