@rio-cloud/rio-uikit 1.10.1 → 1.12.0

package/lib/es/src/components/editableContent/EditableContent.js

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_popper_1 = require("react-popper");
+const react_dom_1 = require("react-dom");
+const portalRoot_1 = require("../../utils/portalRoot");
+const useEsc_1 = tslib_1.__importDefault(require("../../hooks/useEsc"));
+const useFocusTrap_1 = tslib_1.__importDefault(require("../../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 = undefined, onSave = noop_1.default, onCancel = noop_1.default, onFocus = noop_1.default, onBlur = noop_1.default, onEditMode = noop_1.default, onSaveValidation = () => true, isValid = true, errorMessage, allowResize = false, inputRows = DEFAULT_TEXTAREA_ROWS, editorOffsetTop = 0, editorOffsetLeft = 0, customEditor, size = 'md', className = '', inputClassName = '', editorClassName = '', children, ...remainingProps } = props;
+    const [isEditMode, setIsEditMode] = (0, react_1.useState)(show);
+    const [inputValue, setInputValue] = (0, react_1.useState)('');
+    const [hasError, setHasError] = (0, react_1.useState)(!isValid);
+    const [referenceElement, setReferenceElement] = (0, react_1.useState)(null);
+    const [popperElement, setPopperElement] = (0, react_1.useState)(null);
+    const hasCustomControl = !!customEditor;
+    // Close edit mode on "esc"
+    (0, useEsc_1.default)(() => handleCloseEditMode());
+    // Trap focus on the popper element
+    (0, useFocusTrap_1.default)(popperElement);
+    // Input ref used to focus inside when entering edit mode
+    const inputRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (inputRef.current && isEditMode) {
+            inputRef.current?.focus();
+            inputRef.current?.select();
+        }
+    }, [isEditMode, inputRef.current]);
+    const customModifier = (0, react_1.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 } = (0, react_popper_1.usePopper)(referenceElement, popperElement, popperConfig);
+    const handleEditMode = () => {
+        // 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 = () => {
+        setIsEditMode(true);
+        setInputValue(referenceElement?.textContent?.trimEnd() ?? '');
+        setHasError(false);
+    };
+    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();
+            // Save on "enter" when textarea has a single line
+            handleSaveChanges();
+        }
+    };
+    const handleCloseEditMode = () => {
+        setIsEditMode(false);
+        onCancel();
+    };
+    const handleSaveChanges = () => {
+        const isInputValid = onSaveValidation(inputValue);
+        setHasError(!isInputValid);
+        if (isInputValid) {
+            setIsEditMode(false);
+            onSave(inputValue.trimEnd());
+        }
+    };
+    // Control edit mode from outside for instance if text element got focus
+    // and user used "Enter" key to enter edit mode.
+    const [previousShow, setPreviousShow] = (0, react_1.useState)(show);
+    if (show !== previousShow) {
+        if (show) {
+            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] = (0, react_1.useState)(isValid);
+    if (isValid !== previousIsValid) {
+        setHasError(!isValid);
+        setPreviousIsValid(isValid);
+    }
+    const textWrapperClasses = (0, classnames_1.default)(className, isEditMode && 'opacity-0');
+    const overlayWrapperClasses = (0, classnames_1.default)('EditableContentEditor', 'display-flex gap-5', 'padding-5', 'rounded', 'shadow-accent', 'z-index-max', 'bg-white', editorClassName);
+    const inputWrapperClasses = (0, classnames_1.default)('display-flex flex-column gap-5', 'margin-0', 'form-group', hasError && 'has-feedback has-error');
+    const inputClasses = (0, classnames_1.default)('form-control', size === 'lg' && 'input-lg', inputClassName);
+    const inputStyle = {
+        minWidth: '100px',
+        resize: allowResize ? 'vertical' : 'none',
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { ref: setReferenceElement, onClick: handleEditMode, className: textWrapperClasses, children: children }), isEditMode &&
+                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { className: overlayWrapperClasses, onClick: event => event.stopPropagation(), ref: setPopperElement, style: styles.popper, ...attributes.popper, ...remainingProps, children: [(0, jsx_runtime_1.jsxs)("div", { className: inputWrapperClasses, children: [hasCustomControl && customEditor, !hasCustomControl && ((0, jsx_runtime_1.jsx)("textarea", { ref: inputRef, className: inputClasses, value: inputValue, onChange: handleInputChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: handleKeyDown, style: inputStyle, rows: inputRows })), hasError && (0, jsx_runtime_1.jsx)("div", { className: 'help-block position-relative', children: errorMessage })] }), (0, jsx_runtime_1.jsxs)("div", { className: 'display-flex gap-5', children: [(0, jsx_runtime_1.jsx)("button", { type: 'button', onClick: handleCloseEditMode, className: `EditableContentCancel btn btn-default btn-icon-only btn-${size}`, "aria-label": 'EditableContent cancel button', "data-testid": 'EditableContentCancel', children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-remove' }) }), (0, jsx_runtime_1.jsx)("button", { type: 'button', onClick: handleSaveChanges, className: `EditableContentSave btn btn-primary btn-icon-only btn-${size}`, "aria-label": 'EditableContent save button', "data-testid": 'EditableContentSave', children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-ok' }) })] })] }), (0, portalRoot_1.getOrCreatePortalRoot)())] }));
+};
+exports.default = EditableContent;

package/lib/es/src/components/expander/ExpanderList.d.ts

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

package/lib/es/src/components/expander/ExpanderList.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const isEqual_1 = tslib_1.__importDefault(require("lodash/fp/isEqual"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Collapse_1 = tslib_1.__importDefault(require("../collapse/Collapse"));
+const hasUtilityClass_1 = require("../../utils/hasUtilityClass");
+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 = [], unmountOnExit = true, rounded = true, bordered = true, className = '' } = props;
+    const [listItems, setListItems] = (0, react_1.useState)(parseItems(items));
+    // Update internal state from external prop change
+    const [previousItems, setPreviousItems] = (0, react_1.useState)(items);
+    if (!(0, isEqual_1.default)(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 = (0, classnames_1.default)('expander-list list-group', rounded && !(0, hasUtilityClass_1.hasRoundedClass)(className) && 'rounded', bordered && !(0, hasUtilityClass_1.hasBorderClass)(className) && 'border', className);
+    return ((0, jsx_runtime_1.jsx)("ul", { className: listClassNames, children: listItems.map(item => {
+            const isOpen = item.open;
+            const itemClassNames = (0, classnames_1.default)('list-group-item', item.className && item.className, item.body && 'expandable', isOpen && 'open');
+            return ((0, jsx_runtime_1.jsxs)("li", { className: itemClassNames, children: [(0, jsx_runtime_1.jsx)(ExpanderListItemHeader, { item: item, onToggle: handleToggleItem }), item.body && ((0, jsx_runtime_1.jsx)(Collapse_1.default, { open: isOpen, unmountOnExit: unmountOnExit, children: (0, jsx_runtime_1.jsx)("div", { className: 'expander-list-body-wrapper', children: (0, jsx_runtime_1.jsx)(ExpanderListItemBody, { className: item.bodyClassName, children: item.body }) }) }))] }, item.id));
+        }) }));
+};
+const ExpanderListItemHeader = ({ item, onToggle }) => {
+    const headerClassNames = (0, classnames_1.default)('expander-list-header', item.headerClassName);
+    const iconClassNames = (0, classnames_1.default)('expander-icon', 'rioglyph', 'rioglyph-chevron-down');
+    return ((0, jsx_runtime_1.jsxs)("div", { className: headerClassNames, onClick: () => onToggle(item), "aria-label": 'expander item header', children: [(0, jsx_runtime_1.jsx)("span", { className: 'expander-list-header-content', children: item.header }), item.body && (0, jsx_runtime_1.jsx)("span", { className: iconClassNames })] }));
+};
+const ExpanderListItemBody = ({ className, children }) => {
+    const bodyClassNames = (0, classnames_1.default)('expander-list-body', className);
+    return ((0, jsx_runtime_1.jsx)("div", { className: bodyClassNames, "aria-label": 'expander item body', children: children }));
+};
+exports.default = ExpanderList;

package/lib/es/src/components/expander/ExpanderPanel.d.ts

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

package/lib/es/src/components/expander/ExpanderPanel.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Collapse_1 = tslib_1.__importDefault(require("../collapse/Collapse"));
+const ExpanderPanel = (props) => {
+    const { open = false, iconLeft = false, bsStyle = 'blank', title, headerClassName, titleClassName, bodyClassName, iconClassName, unmountOnExit = true, onEntered = noop_1.default, onExited = noop_1.default, onAnimationStart = noop_1.default, onToggle = noop_1.default, className, children, ...remainingProps } = props;
+    const [isOpen, setIsOpen] = (0, react_1.useState)(open);
+    // Update internal state from external prop change
+    const [previousOpen, setPreviousOpen] = (0, react_1.useState)(open);
+    if (previousOpen !== open) {
+        setIsOpen(open);
+        setPreviousOpen(open);
+    }
+    const handleToggle = () => {
+        const newState = !isOpen;
+        setIsOpen(newState);
+        onToggle(newState);
+    };
+    const wrapperClassNames = (0, classnames_1.default)('expander-panel panel', `panel-${bsStyle}`, className);
+    const iconClassNames = (0, classnames_1.default)('expander-icon', iconClassName, 'rioglyph', 'rioglyph-chevron-down');
+    const headerClassNames = (0, classnames_1.default)('panel-heading', isOpen && 'open', iconLeft && 'icon-left', headerClassName && headerClassName);
+    const titleClassNames = (0, classnames_1.default)('title', titleClassName && titleClassName);
+    const bodyClassNames = (0, classnames_1.default)('panel-body', bodyClassName && bodyClassName);
+    const isRenderCallback = children && typeof children === 'function';
+    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: wrapperClassNames, "aria-label": 'expander panel', children: [(0, jsx_runtime_1.jsxs)("div", { className: headerClassNames, onClick: handleToggle, "aria-label": 'panel heading', children: [(0, jsx_runtime_1.jsx)("span", { className: titleClassNames, children: title }), (0, jsx_runtime_1.jsx)("span", { className: iconClassNames }), bsStyle === 'separator' && ((0, jsx_runtime_1.jsx)("div", { className: 'separator', children: (0, jsx_runtime_1.jsx)("hr", {}) }))] }), (0, jsx_runtime_1.jsx)(Collapse_1.default, { open: isOpen, unmountOnExit: unmountOnExit, onEntered: onEntered, onExited: onExited, onAnimationStart: () => onAnimationStart(), children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { className: bodyClassNames, children: isRenderCallback ? children(isOpen) : children }) }) })] }));
+};
+exports.default = ExpanderPanel;

package/lib/es/src/components/fade/Fade.d.ts

@@ -0,0 +1,76 @@
+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 <motion.div> 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;

package/lib/es/src/components/fade/Fade.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const framer_motion_1 = require("framer-motion");
+const isArray_1 = tslib_1.__importDefault(require("lodash/fp/isArray"));
+const head_1 = tslib_1.__importDefault(require("lodash/fp/head"));
+const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
+const useAfterMount_1 = tslib_1.__importDefault(require("../../useAfterMount"));
+const animationPropsForStyle = {
+    fromLeft: {
+        initial: { x: -10, y: 0, opacity: 0 },
+        animate: { x: 0, y: 0, opacity: 1 },
+        exit: { x: -10, y: 0, opacity: 0 },
+    },
+    fromRight: {
+        initial: { x: 10, y: 0, opacity: 0 },
+        animate: { x: 0, y: 0, opacity: 1 },
+        exit: { x: 10, y: 0, opacity: 0 },
+    },
+    fromTop: {
+        initial: { y: -10, x: 0, opacity: 0 },
+        animate: { y: 0, x: 0, opacity: 1 },
+        exit: { y: -10, x: 0, opacity: 0 },
+    },
+    fromBottom: {
+        initial: { y: 10, x: 0, opacity: 0 },
+        animate: { y: 0, x: 0, opacity: 1 },
+        exit: { y: 10, x: 0, opacity: 0 },
+    },
+    fade: {
+        initial: { x: 0, y: 0, opacity: 0 },
+        animate: { x: 0, y: 0, opacity: 1 },
+        exit: { x: 0, y: 0, opacity: 0 },
+    },
+    tabs: {
+        initial: { x: 2, y: 0, opacity: 0 },
+        animate: { x: 0, y: 0, opacity: 1 },
+        exit: { x: -2, y: 0, opacity: 0 },
+    },
+    page: {
+        initial: 'pageEnter',
+        animate: 'pageCenter',
+        exit: 'pageExit',
+    },
+    pageBack: {
+        initial: 'pageEnter',
+        animate: 'pageCenter',
+        exit: 'pageExit',
+    },
+};
+const getPageDirection = (animationStyle) => animationStyle === 'pageBack' ? -1 : 1;
+const pageTransitionVariants = {
+    pageEnter: (pageDirection) => ({ x: `${pageDirection * 60}%`, opacity: 0 }),
+    pageCenter: { x: 0, opacity: 1 },
+    pageExit: (pageDirection) => ({ zIndex: 0, x: `${-pageDirection * 60}%`, opacity: 0 }),
+};
+const Fade = (props) => {
+    const { show = true, initial = false, duration = 0.2, exitBeforeEnter = false, animationStyle = 'fade', animatePresenceProps, motionProps, onExitComplete = noop_1.default, children, } = props;
+    const [allowInitialAnimation, setAllowInitialAnimation] = (0, react_1.useState)(initial);
+    (0, useAfterMount_1.default)(() => {
+        if (!allowInitialAnimation) {
+            setAllowInitialAnimation(true);
+        }
+    });
+    let motionDivKey = 'fade';
+    // If there are multiple children that are conditionally rendered like
+    // in case of a tabbed content - get the current visible child key
+    // to update the motion.div key to animate different children
+    if ((0, isArray_1.default)(children)) {
+        const currentChild = (0, head_1.default)(children.filter(child => Boolean(child)));
+        motionDivKey = `fade-${currentChild.key}`;
+    }
+    // In case the animation is a page transition, use custom variants and add a custom pageDirection variable
+    // to animate in the right direction
+    const isPageTransition = animationStyle === 'page' || animationStyle === 'pageBack';
+    const pageDirection = getPageDirection(animationStyle);
+    const custom = isPageTransition ? pageDirection : null;
+    const pageTransitionProps = isPageTransition ? { variants: pageTransitionVariants } : null;
+    const selectedAnimationProps = animationPropsForStyle[animationStyle];
+    // Disable initial animation on mount. After mount the initial animation step is needed to enable
+    // the "fade-in" animation, otherwise it just appears
+    const selectedInitial = allowInitialAnimation ? selectedAnimationProps.initial : false;
+    const animationProps = { ...selectedAnimationProps, initial: selectedInitial };
+    return (
+    // @ts-ignore-next-line
+    (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { initial: allowInitialAnimation, exitBeforeEnter: exitBeforeEnter, onExitComplete: onExitComplete, custom: custom, ...animatePresenceProps, children: show && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { transition: { duration }, custom: custom, ...animationProps, ...pageTransitionProps, ...motionProps, children: children }, motionDivKey)) }));
+};
+Fade.FADE = 'fade';
+Fade.FROM_LEFT = 'fromLeft';
+Fade.FROM_RIGHT = 'fromRight';
+Fade.FROM_TOP = 'fromTop';
+Fade.FROM_BOTTOM = 'fromBottom';
+Fade.TABS = 'tabs';
+Fade.PAGE = 'page';
+Fade.PAGE_BACK = 'pageBack';
+exports.default = Fade;

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

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

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

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

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

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