@rio-cloud/rio-uikit 2.0.0-beta.1 → 2.0.0-beta.2

package/components/editableContent/EditableContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableContent.js","sources":["../../../src/components/editableContent/EditableContent.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useMemo, type PropsWithChildren, type CSSProperties } from 'react';\nimport { noop } from 'es-toolkit/function';\nimport classNames from 'classnames';\nimport { usePopper } from 'react-popper';\nimport { createPortal } from 'react-dom';\nimport type { Options, Rect, StrictModifiers } from '@popperjs/core';\n\nimport { getOrCreatePortalRoot } from '../../utils/portalRoot';\nimport useEsc from '../../hooks/useEsc';\nimport useFocusTrap from '../../hooks/useFocusTrap';\n\n// Features\n// [x] Hide children with opacity 0\n// [x] Allow custom editor elements\n// [x] Use textarea for longer text\n// [x] Use focus trap\n// [x] Keyboard support mit esc and tab+enter to accept\n// [-] If space, get the width of the text to make the input larger - no nice solution\n// [x] Control edit mode from outside\n\n// This offset takes into account the padding of the overlay and the padding/border of the edit component (input).\n// This works best if the text is wrapped within a single <span> tag and has a dotted bottom border only.\n// External offset defined by the using component will be starting from 0 for easier understanding.\nconst POPOVER_OFFSET_TOP = -13;\nconst POPOVER_OFFSET_LEFT = -18;\n\nconst DEFAULT_TEXTAREA_ROWS = 1;\n\nexport type EditableContentProps = {\n    /**\n     * Visibility flag used to control edit mode from outside.\n     * @default undefined\n     */\n    show?: boolean;\n\n    /**\n     * Callback function triggered when the save button is clicked.\n     * @param value\n     * @returns\n     */\n    onSave?: (value: string) => void;\n\n    /**\n     * Callback function triggered when the cancel button is clicked.\n     */\n    onCancel?: VoidFunction;\n\n    /**\n     * Callback function triggered when the input gets focused.\n     */\n    onFocus?: VoidFunction;\n\n    /**\n     * Callback function triggered when input looses it's focus.\n     */\n    onBlur?: VoidFunction;\n\n    /**\n     * Callback function triggered when entering the edit mode.\n     */\n    onEditMode?: VoidFunction;\n\n    /**\n     * Validation function to intercept saving and prevent save on error.\n     */\n    onSaveValidation?: (value: string) => boolean;\n\n    /**\n     * Controls the error message visibility from outside. This is useful when using a custom input\n     * where the validation happens outside of this component.\n     * @default true\n     */\n    isValid?: boolean;\n\n    /**\n     * The error message that shall be shown to the user in case the validation fails.\n     */\n    errorMessage?: React.ReactNode;\n\n    /**\n     * Use this prop to define a custom editor input component like Select, NumberInput, TimePicker or DatePicker.\n     * Handling input state changes of a custom editor need to be handled outside of this component.\n     * By default the EditableContent uses a built-in textarea to allow resizing for larger text.\n     */\n    customEditor?: React.ReactNode;\n\n    /**\n     * Offset value to control the vertical position for the editor in case the text element has\n     * borders, spacings different text sizes.\n     * @default 0\n     */\n    editorOffsetTop?: number;\n\n    /**\n     * Offset value to control the horizontal position for the editor in case the text element has\n     * borders, spacings different text sizes.\n     * @default 0\n     */\n    editorOffsetLeft?: number;\n\n    /**\n     * Defines the input and button size. Use 'lg' for headlines.\n     * @default 'md'\n     */\n    size?: 'md' | 'lg';\n\n    /**\n     * Defines if the internal textarea is allowed to resize vertically.\n     * This comes in handy for larger text and when using multiple input rows.\n     * @default false\n     */\n    allowResize?: boolean;\n\n    /**\n     * Defines the number of rows to use by the internal textarea component.\n     * When a single line is used, the input is saved on \"enter\" key.\n     *\n     * @default 1\n     */\n    inputRows?: number;\n\n    /**\n     * Additional classes to be set on the editor input itself.\n     */\n    inputClassName?: string;\n\n    /**\n     * Additional classes to be set on the editor wrapper element.\n     */\n    editorClassName?: string;\n\n    /**\n     * Additional classes to be set on the text wrapper element.\n     */\n    className?: string;\n};\n\nconst EditableContent = (props: PropsWithChildren<EditableContentProps>) => {\n    const {\n        show = undefined,\n        onSave = noop,\n        onCancel = noop,\n        onFocus = noop,\n        onBlur = noop,\n        onEditMode = noop,\n        onSaveValidation = () => true,\n        isValid = true,\n        errorMessage,\n        allowResize = false,\n        inputRows = DEFAULT_TEXTAREA_ROWS,\n        editorOffsetTop = 0,\n        editorOffsetLeft = 0,\n        customEditor,\n        size = 'md',\n        className = '',\n        inputClassName = '',\n        editorClassName = '',\n        children,\n        ...remainingProps\n    } = props;\n\n    const [isEditMode, setIsEditMode] = useState(show);\n    const [inputValue, setInputValue] = useState('');\n    const [hasError, setHasError] = useState(!isValid);\n\n    const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>(null);\n    const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n\n    const hasCustomControl = !!customEditor;\n\n    // Close edit mode on \"esc\"\n    useEsc(() => handleCloseEditMode());\n\n    // Trap focus on the popper element\n    useFocusTrap(popperElement);\n\n    // Input ref used to focus inside when entering edit mode\n    const inputRef = useRef<HTMLTextAreaElement>(null);\n\n    useEffect(() => {\n        if (inputRef.current && isEditMode) {\n            inputRef.current?.focus();\n            inputRef.current?.select();\n        }\n    }, [isEditMode, inputRef.current]);\n\n    const customModifier = useMemo(\n        () => ({\n            name: 'offset',\n            options: {\n                offset: ({ reference }: { reference: Rect }) => {\n                    const leftOffset = POPOVER_OFFSET_LEFT + editorOffsetLeft;\n                    const topOffset = -(reference.height - (POPOVER_OFFSET_TOP + editorOffsetTop));\n                    return [leftOffset, topOffset];\n                },\n            },\n        }),\n        []\n    );\n\n    const popperConfig: Options = {\n        placement: 'bottom-start',\n        modifiers: [customModifier],\n        strategy: 'absolute',\n    };\n\n    const { styles, attributes } = usePopper<StrictModifiers>(referenceElement, popperElement, popperConfig);\n\n    const handleEditMode = () => {\n        // In a controlled usage, the \"show\" property is set from the outside\n        // and the edit mode is handled there\n        if (show === undefined) {\n            enterEditMode();\n        }\n        onEditMode();\n    };\n\n    const enterEditMode = () => {\n        setIsEditMode(true);\n        setInputValue(referenceElement?.textContent?.trimEnd() ?? '');\n        setHasError(false);\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        setInputValue(event.target.value);\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        // Prevent line breaks when textarea is a single line\n        if (event.key === 'Enter' && inputRows === DEFAULT_TEXTAREA_ROWS) {\n            event.preventDefault();\n\n            // Save on \"enter\" when textarea has a single line\n            handleSaveChanges();\n        }\n    };\n\n    const handleCloseEditMode = () => {\n        setIsEditMode(false);\n        onCancel();\n    };\n\n    const handleSaveChanges = () => {\n        const isInputValid = onSaveValidation(inputValue);\n        setHasError(!isInputValid);\n\n        if (isInputValid) {\n            setIsEditMode(false);\n            onSave(inputValue.trimEnd());\n        }\n    };\n\n    // Control edit mode from outside for instance if text element got focus\n    // and user used \"Enter\" key to enter edit mode.\n    const [previousShow, setPreviousShow] = useState(show);\n    if (show !== previousShow) {\n        if (show) {\n            enterEditMode();\n        }\n        if (!show) {\n            setIsEditMode(false);\n        }\n        setPreviousShow(show);\n    }\n\n    // Control error message visibility from outside. This is useful when using a custom input\n    // where the validation happens outside of this component.\n    const [previousIsValid, setPreviousIsValid] = useState(isValid);\n    if (isValid !== previousIsValid) {\n        setHasError(!isValid);\n        setPreviousIsValid(isValid);\n    }\n\n    const textWrapperClasses = classNames(className, isEditMode && 'opacity-0');\n\n    const overlayWrapperClasses = classNames(\n        'EditableContentEditor',\n        'display-flex gap-5',\n        'padding-5',\n        'rounded',\n        'shadow-accent',\n        'z-index-max',\n        'bg-white',\n        editorClassName\n    );\n\n    const inputWrapperClasses = classNames(\n        'display-flex flex-column gap-5',\n        'margin-0',\n        'form-group',\n        hasError && 'has-feedback has-error'\n    );\n\n    const inputClasses = classNames('form-control', size === 'lg' && 'input-lg', inputClassName);\n\n    const inputStyle: CSSProperties = {\n        minWidth: '100px',\n        resize: allowResize ? 'vertical' : 'none',\n    };\n\n    return (\n        <>\n            <span ref={setReferenceElement} onClick={handleEditMode} className={textWrapperClasses}>\n                {children}\n            </span>\n            {isEditMode &&\n                createPortal(\n                    <div\n                        className={overlayWrapperClasses}\n                        onClick={event => event.stopPropagation()}\n                        ref={setPopperElement}\n                        style={styles.popper}\n                        {...attributes.popper}\n                        {...remainingProps}\n                    >\n                        <div className={inputWrapperClasses}>\n                            {hasCustomControl && customEditor}\n                            {!hasCustomControl && (\n                                <textarea\n                                    ref={inputRef}\n                                    className={inputClasses}\n                                    value={inputValue}\n                                    onChange={handleInputChange}\n                                    onFocus={onFocus}\n                                    onBlur={onBlur}\n                                    onKeyDown={handleKeyDown}\n                                    style={inputStyle}\n                                    rows={inputRows}\n                                />\n                            )}\n                            {hasError && <div className='help-block position-relative'>{errorMessage}</div>}\n                        </div>\n                        <div className='display-flex gap-5'>\n                            <button\n                                type='button'\n                                onClick={handleCloseEditMode}\n                                className={`EditableContentCancel btn btn-default btn-icon-only btn-${size}`}\n                                aria-label='EditableContent cancel button'\n                                data-testid='EditableContentCancel'\n                            >\n                                <span className='rioglyph rioglyph-remove' />\n                            </button>\n                            <button\n                                type='button'\n                                onClick={handleSaveChanges}\n                                className={`EditableContentSave btn btn-primary btn-icon-only btn-${size}`}\n                                aria-label='EditableContent save button'\n                                data-testid='EditableContentSave'\n                            >\n                                <span className='rioglyph rioglyph-ok' />\n                            </button>\n                        </div>\n                    </div>,\n                    getOrCreatePortalRoot()\n                )}\n        </>\n    );\n};\n\nexport default EditableContent;\n"],"names":["POPOVER_OFFSET_TOP","POPOVER_OFFSET_LEFT","DEFAULT_TEXTAREA_ROWS","EditableContent","props","show","onSave","noop","onCancel","onFocus","onBlur","onEditMode","onSaveValidation","isValid","errorMessage","allowResize","inputRows","editorOffsetTop","editorOffsetLeft","customEditor","size","className","inputClassName","editorClassName","children","remainingProps","isEditMode","setIsEditMode","useState","inputValue","setInputValue","hasError","setHasError","referenceElement","setReferenceElement","popperElement","setPopperElement","hasCustomControl","useEsc","handleCloseEditMode","useFocusTrap","inputRef","useRef","useEffect","popperConfig","useMemo","reference","leftOffset","topOffset","styles","attributes","usePopper","handleEditMode","enterEditMode","handleInputChange","event","handleKeyDown","handleSaveChanges","isInputValid","previousShow","setPreviousShow","previousIsValid","setPreviousIsValid","textWrapperClasses","classNames","overlayWrapperClasses","inputWrapperClasses","inputClasses","inputStyle","jsxs","Fragment","jsx","createPortal","getOrCreatePortalRoot"],"mappings":"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"}

package/components/expander/ExpanderList.d.ts

@@ -1,4 +1,4 @@
-import type React from 'react';
+import { default as React } from 'react';
 export type ExpanderListItem = {
     /**
      * The "id" property is used to know which item is expanded. It will also be used to control

package/components/expander/ExpanderList.js

@@ -1,58 +1,46 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { isEqual } from 'es-toolkit/predicate';
-import classNames from 'classnames';
-import Collapse from "../collapse/Collapse.js";
-import { hasBorderClass, hasRoundedClass } from "../../utils/hasUtilityClass.js";
-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;
-    });
+import { jsx as o, jsxs as h } from "react/jsx-runtime";
+import { useState as m } from "react";
+import { isEqual as g } from "es-toolkit/predicate";
+import d from "classnames";
+import f from "../collapse/Collapse.js";
+import { hasRoundedClass as I, hasBorderClass as v } from "../../utils/hasUtilityClass.js";
+const L = () => (Math.random() + 1).toString(36).toUpperCase().substring(2), u = (r) => r.map((s) => (s.id || (s.id = L()), s)), q = (r) => {
+  const { items: s = [], unmountOnExit: n = !0, rounded: t = !0, bordered: N = !0, className: p = "" } = r, [c, i] = m(u(s)), [b, x] = m(s);
+  g(b, s) || (i(u(s)), x(s));
+  const C = (e) => {
+    if (!e.body)
+      return;
+    const l = [...c].map((a) => (a.id === e.id && (a.onOpen && !a.open && a.onOpen(), a.onClose && a.open && a.onClose(), a.open = !a.open), a));
+    i(l);
+  }, y = d(
+    "expander-list list-group",
+    t && !I(p) && "rounded",
+    N && !v(p) && "border",
+    p
+  );
+  return /* @__PURE__ */ o("ul", { className: y, children: c.map((e) => {
+    const l = e.open, a = d(
+      "list-group-item",
+      e.className && e.className,
+      e.body && "expandable",
+      l && "open"
+    );
+    return /* @__PURE__ */ h("li", { className: a, children: [
+      /* @__PURE__ */ o(E, { item: e, onToggle: C }),
+      e.body && /* @__PURE__ */ o(f, { open: l, unmountOnExit: n, children: /* @__PURE__ */ o("div", { className: "expander-list-body-wrapper", children: /* @__PURE__ */ o(O, { className: e.bodyClassName, children: e.body }) }) })
+    ] }, e.id);
+  }) });
+}, E = ({ item: r, onToggle: s }) => {
+  const n = d("expander-list-header", r.headerClassName), t = d("expander-icon", "rioglyph", "rioglyph-chevron-down");
+  return /* @__PURE__ */ h("div", { className: n, onClick: () => s(r), "aria-label": "expander item header", children: [
+    /* @__PURE__ */ o("span", { className: "expander-list-header-content", children: r.header }),
+    r.body && /* @__PURE__ */ o("span", { className: t })
+  ] });
+}, O = ({ className: r, children: s }) => {
+  const n = d("expander-list-body", r);
+  return /* @__PURE__ */ o("div", { className: n, "aria-label": "expander item body", children: s });
 };
-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);
-    }
-    const handleToggleItem = (itemToExpand) => {
-        if (!itemToExpand.body) {
-            return;
-        }
-        // Toggle the open state for the selected item based on the provided or generated id
-        const updatedListItems = [...listItems].map(item => {
-            if (item.id === itemToExpand.id) {
-                item.onOpen && !item.open && item.onOpen();
-                item.onClose && item.open && item.onClose();
-                item.open = !item.open;
-            }
-            return item;
-        });
-        setListItems(updatedListItems);
-    };
-    const listClassNames = classNames('expander-list list-group', rounded && !hasRoundedClass(className) && 'rounded', bordered && !hasBorderClass(className) && 'border', className);
-    return (_jsx("ul", { 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", { className: itemClassNames, children: [_jsx(ExpanderListItemHeader, { item: item, onToggle: handleToggleItem }), item.body && (_jsx(Collapse, { open: isOpen, unmountOnExit: unmountOnExit, children: _jsx("div", { className: 'expander-list-body-wrapper', children: _jsx(ExpanderListItemBody, { className: item.bodyClassName, children: item.body }) }) }))] }, item.id));
-        }) }));
+export {
+  q as default
 };
-const ExpanderListItemHeader = ({ item, onToggle }) => {
-    const headerClassNames = classNames('expander-list-header', item.headerClassName);
-    const iconClassNames = classNames('expander-icon', 'rioglyph', 'rioglyph-chevron-down');
-    return (_jsxs("div", { className: headerClassNames, onClick: () => onToggle(item), "aria-label": 'expander item header', children: [_jsx("span", { className: 'expander-list-header-content', children: item.header }), item.body && _jsx("span", { className: iconClassNames })] }));
-};
-const ExpanderListItemBody = ({ className, children }) => {
-    const bodyClassNames = classNames('expander-list-body', className);
-    return (_jsx("div", { className: bodyClassNames, "aria-label": 'expander item body', children: children }));
-};
-export default ExpanderList;
+//# sourceMappingURL=ExpanderList.js.map

package/components/expander/ExpanderList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpanderList.js","sources":["../../../src/components/expander/ExpanderList.tsx"],"sourcesContent":["import type React from 'react';\nimport { type PropsWithChildren, useState } from 'react';\nimport { isEqual } from 'es-toolkit/predicate';\n\nimport classNames from 'classnames';\n\nimport Collapse from '../collapse/Collapse';\nimport { hasBorderClass, hasRoundedClass } from '../../utils/hasUtilityClass';\n\nexport type ExpanderListItem = {\n    /**\n     * The \"id\" property is used to know which item is expanded. It will also be used to control\n     * the component from the outside. It can be a number or a string. If there is no \"id\" provided,\n     * a unique id is internally generated  which will be used internally for the uncontrolled case.'\n     */\n    id?: string | number;\n\n    /**\n     * The header content.\n     */\n    header: string | React.ReactNode;\n\n    /**\n     * The body content. If there is no \"body\" provided, the list item is not expandable.\n     */\n    body?: string | React.ReactNode;\n\n    /**\n     * Defines if the item will be expanded or closed by default.\n     */\n    open?: boolean;\n\n    /**\n     * Callback fired when item toggles to open after a click.\n     */\n    onOpen?: VoidFunction;\n\n    /**\n     * Callback fired when item toggles to close after a click.\n     */\n    onClose?: VoidFunction;\n\n    /**\n     * Additional classes to be set on \"expander-list-header\" node.\n     */\n    headerClassName?: string;\n\n    /**\n     * Additional classes to be set on \"expander-list-body\" node.\n     */\n    bodyClassName?: string;\n\n    /**\n     * Additional classes to be set on list item node.\n     */\n    className?: string;\n};\n\nexport type ExpanderListProps = {\n    /**\n     * List of items to be rendered. The expanded state can be defined via the items `open` prop.\n     */\n    items: ExpanderListItem[];\n\n    /**\n     * Defines whether the \"expander-list-body\" is rounded or not.\n     * @default true\n     */\n    rounded?: boolean;\n\n    /**\n     * Defines whether the \"expander-list-body\" has a border or not.\n     * @default true\n     */\n    bordered?: boolean;\n\n    /**\n     * It unmounts the body component (remove it from the DOM) when it is collapsed.\n     * Set it to false to avoid the unmount.\n     * @default true\n     */\n    unmountOnExit?: boolean;\n\n    /**\n     * Additional classes to be set on the unordered list itself.\n     */\n    className?: string;\n};\n\nconst getRandomString = () => (Math.random() + 1).toString(36).toUpperCase().substring(2);\n\n// Generate a unique id (if not present) instead of using the index for the key as it will create\n// side effects when removing items from the list and re-render the ExpanderList.\nconst parseItems = (items: ExpanderListItem[]) => {\n    return items.map(item => {\n        if (!item.id) {\n            item.id = getRandomString();\n        }\n        return item;\n    });\n};\n\nconst ExpanderList = (props: ExpanderListProps) => {\n    const { items = [], unmountOnExit = true, rounded = true, bordered = true, className = '' } = props;\n\n    const [listItems, setListItems] = useState(parseItems(items));\n\n    // Update internal state from external prop change\n    const [previousItems, setPreviousItems] = useState(items);\n    if (!isEqual(previousItems, items)) {\n        setListItems(parseItems(items));\n        setPreviousItems(items);\n    }\n\n    const handleToggleItem = (itemToExpand: ExpanderListItem) => {\n        if (!itemToExpand.body) {\n            return;\n        }\n\n        // Toggle the open state for the selected item based on the provided or generated id\n        const updatedListItems = [...listItems].map(item => {\n            if (item.id === itemToExpand.id) {\n                item.onOpen && !item.open && item.onOpen();\n                item.onClose && item.open && item.onClose();\n                item.open = !item.open;\n            }\n            return item;\n        });\n\n        setListItems(updatedListItems);\n    };\n\n    const listClassNames = classNames(\n        'expander-list list-group',\n        rounded && !hasRoundedClass(className) && 'rounded',\n        bordered && !hasBorderClass(className) && 'border',\n        className\n    );\n\n    return (\n        <ul className={listClassNames}>\n            {listItems.map(item => {\n                const isOpen = item.open;\n\n                const itemClassNames = classNames(\n                    'list-group-item',\n                    item.className && item.className,\n                    item.body && 'expandable',\n                    isOpen && 'open'\n                );\n\n                return (\n                    <li className={itemClassNames} key={item.id}>\n                        <ExpanderListItemHeader item={item} onToggle={handleToggleItem} />\n                        {item.body && (\n                            <Collapse open={isOpen} unmountOnExit={unmountOnExit}>\n                                <div className='expander-list-body-wrapper'>\n                                    <ExpanderListItemBody className={item.bodyClassName}>\n                                        {item.body}\n                                    </ExpanderListItemBody>\n                                </div>\n                            </Collapse>\n                        )}\n                    </li>\n                );\n            })}\n        </ul>\n    );\n};\n\ntype ExpanderListItemHeaderProps = {\n    item: ExpanderListItem;\n    onToggle: (item: ExpanderListItem) => void;\n};\n\nconst ExpanderListItemHeader = ({ item, onToggle }: ExpanderListItemHeaderProps) => {\n    const headerClassNames = classNames('expander-list-header', item.headerClassName);\n    const iconClassNames = classNames('expander-icon', 'rioglyph', 'rioglyph-chevron-down');\n\n    return (\n        <div className={headerClassNames} onClick={() => onToggle(item)} aria-label='expander item header'>\n            <span className='expander-list-header-content'>{item.header}</span>\n            {item.body && <span className={iconClassNames} />}\n        </div>\n    );\n};\n\ntype ExpanderListItemBodyProps = {\n    className?: string;\n};\n\nconst ExpanderListItemBody = ({ className, children }: PropsWithChildren<ExpanderListItemBodyProps>) => {\n    const bodyClassNames = classNames('expander-list-body', className);\n    return (\n        <div className={bodyClassNames} aria-label='expander item body'>\n            {children}\n        </div>\n    );\n};\n\nexport default ExpanderList;\n"],"names":["getRandomString","parseItems","items","item","ExpanderList","props","unmountOnExit","rounded","bordered","className","listItems","setListItems","useState","previousItems","setPreviousItems","isEqual","handleToggleItem","itemToExpand","updatedListItems","listClassNames","classNames","hasRoundedClass","hasBorderClass","isOpen","itemClassNames","jsxs","jsx","ExpanderListItemHeader","Collapse","ExpanderListItemBody","onToggle","headerClassNames","iconClassNames","children","bodyClassNames"],"mappings":";;;;;;AAyFA,MAAMA,IAAkB,OAAO,KAAK,OAAA,IAAW,GAAG,SAAS,EAAE,EAAE,cAAc,UAAU,CAAC,GAIlFC,IAAa,CAACC,MACTA,EAAM,IAAI,CAAAC,OACRA,EAAK,OACNA,EAAK,KAAKH,EAAA,IAEPG,EACV,GAGCC,IAAe,CAACC,MAA6B;AAC/C,QAAM,EAAE,OAAAH,IAAQ,IAAI,eAAAI,IAAgB,IAAM,SAAAC,IAAU,IAAM,UAAAC,IAAW,IAAM,WAAAC,IAAY,GAAA,IAAOJ,GAExF,CAACK,GAAWC,CAAY,IAAIC,EAASX,EAAWC,CAAK,CAAC,GAGtD,CAACW,GAAeC,CAAgB,IAAIF,EAASV,CAAK;AACxD,EAAKa,EAAQF,GAAeX,CAAK,MAC7BS,EAAaV,EAAWC,CAAK,CAAC,GAC9BY,EAAiBZ,CAAK;AAG1B,QAAMc,IAAmB,CAACC,MAAmC;AACzD,QAAI,CAACA,EAAa;AACd;AAIJ,UAAMC,IAAmB,CAAC,GAAGR,CAAS,EAAE,IAAI,CAAAP,OACpCA,EAAK,OAAOc,EAAa,OACzBd,EAAK,UAAU,CAACA,EAAK,QAAQA,EAAK,OAAA,GAClCA,EAAK,WAAWA,EAAK,QAAQA,EAAK,QAAA,GAClCA,EAAK,OAAO,CAACA,EAAK,OAEfA,EACV;AAED,IAAAQ,EAAaO,CAAgB;AAAA,EACjC,GAEMC,IAAiBC;AAAA,IACnB;AAAA,IACAb,KAAW,CAACc,EAAgBZ,CAAS,KAAK;AAAA,IAC1CD,KAAY,CAACc,EAAeb,CAAS,KAAK;AAAA,IAC1CA;AAAA,EAAA;AAGJ,2BACK,MAAA,EAAG,WAAWU,GACV,UAAAT,EAAU,IAAI,CAAAP,MAAQ;AACnB,UAAMoB,IAASpB,EAAK,MAEdqB,IAAiBJ;AAAA,MACnB;AAAA,MACAjB,EAAK,aAAaA,EAAK;AAAA,MACvBA,EAAK,QAAQ;AAAA,MACboB,KAAU;AAAA,IAAA;AAGd,WACI,gBAAAE,EAAC,MAAA,EAAG,WAAWD,GACX,UAAA;AAAA,MAAA,gBAAAE,EAACC,GAAA,EAAuB,MAAAxB,GAAY,UAAUa,EAAA,CAAkB;AAAA,MAC/Db,EAAK,QACF,gBAAAuB,EAACE,KAAS,MAAML,GAAQ,eAAAjB,GACpB,UAAA,gBAAAoB,EAAC,OAAA,EAAI,WAAU,8BACX,UAAA,gBAAAA,EAACG,KAAqB,WAAW1B,EAAK,eACjC,UAAAA,EAAK,KAAA,CACV,GACJ,EAAA,CACJ;AAAA,IAAA,EAAA,GAT4BA,EAAK,EAWzC;AAAA,EAER,CAAC,EAAA,CACL;AAER,GAOMwB,IAAyB,CAAC,EAAE,MAAAxB,GAAM,UAAA2B,QAA4C;AAChF,QAAMC,IAAmBX,EAAW,wBAAwBjB,EAAK,eAAe,GAC1E6B,IAAiBZ,EAAW,iBAAiB,YAAY,uBAAuB;AAEtF,SACI,gBAAAK,EAAC,OAAA,EAAI,WAAWM,GAAkB,SAAS,MAAMD,EAAS3B,CAAI,GAAG,cAAW,wBACxE,UAAA;AAAA,IAAA,gBAAAuB,EAAC,QAAA,EAAK,WAAU,gCAAgC,UAAAvB,EAAK,QAAO;AAAA,IAC3DA,EAAK,QAAQ,gBAAAuB,EAAC,QAAA,EAAK,WAAWM,EAAA,CAAgB;AAAA,EAAA,GACnD;AAER,GAMMH,IAAuB,CAAC,EAAE,WAAApB,GAAW,UAAAwB,QAA6D;AACpG,QAAMC,IAAiBd,EAAW,sBAAsBX,CAAS;AACjE,2BACK,OAAA,EAAI,WAAWyB,GAAgB,cAAW,sBACtC,UAAAD,GACL;AAER;"}

package/components/expander/ExpanderPanel.d.ts

@@ -1,4 +1,4 @@
-import React, { type PropsWithChildren } from 'react';
+import { default as React, PropsWithChildren } from 'react';
 type ChildrenType = React.ReactNode | ((isOpen: boolean) => string | React.ReactNode | JSX.Element);
 export type ExpanderPanelProps = {
     /**

package/components/expander/ExpanderPanel.js

@@ -1,28 +1,57 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import classNames from 'classnames';
-import { noop } from 'es-toolkit/function';
-import Collapse from "../collapse/Collapse.js";
-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, ...remainingProps } = props;
-    const [isOpen, setIsOpen] = useState(open);
-    // Update internal state from external prop change
-    const [previousOpen, setPreviousOpen] = useState(open);
-    if (previousOpen !== open) {
-        setIsOpen(open);
-        setPreviousOpen(open);
-    }
-    const handleToggle = () => {
-        const newState = !isOpen;
-        setIsOpen(newState);
-        onToggle(newState);
-    };
-    const wrapperClassNames = classNames('expander-panel panel', `panel-${bsStyle}`, className);
-    const iconClassNames = classNames('expander-icon', iconClassName, 'rioglyph', 'rioglyph-chevron-down');
-    const headerClassNames = classNames('panel-heading', isOpen && 'open', iconLeft && 'icon-left', headerClassName && headerClassName);
-    const titleClassNames = classNames('title', titleClassName && titleClassName);
-    const bodyClassNames = classNames('panel-body', bodyClassName && bodyClassName);
-    const isRenderCallback = children && typeof children === 'function';
-    return (_jsxs("div", { ...remainingProps, className: wrapperClassNames, "aria-label": 'expander panel', children: [_jsxs("div", { className: headerClassNames, onClick: handleToggle, "aria-label": 'panel heading', children: [_jsx("span", { className: titleClassNames, children: title }), _jsx("span", { className: iconClassNames }), bsStyle === 'separator' && (_jsx("div", { className: 'separator', children: _jsx("hr", {}) }))] }), _jsx(Collapse, { open: isOpen, unmountOnExit: unmountOnExit, onEntered: onEntered, onExited: onExited, onAnimationStart: () => onAnimationStart(), children: _jsx("div", { children: _jsx("div", { className: bodyClassNames, children: isRenderCallback ? children(isOpen) : children }) }) })] }));
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { useState as h } from "react";
+import n from "classnames";
+import { noop as o } from "es-toolkit/function";
+import I from "../collapse/Collapse.js";
+const F = (N) => {
+  const {
+    open: a = !1,
+    iconLeft: f = !1,
+    bsStyle: t = "blank",
+    title: C,
+    headerClassName: i,
+    titleClassName: r,
+    bodyClassName: c,
+    iconClassName: b,
+    unmountOnExit: g = !0,
+    onEntered: u = o,
+    onExited: x = o,
+    onAnimationStart: v = o,
+    onToggle: y = o,
+    className: O,
+    children: s,
+    ...S
+  } = N, [l, p] = h(a), [k, E] = h(a);
+  k !== a && (p(a), E(a));
+  const w = () => {
+    const d = !l;
+    p(d), y(d);
+  }, P = n("expander-panel panel", `panel-${t}`, O), j = n("expander-icon", b, "rioglyph", "rioglyph-chevron-down"), A = n(
+    "panel-heading",
+    l && "open",
+    f && "icon-left",
+    i && i
+  ), R = n("title", r && r), T = n("panel-body", c && c);
+  return /* @__PURE__ */ m("div", { ...S, className: P, "aria-label": "expander panel", children: [
+    /* @__PURE__ */ m("div", { className: A, onClick: w, "aria-label": "panel heading", children: [
+      /* @__PURE__ */ e("span", { className: R, children: C }),
+      /* @__PURE__ */ e("span", { className: j }),
+      t === "separator" && /* @__PURE__ */ e("div", { className: "separator", children: /* @__PURE__ */ e("hr", {}) })
+    ] }),
+    /* @__PURE__ */ e(
+      I,
+      {
+        open: l,
+        unmountOnExit: g,
+        onEntered: u,
+        onExited: x,
+        onAnimationStart: () => v(),
+        children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("div", { className: T, children: s && typeof s == "function" ? s(l) : s }) })
+      }
+    )
+  ] });
 };
-export default ExpanderPanel;
+export {
+  F as default
+};
+//# sourceMappingURL=ExpanderPanel.js.map

package/components/expander/ExpanderPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpanderPanel.js","sources":["../../../src/components/expander/ExpanderPanel.tsx"],"sourcesContent":["import React, { useState, type PropsWithChildren } from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\n\nimport Collapse from '../collapse/Collapse';\n\ntype ChildrenType = React.ReactNode | ((isOpen: boolean) => string | React.ReactNode | JSX.Element);\n\nexport type ExpanderPanelProps = {\n    /**\n     * The title to be shown in the expander header.\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * Component visual or contextual style variants.\n     */\n    bsStyle?: 'blank' | 'default' | 'separator' | 'primary' | 'secondary' | 'info' | 'warning' | 'danger' | 'success';\n\n    /**\n     * Defines if the icon will be align left, otherwise it is aligned right.\n     * @default false\n     */\n    iconLeft?: boolean;\n\n    /**\n     * Defines if the panel will be opened or closed by default.\n     * The open/closed state will be handled internally.\n     * @default false\n     */\n    open?: boolean;\n\n    /**\n     * It unmounts the body component (remove it from the DOM) when it is collapsed.\n     * Set it to false to avoid the unmount.\n     * @default true\n     */\n    unmountOnExit?: boolean;\n\n    /**\n     * Callback function for when the header is clicked and the expander toggles.\n     * @param isOpen\n     * @returns\n     */\n    onToggle?: (isOpen: boolean) => void;\n\n    /**\n     * Callback fired after the component has expanded.\n     */\n    onEntered?: VoidFunction;\n\n    /**\n     * Callback fired after the component has collapsed.\n     */\n    onExited?: VoidFunction;\n\n    /**\n     * Callback fired when the animation starts for either expand or collapse.\n     */\n    onAnimationStart?: VoidFunction;\n\n    /**\n     * Additional classes to be set on the panel header.\n     */\n    headerClassName?: string;\n\n    /**\n     * Additional classes to be set on the header title.\n     */\n    titleClassName?: string;\n\n    /**\n     * Additional classes to be set on the panel body.\n     */\n    bodyClassName?: string;\n\n    /**\n     * Additional classes added to the chevron icon\n     */\n    iconClassName?: string;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * Any element to be rendered inside the panel body.\n     * Providing a function enables the render prop approach. The function gets the\n     * `isOpen` state passed and is responsible for rendering the custom content.\n     */\n    children?: ChildrenType;\n};\n\nconst ExpanderPanel = (props: PropsWithChildren<ExpanderPanelProps>) => {\n    const {\n        open = false,\n        iconLeft = false,\n        bsStyle = 'blank',\n        title,\n        headerClassName,\n        titleClassName,\n        bodyClassName,\n        iconClassName,\n        unmountOnExit = true,\n        onEntered = noop,\n        onExited = noop,\n        onAnimationStart = noop,\n        onToggle = noop,\n        className,\n        children,\n        ...remainingProps\n    } = props;\n\n    const [isOpen, setIsOpen] = useState(open);\n\n    // Update internal state from external prop change\n    const [previousOpen, setPreviousOpen] = useState(open);\n    if (previousOpen !== open) {\n        setIsOpen(open);\n        setPreviousOpen(open);\n    }\n\n    const handleToggle = () => {\n        const newState = !isOpen;\n        setIsOpen(newState);\n        onToggle(newState);\n    };\n\n    const wrapperClassNames = classNames('expander-panel panel', `panel-${bsStyle}`, className);\n\n    const iconClassNames = classNames('expander-icon', iconClassName, 'rioglyph', 'rioglyph-chevron-down');\n\n    const headerClassNames = classNames(\n        'panel-heading',\n        isOpen && 'open',\n        iconLeft && 'icon-left',\n        headerClassName && headerClassName\n    );\n\n    const titleClassNames = classNames('title', titleClassName && titleClassName);\n\n    const bodyClassNames = classNames('panel-body', bodyClassName && bodyClassName);\n\n    const isRenderCallback = children && typeof children === 'function';\n\n    return (\n        <div {...remainingProps} className={wrapperClassNames} aria-label='expander panel'>\n            <div className={headerClassNames} onClick={handleToggle} aria-label='panel heading'>\n                <span className={titleClassNames}>{title}</span>\n                <span className={iconClassNames} />\n                {bsStyle === 'separator' && (\n                    <div className='separator'>\n                        <hr />\n                    </div>\n                )}\n            </div>\n            <Collapse\n                open={isOpen}\n                unmountOnExit={unmountOnExit}\n                onEntered={onEntered}\n                onExited={onExited}\n                onAnimationStart={() => onAnimationStart()}\n            >\n                <div>\n                    <div className={bodyClassNames}>{isRenderCallback ? children(isOpen) : children}</div>\n                </div>\n            </Collapse>\n        </div>\n    );\n};\n\nexport default ExpanderPanel;\n"],"names":["ExpanderPanel","props","open","iconLeft","bsStyle","title","headerClassName","titleClassName","bodyClassName","iconClassName","unmountOnExit","onEntered","noop","onExited","onAnimationStart","onToggle","className","children","remainingProps","isOpen","setIsOpen","useState","previousOpen","setPreviousOpen","handleToggle","newState","wrapperClassNames","classNames","iconClassNames","headerClassNames","titleClassNames","bodyClassNames","jsxs","jsx","Collapse"],"mappings":";;;;;AA8FA,MAAMA,IAAgB,CAACC,MAAiD;AACpE,QAAM;AAAA,IACF,MAAAC,IAAO;AAAA,IACP,UAAAC,IAAW;AAAA,IACX,SAAAC,IAAU;AAAA,IACV,OAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,eAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,WAAAC,IAAYC;AAAA,IACZ,UAAAC,IAAWD;AAAA,IACX,kBAAAE,IAAmBF;AAAA,IACnB,UAAAG,IAAWH;AAAA,IACX,WAAAI;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHjB,GAEE,CAACkB,GAAQC,CAAS,IAAIC,EAASnB,CAAI,GAGnC,CAACoB,GAAcC,CAAe,IAAIF,EAASnB,CAAI;AACrD,EAAIoB,MAAiBpB,MACjBkB,EAAUlB,CAAI,GACdqB,EAAgBrB,CAAI;AAGxB,QAAMsB,IAAe,MAAM;AACvB,UAAMC,IAAW,CAACN;AAClB,IAAAC,EAAUK,CAAQ,GAClBV,EAASU,CAAQ;AAAA,EACrB,GAEMC,IAAoBC,EAAW,wBAAwB,SAASvB,CAAO,IAAIY,CAAS,GAEpFY,IAAiBD,EAAW,iBAAiBlB,GAAe,YAAY,uBAAuB,GAE/FoB,IAAmBF;AAAA,IACrB;AAAA,IACAR,KAAU;AAAA,IACVhB,KAAY;AAAA,IACZG,KAAmBA;AAAA,EAAA,GAGjBwB,IAAkBH,EAAW,SAASpB,KAAkBA,CAAc,GAEtEwB,IAAiBJ,EAAW,cAAcnB,KAAiBA,CAAa;AAI9E,2BACK,OAAA,EAAK,GAAGU,GAAgB,WAAWQ,GAAmB,cAAW,kBAC9D,UAAA;AAAA,IAAA,gBAAAM,EAAC,SAAI,WAAWH,GAAkB,SAASL,GAAc,cAAW,iBAChE,UAAA;AAAA,MAAA,gBAAAS,EAAC,QAAA,EAAK,WAAWH,GAAkB,UAAAzB,GAAM;AAAA,MACzC,gBAAA4B,EAAC,QAAA,EAAK,WAAWL,EAAA,CAAgB;AAAA,MAChCxB,MAAY,eACT,gBAAA6B,EAAC,OAAA,EAAI,WAAU,aACX,UAAA,gBAAAA,EAAC,QAAG,EAAA,CACR;AAAA,IAAA,GAER;AAAA,IACA,gBAAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,MAAMf;AAAA,QACN,eAAAT;AAAA,QACA,WAAAC;AAAA,QACA,UAAAE;AAAA,QACA,kBAAkB,MAAMC,EAAA;AAAA,QAExB,UAAA,gBAAAmB,EAAC,OAAA,EACG,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAWF,GAAiB,UArBxBd,KAAY,OAAOA,KAAa,aAqBWA,EAASE,CAAM,IAAIF,EAAA,CAAS,EAAA,CACpF;AAAA,MAAA;AAAA,IAAA;AAAA,EACJ,GACJ;AAER;"}

package/components/fade/Fade.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 export type FadeAnimationStyle = 'fade' | 'tabs' | 'page' | 'pageBack' | 'fromLeft' | 'fromRight' | 'fromTop' | 'fromBottom';
 export type FadeProps = {
     /**

package/components/fade/Fade.js

@@ -1,91 +1,106 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import { AnimatePresence, motion } from 'motion/react';
-import { noop } from 'es-toolkit/compat';
-import useAfterMount from "../../useAfterMount.js";
-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, children, } = props;
-    const [allowInitialAnimation, setAllowInitialAnimation] = useState(initial);
-    useAfterMount(() => {
-        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 (Array.isArray(children)) {
-        const [currentChild] = children.filter(Boolean);
-        motionDivKey = `fade-${currentChild.key}`;
+import { jsx as y } from "react/jsx-runtime";
+import { useState as F } from "react";
+import { AnimatePresence as O, motion as R } from "motion/react";
+import { noop as h } from "es-toolkit/compat";
+import C from "../../hooks/useAfterMount.js";
+const M = {
+  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"
+  }
+}, k = (i) => i === "pageBack" ? -1 : 1, I = {
+  pageEnter: (i) => ({ x: `${i * 60}%`, opacity: 0 }),
+  pageCenter: { x: 0, opacity: 1 },
+  pageExit: (i) => ({ zIndex: 0, x: `${-i * 60}%`, opacity: 0 })
+}, t = (i) => {
+  const {
+    show: s = !0,
+    initial: m = !1,
+    duration: l = 0.2,
+    exitBeforeEnter: x = !1,
+    animationStyle: a = "fade",
+    animatePresenceProps: f,
+    motionProps: g,
+    onExitComplete: d = h,
+    children: e
+  } = i, [o, A] = F(m);
+  C(() => {
+    o || A(!0);
+  });
+  let n = "fade";
+  if (Array.isArray(e)) {
+    const [T] = e.filter(Boolean);
+    n = `fade-${T.key}`;
+  }
+  const r = a === "page" || a === "pageBack", P = k(a), p = r ? P : null, u = r ? { variants: I } : null, c = M[a], E = o ? c.initial : !1, B = { ...c, initial: E };
+  return /* @__PURE__ */ y(
+    O,
+    {
+      initial: o,
+      mode: x ? "wait" : "sync",
+      onExitComplete: d,
+      custom: p,
+      ...f,
+      children: s && /* @__PURE__ */ y(
+        R.div,
+        {
+          transition: { duration: l },
+          custom: p,
+          ...B,
+          ...u,
+          ...g,
+          children: e
+        },
+        n
+      )
     }
-    // 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 (_jsx(AnimatePresence, { initial: allowInitialAnimation, mode: exitBeforeEnter ? 'wait' : 'sync', onExitComplete: onExitComplete, custom: custom, ...animatePresenceProps, children: show && (_jsx(motion.div, { transition: { duration }, custom: custom, ...animationProps, ...pageTransitionProps, ...motionProps, children: children }, motionDivKey)) }));
+  );
+};
+t.FADE = "fade";
+t.FROM_LEFT = "fromLeft";
+t.FROM_RIGHT = "fromRight";
+t.FROM_TOP = "fromTop";
+t.FROM_BOTTOM = "fromBottom";
+t.TABS = "tabs";
+t.PAGE = "page";
+t.PAGE_BACK = "pageBack";
+export {
+  t as default
 };
-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';
-export default Fade;
+//# sourceMappingURL=Fade.js.map

package/components/fade/Fade.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fade.js","sources":["../../../src/components/fade/Fade.tsx"],"sourcesContent":["import { type PropsWithChildren, useState } from 'react';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { noop } from 'es-toolkit/compat';\n\nimport useAfterMount from '../../useAfterMount';\n\ntype AnimationValue = { x: number; y: number; opacity: number };\n\ntype AnimationProp = {\n    initial: 'pageEnter' | AnimationValue | false;\n    animate: 'pageCenter' | AnimationValue;\n    exit: 'pageExit' | AnimationValue;\n};\n\nexport type FadeAnimationStyle =\n    | 'fade'\n    | 'tabs'\n    | 'page'\n    | 'pageBack'\n    | 'fromLeft'\n    | 'fromRight'\n    | 'fromTop'\n    | 'fromBottom';\n\nconst animationPropsForStyle: Record<FadeAnimationStyle, AnimationProp> = {\n    fromLeft: {\n        initial: { x: -10, y: 0, opacity: 0 },\n        animate: { x: 0, y: 0, opacity: 1 },\n        exit: { x: -10, y: 0, opacity: 0 },\n    },\n    fromRight: {\n        initial: { x: 10, y: 0, opacity: 0 },\n        animate: { x: 0, y: 0, opacity: 1 },\n        exit: { x: 10, y: 0, opacity: 0 },\n    },\n    fromTop: {\n        initial: { y: -10, x: 0, opacity: 0 },\n        animate: { y: 0, x: 0, opacity: 1 },\n        exit: { y: -10, x: 0, opacity: 0 },\n    },\n    fromBottom: {\n        initial: { y: 10, x: 0, opacity: 0 },\n        animate: { y: 0, x: 0, opacity: 1 },\n        exit: { y: 10, x: 0, opacity: 0 },\n    },\n    fade: {\n        initial: { x: 0, y: 0, opacity: 0 },\n        animate: { x: 0, y: 0, opacity: 1 },\n        exit: { x: 0, y: 0, opacity: 0 },\n    },\n    tabs: {\n        initial: { x: 2, y: 0, opacity: 0 },\n        animate: { x: 0, y: 0, opacity: 1 },\n        exit: { x: -2, y: 0, opacity: 0 },\n    },\n    page: {\n        initial: 'pageEnter',\n        animate: 'pageCenter',\n        exit: 'pageExit',\n    },\n    pageBack: {\n        initial: 'pageEnter',\n        animate: 'pageCenter',\n        exit: 'pageExit',\n    },\n} as const;\n\ntype PageDirection = -1 | 1;\n\nconst getPageDirection = (animationStyle: FadeAnimationStyle): PageDirection =>\n    animationStyle === 'pageBack' ? -1 : 1;\n\nconst pageTransitionVariants = {\n    pageEnter: (pageDirection: PageDirection) => ({ x: `${pageDirection * 60}%`, opacity: 0 }),\n    pageCenter: { x: 0, opacity: 1 },\n    pageExit: (pageDirection: PageDirection) => ({ zIndex: 0, x: `${-pageDirection * 60}%`, opacity: 0 }),\n};\n\nexport type FadeProps = {\n    /**\n     * Defines whether to show the content.\n     *\n     * @default true\n     */\n    show?: boolean;\n\n    /**\n     * Duration of the fade animation in seconds.\n     *\n     * @default 0.2\n     */\n    duration?: number;\n\n    /**\n     * Defines whether the animation is triggered initially when showing the content.\n     *\n     * @default false\n     */\n    initial?: boolean;\n\n    /**\n     * Defines the desired animation style.\n     *\n     * Possible values are:\n     * - `fade`\n     * - `tabs`\n     * - `page`\n     * - `pageBack`\n     * - `fromLeft`\n     * - `fromRight`\n     * - `fromTop`\n     * - `fromBottom`\n     *\n     * @default 'fade'\n     */\n    animationStyle?: FadeAnimationStyle;\n\n    /**\n     * If set to true, only one component will be rendered at a time.\n     *\n     * The exiting component will finish its exit animation before the entering component is rendered.\n     *\n     * @default false\n     */\n    exitBeforeEnter?: boolean;\n\n    /**\n     * Fires when all exiting nodes have completed animating out.\n     *\n     * @default noop\n     */\n    onExitComplete?: VoidFunction;\n\n    /**\n     * Additional custom props for the underlying Framer motion AnimatePresence component.\n     *\n     * Use this for additional customizations.\n     */\n    animatePresenceProps?: object;\n\n    /**\n     * Additional custom props for the underlying Framer motion &lt;motion.div&gt; component.\n     *\n     * Use this for additional customizations.\n     */\n    motionProps?: object;\n};\n\nconst Fade = (props: PropsWithChildren<FadeProps>) => {\n    const {\n        show = true,\n        initial = false,\n        duration = 0.2,\n        exitBeforeEnter = false,\n        animationStyle = 'fade',\n        animatePresenceProps,\n        motionProps,\n        onExitComplete = noop,\n        children,\n    } = props;\n\n    const [allowInitialAnimation, setAllowInitialAnimation] = useState(initial);\n\n    useAfterMount(() => {\n        if (!allowInitialAnimation) {\n            setAllowInitialAnimation(true);\n        }\n    });\n\n    let motionDivKey = 'fade';\n\n    // If there are multiple children that are conditionally rendered like\n    // in case of a tabbed content - get the current visible child key\n    // to update the motion.div key to animate different children\n    if (Array.isArray(children)) {\n        const [currentChild] = children.filter(Boolean);\n        motionDivKey = `fade-${currentChild.key}`;\n    }\n\n    // In case the animation is a page transition, use custom variants and add a custom pageDirection variable\n    // to animate in the right direction\n    const isPageTransition = animationStyle === 'page' || animationStyle === 'pageBack';\n    const pageDirection = getPageDirection(animationStyle);\n    const custom = isPageTransition ? pageDirection : null;\n    const pageTransitionProps = isPageTransition ? { variants: pageTransitionVariants } : null;\n\n    const selectedAnimationProps = animationPropsForStyle[animationStyle];\n\n    // Disable initial animation on mount. After mount the initial animation step is needed to enable\n    // the \"fade-in\" animation, otherwise it just appears\n    const selectedInitial = allowInitialAnimation ? selectedAnimationProps.initial : false;\n    const animationProps = { ...selectedAnimationProps, initial: selectedInitial };\n\n    return (\n        <AnimatePresence\n            initial={allowInitialAnimation}\n            mode={exitBeforeEnter ? 'wait' : 'sync'}\n            onExitComplete={onExitComplete}\n            custom={custom}\n            {...animatePresenceProps}\n        >\n            {show && (\n                <motion.div\n                    key={motionDivKey}\n                    transition={{ duration }}\n                    custom={custom}\n                    {...animationProps}\n                    {...pageTransitionProps}\n                    {...motionProps}\n                >\n                    {children}\n                </motion.div>\n            )}\n        </AnimatePresence>\n    );\n};\n\nFade.FADE = 'fade' as const;\nFade.FROM_LEFT = 'fromLeft' as const;\nFade.FROM_RIGHT = 'fromRight' as const;\nFade.FROM_TOP = 'fromTop' as const;\nFade.FROM_BOTTOM = 'fromBottom' as const;\nFade.TABS = 'tabs' as const;\nFade.PAGE = 'page' as const;\nFade.PAGE_BACK = 'pageBack' as const;\n\nexport default Fade;\n"],"names":["animationPropsForStyle","getPageDirection","animationStyle","pageTransitionVariants","pageDirection","Fade","props","show","initial","duration","exitBeforeEnter","animatePresenceProps","motionProps","onExitComplete","noop","children","allowInitialAnimation","setAllowInitialAnimation","useState","useAfterMount","motionDivKey","currentChild","isPageTransition","custom","pageTransitionProps","selectedAnimationProps","selectedInitial","animationProps","jsx","AnimatePresence","motion"],"mappings":"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"}

package/components/fade/FadeExpander.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 type FadeExpanderProps = {
     /**
      * Defines if the content is shown or not.

package/components/fade/FadeExpander.js

@@ -1,41 +1,38 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useEffect, useRef } from 'react';
-import { motion, AnimatePresence } from 'motion/react';
-const THRESHOLD_TIMEOUT_MS = 200;
-const FadeExpander = (props) => {
-    const { children, show = false, duration = 0.2, delay = 0, className = '' } = props;
-    const [isVisible, setIsVisible] = useState(show);
-    const [overflow, setOverflow] = useState('hidden'); // Start with hidden overflow
-    const durationRef = useRef(duration);
-    // Effect to manage visibility based on show prop
-    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 (
+import { jsx as s } from "react/jsx-runtime";
+import { useState as a, useRef as p, useEffect as u } from "react";
+import { AnimatePresence as y, motion as x } from "motion/react";
+const E = 200, b = (r) => {
+  const { children: l, show: e = !1, duration: t = 0.2, delay: o = 0, className: c = "" } = r, [m, n] = a(e), [d, i] = a("hidden"), h = p(t);
+  u(() => {
+    e ? n(!0) : (i("hidden"), setTimeout(() => {
+      n(!1);
+    }, 0));
+  }, [e]);
+  const f = () => {
+    e && setTimeout(() => i("visible"), h.current * 1e3 + E);
+  };
+  return (
     // @ts-ignore
-    _jsx(AnimatePresence, { onExitComplete: () => setOverflow('hidden'), children: isVisible && (_jsx(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 })) }));
+    /* @__PURE__ */ s(y, { onExitComplete: () => i("hidden"), children: m && /* @__PURE__ */ s(
+      x.div,
+      {
+        initial: { height: 0, opacity: 0 },
+        animate: { height: "auto", opacity: 1 },
+        exit: { height: 0, opacity: 0 },
+        transition: {
+          height: { duration: t, delay: o },
+          opacity: { duration: t, delay: o },
+          ease: "easeIn"
+        },
+        style: { overflow: d },
+        onAnimationComplete: f,
+        className: c,
+        children: l
+      }
+    ) })
+  );
 };
-export default FadeExpander;
+export {
+  b as default
+};
+//# sourceMappingURL=FadeExpander.js.map