@rio-cloud/rio-uikit 2.5.1 → 3.0.0-beta.1

package/components/editableContent/EditableContent.js.map

@@ -1 +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 { usePopper } from 'react-popper';\nimport { createPortal } from 'react-dom';\nimport type { Options, Rect, StrictModifiers } from '@popperjs/core';\n\nimport classNames from '../../utils/classNames';\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     *\n     * @default undefined\n     */\n    show?: boolean;\n\n    /**\n     * Callback function triggered when the save button is clicked.\n     *\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     *\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     *\n     * @default 0\n     */\n    editorOffsetLeft?: number;\n\n    /**\n     * Defines the input and button size. Use 'lg' for headlines.\n     *\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     *\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,\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":";;;;;;;;;AAuBA,MAAMA,KAAqB,KACrBC,KAAsB,KAEtBC,IAAwB,GAqHxBC,KAAkB,CAACC,MAAmD;AACxE,QAAM;AAAA,IACF,MAAAC;AAAA,IACA,QAAAC,IAASC;AAAA,IACT,UAAAC,IAAWD;AAAA,IACX,SAAAE,IAAUF;AAAA,IACV,QAAAG,IAASH;AAAA,IACT,YAAAI,IAAaJ;AAAA,IACb,kBAAAK,IAAmB,MAAM;AAAA,IACzB,SAAAC,IAAU;AAAA,IACV,cAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,WAAAC,IAAYd;AAAA,IACZ,iBAAAe,IAAkB;AAAA,IAClB,kBAAAC,IAAmB;AAAA,IACnB,cAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,WAAAC,IAAY;AAAA,IACZ,gBAAAC,IAAiB;AAAA,IACjB,iBAAAC,IAAkB;AAAA,IAClB,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHrB,GAEE,CAACsB,GAAYC,CAAa,IAAIC,EAASvB,CAAI,GAC3C,CAACwB,GAAYC,CAAa,IAAIF,EAAS,EAAE,GACzC,CAACG,GAAUC,CAAW,IAAIJ,EAAS,CAACf,CAAO,GAE3C,CAACoB,GAAkBC,CAAmB,IAAIN,EAAiC,IAAI,GAC/E,CAACO,GAAeC,CAAgB,IAAIR,EAAgC,IAAI,GAExES,IAAmB,CAAC,CAAClB;AAG3B,EAAAmB,GAAO,MAAMC,GAAqB,GAGlCC,GAAaL,CAAa;AAG1B,QAAMM,IAAWC,GAA4B,IAAI;AAEjD,EAAAC,GAAU,MAAM;AACZ,IAAIF,EAAS,WAAWf,MACpBe,EAAS,SAAS,MAAA,GAClBA,EAAS,SAAS,OAAA;AAAA,EAE1B,GAAG,CAACf,GAAYe,EAAS,OAAO,CAAC;AAgBjC,QAAMG,IAAwB;AAAA,IAC1B,WAAW;AAAA,IACX,WAAW,CAhBQC;AAAA,MACnB,OAAO;AAAA,QACH,MAAM;AAAA,QACN,SAAS;AAAA,UACL,QAAQ,CAAC,EAAE,WAAAC,QAAqC;AAC5C,kBAAMC,KAAa9C,KAAsBiB,GACnC8B,KAAY,EAAEF,EAAU,UAAU9C,KAAqBiB;AAC7D,mBAAO,CAAC8B,IAAYC,EAAS;AAAA,UACjC;AAAA,QAAA;AAAA,MACJ;AAAA,MAEJ,CAAA;AAAA,IAAC,CAKyB;AAAA,IAC1B,UAAU;AAAA,EAAA,GAGR,EAAE,QAAAC,GAAQ,YAAAC,EAAA,IAAeC,GAA2BlB,GAAkBE,GAAeS,CAAY,GAEjGQ,IAAiB,MAAM;AAGzB,IAAI/C,MAAS,UACTgD,EAAA,GAEJ1C,EAAA;AAAA,EACJ,GAEM0C,IAAgB,MAAM;AACxB,IAAA1B,EAAc,EAAI,GAClBG,EAAcG,GAAkB,aAAa,QAAA,KAAa,EAAE,GAC5DD,EAAY,EAAK;AAAA,EACrB,GAEMsB,IAAoB,CAACC,MAAkD;AACzE,IAAAzB,EAAcyB,EAAM,OAAO,KAAK;AAAA,EACpC,GAEMC,IAAgB,CAACD,MAA+B;AAElD,IAAIA,EAAM,QAAQ,WAAWvC,MAAcd,MACvCqD,EAAM,eAAA,GAGNE,EAAA;AAAA,EAER,GAEMlB,IAAsB,MAAM;AAC9B,IAAAZ,EAAc,EAAK,GACnBnB,EAAA;AAAA,EACJ,GAEMiD,IAAoB,MAAM;AAC5B,UAAMC,IAAe9C,EAAiBiB,CAAU;AAChD,IAAAG,EAAY,CAAC0B,CAAY,GAErBA,MACA/B,EAAc,EAAK,GACnBrB,EAAOuB,EAAW,SAAS;AAAA,EAEnC,GAIM,CAAC8B,GAAcC,CAAe,IAAIhC,EAASvB,CAAI;AACrD,EAAIA,MAASsD,MACLtD,KACAgD,EAAA,GAEChD,KACDsB,EAAc,EAAK,GAEvBiC,EAAgBvD,CAAI;AAKxB,QAAM,CAACwD,GAAiBC,CAAkB,IAAIlC,EAASf,CAAO;AAC9D,EAAIA,MAAYgD,MACZ7B,EAAY,CAACnB,CAAO,GACpBiD,EAAmBjD,CAAO;AAG9B,QAAMkD,IAAqBC,EAAW3C,GAAWK,KAAc,WAAW,GAEpEuC,KAAwBD;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAzC;AAAA,EAAA,GAGE2C,KAAsBF;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACAjC,KAAY;AAAA,EAAA,GAGVoC,KAAeH,EAAW,gBAAgB5C,MAAS,QAAQ,YAAYE,CAAc,GAErF8C,KAA4B;AAAA,IAC9B,UAAU;AAAA,IACV,QAAQrD,IAAc,aAAa;AAAA,EAAA;AAGvC,SACI,gBAAAsD,EAAAC,IAAA,EACI,UAAA;AAAA,IAAA,gBAAAC,EAAC,UAAK,KAAKrC,GAAqB,SAASkB,GAAgB,WAAWW,GAC/D,UAAAvC,GACL;AAAA,IACCE,KACG8C;AAAA,MACI,gBAAAH;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAWJ;AAAA,UACX,SAAS,CAAAV,MAASA,EAAM,gBAAA;AAAA,UACxB,KAAKnB;AAAA,UACL,OAAOa,EAAO;AAAA,UACb,GAAGC,EAAW;AAAA,UACd,GAAGzB;AAAA,UAEJ,UAAA;AAAA,YAAA,gBAAA4C,EAAC,OAAA,EAAI,WAAWH,IACX,UAAA;AAAA,cAAA7B,KAAoBlB;AAAA,cACpB,CAACkB,KACE,gBAAAkC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,KAAK9B;AAAA,kBACL,WAAW0B;AAAA,kBACX,OAAOtC;AAAA,kBACP,UAAUyB;AAAA,kBACV,SAAA7C;AAAA,kBACA,QAAAC;AAAA,kBACA,WAAW8C;AAAA,kBACX,OAAOY;AAAA,kBACP,MAAMpD;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGbe,KAAY,gBAAAwC,EAAC,OAAA,EAAI,WAAU,gCAAgC,UAAAzD,EAAA,CAAa;AAAA,YAAA,GAC7E;AAAA,YACA,gBAAAuD,EAAC,OAAA,EAAI,WAAU,sBACX,UAAA;AAAA,cAAA,gBAAAE;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,MAAK;AAAA,kBACL,SAAShC;AAAA,kBACT,WAAW,2DAA2DnB,CAAI;AAAA,kBAC1E,cAAW;AAAA,kBACX,eAAY;AAAA,kBAEZ,UAAA,gBAAAmD,EAAC,QAAA,EAAK,WAAU,2BAAA,CAA2B;AAAA,gBAAA;AAAA,cAAA;AAAA,cAE/C,gBAAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,MAAK;AAAA,kBACL,SAASd;AAAA,kBACT,WAAW,yDAAyDrC,CAAI;AAAA,kBACxE,cAAW;AAAA,kBACX,eAAY;AAAA,kBAEZ,UAAA,gBAAAmD,EAAC,QAAA,EAAK,WAAU,uBAAA,CAAuB;AAAA,gBAAA;AAAA,cAAA;AAAA,YAC3C,EAAA,CACJ;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAEJE,GAAA;AAAA,IAAsB;AAAA,EAC1B,GACR;AAER;"}
+{"version":3,"file":"EditableContent.js","names":[],"sources":["../../../src/components/editableContent/EditableContent.tsx"],"sourcesContent":["import React, {\n    useState,\n    useRef,\n    useEffect,\n    type PropsWithChildren,\n    type CSSProperties,\n    type HTMLAttributes,\n} from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport useEsc from '../../hooks/useEsc';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useAnchorName, usePopover } from '../../hooks/useAnchoredPopover';\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     *\n     * @default undefined\n     */\n    show?: boolean;\n\n    /**\n     * Callback function triggered when the save button is clicked.\n     *\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     *\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     *\n     * @default 0\n     */\n    editorOffsetLeft?: number;\n\n    /**\n     * Defines the input and button size. Use 'lg' for headlines.\n     *\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     *\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,\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 [editorElement, setEditorElement] = useState<HTMLDivElement | null>(null);\n\n    const hasCustomControl = !!customEditor;\n    const anchorName = useAnchorName('editable-content');\n\n    // Close edit mode on \"esc\"\n    useEsc(() => handleCloseEditMode());\n\n    // Trap focus on the editor element\n    useFocusTrap(editorElement);\n    usePopover(editorElement, isEditMode);\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 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    const referenceStyle = {\n        anchorName,\n    } as CSSProperties;\n\n    const editorStyle = {\n        '--editable-content-editor-offset-top': `${POPOVER_OFFSET_TOP + editorOffsetTop}px`,\n        '--editable-content-editor-offset-left': `${POPOVER_OFFSET_LEFT + editorOffsetLeft}px`,\n        positionAnchor: anchorName,\n    } as CSSProperties;\n\n    const nativePopoverProps = { popover: 'manual' } as HTMLAttributes<HTMLDivElement>;\n\n    return (\n        <>\n            <span\n                ref={setReferenceElement}\n                onClick={handleEditMode}\n                className={textWrapperClasses}\n                style={referenceStyle}\n            >\n                {children}\n            </span>\n            {isEditMode && (\n                <div\n                    className={overlayWrapperClasses}\n                    onClick={event => event.stopPropagation()}\n                    ref={setEditorElement}\n                    style={editorStyle}\n                    {...nativePopoverProps}\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='uikit-icon icon-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='uikit-icon icon-ok' />\n                        </button>\n                    </div>\n                </div>\n            )}\n        </>\n    );\n};\n\nexport default EditableContent;\n"],"mappings":"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"}

package/components/ellipsis/TextTruncateMiddle.js

@@ -1,21 +1,22 @@
-import { jsxs as h, jsx as n } from "react/jsx-runtime";
-import x from "../../utils/classNames.js";
-const u = (e) => Number.isFinite(e) ? Math.max(0, Math.floor(e)) : 0, g = (e) => {
-  const {
-    text: s,
-    suffixLength: i = 6,
-    className: r = "",
-    startClassName: l = "",
-    endClassName: c = "",
-    title: m,
-    ...o
-  } = e, t = u(i), a = t > 0 && s.length > t, f = a ? s.slice(0, -t) : s, d = a ? s.slice(-t) : "";
-  return /* @__PURE__ */ h("span", { ...o, className: x("ellipsis-middle", r), title: m ?? s, children: [
-    /* @__PURE__ */ n("span", { className: l, children: f }),
-    /* @__PURE__ */ n("span", { className: c, children: d })
-  ] });
+import e from "../../utils/classNames.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/ellipsis/TextTruncateMiddle.tsx
+var r = (e) => Number.isFinite(e) ? Math.max(0, Math.floor(e)) : 0, i = (i) => {
+	let { text: a, suffixLength: o = 6, className: s = "", startClassName: c = "", endClassName: l = "", title: u, ...d } = i, f = r(o), p = f > 0 && a.length > f, m = p ? a.slice(0, -f) : a, h = p ? a.slice(-f) : "";
+	return /* @__PURE__ */ n("span", {
+		...d,
+		className: e("ellipsis-middle", s),
+		title: u ?? a,
+		children: [/* @__PURE__ */ t("span", {
+			className: c,
+			children: m
+		}), /* @__PURE__ */ t("span", {
+			className: l,
+			children: h
+		})]
+	});
 };
-export {
-  g as default
-};
-//# sourceMappingURL=TextTruncateMiddle.js.map
+//#endregion
+export { i as default };
+
+//# sourceMappingURL=TextTruncateMiddle.js.map

package/components/ellipsis/TextTruncateMiddle.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextTruncateMiddle.js","sources":["../../../src/components/ellipsis/TextTruncateMiddle.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nconst normalizeSuffixLength = (value: number) => {\n    if (!Number.isFinite(value)) {\n        return 0;\n    }\n    return Math.max(0, Math.floor(value));\n};\n\nexport type TextTruncateMiddleProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {\n    /**\n     * Full text value to render.\n     */\n    text: string;\n\n    /**\n     * Number of characters preserved at the end.\n     *\n     * @default 6\n     */\n    suffixLength?: number;\n\n    /**\n     * Additional classes for the first text segment (start).\n     */\n    startClassName?: string;\n\n    /**\n     * Additional classes for the second text segment (end).\n     */\n    endClassName?: string;\n};\n\nconst TextTruncateMiddle = (props: TextTruncateMiddleProps) => {\n    const {\n        text,\n        suffixLength = 6,\n        className = '',\n        startClassName = '',\n        endClassName = '',\n        title,\n        ...remainingProps\n    } = props;\n\n    const safeSuffixLength = normalizeSuffixLength(suffixLength);\n    const hasSuffix = safeSuffixLength > 0 && text.length > safeSuffixLength;\n    const start = hasSuffix ? text.slice(0, -safeSuffixLength) : text;\n    const end = hasSuffix ? text.slice(-safeSuffixLength) : '';\n\n    return (\n        <span {...remainingProps} className={classNames('ellipsis-middle', className)} title={title ?? text}>\n            <span className={startClassName}>{start}</span>\n            <span className={endClassName}>{end}</span>\n        </span>\n    );\n};\n\nexport default TextTruncateMiddle;\n"],"names":["normalizeSuffixLength","value","TextTruncateMiddle","props","text","suffixLength","className","startClassName","endClassName","title","remainingProps","safeSuffixLength","hasSuffix","start","end","jsxs","classNames","jsx"],"mappings":";;AAIA,MAAMA,IAAwB,CAACC,MACtB,OAAO,SAASA,CAAK,IAGnB,KAAK,IAAI,GAAG,KAAK,MAAMA,CAAK,CAAC,IAFzB,GA6BTC,IAAqB,CAACC,MAAmC;AAC3D,QAAM;AAAA,IACF,MAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,WAAAC,IAAY;AAAA,IACZ,gBAAAC,IAAiB;AAAA,IACjB,cAAAC,IAAe;AAAA,IACf,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHP,GAEEQ,IAAmBX,EAAsBK,CAAY,GACrDO,IAAYD,IAAmB,KAAKP,EAAK,SAASO,GAClDE,IAAQD,IAAYR,EAAK,MAAM,GAAG,CAACO,CAAgB,IAAIP,GACvDU,IAAMF,IAAYR,EAAK,MAAM,CAACO,CAAgB,IAAI;AAExD,SACI,gBAAAI,EAAC,QAAA,EAAM,GAAGL,GAAgB,WAAWM,EAAW,mBAAmBV,CAAS,GAAG,OAAOG,KAASL,GAC3F,UAAA;AAAA,IAAA,gBAAAa,EAAC,QAAA,EAAK,WAAWV,GAAiB,UAAAM,GAAM;AAAA,IACxC,gBAAAI,EAAC,QAAA,EAAK,WAAWT,GAAe,UAAAM,EAAA,CAAI;AAAA,EAAA,GACxC;AAER;"}
+{"version":3,"file":"TextTruncateMiddle.js","names":[],"sources":["../../../src/components/ellipsis/TextTruncateMiddle.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nconst normalizeSuffixLength = (value: number) => {\n    if (!Number.isFinite(value)) {\n        return 0;\n    }\n    return Math.max(0, Math.floor(value));\n};\n\nexport type TextTruncateMiddleProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {\n    /**\n     * Full text value to render.\n     */\n    text: string;\n\n    /**\n     * Number of characters preserved at the end.\n     *\n     * @default 6\n     */\n    suffixLength?: number;\n\n    /**\n     * Additional classes for the first text segment (start).\n     */\n    startClassName?: string;\n\n    /**\n     * Additional classes for the second text segment (end).\n     */\n    endClassName?: string;\n};\n\nconst TextTruncateMiddle = (props: TextTruncateMiddleProps) => {\n    const {\n        text,\n        suffixLength = 6,\n        className = '',\n        startClassName = '',\n        endClassName = '',\n        title,\n        ...remainingProps\n    } = props;\n\n    const safeSuffixLength = normalizeSuffixLength(suffixLength);\n    const hasSuffix = safeSuffixLength > 0 && text.length > safeSuffixLength;\n    const start = hasSuffix ? text.slice(0, -safeSuffixLength) : text;\n    const end = hasSuffix ? text.slice(-safeSuffixLength) : '';\n\n    return (\n        <span {...remainingProps} className={classNames('ellipsis-middle', className)} title={title ?? text}>\n            <span className={startClassName}>{start}</span>\n            <span className={endClassName}>{end}</span>\n        </span>\n    );\n};\n\nexport default TextTruncateMiddle;\n"],"mappings":";;;AAIA,IAAM,KAAyB,MACtB,OAAO,SAAS,CAAK,IAGnB,KAAK,IAAI,GAAG,KAAK,MAAM,CAAK,CAAC,IAFzB,GA6BT,KAAsB,MAAmC;CAC3D,IAAM,EACF,SACA,kBAAe,GACf,eAAY,IACZ,oBAAiB,IACjB,kBAAe,IACf,UACA,GAAG,MACH,GAEE,IAAmB,EAAsB,CAAY,GACrD,IAAY,IAAmB,KAAK,EAAK,SAAS,GAClD,IAAQ,IAAY,EAAK,MAAM,GAAG,CAAC,CAAgB,IAAI,GACvD,IAAM,IAAY,EAAK,MAAM,CAAC,CAAgB,IAAI;CAExD,OACI,kBAAC,QAAD;EAAM,GAAI;EAAgB,WAAW,EAAW,mBAAmB,CAAS;EAAG,OAAO,KAAS;YAA/F,CACI,kBAAC,QAAD;GAAM,WAAW;aAAiB;EAAY,CAAA,GAC9C,kBAAC,QAAD;GAAM,WAAW;aAAe;EAAU,CAAA,CACxC;;AAEd"}

package/components/expander/ExpanderList.js

@@ -1,55 +1,59 @@
-import { jsx as o, jsxs as h } from "react/jsx-runtime";
-import { useState as m } from "react";
-import { isEqual as y } from "es-toolkit/predicate";
-import d from "../../utils/classNames.js";
-import f from "../collapse/Collapse.js";
-import { hasBorderClass as I, hasRoundedClass 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: l = !0, bordered: N = !0, className: p = "" } = r, [c, i] = m(u(s)), [b, x] = m(s);
-  y(b, s) || (i(u(s)), x(s));
-  const C = (e) => {
-    if (!e.body)
-      return;
-    const t = [...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(t);
-  }, g = d(
-    "expander-list list-group",
-    l && !v(p) && "rounded",
-    N && !I(p) && "border",
-    p
-  );
-  return /* @__PURE__ */ o("ul", { className: g, children: c.map((e) => {
-    const t = e.open, a = d(
-      "list-group-item",
-      e.className && e.className,
-      e.body ? "expandable" : "",
-      t && "open"
-    );
-    return /* @__PURE__ */ h("li", { className: a, children: [
-      /* @__PURE__ */ o(E, { item: e, onToggle: C }),
-      e.body && /* @__PURE__ */ o(f, { open: t, 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), l = d("expander-icon", "rioglyph", "rioglyph-chevron-down");
-  return /* @__PURE__ */ h(
-    "div",
-    {
-      className: n,
-      onClick: () => s(r),
-      "aria-label": "expander item header",
-      ...r.trackingAttributes,
-      children: [
-        /* @__PURE__ */ o("span", { className: "expander-list-header-content", children: r.header }),
-        r.body && /* @__PURE__ */ o("span", { className: l })
-      ]
-    }
-  );
-}, 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 });
-};
-export {
-  q as default
-};
-//# sourceMappingURL=ExpanderList.js.map
+import e from "../../utils/classNames.js";
+import t from "../collapse/Collapse.js";
+import { hasBorderClass as n, hasRoundedClass as r } from "../../utils/hasUtilityClass.js";
+import { useState as i } from "react";
+import { isEqual as a } from "es-toolkit/predicate";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/expander/ExpanderList.tsx
+var c = () => (Math.random() + 1).toString(36).toUpperCase().substring(2), l = (e) => e.map((e) => (e.id ||= c(), e)), u = (c) => {
+	let { items: u = [], unmountOnExit: p = !0, rounded: m = !0, bordered: h = !0, className: g = "" } = c, [_, v] = i(l(u)), [y, b] = i(u);
+	a(y, u) || (v(l(u)), b(u));
+	let x = (e) => {
+		if (!e.body) return;
+		let t = [..._].map((t) => (t.id === e.id && (t.onOpen && !t.open && t.onOpen(), t.onClose && t.open && t.onClose(), t.open = !t.open), t));
+		v(t);
+	};
+	return /* @__PURE__ */ o("ul", {
+		className: e("expander-list list-group", m && !r(g) && "rounded", h && !n(g) && "border", g),
+		children: _.map((n) => {
+			let r = n.open;
+			return /* @__PURE__ */ s("li", {
+				className: e("list-group-item", n.className && n.className, n.body ? "expandable" : "", r && "open"),
+				children: [/* @__PURE__ */ o(d, {
+					item: n,
+					onToggle: x
+				}), n.body && /* @__PURE__ */ o(t, {
+					open: r,
+					unmountOnExit: p,
+					children: /* @__PURE__ */ o("div", {
+						className: "expander-list-body-wrapper",
+						children: /* @__PURE__ */ o(f, {
+							className: n.bodyClassName,
+							children: n.body
+						})
+					})
+				})]
+			}, n.id);
+		})
+	});
+}, d = ({ item: t, onToggle: n }) => {
+	let r = e("expander-list-header", t.headerClassName), i = e("expander-icon", "uikit-icon", "icon-chevron-down");
+	return /* @__PURE__ */ s("div", {
+		className: r,
+		onClick: () => n(t),
+		"aria-label": "expander item header",
+		...t.trackingAttributes,
+		children: [/* @__PURE__ */ o("span", {
+			className: "expander-list-header-content",
+			children: t.header
+		}), t.body && /* @__PURE__ */ o("span", { className: i })]
+	});
+}, f = ({ className: t, children: n }) => /* @__PURE__ */ o("div", {
+	className: e("expander-list-body", t),
+	"aria-label": "expander item body",
+	children: n
+});
+//#endregion
+export { u as default };
+
+//# sourceMappingURL=ExpanderList.js.map

package/components/expander/ExpanderList.js.map

@@ -1 +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 '../../utils/classNames';\nimport Collapse from '../collapse/Collapse';\nimport { hasBorderClass, hasRoundedClass } from '../../utils/hasUtilityClass';\nimport type { TrackingAttributes } from '../../utils/analytics/googleAnalyticsUtils';\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    /**\n     * Optional tracking attributes (e.g. from `getTrackingAttributes`) added to the item header element.\n     */\n    trackingAttributes?: TrackingAttributes;\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     *\n     * @default true\n     */\n    rounded?: boolean;\n\n    /**\n     * Defines whether the \"expander-list-body\" has a border or not.\n     *\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     *\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    items.map(item => {\n        if (!item.id) {\n            item.id = getRandomString();\n        }\n        return item;\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\n            className={headerClassNames}\n            onClick={() => onToggle(item)}\n            aria-label='expander item header'\n            {...item.trackingAttributes}\n        >\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":";;;;;;AAiGA,MAAMA,IAAkB,OAAO,KAAK,OAAA,IAAW,GAAG,SAAS,EAAE,EAAE,cAAc,UAAU,CAAC,GAIlFC,IAAa,CAACC,MAChBA,EAAM,IAAI,CAAAC,OACDA,EAAK,OACNA,EAAK,KAAKH,EAAA,IAEPG,EACV,GAECC,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,OAAO,eAAe;AAAA,MAC3BoB,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;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWM;AAAA,MACX,SAAS,MAAMD,EAAS3B,CAAI;AAAA,MAC5B,cAAW;AAAA,MACV,GAAGA,EAAK;AAAA,MAET,UAAA;AAAA,QAAA,gBAAAuB,EAAC,QAAA,EAAK,WAAU,gCAAgC,UAAAvB,EAAK,QAAO;AAAA,QAC3DA,EAAK,QAAQ,gBAAAuB,EAAC,QAAA,EAAK,WAAWM,EAAA,CAAgB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG3D,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;"}
+{"version":3,"file":"ExpanderList.js","names":[],"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 '../../utils/classNames';\nimport Collapse from '../collapse/Collapse';\nimport { hasBorderClass, hasRoundedClass } from '../../utils/hasUtilityClass';\nimport type { TrackingAttributes } from '../../utils/analytics/googleAnalyticsUtils';\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    /**\n     * Optional tracking attributes (e.g. from `getTrackingAttributes`) added to the item header element.\n     */\n    trackingAttributes?: TrackingAttributes;\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     *\n     * @default true\n     */\n    rounded?: boolean;\n\n    /**\n     * Defines whether the \"expander-list-body\" has a border or not.\n     *\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     *\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    items.map(item => {\n        if (!item.id) {\n            item.id = getRandomString();\n        }\n        return item;\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', 'uikit-icon', 'icon-chevron-down');\n\n    return (\n        <div\n            className={headerClassNames}\n            onClick={() => onToggle(item)}\n            aria-label='expander item header'\n            {...item.trackingAttributes}\n        >\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"],"mappings":";;;;;;;AAiGA,IAAM,WAAyB,KAAK,OAAO,IAAI,EAAA,CAAG,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,UAAU,CAAC,GAIlF,KAAc,MAChB,EAAM,KAAI,OACN,AACI,EAAK,OAAK,EAAgB,GAEvB,EACV,GAEC,KAAgB,MAA6B;CAC/C,IAAM,EAAE,WAAQ,CAAC,GAAG,mBAAgB,IAAM,aAAU,IAAM,cAAW,IAAM,eAAY,OAAO,GAExF,CAAC,GAAW,KAAgB,EAAS,EAAW,CAAK,CAAC,GAGtD,CAAC,GAAe,KAAoB,EAAS,CAAK;CACxD,AAAK,EAAQ,GAAe,CAAK,MAC7B,EAAa,EAAW,CAAK,CAAC,GAC9B,EAAiB,CAAK;CAG1B,IAAM,KAAoB,MAAmC;EACzD,IAAI,CAAC,EAAa,MACd;EAIJ,IAAM,IAAmB,CAAC,GAAG,CAAS,CAAC,CAAC,KAAI,OACpC,EAAK,OAAO,EAAa,OACzB,EAAK,UAAU,CAAC,EAAK,QAAQ,EAAK,OAAO,GACzC,EAAK,WAAW,EAAK,QAAQ,EAAK,QAAQ,GAC1C,EAAK,OAAO,CAAC,EAAK,OAEf,EACV;EAED,EAAa,CAAgB;CACjC;CASA,OACI,kBAAC,MAAD;EAAI,WARe,EACnB,4BACA,KAAW,CAAC,EAAgB,CAAS,KAAK,WAC1C,KAAY,CAAC,EAAe,CAAS,KAAK,UAC1C,CAIe;YACV,EAAU,KAAI,MAAQ;GACnB,IAAM,IAAS,EAAK;GASpB,OACI,kBAAC,MAAD;IAAI,WARe,EACnB,mBACA,EAAK,aAAa,EAAK,WACvB,EAAK,OAAO,eAAe,IAC3B,KAAU,MAIK;cAAf,CACI,kBAAC,GAAD;KAA8B;KAAM,UAAU;IAAmB,CAAA,GAChE,EAAK,QACF,kBAAC,GAAD;KAAU,MAAM;KAAuB;eACnC,kBAAC,OAAD;MAAK,WAAU;gBACX,kBAAC,GAAD;OAAsB,WAAW,EAAK;iBACjC,EAAK;MACY,CAAA;KACrB,CAAA;IACC,CAAA,CAEd;MAXgC,EAAK,EAWrC;EAEZ,CAAC;CACD,CAAA;AAEZ,GAOM,KAA0B,EAAE,SAAM,kBAA4C;CAChF,IAAM,IAAmB,EAAW,wBAAwB,EAAK,eAAe,GAC1E,IAAiB,EAAW,iBAAiB,cAAc,mBAAmB;CAEpF,OACI,kBAAC,OAAD;EACI,WAAW;EACX,eAAe,EAAS,CAAI;EAC5B,cAAW;EACX,GAAI,EAAK;YAJb,CAMI,kBAAC,QAAD;GAAM,WAAU;aAAgC,EAAK;EAAa,CAAA,GACjE,EAAK,QAAQ,kBAAC,QAAD,EAAM,WAAW,EAAiB,CAAA,CAC/C;;AAEb,GAMM,KAAwB,EAAE,cAAW,kBAGnC,kBAAC,OAAD;CAAK,WAFc,EAAW,sBAAsB,CAEpC;CAAgB,cAAW;CACtC;AACA,CAAA"}

package/components/expander/ExpanderPanel.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { TrackingAttributes } from '../../utils/analytics/googleAnalyticsUtils';
-type ChildrenType = React.ReactNode | ((isOpen: boolean) => React.ReactNode | JSX.Element);
+type ChildrenType = React.ReactNode | ((isOpen: boolean) => React.ReactNode | React.ReactElement);
 export type ExpanderPanelProps = {
     /**
      * The title to be shown in the expander header.

package/components/expander/ExpanderPanel.js

@@ -1,58 +1,50 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import { useState as h } from "react";
-import { noop as l } from "es-toolkit/function";
-import n from "../../utils/classNames.js";
-import $ from "../collapse/Collapse.js";
-const G = (N) => {
-  const {
-    open: a = !1,
-    iconLeft: f = !1,
-    bsStyle: t = "blank",
-    title: C,
-    headerClassName: i,
-    titleClassName: r,
-    bodyClassName: c,
-    iconClassName: g,
-    unmountOnExit: u = !0,
-    onEntered: b = l,
-    onExited: x = l,
-    onAnimationStart: v = l,
-    onToggle: y = l,
-    className: O,
-    trackingAttributes: S,
-    children: s,
-    ...k
-  } = N, [o, p] = h(a), [E, w] = h(a);
-  E !== a && (p(a), w(a));
-  const A = () => {
-    const m = !o;
-    p(m), y(m);
-  }, P = n("expander-panel panel", `panel-${t}`, O), j = n("expander-icon", g, "rioglyph", "rioglyph-chevron-down"), T = n(
-    "panel-heading",
-    o && "open",
-    f && "icon-left",
-    i && i
-  ), I = n("title", r && r), L = n("panel-body", c && c), R = s && typeof s == "function";
-  return /* @__PURE__ */ d("div", { ...k, className: P, "aria-label": "expander panel", children: [
-    /* @__PURE__ */ d("div", { className: T, onClick: A, "aria-label": "panel heading", ...S, children: [
-      /* @__PURE__ */ e("span", { className: I, children: C }),
-      /* @__PURE__ */ e("span", { className: j }),
-      t === "separator" && /* @__PURE__ */ e("div", { className: "separator", children: /* @__PURE__ */ e("hr", {}) })
-    ] }),
-    /* @__PURE__ */ e(
-      $,
-      {
-        open: o,
-        unmountOnExit: u,
-        onEntered: b,
-        onExited: x,
-        onAnimationStart: () => v(),
-        children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("div", { className: L, children: R ? s(o) : s }) })
-      }
-    )
-  ] });
+import e from "../../utils/classNames.js";
+import t from "../collapse/Collapse.js";
+import { useState as n } from "react";
+import { noop as r } from "es-toolkit/function";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/expander/ExpanderPanel.tsx
+var o = (o) => {
+	let { open: s = !1, iconLeft: c = !1, bsStyle: l = "blank", title: u, headerClassName: d, titleClassName: f, bodyClassName: p, iconClassName: m, unmountOnExit: h = !0, onEntered: g = r, onExited: _ = r, onAnimationStart: v = r, onToggle: y = r, className: b, trackingAttributes: x, children: S, ...C } = o, [w, T] = n(s), [E, D] = n(s);
+	E !== s && (T(s), D(s));
+	let O = () => {
+		let e = !w;
+		T(e), y(e);
+	}, k = e("expander-panel panel", `panel-${l}`, b), A = e("expander-icon", m, "uikit-icon", "icon-chevron-down"), j = e("panel-heading", w && "open", c && "icon-left", d && d), M = e("title", f && f), N = e("panel-body", p && p), P = S && typeof S == "function";
+	return /* @__PURE__ */ a("div", {
+		...C,
+		className: k,
+		"aria-label": "expander panel",
+		children: [/* @__PURE__ */ a("div", {
+			className: j,
+			onClick: O,
+			"aria-label": "panel heading",
+			...x,
+			children: [
+				/* @__PURE__ */ i("span", {
+					className: M,
+					children: u
+				}),
+				/* @__PURE__ */ i("span", { className: A }),
+				l === "separator" && /* @__PURE__ */ i("div", {
+					className: "separator",
+					children: /* @__PURE__ */ i("hr", {})
+				})
+			]
+		}), /* @__PURE__ */ i(t, {
+			open: w,
+			unmountOnExit: h,
+			onEntered: g,
+			onExited: _,
+			onAnimationStart: () => v(),
+			children: /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i("div", {
+				className: N,
+				children: P ? S(w) : S
+			}) })
+		})]
+	});
 };
-export {
-  G as default
-};
-//# sourceMappingURL=ExpanderPanel.js.map
+//#endregion
+export { o as default };
+
+//# sourceMappingURL=ExpanderPanel.js.map

package/components/expander/ExpanderPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpanderPanel.js","sources":["../../../src/components/expander/ExpanderPanel.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState } from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport type { TrackingAttributes } from '../../utils/analytics/googleAnalyticsUtils';\nimport Collapse from '../collapse/Collapse';\n\ntype ChildrenType = React.ReactNode | ((isOpen: boolean) => 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     * @default 'blank'\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     *\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     *\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     *\n     * @default true\n     */\n    unmountOnExit?: boolean;\n\n    /**\n     * Callback function for when the header is clicked and the expander toggles.\n     *\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     * Optional tracking attributes (e.g. from `getTrackingAttributes`) added to the panel header element.\n     */\n    trackingAttributes?: TrackingAttributes;\n\n    /**\n     * Any element to be rendered inside the panel body.\n     * Providing a function enables the render prop approach.\n     *\n     * See {@link https://reactjs.org/docs/render-props.html}\n     *\n     * 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: 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        trackingAttributes,\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' {...trackingAttributes}>\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","trackingAttributes","children","remainingProps","isOpen","setIsOpen","useState","previousOpen","setPreviousOpen","handleToggle","newState","wrapperClassNames","classNames","iconClassNames","headerClassNames","titleClassNames","bodyClassNames","isRenderCallback","jsxs","jsx","Collapse"],"mappings":";;;;;AA+GA,MAAMA,IAAgB,CAACC,MAA8B;AACjD,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,oBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHlB,GAEE,CAACmB,GAAQC,CAAS,IAAIC,EAASpB,CAAI,GAGnC,CAACqB,GAAcC,CAAe,IAAIF,EAASpB,CAAI;AACrD,EAAIqB,MAAiBrB,MACjBmB,EAAUnB,CAAI,GACdsB,EAAgBtB,CAAI;AAGxB,QAAMuB,IAAe,MAAM;AACvB,UAAMC,IAAW,CAACN;AAClB,IAAAC,EAAUK,CAAQ,GAClBX,EAASW,CAAQ;AAAA,EACrB,GAEMC,IAAoBC,EAAW,wBAAwB,SAASxB,CAAO,IAAIY,CAAS,GAEpFa,IAAiBD,EAAW,iBAAiBnB,GAAe,YAAY,uBAAuB,GAE/FqB,IAAmBF;AAAA,IACrB;AAAA,IACAR,KAAU;AAAA,IACVjB,KAAY;AAAA,IACZG,KAAmBA;AAAA,EAAA,GAGjByB,IAAkBH,EAAW,SAASrB,KAAkBA,CAAc,GAEtEyB,IAAiBJ,EAAW,cAAcpB,KAAiBA,CAAa,GAExEyB,IAAmBf,KAAY,OAAOA,KAAa;AAEzD,2BACK,OAAA,EAAK,GAAGC,GAAgB,WAAWQ,GAAmB,cAAW,kBAC9D,UAAA;AAAA,IAAA,gBAAAO,EAAC,OAAA,EAAI,WAAWJ,GAAkB,SAASL,GAAc,cAAW,iBAAiB,GAAGR,GACpF,UAAA;AAAA,MAAA,gBAAAkB,EAAC,QAAA,EAAK,WAAWJ,GAAkB,UAAA1B,GAAM;AAAA,MACzC,gBAAA8B,EAAC,QAAA,EAAK,WAAWN,EAAA,CAAgB;AAAA,MAChCzB,MAAY,eACT,gBAAA+B,EAAC,OAAA,EAAI,WAAU,aACX,UAAA,gBAAAA,EAAC,QAAG,EAAA,CACR;AAAA,IAAA,GAER;AAAA,IACA,gBAAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,MAAMhB;AAAA,QACN,eAAAV;AAAA,QACA,WAAAC;AAAA,QACA,UAAAE;AAAA,QACA,kBAAkB,MAAMC,EAAA;AAAA,QAExB,UAAA,gBAAAqB,EAAC,OAAA,EACG,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAWH,GAAiB,UAAAC,IAAmBf,EAASE,CAAM,IAAIF,EAAA,CAAS,EAAA,CACpF;AAAA,MAAA;AAAA,IAAA;AAAA,EACJ,GACJ;AAER;"}
+{"version":3,"file":"ExpanderPanel.js","names":[],"sources":["../../../src/components/expander/ExpanderPanel.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState } from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport type { TrackingAttributes } from '../../utils/analytics/googleAnalyticsUtils';\nimport Collapse from '../collapse/Collapse';\n\ntype ChildrenType = React.ReactNode | ((isOpen: boolean) => React.ReactNode | React.ReactElement);\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     * @default 'blank'\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     *\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     *\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     *\n     * @default true\n     */\n    unmountOnExit?: boolean;\n\n    /**\n     * Callback function for when the header is clicked and the expander toggles.\n     *\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     * Optional tracking attributes (e.g. from `getTrackingAttributes`) added to the panel header element.\n     */\n    trackingAttributes?: TrackingAttributes;\n\n    /**\n     * Any element to be rendered inside the panel body.\n     * Providing a function enables the render prop approach.\n     *\n     * See {@link https://reactjs.org/docs/render-props.html}\n     *\n     * 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: 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        trackingAttributes,\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, 'uikit-icon', 'icon-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' {...trackingAttributes}>\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"],"mappings":";;;;;;AA+GA,IAAM,KAAiB,MAA8B;CACjD,IAAM,EACF,UAAO,IACP,cAAW,IACX,aAAU,SACV,UACA,oBACA,mBACA,kBACA,kBACA,mBAAgB,IAChB,eAAY,GACZ,cAAW,GACX,sBAAmB,GACnB,cAAW,GACX,cACA,uBACA,aACA,GAAG,MACH,GAEE,CAAC,GAAQ,KAAa,EAAS,CAAI,GAGnC,CAAC,GAAc,KAAmB,EAAS,CAAI;CACrD,AAAI,MAAiB,MACjB,EAAU,CAAI,GACd,EAAgB,CAAI;CAGxB,IAAM,UAAqB;EACvB,IAAM,IAAW,CAAC;EAElB,AADA,EAAU,CAAQ,GAClB,EAAS,CAAQ;CACrB,GAEM,IAAoB,EAAW,wBAAwB,SAAS,KAAW,CAAS,GAEpF,IAAiB,EAAW,iBAAiB,GAAe,cAAc,mBAAmB,GAE7F,IAAmB,EACrB,iBACA,KAAU,QACV,KAAY,aACZ,KAAmB,CACvB,GAEM,IAAkB,EAAW,SAAS,KAAkB,CAAc,GAEtE,IAAiB,EAAW,cAAc,KAAiB,CAAa,GAExE,IAAmB,KAAY,OAAO,KAAa;CAEzD,OACI,kBAAC,OAAD;EAAK,GAAI;EAAgB,WAAW;EAAmB,cAAW;YAAlE,CACI,kBAAC,OAAD;GAAK,WAAW;GAAkB,SAAS;GAAc,cAAW;GAAgB,GAAI;aAAxF;IACI,kBAAC,QAAD;KAAM,WAAW;eAAkB;IAAY,CAAA;IAC/C,kBAAC,QAAD,EAAM,WAAW,EAAiB,CAAA;IACjC,MAAY,eACT,kBAAC,OAAD;KAAK,WAAU;eACX,kBAAC,MAAD,CAAK,CAAA;IACJ,CAAA;GAER;MACL,kBAAC,GAAD;GACI,MAAM;GACS;GACJ;GACD;GACV,wBAAwB,EAAiB;aAEzC,kBAAC,OAAD,EAAA,UACI,kBAAC,OAAD;IAAK,WAAW;cAAiB,IAAmB,EAAS,CAAM,IAAI;GAAc,CAAA,EACpF,CAAA;EACC,CAAA,CACT;;AAEb"}