@rio-cloud/rio-uikit 2.2.1 → 2.3.0-beta.2

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

@@ -11,26 +11,23 @@ const E = 200, b = (r) => {
   const f = () => {
     e && setTimeout(() => i("visible"), h.current * 1e3 + E);
   };
-  return (
-    // @ts-ignore
-    /* @__PURE__ */ s(y, { onExitComplete: () => i("hidden"), children: m && /* @__PURE__ */ s(
-      x.div,
-      {
-        initial: { height: 0, opacity: 0 },
-        animate: { height: "auto", opacity: 1 },
-        exit: { height: 0, opacity: 0 },
-        transition: {
-          height: { duration: t, delay: o },
-          opacity: { duration: t, delay: o },
-          ease: "easeIn"
-        },
-        style: { overflow: d },
-        onAnimationComplete: f,
-        className: c,
-        children: l
-      }
-    ) })
-  );
+  return /* @__PURE__ */ s(y, { onExitComplete: () => i("hidden"), children: m && /* @__PURE__ */ s(
+    x.div,
+    {
+      initial: { height: 0, opacity: 0 },
+      animate: { height: "auto", opacity: 1 },
+      exit: { height: 0, opacity: 0 },
+      transition: {
+        height: { duration: t, delay: o },
+        opacity: { duration: t, delay: o },
+        ease: "easeIn"
+      },
+      style: { overflow: d },
+      onAnimationComplete: f,
+      className: c,
+      children: l
+    }
+  ) });
 };
 export {
   b as default

package/components/fade/FadeExpander.js.map

@@ -1 +1 @@
-{"version":3,"file":"FadeExpander.js","sources":["../../../src/components/fade/FadeExpander.tsx"],"sourcesContent":["import { useState, useEffect, type PropsWithChildren, useRef } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\n\ntype FadeExpanderProps = {\n    /**\n     * Defines if the content is shown or not.\n     *\n     * @default false\n     */\n    show: boolean;\n\n    /**\n     * Allows customization of animation duration.\n     *\n     * @default 0.2\n     */\n    duration?: number;\n\n    /**\n     * Delay in seconds before starting the animation.\n     *\n     * @default 0\n     */\n    delay?: number;\n\n    /**\n     * Additional classes set to the wrapper element.\n     */\n    className?: string;\n};\n\nconst THRESHOLD_TIMEOUT_MS = 200;\n\nconst FadeExpander = (props: PropsWithChildren<FadeExpanderProps>) => {\n    const { children, show = false, duration = 0.2, delay = 0, className = '' } = props;\n\n    const [isVisible, setIsVisible] = useState(show);\n    const [overflow, setOverflow] = useState('hidden'); // Start with hidden overflow\n\n    const durationRef = useRef(duration);\n\n    // Effect to manage visibility based on show prop\n    useEffect(() => {\n        if (show) {\n            // Set to visible when show is true\n            setIsVisible(true);\n        } else {\n            // Set overflow to hidden immediately when show is false\n            setOverflow('hidden');\n\n            // Delay setting isVisible to false so the overflow can change before\n            setTimeout(() => {\n                setIsVisible(false);\n            }, 0);\n        }\n    }, [show]);\n\n    const handleAnimationComplete = () => {\n        if (show) {\n            // Set overflow to visible after animation is done\n            setTimeout(() => setOverflow('visible'), durationRef.current * 1000 + THRESHOLD_TIMEOUT_MS);\n        }\n    };\n\n    return (\n        // @ts-ignore\n        <AnimatePresence onExitComplete={() => setOverflow('hidden')}>\n            {isVisible && (\n                <motion.div\n                    initial={{ height: 0, opacity: 0 }}\n                    animate={{ height: 'auto', opacity: 1 }}\n                    exit={{ height: 0, opacity: 0 }}\n                    transition={{\n                        height: { duration, delay },\n                        opacity: { duration, delay },\n                        ease: 'easeIn',\n                    }}\n                    // To ensures smooth height transition, the overflow should be \"hidden\" during the animation\n                    style={{ overflow }}\n                    onAnimationComplete={handleAnimationComplete}\n                    className={className}\n                >\n                    {children}\n                </motion.div>\n            )}\n        </AnimatePresence>\n    );\n};\n\nexport default FadeExpander;\n"],"names":["THRESHOLD_TIMEOUT_MS","FadeExpander","props","children","show","duration","delay","className","isVisible","setIsVisible","useState","overflow","setOverflow","durationRef","useRef","useEffect","handleAnimationComplete","AnimatePresence","jsx","motion"],"mappings":";;;AA+BA,MAAMA,IAAuB,KAEvBC,IAAe,CAACC,MAAgD;AAClE,QAAM,EAAE,UAAAC,GAAU,MAAAC,IAAO,IAAO,UAAAC,IAAW,KAAK,OAAAC,IAAQ,GAAG,WAAAC,IAAY,GAAA,IAAOL,GAExE,CAACM,GAAWC,CAAY,IAAIC,EAASN,CAAI,GACzC,CAACO,GAAUC,CAAW,IAAIF,EAAS,QAAQ,GAE3CG,IAAcC,EAAOT,CAAQ;AAGnC,EAAAU,EAAU,MAAM;AACZ,IAAIX,IAEAK,EAAa,EAAI,KAGjBG,EAAY,QAAQ,GAGpB,WAAW,MAAM;AACb,MAAAH,EAAa,EAAK;AAAA,IACtB,GAAG,CAAC;AAAA,EAEZ,GAAG,CAACL,CAAI,CAAC;AAET,QAAMY,IAA0B,MAAM;AAClC,IAAIZ,KAEA,WAAW,MAAMQ,EAAY,SAAS,GAAGC,EAAY,UAAU,MAAOb,CAAoB;AAAA,EAElG;AAEA;AAAA;AAAA,sBAEKiB,GAAA,EAAgB,gBAAgB,MAAML,EAAY,QAAQ,GACtD,UAAAJ,KACG,gBAAAU;AAAA,MAACC,EAAO;AAAA,MAAP;AAAA,QACG,SAAS,EAAE,QAAQ,GAAG,SAAS,EAAA;AAAA,QAC/B,SAAS,EAAE,QAAQ,QAAQ,SAAS,EAAA;AAAA,QACpC,MAAM,EAAE,QAAQ,GAAG,SAAS,EAAA;AAAA,QAC5B,YAAY;AAAA,UACR,QAAQ,EAAE,UAAAd,GAAU,OAAAC,EAAA;AAAA,UACpB,SAAS,EAAE,UAAAD,GAAU,OAAAC,EAAA;AAAA,UACrB,MAAM;AAAA,QAAA;AAAA,QAGV,OAAO,EAAE,UAAAK,EAAA;AAAA,QACT,qBAAqBK;AAAA,QACrB,WAAAT;AAAA,QAEC,UAAAJ;AAAA,MAAA;AAAA,IAAA,EACL,CAER;AAAA;AAER;"}
+{"version":3,"file":"FadeExpander.js","sources":["../../../src/components/fade/FadeExpander.tsx"],"sourcesContent":["import { useState, useEffect, type PropsWithChildren, useRef } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\n\ntype FadeExpanderProps = {\n    /**\n     * Defines if the content is shown or not.\n     *\n     * @default false\n     */\n    show: boolean;\n\n    /**\n     * Allows customization of animation duration.\n     *\n     * @default 0.2\n     */\n    duration?: number;\n\n    /**\n     * Delay in seconds before starting the animation.\n     *\n     * @default 0\n     */\n    delay?: number;\n\n    /**\n     * Additional classes set to the wrapper element.\n     */\n    className?: string;\n};\n\nconst THRESHOLD_TIMEOUT_MS = 200;\n\nconst FadeExpander = (props: PropsWithChildren<FadeExpanderProps>) => {\n    const { children, show = false, duration = 0.2, delay = 0, className = '' } = props;\n\n    const [isVisible, setIsVisible] = useState(show);\n    const [overflow, setOverflow] = useState('hidden'); // Start with hidden overflow\n\n    const durationRef = useRef(duration);\n\n    // Effect to manage visibility based on show prop\n    useEffect(() => {\n        if (show) {\n            // Set to visible when show is true\n            setIsVisible(true);\n        } else {\n            // Set overflow to hidden immediately when show is false\n            setOverflow('hidden');\n\n            // Delay setting isVisible to false so the overflow can change before\n            setTimeout(() => {\n                setIsVisible(false);\n            }, 0);\n        }\n    }, [show]);\n\n    const handleAnimationComplete = () => {\n        if (show) {\n            // Set overflow to visible after animation is done\n            setTimeout(() => setOverflow('visible'), durationRef.current * 1000 + THRESHOLD_TIMEOUT_MS);\n        }\n    };\n\n    return (\n        <AnimatePresence onExitComplete={() => setOverflow('hidden')}>\n            {isVisible && (\n                <motion.div\n                    initial={{ height: 0, opacity: 0 }}\n                    animate={{ height: 'auto', opacity: 1 }}\n                    exit={{ height: 0, opacity: 0 }}\n                    transition={{\n                        height: { duration, delay },\n                        opacity: { duration, delay },\n                        ease: 'easeIn',\n                    }}\n                    // To ensures smooth height transition, the overflow should be \"hidden\" during the animation\n                    style={{ overflow }}\n                    onAnimationComplete={handleAnimationComplete}\n                    className={className}\n                >\n                    {children}\n                </motion.div>\n            )}\n        </AnimatePresence>\n    );\n};\n\nexport default FadeExpander;\n"],"names":["THRESHOLD_TIMEOUT_MS","FadeExpander","props","children","show","duration","delay","className","isVisible","setIsVisible","useState","overflow","setOverflow","durationRef","useRef","useEffect","handleAnimationComplete","AnimatePresence","jsx","motion"],"mappings":";;;AA+BA,MAAMA,IAAuB,KAEvBC,IAAe,CAACC,MAAgD;AAClE,QAAM,EAAE,UAAAC,GAAU,MAAAC,IAAO,IAAO,UAAAC,IAAW,KAAK,OAAAC,IAAQ,GAAG,WAAAC,IAAY,GAAA,IAAOL,GAExE,CAACM,GAAWC,CAAY,IAAIC,EAASN,CAAI,GACzC,CAACO,GAAUC,CAAW,IAAIF,EAAS,QAAQ,GAE3CG,IAAcC,EAAOT,CAAQ;AAGnC,EAAAU,EAAU,MAAM;AACZ,IAAIX,IAEAK,EAAa,EAAI,KAGjBG,EAAY,QAAQ,GAGpB,WAAW,MAAM;AACb,MAAAH,EAAa,EAAK;AAAA,IACtB,GAAG,CAAC;AAAA,EAEZ,GAAG,CAACL,CAAI,CAAC;AAET,QAAMY,IAA0B,MAAM;AAClC,IAAIZ,KAEA,WAAW,MAAMQ,EAAY,SAAS,GAAGC,EAAY,UAAU,MAAOb,CAAoB;AAAA,EAElG;AAEA,2BACKiB,GAAA,EAAgB,gBAAgB,MAAML,EAAY,QAAQ,GACtD,UAAAJ,KACG,gBAAAU;AAAA,IAACC,EAAO;AAAA,IAAP;AAAA,MACG,SAAS,EAAE,QAAQ,GAAG,SAAS,EAAA;AAAA,MAC/B,SAAS,EAAE,QAAQ,QAAQ,SAAS,EAAA;AAAA,MACpC,MAAM,EAAE,QAAQ,GAAG,SAAS,EAAA;AAAA,MAC5B,YAAY;AAAA,QACR,QAAQ,EAAE,UAAAd,GAAU,OAAAC,EAAA;AAAA,QACpB,SAAS,EAAE,UAAAD,GAAU,OAAAC,EAAA;AAAA,QACrB,MAAM;AAAA,MAAA;AAAA,MAGV,OAAO,EAAE,UAAAK,EAAA;AAAA,MACT,qBAAqBK;AAAA,MACrB,WAAAT;AAAA,MAEC,UAAAJ;AAAA,IAAA;AAAA,EAAA,GAGb;AAER;"}

package/components/filepicker/FilePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker.js","sources":["../../../src/components/filepicker/FilePicker.tsx"],"sourcesContent":["import { type ReactNode, useCallback, useEffect, useRef } from 'react';\nimport Dropzone, { type FileRejection, type DropzoneProps, type DropzoneRef } from 'react-dropzone';\nimport { noop } from 'es-toolkit/compat';\n\nimport Button from '../button/Button';\n\ntype FilePickerRenderProps = {\n    isDragActive: boolean;\n};\n\nexport type FilePickerProps = {\n    /**\n     * Defines the file picker display mode.\n     *\n     * Possible values are `'button'` for a single button, `'dropzone'` for a custom dropzone passed as child function,\n     * or `'full'` for showing both.\n     *\n     * @default 'button'\n     */\n    displayMode?: 'button' | 'dropzone' | 'full';\n\n    /**\n     * Indicating if multiple files may be selected.\n     *\n     * @default true\n     */\n    multiple?: boolean; // multi select\n\n    /**\n     * Text to display on Button if displayMode is set to \"button\".\n     *\n     * @default 'Select files'\n     */\n    label?: string | ReactNode;\n\n    /**\n     * Maximum file size in byte. 5 MB = 5,242,880 byte\n     */\n    maxSize?: number;\n\n    /**\n     * Function called after one or multiple files have been picked.\n     */\n    onPick?: (files: File[], rejectedFiles: FileRejection[]) => void;\n\n    /**\n     * Additional classes for the select button.\n     */\n    className?: string;\n\n    /**\n     * Flag to set the dropzone wrapper element to 100% height.\n     *\n     * This comes in handy, when the dropzone should have 100 % height so it can grow.\n     *\n     * @default false\n     */\n    fullHeight?: boolean;\n\n    /**\n     * Object list of accepted Mime Types as keys and file extensions array as value.\n     */\n    accept?: { [mimeType: string]: string[] };\n\n    /**\n     * Pass a custom dropzone element as function receiving some render props.\n     */\n    children?: ({ isDragActive }: FilePickerRenderProps) => React.ReactElement;\n};\n\nconst FilePicker = (props: FilePickerProps) => {\n    const {\n        displayMode = 'button',\n        multiple = true,\n        label = 'Select files',\n        maxSize,\n        onPick = noop,\n        className = '',\n        accept,\n        fullHeight = false,\n        children,\n        ...remainingProps\n    } = props;\n\n    const dropzoneRef = useRef<DropzoneRef>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    const isFull = displayMode === 'full';\n    const showButton = isFull || displayMode === 'button';\n    const showDropzone = isFull || displayMode === 'dropzone';\n\n    const handleDrop: NonNullable<DropzoneProps['onDrop']> = useCallback(\n        (acceptedFiles, rejectedFiles) => {\n            const hasImagesType = accept && Object.keys(accept).some(mimeType => mimeType.startsWith('image'));\n            const files = hasImagesType\n                ? acceptedFiles.map(file => Object.assign(file, { preview: URL.createObjectURL(file) }))\n                : acceptedFiles;\n\n            onPick(files, rejectedFiles);\n        },\n        [onPick, accept]\n    );\n\n    const handleClick = () => dropzoneRef.current?.open();\n\n    useEffect(() => {\n        // Set height to dropzones inner presentation div where there is no other access to this DOM element.\n        // This comes in handy, when the dropzone should have 100 % height so it can grow.\n        if (wrapperRef.current && fullHeight) {\n            wrapperRef.current.querySelector('.FilePicker > div')?.setAttribute('class', 'height-100pct');\n        }\n    }, [fullHeight, wrapperRef.current]);\n\n    return (\n        <div ref={wrapperRef} className='FilePicker'>\n            {showButton && (\n                <Button onClick={handleClick} className={className}>\n                    {label}\n                </Button>\n            )}\n            <Dropzone\n                {...remainingProps}\n                onDrop={handleDrop}\n                accept={accept}\n                multiple={multiple}\n                maxSize={maxSize}\n                ref={dropzoneRef}\n            >\n                {({ getRootProps, getInputProps, isDragActive }) => {\n                    return (\n                        <div {...getRootProps()}>\n                            <input {...getInputProps()} />\n                            {showDropzone && children && children({ isDragActive })}\n                        </div>\n                    );\n                }}\n            </Dropzone>\n        </div>\n    );\n};\n\nFilePicker.DISPLAY_MODE_BUTTON = 'button' as const;\nFilePicker.DISPLAY_MODE_DROPZONE = 'dropzone' as const;\nFilePicker.DISPLAY_MODE_FULL = 'full' as const;\n\nexport default FilePicker;\n"],"names":["FilePicker","props","displayMode","multiple","label","maxSize","onPick","noop","className","accept","fullHeight","children","remainingProps","dropzoneRef","useRef","wrapperRef","isFull","showButton","showDropzone","handleDrop","useCallback","acceptedFiles","rejectedFiles","files","mimeType","file","handleClick","useEffect","jsxs","jsx","Button","Dropzone","getRootProps","getInputProps","isDragActive"],"mappings":";;;;;AAsEA,MAAMA,IAAa,CAACC,MAA2B;AAC3C,QAAM;AAAA,IACF,aAAAC,IAAc;AAAA,IACd,UAAAC,IAAW;AAAA,IACX,OAAAC,IAAQ;AAAA,IACR,SAAAC;AAAA,IACA,QAAAC,IAASC;AAAA,IACT,WAAAC,IAAY;AAAA,IACZ,QAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHX,GAEEY,IAAcC,EAAoB,IAAI,GACtCC,IAAaD,EAAuB,IAAI,GAExCE,IAASd,MAAgB,QACzBe,IAAaD,KAAUd,MAAgB,UACvCgB,IAAeF,KAAUd,MAAgB,YAEzCiB,IAAmDC;AAAA,IACrD,CAACC,GAAeC,MAAkB;AAE9B,YAAMC,IADgBd,KAAU,OAAO,KAAKA,CAAM,EAAE,KAAK,CAAAe,MAAYA,EAAS,WAAW,OAAO,CAAC,IAE3FH,EAAc,IAAI,CAAAI,MAAQ,OAAO,OAAOA,GAAM,EAAE,SAAS,IAAI,gBAAgBA,CAAI,EAAA,CAAG,CAAC,IACrFJ;AAEN,MAAAf,EAAOiB,GAAOD,CAAa;AAAA,IAC/B;AAAA,IACA,CAAChB,GAAQG,CAAM;AAAA,EAAA,GAGbiB,IAAc,MAAMb,EAAY,SAAS,KAAA;AAE/C,SAAAc,EAAU,MAAM;AAGZ,IAAIZ,EAAW,WAAWL,KACtBK,EAAW,QAAQ,cAAc,mBAAmB,GAAG,aAAa,SAAS,eAAe;AAAA,EAEpG,GAAG,CAACL,GAAYK,EAAW,OAAO,CAAC,GAG/B,gBAAAa,EAAC,OAAA,EAAI,KAAKb,GAAY,WAAU,cAC3B,UAAA;AAAA,IAAAE,KACG,gBAAAY,EAACC,GAAA,EAAO,SAASJ,GAAa,WAAAlB,GACzB,UAAAJ,GACL;AAAA,IAEJ,gBAAAyB;AAAA,MAACE;AAAA,MAAA;AAAA,QACI,GAAGnB;AAAA,QACJ,QAAQO;AAAA,QACR,QAAAV;AAAA,QACA,UAAAN;AAAA,QACA,SAAAE;AAAA,QACA,KAAKQ;AAAA,QAEJ,UAAA,CAAC,EAAE,cAAAmB,GAAc,eAAAC,GAAe,cAAAC,QAEzB,gBAAAN,EAAC,OAAA,EAAK,GAAGI,EAAA,GACL,UAAA;AAAA,UAAA,gBAAAH,EAAC,SAAA,EAAO,GAAGI,EAAA,EAAc,CAAG;AAAA,UAC3Bf,KAAgBP,KAAYA,EAAS,EAAE,cAAAuB,GAAc;AAAA,QAAA,GAC1D;AAAA,MAER;AAAA,IAAA;AAAA,EACJ,GACJ;AAER;AAEAlC,EAAW,sBAAsB;AACjCA,EAAW,wBAAwB;AACnCA,EAAW,oBAAoB;"}
+{"version":3,"file":"FilePicker.js","sources":["../../../src/components/filepicker/FilePicker.tsx"],"sourcesContent":["import { type ReactNode, useCallback, useEffect, useRef } from 'react';\nimport Dropzone, { type FileRejection, type DropzoneProps, type DropzoneRef } from 'react-dropzone';\nimport { noop } from 'es-toolkit/compat';\n\nimport Button from '../button/Button';\n\ntype FilePickerRenderProps = {\n    isDragActive: boolean;\n};\n\nexport type FilePickerProps = {\n    /**\n     * Defines the file picker display mode.\n     *\n     * Possible values are `'button'` for a single button, `'dropzone'` for a custom dropzone passed as child function,\n     * or `'full'` for showing both.\n     *\n     * @default 'button'\n     */\n    displayMode?: 'button' | 'dropzone' | 'full';\n\n    /**\n     * Indicating if multiple files may be selected.\n     *\n     * @default true\n     */\n    multiple?: boolean; // multi select\n\n    /**\n     * Text to display on Button if displayMode is set to \"button\".\n     *\n     * @default 'Select files'\n     */\n    label?: string | ReactNode;\n\n    /**\n     * Maximum file size in byte. 5 MB = 5,242,880 byte\n     */\n    maxSize?: number;\n\n    /**\n     * Function called after one or multiple files have been picked.\n     */\n    onPick?: (files: File[], rejectedFiles: FileRejection[]) => void;\n\n    /**\n     * Additional classes for the select button.\n     */\n    className?: string;\n\n    /**\n     * Flag to set the dropzone wrapper element to 100% height.\n     *\n     * This comes in handy, when the dropzone should have 100 % height so it can grow.\n     *\n     * @default false\n     */\n    fullHeight?: boolean;\n\n    /**\n     * Object list of accepted Mime Types as keys and file extensions array as value.\n     */\n    accept?: { [mimeType: string]: string[] };\n\n    /**\n     * Pass a custom dropzone element as function receiving some render props.\n     */\n    children?: ({ isDragActive }: FilePickerRenderProps) => React.ReactElement;\n};\n\nconst FilePicker = (props: FilePickerProps) => {\n    const {\n        displayMode = 'button',\n        multiple = true,\n        label = 'Select files',\n        maxSize,\n        onPick = noop,\n        className = '',\n        accept,\n        fullHeight = false,\n        children,\n        ...remainingProps\n    } = props;\n\n    const dropzoneRef = useRef<DropzoneRef>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    const isFull = displayMode === 'full';\n    const showButton = isFull || displayMode === 'button';\n    const showDropzone = isFull || displayMode === 'dropzone';\n\n    const handleDrop: NonNullable<DropzoneProps['onDrop']> = useCallback(\n        (acceptedFiles, rejectedFiles) => {\n            const hasImagesType = accept && Object.keys(accept).some(mimeType => mimeType.startsWith('image'));\n            const files = hasImagesType\n                ? acceptedFiles.map(file => Object.assign(file, { preview: URL.createObjectURL(file) }))\n                : acceptedFiles;\n\n            onPick(files, rejectedFiles);\n        },\n        [onPick, accept]\n    );\n\n    const handleClick = () => dropzoneRef.current?.open();\n\n    useEffect(() => {\n        // Set height to dropzones inner presentation div where there is no other access to this DOM element.\n        // This comes in handy, when the dropzone should have 100 % height so it can grow.\n        if (wrapperRef.current && fullHeight) {\n            wrapperRef.current.querySelector('.FilePicker > div')?.setAttribute('class', 'height-100pct');\n        }\n    }, [fullHeight, wrapperRef.current]);\n\n    return (\n        <div ref={wrapperRef} className='FilePicker'>\n            {showButton && (\n                <Button onClick={handleClick} className={className}>\n                    {label}\n                </Button>\n            )}\n            <Dropzone\n                {...remainingProps}\n                onDrop={handleDrop}\n                accept={accept}\n                multiple={multiple}\n                maxSize={maxSize}\n                ref={dropzoneRef}\n            >\n                {({ getRootProps, getInputProps, isDragActive }) => (\n                    <div {...getRootProps()}>\n                        <input {...getInputProps()} />\n                        {showDropzone && children && children({ isDragActive })}\n                    </div>\n                )}\n            </Dropzone>\n        </div>\n    );\n};\n\nFilePicker.DISPLAY_MODE_BUTTON = 'button' as const;\nFilePicker.DISPLAY_MODE_DROPZONE = 'dropzone' as const;\nFilePicker.DISPLAY_MODE_FULL = 'full' as const;\n\nexport default FilePicker;\n"],"names":["FilePicker","props","displayMode","multiple","label","maxSize","onPick","noop","className","accept","fullHeight","children","remainingProps","dropzoneRef","useRef","wrapperRef","isFull","showButton","showDropzone","handleDrop","useCallback","acceptedFiles","rejectedFiles","files","mimeType","file","handleClick","useEffect","jsxs","jsx","Button","Dropzone","getRootProps","getInputProps","isDragActive"],"mappings":";;;;;AAsEA,MAAMA,IAAa,CAACC,MAA2B;AAC3C,QAAM;AAAA,IACF,aAAAC,IAAc;AAAA,IACd,UAAAC,IAAW;AAAA,IACX,OAAAC,IAAQ;AAAA,IACR,SAAAC;AAAA,IACA,QAAAC,IAASC;AAAA,IACT,WAAAC,IAAY;AAAA,IACZ,QAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHX,GAEEY,IAAcC,EAAoB,IAAI,GACtCC,IAAaD,EAAuB,IAAI,GAExCE,IAASd,MAAgB,QACzBe,IAAaD,KAAUd,MAAgB,UACvCgB,IAAeF,KAAUd,MAAgB,YAEzCiB,IAAmDC;AAAA,IACrD,CAACC,GAAeC,MAAkB;AAE9B,YAAMC,IADgBd,KAAU,OAAO,KAAKA,CAAM,EAAE,KAAK,CAAAe,MAAYA,EAAS,WAAW,OAAO,CAAC,IAE3FH,EAAc,IAAI,CAAAI,MAAQ,OAAO,OAAOA,GAAM,EAAE,SAAS,IAAI,gBAAgBA,CAAI,EAAA,CAAG,CAAC,IACrFJ;AAEN,MAAAf,EAAOiB,GAAOD,CAAa;AAAA,IAC/B;AAAA,IACA,CAAChB,GAAQG,CAAM;AAAA,EAAA,GAGbiB,IAAc,MAAMb,EAAY,SAAS,KAAA;AAE/C,SAAAc,EAAU,MAAM;AAGZ,IAAIZ,EAAW,WAAWL,KACtBK,EAAW,QAAQ,cAAc,mBAAmB,GAAG,aAAa,SAAS,eAAe;AAAA,EAEpG,GAAG,CAACL,GAAYK,EAAW,OAAO,CAAC,GAG/B,gBAAAa,EAAC,OAAA,EAAI,KAAKb,GAAY,WAAU,cAC3B,UAAA;AAAA,IAAAE,KACG,gBAAAY,EAACC,GAAA,EAAO,SAASJ,GAAa,WAAAlB,GACzB,UAAAJ,GACL;AAAA,IAEJ,gBAAAyB;AAAA,MAACE;AAAA,MAAA;AAAA,QACI,GAAGnB;AAAA,QACJ,QAAQO;AAAA,QACR,QAAAV;AAAA,QACA,UAAAN;AAAA,QACA,SAAAE;AAAA,QACA,KAAKQ;AAAA,QAEJ,UAAA,CAAC,EAAE,cAAAmB,GAAc,eAAAC,GAAe,cAAAC,EAAA,MAC7B,gBAAAN,EAAC,OAAA,EAAK,GAAGI,EAAA,GACL,UAAA;AAAA,UAAA,gBAAAH,EAAC,SAAA,EAAO,GAAGI,EAAA,EAAc,CAAG;AAAA,UAC3Bf,KAAgBP,KAAYA,EAAS,EAAE,cAAAuB,GAAc;AAAA,QAAA,EAAA,CAC1D;AAAA,MAAA;AAAA,IAAA;AAAA,EAER,GACJ;AAER;AAEAlC,EAAW,sBAAsB;AACjCA,EAAW,wBAAwB;AACnCA,EAAW,oBAAoB;"}

package/components/loadMore/LoadMoreButton.d.ts

@@ -37,6 +37,11 @@ type LoadMoreButtonProps = {
      * Additional classes to be set on the wrapper element.
      */
     className?: string;
+    /**
+     * Hides the wrapper in print styles.
+     * @default true
+     */
+    hideOnPrint?: boolean;
 };
 export declare const LoadMoreButton: (props: LoadMoreButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default LoadMoreButton;

package/components/loadMore/LoadMoreButton.js

@@ -1,50 +1,54 @@
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import h from "../../utils/classNames.js";
-import { LoadMoreProgress as N } from "./LoadMoreProgress.js";
-const f = (i) => {
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import N from "../../utils/classNames.js";
+import { mergeClassNameOverrides as u } from "../../utils/mergeClassNameOverrides.js";
+import { LoadMoreProgress as f } from "./LoadMoreProgress.js";
+const x = (i) => {
   const {
-    loaded: a = 0,
-    total: e = 100,
+    loaded: o = 0,
+    total: a = 100,
     onLoadMore: d = () => {
     },
-    loadMoreMessage: n = "",
+    loadMoreMessage: s = "",
     noMoreMessage: l = "",
-    isInteractive: r = !0,
-    progressBarStyle: c,
+    isInteractive: n = !0,
+    progressBarStyle: m,
     className: p = "",
-    ...m
-  } = i, g = h(
-    "LoadMoreButton",
-    "align-items-center",
-    "display-flex",
-    "justify-content-center",
-    "margin-top-25",
-    "margin-bottom-25",
-    "non-printable",
+    hideOnPrint: c = !0,
+    ...g
+  } = i, h = u(
+    N(
+      "LoadMoreButton",
+      "align-items-center",
+      "display-flex",
+      "justify-content-center",
+      "margin-top-25",
+      "margin-bottom-25",
+      c && "non-printable"
+    ),
     p
-  ), t = a > 0 && e > 0 && a < e;
-  return /* @__PURE__ */ o("div", { ...m, className: g, children: /* @__PURE__ */ s("div", { className: "min-width-150", children: [
-    /* @__PURE__ */ o(N, { loaded: a, total: e, progressBarStyle: c }),
-    /* @__PURE__ */ s("div", { className: "display-flex justify-content-center", children: [
-      t && r && /* @__PURE__ */ s(
+  ), t = o > 0 && a > 0 && o < a;
+  return /* @__PURE__ */ e("div", { ...g, className: h, children: /* @__PURE__ */ r("div", { className: "min-width-150", children: [
+    /* @__PURE__ */ e(f, { loaded: o, total: a, progressBarStyle: m }),
+    /* @__PURE__ */ r("div", { className: "display-flex justify-content-center", children: [
+      t && n && /* @__PURE__ */ r(
         "button",
         {
           className: "btn btn-link padding-right-20 margin-top--5",
           type: "button",
           onClick: d,
           children: [
-            /* @__PURE__ */ o("span", { className: "rioglyph rioglyph-arrow-down" }),
-            n
+            /* @__PURE__ */ e("span", { className: "rioglyph rioglyph-arrow-down" }),
+            s
           ]
         }
       ),
-      t && !r && /* @__PURE__ */ o("span", { className: "padding-top-4 padding-bottom-10", children: n }),
-      !t && /* @__PURE__ */ o("span", { className: "padding-top-4 padding-bottom-10", children: l })
+      t && !n && /* @__PURE__ */ e("span", { className: "padding-top-4 padding-bottom-10", children: s }),
+      !t && /* @__PURE__ */ e("span", { className: "padding-top-4 padding-bottom-10", children: l })
     ] })
   ] }) });
 };
 export {
-  f as LoadMoreButton,
-  f as default
+  x as LoadMoreButton,
+  x as default
 };
 //# sourceMappingURL=LoadMoreButton.js.map

package/components/loadMore/LoadMoreButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadMoreButton.js","sources":["../../../src/components/loadMore/LoadMoreButton.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport { LoadMoreProgress, type ProgressBarStyle } from './LoadMoreProgress';\n\ntype LoadMoreButtonProps = {\n    /**\n     * The number of already loaded elements. If set to 0 the progress bar will not be shown.\n     * @default 0\n     */\n    loaded?: number;\n\n    /**\n     * The number of all elements. If set to 0 the progress bar will not be shown.\n     * @default 100\n     */\n    total?: number;\n\n    /**\n     * The message that will be shown when everything is loaded.\n     */\n    noMoreMessage?: string | ReactNode;\n\n    /**\n     * The text for the load more button.\n     */\n    loadMoreMessage?: string | ReactNode;\n\n    /**\n     * If set to `false`, the button will not be rendered. The loadMoreMessage will be shown as text.\n     * @default true\n     */\n    isInteractive?: boolean;\n\n    /**\n     * Callback fired when clicking on the load more button.\n     */\n    onLoadMore?: VoidFunction;\n\n    /**\n     * In case the component is used on white background, set the progress bar style to `gray`.\n     * @default 'white'\n     */\n    progressBarStyle?: ProgressBarStyle;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\nexport const LoadMoreButton = (props: LoadMoreButtonProps) => {\n    const {\n        loaded = 0,\n        total = 100,\n        onLoadMore = () => {},\n        loadMoreMessage = '',\n        noMoreMessage = '',\n        isInteractive = true,\n        progressBarStyle,\n        className = '',\n        ...remainingProps\n    } = props;\n\n    const wrapperClassNames = classNames(\n        'LoadMoreButton',\n        'align-items-center',\n        'display-flex',\n        'justify-content-center',\n        'margin-top-25',\n        'margin-bottom-25',\n        'non-printable',\n        className\n    );\n\n    const hasMoreToLoad = loaded > 0 && total > 0 && loaded < total;\n\n    return (\n        <div {...remainingProps} className={wrapperClassNames}>\n            <div className='min-width-150'>\n                <LoadMoreProgress loaded={loaded} total={total} progressBarStyle={progressBarStyle} />\n                <div className='display-flex justify-content-center'>\n                    {hasMoreToLoad && isInteractive && (\n                        <button\n                            className='btn btn-link padding-right-20 margin-top--5'\n                            type='button'\n                            onClick={onLoadMore}\n                        >\n                            <span className='rioglyph rioglyph-arrow-down' />\n                            {loadMoreMessage}\n                        </button>\n                    )}\n                    {hasMoreToLoad && !isInteractive && (\n                        <span className='padding-top-4 padding-bottom-10'>{loadMoreMessage}</span>\n                    )}\n                    {!hasMoreToLoad && <span className='padding-top-4 padding-bottom-10'>{noMoreMessage}</span>}\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default LoadMoreButton;\n"],"names":["LoadMoreButton","props","loaded","total","onLoadMore","loadMoreMessage","noMoreMessage","isInteractive","progressBarStyle","className","remainingProps","wrapperClassNames","classNames","hasMoreToLoad","jsx","jsxs","LoadMoreProgress"],"mappings":";;;AAmDO,MAAMA,IAAiB,CAACC,MAA+B;AAC1D,QAAM;AAAA,IACF,QAAAC,IAAS;AAAA,IACT,OAAAC,IAAQ;AAAA,IACR,YAAAC,IAAa,MAAM;AAAA,IAAC;AAAA,IACpB,iBAAAC,IAAkB;AAAA,IAClB,eAAAC,IAAgB;AAAA,IAChB,eAAAC,IAAgB;AAAA,IAChB,kBAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,GAAGC;AAAA,EAAA,IACHT,GAEEU,IAAoBC;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAH;AAAA,EAAA,GAGEI,IAAgBX,IAAS,KAAKC,IAAQ,KAAKD,IAASC;AAE1D,SACI,gBAAAW,EAAC,SAAK,GAAGJ,GAAgB,WAAWC,GAChC,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,iBACX,UAAA;AAAA,IAAA,gBAAAD,EAACE,GAAA,EAAiB,QAAAd,GAAgB,OAAAC,GAAc,kBAAAK,EAAA,CAAoC;AAAA,IACpF,gBAAAO,EAAC,OAAA,EAAI,WAAU,uCACV,UAAA;AAAA,MAAAF,KAAiBN,KACd,gBAAAQ;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAU;AAAA,UACV,MAAK;AAAA,UACL,SAASX;AAAA,UAET,UAAA;AAAA,YAAA,gBAAAU,EAAC,QAAA,EAAK,WAAU,+BAAA,CAA+B;AAAA,YAC9CT;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAGRQ,KAAiB,CAACN,uBACd,QAAA,EAAK,WAAU,mCAAmC,UAAAF,GAAgB;AAAA,MAEtE,CAACQ,KAAiB,gBAAAC,EAAC,QAAA,EAAK,WAAU,mCAAmC,UAAAR,EAAA,CAAc;AAAA,IAAA,EAAA,CACxF;AAAA,EAAA,EAAA,CACJ,EAAA,CACJ;AAER;"}
+{"version":3,"file":"LoadMoreButton.js","sources":["../../../src/components/loadMore/LoadMoreButton.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport { mergeClassNameOverrides } from '../../utils/mergeClassNameOverrides';\nimport { LoadMoreProgress, type ProgressBarStyle } from './LoadMoreProgress';\n\ntype LoadMoreButtonProps = {\n    /**\n     * The number of already loaded elements. If set to 0 the progress bar will not be shown.\n     * @default 0\n     */\n    loaded?: number;\n\n    /**\n     * The number of all elements. If set to 0 the progress bar will not be shown.\n     * @default 100\n     */\n    total?: number;\n\n    /**\n     * The message that will be shown when everything is loaded.\n     */\n    noMoreMessage?: string | ReactNode;\n\n    /**\n     * The text for the load more button.\n     */\n    loadMoreMessage?: string | ReactNode;\n\n    /**\n     * If set to `false`, the button will not be rendered. The loadMoreMessage will be shown as text.\n     * @default true\n     */\n    isInteractive?: boolean;\n\n    /**\n     * Callback fired when clicking on the load more button.\n     */\n    onLoadMore?: VoidFunction;\n\n    /**\n     * In case the component is used on white background, set the progress bar style to `gray`.\n     * @default 'white'\n     */\n    progressBarStyle?: ProgressBarStyle;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * Hides the wrapper in print styles.\n     * @default true\n     */\n    hideOnPrint?: boolean;\n};\n\nexport const LoadMoreButton = (props: LoadMoreButtonProps) => {\n    const {\n        loaded = 0,\n        total = 100,\n        onLoadMore = () => {},\n        loadMoreMessage = '',\n        noMoreMessage = '',\n        isInteractive = true,\n        progressBarStyle,\n        className = '',\n        hideOnPrint = true,\n        ...remainingProps\n    } = props;\n\n    const wrapperClassNames = mergeClassNameOverrides(\n        classNames(\n            'LoadMoreButton',\n            'align-items-center',\n            'display-flex',\n            'justify-content-center',\n            'margin-top-25',\n            'margin-bottom-25',\n            hideOnPrint && 'non-printable'\n        ),\n        className\n    );\n\n    const hasMoreToLoad = loaded > 0 && total > 0 && loaded < total;\n\n    return (\n        <div {...remainingProps} className={wrapperClassNames}>\n            <div className='min-width-150'>\n                <LoadMoreProgress loaded={loaded} total={total} progressBarStyle={progressBarStyle} />\n                <div className='display-flex justify-content-center'>\n                    {hasMoreToLoad && isInteractive && (\n                        <button\n                            className='btn btn-link padding-right-20 margin-top--5'\n                            type='button'\n                            onClick={onLoadMore}\n                        >\n                            <span className='rioglyph rioglyph-arrow-down' />\n                            {loadMoreMessage}\n                        </button>\n                    )}\n                    {hasMoreToLoad && !isInteractive && (\n                        <span className='padding-top-4 padding-bottom-10'>{loadMoreMessage}</span>\n                    )}\n                    {!hasMoreToLoad && <span className='padding-top-4 padding-bottom-10'>{noMoreMessage}</span>}\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default LoadMoreButton;\n"],"names":["LoadMoreButton","props","loaded","total","onLoadMore","loadMoreMessage","noMoreMessage","isInteractive","progressBarStyle","className","hideOnPrint","remainingProps","wrapperClassNames","mergeClassNameOverrides","classNames","hasMoreToLoad","jsx","jsxs","LoadMoreProgress"],"mappings":";;;;AA0DO,MAAMA,IAAiB,CAACC,MAA+B;AAC1D,QAAM;AAAA,IACF,QAAAC,IAAS;AAAA,IACT,OAAAC,IAAQ;AAAA,IACR,YAAAC,IAAa,MAAM;AAAA,IAAC;AAAA,IACpB,iBAAAC,IAAkB;AAAA,IAClB,eAAAC,IAAgB;AAAA,IAChB,eAAAC,IAAgB;AAAA,IAChB,kBAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,aAAAC,IAAc;AAAA,IACd,GAAGC;AAAA,EAAA,IACHV,GAEEW,IAAoBC;AAAA,IACtBC;AAAA,MACI;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACAJ,KAAe;AAAA,IAAA;AAAA,IAEnBD;AAAA,EAAA,GAGEM,IAAgBb,IAAS,KAAKC,IAAQ,KAAKD,IAASC;AAE1D,SACI,gBAAAa,EAAC,SAAK,GAAGL,GAAgB,WAAWC,GAChC,UAAA,gBAAAK,EAAC,OAAA,EAAI,WAAU,iBACX,UAAA;AAAA,IAAA,gBAAAD,EAACE,GAAA,EAAiB,QAAAhB,GAAgB,OAAAC,GAAc,kBAAAK,EAAA,CAAoC;AAAA,IACpF,gBAAAS,EAAC,OAAA,EAAI,WAAU,uCACV,UAAA;AAAA,MAAAF,KAAiBR,KACd,gBAAAU;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAU;AAAA,UACV,MAAK;AAAA,UACL,SAASb;AAAA,UAET,UAAA;AAAA,YAAA,gBAAAY,EAAC,QAAA,EAAK,WAAU,+BAAA,CAA+B;AAAA,YAC9CX;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAGRU,KAAiB,CAACR,uBACd,QAAA,EAAK,WAAU,mCAAmC,UAAAF,GAAgB;AAAA,MAEtE,CAACU,KAAiB,gBAAAC,EAAC,QAAA,EAAK,WAAU,mCAAmC,UAAAV,EAAA,CAAc;AAAA,IAAA,EAAA,CACxF;AAAA,EAAA,EAAA,CACJ,EAAA,CACJ;AAER;"}

package/components/loadMore/LoadMoreProgress.js

@@ -4,16 +4,16 @@ import o from "../../utils/classNames.js";
 const t = {
   WHITE: "white",
   GRAY: "gray"
-}, p = ({ loaded: e = 0, total: s = 0, progressBarStyle: a = t.WHITE }) => {
+}, p = ({ loaded: e = 0, total: s = 0, progressBarStyle: i = t.WHITE }) => {
   if (!e || !s)
     return null;
-  const i = `${e / s * 100}%`, n = o(
+  const a = `${e / s * 100}%`, n = o(
     "progress",
     "height-2 margin-bottom-10",
-    a === t.GRAY ? "bg-lighter" : "bg-white"
+    i === t.GRAY ? "bg-lighter" : "bg-white"
   ), c = o(
     "progress-bar",
-    a === t.GRAY && i !== "100%" && "border border-right-only border-color-white border-width-2"
+    i === t.GRAY && a !== "100%" && "border border-right-only border-color-white border-width-2"
   );
   return /* @__PURE__ */ m(l.Fragment, { children: [
     /* @__PURE__ */ m("div", { className: "text-center margin-bottom-3", children: [
@@ -21,11 +21,10 @@ const t = {
       /* @__PURE__ */ r("span", { className: "margin-left-5 margin-right-5", children: "/" }),
       /* @__PURE__ */ r("span", { className: "text-medium", children: s })
     ] }),
-    /* @__PURE__ */ r("div", { className: n, children: /* @__PURE__ */ r("div", { className: c, style: { width: i } }) })
+    /* @__PURE__ */ r("div", { className: n, children: /* @__PURE__ */ r("div", { className: c, style: { width: a } }) })
   ] });
 };
 export {
-  p as LoadMoreProgress,
-  p as default
+  p as LoadMoreProgress
 };
 //# sourceMappingURL=LoadMoreProgress.js.map

package/components/map/components/Map.js

@@ -13,7 +13,7 @@ import Ue from "./features/layers/MapOverlayLayers.js";
 import ze from "./MapSize.js";
 import je from "./MapPosition.js";
 import qe from "./MapElements.js";
-import { getPlatform as Ge, getEngineType as ke, getBaseLayer as Xe } from "../utils/rendering.js";
+import { getPlatform as Ge, getBaseLayer as ke, getEngineType as Xe } from "../utils/rendering.js";
 const n = (K) => {
   const {
     children: Q,
@@ -61,8 +61,8 @@ const n = (K) => {
   T(() => {
     let e = [];
     t?.map ? (e = t.map.getObjects(), console.debug("re-initialize here map")) : console.debug("initialize here map"), t?.map && (console.debug("disposing previous map"), xe(t.map), t.mapEvents && t.mapEvents.dispose(), t.map.dispose());
-    const I = g && Fe(g), r = Ge(O), d = ke(o, c), u = r.createDefaultLayers({ engineType: d, lg: i, pois: !0 });
-    Xe({
+    const I = g && Fe(g), r = Ge(O), d = Xe(o, c), u = r.createDefaultLayers({ engineType: d, lg: i, pois: !0 });
+    ke({
       baseLayerName: o,
       defaultLayers: u,
       enableWebGL: c,

package/components/map/components/features/ContextMenu.js

@@ -5,19 +5,19 @@ import { useMapContext as M } from "../MapContext.js";
 const L = "H_context_menu_item", T = (
   // eslint-disable-next-line max-len
   '<svg aria-labelledby="ggtrwic-aria" role="img" height="14" width="135px" class="ContentLoader  use-mix-blend-mode"><title id="ggtrwic-aria">Loading...</title><rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#ggtrwic-diff)" style="fill: url(&quot;#ggtrwic-animated-diff&quot;);"></rect><defs><clipPath id="ggtrwic-diff"><rect width="100%" height="100%" rx="3" ry="3"></rect></clipPath><linearGradient id="ggtrwic-animated-diff"><stop offset="0%" stop-color="#f5f6f7" stop-opacity="1"><animate attributeName="offset" values="-2; -2; 1" keyTimes="0; 0.25; 1" dur="2s" repeatCount="indefinite"></animate></stop><stop offset="50%" stop-color="#aaaaaa" stop-opacity="1"><animate attributeName="offset" values="-1; -1; 2" keyTimes="0; 0.25; 1" dur="2s" repeatCount="indefinite"></animate></stop><stop offset="100%" stop-color="#f5f6f7" stop-opacity="1"><animate attributeName="offset" values="0; 0; 3" keyTimes="0; 0.25; 1" dur="2s" repeatCount="indefinite"></animate></stop></linearGradient></defs></svg>'
-), h = () => [...document.getElementsByClassName(L)], w = (o, s) => {
-  Array.from(o).forEach((n, a) => {
+), h = () => [...document.getElementsByClassName(L)], w = (n, s) => {
+  Array.from(n).forEach((o, a) => {
     const r = s[a];
     if (!r)
       return;
     const { hasSpinner: f, className: c, labelClassName: t = "", icon: i, label: p } = r.props, e = `<span class="${t}">${p}</span>`, l = `<span class="rioglyph ${i} margin-right-5"></span>${e}`, u = i ? l : e;
-    f ? n.innerHTML = T : n.innerHTML = u;
-    const x = n.classList;
+    f ? o.innerHTML = T : o.innerHTML = u;
+    const x = o.classList;
     c && c.split(" ").map((E) => x.add(E));
   });
-}, y = (o, s, n, a) => {
-  const r = o.length - 1, f = s.viewportX, c = a || n.screenToGeo(f, s.viewportY);
-  o.forEach((t, i) => {
+}, y = (n, s, o, a) => {
+  const r = n.length - 1, f = s.viewportX, c = a || o.screenToGeo(f, s.viewportY);
+  n.forEach((t, i) => {
     if (!t)
       return;
     const { label: p, disabled: e, callback: l = b } = t.props;
@@ -29,20 +29,20 @@ const L = "H_context_menu_item", T = (
       })
     ), i < r && s.items.push(H.util.ContextItem.SEPARATOR);
   });
-}, v = (o) => o.type === "contextmenu", m = (o, s) => o.target === s || o.target?.data?.source_name?.startsWith("H-"), P = (o) => {
-  const { onOpen: s = b, menuItems: n, contextMenuEvent: a, targetPosition: r } = o, { api: f, baseLayer: c } = M(), { map: t } = f, i = C();
+}, v = (n) => n.type === "contextmenu", m = (n, s) => n.target === s || n.target?.data?.source_name?.startsWith("H-"), P = (n) => {
+  const { onOpen: s = b, menuItems: o, contextMenuEvent: a, targetPosition: r } = n, { api: f, baseLayer: c } = M(), { map: t } = f, i = C();
   i.current = r, d(() => {
-    if (n && t) {
+    if (o && t) {
       const e = g(a?.items);
-      a && !m(a, t) && e && y(n, a, t, i.current), w(h(), n);
+      a && !m(a, t) && e && y(o, a, t, i.current), w(h(), o);
     }
-  }, [n, a, i.current]);
+  }, [o, a, i.current]);
   const p = (e) => {
     if (!v(e) || !t)
       return;
     m(e, t) && (i.current = void 0);
     const l = e.viewportX, u = i.current || t?.screenToGeo(l, e.viewportY);
-    u && s(u), m(e, t) && n && g(e.items) && (y(n, e, t, r), w(h(), n));
+    u && s(u), m(e, t) && o && g(e.items) && (y(o, e, t, r), w(h(), o));
   };
   return d(() => {
     if (t)