@rio-cloud/rio-uikit 2.1.0 → 2.2.0

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 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     *\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 = 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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"}
+{"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 = 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":";;;;;;;;;AAuBA,MAAMA,KAAqB,KACrBC,KAAsB,KAEtBC,IAAwB,GAqHxBC,KAAkB,CAACC,MAAmD;AACxE,QAAM;AAAA,IACF,MAAAC,IAAO;AAAA,IACP,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;"}

package/components/ellipsis/TextTruncateMiddle.d.ts

@@ -0,0 +1,23 @@
+import { HTMLAttributes } from 'react';
+export type TextTruncateMiddleProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+    /**
+     * Full text value to render.
+     */
+    text: string;
+    /**
+     * Number of characters preserved at the end.
+     *
+     * @default 6
+     */
+    suffixLength?: number;
+    /**
+     * Additional classes for the first text segment (start).
+     */
+    startClassName?: string;
+    /**
+     * Additional classes for the second text segment (end).
+     */
+    endClassName?: string;
+};
+declare const TextTruncateMiddle: (props: TextTruncateMiddleProps) => import("react/jsx-runtime").JSX.Element;
+export default TextTruncateMiddle;

package/components/ellipsis/TextTruncateMiddle.js

@@ -0,0 +1,21 @@
+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 })
+  ] });
+};
+export {
+  g as default
+};
+//# sourceMappingURL=TextTruncateMiddle.js.map

package/components/ellipsis/TextTruncateMiddle.js.map

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

package/components/expander/ExpanderList.js

@@ -1,9 +1,9 @@
 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 d from "../../utils/classNames.js";
 import f from "../collapse/Collapse.js";
-import { hasRoundedClass as I, hasBorderClass as v } from "../../utils/hasUtilityClass.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: 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));
@@ -14,15 +14,15 @@ const L = () => (Math.random() + 1).toString(36).toUpperCase().substring(2), u =
     i(l);
   }, y = d(
     "expander-list list-group",
-    t && !I(p) && "rounded",
-    N && !v(p) && "border",
+    t && !v(p) && "rounded",
+    N && !I(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",
+      e.body ? "expandable" : "",
       l && "open"
     );
     return /* @__PURE__ */ h("li", { className: a, children: [

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 '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     *\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    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":";;;;;;AA4FA,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;"}
+{"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';\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     *\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    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":";;;;;;AA2FA,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,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,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.js

@@ -1,7 +1,7 @@
 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 n from "../../utils/classNames.js";
 import I from "../collapse/Collapse.js";
 const F = (N) => {
   const {

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 classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\n\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     * 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        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":";;;;;AAyGA,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,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;"}
+{"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 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     * 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        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":";;;;;AAyGA,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,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/feedback/FeedbackRating.js

@@ -1,6 +1,6 @@
 import { jsxs as s, jsx as e } from "react/jsx-runtime";
 import { useState as L, createElement as j } from "react";
-import p from "classnames";
+import p from "../../utils/classNames.js";
 import z from "../button/ToggleButton.js";
 const F = (b) => {
   const {

package/components/feedback/FeedbackRating.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeedbackRating.js","sources":["../../../src/components/feedback/FeedbackRating.tsx"],"sourcesContent":["import React, { type ComponentProps, useState } from 'react';\nimport classNames from 'classnames';\n\nimport ToggleButton from '../button/ToggleButton';\nimport type { BUTTON_SIZE, BUTTON_STYLE, BUTTON_VARIANT } from '../button/Button';\n\ntype FeedbackRatingProps = ComponentProps<'div'> & {\n    /**\n     * Optional headline\n     */\n    headline?: React.ReactNode;\n\n    /**\n     * The amount of toggle buttons used to rate.\n     *\n     * @default 1\n     */\n    count: number;\n\n    /**\n     * Defines whether the buttons are round.\n     *\n     * @default false\n     */\n    circleButtons?: boolean;\n\n    /**\n     * Optional class names applied to all the buttons.\n     * If you need more control on styling individual buttons, see `buttonStyles`.\n     */\n    buttonClassName?: string;\n\n    /**\n     * Array of button labels that will be used instead of the index.\n     * There needs to be a label for each button defined.\n     */\n    buttonLabels?: React.ReactNode[];\n\n    /**\n     * Array of button styles to individually define the button size, style and variant.\n     * There needs to be a item for each button defined.\n     */\n    buttonStyles?: { bsSize?: BUTTON_SIZE; bsStyle?: BUTTON_STYLE; variant?: BUTTON_VARIANT; className?: string }[];\n\n    /**\n     * Left aligned label to name the lowest rating option.\n     */\n    leftLabel?: React.ReactNode;\n\n    /**\n     * Right aligned label to name the highest rating option.\n     */\n    rightLabel?: React.ReactNode;\n\n    /**\n     * Additional icon placed in front of the rating buttons.\n     */\n    leadingIcon?: React.ReactNode;\n\n    /**\n     * Additional icon placed after the rating buttons.\n     */\n    trailingIcon?: React.ReactNode;\n\n    /**\n     * Callback triggered when the rating changes.\n     *\n     * @param rating The rating value. Undefined, when a toggle is unchecked.\n     * @returns\n     */\n    onRatingChanged?: (rating: number | undefined) => void;\n};\n\nconst FeedbackRating = (props: FeedbackRatingProps) => {\n    const {\n        headline,\n        count = 1,\n        circleButtons = false,\n        buttonLabels,\n        buttonStyles,\n        buttonClassName = '',\n        leftLabel,\n        rightLabel,\n        leadingIcon,\n        trailingIcon,\n        onRatingChanged = () => {},\n        ...remainingProps\n    } = props;\n\n    const [rating, setRating] = useState<number>();\n\n    const handleRating = (value: number | undefined) => {\n        setRating(value);\n        onRatingChanged(value);\n    };\n\n    const hasSubLabels = !!leftLabel || !!rightLabel;\n\n    const buttonWrapperClasses = classNames(\n        'display-flex gap-10',\n        hasSubLabels ? 'align-items-start' : 'align-items-center',\n        'text-size-14',\n        'margin-bottom-25'\n    );\n\n    const leadingTrailingIconClasses = classNames(\n        'display-flex align-items-center',\n        'text-size-200pct',\n        hasSubLabels && 'padding-top-3'\n    );\n\n    return (\n        <div {...remainingProps} className='FeedbackRating'>\n            {headline && <div className='text-medium text-size-16 margin-bottom-10'>{headline}</div>}\n            <div className={buttonWrapperClasses}>\n                {leadingIcon && <div className={leadingTrailingIconClasses}>{leadingIcon}</div>}\n                <div>\n                    <div className='display-flex flex-wrap gap-10'>\n                        {Array.from({ length: count }, (_, index) => {\n                            const indexNumber = index + 1;\n                            return (\n                                <ToggleButton\n                                    {...buttonStyles?.[index]}\n                                    key={indexNumber}\n                                    active={rating === indexNumber}\n                                    onClick={(toggled: boolean) => handleRating(toggled ? indexNumber : undefined)}\n                                    className={`${circleButtons ? 'rounded-circle aspect-ratio-1' : ''} ${buttonClassName} ${buttonStyles?.[index].className ?? ''}`}\n                                >\n                                    {buttonLabels?.[index] ?? indexNumber}\n                                </ToggleButton>\n                            );\n                        })}\n                    </div>\n                    {hasSubLabels && (\n                        <div className='display-flex justify-content-between margin-top-5 gap-25'>\n                            {leftLabel ? <label className='word-wrap text-color-dark'>{leftLabel}</label> : <div />}\n                            {rightLabel ? <label className='word-wrap text-color-dark'>{rightLabel}</label> : <div />}\n                        </div>\n                    )}\n                </div>\n                {trailingIcon && <div className={leadingTrailingIconClasses}>{trailingIcon}</div>}\n            </div>\n        </div>\n    );\n};\n\nexport default FeedbackRating;\n"],"names":["FeedbackRating","props","headline","count","circleButtons","buttonLabels","buttonStyles","buttonClassName","leftLabel","rightLabel","leadingIcon","trailingIcon","onRatingChanged","remainingProps","rating","setRating","useState","handleRating","value","hasSubLabels","buttonWrapperClasses","classNames","leadingTrailingIconClasses","jsxs","jsx","_","index","indexNumber","createElement","ToggleButton","toggled"],"mappings":";;;;AAyEA,MAAMA,IAAiB,CAACC,MAA+B;AACnD,QAAM;AAAA,IACF,UAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,eAAAC,IAAgB;AAAA,IAChB,cAAAC;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAC,IAAkB;AAAA,IAClB,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAC,IAAkB,MAAM;AAAA,IAAC;AAAA,IACzB,GAAGC;AAAA,EAAA,IACHZ,GAEE,CAACa,GAAQC,CAAS,IAAIC,EAAA,GAEtBC,IAAe,CAACC,MAA8B;AAChD,IAAAH,EAAUG,CAAK,GACfN,EAAgBM,CAAK;AAAA,EACzB,GAEMC,IAAe,CAAC,CAACX,KAAa,CAAC,CAACC,GAEhCW,IAAuBC;AAAA,IACzB;AAAA,IACAF,IAAe,sBAAsB;AAAA,IACrC;AAAA,IACA;AAAA,EAAA,GAGEG,IAA6BD;AAAA,IAC/B;AAAA,IACA;AAAA,IACAF,KAAgB;AAAA,EAAA;AAGpB,SACI,gBAAAI,EAAC,OAAA,EAAK,GAAGV,GAAgB,WAAU,kBAC9B,UAAA;AAAA,IAAAX,KAAY,gBAAAsB,EAAC,OAAA,EAAI,WAAU,6CAA6C,UAAAtB,GAAS;AAAA,IAClF,gBAAAqB,EAAC,OAAA,EAAI,WAAWH,GACX,UAAA;AAAA,MAAAV,KAAe,gBAAAc,EAAC,OAAA,EAAI,WAAWF,GAA6B,UAAAZ,GAAY;AAAA,wBACxE,OAAA,EACG,UAAA;AAAA,QAAA,gBAAAc,EAAC,OAAA,EAAI,WAAU,iCACV,UAAA,MAAM,KAAK,EAAE,QAAQrB,EAAA,GAAS,CAACsB,GAAGC,MAAU;AACzC,gBAAMC,IAAcD,IAAQ;AAC5B,iBACI,gBAAAE;AAAA,YAACC;AAAA,YAAA;AAAA,cACI,GAAGvB,IAAeoB,CAAK;AAAA,cACxB,KAAKC;AAAA,cACL,QAAQb,MAAWa;AAAA,cACnB,SAAS,CAACG,MAAqBb,EAAaa,IAAUH,IAAc,MAAS;AAAA,cAC7E,WAAW,GAAGvB,IAAgB,kCAAkC,EAAE,IAAIG,CAAe,IAAID,IAAeoB,CAAK,EAAE,aAAa,EAAE;AAAA,YAAA;AAAA,YAE7HrB,IAAeqB,CAAK,KAAKC;AAAA,UAAA;AAAA,QAGtC,CAAC,EAAA,CACL;AAAA,QACCR,KACG,gBAAAI,EAAC,OAAA,EAAI,WAAU,4DACV,UAAA;AAAA,UAAAf,sBAAa,SAAA,EAAM,WAAU,6BAA6B,UAAAA,GAAU,sBAAY,OAAA,CAAA,CAAI;AAAA,UACpFC,sBAAc,SAAA,EAAM,WAAU,6BAA6B,UAAAA,EAAA,CAAW,sBAAY,OAAA,CAAA,CAAI;AAAA,QAAA,EAAA,CAC3F;AAAA,MAAA,GAER;AAAA,MACCE,KAAgB,gBAAAa,EAAC,OAAA,EAAI,WAAWF,GAA6B,UAAAX,EAAA,CAAa;AAAA,IAAA,EAAA,CAC/E;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"FeedbackRating.js","sources":["../../../src/components/feedback/FeedbackRating.tsx"],"sourcesContent":["import React, { type ComponentProps, useState } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport ToggleButton from '../button/ToggleButton';\nimport type { BUTTON_SIZE, BUTTON_STYLE, BUTTON_VARIANT } from '../button/Button';\n\ntype FeedbackRatingProps = ComponentProps<'div'> & {\n    /**\n     * Optional headline\n     */\n    headline?: React.ReactNode;\n\n    /**\n     * The amount of toggle buttons used to rate.\n     *\n     * @default 1\n     */\n    count: number;\n\n    /**\n     * Defines whether the buttons are round.\n     *\n     * @default false\n     */\n    circleButtons?: boolean;\n\n    /**\n     * Optional class names applied to all the buttons.\n     * If you need more control on styling individual buttons, see `buttonStyles`.\n     */\n    buttonClassName?: string;\n\n    /**\n     * Array of button labels that will be used instead of the index.\n     * There needs to be a label for each button defined.\n     */\n    buttonLabels?: React.ReactNode[];\n\n    /**\n     * Array of button styles to individually define the button size, style and variant.\n     * There needs to be a item for each button defined.\n     */\n    buttonStyles?: { bsSize?: BUTTON_SIZE; bsStyle?: BUTTON_STYLE; variant?: BUTTON_VARIANT; className?: string }[];\n\n    /**\n     * Left aligned label to name the lowest rating option.\n     */\n    leftLabel?: React.ReactNode;\n\n    /**\n     * Right aligned label to name the highest rating option.\n     */\n    rightLabel?: React.ReactNode;\n\n    /**\n     * Additional icon placed in front of the rating buttons.\n     */\n    leadingIcon?: React.ReactNode;\n\n    /**\n     * Additional icon placed after the rating buttons.\n     */\n    trailingIcon?: React.ReactNode;\n\n    /**\n     * Callback triggered when the rating changes.\n     *\n     * @param rating The rating value. Undefined, when a toggle is unchecked.\n     * @returns\n     */\n    onRatingChanged?: (rating: number | undefined) => void;\n};\n\nconst FeedbackRating = (props: FeedbackRatingProps) => {\n    const {\n        headline,\n        count = 1,\n        circleButtons = false,\n        buttonLabels,\n        buttonStyles,\n        buttonClassName = '',\n        leftLabel,\n        rightLabel,\n        leadingIcon,\n        trailingIcon,\n        onRatingChanged = () => {},\n        ...remainingProps\n    } = props;\n\n    const [rating, setRating] = useState<number>();\n\n    const handleRating = (value: number | undefined) => {\n        setRating(value);\n        onRatingChanged(value);\n    };\n\n    const hasSubLabels = !!leftLabel || !!rightLabel;\n\n    const buttonWrapperClasses = classNames(\n        'display-flex gap-10',\n        hasSubLabels ? 'align-items-start' : 'align-items-center',\n        'text-size-14',\n        'margin-bottom-25'\n    );\n\n    const leadingTrailingIconClasses = classNames(\n        'display-flex align-items-center',\n        'text-size-200pct',\n        hasSubLabels && 'padding-top-3'\n    );\n\n    return (\n        <div {...remainingProps} className='FeedbackRating'>\n            {headline && <div className='text-medium text-size-16 margin-bottom-10'>{headline}</div>}\n            <div className={buttonWrapperClasses}>\n                {leadingIcon && <div className={leadingTrailingIconClasses}>{leadingIcon}</div>}\n                <div>\n                    <div className='display-flex flex-wrap gap-10'>\n                        {Array.from({ length: count }, (_, index) => {\n                            const indexNumber = index + 1;\n                            return (\n                                <ToggleButton\n                                    {...buttonStyles?.[index]}\n                                    key={indexNumber}\n                                    active={rating === indexNumber}\n                                    onClick={(toggled: boolean) => handleRating(toggled ? indexNumber : undefined)}\n                                    className={`${circleButtons ? 'rounded-circle aspect-ratio-1' : ''} ${buttonClassName} ${buttonStyles?.[index].className ?? ''}`}\n                                >\n                                    {buttonLabels?.[index] ?? indexNumber}\n                                </ToggleButton>\n                            );\n                        })}\n                    </div>\n                    {hasSubLabels && (\n                        <div className='display-flex justify-content-between margin-top-5 gap-25'>\n                            {leftLabel ? <label className='word-wrap text-color-dark'>{leftLabel}</label> : <div />}\n                            {rightLabel ? <label className='word-wrap text-color-dark'>{rightLabel}</label> : <div />}\n                        </div>\n                    )}\n                </div>\n                {trailingIcon && <div className={leadingTrailingIconClasses}>{trailingIcon}</div>}\n            </div>\n        </div>\n    );\n};\n\nexport default FeedbackRating;\n"],"names":["FeedbackRating","props","headline","count","circleButtons","buttonLabels","buttonStyles","buttonClassName","leftLabel","rightLabel","leadingIcon","trailingIcon","onRatingChanged","remainingProps","rating","setRating","useState","handleRating","value","hasSubLabels","buttonWrapperClasses","classNames","leadingTrailingIconClasses","jsxs","jsx","_","index","indexNumber","createElement","ToggleButton","toggled"],"mappings":";;;;AAyEA,MAAMA,IAAiB,CAACC,MAA+B;AACnD,QAAM;AAAA,IACF,UAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,eAAAC,IAAgB;AAAA,IAChB,cAAAC;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAC,IAAkB;AAAA,IAClB,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAC,IAAkB,MAAM;AAAA,IAAC;AAAA,IACzB,GAAGC;AAAA,EAAA,IACHZ,GAEE,CAACa,GAAQC,CAAS,IAAIC,EAAA,GAEtBC,IAAe,CAACC,MAA8B;AAChD,IAAAH,EAAUG,CAAK,GACfN,EAAgBM,CAAK;AAAA,EACzB,GAEMC,IAAe,CAAC,CAACX,KAAa,CAAC,CAACC,GAEhCW,IAAuBC;AAAA,IACzB;AAAA,IACAF,IAAe,sBAAsB;AAAA,IACrC;AAAA,IACA;AAAA,EAAA,GAGEG,IAA6BD;AAAA,IAC/B;AAAA,IACA;AAAA,IACAF,KAAgB;AAAA,EAAA;AAGpB,SACI,gBAAAI,EAAC,OAAA,EAAK,GAAGV,GAAgB,WAAU,kBAC9B,UAAA;AAAA,IAAAX,KAAY,gBAAAsB,EAAC,OAAA,EAAI,WAAU,6CAA6C,UAAAtB,GAAS;AAAA,IAClF,gBAAAqB,EAAC,OAAA,EAAI,WAAWH,GACX,UAAA;AAAA,MAAAV,KAAe,gBAAAc,EAAC,OAAA,EAAI,WAAWF,GAA6B,UAAAZ,GAAY;AAAA,wBACxE,OAAA,EACG,UAAA;AAAA,QAAA,gBAAAc,EAAC,OAAA,EAAI,WAAU,iCACV,UAAA,MAAM,KAAK,EAAE,QAAQrB,EAAA,GAAS,CAACsB,GAAGC,MAAU;AACzC,gBAAMC,IAAcD,IAAQ;AAC5B,iBACI,gBAAAE;AAAA,YAACC;AAAA,YAAA;AAAA,cACI,GAAGvB,IAAeoB,CAAK;AAAA,cACxB,KAAKC;AAAA,cACL,QAAQb,MAAWa;AAAA,cACnB,SAAS,CAACG,MAAqBb,EAAaa,IAAUH,IAAc,MAAS;AAAA,cAC7E,WAAW,GAAGvB,IAAgB,kCAAkC,EAAE,IAAIG,CAAe,IAAID,IAAeoB,CAAK,EAAE,aAAa,EAAE;AAAA,YAAA;AAAA,YAE7HrB,IAAeqB,CAAK,KAAKC;AAAA,UAAA;AAAA,QAGtC,CAAC,EAAA,CACL;AAAA,QACCR,KACG,gBAAAI,EAAC,OAAA,EAAI,WAAU,4DACV,UAAA;AAAA,UAAAf,sBAAa,SAAA,EAAM,WAAU,6BAA6B,UAAAA,GAAU,sBAAY,OAAA,CAAA,CAAI;AAAA,UACpFC,sBAAc,SAAA,EAAM,WAAU,6BAA6B,UAAAA,EAAA,CAAW,sBAAY,OAAA,CAAA,CAAI;AAAA,QAAA,EAAA,CAC3F;AAAA,MAAA,GAER;AAAA,MACCE,KAAgB,gBAAAa,EAAC,OAAA,EAAI,WAAWF,GAA6B,UAAAX,EAAA,CAAa;AAAA,IAAA,EAAA,CAC/E;AAAA,EAAA,GACJ;AAER;"}

package/components/feedback/FeedbackReactions.js

@@ -1,7 +1,7 @@
 import { jsxs as f, jsx as l } from "react/jsx-runtime";
 import { useRef as C } from "react";
-import u from "classnames";
 import { motion as y } from "motion/react";
+import u from "../../utils/classNames.js";
 import v from "../../hooks/useHover.js";
 const z = (m) => {
   const {

package/components/feedback/FeedbackReactions.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeedbackReactions.js","sources":["../../../src/components/feedback/FeedbackReactions.tsx"],"sourcesContent":["import React, { type ComponentProps, useRef } from 'react';\nimport classNames from 'classnames';\nimport { motion } from 'motion/react';\n\nimport useHover from '../../hooks/useHover';\n\ntype FeedbackReactionsProps = ComponentProps<'div'> & {\n    /**\n     * Optional headline inlined with the buttons.\n     */\n    headline?: React.ReactNode;\n\n    /**\n     * Size of the reaction buttons.\n     *\n     * @default 'md'\n     */\n    size?: 'sm' | 'md';\n\n    /**\n     * Position of the reaction button labels.\n     *\n     * @default 'bottom'\n     */\n    labelPosition?: 'right' | 'bottom';\n\n    /**\n     * Label for the up button.\n     */\n    labelUp?: React.ReactNode;\n\n    /**\n     * Label for the down button.\n     */\n    labelDown?: React.ReactNode;\n\n    /**\n     * Custom fill color for the up button.\n     *\n     * @default 'bg-lightest'\n     */\n    colorFillUp?: string;\n\n    /**\n     * Custom fill color for the down button.\n     *\n     * @default 'bg-lightest'\n     */\n    colorFillDown?: string;\n\n    /**\n     * Custom hover color for the up button.\n     *\n     * @default 'primary'\n     */\n    colorHoverUp?: string;\n\n    /**\n     * Custom hover color for the down button.\n     *\n     * @default 'primary'\n     */\n    colorHoverDown?: string;\n\n    /**\n     * Callback function triggered on up vote.\n     */\n    onVoteUp?: VoidFunction;\n\n    /**\n     * Callback function triggered on down vote.\n     */\n    onVoteDown?: VoidFunction;\n\n    /**\n     * Additional classes applied to the individual reaction item (button and label).\n     */\n    itemClassName?: string;\n\n    /**\n     * Defines whether the reaction icon is animated.\n     *\n     * @default false\n     */\n    animated?: boolean;\n};\n\nconst FeedbackReactions = (props: FeedbackReactionsProps) => {\n    const {\n        headline,\n        animated,\n        labelUp,\n        labelDown,\n        labelPosition = 'bottom',\n        size = 'md',\n        colorFillUp = '',\n        colorFillDown = '',\n        colorHoverUp = 'primary',\n        colorHoverDown = 'primary',\n        onVoteUp = () => {},\n        onVoteDown = () => {},\n        itemClassName,\n        ...remainingProps\n    } = props;\n\n    const hasLabels = !!labelUp || !!labelDown;\n\n    const wrapperClassName = classNames(\n        hasLabels ? 'display-grid grid-cols-2' : 'display-flex',\n        'gap-15',\n        'padding-top-5',\n        'user-select-none'\n    );\n\n    return (\n        <div {...remainingProps} className={wrapperClassName}>\n            <FeedbackItem\n                size={size}\n                fillColor={colorFillDown}\n                hoverColor={colorHoverDown}\n                animated={animated}\n                iconName='thumbs-down'\n                text={labelDown}\n                labelPosition={labelPosition}\n                onClick={onVoteDown}\n                className={itemClassName}\n            />\n            <FeedbackItem\n                size={size}\n                fillColor={colorFillUp}\n                hoverColor={colorHoverUp}\n                animated={animated}\n                iconName='thumbs-up'\n                text={labelUp}\n                labelPosition={labelPosition}\n                onClick={onVoteUp}\n                className={itemClassName}\n            />\n        </div>\n    );\n};\n\ntype FeedbackItemProps = {\n    text?: React.ReactNode;\n    iconName: string;\n    onClick: VoidFunction;\n    fillColor: string;\n    hoverColor: string;\n    animated?: boolean;\n    labelPosition?: 'right' | 'bottom';\n    size?: 'sm' | 'md';\n    className?: string;\n};\n\nconst FeedbackItem = (props: FeedbackItemProps) => {\n    const {\n        size,\n        text,\n        iconName,\n        onClick,\n        fillColor,\n        hoverColor,\n        animated = false,\n        labelPosition = 'bottom',\n        className,\n    } = props;\n\n    const ref = useRef<HTMLDivElement>(null);\n    const isHover = useHover(ref);\n\n    const iconClasses = classNames(\n        size === 'sm' ? 'width-40' : 'width-50',\n        'aspect-ratio-1',\n        'border rounded-circle',\n        fillColor ? `bg-${fillColor} text-color-white` : 'bg-lightest',\n        isHover ? `border-color-${hoverColor} text-color-${hoverColor}` : 'border-color-lightest',\n        'display-grid place-items-center',\n        'text-size-14'\n    );\n\n    const wrapperClassName = classNames(\n        'display-flex',\n        'gap-10',\n        labelPosition === 'bottom' ? 'flex-column' : '',\n        'align-items-center',\n        'text-center',\n        'cursor-pointer',\n        className\n    );\n\n    const isUp = iconName.includes('up');\n\n    return (\n        <div ref={ref} className={wrapperClassName} onClick={onClick}>\n            <div className={iconClasses}>\n                <motion.span\n                    initial={{ y: 0, rotate: 0 }}\n                    animate={\n                        animated && isHover ? { y: [0, isUp ? -3 : 3, 0], rotate: [0, isUp ? -10 : 10, 0] } : { y: 0 }\n                    }\n                    transition={{\n                        duration: 0.6,\n                        repeat: isHover ? Number.POSITIVE_INFINITY : 0,\n                        repeatType: 'loop',\n                    }}\n                    className={`rioglyph rioglyph-${iconName} text-size-200pct`}\n                />\n            </div>\n            <div\n                className={`text-wrap-balance line-height-125rel text-medium ${isHover ? `text-color-${hoverColor}` : 'text-color-darker'}`}\n            >\n                {text}\n            </div>\n        </div>\n    );\n};\n\nexport default FeedbackReactions;\n"],"names":["FeedbackReactions","props","headline","animated","labelUp","labelDown","labelPosition","size","colorFillUp","colorFillDown","colorHoverUp","colorHoverDown","onVoteUp","onVoteDown","itemClassName","remainingProps","wrapperClassName","classNames","jsxs","jsx","FeedbackItem","text","iconName","onClick","fillColor","hoverColor","className","ref","useRef","isHover","useHover","iconClasses","isUp","motion"],"mappings":"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"}
+{"version":3,"file":"FeedbackReactions.js","sources":["../../../src/components/feedback/FeedbackReactions.tsx"],"sourcesContent":["import React, { type ComponentProps, useRef } from 'react';\nimport { motion } from 'motion/react';\n\nimport classNames from '../../utils/classNames';\nimport useHover from '../../hooks/useHover';\n\ntype FeedbackReactionsProps = ComponentProps<'div'> & {\n    /**\n     * Optional headline inlined with the buttons.\n     */\n    headline?: React.ReactNode;\n\n    /**\n     * Size of the reaction buttons.\n     *\n     * @default 'md'\n     */\n    size?: 'sm' | 'md';\n\n    /**\n     * Position of the reaction button labels.\n     *\n     * @default 'bottom'\n     */\n    labelPosition?: 'right' | 'bottom';\n\n    /**\n     * Label for the up button.\n     */\n    labelUp?: React.ReactNode;\n\n    /**\n     * Label for the down button.\n     */\n    labelDown?: React.ReactNode;\n\n    /**\n     * Custom fill color for the up button.\n     *\n     * @default 'bg-lightest'\n     */\n    colorFillUp?: string;\n\n    /**\n     * Custom fill color for the down button.\n     *\n     * @default 'bg-lightest'\n     */\n    colorFillDown?: string;\n\n    /**\n     * Custom hover color for the up button.\n     *\n     * @default 'primary'\n     */\n    colorHoverUp?: string;\n\n    /**\n     * Custom hover color for the down button.\n     *\n     * @default 'primary'\n     */\n    colorHoverDown?: string;\n\n    /**\n     * Callback function triggered on up vote.\n     */\n    onVoteUp?: VoidFunction;\n\n    /**\n     * Callback function triggered on down vote.\n     */\n    onVoteDown?: VoidFunction;\n\n    /**\n     * Additional classes applied to the individual reaction item (button and label).\n     */\n    itemClassName?: string;\n\n    /**\n     * Defines whether the reaction icon is animated.\n     *\n     * @default false\n     */\n    animated?: boolean;\n};\n\nconst FeedbackReactions = (props: FeedbackReactionsProps) => {\n    const {\n        headline,\n        animated,\n        labelUp,\n        labelDown,\n        labelPosition = 'bottom',\n        size = 'md',\n        colorFillUp = '',\n        colorFillDown = '',\n        colorHoverUp = 'primary',\n        colorHoverDown = 'primary',\n        onVoteUp = () => {},\n        onVoteDown = () => {},\n        itemClassName,\n        ...remainingProps\n    } = props;\n\n    const hasLabels = !!labelUp || !!labelDown;\n\n    const wrapperClassName = classNames(\n        hasLabels ? 'display-grid grid-cols-2' : 'display-flex',\n        'gap-15',\n        'padding-top-5',\n        'user-select-none'\n    );\n\n    return (\n        <div {...remainingProps} className={wrapperClassName}>\n            <FeedbackItem\n                size={size}\n                fillColor={colorFillDown}\n                hoverColor={colorHoverDown}\n                animated={animated}\n                iconName='thumbs-down'\n                text={labelDown}\n                labelPosition={labelPosition}\n                onClick={onVoteDown}\n                className={itemClassName}\n            />\n            <FeedbackItem\n                size={size}\n                fillColor={colorFillUp}\n                hoverColor={colorHoverUp}\n                animated={animated}\n                iconName='thumbs-up'\n                text={labelUp}\n                labelPosition={labelPosition}\n                onClick={onVoteUp}\n                className={itemClassName}\n            />\n        </div>\n    );\n};\n\ntype FeedbackItemProps = {\n    text?: React.ReactNode;\n    iconName: string;\n    onClick: VoidFunction;\n    fillColor: string;\n    hoverColor: string;\n    animated?: boolean;\n    labelPosition?: 'right' | 'bottom';\n    size?: 'sm' | 'md';\n    className?: string;\n};\n\nconst FeedbackItem = (props: FeedbackItemProps) => {\n    const {\n        size,\n        text,\n        iconName,\n        onClick,\n        fillColor,\n        hoverColor,\n        animated = false,\n        labelPosition = 'bottom',\n        className,\n    } = props;\n\n    const ref = useRef<HTMLDivElement>(null);\n    const isHover = useHover(ref);\n\n    const iconClasses = classNames(\n        size === 'sm' ? 'width-40' : 'width-50',\n        'aspect-ratio-1',\n        'border rounded-circle',\n        fillColor ? `bg-${fillColor} text-color-white` : 'bg-lightest',\n        isHover ? `border-color-${hoverColor} text-color-${hoverColor}` : 'border-color-lightest',\n        'display-grid place-items-center',\n        'text-size-14'\n    );\n\n    const wrapperClassName = classNames(\n        'display-flex',\n        'gap-10',\n        labelPosition === 'bottom' ? 'flex-column' : '',\n        'align-items-center',\n        'text-center',\n        'cursor-pointer',\n        className\n    );\n\n    const isUp = iconName.includes('up');\n\n    return (\n        <div ref={ref} className={wrapperClassName} onClick={onClick}>\n            <div className={iconClasses}>\n                <motion.span\n                    initial={{ y: 0, rotate: 0 }}\n                    animate={\n                        animated && isHover ? { y: [0, isUp ? -3 : 3, 0], rotate: [0, isUp ? -10 : 10, 0] } : { y: 0 }\n                    }\n                    transition={{\n                        duration: 0.6,\n                        repeat: isHover ? Number.POSITIVE_INFINITY : 0,\n                        repeatType: 'loop',\n                    }}\n                    className={`rioglyph rioglyph-${iconName} text-size-200pct`}\n                />\n            </div>\n            <div\n                className={`text-wrap-balance line-height-125rel text-medium ${isHover ? `text-color-${hoverColor}` : 'text-color-darker'}`}\n            >\n                {text}\n            </div>\n        </div>\n    );\n};\n\nexport default FeedbackReactions;\n"],"names":["FeedbackReactions","props","headline","animated","labelUp","labelDown","labelPosition","size","colorFillUp","colorFillDown","colorHoverUp","colorHoverDown","onVoteUp","onVoteDown","itemClassName","remainingProps","wrapperClassName","classNames","jsxs","jsx","FeedbackItem","text","iconName","onClick","fillColor","hoverColor","className","ref","useRef","isHover","useHover","iconClasses","isUp","motion"],"mappings":"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"}

package/components/formLabel/FormLabel.js

@@ -1,6 +1,6 @@
 import { jsxs as p, jsx as r } from "react/jsx-runtime";
 import { useRef as d, useState as g, useEffect as b } from "react";
-import a from "classnames";
+import a from "../../utils/classNames.js";
 const w = (f) => {
   const { className: l = "", children: o, supportingText: e, ...n } = f, i = d(null), [t, c] = g(null), u = "htmlFor" in n;
   b(() => {
@@ -22,13 +22,10 @@ const w = (f) => {
       e && "display-inline-flex flex-wrap justify-content-between width-100pct",
       l
     );
-    return (
-      // biome-ignore lint/a11y/noLabelWithoutControl: <explanation>
-      /* @__PURE__ */ p("label", { ref: i, ...n, className: s, children: [
-        /* @__PURE__ */ r("span", { children: o }),
-        e && /* @__PURE__ */ r("span", { className: m, children: e })
-      ] })
-    );
+    return /* @__PURE__ */ p("label", { ref: i, ...n, className: s, children: [
+      /* @__PURE__ */ r("span", { children: o }),
+      e && /* @__PURE__ */ r("span", { className: m, children: e })
+    ] });
   }
   const x = a(
     "text-color-dark",
@@ -42,7 +39,7 @@ const w = (f) => {
     l
   );
   return (
-    // @ts-ignore
+    // @ts-expect-error
     /* @__PURE__ */ p("div", { ref: i, ...n, className: x, children: [
       o,
       e && /* @__PURE__ */ r("span", { className: m, children: e })

package/components/formLabel/FormLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.js","sources":["../../../src/components/formLabel/FormLabel.tsx"],"sourcesContent":["import React, { type PropsWithChildren, type ComponentProps, useEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\n\nexport type FormLabelProps = ComponentProps<'label'> & {\n    /**\n     * Additional supporting text displayed next to the label.\n     */\n    supportingText?: string | React.ReactElement;\n\n    /**\n     * Additional classes set to the outer element.\n     */\n    className?: string;\n};\n\nconst FormLabel = (props: PropsWithChildren<FormLabelProps>) => {\n    const { className = '', children, supportingText, ...remainingProps } = props;\n\n    const elementRef = useRef<HTMLDivElement | HTMLLabelElement>(null);\n\n    const [parentSize, setParentSize] = useState<'lg' | 'sm' | null>(null);\n\n    const isLabel = 'htmlFor' in remainingProps;\n\n    useEffect(() => {\n        if (!elementRef.current) {\n            return;\n        }\n\n        const parent = elementRef.current.parentElement;\n        if (!parent) {\n            return;\n        }\n\n        if (parent.classList.contains('form-group-lg')) {\n            setParentSize('lg');\n        } else if (parent.classList.contains('form-group-sm')) {\n            setParentSize('sm');\n        }\n    }, []);\n\n    const supportingTextClasses = classNames(\n        'text-color-gray',\n        typeof supportingText === 'string' && 'text-italic',\n        parentSize === 'sm' && 'text-size-10',\n        parentSize === 'lg' && 'text-size-14',\n        !parentSize && 'text-size-12'\n    );\n\n    if (isLabel && remainingProps.htmlFor) {\n        const labelClasses = classNames(\n            !supportingText && 'display-inline-block',\n            supportingText && 'display-inline-flex flex-wrap justify-content-between width-100pct',\n            className\n        );\n\n        return (\n            // biome-ignore lint/a11y/noLabelWithoutControl: <explanation>\n            <label ref={elementRef as React.RefObject<HTMLLabelElement>} {...remainingProps} className={labelClasses}>\n                <span>{children}</span>\n                {supportingText && <span className={supportingTextClasses}>{supportingText}</span>}\n            </label>\n        );\n    }\n\n    const classes = classNames(\n        'text-color-dark',\n        'max-width-100pct',\n        parentSize === 'sm' && 'text-size-10',\n        parentSize === 'lg' && 'text-size-14',\n        !parentSize && 'text-size-12',\n        !supportingText && 'display-inline-block',\n        supportingText && 'display-inline-flex flex-wrap justify-content-between width-100pct',\n        !className.includes('margin-bottom') && 'margin-bottom-5',\n        className\n    );\n\n    return (\n        // @ts-ignore\n        <div ref={elementRef} {...remainingProps} className={classes}>\n            {children}\n            {supportingText && <span className={supportingTextClasses}>{supportingText}</span>}\n        </div>\n    );\n};\n\nexport default FormLabel;\n"],"names":["FormLabel","props","className","children","supportingText","remainingProps","elementRef","useRef","parentSize","setParentSize","useState","isLabel","useEffect","parent","supportingTextClasses","classNames","labelClasses","jsx","classes"],"mappings":";;;AAeA,MAAMA,IAAY,CAACC,MAA6C;AAC5D,QAAM,EAAE,WAAAC,IAAY,IAAI,UAAAC,GAAU,gBAAAC,GAAgB,GAAGC,MAAmBJ,GAElEK,IAAaC,EAA0C,IAAI,GAE3D,CAACC,GAAYC,CAAa,IAAIC,EAA6B,IAAI,GAE/DC,IAAU,aAAaN;AAE7B,EAAAO,EAAU,MAAM;AACZ,QAAI,CAACN,EAAW;AACZ;AAGJ,UAAMO,IAASP,EAAW,QAAQ;AAClC,IAAKO,MAIDA,EAAO,UAAU,SAAS,eAAe,IACzCJ,EAAc,IAAI,IACXI,EAAO,UAAU,SAAS,eAAe,KAChDJ,EAAc,IAAI;AAAA,EAE1B,GAAG,CAAA,CAAE;AAEL,QAAMK,IAAwBC;AAAA,IAC1B;AAAA,IACA,OAAOX,KAAmB,YAAY;AAAA,IACtCI,MAAe,QAAQ;AAAA,IACvBA,MAAe,QAAQ;AAAA,IACvB,CAACA,KAAc;AAAA,EAAA;AAGnB,MAAIG,KAAWN,EAAe,SAAS;AACnC,UAAMW,IAAeD;AAAA,MACjB,CAACX,KAAkB;AAAA,MACnBA,KAAkB;AAAA,MAClBF;AAAA,IAAA;AAGJ;AAAA;AAAA,wBAEK,SAAA,EAAM,KAAKI,GAAkD,GAAGD,GAAgB,WAAWW,GACxF,UAAA;AAAA,QAAA,gBAAAC,EAAC,UAAM,UAAAd,GAAS;AAAA,QACfC,KAAkB,gBAAAa,EAAC,QAAA,EAAK,WAAWH,GAAwB,UAAAV,EAAA,CAAe;AAAA,MAAA,EAAA,CAC/E;AAAA;AAAA,EAER;AAEA,QAAMc,IAAUH;AAAA,IACZ;AAAA,IACA;AAAA,IACAP,MAAe,QAAQ;AAAA,IACvBA,MAAe,QAAQ;AAAA,IACvB,CAACA,KAAc;AAAA,IACf,CAACJ,KAAkB;AAAA,IACnBA,KAAkB;AAAA,IAClB,CAACF,EAAU,SAAS,eAAe,KAAK;AAAA,IACxCA;AAAA,EAAA;AAGJ;AAAA;AAAA,sBAEK,OAAA,EAAI,KAAKI,GAAa,GAAGD,GAAgB,WAAWa,GAChD,UAAA;AAAA,MAAAf;AAAA,MACAC,KAAkB,gBAAAa,EAAC,QAAA,EAAK,WAAWH,GAAwB,UAAAV,EAAA,CAAe;AAAA,IAAA,EAAA,CAC/E;AAAA;AAER;"}
+{"version":3,"file":"FormLabel.js","sources":["../../../src/components/formLabel/FormLabel.tsx"],"sourcesContent":["import React, { type PropsWithChildren, type ComponentProps, useEffect, useRef, useState } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type FormLabelProps = ComponentProps<'label'> & {\n    /**\n     * Additional supporting text displayed next to the label.\n     */\n    supportingText?: string | React.ReactElement;\n\n    /**\n     * Additional classes set to the outer element.\n     */\n    className?: string;\n};\n\nconst FormLabel = (props: PropsWithChildren<FormLabelProps>) => {\n    const { className = '', children, supportingText, ...remainingProps } = props;\n\n    const elementRef = useRef<HTMLDivElement | HTMLLabelElement>(null);\n\n    const [parentSize, setParentSize] = useState<'lg' | 'sm' | null>(null);\n\n    const isLabel = 'htmlFor' in remainingProps;\n\n    useEffect(() => {\n        if (!elementRef.current) {\n            return;\n        }\n\n        const parent = elementRef.current.parentElement;\n        if (!parent) {\n            return;\n        }\n\n        if (parent.classList.contains('form-group-lg')) {\n            setParentSize('lg');\n        } else if (parent.classList.contains('form-group-sm')) {\n            setParentSize('sm');\n        }\n    }, []);\n\n    const supportingTextClasses = classNames(\n        'text-color-gray',\n        typeof supportingText === 'string' && 'text-italic',\n        parentSize === 'sm' && 'text-size-10',\n        parentSize === 'lg' && 'text-size-14',\n        !parentSize && 'text-size-12'\n    );\n\n    if (isLabel && remainingProps.htmlFor) {\n        const labelClasses = classNames(\n            !supportingText && 'display-inline-block',\n            supportingText && 'display-inline-flex flex-wrap justify-content-between width-100pct',\n            className\n        );\n\n        return (\n            <label ref={elementRef as React.RefObject<HTMLLabelElement>} {...remainingProps} className={labelClasses}>\n                <span>{children}</span>\n                {supportingText && <span className={supportingTextClasses}>{supportingText}</span>}\n            </label>\n        );\n    }\n\n    const classes = classNames(\n        'text-color-dark',\n        'max-width-100pct',\n        parentSize === 'sm' && 'text-size-10',\n        parentSize === 'lg' && 'text-size-14',\n        !parentSize && 'text-size-12',\n        !supportingText && 'display-inline-block',\n        supportingText && 'display-inline-flex flex-wrap justify-content-between width-100pct',\n        !className.includes('margin-bottom') && 'margin-bottom-5',\n        className\n    );\n\n    return (\n        // @ts-expect-error\n        <div ref={elementRef} {...remainingProps} className={classes}>\n            {children}\n            {supportingText && <span className={supportingTextClasses}>{supportingText}</span>}\n        </div>\n    );\n};\n\nexport default FormLabel;\n"],"names":["FormLabel","props","className","children","supportingText","remainingProps","elementRef","useRef","parentSize","setParentSize","useState","isLabel","useEffect","parent","supportingTextClasses","classNames","labelClasses","jsx","classes"],"mappings":";;;AAgBA,MAAMA,IAAY,CAACC,MAA6C;AAC5D,QAAM,EAAE,WAAAC,IAAY,IAAI,UAAAC,GAAU,gBAAAC,GAAgB,GAAGC,MAAmBJ,GAElEK,IAAaC,EAA0C,IAAI,GAE3D,CAACC,GAAYC,CAAa,IAAIC,EAA6B,IAAI,GAE/DC,IAAU,aAAaN;AAE7B,EAAAO,EAAU,MAAM;AACZ,QAAI,CAACN,EAAW;AACZ;AAGJ,UAAMO,IAASP,EAAW,QAAQ;AAClC,IAAKO,MAIDA,EAAO,UAAU,SAAS,eAAe,IACzCJ,EAAc,IAAI,IACXI,EAAO,UAAU,SAAS,eAAe,KAChDJ,EAAc,IAAI;AAAA,EAE1B,GAAG,CAAA,CAAE;AAEL,QAAMK,IAAwBC;AAAA,IAC1B;AAAA,IACA,OAAOX,KAAmB,YAAY;AAAA,IACtCI,MAAe,QAAQ;AAAA,IACvBA,MAAe,QAAQ;AAAA,IACvB,CAACA,KAAc;AAAA,EAAA;AAGnB,MAAIG,KAAWN,EAAe,SAAS;AACnC,UAAMW,IAAeD;AAAA,MACjB,CAACX,KAAkB;AAAA,MACnBA,KAAkB;AAAA,MAClBF;AAAA,IAAA;AAGJ,6BACK,SAAA,EAAM,KAAKI,GAAkD,GAAGD,GAAgB,WAAWW,GACxF,UAAA;AAAA,MAAA,gBAAAC,EAAC,UAAM,UAAAd,GAAS;AAAA,MACfC,KAAkB,gBAAAa,EAAC,QAAA,EAAK,WAAWH,GAAwB,UAAAV,EAAA,CAAe;AAAA,IAAA,GAC/E;AAAA,EAER;AAEA,QAAMc,IAAUH;AAAA,IACZ;AAAA,IACA;AAAA,IACAP,MAAe,QAAQ;AAAA,IACvBA,MAAe,QAAQ;AAAA,IACvB,CAACA,KAAc;AAAA,IACf,CAACJ,KAAkB;AAAA,IACnBA,KAAkB;AAAA,IAClB,CAACF,EAAU,SAAS,eAAe,KAAK;AAAA,IACxCA;AAAA,EAAA;AAGJ;AAAA;AAAA,sBAEK,OAAA,EAAI,KAAKI,GAAa,GAAGD,GAAgB,WAAWa,GAChD,UAAA;AAAA,MAAAf;AAAA,MACAC,KAAkB,gBAAAa,EAAC,QAAA,EAAK,WAAWH,GAAwB,UAAAV,EAAA,CAAe;AAAA,IAAA,EAAA,CAC/E;AAAA;AAER;"}

package/components/formLabel/LabeledElement.js

@@ -1,5 +1,5 @@
 import { jsxs as d, jsx as p } from "react/jsx-runtime";
-import e from "classnames";
+import e from "../../utils/classNames.js";
 import f from "./FormLabel.js";
 const L = (l) => {
   const { label: a, htmlFor: s, labelProps: m = {}, noGap: o = !1, className: r = "", children: n, ...t } = l, { className: c, ...i } = m, b = e(c, o && "margin-bottom-0");

package/components/formLabel/LabeledElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"LabeledElement.js","sources":["../../../src/components/formLabel/LabeledElement.tsx"],"sourcesContent":["import type React from 'react';\nimport type { PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nimport FormLabel, { type FormLabelProps } from './FormLabel';\n\nexport type LabeledElementProps = {\n    /**\n     * The text to display for the label.\n     */\n    label: string | React.ReactElement;\n\n    /**\n     * Optional ID of the element associated with the label.\n     */\n    htmlFor?: string;\n\n    /**\n     * Additional props for the FormLabel, excluding children and htmlFor.\n     */\n    labelProps?: Omit<FormLabelProps, 'children'>;\n\n    /**\n     * If true, removes the bottom margin from the label.\n     *\n     * @default false\n     */\n    noGap?: boolean;\n\n    /**\n     * Additional classes for styling the wrapper.\n     */\n    className?: string;\n};\n\nconst LabeledElement = (props: PropsWithChildren<LabeledElementProps>) => {\n    const { label, htmlFor, labelProps = {}, noGap = false, className = '', children, ...remainingProps } = props;\n\n    // Extract and handle the `className` prop separately for the label\n    const { className: labelClassName, ...otherLabelProps } = labelProps;\n    const combinedLabelClassName = classNames(labelClassName, noGap && 'margin-bottom-0');\n\n    return (\n        <div {...remainingProps} className={classNames('LabeledElement display-flex flex-column', className)}>\n            <FormLabel htmlFor={htmlFor} {...otherLabelProps} className={combinedLabelClassName}>\n                {label}\n            </FormLabel>\n            {children}\n        </div>\n    );\n};\n\nexport default LabeledElement;\n"],"names":["LabeledElement","props","label","htmlFor","labelProps","noGap","className","children","remainingProps","labelClassName","otherLabelProps","combinedLabelClassName","classNames","jsxs","jsx","FormLabel"],"mappings":";;;AAmCA,MAAMA,IAAiB,CAACC,MAAkD;AACtE,QAAM,EAAE,OAAAC,GAAO,SAAAC,GAAS,YAAAC,IAAa,CAAA,GAAI,OAAAC,IAAQ,IAAO,WAAAC,IAAY,IAAI,UAAAC,GAAU,GAAGC,MAAmBP,GAGlG,EAAE,WAAWQ,GAAgB,GAAGC,MAAoBN,GACpDO,IAAyBC,EAAWH,GAAgBJ,KAAS,iBAAiB;AAEpF,SACI,gBAAAQ,EAAC,SAAK,GAAGL,GAAgB,WAAWI,EAAW,2CAA2CN,CAAS,GAC/F,UAAA;AAAA,IAAA,gBAAAQ,EAACC,KAAU,SAAAZ,GAAmB,GAAGO,GAAiB,WAAWC,GACxD,UAAAT,GACL;AAAA,IACCK;AAAA,EAAA,GACL;AAER;"}
+{"version":3,"file":"LabeledElement.js","sources":["../../../src/components/formLabel/LabeledElement.tsx"],"sourcesContent":["import type React from 'react';\nimport type { PropsWithChildren } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport FormLabel, { type FormLabelProps } from './FormLabel';\n\nexport type LabeledElementProps = {\n    /**\n     * The text to display for the label.\n     */\n    label: string | React.ReactElement;\n\n    /**\n     * Optional ID of the element associated with the label.\n     */\n    htmlFor?: string;\n\n    /**\n     * Additional props for the FormLabel, excluding children and htmlFor.\n     */\n    labelProps?: Omit<FormLabelProps, 'children'>;\n\n    /**\n     * If true, removes the bottom margin from the label.\n     *\n     * @default false\n     */\n    noGap?: boolean;\n\n    /**\n     * Additional classes for styling the wrapper.\n     */\n    className?: string;\n};\n\nconst LabeledElement = (props: PropsWithChildren<LabeledElementProps>) => {\n    const { label, htmlFor, labelProps = {}, noGap = false, className = '', children, ...remainingProps } = props;\n\n    // Extract and handle the `className` prop separately for the label\n    const { className: labelClassName, ...otherLabelProps } = labelProps;\n    const combinedLabelClassName = classNames(labelClassName, noGap && 'margin-bottom-0');\n\n    return (\n        <div {...remainingProps} className={classNames('LabeledElement display-flex flex-column', className)}>\n            <FormLabel htmlFor={htmlFor} {...otherLabelProps} className={combinedLabelClassName}>\n                {label}\n            </FormLabel>\n            {children}\n        </div>\n    );\n};\n\nexport default LabeledElement;\n"],"names":["LabeledElement","props","label","htmlFor","labelProps","noGap","className","children","remainingProps","labelClassName","otherLabelProps","combinedLabelClassName","classNames","jsxs","jsx","FormLabel"],"mappings":";;;AAmCA,MAAMA,IAAiB,CAACC,MAAkD;AACtE,QAAM,EAAE,OAAAC,GAAO,SAAAC,GAAS,YAAAC,IAAa,CAAA,GAAI,OAAAC,IAAQ,IAAO,WAAAC,IAAY,IAAI,UAAAC,GAAU,GAAGC,MAAmBP,GAGlG,EAAE,WAAWQ,GAAgB,GAAGC,MAAoBN,GACpDO,IAAyBC,EAAWH,GAAgBJ,KAAS,iBAAiB;AAEpF,SACI,gBAAAQ,EAAC,SAAK,GAAGL,GAAgB,WAAWI,EAAW,2CAA2CN,CAAS,GAC/F,UAAA;AAAA,IAAA,gBAAAQ,EAACC,KAAU,SAAAZ,GAAmB,GAAGO,GAAiB,WAAWC,GACxD,UAAAT,GACL;AAAA,IACCK;AAAA,EAAA,GACL;AAER;"}

package/components/listMenu/ListMenu.js

@@ -1,7 +1,7 @@
 import { jsxs as u, jsx as t } from "react/jsx-runtime";
 import { useState as i, useRef as b, useEffect as x } from "react";
 import { isEmpty as _ } from "es-toolkit/compat";
-import j from "classnames";
+import j from "../../utils/classNames.js";
 import A from "../../hooks/useEffectOnce.js";
 import D from "../clearableInput/ClearableInput.js";
 import G from "../expander/ExpanderPanel.js";
@@ -87,10 +87,7 @@ const J = 10, Q = 580, U = (n, s, r) => n.map((o) => ({
       h && h
     ] }) }),
     !Y(I) && /* @__PURE__ */ t("div", { className: "padding-top-25 text-center text-color-gray", children: L }),
-    I.map((e, p) => (
-      // biome-ignore lint/suspicious/noArrayIndexKey: using a random key would re-render the list every time the parent updates
-      /* @__PURE__ */ t(V, { className: k, menuGroup: e }, p)
-    ))
+    I.map((e, p) => /* @__PURE__ */ t(V, { className: k, menuGroup: e }, p))
   ] });
   return f && T ? /* @__PURE__ */ t(
     G,

package/components/listMenu/ListMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListMenu.js","sources":["../../../src/components/listMenu/ListMenu.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState, type MouseEvent, type ReactNode } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\nimport classNames from 'classnames';\n\nimport useEffectOnce from '../../hooks/useEffectOnce';\nimport ClearableInput from '../clearableInput/ClearableInput';\nimport ExpanderPanel from '../expander/ExpanderPanel';\nimport ListMenuGroup, { type ListMenuNavItem, type ListMenuItem } from './ListMenuGroup';\nimport useEsc from '../../hooks/useEsc';\nimport useWindowResize from '../../hooks/useWindowResize';\nimport useKey from '../../hooks/useKey';\nimport { debounce } from 'es-toolkit/function';\n\nexport type { ListMenuNavItem, ListMenuItem } from './ListMenuGroup';\n\nconst RESIZE_THROTTLING = 10;\nconst MOBILE_MAX_WIDTH = 580;\n\nconst filterMenuItems = <T extends ListMenuNavItem>(\n    items: ListMenuItem<T>[],\n    value: string,\n    filterKey: keyof T\n): ListMenuItem<T>[] =>\n    items.map(item => ({\n        ...item,\n        navItems: item.navItems.filter(navItem =>\n            (navItem[filterKey] as string).toLowerCase().includes(value.toLowerCase())\n        ),\n    }));\n\nconst hasMenuItems = <T extends ListMenuNavItem>(items: ListMenuItem<T>[]) =>\n    items.find(({ navItems }) => !isEmpty(navItems));\n\nexport type ListMenuProps<T extends ListMenuNavItem> = {\n    /**\n     * List of menu item groups to be shown.\n     */\n    menuItems: ListMenuItem<T>[];\n\n    /**\n     * Enables the filter.\n     *\n     * @default false\n     */\n    enableFilter?: boolean;\n\n    /**\n     * Focus the filter input.\n     *\n     * @default false\n     */\n    focusFilter?: boolean;\n\n    /**\n     * Define the attribute key for filtering.\n     *\n     * @default 'key'\n     */\n    filterKey?: keyof T;\n\n    /**\n     * The placeholder text for the filter input.\n     */\n    filterPlaceholder?: string;\n\n    /**\n     * Gets called when the filter input changes.\n     *\n     * @param value\n     * @returns\n     */\n    onFilterChange?: (value: string) => void;\n\n    /**\n     * A localized message to be shown when the filter result is empty.\n     */\n    notFoundMessage?: string | ReactNode;\n\n    /**\n     * The menu uses collapses on smaller screens using an expander panel.\n     *\n     * @default true\n     */\n    responsive?: boolean;\n\n    /**\n     * Enables automatic closing of the expander panel.\n     *\n     * Only relevant when using the `responsive` flag. Note: Make sure to not stop the events from bubbling up when\n     * clicking on a list item!\n     *\n     * Using `event.stopPropagation()` will prevent the panel from closing.\n     *\n     * @default true\n     */\n    autoClose?: boolean;\n\n    /**\n     * Additional classes to be set on the menu group element.\n     */\n    groupClassName?: string;\n\n    /**\n     * Additional addon for the input group.\n     */\n    trailingInputAddon?: React.ReactNode;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\nconst ListMenu = <T extends ListMenuNavItem>(props: ListMenuProps<T>) => {\n    const {\n        menuItems,\n        focusFilter = false,\n        enableFilter = false,\n        filterPlaceholder,\n        onFilterChange = () => {},\n        notFoundMessage,\n        className = '',\n        groupClassName = '',\n        responsive = true,\n        autoClose = true,\n        filterKey = 'key',\n        trailingInputAddon,\n        ...remainingProps\n    } = props;\n\n    const [filterValue, setFilterValue] = useState('');\n    const [isMobileMode, setIsMobileMode] = useState(false);\n    const [isExpanderOpen, setIsExpanderOpen] = useState(false);\n    const [mobileHeader, setMobileHeader] = useState<ReactNode>('');\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const listRef = useRef<HTMLDivElement>(null);\n\n    const buildMobileHeader = () => {\n        if (responsive && listRef.current) {\n            const [activeElement] = listRef.current.getElementsByClassName('active') as HTMLCollectionOf<HTMLElement>;\n            setMobileHeader(\n                <div className='display-flex align-items-center'>\n                    <span className='rioglyph rioglyph-menu-hamburger margin-right-10' />\n                    <span>{activeElement?.innerText}</span>\n                </div>\n            );\n        }\n    };\n\n    // clear filter input on esc\n    useEsc(() => {\n        if (enableFilter && inputRef.current === document.activeElement) {\n            setFilterValue('');\n        }\n    });\n\n    // Convert the menu to an expandable panel for smaller screens\n    const handleMobileSize = debounce(() => {\n        buildMobileHeader();\n        setIsMobileMode(window.innerWidth < MOBILE_MAX_WIDTH);\n    }, RESIZE_THROTTLING);\n\n    // Render a dropdown menu on mobile on mount\n    useEffect(handleMobileSize, []);\n\n    useWindowResize(handleMobileSize);\n\n    const focusInput = () => {\n        inputRef.current?.focus();\n    };\n\n    useKey((event: KeyboardEvent) => {\n        if ((event.metaKey || event.ctrlKey) && event.key === 'k') {\n            event.preventDefault();\n            focusInput();\n        }\n    });\n\n    // Focus filter input if requested\n    useEffectOnce(() => {\n        focusFilter && focusInput();\n    });\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>\n    useEffect(() => buildMobileHeader, [menuItems]);\n\n    const handleClear = () => focusFilter && focusInput();\n\n    const handleFilterChange = (value: string) => {\n        setFilterValue(value);\n        onFilterChange(value);\n    };\n\n    const filteredMenuItems = filterMenuItems(menuItems, filterValue, filterKey);\n\n    const handleExpanderBodyClick = (event: MouseEvent) => {\n        const isListItem = (event.target as HTMLDivElement).parentElement?.tagName.toLowerCase() === 'li';\n        if (autoClose && isListItem) {\n            setIsExpanderOpen(false);\n        }\n    };\n\n    const formClassNames = classNames(\n        'form-group',\n        'margin-bottom-5',\n        'padding-left-15',\n        'padding-right-15',\n        'padding-bottom-15',\n        'position-sticky',\n        'top-0',\n        'z-index-1'\n    );\n\n    const listMenu = (\n        <div {...remainingProps} className={`ListMenu ${className} ${filterValue ? 'filtered' : ''}`} ref={listRef}>\n            {enableFilter && (\n                <div className={formClassNames}>\n                    <div className='input-group width-100pct'>\n                        <span className='input-group-addon'>\n                            <span className='rioglyph rioglyph-search' aria-hidden='true' />\n                        </span>\n                        <ClearableInput\n                            value={filterValue}\n                            inputRef={inputRef}\n                            placeholder={filterPlaceholder}\n                            onChange={handleFilterChange}\n                            onClear={handleClear}\n                        />\n                        {trailingInputAddon && trailingInputAddon}\n                    </div>\n                </div>\n            )}\n\n            {!hasMenuItems(filteredMenuItems) && (\n                <div className='padding-top-25 text-center text-color-gray'>{notFoundMessage}</div>\n            )}\n\n            {filteredMenuItems.map((menuGroup, index) => (\n                // biome-ignore lint/suspicious/noArrayIndexKey: using a random key would re-render the list every time the parent updates\n                <ListMenuGroup key={index} className={groupClassName} menuGroup={menuGroup} />\n            ))}\n        </div>\n    );\n\n    if (responsive && isMobileMode) {\n        return (\n            <ExpanderPanel\n                title={mobileHeader}\n                bsStyle='default'\n                open={isExpanderOpen}\n                onToggle={() => setIsExpanderOpen(!isExpanderOpen)}\n                unmountOnExit={false}\n                className='shadow-default'\n            >\n                <div onClick={handleExpanderBodyClick}>{listMenu}</div>\n            </ExpanderPanel>\n        );\n    }\n\n    return listMenu;\n};\n\nexport default ListMenu;\n"],"names":["RESIZE_THROTTLING","MOBILE_MAX_WIDTH","filterMenuItems","items","value","filterKey","item","navItem","hasMenuItems","navItems","isEmpty","ListMenu","props","menuItems","focusFilter","enableFilter","filterPlaceholder","onFilterChange","notFoundMessage","className","groupClassName","responsive","autoClose","trailingInputAddon","remainingProps","filterValue","setFilterValue","useState","isMobileMode","setIsMobileMode","isExpanderOpen","setIsExpanderOpen","mobileHeader","setMobileHeader","inputRef","useRef","listRef","buildMobileHeader","activeElement","jsxs","jsx","useEsc","handleMobileSize","debounce","useEffect","useWindowResize","focusInput","useKey","event","useEffectOnce","handleClear","handleFilterChange","filteredMenuItems","handleExpanderBodyClick","isListItem","formClassNames","classNames","listMenu","ClearableInput","menuGroup","index","ListMenuGroup","ExpanderPanel"],"mappings":"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"}
+{"version":3,"file":"ListMenu.js","sources":["../../../src/components/listMenu/ListMenu.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState, type MouseEvent, type ReactNode } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport useEffectOnce from '../../hooks/useEffectOnce';\nimport ClearableInput from '../clearableInput/ClearableInput';\nimport ExpanderPanel from '../expander/ExpanderPanel';\nimport ListMenuGroup, { type ListMenuNavItem, type ListMenuItem } from './ListMenuGroup';\nimport useEsc from '../../hooks/useEsc';\nimport useWindowResize from '../../hooks/useWindowResize';\nimport useKey from '../../hooks/useKey';\nimport { debounce } from 'es-toolkit/function';\n\nexport type { ListMenuNavItem, ListMenuItem } from './ListMenuGroup';\n\nconst RESIZE_THROTTLING = 10;\nconst MOBILE_MAX_WIDTH = 580;\n\nconst filterMenuItems = <T extends ListMenuNavItem>(\n    items: ListMenuItem<T>[],\n    value: string,\n    filterKey: keyof T\n): ListMenuItem<T>[] =>\n    items.map(item => ({\n        ...item,\n        navItems: item.navItems.filter(navItem =>\n            (navItem[filterKey] as string).toLowerCase().includes(value.toLowerCase())\n        ),\n    }));\n\nconst hasMenuItems = <T extends ListMenuNavItem>(items: ListMenuItem<T>[]) =>\n    items.find(({ navItems }) => !isEmpty(navItems));\n\nexport type ListMenuProps<T extends ListMenuNavItem> = {\n    /**\n     * List of menu item groups to be shown.\n     */\n    menuItems: ListMenuItem<T>[];\n\n    /**\n     * Enables the filter.\n     *\n     * @default false\n     */\n    enableFilter?: boolean;\n\n    /**\n     * Focus the filter input.\n     *\n     * @default false\n     */\n    focusFilter?: boolean;\n\n    /**\n     * Define the attribute key for filtering.\n     *\n     * @default 'key'\n     */\n    filterKey?: keyof T;\n\n    /**\n     * The placeholder text for the filter input.\n     */\n    filterPlaceholder?: string;\n\n    /**\n     * Gets called when the filter input changes.\n     *\n     * @param value\n     * @returns\n     */\n    onFilterChange?: (value: string) => void;\n\n    /**\n     * A localized message to be shown when the filter result is empty.\n     */\n    notFoundMessage?: string | ReactNode;\n\n    /**\n     * The menu uses collapses on smaller screens using an expander panel.\n     *\n     * @default true\n     */\n    responsive?: boolean;\n\n    /**\n     * Enables automatic closing of the expander panel.\n     *\n     * Only relevant when using the `responsive` flag. Note: Make sure to not stop the events from bubbling up when\n     * clicking on a list item!\n     *\n     * Using `event.stopPropagation()` will prevent the panel from closing.\n     *\n     * @default true\n     */\n    autoClose?: boolean;\n\n    /**\n     * Additional classes to be set on the menu group element.\n     */\n    groupClassName?: string;\n\n    /**\n     * Additional addon for the input group.\n     */\n    trailingInputAddon?: React.ReactNode;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\nconst ListMenu = <T extends ListMenuNavItem>(props: ListMenuProps<T>) => {\n    const {\n        menuItems,\n        focusFilter = false,\n        enableFilter = false,\n        filterPlaceholder,\n        onFilterChange = () => {},\n        notFoundMessage,\n        className = '',\n        groupClassName = '',\n        responsive = true,\n        autoClose = true,\n        filterKey = 'key',\n        trailingInputAddon,\n        ...remainingProps\n    } = props;\n\n    const [filterValue, setFilterValue] = useState('');\n    const [isMobileMode, setIsMobileMode] = useState(false);\n    const [isExpanderOpen, setIsExpanderOpen] = useState(false);\n    const [mobileHeader, setMobileHeader] = useState<ReactNode>('');\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const listRef = useRef<HTMLDivElement>(null);\n\n    const buildMobileHeader = () => {\n        if (responsive && listRef.current) {\n            const [activeElement] = listRef.current.getElementsByClassName('active') as HTMLCollectionOf<HTMLElement>;\n            setMobileHeader(\n                <div className='display-flex align-items-center'>\n                    <span className='rioglyph rioglyph-menu-hamburger margin-right-10' />\n                    <span>{activeElement?.innerText}</span>\n                </div>\n            );\n        }\n    };\n\n    // clear filter input on esc\n    useEsc(() => {\n        if (enableFilter && inputRef.current === document.activeElement) {\n            setFilterValue('');\n        }\n    });\n\n    // Convert the menu to an expandable panel for smaller screens\n    const handleMobileSize = debounce(() => {\n        buildMobileHeader();\n        setIsMobileMode(window.innerWidth < MOBILE_MAX_WIDTH);\n    }, RESIZE_THROTTLING);\n\n    // Render a dropdown menu on mobile on mount\n    useEffect(handleMobileSize, []);\n\n    useWindowResize(handleMobileSize);\n\n    const focusInput = () => {\n        inputRef.current?.focus();\n    };\n\n    useKey((event: KeyboardEvent) => {\n        if ((event.metaKey || event.ctrlKey) && event.key === 'k') {\n            event.preventDefault();\n            focusInput();\n        }\n    });\n\n    // Focus filter input if requested\n    useEffectOnce(() => {\n        focusFilter && focusInput();\n    });\n\n    useEffect(() => buildMobileHeader, [menuItems]);\n\n    const handleClear = () => focusFilter && focusInput();\n\n    const handleFilterChange = (value: string) => {\n        setFilterValue(value);\n        onFilterChange(value);\n    };\n\n    const filteredMenuItems = filterMenuItems(menuItems, filterValue, filterKey);\n\n    const handleExpanderBodyClick = (event: MouseEvent) => {\n        const isListItem = (event.target as HTMLDivElement).parentElement?.tagName.toLowerCase() === 'li';\n        if (autoClose && isListItem) {\n            setIsExpanderOpen(false);\n        }\n    };\n\n    const formClassNames = classNames(\n        'form-group',\n        'margin-bottom-5',\n        'padding-left-15',\n        'padding-right-15',\n        'padding-bottom-15',\n        'position-sticky',\n        'top-0',\n        'z-index-1'\n    );\n\n    const listMenu = (\n        <div {...remainingProps} className={`ListMenu ${className} ${filterValue ? 'filtered' : ''}`} ref={listRef}>\n            {enableFilter && (\n                <div className={formClassNames}>\n                    <div className='input-group width-100pct'>\n                        <span className='input-group-addon'>\n                            <span className='rioglyph rioglyph-search' aria-hidden='true' />\n                        </span>\n                        <ClearableInput\n                            value={filterValue}\n                            inputRef={inputRef}\n                            placeholder={filterPlaceholder}\n                            onChange={handleFilterChange}\n                            onClear={handleClear}\n                        />\n                        {trailingInputAddon && trailingInputAddon}\n                    </div>\n                </div>\n            )}\n\n            {!hasMenuItems(filteredMenuItems) && (\n                <div className='padding-top-25 text-center text-color-gray'>{notFoundMessage}</div>\n            )}\n\n            {filteredMenuItems.map((menuGroup, index) => (\n                <ListMenuGroup key={index} className={groupClassName} menuGroup={menuGroup} />\n            ))}\n        </div>\n    );\n\n    if (responsive && isMobileMode) {\n        return (\n            <ExpanderPanel\n                title={mobileHeader}\n                bsStyle='default'\n                open={isExpanderOpen}\n                onToggle={() => setIsExpanderOpen(!isExpanderOpen)}\n                unmountOnExit={false}\n                className='shadow-default'\n            >\n                <div onClick={handleExpanderBodyClick}>{listMenu}</div>\n            </ExpanderPanel>\n        );\n    }\n\n    return listMenu;\n};\n\nexport default ListMenu;\n"],"names":["RESIZE_THROTTLING","MOBILE_MAX_WIDTH","filterMenuItems","items","value","filterKey","item","navItem","hasMenuItems","navItems","isEmpty","ListMenu","props","menuItems","focusFilter","enableFilter","filterPlaceholder","onFilterChange","notFoundMessage","className","groupClassName","responsive","autoClose","trailingInputAddon","remainingProps","filterValue","setFilterValue","useState","isMobileMode","setIsMobileMode","isExpanderOpen","setIsExpanderOpen","mobileHeader","setMobileHeader","inputRef","useRef","listRef","buildMobileHeader","activeElement","jsxs","jsx","useEsc","handleMobileSize","debounce","useEffect","useWindowResize","focusInput","useKey","event","useEffectOnce","handleClear","handleFilterChange","filteredMenuItems","handleExpanderBodyClick","isListItem","formClassNames","classNames","listMenu","ClearableInput","menuGroup","index","ListMenuGroup","ExpanderPanel"],"mappings":"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"}

package/components/listMenu/ListMenuGroup.js

@@ -1,9 +1,9 @@
 import { jsxs as t, jsx as a } from "react/jsx-runtime";
-import l from "classnames";
+import l from "../../utils/classNames.js";
 import i from "./ListMenuHeader.js";
 const o = ({ menuGroup: e, className: r }) => e.navItems.length ? /* @__PURE__ */ t("ul", { className: `ListMenuGroup ${r}`, children: [
   /* @__PURE__ */ a(i, { ...e }),
-  e.navItems.map((s) => /* @__PURE__ */ a("li", { className: l({ disabled: s.disabled, subitem: s.isSubItem }), children: s.item }, s.key))
+  e.navItems.map((s) => /* @__PURE__ */ a("li", { className: l(s.disabled && "disabled", s.isSubItem && "subitem"), children: s.item }, s.key))
 ] }) : null;
 export {
   o as default