@rio-cloud/rio-uikit 2.1.0 → 2.2.0

package/components/assetTree/TreeSidebarCategories.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeSidebarCategories.js","sources":["../../../src/components/assetTree/TreeSidebarCategories.tsx"],"sourcesContent":["import type React from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\n\nimport OverlayTrigger from '../overlay/OverlayTrigger';\nimport Tooltip from '../tooltip/Tooltip';\nimport type { TreeCategoryNode } from './TreeCategory';\n\nconst ACTIVE_CLASS_NAME = 'active';\nconst SELECTED_CLASS_NAME = 'selected';\n\nconst TOOLTIP_DELAY = 1500;\n\nexport type TreeSidebarCategoriesProps = {\n    currentCategoryId?: string;\n    onSelectCategory?: (selectedCategory: string) => void;\n    children?: TreeCategoryNode[];\n};\n\nconst TreeSidebarCategories = (props: TreeSidebarCategoriesProps) => {\n    const { children, currentCategoryId, onSelectCategory = noop } = props;\n\n    if (!children) {\n        return null;\n    }\n\n    return (\n        <>\n            {children.map(child => {\n                const id = child.props.id;\n                const icon = child.props.icon || '';\n                const label = child.props.label;\n\n                const statusClassName = classNames(\n                    currentCategoryId === id ? ACTIVE_CLASS_NAME : '',\n                    child.props.hasSelection && SELECTED_CLASS_NAME\n                );\n\n                const handleSelectCategory = (event: React.MouseEvent<HTMLLIElement>) => {\n                    event.stopPropagation();\n                    onSelectCategory(id);\n                };\n\n                const category = (\n                    <li key={id} onClick={handleSelectCategory} className={statusClassName}>\n                        <div className='selection-bubble'>\n                            <span className={`rioglyph ${icon}`} />\n                        </div>\n                    </li>\n                );\n\n                if (label) {\n                    return (\n                        <OverlayTrigger\n                            key={`category-tooltip-${id}`}\n                            placement={Tooltip.RIGHT}\n                            delay={{ show: TOOLTIP_DELAY, hide: 0 }}\n                            overlay={\n                                <Tooltip id='tooltip' width='auto'>\n                                    <span>{label}</span>\n                                </Tooltip>\n                            }\n                        >\n                            {category}\n                        </OverlayTrigger>\n                    );\n                }\n\n                return category;\n            })}\n        </>\n    );\n};\n\nexport default TreeSidebarCategories;\n"],"names":["ACTIVE_CLASS_NAME","SELECTED_CLASS_NAME","TOOLTIP_DELAY","TreeSidebarCategories","props","children","currentCategoryId","onSelectCategory","noop","jsx","Fragment","child","id","icon","label","statusClassName","classNames","category","event","OverlayTrigger","Tooltip"],"mappings":";;;;;AAQA,MAAMA,IAAoB,UACpBC,IAAsB,YAEtBC,IAAgB,MAQhBC,IAAwB,CAACC,MAAsC;AACjE,QAAM,EAAE,UAAAC,GAAU,mBAAAC,GAAmB,kBAAAC,IAAmBC,MAASJ;AAEjE,SAAKC,IAKD,gBAAAI,EAAAC,GAAA,EACK,UAAAL,EAAS,IAAI,CAAAM,MAAS;AACnB,UAAMC,IAAKD,EAAM,MAAM,IACjBE,IAAOF,EAAM,MAAM,QAAQ,IAC3BG,IAAQH,EAAM,MAAM,OAEpBI,IAAkBC;AAAA,MACpBV,MAAsBM,IAAKZ,IAAoB;AAAA,MAC/CW,EAAM,MAAM,gBAAgBV;AAAA,IAAA,GAQ1BgB,IACF,gBAAAR,EAAC,MAAA,EAAY,SANY,CAACS,MAA2C;AACrE,MAAAA,EAAM,gBAAA,GACNX,EAAiBK,CAAE;AAAA,IACvB,GAGgD,WAAWG,GACnD,UAAA,gBAAAN,EAAC,OAAA,EAAI,WAAU,oBACX,UAAA,gBAAAA,EAAC,UAAK,WAAW,YAAYI,CAAI,GAAA,CAAI,GACzC,KAHKD,CAIT;AAGJ,WAAIE,IAEI,gBAAAL;AAAA,MAACU;AAAA,MAAA;AAAA,QAEG,WAAWC,EAAQ;AAAA,QACnB,OAAO,EAAE,MAAMlB,GAAe,MAAM,EAAA;AAAA,QACpC,SACI,gBAAAO,EAACW,GAAA,EAAQ,IAAG,WAAU,OAAM,QACxB,UAAA,gBAAAX,EAAC,QAAA,EAAM,UAAAK,EAAA,CAAM,EAAA,CACjB;AAAA,QAGH,UAAAG;AAAA,MAAA;AAAA,MATI,oBAAoBL,CAAE;AAAA,IAAA,IAchCK;AAAA,EACX,CAAC,EAAA,CACL,IA/CO;AAiDf;"}
+{"version":3,"file":"TreeSidebarCategories.js","sources":["../../../src/components/assetTree/TreeSidebarCategories.tsx"],"sourcesContent":["import type React from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport OverlayTrigger from '../overlay/OverlayTrigger';\nimport Tooltip from '../tooltip/Tooltip';\nimport type { TreeCategoryNode } from './TreeCategory';\n\nconst ACTIVE_CLASS_NAME = 'active';\nconst SELECTED_CLASS_NAME = 'selected';\n\nconst TOOLTIP_DELAY = 1500;\n\nexport type TreeSidebarCategoriesProps = {\n    currentCategoryId?: string;\n    onSelectCategory?: (selectedCategory: string) => void;\n    children?: TreeCategoryNode[];\n};\n\nconst TreeSidebarCategories = (props: TreeSidebarCategoriesProps) => {\n    const { children, currentCategoryId, onSelectCategory = noop } = props;\n\n    if (!children) {\n        return null;\n    }\n\n    return (\n        <>\n            {children.map(child => {\n                const id = child.props.id;\n                const icon = child.props.icon || '';\n                const label = child.props.label;\n\n                const statusClassName = classNames(\n                    currentCategoryId === id ? ACTIVE_CLASS_NAME : '',\n                    child.props.hasSelection && SELECTED_CLASS_NAME\n                );\n\n                const handleSelectCategory = (event: React.MouseEvent<HTMLLIElement>) => {\n                    event.stopPropagation();\n                    onSelectCategory(id);\n                };\n\n                const category = (\n                    <li key={id} onClick={handleSelectCategory} className={statusClassName}>\n                        <div className='selection-bubble'>\n                            <span className={`rioglyph ${icon}`} />\n                        </div>\n                    </li>\n                );\n\n                if (label) {\n                    return (\n                        <OverlayTrigger\n                            key={`category-tooltip-${id}`}\n                            placement={Tooltip.RIGHT}\n                            delay={{ show: TOOLTIP_DELAY, hide: 0 }}\n                            overlay={\n                                <Tooltip id='tooltip' width='auto'>\n                                    <span>{label}</span>\n                                </Tooltip>\n                            }\n                        >\n                            {category}\n                        </OverlayTrigger>\n                    );\n                }\n\n                return category;\n            })}\n        </>\n    );\n};\n\nexport default TreeSidebarCategories;\n"],"names":["ACTIVE_CLASS_NAME","SELECTED_CLASS_NAME","TOOLTIP_DELAY","TreeSidebarCategories","props","children","currentCategoryId","onSelectCategory","noop","jsx","Fragment","child","id","icon","label","statusClassName","classNames","category","event","OverlayTrigger","Tooltip"],"mappings":";;;;;AAQA,MAAMA,IAAoB,UACpBC,IAAsB,YAEtBC,IAAgB,MAQhBC,IAAwB,CAACC,MAAsC;AACjE,QAAM,EAAE,UAAAC,GAAU,mBAAAC,GAAmB,kBAAAC,IAAmBC,MAASJ;AAEjE,SAAKC,IAKD,gBAAAI,EAAAC,GAAA,EACK,UAAAL,EAAS,IAAI,CAAAM,MAAS;AACnB,UAAMC,IAAKD,EAAM,MAAM,IACjBE,IAAOF,EAAM,MAAM,QAAQ,IAC3BG,IAAQH,EAAM,MAAM,OAEpBI,IAAkBC;AAAA,MACpBV,MAAsBM,IAAKZ,IAAoB;AAAA,MAC/CW,EAAM,MAAM,gBAAgBV;AAAA,IAAA,GAQ1BgB,IACF,gBAAAR,EAAC,MAAA,EAAY,SANY,CAACS,MAA2C;AACrE,MAAAA,EAAM,gBAAA,GACNX,EAAiBK,CAAE;AAAA,IACvB,GAGgD,WAAWG,GACnD,UAAA,gBAAAN,EAAC,OAAA,EAAI,WAAU,oBACX,UAAA,gBAAAA,EAAC,UAAK,WAAW,YAAYI,CAAI,GAAA,CAAI,GACzC,KAHKD,CAIT;AAGJ,WAAIE,IAEI,gBAAAL;AAAA,MAACU;AAAA,MAAA;AAAA,QAEG,WAAWC,EAAQ;AAAA,QACnB,OAAO,EAAE,MAAMlB,GAAe,MAAM,EAAA;AAAA,QACpC,SACI,gBAAAO,EAACW,GAAA,EAAQ,IAAG,WAAU,OAAM,QACxB,UAAA,gBAAAX,EAAC,QAAA,EAAM,UAAAK,EAAA,CAAM,EAAA,CACjB;AAAA,QAGH,UAAAG;AAAA,MAAA;AAAA,MATI,oBAAoBL,CAAE;AAAA,IAAA,IAchCK;AAAA,EACX,CAAC,EAAA,CACL,IA/CO;AAiDf;"}

package/components/assetTree/TreeSummary.js

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as u, Fragment as c } from "react/jsx-runtime";
 import m from "react";
-import d from "classnames";
+import d from "../../utils/classNames.js";
 import r from "./TypeCounter.js";
 import { TreeSummaryRow as p } from "./TreeSummaryRow.js";
 const v = ({ assetCounts: a }) => {

package/components/assetTree/TreeSummary.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeSummary.js","sources":["../../../src/components/assetTree/TreeSummary.tsx"],"sourcesContent":["import React, { type PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nimport TypeCounter from './TypeCounter';\nimport TreeSummaryRow from './TreeSummaryRow';\n\nexport type AssetType = 'truck' | 'trailer' | 'bus' | 'van' | 'driver' | 'car';\n\nexport type TreeSummaryCounts = {\n    /**\n     * The amount of trucks\n     */\n    truck?: number;\n\n    /**\n     * The amount of trailers\n     */\n    trailer?: number;\n\n    /**\n     * The amount of buses\n     */\n    bus?: number;\n\n    /**\n     * The amount of vans\n     */\n    van?: number;\n\n    /**\n     * The amount of cars\n     */\n    car?: number;\n\n    /**\n     * The amount of drivers\n     */\n    driver?: number;\n};\n\nexport type DefaultAssetCountsProps = {\n    assetCounts: TreeSummaryCounts;\n};\n\nconst DefaultAssetCounts = ({ assetCounts }: DefaultAssetCountsProps) => {\n    const { truck, bus, van, trailer, car, driver } = assetCounts;\n    return (\n        <>\n            <TypeCounter hideOnZero icon='truck-baseline' value={truck} />\n            <TypeCounter hideOnZero icon='trailer-baseline' value={trailer} />\n            <TypeCounter hideOnZero icon='bus-baseline' value={bus} />\n            <TypeCounter hideOnZero icon='van-baseline' value={van} />\n            <TypeCounter hideOnZero icon='car-baseline' value={car} />\n            <TypeCounter hideOnZero icon='driver' value={driver} />\n        </>\n    );\n};\n\nexport type TreeSummaryProps = {\n    /**\n     * The object containing various asset type counter.\n     */\n    assetCounts?: TreeSummaryCounts;\n\n    /**\n     * The number of grid columns used for the built-in `TreeSummaryRow`.\n     *\n     * @default 4\n     */\n    gridCols?: number;\n\n    /**\n     * Additional classes added to the wrapping element.\n     */\n    className?: string;\n};\n\nconst TreeSummary = React.memo((props: PropsWithChildren<TreeSummaryProps>) => {\n    const { className = '', assetCounts = {}, gridCols, children } = props;\n\n    const classes = classNames(\n        'TreeSummary',\n        'display-flex flex-wrap',\n        'align-items-center',\n        'gap-10',\n        'padding-left-3',\n        className\n    );\n\n    return (\n        <div className={classes}>\n            {children || (\n                <TreeSummaryRow gridCols={gridCols}>\n                    <DefaultAssetCounts assetCounts={assetCounts} />\n                </TreeSummaryRow>\n            )}\n        </div>\n    );\n});\n\nexport default TreeSummary;\n"],"names":["DefaultAssetCounts","assetCounts","truck","bus","van","trailer","car","driver","jsxs","Fragment","jsx","TypeCounter","TreeSummary","React","props","className","gridCols","children","classes","classNames","TreeSummaryRow"],"mappings":";;;;;AA4CA,MAAMA,IAAqB,CAAC,EAAE,aAAAC,QAA2C;AACrE,QAAM,EAAE,OAAAC,GAAO,KAAAC,GAAK,KAAAC,GAAK,SAAAC,GAAS,KAAAC,GAAK,QAAAC,MAAWN;AAClD,SACI,gBAAAO,EAAAC,GAAA,EACI,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAY,YAAU,IAAC,MAAK,kBAAiB,OAAOT,GAAO;AAAA,sBAC3DS,GAAA,EAAY,YAAU,IAAC,MAAK,oBAAmB,OAAON,GAAS;AAAA,sBAC/DM,GAAA,EAAY,YAAU,IAAC,MAAK,gBAAe,OAAOR,GAAK;AAAA,sBACvDQ,GAAA,EAAY,YAAU,IAAC,MAAK,gBAAe,OAAOP,GAAK;AAAA,sBACvDO,GAAA,EAAY,YAAU,IAAC,MAAK,gBAAe,OAAOL,GAAK;AAAA,sBACvDK,GAAA,EAAY,YAAU,IAAC,MAAK,UAAS,OAAOJ,EAAA,CAAQ;AAAA,EAAA,GACzD;AAER,GAqBMK,IAAcC,EAAM,KAAK,CAACC,MAA+C;AAC3E,QAAM,EAAE,WAAAC,IAAY,IAAI,aAAAd,IAAc,CAAA,GAAI,UAAAe,GAAU,UAAAC,MAAaH,GAE3DI,IAAUC;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAJ;AAAA,EAAA;AAGJ,SACI,gBAAAL,EAAC,OAAA,EAAI,WAAWQ,GACX,UAAAD,KACG,gBAAAP,EAACU,GAAA,EAAe,UAAAJ,GACZ,UAAA,gBAAAN,EAACV,GAAA,EAAmB,aAAAC,EAAA,CAA0B,EAAA,CAClD,GAER;AAER,CAAC;"}
+{"version":3,"file":"TreeSummary.js","sources":["../../../src/components/assetTree/TreeSummary.tsx"],"sourcesContent":["import React, { type PropsWithChildren } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport TypeCounter from './TypeCounter';\nimport TreeSummaryRow from './TreeSummaryRow';\n\nexport type AssetType = 'truck' | 'trailer' | 'bus' | 'van' | 'driver' | 'car';\n\nexport type TreeSummaryCounts = {\n    /**\n     * The amount of trucks\n     */\n    truck?: number;\n\n    /**\n     * The amount of trailers\n     */\n    trailer?: number;\n\n    /**\n     * The amount of buses\n     */\n    bus?: number;\n\n    /**\n     * The amount of vans\n     */\n    van?: number;\n\n    /**\n     * The amount of cars\n     */\n    car?: number;\n\n    /**\n     * The amount of drivers\n     */\n    driver?: number;\n};\n\nexport type DefaultAssetCountsProps = {\n    assetCounts: TreeSummaryCounts;\n};\n\nconst DefaultAssetCounts = ({ assetCounts }: DefaultAssetCountsProps) => {\n    const { truck, bus, van, trailer, car, driver } = assetCounts;\n    return (\n        <>\n            <TypeCounter hideOnZero icon='truck-baseline' value={truck} />\n            <TypeCounter hideOnZero icon='trailer-baseline' value={trailer} />\n            <TypeCounter hideOnZero icon='bus-baseline' value={bus} />\n            <TypeCounter hideOnZero icon='van-baseline' value={van} />\n            <TypeCounter hideOnZero icon='car-baseline' value={car} />\n            <TypeCounter hideOnZero icon='driver' value={driver} />\n        </>\n    );\n};\n\nexport type TreeSummaryProps = {\n    /**\n     * The object containing various asset type counter.\n     */\n    assetCounts?: TreeSummaryCounts;\n\n    /**\n     * The number of grid columns used for the built-in `TreeSummaryRow`.\n     *\n     * @default 4\n     */\n    gridCols?: number;\n\n    /**\n     * Additional classes added to the wrapping element.\n     */\n    className?: string;\n};\n\nconst TreeSummary = React.memo((props: PropsWithChildren<TreeSummaryProps>) => {\n    const { className = '', assetCounts = {}, gridCols, children } = props;\n\n    const classes = classNames(\n        'TreeSummary',\n        'display-flex flex-wrap',\n        'align-items-center',\n        'gap-10',\n        'padding-left-3',\n        className\n    );\n\n    return (\n        <div className={classes}>\n            {children || (\n                <TreeSummaryRow gridCols={gridCols}>\n                    <DefaultAssetCounts assetCounts={assetCounts} />\n                </TreeSummaryRow>\n            )}\n        </div>\n    );\n});\n\nexport default TreeSummary;\n"],"names":["DefaultAssetCounts","assetCounts","truck","bus","van","trailer","car","driver","jsxs","Fragment","jsx","TypeCounter","TreeSummary","React","props","className","gridCols","children","classes","classNames","TreeSummaryRow"],"mappings":";;;;;AA4CA,MAAMA,IAAqB,CAAC,EAAE,aAAAC,QAA2C;AACrE,QAAM,EAAE,OAAAC,GAAO,KAAAC,GAAK,KAAAC,GAAK,SAAAC,GAAS,KAAAC,GAAK,QAAAC,MAAWN;AAClD,SACI,gBAAAO,EAAAC,GAAA,EACI,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAY,YAAU,IAAC,MAAK,kBAAiB,OAAOT,GAAO;AAAA,sBAC3DS,GAAA,EAAY,YAAU,IAAC,MAAK,oBAAmB,OAAON,GAAS;AAAA,sBAC/DM,GAAA,EAAY,YAAU,IAAC,MAAK,gBAAe,OAAOR,GAAK;AAAA,sBACvDQ,GAAA,EAAY,YAAU,IAAC,MAAK,gBAAe,OAAOP,GAAK;AAAA,sBACvDO,GAAA,EAAY,YAAU,IAAC,MAAK,gBAAe,OAAOL,GAAK;AAAA,sBACvDK,GAAA,EAAY,YAAU,IAAC,MAAK,UAAS,OAAOJ,EAAA,CAAQ;AAAA,EAAA,GACzD;AAER,GAqBMK,IAAcC,EAAM,KAAK,CAACC,MAA+C;AAC3E,QAAM,EAAE,WAAAC,IAAY,IAAI,aAAAd,IAAc,CAAA,GAAI,UAAAe,GAAU,UAAAC,MAAaH,GAE3DI,IAAUC;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAJ;AAAA,EAAA;AAGJ,SACI,gBAAAL,EAAC,OAAA,EAAI,WAAWQ,GACX,UAAAD,KACG,gBAAAP,EAACU,GAAA,EAAe,UAAAJ,GACZ,UAAA,gBAAAN,EAACV,GAAA,EAAmB,aAAAC,EAAA,CAA0B,EAAA,CAClD,GAER;AAER,CAAC;"}

package/components/assetTree/TypeCounter.js

@@ -1,7 +1,7 @@
 import { jsxs as v, jsx as t } from "react/jsx-runtime";
 import { forwardRef as x, useRef as N } from "react";
-import i from "classnames";
 import { noop as R } from "es-toolkit/function";
+import i from "../../utils/classNames.js";
 import k from "../../hooks/useHover.js";
 import w from "../../utils/mergeRefs.js";
 import { withRioglyphPrefix as T } from "./treeUtils.js";

package/components/assetTree/TypeCounter.js.map

@@ -1 +1 @@
-{"version":3,"file":"TypeCounter.js","sources":["../../../src/components/assetTree/TypeCounter.tsx"],"sourcesContent":["import type React from 'react';\nimport { forwardRef, useRef } from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\n\nimport useHover from '../../hooks/useHover';\nimport mergeRefs from '../../utils/mergeRefs';\nimport { withRioglyphPrefix } from './treeUtils';\n\nexport type TypeCounterProps = {\n    /**\n     * The item type for that counter. This will be used as a return value for the onClick callback.\n     */\n    type?: string;\n\n    /**\n     * The icon name. Note, when using the built-in generic type counter, the icon name will the\n     * same as the item type. So make sure there is a corresponding icon for the defined type.\n     */\n    icon?: string;\n\n    /**\n     * Sets the active styling if active\n     */\n    isActive?: boolean;\n\n    /**\n     * Should be set when there is a type filter set in the tree to style the counter accordingly.\n     *\n     * @default false\n     */\n    hasFilter?: boolean;\n\n    /**\n     * Allows for interactivity. Use this prop when you allow clicking on the counter.\n     *\n     * @default false\n     */\n    enableActivity?: boolean;\n\n    /**\n     * Defines if the counter is rendered at all when the value is not defined ot 0.\n     *\n     * @default false\n     */\n    hideOnZero?: boolean;\n\n    /**\n     * Callback function when the counter is clicked. It returns the type value.\n     * Make sure the \"type\" prop is defined to receive the value in the callback.\n     *\n     * @param type\n     * @returns\n     */\n    onClick?: (type: string) => void;\n\n    /**\n     * A custom value to be shown in the counter.\n     */\n    value?: string | React.ReactNode | number;\n};\n\nconst TypeCounter = forwardRef<HTMLDivElement, TypeCounterProps>((props, ref) => {\n    const {\n        icon,\n        value,\n        isActive,\n        hasFilter = false,\n        enableActivity = false,\n        onClick = noop,\n        type,\n        hideOnZero = false,\n        ...remainingProps\n    } = props;\n\n    const internalRef = useRef<HTMLDivElement>(null);\n    const mergedRef = mergeRefs([ref, internalRef]);\n\n    const isHover = useHover(internalRef);\n\n    const wrapperClassName = classNames(\n        'TypeCounter',\n        'display-flex align-items-center',\n        'user-select-none',\n        'margin-right-2',\n        enableActivity ? 'cursor-pointer' : 'pointer-events-none',\n        enableActivity && hasFilter && !isActive && !isHover && 'opacity-50'\n    );\n\n    const counterClassNames = classNames(\n        'TreeLabelCount',\n        'label label-condensed',\n        isHover && !isActive && 'bg-white text-color-darker',\n        isHover && !isActive && 'border-color-gray',\n        isHover && isActive && 'border-color-primary',\n        isActive ? 'label-primary' : 'label-muted label-filled'\n    );\n\n    const handleClick = () => type && onClick(type);\n\n    if (hideOnZero && !value) {\n        return null;\n    }\n\n    const iconName = withRioglyphPrefix(icon);\n\n    return (\n        <div ref={mergedRef} {...remainingProps} className={wrapperClassName} onClick={handleClick}>\n            <span className={`rioglyph ${iconName} text-size-16 margin-right-2`} />\n            <span className={counterClassNames}>{value || 0}</span>\n        </div>\n    );\n});\n\nexport default TypeCounter;\n"],"names":["TypeCounter","forwardRef","props","ref","icon","value","isActive","hasFilter","enableActivity","onClick","noop","type","hideOnZero","remainingProps","internalRef","useRef","mergedRef","mergeRefs","isHover","useHover","wrapperClassName","classNames","counterClassNames","handleClick","iconName","withRioglyphPrefix","jsxs","jsx"],"mappings":";;;;;;;AA8DA,MAAMA,IAAcC,EAA6C,CAACC,GAAOC,MAAQ;AAC7E,QAAM;AAAA,IACF,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,gBAAAC,IAAiB;AAAA,IACjB,SAAAC,IAAUC;AAAA,IACV,MAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,GAAGC;AAAA,EAAA,IACHX,GAEEY,IAAcC,EAAuB,IAAI,GACzCC,IAAYC,EAAU,CAACd,GAAKW,CAAW,CAAC,GAExCI,IAAUC,EAASL,CAAW,GAE9BM,IAAmBC;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAb,IAAiB,mBAAmB;AAAA,IACpCA,KAAkBD,KAAa,CAACD,KAAY,CAACY,KAAW;AAAA,EAAA,GAGtDI,IAAoBD;AAAA,IACtB;AAAA,IACA;AAAA,IACAH,KAAW,CAACZ,KAAY;AAAA,IACxBY,KAAW,CAACZ,KAAY;AAAA,IACxBY,KAAWZ,KAAY;AAAA,IACvBA,IAAW,kBAAkB;AAAA,EAAA,GAG3BiB,IAAc,MAAMZ,KAAQF,EAAQE,CAAI;AAE9C,MAAIC,KAAc,CAACP;AACf,WAAO;AAGX,QAAMmB,IAAWC,EAAmBrB,CAAI;AAExC,SACI,gBAAAsB,EAAC,SAAI,KAAKV,GAAY,GAAGH,GAAgB,WAAWO,GAAkB,SAASG,GAC3E,UAAA;AAAA,IAAA,gBAAAI,EAAC,QAAA,EAAK,WAAW,YAAYH,CAAQ,gCAAgC;AAAA,IACrE,gBAAAG,EAAC,QAAA,EAAK,WAAWL,GAAoB,eAAS,EAAA,CAAE;AAAA,EAAA,GACpD;AAER,CAAC;"}
+{"version":3,"file":"TypeCounter.js","sources":["../../../src/components/assetTree/TypeCounter.tsx"],"sourcesContent":["import type React from 'react';\nimport { forwardRef, useRef } from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport useHover from '../../hooks/useHover';\nimport mergeRefs from '../../utils/mergeRefs';\nimport { withRioglyphPrefix } from './treeUtils';\n\nexport type TypeCounterProps = {\n    /**\n     * The item type for that counter. This will be used as a return value for the onClick callback.\n     */\n    type?: string;\n\n    /**\n     * The icon name. Note, when using the built-in generic type counter, the icon name will the\n     * same as the item type. So make sure there is a corresponding icon for the defined type.\n     */\n    icon?: string;\n\n    /**\n     * Sets the active styling if active\n     */\n    isActive?: boolean;\n\n    /**\n     * Should be set when there is a type filter set in the tree to style the counter accordingly.\n     *\n     * @default false\n     */\n    hasFilter?: boolean;\n\n    /**\n     * Allows for interactivity. Use this prop when you allow clicking on the counter.\n     *\n     * @default false\n     */\n    enableActivity?: boolean;\n\n    /**\n     * Defines if the counter is rendered at all when the value is not defined ot 0.\n     *\n     * @default false\n     */\n    hideOnZero?: boolean;\n\n    /**\n     * Callback function when the counter is clicked. It returns the type value.\n     * Make sure the \"type\" prop is defined to receive the value in the callback.\n     *\n     * @param type\n     * @returns\n     */\n    onClick?: (type: string) => void;\n\n    /**\n     * A custom value to be shown in the counter.\n     */\n    value?: string | React.ReactNode | number;\n};\n\nconst TypeCounter = forwardRef<HTMLDivElement, TypeCounterProps>((props, ref) => {\n    const {\n        icon,\n        value,\n        isActive,\n        hasFilter = false,\n        enableActivity = false,\n        onClick = noop,\n        type,\n        hideOnZero = false,\n        ...remainingProps\n    } = props;\n\n    const internalRef = useRef<HTMLDivElement>(null);\n    const mergedRef = mergeRefs([ref, internalRef]);\n\n    const isHover = useHover(internalRef);\n\n    const wrapperClassName = classNames(\n        'TypeCounter',\n        'display-flex align-items-center',\n        'user-select-none',\n        'margin-right-2',\n        enableActivity ? 'cursor-pointer' : 'pointer-events-none',\n        enableActivity && hasFilter && !isActive && !isHover && 'opacity-50'\n    );\n\n    const counterClassNames = classNames(\n        'TreeLabelCount',\n        'label label-condensed',\n        isHover && !isActive && 'bg-white text-color-darker',\n        isHover && !isActive && 'border-color-gray',\n        isHover && isActive && 'border-color-primary',\n        isActive ? 'label-primary' : 'label-muted label-filled'\n    );\n\n    const handleClick = () => type && onClick(type);\n\n    if (hideOnZero && !value) {\n        return null;\n    }\n\n    const iconName = withRioglyphPrefix(icon);\n\n    return (\n        <div ref={mergedRef} {...remainingProps} className={wrapperClassName} onClick={handleClick}>\n            <span className={`rioglyph ${iconName} text-size-16 margin-right-2`} />\n            <span className={counterClassNames}>{value || 0}</span>\n        </div>\n    );\n});\n\nexport default TypeCounter;\n"],"names":["TypeCounter","forwardRef","props","ref","icon","value","isActive","hasFilter","enableActivity","onClick","noop","type","hideOnZero","remainingProps","internalRef","useRef","mergedRef","mergeRefs","isHover","useHover","wrapperClassName","classNames","counterClassNames","handleClick","iconName","withRioglyphPrefix","jsxs","jsx"],"mappings":";;;;;;;AA8DA,MAAMA,IAAcC,EAA6C,CAACC,GAAOC,MAAQ;AAC7E,QAAM;AAAA,IACF,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,gBAAAC,IAAiB;AAAA,IACjB,SAAAC,IAAUC;AAAA,IACV,MAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,GAAGC;AAAA,EAAA,IACHX,GAEEY,IAAcC,EAAuB,IAAI,GACzCC,IAAYC,EAAU,CAACd,GAAKW,CAAW,CAAC,GAExCI,IAAUC,EAASL,CAAW,GAE9BM,IAAmBC;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAb,IAAiB,mBAAmB;AAAA,IACpCA,KAAkBD,KAAa,CAACD,KAAY,CAACY,KAAW;AAAA,EAAA,GAGtDI,IAAoBD;AAAA,IACtB;AAAA,IACA;AAAA,IACAH,KAAW,CAACZ,KAAY;AAAA,IACxBY,KAAW,CAACZ,KAAY;AAAA,IACxBY,KAAWZ,KAAY;AAAA,IACvBA,IAAW,kBAAkB;AAAA,EAAA,GAG3BiB,IAAc,MAAMZ,KAAQF,EAAQE,CAAI;AAE9C,MAAIC,KAAc,CAACP;AACf,WAAO;AAGX,QAAMmB,IAAWC,EAAmBrB,CAAI;AAExC,SACI,gBAAAsB,EAAC,SAAI,KAAKV,GAAY,GAAGH,GAAgB,WAAWO,GAAkB,SAASG,GAC3E,UAAA;AAAA,IAAA,gBAAAI,EAAC,QAAA,EAAK,WAAW,YAAYH,CAAQ,gCAAgC;AAAA,IACrE,gBAAAG,EAAC,QAAA,EAAK,WAAWL,GAAoB,eAAS,EAAA,CAAE;AAAA,EAAA,GACpD;AAER,CAAC;"}

package/components/autosuggest/AutoSuggest.js

@@ -1,9 +1,9 @@
 import { jsxs as _, jsx as d } from "react/jsx-runtime";
 import { useState as h, useRef as E, useEffect as F } from "react";
-import j from "classnames";
 import { isEmpty as ge } from "es-toolkit/compat";
 import { noop as a } from "es-toolkit/function";
 import { isNil as fe } from "es-toolkit/predicate";
+import j from "../../utils/classNames.js";
 import he from "../clearableInput/ClearableInput.js";
 import { DOWN as B, scrollItemIntoView as Se, UP as Ie } from "../../utils/scrollItemIntoView.js";
 import { useDropDirection as be } from "../../utils/useDropDirection.js";

package/components/autosuggest/AutoSuggest.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutoSuggest.js","sources":["../../../src/components/autosuggest/AutoSuggest.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { isEmpty } from 'es-toolkit/compat';\nimport { noop } from 'es-toolkit/function';\nimport { isNil } from 'es-toolkit/predicate';\n\nimport ClearableInput from '../clearableInput/ClearableInput';\nimport { scrollItemIntoView, UP, DOWN } from '../../utils/scrollItemIntoView';\nimport { useDropDirection } from '../../utils/useDropDirection';\nimport DropdownHeader from '../selects/DropdownHeader';\nimport MenuItem from '../menuItems/MenuItem';\nimport useClickOutside from '../../hooks/useClickOutside';\nimport AutoSuggestAddons from './AutoSuggestAddons';\nimport DropdownSpinner from './DropdownSpinner';\nimport NoItemMessage from './NoItemMessage';\n\nexport type AutoSuggestSuggestion = {\n    /**\n     * The text label for a suggestion item. If present, this will be returned when selecting the suggestion.\n     */\n    label?: string;\n\n    /**\n     * Set to disable the suggestion and disallow selecting it.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Optional custom suggestion node that will be rendered as given. Example, this is used by the TagManager\n     * to render a placeholder with an icon next to it.\n     */\n    customSuggestion?: React.ReactNode;\n\n    /**\n     * Additional key-value pairs that are not relevant for rendering but may be handled on your side.\n     */\n    [name: string]: string | React.ReactNode;\n};\n\nexport type SelectedSuggestion = {\n    suggestionValue: string | React.ReactElement;\n    suggestion: AutoSuggestSuggestion;\n};\n\nexport type AutoSuggestInputProps = {\n    /**\n     * A native input id attribute. Passed through as HTML attribute to the input element.\n     */\n    id?: string;\n\n    /**\n     * The value to be set for the input. Using this prop the input can be controlled from the outside.\n     */\n    value?: string;\n\n    /**\n     * String that will be displayed inside the input when nothing is typed in.\n     * @default `Start typing ...`\n     */\n    placeholder?: string | React.ReactNode;\n\n    /**\n     * Icon class name that shall be used. If defined, the input element is wrapped in an input-group\n     * and the icon will be set in an input-addon. Example: `rioglyph-search`.\n     */\n    icon?: string;\n\n    /**\n     * Callback function which will be called when the input changes. __This is usually not needed__ as\n     * the \"onSuggestionsFetchRequested\" callback takes care of any input change. It is listed here\n     * for completeness and for certain edge cases.\n     *\n     * __Note:__ It might be removed in the future when not needed.'\n     * @deprecated please use `onSuggestionsFetchRequested` instead\n     * @param changeEvent\n     * @param changeProps\n     * @returns\n     */\n    onChange?: (changeEvent: React.SyntheticEvent, changeProps: { newValue: string }) => void;\n\n    /**\n     * Callback function which gets triggered when the input gaines focus.\n     */\n    onFocus?: VoidFunction;\n\n    /**\n     * Callback function which gets triggered when the input looses the focus.\n     */\n    onBlur?: VoidFunction;\n\n    /**\n     * Callback function which will be called when the input is cleared. __This is usually not needed__ as\n     * the \"onSuggestionsFetchRequested\" callback takes care of any input change. It is listed here\n     * for completeness and for certain edge cases.\n     *\n     * __Note:__ It might be removed in the future when not needed.\n     */\n    onClear?: VoidFunction;\n\n    /**\n     * Boolean value that adds the class `has-error` to the input\n     * component. Use this for validation use cases. The Autosuggest component\n     * should be wrapped in a `form-group` element with the class `has-feedback`.\n     * @default false\n     */\n    hasError?: boolean;\n\n    /**\n     * Defines the tab index to be added to the input element.\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Boolean value that disabled the input component.\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * The React ref for the underlying input.\n     */\n    inputRef?: React.MutableRefObject<HTMLInputElement>;\n\n    /**\n     * Additional class names that are added to the input component.\n     */\n    className?: string;\n};\n\nexport type AutoSuggestProps<T = AutoSuggestSuggestion> = {\n    /**\n     * A native input id attribute on the component root. Passed through as HTML attribute to the input element.\n     */\n    id?: string;\n\n    /**\n     * Object to define properties for the input component. For the input, the ClearableInput\n     * component is used.\n     */\n    inputProps?: AutoSuggestInputProps;\n\n    /**\n     * Array of items which will be displayed. Items can be arbitrary objects as long as they\n     * have a label defined.\n     *\n     * __Important__: in case you specify your own custom renderer via `renderSuggestion` prop, you\n     * can pass our own object that does not need to have a label. In this case you may want to\n     * specify the `customSuggestionKey` to avoid react throwing an error of rendering menu items with the same key.\n     */\n    suggestions?: AutoSuggestSuggestion[];\n\n    /**\n     * Text that will be shown when there is not match found. If nothing is defined the dropdown-menu\n     * will not be rendered.\n     */\n    noItemMessage?: string | React.ReactNode;\n\n    /**\n     * Callback function which will be called every time you need to recalculate suggestions e.i.\n     * when the filter is updates after each input. It will also be called when the input is\n     * cleared. The value would be an empty string in this case.\n     * @param result\n     * @returns\n     */\n    onSuggestionsFetchRequested?: (result: { value: string }) => void;\n\n    /**\n     * Callback function which will be called when a suggestion is selected from the dropdown menu.\n     * @param event\n     * @param selectedSuggestion\n     * @returns\n     */\n    onSuggestionSelected?: (\n        event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLDivElement>,\n        selectedSuggestion: SelectedSuggestion\n    ) => void;\n\n    /**\n     * Callback function which will be called every time the highlighted selection changes.\n     * @param suggestion\n     * @returns\n     */\n    onSuggestionHighlighted?: (suggestion: AutoSuggestSuggestion | null) => void;\n\n    /**\n     * Function that returns a string which will be displayed inside the input.\n     * This is required when a custom render function for suggestions is provided.\n     * Overwrite this function to provide the value to be used for a suggestion.\n     * Default implementation is: `suggestion => suggestion.label`\n     *\n     * @param suggestion\n     * @returns\n     */\n    getSuggestionValue?: (suggestion: AutoSuggestSuggestion) => string;\n\n    /**\n     * Function that defines how suggestions are rendered on the dropdown-menu.\n     * Use this to customize the appearance for instance when you want to show an icon\n     * for a suggestion.\n     * Default implementation is: `suggestion => suggestion.label`\n     *\n     * @param suggestion\n     * @returns\n     */\n    renderSuggestion?: (suggestion: AutoSuggestSuggestion) => React.ReactNode;\n\n    /**\n     * When rendering your own custom suggestions that do not have the `label` attribute, use this prop to specify\n     * a unique value for each suggestion which will be used as a react key for the individual menu items.\n     */\n    customSuggestionKey?: string;\n\n    /**\n     * Boolean that disabled autoDropDirection and opens the dropdown-menu be above the toggle.\n     * @default false\n     */\n    dropup?: boolean;\n\n    /**\n     * Defines whether the dropdown opens right aligned or not.\n     * Set to true additionally disables autoDrop feature.\n     * @default false\n     */\n    pullRight?: boolean;\n\n    /**\n     * Boolean that enables autoDrop feature.\n     * @default true\n     */\n    autoDropDirection?: boolean;\n\n    /**\n     * Shows a loading spinner instead of the items if set to true.\n     * @default false\n     */\n    isLoading?: boolean;\n\n    /**\n     * Boolean that enables opening the dropdown menu when gaining focus.\n     * @default false\n     */\n    openOnFocus?: boolean;\n\n    /**\n     * Boolean that enables the selection of an item to close the dropdown or not.\n     * @default true\n     */\n    closeOnSelect?: boolean;\n\n    /**\n     * Defines whether or not a selected item is shown in the input after it was selected.\n     * @default true\n     */\n    showSelectedItemsInInput?: boolean;\n\n    /**\n     * Sets autocomplete value for autosuggest forms.\n     */\n    autoComplete?: string;\n\n    /**\n     * Adds a list of input-addons elements in front of the input.\n     */\n    leadingInputAddons?: React.ReactNode[];\n\n    /**\n     * Adds a list of input-addons elements after the input.\n     */\n    trailingInputAddons?: React.ReactNode[];\n\n    /**\n     * Additional class names that are added to the dropdown element.\n     */\n    dropdownClassName?: string;\n\n    /**\n     * Additional class names that are added to the wrapping element.\n     */\n    className?: string;\n};\n\nexport const AutoSuggest = (props: AutoSuggestProps) => {\n    const {\n        id,\n        onSuggestionSelected = noop,\n        onSuggestionsFetchRequested = noop,\n        onSuggestionHighlighted = noop,\n        renderSuggestion,\n        customSuggestionKey,\n        getSuggestionValue,\n        suggestions = [],\n        autoDropDirection = true,\n        pullRight = false,\n        dropup = false,\n        isLoading = false,\n        openOnFocus = false,\n        closeOnSelect = true,\n        showSelectedItemsInInput = true,\n        autoComplete = 'off',\n        inputProps = {\n            id,\n            disabled: false,\n            onChange: noop,\n            onClear: noop,\n            onBlur: noop,\n            onFocus: noop,\n            placeholder: 'Start typing',\n            hasError: false,\n            tabIndex: 0,\n            value: undefined,\n            icon: undefined,\n        },\n        leadingInputAddons,\n        trailingInputAddons,\n        noItemMessage,\n        dropdownClassName = '',\n        className = '',\n        ...remainingProps\n    } = props;\n\n    const [isOpen, setIsOpen] = useState(false);\n    const [value, setValue] = useState(inputProps.value || '');\n    const [highlightedItemIndex, setHighlightedItemIndex] = useState(-1);\n    const [direction, setDirection] = useState(DOWN);\n\n    const componentRef = useClickOutside(() => closeMenu());\n    const dropdownMenuRef = useRef<HTMLUListElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const optionNodesRef = useRef<HTMLLIElement[]>([]);\n\n    // Update internal value state from outside when external input value is given.\n    // This is important for when this component is used as a controlled component\n    const externalValue = inputProps.value;\n    if (!isNil(externalValue) && value !== externalValue) {\n        setValue(externalValue ?? '');\n    }\n\n    // Fetch suggestions on mounting the component by using the external\n    // fetch callback\n    useEffect(() => onSuggestionsFetchRequested({ value }), []);\n\n    // When a new suggestion is highlighted it may be not in view as the dropdown menu\n    // has an overflow and can scroll. In this case, we need to scroll to the highlighted suggestion\n    // so the user can see it\n    useEffect(() => {\n        const focusedItem = getFocusedOptionNode();\n        scrollItemIntoView(direction, dropdownMenuRef.current, focusedItem);\n    }, [highlightedItemIndex, direction]);\n\n    // Used to store the list item reference to allow highlighting a single node.\n    // Update that list of nodes again when the suggestions change from the outside.\n    useEffect(() => {\n        const optionNodes = Array.from(dropdownMenuRef.current?.getElementsByTagName('li') || []);\n        optionNodesRef.current = optionNodes;\n    }, [suggestions]);\n\n    // Overwrite position of dropdown menu in case auto drop is enabled\n    const dropDirection = useDropDirection({ pullRight, dropup, autoDropDirection, dropdownMenuRef }, [suggestions]);\n\n    const openMenu = () => {\n        if (isOpen) {\n            return;\n        }\n        setIsOpen(true);\n    };\n\n    const closeMenu = () => {\n        setIsOpen(false);\n    };\n\n    const handleFocus = (_event: React.FocusEvent<HTMLInputElement>) => {\n        if (openOnFocus) {\n            openMenu();\n        }\n        if (inputProps.onFocus) {\n            inputProps.onFocus();\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        switch (event.key) {\n            case 'ArrowDown': {\n                // select below on arrow down key\n                const newHighlightedIndex = highlightedItemIndex + 1;\n                if (isOpen && suggestions.length > newHighlightedIndex) {\n                    setHighlightedItemIndex(newHighlightedIndex);\n                    handleHighlightedSuggestionChanged(Number(newHighlightedIndex));\n                    setDirection(DOWN);\n                }\n                return;\n            }\n            case 'ArrowUp':\n                // select above on arrow up key\n                if (isOpen && highlightedItemIndex > 0) {\n                    const newHighlightedIndex = highlightedItemIndex - 1;\n                    setHighlightedItemIndex(newHighlightedIndex);\n                    handleHighlightedSuggestionChanged(Number(newHighlightedIndex));\n                    setDirection(UP);\n                }\n                return;\n            case 'Enter':\n                // select on enter\n                if (isOpen && suggestions[highlightedItemIndex]) {\n                    onSuggestionClicked(event, suggestions[highlightedItemIndex]);\n                } else {\n                    openMenu();\n                }\n                break;\n            case 'Escape':\n            case 'Tab':\n                // close on esc key or on tab\n                closeMenu();\n                break;\n            default:\n                break;\n        }\n    };\n\n    const getFocusedOptionNode = () => {\n        return [...optionNodesRef.current].find((item: HTMLLIElement) => item.className.includes('active'));\n    };\n\n    const handleInputChange = (\n        newValue: string,\n        event: React.MouseEvent<HTMLSpanElement, MouseEvent> | React.ChangeEvent<HTMLInputElement>\n    ) => {\n        if (value !== newValue) {\n            updateInputValue(newValue, event);\n        }\n    };\n\n    const updateInputValue = (\n        newValue: string,\n        event:\n            | React.MouseEvent<HTMLSpanElement, MouseEvent>\n            | React.ChangeEvent<HTMLInputElement>\n            | React.KeyboardEvent<HTMLDivElement>,\n        shouldCloseMenu = false\n    ) => {\n        const closeMenuEventually = shouldCloseMenu ? false : isOpen;\n\n        setIsOpen(!isOpen ? true : closeMenuEventually);\n        setValue(newValue);\n        setHighlightedItemIndex(-1);\n\n        // Fire callback so the parent component can filter the suggestions accordingly\n        onSuggestionsFetchRequested({ value: newValue });\n\n        handleHighlightedSuggestionChanged(-1);\n\n        // Trigger onChange callback to notify usage component only when value has actually changed\n        const { value: newExternalValue, onChange = () => {} } = inputProps;\n        if (newValue !== newExternalValue) {\n            onChange(event, { newValue });\n        }\n    };\n\n    const handleHighlightedSuggestionChanged = (currentHighlightedItemIndex: number) => {\n        const currentHighlightedSuggestion =\n            currentHighlightedItemIndex === -1 ? null : suggestions[currentHighlightedItemIndex];\n        onSuggestionHighlighted(currentHighlightedSuggestion);\n    };\n\n    const clearInputValue = (_event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {\n        setValue('');\n        setHighlightedItemIndex(-1);\n\n        // Focus the input field after clearing it's value in order to allow\n        // entering new values right away\n        if (inputRef.current) {\n            inputRef.current.focus();\n        }\n\n        // Reset filter value so all suggestions are shown again\n        onSuggestionsFetchRequested({ value: '' });\n\n        handleHighlightedSuggestionChanged(-1);\n\n        // Additionally, fire the onClear callback as the service may react on it\n        if (inputProps.onClear) {\n            inputProps.onClear();\n        }\n    };\n\n    const getDefaultSuggestionValue = (suggestion: AutoSuggestSuggestion): string => {\n        return suggestion.label ?? (suggestion[customSuggestionKey ?? ''] as string) ?? '';\n    };\n\n    const onSuggestionClicked = (\n        event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLDivElement>,\n        suggestion: AutoSuggestSuggestion\n    ) => {\n        const getSuggestionValueFunction = getSuggestionValue ? getSuggestionValue : getDefaultSuggestionValue;\n\n        const suggestionValue = getSuggestionValueFunction(suggestion);\n\n        updateInputValue(suggestionValue, event, closeOnSelect);\n\n        // fire callback with the selected item\n        onSuggestionSelected(event, {\n            suggestion,\n            suggestionValue,\n        });\n    };\n\n    const renderInput = () => {\n        const { id: inputPropId, icon, value: ignoredExternalValue, ...remainingInputProps } = inputProps;\n        const clearableProps = { id: id ?? inputPropId, ...remainingInputProps };\n\n        const input = (\n            <ClearableInput\n                {...clearableProps}\n                ref={inputRef}\n                autoComplete={autoComplete}\n                onChange={handleInputChange}\n                onClear={clearInputValue}\n                onFocus={handleFocus}\n                onClick={openMenu}\n                value={showSelectedItemsInInput ? value : ''}\n            />\n        );\n\n        if (icon || leadingInputAddons || trailingInputAddons) {\n            return (\n                <AutoSuggestAddons\n                    icon={icon}\n                    leadingInputAddons={leadingInputAddons}\n                    trailingInputAddons={trailingInputAddons}\n                >\n                    {input}\n                </AutoSuggestAddons>\n            );\n        }\n\n        return input;\n    };\n\n    const renderDefaultSuggestion = (suggestion: AutoSuggestSuggestion): React.ReactNode => suggestion.label;\n\n    const renderDropdownMenu = () => {\n        const dropdownMenuClasses = classNames(\n            'dropdown-menu',\n            dropDirection.pullRight && 'pull-right',\n            dropdownClassName\n        );\n\n        if (isLoading) {\n            return <DropdownSpinner className={dropdownMenuClasses} />;\n        }\n\n        const hasNoSuggestions = isEmpty(suggestions);\n\n        if (hasNoSuggestions && !noItemMessage) {\n            return null;\n        }\n\n        return (\n            <ul role='menu' className={dropdownMenuClasses} ref={dropdownMenuRef}>\n                {hasNoSuggestions && noItemMessage && <NoItemMessage key='NoItemMessage' message={noItemMessage} />}\n                {suggestions.map((suggestion, index) => {\n                    // In case a custom renderer is used but the customSuggestionKey is not set, throw an error\n                    if (renderSuggestion && !suggestion.label && !customSuggestionKey) {\n                        throw new Error(\n                            'The \"customSuggestionKey\" need to be set when using a custom renderer ' +\n                                'and not using the \"label\" prop for suggestions'\n                        );\n                    }\n\n                    const key = `index-${suggestion.label ?? suggestion[customSuggestionKey ?? '']}`;\n\n                    if (suggestion.header && suggestion.label) {\n                        return <DropdownHeader key={key} label={(suggestion as AutoSuggestSuggestion).label} />;\n                    }\n\n                    const renderFunction = renderSuggestion ? renderSuggestion : renderDefaultSuggestion;\n\n                    return (\n                        <MenuItem\n                            key={key}\n                            active={index === highlightedItemIndex}\n                            disabled={suggestion.disabled}\n                            value={\n                                suggestion.customSuggestion ? suggestion.customSuggestion : renderFunction(suggestion)\n                            }\n                            onSelect={(_: number | undefined, event: React.MouseEvent<HTMLLIElement>) =>\n                                onSuggestionClicked(event, suggestion)\n                            }\n                            index={index}\n                        />\n                    );\n                })}\n            </ul>\n        );\n    };\n\n    const classes = classNames(\n        'AutoSuggest',\n        'dropdown',\n        isOpen && 'open',\n        dropDirection.dropup && 'dropup',\n        className\n    );\n\n    return (\n        <div {...remainingProps} className={classes} onKeyDown={handleKeyDown} ref={componentRef}>\n            {renderInput()}\n            {renderDropdownMenu()}\n        </div>\n    );\n};\n\nexport default AutoSuggest;\n"],"names":["AutoSuggest","props","id","onSuggestionSelected","noop","onSuggestionsFetchRequested","onSuggestionHighlighted","renderSuggestion","customSuggestionKey","getSuggestionValue","suggestions","autoDropDirection","pullRight","dropup","isLoading","openOnFocus","closeOnSelect","showSelectedItemsInInput","autoComplete","inputProps","leadingInputAddons","trailingInputAddons","noItemMessage","dropdownClassName","className","remainingProps","isOpen","setIsOpen","useState","value","setValue","highlightedItemIndex","setHighlightedItemIndex","direction","setDirection","DOWN","componentRef","useClickOutside","closeMenu","dropdownMenuRef","useRef","inputRef","optionNodesRef","externalValue","isNil","useEffect","focusedItem","getFocusedOptionNode","scrollItemIntoView","optionNodes","dropDirection","useDropDirection","openMenu","handleFocus","_event","handleKeyDown","event","newHighlightedIndex","handleHighlightedSuggestionChanged","UP","onSuggestionClicked","item","handleInputChange","newValue","updateInputValue","shouldCloseMenu","newExternalValue","onChange","currentHighlightedItemIndex","currentHighlightedSuggestion","clearInputValue","getDefaultSuggestionValue","suggestion","suggestionValue","renderInput","inputPropId","icon","ignoredExternalValue","remainingInputProps","clearableProps","input","jsx","ClearableInput","AutoSuggestAddons","renderDefaultSuggestion","renderDropdownMenu","dropdownMenuClasses","classNames","DropdownSpinner","hasNoSuggestions","isEmpty","NoItemMessage","index","key","DropdownHeader","renderFunction","MenuItem","_","classes","jsxs"],"mappings":";;;;;;;;;;;;;;;AA4RO,MAAMA,KAAc,CAACC,MAA4B;AACpD,QAAM;AAAA,IACF,IAAAC;AAAA,IACA,sBAAAC,IAAuBC;AAAA,IACvB,6BAAAC,IAA8BD;AAAA,IAC9B,yBAAAE,IAA0BF;AAAA,IAC1B,kBAAAG;AAAA,IACA,qBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,aAAAC,IAAc,CAAA;AAAA,IACd,mBAAAC,IAAoB;AAAA,IACpB,WAAAC,IAAY;AAAA,IACZ,QAAAC,IAAS;AAAA,IACT,WAAAC,IAAY;AAAA,IACZ,aAAAC,IAAc;AAAA,IACd,eAAAC,IAAgB;AAAA,IAChB,0BAAAC,IAA2B;AAAA,IAC3B,cAAAC,IAAe;AAAA,IACf,YAAAC,IAAa;AAAA,MACT,IAAAjB;AAAA,MACA,UAAU;AAAA,MACV,UAAUE;AAAA,MACV,SAASA;AAAA,MACT,QAAQA;AAAA,MACR,SAASA;AAAA,MACT,aAAa;AAAA,MACb,UAAU;AAAA,MACV,UAAU;AAAA,MACV,OAAO;AAAA,MACP,MAAM;AAAA,IAAA;AAAA,IAEV,oBAAAgB;AAAA,IACA,qBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,mBAAAC,IAAoB;AAAA,IACpB,WAAAC,KAAY;AAAA,IACZ,GAAGC;AAAA,EAAA,IACHxB,GAEE,CAACyB,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC,CAACC,GAAOC,CAAQ,IAAIF,EAAST,EAAW,SAAS,EAAE,GACnD,CAACY,GAAsBC,CAAuB,IAAIJ,EAAS,EAAE,GAC7D,CAACK,GAAWC,CAAY,IAAIN,EAASO,CAAI,GAEzCC,KAAeC,GAAgB,MAAMC,GAAW,GAChDC,IAAkBC,EAAyB,IAAI,GAC/CC,IAAWD,EAAyB,IAAI,GACxCE,IAAiBF,EAAwB,EAAE,GAI3CG,IAAgBxB,EAAW;AACjC,EAAI,CAACyB,GAAMD,CAAa,KAAKd,MAAUc,KACnCb,EAASa,KAAiB,EAAE,GAKhCE,EAAU,MAAMxC,EAA4B,EAAE,OAAAwB,GAAO,GAAG,CAAA,CAAE,GAK1DgB,EAAU,MAAM;AACZ,UAAMC,IAAcC,GAAA;AACpB,IAAAC,GAAmBf,GAAWM,EAAgB,SAASO,CAAW;AAAA,EACtE,GAAG,CAACf,GAAsBE,CAAS,CAAC,GAIpCY,EAAU,MAAM;AACZ,UAAMI,IAAc,MAAM,KAAKV,EAAgB,SAAS,qBAAqB,IAAI,KAAK,EAAE;AACxF,IAAAG,EAAe,UAAUO;AAAA,EAC7B,GAAG,CAACvC,CAAW,CAAC;AAGhB,QAAMwC,IAAgBC,GAAiB,EAAE,WAAAvC,GAAW,QAAAC,GAAQ,mBAAAF,GAAmB,iBAAA4B,EAAA,GAAmB,CAAC7B,CAAW,CAAC,GAEzG0C,IAAW,MAAM;AACnB,IAAI1B,KAGJC,EAAU,EAAI;AAAA,EAClB,GAEMW,IAAY,MAAM;AACpB,IAAAX,EAAU,EAAK;AAAA,EACnB,GAEM0B,KAAc,CAACC,MAA+C;AAChE,IAAIvC,KACAqC,EAAA,GAEAjC,EAAW,WACXA,EAAW,QAAA;AAAA,EAEnB,GAEMoC,KAAgB,CAACC,MAA+C;AAClE,YAAQA,EAAM,KAAA;AAAA,MACV,KAAK,aAAa;AAEd,cAAMC,IAAsB1B,IAAuB;AACnD,QAAIL,KAAUhB,EAAY,SAAS+C,MAC/BzB,EAAwByB,CAAmB,GAC3CC,EAAmC,OAAOD,CAAmB,CAAC,GAC9DvB,EAAaC,CAAI;AAErB;AAAA,MACJ;AAAA,MACA,KAAK;AAED,YAAIT,KAAUK,IAAuB,GAAG;AACpC,gBAAM0B,IAAsB1B,IAAuB;AACnD,UAAAC,EAAwByB,CAAmB,GAC3CC,EAAmC,OAAOD,CAAmB,CAAC,GAC9DvB,EAAayB,EAAE;AAAA,QACnB;AACA;AAAA,MACJ,KAAK;AAED,QAAIjC,KAAUhB,EAAYqB,CAAoB,IAC1C6B,EAAoBJ,GAAO9C,EAAYqB,CAAoB,CAAC,IAE5DqB,EAAA;AAEJ;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAED,QAAAd,EAAA;AACA;AAAA,IAEA;AAAA,EAEZ,GAEMS,KAAuB,MAClB,CAAC,GAAGL,EAAe,OAAO,EAAE,KAAK,CAACmB,MAAwBA,EAAK,UAAU,SAAS,QAAQ,CAAC,GAGhGC,KAAoB,CACtBC,GACAP,MACC;AACD,IAAI3B,MAAUkC,KACVC,EAAiBD,GAAUP,CAAK;AAAA,EAExC,GAEMQ,IAAmB,CACrBD,GACAP,GAIAS,IAAkB,OACjB;AAGD,IAAAtC,EAAWD,IAFiBuC,IAAkB,KAAQvC,IAElC,EAA0B,GAC9CI,EAASiC,CAAQ,GACjB/B,EAAwB,EAAE,GAG1B3B,EAA4B,EAAE,OAAO0D,GAAU,GAE/CL,EAAmC,EAAE;AAGrC,UAAM,EAAE,OAAOQ,GAAkB,UAAAC,IAAW,MAAM;AAAA,IAAC,MAAMhD;AACzD,IAAI4C,MAAaG,KACbC,EAASX,GAAO,EAAE,UAAAO,GAAU;AAAA,EAEpC,GAEML,IAAqC,CAACU,MAAwC;AAChF,UAAMC,IACFD,MAAgC,KAAK,OAAO1D,EAAY0D,CAA2B;AACvF,IAAA9D,EAAwB+D,CAA4B;AAAA,EACxD,GAEMC,KAAkB,CAAChB,MAA0D;AAC/E,IAAAxB,EAAS,EAAE,GACXE,EAAwB,EAAE,GAItBS,EAAS,WACTA,EAAS,QAAQ,MAAA,GAIrBpC,EAA4B,EAAE,OAAO,IAAI,GAEzCqD,EAAmC,EAAE,GAGjCvC,EAAW,WACXA,EAAW,QAAA;AAAA,EAEnB,GAEMoD,KAA4B,CAACC,MACxBA,EAAW,SAAUA,EAAWhE,KAAuB,EAAE,KAAgB,IAG9EoD,IAAsB,CACxBJ,GACAgB,MACC;AAGD,UAAMC,KAF6BhE,KAA0C8D,IAE1BC,CAAU;AAE7D,IAAAR,EAAiBS,GAAiBjB,GAAOxC,CAAa,GAGtDb,EAAqBqD,GAAO;AAAA,MACxB,YAAAgB;AAAA,MACA,iBAAAC;AAAA,IAAA,CACH;AAAA,EACL,GAEMC,KAAc,MAAM;AACtB,UAAM,EAAE,IAAIC,GAAa,MAAAC,GAAM,OAAOC,GAAsB,GAAGC,MAAwB3D,GACjF4D,IAAiB,EAAE,IAAI7E,KAAMyE,GAAa,GAAGG,EAAA,GAE7CE,IACF,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACI,GAAGH;AAAA,QACJ,KAAKtC;AAAA,QACL,cAAAvB;AAAA,QACA,UAAU4C;AAAA,QACV,SAASQ;AAAA,QACT,SAASjB;AAAA,QACT,SAASD;AAAA,QACT,OAAOnC,IAA2BY,IAAQ;AAAA,MAAA;AAAA,IAAA;AAIlD,WAAI+C,KAAQxD,KAAsBC,IAE1B,gBAAA4D;AAAA,MAACE;AAAA,MAAA;AAAA,QACG,MAAAP;AAAA,QACA,oBAAAxD;AAAA,QACA,qBAAAC;AAAA,QAEC,UAAA2D;AAAA,MAAA;AAAA,IAAA,IAKNA;AAAA,EACX,GAEMI,KAA0B,CAACZ,MAAuDA,EAAW,OAE7Fa,KAAqB,MAAM;AAC7B,UAAMC,IAAsBC;AAAA,MACxB;AAAA,MACArC,EAAc,aAAa;AAAA,MAC3B3B;AAAA,IAAA;AAGJ,QAAIT;AACA,aAAO,gBAAAmE,EAACO,IAAA,EAAgB,WAAWF,EAAA,CAAqB;AAG5D,UAAMG,IAAmBC,GAAQhF,CAAW;AAE5C,WAAI+E,KAAoB,CAACnE,IACd,yBAIN,MAAA,EAAG,MAAK,QAAO,WAAWgE,GAAqB,KAAK/C,GAChD,UAAA;AAAA,MAAAkD,KAAoBnE,KAAiB,gBAAA2D,EAACU,IAAA,EAAkC,SAASrE,KAAzB,eAAwC;AAAA,MAChGZ,EAAY,IAAI,CAAC8D,GAAYoB,MAAU;AAEpC,YAAIrF,KAAoB,CAACiE,EAAW,SAAS,CAAChE;AAC1C,gBAAM,IAAI;AAAA,YACN;AAAA,UAAA;AAKR,cAAMqF,IAAM,SAASrB,EAAW,SAASA,EAAWhE,KAAuB,EAAE,CAAC;AAE9E,YAAIgE,EAAW,UAAUA,EAAW;AAChC,iBAAO,gBAAAS,EAACa,IAAA,EAAyB,OAAQtB,EAAqC,SAAlDqB,CAAyD;AAGzF,cAAME,IAAiBxF,KAAsC6E;AAE7D,eACI,gBAAAH;AAAA,UAACe;AAAA,UAAA;AAAA,YAEG,QAAQJ,MAAU7D;AAAA,YAClB,UAAUyC,EAAW;AAAA,YACrB,OACIA,EAAW,mBAAmBA,EAAW,mBAAmBuB,EAAevB,CAAU;AAAA,YAEzF,UAAU,CAACyB,IAAuBzC,OAC9BI,EAAoBJ,IAAOgB,CAAU;AAAA,YAEzC,OAAAoB;AAAA,UAAA;AAAA,UATKC;AAAA,QAAA;AAAA,MAYjB,CAAC;AAAA,IAAA,GACL;AAAA,EAER,GAEMK,KAAUX;AAAA,IACZ;AAAA,IACA;AAAA,IACA7D,KAAU;AAAA,IACVwB,EAAc,UAAU;AAAA,IACxB1B;AAAA,EAAA;AAGJ,SACI,gBAAA2E,EAAC,SAAK,GAAG1E,IAAgB,WAAWyE,IAAS,WAAW3C,IAAe,KAAKnB,IACvE,UAAA;AAAA,IAAAsC,GAAA;AAAA,IACAW,GAAA;AAAA,EAAmB,GACxB;AAER;"}
+{"version":3,"file":"AutoSuggest.js","sources":["../../../src/components/autosuggest/AutoSuggest.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\nimport { noop } from 'es-toolkit/function';\nimport { isNil } from 'es-toolkit/predicate';\n\nimport classNames from '../../utils/classNames';\nimport ClearableInput from '../clearableInput/ClearableInput';\nimport { scrollItemIntoView, UP, DOWN } from '../../utils/scrollItemIntoView';\nimport { useDropDirection } from '../../utils/useDropDirection';\nimport DropdownHeader from '../selects/DropdownHeader';\nimport MenuItem from '../menuItems/MenuItem';\nimport useClickOutside from '../../hooks/useClickOutside';\nimport AutoSuggestAddons from './AutoSuggestAddons';\nimport DropdownSpinner from './DropdownSpinner';\nimport NoItemMessage from './NoItemMessage';\n\nexport type AutoSuggestSuggestion = {\n    /**\n     * The text label for a suggestion item. If present, this will be returned when selecting the suggestion.\n     */\n    label?: string;\n\n    /**\n     * Set to disable the suggestion and disallow selecting it.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Optional custom suggestion node that will be rendered as given. Example, this is used by the TagManager\n     * to render a placeholder with an icon next to it.\n     */\n    customSuggestion?: React.ReactNode;\n\n    /**\n     * Additional key-value pairs that are not relevant for rendering but may be handled on your side.\n     */\n    [name: string]: string | React.ReactNode;\n};\n\nexport type SelectedSuggestion = {\n    suggestionValue: string | React.ReactElement;\n    suggestion: AutoSuggestSuggestion;\n};\n\nexport type AutoSuggestInputProps = {\n    /**\n     * A native input id attribute. Passed through as HTML attribute to the input element.\n     */\n    id?: string;\n\n    /**\n     * The value to be set for the input. Using this prop the input can be controlled from the outside.\n     */\n    value?: string;\n\n    /**\n     * String that will be displayed inside the input when nothing is typed in.\n     * @default `Start typing ...`\n     */\n    placeholder?: string | React.ReactNode;\n\n    /**\n     * Icon class name that shall be used. If defined, the input element is wrapped in an input-group\n     * and the icon will be set in an input-addon. Example: `rioglyph-search`.\n     */\n    icon?: string;\n\n    /**\n     * Callback function which will be called when the input changes. __This is usually not needed__ as\n     * the \"onSuggestionsFetchRequested\" callback takes care of any input change. It is listed here\n     * for completeness and for certain edge cases.\n     *\n     * __Note:__ It might be removed in the future when not needed.'\n     * @deprecated please use `onSuggestionsFetchRequested` instead\n     * @param changeEvent\n     * @param changeProps\n     * @returns\n     */\n    onChange?: (changeEvent: React.SyntheticEvent, changeProps: { newValue: string }) => void;\n\n    /**\n     * Callback function which gets triggered when the input gaines focus.\n     */\n    onFocus?: VoidFunction;\n\n    /**\n     * Callback function which gets triggered when the input looses the focus.\n     */\n    onBlur?: VoidFunction;\n\n    /**\n     * Callback function which will be called when the input is cleared. __This is usually not needed__ as\n     * the \"onSuggestionsFetchRequested\" callback takes care of any input change. It is listed here\n     * for completeness and for certain edge cases.\n     *\n     * __Note:__ It might be removed in the future when not needed.\n     */\n    onClear?: VoidFunction;\n\n    /**\n     * Boolean value that adds the class `has-error` to the input\n     * component. Use this for validation use cases. The Autosuggest component\n     * should be wrapped in a `form-group` element with the class `has-feedback`.\n     * @default false\n     */\n    hasError?: boolean;\n\n    /**\n     * Defines the tab index to be added to the input element.\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Boolean value that disabled the input component.\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * The React ref for the underlying input.\n     */\n    inputRef?: React.MutableRefObject<HTMLInputElement>;\n\n    /**\n     * Additional class names that are added to the input component.\n     */\n    className?: string;\n};\n\nexport type AutoSuggestProps<T = AutoSuggestSuggestion> = {\n    /**\n     * A native input id attribute on the component root. Passed through as HTML attribute to the input element.\n     */\n    id?: string;\n\n    /**\n     * Object to define properties for the input component. For the input, the ClearableInput\n     * component is used.\n     */\n    inputProps?: AutoSuggestInputProps;\n\n    /**\n     * Array of items which will be displayed. Items can be arbitrary objects as long as they\n     * have a label defined.\n     *\n     * __Important__: in case you specify your own custom renderer via `renderSuggestion` prop, you\n     * can pass our own object that does not need to have a label. In this case you may want to\n     * specify the `customSuggestionKey` to avoid react throwing an error of rendering menu items with the same key.\n     */\n    suggestions?: AutoSuggestSuggestion[];\n\n    /**\n     * Text that will be shown when there is not match found. If nothing is defined the dropdown-menu\n     * will not be rendered.\n     */\n    noItemMessage?: string | React.ReactNode;\n\n    /**\n     * Callback function which will be called every time you need to recalculate suggestions e.i.\n     * when the filter is updates after each input. It will also be called when the input is\n     * cleared. The value would be an empty string in this case.\n     * @param result\n     * @returns\n     */\n    onSuggestionsFetchRequested?: (result: { value: string }) => void;\n\n    /**\n     * Callback function which will be called when a suggestion is selected from the dropdown menu.\n     * @param event\n     * @param selectedSuggestion\n     * @returns\n     */\n    onSuggestionSelected?: (\n        event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLDivElement>,\n        selectedSuggestion: SelectedSuggestion\n    ) => void;\n\n    /**\n     * Callback function which will be called every time the highlighted selection changes.\n     * @param suggestion\n     * @returns\n     */\n    onSuggestionHighlighted?: (suggestion: AutoSuggestSuggestion | null) => void;\n\n    /**\n     * Function that returns a string which will be displayed inside the input.\n     * This is required when a custom render function for suggestions is provided.\n     * Overwrite this function to provide the value to be used for a suggestion.\n     * Default implementation is: `suggestion => suggestion.label`\n     *\n     * @param suggestion\n     * @returns\n     */\n    getSuggestionValue?: (suggestion: AutoSuggestSuggestion) => string;\n\n    /**\n     * Function that defines how suggestions are rendered on the dropdown-menu.\n     * Use this to customize the appearance for instance when you want to show an icon\n     * for a suggestion.\n     * Default implementation is: `suggestion => suggestion.label`\n     *\n     * @param suggestion\n     * @returns\n     */\n    renderSuggestion?: (suggestion: AutoSuggestSuggestion) => React.ReactNode;\n\n    /**\n     * When rendering your own custom suggestions that do not have the `label` attribute, use this prop to specify\n     * a unique value for each suggestion which will be used as a react key for the individual menu items.\n     */\n    customSuggestionKey?: string;\n\n    /**\n     * Boolean that disabled autoDropDirection and opens the dropdown-menu be above the toggle.\n     * @default false\n     */\n    dropup?: boolean;\n\n    /**\n     * Defines whether the dropdown opens right aligned or not.\n     * Set to true additionally disables autoDrop feature.\n     * @default false\n     */\n    pullRight?: boolean;\n\n    /**\n     * Boolean that enables autoDrop feature.\n     * @default true\n     */\n    autoDropDirection?: boolean;\n\n    /**\n     * Shows a loading spinner instead of the items if set to true.\n     * @default false\n     */\n    isLoading?: boolean;\n\n    /**\n     * Boolean that enables opening the dropdown menu when gaining focus.\n     * @default false\n     */\n    openOnFocus?: boolean;\n\n    /**\n     * Boolean that enables the selection of an item to close the dropdown or not.\n     * @default true\n     */\n    closeOnSelect?: boolean;\n\n    /**\n     * Defines whether or not a selected item is shown in the input after it was selected.\n     * @default true\n     */\n    showSelectedItemsInInput?: boolean;\n\n    /**\n     * Sets autocomplete value for autosuggest forms.\n     */\n    autoComplete?: string;\n\n    /**\n     * Adds a list of input-addons elements in front of the input.\n     */\n    leadingInputAddons?: React.ReactNode[];\n\n    /**\n     * Adds a list of input-addons elements after the input.\n     */\n    trailingInputAddons?: React.ReactNode[];\n\n    /**\n     * Additional class names that are added to the dropdown element.\n     */\n    dropdownClassName?: string;\n\n    /**\n     * Additional class names that are added to the wrapping element.\n     */\n    className?: string;\n};\n\nexport const AutoSuggest = (props: AutoSuggestProps) => {\n    const {\n        id,\n        onSuggestionSelected = noop,\n        onSuggestionsFetchRequested = noop,\n        onSuggestionHighlighted = noop,\n        renderSuggestion,\n        customSuggestionKey,\n        getSuggestionValue,\n        suggestions = [],\n        autoDropDirection = true,\n        pullRight = false,\n        dropup = false,\n        isLoading = false,\n        openOnFocus = false,\n        closeOnSelect = true,\n        showSelectedItemsInInput = true,\n        autoComplete = 'off',\n        inputProps = {\n            id,\n            disabled: false,\n            onChange: noop,\n            onClear: noop,\n            onBlur: noop,\n            onFocus: noop,\n            placeholder: 'Start typing',\n            hasError: false,\n            tabIndex: 0,\n            value: undefined,\n            icon: undefined,\n        },\n        leadingInputAddons,\n        trailingInputAddons,\n        noItemMessage,\n        dropdownClassName = '',\n        className = '',\n        ...remainingProps\n    } = props;\n\n    const [isOpen, setIsOpen] = useState(false);\n    const [value, setValue] = useState(inputProps.value || '');\n    const [highlightedItemIndex, setHighlightedItemIndex] = useState(-1);\n    const [direction, setDirection] = useState(DOWN);\n\n    const componentRef = useClickOutside(() => closeMenu());\n    const dropdownMenuRef = useRef<HTMLUListElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const optionNodesRef = useRef<HTMLLIElement[]>([]);\n\n    // Update internal value state from outside when external input value is given.\n    // This is important for when this component is used as a controlled component\n    const externalValue = inputProps.value;\n    if (!isNil(externalValue) && value !== externalValue) {\n        setValue(externalValue ?? '');\n    }\n\n    // Fetch suggestions on mounting the component by using the external\n    // fetch callback\n    useEffect(() => onSuggestionsFetchRequested({ value }), []);\n\n    // When a new suggestion is highlighted it may be not in view as the dropdown menu\n    // has an overflow and can scroll. In this case, we need to scroll to the highlighted suggestion\n    // so the user can see it\n    useEffect(() => {\n        const focusedItem = getFocusedOptionNode();\n        scrollItemIntoView(direction, dropdownMenuRef.current, focusedItem);\n    }, [highlightedItemIndex, direction]);\n\n    // Used to store the list item reference to allow highlighting a single node.\n    // Update that list of nodes again when the suggestions change from the outside.\n    useEffect(() => {\n        const optionNodes = Array.from(dropdownMenuRef.current?.getElementsByTagName('li') || []);\n        optionNodesRef.current = optionNodes;\n    }, [suggestions]);\n\n    // Overwrite position of dropdown menu in case auto drop is enabled\n    const dropDirection = useDropDirection({ pullRight, dropup, autoDropDirection, dropdownMenuRef }, [suggestions]);\n\n    const openMenu = () => {\n        if (isOpen) {\n            return;\n        }\n        setIsOpen(true);\n    };\n\n    const closeMenu = () => {\n        setIsOpen(false);\n    };\n\n    const handleFocus = (_event: React.FocusEvent<HTMLInputElement>) => {\n        if (openOnFocus) {\n            openMenu();\n        }\n        if (inputProps.onFocus) {\n            inputProps.onFocus();\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        switch (event.key) {\n            case 'ArrowDown': {\n                // select below on arrow down key\n                const newHighlightedIndex = highlightedItemIndex + 1;\n                if (isOpen && suggestions.length > newHighlightedIndex) {\n                    setHighlightedItemIndex(newHighlightedIndex);\n                    handleHighlightedSuggestionChanged(Number(newHighlightedIndex));\n                    setDirection(DOWN);\n                }\n                return;\n            }\n            case 'ArrowUp':\n                // select above on arrow up key\n                if (isOpen && highlightedItemIndex > 0) {\n                    const newHighlightedIndex = highlightedItemIndex - 1;\n                    setHighlightedItemIndex(newHighlightedIndex);\n                    handleHighlightedSuggestionChanged(Number(newHighlightedIndex));\n                    setDirection(UP);\n                }\n                return;\n            case 'Enter':\n                // select on enter\n                if (isOpen && suggestions[highlightedItemIndex]) {\n                    onSuggestionClicked(event, suggestions[highlightedItemIndex]);\n                } else {\n                    openMenu();\n                }\n                break;\n            case 'Escape':\n            case 'Tab':\n                // close on esc key or on tab\n                closeMenu();\n                break;\n            default:\n                break;\n        }\n    };\n\n    const getFocusedOptionNode = () => {\n        return [...optionNodesRef.current].find((item: HTMLLIElement) => item.className.includes('active'));\n    };\n\n    const handleInputChange = (\n        newValue: string,\n        event: React.MouseEvent<HTMLSpanElement, MouseEvent> | React.ChangeEvent<HTMLInputElement>\n    ) => {\n        if (value !== newValue) {\n            updateInputValue(newValue, event);\n        }\n    };\n\n    const updateInputValue = (\n        newValue: string,\n        event:\n            | React.MouseEvent<HTMLSpanElement, MouseEvent>\n            | React.ChangeEvent<HTMLInputElement>\n            | React.KeyboardEvent<HTMLDivElement>,\n        shouldCloseMenu = false\n    ) => {\n        const closeMenuEventually = shouldCloseMenu ? false : isOpen;\n\n        setIsOpen(!isOpen ? true : closeMenuEventually);\n        setValue(newValue);\n        setHighlightedItemIndex(-1);\n\n        // Fire callback so the parent component can filter the suggestions accordingly\n        onSuggestionsFetchRequested({ value: newValue });\n\n        handleHighlightedSuggestionChanged(-1);\n\n        // Trigger onChange callback to notify usage component only when value has actually changed\n        const { value: newExternalValue, onChange = () => {} } = inputProps;\n        if (newValue !== newExternalValue) {\n            onChange(event, { newValue });\n        }\n    };\n\n    const handleHighlightedSuggestionChanged = (currentHighlightedItemIndex: number) => {\n        const currentHighlightedSuggestion =\n            currentHighlightedItemIndex === -1 ? null : suggestions[currentHighlightedItemIndex];\n        onSuggestionHighlighted(currentHighlightedSuggestion);\n    };\n\n    const clearInputValue = (_event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {\n        setValue('');\n        setHighlightedItemIndex(-1);\n\n        // Focus the input field after clearing it's value in order to allow\n        // entering new values right away\n        if (inputRef.current) {\n            inputRef.current.focus();\n        }\n\n        // Reset filter value so all suggestions are shown again\n        onSuggestionsFetchRequested({ value: '' });\n\n        handleHighlightedSuggestionChanged(-1);\n\n        // Additionally, fire the onClear callback as the service may react on it\n        if (inputProps.onClear) {\n            inputProps.onClear();\n        }\n    };\n\n    const getDefaultSuggestionValue = (suggestion: AutoSuggestSuggestion): string => {\n        return suggestion.label ?? (suggestion[customSuggestionKey ?? ''] as string) ?? '';\n    };\n\n    const onSuggestionClicked = (\n        event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLDivElement>,\n        suggestion: AutoSuggestSuggestion\n    ) => {\n        const getSuggestionValueFunction = getSuggestionValue ? getSuggestionValue : getDefaultSuggestionValue;\n\n        const suggestionValue = getSuggestionValueFunction(suggestion);\n\n        updateInputValue(suggestionValue, event, closeOnSelect);\n\n        // fire callback with the selected item\n        onSuggestionSelected(event, {\n            suggestion,\n            suggestionValue,\n        });\n    };\n\n    const renderInput = () => {\n        const { id: inputPropId, icon, value: ignoredExternalValue, ...remainingInputProps } = inputProps;\n        const clearableProps = { id: id ?? inputPropId, ...remainingInputProps };\n\n        const input = (\n            <ClearableInput\n                {...clearableProps}\n                ref={inputRef}\n                autoComplete={autoComplete}\n                onChange={handleInputChange}\n                onClear={clearInputValue}\n                onFocus={handleFocus}\n                onClick={openMenu}\n                value={showSelectedItemsInInput ? value : ''}\n            />\n        );\n\n        if (icon || leadingInputAddons || trailingInputAddons) {\n            return (\n                <AutoSuggestAddons\n                    icon={icon}\n                    leadingInputAddons={leadingInputAddons}\n                    trailingInputAddons={trailingInputAddons}\n                >\n                    {input}\n                </AutoSuggestAddons>\n            );\n        }\n\n        return input;\n    };\n\n    const renderDefaultSuggestion = (suggestion: AutoSuggestSuggestion): React.ReactNode => suggestion.label;\n\n    const renderDropdownMenu = () => {\n        const dropdownMenuClasses = classNames(\n            'dropdown-menu',\n            dropDirection.pullRight && 'pull-right',\n            dropdownClassName\n        );\n\n        if (isLoading) {\n            return <DropdownSpinner className={dropdownMenuClasses} />;\n        }\n\n        const hasNoSuggestions = isEmpty(suggestions);\n\n        if (hasNoSuggestions && !noItemMessage) {\n            return null;\n        }\n\n        return (\n            <ul role='menu' className={dropdownMenuClasses} ref={dropdownMenuRef}>\n                {hasNoSuggestions && noItemMessage && <NoItemMessage key='NoItemMessage' message={noItemMessage} />}\n                {suggestions.map((suggestion, index) => {\n                    // In case a custom renderer is used but the customSuggestionKey is not set, throw an error\n                    if (renderSuggestion && !suggestion.label && !customSuggestionKey) {\n                        throw new Error(\n                            'The \"customSuggestionKey\" need to be set when using a custom renderer ' +\n                                'and not using the \"label\" prop for suggestions'\n                        );\n                    }\n\n                    const key = `index-${suggestion.label ?? suggestion[customSuggestionKey ?? '']}`;\n\n                    if (suggestion.header && suggestion.label) {\n                        return <DropdownHeader key={key} label={(suggestion as AutoSuggestSuggestion).label} />;\n                    }\n\n                    const renderFunction = renderSuggestion ? renderSuggestion : renderDefaultSuggestion;\n\n                    return (\n                        <MenuItem\n                            key={key}\n                            active={index === highlightedItemIndex}\n                            disabled={suggestion.disabled}\n                            value={\n                                suggestion.customSuggestion ? suggestion.customSuggestion : renderFunction(suggestion)\n                            }\n                            onSelect={(_: number | undefined, event: React.MouseEvent<HTMLLIElement>) =>\n                                onSuggestionClicked(event, suggestion)\n                            }\n                            index={index}\n                        />\n                    );\n                })}\n            </ul>\n        );\n    };\n\n    const classes = classNames(\n        'AutoSuggest',\n        'dropdown',\n        isOpen && 'open',\n        dropDirection.dropup && 'dropup',\n        className\n    );\n\n    return (\n        <div {...remainingProps} className={classes} onKeyDown={handleKeyDown} ref={componentRef}>\n            {renderInput()}\n            {renderDropdownMenu()}\n        </div>\n    );\n};\n\nexport default AutoSuggest;\n"],"names":["AutoSuggest","props","id","onSuggestionSelected","noop","onSuggestionsFetchRequested","onSuggestionHighlighted","renderSuggestion","customSuggestionKey","getSuggestionValue","suggestions","autoDropDirection","pullRight","dropup","isLoading","openOnFocus","closeOnSelect","showSelectedItemsInInput","autoComplete","inputProps","leadingInputAddons","trailingInputAddons","noItemMessage","dropdownClassName","className","remainingProps","isOpen","setIsOpen","useState","value","setValue","highlightedItemIndex","setHighlightedItemIndex","direction","setDirection","DOWN","componentRef","useClickOutside","closeMenu","dropdownMenuRef","useRef","inputRef","optionNodesRef","externalValue","isNil","useEffect","focusedItem","getFocusedOptionNode","scrollItemIntoView","optionNodes","dropDirection","useDropDirection","openMenu","handleFocus","_event","handleKeyDown","event","newHighlightedIndex","handleHighlightedSuggestionChanged","UP","onSuggestionClicked","item","handleInputChange","newValue","updateInputValue","shouldCloseMenu","newExternalValue","onChange","currentHighlightedItemIndex","currentHighlightedSuggestion","clearInputValue","getDefaultSuggestionValue","suggestion","suggestionValue","renderInput","inputPropId","icon","ignoredExternalValue","remainingInputProps","clearableProps","input","jsx","ClearableInput","AutoSuggestAddons","renderDefaultSuggestion","renderDropdownMenu","dropdownMenuClasses","classNames","DropdownSpinner","hasNoSuggestions","isEmpty","NoItemMessage","index","key","DropdownHeader","renderFunction","MenuItem","_","classes","jsxs"],"mappings":"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"}

package/components/avatar/Avatar.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import _ from "classnames";
+import _ from "../../utils/classNames.js";
 import g from "../tooltip/SimpleTooltip.js";
 import I from "./AvatarContent.js";
 const N = 100, O = 0, M = (s) => {

package/components/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport classNames from 'classnames';\n\nimport SimpleTooltip from '../tooltip/SimpleTooltip';\nimport AvatarContent from './AvatarContent';\n\nconst TOOLTIP_SHOW_TIMEOUT_IN_MS = 100;\nconst TOOLTIP_HIDE_TIMEOUT_IN_MS = 0;\n\nexport type AvatarProps = ComponentProps<'div'> & {\n    /**\n     * When a name is provided, the Avatar automatically generates and displays the initials of that name.\n     * The name also appears in a tooltip when hovered over.\n     */\n    name?: string;\n\n    /**\n     * The abbreviation can also be defined manually. It is recommended to limit abbreviations\n     * to a maximum of 2 to 3 characters.\n     */\n    abbr?: string;\n\n    /**\n     * The image to be shown. When an image is displayed, the abbreviation is not shown.\n     */\n    image?: string;\n\n    /**\n     * The image alt text. If not given, the name will be used.\n     */\n    alt?: string;\n\n    /**\n     * The name of an icon that should be shown instead of initials. If nothing is provided,\n     * a default icon will be shown.\n     *\n     * @default 'user'\n     */\n    iconName?: string;\n\n    /**\n     * The height and width of the component.\n     *\n     * @default 40\n     */\n    size?: number;\n\n    /**\n     * The background color for the component. By default, the text and icon color is derived from the background color.\n     *\n     * @default 'bg-lighter'\n     */\n    backgroundColor?: string;\n\n    /**\n     * The content of the Avatars tooltip. if nothing is provided, the name is used.\n     */\n    tooltip?: string | JSX.Element;\n\n    /**\n     * Additional classes set to the icon element.\n     */\n    iconClassName?: string;\n\n    /**\n     * Additional classes set to the wrapper element.\n     */\n    className?: string;\n};\n\nconst Avatar = (props: AvatarProps) => {\n    const {\n        name,\n        abbr,\n        image,\n        alt,\n        iconName = 'user',\n        size = 40,\n        backgroundColor = 'bg-lighter',\n        tooltip,\n        iconClassName,\n        className = '',\n        ...remainingProps\n    } = props;\n\n    const classes = classNames('Avatar', backgroundColor, className);\n\n    const tooltipContent = tooltip || name;\n\n    const wrapWithTooltip = (content: JSX.Element) =>\n        tooltipContent ? (\n            <SimpleTooltip\n                content={tooltipContent}\n                placement='bottom'\n                delay={{ show: TOOLTIP_SHOW_TIMEOUT_IN_MS, hide: TOOLTIP_HIDE_TIMEOUT_IN_MS }}\n                popperConfig={{\n                    modifiers: [\n                        {\n                            name: 'offset',\n                            options: {\n                                offset: [0, 5],\n                            },\n                        },\n                        {\n                            name: 'arrow',\n                            options: {},\n                        },\n                    ],\n                }}\n            >\n                {content}\n            </SimpleTooltip>\n        ) : (\n            content\n        );\n\n    return wrapWithTooltip(\n        <div {...remainingProps} className={classes} style={{ height: `${size}px` }}>\n            <AvatarContent\n                name={name}\n                abbr={abbr}\n                image={image}\n                alt={alt}\n                iconName={iconName}\n                iconClassName={iconClassName}\n            />\n        </div>\n    );\n};\n\nexport default Avatar;\n"],"names":["TOOLTIP_SHOW_TIMEOUT_IN_MS","TOOLTIP_HIDE_TIMEOUT_IN_MS","Avatar","props","name","abbr","image","alt","iconName","size","backgroundColor","tooltip","iconClassName","className","remainingProps","classes","classNames","tooltipContent","content","jsx","SimpleTooltip","AvatarContent"],"mappings":";;;;AAMA,MAAMA,IAA6B,KAC7BC,IAA6B,GA+D7BC,IAAS,CAACC,MAAuB;AACnC,QAAM;AAAA,IACF,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,KAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,MAAAC,IAAO;AAAA,IACP,iBAAAC,IAAkB;AAAA,IAClB,SAAAC;AAAA,IACA,eAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,GAAGC;AAAA,EAAA,IACHX,GAEEY,IAAUC,EAAW,UAAUN,GAAiBG,CAAS,GAEzDI,IAAiBN,KAAWP;AA6BlC,UA3BwB,CAACc,MACrBD,IACI,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,SAASH;AAAA,MACT,WAAU;AAAA,MACV,OAAO,EAAE,MAAMjB,GAA4B,MAAMC,EAAA;AAAA,MACjD,cAAc;AAAA,QACV,WAAW;AAAA,UACP;AAAA,YACI,MAAM;AAAA,YACN,SAAS;AAAA,cACL,QAAQ,CAAC,GAAG,CAAC;AAAA,YAAA;AAAA,UACjB;AAAA,UAEJ;AAAA,YACI,MAAM;AAAA,YACN,SAAS,CAAA;AAAA,UAAC;AAAA,QACd;AAAA,MACJ;AAAA,MAGH,UAAAiB;AAAA,IAAA;AAAA,EAAA,IAGLA;AAAA,IAIJ,gBAAAC,EAAC,OAAA,EAAK,GAAGL,GAAgB,WAAWC,GAAS,OAAO,EAAE,QAAQ,GAAGN,CAAI,KAAA,GACjE,UAAA,gBAAAU;AAAA,MAACE;AAAA,MAAA;AAAA,QACG,MAAAjB;AAAA,QACA,MAAAC;AAAA,QACA,OAAAC;AAAA,QACA,KAAAC;AAAA,QACA,UAAAC;AAAA,QACA,eAAAI;AAAA,MAAA;AAAA,IAAA,EACJ,CACJ;AAAA,EAAA;AAER;"}
+{"version":3,"file":"Avatar.js","sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport SimpleTooltip from '../tooltip/SimpleTooltip';\nimport AvatarContent from './AvatarContent';\n\nconst TOOLTIP_SHOW_TIMEOUT_IN_MS = 100;\nconst TOOLTIP_HIDE_TIMEOUT_IN_MS = 0;\n\nexport type AvatarProps = ComponentProps<'div'> & {\n    /**\n     * When a name is provided, the Avatar automatically generates and displays the initials of that name.\n     * The name also appears in a tooltip when hovered over.\n     */\n    name?: string;\n\n    /**\n     * The abbreviation can also be defined manually. It is recommended to limit abbreviations\n     * to a maximum of 2 to 3 characters.\n     */\n    abbr?: string;\n\n    /**\n     * The image to be shown. When an image is displayed, the abbreviation is not shown.\n     */\n    image?: string;\n\n    /**\n     * The image alt text. If not given, the name will be used.\n     */\n    alt?: string;\n\n    /**\n     * The name of an icon that should be shown instead of initials. If nothing is provided,\n     * a default icon will be shown.\n     *\n     * @default 'user'\n     */\n    iconName?: string;\n\n    /**\n     * The height and width of the component.\n     *\n     * @default 40\n     */\n    size?: number;\n\n    /**\n     * The background color for the component. By default, the text and icon color is derived from the background color.\n     *\n     * @default 'bg-lighter'\n     */\n    backgroundColor?: string;\n\n    /**\n     * The content of the Avatars tooltip. if nothing is provided, the name is used.\n     */\n    tooltip?: string | JSX.Element;\n\n    /**\n     * Additional classes set to the icon element.\n     */\n    iconClassName?: string;\n\n    /**\n     * Additional classes set to the wrapper element.\n     */\n    className?: string;\n};\n\nconst Avatar = (props: AvatarProps) => {\n    const {\n        name,\n        abbr,\n        image,\n        alt,\n        iconName = 'user',\n        size = 40,\n        backgroundColor = 'bg-lighter',\n        tooltip,\n        iconClassName,\n        className = '',\n        ...remainingProps\n    } = props;\n\n    const classes = classNames('Avatar', backgroundColor, className);\n\n    const tooltipContent = tooltip || name;\n\n    const wrapWithTooltip = (content: JSX.Element) =>\n        tooltipContent ? (\n            <SimpleTooltip\n                content={tooltipContent}\n                placement='bottom'\n                delay={{ show: TOOLTIP_SHOW_TIMEOUT_IN_MS, hide: TOOLTIP_HIDE_TIMEOUT_IN_MS }}\n                popperConfig={{\n                    modifiers: [\n                        {\n                            name: 'offset',\n                            options: {\n                                offset: [0, 5],\n                            },\n                        },\n                        {\n                            name: 'arrow',\n                            options: {},\n                        },\n                    ],\n                }}\n            >\n                {content}\n            </SimpleTooltip>\n        ) : (\n            content\n        );\n\n    return wrapWithTooltip(\n        <div {...remainingProps} className={classes} style={{ height: `${size}px` }}>\n            <AvatarContent\n                name={name}\n                abbr={abbr}\n                image={image}\n                alt={alt}\n                iconName={iconName}\n                iconClassName={iconClassName}\n            />\n        </div>\n    );\n};\n\nexport default Avatar;\n"],"names":["TOOLTIP_SHOW_TIMEOUT_IN_MS","TOOLTIP_HIDE_TIMEOUT_IN_MS","Avatar","props","name","abbr","image","alt","iconName","size","backgroundColor","tooltip","iconClassName","className","remainingProps","classes","classNames","tooltipContent","content","jsx","SimpleTooltip","AvatarContent"],"mappings":";;;;AAMA,MAAMA,IAA6B,KAC7BC,IAA6B,GA+D7BC,IAAS,CAACC,MAAuB;AACnC,QAAM;AAAA,IACF,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,KAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,MAAAC,IAAO;AAAA,IACP,iBAAAC,IAAkB;AAAA,IAClB,SAAAC;AAAA,IACA,eAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,GAAGC;AAAA,EAAA,IACHX,GAEEY,IAAUC,EAAW,UAAUN,GAAiBG,CAAS,GAEzDI,IAAiBN,KAAWP;AA6BlC,UA3BwB,CAACc,MACrBD,IACI,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,SAASH;AAAA,MACT,WAAU;AAAA,MACV,OAAO,EAAE,MAAMjB,GAA4B,MAAMC,EAAA;AAAA,MACjD,cAAc;AAAA,QACV,WAAW;AAAA,UACP;AAAA,YACI,MAAM;AAAA,YACN,SAAS;AAAA,cACL,QAAQ,CAAC,GAAG,CAAC;AAAA,YAAA;AAAA,UACjB;AAAA,UAEJ;AAAA,YACI,MAAM;AAAA,YACN,SAAS,CAAA;AAAA,UAAC;AAAA,QACd;AAAA,MACJ;AAAA,MAGH,UAAAiB;AAAA,IAAA;AAAA,EAAA,IAGLA;AAAA,IAIJ,gBAAAC,EAAC,OAAA,EAAK,GAAGL,GAAgB,WAAWC,GAAS,OAAO,EAAE,QAAQ,GAAGN,CAAI,KAAA,GACjE,UAAA,gBAAAU;AAAA,MAACE;AAAA,MAAA;AAAA,QACG,MAAAjB;AAAA,QACA,MAAAC;AAAA,QACA,OAAAC;AAAA,QACA,KAAAC;AAAA,QACA,UAAAC;AAAA,QACA,eAAAI;AAAA,MAAA;AAAA,IAAA,EACJ,CACJ;AAAA,EAAA;AAER;"}

package/components/banner/Banner.js

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as d } from "react/jsx-runtime";
 import { createContext as H, useState as y, useRef as E, useEffect as x } from "react";
 import { useReducedMotion as T, AnimatePresence as b, motion as C } from "motion/react";
-import q from "classnames";
+import q from "../../utils/classNames.js";
 import D from "../card/Card.js";
 import m from "../button/Button.js";
 import F from "./BannerActions.js";

package/components/banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sources":["../../../src/components/banner/Banner.tsx"],"sourcesContent":["import { useState, useEffect, createContext, useRef, type ReactNode } from 'react';\nimport { motion, AnimatePresence, useReducedMotion } from 'motion/react';\n\nimport classNames from 'classnames';\n\nimport Card from '../card/Card';\nimport Button from '../button/Button';\nimport BannerPageActions from './BannerActions';\nimport BannerPageContent from './BannerContent';\nimport BannerPageIcon from './BannerIcon';\nimport BannerPage from './BannerPage';\n\nconst BannerContext = createContext<{ nextPage: () => void; prevPage: () => void } | undefined>(undefined);\n\ntype BannerProps = {\n    /**\n     * Defines if the content is shown or not.\n     *\n     * @default true\n     */\n    show: boolean;\n\n    /**\n     * Defines if a close button is shown or not. You can still add a custom\n     * CTA button to the content that handles visibility.\n     *\n     * @default true\n     */\n    dismissible?: boolean;\n\n    /**\n     * Callback when the close button is clicked.\n     *\n     * @returns\n     */\n    onClose?: () => void;\n\n    /**\n     * Defines the time when the next page is shown in milliseconds.\n     *\n     * @default 20_000\n     */\n    pageTimeout?: number;\n\n    /**\n     * Defines if the page navigation buttons shall be shown or not.\n     *\n     * @default true\n     */\n    showPageNavigation?: boolean;\n\n    /**\n     * Defines if a border is shown or not. When placed on a white background, please disable the border\n     * so it looks better.\n     *\n     * @default true\n     */\n    border?: boolean;\n\n    /**\n     * Enables or disables initial animation.\n     *\n     * @default true\n     */\n    initialAnimation?: boolean;\n\n    /**\n     * Additional classname added to the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * The actual banner content. Wrap your content in a <Banner.Page> component.\n     *\n     * When having multiple pages, usa an array of <Banner.Page> components.\n     */\n    children: ReactNode | ReactNode[];\n};\n\nconst Banner = (props: BannerProps) => {\n    const {\n        show = true,\n        dismissible = true,\n        onClose = () => {},\n        pageTimeout = 20_000,\n        showPageNavigation = true,\n        border = true,\n        initialAnimation = true,\n        className = '',\n        children,\n        ...remainingProps\n    } = props;\n\n    const pages = Array.isArray(children) ? children : [children];\n    const pageAmount = pages.length;\n    const hasMultiplePages = pageAmount > 1;\n\n    const [currentPage, setCurrentPage] = useState(0);\n\n    const shouldReduceMotion = useReducedMotion();\n    const hasAnimation = !shouldReduceMotion && initialAnimation;\n\n    const contentRef = useRef<HTMLDivElement>(null);\n    const [contentHeight, setContentHeight] = useState(0);\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: \"currentPage\" resets interval on manual page change\n    useEffect(() => {\n        if (!show || pageAmount === 1) {\n            return;\n        }\n\n        const interval = setInterval(() => {\n            nextPage();\n        }, pageTimeout);\n\n        return () => clearInterval(interval);\n    }, [pageAmount, pageTimeout, show, currentPage]);\n\n    // Update height measurement after layout is complete\n    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>\n    useEffect(() => {\n        if (!contentRef.current) {\n            return;\n        }\n\n        // Use ResizeObserver to get accurate measurements after layout\n        const resizeObserver = new ResizeObserver(entries => {\n            const entry = entries[0];\n            if (entry) {\n                // Use getBoundingClientRect for most accurate height\n                const height = entry.target.getBoundingClientRect().height;\n                setContentHeight(height);\n            }\n        });\n\n        resizeObserver.observe(contentRef.current);\n\n        return () => resizeObserver.disconnect();\n    }, [show, currentPage]);\n\n    const nextPage = () => {\n        if (hasMultiplePages) {\n            setCurrentPage(prev => (prev + 1) % pageAmount);\n        }\n    };\n\n    const prevPage = () => {\n        if (hasMultiplePages) {\n            setCurrentPage(prev => (prev - 1 + pageAmount) % pageAmount);\n        }\n    };\n\n    const cardClasses = classNames(\n        'Banner display-flex text-color-darker overflow-hidden',\n        'position-relative',\n        !border && 'border-color-white',\n        className\n    );\n\n    return (\n        <BannerContext.Provider value={{ nextPage, prevPage }}>\n            <AnimatePresence>\n                {show && (\n                    <motion.div\n                        initial={{ height: 0, opacity: 0 }}\n                        animate={{ height: contentHeight, opacity: 1 }}\n                        exit={{ height: 0, opacity: 0 }}\n                        transition={{\n                            height: { duration: 0.2 },\n                            opacity: { duration: 0.2 },\n                            ease: 'easeInOut',\n                        }}\n                    >\n                        <div ref={contentRef} style={{ position: 'relative' }}>\n                            <Card className={cardClasses} padding={20} {...remainingProps}>\n                                <div className='flex-1-1 overflow-hidden'>\n                                    <AnimatePresence mode='wait'>\n                                        <motion.div\n                                            key={currentPage}\n                                            initial={hasAnimation ? { opacity: 0, x: 100 } : false}\n                                            animate={{ opacity: 1, x: 0 }}\n                                            exit={hasAnimation ? { opacity: 0, x: -100 } : undefined}\n                                            transition={{\n                                                duration: 1.5,\n                                                ease: [0.25, 1, 0.5, 1],\n                                            }}\n                                        >\n                                            {pages[currentPage]}\n                                        </motion.div>\n                                    </AnimatePresence>\n\n                                    {hasMultiplePages && showPageNavigation && (\n                                        <div className='margin-5'>\n                                            <div className='position-absolute bottom-5' style={{ right: '45px' }}>\n                                                <div className='display-flex'>\n                                                    <Button\n                                                        bsStyle='muted'\n                                                        bsSize='xs'\n                                                        onClick={prevPage}\n                                                        iconName='rioglyph-arrow-left'\n                                                        iconOnly\n                                                    />\n                                                    <Button\n                                                        bsStyle='muted'\n                                                        bsSize='xs'\n                                                        onClick={nextPage}\n                                                        iconName='rioglyph-arrow-right'\n                                                        iconOnly\n                                                    />\n                                                </div>\n                                            </div>\n                                        </div>\n                                    )}\n                                </div>\n                                {dismissible && (\n                                    <div className='flex-0 margin-left-10 margin-right--5 margin-top--5 margin-top-0-ls align-self-start align-self-center-ls'>\n                                        <Button\n                                            bsStyle='muted'\n                                            bsSize='sm'\n                                            onClick={onClose}\n                                            iconName='rioglyph-remove'\n                                            iconOnly\n                                        />\n                                    </div>\n                                )}\n                            </Card>\n                        </div>\n                    </motion.div>\n                )}\n            </AnimatePresence>\n        </BannerContext.Provider>\n    );\n};\n\nBanner.Page = BannerPage;\nBanner.Icon = BannerPageIcon;\nBanner.Content = BannerPageContent;\nBanner.Actions = BannerPageActions;\n\nexport default Banner;\n"],"names":["BannerContext","createContext","Banner","props","show","dismissible","onClose","pageTimeout","showPageNavigation","border","initialAnimation","className","children","remainingProps","pages","pageAmount","hasMultiplePages","currentPage","setCurrentPage","useState","hasAnimation","useReducedMotion","contentRef","useRef","contentHeight","setContentHeight","useEffect","interval","nextPage","resizeObserver","entries","entry","height","prev","prevPage","cardClasses","classNames","jsx","AnimatePresence","motion","jsxs","Card","Button","BannerPage","BannerPageIcon","BannerPageContent","BannerPageActions"],"mappings":"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"}
+{"version":3,"file":"Banner.js","sources":["../../../src/components/banner/Banner.tsx"],"sourcesContent":["import { useState, useEffect, createContext, useRef, type ReactNode } from 'react';\nimport { motion, AnimatePresence, useReducedMotion } from 'motion/react';\n\nimport classNames from '../../utils/classNames';\nimport Card from '../card/Card';\nimport Button from '../button/Button';\nimport BannerPageActions from './BannerActions';\nimport BannerPageContent from './BannerContent';\nimport BannerPageIcon from './BannerIcon';\nimport BannerPage from './BannerPage';\n\nconst BannerContext = createContext<{ nextPage: () => void; prevPage: () => void } | undefined>(undefined);\n\ntype BannerProps = {\n    /**\n     * Defines if the content is shown or not.\n     *\n     * @default true\n     */\n    show: boolean;\n\n    /**\n     * Defines if a close button is shown or not. You can still add a custom\n     * CTA button to the content that handles visibility.\n     *\n     * @default true\n     */\n    dismissible?: boolean;\n\n    /**\n     * Callback when the close button is clicked.\n     *\n     * @returns\n     */\n    onClose?: () => void;\n\n    /**\n     * Defines the time when the next page is shown in milliseconds.\n     *\n     * @default 20_000\n     */\n    pageTimeout?: number;\n\n    /**\n     * Defines if the page navigation buttons shall be shown or not.\n     *\n     * @default true\n     */\n    showPageNavigation?: boolean;\n\n    /**\n     * Defines if a border is shown or not. When placed on a white background, please disable the border\n     * so it looks better.\n     *\n     * @default true\n     */\n    border?: boolean;\n\n    /**\n     * Enables or disables initial animation.\n     *\n     * @default true\n     */\n    initialAnimation?: boolean;\n\n    /**\n     * Additional classname added to the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * The actual banner content. Wrap your content in a <Banner.Page> component.\n     *\n     * When having multiple pages, usa an array of <Banner.Page> components.\n     */\n    children: ReactNode | ReactNode[];\n};\n\nconst Banner = (props: BannerProps) => {\n    const {\n        show = true,\n        dismissible = true,\n        onClose = () => {},\n        pageTimeout = 20_000,\n        showPageNavigation = true,\n        border = true,\n        initialAnimation = true,\n        className = '',\n        children,\n        ...remainingProps\n    } = props;\n\n    const pages = Array.isArray(children) ? children : [children];\n    const pageAmount = pages.length;\n    const hasMultiplePages = pageAmount > 1;\n\n    const [currentPage, setCurrentPage] = useState(0);\n\n    const shouldReduceMotion = useReducedMotion();\n    const hasAnimation = !shouldReduceMotion && initialAnimation;\n\n    const contentRef = useRef<HTMLDivElement>(null);\n    const [contentHeight, setContentHeight] = useState(0);\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: \"currentPage\" resets interval on manual page change\n    useEffect(() => {\n        if (!show || pageAmount === 1) {\n            return;\n        }\n\n        const interval = setInterval(() => {\n            nextPage();\n        }, pageTimeout);\n\n        return () => clearInterval(interval);\n    }, [pageAmount, pageTimeout, show, currentPage]);\n\n    // Update height measurement after layout is complete\n    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>\n    useEffect(() => {\n        if (!contentRef.current) {\n            return;\n        }\n\n        // Use ResizeObserver to get accurate measurements after layout\n        const resizeObserver = new ResizeObserver(entries => {\n            const entry = entries[0];\n            if (entry) {\n                // Use getBoundingClientRect for most accurate height\n                const height = entry.target.getBoundingClientRect().height;\n                setContentHeight(height);\n            }\n        });\n\n        resizeObserver.observe(contentRef.current);\n\n        return () => resizeObserver.disconnect();\n    }, [show, currentPage]);\n\n    const nextPage = () => {\n        if (hasMultiplePages) {\n            setCurrentPage(prev => (prev + 1) % pageAmount);\n        }\n    };\n\n    const prevPage = () => {\n        if (hasMultiplePages) {\n            setCurrentPage(prev => (prev - 1 + pageAmount) % pageAmount);\n        }\n    };\n\n    const cardClasses = classNames(\n        'Banner display-flex text-color-darker overflow-hidden',\n        'position-relative',\n        !border && 'border-color-white',\n        className\n    );\n\n    return (\n        <BannerContext.Provider value={{ nextPage, prevPage }}>\n            <AnimatePresence>\n                {show && (\n                    <motion.div\n                        initial={{ height: 0, opacity: 0 }}\n                        animate={{ height: contentHeight, opacity: 1 }}\n                        exit={{ height: 0, opacity: 0 }}\n                        transition={{\n                            height: { duration: 0.2 },\n                            opacity: { duration: 0.2 },\n                            ease: 'easeInOut',\n                        }}\n                    >\n                        <div ref={contentRef} style={{ position: 'relative' }}>\n                            <Card className={cardClasses} padding={20} {...remainingProps}>\n                                <div className='flex-1-1 overflow-hidden'>\n                                    <AnimatePresence mode='wait'>\n                                        <motion.div\n                                            key={currentPage}\n                                            initial={hasAnimation ? { opacity: 0, x: 100 } : false}\n                                            animate={{ opacity: 1, x: 0 }}\n                                            exit={hasAnimation ? { opacity: 0, x: -100 } : undefined}\n                                            transition={{\n                                                duration: 1.5,\n                                                ease: [0.25, 1, 0.5, 1],\n                                            }}\n                                        >\n                                            {pages[currentPage]}\n                                        </motion.div>\n                                    </AnimatePresence>\n\n                                    {hasMultiplePages && showPageNavigation && (\n                                        <div className='margin-5'>\n                                            <div className='position-absolute bottom-5' style={{ right: '45px' }}>\n                                                <div className='display-flex'>\n                                                    <Button\n                                                        bsStyle='muted'\n                                                        bsSize='xs'\n                                                        onClick={prevPage}\n                                                        iconName='rioglyph-arrow-left'\n                                                        iconOnly\n                                                    />\n                                                    <Button\n                                                        bsStyle='muted'\n                                                        bsSize='xs'\n                                                        onClick={nextPage}\n                                                        iconName='rioglyph-arrow-right'\n                                                        iconOnly\n                                                    />\n                                                </div>\n                                            </div>\n                                        </div>\n                                    )}\n                                </div>\n                                {dismissible && (\n                                    <div className='flex-0 margin-left-10 margin-right--5 margin-top--5 margin-top-0-ls align-self-start align-self-center-ls'>\n                                        <Button\n                                            bsStyle='muted'\n                                            bsSize='sm'\n                                            onClick={onClose}\n                                            iconName='rioglyph-remove'\n                                            iconOnly\n                                        />\n                                    </div>\n                                )}\n                            </Card>\n                        </div>\n                    </motion.div>\n                )}\n            </AnimatePresence>\n        </BannerContext.Provider>\n    );\n};\n\nBanner.Page = BannerPage;\nBanner.Icon = BannerPageIcon;\nBanner.Content = BannerPageContent;\nBanner.Actions = BannerPageActions;\n\nexport default Banner;\n"],"names":["BannerContext","createContext","Banner","props","show","dismissible","onClose","pageTimeout","showPageNavigation","border","initialAnimation","className","children","remainingProps","pages","pageAmount","hasMultiplePages","currentPage","setCurrentPage","useState","hasAnimation","useReducedMotion","contentRef","useRef","contentHeight","setContentHeight","useEffect","interval","nextPage","resizeObserver","entries","entry","height","prev","prevPage","cardClasses","classNames","jsx","AnimatePresence","motion","jsxs","Card","Button","BannerPage","BannerPageIcon","BannerPageContent","BannerPageActions"],"mappings":"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"}

package/components/banner/BannerContent.js

@@ -1,5 +1,5 @@
 import { jsxs as t, jsx as s } from "react/jsx-runtime";
-import f from "classnames";
+import f from "../../utils/classNames.js";
 import x from "../../hooks/useResizeObserver.js";
 const h = 400, z = (r) => {
   const {

package/components/banner/BannerContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerContent.js","sources":["../../../src/components/banner/BannerContent.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nimport useResizeObserver from '../../useResizeObserver';\n\nconst DEFAULT_MIN_WIDTH_BREAKPOINT = 400;\n\ntype BannerContentProps = Partial<Pick<HTMLDivElement, 'id'>> & {\n    /**\n     * The title for the banner.\n     */\n    title?: string | React.ReactElement;\n\n    /**\n     * Use this to add the banner call-to-action buttons. Wrap them in a <Banner.Actions> component.\n     */\n    actions?: React.ReactElement;\n\n    /**\n     * Breakpoint in pixels where the action buttons are placed under the banner text.\n     *\n     * On larger screens, the buttons are next to the text.\n     *\n     * @default 400\n     */\n    minWidthBreakpoint?: number;\n\n    /**\n     * Additional classname added to the wrapper element.\n     */\n    className?: string;\n};\n\nconst BannerContent = (props: PropsWithChildren<BannerContentProps>) => {\n    const {\n        title,\n        actions,\n        children,\n        minWidthBreakpoint = DEFAULT_MIN_WIDTH_BREAKPOINT,\n        className = '',\n        ...remainingProps\n    } = props;\n\n    // Check size of the container for responsive breakpoints\n    const [contentRef, _, { inlineSize }] = useResizeObserver();\n    const containerWidth = inlineSize ?? 0;\n\n    const contentWithActionClass = classNames(\n        'flex-1-1',\n        'BannerContent',\n        'display-flex gap-15',\n        containerWidth < minWidthBreakpoint ? 'flex-column' : 'flex-row align-items-center',\n        className\n    );\n\n    if (actions) {\n        return (\n            <div ref={contentRef} className={contentWithActionClass} {...remainingProps}>\n                <div className='flex-1-1 min-width-100'>\n                    {title && <div className='text-size-16 text-medium'>{title}</div>}\n                    {children}\n                </div>\n                {actions}\n            </div>\n        );\n    }\n\n    return (\n        <div className='flex-1-1'>\n            {title && <div className='text-size-16 text-medium'>{title}</div>}\n            {children}\n        </div>\n    );\n};\n\nexport default BannerContent;\n"],"names":["DEFAULT_MIN_WIDTH_BREAKPOINT","BannerContent","props","title","actions","children","minWidthBreakpoint","className","remainingProps","contentRef","_","inlineSize","useResizeObserver","contentWithActionClass","classNames","jsxs","jsx"],"mappings":";;;AAKA,MAAMA,IAA+B,KA4B/BC,IAAgB,CAACC,MAAiD;AACpE,QAAM;AAAA,IACF,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,oBAAAC,IAAqBN;AAAA,IACrB,WAAAO,IAAY;AAAA,IACZ,GAAGC;AAAA,EAAA,IACHN,GAGE,CAACO,GAAYC,GAAG,EAAE,YAAAC,EAAA,CAAY,IAAIC,EAAA,GAGlCC,IAAyBC;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,KALmBH,KAAc,KAMhBL,IAAqB,gBAAgB;AAAA,IACtDC;AAAA,EAAA;AAGJ,SAAIH,sBAEK,OAAA,EAAI,KAAKK,GAAY,WAAWI,GAAyB,GAAGL,GACzD,UAAA;AAAA,IAAA,gBAAAO,EAAC,OAAA,EAAI,WAAU,0BACV,UAAA;AAAA,MAAAZ,KAAS,gBAAAa,EAAC,OAAA,EAAI,WAAU,4BAA4B,UAAAb,GAAM;AAAA,MAC1DE;AAAA,IAAA,GACL;AAAA,IACCD;AAAA,EAAA,GACL,IAKJ,gBAAAW,EAAC,OAAA,EAAI,WAAU,YACV,UAAA;AAAA,IAAAZ,KAAS,gBAAAa,EAAC,OAAA,EAAI,WAAU,4BAA4B,UAAAb,GAAM;AAAA,IAC1DE;AAAA,EAAA,GACL;AAER;"}
+{"version":3,"file":"BannerContent.js","sources":["../../../src/components/banner/BannerContent.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport useResizeObserver from '../../useResizeObserver';\n\nconst DEFAULT_MIN_WIDTH_BREAKPOINT = 400;\n\ntype BannerContentProps = Partial<Pick<HTMLDivElement, 'id'>> & {\n    /**\n     * The title for the banner.\n     */\n    title?: string | React.ReactElement;\n\n    /**\n     * Use this to add the banner call-to-action buttons. Wrap them in a <Banner.Actions> component.\n     */\n    actions?: React.ReactElement;\n\n    /**\n     * Breakpoint in pixels where the action buttons are placed under the banner text.\n     *\n     * On larger screens, the buttons are next to the text.\n     *\n     * @default 400\n     */\n    minWidthBreakpoint?: number;\n\n    /**\n     * Additional classname added to the wrapper element.\n     */\n    className?: string;\n};\n\nconst BannerContent = (props: PropsWithChildren<BannerContentProps>) => {\n    const {\n        title,\n        actions,\n        children,\n        minWidthBreakpoint = DEFAULT_MIN_WIDTH_BREAKPOINT,\n        className = '',\n        ...remainingProps\n    } = props;\n\n    // Check size of the container for responsive breakpoints\n    const [contentRef, _, { inlineSize }] = useResizeObserver();\n    const containerWidth = inlineSize ?? 0;\n\n    const contentWithActionClass = classNames(\n        'flex-1-1',\n        'BannerContent',\n        'display-flex gap-15',\n        containerWidth < minWidthBreakpoint ? 'flex-column' : 'flex-row align-items-center',\n        className\n    );\n\n    if (actions) {\n        return (\n            <div ref={contentRef} className={contentWithActionClass} {...remainingProps}>\n                <div className='flex-1-1 min-width-100'>\n                    {title && <div className='text-size-16 text-medium'>{title}</div>}\n                    {children}\n                </div>\n                {actions}\n            </div>\n        );\n    }\n\n    return (\n        <div className='flex-1-1'>\n            {title && <div className='text-size-16 text-medium'>{title}</div>}\n            {children}\n        </div>\n    );\n};\n\nexport default BannerContent;\n"],"names":["DEFAULT_MIN_WIDTH_BREAKPOINT","BannerContent","props","title","actions","children","minWidthBreakpoint","className","remainingProps","contentRef","_","inlineSize","useResizeObserver","contentWithActionClass","classNames","jsxs","jsx"],"mappings":";;;AAKA,MAAMA,IAA+B,KA4B/BC,IAAgB,CAACC,MAAiD;AACpE,QAAM;AAAA,IACF,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,oBAAAC,IAAqBN;AAAA,IACrB,WAAAO,IAAY;AAAA,IACZ,GAAGC;AAAA,EAAA,IACHN,GAGE,CAACO,GAAYC,GAAG,EAAE,YAAAC,EAAA,CAAY,IAAIC,EAAA,GAGlCC,IAAyBC;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,KALmBH,KAAc,KAMhBL,IAAqB,gBAAgB;AAAA,IACtDC;AAAA,EAAA;AAGJ,SAAIH,sBAEK,OAAA,EAAI,KAAKK,GAAY,WAAWI,GAAyB,GAAGL,GACzD,UAAA;AAAA,IAAA,gBAAAO,EAAC,OAAA,EAAI,WAAU,0BACV,UAAA;AAAA,MAAAZ,KAAS,gBAAAa,EAAC,OAAA,EAAI,WAAU,4BAA4B,UAAAb,GAAM;AAAA,MAC1DE;AAAA,IAAA,GACL;AAAA,IACCD;AAAA,EAAA,GACL,IAKJ,gBAAAW,EAAC,OAAA,EAAI,WAAU,YACV,UAAA;AAAA,IAAAZ,KAAS,gBAAAa,EAAC,OAAA,EAAI,WAAU,4BAA4B,UAAAb,GAAM;AAAA,IAC1DE;AAAA,EAAA,GACL;AAER;"}

package/components/barList/BarList.js

@@ -1,7 +1,7 @@
 import { jsxs as h, jsx as e } from "react/jsx-runtime";
 import f, { useMemo as j } from "react";
-import n from "classnames";
 import { motion as u } from "motion/react";
+import n from "../../utils/classNames.js";
 import { SortDirection as A } from "../../utils/SortUtils.js";
 import { useSortedBars as H } from "./useSortedBars.js";
 const O = {

package/components/barList/BarList.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarList.js","sources":["../../../src/components/barList/BarList.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport classNames from 'classnames';\nimport { motion, type Variants } from 'motion/react';\n\nimport { SortDirection, type SortDirectionType } from '../../utils/SortUtils';\nimport { useSortedBars } from './useSortedBars';\n\n/**\n * A single entry in the BarList.\n *\n * @template T Custom payload merged into the row data.\n */\nexport type BarListRow<T> = T & {\n    /**\n     * Optional unique identifier. Falls back to `name` when not provided.\n     */\n    key?: string;\n\n    /**\n     * Optional URL. When provided, the label renders as a link.\n     */\n    href?: string;\n\n    /**\n     * Numeric value used for sorting and bar width calculations.\n     */\n    value: number;\n\n    /**\n     * Label shown for the bar.\n     */\n    name: string;\n\n    /**\n     * Text color override for this specific row.\n     */\n    color?: string;\n\n    /**\n     * Progress color override for this specific row.\n     */\n    barColor?: string;\n\n    /**\n     * Background color override for this specific row.\n     */\n    background?: string;\n};\n\n/**\n * Props for the BarList component.\n *\n * @template T - The type of the custom data associated with each bar row.\n */\ntype BarListProps<T = unknown> = React.HTMLAttributes<HTMLDivElement> & {\n    /**\n     * Array of bar row data to be rendered.\n     */\n    data: BarListRow<T>[];\n\n    /**\n     * Optional function to format the numeric value displayed on the right side of each bar.\n     * Can return a string or a React element.\n     *\n     * @example\n     * valueFormatter={(value) => `${value}%`}\n     */\n    valueFormatter?: (value: number) => string | React.ReactElement;\n\n    /**\n     * A reference value used to calculate relative widths.\n     * If not provided, the maximum value in `data` will be used.\n     *\n     * @default max(data.value)\n     */\n    referenceValue?: number;\n\n    /**\n     * Whether to animate the bar width transitions using Framer Motion.\n     *\n     * @default false\n     */\n    showAnimation?: boolean;\n\n    /**\n     * Callback fired when a bar is clicked.\n     *\n     * @param payload - The full data object of the clicked bar.\n     */\n    onSelectRow?: (payload: BarListRow<T>) => void;\n\n    /**\n     * The sort order for the bars. Options are 'asc', 'desc', or 'none'.\n     *\n     * @default 'none'\n     */\n    sortOrder?: SortDirectionType | 'none';\n\n    /**\n     * Height of each bar row in pixels.\n     *\n     * @default 32\n     */\n    rowHeight?: number;\n\n    /**\n     * Opacity applied to non-hovered bars (between 0 and 1).\n     *\n     * @default 0.5\n     */\n    opacity?: number;\n\n    /**\n     * CSS color string used for the active/progress portion of each bar.\n     *\n     * @default 'bg-highlight-light'\n     */\n    barColor?: string;\n\n    /**\n     * CSS color string used for the text labels.\n     *\n     * @default 'text-color-darker'\n     */\n    labelColor?: string;\n\n    /**\n     * CSS color string used for the bar background.\n     *\n     * @default 'bg-transparent'\n     */\n    background?: string;\n\n    /**\n     * Additional className added to the wrapper element.\n     */\n    className?: string;\n};\n\n// Animation variants\nconst containerVariants: Variants = {\n    animate: {\n        transition: {\n            staggerChildren: 0.1,\n        },\n    },\n};\n\nconst barVariants: Variants = {\n    initial: { width: 0 },\n    animate: (width: number) => ({\n        width: `${width}%`,\n        transition: { duration: 0.8, ease: 'easeOut' },\n    }),\n};\n\nconst DEFAULT_ROW_HEIGHT = 25;\nconst DEFAULT_OPACITY = 0.5;\n\nconst BarListInner = <T,>(props: BarListProps<T>, forwardedRef: React.ForwardedRef<HTMLDivElement>) => {\n    const {\n        data = [],\n        valueFormatter = value => value.toString(),\n        showAnimation = false,\n        onSelectRow,\n        referenceValue,\n        sortOrder = SortDirection.DESCENDING,\n        barColor = 'bg-highlight-light',\n        labelColor = 'text-color-darker',\n        background = 'bg-transparent',\n        rowHeight = DEFAULT_ROW_HEIGHT,\n        opacity = DEFAULT_OPACITY,\n        className = '',\n        ...remainingProps\n    } = props;\n\n    const sortedData = useSortedBars(data, sortOrder, item => item.value);\n\n    const [hoveredIndex, setHoveredIndex] = React.useState<number | null>(null);\n\n    const widths = useMemo(() => {\n        const base = referenceValue ?? Math.max(...sortedData.map(item => item.value), 0);\n        return sortedData.map(item => (base === 0 || item.value === 0 ? 0 : Math.max((item.value / base) * 100, 2)));\n    }, [sortedData, referenceValue]);\n\n    return (\n        <div\n            {...remainingProps}\n            ref={forwardedRef}\n            className={classNames('display-flex justify-content-between gap-15', className)}\n        >\n            <motion.div\n                variants={showAnimation ? containerVariants : undefined}\n                initial='initial'\n                animate='animate'\n                className='width-100pct space-y-5'\n            >\n                {sortedData.map((item, index) => {\n                    const width = widths[index];\n\n                    const itemLabelColor = item.color ?? labelColor;\n                    const itemBarColor = item.barColor ?? barColor;\n                    const itemBackground = item.background ?? background;\n\n                    return (\n                        <div\n                            key={item.key ?? item.name}\n                            onMouseEnter={() => setHoveredIndex(index)}\n                            onMouseLeave={() => setHoveredIndex(null)}\n                            onClick={() => onSelectRow?.(item)}\n                            className={classNames(\n                                'position-relative width-100pct rounded-small',\n                                'transition-all transition-ease-in-out transition-duration-01',\n                                itemBackground,\n                                onSelectRow && 'cursor-pointer',\n                                hoveredIndex === index && 'bg-lightest'\n                            )}\n                        >\n                            {/* Animated Progress Bar */}\n                            <motion.div\n                                custom={width}\n                                variants={showAnimation ? barVariants : undefined}\n                                className={classNames(\n                                    'display-flex align-items-center rounded-small',\n                                    'transition-all transition-ease-in-out transition-duration-01',\n                                    itemBarColor\n                                )}\n                                style={{ height: `${rowHeight}px`, opacity: hoveredIndex === index ? 1 : opacity }}\n                                role='presentation'\n                            />\n\n                            {/* Label */}\n                            <div className='position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10'>\n                                {item.href ? (\n                                    <a\n                                        href={item.href}\n                                        className={itemLabelColor}\n                                        target='_blank'\n                                        rel='noreferrer'\n                                        onClick={event => event.stopPropagation()}\n                                    >\n                                        {item.name}\n                                    </a>\n                                ) : (\n                                    <div className={itemLabelColor}>{item.name}</div>\n                                )}\n                            </div>\n                        </div>\n                    );\n                })}\n            </motion.div>\n\n            {/* legend */}\n            <div className='space-y-5'>\n                {sortedData.map(item => (\n                    <div\n                        key={item.key ?? item.name}\n                        className={classNames('display-flex align-items-center justify-content-end')}\n                        style={{ height: `${rowHeight}px` }}\n                    >\n                        <div className='text-color-darkest'>{valueFormatter(item.value)}</div>\n                    </div>\n                ))}\n            </div>\n        </div>\n    );\n};\n\nBarListInner.displayName = 'BarList';\n\nconst BarList = React.forwardRef(BarListInner) as <T>(\n    props: BarListProps<T> & { ref?: React.ForwardedRef<HTMLDivElement> }\n) => ReturnType<typeof BarListInner>;\n\nexport default BarList;\n"],"names":["containerVariants","barVariants","width","DEFAULT_ROW_HEIGHT","DEFAULT_OPACITY","BarListInner","props","forwardedRef","data","valueFormatter","value","showAnimation","onSelectRow","referenceValue","sortOrder","SortDirection","barColor","labelColor","background","rowHeight","opacity","className","remainingProps","sortedData","useSortedBars","item","hoveredIndex","setHoveredIndex","React","widths","useMemo","base","jsxs","classNames","jsx","motion","index","itemLabelColor","itemBarColor","itemBackground","event","BarList"],"mappings":"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"}
+{"version":3,"file":"BarList.js","sources":["../../../src/components/barList/BarList.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport classNames from '../../utils/classNames';\nimport { SortDirection, type SortDirectionType } from '../../utils/SortUtils';\nimport { useSortedBars } from './useSortedBars';\n\n/**\n * A single entry in the BarList.\n *\n * @template T Custom payload merged into the row data.\n */\nexport type BarListRow<T> = T & {\n    /**\n     * Optional unique identifier. Falls back to `name` when not provided.\n     */\n    key?: string;\n\n    /**\n     * Optional URL. When provided, the label renders as a link.\n     */\n    href?: string;\n\n    /**\n     * Numeric value used for sorting and bar width calculations.\n     */\n    value: number;\n\n    /**\n     * Label shown for the bar.\n     */\n    name: string;\n\n    /**\n     * Text color override for this specific row.\n     */\n    color?: string;\n\n    /**\n     * Progress color override for this specific row.\n     */\n    barColor?: string;\n\n    /**\n     * Background color override for this specific row.\n     */\n    background?: string;\n};\n\n/**\n * Props for the BarList component.\n *\n * @template T - The type of the custom data associated with each bar row.\n */\ntype BarListProps<T = unknown> = React.HTMLAttributes<HTMLDivElement> & {\n    /**\n     * Array of bar row data to be rendered.\n     */\n    data: BarListRow<T>[];\n\n    /**\n     * Optional function to format the numeric value displayed on the right side of each bar.\n     * Can return a string or a React element.\n     *\n     * @example\n     * valueFormatter={(value) => `${value}%`}\n     */\n    valueFormatter?: (value: number) => string | React.ReactElement;\n\n    /**\n     * A reference value used to calculate relative widths.\n     * If not provided, the maximum value in `data` will be used.\n     *\n     * @default max(data.value)\n     */\n    referenceValue?: number;\n\n    /**\n     * Whether to animate the bar width transitions using Framer Motion.\n     *\n     * @default false\n     */\n    showAnimation?: boolean;\n\n    /**\n     * Callback fired when a bar is clicked.\n     *\n     * @param payload - The full data object of the clicked bar.\n     */\n    onSelectRow?: (payload: BarListRow<T>) => void;\n\n    /**\n     * The sort order for the bars. Options are 'asc', 'desc', or 'none'.\n     *\n     * @default 'none'\n     */\n    sortOrder?: SortDirectionType | 'none';\n\n    /**\n     * Height of each bar row in pixels.\n     *\n     * @default 32\n     */\n    rowHeight?: number;\n\n    /**\n     * Opacity applied to non-hovered bars (between 0 and 1).\n     *\n     * @default 0.5\n     */\n    opacity?: number;\n\n    /**\n     * CSS color string used for the active/progress portion of each bar.\n     *\n     * @default 'bg-highlight-light'\n     */\n    barColor?: string;\n\n    /**\n     * CSS color string used for the text labels.\n     *\n     * @default 'text-color-darker'\n     */\n    labelColor?: string;\n\n    /**\n     * CSS color string used for the bar background.\n     *\n     * @default 'bg-transparent'\n     */\n    background?: string;\n\n    /**\n     * Additional className added to the wrapper element.\n     */\n    className?: string;\n};\n\n// Animation variants\nconst containerVariants: Variants = {\n    animate: {\n        transition: {\n            staggerChildren: 0.1,\n        },\n    },\n};\n\nconst barVariants: Variants = {\n    initial: { width: 0 },\n    animate: (width: number) => ({\n        width: `${width}%`,\n        transition: { duration: 0.8, ease: 'easeOut' },\n    }),\n};\n\nconst DEFAULT_ROW_HEIGHT = 25;\nconst DEFAULT_OPACITY = 0.5;\n\nconst BarListInner = <T,>(props: BarListProps<T>, forwardedRef: React.ForwardedRef<HTMLDivElement>) => {\n    const {\n        data = [],\n        valueFormatter = value => value.toString(),\n        showAnimation = false,\n        onSelectRow,\n        referenceValue,\n        sortOrder = SortDirection.DESCENDING,\n        barColor = 'bg-highlight-light',\n        labelColor = 'text-color-darker',\n        background = 'bg-transparent',\n        rowHeight = DEFAULT_ROW_HEIGHT,\n        opacity = DEFAULT_OPACITY,\n        className = '',\n        ...remainingProps\n    } = props;\n\n    const sortedData = useSortedBars(data, sortOrder, item => item.value);\n\n    const [hoveredIndex, setHoveredIndex] = React.useState<number | null>(null);\n\n    const widths = useMemo(() => {\n        const base = referenceValue ?? Math.max(...sortedData.map(item => item.value), 0);\n        return sortedData.map(item => (base === 0 || item.value === 0 ? 0 : Math.max((item.value / base) * 100, 2)));\n    }, [sortedData, referenceValue]);\n\n    return (\n        <div\n            {...remainingProps}\n            ref={forwardedRef}\n            className={classNames('display-flex justify-content-between gap-15', className)}\n        >\n            <motion.div\n                variants={showAnimation ? containerVariants : undefined}\n                initial='initial'\n                animate='animate'\n                className='width-100pct space-y-5'\n            >\n                {sortedData.map((item, index) => {\n                    const width = widths[index];\n\n                    const itemLabelColor = item.color ?? labelColor;\n                    const itemBarColor = item.barColor ?? barColor;\n                    const itemBackground = item.background ?? background;\n\n                    return (\n                        <div\n                            key={item.key ?? item.name}\n                            onMouseEnter={() => setHoveredIndex(index)}\n                            onMouseLeave={() => setHoveredIndex(null)}\n                            onClick={() => onSelectRow?.(item)}\n                            className={classNames(\n                                'position-relative width-100pct rounded-small',\n                                'transition-all transition-ease-in-out transition-duration-01',\n                                itemBackground,\n                                onSelectRow && 'cursor-pointer',\n                                hoveredIndex === index && 'bg-lightest'\n                            )}\n                        >\n                            {/* Animated Progress Bar */}\n                            <motion.div\n                                custom={width}\n                                variants={showAnimation ? barVariants : undefined}\n                                className={classNames(\n                                    'display-flex align-items-center rounded-small',\n                                    'transition-all transition-ease-in-out transition-duration-01',\n                                    itemBarColor\n                                )}\n                                style={{ height: `${rowHeight}px`, opacity: hoveredIndex === index ? 1 : opacity }}\n                                role='presentation'\n                            />\n\n                            {/* Label */}\n                            <div className='position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10'>\n                                {item.href ? (\n                                    <a\n                                        href={item.href}\n                                        className={itemLabelColor}\n                                        target='_blank'\n                                        rel='noreferrer'\n                                        onClick={event => event.stopPropagation()}\n                                    >\n                                        {item.name}\n                                    </a>\n                                ) : (\n                                    <div className={itemLabelColor}>{item.name}</div>\n                                )}\n                            </div>\n                        </div>\n                    );\n                })}\n            </motion.div>\n\n            {/* legend */}\n            <div className='space-y-5'>\n                {sortedData.map(item => (\n                    <div\n                        key={item.key ?? item.name}\n                        className={classNames('display-flex align-items-center justify-content-end')}\n                        style={{ height: `${rowHeight}px` }}\n                    >\n                        <div className='text-color-darkest'>{valueFormatter(item.value)}</div>\n                    </div>\n                ))}\n            </div>\n        </div>\n    );\n};\n\nBarListInner.displayName = 'BarList';\n\nconst BarList = React.forwardRef(BarListInner) as <T>(\n    props: BarListProps<T> & { ref?: React.ForwardedRef<HTMLDivElement> }\n) => ReturnType<typeof BarListInner>;\n\nexport default BarList;\n"],"names":["containerVariants","barVariants","width","DEFAULT_ROW_HEIGHT","DEFAULT_OPACITY","BarListInner","props","forwardedRef","data","valueFormatter","value","showAnimation","onSelectRow","referenceValue","sortOrder","SortDirection","barColor","labelColor","background","rowHeight","opacity","className","remainingProps","sortedData","useSortedBars","item","hoveredIndex","setHoveredIndex","React","widths","useMemo","base","jsxs","classNames","jsx","motion","index","itemLabelColor","itemBarColor","itemBackground","event","BarList"],"mappings":"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"}

package/components/bottomSheet/BottomSheet.js

@@ -1,9 +1,9 @@
 import { jsxs as n, Fragment as I, jsx as e } from "react/jsx-runtime";
 import { useState as g, useEffect as M } from "react";
 import { createPortal as j } from "react-dom";
-import f from "classnames";
 import { motion as R } from "motion/react";
 import { isFunction as V } from "es-toolkit/predicate";
+import f from "../../utils/classNames.js";
 import { getOrCreatePortalRoot as _ } from "../../utils/portalRoot.js";
 const $ = -1e3, r = 15, J = (u) => {
   const {

package/components/bottomSheet/BottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.js","sources":["../../../src/components/bottomSheet/BottomSheet.tsx"],"sourcesContent":["import {\n    type MutableRefObject,\n    type PropsWithChildren,\n    type ReactElement,\n    type ReactNode,\n    useEffect,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport classNames from 'classnames';\nimport { motion } from 'motion/react';\nimport { isFunction } from 'es-toolkit/predicate';\n\nimport { getOrCreatePortalRoot } from '../../utils/portalRoot';\n\nconst OFFSET_POSITION = -1000;\nconst DEFAULT_OFFSET_PX = 15;\n\nexport type BottomSheetProps = {\n    /**\n     * Set the visibility of the bottom sheet. The component is already mounted and just moved offscreen.\n     *\n     * @default false\n     */\n    show: boolean;\n\n    /**\n     * Callback for when the sheet closes.\n     */\n    onClose?: (isShown: boolean) => void;\n\n    /**\n     * The width of the bottom sheet. This is useful for desktop when not using the entire screen width.\n     * When no width is given it will take the width of the content and maximum `100%` of the screen.\n     * So it this case you might want to apply a `max-width-xxx` via `className` to control it better.\n     */\n    width?: number | string;\n\n    /**\n     * The height of the bottom sheet. If no height is given, the height is automatically\n     * calculated from the content.\n     */\n    height?: number | string;\n\n    /**\n     * The title content shown in the header. If no title is given, the bottom sheet header is not shown.\n     */\n    title?: string | ReactNode;\n\n    /**\n     * Defines whether or not the close button is shown.\n     * @default true\n     */\n    showCloseButton?: boolean;\n\n    /**\n     * Defines whether or not the maximize button in the header is shown.\n     * @default false\n     */\n    showMaximizeButton?: boolean;\n\n    /**\n     * The callback function triggered when the maximize button is clicked and the height changes.\n     *\n     * @default () => {}\n     */\n    onHeightChange?: VoidFunction;\n\n    /**\n     * Set to `true` to detach the bottom sheet from the left side and the bottom and create a little offset.\n     *\n     * @default false\n     */\n    detach?: boolean;\n\n    /**\n     * Defines the amount of pixels for the sheet.\n     *\n     * @default 15\n     */\n    detachOffset?: number;\n\n    /**\n     * Set to `true` to render a modal like backdrop to emphasize the bottom sheet.\n     *\n     * @default false\n     */\n    hasBackdrop?: boolean;\n\n    /**\n     * Callback function triggered when the backdrop is clicked. Usually used to close the bottom sheet.\n     *\n     * @default () => {}\n     */\n    onBackdropClick?: VoidFunction;\n\n    /**\n     * A react ref added to the bottom sheet body.\n     */\n    bodyRef?: MutableRefObject<HTMLDivElement | null>;\n\n    /**\n     * Additional classes to be set on the body element.\n     */\n    bodyClassName?: string;\n\n    /**\n     * Additional classes to be set on the wrapping element.\n     */\n    className?: string;\n};\n\nconst BottomSheet = (props: BottomSheetProps & PropsWithChildren) => {\n    const {\n        show = false,\n        onClose,\n        width,\n        height,\n        title,\n        detach = false,\n        detachOffset = DEFAULT_OFFSET_PX,\n        hasBackdrop = false,\n        showCloseButton = true,\n        showMaximizeButton = false,\n        onHeightChange = () => {},\n        bodyRef,\n        bodyClassName,\n        className,\n        children,\n        onBackdropClick = () => {},\n        ...remainingProps\n    } = props;\n\n    const [isShown, setIsShown] = useState(show);\n    const [isMaxHeight, setIsMaxHeight] = useState(false);\n\n    useEffect(() => setIsShown(show), [show]);\n\n    const modalRoot = getOrCreatePortalRoot();\n\n    const handleToggle = () => {\n        const newValue = !isShown;\n        if (isFunction(onClose)) {\n            onClose(newValue);\n        } else {\n            setIsShown(newValue);\n        }\n    };\n\n    const handleBackdropClick = () => {\n        onBackdropClick();\n        handleToggle();\n    };\n\n    const handleMaximize = () => {\n        const newValue = !isMaxHeight;\n        setIsMaxHeight(newValue);\n        onHeightChange();\n    };\n\n    const sheetClasses = classNames(\n        'bottom-sheet',\n        'position-fixed left-0',\n        !height && !isMaxHeight && 'height-auto',\n        'bg-white',\n        'shadow-hard',\n        detach ? 'rounded' : 'rounded-top-left rounded-top-right',\n        className && className\n    );\n\n    const sheetBodyClasses = classNames('bottom-sheet-body', 'height-100pct', bodyClassName && bodyClassName);\n\n    const sheetHeight = isMaxHeight ? window.innerHeight : height;\n\n    // Note: we always have to kep the body element in the DOM as there might be a ref assigned to it.\n    // Unmounting it will lead to losing the reference and breaking the functionality that is implemented on that ref.\n    // That is the reason why there is no \"AnimatePresence\" with an \"exit\" animation here.\n    // Instead, we change the \"animate\" values.\n\n    return createPortal(\n        <>\n            <motion.div\n                {...remainingProps}\n                className={sheetClasses}\n                style={{\n                    width,\n                    maxWidth: detach ? `calc(100% - ${DEFAULT_OFFSET_PX * 2}px)` : '100%',\n                    margin: detach ? `${DEFAULT_OFFSET_PX}px` : 0,\n                }}\n                initial={{ opacity: 0 }}\n                animate={{\n                    opacity: isShown ? 1 : 0,\n                    y: 0,\n                    bottom: isShown ? 0 : OFFSET_POSITION,\n                    height: isShown ? sheetHeight : 0,\n                }}\n            >\n                <div className='bottom-sheet-header'>\n                    {title && (\n                        <div\n                            className={\n                                'bottom-sheet-title display-flex justify-content-between padding-15 ' +\n                                'border border-top-none border-left-none border-right-none border-color-lighter'\n                            }\n                        >\n                            <div className='text-size-18'>{title}</div>\n                        </div>\n                    )}\n                    {showCloseButton && (\n                        <div className='bottom-sheet-close position-absolute top-10 right-10'>\n                            <button type='button' className='btn btn-muted btn-sm btn-icon-only' onClick={handleToggle}>\n                                <span className='rioglyph rioglyph-remove' />\n                            </button>\n                        </div>\n                    )}\n                    {showMaximizeButton && (\n                        <div\n                            className={\n                                'bottom-sheet-maximize height-30 ' +\n                                'position-absolute top-5 left-50pct translate-x-50 cursor-pointer'\n                            }\n                            onClick={handleMaximize}\n                        >\n                            <div className='height-5 width-40 rounded bg-lighter' />\n                        </div>\n                    )}\n                </div>\n                <div className={sheetBodyClasses} ref={bodyRef}>\n                    {isShown && children}\n                </div>\n            </motion.div>\n\n            {hasBackdrop && isShown && <div className='bottom-sheet-backdrop' onClick={handleBackdropClick} />}\n        </>,\n        modalRoot\n    ) as ReactElement;\n};\n\nexport default BottomSheet;\n"],"names":["OFFSET_POSITION","DEFAULT_OFFSET_PX","BottomSheet","props","show","onClose","width","height","title","detach","detachOffset","hasBackdrop","showCloseButton","showMaximizeButton","onHeightChange","bodyRef","bodyClassName","className","children","onBackdropClick","remainingProps","isShown","setIsShown","useState","isMaxHeight","setIsMaxHeight","useEffect","modalRoot","getOrCreatePortalRoot","handleToggle","newValue","isFunction","handleBackdropClick","handleMaximize","sheetClasses","classNames","sheetBodyClasses","sheetHeight","createPortal","jsxs","Fragment","motion","jsx"],"mappings":"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"}
+{"version":3,"file":"BottomSheet.js","sources":["../../../src/components/bottomSheet/BottomSheet.tsx"],"sourcesContent":["import {\n    type MutableRefObject,\n    type PropsWithChildren,\n    type ReactElement,\n    type ReactNode,\n    useEffect,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { motion } from 'motion/react';\nimport { isFunction } from 'es-toolkit/predicate';\n\nimport classNames from '../../utils/classNames';\nimport { getOrCreatePortalRoot } from '../../utils/portalRoot';\n\nconst OFFSET_POSITION = -1000;\nconst DEFAULT_OFFSET_PX = 15;\n\nexport type BottomSheetProps = {\n    /**\n     * Set the visibility of the bottom sheet. The component is already mounted and just moved offscreen.\n     *\n     * @default false\n     */\n    show: boolean;\n\n    /**\n     * Callback for when the sheet closes.\n     */\n    onClose?: (isShown: boolean) => void;\n\n    /**\n     * The width of the bottom sheet. This is useful for desktop when not using the entire screen width.\n     * When no width is given it will take the width of the content and maximum `100%` of the screen.\n     * So it this case you might want to apply a `max-width-xxx` via `className` to control it better.\n     */\n    width?: number | string;\n\n    /**\n     * The height of the bottom sheet. If no height is given, the height is automatically\n     * calculated from the content.\n     */\n    height?: number | string;\n\n    /**\n     * The title content shown in the header. If no title is given, the bottom sheet header is not shown.\n     */\n    title?: string | ReactNode;\n\n    /**\n     * Defines whether or not the close button is shown.\n     * @default true\n     */\n    showCloseButton?: boolean;\n\n    /**\n     * Defines whether or not the maximize button in the header is shown.\n     * @default false\n     */\n    showMaximizeButton?: boolean;\n\n    /**\n     * The callback function triggered when the maximize button is clicked and the height changes.\n     *\n     * @default () => {}\n     */\n    onHeightChange?: VoidFunction;\n\n    /**\n     * Set to `true` to detach the bottom sheet from the left side and the bottom and create a little offset.\n     *\n     * @default false\n     */\n    detach?: boolean;\n\n    /**\n     * Defines the amount of pixels for the sheet.\n     *\n     * @default 15\n     */\n    detachOffset?: number;\n\n    /**\n     * Set to `true` to render a modal like backdrop to emphasize the bottom sheet.\n     *\n     * @default false\n     */\n    hasBackdrop?: boolean;\n\n    /**\n     * Callback function triggered when the backdrop is clicked. Usually used to close the bottom sheet.\n     *\n     * @default () => {}\n     */\n    onBackdropClick?: VoidFunction;\n\n    /**\n     * A react ref added to the bottom sheet body.\n     */\n    bodyRef?: MutableRefObject<HTMLDivElement | null>;\n\n    /**\n     * Additional classes to be set on the body element.\n     */\n    bodyClassName?: string;\n\n    /**\n     * Additional classes to be set on the wrapping element.\n     */\n    className?: string;\n};\n\nconst BottomSheet = (props: BottomSheetProps & PropsWithChildren) => {\n    const {\n        show = false,\n        onClose,\n        width,\n        height,\n        title,\n        detach = false,\n        detachOffset = DEFAULT_OFFSET_PX,\n        hasBackdrop = false,\n        showCloseButton = true,\n        showMaximizeButton = false,\n        onHeightChange = () => {},\n        bodyRef,\n        bodyClassName,\n        className,\n        children,\n        onBackdropClick = () => {},\n        ...remainingProps\n    } = props;\n\n    const [isShown, setIsShown] = useState(show);\n    const [isMaxHeight, setIsMaxHeight] = useState(false);\n\n    useEffect(() => setIsShown(show), [show]);\n\n    const modalRoot = getOrCreatePortalRoot();\n\n    const handleToggle = () => {\n        const newValue = !isShown;\n        if (isFunction(onClose)) {\n            onClose(newValue);\n        } else {\n            setIsShown(newValue);\n        }\n    };\n\n    const handleBackdropClick = () => {\n        onBackdropClick();\n        handleToggle();\n    };\n\n    const handleMaximize = () => {\n        const newValue = !isMaxHeight;\n        setIsMaxHeight(newValue);\n        onHeightChange();\n    };\n\n    const sheetClasses = classNames(\n        'bottom-sheet',\n        'position-fixed left-0',\n        !height && !isMaxHeight && 'height-auto',\n        'bg-white',\n        'shadow-hard',\n        detach ? 'rounded' : 'rounded-top-left rounded-top-right',\n        className && className\n    );\n\n    const sheetBodyClasses = classNames('bottom-sheet-body', 'height-100pct', bodyClassName && bodyClassName);\n\n    const sheetHeight = isMaxHeight ? window.innerHeight : height;\n\n    // Note: we always have to kep the body element in the DOM as there might be a ref assigned to it.\n    // Unmounting it will lead to losing the reference and breaking the functionality that is implemented on that ref.\n    // That is the reason why there is no \"AnimatePresence\" with an \"exit\" animation here.\n    // Instead, we change the \"animate\" values.\n\n    return createPortal(\n        <>\n            <motion.div\n                {...remainingProps}\n                className={sheetClasses}\n                style={{\n                    width,\n                    maxWidth: detach ? `calc(100% - ${DEFAULT_OFFSET_PX * 2}px)` : '100%',\n                    margin: detach ? `${DEFAULT_OFFSET_PX}px` : 0,\n                }}\n                initial={{ opacity: 0 }}\n                animate={{\n                    opacity: isShown ? 1 : 0,\n                    y: 0,\n                    bottom: isShown ? 0 : OFFSET_POSITION,\n                    height: isShown ? sheetHeight : 0,\n                }}\n            >\n                <div className='bottom-sheet-header'>\n                    {title && (\n                        <div\n                            className={\n                                'bottom-sheet-title display-flex justify-content-between padding-15 ' +\n                                'border border-top-none border-left-none border-right-none border-color-lighter'\n                            }\n                        >\n                            <div className='text-size-18'>{title}</div>\n                        </div>\n                    )}\n                    {showCloseButton && (\n                        <div className='bottom-sheet-close position-absolute top-10 right-10'>\n                            <button type='button' className='btn btn-muted btn-sm btn-icon-only' onClick={handleToggle}>\n                                <span className='rioglyph rioglyph-remove' />\n                            </button>\n                        </div>\n                    )}\n                    {showMaximizeButton && (\n                        <div\n                            className={\n                                'bottom-sheet-maximize height-30 ' +\n                                'position-absolute top-5 left-50pct translate-x-50 cursor-pointer'\n                            }\n                            onClick={handleMaximize}\n                        >\n                            <div className='height-5 width-40 rounded bg-lighter' />\n                        </div>\n                    )}\n                </div>\n                <div className={sheetBodyClasses} ref={bodyRef}>\n                    {isShown && children}\n                </div>\n            </motion.div>\n\n            {hasBackdrop && isShown && <div className='bottom-sheet-backdrop' onClick={handleBackdropClick} />}\n        </>,\n        modalRoot\n    ) as ReactElement;\n};\n\nexport default BottomSheet;\n"],"names":["OFFSET_POSITION","DEFAULT_OFFSET_PX","BottomSheet","props","show","onClose","width","height","title","detach","detachOffset","hasBackdrop","showCloseButton","showMaximizeButton","onHeightChange","bodyRef","bodyClassName","className","children","onBackdropClick","remainingProps","isShown","setIsShown","useState","isMaxHeight","setIsMaxHeight","useEffect","modalRoot","getOrCreatePortalRoot","handleToggle","newValue","isFunction","handleBackdropClick","handleMaximize","sheetClasses","classNames","sheetBodyClasses","sheetHeight","createPortal","jsxs","Fragment","motion","jsx"],"mappings":";;;;;;;AAeA,MAAMA,IAAkB,MAClBC,IAAoB,IAgGpBC,IAAc,CAACC,MAAgD;AACjE,QAAM;AAAA,IACF,MAAAC,IAAO;AAAA,IACP,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,cAAAC,IAAeT;AAAA,IACf,aAAAU,IAAc;AAAA,IACd,iBAAAC,IAAkB;AAAA,IAClB,oBAAAC,IAAqB;AAAA,IACrB,gBAAAC,IAAiB,MAAM;AAAA,IAAC;AAAA,IACxB,SAAAC;AAAA,IACA,eAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC,IAAkB,MAAM;AAAA,IAAC;AAAA,IACzB,GAAGC;AAAA,EAAA,IACHjB,GAEE,CAACkB,GAASC,CAAU,IAAIC,EAASnB,CAAI,GACrC,CAACoB,GAAaC,CAAc,IAAIF,EAAS,EAAK;AAEpD,EAAAG,EAAU,MAAMJ,EAAWlB,CAAI,GAAG,CAACA,CAAI,CAAC;AAExC,QAAMuB,IAAYC,EAAA,GAEZC,IAAe,MAAM;AACvB,UAAMC,IAAW,CAACT;AAClB,IAAIU,EAAW1B,CAAO,IAClBA,EAAQyB,CAAQ,IAEhBR,EAAWQ,CAAQ;AAAA,EAE3B,GAEME,IAAsB,MAAM;AAC9B,IAAAb,EAAA,GACAU,EAAA;AAAA,EACJ,GAEMI,IAAiB,MAAM;AAEzB,IAAAR,EADiB,CAACD,CACK,GACvBV,EAAA;AAAA,EACJ,GAEMoB,IAAeC;AAAA,IACjB;AAAA,IACA;AAAA,IACA,CAAC5B,KAAU,CAACiB,KAAe;AAAA,IAC3B;AAAA,IACA;AAAA,IACAf,IAAS,YAAY;AAAA,IACrBQ,KAAaA;AAAA,EAAA,GAGXmB,IAAmBD,EAAW,qBAAqB,iBAAiBnB,KAAiBA,CAAa,GAElGqB,IAAcb,IAAc,OAAO,cAAcjB;AAOvD,SAAO+B;AAAA,IACH,gBAAAC,EAAAC,GAAA,EACI,UAAA;AAAA,MAAA,gBAAAD;AAAA,QAACE,EAAO;AAAA,QAAP;AAAA,UACI,GAAGrB;AAAA,UACJ,WAAWc;AAAA,UACX,OAAO;AAAA,YACH,OAAA5B;AAAA,YACA,UAAUG,IAAS,eAAeR,IAAoB,CAAC,QAAQ;AAAA,YAC/D,QAAQQ,IAAS,GAAGR,CAAiB,OAAO;AAAA,UAAA;AAAA,UAEhD,SAAS,EAAE,SAAS,EAAA;AAAA,UACpB,SAAS;AAAA,YACL,SAASoB,IAAU,IAAI;AAAA,YACvB,GAAG;AAAA,YACH,QAAQA,IAAU,IAAIrB;AAAA,YACtB,QAAQqB,IAAUgB,IAAc;AAAA,UAAA;AAAA,UAGpC,UAAA;AAAA,YAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,uBACV,UAAA;AAAA,cAAA/B,KACG,gBAAAkC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,WACI;AAAA,kBAIJ,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,gBAAgB,UAAAlC,EAAA,CAAM;AAAA,gBAAA;AAAA,cAAA;AAAA,cAG5CI,KACG,gBAAA8B,EAAC,OAAA,EAAI,WAAU,wDACX,UAAA,gBAAAA,EAAC,YAAO,MAAK,UAAS,WAAU,sCAAqC,SAASb,GAC1E,UAAA,gBAAAa,EAAC,UAAK,WAAU,4BAA2B,GAC/C,EAAA,CACJ;AAAA,cAEH7B,KACG,gBAAA6B;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,WACI;AAAA,kBAGJ,SAAST;AAAA,kBAET,UAAA,gBAAAS,EAAC,OAAA,EAAI,WAAU,uCAAA,CAAuC;AAAA,gBAAA;AAAA,cAAA;AAAA,YAC1D,GAER;AAAA,8BACC,OAAA,EAAI,WAAWN,GAAkB,KAAKrB,GAClC,eAAWG,EAAA,CAChB;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAGHP,KAAeU,KAAW,gBAAAqB,EAAC,SAAI,WAAU,yBAAwB,SAASV,EAAA,CAAqB;AAAA,IAAA,GACpG;AAAA,IACAL;AAAA,EAAA;AAER;"}