@rio-cloud/rio-uikit 2.2.0 → 2.3.0-beta.1

package/components/dialog/DialogHeader.js

@@ -1,40 +1,43 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
 import f from "react";
 import { noop as v } from "es-toolkit/function";
-import r from "../../utils/classNames.js";
+import B from "../button/Button.js";
+import d from "../../utils/classNames.js";
 import { useDialogContext as x } from "./dialogContext.js";
-const j = (d) => {
-  const { title: i, subtitle: t, headerButtons: s, onCloseButtonClick: n = v, ...c } = d, { onClose: m, isSmallestDialog: a, showXsDialogBorders: h, showCloseButton: u } = x(), l = a ? h : !0, b = a ? !1 : u, p = r("modal-header", !l && "border-bottom-none"), g = r(
+const T = (i) => {
+  const { title: s, subtitle: t, headerButtons: l, onCloseButtonClick: n = v, ...c } = i, { onClose: m, isSmallestDialog: a, showXsDialogBorders: h, showCloseButton: u } = x(), r = a ? h : !0, g = a ? !1 : u, p = d("modal-header", !r && "border-bottom-none"), b = d(
     "modal-header-text",
-    !l && "padding-bottom-0 width-100pct"
+    !r && "padding-bottom-0 width-100pct"
   ), C = (N) => {
     n(), m(N);
   };
-  return /* @__PURE__ */ o("div", { ...c, className: p, "aria-label": "dialog header", children: [
-    /* @__PURE__ */ o("div", { className: g, children: [
-      t && /* @__PURE__ */ e("div", { className: "modal-header-subtitle", children: t }),
-      /* @__PURE__ */ e("div", { className: "modal-header-title", children: i })
+  return /* @__PURE__ */ e("div", { ...c, className: p, "aria-label": "dialog header", children: [
+    /* @__PURE__ */ e("div", { className: b, children: [
+      t && /* @__PURE__ */ o("div", { className: "modal-header-subtitle", children: t }),
+      /* @__PURE__ */ o("div", { className: "modal-header-title", children: s })
     ] }),
-    /* @__PURE__ */ o("div", { className: "modal-header-buttons", children: [
-      s && !a && /* @__PURE__ */ o(f.Fragment, { children: [
-        s,
-        /* @__PURE__ */ e("div", { className: "modal-header-buttons-spacer" })
+    /* @__PURE__ */ e("div", { className: "modal-header-buttons", children: [
+      l && !a && /* @__PURE__ */ e(f.Fragment, { children: [
+        l,
+        /* @__PURE__ */ o("div", { className: "modal-header-buttons-spacer" })
       ] }),
-      b && /* @__PURE__ */ e(
-        "button",
+      g && /* @__PURE__ */ o(
+        B,
         {
-          type: "button",
-          className: "btn btn-icon-only btn-muted modal-header-close close",
+          bsStyle: "muted",
+          iconOnly: !0,
+          iconName: "rioglyph-remove",
+          autoTrackingKey: `dialog::closed::${s}`,
+          className: "modal-header-close close",
           onClick: C,
           "data-testid": "close",
-          "aria-label": "dialog close button",
-          children: /* @__PURE__ */ e("span", { className: "rioglyph rioglyph-remove", "aria-hidden": "true" })
+          "aria-label": "dialog close button"
         }
       )
     ] })
   ] });
 };
 export {
-  j as default
+  T as default
 };
 //# sourceMappingURL=DialogHeader.js.map

package/components/dialog/DialogHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogHeader.js","sources":["../../../src/components/dialog/DialogHeader.tsx"],"sourcesContent":["import React, { type ComponentProps } from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport { useDialogContext } from './dialogContext';\n\nexport type DialogHeaderProps = Omit<ComponentProps<'div'>, 'title'> & {\n    /**\n     * The dialog title (can also be a FormattedMessage component).\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * The dialog header subtitle content.\n     */\n    subtitle?: string | React.ReactNode;\n\n    /**\n     * Allows to add additional buttons to the dialog header.\n     */\n    headerButtons?: React.ReactNode;\n\n    onCloseButtonClick?: () => void;\n};\n\nconst DialogHeader = (props: DialogHeaderProps) => {\n    const { title, subtitle, headerButtons, onCloseButtonClick = noop, ...remainingProps } = props;\n\n    const { onClose, isSmallestDialog, showXsDialogBorders, showCloseButton } = useDialogContext();\n\n    const doShowXsDialogBorders = isSmallestDialog ? showXsDialogBorders : true;\n\n    const doShowCloseButton = isSmallestDialog ? false : showCloseButton;\n\n    const headerClasses = classNames('modal-header', !doShowXsDialogBorders && 'border-bottom-none');\n    const headerTextClasses = classNames(\n        'modal-header-text',\n        !doShowXsDialogBorders && 'padding-bottom-0 width-100pct'\n    );\n\n    const handleClose = (event: React.MouseEvent<HTMLButtonElement>) => {\n        onCloseButtonClick();\n        onClose(event);\n    };\n\n    return (\n        <div {...remainingProps} className={headerClasses} aria-label='dialog header'>\n            <div className={headerTextClasses}>\n                {subtitle && <div className='modal-header-subtitle'>{subtitle}</div>}\n                <div className='modal-header-title'>{title}</div>\n            </div>\n            <div className='modal-header-buttons'>\n                {headerButtons && !isSmallestDialog && (\n                    <React.Fragment>\n                        {headerButtons}\n                        <div className='modal-header-buttons-spacer' />\n                    </React.Fragment>\n                )}\n                {doShowCloseButton && (\n                    <button\n                        type='button'\n                        className='btn btn-icon-only btn-muted modal-header-close close'\n                        onClick={handleClose}\n                        data-testid='close'\n                        aria-label='dialog close button'\n                    >\n                        <span className='rioglyph rioglyph-remove' aria-hidden='true' />\n                    </button>\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport default DialogHeader;\n"],"names":["DialogHeader","props","title","subtitle","headerButtons","onCloseButtonClick","noop","remainingProps","onClose","isSmallestDialog","showXsDialogBorders","showCloseButton","useDialogContext","doShowXsDialogBorders","doShowCloseButton","headerClasses","classNames","headerTextClasses","handleClose","event","jsxs","jsx","React"],"mappings":";;;;;AAyBA,MAAMA,IAAe,CAACC,MAA6B;AAC/C,QAAM,EAAE,OAAAC,GAAO,UAAAC,GAAU,eAAAC,GAAe,oBAAAC,IAAqBC,GAAM,GAAGC,MAAmBN,GAEnF,EAAE,SAAAO,GAAS,kBAAAC,GAAkB,qBAAAC,GAAqB,iBAAAC,EAAA,IAAoBC,EAAA,GAEtEC,IAAwBJ,IAAmBC,IAAsB,IAEjEI,IAAoBL,IAAmB,KAAQE,GAE/CI,IAAgBC,EAAW,gBAAgB,CAACH,KAAyB,oBAAoB,GACzFI,IAAoBD;AAAA,IACtB;AAAA,IACA,CAACH,KAAyB;AAAA,EAAA,GAGxBK,IAAc,CAACC,MAA+C;AAChE,IAAAd,EAAA,GACAG,EAAQW,CAAK;AAAA,EACjB;AAEA,2BACK,OAAA,EAAK,GAAGZ,GAAgB,WAAWQ,GAAe,cAAW,iBAC1D,UAAA;AAAA,IAAA,gBAAAK,EAAC,OAAA,EAAI,WAAWH,GACX,UAAA;AAAA,MAAAd,KAAY,gBAAAkB,EAAC,OAAA,EAAI,WAAU,yBAAyB,UAAAlB,GAAS;AAAA,MAC9D,gBAAAkB,EAAC,OAAA,EAAI,WAAU,sBAAsB,UAAAnB,EAAA,CAAM;AAAA,IAAA,GAC/C;AAAA,IACA,gBAAAkB,EAAC,OAAA,EAAI,WAAU,wBACV,UAAA;AAAA,MAAAhB,KAAiB,CAACK,KACf,gBAAAW,EAACE,EAAM,UAAN,EACI,UAAA;AAAA,QAAAlB;AAAA,QACD,gBAAAiB,EAAC,OAAA,EAAI,WAAU,8BAAA,CAA8B;AAAA,MAAA,GACjD;AAAA,MAEHP,KACG,gBAAAO;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,MAAK;AAAA,UACL,WAAU;AAAA,UACV,SAASH;AAAA,UACT,eAAY;AAAA,UACZ,cAAW;AAAA,UAEX,UAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,4BAA2B,eAAY,OAAA,CAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IAClE,EAAA,CAER;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"DialogHeader.js","sources":["../../../src/components/dialog/DialogHeader.tsx"],"sourcesContent":["import React, { type ComponentProps } from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport Button from '../button/Button';\nimport classNames from '../../utils/classNames';\nimport { useDialogContext } from './dialogContext';\n\nexport type DialogHeaderProps = Omit<ComponentProps<'div'>, 'title'> & {\n    /**\n     * The dialog title (can also be a FormattedMessage component).\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * The dialog header subtitle content.\n     */\n    subtitle?: string | React.ReactNode;\n\n    /**\n     * Allows to add additional buttons to the dialog header.\n     */\n    headerButtons?: React.ReactNode;\n\n    onCloseButtonClick?: () => void;\n};\n\nconst DialogHeader = (props: DialogHeaderProps) => {\n    const { title, subtitle, headerButtons, onCloseButtonClick = noop, ...remainingProps } = props;\n\n    const { onClose, isSmallestDialog, showXsDialogBorders, showCloseButton } = useDialogContext();\n\n    const doShowXsDialogBorders = isSmallestDialog ? showXsDialogBorders : true;\n\n    const doShowCloseButton = isSmallestDialog ? false : showCloseButton;\n\n    const headerClasses = classNames('modal-header', !doShowXsDialogBorders && 'border-bottom-none');\n    const headerTextClasses = classNames(\n        'modal-header-text',\n        !doShowXsDialogBorders && 'padding-bottom-0 width-100pct'\n    );\n\n    const handleClose = (event: React.MouseEvent<HTMLButtonElement>) => {\n        onCloseButtonClick();\n        onClose(event);\n    };\n\n    return (\n        <div {...remainingProps} className={headerClasses} aria-label='dialog header'>\n            <div className={headerTextClasses}>\n                {subtitle && <div className='modal-header-subtitle'>{subtitle}</div>}\n                <div className='modal-header-title'>{title}</div>\n            </div>\n            <div className='modal-header-buttons'>\n                {headerButtons && !isSmallestDialog && (\n                    <React.Fragment>\n                        {headerButtons}\n                        <div className='modal-header-buttons-spacer' />\n                    </React.Fragment>\n                )}\n                {doShowCloseButton && (\n                    <Button\n                        bsStyle='muted'\n                        iconOnly\n                        iconName='rioglyph-remove'\n                        autoTrackingKey={`dialog::closed::${title}`}\n                        className='modal-header-close close'\n                        onClick={handleClose}\n                        data-testid='close'\n                        aria-label='dialog close button'\n                    />\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport default DialogHeader;\n"],"names":["DialogHeader","props","title","subtitle","headerButtons","onCloseButtonClick","noop","remainingProps","onClose","isSmallestDialog","showXsDialogBorders","showCloseButton","useDialogContext","doShowXsDialogBorders","doShowCloseButton","headerClasses","classNames","headerTextClasses","handleClose","event","jsxs","jsx","React","Button"],"mappings":";;;;;;AA0BA,MAAMA,IAAe,CAACC,MAA6B;AAC/C,QAAM,EAAE,OAAAC,GAAO,UAAAC,GAAU,eAAAC,GAAe,oBAAAC,IAAqBC,GAAM,GAAGC,MAAmBN,GAEnF,EAAE,SAAAO,GAAS,kBAAAC,GAAkB,qBAAAC,GAAqB,iBAAAC,EAAA,IAAoBC,EAAA,GAEtEC,IAAwBJ,IAAmBC,IAAsB,IAEjEI,IAAoBL,IAAmB,KAAQE,GAE/CI,IAAgBC,EAAW,gBAAgB,CAACH,KAAyB,oBAAoB,GACzFI,IAAoBD;AAAA,IACtB;AAAA,IACA,CAACH,KAAyB;AAAA,EAAA,GAGxBK,IAAc,CAACC,MAA+C;AAChE,IAAAd,EAAA,GACAG,EAAQW,CAAK;AAAA,EACjB;AAEA,2BACK,OAAA,EAAK,GAAGZ,GAAgB,WAAWQ,GAAe,cAAW,iBAC1D,UAAA;AAAA,IAAA,gBAAAK,EAAC,OAAA,EAAI,WAAWH,GACX,UAAA;AAAA,MAAAd,KAAY,gBAAAkB,EAAC,OAAA,EAAI,WAAU,yBAAyB,UAAAlB,GAAS;AAAA,MAC9D,gBAAAkB,EAAC,OAAA,EAAI,WAAU,sBAAsB,UAAAnB,EAAA,CAAM;AAAA,IAAA,GAC/C;AAAA,IACA,gBAAAkB,EAAC,OAAA,EAAI,WAAU,wBACV,UAAA;AAAA,MAAAhB,KAAiB,CAACK,KACf,gBAAAW,EAACE,EAAM,UAAN,EACI,UAAA;AAAA,QAAAlB;AAAA,QACD,gBAAAiB,EAAC,OAAA,EAAI,WAAU,8BAAA,CAA8B;AAAA,MAAA,GACjD;AAAA,MAEHP,KACG,gBAAAO;AAAA,QAACE;AAAA,QAAA;AAAA,UACG,SAAQ;AAAA,UACR,UAAQ;AAAA,UACR,UAAS;AAAA,UACT,iBAAiB,mBAAmBrB,CAAK;AAAA,UACzC,WAAU;AAAA,UACV,SAASgB;AAAA,UACT,eAAY;AAAA,UACZ,cAAW;AAAA,QAAA;AAAA,MAAA;AAAA,IACf,EAAA,CAER;AAAA,EAAA,GACJ;AAER;"}

package/components/dialog/MediaDialog.js

@@ -29,7 +29,7 @@ const m = (o) => {
   }, M = () => /* @__PURE__ */ s("div", { className: "text-center text-size-h3", children: /* @__PURE__ */ s("span", { className: "rioglyph rioglyph-missing text-size-200pct text-color-gray" }) }), S = (e) => {
     const t = r("img-responsive", e.className && e.className);
     return (
-      // @ts-ignore
+      // @ts-expect-error
       /* @__PURE__ */ s(c, { src: e.src, className: t, children: ({ status: u, image: g }) => u === c.STATUS_LOADED ? /* @__PURE__ */ s("img", { className: "ani-fade-in", src: g.src }, g.src) : u === c.STATUS_FAILED ? M() : /* @__PURE__ */ s(j, { isInverse: !1 }) })
     );
   }, _ = (e) => {

package/components/dialog/MediaDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaDialog.js","sources":["../../../src/components/dialog/MediaDialog.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState } from 'react';\nimport classNames from '../../utils/classNames';\nimport { noop } from 'es-toolkit/function';\n\nimport Dialog, { type BaseDialogProps } from './Dialog';\nimport ResponsiveVideo from '../video/ResponsiveVideo';\nimport ImagePreloader from '../preloader/ImagePreloader';\nimport Spinner from '../spinner/Spinner';\n\n// TODO: add keyboard support left/right\n\nexport type MediaDialogMedia = {\n    /**\n     * Defines the media type that is going to be displayed.\n     *\n     * Possible values are: `image` and `video`.\n     */\n    type: 'image' | 'video';\n\n    /**\n     * The source location for the media data.\n     */\n    src: string;\n\n    /**\n     * The name or title of the media used for the dialogs title.\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * Additional media information used for the dialogs subtitle.\n     */\n    subtitle?: string | React.ReactNode;\n\n    /**\n     * Only relevant for videos where the aspect of the video is defined.\n     *\n     * Possible values are: `4by3` and `16by9`.\n     * @default '16by9'\n     */\n    aspectRatio?: '4by3' | '16by9';\n\n    /**\n     * Additional classes for the image element.\n     */\n    className?: string;\n};\n\nexport type MediaDialogProps = BaseDialogProps & {\n    /**\n     * List of media objects.\n     */\n    media: MediaDialogMedia[];\n\n    /**\n     * The button text for switching to the previous media if there are multiple.\n     */\n    previousButtonText: string | React.ReactNode;\n\n    /**\n     * Callback function for when the previous button is clicked.\n     * @param newIndex\n     * @returns\n     */\n    previousButtonCallback?: (newIndex: number) => void;\n\n    /**\n     * The button text for switching to the next media if there are multiple.\n     */\n    nextButtonText: string | React.ReactNode;\n\n    /**\n     * Callback function for when the next button is clicked.\n     * @param newIndex\n     * @returns\n     */\n    nextButtonCallback?: (newIndex: number) => void;\n};\n\nconst MediaDialog = (props: MediaDialogProps) => {\n    const {\n        show = false,\n        onClose = noop,\n        disableEsc = false,\n        useOverflow = false,\n        bsSize = 'lg',\n        media = [],\n        previousButtonText = 'Prev',\n        previousButtonCallback = noop,\n        nextButtonText = 'Next',\n        nextButtonCallback = noop,\n        className,\n        ...remainingProps\n    } = props;\n\n    const [currentMediaIndex, setCurrentMediaIndex] = useState(0);\n\n    const handlePrevious = () => {\n        const oldIndex = currentMediaIndex;\n        const newIndex = oldIndex === 0 ? props.media.length - 1 : oldIndex - 1;\n        setCurrentMediaIndex(newIndex);\n        previousButtonCallback(newIndex);\n    };\n\n    const handleNext = () => {\n        const oldIndex = currentMediaIndex;\n        const newIndex = oldIndex === props.media.length - 1 ? 0 : oldIndex + 1;\n        setCurrentMediaIndex(newIndex);\n        nextButtonCallback(newIndex);\n    };\n\n    const renderFallback = () => {\n        return (\n            <div className='text-center text-size-h3'>\n                <span className='rioglyph rioglyph-missing text-size-200pct text-color-gray' />\n            </div>\n        );\n    };\n\n    const renderImage = (mediaData: MediaDialogMedia) => {\n        const imageClassNames = classNames('img-responsive', mediaData.className && mediaData.className);\n\n        return (\n            // @ts-ignore\n            <ImagePreloader src={mediaData.src} className={imageClassNames}>\n                {({ status, image }: { status: 'PENDING' | 'LOADED' | 'FAILED'; image: { src: string } }) => {\n                    if (status === ImagePreloader.STATUS_LOADED) {\n                        // When image has been loaded, render the image tag\n                        return <img className='ani-fade-in' key={image.src} src={image.src} />;\n                    }\n\n                    if (status === ImagePreloader.STATUS_FAILED) {\n                        return renderFallback();\n                    }\n\n                    return <Spinner isInverse={false} />;\n                }}\n            </ImagePreloader>\n        );\n    };\n\n    const renderVideo = (mediaData: MediaDialogMedia) => {\n        const videoClassNames = classNames(mediaData.className && mediaData.className);\n        return (\n            <div className='flex-1-0'>\n                <ResponsiveVideo\n                    src={mediaData.src}\n                    aspectRatio={mediaData.aspectRatio ?? '16by9'}\n                    className={videoClassNames}\n                />\n            </div>\n        );\n    };\n\n    const renderMediaContent = (mediaData = {} as MediaDialogMedia) => {\n        if (mediaData.type === MediaDialog.MEDIA_TYPE_VIDEO) {\n            return renderVideo(mediaData);\n        }\n\n        // image media is default\n        return mediaData.src && renderImage(mediaData);\n    };\n\n    const dialogClassName = classNames('media-dialog', className && className);\n    const bodyClassNames = classNames('padding-0');\n    const mediaContentClassNames = classNames('media-content', 'content-center');\n\n    const mediaTitle = media[currentMediaIndex].title;\n    const mediaSubtitle = media[currentMediaIndex].subtitle || null;\n\n    return (\n        <Dialog\n            {...remainingProps}\n            show={show}\n            title={mediaTitle}\n            subtitle={mediaSubtitle}\n            body={<div className={mediaContentClassNames}>{renderMediaContent(media[currentMediaIndex])}</div>}\n            footer={\n                media?.length > 1 && (\n                    <>\n                        <button type='button' className='btn btn-primary btn-link pull-left' onClick={handlePrevious}>\n                            <span className='rioglyph rioglyph-chevron-left' />\n                            {previousButtonText}\n                        </button>\n                        <div>{`${currentMediaIndex + 1} / ${props.media.length}`}</div>\n                        <button type='button' className='btn btn-primary btn-link btn-icon-right' onClick={handleNext}>\n                            <span className='rioglyph rioglyph-chevron-right' />\n                            {nextButtonText}\n                        </button>\n                    </>\n                )\n            }\n            onClose={onClose}\n            className={dialogClassName}\n            bodyClassName={bodyClassNames}\n            disableEsc={disableEsc}\n            useOverflow={useOverflow}\n            bsSize={bsSize}\n        />\n    );\n};\n\nMediaDialog.MEDIA_TYPE_IMAGE = 'image' as const;\nMediaDialog.MEDIA_TYPE_VIDEO = 'video' as const;\n\nexport default MediaDialog;\n"],"names":["MediaDialog","props","show","onClose","noop","disableEsc","useOverflow","bsSize","media","previousButtonText","previousButtonCallback","nextButtonText","nextButtonCallback","className","remainingProps","currentMediaIndex","setCurrentMediaIndex","useState","handlePrevious","oldIndex","newIndex","handleNext","renderFallback","jsx","renderImage","mediaData","imageClassNames","classNames","ImagePreloader","status","image","Spinner","renderVideo","videoClassNames","ResponsiveVideo","renderMediaContent","dialogClassName","bodyClassNames","mediaContentClassNames","mediaTitle","mediaSubtitle","Dialog","jsxs","Fragment"],"mappings":"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"}
+{"version":3,"file":"MediaDialog.js","sources":["../../../src/components/dialog/MediaDialog.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState } from 'react';\nimport classNames from '../../utils/classNames';\nimport { noop } from 'es-toolkit/function';\n\nimport Dialog, { type BaseDialogProps } from './Dialog';\nimport ResponsiveVideo from '../video/ResponsiveVideo';\nimport ImagePreloader from '../preloader/ImagePreloader';\nimport Spinner from '../spinner/Spinner';\n\n// TODO: add keyboard support left/right\n\nexport type MediaDialogMedia = {\n    /**\n     * Defines the media type that is going to be displayed.\n     *\n     * Possible values are: `image` and `video`.\n     */\n    type: 'image' | 'video';\n\n    /**\n     * The source location for the media data.\n     */\n    src: string;\n\n    /**\n     * The name or title of the media used for the dialogs title.\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * Additional media information used for the dialogs subtitle.\n     */\n    subtitle?: string | React.ReactNode;\n\n    /**\n     * Only relevant for videos where the aspect of the video is defined.\n     *\n     * Possible values are: `4by3` and `16by9`.\n     * @default '16by9'\n     */\n    aspectRatio?: '4by3' | '16by9';\n\n    /**\n     * Additional classes for the image element.\n     */\n    className?: string;\n};\n\nexport type MediaDialogProps = BaseDialogProps & {\n    /**\n     * List of media objects.\n     */\n    media: MediaDialogMedia[];\n\n    /**\n     * The button text for switching to the previous media if there are multiple.\n     */\n    previousButtonText: string | React.ReactNode;\n\n    /**\n     * Callback function for when the previous button is clicked.\n     * @param newIndex\n     * @returns\n     */\n    previousButtonCallback?: (newIndex: number) => void;\n\n    /**\n     * The button text for switching to the next media if there are multiple.\n     */\n    nextButtonText: string | React.ReactNode;\n\n    /**\n     * Callback function for when the next button is clicked.\n     * @param newIndex\n     * @returns\n     */\n    nextButtonCallback?: (newIndex: number) => void;\n};\n\nconst MediaDialog = (props: MediaDialogProps) => {\n    const {\n        show = false,\n        onClose = noop,\n        disableEsc = false,\n        useOverflow = false,\n        bsSize = 'lg',\n        media = [],\n        previousButtonText = 'Prev',\n        previousButtonCallback = noop,\n        nextButtonText = 'Next',\n        nextButtonCallback = noop,\n        className,\n        ...remainingProps\n    } = props;\n\n    const [currentMediaIndex, setCurrentMediaIndex] = useState(0);\n\n    const handlePrevious = () => {\n        const oldIndex = currentMediaIndex;\n        const newIndex = oldIndex === 0 ? props.media.length - 1 : oldIndex - 1;\n        setCurrentMediaIndex(newIndex);\n        previousButtonCallback(newIndex);\n    };\n\n    const handleNext = () => {\n        const oldIndex = currentMediaIndex;\n        const newIndex = oldIndex === props.media.length - 1 ? 0 : oldIndex + 1;\n        setCurrentMediaIndex(newIndex);\n        nextButtonCallback(newIndex);\n    };\n\n    const renderFallback = () => (\n        <div className='text-center text-size-h3'>\n            <span className='rioglyph rioglyph-missing text-size-200pct text-color-gray' />\n        </div>\n    );\n\n    const renderImage = (mediaData: MediaDialogMedia) => {\n        const imageClassNames = classNames('img-responsive', mediaData.className && mediaData.className);\n\n        return (\n            // @ts-expect-error\n            <ImagePreloader src={mediaData.src} className={imageClassNames}>\n                {({ status, image }: { status: 'PENDING' | 'LOADED' | 'FAILED'; image: { src: string } }) => {\n                    if (status === ImagePreloader.STATUS_LOADED) {\n                        // When image has been loaded, render the image tag\n                        return <img className='ani-fade-in' key={image.src} src={image.src} />;\n                    }\n\n                    if (status === ImagePreloader.STATUS_FAILED) {\n                        return renderFallback();\n                    }\n\n                    return <Spinner isInverse={false} />;\n                }}\n            </ImagePreloader>\n        );\n    };\n\n    const renderVideo = (mediaData: MediaDialogMedia) => {\n        const videoClassNames = classNames(mediaData.className && mediaData.className);\n        return (\n            <div className='flex-1-0'>\n                <ResponsiveVideo\n                    src={mediaData.src}\n                    aspectRatio={mediaData.aspectRatio ?? '16by9'}\n                    className={videoClassNames}\n                />\n            </div>\n        );\n    };\n\n    const renderMediaContent = (mediaData = {} as MediaDialogMedia) => {\n        if (mediaData.type === MediaDialog.MEDIA_TYPE_VIDEO) {\n            return renderVideo(mediaData);\n        }\n\n        // image media is default\n        return mediaData.src && renderImage(mediaData);\n    };\n\n    const dialogClassName = classNames('media-dialog', className && className);\n    const bodyClassNames = classNames('padding-0');\n    const mediaContentClassNames = classNames('media-content', 'content-center');\n\n    const mediaTitle = media[currentMediaIndex].title;\n    const mediaSubtitle = media[currentMediaIndex].subtitle || null;\n\n    return (\n        <Dialog\n            {...remainingProps}\n            show={show}\n            title={mediaTitle}\n            subtitle={mediaSubtitle}\n            body={<div className={mediaContentClassNames}>{renderMediaContent(media[currentMediaIndex])}</div>}\n            footer={\n                media?.length > 1 && (\n                    <>\n                        <button type='button' className='btn btn-primary btn-link pull-left' onClick={handlePrevious}>\n                            <span className='rioglyph rioglyph-chevron-left' />\n                            {previousButtonText}\n                        </button>\n                        <div>{`${currentMediaIndex + 1} / ${props.media.length}`}</div>\n                        <button type='button' className='btn btn-primary btn-link btn-icon-right' onClick={handleNext}>\n                            <span className='rioglyph rioglyph-chevron-right' />\n                            {nextButtonText}\n                        </button>\n                    </>\n                )\n            }\n            onClose={onClose}\n            className={dialogClassName}\n            bodyClassName={bodyClassNames}\n            disableEsc={disableEsc}\n            useOverflow={useOverflow}\n            bsSize={bsSize}\n        />\n    );\n};\n\nMediaDialog.MEDIA_TYPE_IMAGE = 'image' as const;\nMediaDialog.MEDIA_TYPE_VIDEO = 'video' as const;\n\nexport default MediaDialog;\n"],"names":["MediaDialog","props","show","onClose","noop","disableEsc","useOverflow","bsSize","media","previousButtonText","previousButtonCallback","nextButtonText","nextButtonCallback","className","remainingProps","currentMediaIndex","setCurrentMediaIndex","useState","handlePrevious","oldIndex","newIndex","handleNext","renderFallback","jsx","renderImage","mediaData","imageClassNames","classNames","ImagePreloader","status","image","Spinner","renderVideo","videoClassNames","ResponsiveVideo","renderMediaContent","dialogClassName","bodyClassNames","mediaContentClassNames","mediaTitle","mediaSubtitle","Dialog","jsxs","Fragment"],"mappings":"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"}

package/components/editableContent/EditableContent.js

@@ -9,7 +9,7 @@ import ue from "../../hooks/useEsc.js";
 import me from "../../hooks/useFocusTrap.js";
 const Ee = -13, he = -18, O = 1, we = (P) => {
   const {
-    show: t = void 0,
+    show: t,
     onSave: S = r,
     onCancel: w = r,
     onFocus: M = r,
@@ -29,7 +29,7 @@ const Ee = -13, he = -18, O = 1, we = (P) => {
     editorClassName: D = "",
     children: A,
     ...L
-  } = P, [i, l] = s(t), [f, h] = s(""), [b, u] = s(!n), [C, j] = s(null), [g, K] = s(null), v = !!E;
+  } = P, [i, l] = s(t), [f, h] = s(""), [b, u] = s(!n), [C, j] = s(null), [g, K] = s(null), y = !!E;
   ue(() => N()), me(g);
   const a = ie(null);
   le(() => {
@@ -51,8 +51,8 @@ const Ee = -13, he = -18, O = 1, we = (P) => {
     )],
     strategy: "absolute"
   }, { styles: B, attributes: H } = pe(C, g, $), U = () => {
-    t === void 0 && y(), F();
-  }, y = () => {
+    t === void 0 && v(), F();
+  }, v = () => {
     l(!0), h(C?.textContent?.trimEnd() ?? ""), u(!1);
   }, X = (e) => {
     h(e.target.value);
@@ -64,7 +64,7 @@ const Ee = -13, he = -18, O = 1, we = (P) => {
     const e = T(f);
     u(!e), e && (l(!1), S(f.trimEnd()));
   }, [G, J] = s(t);
-  t !== G && (t && y(), t || l(!1), J(t));
+  t !== G && (t && v(), t || l(!1), J(t));
   const [Q, Y] = s(n);
   n !== Q && (u(!n), Y(n));
   const Z = p(W, i && "opacity-0"), ee = p(
@@ -99,8 +99,8 @@ const Ee = -13, he = -18, O = 1, we = (P) => {
           ...L,
           children: [
             /* @__PURE__ */ c("div", { className: te, children: [
-              v && E,
-              !v && /* @__PURE__ */ o(
+              y && E,
+              !y && /* @__PURE__ */ o(
                 "textarea",
                 {
                   ref: a,

package/components/editableContent/EditableContent.js.map

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

package/components/expander/ExpanderList.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { TrackingAttributes } from '../../utils/analytics/googleAnalyticsUtils';
 export type ExpanderListItem = {
     /**
      * The "id" property is used to know which item is expanded. It will also be used to control
@@ -38,6 +39,10 @@ export type ExpanderListItem = {
      * Additional classes to be set on list item node.
      */
     className?: string;
+    /**
+     * Optional tracking attributes (e.g. from `getTrackingAttributes`) added to the item header element.
+     */
+    trackingAttributes?: TrackingAttributes;
 };
 export type ExpanderListProps = {
     /**

package/components/expander/ExpanderList.js

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

package/components/expander/ExpanderList.js.map

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

package/components/expander/ExpanderPanel.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { TrackingAttributes } from '../../utils/analytics/googleAnalyticsUtils';
 type ChildrenType = React.ReactNode | ((isOpen: boolean) => React.ReactNode | JSX.Element);
 export type ExpanderPanelProps = {
     /**
@@ -70,6 +71,10 @@ export type ExpanderPanelProps = {
      * Additional classes to be set on the wrapper element.
      */
     className?: string;
+    /**
+     * Optional tracking attributes (e.g. from `getTrackingAttributes`) added to the panel header element.
+     */
+    trackingAttributes?: TrackingAttributes;
     /**
      * Any element to be rendered inside the panel body.
      * Providing a function enables the render prop approach.

package/components/expander/ExpanderPanel.js

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

package/components/expander/ExpanderPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpanderPanel.js","sources":["../../../src/components/expander/ExpanderPanel.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState } from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport 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 type { TrackingAttributes } from '../../utils/analytics/googleAnalyticsUtils';\nimport Collapse from '../collapse/Collapse';\n\ntype ChildrenType = React.ReactNode | ((isOpen: boolean) => React.ReactNode | JSX.Element);\n\nexport type ExpanderPanelProps = {\n    /**\n     * The title to be shown in the expander header.\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * Component visual or contextual style variants.\n     *\n     * @default 'blank'\n     */\n    bsStyle?: 'blank' | 'default' | 'separator' | 'primary' | 'secondary' | 'info' | 'warning' | 'danger' | 'success';\n\n    /**\n     * Defines if the icon will be align left, otherwise it is aligned right.\n     *\n     * @default false\n     */\n    iconLeft?: boolean;\n\n    /**\n     * Defines if the panel will be opened or closed by default.\n     * The open/closed state will be handled internally.\n     *\n     * @default false\n     */\n    open?: boolean;\n\n    /**\n     * It unmounts the body component (remove it from the DOM) when it is collapsed.\n     * Set it to false to avoid the unmount.\n     *\n     * @default true\n     */\n    unmountOnExit?: boolean;\n\n    /**\n     * Callback function for when the header is clicked and the expander toggles.\n     *\n     * @param isOpen\n     * @returns\n     */\n    onToggle?: (isOpen: boolean) => void;\n\n    /**\n     * Callback fired after the component has expanded.\n     */\n    onEntered?: VoidFunction;\n\n    /**\n     * Callback fired after the component has collapsed.\n     */\n    onExited?: VoidFunction;\n\n    /**\n     * Callback fired when the animation starts for either expand or collapse.\n     */\n    onAnimationStart?: VoidFunction;\n\n    /**\n     * Additional classes to be set on the panel header.\n     */\n    headerClassName?: string;\n\n    /**\n     * Additional classes to be set on the header title.\n     */\n    titleClassName?: string;\n\n    /**\n     * Additional classes to be set on the panel body.\n     */\n    bodyClassName?: string;\n\n    /**\n     * Additional classes added to the chevron icon\n     */\n    iconClassName?: string;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * Optional tracking attributes (e.g. from `getTrackingAttributes`) added to the panel header element.\n     */\n    trackingAttributes?: TrackingAttributes;\n\n    /**\n     * Any element to be rendered inside the panel body.\n     * Providing a function enables the render prop approach.\n     *\n     * See {@link https://reactjs.org/docs/render-props.html}\n     *\n     * The function gets the\n     * `isOpen` state passed and is responsible for rendering the custom content.\n     */\n    children?: ChildrenType;\n};\n\nconst ExpanderPanel = (props: ExpanderPanelProps) => {\n    const {\n        open = false,\n        iconLeft = false,\n        bsStyle = 'blank',\n        title,\n        headerClassName,\n        titleClassName,\n        bodyClassName,\n        iconClassName,\n        unmountOnExit = true,\n        onEntered = noop,\n        onExited = noop,\n        onAnimationStart = noop,\n        onToggle = noop,\n        className,\n        trackingAttributes,\n        children,\n        ...remainingProps\n    } = props;\n\n    const [isOpen, setIsOpen] = useState(open);\n\n    // Update internal state from external prop change\n    const [previousOpen, setPreviousOpen] = useState(open);\n    if (previousOpen !== open) {\n        setIsOpen(open);\n        setPreviousOpen(open);\n    }\n\n    const handleToggle = () => {\n        const newState = !isOpen;\n        setIsOpen(newState);\n        onToggle(newState);\n    };\n\n    const wrapperClassNames = classNames('expander-panel panel', `panel-${bsStyle}`, className);\n\n    const iconClassNames = classNames('expander-icon', iconClassName, 'rioglyph', 'rioglyph-chevron-down');\n\n    const headerClassNames = classNames(\n        'panel-heading',\n        isOpen && 'open',\n        iconLeft && 'icon-left',\n        headerClassName && headerClassName\n    );\n\n    const titleClassNames = classNames('title', titleClassName && titleClassName);\n\n    const bodyClassNames = classNames('panel-body', bodyClassName && bodyClassName);\n\n    const isRenderCallback = children && typeof children === 'function';\n\n    return (\n        <div {...remainingProps} className={wrapperClassNames} aria-label='expander panel'>\n            <div className={headerClassNames} onClick={handleToggle} aria-label='panel heading' {...trackingAttributes}>\n                <span className={titleClassNames}>{title}</span>\n                <span className={iconClassNames} />\n                {bsStyle === 'separator' && (\n                    <div className='separator'>\n                        <hr />\n                    </div>\n                )}\n            </div>\n            <Collapse\n                open={isOpen}\n                unmountOnExit={unmountOnExit}\n                onEntered={onEntered}\n                onExited={onExited}\n                onAnimationStart={() => onAnimationStart()}\n            >\n                <div>\n                    <div className={bodyClassNames}>{isRenderCallback ? children(isOpen) : children}</div>\n                </div>\n            </Collapse>\n        </div>\n    );\n};\n\nexport default ExpanderPanel;\n"],"names":["ExpanderPanel","props","open","iconLeft","bsStyle","title","headerClassName","titleClassName","bodyClassName","iconClassName","unmountOnExit","onEntered","noop","onExited","onAnimationStart","onToggle","className","trackingAttributes","children","remainingProps","isOpen","setIsOpen","useState","previousOpen","setPreviousOpen","handleToggle","newState","wrapperClassNames","classNames","iconClassNames","headerClassNames","titleClassNames","bodyClassNames","isRenderCallback","jsxs","jsx","Collapse"],"mappings":";;;;;AA+GA,MAAMA,IAAgB,CAACC,MAA8B;AACjD,QAAM;AAAA,IACF,MAAAC,IAAO;AAAA,IACP,UAAAC,IAAW;AAAA,IACX,SAAAC,IAAU;AAAA,IACV,OAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,eAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,WAAAC,IAAYC;AAAA,IACZ,UAAAC,IAAWD;AAAA,IACX,kBAAAE,IAAmBF;AAAA,IACnB,UAAAG,IAAWH;AAAA,IACX,WAAAI;AAAA,IACA,oBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHlB,GAEE,CAACmB,GAAQC,CAAS,IAAIC,EAASpB,CAAI,GAGnC,CAACqB,GAAcC,CAAe,IAAIF,EAASpB,CAAI;AACrD,EAAIqB,MAAiBrB,MACjBmB,EAAUnB,CAAI,GACdsB,EAAgBtB,CAAI;AAGxB,QAAMuB,IAAe,MAAM;AACvB,UAAMC,IAAW,CAACN;AAClB,IAAAC,EAAUK,CAAQ,GAClBX,EAASW,CAAQ;AAAA,EACrB,GAEMC,IAAoBC,EAAW,wBAAwB,SAASxB,CAAO,IAAIY,CAAS,GAEpFa,IAAiBD,EAAW,iBAAiBnB,GAAe,YAAY,uBAAuB,GAE/FqB,IAAmBF;AAAA,IACrB;AAAA,IACAR,KAAU;AAAA,IACVjB,KAAY;AAAA,IACZG,KAAmBA;AAAA,EAAA,GAGjByB,IAAkBH,EAAW,SAASrB,KAAkBA,CAAc,GAEtEyB,IAAiBJ,EAAW,cAAcpB,KAAiBA,CAAa,GAExEyB,IAAmBf,KAAY,OAAOA,KAAa;AAEzD,2BACK,OAAA,EAAK,GAAGC,GAAgB,WAAWQ,GAAmB,cAAW,kBAC9D,UAAA;AAAA,IAAA,gBAAAO,EAAC,OAAA,EAAI,WAAWJ,GAAkB,SAASL,GAAc,cAAW,iBAAiB,GAAGR,GACpF,UAAA;AAAA,MAAA,gBAAAkB,EAAC,QAAA,EAAK,WAAWJ,GAAkB,UAAA1B,GAAM;AAAA,MACzC,gBAAA8B,EAAC,QAAA,EAAK,WAAWN,EAAA,CAAgB;AAAA,MAChCzB,MAAY,eACT,gBAAA+B,EAAC,OAAA,EAAI,WAAU,aACX,UAAA,gBAAAA,EAAC,QAAG,EAAA,CACR;AAAA,IAAA,GAER;AAAA,IACA,gBAAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,MAAMhB;AAAA,QACN,eAAAV;AAAA,QACA,WAAAC;AAAA,QACA,UAAAE;AAAA,QACA,kBAAkB,MAAMC,EAAA;AAAA,QAExB,UAAA,gBAAAqB,EAAC,OAAA,EACG,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAWH,GAAiB,UAAAC,IAAmBf,EAASE,CAAM,IAAIF,EAAA,CAAS,EAAA,CACpF;AAAA,MAAA;AAAA,IAAA;AAAA,EACJ,GACJ;AAER;"}

package/components/fade/FadeExpander.js

@@ -12,7 +12,7 @@ const E = 200, b = (r) => {
     e && setTimeout(() => i("visible"), h.current * 1e3 + E);
   };
   return (
-    // @ts-ignore
+    // @ts-expect-error
     /* @__PURE__ */ s(y, { onExitComplete: () => i("hidden"), children: m && /* @__PURE__ */ s(
       x.div,
       {