@rio-cloud/rio-uikit 1.12.0 → 1.13.0

package/lib/es/components/dropdown/SplitCaretButton.js

@@ -1,14 +0,0 @@
-"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 classnames_1 = tslib_1.__importDefault(require("classnames"));
-const Caret_1 = tslib_1.__importDefault(require("./Caret"));
-const Button_1 = tslib_1.__importDefault(require("../button/Button"));
-const SplitCaretButton = (0, react_1.forwardRef)((props, ref) => {
-    const { disabled = false, bsStyle, bsSize, onClick, className, ...remainingProps } = props;
-    const splitCaretButtonClasses = (0, classnames_1.default)('dropdown-toggle', className);
-    return ((0, jsx_runtime_1.jsx)(Button_1.default, { ...remainingProps, type: 'button', ref: ref, disabled: disabled, bsStyle: bsStyle, bsSize: bsSize, onClick: onClick, className: splitCaretButtonClasses, children: (0, jsx_runtime_1.jsx)(Caret_1.default, {}) }));
-});
-exports.default = SplitCaretButton;

package/lib/es/components/editableContent/EditableContent.d.ts

@@ -1,94 +0,0 @@
-import React, { type PropsWithChildren } from 'react';
-export type EditableContentProps = {
-    /**
-     * Visibility flag used to control edit mode from outside.
-     * @default undefined
-     */
-    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;
-    /**
-     * Controls the error message visibility from outside. This is useful when using a custom input
-     * where the validation happens outside of this component.
-     * @default true
-     */
-    isValid?: 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.
-     * When a single line is used, the input is saved on "enter" key.
-     *
-     * @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/lib/es/components/editableContent/EditableContent.js

@@ -1,129 +0,0 @@
-"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/components/expander/ExpanderList.d.ts

@@ -1,69 +0,0 @@
-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/components/expander/ExpanderList.js

@@ -1,61 +0,0 @@
-"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/components/expander/ExpanderPanel.d.ts

@@ -1,75 +0,0 @@
-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/components/expander/ExpanderPanel.js

@@ -1,31 +0,0 @@
-"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/components/fade/Fade.d.ts

@@ -1,76 +0,0 @@
-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/components/fade/Fade.js

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